/* Minification failed. Returning unminified contents.
(998,31): run-time error CSS1046: Expect comma, found '234'
(998,38): run-time error CSS1046: Expect comma, found ')'
(1067,31): run-time error CSS1046: Expect comma, found '234'
(1067,38): run-time error CSS1046: Expect comma, found ')'
(4910,30): run-time error CSS1046: Expect comma, found '160'
(4910,37): run-time error CSS1046: Expect comma, found ')'
(5478,67): run-time error CSS1039: Token not allowed after unary operator: '-csw-theme'
(5514,106): run-time error CSS1039: Token not allowed after unary operator: '-band'
(5514,146): run-time error CSS1039: Token not allowed after unary operator: '-line'
(5514,195): run-time error CSS1039: Token not allowed after unary operator: '-faint'
(5515,44): run-time error CSS1039: Token not allowed after unary operator: '-accent-line'
(5515,85): run-time error CSS1039: Token not allowed after unary operator: '-card'
(5517,133): run-time error CSS1039: Token not allowed after unary operator: '-head'
(5518,43): run-time error CSS1039: Token not allowed after unary operator: '-faint'
(5521,113): run-time error CSS1039: Token not allowed after unary operator: '-band'
(5521,142): run-time error CSS1039: Token not allowed after unary operator: '-muted'
(5522,85): run-time error CSS1039: Token not allowed after unary operator: '-faint'
(5523,157): run-time error CSS1039: Token not allowed after unary operator: '-hair'
(5525,52): run-time error CSS1039: Token not allowed after unary operator: '-hover'
(5526,40): run-time error CSS1039: Token not allowed after unary operator: '-hover'
(5526,89): run-time error CSS1039: Token not allowed after unary operator: '-accent'
(5528,45): run-time error CSS1039: Token not allowed after unary operator: '-head'
(5530,75): run-time error CSS1039: Token not allowed after unary operator: '-head'
(5531,60): run-time error CSS1039: Token not allowed after unary operator: '-muted'
(5533,46): run-time error CSS1039: Token not allowed after unary operator: '-faint'
(5534,141): run-time error CSS1039: Token not allowed after unary operator: '-accent'
(5540,105): run-time error CSS1039: Token not allowed after unary operator: '-band-2'
(5540,136): run-time error CSS1039: Token not allowed after unary operator: '-muted'
(5542,127): run-time error CSS1039: Token not allowed after unary operator: '-card'
(5546,140): run-time error CSS1039: Token not allowed after unary operator: '-muted'
(5547,44): run-time error CSS1039: Token not allowed after unary operator: '-line'
(5551,79): run-time error CSS1039: Token not allowed after unary operator: '-faint'
(5561,22): run-time error CSS1039: Token not allowed after unary operator: '-card'
(5561,59): run-time error CSS1039: Token not allowed after unary operator: '-line'
(5562,96): run-time error CSS1039: Token not allowed after unary operator: '-ink'
(5566,47): run-time error CSS1039: Token not allowed after unary operator: '-accent-soft'
(5569,112): run-time error CSS1039: Token not allowed after unary operator: '-tint'
(5569,159): run-time error CSS1039: Token not allowed after unary operator: '-hair'
(5573,76): run-time error CSS1039: Token not allowed after unary operator: '-head'
(5574,62): run-time error CSS1039: Token not allowed after unary operator: '-faint'
(5575,165): run-time error CSS1039: Token not allowed after unary operator: '-muted'
(5578,52): run-time error CSS1039: Token not allowed after unary operator: '-hover'
(5578,82): run-time error CSS1039: Token not allowed after unary operator: '-head'
(5581,117): run-time error CSS1039: Token not allowed after unary operator: '-card'
(5585,43): run-time error CSS1039: Token not allowed after unary operator: '-muted'
(5585,115): run-time error CSS1039: Token not allowed after unary operator: '-faint'
(5586,87): run-time error CSS1039: Token not allowed after unary operator: '-faint'
(5587,87): run-time error CSS1039: Token not allowed after unary operator: '-hair'
(5592,62): run-time error CSS1039: Token not allowed after unary operator: '-card'
(5592,99): run-time error CSS1039: Token not allowed after unary operator: '-line'
(5593,58): run-time error CSS1039: Token not allowed after unary operator: '-band-2'
(5593,89): run-time error CSS1039: Token not allowed after unary operator: '-head'
(5597,43): run-time error CSS1039: Token not allowed after unary operator: '-faint'
(5598,61): run-time error CSS1039: Token not allowed after unary operator: '-faint'
(5601,75): run-time error CSS1039: Token not allowed after unary operator: '-muted'
(5603,26): run-time error CSS1039: Token not allowed after unary operator: '-accent'
(5607,132): run-time error CSS1039: Token not allowed after unary operator: '-band'
(5607,161): run-time error CSS1039: Token not allowed after unary operator: '-ink'
(5608,34): run-time error CSS1039: Token not allowed after unary operator: '-hover'
(5610,116): run-time error CSS1039: Token not allowed after unary operator: '-faint'
(5613,60): run-time error CSS1039: Token not allowed after unary operator: '-faint'
(5616,124): run-time error CSS1039: Token not allowed after unary operator: '-faint'
(5617,93): run-time error CSS1039: Token not allowed after unary operator: '-faint'
(5622,99): run-time error CSS1039: Token not allowed after unary operator: '-tint'
(5622,143): run-time error CSS1039: Token not allowed after unary operator: '-hair'
(5625,84): run-time error CSS1039: Token not allowed after unary operator: '-line'
(5625,291): run-time error CSS1039: Token not allowed after unary operator: '-card'
(5625,317): run-time error CSS1039: Token not allowed after unary operator: '-head'
(5626,49): run-time error CSS1039: Token not allowed after unary operator: '-faint'
(5627,49): run-time error CSS1039: Token not allowed after unary operator: '-accent'
(5627,95): run-time error CSS1039: Token not allowed after unary operator: '-accent-soft'
(5629,146): run-time error CSS1039: Token not allowed after unary operator: '-accent'
(5640,84): run-time error CSS1039: Token not allowed after unary operator: '-card'
(5640,121): run-time error CSS1039: Token not allowed after unary operator: '-line'
(5640,189): run-time error CSS1039: Token not allowed after unary operator: '-ink'
(5641,41): run-time error CSS1039: Token not allowed after unary operator: '-m2-chrome'
(5647,99): run-time error CSS1039: Token not allowed after unary operator: '-hair'
(5653,70): run-time error CSS1039: Token not allowed after unary operator: '-line'
(5653,125): run-time error CSS1039: Token not allowed after unary operator: '-card'
(5653,151): run-time error CSS1039: Token not allowed after unary operator: '-muted'
(5654,39): run-time error CSS1039: Token not allowed after unary operator: '-hover'
(5655,39): run-time error CSS1039: Token not allowed after unary operator: '-accent-soft'
(5655,82): run-time error CSS1039: Token not allowed after unary operator: '-accent-line'
(5655,118): run-time error CSS1039: Token not allowed after unary operator: '-accent-ink'
(5656,69): run-time error CSS1039: Token not allowed after unary operator: '-faint'
(5657,40): run-time error CSS1039: Token not allowed after unary operator: '-accent-ink'
(5661,82): run-time error CSS1039: Token not allowed after unary operator: '-hair'
(5663,52): run-time error CSS1039: Token not allowed after unary operator: '-muted'
(5663,124): run-time error CSS1039: Token not allowed after unary operator: '-faint'
(5666,145): run-time error CSS1039: Token not allowed after unary operator: '-band-2'
(5666,173): run-time error CSS1039: Token not allowed after unary operator: '-hover'
(5666,200): run-time error CSS1039: Token not allowed after unary operator: '-band-2'
(5683,74): run-time error CSS1039: Token not allowed after unary operator: '-card'
(5683,111): run-time error CSS1039: Token not allowed after unary operator: '-line'
(5685,112): run-time error CSS1039: Token not allowed after unary operator: '-ink'
(5686,41): run-time error CSS1039: Token not allowed after unary operator: '-hover'
(5688,65): run-time error CSS1039: Token not allowed after unary operator: '-faint'
(5696,46): run-time error CSS1039: Token not allowed after unary operator: '-faint'
(5705,52): run-time error CSS1039: Token not allowed after unary operator: '-faint'
(5708,108): run-time error CSS1039: Token not allowed after unary operator: '-head'
(5741,122): run-time error CSS1039: Token not allowed after unary operator: '-line'
(5741,167): run-time error CSS1039: Token not allowed after unary operator: '-band-2'
(5741,189): run-time error CSS1039: Token not allowed after unary operator: '-muted'
(5742,59): run-time error CSS1039: Token not allowed after unary operator: '-hover'
(5742,103): run-time error CSS1039: Token not allowed after unary operator: '-head'
(5746,153): run-time error CSS1039: Token not allowed after unary operator: '-ink'
(5764,84): run-time error CSS1039: Token not allowed after unary operator: '-accent'
(5765,60): run-time error CSS1039: Token not allowed after unary operator: '-head'
(5773,32): run-time error CSS1039: Token not allowed after unary operator: '-grey-soft'
(5773,57): run-time error CSS1039: Token not allowed after unary operator: '-faint'
(5774,32): run-time error CSS1039: Token not allowed after unary operator: '-blue-soft'
(5774,57): run-time error CSS1039: Token not allowed after unary operator: '-blue'
(5775,33): run-time error CSS1039: Token not allowed after unary operator: '-green-soft'
(5775,59): run-time error CSS1039: Token not allowed after unary operator: '-green'
(5776,31): run-time error CSS1039: Token not allowed after unary operator: '-red-soft'
(5776,55): run-time error CSS1039: Token not allowed after unary operator: '-red'
(5777,33): run-time error CSS1039: Token not allowed after unary operator: '-amber-soft'
(5777,59): run-time error CSS1039: Token not allowed after unary operator: '-amber-ink'
(5778,32): run-time error CSS1039: Token not allowed after unary operator: '-teal-soft'
(5778,57): run-time error CSS1039: Token not allowed after unary operator: '-teal'
(5779,110): run-time error CSS1039: Token not allowed after unary operator: '-band-2'
(5779,132): run-time error CSS1039: Token not allowed after unary operator: '-muted'
(5791,139): run-time error CSS1039: Token not allowed after unary operator: '-line'
(5791,164): run-time error CSS1039: Token not allowed after unary operator: '-card'
(5791,184): run-time error CSS1039: Token not allowed after unary operator: '-muted'
(5792,30): run-time error CSS1039: Token not allowed after unary operator: '-head'
(5793,35): run-time error CSS1039: Token not allowed after unary operator: '-accent-soft'
(5793,69): run-time error CSS1039: Token not allowed after unary operator: '-accent-line'
(5793,96): run-time error CSS1039: Token not allowed after unary operator: '-accent'
(5795,102): run-time error CSS1039: Token not allowed after unary operator: '-head'
(5796,47): run-time error CSS1039: Token not allowed after unary operator: '-faint'
(5797,55): run-time error CSS1039: Token not allowed after unary operator: '-line'
(5798,46): run-time error CSS1039: Token not allowed after unary operator: '-accent-line'
(5799,40): run-time error CSS1039: Token not allowed after unary operator: '-red'
(5800,57): run-time error CSS1039: Token not allowed after unary operator: '-line'
(5800,121): run-time error CSS1039: Token not allowed after unary operator: '-card'
(5801,89): run-time error CSS1039: Token not allowed after unary operator: '-muted'
(5802,34): run-time error CSS1039: Token not allowed after unary operator: '-accent-soft'
(5802,61): run-time error CSS1039: Token not allowed after unary operator: '-accent-ink'
(5803,47): run-time error CSS1039: Token not allowed after unary operator: '-faint'
(5805,108): run-time error CSS1039: Token not allowed after unary operator: '-faint'
(5806,130): run-time error CSS1039: Token not allowed after unary operator: '-line'
(5806,155): run-time error CSS1039: Token not allowed after unary operator: '-card'
(5806,175): run-time error CSS1039: Token not allowed after unary operator: '-muted'
(5807,31): run-time error CSS1039: Token not allowed after unary operator: '-head'
(5808,38): run-time error CSS1039: Token not allowed after unary operator: '-accent-line'
(5808,70): run-time error CSS1039: Token not allowed after unary operator: '-accent-soft'
(5808,97): run-time error CSS1039: Token not allowed after unary operator: '-accent-ink'
(5809,126): run-time error CSS1039: Token not allowed after unary operator: '-line'
(5809,146): run-time error CSS1039: Token not allowed after unary operator: '-head'
(5810,30): run-time error CSS1039: Token not allowed after unary operator: '-faint'
(5812,132): run-time error CSS1039: Token not allowed after unary operator: '-card'
(5812,164): run-time error CSS1039: Token not allowed after unary operator: '-line'
(5812,184): run-time error CSS1039: Token not allowed after unary operator: '-muted'
(5813,51): run-time error CSS1039: Token not allowed after unary operator: '-head'
(5814,26): run-time error CSS1039: Token not allowed after unary operator: '-faint'
(5815,32): run-time error CSS1039: Token not allowed after unary operator: '-red'
(5817,45): run-time error CSS1039: Token not allowed after unary operator: '-muted'
(5818,35): run-time error CSS1039: Token not allowed after unary operator: '-red'
(5819,57): run-time error CSS1039: Token not allowed after unary operator: '-faint'
(5821,173): run-time error CSS1039: Token not allowed after unary operator: '-band-2'
(5821,195): run-time error CSS1039: Token not allowed after unary operator: '-head'
(5822,38): run-time error CSS1039: Token not allowed after unary operator: '-hover'
(5822,59): run-time error CSS1039: Token not allowed after unary operator: '-head'
(5823,95): run-time error CSS1039: Token not allowed after unary operator: '-accent'
(5824,49): run-time error CSS1039: Token not allowed after unary operator: '-accent-ink'
(5825,39): run-time error CSS1039: Token not allowed after unary operator: '-red'
(5833,92): run-time error CSS1039: Token not allowed after unary operator: '-card'
(5835,108): run-time error CSS1039: Token not allowed after unary operator: '-faint'
(5836,44): run-time error CSS1039: Token not allowed after unary operator: '-head'
(5837,115): run-time error CSS1039: Token not allowed after unary operator: '-card'
(5838,114): run-time error CSS1039: Token not allowed after unary operator: '-head'
(5839,48): run-time error CSS1039: Token not allowed after unary operator: '-red'
(5840,82): run-time error CSS1039: Token not allowed after unary operator: '-faint'
(5844,135): run-time error CSS1039: Token not allowed after unary operator: '-head'
(5845,112): run-time error CSS1039: Token not allowed after unary operator: '-faint'
(5850,106): run-time error CSS1039: Token not allowed after unary operator: '-hair'
(5851,43): run-time error CSS1039: Token not allowed after unary operator: '-muted'
(5852,32): run-time error CSS1039: Token not allowed after unary operator: '-head'
(5853,32): run-time error CSS1039: Token not allowed after unary operator: '-head'
(5854,41): run-time error CSS1039: Token not allowed after unary operator: '-muted'
(5855,35): run-time error CSS1039: Token not allowed after unary operator: '-accent-soft'
(5855,62): run-time error CSS1039: Token not allowed after unary operator: '-accent-ink'
(5860,144): run-time error CSS1039: Token not allowed after unary operator: '-line'
(5860,164): run-time error CSS1039: Token not allowed after unary operator: '-faint'
(5861,53): run-time error CSS1039: Token not allowed after unary operator: '-accent'
(5862,115): run-time error CSS1039: Token not allowed after unary operator: '-head'
(5863,45): run-time error CSS1039: Token not allowed after unary operator: '-faint'
(5867,55): run-time error CSS1039: Token not allowed after unary operator: '-card'
(5867,160): run-time error CSS1039: Token not allowed after unary operator: '-faint'
(5869,185): run-time error CSS1039: Token not allowed after unary operator: '-hair'
(5876,58): run-time error CSS1039: Token not allowed after unary operator: '-hover'
(5878,122): run-time error CSS1039: Token not allowed after unary operator: '-accent-soft'
(5878,149): run-time error CSS1039: Token not allowed after unary operator: '-accent-ink'
(5879,36): run-time error CSS1039: Token not allowed after unary operator: '-accent-soft'
(5883,50): run-time error CSS1039: Token not allowed after unary operator: '-faint'
(5886,109): run-time error CSS1039: Token not allowed after unary operator: '-faint'
(5887,58): run-time error CSS1039: Token not allowed after unary operator: '-head'
(5888,42): run-time error CSS1039: Token not allowed after unary operator: '-ink'
(5892,27): run-time error CSS1039: Token not allowed after unary operator: '-accent'
(5893,49): run-time error CSS1039: Token not allowed after unary operator: '-muted'
(5894,24): run-time error CSS1039: Token not allowed after unary operator: '-accent'
(5895,41): run-time error CSS1039: Token not allowed after unary operator: '-faint'
(5896,26): run-time error CSS1039: Token not allowed after unary operator: '-muted'
(5897,45): run-time error CSS1039: Token not allowed after unary operator: '-muted'
(5900,106): run-time error CSS1039: Token not allowed after unary operator: '-muted'
(5901,29): run-time error CSS1039: Token not allowed after unary operator: '-head'
(5901,54): run-time error CSS1039: Token not allowed after unary operator: '-band-2'
(5902,39): run-time error CSS1039: Token not allowed after unary operator: '-red'
(5902,63): run-time error CSS1039: Token not allowed after unary operator: '-red-soft'
(5903,114): run-time error CSS1039: Token not allowed after unary operator: '-muted'
(5903,153): run-time error CSS1039: Token not allowed after unary operator: '-hair'
(5904,29): run-time error CSS1039: Token not allowed after unary operator: '-head'
(5908,78): run-time error CSS1039: Token not allowed after unary operator: '-accent'
(5909,60): run-time error CSS1039: Token not allowed after unary operator: '-faint'
(5910,42): run-time error CSS1039: Token not allowed after unary operator: '-muted'
(5911,42): run-time error CSS1039: Token not allowed after unary operator: '-muted'
(5912,34): run-time error CSS1039: Token not allowed after unary operator: '-red'
(5913,27): run-time error CSS1039: Token not allowed after unary operator: '-accent'
(5914,24): run-time error CSS1039: Token not allowed after unary operator: '-faint'
(5917,107): run-time error CSS1039: Token not allowed after unary operator: '-card'
(5917,138): run-time error CSS1039: Token not allowed after unary operator: '-line'
(5920,126): run-time error CSS1039: Token not allowed after unary operator: '-grey-soft'
(5920,151): run-time error CSS1039: Token not allowed after unary operator: '-muted'
(5921,38): run-time error CSS1039: Token not allowed after unary operator: '-accent-soft'
(5921,65): run-time error CSS1039: Token not allowed after unary operator: '-accent-ink'
(5922,92): run-time error CSS1039: Token not allowed after unary operator: '-line'
(5922,191): run-time error CSS1039: Token not allowed after unary operator: '-head'
(5923,42): run-time error CSS1039: Token not allowed after unary operator: '-accent'
(5924,35): run-time error CSS1039: Token not allowed after unary operator: '-faint'
(5926,55): run-time error CSS1039: Token not allowed after unary operator: '-head'
(5927,105): run-time error CSS1039: Token not allowed after unary operator: '-card'
(5927,136): run-time error CSS1039: Token not allowed after unary operator: '-line'
(5930,46): run-time error CSS1039: Token not allowed after unary operator: '-muted'
(5931,35): run-time error CSS1039: Token not allowed after unary operator: '-red'
(5934,131): run-time error CSS1039: Token not allowed after unary operator: '-faint'
(5934,194): run-time error CSS1039: Token not allowed after unary operator: '-line'
(5935,70): run-time error CSS1039: Token not allowed after unary operator: '-hair'
(5935,90): run-time error CSS1039: Token not allowed after unary operator: '-ink'
(5936,32): run-time error CSS1039: Token not allowed after unary operator: '-faint'
(5937,32): run-time error CSS1039: Token not allowed after unary operator: '-head'
(5940,104): run-time error CSS1039: Token not allowed after unary operator: '-head'
(5941,37): run-time error CSS1039: Token not allowed after unary operator: '-red'
(5947,121): run-time error CSS1039: Token not allowed after unary operator: '-ink'
(5949,46): run-time error CSS1039: Token not allowed after unary operator: '-red'
(5950,48): run-time error CSS1039: Token not allowed after unary operator: '-amber-ink'
(5951,47): run-time error CSS1039: Token not allowed after unary operator: '-blue'
(5952,48): run-time error CSS1039: Token not allowed after unary operator: '-green'
(5954,41): run-time error CSS1039: Token not allowed after unary operator: '-faint'
(5986,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(5987,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(5988,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(5989,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(5990,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(5991,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(5992,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(5993,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(5995,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(5995,22): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(5995,38): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(5995,56): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(5996,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(5996,22): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(5996,39): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(5996,56): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(5996,75): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(5996,92): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(5996,108): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(5996,126): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(5998,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(5998,22): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(5998,40): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(5998,60): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(5998,76): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(5998,94): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(5999,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(5999,24): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(5999,43): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(5999,60): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(5999,79): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6000,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6000,27): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6000,50): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6000,75): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6000,96): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6001,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6001,29): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6001,53): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6001,75): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6001,99): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6004,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6004,28): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6004,51): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6004,74): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6005,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6005,30): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6005,54): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6005,79): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6009,20): run-time error CSS1039: Token not allowed after unary operator: '-ink'
(6011,31): run-time error CSS1039: Token not allowed after unary operator: '-head'
(6017,34): run-time error CSS1039: Token not allowed after unary operator: '-faint'
(6021,20): run-time error CSS1030: Expected identifier, found '.'
(6021,37): run-time error CSS1031: Expected selector, found ')'
(6021,37): run-time error CSS1025: Expected comma or open brace, found ')'
(6028,64): run-time error CSS1039: Token not allowed after unary operator: '-muted'
(6029,70): run-time error CSS1039: Token not allowed after unary operator: '-accent'
(6030,71): run-time error CSS1039: Token not allowed after unary operator: '-faint'
(6031,113): run-time error CSS1039: Token not allowed after unary operator: '-accent'
(6034,143): run-time error CSS1039: Token not allowed after unary operator: '-muted'
(6035,79): run-time error CSS1039: Token not allowed after unary operator: '-head'
(6036,86): run-time error CSS1039: Token not allowed after unary operator: '-accent'
(6041,10): run-time error CSS1030: Expected identifier, found '#searchArea'
(6041,34): run-time error CSS1031: Expected selector, found ')'
(6041,34): run-time error CSS1025: Expected comma or open brace, found ')'
(6049,10): run-time error CSS1030: Expected identifier, found '#searchArea'
(6049,34): run-time error CSS1031: Expected selector, found ')'
(6049,34): run-time error CSS1025: Expected comma or open brace, found ')'
(6050,10): run-time error CSS1030: Expected identifier, found '#searchArea'
(6050,34): run-time error CSS1031: Expected selector, found ')'
(6050,34): run-time error CSS1025: Expected comma or open brace, found ')'
(6051,10): run-time error CSS1030: Expected identifier, found '#searchArea'
(6051,34): run-time error CSS1031: Expected selector, found ')'
(6051,34): run-time error CSS1025: Expected comma or open brace, found ')'
(6052,10): run-time error CSS1030: Expected identifier, found '#searchArea'
(6052,34): run-time error CSS1031: Expected selector, found ')'
(6052,34): run-time error CSS1025: Expected comma or open brace, found ')'
(6053,10): run-time error CSS1030: Expected identifier, found '#searchArea'
(6053,34): run-time error CSS1031: Expected selector, found ')'
(6053,34): run-time error CSS1025: Expected comma or open brace, found ')'
(6054,10): run-time error CSS1030: Expected identifier, found '#searchArea'
(6054,34): run-time error CSS1031: Expected selector, found ')'
(6054,34): run-time error CSS1025: Expected comma or open brace, found ')'
(6055,10): run-time error CSS1030: Expected identifier, found '#searchArea'
(6055,34): run-time error CSS1031: Expected selector, found ')'
(6055,34): run-time error CSS1025: Expected comma or open brace, found ')'
(6058,10): run-time error CSS1030: Expected identifier, found '#searchArea'
(6058,34): run-time error CSS1031: Expected selector, found ')'
(6058,34): run-time error CSS1025: Expected comma or open brace, found ')'
(6059,10): run-time error CSS1030: Expected identifier, found '#searchArea'
(6059,34): run-time error CSS1031: Expected selector, found ')'
(6059,34): run-time error CSS1025: Expected comma or open brace, found ')'
(6062,10): run-time error CSS1030: Expected identifier, found '#searchArea'
(6062,34): run-time error CSS1031: Expected selector, found ')'
(6062,34): run-time error CSS1025: Expected comma or open brace, found ')'
(6063,10): run-time error CSS1030: Expected identifier, found '#searchArea'
(6063,34): run-time error CSS1031: Expected selector, found ')'
(6063,34): run-time error CSS1025: Expected comma or open brace, found ')'
(6065,10): run-time error CSS1030: Expected identifier, found '#searchArea'
(6065,34): run-time error CSS1031: Expected selector, found ')'
(6065,34): run-time error CSS1025: Expected comma or open brace, found ')'
(6066,10): run-time error CSS1030: Expected identifier, found '#searchArea'
(6066,34): run-time error CSS1031: Expected selector, found ')'
(6066,34): run-time error CSS1025: Expected comma or open brace, found ')'
(6067,10): run-time error CSS1030: Expected identifier, found '#searchArea'
(6067,34): run-time error CSS1031: Expected selector, found ')'
(6067,34): run-time error CSS1025: Expected comma or open brace, found ')'
(6068,10): run-time error CSS1030: Expected identifier, found '#searchArea'
(6068,34): run-time error CSS1031: Expected selector, found ')'
(6068,34): run-time error CSS1025: Expected comma or open brace, found ')'
(6069,10): run-time error CSS1030: Expected identifier, found '#searchArea'
(6069,34): run-time error CSS1031: Expected selector, found ')'
(6069,34): run-time error CSS1025: Expected comma or open brace, found ')'
(6070,10): run-time error CSS1030: Expected identifier, found '#searchArea'
(6070,34): run-time error CSS1031: Expected selector, found ')'
(6070,34): run-time error CSS1025: Expected comma or open brace, found ')'
(6071,10): run-time error CSS1030: Expected identifier, found '#searchArea'
(6071,34): run-time error CSS1031: Expected selector, found ')'
(6071,34): run-time error CSS1025: Expected comma or open brace, found ')'
(6072,10): run-time error CSS1030: Expected identifier, found '#searchArea'
(6072,34): run-time error CSS1031: Expected selector, found ')'
(6072,34): run-time error CSS1025: Expected comma or open brace, found ')'
(6073,10): run-time error CSS1030: Expected identifier, found '#searchArea'
(6073,34): run-time error CSS1031: Expected selector, found ')'
(6073,34): run-time error CSS1025: Expected comma or open brace, found ')'
(6074,10): run-time error CSS1030: Expected identifier, found '#searchArea'
(6074,34): run-time error CSS1031: Expected selector, found ')'
(6074,34): run-time error CSS1025: Expected comma or open brace, found ')'
(6082,10): run-time error CSS1030: Expected identifier, found '#searchArea'
(6082,34): run-time error CSS1031: Expected selector, found ')'
(6082,34): run-time error CSS1025: Expected comma or open brace, found ')'
(6083,10): run-time error CSS1030: Expected identifier, found '#searchArea'
(6083,34): run-time error CSS1031: Expected selector, found ')'
(6083,34): run-time error CSS1025: Expected comma or open brace, found ')'
(6084,10): run-time error CSS1030: Expected identifier, found '#searchArea'
(6084,34): run-time error CSS1031: Expected selector, found ')'
(6084,34): run-time error CSS1025: Expected comma or open brace, found ')'
(6085,10): run-time error CSS1030: Expected identifier, found '#searchArea'
(6085,34): run-time error CSS1031: Expected selector, found ')'
(6085,34): run-time error CSS1025: Expected comma or open brace, found ')'
(6091,10): run-time error CSS1030: Expected identifier, found '#searchArea'
(6091,34): run-time error CSS1031: Expected selector, found ')'
(6091,34): run-time error CSS1025: Expected comma or open brace, found ')'
(6092,10): run-time error CSS1030: Expected identifier, found '#searchArea'
(6092,34): run-time error CSS1031: Expected selector, found ')'
(6092,34): run-time error CSS1025: Expected comma or open brace, found ')'
(6093,10): run-time error CSS1030: Expected identifier, found '#searchArea'
(6093,34): run-time error CSS1031: Expected selector, found ')'
(6093,34): run-time error CSS1025: Expected comma or open brace, found ')'
(6094,10): run-time error CSS1030: Expected identifier, found '#searchArea'
(6094,34): run-time error CSS1031: Expected selector, found ')'
(6094,34): run-time error CSS1025: Expected comma or open brace, found ')'
(6101,123): run-time error CSS1039: Token not allowed after unary operator: '-faint'
(6107,156): run-time error CSS1039: Token not allowed after unary operator: '-muted'
(6114,241): run-time error CSS1039: Token not allowed after unary operator: '-faint'
(6116,90): run-time error CSS1039: Token not allowed after unary operator: '-hover'
(6116,111): run-time error CSS1039: Token not allowed after unary operator: '-head'
(6117,54): run-time error CSS1030: Expected identifier, found '.'
(6117,63): run-time error CSS1031: Expected selector, found ')'
(6117,63): run-time error CSS1025: Expected comma or open brace, found ')'
(6119,101): run-time error CSS1039: Token not allowed after unary operator: '-line'
(6120,83): run-time error CSS1039: Token not allowed after unary operator: '-faint'
(6123,122): run-time error CSS1039: Token not allowed after unary operator: '-ink'
(6124,115): run-time error CSS1039: Token not allowed after unary operator: '-head'
(6129,67): run-time error CSS1039: Token not allowed after unary operator: '-ink'
(6134,253): run-time error CSS1039: Token not allowed after unary operator: '-ink'
(6135,200): run-time error CSS1039: Token not allowed after unary operator: '-ink'
(6137,87): run-time error CSS1039: Token not allowed after unary operator: '-faint'
(6138,200): run-time error CSS1039: Token not allowed after unary operator: '-accent'
(6142,150): run-time error CSS1039: Token not allowed after unary operator: '-ink'
(6143,86): run-time error CSS1039: Token not allowed after unary operator: '-ink'
(6144,85): run-time error CSS1039: Token not allowed after unary operator: '-accent'
(6145,157): run-time error CSS1039: Token not allowed after unary operator: '-grey-soft'
(6145,182): run-time error CSS1039: Token not allowed after unary operator: '-head'
(6146,53): run-time error CSS1039: Token not allowed after unary operator: '-faint'
(6147,59): run-time error CSS1039: Token not allowed after unary operator: '-red'
(6150,185): run-time error CSS1039: Token not allowed after unary operator: '-grey-soft'
(6150,210): run-time error CSS1039: Token not allowed after unary operator: '-head'
(6151,82): run-time error CSS1039: Token not allowed after unary operator: '-muted'
(6154,150): run-time error CSS1039: Token not allowed after unary operator: '-band'
(6154,181): run-time error CSS1039: Token not allowed after unary operator: '-line'
(6155,60): run-time error CSS1039: Token not allowed after unary operator: '-faint'
(6156,216): run-time error CSS1039: Token not allowed after unary operator: '-ink'
(6157,50): run-time error CSS1039: Token not allowed after unary operator: '-accent-line'
(6157,82): run-time error CSS1039: Token not allowed after unary operator: '-card'
(6162,48): run-time error CSS1039: Token not allowed after unary operator: '-faint'
(6163,10): run-time error CSS1030: Expected identifier, found '.'
(6163,44): run-time error CSS1031: Expected selector, found ')'
(6163,44): run-time error CSS1025: Expected comma or open brace, found ')'
(6164,10): run-time error CSS1030: Expected identifier, found '.'
(6164,44): run-time error CSS1031: Expected selector, found ')'
(6164,44): run-time error CSS1025: Expected comma or open brace, found ')'
(6165,10): run-time error CSS1030: Expected identifier, found '.'
(6165,44): run-time error CSS1031: Expected selector, found ')'
(6165,44): run-time error CSS1025: Expected comma or open brace, found ')'
(6169,84): run-time error CSS1039: Token not allowed after unary operator: '-line'
(6169,183): run-time error CSS1039: Token not allowed after unary operator: '-ink'
(6171,68): run-time error CSS1039: Token not allowed after unary operator: '-band'
(6171,102): run-time error CSS1039: Token not allowed after unary operator: '-hair'
(6172,69): run-time error CSS1039: Token not allowed after unary operator: '-head'
(6173,187): run-time error CSS1039: Token not allowed after unary operator: '-faint'
(6174,36): run-time error CSS1030: Expected identifier, found '.'
(6174,73): run-time error CSS1031: Expected selector, found ')'
(6174,73): run-time error CSS1025: Expected comma or open brace, found ')'
(6176,165): run-time error CSS1039: Token not allowed after unary operator: '-line'
(6176,260): run-time error CSS1039: Token not allowed after unary operator: '-head'
(6177,85): run-time error CSS1039: Token not allowed after unary operator: '-accent'
(6177,123): run-time error CSS1039: Token not allowed after unary operator: '-accent'
(6179,94): run-time error CSS1039: Token not allowed after unary operator: '-hair'
(6182,121): run-time error CSS1039: Token not allowed after unary operator: '-line'
(6182,188): run-time error CSS1039: Token not allowed after unary operator: '-band'
(6183,65): run-time error CSS1039: Token not allowed after unary operator: '-head'
(6185,129): run-time error CSS1039: Token not allowed after unary operator: '-line'
(6185,174): run-time error CSS1039: Token not allowed after unary operator: '-card'
(6185,194): run-time error CSS1039: Token not allowed after unary operator: '-muted'
(6186,41): run-time error CSS1039: Token not allowed after unary operator: '-head'
(6186,66): run-time error CSS1039: Token not allowed after unary operator: '-band'
(6192,97): run-time error CSS1039: Token not allowed after unary operator: '-band'
(6192,128): run-time error CSS1039: Token not allowed after unary operator: '-line'
(6203,155): run-time error CSS1039: Token not allowed after unary operator: '-line'
(6203,175): run-time error CSS1039: Token not allowed after unary operator: '-muted'
(6205,183): run-time error CSS1039: Token not allowed after unary operator: '-hair'
(6207,82): run-time error CSS1039: Token not allowed after unary operator: '-muted'
(6208,101): run-time error CSS1039: Token not allowed after unary operator: '-head'
(6209,294): run-time error CSS1039: Token not allowed after unary operator: '-blue-soft'
(6209,319): run-time error CSS1039: Token not allowed after unary operator: '-blue'
(6210,79): run-time error CSS1039: Token not allowed after unary operator: '-green-soft'
(6210,105): run-time error CSS1039: Token not allowed after unary operator: '-green'
(6211,79): run-time error CSS1039: Token not allowed after unary operator: '-violet-soft'
(6211,106): run-time error CSS1039: Token not allowed after unary operator: '-violet'
(6214,81): run-time error CSS1039: Token not allowed after unary operator: '-teal-soft'
(6214,106): run-time error CSS1039: Token not allowed after unary operator: '-teal'
(6215,87): run-time error CSS1039: Token not allowed after unary operator: '-green-soft'
(6215,113): run-time error CSS1039: Token not allowed after unary operator: '-green'
(6216,85): run-time error CSS1039: Token not allowed after unary operator: '-red-soft'
(6216,109): run-time error CSS1039: Token not allowed after unary operator: '-red'
(6218,86): run-time error CSS1039: Token not allowed after unary operator: '-red-soft'
(6218,110): run-time error CSS1039: Token not allowed after unary operator: '-red'
(6219,88): run-time error CSS1039: Token not allowed after unary operator: '-amber-soft'
(6219,114): run-time error CSS1039: Token not allowed after unary operator: '-amber'
(6220,83): run-time error CSS1039: Token not allowed after unary operator: '-grey-soft'
(6220,108): run-time error CSS1039: Token not allowed after unary operator: '-muted'
(6222,82): run-time error CSS1039: Token not allowed after unary operator: '-red-soft'
(6222,106): run-time error CSS1039: Token not allowed after unary operator: '-red'
(6223,87): run-time error CSS1039: Token not allowed after unary operator: '-amber-soft'
(6223,113): run-time error CSS1039: Token not allowed after unary operator: '-amber'
(6224,82): run-time error CSS1039: Token not allowed after unary operator: '-grey-soft'
(6224,107): run-time error CSS1039: Token not allowed after unary operator: '-muted'
(6231,93): run-time error CSS1039: Token not allowed after unary operator: '-muted'
(6233,140): run-time error CSS1039: Token not allowed after unary operator: '-band-2'
(6233,169): run-time error CSS1039: Token not allowed after unary operator: '-line'
(6233,189): run-time error CSS1039: Token not allowed after unary operator: '-head'
(6234,130): run-time error CSS1039: Token not allowed after unary operator: '-muted'
(6236,200): run-time error CSS1039: Token not allowed after unary operator: '-line'
(6236,263): run-time error CSS1039: Token not allowed after unary operator: '-card'
(6237,128): run-time error CSS1039: Token not allowed after unary operator: '-muted'
(6238,67): run-time error CSS1039: Token not allowed after unary operator: '-line'
(6239,58): run-time error CSS1039: Token not allowed after unary operator: '-band-2'
(6239,80): run-time error CSS1039: Token not allowed after unary operator: '-head'
(6240,55): run-time error CSS1039: Token not allowed after unary operator: '-accent-soft'
(6240,82): run-time error CSS1039: Token not allowed after unary operator: '-accent'
(6244,62): run-time error CSS1039: Token not allowed after unary operator: '-accent-soft'
(6244,116): run-time error CSS1039: Token not allowed after unary operator: '-accent'
(6245,61): run-time error CSS1039: Token not allowed after unary operator: '-accent'
(6252,5): run-time error CSS1030: Expected identifier, found '.'
(6252,14): run-time error CSS1031: Expected selector, found ')'
(6252,14): run-time error CSS1025: Expected comma or open brace, found ')'
(6253,5): run-time error CSS1030: Expected identifier, found '.'
(6253,14): run-time error CSS1031: Expected selector, found ')'
(6253,14): run-time error CSS1025: Expected comma or open brace, found ')'
(6254,5): run-time error CSS1030: Expected identifier, found '.'
(6254,14): run-time error CSS1031: Expected selector, found ')'
(6254,14): run-time error CSS1025: Expected comma or open brace, found ')'
(6255,5): run-time error CSS1030: Expected identifier, found '.'
(6255,14): run-time error CSS1031: Expected selector, found ')'
(6255,14): run-time error CSS1025: Expected comma or open brace, found ')'
(6256,5): run-time error CSS1030: Expected identifier, found '.'
(6256,14): run-time error CSS1031: Expected selector, found ')'
(6256,14): run-time error CSS1025: Expected comma or open brace, found ')'
(6257,5): run-time error CSS1030: Expected identifier, found '.'
(6257,14): run-time error CSS1031: Expected selector, found ')'
(6257,14): run-time error CSS1025: Expected comma or open brace, found ')'
(6258,5): run-time error CSS1030: Expected identifier, found '.'
(6258,14): run-time error CSS1031: Expected selector, found ')'
(6258,14): run-time error CSS1025: Expected comma or open brace, found ')'
(6261,5): run-time error CSS1030: Expected identifier, found '.'
(6261,14): run-time error CSS1031: Expected selector, found ')'
(6261,14): run-time error CSS1025: Expected comma or open brace, found ')'
(6262,5): run-time error CSS1030: Expected identifier, found '.'
(6262,14): run-time error CSS1031: Expected selector, found ')'
(6262,14): run-time error CSS1025: Expected comma or open brace, found ')'
(6263,5): run-time error CSS1030: Expected identifier, found '.'
(6263,14): run-time error CSS1031: Expected selector, found ')'
(6263,14): run-time error CSS1025: Expected comma or open brace, found ')'
(6264,5): run-time error CSS1030: Expected identifier, found '.'
(6264,14): run-time error CSS1031: Expected selector, found ')'
(6264,14): run-time error CSS1025: Expected comma or open brace, found ')'
(6265,5): run-time error CSS1030: Expected identifier, found '.'
(6265,14): run-time error CSS1031: Expected selector, found ')'
(6265,14): run-time error CSS1025: Expected comma or open brace, found ')'
(6266,5): run-time error CSS1030: Expected identifier, found '.'
(6266,14): run-time error CSS1031: Expected selector, found ')'
(6266,14): run-time error CSS1025: Expected comma or open brace, found ')'
(6267,5): run-time error CSS1030: Expected identifier, found '.'
(6267,14): run-time error CSS1031: Expected selector, found ')'
(6267,14): run-time error CSS1025: Expected comma or open brace, found ')'
(6268,5): run-time error CSS1030: Expected identifier, found '.'
(6268,14): run-time error CSS1031: Expected selector, found ')'
(6268,14): run-time error CSS1025: Expected comma or open brace, found ')'
(6270,5): run-time error CSS1030: Expected identifier, found '.'
(6270,14): run-time error CSS1031: Expected selector, found ')'
(6270,14): run-time error CSS1025: Expected comma or open brace, found ')'
(6271,5): run-time error CSS1030: Expected identifier, found '.'
(6271,14): run-time error CSS1031: Expected selector, found ')'
(6271,14): run-time error CSS1025: Expected comma or open brace, found ')'
(6272,5): run-time error CSS1030: Expected identifier, found '.'
(6272,14): run-time error CSS1031: Expected selector, found ')'
(6272,14): run-time error CSS1025: Expected comma or open brace, found ')'
(6273,5): run-time error CSS1030: Expected identifier, found '.'
(6273,14): run-time error CSS1031: Expected selector, found ')'
(6273,14): run-time error CSS1025: Expected comma or open brace, found ')'
(6274,5): run-time error CSS1030: Expected identifier, found '.'
(6274,14): run-time error CSS1031: Expected selector, found ')'
(6274,14): run-time error CSS1025: Expected comma or open brace, found ')'
(6279,66): run-time error CSS1039: Token not allowed after unary operator: '-card'
(6279,97): run-time error CSS1039: Token not allowed after unary operator: '-line'
(6285,46): run-time error CSS1039: Token not allowed after unary operator: '-card'
(6285,77): run-time error CSS1039: Token not allowed after unary operator: '-ink'
(6285,239): run-time error CSS1039: Token not allowed after unary operator: '-line'
(6285,277): run-time error CSS1039: Token not allowed after unary operator: '-accent'
(6300,43): run-time error CSS1039: Token not allowed after unary operator: '-muted'
(6301,127): run-time error CSS1039: Token not allowed after unary operator: '-hair'
(6304,67): run-time error CSS1030: Expected identifier, found ':'
(6304,68): run-time error CSS1031: Expected selector, found 'not('
(6304,68): run-time error CSS1025: Expected comma or open brace, found 'not('
(6305,66): run-time error CSS1030: Expected identifier, found ':'
(6305,67): run-time error CSS1031: Expected selector, found 'not('
(6305,67): run-time error CSS1025: Expected comma or open brace, found 'not('
(6306,125): run-time error CSS1039: Token not allowed after unary operator: '-hover'
(6309,124): run-time error CSS1039: Token not allowed after unary operator: '-muted'
(6314,66): run-time error CSS1039: Token not allowed after unary operator: '-band-2'
(6316,114): run-time error CSS1039: Token not allowed after unary operator: '-line'
(6318,70): run-time error CSS1039: Token not allowed after unary operator: '-faint'
(6320,71): run-time error CSS1039: Token not allowed after unary operator: '-head'
(6321,70): run-time error CSS1039: Token not allowed after unary operator: '-muted'
(6322,59): run-time error CSS1039: Token not allowed after unary operator: '-faint'
(6323,55): run-time error CSS1039: Token not allowed after unary operator: '-head'
(6324,69): run-time error CSS1039: Token not allowed after unary operator: '-hair'
(6335,120): run-time error CSS1039: Token not allowed after unary operator: '-accent'
(6336,100): run-time error CSS1039: Token not allowed after unary operator: '-faint'
(6339,63): run-time error CSS1039: Token not allowed after unary operator: '-accent'
(6340,80): run-time error CSS1039: Token not allowed after unary operator: '-head'
(6342,89): run-time error CSS1039: Token not allowed after unary operator: '-accent'
(6343,81): run-time error CSS1039: Token not allowed after unary operator: '-muted'
(6345,43): run-time error CSS1039: Token not allowed after unary operator: '-ink'
(6346,49): run-time error CSS1039: Token not allowed after unary operator: '-accent'
(6347,137): run-time error CSS1039: Token not allowed after unary operator: '-muted'
(6348,52): run-time error CSS1039: Token not allowed after unary operator: '-faint'
(6349,73): run-time error CSS1039: Token not allowed after unary operator: '-red'
(6354,151): run-time error CSS1039: Token not allowed after unary operator: '-hair'
(6354,171): run-time error CSS1039: Token not allowed after unary operator: '-ink'
(6359,95): run-time error CSS1039: Token not allowed after unary operator: '-faint'
(6364,69): run-time error CSS1039: Token not allowed after unary operator: '-faint'
(6365,56): run-time error CSS1039: Token not allowed after unary operator: '-red'
(6369,52): run-time error CSS1039: Token not allowed after unary operator: '-faint'
(6371,57): run-time error CSS1039: Token not allowed after unary operator: '-faint'
(6374,83): run-time error CSS1039: Token not allowed after unary operator: '-head'
(6375,90): run-time error CSS1039: Token not allowed after unary operator: '-faint'
(6376,50): run-time error CSS1039: Token not allowed after unary operator: '-head'
(6384,5): run-time error CSS1030: Expected identifier, found '.'
(6384,32): run-time error CSS1031: Expected selector, found ')'
(6384,32): run-time error CSS1025: Expected comma or open brace, found ')'
(6385,5): run-time error CSS1030: Expected identifier, found '.'
(6385,32): run-time error CSS1031: Expected selector, found ')'
(6385,32): run-time error CSS1025: Expected comma or open brace, found ')'
(6386,5): run-time error CSS1030: Expected identifier, found '.'
(6386,32): run-time error CSS1031: Expected selector, found ')'
(6386,32): run-time error CSS1025: Expected comma or open brace, found ')'
(6387,5): run-time error CSS1030: Expected identifier, found '.'
(6387,32): run-time error CSS1031: Expected selector, found ')'
(6387,32): run-time error CSS1025: Expected comma or open brace, found ')'
(6388,5): run-time error CSS1030: Expected identifier, found '.'
(6388,32): run-time error CSS1031: Expected selector, found ')'
(6388,32): run-time error CSS1025: Expected comma or open brace, found ')'
(6389,5): run-time error CSS1030: Expected identifier, found '.'
(6389,32): run-time error CSS1031: Expected selector, found ')'
(6389,32): run-time error CSS1025: Expected comma or open brace, found ')'
(6390,5): run-time error CSS1030: Expected identifier, found '.'
(6390,32): run-time error CSS1031: Expected selector, found ')'
(6390,32): run-time error CSS1025: Expected comma or open brace, found ')'
(6391,5): run-time error CSS1030: Expected identifier, found '.'
(6391,32): run-time error CSS1031: Expected selector, found ')'
(6391,32): run-time error CSS1025: Expected comma or open brace, found ')'
(6392,56): run-time error CSS1039: Token not allowed after unary operator: '-grey-soft'
(6392,147): run-time error CSS1039: Token not allowed after unary operator: '-muted'
(6393,89): run-time error CSS1039: Token not allowed after unary operator: '-head'
(6396,52): run-time error CSS1039: Token not allowed after unary operator: '-accent'
(6399,60): run-time error CSS1039: Token not allowed after unary operator: '-green'
(6402,132): run-time error CSS1039: Token not allowed after unary operator: '-red-soft'
(6402,156): run-time error CSS1039: Token not allowed after unary operator: '-red'
(6405,29): run-time error CSS1030: Expected identifier, found '.'
(6405,53): run-time error CSS1031: Expected selector, found ')'
(6405,53): run-time error CSS1025: Expected comma or open brace, found ')'
(6406,29): run-time error CSS1030: Expected identifier, found '.'
(6406,53): run-time error CSS1031: Expected selector, found ')'
(6406,53): run-time error CSS1025: Expected comma or open brace, found ')'
(6407,29): run-time error CSS1030: Expected identifier, found '.'
(6407,53): run-time error CSS1031: Expected selector, found ')'
(6407,53): run-time error CSS1025: Expected comma or open brace, found ')'
(6411,45): run-time error CSS1039: Token not allowed after unary operator: '-blue-soft'
(6411,70): run-time error CSS1039: Token not allowed after unary operator: '-blue'
(6412,47): run-time error CSS1039: Token not allowed after unary operator: '-green-soft'
(6412,73): run-time error CSS1039: Token not allowed after unary operator: '-green'
(6413,36): run-time error CSS1039: Token not allowed after unary operator: '-emerald-soft'
(6413,64): run-time error CSS1039: Token not allowed after unary operator: '-emerald'
(6414,43): run-time error CSS1039: Token not allowed after unary operator: '-red-soft'
(6414,67): run-time error CSS1039: Token not allowed after unary operator: '-red'
(6415,34): run-time error CSS1039: Token not allowed after unary operator: '-amber-soft'
(6415,60): run-time error CSS1039: Token not allowed after unary operator: '-amber-ink'
(6416,49): run-time error CSS1039: Token not allowed after unary operator: '-orange-soft'
(6416,76): run-time error CSS1039: Token not allowed after unary operator: '-orange'
(6417,49): run-time error CSS1039: Token not allowed after unary operator: '-violet-soft'
(6417,76): run-time error CSS1039: Token not allowed after unary operator: '-violet'
(6418,33): run-time error CSS1039: Token not allowed after unary operator: '-teal-soft'
(6418,58): run-time error CSS1039: Token not allowed after unary operator: '-teal'
(6419,47): run-time error CSS1039: Token not allowed after unary operator: '-indigo-soft'
(6419,74): run-time error CSS1039: Token not allowed after unary operator: '-indigo'
(6420,57): run-time error CSS1039: Token not allowed after unary operator: '-grey-soft'
(6420,82): run-time error CSS1039: Token not allowed after unary operator: '-muted'
(6424,5): run-time error CSS1030: Expected identifier, found '.'
(6424,32): run-time error CSS1031: Expected selector, found ')'
(6424,32): run-time error CSS1025: Expected comma or open brace, found ')'
(6425,5): run-time error CSS1030: Expected identifier, found '.'
(6425,32): run-time error CSS1031: Expected selector, found ')'
(6425,32): run-time error CSS1025: Expected comma or open brace, found ')'
(6426,5): run-time error CSS1030: Expected identifier, found '.'
(6426,32): run-time error CSS1031: Expected selector, found ')'
(6426,32): run-time error CSS1025: Expected comma or open brace, found ')'
(6427,5): run-time error CSS1030: Expected identifier, found '.'
(6427,32): run-time error CSS1031: Expected selector, found ')'
(6427,32): run-time error CSS1025: Expected comma or open brace, found ')'
(6428,5): run-time error CSS1030: Expected identifier, found '.'
(6428,32): run-time error CSS1031: Expected selector, found ')'
(6428,32): run-time error CSS1025: Expected comma or open brace, found ')'
(6429,5): run-time error CSS1030: Expected identifier, found '.'
(6429,32): run-time error CSS1031: Expected selector, found ')'
(6429,32): run-time error CSS1025: Expected comma or open brace, found ')'
(6433,37): run-time error CSS1039: Token not allowed after unary operator: '-grey-soft'
(6433,62): run-time error CSS1039: Token not allowed after unary operator: '-muted'
(6434,37): run-time error CSS1039: Token not allowed after unary operator: '-blue-soft'
(6434,62): run-time error CSS1039: Token not allowed after unary operator: '-blue'
(6435,38): run-time error CSS1039: Token not allowed after unary operator: '-green-soft'
(6435,64): run-time error CSS1039: Token not allowed after unary operator: '-green'
(6436,40): run-time error CSS1039: Token not allowed after unary operator: '-emerald-soft'
(6436,68): run-time error CSS1039: Token not allowed after unary operator: '-emerald'
(6437,36): run-time error CSS1039: Token not allowed after unary operator: '-red-soft'
(6437,60): run-time error CSS1039: Token not allowed after unary operator: '-red'
(6438,38): run-time error CSS1039: Token not allowed after unary operator: '-amber-soft'
(6438,64): run-time error CSS1039: Token not allowed after unary operator: '-amber'
(6439,39): run-time error CSS1039: Token not allowed after unary operator: '-orange-soft'
(6439,66): run-time error CSS1039: Token not allowed after unary operator: '-orange'
(6440,39): run-time error CSS1039: Token not allowed after unary operator: '-violet-soft'
(6440,66): run-time error CSS1039: Token not allowed after unary operator: '-violet'
(6441,37): run-time error CSS1039: Token not allowed after unary operator: '-teal-soft'
(6441,62): run-time error CSS1039: Token not allowed after unary operator: '-teal'
(6442,39): run-time error CSS1039: Token not allowed after unary operator: '-indigo-soft'
(6442,66): run-time error CSS1039: Token not allowed after unary operator: '-indigo'
(6461,36): run-time error CSS1039: Token not allowed after unary operator: '-card'
(6461,67): run-time error CSS1039: Token not allowed after unary operator: '-line'
(6464,124): run-time error CSS1039: Token not allowed after unary operator: '-band'
(6467,49): run-time error CSS1039: Token not allowed after unary operator: '-accent-line'
(6467,81): run-time error CSS1039: Token not allowed after unary operator: '-accent-soft'
(6470,137): run-time error CSS1039: Token not allowed after unary operator: '-faint'
(6473,131): run-time error CSS1039: Token not allowed after unary operator: '-line'
(6473,156): run-time error CSS1039: Token not allowed after unary operator: '-band'
(6474,55): run-time error CSS1039: Token not allowed after unary operator: '-accent-soft'
(6476,99): run-time error CSS1039: Token not allowed after unary operator: '-head'
(6478,98): run-time error CSS1039: Token not allowed after unary operator: '-faint'
(6479,67): run-time error CSS1039: Token not allowed after unary operator: '-muted'
(6481,10): run-time error CSS1030: Expected identifier, found '.'
(6481,35): run-time error CSS1031: Expected selector, found ')'
(6481,35): run-time error CSS1025: Expected comma or open brace, found ')'
(6481,147): run-time error CSS1039: Token not allowed after unary operator: '-stage-gray'
(6482,10): run-time error CSS1030: Expected identifier, found '.'
(6482,35): run-time error CSS1031: Expected selector, found ')'
(6482,35): run-time error CSS1025: Expected comma or open brace, found ')'
(6482,147): run-time error CSS1039: Token not allowed after unary operator: '-stage-gold'
(6483,10): run-time error CSS1030: Expected identifier, found '.'
(6483,35): run-time error CSS1031: Expected selector, found ')'
(6483,35): run-time error CSS1025: Expected comma or open brace, found ')'
(6483,147): run-time error CSS1039: Token not allowed after unary operator: '-stage-blue'
(6484,10): run-time error CSS1030: Expected identifier, found '.'
(6484,35): run-time error CSS1031: Expected selector, found ')'
(6484,35): run-time error CSS1025: Expected comma or open brace, found ')'
(6484,147): run-time error CSS1039: Token not allowed after unary operator: '-stage-navy'
(6485,10): run-time error CSS1030: Expected identifier, found '.'
(6485,35): run-time error CSS1031: Expected selector, found ')'
(6485,35): run-time error CSS1025: Expected comma or open brace, found ')'
(6485,105): run-time error CSS1030: Expected identifier, found '.'
(6485,130): run-time error CSS1031: Expected selector, found ')'
(6485,130): run-time error CSS1025: Expected comma or open brace, found ')'
(6486,10): run-time error CSS1030: Expected identifier, found '.'
(6486,35): run-time error CSS1031: Expected selector, found ')'
(6486,35): run-time error CSS1025: Expected comma or open brace, found ')'
(6486,104): run-time error CSS1030: Expected identifier, found '.'
(6486,129): run-time error CSS1031: Expected selector, found ')'
(6486,129): run-time error CSS1025: Expected comma or open brace, found ')'
(6487,10): run-time error CSS1030: Expected identifier, found '.'
(6487,35): run-time error CSS1031: Expected selector, found ')'
(6487,35): run-time error CSS1025: Expected comma or open brace, found ')'
(6487,105): run-time error CSS1030: Expected identifier, found '.'
(6487,130): run-time error CSS1031: Expected selector, found ')'
(6487,130): run-time error CSS1025: Expected comma or open brace, found ')'
(6488,10): run-time error CSS1030: Expected identifier, found '.'
(6488,35): run-time error CSS1031: Expected selector, found ')'
(6488,35): run-time error CSS1025: Expected comma or open brace, found ')'
(6488,102): run-time error CSS1030: Expected identifier, found '.'
(6488,127): run-time error CSS1031: Expected selector, found ')'
(6488,127): run-time error CSS1025: Expected comma or open brace, found ')'
(6489,85): run-time error CSS1039: Token not allowed after unary operator: '-accent'
(6492,55): run-time error CSS1039: Token not allowed after unary operator: '-card'
(6492,179): run-time error CSS1039: Token not allowed after unary operator: '-ink'
(6496,71): run-time error CSS1039: Token not allowed after unary operator: '-accent-line'
(6496,103): run-time error CSS1039: Token not allowed after unary operator: '-tint'
(6499,88): run-time error CSS1039: Token not allowed after unary operator: '-faint'
(6500,191): run-time error CSS1039: Token not allowed after unary operator: '-accent'
(6502,116): run-time error CSS1039: Token not allowed after unary operator: '-head'
(6503,70): run-time error CSS1039: Token not allowed after unary operator: '-muted'
(6506,82): run-time error CSS1039: Token not allowed after unary operator: '-head'
(6507,89): run-time error CSS1039: Token not allowed after unary operator: '-faint'
(6508,71): run-time error CSS1039: Token not allowed after unary operator: '-muted'
(6512,140): run-time error CSS1039: Token not allowed after unary operator: '-hair'
(6513,77): run-time error CSS1039: Token not allowed after unary operator: '-muted'
(6514,65): run-time error CSS1039: Token not allowed after unary operator: '-faint'
(6515,83): run-time error CSS1039: Token not allowed after unary operator: '-red'
(6519,51): run-time error CSS1039: Token not allowed after unary operator: '-grey-soft'
(6519,76): run-time error CSS1039: Token not allowed after unary operator: '-faint'
(6520,50): run-time error CSS1039: Token not allowed after unary operator: '-red-soft'
(6520,74): run-time error CSS1039: Token not allowed after unary operator: '-red'
(6521,52): run-time error CSS1039: Token not allowed after unary operator: '-amber-soft'
(6521,78): run-time error CSS1039: Token not allowed after unary operator: '-amber-ink'
(6522,51): run-time error CSS1039: Token not allowed after unary operator: '-blue-soft'
(6522,76): run-time error CSS1039: Token not allowed after unary operator: '-blue'
(6523,71): run-time error CSS1039: Token not allowed after unary operator: '-muted'
(6524,52): run-time error CSS1039: Token not allowed after unary operator: '-accent'
(6532,75): run-time error CSS1039: Token not allowed after unary operator: '-faint'
(6539,229): run-time error CSS1039: Token not allowed after unary operator: '-line'
(6539,254): run-time error CSS1039: Token not allowed after unary operator: '-card'
(6539,285): run-time error CSS1039: Token not allowed after unary operator: '-ink'
(6540,55): run-time error CSS1039: Token not allowed after unary operator: '-accent'
(6540,95): run-time error CSS1039: Token not allowed after unary operator: '-accent'
(6549,19): run-time error CSS1039: Token not allowed after unary operator: '-ink'
(6551,21): run-time error CSS1039: Token not allowed after unary operator: '-accent'
(6553,24): run-time error CSS1039: Token not allowed after unary operator: '-red'
(6555,49): run-time error CSS1030: Expected identifier, found '>'
(6555,65): run-time error CSS1031: Expected selector, found ')'
(6555,65): run-time error CSS1025: Expected comma or open brace, found ')'
(6565,55): run-time error CSS1039: Token not allowed after unary operator: '-head'
(6576,15): run-time error CSS1030: Expected identifier, found '.'
(6576,43): run-time error CSS1031: Expected selector, found ')'
(6576,43): run-time error CSS1025: Expected comma or open brace, found ')'
(6577,15): run-time error CSS1030: Expected identifier, found '.'
(6577,43): run-time error CSS1031: Expected selector, found ')'
(6577,43): run-time error CSS1025: Expected comma or open brace, found ')'
(6578,15): run-time error CSS1030: Expected identifier, found '.'
(6578,43): run-time error CSS1031: Expected selector, found ')'
(6578,43): run-time error CSS1025: Expected comma or open brace, found ')'
(6579,15): run-time error CSS1030: Expected identifier, found '.'
(6579,43): run-time error CSS1031: Expected selector, found ')'
(6579,43): run-time error CSS1025: Expected comma or open brace, found ')'
(6586,15): run-time error CSS1030: Expected identifier, found '.'
(6586,43): run-time error CSS1031: Expected selector, found ')'
(6586,43): run-time error CSS1025: Expected comma or open brace, found ')'
(6587,15): run-time error CSS1030: Expected identifier, found '.'
(6587,43): run-time error CSS1031: Expected selector, found ')'
(6587,43): run-time error CSS1025: Expected comma or open brace, found ')'
(6588,15): run-time error CSS1030: Expected identifier, found '.'
(6588,43): run-time error CSS1031: Expected selector, found ')'
(6588,43): run-time error CSS1025: Expected comma or open brace, found ')'
(6589,15): run-time error CSS1030: Expected identifier, found '.'
(6589,43): run-time error CSS1031: Expected selector, found ')'
(6589,43): run-time error CSS1025: Expected comma or open brace, found ')'
(6590,15): run-time error CSS1030: Expected identifier, found '.'
(6590,43): run-time error CSS1031: Expected selector, found ')'
(6590,43): run-time error CSS1025: Expected comma or open brace, found ')'
(6594,103): run-time error CSS1039: Token not allowed after unary operator: '-accent'
(6595,96): run-time error CSS1039: Token not allowed after unary operator: '-head'
(6596,78): run-time error CSS1039: Token not allowed after unary operator: '-muted'
(6597,30): run-time error CSS1039: Token not allowed after unary operator: '-muted'
(6598,36): run-time error CSS1039: Token not allowed after unary operator: '-accent'
(6603,113): run-time error CSS1039: Token not allowed after unary operator: '-line'
(6603,138): run-time error CSS1039: Token not allowed after unary operator: '-grey-soft'
(6605,95): run-time error CSS1039: Token not allowed after unary operator: '-muted'
(6610,80): run-time error CSS1039: Token not allowed after unary operator: '-hair'
(6611,39): run-time error CSS1039: Token not allowed after unary operator: '-stage-gray'
(6612,97): run-time error CSS1039: Token not allowed after unary operator: '-faint'
(6613,40): run-time error CSS1039: Token not allowed after unary operator: '-head'
(6614,46): run-time error CSS1039: Token not allowed after unary operator: '-stage-gray'
(6614,111): run-time error CSS1039: Token not allowed after unary operator: '-stage-gold'
(6615,46): run-time error CSS1039: Token not allowed after unary operator: '-stage-blue'
(6615,111): run-time error CSS1039: Token not allowed after unary operator: '-stage-navy'
(6616,48): run-time error CSS1039: Token not allowed after unary operator: '-stage-purple'
(6616,112): run-time error CSS1039: Token not allowed after unary operator: '-stage-green'
(6617,48): run-time error CSS1039: Token not allowed after unary operator: '-stage-orange'
(6617,110): run-time error CSS1039: Token not allowed after unary operator: '-stage-red'
(6619,126): run-time error CSS1039: Token not allowed after unary operator: '-grey-soft'
(6619,151): run-time error CSS1039: Token not allowed after unary operator: '-muted'
(6620,49): run-time error CSS1039: Token not allowed after unary operator: '-faint'
(6621,41): run-time error CSS1039: Token not allowed after unary operator: '-red-soft'
(6621,65): run-time error CSS1039: Token not allowed after unary operator: '-red'
(6622,40): run-time error CSS1039: Token not allowed after unary operator: '-red'
(6624,91): run-time error CSS1039: Token not allowed after unary operator: '-grey-soft'
(6624,116): run-time error CSS1039: Token not allowed after unary operator: '-muted'
(6628,82): run-time error CSS1039: Token not allowed after unary operator: '-faint'
(6629,74): run-time error CSS1039: Token not allowed after unary operator: '-head'
(6630,61): run-time error CSS1039: Token not allowed after unary operator: '-muted'
(6631,108): run-time error CSS1039: Token not allowed after unary operator: '-faint'
(6635,151): run-time error CSS1039: Token not allowed after unary operator: '-line'
(6637,175): run-time error CSS1039: Token not allowed after unary operator: '-muted'
(6638,59): run-time error CSS1039: Token not allowed after unary operator: '-head'
(6639,71): run-time error CSS1039: Token not allowed after unary operator: '-accent'
(6639,131): run-time error CSS1039: Token not allowed after unary operator: '-accent'
(6641,108): run-time error CSS1039: Token not allowed after unary operator: '-grey-soft'
(6641,133): run-time error CSS1039: Token not allowed after unary operator: '-muted'
(6642,70): run-time error CSS1039: Token not allowed after unary operator: '-accent-soft'
(6642,97): run-time error CSS1039: Token not allowed after unary operator: '-accent'
(6645,121): run-time error CSS1039: Token not allowed after unary operator: '-line'
(6645,167): run-time error CSS1039: Token not allowed after unary operator: '-card'
(6645,187): run-time error CSS1039: Token not allowed after unary operator: '-ink'
(6646,92): run-time error CSS1039: Token not allowed after unary operator: '-faint'
(6647,47): run-time error CSS1039: Token not allowed after unary operator: '-band'
(6647,67): run-time error CSS1039: Token not allowed after unary operator: '-head'
(6652,74): run-time error CSS1039: Token not allowed after unary operator: '-head'
(6655,57): run-time error CSS1039: Token not allowed after unary operator: '-muted'
(6658,75): run-time error CSS1039: Token not allowed after unary operator: '-hair'
(6661,139): run-time error CSS1039: Token not allowed after unary operator: '-hair'
(6662,96): run-time error CSS1039: Token not allowed after unary operator: '-line'
(6662,121): run-time error CSS1039: Token not allowed after unary operator: '-tint'
(6662,141): run-time error CSS1039: Token not allowed after unary operator: '-muted'
(6667,86): run-time error CSS1039: Token not allowed after unary operator: '-ink'
(6668,73): run-time error CSS1039: Token not allowed after unary operator: '-line'
(6668,196): run-time error CSS1039: Token not allowed after unary operator: '-faint'
(6669,75): run-time error CSS1039: Token not allowed after unary operator: '-hair'
(6672,76): run-time error CSS1039: Token not allowed after unary operator: '-faint'
(6673,109): run-time error CSS1039: Token not allowed after unary operator: '-muted'
(6675,51): run-time error CSS1039: Token not allowed after unary operator: '-band'
(6675,71): run-time error CSS1039: Token not allowed after unary operator: '-head'
(6678,28): run-time error CSS1039: Token not allowed after unary operator: '-green'
(6679,27): run-time error CSS1039: Token not allowed after unary operator: '-red'
(6680,63): run-time error CSS1039: Token not allowed after unary operator: '-muted'
(6681,33): run-time error CSS1039: Token not allowed after unary operator: '-amber'
(6682,81): run-time error CSS1039: Token not allowed after unary operator: '-ink'
(6687,124): run-time error CSS1039: Token not allowed after unary operator: '-muted'
(6689,68): run-time error CSS1039: Token not allowed after unary operator: '-hair'
(6690,55): run-time error CSS1039: Token not allowed after unary operator: '-faint'
(6691,55): run-time error CSS1039: Token not allowed after unary operator: '-ink'
(6694,48): run-time error CSS1039: Token not allowed after unary operator: '-accent'
(6696,64): run-time error CSS1039: Token not allowed after unary operator: '-head'
(6697,27): run-time error CSS1039: Token not allowed after unary operator: '-muted'
(6698,61): run-time error CSS1039: Token not allowed after unary operator: '-muted'
(6699,166): run-time error CSS1039: Token not allowed after unary operator: '-faint'
(6700,40): run-time error CSS1039: Token not allowed after unary operator: '-faint'
(6703,27): run-time error CSS1039: Token not allowed after unary operator: '-muted'
(6704,29): run-time error CSS1039: Token not allowed after unary operator: '-muted'
(6706,54): run-time error CSS1039: Token not allowed after unary operator: '-green'
(6707,33): run-time error CSS1039: Token not allowed after unary operator: '-red'
(6708,34): run-time error CSS1039: Token not allowed after unary operator: '-orange'
(6710,38): run-time error CSS1039: Token not allowed after unary operator: '-blue-soft'
(6710,63): run-time error CSS1039: Token not allowed after unary operator: '-blue'
(6711,38): run-time error CSS1039: Token not allowed after unary operator: '-amber-soft'
(6711,64): run-time error CSS1039: Token not allowed after unary operator: '-amber-ink'
(6713,184): run-time error CSS1039: Token not allowed after unary operator: '-grey-soft'
(6713,209): run-time error CSS1039: Token not allowed after unary operator: '-muted'
(6714,27): run-time error CSS1039: Token not allowed after unary operator: '-faint'
(6715,65): run-time error CSS1039: Token not allowed after unary operator: '-head'
(6723,8): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6723,26): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6724,46): run-time error CSS1039: Token not allowed after unary operator: '-ink'
(6726,14): run-time error CSS1030: Expected identifier, found '.'
(6726,17): run-time error CSS1031: Expected selector, found ')'
(6726,17): run-time error CSS1025: Expected comma or open brace, found ')'
(6728,101): run-time error CSS1039: Token not allowed after unary operator: '-hair'
(6734,96): run-time error CSS1039: Token not allowed after unary operator: '-red-soft'
(6734,120): run-time error CSS1039: Token not allowed after unary operator: '-red'
(6737,121): run-time error CSS1039: Token not allowed after unary operator: '-f-label'
(6737,216): run-time error CSS1039: Token not allowed after unary operator: '-muted'
(6738,44): run-time error CSS1039: Token not allowed after unary operator: '-red'
(6739,52): run-time error CSS1039: Token not allowed after unary operator: '-faint'
(6740,160): run-time error CSS1039: Token not allowed after unary operator: '-faint'
(6742,134): run-time error CSS1039: Token not allowed after unary operator: '-faint'
(6744,165): run-time error CSS1039: Token not allowed after unary operator: '-head'
(6744,199): run-time error CSS1039: Token not allowed after unary operator: '-line'
(6745,77): run-time error CSS1039: Token not allowed after unary operator: '-faint'
(6746,77): run-time error CSS1039: Token not allowed after unary operator: '-accent'
(6746,115): run-time error CSS1039: Token not allowed after unary operator: '-accent'
(6747,47): run-time error CSS1039: Token not allowed after unary operator: '-faint'
(6748,134): run-time error CSS1039: Token not allowed after unary operator: '-head'
(6750,190): run-time error CSS1039: Token not allowed after unary operator: '-line'
(6751,160): run-time error CSS1039: Token not allowed after unary operator: '-faint'
(6755,42): run-time error CSS1039: Token not allowed after unary operator: '-f-label'
(6755,72): run-time error CSS1039: Token not allowed after unary operator: '-f-input'
(6755,106): run-time error CSS1039: Token not allowed after unary operator: '-red'
(6757,156): run-time error CSS1039: Token not allowed after unary operator: '-faint'
(6758,87): run-time error CSS1039: Token not allowed after unary operator: '-accent'
(6762,90): run-time error CSS1039: Token not allowed after unary operator: '-f-input'
(6762,176): run-time error CSS1039: Token not allowed after unary operator: '-line'
(6763,67): run-time error CSS1039: Token not allowed after unary operator: '-faint'
(6764,74): run-time error CSS1039: Token not allowed after unary operator: '-accent'
(6764,112): run-time error CSS1039: Token not allowed after unary operator: '-accent'
(6765,129): run-time error CSS1039: Token not allowed after unary operator: '-faint'
(6772,38): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6772,51): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6773,52): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6773,64): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6774,51): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6774,64): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6775,52): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6775,65): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6776,42): run-time error CSS1030: Expected identifier, found '.'
(6776,115): run-time error CSS1031: Expected selector, found ')'
(6776,115): run-time error CSS1025: Expected comma or open brace, found ')'
(6777,42): run-time error CSS1030: Expected identifier, found '.'
(6777,115): run-time error CSS1031: Expected selector, found ')'
(6777,115): run-time error CSS1025: Expected comma or open brace, found ')'
(6778,60): run-time error CSS1039: Token not allowed after unary operator: '-p1'
(6779,75): run-time error CSS1039: Token not allowed after unary operator: '-f-label'
(6779,98): run-time error CSS1039: Token not allowed after unary operator: '-p1'
(6779,124): run-time error CSS1039: Token not allowed after unary operator: '-p2'
(6783,86): run-time error CSS1039: Token not allowed after unary operator: '-muted'
(6784,72): run-time error CSS1039: Token not allowed after unary operator: '-muted'
(6787,119): run-time error CSS1039: Token not allowed after unary operator: '-f-label'
(6787,136): run-time error CSS1039: Token not allowed after unary operator: '-f-input'
(6789,82): run-time error CSS1039: Token not allowed after unary operator: '-muted'
(6793,132): run-time error CSS1039: Token not allowed after unary operator: '-red-soft'
(6793,167): run-time error CSS1039: Token not allowed after unary operator: '-red'
(6794,72): run-time error CSS1039: Token not allowed after unary operator: '-red'
(6796,58): run-time error CSS1039: Token not allowed after unary operator: '-f-input'
(6797,92): run-time error CSS1039: Token not allowed after unary operator: '-line'
(6798,95): run-time error CSS1039: Token not allowed after unary operator: '-head'
(6799,74): run-time error CSS1039: Token not allowed after unary operator: '-faint'
(6803,83): run-time error CSS1039: Token not allowed after unary operator: '-f-label'
(6803,148): run-time error CSS1039: Token not allowed after unary operator: '-muted'
(6806,76): run-time error CSS1039: Token not allowed after unary operator: '-f-input'
(6806,153): run-time error CSS1039: Token not allowed after unary operator: '-line'
(6806,198): run-time error CSS1039: Token not allowed after unary operator: '-band'
(6807,124): run-time error CSS1039: Token not allowed after unary operator: '-head'
(6808,105): run-time error CSS1039: Token not allowed after unary operator: '-muted'
(6812,80): run-time error CSS1039: Token not allowed after unary operator: '-faint'
(6813,86): run-time error CSS1039: Token not allowed after unary operator: '-accent'
(6815,190): run-time error CSS1039: Token not allowed after unary operator: '-hair'
(6817,89): run-time error CSS1039: Token not allowed after unary operator: '-faint'
(6818,99): run-time error CSS1039: Token not allowed after unary operator: '-accent'
(6819,213): run-time error CSS1039: Token not allowed after unary operator: '-accent'
(6821,167): run-time error CSS1039: Token not allowed after unary operator: '-accent-ink'
(6824,203): run-time error CSS1039: Token not allowed after unary operator: '-line'
(6824,270): run-time error CSS1039: Token not allowed after unary operator: '-band'
(6825,147): run-time error CSS1039: Token not allowed after unary operator: '-head'
(6828,88): run-time error CSS1039: Token not allowed after unary operator: '-line'
(6830,174): run-time error CSS1039: Token not allowed after unary operator: '-band'
(6840,59): run-time error CSS1039: Token not allowed after unary operator: '-card'
(6840,90): run-time error CSS1039: Token not allowed after unary operator: '-line'
(6854,229): run-time error CSS1039: Token not allowed after unary operator: '-line'
(6854,297): run-time error CSS1039: Token not allowed after unary operator: '-band'
(6854,328): run-time error CSS1039: Token not allowed after unary operator: '-head'
(6855,70): run-time error CSS1039: Token not allowed after unary operator: '-band-2'
(6857,84): run-time error CSS1039: Token not allowed after unary operator: '-ink'
(6859,41): run-time error CSS1039: Token not allowed after unary operator: '-card'
(6859,79): run-time error CSS1039: Token not allowed after unary operator: '-accent'
(6860,167): run-time error CSS1039: Token not allowed after unary operator: '-ink'
(6863,56): run-time error CSS1039: Token not allowed after unary operator: '-tint'
(6863,94): run-time error CSS1039: Token not allowed after unary operator: '-hair'
(6867,125): run-time error CSS1039: Token not allowed after unary operator: '-head'
(6867,159): run-time error CSS1039: Token not allowed after unary operator: '-line'
(6868,89): run-time error CSS1039: Token not allowed after unary operator: '-accent'
(6868,127): run-time error CSS1039: Token not allowed after unary operator: '-accent'
(6871,50): run-time error CSS1039: Token not allowed after unary operator: '-faint'
(6872,143): run-time error CSS1039: Token not allowed after unary operator: '-head'
(6874,169): run-time error CSS1039: Token not allowed after unary operator: '-faint'
(6875,74): run-time error CSS1039: Token not allowed after unary operator: '-red'
(6876,112): run-time error CSS1039: Token not allowed after unary operator: '-faint'
(6877,53): run-time error CSS1039: Token not allowed after unary operator: '-red'
(6884,70): run-time error CSS1039: Token not allowed after unary operator: '-faint'
(6885,60): run-time error CSS1039: Token not allowed after unary operator: '-accent'
(6887,53): run-time error CSS1039: Token not allowed after unary operator: '-faint'
(6888,43): run-time error CSS1039: Token not allowed after unary operator: '-accent'
(6891,219): run-time error CSS1039: Token not allowed after unary operator: '-line'
(6891,286): run-time error CSS1039: Token not allowed after unary operator: '-card'
(6893,160): run-time error CSS1039: Token not allowed after unary operator: '-muted'
(6894,143): run-time error CSS1039: Token not allowed after unary operator: '-accent'
(6894,181): run-time error CSS1039: Token not allowed after unary operator: '-card'
(6895,90): run-time error CSS1039: Token not allowed after unary operator: '-accent'
(6898,84): run-time error CSS1039: Token not allowed after unary operator: '-card'
(6898,231): run-time error CSS1039: Token not allowed after unary operator: '-ink'
(6900,123): run-time error CSS1039: Token not allowed after unary operator: '-hair'
(6910,89): run-time error CSS1039: Token not allowed after unary operator: '-alt'
(6912,174): run-time error CSS1039: Token not allowed after unary operator: '-hover'
(6914,192): run-time error CSS1039: Token not allowed after unary operator: '-faint'
(6917,48): run-time error CSS1039: Token not allowed after unary operator: '-ink'
(6918,54): run-time error CSS1039: Token not allowed after unary operator: '-accent'
(6919,55): run-time error CSS1039: Token not allowed after unary operator: '-faint'
(6920,61): run-time error CSS1039: Token not allowed after unary operator: '-red'
(6921,99): run-time error CSS1039: Token not allowed after unary operator: '-faint'
(6922,140): run-time error CSS1039: Token not allowed after unary operator: '-head'
(6922,165): run-time error CSS1039: Token not allowed after unary operator: '-tint'
(6922,200): run-time error CSS1039: Token not allowed after unary operator: '-line'
(6939,23): run-time error CSS1030: Expected identifier, found '['
(6939,26): run-time error CSS1031: Expected selector, found '$='
(6939,26): run-time error CSS1025: Expected comma or open brace, found '$='
(7161,58): run-time error CSS1039: Token not allowed after unary operator: '-amber'
(7170,248): run-time error CSS1039: Token not allowed after unary operator: '-head'
(7171,198): run-time error CSS1039: Token not allowed after unary operator: '-head'
(7174,136): run-time error CSS1039: Token not allowed after unary operator: '-head'
(7176,33): run-time error CSS1030: Expected identifier, found '['
(7176,42): run-time error CSS1031: Expected selector, found ']'
(7176,42): run-time error CSS1025: Expected comma or open brace, found ']'
(7178,92): run-time error CSS1039: Token not allowed after unary operator: '-faint'
(7179,81): run-time error CSS1039: Token not allowed after unary operator: '-accent'
(7199,40): run-time error CSS1039: Token not allowed after unary operator: '-ink'
(7200,46): run-time error CSS1039: Token not allowed after unary operator: '-accent'
(7201,40): run-time error CSS1039: Token not allowed after unary operator: '-faint'
(7211,142): run-time error CSS1039: Token not allowed after unary operator: '-faint'
(7212,46): run-time error CSS1039: Token not allowed after unary operator: '-hover'
(7212,67): run-time error CSS1039: Token not allowed after unary operator: '-accent'
(7215,71): run-time error CSS1039: Token not allowed after unary operator: '-muted'
(7218,151): run-time error CSS1039: Token not allowed after unary operator: '-line'
(7223,125): run-time error CSS1039: Token not allowed after unary operator: '-accent'
(7224,145): run-time error CSS1039: Token not allowed after unary operator: '-grey-soft'
(7224,170): run-time error CSS1039: Token not allowed after unary operator: '-muted'
(7225,62): run-time error CSS1039: Token not allowed after unary operator: '-accent-soft'
(7225,89): run-time error CSS1039: Token not allowed after unary operator: '-accent'
(7228,136): run-time error CSS1039: Token not allowed after unary operator: '-muted'
(7230,65): run-time error CSS1039: Token not allowed after unary operator: '-green'
(7233,75): run-time error CSS1039: Token not allowed after unary operator: '-head'
(7234,57): run-time error CSS1039: Token not allowed after unary operator: '-faint'
(7235,63): run-time error CSS1039: Token not allowed after unary operator: '-accent'
(7236,67): run-time error CSS1039: Token not allowed after unary operator: '-red'
(7238,104): run-time error CSS1039: Token not allowed after unary operator: '-muted'
(7249,185): run-time error CSS1039: Token not allowed after unary operator: '-faint'
(7250,105): run-time error CSS1039: Token not allowed after unary operator: '-hair'
(7252,125): run-time error CSS1039: Token not allowed after unary operator: '-hair'
(7255,135): run-time error CSS1039: Token not allowed after unary operator: '-muted'
(7255,161): run-time error CSS1039: Token not allowed after unary operator: '-card'
(7256,58): run-time error CSS1039: Token not allowed after unary operator: '-head'
(7256,85): run-time error CSS1039: Token not allowed after unary operator: '-head'
(7257,57): run-time error CSS1039: Token not allowed after unary operator: '-violet'
(7257,86): run-time error CSS1039: Token not allowed after unary operator: '-violet'
(7258,55): run-time error CSS1039: Token not allowed after unary operator: '-accent'
(7258,84): run-time error CSS1039: Token not allowed after unary operator: '-accent'
(7262,67): run-time error CSS1039: Token not allowed after unary operator: '-head'
(7263,69): run-time error CSS1039: Token not allowed after unary operator: '-faint'
(7264,102): run-time error CSS1039: Token not allowed after unary operator: '-ink'
(7268,142): run-time error CSS1039: Token not allowed after unary operator: '-band'
(7268,173): run-time error CSS1039: Token not allowed after unary operator: '-line'
(7268,193): run-time error CSS1039: Token not allowed after unary operator: '-ink'
(7269,44): run-time error CSS1039: Token not allowed after unary operator: '-hover'
(7270,54): run-time error CSS1039: Token not allowed after unary operator: '-faint'
(7273,106): run-time error CSS1039: Token not allowed after unary operator: '-faint'
(7273,132): run-time error CSS1039: Token not allowed after unary operator: '-card'
(7274,67): run-time error CSS1039: Token not allowed after unary operator: '-muted'
(7275,52): run-time error CSS1039: Token not allowed after unary operator: '-ink'
(7278,77): run-time error CSS1039: Token not allowed after unary operator: '-muted'
(7280,117): run-time error CSS1039: Token not allowed after unary operator: '-muted'
(7281,80): run-time error CSS1039: Token not allowed after unary operator: '-muted'
(7282,81): run-time error CSS1039: Token not allowed after unary operator: '-faint'
(7287,62): run-time error CSS1039: Token not allowed after unary operator: '-line'
(7287,108): run-time error CSS1039: Token not allowed after unary operator: '-card'
(7289,51): run-time error CSS1039: Token not allowed after unary operator: '-band'
(7290,142): run-time error CSS1039: Token not allowed after unary operator: '-faint'
(7291,70): run-time error CSS1039: Token not allowed after unary operator: '-head'
(7294,95): run-time error CSS1039: Token not allowed after unary operator: '-muted'
(7295,80): run-time error CSS1039: Token not allowed after unary operator: '-ink'
(7296,141): run-time error CSS1039: Token not allowed after unary operator: '-violet-soft'
(7296,168): run-time error CSS1039: Token not allowed after unary operator: '-violet'
(7300,197): run-time error CSS1039: Token not allowed after unary operator: '-band'
(7300,268): run-time error CSS1039: Token not allowed after unary operator: '-hair'
(7301,52): run-time error CSS1039: Token not allowed after unary operator: '-muted'
(7302,137): run-time error CSS1039: Token not allowed after unary operator: '-head'
(7303,60): run-time error CSS1039: Token not allowed after unary operator: '-faint'
(7306,137): run-time error CSS1039: Token not allowed after unary operator: '-hair'
(7311,148): run-time error CSS1039: Token not allowed after unary operator: '-line'
(7311,194): run-time error CSS1039: Token not allowed after unary operator: '-card'
(7311,214): run-time error CSS1039: Token not allowed after unary operator: '-muted'
(7312,66): run-time error CSS1039: Token not allowed after unary operator: '-head'
(7313,58): run-time error CSS1039: Token not allowed after unary operator: '-accent-soft'
(7313,92): run-time error CSS1039: Token not allowed after unary operator: '-accent-line'
(7313,119): run-time error CSS1039: Token not allowed after unary operator: '-accent'
(7315,71): run-time error CSS1039: Token not allowed after unary operator: '-accent-line'
(7316,60): run-time error CSS1039: Token not allowed after unary operator: '-faint'
(7317,51): run-time error CSS1039: Token not allowed after unary operator: '-accent-line'
(7317,78): run-time error CSS1039: Token not allowed after unary operator: '-accent'
(7319,64): run-time error CSS1030: Expected identifier, found '.'
(7319,73): run-time error CSS1031: Expected selector, found ')'
(7319,73): run-time error CSS1025: Expected comma or open brace, found ')'
(7321,77): run-time error CSS1039: Token not allowed after unary operator: '-faint'
(7324,120): run-time error CSS1039: Token not allowed after unary operator: '-hair'
(7329,220): run-time error CSS1039: Token not allowed after unary operator: '-line'
(7329,287): run-time error CSS1039: Token not allowed after unary operator: '-band'
(7329,318): run-time error CSS1039: Token not allowed after unary operator: '-head'
(7330,61): run-time error CSS1039: Token not allowed after unary operator: '-band-2'
(7331,121): run-time error CSS1039: Token not allowed after unary operator: '-faint'
(7333,75): run-time error CSS1039: Token not allowed after unary operator: '-ink'
(7335,124): run-time error CSS1039: Token not allowed after unary operator: '-faint'
(7338,81): run-time error CSS1039: Token not allowed after unary operator: '-hair'
(7339,150): run-time error CSS1039: Token not allowed after unary operator: '-faint'
(7340,86): run-time error CSS1039: Token not allowed after unary operator: '-head'
(7341,43): run-time error CSS1039: Token not allowed after unary operator: '-faint'
(7342,36): run-time error CSS1039: Token not allowed after unary operator: '-accent'
(7344,69): run-time error CSS1039: Token not allowed after unary operator: '-muted'
(7345,156): run-time error CSS1039: Token not allowed after unary operator: '-hair'
(7347,160): run-time error CSS1039: Token not allowed after unary operator: '-faint'
(7351,151): run-time error CSS1039: Token not allowed after unary operator: '-muted'
(7352,71): run-time error CSS1039: Token not allowed after unary operator: '-hair'
(7353,90): run-time error CSS1039: Token not allowed after unary operator: '-blue'
(7354,44): run-time error CSS1039: Token not allowed after unary operator: '-green'
(7355,49): run-time error CSS1039: Token not allowed after unary operator: '-red'
(7356,71): run-time error CSS1039: Token not allowed after unary operator: '-blue'
(7357,36): run-time error CSS1039: Token not allowed after unary operator: '-green'
(7358,41): run-time error CSS1039: Token not allowed after unary operator: '-red'
(7383,46): run-time error CSS1039: Token not allowed after unary operator: '-ink'
(7388,32): run-time error CSS1039: Token not allowed after unary operator: '-accent'
(7402,46): run-time error CSS1039: Token not allowed after unary operator: '-line'
(7402,82): run-time error CSS1039: Token not allowed after unary operator: '-accent'
(7405,53): run-time error CSS1039: Token not allowed after unary operator: '-head'
(7406,38): run-time error CSS1039: Token not allowed after unary operator: '-muted'
(7407,37): run-time error CSS1039: Token not allowed after unary operator: '-accent'
(7409,53): run-time error CSS1039: Token not allowed after unary operator: '-muted'
(7409,90): run-time error CSS1039: Token not allowed after unary operator: '-line'
(7416,46): run-time error CSS1039: Token not allowed after unary operator: '-line'
(7429,60): run-time error CSS1039: Token not allowed after unary operator: '-faint'
(7430,34): run-time error CSS1039: Token not allowed after unary operator: '-faint'
(7441,53): run-time error CSS1039: Token not allowed after unary operator: '-faint'
(7441,100): run-time error CSS1039: Token not allowed after unary operator: '-head'
(7449,62): run-time error CSS1039: Token not allowed after unary operator: '-hair'
(7453,55): run-time error CSS1039: Token not allowed after unary operator: '-line'
(7454,44): run-time error CSS1039: Token not allowed after unary operator: '-head'
(7455,24): run-time error CSS1039: Token not allowed after unary operator: '-faint'
(7456,61): run-time error CSS1039: Token not allowed after unary operator: '-faint'
(7459,42): run-time error CSS1039: Token not allowed after unary operator: '-head'
(7460,45): run-time error CSS1039: Token not allowed after unary operator: '-faint'
(7468,56): run-time error CSS1039: Token not allowed after unary operator: '-line'
(7473,93): run-time error CSS1039: Token not allowed after unary operator: '-muted'
(7475,42): run-time error CSS1039: Token not allowed after unary operator: '-accent'
(7480,67): run-time error CSS1039: Token not allowed after unary operator: '-hair'
(7481,46): run-time error CSS1039: Token not allowed after unary operator: '-band'
(7481,66): run-time error CSS1039: Token not allowed after unary operator: '-faint'
(7484,78): run-time error CSS1039: Token not allowed after unary operator: '-head'
(7485,62): run-time error CSS1039: Token not allowed after unary operator: '-tint'
(7487,112): run-time error CSS1039: Token not allowed after unary operator: '-head'
(7488,65): run-time error CSS1039: Token not allowed after unary operator: '-tint'
(7489,55): run-time error CSS1039: Token not allowed after unary operator: '-hover'
(7492,57): run-time error CSS1039: Token not allowed after unary operator: '-accent'
(7510,51): run-time error CSS1039: Token not allowed after unary operator: '-head'
(7515,29): run-time error CSS1039: Token not allowed after unary operator: '-accent'
(7525,53): run-time error CSS1039: Token not allowed after unary operator: '-faint'
(7526,40): run-time error CSS1039: Token not allowed after unary operator: '-accent'
(7536,116): run-time error CSS1039: Token not allowed after unary operator: '-faint'
(7537,117): run-time error CSS1039: Token not allowed after unary operator: '-accent'
(7541,40): run-time error CSS1039: Token not allowed after unary operator: '-muted'
(7543,46): run-time error CSS1039: Token not allowed after unary operator: '-accent'
(7556,45): run-time error CSS1039: Token not allowed after unary operator: '-faint'
(7563,22): run-time error CSS1039: Token not allowed after unary operator: '-band'
(7563,60): run-time error CSS1039: Token not allowed after unary operator: '-line'
(7563,80): run-time error CSS1039: Token not allowed after unary operator: '-faint'
(7566,73): run-time error CSS1039: Token not allowed after unary operator: '-faint'
(7568,125): run-time error CSS1039: Token not allowed after unary operator: '-hair'
(7569,83): run-time error CSS1039: Token not allowed after unary operator: '-tint'
(7570,81): run-time error CSS1039: Token not allowed after unary operator: '-hover'
(7572,119): run-time error CSS1039: Token not allowed after unary operator: '-head'
(7578,43): run-time error CSS1039: Token not allowed after unary operator: '-faint'
(7596,74): run-time error CSS1039: Token not allowed after unary operator: '-faint'
(7596,163): run-time error CSS1039: Token not allowed after unary operator: '-line'
(7597,115): run-time error CSS1039: Token not allowed after unary operator: '-hair'
(7598,55): run-time error CSS1039: Token not allowed after unary operator: '-tint'
(7599,52): run-time error CSS1039: Token not allowed after unary operator: '-hover'
(7601,94): run-time error CSS1039: Token not allowed after unary operator: '-faint'
(7611,50): run-time error CSS1039: Token not allowed after unary operator: '-faint'
(7616,47): run-time error CSS1039: Token not allowed after unary operator: '-head'
(7616,126): run-time error CSS1039: Token not allowed after unary operator: '-line'
(7620,65): run-time error CSS1039: Token not allowed after unary operator: '-hair'
(7621,84): run-time error CSS1039: Token not allowed after unary operator: '-head'
(7622,53): run-time error CSS1039: Token not allowed after unary operator: '-tint'
(7624,32): run-time error CSS1039: Token not allowed after unary operator: '-faint'
(7845,197): run-time error CSS1039: Token not allowed after unary operator: '-csw-theme'
(7916,19): run-time error CSS1030: Expected identifier, found '.'
(7916,32): run-time error CSS1031: Expected selector, found ')'
(7916,32): run-time error CSS1025: Expected comma or open brace, found ')'
(7923,25): run-time error CSS1030: Expected identifier, found '.'
(7923,26): run-time error CSS1030: Expected identifier, found 'tn2-tools'
(7923,39): run-time error CSS1031: Expected selector, found ')'
(7923,39): run-time error CSS1025: Expected comma or open brace, found ')'
(7936,108): run-time error CSS1039: Token not allowed after unary operator: '-csw-accent'
(7966,55): run-time error CSS1039: Token not allowed after unary operator: '-csw-theme'
(8027,54): run-time error CSS1039: Token not allowed after unary operator: '-csw-accent-line'
(8043,35): run-time error CSS1039: Token not allowed after unary operator: '-csw-accent-ink'
(8050,55): run-time error CSS1039: Token not allowed after unary operator: '-csw-accent-ink'
(8082,64): run-time error CSS1039: Token not allowed after unary operator: '-csw-accent-soft'
(8082,104): run-time error CSS1039: Token not allowed after unary operator: '-csw-accent-ink'
(8083,41): run-time error CSS1039: Token not allowed after unary operator: '-csw-accent'
(8084,54): run-time error CSS1039: Token not allowed after unary operator: '-csw-accent-ink'
(8097,38): run-time error CSS1039: Token not allowed after unary operator: '-csw-accent-soft'
(8097,85): run-time error CSS1039: Token not allowed after unary operator: '-csw-accent-line'
(8097,125): run-time error CSS1039: Token not allowed after unary operator: '-csw-accent-ink'
(8115,36): run-time error CSS1039: Token not allowed after unary operator: '-csw-accent-ink'
(8130,37): run-time error CSS1039: Token not allowed after unary operator: '-csw-accent-soft'
(8130,77): run-time error CSS1039: Token not allowed after unary operator: '-csw-accent-ink'
(8131,39): run-time error CSS1039: Token not allowed after unary operator: '-csw-accent'
(8136,52): run-time error CSS1039: Token not allowed after unary operator: '-csw-accent-ink'
(8144,61): run-time error CSS1039: Token not allowed after unary operator: '-csw-theme-line'
(8152,43): run-time error CSS1039: Token not allowed after unary operator: '-csw-accent-ink'
(8178,34): run-time error CSS1039: Token not allowed after unary operator: '-csw-accent'
(8179,40): run-time error CSS1039: Token not allowed after unary operator: '-csw-accent-ink'
 */
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;
}

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

