/* Minification failed. Returning unminified contents.
(1003,31): run-time error CSS1046: Expect comma, found '234'
(1003,38): run-time error CSS1046: Expect comma, found ')'
(1072,31): run-time error CSS1046: Expect comma, found '234'
(1072,38): run-time error CSS1046: Expect comma, found ')'
(4915,30): run-time error CSS1046: Expect comma, found '160'
(4915,37): run-time error CSS1046: Expect comma, found ')'
(5488,67): run-time error CSS1039: Token not allowed after unary operator: '-csw-theme'
(5524,106): run-time error CSS1039: Token not allowed after unary operator: '-band'
(5524,146): run-time error CSS1039: Token not allowed after unary operator: '-line'
(5524,195): run-time error CSS1039: Token not allowed after unary operator: '-faint'
(5525,44): run-time error CSS1039: Token not allowed after unary operator: '-accent-line'
(5525,85): run-time error CSS1039: Token not allowed after unary operator: '-card'
(5527,133): run-time error CSS1039: Token not allowed after unary operator: '-head'
(5528,43): run-time error CSS1039: Token not allowed after unary operator: '-faint'
(5531,113): run-time error CSS1039: Token not allowed after unary operator: '-band'
(5531,142): run-time error CSS1039: Token not allowed after unary operator: '-muted'
(5532,85): run-time error CSS1039: Token not allowed after unary operator: '-faint'
(5533,157): run-time error CSS1039: Token not allowed after unary operator: '-hair'
(5535,52): run-time error CSS1039: Token not allowed after unary operator: '-hover'
(5536,40): run-time error CSS1039: Token not allowed after unary operator: '-hover'
(5536,89): run-time error CSS1039: Token not allowed after unary operator: '-accent'
(5538,45): run-time error CSS1039: Token not allowed after unary operator: '-head'
(5540,75): run-time error CSS1039: Token not allowed after unary operator: '-head'
(5541,60): run-time error CSS1039: Token not allowed after unary operator: '-muted'
(5543,46): run-time error CSS1039: Token not allowed after unary operator: '-faint'
(5544,141): run-time error CSS1039: Token not allowed after unary operator: '-accent'
(5550,105): run-time error CSS1039: Token not allowed after unary operator: '-band-2'
(5550,136): run-time error CSS1039: Token not allowed after unary operator: '-muted'
(5552,127): run-time error CSS1039: Token not allowed after unary operator: '-card'
(5556,140): run-time error CSS1039: Token not allowed after unary operator: '-muted'
(5557,44): run-time error CSS1039: Token not allowed after unary operator: '-line'
(5561,79): run-time error CSS1039: Token not allowed after unary operator: '-faint'
(5571,22): run-time error CSS1039: Token not allowed after unary operator: '-card'
(5571,59): run-time error CSS1039: Token not allowed after unary operator: '-line'
(5572,96): run-time error CSS1039: Token not allowed after unary operator: '-ink'
(5576,47): run-time error CSS1039: Token not allowed after unary operator: '-accent-soft'
(5579,112): run-time error CSS1039: Token not allowed after unary operator: '-tint'
(5579,159): run-time error CSS1039: Token not allowed after unary operator: '-hair'
(5583,76): run-time error CSS1039: Token not allowed after unary operator: '-head'
(5584,62): run-time error CSS1039: Token not allowed after unary operator: '-faint'
(5585,165): run-time error CSS1039: Token not allowed after unary operator: '-muted'
(5588,52): run-time error CSS1039: Token not allowed after unary operator: '-hover'
(5588,82): run-time error CSS1039: Token not allowed after unary operator: '-head'
(5591,117): run-time error CSS1039: Token not allowed after unary operator: '-card'
(5595,43): run-time error CSS1039: Token not allowed after unary operator: '-muted'
(5595,115): run-time error CSS1039: Token not allowed after unary operator: '-faint'
(5596,87): run-time error CSS1039: Token not allowed after unary operator: '-faint'
(5597,87): run-time error CSS1039: Token not allowed after unary operator: '-hair'
(5602,62): run-time error CSS1039: Token not allowed after unary operator: '-card'
(5602,99): run-time error CSS1039: Token not allowed after unary operator: '-line'
(5603,58): run-time error CSS1039: Token not allowed after unary operator: '-band-2'
(5603,89): run-time error CSS1039: Token not allowed after unary operator: '-head'
(5607,43): run-time error CSS1039: Token not allowed after unary operator: '-faint'
(5608,61): run-time error CSS1039: Token not allowed after unary operator: '-faint'
(5611,75): run-time error CSS1039: Token not allowed after unary operator: '-muted'
(5613,26): run-time error CSS1039: Token not allowed after unary operator: '-accent'
(5617,132): run-time error CSS1039: Token not allowed after unary operator: '-band'
(5617,161): run-time error CSS1039: Token not allowed after unary operator: '-ink'
(5618,34): run-time error CSS1039: Token not allowed after unary operator: '-hover'
(5620,116): run-time error CSS1039: Token not allowed after unary operator: '-faint'
(5623,60): run-time error CSS1039: Token not allowed after unary operator: '-faint'
(5626,124): run-time error CSS1039: Token not allowed after unary operator: '-faint'
(5627,93): run-time error CSS1039: Token not allowed after unary operator: '-faint'
(5632,99): run-time error CSS1039: Token not allowed after unary operator: '-tint'
(5632,143): run-time error CSS1039: Token not allowed after unary operator: '-hair'
(5635,84): run-time error CSS1039: Token not allowed after unary operator: '-line'
(5635,291): run-time error CSS1039: Token not allowed after unary operator: '-card'
(5635,317): run-time error CSS1039: Token not allowed after unary operator: '-head'
(5636,49): run-time error CSS1039: Token not allowed after unary operator: '-faint'
(5637,49): run-time error CSS1039: Token not allowed after unary operator: '-accent'
(5637,95): run-time error CSS1039: Token not allowed after unary operator: '-accent-soft'
(5639,146): run-time error CSS1039: Token not allowed after unary operator: '-accent'
(5650,84): run-time error CSS1039: Token not allowed after unary operator: '-card'
(5650,121): run-time error CSS1039: Token not allowed after unary operator: '-line'
(5650,189): run-time error CSS1039: Token not allowed after unary operator: '-ink'
(5651,41): run-time error CSS1039: Token not allowed after unary operator: '-m2-chrome'
(5657,99): run-time error CSS1039: Token not allowed after unary operator: '-hair'
(5663,70): run-time error CSS1039: Token not allowed after unary operator: '-line'
(5663,125): run-time error CSS1039: Token not allowed after unary operator: '-card'
(5663,151): run-time error CSS1039: Token not allowed after unary operator: '-muted'
(5664,39): run-time error CSS1039: Token not allowed after unary operator: '-hover'
(5665,39): run-time error CSS1039: Token not allowed after unary operator: '-accent-soft'
(5665,82): run-time error CSS1039: Token not allowed after unary operator: '-accent-line'
(5665,118): run-time error CSS1039: Token not allowed after unary operator: '-accent-ink'
(5666,69): run-time error CSS1039: Token not allowed after unary operator: '-faint'
(5667,40): run-time error CSS1039: Token not allowed after unary operator: '-accent-ink'
(5671,82): run-time error CSS1039: Token not allowed after unary operator: '-hair'
(5673,52): run-time error CSS1039: Token not allowed after unary operator: '-muted'
(5673,124): run-time error CSS1039: Token not allowed after unary operator: '-faint'
(5676,145): run-time error CSS1039: Token not allowed after unary operator: '-band-2'
(5676,173): run-time error CSS1039: Token not allowed after unary operator: '-hover'
(5676,200): run-time error CSS1039: Token not allowed after unary operator: '-band-2'
(5693,74): run-time error CSS1039: Token not allowed after unary operator: '-card'
(5693,111): run-time error CSS1039: Token not allowed after unary operator: '-line'
(5695,112): run-time error CSS1039: Token not allowed after unary operator: '-ink'
(5696,41): run-time error CSS1039: Token not allowed after unary operator: '-hover'
(5698,65): run-time error CSS1039: Token not allowed after unary operator: '-faint'
(5706,46): run-time error CSS1039: Token not allowed after unary operator: '-faint'
(5715,52): run-time error CSS1039: Token not allowed after unary operator: '-faint'
(5718,108): run-time error CSS1039: Token not allowed after unary operator: '-head'
(5751,122): run-time error CSS1039: Token not allowed after unary operator: '-line'
(5751,167): run-time error CSS1039: Token not allowed after unary operator: '-band-2'
(5751,189): run-time error CSS1039: Token not allowed after unary operator: '-muted'
(5752,59): run-time error CSS1039: Token not allowed after unary operator: '-hover'
(5752,103): run-time error CSS1039: Token not allowed after unary operator: '-head'
(5756,153): run-time error CSS1039: Token not allowed after unary operator: '-ink'
(5774,84): run-time error CSS1039: Token not allowed after unary operator: '-accent'
(5775,60): run-time error CSS1039: Token not allowed after unary operator: '-head'
(5783,32): run-time error CSS1039: Token not allowed after unary operator: '-grey-soft'
(5783,57): run-time error CSS1039: Token not allowed after unary operator: '-faint'
(5784,32): run-time error CSS1039: Token not allowed after unary operator: '-blue-soft'
(5784,57): run-time error CSS1039: Token not allowed after unary operator: '-blue'
(5785,33): run-time error CSS1039: Token not allowed after unary operator: '-green-soft'
(5785,59): run-time error CSS1039: Token not allowed after unary operator: '-green'
(5786,31): run-time error CSS1039: Token not allowed after unary operator: '-red-soft'
(5786,55): run-time error CSS1039: Token not allowed after unary operator: '-red'
(5787,33): run-time error CSS1039: Token not allowed after unary operator: '-amber-soft'
(5787,59): run-time error CSS1039: Token not allowed after unary operator: '-amber-ink'
(5788,32): run-time error CSS1039: Token not allowed after unary operator: '-teal-soft'
(5788,57): run-time error CSS1039: Token not allowed after unary operator: '-teal'
(5789,110): run-time error CSS1039: Token not allowed after unary operator: '-band-2'
(5789,132): run-time error CSS1039: Token not allowed after unary operator: '-muted'
(5801,139): run-time error CSS1039: Token not allowed after unary operator: '-line'
(5801,164): run-time error CSS1039: Token not allowed after unary operator: '-card'
(5801,184): run-time error CSS1039: Token not allowed after unary operator: '-muted'
(5802,30): run-time error CSS1039: Token not allowed after unary operator: '-head'
(5803,35): run-time error CSS1039: Token not allowed after unary operator: '-accent-soft'
(5803,69): run-time error CSS1039: Token not allowed after unary operator: '-accent-line'
(5803,96): run-time error CSS1039: Token not allowed after unary operator: '-accent'
(5805,102): run-time error CSS1039: Token not allowed after unary operator: '-head'
(5806,47): run-time error CSS1039: Token not allowed after unary operator: '-faint'
(5807,55): run-time error CSS1039: Token not allowed after unary operator: '-line'
(5808,46): run-time error CSS1039: Token not allowed after unary operator: '-accent-line'
(5809,40): run-time error CSS1039: Token not allowed after unary operator: '-red'
(5810,57): run-time error CSS1039: Token not allowed after unary operator: '-line'
(5810,121): run-time error CSS1039: Token not allowed after unary operator: '-card'
(5811,89): run-time error CSS1039: Token not allowed after unary operator: '-muted'
(5812,34): run-time error CSS1039: Token not allowed after unary operator: '-accent-soft'
(5812,61): run-time error CSS1039: Token not allowed after unary operator: '-accent-ink'
(5813,47): run-time error CSS1039: Token not allowed after unary operator: '-faint'
(5815,108): run-time error CSS1039: Token not allowed after unary operator: '-faint'
(5816,130): run-time error CSS1039: Token not allowed after unary operator: '-line'
(5816,155): run-time error CSS1039: Token not allowed after unary operator: '-card'
(5816,175): run-time error CSS1039: Token not allowed after unary operator: '-muted'
(5817,31): run-time error CSS1039: Token not allowed after unary operator: '-head'
(5818,38): run-time error CSS1039: Token not allowed after unary operator: '-accent-line'
(5818,70): run-time error CSS1039: Token not allowed after unary operator: '-accent-soft'
(5818,97): run-time error CSS1039: Token not allowed after unary operator: '-accent-ink'
(5819,126): run-time error CSS1039: Token not allowed after unary operator: '-line'
(5819,146): run-time error CSS1039: Token not allowed after unary operator: '-head'
(5820,30): run-time error CSS1039: Token not allowed after unary operator: '-faint'
(5822,132): run-time error CSS1039: Token not allowed after unary operator: '-card'
(5822,164): run-time error CSS1039: Token not allowed after unary operator: '-line'
(5822,184): run-time error CSS1039: Token not allowed after unary operator: '-muted'
(5823,51): run-time error CSS1039: Token not allowed after unary operator: '-head'
(5824,26): run-time error CSS1039: Token not allowed after unary operator: '-faint'
(5825,32): run-time error CSS1039: Token not allowed after unary operator: '-red'
(5827,45): run-time error CSS1039: Token not allowed after unary operator: '-muted'
(5828,35): run-time error CSS1039: Token not allowed after unary operator: '-red'
(5829,57): run-time error CSS1039: Token not allowed after unary operator: '-faint'
(5831,173): run-time error CSS1039: Token not allowed after unary operator: '-band-2'
(5831,195): run-time error CSS1039: Token not allowed after unary operator: '-head'
(5832,38): run-time error CSS1039: Token not allowed after unary operator: '-hover'
(5832,59): run-time error CSS1039: Token not allowed after unary operator: '-head'
(5833,95): run-time error CSS1039: Token not allowed after unary operator: '-accent'
(5834,49): run-time error CSS1039: Token not allowed after unary operator: '-accent-ink'
(5835,39): run-time error CSS1039: Token not allowed after unary operator: '-red'
(5843,92): run-time error CSS1039: Token not allowed after unary operator: '-card'
(5845,108): run-time error CSS1039: Token not allowed after unary operator: '-faint'
(5846,44): run-time error CSS1039: Token not allowed after unary operator: '-head'
(5847,115): run-time error CSS1039: Token not allowed after unary operator: '-card'
(5848,114): run-time error CSS1039: Token not allowed after unary operator: '-head'
(5854,48): run-time error CSS1039: Token not allowed after unary operator: '-red'
(5855,82): run-time error CSS1039: Token not allowed after unary operator: '-faint'
(5859,135): run-time error CSS1039: Token not allowed after unary operator: '-head'
(5860,112): run-time error CSS1039: Token not allowed after unary operator: '-faint'
(5867,106): run-time error CSS1039: Token not allowed after unary operator: '-hair'
(5868,43): run-time error CSS1039: Token not allowed after unary operator: '-muted'
(5869,32): run-time error CSS1039: Token not allowed after unary operator: '-head'
(5870,32): run-time error CSS1039: Token not allowed after unary operator: '-head'
(5871,41): run-time error CSS1039: Token not allowed after unary operator: '-muted'
(5872,35): run-time error CSS1039: Token not allowed after unary operator: '-accent-soft'
(5872,62): run-time error CSS1039: Token not allowed after unary operator: '-accent-ink'
(5877,144): run-time error CSS1039: Token not allowed after unary operator: '-line'
(5877,164): run-time error CSS1039: Token not allowed after unary operator: '-faint'
(5878,53): run-time error CSS1039: Token not allowed after unary operator: '-accent'
(5879,115): run-time error CSS1039: Token not allowed after unary operator: '-head'
(5880,45): run-time error CSS1039: Token not allowed after unary operator: '-faint'
(5884,55): run-time error CSS1039: Token not allowed after unary operator: '-card'
(5884,160): run-time error CSS1039: Token not allowed after unary operator: '-faint'
(5886,185): run-time error CSS1039: Token not allowed after unary operator: '-hair'
(5893,58): run-time error CSS1039: Token not allowed after unary operator: '-hover'
(5895,122): run-time error CSS1039: Token not allowed after unary operator: '-accent-soft'
(5895,149): run-time error CSS1039: Token not allowed after unary operator: '-accent-ink'
(5896,36): run-time error CSS1039: Token not allowed after unary operator: '-accent-soft'
(5900,50): run-time error CSS1039: Token not allowed after unary operator: '-faint'
(5903,109): run-time error CSS1039: Token not allowed after unary operator: '-faint'
(5904,58): run-time error CSS1039: Token not allowed after unary operator: '-head'
(5905,42): run-time error CSS1039: Token not allowed after unary operator: '-ink'
(5909,27): run-time error CSS1039: Token not allowed after unary operator: '-accent'
(5910,49): run-time error CSS1039: Token not allowed after unary operator: '-muted'
(5911,24): run-time error CSS1039: Token not allowed after unary operator: '-accent'
(5912,41): run-time error CSS1039: Token not allowed after unary operator: '-faint'
(5913,26): run-time error CSS1039: Token not allowed after unary operator: '-muted'
(5914,45): run-time error CSS1039: Token not allowed after unary operator: '-muted'
(5917,106): run-time error CSS1039: Token not allowed after unary operator: '-muted'
(5918,29): run-time error CSS1039: Token not allowed after unary operator: '-head'
(5918,54): run-time error CSS1039: Token not allowed after unary operator: '-band-2'
(5919,39): run-time error CSS1039: Token not allowed after unary operator: '-red'
(5919,63): run-time error CSS1039: Token not allowed after unary operator: '-red-soft'
(5920,114): run-time error CSS1039: Token not allowed after unary operator: '-muted'
(5920,153): run-time error CSS1039: Token not allowed after unary operator: '-hair'
(5921,29): run-time error CSS1039: Token not allowed after unary operator: '-head'
(5925,78): run-time error CSS1039: Token not allowed after unary operator: '-accent'
(5926,60): run-time error CSS1039: Token not allowed after unary operator: '-faint'
(5927,42): run-time error CSS1039: Token not allowed after unary operator: '-muted'
(5928,42): run-time error CSS1039: Token not allowed after unary operator: '-muted'
(5929,34): run-time error CSS1039: Token not allowed after unary operator: '-red'
(5930,27): run-time error CSS1039: Token not allowed after unary operator: '-accent'
(5931,24): run-time error CSS1039: Token not allowed after unary operator: '-faint'
(5934,107): run-time error CSS1039: Token not allowed after unary operator: '-card'
(5934,138): run-time error CSS1039: Token not allowed after unary operator: '-line'
(5937,126): run-time error CSS1039: Token not allowed after unary operator: '-grey-soft'
(5937,151): run-time error CSS1039: Token not allowed after unary operator: '-muted'
(5938,38): run-time error CSS1039: Token not allowed after unary operator: '-accent-soft'
(5938,65): run-time error CSS1039: Token not allowed after unary operator: '-accent-ink'
(5939,92): run-time error CSS1039: Token not allowed after unary operator: '-line'
(5939,191): run-time error CSS1039: Token not allowed after unary operator: '-head'
(5940,42): run-time error CSS1039: Token not allowed after unary operator: '-accent'
(5941,35): run-time error CSS1039: Token not allowed after unary operator: '-faint'
(5943,55): run-time error CSS1039: Token not allowed after unary operator: '-head'
(5944,105): run-time error CSS1039: Token not allowed after unary operator: '-card'
(5944,136): run-time error CSS1039: Token not allowed after unary operator: '-line'
(5947,46): run-time error CSS1039: Token not allowed after unary operator: '-muted'
(5948,35): run-time error CSS1039: Token not allowed after unary operator: '-red'
(5951,131): run-time error CSS1039: Token not allowed after unary operator: '-faint'
(5951,194): run-time error CSS1039: Token not allowed after unary operator: '-line'
(5952,70): run-time error CSS1039: Token not allowed after unary operator: '-hair'
(5952,90): run-time error CSS1039: Token not allowed after unary operator: '-ink'
(5953,32): run-time error CSS1039: Token not allowed after unary operator: '-faint'
(5954,32): run-time error CSS1039: Token not allowed after unary operator: '-head'
(5957,104): run-time error CSS1039: Token not allowed after unary operator: '-head'
(5958,37): run-time error CSS1039: Token not allowed after unary operator: '-red'
(5964,121): run-time error CSS1039: Token not allowed after unary operator: '-ink'
(5966,46): run-time error CSS1039: Token not allowed after unary operator: '-red'
(5967,48): run-time error CSS1039: Token not allowed after unary operator: '-amber-ink'
(5968,47): run-time error CSS1039: Token not allowed after unary operator: '-blue'
(5969,48): run-time error CSS1039: Token not allowed after unary operator: '-green'
(5971,41): run-time error CSS1039: Token not allowed after unary operator: '-faint'
(6007,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6008,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6009,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6010,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6011,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6012,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6013,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6014,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6016,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6016,22): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6016,38): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6016,56): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6017,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6017,22): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6017,39): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6017,56): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6017,75): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6017,92): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6017,108): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6017,126): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6018,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6018,24): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6020,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6020,22): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6020,40): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6020,60): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6020,76): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6020,94): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6021,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6021,24): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6021,43): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6021,60): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6021,79): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6022,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6022,27): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6022,50): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6022,75): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6022,96): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6023,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6023,29): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6023,53): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6023,75): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6023,99): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6026,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6026,28): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6026,51): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6026,74): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6027,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6027,30): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6027,54): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6027,79): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6035,24): run-time error CSS1030: Expected identifier, found '#pageTitleArea'
(6035,43): run-time error CSS1030: Expected identifier, found '.'
(6035,60): run-time error CSS1031: Expected selector, found ')'
(6035,60): run-time error CSS1025: Expected comma or open brace, found ')'
(6038,10): run-time error CSS1030: Expected identifier, found '.'
(6038,50): run-time error CSS1031: Expected selector, found ')'
(6038,50): run-time error CSS1025: Expected comma or open brace, found ')'
(6041,20): run-time error CSS1039: Token not allowed after unary operator: '-ink'
(6043,31): run-time error CSS1039: Token not allowed after unary operator: '-head'
(6049,34): run-time error CSS1039: Token not allowed after unary operator: '-faint'
(6053,20): run-time error CSS1030: Expected identifier, found '.'
(6053,37): run-time error CSS1031: Expected selector, found ')'
(6053,37): run-time error CSS1025: Expected comma or open brace, found ')'
(6060,64): run-time error CSS1039: Token not allowed after unary operator: '-muted'
(6061,70): run-time error CSS1039: Token not allowed after unary operator: '-accent'
(6062,71): run-time error CSS1039: Token not allowed after unary operator: '-faint'
(6063,113): run-time error CSS1039: Token not allowed after unary operator: '-accent'
(6071,15): run-time error CSS1030: Expected identifier, found ':'
(6071,16): run-time error CSS1031: Expected selector, found 'has('
(6071,16): run-time error CSS1025: Expected comma or open brace, found 'has('
(6072,15): run-time error CSS1030: Expected identifier, found ':'
(6072,16): run-time error CSS1031: Expected selector, found 'has('
(6072,16): run-time error CSS1025: Expected comma or open brace, found 'has('
(6073,15): run-time error CSS1030: Expected identifier, found ':'
(6073,16): run-time error CSS1031: Expected selector, found 'has('
(6073,16): run-time error CSS1025: Expected comma or open brace, found 'has('
(6074,15): run-time error CSS1030: Expected identifier, found ':'
(6074,16): run-time error CSS1031: Expected selector, found 'has('
(6074,16): run-time error CSS1025: Expected comma or open brace, found 'has('
(6075,15): run-time error CSS1030: Expected identifier, found ':'
(6075,16): run-time error CSS1031: Expected selector, found 'has('
(6075,16): run-time error CSS1025: Expected comma or open brace, found 'has('
(6076,15): run-time error CSS1030: Expected identifier, found ':'
(6076,16): run-time error CSS1031: Expected selector, found 'has('
(6076,16): run-time error CSS1025: Expected comma or open brace, found 'has('
(6078,143): run-time error CSS1039: Token not allowed after unary operator: '-muted'
(6079,79): run-time error CSS1039: Token not allowed after unary operator: '-head'
(6080,86): run-time error CSS1039: Token not allowed after unary operator: '-accent'
(6084,179): run-time error CSS1039: Token not allowed after unary operator: '-grey-soft'
(6084,204): run-time error CSS1039: Token not allowed after unary operator: '-muted'
(6088,8): run-time error CSS1030: Expected identifier, found '#pageTitleArea'
(6088,22): run-time error CSS1031: Expected selector, found ')'
(6088,22): run-time error CSS1025: Expected comma or open brace, found ')'
(6100,195): run-time error CSS1039: Token not allowed after unary operator: '-line'
(6106,141): run-time error CSS1039: Token not allowed after unary operator: '-faint'
(6107,65): run-time error CSS1039: Token not allowed after unary operator: '-head'
(6108,98): run-time error CSS1039: Token not allowed after unary operator: '-faint'
(6113,10): run-time error CSS1030: Expected identifier, found '#searchArea'
(6113,34): run-time error CSS1031: Expected selector, found ')'
(6113,34): run-time error CSS1025: Expected comma or open brace, found ')'
(6123,10): run-time error CSS1030: Expected identifier, found '#searchArea'
(6123,34): run-time error CSS1031: Expected selector, found ')'
(6123,34): run-time error CSS1025: Expected comma or open brace, found ')'
(6124,10): run-time error CSS1030: Expected identifier, found '#searchArea'
(6124,34): run-time error CSS1031: Expected selector, found ')'
(6124,34): run-time error CSS1025: Expected comma or open brace, found ')'
(6125,10): run-time error CSS1030: Expected identifier, found '#searchArea'
(6125,34): run-time error CSS1031: Expected selector, found ')'
(6125,34): run-time error CSS1025: Expected comma or open brace, found ')'
(6126,10): run-time error CSS1030: Expected identifier, found '#searchArea'
(6126,34): run-time error CSS1031: Expected selector, found ')'
(6126,34): run-time error CSS1025: Expected comma or open brace, found ')'
(6127,10): run-time error CSS1030: Expected identifier, found '#searchArea'
(6127,34): run-time error CSS1031: Expected selector, found ')'
(6127,34): run-time error CSS1025: Expected comma or open brace, found ')'
(6128,10): run-time error CSS1030: Expected identifier, found '#searchArea'
(6128,34): run-time error CSS1031: Expected selector, found ')'
(6128,34): run-time error CSS1025: Expected comma or open brace, found ')'
(6129,10): run-time error CSS1030: Expected identifier, found '#searchArea'
(6129,34): run-time error CSS1031: Expected selector, found ')'
(6129,34): run-time error CSS1025: Expected comma or open brace, found ')'
(6132,10): run-time error CSS1030: Expected identifier, found '#searchArea'
(6132,34): run-time error CSS1031: Expected selector, found ')'
(6132,34): run-time error CSS1025: Expected comma or open brace, found ')'
(6133,10): run-time error CSS1030: Expected identifier, found '#searchArea'
(6133,34): run-time error CSS1031: Expected selector, found ')'
(6133,34): run-time error CSS1025: Expected comma or open brace, found ')'
(6136,10): run-time error CSS1030: Expected identifier, found '#searchArea'
(6136,34): run-time error CSS1031: Expected selector, found ')'
(6136,34): run-time error CSS1025: Expected comma or open brace, found ')'
(6137,10): run-time error CSS1030: Expected identifier, found '#searchArea'
(6137,34): run-time error CSS1031: Expected selector, found ')'
(6137,34): run-time error CSS1025: Expected comma or open brace, found ')'
(6139,10): run-time error CSS1030: Expected identifier, found '#searchArea'
(6139,34): run-time error CSS1031: Expected selector, found ')'
(6139,34): run-time error CSS1025: Expected comma or open brace, found ')'
(6140,10): run-time error CSS1030: Expected identifier, found '#searchArea'
(6140,34): run-time error CSS1031: Expected selector, found ')'
(6140,34): run-time error CSS1025: Expected comma or open brace, found ')'
(6141,10): run-time error CSS1030: Expected identifier, found '#searchArea'
(6141,34): run-time error CSS1031: Expected selector, found ')'
(6141,34): run-time error CSS1025: Expected comma or open brace, found ')'
(6142,10): run-time error CSS1030: Expected identifier, found '#searchArea'
(6142,34): run-time error CSS1031: Expected selector, found ')'
(6142,34): run-time error CSS1025: Expected comma or open brace, found ')'
(6143,10): run-time error CSS1030: Expected identifier, found '#searchArea'
(6143,34): run-time error CSS1031: Expected selector, found ')'
(6143,34): run-time error CSS1025: Expected comma or open brace, found ')'
(6144,10): run-time error CSS1030: Expected identifier, found '#searchArea'
(6144,34): run-time error CSS1031: Expected selector, found ')'
(6144,34): run-time error CSS1025: Expected comma or open brace, found ')'
(6145,10): run-time error CSS1030: Expected identifier, found '#searchArea'
(6145,34): run-time error CSS1031: Expected selector, found ')'
(6145,34): run-time error CSS1025: Expected comma or open brace, found ')'
(6146,10): run-time error CSS1030: Expected identifier, found '#searchArea'
(6146,34): run-time error CSS1031: Expected selector, found ')'
(6146,34): run-time error CSS1025: Expected comma or open brace, found ')'
(6147,10): run-time error CSS1030: Expected identifier, found '#searchArea'
(6147,34): run-time error CSS1031: Expected selector, found ')'
(6147,34): run-time error CSS1025: Expected comma or open brace, found ')'
(6148,10): run-time error CSS1030: Expected identifier, found '#searchArea'
(6148,34): run-time error CSS1031: Expected selector, found ')'
(6148,34): run-time error CSS1025: Expected comma or open brace, found ')'
(6156,10): run-time error CSS1030: Expected identifier, found '#searchArea'
(6156,34): run-time error CSS1031: Expected selector, found ')'
(6156,34): run-time error CSS1025: Expected comma or open brace, found ')'
(6157,10): run-time error CSS1030: Expected identifier, found '#searchArea'
(6157,34): run-time error CSS1031: Expected selector, found ')'
(6157,34): run-time error CSS1025: Expected comma or open brace, found ')'
(6158,10): run-time error CSS1030: Expected identifier, found '#searchArea'
(6158,34): run-time error CSS1031: Expected selector, found ')'
(6158,34): run-time error CSS1025: Expected comma or open brace, found ')'
(6159,10): run-time error CSS1030: Expected identifier, found '#searchArea'
(6159,34): run-time error CSS1031: Expected selector, found ')'
(6159,34): run-time error CSS1025: Expected comma or open brace, found ')'
(6165,10): run-time error CSS1030: Expected identifier, found '#searchArea'
(6165,34): run-time error CSS1031: Expected selector, found ')'
(6165,34): run-time error CSS1025: Expected comma or open brace, found ')'
(6166,10): run-time error CSS1030: Expected identifier, found '#searchArea'
(6166,34): run-time error CSS1031: Expected selector, found ')'
(6166,34): run-time error CSS1025: Expected comma or open brace, found ')'
(6167,10): run-time error CSS1030: Expected identifier, found '#searchArea'
(6167,34): run-time error CSS1031: Expected selector, found ')'
(6167,34): run-time error CSS1025: Expected comma or open brace, found ')'
(6168,10): run-time error CSS1030: Expected identifier, found '#searchArea'
(6168,34): run-time error CSS1031: Expected selector, found ')'
(6168,34): run-time error CSS1025: Expected comma or open brace, found ')'
(6174,10): run-time error CSS1030: Expected identifier, found '#searchArea'
(6174,34): run-time error CSS1031: Expected selector, found ')'
(6174,34): run-time error CSS1025: Expected comma or open brace, found ')'
(6176,14): run-time error CSS1030: Expected identifier, found '#searchArea'
(6176,38): run-time error CSS1031: Expected selector, found ')'
(6176,38): run-time error CSS1025: Expected comma or open brace, found ')'
(6184,123): run-time error CSS1039: Token not allowed after unary operator: '-faint'
(6196,136): run-time error CSS1039: Token not allowed after unary operator: '-faint'
(6200,156): run-time error CSS1039: Token not allowed after unary operator: '-muted'
(6209,24): run-time error CSS1030: Expected identifier, found '.'
(6209,61): run-time error CSS1031: Expected selector, found ')'
(6209,61): run-time error CSS1025: Expected comma or open brace, found ')'
(6211,24): run-time error CSS1030: Expected identifier, found '.'
(6211,61): run-time error CSS1031: Expected selector, found ')'
(6211,61): run-time error CSS1025: Expected comma or open brace, found ')'
(6213,24): run-time error CSS1030: Expected identifier, found '.'
(6213,61): run-time error CSS1031: Expected selector, found ')'
(6213,61): run-time error CSS1025: Expected comma or open brace, found ')'
(6215,24): run-time error CSS1030: Expected identifier, found '.'
(6215,61): run-time error CSS1031: Expected selector, found ')'
(6215,61): run-time error CSS1025: Expected comma or open brace, found ')'
(6216,54): run-time error CSS1030: Expected identifier, found '.'
(6216,63): run-time error CSS1031: Expected selector, found ')'
(6216,63): run-time error CSS1025: Expected comma or open brace, found ')'
(6219,101): run-time error CSS1039: Token not allowed after unary operator: '-line'
(6225,27): run-time error CSS1030: Expected identifier, found '.'
(6225,106): run-time error CSS1031: Expected selector, found ')'
(6225,106): run-time error CSS1025: Expected comma or open brace, found ')'
(6226,27): run-time error CSS1030: Expected identifier, found '.'
(6226,179): run-time error CSS1031: Expected selector, found ')'
(6226,179): run-time error CSS1025: Expected comma or open brace, found ')'
(6230,122): run-time error CSS1039: Token not allowed after unary operator: '-ink'
(6231,115): run-time error CSS1039: Token not allowed after unary operator: '-head'
(6236,67): run-time error CSS1039: Token not allowed after unary operator: '-ink'
(6241,253): run-time error CSS1039: Token not allowed after unary operator: '-ink'
(6242,200): run-time error CSS1039: Token not allowed after unary operator: '-ink'
(6244,87): run-time error CSS1039: Token not allowed after unary operator: '-faint'
(6247,143): run-time error CSS1039: Token not allowed after unary operator: '-ink'
(6248,200): run-time error CSS1039: Token not allowed after unary operator: '-accent'
(6252,150): run-time error CSS1039: Token not allowed after unary operator: '-ink'
(6253,86): run-time error CSS1039: Token not allowed after unary operator: '-ink'
(6254,85): run-time error CSS1039: Token not allowed after unary operator: '-accent'
(6255,157): run-time error CSS1039: Token not allowed after unary operator: '-grey-soft'
(6255,182): run-time error CSS1039: Token not allowed after unary operator: '-head'
(6256,53): run-time error CSS1039: Token not allowed after unary operator: '-faint'
(6257,59): run-time error CSS1039: Token not allowed after unary operator: '-red'
(6260,185): run-time error CSS1039: Token not allowed after unary operator: '-grey-soft'
(6260,210): run-time error CSS1039: Token not allowed after unary operator: '-head'
(6261,82): run-time error CSS1039: Token not allowed after unary operator: '-muted'
(6264,150): run-time error CSS1039: Token not allowed after unary operator: '-band'
(6264,181): run-time error CSS1039: Token not allowed after unary operator: '-line'
(6265,60): run-time error CSS1039: Token not allowed after unary operator: '-faint'
(6266,216): run-time error CSS1039: Token not allowed after unary operator: '-head'
(6267,50): run-time error CSS1039: Token not allowed after unary operator: '-accent-line'
(6267,82): run-time error CSS1039: Token not allowed after unary operator: '-card'
(6282,48): run-time error CSS1039: Token not allowed after unary operator: '-faint'
(6283,10): run-time error CSS1030: Expected identifier, found '.'
(6283,44): run-time error CSS1031: Expected selector, found ')'
(6283,44): run-time error CSS1025: Expected comma or open brace, found ')'
(6284,10): run-time error CSS1030: Expected identifier, found '.'
(6284,44): run-time error CSS1031: Expected selector, found ')'
(6284,44): run-time error CSS1025: Expected comma or open brace, found ')'
(6285,10): run-time error CSS1030: Expected identifier, found '.'
(6285,44): run-time error CSS1031: Expected selector, found ')'
(6285,44): run-time error CSS1025: Expected comma or open brace, found ')'
(6289,84): run-time error CSS1039: Token not allowed after unary operator: '-line'
(6289,183): run-time error CSS1039: Token not allowed after unary operator: '-ink'
(6291,68): run-time error CSS1039: Token not allowed after unary operator: '-band'
(6291,102): run-time error CSS1039: Token not allowed after unary operator: '-hair'
(6292,69): run-time error CSS1039: Token not allowed after unary operator: '-head'
(6293,187): run-time error CSS1039: Token not allowed after unary operator: '-faint'
(6294,36): run-time error CSS1030: Expected identifier, found '.'
(6294,73): run-time error CSS1031: Expected selector, found ')'
(6294,73): run-time error CSS1025: Expected comma or open brace, found ')'
(6296,165): run-time error CSS1039: Token not allowed after unary operator: '-line'
(6296,260): run-time error CSS1039: Token not allowed after unary operator: '-head'
(6297,85): run-time error CSS1039: Token not allowed after unary operator: '-accent'
(6297,123): run-time error CSS1039: Token not allowed after unary operator: '-accent'
(6299,94): run-time error CSS1039: Token not allowed after unary operator: '-hair'
(6306,74): run-time error CSS1039: Token not allowed after unary operator: '-faint'
(6307,81): run-time error CSS1039: Token not allowed after unary operator: '-hover'
(6310,121): run-time error CSS1039: Token not allowed after unary operator: '-line'
(6310,188): run-time error CSS1039: Token not allowed after unary operator: '-band'
(6311,65): run-time error CSS1039: Token not allowed after unary operator: '-head'
(6313,129): run-time error CSS1039: Token not allowed after unary operator: '-line'
(6313,174): run-time error CSS1039: Token not allowed after unary operator: '-card'
(6313,194): run-time error CSS1039: Token not allowed after unary operator: '-muted'
(6314,41): run-time error CSS1039: Token not allowed after unary operator: '-head'
(6314,66): run-time error CSS1039: Token not allowed after unary operator: '-band'
(6319,10): run-time error CSS1030: Expected identifier, found '#searchArea'
(6319,34): run-time error CSS1031: Expected selector, found ')'
(6319,34): run-time error CSS1025: Expected comma or open brace, found ')'
(6320,10): run-time error CSS1030: Expected identifier, found '#searchArea'
(6320,34): run-time error CSS1031: Expected selector, found ')'
(6320,34): run-time error CSS1025: Expected comma or open brace, found ')'
(6328,97): run-time error CSS1039: Token not allowed after unary operator: '-band'
(6328,128): run-time error CSS1039: Token not allowed after unary operator: '-frame'
(6339,155): run-time error CSS1039: Token not allowed after unary operator: '-line'
(6339,175): run-time error CSS1039: Token not allowed after unary operator: '-muted'
(6341,183): run-time error CSS1039: Token not allowed after unary operator: '-hair'
(6343,82): run-time error CSS1039: Token not allowed after unary operator: '-muted'
(6344,101): run-time error CSS1039: Token not allowed after unary operator: '-head'
(6345,294): run-time error CSS1039: Token not allowed after unary operator: '-blue-soft'
(6345,319): run-time error CSS1039: Token not allowed after unary operator: '-blue'
(6347,79): run-time error CSS1039: Token not allowed after unary operator: '-green-soft'
(6347,105): run-time error CSS1039: Token not allowed after unary operator: '-green'
(6348,79): run-time error CSS1039: Token not allowed after unary operator: '-violet-soft'
(6348,106): run-time error CSS1039: Token not allowed after unary operator: '-violet'
(6351,81): run-time error CSS1039: Token not allowed after unary operator: '-teal-soft'
(6351,106): run-time error CSS1039: Token not allowed after unary operator: '-teal'
(6352,87): run-time error CSS1039: Token not allowed after unary operator: '-green-soft'
(6352,113): run-time error CSS1039: Token not allowed after unary operator: '-green'
(6353,85): run-time error CSS1039: Token not allowed after unary operator: '-red-soft'
(6353,109): run-time error CSS1039: Token not allowed after unary operator: '-red'
(6355,86): run-time error CSS1039: Token not allowed after unary operator: '-red-soft'
(6355,110): run-time error CSS1039: Token not allowed after unary operator: '-red'
(6356,88): run-time error CSS1039: Token not allowed after unary operator: '-amber-soft'
(6356,114): run-time error CSS1039: Token not allowed after unary operator: '-amber'
(6357,83): run-time error CSS1039: Token not allowed after unary operator: '-grey-soft'
(6357,108): run-time error CSS1039: Token not allowed after unary operator: '-muted'
(6359,82): run-time error CSS1039: Token not allowed after unary operator: '-red-soft'
(6359,106): run-time error CSS1039: Token not allowed after unary operator: '-red'
(6360,87): run-time error CSS1039: Token not allowed after unary operator: '-amber-soft'
(6360,113): run-time error CSS1039: Token not allowed after unary operator: '-amber'
(6361,82): run-time error CSS1039: Token not allowed after unary operator: '-grey-soft'
(6361,107): run-time error CSS1039: Token not allowed after unary operator: '-muted'
(6364,86): run-time error CSS1039: Token not allowed after unary operator: '-amber-soft'
(6364,112): run-time error CSS1039: Token not allowed after unary operator: '-amber'
(6365,87): run-time error CSS1039: Token not allowed after unary operator: '-teal-soft'
(6365,112): run-time error CSS1039: Token not allowed after unary operator: '-teal'
(6366,84): run-time error CSS1039: Token not allowed after unary operator: '-red-soft'
(6366,108): run-time error CSS1039: Token not allowed after unary operator: '-red'
(6369,83): run-time error CSS1039: Token not allowed after unary operator: '-green-soft'
(6369,109): run-time error CSS1039: Token not allowed after unary operator: '-green'
(6373,86): run-time error CSS1039: Token not allowed after unary operator: '-green-soft'
(6373,112): run-time error CSS1039: Token not allowed after unary operator: '-green'
(6374,88): run-time error CSS1039: Token not allowed after unary operator: '-amber-soft'
(6374,114): run-time error CSS1039: Token not allowed after unary operator: '-amber'
(6375,89): run-time error CSS1039: Token not allowed after unary operator: '-red-soft'
(6375,113): run-time error CSS1039: Token not allowed after unary operator: '-red'
(6376,86): run-time error CSS1039: Token not allowed after unary operator: '-grey-soft'
(6376,111): run-time error CSS1039: Token not allowed after unary operator: '-muted'
(6380,90): run-time error CSS1039: Token not allowed after unary operator: '-teal-soft'
(6380,115): run-time error CSS1039: Token not allowed after unary operator: '-teal'
(6381,86): run-time error CSS1039: Token not allowed after unary operator: '-violet-soft'
(6381,113): run-time error CSS1039: Token not allowed after unary operator: '-violet'
(6382,90): run-time error CSS1039: Token not allowed after unary operator: '-grey-soft'
(6382,115): run-time error CSS1039: Token not allowed after unary operator: '-muted'
(6386,90): run-time error CSS1039: Token not allowed after unary operator: '-teal-soft'
(6386,115): run-time error CSS1039: Token not allowed after unary operator: '-teal'
(6387,87): run-time error CSS1039: Token not allowed after unary operator: '-green-soft'
(6387,113): run-time error CSS1039: Token not allowed after unary operator: '-green'
(6388,87): run-time error CSS1039: Token not allowed after unary operator: '-red-soft'
(6388,111): run-time error CSS1039: Token not allowed after unary operator: '-red'
(6391,146): run-time error CSS1039: Token not allowed after unary operator: '-grey-soft'
(6391,171): run-time error CSS1039: Token not allowed after unary operator: '-muted'
(6394,89): run-time error CSS1039: Token not allowed after unary operator: '-red-soft'
(6394,113): run-time error CSS1039: Token not allowed after unary operator: '-red'
(6395,85): run-time error CSS1039: Token not allowed after unary operator: '-emerald-soft'
(6395,113): run-time error CSS1039: Token not allowed after unary operator: '-emerald'
(6398,89): run-time error CSS1039: Token not allowed after unary operator: '-green-soft'
(6398,115): run-time error CSS1039: Token not allowed after unary operator: '-green'
(6399,94): run-time error CSS1039: Token not allowed after unary operator: '-emerald-soft'
(6399,122): run-time error CSS1039: Token not allowed after unary operator: '-emerald'
(6402,89): run-time error CSS1039: Token not allowed after unary operator: '-violet-soft'
(6402,116): run-time error CSS1039: Token not allowed after unary operator: '-violet'
(6403,85): run-time error CSS1039: Token not allowed after unary operator: '-amber-soft'
(6403,111): run-time error CSS1039: Token not allowed after unary operator: '-amber'
(6407,87): run-time error CSS1039: Token not allowed after unary operator: '-green-soft'
(6407,113): run-time error CSS1039: Token not allowed after unary operator: '-green'
(6408,89): run-time error CSS1039: Token not allowed after unary operator: '-red-soft'
(6408,113): run-time error CSS1039: Token not allowed after unary operator: '-red'
(6411,85): run-time error CSS1039: Token not allowed after unary operator: '-violet-soft'
(6411,112): run-time error CSS1039: Token not allowed after unary operator: '-violet'
(6412,87): run-time error CSS1039: Token not allowed after unary operator: '-amber-soft'
(6412,113): run-time error CSS1039: Token not allowed after unary operator: '-amber'
(6416,91): run-time error CSS1039: Token not allowed after unary operator: '-indigo-soft'
(6416,118): run-time error CSS1039: Token not allowed after unary operator: '-indigo'
(6419,84): run-time error CSS1039: Token not allowed after unary operator: '-green-soft'
(6419,110): run-time error CSS1039: Token not allowed after unary operator: '-green'
(6420,84): run-time error CSS1039: Token not allowed after unary operator: '-amber-soft'
(6420,110): run-time error CSS1039: Token not allowed after unary operator: '-amber'
(6421,85): run-time error CSS1039: Token not allowed after unary operator: '-indigo-soft'
(6421,112): run-time error CSS1039: Token not allowed after unary operator: '-indigo'
(6429,93): run-time error CSS1039: Token not allowed after unary operator: '-muted'
(6431,178): run-time error CSS1039: Token not allowed after unary operator: '-band-2'
(6431,207): run-time error CSS1039: Token not allowed after unary operator: '-line'
(6431,227): run-time error CSS1039: Token not allowed after unary operator: '-head'
(6432,166): run-time error CSS1039: Token not allowed after unary operator: '-muted'
(6435,43): run-time error CSS1030: Expected identifier, found '.'
(6435,60): run-time error CSS1031: Expected selector, found ')'
(6435,60): run-time error CSS1025: Expected comma or open brace, found ')'
(6436,43): run-time error CSS1030: Expected identifier, found '.'
(6436,60): run-time error CSS1031: Expected selector, found ')'
(6436,60): run-time error CSS1025: Expected comma or open brace, found ')'
(6437,99): run-time error CSS1039: Token not allowed after unary operator: '-faint'
(6439,200): run-time error CSS1039: Token not allowed after unary operator: '-line'
(6439,263): run-time error CSS1039: Token not allowed after unary operator: '-card'
(6440,128): run-time error CSS1039: Token not allowed after unary operator: '-muted'
(6441,67): run-time error CSS1039: Token not allowed after unary operator: '-line'
(6442,58): run-time error CSS1039: Token not allowed after unary operator: '-band-2'
(6442,80): run-time error CSS1039: Token not allowed after unary operator: '-head'
(6443,55): run-time error CSS1039: Token not allowed after unary operator: '-accent-soft'
(6443,82): run-time error CSS1039: Token not allowed after unary operator: '-accent'
(6447,62): run-time error CSS1039: Token not allowed after unary operator: '-accent-soft'
(6447,116): run-time error CSS1039: Token not allowed after unary operator: '-accent'
(6448,61): run-time error CSS1039: Token not allowed after unary operator: '-accent'
(6455,5): run-time error CSS1030: Expected identifier, found '.'
(6455,14): run-time error CSS1031: Expected selector, found ')'
(6455,14): run-time error CSS1025: Expected comma or open brace, found ')'
(6456,5): run-time error CSS1030: Expected identifier, found '.'
(6456,14): run-time error CSS1031: Expected selector, found ')'
(6456,14): run-time error CSS1025: Expected comma or open brace, found ')'
(6457,5): run-time error CSS1030: Expected identifier, found '.'
(6457,14): run-time error CSS1031: Expected selector, found ')'
(6457,14): run-time error CSS1025: Expected comma or open brace, found ')'
(6458,5): run-time error CSS1030: Expected identifier, found '.'
(6458,14): run-time error CSS1031: Expected selector, found ')'
(6458,14): run-time error CSS1025: Expected comma or open brace, found ')'
(6459,5): run-time error CSS1030: Expected identifier, found '.'
(6459,14): run-time error CSS1031: Expected selector, found ')'
(6459,14): run-time error CSS1025: Expected comma or open brace, found ')'
(6460,5): run-time error CSS1030: Expected identifier, found '.'
(6460,14): run-time error CSS1031: Expected selector, found ')'
(6460,14): run-time error CSS1025: Expected comma or open brace, found ')'
(6461,5): run-time error CSS1030: Expected identifier, found '.'
(6461,14): run-time error CSS1031: Expected selector, found ')'
(6461,14): run-time error CSS1025: Expected comma or open brace, found ')'
(6464,5): run-time error CSS1030: Expected identifier, found '.'
(6464,14): run-time error CSS1031: Expected selector, found ')'
(6464,14): run-time error CSS1025: Expected comma or open brace, found ')'
(6465,5): run-time error CSS1030: Expected identifier, found '.'
(6465,14): run-time error CSS1031: Expected selector, found ')'
(6465,14): run-time error CSS1025: Expected comma or open brace, found ')'
(6466,5): run-time error CSS1030: Expected identifier, found '.'
(6466,14): run-time error CSS1031: Expected selector, found ')'
(6466,14): run-time error CSS1025: Expected comma or open brace, found ')'
(6467,5): run-time error CSS1030: Expected identifier, found '.'
(6467,14): run-time error CSS1031: Expected selector, found ')'
(6467,14): run-time error CSS1025: Expected comma or open brace, found ')'
(6468,5): run-time error CSS1030: Expected identifier, found '.'
(6468,14): run-time error CSS1031: Expected selector, found ')'
(6468,14): run-time error CSS1025: Expected comma or open brace, found ')'
(6475,5): run-time error CSS1030: Expected identifier, found '.'
(6475,14): run-time error CSS1031: Expected selector, found ')'
(6475,14): run-time error CSS1025: Expected comma or open brace, found ')'
(6476,5): run-time error CSS1030: Expected identifier, found '.'
(6476,14): run-time error CSS1031: Expected selector, found ')'
(6476,14): run-time error CSS1025: Expected comma or open brace, found ')'
(6477,5): run-time error CSS1030: Expected identifier, found '.'
(6477,14): run-time error CSS1031: Expected selector, found ')'
(6477,14): run-time error CSS1025: Expected comma or open brace, found ')'
(6478,5): run-time error CSS1030: Expected identifier, found '.'
(6478,14): run-time error CSS1031: Expected selector, found ')'
(6478,14): run-time error CSS1025: Expected comma or open brace, found ')'
(6479,5): run-time error CSS1030: Expected identifier, found '.'
(6479,14): run-time error CSS1031: Expected selector, found ')'
(6479,14): run-time error CSS1025: Expected comma or open brace, found ')'
(6480,5): run-time error CSS1030: Expected identifier, found '.'
(6480,14): run-time error CSS1031: Expected selector, found ')'
(6480,14): run-time error CSS1025: Expected comma or open brace, found ')'
(6481,5): run-time error CSS1030: Expected identifier, found '.'
(6481,14): run-time error CSS1031: Expected selector, found ')'
(6481,14): run-time error CSS1025: Expected comma or open brace, found ')'
(6482,5): run-time error CSS1030: Expected identifier, found '.'
(6482,14): run-time error CSS1031: Expected selector, found ')'
(6482,14): run-time error CSS1025: Expected comma or open brace, found ')'
(6483,5): run-time error CSS1030: Expected identifier, found '.'
(6483,14): run-time error CSS1031: Expected selector, found ')'
(6483,14): run-time error CSS1025: Expected comma or open brace, found ')'
(6484,5): run-time error CSS1030: Expected identifier, found '.'
(6484,14): run-time error CSS1031: Expected selector, found ')'
(6484,14): run-time error CSS1025: Expected comma or open brace, found ')'
(6485,5): run-time error CSS1030: Expected identifier, found '.'
(6485,14): run-time error CSS1031: Expected selector, found ')'
(6485,14): run-time error CSS1025: Expected comma or open brace, found ')'
(6486,5): run-time error CSS1030: Expected identifier, found '.'
(6486,14): run-time error CSS1031: Expected selector, found ')'
(6486,14): run-time error CSS1025: Expected comma or open brace, found ')'
(6487,5): run-time error CSS1030: Expected identifier, found '.'
(6487,14): run-time error CSS1031: Expected selector, found ')'
(6487,14): run-time error CSS1025: Expected comma or open brace, found ')'
(6488,5): run-time error CSS1030: Expected identifier, found '.'
(6488,14): run-time error CSS1031: Expected selector, found ')'
(6488,14): run-time error CSS1025: Expected comma or open brace, found ')'
(6489,5): run-time error CSS1030: Expected identifier, found '.'
(6489,14): run-time error CSS1031: Expected selector, found ')'
(6489,14): run-time error CSS1025: Expected comma or open brace, found ')'
(6493,5): run-time error CSS1030: Expected identifier, found '.'
(6493,14): run-time error CSS1031: Expected selector, found ')'
(6493,14): run-time error CSS1025: Expected comma or open brace, found ')'
(6494,5): run-time error CSS1030: Expected identifier, found '.'
(6494,14): run-time error CSS1031: Expected selector, found ')'
(6494,14): run-time error CSS1025: Expected comma or open brace, found ')'
(6495,5): run-time error CSS1030: Expected identifier, found '.'
(6495,14): run-time error CSS1031: Expected selector, found ')'
(6495,14): run-time error CSS1025: Expected comma or open brace, found ')'
(6496,5): run-time error CSS1030: Expected identifier, found '.'
(6496,14): run-time error CSS1031: Expected selector, found ')'
(6496,14): run-time error CSS1025: Expected comma or open brace, found ')'
(6497,5): run-time error CSS1030: Expected identifier, found '.'
(6497,14): run-time error CSS1031: Expected selector, found ')'
(6497,14): run-time error CSS1025: Expected comma or open brace, found ')'
(6498,5): run-time error CSS1030: Expected identifier, found '.'
(6498,14): run-time error CSS1031: Expected selector, found ')'
(6498,14): run-time error CSS1025: Expected comma or open brace, found ')'
(6499,5): run-time error CSS1030: Expected identifier, found '.'
(6499,14): run-time error CSS1031: Expected selector, found ')'
(6499,14): run-time error CSS1025: Expected comma or open brace, found ')'
(6500,5): run-time error CSS1030: Expected identifier, found '.'
(6500,14): run-time error CSS1031: Expected selector, found ')'
(6500,14): run-time error CSS1025: Expected comma or open brace, found ')'
(6501,5): run-time error CSS1030: Expected identifier, found '.'
(6501,14): run-time error CSS1031: Expected selector, found ')'
(6501,14): run-time error CSS1025: Expected comma or open brace, found ')'
(6504,5): run-time error CSS1030: Expected identifier, found '.'
(6504,14): run-time error CSS1031: Expected selector, found ')'
(6504,14): run-time error CSS1025: Expected comma or open brace, found ')'
(6505,5): run-time error CSS1030: Expected identifier, found '.'
(6505,14): run-time error CSS1031: Expected selector, found ')'
(6505,14): run-time error CSS1025: Expected comma or open brace, found ')'
(6508,5): run-time error CSS1030: Expected identifier, found '.'
(6508,14): run-time error CSS1031: Expected selector, found ')'
(6508,14): run-time error CSS1025: Expected comma or open brace, found ')'
(6509,5): run-time error CSS1030: Expected identifier, found '.'
(6509,14): run-time error CSS1031: Expected selector, found ')'
(6509,14): run-time error CSS1025: Expected comma or open brace, found ')'
(6510,5): run-time error CSS1030: Expected identifier, found '.'
(6510,14): run-time error CSS1031: Expected selector, found ')'
(6510,14): run-time error CSS1025: Expected comma or open brace, found ')'
(6511,5): run-time error CSS1030: Expected identifier, found '.'
(6511,14): run-time error CSS1031: Expected selector, found ')'
(6511,14): run-time error CSS1025: Expected comma or open brace, found ')'
(6512,5): run-time error CSS1030: Expected identifier, found '.'
(6512,14): run-time error CSS1031: Expected selector, found ')'
(6512,14): run-time error CSS1025: Expected comma or open brace, found ')'
(6517,66): run-time error CSS1039: Token not allowed after unary operator: '-card'
(6517,97): run-time error CSS1039: Token not allowed after unary operator: '-frame'
(6525,46): run-time error CSS1039: Token not allowed after unary operator: '-card'
(6525,77): run-time error CSS1039: Token not allowed after unary operator: '-ink'
(6525,239): run-time error CSS1039: Token not allowed after unary operator: '-line'
(6525,277): run-time error CSS1039: Token not allowed after unary operator: '-line'
(6540,43): run-time error CSS1039: Token not allowed after unary operator: '-muted'
(6541,127): run-time error CSS1039: Token not allowed after unary operator: '-hair'
(6545,66): run-time error CSS1030: Expected identifier, found ':'
(6545,67): run-time error CSS1031: Expected selector, found 'not('
(6545,67): run-time error CSS1025: Expected comma or open brace, found 'not('
(6546,67): run-time error CSS1030: Expected identifier, found ':'
(6546,68): run-time error CSS1031: Expected selector, found 'not('
(6546,68): run-time error CSS1025: Expected comma or open brace, found 'not('
(6547,125): run-time error CSS1039: Token not allowed after unary operator: '-hover'
(6550,124): run-time error CSS1039: Token not allowed after unary operator: '-muted'
(6555,66): run-time error CSS1039: Token not allowed after unary operator: '-band-2'
(6557,114): run-time error CSS1039: Token not allowed after unary operator: '-line'
(6559,70): run-time error CSS1039: Token not allowed after unary operator: '-faint'
(6561,71): run-time error CSS1039: Token not allowed after unary operator: '-head'
(6562,70): run-time error CSS1039: Token not allowed after unary operator: '-muted'
(6563,59): run-time error CSS1039: Token not allowed after unary operator: '-faint'
(6564,55): run-time error CSS1039: Token not allowed after unary operator: '-head'
(6565,69): run-time error CSS1039: Token not allowed after unary operator: '-hair'
(6576,120): run-time error CSS1039: Token not allowed after unary operator: '-accent'
(6577,76): run-time error CSS1039: Token not allowed after unary operator: '-accent'
(6578,100): run-time error CSS1039: Token not allowed after unary operator: '-faint'
(6581,63): run-time error CSS1039: Token not allowed after unary operator: '-accent'
(6582,80): run-time error CSS1039: Token not allowed after unary operator: '-head'
(6584,89): run-time error CSS1039: Token not allowed after unary operator: '-accent'
(6585,81): run-time error CSS1039: Token not allowed after unary operator: '-muted'
(6587,43): run-time error CSS1039: Token not allowed after unary operator: '-ink'
(6588,49): run-time error CSS1039: Token not allowed after unary operator: '-accent'
(6589,137): run-time error CSS1039: Token not allowed after unary operator: '-muted'
(6590,52): run-time error CSS1039: Token not allowed after unary operator: '-faint'
(6591,73): run-time error CSS1039: Token not allowed after unary operator: '-red'
(6596,151): run-time error CSS1039: Token not allowed after unary operator: '-hair'
(6596,171): run-time error CSS1039: Token not allowed after unary operator: '-ink'
(6601,95): run-time error CSS1039: Token not allowed after unary operator: '-faint'
(6606,69): run-time error CSS1039: Token not allowed after unary operator: '-faint'
(6607,56): run-time error CSS1039: Token not allowed after unary operator: '-red'
(6611,52): run-time error CSS1039: Token not allowed after unary operator: '-faint'
(6613,57): run-time error CSS1039: Token not allowed after unary operator: '-faint'
(6616,83): run-time error CSS1039: Token not allowed after unary operator: '-head'
(6617,90): run-time error CSS1039: Token not allowed after unary operator: '-faint'
(6618,50): run-time error CSS1039: Token not allowed after unary operator: '-head'
(6629,5): run-time error CSS1030: Expected identifier, found '.'
(6629,32): run-time error CSS1031: Expected selector, found ')'
(6629,32): run-time error CSS1025: Expected comma or open brace, found ')'
(6630,5): run-time error CSS1030: Expected identifier, found '.'
(6630,32): run-time error CSS1031: Expected selector, found ')'
(6630,32): run-time error CSS1025: Expected comma or open brace, found ')'
(6631,5): run-time error CSS1030: Expected identifier, found '.'
(6631,32): run-time error CSS1031: Expected selector, found ')'
(6631,32): run-time error CSS1025: Expected comma or open brace, found ')'
(6632,5): run-time error CSS1030: Expected identifier, found '.'
(6632,32): run-time error CSS1031: Expected selector, found ')'
(6632,32): run-time error CSS1025: Expected comma or open brace, found ')'
(6633,5): run-time error CSS1030: Expected identifier, found '.'
(6633,32): run-time error CSS1031: Expected selector, found ')'
(6633,32): run-time error CSS1025: Expected comma or open brace, found ')'
(6634,5): run-time error CSS1030: Expected identifier, found '.'
(6634,32): run-time error CSS1031: Expected selector, found ')'
(6634,32): run-time error CSS1025: Expected comma or open brace, found ')'
(6635,5): run-time error CSS1030: Expected identifier, found '.'
(6635,32): run-time error CSS1031: Expected selector, found ')'
(6635,32): run-time error CSS1025: Expected comma or open brace, found ')'
(6636,5): run-time error CSS1030: Expected identifier, found '.'
(6636,32): run-time error CSS1031: Expected selector, found ')'
(6636,32): run-time error CSS1025: Expected comma or open brace, found ')'
(6637,56): run-time error CSS1039: Token not allowed after unary operator: '-grey-soft'
(6637,147): run-time error CSS1039: Token not allowed after unary operator: '-muted'
(6638,89): run-time error CSS1039: Token not allowed after unary operator: '-head'
(6642,156): run-time error CSS1039: Token not allowed after unary operator: '-grey-soft'
(6642,181): run-time error CSS1039: Token not allowed after unary operator: '-muted'
(6643,79): run-time error CSS1039: Token not allowed after unary operator: '-head'
(6651,52): run-time error CSS1039: Token not allowed after unary operator: '-accent'
(6654,60): run-time error CSS1039: Token not allowed after unary operator: '-green'
(6657,132): run-time error CSS1039: Token not allowed after unary operator: '-red-soft'
(6657,156): run-time error CSS1039: Token not allowed after unary operator: '-red'
(6660,146): run-time error CSS1039: Token not allowed after unary operator: '-green'
(6661,65): run-time error CSS1039: Token not allowed after unary operator: '-amber'
(6666,29): run-time error CSS1030: Expected identifier, found '.'
(6666,53): run-time error CSS1031: Expected selector, found ')'
(6666,53): run-time error CSS1025: Expected comma or open brace, found ')'
(6667,29): run-time error CSS1030: Expected identifier, found '.'
(6667,53): run-time error CSS1031: Expected selector, found ')'
(6667,53): run-time error CSS1025: Expected comma or open brace, found ')'
(6668,29): run-time error CSS1030: Expected identifier, found '.'
(6668,53): run-time error CSS1031: Expected selector, found ')'
(6668,53): run-time error CSS1025: Expected comma or open brace, found ')'
(6671,136): run-time error CSS1039: Token not allowed after unary operator: '-green'
(6674,45): run-time error CSS1039: Token not allowed after unary operator: '-blue-soft'
(6674,70): run-time error CSS1039: Token not allowed after unary operator: '-blue'
(6675,47): run-time error CSS1039: Token not allowed after unary operator: '-green-soft'
(6675,73): run-time error CSS1039: Token not allowed after unary operator: '-green'
(6676,36): run-time error CSS1039: Token not allowed after unary operator: '-emerald-soft'
(6676,64): run-time error CSS1039: Token not allowed after unary operator: '-emerald'
(6677,43): run-time error CSS1039: Token not allowed after unary operator: '-red-soft'
(6677,67): run-time error CSS1039: Token not allowed after unary operator: '-red'
(6678,34): run-time error CSS1039: Token not allowed after unary operator: '-amber-soft'
(6678,60): run-time error CSS1039: Token not allowed after unary operator: '-amber-ink'
(6679,49): run-time error CSS1039: Token not allowed after unary operator: '-orange-soft'
(6679,76): run-time error CSS1039: Token not allowed after unary operator: '-orange'
(6680,49): run-time error CSS1039: Token not allowed after unary operator: '-violet-soft'
(6680,76): run-time error CSS1039: Token not allowed after unary operator: '-violet'
(6681,33): run-time error CSS1039: Token not allowed after unary operator: '-teal-soft'
(6681,58): run-time error CSS1039: Token not allowed after unary operator: '-teal'
(6682,47): run-time error CSS1039: Token not allowed after unary operator: '-indigo-soft'
(6682,74): run-time error CSS1039: Token not allowed after unary operator: '-indigo'
(6683,57): run-time error CSS1039: Token not allowed after unary operator: '-grey-soft'
(6683,82): run-time error CSS1039: Token not allowed after unary operator: '-muted'
(6687,5): run-time error CSS1030: Expected identifier, found '.'
(6687,32): run-time error CSS1031: Expected selector, found ')'
(6687,32): run-time error CSS1025: Expected comma or open brace, found ')'
(6688,5): run-time error CSS1030: Expected identifier, found '.'
(6688,32): run-time error CSS1031: Expected selector, found ')'
(6688,32): run-time error CSS1025: Expected comma or open brace, found ')'
(6689,5): run-time error CSS1030: Expected identifier, found '.'
(6689,32): run-time error CSS1031: Expected selector, found ')'
(6689,32): run-time error CSS1025: Expected comma or open brace, found ')'
(6690,5): run-time error CSS1030: Expected identifier, found '.'
(6690,32): run-time error CSS1031: Expected selector, found ')'
(6690,32): run-time error CSS1025: Expected comma or open brace, found ')'
(6691,5): run-time error CSS1030: Expected identifier, found '.'
(6691,32): run-time error CSS1031: Expected selector, found ')'
(6691,32): run-time error CSS1025: Expected comma or open brace, found ')'
(6692,5): run-time error CSS1030: Expected identifier, found '.'
(6692,32): run-time error CSS1031: Expected selector, found ')'
(6692,32): run-time error CSS1025: Expected comma or open brace, found ')'
(6695,162): run-time error CSS1039: Token not allowed after unary operator: '-grey-soft'
(6695,187): run-time error CSS1039: Token not allowed after unary operator: '-muted'
(6696,59): run-time error CSS1039: Token not allowed after unary operator: '-band-2'
(6696,81): run-time error CSS1039: Token not allowed after unary operator: '-head'
(6697,61): run-time error CSS1039: Token not allowed after unary operator: '-accent-soft'
(6697,88): run-time error CSS1039: Token not allowed after unary operator: '-accent'
(6708,5): run-time error CSS1030: Expected identifier, found '.'
(6708,14): run-time error CSS1031: Expected selector, found ')'
(6708,14): run-time error CSS1025: Expected comma or open brace, found ')'
(6709,5): run-time error CSS1030: Expected identifier, found '.'
(6709,14): run-time error CSS1031: Expected selector, found ')'
(6709,14): run-time error CSS1025: Expected comma or open brace, found ')'
(6713,37): run-time error CSS1039: Token not allowed after unary operator: '-grey-soft'
(6713,62): run-time error CSS1039: Token not allowed after unary operator: '-muted'
(6714,37): run-time error CSS1039: Token not allowed after unary operator: '-blue-soft'
(6714,62): run-time error CSS1039: Token not allowed after unary operator: '-blue'
(6715,38): run-time error CSS1039: Token not allowed after unary operator: '-green-soft'
(6715,64): run-time error CSS1039: Token not allowed after unary operator: '-green'
(6716,40): run-time error CSS1039: Token not allowed after unary operator: '-emerald-soft'
(6716,68): run-time error CSS1039: Token not allowed after unary operator: '-emerald'
(6717,36): run-time error CSS1039: Token not allowed after unary operator: '-red-soft'
(6717,60): run-time error CSS1039: Token not allowed after unary operator: '-red'
(6718,38): run-time error CSS1039: Token not allowed after unary operator: '-amber-soft'
(6718,64): run-time error CSS1039: Token not allowed after unary operator: '-amber'
(6719,39): run-time error CSS1039: Token not allowed after unary operator: '-orange-soft'
(6719,66): run-time error CSS1039: Token not allowed after unary operator: '-orange'
(6720,39): run-time error CSS1039: Token not allowed after unary operator: '-violet-soft'
(6720,66): run-time error CSS1039: Token not allowed after unary operator: '-violet'
(6721,37): run-time error CSS1039: Token not allowed after unary operator: '-teal-soft'
(6721,62): run-time error CSS1039: Token not allowed after unary operator: '-teal'
(6722,39): run-time error CSS1039: Token not allowed after unary operator: '-indigo-soft'
(6722,66): run-time error CSS1039: Token not allowed after unary operator: '-indigo'
(6742,36): run-time error CSS1039: Token not allowed after unary operator: '-card'
(6742,67): run-time error CSS1039: Token not allowed after unary operator: '-frame'
(6745,124): run-time error CSS1039: Token not allowed after unary operator: '-band'
(6748,49): run-time error CSS1039: Token not allowed after unary operator: '-accent-line'
(6748,81): run-time error CSS1039: Token not allowed after unary operator: '-accent-soft'
(6751,137): run-time error CSS1039: Token not allowed after unary operator: '-faint'
(6754,131): run-time error CSS1039: Token not allowed after unary operator: '-line'
(6754,156): run-time error CSS1039: Token not allowed after unary operator: '-band'
(6755,55): run-time error CSS1039: Token not allowed after unary operator: '-accent-soft'
(6757,99): run-time error CSS1039: Token not allowed after unary operator: '-head'
(6759,98): run-time error CSS1039: Token not allowed after unary operator: '-faint'
(6760,67): run-time error CSS1039: Token not allowed after unary operator: '-muted'
(6762,10): run-time error CSS1030: Expected identifier, found '.'
(6762,35): run-time error CSS1031: Expected selector, found ')'
(6762,35): run-time error CSS1025: Expected comma or open brace, found ')'
(6762,147): run-time error CSS1039: Token not allowed after unary operator: '-stage-gray'
(6763,10): run-time error CSS1030: Expected identifier, found '.'
(6763,35): run-time error CSS1031: Expected selector, found ')'
(6763,35): run-time error CSS1025: Expected comma or open brace, found ')'
(6763,147): run-time error CSS1039: Token not allowed after unary operator: '-stage-gold'
(6764,10): run-time error CSS1030: Expected identifier, found '.'
(6764,35): run-time error CSS1031: Expected selector, found ')'
(6764,35): run-time error CSS1025: Expected comma or open brace, found ')'
(6764,147): run-time error CSS1039: Token not allowed after unary operator: '-stage-blue'
(6765,10): run-time error CSS1030: Expected identifier, found '.'
(6765,35): run-time error CSS1031: Expected selector, found ')'
(6765,35): run-time error CSS1025: Expected comma or open brace, found ')'
(6765,147): run-time error CSS1039: Token not allowed after unary operator: '-stage-navy'
(6766,10): run-time error CSS1030: Expected identifier, found '.'
(6766,35): run-time error CSS1031: Expected selector, found ')'
(6766,35): run-time error CSS1025: Expected comma or open brace, found ')'
(6766,105): run-time error CSS1030: Expected identifier, found '.'
(6766,130): run-time error CSS1031: Expected selector, found ')'
(6766,130): run-time error CSS1025: Expected comma or open brace, found ')'
(6767,10): run-time error CSS1030: Expected identifier, found '.'
(6767,35): run-time error CSS1031: Expected selector, found ')'
(6767,35): run-time error CSS1025: Expected comma or open brace, found ')'
(6767,104): run-time error CSS1030: Expected identifier, found '.'
(6767,129): run-time error CSS1031: Expected selector, found ')'
(6767,129): run-time error CSS1025: Expected comma or open brace, found ')'
(6768,10): run-time error CSS1030: Expected identifier, found '.'
(6768,35): run-time error CSS1031: Expected selector, found ')'
(6768,35): run-time error CSS1025: Expected comma or open brace, found ')'
(6768,105): run-time error CSS1030: Expected identifier, found '.'
(6768,130): run-time error CSS1031: Expected selector, found ')'
(6768,130): run-time error CSS1025: Expected comma or open brace, found ')'
(6769,10): run-time error CSS1030: Expected identifier, found '.'
(6769,35): run-time error CSS1031: Expected selector, found ')'
(6769,35): run-time error CSS1025: Expected comma or open brace, found ')'
(6769,102): run-time error CSS1030: Expected identifier, found '.'
(6769,127): run-time error CSS1031: Expected selector, found ')'
(6769,127): run-time error CSS1025: Expected comma or open brace, found ')'
(6770,85): run-time error CSS1039: Token not allowed after unary operator: '-accent'
(6773,55): run-time error CSS1039: Token not allowed after unary operator: '-card'
(6773,179): run-time error CSS1039: Token not allowed after unary operator: '-ink'
(6777,71): run-time error CSS1039: Token not allowed after unary operator: '-accent-line'
(6777,103): run-time error CSS1039: Token not allowed after unary operator: '-tint'
(6780,62): run-time error CSS1039: Token not allowed after unary operator: '-accent'
(6781,122): run-time error CSS1039: Token not allowed after unary operator: '-faint'
(6782,209): run-time error CSS1039: Token not allowed after unary operator: '-accent'
(6784,116): run-time error CSS1039: Token not allowed after unary operator: '-head'
(6785,70): run-time error CSS1039: Token not allowed after unary operator: '-muted'
(6788,82): run-time error CSS1039: Token not allowed after unary operator: '-head'
(6789,89): run-time error CSS1039: Token not allowed after unary operator: '-faint'
(6790,71): run-time error CSS1039: Token not allowed after unary operator: '-muted'
(6794,140): run-time error CSS1039: Token not allowed after unary operator: '-hair'
(6795,77): run-time error CSS1039: Token not allowed after unary operator: '-muted'
(6796,65): run-time error CSS1039: Token not allowed after unary operator: '-faint'
(6797,83): run-time error CSS1039: Token not allowed after unary operator: '-red'
(6801,51): run-time error CSS1039: Token not allowed after unary operator: '-grey-soft'
(6801,76): run-time error CSS1039: Token not allowed after unary operator: '-faint'
(6802,50): run-time error CSS1039: Token not allowed after unary operator: '-red-soft'
(6802,74): run-time error CSS1039: Token not allowed after unary operator: '-red'
(6803,52): run-time error CSS1039: Token not allowed after unary operator: '-amber-soft'
(6803,78): run-time error CSS1039: Token not allowed after unary operator: '-amber-ink'
(6804,51): run-time error CSS1039: Token not allowed after unary operator: '-blue-soft'
(6804,76): run-time error CSS1039: Token not allowed after unary operator: '-blue'
(6805,71): run-time error CSS1039: Token not allowed after unary operator: '-muted'
(6806,52): run-time error CSS1039: Token not allowed after unary operator: '-accent'
(6814,75): run-time error CSS1039: Token not allowed after unary operator: '-faint'
(6821,229): run-time error CSS1039: Token not allowed after unary operator: '-line'
(6821,254): run-time error CSS1039: Token not allowed after unary operator: '-card'
(6821,285): run-time error CSS1039: Token not allowed after unary operator: '-ink'
(6822,55): run-time error CSS1039: Token not allowed after unary operator: '-accent'
(6822,95): run-time error CSS1039: Token not allowed after unary operator: '-accent'
(6831,19): run-time error CSS1039: Token not allowed after unary operator: '-ink'
(6833,21): run-time error CSS1039: Token not allowed after unary operator: '-accent'
(6835,24): run-time error CSS1039: Token not allowed after unary operator: '-red'
(6837,49): run-time error CSS1030: Expected identifier, found '>'
(6837,65): run-time error CSS1031: Expected selector, found ')'
(6837,65): run-time error CSS1025: Expected comma or open brace, found ')'
(6851,43): run-time error CSS1030: Expected identifier, found '.'
(6851,52): run-time error CSS1031: Expected selector, found ')'
(6851,52): run-time error CSS1025: Expected comma or open brace, found ')'
(6852,43): run-time error CSS1030: Expected identifier, found '.'
(6852,52): run-time error CSS1031: Expected selector, found ')'
(6852,52): run-time error CSS1025: Expected comma or open brace, found ')'
(6853,33): run-time error CSS1030: Expected identifier, found '.'
(6853,42): run-time error CSS1031: Expected selector, found ')'
(6853,42): run-time error CSS1025: Expected comma or open brace, found ')'
(6854,33): run-time error CSS1030: Expected identifier, found '.'
(6854,42): run-time error CSS1031: Expected selector, found ')'
(6854,42): run-time error CSS1025: Expected comma or open brace, found ')'
(6855,33): run-time error CSS1030: Expected identifier, found '.'
(6855,42): run-time error CSS1031: Expected selector, found ')'
(6855,42): run-time error CSS1025: Expected comma or open brace, found ')'
(6856,33): run-time error CSS1030: Expected identifier, found '.'
(6856,42): run-time error CSS1031: Expected selector, found ')'
(6856,42): run-time error CSS1025: Expected comma or open brace, found ')'
(6857,33): run-time error CSS1030: Expected identifier, found '.'
(6857,42): run-time error CSS1031: Expected selector, found ')'
(6857,42): run-time error CSS1025: Expected comma or open brace, found ')'
(6858,33): run-time error CSS1030: Expected identifier, found '.'
(6858,42): run-time error CSS1031: Expected selector, found ')'
(6858,42): run-time error CSS1025: Expected comma or open brace, found ')'
(6859,33): run-time error CSS1030: Expected identifier, found '.'
(6859,42): run-time error CSS1031: Expected selector, found ')'
(6859,42): run-time error CSS1025: Expected comma or open brace, found ')'
(6860,33): run-time error CSS1030: Expected identifier, found '.'
(6860,42): run-time error CSS1031: Expected selector, found ')'
(6860,42): run-time error CSS1025: Expected comma or open brace, found ')'
(6864,92): run-time error CSS1039: Token not allowed after unary operator: '-ink'
(6865,203): run-time error CSS1039: Token not allowed after unary operator: '-card'
(6865,238): run-time error CSS1039: Token not allowed after unary operator: '-hair'
(6866,126): run-time error CSS1039: Token not allowed after unary operator: '-line'
(6866,172): run-time error CSS1039: Token not allowed after unary operator: '-band-2'
(6866,194): run-time error CSS1039: Token not allowed after unary operator: '-ink'
(6867,78): run-time error CSS1039: Token not allowed after unary operator: '-hover'
(6867,99): run-time error CSS1039: Token not allowed after unary operator: '-head'
(6868,86): run-time error CSS1039: Token not allowed after unary operator: '-accent'
(6868,113): run-time error CSS1039: Token not allowed after unary operator: '-accent'
(6869,90): run-time error CSS1039: Token not allowed after unary operator: '-accent-ink'
(6870,55): run-time error CSS1039: Token not allowed after unary operator: '-head'
(6879,180): run-time error CSS1039: Token not allowed after unary operator: '-card'
(6879,200): run-time error CSS1039: Token not allowed after unary operator: '-muted'
(6881,228): run-time error CSS1039: Token not allowed after unary operator: '-card'
(6881,367): run-time error CSS1039: Token not allowed after unary operator: '-head'
(6884,343): run-time error CSS1039: Token not allowed after unary operator: '-accent-soft'
(6884,370): run-time error CSS1039: Token not allowed after unary operator: '-accent'
(6886,76): run-time error CSS1039: Token not allowed after unary operator: '-green-soft'
(6886,102): run-time error CSS1039: Token not allowed after unary operator: '-green'
(6887,139): run-time error CSS1039: Token not allowed after unary operator: '-red-soft'
(6887,163): run-time error CSS1039: Token not allowed after unary operator: '-red'
(6888,81): run-time error CSS1039: Token not allowed after unary operator: '-amber-soft'
(6888,107): run-time error CSS1039: Token not allowed after unary operator: '-amber-ink'
(6893,87): run-time error CSS1039: Token not allowed after unary operator: '-hover'
(6894,173): run-time error CSS1039: Token not allowed after unary operator: '-faint'
(6895,113): run-time error CSS1039: Token not allowed after unary operator: '-faint'
(6896,91): run-time error CSS1039: Token not allowed after unary operator: '-head'
(6898,207): run-time error CSS1039: Token not allowed after unary operator: '-hover'
(6900,139): run-time error CSS1039: Token not allowed after unary operator: '-muted'
(6901,157): run-time error CSS1039: Token not allowed after unary operator: '-head'
(6903,119): run-time error CSS1039: Token not allowed after unary operator: '-faint'
(6913,173): run-time error CSS1039: Token not allowed after unary operator: '-head'
(6919,15): run-time error CSS1030: Expected identifier, found '.'
(6919,43): run-time error CSS1031: Expected selector, found ')'
(6919,43): run-time error CSS1025: Expected comma or open brace, found ')'
(6920,15): run-time error CSS1030: Expected identifier, found '.'
(6920,43): run-time error CSS1031: Expected selector, found ')'
(6920,43): run-time error CSS1025: Expected comma or open brace, found ')'
(6921,15): run-time error CSS1030: Expected identifier, found '.'
(6921,43): run-time error CSS1031: Expected selector, found ')'
(6921,43): run-time error CSS1025: Expected comma or open brace, found ')'
(6922,15): run-time error CSS1030: Expected identifier, found '.'
(6922,43): run-time error CSS1031: Expected selector, found ')'
(6922,43): run-time error CSS1025: Expected comma or open brace, found ')'
(6929,15): run-time error CSS1030: Expected identifier, found '.'
(6929,56): run-time error CSS1031: Expected selector, found ')'
(6929,56): run-time error CSS1025: Expected comma or open brace, found ')'
(6938,15): run-time error CSS1030: Expected identifier, found '.'
(6938,56): run-time error CSS1031: Expected selector, found ')'
(6938,56): run-time error CSS1025: Expected comma or open brace, found ')'
(6941,15): run-time error CSS1030: Expected identifier, found '.'
(6941,56): run-time error CSS1031: Expected selector, found ')'
(6941,56): run-time error CSS1025: Expected comma or open brace, found ')'
(6942,15): run-time error CSS1030: Expected identifier, found '.'
(6942,56): run-time error CSS1031: Expected selector, found ')'
(6942,56): run-time error CSS1025: Expected comma or open brace, found ')'
(6943,15): run-time error CSS1030: Expected identifier, found '.'
(6943,56): run-time error CSS1031: Expected selector, found ')'
(6943,56): run-time error CSS1025: Expected comma or open brace, found ')'
(6944,15): run-time error CSS1030: Expected identifier, found '.'
(6944,56): run-time error CSS1031: Expected selector, found ')'
(6944,56): run-time error CSS1025: Expected comma or open brace, found ')'
(6945,15): run-time error CSS1030: Expected identifier, found '.'
(6945,56): run-time error CSS1031: Expected selector, found ')'
(6945,56): run-time error CSS1025: Expected comma or open brace, found ')'
(6954,39): run-time error CSS1030: Expected identifier, found '.'
(6954,72): run-time error CSS1031: Expected selector, found ')'
(6954,72): run-time error CSS1025: Expected comma or open brace, found ')'
(6955,39): run-time error CSS1030: Expected identifier, found '.'
(6955,72): run-time error CSS1031: Expected selector, found ')'
(6955,72): run-time error CSS1025: Expected comma or open brace, found ')'
(6956,39): run-time error CSS1030: Expected identifier, found '.'
(6956,72): run-time error CSS1031: Expected selector, found ')'
(6956,72): run-time error CSS1025: Expected comma or open brace, found ')'
(6961,103): run-time error CSS1039: Token not allowed after unary operator: '-accent'
(6962,96): run-time error CSS1039: Token not allowed after unary operator: '-head'
(6963,78): run-time error CSS1039: Token not allowed after unary operator: '-muted'
(6964,30): run-time error CSS1039: Token not allowed after unary operator: '-muted'
(6965,36): run-time error CSS1039: Token not allowed after unary operator: '-accent'
(6970,113): run-time error CSS1039: Token not allowed after unary operator: '-line'
(6970,138): run-time error CSS1039: Token not allowed after unary operator: '-grey-soft'
(6972,95): run-time error CSS1039: Token not allowed after unary operator: '-muted'
(6978,80): run-time error CSS1039: Token not allowed after unary operator: '-hair'
(6979,39): run-time error CSS1039: Token not allowed after unary operator: '-stage-gray'
(6980,97): run-time error CSS1039: Token not allowed after unary operator: '-faint'
(6981,40): run-time error CSS1039: Token not allowed after unary operator: '-head'
(6982,46): run-time error CSS1039: Token not allowed after unary operator: '-stage-gray'
(6982,111): run-time error CSS1039: Token not allowed after unary operator: '-stage-gold'
(6983,46): run-time error CSS1039: Token not allowed after unary operator: '-stage-blue'
(6983,111): run-time error CSS1039: Token not allowed after unary operator: '-stage-navy'
(6984,48): run-time error CSS1039: Token not allowed after unary operator: '-stage-purple'
(6984,112): run-time error CSS1039: Token not allowed after unary operator: '-stage-green'
(6985,48): run-time error CSS1039: Token not allowed after unary operator: '-stage-orange'
(6985,110): run-time error CSS1039: Token not allowed after unary operator: '-stage-red'
(6987,126): run-time error CSS1039: Token not allowed after unary operator: '-grey-soft'
(6987,151): run-time error CSS1039: Token not allowed after unary operator: '-muted'
(6988,49): run-time error CSS1039: Token not allowed after unary operator: '-faint'
(6989,41): run-time error CSS1039: Token not allowed after unary operator: '-red-soft'
(6989,65): run-time error CSS1039: Token not allowed after unary operator: '-red'
(6990,40): run-time error CSS1039: Token not allowed after unary operator: '-red'
(6992,91): run-time error CSS1039: Token not allowed after unary operator: '-grey-soft'
(6992,116): run-time error CSS1039: Token not allowed after unary operator: '-muted'
(6996,82): run-time error CSS1039: Token not allowed after unary operator: '-faint'
(6997,74): run-time error CSS1039: Token not allowed after unary operator: '-head'
(6998,61): run-time error CSS1039: Token not allowed after unary operator: '-muted'
(6999,108): run-time error CSS1039: Token not allowed after unary operator: '-faint'
(7006,211): run-time error CSS1039: Token not allowed after unary operator: '-line'
(7008,173): run-time error CSS1039: Token not allowed after unary operator: '-muted'
(7009,59): run-time error CSS1039: Token not allowed after unary operator: '-head'
(7010,71): run-time error CSS1039: Token not allowed after unary operator: '-accent'
(7010,131): run-time error CSS1039: Token not allowed after unary operator: '-accent'
(7012,120): run-time error CSS1039: Token not allowed after unary operator: '-grey-soft'
(7012,145): run-time error CSS1039: Token not allowed after unary operator: '-muted'
(7013,70): run-time error CSS1039: Token not allowed after unary operator: '-accent-soft'
(7013,97): run-time error CSS1039: Token not allowed after unary operator: '-accent'
(7015,168): run-time error CSS1039: Token not allowed after unary operator: '-card'
(7016,121): run-time error CSS1039: Token not allowed after unary operator: '-line'
(7016,167): run-time error CSS1039: Token not allowed after unary operator: '-card'
(7016,187): run-time error CSS1039: Token not allowed after unary operator: '-ink'
(7017,92): run-time error CSS1039: Token not allowed after unary operator: '-faint'
(7018,47): run-time error CSS1039: Token not allowed after unary operator: '-band'
(7018,67): run-time error CSS1039: Token not allowed after unary operator: '-head'
(7023,74): run-time error CSS1039: Token not allowed after unary operator: '-head'
(7026,57): run-time error CSS1039: Token not allowed after unary operator: '-muted'
(7029,75): run-time error CSS1039: Token not allowed after unary operator: '-hair'
(7032,139): run-time error CSS1039: Token not allowed after unary operator: '-hair'
(7033,96): run-time error CSS1039: Token not allowed after unary operator: '-line'
(7033,121): run-time error CSS1039: Token not allowed after unary operator: '-tint'
(7033,141): run-time error CSS1039: Token not allowed after unary operator: '-muted'
(7038,86): run-time error CSS1039: Token not allowed after unary operator: '-ink'
(7039,73): run-time error CSS1039: Token not allowed after unary operator: '-line'
(7039,196): run-time error CSS1039: Token not allowed after unary operator: '-faint'
(7040,75): run-time error CSS1039: Token not allowed after unary operator: '-hair'
(7043,76): run-time error CSS1039: Token not allowed after unary operator: '-faint'
(7044,109): run-time error CSS1039: Token not allowed after unary operator: '-muted'
(7046,51): run-time error CSS1039: Token not allowed after unary operator: '-band'
(7046,71): run-time error CSS1039: Token not allowed after unary operator: '-head'
(7049,28): run-time error CSS1039: Token not allowed after unary operator: '-green'
(7050,27): run-time error CSS1039: Token not allowed after unary operator: '-red'
(7051,63): run-time error CSS1039: Token not allowed after unary operator: '-muted'
(7053,67): run-time error CSS1030: Expected identifier, found '.'
(7053,84): run-time error CSS1031: Expected selector, found ')'
(7053,84): run-time error CSS1025: Expected comma or open brace, found ')'
(7055,33): run-time error CSS1039: Token not allowed after unary operator: '-amber'
(7056,81): run-time error CSS1039: Token not allowed after unary operator: '-ink'
(7061,124): run-time error CSS1039: Token not allowed after unary operator: '-muted'
(7063,68): run-time error CSS1039: Token not allowed after unary operator: '-hair'
(7064,55): run-time error CSS1039: Token not allowed after unary operator: '-faint'
(7065,55): run-time error CSS1039: Token not allowed after unary operator: '-ink'
(7073,134): run-time error CSS1039: Token not allowed after unary operator: '-faint'
(7076,122): run-time error CSS1039: Token not allowed after unary operator: '-line'
(7077,54): run-time error CSS1030: Expected identifier, found '.'
(7077,66): run-time error CSS1031: Expected selector, found ')'
(7077,66): run-time error CSS1025: Expected comma or open brace, found ')'
(7078,188): run-time error CSS1039: Token not allowed after unary operator: '-card'
(7079,53): run-time error CSS1039: Token not allowed after unary operator: '-green'
(7079,79): run-time error CSS1039: Token not allowed after unary operator: '-green'
(7080,53): run-time error CSS1039: Token not allowed after unary operator: '-red'
(7080,77): run-time error CSS1039: Token not allowed after unary operator: '-red'
(7082,45): run-time error CSS1039: Token not allowed after unary operator: '-head'
(7083,29): run-time error CSS1039: Token not allowed after unary operator: '-muted'
(7084,85): run-time error CSS1039: Token not allowed after unary operator: '-faint'
(7085,77): run-time error CSS1039: Token not allowed after unary operator: '-hair'
(7085,122): run-time error CSS1039: Token not allowed after unary operator: '-tint'
(7086,181): run-time error CSS1039: Token not allowed after unary operator: '-hair'
(7088,64): run-time error CSS1039: Token not allowed after unary operator: '-muted'
(7090,5): run-time error CSS1030: Expected identifier, found '.'
(7090,45): run-time error CSS1031: Expected selector, found ')'
(7090,45): run-time error CSS1025: Expected comma or open brace, found ')'
(7091,28): run-time error CSS1039: Token not allowed after unary operator: '-muted'
(7092,46): run-time error CSS1039: Token not allowed after unary operator: '-head'
(7093,72): run-time error CSS1039: Token not allowed after unary operator: '-faint'
(7095,42): run-time error CSS1039: Token not allowed after unary operator: '-head'
(7097,43): run-time error CSS1039: Token not allowed after unary operator: '-green-soft'
(7097,88): run-time error CSS1039: Token not allowed after unary operator: '-green'
(7099,45): run-time error CSS1039: Token not allowed after unary operator: '-red-soft'
(7099,88): run-time error CSS1039: Token not allowed after unary operator: '-red'
(7100,40): run-time error CSS1039: Token not allowed after unary operator: '-muted'
(7101,53): run-time error CSS1039: Token not allowed after unary operator: '-ink'
(7111,48): run-time error CSS1039: Token not allowed after unary operator: '-accent'
(7113,64): run-time error CSS1039: Token not allowed after unary operator: '-head'
(7114,27): run-time error CSS1039: Token not allowed after unary operator: '-muted'
(7115,61): run-time error CSS1039: Token not allowed after unary operator: '-muted'
(7116,166): run-time error CSS1039: Token not allowed after unary operator: '-faint'
(7117,40): run-time error CSS1039: Token not allowed after unary operator: '-faint'
(7120,27): run-time error CSS1039: Token not allowed after unary operator: '-muted'
(7121,29): run-time error CSS1039: Token not allowed after unary operator: '-muted'
(7123,54): run-time error CSS1039: Token not allowed after unary operator: '-green'
(7124,33): run-time error CSS1039: Token not allowed after unary operator: '-red'
(7125,34): run-time error CSS1039: Token not allowed after unary operator: '-orange'
(7127,38): run-time error CSS1039: Token not allowed after unary operator: '-blue-soft'
(7127,63): run-time error CSS1039: Token not allowed after unary operator: '-blue'
(7128,38): run-time error CSS1039: Token not allowed after unary operator: '-amber-soft'
(7128,64): run-time error CSS1039: Token not allowed after unary operator: '-amber-ink'
(7129,40): run-time error CSS1039: Token not allowed after unary operator: '-violet-soft'
(7129,67): run-time error CSS1039: Token not allowed after unary operator: '-violet'
(7131,184): run-time error CSS1039: Token not allowed after unary operator: '-grey-soft'
(7131,209): run-time error CSS1039: Token not allowed after unary operator: '-muted'
(7132,27): run-time error CSS1039: Token not allowed after unary operator: '-faint'
(7133,65): run-time error CSS1039: Token not allowed after unary operator: '-head'
(7141,8): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(7141,26): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(7145,5): run-time error CSS1030: Expected identifier, found '.'
(7145,29): run-time error CSS1031: Expected selector, found ')'
(7145,29): run-time error CSS1025: Expected comma or open brace, found ')'
(7146,5): run-time error CSS1030: Expected identifier, found '.'
(7146,29): run-time error CSS1031: Expected selector, found ')'
(7146,29): run-time error CSS1025: Expected comma or open brace, found ')'
(7147,40): run-time error CSS1039: Token not allowed after unary operator: '-card'
(7147,71): run-time error CSS1039: Token not allowed after unary operator: '-frame'
(7148,146): run-time error CSS1039: Token not allowed after unary operator: '-head'
(7149,14): run-time error CSS1030: Expected identifier, found '.'
(7149,17): run-time error CSS1031: Expected selector, found ')'
(7149,17): run-time error CSS1025: Expected comma or open brace, found ')'
(7150,14): run-time error CSS1030: Expected identifier, found '.'
(7150,17): run-time error CSS1031: Expected selector, found ')'
(7150,17): run-time error CSS1025: Expected comma or open brace, found ')'
(7152,5): run-time error CSS1030: Expected identifier, found '.'
(7152,29): run-time error CSS1031: Expected selector, found ')'
(7152,29): run-time error CSS1025: Expected comma or open brace, found ')'
(7153,5): run-time error CSS1030: Expected identifier, found '.'
(7153,29): run-time error CSS1031: Expected selector, found ')'
(7153,29): run-time error CSS1025: Expected comma or open brace, found ')'
(7154,5): run-time error CSS1030: Expected identifier, found '.'
(7154,29): run-time error CSS1031: Expected selector, found ')'
(7154,29): run-time error CSS1025: Expected comma or open brace, found ')'
(7158,96): run-time error CSS1039: Token not allowed after unary operator: '-red-soft'
(7158,120): run-time error CSS1039: Token not allowed after unary operator: '-red'
(7162,121): run-time error CSS1039: Token not allowed after unary operator: '-f-label'
(7162,216): run-time error CSS1039: Token not allowed after unary operator: '-ink'
(7163,44): run-time error CSS1039: Token not allowed after unary operator: '-red'
(7164,52): run-time error CSS1039: Token not allowed after unary operator: '-faint'
(7165,160): run-time error CSS1039: Token not allowed after unary operator: '-faint'
(7167,134): run-time error CSS1039: Token not allowed after unary operator: '-faint'
(7171,190): run-time error CSS1039: Token not allowed after unary operator: '-head'
(7175,224): run-time error CSS1039: Token not allowed after unary operator: '-head'
(7175,258): run-time error CSS1039: Token not allowed after unary operator: '-line'
(7176,77): run-time error CSS1039: Token not allowed after unary operator: '-faint'
(7177,77): run-time error CSS1039: Token not allowed after unary operator: '-accent'
(7177,115): run-time error CSS1039: Token not allowed after unary operator: '-accent'
(7178,47): run-time error CSS1039: Token not allowed after unary operator: '-faint'
(7179,134): run-time error CSS1039: Token not allowed after unary operator: '-head'
(7181,190): run-time error CSS1039: Token not allowed after unary operator: '-line'
(7182,160): run-time error CSS1039: Token not allowed after unary operator: '-faint'
(7186,42): run-time error CSS1039: Token not allowed after unary operator: '-f-label'
(7186,72): run-time error CSS1039: Token not allowed after unary operator: '-f-input'
(7186,106): run-time error CSS1039: Token not allowed after unary operator: '-red'
(7189,29): run-time error CSS1030: Expected identifier, found '.'
(7189,65): run-time error CSS1031: Expected selector, found ')'
(7189,65): run-time error CSS1025: Expected comma or open brace, found ')'
(7190,29): run-time error CSS1030: Expected identifier, found '.'
(7190,65): run-time error CSS1031: Expected selector, found ')'
(7190,65): run-time error CSS1025: Expected comma or open brace, found ')'
(7191,29): run-time error CSS1030: Expected identifier, found '.'
(7191,65): run-time error CSS1031: Expected selector, found ')'
(7191,65): run-time error CSS1025: Expected comma or open brace, found ')'
(7194,90): run-time error CSS1039: Token not allowed after unary operator: '-f-input'
(7194,176): run-time error CSS1039: Token not allowed after unary operator: '-line'
(7195,67): run-time error CSS1039: Token not allowed after unary operator: '-faint'
(7196,74): run-time error CSS1039: Token not allowed after unary operator: '-accent'
(7196,112): run-time error CSS1039: Token not allowed after unary operator: '-accent'
(7197,129): run-time error CSS1039: Token not allowed after unary operator: '-faint'
(7204,38): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(7204,51): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(7205,52): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(7205,64): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(7206,51): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(7206,64): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(7207,52): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(7207,65): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(7208,42): run-time error CSS1030: Expected identifier, found '.'
(7208,115): run-time error CSS1031: Expected selector, found ')'
(7208,115): run-time error CSS1025: Expected comma or open brace, found ')'
(7209,42): run-time error CSS1030: Expected identifier, found '.'
(7209,115): run-time error CSS1031: Expected selector, found ')'
(7209,115): run-time error CSS1025: Expected comma or open brace, found ')'
(7210,60): run-time error CSS1039: Token not allowed after unary operator: '-p1'
(7211,75): run-time error CSS1039: Token not allowed after unary operator: '-f-label'
(7211,98): run-time error CSS1039: Token not allowed after unary operator: '-p1'
(7211,124): run-time error CSS1039: Token not allowed after unary operator: '-p2'
(7215,58): run-time error CSS1030: Expected identifier, found '.'
(7215,131): run-time error CSS1031: Expected selector, found ')'
(7215,131): run-time error CSS1025: Expected comma or open brace, found ')'
(7216,42): run-time error CSS1030: Expected identifier, found '.'
(7216,130): run-time error CSS1031: Expected selector, found ')'
(7216,130): run-time error CSS1025: Expected comma or open brace, found ')'
(7223,144): run-time error CSS1039: Token not allowed after unary operator: '-f-input'
(7224,86): run-time error CSS1039: Token not allowed after unary operator: '-muted'
(7225,72): run-time error CSS1039: Token not allowed after unary operator: '-muted'
(7228,119): run-time error CSS1039: Token not allowed after unary operator: '-f-label'
(7228,136): run-time error CSS1039: Token not allowed after unary operator: '-f-input'
(7230,82): run-time error CSS1039: Token not allowed after unary operator: '-muted'
(7234,132): run-time error CSS1039: Token not allowed after unary operator: '-red-soft'
(7234,167): run-time error CSS1039: Token not allowed after unary operator: '-red'
(7235,72): run-time error CSS1039: Token not allowed after unary operator: '-red'
(7237,58): run-time error CSS1039: Token not allowed after unary operator: '-f-input'
(7238,92): run-time error CSS1039: Token not allowed after unary operator: '-line'
(7239,95): run-time error CSS1039: Token not allowed after unary operator: '-head'
(7240,74): run-time error CSS1039: Token not allowed after unary operator: '-faint'
(7244,83): run-time error CSS1039: Token not allowed after unary operator: '-f-label'
(7244,148): run-time error CSS1039: Token not allowed after unary operator: '-muted'
(7248,60): run-time error CSS1039: Token not allowed after unary operator: '-red'
(7249,61): run-time error CSS1039: Token not allowed after unary operator: '-amber-ink'
(7250,59): run-time error CSS1039: Token not allowed after unary operator: '-green'
(7254,124): run-time error CSS1039: Token not allowed after unary operator: '-line'
(7254,169): run-time error CSS1039: Token not allowed after unary operator: '-card'
(7254,224): run-time error CSS1039: Token not allowed after unary operator: '-head'
(7256,62): run-time error CSS1039: Token not allowed after unary operator: '-faint'
(7259,151): run-time error CSS1039: Token not allowed after unary operator: '-band'
(7259,206): run-time error CSS1039: Token not allowed after unary operator: '-head'
(7260,58): run-time error CSS1039: Token not allowed after unary operator: '-faint'
(7261,68): run-time error CSS1039: Token not allowed after unary operator: '-faint'
(7263,76): run-time error CSS1039: Token not allowed after unary operator: '-f-input'
(7263,153): run-time error CSS1039: Token not allowed after unary operator: '-line'
(7263,198): run-time error CSS1039: Token not allowed after unary operator: '-band'
(7264,124): run-time error CSS1039: Token not allowed after unary operator: '-head'
(7265,105): run-time error CSS1039: Token not allowed after unary operator: '-muted'
(7269,80): run-time error CSS1039: Token not allowed after unary operator: '-faint'
(7270,86): run-time error CSS1039: Token not allowed after unary operator: '-accent'
(7272,190): run-time error CSS1039: Token not allowed after unary operator: '-hair'
(7274,89): run-time error CSS1039: Token not allowed after unary operator: '-faint'
(7275,99): run-time error CSS1039: Token not allowed after unary operator: '-accent'
(7276,213): run-time error CSS1039: Token not allowed after unary operator: '-accent'
(7278,167): run-time error CSS1039: Token not allowed after unary operator: '-accent-ink'
(7287,53): run-time error CSS1030: Expected identifier, found '>'
(7287,69): run-time error CSS1031: Expected selector, found ')'
(7287,69): run-time error CSS1025: Expected comma or open brace, found ')'
(7288,53): run-time error CSS1030: Expected identifier, found '>'
(7288,69): run-time error CSS1031: Expected selector, found ')'
(7288,69): run-time error CSS1025: Expected comma or open brace, found ')'
(7293,53): run-time error CSS1030: Expected identifier, found '>'
(7293,69): run-time error CSS1031: Expected selector, found ')'
(7293,69): run-time error CSS1025: Expected comma or open brace, found ')'
(7296,53): run-time error CSS1030: Expected identifier, found '>'
(7296,69): run-time error CSS1031: Expected selector, found ')'
(7296,69): run-time error CSS1025: Expected comma or open brace, found ')'
(7299,127): run-time error CSS1039: Token not allowed after unary operator: '-band'
(7299,173): run-time error CSS1039: Token not allowed after unary operator: '-hair'
(7299,193): run-time error CSS1039: Token not allowed after unary operator: '-muted'
(7302,203): run-time error CSS1039: Token not allowed after unary operator: '-line'
(7302,270): run-time error CSS1039: Token not allowed after unary operator: '-band'
(7303,147): run-time error CSS1039: Token not allowed after unary operator: '-head'
(7306,88): run-time error CSS1039: Token not allowed after unary operator: '-line'
(7308,174): run-time error CSS1039: Token not allowed after unary operator: '-band'
(7313,81): run-time error CSS1039: Token not allowed after unary operator: '-line'
(7314,60): run-time error CSS1030: Expected identifier, found '.'
(7314,120): run-time error CSS1031: Expected selector, found ')'
(7314,120): run-time error CSS1025: Expected comma or open brace, found ')'
(7315,102): run-time error CSS1039: Token not allowed after unary operator: '-red'
(7316,142): run-time error CSS1039: Token not allowed after unary operator: '-muted'
(7325,59): run-time error CSS1039: Token not allowed after unary operator: '-card'
(7325,90): run-time error CSS1039: Token not allowed after unary operator: '-line'
(7327,155): run-time error CSS1039: Token not allowed after unary operator: '-muted'
(7328,83): run-time error CSS1039: Token not allowed after unary operator: '-muted'
(7343,229): run-time error CSS1039: Token not allowed after unary operator: '-line'
(7343,297): run-time error CSS1039: Token not allowed after unary operator: '-band'
(7343,328): run-time error CSS1039: Token not allowed after unary operator: '-head'
(7344,70): run-time error CSS1039: Token not allowed after unary operator: '-band-2'
(7346,84): run-time error CSS1039: Token not allowed after unary operator: '-ink'
(7349,41): run-time error CSS1039: Token not allowed after unary operator: '-card'
(7349,79): run-time error CSS1039: Token not allowed after unary operator: '-line'
(7350,167): run-time error CSS1039: Token not allowed after unary operator: '-ink'
(7353,56): run-time error CSS1039: Token not allowed after unary operator: '-tint'
(7353,94): run-time error CSS1039: Token not allowed after unary operator: '-hair'
(7357,125): run-time error CSS1039: Token not allowed after unary operator: '-head'
(7357,159): run-time error CSS1039: Token not allowed after unary operator: '-line'
(7358,89): run-time error CSS1039: Token not allowed after unary operator: '-accent'
(7358,127): run-time error CSS1039: Token not allowed after unary operator: '-accent'
(7361,50): run-time error CSS1039: Token not allowed after unary operator: '-faint'
(7362,143): run-time error CSS1039: Token not allowed after unary operator: '-head'
(7364,169): run-time error CSS1039: Token not allowed after unary operator: '-faint'
(7365,74): run-time error CSS1039: Token not allowed after unary operator: '-red'
(7366,112): run-time error CSS1039: Token not allowed after unary operator: '-faint'
(7367,53): run-time error CSS1039: Token not allowed after unary operator: '-red'
(7375,70): run-time error CSS1039: Token not allowed after unary operator: '-faint'
(7376,60): run-time error CSS1039: Token not allowed after unary operator: '-accent'
(7378,53): run-time error CSS1039: Token not allowed after unary operator: '-faint'
(7379,43): run-time error CSS1039: Token not allowed after unary operator: '-accent'
(7382,219): run-time error CSS1039: Token not allowed after unary operator: '-line'
(7382,286): run-time error CSS1039: Token not allowed after unary operator: '-card'
(7384,160): run-time error CSS1039: Token not allowed after unary operator: '-muted'
(7385,143): run-time error CSS1039: Token not allowed after unary operator: '-accent'
(7385,181): run-time error CSS1039: Token not allowed after unary operator: '-card'
(7386,90): run-time error CSS1039: Token not allowed after unary operator: '-accent'
(7389,84): run-time error CSS1039: Token not allowed after unary operator: '-card'
(7389,231): run-time error CSS1039: Token not allowed after unary operator: '-ink'
(7391,123): run-time error CSS1039: Token not allowed after unary operator: '-hair'
(7401,89): run-time error CSS1039: Token not allowed after unary operator: '-alt'
(7403,174): run-time error CSS1039: Token not allowed after unary operator: '-hover'
(7405,192): run-time error CSS1039: Token not allowed after unary operator: '-faint'
(7408,48): run-time error CSS1039: Token not allowed after unary operator: '-ink'
(7409,54): run-time error CSS1039: Token not allowed after unary operator: '-accent'
(7410,55): run-time error CSS1039: Token not allowed after unary operator: '-faint'
(7411,61): run-time error CSS1039: Token not allowed after unary operator: '-red'
(7412,99): run-time error CSS1039: Token not allowed after unary operator: '-faint'
(7413,140): run-time error CSS1039: Token not allowed after unary operator: '-head'
(7413,165): run-time error CSS1039: Token not allowed after unary operator: '-tint'
(7413,200): run-time error CSS1039: Token not allowed after unary operator: '-line'
(7421,23): run-time error CSS1030: Expected identifier, found '.'
(7421,38): run-time error CSS1031: Expected selector, found ')'
(7421,38): run-time error CSS1025: Expected comma or open brace, found ')'
(7427,83): run-time error CSS1039: Token not allowed after unary operator: '-ink'
(7428,108): run-time error CSS1039: Token not allowed after unary operator: '-accent'
(7429,66): run-time error CSS1039: Token not allowed after unary operator: '-faint'
(7430,56): run-time error CSS1039: Token not allowed after unary operator: '-red'
(7431,72): run-time error CSS1039: Token not allowed after unary operator: '-faint'
(7432,174): run-time error CSS1039: Token not allowed after unary operator: '-muted'
(7434,79): run-time error CSS1039: Token not allowed after unary operator: '-red'
(7438,103): run-time error CSS1039: Token not allowed after unary operator: '-hair'
(7439,88): run-time error CSS1039: Token not allowed after unary operator: '-blue'
(7440,46): run-time error CSS1039: Token not allowed after unary operator: '-green'
(7445,94): run-time error CSS1039: Token not allowed after unary operator: '-muted'
(7446,50): run-time error CSS1039: Token not allowed after unary operator: '-head'
(7447,62): run-time error CSS1039: Token not allowed after unary operator: '-emerald'
(7448,64): run-time error CSS1039: Token not allowed after unary operator: '-red'
(7449,60): run-time error CSS1039: Token not allowed after unary operator: '-faint'
(7456,35): run-time error CSS1039: Token not allowed after unary operator: '-red'
(7458,93): run-time error CSS1039: Token not allowed after unary operator: '-accent'
(7460,47): run-time error CSS1039: Token not allowed after unary operator: '-f-input'
(7460,164): run-time error CSS1039: Token not allowed after unary operator: '-line'
(7460,278): run-time error CSS1039: Token not allowed after unary operator: '-head'
(7461,67): run-time error CSS1039: Token not allowed after unary operator: '-faint'
(7462,82): run-time error CSS1039: Token not allowed after unary operator: '-accent'
(7462,120): run-time error CSS1039: Token not allowed after unary operator: '-accent'
(7463,135): run-time error CSS1039: Token not allowed after unary operator: '-faint'
(7465,64): run-time error CSS1039: Token not allowed after unary operator: '-green'
(7466,148): run-time error CSS1039: Token not allowed after unary operator: '-green'
(7467,132): run-time error CSS1039: Token not allowed after unary operator: '-line'
(7467,177): run-time error CSS1039: Token not allowed after unary operator: '-band'
(7467,232): run-time error CSS1039: Token not allowed after unary operator: '-head'
(7470,58): run-time error CSS1039: Token not allowed after unary operator: '-muted'
(7471,52): run-time error CSS1039: Token not allowed after unary operator: '-head'
(7472,96): run-time error CSS1039: Token not allowed after unary operator: '-green-soft'
(7472,122): run-time error CSS1039: Token not allowed after unary operator: '-green'
(7477,90): run-time error CSS1039: Token not allowed after unary operator: '-accent'
(7477,117): run-time error CSS1039: Token not allowed after unary operator: '-band'
(7477,172): run-time error CSS1039: Token not allowed after unary operator: '-head'
(7478,122): run-time error CSS1039: Token not allowed after unary operator: '-accent'
(7480,39): run-time error CSS1039: Token not allowed after unary operator: '-faint'
(7482,68): run-time error CSS1039: Token not allowed after unary operator: '-line'
(7485,118): run-time error CSS1039: Token not allowed after unary operator: '-line'
(7486,149): run-time error CSS1039: Token not allowed after unary operator: '-head'
(7487,61): run-time error CSS1039: Token not allowed after unary operator: '-faint'
(7495,161): run-time error CSS1039: Token not allowed after unary operator: '-band'
(7499,92): run-time error CSS1039: Token not allowed after unary operator: '-muted'
(7500,83): run-time error CSS1039: Token not allowed after unary operator: '-head'
(7501,52): run-time error CSS1039: Token not allowed after unary operator: '-red'
(7503,124): run-time error CSS1039: Token not allowed after unary operator: '-line'
(7504,137): run-time error CSS1039: Token not allowed after unary operator: '-muted'
(7505,71): run-time error CSS1039: Token not allowed after unary operator: '-muted'
(7506,79): run-time error CSS1039: Token not allowed after unary operator: '-faint'
(7508,55): run-time error CSS1039: Token not allowed after unary operator: '-faint'
(7509,145): run-time error CSS1039: Token not allowed after unary operator: '-head'
(7510,133): run-time error CSS1039: Token not allowed after unary operator: '-head'
(7511,115): run-time error CSS1039: Token not allowed after unary operator: '-faint'
(7512,79): run-time error CSS1039: Token not allowed after unary operator: '-muted'
(7513,134): run-time error CSS1039: Token not allowed after unary operator: '-line'
(7513,180): run-time error CSS1039: Token not allowed after unary operator: '-card'
(7513,200): run-time error CSS1039: Token not allowed after unary operator: '-ink'
(7514,62): run-time error CSS1039: Token not allowed after unary operator: '-accent-line'
(7514,89): run-time error CSS1039: Token not allowed after unary operator: '-accent'
(7515,64): run-time error CSS1039: Token not allowed after unary operator: '-faint'
(7527,58): run-time error CSS1039: Token not allowed after unary operator: '-card'
(7527,89): run-time error CSS1039: Token not allowed after unary operator: '-line'
(7528,118): run-time error CSS1039: Token not allowed after unary operator: '-hair'
(7529,71): run-time error CSS1039: Token not allowed after unary operator: '-head'
(7531,90): run-time error CSS1039: Token not allowed after unary operator: '-faint'
(7534,66): run-time error CSS1039: Token not allowed after unary operator: '-hair'
(7536,39): run-time error CSS1039: Token not allowed after unary operator: '-muted'
(7537,39): run-time error CSS1039: Token not allowed after unary operator: '-faint'
(7538,74): run-time error CSS1039: Token not allowed after unary operator: '-head'
(7539,43): run-time error CSS1039: Token not allowed after unary operator: '-band'
(7540,46): run-time error CSS1039: Token not allowed after unary operator: '-green'
(7541,47): run-time error CSS1039: Token not allowed after unary operator: '-red'
(7544,70): run-time error CSS1039: Token not allowed after unary operator: '-hair'
(7545,119): run-time error CSS1039: Token not allowed after unary operator: '-muted'
(7548,53): run-time error CSS1039: Token not allowed after unary operator: '-muted'
(7549,101): run-time error CSS1039: Token not allowed after unary operator: '-faint'
(7550,52): run-time error CSS1039: Token not allowed after unary operator: '-faint'
(7552,147): run-time error CSS1039: Token not allowed after unary operator: '-head'
(7553,135): run-time error CSS1039: Token not allowed after unary operator: '-head'
(7554,119): run-time error CSS1039: Token not allowed after unary operator: '-faint'
(7556,81): run-time error CSS1039: Token not allowed after unary operator: '-ink'
(7557,134): run-time error CSS1039: Token not allowed after unary operator: '-accent-line'
(7557,187): run-time error CSS1039: Token not allowed after unary operator: '-card'
(7557,207): run-time error CSS1039: Token not allowed after unary operator: '-accent'
(7558,60): run-time error CSS1039: Token not allowed after unary operator: '-accent-soft'
(7559,71): run-time error CSS1039: Token not allowed after unary operator: '-line'
(7559,91): run-time error CSS1039: Token not allowed after unary operator: '-faint'
(7561,105): run-time error CSS1039: Token not allowed after unary operator: '-hair'
(7561,139): run-time error CSS1039: Token not allowed after unary operator: '-line'
(7567,143): run-time error CSS1039: Token not allowed after unary operator: '-accent-line'
(7568,132): run-time error CSS1039: Token not allowed after unary operator: '-accent'
(7569,176): run-time error CSS1039: Token not allowed after unary operator: '-accent'
(7571,151): run-time error CSS1039: Token not allowed after unary operator: '-accent-soft'
(7584,10): run-time error CSS1030: Expected identifier, found '.'
(7584,40): run-time error CSS1031: Expected selector, found ')'
(7584,40): run-time error CSS1025: Expected comma or open brace, found ')'
(7585,10): run-time error CSS1030: Expected identifier, found '.'
(7585,40): run-time error CSS1031: Expected selector, found ')'
(7585,40): run-time error CSS1025: Expected comma or open brace, found ')'
(7586,10): run-time error CSS1030: Expected identifier, found '.'
(7586,40): run-time error CSS1031: Expected selector, found ')'
(7586,40): run-time error CSS1025: Expected comma or open brace, found ')'
(7587,10): run-time error CSS1030: Expected identifier, found '.'
(7587,40): run-time error CSS1031: Expected selector, found ')'
(7587,40): run-time error CSS1025: Expected comma or open brace, found ')'
(7589,182): run-time error CSS1039: Token not allowed after unary operator: '-line'
(7589,263): run-time error CSS1039: Token not allowed after unary operator: '-head'
(7590,122): run-time error CSS1039: Token not allowed after unary operator: '-accent'
(7590,160): run-time error CSS1039: Token not allowed after unary operator: '-accent'
(7591,113): run-time error CSS1039: Token not allowed after unary operator: '-line'
(7591,133): run-time error CSS1039: Token not allowed after unary operator: '-faint'
(7593,96): run-time error CSS1039: Token not allowed after unary operator: '-muted'
(7601,159): run-time error CSS1039: Token not allowed after unary operator: '-line'
(7601,240): run-time error CSS1039: Token not allowed after unary operator: '-head'
(7602,105): run-time error CSS1039: Token not allowed after unary operator: '-accent'
(7602,143): run-time error CSS1039: Token not allowed after unary operator: '-accent'
(7612,74): run-time error CSS1039: Token not allowed after unary operator: '-faint'
(7614,167): run-time error CSS1039: Token not allowed after unary operator: '-muted'
(7617,74): run-time error CSS1039: Token not allowed after unary operator: '-head'
(7618,150): run-time error CSS1039: Token not allowed after unary operator: '-muted'
(7619,141): run-time error CSS1039: Token not allowed after unary operator: '-faint'
(7623,94): run-time error CSS1039: Token not allowed after unary operator: '-band-2'
(7625,124): run-time error CSS1039: Token not allowed after unary operator: '-muted'
(7626,95): run-time error CSS1039: Token not allowed after unary operator: '-accent-soft'
(7627,114): run-time error CSS1039: Token not allowed after unary operator: '-accent'
(7629,92): run-time error CSS1039: Token not allowed after unary operator: '-faint'
(7630,79): run-time error CSS1039: Token not allowed after unary operator: '-accent'
(7631,86): run-time error CSS1039: Token not allowed after unary operator: '-red'
(7632,84): run-time error CSS1039: Token not allowed after unary operator: '-accent'
(7634,150): run-time error CSS1039: Token not allowed after unary operator: '-line'
(7634,175): run-time error CSS1039: Token not allowed after unary operator: '-card'
(7634,212): run-time error CSS1039: Token not allowed after unary operator: '-muted'
(7635,10): run-time error CSS1030: Expected identifier, found '.'
(7635,38): run-time error CSS1031: Expected selector, found ')'
(7635,38): run-time error CSS1025: Expected comma or open brace, found ')'
(7638,87): run-time error CSS1039: Token not allowed after unary operator: '-red'
(7639,82): run-time error CSS1039: Token not allowed after unary operator: '-faint'
(7640,88): run-time error CSS1039: Token not allowed after unary operator: '-muted'
(7648,47): run-time error CSS1039: Token not allowed after unary operator: '-card'
(7649,34): run-time error CSS1030: Expected identifier, found '.'
(7649,56): run-time error CSS1031: Expected selector, found ')'
(7649,56): run-time error CSS1025: Expected comma or open brace, found ')'
(7652,37): run-time error CSS1030: Expected identifier, found '.'
(7652,61): run-time error CSS1031: Expected selector, found ')'
(7652,61): run-time error CSS1025: Expected comma or open brace, found ')'
(7653,21): run-time error CSS1030: Expected identifier, found '.'
(7653,80): run-time error CSS1031: Expected selector, found ')'
(7653,80): run-time error CSS1025: Expected comma or open brace, found ')'
(7654,21): run-time error CSS1030: Expected identifier, found '.'
(7654,80): run-time error CSS1031: Expected selector, found ')'
(7654,80): run-time error CSS1025: Expected comma or open brace, found ')'
(7656,98): run-time error CSS1039: Token not allowed after unary operator: '-faint'
(7658,49): run-time error CSS1039: Token not allowed after unary operator: '-red'
(7660,139): run-time error CSS1039: Token not allowed after unary operator: '-tint'
(7660,176): run-time error CSS1039: Token not allowed after unary operator: '-muted'
(7661,53): run-time error CSS1039: Token not allowed after unary operator: '-ink'
(7662,59): run-time error CSS1039: Token not allowed after unary operator: '-accent'
(7664,59): run-time error CSS1039: Token not allowed after unary operator: '-head'
(7666,54): run-time error CSS1039: Token not allowed after unary operator: '-red'
(7670,180): run-time error CSS1039: Token not allowed after unary operator: '-line'
(7670,261): run-time error CSS1039: Token not allowed after unary operator: '-head'
(7671,96): run-time error CSS1039: Token not allowed after unary operator: '-accent'
(7671,134): run-time error CSS1039: Token not allowed after unary operator: '-accent'
(7672,74): run-time error CSS1039: Token not allowed after unary operator: '-muted'
(7689,23): run-time error CSS1030: Expected identifier, found '['
(7689,26): run-time error CSS1031: Expected selector, found '$='
(7689,26): run-time error CSS1025: Expected comma or open brace, found '$='
(7976,58): run-time error CSS1039: Token not allowed after unary operator: '-amber'
(7987,183): run-time error CSS1039: Token not allowed after unary operator: '-head'
(7989,66): run-time error CSS1039: Token not allowed after unary operator: '-tip-arrow'
(7989,168): run-time error CSS1039: Token not allowed after unary operator: '-head'
(7990,113): run-time error CSS1039: Token not allowed after unary operator: '-head'
(7992,33): run-time error CSS1030: Expected identifier, found '['
(7992,42): run-time error CSS1031: Expected selector, found ']'
(7992,42): run-time error CSS1025: Expected comma or open brace, found ']'
(7994,92): run-time error CSS1039: Token not allowed after unary operator: '-faint'
(7995,81): run-time error CSS1039: Token not allowed after unary operator: '-accent'
(8015,40): run-time error CSS1039: Token not allowed after unary operator: '-ink'
(8016,46): run-time error CSS1039: Token not allowed after unary operator: '-accent'
(8017,40): run-time error CSS1039: Token not allowed after unary operator: '-faint'
(8027,142): run-time error CSS1039: Token not allowed after unary operator: '-faint'
(8028,46): run-time error CSS1039: Token not allowed after unary operator: '-hover'
(8028,67): run-time error CSS1039: Token not allowed after unary operator: '-accent'
(8031,71): run-time error CSS1039: Token not allowed after unary operator: '-muted'
(8034,151): run-time error CSS1039: Token not allowed after unary operator: '-line'
(8039,125): run-time error CSS1039: Token not allowed after unary operator: '-accent'
(8040,145): run-time error CSS1039: Token not allowed after unary operator: '-grey-soft'
(8040,170): run-time error CSS1039: Token not allowed after unary operator: '-muted'
(8041,62): run-time error CSS1039: Token not allowed after unary operator: '-accent-soft'
(8041,89): run-time error CSS1039: Token not allowed after unary operator: '-accent'
(8044,136): run-time error CSS1039: Token not allowed after unary operator: '-muted'
(8046,65): run-time error CSS1039: Token not allowed after unary operator: '-green'
(8049,75): run-time error CSS1039: Token not allowed after unary operator: '-head'
(8050,57): run-time error CSS1039: Token not allowed after unary operator: '-faint'
(8051,63): run-time error CSS1039: Token not allowed after unary operator: '-accent'
(8052,67): run-time error CSS1039: Token not allowed after unary operator: '-red'
(8054,104): run-time error CSS1039: Token not allowed after unary operator: '-muted'
(8065,185): run-time error CSS1039: Token not allowed after unary operator: '-faint'
(8066,105): run-time error CSS1039: Token not allowed after unary operator: '-hair'
(8068,125): run-time error CSS1039: Token not allowed after unary operator: '-hair'
(8071,135): run-time error CSS1039: Token not allowed after unary operator: '-muted'
(8071,161): run-time error CSS1039: Token not allowed after unary operator: '-card'
(8072,58): run-time error CSS1039: Token not allowed after unary operator: '-head'
(8072,85): run-time error CSS1039: Token not allowed after unary operator: '-head'
(8073,57): run-time error CSS1039: Token not allowed after unary operator: '-violet'
(8073,86): run-time error CSS1039: Token not allowed after unary operator: '-violet'
(8074,55): run-time error CSS1039: Token not allowed after unary operator: '-accent'
(8074,84): run-time error CSS1039: Token not allowed after unary operator: '-accent'
(8078,67): run-time error CSS1039: Token not allowed after unary operator: '-head'
(8079,69): run-time error CSS1039: Token not allowed after unary operator: '-faint'
(8080,102): run-time error CSS1039: Token not allowed after unary operator: '-ink'
(8084,142): run-time error CSS1039: Token not allowed after unary operator: '-band'
(8084,173): run-time error CSS1039: Token not allowed after unary operator: '-line'
(8084,193): run-time error CSS1039: Token not allowed after unary operator: '-ink'
(8085,44): run-time error CSS1039: Token not allowed after unary operator: '-hover'
(8086,54): run-time error CSS1039: Token not allowed after unary operator: '-faint'
(8089,106): run-time error CSS1039: Token not allowed after unary operator: '-faint'
(8089,132): run-time error CSS1039: Token not allowed after unary operator: '-card'
(8090,67): run-time error CSS1039: Token not allowed after unary operator: '-muted'
(8091,52): run-time error CSS1039: Token not allowed after unary operator: '-ink'
(8094,77): run-time error CSS1039: Token not allowed after unary operator: '-muted'
(8096,117): run-time error CSS1039: Token not allowed after unary operator: '-muted'
(8097,80): run-time error CSS1039: Token not allowed after unary operator: '-muted'
(8098,81): run-time error CSS1039: Token not allowed after unary operator: '-faint'
(8103,62): run-time error CSS1039: Token not allowed after unary operator: '-line'
(8103,108): run-time error CSS1039: Token not allowed after unary operator: '-card'
(8105,51): run-time error CSS1039: Token not allowed after unary operator: '-band'
(8106,142): run-time error CSS1039: Token not allowed after unary operator: '-faint'
(8107,70): run-time error CSS1039: Token not allowed after unary operator: '-head'
(8110,95): run-time error CSS1039: Token not allowed after unary operator: '-muted'
(8111,80): run-time error CSS1039: Token not allowed after unary operator: '-ink'
(8112,141): run-time error CSS1039: Token not allowed after unary operator: '-violet-soft'
(8112,168): run-time error CSS1039: Token not allowed after unary operator: '-violet'
(8116,197): run-time error CSS1039: Token not allowed after unary operator: '-band'
(8116,268): run-time error CSS1039: Token not allowed after unary operator: '-hair'
(8117,52): run-time error CSS1039: Token not allowed after unary operator: '-muted'
(8118,137): run-time error CSS1039: Token not allowed after unary operator: '-head'
(8119,60): run-time error CSS1039: Token not allowed after unary operator: '-faint'
(8122,137): run-time error CSS1039: Token not allowed after unary operator: '-hair'
(8127,148): run-time error CSS1039: Token not allowed after unary operator: '-line'
(8127,194): run-time error CSS1039: Token not allowed after unary operator: '-card'
(8127,214): run-time error CSS1039: Token not allowed after unary operator: '-muted'
(8128,66): run-time error CSS1039: Token not allowed after unary operator: '-head'
(8129,58): run-time error CSS1039: Token not allowed after unary operator: '-accent-soft'
(8129,92): run-time error CSS1039: Token not allowed after unary operator: '-accent-line'
(8129,119): run-time error CSS1039: Token not allowed after unary operator: '-accent'
(8131,71): run-time error CSS1039: Token not allowed after unary operator: '-accent-line'
(8132,60): run-time error CSS1039: Token not allowed after unary operator: '-faint'
(8133,51): run-time error CSS1039: Token not allowed after unary operator: '-accent-line'
(8133,78): run-time error CSS1039: Token not allowed after unary operator: '-accent'
(8135,64): run-time error CSS1030: Expected identifier, found '.'
(8135,73): run-time error CSS1031: Expected selector, found ')'
(8135,73): run-time error CSS1025: Expected comma or open brace, found ')'
(8137,77): run-time error CSS1039: Token not allowed after unary operator: '-faint'
(8140,120): run-time error CSS1039: Token not allowed after unary operator: '-hair'
(8145,220): run-time error CSS1039: Token not allowed after unary operator: '-line'
(8145,287): run-time error CSS1039: Token not allowed after unary operator: '-band'
(8145,318): run-time error CSS1039: Token not allowed after unary operator: '-head'
(8146,61): run-time error CSS1039: Token not allowed after unary operator: '-band-2'
(8147,121): run-time error CSS1039: Token not allowed after unary operator: '-faint'
(8149,75): run-time error CSS1039: Token not allowed after unary operator: '-ink'
(8151,124): run-time error CSS1039: Token not allowed after unary operator: '-faint'
(8154,81): run-time error CSS1039: Token not allowed after unary operator: '-hair'
(8155,150): run-time error CSS1039: Token not allowed after unary operator: '-faint'
(8156,86): run-time error CSS1039: Token not allowed after unary operator: '-head'
(8157,43): run-time error CSS1039: Token not allowed after unary operator: '-faint'
(8158,36): run-time error CSS1039: Token not allowed after unary operator: '-accent'
(8160,69): run-time error CSS1039: Token not allowed after unary operator: '-muted'
(8161,156): run-time error CSS1039: Token not allowed after unary operator: '-hair'
(8163,160): run-time error CSS1039: Token not allowed after unary operator: '-faint'
(8167,151): run-time error CSS1039: Token not allowed after unary operator: '-muted'
(8168,71): run-time error CSS1039: Token not allowed after unary operator: '-hair'
(8169,90): run-time error CSS1039: Token not allowed after unary operator: '-blue'
(8170,44): run-time error CSS1039: Token not allowed after unary operator: '-green'
(8171,49): run-time error CSS1039: Token not allowed after unary operator: '-red'
(8172,71): run-time error CSS1039: Token not allowed after unary operator: '-blue'
(8173,36): run-time error CSS1039: Token not allowed after unary operator: '-green'
(8174,41): run-time error CSS1039: Token not allowed after unary operator: '-red'
(8181,125): run-time error CSS1039: Token not allowed after unary operator: '-line'
(8181,171): run-time error CSS1039: Token not allowed after unary operator: '-card'
(8181,191): run-time error CSS1039: Token not allowed after unary operator: '-ink'
(8182,41): run-time error CSS1039: Token not allowed after unary operator: '-band'
(8183,51): run-time error CSS1039: Token not allowed after unary operator: '-faint'
(8184,43): run-time error CSS1039: Token not allowed after unary operator: '-green-soft'
(8184,96): run-time error CSS1039: Token not allowed after unary operator: '-green'
(8185,42): run-time error CSS1039: Token not allowed after unary operator: '-green'
(8186,68): run-time error CSS1039: Token not allowed after unary operator: '-green'
(8188,118): run-time error CSS1039: Token not allowed after unary operator: '-line'
(8188,186): run-time error CSS1039: Token not allowed after unary operator: '-card'
(8189,62): run-time error CSS1039: Token not allowed after unary operator: '-head'
(8190,119): run-time error CSS1039: Token not allowed after unary operator: '-band'
(8211,67): run-time error CSS1039: Token not allowed after unary operator: '-faint'
(8212,73): run-time error CSS1039: Token not allowed after unary operator: '-muted'
(8218,14): run-time error CSS1030: Expected identifier, found '#searchArea'
(8218,38): run-time error CSS1031: Expected selector, found ')'
(8218,38): run-time error CSS1025: Expected comma or open brace, found ')'
(8219,14): run-time error CSS1030: Expected identifier, found '#searchArea'
(8219,38): run-time error CSS1031: Expected selector, found ')'
(8219,38): run-time error CSS1025: Expected comma or open brace, found ')'
(8220,14): run-time error CSS1030: Expected identifier, found '#searchArea'
(8220,38): run-time error CSS1031: Expected selector, found ')'
(8220,38): run-time error CSS1025: Expected comma or open brace, found ')'
(8223,14): run-time error CSS1030: Expected identifier, found '#searchArea'
(8223,38): run-time error CSS1031: Expected selector, found ')'
(8223,38): run-time error CSS1025: Expected comma or open brace, found ')'
(8227,163): run-time error CSS1039: Token not allowed after unary operator: '-line'
(8228,71): run-time error CSS1030: Expected identifier, found ':'
(8228,72): run-time error CSS1031: Expected selector, found 'not('
(8228,72): run-time error CSS1025: Expected comma or open brace, found 'not('
(8229,70): run-time error CSS1030: Expected identifier, found ':'
(8229,71): run-time error CSS1031: Expected selector, found 'not('
(8229,71): run-time error CSS1025: Expected comma or open brace, found 'not('
(8230,87): run-time error CSS1039: Token not allowed after unary operator: '-band-2'
(8237,51): run-time error CSS1030: Expected identifier, found '.'
(8237,73): run-time error CSS1031: Expected selector, found ')'
(8237,73): run-time error CSS1025: Expected comma or open brace, found ')'
(8244,24): run-time error CSS1030: Expected identifier, found '.'
(8244,41): run-time error CSS1031: Expected selector, found ')'
(8244,41): run-time error CSS1025: Expected comma or open brace, found ')'
(8246,24): run-time error CSS1030: Expected identifier, found '.'
(8246,41): run-time error CSS1031: Expected selector, found ')'
(8246,41): run-time error CSS1025: Expected comma or open brace, found ')'
(8247,24): run-time error CSS1030: Expected identifier, found '.'
(8247,41): run-time error CSS1031: Expected selector, found ')'
(8247,41): run-time error CSS1025: Expected comma or open brace, found ')'
(8260,24): run-time error CSS1030: Expected identifier, found '.'
(8260,41): run-time error CSS1031: Expected selector, found ')'
(8260,41): run-time error CSS1025: Expected comma or open brace, found ')'
(8264,14): run-time error CSS1030: Expected identifier, found '#searchArea'
(8264,38): run-time error CSS1031: Expected selector, found ')'
(8264,38): run-time error CSS1025: Expected comma or open brace, found ')'
(8268,64): run-time error CSS1030: Expected identifier, found '.'
(8268,73): run-time error CSS1031: Expected selector, found ')'
(8268,73): run-time error CSS1025: Expected comma or open brace, found ')'
(8269,69): run-time error CSS1030: Expected identifier, found '.'
(8269,70): run-time error CSS1030: Expected identifier, found 'rpt-find'
(8269,78): run-time error CSS1031: Expected selector, found ')'
(8269,78): run-time error CSS1025: Expected comma or open brace, found ')'
(8274,14): run-time error CSS1030: Expected identifier, found '#searchArea'
(8274,38): run-time error CSS1031: Expected selector, found ')'
(8274,38): run-time error CSS1025: Expected comma or open brace, found ')'
(8275,14): run-time error CSS1030: Expected identifier, found '#searchArea'
(8275,38): run-time error CSS1031: Expected selector, found ')'
(8275,38): run-time error CSS1025: Expected comma or open brace, found ')'
(8278,14): run-time error CSS1030: Expected identifier, found '#searchArea'
(8278,38): run-time error CSS1031: Expected selector, found ')'
(8278,38): run-time error CSS1025: Expected comma or open brace, found ')'
(8315,29): run-time error CSS1056: Expected media feature, found '('
(8337,29): run-time error CSS1056: Expected media feature, found '('
(8442,132): run-time error CSS1039: Token not allowed after unary operator: '-faint'
(8446,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(8448,22): run-time error CSS1039: Token not allowed after unary operator: '-ground'
(8448,53): run-time error CSS1039: Token not allowed after unary operator: '-ink'
(8451,56): run-time error CSS1039: Token not allowed after unary operator: '-line'
(8454,83): run-time error CSS1039: Token not allowed after unary operator: '-faint'
(8454,115): run-time error CSS1039: Token not allowed after unary operator: '-line'
(8454,178): run-time error CSS1039: Token not allowed after unary operator: '-band'
(8455,48): run-time error CSS1039: Token not allowed after unary operator: '-muted'
(8458,95): run-time error CSS1039: Token not allowed after unary operator: '-ground'
(8458,172): run-time error CSS1039: Token not allowed after unary operator: '-ink'
(8459,37): run-time error CSS1039: Token not allowed after unary operator: '-card'
(8459,74): run-time error CSS1039: Token not allowed after unary operator: '-line'
(8460,85): run-time error CSS1039: Token not allowed after unary operator: '-head'
(8461,34): run-time error CSS1039: Token not allowed after unary operator: '-accent'
(8464,69): run-time error CSS1039: Token not allowed after unary operator: '-pos-bar'
(8486,139): run-time error CSS1039: Token not allowed after unary operator: '-card'
(8486,170): run-time error CSS1039: Token not allowed after unary operator: '-line'
(8486,211): run-time error CSS1039: Token not allowed after unary operator: '-muted'
(8487,57): run-time error CSS1039: Token not allowed after unary operator: '-accent'
(8487,94): run-time error CSS1039: Token not allowed after unary operator: '-accent-soft'
(8490,106): run-time error CSS1039: Token not allowed after unary operator: '-head'
(8493,91): run-time error CSS1039: Token not allowed after unary operator: '-head'
(8494,61): run-time error CSS1039: Token not allowed after unary operator: '-muted'
(8503,95): run-time error CSS1039: Token not allowed after unary operator: '-faint'
(8506,123): run-time error CSS1039: Token not allowed after unary operator: '-card'
(8506,154): run-time error CSS1039: Token not allowed after unary operator: '-line'
(8507,44): run-time error CSS1039: Token not allowed after unary operator: '-accent-line'
(8508,60): run-time error CSS1039: Token not allowed after unary operator: '-accent-line'
(8510,52): run-time error CSS1039: Token not allowed after unary operator: '-accent-line'
(8510,86): run-time error CSS1039: Token not allowed after unary operator: '-accent'
(8511,103): run-time error CSS1039: Token not allowed after unary operator: '-band'
(8511,123): run-time error CSS1039: Token not allowed after unary operator: '-line'
(8511,208): run-time error CSS1039: Token not allowed after unary operator: '-hair'
(8513,61): run-time error CSS1039: Token not allowed after unary operator: '-band'
(8515,87): run-time error CSS1039: Token not allowed after unary operator: '-faint'
(8518,71): run-time error CSS1039: Token not allowed after unary operator: '-head'
(8519,54): run-time error CSS1039: Token not allowed after unary operator: '-faint'
(8522,120): run-time error CSS1039: Token not allowed after unary operator: '-amber-soft'
(8522,146): run-time error CSS1039: Token not allowed after unary operator: '-amber-ink'
(8525,72): run-time error CSS1039: Token not allowed after unary operator: '-head'
(8526,78): run-time error CSS1039: Token not allowed after unary operator: '-muted'
(8527,70): run-time error CSS1039: Token not allowed after unary operator: '-faint'
(8529,78): run-time error CSS1039: Token not allowed after unary operator: '-accent-ink'
(8530,99): run-time error CSS1039: Token not allowed after unary operator: '-accent-ink'
(8531,45): run-time error CSS1039: Token not allowed after unary operator: '-muted'
(8532,44): run-time error CSS1039: Token not allowed after unary operator: '-red'
(8536,115): run-time error CSS1039: Token not allowed after unary operator: '-card'
(8536,146): run-time error CSS1039: Token not allowed after unary operator: '-line'
(8538,119): run-time error CSS1039: Token not allowed after unary operator: '-hair'
(8538,139): run-time error CSS1039: Token not allowed after unary operator: '-muted'
(8540,147): run-time error CSS1039: Token not allowed after unary operator: '-amber-soft'
(8540,173): run-time error CSS1039: Token not allowed after unary operator: '-amber-ink'
(8540,233): run-time error CSS1039: Token not allowed after unary operator: '-hair'
(8543,58): run-time error CSS1039: Token not allowed after unary operator: '-accent-ink'
(8545,79): run-time error CSS1039: Token not allowed after unary operator: '-hover'
(8546,91): run-time error CSS1039: Token not allowed after unary operator: '-band-2'
(8546,113): run-time error CSS1039: Token not allowed after unary operator: '-muted'
(8547,50): run-time error CSS1039: Token not allowed after unary operator: '-accent-soft'
(8547,77): run-time error CSS1039: Token not allowed after unary operator: '-accent-ink'
(8549,87): run-time error CSS1039: Token not allowed after unary operator: '-head'
(8550,57): run-time error CSS1039: Token not allowed after unary operator: '-muted'
(8566,148): run-time error CSS1039: Token not allowed after unary operator: '-hair'
(8566,340): run-time error CSS1039: Token not allowed after unary operator: '-faint'
(8577,151): run-time error CSS1039: Token not allowed after unary operator: '-hair'
(8577,328): run-time error CSS1039: Token not allowed after unary operator: '-ink'
(8578,94): run-time error CSS1039: Token not allowed after unary operator: '-tint'
(8581,153): run-time error CSS1039: Token not allowed after unary operator: '-head'
(8582,114): run-time error CSS1039: Token not allowed after unary operator: '-muted'
(8585,97): run-time error CSS1039: Token not allowed after unary operator: '-line'
(8585,150): run-time error CSS1039: Token not allowed after unary operator: '-card'
(8585,210): run-time error CSS1039: Token not allowed after unary operator: '-ink'
(8587,54): run-time error CSS1039: Token not allowed after unary operator: '-hover'
(8588,111): run-time error CSS1039: Token not allowed after unary operator: '-head'
(8589,116): run-time error CSS1039: Token not allowed after unary operator: '-line'
(8589,154): run-time error CSS1039: Token not allowed after unary operator: '-line'
(8589,179): run-time error CSS1039: Token not allowed after unary operator: '-card'
(8591,61): run-time error CSS1039: Token not allowed after unary operator: '-muted'
(8592,74): run-time error CSS1039: Token not allowed after unary operator: '-head'
(8594,101): run-time error CSS1039: Token not allowed after unary operator: '-faint'
(8595,49): run-time error CSS1039: Token not allowed after unary operator: '-red-soft'
(8595,73): run-time error CSS1039: Token not allowed after unary operator: '-red'
(8597,148): run-time error CSS1039: Token not allowed after unary operator: '-amber-ink'
(8601,134): run-time error CSS1039: Token not allowed after unary operator: '-head'
(8602,73): run-time error CSS1039: Token not allowed after unary operator: '-hair'
(8604,103): run-time error CSS1039: Token not allowed after unary operator: '-faint'
(8605,51): run-time error CSS1039: Token not allowed after unary operator: '-red-soft'
(8605,75): run-time error CSS1039: Token not allowed after unary operator: '-red'
(8609,136): run-time error CSS1039: Token not allowed after unary operator: '-accent'
(8609,215): run-time error CSS1039: Token not allowed after unary operator: '-accent-soft'
(8609,326): run-time error CSS1039: Token not allowed after unary operator: '-head'
(8609,362): run-time error CSS1039: Token not allowed after unary operator: '-card'
(8614,139): run-time error CSS1039: Token not allowed after unary operator: '-faint'
(8616,55): run-time error CSS1039: Token not allowed after unary operator: '-muted'
(8617,74): run-time error CSS1039: Token not allowed after unary operator: '-hair'
(8618,144): run-time error CSS1039: Token not allowed after unary operator: '-muted'
(8619,61): run-time error CSS1039: Token not allowed after unary operator: '-head'
(8620,64): run-time error CSS1039: Token not allowed after unary operator: '-head'
(8622,109): run-time error CSS1039: Token not allowed after unary operator: '-accent'
(8623,47): run-time error CSS1039: Token not allowed after unary operator: '-accent-ink'
(8624,50): run-time error CSS1039: Token not allowed after unary operator: '-band-2'
(8624,72): run-time error CSS1039: Token not allowed after unary operator: '-faint'
(8627,50): run-time error CSS1039: Token not allowed after unary operator: '-faint'
(8627,78): run-time error CSS1039: Token not allowed after unary operator: '-line'
(8628,51): run-time error CSS1039: Token not allowed after unary operator: '-faint'
(8634,41): run-time error CSS1039: Token not allowed after unary operator: '-card'
(8634,61): run-time error CSS1039: Token not allowed after unary operator: '-ink'
(8636,119): run-time error CSS1039: Token not allowed after unary operator: '-hair'
(8636,174): run-time error CSS1039: Token not allowed after unary operator: '-head'
(8637,57): run-time error CSS1039: Token not allowed after unary operator: '-muted'
(8639,69): run-time error CSS1039: Token not allowed after unary operator: '-hair'
(8641,56): run-time error CSS1039: Token not allowed after unary operator: '-muted'
(8642,71): run-time error CSS1039: Token not allowed after unary operator: '-accent-ink'
(8643,69): run-time error CSS1039: Token not allowed after unary operator: '-accent-ink'
(8644,112): run-time error CSS1039: Token not allowed after unary operator: '-line'
(8644,158): run-time error CSS1039: Token not allowed after unary operator: '-tint'
(8646,35): run-time error CSS1039: Token not allowed after unary operator: '-red'
(8648,89): run-time error CSS1039: Token not allowed after unary operator: '-line'
(8648,156): run-time error CSS1039: Token not allowed after unary operator: '-card'
(8650,99): run-time error CSS1039: Token not allowed after unary operator: '-head'
(8651,124): run-time error CSS1039: Token not allowed after unary operator: '-accent'
(8651,172): run-time error CSS1039: Token not allowed after unary operator: '-accent-soft'
(8652,93): run-time error CSS1039: Token not allowed after unary operator: '-ink'
(8653,97): run-time error CSS1039: Token not allowed after unary operator: '-line'
(8653,122): run-time error CSS1039: Token not allowed after unary operator: '-card'
(8653,142): run-time error CSS1039: Token not allowed after unary operator: '-head'
(8654,45): run-time error CSS1039: Token not allowed after unary operator: '-hover'
(8654,66): run-time error CSS1039: Token not allowed after unary operator: '-head'
(8655,85): run-time error CSS1039: Token not allowed after unary operator: '-accent'
(8655,114): run-time error CSS1039: Token not allowed after unary operator: '-accent'
(8656,53): run-time error CSS1039: Token not allowed after unary operator: '-accent-ink'
(8656,86): run-time error CSS1039: Token not allowed after unary operator: '-accent-ink'
(8661,121): run-time error CSS1039: Token not allowed after unary operator: '-faint'
(8664,170): run-time error CSS1039: Token not allowed after unary operator: '-line'
(8664,306): run-time error CSS1039: Token not allowed after unary operator: '-head'
(8664,342): run-time error CSS1039: Token not allowed after unary operator: '-card'
(8665,120): run-time error CSS1039: Token not allowed after unary operator: '-accent'
(8665,168): run-time error CSS1039: Token not allowed after unary operator: '-accent-soft'
(8666,79): run-time error CSS1039: Token not allowed after unary operator: '-amber-soft'
(8666,105): run-time error CSS1039: Token not allowed after unary operator: '-amber-ink'
(8667,44): run-time error CSS1039: Token not allowed after unary operator: '-green-soft'
(8667,70): run-time error CSS1039: Token not allowed after unary operator: '-green'
(8671,109): run-time error CSS1039: Token not allowed after unary operator: '-hair'
(8672,74): run-time error CSS1039: Token not allowed after unary operator: '-muted'
(8673,72): run-time error CSS1039: Token not allowed after unary operator: '-head'
(8674,130): run-time error CSS1039: Token not allowed after unary operator: '-muted'
(8675,39): run-time error CSS1039: Token not allowed after unary operator: '-hover'
(8675,60): run-time error CSS1039: Token not allowed after unary operator: '-head'
(8677,70): run-time error CSS1039: Token not allowed after unary operator: '-hair'
(8678,58): run-time error CSS1039: Token not allowed after unary operator: '-line'
(8678,83): run-time error CSS1039: Token not allowed after unary operator: '-card'
(8678,208): run-time error CSS1039: Token not allowed after unary operator: '-muted'
(8679,40): run-time error CSS1039: Token not allowed after unary operator: '-hover'
(8680,39): run-time error CSS1039: Token not allowed after unary operator: '-head'
(8680,80): run-time error CSS1039: Token not allowed after unary operator: '-head'
(8680,100): run-time error CSS1039: Token not allowed after unary operator: '-head'
(8682,82): run-time error CSS1039: Token not allowed after unary operator: '-head'
(8683,68): run-time error CSS1039: Token not allowed after unary operator: '-muted'
(8687,121): run-time error CSS1039: Token not allowed after unary operator: '-accent'
(8688,56): run-time error CSS1039: Token not allowed after unary operator: '-muted'
(8690,212): run-time error CSS1039: Token not allowed after unary operator: '-head'
(8692,73): run-time error CSS1039: Token not allowed after unary operator: '-line'
(8692,118): run-time error CSS1039: Token not allowed after unary operator: '-card'
(8692,138): run-time error CSS1039: Token not allowed after unary operator: '-ink'
(8693,50): run-time error CSS1039: Token not allowed after unary operator: '-hover'
(8694,124): run-time error CSS1039: Token not allowed after unary operator: '-muted'
(8695,39): run-time error CSS1039: Token not allowed after unary operator: '-green'
(8696,45): run-time error CSS1039: Token not allowed after unary operator: '-red'
(8697,44): run-time error CSS1039: Token not allowed after unary operator: '-faint'
(8698,95): run-time error CSS1039: Token not allowed after unary operator: '-hair'
(8699,78): run-time error CSS1039: Token not allowed after unary operator: '-muted'
(8703,113): run-time error CSS1039: Token not allowed after unary operator: '-line'
(8703,154): run-time error CSS1039: Token not allowed after unary operator: '-muted'
(8704,56): run-time error CSS1039: Token not allowed after unary operator: '-accent'
(8704,93): run-time error CSS1039: Token not allowed after unary operator: '-accent-soft'
(8705,73): run-time error CSS1039: Token not allowed after unary operator: '-head'
(8707,215): run-time error CSS1039: Token not allowed after unary operator: '-head'
(8710,52): run-time error CSS1039: Token not allowed after unary operator: '-head'
(8717,109): run-time error CSS1039: Token not allowed after unary operator: '-muted'
(8718,46): run-time error CSS1039: Token not allowed after unary operator: '-head'
(8719,51): run-time error CSS1039: Token not allowed after unary operator: '-head'
(8720,36): run-time error CSS1039: Token not allowed after unary operator: '-green'
(8721,34): run-time error CSS1039: Token not allowed after unary operator: '-red'
(8731,108): run-time error CSS1039: Token not allowed after unary operator: '-head'
(8732,112): run-time error CSS1039: Token not allowed after unary operator: '-accent'
(8732,160): run-time error CSS1039: Token not allowed after unary operator: '-accent-soft'
(8735,88): run-time error CSS1039: Token not allowed after unary operator: '-line'
(8735,224): run-time error CSS1039: Token not allowed after unary operator: '-head'
(8735,260): run-time error CSS1039: Token not allowed after unary operator: '-card'
(8744,303): run-time error CSS1039: Token not allowed after unary operator: '-accent-ink'
(8744,347): run-time error CSS1039: Token not allowed after unary operator: '-accent-ink'
(8745,176): run-time error CSS1039: Token not allowed after unary operator: '-accent'
(8745,216): run-time error CSS1039: Token not allowed after unary operator: '-accent'
(8746,183): run-time error CSS1039: Token not allowed after unary operator: '-hover'
(8746,222): run-time error CSS1039: Token not allowed after unary operator: '-line'
(8746,253): run-time error CSS1039: Token not allowed after unary operator: '-head'
(8747,80): run-time error CSS1039: Token not allowed after unary operator: '-card'
(8747,111): run-time error CSS1039: Token not allowed after unary operator: '-head'
(8757,13): run-time error CSS1030: Expected identifier, found '#pos'
(8757,17): run-time error CSS1031: Expected selector, found ')'
(8757,17): run-time error CSS1025: Expected comma or open brace, found ')'
(8759,30): run-time error CSS1030: Expected identifier, found '>'
(8759,42): run-time error CSS1031: Expected selector, found ')'
(8759,42): run-time error CSS1025: Expected comma or open brace, found ')'
(8760,30): run-time error CSS1030: Expected identifier, found '>'
(8760,42): run-time error CSS1031: Expected selector, found ')'
(8760,42): run-time error CSS1025: Expected comma or open brace, found ')'
(8767,54): run-time error CSS1039: Token not allowed after unary operator: '-muted'
(8778,97): run-time error CSS1039: Token not allowed after unary operator: '-line'
(8778,142): run-time error CSS1039: Token not allowed after unary operator: '-card'
(8778,162): run-time error CSS1039: Token not allowed after unary operator: '-ink'
(8779,68): run-time error CSS1039: Token not allowed after unary operator: '-accent'
(8779,105): run-time error CSS1039: Token not allowed after unary operator: '-accent-soft'
(8780,113): run-time error CSS1039: Token not allowed after unary operator: '-line'
(8780,158): run-time error CSS1039: Token not allowed after unary operator: '-card'
(8780,213): run-time error CSS1039: Token not allowed after unary operator: '-muted'
(8781,49): run-time error CSS1039: Token not allowed after unary operator: '-hover'
(8781,70): run-time error CSS1039: Token not allowed after unary operator: '-head'
(8786,110): run-time error CSS1039: Token not allowed after unary operator: '-line'
(8786,177): run-time error CSS1039: Token not allowed after unary operator: '-card'
(8789,110): run-time error CSS1039: Token not allowed after unary operator: '-head'
(8791,89): run-time error CSS1039: Token not allowed after unary operator: '-line'
(8791,224): run-time error CSS1039: Token not allowed after unary operator: '-head'
(8791,260): run-time error CSS1039: Token not allowed after unary operator: '-card'
(8792,106): run-time error CSS1039: Token not allowed after unary operator: '-line'
(8792,197): run-time error CSS1039: Token not allowed after unary operator: '-head'
(8792,222): run-time error CSS1039: Token not allowed after unary operator: '-card'
(8794,197): run-time error CSS1039: Token not allowed after unary operator: '-line'
(8794,222): run-time error CSS1039: Token not allowed after unary operator: '-head'
(8826,116): run-time error CSS1039: Token not allowed after unary operator: '-hair'
(8839,95): run-time error CSS1039: Token not allowed after unary operator: '-green-soft'
(8839,121): run-time error CSS1039: Token not allowed after unary operator: '-green'
(8840,91): run-time error CSS1039: Token not allowed after unary operator: '-head'
(8841,81): run-time error CSS1039: Token not allowed after unary operator: '-accent-ink'
(8842,114): run-time error CSS1039: Token not allowed after unary operator: '-muted'
(8843,36): run-time error CSS1039: Token not allowed after unary operator: '-head'
(8844,43): run-time error CSS1039: Token not allowed after unary operator: '-green'
(8847,72): run-time error CSS1039: Token not allowed after unary operator: '-band'
(8913,46): run-time error CSS1039: Token not allowed after unary operator: '-ink'
(8918,32): run-time error CSS1039: Token not allowed after unary operator: '-accent'
(8932,46): run-time error CSS1039: Token not allowed after unary operator: '-frame'
(8932,83): run-time error CSS1039: Token not allowed after unary operator: '-accent'
(8935,53): run-time error CSS1039: Token not allowed after unary operator: '-head'
(8936,38): run-time error CSS1039: Token not allowed after unary operator: '-muted'
(8937,37): run-time error CSS1039: Token not allowed after unary operator: '-accent'
(8939,53): run-time error CSS1039: Token not allowed after unary operator: '-muted'
(8939,90): run-time error CSS1039: Token not allowed after unary operator: '-line'
(8946,46): run-time error CSS1039: Token not allowed after unary operator: '-frame'
(8959,60): run-time error CSS1039: Token not allowed after unary operator: '-faint'
(8960,34): run-time error CSS1039: Token not allowed after unary operator: '-faint'
(8971,53): run-time error CSS1039: Token not allowed after unary operator: '-faint'
(8971,100): run-time error CSS1039: Token not allowed after unary operator: '-head'
(8979,62): run-time error CSS1039: Token not allowed after unary operator: '-hair'
(8983,55): run-time error CSS1039: Token not allowed after unary operator: '-frame'
(8984,44): run-time error CSS1039: Token not allowed after unary operator: '-head'
(8985,24): run-time error CSS1039: Token not allowed after unary operator: '-faint'
(8986,61): run-time error CSS1039: Token not allowed after unary operator: '-faint'
(8989,42): run-time error CSS1039: Token not allowed after unary operator: '-head'
(8990,45): run-time error CSS1039: Token not allowed after unary operator: '-faint'
(8998,56): run-time error CSS1039: Token not allowed after unary operator: '-frame'
(9003,93): run-time error CSS1039: Token not allowed after unary operator: '-muted'
(9005,42): run-time error CSS1039: Token not allowed after unary operator: '-accent'
(9010,67): run-time error CSS1039: Token not allowed after unary operator: '-hair'
(9011,46): run-time error CSS1039: Token not allowed after unary operator: '-band'
(9011,66): run-time error CSS1039: Token not allowed after unary operator: '-faint'
(9014,78): run-time error CSS1039: Token not allowed after unary operator: '-head'
(9015,62): run-time error CSS1039: Token not allowed after unary operator: '-tint'
(9017,112): run-time error CSS1039: Token not allowed after unary operator: '-head'
(9018,65): run-time error CSS1039: Token not allowed after unary operator: '-tint'
(9019,55): run-time error CSS1039: Token not allowed after unary operator: '-hover'
(9022,57): run-time error CSS1039: Token not allowed after unary operator: '-accent'
(9040,51): run-time error CSS1039: Token not allowed after unary operator: '-head'
(9041,61): run-time error CSS1039: Token not allowed after unary operator: '-muted'
(9045,29): run-time error CSS1039: Token not allowed after unary operator: '-accent'
(9072,53): run-time error CSS1039: Token not allowed after unary operator: '-faint'
(9073,40): run-time error CSS1039: Token not allowed after unary operator: '-accent'
(9084,116): run-time error CSS1039: Token not allowed after unary operator: '-faint'
(9085,117): run-time error CSS1039: Token not allowed after unary operator: '-accent'
(9089,40): run-time error CSS1039: Token not allowed after unary operator: '-muted'
(9091,46): run-time error CSS1039: Token not allowed after unary operator: '-accent'
(9104,45): run-time error CSS1039: Token not allowed after unary operator: '-faint'
(9111,22): run-time error CSS1039: Token not allowed after unary operator: '-band'
(9111,60): run-time error CSS1039: Token not allowed after unary operator: '-line'
(9111,80): run-time error CSS1039: Token not allowed after unary operator: '-faint'
(9114,73): run-time error CSS1039: Token not allowed after unary operator: '-faint'
(9116,125): run-time error CSS1039: Token not allowed after unary operator: '-hair'
(9117,83): run-time error CSS1039: Token not allowed after unary operator: '-tint'
(9118,81): run-time error CSS1039: Token not allowed after unary operator: '-hover'
(9120,119): run-time error CSS1039: Token not allowed after unary operator: '-head'
(9126,43): run-time error CSS1039: Token not allowed after unary operator: '-faint'
(9146,74): run-time error CSS1039: Token not allowed after unary operator: '-faint'
(9146,163): run-time error CSS1039: Token not allowed after unary operator: '-line'
(9147,115): run-time error CSS1039: Token not allowed after unary operator: '-hair'
(9148,55): run-time error CSS1039: Token not allowed after unary operator: '-tint'
(9149,52): run-time error CSS1039: Token not allowed after unary operator: '-hover'
(9151,94): run-time error CSS1039: Token not allowed after unary operator: '-faint'
(9163,50): run-time error CSS1039: Token not allowed after unary operator: '-faint'
(9168,47): run-time error CSS1039: Token not allowed after unary operator: '-head'
(9168,126): run-time error CSS1039: Token not allowed after unary operator: '-line'
(9172,65): run-time error CSS1039: Token not allowed after unary operator: '-hair'
(9173,84): run-time error CSS1039: Token not allowed after unary operator: '-head'
(9174,53): run-time error CSS1039: Token not allowed after unary operator: '-tint'
(9176,32): run-time error CSS1039: Token not allowed after unary operator: '-faint'
(9186,50): run-time error CSS1039: Token not allowed after unary operator: '-head'
(9187,51): run-time error CSS1039: Token not allowed after unary operator: '-muted'
(9188,51): run-time error CSS1039: Token not allowed after unary operator: '-accent'
(9191,127): run-time error CSS1039: Token not allowed after unary operator: '-frame'
(9191,211): run-time error CSS1039: Token not allowed after unary operator: '-ink'
(9193,198): run-time error CSS1039: Token not allowed after unary operator: '-ink'
(9199,95): run-time error CSS1039: Token not allowed after unary operator: '-head'
(9201,75): run-time error CSS1039: Token not allowed after unary operator: '-muted'
(9203,33): run-time error CSS1039: Token not allowed after unary operator: '-accent'
(9209,51): run-time error CSS1039: Token not allowed after unary operator: '-accent-line'
(9210,57): run-time error CSS1039: Token not allowed after unary operator: '-accent-soft'
(9210,84): run-time error CSS1039: Token not allowed after unary operator: '-accent'
(9212,83): run-time error CSS1039: Token not allowed after unary operator: '-head'
(9213,86): run-time error CSS1039: Token not allowed after unary operator: '-muted'
(9214,142): run-time error CSS1039: Token not allowed after unary operator: '-head'
(9224,26): run-time error CSS1030: Expected identifier, found '.'
(9224,73): run-time error CSS1031: Expected selector, found ')'
(9224,73): run-time error CSS1025: Expected comma or open brace, found ')'
(9229,26): run-time error CSS1030: Expected identifier, found '.'
(9229,73): run-time error CSS1031: Expected selector, found ')'
(9229,73): run-time error CSS1025: Expected comma or open brace, found ')'
(9235,13): run-time error CSS1030: Expected identifier, found '>'
(9235,31): run-time error CSS1031: Expected selector, found ')'
(9235,31): run-time error CSS1025: Expected comma or open brace, found ')'
(9240,142): run-time error CSS1039: Token not allowed after unary operator: '-card'
(9240,175): run-time error CSS1039: Token not allowed after unary operator: '-hair'
(9241,69): run-time error CSS1039: Token not allowed after unary operator: '-band'
(9242,88): run-time error CSS1039: Token not allowed after unary operator: '-tint'
(9254,20): run-time error CSS1030: Expected identifier, found '.'
(9254,33): run-time error CSS1031: Expected selector, found ')'
(9254,33): run-time error CSS1025: Expected comma or open brace, found ')'
(9448,53): run-time error CSS1030: Expected identifier, found '>'
(9448,55): run-time error CSS1030: Expected identifier, found '.'
(9448,60): run-time error CSS1031: Expected selector, found ')'
(9448,60): run-time error CSS1025: Expected comma or open brace, found ')'
(9449,53): run-time error CSS1030: Expected identifier, found '>'
(9449,55): run-time error CSS1030: Expected identifier, found '.'
(9449,60): run-time error CSS1031: Expected selector, found ')'
(9449,60): run-time error CSS1025: Expected comma or open brace, found ')'
(9497,197): run-time error CSS1039: Token not allowed after unary operator: '-csw-theme'
(9568,19): run-time error CSS1030: Expected identifier, found '.'
(9568,32): run-time error CSS1031: Expected selector, found ')'
(9568,32): run-time error CSS1025: Expected comma or open brace, found ')'
(9575,25): run-time error CSS1030: Expected identifier, found '.'
(9575,26): run-time error CSS1030: Expected identifier, found 'tn2-tools'
(9575,39): run-time error CSS1031: Expected selector, found ')'
(9575,39): run-time error CSS1025: Expected comma or open brace, found ')'
(9583,301): run-time error CSS1039: Token not allowed after unary operator: '-accent'
(9584,53): run-time error CSS1039: Token not allowed after unary operator: '-accent-ink'
(9585,62): run-time error CSS1039: Token not allowed after unary operator: '-line'
(9585,120): run-time error CSS1039: Token not allowed after unary operator: '-head'
(9586,89): run-time error CSS1039: Token not allowed after unary operator: '-band'
(9586,129): run-time error CSS1039: Token not allowed after unary operator: '-head'
(9589,72): run-time error CSS1039: Token not allowed after unary operator: '-accent'
(9590,70): run-time error CSS1039: Token not allowed after unary operator: '-muted'
(9592,56): run-time error CSS1039: Token not allowed after unary operator: '-muted'
(9593,62): run-time error CSS1039: Token not allowed after unary operator: '-head'
(9594,56): run-time error CSS1039: Token not allowed after unary operator: '-ink'
(9595,141): run-time error CSS1039: Token not allowed after unary operator: '-ink'
(9596,66): run-time error CSS1039: Token not allowed after unary operator: '-head'
(9597,92): run-time error CSS1039: Token not allowed after unary operator: '-accent'
(9602,23): run-time error CSS1030: Expected identifier, found '['
(9602,26): run-time error CSS1031: Expected selector, found '$='
(9602,26): run-time error CSS1025: Expected comma or open brace, found '$='
(9603,23): run-time error CSS1030: Expected identifier, found '['
(9603,26): run-time error CSS1031: Expected selector, found '$='
(9603,26): run-time error CSS1025: Expected comma or open brace, found '$='
(9604,23): run-time error CSS1030: Expected identifier, found '['
(9604,26): run-time error CSS1031: Expected selector, found '$='
(9604,26): run-time error CSS1025: Expected comma or open brace, found '$='
(9617,108): run-time error CSS1039: Token not allowed after unary operator: '-csw-accent'
(9661,71): run-time error CSS1039: Token not allowed after unary operator: '-accent'
(9661,121): run-time error CSS1039: Token not allowed after unary operator: '-accent'
(9664,73): run-time error CSS1039: Token not allowed after unary operator: '-accent'
(9712,110): run-time error CSS1030: Expected identifier, found '.'
(9712,111): run-time error CSS1030: Expected identifier, found 'tb2-chip-warn'
(9712,124): run-time error CSS1031: Expected selector, found ')'
(9712,124): run-time error CSS1025: Expected comma or open brace, found ')'
(9717,28): run-time error CSS1030: Expected identifier, found '['
(9717,29): run-time error CSS1030: Expected identifier, found 'id'
(9717,31): run-time error CSS1031: Expected selector, found '$='
(9717,31): run-time error CSS1025: Expected comma or open brace, found '$='
(9720,56): run-time error CSS1030: Expected identifier, found '>'
(9720,70): run-time error CSS1031: Expected selector, found ')'
(9720,70): run-time error CSS1025: Expected comma or open brace, found ')'
(9721,48): run-time error CSS1030: Expected identifier, found '.'
(9721,61): run-time error CSS1031: Expected selector, found ')'
(9721,61): run-time error CSS1025: Expected comma or open brace, found ')'
(9724,27): run-time error CSS1030: Expected identifier, found '['
(9724,30): run-time error CSS1031: Expected selector, found '$='
(9724,30): run-time error CSS1025: Expected comma or open brace, found '$='
(9741,40): run-time error CSS1039: Token not allowed after unary operator: '-accent-soft'
(9742,48): run-time error CSS1039: Token not allowed after unary operator: '-accent'
(9742,92): run-time error CSS1039: Token not allowed after unary operator: '-accent-line'
(9761,159): run-time error CSS1039: Token not allowed after unary operator: '-accent-soft'
(9761,195): run-time error CSS1039: Token not allowed after unary operator: '-accent'
(9766,100): run-time error CSS1039: Token not allowed after unary operator: '-accent'
(9767,37): run-time error CSS1039: Token not allowed after unary operator: '-accent-ink'
(9782,155): run-time error CSS1039: Token not allowed after unary operator: '-card'
(9782,192): run-time error CSS1039: Token not allowed after unary operator: '-line'
(9782,320): run-time error CSS1039: Token not allowed after unary operator: '-ink'
(9792,147): run-time error CSS1039: Token not allowed after unary operator: '-head'
(9794,44): run-time error CSS1039: Token not allowed after unary operator: '-faint'
(9796,160): run-time error CSS1039: Token not allowed after unary operator: '-ink'
(9801,46): run-time error CSS1039: Token not allowed after unary operator: '-muted'
(9802,32): run-time error CSS1039: Token not allowed after unary operator: '-accent'
(9804,208): run-time error CSS1039: Token not allowed after unary operator: '-faint'
(9805,37): run-time error CSS1039: Token not allowed after unary operator: '-hover'
(9805,67): run-time error CSS1039: Token not allowed after unary operator: '-head'
(9846,28): run-time error CSS1039: Token not allowed after unary operator: '-csw-theme'
(9865,37): run-time error CSS1030: Expected identifier, found '.'
(9865,51): run-time error CSS1031: Expected selector, found ')'
(9865,51): run-time error CSS1025: Expected comma or open brace, found ')'
(9921,54): run-time error CSS1039: Token not allowed after unary operator: '-csw-accent-line'
(9937,35): run-time error CSS1039: Token not allowed after unary operator: '-csw-accent-ink'
(9944,55): run-time error CSS1039: Token not allowed after unary operator: '-csw-accent-ink'
(9978,64): run-time error CSS1039: Token not allowed after unary operator: '-csw-accent-soft'
(9978,104): run-time error CSS1039: Token not allowed after unary operator: '-csw-accent-ink'
(9979,41): run-time error CSS1039: Token not allowed after unary operator: '-csw-accent'
(9980,54): run-time error CSS1039: Token not allowed after unary operator: '-csw-accent-ink'
(9993,38): run-time error CSS1039: Token not allowed after unary operator: '-csw-accent-soft'
(9993,85): run-time error CSS1039: Token not allowed after unary operator: '-csw-accent-line'
(9993,125): run-time error CSS1039: Token not allowed after unary operator: '-csw-accent-ink'
(10034,36): run-time error CSS1039: Token not allowed after unary operator: '-csw-accent-ink'
(10049,37): run-time error CSS1039: Token not allowed after unary operator: '-csw-accent-soft'
(10049,77): run-time error CSS1039: Token not allowed after unary operator: '-csw-accent-ink'
(10050,39): run-time error CSS1039: Token not allowed after unary operator: '-csw-accent'
(10055,52): run-time error CSS1039: Token not allowed after unary operator: '-csw-accent-ink'
(10063,61): run-time error CSS1039: Token not allowed after unary operator: '-csw-theme-line'
(10071,43): run-time error CSS1039: Token not allowed after unary operator: '-csw-accent-ink'
(10098,34): run-time error CSS1039: Token not allowed after unary operator: '-csw-accent'
(10099,40): run-time error CSS1039: Token not allowed after unary operator: '-csw-accent-ink'
(10172,15): run-time error CSS1030: Expected identifier, found '>'
(10172,31): run-time error CSS1031: Expected selector, found ')'
(10172,31): run-time error CSS1025: Expected comma or open brace, found ')'
(11881,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(11881,23): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(11881,42): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(11882,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(11882,20): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(11882,40): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(11882,55): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(11883,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(11883,24): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(11887,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(11887,22): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(11887,40): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(11888,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(11888,20): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(11888,40): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(11888,54): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(11889,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(11889,21): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(11893,15): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(11909,22): run-time error CSS1039: Token not allowed after unary operator: '-head'
(11919,132): run-time error CSS1039: Token not allowed after unary operator: '-head'
(11924,34): run-time error CSS1039: Token not allowed after unary operator: '-ai-right'
(11924,65): run-time error CSS1039: Token not allowed after unary operator: '-ai-bottom'
(11924,94): run-time error CSS1039: Token not allowed after unary operator: '-ai-top'
(11925,17): run-time error CSS1039: Token not allowed after unary operator: '-ai-w'
(11925,76): run-time error CSS1039: Token not allowed after unary operator: '-ai-h'
(11925,108): run-time error CSS1039: Token not allowed after unary operator: '-ai-max-h'
(11926,28): run-time error CSS1039: Token not allowed after unary operator: '-line'
(11926,65): run-time error CSS1039: Token not allowed after unary operator: '-ai-radius'
(11927,22): run-time error CSS1039: Token not allowed after unary operator: '-ai-shadow'
(11946,77): run-time error CSS1039: Token not allowed after unary operator: '-ink'
(11949,132): run-time error CSS1039: Token not allowed after unary operator: '-head'
(11953,52): run-time error CSS1039: Token not allowed after unary operator: '-head'
(11954,56): run-time error CSS1039: Token not allowed after unary operator: '-hair'
(11955,75): run-time error CSS1039: Token not allowed after unary operator: '-band'
(11956,92): run-time error CSS1039: Token not allowed after unary operator: '-hair'
(11956,146): run-time error CSS1039: Token not allowed after unary operator: '-band'
(11958,29): run-time error CSS1039: Token not allowed after unary operator: '-accent'
(11961,79): run-time error CSS1039: Token not allowed after unary operator: '-hair'
(11962,37): run-time error CSS1039: Token not allowed after unary operator: '-band'
(11962,84): run-time error CSS1039: Token not allowed after unary operator: '-head'
(11963,126): run-time error CSS1039: Token not allowed after unary operator: '-accent-soft'
(11963,162): run-time error CSS1039: Token not allowed after unary operator: '-accent-ink'
(11969,111): run-time error CSS1039: Token not allowed after unary operator: '-line'
(11969,179): run-time error CSS1039: Token not allowed after unary operator: '-ink'
(11970,54): run-time error CSS1039: Token not allowed after unary operator: '-red'
(11971,75): run-time error CSS1039: Token not allowed after unary operator: '-line'
(11971,121): run-time error CSS1039: Token not allowed after unary operator: '-red'
(11972,85): run-time error CSS1039: Token not allowed after unary operator: '-faint'
(11974,54): run-time error CSS1039: Token not allowed after unary operator: '-red'
(11976,70): run-time error CSS1039: Token not allowed after unary operator: '-head'
(11977,142): run-time error CSS1039: Token not allowed after unary operator: '-accent'
(11982,96): run-time error CSS1039: Token not allowed after unary operator: '-head'
(11983,59): run-time error CSS1039: Token not allowed after unary operator: '-muted'
(11984,133): run-time error CSS1039: Token not allowed after unary operator: '-faint'
(11988,131): run-time error CSS1039: Token not allowed after unary operator: '-line'
(11988,186): run-time error CSS1039: Token not allowed after unary operator: '-card'
(11988,212): run-time error CSS1039: Token not allowed after unary operator: '-head'
(11989,49): run-time error CSS1039: Token not allowed after unary operator: '-faint'
(11991,42): run-time error CSS1039: Token not allowed after unary operator: '-hover'
(11996,95): run-time error CSS1039: Token not allowed after unary operator: '-line'
(11996,150): run-time error CSS1039: Token not allowed after unary operator: '-card'
(11997,131): run-time error CSS1039: Token not allowed after unary operator: '-muted'
(11998,58): run-time error CSS1039: Token not allowed after unary operator: '-accent'
(11999,58): run-time error CSS1039: Token not allowed after unary operator: '-accent'
(12002,76): run-time error CSS1039: Token not allowed after unary operator: '-tint'
(12002,120): run-time error CSS1039: Token not allowed after unary operator: '-hair'
(12003,107): run-time error CSS1039: Token not allowed after unary operator: '-card'
(12003,144): run-time error CSS1039: Token not allowed after unary operator: '-line'
(12005,47): run-time error CSS1039: Token not allowed after unary operator: '-accent'
(12005,93): run-time error CSS1039: Token not allowed after unary operator: '-accent-soft'
(12007,311): run-time error CSS1039: Token not allowed after unary operator: '-head'
(12008,49): run-time error CSS1039: Token not allowed after unary operator: '-faint'
(12011,41): run-time error CSS1039: Token not allowed after unary operator: '-head'
(12012,65): run-time error CSS1039: Token not allowed after unary operator: '-faint'
(12020,94): run-time error CSS1039: Token not allowed after unary operator: '-card'
(12021,90): run-time error CSS1039: Token not allowed after unary operator: '-ink'
(12023,69): run-time error CSS1039: Token not allowed after unary operator: '-line'
(12023,98): run-time error CSS1039: Token not allowed after unary operator: '-head'
(12024,44): run-time error CSS1039: Token not allowed after unary operator: '-hover'
(12038,125): run-time error CSS1039: Token not allowed after unary operator: '-head'
(12039,110): run-time error CSS1039: Token not allowed after unary operator: '-muted'
(12041,72): run-time error CSS1039: Token not allowed after unary operator: '-hair'
(12042,185): run-time error CSS1039: Token not allowed after unary operator: '-hair'
(12043,89): run-time error CSS1039: Token not allowed after unary operator: '-muted'
(12044,107): run-time error CSS1039: Token not allowed after unary operator: '-head'
(12046,105): run-time error CSS1039: Token not allowed after unary operator: '-red'
(12046,158): run-time error CSS1039: Token not allowed after unary operator: '-band'
(12046,224): run-time error CSS1039: Token not allowed after unary operator: '-ink'
(12047,136): run-time error CSS1039: Token not allowed after unary operator: '-red'
(12047,222): run-time error CSS1039: Token not allowed after unary operator: '-red'
(12049,203): run-time error CSS1039: Token not allowed after unary operator: '-ink'
(12052,116): run-time error CSS1039: Token not allowed after unary operator: '-head'
(12053,96): run-time error CSS1039: Token not allowed after unary operator: '-muted'
(12057,113): run-time error CSS1039: Token not allowed after unary operator: '-ink'
(12058,82): run-time error CSS1039: Token not allowed after unary operator: '-head'
(12061,139): run-time error CSS1039: Token not allowed after unary operator: '-head'
(12067,44): run-time error CSS1039: Token not allowed after unary operator: '-ai-dock-right'
 */
html, body, input[type="text"], input[type="radio"], input[type="checkbox"], input[type="password"], textarea, select {
    -webkit-text-size-adjust: 100%;
    -webkit-font-smoothing: antialiased;
    color: #455A64;
    font-family: "RobotoDraft", "Roboto", sans-serif !important;
    /*font-family: "Noto Sans Arabic", serif !important;*/
    /*background-color: #fafafa;*/
}

/*body::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

body::-webkit-scrollbar-thumb {
    background-color: #11171a;
    background-image: linear-gradient( 45deg, #00aeff, #a68eff);
}*/

body::-webkit-scrollbar {
        width: 6px;
        background-color: #F5F5F5;
    }

body::-webkit-scrollbar-thumb {
        background-color: #c1c1c1;
    }

.notranslate {
    /*font-family: "RobotoDraft","Roboto",sans-serif !important;*/
}

input[type="checkbox"] {
    vertical-align: middle;
}

/* all body text in 11px */
html, body {
    font-size: 12px;
}


b, strong, .bold {
    font-weight: 500;
}

.bolder {
    font-weight: 700;
}

em {
    font-weight: 400;
    font-style: italic;
}

small {
    font-size: 11px;
}

div.spacer-30 {
    height: 30px;
}

div.spacer-15 {
    height: 15px;
}

div.spacer-10 {
    height: 15px;
}

/* all forms and input controls in 12px */
input[type="text"], input[type="radio"], input[type="checkbox"], input[type="password"], textarea, select, section {
    font-size: 12px;
}

    input[type="text"]:disabled {
        color: #888;
    }

    input[type="radio"]:checked + label {
        font-weight: bold;
        /*text-decoration: underline;*/
    }

    input[type="checkbox"]:checked + label {
        /*font-weight: bold;*/
    }

html, body {
    height: 100%;
    line-height: 18px;
    margin: 0;
    padding: 0;
}

ol, ul {
    margin-left: -20px;
}

/*h1,2,3*/
h1, .h1 {
    font-size: 16px;
    font-weight: normal;
    border-bottom: 1px dotted #808080;
    margin-bottom: 15px;
    margin-top: 0;
}

h2, .h2 {
    font-size: 130%;
    font-weight: normal;
    margin-top: 0.4em;
    margin-bottom: 0.8em;
}

h3, .h3 {
    font-size: 120%;
    font-weight: normal;
    margin-top: 0.4em;
    margin-bottom: 0.8em;
}

/*href*/
a {
    text-decoration: none;
}

    a:hover {
        text-decoration: none;
    }

    a:visited {
        text-decoration: none;
    }

    a:focus, a:active {
        outline: 0 !important;
    }

/*misc*/
hr {
    border: none;
    border-top: dotted 1px silver;
    color: #f2f3f3;
    background-color: #fafafa;
}

img {
    border: 0;
}


blockquote {
    border-left: 5px solid #ddd;
    margin: 15px 30px 0 10px;
    padding-left: 20px;
}

/* #region Input Controls */

input[type="text"], input[type="password"], textarea, select {
    margin: 0;
    border: 1px solid #B8CBDE;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -khtml-box-sizing: border-box;
    box-sizing: border-box;
    vertical-align: middle;
    -moz-resize: none;
    -ms-resize: none;
    -o-resize: none;
    resize: none;
    background-color: white;
}

input[type="text"], input[type="password"], textarea {
    padding: 3px 5px;
    background-color: white;
}


select {
    padding: 1px 2px;
}

/* #endregion */


::-webkit-input-placeholder {
    font-style: italic !important;
    opacity: .5 !important;
}
:-moz-placeholder {
    font-style: italic !important;
    opacity: .5 !important;
}
:-moz-placeholder {
    font-style: italic !important;
    opacity: .5 !important;
}
:-ms-input-placeholder {
    font-style: italic !important;
    opacity: .5 !important;
}

/* #region Main Portal Structure */

.siteWidth {
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    max-width: 1136px;
    width: 1136px;
    margin: auto;
    padding: 0 13px;
}

/* the V2 master (SiteV2.Master reports the device width since 23 Sep 2026, docs/RESPONSIVE-V2.md R-3): the column is fluid, 1136 at most,
   a 12px gutter on a phone; the old master keeps the fixed 1136 above */
body.v2 .siteWidth { width: 100%; }
@media (max-width: 640px) { body.v2 .siteWidth { padding: 0 12px; } }

#logoArea {
    background-color: #036c9c;
    height: 55px;
}

    .logo-text {
        display: block;
        font-size: 28px;
        color: white;
        font-weight: 400;
        line-height: 55px;
        letter-spacing: -1px;
        text-transform: uppercase;
        text-shadow: 0 0 2px rgba(255,255,255,0.7);
        margin: 0;
    }

        #logo-text a {
            color: white;
        }

/*#time-name {
    font-size: 10px;
    text-transform: uppercase;
    margin-top: 14px;
    line-height: 14px;
}

    #time-name, #time-name a {
        color: #e4e4e4;
    }

        #time-name a:hover {
            color: white;
        }*/


#menuArea {
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.18) !important;
    width: 100%;
    z-index: 4999; /*behind rad window*/
}


#pageTitleArea {
    /*margin-top: 1px;*/
    background-color: #fafafa;
    height: 55px;
    line-height: 55px;
    border-bottom: 1px solid rgba(207, 216, 220, 0.3);
}

    #pageTitleArea h1 {
        font-size: 20px;
        font-weight: 300;
        margin: 0;
        display: inline-block;
        border: 0 !important;
    }

    #pageTitleArea a {
        outline: none;
        border: 0;
        float: right;
        display: block;
        font-size: 12px;
    }

    #pageTitleArea ul.nav ul li a {
        line-height: 25px !important;
        float: none;
    }

        #pageTitleArea a:hover {
            text-decoration: underline;
        }

#searchArea {
    margin-bottom: 20px;
}

#contentArea {
    padding-bottom: 30px; /* Height of the footer */
    margin-top: 25px;
}

/*footer*/
#footerArea {
    position: absolute;
    height: 30px; /* Height of the footer */
    line-height: 27px;
    bottom: 0;
    left: 0;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    width: 100%;
    background: #f2f2f2;
    border-top: 1px solid #e4e4e4;
    text-transform: uppercase;
    font-size: 10px;
    color: gray;
}

/* #endregion */


/* #region My Form */

.label {
    font-size: 11px;
    font-weight: 700;
}

span.required, span.optional, .myForm .label {
    font-size: 11px;
    font-weight: 500;
    padding-right: 7px;
    line-height: 2.3em;
    vertical-align: top;
    display: inline-block !important;
}

.myForm {
    display: inline-block;
    /*width: 460px;*/
    vertical-align: top;
    float: left;
}

    .myForm section {
        display: block;
        margin: 0 0 9px 0;
        /*width: 440px;*/
    }

        /*restrict rule to our custom span classes to avoid unexpected result with telerik controls*/
        .myForm section span.required, .myForm section span.optional {
            width: 115px;
        }

    .myForm h1 {
        border-bottom: none;
        text-transform: uppercase;
        font-weight: normal;
    }
        .myForm h1:before {
            font-size: 18px;
            font-weight: normal !important;
            font-family: FontAwesome;
            display: inline-block;
            margin-right: 5px;
            content: "\f0da";
        }

/*full*/
.myFormFull section {
    display: block;
    margin: 0 0 9px 0;
}

    .myFormFull section span.required, .myFormFull section span.optional {
        width: 115px;
    }


.required:after {
    content: " *";
    color: crimson;
    font-weight: 500;
    font-size: 13px;
    vertical-align: middle;
    line-height: 23px;
    margin-left: 2px;
}


section > input[type="text"],section > input[type="password"], section > textarea, section > select, section .RadDropDownList, section .RadPicker, section .RadComboBox, section .rcInputCell, section .RadAutoCompleteBox {
    width: 340px;
}

.form-width-230 section > input[type="text"], .form-width-230 section > input[type="password"], .form-width-230 section > textarea,
.form-width-230 section > select, .form-width-230 section .RadDropDownList, .form-width-230 section .RadPicker, .form-width-230 section .RadComboBox,
.form-width-230 section .rcInputCell, .form-width-230 section .RadAutoCompleteBox {
    width: 230px;
}

.form-width-200 section > input[type="text"], .form-width-200 section > input[type="password"], .form-width-200 section > textarea,
.form-width-200 section > select, .form-width-200 section .RadDropDownList, .form-width-200 section .RadPicker, .form-width-200 section .RadComboBox,
.form-width-200 section .rcInputCell, .form-width-200 section .RadAutoCompleteBox {
    width: 200px;
}
.extra-wide-label span.optional, .extra-wide-label span.required {
    width: 210px !important;
}


/* #endregion */



/* #region -------------------------------------- VALIDATION --------------------------------------------- */

.validation {
    /*padding: 5px 8px;
    background-color: #fff0f0;
    border: 1px solid #ffb3b3;
    -ms-border-radius: 4px;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    border-radius: 4px;*/

    color: crimson;
    margin-bottom: 20px;
    margin-top: -15px
}

.validation ul {
    margin-left: -40px;
    list-style-type: none;
}

.validation li {
    display: inline-block;
    /*background-color: #fff1f0;*/
    padding: 2px 5px;
    border: 1px solid #ffb3b3;
    border-radius: 4px;
    font-size: 11px;
    margin-right: 8px;
    margin-bottom: 3px;
}

/*.validation li:before {
    font-family: FontAwesome;
    margin-right: 3px;
    content: "\f12a";
}*/

.rfv {
    color: #fafafa;
}

.rfv:after {
    font-size: 10px;
    font-weight: bold !important;
    font-family: FontAwesome;
    display: inline-block;
    margin-left: -2px;
    content: "\f053";
    color: crimson;
}

.rfv-line {
    display: block !important;
    border-top: 2px solid #f34235;
    margin-top: -2px;
    position: relative;
    width: 340px;
    left: 124px;
    height: 0;
    color: rgba(255, 54, 54, 0);
}

.form-width-230 .rfv-line {
    width: 230px;
}

.form-width-200 .rfv-line {
    width: 200px;
}

#salaryInput .rfv-line {
    width: 50px;
    left: 20px
}

.rfv-line:after {
    display: none;
}

.rotate180.rfv:after {
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    transform: rotate(180deg);
}

.percent:after {
    font-size: 12px;
    font-weight: normal !important;
    font-family: FontAwesome;
    display: inline-block;
    margin-left: -4px;
    content: "\f295";
}

.exclamation:after {
    font-size: 12px;
    font-weight: normal !important;
    font-family: FontAwesome;
    display: inline-block;
    margin-left: -4px;
    content: "\f12a";
}
/* #endregion*/




/*
@media screen and (max-width: 1200px) and (min-width: 1100px) {
    html {
        zoom: 88%;
    }
}

@media screen and (max-width: 1400px) and (min-width: 1300px) {
    html {
        zoom: 105%;
    }
}

@media screen and (max-width: 1500px) and (min-width: 1400px) {
    html {
        zoom: 114%;
    }
}

@media screen and (max-width: 1600px) and (min-width: 1500px) {
    html {
        zoom: 120%;
    }
}

@media screen and (max-width: 1700px) and (min-width: 1600px) {
    html {
        zoom: 132%;
    }
}

@media screen and (max-width: 1800px) and (min-width: 1700px) {
    html {
        zoom: 140%;
    }
}

@media screen and (max-width: 1900px) and (min-width: 1800px) {
    html {
        zoom: 145%;
    }
}

@media screen and (max-width: 2000px) and (min-width: 1900px) {
    html {
        zoom: 157%;
    }
}

@media screen and (max-width: 2100px) and (min-width: 2000px) {
    html {
        zoom: 163%;
    }
}

@media screen and (max-width: 2200px) and (min-width: 2100px) {
    html {
        zoom: 165%;
    }
}

@media screen and (max-width: 2300px) and (min-width: 2200px) {
    html {
        zoom: 179%;
    }
}

@media screen and (max-width: 2400px) and (min-width: 2300px) {
    html {
        zoom: 182%;
    }
}

@media screen and (max-width: 2500px) and (min-width: 2400px) {
    html {
        zoom: 200%;
    }
}

@media screen and (min-width: 2500px) {
    html {
        zoom: 213%;
    }
}

@media screen and (min-width: 2700px) {
    html {
        zoom: 225%;
    }
}

@media screen and (min-width: 3000px) {
    html {
        zoom: 258%;
    }
}

@media screen and (min-width: 4000px) {
    html {
        zoom: 390%;
    }
}

@media screen and (min-width: 5000px) {
    html {
        zoom: 520%;
    }
}*/
/* --------------------------------------------------------------------- OVERRIDE ALL TELERIK FONTS -------------------------------------------------------- */

.RadTabStrip, .RadEditor, .RadMenu, .RadInput, .RadComboBox, .RadComboBoxDropDown, .RadDropDownList, .rddlPopup, .RadOrgChart, .RadListBox, .RadCalendar_Material, .RadButton_Material,
.RadToolTip, .RadSearchBox, .rsbPopup, .RadRotator, .RadScheduler, .RadUpload, .RadPanelBar_Material, .RadAutoCompleteBox_Material, .RadAutoCompleteBoxPopup {
    font-family: inherit !important;
}



.RadToolTip, .RadSearchBox_Material, .rsbPopup, .RadComboBox_Material, .RadComboBoxDropDown_Material, .RadPickerbu, .RadPicker, .inner-menu,
.RadAutoCompleteBox, .RadAutoCompleteBox .racInput, .RadAutoCompleteBoxPopup, .RadListBox_Material {
    font-size: inherit !important;
}

.ddl-editor .RadDropDownList, .ddl-editor .RadComboBox {
    margin-left: 740px;
}

.ddl-editor .RadEditor {
    margin-top: -31px;
}

.rwDialog.rwAlertDialog {
    text-align: center;
    margin-top: -8px !important;
}

.rwAlertDialog:before {
    display: none !important;
}
input[type="text"], input[type="password"], textarea, select {
    border-bottom-color: #cfd8dc;
    /*margin: 0 0 2px 0;*/
    padding: 3px 0;
    line-height: 1.42857;
    background: transparent;
    border-color: transparent;
    border-bottom-color: #cfd8dc;
    outline: 0;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

select {
    padding-bottom: 4px;
}

input:hover[type="text"], input:hover[type="password"], textarea:hover, select:hover {
        border-bottom-color: #90a4ae;
}

input:focus[type="text"], input:focus[type="password"], textarea:focus, select:focus {
    border-bottom-color: #8bc34a;
    -webkit-box-shadow: 0 -1px 0 0 #8bc34a inset;
    -ms-box-shadow: 0 -1px 0 0 #8bc34a inset;
    box-shadow: 0 -1px 0 0 #8bc34a inset;
}


.RadDropDownList_Material, .RadComboBox_Material, .RadInput_Material {
        background: transparent;
}

.RadDropDownList_Material .rddlInner:before, .RadComboBox_Material .rcbInner:before, .RadPicker_Material .RadInput:before {
    left: 0 !important;
    right: 0 !important;
}

.RadComboBox_Material input:focus[type="text"] {
    border-bottom: none;
    box-shadow: none;
}


.RadInput_Material .riTextBox {
    /*padding: 4px 0 !important;*/
}

.RadWindow_Material .rwPromptInputContainer .rwPromptInput:focus, .RadWindow_Material .rwPromptInputContainer .rwPromptInput:active { 
    border-width: 1px !important;
}
/* #region -------------------------------------- MARGINS, PADDING, FLOATS --------------------------------------------- */

/*MARGINS*/
.marginLeft {
    margin-left: 5px !important;
}

.marginRight {
    margin-right: 5px !important;
}

.marginLeft2 {
    margin-left: 15px !important;
    margin-right: 0;
}

.marginRight2 {
    margin-right: 15px !important;
    margin-left: 0;
}

.marginLeft3 {
    margin-left: 22px !important;
    margin-right: 0;
}

.marginRight3 {
    margin-right: 22px !important;
    margin-left: 0;
}

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

.margin-bottom-5 {
    margin-bottom: 5px !important;
}

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


.margin-bottom-15 {
    margin-bottom: 15px !important;
}

.no-margin { margin: 0 !important;}

/*FLOATS*/
.floatLeft {
    float: left !important;
}

.floatRight {
    float: right !important;
}


/*ALGIN*/
.alignLeft {
    text-align: left !important;
}

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

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

/*PADDING*/
.paddingLeft {
    padding-left: 5px !important;
}

.paddingRight {
    padding-right: 5px !important;
}

.paddingLeft2 {
    padding-left: 15px !important;
}

.paddingLeft3 {
    padding-left: 25px !important;
}

.paddingRight2 {
    padding-right: 15px !important;
}

.paddingRight3 {
    padding-right: 25px !important;
}
/* #endregion */


/* #region -------------------------------------- CALENDAR STYLES --------------------------------------------- */

.boxFrom {
    width: 67px;
    height: 72px;
    background-image: url('../images/calendar-blue.svg');
    text-align: left;
    display: inline-block;
    line-height: 18px;
}

.boxTo {
    width: 67px;
    height: 72px;
    background-image: url('../images/calendar-red.svg');
    text-align: left;
    line-height: 18px;
}

.boxDone {
    width: 67px;
    height: 72px;
    background-image: url('../images/calendar-green.svg');
    text-align: left;
    line-height: 18px;
}

.month {
    padding-top: 3px;
    text-align: center;
    /*font-weight: bolder;*/
    font-size: 11px;
    /*text-transform: uppercase;*/
    color: White;
    display: block;
}

.day {
    width: 100%;
    padding-top: 9px;
    text-align: center;
    font-size: 24px;
    font-weight: lighter;
    display: block;
}

.year {
    padding-top: 2px;
    color: gray;
    text-align: center;
    font-size: 11px;
    font-weight: bold;
    display: block;
}


/* #endregion */



/* #region -------------------------------------- infoBox --------------------------------------------- */

.infoBox {
    margin-bottom: 30px !important;
    margin-top: -10px !important;
    padding: 18px 20px 5px 20px !important;
}

    .infoBox p {
        font-size: 12px;
        color: gray;
    }

    .infoBox b {
        font-size: 22px;
        display: block;
        margin-bottom: 15px;
    }

        .infoBox b:before {
            font-size: 28px;
            font-weight: normal !important;
            font-family: FontAwesome;
            display: inline-block;
            margin-right: 8px;
            margin-left: -5px;
            content: "\f05a";
        }

    .infoBox .close:before {
        cursor: pointer;
        font-size: 22px;
        font-weight: normal !important;
        font-family: FontAwesome;
        display: inline-block;
        content: "\f00d";
    }

/* #endregion */



/* #region -------------------------------------- MISCELLANEOUS --------------------------------------------- */

.border-right {
    border-right: 1px solid #ccc;
}

.no-border {
    border: none !important;
}

.large-font {
    font-size: 18px !important;
    font-weight: 300;
}

div.hor-line {
    border-top: 1px solid #eee;
    clear: both;
}

hr {
    border-bottom: 1px dotted silver;
    border-top: none;
}

.hidden-force {
    display: none !important;
}

.hidden {
    display: none;
}

.hidden2 {
    visibility: hidden;
}

.redBorder {
    border-bottom: 2px solid crimson !important;
}

.num {
    text-align: right;
}

    .num ::-webkit-input-placeholder {
        text-align: right;
    }

    .num input:-moz-placeholder {
        text-align: right;
    }

.loading {
    background: url('../images/loading.svg') no-repeat center !important;
    height: 50px;
    z-index: 90000;
}

    .loading .loadingInner {
        display: none;
    }

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

div.setAutoOverflow {
    overflow-y: scroll !important;
}

tr.highlightRow td, tr.highlightRow :hover td {
    background-color: rgb(243, 173, 173) !important;
}

tr.highlightRowGray td, tr.highlightRowGray :hover td {
    background-color: rgb(234 234 234) !important;
}

    tr.highlightRow td select, tr.highlightRow td select :focus {
        border-bottom: none !important;
        box-shadow: none;
    }

div.controlArea {
    border-top: #cccccc dotted 1px;
    margin-top: 20px;
    padding-top: 10px;
    clear: both;
    text-align: right;
}

.dashedFrameBox {
    margin-bottom: 10px;
    padding: 12px;
    box-sizing: border-box;
    border-radius: 2px;
    /*background-color: #F5F5F5;*/
    /*box-shadow: 0 1px 3px rgba(0,0,0,.12),0 1px 2px rgba(0,0,0,.18) !important;*/
    clear: both;
    border: 1px solid #dbe2e5;
}

.roundFrameWithShadow {
    display: inline-block;
    -webkit-box-shadow: 0 1px 3px #000000;
    -ms-box-shadow: 0 1px 3px #000000;
    box-shadow: 0 1px 3px #000000;
    box-shadow: 0 1px 3px rgba(0,0,0,0.22);
    padding: 7px;
    background: #FFF;
    -ms-border-radius: 5px;
    border-radius: 5px;
    margin-bottom: 3px;
    border-radius: 5px;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

.lessPadding {
    padding: 4px !important;
}

.upper {
    text-transform: uppercase;
}

.underline {
    text-decoration: underline;
}

.badge-large {
    padding: 7px 5px !important;
    font-size: 11px !important;
    /*width: 85%;*/
}

.badge-round {
    padding: 5px 8px !important;
    border-radius: 11px !important;
    line-height: 12px !important;
}

.sub-badge {
    background-color: rgb(234 234 234);
    margin-right: -8px;
    margin-left: -8px;
    margin-bottom: -5px;
    border-radius: 0 0 10px 10px;
    padding: 4px 4px 7px 4px;
    text-transform: initial;
}

.badge {
    display: inline-block;
    min-width: 18px;
    padding: 3px 5px 3px 5px;
    /*font-weight: 700;*/
    font-size: 10px;
    line-height: 1;
    color: #fff;
    text-align: center;
    white-space: nowrap;
    background-color: #989898;
    border-radius: 2px;
    margin-right: 5px;
    box-sizing: border-box;
}

.badge-icon {
    background-color: rgba(255, 255, 255, 0.39);
    padding: 6px 8px 6px 6px;
    margin: -6px -8px -6px 5px;
}

    .badge .empBox {
        color: #fff;
        border-bottom: none;
    }

        .badge .empBox:hover {
            border-bottom: none;
        }

.badge-light {
    color: #797979;
    background-color: #ffffff;
    border: 1px solid #d4d4d4;
}

    .badge-light:hover {
        color: #777 !important;
    }

.badge-green {
    background-color: #55ae3a;
}

.badge-orange {
    background-color: #ff8c00;
}

.badge-red {
    background-color: crimson;
}

.badge-blue {
    background-color: #25a0da;
}

.badge-navy {
    background-color: #5174bd;
}

.badge-purple {
    background-color: #9932cc;
}

.badge:hover {
    color: white;
    opacity: .75 !important;
}

.badge-outline .badge-head {
    opacity: .9;
    margin: -15px -15px 10px -15px;
    padding: 5px;
    color: white;
    text-transform: uppercase;
    font-size: 10px;
    border-radius: 12px 12px 0 0;
}

.badge-outline {
    display: inline-block;
    text-align: center;
    width: 323px;
    padding: 15px 15px 10px 15px;
    border: 0;
    border-radius: 12px;
}

    .badge-outline.green {
        border-color: #55AE3A !important;
        color: #55AE3A;
        background-color: #f5f5f5;
    }

        .badge-outline.green .badge-head {
            background-color: #55AE3A;
        }

    .badge-outline.gold {
        border-color: #CFA240 !important;
        color: #CFA240;
        background-color: #f5f5f5;
    }

        .badge-outline.gold .badge-head {
            background-color: #CFA240;
        }

    .badge-outline.navy {
        border-color: #5174bd !important;
        color: #5174bd;
        background-color: #f5f5f5;
    }

        .badge-outline.navy .badge-head {
            background-color: #5174bd;
        }

    .badge-outline.orange {
        border-color: orange !important;
        color: orange;
        background-color: #f5f5f5;
    }

        .badge-outline.orange .badge-head {
            background-color: orange;
        }

    .badge-outline.purple {
        border-color: purple !important;
        color: purple;
        background-color: #f5f5f5;
    }

        .badge-outline.purple .badge-head {
            background-color: purple;
        }

    .badge-outline.red {
        border-color: #dc143c !important;
        color: #dc143c;
        background-color: #f5f5f5;
    }

        .badge-outline.red .badge-head {
            background-color: #dc143c;
        }

    .badge-outline .large-font {
        font-size: 16px;
    }

.pointer {
    cursor: pointer;
}

.blue {
    color: royalblue !important;
}

    .blue:hover {
        color: darkblue !important;
    }

.green {
    color: #20970b !important;
}

    .green:hover {
        color: rgb(20, 220, 100) !important;
    }


.yellow {
    color: #eec000 !important;
}

    .yellow:hover {
        color: #ffd319 !important;
    }

.super-text {
    font-weight: 400;
    /*text-transform: uppercase;*/
    font-size: 10px;
    color: #8c8c8c;
    margin-bottom: -2px;
    display: block;
}

.margin-top-sm {
    margin-top: 5px;
}

.margin-top-lg {
    margin-top: 10px;
}

.dimmed {
    color: #bbb !important;
}

    .dimmed:hover {
        color: #999 !important;
    }

.orange {
    color: orange !important;
}

.dodger-blue {
    color: #1E90FF;
}

.purple {
    color: #9932cc;
}

.red {
    color: crimson !important;
}

    .red:hover {
        color: maroon !important;
    }


.white {
    color: white !important;
}

    .white:hover {
        color: silver !important;
    }

html > /**/ body #allLTR * {
    direction: ltr !important;
}

.comment {
    color: #757575 !important;
}

a.comment {
    color: #757575 !important;
}

    a.comment:hover {
        color: inherit !important;
    }

.block {
    display: block;
}

.block-force {
    display: block !important;
}

.inline-block {
    display: inline-block;
}

.inline-block-force {
    display: inline-block !important;
}

.normal {
    font-style: normal;
    font-weight: normal;
}

.normal-case {
    text-transform: none;
}

.italic {
    font-style: italic;
}

.light-400 {
    font-weight: 400;
}

.light {
    font-weight: 300;
}

.lighter {
    font-weight: 100;
}

.xlarge {
    font-size: 18px;
}

.xsmall {
    font-size: 10px !important;
    line-height: 17px;
}

.small {
    font-size: 11px !important;
}

    .small th {
        font-size: 11px !important;
    }

.border-left {
    /*border-left: 1px dashed gray;*/
    border-left: 1px solid #e0e0e0;
}

.no-padding {
    padding: 0 !important;
}

.clear {
    clear: both;
    float: none;
}

.clearfix:after {
    content: "";
    display: table;
    clear: both;
}

.empBox {
    display: inline-block;
    margin-right: 9px;
    border-bottom: dashed 1px #bbb;
    color: #264d72;
}

    .empBox:hover {
        border-bottom: solid 1px #bbb;
    }


.birthdayPopup .rnContentWrapper {
    padding: 0 !important;
}

.action-buttons-top {
    margin-top: -60px;
    right: 60px;
    position: absolute;
}


/* #endregion */


/* #region -------------------------------------- jQuery Overrides --------------------------------------------- */

.ui-widget, .ui-widget input, .ui-widget, .ui-widget select {
    font-family: inherit !important;
}

#ui-datepicker-div {
    z-index: 100000 !important;
}

.ui-tooltip {
    z-index: 100000 !important;
}

/*#endregion*/


.leftVerticalSeparator {
    border-left: 1px solid #ffffff;
    border-left: 1px solid rgba(255, 255, 255, 0.5);
}

.bottomHorizontalSeparator {
    border-bottom: 1px solid rgba(255, 255, 255, 0.5);
}

#slide-body, #note-slide-body {
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    -webkit-transition: all 500ms ease-out;
    -moz-transition: all 500ms ease-out;
    -ms-transition: all 500ms ease-out;
    -o-transition: all 500ms ease-out;
    transition: all 500ms ease-out;
}

.expanded {
    max-height: 100px !important;
    opacity: 1 !important;
    -webkit-transition: opacity 0.3s ease 0.5s;
    -moz-transition: opacity 0.3s ease 0.5s;
    -ms-transition: opacity 0.3s ease 0.5s;
    -o-transition: opacity 0.3s ease 0.5s;
    transition: opacity 0.3s ease 0.5s;
}

#more, #addNote {
    cursor: pointer;
    text-align: center;
}

.break-word {
    -ms-word-wrap: break-word;
    word-wrap: break-word !important;
    white-space: pre-wrap !important;
}


div.wnd-level-0 {
    z-index: 8000 !important;
}

div.wnd-level-1min {
    z-index: 7000 !important;
}

div.wnd-level-3min {
    z-index: 5000 !important;
}

div.wnd-level-2min {
    z-index: 6000 !important;
}

div.wnd-level-1 {
    z-index: 9000 !important;
}

div.wnd-level-2 {
    z-index: 11000 !important;
}

div.wnd-level-3 {
    z-index: 12000 !important;
}



/* --------------------------------------- btn-back / btn-add -----------------------------------*/

/*btn*/

.btn {
    padding: 7px 10px;
    margin-top: 14px;
    line-height: 1;
    color: #fff;
    border-radius: 20px;
    text-transform: uppercase;
    font-size: 11px !important;
}

    .btn:hover {
        color: #fff;
        opacity: .7 !important;
        text-decoration: none !important;
    }

    .btn:before {
        font-size: 13px;
        font-family: FontAwesome;
        margin-right: 6px;
        vertical-align: text-bottom;
    }


/*btn-add*/

.btn-add {
    background-color: #55ae3a;
}

    .btn-add:before {
        content: "\f067";
    }

/*btn-blue*/

.btn-blue {
    background-color: #25a0da;
}

.btn-green {
    background-color: #55ae3a;
}

.btn-gray {
    background-color: gray;
}


/*btn-back*/

.btn-back {
    display: inline-block;
    font: normal normal normal 24px/1 FontAwesome !important;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    margin-right: 10px;
    margin-top: 14px;
}

    .btn-back:before {
        content: "\f0a8";
    }

    .btn-back:hover {
        opacity: .7 !important;
        text-decoration: none !important;
    }



.truncate {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}


/*div-pseudo*/

.div-pseudo {
    /*width: 95%;*/
    position: relative;
}

    .div-pseudo input {
        padding-left: 25px;
        width: 100%;
    }

    .div-pseudo:after {
        position: absolute;
        right: 10px;
        top: 0;
        font-size: 11px;
        color: #555;
        font-weight: 700;
    }

    .div-pseudo:before {
        position: absolute;
        left: 0;
        top: 0;
        display: inline-block;
        width: 15px;
        margin-right: 2px;
        margin-left: 4px;
        color: #717171;
        z-index: 4000;
    }


.alternate-bg:nth-child(even) {
    background: #FFF
}

.alternate-bg:nth-child(odd) {
    background: #f7f7f7
}



.img-fallback {
    position: relative;
}

    .img-fallback:before {
        content: "";
        display: block;
        position: absolute;
        background-size: cover;
        top: -4px;
        bottom: -4px;
        min-width: 120%;
        margin-left: -4px;
    }

    .img-fallback:before {
        background-image: url("/images/notfound.gif");
    }

    .img-fallback.empty:before {
        background-image: url("/images/empty.png");
        min-width: 130%;
    }

    .img-fallback.profile:before {
        background-image: url("/images/user.png");
    }


.total-records {
    padding-top: 9px;
    display: inline-block;
    margin-right: 30px;
}


.root .fa {
    margin-right: 5px;
}

.menu-right .fa {
    margin-right: 9px;
}

.ping-pong {
    background-image: url('/images/no-result-found-2.png');
    text-align: center;
    background-repeat: no-repeat;
    background-position: bottom;
    line-height: 30px;
    height: 320px;
    color: gray;
}

    .ping-pong:hover {
        background-color: transparent !important;
    }

.arabic {
    /*font-family: "Tajawal" !important;*/
    font-family: "Noto Sans Arabic", serif !important;
}

.french {
    font-family: 'Roboto Condensed' !important;
}

    .french .export-btn, .arabic .export-btn {
        display: none !important;
    }

body {
    top: 0 !important;
}

.goog-te-banner-frame.skiptranslate {
    display: none !important;
}

.gray {
    color: gray;
}

.goog-te-gadget-icon {
    display: none
}

.goog-te-gadget-simple {
    white-space: nowrap;
    font-size: 10px;
    border: 1px #ddd solid;
    padding: 0;
    display: none !important;
}

.goog-tooltip {
    display: none !important;
}

    .goog-tooltip:hover {
        display: none !important;
    }

.goog-text-highlight {
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

.circle {
    width: 10px;
    height: 10px;
    -ms-border-radius: 5px;
    border-radius: 5px;
    margin-right: 1px;
    display: inline-block;
}

    .circle.red {
        background-color: crimson;
    }

    .circle.blue {
        background-color: royalblue;
    }

    .circle.green {
        background-color: green;
    }

    .circle.gray {
        background-color: gray;
    }

    .circle.orange {
        background-color: orange;
    }

.skiptranslate {
    display: none !important;
}


fieldset {
    border: 1px solid #cfd8dc;
    border-radius: 12px;
}

.scrollbar::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px #ffffff;
    background-color: #F5F5F5;
}

.scrollbar::-webkit-scrollbar {
    width: 6px;
    background-color: #F5F5F5;
}

.scrollbar-horizontal::-webkit-scrollbar {
    height: 6px;
    background-color: #F5F5F5;
}

.scrollbar::-webkit-scrollbar-thumb {
    background-color: #c1c1c1;
}

.racSingleLine::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px #ffffff;
    background-color: #F5F5F5;
}

.racSingleLine::-webkit-scrollbar {
    height: 6px;
    background-color: #F5F5F5;
}

.racSingleLine::-webkit-scrollbar-thumb {
    background-color: #c1c1c1;
}

.cursor-text {
    cursor: inherit !important;
}

.info-frame {
    width: 430px;
    border: dashed #a1d3ff 2px;
    padding: 20px;
    box-sizing: border-box;
    border-radius: 10px;
    padding-top: 15px;
}

.rounded {
    border-radius: 16px !important;
}



/* ---- Card-row look (table stays a table) ---------------- */
.enhanced-grid {
    border-collapse: separate !important;
    border-spacing: 0 8px;
}

    .enhanced-grid > tbody > tr > td {
        background: #fff;
        border-top: 1px solid #eceef1;
        border-bottom: 1px solid #eceef1;
        padding: 12px 10px;
        vertical-align: top;
    }

        .enhanced-grid > tbody > tr > td:first-child {
            border-left: 1px solid #eceef1;
            border-radius: 8px 0 0 8px;
            padding: 0; /* rail cell hugs the edge */
        }

        .enhanced-grid > tbody > tr > td:last-child {
            border-right: 1px solid #eceef1;
            border-radius: 0 8px 8px 0;
        }

    .enhanced-grid > tbody > tr:hover > td {
        background: #fafbfc;
        border-color: #dfe2e6;
    }

    /* ---- Status rail ---------------------------------------- */
    .enhanced-grid .rail-cell {
        width: 6px;
    }

    .enhanced-grid .rail {
        display: block;
        width: 4px;
        min-height: 88px;
        height: 100%;
        margin-left: 2px;
        border-radius: 3px;
        background: #c8ccd2;
    }

    .enhanced-grid .rail-green {
        background: #1d9e75;
    }

    .enhanced-grid .rail-amber {
        background: #ef9f27;
    }

    .enhanced-grid .rail-red {
        background: #e24b4a;
    }

    .enhanced-grid .rail-gray {
        background: #c8ccd2;
    }

    /* ---- State chip (Installment column) -------------------- */
    .enhanced-grid .state-chips {
        margin-top: 6px;
    }

    .enhanced-grid .chip {
        display: inline-block;
        font-size: 11px;
        font-weight: 600;
        padding: 3px 10px;
        border-radius: 6px;
        line-height: 1.4;
    }

    .enhanced-grid .chip-green {
        background: #e1f5ee;
        color: #0f6e56;
    }

    .enhanced-grid .chip-amber {
        background: #faeeda;
        color: #854f0b;
    }

    .enhanced-grid .chip-red {
        background: #fcebeb;
        color: #a32d2d;
    }

    .enhanced-grid .chip-gray {
        background: #f1efe8;
        color: #5f5e5a;
    }

    .enhanced-grid .delayed-pill {
        font-weight: 600;
    }

    .enhanced-grid .customer-name {
        font-weight: 500;
    }

    .enhanced-grid .created-meta {
        color: #9a9ea6;
    }

    .enhanced-grid .lable-soft {
        font-weight: 500;
    }

    /* ---- Amount breakdown mini-table ------------------------ */
    .enhanced-grid .amt-table {
        width: 100%;
        border-collapse: collapse;
        font-size: 13px;

    }

        .enhanced-grid .amt-table td {
            padding: 2px 0px !important;
           
        }

    .enhanced-grid .amt-key {
        color: #8a8f98;
        text-align: left;
    }

    .enhanced-grid .amt-val {
        text-align: right;
        font-variant-numeric: tabular-nums;
        white-space: nowrap;
    }

        .enhanced-grid .amt-val.muted {
            color: #b4b2a9;
        }

    .enhanced-grid .amt-penalty .amt-key,
    .enhanced-grid .amt-penalty .amt-val {
        color: #a32d2d;
    }

    .enhanced-grid .amt-total td {
        border-top: 1px solid #eceef1;
        padding-top: 5px;
        font-weight: 600;
        color: #2c3038;
    }
/* ---- Payment progress + split --------------------------- */
.enhanced-grid .pay-progress {
    height: 6px;
    background: #eef0f3;
    border-radius: 99px;
    overflow: hidden;
    margin: 6px 0 6px;
}

.enhanced-grid .pay-progress-fill {
    display: block;
    height: 100%;
    background: #1d9e75;
    border-radius: 99px;
}

.enhanced-grid .pay-split {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    font-size: 12px;
}

.enhanced-grid .pay-split .green {
    color: #0f6e56;
    font-weight: 600;
}

.enhanced-grid .pay-split .red {
    color: #a32d2d;
    font-weight: 600;
}

.enhanced-grid .paid-on {
    display: block;
    margin-top: 4px;
    color: #9a9ea6;
}


/* #region -------------------------------------- GRID VIEW --------------------------------------------- */
.myGridSimple {
    /*border: 1px solid #E0E0E0 !important;*/
}

    .myGridSimple th {
        background-color: #fafafa !important;
        padding-bottom: 20px !important;
    }

.myGrid > tbody > tr.itemHeaderRow {
    background-color: #fff !important;
}

.myGrid {
    border-collapse: separate !important;
    border-spacing: 0;
    /*background: #fafafa;*/
    width: 100%;
    font-size: 12px;
}

    /*table header TH*/
    .myGrid th {
        background-color: #E0E0E0;
        font-weight: 700;
        font-size: 11px;
        padding: 8px 5px 6px;
        border-bottom: 1px solid #eee;
        text-transform: uppercase;
        text-shadow: 0 1px 0 #FFF;
    }

        .myGrid th:first-child {
            border-top-left-radius: 5px;
        }

        .myGrid th:last-child {
            border-top-right-radius: 5px;
        }

    /*padding*/
    .myGrid td {
        padding: 5px;
    }

    .myGrid > tbody > tr {
        vertical-align: top;
    }

        /*all but not last row*/
        .myGrid > tbody > tr:not(:last-child) > td {
            border-top: 1px solid #ffffff !important;
            border-bottom: 1px solid #e0e0e0;
        }

    /*all odd rows*/
    .myGrid > tbody:first-child > tr:nth-child(odd) {
        background-color: #fafafa;
    }

    /*all even rows*/
    .myGrid > tbody:first-child > tr:nth-child(even) {
        background-color: white;
    }

    /*on hover*/
    .myGrid > tbody:first-child > tr:not(:first-child):not(:last-child):hover {
        background-color: #e7f5ff; /*!important;*/
    }

    .myGrid tr.empty-row {
        /*background-color: #e7e9ff !important;*/
    }

    /*pagination*/
    .myGrid tr.footer-style td {
        border-top: 1px solid #d5d8fb;
    }

    .myGrid tr.pager {
        background-color: white !important;
    }

    .myGrid tr.footer-style {
        background-color: #e7e9ff !important;
    }

        .myGrid tr.pager:hover > td,
        .myGrid tr.footer-style:hover > td {
            background-color: transparent !important;
        }

    .myGrid .pager td {
        padding: 10px 0 0 0;
    }

    .myGrid .pager span {
        display: inline-block;
        padding: 6px 12px;
        font-weight: 700;
        line-height: 1.42857143;
        color: #fff;
        text-align: center;
        white-space: nowrap;
        background-color: #337ab7;
        border: 1px solid #337ab7;
        z-index: 3;
        margin-left: -2px;
    }

    .myGrid .pager a {
        padding: 6px 12px;
        margin-left: -1px;
        border: 1px solid #ddd;
        line-height: 1.42857143;
        display: block;
    }

        .myGrid .pager a:hover {
            background-color: #eee;
        }

    .myGrid .pager td:first-child > span, .myGrid .pager td:first-child > a {
        border-top-left-radius: 4px;
        border-bottom-left-radius: 4px;
        margin-left: 0;
    }

    .myGrid .pager td:last-child > span, .myGrid .pager td:last-child > a {
        border-top-right-radius: 4px;
        border-bottom-right-radius: 4px;
    }



/* ========================= Sexy 1 ===================================*/

.sexy-grid {
    margin-top: 25px;
}

.myGrid.sexy-grid th {
    background-color: white; /*!important*/
    border-bottom: 2px solid #25a0da;
}

.myGrid.sexy-grid td {
    padding: 5px;
    padding-top: 12px;
    padding-bottom: 12px;
}


/* ========================= Sexy 2 ===================================*/

.myGrid.sexy-grid2 th {
    background-color: transparent !important;
    /*border-bottom: 2px solid #25a0da;*/
    padding-bottom: 15px;
    border-bottom: none !important;
}

    .myGrid.sexy-grid2 th .super-text {
        color: #afb8bc;
        margin-bottom: -6px;
    }

.myGrid.sexy-grid2 td {
    padding: 10px 5px;
}

.myGrid.sexy-grid2 > tbody:first-child > tr:nth-child(even) {
    background-color: #fafafa;
}

.myGrid.sexy-grid2 tr.footer-style {
    background-color: white !important;
}

    .myGrid.sexy-grid2 tr.footer-style td {
        border-top: 1px solid #e3e3e3 !important;
    }

.myGrid.sexy-grid2 tr.empty-row td {
    border-bottom: 1px solid #e3e3e3;
    background-color: #fafafa !important;
}


.empty-row td {
    border: 0 !important;
}

.empty-row {
    color: #c8c8c8;
    text-transform: uppercase;
    text-align: center;
}

.grid-controls {
    border-top: 1px solid #eaedef;
    margin: 20px -12px -12px;
    padding: 5px 17px 5px;
    background-color: #fafafa;
    border-bottom-left-radius: 2px;
    border-bottom-right-radius: 2px;
}

    .grid-controls.with-long-total {
        padding-top: 3px;
        padding-bottom: 2px;
    }

    .grid-controls .nav-box {
        border: none !important;
    }

    .grid-controls div.totalBoxSmall {
        line-height: 16px;
        display: inline-block;
        margin: 0 16px;
    }

        .grid-controls div.totalBoxSmall span:first-child {
            font-size: 10px;
            color: #757575;
            display: block;
            font-weight: 300;
        }

        .grid-controls div.totalBoxSmall span:nth-child(2) {
        }


    .grid-controls div.totalBox {
        display: inline-block;
        line-height: 16px;
        margin: 0 20px;
        font-weight: 300;
    }

        .grid-controls div.totalBox span:first-child {
            font-size: 10px;
            color: #757575;
            display: block;
        }

        .grid-controls div.totalBox span:nth-child(2) {
            font-size: 18px;
        }

    .grid-controls > table:first-child {
        width: 100%;
        font-size: 11px;
    }

.ul-sorting-icon {
    position: relative;
    bottom: -25px;
    margin-right: 5px;
}




.myGridInfo {
    font-size: 11px;
}

table.myGridInfo {
    margin-top: 30px;
    margin-bottom: 4px;
    width: 100%;
}

    table.myGridInfo td {
        /*padding: 3px 10px;*/
    }

.footer-row td {
    border-top: 2px solid #ccc;
}

/* #endregion */


/* #region ------------------------------------- simple table ---------------------------------------------*/

table.simpleTable {
    /*border-top: 1px solid #e1e1e1;*/
    font-size: 11px;
}

    table.simpleTable > tbody > tr {
        border-bottom: 1px solid #e1e1e1;
        vertical-align: top;
    }

        table.simpleTable > tbody > tr > td {
            color: #455a64;
        }

        table.simpleTable > tbody > tr > th {
            font-weight: 400;
            font-size: 10px !important;
            width: 120px;
            color: gray;
        }

        table.simpleTable > tbody > tr > td,
        table.simpleTable > tbody > tr > th {
            padding: 8px 5px;
        }

    table.simpleTable.th-auto-width > tbody > tr > th {
        max-width: 160px;
    }

    table.simpleTable caption {
        caption-side: top;
        text-align: left;
        font-size: 11px;
        margin-bottom: 7px;
        margin-left: 5px;
        border-left: #9932cc 2px solid;
        padding-left: 5px;
    }

    table.simpleTable tfoot td {
        background-color: #EAEBEC;
        padding: 5px;
        font-weight: bold;
    }

table.num th, table.num td {
    text-align: right !important;
}

/* #endregion */


table.simpleTable2 > tbody > tr > td {
    padding: 25px 5px;
}

table.simpleTable2 > tbody > tr > th {
    border-bottom: 2px solid #25a0da;
    font-size: 12px;
    padding: 10px 5px;
}

table.simpleTable2 > tbody > tr {
    border-bottom: 1px solid #eee;
    vertical-align: top;
}



/* #region -------------------------------------- TABLE --------------------------------------------- */

table {
    border-collapse: collapse;
}

    table th {
        text-align: left;
        font-weight: 500;
    }

.full {
    width: 100%;
}

table.zero-padding > tbody > tr > td,
table.zero-padding > tbody > tr > th,
.zero-padding {
    padding: 0 !important;
}

table.one-padding > tbody > tr > td {
    padding: 1px;
}

table.two-padding > tbody > tr > td,
table.two-padding > tbody > tr > th {
    padding: 2px;
}

table.three-padding > tbody > tr > td,
table.three-padding > tbody > tr > th {
    padding: 3px !important;
}

table.four-padding > tbody > tr > td,
table.four-padding > tbody > tr > th {
    padding: 4px;
}

table.five-padding > tbody > tr > td {
    padding: 5px;
}

table.six-padding > tbody > tr > td {
    padding: 6px;
}

table.ten-padding > tbody > tr > td {
    padding: 10px 6px;
}

table.td.standardColWidth {
    width: 125px;
}

table.borderBottom tr {
    border-bottom: 1px dotted #dddddd;
}

.border-bottom {
    border-bottom: 1px solid #dddddd;
}

.border-top {
    border-top: 1px solid #dddddd;
}

table.insideBorders td {
    border-right: 1px dotted #ccc;
    padding-right: 20px;
    padding-left: 20px;
}

    table.insideBorders td:first-child {
        border: none;
        padding: 0;
        border-right: 1px dotted #ccc;
        padding-right: 20px;
    }

    table.insideBorders td:last-child {
        border: none;
        padding: 0;
        padding-left: 20px;
    }

/* #endregion */


table.fill-last td:last-child {
    width: 100%;
}

/*:not(:last-child)*/
table.table-vertical-borders td {
    border-right: 1px solid #eee;
    padding: 10px 20px !important;
}


div.invisible-chk,
a.invisible-chk,
.invisible-chk input,
input.invisible-chk,
.nav a.invisible-chk {
    visibility: hidden;
}

    a.invisible-chk:checked,
    .invisible-chk input:checked,
    input.invisible-chk:checked {
        visibility: visible !important;
    }



/*on hover*/
table.special-padding > tbody:first-child > tr {
    background-color: white !important;
}

table.special-padding {
    padding: 0;
    margin-top: -6px;
}

    table.special-padding td {
        padding: 5px 0 !important;
    }

.fa {
    font-size: 13px;
    font-weight: normal !important;
}

.arrow-up:before {
    font-size: 13px;
    font-weight: normal !important;
    font-family: FontAwesome;
    display: inline-block;
    content: "\f139";
}

.arrow-down:before {
    font-size: 13px;
    font-weight: normal !important;
    font-family: FontAwesome;
    display: inline-block;
    content: "\f13a";
}

.add:before {
    font-size: 13px;
    font-weight: normal !important;
    font-family: FontAwesome;
    display: inline-block;
    width: 15px;
    margin-right: 2px;
    margin-left: 4px;
    content: "\f067";
}

.folder:before {
    font-size: 13px;
    font-weight: normal !important;
    font-family: FontAwesome;
    display: inline-block;
    width: 15px;
    margin-right: 2px;
    margin-left: 4px;
    content: "\f115";
}

.minus:before {
    font-size: 13px;
    font-weight: normal !important;
    font-family: FontAwesome;
    display: inline-block;
    width: 15px;
    margin-right: 2px;
    margin-left: 4px;
    content: "\f068";
}

.back:before {
    font-size: 13px;
    font-weight: normal !important;
    font-family: FontAwesome;
    display: inline-block;
    width: 15px;
    margin-right: 2px;
    margin-left: 4px;
    content: "\f0a8";
}

.print:before {
    font-size: 13px;
    font-weight: normal !important;
    font-family: FontAwesome;
    display: inline-block;
    width: 15px;
    margin-right: 2px;
    margin-left: 4px;
    content: "\f02f";
}

.fire:before {
    font-size: 13px;
    font-weight: normal !important;
    font-family: FontAwesome;
    display: inline-block;
    width: 15px;
    margin-right: 2px;
    margin-left: 4px;
    content: "\f06d";
}

.star-o:before {
    font-size: 13px;
    font-weight: normal !important;
    font-family: FontAwesome;
    display: inline-block;
    width: 15px;
    margin-right: 2px;
    margin-left: 4px;
    content: "\f006";
}

.star:before {
    font-size: 13px;
    font-weight: normal !important;
    font-family: FontAwesome;
    display: inline-block;
    width: 15px;
    margin-right: 2px;
    margin-left: 4px;
    content: "\f005";
}
.follow:before {
    font-size: 13px;
    font-weight: normal !important;
    font-family: FontAwesome;
    display: inline-block;
    width: 15px;
    margin-right: 2px;
    margin-left: 4px;
    content: "\f09e";
}

.excel:before {
    font-size: 13px;
    font-weight: normal !important;
    font-family: FontAwesome;
    display: inline-block;
    width: 15px;
    margin-right: 2px;
    margin-left: 4px;
    content: "\f1c3";
}

.download:before {
    font-size: 13px;
    font-weight: normal !important;
    font-family: FontAwesome;
    display: inline-block;
    width: 15px;
    margin-right: 2px;
    margin-left: 4px;
    content: "\f019";
}

.pdf:before {
    font-size: 13px;
    font-weight: normal !important;
    font-family: FontAwesome;
    display: inline-block;
    width: 15px;
    margin-right: 2px;
    margin-left: 4px;
    content: "\f1c1";
}

.pdf2:after {
    font-size: 13px;
    font-weight: normal !important;
    font-family: FontAwesome;
    display: inline-block;
    width: 15px;
    margin-right: 2px;
    margin-left: 4px;
    content: "\f1c1";
}

.image:before {
    font-size: 13px;
    font-weight: normal !important;
    font-family: FontAwesome;
    display: inline-block;
    width: 15px;
    margin-right: 2px;
    margin-left: 4px;
    content: "\f03e";
}

.camera:before {
    font-size: 13px;
    font-weight: normal !important;
    font-family: FontAwesome;
    display: inline-block;
    margin-right: 8px;
    margin-left: 4px;
    content: "\f030";
}

.child:before {
    font-size: 15px;
    font-weight: normal !important;
    font-family: FontAwesome;
    display: inline-block;
    width: 15px;
    margin-right: 2px;
    margin-left: 4px;
    content: "\f1ae";
}

.heart:before {
    font-size: 13px;
    font-weight: normal !important;
    font-family: FontAwesome;
    display: inline-block;
    width: 15px;
    margin-right: 2px;
    margin-left: 4px;
    content: "\f004";
}

.lock:before {
    font-size: 13px;
    font-weight: normal !important;
    font-family: FontAwesome;
    display: inline-block;
    width: 15px;
    margin-right: 2px;
    margin-left: 4px;
    content: "\f023";
}

.unlock:before {
    font-size: 13px;
    font-weight: normal !important;
    font-family: FontAwesome;
    display: inline-block;
    width: 15px;
    margin-right: 2px;
    margin-left: 4px;
    content: "\f09c";
}

.file:before {
    font-size: 13px;
    font-weight: normal !important;
    font-family: FontAwesome;
    display: inline-block;
    width: 15px;
    margin-right: 2px;
    margin-left: 4px;
    content: "\f15b";
}

.bar-chart:before {
    font-size: 13px;
    font-weight: normal !important;
    font-family: FontAwesome;
    display: inline-block;
    width: 15px;
    margin-right: 2px;
    margin-left: 4px;
    content: "\f080";
}

.handshake:before {
    font-size: 13px;
    font-weight: normal !important;
    font-family: FontAwesome;
    display: inline-block;
    width: 15px;
    margin-right: 2px;
    margin-left: 4px;
    content: "\f2b5";
}

.refresh:before {
    font-size: 13px;
    font-weight: normal !important;
    font-family: FontAwesome;
    display: inline-block;
    width: 15px;
    margin-right: 2px;
    margin-left: 4px;
    content: "\f079";
}

.course:before {
    font-size: 13px;
    font-weight: normal !important;
    font-family: FontAwesome;
    display: inline-block;
    width: 15px;
    margin-right: 4px;
    margin-left: 4px;
    content: "\f19d";
}

.question:before {
    font-size: 13px;
    font-weight: normal !important;
    font-family: FontAwesome;
    display: inline-block;
    width: 15px;
    margin-right: 2px;
    margin-left: 4px;
    content: "\f128";
}

.announce:before {
    font-size: 13px;
    font-weight: normal !important;
    font-family: FontAwesome;
    display: inline-block;
    width: 15px;
    margin-right: 2px;
    margin-left: 4px;
    content: "\f0a1";
}

.write-comment:before {
    font-weight: normal;
    font-size: 13px;
    font-weight: normal !important;
    font-family: FontAwesome;
    display: inline-block;
    width: 15px;
    margin-right: 2px;
    margin-left: 4px;
    content: "\f27b";
}


.envelope-circle:before {
    font-size: 9px;
    font-family: FontAwesome;
    display: inline-block;
    width: 16px;
    content: "\f064";
    background-color: #aeaeae;
    border-radius: 50%;
    height: 16px;
    color: white;
    text-align: center;
    margin-right: 6px;
    zoom: 0.9;
}

.envelope:before {
    font-weight: normal;
    font-size: 13px;
    font-weight: normal !important;
    font-family: FontAwesome;
    display: inline-block;
    width: 15px;
    margin-right: 2px;
    margin-left: 4px;
    content: "\f0e0";
}

.external-link:after {
    font-weight: normal;
    font-size: 13px;
    font-weight: normal !important;
    font-family: FontAwesome;
    display: inline-block;
    width: 15px;
    margin-right: 2px;
    margin-left: 4px;
    content: "\f08e";
}

.whats:before {
    font-weight: normal;
    font-size: 13px;
    font-weight: normal !important;
    font-family: FontAwesome;
    display: inline-block;
    width: 15px;
    margin-right: 2px;
    margin-left: 4px;
    content: "\f232";
}

.undo:before {
    font-weight: normal;
    font-size: 13px;
    font-weight: normal !important;
    font-family: FontAwesome;
    display: inline-block;
    width: 15px;
    margin-right: 2px;
    margin-left: 4px;
    content: "\f0e2";
}

.hourglass:before {
    font-weight: normal;
    font-size: 13px;
    font-weight: normal !important;
    font-family: FontAwesome;
    display: inline-block;
    width: 15px;
    margin-right: 2px;
    margin-left: 4px;
    content: "\f252";
}

.out:before {
    font-weight: normal;
    font-size: 13px;
    font-weight: normal !important;
    font-family: FontAwesome;
    display: inline-block;
    width: 15px;
    margin-right: 2px;
    margin-left: 4px;
    content: "\f08b";
}

.in:before {
    font-weight: normal;
    font-size: 13px;
    font-weight: normal !important;
    font-family: FontAwesome;
    display: inline-block;
    width: 15px;
    margin-right: 2px;
    margin-left: 4px;
    content: "\f090";
}

.done:before {
    font-size: 13px;
    font-weight: normal !important;
    font-family: FontAwesome;
    display: inline-block;
    width: 15px;
    margin-right: 2px;
    margin-left: 4px;
    content: "\f087";
}

.tel:before {
    font-size: 13px;
    font-weight: normal !important;
    font-family: FontAwesome;
    display: inline-block;
    width: 15px;
    margin-right: 2px;
    margin-left: 4px;
    content: "\f095";
}

.tel-circle:before {
    font-size: 10px;
    font-family: FontAwesome;
    display: inline-block;
    width: 16px;
    content: "\f095";
    background-color: #aeaeae;
    border-radius: 50%;
    height: 16px;
    color: white;
    text-align: center;
    margin-right: 6px;
    zoom: 0.9;
}

.bell-slash:before {
    font-size: 13px;
    font-weight: normal !important;
    font-family: FontAwesome;
    display: inline-block;
    width: 15px;
    margin-right: 2px;
    margin-left: 4px;
    content: "\f1f6";
}

.bell-slash-after:after {
    font-family: FontAwesome;
    width: 15px;
    content: "\f1f6";
}

.bell:before {
    font-size: 13px;
    font-weight: normal !important;
    font-family: FontAwesome;
    display: inline-block;
    width: 15px;
    margin-right: 2px;
    margin-left: 4px;
    content: "\f0f3";
}

.bell-after:after {
    font-size: 12px;
    font-weight: normal !important;
    font-family: FontAwesome;
    display: inline-block;
    margin-left: 2px;
    content: "\f0f3";
}

.birthday:before {
    font-size: 13px;
    font-weight: normal !important;
    font-family: FontAwesome;
    display: inline-block;
    width: 15px;
    margin-right: 2px;
    margin-left: 4px;
    content: "\f1fd";
}

.ok-circle:before {
    font-size: 13px;
    font-weight: normal !important;
    font-family: FontAwesome;
    display: inline-block;
    width: 15px;
    margin-right: 2px;
    margin-left: 4px;
    content: "\f05d";
}

.ok:before {
    font-size: 13px;
    font-weight: normal !important;
    font-family: FontAwesome;
    display: inline-block;
    width: 15px;
    margin-right: 2px;
    margin-left: 4px;
    content: "\f00c";
}

.approve:before {
    font-size: 13px;
    font-weight: normal !important;
    font-family: FontAwesome;
    display: inline-block;
    width: 15px;
    margin-right: 2px;
    margin-left: 4px;
    content: "\f087";
}

.decline:before {
    font-size: 13px;
    font-weight: normal !important;
    font-family: FontAwesome;
    display: inline-block;
    width: 15px;
    margin-right: 2px;
    margin-left: 4px;
    content: "\f088";
}

.ok-after:after {
    font-family: FontAwesome;
    width: 15px;
    margin-left: 4px;
    content: "\f00c";
}

.globe:before {
    font-size: 13px;
    font-weight: normal !important;
    font-family: FontAwesome;
    display: inline-block;
    width: 15px;
    margin-right: 2px;
    margin-left: 4px;
    content: "\f0ac";
}

.warning:before {
    font-size: 13px;
    font-weight: normal !important;
    font-family: FontAwesome;
    display: inline-block;
    width: 15px;
    margin-right: 2px;
    margin-left: 4px;
    content: "\f071";
}

.request:before {
    font-size: 13px;
    font-weight: normal !important;
    font-family: FontAwesome;
    display: inline-block;
    width: 15px;
    margin-right: 2px;
    margin-left: 4px;
    content: "\f1d8";
}

.request2:after {
    font-size: 13px;
    font-weight: normal !important;
    font-family: FontAwesome;
    display: inline-block;
    width: 15px;
    margin-right: 2px;
    margin-left: 4px;
    content: "\f1d8";
}

.change:before {
    font-size: 13px;
    font-weight: normal !important;
    font-family: FontAwesome;
    display: inline-block;
    width: 15px;
    margin-right: 2px;
    margin-left: 4px;
    content: "\f079";
}

.delete:before {
    font-size: 13px;
    font-weight: normal !important;
    font-family: FontAwesome;
    display: inline-block;
    width: 15px;
    margin-right: 2px;
    margin-left: 4px;
    content: "\f014";
}

.share:before {
    font-size: 13px;
    font-weight: normal !important;
    font-family: FontAwesome;
    display: inline-block;
    width: 15px;
    margin-right: 2px;
    margin-left: 4px;
    content: "\f064"
}

.delete2:before {
    font-size: 13px;
    font-weight: normal !important;
    font-family: FontAwesome;
    display: inline-block;
    width: 15px;
    margin-right: 2px;
    margin-left: 4px;
    content: "\f00d";
}

/*.decline:before {
    font-size: 13px;
    font-weight: normal !important;
    font-family: FontAwesome;
    display: inline-block;
    width: 15px;
    margin-right: 2px;
    margin-left: 4px;
    content: "\f088";
}
*/

.view:before {
    font-size: 13px;
    font-weight: normal !important;
    font-family: FontAwesome;
    display: inline-block;
    width: 15px;
    margin-right: 2px;
    margin-left: 4px;
    content: "\f022";
}

.plug:before {
    font-size: 13px;
    font-weight: normal !important;
    font-family: FontAwesome;
    display: inline-block;
    width: 15px;
    margin-right: 2px;
    margin-left: 4px;
    content: "\f1e6";
}

.unplug:before {
    font-size: 13px;
    font-weight: normal !important;
    font-family: FontAwesome;
    display: inline-block;
    width: 15px;
    margin-right: 2px;
    margin-left: 4px;
    content: "\f127";
}

.search:before {
    font-size: 13px;
    font-weight: normal !important;
    font-family: FontAwesome;
    display: inline-block;
    width: 15px;
    margin-right: 2px;
    margin-left: 4px;
    content: "\f002";
}

.search-after:after {
    font-size: 13px;
    font-weight: normal !important;
    font-family: FontAwesome;
    display: inline-block;
    width: 15px;
    margin-right: 2px;
    margin-left: 4px;
    content: "\f002";
}

.edit:before {
    font-size: 13px;
    font-weight: normal !important;
    font-family: FontAwesome;
    display: inline-block;
    width: 15px;
    margin-right: 2px;
    margin-left: 4px;
    content: "\f040";
}

.save:before {
    font-size: 13px;
    font-weight: normal !important;
    font-family: FontAwesome;
    display: inline-block;
    width: 15px;
    margin-right: 2px;
    margin-left: 4px;
    content: "\f0c7";
}

.slim-icon:before {
    width: auto;
    margin-right: 0;
    margin-left: 0;
}
.repair:before {
    font-size: 13px;
    font-weight: normal !important;
    font-family: FontAwesome;
    display: inline-block;
    width: 15px;
    margin-right: 2px;
    margin-left: 4px;
    content: "\f0ad";
}

.hide:before {
    font-size: 13px;
    font-weight: normal !important;
    font-family: FontAwesome;
    display: inline-block;
    width: 15px;
    margin-right: 2px;
    margin-left: 4px;
    content: "\f070";
}

.columns:before {
    font-size: 13px;
    font-weight: normal !important;
    font-family: FontAwesome;
    display: inline-block;
    width: 15px;
    margin-right: 2px;
    margin-left: 4px;
    content: "\f00a";
}

.unhide:before {
    font-size: 13px;
    font-weight: normal !important;
    font-family: FontAwesome;
    display: inline-block;
    width: 15px;
    margin-right: 2px;
    margin-left: 4px;
    content: "\f06e";
}

.attachment2:after {
    font-size: 13px;
    font-weight: normal !important;
    font-family: FontAwesome;
    display: inline-block;
    width: 15px;
    margin-right: 0px;
    margin-left: 4px;
    content: "\f0c6";
}

.attachment:before {
    font-size: 13px;
    font-weight: normal !important;
    font-family: FontAwesome;
    display: inline-block;
    width: 15px;
    margin-right: 0px;
    margin-left: 4px;
    content: "\f0c6";
}

.calculator:before {
    font-size: 13px;
    font-weight: normal !important;
    font-family: FontAwesome;
    display: inline-block;
    width: 15px;
    margin-right: 2px;
    margin-left: 4px;
    content: "\f1ec";
}

.info:before {
    font-size: 13px;
    font-weight: normal !important;
    font-family: FontAwesome;
    display: inline-block;
    width: 15px;
    margin-right: 2px;
    margin-left: 4px;
    content: "\f05a";
}

.info2:after {
    font-size: 13px;
    font-weight: normal !important;
    font-family: FontAwesome;
    display: inline-block;
    width: 15px;
    margin-right: 2px;
    margin-left: 4px;
    content: "\f05a";
}


.up:before {
    font-size: 13px;
    font-weight: normal !important;
    font-family: FontAwesome;
    display: inline-block;
    width: 15px;
    margin-right: 2px;
    margin-left: 4px;
    content: "\f139";
}

.down:before {
    font-size: 13px;
    font-weight: normal !important;
    font-family: FontAwesome;
    display: inline-block;
    width: 15px;
    margin-right: 2px;
    margin-left: 4px;
    content: "\f13a";
}

.archive:before {
    font-size: 13px;
    font-weight: normal !important;
    font-family: FontAwesome;
    display: inline-block;
    width: 15px;
    margin-right: 2px;
    margin-left: 4px;
    content: "\f187";
}

.pause:before {
    font-size: 13px;
    font-weight: normal !important;
    font-family: FontAwesome;
    display: inline-block;
    width: 15px;
    margin-right: 2px;
    margin-left: 4px;
    content: "\f04c";
}

.play:before {
    font-size: 13px;
    font-weight: normal !important;
    font-family: FontAwesome;
    display: inline-block;
    width: 15px;
    margin-right: 2px;
    margin-left: 4px;
    content: "\f04b";
}

.user:before {
    font-size: 13px;
    font-weight: normal !important;
    font-family: FontAwesome;
    display: inline-block;
    width: 15px;
    margin-right: 2px;
    margin-left: 4px;
    content: "\f007";
}

.fax:before {
    font-size: 13px;
    font-weight: normal !important;
    font-family: FontAwesome;
    display: inline-block;
    width: 15px;
    margin-right: 2px;
    margin-left: 4px;
    content: "\f1ac";
}

.users:before {
    font-family: FontAwesome;
    display: inline-block;
    width: 15px;
    margin-right: 2px;
    margin-left: 4px;
    content: "\f0c0";
}

.orgChart:before {
    font-family: FontAwesome;
    display: inline-block;
    width: 15px;
    margin-right: 2px;
    margin-left: 4px;
    content: "\f0e8";
}

.cart:before {
    font-family: FontAwesome;
    display: inline-block;
    width: 15px;
    margin-right: 2px;
    margin-left: 4px;
    content: "\f07a";
}

.line-chart:before {
    font-family: FontAwesome;
    display: inline-block;
    width: 15px;
    margin-right: 2px;
    margin-left: 4px;
    content: "\f201";
}

.asset:before {
    font-family: FontAwesome;
    display: inline-block;
    width: 15px;
    margin-right: 2px;
    margin-left: 4px;
    content: "\f207";
}

.desktop:before {
    font-family: FontAwesome;
    display: inline-block;
    width: 15px;
    margin-right: 2px;
    margin-left: 4px;
    content: "\f108";
}

.task:before {
    font-family: FontAwesome;
    display: inline-block;
    width: 15px;
    margin-right: 2px;
    margin-left: 4px;
    content: "\f0ae";
}

.plane:before {
    font-family: FontAwesome;
    display: inline-block;
    margin-right: 2px;
    content: "\f072";
}

.medkit:before {
    font-family: FontAwesome;
    display: inline-block;
    margin-right: 2px;
    content: "\f0fa";
}

.hand:before {
    font-family: FontAwesome;
    display: inline-block;
    margin-right: 2px;
    content: "\f256";
}

.female-gender:before {
    font-family: FontAwesome;
    display: inline-block;
    margin-right: 2px;
    content: "\f221";
}

.male-gender:before {
    font-family: FontAwesome;
    display: inline-block;
    margin-right: 2px;
    content: "\f222";
}

.marriage:before {
    font-family: FontAwesome;
    display: inline-block;
    margin-right: 2px;
    content: "\f228";
}

.education:before {
    font-family: FontAwesome;
    display: inline-block;
    margin-right: 2px;
    content: "\f19d";
}

.cloud:before {
    font-family: FontAwesome;
    display: inline-block;
    /*width: 15px;*/
    margin-right: 2px;
    margin-left: 4px;
    content: "\f1be";
}

.calendar:before {
    font-family: FontAwesome;
    display: inline-block;
    width: 15px;
    margin-right: 2px;
    margin-left: 4px;
    content: "\f073";
}

.microchip:before {
    font-family: FontAwesome;
    display: inline-block;
    width: 15px;
    margin-right: 2px;
    margin-left: 4px;
    content: "\f2db";
}

.dashboard:before {
    font-family: FontAwesome;
    display: inline-block;
    width: 15px;
    margin-right: 2px;
    margin-left: 4px;
    content: "\f0e4";
}

.leaf:before {
    font-family: FontAwesome;
    display: inline-block;
    width: 15px;
    margin-right: 2px;
    margin-left: 4px;
    content: "\f18c";
}

.meeting:before {
    font-family: FontAwesome;
    display: inline-block;
    width: 15px;
    margin-right: 2px;
    margin-left: 4px;
    content: "\f03d";
}

.memo:before {
    font-size: 13px;
    font-family: FontAwesome;
    display: inline-block;
    width: 15px;
    margin-right: 2px;
    margin-left: 4px;
    content: "\f044";
}

.clock-after:after {
    font-family: FontAwesome;
    width: 15px;
    content: "\f017";
}

.hourglass-after:after {
    font-family: FontAwesome;
    width: 15px;
    content: "\f252";
}

.clock:before {
    font-family: FontAwesome;
    font-size: 13px;
    display: inline-block;
    width: 15px;
    margin-right: 2px;
    margin-left: 4px;
    content: "\f017";
}

.briefcase:before {
    font-family: FontAwesome;
    display: inline-block;
    width: 15px;
    margin-right: 2px;
    margin-left: 4px;
    content: "\f0b1";
}


.warehouse:before {
    font-family: FontAwesome;
    display: inline-block;
    width: 15px;
    margin-right: 2px;
    margin-left: 4px;
    content: "\f1b3";
}

.star:before {
    font-family: FontAwesome;
    display: inline-block;
    width: 15px;
    margin-right: 2px;
    margin-left: 4px;
    content: "\f005";
}


.customer:before {
    font-family: FontAwesome;
    display: inline-block;
    width: 15px;
    margin-right: 2px;
    margin-left: 4px;
    content: "\f19d";
}


.supplier:before {
    font-family: FontAwesome;
    display: inline-block;
    width: 15px;
    margin-right: 2px;
    margin-left: 4px;
    content: "\f0d1";
}


.job:before {
    font-family: FontAwesome;
    display: inline-block;
    width: 15px;
    margin-right: 2px;
    margin-left: 4px;
    content: "\f085";
}

.slider:before {
    font-family: FontAwesome;
    display: inline-block;
    width: 15px;
    margin-right: 2px;
    margin-left: 4px;
    content: "\f1de";
}

.dollar:before {
    font-family: FontAwesome;
    display: inline-block;
    width: 15px;
    margin-right: 2px;
    margin-left: 4px;
    content: "\f155";
}

.home:before {
    font-family: FontAwesome;
    display: inline-block;
    width: 15px;
    margin-right: 2px;
    margin-left: 4px;
    content: "\f015";
}

.homeAfter:after {
    font-family: FontAwesome;
    display: inline-block;
    width: 15px;
    margin-right: 2px;
    margin-left: 4px;
    content: "\f015";
}

.refreshAfter:after {
    font-family: FontAwesome;
    display: inline-block;
    width: 15px;
    margin-right: 2px;
    margin-left: 4px;
    content: "\f079";
}

.certificateAfter:after {
    font-family: FontAwesome;
    display: inline-block;
    width: 15px;
    margin-right: 2px;
    margin-left: 4px;
    content: "\f19d";
}
.rightArrowAfter:after {
    font-family: FontAwesome;
    display: inline-block;
    width: 15px;
    margin-right: 2px;
    margin-left: 4px;
    content: "\f054";
}

.userAfter:after {
    font-weight: normal !important;
    font-family: FontAwesome;
    display: inline-block;
    width: 15px;
    margin-right: 2px;
    margin-left: 4px;
    content: "\f007";
}

.dollarAfter:after {
    font-family: FontAwesome;
    display: inline-block;
    width: 15px;
    margin-right: 2px;
    margin-left: 4px;
    content: "\f155";
}

.location:before {
    font-family: FontAwesome;
    display: inline-block;
    width: 8px;
    margin-right: 1px;
    margin-left: 1px;
    content: "\f041";
}

.service:before {
    /*font-size: 12px;*/
    font-weight: normal !important;
    font-family: FontAwesome;
    display: inline-block;
    width: 15px;
    margin-right: 2px;
    margin-left: 4px;
    content: "\f013";
}

.fa-no-width:before {
    width: inherit !important;
    margin: 0 !important;
}

.language:before {
    font-weight: normal !important;
    font-family: FontAwesome;
    display: inline-block;
    width: 24px;
    content: "\f1ab";
    font-size: 16px;
}

.dots, .dots-h {
    text-decoration: none !important;
}

.dots:before {
    font-weight: normal !important;
    font-family: FontAwesome;
    font-size: 15px;
    text-decoration: none !important; 
    padding: 0 5px;
    content: "\f142";
}


.dots-h:before {
    font-weight: normal !important;
    font-family: FontAwesome;
    font-size: 15px;
    text-decoration: none !important;
    padding: 0 5px;
    content: "\f141";
}

.flask:before {
    font-family: FontAwesome;
    display: inline-block;
    width: 15px;
    margin-right: 2px;
    margin-left: 4px;
    content: "\f0c3";
}

.help:after {
    font-size: 13px;
    font-weight: normal !important;
    font-family: FontAwesome;
    display: inline-block;
    width: 15px;
    margin-right: 2px;
    margin-left: 8px;
    content: "\f059";
}

.help2:before {
    font-size: 13px;
    font-weight: normal !important;
    font-family: FontAwesome;
    display: inline-block;
    width: 15px;
    margin-right: 8px;
    content: "\f059";
}

.template:before {
    font-family: FontAwesome;
    display: inline-block;
    width: 15px;
    margin-right: 2px;
    margin-left: 4px;
    content: "\f0f6";
}

.code:before {
    font-family: FontAwesome;
    display: inline-block;
    width: 15px;
    margin-right: 2px;
    margin-left: 4px;
    content: "\f121";
}

.products:before {
    font-family: FontAwesome;
    display: inline-block;
    width: 15px;
    margin-right: 2px;
    margin-left: 4px;
    content: "\f1b3";
}

.colors:before {
    font-family: FontAwesome;
    display: inline-block;
    width: 15px;
    margin-right: 2px;
    margin-left: 4px;
    content: "\f1fb";
}

.bank:before {
    font-family: FontAwesome;
    display: inline-block;
    width: 15px;
    margin-right: 2px;
    margin-left: 4px;
    content: "\f19c";
}

.copy:before {
    font-family: FontAwesome;
    display: inline-block;
    width: 15px;
    margin-right: 2px;
    margin-left: 4px;
    content: "\f0c5";
}

.book:before {
    font-family: FontAwesome;
    display: inline-block;
    width: 15px;
    margin-right: 2px;
    margin-left: 4px;
    content: "\f02d";
}

.legal:before {
    font-family: FontAwesome;
    display: inline-block;
    width: 15px;
    margin-right: 2px;
    margin-left: 4px;
    content: "\f0e3";
}

.sort-asc:before {
    font-family: FontAwesome;
    display: inline-block;
    width: 15px;
    margin-right: 2px;
    margin-left: 4px;
    content: "\f160";
}

.flag-after:after {
    font-family: FontAwesome;
    display: inline-block;
    width: 15px;
    margin-right: 2px;
    margin-left: 4px;
    content: "\f024";
}

.flag:before {
    font-family: FontAwesome;
    display: inline-block;
    width: 15px;
    margin-right: 2px;
    margin-left: 4px;
    content: "\f024";
}

.logOut:before {
    font-family: FontAwesome;
    display: inline-block;
    width: 15px;
    margin-right: 2px;
    margin-left: 4px;
    content: "\f011";
}

.extraPad:before {
    margin-right: 12px !important;
}

.rightArrow:after {
    font-weight: normal;
    font-family: FontAwesome;
    display: inline-block;
    /*width: 15px;*/
    margin-right: 2px;
    margin-left: 6px;
    content: "\f054";
}

.leftArrow:before {
    font-weight: normal;
    font-family: FontAwesome;
    display: inline-block;
    /*width: 15px;*/
    margin-right: 6px;
    margin-left: 2px;
    content: "\f053";
}

.withBtnBox:after {
    background-color: #797979;
    padding: 6px 4px;
    border-radius: 0 11px 10px 0;
    float: right;
    margin: -6px -9px -6px 6px;
    color: white;
}

.withBtnBox.orange:after {
    background-color: #ffa500;
    color: white !important;
}

.withBtnBox.red:after {
    background-color: crimson;
    color: white !important;
}

.withBtnBox.dodger-blue:after {
    background-color: #1E90FF;
    color: white !important;
}

.withBtnBox.green:after {
    background-color: #20970b;
    color: white !important;
}

.withBtnBox.gold:after {
    background-color: #CFA240;
    color: white !important;
}

.withBtnBox.purple:after {
    background-color: #9932cc;
    color: white !important;
}

.sortArrow:before {
    font-size: 13px;
    font-weight: normal !important;
    font-weight: normal;
    font-family: FontAwesome;
    display: inline-block;
    width: 15px;
    margin-right: 2px;
    margin-left: 4px;
    content: "\f0dc";
}

.pdfExport:before {
    font-family: FontAwesome;
    display: inline-block;
    margin-right: 2px;
    margin-left: 4px;
    content: "\f1c1";
}

.ui-accordion-header {
    font-size: 16px;
    margin: 18px 0;
    padding: 10px 0 6px 0;
    cursor: pointer;
    color: #111;
    border-bottom: 1px solid #aaa !important;
    outline: none;
    text-transform: uppercase;
}

.ui-accordion-content {
    /*background: #eee;*/
    /* box-shadow: 0 1px 2px rgba(0,0,0,.2); */
    padding: 6px 0;
    /*overflow: auto;*/
}

/*not active*/
.ui-state-default.ui-accordion-icons:after {
    font-size: 20px;
    font-family: FontAwesome;
    display: inline-block;
    margin-left: 15px;
    content: "\f107";
}

/*active*/
.ui-state-active.ui-accordion-icons:after {
    font-size: 20px;
    font-family: FontAwesome;
    display: inline-block;
    margin-left: 15px;
    content: "\f106";
}



.ui-state-active {
    border-bottom: 2px solid !important;
    font-weight: 700;
    color: black !important;
}


/*jQuery Tab*/

.ui-tabs {
    position: relative; /* position: relative prevents IE scroll bug (element with position: relative inside container with overflow: auto appear as "fixed") */
    padding-top: .4em;
}

    .ui-tabs .ui-tabs-nav {
        margin: 0;
        padding: .2em 0 0;
        font-size: 12px;
        border-bottom: 1px solid #ccc;
        
    }

        .ui-tabs .ui-tabs-nav li {
            list-style: none;
            float: left;
        }

        .ui-tabs .ui-tabs-nav .ui-tabs-anchor {
            float: left;
            padding: .06em 1.1em;
            text-decoration: none;
            font-size: 12px;
            line-height: 40px;
            color: #455A64;
        }

        .ui-tabs .ui-tabs-nav li.ui-tabs-active .ui-tabs-anchor,
        .ui-tabs .ui-tabs-nav li.ui-state-disabled .ui-tabs-anchor,
        .ui-tabs .ui-tabs-nav li.ui-tabs-loading .ui-tabs-anchor {
            cursor: text;
        }

.ui-tabs-collapsible .ui-tabs-nav li.ui-tabs-active .ui-tabs-anchor {
    cursor: pointer;
}

.ui-tabs .ui-tabs-panel {
    display: block;
    border-width: 0;
    padding: 2em 0;
    background: none;
}

.ui-helper-clearfix:before, .ui-helper-clearfix:after {
    content: "";
    display: table;
    border-collapse: collapse;
}

.ui-helper-clearfix:after {
    clear: both;
}

/*main image holder*/
.pic {
    float: left;
    /*border: 1px solid #fff;*/
    overflow: hidden;
    position: relative;
    text-align: center;
    /*-webkit-box-shadow: 0 0.5px 0 0 #ffffff inset, 0 1px 1px 0 #B3B3B3;
    -moz-box-shadow: 0 0.5px 0 0 #ffffff inset, 0 1px 1px 0 #B3B3B3;
    -ms-box-shadow: 0 0.5px 0 0 #ffffff inset, 0 1px 1px 0 #B3B3B3;
    box-shadow: 0 0.5px 0 0 #ffffff inset, 0 1px 1px 0 #B3B3B3;*/
    cursor: pointer;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    border: 1px solid #eee;
}

    /*mask inside main image holder*/
    .pic .mask,
    .pic .content {
        position: absolute;
        overflow: hidden;
        top: 0;
        left: 0;
        height: 100%;
        width: 100%;
    }

    /*image inside main image holder*/
    .pic img {
        display: block;
        position: relative;
        /*height: 100%;
        width: 100%;*/
    }

    /*title h2 inside main image holder*/
    .pic h2 {
        text-transform: uppercase;
        color: #fff;
        text-align: center;
        position: relative;
        padding: 10px;
        background: #ffffff;
        background: rgba(255, 255, 255, 0.5);
        top: 30%;
        font-size: 17px;
        font-weight: 300;
    }

/*transition*/
.view-first img {
    -webkit-transition: all 0.2s linear;
    -moz-transition: all 0.2s linear;
    -o-transition: all 0.2s linear;
    -ms-transition: all 0.2s linear;
    transition: all 0.2s linear;
}

.view-first:hover img {
    -webkit-transform: scale(1.1,1.1);
    -moz-transform: scale(1.1,1.1);
    -o-transform: scale(1.1,1.1);
    -ms-transform: scale(1.1,1.1);
    transform: scale(1.1,1.1);
}

.view-first .mask {
    -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
    -moz-filter: alpha(opacity=0);
    -o-filter: alpha(opacity=0);
    filter: alpha(opacity=0);
    -ms-opacity: 0;
    opacity: 0;
    background-color: #08afdb;
    background-color: rgba(8, 175, 219, 0.7);
    -webkit-transition: all 0.4s ease-in-out;
    -moz-transition: all 0.4s ease-in-out;
    -o-transition: all 0.4s ease-in-out;
    -ms-transition: all 0.4s ease-in-out;
    transition: all 0.4s ease-in-out;
}

.view-first:hover .mask {
    -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
    -moz-filter: alpha(opacity=100);
    -o-filter: alpha(opacity=100);
    filter: alpha(opacity=100);
    -ms-opacity: 1;
    opacity: 1;
}

.view-first h2 {
    -webkit-transform: translateY(-100px);
    -moz-transform: translateY(-100px);
    -o-transform: translateY(-100px);
    -ms-transform: translateY(-100px);
    transform: translateY(-100px);
    -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
    -moz-filter: alpha(opacity=0);
    -o-filter: alpha(opacity=0);
    filter: alpha(opacity=0);
    -ms-opacity: 0;
    opacity: 0;
    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    -ms-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
}

.view-first:hover h2 {
    -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
    -moz-filter: alpha(opacity=100);
    -o-filter: alpha(opacity=100);
    filter: alpha(opacity=100);
    -ms-opacity: 1;
    opacity: 1;
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    -o-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
}


/* Shine */
.hover14 figure {
    position: relative;
    margin: 0;
    overflow: hidden;
}

.hover14 figure::before {
    position: absolute;
    top: 0;
    left: -75%;
    z-index: 0;
    display: block;
    content: '';
    width: 50%;
    height: 100%;
    background: -webkit-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,.3) 100%);
    background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,.3) 100%);
    -webkit-transform: skewX(-30deg);
    transform: skewX(-30deg);
}

    .hover14 figure:hover::before {
        -webkit-animation: shine 1.25s;
        animation: shine 1.25s;
    }

@-webkit-keyframes shine {
    100% {
        left: 100%;
    }
}

@keyframes shine {
    100% {
        left: 100%;
    }
}
.nav {
    list-style: none;
    margin-bottom: 10px;
    float: right;
    font-size: 11px;
}

ul.nav {
    margin: 0;
    padding: 0;
/*    position: relative;
    z-index: 1;*/
}

.nav li {
    /*float: left;*/
    position: relative;
}

.nav > li > a {
    /*font-weight: 500;*/
}

.nav a {
    display: block;
    padding: 5px;
    text-decoration: none;
}

.nav li.lastone {
    border-top: 1px dotted #ccc;
}

.nav li.firstone {
    border-bottom: 1px dotted #ccc;
}

/* menu caption */
.nav > li > a {
    display: block;
    padding: 0;
    /*text-decoration: underline;*/
}

.nav a:hover {
    text-decoration: underline;
}

/*--- DROPDOWN ---*/
.nav ul {
    list-style: none;
    position: absolute;
    /*left: -9999px;  Hide off-screen when not needed (this is more accessible than display:none;) */
    display: none;
    z-index: 10000;
    padding: 2px 0;
    text-align: left;
    background-color: #fff;
    -webkit-background-clip: padding-box;
    -ms-background-clip: padding-box;
    background-clip: padding-box;
    border: 1px solid #ccc;
    border: 1px solid rgba(0,0,0,.15);
    -ms-border-radius: 4px;
    border-radius: 4px;
    -webkit-box-shadow: 0 6px 12px rgba(0,0,0,.175);
    -ms-box-shadow: 0 6px 12px rgba(0,0,0,.175);
    box-shadow: 0 6px 12px rgba(0,0,0,.175);
    -moz-min-width: 120px;
    -ms-min-width: 120px;
    -o-min-width: 120px;
    -webkit-min-width: 120px;
    min-width: 120px;
    right: 4px;
    top: 8px;
    /*text-transform: uppercase;*/
}

    .nav ul li {
        /* Introducing a padding between the li and the a give the illusion spaced items */
        float: none;
        font-size: 11px;
    }
        .nav ul li a {
            padding-right: 15px;
            padding-left: 8px;
        }

    .nav ul a {
        white-space: nowrap; /* Stop text wrapping and creating multi-line dropdown items */
    }

.nav li:hover ul { /* Display the dropdown on hover */
    /*left: -100px;*/ /* Bring back on-screen when needed */
    display: block;
}

.nav li:hover a { /* These create persistent hover states, meaning the top-most link stays 'hovered' even when your cursor has moved down the list. */
    text-decoration: underline;
}

.nav li:hover ul a { /* The persistent hover state does however create a global style for links even before they're hovered. Here we undo these effects. */
    text-decoration: none;

}

.nav li:hover ul li a:hover { /* Here we define the most explicit hover states--what happens when you hover each individual link. */
    background-color: #f5f5f5;
/*    margin-left: -7px;
    margin-right: -17px;
    padding-left: 12px;
    padding-right: 19px;*/
}


.nav-box {
    border: 1px solid #cfd8dc;
    padding: 2px 5px !important;
    -ms-border-radius: .21428571em;
    border-radius: .21428571em;
    color: rgb(69, 90, 100);
}

    .nav-box > li > a {
        text-decoration: none !important;
    }

    .nav-box i {
        padding-left: 5px;
        border-left: 1px solid #cfd8dc;
        margin-left: 5px;
    }


/*nav-basic*/
ul.nav-basic {
    float: left;
    text-transform: inherit !important;
    font-size: 14px;
}

/* first level a */
.nav-basic > li > a {
    padding: 1px !important;
}

.nav-basic li:hover ul li a:hover {
    background-color: inherit !important;
    color: gray;
}

/* second level ul */
.nav-basic ul {
    min-width: inherit !important;
    padding: 5px 12px 5px 3px;
}

/* second level a */
.nav-basic > ul > li > a {
    
    padding-right: 10px;
}


/* ============================================
   Multi-column dropdown menu
   ============================================ */

/* Wrapper — the popup panel that holds columns + footer */
.nav .cols-wrapper {
    display: none;
    position: absolute;
    right: 4px;
    top: 8px;
    z-index: 10000;
    background-color: #fff;
    border: 1px solid rgba(0, 0, 0, .15);
    border-radius: 4px;
    box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
}

.nav li:hover > .cols-wrapper {
    display: block;
}

/* Columns flex row */
.nav .cols-wrapper > ul.cols {
    position: static !important;
    display: flex !important;
    flex-direction: row;
    align-items: flex-start;
    margin: 0;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: 0;
    box-shadow: none;
    right: auto;
    top: auto;
    min-width: auto;
}

/* Each column */
.nav ul.cols > li.col {
    display: block;
    float: none;
    position: static;
    border-right: 1px solid #eee;
    min-width: 160px;
    padding: 4px 0;
}

    .nav ul.cols > li.col:last-child {
        border-right: none;
    }

    /* Nested <ul> inside each column — render inline, not as a popup */
    .nav ul.cols > li.col > ul {
        position: static !important;
        display: block !important;
        margin: 0;
        padding: 0;
        background: transparent;
        border: none;
        border-radius: 0;
        box-shadow: none;
        right: auto;
        top: auto;
        min-width: auto;
    }

        .nav ul.cols > li.col > ul > li {
            display: block;
            float: none;
            position: static;
            width: auto;
        }

/* Section header inside a column */
.nav ul.cols .menu-header {
    padding: 4px 12px;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    color: #90a4ae;
    letter-spacing: 0.5px;
    border-bottom: 1px solid #f0f0f0;
    margin-bottom: 2px;
    cursor: default;
}

    .nav ul.cols .menu-header:hover {
        background-color: transparent !important;
    }

/* Footer row — global actions spanning all columns */
.nav .cols-footer {
    position: static !important;
    display: flex !important;
    flex-wrap: wrap;
    gap: 4px 12px;
    list-style: none;
    margin: 0;
    padding: 6px 10px;
    background-color: #fafafa;
    border: none;
    border-top: 1px solid #e0e0e0;
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
    box-shadow: none;
    right: auto;
    top: auto;
    min-width: auto;
}

    .nav .cols-footer > li {
        display: inline-block;
        float: none;
        position: static;
    }

        .nav .cols-footer > li a,
        .nav .cols-footer > li .delete {
            display: inline-block;
            padding: 4px 6px;
            white-space: nowrap;
        }
.spinner2 {
    margin: 7px auto 0;
    width: 60px;
    text-align: center;
}

    .spinner2 > div {
        width: 10px;
        height: 10px;
        background-color: #036c9c;
        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;
    }

    .spinner2 .bounce1 {
        -webkit-animation-delay: -0.32s;
        animation-delay: -0.32s;
    }

    .spinner2 .bounce2 {
        -webkit-animation-delay: -0.16s;
        animation-delay: -0.16s;
    }

@-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);
    }
}


.spinner3 {
    width: 40px;
    height: 40px;
    position: relative;
    margin: 50px auto;
}

    .spinner3 .loading-bar {
        display: inline-block;
        width: 4px;
        height: 18px;
        border-radius: 4px;
        animation: loading 1s ease-in-out infinite;
    }

        .spinner3 .loading-bar:nth-child(1) {
            background-color: #3498db;
            animation-delay: 0;
        }

        .spinner3 .loading-bar:nth-child(2) {
            background-color: #c0392b;
            animation-delay: 0.09s;
        }

        .spinner3 .loading-bar:nth-child(3) {
            background-color: #f1c40f;
            animation-delay: .18s;
        }

        .spinner3 .loading-bar:nth-child(4) {
            background-color: #27ae60;
            animation-delay: .27s;
        }

@keyframes loading {
    0% {
        transform: scale(1);
    }

    20% {
        transform: scale(1, 2.2);
    }

    40% {
        transform: scale(1);
    }
}


.lds-ellipsis {
    display: inline-block;
    position: relative;
    width: 64px;
    height: 64px;
    float: left;
}

    .lds-ellipsis div {
        position: absolute;
        top: 7px;
        width: 11px;
        height: 11px;
        border-radius: 50%;
        background: #25a0da;
        animation-timing-function: cubic-bezier(0, 1, 1, 0);
    }

        .lds-ellipsis div:nth-child(1) {
            left: 6px;
            animation: lds-ellipsis1 0.6s infinite;
        }

        .lds-ellipsis div:nth-child(2) {
            left: 6px;
            animation: lds-ellipsis2 0.6s infinite;
        }

        .lds-ellipsis div:nth-child(3) {
            left: 26px;
            animation: lds-ellipsis2 0.6s infinite;
        }

        .lds-ellipsis div:nth-child(4) {
            left: 45px;
            animation: lds-ellipsis3 0.6s infinite;
        }

@keyframes lds-ellipsis1 {
    0% {
        transform: scale(0);
    }

    100% {
        transform: scale(1);
    }
}

@keyframes lds-ellipsis3 {
    0% {
        transform: scale(1);
    }

    100% {
        transform: scale(0);
    }
}

@keyframes lds-ellipsis2 {
    0% {
        transform: translate(0, 0);
    }

    100% {
        transform: translate(19px, 0);
    }
}



.overlay {
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    position: fixed;
    background: rgba(237, 240, 240, 0.95);
    z-index: 10000000000000;
}

.overlay__inner {
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    position: absolute;
}

.overlay__content {
    left: 50%;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
}


.pop-box h3 {
    font-weight: 500;
    background-color: #E4E9ED;
    padding: 10px 15px 11px 15px;
    margin: -7px -14px 1px;
    border-radius: 5px 5px 0 0;
    /*text-transform: uppercase;*/
    font-size: 12px;
    color: #666;
}

.pop-box .pop-content {
    height: 350px;
    overflow: auto;
    margin-left: -15px;
    margin-right: -13px;
    min-width: 280px;
}

    .pop-box .pop-content h4 {
        background-color: #7c9196;
        margin: 20px 0 5px 0;
        padding: 8px 22px;
        font-weight: 400;
        color: #fff;
        font-size: 11px;
    }

        .pop-box .pop-content h4:first-child { margin-top: 0; }

.pop-box .bottom-link {
    bottom: 0;
    text-align: center;
    background-color: #fafafa;
    margin: 20px -14px -7px;
    padding: 8px 0;
    font-weight: 500;
    /*text-transform: uppercase;*/
    color: #666;
    -ms-border-radius: 0 0 .35714286em .35714286em;
    border-radius: 0 0 .35714286em .35714286em;
    font-size: 11px;
}

.pop-box .item {
    border-bottom: #eee 1px solid;
    padding: 8px 20px;
    cursor: pointer;
    color: #525a65;
}

    .pop-box .item:hover {
        background-color: #eee;
    }

    .pop-box .item .icon {
        width: 35px;
        display: inline-block;
    }



    /**
 * pretty-checkbox.css
 *
 * A pure CSS library to beautify checkbox and radio buttons
 *
 * Source: https://github.com/lokesh-coder/pretty-checkbox
 * Demo: https://lokesh-coder.github.io/pretty-checkbox
 *
 * Copyright (c) 2017 Lokesh rajendran
 */

.pretty *{box-sizing:border-box}.pretty input:not([type=checkbox]):not([type=radio]){display:none}.pretty{position:relative;display:inline-block;margin-right:1em;white-space:nowrap;line-height:1}.pretty input{position:absolute;left:0;top:0;min-width:1em;width:100%;height:100%;z-index:2;opacity:0;margin:0;padding:0;cursor:pointer}.pretty .state label{position:initial;display:inline-block;font-weight:400;margin:0;text-indent:1.5em;min-width:calc(1em + 2px)}.pretty .state label:after,.pretty .state label:before{content:'';width:calc(1em + 2px);height:calc(1em + 2px);display:block;box-sizing:border-box;border-radius:0;border:1px solid transparent;z-index:0;position:absolute;left:0;top:calc((0% - (100% - 1em)) - 8%);background-color:transparent}.pretty .state label:before{border-color:#bdc3c7}.pretty .state.p-is-hover,.pretty .state.p-is-indeterminate{display:none}@-webkit-keyframes zoom{0%{opacity:0;-webkit-transform:scale(0);transform:scale(0)}}@keyframes zoom{0%{opacity:0;-webkit-transform:scale(0);transform:scale(0)}}@-webkit-keyframes tada{0%{-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in;opacity:0;-webkit-transform:scale(7);transform:scale(7)}38%{-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out;opacity:1;-webkit-transform:scale(1);transform:scale(1)}55%{-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in;-webkit-transform:scale(1.5);transform:scale(1.5)}72%{-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out;-webkit-transform:scale(1);transform:scale(1)}81%{-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in;-webkit-transform:scale(1.24);transform:scale(1.24)}89%{-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out;-webkit-transform:scale(1);transform:scale(1)}95%{-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in;-webkit-transform:scale(1.04);transform:scale(1.04)}100%{-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out;-webkit-transform:scale(1);transform:scale(1)}}@keyframes tada{0%{-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in;opacity:0;-webkit-transform:scale(7);transform:scale(7)}38%{-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out;opacity:1;-webkit-transform:scale(1);transform:scale(1)}55%{-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in;-webkit-transform:scale(1.5);transform:scale(1.5)}72%{-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out;-webkit-transform:scale(1);transform:scale(1)}81%{-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in;-webkit-transform:scale(1.24);transform:scale(1.24)}89%{-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out;-webkit-transform:scale(1);transform:scale(1)}95%{-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in;-webkit-transform:scale(1.04);transform:scale(1.04)}100%{-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out;-webkit-transform:scale(1);transform:scale(1)}}@-webkit-keyframes jelly{0%{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}30%{-webkit-transform:scale3d(.75,1.25,1);transform:scale3d(.75,1.25,1)}40%{-webkit-transform:scale3d(1.25,.75,1);transform:scale3d(1.25,.75,1)}50%{-webkit-transform:scale3d(.85,1.15,1);transform:scale3d(.85,1.15,1)}65%{-webkit-transform:scale3d(1.05,.95,1);transform:scale3d(1.05,.95,1)}75%{-webkit-transform:scale3d(.95,1.05,1);transform:scale3d(.95,1.05,1)}100%{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}}@keyframes jelly{0%{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}30%{-webkit-transform:scale3d(.75,1.25,1);transform:scale3d(.75,1.25,1)}40%{-webkit-transform:scale3d(1.25,.75,1);transform:scale3d(1.25,.75,1)}50%{-webkit-transform:scale3d(.85,1.15,1);transform:scale3d(.85,1.15,1)}65%{-webkit-transform:scale3d(1.05,.95,1);transform:scale3d(1.05,.95,1)}75%{-webkit-transform:scale3d(.95,1.05,1);transform:scale3d(.95,1.05,1)}100%{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}}@-webkit-keyframes rotate{0%{opacity:0;-webkit-transform:translateZ(-200px) rotate(-45deg);transform:translateZ(-200px) rotate(-45deg)}100%{opacity:1;-webkit-transform:translateZ(0) rotate(0);transform:translateZ(0) rotate(0)}}@keyframes rotate{0%{opacity:0;-webkit-transform:translateZ(-200px) rotate(-45deg);transform:translateZ(-200px) rotate(-45deg)}100%{opacity:1;-webkit-transform:translateZ(0) rotate(0);transform:translateZ(0) rotate(0)}}@-webkit-keyframes pulse{0%{box-shadow:0 0 0 0 #bdc3c7}100%{box-shadow:0 0 0 1.5em rgba(189,195,199,0)}}@keyframes pulse{0%{box-shadow:0 0 0 0 #bdc3c7}100%{box-shadow:0 0 0 1.5em rgba(189,195,199,0)}}.pretty.p-default.p-fill .state label:after{-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1)}.pretty.p-default .state label:after{-webkit-transform:scale(.6);-ms-transform:scale(.6);transform:scale(.6)}.pretty.p-default input:checked~.state label:after{background-color:#bdc3c7!important}.pretty.p-default.p-thick .state label:after,.pretty.p-default.p-thick .state label:before{border-width:calc(1em / 7)}.pretty.p-default.p-thick .state label:after{-webkit-transform:scale(.4)!important;-ms-transform:scale(.4)!important;transform:scale(.4)!important}.pretty.p-icon .state .icon{position:absolute;font-size:1em;width:calc(1em + 2px);height:calc(1em + 2px);left:0;z-index:1;text-align:center;line-height:normal;top:calc((0% - (100% - 1em)) - 8%);border:1px solid transparent;opacity:0}.pretty.p-icon .state .icon:before{margin:0;width:100%;height:100%;text-align:center;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-flex:1;-ms-flex:1;flex:1;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;line-height:1}.pretty.p-icon input:checked~.state .icon{opacity:1}.pretty.p-icon input:checked~.state label:before{border-color:#5a656b}.pretty.p-svg .state .svg{position:absolute;font-size:1em;width:calc(1em + 2px);height:calc(1em + 2px);left:0;z-index:1;text-align:center;line-height:normal;top:calc((0% - (100% - 1em)) - 8%);border:1px solid transparent;opacity:0}.pretty.p-svg .state svg{margin:0;width:100%;height:100%;text-align:center;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-flex:1;-ms-flex:1;flex:1;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;line-height:1}.pretty.p-svg input:checked~.state .svg{opacity:1}.pretty.p-image .state img{opacity:0;position:absolute;width:calc(1em + 2px);height:calc(1em + 2px);top:0;top:calc((0% - (100% - 1em)) - 8%);left:0;z-index:0;text-align:center;line-height:normal;-webkit-transform:scale(.8);-ms-transform:scale(.8);transform:scale(.8)}.pretty.p-image input:checked~.state img{opacity:1}.pretty.p-switch input{min-width:2em}.pretty.p-switch .state{position:relative}.pretty.p-switch .state:before{content:'';border:1px solid #bdc3c7;border-radius:60px;width:2em;box-sizing:unset;height:calc(1em + 2px);position:absolute;top:0;top:calc((0% - (100% - 1em)) - 16%);z-index:0;transition:all .5s ease}.pretty.p-switch .state label{text-indent:2.5em}.pretty.p-switch .state label:after,.pretty.p-switch .state label:before{transition:all .5s ease;border-radius:100%;left:0;border-color:transparent;-webkit-transform:scale(.8);-ms-transform:scale(.8);transform:scale(.8)}.pretty.p-switch .state label:after{background-color:#bdc3c7!important}.pretty.p-switch input:checked~.state:before{border-color:#5a656b}.pretty.p-switch input:checked~.state label:before{opacity:0}.pretty.p-switch input:checked~.state label:after{background-color:#5a656b!important;left:1em}.pretty.p-switch.p-fill input:checked~.state:before{border-color:#5a656b;background-color:#5a656b!important}.pretty.p-switch.p-fill input:checked~.state label:before{opacity:0}.pretty.p-switch.p-fill input:checked~.state label:after{background-color:#fff!important;left:1em}.pretty.p-switch.p-slim .state:before{height:.1em;background:#bdc3c7!important;top:calc(50% - .1em)}.pretty.p-switch.p-slim input:checked~.state:before{border-color:#5a656b;background-color:#5a656b!important}.pretty.p-has-hover input:hover~.state:not(.p-is-hover){display:none}.pretty.p-has-hover input:hover~.state.p-is-hover{display:block}.pretty.p-has-hover input:hover~.state.p-is-hover .icon{display:block}.pretty.p-has-focus input:focus~.state label:before{box-shadow:0 0 3px 0 #bdc3c7}.pretty.p-has-indeterminate input[type=checkbox]:indeterminate~.state:not(.p-is-indeterminate){display:none}.pretty.p-has-indeterminate input[type=checkbox]:indeterminate~.state.p-is-indeterminate{display:block}.pretty.p-has-indeterminate input[type=checkbox]:indeterminate~.state.p-is-indeterminate .icon{display:block;opacity:1}.pretty.p-toggle .state.p-on{opacity:0;display:none}.pretty.p-toggle .state .icon,.pretty.p-toggle .state .svg,.pretty.p-toggle .state img,.pretty.p-toggle .state.p-off{opacity:1;display:inherit}.pretty.p-toggle .state.p-off .icon{color:#bdc3c7}.pretty.p-toggle input:checked~.state.p-on{opacity:1;display:inherit}.pretty.p-toggle input:checked~.state.p-off{opacity:0;display:none}.pretty.p-plain input:checked~.state label:before,.pretty.p-plain.p-toggle .state label:before{content:none}.pretty.p-plain.p-plain .icon{-webkit-transform:scale(1.1);-ms-transform:scale(1.1);transform:scale(1.1)}.pretty.p-round .state label:after,.pretty.p-round .state label:before{border-radius:100%}.pretty.p-round.p-icon .state .icon{border-radius:100%;overflow:hidden}.pretty.p-round.p-icon .state .icon:before{-webkit-transform:scale(.8);-ms-transform:scale(.8);transform:scale(.8)}.pretty.p-curve .state label:after,.pretty.p-curve .state label:before{border-radius:20%}.pretty.p-smooth .icon,.pretty.p-smooth .svg,.pretty.p-smooth label:after,.pretty.p-smooth label:before{transition:all .5s ease}.pretty.p-smooth input:checked+.state label:after{transition:all .3s ease}.pretty.p-smooth input:checked+.state .icon,.pretty.p-smooth input:checked+.state .svg,.pretty.p-smooth input:checked+.state img{-webkit-animation:zoom .2s ease;animation:zoom .2s ease}.pretty.p-smooth.p-default input:checked+.state label:after{-webkit-animation:zoom .2s ease;animation:zoom .2s ease}.pretty.p-smooth.p-plain input:checked+.state label:before{content:'';-webkit-transform:scale(0);-ms-transform:scale(0);transform:scale(0);transition:all .5s ease}.pretty.p-tada:not(.p-default) input:checked+.state .icon,.pretty.p-tada:not(.p-default) input:checked+.state .svg,.pretty.p-tada:not(.p-default) input:checked+.state img,.pretty.p-tada:not(.p-default) input:checked+.state label:after,.pretty.p-tada:not(.p-default) input:checked+.state label:before{-webkit-animation:tada .7s cubic-bezier(.25,.46,.45,.94) 1 alternate;animation:tada .7s cubic-bezier(.25,.46,.45,.94) 1 alternate;opacity:1}.pretty.p-jelly:not(.p-default) input:checked+.state .icon,.pretty.p-jelly:not(.p-default) input:checked+.state .svg,.pretty.p-jelly:not(.p-default) input:checked+.state img,.pretty.p-jelly:not(.p-default) input:checked+.state label:after,.pretty.p-jelly:not(.p-default) input:checked+.state label:before{-webkit-animation:jelly .7s cubic-bezier(.25,.46,.45,.94);animation:jelly .7s cubic-bezier(.25,.46,.45,.94);opacity:1}.pretty.p-jelly:not(.p-default) input:checked+.state label:before{border-color:transparent}.pretty.p-rotate:not(.p-default) input:checked~.state .icon,.pretty.p-rotate:not(.p-default) input:checked~.state .svg,.pretty.p-rotate:not(.p-default) input:checked~.state img,.pretty.p-rotate:not(.p-default) input:checked~.state label:after,.pretty.p-rotate:not(.p-default) input:checked~.state label:before{-webkit-animation:rotate .7s cubic-bezier(.25,.46,.45,.94);animation:rotate .7s cubic-bezier(.25,.46,.45,.94);opacity:1}.pretty.p-rotate:not(.p-default) input:checked~.state label:before{border-color:transparent}.pretty.p-pulse:not(.p-switch) input:checked~.state label:before{-webkit-animation:pulse 1s;animation:pulse 1s}.pretty input[disabled]{cursor:not-allowed;display:none}.pretty input[disabled]~*{opacity:.5}.pretty.p-locked input{display:none;cursor:not-allowed}.pretty input:checked~.state.p-primary label:after,.pretty.p-toggle .state.p-primary label:after{background-color:#428bca!important}.pretty input:checked~.state.p-primary .icon,.pretty input:checked~.state.p-primary .svg,.pretty.p-toggle .state.p-primary .icon,.pretty.p-toggle .state.p-primary .svg{color:#fff;stroke:#fff}.pretty input:checked~.state.p-primary-o label:before,.pretty.p-toggle .state.p-primary-o label:before{border-color:#428bca}.pretty input:checked~.state.p-primary-o label:after,.pretty.p-toggle .state.p-primary-o label:after{background-color:transparent}.pretty input:checked~.state.p-primary-o .icon,.pretty input:checked~.state.p-primary-o .svg,.pretty input:checked~.state.p-primary-o svg,.pretty.p-toggle .state.p-primary-o .icon,.pretty.p-toggle .state.p-primary-o .svg,.pretty.p-toggle .state.p-primary-o svg{color:#428bca;stroke:#428bca}.pretty.p-default:not(.p-fill) input:checked~.state.p-primary-o label:after{background-color:#428bca!important}.pretty.p-switch input:checked~.state.p-primary:before{border-color:#428bca}.pretty.p-switch.p-fill input:checked~.state.p-primary:before{background-color:#428bca!important}.pretty.p-switch.p-slim input:checked~.state.p-primary:before{border-color:#245682;background-color:#245682!important}.pretty input:checked~.state.p-info label:after,.pretty.p-toggle .state.p-info label:after{background-color:#5bc0de!important}.pretty input:checked~.state.p-info .icon,.pretty input:checked~.state.p-info .svg,.pretty.p-toggle .state.p-info .icon,.pretty.p-toggle .state.p-info .svg{color:#fff;stroke:#fff}.pretty input:checked~.state.p-info-o label:before,.pretty.p-toggle .state.p-info-o label:before{border-color:#5bc0de}.pretty input:checked~.state.p-info-o label:after,.pretty.p-toggle .state.p-info-o label:after{background-color:transparent}.pretty input:checked~.state.p-info-o .icon,.pretty input:checked~.state.p-info-o .svg,.pretty input:checked~.state.p-info-o svg,.pretty.p-toggle .state.p-info-o .icon,.pretty.p-toggle .state.p-info-o .svg,.pretty.p-toggle .state.p-info-o svg{color:#5bc0de;stroke:#5bc0de}.pretty.p-default:not(.p-fill) input:checked~.state.p-info-o label:after{background-color:#5bc0de!important}.pretty.p-switch input:checked~.state.p-info:before{border-color:#5bc0de}.pretty.p-switch.p-fill input:checked~.state.p-info:before{background-color:#5bc0de!important}.pretty.p-switch.p-slim input:checked~.state.p-info:before{border-color:#2390b0;background-color:#2390b0!important}.pretty input:checked~.state.p-success label:after,.pretty.p-toggle .state.p-success label:after{background-color:#5cb85c!important}.pretty input:checked~.state.p-success .icon,.pretty input:checked~.state.p-success .svg,.pretty.p-toggle .state.p-success .icon,.pretty.p-toggle .state.p-success .svg{color:#fff;stroke:#fff}.pretty input:checked~.state.p-success-o label:before,.pretty.p-toggle .state.p-success-o label:before{border-color:#5cb85c}.pretty input:checked~.state.p-success-o label:after,.pretty.p-toggle .state.p-success-o label:after{background-color:transparent}.pretty input:checked~.state.p-success-o .icon,.pretty input:checked~.state.p-success-o .svg,.pretty input:checked~.state.p-success-o svg,.pretty.p-toggle .state.p-success-o .icon,.pretty.p-toggle .state.p-success-o .svg,.pretty.p-toggle .state.p-success-o svg{color:#5cb85c;stroke:#5cb85c}.pretty.p-default:not(.p-fill) input:checked~.state.p-success-o label:after{background-color:#5cb85c!important}.pretty.p-switch input:checked~.state.p-success:before{border-color:#5cb85c}.pretty.p-switch.p-fill input:checked~.state.p-success:before{background-color:#5cb85c!important}.pretty.p-switch.p-slim input:checked~.state.p-success:before{border-color:#357935;background-color:#357935!important}.pretty input:checked~.state.p-warning label:after,.pretty.p-toggle .state.p-warning label:after{background-color:#f0ad4e!important}.pretty input:checked~.state.p-warning .icon,.pretty input:checked~.state.p-warning .svg,.pretty.p-toggle .state.p-warning .icon,.pretty.p-toggle .state.p-warning .svg{color:#fff;stroke:#fff}.pretty input:checked~.state.p-warning-o label:before,.pretty.p-toggle .state.p-warning-o label:before{border-color:#f0ad4e}.pretty input:checked~.state.p-warning-o label:after,.pretty.p-toggle .state.p-warning-o label:after{background-color:transparent}.pretty input:checked~.state.p-warning-o .icon,.pretty input:checked~.state.p-warning-o .svg,.pretty input:checked~.state.p-warning-o svg,.pretty.p-toggle .state.p-warning-o .icon,.pretty.p-toggle .state.p-warning-o .svg,.pretty.p-toggle .state.p-warning-o svg{color:#f0ad4e;stroke:#f0ad4e}.pretty.p-default:not(.p-fill) input:checked~.state.p-warning-o label:after{background-color:#f0ad4e!important}.pretty.p-switch input:checked~.state.p-warning:before{border-color:#f0ad4e}.pretty.p-switch.p-fill input:checked~.state.p-warning:before{background-color:#f0ad4e!important}.pretty.p-switch.p-slim input:checked~.state.p-warning:before{border-color:#c77c11;background-color:#c77c11!important}.pretty input:checked~.state.p-danger label:after,.pretty.p-toggle .state.p-danger label:after{background-color:#d9534f!important}.pretty input:checked~.state.p-danger .icon,.pretty input:checked~.state.p-danger .svg,.pretty.p-toggle .state.p-danger .icon,.pretty.p-toggle .state.p-danger .svg{color:#fff;stroke:#fff}.pretty input:checked~.state.p-danger-o label:before,.pretty.p-toggle .state.p-danger-o label:before{border-color:#d9534f}.pretty input:checked~.state.p-danger-o label:after,.pretty.p-toggle .state.p-danger-o label:after{background-color:transparent}.pretty input:checked~.state.p-danger-o .icon,.pretty input:checked~.state.p-danger-o .svg,.pretty input:checked~.state.p-danger-o svg,.pretty.p-toggle .state.p-danger-o .icon,.pretty.p-toggle .state.p-danger-o .svg,.pretty.p-toggle .state.p-danger-o svg{color:#d9534f;stroke:#d9534f}.pretty.p-default:not(.p-fill) input:checked~.state.p-danger-o label:after{background-color:#d9534f!important}.pretty.p-switch input:checked~.state.p-danger:before{border-color:#d9534f}.pretty.p-switch.p-fill input:checked~.state.p-danger:before{background-color:#d9534f!important}.pretty.p-switch.p-slim input:checked~.state.p-danger:before{border-color:#a02622;background-color:#a02622!important}.pretty.p-bigger .icon,.pretty.p-bigger .img,.pretty.p-bigger .svg,.pretty.p-bigger label:after,.pretty.p-bigger label:before{font-size:1.2em!important;top:calc((0% - (100% - 1em)) - 35%)!important}.pretty.p-bigger label{text-indent:1.7em}@media print{.pretty .state .icon,.pretty .state label:after,.pretty .state label:before,.pretty .state:before{color-adjust:exact;-webkit-print-color-adjust:exact;print-color-adjust:exact}}


.globe-icon {
    margin-right: 20px !important;
}

.badge-home.up1 {
    position: relative;
    top: -12px;
    padding: 4px;
    margin-left: -22px;
    margin-right: 3px;
}


.fa-clean:before {
    width: 24px;
    margin: 0 !important;
    text-align: left;
}

.bg-pink {
    background-color: rgba(241, 60, 110, 0.8);
}

.bg-green {
    background-color: rgba(139, 195, 74, 0.8);
}

.bg-lightblue {
    background-color: rgba(74, 175, 195, 0.8);
}

.bg-blue {
    background-color: rgb(37 160 218);
}

.bg-gold {
    background-color: rgba(195, 190, 74, 0.8);
}

.bg-orange {
    background-color: rgba(255, 140, 0, 0.8);
}

/* the bell's late items (9 Oct 2026: "Late Contributions", NotificationsWebService.GetPendingAtMe) */
.bg-red {
    background-color: rgba(220, 38, 38, 0.85);
}

.bg-skyblue {
    background-color: rgba(135, 206, 235, 0.8);
}

.badge-home {
    display: inline-block;
    min-width: 10px;
    padding: 3px 6px;
    font-size: 11px !important;
    font-weight: normal;
    color: #ffffff;
    line-height: 1;
    vertical-align: baseline;
    white-space: nowrap;
    text-align: center;
    -ms-border-radius: 10px;
    border-radius: 10px;
}

.img-circle, .img-circle img {
    -ms-border-radius: 50%;
    border-radius: 50%;
}

#user-item {
        background-color: #eee;
    margin: -7px -13px 2px -14px;
    padding: 10px;
    display: block;
    border-radius: 5px 5px 0 0;
}

#user-item:hover {
    background-color: #e1e1e1;
}

.img-user-link {
    -ms-border-radius: 50%;
    border-radius: 50%;
    width: 38px;
    height: 38px;
    /*margin-bottom: -13px;*/
    display: inline-block;
}

#right-nav a:hover {
    color: white !important;
}

#right-nav .hover-effect {
    height: 52px;
    display: inline-block;
    margin-top: -7px;
    vertical-align: top;
    padding-top: 20px;
    box-sizing: border-box;
    padding-left: 5px;
}

    #right-nav .hover-effect:hover {
        background-color: rgba(255, 255, 255, .3);
    }


.highlight {
    background-color: #d3ecd8!important;
}

.highlight:hover {
    background-color: #e3f1e6!important;
}

/*big*/
.big-number-section {
    text-align: center;
    text-transform: uppercase;
    float: left;
    margin: 20px 13px;
}

    .big-number-section .big-number {
        font-size: 42px;
        margin-bottom: 10px;
        font-weight: 500;
        opacity: .6;
    }

        .big-number-section .big-number:hover {
            opacity: 1;
        }


.no-border-right{ border-right: none !important;}

.bigger-number-section {
    text-align: center;
    text-transform: uppercase;
    float: left;
    /*padding: 0 30px;*/
    border-right: dotted 1px rgba(255, 255, 255, 0.25);
}
    .bigger-number-section .big-number {
        font-size: 24px;
        margin-bottom: 4px;
        font-weight: 100;
        margin-top: 8px;
        letter-spacing: -1px;
    }

    .bigger-number-section .text-down {
        font-weight: 300;
        font-size: 10px;
    }

    .bigger-number-section .text-up {
        font-weight: 700;
        font-size: 12px;
    }

    .bigger-number-section .big-number:hover {
        opacity: 0.8;
    }


/*day/month big*/
.day-big {
    font-size: 32px;
    margin-top: -5px;
    margin-bottom: -10px;
    letter-spacing: -2px;
    font-weight: 100;
    line-height: 1.42857143em;
}

.month-big {
    text-transform: uppercase;
    font-weight: 300;
    font-size: 16px;
    line-height: 1.42857143em;
}

.time-big {
    text-transform: uppercase;
    font-size: 12px;
}

.timeline {
    position: relative;
    z-index: 100;
    position: relative;
    /*float: left;*/
    width: 100%;
    margin-bottom: 30px;
}

    .timeline:before {
        content: " ";
        position: absolute;
        top: 0;
        bottom: 0;
        left: 20px;
        width: 1px;
        background-color: #e5e5e5;
    }

    .timeline .timeline-panel {
        margin: 0 0 25px 50px;
        position: relative;
    }


.bubble {
    max-width: 70%;
    min-width: 30%;
    width: fit-content;
    width: -moz-fit-content;
    width: -moz-max-content;
    padding: 12px 18px;
    border-radius: 10px;
    box-sizing: border-box;
}

    .bubble:after {
        content: ' ';
        position: absolute;
        width: 0;
        height: 0;
        left: -9px;
        right: auto;
        top: 5px;
        bottom: auto;
        border: 10px solid;
        border-right-color: transparent;
        border-bottom-color: transparent;
        border-left-color: transparent;
    }



.timeline .timeline-panel p {
    margin: 4px 0;
}

.timeline .timeline-panel b {
    margin-bottom: -4px;
}

.timeline .node:first-child .timeline-panel {
    margin-top: 0;
}

.timeline .node:last-child .timeline-panel {
    margin-bottom: 0;
}




/*timeline icons*/

.timeline-badge-general:before {
    font-size: 18px;
    font-weight: normal !important;
    font-family: FontAwesome;
    margin-left: 13px;
    content: "\f111";
    line-height: 20px;
    position: relative;
    float: left;
    color: #455963 !important;
}

.timeline-badge-change:before {
    font-size: 18px;
    font-weight: normal !important;
    font-family: FontAwesome;
    margin-left: 13px;
    content: "\f14b";
    line-height: 18px;
    position: relative;
    float: left;
    color: #455963 !important;
    background-color: white;
}

.timeline-badge-system:before {
    font-size: 18px;
    font-weight: normal !important;
    font-family: FontAwesome;
    margin-left: 13px;
    content: "\f05a";
    line-height: 18px;
    position: relative;
    float: left;
    color: #455963 !important;
    background-color: white;
}

.timeline-badge-meeting:before {
    font-size: 18px;
    font-weight: normal !important;
    font-family: FontAwesome;
    margin-left: 10px;
    content: "\f2b5";
    line-height: 20px;
    position: relative;
    float: left;
    background-color: white;
}

.timeline-badge-call:before {
    font-size: 22px;
    font-weight: normal !important;
    font-family: FontAwesome;
    margin-left: 12px;
    content: "\f098";
    line-height: 19px;
    position: relative;
    float: left;
    background-color: white;
}

.timeline-badge-email:before {
    font-size: 18px;
    font-weight: normal !important;
    font-family: FontAwesome;
    margin-left: 12px;
    content: "\f0e0";
    line-height: 19px;
    position: relative;
    float: left;
    background-color: white;
}


.note-icon {
    float: left;
    background-color: #ffffff;
    border-radius: 50%;
    margin-left: -13px;
    margin-top: -7px;
}

.img-bubble {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    margin-bottom: -30px;
    position: relative;
    margin-left: 5px;
}


/* ================================== GREEN =================================== */

.timeline-icon-green:before {
    color: #379a62 !important;
}

.bubble-green {
    background-color: #dff2da;
}

    .bubble-green:after {
        border-top-color: #dff2da;
    }



/* ================================== BLUE ===================================*/

.timeline-icon-blue:before {
    color: #52a9f1 !important;
    cursor: pointer;
}

.bubble-blue {
    background-color: #dceaf5;
}

    .bubble-blue:after {
        border-top-color: #dceaf5;
    }



/* ================================== RED ===================================*/

.timeline-icon-red:before {
    color: crimson !important;
    cursor: pointer;
}

.bubble-red {
    background-color: #fbe2e7;
}

    .bubble-red:after {
        border-top-color: #fbe2e7;
    }


/* ================================== YELLOW ===================================*/

.timeline-icon-yellow:before {
    color: #9c9327 !important;
}

.bubble-yellow {
    background-color: #f9f2a2;
}

    .bubble-yellow:after {
        border-top-color: #f9f2a2;
    }


/* ================================== GRAY ===================================*/

.bubble-gray {
    background-color: #f5f5f5;
}

    .bubble-gray:after {
        border-top-color: #f5f5f5;
    }

.bg-darkgray-alt {
    background-color: #3e555f;
    color: white;
}

.bg-petrol-alt {
    background-color: rgba(12, 102, 136, 0.8);
    color: white;
}

.bg-midblue-alt {
    background-color: #036c9c;
}

.bg-light-blue {
    background-color: #f7f7f7;
    color: white;
}

.bg-navy-alt {
    background-color: #425c67;
    color: white;
}

.bg-success-alt {
    background-color: rgba(52, 199, 59, 0.7);
    color: white;
}

.bg-info-alt {
    background-color: rgba(28, 168, 221, 0.8);
    color: white;
}

.bg-notification-alt {
    background-color: rgba(241, 60, 110, 0.8);
    color: white;
}

.panel {
    display: inline-block;
    box-shadow: none;
    -webkit-box-shadow: 0 1px 1px rgba(0,0,0,.05);
    box-shadow: 0 1px 1px rgba(0,0,0,.05);
    border-radius: 14px;
    /*border: 1px solid #E6EBEC;*/
    padding: 20px;
    box-sizing: border-box;
    vertical-align: top;
    text-align: center;
}

.panel-header {
    font-size: 18px;
    text-transform: uppercase;
    font-weight: 300;
}

.advanced-panel .kpi-top {
    height: 90px;
    width: 100%;
    border-radius: 14px 14px 0 0;
    text-align: center;
    padding: 20px;
    padding-top: 15px;
    box-sizing: border-box;
    vertical-align: top;
    text-align: center;
}

.advanced-panel .kpi-top .RadButton_Material.RadRadioButton .rbText {
    color: rgba(255, 255, 255, 0.65) !important;
}

    .advanced-panel .kpi-top .nav .RadButton_Material.RadRadioButton .rbText {
        color: #455A64 !important;
    }

.advanced-panel .panel-content {
    border-radius: 0 0 14px 14px;
    padding: 20px 30px 10px;
}

.advanced-panel .sub-head {
    font-weight: 700;
    font-size: 12px;
    text-align: center;
    text-transform: uppercase;
    /*color: white;*/
    margin-bottom: 10px;
}

/* ReSharper disable once InvalidValue */
/* ==========================================================================
   LiveChat V2 - the "who is online" icon + popover of the top bar and the chat dock.
   Bundled with every other file of ~/StyleSheets (no link needed). Ink follows the site
   body colour; the only colours are the presence dots and the unread badge.
   ========================================================================== */

/* ---- bar icon ---- */
.tb2 .lc2 { display: inline-flex; align-items: center; }
.tb2 .lc2-btn { position: relative; }
.tb2 .lc2-me { position: absolute; left: 7px; bottom: 7px; width: 8px; height: 8px; border-radius: 50%; background: #9aa7b4; box-shadow: 0 0 0 2px rgba(0,0,0,.18); }
.lc2-me.st-online, .lc2-st.st-online { background: #22a06b; }
.lc2-me.st-away, .lc2-st.st-away { background: #d97706; }
.lc2-me.st-off, .lc2-st.st-off { background: #b7c0c9; }
.tb2 .lc2-badge { background: #22a06b; }

/* ---- popover ---- */
.lc2-pop { width: 340px; }
.lc2-search { display: flex; align-items: center; gap: 8px; padding: 8px 14px; border-bottom: 1px solid #eef1f4; color: #9aa7b4; }
.lc2-search i:before { margin: 0; }
.lc2-search input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font: inherit; font-size: 12.5px; color: inherit; padding: 2px 0; }
.lc2-search input::placeholder { color: #b7c0c9; }
.lc2-h { display: flex; align-items: center; gap: 6px; padding: 7px 14px 4px; background: #f4f6f8; color: #4a5866; font-size: 10.5px; letter-spacing: .5px; text-transform: uppercase; font-weight: 500; }
.lc2-h span { color: #9aa7b4; font-weight: 400; }
.lc2-row { display: flex; align-items: center; gap: 10px; padding: 7px 14px; border-bottom: 1px solid #f1f3f7; color: inherit; text-decoration: none; }
.lc2-row:last-child { border-bottom: 0; }
.lc2-row:hover { background: #f1f3f7; text-decoration: none; }
.lc2-row.lc2-new b { font-weight: 600; }
.lc2-av { position: relative; flex: 0 0 34px; width: 34px; height: 34px; line-height: 0; }
.lc2-av img, .lc2-av .tb2-noimg { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; display: block; }
.lc2-av .tb2-noimg { display: inline-flex; font-size: 15px; }
.lc2-st { position: absolute; right: -1px; bottom: -1px; width: 11px; height: 11px; border-radius: 50%; border: 2px solid #fff; box-sizing: border-box; background: #b7c0c9; }
.lc2-txt { flex: 1; min-width: 0; line-height: 1.25; }
.lc2-txt b { display: block; font-weight: 500; font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lc2-txt small { display: block; color: #7b8794; font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lc2-meta { flex: 0 0 auto; font-size: 10.5px; color: #9aa7b4; white-space: nowrap; }
.lc2-unread { display: inline-block; min-width: 18px; padding: 0 6px; border-radius: 9px; background: #22a06b; color: #fff; font-size: 10.5px; font-weight: 600; line-height: 18px; text-align: center; font-variant-numeric: tabular-nums; }
.lc2-unread[hidden] { display: none; }
.lc2-empty-row { padding: 16px 14px; color: #9aa7b4; font-size: 12px; line-height: 1.4; }

/* ---- dock ---- */
.lc2-dock { position: fixed; right: 18px; bottom: 0; display: flex; align-items: flex-end; gap: 10px; z-index: 6000; pointer-events: none; }
.lc2-dock[hidden] { display: none; }
.lc2-panel {
    pointer-events: auto; width: 300px; height: 400px; display: flex; flex-direction: column; overflow: hidden;
    background: #fff; border-radius: 12px 12px 0 0; box-shadow: 0 -2px 24px rgba(31,41,51,.22), 0 0 0 1px rgba(0,0,0,.05);
    font-size: 12.5px; line-height: 1.35;
}
.lc2-panel.lc2-min { height: auto; width: 220px; }
.lc2-panel.lc2-min .lc2-body, .lc2-panel.lc2-min .lc2-compose, .lc2-panel.lc2-min .lc2-typing { display: none; }
.lc2-panel.lc2-has-new .lc2-head { background: #eaf7f0; }

.lc2-head { display: flex; align-items: center; gap: 8px; padding: 7px 8px 7px 10px; border-bottom: 1px solid #eef1f4; background: #fafbfc; cursor: pointer; user-select: none; }
.lc2-head .lc2-av { flex-basis: 30px; width: 30px; height: 30px; }
.lc2-head .lc2-av img, .lc2-head .lc2-av .tb2-noimg { width: 30px; height: 30px; }
.lc2-head .lc2-txt b { font-size: 12.5px; }
.lc2-head .lc2-txt small { font-size: 10.5px; }
.lc2-head button { flex: 0 0 auto; border: 0; background: transparent; color: #9aa7b4; width: 24px; height: 24px; border-radius: 50%; cursor: pointer; font: inherit; font-size: 15px; line-height: 1; padding: 0; }
.lc2-head button:hover { background: #e9edf1; color: inherit; }

.lc2-body { flex: 1; overflow: auto; padding: 10px 12px 4px; background: #fff; }
.lc2-more { text-align: center; padding: 0 0 8px; }
.lc2-more[hidden] { display: none; }
.lc2-more a { font-size: 11px; color: #7b8794; text-decoration: none; border-bottom: 1px dotted #b7c0c9; }
.lc2-day { text-align: center; font-size: 10px; color: #9aa7b4; margin: 6px 0 8px; letter-spacing: .3px; }
.lc2-msg { position: relative; max-width: 82%; margin: 0 0 6px; padding: 7px 10px 5px; border-radius: 12px; white-space: pre-wrap; word-wrap: break-word; overflow-wrap: anywhere; }
.lc2-msg.theirs { background: #f1f3f7; border-bottom-left-radius: 4px; margin-right: auto; }
.lc2-msg.mine { background: #e4ecf7; border-bottom-right-radius: 4px; margin-left: auto; }
.lc2-msg time { display: block; font-size: 9.5px; color: #9aa7b4; margin-top: 2px; text-align: right; white-space: nowrap; }
.lc2-msg .lc2-docs { margin-left: 6px; color: #7b8794; text-decoration: none; }
.lc2-msg .lc2-docs i:before { margin: 0; }
.lc2-empty { text-align: center; color: #9aa7b4; padding: 44px 10px; font-size: 12px; }

.lc2-typing { padding: 0 12px 3px; min-height: 15px; font-size: 10.5px; color: #9aa7b4; font-style: italic; }
.lc2-compose { display: flex; align-items: flex-end; gap: 6px; padding: 8px 10px; border-top: 1px solid #eef1f4; background: #fafbfc; }
.lc2-compose textarea { flex: 1; min-width: 0; resize: none; border: 1px solid #e3e7ec; border-radius: 10px; padding: 7px 10px; font: inherit; font-size: 12.5px; line-height: 1.35; max-height: 90px; outline: 0; background: #fff; color: inherit; box-sizing: border-box; }
.lc2-compose textarea:focus { border-color: #b7c0c9; }
.lc2-compose textarea:disabled { opacity: .6; }
.lc2-compose button { flex: 0 0 auto; border: 0; background: var(--csw-theme, #4a5866); color: #fff; border-radius: 10px; height: 32px; padding: 0 12px; cursor: pointer; font: inherit; font-size: 12px; }
.lc2-compose button:hover { filter: brightness(1.08); }

@media (max-width: 760px) {
    .lc2-dock { right: 8px; gap: 6px; }
    .lc2-panel { width: 260px; height: 360px; }
}

/* ReSharper disable once InvalidValue */
/* ==========================================================================
   Messaging V2 (docs/MESSAGING-V2.md section 7; the mockup docs/mockups/messaging-v2.html) - the Messages icon and
   popover of the V2 top bar, the dock, and the thread pieces the ChatV2 control shares (bubbles, day separators, the
   composer, the states). Bundled with every other file of ~/StyleSheets (no link needed). Tokens are the Pages.css
   :root set; the accent is scarce (the unread pill, the send disc, the composer focus ring, links) - bubbles are neutral
   (D1, 18 Sep 2026). Rules are two classes deep so they beat the .rpt element rules on a V2 page.
   ========================================================================== */

/* the hidden attribute must win over every display rule below (an icon hidden in Page mode, a pill at 0, a closed menu) */
.m2 [hidden], .m2-pop [hidden], .m2-dock [hidden], .m2-bar [hidden], .m2[hidden] { display: none !important; }

/* ---- bar icon ---- */
.tb2 .m2-bar { display: inline-flex; align-items: center; }
.tb2 .m2-bar-btn { position: relative; }
.tb2 .m2-me { position: absolute; left: 7px; bottom: 7px; width: 8px; height: 8px; border-radius: 50%; background: #9aa7b4; box-shadow: 0 0 0 2px rgba(0,0,0,.18); }
.m2-me.st-online, .m2-st.st-online { background: #22a06b; }
.m2-me.st-away, .m2-st.st-away { background: #d97706; }
.m2-me.st-off, .m2-st.st-off { background: #b7c0c9; }
.tb2 .m2-badge { background: #22a06b; }
.m2-templates { display: none; }

/* ---- popover ---- */
.m2-pop { width: 340px; }
.m2-pop .m2-find { margin: 10px 12px; }
.m2-pop .tb2-pop-body { max-height: 440px; }

/* the search box (the .rpt-find look) */
.m2-find { display: flex; align-items: center; gap: 8px; height: 32px; padding: 0 10px; background: var(--band, #f6f8fa); border: 1px solid var(--line, #dfe5ea); border-radius: 8px; color: var(--faint, #78909c); }
.m2-find:focus-within { border-color: var(--accent-line, #9dc4d8); background: var(--card, #fff); }
.m2-find i:before { margin: 0; }
.m2-find input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font: inherit; font-size: 12px; color: var(--head, #263238); padding: 2px 0; }
.m2-find input::placeholder { color: var(--faint, #78909c); }

/* section captions and rows (the popover; the list pane in S5) */
.m2-h { display: flex; align-items: center; justify-content: space-between; padding: 5px 14px; background: var(--band, #f6f8fa); color: var(--muted, #607d8b); font-size: 10px; letter-spacing: .06em; text-transform: uppercase; font-weight: 500; }
.m2-h small { font-size: 10px; letter-spacing: 0; text-transform: none; color: var(--faint, #78909c); }
.m2-row { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 10px 14px; border-bottom: 1px solid var(--hair, #eceff2); color: inherit; text-decoration: none; }
.m2-row:last-child { border-bottom: 0; }
.m2-row:hover, .m2-row.is-hover { background: var(--hover, #eef2f6); text-decoration: none; }
.m2-row.is-selected { background: var(--hover, #eef2f6); box-shadow: inset 3px 0 0 var(--accent, #036c9c); }
.m2-row.is-unread .m2-name { font-weight: 700; }
.m2-row.is-unread .m2-preview { color: var(--head, #263238); }
.m2-txt { min-width: 0; line-height: 1.3; }
.m2-name { display: block; font-size: 12px; font-weight: 500; color: var(--head, #263238); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.m2-preview { display: block; font-size: 11px; color: var(--muted, #607d8b); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.m2-meta { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.m2-meta time { font-size: 10px; color: var(--faint, #78909c); white-space: nowrap; }
.m2-unread { display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 6px; border-radius: 9px; background: var(--accent, #036c9c); color: #fff; font-size: 10px; font-weight: 600; line-height: 18px; font-variant-numeric: tabular-nums; }
.m2-unread[hidden] { display: none; }

/* avatars: photo or the neutral glyph, the presence dot on the corner, the group glyph */
.m2-av { position: relative; width: 34px; height: 34px; line-height: 0; flex: 0 0 34px; }
.m2-av img, .m2-av .m2-noimg { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; display: block; }
.m2-av .m2-noimg { display: inline-flex; align-items: center; justify-content: center; background: var(--band-2, #edf1f5); color: var(--muted, #607d8b); font-size: 15px; }
.m2-av .m2-noimg i:before { margin: 0; }
.m2-st { position: absolute; right: -1px; bottom: -1px; width: 11px; height: 11px; border-radius: 50%; border: 2px solid var(--card, #fff); box-sizing: border-box; background: #b7c0c9; }
.m2-st[hidden] { display: none; }

/* states inside a body */
.m2-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 30px 14px; color: var(--muted, #607d8b); font-size: 12px; text-align: center; line-height: 1.45; }
.m2-empty i { font-size: 28px; color: var(--line, #dfe5ea); }
.m2-empty i:before { margin: 0; }
.m2-empty p { margin: 0; }
.m2-loading { display: flex; justify-content: center; gap: 5px; padding: 24px 0; }
.m2-loading i { width: 6px; height: 6px; border-radius: 50%; background: var(--faint, #78909c); animation: m2-dot 1s infinite; }
.m2-loading i:nth-child(2), .m2-typing i:nth-child(2) { animation-delay: .15s; }
.m2-loading i:nth-child(3), .m2-typing i:nth-child(3) { animation-delay: .3s; }
@keyframes m2-dot { 0%, 60%, 100% { transform: translateY(0); opacity: .5; } 30% { transform: translateY(-3px); opacity: 1; } }

/* ---- dock ---- */
.m2-dock { position: fixed; right: 16px; bottom: 0; display: flex; align-items: flex-end; gap: 10px; z-index: 6000; pointer-events: none; }
.m2-dock[hidden] { display: none; }
.m2-panel {
    pointer-events: auto; width: 300px; height: 400px; display: flex; flex-direction: column; overflow: hidden;
    background: var(--card, #fff); border: 1px solid var(--line, #dfe5ea); border-bottom: 0; border-radius: 12px 12px 0 0;
    box-shadow: 0 -4px 22px rgba(20,30,45,.14); font-size: 12px; line-height: 1.5; color: var(--ink, #37474f);
}
.m2-panel.is-min { height: auto; width: 220px; }
.m2-panel.is-min .m2-msgs-wrap, .m2-panel.is-min .m2-compose, .m2-panel.is-min .m2-typing, .m2-panel.is-min [data-m2-expand], .m2-panel.is-min [data-m2-min] { display: none; }
.m2-panel.has-new .m2-head { background: var(--accent-soft, #e4f0f6); }

/* the head (the dock panel; the thread pane in S5 uses the same class at 52px) */
.m2-head { display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 8px 0 10px; background: var(--tint, #fafbfc); border-bottom: 1px solid var(--hair, #eceff2); cursor: pointer; user-select: none; flex-shrink: 0; }
.m2-head .m2-av { width: 26px; height: 26px; flex-basis: 26px; }
.m2-head .m2-av img, .m2-head .m2-av .m2-noimg { width: 26px; height: 26px; font-size: 12px; }
.m2-who { flex: 1; min-width: 0; line-height: 1.25; }
.m2-who b { display: block; font-size: 12px; font-weight: 500; color: var(--head, #263238); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.m2-who small { display: block; font-size: 10px; color: var(--faint, #78909c); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.m2-ico { flex: 0 0 auto; display: inline-grid; place-items: center; width: 24px; height: 24px; border: 0; border-radius: 50%; background: transparent; color: var(--muted, #607d8b); cursor: pointer; font: inherit; padding: 0; text-decoration: none; }
.m2-ico i { font-size: 12px; }
.m2-ico i:before { margin: 0; }
.m2-ico:hover, .m2-ico.is-hover { background: var(--hover, #eef2f6); color: var(--head, #263238); text-decoration: none; }

/* the lines */
.m2-msgs-wrap { flex: 1; min-height: 0; overflow: auto; overflow-anchor: none; padding: 10px 12px; background: var(--card, #fff); }
.m2-msgs { display: flex; flex-direction: column; gap: 6px; }
.m2-more { text-align: center; padding: 0 0 8px; }
.m2-more[hidden] { display: none; }
.m2-more a { font-size: 11px; color: var(--muted, #607d8b); text-decoration: none; border-bottom: 1px dotted var(--faint, #78909c); }
.m2-day { display: flex; align-items: center; gap: 10px; font-size: 10px; color: var(--faint, #78909c); margin: 4px 0; }
.m2-day::before, .m2-day::after { content: ""; flex: 1; height: 1px; background: var(--hair, #eceff2); }
/* the bubble itself is normal flow (the template's own line breaks between its parts must collapse); only the body keeps the
   writer's line breaks */
.m2-msg { position: relative; max-width: 82%; padding: 7px 11px; border-radius: 12px; font-size: 12px; line-height: 1.5; white-space: normal; word-wrap: break-word; overflow-wrap: anywhere; }
.m2-msg .m2-body { white-space: pre-wrap; }
.m2-msg.is-theirs { align-self: flex-start; background: var(--card, #fff); border: 1px solid var(--line, #dfe5ea); border-bottom-left-radius: 4px; }
.m2-msg.is-mine { align-self: flex-end; background: var(--band-2, #edf1f5); color: var(--head, #263238); border-bottom-right-radius: 4px; }
.m2-msg.is-run { margin-top: -4px; }
.m2-msg.is-run.is-theirs { border-top-left-radius: 6px; }
.m2-msg.is-run.is-mine { border-top-right-radius: 6px; }
.m2-msg.is-deleted .m2-body { color: var(--faint, #78909c); font-style: italic; }
.m2-msg time { display: block; font-size: 10px; color: var(--faint, #78909c); text-align: right; margin-top: 3px; white-space: nowrap; }
.m2-msg.no-time time { display: none; }
.m2-msg.no-time:hover time { display: block; }
.m2-from { display: block; font-size: 10px; font-weight: 500; color: var(--muted, #607d8b); margin-bottom: 2px; }
.m2-from[hidden] { display: none; }
.m2-body a { color: var(--accent, #036c9c); text-decoration: none; }
.m2-body a:hover { text-decoration: underline; }
.m2-docs { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.m2-docs[hidden] { display: none; }
.m2-doc { display: inline-flex; align-items: center; gap: 5px; height: 20px; padding: 0 8px; border-radius: 10px; background: var(--band, #f6f8fa); color: var(--ink, #37474f); font-size: 10px; text-decoration: none; white-space: nowrap; }
.m2-doc:hover { background: var(--hover, #eef2f6); text-decoration: none; }
.m2-doc i:before { margin: 0; }
.m2-seen { align-self: flex-end; display: inline-flex; align-items: center; gap: 4px; font-size: 10px; color: var(--faint, #78909c); margin-top: -3px; }
.m2-seen i { font-size: 9px; }
.m2-seen i:before { margin: 0; }
.m2-sys { align-self: center; font-size: 10px; color: var(--faint, #78909c); font-style: italic; text-align: center; }

/* typing / flash line */
.m2-typing { display: flex; align-items: center; gap: 6px; min-height: 20px; padding: 0 12px; font-size: 10px; color: var(--faint, #78909c); font-style: italic; flex-shrink: 0; }
.m2-typing i { display: none; width: 5px; height: 5px; border-radius: 50%; background: var(--faint, #78909c); animation: m2-dot 1s infinite; }
.m2-typing.is-on i { display: inline-block; }
.m2-typing.is-flash { color: #dc2626; font-style: normal; }

/* composer */
.m2-compose { display: flex; align-items: flex-end; gap: 8px; padding: 8px 10px; background: var(--tint, #fafbfc); border-top: 1px solid var(--hair, #eceff2); flex-shrink: 0; }
/* one line = 18px + 7px padding x 2 + the border = 34px, so a single line never scrolls; the script grows it and switches the
   scrollbar on only when the text passes the maximum */
.m2-compose textarea { flex: 1; min-width: 0; resize: none; border: 1px solid var(--line, #dfe5ea); border-radius: 10px; padding: 7px 10px; font: inherit; font-size: 12px; line-height: 18px; min-height: 34px; height: 34px; max-height: 90px; overflow-y: hidden; outline: 0; background: var(--card, #fff); color: var(--head, #263238); box-sizing: border-box; }
.m2-compose textarea::placeholder { color: var(--faint, #78909c); }
.m2-compose textarea:focus { border-color: var(--accent, #036c9c); box-shadow: 0 0 0 2px var(--accent-soft, #e4f0f6); }
.m2-compose textarea:disabled { opacity: .6; }
.m2-send { flex: 0 0 auto; display: inline-grid; place-items: center; width: 28px; height: 28px; border: 0; border-radius: 50%; background: var(--accent, #036c9c); color: #fff; cursor: pointer; font: inherit; padding: 0; }
.m2-send i { font-size: 12px; }
.m2-send i:before { margin: 0; }
.m2-send:hover { filter: brightness(1.08); }
.m2-send:disabled { opacity: .45; cursor: default; }
.m2-compose[hidden] { display: none; }

/* ==========================================================================
   The control (MessagingV2.ascx): the two panes. Sized by its host - the page (the viewport under the bar), the popup
   (the window) or a panel host (100%). Container queries make the SAME control stack its panes under 640px.
   ========================================================================== */
.m2 { display: grid; grid-template-columns: 300px minmax(0, 1fr); background: var(--card, #fff); border: 1px solid var(--line, #dfe5ea); border-radius: 12px; overflow: hidden; color: var(--ink, #37474f); font-size: 12px; line-height: 1.5; position: relative; container-type: inline-size; container-name: m2; }
.m2.is-page { height: calc(100vh - var(--m2-chrome, 190px)); min-height: 520px; }
.m2.is-panel { height: 100%; }
.m2.is-pop { height: 100vh; min-height: 0; border: 0; border-radius: 0; }
.rpt .m2 a, .rpt .m2 button { font: inherit; }

/* list pane */
.m2 .m2-list { display: flex; flex-direction: column; min-height: 0; border-right: 1px solid var(--hair, #eceff2); }
.m2 .m2-list-head { display: flex; align-items: center; gap: 6px; padding: 12px 12px 8px; }
.m2 .m2-list-head .m2-find { flex: 1; margin: 0; }
.m2 .m2-ico-lg { width: 28px; height: 28px; }
.m2 .m2-ico-lg i { font-size: 14px; }
.m2 .m2-chips { display: flex; gap: 6px; padding: 0 12px 10px; }
.m2 .m2-chip { height: 22px; padding: 0 10px; border: 1px solid var(--line, #dfe5ea); border-radius: 11px; background: var(--card, #fff); color: var(--muted, #607d8b); font-size: 11px; font-weight: 500; display: inline-flex; align-items: center; gap: 5px; cursor: pointer; }
.m2 .m2-chip:hover { background: var(--hover, #eef2f6); }
.m2 .m2-chip.is-on { background: var(--accent-soft, #e4f0f6); border-color: var(--accent-line, #9dc4d8); color: var(--accent-ink, #02577e); }
.m2 .m2-chip small { font-size: 10px; font-weight: 400; color: var(--faint, #78909c); }
.m2 .m2-chip.is-on small { color: var(--accent-ink, #02577e); }
.m2 .m2-chip small[hidden] { display: none; }
.m2 .m2-rows { flex: 1; min-height: 0; overflow: auto; }
.m2 .m2-rows .m2-row[hidden] { display: none; }
.m2 .m2-rows-more { text-align: center; padding: 8px; border-top: 1px solid var(--hair, #eceff2); }
.m2 .m2-rows-more[hidden] { display: none; }
.m2 .m2-rows-more a { font-size: 11px; color: var(--muted, #607d8b); text-decoration: none; border-bottom: 1px dotted var(--faint, #78909c); }
.m2 .m2-row.is-skeleton { pointer-events: none; }
.m2 .m2-row.is-skeleton .m2-av img { display: none; }
.m2 .m2-row.is-skeleton .m2-av, .m2 .m2-row.is-skeleton .m2-name, .m2 .m2-row.is-skeleton .m2-preview { background: linear-gradient(90deg, var(--band-2, #edf1f5) 25%, var(--hover, #eef2f6) 50%, var(--band-2, #edf1f5) 75%); background-size: 200% 100%; animation: m2-shimmer 1.4s infinite; border-radius: 6px; color: transparent; }
.m2 .m2-row.is-skeleton .m2-av { border-radius: 50%; }
.m2 .m2-row.is-skeleton .m2-name { height: 9px; width: 55%; margin: 3px 0; }
.m2 .m2-row.is-skeleton .m2-preview { height: 9px; width: 85%; margin: 3px 0; }
.m2 .m2-row.is-skeleton .m2-st { display: none; }
@keyframes m2-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

/* thread pane */
.m2 .m2-thread { display: flex; flex-direction: column; min-height: 0; position: relative; }
.m2 .m2-pane-head { height: 52px; padding: 0 12px 0 16px; cursor: default; }
.m2 .m2-pane-head .m2-av { width: 34px; height: 34px; flex-basis: 34px; }
.m2 .m2-pane-head .m2-av img, .m2 .m2-pane-head .m2-av .m2-noimg { width: 34px; height: 34px; font-size: 15px; }
.m2 .m2-pane-head .m2-who b { font-size: 13px; }
.m2 .m2-head-tools { margin-left: auto; display: flex; gap: 2px; position: relative; }
.m2 .m2-head-tools .m2-ico { width: 28px; height: 28px; }
.m2 .m2-head-tools .m2-ico i { font-size: 13px; }
.m2 .m2-back { display: none; margin-left: -6px; }
.m2 .m2-menu { position: absolute; right: 0; top: 34px; background: var(--card, #fff); border: 1px solid var(--line, #dfe5ea); border-radius: 8px; box-shadow: 0 6px 20px rgba(20,30,45,.12); padding: 4px 0; min-width: 190px; z-index: 3; }
.m2 .m2-menu[hidden] { display: none; }
.m2 .m2-menu a { display: flex; align-items: center; gap: 8px; padding: 7px 12px; font-size: 11px; color: var(--ink, #37474f); text-decoration: none; white-space: nowrap; }
.m2 .m2-menu a:hover { background: var(--hover, #eef2f6); }
.m2 .m2-menu a.is-danger { color: #dc2626; }
.m2 .m2-menu a i { width: 14px; text-align: center; color: var(--faint, #78909c); }
.m2 .m2-menu a i:before { margin: 0; }
.m2 .m2-thread .m2-msgs-wrap { padding: 12px 16px; }
.m2 .m2-thread .m2-msgs { gap: 8px; }
.m2 .m2-thread .m2-msg { max-width: 68%; }
.m2 .m2-thread .m2-compose { padding: 10px 14px; }
.m2 .m2-thread .m2-compose textarea { max-height: 110px; min-height: 36px; height: 36px; padding: 8px 12px; }
.m2 .m2-thread .m2-send { width: 32px; height: 32px; }
.m2 .m2-count { font-size: 10px; color: var(--faint, #78909c); align-self: center; white-space: nowrap; }
.m2 .m2-count.is-over { color: #dc2626; }
.m2 .m2-count[hidden] { display: none; }

/* the pane's states: pick (nothing selected), open, gone (not mine / hidden) */
.m2 .m2-state { display: none; flex: 1; }
.m2 .m2-thread[data-m2-state="pick"] .m2-state[data-m2-empty="pick"], .m2 .m2-thread[data-m2-state="gone"] .m2-state[data-m2-empty="gone"] { display: flex; }
.m2 .m2-thread[data-m2-state="pick"] .m2-pane-head, .m2 .m2-thread[data-m2-state="pick"] .m2-msgs-wrap, .m2 .m2-thread[data-m2-state="pick"] .m2-typing, .m2 .m2-thread[data-m2-state="pick"] .m2-compose,
.m2 .m2-thread[data-m2-state="gone"] .m2-pane-head, .m2 .m2-thread[data-m2-state="gone"] .m2-msgs-wrap, .m2 .m2-thread[data-m2-state="gone"] .m2-typing, .m2 .m2-thread[data-m2-state="gone"] .m2-compose { display: none; }
.m2 .m2-empty small { font-size: 11px; color: var(--faint, #78909c); max-width: 34ch; }

/* the toast: the one dark surface, four seconds */
.m2 .m2-toast { position: absolute; left: 50%; bottom: 70px; transform: translateX(-50%); background: var(--head, #263238); color: #fff; font-size: 11px; padding: 8px 14px; border-radius: 8px; box-shadow: 0 6px 20px rgba(20,30,45,.2); white-space: nowrap; z-index: 4; }
.m2 .m2-toast[hidden] { display: none; }

/* narrow hosts (the 420px popup, a side panel): the panes stack, the thread slides over the list with Back */
@container m2 (max-width: 900px) { .m2 { grid-template-columns: 260px minmax(0, 1fr); } }
@container m2 (max-width: 640px) {
    .m2 { grid-template-columns: minmax(0, 1fr); }
    .m2 .m2-list, .m2 .m2-thread { grid-area: 1 / 1; }
    .m2 .m2-list { border-right: 0; }
    .m2 .m2-thread { display: none; }
    .m2.is-open .m2-thread { display: flex; }
    .m2.is-open .m2-list { display: none; }
    .m2 .m2-back { display: inline-grid; }
    .m2 .m2-thread .m2-msg { max-width: 82%; }
}

@media (prefers-reduced-motion: reduce) { .m2-loading i, .m2-typing i, .m2 .m2-row.is-skeleton .m2-av, .m2 .m2-row.is-skeleton .m2-name, .m2 .m2-row.is-skeleton .m2-preview { animation: none; } }
@media (max-width: 640px) { .m2-dock { right: 8px; gap: 6px; } .m2-panel { width: 260px; height: 360px; } }

/* NotesV2.css - the Notes & Activities V2 windows (docs/NOTES-V2-DECISIONS.md, docs/NOTES-V2.md), 15 Sep 2026.
   Bundled with every other StyleSheets/*.css by Global.asax, so nothing registers it. The two windows sit outside .rpt (RadWindows on
   the V2 masters only), so every rule here hangs off .nv, .nv-win or .nv-st. Pages.css tokens; inline SVG icons (.nv-i). */

/* ---- the windows: the record window's no-title strip and disc X (Pages.css section 6, .rw-N); the log above the record window
   (9000 = NoteForm's tier), the form above the log ---- */
div.nv-win { z-index: 9000 !important; }
div.nv-form-win { z-index: 9010 !important; }
.RadWindow.nv-win .rwTitleBar { padding: 0; }
.RadWindow.nv-win .rwTitleBar .rwTitleWrapper { height: 28px; padding: 0; line-height: 28px; }
.RadWindow.nv-win .rwTitle { display: none; }
.RadWindow.nv-win .rwContent { padding: 0 !important; overflow: hidden !important; }
.RadWindow.nv-win .rwCommands { top: -16px; right: -16px; margin: 0; }
.RadWindow.nv-win .rwCommands .rwListItem { margin: 0; }
.RadWindow.nv-win .rwCloseButton { box-sizing: border-box; width: 30px; height: 30px; padding: 0; border: 1px solid var(--line); border-radius: 50%; background: var(--band-2); color: var(--muted) !important; display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 1px 3px rgba(0, 0, 0, .12); }
.RadWindow.nv-win .rwCloseButton:hover { background: var(--hover); border-color: #cfd8dc; color: var(--head) !important; }
.RadWindow.nv-win .rwCloseButton:before { font-size: 14px; }

/* ---- the control: .nv, a column that fills its window; the log (or the form body) is the only scrolling region ---- */
.nv { position: relative; display: flex; flex-direction: column; min-height: 0; height: 100%; box-sizing: border-box; padding: 0 18px 14px; color: var(--ink); font: 400 12px/1.5 Roboto, "Segoe UI", Arial, sans-serif; }
/* the record popup's Activities tab (NotesV2Render.Tab): the same rows inside the record view, no window around them */
.nv.nv-tab { display: block; height: auto; padding: 0; }
.nv.nv-tab .nv-band { position: static; }
.nv *, .nv *::before, .nv *::after { box-sizing: border-box; }
.nv [hidden] { display: none !important; }
.nv a { text-decoration: none; color: inherit; }
.nv i.fa { font-size: 11px; width: 12px; text-align: center; line-height: 1; }
.nv b { font-weight: 500; }

/* the icons: 24-box strokes, coloured by the text around them (NotesV2Render.Icon) */
.nv .nv-i { width: 13px; height: 13px; flex: none; }
.nv-ico .nv-i, .nv-chip .nv-i { width: 12px; height: 12px; }
.nv-sys .nv-i { width: 12px; height: 12px; }

/* head */
.nv-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 2px 0 22px; flex-shrink: 0; }
.nv-rec { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; min-width: 0; }
.nv .rv-no { font-size: 10px; font-weight: 500; letter-spacing: .06em; color: var(--accent); white-space: nowrap; }
.nv-title { font-size: 15px; font-weight: 500; color: var(--head); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.nv-add { flex-shrink: 0; }
/* the form's head keeps number + name on one line */
.nv-form-head .rv-no { font-size: 11px; }
.nv-form-head .nv-title { font-size: 14px; }

/* pills - the site's meaning pills, spelt here because the windows sit outside .rpt */
.nv .pill { display: inline-flex; align-items: center; gap: 4px; height: 18px; padding: 0 7px; border-radius: 9px; font-size: 10px; font-weight: 500; line-height: 1; white-space: nowrap; }
.nv .k-grey { background: var(--grey-soft); color: var(--faint); }
.nv .k-blue { background: var(--blue-soft); color: var(--blue); }
.nv .k-green { background: var(--green-soft); color: var(--green); }
.nv .k-red { background: var(--red-soft); color: var(--red); }
.nv .k-amber { background: var(--amber-soft); color: var(--amber-ink); }
.nv .k-teal { background: var(--teal-soft); color: var(--teal); }
.nv .rv-count { display: inline-block; min-width: 16px; padding: 0 5px; border-radius: 8px; background: var(--band-2); color: var(--muted); font-size: 10px; font-weight: 500; line-height: 16px; text-align: center; margin-left: 5px; }

/* ---- the form window: head, the rows, the foot; the window is sized to the rows by the script (fitForm), the body scrolls only
   when the viewport is shorter than that ---- */
.nv.nv-form { height: auto; max-height: 100%; }
.nv-form-head { display: flex; align-items: baseline; gap: 8px; min-width: 0; padding: 2px 0 10px; flex-shrink: 0; }
.nv-form-body { flex: 1; min-height: 0; overflow: auto; }
.nv-modeRow { justify-content: space-between; }
.nv-modeRow .nv-when { margin-top: 0; margin-left: auto; }
.nv-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.nv-top { min-height: 24px; }
.nv-chips { display: inline-flex; gap: 6px; }
.nv-chip { display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 9px; border-radius: 12px; border: 1px solid var(--line); background: var(--card); color: var(--muted); font-size: 11px; font-weight: 500; line-height: 1; white-space: nowrap; cursor: pointer; }
.nv-chip:hover { color: var(--head); }
.nv-chip.is-on { background: var(--accent-soft); border-color: var(--accent-line); color: var(--accent); }
.nv-labelbox { margin-left: auto; }
.nv-labelbox input { border: 0; background: transparent; font: inherit; font-size: 12px; color: var(--head); width: 170px; outline: none; }
.nv-labelbox input::placeholder { color: var(--faint); }
.nv-editor { margin-top: 10px; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.nv-editor:focus-within { border-color: var(--accent-line); }
.nv-msg { font-size: 10px; color: var(--red); margin-top: 4px; }
.nv-mode { display: inline-flex; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: var(--card); }
.nv-seg { height: 22px; padding: 0 10px; font-size: 11px; font-weight: 500; color: var(--muted); display: inline-flex; align-items: center; gap: 5px; cursor: pointer; }
.nv-seg.is-on { background: var(--accent-soft); color: var(--accent-ink); }
.nv-seg small { font-weight: 400; color: var(--faint); font-size: 10px; }
.nv-modeRow, .nv-when, .nv-plan { margin-top: 10px; }
.nv-cap { font-size: 10px; font-weight: 500; letter-spacing: .05em; text-transform: uppercase; color: var(--faint); margin-right: 4px; }
.nv-quick { display: inline-flex; align-items: center; height: 20px; padding: 0 8px; border-radius: 10px; border: 1px solid var(--line); background: var(--card); color: var(--muted); font-size: 10.5px; cursor: pointer; white-space: nowrap; }
.nv-quick:hover { color: var(--head); }
.nv-quick.is-on { border-color: var(--accent-line); background: var(--accent-soft); color: var(--accent-ink); }
.nv-input { display: inline-flex; align-items: center; gap: 8px; height: 24px; padding: 0 2px; border-bottom: 1px solid var(--line); color: var(--head); font-size: 12px; min-width: 190px; background: transparent; }
.nv-input i.fa { color: var(--faint); }
.nv-dur { display: inline-flex; gap: 4px; }
.nv-for { display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 9px; border-radius: 11px; background: var(--card); border: 1px dashed var(--line); color: var(--muted); font-size: 11px; cursor: pointer; }
.nv-for.is-set { border-style: solid; color: var(--head); }
.nv-for .x { color: var(--faint); margin-left: 2px; }
.nv-for .x:hover { color: var(--red); }
.nv-foot { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin-top: 12px; flex-shrink: 0; }
.nv-sentence { font-size: 11px; color: var(--muted); }
.nv-sentence.is-bad { color: var(--red); }
.nv-hint { display: block; font-size: 10px; color: var(--faint); margin-top: 2px; }
/* the buttons: their own class (the site's global .btn in 05-site.css uppercases, adds a top margin and dims on hover) - grey, the accent for the primary, red for Delete */
.nv .nv-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 32px; margin: 0; padding: 0 14px; border-radius: 16px; background: var(--band-2); color: var(--head); font-size: 12px; font-weight: 500; line-height: 1; text-transform: none; text-decoration: none; cursor: pointer; }
.nv .nv-btn:hover { background: var(--hover); color: var(--head); text-decoration: none; }
.nv .nv-btn.is-primary { height: 34px; padding: 0 18px; border-radius: 17px; background: var(--accent); color: #fff; }
.nv .nv-btn.is-primary:hover { background: var(--accent-ink); color: #fff; }
.nv .nv-btn.is-red { background: var(--red); color: #fff; }
.nv .nv-btn.is-red:hover { background: #b91c1c; color: #fff; }
.nv .nv-btn.is-busy { opacity: .6; pointer-events: none; }
.nv .nv-btn.is-sm { height: 26px; padding: 0 12px; font-size: 11px; }
.nv .nv-btn.is-sm.is-primary { height: 28px; border-radius: 14px; }
.nv-foot .btns { display: flex; gap: 8px; }

/* the RadEditor inside the form: the bordered card is its frame - the four tools as a quiet row, 12px head text, grows with the text */
.nv .RadEditor, .nv .RadEditor.RadEditor_Material { border: 0 !important; background: var(--card) !important; box-shadow: none !important; width: 100% !important; }
.nv .RadEditor .reToolBarWrapper, .nv .RadEditor .reToolBar, .nv .RadEditor .reToolbarWrapper, .nv .RadEditor .reToolbar { background: transparent !important; border: 0 !important; box-shadow: none !important; padding: 2px 4px 0 !important; min-height: 0 !important; }
.nv .RadEditor .reToolBar .reTool, .nv .RadEditor .reToolbar .reTool, .nv .RadEditor .reTool { color: var(--faint) !important; }
.nv .RadEditor .reTool:hover { color: var(--head) !important; }
.nv .RadEditor .reContentArea, .nv .RadEditor .reContentCell, .nv .RadEditor .reContentWrapper { background: var(--card) !important; }
.nv .RadEditor .reContentArea { font: 400 12px/1.5 Roboto, "Segoe UI", Arial, sans-serif !important; color: var(--head) !important; padding: 6px 11px !important; }
/* the typing area fills the card under the tools, so a click anywhere in it lands in the text (NotesV2.buildForm repaints the editor
   once its window shows; the floor holds even if that measure fails), with no browser focus ring - the card's accent border is the
   focus sign; the "Write here..." placeholder lets the click through to the area under it instead of being selected (24 Sep 2026) */
.nv .RadEditor .reContentArea { min-height: 110px; outline: none !important; cursor: text; }
.nv .RadEditor .reEmptyMessage { pointer-events: none; user-select: none; }
.nv .nv-editor.is-invalid { border-color: var(--red); }
.nv .RadEditor .reEmptyMessage, .nv .RadEditor .reEmptyMessageText { color: var(--faint) !important; font-style: normal !important; }

/* the Telerik inputs inside an .nv-input: the underline look at the row's height */
.nv .nv-input .RadPicker, .nv .nv-input .RadComboBox { width: 100% !important; margin: 0 !important; }
.nv .nv-input .RadPicker_Material .riTextBox, .nv .nv-input .RadComboBox_Material .rcbInput { font-size: 12px !important; color: var(--head) !important; }
.nv .nv-input .RadPicker_Material .riEmpty, .nv .nv-input .RadComboBox_Material .rcbEmptyMessage { color: var(--faint) !important; font-style: normal !important; }
.nv .nv-input.nv-picker { min-width: 220px; border-bottom: 0; }
.nv .nv-input.nv-people { min-width: 240px; border-bottom: 0; }
/* the plan row's two labelled boxes (Assign to, Notify): the second caption stands off the first box */
.nv-plan .nv-people + .nv-cap { margin-left: 14px; }

/* ---- the log window: filters ---- */
.nv-filters { display: flex; align-items: center; gap: 14px; height: 32px; border-bottom: 1px solid var(--hair); margin-bottom: 4px; flex-shrink: 0; }
.nv-filter { font-size: 11px; color: var(--muted); display: inline-flex; align-items: center; cursor: pointer; white-space: nowrap; }
.nv-filter:hover { color: var(--head); }
.nv-filter.is-on { color: var(--head); font-weight: 500; }
.nv-mine { font-size: 11px; color: var(--muted); padding: 2px 8px; border-radius: 10px; cursor: pointer; }
.nv-mine.is-on { background: var(--accent-soft); color: var(--accent-ink); }
/* the state pills next to the tabs: filters too - the one in force gets a ring */
.nv-pills { display: inline-flex; gap: 6px; }
.nv .nv-pill { cursor: pointer; }
.nv .nv-pill.is-on { box-shadow: inset 0 0 0 1.5px currentColor; }
.nv-search { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; height: 24px; width: 130px; border-bottom: 1px solid var(--line); color: var(--faint); font-size: 11px; padding: 0 2px; }
.nv-search:focus-within { border-bottom-color: var(--accent); }
.nv-search input { border: 0; background: transparent; outline: none; font: inherit; font-size: 11px; color: var(--head); width: 100%; }
.nv-search input::placeholder { color: var(--faint); }

/* the timeline */
.nv-log { flex: 1; overflow: auto; min-height: 0; }
.nv-band { position: sticky; top: 0; background: var(--card); font-size: 10px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: var(--faint); padding: 9px 0 5px; z-index: 1; }
/* a row: the icon | the content (kind, pill, text, feedback) | the right side (who · when, the people line, the actions) */
.nv-item { position: relative; display: grid; grid-template-columns: 24px minmax(0, 1fr) minmax(150px, auto); gap: 10px 14px; padding: 10px 6px 10px 4px; border-bottom: 1px solid var(--hair); align-items: start; transition: background .8s; }
.nv-side { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; max-width: 260px; text-align: right; padding-top: 3px; }
.nv-side .nv-meta { margin-top: 0; }
.nv-side .nv-actions { margin-top: 4px; }
/* the record popup's Activities tab is narrower: the side folds back under the text, left-aligned */
.nv.nv-tab .nv-item { grid-template-columns: 24px minmax(0, 1fr); }
.nv.nv-tab .nv-side { grid-column: 2; align-items: flex-start; text-align: left; max-width: none; padding-top: 0; }
.nv-item:hover, .nv-item:focus-within { background: var(--hover); }
/* the first upcoming item: a plain row with an inline NEXT tag and its actions always visible (the owner dropped the mockup's tinted card + state bar, 15 Sep 2026) */
.nv-next { display: inline-flex; align-items: center; height: 16px; padding: 0 6px; border-radius: 8px; background: var(--accent-soft); color: var(--accent-ink); font-size: 9.5px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; line-height: 1; }
.nv-item.is-new { background: var(--accent-soft); transition: none; }
.nv-item.is-compact { padding-top: 6px; padding-bottom: 6px; }
.nv .is-gone { display: none; }   /* an item, a day band or a folded run the filters hide */
.nv-ico { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; margin-top: 2px; }
.nv-ico.is-plain { background: none; color: var(--faint); }
.nv-body { min-width: 0; }
.nv-line { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; margin-bottom: 2px; }
.nv-kind { font-size: 10px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: var(--faint); }
.nv-lbl { font-size: 11px; font-weight: 500; color: var(--head); }
.nv-textv { font-size: 12px; color: var(--ink); line-height: 1.5; overflow-wrap: anywhere; }
.nv-textv p { margin: 0 0 4px; }
.nv-textv p:last-child { margin-bottom: 0; }
.nv-textv ul, .nv-textv ol { margin: 2px 0 4px; padding-left: 18px; }
.nv-textv a { color: var(--accent); }
.nv-textv.is-sys { font-size: 11px; color: var(--muted); }
.nv-link { color: var(--accent) !important; }
.nv-meta { font-size: 10px; color: var(--faint); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.nv-meta a { color: var(--muted); }
.nv-feedback { font-size: 11px; color: var(--muted); font-style: italic; margin-top: 2px; }
.nv-actions { display: flex; gap: 2px; opacity: 0; transition: opacity .15s; }
.nv-item:hover .nv-actions, .nv-item.is-next .nv-actions, .nv-item:focus-within .nv-actions, .nv-item.is-acting .nv-actions { opacity: 1; }
.nv-act { width: 22px; height: 22px; border-radius: 6px; display: grid; place-items: center; color: var(--muted); cursor: pointer; }
.nv-act:hover { color: var(--head); background: var(--band-2); }
.nv-act.is-danger:hover { color: var(--red); background: var(--red-soft); }
.nv-sys { display: flex; align-items: center; gap: 8px; padding: 8px 6px 8px 8px; font-size: 10.5px; color: var(--muted); border-bottom: 1px solid var(--hair); cursor: pointer; }
.nv-sys:hover { color: var(--head); }
.nv-sys.is-open { border-bottom: 0; }
.nv-sys .nv-i-fold { margin-left: auto; transition: transform .15s; }
.nv-sys.is-open .nv-i-fold { transform: rotate(180deg); }
.nv-older { display: block; text-align: center; font-size: 11px; color: var(--accent); padding: 12px 0 6px; cursor: pointer; }
.nv-end { text-align: center; font-size: 10px; color: var(--faint); padding: 12px 0 6px; }
.nv-empty { font-size: 11px; color: var(--muted); font-style: italic; padding: 14px 0; }
.nv-state { font-size: 11px; color: var(--muted); padding: 14px 0; }
.nv-state.is-error { color: var(--red); }
.nv-state a { color: var(--accent); margin-left: 6px; }
.nv-none { color: var(--faint); font-style: italic; }

/* the inline strips and the popover, inside the item's grid (columns 2-3) */
.nv-strip { grid-column: 2 / 4; margin-top: 8px; padding: 10px 12px; border-radius: 8px; background: var(--card); border: 1px solid var(--line); }
.nv-strip .nv-row { gap: 6px; }
.nv-strip .nv-row + .nv-row { margin-top: 8px; }
.nv-outcome { display: inline-flex; align-items: center; height: 20px; padding: 0 9px; border-radius: 10px; background: var(--grey-soft); color: var(--muted); font-size: 10.5px; font-weight: 500; cursor: pointer; }
.nv-outcome.is-on { background: var(--accent-soft); color: var(--accent-ink); }
.nv-fb { flex: 1; min-width: 180px; height: 26px; border: 0; border-bottom: 1px solid var(--line); background: transparent; font: 400 12px Roboto, "Segoe UI", Arial, sans-serif; color: var(--head); padding: 0 2px; outline: none; }
.nv-fb:focus { border-bottom-color: var(--accent); }
.nv-fb::placeholder { color: var(--faint); }
.nv-strip.is-delete { display: flex; align-items: center; gap: 12px; }
.nv-strip.is-delete .q { font-size: 12px; color: var(--head); flex: 1; }
.nv-pop { grid-column: 2 / 4; margin-top: 8px; padding: 12px 14px; border-radius: 8px; background: var(--card); border: 1px solid var(--line); box-shadow: 0 8px 24px rgba(38, 50, 56, .14); width: 460px; max-width: 100%; }
.nv-pop .nv-when { margin-top: 0; }
.nv-pop .nv-plan { margin-top: 8px; }
.nv-pop .link { font-size: 11px; color: var(--muted); cursor: pointer; }
.nv-pop .link:hover { color: var(--red); }
.nv-pop .nv-foot { margin-top: 10px; }
.nv-audit { width: 100%; border-collapse: collapse; margin-top: 8px; font-size: 11px; }
.nv-audit th { text-align: left; font-size: 10px; font-weight: 500; letter-spacing: .05em; text-transform: uppercase; color: var(--faint); padding: 4px 8px 4px 0; border-bottom: 1px solid var(--line); }
.nv-audit td { padding: 5px 8px 5px 0; border-bottom: 1px solid var(--hair); color: var(--ink); vertical-align: top; }
.nv-audit td.old { color: var(--faint); text-decoration: line-through; }
.nv-audit td.new { color: var(--head); }

/* the toast (one per window) */
.nv-toast { position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%); background: var(--head); color: #fff; border-radius: 20px; padding: 8px 8px 8px 16px; font-size: 12px; display: inline-flex; align-items: center; gap: 12px; box-shadow: 0 8px 24px rgba(38, 50, 56, .3); white-space: nowrap; z-index: 2; }
.nv-toast.is-bad { background: var(--red); }
.nv-toast b { font-weight: 500; }
.nv-toast a { color: #fff; background: rgba(255, 255, 255, .14); border-radius: 12px; padding: 4px 10px; font-weight: 500; cursor: pointer; }

/* ---- outside the windows: the list cell's line (NotesV2Render.Line inside .d-activity) - the state colour on the link, the type icon
   after it. The link is an atomic inline-flex so the cell's ellipsis cuts the text span and the icon stays visible after the "..." ---- */
.rpt .d-activity a.nv-st { display: inline-flex; max-width: 100%; align-items: center; vertical-align: top; color: var(--ink); text-decoration: none; }
.rpt .d-activity a.nv-st > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rpt .d-activity a.nv-st.k-red { color: var(--red); }
.rpt .d-activity a.nv-st.k-amber { color: var(--amber-ink); }
.rpt .d-activity a.nv-st.k-blue { color: var(--blue); }
.rpt .d-activity a.nv-st.k-green { color: var(--green); }
.rpt .d-activity a.nv-st .nv-i { flex: none; width: 12px; height: 12px; margin-left: 5px; opacity: .8; }
.rpt .d-activity .nv-none { color: var(--faint); }

/* =====================================================================================================
   Pages.css - the list-page SKIN (docs/PAGE-DESIGN-CODE.md is the manual).

   A skin, not a layout: it restyles the DOM every list page already has -
       #pageTitleArea > PageHead   |   #searchArea > RadWizard_Metro + .search-controls + #toggle-search
       .grid-controls (count, .totalBox stats, ul.nav tools, .excel link)   |   .myGrid.sexy-grid > .pager
   and the cell vocabulary the pages already use (.super-text, .label, .bold, .comment, .small, .badge-*,
   the site's icon classes). To apply it to a page: put it on the V2 master and replace the <h1> block with
   PageHead.ascx. The master wraps the title band and the body in <div class="rpt">, and every rule below
   hangs off that class (body.v2 for what Telerik appends outside it). No other markup change is required;
   the optional touches are listed in the manual.

   Bundled site-wide with every file in ~/StyleSheets (Global.asax). Telerik/*.css is bundled AFTER this
   file, so every rule that fights Wizard.css / Button.css carries #searchArea for specificity.

   COLOUR - the accent is scarce.
     Tenant accent (--accent, one line per Themes/*.css): the list is the manual's section 4 - the current
     sub-nav tab, the primary button, the selected wizard step without a setup colour, the document number and
     the record name, the current page, a tool in its on-state, the focused keyword box. Nothing else (the rule
     under a grid header went neutral on 30 Sep 2026).
     Ink and greys: everything else - names, amounts, captions, dates, links inside cells. Four greys
     (--head / --ink / --muted / --faint); on the list and card parts the two light ones sit one shade darker
     (the block after :root, 30 Sep 2026).
     Meaning colours (identical on every tenant): stage badges (the CRM setup colour as the tint, a deeper
     shade of it as the text), red for a reason or an overdue date, the stat icon circles, the k-* pills.

   TYPE - inherits the master sheet (body 12px Roboto); the sizes are the manual's section 5 (rows 11px,
   captions 10px, the amount 14px, the bar's figures 13px, the sub-nav 13px).

   ICONS - the site's Font Awesome 4.7 and its icon classes (.bell, .flag, .attachment, .excel ...), toned
   down to the faint grey inside the grid; a closing date's .bell reads as a calendar.
   ===================================================================================================== */

:root {
    --accent: #036c9c;                                             /* overridden by each Themes/*.css */
    --accent-ink: color-mix(in srgb, var(--accent) 82%, black);
    --accent-soft: color-mix(in srgb, var(--accent) 10%, white);
    --accent-line: color-mix(in srgb, var(--accent) 35%, white);
    --csw-accent: var(--accent);                                   /* the widgets read these four */
    --csw-accent-ink: var(--accent-ink);
    --csw-accent-soft: var(--accent-soft);
    --csw-accent-line: var(--accent-line);

    --head: #263238; --ink: #37474f; --muted: #607d8b; --faint: #78909c;
    --line: #dfe5ea; --hair: #eceff2; --band: #f6f8fa; --band-2: #edf1f5; --tint: #fafbfc; --alt: #f7f9fb; --hover: #eef2f6; --card: #fff;
    --ground: #f1f3f5; --frame: #e3e7ec;   /* the page ground under the V2 band and the border of the boxes that sit on it (search card, bar + grid, board, KPI cards, report panel): the HOME PAGE values (HomeV2.aspx ground, the widget hairline of Widgets.css), so the boxes stop reading as boxes and the home and the list pages agree (the owner, 28 Sep 2026; was #e7eaef / --line; the backend console pair #f8fafc / #ebeef2 was tried the same day and found too light for contrast) */

    --blue: #3b82f6; --green: #16a34a; --emerald: #059669; --red: #dc2626; --amber: #f59e0b; --amber-ink: #d97706;
    --orange: #ea580c; --violet: #7c3aed; --teal: #0d9488; --indigo: #4f46e5; --grey: #90a4ae;
    --blue-soft: #e8f0fe; --green-soft: #e6f6ec; --emerald-soft: #dcf3ea; --red-soft: #fde8e8; --amber-soft: #fef3e0;
    --orange-soft: #fdeadb; --violet-soft: #efe8fd; --teal-soft: #dff5f2; --indigo-soft: #e8e7fd; --grey-soft: #eef1f4;

    /* the eight stage colours of the CRM setup (the site's badge-* hexes): the wizard step, the grid badge, the board dot, the popup badge and stepper */
    --stage-gray: #989898; --stage-gold: #cfa240; --stage-blue: #25a0da; --stage-navy: #5174bd;
    --stage-purple: #9932cc; --stage-green: #55ae3a; --stage-orange: #ff8c00; --stage-red: crimson;
}

/* the list greys (30 Sep 2026, the owner - "the page looks pale"): on the parts of a list or card page the two light greys step one shade
   darker on the same Blue Grey ramp (700 / 600 instead of 500 / 400), so the four greys step evenly - 13.2 > 9.7 > 7.2 > 5.4 : 1 on white -
   and the captions, the currency, the bar's labels and tools read as text, not as disabled (they were 3.3 - 4.4 : 1). Scoped: the popups
   (.rpt-pop), the windows, the tooltips, the record view and the home keep :root's #607d8b / #78909c until they are walked (then body.v2,
   never :root before the cut-over - :root reaches the old master through StackAiV2.css and the shared mail controls) */
.rpt:not(.rpt-pop) :is(#pageTitleArea:has(.rpt-head-actions), #searchArea, .searchArea, .grid-controls, .myGrid.sexy-grid, .rpt-board, .rpt-info, .rpt-kpis, .rpt-panel, .rpt-tiles) { --muted: #455a64; --faint: #546e7a; }
/* the input forms walked (13 Oct 2026, the owner on the costing template form - "the UI looks a bit pale"): the same two darker greys on a form's
   body and footer, in a popup or on a page */
.rpt :is(.form-holder, .controlArea.rpt-form-foot) { --muted: #455a64; --faint: #546e7a; }

/* ---- 0 root: the form carries .rpt (PageHead sets it) ---- */
.rpt { color: var(--ink); }
.rpt b { font-weight: 500; }
.rpt .spotColor { color: var(--head) !important; }

/* the site's icon classes inside the grid: small, faint, a little air before the text. The gear is the row menu's TRIGGER only
   (ul.nav > li > a.service): a "service" item inside the menu keeps the menu's 16px icon box (3b) - the grid rule's "width: auto"
   outranked it and pushed Planning Center 4px left of the other items (13 Sep 2026) */
.rpt .myGrid .bell:before, .rpt .myGrid .flag:before, .rpt .myGrid .attachment:before, .rpt .myGrid .globe:before, .rpt .myGrid .write-comment:before, .rpt .myGrid ul.nav > li > a.service:before {
    font-size: 11px; color: var(--faint); width: auto; margin: 0 6px 0 0;
}

/* ---- 1 title band: PageHead.ascx = sub-nav (words, the current page in the accent with a 2px bar) + the page's main button ---- */
#pageTitleArea:has(.rpt-head-actions) { background: transparent !important; height: auto !important; line-height: normal !important; padding: 10px 0 0; margin-bottom: 10px; overflow: visible; }
.rpt-head-actions { float: right; display: flex; align-items: center; gap: 12px; height: 40px; }   /* the strip's height (40px since option B, 16 Oct 2026), so the button centres on the tabs' line */
/* the strip is exactly the tabs' height (Telerik adds 20px under the level, new-layout-head.css pads the links) */
.rpt-nav.RadTabStrip_Material.top-strip .rtsLevel1 { margin: 0 !important; padding: 0 !important; }
.rpt-nav.RadTabStrip_Material.top-strip .rtsLevel1 .rtsLink { padding: 0 !important; }
#pageTitleArea .rpt-head-actions a { float: none; }
/* a quiet text link in the band (Report Guide): muted, the accent on hover, the site's help glyph in front */
#pageTitleArea .rpt-head-actions a.rpt-head-link { color: var(--muted); font-size: 12px; text-decoration: none; }
#pageTitleArea .rpt-head-actions a.rpt-head-link:hover { color: var(--accent); text-decoration: none; }
#pageTitleArea .rpt-head-actions a.rpt-head-link:before { color: var(--faint); margin-right: 5px; }
#pageTitleArea .rpt-head-actions .btn { margin-top: 0; padding: 9px 18px; border-radius: 20px; background: var(--accent); text-transform: none; font-size: 12px !important; font-weight: 500; letter-spacing: 0; }
#pageTitleArea .rpt-head-actions .btn:before { color: #fff; font-size: 12px; margin-right: 7px; vertical-align: -1px; }
/* the page frame of a V2 page (28 Sep 2026 - the owner: Themes/new-layout.css was an older attempt at a restyle; what the V2 pages took from
   it lives here now and no V2 page links it any more): the grey ground the white cards stand on, no line under the title band, the body
   block right under the band (the old master's 25px gap was the "distance under the sub-nav"), room for the footer and the footer on the
   ground, no shadow under the top bar. Scoped to the pages with the PageHead band - every V2 page but the home, whose widgets draw their
   own frame; :where() keeps the scope out of the weight, so the phone rules of section 11 still win. The rest of that file (the search
   card, the bar, the grid, the wizard's corners, the sort glyph's offsets) was already overridden by this file and Telerik/Wizard.css */
body.v2:where(:has(#pageTitleArea .rpt-head-actions)) { background-color: var(--ground); }
body.v2:where(:has(#pageTitleArea .rpt-head-actions)) #pageTitleArea { border: none !important; background-color: transparent; }
body.v2:where(:has(#pageTitleArea .rpt-head-actions)) #contentArea { margin-top: 0; padding-bottom: 60px !important; }
body.v2:where(:has(#pageTitleArea .rpt-head-actions)) #footerArea { bottom: 5px; background: transparent; border-top: none; color: inherit; }
body.v2:where(:has(#pageTitleArea .rpt-head-actions)) #menuArea { box-shadow: none !important; }
body.v2:where(:has(#pageTitleArea .rpt-head-actions)) div.controlArea { border-top: none; margin-top: 20px; padding: 0; }   /* PasswordResetV2's buttons */
.rpt-nav.RadTabStrip_Material .rtsLevel1 .rtsLink { padding: 0 !important; margin-right: 6px; }
.rpt-nav.RadTabStrip_Material .rtsLevel1 .rtsTxt { display: inline-block; padding: 10px 12px; font-size: 13px; line-height: 17px; color: var(--muted); font-weight: 400; }
.rpt-nav.RadTabStrip_Material .rtsLevel1 .rtsLink:hover .rtsTxt { color: var(--head); }
.rpt-nav.RadTabStrip_Material .rtsLevel1 .rtsSelected .rtsLink .rtsTxt { color: var(--accent); font-weight: 700; }   /* the current page: bold in the accent, no bar */
.rpt-nav.RadTabStrip_Material .rtsLevel1 .rtsSelected .rtsLink:before, .rpt-nav.RadTabStrip_Material .rtsLevel1 .rtsSelected .rtsLink:after { display: none !important; }
.rpt-nav.RadTabStrip_Material .rtsLevel1 .rtsLink, .rpt-nav.RadTabStrip_Material .rtsLevel1 .rtsSelected .rtsLink { border: none !important; box-shadow: none !important; background: transparent !important; }
/* a form tab's count (28 Oct 2026, the quotation form: Line Items 4, Key Contacts 2 ...): the wizard's count pill, smaller, in the tab's text */
.rpt-nav.RadTabStrip_Material .rtsLevel1 .rtsTxt b.rpt-tab-count { display: inline-block; min-width: 16px; margin-left: 4px; padding: 0 5px; border-radius: 9px; background: var(--grey-soft); color: var(--muted); font-size: 10px; font-weight: 500; line-height: 15px; text-align: center; font-variant-numeric: tabular-nums; vertical-align: 1px; }
/* the band's idle words take the lighter of the list greys (30 Sep 2026): darker than before (4.86 : 1 on the ground) but never darker than
   the tenant accent, so the current page keeps the lead on every theme. :where() keeps the band out of the weight - the hover and the
   current tab above still win - and keeps the popup forms' and the ticket thread's tab strips (which share line 92) as they are */
:where(#pageTitleArea) .rpt-nav.RadTabStrip_Material.top-strip .rtsLevel1 .rtsTxt { color: var(--faint); }
/* the sub-nav's sizes - option B, the owner's pick (16 Oct 2026): the current page 17px bold in the accent, the other tabs and the More caption
   12px, on ONE baseline. Every word sits in the same 24px line; a word's baseline is the line's middle + 0.345 x its size (Roboto's ascent
   .93, descent .24), so the 12px words start 2px lower than the 17px one (10 vs 8px above) and end 2px higher - every tab, and the More
   caption beside the strip, is 40px tall and the words share the line. Only the title band's strip: the popup forms' and the ticket thread's
   tab strips (the rules above) keep 13px */
#pageTitleArea .rpt-nav.RadTabStrip_Material.top-strip .rtsLevel1 .rtsTxt { padding: 10px 9px 6px; font-size: 12px; line-height: 24px; }   /* 9px sides since 29 Oct 2026 (the owner's walk W-4: the Sales strip grew by two tabs) */
#pageTitleArea .rpt-nav.RadTabStrip_Material.top-strip .rtsLevel1 .rtsSelected .rtsLink .rtsTxt { padding: 8px 9px; font-size: 17px; }
/* a group of related pages on the strip (ModuleNav.Link.GroupStart, 22 Oct 2026 - the owner: "rearrange marketing sub nav based on their relation
   and use separators"): PageHead puts rpt-nav-group on the group's first tab the viewer sees, never the strip's first; a faint vertical hairline
   in the gap before it, the height of the 12px words and centred on their line - the line grey, never the accent */
#pageTitleArea .rpt-nav.RadTabStrip_Material.top-strip .rtsLevel1 .rtsLI.rpt-nav-group { position: relative; margin-left: 12px; }
#pageTitleArea .rpt-nav.RadTabStrip_Material.top-strip .rtsLevel1 .rtsLI.rpt-nav-group:before { content: ""; position: absolute; left: -9px; top: 15px; height: 14px; border-left: 1px solid var(--line); }
/* the strip's More menu (15 Oct 2026, the owner: "a More button at the end of the sub nav ... to always link all related pages and modules
   together"): PageHead's ul.nav.rpt-nav-more right after the last tab, its caption a tab's words (size, padding, the idle grey) with a faint
   caret; the drop-down is the gear's grouped menu (section 3c - one column per ModuleNav.Link.More group) opening to the RIGHT of the
   caption, under the band */
#pageTitleArea ul.nav.rpt-nav-more { float: left; margin: 0; font-size: inherit; }
#pageTitleArea ul.nav.rpt-nav-more > li > a { display: inline-block; padding: 10px 9px 6px; font-size: 12px; line-height: 24px; color: var(--faint); text-decoration: none !important; }   /* an idle tab's box (option B, above) */
#pageTitleArea ul.nav.rpt-nav-more > li:hover > a { color: var(--head); }
#pageTitleArea ul.nav.rpt-nav-more > li > a .fa { margin-left: 4px; font-size: 10px; color: var(--faint); }
.rpt #pageTitleArea ul.nav.rpt-nav-more > li > .cols-wrapper { top: 100%; left: 4px; right: auto; margin-top: 2px; z-index: 10001; }
.rpt #pageTitleArea ul.nav.rpt-nav-more .cols-wrapper li a { font-size: 12px; }

/* ---- 2 search card: #searchArea as the page already has it ---- */
.rpt :is(#searchArea, .searchArea) { position: relative; background: var(--card); border: 1px solid var(--frame); border-radius: 12px; padding: 14px 16px 0; margin: 0 0 24px; box-sizing: border-box; }

/* the status RadWizard: the site's Metro chain kept (chevrons, is-out steps), sitting INSIDE a grey box - 6px / 8px of --band
   around the steps, 12px corners, the mockup's own numbers - that reads as a thick frame around the whole control (the owner,
   21 Sep 2026, on the ticket mockup and again on the page; 10px / 12px then 8px / 10px seen and trimmed to this). The tray's tone went
   from --band-2 to --band on 30 Sep 2026 (the owner): --band-2 is darker than the page ground, so inside the white card the tray read
   as a hole; on --band it reads as a light tray holding the chain - same thickness. The box is the breadcrumb UL itself: in the Lightweight wizard the steps are
   div.RadWizard > ul.rwzBreadCrumb > li.rwzLI > a.rwzLink > span.rwzText, and ".rwzNav" (where this band first sat, showing
   nothing) is the Previous / Next buttons bar, absent with DisplayNavigationButtons="False". The UL's 15px Telerik bottom margin
   goes with it. Plain steps are white, the selected one is the accent (the stage colour lives on the grid badge) */
.rpt :is(#searchArea, .searchArea) .RadWizard, .rpt :is(#searchArea, .searchArea) .RadWizard_Metro { margin: 0 !important; }
.rpt :is(#searchArea, .searchArea) .RadWizard .rwzBreadCrumb { background: var(--band); border-radius: 12px; padding: 6px 8px !important; margin: 0 0 6px !important; box-sizing: border-box; }
.rpt :is(#searchArea, .searchArea) .RadWizard .rwzBreadCrumb .rwzLink { background: var(--card) !important; border-color: var(--line) !important; color: var(--ink) !important; font-weight: 400; }
.rpt :is(#searchArea, .searchArea) .RadWizard .rwzBreadCrumb .rwzLink:before { background: var(--card) !important; border-color: var(--line) !important; }
.rpt :is(#searchArea, .searchArea) .RadWizard .rwzBreadCrumb .rwzLink:hover, .rpt :is(#searchArea, .searchArea) .RadWizard .rwzBreadCrumb .rwzLink:hover:before { background: var(--hover) !important; }
.rpt :is(#searchArea, .searchArea) .RadWizard .rwzBreadCrumb .rwzText { line-height: 36px !important; width: auto !important; padding: 0 22px 0 14px; box-sizing: border-box; }   /* the full step name, clear of the chevron */
.rpt :is(#searchArea, .searchArea) .RadWizard_Metro .rwzSelected .rwzLink, .rpt :is(#searchArea, .searchArea) .RadWizard_Metro .rwzSelected .rwzLink:before,
.rpt :is(#searchArea, .searchArea) .RadWizard_Metro .rwzSelected .rwzLink:hover, .rpt :is(#searchArea, .searchArea) .RadWizard_Metro .rwzSelected .rwzLink:hover:before { background: var(--accent) !important; border-color: var(--accent) !important; color: #fff !important; font-weight: 500; }
/* is-out steps (On Hold / Lost / Cancelled / All): the same white box, standing alone with rounded corners; the accent when selected */
.rpt :is(#searchArea, .searchArea) .RadWizard_Metro .is-out .rwzLink { border-radius: 8px !important; margin-left: 8px !important; }
.rpt :is(#searchArea, .searchArea) .RadWizard_Metro .is-out.rwzSelected .rwzLink { background: var(--accent) !important; border-color: var(--accent) !important; }
/* the chain's two ends take the is-out steps' 8px (the site's Wizard.css rounds them 3px, so one band showed two radii - the owner,
   21 Sep 2026, on the ticket list's mockup; the "All" step is is-out and keeps its own radius) */
.rpt :is(#searchArea, .searchArea) .RadWizard_Metro .rwzFirst .rwzLink { border-radius: 8px 0 0 8px; }
.rpt :is(#searchArea, .searchArea) .RadWizard_Metro :is(.is-last, .rwzLast):not(.is-out) .rwzLink { border-radius: 0 8px 8px 0; }
/* a step that carries a CRM setup colour is selected in THAT colour (the same hexes as the grid badge), not the accent */
.rpt :is(#searchArea, .searchArea) .RadWizard_Metro .rwzSelected.gray .rwzLink, .rpt :is(#searchArea, .searchArea) .RadWizard_Metro .rwzSelected.gray .rwzLink:before { background: var(--stage-gray) !important; border-color: var(--stage-gray) !important; }
.rpt :is(#searchArea, .searchArea) .RadWizard_Metro .rwzSelected.gold .rwzLink, .rpt :is(#searchArea, .searchArea) .RadWizard_Metro .rwzSelected.gold .rwzLink:before { background: var(--stage-gold) !important; border-color: var(--stage-gold) !important; }
.rpt :is(#searchArea, .searchArea) .RadWizard_Metro .rwzSelected.blue .rwzLink, .rpt :is(#searchArea, .searchArea) .RadWizard_Metro .rwzSelected.blue .rwzLink:before { background: var(--stage-blue) !important; border-color: var(--stage-blue) !important; }
.rpt :is(#searchArea, .searchArea) .RadWizard_Metro .rwzSelected.navy .rwzLink, .rpt :is(#searchArea, .searchArea) .RadWizard_Metro .rwzSelected.navy .rwzLink:before { background: var(--stage-navy) !important; border-color: var(--stage-navy) !important; }
.rpt :is(#searchArea, .searchArea) .RadWizard_Metro .rwzSelected.purple .rwzLink, .rpt :is(#searchArea, .searchArea) .RadWizard_Metro .rwzSelected.purple .rwzLink:before { background: var(--stage-purple) !important; border-color: var(--stage-purple) !important; }
.rpt :is(#searchArea, .searchArea) .RadWizard_Metro .rwzSelected.green .rwzLink, .rpt :is(#searchArea, .searchArea) .RadWizard_Metro .rwzSelected.green .rwzLink:before { background: var(--stage-green) !important; border-color: var(--stage-green) !important; }
.rpt :is(#searchArea, .searchArea) .RadWizard_Metro .rwzSelected.orange .rwzLink, .rpt :is(#searchArea, .searchArea) .RadWizard_Metro .rwzSelected.orange .rwzLink:before { background: var(--stage-orange) !important; border-color: var(--stage-orange) !important; }
.rpt :is(#searchArea, .searchArea) .RadWizard_Metro .rwzSelected.red .rwzLink, .rpt :is(#searchArea, .searchArea) .RadWizard_Metro .rwzSelected.red .rwzLink:before { background: var(--stage-red) !important; border-color: var(--stage-red) !important; }
.rpt :is(#searchArea, .searchArea) .RadWizard .rwzLink b { display: inline-block; min-width: 18px; padding: 0 6px; border-radius: 9px; background: var(--grey-soft); color: var(--ink); font-variant-numeric: tabular-nums; line-height: 16px; margin-left: 4px; }
.rpt :is(#searchArea, .searchArea) .RadWizard .rwzSelected .rwzLink b { background: rgba(0,0,0,.2); color: #fff; }   /* a darker well on the solid step, not a white wash (30 Sep 2026: 3.5 -> 8 : 1 on Blue, 1.9 -> 3.6 on gold) */
/* the counts mode (CssClass="rpt-counts" on the RadWizard - the two CRM lists and the ticket list, 21 Sep 2026): Telerik divides the bar's
   width equally among the steps and cuts a long name with an ellipsis, and the count pill went with it (the owner, on the first build).
   With the class the chain is a flex row of steps sized by their CONTENT first: a step takes what its name and pill need, the type
   a size smaller (11px, a 10px pill), the free width of the band is then shared equally so the chain always reaches the page's
   width (the owner, 21 Sep 2026 - a chain that stopped short of the band's end), the words centred in the step as Telerik centres
   them; when the row is too narrow only the NAME shortens - the pill is never cut. The page writes the Title as
   <span title="name">name</span><b>n</b> (SetWizardCounts) */
.rpt :is(#searchArea, .searchArea) .RadWizard.rpt-counts .rwzBreadCrumb { display: flex !important; flex-wrap: nowrap; align-items: stretch; width: 100%; }
.rpt :is(#searchArea, .searchArea) .RadWizard.rpt-counts .rwzBreadCrumb > li { display: block !important; float: none !important; flex: 1 1 auto; min-width: 0; width: auto !important; }
.rpt :is(#searchArea, .searchArea) .RadWizard.rpt-counts .rwzBreadCrumb .rwzLink { display: block; width: auto !important; }
.rpt :is(#searchArea, .searchArea) .RadWizard.rpt-counts .rwzBreadCrumb .rwzText { display: flex !important; align-items: center; justify-content: center; gap: 5px; min-width: 0; max-width: none !important; padding: 0 14px; font-size: 11px; overflow: visible; text-overflow: clip; }
/* the arrow (Telerik's 20px square at right: -8px, rotated 45deg and skewed 15deg - a diamond 21px wide centred 2px inside the step's
   right edge) is painted OVER the words in the step's own colour, so a word under its body vanishes: at the text's height the body
   starts 9px inside the edge, so a step WITH an arrow ends its words 12px in (20px left a band of air the owner wanted spent on the
   words before any name is cut, 21 Sep 2026), and the step after it starts 18px in - the tip reaches 5px past the edge, 18 is the
   owner's pick (14 read as on the arrow, 24 too much). The first step, the last of the chain and the standalone steps keep 14px */
.rpt :is(#searchArea, .searchArea) .RadWizard.rpt-counts .rwzBreadCrumb > li:not(.is-out):not(.is-last):not(.rwzLast) .rwzText { padding-right: 12px; }
.rpt :is(#searchArea, .searchArea) .RadWizard.rpt-counts .rwzBreadCrumb > li:not(.is-out) + li:not(.is-out) .rwzText { padding-left: 18px; }
.rpt :is(#searchArea, .searchArea) .RadWizard.rpt-counts .rwzBreadCrumb .rwzText > span { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.rpt :is(#searchArea, .searchArea) .RadWizard.rpt-counts .rwzBreadCrumb .rwzText > b { flex: none; min-width: 16px; padding: 0 5px; margin: 0; font-size: 10px; line-height: 15px; text-align: center; }
/* a step's description on hover (30 Sep 2026, CustomersListV2's lifecycle steps): the page starts the step's Title with
   <i class="rpt-step-tip" data-tip="..." data-tip-pos="below"></i> - an empty layer over the whole step (the link is the positioned box),
   so section 9's bubble shows wherever the pointer is on the step, and a click still reaches the step (the layer sits inside its link).
   Telerik's breadcrumb clips its overflow, so a chain that carries tips lets the bubble out - from 1024px up only: below that the chain
   scrolls sideways (section 11) and the tips are off on touch */
.rpt :is(#searchArea, .searchArea) .RadWizard .rwzText > i.rpt-step-tip { position: absolute; inset: 0; }
@media (min-width: 1024px) {
    .rpt :is(#searchArea, .searchArea) .RadWizard .rwzBreadCrumb:has(i.rpt-step-tip) { overflow: visible; }
}

/* the filter table: the first row stays visible when the box is folded; the site's toggle script is untouched */
.rpt .search-controls { padding: 0 0 8px; }
.rpt .search-controls.hide-search { height: auto !important; overflow: visible; }   /* the other rows are display:none below - no clip, so the keyword box's data-tip bubble is not cut (17 Sep 2026) */
.rpt .search-controls.hide-search table tr:not(:first-child) { display: none; }
.rpt .search-controls table td { padding: 6px 8px 8px 0; vertical-align: bottom; }
.rpt .search-controls td > .super-text { display: block; margin: 0 0 -4px; font-size: 10px; font-weight: 400; color: var(--faint); letter-spacing: .02em; }
.rpt .search-controls .RadComboBox, .rpt .search-controls .RadPicker, .rpt .search-controls .RadInput { max-width: 100%; }
/* every combo / dropdown fills its cell (five equal columns); a helper next to a combo (the salesperson scope icon) stays on the combo's line */
.rpt .search-controls table > tbody > tr > td { white-space: nowrap; width: 20%; }
.rpt .search-controls table > tbody > tr > td[colspan] { width: auto; }
/* a card whose folded rows hold a wide cell (the invoices' Payment radio, 15 Oct 2026 - the owner: "when expanding and collapsing the search
   panel the width of controls must not change"): the auto layout sized the columns by the rows shown, so unfolding widened Branch and
   Customer. table.rpt-fixed takes the five equal columns from row 1 whatever the other rows hold */
.rpt .search-controls table.rpt-fixed { table-layout: fixed; }
/* two fields that belong together in one cell spanning two columns (the payment state and its ageing): side by side, each with its caption,
   the second filling what the first leaves */
.rpt .search-controls .rpt-pair { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 6px 18px; white-space: normal; }   /* the cell's nowrap would push a long radio list past the fixed column */
.rpt .search-controls .rpt-pair > div > .super-text { display: block; margin: 0 0 -4px; font-size: 10px; font-weight: 400; color: var(--faint); letter-spacing: .02em; }
.rpt .search-controls .rpt-pair > div:last-child { flex: 1 1 0; min-width: 130px; }
.rpt .search-controls .rpt-pair .RadRadioButtonList { padding-bottom: 4px; }
/* a sentence in a filter cell (the Sales Targets page's "Targets" hint, 17 Sep 2026): wraps under its caption, 11px muted, sits on the combos' line */
.rpt .search-controls td > .rpt-hint { display: block; white-space: normal; margin: 0; padding: 5px 0 4px; font-size: 11px; line-height: 1.45; color: var(--muted); }
.rpt .search-controls table td .RadComboBox, .rpt .search-controls table td .RadDropDownList, .rpt .search-controls table td .RadAutoCompleteBox { width: calc(100% - 4px) !important; max-width: none; }
/* the clear glyph of a combo (`<a class="rcbClear" data-tip="Clear">` right after the RadComboBox - the site's pattern, restyled 17 Sep 2026):
   it sits INSIDE the combo's line, left of the caret, as a 20px disc that appears only when the combo holds a value (an empty combo
   shows its EmptyMessage on input.rcbEmpty - :has() as in section 6) and darkens under the pointer; the site pulled it over the caret
   with a negative margin at 10% opacity, which read as part of the arrow. No page positions it by hand any more. The More filters bubbles of
   QuotationsListV2 (.quote-more-filters) and SalesOrdersV2 (.so-more-filters) share the rules (28 Oct 2026): Telerik appends a RadToolTip to
   the form, outside .search-controls and .rpt, so their clear glyphs (the product, the broker, the quotation) need the second selector */
.rpt .search-controls table td,
body.v2 .RadToolTip:is(.quote-more-filters, .so-more-filters) .rtContent table td { position: relative; }
.rpt .search-controls table td .rcbClear,
body.v2 .RadToolTip:is(.quote-more-filters, .so-more-filters) .rtContent table td .rcbClear { position: absolute; right: 34px; bottom: 11px; display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; margin: 0; border-radius: 50%; opacity: 1; color: var(--faint); cursor: pointer; z-index: 1; }
.rpt .search-controls table td .rcbClear:before,
body.v2 .RadToolTip:is(.quote-more-filters, .so-more-filters) .rtContent table td .rcbClear:before { content: "\f00d"; font-family: FontAwesome; font-size: 11px; color: inherit; }
.rpt .search-controls table td .rcbClear:hover,
body.v2 .RadToolTip:is(.quote-more-filters, .so-more-filters) .rtContent table td .rcbClear:hover { opacity: 1 !important; background: var(--hover); color: var(--head); }
.rpt .search-controls table td .RadComboBox:has(input.rcbEmpty) + .rcbClear,
body.v2 .RadToolTip:is(.quote-more-filters, .so-more-filters) .rtContent table td .RadComboBox:has(input.rcbEmpty) + .rcbClear { display: none; }
/* the token box (the leads' Products, 14 Sep 2026): its underline like the combos' (its empty message: the rule below) */
.rpt .search-controls .RadAutoCompleteBox_Material .racTokenList:before { border-bottom-color: var(--line) !important; }
/* a field's value and its empty state (30 Sep 2026, the owner): a chosen value in the head colour; an EMPTY field stays italic and light -
   "there is no input yet" - at ONE level for every field of the card: the ink at half strength, as Telerik draws a combo's empty message
   (Telerik/ComboBox.css .rcbEmptyMessage opacity .5). The keyword box's placeholder (the site's placeholder grey at .5, 01-tags.css) was
   fainter than the combos' and the token box's was upright - both join the level. Not lower-cased: the italic half-strength already
   steps back from the caption above it */
.rpt .search-controls :is(.RadComboBox_Material, .RadDropDownList_Material, .RadInput_Material .riTextBox) { color: var(--head) !important; }
.rpt .search-controls :is(.RadComboBox_Material .rcbEmptyMessage, .RadDropDownList .rddlDefaultMessage, .RadInput_Material .riEmpty, .RadAutoCompleteBox_Material .racEmptyMessage),
.rpt :is(#searchArea, .searchArea) input::placeholder { color: var(--ink) !important; font-style: italic !important; opacity: .5 !important; }
/* a radio list in the search card (Reservations, Quotations; the pilot's Locked): the site's bold chosen option and dark labels give way to
   the type code - 11px ink, the chosen one 500 in the head colour */
.rpt .search-controls .RadRadioButtonList .rbText { font-size: 11px !important; font-weight: 400 !important; color: var(--ink) !important; text-transform: none; letter-spacing: 0; }
.rpt .search-controls .RadRadioButtonList .rbText.rbToggleRadioChecked { font-weight: 500 !important; color: var(--head) !important; }
.rpt .search-controls .rbHorizontalList .RadButton { padding: 0 12px 0 0; }
/* the last folded row: the More Filters / My Filters / Date Filter links and the Search button on one baseline, no air beyond
   the button's own height (the page's six-padding row bottom and the row's top are trimmed here, 12 Sep 2026) */
.rpt .search-controls tr.rpt-search-last > td { vertical-align: middle; padding-top: 6px; padding-bottom: 2px !important; white-space: normal; }
.rpt .search-controls tr.rpt-search-last .spotColor { color: var(--ink) !important; }
.rpt .search-controls tr.rpt-search-last .floatLeft { line-height: 24px; }
/* the three links of the row - More Filters (#calendarHover), My Filters (SearchFavorites' ul.nav) and Date Filter (a.calendar) -
   are one control: 11px ink, the icon on the left in the same ink, 6px before the words (My Filters gets a bookmark; its caret
   stays as the menu cue, faint) */
.rpt .search-controls tr.rpt-search-last #calendarHover, .rpt .search-controls tr.rpt-search-last ul.nav > li > a, .rpt .search-controls tr.rpt-search-last a.calendar { display: inline-flex; align-items: center; font-size: 11px !important; color: var(--ink) !important; text-decoration: none !important; }
.rpt .search-controls tr.rpt-search-last #calendarHover .fa, .rpt .search-controls tr.rpt-search-last a.calendar:before, .rpt .search-controls tr.rpt-search-last ul.nav > li > a:before { color: var(--ink); font-size: 11px; width: auto; margin: 0 6px 0 0; }
.rpt .search-controls tr.rpt-search-last ul.nav > li > a:before { content: "\f02e"; font-family: FontAwesome; }
.rpt .search-controls tr.rpt-search-last ul.nav > li > a .fa-caret-down { color: var(--faint); font-size: 10px; margin-left: 4px; }
/* a check box in the last row (the sales contracts' "Auto-renewing only", 29 Oct 2026): on the links' 24px line, centred, 11px ink, 14px before the next link - a RadCheckBox sat lower than Saved searches */
.rpt .search-controls tr.rpt-search-last .RadButton.rbCheckBox { display: inline-flex; align-items: center; vertical-align: middle; height: 24px; margin: 0 14px 0 0 !important; padding: 0 !important; }
.rpt .search-controls tr.rpt-search-last .RadButton.rbCheckBox .rbText { font-size: 11px !important; font-weight: 400 !important; color: var(--ink) !important; text-transform: none; letter-spacing: 0; }
.rpt .search-controls tr.rpt-search-last #calendarHover:hover, .rpt .search-controls tr.rpt-search-last ul.nav > li > a:hover, .rpt .search-controls tr.rpt-search-last a.calendar:hover { color: var(--accent) !important; }
/* SearchFavoritesV2 (20 Sep 2026): its opener is the same link (a.star, the star before the words) and, while a saved search is loaded
   and unchanged, its name as a grey chip with an x (= Reset) after it */
.rpt .search-controls tr.rpt-search-last .rpt-fav-opener { display: inline-flex; align-items: center; gap: 8px; line-height: 24px; }
.rpt .search-controls tr.rpt-search-last .rpt-fav-opener a.star { display: inline-flex; align-items: center; font-size: 11px !important; color: var(--ink) !important; text-decoration: none !important; }
.rpt .search-controls tr.rpt-search-last .rpt-fav-opener a.star:before { color: var(--ink); font-size: 11px; width: auto; margin: 0 6px 0 0; }
.rpt .search-controls tr.rpt-search-last .rpt-fav-opener a.star:hover { color: var(--accent) !important; }
.rpt .search-controls .rpt-fav-chip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 6px 3px 10px; border-radius: 11px; background: var(--grey-soft); color: var(--head); font-size: 10px; font-weight: 500; line-height: 1.4; white-space: nowrap; }
.rpt .search-controls .rpt-fav-chip a { color: var(--faint) !important; font-size: 13px; line-height: 1; text-decoration: none !important; }
.rpt .search-controls .rpt-fav-chip a:hover { color: var(--red) !important; }
/* the date filter's badge (CustomDateSelection writes <span class="badge badge-light xsmall"><b>Created On:</b> This Month</span> into
   #dateWndSelection): the grey pill of the code, the caption muted, the value in the head colour */
.rpt .search-controls #dateWndSelection .badge { display: inline-flex; align-items: center; gap: 5px; padding: 4px 11px; margin: 0; border: none; border-radius: 12px; background: var(--grey-soft); color: var(--head); font-size: 10px; font-weight: 500; line-height: 1.4; white-space: nowrap; }
.rpt .search-controls #dateWndSelection .badge b { font-weight: 400; color: var(--muted); }
.rpt .search-controls #dateWndSelection .badge .rightArrow { margin: 0 2px; }
/* the keyword box (a page moves its TextBox into <div class="rpt-find">): the one input that looks different */
.rpt .rpt-find { display: flex; align-items: center; gap: 8px; height: 34px; min-width: 200px; padding: 0 12px; border-radius: 8px; background: var(--band); border: 1px solid var(--line); box-sizing: border-box; }
.rpt .rpt-find .fa, .rpt .rpt-find .fa-solid { color: var(--faint); font-size: 12px; }
.rpt .rpt-find input[type="text"] { flex: 1 1 auto; min-width: 0; width: 100% !important; border: none !important; background: transparent !important; padding: 0 !important; box-shadow: none !important; color: var(--head); }
.rpt .rpt-find:focus-within { border-color: var(--accent-line); background: var(--card); }
/* a small filter menu beside a field (the leads list, 14 Sep 2026): inside the keyword box (.rpt-find > ul.nav, the match mode) or over a combo's
   right end (ul.nav.rpt-aid, the flag match) - the site's .nav float and margin reset, the glyph faint like the box's own icon */
.rpt .rpt-find > ul.nav { float: none; margin: 0; }
.rpt ul.nav.rpt-aid { display: inline-block; float: none; width: 20px; margin: 0 0 0 -25px; text-align: center; vertical-align: middle; }
/* a field that takes the menu AFTER it instead of over its end (.rpt-aided: the employees list's period - a date range, whose inputs run to
   their edge; 28 Sep 2026): a row, the field first, the glyph beside it */
.rpt .search-controls .rpt-aided { display: flex; align-items: center; gap: 4px; }
.rpt .search-controls .rpt-aided > :first-child { flex: 0 1 auto; min-width: 0; }
.rpt .search-controls .rpt-aided > ul.nav.rpt-aid { flex: none; margin: 0; }
/* a range in one cell (.rpt-range: "at least" and "at most" - the customers list's Shopify orders / average order, 13 Oct 2026): the two
   number boxes share the cell's width, a gap between them, each on the card's underline */
.rpt .search-controls .rpt-range { display: flex; align-items: center; gap: 10px; width: calc(100% - 4px); }
.rpt .search-controls .rpt-range > .RadInput { flex: 1 1 0; min-width: 0; width: auto !important; }
.rpt .search-controls .rpt-range > .RadInput .riTextBox { width: 100% !important; }
.rpt ul.nav.rpt-aid > li > a .fa { color: var(--faint); font-size: 12px; }
.rpt :is(.rpt-find > ul.nav, ul.nav.rpt-aid) > li > a { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; padding: 0; border-radius: 4px; text-decoration: none !important; }
.rpt :is(.rpt-find > ul.nav, ul.nav.rpt-aid) > li:hover > a { background: var(--hover); }
.rpt :is(.rpt-find > ul.nav, ul.nav.rpt-aid) > li:hover > a .fa { color: var(--muted); }
/* a RadToolTip (More Filters; 14 Sep 2026 - the salesperson scope left it for a ul.nav.rpt-aid menu on 30 Sep 2026): Telerik appends the popup to the form, OUTSIDE .rpt, so it is
   scoped on body.v2 like the windows - the frame of a menu, the captions as the search card's, the lists in the type code, an input in the
   underline look, a combo full width; .rpt-tip-row spaces the rows the page's inline margins used to */
body.v2 .RadToolTip.RadToolTip_Material { max-width: 480px; border: 1px solid var(--line) !important; border-radius: 12px; box-shadow: 0 12px 32px rgba(20, 30, 45, .18); color: var(--ink) !important; font-size: 11px; }
body.v2 .RadToolTip_Material .rtRelativeWrapper { padding: 14px 16px !important; }
body.v2 .RadToolTip.rtRoundedCorner .rtTitleBar { background: var(--band); border-bottom-color: var(--hair); }
body.v2 .RadToolTip_Material .rtTitleWrapper .rtTitle { color: var(--head); font-weight: 500; }
body.v2 .RadToolTip .rtContent .super-text { display: block; margin: 0 0 6px !important; font-size: 10px; font-weight: 500; letter-spacing: .05em; text-transform: uppercase; color: var(--faint); }
body.v2 .RadToolTip .rtContent :is(.RadCheckBoxList, .RadRadioButtonList) .rbText { font-size: 11px !important; font-weight: 400 !important; color: var(--ink) !important; }
body.v2 .RadToolTip .rtContent .rbVerticalList .RadButton.rbCheckBox { padding-bottom: 4px !important; }
body.v2 .RadToolTip .rtContent input[type="text"] { width: 100% !important; box-sizing: border-box; padding: 7px 0 6px; border: none; border-bottom: 1px solid var(--line); background: transparent; box-shadow: none; font: inherit; font-size: 12px; color: var(--head); }
body.v2 .RadToolTip .rtContent input[type="text"]:focus { border-bottom-color: var(--accent); box-shadow: 0 -1px 0 0 var(--accent) inset; }
body.v2 .RadToolTip .rtContent .RadComboBox { width: 100% !important; }
body.v2 .RadToolTip .rtContent hr { margin: 10px 0; border: none; border-top: 1px solid var(--hair); }
body.v2 .RadToolTip .rtContent .rpt-tip-row { margin: 14px 0 0; }
/* a glyph menu over a combo's end inside the bubble (the flag match of the sales orders' and the invoices' More filters): the .rpt rule of
   section 1 does not reach the bubble, so the site's .nav float + 10px margin dropped the glyph under the combo, the cell grew and its row
   neighbour (the Opportunity check box) sat lower (the sales orders UAT, 20 Oct 2026). Same box as section 1; the cells top-aligned */
body.v2 .RadToolTip .rtContent ul.nav.rpt-aid { display: inline-block; float: none; width: 20px; margin: 0 0 0 -25px; text-align: center; vertical-align: middle; }
body.v2 .RadToolTip .rtContent ul.nav.rpt-aid > li > a { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; padding: 0; border-radius: 4px; text-decoration: none !important; }
body.v2 .RadToolTip .rtContent ul.nav.rpt-aid > li > a .fa { color: var(--faint); font-size: 12px; }
body.v2 .RadToolTip .rtContent ul.nav.rpt-aid > li:hover > a { background: var(--hover); }
body.v2 .RadToolTip .rtContent table > tbody > tr > td { vertical-align: top; }
/* the Search button lives in the last row, so a folded box hides it; Enter in any field still searches */
.rpt .search-controls .RadButton.rbButton { height: 32px !important; padding: 0 20px !important; border: 1px solid var(--line) !important; border-radius: 8px !important; background: var(--band) !important; box-shadow: none !important; }
.rpt .search-controls .RadButton.rbButton .rbText { color: var(--head) !important; font-weight: 500; }
/* the toggle handle the site renders (#toggle-search from ToggleSearchBox.ascx) as a small round button on the card's edge */
.rpt #toggle-search { width: 26px; height: 26px; line-height: 24px; margin: -13px auto 0; bottom: -13px; border: 1px solid var(--line); border-radius: 50%; background: var(--card); color: var(--muted); font-size: 12px; box-shadow: 0 1px 3px rgba(20,30,45,.08); box-sizing: border-box; }
.rpt #toggle-search:hover { color: var(--head); background: var(--band); }
/* the card's own bottom (30 Sep 2026): the space under the folded row was three leftovers stacked - the pilots' inline .six-padding td 12px,
   the table's 8px and the handle's 13px in the flow (33px on Opportunities / Leads, 29px elsewhere). The handle leaves the flow (same place,
   centred on the card's edge), the card takes 14px of its own and the folded row the 8px every other list has: ~22px, and 16px under the
   Search button when unfolded. The row gaps of an unfolded card are untouched; phones keep section 11's */
.rpt :is(#searchArea, .searchArea):has(> #toggle-search) { padding-bottom: 14px; }
.rpt :is(#searchArea, .searchArea):has(> #toggle-search) > .search-controls { padding-bottom: 0; }
@media (min-width: 641px) { .rpt .search-controls.hide-search table tr:first-child > td { padding-bottom: 8px !important; } }
.rpt #toggle-search { position: absolute; left: 50%; bottom: -13px; margin: 0 0 0 -13px; z-index: 1; }

/* ---- 3 bar: .grid-controls as the page already has it (count | stats | tools) - a slim strip: the totals at the left, the tools as
   quiet text buttons at the right (a box only under the pointer), the record count as plain figures after them. On the light
   band (--band) since 17 Sep 2026 - the grid header under it went white, and two white strips read as one; a tool's hover
   box and the view switch's hover step to --band-2 so they still show on the band ---- */
.rpt .grid-controls, .rpt .grid-controls.with-long-total { position: relative; background: var(--band); border: 1px solid var(--frame); border-bottom: none; border-radius: 12px 12px 0 0; padding: 6px 12px 6px 16px; margin: 0; }
.rpt .grid-controls > table:first-child { font-size: inherit; }
.rpt .grid-controls > table:first-child > tbody > tr { display: flex; align-items: center; }
.rpt .grid-controls > table:first-child > tbody > tr > td { width: auto !important; text-align: left !important; padding: 0; }
.rpt .grid-controls > table:first-child > tbody > tr > td:nth-child(2) { display: flex; align-items: center; }
.rpt .grid-controls > table:first-child > tbody > tr > td:nth-child(2) > div:not(.totalBox) { display: contents; }   /* a server Panel around the figures (LeadsListV2 renders them server-side): its div does not become a flex item (14 Sep 2026) */
.rpt .grid-controls > table:first-child > tbody > tr > td:last-child { display: flex; align-items: center; justify-content: flex-end; gap: 2px; }
/* the numbers first (left), then the tools, then the record count at the far right */
.rpt .grid-controls > table:first-child > tbody > tr > td:nth-child(2) { order: 1; flex: 0 0 auto; }
.rpt .grid-controls > table:first-child > tbody > tr > td:last-child { order: 2; flex: 1 1 auto; }
.rpt .grid-controls > table:first-child > tbody > tr > td:first-child { order: 3; flex: 0 0 auto; margin-left: 8px; }
.rpt .grid-controls td:first-child .comment { display: inline-flex; align-items: center; height: 24px; padding: 0 4px 0 10px; border-left: 1px solid var(--line); color: var(--muted) !important; font-size: 11px; font-weight: 500; font-variant-numeric: tabular-nums; white-space: nowrap; }
/* the totals: label under value, an icon circle in front (pure CSS, the page markup is the old .totalBox) */
.rpt .grid-controls div.totalBox { position: relative; display: inline-flex; flex-direction: column-reverse; margin: 0 12px 0 0; padding: 0 12px 0 31px; border-right: 1px solid var(--hair); line-height: 1.2; font-weight: 400; }
.rpt .grid-controls div.totalBox:last-child { border-right: none; }
.rpt .grid-controls div.totalBox span:first-child { font-size: 10px; color: var(--muted); margin-top: 1px; }
.rpt .grid-controls div.totalBox span:nth-child(2) { font-size: 13px; font-weight: 700; color: var(--head); letter-spacing: -.01em; font-variant-numeric: tabular-nums; }   /* smaller and bolder (12 Sep 2026) */
.rpt .grid-controls div.totalBox:before { content: "\f155"; position: absolute; left: 0; top: 50%; margin-top: -12px; width: 24px; height: 24px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-family: FontAwesome; font-size: 11px; background: var(--blue-soft); color: var(--blue);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, currentColor 28%, transparent); }   /* a hairline ring in the icon's own colour (30 Sep 2026, the owner): the disc keeps its 10% fill and gets an edge on the bar's grey; one rule for every list's figures, it reads the glyph's colour */
.rpt .grid-controls div#totalBox2:before { content: "\f201"; background: var(--green-soft); color: var(--green); }
.rpt .grid-controls div#totalBox3:before { content: "\f24e"; background: var(--violet-soft); color: var(--violet); }   /* weighted: the scales, violet (13 Sep 2026) */
/* the leads list's three figures (14 Sep 2026): new this month (calendar, teal), qualified (trophy, green), overdue actions (clock, red);
   its expected value keeps the dollar of the base rule */
.rpt .grid-controls div#totalBoxNew:before { content: "\f271"; background: var(--teal-soft); color: var(--teal); }
.rpt .grid-controls div#totalBoxQualified:before { content: "\f091"; background: var(--green-soft); color: var(--green); }
.rpt .grid-controls div#totalBoxOverdue:before { content: "\f017"; background: var(--red-soft); color: var(--red); }
/* the tickets list's three figures (21 Sep 2026): breached SLA (the muted bell, red), unassigned (a person, amber), stale (the hourglass, grey) */
.rpt .grid-controls div#totalBoxBreached:before { content: "\f1f6"; background: var(--red-soft); color: var(--red); }
.rpt .grid-controls div#totalBoxUnassigned:before { content: "\f2c0"; background: var(--amber-soft); color: var(--amber); }
.rpt .grid-controls div#totalBoxStale:before { content: "\f252"; background: var(--grey-soft); color: var(--muted); }
/* the SLA violations page's three (21 Sep 2026): still open (the muted bell, red), escalated (the level-up arrow, amber), the two legs (a flag, grey) */
.rpt .grid-controls div#totalBoxOpen:before { content: "\f1f6"; background: var(--red-soft); color: var(--red); }
.rpt .grid-controls div#totalBoxEscalated:before { content: "\f148"; background: var(--amber-soft); color: var(--amber); }
.rpt .grid-controls div#totalBoxLegs:before { content: "\f024"; background: var(--grey-soft); color: var(--muted); }
/* the employees list's three (27 Sep 2026): pending approval (a person joining, amber), in probation (the hourglass starting, teal - an HR
   tenant only), locked accounts (the lock, red - the account administrator only) */
.rpt .grid-controls div#totalBoxApproval:before { content: "\f234"; background: var(--amber-soft); color: var(--amber); }
.rpt .grid-controls div#totalBoxProbation:before { content: "\f251"; background: var(--teal-soft); color: var(--teal); }
.rpt .grid-controls div#totalBoxLocked:before { content: "\f023"; background: var(--red-soft); color: var(--red); }
/* the WhatsApp inbox's three (2 Oct 2026): conversations (the speech bubbles, green), unread (the envelope, blue); waiting on us is the
   leads' clock (#totalBoxOverdue) */
.rpt .grid-controls div#totalBoxChats:before { content: "\f0e6"; background: var(--green-soft); color: var(--green); }
.rpt .grid-controls div#totalBoxUnread:before { content: "\f003"; }
/* the marketing templates' four (12 Oct 2026, docs/CRM-COMMUNICATION.md B1): ready / approved (the check, green), awaiting Meta (the
   hourglass, amber), rejected (the ban, red), no active version / not submitted (the pencil, grey) */
.rpt .grid-controls div#totalBoxTplReady:before { content: "\f00c"; background: var(--green-soft); color: var(--green); }
.rpt .grid-controls div#totalBoxTplPending:before { content: "\f252"; background: var(--amber-soft); color: var(--amber); }
.rpt .grid-controls div#totalBoxTplRejected:before { content: "\f05e"; background: var(--red-soft); color: var(--red); }
.rpt .grid-controls div#totalBoxTplDraft:before { content: "\f040"; background: var(--grey-soft); color: var(--muted); }
/* the Shopify segments' four (12 Oct 2026, docs/CRM-COMMUNICATION.md B3 - Marketing > Segments; eCommerce > Store reuses the customers and the last refresh): Shopify customers (the people, blue), in a segment (the pie,
   teal), changed segment in 30 days (the exchange arrows, violet), the last refresh (the circling arrows, grey) */
.rpt .grid-controls div#totalBoxSegCustomers:before { content: "\f0c0"; }
.rpt .grid-controls div#totalBoxSegSegmented:before { content: "\f200"; background: var(--teal-soft); color: var(--teal); }
.rpt .grid-controls div#totalBoxSegMoved:before { content: "\f0ec"; background: var(--violet-soft); color: var(--violet); }
.rpt .grid-controls div#totalBoxSegRefreshed:before { content: "\f021"; background: var(--grey-soft); color: var(--muted); }
/* the campaigns' four (13 Oct 2026, docs/CRM-COMMUNICATION.md B5 - the last 30 days' messages): sent (the paper plane, blue), delivered
   (the check, teal), read / opened (the eye, green), failed (the ban, red) */
.rpt .grid-controls div#totalBoxCmpSent:before { content: "\f1d8"; }
.rpt .grid-controls div#totalBoxCmpDelivered:before { content: "\f00c"; background: var(--teal-soft); color: var(--teal); }
.rpt .grid-controls div#totalBoxCmpOpened:before { content: "\f06e"; background: var(--green-soft); color: var(--green); }
.rpt .grid-controls div#totalBoxCmpFailed:before { content: "\f05e"; background: var(--red-soft); color: var(--red); }
/* a figure's share as its own quiet pill after the number (22 Oct 2026, the campaigns' Delivered / Read - the owner: "0 0%" read as one
   crowded figure): <small class="rpt-share">42%</small> inside the value span */
.rpt .grid-controls div.totalBox small.rpt-share { display: inline-block; margin-left: 6px; padding: 0 6px; border-radius: 8px; background: var(--grey-soft); color: var(--muted); font-size: 10px; font-weight: 500; line-height: 16px; letter-spacing: 0; vertical-align: 1px; }
/* eCommerce > Orders (E2, 13 Oct 2026): the filter's sales, refunds and net */
.rpt .grid-controls div#totalBoxShopSales:before { content: "\f290"; }
.rpt .grid-controls div#totalBoxShopRefunds:before { content: "\f0e2"; background: var(--red-soft); color: var(--red); }
.rpt .grid-controls div#totalBoxShopNet:before { content: "\f155"; background: var(--emerald-soft); color: var(--emerald); }
/* eCommerce > Abandoned checkouts (S7, 21 Oct 2026): the value in the open carts (the cart), the recovered count (the undo arrow, green), their value */
.rpt .grid-controls div#totalBoxAcOpen:before { content: "\f07a"; }
.rpt .grid-controls div#totalBoxAcRecovered:before { content: "\f0e2"; background: var(--green-soft); color: var(--green); }
.rpt .grid-controls div#totalBoxAcRecoveredValue:before { content: "\f155"; background: var(--emerald-soft); color: var(--emerald); }
/* the contacts list's three (12 Oct 2026): overdue actions is the leads' clock (#totalBoxOverdue); key contacts - on a deal (the address
   card, violet), no email (the envelope, amber) */
.rpt .grid-controls div#totalBoxKeyContacts:before { content: "\f2bb"; background: var(--violet-soft); color: var(--violet); }
.rpt .grid-controls div#totalBoxNoEmail:before { content: "\f003"; background: var(--amber-soft); color: var(--amber); }
/* the sales invoices list's three (14 Oct 2026, docs/INVOICES-V2.md 5.4): invoiced (the document, blue), collected (the money, green),
   outstanding (the hourglass, red - the figure's tooltip shows its four parts) */
.rpt .grid-controls div#totalBoxInvoiced:before { content: "\f0f6"; }
.rpt .grid-controls div#totalBoxCollected:before { content: "\f0d6"; background: var(--green-soft); color: var(--green); }
.rpt .grid-controls div#totalBoxOutstanding:before { content: "\f254"; background: var(--red-soft); color: var(--red); }
/* the sales orders list's three (15 Oct 2026, docs/SALESORDERS-V2.md): ordered (the cart, violet), invoiced (the invoices list's document,
   blue - #totalBoxInvoiced above), to invoice (the hourglass, amber - what the orders have not been invoiced for yet) */
.rpt .grid-controls div#totalBoxOrdered:before { content: "\f07a"; background: var(--violet-soft); color: var(--violet); }
.rpt .grid-controls div#totalBoxToInvoice:before { content: "\f252"; background: var(--amber-soft); color: var(--amber); }
/* the quotations list's two (28 Oct 2026, docs/QUOTATIONS-V2.md 5.3): the total with VAT (the document, blue - the invoices' glyph), the
   deals' forecast (the bullseye, indigo); no Advance figure (the owner, 26 Oct 2026) */
.rpt .grid-controls div#totalBoxQuoteTotal:before { content: "\f0f6"; }
.rpt .grid-controls div#totalBoxQuoteForecast:before { content: "\f140"; background: var(--indigo-soft); color: var(--indigo); }
/* the sales contracts list's three (28 Oct 2026, docs/SALESCONTRACTS-V2.md D-5): the live value (the handshake, green), what ends within
   90 days (the hourglass, amber), the renewal rate of the last 12 months (the refresh arrows, indigo) */
.rpt .grid-controls div#totalBoxActive:before { content: "\f2b5"; background: var(--green-soft); color: var(--green); }
.rpt .grid-controls div#totalBoxEnding:before { content: "\f252"; background: var(--amber-soft); color: var(--amber); }
.rpt .grid-controls div#totalBoxRenewal:before { content: "\f021"; background: var(--indigo-soft); color: var(--indigo); }
.rpt .grid-controls div.totalBox.hidden2 { display: none; }
/* the tools: every ul.nav caption, the .excel link and a plain tool link (a.rpt-tool with its glyph - "All campaigns", "Read again from the
   provider", 13 Oct 2026) look the same - quiet 24px text buttons, in DOM order */
.rpt .grid-controls ul.nav { float: none !important; margin: 0 !important; font-size: inherit; }
.rpt .grid-controls ul.nav > li { display: block; position: relative !important; bottom: auto !important; left: auto !important; margin: 0 !important; float: none !important; }
.rpt .grid-controls ul.nav > li > a, .rpt .grid-controls a.excel, .rpt .grid-controls a.rpt-tool {
    display: inline-flex !important; align-items: center; gap: 5px; height: 24px; padding: 0 8px !important; margin: 0 !important; float: none !important;
    border: 1px solid transparent; border-radius: 6px; background: transparent; color: var(--muted) !important; font-size: 11px; font-weight: 500; line-height: 1; white-space: nowrap; text-decoration: none !important; cursor: pointer;
}
.rpt .grid-controls ul.nav > li > a:hover, .rpt .grid-controls ul.nav > li:hover > a, .rpt .grid-controls a.excel:hover, .rpt .grid-controls a.rpt-tool:hover { background: var(--band-2); border-color: var(--line); color: var(--head) !important; }
.rpt .grid-controls ul.nav > li > a .fa, .rpt .grid-controls ul.nav > li > a i, .rpt .grid-controls a.excel:before, .rpt .grid-controls a.rpt-tool .fa { color: var(--muted); font-size: 11px; margin: 0; }
/* an .excel / .rpt-tool link INSIDE a tool's menu (the Export menu's entries) is a menu row, not a tool button: the row's full width, its
   band edge to edge on hover (21 Oct 2026: the tool rule above made the band hug the words) - section 3b's row, restated over the tool rule */
.rpt .grid-controls ul.nav > li > ul a:is(.excel, .rpt-tool) { display: flex !important; align-items: center; gap: 0; height: auto; padding: 7px 14px !important; border: none; border-radius: 0; color: var(--ink) !important; font-weight: 400; line-height: 1.4; }
.rpt .grid-controls ul.nav > li > ul a:is(.excel, .rpt-tool):hover { background: var(--band); color: var(--ink) !important; }
.rpt .grid-controls ul.nav > li > ul a.excel:before { width: 16px; margin: 0 6px 0 0; color: var(--faint); text-align: center; }
/* the view switch (.rpt-view: two icon segments, Expanded / Compact) - a hairline segmented control; the on segment in the accent tint */
.rpt .grid-controls .rpt-view { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: inline-flex; align-items: stretch; height: 24px; margin: 0; border: 1px solid var(--line); border-radius: 6px; overflow: hidden; background: var(--card); box-sizing: border-box; }   /* at the exact centre of the bar */
.rpt .grid-controls .rpt-view a { display: inline-flex; align-items: center; justify-content: center; width: 26px; color: var(--muted); font-size: 11px; text-decoration: none; }
.rpt .grid-controls .rpt-view a + a { border-left: 1px solid var(--line); }
.rpt .grid-controls .rpt-view a:hover { background: var(--band-2); color: var(--head); }
.rpt .grid-controls .rpt-view a.on { background: var(--accent-soft); color: var(--accent); }
.rpt .grid-controls ul[id$="ulSorting"] > li > a:after { content: "Sort"; }
.rpt .grid-controls ul[id$="ulGrouping"] > li > a:after { content: "Group"; }
/* a tool in its on-state (the Group tool while a field is chosen): the accent tint, as the view switch's on segment */
.rpt .grid-controls ul.nav.is-on > li > a { background: var(--accent-soft); border-color: transparent; color: var(--accent) !important; }
.rpt .grid-controls ul.nav.is-on > li > a .fa { color: var(--accent); }

/* ---- 3b menus: every hover menu on a page - the bar's Sort and Bulk Action, a row's gear, a card's gear, a popup's Actions - is one card: white,
   hairline, 8px corners, a soft shadow, 6px of air, one line per item with its icon in front, red for a delete. Optional parts:
   li.rpt-menu-head (a caption band, with a control at its right), li.rpt-menu-body (free content), li.rpt-menu-foot (an action
   row, a.rpt-menu-apply the primary button). The menu sits flush under its trigger with an invisible bridge over the 4px gap,
   so the pointer never leaves the hover chain on its way down (the site's .nav ul opened 8px up and 4px in). ---- */
:is(.rpt, .rv) ul.nav > li { position: relative; }
:is(.rpt, .rv) ul.nav > li > ul { top: 100% !important; right: 0 !important; left: auto !important; margin-top: 4px; min-width: 190px; padding: 6px 0 !important; text-align: left; background: var(--card); border: 1px solid var(--line); border-radius: 8px; box-shadow: 0 6px 20px rgba(20,30,45,.12); }
:is(.rpt, .rv) ul.nav > li > ul:before { content: ""; position: absolute; left: 0; right: 0; top: -8px; height: 8px; }   /* the bridge */
:is(.rpt, .rv) ul.nav > li > ul > li { float: none; padding: 0; margin: 0; line-height: 1.4; font-size: 11px; }
:is(.rpt, .rv) ul.nav > li > ul > li.lastone { border-top: 1px solid var(--hair); margin-top: 4px; padding-top: 4px; }
:is(.rpt, .rv) ul.nav > li > ul a { display: block; border: none; height: auto; padding: 7px 14px; color: var(--ink) !important; white-space: nowrap; text-decoration: none !important; background: transparent; }
:is(.rpt, .rv) ul.nav > li > ul a:hover { background: var(--band); }
/* the icon column: every glyph in a 16px box so the words align (the site's icon classes give some :before glyphs a width and others
   none - Planning Center's gear sat 4px left of the rest, 13 Sep 2026); an <i class="fa"> in front of the words gets the same box */
:is(.rpt, .rv) ul.nav > li > ul a:before, .rpt .myGrid ul.nav > li > ul a:before, :is(.rpt, .rv) ul.nav > li > ul a > i.fa:first-child { display: inline-block; width: 16px; margin: 0 6px 0 0; color: var(--faint); font-size: 11px; text-align: center; vertical-align: baseline; }   /* the .myGrid twin outranks the grid's own glyph rules (section 1) inside a row menu */
:is(.rpt, .rv) ul.nav > li > ul a.red, :is(.rpt, .rv) ul.nav > li > ul a.delete { color: var(--red) !important; }
:is(.rpt, .rv) ul.nav > li > ul a.delete:before { color: var(--red); }
:is(.rpt, .rv) ul.nav > li > ul > li.rpt-menu-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: -6px 0 6px; padding: 7px 14px; background: var(--band); border-bottom: 1px solid var(--hair); border-radius: 8px 8px 0 0; color: var(--muted); font-size: 10px; font-weight: 500; letter-spacing: .05em; text-transform: uppercase; }
:is(.rpt, .rv) ul.nav > li > ul > li.rpt-menu-body { padding: 4px 14px 2px; }
/* ---- 3c the grouped action menu (the owner, 28 Sep 2026: Operations/JobsList's layout on every V2 row gear). The site's structure from
   10-dropdown.css - div.cols-wrapper under the trigger holding ul.cols (one li.col per group: li.menu-header = the group's title, then its
   entries) and ul.cols-footer (the record-level actions: Edit, Lock, Delete) - in the 3b card: white, hairline, 8px corners, the soft
   shadow, flush under the trigger with the invisible bridge; the groups side by side split by a hairline, the titles in the head's 10px
   caps, the entries as 3b's lines (the 16px icon box, ink words, the band on hover, a delete red), the footer on the band. A group with no
   entry for this viewer, an empty footer and a gear with nothing at all are hidden here (:has) - no page script ---- */
:is(.rpt, .rv) ul.nav > li > .cols-wrapper { top: 100%; right: 0; left: auto; margin-top: 4px; padding: 0; text-align: left; background: var(--card); border: 1px solid var(--line); border-radius: 8px; box-shadow: 0 6px 20px rgba(20,30,45,.12); }
:is(.rpt, .rv) ul.nav > li > .cols-wrapper:before { content: ""; position: absolute; left: 0; right: 0; top: -8px; height: 8px; }   /* the bridge */
:is(.rpt, .rv) ul.nav .cols-wrapper > ul.cols > li.col { min-width: 170px; padding: 6px 0; border-right: 1px solid var(--hair); }
:is(.rpt, .rv) ul.nav .cols-wrapper > ul.cols > li.col:last-of-type { border-right: none; }
:is(.rpt, .rv) ul.nav .cols-wrapper > ul.cols > li.col:not(:has(a)) { display: none; }
:is(.rpt, .rv) ul.nav .cols-wrapper .menu-header { margin: 0 0 4px; padding: 4px 14px 6px; border-bottom: 1px solid var(--hair); color: var(--faint); font-size: 10px; font-weight: 500; letter-spacing: .05em; text-transform: uppercase; line-height: 1.4; cursor: default; }
:is(.rpt, .rv) ul.nav .cols-wrapper li { float: none; margin: 0; padding: 0; line-height: 1.4; font-size: 11px; }
:is(.rpt, .rv) ul.nav .cols-wrapper li a { display: block; border: none; height: auto; padding: 7px 14px; color: var(--ink) !important; white-space: nowrap; text-decoration: none !important; background: transparent; }
:is(.rpt, .rv) ul.nav .cols-wrapper li a:hover { background: var(--band); }
:is(.rpt, .rv) ul.nav .cols-wrapper li a:before, .rpt .myGrid ul.nav .cols-wrapper li a:before { display: inline-block; width: 16px; margin: 0 6px 0 0; color: var(--faint); font-size: 11px; text-align: center; vertical-align: baseline; }
:is(.rpt, .rv) ul.nav .cols-wrapper li a:is(.red, .delete) { color: var(--red) !important; }
:is(.rpt, .rv) ul.nav .cols-wrapper li a.delete:before { color: var(--red); }
:is(.rpt, .rv) ul.nav .cols-wrapper > ul.cols-footer { gap: 2px 4px; padding: 6px 8px; background: var(--band); border-top: 1px solid var(--hair); border-radius: 0 0 8px 8px; }
:is(.rpt, .rv) ul.nav .cols-wrapper > ul.cols-footer:not(:has(a)) { display: none !important; }
:is(.rpt, .rv) ul.nav .cols-wrapper > ul.cols-footer > li a { padding: 6px 10px; border-radius: 6px; }
/* the footer's entries side by side, one size: an entry this viewer does not get leaves its <li> empty (the control renders nothing), and
   the empty slot took a share of the flex gap - Edit / Clone / Cancel / Delete sat unevenly on a pending order (the sales orders UAT, 20 Oct
   2026); every entry is one inline-flex box with the padding above (it outranks 10-dropdown.css's 4px 6px), whatever control renders it */
:is(.rpt, .rv) ul.nav .cols-wrapper > ul.cols-footer { align-items: center; }
:is(.rpt, .rv) ul.nav .cols-wrapper > ul.cols-footer > li:not(:has(a)) { display: none !important; }
:is(.rpt, .rv) ul.nav .cols-wrapper > ul.cols-footer > li > a { display: inline-flex; align-items: center; line-height: 1.4; }
:is(.rpt, .rv) ul.nav .cols-wrapper > ul.cols-footer > li a:hover { background: var(--band-2); }
:is(.rpt, .rv) ul.nav .cols-wrapper > ul.cols:not(:has(li.col a)) { display: none !important; }            /* only footer actions: the footer alone */
:is(.rpt, .rv) ul.nav:has(> li > .cols-wrapper):not(:has(.cols-wrapper a)) { display: none; }              /* nothing for this viewer: no gear */
:is(.rpt, .rv) ul.nav > li > ul > li.rpt-menu-foot { margin: 6px 0 -6px; padding: 8px 14px; border-top: 1px solid var(--hair); text-align: right; }
:is(.rpt, .rv) ul.nav > li > ul a.rpt-menu-apply { display: inline-block; padding: 5px 16px; border-radius: 14px; background: var(--accent); color: #fff !important; font-weight: 500; }
:is(.rpt, .rv) ul.nav > li > ul a.rpt-menu-apply:hover { background: var(--accent-ink); }
/* Telerik radio and check lists inside a menu (the Sort menu, the flag match, the salesperson scope): quiet 11px labels; the pair in the head
   keeps its case and size */
:is(.rpt, .rv) ul.nav > li > ul :is(.RadRadioButtonList, .RadCheckBoxList) { display: inline-block; }
:is(.rpt, .rv) ul.nav > li > ul :is(.RadRadioButtonList, .RadCheckBoxList) .rbText { color: var(--ink) !important; font-size: 11px; font-weight: 400; text-transform: none; letter-spacing: 0; }
/* a check list is the radio list's twin in a menu: the site makes a vertical one 7px apart and a ticked label bold (Telerik/OtherControls.css) -
   back to Telerik's 4px and the plain weight, so the scope's two blocks share one rhythm (30 Sep 2026) */
:is(.rpt, .rv) ul.nav > li > ul .RadCheckBoxList .rbVerticalList .RadButton.rbCheckBox { padding-bottom: 4px !important; }
:is(.rpt, .rv) ul.nav > li > ul .RadCheckBoxList .rbText { font-weight: 400 !important; }
:is(.rpt, .rv) ul.nav > li > ul .rpt-menu-head .RadRadioButtonList .rbText { font-size: 10px; color: var(--muted) !important; }
:is(.rpt, .rv) ul.nav > li > ul .rpt-menu-body .RadRadioButtonList .rbl-item { margin: 2px 0; }
:is(.rpt, .rv) ul.nav > li > ul.rpt-menu-sort { min-width: 300px; }

/* ---- 4 grid: .myGrid.sexy-grid as the page already has it ---- */
/* fixed layout: the column widths come from the header cells (HeaderStyle-Width) and the table's slack, never from the rows'
   content - so Expanded and Compact share one header and a switch only changes the row height (12 Sep 2026) */
.rpt .myGrid.sexy-grid { margin: 0; padding: 0; background: var(--card); border: 1px solid var(--frame); border-top: none; border-radius: 0 0 12px 12px; border-collapse: separate !important; table-layout: fixed; box-sizing: border-box; }
/* the header: on the card's own white, the words in the ink (a shade darker than the captions), a neutral hairline (--line)
   under it. The 2px ACCENT rule it wore from 17 Sep 2026 went on 30 Sep 2026 (the owner: "cleaner without this line") - it was
   the one accent on the page that meant nothing, right above the column of accent numbers and names; the header now stands off
   by tone: a white strip between the bar's --band and the first row's --alt stripe (the stripes start on the first row since
   the same day), the hairline keeping the edge the ~1.05 : 1 tone step alone would lose. Not bolder: in capitals with tracking
   the header is already the heaviest text of the grid. The grey band it had before 17 Sep (--band-2) read as the page's own
   grey through the card ("too blended, too greyish"); the group bands keep --band-2, so a band and the header do not look alike */
.rpt .myGrid.sexy-grid th { background: var(--card) !important; color: var(--ink); font-weight: 500; font-size: 11px; letter-spacing: .05em; text-transform: uppercase; text-shadow: none; padding: 10px 10px 9px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line) !important; white-space: nowrap; }
.rpt .myGrid.sexy-grid th:first-child, .rpt .myGrid.sexy-grid th:last-child { border-radius: 0; }
/* the check / menu columns stay slim (a fixed layout needs real widths, not 1%); keyed on their classes (col-check / col-menu, which the
   checklist gives both), not on their position - a page that takes a column out of the GridView's collection (LeadsListV2: the check
   column for a viewer without the bulk tools) would otherwise push its last data header into the 30px slot (14 Sep 2026). The table's
   slack spreads over the sized columns */
.rpt .myGrid.sexy-grid th.col-check, .rpt .myGrid.sexy-grid th.col-menu { width: 30px !important; white-space: nowrap; }
/* the check column (HeaderStyle / ItemStyle CssClass="col-check") and the row-menu column (CssClass="col-menu") */
.rpt .myGrid.sexy-grid th.col-check { padding: 8px; }
.rpt .myGrid.sexy-grid th.col-check .RadCheckBox { padding: 0; }     /* the check-all box (the pilot carries the same as an inline style) */
.rpt .myGrid.sexy-grid > tbody > tr > td.col-check { padding: 9px 10px 9px 0; white-space: nowrap; }
.rpt .myGrid.sexy-grid th.col-menu { padding: 0 !important; }
.rpt .myGrid.sexy-grid > tbody > tr > td.col-menu { padding: 9px 10px 9px 0 !important; white-space: nowrap; }
.rpt .myGrid.sexy-grid th:first-child, .rpt .myGrid.sexy-grid > tbody > tr > td:first-child { padding-left: 16px; }
.rpt .myGrid.sexy-grid th:last-child, .rpt .myGrid.sexy-grid > tbody > tr > td:last-child { padding-right: 16px; }
.rpt .myGrid.sexy-grid th a { color: var(--muted); }
.rpt .myGrid.sexy-grid > tbody > tr > td { padding: 9px 10px 10px; border-top: none !important; border-bottom: 1px solid var(--hair) !important; vertical-align: top; line-height: 1.5; }   /* one padding for both views (12 Sep 2026): a switch only folds the lines */
/* rows alternate --alt / white (the client's call, 11 Sep 2026), STARTING ON THE FIRST ROW since 30 Sep 2026 (the owner): the white
   header then stands off a tinted first row, which is what lets it drop its accent rule. The header is tbody's child 1, so the
   first row is "even"; the pointer darkens either to --hover */
.rpt .myGrid.sexy-grid > tbody:first-child > tr:nth-child(odd of :not(.rpt-group)) { background: transparent; }     /* "of" leaves the group bands out of the count */
.rpt .myGrid.sexy-grid > tbody:first-child > tr:nth-child(even of :not(.rpt-group)) { background: var(--alt); }
.rpt .myGrid.sexy-grid > tbody:first-child > tr:not(:first-child):not(:last-child):not(.rpt-group):hover { background: var(--hover); }
/* the empty result (EmptyDataRowStyle-CssClass="ping-pong"): the record view's empty sentence, not the site's 320px illustration (14 Sep 2026) */
.rpt .myGrid.sexy-grid tr.ping-pong, .rpt .myGrid.sexy-grid tr.ping-pong:hover { height: auto; background: none; }
.rpt .myGrid.sexy-grid tr.ping-pong > td { padding: 28px 16px !important; font-size: 11px; font-style: italic; color: var(--muted); text-align: left; line-height: 1.5; }
/* grouping (13 Sep 2026): the Group tool orders the list by a field and the page script opens one band before each group - tr.rpt-group: a
   caret (turned while the group is folded), the name (a stage carries the board's colour dot), the count pill, the value across the WHOLE
   filter (never the page). One cell spanning the table; a click folds the group's rows. The header's tint (--band-2): --band is one unit
   from the --alt stripe and would melt into it */
.rpt .myGrid.sexy-grid > tbody > tr.rpt-group { background: var(--band-2) !important; cursor: pointer; }
.rpt .myGrid.sexy-grid > tbody > tr.rpt-group:hover { filter: brightness(.97); }
.rpt .myGrid.sexy-grid > tbody > tr.rpt-group > td { padding: 7px 16px !important; border-bottom: 1px solid var(--line) !important; vertical-align: middle; }
.rpt .rpt-group-cell { display: flex; align-items: center; gap: 8px; }
.rpt .rpt-group-caret { width: 12px; text-align: center; color: var(--faint); font-size: 12px; transition: transform .15s; }
.rpt tr.rpt-group.is-collapsed .rpt-group-caret { transform: rotate(-90deg); }
.rpt .rpt-group-name { font-size: 12px; font-weight: 500; color: var(--head); }
.rpt .rpt-group-sum { margin-left: 4px; font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; }
.rpt .rpt-group-sum .d-lbl { font-size: 10px; color: var(--faint); margin-right: 2px; }
.rpt .rpt-group-sum b { font-weight: 500; color: var(--head); }
.rpt .myGrid.sexy-grid td.border-left { border-left: 1px solid var(--hair); }
.rpt .myGrid.sexy-grid td p { margin: 6px 0 0; }
.rpt .myGrid.sexy-grid td p:empty { display: none; }
/* the vocabulary the cells already use */
/* TYPE CODE of a row - everything is 11px unless listed here:
     amount 13px (weight 500)  |  captions (.super-text: Account, Owner, Team) 10px faint, on their own line above the value (.d-inline for a small field's)
     record name (a.bold) 700  |  the customer (.label) 500  |  everything else 400
   LINKS - three kinds: a major link is 11px ink with a dotted underline (closing date, job type, owner);
     a minor link (.small / .xsmall: [select], Add Flag, Services) is 10px muted with the same underline;
     an action pill (.badge-light, .pill) is the grey pill - View Quotation, the forecast type, a linked document. */
.rpt .myGrid.sexy-grid { font-size: 11px; }
.rpt .myGrid.sexy-grid td > div.super-text:first-child { display: block; margin: 0 0 1px; font-size: 10px; color: var(--accent); }       /* the document number, its own line above the name */
.rpt .myGrid.sexy-grid td > a.bold > .super-text:first-child { color: var(--accent); line-height: 1.5; }                                    /* ... or inside the name's link (V2 lists, 24 Sep 2026): a click on either opens the record */
.rpt .myGrid.sexy-grid .super-text { display: block; margin: 0 0 1px; font-size: 10px; color: var(--faint); font-weight: 400; }           /* a caption, its own line above its value (the client's call, 12 Sep 2026) */
.rpt .myGrid.sexy-grid .super-text.d-inline { display: inline; margin: 0 5px 0 0; }                                                          /* ... except a small field's (Margin 9.5%) */
.rpt .myGrid.sexy-grid .super-text:empty { display: none; }
.rpt .myGrid.sexy-grid a.bold { font-weight: 700; color: var(--accent) !important; line-height: 1.4; }
.rpt .myGrid.sexy-grid .label { font-size: 11px; font-weight: 500; color: var(--head); line-height: 1.4; }
.rpt .myGrid.sexy-grid a.bold, .rpt .myGrid.sexy-grid a.label { text-decoration: none; border: none; }
.rpt .myGrid.sexy-grid a.bold:hover, .rpt .myGrid.sexy-grid a.label:hover { color: var(--accent); }
.rpt .myGrid.sexy-grid .comment, .rpt .myGrid.sexy-grid a.comment { color: var(--muted) !important; }
.rpt .myGrid.sexy-grid small, .rpt .myGrid.sexy-grid .small, .rpt .myGrid.sexy-grid .xsmall { font-size: 10px; }
.rpt .myGrid.sexy-grid td a { color: var(--ink); text-decoration: none; }
.rpt .myGrid.sexy-grid td a:hover { color: var(--accent); }
.rpt .myGrid.sexy-grid td a.small, .rpt .myGrid.sexy-grid td a.xsmall, .rpt .myGrid.sexy-grid td small a { font-size: 10px; color: var(--muted); }
.rpt .myGrid.sexy-grid .italic small { color: var(--faint) !important; }
.rpt .myGrid.sexy-grid .red, .rpt .myGrid.sexy-grid a.red { color: var(--red) !important; }
.rpt .myGrid.sexy-grid .upper { text-transform: none; }
/* THE LATEST ACTIVITY (.d-activity, the block under the record name, rendered by WsFormat.ActivityLine): exactly two 10px
   lines - line 1 the note in italics, one line, cut with an ellipsis (the full text is a tipify tooltip; a reminder keeps
   its colour, icon and link, an audit log its changes link), line 2 when and who; the activity-log icon inline at the right */
.rpt .myGrid.sexy-grid .d-activity { display: flex; align-items: flex-start; gap: 8px; margin-top: 8px; padding-top: 7px; border-top: 1px dashed var(--hair); color: var(--ink); font-size: 10px; line-height: 1.5; }
.rpt .myGrid.sexy-grid .d-activity .truncate { flex: 1 1 auto; min-width: 0; float: none; overflow: hidden; white-space: normal; font-style: normal; font-size: 10px; }
.rpt .myGrid.sexy-grid .d-activity .d-act-text { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-style: italic; }
.rpt .myGrid.sexy-grid .d-activity .d-act-text a { font-style: italic; }
.rpt .myGrid.sexy-grid .d-activity .d-act-text span[class] { margin-left: 4px; }
.rpt .myGrid.sexy-grid .d-activity .d-act-meta { display: block; font-size: 10px; color: var(--faint) !important; }
.rpt .myGrid.sexy-grid .d-activity a.write-comment { flex: 0 0 auto; float: none; margin: 1px 0 0; }
.rpt .myGrid.sexy-grid .invisible-chk { margin-left: 6px; }
/* the stage cell: badge first, then closing date / job type as major links, the linked document as an action pill */
.rpt .myGrid.sexy-grid a.bell { margin-left: 0 !important; font-size: 11px; }
.rpt .myGrid.sexy-grid a.bell:before { font-size: 10px; color: var(--faint); margin: 0 4px 0 0; width: auto; }
.rpt .myGrid.sexy-grid a.bell.red:before { color: var(--red); }
/* the flags line: the tokens wrap inside the cell, centred like the stage badge; the flag glyph shows only on the empty
   "Add Flag" state (a.flag.comment) - with tokens present it said nothing (the owner, 20 Sep 2026) */
.rpt .myGrid.sexy-grid a.flag { display: inline-flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 5px; max-width: 100%; margin: 0 !important; }
.rpt .myGrid.sexy-grid a.flag:before { color: var(--faint); font-size: 12px; width: auto; margin: 0; }
.rpt .myGrid.sexy-grid a.flag:not(.comment):before { display: none; }
.rpt .myGrid.sexy-grid a.flag .badge { background: var(--faint) !important; color: #fff !important; margin: 0; padding: 3px 9px; border-radius: 10px; font-size: 10px; font-weight: 500; }
.rpt .myGrid.sexy-grid .badge-large ~ p, .rpt .myGrid.sexy-grid .badge-large ~ div { margin-top: 8px; }
/* the Value cell: "USD 34,781" on one line (the currency a caption before the amount), "Margin 9.5%" under it, then the forecast type as a pill with the win chance in it */
.rpt .myGrid.sexy-grid .d-amount { font-size: 14px; font-weight: 500; color: var(--head); font-variant-numeric: tabular-nums; white-space: nowrap; line-height: 1.3; }
.rpt .myGrid.sexy-grid .d-amount .d-lbl { font-size: 10px; font-weight: 400; color: var(--faint); margin-right: 4px; letter-spacing: .04em; }
.rpt .myGrid.sexy-grid .d-amount a { color: var(--head); }
.rpt .myGrid.sexy-grid .d-dot { color: #cfd8dc; padding: 0 4px; }
.rpt .myGrid.sexy-grid a.pill { text-decoration: none; }
/* the stage badge: the setup colour as a soft pill, taller than anything else in its cell, air below it */
.rpt .myGrid.sexy-grid .badge { border-radius: 10px; font-size: 11px; font-weight: 500; padding: 3px 9px; margin: 0 4px 0 0; }
.rpt .myGrid.sexy-grid .badge-large { display: inline-block !important; width: auto; padding: 6px 14px !important; margin: 0 0 12px !important; border-radius: 14px !important; font-size: 12px !important; font-weight: 500; letter-spacing: .01em; }
.rpt .myGrid.sexy-grid .badge:hover { opacity: 1 !important; filter: brightness(.96); }
/* the stage badge keeps the EXACT colour the admin picked in the CRM setup (the site's badge-* hexes) as its 12-14% tint; the text is a
   DEEPER SHADE of that colour (30 Sep 2026, the owner - the pastel text on a pastel tint read washed out, 2.7 - 4.75 : 1): the five light
   hues at 65% of the colour, navy and purple at 82% (the --accent-ink formula), red at 88% (at 82% it would read as the Red tenant's
   accent #a3243e) - every badge 4.6 - 6.4 : 1 on its own tint. The wizard step, the board dot and the popup stepper keep the exact hex */
:is(.rpt .myGrid.sexy-grid, .rv) .badge-gray { background: color-mix(in srgb, var(--stage-gray) 14%, white) !important; color: color-mix(in srgb, var(--stage-gray) 65%, black) !important; }
:is(.rpt .myGrid.sexy-grid, .rv) .badge-gold { background: color-mix(in srgb, var(--stage-gold) 14%, white) !important; color: color-mix(in srgb, var(--stage-gold) 65%, black) !important; }
:is(.rpt .myGrid.sexy-grid, .rv) .badge-blue { background: color-mix(in srgb, var(--stage-blue) 12%, white) !important; color: color-mix(in srgb, var(--stage-blue) 65%, black) !important; }
:is(.rpt .myGrid.sexy-grid, .rv) .badge-navy { background: color-mix(in srgb, var(--stage-navy) 12%, white) !important; color: color-mix(in srgb, var(--stage-navy) 82%, black) !important; }
:is(.rpt .myGrid.sexy-grid, .rv) .badge-purple { background: color-mix(in srgb, var(--stage-purple) 12%, white) !important; color: color-mix(in srgb, var(--stage-purple) 82%, black) !important; }
:is(.rpt .myGrid.sexy-grid, .rv) .badge-green { background: color-mix(in srgb, var(--stage-green) 14%, white) !important; color: color-mix(in srgb, var(--stage-green) 65%, black) !important; }
:is(.rpt .myGrid.sexy-grid, .rv) .badge-orange { background: color-mix(in srgb, var(--stage-orange) 12%, white) !important; color: color-mix(in srgb, var(--stage-orange) 65%, black) !important; }
:is(.rpt .myGrid.sexy-grid, .rv) .badge-red { background: color-mix(in srgb, var(--stage-red) 12%, white) !important; color: color-mix(in srgb, var(--stage-red) 88%, black) !important; }
.rpt .myGrid.sexy-grid .badge-light { background: var(--grey-soft) !important; border: none; padding: 3px 10px !important; margin: 0; color: var(--muted) !important; font-size: 11px; }   /* an action pill: "View Quotation", a linked document */
.rpt .myGrid.sexy-grid .badge-light:hover { background: #e3e8ec !important; color: var(--head) !important; }
/* a SMALL inline chip flush with the text it rides on (QuotationsListV2, 29 Oct 2026 - the owner's W-1: a full badge on a line of its own
   made the first column twice as tall): the deal number after the customer, a flag token in the flags line - the a.flag .badge size on the
   grey-soft fill, 2px of vertical padding so it adds no line height; a link of it darkens on hover like an action pill */
.rpt .myGrid.sexy-grid .rpt-chip-sm { display: inline-flex; align-items: center; padding: 2px 7px; margin: 0 4px 0 0; border-radius: 9px; background: var(--grey-soft); color: var(--muted) !important; font-size: 10px; font-weight: 500; line-height: 12px; white-space: nowrap; text-decoration: none !important; vertical-align: 1px; }
.rpt .myGrid.sexy-grid a.rpt-chip-sm:hover { background: #e3e8ec; color: var(--head) !important; }
.rpt .myGrid.sexy-grid .label .comment { font-weight: 400; }   /* the deal's contact after the customer on the customer's 500-weight line (W-6) */
.rpt .myGrid.sexy-grid .pill { font-size: 11px; padding: 3px 10px; line-height: 1; white-space: nowrap; }
/* a row of state pills in one cell (the sales orders' Delivered / Reserved / To transfer): they wrap with a gap, never touching or stacking
   edge to edge in a narrow column (the UAT of 20 Oct 2026); centred in a centred cell. Hidden pills render nothing (runat + visible) */
.rpt .myGrid.sexy-grid p.rpt-pill-row { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.rpt .myGrid.sexy-grid td.alignCenter > p.rpt-pill-row { justify-content: center; }
.rpt .myGrid.sexy-grid .pill a { color: inherit; text-decoration: none; }      /* the forecast pill: the type is the link, the chance sits after it ("Upside 70%") */
.rpt .myGrid.sexy-grid .pill a:hover { color: var(--accent); }
/* the conversion pill (LeadsListV2: Convert Lead / Qualify To Contact, 14 Sep 2026): the one green ACTION pill of a row - the step that turns
   the lead into a customer; it keeps its green on hover and dips like a badge, its icon 3px from the label */
.rpt .myGrid.sexy-grid .pill.k-green a:hover { color: var(--green); }
.rpt .myGrid.sexy-grid .pill.k-green:hover { filter: brightness(.96); }
.rpt .myGrid.sexy-grid .pill > a > i.fa:first-child { margin-right: 3px; }
.rpt .myGrid.sexy-grid .lock.red { display: inline-block; margin-top: 8px; padding: 2px 9px; border-radius: 10px; background: var(--red-soft); color: var(--red) !important; font-size: 11px; font-weight: 500; }
/* the presence dot after an employee's number (EmployeesV2, 27 Sep 2026 - the old list's photo badge without the photo): green online,
   amber away, nothing offline; its data-tip bubble says since when */
.rpt .myGrid.sexy-grid .rpt-presence { display: inline-block; width: 7px; height: 7px; margin: 0 0 1px 6px; border-radius: 50%; background: var(--green); vertical-align: middle; }
.rpt .myGrid.sexy-grid .rpt-presence.is-away { background: var(--amber); }
/* a value with no break opportunity (an email address) wraps inside its cell instead of running into the next column */
.rpt .myGrid.sexy-grid .rpt-break { overflow-wrap: anywhere; }
/* the Mailbox pill (a.rpt-mailbox): the one accent pill in a row - it opens the opportunity's Microsoft 365 mailbox. a.rpt-chip is the icon-only
   chip beside the contact person, the same tint: the mailbox's on the pilot, WhatsApp's on the leads list (14 Sep 2026) */
.rpt .myGrid.sexy-grid :is(a.rpt-mailbox, a.rpt-chip) { display: inline-flex; align-items: center; gap: 6px; padding: 4px 11px; border-radius: 12px; background: var(--accent-soft); color: var(--accent) !important; font-size: 11px; font-weight: 500; text-decoration: none; }
.rpt .myGrid.sexy-grid :is(a.rpt-mailbox, a.rpt-chip) .fa { font-size: 11px; }
.rpt .myGrid.sexy-grid :is(a.rpt-mailbox, a.rpt-chip):hover { background: var(--accent); color: #fff !important; }
.rpt .myGrid.sexy-grid a.rpt-chip { padding: 3px 8px; margin-left: 6px; font-size: 10px; vertical-align: 1px; }
/* the unread count on the WhatsApp chip (docs/WHATSAPP.md S2) */
.rpt .myGrid.sexy-grid a.rpt-chip .wa-unread { min-width: 16px; padding: 0 5px; margin-left: 4px; border-radius: 8px; background: var(--green); color: #fff; font-size: 10px; line-height: 16px; text-align: center; }
/* meaning pills for new markup (.pill k-*), same tints as the badges */
.rpt .pill, .pill { display: inline-block; padding: 0 8px; border-radius: 10px; font-weight: 500; white-space: nowrap; }
.pill.k-blue, .pill.blue { background: var(--blue-soft); color: var(--blue); }
.pill.k-green, .pill.green { background: var(--green-soft); color: var(--green); }
.pill.k-emerald { background: var(--emerald-soft); color: var(--emerald); }
.pill.k-red, .pill.red { background: var(--red-soft); color: var(--red); }
.pill.k-amber { background: var(--amber-soft); color: var(--amber-ink); }
.pill.k-orange, .pill.orange { background: var(--orange-soft); color: var(--orange); }
.pill.k-violet, .pill.purple { background: var(--violet-soft); color: var(--violet); }
.pill.k-teal { background: var(--teal-soft); color: var(--teal); }
.pill.k-indigo, .pill.navy { background: var(--indigo-soft); color: var(--indigo); }
.pill.k-grey, .pill.gray, .pill.gold { background: var(--grey-soft); color: var(--muted); }
/* a LEVEL tag (.rpt-prio k-*: the ticket's priority, 21 Sep 2026) - not a state, so it must not read as a second stage badge (the owner):
   an OUTLINED tag with square corners, a dot in the meaning colour, 10px uppercase - beside the badge in the grid, in the popup's facts.
   Critical red, High amber, Low grey; Normal is never shown */
:is(.rpt .myGrid.sexy-grid, .rv) .rpt-prio { display: inline-flex; align-items: center; gap: 5px; padding: 2px 7px 2px 6px; border: 1px solid var(--line); border-radius: 4px; background: transparent; color: var(--muted); font-size: 10px; font-weight: 500; letter-spacing: .04em; text-transform: uppercase; line-height: 14px; white-space: nowrap; vertical-align: 2px; }
:is(.rpt .myGrid.sexy-grid, .rv) .rpt-prio:before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--faint); flex: none; }
:is(.rpt .myGrid.sexy-grid, .rv) .rpt-prio.k-red { border-color: color-mix(in srgb, var(--red) 40%, white); color: var(--red); }
:is(.rpt .myGrid.sexy-grid, .rv) .rpt-prio.k-red:before { background: var(--red); }
:is(.rpt .myGrid.sexy-grid, .rv) .rpt-prio.k-amber { border-color: color-mix(in srgb, var(--amber) 55%, white); color: var(--amber-ink); }
:is(.rpt .myGrid.sexy-grid, .rv) .rpt-prio.k-amber:before { background: var(--amber); }
/* the reply chip on the ticket's first line (TicketListV2, 24 Sep 2026): the comment glyph and the reply count after the key, inside the
   one link (key, chip, summary) to the conversation in both views; accent while the requester has the last word on an open ticket (the desk owes an answer) */
.rpt .myGrid.sexy-grid .rpt-chat { display: inline-flex; align-items: center; gap: 3px; margin-left: 6px; padding: 1px 7px; border-radius: 9px; background: var(--grey-soft); color: var(--muted) !important; font-size: 10px; font-weight: 500; line-height: 14px; letter-spacing: 0; text-transform: none; text-decoration: none !important; vertical-align: 1px; }
.rpt .myGrid.sexy-grid .rpt-chat:hover { background: var(--band-2); color: var(--head) !important; }
.rpt .myGrid.sexy-grid .rpt-chat.is-owed { background: var(--accent-soft); color: var(--accent) !important; }
.rpt .myGrid.sexy-grid .rpt-chat .fa { font-size: 10px; }
/* the status as the transition button (Jira's status menu, TicketListV2 24 Sep 2026): the badge with a caret opens the moves this viewer may
   make, under the badge; the next step is the green entry. The badge's own bottom margin moves to the menu's ul so the list opens right
   under the badge (a folded row has no margin at all) */
.rpt .myGrid.sexy-grid ul.nav.rpt-status { float: none; display: inline-block; vertical-align: baseline; margin: 0 0 12px; font-size: inherit; }   /* baseline = the badge's text: the priority tag beside it keeps its line */
.rpt .myGrid.sexy-grid ul.nav.rpt-status > li > a.badge-large { margin: 0 !important; text-decoration: none !important; }
.rpt .myGrid.sexy-grid ul.nav.rpt-status > li > a.badge-large .fa-caret-down { margin-left: 6px; font-size: 10px; opacity: .7; }
.rpt .myGrid.sexy-grid ul.nav.rpt-status > li > ul { left: 50% !important; right: auto !important; transform: translateX(-50%); }
.rpt .myGrid.sexy-grid > tbody > tr.is-folded ul.nav.rpt-status { margin: 0; }
.rpt .myGrid.sexy-grid ul.nav.rpt-status ~ p { margin-top: 8px; }   /* the lines under the badge keep the air the badge-large ~ p rule gave them */
:is(.rpt, .rv) ul.nav > li > ul a.is-next { color: var(--green) !important; font-weight: 500; }
:is(.rpt, .rv) ul.nav > li > ul a.is-next:before { color: var(--green); }
/* stat icon circles for pages that add .rpt-stat markup (kept for the report pages' small stats) */
.rpt-ico { width: 36px; height: 36px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 36px; }
.rpt-ico svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.k-grey .rpt-ico { background: var(--grey-soft); color: var(--muted); }
.k-blue .rpt-ico { background: var(--blue-soft); color: var(--blue); }
.k-green .rpt-ico { background: var(--green-soft); color: var(--green); }
.k-emerald .rpt-ico { background: var(--emerald-soft); color: var(--emerald); }
.k-red .rpt-ico { background: var(--red-soft); color: var(--red); }
.k-amber .rpt-ico { background: var(--amber-soft); color: var(--amber); }
.k-orange .rpt-ico { background: var(--orange-soft); color: var(--orange); }
.k-violet .rpt-ico { background: var(--violet-soft); color: var(--violet); }
.k-teal .rpt-ico { background: var(--teal-soft); color: var(--teal); }
.k-indigo .rpt-ico { background: var(--indigo-soft); color: var(--indigo); }

/* ---- 4b the two views of a row. Expanded = every line (the default). Compact = the first line of each cell: the number and the
   name, the customer, the owner, the amount, the stage badge. The page renders rpt-compact on the grid and is-folded on every
   row from the view cookie the bar switch writes; a click on a row toggles its own is-folded. In a folded row only the elements
   that carry d-main stay (direct children of the cell); the check and menu columns never fold. ---- */
.rpt .myGrid.sexy-grid > tbody > tr.is-folded > td:not(.col-check):not(.col-menu) > :not(.d-main) { display: none !important; }
.rpt .myGrid.sexy-grid > tbody > tr.is-folded > td { vertical-align: middle; }   /* the padding is the same in both views; a folded row centres its lines */
.rpt .myGrid.sexy-grid > tbody > tr.is-folded > td:first-child { white-space: nowrap; }   /* number + name never break onto two lines */
.rpt .myGrid.sexy-grid > tbody > tr.is-folded > td:first-child > a.bold { display: inline-block; max-width: min(40ch, 100%); overflow: hidden; text-overflow: ellipsis; vertical-align: bottom; }   /* the name is cut at ~40 characters (the full name is its tooltip) - or at the cell's width when the column is narrower (28 Sep 2026: a long name ran into the next column of the employees list) */
.rpt .myGrid.sexy-grid > tbody > tr.is-folded > td:first-child > a.bold > span { display: block; overflow: hidden; text-overflow: ellipsis; }   /* ... each line of it when the link holds the number and the name */
.rpt .myGrid.sexy-grid > tbody > tr.is-folded > td > .label.block.d-main { max-width: 40ch; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }             /* the customer is cut only in the fold; the Expanded row shows it whole (40ch since 29 Oct 2026: the line carries the contact too - W-6) */
.rpt .myGrid.sexy-grid > tbody > tr.is-folded .badge-large { margin: 0 !important; }
.rpt .myGrid.sexy-grid > tbody > tr.is-folded .d-amount { line-height: 1.5; }

/* ---- 4c the Board view (.rpt-board, rendered by the page instead of the grid): one column per open stage + Won on a grey band,
   six columns inside the 1136px frame (no sideways scroll); the column head = dot, name, count pill, sum, closed by a rule
   in the stage's setup colour; a card = the number, the full name under it, the customer, the owner, the amount + chance,
   then a ruled footer with the activity button, the closing date and the card menu; "+ n more" under a capped column.
   A card is dragged as a clone (jQuery UI); the column under the pointer takes is-over. ---- */
.rpt .rpt-board { background: var(--card); border: 1px solid var(--frame); border-top: none; border-radius: 0 0 12px 12px; padding: 10px; box-sizing: border-box; }
/* columns stretch to the tallest one (an empty stage is a full-height drop target, not just its head); no overflow on the lanes -
   a scroll container here would capture the sticky heads - so the columns always share the frame (nine checked = narrow ones) */
.rpt .rpt-board-lanes { display: flex; align-items: stretch; gap: 8px; padding: 8px; border-radius: 10px; background: var(--band); }
.rpt .rpt-col { flex: 1 1 0; min-width: 0; max-width: 380px; min-height: 120px; display: flex; flex-direction: column; gap: 6px; padding: 3px; border: 1px solid transparent; border-radius: 8px; box-sizing: border-box; }   /* fewer stages checked = wider columns, up to a readable width */
.rpt .rpt-col > * { flex: 0 0 auto; }
.rpt .rpt-col.is-over { border: 1px dashed var(--accent-line); background: var(--accent-soft); }
/* a column the stage popup cannot reach (LeadsListV2, 14 Sep 2026: Qualified on a tenant without ByPass conversion, Deleted) is never a drop
   target - a small lock after its name says so, the reason in the head's tooltip */
.rpt .rpt-col.is-locked .rpt-col-name:after { content: "\f023"; font-family: FontAwesome; margin-left: 5px; font-size: 9px; color: var(--faint); }
/* the head block, ruled off from the cards by a 2px line in the stage colour; it sticks to the top of the window while the
   board scrolls (the lanes' grey behind it, the column's tint while a card hovers) */
.rpt .rpt-col-top { position: sticky; top: 0; z-index: 2; padding: 6px 3px 6px; margin-bottom: 2px; border-bottom: 2px solid var(--line); background: var(--band); }
.rpt .rpt-col.is-over .rpt-col-top { background: var(--accent-soft); }
.rpt .rpt-col-head { display: flex; align-items: center; gap: 6px; }
.rpt .rpt-col-name { flex: 1 1 auto; min-width: 0; font-size: 12px; font-weight: 500; color: var(--head); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rpt .rpt-col-head .pill { flex: 0 0 auto; font-size: 11px; line-height: 16px; }
.rpt .rpt-col-dot { flex: 0 0 9px; width: 9px; height: 9px; border-radius: 50%; background: var(--faint); }
.rpt .rpt-col-sum { margin-top: 1px; font-size: 10px; color: var(--muted); font-variant-numeric: tabular-nums; }
/* the dot and the rule take the CRM setup colour of the stage (the same hexes as the badge and the wizard step) */
.rpt :is(.rpt-col, .rpt-group-cell).gray .rpt-col-dot { background: var(--stage-gray); }     .rpt .rpt-col.gray .rpt-col-top { border-color: var(--stage-gray); }
.rpt :is(.rpt-col, .rpt-group-cell).gold .rpt-col-dot { background: var(--stage-gold); }     .rpt .rpt-col.gold .rpt-col-top { border-color: var(--stage-gold); }
.rpt :is(.rpt-col, .rpt-group-cell).blue .rpt-col-dot { background: var(--stage-blue); }     .rpt .rpt-col.blue .rpt-col-top { border-color: var(--stage-blue); }
.rpt :is(.rpt-col, .rpt-group-cell).navy .rpt-col-dot { background: var(--stage-navy); }     .rpt .rpt-col.navy .rpt-col-top { border-color: var(--stage-navy); }
.rpt :is(.rpt-col, .rpt-group-cell).purple .rpt-col-dot { background: var(--stage-purple); }   .rpt :is(.rpt-col, .rpt-group-cell).purple .rpt-col-top { border-color: var(--stage-purple); }
.rpt :is(.rpt-col, .rpt-group-cell).green .rpt-col-dot { background: var(--stage-green); }    .rpt :is(.rpt-col, .rpt-group-cell).green .rpt-col-top { border-color: var(--stage-green); }
.rpt :is(.rpt-col, .rpt-group-cell).orange .rpt-col-dot { background: var(--stage-orange); }   .rpt :is(.rpt-col, .rpt-group-cell).orange .rpt-col-top { border-color: var(--stage-orange); }
.rpt :is(.rpt-col, .rpt-group-cell).red .rpt-col-dot { background: var(--stage-red); }      .rpt :is(.rpt-col, .rpt-group-cell).red .rpt-col-top { border-color: var(--stage-red); }
.rpt .rpt-col-more { display: block; padding: 2px 4px; font-size: 10px; color: var(--accent); text-decoration: none; }
.rpt .rpt-col-more:hover { text-decoration: underline; }
/* the card: slim - 8px of padding, tight lines, the footer ruled off edge to edge */
.rpt .rpt-card { position: relative; background: var(--card); border: 1px solid #e6eaee; border-radius: 10px; padding: 9px 12px 0; font-size: 11px; line-height: 1.4; color: var(--ink); cursor: grab; }
.rpt .rpt-card:hover { border-color: #cfd8dc; }
.rpt .rpt-card.is-fixed { cursor: default; }
.rpt .rpt-card.is-lifted { opacity: .55; }
.rpt .rpt-card.ui-draggable-dragging { opacity: 1; border-color: var(--accent-line); background: var(--tint); transform: rotate(-1.5deg); cursor: grabbing; }
/* one weight per line: the number quiet, the name the only accent, the customer medium, the owner a meta line; the name is clamped
   to two lines and the customer to one (its full text in the tooltip), so cards line up. The number and the name are one link (24 Sep 2026) */
.rpt .rpt-card a.rpt-card-name { display: block; color: var(--accent); text-decoration: none; }
.rpt .rpt-card a.rpt-card-name > .super-text { display: block; margin: 0; font-size: 10px; font-weight: 400; color: var(--faint); letter-spacing: .02em; }
.rpt .rpt-card a.rpt-card-name > span:last-child { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; margin-top: 2px; font-size: 12px; font-weight: 500; color: var(--accent); overflow-wrap: anywhere; }
.rpt .rpt-card a.rpt-card-name:hover > span:last-child { text-decoration: underline; }
.rpt .rpt-card .label { display: block; margin-top: 6px; font-size: 11px; font-weight: 500 !important; color: var(--head); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rpt .rpt-card-owner { margin-top: 2px; font-size: 10px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* the money line: the amount is the one bold thing on the card, the chance a quiet figure after it (no pill competing) */
.rpt .rpt-card-amount { display: flex; align-items: baseline; gap: 6px; margin-top: 8px; white-space: nowrap; }
.rpt .rpt-card-amount .d-amount { font-size: 13px; font-weight: 700; color: var(--head); font-variant-numeric: tabular-nums; }
.rpt .rpt-card-amount .d-amount .d-lbl { font-size: 10px; font-weight: 400; color: var(--faint); margin-right: 3px; letter-spacing: .04em; }
.rpt .rpt-card-amount .rpt-card-chance { font-size: 10px; color: var(--muted); }
.rpt .rpt-card-amount .rpt-card-chance:before { content: "\00b7"; margin-right: 6px; color: #cfd8dc; }
/* the footer, ruled off edge to edge: the activity button (its state colour), the mailbox as a plain icon, the closing date at the
   right, the menu on hover at the far end */
.rpt .rpt-card-foot { display: flex; align-items: center; gap: 8px; margin: 8px -12px 0; padding: 5px 12px 6px; border-top: 1px solid var(--hair); }
.rpt .rpt-card-foot .bell { margin-left: auto; font-size: 10px; color: var(--muted); white-space: nowrap; }
.rpt .rpt-card-foot .bell:before { font-size: 10px; color: var(--faint); width: auto; margin: 0 4px 0 0; }
.rpt .rpt-card-foot .bell.red, .rpt .rpt-card-foot .bell.red:before { color: var(--red); }
/* the activity button: a small circle in the state's meaning colour - grey nothing pending, red overdue, amber due today, blue upcoming */
.rpt .rpt-card .rpt-act { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 50%; font-size: 11px; text-decoration: none; }
.rpt .rpt-card .rpt-act .fa { margin: 0; }
.rpt .rpt-card .rpt-act.k-grey { background: var(--grey-soft); color: var(--faint); }
.rpt .rpt-card .rpt-act.k-red { background: var(--red-soft); color: var(--red); }
.rpt .rpt-card .rpt-act.k-amber { background: var(--amber-soft); color: var(--amber-ink); }
.rpt .rpt-card .rpt-act.k-blue { background: var(--blue-soft); color: var(--blue); }
.rpt .rpt-card .rpt-act.k-mail { background: transparent; color: var(--muted); }   /* the opportunity's mailbox: a plain icon, the accent on hover */
.rpt .rpt-card .rpt-act.k-mail:hover { color: var(--accent); }
.rpt .rpt-card .rpt-act:hover { filter: brightness(.94); }
/* the card menu: the standard menu (section 3b) at the footer's right, shown while the pointer is on the card (the site's
   invisible-chk script only knows grid rows) */
.rpt .rpt-card ul.nav.rpt-card-menu { margin-left: auto; float: none; visibility: hidden; }
.rpt .rpt-card:hover ul.nav.rpt-card-menu { visibility: visible; }
.rpt .rpt-card ul.nav.rpt-card-menu > li { float: none; margin: 0; }
.rpt .rpt-card ul.nav.rpt-card-menu > li > a.service { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; }
.rpt .rpt-card ul.nav.rpt-card-menu > li > a.service:before { color: var(--faint); font-size: 12px; margin: 0; }
.rpt .rpt-card ul.nav.rpt-card-menu > li > ul { min-width: 130px; }

/* ---- 5 pager: the GridView's PagerStyle row inside the grid ---- */
.rpt .myGrid.sexy-grid tr.pager, .rpt .myGrid.sexy-grid .pager { background: transparent !important; }
.rpt .myGrid.sexy-grid .pager > td { padding: 14px 16px 16px !important; border-bottom: none !important; }
.rpt .myGrid.sexy-grid .pager td { padding: 0 2px; }
.rpt .myGrid.sexy-grid .pager a, .rpt .myGrid.sexy-grid .pager span { display: inline-flex; align-items: center; justify-content: center; min-width: 28px; height: 28px; padding: 0 6px; border-radius: 6px; border: 1px solid var(--line); background: var(--card) !important; color: var(--ink) !important; text-decoration: none; }
.rpt .myGrid.sexy-grid .pager span { background: var(--accent) !important; border-color: var(--accent); color: #fff !important; font-weight: 500; }

/* ---- 6 record view (.rv): the details popup of a record - OpportunityView's window first, the other popups as they are revamped.
   Built by Web.WebUi.V2.Records (RecordView): a hero - number over the title with the customer in small under it at the left,
   the stage badge and the closing-date badge beside the amount at the right - then the bar: the jQuery UI tabs in the sub-nav
   look (words, the current one bold in the accent, count pills) with the actions menu as a pill at its right. The Details tab
   is a facts grid: a caption over each 11px value, three columns, a hairline gap between groups instead of group titles; what
   the hero shows is not repeated there. The window's DOM sits outside .rpt and the popup opens on old-master pages too
   (Pages.css is bundled site-wide), so every rule here hangs off .rv alone. ---- */
.rv { color: var(--ink); font-size: 12px; }
.rv b { font-weight: 500; }
.rv a { color: var(--accent); text-decoration: none; }
.rv a:hover { text-decoration: underline; }
.rv .red { color: var(--red) !important; }
/* a window whose body is a record view is white: LeadView.ascx greys its RadWindow (an inline .gray-content rule) for the old tiled layout */
.gray-content.RadWindow_Material .rwContent:has(> #summary > .rv) { background-color: #fff; }
/* the windows on a V2 page (body.v2 on SiteV2.Master - the windows and the veil sit outside .rpt): every RadWindow takes the frame radius of
   the language (12px, the search card and the grid frame), one soft ink-tinted shadow in place of the Material skin's double elevation
   (0 19px 38px + 0 15px 12px at .2 - a dark smear under a window that already floats on a veil), and the veil itself goes from Telerik's flat
   #aaa at 50% (inline, hence !important) to the head colour at 40%, so a white window separates from the page without the heavy shadow.
   The Material skin sets its shadow on .RadWindow_Material.rwShadow (two classes) and loads later - hence three classes here. A maximized
   window (the form popups, UrlViewer) fills the viewport: square. Old-master pages: untouched (no body.v2). 13 Sep 2026. */
body.v2 .RadWindow.RadWindow_Material { border-radius: 12px; box-shadow: 0 12px 32px rgba(20, 30, 45, .18); }
body.v2 .RadWindow.RadWindow_Material.rwMaximizedWindow { border-radius: 0; }
body.v2 .RadWindow_Material .rwTitleBar { border-radius: 12px 12px 0 0; }
/* the confirm and alert boxes on a V2 page (radconfirm / radalert - confirmLinkButton, the bulk tools' questions; the owner, 28 Sep 2026): the
   dialogs' title bar and disc X (section 8), the text at the page's size, the box as tall as its text (Telerik keeps the declared 200px and
   lays its button bar OVER the text - a long question was cut off), the bar white with a hairline and rounded to the frame (its 2px corners
   squared the frame's 12px), OK the accent pill and Cancel the grey button. Scoped by the dialog inside the window: no other window changes */
body.v2 .RadWindow.RadWindow_Material:has(.rwDialog) { height: auto !important; max-height: calc(100vh - 40px); }
body.v2 .RadWindow.RadWindow_Material:has(.rwDialog) .rwContent { height: auto !important; padding: 2px 20px 0; border: none; overflow: visible; }
body.v2 .RadWindow_Material:has(.rwDialog) .rwTitleBar { padding: 0; }
body.v2 .RadWindow_Material:has(.rwDialog) .rwTitleBar .rwTitleWrapper { height: 20px; line-height: 20px; padding: 14px 20px 6px; }
body.v2 .RadWindow_Material:has(.rwDialog) .rwTitleWrapper .rwTitle { margin: 0 !important; padding: 0 !important; width: 80%; font-size: 14px; font-weight: 500; line-height: 20px; color: var(--head) !important; text-transform: none; }
body.v2 .RadWindow_Material:has(.rwDialog) .rwCommands { top: -16px; right: -16px; margin: 0; z-index: 10; }   /* above the resize corner (21 Oct 2026) */
body.v2 .RadWindow_Material:has(.rwDialog) .rwCommands .rwListItem { margin: 0; }
body.v2 .RadWindow_Material:has(.rwDialog) .rwCloseButton { box-sizing: border-box; width: 30px; height: 30px; padding: 0; border: 1px solid var(--line); border-radius: 50%; background: var(--band-2); color: var(--muted) !important; display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 1px 3px rgba(0, 0, 0, .12); }
body.v2 .RadWindow_Material:has(.rwDialog) .rwCloseButton:hover { background: var(--hover); border-color: #cfd8dc; color: var(--head) !important; }
body.v2 .RadWindow_Material:has(.rwDialog) .rwCloseButton:before { font-size: 14px; }
body.v2 .RadWindow_Material .rwDialog { margin: 0; padding: 0 0 62px !important; }               /* the room of the button bar, which sits at the window's bottom; !important because Telerik\Window.css has ".RadWindow .rwDialog { padding: 0 2px !important }", which otherwise shrank every V2 confirm to one line under its buttons (20 Oct 2026; PosV2.css 333 had worked around it for the till only) */
body.v2 .RadWindow_Material .rwDialog:before { display: none !important; }                       /* the Material ? / ! glyph */
body.v2 .RadWindow_Material .rwDialogContent { min-height: 0; padding: 0; }
body.v2 .RadWindow_Material .rwDialogText { font-size: 12px; line-height: 1.6; color: var(--ink); text-align: left; }
body.v2 .RadWindow_Material .rwDialogButtons { left: 0 !important; right: 0 !important; bottom: 0 !important; width: auto; max-height: none; box-sizing: border-box; padding: 12px 20px; background: var(--card); border-top: 1px solid var(--hair); border-radius: 0 0 12px 12px; text-align: right; }
body.v2 .RadWindow_Material .rwDialogButtons button { height: 32px; min-width: 72px; padding: 0 18px; border: 1px solid var(--line); border-radius: 16px; background: var(--band-2); color: var(--ink); font-size: 12px; font-weight: 500; text-transform: none; }
body.v2 .RadWindow_Material .rwDialogButtons button:hover { background: var(--hover); color: var(--head); }
body.v2 .RadWindow_Material .rwDialogButtons button:first-child { border-color: var(--accent); background: var(--accent); color: #fff; }
body.v2 .RadWindow_Material .rwDialogButtons button:first-child:hover { background: var(--accent-ink); }
body.v2 .TelerikModalOverlay { background-color: var(--head) !important; opacity: .4 !important; }
/* the toast on a V2 page (RadNotification1 on SiteV2.Master and the notifications the V2 controls declare; the owner, 28 Sep 2026: make it
   look like a row of the top bar's Notifications popover): the popover's card (TopBarV2.css .tb2-pop - white, 12px, the ink shadow), its head
   as the bar, and under it one row on the hover grey: the TITLE ICON as a 40px tinted disc (green ok, red deny, amber warning, the accent
   otherwise) beside the text. The disc is the bar's own icon placed under the bar - the pages set TitleIcon, not always ContentIcon, and the
   site's Telerik/Notification.css hides the content icon anyway. The bold first line and the "Just now" line come from the master's
   RnV2Showing (OnClientShowing): the page's Title moves into the body and the bar reads "Notification"; a control's own notification (no hook)
   shows its Title in the bar. Lightweight render mode: .rnTitleBar > .rnIcon + .rnTitleBarTitle + ul.rnCommands ; .rnContentWrapper > .rnIcon
   + .rnContent. The site file sets width: max-content and the grey bar with !important at two classes; body.v2 is the third. */
body.v2 .RadNotification.RadNotification_Material { width: 380px !important; max-width: calc(100vw - 32px); border: 0 !important; border-radius: 12px !important; background: var(--card); color: var(--muted); font: 400 12.5px/1.4 Roboto, "Segoe UI", Arial, sans-serif; }
body.v2 .RadNotification_Material, body.v2 .RadNotification_Material.rnShadows { box-shadow: 0 16px 40px rgba(31,41,51,.24), 0 0 0 1px rgba(0,0,0,.05); }
body.v2 .RadNotification_Material .rnTitleBar { box-sizing: border-box; position: relative; height: auto !important; margin: 0 !important; padding: 11px 44px 11px 14px !important; line-height: 18px !important; background: var(--card) !important; border: 0 !important; border-bottom: 1px solid #e3e7ec !important; border-radius: 12px 12px 0 0 !important; color: var(--head) !important; }
body.v2 .RadNotification_Material .rnTitleBar .rnTitleBarTitle { max-width: none; margin: 0 !important; padding: 0 !important; font-size: 13px !important; font-weight: 600; line-height: 18px; vertical-align: top; }
/* the title icon: out of the bar, into the body as the disc */
body.v2 .RadNotification_Material .rnTitleBar .rnIcon { position: absolute; left: 14px; top: calc(100% + 13px); z-index: 1; box-sizing: border-box; display: inline-flex !important; align-items: center; justify-content: center; width: 40px; height: 40px; min-width: 0; min-height: 0; margin: 0 !important; border-radius: 50%; background: var(--accent-soft); color: var(--accent); overflow: hidden; }
body.v2 .RadNotification_Material .rnTitleBar .rnIcon:before { display: block; margin: 0; font-size: 20px !important; line-height: 1; vertical-align: top; color: inherit; }
body.v2 .RadNotification_Material .rnTitleBar .rnIconOk { background: var(--green-soft); color: var(--green); }
body.v2 .RadNotification_Material .rnTitleBar .rnIconDeny, body.v2 .RadNotification_Material .rnTitleBar .rnIconDelete { background: var(--red-soft); color: var(--red); }
body.v2 .RadNotification_Material .rnTitleBar .rnIconWarning { background: var(--amber-soft); color: var(--amber-ink); }
body.v2 .RadNotification_Material .rnTitleBar .rnIconNone { display: none !important; }
/* the close X: a quiet disc at the right of the bar */
body.v2 .RadNotification_Material .rnTitleBar .rnCommands { top: 50%; right: 8px; margin: -12px 0 0; }
body.v2 .RadNotification_Material .rnTitleBar .rnCommands li { float: left; width: 24px; height: 24px; margin: 0; padding: 0; line-height: 24px; border-radius: 50%; }   /* a fixed 24px square, the link a block inside: as an inline-block on a line box the li ran taller than wide and the hover disc was an oval (the owner, 28 Sep 2026) */
body.v2 .RadNotification_Material .rnTitleBar .rnCommands li:hover { background: var(--hover); }
body.v2 .RadNotification_Material .rnTitleBar .rnCommands a { display: block; box-sizing: border-box; width: 24px; height: 24px; border: 0; border-radius: 50%; color: var(--faint); }
body.v2 .RadNotification_Material .rnTitleBar .rnCommands a:before { margin: auto; font-size: 14px; color: var(--faint); }
body.v2 .RadNotification_Material .rnTitleBar .rnCommands li:hover a:before { color: var(--head); }
/* the body: the row of the popover on its hover grey, the room for the disc on the left */
body.v2 .RadNotification_Material .rnContentWrapper { box-sizing: border-box; min-height: 66px; padding: 12px 14px 14px 68px !important; border: 0 !important; border-radius: 0 0 12px 12px; background: var(--hover); }
body.v2 .RadNotification_Material .rnContentWrapper .rnIcon { display: none !important; }
body.v2 .RadNotification_Material .rnContent { display: block; min-width: 0 !important; min-height: 0; padding: 0 !important; color: var(--muted); }
body.v2 .RadNotification_Material .rnContent .rn-head { display: block; margin: 1px 0 2px; font-size: 13px; font-weight: 600; line-height: 1.3; color: var(--head); }
body.v2 .RadNotification_Material .rnContent .rn-text { display: block; }
body.v2 .RadNotification_Material .rnContent .rn-time { display: block; margin-top: 4px; font-size: 11px; color: var(--faint); }
/* the generic record window (Portal/_UserControls/V2/RecordWindow.ascx): three stacked levels, above the page's own windows (wnd-level-1min = 7000)
   and under the activity-log windows (wnd-level-1 = 9000) and the old Account / Contact views (wnd-level-2 / 3) that a record opens */
div.rw-1 { z-index: 7000 !important; }   div.rw-2 { z-index: 7100 !important; }   div.rw-3 { z-index: 7200 !important; }
/* the change-history window (Portal/_UserControls/V2/HistoryWindow.ascx, 18 Sep 2026): a titled window above the three record levels, under the note windows.
   Its title bar in the dialogs' look (section 8: 14px 500 head, no capitals - the Material skin capitalised "Change History" at 20px -, the disc X below);
   four classes outrank the Material skin's three-class wrapper rule, which loads later (section 9) */
div.rw-history { z-index: 7300 !important; }
.RadWindow.rw-history .rwTitleBar { padding: 0; }
.RadWindow.rw-history .rwTitleBar .rwTitleWrapper { height: 20px; line-height: 20px; padding: 14px 20px 6px; }
.RadWindow.rw-history .rwTitleWrapper .rwTitle { margin: 0 !important; padding: 0 !important; width: 80%; font-size: 14px; font-weight: 500; line-height: 20px; color: var(--head) !important; text-transform: none; }
/* no window title (the hero's first line IS the title - the client, 13 Sep 2026): the title bar shrinks to a 28px strip holding the close X
   (and the drag handle), the content loses its top padding, so the hero starts where the title used to be. Telerik subtracts the bar's
   measured outerHeight when it sizes the content, so a CSS height is all it takes; the site's Window.css pads .rwContent with !important.
   The Material skin (embedded, loaded after this file) pads the wrapper 14px with ".RadWindow_Material .rwTitleBar .rwTitleWrapper" -
   three classes - so the wrapper rule names the bar too and outranks it (a 56px strip was the result on 13 Sep 2026). */
.RadWindow:is(.rw-1, .rw-2, .rw-3, .rw-pop) .rwTitleBar { padding: 0; }
.RadWindow:is(.rw-1, .rw-2, .rw-3, .rw-pop) .rwTitleBar .rwTitleWrapper { height: 28px; padding: 0; line-height: 28px; }
.RadWindow:is(.rw-1, .rw-2, .rw-3, .rw-pop) .rwTitle { display: none; }
.RadWindow:is(.rw-1, .rw-2, .rw-3, .rw-pop) .rwContent { padding-top: 0 !important; }
/* the close X as a grey disc centred on the window's top-right corner, half of it outside (the client, 13 Sep 2026: flush in the corner it
   crowded the edge; a third out was still too close). .rwCommands is absolute inside the bar (position: relative, spanning the window's
   width) and nothing on the way up clips, so negative offsets put it past the edge; the site's Window.css colours the command buttons
   with !important, hence the same here. The sixteen dialogs of section 8 carry the same disc (their own copy of these rules, in their own
   scope); the note windows, the popup host and the alerts keep Telerik's X - the review of 14 Sep 2026 found the disc's offset moving a
   host window's Minimize glyph off its corner when every window had it. */
.RadWindow:is(.rw-1, .rw-2, .rw-3, .rw-pop, .rw-history) .rwCommands { top: -16px; right: -16px; margin: 0; }
/* the shared popup window (rw-pop, UrlViewer's) showed the disc INSIDE the strip (the WhatsApp chat, 4 Oct 2026): its class arrives after the
   window was shown, restored and had its behaviors re-set, so whatever Telerik leaves on the command list then is outranked here - the bar is
   the anchor, the list absolute on its corner. The record windows and the dialogs keep the plain rule above */
.RadWindow.rw-pop .rwTitleBar { position: relative; }
/* the WhatsApp chat's window (22 Oct 2026, the owner: "extra white space on whatsapp popup"): the strip takes the chat header's green, so the
   window reads as one green band down to the thread; the chat itself puts rw-wa on the window while it shows (SendWhatsappMessage.ascx waStrip) */
.RadWindow.rw-pop.rw-wa, .RadWindow.rw-pop.rw-wa .rwTitleBar { background-color: #075e54 !important; border-color: #075e54; }   /* the site's ".RadWindow_Material .rwTitleBar" is white !important */
.RadWindow.rw-pop .rwTitleBar .rwCommands { position: absolute !important; top: -16px !important; right: -16px !important; margin: 0 !important; }
.RadWindow:is(.rw-1, .rw-2, .rw-3, .rw-pop, .rw-history) .rwCommands .rwListItem { margin: 0; }
/* the disc sits on the window's corner, where Telerik's resize handle is: above it, with the hand cursor (21 Oct 2026, the sales orders UAT:
   the pointer showed the diagonal resize arrows over the X, and a click could resize instead of closing) */
.RadWindow:is(.rw-1, .rw-2, .rw-3, .rw-pop, .rw-history) .rwCommands { position: absolute; z-index: 10; }
.RadWindow:is(.rw-1, .rw-2, .rw-3, .rw-pop, .rw-history) .rwCloseButton { cursor: pointer !important; }
.RadWindow:is(.rw-1, .rw-2, .rw-3, .rw-pop, .rw-history) .rwCloseButton { box-sizing: border-box; width: 30px; height: 30px; padding: 0; border: 1px solid var(--line); border-radius: 50%; background: var(--band-2); color: var(--muted) !important; display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 1px 3px rgba(0, 0, 0, .12); }
.RadWindow:is(.rw-1, .rw-2, .rw-3, .rw-pop, .rw-history) .rwCloseButton:hover { background: var(--hover); border-color: #cfd8dc; color: var(--head) !important; }
.RadWindow:is(.rw-1, .rw-2, .rw-3, .rw-pop, .rw-history) .rwCloseButton:before { font-size: 14px; }
/* a resizable window (the change history: Behaviors="Close,Move,Resize") gets eight resize handles at the window's own z-index, over the disc
   (24 Oct 2026, the invoices UAT: the history's X showed the resize arrows at every point and a click could resize) - under the commands */
body.v2 .RadWindow .rrHandle { z-index: 1 !important; }
/* the form window (UrlViewer, partial-window): ReloadOnSave swaps Close for Minimize, which UrlViewer's OnClientCommandHandler turns into
   "close without reloading the list" - so its only command is drawn as the same disc X, with the hand cursor (23 Oct 2026, the sales orders
   UAT: New Sales Order / Edit showed a bare dash under the move cursor) */
body.v2 .RadWindow.partial-window .rwCommands { z-index: 10; }
body.v2 .RadWindow.partial-window .rwCommands .rwListItem { margin: 0; }
body.v2 .RadWindow.partial-window :is(.rwCloseButton, .rwMinimizeButton) { box-sizing: border-box; width: 30px; height: 30px; padding: 0; border: 1px solid var(--line); border-radius: 50%; background: var(--band-2); color: var(--muted) !important; display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 1px 3px rgba(0, 0, 0, .12); cursor: pointer !important; }
body.v2 .RadWindow.partial-window :is(.rwCloseButton, .rwMinimizeButton):hover { background: var(--hover); border-color: #cfd8dc; color: var(--head) !important; }
body.v2 .RadWindow.partial-window :is(.rwCloseButton, .rwMinimizeButton):before { font-size: 14px; }
body.v2 .RadWindow.partial-window .rwMinimizeButton:before { content: "\e11b"; }
/* the hero */
.rv-hero { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 12px 24px; padding: 2px 2px 12px; }
.rv-id { min-width: 0; flex: 1 1 0; }
.rv-no { display: inline-block; font-size: 11px; font-weight: 500; letter-spacing: .04em; color: var(--accent); }
.rv-title { margin: 2px 0 0; font-size: 20px; font-weight: 500; line-height: 1.25; color: var(--head); overflow-wrap: anywhere; }
.rv-subtitle { display: block; margin-top: 4px; font-size: 12px; color: var(--muted); }     /* the line under the title: the customer, the contact, the job title */
.rv-subtitle a { color: var(--muted); }
.rv-subtitle a:hover { color: var(--accent); }
/* the right side: the badges (a status in its setup colour, a date as a quiet pill - red when passed) beside the FIGURE (or the photo), the quiet
   line under both. A grid, not a flex row: the amount's sub line (weighted / chance / margin) is wider than the figure, and in a row the badges
   would sit beside that width, far from the number. .rv-amount dissolves into the grid (display: contents) so its two lines place themselves. */
.rv-side { display: grid; grid-template-columns: auto auto; column-gap: 14px; row-gap: 6px; align-items: center; justify-items: end; justify-content: end; flex: none; padding-top: 4px; }
.rv-photo { flex: none; width: 64px; height: 64px; border-radius: 50%; overflow: hidden; border: 1px solid var(--line); background: var(--grey-soft); display: inline-flex; align-items: center; justify-content: center; }
.rv-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rv-photo.rv-initials { font-size: 20px; font-weight: 500; letter-spacing: .02em; color: var(--muted); }
.rv-photo.is-wide { width: 120px; height: 80px; border-radius: 10px; }     /* a vehicle's photo (13 Oct 2026, the booking window): a picture, not a face */
/* the stepper (a lead's stages): one segment per stage on a third row of the hero, the reached ones filled in the current stage's colour,
   the current one named under it; a closed record (won / lost) shows every segment filled in its colour */
.rv-steps { flex: 1 1 100%; display: flex; gap: 4px; margin-top: 2px; }
.rv-step { flex: 1 1 0; min-width: 0; }
.rv-step i { display: block; height: 5px; border-radius: 3px; background: var(--hair); }
.rv-step.is-done i { background: var(--stage-gray); }
.rv-step span { display: block; margin-top: 5px; font-size: 10px; line-height: 1.2; color: var(--faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rv-step.is-current span { color: var(--head); font-weight: 500; }
.rv-steps.gray .is-done i { background: var(--stage-gray); }     .rv-steps.gold .is-done i { background: var(--stage-gold); }
.rv-steps.blue .is-done i { background: var(--stage-blue); }     .rv-steps.navy .is-done i { background: var(--stage-navy); }
.rv-steps.purple .is-done i { background: var(--stage-purple); } .rv-steps.green .is-done i { background: var(--stage-green); }
.rv-steps.orange .is-done i { background: var(--stage-orange); } .rv-steps.red .is-done i { background: var(--stage-red); }
.rv-badges { grid-column: 1; display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 6px; }
.rv .rv-date { display: inline-flex; align-items: center; gap: 5px; padding: 5px 12px; border-radius: 14px; background: var(--grey-soft); color: var(--muted); font-size: 11px; font-weight: 500; line-height: 1.2; white-space: nowrap; }
.rv .rv-date .fa { font-size: 11px; color: var(--faint); }
.rv .rv-date.is-late { background: var(--red-soft); color: var(--red); }
.rv .rv-date.is-late .fa { color: var(--red); }
.rv .badge { display: inline-block; width: auto; margin: 0; padding: 5px 13px !important; border: none; border-radius: 14px; font-size: 12px !important; font-weight: 500; line-height: 1.2; letter-spacing: .01em; }
.rv-tag { display: inline-block; padding: 4px 10px; border-radius: 10px; background: var(--grey-soft); color: var(--muted); font-size: 11px; font-weight: 500; line-height: 1.2; }
.rv-amount { display: contents; }
.rv-amount > div:first-child { grid-column: 2; white-space: nowrap; }        /* the figure, beside the badges */
.rv-side > .rv-photo { grid-column: 2; }
.rv-cur { margin-right: 6px; font-size: 11px; letter-spacing: .04em; color: var(--faint); vertical-align: 8px; }
.rv-big { font-size: 26px; font-weight: 500; line-height: 1; color: var(--head); font-variant-numeric: tabular-nums; }
.rv-sub { grid-column: 1 / -1; font-size: 11px; color: var(--muted); white-space: nowrap; }   /* the second row, under badges and figure, right-aligned */
.rv-cap { font-size: 10px; font-weight: 500; letter-spacing: .05em; text-transform: uppercase; color: var(--faint); }
/* the bar: the tab strip and the actions pill on one line. The strip never wraps (the owner, 13 Oct 2026: a customer's ten tabs ran onto
   a second line): compact 11px tabs with slim count pills fit ten tabs beside the pill; a record with more (a broker customer with
   tickets and calls - thirteen) scrolls the strip sideways on a thin scrollbar, names never cut. The pill's white fade covers the
   tabs that pass under it; the strip's end padding lets the last tab scroll clear of it */
.rv-bar { position: relative; margin-top: 2px; }
.rv-tabs.ui-tabs { padding-top: 0; }
.rv-tabs .ui-tabs-nav { display: flex; flex-wrap: nowrap; align-items: center; gap: 0; margin: 0; padding: 0 96px 0 0; overflow-x: auto; overflow-y: hidden; scrollbar-width: thin; border-bottom: 1px solid var(--line); }
.rv-tabs .ui-tabs-nav li { float: none; flex: none; margin: 0; border: none !important; background: transparent !important; white-space: nowrap; }
.rv-tabs .ui-tabs-nav .ui-tabs-anchor { float: none; display: inline-flex; align-items: center; gap: 4px; padding: 9px 8px; font-size: 11px; line-height: 16px; color: var(--muted); border: none; }
.rv-tabs .ui-tabs-nav .ui-tabs-anchor:hover { color: var(--head); text-decoration: none; }
.rv-tabs .ui-tabs-nav li.ui-tabs-active .ui-tabs-anchor { color: var(--accent); font-weight: 700; box-shadow: inset 0 -2px 0 var(--accent); cursor: default; }
.rv-tabs .ui-tabs-nav li.ui-state-hover, .rv-tabs .ui-tabs-nav li.ui-state-active, .rv-tabs .ui-tabs-nav li.ui-state-focus { border-bottom-color: transparent !important; }
.rv-count { display: inline-block; flex: none; min-width: 16px; padding: 1px 5px; border-radius: 8px; background: var(--grey-soft); color: var(--muted); font-size: 10px; font-weight: 500; line-height: 1.2; text-align: center; }
.rv-tabs .ui-tabs-nav li.ui-tabs-active .rv-count { background: var(--accent-soft); color: var(--accent); }
.rv-tabs .ui-tabs-panel { padding: 16px 2px 2px; }
.rv-actions { position: absolute; right: 0; top: 3px; z-index: 20; float: none; margin: 0; padding-left: 16px; background: linear-gradient(to right, transparent, var(--card) 16px); }     /* centred on the 34px strip */
.rv-actions > li > a { display: inline-flex; align-items: center; height: 28px; padding: 0 12px; border: 1px solid var(--line); border-radius: 14px; background: var(--card); color: var(--ink) !important; font-size: 11px; text-decoration: none !important; }
.rv-actions > li > a:before { width: auto; margin: 0 6px 0 0; font-size: 11px; color: var(--faint); }
.rv-actions > li:hover > a { background: var(--band); color: var(--head) !important; }
/* the facts grid (the Details tab) */
.rv-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 24px; }
.rv-fact { min-width: 0; }
.rv-fact .rv-cap { display: block; line-height: 1.2; margin-bottom: 1px; }     /* tight over its value (the client, 13 Sep 2026) */
.rv-val { display: block; font-size: 11px; line-height: 1.4; color: var(--head); overflow-wrap: anywhere; }
.rv-val.rv-none { color: #cfd8dc; }
.rv-val .rv-tag { padding: 2px 8px; font-size: 10px; margin: 1px 0; }     /* a tag inside a fact (the flags) sits slimmer than in the hero */
.rv-meta { display: block; font-size: 10px; color: var(--muted); }     /* a quiet second line inside a value (a history entry's department and branch) */
.rv-section { margin: 14px 0 6px; }                                   /* a caption over one list inside a tab (the documents of each contact) */
.rv-section:first-child { margin-top: 0; }
.rv-gap { grid-column: 1 / -1; height: 2px; border-bottom: 1px solid var(--hair); }
/* the chips row under the grid: the record's small marks (From Quotation, Imported, BNC 1234) as quiet 10px chips, muted on the grey
   soft, so they are seen without competing with a fact */
.rv-chips { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; padding-top: 12px; border-top: 1px solid var(--hair); }
.rv-chip { display: inline-block; padding: 2px 8px; border-radius: 9px; border: 1px solid var(--line); background: var(--tint); color: var(--muted); font-size: 10px; font-weight: 500; line-height: 1.4; cursor: default; }
/* the tabs' tables (RecordTable, 14 Sep 2026): the caption row in the facts' caps over a full line, hairline rows, 11px ink, a number
   column right-aligned in tabular figures with the currency as a quiet caption before it (.rv-cur), a quiet second line in a cell
   (.rv-meta), the current row of a log (is-current) on the band tint, received / outstanding in the meaning colours, the empty
   sentence (.rv-empty) muted; the Description tab is a prose block */
.rv .rv-table { width: 100%; border-collapse: collapse; font-size: 11px; color: var(--ink); }
.rv .rv-table th { padding: 0 10px 7px 0; border-bottom: 1px solid var(--line); text-align: left; font-size: 10px; font-weight: 500; letter-spacing: .05em; text-transform: uppercase; color: var(--faint); white-space: nowrap; }
.rv .rv-table td { padding: 8px 10px 8px 0; border-bottom: 1px solid var(--hair); vertical-align: top; line-height: 1.45; }
.rv .rv-table th:last-child, .rv .rv-table td:last-child { padding-right: 0; }
.rv .rv-table :is(th, td).rv-num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.rv .rv-table td .rv-cur { margin-right: 4px; font-size: 10px; color: var(--faint); vertical-align: baseline; }   /* the hero's .rv-cur rides 8px up beside the 26px figure; not here */
.rv .rv-table td .rv-meta { display: block; margin-top: 2px; font-size: 10px; line-height: 1.4; color: var(--muted); }
.rv .rv-table td .badge { margin: 0; }
.rv .rv-table tr.is-current td { background: var(--band); color: var(--head); font-weight: 500; }
.rv .rv-table tr.is-current td:first-child { border-radius: 6px 0 0 6px; padding-left: 8px; }
.rv .rv-table tr.is-current td:last-child { border-radius: 0 6px 6px 0; padding-right: 8px; }
.rv .rv-good { color: var(--green); }
.rv .rv-bad { color: var(--red); }
.rv .rv-empty { padding: 14px 0; font-size: 11px; color: var(--muted); font-style: italic; }
/* a row listed for the record but not counted (16 Oct 2026, the invoice's Balance tab: a deleted receipt or refund, a cancelled credit note) */
.rv .rv-table tr.is-muted td, .rv .rv-table tr.is-muted td :is(a, .rv-meta, .rv-tag) { color: #b0bec5; }
.rv .rv-more { padding: 10px 0 2px; font-size: 11px; }     /* a link under a table that shows the newest rows only ("Show all 40 opportunities") */
.rv .rv-stars .fa { color: var(--amber); font-size: 11px; margin-right: 1px; }   /* a rating's five stars in a fact (the ticket, 21 Sep 2026) */
.rv .rv-prose { max-width: 72ch; font-size: 12px; line-height: 1.6; color: var(--ink); }
.rv .rv-prose :is(p, ul, ol) { margin: 0 0 8px; }
.rv .rv-table td .badge { margin: 0; padding: 3px 9px !important; font-size: 10px !important; border-radius: 10px; }   /* a stage in a row: slimmer than the hero's */
.rv .rv-table td .rv-tag { padding: 2px 8px; font-size: 10px; vertical-align: 1px; }
.rv .rv-table td .d-activity .d-act-text { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 34ch; font-style: italic; }   /* a child's latest activity: the list's two-line block */
.rv .rv-table td .d-activity .d-act-meta { display: block; margin-top: 2px; font-size: 10px; line-height: 1.4; color: var(--muted); }
/* the tabs still on their old renderers (Activities, parked) take the skin's captions and hairlines */
.rv table.simpleTable > tbody > tr { border-bottom: 1px solid var(--hair); }
.rv table.simpleTable > tbody > tr > th { color: var(--faint); font-size: 10px !important; font-weight: 500; letter-spacing: .04em; text-transform: uppercase; }
.rv table.simpleTable > tbody > tr > td { color: var(--ink); }
/* the change history (HistoryTable, 30 Sep 2026 - the owner: the When / By / Change table "looks unstyled and difficult to read"): a feed.
   A day line in the caps over that day's saves; each save on a rail with a dot in its state's colour (created green, deleted red, changed a
   grey ring), a head sentence - who in the head colour, what they did muted, the time at the right - over its lines in a light box. Every
   line shares one grid, so fields and values align down the whole window: the field (muted), the old value struck through, an arrow, the new
   value (head, 500); a row added / removed spans the two value columns behind a green / red tag; a summary line is a sentence across. A long
   value (a description) stops at four lines, the whole text in its tooltip */
.rv-hist { padding: 2px 0 4px; }
.rv-hist-day { margin: 18px 0 10px; font-size: 10px; font-weight: 500; letter-spacing: .05em; text-transform: uppercase; color: var(--faint); }
.rv-hist-day:first-child { margin-top: 0; }
.rv-hist-save { position: relative; padding: 0 0 16px 22px; }
.rv-hist-save:before { content: ""; position: absolute; left: 4px; top: 16px; bottom: -3px; width: 1px; background: var(--line); }   /* the rail, dot to dot */
.rv-hist-save:last-child:before, .rv-hist-save:has(+ .rv-hist-day):before { display: none; }                                    /* it ends with the day */
.rv-hist-save:after { content: ""; position: absolute; left: 0; top: 5px; box-sizing: border-box; width: 9px; height: 9px; border: 2px solid #b0bec5; border-radius: 50%; background: var(--card); }
.rv-hist-save.is-created:after { border-color: var(--green); background: var(--green); }
.rv-hist-save.is-deleted:after { border-color: var(--red); background: var(--red); }
.rv-hist-head { display: flex; align-items: baseline; gap: 5px; font-size: 12px; line-height: 18px; }
.rv-hist-by { font-weight: 500; color: var(--head); }
.rv-hist-verb { color: var(--muted); }
.rv-hist-time { margin-left: auto; padding-left: 12px; font-size: 11px; color: var(--faint); font-variant-numeric: tabular-nums; white-space: nowrap; }
.rv-hist-lines { margin-top: 8px; padding: 2px 14px; border: 1px solid var(--hair); border-radius: 8px; background: var(--tint); }
.rv-hist-line { display: grid; grid-template-columns: 180px minmax(0, 1fr) 16px minmax(0, 1fr); column-gap: 12px; align-items: baseline; padding: 8px 0; border-top: 1px solid var(--hair); font-size: 12px; line-height: 1.45; }
.rv-hist-line:first-child { border-top: 0; }
.rv-hist-what { font-size: 11px; font-weight: 500; color: var(--muted); overflow-wrap: anywhere; }
.rv-hist-to { font-size: 11px; color: #b0bec5; text-align: center; }
:is(.rv-hist-was, .rv-hist-now, .rv-hist-val) { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; overflow: hidden; overflow-wrap: anywhere; }
.rv-hist-was { color: var(--muted); text-decoration: line-through; text-decoration-color: rgba(96, 125, 139, .5); }
.rv-hist-now { font-weight: 500; color: var(--head); }
.rv-hist .is-empty { font-weight: 400; font-style: italic; color: var(--faint); text-decoration: none; }
.rv-hist-set { grid-column: 2 / -1; display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.rv-hist-val { min-width: 0; color: var(--head); }
.rv-hist-tag { flex: none; padding: 1px 8px; border-radius: 9px; font-size: 10px; font-weight: 500; line-height: 16px; }
.is-added .rv-hist-tag { background: var(--green-soft); color: color-mix(in srgb, var(--green) 70%, black); }
.is-added .rv-hist-val { font-weight: 500; }
.is-removed .rv-hist-tag { background: var(--red-soft); color: color-mix(in srgb, var(--red) 88%, black); }
.is-removed .rv-hist-val { color: var(--muted); text-decoration: line-through; text-decoration-color: rgba(96, 125, 139, .5); }
.rv-hist-line.is-note { display: block; color: var(--ink); }
/* a narrow window (the history opened inside a popup form's iframe, a phone): the field on its own line over was -> now */
@media (max-width: 560px) {
    .rv-hist-line { grid-template-columns: minmax(0, 1fr) 16px minmax(0, 1fr); row-gap: 2px; }
    .rv-hist-what { grid-column: 1 / -1; }
    .rv-hist-set { grid-column: 1 / -1; }
    .rv-hist-lines { padding: 2px 10px; }
}

/* ---- report detail rows (Reports.css pages) keep the shared cell vocabulary ---- */
.rpt a.d-no, .rpt a.d-no:visited { color: var(--accent) !important; text-decoration: none; }
.rpt a.d-no:hover { text-decoration: underline; }
.rpt .d-title { font-size: 13px; font-weight: 500; color: var(--head); }
.rpt .d-sub { color: var(--muted); }
.rpt .d-meta { display: block; margin-top: 3px; color: var(--muted); }
.rpt .d-meta > i.fa, .rpt .d-meta > i.fa-solid, .rpt .d-meta > i.fa-regular { display: inline-block; width: 15px; margin-right: 4px; text-align: center; color: var(--faint); font-size: 11px; }
.rpt .d-was, .rpt .d-lbl { color: var(--faint); }
.rpt .d-lbl { margin-right: 5px; }
.rpt .d-dot { color: #cfd8dc; padding: 0 4px; }
.rpt .d-dir { color: var(--muted); white-space: nowrap; }
.rpt .d-dir b { color: var(--muted); }
.rpt .d-delta { font-weight: 500; white-space: nowrap; }
.rpt .d-delta.pos, .rpt .d-delta.early { color: var(--green); }
.rpt .d-delta.neg { color: var(--red); }
.rpt .d-delta.late { color: var(--orange); }
.rpt .d-badge { display: inline-block; padding: 0 6px; border-radius: 8px; font-weight: 500; margin-left: 4px; }
.rpt .d-badge.new { background: var(--blue-soft); color: var(--blue); }
.rpt .d-badge.gap { background: var(--amber-soft); color: var(--amber-ink); }
.rpt .d-badge.share { background: var(--violet-soft); color: var(--violet); }   /* Pipeline Analytics (Stage B): a deal reached through a contribution row, at the viewer's part */
.rpt .d-owner { display: flex; align-items: flex-start; gap: 8px; }
.rpt .d-avatar { flex: 0 0 26px; width: 26px; height: 26px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-weight: 500; background: var(--grey-soft); color: var(--muted); }
.rpt .d-cal { color: var(--faint); vertical-align: -2px; margin-right: 3px; }
.rpt .d-amount { font-size: 13px; font-weight: 500; color: var(--head); font-variant-numeric: tabular-nums; }

/* ---- 7 input forms (13 Sep 2026): a skin over the form DOM every input form already has - .form-holder > ValidationSummary.validation +
   RadTabStrip + RadMultiPage, two float columns .myForm / .myForm.floatRight of <section> rows (a caption span.required / .optional
   LEFT of a 340px input, then its .rfv-line validator), and a .controlArea footer. Switched on by the wrapper of the V2 popup host
   (PartialPopUpV2.aspx: <div class="rpt rpt-pop">) or the V2 master. Pilot: Sales/Opportunity/OpportunityFormV2.ascx.
   Two sizes drive the geometry: --f-label (the caption column) and --f-input (every input). Telerik's own skin sheets load after this
   file, so the input rules carry .rpt .myForm section for specificity, and the few that fight the site's !important rules say so. ---- */
.rpt { --f-label: 120px; --f-input: 340px; }
/* the form's body: the popup host's wrapper (.rpt-pop) or, on a V2 page, div.rpt-form-page (13 Oct 2026 - Sales/OpportunityV2, LeadV2,
   Office/Ticketing/TicketV2: the old direct form pages' successors through UiV2.Routes) - the same gutters, with a card of its own on the
   page ground, the window's title as a heading (.rpt-form-page-title) and the footer's hairline edge to edge inside the card */
:is(.rpt-pop, .rpt-form-page) { padding: 14px 22px 0; color: var(--ink); font-size: 12px; }
:is(.rpt-pop, .rpt-form-page) .form-holder { padding: 0; background: transparent; border-radius: 0; }   /* the window (the card) is the card */
.rpt .rpt-form-page { background: var(--card); border: 1px solid var(--frame); border-radius: 12px; padding-top: 18px; }
.rpt .rpt-form-page > .rpt-form-page-title { display: block; margin: 0 0 16px; font-size: 16px; font-weight: 500; line-height: 22px; color: var(--head); }
.rpt-pop:has(.m2) { padding: 0; }                                                          /* Messaging V2 fills the popup window (docs/MESSAGING-V2.md, 18 Sep 2026) */
.rpt-pop:has(.wa) { padding: 0; }                                                          /* the WhatsApp chat (3 Oct 2026; edge to edge 22 Oct 2026 - the owner: "extra white space"): it fills the titleless window */
/* the tab strip of a form = the sub-nav look (section 1 gives the words and the accent); a hairline under the strip, 16px of air */
:is(.rpt-pop, .rpt-form-page) .RadTabStrip_Material.rpt-nav { margin: 0 0 16px !important; border-bottom: 1px solid var(--hair); }
:is(.rpt-pop, .rpt-form-page) .rpt-nav.RadTabStrip_Material .rtsLevel1 { margin: 0 !important; padding: 0 !important; }
:is(.rpt-pop, .rpt-form-page) .rpt-nav.RadTabStrip_Material .rtsLevel1 .rtsFirst .rtsTxt { padding-left: 0; }
.rpt .RadMultiPage .rmpView { min-height: 180px; }
/* the validation summary: red chips */
.rpt .validation { margin: 0 0 12px; }
.rpt .validation ul li { border: none; border-radius: 8px; padding: 4px 10px; background: var(--red-soft); color: var(--red); font-size: 11px; }
/* rows: a 30px line per field, 9px between fields; the caption column is --f-label, the words in the ink at the regular weight (13 Oct 2026, the
   owner: "the labels are bold, and too gray" - they were 500 in the muted grey), the star red, the help glyph faint */
.rpt .myForm section { margin: 0 0 9px; min-height: 30px; }
.rpt .myForm section > span.required, .rpt .myForm section > span.optional, .rpt .myForm section > .label { width: var(--f-label); padding-right: 0; font-size: 11px; font-weight: 400; line-height: 30px; color: var(--ink); }   /* direct children only: a combo's item template also uses .label */
.rpt .myForm .required:after { color: var(--red); font-size: 12px; line-height: inherit; margin-left: 2px; }
.rpt .myForm section span.help:after { color: var(--faint); margin-left: 5px; }
.rpt .myForm section > a.help { display: inline-block; width: 18px; margin-left: -18px; vertical-align: top; line-height: 30px; text-align: right; color: var(--faint); text-decoration: none; }   /* sits in the last 18px of the caption column, the input stays aligned */
.rpt .myForm section > a.help:after { margin: 0; }
.rpt .myForm h3 { margin: 0 0 10px; font-size: 10px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: var(--faint); }
/* a section title (13 Oct 2026, the costing template form - the owner: "more space between main sections and a title before the table"):
   h3.rpt-form-section opens a block of the form - a column's fields, or a card such as the cost lines - in the head colour, sentence case,
   with 22px of air above it (31px from the field before, with that row's 9px). The column captions under it stay the small capitals */
.rpt h3.rpt-form-section, .rpt .myForm h3.rpt-form-section { margin: 22px 0 12px; font-size: 13px; font-weight: 500; line-height: 18px; letter-spacing: 0; text-transform: none; color: var(--head); }
/* a column that opens with its title sits level with its neighbour: no air above the first title (the invoice form, 20 Oct 2026) */
.rpt .myForm > h3.rpt-form-section:first-child { margin-top: 0; }
/* inputs: the site's underline look in the token greys - text in the head colour, placeholders faint (the site italicises them), focus in the accent */
.rpt .myForm section > input[type="text"], .rpt .myForm section > .RadAjaxPanel > input[type="text"], .rpt .myForm section .rpt-affix input[type="text"] { padding: 7px 0 6px; font-size: 12px; line-height: 16px; color: var(--head); border-bottom-color: var(--line); }
.rpt .myForm section > input[type="text"]:hover { border-bottom-color: var(--faint); }
.rpt .myForm section > input[type="text"]:focus { border-bottom-color: var(--accent); box-shadow: 0 -1px 0 0 var(--accent) inset; }
.rpt .myForm input::placeholder { color: var(--faint) !important; font-style: normal !important; opacity: 1 !important; }
.rpt .myForm .RadComboBox_Material, .rpt .myForm .RadDropDownList_Material, .rpt .myForm .RadInput_Material .riTextBox { color: var(--head) !important; }
.rpt .myForm .RadComboBox_Material .rcbInput, .rpt .myForm .RadDropDownList_Material .rddlInner, .rpt .myForm .RadInput_Material .riTextBox { font-size: 12px !important; }
.rpt .myForm .RadComboBox_Material .rcbInner:before, .rpt .myForm .RadDropDownList_Material .rddlInner:before, .rpt .myForm .RadPicker_Material .RadInput:before { border-bottom-color: var(--line) !important; }
.rpt .myForm .RadComboBox_Material .rcbEmptyMessage, .rpt .myForm .RadDropDownList .rddlDefaultMessage, .rpt .myForm .RadInput_Material .riEmpty { color: var(--faint) !important; font-style: normal !important; opacity: 1 !important; }
.rpt .myForm .RadComboBox_Material .rcbActionButton, .rpt .myForm .RadDropDownList_Material .rddlIcon, .rpt .myForm .RadPicker_Material .rcCalPopup { opacity: .7; }
.rpt .myForm .RadInput_Material a { padding-left: 3px !important; padding-right: 3px !important; }   /* the pickers' popup buttons: the old form's inline rule */
/* the validator line under an input (the site's .rfv-line: a 2px top border, offset past the caption; +4px = the inline gap after the caption) */
.rpt .myForm .rfv-line { left: calc(var(--f-label) + 4px); width: var(--f-input); border-top-color: var(--red); }
/* the small links after an input (+ add, copy, the map's pin - a.location, 14 Oct 2026, the company vehicle form; the template glyph after
   the quotation's Subject - a.template, 28 Oct 2026, QuotationFormV2) and the duplicate-name slot: faint, the accent on hover, on the input's line */
.rpt .myForm section > :is(a.add, a.copy, a.location, a.template) { display: inline-block; margin-left: 6px; vertical-align: top; line-height: 30px; color: var(--faint); text-decoration: none; }
.rpt .myForm section > :is(a.add, a.copy, a.location, a.template):hover { color: var(--accent); }
.rpt .myForm section > :is(a.add, a.copy, a.location, a.template):before { margin: 0; width: auto; font-size: 12px; }
.rpt .myForm section > .small { vertical-align: top; line-height: 30px; }
/* an affix inside the input line (the % before the win probability): one underline for the pair */
.rpt .myForm section .rpt-affix { display: inline-flex; align-items: center; width: var(--f-input); vertical-align: top; box-sizing: border-box; border-bottom: 1px solid var(--line); }
.rpt .myForm section .rpt-affix:hover { border-bottom-color: var(--faint); }
.rpt .myForm section .rpt-affix:focus-within { border-bottom-color: var(--accent); box-shadow: 0 -1px 0 0 var(--accent) inset; }
.rpt .myForm section .rpt-affix .rpt-adorn { flex: 0 0 auto; margin-right: 5px; font-size: 11px; line-height: 29px; color: var(--faint); }
.rpt .myForm section .rpt-affix input[type="text"] { flex: 1 1 auto; min-width: 0; width: auto !important; border-bottom: none !important; box-shadow: none !important; }
/* the pairs: two controls sharing the input width - the first --p1 wide, the second --p2 with 8px before it. The default pair is the
   next action's (date + who, text + type: 190 + 142); the lead form (14 Sep 2026) adds the contact person's title + first name
   (rpt-form-name, 60 + 272), a dial code + number (rpt-form-tel, 100 + 232) and a category + sub-category (rpt-form-half, 166 + 166).
   A validator of the first control keeps the caption offset at --p1; one of the second (.rfv-line.rfv-line-2) starts after the first
   (the 8px margin + the ~4px inline gap between the two controls) */
.rpt .myForm section.rpt-form-pair { --p1: 190px; --p2: 142px; }
.rpt .myForm section.rpt-form-pair.rpt-form-name { --p1: 60px; --p2: 272px; }
.rpt .myForm section.rpt-form-pair.rpt-form-tel { --p1: 100px; --p2: 232px; }
.rpt .myForm section.rpt-form-pair.rpt-form-half { --p1: 166px; --p2: 166px; }
.rpt .myForm section.rpt-form-pair > :is(.RadPicker, .RadComboBox, .RadDropDownList, .RadInput, input[type="text"]) { width: var(--p1) !important; }
.rpt .myForm section.rpt-form-pair > :is(.RadPicker, .RadComboBox, .RadDropDownList, .RadInput, input[type="text"]) ~ :is(.RadPicker, .RadComboBox, .RadDropDownList, .RadInput, input[type="text"]) { width: var(--p2) !important; margin-left: 8px; }
.rpt .myForm section.rpt-form-pair .rfv-line { width: var(--p1); }
.rpt .myForm section.rpt-form-pair .rfv-line.rfv-line-2 { left: calc(var(--f-label) + 4px + var(--p1) + 12px); width: var(--p2); }
/* a control an AJAX setting updates comes wrapped in div.RadAjaxPanel, which the direct-child rules above miss (24 Oct 2026, the invoices UAT:
   the invoice form's branch pair - updated by the sales order pick - drew 806px wide and pushed the right column under the left one; the
   Subject and the footer's two buttons likewise): the wrapper counts as the control it holds */
.rpt .myForm section.rpt-form-pair > .RadAjaxPanel > :is(.RadPicker, .RadComboBox, .RadDropDownList, .RadInput, input[type="text"]) { width: var(--p1) !important; }
.rpt .myForm section.rpt-form-pair > :is(.RadPicker, .RadComboBox, .RadDropDownList, .RadInput, input[type="text"], .RadAjaxPanel) ~ .RadAjaxPanel > :is(.RadPicker, .RadComboBox, .RadDropDownList, .RadInput, input[type="text"]),
.rpt .myForm section.rpt-form-pair > .RadAjaxPanel ~ :is(.RadPicker, .RadComboBox, .RadDropDownList, .RadInput, input[type="text"]) { width: var(--p2) !important; margin-left: 8px; }
/* the row above the columns (the record's name) and the tools at its right (a tenant option such as Orphan) */
.rpt .rpt-form-top { overflow: hidden; }
.rpt .rpt-form-top .myForm { float: none; display: block; }
/* the top row's text box at the form's input width, like every input under it (21 Oct 2026: the invoice form's Subject drew short); not
   !important, so the phone layout's full width still wins */
.rpt .rpt-form-top .myForm section > input[type="text"], .rpt .rpt-form-top .myForm section > .RadAjaxPanel > input[type="text"] { width: var(--f-input); box-sizing: border-box; }
.rpt .rpt-form-tools { float: right; line-height: 30px; font-size: 11px; color: var(--muted); }
.rpt .rpt-form-tools .RadButton .rbText { font-size: 11px; color: var(--muted); }
.rpt .myForm.rpt-form-side { width: 560px; }                      /* a column that holds a card (the Forecast tab's revenue schedule): a definite width, not shrink-to-fit */
/* a column head (the lead form, 14 Sep 2026: Contact Person / Company): the h3 caption at the left, the block's toggle (a RadCheckBox) at the right, on the row's width */
.rpt .myForm .rpt-form-colhead { display: flex; align-items: center; justify-content: space-between; width: calc(var(--f-label) + var(--f-input) + 4px); margin: 0 0 8px; }
.rpt .myForm .rpt-form-colhead h3 { margin: 0; }
.rpt .myForm .rpt-form-colhead .RadButton .rbText { font-size: 11px; color: var(--muted); }
/* the block a toggle switched off (no contact person / no company): dimmed and inert, the rows keep their place */
.rpt .myForm .rpt-form-off { pointer-events: none; opacity: .4; }
/* the duplicate warning SimilarityCheck writes into the slot after a name (a.badge.badge-red "warning") is the red pill of the vocabulary; the input it marks (.redBorder) takes the red underline */
.rpt .myForm section > .small > .badge { display: inline-block; padding: 3px 9px; margin: 0; border-radius: 10px; background: var(--red-soft) !important; color: var(--red) !important; font-size: 10px; font-weight: 500; line-height: 1.4; text-decoration: none; vertical-align: middle; }
.rpt .myForm section > input.redBorder { border-bottom: 2px solid var(--red) !important; }
/* the products box (a RadAutoCompleteBox of tokens, the lead form): the input width, the underline in the token greys, the empty message faint; the row grows with the tokens */
.rpt .myForm section > .RadAutoCompleteBox { width: var(--f-input) !important; vertical-align: top; }
.rpt .myForm .RadAutoCompleteBox_Material .racTokenList:before { border-bottom-color: var(--line) !important; }
.rpt .myForm .RadAutoCompleteBox_Material .racInput { font-size: 12px !important; color: var(--head); }
.rpt .myForm .RadAutoCompleteBox_Material .racEmptyMessage { color: var(--faint) !important; font-style: normal !important; opacity: 1 !important; }
/* the dial-code combos (the lead form) put a flag before each country of their list; the list renders at body level, outside .rpt - hence the body scope */
body.v2 .RadComboBoxDropDown .rcbImage { width: 17px; }
/* a hint under an input (the ticket form's matched SLA targets, 21 Sep 2026): a quiet line aligned with the input; an empty one takes no room */
.rpt .myForm section > .rpt-form-hint { display: block; margin: 2px 0 0 calc(var(--f-label) + 4px); font-size: 10px; line-height: 1.4; color: var(--muted); }
.rpt .myForm section > .rpt-form-hint:empty { display: none; }
/* a hint with a verdict (13 Oct 2026, the company vehicle assignment: the checks under the vehicle and the driver): red refuses the save,
   amber is worth a look, green is clear; the glyph before the words */
.rpt .myForm section > .rpt-form-hint.is-bad { color: var(--red); }
.rpt .myForm section > .rpt-form-hint.is-warn { color: var(--amber-ink); }
.rpt .myForm section > .rpt-form-hint.is-ok { color: var(--green); }
.rpt .myForm section > .rpt-form-hint > .fa { width: 12px; margin-right: 3px; text-align: center; }
/* a text as it prints, read-only, above its "Edit text" (16 Oct 2026, the invoice form's Bank & Terms tab - docs/INVOICES-V2.md F-5): a
   framed card in the print's own markup, scrolled past 220px; .rpt-form-preview-empty = the line it shows while there is no text */
.rpt .rpt-form-preview { margin: 0 2px 14px; padding: 12px 14px; max-height: 220px; overflow: auto; border: 1px solid var(--line); border-radius: 8px; background: var(--card); font-size: 12px; line-height: 1.5; color: var(--head); }
.rpt .rpt-form-preview p { margin: 0 0 6px; }
.rpt .rpt-form-preview .rpt-form-preview-empty { color: var(--faint); font-size: 11px; }
/* what an action window does, said once above its button (13 Oct 2026, the company vehicle Start / End Trip and Cancel windows): a tinted
   band under the record's facts; the route's arrow in a hero title (.rv-title) faint */
.rpt .rpt-form-note { display: flex; align-items: flex-start; gap: 8px; margin: 16px 0 14px; padding: 10px 14px; border-radius: 8px; background: var(--band); font-size: 12px; line-height: 1.5; color: var(--head); }
.rpt .rpt-form-note > .fa { margin-top: 3px; color: var(--faint); }
.rpt .rv-title > .fa { margin: 0 4px; font-size: 15px; color: var(--faint); vertical-align: 1px; }
/* a card in the input's slot (the ticket form's matched agent): the name over the title, the skill stars, a foot with the match pill and a help link */
.rpt .myForm section > .rpt-form-card { display: inline-block; width: var(--f-input); box-sizing: border-box; padding: 8px 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--band); vertical-align: top; line-height: 1.4; }
.rpt .myForm section > .rpt-form-card .rpt-form-card-name { display: block; font-size: 12px; font-weight: 500; color: var(--head); }
.rpt .myForm section > .rpt-form-card .rpt-form-card-sub { display: block; font-size: 11px; color: var(--muted); }
.rpt .myForm section > .rpt-form-card .rpt-form-card-sub:empty { display: none; }
.rpt .myForm section > .rpt-form-card .RadRating { margin: 4px 0; }
.rpt .myForm section > .rpt-form-card .rpt-form-card-foot { display: flex; align-items: center; gap: 10px; margin-top: 4px; }
.rpt .myForm section > .rpt-form-card .rpt-form-card-foot a.help { color: var(--faint); font-size: 10px; text-decoration: none; }
.rpt .myForm section > .rpt-form-card .rpt-form-card-foot a.help:hover { color: var(--accent); }
/* the footer: a hairline edge to edge, the number at the left, the one accent button at the right */
.rpt .controlArea.rpt-form-foot { display: flex; align-items: center; justify-content: space-between; clear: both; margin: 20px -22px 0; padding: 12px 22px 14px; border-top: 1px solid var(--hair); text-align: left; }
.rpt .rpt-form-no { display: flex; flex-direction: column; line-height: 14px; }
.rpt .rpt-form-no .super-text { display: block; margin: 0; font-size: 10px; color: var(--faint); }
.rpt .rpt-form-no .rpt-form-num { margin-top: 2px; font-size: 12px; font-weight: 700; color: var(--accent); }
.rpt .rpt-btn.RadButton.rbButton, .rpt .rpt-btn.RadButton.rbButton.rbPrimaryButton { height: 34px !important; padding: 0 24px !important; border: none !important; border-radius: 17px !important; background: var(--accent) !important; box-shadow: none !important; }
.rpt .rpt-btn.RadButton.rbButton .rbText { color: #fff !important; font-size: 12px; font-weight: 500; text-transform: none; }
.rpt .rpt-btn.RadButton.rbButton.rbHovered, .rpt .rpt-btn.RadButton.rbButton.rbPrimaryButton.rbHovered, .rpt .rpt-btn.RadButton.rbButton.rbFocused { background: var(--accent-ink) !important; }
.rpt .rpt-btn.RadButton.rbButton.rbDisabled, .rpt .rpt-btn.RadButton.rbButton.rbPrimaryButton.rbDisabled { background: #cfd8dc !important; }
/* a form footer with two buttons (13 Oct 2026, the campaign composer: Save draft beside Send): the quiet twin (.rpt-btn-ghost, which takes the
   free space to its left) then the accent one, 8px apart, both at the right. The twin's free space is its own rule here (the invoices UAT,
   20 Oct 2026: "Save as proforma" stood in the middle of the footer) - the footer spreads its children (space-between), and the only
   margin-left: auto was the ticket composer's, at the end of the file */
.rpt .controlArea.rpt-form-foot > .rpt-btn-ghost.RadButton.rbButton { margin-left: auto; }
.rpt .rpt-form-foot .rpt-btn-ghost + .rpt-btn.RadButton.rbButton { margin-left: 8px; }
/* the same pair when AJAX settings update the buttons (the invoice form, 24 Oct 2026): each sits in its div.RadAjaxPanel */
.rpt .controlArea.rpt-form-foot > .RadAjaxPanel:has(> .rpt-btn-ghost) { margin-left: auto; }
.rpt .controlArea.rpt-form-foot > .RadAjaxPanel:has(> .rpt-btn-ghost) + .RadAjaxPanel:has(> .rpt-btn) { margin-left: 8px; }
/* two quiet buttons before the accent one (28 Oct 2026, the quotation form: Preview and Save Draft before Save): the second ghost sits 8px after
   the first instead of taking the free space too (each ghost's margin-left: auto split the space and floated the first to the middle) - plain
   and inside the AJAX wrappers */
.rpt .controlArea.rpt-form-foot > .rpt-btn-ghost.RadButton.rbButton + .rpt-btn-ghost.RadButton.rbButton { margin-left: 8px; }
.rpt .controlArea.rpt-form-foot > .RadAjaxPanel:has(> .rpt-btn-ghost) + .RadAjaxPanel:has(> .rpt-btn-ghost) { margin-left: 8px; }
/* a hidden quiet button still leaves its EMPTY AJAX wrapper in the footer (the quotation form's Save Draft on a won quotation): the accent
   button keeps its 8px after any ghost wrapper before it, not only the adjacent one (the end-of-wave review, 28 Oct 2026) */
.rpt .controlArea.rpt-form-foot > .RadAjaxPanel:has(> .rpt-btn-ghost) ~ .RadAjaxPanel:has(> .rpt-btn) { margin-left: 8px; }
/* a combo's group captions (an item with IsSeparator - the composer's value fields, 13 Oct 2026): the menus' caption band in the token greys,
   never the Material skin's colour (the owner: "the color needs to match the theme"); the list renders at body level, hence body.v2 */
body.v2 .RadComboBoxDropDown .rcbList > li.rcbSeparator { margin: 4px 0 0; padding: 6px 12px 4px !important; background: var(--band) !important; border-top: 1px solid var(--hair); color: var(--muted) !important; font-size: 10px !important; font-weight: 500; letter-spacing: .05em; text-transform: uppercase; }
body.v2 .RadComboBoxDropDown .rcbList > li.rcbSeparator:first-child { margin-top: 0; border-top: none; }
/* inside the tabs: a child control's Add button is the grey button of the search card, its editors get a hairline frame; its grids are section 4 */
.rpt .rmpView .RadButton.rbButton:not(.rpt-btn):not(.rpt-entry-add):not(.rbCheckBox):not(.rbRadioButton):not(.rbLinkButton) { height: 32px !important; padding: 0 20px !important; border: 1px solid var(--line) !important; border-radius: 8px !important; background: var(--band) !important; box-shadow: none !important; }
.rpt .rmpView .RadButton.rbButton:not(.rpt-btn):not(.rpt-entry-add):not(.rbCheckBox):not(.rbRadioButton):not(.rbLinkButton) .rbText { color: var(--head) !important; font-weight: 500; }
/* the Description editor (a plain section) gets the frame; an underline editor (section.hideRadEditorToolBar, the Competition field) keeps the site's look.
   The toolbar classes are spelt both ways: reToolBar in the Lightweight render mode the site uses, reToolbar in Classic */
.rpt .rmpView section:not(.hideRadEditorToolBar) > .RadEditor { border: 1px solid var(--line) !important; border-radius: 8px; overflow: hidden; }
.rpt .rmpView section:not(.hideRadEditorToolBar) > .RadEditor .reToolBarWrapper, .rpt .rmpView section:not(.hideRadEditorToolBar) > .RadEditor .reToolBar,
.rpt .rmpView section:not(.hideRadEditorToolBar) > .RadEditor .reToolbarWrapper, .rpt .rmpView section:not(.hideRadEditorToolBar) > .RadEditor .reToolbar { background: var(--band) !important; }
.rpt .rmpView .RadEditor .reContentArea { font-size: 12px; }
/* a full-width block under a form's columns (13 Oct 2026, Sales/Marketing/EmailTemplateFormV2 - the CRM email template's editor): the
   editor framed as the Description editor of a tab, its validator line and its hint along the whole width */
.rpt .form-holder > section.rpt-form-wide { margin: 0 0 9px; }
.rpt .form-holder > section.rpt-form-wide > .RadEditor { border: 1px solid var(--line) !important; border-radius: 8px; overflow: hidden; }
.rpt .form-holder > section.rpt-form-wide > .RadEditor :is(.reToolBarWrapper, .reToolBar, .reToolbarWrapper, .reToolbar) { background: var(--band) !important; }
.rpt .form-holder > section.rpt-form-wide > .rfv-line { left: 0; width: 100%; border-top-color: var(--red); }
.rpt .form-holder > section.rpt-form-wide > .rpt-form-hint { display: block; margin: 6px 0 0; font-size: 10px; line-height: 1.4; color: var(--muted); }
/* 7b THE ENTRY ROW (13 Sep 2026, the client's pick "B" on the rendered options): the add-a-row strip of a child list is a ROW of the
   list's own card. The card (div.rpt-entry-card) holds three things that share one column model: div.rpt-entry-head = the column
   captions (the GridView's own header is off), <asp:Panel CssClass="rpt-entry"> = the tinted entry row of div.rpt-entry-field inputs,
   each under its column, and the GridView (CssClass="myGrid rpt-entry-grid", ShowHeader=False). A column is a w-<px> class on the
   caption span and on the field (its CONTENT width, content-box + 10px side padding, 14px at the card's edges) and the same px as
   ItemStyle-Width on the grid's column (table-layout: fixed); w-rest is the one unsized column, w-act the 26px actions column that
   carries the round "+" (RadPushButton CssClass="rpt-entry-add") on the entry row and the trash on the rows. No captions on the
   inputs: the placeholders carry the words. */
.rpt .rpt-entry-card { margin: 0 0 14px; background: var(--card); border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
/* a quiet line under a card: an option on the left, what the rows are worth on the right (Product Details' pipeline-value option) */
.rpt .rpt-entry-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: -6px 2px 14px; font-size: 11px; color: var(--muted); }
.rpt .rpt-entry-foot .RadButton.rbCheckBox .rbText { font-size: 11px; color: var(--muted); }
.rpt .rpt-entry-foot .comment { font-variant-numeric: tabular-nums; }
/* the column model, shared by the caption row and the entry row */
.rpt .rpt-entry-head, .rpt .rpt-entry { display: flex; align-items: flex-start; }
.rpt .rpt-entry-head > span, .rpt .rpt-entry > .rpt-entry-field { box-sizing: content-box; padding-left: 10px; padding-right: 10px; min-width: 0; }
.rpt .rpt-entry-head > span:first-child, .rpt .rpt-entry > .rpt-entry-field:first-child { padding-left: 14px; }
.rpt .rpt-entry-head > span:last-child, .rpt .rpt-entry > .rpt-entry-field:last-child { padding-right: 14px; }
.rpt .rpt-entry-card .w-80 { flex: 0 0 80px; }    .rpt .rpt-entry-card .w-90 { flex: 0 0 90px; }    .rpt .rpt-entry-card .w-100 { flex: 0 0 100px; }
.rpt .rpt-entry-card .w-140 { flex: 0 0 140px; }  .rpt .rpt-entry-card .w-150 { flex: 0 0 150px; }  .rpt .rpt-entry-card .w-155 { flex: 0 0 155px; }
.rpt .rpt-entry-card .w-190 { flex: 0 0 190px; }  .rpt .rpt-entry-card .w-200 { flex: 0 0 200px; }  .rpt .rpt-entry-card .w-220 { flex: 0 0 220px; }
.rpt .rpt-entry-card .w-240 { flex: 0 0 240px; }  .rpt .rpt-entry-card .w-290 { flex: 0 0 290px; }
.rpt .rpt-entry-card .w-rest { flex: 1 1 auto; }  .rpt .rpt-entry-card .w-act { flex: 0 0 26px; }  .rpt .rpt-entry-card .w-50 { flex: 0 0 50px; }   /* w-50: two action glyphs (edit + delete, the documents) */
/* the upload in an entry row (DocumentsManagerV2, 15 Sep 2026): the Attach button as the row's 26px grey pill, the chosen file's name under it */
.rpt .rpt-entry .rpt-entry-upload.RadUpload { width: 100% !important; margin: 0 !important; }
.rpt .rpt-entry .rpt-entry-upload .ruFileWrap { height: auto !important; margin: 0 !important; }
.rpt .rpt-entry .rpt-entry-upload .ruBrowse { display: inline-flex !important; align-items: center; height: 26px !important; line-height: 26px !important; margin: 0 !important; padding: 0 12px !important; border: 1px solid var(--line) !important; border-radius: 13px !important; background: var(--band) !important; color: var(--head) !important; font-size: 11px !important; font-weight: 500; text-transform: none !important; letter-spacing: 0; box-shadow: none !important; }
.rpt .rpt-entry .rpt-entry-upload .ruBrowse:hover { background: var(--band-2) !important; }
.rpt .rpt-entry .rpt-entry-upload .ruInputs li { margin: 4px 0 0; }
.rpt .rpt-entry .rpt-entry-upload .ruUploadProgress { font-size: 11px; color: var(--ink); }
/* the caption row = the grid header's look (white, the ink, a neutral hairline under it - the 2px accent rule of 17 Sep 2026 went
   with the grid header's on 30 Sep 2026). The entry grid's own stripe is unchanged: its first rows sit under the entry row, not here */
.rpt .rpt-entry-head { background: var(--card); border-bottom: 1px solid var(--line); }
.rpt .rpt-entry-head > span { padding-top: 8px; padding-bottom: 8px; font-size: 10px; font-weight: 500; letter-spacing: .05em; text-transform: uppercase; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rpt .rpt-entry-head > span.num { text-align: right; }
/* the entry row: a tinted row, the inputs 25px on one line, the validator line under each */
.rpt .rpt-entry { padding: 7px 0 6px; background: var(--tint); border-bottom: 1px solid var(--hair); }
.rpt .rpt-entry > .rpt-entry-field { display: flex; flex-direction: column; }
.rpt .rpt-entry .rpt-entry-field .RadComboBox, .rpt .rpt-entry .rpt-entry-field .RadDropDownList, .rpt .rpt-entry .rpt-entry-field .RadPicker, .rpt .rpt-entry .rpt-entry-field .RadInput, .rpt .rpt-entry .rpt-entry-field > input[type="text"] { width: 100% !important; max-width: none; box-sizing: border-box; }
.rpt .rpt-entry .rpt-entry-field .RadInput .riTextBox { width: 100% !important; }
.rpt .rpt-entry .rpt-entry-field > input[type="text"] { padding: 4px 0 3px; font-size: 12px; line-height: 16px; color: var(--head); border-bottom-color: var(--line); }
.rpt .rpt-entry .rpt-entry-field > input[type="text"]:focus { border-bottom-color: var(--accent); box-shadow: 0 -1px 0 0 var(--accent) inset; }
.rpt .rpt-entry .RadInput_Material input.riTextBox { padding: 5px 0 3px !important; line-height: 16px; }
.rpt .rpt-entry .RadDropDownList_Material .rddlInner { padding: 4px 20px 4px 0 !important; }
.rpt .rpt-entry input::placeholder { color: var(--faint) !important; font-style: normal !important; opacity: 1 !important; }
.rpt .rpt-entry .RadComboBox_Material, .rpt .rpt-entry .RadDropDownList_Material, .rpt .rpt-entry .RadInput_Material .riTextBox { color: var(--head) !important; }
.rpt .rpt-entry .RadComboBox_Material .rcbInput, .rpt .rpt-entry .RadDropDownList_Material .rddlInner, .rpt .rpt-entry .RadInput_Material .riTextBox { font-size: 12px !important; }
.rpt .rpt-entry .RadComboBox_Material .rcbEmptyMessage, .rpt .rpt-entry .RadDropDownList .rddlDefaultMessage, .rpt .rpt-entry .RadInput_Material .riEmpty { color: var(--faint) !important; font-style: normal !important; opacity: 1 !important; }
.rpt .rpt-entry .rfv-line { left: 0; width: 100%; border-top-color: var(--red); }
.rpt .rpt-entry .rpt-entry-hint { display: block; min-height: 0; margin-top: 3px; font-size: 10px; color: var(--faint); }
.rpt .rpt-entry .rpt-entry-hint.error { color: var(--red); }
.rpt .rpt-entry .rpt-entry-hint:empty { display: none; }
.rpt .rpt-entry .rpt-entry-field.num > input[type="text"], .rpt .rpt-entry .rpt-entry-field.num .RadInput_Material input.riTextBox { text-align: right; }
.rpt .rpt-entry .rpt-entry-field.num .rpt-entry-hint { text-align: right; font-variant-numeric: tabular-nums; }   /* a figure under a number (the costing template's "sells", 13 Oct 2026) sits under its digits */
/* a control with a "+" link on its line (the customer and the contact of a key contact); a hidden one (the other mode) leaves the cell in place */
.rpt .rpt-entry .rpt-entry-in { display: flex; align-items: center; gap: 6px; min-width: 0; }
.rpt .rpt-entry .rpt-entry-in > .RadComboBox, .rpt .rpt-entry .rpt-entry-in > .RadDropDownList, .rpt .rpt-entry .rpt-entry-in > .RadInput { flex: 1 1 auto; width: auto !important; min-width: 0; }   /* a dropdown / numeric box with a glyph on its line (the Sales Targets currency and phasing, 17 Sep 2026) */
/* the help glyph on an entry field's line: faint, the accent on hover, the tip in a data-tip bubble (section 9) */
.rpt .rpt-entry .rpt-entry-in > a.help { flex: 0 0 auto; color: var(--faint); text-decoration: none; line-height: 1; cursor: help; }
.rpt .rpt-entry .rpt-entry-in > a.help:hover { color: var(--accent); }
.rpt .rpt-entry .rpt-entry-in > a.help:after { margin: 0; width: auto; font-size: 12px; }
.rpt .rpt-entry a.add { flex: 0 0 auto; color: var(--faint); text-decoration: none; line-height: 1; }
.rpt .rpt-entry a.add:hover { color: var(--accent); }
.rpt .rpt-entry a.add:before { margin: 0; width: auto; font-size: 12px; }
/* the round "+" in the actions column: 26px, white, a hairline, the plus alone (the button's word stays for the screen reader) */
.rpt .rpt-entry .rpt-entry-add.RadButton.rbButton { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px !important; min-width: 0; padding: 0 !important; border: 1px solid var(--line) !important; border-radius: 50% !important; background: var(--card) !important; box-shadow: none !important; vertical-align: middle; }
.rpt .rpt-entry .rpt-entry-add.RadButton.rbButton .rbText { font-size: 0; line-height: 0; color: transparent; }
.rpt .rpt-entry .rpt-entry-add.RadButton.rbButton .rbText:before { content: "\f067"; font-family: FontAwesome; font-size: 12px; line-height: 24px; color: var(--muted); }
.rpt .rpt-entry .rpt-entry-add.RadButton.rbButton.rbHovered, .rpt .rpt-entry .rpt-entry-add.RadButton.rbButton.rbFocused { border-color: var(--accent) !important; background: var(--card) !important; }
.rpt .rpt-entry .rpt-entry-add.RadButton.rbButton.rbHovered .rbText:before { color: var(--accent); }
/* 7c THE ENTRY GRID: the rows under the entry row, inside the card (no border of its own; fixed layout, its column widths = ItemStyle-Width);
   a plain italic empty line, a totals row (FooterStyle-CssClass="rpt-entry-total") */
.rpt .myGrid.rpt-entry-grid { width: 100%; margin: 0; padding: 0; background: var(--card); border: none; border-radius: 0; border-collapse: separate !important; border-spacing: 0; table-layout: fixed; font-size: 11px; color: var(--ink); }
.rpt .myGrid.rpt-entry-grid th { display: none; }
.rpt .myGrid.rpt-entry-grid > tbody > tr > td { padding: 8px 10px; border: none !important; border-bottom: 1px solid var(--hair) !important; vertical-align: top; line-height: 1.5; background: transparent; overflow-wrap: anywhere; }
/* the cells are CONTENT-box (17 Sep 2026, measured on the Sales Targets card): an entry field is content-box - w-80 = 80px of content + 10px of
   padding each side - while Reports.css makes every box under .rpt border-box, so a td with ItemStyle-Width="80" was 80px INCLUDING its
   padding: every grid column landed 20px (the actions column 24px) to the right of its caption, 124px on the first. With the cells
   content-box the same px on the caption, the field and the column line up to the pixel. */
.rpt .myGrid.rpt-entry-grid > tbody > tr > td { box-sizing: content-box; }
.rpt .myGrid.rpt-entry-grid > tbody > tr:last-child > td { border-bottom: none !important; }
.rpt .myGrid.rpt-entry-grid > tbody > tr > td:first-child { padding-left: 14px; }
.rpt .myGrid.rpt-entry-grid > tbody > tr > td:last-child { padding-right: 14px; }
.rpt .myGrid.rpt-entry-grid > tbody:first-child > tr:nth-child(odd) { background: transparent; }
.rpt .myGrid.rpt-entry-grid > tbody:first-child > tr:nth-child(even) { background: var(--alt); }
.rpt .myGrid.rpt-entry-grid > tbody:first-child > tr.empty-row { background: transparent; }
.rpt .myGrid.rpt-entry-grid > tbody:first-child > tr:hover, .rpt .myGrid.rpt-entry-grid > tbody:first-child > tr:not(:first-child):not(:last-child):hover { background: var(--hover); }
.rpt .myGrid.rpt-entry-grid td.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.rpt .myGrid.rpt-entry-grid td small, .rpt .myGrid.rpt-entry-grid td .small, .rpt .myGrid.rpt-entry-grid td .xsmall, .rpt .myGrid.rpt-entry-grid td .super-text { font-size: 10px; color: var(--faint); }
.rpt .myGrid.rpt-entry-grid td .super-text { display: block; margin: 0; }
.rpt .myGrid.rpt-entry-grid td p { margin: 0; }
.rpt .myGrid.rpt-entry-grid td a { color: var(--ink); text-decoration: none; }
.rpt .myGrid.rpt-entry-grid td a:hover { color: var(--accent); }
.rpt .myGrid.rpt-entry-grid td a.delete { color: var(--faint); }
.rpt .myGrid.rpt-entry-grid td a.delete:hover { color: var(--red); }
.rpt .myGrid.rpt-entry-grid tr.empty-row td { text-transform: none; text-align: left; color: var(--faint); font-style: italic; padding: 12px 14px; background: transparent; }
.rpt .myGrid.rpt-entry-grid tr.rpt-entry-total td, .rpt .myGrid.rpt-entry-grid tr.rpt-entry-total:hover td { font-weight: 500; color: var(--head); background: var(--tint); border-top: 1px solid var(--line) !important; }
.rpt .myGrid.rpt-entry-grid tr.rpt-entry-total td b { font-weight: 500; }
/* 7d A ROW'S TIMELINE (7 Oct 2026, Opportunity_TeamContributionV2 - a team contribution as a task): a second tinted line under the entry
   row (.rpt-entry-line) - the switch under the first column, the two dates and the mail box beside it while it is on (.is-off hides them;
   the page's script toggles the same class); the round button turns into a tick while a row is edited (.is-update), the cross beside it
   leaves the edit; under a row's remarks the timeline line (.rpt-ctl - it was .rpt-tl until 9 Oct 2026, the ticket timeline's container
   class, whose .rpt-pop rule gave every grid row a 120px line in the form popup): the status pill, the progress bar, the dates (.is-late
   red with the bell), the mail mark */
.rpt .rpt-entry:has(+ .rpt-entry-line) { border-bottom: none; padding-bottom: 2px; }
.rpt .rpt-entry.rpt-entry-line { padding-top: 2px; }
.rpt .rpt-entry-line-fields { display: flex; flex: 1 1 auto; align-items: flex-start; min-width: 0; }
.rpt .rpt-entry-line-fields.is-off { display: none; }
.rpt .rpt-entry-line-fields > .rpt-entry-field { display: flex; flex-direction: column; box-sizing: content-box; padding: 0 10px; min-width: 0; }
.rpt .rpt-entry-line .RadButton.rbCheckBox { margin-top: 4px; }
.rpt .rpt-entry-line .RadButton.rbCheckBox .rbText { font-size: 11px; color: var(--ink); }
.rpt .rpt-entry .rpt-entry-add.RadButton.rbButton.is-update .rbText:before { content: "\f00c"; color: var(--accent); }
.rpt .rpt-entry a.rpt-entry-cancel { flex: 0 0 auto; color: var(--faint); text-decoration: none; font-size: 12px; line-height: 1; }
.rpt .rpt-entry a.rpt-entry-cancel:hover { color: var(--red); }
.rpt .myGrid.rpt-entry-grid td a.edit { margin-right: 8px; color: var(--faint); }
.rpt .myGrid.rpt-entry-grid .rpt-ctl { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin-top: 5px; font-size: 10px; font-style: normal; color: var(--muted); }
.rpt .myGrid.rpt-entry-grid .rpt-ctl .pill { font-size: 10px; line-height: 18px; }
.rpt .myGrid.rpt-entry-grid .rpt-ctl .is-late { font-weight: 500; color: var(--red); }
.rpt .myGrid.rpt-entry-grid .rpt-ctl .fa { margin-right: 2px; }
/* the progress of a task: a 6px track and its fill, green when done - the contribution timeline in the entry grid, the assignee's control
   and the record view (no .rpt scope: the record window lives outside it) */
.rpt-progress { display: inline-block; width: 64px; height: 6px; border-radius: 3px; background: var(--hair); overflow: hidden; vertical-align: middle; }
.rpt-progress > i { display: block; height: 100%; border-radius: 3px; background: var(--blue); }
.rpt-progress.is-done > i { background: var(--green); }
/* a campaign's progress in a list row (13 Oct 2026 - Marketing > Campaigns and the Marketing Overview share it): the figures on a wrapping
   line (.rpt-figs: a number before its word; .is-in emerald - bought -, .is-out red - failed), the share done as the full cell's track
   (.rpt-progress.is-wide), the channel glyph before the number (.rpt-ch, WhatsApp in its own green) */
.rpt-progress.is-wide { display: block; width: 100%; margin: 4px 0 6px; }
.rpt .rpt-figs { display: flex; flex-wrap: wrap; gap: 2px 12px; font-size: 11px; color: var(--muted); }
.rpt .rpt-figs b { font-weight: 500; color: var(--head); font-variant-numeric: tabular-nums; }
.rpt .rpt-figs .is-in, .rpt .rpt-figs .is-in b { color: var(--emerald); }
.rpt .rpt-figs .is-out, .rpt .rpt-figs .is-out b { color: var(--red); }
.rpt .rpt-ch { width: 16px; margin-right: 4px; color: var(--faint); }
.rpt .rpt-ch.fa-whatsapp { color: #25a244; }
/* 7e THE ASSIGNEE PANEL (9 Oct 2026, Opportunity_MyContributionV2 on PartialPopUpV2 - the assignee's side of a contribution's timeline): the
   record view's hero and facts (.rv), the form skin for its three inputs, the documents card, the ticket timeline's log (.rpt-tl); here only
   what those lack - a fact across the whole grid, a late value, the progress fact, a multi-line remark on the form's line, the section
   captions, the green button (Confirm completion) beside the accent one, the in-page confirmation strip, the completed card */
.rv .rv-fact.is-wide { grid-column: 1 / -1; }
.rv .rv-val.is-late { color: var(--red); font-weight: 500; }
.rv .rv-val .rpt-progress { width: 120px; margin-right: 4px; }
.rv .rv-fact > a.rv-maplink { display: block; margin-top: 2px; font-size: 11px; color: var(--accent); text-decoration: none; }     /* a point on the map under its address (14 Oct 2026, the company vehicle windows) */
.rv .rv-fact > a.rv-maplink:hover { text-decoration: underline; }
.rpt .myForm section > textarea { width: var(--f-input); min-height: 58px; box-sizing: border-box; padding: 7px 0 6px; border: none; border-bottom: 1px solid var(--line); border-radius: 0; background: transparent; font: inherit; font-size: 12px; line-height: 16px; color: var(--head); resize: vertical; vertical-align: top; }
.rpt .myForm section > textarea:hover { border-bottom-color: var(--faint); }
.rpt .myForm section > textarea:focus { outline: none; border-bottom-color: var(--accent); box-shadow: 0 -1px 0 0 var(--accent) inset; }
.rpt .rpt-mc-h { margin: 18px 0 8px; font-size: 10px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: var(--faint); }
.rpt .rpt-mc-actions { display: inline-flex; align-items: center; gap: 10px; }
.rpt .rpt-btn.rpt-btn-ok.RadButton.rbButton { background: var(--green) !important; }
.rpt .rpt-btn.rpt-btn-ok.RadButton.rbButton.rbHovered, .rpt .rpt-btn.rpt-btn-ok.RadButton.rbButton.rbFocused { background: color-mix(in srgb, var(--green) 85%, black) !important; }
.rpt .rpt-mc-confirm { display: flex; align-items: center; gap: 14px; margin: 12px 0 0; padding: 10px 14px; border: 1px solid var(--line); border-radius: 8px; background: var(--band); font-size: 12px; line-height: 1.5; color: var(--head); }
.rpt .rpt-mc-confirm.is-off { display: none; }
.rpt .rpt-mc-confirm > span { flex: 1 1 auto; }
.rpt .rpt-mc-confirm > a.small { flex: none; color: var(--muted); text-decoration: none; }
.rpt .rpt-mc-confirm > a.small:hover { color: var(--head); }
.rpt .rpt-mc-done { margin: 16px 0 0; padding: 10px 14px; border-radius: 8px; background: var(--green-soft); color: var(--green); font-size: 12px; font-weight: 500; }
.rpt .rpt-mc-done .fa { margin-right: 6px; }
/* 21 Oct 2026 (docs/CONTRIBUTION-ENHANCEMENTS.md): the team's latest response (B3), the caption's "Download all (.zip)" (B6), and the documents
   card's "Upload several" area (B4: div.rpt-several - the picker and its hint, then one line per file - name, type, remove - and a foot with
   the type for all and "Add all") */
.rpt .rpt-mc-response { margin: 0 0 10px; padding: 8px 12px; border-left: 3px solid var(--accent); background: var(--band); font-size: 12px; line-height: 1.5; color: var(--head); white-space: pre-line; }
.rpt .rpt-mc-zip { float: right; font-size: 11px; font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--accent); text-decoration: none; }
.rpt .rpt-mc-zip:hover { text-decoration: underline; }
.rpt .rpt-mc-zip.is-off { color: var(--faint); }
.rpt .rpt-mc-zip .fa { margin-right: 4px; }
.rpt .rpt-several { padding: 8px 10px; border-top: 1px dashed var(--line); }
.rpt .rpt-several-pick { display: flex; align-items: center; gap: 12px; }
.rpt .rpt-several-list { margin-top: 8px; }
.rpt .rpt-several-row { display: flex; align-items: center; gap: 12px; padding: 4px 0; border-bottom: 1px solid var(--line); }
.rpt .rpt-several-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; color: var(--head); }
.rpt .rpt-several-name .fa { margin-right: 6px; color: var(--faint); }
.rpt .rpt-several-foot { display: flex; align-items: center; justify-content: flex-end; gap: 12px; padding-top: 8px; }
/* 7f A FIGURES BAND AND A ONE-LINE ROW (9 Oct 2026, the opportunity form's Costing tab - the owner found its two columns crowded):
   div.rpt-sum = a tinted band of figures - span.rpt-sum-state (a state pill and a quiet word), then span.rpt-sum-fig = a caption (small,
   or .rpt-sum-cap on a Label) over its value (.rpt-sum-val, red with .red), the last one pushed right (.rpt-sum-end - the figure that
   matters). div.rpt-inline = a quiet row of a few controls on one line, each after its caption (span.rpt-inline-cap; with data-tip it
   carries the bubble of section 9), a pill-shaped link button (a.rpt-inline-btn) and a hint pushed right (.rpt-inline-end). The inputs keep
   the site's underline in the token greys at the entry row's height; their widths are the controls' Width. */
.rpt .rpt-sum { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 26px; margin: 0 0 12px; padding: 10px 14px; border-radius: 10px; background: var(--band); }
.rpt .rpt-sum-state { display: inline-flex; align-items: center; gap: 6px; }
.rpt .rpt-sum .pill { padding: 2px 9px; font-size: 11px; line-height: 1.4; }
.rpt .rpt-sum-fig { display: flex; flex-direction: column; min-width: 0; line-height: 1.35; }
.rpt .rpt-sum-fig > small, .rpt .rpt-sum-fig > .rpt-sum-cap { font-size: 10px; color: var(--muted); white-space: nowrap; }
.rpt .rpt-sum-fig > .rpt-sum-val { font-size: 13px; font-weight: 500; color: var(--head); font-variant-numeric: tabular-nums; white-space: nowrap; }
.rpt .rpt-sum-fig > .rpt-sum-val.red { color: var(--red); }
.rpt .rpt-sum-end { margin-left: auto; text-align: right; }
.rpt .rpt-sum-photo { flex: none; width: 72px; height: 48px; border-radius: 8px; object-fit: cover; border: 1px solid var(--line); }   /* a vehicle's photo leading the band (13 Oct 2026, the Trips window) */
.rpt .rpt-inline { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 10px; margin: 0 2px 12px; font-size: 11px; color: var(--muted); }
.rpt .rpt-inline-cap { font-size: 11px; font-weight: 500; color: var(--muted); }
.rpt .rpt-inline-cap[data-tip] { cursor: help; border-bottom: 1px dotted var(--faint); }
.rpt .rpt-inline-cap + .RadInput, .rpt .rpt-inline-cap + .RadDropDownList { margin-right: 10px; }
.rpt .rpt-inline-end { margin-left: auto; color: var(--faint); }
.rpt .rpt-inline .RadInput_Material input.riTextBox { padding: 5px 0 3px !important; font-size: 12px !important; line-height: 16px; color: var(--head) !important; }
.rpt .rpt-inline .RadDropDownList_Material .rddlInner { padding: 4px 20px 4px 0 !important; font-size: 12px !important; color: var(--head) !important; }
.rpt .rpt-inline .RadDropDownList .rddlDefaultMessage, .rpt .rpt-inline .RadInput_Material .riEmpty { color: var(--faint) !important; font-style: normal !important; opacity: 1 !important; }
.rpt .rpt-inline .RadButton.rbCheckBox .rbText { font-size: 11px; color: var(--muted); }
.rpt .rpt-inline a.rpt-inline-btn { display: inline-flex; align-items: center; height: 24px; padding: 0 11px; border: 1px solid var(--line); border-radius: 12px; background: var(--card); color: var(--ink); font-size: 11px; text-decoration: none; white-space: nowrap; }
.rpt .rpt-inline a.rpt-inline-btn:hover { border-color: var(--accent-line); color: var(--accent); }
.rpt .rpt-inline a.rpt-inline-btn.aspNetDisabled { color: var(--faint); pointer-events: none; }

/* 7g THE COSTING TAB IN THREE BLOCKS (14 Oct 2026, OpportunityCostingControl - the owner found the 7f band and rows "very crowded and not
   organized" and picked layout A of the "Costing Tab Layout" mockup). 1. A figures card: div.rpt-cost-card > div.rpt-cost-head ("Estimate" in
   .rpt-cost-title, the state pill, a quiet .comment) over div.rpt-cost-figs = five even cells div.rpt-cost-fig, each a caption .k, a value .v
   and a quiet line .s; the last cell .key sits on the band ground, its value green (.ok) or red (.bad). 2. A settings card (.rpt-cost-card
   .rpt-cost-set) = two halves div.rpt-cost-group, each an uppercase .rpt-cost-cap, a row of fields div.rpt-cost-fields (span.rpt-cost-field =
   a caption span.rpt-cost-lbl over its input; data-tip gives the caption the bubble of section 9) and its hint .rpt-cost-hint right under
   them; a link button a.rpt-cost-btn. 3. The lines on the entry card of 7b: a title bar div.rpt-cost-bar, the entry row (.rpt-entry
   .rpt-cost-entry) whose every field carries its caption on one line - the f-* classes are its widths - and the add button with its word
   ("+ Add", a tick and "Update" while a line is edited); the column captions (div.rpt-entry-head) follow the entry row and belong to the
   list. The 7f classes stay for the vehicle Trips window. */
.rpt .rpt-cost-card { margin: 0 0 12px; background: var(--card); border: 1px solid var(--line); border-radius: 10px; }
.rpt .rpt-cost-head { display: flex; align-items: center; gap: 8px; padding: 9px 16px; border-bottom: 1px solid var(--hair); }
.rpt .rpt-cost-title { font-size: 13px; font-weight: 500; color: var(--head); }
.rpt .rpt-cost-head .pill { padding: 2px 9px; font-size: 11px; line-height: 1.4; }
.rpt .rpt-cost-head .comment, .rpt .rpt-cost-bar .comment { font-size: 11px; color: var(--faint); }
.rpt .rpt-cost-figs { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); }
.rpt .rpt-cost-fig { display: flex; flex-direction: column; gap: 1px; min-width: 0; padding: 11px 16px 12px; line-height: 1.35; }
.rpt .rpt-cost-fig + .rpt-cost-fig { border-left: 1px solid var(--hair); }
.rpt .rpt-cost-fig > .k, .rpt .rpt-cost-fig > .s { font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rpt .rpt-cost-fig > .k { color: var(--muted); }
.rpt .rpt-cost-fig > .s { color: var(--faint); }
.rpt .rpt-cost-fig > .v { font-size: 16px; font-weight: 500; color: var(--head); font-variant-numeric: tabular-nums; white-space: nowrap; }
.rpt .rpt-cost-fig.key { background: var(--band); border-radius: 0 0 9px 0; }
.rpt .rpt-cost-fig.key > .v.ok { color: var(--green); }
.rpt .rpt-cost-fig.key > .v.bad { color: var(--red); }
.rpt .rpt-cost-set { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.rpt .rpt-cost-group { display: flex; flex-direction: column; gap: 8px; min-width: 0; padding: 11px 16px 12px; }
.rpt .rpt-cost-group + .rpt-cost-group { border-left: 1px solid var(--hair); }
.rpt .rpt-cost-cap { font-size: 10px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.rpt .rpt-cost-fields { display: flex; align-items: flex-end; flex-wrap: wrap; gap: 8px 14px; }
.rpt .rpt-cost-field { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.rpt .rpt-cost-lbl { font-size: 10.5px; color: var(--muted); white-space: nowrap; }
.rpt .rpt-cost-lbl[data-tip] { align-self: flex-start; cursor: help; border-bottom: 1px dotted var(--faint); }
.rpt .rpt-cost-hint { font-size: 11px; color: var(--faint); }
.rpt .rpt-cost-hint:empty { display: none; }
.rpt .rpt-cost-set .RadInput_Material input.riTextBox { padding: 5px 0 3px !important; font-size: 12px !important; line-height: 16px; color: var(--head) !important; text-align: right; }
.rpt .rpt-cost-set .RadDropDownList_Material .rddlInner { padding: 4px 20px 4px 0 !important; font-size: 12px !important; color: var(--head) !important; }
.rpt .rpt-cost-set .RadDropDownList .rddlDefaultMessage, .rpt .rpt-cost-set .RadInput_Material .riEmpty { color: var(--faint) !important; font-style: normal !important; opacity: 1 !important; }
.rpt .rpt-cost-set .RadButton.rbCheckBox { margin-bottom: 4px; }
.rpt .rpt-cost-set .RadButton.rbCheckBox .rbText { font-size: 12px; color: var(--ink); }
.rpt .rpt-cost-set a.rpt-cost-btn { display: inline-flex; align-items: center; height: 28px; padding: 0 12px; border: 1px solid var(--accent-line); border-radius: 14px; background: var(--card); color: var(--accent); font-size: 12px; font-weight: 500; text-decoration: none; white-space: nowrap; }
.rpt .rpt-cost-set a.rpt-cost-btn:hover { background: var(--accent-soft); }
.rpt .rpt-cost-set a.rpt-cost-btn.aspNetDisabled { border-color: var(--line); color: var(--faint); font-weight: 400; pointer-events: none; }
.rpt .rpt-entry-card > .rpt-cost-bar { display: flex; align-items: baseline; gap: 8px; padding: 10px 16px; }
.rpt .rpt-entry.rpt-cost-entry { align-items: flex-end; padding: 9px 0 11px; border-top: 1px solid var(--hair); border-bottom-color: var(--line); }
.rpt .rpt-cost-entry .rpt-cost-lbl { margin-bottom: 1px; }
.rpt .rpt-cost-entry .rpt-entry-field.num .rpt-cost-lbl { text-align: right; }
.rpt .rpt-cost-entry .f-cat { flex: 0 0 104px; }   .rpt .rpt-cost-entry .f-desc { flex: 3 1 0; }       .rpt .rpt-cost-entry .f-prod { flex: 2 1 0; }
.rpt .rpt-cost-entry .f-unit { flex: 0 0 56px; }   .rpt .rpt-cost-entry .f-qty { flex: 0 0 58px; }     .rpt .rpt-cost-entry .f-cost { flex: 0 0 82px; }
.rpt .rpt-cost-entry .f-mk { flex: 0 0 66px; }     .rpt .rpt-cost-entry .f-add { flex: 0 0 auto; }
.rpt .rpt-cost-entry .rpt-entry-add.RadButton.rbButton { width: auto; height: 28px !important; padding: 0 12px !important; border-color: var(--accent-line) !important; border-radius: 14px !important; }
.rpt .rpt-cost-entry .rpt-entry-add.RadButton.rbButton .rbText { font-size: 12px; font-weight: 500; line-height: 26px; color: var(--accent); }
.rpt .rpt-cost-entry .rpt-entry-add.RadButton.rbButton .rbText:before { content: "+"; margin-right: 5px; font-family: inherit; font-size: 14px; line-height: 26px; color: var(--accent); }
.rpt .rpt-cost-entry .rpt-entry-add.RadButton.rbButton.is-update .rbText:before { content: "\f00c"; font-family: FontAwesome; font-size: 11px; }
.rpt .rpt-cost-entry .rpt-entry-add.RadButton.rbButton.rbHovered, .rpt .rpt-cost-entry .rpt-entry-add.RadButton.rbButton.rbFocused { background: var(--accent-soft) !important; }
/* 7h THE LINE ITEMS CARD (16 Oct 2026, Common/ScopeItemsV2 - docs/SCOPEITEMS-V2.md, mockup docs/mockups/scopeitems-v2.html): the forms' line
   items on the entry card of 7b / 7c (div.rpt-entry-card.rpt-lines), the 7f band above it, the option tools and the total options on 7f
   one-line rows. In the entry row: the item field holds the description combo and the details glyph (a.details, a dot when the line has a
   description); the discount field its %/Amt pick (.rpt-entry-unit); the sub total is worked out on Add (.rpt-entry-ro). A second tinted
   line (7d) carries asset, cost center, WHT and Tax2 / Tax3 where the tenant uses one (.rpt-entry-lbl captions, .is-off keeps an unused
   slot). The rows: the number (the drag grip under the pointer), the name, the SKU and the description's first lines (.it-desc), the
   package's pill, items, asset and cost center (.it-meta); header / footer units as tinted / italic rows; the line open in the entry row
   tinted with the accent; the actions at the right. .no-money keeps a viewer without the prices from SEEING them (still posted). The
   other discount sits under the rows inside the card (.rpt-lines-foot). */
.rpt .rpt-entry-card .w-60 { flex: 0 0 60px; }  .rpt .rpt-entry-card .w-70 { flex: 0 0 70px; }
/* the details glyph: the line items' and (28 Oct 2026) the Specs' and the Custom Table's description (Common/SpecsItemsV2 .sp-card,
   Common/DynamicItemsV2 .dy-card) */
.rpt :is(.rpt-lines, .sp-card, .dy-card) .rpt-entry-in > a.details { flex: 0 0 auto; position: relative; color: var(--faint); text-decoration: none; line-height: 1; }
.rpt :is(.rpt-lines, .sp-card, .dy-card) .rpt-entry-in > a.details:before { content: "\f039"; font-family: FontAwesome; font-size: 13px; }
.rpt :is(.rpt-lines, .sp-card, .dy-card) .rpt-entry-in > a.details:hover { color: var(--accent); }
.rpt :is(.rpt-lines, .sp-card, .dy-card) .rpt-entry-in > a.details.has:after { content: ""; position: absolute; top: -3px; right: -4px; width: 5px; height: 5px; border-radius: 50%; background: var(--accent); }
.rpt .rpt-lines .rpt-entry-in > .RadDropDownList.rpt-entry-unit { flex: 0 0 44px; width: 44px !important; min-width: 0; }
.rpt .rpt-lines .rpt-entry-field.num .rpt-entry-in > input[type="text"] { flex: 1 1 auto; width: 100%; min-width: 0; padding: 4px 0 3px; border: none; border-bottom: 1px solid var(--line); background: transparent; font-size: 12px; line-height: 16px; color: var(--head); text-align: right; }
.rpt .rpt-lines .rpt-entry-field.num .rpt-entry-in > input[type="text"]:focus { outline: none; border-bottom-color: var(--accent); box-shadow: 0 -1px 0 0 var(--accent) inset; }
.rpt .rpt-lines .rpt-entry-ro { display: block; height: 25px; line-height: 25px; border-bottom: 1px dotted var(--line); color: var(--faint); font-size: 12px; text-align: right; }
.rpt .rpt-lines .rpt-entry-acts { justify-content: flex-end; }
.rpt .rpt-lines .rpt-entry-lbl { display: block; margin: 0 0 1px; font-size: 10px; color: var(--muted); white-space: nowrap; }
.rpt .rpt-lines .rpt-entry-field.num .rpt-entry-lbl { text-align: right; }
.rpt .rpt-lines .rpt-entry-pair { flex-direction: row !important; gap: 12px; }
.rpt .rpt-lines .rpt-entry-pair > span { flex: 1 1 0; min-width: 0; }
.rpt .rpt-lines .rpt-entry-pair > span .RadComboBox { width: 100% !important; }
/* the markup % box in the pair of the entry's second line (28 Oct 2026, ScopeItemsV2.ShowMarkupOption - the quotation's multi-row tenants): a
   90px slot, its input in the entry inputs' look (it is not a direct child of the field, so 7b's input rule misses it), its red line full width */
.rpt .rpt-lines .rpt-entry-pair > span.rpt-entry-markup { flex: 0 0 90px; position: relative; }
.rpt .rpt-lines .rpt-entry-markup > input[type="text"] { width: 100%; box-sizing: border-box; padding: 4px 0 3px; border: none; border-bottom: 1px solid var(--line); background: transparent; font-size: 12px; line-height: 16px; color: var(--head); text-align: right; }
.rpt .rpt-lines .rpt-entry-markup > input[type="text"]:focus { outline: none; border-bottom-color: var(--accent); box-shadow: 0 -1px 0 0 var(--accent) inset; }
.rpt .rpt-lines .rpt-entry-markup > .rfv-line { left: 0; width: 100%; }
/* two pill links side by side at the end of an inline row (28 Oct 2026, the quotation's Import items and Clone from a quotation on the line
   items' option row): 6px apart, never touching */
.rpt .rpt-inline .rpt-inline-end > a.rpt-inline-btn + a.rpt-inline-btn { margin-left: 6px; }
.rpt .rpt-lines .is-off { visibility: hidden; }
.rpt .rpt-lines .rpt-entry.is-caption .rpt-entry-field.num > *, .rpt .rpt-lines .rpt-entry.is-caption .rpt-entry-field.col-money > * { visibility: hidden; }
.rpt .rpt-lines.no-money .col-money { visibility: hidden; }
/* the rows */
.rpt .rpt-lines .it { display: flex; gap: 8px; min-width: 0; }
.rpt .rpt-lines .it .ln { flex: 0 0 18px; text-align: right; color: var(--faint); font-variant-numeric: tabular-nums; cursor: grab; }
.rpt .rpt-lines .myGrid.rpt-entry-grid:not(.is-readonly) > tbody > tr:hover .it .ln { font-size: 0; }
.rpt .rpt-lines .myGrid.rpt-entry-grid:not(.is-readonly) > tbody > tr:hover .it .ln:before { content: "\f0c9"; font-family: FontAwesome; font-size: 11px; color: var(--muted); }
.rpt .rpt-lines .myGrid.rpt-entry-grid.is-readonly .it .ln { cursor: default; }
.rpt .rpt-lines .it-main { min-width: 0; }
.rpt .rpt-lines .it-name { display: block; font-weight: 500; color: var(--head); }
.rpt .rpt-lines .it-desc { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 10px; color: var(--muted); }
.rpt .rpt-lines .it-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin-top: 3px; font-size: 10px; color: var(--faint); }
.rpt .rpt-lines .it-meta .pill { font-size: 10px; line-height: 1.6; padding: 0 8px; }
.rpt .rpt-lines .myGrid.rpt-entry-grid td small.block { display: block; }
.rpt .rpt-lines .taxl { display: block; white-space: nowrap; }
.rpt .rpt-lines .myGrid.rpt-entry-grid > tbody:first-child > tr.is-header { background: var(--band-2); }
.rpt .rpt-lines .myGrid.rpt-entry-grid > tbody > tr.is-header .it-name { font-size: 11px; letter-spacing: .04em; text-transform: uppercase; }
.rpt .rpt-lines .myGrid.rpt-entry-grid > tbody > tr.is-footer .it-name { font-weight: 400; font-style: italic; color: var(--muted); }
.rpt .rpt-lines .myGrid.rpt-entry-grid > tbody:first-child > tr.is-editing { background: var(--accent-soft); }
.rpt .rpt-lines .myGrid.rpt-entry-grid > tbody > tr.is-editing > td:first-child { box-shadow: inset 3px 0 0 var(--accent); }
.rpt .rpt-lines .myGrid.rpt-entry-grid td.rpt-line-acts { text-align: right; white-space: nowrap; }
.rpt .rpt-lines .myGrid.rpt-entry-grid td.rpt-line-acts a { margin: 0 0 0 9px; color: var(--faint); }
.rpt .rpt-lines .myGrid.rpt-entry-grid td.rpt-line-acts a:hover { color: var(--accent); }
.rpt .rpt-lines .myGrid.rpt-entry-grid td.rpt-line-acts a.delete:hover { color: var(--red); }
.rpt .rpt-lines .rpt-line-editing { font-size: 10px; font-weight: 500; color: var(--accent); }
/* the other discount under the rows, the total options under the card, a host's message */
.rpt .rpt-lines .rpt-lines-foot { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 10px; padding: 10px 14px; border-top: 1px solid var(--line); background: var(--card); font-size: 11px; color: var(--muted); }
.rpt :is(.rpt-lines-foot, .rpt-inline) > input[type="text"], .rpt .rpt-lines-foot-field > input[type="text"] { height: 25px; padding: 4px 0 3px; border: none; border-bottom: 1px solid var(--line); background: transparent; font-size: 12px; color: var(--head); }
.rpt .rpt-lines-foot-field { position: relative; display: inline-block; }
.rpt .rpt-lines-foot-field > input.num { text-align: right; }
.rpt .rpt-lines-foot-field > .rfv-line { left: 0; width: 100%; border-top-color: var(--red); }
.rpt .rpt-lines .rpt-lines-foot .rpt-inline-end { margin-left: auto; color: var(--faint); }
.rpt .rpt-line-note { display: block; margin: 0 2px 12px; font-size: 11px; color: var(--muted); }
.rpt .rpt-line-note:empty { display: none; }
/* 7i THE PAYMENT TERMS CARD (16 Oct 2026, Common/PaymentTermsV2 - docs/PAYMENTTERMS-V2.md): every row of the card is its own inputs on the
   7b column model, typed in place with no server call (div.rpt-entry-card.rpt-terms > div.rpt-entry-head + one div.pt-row per term and per
   empty row = its .rpt-entry on the card's white and a 7d .rpt-entry-line for a cheque's bank, branch and payee). The share's %/Amt pick
   (.rpt-entry-unit) after its value, the due's Days/Date pick (.rpt-entry-kind) before the days box or the date picker; .is-off hides an
   alternative (the other due input, the cheque line, the schedule or the custom text, the preview or the editor), .is-deleted a removed
   row; the foot holds "Add rows" and the total of the shares */
.rpt .rpt-terms .rpt-entry { background: var(--card); }
.rpt .rpt-terms .rpt-entry:has(+ .rpt-entry-line.is-off) { border-bottom: 1px solid var(--hair); padding-bottom: 6px; }
.rpt .rpt-terms .rpt-entry-in > .RadDropDownList.rpt-entry-unit { flex: 0 0 44px; width: 44px !important; min-width: 0; }
.rpt .rpt-terms .rpt-entry-in > .RadDropDownList.rpt-entry-kind { flex: 0 0 56px; width: 56px !important; min-width: 0; }
.rpt .rpt-terms .rpt-entry-in > :is(.pt-days-in, .pt-date-in) { flex: 1 1 auto; min-width: 0; }
.rpt .rpt-terms :is(.rpt-entry-in > input.pt-share, .pt-days-in > input.pt-days) { width: 100%; box-sizing: border-box; padding: 4px 0 3px; border: none; border-bottom: 1px solid var(--line); background: transparent; font-size: 12px; line-height: 16px; color: var(--head); }
.rpt .rpt-terms :is(.rpt-entry-in > input.pt-share, .pt-days-in > input.pt-days):focus { outline: none; border-bottom-color: var(--accent); box-shadow: 0 -1px 0 0 var(--accent) inset; }
.rpt .rpt-terms .rpt-entry-in > input.pt-share { flex: 1 1 auto; min-width: 0; text-align: right; }
.rpt .rpt-terms a.pt-delete { display: block; line-height: 25px; text-align: center; color: var(--faint); text-decoration: none; cursor: pointer; }
.rpt .rpt-terms a.pt-delete:before { margin: 0; width: auto; color: inherit; }
.rpt .rpt-terms a.pt-delete:hover { color: var(--red); }
.rpt .rpt-terms .pt-row.is-deleted, .rpt .rpt-terms-wrap .is-off { display: none !important; }
.rpt .rpt-terms .rpt-terms-foot { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 14px; padding: 9px 14px; background: var(--tint); font-size: 11px; color: var(--muted); }
.rpt .rpt-terms .rpt-terms-foot a.add { color: var(--ink); text-decoration: none; }
.rpt .rpt-terms .rpt-terms-foot a.add:hover { color: var(--accent); }
.rpt .rpt-terms .rpt-terms-foot a.add:before { margin: 0 4px 0 0; width: auto; }
.rpt .rpt-terms .pt-total { font-weight: 500; color: var(--head); font-variant-numeric: tabular-nums; }
.rpt .rpt-terms .pt-total-hint { margin-left: 8px; }
.rpt .rpt-terms .pt-total-hint.is-over { color: var(--red); }
/* the typed rows of the Specs and the Custom Table (28 Oct 2026, Common/SpecsItemsV2 / DynamicItemsV2 - 7i's card): the description's words in
   the row (input.sp-desc, before the details glyph) in the entry inputs' look; a formatted description shows muted and read-only; the
   picture cell holds the size, the Remove tick and the upload's button on one line */
.rpt .rpt-terms .rpt-entry-in > input.sp-desc { flex: 1 1 auto; min-width: 0; width: 100%; box-sizing: border-box; padding: 4px 0 3px; border: none; border-bottom: 1px solid var(--line); background: transparent; font-size: 12px; line-height: 16px; color: var(--head); }
.rpt .rpt-terms .rpt-entry-in > input.sp-desc:focus { outline: none; border-bottom-color: var(--accent); box-shadow: 0 -1px 0 0 var(--accent) inset; }
.rpt .rpt-terms .rpt-entry-in > input.sp-desc.is-formatted { color: var(--muted); cursor: default; }
.rpt .rpt-terms .dy-picture { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }


/* ---- 8 dialogs (14 Sep 2026): the small RadWindows a page opens for one change - Change Stage, Closing Date, Forecast Value / Type, Job Type,
   Shared With, Scope, Salesperson / Delegated To, Link Quotation, Flags, Bulk Flags / Delegation / Locking, Create Contact, Page Size, Date
   Selection, Save / Load Search. A SKIN over their DOM as it is: the controls are shared with the old pages and stay untouched (the client's
   rule), so every rule here reaches what the markup offers - the captions (span.super-text, the asp:Label spans .optional / .required, a
   span.label) become the facts' captions on their own line; every input takes the full width in the underline look of section 7; the intro
   sentences go muted; the <br> rhythm gives way to margins; the Save is the accent pill, a second button the grey one.
   SCOPE: the nineteen windows by id - Telerik names a window's box "RadWindowWrapper_<ClientID>", so [id$="_RadWindowXxx"] is the window
   and nothing else (the first cut scoped "every V2 window but ..." and reached the activity-log timeline, the audit log, the alerts, the
   popup host and the form's own windows - the review of 14 Sep 2026). Written with CSS nesting so the scope is spelt once, every nested
   selector starting with "&"; the block also leans on :has() - together that is Chrome 120 / Safari 17.2 / Firefox 121, and a browser
   without nesting drops the whole block (the dialogs keep the old look, nothing worse). A window elsewhere that shares a name with one
   of these ids (the quote's and the job's own RadWindowChangeStage, DateRangeSelection's RadWindowDateSelection) joins the skin the day
   its page goes V2 - inventory it then, or tighten its entry to the host control's id. The inventory of the sixteen DOMs is in docs/PAGE-DESIGN-CODE.md section 15. ---- */
body.v2 .RadWindow:is([id$="_RadWindowChangeStage"], [id$="_RadWindowChangeClosingDate"], [id$="_RadWindowChangeForecastValue"], [id$="_RadWindowChangeForecastType"],
    [id$="_RadWindowChangeJobType"], [id$="_RadWindowChangeSharedWith"], [id$="_RadWindowChangeOppScope"], [id$="_RadWindowChangeAssignedTo"],
    [id$="_RadWindowChangeDelegatedTo"], [id$="_RadWindowLinkQuotation"], [id$="_RadWindowOpportunityFlags"], [id$="_RadWindowBulkFlags"],
    [id$="_RadWindowDelegation"], [id$="_RadWindowBulkLocking"], [id$="_RadWindowCreateContact"], [id$="_RadWindowPageSize"],
    [id$="_RadWindowDateSelection"], [id$="_RadWindowSearchSave"], [id$="_RadWindowLoadSearch"], [id$="_RadWindowQuickChange"],
    /* the leads list's dialogs (14 Sep 2026, each DOM inventoried - PAGE-DESIGN-CODE.md section 15): the stage, the scope, the flags, the bulk
       stage / SMS / WhatsApp / email campaigns, the documents window, and the page's own qualify choice; Bulk Note stays outside (a RadToolBar
       overlay and a RadEditor - the note windows are parked) */
    [id$="_RadWindowChangeLeadStage"], [id$="_RadWindowChangeLeadScope"], [id$="_RadWindowLeadFlags"], [id$="_RadWindowBulkStage"],
    [id$="_RadWindowBulkSms"], [id$="_RadWindowBulkWhatsApp"], [id$="_RadWindowBulkEmail"], [id$="_RadWindowDocumentsView"],
    [id$="_RadWindowQualifyOptions"],
    /* the bulk WhatsApp template (3 Oct 2026, BulkWhatsAppTemplate.ascx): the chat popup's picker for the ticked leads */
    [id$="_RadWindowBulkWhatsAppTemplate"],
    /* the Sales Targets page's quick change (Sales Performance V2 S2, 16 Sep 2026): the month edit and the copy-year dialog on one window */
    [id$="_RadWindowTargetQuickChange"],
    /* the saved searches of a V2 list (SearchFavoritesV2, 20 Sep 2026): the entry row and the rows of saved searches */
    [id$="_RadWindowSavedSearches"],
    /* the tickets list's five (21 Sep 2026, TicketListV2 - its own windows, not shared): the state dialog (Start / Ready to review / Hold /
       Reject / Close), assign, merge, label, tags. RadWindowAssignAgent shares its name with the old list's window, which is never on a
       V2 page (no body.v2) */
    [id$="_RadWindowTicketState"], [id$="_RadWindowAssignAgent"], [id$="_RadWindowMergeTicket"], [id$="_RadWindowTicketLabel"], [id$="_RadWindowTicketTags"],
    /* the employees list's change of assignment (EmployeesV2, 27 Sep 2026 - the page's own window: an intro sentence, five captioned combos, one
       primary button; since 4 Oct 2026 up to three more optional sections - Function, Unit, Tags with an Add / Remove radio - on tenants that
       have them, the window as tall as what it shows) */
    [id$="_RadWindowChangeAssignment"],
    /* the marketing templates' preview and test send (12 Oct 2026, Sales/Marketing/Templates.aspx - the page's own windows: a meta line, the
       email in a sandboxed frame or the WhatsApp bubble; the recipients box, a row per template value, the outcome lines) */
    [id$="_RadWindowTemplatePreview"], [id$="_RadWindowTemplateTest"],
    /* the eCommerce store's orders back-fill (12 Oct 2026, Ecommerce/Store.aspx - P1 moved it off the segments page): an intro, a date, a note, one primary button */
    [id$="_RadWindowBackfill"],
    /* the audiences (12 Oct 2026, docs/CRM-COMMUNICATION.md B4): the lists' "Save as an audience" (MarketingBulkActions.ascx - the count, a name, a
       description, one primary button, then the outcome) and the audiences page's upload (an intro, a name, the file, then the outcome lines) */
    [id$="_RadWindowSaveAudience"], [id$="_RadWindowUploadAudience"], /* + the page's New audience choice (13 Oct 2026: a sentence, the .rpt-choice rows) */ [id$="_RadWindowNewAudience"],
    /* the quick receipt popups of the invoices list V2 (15 Oct 2026, the shared RvForm.ascx - on body.v2 only there): the invoice's receipts
       (WsFormat's table, its Add / Delete links) and the receipt form (method, date, amount, currency, the bank / treasury / cheque
       sections, one primary button). Not inventoried yet - walk both on the V2 page */
    [id$="_RadWindowInvoicePayments"], [id$="_RadWindowAddRv"],
    /* the sales orders list V2's own dialog (15 Oct 2026, docs/SALESORDERS-V2.md): an order invoiced beyond its total - the record line, the
       remarks box with its validator, one primary button that raises the order to what was invoiced */
    [id$="_RadWindowSalesOrderMismatch"],
    /* the line items' three windows (16 Oct 2026, Common/ScopeItemsV2 - docs/SCOPEITEMS-V2.md, each DOM inventoried there): the item details
       (a tab strip, a template combo, the four-tool editor, the additional fields grid, Done), the Excel upload (an intro, the template link,
       a check box, the upload, the report, Import) and an undefined package's picks (one product combo per place, one primary button) */
    [id$="_RadWindowLineDetails"], [id$="_RadWindowLineUpload"], [id$="_RadWindowLinePackage"],
    /* the payment terms' installment plan (16 Oct 2026, Common/PaymentTermsV2 - docs/PAYMENTTERMS-V2.md, its DOM inventoried there): a
       .myFormFull of ten rows, the caption beside the input, two inputs on the value + unit, method + cheque no. and bank + branch rows */
    [id$="_RadWindowInstallmentPlan"],
    /* the invoices list V2's adjustment dialogs (19 Oct 2026, docs/INVOICES-V2.md section 16 - the page's own copies of the old list's windows):
       the record line (div.small), a .myForm of two sections (the amount with its currency caption and validators, the date), one primary
       button. The old list's windows of the same names never sit on a body.v2 page */
    [id$="_RadWindowWithHoldingTax"], [id$="_RadWindowExchangeVariation"], [id$="_RadWindowWriteOff"],
    /* + its bulk tools' outcomes (S3 step 3): the summary (div.small), one p.small per invoice - its number in bold, the answer, a refusal red */
    [id$="_RadWindowBulkResults"],
    /* the quotations list V2's two dialogs (28 Oct 2026, docs/QUOTATIONS-V2.md section 10 - new names on purpose: the old controls'
       RadWindowChangeStage is shared with the deal's and the job's stage windows): Change stage (Sales/Quote/Quot_ChangeStageV2) and Mark as
       sent (Sales/Quote/Quot_SendV2) - their DOMs are S3's to inventory */
    [id$="_RadWindowQuoteStage"], [id$="_RadWindowQuoteSent"],
    /* the quotation form V2's three (28 Oct 2026, Sales/Quote/QuotationFormV2 - the form's own windows; the old QuoteForm3 of the same names is
       never on a body.v2 page): Clone from a quotation (an intro, a captioned combo, one primary button), Subject from a template (a captioned
       combo, a note), Import line items and payment terms (an intro, the upload, one primary button, the template link) - and the description
       editors of the Specs and the Custom Table (Common/SpecsItemsV2, DynamicItemsV2: the four-tool editor, Done) */
    [id$="_RadWindowCloneQuotation"], [id$="_RadWindowSubjectTemplates"], [id$="_RadWindowImportLineItems"],
    [id$="_RadWindowSpecDescription"], [id$="_RadWindowRowDescription"]) {

    /* the bar: the title in the head colour, 14px 500, no capitalisation, 40px tall; the disc X of the record window (section 6) on the corner */
    & .rwTitleBar { padding: 0; }
    & .rwTitleBar .rwTitleWrapper { height: 20px; line-height: 20px; padding: 14px 20px 6px; }
    & .rwTitleWrapper .rwTitle { margin: 0 !important; padding: 0 !important; width: 80%; font-size: 14px; font-weight: 500; line-height: 20px; color: var(--head) !important; text-transform: none; }
    & .rwCommands { top: -16px; right: -16px; margin: 0; z-index: 10; }   /* above the resize corner (21 Oct 2026) */
    & .rwCommands .rwListItem { margin: 0; }
    & .rwCloseButton { box-sizing: border-box; width: 30px; height: 30px; padding: 0; border: 1px solid var(--line); border-radius: 50%; background: var(--band-2); color: var(--muted) !important; display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 1px 3px rgba(0, 0, 0, .12); }
    & .rwCloseButton:hover { background: var(--hover); border-color: #cfd8dc; color: var(--head) !important; }
    & .rwCloseButton:before { font-size: 14px; }

    /* the height is the content's, not the markup's (Height="300" left half a window blank - the client, 14 Sep 2026): Telerik writes the
       declared height inline on the window and on the content, !important lets both follow the content, capped to the viewport. Telerik centred
       the window on its declared size before it shrank, so a short dialog sits a little above centre - acceptable */
    & { height: auto !important; min-height: 0 !important; }
    & .rwContent { height: auto !important; min-height: 0 !important; max-height: calc(100vh - 140px); }
    /* the content: 12px ink, the site's 20px padding trimmed; the <br> of the old rhythm gone where they separate fields (direct children of the
       content, a section or a wrapper - never one inside a sentence), the margins below carry it */
    & .rwContent { padding: 12px 20px 16px !important; font-size: 12px; line-height: 1.4; color: var(--ink); }
    & .rwContent > br, & .rwContent :is(section, #holder, .alignCenter, .myForm, .myFormFull, #PanelSaveSearch) > br { display: none; }
    & .rwContent .alignCenter { text-align: left !important; }
    & .rwContent div.clear { height: 0; }

    /* a field block: a plain <section> (Change Stage, Page Size), a .myForm / .myFormFull section (Bulk Delegation, Create Contact) - stacked, never
       floated; display is left alone (the scripts toggle sections with inline display) */
    & .rwContent section { display: block; float: none; width: auto; margin: 0 0 12px !important; }   /* display without !important: an inline display:none from a toggle still wins */
    & .rwContent :is(.myForm, .myFormFull) { display: block; float: none; width: auto; margin: 0 !important; }
    /* Create Contact (.myFormFull, ten fields in a 545px window): the caption BESIDE the input as the form skin of section 7 lays it - stacked
       captions would need 530px of content in 477. The caption column is 110px; the validator line starts where the input does */
    & .rwContent .myFormFull section { display: flex; flex-wrap: wrap; align-items: center; margin: 0 0 8px !important; }   /* a flex row, not two inline-blocks: the whitespace between them made the pair a few px wider than the 420px window and the input wrapped under its caption (the leads' Convert Lead To Contact, 15 Sep 2026); display without !important - #sectionAccount is toggled by an inline display */
    & .rwContent .myFormFull section > :is(span.optional, span.required) { flex: 0 0 110px; display: block !important; width: 110px !important; margin: 0 8px 0 0; line-height: 30px; }
    & .rwContent .myFormFull section > :is(input[type="text"], textarea, .RadComboBox, .RadDropDownList, .RadPicker, .RadInput) { flex: 1 1 0; display: block; width: auto !important; min-width: 0; margin: 0 !important; }
    & .rwContent .myFormFull section > .rfv-line { flex: 0 0 calc(100% - 118px); left: 0 !important; margin-left: 118px !important; width: auto !important; }   /* the red line on its own row, under the input */
    & .rwContent .myFormFull section > :is(input[type="text"], .RadComboBox, .RadDropDownList, .RadPicker, .RadInput) + :is(input[type="text"], .RadComboBox, .RadDropDownList, .RadPicker, .RadInput) { margin-left: 10px !important; }   /* two inputs on one row share it, 10px apart (the installment plan, 16 Oct 2026) */

    /* captions: on their own line above the control, the facts' 10px caps (the site makes span.required / .optional inline-block !important) */
    & .rwContent :is(span.super-text, span.optional, span.required, span.label) { display: block !important; width: auto !important; margin: 10px 0 4px; padding: 0; font-size: 10px; font-weight: 500; letter-spacing: .05em; line-height: 1.3; text-transform: uppercase; color: var(--faint); }
    & .rwContent :is(span.super-text, span.optional, span.required, span.label):first-child { margin-top: 0; }
    & .rwContent .required:after { font-size: 10px; line-height: inherit; vertical-align: baseline; color: var(--red); }
    /* the FIRST caption of a dialog repeats its title ("Closing Date" over NEW CLOSING DATE, "Pipeline Value" over FORECAST VALUE and a helper
       sentence): gone, the title names the first field; later captions (Remarks, Win Probability) stay. Not in a form (.myForm / .myFormFull,
       where every field is one of many) - the client, 14 Sep 2026 */
    & .rwContent > :is(span.super-text, span.optional, span.required, span.label):first-child,
    & .rwContent :is(#holder, .alignCenter) > :is(span.super-text, span.optional, span.required, span.label):first-child,
    & .rwContent :not(.myForm, .myFormFull) > section:first-child > :is(span.super-text, span.optional, span.required, span.label):first-child,
    & .rwContent span.label + span.super-text { display: none !important; }
    & .rwContent a.help { display: none; }                                                                                                          /* Change Stage's tooltip glyph: gone (the client, 14 Sep 2026) */

    /* the intro sentence of a dialog, the help text, the "this action will affect N records" band of the bulk ones */
    & .rwContent :is(div.comment, p.comment, p.small, div.small) { margin: 0 0 12px !important; font-size: 11px !important; line-height: 1.5; color: var(--muted) !important; font-style: normal; }
    & .rwContent :is(#records, #waBulkRecords) { margin: 0 0 14px !important; padding: 0 0 10px; border-bottom: 1px solid var(--hair) !important; }   /* #waBulkRecords: the WhatsApp template's own id (3 Oct 2026) */
    & .rwContent :is(#records, #waBulkRecords) p { margin: 0; font-size: 12px; color: var(--head) !important; }
    & .rwContent :is(#records, #waBulkRecords) b { font-weight: 500; }
    & .rwContent h2 { margin: 0 0 12px !important; font-size: 14px; font-weight: 500; line-height: 1.3; color: var(--head); text-transform: none; }
    & .rwContent hr { margin: 12px 0; border: none; border-top: 1px solid var(--hair); }
    & .rwContent small.red { display: block; float: none !important; margin: 8px 0 0 !important; line-height: 1.4 !important; font-size: 11px !important; color: var(--red) !important; }

    /* inputs: full width, the underline look (the site's inline widths - 200px, 95%, 250px - and Telerik's wrapper widths lose to !important).
       Telerik's own text inputs (a combo's .rcbInput, a picker's .riTextBox, an upload's .ruFakeInput) are not plain boxes: left to their skins */
    & .rwContent :is(input[type="text"]:not(.rcbInput, .riTextBox, .ruFakeInput), textarea) { display: block; width: 100% !important; box-sizing: border-box; margin: 0; padding: 7px 0 6px !important; border: none !important; border-bottom: 1px solid var(--line) !important; border-radius: 0; background: transparent; box-shadow: none; font: inherit; font-size: 12px; line-height: 16px; color: var(--head); }
    & .rwContent :is(input[type="text"]:not(.rcbInput, .riTextBox, .ruFakeInput), textarea):hover { border-bottom-color: var(--faint) !important; }
    & .rwContent :is(input[type="text"]:not(.rcbInput, .riTextBox, .ruFakeInput), textarea):focus { border-bottom-color: var(--accent) !important; box-shadow: 0 -1px 0 0 var(--accent) inset; }
    & .rwContent textarea { min-height: 72px; resize: vertical; }
    & .rwContent :is(input, textarea)::placeholder { color: var(--faint) !important; font-style: normal !important; opacity: 1 !important; }
    & .rwContent :is(.RadComboBox, .RadDropDownList, .RadInput) { display: block; width: 100% !important; max-width: 100%; margin: 0 0 2px !important; }
    & .rwContent .RadPicker { display: block; width: 100% !important; max-width: 100%; margin: 0 0 2px !important; vertical-align: top; }   /* a single picker: full width, a block (an inline-block in a line box opened air above it), its validator line under it */
    & .rwContent #date-selection .RadPicker { display: inline-block; width: auto !important; margin: 0 8px 4px 0 !important; }        /* the date selection: two side by side, their markup width */
    & .rwContent :is(.RadComboBox_Material, .RadDropDownList_Material, .RadInput_Material .riTextBox) { color: var(--head) !important; }
    & .rwContent :is(.RadComboBox_Material .rcbInput, .RadDropDownList_Material .rddlInner, .RadInput_Material .riTextBox) { font-size: 12px !important; }
    & .rwContent .RadComboBox_Material .rcbInner:before { border-bottom-color: var(--line) !important; }
    & .rwContent .RadDropDownList_Material .rddlInner:before { border-bottom-color: var(--line) !important; }
    & .rwContent .RadPicker_Material .RadInput:before { border-bottom-color: var(--line) !important; }
    & .rwContent :is(.RadComboBox_Material .rcbEmptyMessage, .RadDropDownList .rddlDefaultMessage, .RadInput_Material .riEmpty) { color: var(--faint) !important; font-style: normal !important; opacity: 1 !important; }
    & .rwContent .RadInput_Material a { padding-left: 3px !important; padding-right: 3px !important; }
    & .rwContent div:has(> #date-selection) { height: auto !important; margin: 12px 0 0 !important; }   /* the date selection's fixed-height spacer */

    /* a prefix before an input on the same line (the % of the win chance: span.comment then the box) - the section becomes a flex row that wraps:
       the caption and the validator lines take the full width, the prefix and the box share one line (inline-blocks wrapped on the whitespace
       between them, 14 Sep 2026) */
    & .rwContent section:has(> span.comment + input[type="text"]) { display: flex; flex-wrap: wrap; align-items: flex-end; }
    & .rwContent section:has(> span.comment + input[type="text"]) > :is(span.optional, span.required, span.super-text, span.rfv) { flex: 0 0 100%; }
    & .rwContent section > span.comment:has(+ input[type="text"]) { flex: 0 0 14px; display: block; width: 14px; margin: 0 !important; font-size: 11px !important; color: var(--faint) !important; line-height: 29px; }
    & .rwContent section > span.comment + input[type="text"] { flex: 1 1 auto; display: block; width: auto !important; min-width: 0; padding-left: 0 !important; }

    /* the validators: the site's chevron (.rfv) becomes a 2px red line under the input while the validator shows - a Dynamic one is hidden by an
       inline display:none the rule must not override; .rfv-line loses its form offset; a validator with words (Page Size) reads small and red */
    & .rwContent span.rfv:not([style*="display:none"], [style*="display: none"]) { display: block !important; height: 2px; margin: -2px 0 0 !important; overflow: hidden; background: var(--red); color: transparent !important; font-size: 0; line-height: 0; }
    & .rwContent span.rfv:after { content: none; }
    & .rwContent .rfv-line { left: 0 !important; width: 100% !important; border-top-color: var(--red); }
    & .rwContent span.red.small { display: block; margin-top: 4px; font-size: 10px !important; color: var(--red) !important; }

    /* the buttons (Lightweight renders a RadLinkButton and a RadPushButton alike as .RadButton.rbButton): Primary = the accent pill of section 7,
       any other = the grey button, 14px above; a wrapper that holds only buttons loses its inline margins, one that holds the fields is left alone */
    & .rwContent .RadButton.rbButton { display: inline-flex !important; align-items: center; height: 32px !important; margin: 14px 8px 0 0 !important; padding: 0 20px !important; border: 1px solid var(--line) !important; border-radius: 16px !important; background: var(--band) !important; box-shadow: none !important; text-decoration: none !important; vertical-align: top; }
    & .rwContent .RadButton.rbButton .rbText { color: var(--head) !important; font-size: 12px; font-weight: 500; text-transform: none; letter-spacing: 0; }
    & .rwContent .RadButton.rbButton:is(.rbHovered, .rbFocused, :hover) { background: var(--band-2) !important; }
    & .rwContent .RadButton.rbButton.rbPrimaryButton, & .rwContent .RadButton.rbButton[id$="_RadLinkButtonSaveContact"] { border-color: transparent !important; background: var(--accent) !important; }
    & .rwContent .RadButton.rbButton.rbPrimaryButton .rbText, & .rwContent .RadButton.rbButton[id$="_RadLinkButtonSaveContact"] .rbText { color: #fff !important; }
    & .rwContent .RadButton.rbButton.rbPrimaryButton:is(.rbHovered, .rbFocused, :hover), & .rwContent .RadButton.rbButton[id$="_RadLinkButtonSaveContact"]:hover { background: var(--accent-ink) !important; }
    & .rwContent .RadButton.rbDisabled { opacity: .5; }
    & .rwContent :is(div, p):has(> .RadButton):not(:has(> :is(section, .RadComboBox, .RadDropDownList, .RadPicker, .RadInput, input[type="text"], textarea, .myForm, div.comment, div.small, #records, #waBulkRecords, h2))) { margin: 0 !important; padding: 0; height: auto !important; text-align: left !important; }
    & .rwContent p:has(> :is(input[type="text"], textarea, .RadDropDownList, .RadComboBox, .RadPicker, .RadInput)) { margin: 0 0 12px; }   /* a bare <p> around a field (the forecast dialogs): no browser margins */

    /* the odd elements: the flags dialog's injected badges (chosen = the accent tint, .badge-light = grey), an upload's Attach button, a check box row,
       a plain link (Telerik's own anchors - a picker's calendar button, an upload's buttons - keep their skins) */
    & .rwContent .badge { display: inline-block; margin: 0 6px 6px 0 !important; padding: 5px 12px !important; border: none; border-radius: 12px; background: var(--accent) !important; color: #fff !important; font-size: 11px !important; font-weight: 500; line-height: 1.2; text-decoration: none; }   /* a chosen flag: solid accent (the tint read as unchosen, 14 Sep 2026) */
    & .rwContent .badge.badge-light { background: var(--grey-soft) !important; color: var(--muted) !important; }
    & .rwContent .badge.badge-light:hover { background: var(--band-2) !important; color: var(--head) !important; }
    & .rwContent :is(#divOppFlags, #divLeadFlags) { margin: 0 !important; }               /* the opportunity's and the lead's flags dialog: one shape from one template */
    & .rwContent :is(#divOppFlags, #divLeadFlags) > div { margin: 8px 0 0 !important; }
    & .rwContent .RadUpload_Material { margin-left: 0 !important; }
    & .rwContent .RadUpload .ruBrowse { height: 30px !important; line-height: 30px !important; padding: 0 16px !important; border: 1px solid var(--line) !important; border-radius: 15px !important; background: var(--band) !important; color: var(--head) !important; font-size: 12px; font-weight: 500; text-transform: none !important; box-shadow: none !important; }
    & .rwContent a:not(.RadButton, .badge, .help, .rcCalPopup, .rcTimePopup, .ruButton) { color: var(--accent); text-decoration: none; }
    & .rwContent a.add:before { color: var(--faint); }
    & .rwContent :is(.RadCheckBox, .RadRadioButtonList) .rbText { font-size: 12px; color: var(--ink) !important; font-weight: 400; text-transform: none; }
    & .rwContent .margin-bottom-15 { margin: 8px 0 0 !important; }

    /* ---- the leads list's dialogs (14 Sep 2026) ---- */
    /* a <section> that holds only the button (Bulk Stage's Save, Bulk Email's Send): no field rhythm under the pill (the wrapper rule above
       knows a div / p; display is left alone - Bulk Email's section is shown by an inline toggle) */
    & .rwContent section:has(> .RadButton):not(:has(> :is(section, .RadComboBox, .RadDropDownList, .RadPicker, .RadInput, input[type="text"], textarea, span.optional, span.required, span.super-text))) { margin: 0 !important; }
    /* Bulk Email's Preview link (a.btn.btn-gray floated over the template dropdown by inline margins, hidden until a template is picked): the grey
       pill on the caption line at the right, its margins netting to zero so it takes no room above the full-width dropdown; display is left to
       the inline toggle (an !important here would show it on open with an empty href); its inline font-size: 9px !important stays */
    & .rwContent > a#linkPrevTemplate { float: right; box-sizing: border-box; height: 18px; margin: -3px 0 -15px !important; padding: 0 10px !important; border: 1px solid var(--line); border-radius: 9px; background: var(--band) !important; color: var(--head) !important; font-weight: 500; letter-spacing: .05em; line-height: 16px; text-transform: uppercase; text-decoration: none !important; opacity: 1 !important; }
    & .rwContent > a#linkPrevTemplate:hover { background: var(--band-2) !important; color: var(--head) !important; opacity: 1 !important; }
    /* the documents window (WsFormat.Documents writes a table.simpleTable into #AccountHolder after the window opened): the record view's
       Documents look - hair lines, the meta line muted; the trailing <br> gone; the window grows DOWN from where Telerik centred its
       declared 450px, so its content is capped to the space under that point (a long list scrolls) */
    &[id$="_RadWindowDocumentsView"] .rwContent { max-height: calc(50vh + 150px); }
    & .rwContent #AccountHolder > br { display: none; }
    & .rwContent table.simpleTable { font-size: 12px; }
    & .rwContent table.simpleTable > tbody > tr { border-bottom: 1px solid var(--hair); }
    & .rwContent table.simpleTable > tbody > tr:last-child { border-bottom: none; }
    & .rwContent table.simpleTable > tbody > tr > td { padding: 8px 0 !important; color: var(--ink); }
    & .rwContent table.simpleTable > tbody > tr > td + td { padding-left: 12px !important; }
    & .rwContent span.xsmall { display: block; color: var(--muted); line-height: 1.5; }
    & .rwContent span.xsmall b { font-weight: 500; color: var(--ink); }
    & .rwContent .copy-icon { color: var(--faint); cursor: pointer; font-size: 12px; }
    & .rwContent .copy-icon:hover { color: var(--head); }
    & .rwContent #AccountHolder:not(:has(table)):not(.loading) { font-size: 11px; color: var(--muted); }
    /* the qualify choice (the leads' Convert Lead: a new customer, or a contact under an existing one) - the options as rows: the name, the
       sentence under it, a chevron at the right; the accent tint on hover */
    & .rwContent .rpt-choice { display: flex; flex-direction: column; gap: 8px; }
    & .rwContent .rpt-choice > a { display: flex; flex-direction: column; gap: 2px; position: relative; padding: 12px 40px 12px 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--card); color: var(--ink); text-decoration: none !important; }
    & .rwContent .rpt-choice > a:hover { border-color: var(--accent-line); background: var(--accent-soft); }
    & .rwContent .rpt-choice > a > b { font-size: 12px; font-weight: 500; color: var(--head); }
    & .rwContent .rpt-choice > a > span { font-size: 11px; line-height: 1.4; color: var(--muted); }
    & .rwContent .rpt-choice > a:after { content: "\f105"; font-family: FontAwesome; position: absolute; right: 14px; top: 50%; transform: translateY(-50%); font-size: 14px; color: var(--faint); }
    & .rwContent .rpt-choice > a:hover:after { color: var(--accent); }
    /* the saved searches (SearchFavoritesV2, 21 Sep 2026 - the quiet cut, the owner's pick from the mockup): the entry line is a row of
       the list - the star box (RadCheckBoxDefault drawn as the star: hollow = save only, amber = also opens the page), the name box (the
       skin's underline input in its wrapper, the red line under it), Save; the rows - the star (amber when it is the default), the name
       as the load link, the trash fading in on hover / keyboard focus; the empty state is the hollow star over three words; the footer is
       Reset alone. No sentence in the window - the tooltips explain */
    & .rwContent .rpt-fav-entry { display: flex; align-items: center; gap: 10px; padding: 2px 0 12px; border-bottom: 1px solid var(--hair); margin-bottom: 6px; }
    & .rwContent .rpt-fav-entry-name { flex: 1 1 auto; min-width: 0; }
    & .rwContent .rpt-fav-entry .RadButton.rbButton { margin: 0 !important; height: 30px !important; padding: 0 16px !important; }
    /* the star box: the lightweight RadCheckBox is button.RadButton.RadCheckBox > span.rbIcon.rbToggleCheckbox (Checked) + span.rbText - the
       chrome and the text gone, the icon redrawn as the star (the .slim-chkbox precedent in Telerik/OtherControls.css hides it the same way) */
    & .rwContent .rpt-fav-star-box.RadButton { flex: 0 0 auto; display: inline-flex !important; align-items: center; justify-content: center; width: 18px; min-width: 0; height: 20px !important; margin: 0 !important; padding: 0 !important; border: none !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; cursor: pointer; }
    & .rwContent .rpt-fav-star-box .rbText { display: none; }
    & .rwContent .rpt-fav-star-box .rbIcon { display: block !important; width: 18px; height: 20px; margin: 0 !important; text-align: center; font-family: FontAwesome; font-size: 13px; line-height: 20px; color: var(--faint); }
    & .rwContent .rpt-fav-star-box .rbIcon:before { content: "\f006" !important; }
    /* the Material checkbox sets its OWN icon font on the glyph's :before ('Material Icons', absolutely centred) - the FontAwesome star
       codes above rendered as a missing-glyph box there (the owner, 28 Sep 2026); the glyph takes FontAwesome and the icon's own box */
    & .rwContent .rpt-fav-star-box .rbIcon:before { position: static !important; margin: 0 !important; border-radius: 0 !important; font-family: FontAwesome !important; font-size: 13px !important; line-height: 20px; }
    & .rwContent .rpt-fav-star-box:hover .rbIcon:before { content: "\f005" !important; color: var(--amber-ink); }
    & .rwContent .rpt-fav-star-box .rbIcon.rbToggleCheckboxChecked:before { content: "\f005" !important; color: var(--amber); }
    /* the rows: a hover band a little wider than the content, the trash fades in on hover / keyboard focus */
    & .rwContent .rpt-fav-row { display: flex; align-items: center; gap: 10px; margin: 0 -8px; padding: 8px; border-radius: 8px; }
    & .rwContent .rpt-fav-row:hover, & .rwContent .rpt-fav-row:focus-within { background: var(--hover); }
    & .rwContent .rpt-fav-star, & .rwContent .rpt-fav-del { flex: 0 0 auto; width: 18px; text-align: center; font-family: FontAwesome; font-size: 13px; color: var(--faint); text-decoration: none !important; }
    & .rwContent .rpt-fav-star:before { content: "\f006"; }
    & .rwContent .rpt-fav-star:hover:before { content: "\f005"; color: var(--amber-ink); }
    & .rwContent .rpt-fav-star.is-on:before { content: "\f005"; color: var(--amber); }
    & .rwContent .rpt-fav-name { flex: 1 1 auto; min-width: 0; font-size: 12px; font-weight: 500; color: var(--head) !important; text-decoration: none !important; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    & .rwContent .rpt-fav-row:hover .rpt-fav-name { color: var(--accent) !important; }
    & .rwContent .rpt-fav-del { opacity: 0; transition: opacity .12s; }
    & .rwContent .rpt-fav-del:before { content: "\f014"; }
    & .rwContent .rpt-fav-row:hover .rpt-fav-del, & .rwContent .rpt-fav-row:focus-within .rpt-fav-del { opacity: 1; }
    & .rwContent .rpt-fav-del:hover { color: var(--red); }
    /* the empty state: the hollow star over three words */
    & .rwContent .rpt-fav-empty { padding: 18px 0 10px; text-align: center; font-size: 11px; color: var(--muted); }
    & .rwContent .rpt-fav-empty:before { content: "\f006"; display: block; margin-bottom: 4px; font-family: FontAwesome; font-size: 20px; color: var(--faint); }
    /* the footer: Reset alone at the right, the undo glyph before it */
    & .rwContent .rpt-fav-foot { display: flex; justify-content: flex-end; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--hair); font-size: 11px; }
    & .rwContent .rpt-fav-foot a { display: inline-flex; align-items: center; gap: 6px; color: var(--muted) !important; text-decoration: none !important; }
    & .rwContent .rpt-fav-foot a:before { content: "\f0e2"; font-family: FontAwesome; font-size: 11px; }
    & .rwContent .rpt-fav-foot a:hover { color: var(--head) !important; }
    /* the ticket state dialog's attachments (TicketListV2, 21 Sep 2026): the shared DocumentsEditor as a slim row under its caption - the
       browse button the grey button's 28px (the site rendered it 56px tall), no inline top margin, the expiry picker and the download-all
       link hidden (a closing attachment has no expiry, and there is nothing to download yet); the caption gets its air above */
    &[id$="_RadWindowTicketState"] .rwContent #stateDocs > span.super-text { margin-top: 14px !important; }
    &[id$="_RadWindowTicketState"] .rwContent #stateDocs .RadUpload { margin: 0 !important; width: auto !important; }
    &[id$="_RadWindowTicketState"] .rwContent #stateDocs .RadUpload .ruBrowse { height: 28px !important; line-height: 28px !important; padding: 0 14px !important; font-size: 11px !important; border-radius: 8px !important; }
    &[id$="_RadWindowTicketState"] .rwContent #stateDocs :is(.RadPicker, a.archive) { display: none !important; }
    /* the stars a step captures (the ticket state and assign dialogs, 21 Sep 2026): the caption, the RadRating on its own line, the hint under
       it in the muted grey; a caption turned red = the Rate kind refused without stars */
    & .rwContent .rpt-rate { margin-top: 14px; }
    & .rwContent .rpt-rate > span.super-text { display: block; margin: 0 0 4px !important; }
    & .rwContent .rpt-rate > span.super-text.red { color: var(--red) !important; }
    & .rwContent .rpt-rate .RadRating { display: block; margin: 0 0 4px; }
    & .rwContent .rpt-rate > small { display: block; font-size: 10px; }
    /* the line items' windows (16 Oct 2026): the details' tab strip in the form's look on a hairline, its editor framed with the toolbar on
       the band; the upload's report lines (green added, red refused); a package's picks numbered on one line each */
    & .rwContent .RadTabStrip_Material.rpt-nav { margin: 0 0 12px !important; border-bottom: 1px solid var(--hair); }
    & .rwContent .RadTabStrip_Material.rpt-nav .rtsLevel1 { margin: 0 !important; padding: 0 !important; }
    & .rwContent .rpt-nav.RadTabStrip_Material .rtsLevel1 .rtsTxt { padding: 6px 12px 8px; font-size: 12px; }
    & .rwContent .rpt-nav.RadTabStrip_Material .rtsLevel1 .rtsLI:first-child .rtsTxt { padding-left: 0; }
    & .rwContent .rpt-line-editor .RadEditor { border: 1px solid var(--line) !important; border-radius: 8px; overflow: hidden; }
    & .rwContent .rpt-line-editor .RadEditor :is(.reToolBarWrapper, .reToolBar, .reToolbarWrapper, .reToolbar) { background: var(--band) !important; }
    & .rwContent .rpt-line-editor .RadEditor .reContentArea { font-size: 12px; }
    & .rwContent .rpt-line-report { margin: 12px 0 0; padding: 10px 12px; border-radius: 8px; background: var(--band); font-size: 11px; line-height: 1.6; }
    & .rwContent .rpt-line-report :is(.ok, .bad) { display: block; }
    & .rwContent .rpt-line-report .ok { font-weight: 500; color: var(--green); }
    & .rwContent .rpt-line-report .ok:empty { display: none; }
    & .rwContent .rpt-line-report .bad { color: var(--red); }
    & .rwContent .rpt-line-pick { display: flex; align-items: center; gap: 10px; margin: 0 0 8px; }
    & .rwContent .rpt-line-pick > .n { flex: 0 0 16px; color: var(--faint); font-size: 11px; text-align: right; }
    & .rwContent .rpt-line-pick > .RadComboBox { flex: 1 1 auto; margin: 0 !important; }
}

/* the two ratings' marks under a status (the desk's managers and the queue's leaders only): the star in amber, the score beside it */
.rpt .myGrid.sexy-grid .rpt-stars .fa-star { color: var(--amber); font-size: 10px; margin: 0 2px 0 3px; }


/* ---- 9 tooltips (17 Sep 2026, the Sales Targets page; one body-level bubble since 13 Oct 2026): any element carrying data-tip shows its
   text in a bubble - no title needed (the master's RadToolTipManager tooltipifies only .help / .tipify elements WITH a title; leave the
   title off an element that carries data-tip). The bubble is ONE div.tip-bubble on the body, placed by MyJavascripts.js ("V2 tooltips")
   in viewport pixels: above the element, centred, kept 8px inside the window; under it with data-tip-pos="below" or when there is no
   room above. Until 13 Oct 2026 it was the element's own ::after, which a card clipping its overflow (the entry card) cut, a later
   control with a stacking layer covered, the window edge cut, and a ".help" caption's glyph (also an ::after) broke - the owner's
   "the tooltip goes under other controls". On hover and on keyboard focus; body.v2 only (the script checks). ---- */
body.v2 [data-tip] { position: relative; }   /* kept from the pseudo-element bubble: layouts built since may lean on it */
.tip-bubble { position: fixed; left: 0; top: 0; z-index: 100000; box-sizing: border-box; width: max-content; max-width: 260px; padding: 6px 9px; border-radius: 6px; background: var(--head); color: #fff; font-size: 11px; font-weight: 400; font-style: normal; line-height: 1.4; letter-spacing: 0; text-transform: none; text-align: left; white-space: normal; box-shadow: 0 2px 8px rgba(0, 0, 0, .18); visibility: hidden; opacity: 0; pointer-events: none; transition: opacity .12s; }
.tip-bubble.is-on { visibility: visible; opacity: 1; }
.tip-bubble::after { content: ""; position: absolute; left: var(--tip-arrow, 50%); top: 100%; margin-left: -5px; border: 5px solid transparent; border-top-color: var(--head); }
.tip-bubble.is-below::after { top: auto; bottom: 100%; border-top-color: transparent; border-bottom-color: var(--head); }
/* a caption of an entry card holding a tip is let out of the caption's overflow clip */
.rpt .rpt-entry-head > span:has([data-tip]) { overflow: visible; }
/* the help glyph beside a caption (the entry card, the search card): the site's glyph, faint, the accent on hover */
.rpt .rpt-entry-head a.help, .rpt .rpt-toolbar a.help { display: inline-block; color: var(--faint); text-decoration: none; vertical-align: middle; cursor: help; }
.rpt .rpt-entry-head a.help:hover, .rpt .rpt-toolbar a.help:hover { color: var(--accent); }
.rpt .rpt-entry-head a.help:after { margin-left: 4px; font-size: 12px; }


/* ---- 10 the ticket case file (22 Sep 2026, docs/mockups/ticket-conversation-v2.html - the owner's pick): TicketThreadV2 (the record's hero,
   the tab bar with the mailbox status) + TicketConversationV2 (the timeline on one rail with the system's events, the side panel, the
   composer docked under the timeline), on PartialPopUpV2 with ?chrome=record and on TicketViewerV2. Scoped on .rpt so both hosts get it;
   the hero is the record view's own (.rv, section 6). The shared AzureAuth and AzureMail controls are untouched: their DOM is skinned here.
   The old TicketThread / TicketChatter popup is not affected (no .rpt around it). ---- */
/* the record chrome for THIS popup: PartialPopUpV2 puts rw-pop on the shared UrlViewer window while it hosts a ?chrome=record control, and the
   section-6 rules (.rw-1, .rw-2, .rw-3, .rw-pop) give it the 28px strip and the disc X; the popup body starts right under the strip */
.RadWindow.rw-pop .rpt-pop { padding-top: 4px; }
/* the X of THIS window sits inside the strip, in its right end (the owner, 22 Sep 2026: the record window's disc, half outside the corner,
   was not seen on this one - a 600px window opens near the top of a laptop screen and the corner is off it) */
.RadWindow.rw-pop .rwCommands { top: -1px; right: 6px; }
/* the hero's title row: the words and a tail (RecordView.HeroModel.TitleTail - the full-view glyph that opens the ticket record) */
.rv .rv-title-row { display: flex; align-items: center; gap: 6px; min-width: 0; }
.rv .rv-title-row .rv-title { min-width: 0; }
/* the case-file hero (TicketRecord.HeroHtml): the facts as tags beside the status badge - a link inside one stays in the ink -, the
   relative time after the opening date faint */
.rv .rv-badges .rv-tag a { color: var(--ink); }
.rv .rv-badges .rv-tag a:hover { color: var(--accent); text-decoration: none; }
.rv .rv-subtitle .rv-ago { color: var(--faint); }
/* the popup keeps its height (the owner, 22 Sep 2026): the case file fills the window, the rail alone scrolls, the composer stays in view;
   the side panel scrolls on its own when it is the taller one. The page host (TicketViewerV2) keeps the fixed rail height below. */
.rpt-pop .rpt-casefile { display: flex; flex-direction: column; height: calc(100vh - 8px); min-height: 0; }
.rpt-pop .rpt-casefile > .rv, .rpt-pop .rpt-casefile > .rpt-case-nav { flex: 0 0 auto; }
.rpt-pop .rpt-casefile > .rpt-case { flex: 1 1 auto; min-height: 0; grid-template-rows: minmax(0, 1fr); align-items: stretch; }
.rpt-pop .rpt-case-main { min-height: 0; }
.rpt-pop .rpt-tl { flex: 1 1 auto; min-height: 120px; max-height: none; }
.rpt-pop .rpt-aside { overflow: auto; min-height: 0; }
.rpt-pop .rpt-compose { margin-bottom: 14px; }
.rv a.rpt-case-open { display: inline-grid; place-items: center; width: 24px; height: 24px; margin-top: 2px; border-radius: 50%; color: var(--faint) !important; text-decoration: none !important; }
.rv a.rpt-case-open:hover { background: var(--hover); color: var(--accent) !important; }
.rv a.rpt-case-open .fa { font-size: 12px; }
/* the refusal (a ticket outside the viewer's scope, a key that is not the tenant's) */
.rpt .rpt-case-denied { padding: 40px 0; font-size: 12px; color: var(--muted); font-style: italic; text-align: center; }
/* the tab bar: the strip in the sub-nav look at the left, the mailbox status quiet at the right, one hairline under both; the selected tab
   carries the 2px accent rule of the record view's tabs and its count pill in the accent tint */
.rpt .rpt-case-nav { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 2px 0 14px; border-bottom: 1px solid var(--line); }
.rpt .rpt-case-nav .RadTabStrip_Material.rpt-nav { margin: 0 !important; border-bottom: 0 !important; }
.rpt .rpt-case-nav .rpt-nav.RadTabStrip_Material .rtsLevel1 { margin: 0 !important; padding: 0 !important; }
.rpt .rpt-case-nav .rpt-nav.RadTabStrip_Material .rtsLevel1 .rtsTxt { padding: 10px 12px 11px; font-size: 12px; }
.rpt .rpt-case-nav .rpt-nav.RadTabStrip_Material .rtsLevel1 .rtsFirst .rtsTxt { padding-left: 0; }
.rpt .rpt-case-nav .rpt-nav.RadTabStrip_Material .rtsLevel1 .rtsSelected .rtsLink .rtsTxt { box-shadow: inset 0 -2px 0 var(--accent); }
.rpt .rpt-case-nav .rv-count { display: inline-block; min-width: 18px; margin-left: 4px; padding: 2px 6px; border-radius: 9px; background: var(--grey-soft); color: var(--muted); font-size: 10px; font-weight: 500; line-height: 1.2; text-align: center; vertical-align: 1px; }
.rpt .rpt-case-nav .rtsSelected .rv-count { background: var(--accent-soft); color: var(--accent); }
/* the mailbox status (the shared AzureAuth control's DOM): the dot 8px, the address 11px with the mailbox in the head colour, Connect / Disconnect
   as minor links (the site's .blue / .red carry !important - hence the same here) */
.rpt .rpt-case-mailbox .azure-auth-wrap { display: inline-flex; align-items: center; gap: 8px; margin: 0; font-size: 11px; color: var(--muted); white-space: nowrap; }
.rpt .rpt-case-mailbox .azure-auth-bullet { width: 8px; height: 8px; }
.rpt .rpt-case-mailbox .azure-auth-connected { background: var(--green); }
.rpt .rpt-case-mailbox .azure-auth-disconnected { background: #cfd8dc; }
.rpt .rpt-case-mailbox .azure-auth-wrap .small { font-size: 11px; }
.rpt .rpt-case-mailbox .azure-auth-wrap b { font-weight: 500; color: var(--head); }
.rpt .rpt-case-mailbox .azure-auth-wrap a { color: var(--faint) !important; font-size: 10px; text-decoration: none !important; }
.rpt .rpt-case-mailbox .azure-auth-wrap a:hover { color: var(--accent) !important; }
.rpt .rpt-case-mailbox .azure-auth-wrap a.red:hover { color: var(--red) !important; }
/* the veil while a tab navigates (the tab's control is loaded on the server): the content gives way to one quiet line */
.rpt .rpt-case-veil { display: none; padding: 40px 0; text-align: center; font-size: 12px; color: var(--muted); }
.rpt .rpt-case-veil.is-on { display: block; }
.rpt .rpt-case-veil.is-on ~ * { display: none; }
.rpt .rpt-case-veil .fa { margin-right: 8px; }

/* the case: the timeline (the room) + the side panel (260px); the composer docked under the timeline */
.rpt .rpt-case { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: 24px; align-items: start; }
.rpt .rpt-case-main { display: flex; flex-direction: column; min-width: 0; }
/* the rail: entries on a 22px gutter with the dot and the hairline running down it; the day separators between them */
.rpt .rpt-tl { position: relative; max-height: 380px; overflow: auto; padding: 4px 8px 4px 2px; }
.rpt:not(.rpt-pop) .rpt-tl { max-height: 520px; }
.rpt .rpt-tl-day { display: flex; align-items: center; gap: 10px; margin: 10px 0 12px; font-size: 10px; font-weight: 500; letter-spacing: .05em; text-transform: uppercase; color: var(--faint); }
.rpt .rpt-tl-day::before, .rpt .rpt-tl-day::after { content: ""; flex: 1; height: 1px; background: var(--hair); }
.rpt .rpt-tl-e { position: relative; display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 0 10px; padding: 0 0 16px; }
.rpt .rpt-tl-e::before { content: ""; position: absolute; left: 10px; top: 14px; bottom: -2px; width: 1px; background: var(--hair); }
.rpt .rpt-tl-e:last-child::before { display: none; }
/* the dot: hollow for the requester, filled for the support side, violet for a review, the accent for the entry that opened the ticket */
.rpt .rpt-tl-dot { box-sizing: border-box; width: 10px; height: 10px; margin: 5px 0 0 6px; border-radius: 50%; border: 2px solid var(--muted); background: var(--card); }
.rpt .rpt-tl-e.is-support .rpt-tl-dot { background: var(--head); border-color: var(--head); }
.rpt .rpt-tl-e.is-review .rpt-tl-dot { background: var(--violet); border-color: var(--violet); }
.rpt .rpt-tl-e.is-open .rpt-tl-dot { background: var(--accent); border-color: var(--accent); }
.rpt .rpt-tl-entry { min-width: 0; }
.rpt .rpt-tl-head { display: flex; align-items: center; gap: 8px; min-width: 0; }
.rpt .rpt-tl-head .pill { display: inline-flex; align-items: center; padding: 3px 9px; border-radius: 10px; font-size: 10px; font-weight: 500; line-height: 1; white-space: nowrap; }
.rpt .rpt-tl-who { font-size: 12px; font-weight: 500; color: var(--head); }
.rpt .rpt-tl-when { margin-left: auto; font-size: 10px; color: var(--faint); white-space: nowrap; }
.rpt .rpt-tl-body { margin-top: 4px; max-width: 72ch; font-size: 12px; line-height: 1.6; color: var(--ink); overflow-wrap: anywhere; }
.rpt .rpt-tl-body p { margin: 0 0 6px; }
.rpt .rpt-tl-body ul, .rpt .rpt-tl-body ol { margin: 0 0 6px; padding-left: 18px; }
.rpt .rpt-tl-docs { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.rpt a.rpt-tl-doc { display: inline-flex; align-items: center; gap: 5px; height: 20px; padding: 0 8px; border-radius: 10px; background: var(--band); border: 1px solid var(--line); color: var(--ink) !important; font-size: 10px; text-decoration: none !important; white-space: nowrap; }
.rpt a.rpt-tl-doc:hover { background: var(--hover); }
.rpt a.rpt-tl-doc .fa { font-size: 10px; color: var(--faint); }
/* a system event: a small hollow dot, one quiet line (the stored remark may come wrapped in a <p>) */
.rpt .rpt-tl-e.is-sys { padding-bottom: 10px; }
.rpt .rpt-tl-e.is-sys .rpt-tl-dot { width: 6px; height: 6px; margin: 7px 0 0 8px; border: 1px solid var(--faint); background: var(--card); }
.rpt .rpt-tl-sys { font-size: 10px; line-height: 1.6; color: var(--muted); overflow-wrap: anywhere; }
.rpt .rpt-tl-sys b { font-weight: 500; color: var(--ink); }
.rpt .rpt-tl-sys p { display: inline; margin: 0; }
.rpt .rpt-tl-sys .rpt-tl-when { float: right; margin-left: 10px; }
.rpt .rpt-tl-empty { padding: 14px 0 6px 32px; font-size: 11px; color: var(--muted); font-style: italic; }
/* the footer under the timeline: the toggle (a RadCheckBox) and the counts */
.rpt .rpt-tl-foot { display: flex; align-items: center; gap: 14px; padding: 6px 2px 0; font-size: 11px; color: var(--muted); }
.rpt .rpt-tl-foot .RadButton.rbCheckBox .rbText { font-size: 11px; color: var(--muted); }
.rpt .rpt-tl-counts::before { content: "\00b7"; margin-right: 14px; color: var(--faint); }
.rpt .rpt-tl-counts:first-child::before { display: none; }

/* the composer, docked under the timeline: collapsed = one line on the band (the pencil, the hint, the reader clicks to write); expanded = the
   editor with the four V2 tools, the recipients as chips, the footer with Attach and the one accent Send */
.rpt .rpt-compose { margin-top: 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--card); }
.rpt .rpt-compose .rpt-compose-line { display: none; }
.rpt .rpt-compose.is-collapsed { background: var(--band); }
.rpt .rpt-compose.is-collapsed .rpt-compose-line { display: flex; align-items: center; gap: 10px; height: 38px; padding: 0 12px; color: var(--faint) !important; font-size: 12px; text-decoration: none !important; }
.rpt .rpt-compose.is-collapsed .rpt-compose-line:hover { color: var(--head) !important; }
.rpt .rpt-compose.is-collapsed .rpt-compose-line .fa { font-size: 12px; }
.rpt .rpt-compose.is-collapsed .rpt-compose-open { display: none; }
.rpt .rpt-compose.is-off { padding: 10px 12px; font-size: 11px; line-height: 1.6; color: var(--muted); font-style: italic; }
.rpt .rpt-compose.is-off b { font-weight: 500; font-style: normal; color: var(--ink); }
.rpt .rpt-compose-review { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 10px 10px 0 0; background: var(--violet-soft); color: var(--violet); font-size: 11px; font-weight: 500; }
/* the editor: no frame of its own (the composer is the frame), the toolbar on the band with the tools quiet; both spellings of the toolbar
   class (Lightweight reToolBar, Classic reToolbar - the section-7 pitfall) */
.rpt .rpt-compose .RadEditor, .rpt .rpt-compose .RadEditor.RadEditor_Material { border: 0 !important; border-radius: 0; box-shadow: none !important; width: 100% !important; }
.rpt .rpt-compose .RadEditor .reToolBarWrapper, .rpt .rpt-compose .RadEditor .reToolBar, .rpt .rpt-compose .RadEditor .reToolbarWrapper, .rpt .rpt-compose .RadEditor .reToolbar { background: var(--band) !important; border: 0 !important; border-bottom: 1px solid var(--hair) !important; }
.rpt .rpt-compose .RadEditor .reTool { color: var(--muted) !important; }
.rpt .rpt-compose .RadEditor .reContentArea { padding: 10px 12px; font: 400 12px/1.6 Roboto, "Segoe UI", Arial, sans-serif; color: var(--head); }
.rpt .rpt-compose .RadEditor .reEmptyMessage { color: var(--faint) !important; font-style: normal !important; }
/* the notify line: the caption, the chips - a CheckBoxList in flow layout (a span per item holding the box and its label; the box is hidden,
   the label is the chip, :has(:checked) is the on state) - the dashed "+ others" and the token box it opens */
.rpt .rpt-compose-notify { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 8px 12px; border-top: 1px solid var(--hair); }
.rpt .rpt-compose-notify .rpt-cap { margin: 0 2px 0 0; }
.rpt .rpt-chips { position: relative; display: inline-flex; flex-wrap: wrap; gap: 6px; }
.rpt .rpt-chips > span { position: relative; display: inline-flex; }
.rpt .rpt-chips input[type="checkbox"] { position: absolute; width: 0; height: 0; margin: 0; opacity: 0; }
.rpt .rpt-chips label, .rpt a.rpt-chip { display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 9px; border: 1px solid var(--line); border-radius: 11px; background: var(--card); color: var(--muted); font-size: 11px; font-weight: 400; line-height: 1; cursor: pointer; text-decoration: none !important; user-select: none; }
.rpt .rpt-chips label:hover { border-color: #cfd8dc; color: var(--head); }
.rpt .rpt-chips input:checked + label { background: var(--accent-soft); border-color: var(--accent-line); color: var(--accent); }
.rpt .rpt-chips input:checked + label::before { content: "\f00c"; font-family: FontAwesome; font-size: 9px; }
.rpt .rpt-chips input:focus-visible + label { outline: 2px solid var(--accent-line); outline-offset: 1px; }
.rpt a.rpt-chip.is-add { border-style: dashed; color: var(--faint) !important; }
.rpt a.rpt-chip.is-add:hover { border-color: var(--accent-line); color: var(--accent) !important; }
.rpt .rpt-compose-others { display: none; flex: 1 1 100%; }
.rpt .rpt-compose-others.is-open, .rpt .rpt-compose-others:has(.racToken) { display: block; }
.rpt .rpt-compose-others .RadAutoCompleteBox { width: 100% !important; }
.rpt .rpt-compose-others .RadAutoCompleteBox .racEmptyMessage { color: var(--faint) !important; font-style: normal !important; }
/* the footer: Attach as the grey pill (the shared uploader's RadAsyncUpload, hooked by CssClass="rpt-compose-upload"; the Material skin's
   upload glyph and its fake input give way), the chosen file beside it, the accent Send at the right */
.rpt .rpt-compose-foot { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-top: 1px solid var(--hair); }
.rpt .rpt-compose-foot .rpt-btn.RadButton.rbButton { margin-left: auto; }
.rpt .rpt-compose-upload.RadUpload { width: auto !important; margin: 0 !important; }
.rpt .rpt-compose-upload .ruFileWrap { display: flex; align-items: center; gap: 8px; height: auto !important; margin: 0 !important; }
.rpt .rpt-compose-upload .ruFakeInput { display: none !important; }
.rpt .rpt-compose-upload .ruBrowse { display: inline-flex !important; align-items: center; height: 28px !important; line-height: 28px !important; margin: 0 !important; padding: 0 12px !important; border: 1px solid var(--line) !important; border-radius: 8px !important; background: var(--band) !important; color: var(--head) !important; font-size: 11px !important; font-weight: 500 !important; text-transform: none !important; box-shadow: none !important; }
.rpt .rpt-compose-upload .ruBrowse:hover { background: var(--band-2) !important; }
.rpt .rpt-compose-upload .ruBrowse::before { content: "\f0c6"; margin-right: 6px; font-family: FontAwesome; color: var(--faint); }
.rpt .rpt-compose-upload .ruInputs li { margin: 0; }
.rpt .rpt-compose-upload .ruUploadProgress { font-size: 11px; color: var(--ink); }
/* the pasted-images note the shared EditorImagePasting writes (a floated blue italic line) reads as a quiet line under the editor */
.rpt .rpt-compose .blue.xsmall.italic { display: block; float: none !important; margin: 4px 12px 0 !important; color: var(--faint) !important; font-size: 10px !important; font-style: normal !important; }

/* the side panel: captions over values, the groups ruled off, the SLA legs as gauges, the people */
.rpt .rpt-aside { min-width: 0; padding-left: 20px; border-left: 1px solid var(--hair); }
.rpt .rpt-cap { display: block; margin-bottom: 1px; font-size: 10px; font-weight: 500; letter-spacing: .05em; text-transform: uppercase; color: var(--faint); }
.rpt .rpt-aside-val { display: block; font-size: 11px; line-height: 1.4; color: var(--head); overflow-wrap: anywhere; }
.rpt .rpt-aside-val.is-none { color: var(--faint); }
.rpt a.rpt-aside-val { color: var(--accent) !important; text-decoration: none !important; }
.rpt a.rpt-aside-val:hover { text-decoration: underline !important; }
.rpt .rpt-aside-meta { display: block; font-size: 10px; color: var(--muted); }
.rpt .rpt-aside-grp { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px; margin-bottom: 12px; padding: 0 0 12px; border-bottom: 1px solid var(--hair); }
.rpt .rpt-aside-grp:last-child { margin-bottom: 0; border-bottom: 0; }
.rpt .rpt-aside-h { grid-column: 1 / -1; margin-bottom: -4px; font-size: 10px; font-weight: 500; letter-spacing: .05em; text-transform: uppercase; color: var(--faint); }
.rpt .rpt-aside .pill { display: inline-flex; align-items: center; padding: 3px 9px; border-radius: 10px; font-size: 10px; font-weight: 500; line-height: 1; }
.rpt .rpt-aside-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 2px; }
.rpt .rpt-sla { grid-column: 1 / -1; }
.rpt .rpt-sla-leg { display: grid; grid-template-columns: 52px 1fr auto; align-items: center; gap: 8px; margin-top: 6px; font-size: 10px; color: var(--muted); }
.rpt .rpt-sla-bar { height: 5px; border-radius: 3px; background: var(--hair); overflow: hidden; }
.rpt .rpt-sla-bar i { display: block; height: 100%; border-radius: 3px; background: var(--blue); }
.rpt .rpt-sla-bar i.met { background: var(--green); }
.rpt .rpt-sla-bar i.breached { background: var(--red); }
.rpt .rpt-sla-st { white-space: nowrap; font-weight: 500; color: var(--blue); }
.rpt .rpt-sla-st.met { color: var(--green); }
.rpt .rpt-sla-st.breached { color: var(--red); }
.rpt .rpt-people { grid-column: 1 / -1; display: grid; gap: 8px; }
.rpt .rpt-person .rpt-aside-val { font-weight: 500; }

/* the Actions row of the side panel (22 Sep 2026): the step this viewer may take first in the green of the list's next-step pill,
   the rest as quiet pills - the same dialogs the ticket list opens */
.rpt .rpt-aside-actions { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 6px; }
.rpt a.rpt-act { display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 10px; border: 1px solid var(--line); border-radius: 12px; background: var(--card); color: var(--ink) !important; font-size: 11px; text-decoration: none !important; white-space: nowrap; }
.rpt a.rpt-act:hover { background: var(--band); border-color: #cfd8dc; }
.rpt a.rpt-act .fa { font-size: 11px; color: var(--faint); }
.rpt a.rpt-act.is-next { background: var(--green-soft); border-color: transparent; color: var(--green) !important; font-weight: 500; }
.rpt a.rpt-act.is-next .fa { color: var(--green); }
.rpt a.rpt-act.is-next:hover { background: color-mix(in srgb, var(--green) 18%, white); }
/* the composer's second button (reply and take the step): the quiet twin of the accent Send, to its left */
.rpt .rpt-btn-ghost.RadButton.rbButton { height: 34px !important; padding: 0 18px !important; border: 1px solid var(--line) !important; border-radius: 17px !important; background: var(--card) !important; box-shadow: none !important; margin-left: auto; }
.rpt .rpt-btn-ghost.RadButton.rbButton .rbText { color: var(--head) !important; font-size: 12px; font-weight: 500; text-transform: none; }
.rpt .rpt-btn-ghost.RadButton.rbButton.rbHovered, .rpt .rpt-btn-ghost.RadButton.rbButton.rbFocused { background: var(--band) !important; border-color: #cfd8dc !important; }
/* with the ghost button present the accent one no longer needs the auto margin (the ghost carries it) */
.rpt .rpt-compose-foot .rpt-btn-ghost + .rpt-btn.RadButton.rbButton { margin-left: 0; }


/* ---- 11 phone / tablet (23 Sep 2026, docs/RESPONSIVE-V2.md - S1): the V2 master reports the device width (SiteV2.Master viewport) and its
   column is fluid (02-layout.css body.v2 .siteWidth), so these two blocks are what a phone and a tablet see. Additive: above 1023px nothing
   here applies and the desktop renders as before; the old master keeps its 1136px viewport and never reaches these rules. The type never
   shrinks; inputs GROW to 16px on a phone, because iOS Safari zooms the page into any focused input smaller than that - and that zoom is
   the one this work removes (R-4). Grids scroll sideways under a sticky first column and never stack (R-5): the GridView renders one
   tbody (header row, rows, pager row), so the table element becomes the scrolling block and the tbody the wide fixed-layout table inside
   it - header and body cells keep their HeaderStyle-Width columns. A page marks its secondary columns rpt-sm-hide (gone on a phone) and
   rpt-md-hide (gone on a tablet too) on both HeaderStyle and ItemStyle, and overrides the 900px / 660px floor in its own <style> when its
   columns need more. The mockup (docs/mockups/responsive-v2.html) carries the same rules as container queries. ---- */

/* a glyph tucked into a field's line (the salesperson scope - EmployeeSearchScopeV2 -, the flag match, the tag match) is ONE thing: the
   ul.nav.rpt-aid menu (section 1, after .rpt-find), a head and one option per line. A combo that carries it has NO toggle arrow -
   ShowToggleImage="False" in the markup - and the glyph takes the arrow's place: one icon per field, never an arrow and a funnel side by side;
   a click in the box still opens the list (the owner, 30 Sep 2026). The scope was a RadToolTip funnel wrapped in div.rpt-scope with rules of
   its own until the same day - the old EmployeeSearchScope keeps that shape on the old master's pages, which never read this file.
   !important: the glyph keeps its faint 12px and muted hover over any site rule on .nav icons */
.rpt .search-controls ul.nav.rpt-aid > li > a > .fa { color: var(--faint) !important; font-size: 12px !important; }
.rpt .search-controls ul.nav.rpt-aid > li > a:hover > .fa { color: var(--muted) !important; }

/* ---- tablet and phone (max-width: 1023px) ---- */
@media (max-width: 1023px) {
    .rpt-md-hide { display: none !important; }
    /* the status chain: its steps content-sized and the chain scrolling sideways (the owner's first walk, 23 Sep 2026: at 734px Telerik's equal split cut every name) */
    .rpt :is(#searchArea, .searchArea) .RadWizard .rwzBreadCrumb { overflow-x: auto; scrollbar-width: none; }
    .rpt :is(#searchArea, .searchArea) .RadWizard .rwzBreadCrumb::-webkit-scrollbar { display: none; }
    .rpt :is(#searchArea, .searchArea) .RadWizard.rpt-counts .rwzBreadCrumb > li { flex: 0 0 auto; }
    /* the filter cells wrap their words; every Telerik input fills its cell (the markup's Width= renders inline, hence !important) */
    .rpt .search-controls table td { white-space: normal; }
    .rpt :is(#searchArea, .searchArea) :is(.RadComboBox, .RadDropDownList, .RadPicker, .RadInput, .riSingle) { width: 100% !important; max-width: 100%; box-sizing: border-box; }
    /* R-5 the grid: the table scrolls, the tbody is the wide table, the first cell sticks (its own background per stripe - the stripe is on the row) */
    .rpt .myGrid.sexy-grid { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .rpt .myGrid.sexy-grid > tbody { display: table; width: 100%; min-width: 900px; table-layout: fixed; border-spacing: 0; }
    .rpt .myGrid.sexy-grid th:first-child, .rpt .myGrid.sexy-grid > tbody > tr > td:first-child { position: sticky; left: 0; z-index: 1; box-shadow: 1px 0 0 var(--line); }
    .rpt .myGrid.sexy-grid > tbody:first-child > tr:nth-child(even of :not(.rpt-group)) > td:first-child { background: var(--alt); }   /* the stripe starts on the first row (30 Sep 2026) */
    .rpt .myGrid.sexy-grid > tbody:first-child > tr:nth-child(odd of :not(.rpt-group)) > td:first-child { background: var(--card); }
    .rpt .myGrid.sexy-grid > tbody > tr.rpt-group > td:first-child { background: var(--band-2); }
    .rpt .myGrid.sexy-grid tr.pager > td > table { position: sticky; left: 0; }           /* the pager row spans the wide table; its buttons stay in view */
    .rpt .myGrid.sexy-grid tr.ping-pong > td { position: static; }                        /* the empty sentence spans the table too */
    /* long words wrap on a narrow screen (walk 5): the Compact fold's one-line name / customer and the 40ch cut are desktop economies */
    .rpt .myGrid.sexy-grid > tbody > tr.is-folded > td:first-child { white-space: normal; }
    .rpt .myGrid.sexy-grid > tbody > tr.is-folded > td:first-child > a.bold { display: inline; max-width: none; white-space: normal; overflow: visible; }
    .rpt .myGrid.sexy-grid > tbody > tr.is-folded > td > .label.block.d-main { max-width: none; white-space: normal; overflow: visible; }
    .rpt .myGrid.sexy-grid > tbody > tr > td :is(a.bold, .label, .d-main) { overflow-wrap: anywhere; }
}

/* ---- phone (max-width: 640px) ---- */
@media (max-width: 640px) {
    .rpt-sm-hide { display: none !important; }
    /* 1 the title band: the sub-nav scrolls sideways in one line, the page's buttons wrap under it */
    #pageTitleArea:has(.rpt-head-actions) { padding-top: 6px; }
    /* one row: the strip scrolls in the room the buttons leave (the markup's floatLeft is !important); the buttons a size smaller, the quiet links dropped (walk 2) */
    #pageTitleArea:has(.rpt-head-actions) > .siteWidth { display: flex; align-items: center; gap: 10px; }
    #pageTitleArea:has(.rpt-head-actions) > .siteWidth > .clear { display: none; }
    .rpt-nav.RadTabStrip_Material.top-strip { float: none !important; flex: 1 1 auto; width: auto !important; min-width: 0; margin: 0; }
    .rpt-nav.RadTabStrip_Material .rtsLevel1 { overflow-x: auto; overflow-y: hidden; scrollbar-width: none; }
    .rpt-nav.RadTabStrip_Material .rtsLevel1::-webkit-scrollbar { display: none; }
    .rpt-nav.RadTabStrip_Material .rtsLevel1 .rtsUL { display: flex; flex-wrap: nowrap; }
    .rpt-nav.RadTabStrip_Material .rtsLevel1 .rtsLI { float: none; flex: none; }
    #pageTitleArea ul.nav.rpt-nav-more { float: none; flex: none; }                                 /* More stays beside the scrolling strip */
    .rpt #pageTitleArea ul.nav.rpt-nav-more > li > .cols-wrapper { left: auto; right: 0; }           /* and opens leftwards, inside the screen */
    .rpt #pageTitleArea ul.nav.rpt-nav-more .cols-wrapper > ul.cols { flex-direction: column; }     /* the groups stacked */
    .rpt-head-actions { float: none; flex: none; height: auto; gap: 8px; padding: 0; }
    #pageTitleArea .rpt-head-actions .btn { padding: 7px 12px; font-size: 11px !important; white-space: nowrap; }
    #pageTitleArea .rpt-head-actions .btn:before { font-size: 11px; margin-right: 5px; }
    #pageTitleArea .rpt-head-actions a.rpt-head-link { display: none; }
    #pageTitleArea:has(.rpt-head-actions) { margin-bottom: 4px; }
    body.v2 #contentArea { margin-top: 12px; }                                                   /* 25 on a desktop: a phone has no room to spare */
    /* 2 the search card: the status chain scrolls (its steps content-sized, never squeezed), the filter table becomes one column,
       folded = the keyword box alone (or the first field of a page without one), the last row's links wrap, the button fills the width */
    .rpt :is(#searchArea, .searchArea) { padding: 10px 12px 0; margin-bottom: 20px; }
    .rpt .search-controls table, .rpt .search-controls tbody, .rpt .search-controls tr, .rpt .search-controls table td { display: block; width: 100% !important; box-sizing: border-box; }
    .rpt .search-controls table td { padding: 4px 0 6px !important; text-align: left !important; position: relative; }
    .rpt .search-controls td > .super-text { margin-bottom: -2px; }
    .rpt .search-controls.hide-search table tr:first-child:has(.rpt-find) td:not(:has(.rpt-find)) { display: none; }
    .rpt .search-controls.hide-search table tr:first-child:not(:has(.rpt-find)) td:not(:first-child) { display: none; }
    .rpt .rpt-find { min-width: 0; height: 38px; }
    /* R-4 as amended at walk 6: one 13px line for every text control (the page's own scale, a touch above the desktop 12) - the Telerik inputs, their
       empty messages, the keyword box; the captions 11px. The iPhone's zoom into a focused field under 16px is stopped by the viewport instead
       (SiteV2.Master adds maximum-scale=1 on iOS only; Safari ignores it for pinch since iOS 10, so the page still zooms by hand) */
    .rpt :is(#searchArea, .searchArea) :is(.RadComboBox, .RadDropDownList, .RadPicker, .RadInput, .rpt-find, textarea) { font-size: 13px !important; line-height: 20px !important; font-weight: 400 !important; }
    .rpt :is(#searchArea, .searchArea) :is(.RadComboBox, .RadDropDownList, .RadPicker, .RadInput, .rpt-find) :is(input, span, div, label, em):not(.rcbActionButton):not(.rcbArrowCell) { font-size: inherit !important; line-height: inherit !important; font-family: inherit !important; font-weight: inherit !important; }   /* the wrapper sets the size, every part inherits it - a combo and the keyword box cannot differ */
    .rpt .rpt-find input[type="text"]::placeholder { font-size: inherit; }
    .rpt .search-controls td > .super-text { font-size: 11px; }
    .rpt :is(#searchArea, .searchArea) .RadButton.rbButton { width: 100% !important; height: 40px; }
    .rpt .search-controls tr.rpt-search-last .floatLeft, .rpt .search-controls tr.rpt-search-last .floatRight { float: none; display: inline-flex; margin: 4px 14px 4px 0 !important; }
    .rpt .search-controls ul.nav.rpt-aid { position: absolute; right: 30px; bottom: 12px; margin: 0 !important; }   /* over the full-width field, left of its end button */
    .rpt .search-controls .RadComboBox ~ ul.nav.rpt-aid { right: 0; }   /* a combo carrying a glyph has no arrow: the glyph sits where the arrow was (a date range's .rpt-aided keeps the 30px) */
    /* 3 the bar: the figures on one scrolling row, then the view switch, the tools as icons, the count at the far right */
    .rpt .grid-controls, .rpt .grid-controls.with-long-total { padding: 8px 12px; }
    /* the bar's table as blocks: an auto-layout table grew to its figures' width (Marketing Campaigns, 23 Oct 2026: 420px in a 351px bar), so the
       figures never scrolled and the count was pushed off the screen */
    .rpt .grid-controls > table:first-child, .rpt .grid-controls > table:first-child > tbody { display: block; width: 100%; }
    .rpt .grid-controls > table:first-child > tbody > tr { flex-wrap: wrap; gap: 6px 0; }
    .rpt .grid-controls > table:first-child > tbody > tr > td:nth-child(2) { flex: 1 1 100%; overflow-x: auto; scrollbar-width: none; }
    .rpt .grid-controls > table:first-child > tbody > tr > td:nth-child(2)::-webkit-scrollbar { display: none; }
    .rpt .grid-controls > table:first-child > tbody > tr > td:last-child { justify-content: flex-start; }
    .rpt .grid-controls > table:first-child > tbody > tr > td:first-child { margin-left: auto; }
    .rpt .grid-controls div.totalBox { flex: none; white-space: nowrap; }
    .rpt .grid-controls ul.nav > li > a, .rpt .grid-controls a.excel, .rpt .grid-controls td:first-child .comment { height: 30px; }
    .rpt .grid-controls ul[id$="ulSorting"] > li > a:after, .rpt .grid-controls ul[id$="ulGrouping"] > li > a:after { content: none; }
    .rpt .grid-controls > table:first-child > tbody > tr > td:first-child { flex: 1 1 auto; justify-content: flex-end; display: flex; }
    /* the bar's menus (Sort, Group, Bulk Action) drop under the whole bar, edge to edge, instead of hanging off their button (walk 2: off the left edge) */
    .rpt .grid-controls ul.nav > li { position: static !important; }
    .rpt .grid-controls ul.nav > li > ul { left: 8px !important; right: 8px !important; top: 100% !important; width: auto; min-width: 0; max-width: none; margin-top: 2px; }
    /* 4 the grid: the phone column set (rpt-sm-hide), 40px rows, 36px pager targets */
    .rpt .myGrid.sexy-grid > tbody { min-width: 660px; }
    .rpt .myGrid.sexy-grid th { padding: 12px 10px 11px; }
    .rpt .myGrid.sexy-grid > tbody > tr > td { padding: 11px 10px 12px; }
    .rpt .myGrid.sexy-grid .pager > td { padding: 12px !important; }
    .rpt .myGrid.sexy-grid .pager a, .rpt .myGrid.sexy-grid .pager span { min-width: 36px; height: 36px; }
    /* 4c the board: one column about 85% wide, sideways with snap (the lanes become the scroll container, so the column heads stick to the
       lanes' top rather than the window's - the price of the swipe) */
    .rpt .rpt-board { padding: 8px; }
    .rpt .rpt-board-lanes { overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
    .rpt .rpt-board-lanes::-webkit-scrollbar { display: none; }
    .rpt .rpt-col { flex: 0 0 85%; max-width: none; scroll-snap-align: start; }
}

/* ---- the bar on a phone in EITHER orientation (25 Sep 2026): a landscape phone is tablet-wide, yet the desktop rule that centres the view switch on the bar
   landed it on the Sort tool there. The switch joins the tools row, the Board segment and the report glyph go (the owner: no board, no Excel icon on mobile). ---- */
@media (max-width: 640px), ((max-width: 1023px) and (max-height: 640px)) {
    .rpt .grid-controls .rpt-view { position: static; transform: none; height: 30px; margin-right: 6px; }
    .rpt .grid-controls .rpt-view a { width: 34px; }
    .rpt .grid-controls .rpt-view a[data-view="board"] { display: none; }
    .rpt .grid-controls a.excel:before, .rpt .grid-controls a.pdf:before { display: none; }
}

/* ---- touch (no pointer that hovers): what appears on hover appears always, and the CSS tips (section 9) stay off - there is no hover to leave ---- */
@media (hover: none) {
    .rpt .myGrid .invisible-chk, .rpt .myGrid a.invisible-chk, .rpt .myGrid .invisible-chk input, .rpt .myGrid .nav a.invisible-chk { visibility: visible !important; }
    .rpt .rpt-card ul.nav.rpt-card-menu { visibility: visible; }
    .tip-bubble { display: none !important; }   /* no hover on a touch screen: a tap would leave the bubble standing */
}

/* ---- 11b phone: forms and dialogs (S2, 23 Sep 2026, docs/RESPONSIVE-V2.md R-12). The form skin of section 7 at one column: the popup host
   (PartialPopUpV2 on the V2 master, inside the UrlViewer window that S1 maximizes on a phone - the media query reads the iframe's own width)
   loses its side air, the two float columns stack, every caption sits on its own line above a full-width input, a pair becomes two rows,
   the footer stacks with Save on top. The one-change dialogs of section 8 (opened by the page's own scripts on their declared width, not
   through UrlViewer) take the screen's width less a gutter; a combo's dropdown list never exceeds the screen. ---- */
/* a phone in BOTH orientations: a landscape phone (about 850 x 390) is in the tablet range by width but a popup on it is still a phone popup - the owner's
   screenshot of 25 Sep 2026 showed the record window clamped to a slim, tall box; the scripts (RecordWindow.show, UrlViewer.SetWindowSize) use the same
   short-side test. A tablet's short side is 700px or more. */
@media (max-width: 640px), ((max-width: 1023px) and (max-height: 640px)) {
    /* 6 the record popup (R-7, pulled forward from S2 at walk 2): the window is maximized by RecordWindow.show / UrlViewer.SetWindowSize on a phone; its close disc
       comes back inside the screen on a taller strip; the hero goes single column (badges, then the figure), the tabs scroll in one line, the actions pill
       sits under them, the facts in two columns */
    body.v2 .RadWindow.rwMaximizedWindow:is(.rw-1, .rw-2, .rw-3, .rw-pop) .rwTitleBar .rwTitleWrapper { height: 40px; }
    body.v2 .RadWindow.rwMaximizedWindow:is(.rw-1, .rw-2, .rw-3, .rw-pop) .rwCommands { top: 5px; right: 8px; }
    body.v2 .RadWindow.rwMaximizedWindow.rw-pop .rwTitleBar .rwCommands { top: 5px !important; right: 8px !important; }   /* the rw-pop rule above (-16px) is !important: the disc sat half off the phone's corner (23 Oct 2026, the campaign popup) */
    .rv { font-size: 12px; }
    .rw-holder .rv, #summary > .rv { padding: 0 12px 16px; }
    .rv-hero { gap: 10px; }
    .rv-title { font-size: 18px; }
    .rv-side { grid-template-columns: 1fr; justify-items: start; justify-content: start; flex: 1 1 100%; padding-top: 0; }
    .rv-badges { justify-content: flex-start; }
    .rv-amount > div:first-child { grid-column: 1; }
    .rv-side > .rv-photo { grid-column: 1; }
    .rv-sub { white-space: normal; }
    .rv-tabs .ui-tabs-nav { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-right: 0; }
    .rv-tabs .ui-tabs-nav::-webkit-scrollbar { display: none; }
    .rv-tabs .ui-tabs-nav .ui-tabs-anchor { gap: 6px; padding: 12px 10px; font-size: 12px; white-space: nowrap; }
    .rv-actions { position: static; margin: 10px 0 0; padding-left: 0; background: none; }
    .rv-actions > li > a { height: 34px; }
    .rv-tabs .ui-tabs-panel { padding-top: 14px; }
    .rv-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 16px; }
    /* a record table in the Reports.css scroller (.rpt-scroll - the payment request popups' approval chain, decisions, payments, documents,
       20 Oct 2026): it keeps a readable width and scrolls sideways inside the window instead of squeezing its columns */
    .rv .rpt-scroll { -webkit-overflow-scrolling: touch; }
    .rv .rpt-scroll > .rv-table { min-width: 540px; }
    /* the popup host, and a form on a V2 page (its 12px gutters match the footer's -12px below) */
    :is(.rpt-pop, .rpt-form-page) { padding: 10px 12px 0; }
    :is(.rpt-pop, .rpt-form-page) .RadTabStrip_Material.rpt-nav { margin: 0 0 12px !important; }
    .rpt .RadMultiPage .rmpView { min-height: 0; }
    /* the columns stack; a column head and the tools line span the width */
    .rpt .myForm, .rpt .myForm.floatRight, .rpt .myForm.rpt-form-side { float: none !important; width: 100% !important; }
    .rpt .rpt-form-top .myForm { width: 100% !important; }
    .rpt .rpt-form-tools { float: none; margin: 0 0 8px; }
    .rpt .myForm .rpt-form-colhead { width: 100%; }
    /* a row: the caption (and its help glyph) on one line, the input full width under it, the validator line under the input */
    .rpt .myForm section { min-height: 0; margin: 0 0 16px; }   /* a little more air between the rows (the owner, 25 Sep 2026) */
    .rpt .myForm section > span.required, .rpt .myForm section > span.optional, .rpt .myForm section > .label { display: inline-block; width: auto; padding: 0; font-size: 11px; line-height: 18px; }
    .rpt .myForm section > a.help { width: auto; margin: 0 0 0 4px; line-height: 18px; text-align: left; }
    .rpt .myForm section > :is(input[type="text"], textarea, .RadComboBox, .RadDropDownList, .RadPicker, .RadInput, .RadAutoCompleteBox, .RadEditor, .rpt-affix, .rpt-form-card, .RadCheckBox, .RadRadioButtonList) { display: block; width: 100% !important; max-width: 100%; margin: 2px 0 0; box-sizing: border-box; }
    .rpt .myForm section > :is(.RadCheckBox, .RadRadioButtonList) { width: auto !important; }
    /* a row with a glyph after its input (+ add, copy): the input leaves the glyph its 34px on the same line instead of dropping it under (the owner, 25 Sep 2026) */
    .rpt .myForm section:has(> a.add, > a.copy, > a.location, > a.template) > :is(input[type="text"], .RadComboBox, .RadDropDownList, .RadPicker, .RadInput, .RadAutoCompleteBox, .rpt-affix) { display: inline-block; width: calc(100% - 34px) !important; vertical-align: middle; }
    .rpt .myForm section > :is(a.add, a.copy, a.location, a.template) { display: inline-block; width: 26px; margin: 2px 0 0 8px; line-height: 28px; text-align: center; vertical-align: middle; }
    .rpt .myForm section > .small { display: inline-block; margin: 4px 8px 0 0; line-height: 18px; }
    .rpt .myForm section > .rpt-form-hint { margin-left: 0; }
    .rpt .myForm .rfv-line, .rpt .myForm section.rpt-form-pair .rfv-line, .rpt .myForm section.rpt-form-pair .rfv-line.rfv-line-2 { left: 0; width: 100%; }
    /* a pair (date + who, title + name, dial code + number): two rows */
    .rpt .myForm section.rpt-form-pair > :is(.RadPicker, .RadComboBox, .RadDropDownList, .RadInput, input[type="text"]),
    .rpt .myForm section.rpt-form-pair > :is(.RadPicker, .RadComboBox, .RadDropDownList, .RadInput, input[type="text"]) ~ :is(.RadPicker, .RadComboBox, .RadDropDownList, .RadInput, input[type="text"]) { width: 100% !important; margin-left: 0; }
    .rpt .myForm section.rpt-form-pair > :is(.RadPicker, .RadComboBox, .RadDropDownList, .RadInput, input[type="text"]) ~ :is(.RadPicker, .RadComboBox, .RadDropDownList, .RadInput, input[type="text"]) { margin-top: 8px; }
    /* the same through an AJAX wrapper (div.RadAjaxPanel, 24 Oct 2026): the wrapper a block, the control full width, the pair's second on its own row */
    .rpt .myForm section > .RadAjaxPanel { display: block; }
    .rpt .myForm section > .RadAjaxPanel > :is(input[type="text"], .RadComboBox, .RadDropDownList, .RadPicker, .RadInput, .RadAutoCompleteBox) { display: block; width: 100% !important; max-width: 100%; margin: 2px 0 0; box-sizing: border-box; }
    .rpt .myForm section.rpt-form-pair > :is(.RadPicker, .RadComboBox, .RadDropDownList, .RadInput, input[type="text"], .RadAjaxPanel) ~ .RadAjaxPanel > :is(.RadPicker, .RadComboBox, .RadDropDownList, .RadInput, input[type="text"]),
    .rpt .myForm section.rpt-form-pair > .RadAjaxPanel ~ :is(.RadPicker, .RadComboBox, .RadDropDownList, .RadInput, input[type="text"]) { width: 100% !important; margin: 8px 0 0; }
    .rpt .myForm section.rpt-form-pair > .RadAjaxPanel > :is(.RadPicker, .RadComboBox, .RadDropDownList, .RadInput, input[type="text"]) { width: 100% !important; }
    .rpt .controlArea.rpt-form-foot > .RadAjaxPanel:has(> .rpt-btn-ghost),
    .rpt .controlArea.rpt-form-foot > .RadAjaxPanel:has(> .rpt-btn-ghost) + .RadAjaxPanel:has(> .rpt-btn),
    .rpt .controlArea.rpt-form-foot > .RadAjaxPanel:has(> .rpt-btn-ghost) + .RadAjaxPanel:has(> .rpt-btn-ghost),
    .rpt .controlArea.rpt-form-foot > .RadAjaxPanel:has(> .rpt-btn-ghost) ~ .RadAjaxPanel:has(> .rpt-btn),
    .rpt .controlArea.rpt-form-foot > .rpt-btn-ghost.RadButton.rbButton + .rpt-btn-ghost.RadButton.rbButton { margin-left: 0; }
    /* the inputs on the phone scale of the search card (13px), the captions 11px */
    .rpt .myForm section > input[type="text"], .rpt .myForm section .rpt-affix input[type="text"], .rpt .myForm textarea { font-size: 13px; line-height: 18px; }
    .rpt .myForm :is(.RadComboBox_Material .rcbInput, .RadDropDownList_Material .rddlInner, .RadInput_Material .riTextBox, .RadAutoCompleteBox_Material .racInput) { font-size: 13px !important; }
    /* a child list's entry card scrolls sideways as a whole (its columns are fixed px); its grid is not the list grid of section 11 */
    .rpt .rpt-entry-card { overflow-x: auto; }
    .rpt .rpt-entry-head, .rpt .rpt-entry, .rpt .myGrid.rpt-entry-grid { min-width: 560px; }
    .rpt .rpt-lines :is(.rpt-entry-head, .rpt-entry, .myGrid.rpt-entry-grid) { min-width: 760px; }   /* the line items' eight columns */
    .rpt .rpt-terms :is(.rpt-entry-head, .rpt-entry, .rpt-terms-foot) { min-width: 720px; }   /* the payment terms' six columns */
    /* the footer: the number line, then Save full width on top of any second button */
    .rpt .controlArea.rpt-form-foot { flex-direction: column-reverse; align-items: stretch; gap: 10px; margin: 16px -12px 0; padding: 12px 12px 14px; }
    .rpt .controlArea.rpt-form-foot .rpt-form-no { flex-direction: row; align-items: baseline; gap: 6px; }
    .rpt .rpt-btn.RadButton.rbButton, .rpt .rpt-btn.RadButton.rbButton.rbPrimaryButton, .rpt .rpt-btn-ghost.RadButton.rbButton { width: 100%; height: 40px !important; justify-content: center; }

    /* the dialogs and the alerts: any V2 window that is not maximized takes the width of the screen less an 8px gutter (Telerik writes the
       declared width and the centred left inline - hence !important); the content keeps its own height rule; the buttons a full row */
    body.v2 .RadWindow:not(.rwMaximizedWindow) { width: calc(100vw - 16px) !important; left: 8px !important; max-width: none; }
    body.v2 .RadWindow:not(.rwMaximizedWindow) .rwContent { max-height: calc(100dvh - 90px); }
    body.v2 .RadWindow:not(.rwMaximizedWindow) .rwContent :is(input[type="text"], textarea, .rcbInput, .rddlInner, .riTextBox) { font-size: 13px !important; }
    body.v2 .RadWindow:not(.rwMaximizedWindow) .rwContent .RadButton.rbButton { height: 38px !important; }
    body.v2 .RadWindow:not(.rwMaximizedWindow) .rwContent .myFormFull section > :is(span.optional, span.required) { flex: 0 0 100%; width: 100% !important; line-height: 18px; }   /* Create Contact: captions above on a phone too */
    body.v2 .RadWindow:not(.rwMaximizedWindow) .rwContent .myFormFull section > .rfv-line { flex-basis: 100%; margin-left: 0 !important; }
    /* a combo's list and a picker's calendar render at body level: never wider than the screen */
    body.v2 .RadComboBoxDropDown, body.v2 .RadAutoCompleteBoxPopup { max-width: calc(100vw - 16px) !important; }
}

/* ==========================================================================================================
   PosV2.css - CS Cashier, the point of sale V2 (Portal/Finance/PosV2.aspx; docs/POS-V2.md section 12; the design docs/mockups/pos-v2.html)

   This file sits directly under StyleSheets, so RegisterBundles ships it on EVERY portal page (the owner's choice, 7 Oct 2026):
   every rule here is scoped under .pos-till and is inert elsewhere. Colours are the Pages.css tokens (--head, --ink, --muted, --faint,
   --line, --hair, --band, --card, --ground, --accent, the theme's --accent); the strip takes the theme's bar colour through --pos-bar,
   which the page sets from WebHelper.UiThemes. A class name used here must not exist in another StyleSheets/*.css file: the bundle
   loads before nothing and after nothing - it is one file, and a shared name would style both pages. The root is .pos-till, never
   .pos: .pos is the positive modifier of Reports.css (.chg.pos, .kpi-chip.pos, .g-sub.pos) and Pages.css (.d-delta.pos), and the
   root rule below made every positive pill on every report a full-screen box (renamed 12 Oct 2026).
   ========================================================================================================== */

.pos-till, .pos-till * { box-sizing: border-box; }
.pos-till [hidden] { display: none !important; }
.pos-till button, .pos-till input, .pos-till select { font-family: inherit; }
.pos-till b { font-weight: 500; }
.pos-till h3 { margin: 0; }
.pos-till ::placeholder, .pos-till ::-webkit-input-placeholder { font-style: normal !important; opacity: 1 !important; color: var(--faint); }

/* the till fills the viewport; the master's windows and notifications stay above it */
.pos-till {
    --pos-bar: #2f3945;
    position: fixed; inset: 0; z-index: 10; display: flex; flex-direction: column;
    background: var(--ground, #f1f3f5); color: var(--ink, #37474f); font: 400 12px/1.4 Roboto, "Segoe UI", Arial, sans-serif;
}
.pos-till ::-webkit-scrollbar { width: 8px; height: 8px; }
.pos-till ::-webkit-scrollbar-thumb { background: var(--line); border-radius: 4px; }
.pos-till svg.i { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
.pos-till svg.i.lg { width: 22px; height: 22px; }
.pos-till .kbd { font: 500 10px/1 "Roboto Mono", Consolas, monospace; color: var(--faint); border: 1px solid var(--line); border-radius: 4px; padding: 2px 5px; background: var(--band); white-space: nowrap; }
.pos-till .hint { font-size: 11px; color: var(--muted); }

/* the refusal page (no permission, POS off) */
.pos-denied { position: fixed; inset: 0; display: grid; place-items: center; background: var(--ground, #f1f3f5); font: 400 13px/1.5 Roboto, Arial, sans-serif; color: var(--ink, #37474f); padding: 16px; }
.pos-denied-card { background: var(--card, #fff); border: 1px solid var(--line, #dfe5ea); border-radius: 12px; padding: 24px 28px; max-width: 460px; }
.pos-denied-card b { display: block; font-size: 15px; font-weight: 500; color: var(--head, #263238); margin-bottom: 6px; }
.pos-denied-card a { color: var(--accent, #3e668f); }

/* ---------- the top strip: the tenant's logo, CS Cashier, the branch, the cashier and the shift, the clock, Exit ---------- */
.pos-till .pos-top { height: 44px; flex-shrink: 0; background: var(--pos-bar); color: #fff; display: flex; align-items: center; gap: 14px; padding: 0 12px; position: relative; }
.pos-till .pos-brand { display: flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 500; white-space: nowrap; }
.pos-till .pos-brand img { height: 26px; max-width: 120px; object-fit: contain; border-radius: 4px; background: rgba(255,255,255,.9); padding: 2px 4px; }
.pos-till .pos-brand .dim { color: rgba(255,255,255,.6); font-weight: 400; }
.pos-till .pos-shift { flex: 1; min-width: 0; display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 11px; color: rgba(255,255,255,.75); white-space: nowrap; overflow: hidden; }
.pos-till .pos-shift b { color: #fff; font-weight: 500; }
.pos-till .pos-tools { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.pos-till .tb { height: 30px; padding: 0 10px; border: 0; border-radius: 8px; background: rgba(255,255,255,.1); color: #fff; font: 500 11px Roboto, sans-serif; display: inline-flex; align-items: center; gap: 6px; cursor: pointer; text-decoration: none; }
.pos-till .tb:hover { background: rgba(255,255,255,.18); color: #fff; }
.pos-till .tb.RadButton, .pos-till .tb.RadButton:hover, .pos-till .tb.RadButton:focus { height: 30px; min-width: 0; padding: 0 10px; margin-left: 8px; border: 0; border-radius: 8px; background: rgba(255,255,255,.1); color: #fff; box-shadow: none; line-height: 30px; }
.pos-till .tb.RadButton:hover { background: rgba(255,255,255,.18); }
.pos-till .tb.RadButton .rbText { font: 500 11px Roboto, sans-serif; color: #fff; padding: 0; }
.pos-till .pos-clock { font: 500 12px "Roboto Mono", monospace; color: rgba(255,255,255,.85); padding: 0 4px; }

/* ---------- the body grid: the catalogue (scan box, category combos, cards) and the ticket ---------- */
.pos-till .pos-body { flex: 1; min-height: 0; display: grid; gap: 10px; padding: 10px; grid-template-columns: 1fr 530px; grid-template-rows: auto auto 1fr; grid-template-areas: "chips ticket" "search ticket" "grid ticket"; }
/* the sale pane: 530 px holds the lines' eight fixed columns (382 px with the VAT column of 15 Oct 2026 - 50 px wider than before, so the
   item name keeps about 140 px); wider screens give the name more, small laptops a little less */
@media (min-width: 1500px) { .pos-till .pos-body { grid-template-columns: 1fr 570px; } }
@media (max-width: 1100px) { .pos-till .pos-body { grid-template-columns: 1fr 490px; } }

/* the scan box: a RadComboBox in the mockup's bar (load-on-demand over ComboWebService.GetProducts) */
.pos-till .pos-search { grid-area: search; height: 46px; display: flex; align-items: center; gap: 10px; padding: 0 12px; background: var(--card); border: 1px solid var(--line); border-radius: 10px; color: var(--muted); }
.pos-till .pos-search:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.pos-till .pos-search .RadComboBox { flex: 1; min-width: 0; }
.pos-till .pos-search .RadComboBox .rcbInner, .pos-till .pos-search .RadComboBox .rcbInput { border: 0 !important; background: transparent !important; box-shadow: none !important; padding: 0 !important; }
.pos-till .pos-search .RadComboBox .rcbInput { font: 500 15px Roboto, sans-serif !important; color: var(--head) !important; height: 40px !important; }
.pos-till .pos-search .RadComboBox .rcbInner:before { display: none !important; }
.pos-till .rcb-product { padding: 2px 0; }
.pos-till .rcb-product b { display: block; font-size: 12px; font-weight: 500; color: var(--head); }
.pos-till .rcb-product small { font-size: 11px; color: var(--muted); }

/* the category and the sub-category combos (15 Oct 2026; chips before): above the scan box, two fields of the sheets' look (.fld) sharing
   its full width half and half (the owner, 15 Oct 2026) */
.pos-till .pos-filters { grid-area: chips; display: flex; gap: 8px; min-width: 0; }
.pos-till .pos-filters > .fld { flex: 1 1 0; }

.pos-till .pos-gridwrap { grid-area: grid; min-height: 0; display: flex; flex-direction: column; gap: 8px; }
.pos-till .pos-grid { flex: 1; min-height: 0; overflow-y: auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(236px, 1fr)); gap: 8px; align-content: start; padding-right: 2px; }
.pos-till .grid-empty { grid-column: 1 / -1; padding: 40px 0; text-align: center; color: var(--faint); font-size: 13px; }

/* the product card: photo left, the words right (the owner's choice, 6 Oct 2026) */
.pos-till .tile { position: relative; display: flex; align-items: center; gap: 12px; padding: 10px 12px; background: var(--card); border: 1px solid var(--line); border-radius: 10px; cursor: pointer; user-select: none; -webkit-user-select: none; transition: transform .08s, box-shadow .15s, border-color .15s; outline: 0; min-width: 0; }
.pos-till .tile:hover { border-color: var(--accent-line); box-shadow: 0 2px 10px rgba(38,50,56,.06); }
.pos-till .tile:focus-visible { box-shadow: 0 0 0 3px var(--accent-line); }
.pos-till .tile:active { transform: scale(.985); }
.pos-till .tile.flash { box-shadow: 0 0 0 3px var(--accent-line); border-color: var(--accent); }
.pos-till .tile-img { width: 54px; height: 54px; flex-shrink: 0; border-radius: 8px; background: var(--band); color: var(--line); display: grid; place-items: center; overflow: hidden; border: 1px solid var(--hair); }
.pos-till .tile-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pos-till .tile-img.has-photo { border: 0; background: var(--band); }
.pos-till .tile-img.has-photo svg { display: none; }
.pos-till .tile-img svg.i { width: 20px; height: 20px; stroke-width: 1.3; color: var(--faint); opacity: .6; }
.pos-till .tile-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
/* the words: the name regular, the code faint, the price the only medium weight on the card */
.pos-till .tile-name { font-size: 13px; font-weight: 400; color: var(--head); line-height: 1.3; max-height: 2.6em; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.pos-till .tile-sku { font-size: 10.5px; color: var(--faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; letter-spacing: .02em; }
.pos-till .tile-sku:empty { display: none; }
/* a package card (15 Oct 2026): the sales-invoice grid's "Pack of N items" badge */
.pos-till .tile-pack { align-self: flex-start; margin-top: 2px; padding: 1px 7px; border-radius: 9px; background: var(--amber-soft); color: var(--amber-ink); font-size: 10px; font-weight: 500; white-space: nowrap; }
/* the row wraps: once "Stock" reads "15.0000 in stock", the links move under the price instead of running past the card's edge (15 Oct 2026) */
.pos-till .tile-row { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 8px; margin-top: 2px; }
.pos-till .tile-price { font-size: 13px; font-weight: 500; color: var(--head); font-variant-numeric: tabular-nums; display: inline-flex; align-items: baseline; gap: 4px; }
.pos-till .tile-price small { font-size: 10px; font-weight: 400; color: var(--muted); }
.pos-till .tile-price svg.i { width: 11px; height: 11px; color: var(--faint); align-self: center; }
.pos-till .tile-links { display: inline-flex; gap: 10px; align-items: baseline; }
.pos-till .tile-stock, .pos-till .tile-view { font-size: 10.5px; color: var(--accent-ink); white-space: nowrap; font-variant-numeric: tabular-nums; text-decoration: none; }
.pos-till .tile-stock:hover, .pos-till .tile-view:hover { text-decoration: underline; color: var(--accent-ink); }
.pos-till .tile-stock.is-read { color: var(--muted); }
.pos-till .tile-stock.is-out { color: var(--red); font-weight: 500; }
.pos-till.no-photos .tile-img { display: none; }   /* the settings' "Product photos: Off" */

/* ---------- the ticket: the customer row, the batch-editing grid skinned as the mockup's lines, the totals, Charge ---------- */
.pos-till .pos-ticket { grid-area: ticket; min-height: 0; display: flex; flex-direction: column; background: var(--card); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; position: relative; }
.pos-till .tk-wrap { display: flex; flex-direction: column; min-height: 0; height: 100%; }
.pos-till .tk-cust { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-bottom: 1px solid var(--hair); color: var(--muted); cursor: pointer; outline: 0; }
/* an edited sale (15 Oct 2026): the number, the delivery note left as it is, the way out - in the amber of a notice */
.pos-till .tk-editing { flex-shrink: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; padding: 8px 14px; background: var(--amber-soft); color: var(--amber-ink); font-size: 12px; border-bottom: 1px solid var(--hair); }
.pos-till .tk-editing b { font-family: "Roboto Mono", monospace; font-weight: 500; }
.pos-till .tk-editing .tk-editing-gdn { flex-basis: 100%; font-size: 11px; }
.pos-till .tk-editing a { margin-left: auto; color: var(--accent-ink); font-weight: 500; text-decoration: none; white-space: nowrap; }
.pos-till .tk-editing a:hover { text-decoration: underline; }
.pos-till .tk-cust:hover, .pos-till .tk-cust:focus-visible { background: var(--hover); }
.pos-till .tk-cust .ava { width: 32px; height: 32px; border-radius: 50%; background: var(--band-2); color: var(--muted); display: grid; place-items: center; flex-shrink: 0; }
.pos-till .tk-cust .ava.named { background: var(--accent-soft); color: var(--accent-ink); }
.pos-till .tk-cust .who { flex: 1; min-width: 0; }
.pos-till .tk-cust b { display: block; font-size: 13px; font-weight: 500; color: var(--head); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pos-till .tk-cust small { font-size: 11px; color: var(--muted); }
.pos-till .tk-lines { flex: 1; min-height: 0; overflow-y: auto; }

/* the grid as ticket lines: no grid lines, no chrome; each row = name + sub-line, the - qty + stepper (one pill), price, discount + its % / amount
   toggle, total, remove. Telerik renders a batch-editing grid with table-layout: fixed (read from the live DOM, 14 Oct 2026), so a width on a
   td is IGNORED and every column takes an equal share - that squeezed the item name to the width of a stepper button. In a fixed table the
   first row sizes the columns: the widths live on the HEADER cells (th), every column but the item carries one (324 px in all, padding
   included - box-sizing is border-box), and the item takes what the others leave. */
.pos-till .tk-grid, .pos-till .tk-grid .rgMasterTable { border: 0 !important; background: transparent !important; width: 100% !important; }
/* the till's root carries .rpt, so Reports.css's phone rule for report grids (under 1024 px: .rpt .RadGrid scrolls sideways over an 800 px
   master table) reached the ticket and pushed its columns off a phone screen (14 Oct 2026): the ticket grid stays fluid at every width */
.pos-till .tk-grid.RadGrid { overflow: visible !important; }
.pos-till .tk-grid.RadGrid .rgMasterTable { min-width: 0 !important; }
.pos-till .tk-grid .rgNoRecords { display: none !important; }
/* the lines' titles (the old cart's): small caps over the columns, the header cells carrying the columns' own classes and the column widths */
.pos-till .tk-grid thead { display: table-header-group !important; }
.pos-till .tk-grid th.rgHeader, .pos-till .tk-grid .rgHeader th, .pos-till .tk-grid thead th { border: 0 !important; border-bottom: 1px solid var(--hair) !important; background: transparent !important; padding: 6px 4px !important; font: 500 10px Roboto, sans-serif !important; letter-spacing: .05em; text-transform: uppercase; color: var(--faint) !important; text-align: right; white-space: nowrap; height: auto !important; line-height: 1.2 !important; }
.pos-till .tk-grid thead th.nm { text-align: left; padding-left: 14px !important; }
.pos-till .tk-grid thead th.stp-cell { width: 24px; padding: 0 !important; }
.pos-till .tk-grid thead th.q { width: 32px; padding: 6px 0 !important; text-align: center; }
.pos-till .tk-grid thead th.amt { width: 66px; }
.pos-till .tk-grid thead th.disc { width: 42px; }
.pos-till .tk-grid thead th.dt-cell { width: 32px; padding: 0 !important; }
.pos-till .tk-grid thead th.amt.tot { width: 78px; padding-right: 6px !important; }
.pos-till .tk-grid thead th.vat-cell { width: 58px; padding: 0 2px !important; text-align: center; }
.pos-till .tk-grid thead th.rm-cell { width: 26px; padding: 0 !important; }
.pos-till .tk-grid thead th.rgHeader a, .pos-till .tk-grid thead th a { color: inherit !important; text-decoration: none !important; }
.pos-till .tk-grid .rgRow td, .pos-till .tk-grid .rgAltRow td, .pos-till .tk-grid .rgEditRow td { border: 0 !important; border-bottom: 1px solid var(--hair) !important; padding: 8px 4px !important; vertical-align: middle !important; background: transparent !important; font: 400 12px Roboto, sans-serif !important; color: var(--ink) !important; }
.pos-till .tk-grid .rgRow:hover td, .pos-till .tk-grid .rgAltRow:hover td { background: var(--tint) !important; }
/* the item: the name on up to two lines, then "price x qty unit" on one */
.pos-till .tk-grid td.nm { padding-left: 14px !important; overflow: hidden; }
.pos-till .tk-grid td.nm b { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; font-weight: 500; color: var(--head); line-height: 1.25; overflow-wrap: anywhere; }
.pos-till .tk-grid td.nm small { display: block; margin-top: 1px; font-weight: 400; font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* the stepper: - | qty | + read as one pill across the three cells; the qty's in-cell editor opens in the middle */
.pos-till .tk-grid td.stp-cell { padding: 0 !important; text-align: center; }
.pos-till .tk-grid .stp-btn { display: block; width: 24px; height: 28px; border: 1px solid var(--line); border-radius: 7px 0 0 7px; background: var(--card); font: 400 15px/26px Roboto, sans-serif; color: var(--ink); cursor: pointer; padding: 0; }
.pos-till .tk-grid td.q + td.stp-cell .stp-btn { border-radius: 0 7px 7px 0; }
.pos-till .tk-grid .stp-btn:hover { background: var(--hover); }
.pos-till .tk-grid td.q { padding: 0 !important; text-align: center; font-weight: 500 !important; color: var(--head) !important; font-variant-numeric: tabular-nums; }
.pos-till .tk-grid td.q > div:not(.rgBatchContainer) { height: 28px; line-height: 26px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--card); overflow: hidden; }   /* the display div only: the open editor's container (rgBatchContainer) is a sibling div the input fills */
.pos-till .tk-grid td.amt { text-align: right; font-variant-numeric: tabular-nums; }
.pos-till .tk-grid td.disc { text-align: right; color: var(--muted) !important; font-variant-numeric: tabular-nums; }
.pos-till .tk-grid td.amt.tot { font-weight: 500 !important; color: var(--head) !important; font-size: 13px !important; padding-right: 6px !important; white-space: nowrap; }
.pos-till .tk-grid td.rm-cell { padding: 0 !important; text-align: center; }
.pos-till .tk-grid .rm { width: 24px; height: 24px; border: 0; background: transparent; color: var(--faint); border-radius: 6px; font: 400 16px Roboto, sans-serif; cursor: pointer; padding: 0; }
.pos-till .tk-grid .rm:hover { background: var(--red-soft); color: var(--red); }
/* a package line's words (15 Oct 2026): an undefined package's picks (two lines at most; a tap changes them), a bundle's word */
.pos-till .tk-grid td.nm small.picks { white-space: normal; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; color: var(--amber-ink); }
.pos-till .tk-grid td.nm small.picks.edit { cursor: pointer; }
.pos-till .tk-grid td.nm small.picks.edit:hover { text-decoration: underline; }
/* the pick sheet's list: numbered, the name and a remove cross */
.pos-till .pack-list { margin: 0; padding: 0 0 0 22px; display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--head); }
.pos-till .pack-list li { padding: 4px 0; border-bottom: 1px solid var(--hair); }
.pos-till .pack-list li > span { display: inline-block; width: calc(100% - 30px); vertical-align: middle; overflow-wrap: anywhere; }
.pos-till .pack-list .rm { width: 24px; height: 24px; border: 0; background: transparent; color: var(--faint); border-radius: 6px; font: 400 16px Roboto, sans-serif; cursor: pointer; padding: 0; vertical-align: middle; }
.pos-till .pack-list .rm:hover { background: var(--red-soft); color: var(--red); }
/* the in-cell editor (batch editing) reads as the mockup's line: the row's font, height and alignment, the accent ring */
.pos-till .tk-grid .rgBatchCurrent { background: transparent !important; }
.pos-till .tk-grid .rgEditRow td.q .RadInput, .pos-till .tk-grid td .RadInput { width: 100% !important; }
.pos-till .tk-grid td .RadInput .riTextBox, .pos-till .tk-grid td input[type="text"] { height: 28px !important; border: 1px solid var(--accent) !important; border-radius: 7px !important; box-shadow: 0 0 0 3px var(--accent-soft) !important; padding: 0 6px !important; font: 500 12px Roboto, sans-serif !important; color: var(--head) !important; background: var(--card) !important; text-align: right; }
.pos-till .tk-grid td.q .RadInput .riTextBox { text-align: center; }
.pos-till .tk-grid .rgBatchChanged { background: transparent !important; }
.pos-till .tk-grid .rgBatchChanged:before { display: none !important; }

.pos-till .tk-empty { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; color: var(--faint); text-align: center; font-size: 12px; padding: 20px; }
.pos-till .tk-empty svg.i { width: 36px; height: 36px; stroke-width: 1.2; opacity: .6; }
.pos-till .tk-empty b { font-weight: 500; color: var(--muted); font-size: 13px; }
.pos-till .tk-totals { padding: 8px 14px 4px; border-top: 1px solid var(--hair); }
.pos-till .tk-totals .row { display: flex; justify-content: space-between; align-items: baseline; padding: 3px 0; font-size: 12px; color: var(--muted); }
.pos-till .tk-totals .row b { font-weight: 500; color: var(--head); font-variant-numeric: tabular-nums; }
.pos-till .tk-totals .row.total { font-size: 14px; color: var(--head); padding-top: 6px; }
.pos-till .tk-totals .row.total b { font-size: 24px; letter-spacing: -.01em; }
.pos-till .tk-charge { margin: 4px 14px 6px; height: 56px; border: 0; border-radius: 12px; background: var(--accent); color: #fff; font: 500 15px Roboto, sans-serif; display: flex; align-items: center; justify-content: center; gap: 10px; cursor: pointer; flex-shrink: 0; width: calc(100% - 28px); }
.pos-till .tk-charge:hover { background: var(--accent-ink); }
.pos-till .tk-charge:disabled { background: var(--band-2); color: var(--faint); cursor: default; }
.pos-till .tk-charge b { font-size: 18px; font-weight: 500; font-variant-numeric: tabular-nums; }
.pos-till .tk-charge .kbd { color: rgba(255,255,255,.8); border-color: rgba(255,255,255,.4); background: transparent; }
.pos-till .tk-charge:disabled .kbd { color: var(--faint); border-color: var(--line); }
.pos-till .tk-keys { font-size: 10px; color: var(--faint); text-align: center; padding: 0 0 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---------- the sheets over the till: the customer (a side sheet), the checkout and the sale complete ---------- */
.pos-till .ov { position: absolute; inset: 0; background: rgba(38,50,56,.45); display: none; align-items: center; justify-content: center; z-index: 20; padding: 16px; }
.pos-till .ov.open { display: flex; }
.pos-till .ov.side { justify-content: flex-end; align-items: stretch; padding: 0; }
.pos-till .pos-sheet { background: var(--card); color: var(--ink); border-radius: 14px; box-shadow: 0 18px 48px rgba(0,0,0,.28); display: flex; flex-direction: column; max-height: 100%; max-width: 100%; overflow: hidden; }
.pos-till .ov.side .pos-sheet { border-radius: 14px 0 0 14px; width: 460px; max-height: none; height: 100%; }
.pos-till .sh-head { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--hair); font-size: 14px; font-weight: 500; color: var(--head); flex-shrink: 0; }
.pos-till .sh-head small { font-size: 11px; color: var(--muted); font-weight: 400; }
.pos-till .sh-body { flex: 1; min-height: 0; overflow-y: auto; padding: 14px 16px; display: flex; flex-direction: column; gap: 12px; }
.pos-till .sh-foot { padding: 12px 16px; border-top: 1px solid var(--hair); display: flex; gap: 8px; justify-content: flex-end; align-items: center; flex-shrink: 0; }
.pos-till .sh-row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.pos-till .sh-row small { font-size: 11px; color: var(--muted); }
.pos-till .sub-link { background: transparent; border: 0; color: var(--accent-ink); font: 500 12px Roboto, sans-serif; cursor: pointer; padding: 0; text-decoration: none; }
.pos-till .sub-link:hover { text-decoration: underline; color: var(--accent-ink); }
.pos-till .cust-form { display: flex; flex-direction: column; gap: 10px; padding: 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--tint); }
.pos-till .fld-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.pos-till .fld .req { color: var(--red); }
.pos-till .fld .RadComboBox { width: 100% !important; }
.pos-till .fld .RadComboBox .rcbInner { height: 38px !important; border: 1px solid var(--line) !important; border-radius: 8px !important; background: var(--card) !important; box-shadow: none !important; padding: 0 10px !important; }
.pos-till .fld .RadComboBox .rcbInner:before { display: none !important; }
.pos-till .fld .RadComboBox .rcbInput { font: 400 13px Roboto, sans-serif !important; color: var(--head) !important; height: 36px !important; }
.pos-till .fld .RadComboBox .rcbFocused .rcbInner, .pos-till .fld .RadComboBox .rcbInner:focus-within { border-color: var(--accent) !important; box-shadow: 0 0 0 3px var(--accent-soft) !important; }
.pos-till .fld .RadRadioButtonList .rbText { font: 400 13px Roboto, sans-serif; color: var(--ink); }
.pos-till .pos-btn { height: 40px; padding: 0 18px; border-radius: 10px; border: 1px solid var(--line); background: var(--card); color: var(--head); font: 500 13px Roboto, sans-serif; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 8px; white-space: nowrap; text-decoration: none; }
.pos-till .pos-btn:hover { background: var(--hover); color: var(--head); }
.pos-till .pos-btn.primary, .pos-till .pos-btn.primary.RadButton { background: var(--accent); border-color: var(--accent); color: #fff; }
.pos-till .pos-btn.primary:hover { background: var(--accent-ink); border-color: var(--accent-ink); color: #fff; }
.pos-till .pos-btn.big { height: 48px; font-size: 14px; padding: 0 24px; }
.pos-till .pos-btn:disabled, .pos-till .pos-btn.rbDisabled { opacity: .5; cursor: default; }
.pos-till .pos-btn.RadButton .rbText { font: inherit; color: inherit; }
.pos-till .fld { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.pos-till .fld label { font-size: 10px; font-weight: 500; letter-spacing: .05em; text-transform: uppercase; color: var(--faint); }
/* a plain box only: a combo's own input (.rcbInput) sits inside the combo's frame, which draws the border and the focus ring itself - styled
   here too, it drew a second rounded ring inside the frame on focus, a strip on the left and a line before the arrow (15 Oct 2026) */
.pos-till .fld input[type="text"]:not(.rcbInput), .pos-till .fld .RadDropDownList, .pos-till .fld .RadInput .riTextBox { height: 38px !important; border: 1px solid var(--line) !important; border-radius: 8px !important; padding: 0 10px !important; font: 400 13px Roboto, sans-serif !important; color: var(--head) !important; background: var(--card) !important; min-width: 0; box-shadow: none !important; }
.pos-till .fld input[type="text"]:not(.rcbInput):focus, .pos-till .fld .RadInput .riTextBox:focus { border-color: var(--accent) !important; box-shadow: 0 0 0 3px var(--accent-soft) !important; outline: 0; }
.pos-till .notice { padding: 10px 12px; border-radius: 10px; background: var(--amber-soft); color: var(--amber-ink); font-size: 12px; }
.pos-till .notice.is-ok { background: var(--green-soft); color: var(--green); }

/* the checkout */
.pos-till .pos-sheet.pay { width: 820px; height: 560px; }
.pos-till .pay-head { display: flex; align-items: center; padding: 14px 20px; border-bottom: 1px solid var(--hair); flex-shrink: 0; }
.pos-till .pay-head small { display: block; font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; font-weight: 500; }
.pos-till .pay-head b { font-size: 28px; font-weight: 500; color: var(--head); letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.pos-till .x { margin-left: auto; width: 30px; height: 30px; border: 0; border-radius: 8px; background: transparent; color: var(--muted); display: grid; place-items: center; cursor: pointer; font: 400 20px Roboto, sans-serif; }
.pos-till .x:hover { background: var(--hover); color: var(--head); }
.pos-till .pay-body { flex: 1; min-height: 0; display: grid; grid-template-columns: 250px 1fr; }
.pos-till .pay-methods { padding: 16px; border-right: 1px solid var(--hair); display: flex; flex-direction: column; gap: 8px; }
.pos-till .pm { text-align: left; border: 1px solid var(--line); background: var(--card); border-radius: 10px; padding: 12px 14px; cursor: pointer; display: flex; gap: 12px; align-items: center; color: var(--muted); }
.pos-till .pm:hover { background: var(--hover); }
.pos-till .pm.on { border-color: var(--head); box-shadow: inset 0 0 0 1px var(--head); color: var(--head); }
.pos-till .pm:disabled { opacity: .4; cursor: default; }
.pos-till .pm b { display: block; font-size: 13px; font-weight: 500; color: var(--head); }
.pos-till .pm small { display: block; font-size: 11px; color: var(--muted); }
.pos-till .pm .kbd { margin-left: auto; }
.pos-till .pay-main { padding: 16px 20px; min-height: 0; overflow-y: auto; }
.pos-till .pay-block { display: flex; flex-direction: column; gap: 12px; }
.pos-till .tender { display: flex; justify-content: space-between; align-items: baseline; border-bottom: 2px solid var(--accent); padding: 4px 0; gap: 12px; }
.pos-till .tender small { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; font-weight: 500; }
.pos-till .tender .RadInput { width: 220px !important; }
.pos-till .tender .RadInput .riTextBox { height: 48px !important; border: 0 !important; box-shadow: none !important; background: transparent !important; font: 500 32px Roboto, sans-serif !important; color: var(--head) !important; text-align: right; padding: 0 !important; }
.pos-till .quick { display: flex; gap: 6px; }
.pos-till .quick button { flex: 1; height: 36px; border: 1px solid var(--line); border-radius: 8px; background: var(--card); color: var(--ink); font: 500 12px Roboto, sans-serif; cursor: pointer; }
.pos-till .quick button:hover { background: var(--hover); }
.pos-till .pay-change { display: flex; justify-content: space-between; align-items: baseline; font-size: 13px; color: var(--muted); }
.pos-till .pay-change b { color: var(--green); font-size: 24px; font-weight: 500; font-variant-numeric: tabular-nums; }
.pos-till .pay-change.short b { color: var(--red); font-size: 16px; }
.pos-till .pay-change.wait b { color: var(--faint); font-size: 14px; font-weight: 400; }
.pos-till .pay-foot { display: flex; gap: 8px; padding: 12px 20px; border-top: 1px solid var(--hair); justify-content: flex-end; align-items: center; flex-shrink: 0; }
.pos-till .pay-foot .left { margin-right: auto; font-size: 12px; color: var(--muted); }
.pos-till .pay-main { display: flex; flex-direction: column; gap: 12px; }
/* the split: two amount rows, the typed one drives the other */
.pos-till .split-rows { display: flex; flex-direction: column; gap: 8px; }
.pos-till .split-row { display: flex; align-items: center; gap: 10px; padding: 6px 12px; border: 1px solid var(--line); border-radius: 10px; color: var(--muted); }
.pos-till .split-row:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.pos-till .split-row b { font-size: 13px; font-weight: 500; color: var(--head); flex: 1; }
.pos-till .split-row .RadInput { width: 170px !important; }
.pos-till .split-row .RadInput .riTextBox { height: 36px !important; border: 0 !important; box-shadow: none !important; background: transparent !important; font: 500 22px Roboto, sans-serif !important; color: var(--head) !important; text-align: right; padding: 0 !important; }

/* the settings sheet's read-only values */
.pos-till .fld .val { font-size: 13px; color: var(--head); }

/* the shift sheets: open (narrow), close (two columns), closed */
.pos-till .pos-sheet.shift { width: 440px; }
.pos-till .pos-sheet.shift.wide { width: 720px; }
.pos-till .sh-body.two { display: grid; grid-template-columns: 1fr 260px; gap: 24px; align-content: start; }
.pos-till .sh-body .col { display: flex; flex-direction: column; gap: 12px; }
.pos-till .kv { display: grid; grid-template-columns: 1fr auto; gap: 8px 16px; font-size: 12px; color: var(--muted); align-content: start; }
.pos-till .kv > :nth-child(2n) { color: var(--head); font-weight: 500; font-variant-numeric: tabular-nums; text-align: right; }
.pos-till .kv .big { font-size: 16px; color: var(--head); }
.pos-till .kv .is-ok { color: var(--green); }
.pos-till .kv .bad { color: var(--red); }
@media (max-width: 760px) { .pos-till .sh-body.two { grid-template-columns: 1fr; } .pos-till .pos-sheet.shift.wide { width: 100%; } }

/* ---------- the owner's walk of 8 Oct 2026: one border per field, our buttons, the words, the strip, the lines' titles, the phone ---------- */
/* the fields: one full border (ours), Telerik's inner borders and Material underlines off */
.pos-till .fld .RadComboBox .rcbInput { border: 0 !important; box-shadow: none !important; background: transparent !important; padding: 0 !important; }
.pos-till .fld .RadComboBox .rcbInner:after { display: none !important; }
.pos-till .fld .RadDropDownList { padding: 0 !important; }
.pos-till .fld .RadDropDownList .rddlInner { border: 0 !important; box-shadow: none !important; background: transparent !important; padding: 0 24px 0 10px !important; height: 36px !important; display: flex !important; align-items: center; overflow: hidden; }
.pos-till .fld .RadDropDownList .rddlInner:before, .pos-till .fld .RadDropDownList .rddlInner:after { display: none !important; }
.pos-till .fld .RadDropDownList .rddlFakeInput { font: 400 13px Roboto, sans-serif !important; color: var(--head) !important; line-height: 1.2 !important; height: auto !important; min-height: 0 !important; padding: 0 !important; overflow: visible !important; }
.pos-till .fld .RadDropDownList.rddlFocused, .pos-till .fld .RadDropDownList:focus-within { border-color: var(--accent) !important; box-shadow: 0 0 0 3px var(--accent-soft) !important; }
.pos-till .fld .RadPicker { width: 100% !important; }
.pos-till .fld .RadPicker .RadInput { width: 100% !important; }
.pos-till .fld .RadPicker .riTextBox { height: 38px !important; border: 1px solid var(--line) !important; border-radius: 8px !important; padding: 0 10px !important; font: 400 13px Roboto, sans-serif !important; color: var(--head) !important; background: var(--card) !important; box-shadow: none !important; }
.pos-till .fld .RadPicker .rcCalPopup { margin-left: -34px; }
.pos-till .fld .RadRadioButtonList { display: flex; gap: 14px; }
/* the buttons: ours, not the skin's (no pill, no capitals) */
.pos-till .pos-btn.RadButton, .pos-till .pos-btn.RadButton:hover, .pos-till .pos-btn.RadButton:focus { box-sizing: border-box !important; height: 40px !important; min-height: 0 !important; line-height: 38px !important; padding: 0 18px !important; border-radius: 10px !important; text-transform: none !important; box-shadow: none !important; font: 500 13px Roboto, sans-serif !important; letter-spacing: 0 !important; min-width: 0 !important; }
.pos-till .pos-btn.big.RadButton, .pos-till .pos-btn.big.RadButton:hover { height: 48px !important; line-height: 46px !important; font-size: 14px !important; padding: 0 24px !important; }
.pos-till .pos-btn.RadButton .rbText { text-transform: none !important; font: inherit !important; color: inherit !important; padding: 0 !important; letter-spacing: 0 !important; line-height: inherit !important; }
.pos-till .pos-btn.primary.RadButton, .pos-till .pos-btn.primary.RadButton:hover { color: #fff !important; }
/* the skin's hovered / focused / pressed / disabled looks (rbHovered, rbFocused, rbSelected, rbDisabled) must not pale the accent under white words */
.pos-till .pos-btn.primary.RadButton.rbHovered, .pos-till .pos-btn.primary.RadButton:hover, .pos-till .pos-btn.primary.RadButton.rbFocused, .pos-till .pos-btn.primary.RadButton:focus, .pos-till .pos-btn.primary.RadButton.rbSelected, .pos-till .pos-btn.primary.RadButton:active { background-color: var(--accent-ink) !important; border-color: var(--accent-ink) !important; color: #fff !important; }
.pos-till .pos-btn.primary.RadButton.rbDisabled, .pos-till .pos-btn.primary.RadButton.rbDisabled:hover, .pos-till .pos-btn.primary.RadButton:disabled { background-color: var(--accent) !important; border-color: var(--accent) !important; color: #fff !important; opacity: .5 !important; }
.pos-till .pos-btn.RadButton:not(.primary).rbHovered, .pos-till .pos-btn.RadButton:not(.primary):hover, .pos-till .pos-btn.RadButton:not(.primary).rbFocused { background-color: var(--hover) !important; border-color: var(--line) !important; color: var(--head) !important; }
.pos-till .pos-btn.RadButton:not(.primary).rbDisabled { background-color: var(--card) !important; color: var(--head) !important; opacity: .5 !important; }
/* the bundle pills every rounded RadButton (.RadButton.rbRounded:not(.k-flat) { border-radius: 20px !important }) - outranked here, 9 Oct 2026 */
.pos-till .pos-btn.RadButton.rbRounded:not(.k-flat), .pos-till .pos-btn.RadButton.rbRounded { border-radius: 10px !important; }
.pos-till .tb.RadButton.rbRounded:not(.k-flat), .pos-till .tb.RadButton.rbRounded { border-radius: 8px !important; }
/* the receipt reads left to right whatever the tenant's language: the item on the left, the figures on the right (the owner, 9 Oct 2026) */
.pos-till .rc, .pos-till .rc[dir="rtl"], #printArea .rc, #printArea .rc[dir="rtl"] { direction: ltr; text-align: left; }
.pos-till .rc .rc-title .ar { direction: rtl; }
/* the Exit confirm (radconfirm): the bundle's ".RadWindow .rwDialog { padding: 0 2px !important }" (03-telerik-overrides.css) beats the
   V2 skin's "padding: 0 0 62px" (Pages.css 756), so the dialog shrinks to its one line and the button bar covers the words - on this page
   the room is restored (scoped to the till through :has, the dialog lives outside #pos) */
body.v2:has(#pos) .RadWindow_Material .rwDialog { padding: 0 0 62px !important; }
/* the strip's middle: RadAjax wraps the updated panel in a div of its own, so the wrapper is the flex item that must grow (9 Oct 2026) */
.pos-till .pos-top > div:has(> .pos-shift) { flex: 1 1 0%; min-width: 0; display: flex; }
.pos-till .pos-top > div:has(> .pos-shift) > .pos-shift { width: 100%; }
/* the strip's middle: the cashier, then the shift words when there are any */
.pos-till .pos-shift .shift-words:empty { display: none; }
.pos-till .pos-shift .pos-user + .shift-words:not(:empty)::before { content: "\00b7"; margin-right: 8px; color: rgba(255,255,255,.45); }
/* the green figures a size down; a balanced split or drawer reads as a sentence */
.pos-till .pay-change b { font-size: 20px; }
.pos-till .pay-change.is-ok b { font-size: 14px; font-weight: 500; }   /* not ".ok": the bundle leaks a check-mark glyph on that class */
.pos-till .quick-hint { font-size: 11px; color: var(--muted); }
/* the strip: the chip, the shift in the middle, the cashier on the right */
.pos-till .pos-brand .brand-chip { background: rgba(255,255,255,.16); border-radius: 8px; padding: 4px 10px; font-weight: 600; letter-spacing: .01em; }
.pos-till .pos-shift b { color: #fff; font-weight: 500; }
.pos-till .pos-user { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 500; color: #fff; padding: 0 6px; white-space: nowrap; }
.pos-till .pos-user img, .pos-till .pos-user .ava-sm { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; background: rgba(255,255,255,.15); display: grid; place-items: center; }
.pos-till .pos-user .ava-sm svg.i { width: 15px; height: 15px; }
/* the lines: the discount-type toggle, a lighter card name */
.pos-till .tk-grid td.dt-cell { padding: 0 !important; text-align: center; }
/* the line's VAT (15 Oct 2026): a compact select in the discount toggle's look; the open list shows the full words */
.pos-till .tk-grid td.vat-cell { padding: 0 2px !important; text-align: center; }
.pos-till .tk-grid .vat-sel { width: 54px; height: 26px; padding: 0 2px; border: 1px solid var(--line); border-radius: 7px; background: var(--card); color: var(--ink); font: 500 11px Roboto, sans-serif; cursor: pointer; text-overflow: ellipsis; }
.pos-till .tk-grid .vat-sel:focus { outline: 0; border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); }
.pos-till .tk-grid .dt { height: 22px; min-width: 26px; max-width: 32px; padding: 0 4px; border: 1px solid var(--line); border-radius: 6px; background: var(--card); font: 500 10px Roboto, sans-serif; color: var(--muted); cursor: pointer; white-space: nowrap; overflow: hidden; }
.pos-till .tk-grid .dt:hover { background: var(--hover); color: var(--head); }
.pos-till .tile-name { font-size: 12px; }
/* the discount on the whole sale, in the totals */
.pos-till .tk-totals .row.od { align-items: center; gap: 8px; }
.pos-till .tk-totals .od-in { display: inline-flex; gap: 6px; margin-left: auto; margin-right: 8px; align-items: center; }
.pos-till .od-in .RadDropDownList { width: 118px !important; height: 28px !important; border: 1px solid var(--line) !important; border-radius: 7px !important; background: var(--card) !important; box-shadow: none !important; padding: 0 !important; }
.pos-till .od-in .RadDropDownList .rddlInner { border: 0 !important; box-shadow: none !important; background: transparent !important; padding: 0 20px 0 6px !important; height: 26px !important; display: flex !important; align-items: center; overflow: hidden; }
.pos-till .od-in .RadDropDownList .rddlInner:before, .pos-till .od-in .RadDropDownList .rddlInner:after { display: none !important; }
.pos-till .od-in .RadDropDownList .rddlFakeInput { font: 400 11px Roboto, sans-serif !important; color: var(--head) !important; line-height: 1.2 !important; height: auto !important; min-height: 0 !important; padding: 0 !important; overflow: visible !important; }
.pos-till .od-in .RadInput { width: 72px !important; }
.pos-till .od-in .RadInput .riTextBox { height: 28px !important; border: 1px solid var(--line) !important; border-radius: 7px !important; padding: 0 6px !important; font: 500 12px Roboto, sans-serif !important; color: var(--head) !important; background: var(--card) !important; box-shadow: none !important; text-align: right; }
.pos-till .tk-totals .row.od-note input[type="text"] { width: 100%; height: 28px; border: 1px solid var(--line); border-radius: 7px; padding: 0 8px; font: 400 11px Roboto, sans-serif; color: var(--head); background: var(--card); }
/* the phone (under 900 px): one column, the sale pane as a sheet over the catalogue behind a bottom bar, the sheets full-screen */
.pos-till .tk-bar { display: none; position: fixed; left: 0; right: 0; bottom: 0; height: 56px; z-index: 16; align-items: center; gap: 10px; padding: 0 16px; border: 0; border-top: 1px solid var(--line); background: var(--head); color: #fff; font: 500 14px Roboto, sans-serif; cursor: pointer; }
.pos-till .tk-bar b { margin-left: auto; font-size: 16px; font-variant-numeric: tabular-nums; }
.pos-till .tk-bar .chev { font-size: 10px; transition: transform .2s; }
.pos-till.sale-open .tk-bar .chev { transform: rotate(180deg); }
/* a phone-width sale pane (under 480 px): the seven fixed columns tightened to 290 px so the item name keeps two readable lines */
@media (max-width: 480px) {
    .pos-till .tk-grid thead th.stp-cell { width: 22px; }
    .pos-till .tk-grid thead th.q { width: 28px; }
    .pos-till .tk-grid thead th.amt { width: 58px; }
    .pos-till .tk-grid thead th.disc { width: 38px; }
    .pos-till .tk-grid thead th.dt-cell { width: 28px; }
    .pos-till .tk-grid thead th.amt.tot { width: 70px; padding-right: 4px !important; }
    .pos-till .tk-grid thead th.vat-cell { width: 52px; }
    .pos-till .tk-grid .vat-sel { width: 48px; }
    .pos-till .tk-grid thead th.rm-cell { width: 24px; }
    .pos-till .tk-grid .stp-btn { width: 22px; }
    .pos-till .tk-grid td.nm { padding-left: 10px !important; }
    .pos-till .tk-grid td.amt.tot { padding-right: 4px !important; font-size: 12px !important; }
    .pos-till .tk-grid .dt { min-width: 24px; max-width: 28px; padding: 0 2px; }
}
@media (max-width: 900px) {
    .pos-till .pos-body { grid-template-columns: 1fr; grid-template-areas: "chips" "search" "grid"; padding: 8px; gap: 8px; padding-bottom: 64px; }
    .pos-till .pos-ticket { position: fixed; left: 0; right: 0; top: 44px; bottom: 56px; border-radius: 12px 12px 0 0; transform: translateY(110%); transition: transform .2s; z-index: 15; }
    .pos-till.sale-open .pos-ticket { transform: none; }
    .pos-till .tk-bar { display: flex; }
    .pos-till .tk-keys, .pos-till .kbd { display: none; }
    .pos-till .pos-grid { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); }
    .pos-till .pos-top { gap: 8px; padding: 0 8px; }
    .pos-till .pos-brand .dim, .pos-till .pos-clock, .pos-till .pos-shift, .pos-till .pos-user > span:last-child, .pos-till .pos-tools .tb > span { display: none; }
    .pos-till .ov { padding: 0; }
    .pos-till .pos-sheet.pay { width: 100%; height: 100%; border-radius: 0; }
    .pos-till .pay-body { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
    .pos-till .pay-methods { flex-direction: row; overflow-x: auto; border-right: 0; border-bottom: 1px solid var(--hair); padding: 10px 12px; }
    .pos-till .pm { flex-direction: column; align-items: flex-start; gap: 2px; min-width: 110px; padding: 8px 10px; }
    .pos-till .pay-head b { font-size: 22px; }
    .pos-till .pos-sheet.sale-done { width: 100%; height: 100%; flex-direction: column; border-radius: 0; }
    .pos-till .done-right { width: 100%; }
    .pos-till .ov.side .pos-sheet { width: 100%; border-radius: 0; }
    .pos-till .pos-sheet.shift, .pos-till .pos-sheet.shift.wide { width: 100%; height: 100%; border-radius: 0; }
    .pos-till .fld-row { grid-template-columns: 1fr; }
}

/* the sale complete */
.pos-till .pos-sheet.sale-done { width: 860px; height: 560px; flex-direction: row; }
.pos-till .done-left { flex: 1; min-width: 0; padding: 28px 28px 24px; display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.pos-till .done-left .check { width: 56px; height: 56px; border-radius: 50%; background: var(--green-soft); color: var(--green); display: grid; place-items: center; }
.pos-till .done-left h3 { margin: 6px 0 0; font-size: 20px; font-weight: 500; color: var(--head); }
.pos-till .done-left .no { font: 500 14px "Roboto Mono", monospace; color: var(--accent-ink); }
.pos-till .done-kv { display: grid; grid-template-columns: auto 1fr; gap: 4px 16px; font-size: 13px; color: var(--muted); margin-top: 4px; }
.pos-till .done-kv b { color: var(--head); font-weight: 500; font-variant-numeric: tabular-nums; }
.pos-till .done-kv b.kv-chg { color: var(--green); font-size: 18px; }
.pos-till .done-acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; }
.pos-till .done-left .hint { max-width: 100%; overflow-wrap: anywhere; line-height: 1.45; }   /* a long ZATCA message (a file path) wraps instead of running off the sheet */
.pos-till .done-right { width: 340px; flex-shrink: 0; background: var(--band); padding: 20px; overflow-y: auto; display: flex; justify-content: center; align-items: flex-start; }

/* the receipt (80 mm paper, 72 mm printable): white, as paper is */
.rc { width: 272px; background: #fff; color: #111; font: 400 11px/1.35 Roboto, Arial, sans-serif; padding: 12px 10px 14px; box-shadow: 0 2px 8px rgba(0,0,0,.12); font-variant-numeric: tabular-nums; }
.rc[dir="rtl"] { text-align: right; }
.rc .rc-logo { text-align: center; margin: 0 auto 6px; }
.rc .rc-logo img { max-width: 140px; max-height: 60px; }
.rc .rc-name { display: block; text-align: center; font-weight: 700; font-size: 13px; }
.rc .rc-addr { display: block; text-align: center; font-size: 10px; color: #444; white-space: pre-line; }
.rc .rc-title { text-align: center; font-weight: 700; font-size: 13px; margin: 8px 0 6px; }
.rc .rc-title .ar { display: block; font-weight: 500; font-size: 12px; }
.rc table { width: 100%; border-collapse: collapse; }
.rc .rc-meta { margin-top: 4px; }
.rc .rc-meta .row { display: flex; justify-content: space-between; gap: 8px; padding: 1px 0; font-size: 10.5px; }
.rc .rc-lines { margin-top: 6px; }
.rc .rc-lines th { text-align: left; font-size: 10px; font-weight: 500; border-top: 1px dashed #999; border-bottom: 1px dashed #999; padding: 3px 0; }
.rc .rc-lines td { padding: 3px 0; vertical-align: top; }
.rc .rc-lines .r, .rc .rc-lines th.r { text-align: right; }
.rc .rc-lines th.r, .rc .rc-lines td.r { padding-left: 8px; white-space: nowrap; }   /* Qty / Price / Total apart (they ran together: "QtyPriceTotal") */
.rc .rc-lines .d { font-size: 10px; color: #555; }
/* a package's item under its package (15 Oct 2026): smaller, no figures */
.rc .rc-lines tr.pk td { font-size: 10px; color: #555; padding: 0 0 2px 6px; }
.rc .rc-tot { margin-top: 4px; border-top: 1px dashed #999; padding-top: 4px; }
.rc .rc-tot .row { display: flex; justify-content: space-between; padding: 1px 0; }
.rc .rc-tot .tot { font-weight: 700; font-size: 13px; border-top: 1px dashed #999; margin-top: 3px; padding-top: 4px; }
.rc .rc-tot .pay { color: #333; }
/* the QR fits the strip (15 Oct 2026): RadBarcode drew an SVG at its natural size - wider than the receipt with a ZATCA payload; it is an
   embedded PNG now (OutputType="EmbeddedPNG"), scaled without blur, and anything inside the box is held to it */
.rc .rc-qr { margin: 10px auto 4px; width: 104px; height: 104px; overflow: hidden; }
.rc .rc-qr div, .rc .rc-qr span { width: 104px !important; height: 104px !important; }
.rc .rc-qr img, .rc .rc-qr canvas, .rc .rc-qr svg { width: 104px !important; height: 104px !important; display: block; image-rendering: pixelated; }
.rc .rc-foot { text-align: center; font-size: 10px; color: #444; margin-top: 8px; }
.rc .rc-foot b { display: block; font-weight: 500; }
.rc .rc-foot span { white-space: pre-line; }

/* print: the receipt alone (#printArea sits inside the form, so visibility is the switch, not display) */
#printArea { display: none; }
@media print {
    body.pos-printing * { visibility: hidden !important; }
    body.pos-printing #printArea, body.pos-printing #printArea * { visibility: visible !important; }
    body.pos-printing #printArea { display: block; position: absolute; left: 0; top: 0; width: 72mm; box-shadow: none; padding: 0; }
    @page { margin: 4mm; }   /* the paper size is the receipt printer driver's */
}
@media (prefers-reduced-motion: reduce) { .pos-till .tile { transition: none; } }

/* =====================================================================================================
   Reports.css - the base stylesheet for report / analytics pages (first user: Sales/PipelineAnalytics).
   Bundled site-wide with every file in ~/StyleSheets, so a page needs no link: wrap its results in
   <div class="rpt"> and use the classes below.

   Inherits from the site: body 12px / 18px, ink var(--ink), <b> = 500, <small> = 11px, .super-text = the
   small grey label. Only ONE font-size is set here (the KPI number); everything else inherits.

   One colour per meaning, used the same way in cards, pills, counters and chart palettes:
     blue    #3b82f6  previous / current / new / open
     green   #16a34a  advanced, up
     emerald #059669  won
     red     #dc2626  lost, down
     amber   #f59e0b  stage slipped
     orange  #ea580c  close-date slipped
     violet  #7c3aed  margin, moved in / out
     teal    #0d9488  changed; the manager commit (Sales Performance, S3)
     grey    var(--faint)  neutral
   Ink, greys, lines and the accent are the Pages.css tokens (var(--ink) ...), so a report page and a list page agree.
   ===================================================================================================== */

.rpt, .rpt-toolbar, .rpt-guide { color: var(--ink); }
.rpt *, .rpt-guide * { box-sizing: border-box; }

/* ---- page chrome ---- */
.rpt-help-link { float: right; margin-top: -35px; }
.rpt-help-link a { color: var(--accent); }
.rpt-help-link a:hover { text-decoration: underline; }

/* report tabs: a RadWizard (Metro, no progress bar / nav buttons, steps with CssClass is-out) */
.rpt-tabs { margin-bottom: 8px; }
.rpt-tabs .rwzLink { min-width: 150px; }

/* toolbar: fixed five columns so the period slots never re-flow */
.rpt-toolbar { table-layout: fixed; }
.rpt-toolbar td { width: 20%; vertical-align: top; }
.rpt-toolbar td.rpt-run { text-align: right; vertical-align: bottom; }

/* ---- info strip: report name + context, description folded away ---- */
.rpt-info {
    background: #fff; border: 1px solid var(--frame); border-left: 3px solid var(--accent); border-radius: 8px;
    padding: 9px 14px; margin-bottom: 12px; display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 14px;
}
.rpt-info .rpt-name { font-weight: 500; color: var(--head); }
.rpt-info .rpt-context { color: var(--muted); flex: 1 1 320px; }
.rpt-info .rpt-toggle { color: var(--accent); cursor: pointer; white-space: nowrap; }
.rpt-info .rpt-toggle:hover { text-decoration: underline; }
.rpt-info .rpt-desc { flex-basis: 100%; color: var(--muted); border-top: 1px dashed var(--line); padding-top: 7px; margin-top: 2px; }
.rpt-scope { display: inline-block; background: #efe8fd; color: #7c3aed; border-radius: 10px; padding: 0 8px; font-weight: 500; margin-left: 4px; }

/* ---- KPI cards: one row, every card the same width, sparkline pinned to the bottom ---- */
.rpt-kpis { display: flex; gap: 8px; margin-bottom: 12px; }
.rpt-kpi {
    flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; overflow: hidden;
    background: #fff; border: 1px solid var(--frame); border-radius: 10px; padding: 8px 9px 0; box-shadow: 0 1px 2px rgba(20,30,45,.04);
}
.rpt-kpi .kpi-head { display: flex; align-items: center; gap: 5px; }
.rpt-kpi .kpi-ico { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 50%; flex: 0 0 18px; }
.rpt-kpi .kpi-ico svg { width: 10px; height: 10px; }
.rpt-kpi .kpi-label { margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* the chip wraps under the number when the card is too narrow for both - never over the neighbouring half */
.rpt-kpi .kpi-value { display: flex; flex-wrap: wrap; align-items: baseline; gap: 3px 5px; margin-top: 3px; line-height: 1.2; min-width: 0; }
/* the number is the ONE thing on a report page with its own size; the chip and note beside it are <small> */
.rpt-kpi .kpi-value > span:first-child { flex: 0 0 auto; font-size: 16px; font-weight: 500; letter-spacing: -.02em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.rpt-kpi .kpi-chip { flex: 0 0 auto; display: inline-block; border-radius: 9px; padding: 0 5px; font-weight: 500; white-space: nowrap; }
.rpt-kpi .kpi-chip.pos { background: #e6f6ec; color: #16a34a; }
.rpt-kpi .kpi-chip.neg { background: #fde8e8; color: #dc2626; }
.rpt-kpi .kpi-chip.flat { background: #eef1f4; color: var(--faint); }
.rpt-kpi .kpi-note { color: var(--faint); min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rpt-kpi .kpi-spark { display: block; height: 22px; margin: 6px -9px 0; margin-top: auto; padding-top: 6px; }
.rpt-kpi .kpi-spark svg { width: 100%; height: 22px; display: block; }
.k-blue .kpi-ico { background: #e8f0fe; color: #3b82f6; }    .k-blue .kpi-value { color: #2f6fd9; }
.k-green .kpi-ico { background: #e6f6ec; color: #16a34a; }   .k-green .kpi-value { color: #16a34a; }
.k-emerald .kpi-ico { background: #dcf3ea; color: #059669; } .k-emerald .kpi-value { color: #059669; }
.k-red .kpi-ico { background: #fde8e8; color: #dc2626; }     .k-red .kpi-value { color: #dc2626; }
.k-amber .kpi-ico { background: #fef3e0; color: #f59e0b; }   .k-amber .kpi-value { color: #d97706; }
.k-orange .kpi-ico { background: #fdeadb; color: #ea580c; }  .k-orange .kpi-value { color: #ea580c; }
.k-violet .kpi-ico { background: #efe8fd; color: #7c3aed; }  .k-violet .kpi-value { color: #7c3aed; }
.k-teal .kpi-ico { background: #dff5f2; color: #0d9488; }    .k-teal .kpi-value { color: #0d9488; }
.k-grey .kpi-ico { background: #eef1f4; color: var(--faint); }    .k-grey .kpi-value { color: var(--head); }

/* a double card: two halves side by side, each with its own colour (Won | Lost, Stage slip | Close slip). It weighs
   1.7 units, not 2 - a half only needs a short amount and a count chip - and the row's lead card (Prev -> Now, a
   two-number value with its chip) takes the freed width at 1.6 units. */
.rpt-kpi.k-wide { flex: 1.7 1 0; flex-direction: row; padding: 0; }
.rpt-kpi.k-lead { flex: 1.6 1 0; }
.rpt-kpi .kpi-half { flex: 1 1 0; min-width: 0; overflow: hidden; display: flex; flex-direction: column; padding: 8px 9px 0; }
.rpt-kpi .kpi-half + .kpi-half { border-left: 1px solid var(--hair); }

/* ---- tab strip + result panel ---- */
.rpt .RadTabStrip { border-radius: 8px 8px 0 0; overflow: hidden; }
.rpt-panel { background: #fff; border: 1px solid var(--frame); border-top: none; border-radius: 0 0 8px 8px; padding: 12px 8px 14px; }
.rpt-title { font-weight: 500; color: var(--head); }
.rpt-sub { color: var(--faint); margin: 1px 0 12px; }
.rpt-empty { padding: 40px; text-align: center; color: var(--faint); }
.rpt-scroll { overflow-x: auto; }
.rpt-block { margin-bottom: 22px; }
.rpt-cap { font-weight: 500; color: var(--head); margin: 4px 2px 2px; }
.rpt-note { font-style: italic; color: var(--faint); margin: 0 2px 8px; }

/* chart caption with a switch on the right (the trend chart's Month / Quarter view, a chart's paging list) */
.rpt-chart-head { display: flex; align-items: flex-start; gap: 16px; }
.rpt-chart-head > .rpt-switch { margin-left: auto; flex: 0 0 auto; white-space: nowrap; margin-top: 4px; }
.rpt-chart-head > .rpt-switch + .rpt-switch { margin-left: 0; }

/* a dashboard's result panel without a tab strip above it, and its two-column chart rows */
.rpt-panel.rpt-panel-solo { border-top: 1px solid var(--frame); border-radius: 8px; padding: 14px 18px 16px; }   /* the cards' side air, not the grid panel's 8px (the owner, 17 Sep 2026) */
.rpt-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
.rpt-grid2 > .rpt-block { min-width: 0; overflow-x: auto; }

/* tool row above a grid: switches left, export right */
.rpt-tools { display: flex; align-items: center; gap: 18px; padding: 0 6px 8px; color: var(--muted); }
.rpt-tools .tools-export { margin-left: auto; }
.rpt-tools .tools-export a { color: var(--accent); text-decoration: none; display: inline-flex; align-items: center; gap: 5px; }
.rpt-tools .tools-export a:hover { text-decoration: underline; }

/* ---- HTML matrix (cross-tab) ---- */
table.rpt-matrix { border-collapse: collapse; width: 100%; }
table.rpt-matrix th, table.rpt-matrix td { border: 1px solid var(--hair); padding: 7px 10px; }
table.rpt-matrix thead th { background: var(--band); color: var(--faint); font-weight: 500; letter-spacing: .04em; text-transform: uppercase; text-align: right; white-space: nowrap; }
table.rpt-matrix thead th.rowhdr { text-align: left; }
table.rpt-matrix td.num, table.rpt-matrix th.num { text-align: right; font-variant-numeric: tabular-nums; }
table.rpt-matrix td.rowlbl { text-align: left; font-weight: 500; color: var(--head); white-space: nowrap; }
table.rpt-matrix .total { font-weight: 500; background: var(--tint); }
table.rpt-matrix tr.foot td { background: #f1f4f8; font-weight: 500; border-top: 2px solid #dbe1e8; }
table.rpt-matrix tr.sub td { background: #f6f8fa; font-weight: 500; border-top: 1px solid #dbe1e8; color: var(--head); }
table.rpt-matrix tbody tr:nth-child(even) td { background: var(--tint); }
table.rpt-matrix tbody tr:hover td { background: var(--hover); }
/* clickable cell: the deals behind the number */
table.rpt-matrix td.clk { cursor: pointer; }
table.rpt-matrix td.clk:hover { outline: 2px solid var(--accent); outline-offset: -2px; }
/* a compact matrix (the Sales Targets months, 17 Sep 2026): 11px, tighter cells - the S3 "matrix classes" item of the plan, pulled forward */
table.rpt-matrix.rpt-small { font-size: 11px; }
table.rpt-matrix.rpt-small th, table.rpt-matrix.rpt-small td { padding: 5px 8px; }
table.rpt-matrix.rpt-small thead th { font-size: 10px; }
/* heat: a cell's share of the largest cell in five emerald steps (the Sales Performance matrix, 17 Sep 2026 - the movement
   matrix's inline red ramp as classes); td.diag = a held / diagonal cell */
table.rpt-matrix td.heat-1 { background: rgba(5, 150, 105, .08); }
table.rpt-matrix td.heat-2 { background: rgba(5, 150, 105, .16); }
table.rpt-matrix td.heat-3 { background: rgba(5, 150, 105, .26); }
table.rpt-matrix td.heat-4 { background: rgba(5, 150, 105, .34); }
table.rpt-matrix td.heat-5 { background: rgba(5, 150, 105, .46); }
/* the row hover must not wash a heat cell out (its rule would win on specificity): the tint stays, a touch darker */
table.rpt-matrix tbody tr:hover td.heat-1 { background: rgba(5, 150, 105, .14); }
table.rpt-matrix tbody tr:hover td.heat-2 { background: rgba(5, 150, 105, .22); }
table.rpt-matrix tbody tr:hover td.heat-3 { background: rgba(5, 150, 105, .32); }
table.rpt-matrix tbody tr:hover td.heat-4 { background: rgba(5, 150, 105, .40); }
table.rpt-matrix tbody tr:hover td.heat-5 { background: rgba(5, 150, 105, .52); }
table.rpt-matrix td[class*="heat-"] { color: var(--head); font-weight: 500; }
table.rpt-matrix td.diag { background: #eef2f7; color: var(--muted); font-weight: 500; }   /* the token, not its old literal: the list greys moved on 30 Sep 2026 (Pages.css after :root) */
.rpt-legend .chip.heat { background: rgba(5, 150, 105, .38); border-color: rgba(5, 150, 105, .5); }
/* a quiet band under the info strip (the hub's "no targets yet" first-day screen): the amber meaning, a link at its end */
.rpt-notice { background: #fef3e0; border: 1px solid #f6dcb0; border-radius: 8px; padding: 8px 14px; margin: -4px 0 12px; color: #92600b; }
.rpt-notice a { color: var(--accent); font-weight: 500; }
/* the sample-data chip of the info strip: the amber tint, never the scope's violet */
.rpt-scope.rpt-scope-sample { background: #fef3e0; color: #d97706; }
/* ---- the hub's second round (the owner, 17 Sep 2026) ---- */
/* compact cards: two rows of five, no double cards, one line of value + chip + note, no spark; the help glyph at the head's right and its
   bubble must escape the card (overflow visible - the label keeps its own ellipsis) */
.rpt-kpis-compact .rpt-kpis { flex-wrap: wrap; gap: 8px; }
.rpt-kpis-compact .rpt-kpi { flex: 0 0 calc((100% - 32px) / 5); overflow: visible; padding: 8px 10px 9px; }
/* six cards in one row (the campaign page, the Marketing overview - the owner, 13 Oct 2026: "the extra card in the second should go up"); a
   tablet and a phone keep the rules below */
.rpt-kpis-compact.rpt-kpis-six .rpt-kpi { flex-basis: calc((100% - 40px) / 6); }
/* eight compact cards on one line (13 Oct 2026 - the campaign page and the marketing dashboard with eCommerce: the owner's "cards are wide while
   the content is little" - a second line of cards read as an afterthought) */
.rpt-kpis-compact.rpt-kpis-eight .rpt-kpi { flex-basis: calc((100% - 56px) / 8); }
/* seven (13 Oct 2026 - the Marketing Overview: the last 30 days' six and the opted out) */
.rpt-kpis-compact.rpt-kpis-seven .rpt-kpi { flex-basis: calc((100% - 48px) / 7); }
.rpt-kpis-compact .rpt-kpi .kpi-value { flex-wrap: nowrap; margin-top: 4px; }
.rpt-kpis-compact .rpt-kpi .kpi-spark:empty { display: none; }
/* the share pill apart (22 Oct 2026 - the Marketing campaign view and Results, the owner: "0 0%" read as one crowded figure): the number keeps
   the left, a note follows it, the share (the chip) sits at the card's right under the help glyph, centred on the number's line - opt-in by
   rpt-kpis-share on the cards' panel */
.rpt-kpis-share .rpt-kpi .kpi-value { align-items: center; gap: 4px 8px; }
.rpt-kpis-share .rpt-kpi .kpi-note { order: 2; }
.rpt-kpis-share .rpt-kpi .kpi-chip { order: 3; margin-left: auto; padding: 1px 7px; font-size: 10px; line-height: 15px; font-variant-numeric: tabular-nums; }
/* ...and the sparkline inside the card's padding, its gap all round (23 Oct 2026, the owner's arrows on the Results cards: the line ran into the
   card's edges and its square ends stuck out of the round corners - a compact card lets its overflow out for the help bubble) */
.rpt-kpis-share .rpt-kpi .kpi-spark { margin: 8px 0 0; padding-top: 0; }
.rpt-kpi .kpi-help { margin-left: auto; color: var(--faint); text-decoration: none; line-height: 1; cursor: help; flex: 0 0 auto; }
.rpt-kpi .kpi-help:hover { color: var(--accent); }
.rpt-kpi .kpi-help:after { margin: 0; width: auto; font-size: 12px; }
/* a help glyph that carries a data-tip: the bubble owns ::after (the text) and ::before (the arrow), so the site's ::after glyph vanished;
   the glyph is drawn by ::before here instead and that bubble simply has no arrow (every a.help[data-tip] under .rpt - the Targets page's too) */
.rpt a.help[data-tip]::before, .rpt-kpi a.kpi-help[data-tip]::before { content: "\f059"; font-family: FontAwesome; font-size: 12px; font-weight: normal; position: static; display: inline-block; width: auto; border: 0; transform: none; opacity: 1; visibility: visible; pointer-events: auto; margin: 0 0 0 4px; color: inherit; }
.rpt-kpi a.kpi-help[data-tip]::before { margin: 0; }
/* ...and the site's .help:after glyph goes: since 13 Oct 2026 the bubble is one body-level div (Pages.css section 9), so this ::after held
   only the site's "\f059" in the text font - a box after every help glyph ("?□", the owner's screenshot of the campaign page) */
.rpt a.help[data-tip]::after, .rpt-kpi a.kpi-help[data-tip]::after { content: none; }
/* a chart block never scrolls (the chart is sized to its column); the caption's help glyph sits after the words */
.rpt-grid2 > .rpt-block.rpt-chart, .rpt-block.rpt-chart { overflow: visible; }
.rpt-cap a.help, .rpt-title a.help, .rpt-tools a.help, .rpt-chart-head a.help { display: inline-block; color: var(--faint); text-decoration: none; vertical-align: middle; cursor: help; }
.rpt-cap a.help:hover, .rpt-title a.help:hover, .rpt-tools a.help:hover, .rpt-chart-head a.help:hover { color: var(--accent); }
.rpt-cap a.help:after, .rpt-title a.help:after, .rpt-tools a.help:after, .rpt-chart-head a.help:after { margin: 0 0 0 4px; width: auto; font-size: 12px; }
.rpt-tools .rpt-tool { display: inline-flex; align-items: center; gap: 2px; }
/* the quiet link beside the run button (the sample switch) */
.rpt-toolbar a.rpt-quiet { color: var(--muted); text-decoration: none; font-size: 12px; }
.rpt-toolbar td.rpt-run a.rpt-quiet { margin-right: 16px; }
.rpt-toolbar a.rpt-quiet:hover { color: var(--accent); }
/* a wide grid scrolls inside its panel, never past the page */
.rpt-scroll .RadGrid { min-width: 100%; }
/* a movement matrix fits the content width without scrolling: fixed layout, a smaller type size (up to 17 columns
   in a 1,200px content area), wrapping two-line labels, tighter padding. Numbers never wrap: a cell too narrow
   for its number overflows visibly rather than hiding digits. */
table.rpt-matrix.rpt-fit { table-layout: fixed; font-size: 10px; }
table.rpt-matrix.rpt-fit th, table.rpt-matrix.rpt-fit td { padding: 4px 3px; white-space: normal; overflow-wrap: normal; line-height: 1.25; }
table.rpt-matrix.rpt-fit td.num { white-space: nowrap; }
table.rpt-matrix.rpt-fit thead th { vertical-align: bottom; letter-spacing: 0; font-size: 9px; white-space: normal; }
table.rpt-matrix.rpt-fit th.rowhdr, table.rpt-matrix.rpt-fit td.rowlbl { width: 84px; }
.rpt .zero { color: #c7cfd8; }
.rpt-cell-opps { padding: 10px 14px; min-height: 60px; }
.rpt-legend { margin-top: 10px; color: var(--faint); }
.rpt-legend .chip { display: inline-block; width: 12px; height: 12px; border-radius: 3px; vertical-align: -2px; margin-right: 4px; background: #eef2f7; border: 1px solid #d7dee6; }

/* ---- RadGrid: master (group) rows ---- */
.rpt .RadGrid { border: none; font-variant-numeric: tabular-nums; }
.rpt .RadGrid .rgMasterTable > thead > tr > th.rgHeader,
.rpt .RadGrid .rgMasterTable > thead > tr > th.rgExpandCol {
    background: var(--band); border-bottom: 1px solid var(--line); color: var(--faint); font-weight: 500;
    letter-spacing: .04em; text-transform: uppercase; padding: 8px 6px !important; white-space: nowrap; line-height: 1.25;
}
.rpt .RadGrid .rgMasterTable > thead > tr > th.rgHeader a { color: var(--faint); }
.rpt .RadGrid .rgMasterTable > thead > tr > th:nth-child(2) { text-align: left; }
.rpt .RadGrid .rgMasterTable > tbody > tr.rpt-grp > td { text-align: right; background: #fff; border-bottom: 1px solid var(--hair); padding: 8px 6px; vertical-align: middle; }
.rpt .RadGrid .rgMasterTable > tbody > tr.rpt-grp.rpt-alt > td { background: var(--tint); }
.rpt .RadGrid .rgMasterTable > tbody > tr.rpt-grp:hover > td { background: var(--hover); }
.rpt .RadGrid .rgMasterTable > tbody > tr.rpt-grp > td.rgExpandCol { width: 22px; }
.rpt .RadGrid .rgMasterTable > tbody > tr.rpt-grp > td:nth-child(2) { text-align: left; font-weight: 500; color: var(--head); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rpt .RadGrid .rgMasterTable > tfoot td { background: #f1f4f8; font-weight: 500; border-top: 2px solid #dbe1e8; padding: 8px 6px; text-align: right; }
.rpt .RadGrid .rgGroupHeader td { text-align: left; }

/* two-line numeric cells: main number + a quiet second line */
.rpt .g-main { display: block; line-height: 1.2; }
.rpt .g-sub { display: block; color: var(--faint); line-height: 1.3; white-space: nowrap; }
.rpt .g-sub.pos { color: #16a34a; }
.rpt .g-sub.neg { color: #dc2626; }
.rpt .g-zero { color: #cfd8dc; }
.rpt .chg { display: inline-block; border-radius: 6px; padding: 2px 7px; font-weight: 500; white-space: nowrap; }
.rpt .chg.pos { background: #e6f6ec; color: #16a34a; }
.rpt .chg.neg { background: #fde8e8; color: #dc2626; }
.rpt .cnt { display: inline-block; min-width: 26px; padding: 3px 6px; border-radius: 6px; text-align: center; font-weight: 500; }
.rpt .c-blue { background: #e8f0fe; color: #3b82f6; }
.rpt .c-green { background: #e6f6ec; color: #16a34a; }
.rpt .c-emerald { background: #dcf3ea; color: #059669; }
.rpt .c-red { background: #fde8e8; color: #dc2626; }
.rpt .c-amber { background: #fef3e0; color: #d97706; }
.rpt .c-orange { background: #fdeadb; color: #ea580c; }
.rpt .c-violet { background: #efe8fd; color: #7c3aed; }
.rpt .c-teal { background: #dff5f2; color: #0d9488; }
.rpt .c-grey { background: #eceff1; color: #607d8b; }

/* ---- RadGrid: detail rows (the .d-* cell vocabulary lives in Pages.css) ---- */
.rpt .rgDetailTable { background: #fff; }
.rpt .rgDetailTable .rgHeader { background: #fff !important; color: var(--faint); letter-spacing: .05em; text-transform: uppercase; border-bottom: 1px solid var(--line); padding: 6px 12px !important; font-weight: 500; }
.rpt .rgDetailTable td { vertical-align: top; line-height: 1.35; padding: 8px 12px; border-bottom: 1px solid var(--hair); text-align: left; }
.rpt .rgDetailTable tr.rgAltRow td { background: var(--tint); }
.rpt .rgDetailTable tr:hover td { background: var(--hover); }
.rpt .rgDetailTable tr.rpt-out td { background: #fbfaff; }
.rpt .rgDetailTable tr.rpt-out .d-title, .rpt .rgDetailTable tr.rpt-out .d-sub { color: var(--faint); }
.rpt .rgDetailTable td.rpt-num, .rpt .rgDetailTable th.rpt-num { text-align: right; }

/* ---- movement pills: the same word, glyph and colour everywhere ---- */
.mv-pill { display: inline-block; padding: 0 8px; border-radius: 10px; font-weight: 500; white-space: nowrap; }
.mv-New { background: #e8f0fe; color: #3b82f6; }
.mv-Advanced { background: #e6f6ec; color: #16a34a; }
.mv-Slipped { background: #fef3e0; color: #d97706; }
.mv-Won { background: #dcf3ea; color: #059669; }
.mv-Lost { background: #fde8e8; color: #dc2626; }
.mv-Cancelled { background: #eceff1; color: #607d8b; }
.mv-OnHold { background: #dff5f2; color: #0d9488; }
.mv-Unchanged { background: #eef1f4; color: var(--faint); }
.mv-MovedOut { background: #efe8fd; color: #7c3aed; }

/* ---- report guide (RadWindow content) ---- */
.rpt-guide { padding: 14px 20px 20px; line-height: 1.55; }
.rpt-guide h3 { font-weight: 500; color: var(--head); margin: 18px 0 6px; padding-bottom: 4px; border-bottom: 1px solid var(--line); text-transform: uppercase; letter-spacing: .04em; }
.rpt-guide h3:first-child { margin-top: 0; }
.rpt-guide p { margin: 4px 0 8px; }
.rpt-guide table { border-collapse: collapse; width: 100%; margin: 4px 0 8px; }
.rpt-guide td { padding: 6px 8px; border-bottom: 1px solid var(--hair); vertical-align: top; }
.rpt-guide td.k { width: 170px; white-space: nowrap; font-weight: 500; color: var(--head); }
.rpt-guide tr:nth-child(even) td { background: var(--tint); }
.rpt-guide .mv-pill { margin-right: 4px; }
.rpt-guide .note { color: var(--faint); }


/* ---- a hub page's sections and tiles (13 Oct 2026 - the Marketing Overview, the owner's "one place" for the section): a caption line over
   each section (.rpt-section: the name, a muted sentence, a link at its right), then a row of equal tiles on the KPI card's frame that wraps
   (.rpt-tiles > .rpt-tile). A tile = a head (.rpt-tile-ico, a glyph in a meaning tint by the tile's k-* class; .rpt-tile-name; a state
   pill), its lines (.rpt-tile-line, .rpt-tile-sub) and its links at the bottom (.rpt-tile-links). A tile that IS a link (a tool,
   a.rpt-tile.rpt-tile-go) holds the glyph, the name over its sentence (.rpt-tile-text) and its count at the right (.rpt-tile-count, the KPI
   number's size; .is-alert amber) ---- */
.rpt-section { display: flex; align-items: baseline; flex-wrap: wrap; gap: 2px 10px; margin: 2px 2px 8px; }
.rpt-section > b { font-weight: 500; color: var(--head); }
.rpt-section > span { flex: 1 1 auto; color: var(--muted); }
.rpt-section > a { margin-left: auto; color: var(--accent); text-decoration: none; }
.rpt-section > a:hover { text-decoration: underline; }
.rpt-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 8px; margin-bottom: 16px; }
.rpt-tile { display: flex; flex-direction: column; min-width: 0; padding: 12px 14px; background: #fff; border: 1px solid var(--frame); border-radius: 10px; box-shadow: 0 1px 2px rgba(20,30,45,.04); color: var(--ink); }
.rpt-tile-head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.rpt-tile-ico { flex: 0 0 36px; width: 36px; height: 36px; border-radius: 9px; display: inline-flex; align-items: center; justify-content: center; font-size: 18px; background: #eef1f4; color: var(--ink); }
/* the glyph is an <i class="fa">: font-awesome.min.css is linked AFTER the bundle, so its base rule (display inline-block, font-size inherit) beat the line above
   with the same specificity - the glyph sat in the top-left corner of its square at the page's font size (the owner, 21 Oct 2026: "we need to fix the icons").
   One set: the glyph centred, 36 px / 18 px on a tool tile, 42 px / 20 px on a channel card, the ink or the tint's colour at full opacity. */
.rpt-tile-ico.fa { display: inline-flex; align-items: center; justify-content: center; line-height: 1; font-size: 18px; }
.rpt-tile-head .rpt-tile-ico.is-lg, .rpt-tile-head .rpt-tile-ico.is-lg.fa { flex-basis: 42px; width: 42px; height: 42px; border-radius: 10px; font-size: 20px; }   /* a channel card's glyph - icon, name, state at one glance (the owner, 19 Oct 2026: the Lead Sources icons were too small) */
.rpt-tile-name { flex: 1 1 auto; min-width: 0; font-size: 13px; font-weight: 500; color: var(--head); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rpt-tile-line { margin: 0 0 2px; line-height: 1.5; overflow-wrap: anywhere; }
.rpt-tile-sub { margin: 0; font-size: 11px; line-height: 1.5; color: var(--muted); overflow-wrap: anywhere; }
.rpt-tile-links { display: flex; flex-wrap: wrap; gap: 4px 16px; margin-top: auto; padding-top: 10px; font-size: 11px; }
.rpt-tile-links a { color: var(--accent); text-decoration: none; }
.rpt-tile-links a:hover { text-decoration: underline; }
.rpt-tile.k-blue .rpt-tile-ico { background: #e8f0fe; color: #3b82f6; }
.rpt-tile.k-green .rpt-tile-ico { background: #e6f6ec; color: #16a34a; }
.rpt-tile.k-emerald .rpt-tile-ico { background: #dcf3ea; color: #059669; }
a.rpt-tile.rpt-tile-go { flex-direction: row; align-items: center; gap: 12px; text-decoration: none; }
a.rpt-tile.rpt-tile-go:hover { border-color: var(--accent-line); }
a.rpt-tile.rpt-tile-go .rpt-tile-ico { background: var(--accent-soft); color: var(--accent); }
.rpt-tile-text { flex: 1 1 auto; min-width: 0; }
.rpt-tile-text b { display: block; font-size: 13px; font-weight: 500; color: var(--head); }
.rpt-tile-text span { display: block; font-size: 11px; line-height: 1.4; color: var(--muted); }
.rpt-tile-count { flex: 0 0 auto; font-size: 16px; font-weight: 500; letter-spacing: -.02em; font-variant-numeric: tabular-nums; color: var(--head); }
a.rpt-tile.is-alert .rpt-tile-count { color: #d97706; }

/* ---- phone / tablet (23 Sep 2026, docs/RESPONSIVE-V2.md R-9): the KPI strip wraps - four per row on a tablet, two on a phone, a wide
   (paired) card takes two slots then the whole row. Charts and report grids follow in S3. ---- */
@media (max-width: 1023px) {
    .rpt-kpis, .rpt-kpis-compact .rpt-kpis { flex-wrap: wrap; }
    .rpt-kpi, .rpt-kpi.k-lead, .rpt-kpis-compact .rpt-kpi { flex: 1 1 calc(25% - 6px); }
    .rpt-kpi.k-wide { flex: 1 1 calc(50% - 4px); }
    /* the six / seven / eight on one line (13 Oct 2026) out-ranked the two rules above - seven cards of 40px on a phone (the owner, 23 Oct 2026) */
    .rpt-kpis-compact:is(.rpt-kpis-six, .rpt-kpis-seven, .rpt-kpis-eight) .rpt-kpi { flex: 1 1 calc(25% - 6px); }
}
@media (max-width: 640px) {
    .rpt-kpi, .rpt-kpi.k-lead, .rpt-kpis-compact .rpt-kpi { flex: 1 1 calc(50% - 4px); }
    .rpt-kpi.k-wide { flex: 1 1 100%; }
    .rpt-kpis-compact:is(.rpt-kpis-six, .rpt-kpis-seven, .rpt-kpis-eight) .rpt-kpi { flex: 1 1 calc(50% - 4px); }
}

/* ---- phone / tablet (S3 Targets, 23 Sep 2026): a matrix (table.rpt-matrix - the Sales Targets months, the pipeline analytics) has a real
   thead and tbody, so it scrolls inside its panel instead of the tbody trick of Pages.css section 11; the subject column sticks at the left ---- */
@media (max-width: 1023px) {
    div:has(> table.rpt-matrix) { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    /* no floor: an auto-layout matrix grows past its panel by itself when its nowrap cells need it (the twelve months) and stays put when it fits (the training
       dashboard's tables, S3 - 23 Sep 2026); only the fixed-layout movement matrix (.rpt-fit) needs one. Only the FIRST column sticks - a table may mark
       several header cells .rowhdr */
    table.rpt-matrix.rpt-fit { min-width: 760px; }
    table.rpt-matrix th.rowhdr:first-child, table.rpt-matrix td.rowlbl:first-child { position: sticky; left: 0; z-index: 1; background: var(--card); box-shadow: 1px 0 0 var(--hair); }
    table.rpt-matrix thead th.rowhdr:first-child { background: var(--band); }
    table.rpt-matrix tbody tr:nth-child(even) td.rowlbl:first-child { background: var(--tint); }
    table.rpt-matrix tr.foot td.rowlbl:first-child { background: #f1f4f8; }
    table.rpt-matrix tr.sub td.rowlbl:first-child { background: #f6f8fa; }
}

/* ---- phone / tablet (S3 Sales Performance, 23 Sep 2026, R-11 in part): the two-chart row becomes one chart per row under 1024px; on a phone
   a chart block scrolls sideways (GenericChartControl draws every chart at a fixed pixel width - 600 by default - and a fluid chart needs the
   control to emit a percentage width and repaint on resize: a shared-control change, deferred to its own session) ---- */
@media (max-width: 1023px) {
    .rpt-grid2 { grid-template-columns: 1fr; }
    .rpt-chart-head { flex-wrap: wrap; }
    /* any block holding a chart scrolls sideways once the chart is wider than the screen (the dashboard's full-width rows are drawn at ~1100px, wider than a tablet) */
    .rpt-block:has(.RadHtmlChart), .rpt-grid2 > .rpt-block:has(.RadHtmlChart) { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .rpt-block .RadHtmlChart { max-width: none; }
}

/* ---- phone / tablet (S3 Pipeline Analytics, 23 Sep 2026): a report page's RadGrid (the deals drill-down; the training dashboard's tables) scrolls
   sideways inside its own box with an 800px floor - the master table keeps the column widths of its markup instead of squeezing ---- */
@media (max-width: 1023px) {
    .rpt .RadGrid { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .rpt .RadGrid .rgMasterTable { min-width: 800px; }
}

/* ==========================================================================
   CorporateStack V2 top bar (#menuArea.tb2) + profile band (.tn2) + shared popovers (.tb2-pop)
   Bundled with every file in ~/StyleSheets by Global.asax - no link tag, no ?v=.
   The band colour still comes from the tenant theme (#menuArea in Themes/*.css);
   everything else is defined here. Bar selectors are scoped to .tb2 so the old
   bar is untouched while both masters coexist; popovers are shared by the bar and
   the band, so .tb2-pop is not scoped.

   Tokens: ink #1f2933  ink-2 #4a5866  muted #7b8794  line #e3e7ec  hover #f1f3f7
           badges: messages #22a06b  tasks #e8873a  todo #f13c6e  warnings #d9a520  notifications #2f9ec4
   ========================================================================== */

/* min-width = .siteWidth: when the page is zoomed and scrolls sideways, the band still covers the whole width */
/* NOT positioned on purpose: #menuArea carries z-index 4999 in 02-layout.css, and a positioned band
   would become a stacking context above RadWindow's default z-index (modals under the bar). The
   dropdown panels and popovers position against .tb2-root / .tb2-right / .tb2-anchor instead. */
.tb2 { box-sizing: border-box; }   /* the 1136 minimum lives in the min-width: 1024px block at the end of this file since 23 Sep 2026 */
.tb2 .tb2-bar { display: flex; align-items: center; justify-content: space-between; height: 54px; }

/* ---- module navigation ---- */
.tb2 .tb2-nav { flex: 1 1 auto; min-width: 0; height: 54px; }
.tb2 .tb2-roots { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: nowrap; align-items: stretch; height: 54px; }
.tb2 .tb2-root { position: relative; display: flex; align-items: stretch; }
.tb2 .tb2-link {
    display: flex; align-items: center; gap: 6px;
    padding: 0 11px; height: 54px;
    color: #fff; font-size: 13px; font-weight: 400; letter-spacing: .15px; text-decoration: none; white-space: nowrap;
    border-bottom: 3px solid transparent; box-sizing: border-box;
    transition: background-color .12s ease;
}
.tb2 .tb2-link:hover, .tb2 .tb2-root.tb2-open > .tb2-link { background: rgba(255,255,255,.13); color: #fff; }
.tb2 .tb2-root.tb2-active > .tb2-link { border-bottom-color: rgba(255,255,255,.9); }
.tb2 .tb2-root-ico i { font-size: 17px; line-height: 1; }
.tb2 .tb2-root-ico i:before { margin: 0; }
.tb2 .tb2-root:first-child .tb2-link { padding-left: 4px; }

/* dropdown panel */
.tb2 .tb2-panel {
    position: absolute; left: 0; top: 54px; z-index: 5001;
    min-width: 236px; max-width: 320px; padding: 6px;
    background: #fff; border-radius: 0 0 12px 12px; box-shadow: 0 14px 34px rgba(31,41,51,.22), 0 1px 0 rgba(0,0,0,.06);
    display: none;
}
.tb2 .tb2-root.tb2-open > .tb2-panel { display: block; animation: tb2-drop .12s ease-out; }
@keyframes tb2-drop { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

.tb2-list { list-style: none; margin: 0; padding: 0; }
.tb2-item { position: relative; }
.tb2-item > a {
    display: flex; align-items: center; gap: 9px;
    padding: 8px 12px 8px 9px; border-radius: 7px;
    color: #1f2933; font-size: 13px; line-height: 1.25; text-decoration: none; white-space: nowrap;
}
.tb2-item > a:hover, .tb2-item.tb2-open > a { background: #f1f3f7; color: #1f2933; text-decoration: none; }
.tb2-ico { width: 18px; flex: 0 0 18px; text-align: center; color: #7b8794; font-size: 13px; }
.tb2-ico i:before { margin: 0; }
.tb2-ico i.red, .tb2-ico .red { color: #d6453d; }
.tb2-txt { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; }
.tb2-more { color: #9aa7b4; font-size: 13px; }
.tb2-sep { height: 1px; background: #e3e7ec; margin: 5px 8px; }

/* sub-groups fly out to the right (hover), or open on click */
.tb2 .tb2-panel .tb2-sub {
    position: absolute; left: 100%; top: -6px; z-index: 5002;
    min-width: 220px; padding: 6px; margin-left: 2px;
    background: #fff; border-radius: 10px; box-shadow: 0 10px 28px rgba(31,41,51,.2), 0 0 0 1px rgba(0,0,0,.04);
    display: none;
}
.tb2 .tb2-panel .tb2-has-sub:hover > .tb2-sub, .tb2 .tb2-panel .tb2-has-sub.tb2-open > .tb2-sub { display: block; }
.tb2 .tb2-panel .tb2-has-sub > a:after { content: ""; position: absolute; right: -8px; top: 0; bottom: 0; width: 10px; }

/* overflow (24 Sep 2026): the roots that do not fit the bar are hidden and listed under a "More" tab (TopBarV2.js fitNav).
   The tab sits next to the icons, so its panel and every fly-out in it open to the LEFT. */
.tb2 .tb2-root.tb2-spill { display: none; }
.tb2 .tb2-overflow .tb2-link > .fa { font-size: 12px; opacity: .8; }
.tb2 .tb2-overflow > .tb2-panel { left: auto; right: 0; }
.tb2 .tb2-overflow .tb2-panel .tb2-sub { left: auto; right: 100%; margin: 0 2px 0 0; }
.tb2 .tb2-overflow .tb2-panel .tb2-has-sub > a:after { right: auto; left: -8px; }

/* ---- right cluster ---- */
.tb2 .tb2-right { position: relative; display: flex; align-items: center; gap: 0; height: 54px; flex: 0 0 auto; }
.tb2 .tb2-icons { display: flex; align-items: center; gap: 0; }

.tb2 .tb2-icon, .tb2 .tb2-avatar {
    position: relative; display: inline-flex; align-items: center; justify-content: center;
    width: 36px; height: 36px; margin: 0; padding: 0; border: 0; border-radius: 50%;
    background: transparent; color: #fff; cursor: pointer; font: inherit;
    transition: background-color .12s ease;
}
.tb2 .tb2-icon:hover, .tb2 .tb2-icon[aria-expanded="true"] { background: rgba(255,255,255,.16); }
.tb2 .tb2-icon:focus-visible, .tb2 .tb2-avatar:focus-visible { outline: 2px solid rgba(255,255,255,.7); outline-offset: 1px; }
.tb2 .tb2-icon i { font-size: 17px; line-height: 1; }
.tb2 .tb2-icon i:before { margin: 0; width: auto; }

.tb2 .tb2-badge {
    position: absolute; top: 1px; right: -3px;
    min-width: 17px; height: 17px; padding: 0 5px; box-sizing: border-box;
    border-radius: 9px; border: 2px solid rgba(0,0,0,.14);
    font-size: 10.5px; font-weight: 600; line-height: 13px; color: #fff; text-align: center;
    font-variant-numeric: tabular-nums;
}
.tb2-b-messages { background: #22a06b; }
.tb2-b-tasks { background: #e8873a; }
.tb2-b-todo { background: #f13c6e; }
.tb2-b-warnings { background: #d9a520; }
.tb2-b-notifications { background: #2f9ec4; }

.tb2 .tb2-avatar { margin-left: 8px; width: 40px; height: 40px; }
.tb2 .tb2-avatar img { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; display: block; }
.tb2 .tb2-avatar:hover, .tb2 .tb2-avatar[aria-expanded="true"] { background: rgba(255,255,255,.16); }

/* translate + quick-activity carried over from the old bar: neutralise their floats / line-heights */
.tb2 .tb2-translate ul.nav { float: none !important; margin: 0 4px 0 0 !important; line-height: 54px; }
.tb2 .tb2-translate:empty, .tb2 .tb2-act:empty { display: none; }
.tb2 .tb2-act a { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; color: #fff; padding: 0 !important; margin: 0; }
.tb2 .tb2-act a:hover { background: rgba(255,255,255,.16); color: #fff !important; }
.tb2 .tb2-act a:before { margin: 0; font-size: 16px; }

/* ---- popovers (shared by the bar and the band) ---- */
.tb2-pop {
    position: absolute; right: 0; top: 56px; z-index: 5003;
    width: 380px; max-width: calc(100vw - 24px);
    background: #fff; border-radius: 12px; box-shadow: 0 16px 40px rgba(31,41,51,.24), 0 0 0 1px rgba(0,0,0,.05);
    color: #1f2933; text-align: left; line-height: 1.35;
    animation: tb2-drop .12s ease-out;
}
.tb2-pop[hidden] { display: none; }
.tb2-anchor { position: relative; }
.tb2-pop.tb2-pop-below { right: auto; left: 0; top: calc(100% + 6px); width: 360px; }
.tb2-pop-head {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    padding: 11px 14px; border-bottom: 1px solid #e3e7ec;
    font-size: 13px; font-weight: 600; color: #1f2933;
}
.tb2-pop-tools { display: flex; align-items: center; gap: 12px; font-size: 11.5px; font-weight: 400; }
.tb2-pop-tools a { color: #4a5866; text-decoration: none; }
.tb2-pop-tools a:hover { color: #1f2933; text-decoration: underline; }
.tb2-pop-tools a[data-tb2-refresh] { color: #9aa7b4; }
.tb2-pop-tools a i:before { margin: 0; }
.tb2-pop-body { max-height: 62vh; overflow: auto; font-size: 12.5px; }
.tb2-pop-body:empty { min-height: 60px; }
.tb2-empty { padding: 26px 14px; text-align: center; color: #7b8794; font-size: 12px; }
.tb2-noimg { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background: #e9edf1; color: #9aa7b4; font-size: 17px; }
.tb2-noimg i:before { margin: 0; }

/* the web methods return their own .pop-box markup: keep its rows, drop the second header and fixed height */
.tb2-pop-body .pop-box { width: auto !important; }
.tb2-pop-body .pop-box > h3 { display: none; }
.tb2-pop-body .pop-box .pop-content { height: auto; max-height: none; margin: 0; min-width: 0; overflow: visible; }
.tb2-pop-body .pop-box .pop-content h4 { margin: 8px 0 2px; padding: 7px 14px; background: #f4f6f8; color: #4a5866; font-size: 10.5px; letter-spacing: .5px; text-transform: uppercase; font-weight: 500; }
.tb2-pop-body .pop-box .pop-content h4:first-child { margin-top: 0; }
.tb2-pop-body .pop-box .item { padding: 9px 14px; border-bottom: 1px solid #eef1f4; color: #1f2933; font-size: 12.5px; }
.tb2-pop-body .pop-box .item:last-child { border-bottom: 0; }
.tb2-pop-body .pop-box .item:hover { background: #f1f3f7; }
.tb2-pop-body .pop-box .bottom-link { position: sticky; bottom: 0; margin: 0; padding: 9px 0; border-top: 1px solid #e3e7ec; border-radius: 0 0 12px 12px; background: #fafafa; }
.tb2-pop-body .pop-box .bottom-link a { color: #4a5866; text-decoration: none; padding: 3px 7px; border-radius: 9px; }
.tb2-pop-body .pop-box .bottom-link a.active-schedule { background: #1f2933; color: #fff; }
.tb2-pop-body > p { padding: 22px 14px; margin: 0; text-align: center; color: #7b8794; }
/* celebrations (GetBirthdays / GetAnniversaries): banner image centred, one row per person */
.tb2-pop-body table { margin: 0; width: 100%; border-collapse: collapse; }
.tb2-pop-body table td { vertical-align: top; padding: 8px 0 4px; }
.tb2-pop-body > img, .tb2-pop-body td > img { display: block; max-width: 150px; height: auto; margin: 10px auto 2px; }
.tb2-pop-body > br { display: none; }
.tb2-pop-body .super-text { display: block; font-size: 12px; font-weight: 600; color: #4a5866; padding: 10px 14px 2px; margin: 0 !important; }
.tb2-pop-body .margin-bottom-10 { display: flex; align-items: center; gap: 10px; padding: 6px 14px; margin: 0 !important; }
.tb2-pop-body .margin-bottom-10 > img, .tb2-pop-body .margin-bottom-10 > .tb2-noimg { width: 40px !important; height: 40px !important; flex: 0 0 40px; margin: 0 !important; }
.tb2-pop-body .margin-bottom-10 > div { line-height: 1.3 !important; margin: 0 !important; }
.tb2-pop-body .margin-bottom-10:last-child { padding-bottom: 12px; }

/* to-do rows (formatJson.js): date chip left, text right - no float gaps, no 25px margins */
.tb2-pop-body .pop-box .pop-content .item { display: grid; grid-template-columns: 58px 1fr; column-gap: 10px; row-gap: 1px; align-items: start; padding: 8px 14px; }
.tb2-pop-body .pop-box .pop-content .item > div:first-child { grid-row: 1 / span 4; margin: 0 !important; line-height: 1.15; }
.tb2-pop-body .pop-box .pop-content .item > div:first-child .floatLeft { float: none; font-size: 13px !important; font-weight: 500 !important; white-space: nowrap; }
.tb2-pop-body .pop-box .pop-content .item > div:first-child .time-big { float: none; font-size: 10.5px; color: #7b8794; margin-top: 2px; }
.tb2-pop-body .pop-box .pop-content .item > .clear { display: none; }
.tb2-pop-body .pop-box .pop-content .item > .label { font-weight: 600; font-size: 12.5px; }
.tb2-pop-body .pop-box .pop-content .item > .label:empty { display: none; }
.tb2-pop-body .pop-box .pop-content .item > .comment { color: #4a5866; font-size: 12px; }
.tb2-pop-body .pop-box .pop-content .item > p { margin: 1px 0 0; font-size: 11px; color: #7b8794; line-height: 1.3; }
.tb2-pop-body .pop-box .pop-content .item > p:empty { display: none; }
/* notification rows (NotificationsWebService.AppendNotification, a.item): the grid above puts the count badge in its first column; a row
   without a badge - a general notification: title, <br>, a small line - would squeeze its title into that 58px column word by word, so
   it runs the full width (12 Oct 2026) */
.tb2-pop-body .pop-box .pop-content a.item:not(:has(> .icon)) { display: block; line-height: 1.35; }
.tb2-pop-body .pop-box .pop-content a.item:not(:has(> .icon)) > small.comment { display: block; margin-top: 2px; font-size: 11.5px; color: #7b8794; }

/* messages (GetRecentMessages): photo | name, text, when */
.tb2-pop-body .item.msg-holder { display: flex; align-items: flex-start; gap: 10px; padding: 9px 14px; border-bottom: 1px solid #eef1f4; cursor: pointer; }
.tb2-pop-body .item.msg-holder:last-child { border-bottom: 0; }
.tb2-pop-body .item.msg-holder:hover { background: #f1f3f7; }
.tb2-pop-body .item.msg-holder .col-img { position: relative; flex: 0 0 40px; float: none !important; margin: 0 !important; padding: 0 !important; line-height: 0; }
.tb2-pop-body .item.msg-holder .col-img img { width: 40px !important; height: 40px !important; border-radius: 50%; object-fit: cover; display: block; }
.tb2-pop-body .item.msg-holder .col-img .online-badge { position: absolute; right: 0; bottom: 0; width: 11px; height: 11px; border-radius: 50%; border: 2px solid #fff; box-sizing: border-box; }
.tb2-pop-body .item.msg-holder .col-img .online-badge.Online { background: #22a06b; }
.tb2-pop-body .item.msg-holder .col-img .online-badge.Away { background: #d97706; }
.tb2-pop-body .item.msg-holder .col-img .online-badge.Offline { background: #9aa7b4; }
.tb2-pop-body .item.msg-holder .col-txt { flex: 1 1 auto; min-width: 0; font-size: 12.5px; line-height: 1.35; color: #1f2933; }
.tb2-pop-body .item.msg-holder .col-txt b { font-weight: 600; }
.tb2-pop-body .item.msg-holder .col-txt .comment { color: #7b8794; margin-top: 1px; }
.tb2-pop-body .item.msg-holder .col-txt br + * { display: block; }

/* loading dots */
.tb2-loading { display: flex; gap: 5px; justify-content: center; padding: 26px 0; }
.tb2-loading i { width: 7px; height: 7px; border-radius: 50%; background: #c5ccd3; animation: tb2-dot 1s infinite ease-in-out; }
.tb2-loading i:nth-child(2) { animation-delay: .15s; }
.tb2-loading i:nth-child(3) { animation-delay: .3s; }
@keyframes tb2-dot { 0%, 80%, 100% { opacity: .35; transform: scale(.8); } 40% { opacity: 1; transform: scale(1); } }

/* ---- user card + user menu ---- */
.tb2-pop-user { width: 300px; }
.tb2-user-card {
    display: flex; align-items: center; gap: 12px;
    padding: 14px 14px 12px; border-bottom: 1px solid #e3e7ec; border-radius: 12px 12px 0 0;
    background: #f7f8fa; color: #1f2933; text-decoration: none;
}
.tb2-user-card:hover { background: #eef1f4; text-decoration: none; }
.tb2-user-card img { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; flex: 0 0 48px; }
.tb2-user-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.tb2-user-text b { font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tb2-user-text small { font-size: 11.5px; color: #7b8794; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* birthday / anniversary rows (rendered by TopBarV2.js from the celebrations op) */
.tb2-cel-head { display: flex; align-items: center; gap: 8px; padding: 8px 14px; background: #f4f6f8; color: #4a5866; font-size: 11px; letter-spacing: .4px; text-transform: uppercase; font-weight: 500; }
.tb2-cel-head i { color: #1f9d61; font-size: 13px; }
.tb2-cel-head i:before { margin: 0; }
.tb2-cel { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-bottom: 1px solid #f1f3f7; }
.tb2-cel:last-child { border-bottom: 0; }
.tb2-cel img, .tb2-cel .tb2-noimg { width: 42px; height: 42px; border-radius: 50%; object-fit: cover; flex: 0 0 42px; display: block; }
.tb2-cel .tb2-noimg { display: inline-flex; font-size: 18px; }
.tb2-cel-txt { flex: 1; min-width: 0; line-height: 1.3; }
.tb2-cel-txt b { display: block; font-weight: 500; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tb2-cel-txt small { display: block; color: #7b8794; font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tb2-cel-txt em { display: block; font-style: normal; color: #1f9d61; font-size: 11px; margin-top: 2px; }
.tb2-cel-msg { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; color: #fff; text-decoration: none; padding: 5px 11px; border-radius: 12px; background: var(--csw-theme, #4a5866); white-space: nowrap; }
.tb2-cel-msg i:before { margin: 0; }
.tb2-cel-msg:hover { color: #fff; text-decoration: none; filter: brightness(1.08); }

.tb2-chip { display: inline-block; align-self: flex-start; margin-top: 3px; padding: 1px 7px; border-radius: 9px; background: #2f6fd6; color: #fff; font-size: 10px; font-style: normal; letter-spacing: .3px; }
.tb2-chip-warn { background: #d97706; }

.tb2-user-nav { padding: 6px; max-height: 60vh; overflow: auto; border-radius: 0 0 12px 12px; }
.tb2-user-nav .tb2-item > a { padding: 8px 10px; }
.tb2-user-nav .tb2-inline { display: none; margin: 2px 0 4px 18px; padding-left: 8px; border-left: 2px solid #e3e7ec; }
.tb2-user-nav .tb2-has-sub.tb2-open > .tb2-inline { display: block; }
.tb2-user-nav .tb2-has-sub > a .tb2-more { transition: transform .15s ease; }
.tb2-user-nav .tb2-has-sub.tb2-open > a .tb2-more { transform: rotate(180deg); }
.tb2-user-nav .tb2-inline .tb2-item > a { padding: 6px 8px; font-size: 12.5px; }

/* ==========================================================================
   Profile band (TopNewV2): logo | identity | weather | today | attendance
   ========================================================================== */
/* slim band: every cell is a vertically centred column; the attendance cell exists only on HR tenants (.tn2-4 = four cells) */
.tn2 { display: grid; grid-template-columns: 170px 1.3fr 230px 220px 200px; align-items: stretch; min-height: 92px; margin: -40px 0 14px; }
.tn2 .tn2-cell { position: relative; padding: 12px 20px; min-width: 0; display: flex; flex-direction: column; justify-content: center; }
/* dividers drawn with a gap top and bottom, whatever the cell's own height */
.tn2 .tn2-cell:before { content: ""; position: absolute; left: 0; top: 14px; bottom: 14px; width: 1px; background: #e3e7ec; }
.tn2 .tn2-cell:first-child:before { display: none; }
.tn2 #cityName { display: inline-block; font-size: 11px !important; font-weight: 400 !important; color: #7b8794 !important; letter-spacing: .5px; text-transform: uppercase; line-height: 16px; margin: 0 !important; vertical-align: middle; }
/* the attendance control writes an unclosed <b> ("<b>You are on leave"); the parser spills a stray <b> after the cell - keep it out of the grid */
.tn2 > :not(.tn2-cell) { display: none; }

.tn2 .tn2-logo { align-items: center; }
.tn2 .tn2-logo img { max-height: 56px; max-width: 130px; }

.tn2 .tn2-me { flex-direction: row; align-items: center; gap: 14px; }
.tn2 .tn2-photo img { width: 60px; height: 60px; border-radius: 50%; object-fit: cover; display: block; }
.tn2 .tn2-id { min-width: 0; }
.tn2 .tn2-greet { font-size: 11px; color: #7b8794; letter-spacing: .3px; text-transform: uppercase; }
.tn2 .tn2-name { font-size: 14px; font-weight: 600; color: #1f2933; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tn2 .tn2-lock { margin-left: 8px; color: #9aa7b4; font-size: 12px; text-decoration: none; }
.tn2 .tn2-lock:hover { color: #4a5866; }
.tn2 .tn2-lock i:before { margin: 0; }
.tn2 .tn2-title { font-size: 12px; color: #4a5866; margin-top: 1px; }
.tn2 .tn2-chips { margin-top: 5px; display: flex; gap: 6px; }
.tn2 .tn2-chips .tb2-chip { margin-top: 0; }

/* weather: Weather.ascx is float-based (temperature left, Skycons canvas right) and a flex column
   kills the floats - the cell is a 2-column grid instead: header row across, then description +
   temperature on the left and the icon on the right, the whole block vertically centred.
   (Weather.ascx starts with a <style> element, so :first-child never matched the header div.) */
.tn2 .tn2-weather { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto auto; align-content: center; column-gap: 12px; color: #63767e; }
.tn2 .tn2-weather > div:first-of-type { grid-column: 1 / -1; grid-row: 1; display: flex; align-items: center; gap: 8px; line-height: 16px; margin-bottom: 3px; }
.tn2 .tn2-weather > div:first-of-type a { font-size: 12px; margin: 0 !important; line-height: 1; }
.tn2 .tn2-weather > #desc { grid-column: 1; grid-row: 2; font-size: 11px; font-weight: 500; letter-spacing: .3px; line-height: 14px; color: #7b8794; }
.tn2 .tn2-weather > .floatLeft { float: none !important; grid-column: 1; grid-row: 3; margin: 0 !important; }
.tn2 .tn2-weather > .floatRight { float: none !important; grid-column: 2; grid-row: 2 / 4; align-self: center; margin: 0 !important; line-height: 0; }
.tn2 .tn2-weather > .clear { display: none; }
.tn2 .tn2-weather .actual-temp { font-size: 28px !important; line-height: 32px; margin: 0 !important; letter-spacing: -1px; white-space: nowrap; }
.tn2 .tn2-weather .actual-temp .deg { font-size: 16px; top: -6px; left: -2px; }
.tn2 .tn2-weather .weather-icon { width: 48px !important; height: 48px !important; display: block; }

.tn2 .tn2-row { display: flex; align-items: center; gap: 9px; padding: 2px 0; color: #4a5866; font-size: 12px; text-decoration: none; }
.tn2 .tn2-row:hover .tn2-label { color: #1f2933; text-decoration: underline; }
.tn2 .tn2-count { min-width: 28px; padding: 1px 7px; border-radius: 10px; text-align: center; color: #fff; font-size: 11px; font-weight: 600; line-height: 14px; font-variant-numeric: tabular-nums; }
.tn2 .tn2-count.tn2-zero { background: #e3e7ec; color: #7b8794; font-weight: 500; }
.tn2 .tn2-chip { display: inline-flex; align-items: center; gap: 6px; margin: 6px 6px 0 0; padding: 3px 9px; border-radius: 12px; background: #e3f5ec; color: #1f9d61; font-size: 11.5px; text-decoration: none; }
.tn2 .tn2-chip:hover { background: #d3efe0; }
.tn2 .tn2-chip i:before { margin: 0; }
.tn2 .tn2-chip[data-tb2-flag="anniversaries"] { background: #fdf0dc; color: #b45309; }
.tn2 .tn2-chip[hidden] { display: none; }

/* no flex gap here: the attendance control renders several empty panels, and a gap per empty
   panel pushed the visible date + button off centre; the spacing is on the pieces instead */
.tn2 .tn2-att { text-align: center; align-items: center; gap: 0; }
.tn2 .tn2-att:has(.RadAjaxPanel) .tn2-date { margin-bottom: 6px; }   /* only when the attendance control follows */
/* today's date, set like the weather cell: small uppercase label, light large text */
.tn2 .tn2-date { display: flex; flex-direction: column; align-items: center; line-height: 1.15; color: #63767e; }
.tn2 .tn2-date small { font-size: 11px; font-weight: 400; color: #7b8794; letter-spacing: .5px; text-transform: uppercase; line-height: 16px; }
.tn2 .tn2-date b { font-size: 16px; font-weight: 300; letter-spacing: -.2px; white-space: nowrap; }   /* 19px read large over the Check In pill (the owner, 30 Sep 2026) */
.tn2 .tn2-att .tn2-date + .tn2-foot { margin-top: 2px; }
/* the foot holds only the "n hidden widgets" link: gone while empty, so the date (+ button) sits in the middle */
.tn2 .tn2-foot:not(:has(.tn2-tools > *)) { display: none; }

/* the attendance control in the V2 look (the owner, 30 Sep 2026: "the check in is not styled as per the new design language").
   AttendanceSignInOut / AttendanceCheckInOut are shared with the old Home and stay untouched: every rule here is scoped to the band
   and outranks the control's own (its inline .signInOuBtn width / padding !important, .badge-round, .badge:hover's opacity, .blue,
   .small / .xsmall). Check In = the accent pill (the band's one primary button), Check Out = the ghost pill, the pin before the
   word; the punch times ("Check In @ 09:12 AM"), the leave / day-off message and "Add Checkpoint" are quiet 11px lines under it.
   The ids end the same in both controls; SignInOut wraps the links in RadAjaxPanel divs, CheckInOut does not. */
.tn2 .tn2-att .signInOuBtn { display: inline-flex !important; align-items: center; justify-content: center; gap: 7px; width: auto !important; min-width: 0; height: 32px; margin: 0 !important; padding: 0 18px !important; border: 1px solid transparent; border-radius: 16px !important; background: var(--accent, #036c9c) !important; color: #fff !important; font-size: 12px !important; font-weight: 500; line-height: 1 !important; text-transform: none; text-decoration: none; white-space: nowrap; box-sizing: border-box; opacity: 1 !important; }
.tn2 .tn2-att .signInOuBtn:hover { background: var(--accent-ink, #025980) !important; color: #fff !important; }
.tn2 .tn2-att .signInOuBtn.badge-purple { border-color: var(--line, #dfe5ea); background: #fff !important; color: var(--head, #263238) !important; }
.tn2 .tn2-att .signInOuBtn.badge-purple:hover { border-color: #cfd8dc; background: var(--band, #f6f8fa) !important; color: var(--head, #263238) !important; }
.tn2 .tn2-att .signInOuBtn .badge-icon { order: -1; position: static !important; margin: 0 !important; padding: 0 !important; background: none !important; }
.tn2 .tn2-att .signInOuBtn .location:before { width: auto; margin: 0; font-size: 13px; }
.tn2 .tn2-att .signInOuBtn.badge-purple .location:before { color: var(--accent, #036c9c); }
.tn2 .tn2-att [id$="LabelCheckedInAt"] { display: block; color: var(--muted, #607d8b); font-size: 11px; line-height: 16px; }
.tn2 .tn2-att [id$="LabelCheckedInAt"] > div { margin-top: 6px; font-size: 11px !important; line-height: 16px; }
.tn2 .tn2-att [id$="LabelCheckedInAt"] a { color: var(--muted, #607d8b) !important; text-decoration: none; }
.tn2 .tn2-att [id$="LabelCheckedInAt"] a:hover { color: var(--head, #263238) !important; text-decoration: underline; }
.tn2 .tn2-att [id$="LabelCheckedInAt"] b { color: var(--ink, #37474f); font-weight: 500; }
.tn2 .tn2-att [id$="HyperLinkAddCheckpoint"] { display: inline-flex !important; align-items: center; gap: 4px; margin-top: 4px; color: var(--ink, #37474f) !important; font-size: 11px !important; line-height: 16px; text-decoration: none; border-bottom: 1px dotted #b7c0c9; }
.tn2 .tn2-att [id$="HyperLinkAddCheckpoint"]:hover { color: var(--head, #263238) !important; }
.tn2 .tn2-att [id$="HyperLinkAddCheckpoint"] .location { margin: 0 !important; color: var(--accent, #036c9c); }
/* the button inside the popup the pill opens (Check In / Check Out / Add Checkpoint of the controls' own Sign In, Sign Out and Add GPS
   Checkpoint windows): the same accent pill. Only the button - the window keeps its look (the owner, 30 Sep 2026: "do not make a new
   popup just style the check-in button"). Telerik moves a window out of the band, so it is reached by id; the controls' only other host,
   the old Home, has no body.v2. The Material skin loads later - hence !important */
body.v2 .RadWindow:is([id$="_RadWindowSignIn"], [id$="_RadWindowSignOut"], [id$="_RadWindowAddCheckpoint"]) .RadButton.rbButton.rbPrimaryButton { display: inline-flex !important; align-items: center; height: 32px !important; padding: 0 20px !important; border: 1px solid transparent !important; border-radius: 16px !important; background: var(--accent, #036c9c) !important; box-shadow: none !important; }
body.v2 .RadWindow:is([id$="_RadWindowSignIn"], [id$="_RadWindowSignOut"], [id$="_RadWindowAddCheckpoint"]) .RadButton.rbButton.rbPrimaryButton .rbText { color: #fff !important; font-size: 12px; font-weight: 500; letter-spacing: 0; text-transform: none; }
body.v2 .RadWindow:is([id$="_RadWindowSignIn"], [id$="_RadWindowSignOut"], [id$="_RadWindowAddCheckpoint"]) .RadButton.rbButton.rbPrimaryButton:is(.rbHovered, .rbFocused, :hover) { background: var(--accent-ink, #025980) !important; }

/* dashboard status + layout tools: the band's own slots, filled by the host script by id -
   "23 widgets · 2 hidden" on one line */
.tn2 .tn2-foot { display: flex; align-items: center; justify-content: center; gap: 5px; font-size: 11px; font-weight: 400; color: #9aa7b4; position: relative; white-space: nowrap; }
.tn2 .tn2-tools { display: inline-flex; align-items: center; gap: 5px; }
@keyframes wh-pulse { 0%, 100% { opacity: .3; } 50% { opacity: 1; } }

/* homepage loading indicator: a small floating pill at the bottom right (HomeV2 #whLoading),
   visible only while a widget load is in flight, so it is seen wherever the reader has scrolled.
   Sits under the chat dock (z 6000) when panels are open. */
.wh-loading { position: fixed; right: 18px; bottom: 16px; z-index: 5990; display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px 6px 10px; border-radius: 14px; background: #fff; box-shadow: 0 6px 20px rgba(31,41,51,.18), 0 0 0 1px rgba(0,0,0,.05); color: #4a5866; font-size: 11.5px; white-space: nowrap; pointer-events: none; }
.wh-loading[hidden] { display: none; }
.wh-loading .wh-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--csw-accent, #9b30d8); animation: wh-pulse 1s infinite ease-in-out; }
.tn2 .tn2-tools { position: relative; }
.tn2 .tn2-hidden-link { color: #4a5866; text-decoration: none; border-bottom: 1px dotted #b7c0c9; }
.tn2 .tn2-hidden-link:hover { color: #1f2933; }
.tn2 .tn2-hidden-list { position: absolute; left: 50%; transform: translateX(-50%); top: calc(100% + 6px); z-index: 20; min-width: 170px; padding: 6px; background: #fff; border-radius: 10px; box-shadow: 0 10px 28px rgba(31,41,51,.2), 0 0 0 1px rgba(0,0,0,.05); text-align: left; }
.tn2 .tn2-hidden-list[hidden] { display: none; }
.tn2 .tn2-hidden-list a { display: block; padding: 6px 10px; border-radius: 6px; color: #1f2933; font-size: 12px; text-decoration: none; white-space: nowrap; }
.tn2 .tn2-hidden-list a:before { content: "+"; color: #9aa7b4; margin-right: 6px; }
.tn2 .tn2-hidden-list a:hover { background: #f1f3f7; }


/* ==========================================================================
   Narrow screens (23 Sep 2026, docs/RESPONSIVE-V2.md R-8; reshaped after the owner's two walks the same day). The module
   words need the full 1136px: under that the nav hides and a menu button (.tb2-burger, rendered by TopBarV2Render.Main)
   opens the SAME nav markup as a sheet under the bar (.tb2-menu-open on #menuArea, TopBarV2.js): a white card on the
   page grey, one module per row (its icon when it has one, its word - icon-only roots carry it in .tb2-root-alt), the
   active module in the accent with its pages already open on a light band, a tapped module opening the same way.
   The popovers span the screen on a phone. From 1136px up nothing here applies except the bar's old 1136 minimum.
   ========================================================================== */
.tb2 .tb2-burger, .tb2 .tb2-root-alt { display: none; }
@media (min-width: 1136px) { .tb2 { min-width: 1136px; } }

@media (max-width: 1135px) {
    .tb2 .tb2-bar { position: relative; }                     /* the sheet hangs off the bar (no z-index: not a stacking context, RadWindow stays above) */
    .tb2 .tb2-nav { display: none; }
    .tb2 .tb2-burger {
        display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
        width: 40px; height: 40px; margin: 0 auto 0 -6px; padding: 0; border: 0; border-radius: 50%;
        background: transparent; color: #fff; cursor: pointer; font: inherit;
    }
    .tb2 .tb2-burger i { font-size: 18px; line-height: 1; }
    .tb2 .tb2-burger i:before { margin: 0; width: auto; }
    .tb2 .tb2-burger:hover, .tb2 .tb2-burger[aria-expanded="true"] { background: rgba(255,255,255,.16); }
    /* the sheet is a drawer (walk 3): a 320px card hanging under the menu button, 10px in from the screen edge (the bar's gutter is 13px, 12px on a phone), scrolling inside when tall */
    .tb2.tb2-menu-open .tb2-nav { display: block; position: absolute; left: 4px; right: auto; top: 60px; width: min(300px, calc(100vw - 20px)); height: auto; z-index: 5001; padding: 6px 0; background: #fff; border: 1px solid #e3e7ec; border-radius: 12px; box-shadow: 0 14px 34px rgba(31,41,51,.22); max-height: calc(100dvh - 72px); overflow: auto; scrollbar-width: none; }
    .tb2.tb2-menu-open .tb2-nav::-webkit-scrollbar { display: none; }
    .tb2.tb2-menu-open .tb2-roots { flex-direction: column; height: auto; }
    .tb2.tb2-menu-open .tb2-root { display: block; }
    /* the first root (Home) and the last (the gear, Manage) stand apart from the modules with a rule and a little air */
    .tb2.tb2-menu-open .tb2-root:first-child { border-bottom: 1px solid #e3e7ec; margin-bottom: 4px; }
    .tb2.tb2-menu-open .tb2-root:last-child { border-top: 1px solid #e3e7ec; margin-top: 4px; }
    .tb2.tb2-menu-open .tb2-root:first-child .tb2-link, .tb2.tb2-menu-open .tb2-root:last-child .tb2-link { height: 40px; padding-left: 16px !important; color: #4a5866; font-size: 13.5px; font-weight: 400; }   /* the bar's ".tb2-root:first-child .tb2-link { padding-left: 4px }" outranked the sheet rule and pulled Home 12px left (25 Sep 2026) */
    .tb2.tb2-menu-open .tb2-link { height: 38px; gap: 12px; padding: 0 16px; border-bottom: none; border-radius: 0; color: #1f2933; font-size: 13px; font-weight: 500; letter-spacing: 0; }   /* the modules: 13px on 38px rows (the owner, 25 Sep 2026: 14 on 42 read large and loose) */
    .tb2.tb2-menu-open .tb2-link:hover, .tb2.tb2-menu-open .tb2-root.tb2-open > .tb2-link { background: #f7f8fa; color: #1f2933; }
    .tb2.tb2-menu-open .tb2-root.tb2-active > .tb2-link { color: var(--accent, #036c9c); box-shadow: inset 3px 0 0 var(--accent, #036c9c); }
    /* the icon box: 22px, whatever markup the navigation table gives the icon - every offset inside it is reset, so Home and Manage line up (the owner, 25 Sep 2026) */
    .tb2.tb2-menu-open .tb2-root-ico { display: none; }   /* no icons in the sheet - every row's word starts on the same edge (the owner, 25 Sep 2026) */
    .tb2.tb2-menu-open .tb2-root.tb2-active .tb2-root-ico { color: var(--accent, #036c9c); }
    .tb2.tb2-menu-open .tb2-root-alt { display: inline; }
    .tb2.tb2-menu-open .tb2-has-menu > .tb2-link:after { content: ""; flex: none; margin-left: auto; margin-right: 2px; width: 7px; height: 7px; border-right: 1.5px solid #b7c0c9; border-bottom: 1.5px solid #b7c0c9; transform: rotate(-45deg); transition: transform .15s ease; }
    .tb2.tb2-menu-open .tb2-root.tb2-open > .tb2-link:after { transform: rotate(45deg); }
    .tb2.tb2-menu-open .tb2-root.tb2-open > .tb2-panel { display: block; position: static; min-width: 0; max-width: none; padding: 4px 0 6px; background: #f7f8fa; border-top: 1px solid #eef1f4; border-radius: 0; box-shadow: none; animation: none; }
    .tb2.tb2-menu-open .tb2-item > a { padding: 8px 16px 8px 34px; border-radius: 0; color: #4a5866; font-size: 12.5px; white-space: normal; }
    .tb2.tb2-menu-open .tb2-item > a:hover { background: #eef1f4; color: #1f2933; }
    .tb2.tb2-menu-open .tb2-ico { display: none; }
    .tb2.tb2-menu-open .tb2-sep { margin: 4px 14px 4px 30px; }
    /* a group inside a module: closed until its arrow is tapped (the owner, 25 Sep 2026); the touch hover must not open it either */
    .tb2.tb2-menu-open .tb2-panel .tb2-sub { position: static; min-width: 0; margin: 0 0 4px 30px; padding: 0 0 0 10px; border-left: 2px solid #e3e7ec; background: transparent; box-shadow: none; }
    .tb2.tb2-menu-open .tb2-panel .tb2-has-sub:not(.tb2-open) > .tb2-sub { display: none !important; }
    .tb2.tb2-menu-open .tb2-panel .tb2-has-sub.tb2-open > .tb2-sub { display: block; }
    .tb2.tb2-menu-open .tb2-has-sub > a .tb2-more { margin-left: auto; margin-right: 2px; transform-origin: center; transition: transform .15s ease; }
    .tb2.tb2-menu-open .tb2-has-sub.tb2-open > a .tb2-more { transform: rotate(90deg); }
    .tb2.tb2-menu-open .tb2-panel .tb2-sub .tb2-item > a { padding-left: 8px; }
    .tb2.tb2-menu-open .tb2-panel .tb2-has-sub > a:after { display: none; }
}

@media (max-width: 640px) {
    .tb2.tb2-menu-open .tb2-nav { left: 4px; }                  /* 16px in from the screen edge */
    .tb2 .tb2-avatar { margin-left: 2px; }
    /* the popovers: the width of the screen less a gutter, still anchored at the right of their button */
    .tb2-pop, .tb2-pop.tb2-pop-below { width: min(340px, calc(100vw - 24px)); max-width: none; }   /* the notification / warning popovers: a card, not the screen (the owner, 25 Sep 2026) */
    .tb2-pop-user { width: min(300px, calc(100vw - 24px)); }
}


/* ---- the profile band on narrow screens (S3 HomeV2, 25 Sep 2026): the five-cell grid needs about 820px and pushed the whole page wide (a phone
   zoomed out to fit it). A tablet keeps the logo, the identity and the counts (weather and today hidden). A phone keeps the company logo and the
   employee's name and title (the owner, 25 Sep 2026), and since 30 Sep 2026 the attendance as a row of its own under them - today's date on the
   left, Check In / Check Out on the right, the punch lines under the date - while the photo, the change-password lock and the Admin chip go
   (the owner, 30 Sep 2026; the self-services warning chip stays). The row shows only when the attendance control rendered (HR tenant with
   digital check-in): a date alone is not worth a row on a phone. The weather, the counts and the hidden-widgets link are desktop-only. ---- */
@media (max-width: 1023px) {
    .tn2 { grid-template-columns: 150px minmax(0, 1fr) 210px; }
    .tn2 .tn2-weather, .tn2 .tn2-att { display: none; }
}
@media (max-width: 640px) {
    .tn2 { grid-template-columns: auto minmax(0, 1fr); min-height: 0; }
    .tn2 .tn2-sum { display: none; }
    .tn2 .tn2-cell { padding: 10px 14px; }
    .tn2 .tn2-logo img { max-height: 52px; max-width: 140px; }
    /* the name at the right edge, no divider between it and the logo (the owner, 30 Sep 2026) */
    .tn2 .tn2-me { gap: 10px; justify-content: flex-end; text-align: right; }
    .tn2 .tn2-me:before { display: none; }
    .tn2 .tn2-chips { justify-content: flex-end; }
    .tn2 .tn2-name { white-space: normal; }
    .tn2 .tn2-photo, .tn2 .tn2-lock, .tn2 .tn2-chips .tb2-chip:not(.tb2-chip-warn), .tn2 .tn2-chips:not(:has(.tb2-chip-warn)) { display: none; }

    /* the attendance row: a two-column grid across the band, the button beside the date on the right and the punch lines under the date;
       with no button (checked out, on leave, a day off) the second column is empty and the lines take the width */
    .tn2 .tn2-att { display: grid; grid-column: 1 / -1; grid-template-columns: minmax(0, 1fr) auto; column-gap: 12px; align-items: center; justify-items: start; text-align: left; }
    .tn2 .tn2-att:not(:has([id$="LabelCheckedInAt"])) { display: none; }
    .tn2 .tn2-att:before { left: 14px; right: 14px; top: 0; bottom: auto; width: auto; height: 1px; }   /* the divider on top, not on the left */
    .tn2 .tn2-att > * { grid-column: 1; }
    .tn2 .tn2-att > .signInOuBtn, .tn2 .tn2-att > :has(> .signInOuBtn) { grid-column: 2; grid-row: 1; justify-self: end; }
    .tn2 .tn2-att .tn2-date, .tn2 .tn2-att:has(.RadAjaxPanel) .tn2-date { align-items: flex-start; margin-bottom: 0; }
    .tn2 .tn2-att .tn2-foot { display: none; }
    .tn2 .tn2-att .signInOuBtn { height: 36px; padding: 0 20px !important; border-radius: 18px !important; font-size: 13px !important; }   /* a touch target */
    body.v2 .RadWindow:is([id$="_RadWindowSignIn"], [id$="_RadWindowSignOut"], [id$="_RadWindowAddCheckpoint"]) .RadButton.rbButton.rbPrimaryButton { height: 38px !important; border-radius: 19px !important; }   /* the phone dialogs' 38px button (Pages.css 11b) */
}

/* ---- page loader (#navLoad.nl in SiteV2.Master; shown / hidden by TopBarV2.js "page loader", 25-28 Sep 2026) ----
   The moment the browser leaves the page (a link click, a full postback, a script redirect) a 4px bar runs along the top
   edge of the viewport: a translucent track with a segment sweeping across it in the AJAX spinner's yellow (spinner3,
   11-loader.css) - motion is what reads as "loading", a still line does not (the owner, 28 Sep 2026). Once the band is
   scrolled out of view the bar sits over the white page, so it draws in the tenant accent over its soft tint instead
   (.is-page, decided from the band's position when it shows). If the page is still here after a second it is a slow
   one: a small pill with the same four-bar spinner sits under the bar, and the title band and the body dim
   (body.nl-slow) the way an AJAX-updated panel whitens. Nothing blocks the mouse: a stranded loader (a same-window
   download, a cancelled navigation) costs nothing but a line and a dim, and the script clears it after 15 s anyway.
   Never for AJAX requests: those keep the RadAjaxLoadingPanel. Above every RadWindow and the chat dock (z 6000). ---- */
.nl { position: fixed; top: 0; left: 0; right: 0; height: 4px; z-index: 99990; pointer-events: none; }
.nl[hidden] { display: none; }
.nl .nl-bar { position: absolute; left: 0; top: 0; right: 0; height: 100%; overflow: hidden; background: rgba(255, 255, 255, .28); }   /* the track */
.nl .nl-bar::before { content: ""; position: absolute; top: 0; left: 0; width: 35%; height: 100%; border-radius: 2px; background: #f1c40f; box-shadow: 0 0 8px rgba(241, 196, 15, .8); animation: nl-sweep 1.3s cubic-bezier(.4, 0, .2, 1) infinite; }   /* the sweep, the spinner's yellow */
.nl.is-page .nl-bar { background: var(--accent-soft, #e6f0f5); }
.nl.is-page .nl-bar::before { background: var(--accent, #036c9c); box-shadow: 0 0 8px var(--accent-line, rgba(3, 108, 156, .45)); }
.nl .nl-pill { position: absolute; top: 12px; left: 50%; transform: translate(-50%, -6px); opacity: 0; transition: opacity .2s ease-out, transform .2s ease-out; display: inline-flex; align-items: center; gap: 8px; padding: 5px 14px 5px 10px; border-radius: 16px; background: #fff; box-shadow: 0 6px 20px rgba(31, 41, 51, .18), 0 0 0 1px rgba(0, 0, 0, .05); color: #4a5866; font-size: 12px; font-weight: 500; line-height: 1.4; white-space: nowrap; }
.nl.is-slow .nl-pill { opacity: 1; transform: translate(-50%, 0); }
.nl .nl-pill .spinner3 { flex: none; display: inline-flex; align-items: center; justify-content: center; gap: 3px; width: 26px; height: 22px; margin: 0; }   /* the AJAX spinner, pill-sized */
.nl .nl-pill .spinner3 .loading-bar { width: 3px; height: 10px; }
body.v2 #translation-section .rpt, body.v2 #footerArea { transition: opacity .35s ease-out; }
body.v2.nl-slow #translation-section .rpt, body.v2.nl-slow #footerArea { opacity: .6; }   /* the slow state: the page being left fades; the band and the pill stay */
@keyframes nl-sweep { 0% { transform: translateX(-100%); } 100% { transform: translateX(300%); } }
@keyframes nl-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) {
    .nl .nl-bar::before { animation: nl-pulse 1.6s ease-in-out infinite; width: 60%; }   /* essential motion: a loader must still look alive (the AJAX spinner never stopped for reduced motion either) */
    .nl .nl-pill, body.v2 #translation-section .rpt, body.v2 #footerArea { transition: none; }
}

/* ---- zoom tip (#zoomTip.zt in MasterPageV2.master; shown / hidden by TopBarV2.js "zoom tip", 30 Sep 2026) ----
   A card in the bottom-left corner (the right one belongs to the chat dock and Stack AI) suggesting the browser zoom for a wide
   screen. Under the RadWindows and their modal veil (z 3000), over the page. ---- */
.zt { position: fixed; left: 18px; bottom: 18px; z-index: 2990; display: flex; gap: 12px; width: 340px; box-sizing: border-box; padding: 14px 34px 14px 14px; background: #fff; border-radius: 12px; box-shadow: 0 16px 40px rgba(31,41,51,.24), 0 0 0 1px rgba(0,0,0,.05); color: #4a5866; font-size: 12.5px; line-height: 1.5; text-align: left; animation: zt-in .25s ease-out; }
.zt[hidden] { display: none; }
.zt .zt-ico { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%; background: var(--accent-soft, #e6f0f5); color: var(--accent, #036c9c); font-size: 15px; }
.zt .zt-ico i:before, .zt .zt-close i:before { margin: 0; }
.zt .zt-title { margin: 1px 0 4px; color: #1f2933; font-size: 13px; font-weight: 600; }
.zt .zt-text b { color: #1f2933; }
.zt kbd { display: inline-block; min-width: 12px; padding: 0 5px; border: 1px solid #d5dbe1; border-bottom-width: 2px; border-radius: 4px; background: #f7f9fa; color: #1f2933; font-family: inherit; font-size: 11px; font-weight: 600; line-height: 17px; text-align: center; }
.zt .zt-ok { margin-top: 10px; padding: 5px 14px; border: 0; border-radius: 14px; background: var(--accent, #036c9c); color: #fff; font: inherit; font-weight: 600; cursor: pointer; }
.zt .zt-ok:hover { background: var(--accent-ink, #025a82); }
.zt .zt-close { position: absolute; top: 8px; right: 8px; width: 24px; height: 24px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: #9aa7b4; font-size: 13px; cursor: pointer; }
.zt .zt-close:hover { background: #f1f3f7; color: #1f2933; }
@keyframes zt-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .zt { animation: none; } }

/* ==========================================================================
   The live WhatsApp alert of the V2 pages (22 Oct 2026; Scripts/Messaging/WhatsAppAlertV2.js, WebUi/V2/Messaging/WhatsAppAlertsV2.cs) - a
   card per conversation, top right under the 54px top bar, above the page and the record windows (7000-7300), under the note windows
   (9000). Bundled with every other file of ~/StyleSheets (no link needed). Tokens are the Pages.css :root set with fallbacks; the green is
   WhatsApp's own (the chat popup's), used for the channel mark and the Reply button only.
   ========================================================================== */

.wa2-alerts { position: fixed; top: 64px; right: 16px; z-index: 7400; display: flex; flex-direction: column; gap: 10px; width: 340px; max-width: calc(100vw - 32px); pointer-events: none; }

.wa2-card { position: relative; display: grid; grid-template-columns: 36px minmax(0, 1fr) 22px; gap: 10px; padding: 12px 10px 12px 12px; background: var(--card, #fff); border: 1px solid var(--line, #dfe5ea); border-left: 3px solid #25d366; border-radius: 10px; box-shadow: 0 8px 24px rgba(20, 30, 45, .16); color: var(--ink, #37474f); font-size: 12px; line-height: 1.4; cursor: pointer; pointer-events: auto; animation: wa2-in .18s ease-out; }
.wa2-card:hover { border-color: #b7dfc6; border-left-color: #25d366; }
.wa2-card:focus-visible { outline: 2px solid #25d366; outline-offset: 2px; }
@keyframes wa2-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

.wa2-icon { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; background: #25d366; color: #fff; }
.wa2-icon .fa { font-size: 20px; }

.wa2-main { min-width: 0; }
.wa2-head { display: flex; align-items: baseline; gap: 8px; }
.wa2-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; font-weight: 600; color: var(--head, #263238); }
.wa2-when { flex: 0 0 auto; font-size: 11px; color: #008069; font-weight: 500; }
.wa2-number { font-size: 11px; color: var(--faint, #78909c); }
.wa2-number:empty { display: none; }
.wa2-text { margin-top: 4px; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow-wrap: anywhere; color: var(--ink, #37474f); }

.wa2-actions { display: flex; align-items: center; gap: 12px; margin-top: 8px; }
.wa2-reply { display: inline-flex; align-items: center; gap: 4px; height: 26px; padding: 0 12px; border: 0; border-radius: 13px; background: #008069; color: #fff; font: inherit; font-size: 12px; font-weight: 500; cursor: pointer; }
.wa2-reply:hover { background: #017561; }
.wa2-inbox, .wa2-inbox:visited { color: var(--muted, #607d8b); font-size: 11px; text-decoration: none; }
.wa2-inbox:hover { color: var(--accent, #0277bd); text-decoration: underline; }

.wa2-close { align-self: start; display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--faint, #78909c); cursor: pointer; }
.wa2-close:hover { background: var(--hover, #eef2f6); color: var(--head, #263238); }

@media (max-width: 640px) { .wa2-alerts { top: 60px; right: 8px; left: 8px; width: auto; max-width: none; } }
@media print { .wa2-alerts { display: none; } }

/* ==========================================================================
   CorporateStack homepage widgets - shared baseline (root class: csw)
   Bundled with every other file in ~/StyleSheets (Global.asax), so no link tag
   and no ?v= - the bundle hash changes with the file.

   Two header tiers:
     tier 1  .csw            dark title strip + tiles on white (kpi-top) + charts  - analytics widgets
     tier 2  .csw.csw-lite   light header + one stat strip          - list widgets
   Shared list vocabulary: csw-list rows with a status stripe, csw-pill (solid),
   csw-days (the days chip, its own column), csw-rail (start -> today -> end),
   csw-dur (training duration). Semantic kinds everywhere: good / warn / bad / info.
   ========================================================================== */

/* ---- tokens (kept as plain values for the bundler; change here, nowhere else) ----
   ink #1f2933   ink-2 #4a5866   muted #7b8794   line #e3e7ec   line-2 #eef1f4
   strip = --csw-theme (#363a5c)  accent #9b30d8  accent-soft #f1e4fb
   good #16a34a  warn #d97706    bad #dc2626     info #3b82f6
   good-soft #e6f6ec  warn-soft #fdf0dc  bad-soft #fde8e8  info-soft #e8f0fe */

/* ---- tier 1: a dark title STRIP in the tenant's main colour (cswTheme reads #menuArea into --csw-theme) over the KPI tiles on white
        (the owner, 13 Oct 2026, option B: the full dark band read as a wall of slabs once several were stacked). The strip is the
        widget's .csw-head, edge to edge under the card's top radius; the tiles below it are ink, good / warn / bad one step darker
        than the lite set. A hairline closes the tile row off from the charts ---- */
.csw.advanced-panel .kpi-top { background-color: #fff !important; color: #1f2933; border-radius: 11px 11px 0 0; border-bottom: 1px solid #eef1f4; }
.csw .kpi-top { height: auto !important; min-height: 0 !important; overflow: visible !important; padding: 0 20px 10px !important; }
.csw .radio-white span { color: white !important; font-weight: 300 !important; }
.csw .radio-white .rbIcon:before { font-size: 13px !important; }

.csw .csw-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0 -20px 12px;
    padding: 8px 24px;
    min-height: 44px;
    box-sizing: border-box;
    background-color: var(--csw-theme, #363a5c);
    border-radius: 11px 11px 0 0;
}
/* ONE type scale for both tiers (the owner, 13 Oct 2026: the chart widgets read bigger than the list widgets): title 14px,
   label 10.5px, number 20px / 600, note 11px - the same as .csw-stat .l / .v / .n below */
.csw .csw-title { color: #fff; font-size: 14px; font-weight: 600; letter-spacing: .2px; }
.csw .csw-title small { color: rgba(255,255,255,.85); font-size: 12px; font-weight: 400; margin-left: 12px; padding-left: 12px; border-left: 1px solid rgba(255,255,255,.35); letter-spacing: .4px; }
.csw .csw-tools { display: flex; align-items: center; gap: 14px; font-size: 12px; color: rgba(255,255,255,.72); }
.csw .csw-tools a { color: #fff; text-decoration: none; }
.csw .csw-tools a:hover { text-decoration: underline; }
.csw .csw-refresh i { font-size: 13px; }
.csw .csw-stamp { color: rgba(255,255,255,.72); white-space: nowrap; }
/* the switch (Overall / Mine; Assets' By count / By value, Sales Invoices' year, Workforce's employee type) right after the title
   behind a hairline, no context text between them; the tools keep the right edge (the owner, 13 Oct 2026). The auto margin takes
   the free space, so the head's space-between leaves the switch there */
.csw .csw-head > .radio-white { margin: 0 auto 0 14px; padding-left: 14px; border-left: 1px solid rgba(255,255,255,.35); font-size: 12px; }
.csw .csw-head > .radio-white .rbText { font-size: 11.5px !important; }   /* the list widgets' tab size */
.csw .csw-head > .radio-white .rbIcon:before { font-size: 11px !important; }
/* a second switch in the head (Marketing 360's channel, S6-c): behind its own hairline, right after the first; the first then keeps no auto margin */
.csw .csw-head > .radio-white:has(+ .radio-channel) { margin-right: 0; }
.csw .csw-head > .radio-channel { margin-left: 0; }

/* ---- tier 1: tiles (on white, under the strip) ---- */
.csw .csw-tiles { display: flex; }
.csw .csw-tile { flex: 1 1 0; min-width: 0; padding: 2px 14px 2px; border-right: 1px solid rgba(31,41,51,.1); text-align: left; }
.csw .csw-tile:first-child { padding-left: 4px; }
.csw .csw-tile:last-child { border-right: 0; }
.csw .csw-label { font-size: 10.5px; letter-spacing: .5px; text-transform: uppercase; color: #7b8794; font-weight: 400; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.csw .csw-value { font-size: 20px; font-weight: 600; line-height: 1.1; margin: 4px 0 2px; color: #1f2933; white-space: nowrap; font-variant-numeric: tabular-nums; }
.csw .csw-value small { font-size: 11px; font-weight: 400; color: #7b8794; margin-left: 6px; }
.csw .csw-sub { font-size: 11px; color: #7b8794; line-height: 1.4; text-wrap: pretty; }
.csw .csw-sub b { color: #4a5866; font-weight: 600; }
/* a note in whole phrases (CswWidgetControl.Phrases - the chart tiles' .csw-sub and the list strips' .n): a " · " part wraps to the
   next line as a unit, the dot staying at the end of the line it closes; a part wider than its box still wraps inside itself */
.csw .csw-ph { display: inline-block; max-width: 100%; }
.csw .csw-bar { height: 3px; background: rgba(31,41,51,.1); border-radius: 2px; margin: 5px 0 4px; overflow: hidden; }
.csw .csw-bar i { display: block; height: 100%; background: #16a34a; }
.csw .csw-good { color: #15803d !important; }
.csw .csw-bad { color: #c62828 !important; }
.csw .csw-warn { color: #b45309 !important; }
.csw .csw-chips { display: flex; gap: 4px; margin-top: 4px; flex-wrap: wrap; }
.csw .csw-chips span { font-size: 10.5px; padding: 0 6px; border-radius: 9px; background: #eef1f4; color: #4a5866; white-space: nowrap; line-height: 17px; }

/* ---- tier 2: plain panel, light header + stat strip; the filters, tabs and links sit in the
        header's right side (csw-tools) - there is no second bar above the list ---- */
/* one grey block: title row + stat strip, edge to edge under the card's top radius; white body below */
.csw .csw-lite-head { padding: 0 20px 4px; background: #fff; border-radius: 12px 12px 0 0; }
/* the title bar: light grey, edge to edge, title left + switches right, nothing else */
.csw.csw-lite .csw-head { margin: 0 -20px 2px; padding: 8px 20px; background: #f7f8fa; border-bottom: 1px solid #eef1f4; border-radius: 12px 12px 0 0; flex-wrap: nowrap; gap: 12px; min-height: 44px; box-sizing: border-box; }
/* tool cluster (injected by cswLayout): load time, refresh, grip to drag, x to hide, - to minimize (chart widgets) - hover only */
.csw .csw-ctl { display: inline-flex; align-items: center; gap: 10px; margin-left: 10px; opacity: 0; transition: opacity .12s ease; }
.csw:hover .csw-ctl { opacity: 1; }
.csw .csw-ctl .csw-stamp { font-size: 10.5px; font-weight: 400; color: rgba(255,255,255,.55); }
.csw .csw-ctl .csw-refresh { color: rgba(255,255,255,.55); font-size: 12px; line-height: 1; }
.csw .csw-ctl .csw-refresh:hover { color: #fff; text-decoration: none; }
.csw.csw-lite .csw-ctl .csw-stamp { color: #b7c0c9; }
.csw.csw-lite .csw-ctl .csw-refresh { color: #b7c0c9; }
.csw.csw-lite .csw-ctl .csw-refresh:hover { color: #4a5866; }
.csw .csw-grip, .csw .csw-hide { line-height: 1; color: rgba(255,255,255,.55); user-select: none; }
.csw .csw-grip { cursor: grab; font-size: 15px; }
.csw .csw-hide { cursor: pointer; font-size: 17px; }
.csw .csw-grip:hover, .csw .csw-hide:hover { color: #fff; }
.csw.csw-lite .csw-grip, .csw.csw-lite .csw-hide { color: #b7c0c9; }
.csw.csw-lite .csw-grip:hover, .csw.csw-lite .csw-hide:hover { color: #4a5866; }
/* minimize (chart widgets, injected by cswLayout, toggled by cswCollapse): "-" in the cluster, "+" while minimized. The state is
   data-cswmin on the host's grid cell, so the skeleton and every reload of the widget obey it: the title strip and the
   KPI tiles (the owner, 13 Oct 2026: the summary, like a collapsed list widget's title + strip) - the charts and the attention block go */
.csw .csw-min { cursor: pointer; font-size: 12px; line-height: 1; color: rgba(255,255,255,.55); user-select: none; }
.csw .csw-min:hover { color: #fff; }
.csw .csw-min i:before { content: "\f068"; }
[data-cswmin] .csw .csw-min i:before { content: "\f067"; }
[data-cswmin] .csw:not(.csw-lite) > .panel-content { display: none; }
[data-cswmin] .csw:not(.csw-lite) .kpi-top { border-radius: 11px; border-bottom: 0; }
[data-cswmin] .csw:not(.csw-lite):not(.csw-skeleton) .csw-title { cursor: pointer; }
#PanelAll > .csw-dragging { opacity: .35; }
#PanelAll > .csw-dropzone { outline: 2px dashed var(--csw-accent-line, #d8b4ef); outline-offset: 2px; border-radius: 12px; }
/* collapse: closed = the grey block alone */
/* collapse: closed = title bar + strip; the expand bar at the bottom opens it */
.csw.csw-lite[data-cswcollapsed] .panel-content { display: none; }
.csw .csw-expand { display: flex; align-items: center; justify-content: center; height: 26px; margin: 0 20px 4px; color: #b7c0c9; cursor: pointer; font-size: 15px; line-height: 1; user-select: none; }
.csw .csw-expand i { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; transition: transform .15s ease, background-color .12s ease; }
.csw .csw-expand:hover i { background: #eef1f4; color: #4a5866; }
.csw .csw-expand i:before { margin: 0; }
/* the hide confirmation (radconfirm, Material skin: .rwDialog.rwConfirmDialog draws the ? icon with :before): no icon */
body.csw-host .RadWindow .rwDialog.rwConfirmDialog:before { display: none !important; content: none !important; }
body.csw-host .RadWindow .rwDialog.rwConfirmDialog { padding-left: 20px !important; }
body.csw-host .RadWindow .rwDialog.rwConfirmDialog .rwDialogText { margin-left: 0 !important; padding-left: 0 !important; }
.csw.csw-lite:not([data-cswcollapsed]) .csw-expand i { transform: rotate(180deg); }
/* action links and extra filters that used to sit in the title bar: one row at the top of the body */
.csw .csw-actions { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 6px 16px; padding: 8px 12px 2px; font-size: 12px; }
.csw .csw-actions:empty { display: none; }
.csw .csw-actions a { color: var(--csw-accent-ink, #7a26a8); text-decoration: none; }
.csw .csw-actions a:hover { text-decoration: underline; }
/* (title bar geometry is defined with the collapse rules above) */
.csw.csw-lite .csw-title { color: inherit; font-size: 14px; }
.csw.csw-lite .csw-title small { color: #7b8794; border-left-color: #e3e7ec; margin-left: 10px; padding-left: 10px; }
.csw.csw-lite .csw-tools { color: #7b8794; gap: 12px; flex-wrap: wrap; justify-content: flex-end; }
.csw.csw-lite .csw-tools a { color: #4a5866; }
.csw.csw-lite .csw-tools .csw-link-dark { color: var(--csw-accent-ink, #7a26a8); }
.csw.csw-lite .csw-stamp { color: #7b8794; }
.csw.csw-lite .csw-tools .csw-tabs { gap: 2px; }
.csw.csw-lite .csw-tools .csw-tab { padding: 4px 9px; font-size: 11.5px; }
.csw.csw-lite .csw-att { padding-top: 6px; }
/* KPI strip: always four aligned columns (a widget with three stats leaves the last empty), one
   type scale, one colour rule (ink; red / amber only when the number is an alarm), the note
   inline after the number while it fits, else on its own line under it (wrapping by phrase) */
.csw .csw-strip { display: grid; grid-template-columns: repeat(4, 1fr); background: transparent; border-radius: 0; margin: 4px 0 0; padding: 0; }
.csw .csw-stat { min-width: 0; padding: 8px 14px 10px; display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 8px; row-gap: 3px; position: relative; }
.csw .csw-stat + .csw-stat:before { content: ""; position: absolute; left: 0; top: 10px; bottom: 10px; width: 1px; background: #dfe4e9; }
.csw .csw-stat .l { order: 0; flex-basis: 100%; font-size: 10.5px; color: #7b8794; letter-spacing: .5px; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.csw .csw-stat .v { order: 1; font-size: 20px; font-weight: 600; color: inherit; line-height: 1.1; font-variant-numeric: tabular-nums; white-space: nowrap; }
/* the note: beside the number while it fits, else on its own line under it, wrapping by phrase (CswWidgetControl.Phrases) - no
   ellipsis (the owner, 13 Oct 2026) */
.csw .csw-stat .n { order: 2; font-size: 11px; color: #7b8794; line-height: 1.3; min-width: 0; text-wrap: pretty; }
.csw .csw-stat .n b { font-weight: 600; color: #4a5866; }
.csw .csw-stat .v.k-warn { color: #d97706; } .csw .csw-stat .v.k-bad { color: #dc2626; }
.csw .csw-stat .v.k-good, .csw .csw-stat .v.k-info { color: inherit; }
/* the "big" stat (leave balance) is a normal column now: same size as the rest */
.csw .csw-stat.big { background: transparent; border-radius: 0; margin: 0; box-shadow: none; }
.csw .csw-stat.big .v { font-size: 20px; }
.csw .csw-stat.big .l { color: #7b8794; }
.csw.csw-lite .panel-content { padding: 4px 12px 8px; }
/* the per-widget colours on the light ground */
.csw.csw-lite .csw-good { color: #16a34a !important; }
.csw.csw-lite .csw-bad { color: #dc2626 !important; }
.csw.csw-lite .csw-warn { color: #d97706 !important; }
/* segmented switch (Internal / Sales, status modes) */
/* one switch style everywhere: the tab look (soft accent on the selected one, count bubble) */
.csw .csw-seg { display: inline-flex; gap: 2px; font-size: 11px; }
.csw .csw-seg a, .csw .csw-seg span { padding: 4px 8px; border-radius: 7px; color: #7b8794; cursor: pointer; text-decoration: none; white-space: nowrap; user-select: none; line-height: 1.4; }
.csw .csw-seg a b { display: inline-block; min-width: 15px; text-align: center; font-weight: 600; font-size: 10px; padding: 0 5px; border-radius: 7px; background: #eef1f4; color: #4a5866; margin-left: 4px; line-height: 15px; }
.csw .csw-seg a:hover { text-decoration: none; background: #eef1f4; }
.csw .csw-seg .on, .csw .csw-seg a.on:hover { background: var(--csw-accent-soft, #f1e4fb); color: var(--csw-accent-ink, #7a26a8); }
.csw .csw-seg a.on b { background: var(--csw-accent, #9b30d8); color: #fff; }
.csw.csw-lite .csw-tools .csw-seg a.on { color: var(--csw-accent-ink, #7a26a8); }
.csw.csw-lite .csw-tools .csw-seg a.on b { color: #fff; }
/* the same switch on the dark title strip (Assets: by count / by value) */
.csw .kpi-top .csw-seg a { color: rgba(255,255,255,.75); }
.csw .kpi-top .csw-seg a:hover { background: rgba(255,255,255,.12); }
.csw .kpi-top .csw-seg .on, .csw .kpi-top .csw-seg a.on:hover { background: rgba(255,255,255,.2); color: #fff; }
/* light-header dropdown (branches) */
.csw.csw-lite .csw-tools .RadDropDownList { font-size: 12px; }

/* ---- chart picker ---- */
.csw .csw-picker { display: flex; align-items: center; gap: 6px; padding: 10px 8px 2px; flex-wrap: wrap; }
.csw .csw-picker-label { font-size: 11px; letter-spacing: .5px; text-transform: uppercase; color: #7b8794; margin-right: 2px; }
.csw .csw-chip { font-size: 11.5px; padding: 2px 10px; border-radius: 11px; border: 1px solid #e3e7ec; color: #4a5866; cursor: pointer; user-select: none; white-space: nowrap; }
.csw .csw-chip.on { background: var(--csw-accent-soft, #f1e4fb); border-color: var(--csw-accent-line, #d8b4ef); color: var(--csw-accent-ink, #7a26a8); font-weight: 500; }
.csw .csw-picker-hint { font-size: 11px; color: #b7c0c9; margin-left: 2px; }
.csw .csw-filters { display: flex; align-items: center; gap: 10px; margin-left: auto; }

/* ---- charts: thin rounded border, chart fills its box ----
   A box is never wider than half the row (the owner, 27 Sep 2026): a lone chart stretched across the whole widget looked
   worn out. One chart sits in the left half, two share the row, three take thirds. 7px = half the 14px gap. */
.csw .csw-charts { display: flex; gap: 14px; padding: 8px 8px 0; align-items: stretch; }
.csw .csw-chart-box { flex: 1 1 0; min-width: 0; max-width: calc(50% - 7px); box-sizing: border-box; border: 1px solid #e3e7ec; border-radius: 8px; padding: 10px 12px 6px; overflow: hidden; }
.csw .csw-chart-box .RadHtmlChart { width: 100% !important; }
.csw .csw-cap { font-size: 13px; font-weight: 500; color: inherit; text-align: left; }
.csw .csw-note { font-size: 11px; color: #4a5866; text-align: left; margin: 1px 0 6px; min-height: 14px; }
.csw .csw-trend-pending { height: 240px; display: flex; align-items: center; justify-content: center; color: #7b8794; font-size: 12px; }

/* ---- list block: head, tabs, link ---- */
.csw .csw-att { padding: 8px 8px 6px; }
/* S6 (the Marketing 360 widget, 20 Oct 2026): an open section with the attention block's head - never closed on load, its links kept in the head */
.csw .csw-sec { padding: 0 8px; }   /* 21 Oct 2026: the panel-content carries the 20 px above it; the title carries the chip row rhythm (below) */
.csw .csw-sec .csw-att-head { margin-bottom: 2px; }
.csw .csw-sec-links { margin-left: auto; display: flex; align-items: center; gap: 14px; }
.csw .csw-sec-note { margin-left: auto; }   /* a note at the head's right: inline, so its <b> words keep their spaces (csw-sec-links is a flex row) */
/* S6-c round 4 (the owner, 21 Oct 2026: "too much white space for this section"): the open section carries no top padding (the panel-content
   gives 20 px) and its title the chip row's 4 px; the first section pulls 6 px into that padding so the tiles band, the block and the charts row
   sit at near-even gaps (18 / 10 / 10 at 1440 px). An EMPTY Needs a hand - the all-clear panel is its only body - is HIDDEN (the owner: nothing to
   act on, nothing to show; the one-row version of the same day lasted an hour). :has marks the state without a code change (this file uses
   :has already, head rules of S6-c). With rows the block keeps its table head and rows. */
.csw .csw-sec .csw-att-title { padding: 4px 0; }
.csw .panel-content > .csw-sec:first-child { margin-top: -6px; }
/* Needs attention (the owner, 21 Oct 2026): a SMALL plain link under the charts - the orange warning icon, the words and the count, no message,
   no chip ("do not emphasise it") - that opens the rows in a RadWindow (.csw-pop wraps the table so the list rules apply); not rendered when
   nothing needs attention. The first item is the link's tooltip. */
.csw .csw-attn { display: inline-block; font-size: 11.5px; color: #7b8794; text-decoration: none; }   /* on the picker row, top right, before the page links (21 Oct 2026) */
.csw .csw-note.csw-muted { color: #9aa7b4; }   /* the store lines under the charts, muted (the owner, 21 Oct 2026) */
.csw .csw-note.csw-muted b { font-weight: 500; color: #7b8794; }
.csw .csw-attn .fa { color: #d97706; margin-right: 5px; }
.csw .csw-attn:hover { color: #4a5866; text-decoration: underline; }
.csw.csw-pop { padding: 12px 14px; }
/* attention bar: title left, switches pushed right, a gap before the rows; links and notes live in the foot row */
.csw .csw-att-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.csw .csw-att-head .csw-tabs { margin-left: auto; }
.csw .csw-att-foot { display: flex; align-items: center; justify-content: flex-end; gap: 16px; padding: 8px 4px 2px; font-size: 12px; color: #7b8794; }
.csw .csw-att-foot a { color: var(--csw-accent-ink, #7a26a8); text-decoration: none; }
.csw .csw-att-foot a:hover { text-decoration: underline; }
.csw .csw-att[data-cswattcollapsed] > .csw-att-foot { display: none; }
.csw .csw-att[data-cswattcollapsed] .csw-att-head { margin-bottom: 0; }
.csw .csw-att-title { font-size: 12.5px; font-weight: 600; color: inherit; padding: 8px 0; }
/* chart widgets: the attention block is closed on load (charts only); its title toggles it */
.csw .csw-att[data-cswattcollapsible] .csw-att-title { cursor: pointer; user-select: none; }
.csw .csw-att[data-cswattcollapsible] .csw-att-title:after { content: "\f107"; font-family: FontAwesome; display: inline-block; margin-left: 10px; font-size: 13px; color: #9aa7b4; transition: transform .15s ease; }
.csw .csw-att[data-cswattcollapsed] .csw-att-title:after { transform: rotate(-90deg); }
.csw .csw-att[data-cswattcollapsed] > :not(.csw-att-head) { display: none; }
/* the counter tabs stay visible while closed (they are the invitation to open) */
.csw .csw-att[data-cswattcollapsed] .csw-tabs { opacity: .92; }
.csw .csw-tabs { display: flex; gap: 2px; }
.csw .csw-tab { padding: 4px 8px; font-size: 11px; color: #7b8794; cursor: pointer; border-radius: 7px; user-select: none; line-height: 1.4; white-space: nowrap; }
.csw .csw-tab b { display: inline-block; min-width: 15px; text-align: center; font-weight: 600; font-size: 10px; padding: 0 5px; border-radius: 7px; background: #eef1f4; color: #4a5866; margin-left: 4px; line-height: 15px; }
.csw .csw-tab.on { background: var(--csw-accent-soft, #f1e4fb); color: var(--csw-accent-ink, #7a26a8); }
.csw .csw-tab.on b { background: var(--csw-accent, #9b30d8); color: #fff; }
.csw .csw-tab b.bad { background: #dc2626; color: #fff; }
.csw .csw-tab b.k-bad { background: #dc2626; color: #fff; }
.csw .csw-tab b.warn { background: #d97706; color: #fff; }
.csw .csw-tab b.k-warn { background: #d97706; color: #fff; }
.csw .csw-link-dark { font-size: 12px; color: var(--csw-accent-ink, #7a26a8); text-decoration: none; }

/* ---- list rows: soft bands with the rounded stripe; the stripe is the theme colour and turns
        red / amber only where it means something (overdue / expiring) ---- */
.csw table.csw-list { width: 100%; border-collapse: separate; border-spacing: 0 3px; margin-top: 0; }
.csw .csw-list th { text-align: left; font-size: 10.5px; letter-spacing: .5px; text-transform: uppercase; color: #7b8794; font-weight: 600; padding: 4px 10px 2px; border-bottom: 0; }
.csw .csw-list td { padding: 7px 10px; vertical-align: middle; text-align: left; font-size: 12px; color: #4a5866; background: #fbfbfd; border-top: 1px solid #eef1f4; border-bottom: 1px solid #eef1f4; }
.csw .csw-list tbody tr:nth-child(even) td { background: #f4f5f8; }
.csw .csw-list td:first-child { border-left: 3px solid var(--csw-theme-line, #c9cbe0); border-radius: 8px 0 0 8px; }
.csw .csw-list td:last-child { border-right: 1px solid #eef1f4; border-radius: 0 8px 8px 0; }
.csw .csw-list tr.k-bad td:first-child { border-left-color: #dc2626; }
.csw .csw-list tr.k-warn td:first-child { border-left-color: #d97706; }
.csw .csw-list tbody tr:hover td { background: #f1f3f6; }
.csw .csw-list th.num, .csw .csw-list td.num { text-align: right; white-space: nowrap; }
.csw .csw-list .opp-no { display: block; font-size: 10.5px; font-weight: 400; color: #7b8794; line-height: 1.3; font-variant-numeric: tabular-nums; }   /* a document number sits inside the name's link (24 Sep 2026): one click target for both */
.csw .csw-list .opp a { color: inherit; text-decoration: none; font-weight: 600; }
.csw .csw-list .opp a:hover { color: var(--csw-accent-ink, #7a26a8); }
.csw .csw-list .opp .csw-note { margin: 0; min-height: 0; }
.csw .csw-list .opp .csw-thumb { float: left; width: 44px; height: 30px; margin: 2px 8px 0 0; border-radius: 6px; object-fit: cover; background: #eef1f4; }   /* a vehicle's photo before the trip (My Trips, 13 Oct 2026) */
.csw .csw-list td.ctx { font-weight: 500; }
.csw .csw-list td.ctx.bad { color: #dc2626; }
.csw .csw-list td.ctx.k-bad { color: #dc2626; }
.csw .csw-list td.ctx.warn { color: #d97706; }
.csw .csw-list td.ctx.k-warn { color: #d97706; }
.csw .csw-list td.ctx.soon { color: #3b82f6; }
.csw .csw-list td.ctx.k-soon { color: #3b82f6; }
.csw .csw-empty { padding: 16px 8px; font-size: 12px; color: #7b8794; text-align: left; }

/* ---- pills: soft tint, dark text of the same hue (calmer than solid fills, still 4.5:1) ---- */
.csw .csw-pill { display: inline-block; font-size: 10.5px; font-weight: 600; letter-spacing: .3px; padding: 2px 9px; border-radius: 10px; color: #4a5866; background: #eef1f4; white-space: nowrap; line-height: 1.5; }
.csw .csw-pill.k-good { background: #e6f6ec; color: #16a34a; }
.csw .csw-pill.k-warn { background: #fdf0dc; color: #a35a05; }
.csw .csw-pill.k-bad { background: #fde8e8; color: #dc2626; }
.csw .csw-pill.k-info { background: #e8f0fe; color: #2f6fd9; }
.csw .csw-pill.k-ghost { background: #f4f6f8; color: #7b8794; }
/* the older stage / movement pills (CRM attention list) follow the same family */
.csw .csw-stage { display: inline-block; font-size: 10.5px; font-weight: 600; padding: 2px 9px; border-radius: 10px; background: #eef1f4; color: #4a5866; white-space: nowrap; }
.csw .csw-mv { display: inline-block; font-size: 10.5px; font-weight: 600; padding: 2px 9px; border-radius: 10px; margin-left: 6px; white-space: nowrap; background: #d97706; color: #fff; }
.csw .csw-mv.push { background: #dc2626; color: #fff; }

/* ---- row action button (I'm back): pushed to the right of its cell, arrow, accent colour ---- */
.csw .csw-cell-actions { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.csw .csw-btn { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 600; padding: 4px 11px; border-radius: 7px; background: #9b30d8; color: #fff; cursor: pointer; white-space: nowrap; box-shadow: 0 1px 2px rgba(31,41,51,.15); user-select: none; margin-left: auto; }
.csw .csw-btn { background: var(--csw-accent, #9b30d8); }
.csw .csw-btn:hover { background: var(--csw-accent-ink, #8626bd); }
.csw .csw-btn i { font-size: 11px; }

/* ---- days chip: its own column, number + unit ---- */
.csw .csw-days { display: inline-flex; align-items: baseline; gap: 3px; font-variant-numeric: tabular-nums; font-weight: 600; font-size: 13px; padding: 2px 8px; border-radius: 8px; background: #eef1f4; color: #4a5866; white-space: nowrap; }
.csw .csw-days small { font-size: 10px; font-weight: 500; color: #7b8794; }
.csw .csw-days.k-bad { background: #fde8e8; color: #dc2626; } .csw .csw-days.k-bad small { color: #dc2626; }
.csw .csw-days.k-warn { background: #fdf0dc; color: #d97706; } .csw .csw-days.k-warn small { color: #d97706; }
.csw .csw-days.k-info { background: #e8f0fe; color: #3b82f6; } .csw .csw-days.k-info small { color: #3b82f6; }
.csw .csw-days.k-good { background: #e6f6ec; color: #16a34a; } .csw .csw-days.k-good small { color: #16a34a; }

/* ---- date-range rail: start -> today -> end ---- */
.csw .csw-rail { display: grid; grid-template-columns: auto minmax(40px, 1fr) auto; align-items: center; gap: 8px; min-width: 150px; }
.csw .csw-rail .d { font-size: 11px; color: #4a5866; white-space: nowrap; font-variant-numeric: tabular-nums; }
.csw .csw-rail .d b { color: inherit; font-weight: 600; }
.csw .csw-rail .bar { position: relative; height: 4px; border-radius: 2px; background: #e3e7ec; }
.csw .csw-rail .bar i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 2px; background: #3b82f6; }
.csw .csw-rail .bar u { position: absolute; top: -3px; width: 10px; height: 10px; border-radius: 50%; background: #fff; border: 2px solid #3b82f6; box-sizing: border-box; transform: translateX(-50%); }
.csw .csw-rail.k-bad .bar i { background: #dc2626; } .csw .csw-rail.k-bad .bar u { border-color: #dc2626; }
.csw .csw-rail.k-warn .bar i { background: #d97706; } .csw .csw-rail.k-warn .bar u { border-color: #d97706; }
.csw .csw-rail.k-good .bar i { background: #16a34a; } .csw .csw-rail.k-good .bar u { border-color: #16a34a; }
.csw .csw-date { font-size: 11.5px; color: inherit; font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; }

/* ---- duration chip (trainings) ---- */
.csw .csw-dur { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; color: #4a5866; white-space: nowrap; }
.csw .csw-dur .clock { width: 13px; height: 13px; border-radius: 50%; border: 1.5px solid #4a5866; position: relative; flex: 0 0 13px; box-sizing: border-box; }
.csw .csw-dur .clock:before { content: ""; position: absolute; left: 5px; top: 2px; width: 1.5px; height: 4.5px; background: #4a5866; }
.csw .csw-dur .clock:after { content: ""; position: absolute; left: 5px; top: 5px; width: 3.5px; height: 1.5px; background: #4a5866; }
.csw .csw-dur b { font-weight: 600; color: inherit; font-variant-numeric: tabular-nums; }
.csw .csw-dur .h { display: inline-flex; gap: 2px; margin-left: 2px; }
.csw .csw-dur .h i { width: 5px; height: 8px; border-radius: 1px; background: #3b82f6; }
.csw .csw-dur .h i.half { background: linear-gradient(to right, #3b82f6 50%, #e3e7ec 50%); }

/* ---- profile band (TopNewV2): page chrome above the grid, one flex row of cells ---- */
.csw-top { display: flex; align-items: center; padding: 14px 10px; margin: 0 0 10px; box-sizing: border-box; width: 100%; }
.csw-top .csw-top-cell { padding: 0 28px; border-left: 1px solid #e3e7ec; min-width: 0; }
.csw-top .csw-top-cell:first-child { border-left: 0; }
.csw-top .csw-top-logo img { max-height: 72px; max-width: 160px; display: block; }
.csw-top .csw-top-user { display: flex; align-items: center; gap: 14px; }
.csw-top .csw-top-photo img { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; display: block; }
.csw-top .csw-top-name .n { font-size: 14px; font-weight: 600; color: inherit; white-space: nowrap; }
.csw-top .csw-top-name .t { font-size: 11.5px; color: #7b8794; margin-top: 2px; }
.csw-top .csw-top-lock { margin-left: 6px; opacity: .6; color: #4a5866; text-decoration: none; font-size: 12px; }
.csw-top .csw-top-badges { display: flex; gap: 6px; margin-top: 6px; }
.csw-top .csw-top-weather { color: #4a5866; zoom: .9; }
.csw-top .csw-top-notify { min-width: 150px; align-self: flex-start; padding-top: 4px; }
.csw-top .icon-in-widget { display: block; font-size: 12px; color: #4a5866; margin-bottom: 5px; white-space: nowrap; }
.csw-top .icon-in-widget span { top: 0 !important; width: 20px; }
.csw-top .icon-in-widget:hover { font-weight: 600; cursor: pointer; }
.csw-top .birthday:before { font-size: 11px; margin-right: 0; margin-left: 0; }
.csw-top .csw-top-attendance { margin-left: auto; text-align: center; padding-right: 20px; }

/* ---- skeleton ---- */
.csw-skeleton .sk { background: rgba(31,41,51,.08); border-radius: 4px; animation: csw-pulse 1.4s ease-in-out infinite; }
.csw-skeleton .panel-content .sk, .csw-skeleton.csw-lite .sk { background: #eef1f4; }
.csw-skeleton .sk-row { display: flex; gap: 14px; padding: 10px 8px; }
.csw-skeleton .sk-row .sk { flex: 1; }
.csw-skeleton.csw-lite .csw-lite-head .sk-row { padding: 4px 0 12px; }
@keyframes csw-pulse { 0% { opacity: .55; } 50% { opacity: 1; } 100% { opacity: .55; } }
@media (prefers-reduced-motion: reduce) { .csw-skeleton .sk { animation: none; } }

/* ---- phone / tablet (S3 HomeV2, 25 Sep 2026, docs/RESPONSIVE-V2.md R-13, after the owner's iPhone photos). The host grid (HomeV2.aspx head) already
   goes to one column under 900px; what overflowed was inside the widgets: the mega widgets' six-tile KPI row, their three chart boxes side by
   side, and the list tables. A mega widget's tiles wrap (three per row on a tablet, two on a phone), its chart row shows ONE chart at a time -
   swiped, the chips above it still pick the set; a list table scrolls sideways inside its widget; a lite widget's stat strip goes two per row
   on a phone. Nothing in the widgets' markup changes. ---- */
@media (max-width: 1023px) {
    .csw .csw-tiles { flex-wrap: wrap; }
    .csw .csw-tile { flex: 1 1 33.333%; box-sizing: border-box; padding: 6px 10px 8px; border-bottom: 1px solid rgba(31,41,51,.1); }
    .csw .csw-tile:first-child { padding-left: 10px; }
    .csw .csw-tile:nth-child(3n) { border-right: 0; }
    .csw .csw-tile:nth-last-child(-n+3) { border-bottom: 0; }
    /* a list table (tasks, contracts, leaves ...) scrolls inside the widget instead of pushing past its edge */
    .csw :has(> table.csw-list) { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .csw table.csw-list { min-width: 100%; }
}
@media (max-width: 640px) {
    .csw .kpi-top { padding: 0 12px 10px !important; }
    .csw:not(.csw-lite) .csw-head { margin: 0 -12px 10px; padding: 9px 14px; }
    /* the head (the owner, 25 Sep 2026): the title at the left with its context line under it, flush; the measure switch (Overall / Mine) at the right on the
       same row; the host's tool cluster (stamp, refresh, grip, hide - a desktop affair) gone */
    .csw .csw-head { flex-wrap: nowrap; align-items: flex-start; gap: 8px; }
    .csw .csw-head, .csw .csw-title { text-align: left; }   /* the band inherits the old panel skin's centring; the title reads from the left (the owner, 25 Sep 2026) */
    .csw .csw-title { flex: 1 1 auto; min-width: 0; }
    .csw .csw-title small, .csw.csw-lite .csw-title small { display: block; margin: 2px 0 0 !important; padding: 0 !important; border-left: 0 !important; }
    .csw .csw-tools { flex: none; margin-left: auto; align-self: center; }
    .csw .csw-head > .radio-white { flex: none; margin: 0; padding-left: 0; border-left: 0; align-self: center; }   /* the title grows, so the switch keeps the right edge on a phone */
    .csw .csw-ctl { display: none !important; }
    /* the chart chips: the three picked charts on one line as a plain caption - not tappable (a tap would drop the chart from the set with no way to bring it
       back on a phone; the set is chosen on a desktop - the owner, 25 Sep 2026); the word, the hint and the unpicked chips gone */
    .csw .csw-picker { flex-wrap: wrap; gap: 8px; padding: 10px 8px 4px; }
    /* a widget's filters (the HR, assets, projects and invoices widgets: a radio list and a branch picker inside the chip row) take a row of their own ABOVE the chips (the owner, 25 Sep 2026) */
    .csw .csw-filters { order: -1; flex: 0 0 100%; flex-wrap: wrap; gap: 6px 14px; margin: 0 0 4px; }
    .csw .csw-picker-label, .csw .csw-picker-hint, .csw .csw-chip:not(.on) { display: none; }
    .csw .csw-chip { pointer-events: none; }
    /* the mega widget's KPI row: two tiles per row */
    .csw .csw-tile { flex: 1 1 50%; }
    .csw .csw-tile:nth-child(3n) { border-right: 1px solid rgba(31,41,51,.1); }
    .csw .csw-tile:nth-child(2n) { border-right: 0; }
    .csw .csw-tile:nth-last-child(-n+3) { border-bottom: 1px solid rgba(31,41,51,.1); }
    .csw .csw-tile:nth-last-child(-n+2) { border-bottom: 0; }
    .csw .csw-value { font-size: 20px; }
    /* the chart row: one box at a time, swiped with snap; the chips keep choosing which charts are in the row */
    .csw .csw-charts { overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; gap: 10px; }
    .csw .csw-charts::-webkit-scrollbar { display: none; }
    .csw .csw-chart-box { flex: 0 0 100%; max-width: none; scroll-snap-align: start; }
    /* a lite widget's stat strip: two per row, the divider only before the second of a pair */
    .csw .csw-strip { grid-template-columns: 1fr 1fr; }
    .csw .csw-stat { padding: 8px 12px 10px; }
    .csw .csw-stat + .csw-stat:nth-child(odd):before { display: none; }
    .csw .csw-stat:nth-child(n+3) { border-top: 1px solid #eef1f4; }
}


/* -------------------------------------------------------------------------------- RadAutoCompleteBox ------------------------------------------------------------------------*/

.racShowAll {
    border: none !important;
    background-color: #455a64 !important;
}

.RadAutoCompleteBox_Material .racTokenList:before {
    left: 0 !important;
    right: 0 !important;
}

.RadAutoCompleteBox_Material .racInput {
    padding: 2px !important;
    margin-left: -8px !important;
}

.RadAutoCompleteBox_Material .racEmptyMessage {
    /*padding: 3px !important;*/
    /*margin-left: -8px !important;*/
    opacity: .5 !important;
    font-style: italic !important;
    padding-left: 1px !important;
}



.RadDropDownTree_Material .rddtInner {
    padding: 3px 0 !important;
}


    .RadDropDownTree_Material .rddtInner:before {
        left: 0 !important;
        right: 10px !important;
    }

.RadDropDownTree_Material .rddtFocused, .RadDropDownTree_Material .rddtHovered {
    padding-left: 2px !important;
}


.racSlide {
    z-index: 999999 !important;
}


/* -------------------------------------------------------------------------------- RadButton ------------------------------------------------------------------------*/

.RadButton_Material.rbButton {
    /*margin: 0 !important;
    padding: 2px 10px 0 !important;
    height: 35px !important;*/
}

.RadButton .rbText {
    vertical-align: middle !important;
}

.RadButton_Material.RadButton.rbButton.rbDisabled, .RadButton_Material.RadButton.rbButton.rbPrimaryButton.rbDisabled {
    /*color: white !important;*/
}

.RadButton_Material.rbPrimaryButton .rbIcon {
    color: #f1f1f1 !important;
}

.RadButton_Material.rbPrimaryButton {
    background-color: #0487c4 !important;
}

    .RadButton_Material.rbPrimaryButton.rbHovered, .RadButton_Material.rbPrimaryButton.rbFocused {
        background-color: #2196f3 !important;
    }

.RadButton_Material.RadButton.rbButton.rbDisabled, .RadButton_Material.RadButton.rbButton.rbPrimaryButton.rbDisabled {
    color: gray !important;
}

.RadButton_Material.RadCheckBox .rbText, .RadButton_Material.RadRadioButton .rbText {
    font-weight: inherit !important;
}
/*.RadCheckBox .rbIcon {
    margin: -2px .35714286em 0 0 !important
}*/
.RadButton_Material.rbCheckBox .rbText {
    font-size: inherit !important;
    /*    margin-left: -6px !important;
    vertical-align: top !important;*/
}

.MetrialFakeButton, .rwzButton {
    cursor: pointer;
    border-width: 0;
    text-transform: uppercase;
    border-color: #cfd8dc;
    color: #455a64;
    background-color: #f4f7f8;
    -webkit-transition: all .2s ease-in-out;
    -moz-transition: all .2s ease-in-out;
    -ms-transition: all .2s ease-in-out;
    -o-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;
    -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.12),0 1px 2px rgba(0,0,0,0.2);
    -ms-box-shadow: 0 1px 3px rgba(0,0,0,0.12),0 1px 2px rgba(0,0,0,0.2);
    box-shadow: 0 1px 3px rgba(0,0,0,0.12),0 1px 2px rgba(0,0,0,0.2);
    margin: 0;
    line-height: 1.1em !important;
    padding: 7px 14px !important;
    text-decoration: none;
    -ms-border-radius: 14px;
    border-radius: 14px;
}

    .MetrialFakeButton:hover, .rwzButton:hover {
        border-color: #e7eaec;
        color: #455a64;
        background-color: #e7eaec;
    }

    .MetrialFakeButton.simpleFrame {
        border: 1px solid #e0e0e0;
        -webkit-box-shadow: none;
        -ms-box-shadow: none;
        box-shadow: none;
        font-size: 11px;
    }

    .MetrialFakeButton.rbPrimary {
        background-color: #0487c4 !important;
        color: #fff;
    }

        .MetrialFakeButton.rbPrimary:hover {
            background-color: #2196f3 !important;
            color: #fff;
        }

    .MetrialFakeButton.rbDanger {
        background-color: crimson !important;
        color: #fff;
    }

        .MetrialFakeButton.rbDanger:hover {
            background-color: rgb(233, 52, 88) !important;
            color: #fff;
        }

    .MetrialFakeButton.rbGreen {
        background-color: #55ae3a !important;
        color: #fff;
    }

    .MetrialFakeButton.rbGreen:hover {
        background-color: #82c96c !important;
        color: #fff;
    }


.RadButton_Material.rbButton.rbIconOnly {
    padding: 8px 4px 8px 14px !important;
}

/*.RadButton_Material .rbIcon {
    height: 15px !important;
}*/
    .slimPushBtn {
    background-color: transparent !important;
    font-size: 11px !important;
    box-shadow: none !important;
    padding: 5px !important;
}

.remove-shadow {
    box-shadow: none !important;
    border: 1px solid #CFD8DC !important;
}

.RadButton.rbRounded:not(.k-flat) {
    border-radius: 20px !important;
}

.RadButton_Material.RadRadioButton .rbText {
    color: #455a64 !important;
}

/* -------------------------------------------------------------------------------- RadCalendar ------------------------------------------------------------------------*/

.RadCalendar_Material .rcTitlebar {
    border-color: #757575 !important;
    background-color: #757575 !important;
}

.RadCalendarTimeView_Material th {
    background-color: #757575 !important;
}

.RadCalendar_Material .rcPrev, .RadCalendar_Material .rcNext, .RadCalendar_Material .rcFastPrev, .RadCalendar_Material .rcFastNext {
    background-color: #757575 !important;
}

.RadCalendar_Material .rcPrev, .RadCalendar_Material .rcNext, .RadCalendar_Material .rcFastPrev, .RadCalendar_Material .rcFastNext {
    background-color: #757575 !important;
}

    .RadCalendar_Material .rcPrev:hover, .RadCalendar_Material .rcPrev:focus, .RadCalendar_Material .rcPrev:active, .RadCalendar_Material .rcNext:hover, .RadCalendar_Material .rcNext:focus, .RadCalendar_Material .rcNext:active, .RadCalendar_Material .rcFastPrev:hover, .RadCalendar_Material .rcFastPrev:focus, .RadCalendar_Material .rcFastPrev:active, .RadCalendar_Material .rcFastNext:hover, .RadCalendar_Material .rcFastNext:focus, .RadCalendar_Material .rcFastNext:active {
        background-color: #9E9E9E !important;
    }

.RadCalendarPopup {
    z-index: 111234 !important;
}

.RadCalendarFastNavPopup {
    z-index: 111235 !important;
}

.RadCalendar_Material .rcMain .rcOtherMonth a {
    /*color: #2196f3 !important;*/
}

.RadCalendar_Material .rcToday a {
    font-weight: bold!important; 
    color: black!important;
    text-decoration: underline !important;
}


.RadPicker_Material .rcCalPopup {
    width: 15px !important;
}

.RadInput_Material input.riTextBox {
    padding-bottom: 2px !important;
    padding-top: 4px !important;
}

.RadCalendar span.rcTitle {
    padding-top: 8px !important;
}

.RadPicker_Material, .RadPicker_Material .RadInputHovered {
    box-shadow: none !important;
}


.RadCalendar_Material span.t-ripple, .RadCalendar_Material span.t-ripple-container {
    display: none !important;
}

.RadCalendar_Material .rcSelected a {
    color: white !important;
    font-weight: 500;
}

.RadCalendarMonthView_Material .rcSelected {
    background-color: #f4f7f8 !important;
    font-weight: bold !important;
}

.slim-date-range.RadCalendar_Material .rcRow th,
.slim-date-range.RadCalendar_Material .rcRow a,
.slim-date-range.RadCalendar_Material .rcRow span {
    padding: 3px !important;
    font-size: 10px;
}

.slim-date-range.RadCalendarMultiView_Material .rcMainTable .rcTitle {
    padding: 3px !important;
    font-size: inherit !important;
    font-weight: 500;
}

.slim-date-range.RadCalendar .rcPrev, .RadCalendar .rcNext, .RadCalendar .rcFastPrev, .RadCalendar .rcFastNext {
    padding: 3px !important;
}

.slim-date-range.RadCalendarMultiView_Material span.rcTitle {
    font-size: inherit !important;
}

.slim-date-range.RadCalendar_Material .rcTitlebar {
    padding: 0 !important;
}
.k-tooltip.k-chart-tooltip {
    padding: 10px 20px;
    line-height: 20px !important;
    font-family: inherit !important;
    margin-top: 35px;
}

.k-tooltip.k-chart-tooltip a:hover {
    color: white !important;
    opacity: 0.5;
}



/* -------------------------------------------------------------------------------- RadComboBox ------------------------------------------------------------------------*/

.RadComboBox_Material, .RadComboBox_Material .rcbInner {
    color: inherit !important;
}

.RadComboBox {
    line-height: 1 !important;
}

.RadComboBox .rcbInput {
    padding: 0 20px 0 0 !important;
}

.RadComboBox_Material .rcbInner {
    padding: 4px 0 !important;
    -ms-transition: all .2s ease-in-out;
    -o-transition: all .2s ease-in-out;
    -webkit-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;
}

.RadComboBoxDropDown_Material .rcbMoreResults {
    color: #fff;
    border: none !important;
    background-color: #455a64 !important;
    padding: 3px 13px !important;
}

.RadComboBoxDropDown_Material {
    padding: 0 !important;
}

.RadComboBoxDropDown .rcbMoreResults a {
    color: white !important;
}

.RadComboBox_Material .rcbActionButton {
    width: 17px !important;
    padding: 4px 0 !important;
}

.RadComboBox_Material .rcbFocused, .RadComboBox_Material .rcbHovered {
    padding-left: 2px !important;
}

.RadComboBox_Material.rcbNoHover .rcbHovered {
    border-bottom: 1px solid #CFD8DC !important;
    background-color: transparent !important;
    box-shadow: none !important;
    padding-left: 0px !important;
}

.RadComboBox_Material.rcbNoHover .rcbFocused {
    padding-left: 0px !important;
}

.rcbCheckAllItems {
    border-color: #E0E0E0 !important;
    background-color: #E0E0E0 !important;
    color: inherit !important;
}

.RadComboBoxDropDown .rcbItem > label {
    display: inline-block !important;
}

/** Template styles */
    .rcbSlide, .rddlSlide {
    z-index: 20000000 !important;
}

.rcbClear {
    margin: 0 25px 0 -35px;
    vertical-align: middle;
    opacity: .1;
    cursor: pointer;
    position: relative;
}

    .rcbClear:before {
        font-size: 13px;
        font-weight: normal !important;
        font-family: FontAwesome;
        content: "\f00d";
        color: #333;
    }

    .rcbClear:hover {
        opacity: 0.8 !important;
    }

.rcbTemplate {
    padding: 5px !important;
    *zoom: 1;
}
    .rcbHovered > label {
        display: inline-block !important;
    }

    .rcbTemplate:nth-child(even) {
        background: #f7f7f7
    }

    .rcbTemplate:nth-child(odd) {
        background: #FFF
    }

    .rcbTemplate:after {
        content: "";
        height: 0;
        clear: both;
        display: block;
    }

    .rcbTemplate .imageWrap {
        margin-right: 15px;
        float: left;
    }

        .rcbTemplate .imageWrap img {
            width: 60px;
            height: 60px;
            -ms-border-radius: 5px;
            border-radius: 50%;
            border: 1px solid #ccc;
        }


.RadComboBox .rcbEmptyMessage {
    -ms-opacity: .5 !important;
    opacity: .5 !important;
}


.RadComboBoxDropDown_Material .rcbCheckAllItems {
    padding: 6px 5px !important;
}

.RadComboBoxDropDown_Material .rcbCheckAllItemsHovered {
    padding: 6px 5px !important;
}

    .RadComboBoxDropDown .rcbCheckAllItems > label, .RadComboBoxDropDown_Material .rcbCheckAllItemsHovered > label {
        margin: -6px -2px !important;
    }

.full-opacity .rcbDisabled {
    -ms-opacity: 1 !important;
    opacity: 1 !important;
}

.full-opacity input[type="text"]:disabled {
    color: inherit !important;
    opacity: 1 !important;
}

.RadComboBoxDropDown_Material .rcbMoreResults div {
    margin-top: -17px !important;
    line-height: 20px !important;
}




/* -------------------------------------------------------------------------------- RadDropDownList ------------------------------------------------------------------------*/

.RadDropDownList_Material .rddlInner {
    padding: 5px 20px 5px 0 !important;
}

.RadDropDownList_Material .rddlFocused, .RadDropDownList_Material .rddlHovered {
    padding-left: 2px !important;
}

.RadDropDownList_Material .rddlIcon {
    right: 0 !important;
}

.RadDropDownList.full-opacity .rddlDisabled {
    opacity: 1 !important;
}

    .RadDropDownList.full-opacity .rddlDisabled .rddlSelect {
        display: none !important;
    }

li.rddlItemTemplate:not(:first-child) {
    border-top: 1px dotted #ccc !important;
}

.RadDropDownList .rddlDefaultMessage {
    -ms-opacity: .5 !important;
    opacity: .5 !important;
}

.RadDropDownList_Material .rddlSelect {
    padding: 4px 0 0 0 !important;
}

.rddl-read-only .rddlDisabled {
    opacity: 1 !important;
}

.rddl-read-only .rddlSelect {
    display: none
}

.red-bg {
    background-color: #ffecf4 !important;
}

.green-bg {
    background-color: #e8ffef !important;
}


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


/* -------------------------------------------------------------------------------- RadFileExplorer ------------------------------------------------------------------------*/

.RadFileExplorer .rfeFilterTxt {
    min-height: 2em !important;
}

.RadFileExplorer * {
    outline: none;
}

.RadFileExplorer_Material .rfeFilterContainer {
    /*background-color: #f4f7f8 !important;*/
    height: 50px !important;
    padding-top: 10px;
    padding-right: 5px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}


.RadWindow_Material .rwPromptInputContainer .rwPromptInput {
    padding: 0 !important;
}


.RadUpload .ruFileLI .ruButton {
    /*background-color: #e4e4e4 !important;*/
    padding: 7px 5px 8px 5px !important;
    border-radius: 0 2px 2px 0 !important;
    vertical-align: 0;
}

.RadUpload .ruFileLI .ruButton {
    vertical-align: 1px !important;
    float: right !important;
}

.RadUpload .ruFileLI {
    /*background-color: #f4f7f8 !important;*/
    /*border: 1px solid #eeeeee !important;*/
    border-radius: 2px !important;
    margin-top: 5px !important;
    margin-left: 6px !important;
}

.RadUpload_Material .ruFileLI .ruFileWrap {
    overflow: hidden !important;
    white-space: nowrap !important;
    text-overflow: ellipsis !important;
    width: 110px !important;
    font-size: 11px;
}

.ruUploadSuccess .radIcon:before {
    font-size: 15px !important;
    font-weight: normal !important;
    font-family: FontAwesome !important;
    display: inline-block !important;
    content: "\f00c" !important;
    background: none !important;
    top: -4px !important;
    left: 11px !important;
    color: #4caf50 !important;
}

.ruUploadFailure .radIcon:before {
    font-size: 15px !important;
    font-weight: normal !important;
    font-family: FontAwesome !important;
    display: inline-block !important;
    content: "\f12a" !important;
    background: none !important;
    top: -4px !important;
    left: 11px !important;
    color: crimson !important;
}

.RadUpload .radIcon {
    margin-right: 14px !important;
}

.RadUpload_Material {
    margin-left: -5px;
}

    .RadUpload_Material .ruSelectWrap {
        margin-top: 0 !important;
    }

    .RadUpload_Material .ruBrowse {
        padding: 5px 18px !important;
        /*border: 1px solid #eee !important;*/
        box-shadow: none !important;
    }

.RadGrid_Material .rgHeader, .RadGrid_Material th.rgResizeCol, .RadGrid_Material .rgHeaderWrapper {
    background-color: inherit !important;
}

/*.drop-here.RadUpload .ruBrowse {
    height: 160px !important;
    min-width: 24.285714em !important;
    text-transform: capitalize !important;
    color: gray !important;
}*/

.RadUpload .ruStyled .ruFileInput {
    height: 250px !important;
}

.RadUpload_Material .ruSelectWrap .ruBrowse {
    border-radius: 14px !important;
}

.ruBrowse::before {
    content: "\f0aa" !important;
    font-size: 13px;
    font-weight: normal !important;
    font-family: FontAwesome;
    margin-right: 5px;
}

/* -------------------------------------------------------------------------------- RadInput ------------------------------------------------------------------------*/

.RadInput {
    padding: 0 !important;
}

    .RadInput .riTextBox {
        padding: 2px 0 4px 0 !important;
    }

.RadInput_Material .riTextBox, .RadDropDownList_Material, .rddlPopup_Material {
    color: inherit !important;
}

/*.RadInput_Material .riDisabled {
    border-bottom-color: #cfd8dc !important;
}*/

.RadInput_Material .riEmpty, .RadInput_Material .riDisabled {
    opacity: 0.5 !important;
    font-style: italic !important;
}


.No-Border .RadInput {
    border-bottom-color: transparent !important;
}

/* -------------------------------------------------------------------------------- RadMenu ------------------------------------------------------------------------*/
#menuArea .RadMenu_Material {
    font-size: 14px;
    line-height: inherit !important;
}

    #menuArea .RadMenu_Material .rmRootGroup {
        color: white !important;
        background-color: transparent !important;
    }

        #menuArea .RadMenu_Material .rmRootGroup .rmRootLink:hover {
            background-color: rgba(255, 255, 255, 0.2) !important;
            color: white !important;
        }

        #menuArea .RadMenu_Material .rmRootGroup .rmExpanded > .rmRootLink {
            background-color: rgba(255, 255, 255, 0.3) !important;
            color: white !important;
        }

.RadMenu_Material .rmGroup .rmLink .fa {
    margin-left: -23px !important;
    margin-right: 10px !important;
    text-align: center;
    width: 25px;
}

.RadMenu_Material .rmRootGroup.rmHorizontal > .rmItem {
    margin-right: -1px !important;
}

.RadMenu_Material .rmRootGroup .rmRootLink {
    padding: 7px 10px !important;
    font-size: 12px !important;
}

.RadMenu_Material .rmGroup {
    padding: 2px 0 !important;
}

#menuArea .RadMenu_Material .rmRootGroup {
    padding: 10px 0 !important;
}

#menuArea .RadMenu_Material .rmVertical li.rmSeparator {
    border-bottom-color: #EEEEEE !important;
}

.inner-menu {
    /*font-size: inherit !important;*/
}

    .inner-menu .rmRootGroup {
        background-color: transparent !important;
        padding: 0 !important;
    }

        .inner-menu .rmRootGroup .rmRootLink {
            text-decoration: underline;
            font-size: 12px !important;
            padding: 2px 5px !important;
        }

.RadMenu .rmSlide {
    z-index: 4000 !important;
}

.RadMenu.root { z-index: 5999 !important;}

.RadMenu_Material .rmRootGroup .rmSelected > .rmRootLink {
    color: inherit !important;
    background-color: transparent !important;
}

/* -------------------------------------------------------------------------------- RadNotification ------------------------------------------------------------------------*/

.RadNotification .rnContentWrapper .rnIcon {
    display: none !important;
}

.RadNotification .rnContent {
    padding: 1em 1.5em !important;
    -moz-min-width: 200px;
    -ms-min-width: 200px;
    -o-min-width: 200px;
    -webkit-min-width: 200px;
    min-width: 200px;
}

.RadNotification_Material .rnTitleBar {
    border-color: #EEEEEE !important;
    color: inherit !important;
    background-color: #EEEEEE !important;
}


.RadNotification .rnIconWarning:before {
    color: orange;
}

.RadNotification .rnIconOk:before {
    color: green;
}

.RadNotification .rnIconDeny:before {
    color: red;
}

.RadNotification {
    z-index: 1000000 !important;
}

.RadNotification_Material .rnTitleBar .rnTitleBarTitle {
    margin: -3px 0 !important;
}

.RadNotification_Material {
    overflow: hidden !important;
    height: auto !important;
    width: max-content !important;
}

.RadNotification .rnContentWrapper {
    height: auto !important;
}
/* ----------------------------------------------------------------------------- Ajax ----------------------------------------------------------------------- */
.RadAjax .raDiv {
    background-position: center top 30px !important;
}

/* --------------------------------------------------------------------------- RadToolTip --------------------------------------------------------------------*/
.RadToolTip_Material {
    background-color: #fff !important;
    color: inherit !important;
    border-color: #E0E0E0 !important;
    max-width: 355px;
    z-index: 8000000 !important;
    opacity: 1 !important;
}

.RadToolTip.rtVisibleCallout .rtCallout {
    display: none !important;
}

.specialToolTip.RadToolTip_Material .rtRelativeWrapper {
    padding: 6px 12px 6px 14px !important;
}

.RadToolTip_Material .rtRelativeWrapper {
    padding: 11px !important;
}

.RadToolTip_Material .rtCloseIcon:before {
    font-size: 13px !important;
    color: #455a64 !important;
    width: 10px !important;
    line-height: 0.6 !important;
}


.RadToolTip .rtTitleBar .rtTitleWrapper {
    padding: 0;
}

.RadToolTip_Material .rtTitleWrapper .rtTitle {
    font-size: 11px !important;
    color: #455a64;
}

.RadToolTip.rtRoundedCorner .rtTitleBar {
    background-color: #f9f9f9;
    margin: -11px;
    padding: 6px 6px 0 10px;
    margin-bottom: 10px;
    border-bottom: 1px solid lightgray;
}

.RadToolTip .rtTitleBar .rtTitleWrapper {
    padding: 0 !important;
}

/* ---------------------------------------------------------------------------- RadTileList --------------------------------------------------------------------*/
.RadTileList .rtlistWrapper {
    width: 11em !important;
}

/* ---------------------------------------------------------------------------- RadEditor --------------------------------------------------------------------*/

.RadEditor_Material .reEmptyMessage {
    padding: .35714em;
    font-style: italic;
    color: #000;
}

.RadEditor_Material .reContentArea b {
    font-weight: bold !important;
}


.redMainContainer.redTabStrip {
    padding: 0 !important;
}


.reLightweightDialog.RadForm_Material.redTableWizard body {
    height: 590px !important;
}

.hideRadEditorToolBar .RadEditor_Material .reEmptyMessage {
    padding: .35714em 0;
}

.hideRadEditorToolBar .RadEditor_Material .reToolBarWrapper {
    display: none;
}

.hideRadEditorToolBar .reContentArea {
    padding: 0 !important;
}

.hideRadEditorToolBar .reContent {
    background-color: transparent !important;
    border-top: none !important;
    top: 3px;
}

.hideRadEditorToolBar .RadEditor {
    border-width: 0 !important;
    border-bottom-color: #cfd8dc;
    border-bottom-width: 1px !important;
    padding: 3px 0;
    line-height: 1.42857;
    background: transparent;
    border-color: transparent;
    border-bottom-color: #cfd8dc;
    outline: 0;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.hideRadEditorToolBar .reContent:focus, .hideRadEditorToolBar .reContentArea:focus {
    outline: none !important;
    border-bottom-color: #8bc34a !important;
    border-bottom-width: 1px !important;
    -webkit-box-shadow: 0 -1px 0 0 #8bc34a inset !important;
    -ms-box-shadow: 0 -1px 0 0 #8bc34a inset !important;
    box-shadow: 0 -1px 0 0 #8bc34a inset !important;
    top: 2px;
}

/* ---------------------------------------------------------------------------- RadRotator --------------------------------------------------------------------*/
.RadRotator .rrClipRegion .rrItemsList {
    left: 0px !important;
}

.RadRotator_Material .rrClipRegion {
    background-color: transparent !important;
}


/* ---------------------------------------------------------------------------- RadListBox --------------------------------------------------------------------*/
.rlbItem {
    border-bottom: dotted 1px #eee !important;
}


/* ---------------------------------------------------------------------------- RadPanelBar --------------------------------------------------------------------*/
.RadPanelBar .rpLevel1 .rpExpanded {
    font-weight: bold;
}

.RadPanelBar .rpExpanded.rpRootLink {
    background-color: #e7eaec;
}

.RadPanelBar_Material .rpExpandable .rpExpandHandle {
    /*margin-top: -17px !important;*/
}

.RadPanelBar_Material .rpRootLink {
    /*padding: 8px 13px !important;*/
}


/* ---------------------------------------------------------------------------- RadCheckBoxList --------------------------------------------------------------------*/
/*.rbVerticalList button.RadButton.rbCheckBox {
    padding-right: 3.285714em !important;
}
*/
.rbVerticalList button.RadButton.rbCheckBox {
    padding-bottom: 7px !important;
}

.RadButton.RadCheckBox span.rbText.rbToggleCheckboxChecked {
    font-weight: 700;
    color: #455a64;
}

    .RadButton.RadCheckBox span.rbText.rbToggleCheckboxChecked:before {
        font-weight: normal !important;
    }

/* ---------------------------------------------------------------------------- RadCheckBox --------------------------------------------------------------------*/
/*.RadButton.RadCheckBox span.rbText {
    padding-left: 0.4em !important;
    line-height: 1em !important;
}*/

.RadButton_Material.RadCheckBox .rbText {
    color: #455A64 !important;
}

.slim-chkbox {
    border: 1px solid #ccc;
    padding: 3px 4px 1px 6px;
    line-height: 1.2em;
}

    .slim-chkbox .rbIcon {
        display: none;
    }

    .slim-chkbox .p-i-checkbox + .rbText {
        -ms-opacity: .5;
        opacity: .5;
    }

    .slim-chkbox .p-i-checkbox-checked + .rbText {
        -ms-opacity: 1;
        opacity: 1;
        color: white !important;
        background-color: #036c9c;
        padding: 4px 4px;
        border-radius: 3px;
        margin: -3px -4px -1px 0px;
    }

.RadButton.rbCheckBox .rbIcon {
    margin: 0 !important;
}

.RadButton_Material.rbCheckBox .rbIcon.rbToggleCheckboxChecked + .rbText,
.RadButton_Material.rbCheckBox .rbIcon.rbToggleCheckbox + .rbText {
    margin-left: 5px;
}

/* ---------------------------------------------------------------------------- RadRadioButton --------------------------------------------------------------------*/
.RadRadioButtonList {
    display: inline;
}

/*.RadButton_Material .rbText { margin-top: -3px !important; }*/

/*.RadButton_Material.RadRadioButton span.rbText {
    padding-left: 22px !important;
}*/
/*.RadButton_Material.rbRadioButton {
    padding-left: 8px !important;
}*/
.rbHorizontalList .RadButton {
    padding: 0 14px 0 0;
}

.RadButton .rbToggleRadio {
    /*margin: -2px .35714286em 0 -5px!important;*/
}

/*.RadButton .rbToggleRadioChecked:before, .RadButton .rbToggleRadio:before {
            top: .6em !important;
        }*/

.RadButton_Material.RadRadioButton .rbText {
    font-size: inherit !important;
}

.RadButton_Material.RadRadioButton span.rbText.rbToggleRadioChecked {
    font-weight: 700;
    color: #455a64;
}

    .RadButton_Material.RadRadioButton span.rbText.rbToggleRadioChecked:before {
        font-weight: normal !important;
    }

.RadButton_Material .rbToggleRadio:before, .RadButton_Material .rbToggleRadioChecked:before {
    font-size: 14px !important;
}

.rbHorizontalList .RadButton, .rbColumnList {
    line-height: 25px;
}

/* ---------------------------------------------------------------------------- RadDropDownTree --------------------------------------------------------------------*/
.RadDropDownTree_Material .rddtFakeInput {
    line-height: 1.7 !important;
    height: 1.7em !important;
}


.RadCalendarMultiView_Material .rcMainTable .rcTitle {
    background-color: #fafafa !important;
    color: #757575 !important;
}



/* ---------------------------------------------------------------------------- RadGrid --------------------------------------------------------------------*/

.RadGrid {
    border: none !important;
}

.rgHeader {
    background-color: white !important;
    border-bottom: 2px solid #25a0da !important;
    background-color: #E0E0E0;
    font-weight: 700;
    font-size: 11px;
    padding: 8px 5px 6px;
    border-bottom: 1px solid #eee;
    text-transform: uppercase;
    text-shadow: 0 1px 0 #FFF;
    font-weight: bold !important;
    border-left: none !important;
}

.rgDetailTable .rgHeader {
    font-weight: 500 !important;
    font-size: 10px !important;
    color: gray !important;
}

.RadGrid_MetroTouch {
    font-family: inherit !important;
    color: inherit !important;
    line-height: inherit !important;
}

.RadGrid .rgRow, .RadGrid .rgAltRow {
    vertical-align: top;
}

.rgDetailTable tr.rgAltRow td {
    border-top: 1px solid #cccccc !important;
}

.rgDetailTable tr.rgAltRow {
    background: transparent !important;
}

.radgrid-row-spacer.RadGrid .rgRow > td,
.radgrid-row-spacer.RadGrid .rgAltRow > td,
tr.force-bg-highlight > td {
    padding-top: 7px !important;
    padding-bottom: 7px !important;
}

tr.force-bg-highlight > td {
    padding-left: 13px;
}

.radgrid-no-alt-color.RadGrid_MetroTouch .rgAltRow:not(.rgSelectedRow) {
    background: transparent !important;
}

.radgrid-no-alt-color.RadGrid_MetroTouch .rgRow > td,
.radgrid-no-alt-color.RadGrid_MetroTouch .rgAltRow > td {
    border: none !important;
    border-top: 1px solid #e7e7e7 !important;
}


.RadGrid_MetroTouch .rgHoveredRow:hover {
    background: #f5f5f5 !important;
}

/* ---------------------------------------------------------------------------- RadNavigation --------------------------------------------------------------------*/

.RadNavigation .rnvRootLink {
    padding: 10px 15px !important;
}


/* -------------------------------------------------------------------------------- RadScheduler ------------------------------------------------------------------------*/

/*.RadScheduler .rsAptContent {
    border: none;
    font-size: 13px !important;
}*/

.RadScheduler_Material .rsAptContent {
    /*background-color: #eee !important;*/
}

/*.RadScheduler_Material .rsTitle {
    border-color: #737373 !important;
    background-color: #737373 !important;
}

.RadScheduler_Material .rsAdvEditSave {*/
/*border-color: #737373 !important;
    background-color: #737373 !important;*/
/*}

.RadScheduler_Material .RadInput .riContentWrapper {
     padding: 0 !important; 
}

.RadScheduler_Material .rfbGroup .rfbLabel {
     font-size: inherit !important
        }

.RadScheduler_Material .rsHorizontalHeaderTable {
    font-size: 13px !important;
    font-weight: 500 !important;
}

.rsDateHeader:hover
{
    text-decoration: none !important;
    cursor: default !important;
}*/

.RadScheduler .rsMonthView .rsAptContent {
    height: 40px;
    padding: 3px 8px;
}

.RadScheduler_Material .rsDialog .rsTitle {
    background-color: #7e7e7e !important;
}

.RadScheduler_Material .rsDialog .rsTitle {
    font-size: 12px !important;
    font-weight: normal !important;
}

.RadScheduler .RadInput textarea.riTextBox {
    height: 60px !important;
}

.RadScheduler_Material .RadInput .riContentWrapper {
    padding: 0 !important;
}


/* -------------------------------------------------------------------------------- RadSearchBox ------------------------------------------------------------------------*/

.RadSearchBox_Material .rsbInner {
    /*padding: 3px 0 !important;
    -ms-border-radius: 4px !important;
    border-radius: 4px !important;
    box-shadow: none !important;*/
    /*background: transparent !important;*/
}

/*.RadSearchBox_Material .rsbInput {
    margin: 0 6px !important;
}

.RadSearchBox_Material .rsbSCInner {
    border-right: none !important;
}*/

.rsbPopup .rsbListItem {
    /*border-bottom: 1px solid #F5F5F5 !important;*/
}

.RadSearchBox_Material .rsbSCInner {
    /*padding: 3px 21px 3px 5px !important;
    border-radius: 4px 0 0 4px !important;
    padding-left: 10px !important;*/
}

.RadSearchBox_Material .rsbButtonSearch {
    -ms-border-radius: 0 4px 4px 0;
    border-radius: 0 4px 4px 0 !important;
}

.rsbSlide {
    margin-left: -87px !important;
    width: inherit !important;
    z-index: 100000 !important;
}

.rsbSlide .searchList {
    margin-left: 87px !important;
    width: 100px !important;
}

.rsbPopup {
    width: 350px !important;
}

.RadSearchBox_Material .rsbInner {
    line-height: 1 !important;
    padding: 4px 0 !important;
    box-shadow: none !important;
    border-bottom: 1px solid #cfd8dc !important;
}

.RadSearchBox .rsbInput {
    margin: 0 4px !important;
}

.RadSearchBox .rsbEmptyMessage {
    color: #b0b9bd !important;
}


/* -------------------------------------------------------------------------------- RadTabStrip ------------------------------------------------------------------------*/

.RadTabStrip_Material {
    margin-bottom: 30px;
    -webkit-box-shadow: none !important;
    -ms-box-shadow: none !important;
    box-shadow: none !important;
    border-bottom: 1px solid #ccc;
}

    .RadTabStrip_Material .rtsLevel {
        background: transparent !important;
        color: #455a64 !important;
    }

    .RadTabStrip_Material .rtsLevel1 .rtsLink {
        background: transparent !important;
        color: #455a64 !important;
    }

    .RadTabStrip_Material .rtsLevel2,
    .RadTabStrip_Material .rtsLevel2 .rtsLink,
    .RadTabStrip_Material .rtsLevel3,
    .RadTabStrip_Material .rtsLevel3 .rtsLink {
        background: #F5F5F5 !important;
        color: #455a64 !important;
        font-size: 11px;
    }

    .RadTabStrip_Material.rtsHorizontal .rtsSelected .rtsLink:before {
        border-bottom: none !important;
    }

    .RadTabStrip_Material .rtsSelected .rtsLink .rtsTxt {
        font-weight: 700;
    }

    .RadTabStrip_Material.rtsHorizontal .rtsLevel1 .rtsSelected .rtsLink {
        /*background: #F5F5F5 !important;*/
    }

.rmpView{ min-height: 200px;}

.notransition * {
    -webkit-transition: none !important;
    -moz-transition: none !important;
    -o-transition: none !important;
    transition: none !important;
}

.top-strip {
    border-bottom: none;
    margin-top: -77px !important;
    width: auto;
}

    .top-strip .rtsLevel1 {
        margin-bottom: 20px !important;
          text-align: right;
    }

.top-strip .rtsLevel1 .rtsLink {
    padding-bottom: 19px !important;
}


.RadTabStrip_Material {
    text-transform: none !important;
}

/* -------------------------------------------------------------------------------- RadWindow ------------------------------------------------------------------------*/

.RadWindow {
    z-index: 40000 !important;
    color: inherit !important;
    font: inherit !important;
    border-radius: 6px;
}

    .RadWindow h6.rwTitle {
        /*padding-top: 0 !important;*/
        padding-left: 13px !important;
        margin-left: 0 !important;
        color: inherit !important;
    }
    /*.RadWindow input.rwCloseButton {
       margin-top: 5px !important;
    }*/
    .RadWindow span.rwIcon {
        display: none !important;
    }

    .RadWindow .rwContent {
        padding: 20px 20px !important;
    }

    .RadWindow .rwDialogContent {
        padding: 0 !important;
    }

.RadWindow_Material .rwTitleBar {
    background-color: white !important;
    border-bottom: none !important;
    color: inherit !important;
    font-family: inherit !important;
    padding: 3px 0 0;
    border-radius: 6px 6px 0 0;
    /*z-index: 2;*/
}

.RadWindow_Material .rwTitleWrapper .rwTitle {
    /*font-size: 15px !important;*/
    color: inherit !important;
    padding-left: 10px !important;
}

.RadWindow_Material .rwCommandButton {
    color: inherit !important;
}

    .RadWindow_Material .rwCommandButton:hover {
        color: #757575 !important;
    }

.RadWindow_Material .rwConfirmDialog button.rwOkBtn {
    color: #757575 !important;
    background-color: transparent !important;
    background-color: rgb(234, 234, 234) !important;
}

.RadWindow_Material .rwConfirmDialog button.rwCancelBtn {
    color: #757575 !important;
    background-color: transparent !important;
    background-color: rgb(234, 234, 234) !important;
}

.RadWindow .rwDialog { padding: 0 2px !important; }


div[id^="RadWindowWrapper_alert"] {
    z-index: 100000 !important;
}


.TelerikModalOverlay {
    width: 100% !important;
    height: 100% !important;
    overflow: hidden;
}

div[id$='dialogOpenerInsertTableLight'] {
    height: 235px !important;
    width: 380px !important;
}

    div[id$='dialogOpenerInsertTableLight'] .rwContent {
        height: 185px !important;
    }



.RadWindow_Material .rwDialogButtons {
    padding: 5px !important;
    bottom: -5px !important;
    left: -5px !important;
}

/*main control*/
.RadWizard {
    padding: 0 !important;
}

.RadWizard_Metro {
    font-size: 12px !important;
    font-family: inherit !important;
    /*font-weight: 500 !important;*/
    background: transparent !important;
}


/*tab font color*/
.RadWizard .rwzBreadCrumb .rwzLink {
    padding: 0 !important;
    color: #555 !important;
    text-align: center !important;
}

/*seleted tab font color*/
.RadWizard_Metro .rwzSelected .rwzLink {
    color: #fff !important;
}

/*to be checked*/
.RadWizard .rwzBreadCrumb .rwzLink:before {
    margin-top: -11px !important;
    border-radius: 0 4px 0 0 !important;
    width: 20px !important;
    height: 20px !important;
    right: -8px !important;
}

.RadWizard .rwzBreadCrumb .rwzText {
    line-height: 37px !important;
    width: 73%;
}

.RadWizard .rwzNav {
    margin-bottom: 5px !important;
}

.RadWizard_Metro {
    color: inherit !important
}

.rwzContent::-webkit-scrollbar {
    width: 6px;
    background-color: #F5F5F5;
}

.rwzContent::-webkit-scrollbar-thumb {
    background-color: #c1c1c1;
}

.rwzContent::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px #ffffff;
    background-color: #F5F5F5;
}
    /* ====================================== colors ====================================== */
    /*gold*/
    .RadWizard_Metro .rwzSelected.gold .rwzLink, .RadWizard_Metro .rwzSelected.gold .rwzLink:before {
    border-color: #CFA240 !important;
    background-color: #CFA240 !important;
}

/*green*/
.RadWizard_Metro .rwzSelected.green .rwzLink, 
.RadWizard_Metro .rwzSelected.green .rwzLink:before {
    border-color: #55AE3A !important;
    background-color: #55AE3A !important;
}

/*gray*/
.RadWizard_Metro .rwzSelected.gray .rwzLink, 
.RadWizard_Metro .rwzSelected.gray .rwzLink:before {
    border-color: #989898 !important;
    background-color: #989898 !important;
}

/*purple*/
.RadWizard_Metro .rwzSelected.purple .rwzLink, 
.RadWizard_Metro .rwzSelected.purple .rwzLink:before {
    border-color: #9932CC !important;
    background-color: #9932CC !important;
}

/*navy*/
.RadWizard_Metro .rwzSelected.navy .rwzLink, 
.RadWizard_Metro .rwzSelected.navy .rwzLink:before
{
    border-color: #5174bd !important;
    background-color: #5174bd !important;
}

/*red*/
.RadWizard_Metro .rwzSelected.red .rwzLink, 
.RadWizard_Metro .rwzSelected.red .rwzLink:before {
    border-color: crimson !important;
    background-color: crimson !important;
}

/*orange*/
.RadWizard_Metro .rwzSelected.orange .rwzLink,
.RadWizard_Metro .rwzSelected.orange .rwzLink:before {
    border-color: #ff8c00 !important;
    background-color: #ff8c00 !important;
}




/*====================================== is-out & is-last ======================================*/

/*no arrows */
.RadWizard .is-out .rwzLink:before,
.RadWizard .is-last .rwzLink:before {
    display: none;
}

/*is-last no right margin*/
.RadWizard_Metro .rwzLast .rwzLink {
    margin-right: 0 !important;
}

/*is-out side margins*/
.RadWizard .is-out .rwzLink {
    margin-left: 10px !important;
}


/* ====================================== roundcorners ====================================== */
/*first tab roundcorners*/
.rwzHorizontal .rwzFirst .rwzLink {
    -moz-border-radius-topleft: 3px;
    border-top-left-radius: 3px;
    -moz-border-radius-bottomleft: 3px;
    border-bottom-left-radius: 3px;

    margin-left: 0px !important;
}


/*last tab rounded corners*/
.RadWizard_Metro .is-last .rwzLink,
.RadWizard_Metro .rwzLast .rwzLink {
    -moz-border-radius-topright: 3px;
    border-bottom-right-radius: 3px;
    -moz-border-radius-bottomright: 3px;
    border-top-right-radius: 3px;
}


/*is-out roundcorners*/
.RadWizard_Metro .is-out .rwzLink {
    border-radius: 3px;
}




/* =================================== tab width =================================== */
.RadWizard_Metro .narrow {
    width: 8%;
}

.RadWizard_Metro .wide {
    width: 10%;
}

.RadWizard_Metro .wider {
    width: 12%;
}



/*special width tab*/

.RadWizard_Metro .width-40 {
    width: 32px !important;
}

.RadWizard_Metro .width-40 .rwzLink {
    padding: 0 1em !important;
    font-weight: 300 !important;
    padding-left: 9px !important;
}

.RadWizard_Metro .width-40 .rwzLink .rwzText:before {
    font-family: FontAwesome;
    display: inline-block;
    content: "\f002";
}




/* ReSharper disable once InvalidValue */
/* ==========================================================================
   Stack AI (docs/STACKAI-HANDOVER.md section 4): the floating bubble and the in-place chat panel of StackAiV2.ascx, on the V2 and
   the old pages. In ~/StyleSheets ROOT so the non-recursive site bundle picks it up.

   The panel SHELL is messaging's: the ascx puts the m2-* classes of MessagingV2.css (m2-panel, m2-head, m2-who, m2-ico, m2-msgs-wrap,
   m2-msg is-mine, m2-body, m2-sys, m2-typing, m2-send, m2-templates) beside the ai-* classes. MessagingV2.css is not edited (it belongs
   to the Messaging programme). Here: only what messaging lacks, plus narrow overrides, each with its reason. Every override is two
   classes deep or more, so it beats the one-class m2-* rule by specificity, not by file order; no !important.
   The SHAPE is one modifier class on the root: ai-card (floating card) or ai-sheet (right-side sheet, not used yet).
   ========================================================================== */
/* [hidden] must beat the display rule of the class it sits beside */
.ai[hidden] { display: none; }
.ai .ai-panel[hidden], .ai .ai-bubble[hidden], .ai .ai-btn[hidden] { display: none; }
/* the site has no global border-box rule */
.ai .ai-panel, .ai .ai-panel * { box-sizing: border-box; }
.ai .ai-defs { position: absolute; width: 0; height: 0; overflow: hidden; }

/* ---- shape: the only place position and size are decided ---- */
.ai.ai-card {
    --ai-right: 20px; --ai-bottom: 20px; --ai-top: auto;
    --ai-w: 380px; --ai-w-wide: 640px; --ai-h: 560px; --ai-max-h: calc(100vh - 92px);
    --ai-radius: 12px; --ai-shadow: 0 14px 40px rgba(38,50,56,.22);
}
/* the handover's right-side sheet: under the 54px top bar, no rounding. Not used yet. */
.ai.ai-sheet {
    --ai-right: 0px; --ai-bottom: 0px; --ai-top: 54px;
    --ai-w: 420px; --ai-w-wide: 640px; --ai-h: auto; --ai-max-h: none;
    --ai-radius: 0; --ai-shadow: -8px 0 28px rgba(20,30,45,.12);
}
.ai.ai-sheet .ai-panel { border-width: 0 0 0 1px; }
/* the wide toggle (Expand) */
.ai.is-wide { --ai-w: var(--ai-w-wide, 640px); }

/* ---- the bubble ---- */
.ai .ai-bubble {
    position: fixed;
    right: 20px;
    bottom: 50px;
    z-index: 6050;
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--head, #263238);
    color: #fff;
    cursor: pointer;
    box-shadow: 0 8px 22px rgba(38,50,56,.28), 0 1px 3px rgba(38,50,56,.2);
}
.ai .ai-bubble:hover { filter: brightness(1.15); }
.ai .ai-bubble .ai-i { width: 22px; height: 22px; stroke-width: 1.6; }

/* the spark glyph (SVG symbol, currentColor) and the ink mark that carries it */
.ai .ai-i { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
.ai .ai-mark { display: grid; place-items: center; flex: 0 0 auto; width: 24px; height: 24px; border-radius: 50%; background: var(--head, #263238); color: #fff; }
.ai .ai-mark .ai-i { width: 13px; height: 13px; }

/* ---- the panel: .m2-panel draws the card; it is a dock child (square bottom, 300x400), here a free-standing card ---- */
.ai .ai-panel {
    position: fixed; right: var(--ai-right, 20px); bottom: var(--ai-bottom, 20px); top: var(--ai-top, auto); z-index: 6100;
    width: var(--ai-w, 380px); max-width: calc(100vw - 24px); height: var(--ai-h, 560px); max-height: var(--ai-max-h, calc(100vh - 92px));
    border: 1px solid var(--line, #dfe5ea); border-radius: var(--ai-radius, 12px);
    box-shadow: var(--ai-shadow, 0 14px 40px rgba(38,50,56,.22));
}
/* minimised: .m2-panel.is-min hides .m2-msgs-wrap itself; its width/height would TIE with .ai .ai-panel above, so restated 3 deep */
.ai .ai-panel.is-min { height: auto; width: 220px; }
.ai .ai-panel.is-min .ai-compose, .ai .ai-panel.is-min [data-ai-wide], .ai .ai-panel.is-min [data-ai-new] { display: none; }
/* .m2-head is always a pointer; here only while minimised (the script restores it) */
.ai .ai-head { cursor: default; }
.ai .ai-panel.is-min .ai-head { cursor: pointer; }
/* .m2-head-tools is scoped under .m2, so it cannot be reused for the head buttons */
.ai .ai-tools { display: flex; align-items: center; gap: 2px; }

/* the thread: .m2-msgs-wrap scrolls; turns are its children */
.ai .ai-body { display: flex; flex-direction: column; gap: 14px; padding: 14px 16px; }
.ai .ai-turn { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; align-items: start; }
/* my turn = .m2-msg.is-mine; only its side and its RTL corner are set here */
.ai .ai-turn.is-user .m2-msg { justify-self: end; }
.ai .ai-panel[dir="rtl"] .m2-msg.is-mine { border-bottom-right-radius: 12px; border-bottom-left-radius: 4px; }

/* the assistant turn: no bubble, the answer as markdown */
.ai .ai-txt { min-width: 0; font-size: 12px; line-height: 1.55; color: var(--ink, #37474f); overflow-wrap: anywhere; word-wrap: break-word; }
.ai .ai-txt p { margin: 0 0 6px; }
.ai .ai-txt p:last-child { margin-bottom: 0; }
.ai .ai-txt h3, .ai .ai-txt h4, .ai .ai-txt h5, .ai .ai-txt h6 { margin: 8px 0 4px; font-size: 12px; font-weight: 500; color: var(--head, #263238); }
.ai .ai-txt ul, .ai .ai-txt ol { margin: 0 0 6px; padding: 0 0 0 16px; }
.ai .ai-panel[dir="rtl"] .ai-txt ul, .ai .ai-panel[dir="rtl"] .ai-txt ol { padding: 0 16px 0 0; }
.ai .ai-txt li { margin-bottom: 2px; }
.ai .ai-txt strong { font-weight: 500; color: var(--head, #263238); }
.ai .ai-txt hr { border: 0; border-top: 1px solid var(--hair, #eceff2); margin: 8px 0; }
.ai .ai-txt code { padding: 1px 4px; border-radius: 3px; background: var(--band, #f6f8fa); font-family: "Roboto Mono", Consolas, monospace; font-size: 11px; }
.ai .ai-txt pre { margin: 6px 0; padding: 8px 10px; overflow: auto; border: 1px solid var(--hair, #eceff2); border-radius: 8px; background: var(--band, #f6f8fa); }
.ai .ai-txt pre code { padding: 0; background: transparent; }
.ai .ai-txt a { color: var(--accent, #036c9c); text-decoration: none; }
.ai .ai-txt a:hover { text-decoration: underline; }
.ai .ai-table { width: 100%; margin: 6px 0; border-collapse: collapse; font-size: 11px; }
.ai .ai-table th, .ai .ai-table td { padding: 4px 8px; border: 1px solid var(--hair, #eceff2); text-align: start; }
.ai .ai-table th { background: var(--band, #f6f8fa); font-weight: 500; color: var(--head, #263238); }
.ai .ai-cite { display: inline-flex; align-items: center; height: 18px; padding: 0 7px; border-radius: 9px; background: var(--accent-soft, #e4f0f6); color: var(--accent-ink, #02577e); font-size: 10.5px; font-weight: 500; white-space: nowrap; vertical-align: 1px; }

/* thinking: .m2-typing.is-on draws the dots + reduced-motion; inside a turn it needs no side padding */
.ai .ai-think { padding: 0; }

/* states: could not answer (red bar), session expired, not enabled */
.ai .ai-state { display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; border: 1px solid var(--line, #dfe5ea); border-radius: 8px; font-size: 11.5px; color: var(--ink, #37474f); }
.ai .ai-state.is-error { border-left: 3px solid var(--red, #dc2626); }
.ai .ai-panel[dir="rtl"] .ai-state.is-error { border-left: 1px solid var(--line, #dfe5ea); border-right: 3px solid var(--red, #dc2626); }
.ai .ai-state-glyph { flex: 0 0 auto; margin-top: 2px; font-size: 14px; color: var(--faint, #78909c); }
.ai .ai-state-glyph:before { margin: 0; }
.ai .ai-state.is-error .ai-state-glyph { color: var(--red, #dc2626); }
.ai .ai-state-text { flex: 1; min-width: 0; }
.ai .ai-state-text b { display: block; font-weight: 500; color: var(--head, #263238); }
.ai .ai-btn { flex: 0 0 auto; align-self: center; height: 28px; margin: 0; padding: 0 12px; border: 0; border-radius: 14px; background: var(--accent, #036c9c); color: #fff; font: inherit; font-size: 11px; font-weight: 500; cursor: pointer; }
.ai .ai-btn:hover { filter: brightness(1.08); }

/* first open: greeting and suggestion rows */
.ai .ai-hello { display: flex; flex-direction: column; gap: 10px; padding: 8px 0; }
.ai .ai-hello h3 { margin: 0; font-size: 14px; font-weight: 500; line-height: 1.4; color: var(--head, #263238); }
.ai .ai-hello p { margin: 0; font-size: 12px; color: var(--muted, #607d8b); }
.ai .ai-sug-cap { margin-top: 6px; font-size: 10px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: var(--faint, #78909c); }
/* [hidden] restated (matches the file's own rule, css:12): hidden when the page/mode has no suggestions (item 7) */
.ai .ai-sug-cap[hidden] { display: none; }
.ai .ai-sug { display: flex; flex-direction: column; gap: 6px; }
.ai .ai-sug-row { display: flex; align-items: center; gap: 8px; width: 100%; margin: 0; padding: 8px 12px; border: 1px solid var(--line, #dfe5ea); border-radius: 10px; background: var(--card, #fff); color: var(--head, #263238); font: inherit; font-size: 12px; text-align: start; cursor: pointer; }
.ai .ai-sug-row i { flex: 0 0 auto; color: var(--faint, #78909c); }
.ai .ai-sug-row i:before { margin: 0; }
.ai .ai-sug-row:hover { background: var(--hover, #eef2f6); }

/* the answer-mode slider (23 Sep 2026): two pressed-buttons above the composer. Reuses .ai-btn's radius/accent (above) and
   .ai-sug-row's border/card colours (above). No RTL rule is needed: no physical margins, and flex order mirrors under
   dir="rtl" automatically (the harness asserts the mirrored order instead of a CSS override). is-wide: nothing to do. */
.ai .ai-mode { display: inline-flex; padding: 2px; margin-bottom: 8px; border: 1px solid var(--line, #dfe5ea); border-radius: 14px; background: var(--card, #fff); }
.ai .ai-mode-btn { height: 22px; margin: 0; padding: 0 12px; border: 0; border-radius: 14px; background: transparent; color: var(--muted, #607d8b); font: inherit; font-size: 11px; font-weight: 500; cursor: pointer; }
.ai .ai-mode-btn[aria-pressed="true"] { background: var(--accent, #036c9c); color: #fff; }
.ai .ai-mode-btn:focus-visible { outline: 2px solid var(--accent, #036c9c); outline-offset: 1px; }

/* the composer box (.m2-send draws the disc) and the disclaimer */
.ai .ai-compose { flex-shrink: 0; padding: 10px 14px 6px; background: var(--tint, #fafbfc); border-top: 1px solid var(--hair, #eceff2); }
.ai .ai-box { display: flex; align-items: flex-end; gap: 8px; padding: 6px 6px 6px 12px; background: var(--card, #fff); border: 1px solid var(--line, #dfe5ea); border-radius: 10px; }
.ai .ai-panel[dir="rtl"] .ai-box { padding: 6px 12px 6px 6px; }
.ai .ai-box:focus-within { border-color: var(--accent, #036c9c); box-shadow: 0 0 0 2px var(--accent-soft, #e4f0f6); }
/* one line = 18px + padding; the script grows it to 90px */
.ai .ai-box textarea { flex: 1; min-width: 0; height: 26px; min-height: 26px; max-height: 90px; margin: 0; padding: 4px 0; resize: none; overflow-y: hidden; border: 0; outline: 0; background: transparent; box-shadow: none; box-sizing: border-box; font: inherit; font-size: 12px; line-height: 18px; color: var(--head, #263238); }
.ai .ai-box textarea::placeholder { color: var(--faint, #78909c); }
.ai .ai-box textarea:disabled { opacity: .6; }
/* streaming: the send disc becomes the ink Stop disc */
.ai .ai-send.is-stop { background: var(--head, #263238); }
.ai .ai-foot { padding: 6px 2px 0; font-size: 10px; color: var(--faint, #78909c); }

/* the shared in-panel confirmation (items 3/4, task 168): a direct child of .ai-panel (position: fixed, so this
   absolute overlay's containing block is the panel, not the viewport) - it covers the header, body and composer
   together so nothing underneath can be clicked while it is open. Not window.confirm() - see DESIGN-168.md
   "Popups" for why. The box reuses .ai-btn's own radius/accent; the ghost variant is Cancel's look (bordered, not
   filled) - ".ai-btn-ghost" is not used anywhere else in this file today. */
.ai .ai-confirm-overlay { position: absolute; inset: 0; z-index: 1; display: flex; align-items: center; justify-content: center; padding: 20px; background: rgba(38, 50, 56, .35); }
.ai .ai-confirm-box { max-width: 280px; padding: 16px; border-radius: 10px; background: var(--card, #fff); box-shadow: 0 14px 40px rgba(38,50,56,.22); }
.ai .ai-confirm-box p { margin: 0 0 14px; font-size: 12px; line-height: 1.5; color: var(--ink, #37474f); }
.ai .ai-confirm-btns { display: flex; justify-content: flex-end; gap: 8px; }
.ai .ai-btn-ghost { background: transparent; border: 1px solid var(--line, #dfe5ea); color: var(--head, #263238); }
.ai .ai-btn-ghost:hover { background: var(--hover, #eef2f6); }

/* ---- the AskForLeave confirm card (task 175-B, StackAiV2.js renderProposal / the "proposal" template of StackAiV2.ascx) ----
   It reuses the confirmation shell above (.ai-confirm-overlay / .ai-confirm-box), whose box is 280px wide and whose paragraphs are
   spaced for one short sentence. Nothing styled the card's own classes, so each row (two bare spans) printed as one run
   ("Leave TypeAnnual") and the blocks touched each other. Every rule below is two classes deep or more, so it beats the shell by
   specificity, and it comes AFTER the shell for the same reason. Grid columns and flex order mirror by themselves under dir="rtl" and the one side
   the card needs (the error bar) is a logical border, so RTL needs one extra rule only (the text alignment, below). The text is filled by textContent and carries dir="auto" (it orders the glyphs of an Arabic value or an English label);
   the ALIGNMENT is set once, on the box, by the panel's dir (left, or right under .ai-panel[dir="rtl"], the convention of this file) and inherited. */
/* the overlay scrolls when a long card is taller than the panel; the box centres itself with auto margins (flex centring would clip the top) */
.ai .ai-proposal-overlay { align-items: flex-start; overflow-y: auto; padding: 12px; }
.ai .ai-proposal-box { width: 100%; max-width: 420px; margin: auto; padding: 16px; overflow-wrap: anywhere; }
.ai .ai-proposal-box { text-align: left; }
.ai .ai-panel[dir="rtl"] .ai-proposal-box { text-align: right; }
.ai .ai-proposal-box .ai-proposal-title { margin: 0 0 8px; font-size: 14px; font-weight: 500; line-height: 1.4; color: var(--head, #263238); }
.ai .ai-proposal-box .ai-proposal-summary { margin: 0 0 12px; font-size: 12px; line-height: 1.5; color: var(--muted, #607d8b); }
/* the rows: one per line, the label (muted) and the value (ink) in two aligned columns with a gap, a hairline between rows */
.ai .ai-proposal-fields { margin: 0 0 12px; border-top: 1px solid var(--hair, #eceff2); }
.ai .ai-proposal-field { display: grid; grid-template-columns: minmax(88px, 36%) minmax(0, 1fr); column-gap: 12px; align-items: baseline; padding: 6px 0; border-bottom: 1px solid var(--hair, #eceff2); }
.ai .ai-proposal-field-k { min-width: 0; font-size: 11px; line-height: 1.5; color: var(--muted, #607d8b); overflow-wrap: anywhere; }
.ai .ai-proposal-field-v { min-width: 0; font-size: 12px; line-height: 1.5; font-weight: 500; color: var(--head, #263238); overflow-wrap: anywhere; }
/* the calculation's own notice (the page shows it in a red dashed box before Save), an error, and the two tick blocks */
.ai .ai-proposal-box .ai-proposal-notice { margin: 0 0 12px; padding: 8px 10px; border: 1px dashed var(--red, #dc2626); border-radius: 6px; background: var(--band, #f6f8fa); font-size: 11.5px; line-height: 1.5; color: var(--ink, #37474f); }
.ai .ai-proposal-box .ai-proposal-error { margin: 0 0 12px; padding: 8px 10px; border-radius: 6px; border-inline-start: 3px solid var(--red, #dc2626); background: #fef2f2; font-size: 11.5px; line-height: 1.5; color: var(--red, #dc2626); }
/* "I Agree": the calculation's explanation on top, the tick box and its label under it (the page puts the tick inside the sentence) */
.ai .ai-proposal-agree { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 8px; row-gap: 6px; align-items: start; margin: 0 0 12px; font-size: 11.5px; line-height: 1.5; color: var(--ink, #37474f); cursor: pointer; }
.ai .ai-proposal-agree[hidden] { display: none; }
.ai .ai-proposal-agree input[type="checkbox"] { grid-column: 1; grid-row: 2; width: 16px; height: 16px; margin: 1px 0 0; }
.ai .ai-proposal-agree [data-ai-proposal-agree-label] { grid-column: 2; grid-row: 2; font-weight: 500; color: var(--head, #263238); }
.ai .ai-proposal-agree .ai-proposal-agree-text { grid-column: 1 / -1; grid-row: 1; color: var(--muted, #607d8b); }
/* the payroll cut-off warning: its own framed block (title, sentence, then its own tick box) */
.ai .ai-proposal-payroll { margin: 0 0 12px; padding: 10px 12px; border: 1px solid #f3c9a5; border-radius: 8px; background: #fff7ed; }
.ai .ai-proposal-payroll[hidden] { display: none; }
.ai .ai-proposal-box .ai-proposal-payroll p { margin: 0 0 6px; font-size: 11.5px; line-height: 1.5; color: var(--ink, #37474f); }
.ai .ai-proposal-box .ai-proposal-payroll strong { font-weight: 500; color: var(--head, #263238); }
.ai .ai-proposal-payroll .ai-proposal-agree { margin: 4px 0 0; }
.ai .ai-proposal-payroll .ai-proposal-agree input[type="checkbox"] { grid-row: 1; }
.ai .ai-proposal-payroll .ai-proposal-agree [data-ai-proposal-payroll-label] { grid-column: 2; grid-row: 1; font-weight: 500; color: var(--head, #263238); }
.ai .ai-proposal-box .ai-confirm-btns { margin-top: 4px; }
.ai .ai-proposal-box .ai-btn[disabled] { opacity: .5; cursor: not-allowed; }

/* ---- dock offset: the dock steps left of the bubble; while open, left of the panel (the script sets --ai-dock-right on body) ---- */
body.has-ai .m2-dock { right: 84px; }
body.has-ai.ai-open .m2-dock { right: var(--ai-dock-right, 416px); }

/* last on purpose: ties the bubble and panel rules on specificity (same-file order) */
@media print { .ai .ai-bubble, .ai .ai-panel { display: none; } }