.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: 760px) { .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; }
.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 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: replace the <h1> block with PageHead.ascx. PageHead
   puts the class "rpt" on the form, and every rule below hangs off that class. 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 selected sub-nav tab, the primary button,
     the selected wizard step, the document number, a link that opens a document (.badge-light), the
     current page, a tool in its on-state, the focused keyword box. Nothing else.
     Ink and greys: everything else - names, amounts, captions, dates, links inside cells.
     Meaning colours (identical on every tenant): stage badges (the CRM setup colour), red for a reason or
     an overdue date, the stat icon circles, the k-* pills.

   TYPE - inherits the master sheet (body 12px Roboto). Sized here: sub-nav 13px, stat value 18px, count
   15px, row title / amount 13px, captions and meta 11px, grid header 11px.

   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;

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

/* ---- 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: 37px; }
/* 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; }
.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; }

/* ---- 2 search card: #searchArea as the page already has it ---- */
.rpt :is(#searchArea, .searchArea) { position: relative; background: var(--card); border: 1px solid var(--line); 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-2
   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 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-2); 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(255,255,255,.25); color: #fff; }
/* 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; }

/* 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 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 */
.rpt .search-controls table td { position: relative; }
.rpt .search-controls 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 { content: "\f00d"; font-family: FontAwesome; font-size: 11px; color: inherit; }
.rpt .search-controls table td .rcbClear:hover { opacity: 1 !important; background: var(--hover); color: var(--head); }
.rpt .search-controls table td .RadComboBox:has(input.rcbEmpty) + .rcbClear { display: none; }
/* the token box (the leads' Products, 14 Sep 2026): its underline and empty message like the combos' */
.rpt .search-controls .RadAutoCompleteBox_Material .racTokenList:before { border-bottom-color: var(--line) !important; }
.rpt .search-controls .RadAutoCompleteBox_Material .racEmptyMessage { color: var(--faint) !important; font-style: normal !important; opacity: 1 !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; }
.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(--ink); }
.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; }
.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, the salesperson scope's Assignment; 14 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; }
/* 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); }

/* ---- 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(--line); 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); }
.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); }
.rpt .grid-controls div.totalBox.hidden2 { display: none; }
/* the tools: every ul.nav caption and the .excel link 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 {
    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 { 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 { color: var(--muted); font-size: 11px; margin: 0; }
/* 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; }
: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 lists inside a menu (the Sort menu): quiet 11px labels; the pair in the head keeps its case and size */
:is(.rpt, .rv) ul.nav > li > ul .RadRadioButtonList { display: inline-block; }
:is(.rpt, .rv) ul.nav > li > ul .RadRadioButtonList .rbText { color: var(--ink) !important; font-size: 11px; font-weight: 400; text-transform: none; letter-spacing: 0; }
: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(--line); 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 2px rule in the tenant's
   ACCENT under it - the one line of brand on the grid (the client, 17 Sep 2026: the full accent, not the tint). The grey
   band it had (--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 no longer look alike; the bar above it took a light grey (--band) so the two are not
   both white */
.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: 2px solid var(--accent) !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 white / --alt (the client's call, 11 Sep 2026), starting white under the header so the header band stands
   off the first row; the pointer darkens either to --hover */
.rpt .myGrid.sexy-grid > tbody:first-child > tr:nth-child(even 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(odd 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 .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 a 12% tint with the colour as text */
:is(.rpt .myGrid.sexy-grid, .rv) .badge-gray { background: color-mix(in srgb, var(--stage-gray) 14%, white) !important; color: #6f6f6f !important; }
:is(.rpt .myGrid.sexy-grid, .rv) .badge-gold { background: color-mix(in srgb, var(--stage-gold) 14%, white) !important; color: #a97f24 !important; }
:is(.rpt .myGrid.sexy-grid, .rv) .badge-blue { background: color-mix(in srgb, var(--stage-blue) 12%, white) !important; color: #1b86b8 !important; }
:is(.rpt .myGrid.sexy-grid, .rv) .badge-navy { background: color-mix(in srgb, var(--stage-navy) 12%, white) !important; color: #5174bd !important; }
:is(.rpt .myGrid.sexy-grid, .rv) .badge-purple { background: color-mix(in srgb, var(--stage-purple) 12%, white) !important; color: #9932cc !important; }
:is(.rpt .myGrid.sexy-grid, .rv) .badge-green { background: color-mix(in srgb, var(--stage-green) 14%, white) !important; color: #3f8f2a !important; }
:is(.rpt .myGrid.sexy-grid, .rv) .badge-orange { background: color-mix(in srgb, var(--stage-orange) 12%, white) !important; color: #e07a00 !important; }
:is(.rpt .myGrid.sexy-grid, .rv) .badge-red { background: color-mix(in srgb, var(--stage-red) 12%, white) !important; color: crimson !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; }
.rpt .myGrid.sexy-grid .pill { font-size: 11px; padding: 3px 10px; line-height: 1; white-space: nowrap; }
.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 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; }
/* 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); }
/* 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: 40ch; overflow: hidden; text-overflow: ellipsis; vertical-align: bottom; }   /* the name is cut at ~40 characters (the full name is its tooltip) */
.rpt .myGrid.sexy-grid > tbody > tr.is-folded > td > .label.block.d-main { max-width: 32ch; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }             /* the customer is cut only in the fold; the Expanded row shows it whole */
.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(--line); 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 */
.rpt .rpt-card > .super-text { display: block; margin: 0; font-size: 10px; color: var(--faint); letter-spacing: .02em; }
.rpt .rpt-card a.rpt-card-name { 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); text-decoration: none; overflow-wrap: anywhere; }
.rpt .rpt-card a.rpt-card-name:hover { 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; }
body.v2 .TelerikModalOverlay { background-color: var(--head) !important; opacity: .4 !important; }
/* 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 */
div.rw-history { z-index: 7300 !important; }
/* 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) .rwCommands { top: -16px; right: -16px; margin: 0; }
.RadWindow:is(.rw-1, .rw-2, .rw-3, .rw-pop) .rwCommands .rwListItem { margin: 0; }
.RadWindow:is(.rw-1, .rw-2, .rw-3, .rw-pop) .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) .rwCloseButton:hover { background: var(--hover); border-color: #cfd8dc; color: var(--head) !important; }
.RadWindow:is(.rw-1, .rw-2, .rw-3, .rw-pop) .rwCloseButton:before { font-size: 14px; }
/* 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); }
/* 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 */
.rv-bar { position: relative; margin-top: 2px; }
.rv-tabs.ui-tabs { padding-top: 0; }
.rv-tabs .ui-tabs-nav { display: flex; flex-wrap: wrap; align-items: center; gap: 2px; margin: 0; padding: 0 120px 0 0; border-bottom: 1px solid var(--line); }
.rv-tabs .ui-tabs-nav li { float: none; margin: 0; border: none !important; background: transparent !important; }
.rv-tabs .ui-tabs-nav .ui-tabs-anchor { float: none; display: inline-flex; align-items: center; gap: 6px; padding: 11px 12px; font-size: 12px; 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; min-width: 18px; 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; }
.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: 5px; z-index: 20; float: none; margin: 0; }
.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; }
.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); }

/* ---- 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-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; }
.rpt-pop { padding: 14px 22px 0; color: var(--ink); font-size: 12px; }
.rpt-pop .form-holder { padding: 0; background: transparent; border-radius: 0; }              /* the window is the card */
.rpt-pop:has(.m2) { padding: 0; }                                                          /* Messaging V2 fills the popup window (docs/MESSAGING-V2.md, 18 Sep 2026) */
/* 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 */
.rpt-pop .RadTabStrip_Material.rpt-nav { margin: 0 0 16px !important; border-bottom: 1px solid var(--hair); }
.rpt-pop .rpt-nav.RadTabStrip_Material .rtsLevel1 { margin: 0 !important; padding: 0 !important; }
.rpt-pop .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 muted, 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: 500; line-height: 30px; color: var(--muted); }   /* 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); }
/* 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 .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) and the duplicate-name slot: faint, the accent on hover, on the input's line */
.rpt .myForm section > a.add, .rpt .myForm section > a.copy { display: inline-block; margin-left: 6px; vertical-align: top; line-height: 30px; color: var(--faint); text-decoration: none; }
.rpt .myForm section > a.add:hover, .rpt .myForm section > a.copy:hover { color: var(--accent); }
.rpt .myForm section > a.add:before, .rpt .myForm section > a.copy: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); }
/* 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; }
.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 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; }
/* 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; }
/* 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; }
/* 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, the 2px accent rule - 17 Sep 2026) */
.rpt .rpt-entry-head { background: var(--card); border-bottom: 2px solid var(--accent); }
.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; }
/* 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; }


/* ---- 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 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 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; }
    & .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 */

    /* 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 #records { margin: 0 0 14px !important; padding: 0 0 10px; border-bottom: 1px solid var(--hair) !important; }
    & .rwContent #records p { margin: 0; font-size: 12px; color: var(--head) !important; }
    & .rwContent #records 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, 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; }
    & .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 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): a CSS bubble on any element carrying data-tip - no script, so it survives an
   AJAX update and needs no title (the master's RadToolTipManager tooltipifies only .help / .tipify elements WITH a title; leave the
   title off an element that carries data-tip). The bubble sits above the element, centred, in the head colour with white 11px text,
   and shows on hover and keyboard focus; data-tip-pos="below" drops it under the element (for a caption at the top of a card that
   clips its overflow). Scoped on body.v2 so a dialog outside .rpt gets it too. ---- */
body.v2 [data-tip] { position: relative; }
body.v2 [data-tip]::after { content: attr(data-tip); position: absolute; left: 50%; bottom: calc(100% + 7px); transform: translateX(-50%); z-index: 9000; 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); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .12s; }
body.v2 [data-tip]::before { content: ""; position: absolute; left: 50%; bottom: calc(100% + 2px); transform: translateX(-50%); z-index: 9000; border: 5px solid transparent; border-top-color: var(--head); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .12s; }
body.v2 [data-tip]:hover::after, body.v2 [data-tip]:hover::before, body.v2 [data-tip]:focus-visible::after, body.v2 [data-tip]:focus-visible::before { opacity: 1; visibility: visible; }
body.v2 [data-tip-pos="below"]::after { bottom: auto; top: calc(100% + 7px); }
body.v2 [data-tip-pos="below"]::before { bottom: auto; top: calc(100% + 2px); 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; }

/* =====================================================================================================
   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(--line); 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(--line); 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(--line); 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(--line); 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: #607d8b; font-weight: 500; }
.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; }
.rpt-kpis-compact .rpt-kpi .kpi-value { flex-wrap: nowrap; margin-top: 4px; }
.rpt-kpis-compact .rpt-kpi .kpi-spark:empty { display: none; }
.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 bubble's text must not inherit the glyph's FontAwesome from the site's .help:after rule */
.rpt a.help[data-tip]::after, .rpt-kpi a.kpi-help[data-tip]::after { font-family: inherit; }
/* 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; }

/* ---- 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-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); }

/* ==========================================================================
   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 { min-width: 1136px; box-sizing: border-box; }
.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; }

/* ---- 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; }

/* 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: 19px; font-weight: 300; letter-spacing: -.2px; white-space: nowrap; }
.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; }

/* 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; }

/* ==========================================================================
   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 band (kpi-top) + tiles + 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
   band #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: dark band = the tenant's main colour (cswTheme reads #menuArea into --csw-theme) ---- */
.csw.advanced-panel .kpi-top { background-color: var(--csw-theme, #363a5c) !important; }
.csw .kpi-top { height: auto !important; min-height: 0 !important; overflow: visible !important; padding: 8px 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;
    padding: 7px 4px 4px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.24);
    margin-bottom: 15px;
}
.csw .csw-title { color: #fff; font-size: 17px; 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; }

/* ---- tier 1: tiles ---- */
.csw .csw-tiles { display: flex; }
.csw .csw-tile { flex: 1 1 0; min-width: 0; padding: 2px 14px 2px; border-right: 1px solid rgba(255,255,255,.16); 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: .6px; text-transform: uppercase; color: rgba(255,255,255,.72); font-weight: 400; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.csw .csw-value { font-size: 22px; font-weight: 500; line-height: 1.15; margin: 3px 0 1px; color: #fff; white-space: nowrap; font-variant-numeric: tabular-nums; }
.csw .csw-value small { font-size: 12px; font-weight: 400; color: rgba(255,255,255,.72); margin-left: 6px; }
.csw .csw-sub { font-size: 11.5px; color: rgba(255,255,255,.72); line-height: 1.4; }
.csw .csw-sub b { color: #fff; font-weight: 500; }
.csw .csw-bar { height: 3px; background: rgba(255,255,255,.18); border-radius: 2px; margin: 5px 0 4px; overflow: hidden; }
.csw .csw-bar i { display: block; height: 100%; background: #a8f0c6; }
.csw .csw-good { color: #a8f0c6 !important; }
.csw .csw-bad { color: #ffb4ae !important; }
.csw .csw-warn { color: #ffd39a !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: rgba(255,255,255,.14); color: #fff; 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 - 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; }
#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: 15px; }
.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 instead of a third line */
.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; }
.csw .csw-stat .n { order: 2; font-size: 11px; color: #7b8794; line-height: 1.3; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.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 band (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: fixed thirds, thin rounded border, chart fills its box ---- */
.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; 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; }
/* 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 { font-size: 10.5px; color: #7b8794; line-height: 1.3; font-variant-numeric: tabular-nums; }
.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 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(255,255,255,.18); 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; } }

/* -------------------------------------------------------------------------------- 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";
}