/* Minification failed. Returning unminified contents.
(672,1): run-time error CSS1035: Expected colon, found '{'
(690,1): run-time error CSS1035: Expected colon, found '{'
(708,1): run-time error CSS1035: Expected colon, found '{'
(726,1): run-time error CSS1035: Expected colon, found '{'
(744,1): run-time error CSS1035: Expected colon, found '{'
(762,1): run-time error CSS1035: Expected colon, found '{'
(780,1): run-time error CSS1035: Expected colon, found '{'
(798,1): run-time error CSS1035: Expected colon, found '{'
(816,1): run-time error CSS1035: Expected colon, found '{'
(834,1): run-time error CSS1035: Expected colon, found '{'
(852,1): run-time error CSS1035: Expected colon, found '{'
(870,1): run-time error CSS1035: Expected colon, found '{'
(888,1): run-time error CSS1035: Expected colon, found '{'
(906,1): run-time error CSS1035: Expected colon, found '{'
(924,1): run-time error CSS1035: Expected colon, found '{'
(942,1): run-time error CSS1035: Expected colon, found '{'
(1440,1): run-time error CSS1035: Expected colon, found '{'
(1458,1): run-time error CSS1035: Expected colon, found '{'
(1476,1): run-time error CSS1035: Expected colon, found '{'
(1494,1): run-time error CSS1035: Expected colon, found '{'
(1512,1): run-time error CSS1035: Expected colon, found '{'
(1530,1): run-time error CSS1035: Expected colon, found '{'
(1548,1): run-time error CSS1035: Expected colon, found '{'
(1566,1): run-time error CSS1035: Expected colon, found '{'
(1584,1): run-time error CSS1035: Expected colon, found '{'
(1602,1): run-time error CSS1035: Expected colon, found '{'
(1620,1): run-time error CSS1035: Expected colon, found '{'
(1638,1): run-time error CSS1035: Expected colon, found '{'
(1656,1): run-time error CSS1035: Expected colon, found '{'
(1674,1): run-time error CSS1035: Expected colon, found '{'
(1692,1): run-time error CSS1035: Expected colon, found '{'
(1710,1): run-time error CSS1035: Expected colon, found '{'
(2018,59): run-time error CSS1030: Expected identifier, found '.'
(2018,75): run-time error CSS1031: Expected selector, found ')'
(2018,75): run-time error CSS1025: Expected comma or open brace, found ')'
(3102,39): run-time error CSS1030: Expected identifier, found '.'
(3102,57): run-time error CSS1031: Expected selector, found ')'
(3102,57): run-time error CSS1025: Expected comma or open brace, found ')'
(8922,22): run-time error CSS1030: Expected identifier, found '.'
(8922,36): run-time error CSS1031: Expected selector, found ')'
(8922,36): run-time error CSS1025: Expected comma or open brace, found ')'
(10181,99): run-time error CSS1030: Expected identifier, found '.'
(10181,110): run-time error CSS1031: Expected selector, found ')'
(10181,110): run-time error CSS1025: Expected comma or open brace, found ')'
(10371,124): run-time error CSS1030: Expected identifier, found '.'
(10371,148): run-time error CSS1031: Expected selector, found ')'
(10371,148): run-time error CSS1025: Expected comma or open brace, found ')'
(13534,28): run-time error CSS1039: Token not allowed after unary operator: '-System-Gray-NEW-300---Stroke'
(13535,22): run-time error CSS1039: Token not allowed after unary operator: '-System-White'
(13544,22): run-time error CSS1039: Token not allowed after unary operator: '-System-White'
(13581,54): run-time error CSS1030: Expected identifier, found '['
(13581,68): run-time error CSS1031: Expected selector, found '='
(13581,68): run-time error CSS1025: Expected comma or open brace, found '='
(13936,59): run-time error CSS1030: Expected identifier, found '.'
(13936,75): run-time error CSS1031: Expected selector, found ')'
(13936,75): run-time error CSS1025: Expected comma or open brace, found ')'
(15020,39): run-time error CSS1030: Expected identifier, found '.'
(15020,57): run-time error CSS1031: Expected selector, found ')'
(15020,57): run-time error CSS1025: Expected comma or open brace, found ')'
(18387,68): run-time error CSS1030: Expected identifier, found '.'
(18387,95): run-time error CSS1031: Expected selector, found ')'
(18387,95): run-time error CSS1025: Expected comma or open brace, found ')'
(19272,28): run-time error CSS1039: Token not allowed after unary operator: '-System-Gray-NEW-300---Stroke'
(22030,62): run-time error CSS1030: Expected identifier, found '.'
(22030,78): run-time error CSS1031: Expected selector, found ')'
(22030,78): run-time error CSS1025: Expected comma or open brace, found ')'
(22110,83): run-time error CSS1030: Expected identifier, found '.'
(22110,109): run-time error CSS1031: Expected selector, found ')'
(22110,109): run-time error CSS1025: Expected comma or open brace, found ')'
(22989,91): run-time error CSS1030: Expected identifier, found '['
(22989,96): run-time error CSS1031: Expected selector, found '='
(22989,96): run-time error CSS1025: Expected comma or open brace, found '='
(23715,96): run-time error CSS1030: Expected identifier, found '['
(23715,101): run-time error CSS1031: Expected selector, found '='
(23715,101): run-time error CSS1025: Expected comma or open brace, found '='
(23719,100): run-time error CSS1030: Expected identifier, found '['
(23719,105): run-time error CSS1031: Expected selector, found '='
(23719,105): run-time error CSS1025: Expected comma or open brace, found '='
(32143,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(32144,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(32569,28): run-time error CSS1030: Expected identifier, found '.'
(32569,50): run-time error CSS1031: Expected selector, found ')'
(32569,50): run-time error CSS1025: Expected comma or open brace, found ')'
(33255,68): run-time error CSS1030: Expected identifier, found '['
(33255,73): run-time error CSS1031: Expected selector, found '='
(33255,73): run-time error CSS1025: Expected comma or open brace, found '='
(33259,72): run-time error CSS1030: Expected identifier, found '['
(33259,77): run-time error CSS1031: Expected selector, found '='
(33259,77): run-time error CSS1025: Expected comma or open brace, found '='
(33742,29): run-time error CSS1030: Expected identifier, found '.'
(33742,62): run-time error CSS1031: Expected selector, found ')'
(33742,62): run-time error CSS1025: Expected comma or open brace, found ')'
(33746,29): run-time error CSS1030: Expected identifier, found '.'
(33746,62): run-time error CSS1031: Expected selector, found ')'
(33746,62): run-time error CSS1025: Expected comma or open brace, found ')'
(33915,26): run-time error CSS1039: Token not allowed after unary operator: '-p-popover-arrow-offset'
(33915,58): run-time error CSS1039: Token not allowed after unary operator: '-p-popover-arrow-left'
(33930,42): run-time error CSS1030: Expected identifier, found '.'
(33930,61): run-time error CSS1031: Expected selector, found ')'
(33930,61): run-time error CSS1025: Expected comma or open brace, found ')'
(33940,46): run-time error CSS1030: Expected identifier, found '.'
(33940,65): run-time error CSS1031: Expected selector, found ')'
(33940,65): run-time error CSS1025: Expected comma or open brace, found ')'
(34663,63): run-time error CSS1030: Expected identifier, found '.'
(34663,138): run-time error CSS1031: Expected selector, found ')'
(34663,138): run-time error CSS1025: Expected comma or open brace, found ')'
(34667,63): run-time error CSS1030: Expected identifier, found '.'
(34667,138): run-time error CSS1031: Expected selector, found ')'
(34667,138): run-time error CSS1025: Expected comma or open brace, found ')'
(35334,106): run-time error CSS1030: Expected identifier, found '['
(35334,111): run-time error CSS1031: Expected selector, found '='
(35334,111): run-time error CSS1025: Expected comma or open brace, found '='
(35339,110): run-time error CSS1030: Expected identifier, found '['
(35339,115): run-time error CSS1031: Expected selector, found '='
(35339,115): run-time error CSS1025: Expected comma or open brace, found '='
(37755,129): run-time error CSS1030: Expected identifier, found '['
(37755,134): run-time error CSS1031: Expected selector, found '='
(37755,134): run-time error CSS1025: Expected comma or open brace, found '='
(38196,145): run-time error CSS1030: Expected identifier, found '['
(38196,150): run-time error CSS1031: Expected selector, found '='
(38196,150): run-time error CSS1025: Expected comma or open brace, found '='
(38542,62): run-time error CSS1030: Expected identifier, found '.'
(38542,92): run-time error CSS1031: Expected selector, found ')'
(38542,92): run-time error CSS1025: Expected comma or open brace, found ')'
(38548,66): run-time error CSS1030: Expected identifier, found '.'
(38548,96): run-time error CSS1031: Expected selector, found ')'
(38548,96): run-time error CSS1025: Expected comma or open brace, found ')'
(38554,67): run-time error CSS1030: Expected identifier, found '.'
(38554,68): run-time error CSS1030: Expected identifier, found 'payment-templates-list__all-content-select-label-btn'
(38554,120): run-time error CSS1031: Expected selector, found ')'
(38554,120): run-time error CSS1025: Expected comma or open brace, found ')'
(38559,59): run-time error CSS1030: Expected identifier, found '.'
(38559,89): run-time error CSS1031: Expected selector, found ')'
(38559,89): run-time error CSS1025: Expected comma or open brace, found ')'
(38570,63): run-time error CSS1030: Expected identifier, found '.'
(38570,93): run-time error CSS1031: Expected selector, found ')'
(38570,93): run-time error CSS1025: Expected comma or open brace, found ')'
(38581,64): run-time error CSS1030: Expected identifier, found '.'
(38581,65): run-time error CSS1030: Expected identifier, found 'payment-templates-list__all-content-select-label-btn'
(38581,117): run-time error CSS1031: Expected selector, found ')'
(38581,117): run-time error CSS1025: Expected comma or open brace, found ')'
(39834,110): run-time error CSS1030: Expected identifier, found '.'
(39834,111): run-time error CSS1030: Expected identifier, found 'checkbox-purpose-switcher'
(39834,144): run-time error CSS1031: Expected selector, found ')'
(39834,144): run-time error CSS1025: Expected comma or open brace, found ')'
(39838,105): run-time error CSS1030: Expected identifier, found '.'
(39838,139): run-time error CSS1031: Expected selector, found ')'
(39838,139): run-time error CSS1025: Expected comma or open brace, found ')'
(40114,88): run-time error CSS1030: Expected identifier, found '.'
(40114,116): run-time error CSS1031: Expected selector, found ')'
(40114,116): run-time error CSS1025: Expected comma or open brace, found ')'
(40121,92): run-time error CSS1030: Expected identifier, found '.'
(40121,120): run-time error CSS1031: Expected selector, found ')'
(40121,120): run-time error CSS1025: Expected comma or open brace, found ')'
(40869,92): run-time error CSS1030: Expected identifier, found '['
(40869,97): run-time error CSS1031: Expected selector, found '='
(40869,97): run-time error CSS1025: Expected comma or open brace, found '='
(40927,69): run-time error CSS1030: Expected identifier, found '.'
(40927,93): run-time error CSS1031: Expected selector, found ')'
(40927,93): run-time error CSS1025: Expected comma or open brace, found ')'
(41309,99): run-time error CSS1030: Expected identifier, found '['
(41309,104): run-time error CSS1031: Expected selector, found '='
(41309,104): run-time error CSS1025: Expected comma or open brace, found '='
(45196,143): run-time error CSS1030: Expected identifier, found ','
(45196,172): run-time error CSS1031: Expected selector, found ')'
(45196,172): run-time error CSS1025: Expected comma or open brace, found ')'
(45219,117): run-time error CSS1030: Expected identifier, found ','
(45219,146): run-time error CSS1031: Expected selector, found ')'
(45219,146): run-time error CSS1025: Expected comma or open brace, found ')'
(45698,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(45699,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(45700,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(45701,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(46101,25): run-time error CSS1030: Expected identifier, found '.'
(46101,41): run-time error CSS1031: Expected selector, found ')'
(46101,41): run-time error CSS1025: Expected comma or open brace, found ')'
(46108,25): run-time error CSS1030: Expected identifier, found '.'
(46108,46): run-time error CSS1031: Expected selector, found ')'
(46108,46): run-time error CSS1025: Expected comma or open brace, found ')'
(46117,29): run-time error CSS1030: Expected identifier, found '.'
(46117,50): run-time error CSS1031: Expected selector, found ')'
(46117,50): run-time error CSS1025: Expected comma or open brace, found ')'
(46123,25): run-time error CSS1030: Expected identifier, found '.'
(46123,46): run-time error CSS1031: Expected selector, found ')'
(46123,46): run-time error CSS1025: Expected comma or open brace, found ')'
(46130,29): run-time error CSS1030: Expected identifier, found '.'
(46130,50): run-time error CSS1031: Expected selector, found ')'
(46130,50): run-time error CSS1025: Expected comma or open brace, found ')'
(46134,25): run-time error CSS1030: Expected identifier, found '.'
(46134,46): run-time error CSS1031: Expected selector, found ')'
(46134,46): run-time error CSS1025: Expected comma or open brace, found ')'
(46139,25): run-time error CSS1030: Expected identifier, found '.'
(46139,46): run-time error CSS1031: Expected selector, found ')'
(46139,46): run-time error CSS1025: Expected comma or open brace, found ')'
(46145,25): run-time error CSS1030: Expected identifier, found '.'
(46145,46): run-time error CSS1031: Expected selector, found ')'
(46145,46): run-time error CSS1025: Expected comma or open brace, found ')'
(46174,25): run-time error CSS1030: Expected identifier, found '.'
(46174,46): run-time error CSS1031: Expected selector, found ')'
(46174,46): run-time error CSS1025: Expected comma or open brace, found ')'
(46178,25): run-time error CSS1030: Expected identifier, found '.'
(46178,46): run-time error CSS1031: Expected selector, found ')'
(46178,46): run-time error CSS1025: Expected comma or open brace, found ')'
(46182,25): run-time error CSS1030: Expected identifier, found '.'
(46182,46): run-time error CSS1031: Expected selector, found ')'
(46182,46): run-time error CSS1025: Expected comma or open brace, found ')'
(46190,29): run-time error CSS1030: Expected identifier, found '.'
(46190,50): run-time error CSS1031: Expected selector, found ')'
(46190,50): run-time error CSS1025: Expected comma or open brace, found ')'
(46197,27): run-time error CSS1030: Expected identifier, found '.'
(46197,48): run-time error CSS1031: Expected selector, found ')'
(46197,48): run-time error CSS1025: Expected comma or open brace, found ')'
(46201,27): run-time error CSS1030: Expected identifier, found '.'
(46201,48): run-time error CSS1031: Expected selector, found ')'
(46201,48): run-time error CSS1025: Expected comma or open brace, found ')'
(46324,27): run-time error CSS1030: Expected identifier, found '.'
(46324,49): run-time error CSS1031: Expected selector, found ')'
(46324,49): run-time error CSS1025: Expected comma or open brace, found ')'
(46821,75): run-time error CSS1030: Expected identifier, found '.'
(46821,106): run-time error CSS1031: Expected selector, found ')'
(46821,106): run-time error CSS1025: Expected comma or open brace, found ')'
(46827,79): run-time error CSS1030: Expected identifier, found '.'
(46827,110): run-time error CSS1031: Expected selector, found ')'
(46827,110): run-time error CSS1025: Expected comma or open brace, found ')'
(46883,78): run-time error CSS1030: Expected identifier, found '.'
(46883,101): run-time error CSS1031: Expected selector, found ')'
(46883,101): run-time error CSS1025: Expected comma or open brace, found ')'
(46892,82): run-time error CSS1030: Expected identifier, found '.'
(46892,105): run-time error CSS1031: Expected selector, found ')'
(46892,105): run-time error CSS1025: Expected comma or open brace, found ')'
(46942,41): run-time error CSS1030: Expected identifier, found '.'
(46942,67): run-time error CSS1031: Expected selector, found ')'
(46942,67): run-time error CSS1025: Expected comma or open brace, found ')'
(46947,45): run-time error CSS1030: Expected identifier, found '.'
(46947,71): run-time error CSS1031: Expected selector, found ')'
(46947,71): run-time error CSS1025: Expected comma or open brace, found ')'
(47584,40): run-time error CSS1030: Expected identifier, found '.'
(47584,66): run-time error CSS1031: Expected selector, found ')'
(47584,66): run-time error CSS1025: Expected comma or open brace, found ')'
(47590,40): run-time error CSS1030: Expected identifier, found '.'
(47590,66): run-time error CSS1031: Expected selector, found ')'
(47590,66): run-time error CSS1025: Expected comma or open brace, found ')'
(47944,75): run-time error CSS1030: Expected identifier, found '.'
(47944,106): run-time error CSS1031: Expected selector, found ')'
(47944,106): run-time error CSS1025: Expected comma or open brace, found ')'
(47950,79): run-time error CSS1030: Expected identifier, found '.'
(47950,110): run-time error CSS1031: Expected selector, found ')'
(47950,110): run-time error CSS1025: Expected comma or open brace, found ')'
(48034,78): run-time error CSS1030: Expected identifier, found '.'
(48034,101): run-time error CSS1031: Expected selector, found ')'
(48034,101): run-time error CSS1025: Expected comma or open brace, found ')'
(48040,82): run-time error CSS1030: Expected identifier, found '.'
(48040,105): run-time error CSS1031: Expected selector, found ')'
(48040,105): run-time error CSS1025: Expected comma or open brace, found ')'
(48079,41): run-time error CSS1030: Expected identifier, found '.'
(48079,67): run-time error CSS1031: Expected selector, found ')'
(48079,67): run-time error CSS1025: Expected comma or open brace, found ')'
(48084,45): run-time error CSS1030: Expected identifier, found '.'
(48084,71): run-time error CSS1031: Expected selector, found ')'
(48084,71): run-time error CSS1025: Expected comma or open brace, found ')'
(48497,67): run-time error CSS1030: Expected identifier, found '.'
(48497,68): run-time error CSS1030: Expected identifier, found 'filter-icon__search'
(48497,87): run-time error CSS1031: Expected selector, found ')'
(48497,87): run-time error CSS1025: Expected comma or open brace, found ')'
(48502,67): run-time error CSS1030: Expected identifier, found '.'
(48502,68): run-time error CSS1030: Expected identifier, found 'filter-icon__search'
(48502,87): run-time error CSS1031: Expected selector, found ')'
(48502,87): run-time error CSS1025: Expected comma or open brace, found ')'
(48596,37): run-time error CSS1030: Expected identifier, found '.'
(48596,49): run-time error CSS1031: Expected selector, found ')'
(48596,49): run-time error CSS1025: Expected comma or open brace, found ')'
(48600,41): run-time error CSS1030: Expected identifier, found '.'
(48600,53): run-time error CSS1031: Expected selector, found ')'
(48600,53): run-time error CSS1025: Expected comma or open brace, found ')'
(48606,41): run-time error CSS1030: Expected identifier, found '.'
(48606,53): run-time error CSS1031: Expected selector, found ')'
(48606,53): run-time error CSS1025: Expected comma or open brace, found ')'
(48615,41): run-time error CSS1030: Expected identifier, found '.'
(48615,53): run-time error CSS1031: Expected selector, found ')'
(48615,53): run-time error CSS1025: Expected comma or open brace, found ')'
(48625,41): run-time error CSS1030: Expected identifier, found '.'
(48625,53): run-time error CSS1031: Expected selector, found ')'
(48625,53): run-time error CSS1025: Expected comma or open brace, found ')'
(48636,41): run-time error CSS1030: Expected identifier, found '.'
(48636,53): run-time error CSS1031: Expected selector, found ')'
(48636,53): run-time error CSS1025: Expected comma or open brace, found ')'
(48645,45): run-time error CSS1030: Expected identifier, found '.'
(48645,57): run-time error CSS1031: Expected selector, found ')'
(48645,57): run-time error CSS1025: Expected comma or open brace, found ')'
(48656,41): run-time error CSS1030: Expected identifier, found '.'
(48656,53): run-time error CSS1031: Expected selector, found ')'
(48656,53): run-time error CSS1025: Expected comma or open brace, found ')'
(48663,41): run-time error CSS1030: Expected identifier, found '.'
(48663,53): run-time error CSS1031: Expected selector, found ')'
(48663,53): run-time error CSS1025: Expected comma or open brace, found ')'
(48671,41): run-time error CSS1030: Expected identifier, found '.'
(48671,53): run-time error CSS1031: Expected selector, found ')'
(48671,53): run-time error CSS1025: Expected comma or open brace, found ')'
(48680,37): run-time error CSS1030: Expected identifier, found '.'
(48680,51): run-time error CSS1031: Expected selector, found ')'
(48680,51): run-time error CSS1025: Expected comma or open brace, found ')'
(48684,41): run-time error CSS1030: Expected identifier, found '.'
(48684,55): run-time error CSS1031: Expected selector, found ')'
(48684,55): run-time error CSS1025: Expected comma or open brace, found ')'
(48694,41): run-time error CSS1030: Expected identifier, found '.'
(48694,55): run-time error CSS1031: Expected selector, found ')'
(48694,55): run-time error CSS1025: Expected comma or open brace, found ')'
(48704,41): run-time error CSS1030: Expected identifier, found '.'
(48704,55): run-time error CSS1031: Expected selector, found ')'
(48704,55): run-time error CSS1025: Expected comma or open brace, found ')'
(48716,41): run-time error CSS1030: Expected identifier, found '.'
(48716,55): run-time error CSS1031: Expected selector, found ')'
(48716,55): run-time error CSS1025: Expected comma or open brace, found ')'
(48725,37): run-time error CSS1030: Expected identifier, found '.'
(48725,54): run-time error CSS1031: Expected selector, found ')'
(48725,54): run-time error CSS1025: Expected comma or open brace, found ')'
(48729,41): run-time error CSS1030: Expected identifier, found '.'
(48729,58): run-time error CSS1031: Expected selector, found ')'
(48729,58): run-time error CSS1025: Expected comma or open brace, found ')'
(48735,41): run-time error CSS1030: Expected identifier, found '.'
(48735,58): run-time error CSS1031: Expected selector, found ')'
(48735,58): run-time error CSS1025: Expected comma or open brace, found ')'
(48745,41): run-time error CSS1030: Expected identifier, found '.'
(48745,58): run-time error CSS1031: Expected selector, found ')'
(48745,58): run-time error CSS1025: Expected comma or open brace, found ')'
(48757,41): run-time error CSS1030: Expected identifier, found '.'
(48757,58): run-time error CSS1031: Expected selector, found ')'
(48757,58): run-time error CSS1025: Expected comma or open brace, found ')'
(48766,41): run-time error CSS1030: Expected identifier, found '.'
(48766,58): run-time error CSS1031: Expected selector, found ')'
(48766,58): run-time error CSS1025: Expected comma or open brace, found ')'
(48776,41): run-time error CSS1030: Expected identifier, found '.'
(48776,58): run-time error CSS1031: Expected selector, found ')'
(48776,58): run-time error CSS1025: Expected comma or open brace, found ')'
(48787,41): run-time error CSS1030: Expected identifier, found '.'
(48787,58): run-time error CSS1031: Expected selector, found ')'
(48787,58): run-time error CSS1025: Expected comma or open brace, found ')'
(48796,41): run-time error CSS1030: Expected identifier, found '.'
(48796,58): run-time error CSS1031: Expected selector, found ')'
(48796,58): run-time error CSS1025: Expected comma or open brace, found ')'
(48806,41): run-time error CSS1030: Expected identifier, found '.'
(48806,58): run-time error CSS1031: Expected selector, found ')'
(48806,58): run-time error CSS1025: Expected comma or open brace, found ')'
(48819,41): run-time error CSS1030: Expected identifier, found '.'
(48819,58): run-time error CSS1031: Expected selector, found ')'
(48819,58): run-time error CSS1025: Expected comma or open brace, found ')'
(48825,45): run-time error CSS1030: Expected identifier, found '.'
(48825,62): run-time error CSS1031: Expected selector, found ')'
(48825,62): run-time error CSS1025: Expected comma or open brace, found ')'
(48838,41): run-time error CSS1030: Expected identifier, found '.'
(48838,58): run-time error CSS1031: Expected selector, found ')'
(48838,58): run-time error CSS1025: Expected comma or open brace, found ')'
(48845,41): run-time error CSS1030: Expected identifier, found '.'
(48845,58): run-time error CSS1031: Expected selector, found ')'
(48845,58): run-time error CSS1025: Expected comma or open brace, found ')'
(48853,41): run-time error CSS1030: Expected identifier, found '.'
(48853,58): run-time error CSS1031: Expected selector, found ')'
(48853,58): run-time error CSS1025: Expected comma or open brace, found ')'
(48862,37): run-time error CSS1030: Expected identifier, found '.'
(48862,51): run-time error CSS1031: Expected selector, found ')'
(48862,51): run-time error CSS1025: Expected comma or open brace, found ')'
(48866,41): run-time error CSS1030: Expected identifier, found '.'
(48866,55): run-time error CSS1031: Expected selector, found ')'
(48866,55): run-time error CSS1025: Expected comma or open brace, found ')'
(48874,45): run-time error CSS1030: Expected identifier, found '.'
(48874,59): run-time error CSS1031: Expected selector, found ')'
(48874,59): run-time error CSS1025: Expected comma or open brace, found ')'
(48879,49): run-time error CSS1030: Expected identifier, found '.'
(48879,63): run-time error CSS1031: Expected selector, found ')'
(48879,63): run-time error CSS1025: Expected comma or open brace, found ')'
(48884,41): run-time error CSS1030: Expected identifier, found '.'
(48884,55): run-time error CSS1031: Expected selector, found ')'
(48884,55): run-time error CSS1025: Expected comma or open brace, found ')'
(48891,41): run-time error CSS1030: Expected identifier, found '.'
(48891,55): run-time error CSS1031: Expected selector, found ')'
(48891,55): run-time error CSS1025: Expected comma or open brace, found ')'
(48897,41): run-time error CSS1030: Expected identifier, found '.'
(48897,55): run-time error CSS1031: Expected selector, found ')'
(48897,55): run-time error CSS1025: Expected comma or open brace, found ')'
(49346,60): run-time error CSS1030: Expected identifier, found '.'
(49346,87): run-time error CSS1031: Expected selector, found ')'
(49346,87): run-time error CSS1025: Expected comma or open brace, found ')'
(49394,19): run-time error CSS1030: Expected identifier, found '.'
(49394,46): run-time error CSS1031: Expected selector, found ')'
(49394,46): run-time error CSS1025: Expected comma or open brace, found ')'
(49399,19): run-time error CSS1030: Expected identifier, found '.'
(49399,46): run-time error CSS1031: Expected selector, found ')'
(49399,46): run-time error CSS1025: Expected comma or open brace, found ')'
(49451,94): run-time error CSS1030: Expected identifier, found '.'
(49451,117): run-time error CSS1031: Expected selector, found ')'
(49451,117): run-time error CSS1025: Expected comma or open brace, found ')'
(49456,98): run-time error CSS1030: Expected identifier, found '.'
(49456,121): run-time error CSS1031: Expected selector, found ')'
(49456,121): run-time error CSS1025: Expected comma or open brace, found ')'
(49963,82): run-time error CSS1030: Expected identifier, found '.'
(49963,109): run-time error CSS1031: Expected selector, found ')'
(49963,109): run-time error CSS1025: Expected comma or open brace, found ')'
(50011,41): run-time error CSS1030: Expected identifier, found '.'
(50011,68): run-time error CSS1031: Expected selector, found ')'
(50011,68): run-time error CSS1025: Expected comma or open brace, found ')'
(50016,41): run-time error CSS1030: Expected identifier, found '.'
(50016,68): run-time error CSS1031: Expected selector, found ')'
(50016,68): run-time error CSS1025: Expected comma or open brace, found ')'
(50033,24): run-time error CSS1030: Expected identifier, found '.'
(50033,40): run-time error CSS1031: Expected selector, found ')'
(50033,40): run-time error CSS1025: Expected comma or open brace, found ')'
(50038,15): run-time error CSS1030: Expected identifier, found '.'
(50038,42): run-time error CSS1031: Expected selector, found ')'
(50038,42): run-time error CSS1025: Expected comma or open brace, found ')'
 */
/* Minification failed. Returning unminified contents.
(261,1): run-time error CSS1035: Expected colon, found '{'
(279,1): run-time error CSS1035: Expected colon, found '{'
(297,1): run-time error CSS1035: Expected colon, found '{'
(315,1): run-time error CSS1035: Expected colon, found '{'
(333,1): run-time error CSS1035: Expected colon, found '{'
(351,1): run-time error CSS1035: Expected colon, found '{'
(369,1): run-time error CSS1035: Expected colon, found '{'
(387,1): run-time error CSS1035: Expected colon, found '{'
(405,1): run-time error CSS1035: Expected colon, found '{'
(423,1): run-time error CSS1035: Expected colon, found '{'
(441,1): run-time error CSS1035: Expected colon, found '{'
(459,1): run-time error CSS1035: Expected colon, found '{'
(477,1): run-time error CSS1035: Expected colon, found '{'
(495,1): run-time error CSS1035: Expected colon, found '{'
(513,1): run-time error CSS1035: Expected colon, found '{'
(531,1): run-time error CSS1035: Expected colon, found '{'
(1029,1): run-time error CSS1035: Expected colon, found '{'
(1047,1): run-time error CSS1035: Expected colon, found '{'
(1065,1): run-time error CSS1035: Expected colon, found '{'
(1083,1): run-time error CSS1035: Expected colon, found '{'
(1101,1): run-time error CSS1035: Expected colon, found '{'
(1119,1): run-time error CSS1035: Expected colon, found '{'
(1137,1): run-time error CSS1035: Expected colon, found '{'
(1155,1): run-time error CSS1035: Expected colon, found '{'
(1173,1): run-time error CSS1035: Expected colon, found '{'
(1191,1): run-time error CSS1035: Expected colon, found '{'
(1209,1): run-time error CSS1035: Expected colon, found '{'
(1227,1): run-time error CSS1035: Expected colon, found '{'
(1245,1): run-time error CSS1035: Expected colon, found '{'
(1263,1): run-time error CSS1035: Expected colon, found '{'
(1281,1): run-time error CSS1035: Expected colon, found '{'
(1299,1): run-time error CSS1035: Expected colon, found '{'
(1607,59): run-time error CSS1030: Expected identifier, found '.'
(1607,75): run-time error CSS1031: Expected selector, found ')'
(1607,75): run-time error CSS1025: Expected comma or open brace, found ')'
(2691,39): run-time error CSS1030: Expected identifier, found '.'
(2691,57): run-time error CSS1031: Expected selector, found ')'
(2691,57): run-time error CSS1025: Expected comma or open brace, found ')'
(8511,22): run-time error CSS1030: Expected identifier, found '.'
(8511,36): run-time error CSS1031: Expected selector, found ')'
(8511,36): run-time error CSS1025: Expected comma or open brace, found ')'
(9770,99): run-time error CSS1030: Expected identifier, found '.'
(9770,110): run-time error CSS1031: Expected selector, found ')'
(9770,110): run-time error CSS1025: Expected comma or open brace, found ')'
(9960,124): run-time error CSS1030: Expected identifier, found '.'
(9960,148): run-time error CSS1031: Expected selector, found ')'
(9960,148): run-time error CSS1025: Expected comma or open brace, found ')'
(13123,28): run-time error CSS1039: Token not allowed after unary operator: '-System-Gray-NEW-300---Stroke'
(13124,22): run-time error CSS1039: Token not allowed after unary operator: '-System-White'
(13133,22): run-time error CSS1039: Token not allowed after unary operator: '-System-White'
(13170,54): run-time error CSS1030: Expected identifier, found '['
(13170,68): run-time error CSS1031: Expected selector, found '='
(13170,68): run-time error CSS1025: Expected comma or open brace, found '='
(13525,59): run-time error CSS1030: Expected identifier, found '.'
(13525,75): run-time error CSS1031: Expected selector, found ')'
(13525,75): run-time error CSS1025: Expected comma or open brace, found ')'
(14609,39): run-time error CSS1030: Expected identifier, found '.'
(14609,57): run-time error CSS1031: Expected selector, found ')'
(14609,57): run-time error CSS1025: Expected comma or open brace, found ')'
(17976,68): run-time error CSS1030: Expected identifier, found '.'
(17976,95): run-time error CSS1031: Expected selector, found ')'
(17976,95): run-time error CSS1025: Expected comma or open brace, found ')'
(18861,28): run-time error CSS1039: Token not allowed after unary operator: '-System-Gray-NEW-300---Stroke'
(21619,62): run-time error CSS1030: Expected identifier, found '.'
(21619,78): run-time error CSS1031: Expected selector, found ')'
(21619,78): run-time error CSS1025: Expected comma or open brace, found ')'
(21699,83): run-time error CSS1030: Expected identifier, found '.'
(21699,109): run-time error CSS1031: Expected selector, found ')'
(21699,109): run-time error CSS1025: Expected comma or open brace, found ')'
(22578,91): run-time error CSS1030: Expected identifier, found '['
(22578,96): run-time error CSS1031: Expected selector, found '='
(22578,96): run-time error CSS1025: Expected comma or open brace, found '='
(23304,96): run-time error CSS1030: Expected identifier, found '['
(23304,101): run-time error CSS1031: Expected selector, found '='
(23304,101): run-time error CSS1025: Expected comma or open brace, found '='
(23308,100): run-time error CSS1030: Expected identifier, found '['
(23308,105): run-time error CSS1031: Expected selector, found '='
(23308,105): run-time error CSS1025: Expected comma or open brace, found '='
(31732,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(31733,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(32158,28): run-time error CSS1030: Expected identifier, found '.'
(32158,50): run-time error CSS1031: Expected selector, found ')'
(32158,50): run-time error CSS1025: Expected comma or open brace, found ')'
(32844,68): run-time error CSS1030: Expected identifier, found '['
(32844,73): run-time error CSS1031: Expected selector, found '='
(32844,73): run-time error CSS1025: Expected comma or open brace, found '='
(32848,72): run-time error CSS1030: Expected identifier, found '['
(32848,77): run-time error CSS1031: Expected selector, found '='
(32848,77): run-time error CSS1025: Expected comma or open brace, found '='
(33331,29): run-time error CSS1030: Expected identifier, found '.'
(33331,62): run-time error CSS1031: Expected selector, found ')'
(33331,62): run-time error CSS1025: Expected comma or open brace, found ')'
(33335,29): run-time error CSS1030: Expected identifier, found '.'
(33335,62): run-time error CSS1031: Expected selector, found ')'
(33335,62): run-time error CSS1025: Expected comma or open brace, found ')'
(33504,26): run-time error CSS1039: Token not allowed after unary operator: '-p-popover-arrow-offset'
(33504,58): run-time error CSS1039: Token not allowed after unary operator: '-p-popover-arrow-left'
(33519,42): run-time error CSS1030: Expected identifier, found '.'
(33519,61): run-time error CSS1031: Expected selector, found ')'
(33519,61): run-time error CSS1025: Expected comma or open brace, found ')'
(33529,46): run-time error CSS1030: Expected identifier, found '.'
(33529,65): run-time error CSS1031: Expected selector, found ')'
(33529,65): run-time error CSS1025: Expected comma or open brace, found ')'
(34252,63): run-time error CSS1030: Expected identifier, found '.'
(34252,138): run-time error CSS1031: Expected selector, found ')'
(34252,138): run-time error CSS1025: Expected comma or open brace, found ')'
(34256,63): run-time error CSS1030: Expected identifier, found '.'
(34256,138): run-time error CSS1031: Expected selector, found ')'
(34256,138): run-time error CSS1025: Expected comma or open brace, found ')'
(34923,106): run-time error CSS1030: Expected identifier, found '['
(34923,111): run-time error CSS1031: Expected selector, found '='
(34923,111): run-time error CSS1025: Expected comma or open brace, found '='
(34928,110): run-time error CSS1030: Expected identifier, found '['
(34928,115): run-time error CSS1031: Expected selector, found '='
(34928,115): run-time error CSS1025: Expected comma or open brace, found '='
(37344,129): run-time error CSS1030: Expected identifier, found '['
(37344,134): run-time error CSS1031: Expected selector, found '='
(37344,134): run-time error CSS1025: Expected comma or open brace, found '='
(37785,145): run-time error CSS1030: Expected identifier, found '['
(37785,150): run-time error CSS1031: Expected selector, found '='
(37785,150): run-time error CSS1025: Expected comma or open brace, found '='
(38131,62): run-time error CSS1030: Expected identifier, found '.'
(38131,92): run-time error CSS1031: Expected selector, found ')'
(38131,92): run-time error CSS1025: Expected comma or open brace, found ')'
(38137,66): run-time error CSS1030: Expected identifier, found '.'
(38137,96): run-time error CSS1031: Expected selector, found ')'
(38137,96): run-time error CSS1025: Expected comma or open brace, found ')'
(38143,67): run-time error CSS1030: Expected identifier, found '.'
(38143,68): run-time error CSS1030: Expected identifier, found 'payment-templates-list__all-content-select-label-btn'
(38143,120): run-time error CSS1031: Expected selector, found ')'
(38143,120): run-time error CSS1025: Expected comma or open brace, found ')'
(38148,59): run-time error CSS1030: Expected identifier, found '.'
(38148,89): run-time error CSS1031: Expected selector, found ')'
(38148,89): run-time error CSS1025: Expected comma or open brace, found ')'
(38159,63): run-time error CSS1030: Expected identifier, found '.'
(38159,93): run-time error CSS1031: Expected selector, found ')'
(38159,93): run-time error CSS1025: Expected comma or open brace, found ')'
(38170,64): run-time error CSS1030: Expected identifier, found '.'
(38170,65): run-time error CSS1030: Expected identifier, found 'payment-templates-list__all-content-select-label-btn'
(38170,117): run-time error CSS1031: Expected selector, found ')'
(38170,117): run-time error CSS1025: Expected comma or open brace, found ')'
(39423,110): run-time error CSS1030: Expected identifier, found '.'
(39423,111): run-time error CSS1030: Expected identifier, found 'checkbox-purpose-switcher'
(39423,144): run-time error CSS1031: Expected selector, found ')'
(39423,144): run-time error CSS1025: Expected comma or open brace, found ')'
(39427,105): run-time error CSS1030: Expected identifier, found '.'
(39427,139): run-time error CSS1031: Expected selector, found ')'
(39427,139): run-time error CSS1025: Expected comma or open brace, found ')'
(39703,88): run-time error CSS1030: Expected identifier, found '.'
(39703,116): run-time error CSS1031: Expected selector, found ')'
(39703,116): run-time error CSS1025: Expected comma or open brace, found ')'
(39710,92): run-time error CSS1030: Expected identifier, found '.'
(39710,120): run-time error CSS1031: Expected selector, found ')'
(39710,120): run-time error CSS1025: Expected comma or open brace, found ')'
(40458,92): run-time error CSS1030: Expected identifier, found '['
(40458,97): run-time error CSS1031: Expected selector, found '='
(40458,97): run-time error CSS1025: Expected comma or open brace, found '='
(40516,69): run-time error CSS1030: Expected identifier, found '.'
(40516,93): run-time error CSS1031: Expected selector, found ')'
(40516,93): run-time error CSS1025: Expected comma or open brace, found ')'
(40898,99): run-time error CSS1030: Expected identifier, found '['
(40898,104): run-time error CSS1031: Expected selector, found '='
(40898,104): run-time error CSS1025: Expected comma or open brace, found '='
(44785,143): run-time error CSS1030: Expected identifier, found ','
(44785,172): run-time error CSS1031: Expected selector, found ')'
(44785,172): run-time error CSS1025: Expected comma or open brace, found ')'
(44808,117): run-time error CSS1030: Expected identifier, found ','
(44808,146): run-time error CSS1031: Expected selector, found ')'
(44808,146): run-time error CSS1025: Expected comma or open brace, found ')'
(45287,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(45288,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(45289,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(45290,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(45690,25): run-time error CSS1030: Expected identifier, found '.'
(45690,41): run-time error CSS1031: Expected selector, found ')'
(45690,41): run-time error CSS1025: Expected comma or open brace, found ')'
(45697,25): run-time error CSS1030: Expected identifier, found '.'
(45697,46): run-time error CSS1031: Expected selector, found ')'
(45697,46): run-time error CSS1025: Expected comma or open brace, found ')'
(45706,29): run-time error CSS1030: Expected identifier, found '.'
(45706,50): run-time error CSS1031: Expected selector, found ')'
(45706,50): run-time error CSS1025: Expected comma or open brace, found ')'
(45712,25): run-time error CSS1030: Expected identifier, found '.'
(45712,46): run-time error CSS1031: Expected selector, found ')'
(45712,46): run-time error CSS1025: Expected comma or open brace, found ')'
(45719,29): run-time error CSS1030: Expected identifier, found '.'
(45719,50): run-time error CSS1031: Expected selector, found ')'
(45719,50): run-time error CSS1025: Expected comma or open brace, found ')'
(45723,25): run-time error CSS1030: Expected identifier, found '.'
(45723,46): run-time error CSS1031: Expected selector, found ')'
(45723,46): run-time error CSS1025: Expected comma or open brace, found ')'
(45728,25): run-time error CSS1030: Expected identifier, found '.'
(45728,46): run-time error CSS1031: Expected selector, found ')'
(45728,46): run-time error CSS1025: Expected comma or open brace, found ')'
(45734,25): run-time error CSS1030: Expected identifier, found '.'
(45734,46): run-time error CSS1031: Expected selector, found ')'
(45734,46): run-time error CSS1025: Expected comma or open brace, found ')'
(45763,25): run-time error CSS1030: Expected identifier, found '.'
(45763,46): run-time error CSS1031: Expected selector, found ')'
(45763,46): run-time error CSS1025: Expected comma or open brace, found ')'
(45767,25): run-time error CSS1030: Expected identifier, found '.'
(45767,46): run-time error CSS1031: Expected selector, found ')'
(45767,46): run-time error CSS1025: Expected comma or open brace, found ')'
(45771,25): run-time error CSS1030: Expected identifier, found '.'
(45771,46): run-time error CSS1031: Expected selector, found ')'
(45771,46): run-time error CSS1025: Expected comma or open brace, found ')'
(45779,29): run-time error CSS1030: Expected identifier, found '.'
(45779,50): run-time error CSS1031: Expected selector, found ')'
(45779,50): run-time error CSS1025: Expected comma or open brace, found ')'
(45786,27): run-time error CSS1030: Expected identifier, found '.'
(45786,48): run-time error CSS1031: Expected selector, found ')'
(45786,48): run-time error CSS1025: Expected comma or open brace, found ')'
(45790,27): run-time error CSS1030: Expected identifier, found '.'
(45790,48): run-time error CSS1031: Expected selector, found ')'
(45790,48): run-time error CSS1025: Expected comma or open brace, found ')'
(45913,27): run-time error CSS1030: Expected identifier, found '.'
(45913,49): run-time error CSS1031: Expected selector, found ')'
(45913,49): run-time error CSS1025: Expected comma or open brace, found ')'
(46410,75): run-time error CSS1030: Expected identifier, found '.'
(46410,106): run-time error CSS1031: Expected selector, found ')'
(46410,106): run-time error CSS1025: Expected comma or open brace, found ')'
(46416,79): run-time error CSS1030: Expected identifier, found '.'
(46416,110): run-time error CSS1031: Expected selector, found ')'
(46416,110): run-time error CSS1025: Expected comma or open brace, found ')'
(46472,78): run-time error CSS1030: Expected identifier, found '.'
(46472,101): run-time error CSS1031: Expected selector, found ')'
(46472,101): run-time error CSS1025: Expected comma or open brace, found ')'
(46481,82): run-time error CSS1030: Expected identifier, found '.'
(46481,105): run-time error CSS1031: Expected selector, found ')'
(46481,105): run-time error CSS1025: Expected comma or open brace, found ')'
(46531,41): run-time error CSS1030: Expected identifier, found '.'
(46531,67): run-time error CSS1031: Expected selector, found ')'
(46531,67): run-time error CSS1025: Expected comma or open brace, found ')'
(46536,45): run-time error CSS1030: Expected identifier, found '.'
(46536,71): run-time error CSS1031: Expected selector, found ')'
(46536,71): run-time error CSS1025: Expected comma or open brace, found ')'
(47173,40): run-time error CSS1030: Expected identifier, found '.'
(47173,66): run-time error CSS1031: Expected selector, found ')'
(47173,66): run-time error CSS1025: Expected comma or open brace, found ')'
(47179,40): run-time error CSS1030: Expected identifier, found '.'
(47179,66): run-time error CSS1031: Expected selector, found ')'
(47179,66): run-time error CSS1025: Expected comma or open brace, found ')'
(47533,75): run-time error CSS1030: Expected identifier, found '.'
(47533,106): run-time error CSS1031: Expected selector, found ')'
(47533,106): run-time error CSS1025: Expected comma or open brace, found ')'
(47539,79): run-time error CSS1030: Expected identifier, found '.'
(47539,110): run-time error CSS1031: Expected selector, found ')'
(47539,110): run-time error CSS1025: Expected comma or open brace, found ')'
(47623,78): run-time error CSS1030: Expected identifier, found '.'
(47623,101): run-time error CSS1031: Expected selector, found ')'
(47623,101): run-time error CSS1025: Expected comma or open brace, found ')'
(47629,82): run-time error CSS1030: Expected identifier, found '.'
(47629,105): run-time error CSS1031: Expected selector, found ')'
(47629,105): run-time error CSS1025: Expected comma or open brace, found ')'
(47668,41): run-time error CSS1030: Expected identifier, found '.'
(47668,67): run-time error CSS1031: Expected selector, found ')'
(47668,67): run-time error CSS1025: Expected comma or open brace, found ')'
(47673,45): run-time error CSS1030: Expected identifier, found '.'
(47673,71): run-time error CSS1031: Expected selector, found ')'
(47673,71): run-time error CSS1025: Expected comma or open brace, found ')'
(48086,67): run-time error CSS1030: Expected identifier, found '.'
(48086,68): run-time error CSS1030: Expected identifier, found 'filter-icon__search'
(48086,87): run-time error CSS1031: Expected selector, found ')'
(48086,87): run-time error CSS1025: Expected comma or open brace, found ')'
(48091,67): run-time error CSS1030: Expected identifier, found '.'
(48091,68): run-time error CSS1030: Expected identifier, found 'filter-icon__search'
(48091,87): run-time error CSS1031: Expected selector, found ')'
(48091,87): run-time error CSS1025: Expected comma or open brace, found ')'
(48185,37): run-time error CSS1030: Expected identifier, found '.'
(48185,49): run-time error CSS1031: Expected selector, found ')'
(48185,49): run-time error CSS1025: Expected comma or open brace, found ')'
(48189,41): run-time error CSS1030: Expected identifier, found '.'
(48189,53): run-time error CSS1031: Expected selector, found ')'
(48189,53): run-time error CSS1025: Expected comma or open brace, found ')'
(48195,41): run-time error CSS1030: Expected identifier, found '.'
(48195,53): run-time error CSS1031: Expected selector, found ')'
(48195,53): run-time error CSS1025: Expected comma or open brace, found ')'
(48204,41): run-time error CSS1030: Expected identifier, found '.'
(48204,53): run-time error CSS1031: Expected selector, found ')'
(48204,53): run-time error CSS1025: Expected comma or open brace, found ')'
(48214,41): run-time error CSS1030: Expected identifier, found '.'
(48214,53): run-time error CSS1031: Expected selector, found ')'
(48214,53): run-time error CSS1025: Expected comma or open brace, found ')'
(48225,41): run-time error CSS1030: Expected identifier, found '.'
(48225,53): run-time error CSS1031: Expected selector, found ')'
(48225,53): run-time error CSS1025: Expected comma or open brace, found ')'
(48234,45): run-time error CSS1030: Expected identifier, found '.'
(48234,57): run-time error CSS1031: Expected selector, found ')'
(48234,57): run-time error CSS1025: Expected comma or open brace, found ')'
(48245,41): run-time error CSS1030: Expected identifier, found '.'
(48245,53): run-time error CSS1031: Expected selector, found ')'
(48245,53): run-time error CSS1025: Expected comma or open brace, found ')'
(48252,41): run-time error CSS1030: Expected identifier, found '.'
(48252,53): run-time error CSS1031: Expected selector, found ')'
(48252,53): run-time error CSS1025: Expected comma or open brace, found ')'
(48260,41): run-time error CSS1030: Expected identifier, found '.'
(48260,53): run-time error CSS1031: Expected selector, found ')'
(48260,53): run-time error CSS1025: Expected comma or open brace, found ')'
(48269,37): run-time error CSS1030: Expected identifier, found '.'
(48269,51): run-time error CSS1031: Expected selector, found ')'
(48269,51): run-time error CSS1025: Expected comma or open brace, found ')'
(48273,41): run-time error CSS1030: Expected identifier, found '.'
(48273,55): run-time error CSS1031: Expected selector, found ')'
(48273,55): run-time error CSS1025: Expected comma or open brace, found ')'
(48283,41): run-time error CSS1030: Expected identifier, found '.'
(48283,55): run-time error CSS1031: Expected selector, found ')'
(48283,55): run-time error CSS1025: Expected comma or open brace, found ')'
(48293,41): run-time error CSS1030: Expected identifier, found '.'
(48293,55): run-time error CSS1031: Expected selector, found ')'
(48293,55): run-time error CSS1025: Expected comma or open brace, found ')'
(48305,41): run-time error CSS1030: Expected identifier, found '.'
(48305,55): run-time error CSS1031: Expected selector, found ')'
(48305,55): run-time error CSS1025: Expected comma or open brace, found ')'
(48314,37): run-time error CSS1030: Expected identifier, found '.'
(48314,54): run-time error CSS1031: Expected selector, found ')'
(48314,54): run-time error CSS1025: Expected comma or open brace, found ')'
(48318,41): run-time error CSS1030: Expected identifier, found '.'
(48318,58): run-time error CSS1031: Expected selector, found ')'
(48318,58): run-time error CSS1025: Expected comma or open brace, found ')'
(48324,41): run-time error CSS1030: Expected identifier, found '.'
(48324,58): run-time error CSS1031: Expected selector, found ')'
(48324,58): run-time error CSS1025: Expected comma or open brace, found ')'
(48334,41): run-time error CSS1030: Expected identifier, found '.'
(48334,58): run-time error CSS1031: Expected selector, found ')'
(48334,58): run-time error CSS1025: Expected comma or open brace, found ')'
(48346,41): run-time error CSS1030: Expected identifier, found '.'
(48346,58): run-time error CSS1031: Expected selector, found ')'
(48346,58): run-time error CSS1025: Expected comma or open brace, found ')'
(48355,41): run-time error CSS1030: Expected identifier, found '.'
(48355,58): run-time error CSS1031: Expected selector, found ')'
(48355,58): run-time error CSS1025: Expected comma or open brace, found ')'
(48365,41): run-time error CSS1030: Expected identifier, found '.'
(48365,58): run-time error CSS1031: Expected selector, found ')'
(48365,58): run-time error CSS1025: Expected comma or open brace, found ')'
(48376,41): run-time error CSS1030: Expected identifier, found '.'
(48376,58): run-time error CSS1031: Expected selector, found ')'
(48376,58): run-time error CSS1025: Expected comma or open brace, found ')'
(48385,41): run-time error CSS1030: Expected identifier, found '.'
(48385,58): run-time error CSS1031: Expected selector, found ')'
(48385,58): run-time error CSS1025: Expected comma or open brace, found ')'
(48395,41): run-time error CSS1030: Expected identifier, found '.'
(48395,58): run-time error CSS1031: Expected selector, found ')'
(48395,58): run-time error CSS1025: Expected comma or open brace, found ')'
(48408,41): run-time error CSS1030: Expected identifier, found '.'
(48408,58): run-time error CSS1031: Expected selector, found ')'
(48408,58): run-time error CSS1025: Expected comma or open brace, found ')'
(48414,45): run-time error CSS1030: Expected identifier, found '.'
(48414,62): run-time error CSS1031: Expected selector, found ')'
(48414,62): run-time error CSS1025: Expected comma or open brace, found ')'
(48427,41): run-time error CSS1030: Expected identifier, found '.'
(48427,58): run-time error CSS1031: Expected selector, found ')'
(48427,58): run-time error CSS1025: Expected comma or open brace, found ')'
(48434,41): run-time error CSS1030: Expected identifier, found '.'
(48434,58): run-time error CSS1031: Expected selector, found ')'
(48434,58): run-time error CSS1025: Expected comma or open brace, found ')'
(48442,41): run-time error CSS1030: Expected identifier, found '.'
(48442,58): run-time error CSS1031: Expected selector, found ')'
(48442,58): run-time error CSS1025: Expected comma or open brace, found ')'
(48451,37): run-time error CSS1030: Expected identifier, found '.'
(48451,51): run-time error CSS1031: Expected selector, found ')'
(48451,51): run-time error CSS1025: Expected comma or open brace, found ')'
(48455,41): run-time error CSS1030: Expected identifier, found '.'
(48455,55): run-time error CSS1031: Expected selector, found ')'
(48455,55): run-time error CSS1025: Expected comma or open brace, found ')'
(48463,45): run-time error CSS1030: Expected identifier, found '.'
(48463,59): run-time error CSS1031: Expected selector, found ')'
(48463,59): run-time error CSS1025: Expected comma or open brace, found ')'
(48468,49): run-time error CSS1030: Expected identifier, found '.'
(48468,63): run-time error CSS1031: Expected selector, found ')'
(48468,63): run-time error CSS1025: Expected comma or open brace, found ')'
(48473,41): run-time error CSS1030: Expected identifier, found '.'
(48473,55): run-time error CSS1031: Expected selector, found ')'
(48473,55): run-time error CSS1025: Expected comma or open brace, found ')'
(48480,41): run-time error CSS1030: Expected identifier, found '.'
(48480,55): run-time error CSS1031: Expected selector, found ')'
(48480,55): run-time error CSS1025: Expected comma or open brace, found ')'
(48486,41): run-time error CSS1030: Expected identifier, found '.'
(48486,55): run-time error CSS1031: Expected selector, found ')'
(48486,55): run-time error CSS1025: Expected comma or open brace, found ')'
(48935,60): run-time error CSS1030: Expected identifier, found '.'
(48935,87): run-time error CSS1031: Expected selector, found ')'
(48935,87): run-time error CSS1025: Expected comma or open brace, found ')'
(48983,19): run-time error CSS1030: Expected identifier, found '.'
(48983,46): run-time error CSS1031: Expected selector, found ')'
(48983,46): run-time error CSS1025: Expected comma or open brace, found ')'
(48988,19): run-time error CSS1030: Expected identifier, found '.'
(48988,46): run-time error CSS1031: Expected selector, found ')'
(48988,46): run-time error CSS1025: Expected comma or open brace, found ')'
(49040,94): run-time error CSS1030: Expected identifier, found '.'
(49040,117): run-time error CSS1031: Expected selector, found ')'
(49040,117): run-time error CSS1025: Expected comma or open brace, found ')'
(49045,98): run-time error CSS1030: Expected identifier, found '.'
(49045,121): run-time error CSS1031: Expected selector, found ')'
(49045,121): run-time error CSS1025: Expected comma or open brace, found ')'
(49552,82): run-time error CSS1030: Expected identifier, found '.'
(49552,109): run-time error CSS1031: Expected selector, found ')'
(49552,109): run-time error CSS1025: Expected comma or open brace, found ')'
(49600,41): run-time error CSS1030: Expected identifier, found '.'
(49600,68): run-time error CSS1031: Expected selector, found ')'
(49600,68): run-time error CSS1025: Expected comma or open brace, found ')'
(49605,41): run-time error CSS1030: Expected identifier, found '.'
(49605,68): run-time error CSS1031: Expected selector, found ')'
(49605,68): run-time error CSS1025: Expected comma or open brace, found ')'
(49622,24): run-time error CSS1030: Expected identifier, found '.'
(49622,40): run-time error CSS1031: Expected selector, found ')'
(49622,40): run-time error CSS1025: Expected comma or open brace, found ')'
(49627,15): run-time error CSS1030: Expected identifier, found '.'
(49627,42): run-time error CSS1031: Expected selector, found ')'
(49627,42): run-time error CSS1025: Expected comma or open brace, found ')'
 */
@charset "UTF-8";
/* Slider */
.slick-slider {
    position: relative;
    display: block;
    box-sizing: border-box;
    user-select: none;
    touch-action: pan-y;
    -webkit-tap-highlight-color: transparent;
}

.slick-list {
    position: relative;
    overflow: hidden;
    display: block;
    margin: 0;
    padding: 0;
}

    .slick-list:focus {
        outline: none;
    }

    .slick-list.dragging {
        cursor: pointer;
        cursor: hand;
    }

.slick-slider .slick-track,
.slick-slider .slick-list {
    transform: translate3d(0, 0, 0);
}

.slick-track {
    position: relative;
    left: 0;
    top: 0;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

    .slick-track:before, .slick-track:after {
        content: "";
        display: table;
    }

    .slick-track:after {
        clear: both;
    }

.slick-loading .slick-track {
    visibility: hidden;
}

.slick-slide {
    float: left;
    height: 100%;
    min-height: 1px;
}

[dir=rtl] .slick-slide {
    float: right;
}

.slick-slide img {
    display: block;
}

.slick-slide.slick-loading img {
    display: none;
}

.slick-slide {
    display: none;
}

    .slick-slide.dragging img {
        pointer-events: none;
    }

.slick-initialized .slick-slide {
    display: block;
}

.slick-loading .slick-slide {
    visibility: hidden;
}

.slick-vertical .slick-slide {
    display: block;
    height: auto;
    border: 1px solid transparent;
}

.slick-arrow.slick-hidden {
    display: none;
}

/* Slider */
/* Arrows */
.slick-prev,
.slick-next {
    position: absolute;
    display: block;
    height: 20px;
    width: 20px;
    line-height: 0px;
    font-size: 0px;
    cursor: pointer;
    background: transparent;
    color: transparent;
    top: 50%;
    transform: translate(0, -50%);
    padding: 0;
    border: none;
    outline: none;
}

    .slick-prev:hover, .slick-prev:focus,
    .slick-next:hover,
    .slick-next:focus {
        outline: none;
        background: transparent;
        color: transparent;
    }

        .slick-prev:hover:before, .slick-prev:focus:before,
        .slick-next:hover:before,
        .slick-next:focus:before {
            opacity: 1;
        }

    .slick-prev.slick-disabled:before,
    .slick-next.slick-disabled:before {
        opacity: 0.25;
    }

    .slick-prev:before,
    .slick-next:before {
        font-size: 20px;
        line-height: 1;
        color: white;
        opacity: 0.75;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }

.slick-prev {
    left: -25px;
}

[dir=rtl] .slick-prev {
    left: auto;
    right: -25px;
}

.slick-prev:before {
    content: "←";
}

[dir=rtl] .slick-prev:before {
    content: "→";
}

.slick-next {
    right: -25px;
}

[dir=rtl] .slick-next {
    left: -25px;
    right: auto;
}

.slick-next:before {
    content: "→";
}

[dir=rtl] .slick-next:before {
    content: "←";
}

/* Dots */
.slick-dotted.slick-slider {
    max-width: 975px !important;
    max-height: 740px;
}

.slick-dots {
    position: absolute;
    bottom: -25px;
    list-style: none;
    display: block;
    text-align: center;
    padding: 0;
    margin: 0;
    width: 100%;
}

    .slick-dots li {
        position: relative;
        display: inline-block;
        height: 20px;
        width: 20px;
        margin: 0 5px;
        padding: 0;
        cursor: pointer;
    }

        .slick-dots li button {
            border: 0;
            background: transparent;
            display: block;
            height: 20px;
            width: 20px;
            outline: none;
            line-height: 0px;
            font-size: 0px;
            color: transparent;
            padding: 5px;
            cursor: pointer;
        }

            .slick-dots li button:hover, .slick-dots li button:focus {
                outline: none;
            }

                .slick-dots li button:hover:before, .slick-dots li button:focus:before {
                    opacity: 1;
                }

            .slick-dots li button:before {
                position: absolute;
                top: 0;
                left: 0;
                content: "•";
                width: 20px;
                height: 20px;
                font-size: 6px;
                line-height: 20px;
                text-align: center;
                color: black;
                opacity: 0.25;
                -webkit-font-smoothing: antialiased;
                -moz-osx-font-smoothing: grayscale;
            }

        .slick-dots li.slick-active button:before {
            color: black;
            opacity: 0.75;
        }

@font-face {
    font-family: "Fixel Display Extra";
    src: local("Fixel Display Extra Bold"), local("FixelDisplay-ExtraBold"), url("../fonts/newDesign/fixel-Font/FixelDisplay-ExtraBold.woff2") format("woff2");
    font-weight: bold;
    font-style: normal;
    font-display: swap;
    .debugUrl

{
    font-family: "Fixel Display Extra";
    src: local("Fixel Display Extra Bold"), local("FixelDisplay-ExtraBold"), url("/Content/themes/novapay/fonts/newDesign/fixel-Font/FixelDisplay-ExtraBold.woff2") format("woff2");
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

}

@font-face {
    font-family: "Fixel Display";
    src: local("Fixel Display Medium"), local("FixelDisplay-Medium"), url("../fonts/newDesign/fixel-Font/FixelDisplay-Medium.woff2") format("woff2");
    font-weight: 500;
    font-style: normal;
    font-display: swap;
    .debugUrl

{
    font-family: "Fixel Display";
    src: local("Fixel Display Medium"), local("FixelDisplay-Medium"), url("/Content/themes/novapay/fonts/newDesign/fixel-Font/FixelDisplay-Medium.woff2") format("woff2");
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

}

@font-face {
    font-family: "Fixel Display";
    src: local("Fixel Display Bold"), local("FixelDisplay-Bold"), url("../fonts/newDesign/fixel-Font/FixelDisplay-Bold.woff2") format("woff2");
    font-weight: bold;
    font-style: normal;
    font-display: swap;
    .debugUrl

{
    font-family: "Fixel Display";
    src: local("Fixel Display Bold"), local("FixelDisplay-Bold"), url("/Content/themes/novapay/fonts/newDesign/fixel-Font/FixelDisplay-Bold.woff2") format("woff2");
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

}

@font-face {
    font-family: "Fixel Display";
    src: local("Fixel Display Black"), local("FixelDisplay-Black"), url("../fonts/newDesign/fixel-Font/FixelDisplay-Black.woff2") format("woff2");
    font-weight: 900;
    font-style: normal;
    font-display: swap;
    .debugUrl

{
    font-family: "Fixel Display";
    src: local("Fixel Display Black"), local("FixelDisplay-Black"), url("/Content/themes/novapay/fonts/newDesign/fixel-Font/FixelDisplay-Black.woff2") format("woff" 2);
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

}

@font-face {
    font-family: "Fixel Display";
    src: local("Fixel Display Regular"), local("FixelDisplay-Regular"), url("../fonts/newDesign/fixel-Font/FixelDisplay-Regular.woff2") format("woff2");
    font-weight: normal;
    font-style: normal;
    font-display: swap;
    .debugUrl

{
    font-family: "Fixel Display";
    src: local("Fixel Display Regular"), local("FixelDisplay-Regular"), url("/Content/themes/novapay/fonts/newDesign/fixel-Font/FixelDisplay-Regular.woff2") format("woff2");
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

}

@font-face {
    font-family: "Fixel Display";
    src: local("Fixel Display Light"), local("FixelDisplay-Light"), url("../fonts/newDesign/fixel-Font/FixelDisplay-Light.woff2") format("woff2");
    font-weight: 300;
    font-style: normal;
    font-display: swap;
    .debugUrl

{
    font-family: "Fixel Display";
    src: local("Fixel Display Light"), local("FixelDisplay-Light"), url("/Content/themes/novapay/fonts/newDesign/fixel-Font/FixelDisplay-Light.woff2") format("woff2");
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

}

@font-face {
    font-family: "Fixel Display";
    src: local("Fixel Display Thin"), local("FixelDisplay-Thin"), url("../fonts/newDesign/fixel-Font/FixelDisplay-Thin.woff2") format("woff2");
    font-weight: 100;
    font-style: normal;
    font-display: swap;
    .debugUrl

{
    font-family: "Fixel Display";
    src: local("Fixel Display Thin"), local("FixelDisplay-Thin"), url("/Content/themes/novapay/fonts/newDesign/fixel-Font/FixelDisplay-Thin.woff2") format("woff2");
    font-weight: 100;
    font-style: normal;
    font-display: swap;
}

}

@font-face {
    font-family: "Fixel Display Extra";
    src: local("Fixel Display Extra Light"), local("FixelDisplay-ExtraLight"), url("../fonts/newDesign/fixel-Font/FixelDisplay-ExtraLight.woff2") format("woff2");
    font-weight: 200;
    font-style: normal;
    font-display: swap;
    .debugUrl

{
    font-family: "Fixel Display Extra";
    src: local("Fixel Display Extra Light"), local("FixelDisplay-ExtraLight"), url("/Content/themes/novapay/fonts/newDesign/fixel-Font/FixelDisplay-ExtraLight.woff2") format("woff2");
    font-weight: 200;
    font-style: normal;
    font-display: swap;
}

}

@font-face {
    font-family: "Fixel Text Extra";
    src: local("Fixel Text Extra Bold"), local("FixelText-ExtraBold"), url("../fonts/newDesign/fixel-Font/FixelText-ExtraBold.woff2") format("woff2");
    font-weight: bold;
    font-style: normal;
    font-display: swap;
    .debugUrl

{
    font-family: "Fixel Text Extra";
    src: local("Fixel Text Extra Bold"), local("FixelText-ExtraBold"), url("/Content/themes/novapay/fonts/newDesign/fixel-Font/FixelText-ExtraBold.woff2") format("woff2");
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

}

@font-face {
    font-family: "Fixel Text";
    src: local("Fixel Text Medium"), local("FixelText-Medium"), url("../fonts/newDesign/fixel-Font/FixelText-Medium.woff2") format("woff2");
    font-weight: 500;
    font-style: normal;
    font-display: swap;
    .debugUrl

{
    font-family: "Fixel Text";
    src: local("Fixel Text Medium"), local("FixelText-Medium"), url("/Content/themes/novapay/fonts/newDesign/fixel-Font/FixelText-Medium.woff2") format("woff2");
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

}

@font-face {
    font-family: "Fixel Text";
    src: local("Fixel Text Bold"), local("FixelText-Bold"), url("../fonts/newDesign/fixel-Font/FixelText-Bold.woff2") format("woff2");
    font-weight: bold;
    font-style: normal;
    font-display: swap;
    .debugUrl

{
    font-family: "Fixel Text";
    src: local("Fixel Text Bold"), local("FixelText-Bold"), url("/Content/themes/novapay/fonts/newDesign/fixel-Font/FixelText-Bold.woff2") format("woff2");
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

}

@font-face {
    font-family: "Fixel Text";
    src: local("Fixel Text Black"), local("FixelText-Black"), url("../fonts/newDesign/fixel-Font/FixelText-Black.woff2") format("woff2");
    font-weight: 900;
    font-style: normal;
    font-display: swap;
    .debugUrl

{
    font-family: "Fixel Text";
    src: local("Fixel Text Black"), local("FixelText-Black"), url("/Content/themes/novapay/fonts/newDesign/fixel-Font/FixelText-Black.woff2") format("woff2");
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

}

@font-face {
    font-family: "Fixel Text";
    src: local("Fixel Text Regular"), local("FixelText-Regular"), url("../fonts/newDesign/fixel-Font/FixelText-Regular.woff2") format("woff2");
    font-weight: normal;
    font-style: normal;
    font-display: swap;
    .debugUrl

{
    font-family: "Fixel Text";
    src: local("Fixel Text Regular"), local("FixelText-Regular"), url("/Content/themes/novapay/fonts/newDesign/fixel-Font/FixelText-Regular.woff2") format("woff2");
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

}

@font-face {
    font-family: "Fixel Text";
    src: local("Fixel Text Light"), local("FixelText-Light"), url("../fonts/newDesign/fixel-Font/FixelText-Light.woff2") format("woff2");
    font-weight: 300;
    font-style: normal;
    font-display: swap;
    .debugUrl

{
    font-family: "Fixel Text";
    src: local("Fixel Text Light"), local("FixelText-Light"), url("/Content/themes/novapay/fonts/newDesign/fixel-Font/FixelText-Light.woff2") format("woff2");
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

}

@font-face {
    font-family: "Fixel Text";
    src: local("Fixel Text Thin"), local("FixelText-Thin"), url("../fonts/newDesign/fixel-Font/FixelText-Thin.woff2") format("woff2");
    font-weight: 100;
    font-style: normal;
    font-display: swap;
    .debugUrl

{
    font-family: "Fixel Text";
    src: local("Fixel Text Thin"), local("FixelText-Thin"), url("/Content/themes/novapay/fonts/newDesign/fixel-Font/FixelText-Thin.woff2") format("woff2");
    font-weight: 100;
    font-style: normal;
    font-display: swap;
}

}

@font-face {
    font-family: "Fixel Text Extra";
    src: local("Fixel Text Extra Light"), local("FixelText-ExtraLight"), url("../fonts/newDesign/fixel-Font/FixelText-ExtraLight.woff2") format("woff2");
    font-weight: 200;
    font-style: normal;
    font-display: swap;
    .debugUrl

{
    font-family: "Fixel Text Extra";
    src: local("Fixel Text Extra Light"), local("FixelText-ExtraLight"), url("/Content/themes/novapay/fonts/newDesign/fixel-Font/FixelText-ExtraLight.woff2") format("woff2");
    font-weight: 200;
    font-style: normal;
    font-display: swap;
}

}

@media (max-width: 1200px) {
    .d-none-xl {
        display: none !important;
    }

    .d-block-xl {
        display: block !important;
    }
}

@media (max-width: 992px) {
    .d-none-lg {
        display: none !important;
    }

    .d-block-lg {
        display: block !important;
    }
}

@media (max-width: 768px) {
    .d-none-md {
        display: none !important;
    }

    .d-block-md {
        display: block !important;
    }
}

@media (max-width: 576px) {
    .d-none-sm {
        display: none !important;
    }

    .d-block-sm {
        display: block !important;
    }
}

@media (max-width: 0px) {
    .d-none-xs {
        display: none !important;
    }

    .d-block-xs {
        display: block !important;
    }
}
/* normalize.scss */
.newDesign {
    /* Box sizing rules */
}

    .newDesign *,
    .newDesign *::before,
    .newDesign *::after {
        box-sizing: border-box;
    }

.newDesign {
    /* Remove default margin */
}

    .newDesign body,
    .newDesign h1,
    .newDesign h2,
    .newDesign h3,
    .newDesign h4,
    .newDesign h5,
    .newDesign h6,
    .newDesign p,
    .newDesign ol,
    .newDesign ul,
    .newDesign figure,
    .newDesign blockquote,
    .newDesign dl,
    .newDesign dd {
        margin: 0;
    }

.newDesign {
    /* Set core body defaults */
    /* Remove list scss on ul, ol elements with a class attribute */
}

    .newDesign ul[role=list],
    .newDesign ol[role=list] {
        list-style: none;
    }

.newDesign {
    /* A elements that don't have a class get default scss */
}

    .newDesign a:not([class]) {
        text-decoration-skip-ink: auto;
    }

.newDesign {
    /* Make images easier to work with */
}

    .newDesign img {
        max-width: 100%;
        display: block;
    }

.newDesign {
    /* Natural flow and rhythm in articles by default */
}

    .newDesign article > * + * {
        margin-top: 1em;
    }

.newDesign {
    /* Inherit fonts for inputs and buttons */
}

    .newDesign input,
    .newDesign button,
    .newDesign textarea,
    .newDesign select {
        font: inherit;
    }

.newDesign {
    /* Reset heading sizes */
}

    .newDesign h1 {
        font-size: 2em;
        margin: 0.67em 0;
    }

    .newDesign hr {
        box-sizing: content-box;
        height: 0;
        overflow: visible;
    }

    .newDesign pre {
        font-family: monospace, monospace;
        font-size: 1em;
    }

    .newDesign abbr[title] {
        border-bottom: none;
        text-decoration: underline dotted;
    }

    .newDesign b,
    .newDesign strong {
        font-weight: bolder;
    }

    .newDesign code,
    .newDesign kbd,
    .newDesign samp {
        font-family: monospace, monospace;
        font-size: 1em;
    }

    .newDesign small {
        font-size: 80%;
    }

    .newDesign sub,
    .newDesign sup {
        font-size: 75%;
        line-height: 0;
        position: relative;
        vertical-align: baseline;
    }

    .newDesign sub {
        bottom: -0.25em;
    }

    .newDesign sup {
        top: -0.5em;
    }

    .newDesign button,
    .newDesign input,
    .newDesign optgroup,
    .newDesign select,
    .newDesign textarea {
        font-family: inherit;
        font-size: 100%;
        line-height: 1.15;
        margin: 0;
    }

    .newDesign button,
    .newDesign input {
        overflow: visible;
    }

        .newDesign input:-webkit-autofill, .newDesign input:-webkit-autofill:hover, .newDesign input:-webkit-autofill:focus, .newDesign input:-webkit-autofill:active, .newDesign input:-internal-autofill-selected {
            -webkit-box-shadow: 0 0 0 1000px #fff inset !important;
            box-shadow: 0 0 0 1000px #fff inset !important;
            background-color: transparent !important;
            -webkit-text-fill-color: inherit !important;
        }

    .newDesign button,
    .newDesign select {
        text-transform: none;
    }

    .newDesign button,
    .newDesign [type=button],
    .newDesign [type=reset],
    .newDesign [type=submit] {
        -webkit-appearance: button;
    }

        .newDesign button::-moz-focus-inner,
        .newDesign [type=button]::-moz-focus-inner,
        .newDesign [type=reset]::-moz-focus-inner,
        .newDesign [type=submit]::-moz-focus-inner {
            border-style: none;
            padding: 0;
        }

        .newDesign button:-moz-focusring,
        .newDesign [type=button]:-moz-focusring,
        .newDesign [type=reset]:-moz-focusring,
        .newDesign [type=submit]:-moz-focusring {
            outline: 1px dotted ButtonText;
        }

    .newDesign fieldset {
        padding: 0.35em 0.75em 0.625em;
    }

    .newDesign legend {
        box-sizing: border-box;
        color: inherit;
        display: table;
        max-width: 100%;
        padding: 0;
        white-space: normal;
    }

    .newDesign progress {
        vertical-align: baseline;
    }

    .newDesign textarea {
        overflow: auto;
    }

    .newDesign [type=checkbox],
    .newDesign [type=radio] {
        box-sizing: border-box;
        padding: 0;
    }

    .newDesign [type=number]::-webkit-inner-spin-button,
    .newDesign [type=number]::-webkit-outer-spin-button {
        height: auto;
    }

    .newDesign [type=search] {
        -webkit-appearance: textfield;
        outline-offset: -2px;
    }

        .newDesign [type=search]::-webkit-search-decoration {
            -webkit-appearance: none;
        }

    .newDesign ::-webkit-file-upload-button {
        -webkit-appearance: button;
        font: inherit;
    }

    .newDesign details {
        display: block;
    }

    .newDesign summary {
        display: list-item;
    }

    .newDesign template {
        display: none;
    }

    .newDesign [hidden] {
        display: none;
    }

@media (max-width: 1200px) {
    .d-none-xl {
        display: none !important;
    }

    .d-block-xl {
        display: block !important;
    }
}

@media (max-width: 992px) {
    .d-none-lg {
        display: none !important;
    }

    .d-block-lg {
        display: block !important;
    }
}

@media (max-width: 768px) {
    .d-none-md {
        display: none !important;
    }

    .d-block-md {
        display: block !important;
    }
}

@media (max-width: 576px) {
    .d-none-sm {
        display: none !important;
    }

    .d-block-sm {
        display: block !important;
    }
}

@media (max-width: 0px) {
    .d-none-xs {
        display: none !important;
    }

    .d-block-xs {
        display: block !important;
    }
}

html {
    height: 100%;
}

.newDesign *, .newDesign:after, .newDesign:before,
.newDesign-footer *,
.newDesign-footer:after,
.newDesign-footer:before,
.newDesign-header *,
.newDesign-header:after,
.newDesign-header:before,
.sidebar *,
.sidebar:after,
.sidebar:before,
.modal *,
.modal:after,
.modal:before {
    box-sizing: border-box;
}

.newDesign img,
.newDesign-footer img,
.newDesign-header img,
.sidebar img,
.modal img {
    max-width: 100%;
    height: auto;
}

.newDesign a,
.newDesign-footer a,
.newDesign-header a,
.sidebar a,
.modal a {
    text-decoration: none;
    color: inherit;
}

.newDesign ul, .newDesign ol,
.newDesign-footer ul,
.newDesign-footer ol,
.newDesign-header ul,
.newDesign-header ol,
.sidebar ul,
.sidebar ol,
.modal ul,
.modal ol {
    list-style: none;
}

.newDesign button,
.newDesign-footer button,
.newDesign-header button,
.sidebar button,
.modal button {
    cursor: pointer;
    border: none;
    background: none;
    font-weight: 600;
}

.newDesign h1, .newDesign h2, .newDesign h3,
.newDesign-footer h1,
.newDesign-footer h2,
.newDesign-footer h3,
.newDesign-header h1,
.newDesign-header h2,
.newDesign-header h3,
.sidebar h1,
.sidebar h2,
.sidebar h3,
.modal h1,
.modal h2,
.modal h3 {
    font-weight: 600;
    line-height: 1.2;
}

.newDesign h1,
.newDesign-footer h1,
.newDesign-header h1,
.sidebar h1,
.modal h1 {
    font-size: 34px;
}

.newDesign h2,
.newDesign-footer h2,
.newDesign-header h2,
.sidebar h2,
.modal h2 {
    font-size: 24px;
}

.newDesign h3,
.newDesign-footer h3,
.newDesign-header h3,
.sidebar h3,
.modal h3 {
    font-size: 17px;
}

.newDesign h4,
.newDesign-footer h4,
.newDesign-header h4,
.sidebar h4,
.modal h4 {
    font-size: 14px;
}

.newDesign hr,
.newDesign-footer hr,
.newDesign-header hr,
.sidebar hr,
.modal hr {
    height: 1px;
}

.visibility-hidden {
    visibility: hidden !important;
}

.d-none {
    display: none !important;
}

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

.d-flex {
    display: flex !important;
}

@font-face {
    font-family: "Fixel Display Extra";
    src: local("Fixel Display Extra Bold"), local("FixelDisplay-ExtraBold"), url("../fonts/newDesign/fixel-Font/FixelDisplay-ExtraBold.woff2") format("woff2");
    font-weight: bold;
    font-style: normal;
    font-display: swap;
    .debugUrl

{
    font-family: "Fixel Display Extra";
    src: local("Fixel Display Extra Bold"), local("FixelDisplay-ExtraBold"), url("/Content/themes/novapay/fonts/newDesign/fixel-Font/FixelDisplay-ExtraBold.woff2") format("woff2");
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

}

@font-face {
    font-family: "Fixel Display";
    src: local("Fixel Display Medium"), local("FixelDisplay-Medium"), url("../fonts/newDesign/fixel-Font/FixelDisplay-Medium.woff2") format("woff2");
    font-weight: 500;
    font-style: normal;
    font-display: swap;
    .debugUrl

{
    font-family: "Fixel Display";
    src: local("Fixel Display Medium"), local("FixelDisplay-Medium"), url("/Content/themes/novapay/fonts/newDesign/fixel-Font/FixelDisplay-Medium.woff2") format("woff2");
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

}

@font-face {
    font-family: "Fixel Display";
    src: local("Fixel Display Bold"), local("FixelDisplay-Bold"), url("../fonts/newDesign/fixel-Font/FixelDisplay-Bold.woff2") format("woff2");
    font-weight: bold;
    font-style: normal;
    font-display: swap;
    .debugUrl

{
    font-family: "Fixel Display";
    src: local("Fixel Display Bold"), local("FixelDisplay-Bold"), url("/Content/themes/novapay/fonts/newDesign/fixel-Font/FixelDisplay-Bold.woff2") format("woff2");
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

}

@font-face {
    font-family: "Fixel Display";
    src: local("Fixel Display Black"), local("FixelDisplay-Black"), url("../fonts/newDesign/fixel-Font/FixelDisplay-Black.woff2") format("woff2");
    font-weight: 900;
    font-style: normal;
    font-display: swap;
    .debugUrl

{
    font-family: "Fixel Display";
    src: local("Fixel Display Black"), local("FixelDisplay-Black"), url("/Content/themes/novapay/fonts/newDesign/fixel-Font/FixelDisplay-Black.woff2") format("woff" 2);
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

}

@font-face {
    font-family: "Fixel Display";
    src: local("Fixel Display Regular"), local("FixelDisplay-Regular"), url("../fonts/newDesign/fixel-Font/FixelDisplay-Regular.woff2") format("woff2");
    font-weight: normal;
    font-style: normal;
    font-display: swap;
    .debugUrl

{
    font-family: "Fixel Display";
    src: local("Fixel Display Regular"), local("FixelDisplay-Regular"), url("/Content/themes/novapay/fonts/newDesign/fixel-Font/FixelDisplay-Regular.woff2") format("woff2");
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

}

@font-face {
    font-family: "Fixel Display";
    src: local("Fixel Display Light"), local("FixelDisplay-Light"), url("../fonts/newDesign/fixel-Font/FixelDisplay-Light.woff2") format("woff2");
    font-weight: 300;
    font-style: normal;
    font-display: swap;
    .debugUrl

{
    font-family: "Fixel Display";
    src: local("Fixel Display Light"), local("FixelDisplay-Light"), url("/Content/themes/novapay/fonts/newDesign/fixel-Font/FixelDisplay-Light.woff2") format("woff2");
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

}

@font-face {
    font-family: "Fixel Display";
    src: local("Fixel Display Thin"), local("FixelDisplay-Thin"), url("../fonts/newDesign/fixel-Font/FixelDisplay-Thin.woff2") format("woff2");
    font-weight: 100;
    font-style: normal;
    font-display: swap;
    .debugUrl

{
    font-family: "Fixel Display";
    src: local("Fixel Display Thin"), local("FixelDisplay-Thin"), url("/Content/themes/novapay/fonts/newDesign/fixel-Font/FixelDisplay-Thin.woff2") format("woff2");
    font-weight: 100;
    font-style: normal;
    font-display: swap;
}

}

@font-face {
    font-family: "Fixel Display Extra";
    src: local("Fixel Display Extra Light"), local("FixelDisplay-ExtraLight"), url("../fonts/newDesign/fixel-Font/FixelDisplay-ExtraLight.woff2") format("woff2");
    font-weight: 200;
    font-style: normal;
    font-display: swap;
    .debugUrl

{
    font-family: "Fixel Display Extra";
    src: local("Fixel Display Extra Light"), local("FixelDisplay-ExtraLight"), url("/Content/themes/novapay/fonts/newDesign/fixel-Font/FixelDisplay-ExtraLight.woff2") format("woff2");
    font-weight: 200;
    font-style: normal;
    font-display: swap;
}

}

@font-face {
    font-family: "Fixel Text Extra";
    src: local("Fixel Text Extra Bold"), local("FixelText-ExtraBold"), url("../fonts/newDesign/fixel-Font/FixelText-ExtraBold.woff2") format("woff2");
    font-weight: bold;
    font-style: normal;
    font-display: swap;
    .debugUrl

{
    font-family: "Fixel Text Extra";
    src: local("Fixel Text Extra Bold"), local("FixelText-ExtraBold"), url("/Content/themes/novapay/fonts/newDesign/fixel-Font/FixelText-ExtraBold.woff2") format("woff2");
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

}

@font-face {
    font-family: "Fixel Text";
    src: local("Fixel Text Medium"), local("FixelText-Medium"), url("../fonts/newDesign/fixel-Font/FixelText-Medium.woff2") format("woff2");
    font-weight: 500;
    font-style: normal;
    font-display: swap;
    .debugUrl

{
    font-family: "Fixel Text";
    src: local("Fixel Text Medium"), local("FixelText-Medium"), url("/Content/themes/novapay/fonts/newDesign/fixel-Font/FixelText-Medium.woff2") format("woff2");
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

}

@font-face {
    font-family: "Fixel Text";
    src: local("Fixel Text Bold"), local("FixelText-Bold"), url("../fonts/newDesign/fixel-Font/FixelText-Bold.woff2") format("woff2");
    font-weight: bold;
    font-style: normal;
    font-display: swap;
    .debugUrl

{
    font-family: "Fixel Text";
    src: local("Fixel Text Bold"), local("FixelText-Bold"), url("/Content/themes/novapay/fonts/newDesign/fixel-Font/FixelText-Bold.woff2") format("woff2");
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

}

@font-face {
    font-family: "Fixel Text";
    src: local("Fixel Text Black"), local("FixelText-Black"), url("../fonts/newDesign/fixel-Font/FixelText-Black.woff2") format("woff2");
    font-weight: 900;
    font-style: normal;
    font-display: swap;
    .debugUrl

{
    font-family: "Fixel Text";
    src: local("Fixel Text Black"), local("FixelText-Black"), url("/Content/themes/novapay/fonts/newDesign/fixel-Font/FixelText-Black.woff2") format("woff2");
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

}

@font-face {
    font-family: "Fixel Text";
    src: local("Fixel Text Regular"), local("FixelText-Regular"), url("../fonts/newDesign/fixel-Font/FixelText-Regular.woff2") format("woff2");
    font-weight: normal;
    font-style: normal;
    font-display: swap;
    .debugUrl

{
    font-family: "Fixel Text";
    src: local("Fixel Text Regular"), local("FixelText-Regular"), url("/Content/themes/novapay/fonts/newDesign/fixel-Font/FixelText-Regular.woff2") format("woff2");
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

}

@font-face {
    font-family: "Fixel Text";
    src: local("Fixel Text Light"), local("FixelText-Light"), url("../fonts/newDesign/fixel-Font/FixelText-Light.woff2") format("woff2");
    font-weight: 300;
    font-style: normal;
    font-display: swap;
    .debugUrl

{
    font-family: "Fixel Text";
    src: local("Fixel Text Light"), local("FixelText-Light"), url("/Content/themes/novapay/fonts/newDesign/fixel-Font/FixelText-Light.woff2") format("woff2");
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

}

@font-face {
    font-family: "Fixel Text";
    src: local("Fixel Text Thin"), local("FixelText-Thin"), url("../fonts/newDesign/fixel-Font/FixelText-Thin.woff2") format("woff2");
    font-weight: 100;
    font-style: normal;
    font-display: swap;
    .debugUrl

{
    font-family: "Fixel Text";
    src: local("Fixel Text Thin"), local("FixelText-Thin"), url("/Content/themes/novapay/fonts/newDesign/fixel-Font/FixelText-Thin.woff2") format("woff2");
    font-weight: 100;
    font-style: normal;
    font-display: swap;
}

}

@font-face {
    font-family: "Fixel Text Extra";
    src: local("Fixel Text Extra Light"), local("FixelText-ExtraLight"), url("../fonts/newDesign/fixel-Font/FixelText-ExtraLight.woff2") format("woff2");
    font-weight: 200;
    font-style: normal;
    font-display: swap;
    .debugUrl

{
    font-family: "Fixel Text Extra";
    src: local("Fixel Text Extra Light"), local("FixelText-ExtraLight"), url("/Content/themes/novapay/fonts/newDesign/fixel-Font/FixelText-ExtraLight.woff2") format("woff2");
    font-weight: 200;
    font-style: normal;
    font-display: swap;
}

}

@media (max-width: 1200px) {
    .d-none-xl {
        display: none !important;
    }

    .d-block-xl {
        display: block !important;
    }
}

@media (max-width: 992px) {
    .d-none-lg {
        display: none !important;
    }

    .d-block-lg {
        display: block !important;
    }
}

@media (max-width: 768px) {
    .d-none-md {
        display: none !important;
    }

    .d-block-md {
        display: block !important;
    }
}

@media (max-width: 576px) {
    .d-none-sm {
        display: none !important;
    }

    .d-block-sm {
        display: block !important;
    }
}

@media (max-width: 0px) {
    .d-none-xs {
        display: none !important;
    }

    .d-block-xs {
        display: block !important;
    }
}

.newDesign .modal,
.postpaid-container .modal,
.main-content .modal {
    visibility: hidden;
    position: fixed;
    top: 0;
    left: 0;
    height: 0;
    width: 100%;
    opacity: 0;
    z-index: 1072;
}

    .newDesign .modal#modalDetailsOfAccount,
    .postpaid-container .modal#modalDetailsOfAccount,
    .main-content .modal#modalDetailsOfAccount {
        z-index: 3000;
    }

    .newDesign .modal.rightHalfScreen, .newDesign .modal.leftHalfScreen,
    .postpaid-container .modal.rightHalfScreen,
    .postpaid-container .modal.leftHalfScreen,
    .main-content .modal.rightHalfScreen,
    .main-content .modal.leftHalfScreen {
        display: flex;
        overflow-y: unset;
        overflow-x: unset;
        transition: transform 0.42s ease-out, opacity 0.42s ease-out;
    }

        .newDesign .modal.rightHalfScreen .modal-dialog, .newDesign .modal.leftHalfScreen .modal-dialog,
        .postpaid-container .modal.rightHalfScreen .modal-dialog,
        .postpaid-container .modal.leftHalfScreen .modal-dialog,
        .main-content .modal.rightHalfScreen .modal-dialog,
        .main-content .modal.leftHalfScreen .modal-dialog {
            position: relative;
            top: 0;
            right: 0;
            left: 0;
            height: 100%;
            max-height: 100%;
            width: 100%;
            padding: 0;
            border-radius: 0;
        }

        .newDesign .modal.rightHalfScreen.is-open .modal-dialog, .newDesign .modal.leftHalfScreen.is-open .modal-dialog,
        .postpaid-container .modal.rightHalfScreen.is-open .modal-dialog,
        .postpaid-container .modal.leftHalfScreen.is-open .modal-dialog,
        .main-content .modal.rightHalfScreen.is-open .modal-dialog,
        .main-content .modal.leftHalfScreen.is-open .modal-dialog {
            top: 0;
            width: fit-content;
        }

    .newDesign .modal.rightHalfScreen,
    .postpaid-container .modal.rightHalfScreen,
    .main-content .modal.rightHalfScreen {
        justify-content: flex-end;
        transform: translateX(200%);
    }

        .newDesign .modal.rightHalfScreen .modal-dialog,
        .postpaid-container .modal.rightHalfScreen .modal-dialog,
        .main-content .modal.rightHalfScreen .modal-dialog {
            transform: translate(200%, 0);
        }

        .newDesign .modal.rightHalfScreen.is-open,
        .postpaid-container .modal.rightHalfScreen.is-open,
        .main-content .modal.rightHalfScreen.is-open {
            transform: translateX(0);
        }

            .newDesign .modal.rightHalfScreen.is-open .modal-dialog,
            .postpaid-container .modal.rightHalfScreen.is-open .modal-dialog,
            .main-content .modal.rightHalfScreen.is-open .modal-dialog {
                transform: translate(0);
            }

    .newDesign .modal.leftHalfScreen,
    .postpaid-container .modal.leftHalfScreen,
    .main-content .modal.leftHalfScreen {
        justify-content: flex-start;
        transform: translateX(-200%);
    }

        .newDesign .modal.leftHalfScreen .modal-dialog,
        .postpaid-container .modal.leftHalfScreen .modal-dialog,
        .main-content .modal.leftHalfScreen .modal-dialog {
            transform: translate(-200%, 0);
        }

        .newDesign .modal.leftHalfScreen.is-open,
        .postpaid-container .modal.leftHalfScreen.is-open,
        .main-content .modal.leftHalfScreen.is-open {
            transform: translateX(0);
        }

            .newDesign .modal.leftHalfScreen.is-open .modal-dialog,
            .postpaid-container .modal.leftHalfScreen.is-open .modal-dialog,
            .main-content .modal.leftHalfScreen.is-open .modal-dialog {
                transform: translate(0);
            }

    .newDesign .modal.is-open,
    .postpaid-container .modal.is-open,
    .main-content .modal.is-open {
        visibility: visible;
        opacity: 1;
        height: 100%;
        transition: opacity 0.42s ease-out;
        overflow-x: hidden;
        overflow-y: auto;
    }

        .newDesign .modal.is-open .modal-dialog,
        .postpaid-container .modal.is-open .modal-dialog,
        .main-content .modal.is-open .modal-dialog {
            top: 50%;
            transform: translate(-50%, -50%);
            transition: all 0.42s ease-out;
        }

@media (max-width: 576px) {
    .newDesign .modal.is-open .modal-dialog,
    .postpaid-container .modal.is-open .modal-dialog,
    .main-content .modal.is-open .modal-dialog {
        top: auto;
        width: 100%;
        bottom: 0;
        left: 0;
        border-radius: 12px 12px 0 0;
        transform: translate(0, 0);
    }
}

.newDesign .modal.is-open .modal-dialog.modal-account-detail,
.postpaid-container .modal.is-open .modal-dialog.modal-account-detail,
.main-content .modal.is-open .modal-dialog.modal-account-detail {
    min-width: 22rem;
    max-width: 40.625rem;
    width: 100%;
    padding: 0;
}

    .newDesign .modal.is-open .modal-dialog.modal-account-detail .modal-content,
    .postpaid-container .modal.is-open .modal-dialog.modal-account-detail .modal-content,
    .main-content .modal.is-open .modal-dialog.modal-account-detail .modal-content {
        max-width: 100%;
    }

.newDesign .modal.is-open .modal-dialog.createPayment, .newDesign .modal.is-open .modal-dialog.importPayment, .newDesign .modal.is-open .modal-dialog.creatTemplatePayment,
.postpaid-container .modal.is-open .modal-dialog.createPayment,
.postpaid-container .modal.is-open .modal-dialog.importPayment,
.postpaid-container .modal.is-open .modal-dialog.creatTemplatePayment,
.main-content .modal.is-open .modal-dialog.createPayment,
.main-content .modal.is-open .modal-dialog.importPayment,
.main-content .modal.is-open .modal-dialog.creatTemplatePayment {
    position: relative;
    height: 100%;
    max-height: 100%;
    width: 100%;
    max-width: 59.5rem;
    width: 100%;
    padding: 0;
    transform: translate(0);
}

@media (max-width: 1623px) {
    .newDesign .modal.is-open .modal-dialog.createPayment, .newDesign .modal.is-open .modal-dialog.importPayment, .newDesign .modal.is-open .modal-dialog.creatTemplatePayment,
    .postpaid-container .modal.is-open .modal-dialog.createPayment,
    .postpaid-container .modal.is-open .modal-dialog.importPayment,
    .postpaid-container .modal.is-open .modal-dialog.creatTemplatePayment,
    .main-content .modal.is-open .modal-dialog.createPayment,
    .main-content .modal.is-open .modal-dialog.importPayment,
    .main-content .modal.is-open .modal-dialog.creatTemplatePayment {
        max-width: 48.688rem;
        min-width: 22rem;
    }
}

@media (max-width: 768px) {
    .newDesign .modal.is-open .modal-dialog.createPayment, .newDesign .modal.is-open .modal-dialog.importPayment, .newDesign .modal.is-open .modal-dialog.creatTemplatePayment,
    .postpaid-container .modal.is-open .modal-dialog.createPayment,
    .postpaid-container .modal.is-open .modal-dialog.importPayment,
    .postpaid-container .modal.is-open .modal-dialog.creatTemplatePayment,
    .main-content .modal.is-open .modal-dialog.createPayment,
    .main-content .modal.is-open .modal-dialog.importPayment,
    .main-content .modal.is-open .modal-dialog.creatTemplatePayment {
        min-width: 22rem;
        width: 50%;
    }
}

@media (max-width: 576px) {
    .newDesign .modal.is-open .modal-dialog.createPayment, .newDesign .modal.is-open .modal-dialog.importPayment, .newDesign .modal.is-open .modal-dialog.creatTemplatePayment,
    .postpaid-container .modal.is-open .modal-dialog.createPayment,
    .postpaid-container .modal.is-open .modal-dialog.importPayment,
    .postpaid-container .modal.is-open .modal-dialog.creatTemplatePayment,
    .main-content .modal.is-open .modal-dialog.createPayment,
    .main-content .modal.is-open .modal-dialog.importPayment,
    .main-content .modal.is-open .modal-dialog.creatTemplatePayment {
        width: 360px;
    }
}

.newDesign .modal.is-open .modal-dialog.createPayment .modal-content, .newDesign .modal.is-open .modal-dialog.importPayment .modal-content, .newDesign .modal.is-open .modal-dialog.creatTemplatePayment .modal-content,
.postpaid-container .modal.is-open .modal-dialog.createPayment .modal-content,
.postpaid-container .modal.is-open .modal-dialog.importPayment .modal-content,
.postpaid-container .modal.is-open .modal-dialog.creatTemplatePayment .modal-content,
.main-content .modal.is-open .modal-dialog.createPayment .modal-content,
.main-content .modal.is-open .modal-dialog.importPayment .modal-content,
.main-content .modal.is-open .modal-dialog.creatTemplatePayment .modal-content {
    height: 100%;
    width: 100%;
    max-width: 100%;
}

.newDesign .modal.is-open .modal-dialog.createPayment:before, .newDesign .modal.is-open .modal-dialog.importPayment:before, .newDesign .modal.is-open .modal-dialog.creatTemplatePayment:before,
.postpaid-container .modal.is-open .modal-dialog.createPayment:before,
.postpaid-container .modal.is-open .modal-dialog.importPayment:before,
.postpaid-container .modal.is-open .modal-dialog.creatTemplatePayment:before,
.main-content .modal.is-open .modal-dialog.createPayment:before,
.main-content .modal.is-open .modal-dialog.importPayment:before,
.main-content .modal.is-open .modal-dialog.creatTemplatePayment:before {
    position: absolute;
    content: "";
    display: block;
    top: 50%;
    left: calc(50% - 25px);
    width: 50px;
    height: 50px;
    background: url("../img/newDesign/spinner-loading.png") no-repeat center;
    animation: rotate 1s linear infinite;
    transform: translate(-50%, -50%);
}

.debugUrl .newDesign .modal.is-open .modal-dialog.createPayment:before, .debugUrl .newDesign .modal.is-open .modal-dialog.importPayment:before, .debugUrl .newDesign .modal.is-open .modal-dialog.creatTemplatePayment:before,
.debugUrl .postpaid-container .modal.is-open .modal-dialog.createPayment:before,
.debugUrl .postpaid-container .modal.is-open .modal-dialog.importPayment:before,
.debugUrl .postpaid-container .modal.is-open .modal-dialog.creatTemplatePayment:before,
.debugUrl .main-content .modal.is-open .modal-dialog.createPayment:before,
.debugUrl .main-content .modal.is-open .modal-dialog.importPayment:before,
.debugUrl .main-content .modal.is-open .modal-dialog.creatTemplatePayment:before {
    background: url("/Content/themes/novapay/img/newDesign/spinner-loading.png") no-repeat center;
}

.newDesign .modal.is-open .modal-dialog.createPayment:has(.account-payment)::before, .newDesign .modal.is-open .modal-dialog.importPayment:has(.account-payment)::before, .newDesign .modal.is-open .modal-dialog.creatTemplatePayment:has(.account-payment)::before,
.postpaid-container .modal.is-open .modal-dialog.createPayment:has(.account-payment)::before,
.postpaid-container .modal.is-open .modal-dialog.importPayment:has(.account-payment)::before,
.postpaid-container .modal.is-open .modal-dialog.creatTemplatePayment:has(.account-payment)::before,
.main-content .modal.is-open .modal-dialog.createPayment:has(.account-payment)::before,
.main-content .modal.is-open .modal-dialog.importPayment:has(.account-payment)::before,
.main-content .modal.is-open .modal-dialog.creatTemplatePayment:has(.account-payment)::before {
    display: none;
}

.newDesign .modal.is-open .modal-dialog.importPayment:before,
.postpaid-container .modal.is-open .modal-dialog.importPayment:before,
.main-content .modal.is-open .modal-dialog.importPayment:before {
    display: none;
}

.newDesign .modal.is-open .modal-dialog.close-modal-payment-wrap, .newDesign .modal.is-open .modal-dialog.close-modal-templatePayment-wrap, .newDesign .modal.is-open .modal-dialog.close-modal-detailTemplate-wrap, .newDesign .modal.is-open .modal-dialog.modal-deactivatingReminder-template-wrap, .newDesign .modal.is-open .modal-dialog.modal-delete-template-wrap,
.postpaid-container .modal.is-open .modal-dialog.close-modal-payment-wrap,
.postpaid-container .modal.is-open .modal-dialog.close-modal-templatePayment-wrap,
.postpaid-container .modal.is-open .modal-dialog.close-modal-detailTemplate-wrap,
.postpaid-container .modal.is-open .modal-dialog.modal-deactivatingReminder-template-wrap,
.postpaid-container .modal.is-open .modal-dialog.modal-delete-template-wrap,
.main-content .modal.is-open .modal-dialog.close-modal-payment-wrap,
.main-content .modal.is-open .modal-dialog.close-modal-templatePayment-wrap,
.main-content .modal.is-open .modal-dialog.close-modal-detailTemplate-wrap,
.main-content .modal.is-open .modal-dialog.modal-deactivatingReminder-template-wrap,
.main-content .modal.is-open .modal-dialog.modal-delete-template-wrap {
    max-width: 35rem;
    width: 100%;
}

    .newDesign .modal.is-open .modal-dialog.close-modal-payment-wrap .modal-content, .newDesign .modal.is-open .modal-dialog.close-modal-templatePayment-wrap .modal-content, .newDesign .modal.is-open .modal-dialog.close-modal-detailTemplate-wrap .modal-content, .newDesign .modal.is-open .modal-dialog.modal-deactivatingReminder-template-wrap .modal-content, .newDesign .modal.is-open .modal-dialog.modal-delete-template-wrap .modal-content,
    .postpaid-container .modal.is-open .modal-dialog.close-modal-payment-wrap .modal-content,
    .postpaid-container .modal.is-open .modal-dialog.close-modal-templatePayment-wrap .modal-content,
    .postpaid-container .modal.is-open .modal-dialog.close-modal-detailTemplate-wrap .modal-content,
    .postpaid-container .modal.is-open .modal-dialog.modal-deactivatingReminder-template-wrap .modal-content,
    .postpaid-container .modal.is-open .modal-dialog.modal-delete-template-wrap .modal-content,
    .main-content .modal.is-open .modal-dialog.close-modal-payment-wrap .modal-content,
    .main-content .modal.is-open .modal-dialog.close-modal-templatePayment-wrap .modal-content,
    .main-content .modal.is-open .modal-dialog.close-modal-detailTemplate-wrap .modal-content,
    .main-content .modal.is-open .modal-dialog.modal-deactivatingReminder-template-wrap .modal-content,
    .main-content .modal.is-open .modal-dialog.modal-delete-template-wrap .modal-content {
        width: 100%;
        max-width: 100%;
    }

.newDesign .modal.is-open .modal-dialog.payment-export, .newDesign .modal.is-open .modal-dialog.contractors-export-modal,
.postpaid-container .modal.is-open .modal-dialog.payment-export,
.postpaid-container .modal.is-open .modal-dialog.contractors-export-modal,
.main-content .modal.is-open .modal-dialog.payment-export,
.main-content .modal.is-open .modal-dialog.contractors-export-modal {
    width: 100%;
    max-width: 35rem;
    height: auto;
    padding: 20px;
}

    .newDesign .modal.is-open .modal-dialog.payment-export .modal-content, .newDesign .modal.is-open .modal-dialog.contractors-export-modal .modal-content,
    .postpaid-container .modal.is-open .modal-dialog.payment-export .modal-content,
    .postpaid-container .modal.is-open .modal-dialog.contractors-export-modal .modal-content,
    .main-content .modal.is-open .modal-dialog.payment-export .modal-content,
    .main-content .modal.is-open .modal-dialog.contractors-export-modal .modal-content {
        max-width: 100%;
    }

.newDesign .modal.is-open .modal-dialog.contractors-export-modal,
.postpaid-container .modal.is-open .modal-dialog.contractors-export-modal,
.main-content .modal.is-open .modal-dialog.contractors-export-modal {
    padding: 0;
}

.newDesign .modal.is-open .modal-dialog.payment-delete,
.newDesign .modal.is-open .modal-dialog .modal-detail__resend-payment,
.postpaid-container .modal.is-open .modal-dialog.payment-delete,
.postpaid-container .modal.is-open .modal-dialog .modal-detail__resend-payment,
.main-content .modal.is-open .modal-dialog.payment-delete,
.main-content .modal.is-open .modal-dialog .modal-detail__resend-payment {
    width: 100%;
    max-width: 35.125rem;
    height: auto;
    padding: 0;
}

    .newDesign .modal.is-open .modal-dialog.payment-delete .modal-content,
    .newDesign .modal.is-open .modal-dialog .modal-detail__resend-payment .modal-content,
    .postpaid-container .modal.is-open .modal-dialog.payment-delete .modal-content,
    .postpaid-container .modal.is-open .modal-dialog .modal-detail__resend-payment .modal-content,
    .main-content .modal.is-open .modal-dialog.payment-delete .modal-content,
    .main-content .modal.is-open .modal-dialog .modal-detail__resend-payment .modal-content {
        max-width: 100%;
    }

.newDesign .modal.is-open .modal-dialog.payment-notification, .newDesign .modal.is-open .modal-dialog.payment-print,
.postpaid-container .modal.is-open .modal-dialog.payment-notification,
.postpaid-container .modal.is-open .modal-dialog.payment-print,
.main-content .modal.is-open .modal-dialog.payment-notification,
.main-content .modal.is-open .modal-dialog.payment-print {
    width: 100%;
    max-width: 28.125rem;
    height: auto;
}

    .newDesign .modal.is-open .modal-dialog.payment-notification .modal-content, .newDesign .modal.is-open .modal-dialog.payment-print .modal-content,
    .postpaid-container .modal.is-open .modal-dialog.payment-notification .modal-content,
    .postpaid-container .modal.is-open .modal-dialog.payment-print .modal-content,
    .main-content .modal.is-open .modal-dialog.payment-notification .modal-content,
    .main-content .modal.is-open .modal-dialog.payment-print .modal-content {
        max-width: 100%;
    }

.newDesign .modal.is-open .modal-dialog.payment-print,
.postpaid-container .modal.is-open .modal-dialog.payment-print,
.main-content .modal.is-open .modal-dialog.payment-print {
    padding: 0;
    max-width: 35rem;
}

.newDesign .modal.is-open .modal-dialog.import-confirmatio-wrapper,
.postpaid-container .modal.is-open .modal-dialog.import-confirmatio-wrapper,
.main-content .modal.is-open .modal-dialog.import-confirmatio-wrapper {
    position: relative;
    height: auto;
    max-height: 100%;
    width: 100%;
    max-width: 35rem;
    min-width: 22rem;
    padding: 0;
    transform: translate(-50%, -50%);
}

@media (max-width: 768px) {
    .newDesign .modal.is-open .modal-dialog.import-confirmatio-wrapper,
    .postpaid-container .modal.is-open .modal-dialog.import-confirmatio-wrapper,
    .main-content .modal.is-open .modal-dialog.import-confirmatio-wrapper {
        min-width: 22rem;
        width: 50%;
    }
}

.newDesign .modal.is-open .modal-dialog.import-confirmatio-wrapper .modal-content,
.postpaid-container .modal.is-open .modal-dialog.import-confirmatio-wrapper .modal-content,
.main-content .modal.is-open .modal-dialog.import-confirmatio-wrapper .modal-content {
    height: 100%;
    width: 100%;
    max-width: 100%;
}

@media (max-width: 768px) {
    .newDesign .modal.is-open .modal-dialog.switcher-version, .newDesign .modal.is-open .modal-dialog.close-modal-payment-wrap, .newDesign .modal.is-open .modal-dialog.close-modal-templatePayment-wrap, .newDesign .modal.is-open .modal-dialog.close-modal-detailTemplate-wrap, .newDesign .modal.is-open .modal-dialog.modal-deactivatingReminder-template-wrap, .newDesign .modal.is-open .modal-dialog.modal-delete-template-wrap, .newDesign .modal.is-open .modal-dialog.modal-extracts, .newDesign .modal.is-open .modal-dialog.extract-loading, .newDesign .modal.is-open .modal-dialog.extract-error-modal, .newDesign .modal.is-open .modal-dialog.extract-confirmation-email, .newDesign .modal.is-open .modal-dialog.modal-sender-of-account, .newDesign .modal.is-open .modal-dialog.modal-detailsOf-account, .newDesign .modal.is-open .modal-dialog.modal-generation-qr, .newDesign .modal.is-open .modal-dialog.modal-senderof-account, .newDesign .modal.is-open .modal-dialog.payment-notification, .newDesign .modal.is-open .modal-dialog.payment-print, .newDesign .modal.is-open .modal-dialog.payment-export, .newDesign .modal.is-open .modal-dialog.payment-delete, .newDesign .modal.is-open .modal-dialog.contractors-export-modal,
    .postpaid-container .modal.is-open .modal-dialog.switcher-version,
    .postpaid-container .modal.is-open .modal-dialog.close-modal-payment-wrap,
    .postpaid-container .modal.is-open .modal-dialog.close-modal-templatePayment-wrap,
    .postpaid-container .modal.is-open .modal-dialog.close-modal-detailTemplate-wrap,
    .postpaid-container .modal.is-open .modal-dialog.modal-deactivatingReminder-template-wrap,
    .postpaid-container .modal.is-open .modal-dialog.modal-delete-template-wrap,
    .postpaid-container .modal.is-open .modal-dialog.modal-extracts,
    .postpaid-container .modal.is-open .modal-dialog.extract-loading,
    .postpaid-container .modal.is-open .modal-dialog.extract-error-modal,
    .postpaid-container .modal.is-open .modal-dialog.extract-confirmation-email,
    .postpaid-container .modal.is-open .modal-dialog.modal-sender-of-account,
    .postpaid-container .modal.is-open .modal-dialog.modal-detailsOf-account,
    .postpaid-container .modal.is-open .modal-dialog.modal-generation-qr,
    .postpaid-container .modal.is-open .modal-dialog.modal-senderof-account,
    .postpaid-container .modal.is-open .modal-dialog.payment-notification,
    .postpaid-container .modal.is-open .modal-dialog.payment-print,
    .postpaid-container .modal.is-open .modal-dialog.payment-export,
    .postpaid-container .modal.is-open .modal-dialog.payment-delete,
    .postpaid-container .modal.is-open .modal-dialog.contractors-export-modal,
    .main-content .modal.is-open .modal-dialog.switcher-version,
    .main-content .modal.is-open .modal-dialog.close-modal-payment-wrap,
    .main-content .modal.is-open .modal-dialog.close-modal-templatePayment-wrap,
    .main-content .modal.is-open .modal-dialog.close-modal-detailTemplate-wrap,
    .main-content .modal.is-open .modal-dialog.modal-deactivatingReminder-template-wrap,
    .main-content .modal.is-open .modal-dialog.modal-delete-template-wrap,
    .main-content .modal.is-open .modal-dialog.modal-extracts,
    .main-content .modal.is-open .modal-dialog.extract-loading,
    .main-content .modal.is-open .modal-dialog.extract-error-modal,
    .main-content .modal.is-open .modal-dialog.extract-confirmation-email,
    .main-content .modal.is-open .modal-dialog.modal-sender-of-account,
    .main-content .modal.is-open .modal-dialog.modal-detailsOf-account,
    .main-content .modal.is-open .modal-dialog.modal-generation-qr,
    .main-content .modal.is-open .modal-dialog.modal-senderof-account,
    .main-content .modal.is-open .modal-dialog.payment-notification,
    .main-content .modal.is-open .modal-dialog.payment-print,
    .main-content .modal.is-open .modal-dialog.payment-export,
    .main-content .modal.is-open .modal-dialog.payment-delete,
    .main-content .modal.is-open .modal-dialog.contractors-export-modal {
        min-width: 1rem;
        max-width: 22rem;
        width: 100%;
        top: 50%;
        height: fit-content;
        left: 50%;
        border-radius: 0.75rem;
        transform: translate(-50%, -50%);
    }
}

.newDesign .modal.is-open .modal-dialog.modal-extracts,
.postpaid-container .modal.is-open .modal-dialog.modal-extracts,
.main-content .modal.is-open .modal-dialog.modal-extracts {
    width: 100%;
    max-width: 46.25rem;
    height: 85%;
    padding: 0;
}

@media (max-width: 768px) {
    .newDesign .modal.is-open .modal-dialog.modal-extracts,
    .postpaid-container .modal.is-open .modal-dialog.modal-extracts,
    .main-content .modal.is-open .modal-dialog.modal-extracts {
        max-width: 22rem;
    }
}

.newDesign .modal.is-open .modal-dialog.modal-extracts .modal-content,
.postpaid-container .modal.is-open .modal-dialog.modal-extracts .modal-content,
.main-content .modal.is-open .modal-dialog.modal-extracts .modal-content {
    max-width: 100%;
    height: 100%;
}

.newDesign .modal.is-open .modal-dialog.extract-error-modal, .newDesign .modal.is-open .modal-dialog.extract-loading, .newDesign .modal.is-open .modal-dialog.extract-confirmation-email, .newDesign .modal.is-open .modal-dialog.close-modal-templatePayment-wrap, .newDesign .modal.is-open .modal-dialog.close-modal-detailTemplate-wrap, .newDesign .modal.is-open .modal-dialog.modal-deactivatingReminder-template-wrap, .newDesign .modal.is-open .modal-dialog.modal-delete-template-wrap,
.postpaid-container .modal.is-open .modal-dialog.extract-error-modal,
.postpaid-container .modal.is-open .modal-dialog.extract-loading,
.postpaid-container .modal.is-open .modal-dialog.extract-confirmation-email,
.postpaid-container .modal.is-open .modal-dialog.close-modal-templatePayment-wrap,
.postpaid-container .modal.is-open .modal-dialog.close-modal-detailTemplate-wrap,
.postpaid-container .modal.is-open .modal-dialog.modal-deactivatingReminder-template-wrap,
.postpaid-container .modal.is-open .modal-dialog.modal-delete-template-wrap,
.main-content .modal.is-open .modal-dialog.extract-error-modal,
.main-content .modal.is-open .modal-dialog.extract-loading,
.main-content .modal.is-open .modal-dialog.extract-confirmation-email,
.main-content .modal.is-open .modal-dialog.close-modal-templatePayment-wrap,
.main-content .modal.is-open .modal-dialog.close-modal-detailTemplate-wrap,
.main-content .modal.is-open .modal-dialog.modal-deactivatingReminder-template-wrap,
.main-content .modal.is-open .modal-dialog.modal-delete-template-wrap {
    padding: 0;
}

.newDesign .modal.is-open .modal-dialog.switcher-version,
.postpaid-container .modal.is-open .modal-dialog.switcher-version,
.main-content .modal.is-open .modal-dialog.switcher-version {
    padding: 0;
}

.newDesign .modal.is-open .modal-dialog.modal-detailsOf-account, .newDesign .modal.is-open .modal-dialog.modal-generation-qr,
.postpaid-container .modal.is-open .modal-dialog.modal-detailsOf-account,
.postpaid-container .modal.is-open .modal-dialog.modal-generation-qr,
.main-content .modal.is-open .modal-dialog.modal-detailsOf-account,
.main-content .modal.is-open .modal-dialog.modal-generation-qr {
    padding: 0;
    max-width: 43.063rem;
    width: 100%;
}

    .newDesign .modal.is-open .modal-dialog.modal-detailsOf-account .modal-content, .newDesign .modal.is-open .modal-dialog.modal-generation-qr .modal-content,
    .postpaid-container .modal.is-open .modal-dialog.modal-detailsOf-account .modal-content,
    .postpaid-container .modal.is-open .modal-dialog.modal-generation-qr .modal-content,
    .main-content .modal.is-open .modal-dialog.modal-detailsOf-account .modal-content,
    .main-content .modal.is-open .modal-dialog.modal-generation-qr .modal-content {
        width: 100%;
        max-width: 100%;
    }

@media (max-width: 768px) {
    .newDesign .modal.is-open .modal-dialog.modal-detailsOf-account, .newDesign .modal.is-open .modal-dialog.modal-generation-qr,
    .postpaid-container .modal.is-open .modal-dialog.modal-detailsOf-account,
    .postpaid-container .modal.is-open .modal-dialog.modal-generation-qr,
    .main-content .modal.is-open .modal-dialog.modal-detailsOf-account,
    .main-content .modal.is-open .modal-dialog.modal-generation-qr {
        max-width: 22rem;
    }
}

.newDesign .modal.is-open .modal-dialog.modal-detailsOf-account,
.postpaid-container .modal.is-open .modal-dialog.modal-detailsOf-account,
.main-content .modal.is-open .modal-dialog.modal-detailsOf-account {
    max-height: fit-content;
    height: 95%;
    overflow-y: auto;
}

.newDesign .modal.is-open .modal-dialog.modal-senderof-account,
.postpaid-container .modal.is-open .modal-dialog.modal-senderof-account,
.main-content .modal.is-open .modal-dialog.modal-senderof-account {
    width: 100%;
    max-width: 28.125rem;
    height: auto;
    padding: 0;
}

@media (max-width: 768px) {
    .newDesign .modal.is-open .modal-dialog.modal-senderof-account,
    .postpaid-container .modal.is-open .modal-dialog.modal-senderof-account,
    .main-content .modal.is-open .modal-dialog.modal-senderof-account {
        max-width: 22rem;
        height: fit-content;
    }
}

.newDesign .modal.is-open .modal-dialog.modal-senderof-account .modal-content,
.postpaid-container .modal.is-open .modal-dialog.modal-senderof-account .modal-content,
.main-content .modal.is-open .modal-dialog.modal-senderof-account .modal-content {
    max-width: 100%;
    height: 100%;
}

@media (min-width: 1624px) {
    .newDesign .modal.is-open .modal-dialog.creatTemplatePayment .create-template-payment__sender-settings,
    .postpaid-container .modal.is-open .modal-dialog.creatTemplatePayment .create-template-payment__sender-settings,
    .main-content .modal.is-open .modal-dialog.creatTemplatePayment .create-template-payment__sender-settings {
        gap: 24px;
    }

    .newDesign .modal.is-open .modal-dialog.creatTemplatePayment .create-template-payment__sender-block, .newDesign .modal.is-open .modal-dialog.creatTemplatePayment .create-template-payment__sender-dropdown,
    .postpaid-container .modal.is-open .modal-dialog.creatTemplatePayment .create-template-payment__sender-block,
    .postpaid-container .modal.is-open .modal-dialog.creatTemplatePayment .create-template-payment__sender-dropdown,
    .main-content .modal.is-open .modal-dialog.creatTemplatePayment .create-template-payment__sender-block,
    .main-content .modal.is-open .modal-dialog.creatTemplatePayment .create-template-payment__sender-dropdown {
        width: 100%;
    }

    .newDesign .modal.is-open .modal-dialog.creatTemplatePayment .create-template-payment__sender-dropdown,
    .newDesign .modal.is-open .modal-dialog.creatTemplatePayment .create-template-payment .sender-dropdown-container, .newDesign .modal.is-open .modal-dialog.creatTemplatePayment .create-template-payment__DropdownBlock,
    .postpaid-container .modal.is-open .modal-dialog.creatTemplatePayment .create-template-payment__sender-dropdown,
    .postpaid-container .modal.is-open .modal-dialog.creatTemplatePayment .create-template-payment .sender-dropdown-container,
    .postpaid-container .modal.is-open .modal-dialog.creatTemplatePayment .create-template-payment__DropdownBlock,
    .main-content .modal.is-open .modal-dialog.creatTemplatePayment .create-template-payment__sender-dropdown,
    .main-content .modal.is-open .modal-dialog.creatTemplatePayment .create-template-payment .sender-dropdown-container,
    .main-content .modal.is-open .modal-dialog.creatTemplatePayment .create-template-payment__DropdownBlock {
        width: 100%;
    }

    .newDesign .modal.is-open .modal-dialog.creatTemplatePayment .create-template-payment__template-nane,
    .postpaid-container .modal.is-open .modal-dialog.creatTemplatePayment .create-template-payment__template-nane,
    .main-content .modal.is-open .modal-dialog.creatTemplatePayment .create-template-payment__template-nane {
        width: calc(50% - 16px);
    }
}

@media (min-width: 1624px) {
    .newDesign .modal.is-open .modal-dialog.importPayment .import-payment__options,
    .postpaid-container .modal.is-open .modal-dialog.importPayment .import-payment__options,
    .main-content .modal.is-open .modal-dialog.importPayment .import-payment__options {
        gap: 24px;
    }

    .newDesign .modal.is-open .modal-dialog.importPayment .import-payment__format, .newDesign .modal.is-open .modal-dialog.importPayment .import-payment__template,
    .postpaid-container .modal.is-open .modal-dialog.importPayment .import-payment__format,
    .postpaid-container .modal.is-open .modal-dialog.importPayment .import-payment__template,
    .main-content .modal.is-open .modal-dialog.importPayment .import-payment__format,
    .main-content .modal.is-open .modal-dialog.importPayment .import-payment__template {
        width: 50%;
    }

    .newDesign .modal.is-open .modal-dialog.importPayment .import-form__file-name-container, .newDesign .modal.is-open .modal-dialog.importPayment .import-form__file-upload,
    .postpaid-container .modal.is-open .modal-dialog.importPayment .import-form__file-name-container,
    .postpaid-container .modal.is-open .modal-dialog.importPayment .import-form__file-upload,
    .main-content .modal.is-open .modal-dialog.importPayment .import-form__file-name-container,
    .main-content .modal.is-open .modal-dialog.importPayment .import-form__file-upload {
        width: 50%;
    }

    .newDesign .modal.is-open .modal-dialog.importPayment .import-form__file-name-input,
    .postpaid-container .modal.is-open .modal-dialog.importPayment .import-form__file-name-input,
    .main-content .modal.is-open .modal-dialog.importPayment .import-form__file-name-input {
        width: calc(100% - 8px);
    }
}

@media (max-width: 991px) {
    .newDesign .modal.is-open .modal-dialog.creatTemplatePayment .create-template-payment__sender-dropdown, .newDesign .modal.is-open .modal-dialog.creatTemplatePayment .create-template-payment__radio-tabs,
    .postpaid-container .modal.is-open .modal-dialog.creatTemplatePayment .create-template-payment__sender-dropdown,
    .postpaid-container .modal.is-open .modal-dialog.creatTemplatePayment .create-template-payment__radio-tabs,
    .main-content .modal.is-open .modal-dialog.creatTemplatePayment .create-template-payment__sender-dropdown,
    .main-content .modal.is-open .modal-dialog.creatTemplatePayment .create-template-payment__radio-tabs {
        padding: 0;
    }
}

@media (max-width: 768px) {
    .newDesign .modal.is-open .modal-dialog.creatTemplatePayment .create-template-payment__sender-settings,
    .postpaid-container .modal.is-open .modal-dialog.creatTemplatePayment .create-template-payment__sender-settings,
    .main-content .modal.is-open .modal-dialog.creatTemplatePayment .create-template-payment__sender-settings {
        flex-direction: column;
    }
}

.newDesign .modal .modal-dialog,
.postpaid-container .modal .modal-dialog,
.main-content .modal .modal-dialog {
    position: absolute;
    top: 0;
    left: 50%;
    background: #fff;
    width: auto;
    min-width: 400px;
    padding: 1rem 1rem 1.75rem;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
    border-radius: 12px;
    pointer-events: auto;
    transform: translate(-50%, -250%);
    transition: all 0.32s ease-out;
    z-index: 1073;
}

    .newDesign .modal .modal-dialog *,
    .newDesign .modal .modal-dialog :after,
    .newDesign .modal .modal-dialog :before,
    .postpaid-container .modal .modal-dialog *,
    .postpaid-container .modal .modal-dialog :after,
    .postpaid-container .modal .modal-dialog :before,
    .main-content .modal .modal-dialog *,
    .main-content .modal .modal-dialog :after,
    .main-content .modal .modal-dialog :before {
        box-sizing: border-box;
    }

@media (max-width: 576px) {
    .newDesign .modal .modal-dialog,
    .postpaid-container .modal .modal-dialog,
    .main-content .modal .modal-dialog {
        min-width: 359px;
        top: auto;
        left: 0;
        bottom: 0;
        border-radius: 0.75rem 0.75rem 0 0;
        transform: translate(0, 250%);
    }
}

.newDesign .modal .modal-dialog.createPayment, .newDesign .modal .modal-dialog.importPayment, .newDesign .modal .modal-dialog.creatTemplatePayment,
.postpaid-container .modal .modal-dialog.createPayment,
.postpaid-container .modal .modal-dialog.importPayment,
.postpaid-container .modal .modal-dialog.creatTemplatePayment,
.main-content .modal .modal-dialog.createPayment,
.main-content .modal .modal-dialog.importPayment,
.main-content .modal .modal-dialog.creatTemplatePayment {
    position: relative;
    height: 100%;
    max-height: 100%;
    width: 100%;
    padding: 0;
    border-radius: 0;
    transform: translate(200%, 0);
}

@media (max-width: 768px) {
    .newDesign .modal .modal-dialog.switcher-version, .newDesign .modal .modal-dialog.close-modal-payment-wrap,
    .postpaid-container .modal .modal-dialog.switcher-version,
    .postpaid-container .modal .modal-dialog.close-modal-payment-wrap,
    .main-content .modal .modal-dialog.switcher-version,
    .main-content .modal .modal-dialog.close-modal-payment-wrap {
        top: 0;
        left: 50%;
        transform: translate(-50%, -100%);
    }
}

.newDesign .modal-backdrop,
.postpaid-container .modal-backdrop,
.main-content .modal-backdrop {
    visibility: hidden;
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 0;
    background: rgba(32, 36, 39, 0.5);
    opacity: 0;
    transition: opacity 0.55s ease-out;
    z-index: 1071;
}

    .newDesign .modal-backdrop.show,
    .postpaid-container .modal-backdrop.show,
    .main-content .modal-backdrop.show {
        height: 100vh;
        visibility: visible;
        opacity: 1;
        transition: opacity 0.52s ease-out;
    }

.newDesign .modal-content,
.postpaid-container .modal-content,
.main-content .modal-content {
    max-width: 418px;
    width: 100%;
    margin: auto;
}

.newDesign .modal-image,
.postpaid-container .modal-image,
.main-content .modal-image {
    display: flex;
    flex: 1 1 100%;
    max-width: 100%;
    height: 15rem;
    background-color: #EDEFF1;
    border-radius: 12px;
    overflow: hidden;
}

.newDesign .modal-image__recovery, .newDesign .modal-image__notification,
.postpaid-container .modal-image__recovery,
.postpaid-container .modal-image__notification,
.main-content .modal-image__recovery,
.main-content .modal-image__notification {
    height: 100%;
    width: 100%;
    background: url("../img/newDesign/notification-banner.png") no-repeat center;
}

.debugUrl .newDesign .modal-image__recovery, .debugUrl .newDesign .modal-image__notification,
.debugUrl .postpaid-container .modal-image__recovery,
.debugUrl .postpaid-container .modal-image__notification,
.debugUrl .main-content .modal-image__recovery,
.debugUrl .main-content .modal-image__notification {
    background: url("/Content/themes/novapay/img/newDesign/notification-banner.png") no-repeat center;
}

.newDesign .modal-text,
.postpaid-container .modal-text,
.main-content .modal-text {
    margin: 0;
    padding-top: 2rem;
    padding-bottom: 1.75rem;
    text-align: center;
}

.newDesign .modal-title,
.postpaid-container .modal-title,
.main-content .modal-title {
    font-size: 1.25rem;
    font-weight: 600;
    line-height: 1.2;
}

.newDesign .modal-description,
.postpaid-container .modal-description,
.main-content .modal-description {
    padding-top: 0.75rem;
    font-size: 14px;
    line-height: 1.2;
}

.newDesign .btn-send-again,
.postpaid-container .btn-send-again,
.main-content .btn-send-again {
    margin-top: 1.5rem;
    padding: 0;
    font-size: 14px;
    font-weight: 500;
    border-color: transparent;
    border: none;
    background-color: inherit !important;
}

.app-notifications-toast {
    max-height: 86%;
    padding-top: 0.625rem;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    right: 1.5rem;
    gap: 0.5rem;
    top: 5rem;
    position: fixed;
    max-width: 28.125rem;
    width: 100%;
    z-index: 10007;
    opacity: 1;
}

    .app-notifications-toast .vue-show-notification {
        box-sizing: border-box;
        position: relative;
        padding: 16px 16px 16px 22px;
        width: 100%;
        border-radius: 4px;
    }

        .app-notifications-toast .vue-show-notification.p-toast-message-enter-from, .app-notifications-toast .vue-show-notification.p-toast-message-leave-to {
            opacity: 0;
            transform: translateY(-10px);
        }

    .app-notifications-toast .vue-show-notification__container {
        width: 100%;
        display: flex;
        gap: 8px;
    }

    .app-notifications-toast .vue-show-notification__legacy-link {
        font-weight: 500;
        cursor: pointer;
    }

    .app-notifications-toast .vue-show-notification__content {
        width: 100%;
    }

    .app-notifications-toast .vue-show-notification:before {
        position: absolute;
        content: "";
        top: 0;
        height: 100%;
        left: 0;
        border-radius: 4px 0px 0px 4px;
        width: 6px;
    }

    .app-notifications-toast .vue-show-notification__title {
        font-family: "Fixel Text", "Fixel Display", "Helvetica", "Arial", sans-serif;
        font-size: 16px;
        font-style: normal;
        font-weight: 500;
        line-height: 20px;
    }

    .app-notifications-toast .vue-show-notification__wrap {
        position: relative;
        display: flex;
        justify-content: space-between;
        align-items: self-start;
        gap: 7px;
    }

    .app-notifications-toast .vue-show-notification__description {
        margin-top: 8px;
        font-family: "Fixel Text", "Fixel Display", "Helvetica", "Arial", sans-serif;
        font-size: 16px;
        font-style: normal;
        font-weight: 400;
        color: #32383c;
        line-height: 20px;
    }

    .app-notifications-toast .vue-show-notification__description-t {
        margin-top: 0;
    }

    .app-notifications-toast .vue-show-notification__close {
        position: relative;
        cursor: pointer;
        min-width: 20px;
        min-height: 20px;
        max-width: 20px;
        max-height: 20px;
    }

        .app-notifications-toast .vue-show-notification__close:hover {
            opacity: 0.7;
        }

        .app-notifications-toast .vue-show-notification__close:before, .app-notifications-toast .vue-show-notification__close:after {
            position: absolute;
            content: " ";
            height: 20px;
            width: 2px;
            top: 0;
            right: 8px;
        }

        .app-notifications-toast .vue-show-notification__close:before {
            transform: rotate(45deg);
        }

        .app-notifications-toast .vue-show-notification__close:after {
            transform: rotate(-45deg);
        }

    .app-notifications-toast .vue-show-notification__link {
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        width: 85%;
        margin-left: 26px;
        color: #690DD3;
        font-family: "Fixel Text", "Fixel Display", "Helvetica", "Arial", sans-serif;
        font-size: 16px;
        font-style: normal;
        font-weight: 600;
        line-height: 20px;
        text-decoration-line: underline;
        text-decoration-skip-ink: none;
        text-underline-position: from-font;
    }

    .app-notifications-toast .vue-show-notification__icon {
        height: 18px;
        width: 20px;
    }

    .app-notifications-toast .vue-show-notification__success {
        background: #E1F8F2;
        border: 1px solid #7ECABB;
    }

        .app-notifications-toast .vue-show-notification__success:before {
            background: #22967F;
        }

    .app-notifications-toast .vue-show-notification__success-title {
        color: #0A7B65;
    }

    .app-notifications-toast .vue-show-notification__success-close:before, .app-notifications-toast .vue-show-notification__success-close:after {
        background-color: #0A7B65;
    }

    .app-notifications-toast .vue-show-notification__success-icon {
        background: url("../img/newDesign/icon/circle.check.svg") no-repeat;
    }

.debugUrl .app-notifications-toast .vue-show-notification__success-icon {
    background: url("/Content/themes/novapay/img/newDesign/icon/circle.check.svg") no-repeat;
}

.app-notifications-toast .vue-show-notification__error {
    border: 1px solid #F1AEAB;
    background: #FFEBEA;
}

    .app-notifications-toast .vue-show-notification__error:before {
        background: #EB4235;
    }

.app-notifications-toast .vue-show-notification__error-title {
    color: #C6261A;
}

.app-notifications-toast .vue-show-notification__error-close:before, .app-notifications-toast .vue-show-notification__error-close:after {
    background-color: #C6261A;
}

.app-notifications-toast .vue-show-notification__error-icon {
    background: url("../img/newDesign/icon/triangle.exclamation.svg");
}

    .app-notifications-toast .vue-show-notification__error-icon.debugUrl {
        background: url("/Content/themes/novapay/img/newDesign/icon/triangle.exclamation.svg");
    }

.app-notifications-toast .vue-show-notification__warning {
    border: 1px solid #FFE098;
    background: #FFF1DB;
}

    .app-notifications-toast .vue-show-notification__warning:before {
        background: #EB9D35;
    }

.app-notifications-toast .vue-show-notification__warning-title {
    color: #7F560F;
}

.app-notifications-toast .vue-show-notification__warning-close:before, .app-notifications-toast .vue-show-notification__warning-close:after {
    background-color: #767F8A;
}

.app-notifications-toast .vue-show-notification__warning-icon {
    background: url("../img/newDesign/icon/circle.clock.svg") no-repeat;
}

.debugUrl .app-notifications-toast .vue-show-notification__warning-icon {
    background: url("/Content/themes/novapay/img/newDesign/icon/circle.clock.svg") no-repeat;
}

@media (max-width: 480px) {
    .app-notifications-toast {
        max-width: 85%;
        right: 3.5%;
        top: 88px;
    }

        .app-notifications-toast .vue-show-notification {
            padding: 12px 12px 12px 18px;
        }

        .app-notifications-toast .vue-show-notification__title {
            font-size: 14px;
        }

        .app-notifications-toast .vue-show-notification__description {
            font-size: 12px;
            margin-top: 4px;
        }

        .app-notifications-toast .vue-show-notification__description-t {
            margin-top: 0;
        }

        .app-notifications-toast .vue-show-notification__link {
            font-size: 12px;
            width: 80%;
        }
}

#notifications-container {
    max-height: 86%;
    padding-top: 0.625rem;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    right: 1.5rem;
    gap: 0.5rem;
    top: 5rem;
    position: fixed;
    max-width: 28.125rem;
    width: 100%;
    z-index: 10007;
    opacity: 1;
}

    #notifications-container .show-notification {
        box-sizing: border-box;
        position: relative;
        padding: 16px 16px 16px 22px;
        width: 100%;
        border-radius: 4px;
        transform: translateY(-10px) !important;
        animation: fadeIn 0.5s forwards;
    }

    #notifications-container .show-notification__container {
        width: 100%;
        display: flex;
        gap: 8px;
    }

    #notifications-container .show-notification__legacy-link {
        font-weight: 500;
        cursor: pointer;
    }

    #notifications-container .show-notification__content {
        width: 100%;
    }

    #notifications-container .show-notification .show-notification.fade-out {
        animation: fadeOut 0.5s forwards;
    }

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeOut {
    from {
        opacity: 1;
        transform: translateY(0);
    }

    to {
        opacity: 0;
        transform: translateY(-10px);
    }
}

#notifications-container .show-notification:before {
    position: absolute;
    content: "";
    top: 0;
    height: 100%;
    left: 0;
    border-radius: 4px 0px 0px 4px;
    width: 6px;
}

#notifications-container .show-notification__title {
    font-family: "Fixel Text", "Fixel Display", "Helvetica", "Arial", sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: 20px;
}

#notifications-container .show-notification__wrap {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: self-start;
    gap: 7px;
}

#notifications-container .show-notification__description {
    margin-top: 8px;
    font-family: "Fixel Text", "Fixel Display", "Helvetica", "Arial", sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    color: #32383c;
    line-height: 20px;
}

#notifications-container .show-notification__description-t {
    margin-top: 0;
}

#notifications-container .show-notification__close {
    position: relative;
    cursor: pointer;
    min-width: 20px;
    min-height: 20px;
    max-width: 20px;
    max-height: 20px;
}

    #notifications-container .show-notification__close:hover {
        opacity: 0.7;
    }

    #notifications-container .show-notification__close:before, #notifications-container .show-notification__close:after {
        position: absolute;
        content: " ";
        height: 20px;
        width: 2px;
        top: 0;
        right: 8px;
    }

    #notifications-container .show-notification__close:before {
        transform: rotate(45deg);
    }

    #notifications-container .show-notification__close:after {
        transform: rotate(-45deg);
    }

#notifications-container .show-notification__link {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 85%;
    margin-left: 26px;
    color: #690DD3;
    font-family: "Fixel Text", "Fixel Display", "Helvetica", "Arial", sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: 20px;
    text-decoration-line: underline;
    text-decoration-skip-ink: none;
    text-underline-position: from-font;
}

#notifications-container .show-notification__icon {
    height: 18px;
    width: 20px;
}

#notifications-container .show-notification__success {
    background: #E1F8F2;
    border: 1px solid #7ECABB;
}

    #notifications-container .show-notification__success:before {
        background: #22967F;
    }

#notifications-container .show-notification__success-title {
    color: #0A7B65;
}

#notifications-container .show-notification__success-close:before, #notifications-container .show-notification__success-close:after {
    background-color: #0A7B65;
}

#notifications-container .show-notification__success-icon {
    background: url("../img/newDesign/icon/circle.check.svg") no-repeat;
}

.debugUrl #notifications-container .show-notification__success-icon {
    background: url("/Content/themes/novapay/img/newDesign/icon/circle.check.svg") no-repeat;
}

#notifications-container .show-notification__error {
    border: 1px solid #F1AEAB;
    background: #FFEBEA;
}

    #notifications-container .show-notification__error:before {
        background: #EB4235;
    }

#notifications-container .show-notification__error-title {
    color: #C6261A;
}

#notifications-container .show-notification__error-close:before, #notifications-container .show-notification__error-close:after {
    background-color: #C6261A;
}

#notifications-container .show-notification__error-icon {
    background: url("../img/newDesign/icon/triangle.exclamation.svg");
}

    #notifications-container .show-notification__error-icon.debugUrl {
        background: url("/Content/themes/novapay/img/newDesign/icon/triangle.exclamation.svg");
    }

#notifications-container .show-notification__warning {
    border: 1px solid #FFE098;
    background: #FFF1DB;
}

    #notifications-container .show-notification__warning:before {
        background: #EB9D35;
    }

#notifications-container .show-notification__warning-title {
    color: #7F560F;
}

#notifications-container .show-notification__warning-close:before, #notifications-container .show-notification__warning-close:after {
    background-color: #767F8A;
}

#notifications-container .show-notification__warning-icon {
    background: url("../img/newDesign/icon/circle.clock.svg") no-repeat;
}

.debugUrl #notifications-container .show-notification__warning-icon {
    background: url("/Content/themes/novapay/img/newDesign/icon/circle.clock.svg") no-repeat;
}

@media (max-width: 480px) {
    #notifications-container {
        max-width: 85%;
        right: 3.5%;
        top: 88px;
    }

        #notifications-container .show-notification {
            padding: 12px 12px 12px 18px;
        }

        #notifications-container .show-notification__title {
            font-size: 14px;
        }

        #notifications-container .show-notification__description {
            font-size: 12px;
            margin-top: 4px;
        }

        #notifications-container .show-notification__description-t {
            margin-top: 0;
        }

        #notifications-container .show-notification__link {
            font-size: 12px;
            width: 80%;
        }
}

.p-toast {
    position: fixed !important;
    top: 5rem !important;
    right: 1.5rem !important;
    max-width: 28.125rem !important;
    width: 100% !important;
    z-index: 10007 !important;
    opacity: 1 !important;
}

    .p-toast .p-toast-message {
        border: none;
        margin: 0;
        padding: 16px 16px 16px 22px;
    }

        .p-toast .p-toast-message:has(.show-notification) {
            padding: 0;
            margin-bottom: 10px;
        }

        .p-toast .p-toast-message:before {
            position: absolute;
            content: "";
            top: 0;
            height: 100%;
            left: 0;
            border-radius: 0.25rem 0 0 0.25rem;
            width: 0.375rem;
        }

        .p-toast .p-toast-message .p-toast-message-content {
            padding: 0 !important;
            display: flex !important;
            gap: 0.5rem !important;
            align-items: flex-start !important;
        }

            .p-toast .p-toast-message .p-toast-message-content .p-toast-message-icon {
                position: relative;
                width: 1.25rem !important;
                height: 1.125rem !important;
                margin: 0 !important;
                flex-shrink: 0;
                color: transparent;
            }

            .p-toast .p-toast-message .p-toast-message-content .p-toast-message-text {
                flex: 1;
            }

                .p-toast .p-toast-message .p-toast-message-content .p-toast-message-text .p-toast-summary {
                    display: none;
                    font-size: 16px;
                    font-weight: 500;
                    line-height: 1.25rem;
                    margin: 0 0 0.5rem 0 !important;
                }

                .p-toast .p-toast-message .p-toast-message-content .p-toast-message-text .p-toast-detail {
                    font-size: 16px;
                    color: #32383c;
                    line-height: 1.25rem;
                    margin: 0 !important;
                }

            .p-toast .p-toast-message .p-toast-message-content .p-toast-close-button {
                position: relative !important;
                right: 0;
                cursor: pointer !important;
                min-width: 1.25rem !important;
                min-height: 1.25rem !important;
                max-width: 1.25rem !important;
                max-height: 1.25rem !important;
                background: transparent !important;
                border: none !important;
                padding: 0 !important;
                margin: 0 !important;
            }

                .p-toast .p-toast-message .p-toast-message-content .p-toast-close-button:hover {
                    opacity: 0.7;
                }

                .p-toast .p-toast-message .p-toast-message-content .p-toast-close-button:before, .p-toast .p-toast-message .p-toast-message-content .p-toast-close-button:after {
                    position: absolute;
                    content: " ";
                    height: 1.25rem;
                    width: 2px;
                    top: 0;
                    left: 0.45rem;
                }

                .p-toast .p-toast-message .p-toast-message-content .p-toast-close-button:before {
                    transform: rotate(45deg);
                }

                .p-toast .p-toast-message .p-toast-message-content .p-toast-close-button:after {
                    transform: rotate(-45deg);
                }

                .p-toast .p-toast-message .p-toast-message-content .p-toast-close-button .p-toast-close-icon {
                    display: none;
                }

    .p-toast .p-toast-message-success {
        background: #E1F8F2 !important;
        border: 1px solid #7ECABB !important;
    }

        .p-toast .p-toast-message-success:before {
            background: #22967F !important;
        }

        .p-toast .p-toast-message-success .p-toast-summary {
            color: #0A7B65 !important;
        }

        .p-toast .p-toast-message-success .p-toast-message-icon {
            background: url("../img/newDesign/icon/circle.check.svg") no-repeat !important;
            background-size: contain !important;
        }

.debugUrl .p-toast .p-toast-message-success .p-toast-message-icon {
    background: url("/Content/themes/novapay/img/newDesign/icon/circle.check.svg") no-repeat !important;
}

.p-toast .p-toast-message-success .p-toast-close-button:before, .p-toast .p-toast-message-success .p-toast-close-button:after {
    background-color: #0A7B65;
}

.p-toast .p-toast-message-error {
    border: 1px solid #F1AEAB !important;
    background: #FFEBEA !important;
}

    .p-toast .p-toast-message-error:before {
        background: #EB4235 !important;
    }

    .p-toast .p-toast-message-error .p-toast-summary {
        color: #C6261A !important;
    }

    .p-toast .p-toast-message-error .p-toast-message-icon {
        background: url("../img/newDesign/icon/triangle.exclamation.svg") !important;
        background-size: contain !important;
    }

.debugUrl .p-toast .p-toast-message-error .p-toast-message-icon {
    background: url("/Content/themes/novapay/img/newDesign/icon/triangle.exclamation.svg") !important;
}

.p-toast .p-toast-message-error .p-toast-close-button:before, .p-toast .p-toast-message-error .p-toast-close-button:after {
    background-color: #C6261A;
}

.p-toast .p-toast-message-warn {
    border: 1px solid #FFE098 !important;
    background: #FFF1DB !important;
}

    .p-toast .p-toast-message-warn:before {
        background: #EB9D35 !important;
    }

    .p-toast .p-toast-message-warn .p-toast-summary {
        color: #7F560F !important;
    }

    .p-toast .p-toast-message-warn .p-toast-message-icon {
        background: url("../img/newDesign/icon/circle.clock.svg") no-repeat !important;
        background-size: contain !important;
    }

.debugUrl .p-toast .p-toast-message-warn .p-toast-message-icon {
    background: url("/Content/themes/novapay/img/newDesign/icon/circle.clock.svg") no-repeat !important;
}

.p-toast .p-toast-message-warn .p-toast-close-button:before, .p-toast .p-toast-message-warn .p-toast-close-button:after {
    background-color: #767F8A;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeOut {
    from {
        opacity: 1;
        transform: translateY(0);
    }

    to {
        opacity: 0;
        transform: translateY(-10px);
    }
}

@media (max-width: 768px) {
    .p-toast {
        right: 1rem !important;
        left: 1rem !important;
        max-width: calc(100% - 2rem) !important;
    }
}

@media (max-width: 576px) {
    .postpaid-container .modal.is-open .modal-dialog {
        top: 50%;
        width: auto;
        bottom: unset;
        left: 50%;
        border-radius: 12px 12px;
        transform: translate(-50%, -50%);
    }
}

.postpaid-container .modal .modal-dialog {
    padding: 0;
    min-width: fit-content;
    width: min-content;
}

@media (max-width: 576px) {
    .postpaid-container .modal .modal-dialog {
        width: auto;
        top: auto;
        left: 50%;
        bottom: unset;
        border-radius: 12px 12px;
        transform: translate(-50%, -1464%);
    }
}

.postpaid-container .modal .modal-content {
    max-width: 35rem;
    min-width: 21.875rem;
}

.modal-switch-version {
    display: flex;
    flex-direction: column;
}

.modal-switch__header {
    display: flex;
    justify-content: space-between;
    padding: 1.25rem 0.875rem 1.25rem 1.25rem;
}

    .modal-switch__header .switch-versiong__title {
        font-weight: 500;
        font-size: 1.25rem;
        color: #32383c;
    }

@media (max-width: 768px) {
    .modal-switch__header {
        padding: 1rem 0.75rem 1rem 1rem;
    }
}

.modal-switch__content {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 0 1.25rem 1.25rem 1.25rem;
    border-bottom: 1px solid #DBDFE4;
}

    .modal-switch__content .switch-version__message {
        font-size: 15px;
        font-weight: 400;
    }

        .modal-switch__content .switch-version__message.strong {
            font-weight: 500;
        }

@media (max-width: 768px) {
    .modal-switch__content {
        padding: 0 1rem 1.25rem 1rem;
    }
}

.modal-switch__footer {
    display: flex;
    justify-content: flex-end;
    gap: 1rem;
    padding: 1.25rem;
}

@media (max-width: 768px) {
    .modal-switch__footer {
        justify-content: space-between;
        padding: 0.75rem 1rem;
    }
}

.modal-switch__footer .switch-version__old {
    padding: 0.5rem 0.75rem;
    border: 1px solid #EB4235;
    background-color: #FFEEE2;
    color: #EB4235;
    font-weight: 500;
}

.modal-switch__footer .switch-version__stay {
    padding: 0.5rem 0.75rem;
    font-weight: 500;
}

    .modal-switch__footer .switch-version__stay:hover {
        background: #F5EDFF;
        color: #690DD3;
    }

.close-modal-payment .close-payment__header,
.close-modal-payment .close-templatePayment__header,
.close-modal-payment .close-detail-template__header,
.close-modal-payment .modal-deactivating__header,
.close-modal-payment .modal-delete-regular__header,
.close-modal-templatePayment .close-payment__header,
.close-modal-templatePayment .close-templatePayment__header,
.close-modal-templatePayment .close-detail-template__header,
.close-modal-templatePayment .modal-deactivating__header,
.close-modal-templatePayment .modal-delete-regular__header,
.close-modal-detailTemplate .close-payment__header,
.close-modal-detailTemplate .close-templatePayment__header,
.close-modal-detailTemplate .close-detail-template__header,
.close-modal-detailTemplate .modal-deactivating__header,
.close-modal-detailTemplate .modal-delete-regular__header,
.modal-deactivating-template .close-payment__header,
.modal-deactivating-template .close-templatePayment__header,
.modal-deactivating-template .close-detail-template__header,
.modal-deactivating-template .modal-deactivating__header,
.modal-deactivating-template .modal-delete-regular__header,
.modal-delete-regular-template .close-payment__header,
.modal-delete-regular-template .close-templatePayment__header,
.modal-delete-regular-template .close-detail-template__header,
.modal-delete-regular-template .modal-deactivating__header,
.modal-delete-regular-template .modal-delete-regular__header {
    display: flex;
    justify-content: space-between;
    color: #32383c;
    font-size: 1.25rem;
    font-weight: 500;
}

.close-modal-payment .close-payment__close,
.close-modal-payment .close-templatePayment__close,
.close-modal-payment .close-detail-template__close,
.close-modal-payment .modal-deactivating__close,
.close-modal-payment .modal-delete-regular__close,
.close-modal-templatePayment .close-payment__close,
.close-modal-templatePayment .close-templatePayment__close,
.close-modal-templatePayment .close-detail-template__close,
.close-modal-templatePayment .modal-deactivating__close,
.close-modal-templatePayment .modal-delete-regular__close,
.close-modal-detailTemplate .close-payment__close,
.close-modal-detailTemplate .close-templatePayment__close,
.close-modal-detailTemplate .close-detail-template__close,
.close-modal-detailTemplate .modal-deactivating__close,
.close-modal-detailTemplate .modal-delete-regular__close,
.modal-deactivating-template .close-payment__close,
.modal-deactivating-template .close-templatePayment__close,
.modal-deactivating-template .close-detail-template__close,
.modal-deactivating-template .modal-deactivating__close,
.modal-deactivating-template .modal-delete-regular__close,
.modal-delete-regular-template .close-payment__close,
.modal-delete-regular-template .close-templatePayment__close,
.modal-delete-regular-template .close-detail-template__close,
.modal-delete-regular-template .modal-deactivating__close,
.modal-delete-regular-template .modal-delete-regular__close {
    margin-right: -6px;
}

.close-modal-payment .close-payment__message,
.close-modal-payment .close-templatePayment__message,
.close-modal-payment .close-detail-template__message,
.close-modal-payment .modal-deactivating__message,
.close-modal-payment .modal-delete-regular__message,
.close-modal-templatePayment .close-payment__message,
.close-modal-templatePayment .close-templatePayment__message,
.close-modal-templatePayment .close-detail-template__message,
.close-modal-templatePayment .modal-deactivating__message,
.close-modal-templatePayment .modal-delete-regular__message,
.close-modal-detailTemplate .close-payment__message,
.close-modal-detailTemplate .close-templatePayment__message,
.close-modal-detailTemplate .close-detail-template__message,
.close-modal-detailTemplate .modal-deactivating__message,
.close-modal-detailTemplate .modal-delete-regular__message,
.modal-deactivating-template .close-payment__message,
.modal-deactivating-template .close-templatePayment__message,
.modal-deactivating-template .close-detail-template__message,
.modal-deactivating-template .modal-deactivating__message,
.modal-deactivating-template .modal-delete-regular__message,
.modal-delete-regular-template .close-payment__message,
.modal-delete-regular-template .close-templatePayment__message,
.modal-delete-regular-template .close-detail-template__message,
.modal-delete-regular-template .modal-deactivating__message,
.modal-delete-regular-template .modal-delete-regular__message {
    padding: 1.25rem 0;
    color: #32383c;
    font-size: 15px;
    font-weight: normal;
    line-height: 1.5rem;
    border-bottom: 1px solid #DBDFE4;
}

.close-modal-payment .close-payment__action,
.close-modal-payment .close-templatePayment__action,
.close-modal-payment .close-detail-template__action,
.close-modal-payment .modal-deactivating__action,
.close-modal-payment .modal-delete-regular__action,
.close-modal-templatePayment .close-payment__action,
.close-modal-templatePayment .close-templatePayment__action,
.close-modal-templatePayment .close-detail-template__action,
.close-modal-templatePayment .modal-deactivating__action,
.close-modal-templatePayment .modal-delete-regular__action,
.close-modal-detailTemplate .close-payment__action,
.close-modal-detailTemplate .close-templatePayment__action,
.close-modal-detailTemplate .close-detail-template__action,
.close-modal-detailTemplate .modal-deactivating__action,
.close-modal-detailTemplate .modal-delete-regular__action,
.modal-deactivating-template .close-payment__action,
.modal-deactivating-template .close-templatePayment__action,
.modal-deactivating-template .close-detail-template__action,
.modal-deactivating-template .modal-deactivating__action,
.modal-deactivating-template .modal-delete-regular__action,
.modal-delete-regular-template .close-payment__action,
.modal-delete-regular-template .close-templatePayment__action,
.modal-delete-regular-template .close-detail-template__action,
.modal-delete-regular-template .modal-deactivating__action,
.modal-delete-regular-template .modal-delete-regular__action {
    display: flex;
    gap: 1rem;
    justify-content: flex-end;
    margin-top: 1.25rem;
}

.close-modal-payment .close-payment__action-delete,
.close-modal-payment .close-templatePayment__action-delete,
.close-modal-payment .close-detail-template__action-delete,
.close-modal-payment .modal-deactivating__action-delete,
.close-modal-payment .modal-delete-regular__action-delete,
.close-modal-templatePayment .close-payment__action-delete,
.close-modal-templatePayment .close-templatePayment__action-delete,
.close-modal-templatePayment .close-detail-template__action-delete,
.close-modal-templatePayment .modal-deactivating__action-delete,
.close-modal-templatePayment .modal-delete-regular__action-delete,
.close-modal-detailTemplate .close-payment__action-delete,
.close-modal-detailTemplate .close-templatePayment__action-delete,
.close-modal-detailTemplate .close-detail-template__action-delete,
.close-modal-detailTemplate .modal-deactivating__action-delete,
.close-modal-detailTemplate .modal-delete-regular__action-delete,
.modal-deactivating-template .close-payment__action-delete,
.modal-deactivating-template .close-templatePayment__action-delete,
.modal-deactivating-template .close-detail-template__action-delete,
.modal-deactivating-template .modal-deactivating__action-delete,
.modal-deactivating-template .modal-delete-regular__action-delete,
.modal-delete-regular-template .close-payment__action-delete,
.modal-delete-regular-template .close-templatePayment__action-delete,
.modal-delete-regular-template .close-detail-template__action-delete,
.modal-delete-regular-template .modal-deactivating__action-delete,
.modal-delete-regular-template .modal-delete-regular__action-delete {
    padding: 0.5rem 0.75rem;
    border: 1px solid #EB4235;
    background-color: #FFEEE2;
    color: #EB4235;
    font-weight: 500;
}

.close-modal-payment .close-payment__action-save,
.close-modal-payment .close-templatePayment__action-save,
.close-modal-payment .close-detail-template__action-save,
.close-modal-payment .modal-deactivating__action-save,
.close-modal-payment .modal-delete-regular__action-save,
.close-modal-templatePayment .close-payment__action-save,
.close-modal-templatePayment .close-templatePayment__action-save,
.close-modal-templatePayment .close-detail-template__action-save,
.close-modal-templatePayment .modal-deactivating__action-save,
.close-modal-templatePayment .modal-delete-regular__action-save,
.close-modal-detailTemplate .close-payment__action-save,
.close-modal-detailTemplate .close-templatePayment__action-save,
.close-modal-detailTemplate .close-detail-template__action-save,
.close-modal-detailTemplate .modal-deactivating__action-save,
.close-modal-detailTemplate .modal-delete-regular__action-save,
.modal-deactivating-template .close-payment__action-save,
.modal-deactivating-template .close-templatePayment__action-save,
.modal-deactivating-template .close-detail-template__action-save,
.modal-deactivating-template .modal-deactivating__action-save,
.modal-deactivating-template .modal-delete-regular__action-save,
.modal-delete-regular-template .close-payment__action-save,
.modal-delete-regular-template .close-templatePayment__action-save,
.modal-delete-regular-template .close-detail-template__action-save,
.modal-delete-regular-template .modal-deactivating__action-save,
.modal-delete-regular-template .modal-delete-regular__action-save {
    padding: 0.5rem 0.75rem;
    font-weight: 500;
}

.close-modal-payment .close-templatePayment__header,
.close-modal-payment .close-detail-template__header,
.close-modal-payment .modal-deactivating__header,
.close-modal-payment .modal-delete-regular__header,
.close-modal-templatePayment .close-templatePayment__header,
.close-modal-templatePayment .close-detail-template__header,
.close-modal-templatePayment .modal-deactivating__header,
.close-modal-templatePayment .modal-delete-regular__header,
.close-modal-detailTemplate .close-templatePayment__header,
.close-modal-detailTemplate .close-detail-template__header,
.close-modal-detailTemplate .modal-deactivating__header,
.close-modal-detailTemplate .modal-delete-regular__header,
.modal-deactivating-template .close-templatePayment__header,
.modal-deactivating-template .close-detail-template__header,
.modal-deactivating-template .modal-deactivating__header,
.modal-deactivating-template .modal-delete-regular__header,
.modal-delete-regular-template .close-templatePayment__header,
.modal-delete-regular-template .close-detail-template__header,
.modal-delete-regular-template .modal-deactivating__header,
.modal-delete-regular-template .modal-delete-regular__header {
    padding: 1.25rem 0.85rem 1.25rem 1.25rem;
}

.close-modal-payment .close-templatePayment__message,
.close-modal-payment .close-detail-template__message,
.close-modal-payment .modal-deactivating__message,
.close-modal-payment .modal-delete-regular__message,
.close-modal-templatePayment .close-templatePayment__message,
.close-modal-templatePayment .close-detail-template__message,
.close-modal-templatePayment .modal-deactivating__message,
.close-modal-templatePayment .modal-delete-regular__message,
.close-modal-detailTemplate .close-templatePayment__message,
.close-modal-detailTemplate .close-detail-template__message,
.close-modal-detailTemplate .modal-deactivating__message,
.close-modal-detailTemplate .modal-delete-regular__message,
.modal-deactivating-template .close-templatePayment__message,
.modal-deactivating-template .close-detail-template__message,
.modal-deactivating-template .modal-deactivating__message,
.modal-deactivating-template .modal-delete-regular__message,
.modal-delete-regular-template .close-templatePayment__message,
.modal-delete-regular-template .close-detail-template__message,
.modal-delete-regular-template .modal-deactivating__message,
.modal-delete-regular-template .modal-delete-regular__message {
    padding: 0 1.25rem 1.25rem 1.25rem;
}

.close-modal-payment .close-templatePayment__action,
.close-modal-payment .close-detail-template__action,
.close-modal-payment .modal-deactivating__action,
.close-modal-payment .modal-delete-regular__action,
.close-modal-templatePayment .close-templatePayment__action,
.close-modal-templatePayment .close-detail-template__action,
.close-modal-templatePayment .modal-deactivating__action,
.close-modal-templatePayment .modal-delete-regular__action,
.close-modal-detailTemplate .close-templatePayment__action,
.close-modal-detailTemplate .close-detail-template__action,
.close-modal-detailTemplate .modal-deactivating__action,
.close-modal-detailTemplate .modal-delete-regular__action,
.modal-deactivating-template .close-templatePayment__action,
.modal-deactivating-template .close-detail-template__action,
.modal-deactivating-template .modal-deactivating__action,
.modal-deactivating-template .modal-delete-regular__action,
.modal-delete-regular-template .close-templatePayment__action,
.modal-delete-regular-template .close-detail-template__action,
.modal-delete-regular-template .modal-deactivating__action,
.modal-delete-regular-template .modal-delete-regular__action {
    margin: 0;
    padding: 1.25rem;
}

.show-notification {
    box-sizing: border-box;
    position: relative;
    padding: 16px 16px 16px 22px;
    width: 100%;
    border-radius: 4px;
    transform: translateY(-10px);
    animation: showFadeIn 0.5s forwards;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

    .show-notification:before {
        position: absolute;
        content: "";
        top: 0;
        height: 100%;
        left: 0;
        border-radius: 4px 0 0 4px;
        width: 6px;
    }

.show-notification__container {
    width: 100%;
    display: flex;
    gap: 8px;
    align-items: flex-start;
}

.show-notification__icon {
    height: 18px;
    width: 20px;
    flex-shrink: 0;
    margin-top: 1px;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
}

.show-notification__content {
    width: 100%;
    min-width: 0;
}

.show-notification__wrap {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 7px;
    width: 100%;
}

.show-notification__title {
    font-family: "Fixel Text", "Fixel Display", "Helvetica", "Arial", sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: 20px;
    margin: 0;
    flex: 1;
}

.show-notification__description {
    margin-top: 8px;
    font-family: "Fixel Text", "Fixel Display", "Helvetica", "Arial", sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    color: #32383c;
    line-height: 20px;
    margin-bottom: 0;
}

.show-notification__description-t {
    margin-top: 0;
}

.show-notification__close {
    position: relative;
    cursor: pointer;
    min-width: 20px;
    min-height: 20px;
    max-width: 20px;
    max-height: 20px;
    flex-shrink: 0;
    margin-top: 1px;
}

    .show-notification__close:hover {
        opacity: 0.7;
    }

    .show-notification__close:before, .show-notification__close:after {
        position: absolute;
        content: " ";
        height: 20px;
        width: 2px;
        top: 0;
        right: 8px;
    }

    .show-notification__close:before {
        transform: rotate(45deg);
    }

    .show-notification__close:after {
        transform: rotate(-45deg);
    }

.show-notification__link {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 85%;
    margin-left: 26px;
    color: #690DD3;
    font-family: "Fixel Text", "Fixel Display", "Helvetica", "Arial", sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: 20px;
    text-decoration-line: underline;
    text-decoration-skip-ink: none;
}

.show-notification__legacy-link {
    font-weight: 500;
    cursor: pointer;
}

.show-notification__success {
    background: #E1F8F2;
    border: 1px solid #7ECABB;
}

    .show-notification__success:before {
        background: #22967F;
    }

    .show-notification__success .show-notification__success-title {
        color: #0A7B65;
    }

    .show-notification__success .show-notification__success-close:before, .show-notification__success .show-notification__success-close:after {
        background-color: #0A7B65;
    }

    .show-notification__success .show-notification__success-icon {
        background: url("../img/newDesign/icon/circle.check.svg") no-repeat center;
        background-size: contain;
    }

.debugUrl .show-notification__success .show-notification__success-icon {
    background: url("/Content/themes/novapay/img/newDesign/icon/circle.check.svg") no-repeat center;
    background-size: contain;
}

.show-notification__error {
    border: 1px solid #F1AEAB;
    background: #FFEBEA;
}

    .show-notification__error:before {
        background: #EB4235;
    }

    .show-notification__error .show-notification__error-title {
        color: #C6261A;
    }

    .show-notification__error .show-notification__error-close:before, .show-notification__error .show-notification__error-close:after {
        background-color: #C6261A;
    }

    .show-notification__error .show-notification__error-icon {
        background: url("../img/newDesign/icon/triangle.exclamation.svg") no-repeat center;
        background-size: contain;
    }

.debugUrl .show-notification__error .show-notification__error-icon {
    background: url("/Content/themes/novapay/img/newDesign/icon/triangle.exclamation.svg") no-repeat center;
    background-size: contain;
}

.show-notification__warning {
    border: 1px solid #FFE098;
    background: #FFF1DB;
}

    .show-notification__warning:before {
        background: #EB9D35;
    }

    .show-notification__warning .show-notification__warning-title {
        color: #7F560F;
    }

    .show-notification__warning .show-notification__warning-close:before, .show-notification__warning .show-notification__warning-close:after {
        background-color: #767F8A;
    }

    .show-notification__warning .show-notification__warning-icon {
        background: url("../img/newDesign/icon/circle.clock.svg") no-repeat center;
        background-size: contain;
    }

.debugUrl .show-notification__warning .show-notification__warning-icon {
    background: url("/Content/themes/novapay/img/newDesign/icon/circle.clock.svg") no-repeat center;
    background-size: contain;
}

.show-notification__info {
    border: 1px solid #b3d4fc;
    background: #e3f2fd;
}

    .show-notification__info:before {
        background: #2196f3;
    }

    .show-notification__info .show-notification__info-title {
        color: #0d47a1;
    }

    .show-notification__info .show-notification__info-close:before, .show-notification__info .show-notification__info-close:after {
        background-color: #0d47a1;
    }

.show-notification.fade-out {
    animation: showFadeOut 0.5s forwards;
}

@keyframes showFadeIn {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes showFadeOut {
    from {
        opacity: 1;
        transform: translateY(0);
    }

    to {
        opacity: 0;
        transform: translateY(-10px);
    }
}

@media (max-width: 768px) {
    .p-toast {
        right: 1rem !important;
        left: 1rem !important;
        max-width: calc(100% - 2rem) !important;
        top: 5rem !important;
    }
}

@media (max-width: 480px) {
    .p-toast {
        max-width: 85% !important;
        right: 3.5% !important;
        top: 88px !important;
    }

        .p-toast .show-notification {
            padding: 12px 12px 12px 18px;
        }

        .p-toast .show-notification__title {
            font-size: 14px;
        }

        .p-toast .show-notification__description {
            font-size: 12px;
            margin-top: 4px;
        }

        .p-toast .show-notification__description-t {
            margin-top: 0;
        }

        .p-toast .show-notification__link {
            font-size: 12px;
            width: 80%;
        }

        .p-toast .show-notification__icon {
            width: 16px;
            height: 16px;
        }
}

.w-25 {
    width: 25% !important;
}

.w-50 {
    width: 50% !important;
}

.w-75 {
    width: 50% !important;
}

.w-100 {
    width: 100% !important;
}

.h-100 {
    height: 100% !important;
}

.pl-0 {
    padding-left: 0 !important;
}

.mt-0 {
    margin-top: 0;
}

.mb-0 {
    margin-bottom: 0;
}

.ml-0 {
    margin-left: 0;
}

.mr-0 {
    margin-right: 0;
}

.mt-1 {
    margin-top: 0.25rem;
}

.mb-1 {
    margin-bottom: 0.25rem;
}

.ml-1 {
    margin-left: 0.25rem;
}

.mr-1 {
    margin-right: 0.25rem;
}

.mt-2 {
    margin-top: 0.5rem;
}

.mb-2 {
    margin-bottom: 0.5rem;
}

.ml-2 {
    margin-left: 0.5rem;
}

.mr-2 {
    margin-right: 0.5rem;
}

.mt-3 {
    margin-top: 0.75rem;
}

.mb-3 {
    margin-bottom: 0.75rem;
}

.ml-3 {
    margin-left: 0.75rem;
}

.mr-3 {
    margin-right: 0.75rem;
}

.mt-4 {
    margin-top: 1rem;
}

.mb-4 {
    margin-bottom: 1rem;
}

.ml-4 {
    margin-left: 1rem;
}

.mr-4 {
    margin-right: 1rem;
}

.mt-5 {
    margin-top: 1.25rem;
}

.mb-5 {
    margin-bottom: 1.25rem;
}

.ml-5 {
    margin-left: 1.25rem;
}

.mr-5 {
    margin-right: 1.25rem;
}

.pt-0 {
    padding-top: 0;
}

.pb-0 {
    padding-bottom: 0;
}

.pl-0 {
    padding-left: 0;
}

.pr-0 {
    padding-right: 0;
}

.pt-1 {
    padding-top: 0.25rem;
}

.pb-1 {
    padding-bottom: 0.25rem;
}

.pl-1 {
    padding-left: 0.25rem;
}

.pr-1 {
    padding-right: 0.25rem;
}

.pt-2 {
    padding-top: 0.5rem;
}

.pb-2 {
    padding-bottom: 0.5rem;
}

.pl-2 {
    padding-left: 0.5rem;
}

.pr-2 {
    padding-right: 0.5rem;
}

.pt-3 {
    padding-top: 0.75rem;
}

.pb-3 {
    padding-bottom: 0.75rem;
}

.pl-3 {
    padding-left: 0.75rem;
}

.pr-3 {
    padding-right: 0.75rem;
}

.pt-4 {
    padding-top: 1rem;
}

.pb-4 {
    padding-bottom: 1rem;
}

.pl-4 {
    padding-left: 1rem;
}

.pr-4 {
    padding-right: 1rem;
}

.pt-5 {
    padding-top: 1.25rem;
}

.pb-5 {
    padding-bottom: 1.25rem;
}

.pl-5 {
    padding-left: 1.25rem;
}

.pr-5 {
    padding-right: 1.25rem;
}

.flex-nowrap {
    flex-wrap: nowrap !important;
}

.p-absolute {
    position: absolute !important;
}

.p-relative {
    position: relative;
}

body.notAuth .newDesign {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100%;
    height: 100%;
    width: 100%;
    scroll-behavior: smooth;
    text-rendering: optimizeSpeed;
    background: #f4f6f7;
}

body.notAuth.debugUrl[data-design=new] {
    background: #f4f6f7;
}

body[data-design=new] {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 100vh;
    width: 100%;
    min-width: 100%;
    scroll-behavior: smooth;
    text-rendering: optimizeSpeed;
    margin: 0 auto;
    padding: 0;
    font-family: "Fixel Text", "Fixel Display", "Helvetica", "Arial", sans-serif !important;
    font-size: 14px;
    line-height: 1.5;
    font-weight: 500;
    color: #32383c;
    background: #f4f6f7;
    line-height: 1.2;
}

.debugUrl body[data-design=new] {
    background: #f4f6f7;
    font-family: "Fixel Text", "Fixel Display", "Helvetica", "Arial", sans-serif !important;
}

@media (max-width: 991px) {
    body[data-design=new].sidebar-opened {
        overflow-y: hidden;
    }
}

body[data-design=new].modal-open {
    overflow: hidden;
}

    body[data-design=new].modal-open .new-header {
        position: absolute;
    }

@media (max-width: 1200px) {
    body[data-design=new].modal-open .new-header {
        position: static;
    }
}

body[data-design=new].modal-open .container-page {
    padding-top: 4.688rem;
    z-index: 4;
}

@media (max-width: 1200px) {
    body[data-design=new].modal-open .container-page {
        padding-top: 1.25rem;
    }
}

body[data-design=new].modal-open .main-content.scrollbar-active {
    overflow-y: hidden;
}

body[data-design=new] .main {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    background-color: #f4f6f7;
}

body[data-design=new] .section {
    display: flex;
    flex-grow: 1;
    height: 100%;
    width: 100%;
}

body[data-design=new] .footer {
    position: relative;
}

body[data-design=new] .accounts .accountsTitle,
body[data-design=new] .accounts .k-widget {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important;
}

body[data-design=new] .navigator,
body[data-design=new] .bodyContent {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important;
}

body[data-design=new].tablet .bodyContent .filters {
    display: block;
}

body[data-design=new] .btnrow.savePayment {
    gap: 0.75rem;
}

    body[data-design=new] .btnrow.savePayment .saveAndSignButton,
    body[data-design=new] .btnrow.savePayment .saveAndSendButton,
    body[data-design=new] .btnrow.savePayment .saveAndSignButtonDisabled,
    body[data-design=new] .btnrow.savePayment .saveAndSendButtonDisabled {
        width: 100%;
        max-width: 100%;
        margin: 0;
    }

body[data-design=new] .scroll-to-top,
body[data-design=new] .toTop {
    height: 3rem;
    width: 3rem;
    padding: 0;
    transition: opacity 0.3s ease, visibility 0.3s ease, border 0.3s ease;
    border: 1px solid #690DD3;
    background: #F5EDFF;
    border-radius: 50%;
    cursor: pointer;
}

    body[data-design=new] .scroll-to-top .icon-scrolltotop,
    body[data-design=new] .toTop .icon-scrolltotop {
        color: #690DD3;
        display: inline-block;
        width: 16px;
        height: 16px;
        background-color: currentColor;
        background-image: none;
        mask-image: url("../img/sprite.svg#icon-scrolltotop");
    }

.debugUrl body[data-design=new] .scroll-to-top .icon-scrolltotop,
.debugUrl body[data-design=new] .toTop .icon-scrolltotop {
    mask-image: url("/Content/themes/novapay/img/sprite.svg#icon-scrolltotop");
}

body[data-design=new] .scroll-to-top .icon-scrolltotop,
body[data-design=new] .toTop .icon-scrolltotop {
    mask-repeat: no-repeat;
    mask-size: contain;
}

body[data-design=new] .scroll-to-top:hover,
body[data-design=new] .toTop:hover {
    border-color: #5E1CAB;
}

@media (max-width: 992px) {
    body[data-design=new] .scroll-to-top,
    body[data-design=new] .toTop {
        display: flex;
        padding: 0;
        align-items: center;
        justify-content: center;
    }
}

body[data-design=new] .toTop.icon-nav-arrow {
    display: flex;
    padding: 0;
    align-items: center;
    justify-content: center;
}

    body[data-design=new] .toTop.icon-nav-arrow:before {
        content: "";
        position: absolute;
        height: 100%;
        width: 100%;
        color: #690DD3;
        display: inline-block;
        width: 16px;
        height: 16px;
        background-color: currentColor;
        background-image: none;
        mask-image: url("../img/sprite.svg#icon-scrolltotop");
    }

.debugUrl body[data-design=new] .toTop.icon-nav-arrow:before {
    mask-image: url("/Content/themes/novapay/img/sprite.svg#icon-scrolltotop");
}

body[data-design=new] .toTop.icon-nav-arrow:before {
    mask-repeat: no-repeat;
    mask-size: contain;
}

.isAdminSite .main-content {
    overflow: inherit;
}

.current {
    width: 100%;
}

.newDesign .title__h1,
.main-content .title__h1 {
    font-size: 34px;
    font-style: normal;
    font-weight: 600;
    line-height: 1.2;
}

.newDesign .title__h2,
.main-content .title__h2 {
    font-size: 24px;
    font-weight: 600;
    line-height: 1.2;
}

.newDesign .title__h3,
.main-content .title__h3 {
    font-size: 17px;
    font-weight: 500;
    line-height: 1.2;
}

.newDesign .secondary-text,
.main-content .secondary-text {
    color: #464B53;
    font-family: "Fixel Text", "Fixel Display", "Helvetica", "Arial", sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px;
}

.newDesign .small-description,
.main-content .small-description {
    color: #767F8A;
    font-family: "Fixel Text", "Fixel Display", "Helvetica", "Arial", sans-serif;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 1rem;
}

.newDesign .title__h1,
.newDesign .title__h2,
.newDesign .title__h3,
.newDesign .secondary-text,
.newDesign .small-description,
.main-content .title__h1,
.main-content .title__h2,
.main-content .title__h3,
.main-content .secondary-text,
.main-content .small-description {
    font-family: "Fixel Text", "Fixel Display", "Helvetica", "Arial", sans-serif !important;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
    clip: rect(0, 0, 0, 0);
    overflow: hidden;
}

#confirmLoader.outerLoader,
.custom-loader-container {
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    background: rgba(255, 255, 255, 0.6);
    z-index: 10004;
    backdrop-filter: blur(4px);
}

.outerLoader #loderOverlayPic {
    top: auto;
}

body > .outerLoader #loderOverlayPic,
.content > .outerLoader #loderOverlayPic {
    position: fixed;
}

.loginBlock .outerLoader #loderOverlayPic {
    position: absolute;
    left: 0;
    height: 100%;
    width: 100%;
}

.confirm-loading-image {
    width: 42px;
    height: 42px;
    position: absolute !important;
    top: 50% !important;
    left: 50%;
    background: url("../img/newDesign/icon/loader.png") no-repeat center center;
    animation: spin 1s linear infinite;
}

    .confirm-loading-image.debugUrl {
        background: url("/Content/themes/novapay/img/newDesign/icon/loader.png") no-repeat center center;
    }

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

.newDesign-footer .language-list__wrapper,
.newDesign-header .language-list__wrapper {
    display: flex;
    flex-direction: row;
}

    .newDesign-footer .language-list__wrapper:before,
    .newDesign-header .language-list__wrapper:before {
        content: "";
        position: absolute;
        left: 0;
        top: 0;
        height: 100%;
        width: 1px;
        background: #DBDFE4;
    }

.newDesign-footer .language-item,
.newDesign-header .language-item {
    position: relative;
    padding: 0 0.5rem;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.2;
    color: #767F8A;
    background: transparent;
    border: none;
    outline: none;
}

    .newDesign-footer .language-item.action-language,
    .newDesign-header .language-item.action-language {
        color: #690DD3;
    }

    .newDesign-footer .language-item[data-value-action=UA],
    .newDesign-header .language-item[data-value-action=UA] {
        order: 1;
    }

        .newDesign-footer .language-item[data-value-action=UA]:before,
        .newDesign-header .language-item[data-value-action=UA]:before {
            content: "";
            position: absolute;
            right: 0;
            top: 50%;
            height: 100%;
            max-height: 12px;
            width: 1px;
            background: #767F8A;
            transform: translateY(-50%);
        }

    .newDesign-footer .language-item[data-value-action=EN],
    .newDesign-header .language-item[data-value-action=EN] {
        order: 2;
    }

.dropdown-block {
    position: absolute;
    display: none;
    min-width: 12.625rem;
    padding: 0.5rem;
    max-height: 0;
    background: #fff;
    border-radius: 0.5rem;
    border: 1px solid #DBDFE4;
    box-shadow: 0px 1.5rem 2.75rem 0 rgba(98, 98, 100, 0.3);
    z-index: 10;
    overflow: hidden;
    opacity: 0;
    font-family: "Fixel Text", "Fixel Display", "Helvetica", "Arial", sans-serif !important;
}

    .dropdown-block .dropdown-item {
        position: relative;
        display: flex;
        align-items: center;
        flex-direction: row;
        flex-wrap: nowrap;
        min-height: 2.5rem;
        padding: 0.74rem 0.5rem 0.5rem 2.5rem;
        border-radius: 0.25rem;
        color: #767F8A;
    }

        .dropdown-block .dropdown-item:hover {
            background: #f4f6f7;
            color: #000000;
        }

            .dropdown-block .dropdown-item:hover a {
                color: #000000 !important;
                text-decoration: none;
                border: none;
            }

    .dropdown-block.open {
        max-height: 20rem;
        opacity: 1;
        display: block;
    }

    .dropdown-block.dropdown-open-top {
        transform: translateY(-100%);
        margin-top: 0;
        box-shadow: 0px -0.25rem 10px rgba(0, 0, 0, 0.1);
    }

.container-page {
    position: relative;
    display: flex;
    flex-grow: 1;
    padding: 1.25rem 0 1.25rem 0;
    overflow-y: auto;
}

@media (min-width: 1624px) {
    .container-page {
        padding: 24px 0;
    }
}

@media (max-width: 992px) {
    .container-page {
        padding: 1rem 0 1rem 0;
    }
}

.wrapper-main-content {
    width: 100%;
}

.main-container {
    position: relative;
    display: flex;
    flex-grow: 1;
    padding: 1.25rem 0 1.25rem 0;
    transition: all 0.3s ease-out;
    overflow-y: auto;
}

@media (max-width: 992px) {
    .main-container {
        padding: 1rem 0 1rem 0;
    }
}

.scroll-to-top {
    display: none;
}

.main-content {
    padding: 0 0 0 1.5rem;
    flex-grow: 1;
    width: 100%;
    height: auto;
    transition: padding-left 0.4s ease-out;
    background: transparent;
    overflow: hidden;
    z-index: auto;
}

@media (max-width: 992px) {
    .main-content {
        padding: 0;
    }
}

.main-content .navigator {
    overflow: hidden;
}

.main-content .main-border-wrapper {
    border-radius: 0.75rem;
}

    .main-content .main-border-wrapper.scrollbar-active {
        position: relative;
    }

@media (min-width: 62rem) {
    .main-content .main-border-wrapper.scrollbar-active {
        max-height: calc(100vh - 112px - 40px);
        overflow-y: auto;
        scrollbar-width: thin;
        scrollbar-color: rgba(168, 173, 180, 0.5);
    }

        .main-content .main-border-wrapper.scrollbar-active::-webkit-scrollbar-track {
            background: rgba(168, 173, 180, 0.5);
            border-radius: 0.25rem;
        }

        .main-content .main-border-wrapper.scrollbar-active::-webkit-scrollbar-thumb {
            background: rgba(168, 173, 180, 0.5);
            border-radius: 0.25rem;
        }

            .main-content .main-border-wrapper.scrollbar-active::-webkit-scrollbar-thumb:hover {
                background: rgba(168, 173, 180, 0.5);
            }
}

@media (max-height: 56.25rem) {
    .main-content .main-border-wrapper.scrollbar-active {
        max-height: 100%;
    }
}

.main-content .scroll-to-top {
    position: fixed;
    justify-content: center;
    align-items: center;
    bottom: 220px;
    right: 77px;
    z-index: 1000;
}

@media (max-width: 768px) {
    .main-content .scroll-to-top {
        bottom: 229px;
        right: 50px;
    }
}

.main-content .scroll-to-top.dynamic-position-btn {
    bottom: 161px;
}

@media (max-width: 768px) {
    .main-content .scroll-to-top.dynamic-position-btn {
        bottom: 126px;
    }
}

.custom-checkbox-label {
    position: relative;
    display: inline-block;
    z-index: 1;
    cursor: pointer;
}

    .custom-checkbox-label .custom-checkbox-inp {
        position: absolute;
        opacity: 0;
        z-index: -1;
    }

        .custom-checkbox-label .custom-checkbox-inp:checked + .custom-checkbox-view::after {
            opacity: 1;
            border-radius: 0.25rem;
        }

        .custom-checkbox-label .custom-checkbox-inp:checked + .custom-checkbox-view::before {
            border-color: transparent;
        }

    .custom-checkbox-label .custom-checkbox-view {
        margin-left: 30px;
        display: block;
        height: 100%;
        width: 100%;
    }

        .custom-checkbox-label .custom-checkbox-view::after, .custom-checkbox-label .custom-checkbox-view::before {
            content: "";
            position: absolute;
            height: 1.375rem;
            width: 1.375rem;
            left: 0;
            top: 50%;
            transform: translateY(-50%);
        }

        .custom-checkbox-label .custom-checkbox-view::before {
            border-radius: 0.25rem;
            border: 1px solid #DBDFE4;
            background: white;
            transition: background 0.42s ease, border-color 0.3s ease;
        }

        .custom-checkbox-label .custom-checkbox-view::after {
            background: url("../img/newDesign/icon/ico-checkbox.svg") no-repeat center center;
            opacity: 0;
            transition: opacity 0.42s ease;
            border: 1px solid transparent;
        }

.debugUrl .custom-checkbox-label .custom-checkbox-view::after {
    background: url("/Content/themes/novapay/img/newDesign/icon/ico-checkbox.svg") no-repeat center/100%;
}

body[data-design=new] .k-window {
    border-radius: 12px !important;
}

@media (max-width: 479px) {
    body[data-design=new] .k-window {
        width: 95%;
    }
}

body[data-design=new] .k-window .k-state-hover {
    border-radius: 8px !important;
    background: #F1F2F4;
    opacity: 0.4;
    border: none;
    z-index: 1;
}

body[data-design=new] .k-window-providerBtn {
    border-radius: 12px;
}

body[data-design=new] .k-window-content {
    padding: 16px;
    border-bottom-right-radius: 12px;
    border-bottom-left-radius: 12px;
    max-height: 800px !important;
}

body[data-design=new] .k-window-title {
    left: 16px;
    font-family: "Fixel Display";
    font-size: 20px;
    font-style: normal;
    font-weight: 500;
    line-height: 24px;
}

body[data-design=new] .k-window-titlebar {
    margin-top: -33.9088px;
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
    background: white !important;
    color: #32383c !important;
    border-bottom: 1px solid #DBDFE4;
    font-family: "Fixel Display";
    font-size: 18px;
    font-style: normal;
    font-weight: 500;
    line-height: 24px;
    padding-bottom: 15px;
    padding: 18px 16px 38px 6px;
    box-sizing: border-box;
    z-index: 1;
}

body[data-design=new] .k-window-actions {
    position: absolute;
    content: "";
    height: 32px;
    width: 32px;
    top: 13px;
    right: 18px;
    padding: 0;
    cursor: pointer;
    border-radius: 8px;
    background: #F1F2F4;
}

    body[data-design=new] .k-window-actions::before, body[data-design=new] .k-window-actions::after {
        position: absolute;
        content: " ";
        height: 18px;
        width: 2px;
        top: 7px;
        right: 14px;
        background-color: #767F8A;
        z-index: 0;
    }

    body[data-design=new] .k-window-actions::before {
        transform: rotate(45deg);
    }

    body[data-design=new] .k-window-actions::after {
        transform: rotate(-45deg);
    }

body[data-design=new] .k-window-action {
    width: 28px;
    height: 28px;
    position: absolute;
    top: 0;
    right: 0;
    opacity: 0;
}

    body[data-design=new] .k-window-action .k-icon {
        display: none;
    }

body[data-design=new] #genDocConfirmWindow {
    margin-top: 30px;
}

body[data-design=new] #confirmActionParentWindow .confirmAction {
    margin-top: 5px;
    color: #32383c;
    font-size: 15px;
    font-style: normal;
    line-height: 1.5rem;
}
body[data-design=new] #confirmActionParentWindow .confirmAction br, body[data-design=new] #confirmActionParentWindow .confirmAction .clear {
  display: none;
}
body[data-design=new] #confirmActionParentWindow .confirmAction div {
  margin-bottom: 5px;
}
body[data-design=new] #confirmActionParentWindow .confirmAction .userPassword input {
  height: auto;
  padding-left: 48px;
  color: #495264;
  font-size: 0.94em;
  padding: 0.5rem 0.5rem 0.5rem 3rem;
  border-radius: 0.5rem;
  border: 1px solid #DBDFE4;
  background: #FFF;
  color: #32383c;
  font-size: 15px;
  margin-bottom: 16px;
  background-color: transparent !important;
  color: inherit !important;
  box-shadow: 0 0 0px 1000px white inset !important;
  width: 82% !important;
}
body[data-design=new] #confirmActionParentWindow .confirmAction .apply-group {
  flex-direction: row-reverse;
  display: flex;
  width: 100%;
  gap: 15px;
}
body[data-design=new] #confirmActionParentWindow .confirmAction .apply-group .action-window-ok, body[data-design=new] #confirmActionParentWindow .confirmAction .apply-group .action-window-cancel {
  width: 100%;
}
body[data-design=new] #confirmActionParentWindow .confirmAction .apply,
body[data-design=new] #confirmActionParentWindow .confirmAction .providerBtn {
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 8px;
  text-align: center;
  font-family: "Fixel Text", "Fixel Display", "Helvetica", "Arial", sans-serif;
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
  background-color: #5E1CAB;
  transition: background-color 0.42s ease-out;
  color: #FFF !important;
  width: 50%;
  margin: 0;
}
body[data-design=new] #confirmActionParentWindow .confirmAction .clean {
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 8px;
  text-align: center;
  font-family: "Fixel Text", "Fixel Display", "Helvetica", "Arial", sans-serif;
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
  color: #32383c !important;
  width: 50%;
  margin: 0;
}

body[data-design=new] .k-widget {
    box-sizing: border-box;
}

body[data-design=new] .k-window {
    width: 100%;
    max-width: 485px;
}

    body[data-design=new] .k-window .confirm-ecp__msg {
        color: #464B53;
        font-size: 1rem;
        font-style: normal;
        line-height: 20px;
    }

    body[data-design=new] .k-window .confirm-ecp__enterprise, body[data-design=new] .k-window .confirm-ecp__container, body[data-design=new] .k-window .confirm-ecp__password-wrap {
        padding-left: 0px;
        padding-right: 0px;
    }

    body[data-design=new] .k-window .confirm-ecp__text-chose {
        display: none;
    }

    body[data-design=new] .k-window .confirm-ecp__br {
        display: none;
    }

    body[data-design=new] .k-window .confirm-ecp__enterprise {
        display: flex;
        flex-direction: column;
        margin-bottom: 16px;
    }

    body[data-design=new] .k-window .confirm-ecp__form {
        display: flex;
        flex-direction: column-reverse;
    }

    body[data-design=new] .k-window .confirm-ecp__signDocsMsg {
        margin-top: 8px;
        margin-bottom: 1rem;
        font-size: 16px;
        font-style: normal;
        font-weight: 500;
        line-height: 20px;
    }

        body[data-design=new] .k-window .confirm-ecp__signDocsMsg span {
            color: #690DD3;
            font-weight: 500;
        }

    body[data-design=new] .k-window .confirm-ecp__select-enterprise {
        width: 100%;
        padding-left: 0;
    }

        body[data-design=new] .k-window .confirm-ecp__select-enterprise .k-dropdown-wrap {
            border-radius: 8px !important;
            border: 1px solid #DBDFE4;
            background: #FFF;
            display: flex;
            align-items: center;
            padding: 8px 35px 8px 12px;
            height: 40px;
            overflow: hidden;
            color: #32383c;
            font-feature-settings: "case" on;
            text-overflow: ellipsis;
            font-family: "Fixel Text", "Fixel Display", "Helvetica", "Arial", sans-serif;
            font-size: 15px;
            font-style: normal;
            font-weight: 400;
            line-height: 24px;
            box-sizing: border-box;
        }

        body[data-design=new] .k-window .confirm-ecp__select-enterprise .k-dropdown {
            border: 1px solid transparent !important;
            border-radius: 8px !important;
        }

            body[data-design=new] .k-window .confirm-ecp__select-enterprise .k-dropdown:focus, body[data-design=new] .k-window .confirm-ecp__select-enterprise .k-dropdown:hover {
                border: 1px solid #690DD3 !important;
            }

        body[data-design=new] .k-window .confirm-ecp__select-enterprise .k-list > .k-state-selected.k-state-focused {
            -webkit-box-shadow: none;
            box-shadow: none;
            overflow: hidden;
            color: #32383c !important;
            text-overflow: ellipsis;
            font-family: "Fixel Text", "Fixel Display", "Helvetica", "Arial", sans-serif;
            font-size: 14px;
            font-style: normal;
            font-weight: 500;
            line-height: 18px;
            border-bottom: 1px solid #DBDFE4;
            background: #f4f6f7 !important;
        }

        body[data-design=new] .k-window .confirm-ecp__select-enterprise .k-animation-container {
            max-width: 400px !important;
            width: 90%;
        }

@media (max-width: 470px) {
    body[data-design=new] .k-window .confirm-ecp__select-enterprise .k-animation-container {
        width: 89% !important;
    }
}

body[data-design=new] .k-window .confirm-ecp__select-enterprise .k-animation-container .k-list-container {
    width: 99% !important;
}

@media (max-width: 470px) {
    body[data-design=new] .k-window .confirm-ecp__select-enterprise .k-animation-container .k-list-container {
        width: 100% !important;
    }
}

body[data-design=new] .k-window .confirm-ecp__select-enterprise .k-icon {
    transition: transform 0.3s ease;
    pointer-events: none;
    margin-top: 7px;
    background: url("../img/newDesign/icon/arrow_down_small.svg") no-repeat center !important;
}

.debugUrl body[data-design=new] .k-window .confirm-ecp__select-enterprise .k-icon {
    background: url("/Content/themes/novapay/img/newDesign/icon/arrow_down_small.svg") no-repeat center !important;
}

body[data-design=new] .k-window .confirm-ecp__select-enterprise .k-icon {
    transform-origin: center;
}

    body[data-design=new] .k-window .confirm-ecp__select-enterprise .k-icon:hover {
        transform: rotate(180deg);
    }

body[data-design=new] .k-window .confirm-ecp__select-enterprise .k-select:focus,
body[data-design=new] .k-window .confirm-ecp__select-enterprise .k-select:hover + .k-icon {
    transform: translateY(-50%) rotate(180deg);
    fill: #007bff;
}

body[data-design=new] .k-window .confirm-ecp__validation-text {
    margin-top: 16px;
}

body[data-design=new] .k-window .confirm-ecp__type-wrap {
    min-width: 100%;
    display: flex;
    padding: 4px;
    gap: 4px;
    flex-direction: row;
    border-radius: 8px;
    border: 1px solid #DBDFE4;
    background: #FFF;
    margin-bottom: 24px;
    box-sizing: border-box;
}

body[data-design=new] .k-window .confirm-ecp__container {
    width: 100%;
    flex-wrap: wrap;
}

body[data-design=new] .k-window .confirm-ecp__type-ecp {
    display: flex;
    flex-direction: column;
}

body[data-design=new] .k-window .confirm-ecp__btn {
    padding: 5px;
    width: 50%;
    border-radius: 8px;
    background: #FFF;
    color: #767F8A;
    font-family: "Fixel Text", "Fixel Display", "Helvetica", "Arial", sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: 20px;
    border: none;
    text-transform: capitalize;
}

    body[data-design=new] .k-window .confirm-ecp__btn:hover {
        border: 1px solid #DBDFE4 !important;
        background: #F5EDFF !important;
        color: #690DD3 !important;
        border-radius: 4px !important;
        text-transform: capitalize !important;
    }

@media (max-width: 600px) {
    body[data-design=new] .k-window .confirm-ecp__btn {
        font-size: 16px !important;
    }
}

body[data-design=new] .k-window .confirm-ecp__password-wrap {
    display: flex;
    flex-direction: column;
    margin-top: 24px;
    margin-bottom: -12px;
}

    body[data-design=new] .k-window .confirm-ecp__password-wrap .icon {
        position: relative !important;
        left: 0px;
        top: 10px !important;
    }

body[data-design=new] .k-window .confirm-ecp__password-block {
    width: 100%;
    margin-top: 0 !important;
    padding-left: 0;
    margin-bottom: 24px;
}

body[data-design=new] .k-window .confirm-ecp__lable-text {
    display: block !important;
    text-align: start;
    margin-bottom: 8px;
    color: #767F8A;
    font-family: "Fixel Text", "Fixel Display", "Helvetica", "Arial", sans-serif;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.2;
}

body[data-design=new] .k-window .confirm-ecp__action-btns {
    display: none;
}

body[data-design=new] .k-window .confirm-ecp__description {
    margin-top: 8px;
    color: #767F8A;
    font-family: "Fixel Text", "Fixel Display", "Helvetica", "Arial", sans-serif;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 16px;
}

body[data-design=new] .k-window .confirm-ecp__token-descriotion {
    display: block !important;
}

body[data-design=new] .k-window .confirm-ecp__fake-field {
    display: block !important;
    width: 47%;
    border-radius: 8px;
    border: 1px solid #DBDFE4;
    background: #f4f6f7;
    height: 35.5px;
    margin-bottom: -37.5px;
}

body[data-design=new] .k-window .confirm-ecp__form-control {
    height: 40px !important;
    padding: 8px 12px !important;
    width: 100% !important;
    font-size: 15px !important;
    color: #32383c !important;
    max-width: 100% !important;
    box-sizing: border-box;
    border-radius: 8px;
    border: 1px solid #DBDFE4;
}

    body[data-design=new] .k-window .confirm-ecp__form-control:focus {
        outline: none;
    }

body[data-design=new] .k-window .confirm-ecp__buttons-wrap {
    display: flex;
    flex-direction: column;
    width: 100%;
    gap: 12px;
    margin-top: 6px;
}

body[data-design=new] .k-window .confirm-ecp__buttons {
    display: flex;
    flex-direction: row-reverse;
    width: 100%;
    gap: 12px;
    margin-top: 6px;
}

body[data-design=new] .k-window .confirm-ecp__buttons-ok, body[data-design=new] .k-window .confirm-ecp__buttons-clean {
    height: 40px;
    padding: 0px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 8px;
    text-align: center;
    font-weight: 500;
    cursor: pointer;
    width: 50%;
    margin: 0;
}

    body[data-design=new] .k-window .confirm-ecp__buttons-ok p, body[data-design=new] .k-window .confirm-ecp__buttons-clean p {
        text-transform: capitalize;
        font-size: 15px;
        width: 100%;
        height: 34px;
    }

body[data-design=new] .k-window .confirm-ecp__buttons-ok {
    background-color: #5E1CAB;
    transition: background-color 0.42s ease-out;
    color: #FFF !important;
}

body[data-design=new] .k-window .confirm-ecp__buttons-ok-long {
    width: 100%;
}

    body[data-design=new] .k-window .confirm-ecp__buttons-ok-long p {
        text-transform: capitalize;
        font-size: 15px;
    }

body[data-design=new] .k-window .confirm-ecp__buttons-clean {
    background-color: #FFF;
    border-radius: 8px;
    border: 1px solid #DBDFE4;
}

    body[data-design=new] .k-window .confirm-ecp__buttons-clean:hover, body[data-design=new] .k-window .confirm-ecp__buttons-clean:active {
        color: black;
    }

body[data-design=new] .k-window .confirm-ecp__emptyname-checkbox {
    padding: 0;
    color: #32383c;
    font-size: 15px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px;
    margin-top: 5px;
    width: 100%;
}

@media (max-width: 450px) {
    body[data-design=new] .k-window .confirm-ecp__emptyname-checkbox {
        width: 92%;
    }
}

body[data-design=new] .k-window .confirm-ecp__icon-password {
    display: none;
}

body[data-design=new] .k-window .confirm-ecp__accordion-icon-wrap i {
    display: block;
    width: 20px;
    height: 20px;
    transition: 0.5s;
}

body[data-design=new] .k-window .confirm-ecp__accordion .accordion-header {
    display: flex;
    justify-content: space-between;
}

body[data-design=new] .k-window .confirm-ecp__accordion .accordion-item {
    border-radius: 8px;
    border: 1px solid #DBDFE4;
    padding: 12px 16px;
    margin-bottom: 12px;
}

@media (max-width: 400px) {
    body[data-design=new] .k-window .confirm-ecp__accordion .accordion-item {
        padding: 12px 7px;
    }
}

body[data-design=new] .k-window .confirm-ecp__accordion .accordion-item.filled {
    border: 1px solid #5E1CAB;
}

body[data-design=new] .k-window .confirm-ecp__accordion .accordion-item .confirm-ecp__signDocsMsg {
    margin: 0px;
}

body[data-design=new] .k-window .confirm-ecp__accordion .accordion-item .k-file {
    font-size: 14px;
    padding: 7px 12px;
}

body[data-design=new] .k-window .confirm-ecp__accordion .accordion-item .smallNotice {
    margin: 0;
}

body[data-design=new] .k-window .confirm-ecp__accordion .open {
    padding: 12px 16px 24px 16px;
}

    body[data-design=new] .k-window .confirm-ecp__accordion .open .confirm-ecp__signDocsMsg {
        margin-bottom: 16px;
    }

    body[data-design=new] .k-window .confirm-ecp__accordion .open i {
        transform: rotate(180deg);
        transition: 0.5s;
    }

@media (max-width: 400px) {
    body[data-design=new] .k-window .confirm-ecp__accordion .open {
        padding: 12px 7px;
    }
}

body[data-design=new] .k-window .confirm-ecp__file-block {
    width: 100%;
    padding-left: 0;
}

    body[data-design=new] .k-window .confirm-ecp__file-block .k-upload {
        display: flex;
        flex-direction: row-reverse;
        gap: 16px;
        background: none;
        border: none;
        height: 37.5px;
        margin-bottom: -1px;
    }

    body[data-design=new] .k-window .confirm-ecp__file-block .k-upload-button {
        border-radius: 8px !important;
        border: 1px solid #DBDFE4;
        display: flex;
        padding: 8px 16px;
        justify-content: center;
        align-items: center;
        width: 48.5%;
        color: #202427;
        font-feature-settings: "case" on;
        font-family: "Fixel Text", "Fixel Display", "Helvetica", "Arial", sans-serif;
        font-size: 15px;
        font-style: normal;
        font-weight: 600;
        line-height: 18px;
        max-height: 40px;
    }

@media (max-width: 450px) {
    body[data-design=new] .k-window .confirm-ecp__file-block .k-upload-button {
        font-size: 13px;
    }
}

body[data-design=new] .k-window .confirm-ecp__file-block .k-upload-button::before {
    position: relative;
    content: "";
    width: 20px;
    height: 20px;
    left: -8px;
    background: url("../img/newDesign/icon/arrow-down.svg") no-repeat;
}

.debugUrl body[data-design=new] .k-window .confirm-ecp__file-block .k-upload-button::before {
    background: url("/Content/themes/novapay/img/newDesign/icon/arrow-down.svg") no-repeat;
}

body[data-design=new] .k-window .confirm-ecp__file-block .k-upload-files {
    display: flex;
    flex-direction: column;
    line-height: normal;
    border-width: 0;
    gap: 5px;
    width: 48%;
}

body[data-design=new] .k-window .confirm-ecp__file-block .k-file {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 5px 12px;
    border-radius: 8px;
    border: 1px solid #DBDFE4;
    background: #f4f6f7;
    font-family: "Fixel Text", "Fixel Display", "Helvetica", "Arial", sans-serif;
    font-size: 15px;
    font-style: normal;
    font-weight: 400;
    top: -1px;
}

    body[data-design=new] .k-window .confirm-ecp__file-block .k-file .k-filename {
        padding-bottom: 0;
        margin-left: 0;
    }

body[data-design=new] .k-window .confirm-ecp__file-block .k-i-exe {
    display: none;
}

body[data-design=new] .k-window .k-widget.k-dropdown[aria-expanded=false] .k-icon.k-i-arrow-s {
    transform: rotate(180deg);
    transition: transform 0.3s;
}

body[data-design=new] .k-window .k-animation-container .k-list-container {
    max-width: 100% !important;
}

@media (max-width: 991px) {
    body[data-design=new] .k-window body .tablet .k-animation-container {
        max-width: 100% !important;
        width: 100%;
    }
}

body[data-design=new] .k-window .selected {
    border: 1px solid #DBDFE4 !important;
    border-radius: 4px !important;
    background: #F5EDFF !important;
    color: #690DD3 !important;
    text-transform: capitalize !important;
}

body[data-design=new] .k-window div ::-webkit-scrollbar-track {
    background: #e8ecef;
    -webkit-border-radius: 10px;
    border-radius: 10px;
}

body[data-design=new] .k-window div ::-webkit-scrollbar-thumb {
    -webkit-border-radius: 10px;
    border-radius: 10px;
    background: #A8ADB4;
}

    body[data-design=new] .k-window div ::-webkit-scrollbar-thumb:window-inactive {
        background: #A8ADB4;
    }

body[data-design=new] .k-window .options-subtitle {
    color: #767F8A;
    font-family: "Fixel Text", "Fixel Display", "Helvetica", "Arial", sans-serif;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 16px;
}

body[data-design=new] .k-window .options-title {
    color: #32383c;
    text-overflow: ellipsis;
    font-family: "Fixel Text", "Fixel Display", "Helvetica", "Arial", sans-serif;
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: 18px;
}

@media (max-width: 500px) {
    body[data-design=new] .k-window .k-filename {
        min-width: 120px;
    }
}

body[data-design=new] #certificateFromStoreWindow {
    margin-top: 37px;
}

html.blocked #confirmLoader.outerLoader {
    z-index: 10000;
}

html.blocked #loderOverlayPic {
    display: none;
}

.status-label {
    font-size: 14px;
}

.status-label__important {
    color: #EB4235;
}

.spinner-container {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    z-index: 1000;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.6);
    backdrop-filter: blur(4px);
}

    .spinner-container .spinner:before {
        content: "";
        display: block;
        width: 50px;
        height: 50px;
        background: url("../img/newDesign/spinner-loading.png") no-repeat center;
        animation: rotate 1s linear infinite;
        transform: translate(-50%, -50%);
    }

.debugUrl .spinner-container .spinner:before {
    background: url("/Content/themes/novapay/img/newDesign/spinner-loading.png") no-repeat center;
}

.spinner-container .loading-content-info {
    padding: 1rem;
    font-size: 1rem;
    color: #464B53;
    line-height: 1.25rem;
}

.p-component .custom-loader-container {
    position: absolute;
}

.p-autocomplete-overlay .spinner-container .spinner:before {
    width: 25px;
    height: 25px;
    border-radius: 50%;
}

.p-autocomplete-list-container {
    min-width: 12.625rem;
    max-height: 0;
    background: #fff;
    border-radius: 0.5rem;
    border: 1px solid #DBDFE4;
    box-shadow: 0px 24px 44px 0px rgba(98, 98, 100, 0.3);
    z-index: 10;
    overflow: hidden;
    font-family: "Fixel Text", "Fixel Display", "Helvetica", "Arial", sans-serif !important;
}

    .p-autocomplete-list-container .p-autocomplete-list {
        position: relative;
        display: flex;
        align-items: flex-start;
        flex-wrap: nowrap;
        min-height: 2.5rem;
        padding: 0;
        border-radius: 4px;
        color: #767F8A;
    }

    .p-autocomplete-list-container .p-autocomplete-option {
        padding: 0.5rem 0.75rem;
        width: 100%;
    }

        .p-autocomplete-list-container .p-autocomplete-option:hover {
            background: #f4f6f7 !important;
            color: #000000 !important;
        }

    .p-autocomplete-list-container .p-autocomplete-empty-message {
        padding: 0.5rem 0.75rem;
    }

[v-cloak] {
    display: none !important;
}

.header * {
    box-sizing: border-box;
}

.header.new-header {
    display: flex;
    padding: 0.532rem 0;
    height: auto;
    max-height: 3.5rem;
    border-bottom: 1px solid #EDEFF1 !important;
    background-color: #fff;
    z-index: 4;
    font-family: "Fixel Text", "Fixel Display", "Helvetica", "Arial", sans-serif !important;
}

.header .header-row {
    display: flex;
    width: 100%;
    justify-content: space-between;
    align-items: center;
}

.header .header-logo__img {
    width: 8.6rem !important;
    height: 2.25rem;
    float: none;
    background-position: center !important;
}

.header .header-right {
    display: flex;
    align-items: center;
}

    .header .header-right .header-nav {
        display: flex;
        list-style: none;
        margin: 0;
        padding: 0;
    }

    .header .header-right .header-nav__item {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-left: 1.5rem;
        padding: 6px 6px 6px 1.5rem;
        background: transparent;
        border-radius: 0.688rem;
        font-family: "Fixel Text", "Fixel Display", "Helvetica", "Arial", sans-serif !important;
    }

        .header .header-right .header-nav__item .submenu-item__exit,
        .header .header-right .header-nav__item .submenu-item__old-version {
            padding: 0.5rem 0.5rem 0.5rem 2.5rem;
            height: 2.5rem;
        }

        .header .header-right .header-nav__item:not(:last-of-type) {
            margin-left: 0.5rem;
            padding-left: 6px;
        }

@media (max-width: 992px) {
    .header .header-right .header-nav__item:not(:last-of-type) {
        margin-left: 6px;
    }
}

.header .header-right .header-nav__item:hover {
    background: #f4f6f7;
}

.header .header-right .header-nav__language {
    display: none;
}

@media (max-width: 992px) {
    .header .header-right .header-nav__language.auth-language {
        margin-left: 0.75rem;
        padding-left: 1rem;
        padding-right: 0;
    }
}

@media (max-width: 992px) {
    .header .header-right .header-nav__language {
        display: flex;
    }
}

.header .header-right .header-nav__language:hover {
    background: transparent;
}

.header .header-right .header-nav__support-service .help-dropdown {
    position: absolute;
    display: flex;
    top: -20.063rem;
    transition: max-height 0.12s ease-out, opacity 0.12s ease-out;
}

.header .header-right .header-nav__support-service .help-dropdown__item .ico-n {
    position: absolute;
    top: 50%;
    left: 0.5rem;
    transform: translateY(-50%);
}

.header .header-right .header-nav__support-service .help-dropdown__item-text {
    font-size: 12px;
    font-weight: 400;
    min-width: 181px;
}

.header .header-right .header-nav__support-service .help-dropdown__item:hover .icon-telegram {
    display: inline-block;
    width: 24px;
    height: 24px;
    background-color: currentColor;
    background-image: none;
    mask-image: url("../img/sprite.svg#icon-Telegram-hover");
}

.debugUrl .header .header-right .header-nav__support-service .help-dropdown__item:hover .icon-telegram {
    mask-image: url("/Content/themes/novapay/img/sprite.svg#icon-Telegram-hover");
}

.header .header-right .header-nav__support-service .help-dropdown__item:hover .icon-telegram {
    mask-repeat: no-repeat;
    mask-size: contain;
}

.header .header-right .header-nav__support-service .help-dropdown__item:hover .icon-phone {
    display: inline-block;
    width: 24px;
    height: 24px;
    background-color: currentColor;
    background-image: none;
    mask-image: url("../img/sprite.svg#icon-phone-hover");
}

.debugUrl .header .header-right .header-nav__support-service .help-dropdown__item:hover .icon-phone {
    mask-image: url("/Content/themes/novapay/img/sprite.svg#icon-phone-hover");
}

.header .header-right .header-nav__support-service .help-dropdown__item:hover .icon-phone {
    mask-repeat: no-repeat;
    mask-size: contain;
}

.header .header-right .header-nav__support-service .help-dropdown.open {
    top: 3.063rem;
    transition: max-height 0.42s ease-in-out, opacity 0.42s ease-in-out;
}

.header .header-right .header-nav__support-service .help-dropdown__right-position {
    right: 0;
}

.header .header-right .header-nav__support-call {
    position: relative;
    height: 25px;
    width: 30px;
}

    .header .header-right .header-nav__support-call .icon-call {
        position: absolute;
        top: -3px;
        left: 0;
    }

    .header .header-right .header-nav__support-call:hover .icon-call, .header .header-right .header-nav__support-call:active .icon-call {
        background-color: #690DD3 !important;
        display: inline-block;
        width: 32px;
        height: 32px;
        background-color: currentColor;
        background-image: none;
        mask-image: url("../img/sprite.svg#support-service-hover");
    }

.debugUrl .header .header-right .header-nav__support-call:hover .icon-call, .debugUrl .header .header-right .header-nav__support-call:active .icon-call {
    mask-image: url("/Content/themes/novapay/img/sprite.svg#support-service-hover");
}

.header .header-right .header-nav__support-call:hover .icon-call, .header .header-right .header-nav__support-call:active .icon-call {
    mask-repeat: no-repeat;
    mask-size: contain;
}

.header .header-right .header-nav__toggle-mobileNav {
    display: none;
}

    .header .header-right .header-nav__toggle-mobileNav .btn-mobile-navToggle {
        padding: 1px 0 0 0;
    }

@media (max-width: 992px) {
    .header .header-right .header-nav__toggle-mobileNav {
        display: flex;
        max-width: 2.5rem;
    }
}

.header .header-right .header-nav__contacts {
    position: relative;
    margin-left: 0;
}

    .header .header-right .header-nav__contacts:hover {
        background: transparent;
    }

    .header .header-right .header-nav__contacts .btn-username {
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 0 2rem 0 2.375rem;
        font-weight: 500;
        color: #32383c;
    }

        .header .header-right .header-nav__contacts .btn-username:after {
            content: "";
            position: absolute;
            left: 0;
            height: 30px;
            width: 30px;
            border-radius: 50%;
            background-color: #EDEFF1;
        }

        .header .header-right .header-nav__contacts .btn-username .icon-person {
            position: absolute;
            top: -6px;
            left: 6px;
            height: 30px;
            width: 30px;
            border-radius: 50%;
            z-index: 1;
        }

        .header .header-right .header-nav__contacts .btn-username .icon-triangle {
            position: absolute;
            right: 0;
            height: 20px;
            width: 20px;
            background-position: center;
            transform: rotate(180deg);
            transition: transform 0.12s ease-out;
            color: #767F8A;
        }

        .header .header-right .header-nav__contacts .btn-username span {
            max-width: 6.25rem;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            text-align: left;
            font-size: 14px;
        }

        .header .header-right .header-nav__contacts .btn-username.open .icon-triangle {
            background-position: top;
            transform: rotate(0deg);
            transition: transform 0.42s ease-out;
        }

.header .header-right .header-nav__dropdown {
    display: flex;
    top: -20.063rem;
    transition: max-height 0.12s ease-out, opacity 0.12s ease-out;
    overflow: hidden;
}

    .header .header-right .header-nav__dropdown.open {
        top: 3.063rem;
        transition: max-height 0.42s ease-in-out, opacity 0.42s ease-in-out;
    }

.header .header-right .header-nav__submenu {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.header .header-right .header-nav__submenu-item a {
    color: #767F8A;
}

.header .header-right .header-nav__submenu-item:not(:last-of-type) {
    margin-bottom: 4px;
}

.header .header-right .header-nav__submenu-item .ico-n {
    position: absolute;
    top: 50%;
    left: 0.5rem;
    transform: translateY(-50%);
}

.header .header-right .header-nav__submenu-item:hover .ico-n.icon-user {
    display: inline-block;
    width: 24px;
    height: 24px;
    background-color: currentColor;
    background-image: none;
    mask-image: url("../img/sprite.svg#icon-user-hover");
}

.debugUrl .header .header-right .header-nav__submenu-item:hover .ico-n.icon-user {
    mask-image: url("/Content/themes/novapay/img/sprite.svg#icon-user-hover");
}

.header .header-right .header-nav__submenu-item:hover .ico-n.icon-user {
    mask-repeat: no-repeat;
    mask-size: contain;
}

.header .header-right .header-nav__submenu-item.submenu-item__old-version {
    background-color: #F5EDFF;
    color: #5E1CAB;
}

    .header .header-right .header-nav__submenu-item.submenu-item__old-version .btn-back__old {
        padding: 0;
        font-weight: 500;
        text-align: left;
        font-size: 14px;
        color: #5E1CAB;
    }

    .header .header-right .header-nav__submenu-item.submenu-item__old-version:hover {
        background-color: rgb(84.9673202614%, 72.9411764706%, 100%);
    }

.header .header-right .header-nav__submenu-item.submenu-item__exit {
    background-color: #FFEEE2;
}

    .header .header-right .header-nav__submenu-item.submenu-item__exit a {
        color: #DE4420 !important;
    }

    .header .header-right .header-nav__submenu-item.submenu-item__exit:hover {
        background-clip: rgb(100%, 81.6091954023%, 68.6274509804%);
    }

        .header .header-right .header-nav__submenu-item.submenu-item__exit:hover a {
            color: #DE4420 !important;
        }

.header .header-right .header-nav__message-activeMessage {
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: 2px;
    width: 36px;
    height: 26px;
}

    .header .header-right .header-nav__message-activeMessage .message-count {
        position: absolute;
        top: -3px;
        right: -3px;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 0.875rem;
        height: 0.875rem;
        margin-left: 0;
        line-height: 1;
        background: #690DD3;
        border-radius: 50%;
        font-size: 0.688rem;
    }

.header-nav .new-timer {
    margin-left: 1rem;
    padding-left: 0px;
}

    .header-nav .new-timer:before {
        content: "";
        position: absolute;
        left: -8px;
        top: 0;
        height: 100%;
        width: 1px;
        background: #DBDFE4;
    }

    .header-nav .new-timer .timeInfo {
        position: relative;
        border: none;
        width: auto;
    }

        .header-nav .new-timer .timeInfo .timerDate {
            display: none;
        }

        .header-nav .new-timer .timeInfo .timerTime {
            border-left: none;
            width: auto;
        }

@media (max-width: 700px) {
    .header-nav .new-timer .timeInfo .timerTime {
        margin-right: 0 !important;
    }
}

.header-nav .new-timer .timeInfo .timerTime .time {
    margin: 0;
}

    .header-nav .new-timer .timeInfo .timerTime .time .icon {
        background-position: -77px -496px;
        margin: 0px 5px -1px 5px;
    }

    .header-nav .new-timer .timeInfo .timerTime .time:hover {
        background: #F4F6F7;
    }

.new-timer:hover .timeInfo .time {
    background: #F4F6F7;
}

@media (max-width: 991px) {
    .header-nav .new-timer__desktop {
        position: absolute !important;
        right: 112px;
        top: 13px;
    }

        .header-nav .new-timer__desktop::before {
            content: none;
        }
}

.footer * {
    box-sizing: border-box;
}

.footer.newDesign-footer {
    position: relative;
    display: flex;
    padding: 0.94rem 0;
    height: auto;
    border-top: 1px solid #EDEFF1 !important;
    background-color: #fff;
    color: #767F8A;
    box-sizing: border-box;
}

@media (max-width: 992px) {
    .footer.newDesign-footer {
        padding: 0.74rem 0;
    }
}

.footer .footer-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.footer .footer-left .copy {
    display: block;
    margin: 0;
    font-size: 12px;
}

.footer .footer-left-subtitle {
    font-size: 12px;
}

@media (max-width: 479px) {
    .footer .footer-left-subtitle {
        max-width: 270px;
    }
}

.footer .footer-nav {
    position: relative;
}

.footer .footer-nav__info {
    display: none;
    justify-content: center;
    align-items: center;
    height: 2rem;
    width: 2rem;
    background-color: #DBDFE4;
    border-radius: 0.75rem;
    border-color: transparent;
}

    .footer .footer-nav__info .icon-info {
        color: #767F8A;
    }

    .footer .footer-nav__info:hover .icon-info {
        color: #690DD3;
    }

    .footer .footer-nav__info__disabled, .footer .footer-nav__info:disabled {
        pointer-events: none;
        cursor: not-allowed;
        opacity: 0.5;
    }

    .footer .footer-nav__info:focus {
        outline: none;
        transition: all 0.42s ease-out;
    }

    .footer .footer-nav__info:focus-visible {
        outline: none;
        border: none;
    }

@media (max-width: 992px) {
    .footer .footer-nav__info {
        display: flex;
        padding: 0;
    }
}

@media (max-width: 992px) {
    .footer .footer-nav__item {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
    }

        .footer .footer-nav__item:not(:last-of-type):before {
            content: "";
            position: absolute;
            bottom: 0;
            width: 100%;
            height: 1px;
            background: #EDEFF1;
        }

        .footer .footer-nav__item.footer-nav__language:before, .footer .footer-nav__item.footer-nav__safety:before {
            display: none;
        }
}

@media (max-width: 992px) {
    .footer .footer-nav__item .footer-link {
        width: 100%;
        padding: 0.5rem 0;
    }
}

@media (max-width: 992px) {
    .footer .footer-nav__language {
        display: none;
    }
}

.footer .footer-nav__language .language-list__wrapper:before {
    display: none;
}

.footer .footer-links {
    display: flex;
    align-items: center;
    gap: 2rem;
    margin: 0;
    padding: 0;
    text-decoration: none;
    color: #767F8A;
    font-size: 14px;
    line-height: 1.2;
    list-style: none;
}

@media (max-width: 992px) {
    .footer .footer-links {
        display: none;
        position: absolute;
        bottom: 3rem;
        right: 0;
        flex-direction: column;
        align-items: start;
        gap: 0;
        padding: 2px 0.75rem;
        min-width: 11.6rem;
        background-color: #fff;
        border-radius: 0.5rem;
        box-shadow: 0px 24px 44px 0px rgba(98, 98, 100, 0.3);
    }
}

.footer .footer-links .footer-link:hover {
    color: #690DD3 !important;
}

.footer .footer-language {
    margin-left: 1rem;
}

@media (max-width: 992px) {
    .footer .footer-language {
        display: none;
    }
}

.footer .language-switch {
    text-decoration: none;
    color: #767F8A;
}

    .footer .language-switch.active {
        color: #690DD3;
    }

.ico-n {
    display: inline-block;
    width: 24px;
    height: 24px;
    line-height: 1;
    vertical-align: middle;
    color: inherit;
    fill: currentColor;
}

body[data-design=new] .icon-menu-accounts {
    top: 0.5rem !important;
    display: inline-block;
    width: 24px;
    height: 24px;
    background-color: currentColor;
    background-image: none;
    mask-image: url("../img/sprite.svg#icon-menu-wallet");
}

.debugUrl body[data-design=new] .icon-menu-accounts {
    mask-image: url("/Content/themes/novapay/img/sprite.svg#icon-menu-wallet");
}

body[data-design=new] .icon-menu-accounts {
    mask-repeat: no-repeat;
    mask-size: contain;
}

body[data-design=new] .icon-menu-help {
    left: 0.25rem !important;
    top: 0.25rem !important;
    display: inline-block;
    width: 32px;
    height: 32px;
    background-color: currentColor;
    background-image: none;
    mask-image: url("../img/sprite.svg#help");
}

.debugUrl body[data-design=new] .icon-menu-help {
    mask-image: url("/Content/themes/novapay/img/sprite.svg#help");
}

body[data-design=new] .icon-menu-help {
    mask-repeat: no-repeat;
    mask-size: contain;
}

.icon-menu-deposits {
    top: 8px !important;
    display: inline-block;
    width: 32px;
    height: 32px;
    background-color: currentColor;
    background-image: none;
    mask-image: url("../img/sprite.svg#icon-menu-case");
}

.debugUrl .icon-menu-deposits {
    mask-image: url("/Content/themes/novapay/img/sprite.svg#icon-menu-case");
}

.icon-menu-deposits {
    mask-repeat: no-repeat;
    mask-size: contain;
}

body[data-design=new] .activeMenuTab .icon-menu-help {
    display: inline-block;
    width: 32px;
    height: 32px;
    background-color: currentColor;
    background-image: none;
    mask-image: url("../img/sprite.svg#help-selected");
}

.debugUrl body[data-design=new] .activeMenuTab .icon-menu-help {
    mask-image: url("/Content/themes/novapay/img/sprite.svg#help-selected");
}

body[data-design=new] .activeMenuTab .icon-menu-help {
    mask-repeat: no-repeat;
    mask-size: contain;
}

body[data-design=new] .icon-menu-home {
    top: 50% !important;
    transform: translateY(-50%);
    display: inline-block;
    width: 24px;
    height: 24px;
    background-color: currentColor;
    background-image: none;
    mask-image: url("../img/sprite.svg#icon-menu-home");
}

.debugUrl body[data-design=new] .icon-menu-home {
    mask-image: url("/Content/themes/novapay/img/sprite.svg#icon-menu-home");
}

body[data-design=new] .icon-menu-home {
    mask-repeat: no-repeat;
    mask-size: contain;
}

body[data-design=new] .activeMenuTab .icon-menu-home {
    display: inline-block;
    width: 24px;
    height: 24px;
    background-color: currentColor;
    background-image: none;
    mask-image: url("../img/sprite.svg#icon-menu-home-hove");
}

.debugUrl body[data-design=new] .activeMenuTab .icon-menu-home {
    mask-image: url("/Content/themes/novapay/img/sprite.svg#icon-menu-home-hove");
}

body[data-design=new] .activeMenuTab .icon-menu-home {
    mask-repeat: no-repeat;
    mask-size: contain;
}

body[data-design=new] .icon-menu-payments {
    top: 8px !important;
    display: inline-block;
    width: 24px;
    height: 24px;
    background-color: currentColor;
    background-image: none;
    mask-image: url("../img/sprite.svg#icon-menu-payments");
}

.debugUrl body[data-design=new] .icon-menu-payments {
    mask-image: url("/Content/themes/novapay/img/sprite.svg#icon-menu-payments");
}

body[data-design=new] .icon-menu-payments {
    mask-repeat: no-repeat;
    mask-size: contain;
}

body[data-design=new] .icon-menu-postpaidStatements {
    display: inline-block;
    width: 24px;
    height: 24px;
    background-color: currentColor;
    background-image: none;
    mask-image: url("../img/sprite.svg#icon-menu-postpaidStatements");
}

.debugUrl body[data-design=new] .icon-menu-postpaidStatements {
    mask-image: url("/Content/themes/novapay/img/sprite.svg#icon-menu-postpaidStatements");
}

body[data-design=new] .icon-menu-postpaidStatements {
    mask-repeat: no-repeat;
    mask-size: contain;
}

body[data-design=new] .activeMenuTab .icon-menu-payments {
    display: inline-block;
    width: 24px;
    height: 24px;
    background-color: currentColor;
    background-image: none;
    mask-image: url("../img/sprite.svg#icon-menu-payments-hover");
}

.debugUrl body[data-design=new] .activeMenuTab .icon-menu-payments {
    mask-image: url("/Content/themes/novapay/img/sprite.svg#icon-menu-payments-hover");
}

body[data-design=new] .activeMenuTab .icon-menu-payments {
    mask-repeat: no-repeat;
    mask-size: contain;
}

body[data-design=new] .activeMenuTab .icon-menu-visa {
    display: inline-block;
    width: 24px;
    height: 24px;
    background-color: currentColor;
    background-image: none;
    mask-image: url("../img/sprite.svg#icon-menu-visa");
}

.debugUrl body[data-design=new] .activeMenuTab .icon-menu-visa {
    mask-image: url("/Content/themes/novapay/img/sprite.svg#icon-menu-visa");
}

body[data-design=new] .activeMenuTab .icon-menu-visa {
    mask-repeat: no-repeat;
    mask-size: contain;
}

body[data-design=new] .icon-menu-cards {
    top: 6px !important;
    display: inline-block;
    width: 24px;
    height: 24px;
    background-color: currentColor;
    background-image: none;
    mask-image: url("../img/sprite.svg#icon-menu-cards");
}

.debugUrl body[data-design=new] .icon-menu-cards {
    mask-image: url("/Content/themes/novapay/img/sprite.svg#icon-menu-cards");
}

body[data-design=new] .icon-menu-cards {
    mask-repeat: no-repeat;
    mask-size: contain;
}

body[data-design=new] .activeMenuTab .icon-menu-cards {
    display: inline-block;
    width: 24px;
    height: 24px;
    background-color: currentColor;
    background-image: none;
    mask-image: url("../img/sprite.svg#icon-menu-cards-hover");
}

.debugUrl body[data-design=new] .activeMenuTab .icon-menu-cards {
    mask-image: url("/Content/themes/novapay/img/sprite.svg#icon-menu-cards-hover");
}

body[data-design=new] .activeMenuTab .icon-menu-cards {
    mask-repeat: no-repeat;
    mask-size: contain;
}

body[data-design=new] .icon-menu-mail {
    top: 0.5rem !important;
    display: inline-block;
    width: 24px;
    height: 24px;
    background-color: currentColor;
    background-image: none;
    mask-image: url("../img/sprite.svg#icon-menu-mail");
}

.debugUrl body[data-design=new] .icon-menu-mail {
    mask-image: url("/Content/themes/novapay/img/sprite.svg#icon-menu-mail");
}

body[data-design=new] .icon-menu-mail {
    mask-repeat: no-repeat;
    mask-size: contain;
}

.icon-small-up {
    display: inline-block;
    width: 16px;
    height: 16px;
    background-color: currentColor;
    background-image: none;
    mask-image: url("../img/sprite.svg#icon-small-up");
}

.debugUrl .icon-small-up {
    mask-image: url("/Content/themes/novapay/img/sprite.svg#icon-small-up");
}

.icon-small-up {
    mask-repeat: no-repeat;
    mask-size: contain;
}

body[data-design=new] .activeMenuTab .icon-menu-mail {
    display: inline-block;
    width: 24px;
    height: 24px;
    background-color: currentColor;
    background-image: none;
    mask-image: url("../img/sprite.svg#icon-menu-mail-hover");
}

.debugUrl body[data-design=new] .activeMenuTab .icon-menu-mail {
    mask-image: url("/Content/themes/novapay/img/sprite.svg#icon-menu-mail-hover");
}

body[data-design=new] .activeMenuTab .icon-menu-mail {
    mask-repeat: no-repeat;
    mask-size: contain;
}

.icon-menu-references-list {
    width: 26px !important;
    height: 28px !important;
    display: inline-block;
    width: 24px;
    height: 24px;
    background-color: currentColor;
    background-image: none;
    mask-image: url("../img/sprite.svg#icon-menu-references-list");
}

.debugUrl .icon-menu-references-list {
    mask-image: url("/Content/themes/novapay/img/sprite.svg#icon-menu-references-list");
}

.icon-menu-references-list {
    mask-repeat: no-repeat;
    mask-size: contain;
}

body[data-design=new] .icon-menu-references {
    left: 9px !important;
    top: 9px !important;
    display: inline-block;
    width: 24px;
    height: 24px;
    background-color: currentColor;
    background-image: none;
    mask-image: url("../img/sprite.svg#icon-bookmark-2");
}

.debugUrl body[data-design=new] .icon-menu-references {
    mask-image: url("/Content/themes/novapay/img/sprite.svg#icon-bookmark-2");
}

body[data-design=new] .icon-menu-references {
    mask-repeat: no-repeat;
    mask-size: contain;
}

body[data-design=new] .activeMenuTab .icon-menu-references {
    display: inline-block;
    width: 24px;
    height: 24px;
    background-color: currentColor;
    background-image: none;
    mask-image: url("../img/sprite.svg#icon-bookmark-2-hover");
}

.debugUrl body[data-design=new] .activeMenuTab .icon-menu-references {
    mask-image: url("/Content/themes/novapay/img/sprite.svg#icon-bookmark-2-hover");
}

body[data-design=new] .activeMenuTab .icon-menu-references {
    mask-repeat: no-repeat;
    mask-size: contain;
}

body[data-design=new] .icon-menu-references {
    left: 9px !important;
    top: 9px !important;
    display: inline-block;
    width: 24px;
    height: 24px;
    background-color: currentColor;
    background-image: none;
    mask-image: url("../img/sprite.svg#icon-bookmark-2");
}

.debugUrl body[data-design=new] .icon-menu-references {
    mask-image: url("/Content/themes/novapay/img/sprite.svg#icon-bookmark-2");
}

body[data-design=new] .icon-menu-references {
    mask-repeat: no-repeat;
    mask-size: contain;
}

body[data-design=new] .icon-menu-extracts {
    left: 9px !important;
    top: 9px !important;
    display: inline-block;
    width: 24px;
    height: 24px;
    background-color: currentColor;
    background-image: none;
    mask-image: url("../img/sprite.svg#icon-menu-extracts");
}

.debugUrl body[data-design=new] .icon-menu-extracts {
    mask-image: url("/Content/themes/novapay/img/sprite.svg#icon-menu-extracts");
}

body[data-design=new] .icon-menu-extracts {
    mask-repeat: no-repeat;
    mask-size: contain;
}

body[data-design=new] .activeMenuTab .icon-menu-extracts {
    display: inline-block;
    width: 24px;
    height: 24px;
    background-color: currentColor;
    background-image: none;
    mask-image: url("../img/sprite.svg#icon-menu-extracts-hover");
}

.debugUrl body[data-design=new] .activeMenuTab .icon-menu-extracts {
    mask-image: url("/Content/themes/novapay/img/sprite.svg#icon-menu-extracts-hover");
}

body[data-design=new] .activeMenuTab .icon-menu-extracts {
    mask-repeat: no-repeat;
    mask-size: contain;
}

body[data-design=new] .icon-menu-salaryCardProject {
    top: 0.5rem !important;
    display: inline-block;
    width: 24px;
    height: 24px;
    background-color: currentColor;
    background-image: none;
    mask-image: url("../img/sprite.svg#icon-menu-salaryCardProject");
}

.debugUrl body[data-design=new] .icon-menu-salaryCardProject {
    mask-image: url("/Content/themes/novapay/img/sprite.svg#icon-menu-salaryCardProject");
}

body[data-design=new] .icon-menu-salaryCardProject {
    mask-repeat: no-repeat;
    mask-size: contain;
}

body[data-design=new] .activeMenuTab .icon-menu-salaryCardProject {
    display: inline-block;
    width: 24px;
    height: 24px;
    background-color: currentColor;
    background-image: none;
    mask-image: url("../img/sprite.svg#icon-menu-salaryCardProject-hover");
}

.debugUrl body[data-design=new] .activeMenuTab .icon-menu-salaryCardProject {
    mask-image: url("/Content/themes/novapay/img/sprite.svg#icon-menu-salaryCardProject-hover");
}

body[data-design=new] .activeMenuTab .icon-menu-salaryCardProject {
    mask-repeat: no-repeat;
    mask-size: contain;
}

body[data-design=new] .icon-menu-system {
    left: 0.25rem !important;
    top: 0.25rem !important;
    width: 30px !important;
    height: 33px !important;
    display: inline-block;
    width: 24px;
    height: 24px;
    background-color: currentColor;
    background-image: none;
    mask-image: url("../img/sprite.svg#bank");
}

.debugUrl body[data-design=new] .icon-menu-system {
    mask-image: url("/Content/themes/novapay/img/sprite.svg#bank");
}

body[data-design=new] .icon-menu-system {
    mask-repeat: no-repeat;
    mask-size: contain;
}

body[data-design=new] .activeMenuTab .icon-menu-system {
    display: inline-block;
    width: 24px;
    height: 24px;
    background-color: currentColor;
    background-image: none;
    mask-image: url("../img/sprite.svg#bank-selected");
}

.debugUrl body[data-design=new] .activeMenuTab .icon-menu-system {
    mask-image: url("/Content/themes/novapay/img/sprite.svg#bank-selected");
}

body[data-design=new] .activeMenuTab .icon-menu-system {
    mask-repeat: no-repeat;
    mask-size: contain;
}

body[data-design=new] .icon-menu-profile {
    left: 4px !important;
    top: 6px !important;
    display: inline-block;
    width: 30px;
    height: 30px;
    background-color: currentColor;
    background-image: none;
    mask-image: url("../img/sprite.svg#user");
}

.debugUrl body[data-design=new] .icon-menu-profile {
    mask-image: url("/Content/themes/novapay/img/sprite.svg#user");
}

body[data-design=new] .icon-menu-profile {
    mask-repeat: no-repeat;
    mask-size: contain;
}

body[data-design=new] .activeMenuTab .icon-menu-profile {
    display: inline-block;
    width: 30px;
    height: 30px;
    background-color: currentColor;
    background-image: none;
    mask-image: url("../img/sprite.svg#user-selected");
}

.debugUrl body[data-design=new] .activeMenuTab .icon-menu-profile {
    mask-image: url("/Content/themes/novapay/img/sprite.svg#user-selected");
}

body[data-design=new] .activeMenuTab .icon-menu-profile {
    mask-repeat: no-repeat;
    mask-size: contain;
}

body[data-design=new] .icon-menu-reports {
    left: 6px !important;
    top: 6px !important;
    display: inline-block;
    width: 33px;
    height: 33px;
    background-color: currentColor;
    background-image: none;
    mask-image: url("../img/sprite.svg#chart");
}

.debugUrl body[data-design=new] .icon-menu-reports {
    mask-image: url("/Content/themes/novapay/img/sprite.svg#chart");
}

body[data-design=new] .icon-menu-reports {
    mask-repeat: no-repeat;
    mask-size: contain;
}

body[data-design=new] .activeMenuTab .icon-menu-reports {
    display: inline-block;
    width: 33px;
    height: 33px;
    background-color: currentColor;
    background-image: none;
    mask-image: url("../img/sprite.svg#chart-selected");
}

.debugUrl body[data-design=new] .activeMenuTab .icon-menu-reports {
    mask-image: url("/Content/themes/novapay/img/sprite.svg#chart-selected");
}

body[data-design=new] .activeMenuTab .icon-menu-reports {
    mask-repeat: no-repeat;
    mask-size: contain;
}

.icon-call {
    background-color: #767F8A !important;
    display: inline-block;
    width: 32px;
    height: 32px;
    background-color: currentColor;
    background-image: none;
    mask-image: url("../img/sprite.svg#support-service-normal");
}

.debugUrl .icon-call {
    mask-image: url("/Content/themes/novapay/img/sprite.svg#support-service-normal");
}

.icon-call {
    mask-repeat: no-repeat;
    mask-size: contain;
}

.icon-emptyState {
    background-color: #DBDFE4 !important;
    display: inline-block;
    width: 101px;
    height: 101px;
    background-color: currentColor;
    background-image: none;
    mask-image: url("../img/sprite.svg#icon-emptyState");
}

.debugUrl .icon-emptyState {
    mask-image: url("/Content/themes/novapay/img/sprite.svg#icon-emptyState");
}

.icon-emptyState {
    mask-repeat: no-repeat;
    mask-size: contain;
}

.icon-upload {
    display: inline-block;
    width: 20px;
    height: 20px;
    background-color: currentColor;
    background-image: none;
    mask-image: url("../img/sprite.svg#icon-upload");
}

.debugUrl .icon-upload {
    mask-image: url("/Content/themes/novapay/img/sprite.svg#icon-upload");
}

.icon-upload {
    mask-repeat: no-repeat;
    mask-size: contain;
}

.icon-menu-credits {
    display: inline-block;
    width: 24px;
    height: 24px;
    background-color: currentColor;
    background-image: none;
    mask-image: url("../img/sprite.svg#icon-menu-credits");
}

.debugUrl .icon-menu-credits {
    mask-image: url("/Content/themes/novapay/img/sprite.svg#icon-menu-credits");
}

.icon-menu-credits {
    mask-repeat: no-repeat;
    mask-size: contain;
}

.icon-qr-code {
    display: inline-block;
    width: 14px;
    height: 14px;
    background-color: currentColor;
    background-image: none;
    mask-image: url("../img/sprite.svg#icon-qr-code");
}

.debugUrl .icon-qr-code {
    mask-image: url("/Content/themes/novapay/img/sprite.svg#icon-qr-code");
}

.icon-qr-code {
    mask-repeat: no-repeat;
    mask-size: contain;
}

.icon-letter {
    background: url("../img/newDesign/icon/letter-normal.svg") no-repeat center;
}

.debugUrl .icon-letter {
    background: url("/Content/themes/novapay/img/newDesign/icon/letter-normal.svg") no-repeat center;
}

.icon-bell {
    background: url("../img/newDesign/icon/bell-normal.svg") no-repeat center;
}

.debugUrl .icon-bell {
    background: url("/Content/themes/novapay/img/newDesign/icon/bell-normal.svg") no-repeat center;
}

.icon-person {
    background-color: #A8ADB4 !important;
    display: inline-block;
    width: 30px;
    height: 30px;
    background-color: currentColor;
    background-image: none;
    mask-image: url("../img/sprite.svg#person");
}

.debugUrl .icon-person {
    mask-image: url("/Content/themes/novapay/img/sprite.svg#person");
}

.icon-person {
    mask-repeat: no-repeat;
    mask-size: contain;
}

.icon-info {
    display: inline-block;
    width: 20px;
    height: 20px;
    background-color: currentColor;
    background-image: none;
    mask-image: url("../img/sprite.svg#icon-info");
}

.debugUrl .icon-info {
    mask-image: url("/Content/themes/novapay/img/sprite.svg#icon-info");
}

.icon-info {
    mask-repeat: no-repeat;
    mask-size: contain;
}

.icon-triangle {
    display: inline-block;
    width: 24px;
    height: 24px;
    background-color: currentColor;
    background-image: none;
    mask-image: url("../img/sprite.svg#icon-triangle");
}

.debugUrl .icon-triangle {
    mask-image: url("/Content/themes/novapay/img/sprite.svg#icon-triangle");
}

.icon-triangle {
    mask-repeat: no-repeat;
    mask-size: contain;
}

.icon-arrow-right {
    display: inline-block;
    width: 20px;
    height: 20px;
    background-color: currentColor;
    background-image: none;
    mask-image: url("../img/sprite.svg#icon-arrow-right");
}

.debugUrl .icon-arrow-right {
    mask-image: url("/Content/themes/novapay/img/sprite.svg#icon-arrow-right");
}

.icon-arrow-right {
    mask-repeat: no-repeat;
    mask-size: contain;
}

.icon-users-two {
    background: url("../img/newDesign/icon/icon-users-2.svg") no-repeat center;
}

.debugUrl .icon-users-two {
    background: url("/Content/themes/novapay/img/newDesign/icon/icon-users-2.svg") no-repeat center;
}

.icon-user {
    display: inline-block;
    width: 24px;
    height: 24px;
    background-color: currentColor;
    background-image: none;
    mask-image: url("../img/sprite.svg#icon-user");
}

.debugUrl .icon-user {
    mask-image: url("/Content/themes/novapay/img/sprite.svg#icon-user");
}

.icon-user {
    mask-repeat: no-repeat;
    mask-size: contain;
}

.icon-lock {
    background: url("../img/newDesign/icon/icon-lock.svg") no-repeat center;
}

.debugUrl .icon-lock {
    background: url("/Content/themes/novapay/img/newDesign/icon/icon-lock.svg") no-repeat center;
}

.icon-Settings {
    display: inline-block;
    width: 20px;
    height: 20px;
    background-color: currentColor;
    background-image: none;
    mask-image: url("../img/sprite.svg#icon-settings");
}

.debugUrl .icon-Settings {
    mask-image: url("/Content/themes/novapay/img/sprite.svg#icon-settings");
}

.icon-Settings {
    mask-repeat: no-repeat;
    mask-size: contain;
}

.icon-turn-left-up {
    display: inline-block;
    width: 20px;
    height: 20px;
    background-color: currentColor;
    background-image: none;
    mask-image: url("../img/sprite.svg#icon-turn-left-up");
}

.debugUrl .icon-turn-left-up {
    mask-image: url("/Content/themes/novapay/img/sprite.svg#icon-turn-left-up");
}

.icon-turn-left-up {
    mask-repeat: no-repeat;
    mask-size: contain;
}

.icon-phone {
    display: inline-block;
    width: 24px;
    height: 24px;
    background-color: currentColor;
    background-image: none;
    mask-image: url("../img/sprite.svg#icon-phone");
}

.debugUrl .icon-phone {
    mask-image: url("/Content/themes/novapay/img/sprite.svg#icon-phone");
}

.icon-phone {
    mask-repeat: no-repeat;
    mask-size: contain;
}

.icon-payment-calendar-data {
    display: inline-block;
    width: 18px;
    height: 18px;
    background-color: currentColor;
    background-image: none;
    mask-image: url("../img/sprite.svg#icon-payment-calendar-data");
}

.debugUrl .icon-payment-calendar-data {
    mask-image: url("/Content/themes/novapay/img/sprite.svg#icon-payment-calendar-data");
}

.icon-payment-calendar-data {
    mask-repeat: no-repeat;
    mask-size: contain;
}

.icon-telegram {
    display: inline-block;
    width: 24px;
    height: 24px;
    background-color: currentColor;
    background-image: none;
    mask-image: url("../img/sprite.svg#icon-Telegram");
}

.debugUrl .icon-telegram {
    mask-image: url("/Content/themes/novapay/img/sprite.svg#icon-Telegram");
}

.icon-telegram {
    mask-repeat: no-repeat;
    mask-size: contain;
}

.icon-bell-payment {
    background-color: #690DD3 !important;
    display: inline-block;
    width: 24px;
    height: 24px;
    background-color: currentColor;
    background-image: none;
    mask-image: url("../img/sprite.svg#icon-bell-payment");
}

.debugUrl .icon-bell-payment {
    mask-image: url("/Content/themes/novapay/img/sprite.svg#icon-bell-payment");
}

.icon-bell-payment {
    mask-repeat: no-repeat;
    mask-size: contain;
}

.icon-arrow-down {
    display: inline-block;
    width: 24px;
    height: 24px;
    background-color: currentColor;
    background-image: none;
    mask-image: url("../img/sprite.svg#icon-arrow-down");
}

.debugUrl .icon-arrow-down {
    mask-image: url("/Content/themes/novapay/img/sprite.svg#icon-arrow-down");
}

.icon-arrow-down {
    mask-repeat: no-repeat;
    mask-size: contain;
}

.icon-arrow-prew-step {
    display: inline-block;
    width: 17px;
    height: 17px;
    background-color: currentColor;
    background-image: none;
    mask-image: url("../img/sprite.svg#icon-arrow-prew-step");
}

.debugUrl .icon-arrow-prew-step {
    mask-image: url("/Content/themes/novapay/img/sprite.svg#icon-arrow-prew-step");
}

.icon-arrow-prew-step {
    mask-repeat: no-repeat;
    mask-size: contain;
}

.icon-arrow-next-step {
    display: inline-block;
    width: 17px;
    height: 17px;
    background-color: currentColor;
    background-image: none;
    mask-image: url("../img/sprite.svg#icon-arrow-next-step");
}

.debugUrl .icon-arrow-next-step {
    mask-image: url("/Content/themes/novapay/img/sprite.svg#icon-arrow-next-step");
}

.icon-arrow-next-step {
    mask-repeat: no-repeat;
    mask-size: contain;
}

.icon-send-payment {
    display: inline-block;
    width: 24px;
    height: 24px;
    background-color: currentColor;
    background-image: none;
    mask-image: url("../img/sprite.svg#icon-send-payment");
}

.debugUrl .icon-send-payment {
    mask-image: url("/Content/themes/novapay/img/sprite.svg#icon-send-payment");
}

.icon-send-payment {
    mask-repeat: no-repeat;
    mask-size: contain;
}

.icon-sign-payment {
    display: inline-block;
    width: 24px;
    height: 24px;
    background-color: currentColor;
    background-image: none;
    mask-image: url("../img/sprite.svg#icon-sign-payment");
}

.debugUrl .icon-sign-payment {
    mask-image: url("/Content/themes/novapay/img/sprite.svg#icon-sign-payment");
}

.icon-sign-payment {
    mask-repeat: no-repeat;
    mask-size: contain;
}

.icon-edit-payment {
    display: inline-block;
    width: 11px;
    height: 11px;
    background-color: currentColor;
    background-image: none;
    mask-image: url("../img/sprite.svg#icon-edit-payment");
}

.debugUrl .icon-edit-payment {
    mask-image: url("/Content/themes/novapay/img/sprite.svg#icon-edit-payment");
}

.icon-edit-payment {
    mask-repeat: no-repeat;
    mask-size: contain;
}

.icon-sign-payment {
    display: inline-block;
    width: 11px;
    height: 11px;
    background-color: currentColor;
    background-image: none;
    mask-image: url("../img/sprite.svg#icon-sign-payment");
}

.debugUrl .icon-sign-payment {
    mask-image: url("/Content/themes/novapay/img/sprite.svg#icon-sign-payment");
}

.icon-sign-payment {
    mask-repeat: no-repeat;
    mask-size: contain;
}

.icon-decline-payment {
    display: inline-block;
    width: 20px;
    height: 20px;
    background-color: currentColor;
    background-image: none;
    mask-image: url("../img/sprite.svg#icon-decline-payment");
}

.debugUrl .icon-decline-payment {
    mask-image: url("/Content/themes/novapay/img/sprite.svg#icon-decline-payment");
}

.icon-decline-payment {
    mask-repeat: no-repeat;
    mask-size: contain;
}

.icon-confirm-payment {
    display: inline-block;
    width: 20px;
    height: 20px;
    background-color: currentColor;
    background-image: none;
    mask-image: url("../img/sprite.svg#icon-confirm-payment");
}

.debugUrl .icon-confirm-payment {
    mask-image: url("/Content/themes/novapay/img/sprite.svg#icon-confirm-payment");
}

.icon-confirm-payment {
    mask-repeat: no-repeat;
    mask-size: contain;
}

.icon-remove-personally-payment {
    display: inline-block;
    width: 20px;
    height: 20px;
    background-color: currentColor;
    background-image: none;
    mask-image: url("../img/sprite.svg#icon-remove-personally-payment");
}

.debugUrl .icon-remove-personally-payment {
    mask-image: url("/Content/themes/novapay/img/sprite.svg#icon-remove-personally-payment");
}

.icon-remove-personally-payment {
    mask-repeat: no-repeat;
    mask-size: contain;
}

.icon-subscribe-payment {
    display: inline-block;
    width: 20px;
    height: 20px;
    background-color: currentColor;
    background-image: none;
    mask-image: url("../img/sprite.svg#icon-subscribe-payment");
}

.debugUrl .icon-subscribe-payment {
    mask-image: url("/Content/themes/novapay/img/sprite.svg#icon-subscribe-payment");
}

.icon-subscribe-payment {
    mask-repeat: no-repeat;
    mask-size: contain;
}

.icon-maketemplate-payment {
    display: inline-block;
    width: 18px;
    height: 18px;
    background-color: currentColor;
    background-image: none;
    mask-image: url("../img/sprite.svg#icon-maketemplate-payment");
}

.debugUrl .icon-maketemplate-payment {
    mask-image: url("/Content/themes/novapay/img/sprite.svg#icon-maketemplate-payment");
}

.icon-maketemplate-payment {
    mask-repeat: no-repeat;
    mask-size: contain;
}

.icon-toggle {
    display: inline-block;
    width: 24px;
    height: 24px;
    background-color: currentColor;
    background-image: none;
    mask-image: url("../img/sprite.svg#icon-toggle");
}

.debugUrl .icon-toggle {
    mask-image: url("/Content/themes/novapay/img/sprite.svg#icon-toggle");
}

.icon-toggle {
    mask-repeat: no-repeat;
    mask-size: contain;
}

.icon-export-payment {
    display: inline-block;
    width: 24px;
    height: 24px;
    background-color: currentColor;
    background-image: none;
    mask-image: url("../img/sprite.svg#icon-export-payment");
}

.debugUrl .icon-export-payment {
    mask-image: url("/Content/themes/novapay/img/sprite.svg#icon-export-payment");
}

.icon-export-payment {
    mask-repeat: no-repeat;
    mask-size: contain;
}

.edit-icon {
    display: inline-block;
    width: 24px;
    height: 24px;
    background-color: currentColor;
    background-image: none;
    mask-image: url("../img/sprite.svg#edit-icon");
}

.debugUrl .edit-icon {
    mask-image: url("/Content/themes/novapay/img/sprite.svg#edit-icon");
}

.edit-icon {
    mask-repeat: no-repeat;
    mask-size: contain;
}

.visa-green-icon {
    display: inline-block;
    width: 20px;
    height: 20px;
    background-color: currentColor;
    background-image: none;
    mask-image: url("../img/sprite.svg#visa-green-icon");
}

.debugUrl .visa-green-icon {
    mask-image: url("/Content/themes/novapay/img/sprite.svg#visa-green-icon");
}

.visa-green-icon {
    mask-repeat: no-repeat;
    mask-size: contain;
}

.icon-copy-payment {
    display: inline-block;
    width: 24px;
    height: 24px;
    background-color: currentColor;
    background-image: none;
    mask-image: url("../img/sprite.svg#icon-copy-payment");
}

.debugUrl .icon-copy-payment {
    mask-image: url("/Content/themes/novapay/img/sprite.svg#icon-copy-payment");
}

.icon-copy-payment {
    mask-repeat: no-repeat;
    mask-size: contain;
}

.icon-print-payment {
    display: inline-block;
    width: 24px;
    height: 24px;
    background-color: currentColor;
    background-image: none;
    mask-image: url("../img/sprite.svg#icon-print-payment");
}

.debugUrl .icon-print-payment {
    mask-image: url("/Content/themes/novapay/img/sprite.svg#icon-print-payment");
}

.icon-print-payment {
    mask-repeat: no-repeat;
    mask-size: contain;
}

.icon-Scroll-Button {
    display: inline-block;
    width: 24px;
    height: 24px;
    background-color: currentColor;
    background-image: none;
    mask-image: url("../img/sprite.svg#icon-Scroll-Button");
}

.debugUrl .icon-Scroll-Button {
    mask-image: url("/Content/themes/novapay/img/sprite.svg#icon-Scroll-Button");
}

.icon-Scroll-Button {
    mask-repeat: no-repeat;
    mask-size: contain;
}

.icon-unsubscribe-payment {
    display: inline-block;
    width: 24px;
    height: 24px;
    background-color: currentColor;
    background-image: none;
    mask-image: url("../img/sprite.svg#icon-unsubscribe-payment");
}

.debugUrl .icon-unsubscribe-payment {
    mask-image: url("/Content/themes/novapay/img/sprite.svg#icon-unsubscribe-payment");
}

.icon-unsubscribe-payment {
    mask-repeat: no-repeat;
    mask-size: contain;
}

.icon-recall-payment {
    display: inline-block;
    width: 21px;
    height: 21px;
    background-color: currentColor;
    background-image: none;
    mask-image: url("../img/sprite.svg#icon-recall-payment");
}

.debugUrl .icon-recall-payment {
    mask-image: url("/Content/themes/novapay/img/sprite.svg#icon-recall-payment");
}

.icon-recall-payment {
    mask-repeat: no-repeat;
    mask-size: contain;
}

.icon-default-bank {
    display: inline-block;
    width: 20px;
    height: 20px;
    background-color: currentColor;
    background-image: none;
    mask-image: url("../img/sprite.svg#icon-default-bank ");
}

.debugUrl .icon-default-bank {
    mask-image: url("/Content/themes/novapay/img/sprite.svg#icon-default-bank ");
}

.icon-default-bank {
    mask-repeat: no-repeat;
    mask-size: contain;
}

.icon-recall-back {
    display: inline-block;
    width: 21px;
    height: 21px;
    background-color: currentColor;
    background-image: none;
    mask-image: url("../img/sprite.svg#icon-recall-back");
}

.debugUrl .icon-recall-back {
    mask-image: url("/Content/themes/novapay/img/sprite.svg#icon-recall-back");
}

.icon-recall-back {
    mask-repeat: no-repeat;
    mask-size: contain;
}

.icon-tablestatus-payment {
    display: inline-block;
    width: 17px;
    height: 17px;
    background-color: currentColor;
    background-image: none;
    mask-image: url("../img/sprite.svg#icon-tablestatus-payment");
}

.debugUrl .icon-tablestatus-payment {
    mask-image: url("/Content/themes/novapay/img/sprite.svg#icon-tablestatus-payment");
}

.icon-tablestatus-payment {
    mask-repeat: no-repeat;
    mask-size: contain;
}

.icon-sort-status {
    display: inline-block;
    width: 14px;
    height: 14px;
    background-color: currentColor;
    background-image: none;
    mask-image: url("../img/sprite.svg#icon-sort-status");
}

.debugUrl .icon-sort-status {
    mask-image: url("/Content/themes/novapay/img/sprite.svg#icon-sort-status");
}

.icon-sort-status {
    mask-repeat: no-repeat;
    mask-size: contain;
}

.icon-remove-payment {
    display: inline-block;
    width: 20px;
    height: 20px;
    background-color: currentColor;
    background-image: none;
    mask-image: url("../img/sprite.svg#icon-remove-payment");
}

.debugUrl .icon-remove-payment {
    mask-image: url("/Content/themes/novapay/img/sprite.svg#icon-remove-payment");
}

.icon-remove-payment {
    mask-repeat: no-repeat;
    mask-size: contain;
}

.icon-activate-new {
    display: inline-block;
    width: 20px;
    height: 20px;
    background-color: currentColor;
    background-image: none;
    mask-image: url("../img/sprite.svg#icon-activate-new");
}

.debugUrl .icon-activate-new {
    mask-image: url("/Content/themes/novapay/img/sprite.svg#icon-activate-new");
}

.icon-activate-new {
    mask-repeat: no-repeat;
    mask-size: contain;
}

.icon-deactivate-new {
    display: inline-block;
    width: 20px;
    height: 20px;
    background-color: currentColor;
    background-image: none;
    mask-image: url("../img/sprite.svg#icon-deactivate-new");
}

.debugUrl .icon-deactivate-new {
    mask-image: url("/Content/themes/novapay/img/sprite.svg#icon-deactivate-new");
}

.icon-deactivate-new {
    mask-repeat: no-repeat;
    mask-size: contain;
}

.icon-arrow-sort {
    display: inline-block;
    width: 17px;
    height: 17px;
    background-color: currentColor;
    background-image: none;
    mask-image: url("../img/sprite.svg#icon-arrow-sort");
}

.debugUrl .icon-arrow-sort {
    mask-image: url("/Content/themes/novapay/img/sprite.svg#icon-arrow-sort");
}

.icon-arrow-sort {
    mask-repeat: no-repeat;
    mask-size: contain;
}

.icon-double-arrow {
    display: inline-block;
    width: 14px;
    height: 14px;
    background-color: currentColor;
    background-image: none;
    mask-image: url("../img/sprite.svg#icon-double-arrow");
}

.debugUrl .icon-double-arrow {
    mask-image: url("/Content/themes/novapay/img/sprite.svg#icon-double-arrow");
}

.icon-double-arrow {
    mask-repeat: no-repeat;
    mask-size: contain;
}

.icon-line-arrow-down {
    display: inline-block;
    width: 16px;
    height: 16px;
    background-color: currentColor;
    background-image: none;
    mask-image: url("../img/sprite.svg#icon-line-arrow-down");
}

.debugUrl .icon-line-arrow-down {
    mask-image: url("/Content/themes/novapay/img/sprite.svg#icon-line-arrow-down");
}

.icon-line-arrow-down {
    mask-repeat: no-repeat;
    mask-size: contain;
}

.icon-line-arrow-up {
    display: inline-block;
    width: 16px;
    height: 16px;
    background-color: currentColor;
    background-image: none;
    mask-image: url("../img/sprite.svg#icon-line-arrow-up");
}

.debugUrl .icon-line-arrow-up {
    mask-image: url("/Content/themes/novapay/img/sprite.svg#icon-line-arrow-up");
}

.icon-line-arrow-up {
    mask-repeat: no-repeat;
    mask-size: contain;
}

.icon-arrow-movements-from-to {
    display: inline-block;
    width: 24px;
    height: 24px;
    background-color: currentColor;
    background-image: none;
    mask-image: url("../img/sprite.svg#icon-arrow-movements-from-to");
}

.debugUrl .icon-arrow-movements-from-to {
    mask-image: url("/Content/themes/novapay/img/sprite.svg#icon-arrow-movements-from-to");
}

.icon-arrow-movements-from-to {
    mask-repeat: no-repeat;
    mask-size: contain;
}

.icon-no-employees {
    display: inline-block;
    width: 52px;
    height: 52px;
    background-color: currentColor;
    background-image: none;
    mask-image: url("../img/sprite.svg#icon-no-employees");
}

.debugUrl .icon-no-employees {
    mask-image: url("/Content/themes/novapay/img/sprite.svg#icon-no-employees");
}

.icon-no-employees {
    mask-repeat: no-repeat;
    mask-size: contain;
}

.icon-expand {
    display: inline-block;
    width: 14px;
    height: 14px;
    background-color: currentColor;
    background-image: none;
    mask-image: url("../img/sprite.svg#icon-expand");
}

.debugUrl .icon-expand {
    mask-image: url("/Content/themes/novapay/img/sprite.svg#icon-expand");
}

.icon-expand {
    mask-repeat: no-repeat;
    mask-size: contain;
}

.icon-circular-arrow {
    display: inline-block;
    width: 16px;
    height: 16px;
    background-color: currentColor;
    background-image: none;
    mask-image: url("../img/sprite.svg#icon-circular-arrow");
}

.debugUrl .icon-circular-arrow {
    mask-image: url("/Content/themes/novapay/img/sprite.svg#icon-circular-arrow");
}

.icon-circular-arrow {
    mask-repeat: no-repeat;
    mask-size: contain;
}

.icon-payment-filter {
    display: inline-block;
    width: 16px;
    height: 16px;
    background-color: currentColor;
    background-image: none;
    mask-image: url("../img/sprite.svg#icon-payment-filter");
}

.debugUrl .icon-payment-filter {
    mask-image: url("/Content/themes/novapay/img/sprite.svg#icon-payment-filter");
}

.icon-payment-filter {
    mask-repeat: no-repeat;
    mask-size: contain;
}

.icon-payment-receipt {
    display: inline-block;
    width: 20px;
    height: 20px;
    background-color: currentColor;
    background-image: none;
    mask-image: url("../img/sprite.svg#icon-payment-receipt");
}

.debugUrl .icon-payment-receipt {
    mask-image: url("/Content/themes/novapay/img/sprite.svg#icon-payment-receipt");
}

.icon-payment-receipt {
    mask-repeat: no-repeat;
    mask-size: contain;
}

body[data-design=new] .activeMessage {
    width: 100%;
    height: 100%;
    position: relative;
}

    body[data-design=new] .activeMessage .icon-icon-msg {
        background-color: #767F8A !important;
        display: inline-block;
        width: 24px;
        height: 24px;
        background-color: currentColor;
        background-image: none;
        mask-image: url("../img/sprite.svg#letter-normal");
    }

.debugUrl body[data-design=new] .activeMessage .icon-icon-msg {
    mask-image: url("/Content/themes/novapay/img/sprite.svg#letter-normal");
}

body[data-design=new] .activeMessage .icon-icon-msg {
    mask-repeat: no-repeat;
    mask-size: contain;
}

body[data-design=new] .activeMessage:hover .icon-icon-msg {
    background-color: #690DD3 !important;
    display: inline-block;
    width: 24px;
    height: 24px;
    background-color: currentColor;
    background-image: none;
    mask-image: url("../img/sprite.svg#letter-hover");
}

.debugUrl body[data-design=new] .activeMessage:hover .icon-icon-msg {
    mask-image: url("/Content/themes/novapay/img/sprite.svg#letter-hover");
}

body[data-design=new] .activeMessage:hover .icon-icon-msg {
    mask-repeat: no-repeat;
    mask-size: contain;
}

.icon-templates-new, body[data-design=new] .activeMessage .icon-menu-templates, body[data-design=new] .icon-menu-templates {
    display: inline-block;
    width: 24px;
    height: 24px;
    background-color: currentColor;
    background-image: none;
    mask-image: url("../img/sprite.svg#icon-templates-new");
}

.debugUrl .icon-templates-new, .debugUrl body[data-design=new] .icon-menu-templates, body[data-design=new] .debugUrl .icon-menu-templates {
    mask-image: url("/Content/themes/novapay/img/sprite.svg#icon-templates-new");
}

.icon-templates-new, body[data-design=new] .activeMessage .icon-menu-templates, body[data-design=new] .icon-menu-templates {
    mask-repeat: no-repeat;
    mask-size: contain;
}

.icon-related-payments {
    display: inline-block;
    width: 15px;
    height: 15px;
    background-color: currentColor;
    background-image: none;
    mask-image: url("../img/sprite.svg#icon-related-payments");
}

.debugUrl .icon-related-payments {
    mask-image: url("/Content/themes/novapay/img/sprite.svg#icon-related-payments");
}

.icon-related-payments {
    mask-repeat: no-repeat;
    mask-size: contain;
}

body[data-design=new] .icon-menu-templates {
    left: 0.5rem !important;
    top: 0.5rem !important;
}

body[data-design=new] .activeMessage {
    width: 100%;
    height: 100%;
    position: relative;
}

    body[data-design=new] .activeMessage .icon-menu-templates {
        background-color: #767F8A !important;
    }

    body[data-design=new] .activeMessage:hover .icon-menu-templates {
        background-color: #690DD3 !important;
    }

.icon-menu {
    background-color: #767F8A !important;
    display: inline-block;
    width: 24px;
    height: 24px;
    background-color: currentColor;
    background-image: none;
    mask-image: url("../img/sprite.svg#icon-menu");
}

.debugUrl .icon-menu {
    mask-image: url("/Content/themes/novapay/img/sprite.svg#icon-menu");
}

.icon-menu {
    mask-repeat: no-repeat;
    mask-size: contain;
}

.icon-file-lines {
    background: url("../img/newDesign/icon/icon-file-lines.svg") no-repeat center;
}

.debugUrl .icon-file-lines {
    background: url("/Content/themes/novapay/img/newDesign/icon/icon-file-lines.svg") no-repeat center;
}

.icon-cash {
    background: url("../img/newDesign/icon/icon-cash-rectangle-horizontal.svg") no-repeat center;
}

.debugUrl .icon-cash {
    background: url("/Content/themes/novapay/img/newDesign/icon/icon-cash-rectangle-horizontal.svg") no-repeat center;
}

.icon-bookmark {
    background: url("../img/newDesign/icon/icon-bookmark-2.svg") no-repeat center;
}

.debugUrl .icon-bookmark {
    background: url("/Content/themes/novapay/img/newDesign/icon/icon-bookmark-2.svg") no-repeat center;
}

.icon-bill {
    background: url("../img/newDesign/icon/icon-bill-lines-parcel.svg") no-repeat center;
}

.debugUrl .icon-bill {
    background: url("/Content/themes/novapay/img/newDesign/icon/icon-bill-lines-parcel.svg") no-repeat center;
}

.icon-arrow-diagonal {
    background: url("../img/newDesign/icon/icon-arrow-diagonal-hover.svg") no-repeat center;
}

.debugUrl .icon-arrow-diagonal {
    background: url("/Content/themes/novapay/img/newDesign/icon/icon-arrow-diagonal-hover.svg") no-repeat center;
}

.icon-close {
    display: inline-block;
    width: 20px;
    height: 20px;
    background-color: currentColor;
    background-image: none;
    mask-image: url("../img/sprite.svg#icon-close");
}

.debugUrl .icon-close {
    mask-image: url("/Content/themes/novapay/img/sprite.svg#icon-close");
}

.icon-close {
    mask-repeat: no-repeat;
    mask-size: contain;
}

.icon-arrow-left {
    display: inline-block;
    width: 24px;
    height: 24px;
    background-color: currentColor;
    background-image: none;
    mask-image: url("../img/sprite.svg#icon-arrow-left ");
}

.debugUrl .icon-arrow-left {
    mask-image: url("/Content/themes/novapay/img/sprite.svg#icon-arrow-left ");
}

.icon-arrow-left {
    mask-repeat: no-repeat;
    mask-size: contain;
}

.icon-search__new {
    display: inline-block;
    width: 24px;
    height: 24px;
    background-color: currentColor;
    background-image: none;
    mask-image: url("../img/sprite.svg#icon-search__new ");
}

.debugUrl .icon-search__new {
    mask-image: url("/Content/themes/novapay/img/sprite.svg#icon-search__new ");
}

.icon-search__new {
    mask-repeat: no-repeat;
    mask-size: contain;
}

.icon-account-open {
    background: url("../img/newDesign/icon/icon-account-open.svg") no-repeat center;
}

.debugUrl .icon-account-open {
    background: url("/Content/themes/novapay/img/newDesign/icon/icon-account-open.svg") no-repeat center;
}

.icon-account-close {
    background: url("../img/newDesign/icon/icon-account-close.svg") no-repeat center;
}

.debugUrl .icon-account-close {
    background: url("/Content/themes/novapay/img/newDesign/icon/icon-account-close.svg") no-repeat center;
}

.icon-vertical-dot {
    display: inline-block;
    width: 24px;
    height: 24px;
    background-color: currentColor;
    background-image: none;
    mask-image: url("../img/sprite.svg#icon-vertical-dot");
}

.debugUrl .icon-vertical-dot {
    mask-image: url("/Content/themes/novapay/img/sprite.svg#icon-vertical-dot");
}

.icon-vertical-dot {
    mask-repeat: no-repeat;
    mask-size: contain;
}

.icon-archive-hidden {
    display: inline-block;
    width: 20px;
    height: 20px;
    background-color: currentColor;
    background-image: none;
    mask-image: url("../img/sprite.svg#icon-archive-hidden");
}

.debugUrl .icon-archive-hidden {
    mask-image: url("/Content/themes/novapay/img/sprite.svg#icon-archive-hidden");
}

.icon-archive-hidden {
    mask-repeat: no-repeat;
    mask-size: contain;
}

.icon-archive-show {
    display: inline-block;
    width: 20px;
    height: 20px;
    background-color: currentColor;
    background-image: none;
    mask-image: url("../img/sprite.svg#icon-archive-show");
}

.debugUrl .icon-archive-show {
    mask-image: url("/Content/themes/novapay/img/sprite.svg#icon-archive-show");
}

.icon-archive-show {
    mask-repeat: no-repeat;
    mask-size: contain;
}

.icon-show-more {
    display: inline-block;
    width: 20px;
    height: 20px;
    background-color: currentColor;
    background-image: none;
    mask-image: url("../img/sprite.svg#icon-show-more");
}

.debugUrl .icon-show-more {
    mask-image: url("/Content/themes/novapay/img/sprite.svg#icon-show-more");
}

.icon-show-more {
    mask-repeat: no-repeat;
    mask-size: contain;
}

.icon-arrow-black-down {
    display: inline-block;
    width: 17px;
    height: 17px;
    background-color: currentColor;
    background-image: none;
    mask-image: url("../img/sprite.svg#icon-arrow-black-down");
}

.debugUrl .icon-arrow-black-down {
    mask-image: url("/Content/themes/novapay/img/sprite.svg#icon-arrow-black-down");
}

.icon-arrow-black-down {
    mask-repeat: no-repeat;
    mask-size: contain;
}

.icon-triger-white-arrow {
    background: url("../img/newDesign/icon/arrow-white.svg") no-repeat center;
}

.debugUrl .icon-triger-white-arrow {
    background: url("/Content/themes/novapay/img/newDesign/icon/arrow-white.svg") no-repeat center;
}

.icon-arrow-down-color {
    display: inline-block;
    width: 20px;
    height: 20px;
    background-color: currentColor;
    background-image: none;
    mask-image: url("../img/sprite.svg#icon-arrow-down-color");
}

.debugUrl .icon-arrow-down-color {
    mask-image: url("/Content/themes/novapay/img/sprite.svg#icon-arrow-down-color");
}

.icon-arrow-down-color {
    mask-repeat: no-repeat;
    mask-size: contain;
}

.icon-arrow-dropdown {
    display: inline-block;
    width: 24px;
    height: 24px;
    background-color: currentColor;
    background-image: none;
    mask-image: url("../img/sprite.svg#icon-arrow-dropdown");
}

.debugUrl .icon-arrow-dropdown {
    mask-image: url("/Content/themes/novapay/img/sprite.svg#icon-arrow-dropdown");
}

.icon-arrow-dropdown {
    mask-repeat: no-repeat;
    mask-size: contain;
}

.icon-view-details {
    display: inline-block;
    width: 22px;
    height: 22px;
    background-color: currentColor;
    background-image: none;
    mask-image: url("../img/sprite.svg#icon-view-details");
}

.debugUrl .icon-view-details {
    mask-image: url("/Content/themes/novapay/img/sprite.svg#icon-view-details");
}

.icon-view-details {
    mask-repeat: no-repeat;
    mask-size: contain;
}

.icon-create-payment {
    display: inline-block;
    width: 23px;
    height: 23px;
    background-color: currentColor;
    background-image: none;
    mask-image: url("../img/sprite.svg#icon-create-payment");
}

.debugUrl .icon-create-payment {
    mask-image: url("/Content/themes/novapay/img/sprite.svg#icon-create-payment");
}

.icon-create-payment {
    mask-repeat: no-repeat;
    mask-size: contain;
}

.icon-account-copy {
    background: url("../img/newDesign/icon/icon-account-copy.svg") no-repeat center;
}

.debugUrl .icon-account-copy {
    background: url("/Content/themes/novapay/img/newDesign/icon/icon-account-copy.svg") no-repeat center;
}

.icon-account-copyAll {
    background: url("../img/newDesign/icon/icon-account-copyAll.svg") no-repeat center;
}

.debugUrl .icon-account-copyAll {
    background: url("/Content/themes/novapay/img/newDesign/icon/icon-account-copyAll.svg") no-repeat center;
}

.icon-view-details-payslip {
    display: inline-block;
    width: 24px;
    height: 24px;
    background-color: currentColor;
    background-image: none;
    mask-image: url("../img/sprite.svg#icon-view-details-payslip");
}

.debugUrl .icon-view-details-payslip {
    mask-image: url("/Content/themes/novapay/img/sprite.svg#icon-view-details-payslip");
}

.icon-view-details-payslip {
    mask-repeat: no-repeat;
    mask-size: contain;
}

.icon-account-detail {
    background: url("../img/newDesign/icon/icon-account-detail.svg") no-repeat center;
}

.debugUrl .icon-account-detail {
    background: url("/Content/themes/novapay/img/newDesign/icon/icon-account-detail.svg") no-repeat center;
}

.icon-account-letter {
    background: url("../img/newDesign/icon/icon-account-letter.svg") no-repeat center;
}

.debugUrl .icon-account-letter {
    background: url("/Content/themes/novapay/img/newDesign/icon/icon-account-letter.svg") no-repeat center;
}

.icon-account-print {
    background: url("../img/newDesign/icon/icon-account-print.svg") no-repeat center;
}

.debugUrl .icon-account-print {
    background: url("/Content/themes/novapay/img/newDesign/icon/icon-account-print.svg") no-repeat center;
}

.icon-cancel {
    background: url("../img/newDesign/icon/icon-account-cancel.svg") no-repeat center;
}

.debugUrl .icon-cancel {
    background: url("/Content/themes/novapay/img/newDesign/icon/icon-account-cancel.svg") no-repeat center;
}

.icon-pen-edit {
    background: url("../img/newDesign/icon/icon-account-edit.svg") no-repeat center;
}

.debugUrl .icon-pen-edit {
    background: url("/Content/themes/novapay/img/newDesign/icon/icon-account-edit.svg") no-repeat center;
}

.icon-calendar {
    display: inline-block;
    width: 20px;
    height: 20px;
    background-color: currentColor;
    background-image: none;
    mask-image: url("../img/sprite.svg#icon-calendar");
}

.debugUrl .icon-calendar {
    mask-image: url("/Content/themes/novapay/img/sprite.svg#icon-calendar");
}

.icon-calendar {
    mask-repeat: no-repeat;
    mask-size: contain;
}

.select-arrow-icon {
    background: url("../img/newDesign/icon/select-arrow.svg") no-repeat center;
}

.debugUrl .select-arrow-icon {
    background: url("/Content/themes/novapay/img/newDesign/icon/select-arrow.svg") no-repeat center;
}

.tooltip-icon {
    display: inline-block;
    width: 20px;
    height: 20px;
    background-color: currentColor;
    background-image: none;
    mask-image: url("../img/sprite.svg#icon-info");
}

.debugUrl .tooltip-icon {
    mask-image: url("/Content/themes/novapay/img/sprite.svg#icon-info");
}

.tooltip-icon {
    mask-repeat: no-repeat;
    mask-size: contain;
}

.icon-scrolltotop {
    display: inline-block;
    width: 16px;
    height: 16px;
    background-color: currentColor;
    background-image: none;
    mask-image: url("../img/sprite.svg#icon-scrolltotop");
}

.debugUrl .icon-scrolltotop {
    mask-image: url("/Content/themes/novapay/img/sprite.svg#icon-scrolltotop");
}

.icon-scrolltotop {
    mask-repeat: no-repeat;
    mask-size: contain;
}

.icon-plus {
    background: url("../img/newDesign/icon/icon-plus.svg") no-repeat center;
}

.debugUrl .icon-plus {
    background: url("/Content/themes/novapay/img/newDesign/icon/icon-plus.svg") no-repeat center;
}

.icon-trash-new-ui {
    display: inline-block;
    width: 24px;
    height: 24px;
    background-color: currentColor;
    background-image: none;
    mask-image: url("../img/sprite.svg#icon-account-trash");
}

.debugUrl .icon-trash-new-ui {
    mask-image: url("/Content/themes/novapay/img/sprite.svg#icon-account-trash");
}

.icon-trash-new-ui {
    mask-repeat: no-repeat;
    mask-size: contain;
}

.search-icon {
    background: url("../img/newDesign/icon/search-icon.svg") no-repeat center;
}

.debugUrl .search-icon {
    background: url("/Content/themes/novapay/img/newDesign/icon/search-icon.svg") no-repeat center;
}

.icon-search {
    display: inline-block;
    width: 24px;
    height: 24px;
    background-color: currentColor;
    background-image: none;
    mask-image: url("../img/sprite.svg#icon-search");
}

.debugUrl .icon-search {
    mask-image: url("/Content/themes/novapay/img/sprite.svg#icon-search");
}

.icon-search {
    mask-repeat: no-repeat;
    mask-size: contain;
}

.icon-postpaid-file-lines {
    background: url("../img/newDesign/icon/icon-postpaid-file-lines.svg") no-repeat center;
}

.debugUrl .icon-postpaid-file-lines {
    background: url("/Content/themes/novapay/img/newDesign/icon/icon-postpaid-file-lines.svg") no-repeat center;
}

.icon-postpaid-sufficient-clock {
    background: url("../img/newDesign/icon/icon-postpaid-sufficient-clock.svg") no-repeat center;
}

.debugUrl .icon-postpaid-sufficient-clock {
    background: url("/Content/themes/novapay/img/newDesign/icon/icon-postpaid-sufficient-clock.svg") no-repeat center;
}

.icon-postpaid-limit-clock {
    background: url("../img/newDesign/icon/icon-postpaid-limit-clock.svg") no-repeat center;
}

.debugUrl .icon-postpaid-limit-clock {
    background: url("/Content/themes/novapay/img/newDesign/icon/icon-postpaid-limit-clock.svg") no-repeat center;
}

.icon-back-arrow-black {
    background: url("../img/newDesign/icon/back-arrow-black.svg") no-repeat center;
}

.debugUrl .icon-back-arrow-black {
    background: url("/Content/themes/novapay/img/newDesign/icon/back-arrow-black.svg") no-repeat center;
}

.icon-download-new-ui {
    position: relative;
    top: 3px;
    display: inline-block;
    width: 24px;
    height: 24px;
    background-color: currentColor;
    background-image: none;
    mask-image: url("../img/sprite.svg#icon-download");
}

.debugUrl .icon-download-new-ui {
    mask-image: url("/Content/themes/novapay/img/sprite.svg#icon-download");
}

.icon-download-new-ui {
    mask-repeat: no-repeat;
    mask-size: contain;
}

.icon-postpaid-plus-white {
    background: url("../img/newDesign/icon/icon-postpaid-plus-white.svg") no-repeat center;
}

.debugUrl .icon-postpaid-plus-white {
    background: url("/Content/themes/novapay/img/newDesign/icon/icon-postpaid-plus-white.svg") no-repeat center;
}

.icon-slick-arrow-left {
    display: inline-block;
    width: 24px;
    height: 24px;
    background-color: currentColor;
    background-image: none;
    mask-image: url("../img/sprite.svg#icon-slick-arrow-left");
}

.debugUrl .icon-slick-arrow-left {
    mask-image: url("/Content/themes/novapay/img/sprite.svg#icon-slick-arrow-left");
}

.icon-slick-arrow-left {
    mask-repeat: no-repeat;
    mask-size: contain;
}

.icon-slick-arrow-right {
    display: inline-block;
    width: 24px;
    height: 24px;
    background-color: currentColor;
    background-image: none;
    mask-image: url("../img/sprite.svg#icon-slick-arrow-right");
}

.debugUrl .icon-slick-arrow-right {
    mask-image: url("/Content/themes/novapay/img/sprite.svg#icon-slick-arrow-right");
}

.icon-slick-arrow-right {
    mask-repeat: no-repeat;
    mask-size: contain;
}

.icon-user-group {
    display: inline-block;
    width: 20px;
    height: 20px;
    background-color: currentColor;
    background-image: none;
    mask-image: url("../img/sprite.svg#user-group");
}

.debugUrl .icon-user-group {
    mask-image: url("/Content/themes/novapay/img/sprite.svg#user-group");
}

.icon-user-group {
    mask-repeat: no-repeat;
    mask-size: contain;
}

.icon-cross-user-group {
    display: inline-block;
    width: 20px;
    height: 20px;
    background-color: currentColor;
    background-image: none;
    mask-image: url("../img/sprite.svg#cross-user-group");
}

.debugUrl .icon-cross-user-group {
    mask-image: url("/Content/themes/novapay/img/sprite.svg#cross-user-group");
}

.icon-cross-user-group {
    mask-repeat: no-repeat;
    mask-size: contain;
}

.icon-send-email {
    display: inline-block;
    width: 20px;
    height: 20px;
    background-color: currentColor;
    background-image: none;
    mask-image: url("../img/sprite.svg#icon-send-email");
}

.debugUrl .icon-send-email {
    mask-image: url("/Content/themes/novapay/img/sprite.svg#icon-send-email");
}

.icon-send-email {
    mask-repeat: no-repeat;
    mask-size: contain;
}

.icon-edits {
    display: inline-block;
    width: 24px;
    height: 24px;
    background-color: currentColor;
    background-image: none;
    mask-image: url("../img/sprite.svg#icon-pen-edit");
}

.debugUrl .icon-edits {
    mask-image: url("/Content/themes/novapay/img/sprite.svg#icon-pen-edit");
}

.icon-edits {
    mask-repeat: no-repeat;
    mask-size: contain;
}

.icon-trianglee-warning {
    display: inline-block;
    width: 20px;
    height: 20px;
    background-color: currentColor;
    background-image: none;
    mask-image: url("../img/sprite.svg#icon-trianglee-warning");
}

.debugUrl .icon-trianglee-warning {
    mask-image: url("/Content/themes/novapay/img/sprite.svg#icon-trianglee-warning");
}

.icon-trianglee-warning {
    mask-repeat: no-repeat;
    mask-size: contain;
}

.icon-menu-extractsTurns {
    top: 0.5rem !important;
    display: inline-block;
    width: 24px;
    height: 24px;
    background-color: currentColor;
    background-image: none;
    mask-image: url("../img/sprite.svg#icon-menu-extractsTurns ");
}

.debugUrl .icon-menu-extractsTurns {
    mask-image: url("/Content/themes/novapay/img/sprite.svg#icon-menu-extractsTurns ");
}

.icon-menu-extractsTurns {
    mask-repeat: no-repeat;
    mask-size: contain;
}

.icon-info-new {
    display: inline-block;
    width: 20px;
    height: 20px;
    background-color: currentColor;
    background-image: none;
    mask-image: url("../img/sprite.svg#icon-info-new");
}

.debugUrl .icon-info-new {
    mask-image: url("/Content/themes/novapay/img/sprite.svg#icon-info-new");
}

.icon-info-new {
    mask-repeat: no-repeat;
    mask-size: contain;
}

.icon-export {
    display: inline-block;
    width: 16px;
    height: 16px;
    background-color: currentColor;
    background-image: none;
    mask-image: url("../img/sprite.svg#icon-export");
}

.debugUrl .icon-export {
    mask-image: url("/Content/themes/novapay/img/sprite.svg#icon-export");
}

.icon-export {
    mask-repeat: no-repeat;
    mask-size: contain;
}

.icon-send-payment-new {
    display: inline-block;
    width: 24px;
    height: 24px;
    background-color: currentColor;
    background-image: none;
    mask-image: url("../img/sprite.svg#icon-send-payment-new");
}

.debugUrl .icon-send-payment-new {
    mask-image: url("/Content/themes/novapay/img/sprite.svg#icon-send-payment-new");
}

.icon-send-payment-new {
    mask-repeat: no-repeat;
    mask-size: contain;
}

.icon-clear-input {
    display: inline-block;
    width: 24px;
    height: 24px;
    background-color: currentColor;
    background-image: none;
    mask-image: url("../img/sprite.svg#icon-clear-input");
}

.debugUrl .icon-clear-input {
    mask-image: url("/Content/themes/novapay/img/sprite.svg#icon-clear-input");
}

.icon-clear-input {
    mask-repeat: no-repeat;
    mask-size: contain;
}

.icon-clear-xSvg {
    display: inline-block;
    width: 24px;
    height: 24px;
    background-color: currentColor;
    background-image: none;
    mask-image: url("../img/sprite.svg#icon-clear-xSvg");
}

.debugUrl .icon-clear-xSvg {
    mask-image: url("/Content/themes/novapay/img/sprite.svg#icon-clear-xSvg");
}

.icon-clear-xSvg {
    mask-repeat: no-repeat;
    mask-size: contain;
}

.icon-calendar-svg {
    display: inline-block;
    width: 24px;
    height: 24px;
    background-color: currentColor;
    background-image: none;
    mask-image: url("../img/sprite.svg#icon-calendar-svg");
}

.debugUrl .icon-calendar-svg {
    mask-image: url("/Content/themes/novapay/img/sprite.svg#icon-calendar-svg");
}

.icon-calendar-svg {
    mask-repeat: no-repeat;
    mask-size: contain;
}

.icon-status-clock-svg {
    display: inline-block;
    width: 24px;
    height: 24px;
    background-color: currentColor;
    background-image: none;
    mask-image: url("../img/sprite.svg#icon-status-clock-svg");
}

.debugUrl .icon-status-clock-svg {
    mask-image: url("/Content/themes/novapay/img/sprite.svg#icon-status-clock-svg");
}

.icon-status-clock-svg {
    mask-repeat: no-repeat;
    mask-size: contain;
}

.icon-status-recall-svg {
    display: inline-block;
    width: 24px;
    height: 24px;
    background-color: currentColor;
    background-image: none;
    mask-image: url("../img/sprite.svg#icon-status-recall-svg");
}

.debugUrl .icon-status-recall-svg {
    mask-image: url("/Content/themes/novapay/img/sprite.svg#icon-status-recall-svg");
}

.icon-status-recall-svg {
    mask-repeat: no-repeat;
    mask-size: contain;
}

.icon-status-checkmark-svg {
    display: inline-block;
    width: 24px;
    height: 24px;
    background-color: currentColor;
    background-image: none;
    mask-image: url("../img/sprite.svg#icon-status-checkmark-svg");
}

.debugUrl .icon-status-checkmark-svg {
    mask-image: url("/Content/themes/novapay/img/sprite.svg#icon-status-checkmark-svg");
}

.icon-status-checkmark-svg {
    mask-repeat: no-repeat;
    mask-size: contain;
}

.icon-open-banking-svg {
    display: inline-block;
    width: 24px;
    height: 24px;
    background-color: currentColor;
    background-image: none;
    mask-image: url("../img/sprite.svg#icon-open-banking-svg");
}

.debugUrl .icon-open-banking-svg {
    mask-image: url("/Content/themes/novapay/img/sprite.svg#icon-open-banking-svg");
}

.icon-open-banking-svg {
    mask-repeat: no-repeat;
    mask-size: contain;
}

.icon-language {
    display: inline-block;
    width: 24px;
    height: 24px;
    background-color: currentColor;
    background-image: none;
    mask-image: url("../img/sprite.svg#icon-language");
}

.debugUrl .icon-language {
    mask-image: url("/Content/themes/novapay/img/sprite.svg#icon-language");
}

.icon-language {
    mask-repeat: no-repeat;
    mask-size: contain;
}

.icon-small-card-novapay {
    background: url("../img/newDesign/icon/icon-small-card-novapay.svg") no-repeat center;
}

.debugUrl .icon-small-card-novapay {
    background: url("/Content/themes/novapay/img/newDesign/icon/icon-small-card-novapay.svg") no-repeat center;
}

.error-notification-icon {
    background: url("../img/newDesign/icon/triangle.exclamation.svg") no-repeat center;
}

    .error-notification-icon.debugUrl {
        background: url("/Content/themes/novapay/img/newDesign/icon/triangle.exclamation.svg") no-repeat center;
    }

.sing-green-icon {
    background: url("../img/newDesign/icon/icon-sing.svg") no-repeat center;
}

    .sing-green-icon.debugUrl {
        background: url("/Content/themes/novapay/img/newDesign/icon/icon-sing.svg") no-repeat center;
    }

.sidebar {
    position: relative;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: column;
    justify-content: start;
    width: 100%;
    max-width: 251px;
    min-width: 230px;
    padding: 0.5rem;
    background-color: #fff;
    border-radius: 0.75rem;
    transition: transform 0.2s ease-out, opacity 0.2s ease-out;
    box-sizing: border-box;
    z-index: 1;
}

@media (min-width: 1624px) {
    .sidebar {
        max-width: 15.8%;
    }
}

@media (min-width: 2048px) {
    .sidebar {
        max-width: 345px;
    }
}

@media (max-width: 992px) {
    .sidebar {
        position: fixed;
        justify-content: space-between;
        top: 0;
        right: 0;
        max-height: fit-content;
        height: calc(100% - env(safe-area-inset-bottom));
        max-height: 100%;
        padding-bottom: env(safe-area-inset-bottom);
        transform: translateX(150%);
        z-index: 13;
        border-radius: 0;
        opacity: 0;
    }

        .sidebar:has(.activeMenuTab) {
            height: calc(100% - env(safe-area-inset-bottom));
        }

        .sidebar .sidebar-wrapper-menu {
            overflow-y: auto;
            display: flex;
            flex-direction: column;
            justify-content: start;
            height: 100vh;
            background-color: #fff;
            scrollbar-width: thin;
            scrollbar-color: rgba(168, 173, 180, 0.5);
        }

            .sidebar .sidebar-wrapper-menu::-webkit-scrollbar-track {
                background: rgba(168, 173, 180, 0.5);
                border-radius: 10px;
            }

            .sidebar .sidebar-wrapper-menu::-webkit-scrollbar-thumb {
                background: rgba(168, 173, 180, 0.5);
                border-radius: 10px;
            }

                .sidebar .sidebar-wrapper-menu::-webkit-scrollbar-thumb:hover {
                    background: rgba(168, 173, 180, 0.5);
                }
}

.sidebar nav {
    width: 100%;
}

    .sidebar nav ul {
        list-style-type: none;
        padding: 0;
    }

.sidebar-backdrop {
    display: none;
}

@media (max-width: 992px) {
    .sidebar-backdrop {
        display: block;
        position: fixed;
        height: 100%;
        z-index: 11;
        top: 0;
        width: 0;
        right: 0;
        transition: width 0.2s ease-out;
        background: rgba(50, 56, 60, 0.6);
        backdrop-filter: blur(1px);
        transform: rotate(180deg);
    }
}

@media (max-width: 992px) {
    .sidebar-opened .sidebar {
        transform: translateX(0);
        opacity: 1;
    }
}

.sidebar-opened .sidebar-backdrop {
    width: 100%;
}

.sidebar-close {
    display: none;
    position: absolute;
    left: -3.25rem;
    top: 50%;
    padding: 0.625rem;
    justify-content: center;
    align-items: center;
    gap: 0.625rem;
    border-radius: 0.5rem;
    background-color: #EDEFF1;
}

    .sidebar-close .btn-mobile-navToggle {
        height: 1.25rem;
        width: 1.25rem;
        padding: 0;
    }

    .sidebar-close .ico-n {
        height: 1.25rem;
        width: 1.25rem;
    }

@media (max-width: 992px) {
    .sidebar-close {
        display: flex;
    }
}

.navigation-menu-list .menu-list .menu-item {
    position: relative;
    padding: 0;
    border-radius: 4px;
    transition: background 0.22s ease-out;
    cursor: pointer;
    font-size: 14px;
}
.navigation-menu-list .menu-list .menu-item__content .icon-menu-credits {
  left: 6px !important;
  width: 30px;
}
.navigation-menu-list .menu-list .menu-item__content .icon-menu-contracts {
  width: 31px;
  height: 24px;
  left: 3px !important;
}
.navigation-menu-list .menu-list .menu-item__content .icon-menu-reports {
  left: 3.5px !important;
}
.navigation-menu-list .menu-list .menu-item__content .icon-menu-currencyForms {
  left: 2.5px !important;
}
.navigation-menu-list .menu-list .menu-item[data-code=PostpaidStatements][data-hasnotification=False] .notification {
  display: none;
}
.navigation-menu-list .menu-list .menu-item[data-code=PostpaidStatements][data-hasnotification=True] .notification {
  display: flex;
}
.navigation-menu-list .menu-list .menu-item[data-code=PostpaidStatements][data-hasnotification=True]:before {
  content: "";
  position: absolute;
  left: -0.625rem;
  top: 0;
  width: 3px;
  height: 100%;
  background: #E1CFF6;
}
.navigation-menu-list .menu-list .menu-item[data-code=PostpaidStatements][data-hasnotification=True]:after {
  content: "";
  position: absolute;
  left: -7px;
  height: 100%;
  top: 0;
  width: 0.875rem;
  opacity: 1;
  background: linear-gradient(90deg, rgba(105, 13, 211, 0.1) 0%, rgba(105, 13, 211, 0) 100%);
}
.navigation-menu-list .menu-list .menu-item[data-code=PostpaidStatements][data-hasnotification=True]:hover:after {
  opacity: 0;
  transition: opacity 0.22s ease-out;
}
.navigation-menu-list .menu-list .menu-item a {
  display: block;
  padding: 0.8rem 0.5rem 0.7rem 3rem;
  color: #767F8A;
  background-color: transparent;
  text-decoration: none;
  border-radius: 4px;
  opacity: 1 !important;
  pointer-events: auto !important;
}
.navigation-menu-list .menu-list .menu-item a p {
  display: flex;
  align-items: center;
  word-break: break-all;
}
.navigation-menu-list .menu-list .menu-item a:hover {
  background-color: #F5EDFF;
  color: #5E1CAB !important;
}
.navigation-menu-list .menu-list .menu-item a:hover .icon-menu-home {
  display: inline-block;
  width: 24px;
  height: 24px;
  background-color: currentColor;
  background-image: none;
  mask-image: url("../img/sprite.svg#icon-menu-home-hover");
}
.debugUrl .navigation-menu-list .menu-list .menu-item a:hover .icon-menu-home {
    mask-image: url("/Content/themes/novapay/img/sprite.svg#icon-menu-home-hover");
}

.navigation-menu-list .menu-list .menu-item a:hover .icon-menu-home {
    mask-repeat: no-repeat;
    mask-size: contain;
}

.navigation-menu-list .menu-list .menu-item a:hover .icon-menu-profile {
    display: inline-block;
    width: 30px;
    height: 30px;
    background-color: currentColor;
    background-image: none;
    mask-image: url("../img/sprite.svg#user-selected");
}

.debugUrl .navigation-menu-list .menu-list .menu-item a:hover .icon-menu-profile {
    mask-image: url("/Content/themes/novapay/img/sprite.svg#user-selected");
}

.navigation-menu-list .menu-list .menu-item a:hover .icon-menu-profile {
    mask-repeat: no-repeat;
    mask-size: contain;
}

.navigation-menu-list .menu-list .menu-item a:hover .icon-menu-help {
    display: inline-block;
    width: 32px;
    height: 32px;
    background-color: currentColor;
    background-image: none;
    mask-image: url("../img/sprite.svg#help-selected");
}

.debugUrl .navigation-menu-list .menu-list .menu-item a:hover .icon-menu-help {
    mask-image: url("/Content/themes/novapay/img/sprite.svg#help-selected");
}

.navigation-menu-list .menu-list .menu-item a:hover .icon-menu-help {
    mask-repeat: no-repeat;
    mask-size: contain;
}

.navigation-menu-list .menu-list .menu-item a:hover .icon-menu-postpaidStatements {
    display: inline-block;
    width: 24px;
    height: 24px;
    background-color: currentColor;
    background-image: none;
    mask-image: url("../img/sprite.svg#icon-menu-postpaidStatements-hover");
}

.debugUrl .navigation-menu-list .menu-list .menu-item a:hover .icon-menu-postpaidStatements {
    mask-image: url("/Content/themes/novapay/img/sprite.svg#icon-menu-postpaidStatements-hover");
}

.navigation-menu-list .menu-list .menu-item a:hover .icon-menu-postpaidStatements {
    mask-repeat: no-repeat;
    mask-size: contain;
}

.navigation-menu-list .menu-list .menu-item a:hover .icon-menu-extractsTurns {
    display: inline-block;
    width: 24px;
    height: 24px;
    background-color: currentColor;
    background-image: none;
    mask-image: url("../img/sprite.svg#icon-menu-extractsTurns");
}

.debugUrl .navigation-menu-list .menu-list .menu-item a:hover .icon-menu-extractsTurns {
    mask-image: url("/Content/themes/novapay/img/sprite.svg#icon-menu-extractsTurns");
}

.navigation-menu-list .menu-list .menu-item a:hover .icon-menu-extractsTurns {
    mask-repeat: no-repeat;
    mask-size: contain;
}

.navigation-menu-list .menu-list .menu-item.activeExtraMenuTab a {
    background-color: #F5EDFF;
    color: #5E1CAB !important;
}

    .navigation-menu-list .menu-list .menu-item.activeExtraMenuTab a .icon-menu-home {
        display: inline-block;
        width: 24px;
        height: 24px;
        background-color: currentColor;
        background-image: none;
        mask-image: url("../img/sprite.svg#icon-menu-home");
    }

.debugUrl .navigation-menu-list .menu-list .menu-item.activeExtraMenuTab a .icon-menu-home {
    mask-image: url("/Content/themes/novapay/img/sprite.svg#icon-menu-home");
}

.navigation-menu-list .menu-list .menu-item.activeExtraMenuTab a .icon-menu-home {
    mask-repeat: no-repeat;
    mask-size: contain;
}

.navigation-menu-list .menu-list .menu-item.activeExtraMenuTab a .icon-menu-profile {
    display: inline-block;
    width: 30px;
    height: 30px;
    background-color: currentColor;
    background-image: none;
    mask-image: url("../img/sprite.svg#user-selected");
}

.debugUrl .navigation-menu-list .menu-list .menu-item.activeExtraMenuTab a .icon-menu-profile {
    mask-image: url("/Content/themes/novapay/img/sprite.svg#user-selected");
}

.navigation-menu-list .menu-list .menu-item.activeExtraMenuTab a .icon-menu-profile {
    mask-repeat: no-repeat;
    mask-size: contain;
}

.navigation-menu-list .menu-list .menu-item.activeExtraMenuTab a .icon-menu-help {
    display: inline-block;
    width: 32px;
    height: 32px;
    background-color: currentColor;
    background-image: none;
    mask-image: url("../img/sprite.svg#help-selected");
}

.debugUrl .navigation-menu-list .menu-list .menu-item.activeExtraMenuTab a .icon-menu-help {
    mask-image: url("/Content/themes/novapay/img/sprite.svg#help-selected");
}

.navigation-menu-list .menu-list .menu-item.activeExtraMenuTab a .icon-menu-help {
    mask-repeat: no-repeat;
    mask-size: contain;
}

.navigation-menu-list .menu-list .menu-item.activeExtraMenuTab a .icon-menu-extractsTurns {
    background-color: #690DD3 !important;
    display: inline-block;
    width: 24px;
    height: 24px;
    background-color: currentColor;
    background-image: none;
    mask-image: url("../img/sprite.svg#icon-menu-extractsTurns");
}

.debugUrl .navigation-menu-list .menu-list .menu-item.activeExtraMenuTab a .icon-menu-extractsTurns {
    mask-image: url("/Content/themes/novapay/img/sprite.svg#icon-menu-extractsTurns");
}

.navigation-menu-list .menu-list .menu-item.activeExtraMenuTab a .icon-menu-extractsTurns {
    mask-repeat: no-repeat;
    mask-size: contain;
}

.navigation-menu-list .menu-list .menu-item.activeExtraMenuTab[data-hasnotification=True] .notification {
    display: none;
}

.navigation-menu-list .menu-list .menu-item.activeExtraMenuTab[data-hasnotification=True]:before {
    display: none;
}

.navigation-menu-list .menu-list .menu-item.activeExtraMenuTab[data-hasnotification=True]:after {
    display: none;
}

.navigation-menu-list .menu-list .menu-item .icon {
    position: absolute;
    top: 4px;
    left: 8px;
}

    .navigation-menu-list .menu-list .menu-item .icon.icon-menu-visa {
        display: inline-block;
        width: 24px;
        height: 24px;
        background-color: currentColor;
        background-image: none;
        mask-image: url("../img/sprite.svg#icon-menu-visa");
    }

.debugUrl .navigation-menu-list .menu-list .menu-item .icon.icon-menu-visa {
    mask-image: url("/Content/themes/novapay/img/sprite.svg#icon-menu-visa");
}

.navigation-menu-list .menu-list .menu-item .icon.icon-menu-visa {
    mask-repeat: no-repeat;
    mask-size: contain;
}

.navigation-menu-list .menu-list .menu-item.activeMenuTab .menu-item__content {
    background-color: #F5EDFF;
    color: #5E1CAB;
    transition: background 0.42s ease-out;
}

    .navigation-menu-list .menu-list .menu-item.activeMenuTab .menu-item__content:before {
        transform: rotate(0deg);
    }

@media (max-width: 992px) {
    .navigation-menu-list .menu-list .menu-item.activeMenuTab .menu-item__content:before {
        transform: rotate(90deg);
    }
}

.navigation-menu-list .menu-list .menu-item.activeMenuTab:hover {
    color: #5E1CAB;
}

.navigation-menu-list .menu-list .menu-item.activeMenuTab a {
    background-color: #F5EDFF;
    color: #690DD3;
}

    .navigation-menu-list .menu-list .menu-item.activeMenuTab a:hover {
        background: none;
        color: #767F8A;
    }

.navigation-menu-list .menu-list .menu-item.activeMenuTab .sub-menu a {
    background-color: #fff;
    color: #767F8A;
}

    .navigation-menu-list .menu-list .menu-item.activeMenuTab .sub-menu a:hover {
        background-color: #fff;
        color: #767F8A;
    }

.navigation-menu-list .menu-list .menu-item__content {
    display: flex;
    flex-direction: row;
    align-items: center;
    width: 100%;
    padding: 0.8rem 0.5rem 0.7rem 3rem;
    background: #fff;
    color: #767F8A;
    border-radius: 4px;
}

    .navigation-menu-list .menu-list .menu-item__content:hover {
        background-color: #F5EDFF;
        color: #5E1CAB;
        transition: background 0.42s ease-out;
    }

        .navigation-menu-list .menu-list .menu-item__content:hover:before {
            color: #5E1CAB;
        }

        .navigation-menu-list .menu-list .menu-item__content:hover .icon-menu-accounts {
            display: inline-block;
            width: 24px;
            height: 24px;
            background-color: currentColor;
            background-image: none;
            mask-image: url("../img/sprite.svg#icon-menu-wallet-hover");
        }

.debugUrl .navigation-menu-list .menu-list .menu-item__content:hover .icon-menu-accounts {
    mask-image: url("/Content/themes/novapay/img/sprite.svg#icon-menu-wallet-hover");
}

.navigation-menu-list .menu-list .menu-item__content:hover .icon-menu-accounts {
    mask-repeat: no-repeat;
    mask-size: contain;
}

.navigation-menu-list .menu-list .menu-item__content:hover .icon-menu-payments {
    display: inline-block;
    width: 24px;
    height: 24px;
    background-color: currentColor;
    background-image: none;
    mask-image: url("../img/sprite.svg#icon-menu-payments-hover");
}

.debugUrl .navigation-menu-list .menu-list .menu-item__content:hover .icon-menu-payments {
    mask-image: url("/Content/themes/novapay/img/sprite.svg#icon-menu-payments-hover");
}

.navigation-menu-list .menu-list .menu-item__content:hover .icon-menu-payments {
    mask-repeat: no-repeat;
    mask-size: contain;
}

.navigation-menu-list .menu-list .menu-item__content:hover .icon-menu-visa {
    display: inline-block;
    width: 24px;
    height: 24px;
    background-color: currentColor;
    background-image: none;
    mask-image: url("../img/sprite.svg#icon-menu-visa");
}

.debugUrl .navigation-menu-list .menu-list .menu-item__content:hover .icon-menu-visa {
    mask-image: url("/Content/themes/novapay/img/sprite.svg#icon-menu-visa");
}

.navigation-menu-list .menu-list .menu-item__content:hover .icon-menu-visa {
    mask-repeat: no-repeat;
    mask-size: contain;
}

.navigation-menu-list .menu-list .menu-item__content:hover .icon-menu-cards {
    display: inline-block;
    width: 24px;
    height: 24px;
    background-color: currentColor;
    background-image: none;
    mask-image: url("../img/sprite.svg#icon-menu-cards-hover");
}

.debugUrl .navigation-menu-list .menu-list .menu-item__content:hover .icon-menu-cards {
    mask-image: url("/Content/themes/novapay/img/sprite.svg#icon-menu-cards-hover");
}

.navigation-menu-list .menu-list .menu-item__content:hover .icon-menu-cards {
    mask-repeat: no-repeat;
    mask-size: contain;
}

.navigation-menu-list .menu-list .menu-item__content:hover .icon-menu-deposits {
    display: inline-block;
    width: 24px;
    height: 24px;
    background-color: currentColor;
    background-image: none;
    mask-image: url("../img/sprite.svg#icon-menu-case-hover");
}

.debugUrl .navigation-menu-list .menu-list .menu-item__content:hover .icon-menu-deposits {
    mask-image: url("/Content/themes/novapay/img/sprite.svg#icon-menu-case-hover");
}

.navigation-menu-list .menu-list .menu-item__content:hover .icon-menu-deposits {
    mask-repeat: no-repeat;
    mask-size: contain;
}

.navigation-menu-list .menu-list .menu-item__content:hover .icon-menu-contracts {
    background-position: -59px -594px;
}

.navigation-menu-list .menu-list .menu-item__content:hover .icon-menu-currencyForms {
    background-position: -1px -331px;
}

.navigation-menu-list .menu-list .menu-item__content:hover .icon-menu-salaryCardProject {
    display: inline-block;
    width: 24px;
    height: 24px;
    background-color: currentColor;
    background-image: none;
    mask-image: url("../img/sprite.svg#icon-menu-salaryCardProject-hover");
}

.debugUrl .navigation-menu-list .menu-list .menu-item__content:hover .icon-menu-salaryCardProject {
    mask-image: url("/Content/themes/novapay/img/sprite.svg#icon-menu-salaryCardProject-hover");
}

.navigation-menu-list .menu-list .menu-item__content:hover .icon-menu-salaryCardProject {
    mask-repeat: no-repeat;
    mask-size: contain;
}

.navigation-menu-list .menu-list .menu-item__content:hover .icon-menu-mail {
    display: inline-block;
    width: 24px;
    height: 24px;
    background-color: currentColor;
    background-image: none;
    mask-image: url("../img/sprite.svg#icon-menu-mail-hover");
}

.debugUrl .navigation-menu-list .menu-list .menu-item__content:hover .icon-menu-mail {
    mask-image: url("/Content/themes/novapay/img/sprite.svg#icon-menu-mail-hover");
}

.navigation-menu-list .menu-list .menu-item__content:hover .icon-menu-mail {
    mask-repeat: no-repeat;
    mask-size: contain;
}

.navigation-menu-list .menu-list .menu-item__content:hover .icon-menu-reports {
    display: inline-block;
    width: 33px;
    height: 33px;
    background-color: currentColor;
    background-image: none;
    mask-image: url("../img/sprite.svg#chart-selected");
}

.debugUrl .navigation-menu-list .menu-list .menu-item__content:hover .icon-menu-reports {
    mask-image: url("/Content/themes/novapay/img/sprite.svg#chart-selected");
}

.navigation-menu-list .menu-list .menu-item__content:hover .icon-menu-reports {
    mask-repeat: no-repeat;
    mask-size: contain;
}

.navigation-menu-list .menu-list .menu-item__content:hover .icon-menu-references {
    display: inline-block;
    width: 24px;
    height: 24px;
    background-color: currentColor;
    background-image: none;
    mask-image: url("../img/sprite.svg#icon-bookmark-2-hover");
}

.debugUrl .navigation-menu-list .menu-list .menu-item__content:hover .icon-menu-references {
    mask-image: url("/Content/themes/novapay/img/sprite.svg#icon-bookmark-2-hover");
}

.navigation-menu-list .menu-list .menu-item__content:hover .icon-menu-references {
    mask-repeat: no-repeat;
    mask-size: contain;
}

.navigation-menu-list .menu-list .menu-item__content:hover .icon-menu-extracts {
    display: inline-block;
    width: 24px;
    height: 24px;
    background-color: currentColor;
    background-image: none;
    mask-image: url("../img/sprite.svg#icon-menu-extracts-hover");
}

.debugUrl .navigation-menu-list .menu-list .menu-item__content:hover .icon-menu-extracts {
    mask-image: url("/Content/themes/novapay/img/sprite.svg#icon-menu-extracts-hover");
}

.navigation-menu-list .menu-list .menu-item__content:hover .icon-menu-extracts {
    mask-repeat: no-repeat;
    mask-size: contain;
}

.navigation-menu-list .menu-list .menu-item__content:hover .icon-menu-system {
    display: inline-block;
    width: 24px;
    height: 24px;
    background-color: currentColor;
    background-image: none;
    mask-image: url("../img/sprite.svg#bank-selected");
}

.debugUrl .navigation-menu-list .menu-list .menu-item__content:hover .icon-menu-system {
    mask-image: url("/Content/themes/novapay/img/sprite.svg#bank-selected");
}

.navigation-menu-list .menu-list .menu-item__content:hover .icon-menu-system {
    mask-repeat: no-repeat;
    mask-size: contain;
}

.navigation-menu-list .menu-list .menu-item__content:before {
    content: "";
    position: absolute;
    right: 5px;
    top: 0.875rem;
    opacity: 1;
    transform: rotate(90deg);
    transition: transform 0.22s ease-out;
    display: inline-block;
    width: 16px;
    height: 16px;
    background-color: currentColor;
    background-image: none;
    mask-image: url("../img/sprite.svg#icon-small-up");
}

.debugUrl .navigation-menu-list .menu-list .menu-item__content:before {
    mask-image: url("/Content/themes/novapay/img/sprite.svg#icon-small-up");
}

.navigation-menu-list .menu-list .menu-item__content:before {
    mask-repeat: no-repeat;
    mask-size: contain;
}

.navigation-menu-list .menu-list .menu-item .notification {
    position: absolute;
    top: 50%;
    left: -1.1rem;
    justify-content: center;
    align-items: center;
    height: 1.125rem;
    width: 1.125rem;
    padding-right: 2px;
    border-radius: 50%;
    transform: translateY(-50%);
    background: #690DD3;
}

    .navigation-menu-list .menu-list .menu-item .notification .notification-count {
        display: block;
        width: 100%;
        font-size: 11px;
        color: #fff;
        text-align: center;
    }

.sub-menu {
    display: none;
    padding: 0;
}

    .sub-menu .submenu-list .backArrow {
        display: none !important;
    }

    .sub-menu .submenu-list .menu-item {
        padding: 0;
    }

        .sub-menu .submenu-list .menu-item a {
            padding: 0.8rem 0 0.7rem 3rem !important;
            margin: 0;
            background: none;
        }

        .sub-menu .submenu-list .menu-item:hover {
            background-color: #fff;
        }

            .sub-menu .submenu-list .menu-item:hover a {
                background: none !important;
            }

        .sub-menu .submenu-list .menu-item.activeExtraMenuTab {
            background-color: transparent;
        }

            .sub-menu .submenu-list .menu-item.activeExtraMenuTab a {
                background-image: none;
                color: #690DD3 !important;
            }

                .sub-menu .submenu-list .menu-item.activeExtraMenuTab a:before {
                    background: none;
                }

                .sub-menu .submenu-list .menu-item.activeExtraMenuTab a:hover:before {
                    background: none;
                }

@media (max-width: 992px) {
    .sub-menu {
        display: none !important;
    }
}

.sidebar-helper {
    display: flex;
    flex-direction: column;
    width: 100%;
    padding-bottom: 1.5rem;
    margin-top: 1.25rem;
}

.sidebar-helper__item {
    position: relative;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    padding: 0.74rem 0.5rem 0.5rem 2.8rem;
    flex: 1 1 100%;
    border-radius: 4px;
    color: #767F8A;
}

    .sidebar-helper__item .ico-n {
        position: absolute;
        top: 50%;
        left: 5px;
        transform: translateY(-50%);
    }

@media (max-width: 992px) {
    .sidebar-helper__item .ico-n {
        left: 7px;
    }
}

.sidebar-helper__item-text {
    font-size: 12px;
}

.sidebar-helper__item:hover {
    background: #F5EDFF;
    color: #5E1CAB;
}

    .sidebar-helper__item:hover a {
        color: #5E1CAB !important;
        text-decoration: none;
        border: none;
    }

.sidebar-helper__language {
    padding: 1rem 0 0 4px;
}

    .sidebar-helper__language:hover {
        background: transparent;
    }

.sidebar-helper .language-list__wrapper {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
}

    .sidebar-helper .language-list__wrapper .language-item {
        padding: 4px 10px;
        width: 110px;
        border-radius: 0.5rem;
        border: 1px solid #DBDFE4;
        background: #f4f6f7;
        font-size: 14px;
        font-weight: 500;
        color: #767F8A;
    }

        .sidebar-helper .language-list__wrapper .language-item.action-language {
            border-color: #c39eed;
            background: #F5EDFF;
            color: #690DD3;
        }

        .sidebar-helper .language-list__wrapper .language-item[data-value-action=UA] {
            order: 1;
            margin-right: 0.5rem;
        }

        .sidebar-helper .language-list__wrapper .language-item[data-value-action=EN] {
            order: 2;
        }

.sidebar-nav__contacts {
    display: none;
}

    .sidebar-nav__contacts .btn-username {
        position: relative;
        padding: 0.86rem 0.5rem 0.77rem 2.875rem;
        width: 100%;
        background: #fff;
        border-radius: 4px;
        color: #32383c;
        cursor: pointer;
    }

        .sidebar-nav__contacts .btn-username:after {
            content: "";
            position: absolute;
            left: 6px;
            top: 6px;
            height: 30px;
            width: 30px;
            border-radius: 50%;
            background-color: #EDEFF1;
        }

        .sidebar-nav__contacts .btn-username .icon-person {
            position: absolute;
            top: 50%;
            left: 0.75rem;
            border-radius: 50%;
            z-index: 1;
            transform: translateY(-50%);
        }

        .sidebar-nav__contacts .btn-username .icon-small-up {
            position: absolute;
            top: 50%;
            right: 0;
            transform: translateY(-50%) rotate(90deg);
        }

        .sidebar-nav__contacts .btn-username span {
            max-width: 10rem;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            text-align: left;
            font-size: 14px;
            font-family: "Fixel Text", "Fixel Display", "Helvetica", "Arial", sans-serif !important;
            font-weight: 500;
        }

.debugUrl .sidebar-nav__contacts .btn-username span {
    font-family: "Fixel Text", "Fixel Display", "Helvetica", "Arial", sans-serif !important;
}

@media (max-width: 992px) {
    .sidebar-nav__contacts {
        display: flex;
    }
}

.sidebar-nav__dropdown {
    position: fixed;
    display: flex;
    justify-content: space-between;
    flex-direction: column;
    top: 0;
    height: 100%;
    background-color: #fff;
    border-radius: 0;
    z-index: 10;
    width: 0;
    right: 0;
    opacity: 1;
    transition: transform 0.2s ease-out, width 0.2s ease-out, opacity 0.2s ease-out;
    transform: translateX(100%);
}

    .sidebar-nav__dropdown .dropdown-item {
        padding: 0.85rem 0.5rem 0.65rem 2.875rem;
    }

    .sidebar-nav__dropdown .btn-back {
        position: relative;
        padding: 0.9rem 0.5rem 0.9rem 2.5rem;
        border-radius: 0.25rem;
        color: #32383c;
        font-size: 16px;
        font-weight: 500;
        width: 100%;
        text-align: left;
    }

        .sidebar-nav__dropdown .btn-back:hover {
            color: #000000;
        }

        .sidebar-nav__dropdown .btn-back .ico-n {
            position: absolute;
            top: 50%;
            left: 5px;
            transform: translateY(-50%);
        }

        .sidebar-nav__dropdown .btn-back:before {
            content: "";
            position: absolute;
            left: -0.5rem;
            bottom: -0.5rem;
            height: 1px;
            width: 108%;
            background: #DBDFE4;
        }

    .sidebar-nav__dropdown .ico-n {
        position: absolute;
        top: 50%;
        left: 0.5rem;
        transform: translateY(-50%);
    }

    .sidebar-nav__dropdown .sub-menu_show .submenu-list {
        padding: 0.5rem 0 0 0;
    }

    .sidebar-nav__dropdown .sub-menu_show .submenu-item {
        display: none;
    }

    .sidebar-nav__dropdown .sub-menu_show .menu-item {
        position: relative;
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        padding: 1rem 1rem 0.9rem 1rem;
        border-radius: 0.25rem;
        font-size: 14px;
        color: #767F8A;
    }

        .sidebar-nav__dropdown .sub-menu_show .menu-item.activeExtraMenuTab {
            color: #690DD3 !important;
        }

        .sidebar-nav__dropdown .sub-menu_show .menu-item:hover {
            background: #f4f6f7;
            color: #000000;
        }

            .sidebar-nav__dropdown .sub-menu_show .menu-item:hover a {
                color: #000000 !important;
                text-decoration: none;
                border: none;
            }

@media (max-width: 992px) {
    .sidebar-nav__dropdown .sub-menu_show .menu-item {
        padding: 0;
    }

        .sidebar-nav__dropdown .sub-menu_show .menu-item a {
            width: 100%;
            display: block;
            padding: 1rem 1rem 0.9rem 1rem;
        }
}

.sidebar-nav__dropdown.open {
    transform: translateX(0);
    width: 100%;
    right: 0;
    max-height: 100%;
    opacity: 1;
}

@media (max-width: 992px) {
    .sidebar-nav__dropdown.open {
        display: flex;
        padding-bottom: calc(1.5rem + env(safe-area-inset-bottom));
    }
}

.sidebar-nav__dropdown.open.profile .sidebar-nav__submenu-control {
    display: block;
}

@media (max-width: 992px) {
    .sidebar-nav__dropdown-profile .sidebar-nav__item-back.dropdown-item {
        padding: 0;
        border-radius: 0.25rem;
        margin-bottom: 0.25rem;
    }
}

.sidebar-nav__submenu-control {
    display: none;
}

    .sidebar-nav__submenu-control .submenu-item__exit,
    .sidebar-nav__submenu-control .submenu-item__old-version {
        padding: 0.5rem 0.5rem 0.5rem 2.5rem;
        height: 2.5rem;
        border-radius: 0.5rem;
        border: 1px solid transparent;
    }

        .sidebar-nav__submenu-control .submenu-item__exit .btn-back__old,
        .sidebar-nav__submenu-control .submenu-item__exit a,
        .sidebar-nav__submenu-control .submenu-item__old-version .btn-back__old,
        .sidebar-nav__submenu-control .submenu-item__old-version a {
            font-size: 14px;
            font-family: "Fixel Text", "Fixel Display", "Helvetica", "Arial", sans-serif !important;
            font-weight: 500;
            text-align: left;
        }

    .sidebar-nav__submenu-control .submenu-item__old-version {
        margin-bottom: 1rem;
        background-color: #F5EDFF;
        border-color: #690DD3;
        color: #5E1CAB;
    }

        .sidebar-nav__submenu-control .submenu-item__old-version .btn-back__old {
            padding: 0;
            color: #5E1CAB;
        }

        .sidebar-nav__submenu-control .submenu-item__old-version:hover {
            background-color: rgb(84.9673202614%, 72.9411764706%, 100%);
        }

    .sidebar-nav__submenu-control .submenu-item__exit {
        border-color: #DE4420;
        background-color: #FFEEE2;
    }

        .sidebar-nav__submenu-control .submenu-item__exit a {
            display: flex;
            align-items: center;
            color: #DE4420 !important;
        }

        .sidebar-nav__submenu-control .submenu-item__exit:hover {
            background-color: rgb(100%, 81.6091954023%, 68.6274509804%);
        }

            .sidebar-nav__submenu-control .submenu-item__exit:hover a {
                color: #DE4420 !important;
            }

.sidebar-selector {
    position: relative;
    display: none;
    flex-wrap: nowrap;
    flex-direction: column;
    justify-content: space-between;
    width: 100%;
    min-height: 4.375rem;
    margin-bottom: 1rem;
    border-radius: 0.75rem;
    font-size: 14px;
    font-weight: 500;
    color: #767F8A;
    background-color: #fff;
    line-height: 1.35;
}

    .sidebar-selector *,
    .sidebar-selector :after,
    .sidebar-selector :before {
        box-sizing: border-box;
    }

@media (max-width: 992px) {
    .sidebar-selector {
        max-width: 14.188rem;
    }
}

.sidebar-selector__search-block {
    position: relative;
}

    .sidebar-selector__search-block .ico-n {
        position: absolute;
        left: 5px;
        top: 6px;
    }

.sidebar-selector__search-input {
    display: block;
    width: 100%;
    border-radius: 0.5px 0.5px 0 0;
    border-color: transparent;
    padding: 0.5rem 0.75rem 0.5rem 2rem;
    background: #FFF;
    color: #767F8A;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 1.35;
}

    .sidebar-selector__search-input:focus {
        border-color: #9b51e0;
        box-shadow: 0 0 4px rgba(155, 81, 224, 0.2);
    }

.sidebar-selector.open .sidebar-selector__search-input {
    display: block;
    width: 100%;
    border-color: transparent;
}

.sidebar-selector.open .multi-select__show {
    border-color: #E1CFF6;
}

    .sidebar-selector.open .multi-select__show .icon-arrow:before {
        transform: rotate(0deg);
    }

.sidebar-selector.open .sidebar-selector__wrapper {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0.625rem) scaleY(1);
}

.sidebar-selector.open .sidebar-selector__list {
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    justify-content: start;
    max-height: 24.4rem;
    scrollbar-width: thin;
    scrollbar-color: rgba(168, 173, 180, 0.5);
}

    .sidebar-selector.open .sidebar-selector__list::-webkit-scrollbar-track {
        background: rgba(168, 173, 180, 0.5);
        border-radius: 10px;
    }

    .sidebar-selector.open .sidebar-selector__list::-webkit-scrollbar-thumb {
        background: rgba(168, 173, 180, 0.5);
        border-radius: 10px;
    }

        .sidebar-selector.open .sidebar-selector__list::-webkit-scrollbar-thumb:hover {
            background: rgba(168, 173, 180, 0.5);
        }

.sidebar-selector.open .sidebar-selector-wrap {
    display: flex;
    gap: 0.25rem;
    align-items: center;
}

.sidebar-selector .multi-select__show {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 0.25rem;
    padding: 0.75rem;
    margin-bottom: 0;
    border-radius: 0.75rem;
    border: 1px solid #DBDFE4;
    cursor: pointer;
}

    .sidebar-selector .multi-select__show .icon-arrow {
        position: absolute;
        right: 0.75rem;
        top: 50%;
        height: 1rem;
        width: 1rem;
        opacity: 1;
        transform: translateY(-50%);
    }

        .sidebar-selector .multi-select__show .icon-arrow:before {
            content: "";
            position: relative;
            display: block;
            transform: rotate(180deg);
            transition: transform 0.32s ease-out;
            display: inline-block;
            width: 16px;
            height: 16px;
            background-color: currentColor;
            background-image: none;
            mask-image: url("../img/sprite.svg#icon-small-up");
        }

.debugUrl .sidebar-selector .multi-select__show .icon-arrow:before {
    mask-image: url("/Content/themes/novapay/img/sprite.svg#icon-small-up");
}

.sidebar-selector .multi-select__show .icon-arrow:before {
    mask-repeat: no-repeat;
    mask-size: contain;
}

.sidebar-selector .multi-select__wraper {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

    .sidebar-selector .multi-select__wraper .vue-dropdown-wrapper {
        width: 100%;
    }

        .sidebar-selector .multi-select__wraper .vue-dropdown-wrapper .p-multiselect {
            width: 100%;
        }

            .sidebar-selector .multi-select__wraper .vue-dropdown-wrapper .p-multiselect:not(:disabled):hover, .sidebar-selector .multi-select__wraper .vue-dropdown-wrapper .p-multiselect:not(:disabled).p-focus {
                border: none;
            }

        .sidebar-selector .multi-select__wraper .vue-dropdown-wrapper .p-multiselect-label-empty {
            visibility: visible;
        }

        .sidebar-selector .multi-select__wraper .vue-dropdown-wrapper .p-multiselect-label .multi-select__text {
            display: flex;
            flex-direction: column;
            justify-content: center;
        }

        .sidebar-selector .multi-select__wraper .vue-dropdown-wrapper .p-multiselect-dropdown:has(.icon-arrow) {
            position: relative;
            display: flex;
            align-items: center;
            justify-content: center;
            height: auto;
            width: 1rem;
        }

        .sidebar-selector .multi-select__wraper .vue-dropdown-wrapper .p-multiselect-dropdown .icon-arrow {
            position: static;
            transform: translateY(0);
        }

            .sidebar-selector .multi-select__wraper .vue-dropdown-wrapper .p-multiselect-dropdown .icon-arrow:before {
                transform: rotate(180deg);
                transition: transform 0.32s ease-out;
            }

        .sidebar-selector .multi-select__wraper .vue-dropdown-wrapper .p-multiselect-overlay {
            position: absolute;
            top: 100%;
            display: flex;
            flex-direction: column;
            width: calc(100% + 1.5rem);
            transition: max-height 0.32s ease-out, opacity 0.22s ease-out, transform 0.22s cubic-bezier(0.55, 0.085, 0.68, 0.53);
            transform-origin: top;
            transform: translate(-0.75rem, 1.8rem);
            opacity: 0;
            pointer-events: none;
            box-shadow: 0 -9px 0 0 #fff;
            background-color: #fff;
            border-radius: 0.75rem;
            border: 1px solid #E1CFF6;
            overflow: hidden;
            z-index: 2;
        }

            .sidebar-selector .multi-select__wraper .vue-dropdown-wrapper .p-multiselect-overlay .sidebar-selector__footer {
                position: absolute;
                bottom: 0;
                width: 100%;
            }

                .sidebar-selector .multi-select__wraper .vue-dropdown-wrapper .p-multiselect-overlay .sidebar-selector__footer .selection-label {
                    margin: 0;
                }

                .sidebar-selector .multi-select__wraper .vue-dropdown-wrapper .p-multiselect-overlay .sidebar-selector__footer .selection-info {
                    justify-content: start;
                }

        .sidebar-selector .multi-select__wraper .vue-dropdown-wrapper .p-multiselect-header {
            order: 1;
        }

            .sidebar-selector .multi-select__wraper .vue-dropdown-wrapper .p-multiselect-header .p-inputtext {
                display: block;
                width: 100%;
                border-radius: 0.5px 0.5px 0 0;
                border-top: none;
                border-left: none;
                border-right: none;
                border-bottom: 1px solid #DBDFE4;
                padding: 0.5rem 0.75rem 0.5rem 2rem;
                background: #FFF;
                color: #767F8A;
                font-size: 14px;
                font-style: normal;
                font-weight: 400;
                line-height: 1.35;
            }

        .sidebar-selector .multi-select__wraper .vue-dropdown-wrapper .p-multiselect-filter-container {
            position: relative;
            display: flex;
        }

            .sidebar-selector .multi-select__wraper .vue-dropdown-wrapper .p-multiselect-filter-container .p-inputicon {
                position: absolute;
                left: 0.5rem;
                transform: translateY(-50%);
                height: 1.5rem;
                width: 1.5rem;
                margin: 0;
            }

        .sidebar-selector .multi-select__wraper .vue-dropdown-wrapper .p-multiselect .vue-dropdown-select-all {
            order: 2;
            padding: 0.75rem;
            gap: 0.63rem;
            display: flex;
            border-bottom: 1px solid #DBDFE4;
        }

            .sidebar-selector .multi-select__wraper .vue-dropdown-wrapper .p-multiselect .vue-dropdown-select-all .form-check {
                display: flex;
                align-items: center;
                gap: 0.5rem;
                padding: 0.75rem;
                border-bottom: 1px solid #DBDFE4;
                cursor: pointer;
            }

            .sidebar-selector .multi-select__wraper .vue-dropdown-wrapper .p-multiselect .vue-dropdown-select-all label {
                color: #000000;
                cursor: pointer;
            }

            .sidebar-selector .multi-select__wraper .vue-dropdown-wrapper .p-multiselect .vue-dropdown-select-all .p-checkbox {
                height: 1.25rem;
                width: 1.25rem;
                margin-left: 0;
            }

                .sidebar-selector .multi-select__wraper .vue-dropdown-wrapper .p-multiselect .vue-dropdown-select-all .p-checkbox .p-checkbox-input {
                    border-color: #DBDFE4;
                    background: #fff;
                }

                .sidebar-selector .multi-select__wraper .vue-dropdown-wrapper .p-multiselect .vue-dropdown-select-all .p-checkbox.p-checkbox-checked .p-checkbox-box {
                    border-radius: 0.25rem;
                    border: 1px solid #690DD3;
                    background: #690DD3;
                }

            .sidebar-selector .multi-select__wraper .vue-dropdown-wrapper .p-multiselect .vue-dropdown-select-all .p-checkbox-box .p-checkbox-icon {
                stroke: white;
                stroke-width: 1.1px;
                stroke-linejoin: round;
                width: 0.875rem;
                height: 0.875rem;
            }

            .sidebar-selector .multi-select__wraper .vue-dropdown-wrapper .p-multiselect .vue-dropdown-select-all .p-checkbox-box {
                height: 100%;
                width: 100%;
                border: 1px solid #DBDFE4;
                background: #fff;
                border-radius: 0.25rem;
            }

                .sidebar-selector .multi-select__wraper .vue-dropdown-wrapper .p-multiselect .vue-dropdown-select-all .p-checkbox-box:hover {
                    border-color: #690DD3;
                    background: #fff;
                }

            .sidebar-selector .multi-select__wraper .vue-dropdown-wrapper .p-multiselect .vue-dropdown-select-all .icon-checkbox {
                height: 1.125rem;
                width: 1.125rem;
                font-size: 0;
                transform: translateY(0);
            }

            .sidebar-selector .multi-select__wraper .vue-dropdown-wrapper .p-multiselect .vue-dropdown-select-all input[type=checkbox] {
                position: absolute;
                left: 0;
                opacity: 0;
                z-index: -1;
            }

                .sidebar-selector .multi-select__wraper .vue-dropdown-wrapper .p-multiselect .vue-dropdown-select-all input[type=checkbox]:checked + .icon-checkbox::after {
                    opacity: 1;
                }

        .sidebar-selector .multi-select__wraper .vue-dropdown-wrapper .p-multiselect-list-container {
            order: 3;
            max-height: 24rem !important;
            padding-bottom: 2.813rem;
        }

        .sidebar-selector .multi-select__wraper .vue-dropdown-wrapper .p-multiselect-option {
            display: flex;
            align-items: center;
            gap: 0.63rem;
            padding: 0.75rem;
            border-bottom: 1px solid #DBDFE4;
            cursor: pointer;
            white-space: normal;
        }

            .sidebar-selector .multi-select__wraper .vue-dropdown-wrapper .p-multiselect-option:not(.p-multiselect-option-selected):not(.p-disabled).p-focus {
                background: transparent;
                color: #000000;
            }

            .sidebar-selector .multi-select__wraper .vue-dropdown-wrapper .p-multiselect-option:last-child {
                border-bottom: none;
            }

            .sidebar-selector .multi-select__wraper .vue-dropdown-wrapper .p-multiselect-option .sidebar-selector-wrap:has(.menu-notification__icon) {
                display: flex;
                align-items: center;
                gap: 0.5rem;
            }

            .sidebar-selector .multi-select__wraper .vue-dropdown-wrapper .p-multiselect-option .p-checkbox {
                height: 1.25rem;
                min-width: 1.25rem;
                margin-left: 0;
            }

                .sidebar-selector .multi-select__wraper .vue-dropdown-wrapper .p-multiselect-option .p-checkbox .p-checkbox-input {
                    border-color: #DBDFE4;
                    background: #fff;
                }

                .sidebar-selector .multi-select__wraper .vue-dropdown-wrapper .p-multiselect-option .p-checkbox.p-checkbox-checked .p-checkbox-box {
                    border-radius: 0.25rem;
                    border: 1px solid #690DD3;
                    background: #690DD3;
                }

            .sidebar-selector .multi-select__wraper .vue-dropdown-wrapper .p-multiselect-option .p-checkbox-box .p-checkbox-icon {
                stroke: white;
                stroke-width: 1px;
                stroke-linejoin: round;
                min-width: 0.875rem;
                height: 0.875rem;
            }

            .sidebar-selector .multi-select__wraper .vue-dropdown-wrapper .p-multiselect-option .p-checkbox-box {
                height: 100%;
                width: 100%;
                border: 1px solid #DBDFE4;
                background: #fff;
                border-radius: 0.25rem;
            }

                .sidebar-selector .multi-select__wraper .vue-dropdown-wrapper .p-multiselect-option .p-checkbox-box:hover {
                    border-color: #690DD3;
                    background: #fff;
                }

            .sidebar-selector .multi-select__wraper .vue-dropdown-wrapper .p-multiselect-option.p-focus .form-check-index {
                color: #767F8A;
            }

        .sidebar-selector .multi-select__wraper .vue-dropdown-wrapper .p-multiselect-open .p-multiselect-dropdown .icon-arrow:before {
            transform: rotate(0deg);
        }

        .sidebar-selector .multi-select__wraper .vue-dropdown-wrapper .p-multiselect-open .p-multiselect-overlay {
            opacity: 1;
            pointer-events: auto;
        }

.sidebar-selector .multi-select__count {
    display: block;
    width: 100%;
    margin-bottom: 0.25rem;
    color: #000000;
}

.sidebar-selector .multi-select__active-item {
    display: inline-block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    height: 0.938rem;
    max-width: 100%;
    font-size: 12px;
    max-width: 16.25rem;
}

@media (max-width: 127.938rem) {
    .sidebar-selector .multi-select__active-item {
        max-width: 13.438rem;
    }
}

@media (max-width: 120rem) {
    .sidebar-selector .multi-select__active-item {
        max-width: 12.5rem;
    }
}

@media (max-width: 112.5rem) {
    .sidebar-selector .multi-select__active-item {
        max-width: 10.938rem;
    }
}

.sidebar-selector__wrapper {
    position: absolute;
    top: 100%;
    display: flex;
    flex-direction: column;
    width: 100%;
    transition: max-height 0.32s ease-out, opacity 0.22s ease-out, transform 0.22s cubic-bezier(0.55, 0.085, 0.68, 0.53);
    transform: translateY(-0.5rem) scaleY(0);
    transform-origin: top;
    opacity: 0;
    pointer-events: none;
    box-shadow: 0 -9px 0 0 #fff;
    background-color: #fff;
    border-radius: 0.75rem;
    border: 1px solid #E1CFF6;
    overflow: hidden;
    z-index: 2;
}

.sidebar-selector__list-wrapper {
    display: flex;
    flex-direction: column;
    padding: 0 0;
    border-radius: 0 0 0.75rem 0.75rem;
    border-top: 1px solid #DBDFE4;
}

.sidebar-selector__list {
    display: none;
    margin: 0;
    padding: 0;
    list-style: none;
    background-color: #fff;
}

.sidebar-selector__list-item {
    display: flex;
    align-items: center;
    padding: 0.75rem;
    border-bottom: 1px solid #DBDFE4;
    cursor: pointer;
}

    .sidebar-selector__list-item .icon-checkbox {
        position: absolute;
        top: 50%;
        left: 0;
        float: none;
        font-size: 0;
        height: 1.125rem;
        width: 1.125rem;
        transform: translateY(-50%);
    }

        .sidebar-selector__list-item .icon-checkbox::after, .sidebar-selector__list-item .icon-checkbox::before {
            content: "";
            position: absolute;
            height: 1.125rem;
            width: 1.125rem;
            left: 0;
            top: 50%;
            transform: translateY(-50%);
        }

        .sidebar-selector__list-item .icon-checkbox::before {
            border-radius: 0.25rem;
            border: 1px solid #DBDFE4;
            background: #fff;
            transition: background 0.42s ease, border-color 0.3s ease;
        }

        .sidebar-selector__list-item .icon-checkbox::after {
            background: url("../img/newDesign/icon/ico-checkbox.svg") no-repeat center center;
            opacity: 0;
            transition: opacity 0.42s ease;
        }

.debugUrl .sidebar-selector__list-item .icon-checkbox::after {
    background: url("/Content/themes/novapay/img/newDesign/icon/ico-checkbox.svg") no-repeat;
}

.sidebar-selector__list-item input[type=checkbox] {
    position: absolute;
    left: 0;
    opacity: 0;
    z-index: -1;
}

    .sidebar-selector__list-item input[type=checkbox]:checked + .icon-checkbox::after {
        opacity: 1;
    }

.sidebar-selector__list-item:last-child {
    border-bottom: none;
}

.sidebar-selector .select-all-label {
    display: flex;
    align-items: center;
    width: 100%;
    cursor: pointer;
}

.sidebar-selector__list-label,
.sidebar-selector .select-all-label {
    position: relative;
    display: flex;
    align-items: center;
    padding-left: 1.75rem;
    width: 100%;
    cursor: pointer;
}

.sidebar-selector .form-check-content {
    display: flex;
    flex-wrap: wrap;
}

.sidebar-selector .form-check-name {
    position: relative;
    display: block;
    width: 100%;
    color: #000000;
}

.sidebar-selector .form-check-index {
    font-size: 12px;
    color: #767F8A;
}

.sidebar-selector__footer {
    padding: 0.75rem;
    background-color: #690DD3;
    color: #fff;
    font-size: 14px;
    border-radius: 0 0 0.75rem 0.75rem;
}

    .sidebar-selector__footer .selection-info {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

        .sidebar-selector__footer .selection-info .selection-label {
            margin-right: 10px;
        }

        .sidebar-selector__footer .selection-info .selection-value {
            white-space: nowrap;
        }

.sidebar-selector .empty-filter {
    display: flex;
    align-items: center;
    padding: 0.75rem;
    color: #000000;
    font-family: "Fixel Text", "Fixel Display", "Helvetica", "Arial", sans-serif;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.35;
    text-align: center;
}

.sidebar .sidebar-selector {
    display: flex;
}

.menu-notification {
    margin-bottom: 1rem;
}

.menu-notification__wrap {
    cursor: pointer;
    padding: 0.5rem 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: #fff5dd;
}

.menu-notification__icon {
    max-width: 1.25rem;
    min-width: 1.25rem;
    height: 1.25rem;
    background: url("../img/newDesign/icon/icon-attention-triangle.svg");
}

    .menu-notification__icon.debugUrl {
        background: url("/Content/themes/novapay/img/newDesign/icon/icon-attention-triangle.svg");
    }

.menu-notification__message, .menu-notification__data {
    color: #7F560F;
    font-family: "Fixel Text", "Fixel Display", "Helvetica", "Arial", sans-serif !important;
    font-size: 12px;
    font-weight: 400;
    line-height: 1rem;
}

.menu-notification__data {
    font-weight: 600;
}

.menu-notification_impotent {
    background: #FEE0D9 !important;
}

#modalDataUpdateWindow .modalDataUpdateWindowAdditional {
    max-width: 25.813rem;
    max-height: 100%;
    width: 100%;
}

@media (max-width: 576px) {
    #modalDataUpdateWindow .modalDataUpdateWindowAdditional {
        top: 50% !important;
        transform: translate(0%, -50%) !important;
        border-radius: 0.75rem !important;
        height: fit-content;
        width: calc(100% - 32px) !important;
        left: 1rem !important;
        min-width: auto !important;
    }
}

#modalDataUpdateWindow .modalDataUpdateWindowAdditional .data-update {
    padding: 0.75rem;
}

#modalDataUpdateWindow .modalDataUpdateWindowAdditional .data-update__close {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
}

#modalDataUpdateWindow .modalDataUpdateWindowAdditional .data-update__image {
    width: 7.5rem;
    height: 7.5rem;
    display: flex;
    margin: auto;
    margin-bottom: 1rem;
    background: url("../img/newDesign/imageUpdateDocuments.jpg");
}

    #modalDataUpdateWindow .modalDataUpdateWindowAdditional .data-update__image.debugUrl {
        background: url("/Content/themes/novapay/img/newDesign/imageUpdateDocuments.jpg");
    }

#modalDataUpdateWindow .modalDataUpdateWindowAdditional .data-update__QR {
    width: 7.5rem;
    height: 7.5rem;
    display: flex;
    margin: auto;
    margin-bottom: 1rem;
    background: url("../img/newDesign/updateDocumentQR.svg");
}

    #modalDataUpdateWindow .modalDataUpdateWindowAdditional .data-update__QR.debugUrl {
        background: url("/Content/themes/novapay/img/newDesign/updateDocumentQR.svg");
    }

#modalDataUpdateWindow .modalDataUpdateWindowAdditional .data-update__QR {
    background-size: contain;
}

#modalDataUpdateWindow .modalDataUpdateWindowAdditional .data-update__title {
    color: #202427;
    text-align: center;
    font-family: "Fixel Text", "Fixel Display", "Helvetica", "Arial", sans-serif !important;
    font-size: 1.25rem;
    font-weight: 600;
    line-height: 1.5rem;
}

#modalDataUpdateWindow .modalDataUpdateWindowAdditional .data-update__message {
    margin: 1rem 0;
    color: #32383c;
    text-align: center;
    font-family: "Fixel Text", "Fixel Display", "Helvetica", "Arial", sans-serif !important;
    font-size: 15px;
    font-weight: 400;
    line-height: 1.5rem;
}

#modalDataUpdateWindow .modalDataUpdateWindowAdditional .data-update__later {
    width: 100%;
}

.newDesign .container,
body[data-design=new] .container,
body[data-design=new] .main-container .container {
    width: 100%;
    height: 100%;
    padding-right: 24px;
    padding-left: 24px;
    margin-right: auto;
    margin-left: auto;
    max-width: 1623px;
}

@media (min-width: 1700px) {
    .newDesign .container,
    body[data-design=new] .container,
    body[data-design=new] .main-container .container {
        padding-right: 0;
        padding-left: 0;
    }
}

@media (max-width: 1700px) {
    .newDesign .container,
    body[data-design=new] .container,
    body[data-design=new] .main-container .container {
        padding-right: 20px;
        padding-left: 20px;
    }
}

@media (max-width: 479px) {
    .newDesign .container,
    body[data-design=new] .container,
    body[data-design=new] .main-container .container {
        padding-right: 16px;
        padding-left: 16px;
    }
}

.newDesign .help-page__wraper,
body[data-design=new] .help-page__wraper,
body[data-design=new] .main-container .help-page__wraper {
    width: 100%;
    overflow: hidden;
    margin: 0 auto;
    overflow-y: scroll;
    height: 100%;
}

@media (max-width: md) {
    .newDesign .help-page__wraper .itemDetails .videos > div,
    body[data-design=new] .help-page__wraper .itemDetails .videos > div,
    body[data-design=new] .main-container .help-page__wraper .itemDetails .videos > div {
        flex-direction: column;
    }
}

.newDesign .row,
body[data-design=new] .row,
body[data-design=new] .main-container .row {
    display: flex;
    flex-wrap: wrap;
    height: 100%;
}

.newDesign .col, .newDesign .col-1, .newDesign .col-2, .newDesign .col-3,
.newDesign .col-4, .newDesign .col-5, .newDesign .col-6, .newDesign .col-7,
.newDesign .col-8, .newDesign .col-9, .newDesign .col-10, .newDesign .col-11,
.newDesign .col-12,
body[data-design=new] .col,
body[data-design=new] .col-1,
body[data-design=new] .col-2,
body[data-design=new] .col-3,
body[data-design=new] .col-4,
body[data-design=new] .col-5,
body[data-design=new] .col-6,
body[data-design=new] .col-7,
body[data-design=new] .col-8,
body[data-design=new] .col-9,
body[data-design=new] .col-10,
body[data-design=new] .col-11,
body[data-design=new] .col-12,
body[data-design=new] .main-container .col,
body[data-design=new] .main-container .col-1,
body[data-design=new] .main-container .col-2,
body[data-design=new] .main-container .col-3,
body[data-design=new] .main-container .col-4,
body[data-design=new] .main-container .col-5,
body[data-design=new] .main-container .col-6,
body[data-design=new] .main-container .col-7,
body[data-design=new] .main-container .col-8,
body[data-design=new] .main-container .col-9,
body[data-design=new] .main-container .col-10,
body[data-design=new] .main-container .col-11,
body[data-design=new] .main-container .col-12 {
    position: relative;
    width: 100%;
}

.newDesign .col-1,
body[data-design=new] .col-1,
body[data-design=new] .main-container .col-1 {
    flex: 0 0 8.3%;
    max-width: 8.3%;
}

.newDesign .col-2,
body[data-design=new] .col-2,
body[data-design=new] .main-container .col-2 {
    flex: 0 0 16.6%;
    max-width: 16.6%;
}

.newDesign .col-3,
body[data-design=new] .col-3,
body[data-design=new] .main-container .col-3 {
    flex: 0 0 253%;
    max-width: 25%;
}

.newDesign .col-4,
body[data-design=new] .col-4,
body[data-design=new] .main-container .col-4 {
    flex: 0 0 33.33%;
    max-width: 33.33%;
}

.newDesign .col-5,
body[data-design=new] .col-5,
body[data-design=new] .main-container .col-5 {
    flex: 0 0 41.6%;
    max-width: 41.6%;
}

.newDesign .col-6,
body[data-design=new] .col-6,
body[data-design=new] .main-container .col-6 {
    flex: 0 0 50%;
    max-width: 50%;
}

.newDesign .col-7,
body[data-design=new] .col-7,
body[data-design=new] .main-container .col-7 {
    flex: 0 0 58.3%;
    max-width: 58.3%;
}

.newDesign .col-8,
body[data-design=new] .col-8,
body[data-design=new] .main-container .col-8 {
    flex: 0 0 66.6%;
    max-width: 66.6%;
}

.newDesign .col-9,
body[data-design=new] .col-9,
body[data-design=new] .main-container .col-9 {
    flex: 0 0 75%;
    max-width: 75%;
}

.newDesign .col-10,
body[data-design=new] .col-10,
body[data-design=new] .main-container .col-10 {
    flex: 0 0 83.3%;
    max-width: 83.3%;
}

.newDesign .col-11,
body[data-design=new] .col-11,
body[data-design=new] .main-container .col-11 {
    flex: 0 0 91.6%;
    max-width: 91.6%;
}

.newDesign .col-12,
body[data-design=new] .col-12,
body[data-design=new] .main-container .col-12 {
    flex: 0 0 100%;
    max-width: 100%;
    height: 100%;
}

@media (max-width: 992px) {
    .newDesign .col-lg-12,
    body[data-design=new] .col-lg-12,
    body[data-design=new] .main-container .col-lg-12 {
        flex: 0 0 100%;
        max-width: 100%;
    }
}

@media (max-width: 768px) {
    .newDesign .col-md-12,
    body[data-design=new] .col-md-12,
    body[data-design=new] .main-container .col-md-12 {
        flex: 0 0 100%;
        max-width: 100%;
    }
}

.newDesign .container,
body[data-design=new] .newDesign-footer .container,
body[data-design=new] .newDesign-header .container,
body[data-design=new] .container-page .container {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

@media (min-width: 1624px) {
    .newDesign .container,
    body[data-design=new] .newDesign-footer .container,
    body[data-design=new] .newDesign-header .container,
    body[data-design=new] .container-page .container {
        padding-right: 24px;
        padding-left: 24px;
    }
}

@media (max-width: 1624px) {
    .newDesign .container,
    body[data-design=new] .newDesign-footer .container,
    body[data-design=new] .newDesign-header .container,
    body[data-design=new] .container-page .container {
        padding-right: 20px;
        padding-left: 20px;
    }
}

@media (max-width: 479px) {
    .newDesign .container,
    body[data-design=new] .newDesign-footer .container,
    body[data-design=new] .newDesign-header .container,
    body[data-design=new] .container-page .container {
        padding-right: 16px;
        padding-left: 16px;
    }
}

.main-content .popup-calendar-new,
body[data-design=new] .popup-calendar-new {
    visibility: hidden;
    position: fixed;
    display: flex;
    justify-content: center;
    align-items: center;
    top: 0;
    left: 0;
    height: 0;
    width: 100%;
    opacity: 0;
    z-index: 9110;
}

    .main-content .popup-calendar-new.is-open,
    body[data-design=new] .popup-calendar-new.is-open {
        visibility: visible;
        opacity: 1;
        height: 100%;
        transition: opacity 0.32s ease-out;
        overflow-x: hidden;
        overflow-y: auto;
    }

.main-content .popup-calendar-new__bg,
body[data-design=new] .popup-calendar-new__bg {
    visibility: hidden;
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 0;
    background: rgba(32, 36, 39, 0.5);
    opacity: 0;
    transition: opacity 0.22s ease-out;
    z-index: 9109 !important;
}

    .main-content .popup-calendar-new__bg.show,
    body[data-design=new] .popup-calendar-new__bg.show {
        height: 100vh;
        visibility: visible;
        opacity: 1;
        transition: opacity 0.42s ease-out;
    }

.main-content .popup-calendar-new .base-input,
body[data-design=new] .popup-calendar-new .base-input {
    max-height: 2.375rem;
    display: flex;
    padding: 0.5rem 0.75rem;
    align-items: center;
    border-radius: 0.5rem;
    border: 1px solid #DBDFE4;
    background: #FFF;
    font-size: 15px;
    font-style: normal;
    line-height: 1.5rem;
    color: #32383c;
}

    .main-content .popup-calendar-new .base-input::placeholder,
    body[data-design=new] .popup-calendar-new .base-input::placeholder {
        color: #767F8A;
    }

.main-content .popup-calendar-new .popup-calendar,
body[data-design=new] .popup-calendar-new .popup-calendar {
    max-width: 785px;
    width: 100%;
}

.main-content .popup-calendar-new .popup-calendar__container,
body[data-design=new] .popup-calendar-new .popup-calendar__container {
    display: flex;
}

.main-content .popup-calendar-new .popup-calendar__header,
body[data-design=new] .popup-calendar-new .popup-calendar__header {
    position: relative;
}

    .main-content .popup-calendar-new .popup-calendar__header::after,
    body[data-design=new] .popup-calendar-new .popup-calendar__header::after {
        position: absolute;
        content: "";
        right: 0;
        background: #DBDFE4;
        width: 100%;
        height: 1px;
        padding: 0 1rem;
    }

.main-content .popup-calendar-new .popup-calendar__close,
body[data-design=new] .popup-calendar-new .popup-calendar__close {
    display: none;
    border: none;
    position: absolute;
    top: -13px;
    right: -16px;
    background: none;
}

.main-content .popup-calendar-new .popup-calendar__title,
body[data-design=new] .popup-calendar-new .popup-calendar__title {
    margin-bottom: 16px;
    color: #32383c;
    font-family: "Fixel Text", "Fixel Display", "Helvetica", "Arial", sans-serif;
    font-size: 17px;
    font-style: normal;
    font-weight: 600;
    line-height: 20px;
}

.main-content .popup-calendar-new .popup-calendar__left,
body[data-design=new] .popup-calendar-new .popup-calendar__left {
    padding: 16px 16px;
    max-width: 520px;
    width: 100%;
    background: #FFF;
    border-radius: 8px 0 0 8px;
}

.main-content .popup-calendar-new .popup-calendar__inputs-container,
body[data-design=new] .popup-calendar-new .popup-calendar__inputs-container {
    margin-top: 32px;
    gap: 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.main-content .popup-calendar-new .popup-calendar__icon,
body[data-design=new] .popup-calendar-new .popup-calendar__icon {
    position: absolute;
    top: 8px;
    left: 12px;
}

.main-content .popup-calendar-new .popup-calendar__input-wrap,
body[data-design=new] .popup-calendar-new .popup-calendar__input-wrap {
    position: relative;
    width: 50%;
}

.main-content .popup-calendar-new .popup-calendar__input-data,
body[data-design=new] .popup-calendar-new .popup-calendar__input-data {
    padding: 8px 40px;
    width: 100%;
}

.main-content .popup-calendar-new .popup-calendar__input-line,
body[data-design=new] .popup-calendar-new .popup-calendar__input-line {
    border-top: 1px solid #DBDFE4;
    width: 8px;
    display: flex;
    align-items: center;
}

.main-content .popup-calendar-new .popup-calendar__wrap,
body[data-design=new] .popup-calendar-new .popup-calendar__wrap {
    margin-top: 16px;
    display: flex;
    gap: 40px;
}

.main-content .popup-calendar-new .popup-calendar__calendar-box,
body[data-design=new] .popup-calendar-new .popup-calendar__calendar-box {
    width: 50%;
}

.main-content .popup-calendar-new .popup-calendar .ui-datepicker-inline,
body[data-design=new] .popup-calendar-new .popup-calendar .ui-datepicker-inline {
    height: 260px;
}

.main-content .popup-calendar-new .popup-calendar .ui-datepicker-header,
body[data-design=new] .popup-calendar-new .popup-calendar .ui-datepicker-header {
    position: relative;
}

.main-content .popup-calendar-new .popup-calendar .ui-datepicker-prev span,
body[data-design=new] .popup-calendar-new .popup-calendar .ui-datepicker-prev span {
    top: 7px;
    left: 4px;
    position: absolute;
    width: 20px;
    height: 20px;
    display: block;
    cursor: pointer;
}

.main-content .popup-calendar-new .popup-calendar .ui-datepicker-prev::after,
body[data-design=new] .popup-calendar-new .popup-calendar .ui-datepicker-prev::after {
    position: absolute;
    top: 50%;
    left: 7%;
    content: "";
    width: 0.4rem;
    height: 0.4rem;
    border-top: 2px solid #32383c;
    border-left: 2px solid #32383c;
    transform: translate(-50%, -50%) rotate(-45deg);
    transform-origin: center;
    cursor: pointer;
}

.main-content .popup-calendar-new .popup-calendar .ui-datepicker-next span,
body[data-design=new] .popup-calendar-new .popup-calendar .ui-datepicker-next span {
    top: 7px;
    right: 7px;
    position: absolute;
    width: 20px;
    height: 20px;
    display: block;
    cursor: pointer;
}

.main-content .popup-calendar-new .popup-calendar .ui-datepicker-next::after,
body[data-design=new] .popup-calendar-new .popup-calendar .ui-datepicker-next::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 4%;
    width: 0.4rem;
    height: 0.4rem;
    border-top: 2px solid #32383c;
    border-left: 2px solid #32383c;
    transform: translate(-50%, -50%) rotate(135deg);
    transform-origin: center;
    cursor: pointer;
}

.main-content .popup-calendar-new .popup-calendar .ui-datepicker-calendar,
body[data-design=new] .popup-calendar-new .popup-calendar .ui-datepicker-calendar {
    width: 100%;
    align-items: center;
}

    .main-content .popup-calendar-new .popup-calendar .ui-datepicker-calendar td,
    body[data-design=new] .popup-calendar-new .popup-calendar .ui-datepicker-calendar td {
        padding: 7px 7px;
        width: 32px;
        font-size: 14px !important;
        text-align: center;
        font-style: normal;
        font-weight: 400;
        line-height: 18px;
    }

    .main-content .popup-calendar-new .popup-calendar .ui-datepicker-calendar thead th,
    body[data-design=new] .popup-calendar-new .popup-calendar .ui-datepicker-calendar thead th {
        padding: 9px 8px 7px 8px;
        color: #767F8A;
        text-align: center;
        font-family: "Fixel Text", "Fixel Display", "Helvetica", "Arial", sans-serif;
        font-size: 12px;
        font-style: normal;
        font-weight: 400;
        line-height: 16px;
    }

.main-content .popup-calendar-new .popup-calendar .ui-datepicker-title,
body[data-design=new] .popup-calendar-new .popup-calendar .ui-datepicker-title {
    height: 36px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #32383c;
    font-family: "Fixel Text", "Fixel Display", "Helvetica", "Arial", sans-serif;
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: 18px;
}

.main-content .popup-calendar-new .popup-calendar .ui-state-default,
body[data-design=new] .popup-calendar-new .popup-calendar .ui-state-default {
    text-decoration: none;
    color: #32383c;
}

.main-content .popup-calendar-new .popup-calendar__right,
body[data-design=new] .popup-calendar-new .popup-calendar__right {
    position: relative;
    padding: 24px 16px;
    max-width: 265px;
    width: 100%;
    border-left: 1px solid #DBDFE4;
    background: #F4F6F7;
    border-radius: 0px 8px 8px 0px;
}

.main-content .popup-calendar-new .popup-calendar__actions,
body[data-design=new] .popup-calendar-new .popup-calendar__actions {
    display: flex;
    gap: 8px;
}

.main-content .popup-calendar-new .popup-calendar__actions-wrap,
body[data-design=new] .popup-calendar-new .popup-calendar__actions-wrap {
    display: flex;
    gap: 8px;
    width: 100%;
}

.main-content .popup-calendar-new .popup-calendar__actions-top,
body[data-design=new] .popup-calendar-new .popup-calendar__actions-top {
    flex-wrap: wrap;
}

.main-content .popup-calendar-new .popup-calendar__actions-bottom,
body[data-design=new] .popup-calendar-new .popup-calendar__actions-bottom {
    position: absolute;
    bottom: 24px;
    right: 16px;
}

.main-content .popup-calendar-new .popup-calendar__actions .active,
body[data-design=new] .popup-calendar-new .popup-calendar__actions .active {
    background: #32383c;
    color: #FFF;
}

.main-content .popup-calendar-new .popup-calendar__save,
body[data-design=new] .popup-calendar-new .popup-calendar__save {
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 8px 12px;
    border: none;
    background-color: #690DD3;
    color: #FFF;
    transition: background-color 0.22s ease-out;
    box-shadow: none;
    color: #FFF;
    font-family: "Fixel Text", "Fixel Display", "Helvetica", "Arial", sans-serif;
    font-size: 14px;
    font-style: normal;
    font-weight: 600;
    line-height: 18px;
    border-radius: 8px;
}

    .main-content .popup-calendar-new .popup-calendar__save:hover,
    body[data-design=new] .popup-calendar-new .popup-calendar__save:hover {
        background-color: #5E1CAB;
        transition: background-color 0.42s ease-out;
        color: #FFF !important;
    }

    .main-content .popup-calendar-new .popup-calendar__save:active,
    body[data-design=new] .popup-calendar-new .popup-calendar__save:active {
        background-color: #5E1CAB;
        transition: background-color 0.42s ease-out;
        color: #FFF !important;
    }

    .main-content .popup-calendar-new .popup-calendar__save__disabled, .main-content .popup-calendar-new .popup-calendar__save:disabled,
    body[data-design=new] .popup-calendar-new .popup-calendar__save__disabled,
    body[data-design=new] .popup-calendar-new .popup-calendar__save:disabled {
        pointer-events: none;
        cursor: not-allowed;
        opacity: 0.5;
    }

.main-content .popup-calendar-new .popup-calendar__cansel,
body[data-design=new] .popup-calendar-new .popup-calendar__cansel {
    cursor: pointer;
    width: 98px;
    height: 34px;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 8px 12px;
    border: none;
    color: #690DD3;
    border-radius: 8px;
    font-family: "Fixel Text", "Fixel Display", "Helvetica", "Arial", sans-serif;
    font-size: 14px;
    font-style: normal;
    font-weight: 600;
    line-height: 18px;
    background: none;
}

    .main-content .popup-calendar-new .popup-calendar__cansel:hover,
    body[data-design=new] .popup-calendar-new .popup-calendar__cansel:hover {
        background-color: #f5edff;
        transition: background-color 0.42s ease-out;
        border-color: #8222f1;
        border: 1px solid;
    }

    .main-content .popup-calendar-new .popup-calendar__cansel:active,
    body[data-design=new] .popup-calendar-new .popup-calendar__cansel:active {
        background-color: #f5edff;
        transition: background-color 0.42s ease-out;
        border-color: #8222f1;
        border: 1px solid;
    }

.main-content .popup-calendar-new .popup-calendar__btn-period,
body[data-design=new] .popup-calendar-new .popup-calendar__btn-period {
    cursor: pointer;
    border-radius: 24px;
    border: 1px solid #DBDFE4;
    background: #F4F6F7;
    display: flex;
    padding: 7px 10px;
    justify-content: center;
    align-items: center;
    gap: 2px;
    color: #32383c;
    font-family: "Fixel Text", "Fixel Display", "Helvetica", "Arial", sans-serif;
    font-size: 12px;
    font-style: normal;
    font-weight: 500;
    line-height: 16px;
}

    .main-content .popup-calendar-new .popup-calendar__btn-period:hover,
    body[data-design=new] .popup-calendar-new .popup-calendar__btn-period:hover {
        background: #32383c;
        color: #FFF;
    }

    .main-content .popup-calendar-new .popup-calendar__btn-period:active,
    body[data-design=new] .popup-calendar-new .popup-calendar__btn-period:active {
        background: #32383c;
        color: #FFF;
    }

.main-content .popup-calendar-new .popup-calendar__message,
body[data-design=new] .popup-calendar-new .popup-calendar__message {
    margin-top: 80px;
    position: relative;
    padding: 12px;
    border-radius: 4px;
    border: 1px solid #DBDFE4;
    width: calc(100% - 3px);
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-left: 3px;
}

    .main-content .popup-calendar-new .popup-calendar__message::before,
    body[data-design=new] .popup-calendar-new .popup-calendar__message::before {
        position: absolute;
        content: "";
        border-radius: 4px 0px 0px 4px;
        background: #DBDFE4;
        width: 6px;
        height: 100%;
        top: 0;
        left: -3px;
    }

.main-content .popup-calendar-new .popup-calendar__message-icon,
body[data-design=new] .popup-calendar-new .popup-calendar__message-icon {
    width: 23px;
    height: 23px;
    margin-top: -2px;
}

.main-content .popup-calendar-new .popup-calendar__message-content,
body[data-design=new] .popup-calendar-new .popup-calendar__message-content {
    color: #32383c;
    font-size: 14px;
    line-height: 1.125rem;
}

.main-content .popup-calendar-new .popup-calendarWitoutpanel,
body[data-design=new] .popup-calendar-new .popup-calendarWitoutpanel {
    max-width: 32.5rem;
}

    .main-content .popup-calendar-new .popup-calendarWitoutpanel.popup-calendar__single-date,
    body[data-design=new] .popup-calendar-new .popup-calendarWitoutpanel.popup-calendar__single-date {
        max-width: 21.875rem;
    }

        .main-content .popup-calendar-new .popup-calendarWitoutpanel.popup-calendar__single-date .popup-calendar__inputs-container,
        .main-content .popup-calendar-new .popup-calendarWitoutpanel.popup-calendar__single-date .popup-calendar__wrap,
        body[data-design=new] .popup-calendar-new .popup-calendarWitoutpanel.popup-calendar__single-date .popup-calendar__inputs-container,
        body[data-design=new] .popup-calendar-new .popup-calendarWitoutpanel.popup-calendar__single-date .popup-calendar__wrap {
            justify-content: center;
        }

        .main-content .popup-calendar-new .popup-calendarWitoutpanel.popup-calendar__single-date .popup-calendar__input-wrap,
        body[data-design=new] .popup-calendar-new .popup-calendarWitoutpanel.popup-calendar__single-date .popup-calendar__input-wrap {
            width: 100%;
        }

        .main-content .popup-calendar-new .popup-calendarWitoutpanel.popup-calendar__single-date .popup-calendar__calendar-box,
        body[data-design=new] .popup-calendar-new .popup-calendarWitoutpanel.popup-calendar__single-date .popup-calendar__calendar-box {
            width: 100%;
        }

    .main-content .popup-calendar-new .popup-calendarWitoutpanel .actions-block-without-panelBtn,
    body[data-design=new] .popup-calendar-new .popup-calendarWitoutpanel .actions-block-without-panelBtn {
        border-top: 1px solid #DBDFE4;
        position: relative;
        height: 50px;
        display: flex;
        align-items: end;
        justify-content: end;
    }

    .main-content .popup-calendar-new .popup-calendarWitoutpanel .popup-calendar__actions,
    body[data-design=new] .popup-calendar-new .popup-calendarWitoutpanel .popup-calendar__actions {
        position: initial;
    }

    .main-content .popup-calendar-new .popup-calendarWitoutpanel .popup-calendar__right,
    body[data-design=new] .popup-calendar-new .popup-calendarWitoutpanel .popup-calendar__right {
        width: 0;
        padding: 0;
        display: none;
    }

    .main-content .popup-calendar-new .popup-calendarWitoutpanel .popup-calendar__left,
    body[data-design=new] .popup-calendar-new .popup-calendarWitoutpanel .popup-calendar__left {
        border-radius: 8px;
    }

.main-content .popup-calendar-new .selected-range,
body[data-design=new] .popup-calendar-new .selected-range {
    background: #E1CFF6 !important;
    color: #FFF !important;
    border-radius: 0;
}

    .main-content .popup-calendar-new .selected-range.range-start,
    body[data-design=new] .popup-calendar-new .selected-range.range-start {
        border-top-left-radius: 50px;
        border-bottom-left-radius: 50px;
    }

    .main-content .popup-calendar-new .selected-range.range-end,
    body[data-design=new] .popup-calendar-new .selected-range.range-end {
        border-top-right-radius: 50px;
        border-bottom-right-radius: 50px;
    }

.main-content .popup-calendar-new .disabled-calendar,
body[data-design=new] .popup-calendar-new .disabled-calendar {
    opacity: 0.5;
    pointer-events: none;
}

.main-content .popup-calendar-new .ui-datepicker-calendar .ui-state-disabled,
body[data-design=new] .popup-calendar-new .ui-datepicker-calendar .ui-state-disabled {
    color: grey !important;
    opacity: 0.5;
    pointer-events: none;
}

@media (max-width: 767px) {
    .main-content .popup-calendar-new .popup-calendar__container,
    body[data-design=new] .popup-calendar-new .popup-calendar__container {
        flex-direction: column;
    }

    .main-content .popup-calendar-new .popup-calendar__close,
    body[data-design=new] .popup-calendar-new .popup-calendar__close {
        display: block;
    }

    .main-content .popup-calendar-new .popup-calendar__left, .main-content .popup-calendar-new .popup-calendar__right,
    body[data-design=new] .popup-calendar-new .popup-calendar__left,
    body[data-design=new] .popup-calendar-new .popup-calendar__right {
        border-radius: 0;
        max-width: inherit;
    }

    .main-content .popup-calendar-new .popup-calendar__actions-wrap,
    body[data-design=new] .popup-calendar-new .popup-calendar__actions-wrap {
        width: auto;
    }

    .main-content .popup-calendar-new .popup-calendar__actions-bottom,
    body[data-design=new] .popup-calendar-new .popup-calendar__actions-bottom {
        position: static;
        margin-top: 24px;
    }
}

@media (max-width: 550px) {
    .main-content .popup-calendar-new,
    body[data-design=new] .popup-calendar-new {
        top: 2%;
        flex-direction: column;
    }

        .main-content .popup-calendar-new .popup-calendar,
        body[data-design=new] .popup-calendar-new .popup-calendar {
            height: 88%;
            overflow-y: auto;
        }

        .main-content .popup-calendar-new .popup-calendar__wrap,
        body[data-design=new] .popup-calendar-new .popup-calendar__wrap {
            flex-direction: column;
            gap: 35px;
            height: 295px;
            overflow-y: scroll;
        }

        .main-content .popup-calendar-new .popup-calendar__calendar-box,
        body[data-design=new] .popup-calendar-new .popup-calendar__calendar-box {
            width: 100%;
        }

        .main-content .popup-calendar-new .popup-calendar__message,
        body[data-design=new] .popup-calendar-new .popup-calendar__message {
            margin-top: 15px;
        }

        .main-content .popup-calendar-new .popup-calendar__input-data,
        body[data-design=new] .popup-calendar-new .popup-calendar__input-data {
            padding: 8px 8px 8px 40px !important;
            width: 100%;
        }

        .main-content .popup-calendar-new .popup-calendarWitoutpanel,
        body[data-design=new] .popup-calendar-new .popup-calendarWitoutpanel {
            height: auto;
        }

        .main-content .popup-calendar-new .ui-datepicker-header,
        body[data-design=new] .popup-calendar-new .ui-datepicker-header {
            margin-bottom: 40px;
        }

        .main-content .popup-calendar-new .ui-datepicker-calendar thead,
        body[data-design=new] .popup-calendar-new .ui-datepicker-calendar thead {
            position: fixed;
            width: 85%;
            left: 6.8%;
            border-top: 1px solid #ededf0;
            border-bottom: 1px solid #ededf0;
            margin-top: -40px;
            background-color: #FFF;
            z-index: 1;
        }

            .main-content .popup-calendar-new .ui-datepicker-calendar thead tr,
            body[data-design=new] .popup-calendar-new .ui-datepicker-calendar thead tr {
                display: flex;
                justify-content: space-between;
            }

        .main-content .popup-calendar-new #calendar-end .ui-datepicker-header,
        body[data-design=new] .popup-calendar-new #calendar-end .ui-datepicker-header {
            margin-bottom: 0;
        }

        .main-content .popup-calendar-new #calendar-end .ui-datepicker-inline,
        body[data-design=new] .popup-calendar-new #calendar-end .ui-datepicker-inline {
            height: 230px;
        }

        .main-content .popup-calendar-new #calendar-end .ui-datepicker-calendar thead,
        body[data-design=new] .popup-calendar-new #calendar-end .ui-datepicker-calendar thead {
            display: none;
        }
}

.p-dialog.modalDataExportGeneration .modal-content {
    max-width: none !important;
}

.p-dialog.modalDataExportGeneration .icon-checkbox.is-disabled-icon {
    opacity: 0.5;
}

.p-dialog.modalDataExportGeneration {
    width: 100% !important;
    max-width: 560px !important;
    padding: 0 !important;
}

@media (max-width: 576px) {
    .p-dialog.modalDataExportGeneration {
        top: 50% !important;
        transform: translate(0%, 0%) !important;
        border-radius: 12px !important;
        height: fit-content;
        width: calc(100% - 32px) !important;
        left: 16px !important;
        min-width: auto !important;
    }
}

.p-dialog.modalDataExportGeneration .p-dialog-content,
.p-dialog.modalDataExportGeneration .p-dialog-footer {
    all: unset !important;
    display: block !important;
}

    .p-dialog.modalDataExportGeneration .p-dialog-content::before,
    .p-dialog.modalDataExportGeneration .p-dialog-footer::before {
        display: none;
    }

.p-dialog.modalDataExportGeneration .data-export .icon-info-new {
    background-color: #690DD3 !important;
}

.p-dialog.modalDataExportGeneration .data-export__header {
    padding: 20px 14px 20px 20px;
    height: 76px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #DBDFE4;
}

.p-dialog.modalDataExportGeneration .data-export__header-title {
    color: #32383c;
    font-size: 20px;
    font-weight: 600;
    line-height: 24px;
}

.p-dialog.modalDataExportGeneration .data-export__close {
    padding: 0;
}

.p-dialog.modalDataExportGeneration .data-export__tooltip {
    min-width: 265px;
}

.p-dialog.modalDataExportGeneration .data-export__row {
    padding: 12px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #DBDFE4;
}

    .p-dialog.modalDataExportGeneration .data-export__row .p-inputwrapper {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0.5rem 0.75rem;
        height: 2.5rem;
        background: #FFF;
        border: 1px solid #DBDFE4;
        border-radius: 0.5rem;
        cursor: pointer;
        transition: background 0.5s, border-color 0.3s;
    }

        .p-dialog.modalDataExportGeneration .data-export__row .p-inputwrapper .p-select-label {
            color: #767F8A;
            flex: 1;
            border-color: transparent;
            text-align: left;
            font-size: 15px;
            font-style: normal;
            font-weight: 400;
            line-height: 1.5rem;
        }

        .p-dialog.modalDataExportGeneration .data-export__row .p-inputwrapper svg {
            color: #767F8A;
        }

.p-dialog.modalDataExportGeneration .data-export__row-subtitle {
    color: #767F8A;
    font-size: 14px;
    font-weight: 500;
    line-height: 18px;
}

@media (max-width: 479px) {
    .p-dialog.modalDataExportGeneration .data-export__row-subtitle {
        margin-bottom: 13px;
    }
}

.p-dialog.modalDataExportGeneration .data-export__row:nth-child(4), .p-dialog.modalDataExportGeneration .data-export__row:nth-child(5), .p-dialog.modalDataExportGeneration .data-export__row:nth-child(6) {
    height: 68px;
}

@media (max-width: 479px) {
    .p-dialog.modalDataExportGeneration .data-export__row:nth-child(4), .p-dialog.modalDataExportGeneration .data-export__row:nth-child(5), .p-dialog.modalDataExportGeneration .data-export__row:nth-child(6) {
        height: 96px;
    }
}

.p-dialog.modalDataExportGeneration .data-export__row-tooltip {
    display: flex;
    align-items: center;
    gap: 8px;
}

@media (max-width: 479px) {
    .p-dialog.modalDataExportGeneration .data-export__row {
        flex-direction: column;
        align-items: flex-start;
    }

        .p-dialog.modalDataExportGeneration .data-export__row .icon-info-new {
            margin-bottom: 12px;
        }

        .p-dialog.modalDataExportGeneration .data-export__row .tooltip-text {
            left: 60px;
        }

            .p-dialog.modalDataExportGeneration .data-export__row .tooltip-text:after {
                left: calc(100% - (21% + 139px));
            }
}

.p-dialog.modalDataExportGeneration .data-export__options {
    display: flex;
    gap: 8px;
    justify-content: end;
    align-items: center;
}

.p-dialog.modalDataExportGeneration .data-export__options-btn {
    padding: 8px 12px;
    min-width: 87px;
    font-size: 14px;
}

@media (max-width: 479px) {
    .p-dialog.modalDataExportGeneration .data-export__options-btn {
        font-weight: 500;
    }
}

.p-dialog.modalDataExportGeneration .data-export__options-btn:hover, .p-dialog.modalDataExportGeneration .data-export__options-btn:active {
    background-color: #F5EDFF;
    transition: background-color 0.42s ease-out;
    border: 1px solid #5E1CAB;
    color: #5E1CAB;
}

.p-dialog.modalDataExportGeneration .data-export .active {
    background-color: #F5EDFF;
    transition: background-color 0.42s ease-out;
    border: 1px solid #5E1CAB;
    color: #5E1CAB;
}

.p-dialog.modalDataExportGeneration .data-export__footer {
    padding: 16px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

@media (max-width: 479px) {
    .p-dialog.modalDataExportGeneration .data-export__footer {
        flex-direction: column;
        gap: 12px;
    }
}

.p-dialog.modalDataExportGeneration .data-export__document {
    display: flex;
    align-items: center;
    gap: 5px;
}

.p-dialog.modalDataExportGeneration .data-export__document-text {
    font-size: 15px;
    font-weight: 400;
}

@media (max-width: 479px) {
    .p-dialog.modalDataExportGeneration .data-export__document {
        height: 30px;
    }
}

.p-dialog.modalDataExportGeneration .data-export__actions {
    display: flex;
    justify-content: end;
    gap: 12px;
    align-items: center;
}

@media (max-width: 479px) {
    .p-dialog.modalDataExportGeneration .data-export__actions {
        width: 100%;
    }
}

@media (max-width: 479px) {
    .p-dialog.modalDataExportGeneration .data-export__actions-btn {
        width: 50%;
    }
}

.p-dialog.modalDataExportGeneration .data-export__custom-select {
    width: 148px;
}

.p-dialog.modalDataExportGeneration .data-export__includeReval {
    position: relative;
    display: flex;
    align-items: center;
    padding-left: 1.75rem;
    cursor: pointer;
}

    .p-dialog.modalDataExportGeneration .data-export__includeReval .form-check-name {
        font-size: 15px;
        color: #32383c;
    }

    .p-dialog.modalDataExportGeneration .data-export__includeReval .icon-checkbox {
        position: absolute;
        top: 50%;
        left: 0;
        float: none;
        font-size: 0;
        height: 22px;
        width: 22px;
        transform: translateY(-50%);
    }

        .p-dialog.modalDataExportGeneration .data-export__includeReval .icon-checkbox::after, .p-dialog.modalDataExportGeneration .data-export__includeReval .icon-checkbox::before {
            content: "";
            position: absolute;
            box-sizing: border-box;
            height: 22px;
            width: 22px;
            left: 0;
            top: 50%;
            transform: translateY(-50%);
            background-size: 100% !important;
        }

        .p-dialog.modalDataExportGeneration .data-export__includeReval .icon-checkbox::before {
            border-radius: 0.25rem;
            border: 1px solid #DBDFE4;
            background: #fff;
            transition: background 0.42s ease, border-color 0.3s ease;
        }

        .p-dialog.modalDataExportGeneration .data-export__includeReval .icon-checkbox::after {
            background: url("../img/newDesign/icon/ico-checkbox.svg") no-repeat center center;
            opacity: 0;
            transition: opacity 0.42s ease;
        }

.debugUrl .p-dialog.modalDataExportGeneration .data-export__includeReval .icon-checkbox::after {
    background: url("/Content/themes/novapay/img/newDesign/icon/ico-checkbox.svg") no-repeat;
}

.p-dialog.modalDataExportGeneration .data-export__includeReval input[type=checkbox] {
    position: absolute;
    left: 0;
    opacity: 0;
    z-index: -1;
}

    .p-dialog.modalDataExportGeneration .data-export__includeReval input[type=checkbox]:checked + .icon-checkbox::after {
        opacity: 1;
    }

.p-dialog.modalDataExportGeneration .data-export-format-dropdown {
    width: 148px;
}

    .p-dialog.modalDataExportGeneration .data-export-format-dropdown .p-select-label .icon-arrow-down {
        display: none;
    }

    .p-dialog.modalDataExportGeneration .data-export-format-dropdown .p-select-overlay {
        width: 100% !important;
        max-width: 148px;
    }

    .p-dialog.modalDataExportGeneration .data-export-format-dropdown .p-select-list-container {
        max-height: 100% !important;
    }

.p-dialog.modalDataExportGeneration .modal-content {
    max-width: none !important;
}

.p-dialog.modalDataExportGeneration .icon-checkbox.is-disabled-icon {
    opacity: 0.5;
}

.p-dialog.modalDataExportGeneration .pdf-canvas {
    width: 100% !important;
}

.p-dialog.modalDataExportGeneration {
    width: 100% !important;
    max-width: 560px !important;
    padding: 0 !important;
}

@media (max-width: 576px) {
    .p-dialog.modalDataExportGeneration {
        top: 50% !important;
        transform: translate(0%, 0%) !important;
        border-radius: 12px !important;
        height: fit-content;
        width: calc(100% - 32px) !important;
        left: 16px !important;
        min-width: auto !important;
    }
}

.p-dialog.modalDataExportGeneration .p-dialog-content,
.p-dialog.modalDataExportGeneration .p-dialog-footer {
    all: unset !important;
    display: block !important;
}

    .p-dialog.modalDataExportGeneration .p-dialog-content::before,
    .p-dialog.modalDataExportGeneration .p-dialog-footer::before {
        display: none;
    }

.p-dialog.modalDataExportGeneration .p-dialog-close-button {
    width: 20px;
    height: 20px;
}

    .p-dialog.modalDataExportGeneration .p-dialog-close-button svg {
        width: 16px;
        height: 16px;
        color: #767F8A;
    }

.p-dialog.modalDataExportGeneration .extract-formation .icon-info-new {
    background-color: #690DD3 !important;
}

.p-dialog.modalDataExportGeneration .extract-formation__header {
    padding: 20px 14px 20px 20px;
    height: 76px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #DBDFE4;
}

.p-dialog.modalDataExportGeneration .extract-formation__header-title {
    color: #32383c;
    font-size: 20px;
    font-weight: 600;
    line-height: 24px;
}

.p-dialog.modalDataExportGeneration .extract-formation__close {
    padding: 0;
}

.p-dialog.modalDataExportGeneration .extract-formation__row {
    padding: 0.75rem 1.25rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #DBDFE4;
}

.p-dialog.modalDataExportGeneration .extract-formation__row-subtitle {
    color: #767F8A;
    font-size: 14px;
    font-weight: 500;
    line-height: 18px;
}

.p-dialog.modalDataExportGeneration .extract-formation__row-tooltip {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

@media (max-width: 479px) {
    .p-dialog.modalDataExportGeneration .extract-formation__row {
        flex-direction: column;
        align-items: flex-start;
    }

        .p-dialog.modalDataExportGeneration .extract-formation__row .tooltip-text {
            left: 60px;
        }

            .p-dialog.modalDataExportGeneration .extract-formation__row .tooltip-text:after {
                left: calc(100% - (21% + 139px));
            }
}

.p-dialog.modalDataExportGeneration .extract-formation__tooltip {
    min-width: 265px;
}

.p-dialog.modalDataExportGeneration .extract-formation__options {
    display: flex;
    gap: 8px;
    justify-content: end;
    align-items: center;
}

@media (max-width: 479px) {
    .p-dialog.modalDataExportGeneration .extract-formation__options {
        margin-top: 13px;
    }
}

.p-dialog.modalDataExportGeneration .extract-formation__options-btn {
    padding: 8px 12px;
    min-width: 87px;
    font-size: 14px;
}

@media (max-width: 479px) {
    .p-dialog.modalDataExportGeneration .extract-formation__options-btn {
        font-weight: 500;
    }
}

.p-dialog.modalDataExportGeneration .extract-formation__options-btn:hover, .p-dialog.modalDataExportGeneration .extract-formation__options-btn:active {
    background-color: #f5edff;
    transition: background-color 0.42s ease-out;
    border: 1px solid #5E1CAB;
    color: #5E1CAB;
}

.p-dialog.modalDataExportGeneration .extract-formation .active {
    background-color: #f5edff;
    transition: background-color 0.42s ease-out;
    border: 1px solid #5E1CAB;
    color: #5E1CAB;
}

.p-dialog.modalDataExportGeneration .extract-formation__footer {
    padding: 16px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

@media (max-width: 479px) {
    .p-dialog.modalDataExportGeneration .extract-formation__footer {
        flex-direction: column;
        gap: 12px;
    }
}

.p-dialog.modalDataExportGeneration .extract-formation__actions {
    display: flex;
    justify-content: end;
    gap: 12px;
    align-items: center;
}

@media (max-width: 479px) {
    .p-dialog.modalDataExportGeneration .extract-formation__actions {
        width: 100%;
    }
}

@media (max-width: 479px) {
    .p-dialog.modalDataExportGeneration .extract-formation__actions-btn {
        width: 50%;
    }
}

.p-dialog.modalDataExportGeneration .extract-formation__document {
    display: flex;
    align-items: center;
    gap: 5px;
}

.p-dialog.modalDataExportGeneration .extract-formation__document-text {
    font-size: 15px;
    font-weight: 400;
}

@media (max-width: 479px) {
    .p-dialog.modalDataExportGeneration .extract-formation__document {
        height: 30px;
    }
}

.p-dialog.modalDataExportGeneration .extract-formation__custom-select {
    width: 148px;
}

.p-dialog.modalDataExportGeneration .extract-formation__includeReval {
    position: relative;
    display: flex;
    align-items: center;
    padding-left: 1.75rem;
    cursor: pointer;
}

    .p-dialog.modalDataExportGeneration .extract-formation__includeReval .form-check-name {
        font-size: 15px;
        color: #32383c;
    }

    .p-dialog.modalDataExportGeneration .extract-formation__includeReval .icon-checkbox {
        position: absolute;
        top: 50%;
        left: 0;
        float: none;
        font-size: 0;
        height: 22px;
        width: 22px;
        transform: translateY(-50%);
    }

        .p-dialog.modalDataExportGeneration .extract-formation__includeReval .icon-checkbox::after, .p-dialog.modalDataExportGeneration .extract-formation__includeReval .icon-checkbox::before {
            content: "";
            position: absolute;
            box-sizing: border-box;
            height: 22px;
            width: 22px;
            left: 0;
            top: 50%;
            transform: translateY(-50%);
            background-size: 100% !important;
        }

        .p-dialog.modalDataExportGeneration .extract-formation__includeReval .icon-checkbox::before {
            border-radius: 0.25rem;
            border: 1px solid #DBDFE4;
            background: #fff;
            transition: background 0.42s ease, border-color 0.3s ease;
        }

        .p-dialog.modalDataExportGeneration .extract-formation__includeReval .icon-checkbox::after {
            background: url("../img/newDesign/icon/ico-checkbox.svg") no-repeat center center;
            opacity: 0;
            transition: opacity 0.42s ease;
        }

.debugUrl .p-dialog.modalDataExportGeneration .extract-formation__includeReval .icon-checkbox::after {
    background: url("/Content/themes/novapay/img/newDesign/icon/ico-checkbox.svg") no-repeat;
}

.p-dialog.modalDataExportGeneration .extract-formation__includeReval input[type=checkbox] {
    position: absolute;
    left: 0;
    opacity: 0;
    z-index: -1;
}

    .p-dialog.modalDataExportGeneration .extract-formation__includeReval input[type=checkbox]:checked + .icon-checkbox::after {
        opacity: 1;
    }

.settingReminderFrequency .setting-reminder {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.settingReminderFrequency .setting-reminder__label {
    color: #32383c;
    font-family: "Fixel Display";
    font-size: 15px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px;
}

.settingReminderFrequency .setting-reminder__label-checkbox {
    margin-left: 38px;
}

.settingReminderFrequency .setting-reminder__row {
    display: flex;
    align-items: center;
    gap: 24px;
}

.settingReminderFrequency .setting-reminder__period {
    width: 120px;
}

.settingReminderFrequency .setting-reminder__interval-year {
    width: 130px;
}

.settingReminderFrequency .setting-reminder__interval-month, .settingReminderFrequency .setting-reminder__interval-quarter {
    width: 140px;
}

.settingReminderFrequency .setting-reminder__interval-quarter-month {
    width: 80px;
    min-width: 80px !important;
}

.settingReminderFrequency .setting-reminder .disableDropdown {
    border: 1px solid #DBDFE4;
    background: #f4f6f7;
}

.settingReminderFrequency .setting-reminder__interval, .settingReminderFrequency .setting-reminder__month, .settingReminderFrequency .setting-reminder__quarter, .settingReminderFrequency .setting-reminder__day {
    display: flex;
    align-items: center;
    gap: 16px;
}

.settingReminderFrequency .setting-reminder__day-of-month, .settingReminderFrequency .setting-reminder__day-week-month {
    display: flex;
    align-items: center;
    gap: 16px;
}

.settingReminderFrequency .setting-reminder__dropdown-list {
    max-height: 200px;
    overflow: auto;
}

.settingReminderFrequency .setting-reminder__date-setting-wrap {
    display: flex;
    gap: 24px;
    align-items: center;
}

.settingReminderFrequency .setting-reminder__date-setting--day, .settingReminderFrequency .setting-reminder__date-setting--week {
    width: 120px;
}

    .settingReminderFrequency .setting-reminder__date-setting--day .disabled, .settingReminderFrequency .setting-reminder__date-setting--week .disabled {
        opacity: 1 !important;
    }

.settingReminderFrequency .setting-reminder__day-of-month {
    margin-bottom: 24px;
}

.settingReminderFrequency .setting-reminder__input-day {
    width: 55px;
    padding: 8px 12px;
}

    .settingReminderFrequency .setting-reminder__input-day:disabled {
        opacity: 0.5;
    }

.settingReminderFrequency .setting-reminder__radio {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    width: 22px;
    height: 22px;
    border-radius: 50px;
    border: 1px solid #f4f6f7;
    background: #FFF;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

    .settingReminderFrequency .setting-reminder__radio::before {
        content: "";
        width: 13.75px;
        height: 13.75px;
        border-radius: 50px;
        background: #690DD3;
        opacity: 0;
        transform: scale(0.6);
        transition: opacity 0.2s ease, transform 0.2s ease;
    }

    .settingReminderFrequency .setting-reminder__radio:checked::before {
        opacity: 1;
        transform: scale(1);
    }

.settingReminderFrequency .setting-reminder__settings-week {
    display: flex;
    align-items: center;
    gap: 24px;
}

.settingReminderFrequency .setting-reminder__button-wrap {
    padding: 4px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 4px;
    border-radius: 8px;
    border: 1px solid #f4f6f7;
    background: #FFF;
}

.settingReminderFrequency .setting-reminder__button-day {
    width: 35px;
    height: 35px;
    padding: 6px 8px;
    color: #767F8A;
    font-family: "Fixel Display";
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: 20px;
    border-radius: 4px;
}

    .settingReminderFrequency .setting-reminder__button-day:hover, .settingReminderFrequency .setting-reminder__button-day:active {
        color: #690DD3;
        background: #F5EDFF;
    }

.settingReminderFrequency .setting-reminder .buttonDayIsActive {
    color: #690DD3;
    background: #F5EDFF;
}

.settingReminderFrequency .setting-reminder__open-up {
    top: auto !important;
    bottom: 100%;
    transform: translateY(-2px);
}

@media (max-width: 768px) {
    .settingReminderFrequency .setting-reminder__row {
        flex-direction: column;
        align-items: baseline;
        gap: 16px;
    }

    .settingReminderFrequency .setting-reminder__interval, .settingReminderFrequency .setting-reminder__month, .settingReminderFrequency .setting-reminder__day {
        align-items: self-start;
        gap: 8px;
        flex-direction: column;
        width: 100%;
    }

    .settingReminderFrequency .setting-reminder__period, .settingReminderFrequency .setting-reminder__interval-year, .settingReminderFrequency .setting-reminder__interval-month, .settingReminderFrequency .setting-reminder__interval-quarter, .settingReminderFrequency .setting-reminder__month-month, .settingReminderFrequency .setting-reminder__button-wrap, .settingReminderFrequency .setting-reminder__settings-week, .settingReminderFrequency .setting-reminder__day-day {
        width: 100%;
    }

    .settingReminderFrequency .setting-reminder__date-setting-wrap {
        flex-direction: column;
        gap: 8px;
    }

    .settingReminderFrequency .setting-reminder__day-week-month {
        align-items: baseline;
    }

    .settingReminderFrequency .setting-reminder__settings-week {
        align-items: baseline;
        flex-direction: column;
        gap: 8px;
    }
}

.settingReminderFrequency .recurrence-selector__date-range {
    display: flex;
    align-items: center;
    gap: 16px;
    width: 100%;
}

@media (max-width: 768px) {
    .settingReminderFrequency .recurrence-selector__date-range {
        flex-direction: column;
        align-items: flex-start;
    }
}

.settingReminderFrequency .recurrence-selector__date-range .date-range-title {
    display: block;
}

.settingReminderFrequency .recurrence-selector__date-range .date-range__period-validity {
    position: relative;
    display: flex;
    align-items: center;
    gap: 1rem;
}

@media (max-width: 768px) {
    .settingReminderFrequency .recurrence-selector__date-range .date-range__period-validity {
        gap: 0.5rem;
    }
}

.settingReminderFrequency .recurrence-selector__date-range .date-range__period-validity .invalid-feedback {
    position: absolute;
}

.settingReminderFrequency .recurrence-selector__date-range .date-range-start,
.settingReminderFrequency .recurrence-selector__date-range .date-range-end {
    min-width: 194px;
}

@media (max-width: 768px) {
    .settingReminderFrequency .recurrence-selector__date-range .date-range-start,
    .settingReminderFrequency .recurrence-selector__date-range .date-range-end {
        min-width: 144px;
    }
}

@media (max-width: 768px) {
    .settingReminderFrequency .recurrence-selector__date-range .date-range-end .dropdown-calendar {
        right: -8px;
        left: auto;
    }
}

.settingReminderFrequency .recurrence-selector__date-range .dropdown-calendar {
    left: -8px;
}

.settingReminderFrequency .recurrence-selector__date-range .date-picker-content {
    width: 100%;
    padding: 6px 12px;
}

.settingReminderFrequency .date-picker-wrapper {
    position: relative;
}

    .settingReminderFrequency .date-picker-wrapper .date-picker-content {
        display: flex;
        align-items: center;
        min-width: 5rem;
        border-radius: 0.5rem;
        border: 1px solid #DBDFE4;
        background: #fff;
        gap: 8px;
    }

        .settingReminderFrequency .date-picker-wrapper .date-picker-content .date-field-range {
            width: 100%;
            padding: 0;
            border-color: transparent;
        }

    .settingReminderFrequency .date-picker-wrapper .btn-date-picker {
        padding: 0 !important;
    }

        .settingReminderFrequency .date-picker-wrapper .btn-date-picker:hover .icon-calendar {
            background: url("../img/newDesign/icon/icon-account-calendar-hover.svg") no-repeat center;
        }

.debugUrl .settingReminderFrequency .date-picker-wrapper .btn-date-picker:hover .icon-calendar {
    background: url("/Content/themes/novapay/img/newDesign/icon/icon-account-calendar-hover.svg") no-repeat center;
}

.settingReminderFrequency .date-picker-wrapper .date-display {
    color: #32383c;
}

.settingReminderFrequency .date-picker-wrapper .btn-date-clear {
    padding: 3px;
    display: none;
}

    .settingReminderFrequency .date-picker-wrapper .btn-date-clear.show {
        display: flex;
    }

.settingReminderFrequency .date-picker-wrapper .dropdown-calendar {
    position: absolute;
    right: -0.5rem;
    padding: 0.5rem;
    width: 18.125rem;
    box-shadow: 0px 1.5rem 2.75rem 0px rgba(98, 98, 100, 0.3);
    border-radius: 1.25rem;
    background: #FFF;
    border: 1px solid #DBDFE4;
    z-index: 10;
}

    .settingReminderFrequency .date-picker-wrapper .dropdown-calendar.calendar-top {
        bottom: 107%;
    }

    .settingReminderFrequency .date-picker-wrapper .dropdown-calendar.calendar-bottom {
        top: 107%;
    }

.settingReminderFrequency .date-picker-wrapper .calendar-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.625rem;
}

.settingReminderFrequency .date-picker-wrapper .btn-prev,
.settingReminderFrequency .date-picker-wrapper .btn-next {
    position: relative;
    padding: 0;
    height: 2rem;
    width: 2rem;
}

    .settingReminderFrequency .date-picker-wrapper .btn-prev::after,
    .settingReminderFrequency .date-picker-wrapper .btn-next::after {
        content: "";
        position: absolute;
        top: 50%;
        left: 50%;
        width: 0.5rem;
        height: 0.5rem;
        border-top: 2px solid #32383c;
        border-left: 2px solid #32383c;
        transform: translate(-50%, -50%) rotate(-45deg);
        transform-origin: center;
    }

    .settingReminderFrequency .date-picker-wrapper .btn-prev::before,
    .settingReminderFrequency .date-picker-wrapper .btn-next::before {
        content: "";
        position: absolute;
        top: 50%;
        left: 50%;
        width: 0;
        height: 0;
        background: #f0f0f0;
        border-radius: 50%;
        transform: translate(-50%, -50%);
        transition: width 0.22s ease, height 0.22s ease;
    }

    .settingReminderFrequency .date-picker-wrapper .btn-prev:hover::before,
    .settingReminderFrequency .date-picker-wrapper .btn-next:hover::before {
        width: 100%;
        height: 100%;
    }

    .settingReminderFrequency .date-picker-wrapper .btn-prev::after {
        transform: translate(-50%, -50%) rotate(-45deg);
    }

    .settingReminderFrequency .date-picker-wrapper .btn-next::after {
        transform: translate(-50%, -50%) rotate(135deg);
    }

.settingReminderFrequency .date-picker-wrapper .week-header {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    text-align: center;
}

.settingReminderFrequency .date-picker-wrapper .empty-day,
.settingReminderFrequency .date-picker-wrapper .calendar-day,
.settingReminderFrequency .date-picker-wrapper .week-day {
    text-align: center;
    height: 2.375rem;
    width: 2.375rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.settingReminderFrequency .date-picker-wrapper .calendar-body .days-container {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
}

.settingReminderFrequency .date-picker-wrapper .calendar-body .empty-day {
    visibility: hidden;
}

.settingReminderFrequency .date-picker-wrapper .calendar-body .calendar-day {
    position: relative;
    cursor: pointer;
    border-radius: 50%;
}

    .settingReminderFrequency .date-picker-wrapper .calendar-body .calendar-day.disabled {
        pointer-events: none;
        border-radius: 0;
    }

        .settingReminderFrequency .date-picker-wrapper .calendar-body .calendar-day.disabled::before {
            width: 100%;
            height: 100%;
            border-radius: 0.75rem;
            background: #f4f6f7;
        }

        .settingReminderFrequency .date-picker-wrapper .calendar-body .calendar-day.disabled span {
            color: #ccc;
        }

    .settingReminderFrequency .date-picker-wrapper .calendar-body .calendar-day span {
        position: relative;
        display: block;
        color: #32383c;
    }

    .settingReminderFrequency .date-picker-wrapper .calendar-body .calendar-day::before {
        content: "";
        position: absolute;
        top: 50%;
        left: 50%;
        width: 0;
        height: 0;
        background: #f0f0f0;
        border-radius: 50%;
        transform: translate(-50%, -50%);
        transition: width 0.22s ease, height 0.22s ease;
    }

    .settingReminderFrequency .date-picker-wrapper .calendar-body .calendar-day:hover::before {
        width: 100%;
        height: 100%;
    }

    .settingReminderFrequency .date-picker-wrapper .calendar-body .calendar-day.chosen {
        background-color: #E1CFF6;
        color: #32383c;
        border-radius: 50%;
    }

        .settingReminderFrequency .date-picker-wrapper .calendar-body .calendar-day.chosen:hover::before {
            display: none;
        }

.settingReminderFrequency .date-picker-wrapper .year-selector {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    margin-top: 10px;
    color: #32383c;
    text-align: center;
}

    .settingReminderFrequency .date-picker-wrapper .year-selector .calendar-year {
        position: relative;
        padding: 0.5rem;
        display: block;
        color: #32383c;
        border-radius: 0.25rem;
        cursor: pointer;
        overflow: hidden;
    }

        .settingReminderFrequency .date-picker-wrapper .year-selector .calendar-year.disabled {
            pointer-events: none;
        }

            .settingReminderFrequency .date-picker-wrapper .year-selector .calendar-year.disabled::before {
                width: 100%;
                height: 100%;
                background: #f4f6f7;
            }

        .settingReminderFrequency .date-picker-wrapper .year-selector .calendar-year span {
            position: relative;
            display: block;
        }

        .settingReminderFrequency .date-picker-wrapper .year-selector .calendar-year::before {
            content: "";
            position: absolute;
            top: 50%;
            left: 50%;
            width: 0;
            height: 0;
            background: #f0f0f0;
            border-radius: 50%;
            transform: translate(-50%, -50%);
            transition: width 0.22s ease, height 0.22s ease;
        }

        .settingReminderFrequency .date-picker-wrapper .year-selector .calendar-year:hover::before {
            width: 200%;
            height: 200%;
        }

        .settingReminderFrequency .date-picker-wrapper .year-selector .calendar-year.chosen {
            background-color: #E1CFF6;
            color: #32383c;
        }

            .settingReminderFrequency .date-picker-wrapper .year-selector .calendar-year.chosen:hover::before {
                display: none;
            }

.settingReminderFrequency .date-picker-wrapper .current-month-year {
    position: relative;
    cursor: pointer;
    font-weight: bold;
    font-size: 14px;
    text-transform: capitalize;
    color: #32383c;
}

    .settingReminderFrequency .date-picker-wrapper .current-month-year::before {
        content: "";
        position: absolute;
        top: 0.25rem;
        width: 7px;
        right: -1.125rem;
        height: 7px;
        border-top: 2px solid #32383c;
        border-left: 2px solid #32383c;
        transform-origin: center;
        transform: translate(-50%, 0) rotate(225deg);
    }

.newDesign .btn,
.newDesign .p-tab,
body .p-drawer .btn,
body .p-drawer .p-tab,
.p-dialog .btn,
.p-dialog .p-tab,
.main-content .btn,
.main-content .p-tab {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 11px 16px;
    border-radius: 8px;
    line-height: 1.2;
    text-align: center;
    font-family: "Fixel Text", "Fixel Display", "Helvetica", "Arial", sans-serif;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
}

    .newDesign .btn__disabled, .newDesign .btn:disabled,
    .newDesign .p-tab__disabled,
    .newDesign .p-tab:disabled,
    body .p-drawer .btn__disabled,
    body .p-drawer .btn:disabled,
    body .p-drawer .p-tab__disabled,
    body .p-drawer .p-tab:disabled,
    .p-dialog .btn__disabled,
    .p-dialog .btn:disabled,
    .p-dialog .p-tab__disabled,
    .p-dialog .p-tab:disabled,
    .main-content .btn__disabled,
    .main-content .btn:disabled,
    .main-content .p-tab__disabled,
    .main-content .p-tab:disabled {
        pointer-events: none;
        cursor: not-allowed;
        opacity: 0.5;
    }

    .newDesign .btn:focus,
    .newDesign .p-tab:focus,
    body .p-drawer .btn:focus,
    body .p-drawer .p-tab:focus,
    .p-dialog .btn:focus,
    .p-dialog .p-tab:focus,
    .main-content .btn:focus,
    .main-content .p-tab:focus {
        outline: none;
        transition: all 0.42s ease-out;
    }

    .newDesign .btn:focus-visible,
    .newDesign .p-tab:focus-visible,
    body .p-drawer .btn:focus-visible,
    body .p-drawer .p-tab:focus-visible,
    .p-dialog .btn:focus-visible,
    .p-dialog .p-tab:focus-visible,
    .main-content .btn:focus-visible,
    .main-content .p-tab:focus-visible {
        outline: none;
        border: none;
    }

.newDesign .btn-primary-bg,
body .p-drawer .btn-primary-bg,
.p-dialog .btn-primary-bg,
.main-content .btn-primary-bg {
    border: none;
    background-color: #690DD3;
    color: #FFF;
    transition: background-color 0.22s ease-out;
    box-shadow: none;
}

    .newDesign .btn-primary-bg:hover, .newDesign .btn-primary-bg:active,
    body .p-drawer .btn-primary-bg:hover,
    body .p-drawer .btn-primary-bg:active,
    .p-dialog .btn-primary-bg:hover,
    .p-dialog .btn-primary-bg:active,
    .main-content .btn-primary-bg:hover,
    .main-content .btn-primary-bg:active {
        background-color: #5E1CAB;
        transition: background-color 0.42s ease-out;
        color: #FFF !important;
    }

.newDesign .btn-secondary,
body .p-drawer .btn-secondary,
.p-dialog .btn-secondary,
.main-content .btn-secondary {
    border: 1px solid #690DD3;
    background-color: #fff;
    color: #690DD3;
}

    .newDesign .btn-secondary:hover,
    body .p-drawer .btn-secondary:hover,
    .p-dialog .btn-secondary:hover,
    .main-content .btn-secondary:hover {
        border-color: rgb(51.0416666667%, 13.1915266106%, 94.6516106443%);
        color: rgb(31.8014705882%, 3.93732493%, 63.9058123249%) !important;
        background-color: #F5EDFF;
        transition: background-color 0.42s ease-out;
    }

    .newDesign .btn-secondary:active,
    body .p-drawer .btn-secondary:active,
    .p-dialog .btn-secondary:active,
    .main-content .btn-secondary:active {
        border-color: rgb(31.8014705882%, 3.93732493%, 63.9058123249%);
        color: rgb(31.8014705882%, 3.93732493%, 63.9058123249%);
        transition: background-color 0.42s ease-out;
    }

.newDesign .btn-base,
body .p-drawer .btn-base,
.p-dialog .btn-base,
.main-content .btn-base {
    border: 1px solid #DBDFE4;
    background-color: transparent;
    color: #202427;
}

.newDesign .btn-base-hover,
body .p-drawer .btn-base-hover,
.p-dialog .btn-base-hover,
.main-content .btn-base-hover {
    border: 1px solid #DBDFE4;
    background-color: transparent;
    color: #32383c;
}

    .newDesign .btn-base-hover:hover, .newDesign .btn-base-hover:active,
    body .p-drawer .btn-base-hover:hover,
    body .p-drawer .btn-base-hover:active,
    .p-dialog .btn-base-hover:hover,
    .p-dialog .btn-base-hover:active,
    .main-content .btn-base-hover:hover,
    .main-content .btn-base-hover:active {
        border-color: #A8ADB4;
        color: #32383c;
        background-color: #f4f6f7;
        transition: background-color 0.52s ease-out;
    }

.newDesign .btn-cancel,
body .p-drawer .btn-cancel,
.p-dialog .btn-cancel,
.main-content .btn-cancel {
    gap: 8px;
    border: 1px solid #EB4235;
    background-color: #FFF4F3;
    color: #EB4235;
}

    .newDesign .btn-cancel:hover, .newDesign .btn-cancel:active,
    body .p-drawer .btn-cancel:hover,
    body .p-drawer .btn-cancel:active,
    .p-dialog .btn-cancel:hover,
    .p-dialog .btn-cancel:active,
    .main-content .btn-cancel:hover,
    .main-content .btn-cancel:active {
        color: #EB4235;
        background-color: #FFEBEA;
        transition: background-color 0.42s ease-out;
    }

.newDesign .btn-invalid,
body .p-drawer .btn-invalid,
.p-dialog .btn-invalid,
.main-content .btn-invalid {
    gap: 8px;
    border: none;
    background-color: transparent;
    color: #EB4235;
}

    .newDesign .btn-invalid:hover, .newDesign .btn-invalid:active,
    body .p-drawer .btn-invalid:hover,
    body .p-drawer .btn-invalid:active,
    .p-dialog .btn-invalid:hover,
    .p-dialog .btn-invalid:active,
    .main-content .btn-invalid:hover,
    .main-content .btn-invalid:active {
        color: rgb(84.5680975093%, 13.8155802862%, 8.3730789613%);
        background-color: transparent;
        transition: color 0.42s ease-out;
    }

.newDesign .btn-appy,
body .p-drawer .btn-appy,
.p-dialog .btn-appy,
.main-content .btn-appy {
    gap: 8px;
    border: 1px solid #22967F !important;
    background-color: #E1F8F2 !important;
    color: #22967F !important;
}

    .newDesign .btn-appy:hover,
    body .p-drawer .btn-appy:hover,
    .p-dialog .btn-appy:hover,
    .main-content .btn-appy:hover {
        color: #0D5C53 !important;
        background-color: rgba(155, 223, 210, 0.5215686275) !important;
        border: 1px solid #0D5C53 !important;
        transition: background-color 0.42s ease-out;
    }

    .newDesign .btn-appy:active,
    body .p-drawer .btn-appy:active,
    .p-dialog .btn-appy:active,
    .main-content .btn-appy:active {
        color: #0D5C53;
        background-color: rgba(155, 223, 210, 0.5215686275);
        border: 1px solid #0D5C53;
        transition: background-color 0.42s ease-out;
    }

.newDesign .btn-close__modal,
body .p-drawer .btn-close__modal,
.p-dialog .btn-close__modal,
.main-content .btn-close__modal {
    height: 2rem;
    width: 2rem;
    padding: 0.25rem;
    background: #F4F6F7;
}

.newDesign .btn-clear-period,
body .p-drawer .btn-clear-period,
.p-dialog .btn-clear-period,
.main-content .btn-clear-period {
    border: 1px solid #DBDFE4;
    background-color: transparent;
    padding: 0;
    margin-right: 5px;
}

    .newDesign .btn-clear-period:hover,
    body .p-drawer .btn-clear-period:hover,
    .p-dialog .btn-clear-period:hover,
    .main-content .btn-clear-period:hover {
        background-color: #f5edff;
        transition: background-color 0.42s ease-out;
        border-color: #5E1CAB;
        color: #5E1CAB;
    }

.newDesign .required-field,
body .p-drawer .required-field,
.main-content .required-field,
.p-dialog .required-field {
    position: relative;
    padding-right: 0.5rem;
    width: fit-content;
}

    .newDesign .required-field:before,
    body .p-drawer .required-field:before,
    .main-content .required-field:before,
    .p-dialog .required-field:before {
        content: "*";
        position: absolute;
        right: 0;
        color: #EB4235;
    }

.newDesign .form-control[type=password],
body .p-drawer .form-control[type=password],
.main-content .form-control[type=password],
.p-dialog .form-control[type=password] {
    max-height: 40px;
    font-size: 24px !important;
}

    .newDesign .form-control[type=password]::-ms-reveal, .newDesign .form-control[type=password]::-ms-clear,
    body .p-drawer .form-control[type=password]::-ms-reveal,
    body .p-drawer .form-control[type=password]::-ms-clear,
    .main-content .form-control[type=password]::-ms-reveal,
    .main-content .form-control[type=password]::-ms-clear,
    .p-dialog .form-control[type=password]::-ms-reveal,
    .p-dialog .form-control[type=password]::-ms-clear {
        display: none;
    }

.newDesign .form-control,
body .p-drawer .form-control,
.main-content .form-control,
.p-dialog .form-control {
    max-height: 40px;
}

.newDesign .input-control__auth,
.newDesign .form-control,
body .p-drawer .input-control__auth,
body .p-drawer .form-control,
.main-content .input-control__auth,
.main-content .form-control,
.p-dialog .input-control__auth,
.p-dialog .form-control {
    padding: 0.5rem 0.75rem;
    border-radius: 0.5rem;
    border: 1px solid #DBDFE4;
    background: #FFF;
    color: #32383c;
    font-family: "Fixel Text", "Fixel Display", "Helvetica", "Arial", sans-serif;
    font-size: 15px;
    font-style: normal;
    font-weight: 400;
    line-height: 1.5rem;
}

    .newDesign .input-control__auth:focus,
    .newDesign .form-control:focus,
    body .p-drawer .input-control__auth:focus,
    body .p-drawer .form-control:focus,
    .main-content .input-control__auth:focus,
    .main-content .form-control:focus,
    .p-dialog .input-control__auth:focus,
    .p-dialog .form-control:focus {
        outline: none;
    }

    .newDesign .form-control.is-invalid,
    body .p-drawer .form-control.is-invalid,
    .main-content .form-control.is-invalid,
    .p-dialog .form-control.is-invalid {
        border-color: #EB4235;
    }

.newDesign .lable-text,
.newDesign .form-label,
body .p-drawer .lable-text,
body .p-drawer .form-label,
.main-content .lable-text,
.main-content .form-label,
.p-dialog .lable-text,
.p-dialog .form-label {
    color: #767F8A;
    font-family: "Fixel Text", "Fixel Display", "Helvetica", "Arial", sans-serif;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.2;
}

.newDesign .base-input,
.newDesign .p-inputtext,
body .p-drawer .base-input,
body .p-drawer .p-inputtext,
.main-content .base-input,
.main-content .p-inputtext,
.p-dialog .base-input,
.p-dialog .p-inputtext {
    max-height: 2.375rem;
    display: flex;
    padding: 0.5rem 0.75rem;
    align-items: center;
    border-radius: 0.5rem;
    border: 1px solid #DBDFE4;
    background: #FFF;
    font-size: 15px;
    font-style: normal;
    font-weight: 400;
    line-height: 1.5rem;
    color: #32383c;
}

    .newDesign .base-input::placeholder,
    .newDesign .p-inputtext::placeholder,
    body .p-drawer .base-input::placeholder,
    body .p-drawer .p-inputtext::placeholder,
    .main-content .base-input::placeholder,
    .main-content .p-inputtext::placeholder,
    .p-dialog .base-input::placeholder,
    .p-dialog .p-inputtext::placeholder {
        color: #767F8A;
    }

.newDesign .error-message,
.newDesign .invalid-feedback,
body .p-drawer .error-message,
body .p-drawer .invalid-feedback,
.main-content .error-message,
.main-content .invalid-feedback,
.p-dialog .error-message,
.p-dialog .invalid-feedback {
    padding-top: 0.5rem;
    font-size: 12px;
    color: #EB4235;
}

.newDesign .invalid-feedback,
body .p-drawer .invalid-feedback,
.main-content .invalid-feedback,
.p-dialog .invalid-feedback {
    display: none;
}

.newDesign .is-invalid-server,
body .p-drawer .is-invalid-server,
.main-content .is-invalid-server,
.p-dialog .is-invalid-server {
    display: block !important;
    color: rgb(97.5622681505%, 76.9634340223%, 75.3789083201%);
}

.newDesign .is-invalid ~ .invalid-feedback,
.newDesign .is-invalid ~ .invalid-tooltip,
.newDesign .was-validated :invalid ~ .invalid-feedback,
.newDesign .was-validated :invalid ~ .invalid-tooltip,
body .p-drawer .is-invalid ~ .invalid-feedback,
body .p-drawer .is-invalid ~ .invalid-tooltip,
body .p-drawer .was-validated :invalid ~ .invalid-feedback,
body .p-drawer .was-validated :invalid ~ .invalid-tooltip,
.main-content .is-invalid ~ .invalid-feedback,
.main-content .is-invalid ~ .invalid-tooltip,
.main-content .was-validated :invalid ~ .invalid-feedback,
.main-content .was-validated :invalid ~ .invalid-tooltip,
.p-dialog .is-invalid ~ .invalid-feedback,
.p-dialog .is-invalid ~ .invalid-tooltip,
.p-dialog .was-validated :invalid ~ .invalid-feedback,
.p-dialog .was-validated :invalid ~ .invalid-tooltip {
    display: block !important;
    color: #EB4235;
}

.newDesign .p-inputwrapper.p-invalid,
body .p-drawer .p-inputwrapper.p-invalid,
.main-content .p-inputwrapper.p-invalid,
.p-dialog .p-inputwrapper.p-invalid {
    border-color: #EB4235;
}

.newDesign .custom-select,
body .p-drawer .custom-select,
.main-content .custom-select,
.p-dialog .custom-select {
    max-height: 2.5rem;
    position: relative;
    min-width: 116px;
    font-size: 15px;
    color: #767F8A;
    font-style: normal;
    line-height: 1.5rem;
}

.newDesign .custom-select__trigger,
body .p-drawer .custom-select__trigger,
.main-content .custom-select__trigger,
.p-dialog .custom-select__trigger {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: 0.5rem 0.75rem;
    height: 2.5rem;
    background: #FFF;
    border: 1px solid #DBDFE4;
    border-radius: 0.5rem;
    cursor: pointer;
    transition: background 0.5s, border-color 0.3s;
}

    .newDesign .custom-select__trigger input,
    body .p-drawer .custom-select__trigger input,
    .main-content .custom-select__trigger input,
    .p-dialog .custom-select__trigger input {
        transition: background 0.5s;
    }

    .newDesign .custom-select__trigger:hover,
    body .p-drawer .custom-select__trigger:hover,
    .main-content .custom-select__trigger:hover,
    .p-dialog .custom-select__trigger:hover {
        background: #f4f6f7;
    }

        .newDesign .custom-select__trigger:hover input,
        body .p-drawer .custom-select__trigger:hover input,
        .main-content .custom-select__trigger:hover input,
        .p-dialog .custom-select__trigger:hover input {
            background: #f4f6f7;
        }

.newDesign .custom-select__value,
body .p-drawer .custom-select__value,
.main-content .custom-select__value,
.p-dialog .custom-select__value {
    width: 100%;
    color: #767F8A;
    flex: 1;
    border-color: transparent;
    text-align: left;
    font-size: 15px;
    font-style: normal;
    font-weight: 400;
    line-height: 1.5rem;
}

    .newDesign .custom-select__value:hover,
    body .p-drawer .custom-select__value:hover,
    .main-content .custom-select__value:hover,
    .p-dialog .custom-select__value:hover {
        background: #f4f6f7;
    }

.newDesign .custom-select__arrow,
body .p-drawer .custom-select__arrow,
.main-content .custom-select__arrow,
.p-dialog .custom-select__arrow {
    width: 24px;
    height: 24px;
    transform: rotate(0deg);
    transition: transform 0.3s;
}

.newDesign .custom-select.open .custom-select__arrow,
body .p-drawer .custom-select.open .custom-select__arrow,
.main-content .custom-select.open .custom-select__arrow,
.p-dialog .custom-select.open .custom-select__arrow {
    transform: rotate(180deg);
}

.newDesign .custom-select.open .custom-select__dropdown,
body .p-drawer .custom-select.open .custom-select__dropdown,
.main-content .custom-select.open .custom-select__dropdown,
.p-dialog .custom-select.open .custom-select__dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.newDesign .custom-select__dropdown,
body .p-drawer .custom-select__dropdown,
.main-content .custom-select__dropdown,
.p-dialog .custom-select__dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: #FFF;
    border-radius: 8px;
    border: 1px solid #DBDFE4;
    box-shadow: 0px 24px 44px rgba(98, 98, 100, 0.3);
    z-index: 10;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-5px);
    transition: opacity 0.3s, transform 0.3s;
}

.newDesign .custom-select__list,
body .p-drawer .custom-select__list,
.main-content .custom-select__list,
.p-dialog .custom-select__list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.newDesign .custom-select__option,
body .p-drawer .custom-select__option,
.main-content .custom-select__option,
.p-dialog .custom-select__option {
    padding: 8px 12px;
    color: #767F8A;
    font-size: 15px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px;
    cursor: pointer;
    transition: background 0.3s;
}

    .newDesign .custom-select__option:hover,
    body .p-drawer .custom-select__option:hover,
    .main-content .custom-select__option:hover,
    .p-dialog .custom-select__option:hover {
        background: #f4f6f7;
    }

    .newDesign .custom-select__option.selected,
    body .p-drawer .custom-select__option.selected,
    .main-content .custom-select__option.selected,
    .p-dialog .custom-select__option.selected {
        background: #f4f6f7 !important;
        color: #767F8A !important;
        border: none !important;
    }

.newDesign .custom-select .disabled,
body .p-drawer .custom-select .disabled,
.main-content .custom-select .disabled,
.p-dialog .custom-select .disabled {
    pointer-events: none;
    opacity: 0.5;
}

.newDesign .form-check-label,
body .p-drawer .form-check-label,
.main-content .form-check-label,
.p-dialog .form-check-label {
    position: relative;
    display: inline-block;
    z-index: 1;
    cursor: pointer;
}

    .newDesign .form-check-label .form-check-input,
    body .p-drawer .form-check-label .form-check-input,
    .main-content .form-check-label .form-check-input,
    .p-dialog .form-check-label .form-check-input {
        position: absolute;
        opacity: 0;
        z-index: -1;
    }

        .newDesign .form-check-label .form-check-input:checked + .checkbox-view::after,
        body .p-drawer .form-check-label .form-check-input:checked + .checkbox-view::after,
        .main-content .form-check-label .form-check-input:checked + .checkbox-view::after,
        .p-dialog .form-check-label .form-check-input:checked + .checkbox-view::after {
            opacity: 1;
        }

    .newDesign .form-check-label .checkbox-view,
    body .p-drawer .form-check-label .checkbox-view,
    .main-content .form-check-label .checkbox-view,
    .p-dialog .form-check-label .checkbox-view {
        display: block;
        height: 100%;
        width: 100%;
    }

        .newDesign .form-check-label .checkbox-view::after, .newDesign .form-check-label .checkbox-view::before,
        body .p-drawer .form-check-label .checkbox-view::after,
        body .p-drawer .form-check-label .checkbox-view::before,
        .main-content .form-check-label .checkbox-view::after,
        .main-content .form-check-label .checkbox-view::before,
        .p-dialog .form-check-label .checkbox-view::after,
        .p-dialog .form-check-label .checkbox-view::before {
            content: "";
            position: absolute;
            height: 1.375rem;
            width: 1.375rem;
            left: 0;
            top: 50%;
            transform: translateY(-50%);
        }

        .newDesign .form-check-label .checkbox-view::before,
        body .p-drawer .form-check-label .checkbox-view::before,
        .main-content .form-check-label .checkbox-view::before,
        .p-dialog .form-check-label .checkbox-view::before {
            border-radius: 0.25rem;
            border: 1px solid #DBDFE4;
            background: #fff;
            transition: background 0.42s ease, border-color 0.3s ease;
        }

        .newDesign .form-check-label .checkbox-view::after,
        body .p-drawer .form-check-label .checkbox-view::after,
        .main-content .form-check-label .checkbox-view::after,
        .p-dialog .form-check-label .checkbox-view::after {
            border-radius: 0.35rem;
            border: 1px solid #690DD3;
            background: url("../img/newDesign/icon/ico-checkbox.svg") no-repeat center center;
            opacity: 0;
            transition: opacity 0.42s ease;
        }

.debugUrl .newDesign .form-check-label .checkbox-view::after,
.debugUrl body .p-drawer .form-check-label .checkbox-view::after,
.debugUrl .main-content .form-check-label .checkbox-view::after,
.debugUrl .p-dialog .form-check-label .checkbox-view::after {
    background: url("/Content/themes/novapay/img/newDesign/icon/ico-checkbox.svg") no-repeat center/100%;
}

.newDesign .base-inp-textarea,
body .p-drawer .base-inp-textarea,
.main-content .base-inp-textarea,
.p-dialog .base-inp-textarea {
    border-radius: 8px;
    border: 1px solid #DBDFE4;
    background: #FFF;
    display: flex;
    padding: 8px 12px;
    font-size: 15px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px;
    color: #32383c;
}

    .newDesign .base-inp-textarea::placeholder,
    body .p-drawer .base-inp-textarea::placeholder,
    .main-content .base-inp-textarea::placeholder,
    .p-dialog .base-inp-textarea::placeholder {
        color: #767F8A;
    }

.newDesign .sender-dropdown-container.is-invalid .section-button,
.newDesign .custom-select.is-invalid .custom-select__trigger,
body .p-drawer .sender-dropdown-container.is-invalid .section-button,
body .p-drawer .custom-select.is-invalid .custom-select__trigger,
.main-content .sender-dropdown-container.is-invalid .section-button,
.main-content .custom-select.is-invalid .custom-select__trigger,
.p-dialog .sender-dropdown-container.is-invalid .section-button,
.p-dialog .custom-select.is-invalid .custom-select__trigger {
    border: 1px solid red;
}

.newDesign .is-invalid,
body .p-drawer .is-invalid,
.main-content .is-invalid,
.p-dialog .is-invalid {
    border-color: #EB4235 !important;
}

.newDesign .inputWithSelect .p-autocomplete,
body .p-drawer .inputWithSelect .p-autocomplete,
.main-content .inputWithSelect .p-autocomplete,
.p-dialog .inputWithSelect .p-autocomplete {
    border-radius: 8px;
    border: 1px solid var(--System-Gray-NEW-300---Stroke, #DBDFE4);
    background: var(--System-White, #FFF);
}

.newDesign .inputWithSelect .p-inputtext,
body .p-drawer .inputWithSelect .p-inputtext,
.main-content .inputWithSelect .p-inputtext,
.p-dialog .inputWithSelect .p-inputtext {
    height: 40px;
    padding: 8px 12px;
    background: var(--System-White, #FFF);
    border: none;
    border-radius: 8px;
    color: #32383c;
    font-size: 15px;
    font-style: normal;
    line-height: 24px;
}

    .newDesign .inputWithSelect .p-inputtext::placeholder,
    body .p-drawer .inputWithSelect .p-inputtext::placeholder,
    .main-content .inputWithSelect .p-inputtext::placeholder,
    .p-dialog .inputWithSelect .p-inputtext::placeholder {
        color: #767F8A;
        font-size: 15px;
        font-style: normal;
        line-height: 1.5rem;
    }

.newDesign .inputWithSelect .p-autocomplete-dropdown,
body .p-drawer .inputWithSelect .p-autocomplete-dropdown,
.main-content .inputWithSelect .p-autocomplete-dropdown,
.p-dialog .inputWithSelect .p-autocomplete-dropdown {
    padding-left: 0;
}

.newDesign .inputWithSelect .select-arrow-icon.custom-select__arrow,
body .p-drawer .inputWithSelect .select-arrow-icon.custom-select__arrow,
.main-content .inputWithSelect .select-arrow-icon.custom-select__arrow,
.p-dialog .inputWithSelect .select-arrow-icon.custom-select__arrow {
    width: 1.5rem;
    height: 1.5rem;
    display: inline-block;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: transform;
}

.newDesign .inputWithSelect .p-autocomplete:has(input[aria-expanded=true]) .select-arrow-icon.custom-select__arrow,
body .p-drawer .inputWithSelect .p-autocomplete:has(input[aria-expanded=true]) .select-arrow-icon.custom-select__arrow,
.main-content .inputWithSelect .p-autocomplete:has(input[aria-expanded=true]) .select-arrow-icon.custom-select__arrow,
.p-dialog .inputWithSelect .p-autocomplete:has(input[aria-expanded=true]) .select-arrow-icon.custom-select__arrow {
    transform: rotate(180deg);
}

.newDesign .p-autocomplete-overlay .p-autocomplete-list-container,
body .p-drawer .p-autocomplete-overlay .p-autocomplete-list-container,
.main-content .p-autocomplete-overlay .p-autocomplete-list-container,
.p-dialog .p-autocomplete-overlay .p-autocomplete-list-container {
    width: calc(100% + 30px);
}

.newDesign .p-autocomplete-overlay .p-autocomplete-list,
body .p-drawer .p-autocomplete-overlay .p-autocomplete-list,
.main-content .p-autocomplete-overlay .p-autocomplete-list,
.p-dialog .p-autocomplete-overlay .p-autocomplete-list {
    border-radius: 8px;
    border: solid 1px #DBDFE4;
    background: #FFF;
}

.newDesign .p-autocomplete-overlay .p-autocomplete-option,
body .p-drawer .p-autocomplete-overlay .p-autocomplete-option,
.main-content .p-autocomplete-overlay .p-autocomplete-option,
.p-dialog .p-autocomplete-overlay .p-autocomplete-option {
    height: 40px;
    color: #767F8A;
    font-size: 15px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px;
    border-bottom: 1px solid #DBDFE4;
    padding: 0 12px;
    transition: background 0.3s;
}

    .newDesign .p-autocomplete-overlay .p-autocomplete-option:last-child,
    body .p-drawer .p-autocomplete-overlay .p-autocomplete-option:last-child,
    .main-content .p-autocomplete-overlay .p-autocomplete-option:last-child,
    .p-dialog .p-autocomplete-overlay .p-autocomplete-option:last-child {
        border-bottom: none;
    }

.newDesign .p-autocomplete-overlay .p-focus,
body .p-drawer .p-autocomplete-overlay .p-focus,
.main-content .p-autocomplete-overlay .p-focus,
.p-dialog .p-autocomplete-overlay .p-focus {
    background: #f4f6f7 !important;
    color: #767F8A !important;
}

.tooltip-wrap {
    position: relative;
    display: inline-block;
}

    .tooltip-wrap:hover .tooltip-text {
        display: block;
    }

.tooltip-text {
    display: none;
    position: absolute;
    bottom: 35px;
    left: 0.5rem;
    min-width: max-content;
    justify-content: center;
    align-items: center;
    padding: 0.375rem 0.5rem;
    border-radius: 0.25rem;
    background: #202427;
    transform: translateX(-50%);
    transition: opacity 0.3s;
    color: #FFF;
    text-align: center;
    font-size: 11px;
    font-style: normal;
    z-index: 1000;
}

    .tooltip-text:after {
        content: "";
        left: calc(100% - (50% + 14px));
        bottom: -9px;
        position: absolute;
        border-left: 14px solid transparent;
        border-right: 14px solid transparent;
        border-top: 12px solid #202427;
    }

.tooltip-force-show .tooltip-text {
    display: block !important;
}

@media (max-width: 479px) {
    .tooltip-text {
        left: -20px;
        transform: none;
    }

        .tooltip-text:after {
            left: calc(100% - (21% + 14px));
        }
}

.newDesign .modal,
.postpaid-container .modal,
.main-content .modal {
    visibility: hidden;
    position: fixed;
    top: 0;
    left: 0;
    height: 0;
    width: 100%;
    opacity: 0;
    z-index: 1072;
}

    .newDesign .modal#modalDetailsOfAccount,
    .postpaid-container .modal#modalDetailsOfAccount,
    .main-content .modal#modalDetailsOfAccount {
        z-index: 3000;
    }

    .newDesign .modal.rightHalfScreen, .newDesign .modal.leftHalfScreen,
    .postpaid-container .modal.rightHalfScreen,
    .postpaid-container .modal.leftHalfScreen,
    .main-content .modal.rightHalfScreen,
    .main-content .modal.leftHalfScreen {
        display: flex;
        overflow-y: unset;
        overflow-x: unset;
        transition: transform 0.42s ease-out, opacity 0.42s ease-out;
    }

        .newDesign .modal.rightHalfScreen .modal-dialog, .newDesign .modal.leftHalfScreen .modal-dialog,
        .postpaid-container .modal.rightHalfScreen .modal-dialog,
        .postpaid-container .modal.leftHalfScreen .modal-dialog,
        .main-content .modal.rightHalfScreen .modal-dialog,
        .main-content .modal.leftHalfScreen .modal-dialog {
            position: relative;
            top: 0;
            right: 0;
            left: 0;
            height: 100%;
            max-height: 100%;
            width: 100%;
            padding: 0;
            border-radius: 0;
        }

        .newDesign .modal.rightHalfScreen.is-open .modal-dialog, .newDesign .modal.leftHalfScreen.is-open .modal-dialog,
        .postpaid-container .modal.rightHalfScreen.is-open .modal-dialog,
        .postpaid-container .modal.leftHalfScreen.is-open .modal-dialog,
        .main-content .modal.rightHalfScreen.is-open .modal-dialog,
        .main-content .modal.leftHalfScreen.is-open .modal-dialog {
            top: 0;
            width: fit-content;
        }

    .newDesign .modal.rightHalfScreen,
    .postpaid-container .modal.rightHalfScreen,
    .main-content .modal.rightHalfScreen {
        justify-content: flex-end;
        transform: translateX(200%);
    }

        .newDesign .modal.rightHalfScreen .modal-dialog,
        .postpaid-container .modal.rightHalfScreen .modal-dialog,
        .main-content .modal.rightHalfScreen .modal-dialog {
            transform: translate(200%, 0);
        }

        .newDesign .modal.rightHalfScreen.is-open,
        .postpaid-container .modal.rightHalfScreen.is-open,
        .main-content .modal.rightHalfScreen.is-open {
            transform: translateX(0);
        }

            .newDesign .modal.rightHalfScreen.is-open .modal-dialog,
            .postpaid-container .modal.rightHalfScreen.is-open .modal-dialog,
            .main-content .modal.rightHalfScreen.is-open .modal-dialog {
                transform: translate(0);
            }

    .newDesign .modal.leftHalfScreen,
    .postpaid-container .modal.leftHalfScreen,
    .main-content .modal.leftHalfScreen {
        justify-content: flex-start;
        transform: translateX(-200%);
    }

        .newDesign .modal.leftHalfScreen .modal-dialog,
        .postpaid-container .modal.leftHalfScreen .modal-dialog,
        .main-content .modal.leftHalfScreen .modal-dialog {
            transform: translate(-200%, 0);
        }

        .newDesign .modal.leftHalfScreen.is-open,
        .postpaid-container .modal.leftHalfScreen.is-open,
        .main-content .modal.leftHalfScreen.is-open {
            transform: translateX(0);
        }

            .newDesign .modal.leftHalfScreen.is-open .modal-dialog,
            .postpaid-container .modal.leftHalfScreen.is-open .modal-dialog,
            .main-content .modal.leftHalfScreen.is-open .modal-dialog {
                transform: translate(0);
            }

    .newDesign .modal.is-open,
    .postpaid-container .modal.is-open,
    .main-content .modal.is-open {
        visibility: visible;
        opacity: 1;
        height: 100%;
        transition: opacity 0.42s ease-out;
        overflow-x: hidden;
        overflow-y: auto;
    }

        .newDesign .modal.is-open .modal-dialog,
        .postpaid-container .modal.is-open .modal-dialog,
        .main-content .modal.is-open .modal-dialog {
            top: 50%;
            transform: translate(-50%, -50%);
            transition: all 0.42s ease-out;
        }

@media (max-width: 576px) {
    .newDesign .modal.is-open .modal-dialog,
    .postpaid-container .modal.is-open .modal-dialog,
    .main-content .modal.is-open .modal-dialog {
        top: auto;
        width: 100%;
        bottom: 0;
        left: 0;
        border-radius: 12px 12px 0 0;
        transform: translate(0, 0);
    }
}

.newDesign .modal.is-open .modal-dialog.modal-account-detail,
.postpaid-container .modal.is-open .modal-dialog.modal-account-detail,
.main-content .modal.is-open .modal-dialog.modal-account-detail {
    min-width: 22rem;
    max-width: 40.625rem;
    width: 100%;
    padding: 0;
}

    .newDesign .modal.is-open .modal-dialog.modal-account-detail .modal-content,
    .postpaid-container .modal.is-open .modal-dialog.modal-account-detail .modal-content,
    .main-content .modal.is-open .modal-dialog.modal-account-detail .modal-content {
        max-width: 100%;
    }

.newDesign .modal.is-open .modal-dialog.createPayment, .newDesign .modal.is-open .modal-dialog.importPayment, .newDesign .modal.is-open .modal-dialog.creatTemplatePayment,
.postpaid-container .modal.is-open .modal-dialog.createPayment,
.postpaid-container .modal.is-open .modal-dialog.importPayment,
.postpaid-container .modal.is-open .modal-dialog.creatTemplatePayment,
.main-content .modal.is-open .modal-dialog.createPayment,
.main-content .modal.is-open .modal-dialog.importPayment,
.main-content .modal.is-open .modal-dialog.creatTemplatePayment {
    position: relative;
    height: 100%;
    max-height: 100%;
    width: 100%;
    max-width: 59.5rem;
    width: 100%;
    padding: 0;
    transform: translate(0);
}

@media (max-width: 1623px) {
    .newDesign .modal.is-open .modal-dialog.createPayment, .newDesign .modal.is-open .modal-dialog.importPayment, .newDesign .modal.is-open .modal-dialog.creatTemplatePayment,
    .postpaid-container .modal.is-open .modal-dialog.createPayment,
    .postpaid-container .modal.is-open .modal-dialog.importPayment,
    .postpaid-container .modal.is-open .modal-dialog.creatTemplatePayment,
    .main-content .modal.is-open .modal-dialog.createPayment,
    .main-content .modal.is-open .modal-dialog.importPayment,
    .main-content .modal.is-open .modal-dialog.creatTemplatePayment {
        max-width: 48.688rem;
        min-width: 22rem;
    }
}

@media (max-width: 768px) {
    .newDesign .modal.is-open .modal-dialog.createPayment, .newDesign .modal.is-open .modal-dialog.importPayment, .newDesign .modal.is-open .modal-dialog.creatTemplatePayment,
    .postpaid-container .modal.is-open .modal-dialog.createPayment,
    .postpaid-container .modal.is-open .modal-dialog.importPayment,
    .postpaid-container .modal.is-open .modal-dialog.creatTemplatePayment,
    .main-content .modal.is-open .modal-dialog.createPayment,
    .main-content .modal.is-open .modal-dialog.importPayment,
    .main-content .modal.is-open .modal-dialog.creatTemplatePayment {
        min-width: 22rem;
        width: 50%;
    }
}

@media (max-width: 576px) {
    .newDesign .modal.is-open .modal-dialog.createPayment, .newDesign .modal.is-open .modal-dialog.importPayment, .newDesign .modal.is-open .modal-dialog.creatTemplatePayment,
    .postpaid-container .modal.is-open .modal-dialog.createPayment,
    .postpaid-container .modal.is-open .modal-dialog.importPayment,
    .postpaid-container .modal.is-open .modal-dialog.creatTemplatePayment,
    .main-content .modal.is-open .modal-dialog.createPayment,
    .main-content .modal.is-open .modal-dialog.importPayment,
    .main-content .modal.is-open .modal-dialog.creatTemplatePayment {
        width: 360px;
    }
}

.newDesign .modal.is-open .modal-dialog.createPayment .modal-content, .newDesign .modal.is-open .modal-dialog.importPayment .modal-content, .newDesign .modal.is-open .modal-dialog.creatTemplatePayment .modal-content,
.postpaid-container .modal.is-open .modal-dialog.createPayment .modal-content,
.postpaid-container .modal.is-open .modal-dialog.importPayment .modal-content,
.postpaid-container .modal.is-open .modal-dialog.creatTemplatePayment .modal-content,
.main-content .modal.is-open .modal-dialog.createPayment .modal-content,
.main-content .modal.is-open .modal-dialog.importPayment .modal-content,
.main-content .modal.is-open .modal-dialog.creatTemplatePayment .modal-content {
    height: 100%;
    width: 100%;
    max-width: 100%;
}

.newDesign .modal.is-open .modal-dialog.createPayment:before, .newDesign .modal.is-open .modal-dialog.importPayment:before, .newDesign .modal.is-open .modal-dialog.creatTemplatePayment:before,
.postpaid-container .modal.is-open .modal-dialog.createPayment:before,
.postpaid-container .modal.is-open .modal-dialog.importPayment:before,
.postpaid-container .modal.is-open .modal-dialog.creatTemplatePayment:before,
.main-content .modal.is-open .modal-dialog.createPayment:before,
.main-content .modal.is-open .modal-dialog.importPayment:before,
.main-content .modal.is-open .modal-dialog.creatTemplatePayment:before {
    position: absolute;
    content: "";
    display: block;
    top: 50%;
    left: calc(50% - 25px);
    width: 50px;
    height: 50px;
    background: url("../img/newDesign/spinner-loading.png") no-repeat center;
    animation: rotate 1s linear infinite;
    transform: translate(-50%, -50%);
}

.debugUrl .newDesign .modal.is-open .modal-dialog.createPayment:before, .debugUrl .newDesign .modal.is-open .modal-dialog.importPayment:before, .debugUrl .newDesign .modal.is-open .modal-dialog.creatTemplatePayment:before,
.debugUrl .postpaid-container .modal.is-open .modal-dialog.createPayment:before,
.debugUrl .postpaid-container .modal.is-open .modal-dialog.importPayment:before,
.debugUrl .postpaid-container .modal.is-open .modal-dialog.creatTemplatePayment:before,
.debugUrl .main-content .modal.is-open .modal-dialog.createPayment:before,
.debugUrl .main-content .modal.is-open .modal-dialog.importPayment:before,
.debugUrl .main-content .modal.is-open .modal-dialog.creatTemplatePayment:before {
    background: url("/Content/themes/novapay/img/newDesign/spinner-loading.png") no-repeat center;
}

.newDesign .modal.is-open .modal-dialog.createPayment:has(.account-payment)::before, .newDesign .modal.is-open .modal-dialog.importPayment:has(.account-payment)::before, .newDesign .modal.is-open .modal-dialog.creatTemplatePayment:has(.account-payment)::before,
.postpaid-container .modal.is-open .modal-dialog.createPayment:has(.account-payment)::before,
.postpaid-container .modal.is-open .modal-dialog.importPayment:has(.account-payment)::before,
.postpaid-container .modal.is-open .modal-dialog.creatTemplatePayment:has(.account-payment)::before,
.main-content .modal.is-open .modal-dialog.createPayment:has(.account-payment)::before,
.main-content .modal.is-open .modal-dialog.importPayment:has(.account-payment)::before,
.main-content .modal.is-open .modal-dialog.creatTemplatePayment:has(.account-payment)::before {
    display: none;
}

.newDesign .modal.is-open .modal-dialog.importPayment:before,
.postpaid-container .modal.is-open .modal-dialog.importPayment:before,
.main-content .modal.is-open .modal-dialog.importPayment:before {
    display: none;
}

.newDesign .modal.is-open .modal-dialog.close-modal-payment-wrap, .newDesign .modal.is-open .modal-dialog.close-modal-templatePayment-wrap, .newDesign .modal.is-open .modal-dialog.close-modal-detailTemplate-wrap, .newDesign .modal.is-open .modal-dialog.modal-deactivatingReminder-template-wrap, .newDesign .modal.is-open .modal-dialog.modal-delete-template-wrap,
.postpaid-container .modal.is-open .modal-dialog.close-modal-payment-wrap,
.postpaid-container .modal.is-open .modal-dialog.close-modal-templatePayment-wrap,
.postpaid-container .modal.is-open .modal-dialog.close-modal-detailTemplate-wrap,
.postpaid-container .modal.is-open .modal-dialog.modal-deactivatingReminder-template-wrap,
.postpaid-container .modal.is-open .modal-dialog.modal-delete-template-wrap,
.main-content .modal.is-open .modal-dialog.close-modal-payment-wrap,
.main-content .modal.is-open .modal-dialog.close-modal-templatePayment-wrap,
.main-content .modal.is-open .modal-dialog.close-modal-detailTemplate-wrap,
.main-content .modal.is-open .modal-dialog.modal-deactivatingReminder-template-wrap,
.main-content .modal.is-open .modal-dialog.modal-delete-template-wrap {
    max-width: 35rem;
    width: 100%;
}

    .newDesign .modal.is-open .modal-dialog.close-modal-payment-wrap .modal-content, .newDesign .modal.is-open .modal-dialog.close-modal-templatePayment-wrap .modal-content, .newDesign .modal.is-open .modal-dialog.close-modal-detailTemplate-wrap .modal-content, .newDesign .modal.is-open .modal-dialog.modal-deactivatingReminder-template-wrap .modal-content, .newDesign .modal.is-open .modal-dialog.modal-delete-template-wrap .modal-content,
    .postpaid-container .modal.is-open .modal-dialog.close-modal-payment-wrap .modal-content,
    .postpaid-container .modal.is-open .modal-dialog.close-modal-templatePayment-wrap .modal-content,
    .postpaid-container .modal.is-open .modal-dialog.close-modal-detailTemplate-wrap .modal-content,
    .postpaid-container .modal.is-open .modal-dialog.modal-deactivatingReminder-template-wrap .modal-content,
    .postpaid-container .modal.is-open .modal-dialog.modal-delete-template-wrap .modal-content,
    .main-content .modal.is-open .modal-dialog.close-modal-payment-wrap .modal-content,
    .main-content .modal.is-open .modal-dialog.close-modal-templatePayment-wrap .modal-content,
    .main-content .modal.is-open .modal-dialog.close-modal-detailTemplate-wrap .modal-content,
    .main-content .modal.is-open .modal-dialog.modal-deactivatingReminder-template-wrap .modal-content,
    .main-content .modal.is-open .modal-dialog.modal-delete-template-wrap .modal-content {
        width: 100%;
        max-width: 100%;
    }

.newDesign .modal.is-open .modal-dialog.payment-export, .newDesign .modal.is-open .modal-dialog.contractors-export-modal,
.postpaid-container .modal.is-open .modal-dialog.payment-export,
.postpaid-container .modal.is-open .modal-dialog.contractors-export-modal,
.main-content .modal.is-open .modal-dialog.payment-export,
.main-content .modal.is-open .modal-dialog.contractors-export-modal {
    width: 100%;
    max-width: 35rem;
    height: auto;
    padding: 20px;
}

    .newDesign .modal.is-open .modal-dialog.payment-export .modal-content, .newDesign .modal.is-open .modal-dialog.contractors-export-modal .modal-content,
    .postpaid-container .modal.is-open .modal-dialog.payment-export .modal-content,
    .postpaid-container .modal.is-open .modal-dialog.contractors-export-modal .modal-content,
    .main-content .modal.is-open .modal-dialog.payment-export .modal-content,
    .main-content .modal.is-open .modal-dialog.contractors-export-modal .modal-content {
        max-width: 100%;
    }

.newDesign .modal.is-open .modal-dialog.contractors-export-modal,
.postpaid-container .modal.is-open .modal-dialog.contractors-export-modal,
.main-content .modal.is-open .modal-dialog.contractors-export-modal {
    padding: 0;
}

.newDesign .modal.is-open .modal-dialog.payment-delete,
.newDesign .modal.is-open .modal-dialog .modal-detail__resend-payment,
.postpaid-container .modal.is-open .modal-dialog.payment-delete,
.postpaid-container .modal.is-open .modal-dialog .modal-detail__resend-payment,
.main-content .modal.is-open .modal-dialog.payment-delete,
.main-content .modal.is-open .modal-dialog .modal-detail__resend-payment {
    width: 100%;
    max-width: 35.125rem;
    height: auto;
    padding: 0;
}

    .newDesign .modal.is-open .modal-dialog.payment-delete .modal-content,
    .newDesign .modal.is-open .modal-dialog .modal-detail__resend-payment .modal-content,
    .postpaid-container .modal.is-open .modal-dialog.payment-delete .modal-content,
    .postpaid-container .modal.is-open .modal-dialog .modal-detail__resend-payment .modal-content,
    .main-content .modal.is-open .modal-dialog.payment-delete .modal-content,
    .main-content .modal.is-open .modal-dialog .modal-detail__resend-payment .modal-content {
        max-width: 100%;
    }

.newDesign .modal.is-open .modal-dialog.payment-notification, .newDesign .modal.is-open .modal-dialog.payment-print,
.postpaid-container .modal.is-open .modal-dialog.payment-notification,
.postpaid-container .modal.is-open .modal-dialog.payment-print,
.main-content .modal.is-open .modal-dialog.payment-notification,
.main-content .modal.is-open .modal-dialog.payment-print {
    width: 100%;
    max-width: 28.125rem;
    height: auto;
}

    .newDesign .modal.is-open .modal-dialog.payment-notification .modal-content, .newDesign .modal.is-open .modal-dialog.payment-print .modal-content,
    .postpaid-container .modal.is-open .modal-dialog.payment-notification .modal-content,
    .postpaid-container .modal.is-open .modal-dialog.payment-print .modal-content,
    .main-content .modal.is-open .modal-dialog.payment-notification .modal-content,
    .main-content .modal.is-open .modal-dialog.payment-print .modal-content {
        max-width: 100%;
    }

.newDesign .modal.is-open .modal-dialog.payment-print,
.postpaid-container .modal.is-open .modal-dialog.payment-print,
.main-content .modal.is-open .modal-dialog.payment-print {
    padding: 0;
    max-width: 35rem;
}

.newDesign .modal.is-open .modal-dialog.import-confirmatio-wrapper,
.postpaid-container .modal.is-open .modal-dialog.import-confirmatio-wrapper,
.main-content .modal.is-open .modal-dialog.import-confirmatio-wrapper {
    position: relative;
    height: auto;
    max-height: 100%;
    width: 100%;
    max-width: 35rem;
    min-width: 22rem;
    padding: 0;
    transform: translate(-50%, -50%);
}

@media (max-width: 768px) {
    .newDesign .modal.is-open .modal-dialog.import-confirmatio-wrapper,
    .postpaid-container .modal.is-open .modal-dialog.import-confirmatio-wrapper,
    .main-content .modal.is-open .modal-dialog.import-confirmatio-wrapper {
        min-width: 22rem;
        width: 50%;
    }
}

.newDesign .modal.is-open .modal-dialog.import-confirmatio-wrapper .modal-content,
.postpaid-container .modal.is-open .modal-dialog.import-confirmatio-wrapper .modal-content,
.main-content .modal.is-open .modal-dialog.import-confirmatio-wrapper .modal-content {
    height: 100%;
    width: 100%;
    max-width: 100%;
}

@media (max-width: 768px) {
    .newDesign .modal.is-open .modal-dialog.switcher-version, .newDesign .modal.is-open .modal-dialog.close-modal-payment-wrap, .newDesign .modal.is-open .modal-dialog.close-modal-templatePayment-wrap, .newDesign .modal.is-open .modal-dialog.close-modal-detailTemplate-wrap, .newDesign .modal.is-open .modal-dialog.modal-deactivatingReminder-template-wrap, .newDesign .modal.is-open .modal-dialog.modal-delete-template-wrap, .newDesign .modal.is-open .modal-dialog.modal-extracts, .newDesign .modal.is-open .modal-dialog.extract-loading, .newDesign .modal.is-open .modal-dialog.extract-error-modal, .newDesign .modal.is-open .modal-dialog.extract-confirmation-email, .newDesign .modal.is-open .modal-dialog.modal-sender-of-account, .newDesign .modal.is-open .modal-dialog.modal-detailsOf-account, .newDesign .modal.is-open .modal-dialog.modal-generation-qr, .newDesign .modal.is-open .modal-dialog.modal-senderof-account, .newDesign .modal.is-open .modal-dialog.payment-notification, .newDesign .modal.is-open .modal-dialog.payment-print, .newDesign .modal.is-open .modal-dialog.payment-export, .newDesign .modal.is-open .modal-dialog.payment-delete, .newDesign .modal.is-open .modal-dialog.contractors-export-modal,
    .postpaid-container .modal.is-open .modal-dialog.switcher-version,
    .postpaid-container .modal.is-open .modal-dialog.close-modal-payment-wrap,
    .postpaid-container .modal.is-open .modal-dialog.close-modal-templatePayment-wrap,
    .postpaid-container .modal.is-open .modal-dialog.close-modal-detailTemplate-wrap,
    .postpaid-container .modal.is-open .modal-dialog.modal-deactivatingReminder-template-wrap,
    .postpaid-container .modal.is-open .modal-dialog.modal-delete-template-wrap,
    .postpaid-container .modal.is-open .modal-dialog.modal-extracts,
    .postpaid-container .modal.is-open .modal-dialog.extract-loading,
    .postpaid-container .modal.is-open .modal-dialog.extract-error-modal,
    .postpaid-container .modal.is-open .modal-dialog.extract-confirmation-email,
    .postpaid-container .modal.is-open .modal-dialog.modal-sender-of-account,
    .postpaid-container .modal.is-open .modal-dialog.modal-detailsOf-account,
    .postpaid-container .modal.is-open .modal-dialog.modal-generation-qr,
    .postpaid-container .modal.is-open .modal-dialog.modal-senderof-account,
    .postpaid-container .modal.is-open .modal-dialog.payment-notification,
    .postpaid-container .modal.is-open .modal-dialog.payment-print,
    .postpaid-container .modal.is-open .modal-dialog.payment-export,
    .postpaid-container .modal.is-open .modal-dialog.payment-delete,
    .postpaid-container .modal.is-open .modal-dialog.contractors-export-modal,
    .main-content .modal.is-open .modal-dialog.switcher-version,
    .main-content .modal.is-open .modal-dialog.close-modal-payment-wrap,
    .main-content .modal.is-open .modal-dialog.close-modal-templatePayment-wrap,
    .main-content .modal.is-open .modal-dialog.close-modal-detailTemplate-wrap,
    .main-content .modal.is-open .modal-dialog.modal-deactivatingReminder-template-wrap,
    .main-content .modal.is-open .modal-dialog.modal-delete-template-wrap,
    .main-content .modal.is-open .modal-dialog.modal-extracts,
    .main-content .modal.is-open .modal-dialog.extract-loading,
    .main-content .modal.is-open .modal-dialog.extract-error-modal,
    .main-content .modal.is-open .modal-dialog.extract-confirmation-email,
    .main-content .modal.is-open .modal-dialog.modal-sender-of-account,
    .main-content .modal.is-open .modal-dialog.modal-detailsOf-account,
    .main-content .modal.is-open .modal-dialog.modal-generation-qr,
    .main-content .modal.is-open .modal-dialog.modal-senderof-account,
    .main-content .modal.is-open .modal-dialog.payment-notification,
    .main-content .modal.is-open .modal-dialog.payment-print,
    .main-content .modal.is-open .modal-dialog.payment-export,
    .main-content .modal.is-open .modal-dialog.payment-delete,
    .main-content .modal.is-open .modal-dialog.contractors-export-modal {
        min-width: 1rem;
        max-width: 22rem;
        width: 100%;
        top: 50%;
        height: fit-content;
        left: 50%;
        border-radius: 0.75rem;
        transform: translate(-50%, -50%);
    }
}

.newDesign .modal.is-open .modal-dialog.modal-extracts,
.postpaid-container .modal.is-open .modal-dialog.modal-extracts,
.main-content .modal.is-open .modal-dialog.modal-extracts {
    width: 100%;
    max-width: 46.25rem;
    height: 85%;
    padding: 0;
}

@media (max-width: 768px) {
    .newDesign .modal.is-open .modal-dialog.modal-extracts,
    .postpaid-container .modal.is-open .modal-dialog.modal-extracts,
    .main-content .modal.is-open .modal-dialog.modal-extracts {
        max-width: 22rem;
    }
}

.newDesign .modal.is-open .modal-dialog.modal-extracts .modal-content,
.postpaid-container .modal.is-open .modal-dialog.modal-extracts .modal-content,
.main-content .modal.is-open .modal-dialog.modal-extracts .modal-content {
    max-width: 100%;
    height: 100%;
}

.newDesign .modal.is-open .modal-dialog.extract-error-modal, .newDesign .modal.is-open .modal-dialog.extract-loading, .newDesign .modal.is-open .modal-dialog.extract-confirmation-email, .newDesign .modal.is-open .modal-dialog.close-modal-templatePayment-wrap, .newDesign .modal.is-open .modal-dialog.close-modal-detailTemplate-wrap, .newDesign .modal.is-open .modal-dialog.modal-deactivatingReminder-template-wrap, .newDesign .modal.is-open .modal-dialog.modal-delete-template-wrap,
.postpaid-container .modal.is-open .modal-dialog.extract-error-modal,
.postpaid-container .modal.is-open .modal-dialog.extract-loading,
.postpaid-container .modal.is-open .modal-dialog.extract-confirmation-email,
.postpaid-container .modal.is-open .modal-dialog.close-modal-templatePayment-wrap,
.postpaid-container .modal.is-open .modal-dialog.close-modal-detailTemplate-wrap,
.postpaid-container .modal.is-open .modal-dialog.modal-deactivatingReminder-template-wrap,
.postpaid-container .modal.is-open .modal-dialog.modal-delete-template-wrap,
.main-content .modal.is-open .modal-dialog.extract-error-modal,
.main-content .modal.is-open .modal-dialog.extract-loading,
.main-content .modal.is-open .modal-dialog.extract-confirmation-email,
.main-content .modal.is-open .modal-dialog.close-modal-templatePayment-wrap,
.main-content .modal.is-open .modal-dialog.close-modal-detailTemplate-wrap,
.main-content .modal.is-open .modal-dialog.modal-deactivatingReminder-template-wrap,
.main-content .modal.is-open .modal-dialog.modal-delete-template-wrap {
    padding: 0;
}

.newDesign .modal.is-open .modal-dialog.switcher-version,
.postpaid-container .modal.is-open .modal-dialog.switcher-version,
.main-content .modal.is-open .modal-dialog.switcher-version {
    padding: 0;
}

.newDesign .modal.is-open .modal-dialog.modal-detailsOf-account, .newDesign .modal.is-open .modal-dialog.modal-generation-qr,
.postpaid-container .modal.is-open .modal-dialog.modal-detailsOf-account,
.postpaid-container .modal.is-open .modal-dialog.modal-generation-qr,
.main-content .modal.is-open .modal-dialog.modal-detailsOf-account,
.main-content .modal.is-open .modal-dialog.modal-generation-qr {
    padding: 0;
    max-width: 43.063rem;
    width: 100%;
}

    .newDesign .modal.is-open .modal-dialog.modal-detailsOf-account .modal-content, .newDesign .modal.is-open .modal-dialog.modal-generation-qr .modal-content,
    .postpaid-container .modal.is-open .modal-dialog.modal-detailsOf-account .modal-content,
    .postpaid-container .modal.is-open .modal-dialog.modal-generation-qr .modal-content,
    .main-content .modal.is-open .modal-dialog.modal-detailsOf-account .modal-content,
    .main-content .modal.is-open .modal-dialog.modal-generation-qr .modal-content {
        width: 100%;
        max-width: 100%;
    }

@media (max-width: 768px) {
    .newDesign .modal.is-open .modal-dialog.modal-detailsOf-account, .newDesign .modal.is-open .modal-dialog.modal-generation-qr,
    .postpaid-container .modal.is-open .modal-dialog.modal-detailsOf-account,
    .postpaid-container .modal.is-open .modal-dialog.modal-generation-qr,
    .main-content .modal.is-open .modal-dialog.modal-detailsOf-account,
    .main-content .modal.is-open .modal-dialog.modal-generation-qr {
        max-width: 22rem;
    }
}

.newDesign .modal.is-open .modal-dialog.modal-detailsOf-account,
.postpaid-container .modal.is-open .modal-dialog.modal-detailsOf-account,
.main-content .modal.is-open .modal-dialog.modal-detailsOf-account {
    max-height: fit-content;
    height: 95%;
    overflow-y: auto;
}

.newDesign .modal.is-open .modal-dialog.modal-senderof-account,
.postpaid-container .modal.is-open .modal-dialog.modal-senderof-account,
.main-content .modal.is-open .modal-dialog.modal-senderof-account {
    width: 100%;
    max-width: 28.125rem;
    height: auto;
    padding: 0;
}

@media (max-width: 768px) {
    .newDesign .modal.is-open .modal-dialog.modal-senderof-account,
    .postpaid-container .modal.is-open .modal-dialog.modal-senderof-account,
    .main-content .modal.is-open .modal-dialog.modal-senderof-account {
        max-width: 22rem;
        height: fit-content;
    }
}

.newDesign .modal.is-open .modal-dialog.modal-senderof-account .modal-content,
.postpaid-container .modal.is-open .modal-dialog.modal-senderof-account .modal-content,
.main-content .modal.is-open .modal-dialog.modal-senderof-account .modal-content {
    max-width: 100%;
    height: 100%;
}

@media (min-width: 1624px) {
    .newDesign .modal.is-open .modal-dialog.creatTemplatePayment .create-template-payment__sender-settings,
    .postpaid-container .modal.is-open .modal-dialog.creatTemplatePayment .create-template-payment__sender-settings,
    .main-content .modal.is-open .modal-dialog.creatTemplatePayment .create-template-payment__sender-settings {
        gap: 24px;
    }

    .newDesign .modal.is-open .modal-dialog.creatTemplatePayment .create-template-payment__sender-block, .newDesign .modal.is-open .modal-dialog.creatTemplatePayment .create-template-payment__sender-dropdown,
    .postpaid-container .modal.is-open .modal-dialog.creatTemplatePayment .create-template-payment__sender-block,
    .postpaid-container .modal.is-open .modal-dialog.creatTemplatePayment .create-template-payment__sender-dropdown,
    .main-content .modal.is-open .modal-dialog.creatTemplatePayment .create-template-payment__sender-block,
    .main-content .modal.is-open .modal-dialog.creatTemplatePayment .create-template-payment__sender-dropdown {
        width: 100%;
    }

    .newDesign .modal.is-open .modal-dialog.creatTemplatePayment .create-template-payment__sender-dropdown,
    .newDesign .modal.is-open .modal-dialog.creatTemplatePayment .create-template-payment .sender-dropdown-container, .newDesign .modal.is-open .modal-dialog.creatTemplatePayment .create-template-payment__DropdownBlock,
    .postpaid-container .modal.is-open .modal-dialog.creatTemplatePayment .create-template-payment__sender-dropdown,
    .postpaid-container .modal.is-open .modal-dialog.creatTemplatePayment .create-template-payment .sender-dropdown-container,
    .postpaid-container .modal.is-open .modal-dialog.creatTemplatePayment .create-template-payment__DropdownBlock,
    .main-content .modal.is-open .modal-dialog.creatTemplatePayment .create-template-payment__sender-dropdown,
    .main-content .modal.is-open .modal-dialog.creatTemplatePayment .create-template-payment .sender-dropdown-container,
    .main-content .modal.is-open .modal-dialog.creatTemplatePayment .create-template-payment__DropdownBlock {
        width: 100%;
    }

    .newDesign .modal.is-open .modal-dialog.creatTemplatePayment .create-template-payment__template-nane,
    .postpaid-container .modal.is-open .modal-dialog.creatTemplatePayment .create-template-payment__template-nane,
    .main-content .modal.is-open .modal-dialog.creatTemplatePayment .create-template-payment__template-nane {
        width: calc(50% - 16px);
    }
}

@media (min-width: 1624px) {
    .newDesign .modal.is-open .modal-dialog.importPayment .import-payment__options,
    .postpaid-container .modal.is-open .modal-dialog.importPayment .import-payment__options,
    .main-content .modal.is-open .modal-dialog.importPayment .import-payment__options {
        gap: 24px;
    }

    .newDesign .modal.is-open .modal-dialog.importPayment .import-payment__format, .newDesign .modal.is-open .modal-dialog.importPayment .import-payment__template,
    .postpaid-container .modal.is-open .modal-dialog.importPayment .import-payment__format,
    .postpaid-container .modal.is-open .modal-dialog.importPayment .import-payment__template,
    .main-content .modal.is-open .modal-dialog.importPayment .import-payment__format,
    .main-content .modal.is-open .modal-dialog.importPayment .import-payment__template {
        width: 50%;
    }

    .newDesign .modal.is-open .modal-dialog.importPayment .import-form__file-name-container, .newDesign .modal.is-open .modal-dialog.importPayment .import-form__file-upload,
    .postpaid-container .modal.is-open .modal-dialog.importPayment .import-form__file-name-container,
    .postpaid-container .modal.is-open .modal-dialog.importPayment .import-form__file-upload,
    .main-content .modal.is-open .modal-dialog.importPayment .import-form__file-name-container,
    .main-content .modal.is-open .modal-dialog.importPayment .import-form__file-upload {
        width: 50%;
    }

    .newDesign .modal.is-open .modal-dialog.importPayment .import-form__file-name-input,
    .postpaid-container .modal.is-open .modal-dialog.importPayment .import-form__file-name-input,
    .main-content .modal.is-open .modal-dialog.importPayment .import-form__file-name-input {
        width: calc(100% - 8px);
    }
}

@media (max-width: 991px) {
    .newDesign .modal.is-open .modal-dialog.creatTemplatePayment .create-template-payment__sender-dropdown, .newDesign .modal.is-open .modal-dialog.creatTemplatePayment .create-template-payment__radio-tabs,
    .postpaid-container .modal.is-open .modal-dialog.creatTemplatePayment .create-template-payment__sender-dropdown,
    .postpaid-container .modal.is-open .modal-dialog.creatTemplatePayment .create-template-payment__radio-tabs,
    .main-content .modal.is-open .modal-dialog.creatTemplatePayment .create-template-payment__sender-dropdown,
    .main-content .modal.is-open .modal-dialog.creatTemplatePayment .create-template-payment__radio-tabs {
        padding: 0;
    }
}

@media (max-width: 768px) {
    .newDesign .modal.is-open .modal-dialog.creatTemplatePayment .create-template-payment__sender-settings,
    .postpaid-container .modal.is-open .modal-dialog.creatTemplatePayment .create-template-payment__sender-settings,
    .main-content .modal.is-open .modal-dialog.creatTemplatePayment .create-template-payment__sender-settings {
        flex-direction: column;
    }
}

.newDesign .modal .modal-dialog,
.postpaid-container .modal .modal-dialog,
.main-content .modal .modal-dialog {
    position: absolute;
    top: 0;
    left: 50%;
    background: #fff;
    width: auto;
    min-width: 400px;
    padding: 1rem 1rem 1.75rem;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
    border-radius: 12px;
    pointer-events: auto;
    transform: translate(-50%, -250%);
    transition: all 0.32s ease-out;
    z-index: 1073;
}

    .newDesign .modal .modal-dialog *,
    .newDesign .modal .modal-dialog :after,
    .newDesign .modal .modal-dialog :before,
    .postpaid-container .modal .modal-dialog *,
    .postpaid-container .modal .modal-dialog :after,
    .postpaid-container .modal .modal-dialog :before,
    .main-content .modal .modal-dialog *,
    .main-content .modal .modal-dialog :after,
    .main-content .modal .modal-dialog :before {
        box-sizing: border-box;
    }

@media (max-width: 576px) {
    .newDesign .modal .modal-dialog,
    .postpaid-container .modal .modal-dialog,
    .main-content .modal .modal-dialog {
        min-width: 359px;
        top: auto;
        left: 0;
        bottom: 0;
        border-radius: 0.75rem 0.75rem 0 0;
        transform: translate(0, 250%);
    }
}

.newDesign .modal .modal-dialog.createPayment, .newDesign .modal .modal-dialog.importPayment, .newDesign .modal .modal-dialog.creatTemplatePayment,
.postpaid-container .modal .modal-dialog.createPayment,
.postpaid-container .modal .modal-dialog.importPayment,
.postpaid-container .modal .modal-dialog.creatTemplatePayment,
.main-content .modal .modal-dialog.createPayment,
.main-content .modal .modal-dialog.importPayment,
.main-content .modal .modal-dialog.creatTemplatePayment {
    position: relative;
    height: 100%;
    max-height: 100%;
    width: 100%;
    padding: 0;
    border-radius: 0;
    transform: translate(200%, 0);
}

@media (max-width: 768px) {
    .newDesign .modal .modal-dialog.switcher-version, .newDesign .modal .modal-dialog.close-modal-payment-wrap,
    .postpaid-container .modal .modal-dialog.switcher-version,
    .postpaid-container .modal .modal-dialog.close-modal-payment-wrap,
    .main-content .modal .modal-dialog.switcher-version,
    .main-content .modal .modal-dialog.close-modal-payment-wrap {
        top: 0;
        left: 50%;
        transform: translate(-50%, -100%);
    }
}

.newDesign .modal-backdrop,
.postpaid-container .modal-backdrop,
.main-content .modal-backdrop {
    visibility: hidden;
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 0;
    background: rgba(32, 36, 39, 0.5);
    opacity: 0;
    transition: opacity 0.55s ease-out;
    z-index: 1071;
}

    .newDesign .modal-backdrop.show,
    .postpaid-container .modal-backdrop.show,
    .main-content .modal-backdrop.show {
        height: 100vh;
        visibility: visible;
        opacity: 1;
        transition: opacity 0.52s ease-out;
    }

.newDesign .modal-content,
.postpaid-container .modal-content,
.main-content .modal-content {
    max-width: 418px;
    width: 100%;
    margin: auto;
}

.newDesign .modal-image,
.postpaid-container .modal-image,
.main-content .modal-image {
    display: flex;
    flex: 1 1 100%;
    max-width: 100%;
    height: 15rem;
    background-color: #EDEFF1;
    border-radius: 12px;
    overflow: hidden;
}

.newDesign .modal-image__recovery, .newDesign .modal-image__notification,
.postpaid-container .modal-image__recovery,
.postpaid-container .modal-image__notification,
.main-content .modal-image__recovery,
.main-content .modal-image__notification {
    height: 100%;
    width: 100%;
    background: url("../img/newDesign/notification-banner.png") no-repeat center;
}

.debugUrl .newDesign .modal-image__recovery, .debugUrl .newDesign .modal-image__notification,
.debugUrl .postpaid-container .modal-image__recovery,
.debugUrl .postpaid-container .modal-image__notification,
.debugUrl .main-content .modal-image__recovery,
.debugUrl .main-content .modal-image__notification {
    background: url("/Content/themes/novapay/img/newDesign/notification-banner.png") no-repeat center;
}

.newDesign .modal-text,
.postpaid-container .modal-text,
.main-content .modal-text {
    margin: 0;
    padding-top: 2rem;
    padding-bottom: 1.75rem;
    text-align: center;
}

.newDesign .modal-title,
.postpaid-container .modal-title,
.main-content .modal-title {
    font-size: 1.25rem;
    font-weight: 600;
    line-height: 1.2;
}

.newDesign .modal-description,
.postpaid-container .modal-description,
.main-content .modal-description {
    padding-top: 0.75rem;
    font-size: 14px;
    line-height: 1.2;
}

.newDesign .btn-send-again,
.postpaid-container .btn-send-again,
.main-content .btn-send-again {
    margin-top: 1.5rem;
    padding: 0;
    font-size: 14px;
    font-weight: 500;
    border-color: transparent;
    border: none;
    background-color: inherit !important;
}

.app-notifications-toast {
    max-height: 86%;
    padding-top: 0.625rem;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    right: 1.5rem;
    gap: 0.5rem;
    top: 5rem;
    position: fixed;
    max-width: 28.125rem;
    width: 100%;
    z-index: 10007;
    opacity: 1;
}

    .app-notifications-toast .vue-show-notification {
        box-sizing: border-box;
        position: relative;
        padding: 16px 16px 16px 22px;
        width: 100%;
        border-radius: 4px;
    }

        .app-notifications-toast .vue-show-notification.p-toast-message-enter-from, .app-notifications-toast .vue-show-notification.p-toast-message-leave-to {
            opacity: 0;
            transform: translateY(-10px);
        }

    .app-notifications-toast .vue-show-notification__container {
        width: 100%;
        display: flex;
        gap: 8px;
    }

    .app-notifications-toast .vue-show-notification__legacy-link {
        font-weight: 500;
        cursor: pointer;
    }

    .app-notifications-toast .vue-show-notification__content {
        width: 100%;
    }

    .app-notifications-toast .vue-show-notification:before {
        position: absolute;
        content: "";
        top: 0;
        height: 100%;
        left: 0;
        border-radius: 4px 0px 0px 4px;
        width: 6px;
    }

    .app-notifications-toast .vue-show-notification__title {
        font-family: "Fixel Text", "Fixel Display", "Helvetica", "Arial", sans-serif;
        font-size: 16px;
        font-style: normal;
        font-weight: 500;
        line-height: 20px;
    }

    .app-notifications-toast .vue-show-notification__wrap {
        position: relative;
        display: flex;
        justify-content: space-between;
        align-items: self-start;
        gap: 7px;
    }

    .app-notifications-toast .vue-show-notification__description {
        margin-top: 8px;
        font-family: "Fixel Text", "Fixel Display", "Helvetica", "Arial", sans-serif;
        font-size: 16px;
        font-style: normal;
        font-weight: 400;
        color: #32383c;
        line-height: 20px;
    }

    .app-notifications-toast .vue-show-notification__description-t {
        margin-top: 0;
    }

    .app-notifications-toast .vue-show-notification__close {
        position: relative;
        cursor: pointer;
        min-width: 20px;
        min-height: 20px;
        max-width: 20px;
        max-height: 20px;
    }

        .app-notifications-toast .vue-show-notification__close:hover {
            opacity: 0.7;
        }

        .app-notifications-toast .vue-show-notification__close:before, .app-notifications-toast .vue-show-notification__close:after {
            position: absolute;
            content: " ";
            height: 20px;
            width: 2px;
            top: 0;
            right: 8px;
        }

        .app-notifications-toast .vue-show-notification__close:before {
            transform: rotate(45deg);
        }

        .app-notifications-toast .vue-show-notification__close:after {
            transform: rotate(-45deg);
        }

    .app-notifications-toast .vue-show-notification__link {
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        width: 85%;
        margin-left: 26px;
        color: #690DD3;
        font-family: "Fixel Text", "Fixel Display", "Helvetica", "Arial", sans-serif;
        font-size: 16px;
        font-style: normal;
        font-weight: 600;
        line-height: 20px;
        text-decoration-line: underline;
        text-decoration-skip-ink: none;
        text-underline-position: from-font;
    }

    .app-notifications-toast .vue-show-notification__icon {
        height: 18px;
        width: 20px;
    }

    .app-notifications-toast .vue-show-notification__success {
        background: #E1F8F2;
        border: 1px solid #7ECABB;
    }

        .app-notifications-toast .vue-show-notification__success:before {
            background: #22967F;
        }

    .app-notifications-toast .vue-show-notification__success-title {
        color: #0A7B65;
    }

    .app-notifications-toast .vue-show-notification__success-close:before, .app-notifications-toast .vue-show-notification__success-close:after {
        background-color: #0A7B65;
    }

    .app-notifications-toast .vue-show-notification__success-icon {
        background: url("../img/newDesign/icon/circle.check.svg") no-repeat;
    }

.debugUrl .app-notifications-toast .vue-show-notification__success-icon {
    background: url("/Content/themes/novapay/img/newDesign/icon/circle.check.svg") no-repeat;
}

.app-notifications-toast .vue-show-notification__error {
    border: 1px solid #F1AEAB;
    background: #FFEBEA;
}

    .app-notifications-toast .vue-show-notification__error:before {
        background: #EB4235;
    }

.app-notifications-toast .vue-show-notification__error-title {
    color: #C6261A;
}

.app-notifications-toast .vue-show-notification__error-close:before, .app-notifications-toast .vue-show-notification__error-close:after {
    background-color: #C6261A;
}

.app-notifications-toast .vue-show-notification__error-icon {
    background: url("../img/newDesign/icon/triangle.exclamation.svg");
}

    .app-notifications-toast .vue-show-notification__error-icon.debugUrl {
        background: url("/Content/themes/novapay/img/newDesign/icon/triangle.exclamation.svg");
    }

.app-notifications-toast .vue-show-notification__warning {
    border: 1px solid #FFE098;
    background: #FFF1DB;
}

    .app-notifications-toast .vue-show-notification__warning:before {
        background: #EB9D35;
    }

.app-notifications-toast .vue-show-notification__warning-title {
    color: #7F560F;
}

.app-notifications-toast .vue-show-notification__warning-close:before, .app-notifications-toast .vue-show-notification__warning-close:after {
    background-color: #767F8A;
}

.app-notifications-toast .vue-show-notification__warning-icon {
    background: url("../img/newDesign/icon/circle.clock.svg") no-repeat;
}

.debugUrl .app-notifications-toast .vue-show-notification__warning-icon {
    background: url("/Content/themes/novapay/img/newDesign/icon/circle.clock.svg") no-repeat;
}

@media (max-width: 480px) {
    .app-notifications-toast {
        max-width: 85%;
        right: 3.5%;
        top: 88px;
    }

        .app-notifications-toast .vue-show-notification {
            padding: 12px 12px 12px 18px;
        }

        .app-notifications-toast .vue-show-notification__title {
            font-size: 14px;
        }

        .app-notifications-toast .vue-show-notification__description {
            font-size: 12px;
            margin-top: 4px;
        }

        .app-notifications-toast .vue-show-notification__description-t {
            margin-top: 0;
        }

        .app-notifications-toast .vue-show-notification__link {
            font-size: 12px;
            width: 80%;
        }
}

#notifications-container {
    max-height: 86%;
    padding-top: 0.625rem;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    right: 1.5rem;
    gap: 0.5rem;
    top: 5rem;
    position: fixed;
    max-width: 28.125rem;
    width: 100%;
    z-index: 10007;
    opacity: 1;
}

    #notifications-container .show-notification {
        box-sizing: border-box;
        position: relative;
        padding: 16px 16px 16px 22px;
        width: 100%;
        border-radius: 4px;
        transform: translateY(-10px) !important;
        animation: fadeIn 0.5s forwards;
    }

    #notifications-container .show-notification__container {
        width: 100%;
        display: flex;
        gap: 8px;
    }

    #notifications-container .show-notification__legacy-link {
        font-weight: 500;
        cursor: pointer;
    }

    #notifications-container .show-notification__content {
        width: 100%;
    }

    #notifications-container .show-notification .show-notification.fade-out {
        animation: fadeOut 0.5s forwards;
    }

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeOut {
    from {
        opacity: 1;
        transform: translateY(0);
    }

    to {
        opacity: 0;
        transform: translateY(-10px);
    }
}

#notifications-container .show-notification:before {
    position: absolute;
    content: "";
    top: 0;
    height: 100%;
    left: 0;
    border-radius: 4px 0px 0px 4px;
    width: 6px;
}

#notifications-container .show-notification__title {
    font-family: "Fixel Text", "Fixel Display", "Helvetica", "Arial", sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: 20px;
}

#notifications-container .show-notification__wrap {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: self-start;
    gap: 7px;
}

#notifications-container .show-notification__description {
    margin-top: 8px;
    font-family: "Fixel Text", "Fixel Display", "Helvetica", "Arial", sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    color: #32383c;
    line-height: 20px;
}

#notifications-container .show-notification__description-t {
    margin-top: 0;
}

#notifications-container .show-notification__close {
    position: relative;
    cursor: pointer;
    min-width: 20px;
    min-height: 20px;
    max-width: 20px;
    max-height: 20px;
}

    #notifications-container .show-notification__close:hover {
        opacity: 0.7;
    }

    #notifications-container .show-notification__close:before, #notifications-container .show-notification__close:after {
        position: absolute;
        content: " ";
        height: 20px;
        width: 2px;
        top: 0;
        right: 8px;
    }

    #notifications-container .show-notification__close:before {
        transform: rotate(45deg);
    }

    #notifications-container .show-notification__close:after {
        transform: rotate(-45deg);
    }

#notifications-container .show-notification__link {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 85%;
    margin-left: 26px;
    color: #690DD3;
    font-family: "Fixel Text", "Fixel Display", "Helvetica", "Arial", sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: 20px;
    text-decoration-line: underline;
    text-decoration-skip-ink: none;
    text-underline-position: from-font;
}

#notifications-container .show-notification__icon {
    height: 18px;
    width: 20px;
}

#notifications-container .show-notification__success {
    background: #E1F8F2;
    border: 1px solid #7ECABB;
}

    #notifications-container .show-notification__success:before {
        background: #22967F;
    }

#notifications-container .show-notification__success-title {
    color: #0A7B65;
}

#notifications-container .show-notification__success-close:before, #notifications-container .show-notification__success-close:after {
    background-color: #0A7B65;
}

#notifications-container .show-notification__success-icon {
    background: url("../img/newDesign/icon/circle.check.svg") no-repeat;
}

.debugUrl #notifications-container .show-notification__success-icon {
    background: url("/Content/themes/novapay/img/newDesign/icon/circle.check.svg") no-repeat;
}

#notifications-container .show-notification__error {
    border: 1px solid #F1AEAB;
    background: #FFEBEA;
}

    #notifications-container .show-notification__error:before {
        background: #EB4235;
    }

#notifications-container .show-notification__error-title {
    color: #C6261A;
}

#notifications-container .show-notification__error-close:before, #notifications-container .show-notification__error-close:after {
    background-color: #C6261A;
}

#notifications-container .show-notification__error-icon {
    background: url("../img/newDesign/icon/triangle.exclamation.svg");
}

    #notifications-container .show-notification__error-icon.debugUrl {
        background: url("/Content/themes/novapay/img/newDesign/icon/triangle.exclamation.svg");
    }

#notifications-container .show-notification__warning {
    border: 1px solid #FFE098;
    background: #FFF1DB;
}

    #notifications-container .show-notification__warning:before {
        background: #EB9D35;
    }

#notifications-container .show-notification__warning-title {
    color: #7F560F;
}

#notifications-container .show-notification__warning-close:before, #notifications-container .show-notification__warning-close:after {
    background-color: #767F8A;
}

#notifications-container .show-notification__warning-icon {
    background: url("../img/newDesign/icon/circle.clock.svg") no-repeat;
}

.debugUrl #notifications-container .show-notification__warning-icon {
    background: url("/Content/themes/novapay/img/newDesign/icon/circle.clock.svg") no-repeat;
}

@media (max-width: 480px) {
    #notifications-container {
        max-width: 85%;
        right: 3.5%;
        top: 88px;
    }

        #notifications-container .show-notification {
            padding: 12px 12px 12px 18px;
        }

        #notifications-container .show-notification__title {
            font-size: 14px;
        }

        #notifications-container .show-notification__description {
            font-size: 12px;
            margin-top: 4px;
        }

        #notifications-container .show-notification__description-t {
            margin-top: 0;
        }

        #notifications-container .show-notification__link {
            font-size: 12px;
            width: 80%;
        }
}

.p-toast {
    position: fixed !important;
    top: 5rem !important;
    right: 1.5rem !important;
    max-width: 28.125rem !important;
    width: 100% !important;
    z-index: 10007 !important;
    opacity: 1 !important;
}

    .p-toast .p-toast-message {
        border: none;
        margin: 0;
        padding: 16px 16px 16px 22px;
    }

        .p-toast .p-toast-message:has(.show-notification) {
            padding: 0;
            margin-bottom: 10px;
        }

        .p-toast .p-toast-message:before {
            position: absolute;
            content: "";
            top: 0;
            height: 100%;
            left: 0;
            border-radius: 0.25rem 0 0 0.25rem;
            width: 0.375rem;
        }

        .p-toast .p-toast-message .p-toast-message-content {
            padding: 0 !important;
            display: flex !important;
            gap: 0.5rem !important;
            align-items: flex-start !important;
        }

            .p-toast .p-toast-message .p-toast-message-content .p-toast-message-icon {
                position: relative;
                width: 1.25rem !important;
                height: 1.125rem !important;
                margin: 0 !important;
                flex-shrink: 0;
                color: transparent;
            }

            .p-toast .p-toast-message .p-toast-message-content .p-toast-message-text {
                flex: 1;
            }

                .p-toast .p-toast-message .p-toast-message-content .p-toast-message-text .p-toast-summary {
                    display: none;
                    font-size: 16px;
                    font-weight: 500;
                    line-height: 1.25rem;
                    margin: 0 0 0.5rem 0 !important;
                }

                .p-toast .p-toast-message .p-toast-message-content .p-toast-message-text .p-toast-detail {
                    font-size: 16px;
                    color: #32383c;
                    line-height: 1.25rem;
                    margin: 0 !important;
                }

            .p-toast .p-toast-message .p-toast-message-content .p-toast-close-button {
                position: relative !important;
                right: 0;
                cursor: pointer !important;
                min-width: 1.25rem !important;
                min-height: 1.25rem !important;
                max-width: 1.25rem !important;
                max-height: 1.25rem !important;
                background: transparent !important;
                border: none !important;
                padding: 0 !important;
                margin: 0 !important;
            }

                .p-toast .p-toast-message .p-toast-message-content .p-toast-close-button:hover {
                    opacity: 0.7;
                }

                .p-toast .p-toast-message .p-toast-message-content .p-toast-close-button:before, .p-toast .p-toast-message .p-toast-message-content .p-toast-close-button:after {
                    position: absolute;
                    content: " ";
                    height: 1.25rem;
                    width: 2px;
                    top: 0;
                    left: 0.45rem;
                }

                .p-toast .p-toast-message .p-toast-message-content .p-toast-close-button:before {
                    transform: rotate(45deg);
                }

                .p-toast .p-toast-message .p-toast-message-content .p-toast-close-button:after {
                    transform: rotate(-45deg);
                }

                .p-toast .p-toast-message .p-toast-message-content .p-toast-close-button .p-toast-close-icon {
                    display: none;
                }

    .p-toast .p-toast-message-success {
        background: #E1F8F2 !important;
        border: 1px solid #7ECABB !important;
    }

        .p-toast .p-toast-message-success:before {
            background: #22967F !important;
        }

        .p-toast .p-toast-message-success .p-toast-summary {
            color: #0A7B65 !important;
        }

        .p-toast .p-toast-message-success .p-toast-message-icon {
            background: url("../img/newDesign/icon/circle.check.svg") no-repeat !important;
            background-size: contain !important;
        }

.debugUrl .p-toast .p-toast-message-success .p-toast-message-icon {
    background: url("/Content/themes/novapay/img/newDesign/icon/circle.check.svg") no-repeat !important;
}

.p-toast .p-toast-message-success .p-toast-close-button:before, .p-toast .p-toast-message-success .p-toast-close-button:after {
    background-color: #0A7B65;
}

.p-toast .p-toast-message-error {
    border: 1px solid #F1AEAB !important;
    background: #FFEBEA !important;
}

    .p-toast .p-toast-message-error:before {
        background: #EB4235 !important;
    }

    .p-toast .p-toast-message-error .p-toast-summary {
        color: #C6261A !important;
    }

    .p-toast .p-toast-message-error .p-toast-message-icon {
        background: url("../img/newDesign/icon/triangle.exclamation.svg") !important;
        background-size: contain !important;
    }

.debugUrl .p-toast .p-toast-message-error .p-toast-message-icon {
    background: url("/Content/themes/novapay/img/newDesign/icon/triangle.exclamation.svg") !important;
}

.p-toast .p-toast-message-error .p-toast-close-button:before, .p-toast .p-toast-message-error .p-toast-close-button:after {
    background-color: #C6261A;
}

.p-toast .p-toast-message-warn {
    border: 1px solid #FFE098 !important;
    background: #FFF1DB !important;
}

    .p-toast .p-toast-message-warn:before {
        background: #EB9D35 !important;
    }

    .p-toast .p-toast-message-warn .p-toast-summary {
        color: #7F560F !important;
    }

    .p-toast .p-toast-message-warn .p-toast-message-icon {
        background: url("../img/newDesign/icon/circle.clock.svg") no-repeat !important;
        background-size: contain !important;
    }

.debugUrl .p-toast .p-toast-message-warn .p-toast-message-icon {
    background: url("/Content/themes/novapay/img/newDesign/icon/circle.clock.svg") no-repeat !important;
}

.p-toast .p-toast-message-warn .p-toast-close-button:before, .p-toast .p-toast-message-warn .p-toast-close-button:after {
    background-color: #767F8A;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeOut {
    from {
        opacity: 1;
        transform: translateY(0);
    }

    to {
        opacity: 0;
        transform: translateY(-10px);
    }
}

@media (max-width: 768px) {
    .p-toast {
        right: 1rem !important;
        left: 1rem !important;
        max-width: calc(100% - 2rem) !important;
    }
}

@media (max-width: 576px) {
    .postpaid-container .modal.is-open .modal-dialog {
        top: 50%;
        width: auto;
        bottom: unset;
        left: 50%;
        border-radius: 12px 12px;
        transform: translate(-50%, -50%);
    }
}

.postpaid-container .modal .modal-dialog {
    padding: 0;
    min-width: fit-content;
    width: min-content;
}

@media (max-width: 576px) {
    .postpaid-container .modal .modal-dialog {
        width: auto;
        top: auto;
        left: 50%;
        bottom: unset;
        border-radius: 12px 12px;
        transform: translate(-50%, -1464%);
    }
}

.postpaid-container .modal .modal-content {
    max-width: 35rem;
    min-width: 21.875rem;
}

.modal-switch-version {
    display: flex;
    flex-direction: column;
}

.modal-switch__header {
    display: flex;
    justify-content: space-between;
    padding: 1.25rem 0.875rem 1.25rem 1.25rem;
}

    .modal-switch__header .switch-versiong__title {
        font-weight: 500;
        font-size: 1.25rem;
        color: #32383c;
    }

@media (max-width: 768px) {
    .modal-switch__header {
        padding: 1rem 0.75rem 1rem 1rem;
    }
}

.modal-switch__content {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 0 1.25rem 1.25rem 1.25rem;
    border-bottom: 1px solid #DBDFE4;
}

    .modal-switch__content .switch-version__message {
        font-size: 15px;
        font-weight: 400;
    }

        .modal-switch__content .switch-version__message.strong {
            font-weight: 500;
        }

@media (max-width: 768px) {
    .modal-switch__content {
        padding: 0 1rem 1.25rem 1rem;
    }
}

.modal-switch__footer {
    display: flex;
    justify-content: flex-end;
    gap: 1rem;
    padding: 1.25rem;
}

@media (max-width: 768px) {
    .modal-switch__footer {
        justify-content: space-between;
        padding: 0.75rem 1rem;
    }
}

.modal-switch__footer .switch-version__old {
    padding: 0.5rem 0.75rem;
    border: 1px solid #EB4235;
    background-color: #FFEEE2;
    color: #EB4235;
    font-weight: 500;
}

.modal-switch__footer .switch-version__stay {
    padding: 0.5rem 0.75rem;
    font-weight: 500;
}

    .modal-switch__footer .switch-version__stay:hover {
        background: #F5EDFF;
        color: #690DD3;
    }

.close-modal-payment .close-payment__header,
.close-modal-payment .close-templatePayment__header,
.close-modal-payment .close-detail-template__header,
.close-modal-payment .modal-deactivating__header,
.close-modal-payment .modal-delete-regular__header,
.close-modal-templatePayment .close-payment__header,
.close-modal-templatePayment .close-templatePayment__header,
.close-modal-templatePayment .close-detail-template__header,
.close-modal-templatePayment .modal-deactivating__header,
.close-modal-templatePayment .modal-delete-regular__header,
.close-modal-detailTemplate .close-payment__header,
.close-modal-detailTemplate .close-templatePayment__header,
.close-modal-detailTemplate .close-detail-template__header,
.close-modal-detailTemplate .modal-deactivating__header,
.close-modal-detailTemplate .modal-delete-regular__header,
.modal-deactivating-template .close-payment__header,
.modal-deactivating-template .close-templatePayment__header,
.modal-deactivating-template .close-detail-template__header,
.modal-deactivating-template .modal-deactivating__header,
.modal-deactivating-template .modal-delete-regular__header,
.modal-delete-regular-template .close-payment__header,
.modal-delete-regular-template .close-templatePayment__header,
.modal-delete-regular-template .close-detail-template__header,
.modal-delete-regular-template .modal-deactivating__header,
.modal-delete-regular-template .modal-delete-regular__header {
    display: flex;
    justify-content: space-between;
    color: #32383c;
    font-size: 1.25rem;
    font-weight: 500;
}

.close-modal-payment .close-payment__close,
.close-modal-payment .close-templatePayment__close,
.close-modal-payment .close-detail-template__close,
.close-modal-payment .modal-deactivating__close,
.close-modal-payment .modal-delete-regular__close,
.close-modal-templatePayment .close-payment__close,
.close-modal-templatePayment .close-templatePayment__close,
.close-modal-templatePayment .close-detail-template__close,
.close-modal-templatePayment .modal-deactivating__close,
.close-modal-templatePayment .modal-delete-regular__close,
.close-modal-detailTemplate .close-payment__close,
.close-modal-detailTemplate .close-templatePayment__close,
.close-modal-detailTemplate .close-detail-template__close,
.close-modal-detailTemplate .modal-deactivating__close,
.close-modal-detailTemplate .modal-delete-regular__close,
.modal-deactivating-template .close-payment__close,
.modal-deactivating-template .close-templatePayment__close,
.modal-deactivating-template .close-detail-template__close,
.modal-deactivating-template .modal-deactivating__close,
.modal-deactivating-template .modal-delete-regular__close,
.modal-delete-regular-template .close-payment__close,
.modal-delete-regular-template .close-templatePayment__close,
.modal-delete-regular-template .close-detail-template__close,
.modal-delete-regular-template .modal-deactivating__close,
.modal-delete-regular-template .modal-delete-regular__close {
    margin-right: -6px;
}

.close-modal-payment .close-payment__message,
.close-modal-payment .close-templatePayment__message,
.close-modal-payment .close-detail-template__message,
.close-modal-payment .modal-deactivating__message,
.close-modal-payment .modal-delete-regular__message,
.close-modal-templatePayment .close-payment__message,
.close-modal-templatePayment .close-templatePayment__message,
.close-modal-templatePayment .close-detail-template__message,
.close-modal-templatePayment .modal-deactivating__message,
.close-modal-templatePayment .modal-delete-regular__message,
.close-modal-detailTemplate .close-payment__message,
.close-modal-detailTemplate .close-templatePayment__message,
.close-modal-detailTemplate .close-detail-template__message,
.close-modal-detailTemplate .modal-deactivating__message,
.close-modal-detailTemplate .modal-delete-regular__message,
.modal-deactivating-template .close-payment__message,
.modal-deactivating-template .close-templatePayment__message,
.modal-deactivating-template .close-detail-template__message,
.modal-deactivating-template .modal-deactivating__message,
.modal-deactivating-template .modal-delete-regular__message,
.modal-delete-regular-template .close-payment__message,
.modal-delete-regular-template .close-templatePayment__message,
.modal-delete-regular-template .close-detail-template__message,
.modal-delete-regular-template .modal-deactivating__message,
.modal-delete-regular-template .modal-delete-regular__message {
    padding: 1.25rem 0;
    color: #32383c;
    font-size: 15px;
    font-weight: normal;
    line-height: 1.5rem;
    border-bottom: 1px solid #DBDFE4;
}

.close-modal-payment .close-payment__action,
.close-modal-payment .close-templatePayment__action,
.close-modal-payment .close-detail-template__action,
.close-modal-payment .modal-deactivating__action,
.close-modal-payment .modal-delete-regular__action,
.close-modal-templatePayment .close-payment__action,
.close-modal-templatePayment .close-templatePayment__action,
.close-modal-templatePayment .close-detail-template__action,
.close-modal-templatePayment .modal-deactivating__action,
.close-modal-templatePayment .modal-delete-regular__action,
.close-modal-detailTemplate .close-payment__action,
.close-modal-detailTemplate .close-templatePayment__action,
.close-modal-detailTemplate .close-detail-template__action,
.close-modal-detailTemplate .modal-deactivating__action,
.close-modal-detailTemplate .modal-delete-regular__action,
.modal-deactivating-template .close-payment__action,
.modal-deactivating-template .close-templatePayment__action,
.modal-deactivating-template .close-detail-template__action,
.modal-deactivating-template .modal-deactivating__action,
.modal-deactivating-template .modal-delete-regular__action,
.modal-delete-regular-template .close-payment__action,
.modal-delete-regular-template .close-templatePayment__action,
.modal-delete-regular-template .close-detail-template__action,
.modal-delete-regular-template .modal-deactivating__action,
.modal-delete-regular-template .modal-delete-regular__action {
    display: flex;
    gap: 1rem;
    justify-content: flex-end;
    margin-top: 1.25rem;
}

.close-modal-payment .close-payment__action-delete,
.close-modal-payment .close-templatePayment__action-delete,
.close-modal-payment .close-detail-template__action-delete,
.close-modal-payment .modal-deactivating__action-delete,
.close-modal-payment .modal-delete-regular__action-delete,
.close-modal-templatePayment .close-payment__action-delete,
.close-modal-templatePayment .close-templatePayment__action-delete,
.close-modal-templatePayment .close-detail-template__action-delete,
.close-modal-templatePayment .modal-deactivating__action-delete,
.close-modal-templatePayment .modal-delete-regular__action-delete,
.close-modal-detailTemplate .close-payment__action-delete,
.close-modal-detailTemplate .close-templatePayment__action-delete,
.close-modal-detailTemplate .close-detail-template__action-delete,
.close-modal-detailTemplate .modal-deactivating__action-delete,
.close-modal-detailTemplate .modal-delete-regular__action-delete,
.modal-deactivating-template .close-payment__action-delete,
.modal-deactivating-template .close-templatePayment__action-delete,
.modal-deactivating-template .close-detail-template__action-delete,
.modal-deactivating-template .modal-deactivating__action-delete,
.modal-deactivating-template .modal-delete-regular__action-delete,
.modal-delete-regular-template .close-payment__action-delete,
.modal-delete-regular-template .close-templatePayment__action-delete,
.modal-delete-regular-template .close-detail-template__action-delete,
.modal-delete-regular-template .modal-deactivating__action-delete,
.modal-delete-regular-template .modal-delete-regular__action-delete {
    padding: 0.5rem 0.75rem;
    border: 1px solid #EB4235;
    background-color: #FFEEE2;
    color: #EB4235;
    font-weight: 500;
}

.close-modal-payment .close-payment__action-save,
.close-modal-payment .close-templatePayment__action-save,
.close-modal-payment .close-detail-template__action-save,
.close-modal-payment .modal-deactivating__action-save,
.close-modal-payment .modal-delete-regular__action-save,
.close-modal-templatePayment .close-payment__action-save,
.close-modal-templatePayment .close-templatePayment__action-save,
.close-modal-templatePayment .close-detail-template__action-save,
.close-modal-templatePayment .modal-deactivating__action-save,
.close-modal-templatePayment .modal-delete-regular__action-save,
.close-modal-detailTemplate .close-payment__action-save,
.close-modal-detailTemplate .close-templatePayment__action-save,
.close-modal-detailTemplate .close-detail-template__action-save,
.close-modal-detailTemplate .modal-deactivating__action-save,
.close-modal-detailTemplate .modal-delete-regular__action-save,
.modal-deactivating-template .close-payment__action-save,
.modal-deactivating-template .close-templatePayment__action-save,
.modal-deactivating-template .close-detail-template__action-save,
.modal-deactivating-template .modal-deactivating__action-save,
.modal-deactivating-template .modal-delete-regular__action-save,
.modal-delete-regular-template .close-payment__action-save,
.modal-delete-regular-template .close-templatePayment__action-save,
.modal-delete-regular-template .close-detail-template__action-save,
.modal-delete-regular-template .modal-deactivating__action-save,
.modal-delete-regular-template .modal-delete-regular__action-save {
    padding: 0.5rem 0.75rem;
    font-weight: 500;
}

.close-modal-payment .close-templatePayment__header,
.close-modal-payment .close-detail-template__header,
.close-modal-payment .modal-deactivating__header,
.close-modal-payment .modal-delete-regular__header,
.close-modal-templatePayment .close-templatePayment__header,
.close-modal-templatePayment .close-detail-template__header,
.close-modal-templatePayment .modal-deactivating__header,
.close-modal-templatePayment .modal-delete-regular__header,
.close-modal-detailTemplate .close-templatePayment__header,
.close-modal-detailTemplate .close-detail-template__header,
.close-modal-detailTemplate .modal-deactivating__header,
.close-modal-detailTemplate .modal-delete-regular__header,
.modal-deactivating-template .close-templatePayment__header,
.modal-deactivating-template .close-detail-template__header,
.modal-deactivating-template .modal-deactivating__header,
.modal-deactivating-template .modal-delete-regular__header,
.modal-delete-regular-template .close-templatePayment__header,
.modal-delete-regular-template .close-detail-template__header,
.modal-delete-regular-template .modal-deactivating__header,
.modal-delete-regular-template .modal-delete-regular__header {
    padding: 1.25rem 0.85rem 1.25rem 1.25rem;
}

.close-modal-payment .close-templatePayment__message,
.close-modal-payment .close-detail-template__message,
.close-modal-payment .modal-deactivating__message,
.close-modal-payment .modal-delete-regular__message,
.close-modal-templatePayment .close-templatePayment__message,
.close-modal-templatePayment .close-detail-template__message,
.close-modal-templatePayment .modal-deactivating__message,
.close-modal-templatePayment .modal-delete-regular__message,
.close-modal-detailTemplate .close-templatePayment__message,
.close-modal-detailTemplate .close-detail-template__message,
.close-modal-detailTemplate .modal-deactivating__message,
.close-modal-detailTemplate .modal-delete-regular__message,
.modal-deactivating-template .close-templatePayment__message,
.modal-deactivating-template .close-detail-template__message,
.modal-deactivating-template .modal-deactivating__message,
.modal-deactivating-template .modal-delete-regular__message,
.modal-delete-regular-template .close-templatePayment__message,
.modal-delete-regular-template .close-detail-template__message,
.modal-delete-regular-template .modal-deactivating__message,
.modal-delete-regular-template .modal-delete-regular__message {
    padding: 0 1.25rem 1.25rem 1.25rem;
}

.close-modal-payment .close-templatePayment__action,
.close-modal-payment .close-detail-template__action,
.close-modal-payment .modal-deactivating__action,
.close-modal-payment .modal-delete-regular__action,
.close-modal-templatePayment .close-templatePayment__action,
.close-modal-templatePayment .close-detail-template__action,
.close-modal-templatePayment .modal-deactivating__action,
.close-modal-templatePayment .modal-delete-regular__action,
.close-modal-detailTemplate .close-templatePayment__action,
.close-modal-detailTemplate .close-detail-template__action,
.close-modal-detailTemplate .modal-deactivating__action,
.close-modal-detailTemplate .modal-delete-regular__action,
.modal-deactivating-template .close-templatePayment__action,
.modal-deactivating-template .close-detail-template__action,
.modal-deactivating-template .modal-deactivating__action,
.modal-deactivating-template .modal-delete-regular__action,
.modal-delete-regular-template .close-templatePayment__action,
.modal-delete-regular-template .close-detail-template__action,
.modal-delete-regular-template .modal-deactivating__action,
.modal-delete-regular-template .modal-delete-regular__action {
    margin: 0;
    padding: 1.25rem;
}

.show-notification {
    box-sizing: border-box;
    position: relative;
    padding: 16px 16px 16px 22px;
    width: 100%;
    border-radius: 4px;
    transform: translateY(-10px);
    animation: showFadeIn 0.5s forwards;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

    .show-notification:before {
        position: absolute;
        content: "";
        top: 0;
        height: 100%;
        left: 0;
        border-radius: 4px 0 0 4px;
        width: 6px;
    }

.show-notification__container {
    width: 100%;
    display: flex;
    gap: 8px;
    align-items: flex-start;
}

.show-notification__icon {
    height: 18px;
    width: 20px;
    flex-shrink: 0;
    margin-top: 1px;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
}

.show-notification__content {
    width: 100%;
    min-width: 0;
}

.show-notification__wrap {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 7px;
    width: 100%;
}

.show-notification__title {
    font-family: "Fixel Text", "Fixel Display", "Helvetica", "Arial", sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: 20px;
    margin: 0;
    flex: 1;
}

.show-notification__description {
    margin-top: 8px;
    font-family: "Fixel Text", "Fixel Display", "Helvetica", "Arial", sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    color: #32383c;
    line-height: 20px;
    margin-bottom: 0;
}

.show-notification__description-t {
    margin-top: 0;
}

.show-notification__close {
    position: relative;
    cursor: pointer;
    min-width: 20px;
    min-height: 20px;
    max-width: 20px;
    max-height: 20px;
    flex-shrink: 0;
    margin-top: 1px;
}

    .show-notification__close:hover {
        opacity: 0.7;
    }

    .show-notification__close:before, .show-notification__close:after {
        position: absolute;
        content: " ";
        height: 20px;
        width: 2px;
        top: 0;
        right: 8px;
    }

    .show-notification__close:before {
        transform: rotate(45deg);
    }

    .show-notification__close:after {
        transform: rotate(-45deg);
    }

.show-notification__link {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 85%;
    margin-left: 26px;
    color: #690DD3;
    font-family: "Fixel Text", "Fixel Display", "Helvetica", "Arial", sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: 20px;
    text-decoration-line: underline;
    text-decoration-skip-ink: none;
}

.show-notification__legacy-link {
    font-weight: 500;
    cursor: pointer;
}

.show-notification__success {
    background: #E1F8F2;
    border: 1px solid #7ECABB;
}

    .show-notification__success:before {
        background: #22967F;
    }

    .show-notification__success .show-notification__success-title {
        color: #0A7B65;
    }

    .show-notification__success .show-notification__success-close:before, .show-notification__success .show-notification__success-close:after {
        background-color: #0A7B65;
    }

    .show-notification__success .show-notification__success-icon {
        background: url("../img/newDesign/icon/circle.check.svg") no-repeat center;
        background-size: contain;
    }

.debugUrl .show-notification__success .show-notification__success-icon {
    background: url("/Content/themes/novapay/img/newDesign/icon/circle.check.svg") no-repeat center;
    background-size: contain;
}

.show-notification__error {
    border: 1px solid #F1AEAB;
    background: #FFEBEA;
}

    .show-notification__error:before {
        background: #EB4235;
    }

    .show-notification__error .show-notification__error-title {
        color: #C6261A;
    }

    .show-notification__error .show-notification__error-close:before, .show-notification__error .show-notification__error-close:after {
        background-color: #C6261A;
    }

    .show-notification__error .show-notification__error-icon {
        background: url("../img/newDesign/icon/triangle.exclamation.svg") no-repeat center;
        background-size: contain;
    }

.debugUrl .show-notification__error .show-notification__error-icon {
    background: url("/Content/themes/novapay/img/newDesign/icon/triangle.exclamation.svg") no-repeat center;
    background-size: contain;
}

.show-notification__warning {
    border: 1px solid #FFE098;
    background: #FFF1DB;
}

    .show-notification__warning:before {
        background: #EB9D35;
    }

    .show-notification__warning .show-notification__warning-title {
        color: #7F560F;
    }

    .show-notification__warning .show-notification__warning-close:before, .show-notification__warning .show-notification__warning-close:after {
        background-color: #767F8A;
    }

    .show-notification__warning .show-notification__warning-icon {
        background: url("../img/newDesign/icon/circle.clock.svg") no-repeat center;
        background-size: contain;
    }

.debugUrl .show-notification__warning .show-notification__warning-icon {
    background: url("/Content/themes/novapay/img/newDesign/icon/circle.clock.svg") no-repeat center;
    background-size: contain;
}

.show-notification__info {
    border: 1px solid #b3d4fc;
    background: #e3f2fd;
}

    .show-notification__info:before {
        background: #2196f3;
    }

    .show-notification__info .show-notification__info-title {
        color: #0d47a1;
    }

    .show-notification__info .show-notification__info-close:before, .show-notification__info .show-notification__info-close:after {
        background-color: #0d47a1;
    }

.show-notification.fade-out {
    animation: showFadeOut 0.5s forwards;
}

@keyframes showFadeIn {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes showFadeOut {
    from {
        opacity: 1;
        transform: translateY(0);
    }

    to {
        opacity: 0;
        transform: translateY(-10px);
    }
}

@media (max-width: 768px) {
    .p-toast {
        right: 1rem !important;
        left: 1rem !important;
        max-width: calc(100% - 2rem) !important;
        top: 5rem !important;
    }
}

@media (max-width: 480px) {
    .p-toast {
        max-width: 85% !important;
        right: 3.5% !important;
        top: 88px !important;
    }

        .p-toast .show-notification {
            padding: 12px 12px 12px 18px;
        }

        .p-toast .show-notification__title {
            font-size: 14px;
        }

        .p-toast .show-notification__description {
            font-size: 12px;
            margin-top: 4px;
        }

        .p-toast .show-notification__description-t {
            margin-top: 0;
        }

        .p-toast .show-notification__link {
            font-size: 12px;
            width: 80%;
        }

        .p-toast .show-notification__icon {
            width: 16px;
            height: 16px;
        }
}

.ico-n {
    display: inline-block;
    width: 24px;
    height: 24px;
    line-height: 1;
    vertical-align: middle;
    color: inherit;
    fill: currentColor;
}

body[data-design=new] .icon-menu-accounts {
    top: 0.5rem !important;
    display: inline-block;
    width: 24px;
    height: 24px;
    background-color: currentColor;
    background-image: none;
    mask-image: url("../img/sprite.svg#icon-menu-wallet");
}

.debugUrl body[data-design=new] .icon-menu-accounts {
    mask-image: url("/Content/themes/novapay/img/sprite.svg#icon-menu-wallet");
}

body[data-design=new] .icon-menu-accounts {
    mask-repeat: no-repeat;
    mask-size: contain;
}

body[data-design=new] .icon-menu-help {
    left: 0.25rem !important;
    top: 0.25rem !important;
    display: inline-block;
    width: 32px;
    height: 32px;
    background-color: currentColor;
    background-image: none;
    mask-image: url("../img/sprite.svg#help");
}

.debugUrl body[data-design=new] .icon-menu-help {
    mask-image: url("/Content/themes/novapay/img/sprite.svg#help");
}

body[data-design=new] .icon-menu-help {
    mask-repeat: no-repeat;
    mask-size: contain;
}

.icon-menu-deposits {
    top: 8px !important;
    display: inline-block;
    width: 32px;
    height: 32px;
    background-color: currentColor;
    background-image: none;
    mask-image: url("../img/sprite.svg#icon-menu-case");
}

.debugUrl .icon-menu-deposits {
    mask-image: url("/Content/themes/novapay/img/sprite.svg#icon-menu-case");
}

.icon-menu-deposits {
    mask-repeat: no-repeat;
    mask-size: contain;
}

body[data-design=new] .activeMenuTab .icon-menu-help {
    display: inline-block;
    width: 32px;
    height: 32px;
    background-color: currentColor;
    background-image: none;
    mask-image: url("../img/sprite.svg#help-selected");
}

.debugUrl body[data-design=new] .activeMenuTab .icon-menu-help {
    mask-image: url("/Content/themes/novapay/img/sprite.svg#help-selected");
}

body[data-design=new] .activeMenuTab .icon-menu-help {
    mask-repeat: no-repeat;
    mask-size: contain;
}

body[data-design=new] .icon-menu-payments {
    top: 8px !important;
    display: inline-block;
    width: 24px;
    height: 24px;
    background-color: currentColor;
    background-image: none;
    mask-image: url("../img/sprite.svg#icon-menu-payments");
}

.debugUrl body[data-design=new] .icon-menu-payments {
    mask-image: url("/Content/themes/novapay/img/sprite.svg#icon-menu-payments");
}

body[data-design=new] .icon-menu-payments {
    mask-repeat: no-repeat;
    mask-size: contain;
}

body[data-design=new] .activeMenuTab .icon-menu-payments {
    display: inline-block;
    width: 24px;
    height: 24px;
    background-color: currentColor;
    background-image: none;
    mask-image: url("../img/sprite.svg#icon-menu-payments-hover");
}

.debugUrl body[data-design=new] .activeMenuTab .icon-menu-payments {
    mask-image: url("/Content/themes/novapay/img/sprite.svg#icon-menu-payments-hover");
}

body[data-design=new] .activeMenuTab .icon-menu-payments {
    mask-repeat: no-repeat;
    mask-size: contain;
}

body[data-design=new] .icon-menu-cards {
    top: 6px !important;
    display: inline-block;
    width: 24px;
    height: 24px;
    background-color: currentColor;
    background-image: none;
    mask-image: url("../img/sprite.svg#icon-menu-cards");
}

.debugUrl body[data-design=new] .icon-menu-cards {
    mask-image: url("/Content/themes/novapay/img/sprite.svg#icon-menu-cards");
}

body[data-design=new] .icon-menu-cards {
    mask-repeat: no-repeat;
    mask-size: contain;
}

body[data-design=new] .activeMenuTab .icon-menu-cards {
    display: inline-block;
    width: 24px;
    height: 24px;
    background-color: currentColor;
    background-image: none;
    mask-image: url("../img/sprite.svg#icon-menu-cards-hover");
}

.debugUrl body[data-design=new] .activeMenuTab .icon-menu-cards {
    mask-image: url("/Content/themes/novapay/img/sprite.svg#icon-menu-cards-hover");
}

body[data-design=new] .activeMenuTab .icon-menu-cards {
    mask-repeat: no-repeat;
    mask-size: contain;
}

body[data-design=new] .icon-menu-mail {
    top: 0.5rem !important;
    display: inline-block;
    width: 24px;
    height: 24px;
    background-color: currentColor;
    background-image: none;
    mask-image: url("../img/sprite.svg#icon-menu-mail");
}

.debugUrl body[data-design=new] .icon-menu-mail {
    mask-image: url("/Content/themes/novapay/img/sprite.svg#icon-menu-mail");
}

body[data-design=new] .icon-menu-mail {
    mask-repeat: no-repeat;
    mask-size: contain;
}

body[data-design=new] .activeMenuTab .icon-menu-mail {
    display: inline-block;
    width: 24px;
    height: 24px;
    background-color: currentColor;
    background-image: none;
    mask-image: url("../img/sprite.svg#icon-menu-mail-hover");
}

.debugUrl body[data-design=new] .activeMenuTab .icon-menu-mail {
    mask-image: url("/Content/themes/novapay/img/sprite.svg#icon-menu-mail-hover");
}

body[data-design=new] .activeMenuTab .icon-menu-mail {
    mask-repeat: no-repeat;
    mask-size: contain;
}

.icon-menu-references-list {
    width: 26px !important;
    height: 28px !important;
    display: inline-block;
    width: 24px;
    height: 24px;
    background-color: currentColor;
    background-image: none;
    mask-image: url("../img/sprite.svg#icon-menu-references-list");
}

.debugUrl .icon-menu-references-list {
    mask-image: url("/Content/themes/novapay/img/sprite.svg#icon-menu-references-list");
}

.icon-menu-references-list {
    mask-repeat: no-repeat;
    mask-size: contain;
}

body[data-design=new] .icon-menu-references {
    left: 9px !important;
    top: 9px !important;
    display: inline-block;
    width: 24px;
    height: 24px;
    background-color: currentColor;
    background-image: none;
    mask-image: url("../img/sprite.svg#icon-bookmark-2");
}

.debugUrl body[data-design=new] .icon-menu-references {
    mask-image: url("/Content/themes/novapay/img/sprite.svg#icon-bookmark-2");
}

body[data-design=new] .icon-menu-references {
    mask-repeat: no-repeat;
    mask-size: contain;
}

body[data-design=new] .activeMenuTab .icon-menu-references {
    display: inline-block;
    width: 24px;
    height: 24px;
    background-color: currentColor;
    background-image: none;
    mask-image: url("../img/sprite.svg#icon-bookmark-2-hover");
}

.debugUrl body[data-design=new] .activeMenuTab .icon-menu-references {
    mask-image: url("/Content/themes/novapay/img/sprite.svg#icon-bookmark-2-hover");
}

body[data-design=new] .activeMenuTab .icon-menu-references {
    mask-repeat: no-repeat;
    mask-size: contain;
}

body[data-design=new] .icon-menu-references {
    left: 9px !important;
    top: 9px !important;
    display: inline-block;
    width: 24px;
    height: 24px;
    background-color: currentColor;
    background-image: none;
    mask-image: url("../img/sprite.svg#icon-bookmark-2");
}

.debugUrl body[data-design=new] .icon-menu-references {
    mask-image: url("/Content/themes/novapay/img/sprite.svg#icon-bookmark-2");
}

body[data-design=new] .icon-menu-references {
    mask-repeat: no-repeat;
    mask-size: contain;
}

body[data-design=new] .icon-menu-extracts {
    left: 9px !important;
    top: 9px !important;
    display: inline-block;
    width: 24px;
    height: 24px;
    background-color: currentColor;
    background-image: none;
    mask-image: url("../img/sprite.svg#icon-menu-extracts");
}

.debugUrl body[data-design=new] .icon-menu-extracts {
    mask-image: url("/Content/themes/novapay/img/sprite.svg#icon-menu-extracts");
}

body[data-design=new] .icon-menu-extracts {
    mask-repeat: no-repeat;
    mask-size: contain;
}

body[data-design=new] .activeMenuTab .icon-menu-extracts {
    display: inline-block;
    width: 24px;
    height: 24px;
    background-color: currentColor;
    background-image: none;
    mask-image: url("../img/sprite.svg#icon-menu-extracts-hover");
}

.debugUrl body[data-design=new] .activeMenuTab .icon-menu-extracts {
    mask-image: url("/Content/themes/novapay/img/sprite.svg#icon-menu-extracts-hover");
}

body[data-design=new] .activeMenuTab .icon-menu-extracts {
    mask-repeat: no-repeat;
    mask-size: contain;
}

body[data-design=new] .icon-menu-salaryCardProject {
    top: 0.5rem !important;
    display: inline-block;
    width: 24px;
    height: 24px;
    background-color: currentColor;
    background-image: none;
    mask-image: url("../img/sprite.svg#icon-menu-salaryCardProject");
}

.debugUrl body[data-design=new] .icon-menu-salaryCardProject {
    mask-image: url("/Content/themes/novapay/img/sprite.svg#icon-menu-salaryCardProject");
}

body[data-design=new] .icon-menu-salaryCardProject {
    mask-repeat: no-repeat;
    mask-size: contain;
}

body[data-design=new] .activeMenuTab .icon-menu-salaryCardProject {
    display: inline-block;
    width: 24px;
    height: 24px;
    background-color: currentColor;
    background-image: none;
    mask-image: url("../img/sprite.svg#icon-menu-salaryCardProject-hover");
}

.debugUrl body[data-design=new] .activeMenuTab .icon-menu-salaryCardProject {
    mask-image: url("/Content/themes/novapay/img/sprite.svg#icon-menu-salaryCardProject-hover");
}

body[data-design=new] .activeMenuTab .icon-menu-salaryCardProject {
    mask-repeat: no-repeat;
    mask-size: contain;
}

body[data-design=new] .icon-menu-system {
    left: 0.25rem !important;
    top: 0.25rem !important;
    width: 30px !important;
    height: 33px !important;
    display: inline-block;
    width: 24px;
    height: 24px;
    background-color: currentColor;
    background-image: none;
    mask-image: url("../img/sprite.svg#bank");
}

.debugUrl body[data-design=new] .icon-menu-system {
    mask-image: url("/Content/themes/novapay/img/sprite.svg#bank");
}

body[data-design=new] .icon-menu-system {
    mask-repeat: no-repeat;
    mask-size: contain;
}

body[data-design=new] .activeMenuTab .icon-menu-system {
    display: inline-block;
    width: 24px;
    height: 24px;
    background-color: currentColor;
    background-image: none;
    mask-image: url("../img/sprite.svg#bank-selected");
}

.debugUrl body[data-design=new] .activeMenuTab .icon-menu-system {
    mask-image: url("/Content/themes/novapay/img/sprite.svg#bank-selected");
}

body[data-design=new] .activeMenuTab .icon-menu-system {
    mask-repeat: no-repeat;
    mask-size: contain;
}

body[data-design=new] .icon-menu-profile {
    left: 4px !important;
    top: 6px !important;
    display: inline-block;
    width: 30px;
    height: 30px;
    background-color: currentColor;
    background-image: none;
    mask-image: url("../img/sprite.svg#user");
}

.debugUrl body[data-design=new] .icon-menu-profile {
    mask-image: url("/Content/themes/novapay/img/sprite.svg#user");
}

body[data-design=new] .icon-menu-profile {
    mask-repeat: no-repeat;
    mask-size: contain;
}

body[data-design=new] .activeMenuTab .icon-menu-profile {
    display: inline-block;
    width: 30px;
    height: 30px;
    background-color: currentColor;
    background-image: none;
    mask-image: url("../img/sprite.svg#user-selected");
}

.debugUrl body[data-design=new] .activeMenuTab .icon-menu-profile {
    mask-image: url("/Content/themes/novapay/img/sprite.svg#user-selected");
}

body[data-design=new] .activeMenuTab .icon-menu-profile {
    mask-repeat: no-repeat;
    mask-size: contain;
}

body[data-design=new] .icon-menu-reports {
    left: 6px !important;
    top: 6px !important;
    display: inline-block;
    width: 33px;
    height: 33px;
    background-color: currentColor;
    background-image: none;
    mask-image: url("../img/sprite.svg#chart");
}

.debugUrl body[data-design=new] .icon-menu-reports {
    mask-image: url("/Content/themes/novapay/img/sprite.svg#chart");
}

body[data-design=new] .icon-menu-reports {
    mask-repeat: no-repeat;
    mask-size: contain;
}

body[data-design=new] .activeMenuTab .icon-menu-reports {
    display: inline-block;
    width: 33px;
    height: 33px;
    background-color: currentColor;
    background-image: none;
    mask-image: url("../img/sprite.svg#chart-selected");
}

.debugUrl body[data-design=new] .activeMenuTab .icon-menu-reports {
    mask-image: url("/Content/themes/novapay/img/sprite.svg#chart-selected");
}

body[data-design=new] .activeMenuTab .icon-menu-reports {
    mask-repeat: no-repeat;
    mask-size: contain;
}

.icon-call {
    background-color: #767F8A !important;
    display: inline-block;
    width: 32px;
    height: 32px;
    background-color: currentColor;
    background-image: none;
    mask-image: url("../img/sprite.svg#support-service-normal");
}

.debugUrl .icon-call {
    mask-image: url("/Content/themes/novapay/img/sprite.svg#support-service-normal");
}

.icon-call {
    mask-repeat: no-repeat;
    mask-size: contain;
}

.icon-emptyState {
    background-color: #DBDFE4 !important;
    display: inline-block;
    width: 101px;
    height: 101px;
    background-color: currentColor;
    background-image: none;
    mask-image: url("../img/sprite.svg#icon-emptyState");
}

.debugUrl .icon-emptyState {
    mask-image: url("/Content/themes/novapay/img/sprite.svg#icon-emptyState");
}

.icon-emptyState {
    mask-repeat: no-repeat;
    mask-size: contain;
}

.icon-upload {
    display: inline-block;
    width: 20px;
    height: 20px;
    background-color: currentColor;
    background-image: none;
    mask-image: url("../img/sprite.svg#icon-upload");
}

.debugUrl .icon-upload {
    mask-image: url("/Content/themes/novapay/img/sprite.svg#icon-upload");
}

.icon-upload {
    mask-repeat: no-repeat;
    mask-size: contain;
}

.icon-qr-code {
    display: inline-block;
    width: 14px;
    height: 14px;
    background-color: currentColor;
    background-image: none;
    mask-image: url("../img/sprite.svg#icon-qr-code");
}

.debugUrl .icon-qr-code {
    mask-image: url("/Content/themes/novapay/img/sprite.svg#icon-qr-code");
}

.icon-qr-code {
    mask-repeat: no-repeat;
    mask-size: contain;
}

.icon-letter {
    background: url("../img/newDesign/icon/letter-normal.svg") no-repeat center;
}

.debugUrl .icon-letter {
    background: url("/Content/themes/novapay/img/newDesign/icon/letter-normal.svg") no-repeat center;
}

.icon-bell {
    background: url("../img/newDesign/icon/bell-normal.svg") no-repeat center;
}

.debugUrl .icon-bell {
    background: url("/Content/themes/novapay/img/newDesign/icon/bell-normal.svg") no-repeat center;
}

.icon-person {
    background-color: #A8ADB4 !important;
    display: inline-block;
    width: 30px;
    height: 30px;
    background-color: currentColor;
    background-image: none;
    mask-image: url("../img/sprite.svg#person");
}

.debugUrl .icon-person {
    mask-image: url("/Content/themes/novapay/img/sprite.svg#person");
}

.icon-person {
    mask-repeat: no-repeat;
    mask-size: contain;
}

.icon-users-two {
    background: url("../img/newDesign/icon/icon-users-2.svg") no-repeat center;
}

.debugUrl .icon-users-two {
    background: url("/Content/themes/novapay/img/newDesign/icon/icon-users-2.svg") no-repeat center;
}

.icon-user {
    display: inline-block;
    width: 24px;
    height: 24px;
    background-color: currentColor;
    background-image: none;
    mask-image: url("../img/sprite.svg#icon-user");
}

.debugUrl .icon-user {
    mask-image: url("/Content/themes/novapay/img/sprite.svg#icon-user");
}

.icon-user {
    mask-repeat: no-repeat;
    mask-size: contain;
}

.icon-lock {
    background: url("../img/newDesign/icon/icon-lock.svg") no-repeat center;
}

.debugUrl .icon-lock {
    background: url("/Content/themes/novapay/img/newDesign/icon/icon-lock.svg") no-repeat center;
}

.icon-phone {
    display: inline-block;
    width: 24px;
    height: 24px;
    background-color: currentColor;
    background-image: none;
    mask-image: url("../img/sprite.svg#icon-phone");
}

.debugUrl .icon-phone {
    mask-image: url("/Content/themes/novapay/img/sprite.svg#icon-phone");
}

.icon-phone {
    mask-repeat: no-repeat;
    mask-size: contain;
}

.icon-payment-calendar-data {
    display: inline-block;
    width: 18px;
    height: 18px;
    background-color: currentColor;
    background-image: none;
    mask-image: url("../img/sprite.svg#icon-payment-calendar-data");
}

.debugUrl .icon-payment-calendar-data {
    mask-image: url("/Content/themes/novapay/img/sprite.svg#icon-payment-calendar-data");
}

.icon-payment-calendar-data {
    mask-repeat: no-repeat;
    mask-size: contain;
}

.icon-telegram {
    display: inline-block;
    width: 24px;
    height: 24px;
    background-color: currentColor;
    background-image: none;
    mask-image: url("../img/sprite.svg#icon-Telegram");
}

.debugUrl .icon-telegram {
    mask-image: url("/Content/themes/novapay/img/sprite.svg#icon-Telegram");
}

.icon-telegram {
    mask-repeat: no-repeat;
    mask-size: contain;
}

.icon-bell-payment {
    background-color: #690DD3 !important;
    display: inline-block;
    width: 24px;
    height: 24px;
    background-color: currentColor;
    background-image: none;
    mask-image: url("../img/sprite.svg#icon-bell-payment");
}

.debugUrl .icon-bell-payment {
    mask-image: url("/Content/themes/novapay/img/sprite.svg#icon-bell-payment");
}

.icon-bell-payment {
    mask-repeat: no-repeat;
    mask-size: contain;
}

.icon-arrow-down {
    display: inline-block;
    width: 24px;
    height: 24px;
    background-color: currentColor;
    background-image: none;
    mask-image: url("../img/sprite.svg#icon-arrow-down");
}

.debugUrl .icon-arrow-down {
    mask-image: url("/Content/themes/novapay/img/sprite.svg#icon-arrow-down");
}

.icon-arrow-down {
    mask-repeat: no-repeat;
    mask-size: contain;
}

.icon-arrow-prew-step {
    display: inline-block;
    width: 17px;
    height: 17px;
    background-color: currentColor;
    background-image: none;
    mask-image: url("../img/sprite.svg#icon-arrow-prew-step");
}

.debugUrl .icon-arrow-prew-step {
    mask-image: url("/Content/themes/novapay/img/sprite.svg#icon-arrow-prew-step");
}

.icon-arrow-prew-step {
    mask-repeat: no-repeat;
    mask-size: contain;
}

.icon-arrow-next-step {
    display: inline-block;
    width: 17px;
    height: 17px;
    background-color: currentColor;
    background-image: none;
    mask-image: url("../img/sprite.svg#icon-arrow-next-step");
}

.debugUrl .icon-arrow-next-step {
    mask-image: url("/Content/themes/novapay/img/sprite.svg#icon-arrow-next-step");
}

.icon-arrow-next-step {
    mask-repeat: no-repeat;
    mask-size: contain;
}

.icon-send-payment {
    display: inline-block;
    width: 24px;
    height: 24px;
    background-color: currentColor;
    background-image: none;
    mask-image: url("../img/sprite.svg#icon-send-payment");
}

.debugUrl .icon-send-payment {
    mask-image: url("/Content/themes/novapay/img/sprite.svg#icon-send-payment");
}

.icon-send-payment {
    mask-repeat: no-repeat;
    mask-size: contain;
}

.icon-sign-payment {
    display: inline-block;
    width: 24px;
    height: 24px;
    background-color: currentColor;
    background-image: none;
    mask-image: url("../img/sprite.svg#icon-sign-payment");
}

.debugUrl .icon-sign-payment {
    mask-image: url("/Content/themes/novapay/img/sprite.svg#icon-sign-payment");
}

.icon-sign-payment {
    mask-repeat: no-repeat;
    mask-size: contain;
}

.icon-edit-payment {
    display: inline-block;
    width: 11px;
    height: 11px;
    background-color: currentColor;
    background-image: none;
    mask-image: url("../img/sprite.svg#icon-edit-payment");
}

.debugUrl .icon-edit-payment {
    mask-image: url("/Content/themes/novapay/img/sprite.svg#icon-edit-payment");
}

.icon-edit-payment {
    mask-repeat: no-repeat;
    mask-size: contain;
}

.icon-sign-payment {
    display: inline-block;
    width: 11px;
    height: 11px;
    background-color: currentColor;
    background-image: none;
    mask-image: url("../img/sprite.svg#icon-sign-payment");
}

.debugUrl .icon-sign-payment {
    mask-image: url("/Content/themes/novapay/img/sprite.svg#icon-sign-payment");
}

.icon-sign-payment {
    mask-repeat: no-repeat;
    mask-size: contain;
}

.icon-decline-payment {
    display: inline-block;
    width: 20px;
    height: 20px;
    background-color: currentColor;
    background-image: none;
    mask-image: url("../img/sprite.svg#icon-decline-payment");
}

.debugUrl .icon-decline-payment {
    mask-image: url("/Content/themes/novapay/img/sprite.svg#icon-decline-payment");
}

.icon-decline-payment {
    mask-repeat: no-repeat;
    mask-size: contain;
}

.icon-confirm-payment {
    display: inline-block;
    width: 20px;
    height: 20px;
    background-color: currentColor;
    background-image: none;
    mask-image: url("../img/sprite.svg#icon-confirm-payment");
}

.debugUrl .icon-confirm-payment {
    mask-image: url("/Content/themes/novapay/img/sprite.svg#icon-confirm-payment");
}

.icon-confirm-payment {
    mask-repeat: no-repeat;
    mask-size: contain;
}

.icon-remove-personally-payment {
    display: inline-block;
    width: 20px;
    height: 20px;
    background-color: currentColor;
    background-image: none;
    mask-image: url("../img/sprite.svg#icon-remove-personally-payment");
}

.debugUrl .icon-remove-personally-payment {
    mask-image: url("/Content/themes/novapay/img/sprite.svg#icon-remove-personally-payment");
}

.icon-remove-personally-payment {
    mask-repeat: no-repeat;
    mask-size: contain;
}

.icon-subscribe-payment {
    display: inline-block;
    width: 20px;
    height: 20px;
    background-color: currentColor;
    background-image: none;
    mask-image: url("../img/sprite.svg#icon-subscribe-payment");
}

.debugUrl .icon-subscribe-payment {
    mask-image: url("/Content/themes/novapay/img/sprite.svg#icon-subscribe-payment");
}

.icon-subscribe-payment {
    mask-repeat: no-repeat;
    mask-size: contain;
}

.icon-maketemplate-payment {
    display: inline-block;
    width: 18px;
    height: 18px;
    background-color: currentColor;
    background-image: none;
    mask-image: url("../img/sprite.svg#icon-maketemplate-payment");
}

.debugUrl .icon-maketemplate-payment {
    mask-image: url("/Content/themes/novapay/img/sprite.svg#icon-maketemplate-payment");
}

.icon-maketemplate-payment {
    mask-repeat: no-repeat;
    mask-size: contain;
}

.icon-toggle {
    display: inline-block;
    width: 24px;
    height: 24px;
    background-color: currentColor;
    background-image: none;
    mask-image: url("../img/sprite.svg#icon-toggle");
}

.debugUrl .icon-toggle {
    mask-image: url("/Content/themes/novapay/img/sprite.svg#icon-toggle");
}

.icon-toggle {
    mask-repeat: no-repeat;
    mask-size: contain;
}

.icon-export-payment {
    display: inline-block;
    width: 24px;
    height: 24px;
    background-color: currentColor;
    background-image: none;
    mask-image: url("../img/sprite.svg#icon-export-payment");
}

.debugUrl .icon-export-payment {
    mask-image: url("/Content/themes/novapay/img/sprite.svg#icon-export-payment");
}

.icon-export-payment {
    mask-repeat: no-repeat;
    mask-size: contain;
}

.edit-icon {
    display: inline-block;
    width: 24px;
    height: 24px;
    background-color: currentColor;
    background-image: none;
    mask-image: url("../img/sprite.svg#edit-icon");
}

.debugUrl .edit-icon {
    mask-image: url("/Content/themes/novapay/img/sprite.svg#edit-icon");
}

.edit-icon {
    mask-repeat: no-repeat;
    mask-size: contain;
}

.visa-green-icon {
    display: inline-block;
    width: 20px;
    height: 20px;
    background-color: currentColor;
    background-image: none;
    mask-image: url("../img/sprite.svg#visa-green-icon");
}

.debugUrl .visa-green-icon {
    mask-image: url("/Content/themes/novapay/img/sprite.svg#visa-green-icon");
}

.visa-green-icon {
    mask-repeat: no-repeat;
    mask-size: contain;
}

.icon-copy-payment {
    display: inline-block;
    width: 24px;
    height: 24px;
    background-color: currentColor;
    background-image: none;
    mask-image: url("../img/sprite.svg#icon-copy-payment");
}

.debugUrl .icon-copy-payment {
    mask-image: url("/Content/themes/novapay/img/sprite.svg#icon-copy-payment");
}

.icon-copy-payment {
    mask-repeat: no-repeat;
    mask-size: contain;
}

.icon-print-payment {
    display: inline-block;
    width: 24px;
    height: 24px;
    background-color: currentColor;
    background-image: none;
    mask-image: url("../img/sprite.svg#icon-print-payment");
}

.debugUrl .icon-print-payment {
    mask-image: url("/Content/themes/novapay/img/sprite.svg#icon-print-payment");
}

.icon-print-payment {
    mask-repeat: no-repeat;
    mask-size: contain;
}

.icon-Scroll-Button {
    display: inline-block;
    width: 24px;
    height: 24px;
    background-color: currentColor;
    background-image: none;
    mask-image: url("../img/sprite.svg#icon-Scroll-Button");
}

.debugUrl .icon-Scroll-Button {
    mask-image: url("/Content/themes/novapay/img/sprite.svg#icon-Scroll-Button");
}

.icon-Scroll-Button {
    mask-repeat: no-repeat;
    mask-size: contain;
}

.icon-unsubscribe-payment {
    display: inline-block;
    width: 24px;
    height: 24px;
    background-color: currentColor;
    background-image: none;
    mask-image: url("../img/sprite.svg#icon-unsubscribe-payment");
}

.debugUrl .icon-unsubscribe-payment {
    mask-image: url("/Content/themes/novapay/img/sprite.svg#icon-unsubscribe-payment");
}

.icon-unsubscribe-payment {
    mask-repeat: no-repeat;
    mask-size: contain;
}

.icon-recall-payment {
    display: inline-block;
    width: 21px;
    height: 21px;
    background-color: currentColor;
    background-image: none;
    mask-image: url("../img/sprite.svg#icon-recall-payment");
}

.debugUrl .icon-recall-payment {
    mask-image: url("/Content/themes/novapay/img/sprite.svg#icon-recall-payment");
}

.icon-recall-payment {
    mask-repeat: no-repeat;
    mask-size: contain;
}

.icon-default-bank {
    display: inline-block;
    width: 20px;
    height: 20px;
    background-color: currentColor;
    background-image: none;
    mask-image: url("../img/sprite.svg#icon-default-bank ");
}

.debugUrl .icon-default-bank {
    mask-image: url("/Content/themes/novapay/img/sprite.svg#icon-default-bank ");
}

.icon-default-bank {
    mask-repeat: no-repeat;
    mask-size: contain;
}

.icon-recall-back {
    display: inline-block;
    width: 21px;
    height: 21px;
    background-color: currentColor;
    background-image: none;
    mask-image: url("../img/sprite.svg#icon-recall-back");
}

.debugUrl .icon-recall-back {
    mask-image: url("/Content/themes/novapay/img/sprite.svg#icon-recall-back");
}

.icon-recall-back {
    mask-repeat: no-repeat;
    mask-size: contain;
}

.icon-tablestatus-payment {
    display: inline-block;
    width: 17px;
    height: 17px;
    background-color: currentColor;
    background-image: none;
    mask-image: url("../img/sprite.svg#icon-tablestatus-payment");
}

.debugUrl .icon-tablestatus-payment {
    mask-image: url("/Content/themes/novapay/img/sprite.svg#icon-tablestatus-payment");
}

.icon-tablestatus-payment {
    mask-repeat: no-repeat;
    mask-size: contain;
}

.icon-sort-status {
    display: inline-block;
    width: 14px;
    height: 14px;
    background-color: currentColor;
    background-image: none;
    mask-image: url("../img/sprite.svg#icon-sort-status");
}

.debugUrl .icon-sort-status {
    mask-image: url("/Content/themes/novapay/img/sprite.svg#icon-sort-status");
}

.icon-sort-status {
    mask-repeat: no-repeat;
    mask-size: contain;
}

.icon-remove-payment {
    display: inline-block;
    width: 20px;
    height: 20px;
    background-color: currentColor;
    background-image: none;
    mask-image: url("../img/sprite.svg#icon-remove-payment");
}

.debugUrl .icon-remove-payment {
    mask-image: url("/Content/themes/novapay/img/sprite.svg#icon-remove-payment");
}

.icon-remove-payment {
    mask-repeat: no-repeat;
    mask-size: contain;
}

.icon-activate-new {
    display: inline-block;
    width: 20px;
    height: 20px;
    background-color: currentColor;
    background-image: none;
    mask-image: url("../img/sprite.svg#icon-activate-new");
}

.debugUrl .icon-activate-new {
    mask-image: url("/Content/themes/novapay/img/sprite.svg#icon-activate-new");
}

.icon-activate-new {
    mask-repeat: no-repeat;
    mask-size: contain;
}

.icon-deactivate-new {
    display: inline-block;
    width: 20px;
    height: 20px;
    background-color: currentColor;
    background-image: none;
    mask-image: url("../img/sprite.svg#icon-deactivate-new");
}

.debugUrl .icon-deactivate-new {
    mask-image: url("/Content/themes/novapay/img/sprite.svg#icon-deactivate-new");
}

.icon-deactivate-new {
    mask-repeat: no-repeat;
    mask-size: contain;
}

.icon-arrow-sort {
    display: inline-block;
    width: 17px;
    height: 17px;
    background-color: currentColor;
    background-image: none;
    mask-image: url("../img/sprite.svg#icon-arrow-sort");
}

.debugUrl .icon-arrow-sort {
    mask-image: url("/Content/themes/novapay/img/sprite.svg#icon-arrow-sort");
}

.icon-arrow-sort {
    mask-repeat: no-repeat;
    mask-size: contain;
}

.icon-double-arrow {
    display: inline-block;
    width: 14px;
    height: 14px;
    background-color: currentColor;
    background-image: none;
    mask-image: url("../img/sprite.svg#icon-double-arrow");
}

.debugUrl .icon-double-arrow {
    mask-image: url("/Content/themes/novapay/img/sprite.svg#icon-double-arrow");
}

.icon-double-arrow {
    mask-repeat: no-repeat;
    mask-size: contain;
}

.icon-line-arrow-down {
    display: inline-block;
    width: 16px;
    height: 16px;
    background-color: currentColor;
    background-image: none;
    mask-image: url("../img/sprite.svg#icon-line-arrow-down");
}

.debugUrl .icon-line-arrow-down {
    mask-image: url("/Content/themes/novapay/img/sprite.svg#icon-line-arrow-down");
}

.icon-line-arrow-down {
    mask-repeat: no-repeat;
    mask-size: contain;
}

.icon-line-arrow-up {
    display: inline-block;
    width: 16px;
    height: 16px;
    background-color: currentColor;
    background-image: none;
    mask-image: url("../img/sprite.svg#icon-line-arrow-up");
}

.debugUrl .icon-line-arrow-up {
    mask-image: url("/Content/themes/novapay/img/sprite.svg#icon-line-arrow-up");
}

.icon-line-arrow-up {
    mask-repeat: no-repeat;
    mask-size: contain;
}

.icon-arrow-movements-from-to {
    display: inline-block;
    width: 24px;
    height: 24px;
    background-color: currentColor;
    background-image: none;
    mask-image: url("../img/sprite.svg#icon-arrow-movements-from-to");
}

.debugUrl .icon-arrow-movements-from-to {
    mask-image: url("/Content/themes/novapay/img/sprite.svg#icon-arrow-movements-from-to");
}

.icon-arrow-movements-from-to {
    mask-repeat: no-repeat;
    mask-size: contain;
}

.icon-no-employees {
    display: inline-block;
    width: 52px;
    height: 52px;
    background-color: currentColor;
    background-image: none;
    mask-image: url("../img/sprite.svg#icon-no-employees");
}

.debugUrl .icon-no-employees {
    mask-image: url("/Content/themes/novapay/img/sprite.svg#icon-no-employees");
}

.icon-no-employees {
    mask-repeat: no-repeat;
    mask-size: contain;
}

.icon-expand {
    display: inline-block;
    width: 14px;
    height: 14px;
    background-color: currentColor;
    background-image: none;
    mask-image: url("../img/sprite.svg#icon-expand");
}

.debugUrl .icon-expand {
    mask-image: url("/Content/themes/novapay/img/sprite.svg#icon-expand");
}

.icon-expand {
    mask-repeat: no-repeat;
    mask-size: contain;
}

.icon-circular-arrow {
    display: inline-block;
    width: 16px;
    height: 16px;
    background-color: currentColor;
    background-image: none;
    mask-image: url("../img/sprite.svg#icon-circular-arrow");
}

.debugUrl .icon-circular-arrow {
    mask-image: url("/Content/themes/novapay/img/sprite.svg#icon-circular-arrow");
}

.icon-circular-arrow {
    mask-repeat: no-repeat;
    mask-size: contain;
}

.icon-payment-filter {
    display: inline-block;
    width: 16px;
    height: 16px;
    background-color: currentColor;
    background-image: none;
    mask-image: url("../img/sprite.svg#icon-payment-filter");
}

.debugUrl .icon-payment-filter {
    mask-image: url("/Content/themes/novapay/img/sprite.svg#icon-payment-filter");
}

.icon-payment-filter {
    mask-repeat: no-repeat;
    mask-size: contain;
}

.icon-payment-receipt {
    display: inline-block;
    width: 20px;
    height: 20px;
    background-color: currentColor;
    background-image: none;
    mask-image: url("../img/sprite.svg#icon-payment-receipt");
}

.debugUrl .icon-payment-receipt {
    mask-image: url("/Content/themes/novapay/img/sprite.svg#icon-payment-receipt");
}

.icon-payment-receipt {
    mask-repeat: no-repeat;
    mask-size: contain;
}

body[data-design=new] .activeMessage {
    width: 100%;
    height: 100%;
    position: relative;
}

    body[data-design=new] .activeMessage .icon-icon-msg {
        background-color: #767F8A !important;
        display: inline-block;
        width: 24px;
        height: 24px;
        background-color: currentColor;
        background-image: none;
        mask-image: url("../img/sprite.svg#letter-normal");
    }

.debugUrl body[data-design=new] .activeMessage .icon-icon-msg {
    mask-image: url("/Content/themes/novapay/img/sprite.svg#letter-normal");
}

body[data-design=new] .activeMessage .icon-icon-msg {
    mask-repeat: no-repeat;
    mask-size: contain;
}

body[data-design=new] .activeMessage:hover .icon-icon-msg {
    background-color: #690DD3 !important;
    display: inline-block;
    width: 24px;
    height: 24px;
    background-color: currentColor;
    background-image: none;
    mask-image: url("../img/sprite.svg#letter-hover");
}

.debugUrl body[data-design=new] .activeMessage:hover .icon-icon-msg {
    mask-image: url("/Content/themes/novapay/img/sprite.svg#letter-hover");
}

body[data-design=new] .activeMessage:hover .icon-icon-msg {
    mask-repeat: no-repeat;
    mask-size: contain;
}

.icon-templates-new, body[data-design=new] .activeMessage .icon-menu-templates, body[data-design=new] .icon-menu-templates {
    display: inline-block;
    width: 24px;
    height: 24px;
    background-color: currentColor;
    background-image: none;
    mask-image: url("../img/sprite.svg#icon-templates-new");
}

.debugUrl .icon-templates-new, .debugUrl body[data-design=new] .icon-menu-templates, body[data-design=new] .debugUrl .icon-menu-templates {
    mask-image: url("/Content/themes/novapay/img/sprite.svg#icon-templates-new");
}

.icon-templates-new, body[data-design=new] .activeMessage .icon-menu-templates, body[data-design=new] .icon-menu-templates {
    mask-repeat: no-repeat;
    mask-size: contain;
}

.icon-related-payments {
    display: inline-block;
    width: 15px;
    height: 15px;
    background-color: currentColor;
    background-image: none;
    mask-image: url("../img/sprite.svg#icon-related-payments");
}

.debugUrl .icon-related-payments {
    mask-image: url("/Content/themes/novapay/img/sprite.svg#icon-related-payments");
}

.icon-related-payments {
    mask-repeat: no-repeat;
    mask-size: contain;
}

body[data-design=new] .icon-menu-templates {
    left: 0.5rem !important;
    top: 0.5rem !important;
}

body[data-design=new] .activeMessage {
    width: 100%;
    height: 100%;
    position: relative;
}

    body[data-design=new] .activeMessage .icon-menu-templates {
        background-color: #767F8A !important;
    }

    body[data-design=new] .activeMessage:hover .icon-menu-templates {
        background-color: #690DD3 !important;
    }

.icon-menu {
    background-color: #767F8A !important;
    display: inline-block;
    width: 24px;
    height: 24px;
    background-color: currentColor;
    background-image: none;
    mask-image: url("../img/sprite.svg#icon-menu");
}

.debugUrl .icon-menu {
    mask-image: url("/Content/themes/novapay/img/sprite.svg#icon-menu");
}

.icon-menu {
    mask-repeat: no-repeat;
    mask-size: contain;
}

.icon-file-lines {
    background: url("../img/newDesign/icon/icon-file-lines.svg") no-repeat center;
}

.debugUrl .icon-file-lines {
    background: url("/Content/themes/novapay/img/newDesign/icon/icon-file-lines.svg") no-repeat center;
}

.icon-cash {
    background: url("../img/newDesign/icon/icon-cash-rectangle-horizontal.svg") no-repeat center;
}

.debugUrl .icon-cash {
    background: url("/Content/themes/novapay/img/newDesign/icon/icon-cash-rectangle-horizontal.svg") no-repeat center;
}

.icon-bookmark {
    background: url("../img/newDesign/icon/icon-bookmark-2.svg") no-repeat center;
}

.debugUrl .icon-bookmark {
    background: url("/Content/themes/novapay/img/newDesign/icon/icon-bookmark-2.svg") no-repeat center;
}

.icon-bill {
    background: url("../img/newDesign/icon/icon-bill-lines-parcel.svg") no-repeat center;
}

.debugUrl .icon-bill {
    background: url("/Content/themes/novapay/img/newDesign/icon/icon-bill-lines-parcel.svg") no-repeat center;
}

.icon-arrow-diagonal {
    background: url("../img/newDesign/icon/icon-arrow-diagonal-hover.svg") no-repeat center;
}

.debugUrl .icon-arrow-diagonal {
    background: url("/Content/themes/novapay/img/newDesign/icon/icon-arrow-diagonal-hover.svg") no-repeat center;
}

.icon-account-open {
    background: url("../img/newDesign/icon/icon-account-open.svg") no-repeat center;
}

.debugUrl .icon-account-open {
    background: url("/Content/themes/novapay/img/newDesign/icon/icon-account-open.svg") no-repeat center;
}

.icon-account-close {
    background: url("../img/newDesign/icon/icon-account-close.svg") no-repeat center;
}

.debugUrl .icon-account-close {
    background: url("/Content/themes/novapay/img/newDesign/icon/icon-account-close.svg") no-repeat center;
}

.icon-triger-white-arrow {
    background: url("../img/newDesign/icon/arrow-white.svg") no-repeat center;
}

.debugUrl .icon-triger-white-arrow {
    background: url("/Content/themes/novapay/img/newDesign/icon/arrow-white.svg") no-repeat center;
}

.icon-arrow-dropdown {
    display: inline-block;
    width: 24px;
    height: 24px;
    background-color: currentColor;
    background-image: none;
    mask-image: url("../img/sprite.svg#icon-arrow-dropdown");
}

.debugUrl .icon-arrow-dropdown {
    mask-image: url("/Content/themes/novapay/img/sprite.svg#icon-arrow-dropdown");
}

.icon-arrow-dropdown {
    mask-repeat: no-repeat;
    mask-size: contain;
}

.icon-account-copy {
    background: url("../img/newDesign/icon/icon-account-copy.svg") no-repeat center;
}

.debugUrl .icon-account-copy {
    background: url("/Content/themes/novapay/img/newDesign/icon/icon-account-copy.svg") no-repeat center;
}

.icon-account-copyAll {
    background: url("../img/newDesign/icon/icon-account-copyAll.svg") no-repeat center;
}

.debugUrl .icon-account-copyAll {
    background: url("/Content/themes/novapay/img/newDesign/icon/icon-account-copyAll.svg") no-repeat center;
}

.icon-view-details-payslip {
    display: inline-block;
    width: 24px;
    height: 24px;
    background-color: currentColor;
    background-image: none;
    mask-image: url("../img/sprite.svg#icon-view-details-payslip");
}

.debugUrl .icon-view-details-payslip {
    mask-image: url("/Content/themes/novapay/img/sprite.svg#icon-view-details-payslip");
}

.icon-view-details-payslip {
    mask-repeat: no-repeat;
    mask-size: contain;
}

.icon-account-detail {
    background: url("../img/newDesign/icon/icon-account-detail.svg") no-repeat center;
}

.debugUrl .icon-account-detail {
    background: url("/Content/themes/novapay/img/newDesign/icon/icon-account-detail.svg") no-repeat center;
}

.icon-account-letter {
    background: url("../img/newDesign/icon/icon-account-letter.svg") no-repeat center;
}

.debugUrl .icon-account-letter {
    background: url("/Content/themes/novapay/img/newDesign/icon/icon-account-letter.svg") no-repeat center;
}

.icon-account-print {
    background: url("../img/newDesign/icon/icon-account-print.svg") no-repeat center;
}

.debugUrl .icon-account-print {
    background: url("/Content/themes/novapay/img/newDesign/icon/icon-account-print.svg") no-repeat center;
}

.icon-cancel {
    background: url("../img/newDesign/icon/icon-account-cancel.svg") no-repeat center;
}

.debugUrl .icon-cancel {
    background: url("/Content/themes/novapay/img/newDesign/icon/icon-account-cancel.svg") no-repeat center;
}

.icon-pen-edit {
    background: url("../img/newDesign/icon/icon-account-edit.svg") no-repeat center;
}

.debugUrl .icon-pen-edit {
    background: url("/Content/themes/novapay/img/newDesign/icon/icon-account-edit.svg") no-repeat center;
}

.select-arrow-icon {
    background: url("../img/newDesign/icon/select-arrow.svg") no-repeat center;
}

.debugUrl .select-arrow-icon {
    background: url("/Content/themes/novapay/img/newDesign/icon/select-arrow.svg") no-repeat center;
}

.icon-plus {
    background: url("../img/newDesign/icon/icon-plus.svg") no-repeat center;
}

.debugUrl .icon-plus {
    background: url("/Content/themes/novapay/img/newDesign/icon/icon-plus.svg") no-repeat center;
}

.icon-trash-new-ui {
    display: inline-block;
    width: 24px;
    height: 24px;
    background-color: currentColor;
    background-image: none;
    mask-image: url("../img/sprite.svg#icon-account-trash");
}

.debugUrl .icon-trash-new-ui {
    mask-image: url("/Content/themes/novapay/img/sprite.svg#icon-account-trash");
}

.icon-trash-new-ui {
    mask-repeat: no-repeat;
    mask-size: contain;
}

.search-icon {
    background: url("../img/newDesign/icon/search-icon.svg") no-repeat center;
}

.debugUrl .search-icon {
    background: url("/Content/themes/novapay/img/newDesign/icon/search-icon.svg") no-repeat center;
}

.icon-search {
    display: inline-block;
    width: 24px;
    height: 24px;
    background-color: currentColor;
    background-image: none;
    mask-image: url("../img/sprite.svg#icon-search");
}

.debugUrl .icon-search {
    mask-image: url("/Content/themes/novapay/img/sprite.svg#icon-search");
}

.icon-search {
    mask-repeat: no-repeat;
    mask-size: contain;
}

.icon-postpaid-file-lines {
    background: url("../img/newDesign/icon/icon-postpaid-file-lines.svg") no-repeat center;
}

.debugUrl .icon-postpaid-file-lines {
    background: url("/Content/themes/novapay/img/newDesign/icon/icon-postpaid-file-lines.svg") no-repeat center;
}

.icon-postpaid-sufficient-clock {
    background: url("../img/newDesign/icon/icon-postpaid-sufficient-clock.svg") no-repeat center;
}

.debugUrl .icon-postpaid-sufficient-clock {
    background: url("/Content/themes/novapay/img/newDesign/icon/icon-postpaid-sufficient-clock.svg") no-repeat center;
}

.icon-postpaid-limit-clock {
    background: url("../img/newDesign/icon/icon-postpaid-limit-clock.svg") no-repeat center;
}

.debugUrl .icon-postpaid-limit-clock {
    background: url("/Content/themes/novapay/img/newDesign/icon/icon-postpaid-limit-clock.svg") no-repeat center;
}

.icon-back-arrow-black {
    background: url("../img/newDesign/icon/back-arrow-black.svg") no-repeat center;
}

.debugUrl .icon-back-arrow-black {
    background: url("/Content/themes/novapay/img/newDesign/icon/back-arrow-black.svg") no-repeat center;
}

.icon-download-new-ui {
    position: relative;
    top: 3px;
    display: inline-block;
    width: 24px;
    height: 24px;
    background-color: currentColor;
    background-image: none;
    mask-image: url("../img/sprite.svg#icon-download");
}

.debugUrl .icon-download-new-ui {
    mask-image: url("/Content/themes/novapay/img/sprite.svg#icon-download");
}

.icon-download-new-ui {
    mask-repeat: no-repeat;
    mask-size: contain;
}

.icon-postpaid-plus-white {
    background: url("../img/newDesign/icon/icon-postpaid-plus-white.svg") no-repeat center;
}

.debugUrl .icon-postpaid-plus-white {
    background: url("/Content/themes/novapay/img/newDesign/icon/icon-postpaid-plus-white.svg") no-repeat center;
}

.icon-slick-arrow-left {
    display: inline-block;
    width: 24px;
    height: 24px;
    background-color: currentColor;
    background-image: none;
    mask-image: url("../img/sprite.svg#icon-slick-arrow-left");
}

.debugUrl .icon-slick-arrow-left {
    mask-image: url("/Content/themes/novapay/img/sprite.svg#icon-slick-arrow-left");
}

.icon-slick-arrow-left {
    mask-repeat: no-repeat;
    mask-size: contain;
}

.icon-slick-arrow-right {
    display: inline-block;
    width: 24px;
    height: 24px;
    background-color: currentColor;
    background-image: none;
    mask-image: url("../img/sprite.svg#icon-slick-arrow-right");
}

.debugUrl .icon-slick-arrow-right {
    mask-image: url("/Content/themes/novapay/img/sprite.svg#icon-slick-arrow-right");
}

.icon-slick-arrow-right {
    mask-repeat: no-repeat;
    mask-size: contain;
}

.icon-user-group {
    display: inline-block;
    width: 20px;
    height: 20px;
    background-color: currentColor;
    background-image: none;
    mask-image: url("../img/sprite.svg#user-group");
}

.debugUrl .icon-user-group {
    mask-image: url("/Content/themes/novapay/img/sprite.svg#user-group");
}

.icon-user-group {
    mask-repeat: no-repeat;
    mask-size: contain;
}

.icon-cross-user-group {
    display: inline-block;
    width: 20px;
    height: 20px;
    background-color: currentColor;
    background-image: none;
    mask-image: url("../img/sprite.svg#cross-user-group");
}

.debugUrl .icon-cross-user-group {
    mask-image: url("/Content/themes/novapay/img/sprite.svg#cross-user-group");
}

.icon-cross-user-group {
    mask-repeat: no-repeat;
    mask-size: contain;
}

.icon-send-email {
    display: inline-block;
    width: 20px;
    height: 20px;
    background-color: currentColor;
    background-image: none;
    mask-image: url("../img/sprite.svg#icon-send-email");
}

.debugUrl .icon-send-email {
    mask-image: url("/Content/themes/novapay/img/sprite.svg#icon-send-email");
}

.icon-send-email {
    mask-repeat: no-repeat;
    mask-size: contain;
}

.icon-edits {
    display: inline-block;
    width: 24px;
    height: 24px;
    background-color: currentColor;
    background-image: none;
    mask-image: url("../img/sprite.svg#icon-pen-edit");
}

.debugUrl .icon-edits {
    mask-image: url("/Content/themes/novapay/img/sprite.svg#icon-pen-edit");
}

.icon-edits {
    mask-repeat: no-repeat;
    mask-size: contain;
}

.icon-trianglee-warning {
    display: inline-block;
    width: 20px;
    height: 20px;
    background-color: currentColor;
    background-image: none;
    mask-image: url("../img/sprite.svg#icon-trianglee-warning");
}

.debugUrl .icon-trianglee-warning {
    mask-image: url("/Content/themes/novapay/img/sprite.svg#icon-trianglee-warning");
}

.icon-trianglee-warning {
    mask-repeat: no-repeat;
    mask-size: contain;
}

.icon-menu-extractsTurns {
    top: 0.5rem !important;
    display: inline-block;
    width: 24px;
    height: 24px;
    background-color: currentColor;
    background-image: none;
    mask-image: url("../img/sprite.svg#icon-menu-extractsTurns ");
}

.debugUrl .icon-menu-extractsTurns {
    mask-image: url("/Content/themes/novapay/img/sprite.svg#icon-menu-extractsTurns ");
}

.icon-menu-extractsTurns {
    mask-repeat: no-repeat;
    mask-size: contain;
}

.icon-info-new {
    display: inline-block;
    width: 20px;
    height: 20px;
    background-color: currentColor;
    background-image: none;
    mask-image: url("../img/sprite.svg#icon-info-new");
}

.debugUrl .icon-info-new {
    mask-image: url("/Content/themes/novapay/img/sprite.svg#icon-info-new");
}

.icon-info-new {
    mask-repeat: no-repeat;
    mask-size: contain;
}

.icon-export {
    display: inline-block;
    width: 16px;
    height: 16px;
    background-color: currentColor;
    background-image: none;
    mask-image: url("../img/sprite.svg#icon-export");
}

.debugUrl .icon-export {
    mask-image: url("/Content/themes/novapay/img/sprite.svg#icon-export");
}

.icon-export {
    mask-repeat: no-repeat;
    mask-size: contain;
}

.icon-send-payment-new {
    display: inline-block;
    width: 24px;
    height: 24px;
    background-color: currentColor;
    background-image: none;
    mask-image: url("../img/sprite.svg#icon-send-payment-new");
}

.debugUrl .icon-send-payment-new {
    mask-image: url("/Content/themes/novapay/img/sprite.svg#icon-send-payment-new");
}

.icon-send-payment-new {
    mask-repeat: no-repeat;
    mask-size: contain;
}

.icon-clear-input {
    display: inline-block;
    width: 24px;
    height: 24px;
    background-color: currentColor;
    background-image: none;
    mask-image: url("../img/sprite.svg#icon-clear-input");
}

.debugUrl .icon-clear-input {
    mask-image: url("/Content/themes/novapay/img/sprite.svg#icon-clear-input");
}

.icon-clear-input {
    mask-repeat: no-repeat;
    mask-size: contain;
}

.icon-clear-xSvg {
    display: inline-block;
    width: 24px;
    height: 24px;
    background-color: currentColor;
    background-image: none;
    mask-image: url("../img/sprite.svg#icon-clear-xSvg");
}

.debugUrl .icon-clear-xSvg {
    mask-image: url("/Content/themes/novapay/img/sprite.svg#icon-clear-xSvg");
}

.icon-clear-xSvg {
    mask-repeat: no-repeat;
    mask-size: contain;
}

.icon-calendar-svg {
    display: inline-block;
    width: 24px;
    height: 24px;
    background-color: currentColor;
    background-image: none;
    mask-image: url("../img/sprite.svg#icon-calendar-svg");
}

.debugUrl .icon-calendar-svg {
    mask-image: url("/Content/themes/novapay/img/sprite.svg#icon-calendar-svg");
}

.icon-calendar-svg {
    mask-repeat: no-repeat;
    mask-size: contain;
}

.icon-status-clock-svg {
    display: inline-block;
    width: 24px;
    height: 24px;
    background-color: currentColor;
    background-image: none;
    mask-image: url("../img/sprite.svg#icon-status-clock-svg");
}

.debugUrl .icon-status-clock-svg {
    mask-image: url("/Content/themes/novapay/img/sprite.svg#icon-status-clock-svg");
}

.icon-status-clock-svg {
    mask-repeat: no-repeat;
    mask-size: contain;
}

.icon-status-recall-svg {
    display: inline-block;
    width: 24px;
    height: 24px;
    background-color: currentColor;
    background-image: none;
    mask-image: url("../img/sprite.svg#icon-status-recall-svg");
}

.debugUrl .icon-status-recall-svg {
    mask-image: url("/Content/themes/novapay/img/sprite.svg#icon-status-recall-svg");
}

.icon-status-recall-svg {
    mask-repeat: no-repeat;
    mask-size: contain;
}

.icon-status-checkmark-svg {
    display: inline-block;
    width: 24px;
    height: 24px;
    background-color: currentColor;
    background-image: none;
    mask-image: url("../img/sprite.svg#icon-status-checkmark-svg");
}

.debugUrl .icon-status-checkmark-svg {
    mask-image: url("/Content/themes/novapay/img/sprite.svg#icon-status-checkmark-svg");
}

.icon-status-checkmark-svg {
    mask-repeat: no-repeat;
    mask-size: contain;
}

.icon-open-banking-svg {
    display: inline-block;
    width: 24px;
    height: 24px;
    background-color: currentColor;
    background-image: none;
    mask-image: url("../img/sprite.svg#icon-open-banking-svg");
}

.debugUrl .icon-open-banking-svg {
    mask-image: url("/Content/themes/novapay/img/sprite.svg#icon-open-banking-svg");
}

.icon-open-banking-svg {
    mask-repeat: no-repeat;
    mask-size: contain;
}

.icon-small-card-novapay {
    background: url("../img/newDesign/icon/icon-small-card-novapay.svg") no-repeat center;
}

.debugUrl .icon-small-card-novapay {
    background: url("/Content/themes/novapay/img/newDesign/icon/icon-small-card-novapay.svg") no-repeat center;
}

.error-notification-icon {
    background: url("../img/newDesign/icon/triangle.exclamation.svg") no-repeat center;
}

    .error-notification-icon.debugUrl {
        background: url("/Content/themes/novapay/img/newDesign/icon/triangle.exclamation.svg") no-repeat center;
    }

.sing-green-icon {
    background: url("../img/newDesign/icon/icon-sing.svg") no-repeat center;
}

    .sing-green-icon.debugUrl {
        background: url("/Content/themes/novapay/img/newDesign/icon/icon-sing.svg") no-repeat center;
    }

.skeleton {
    position: relative;
}

.skeleton-active::before {
    content: "";
    position: absolute;
    top: -1px;
    left: -1px;
    right: -1px;
    bottom: -1px;
    background: linear-gradient(90deg, #F0F0F0 25%, #FFF 50%, rgb(240, 240, 240) 75%);
    border-radius: 4px;
    background-size: 200% 100%;
    animation: skeleton-loading 2.2s infinite;
    z-index: 11;
    border-radius: 4px;
    height: calc(100% + 2px);
}

.skeleton-active > * {
    height: 100%;
    visibility: hidden;
    pointer-events: none;
}

@keyframes skeleton-loading {
    0% {
        background-position: 200% 0;
    }

    100% {
        background-position: -200% 0;
    }
}

.newDesign .table-loader {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    z-index: 1000;
    display: none;
    background: rgba(255, 255, 255, 0.6);
    backdrop-filter: blur(4px);
    z-index: 10000;
}

    .newDesign .table-loader:before {
        position: absolute;
        content: "";
        display: block;
        top: 50%;
        left: calc(50% - 25px);
        width: 50px;
        height: 50px;
        background: url("../img/newDesign/spinner-loading.png") no-repeat center;
        animation: rotate 1s linear infinite;
        transform: translate(-50%, -50%);
    }

.debugUrl .newDesign .table-loader:before {
    background: url("/Content/themes/novapay/img/newDesign/spinner-loading.png") no-repeat center;
}

.modal-loading {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    z-index: 1000;
    display: none;
    border-radius: 0.75rem;
    background: rgba(255, 255, 255, 0.6);
    backdrop-filter: blur(4px);
    z-index: 10000;
}

    .modal-loading:before {
        position: absolute;
        content: "";
        display: block;
        top: 50%;
        left: calc(50% - 25px);
        width: 50px;
        height: 50px;
        background: url("../img/newDesign/spinner-loading.png") no-repeat center;
        animation: rotate 1s linear infinite;
        transform: translate(-50%, -50%);
    }

.debugUrl .modal-loading:before {
    background: url("/Content/themes/novapay/img/newDesign/spinner-loading.png") no-repeat center;
}

.qr-scanner-modal__header, .qr-scanner-modal__actions {
    display: flex;
    justify-content: space-between;
}

.qr-scanner-modal__header {
    padding-bottom: 1.5rem;
}

.qr-scanner-modal .qr-scanner__video-container {
    border: 1px solid #DBDFE4;
}

.newDesign .auth,
.newDesign .change-password {
    display: flex;
    padding: 1.5rem 0;
    height: 100%;
}

.newDesign .auth__errors-list,
.newDesign .change-password__errors-list {
    margin-bottom: -25px;
    padding-top: 10px !important;
}

    .newDesign .auth__errors-list .line2,
    .newDesign .change-password__errors-list .line2 {
        padding-left: 0;
    }

    .newDesign .auth__errors-list .icon-status-error,
    .newDesign .change-password__errors-list .icon-status-error {
        display: none;
    }

    .newDesign .auth__errors-list .text,
    .newDesign .change-password__errors-list .text {
        margin-left: 0;
        font-size: 13px;
    }

.newDesign .auth__field,
.newDesign .change-password__field {
    position: relative;
}

.newDesign .auth__invalid-feedback,
.newDesign .change-password__invalid-feedback {
    position: absolute;
    bottom: -1.25rem;
    color: #EB4235;
    font-size: 0.75rem;
    font-weight: 400;
    max-height: 25px;
}

@media (max-width: 992px) {
    .newDesign .auth,
    .newDesign .change-password {
        padding-left: 0;
        padding-right: 0;
    }
}

@media (max-width: 768px) {
    .newDesign .auth,
    .newDesign .change-password {
        padding-top: 0;
    }
}

.newDesign .auth__login .form-check {
    position: relative;
    display: flex;
    margin-top: 0.5rem;
}

    .newDesign .auth__login .form-check .check {
        position: absolute;
        float: none;
    }

    .newDesign .auth__login .form-check span {
        position: relative;
        float: none;
        font-size: 0;
        height: 1rem;
        width: 1rem;
    }

        .newDesign .auth__login .form-check span::after, .newDesign .auth__login .form-check span::before {
            content: "";
            position: absolute;
            height: 1.125rem;
            width: 1.125rem;
            left: 0;
            top: 50%;
            transform: translateY(-50%);
        }

        .newDesign .auth__login .form-check span::before {
            border-radius: 0.25rem;
            border: 1px solid #DBDFE4;
            background: #fff;
            transition: background 0.42s ease, border-color 0.3s ease;
        }

        .newDesign .auth__login .form-check span::after {
            background: url("../img/newDesign/icon/ico-checkbox.svg") no-repeat center center;
            opacity: 0;
            transition: opacity 0.42s ease;
        }

.debugUrl .newDesign .auth__login .form-check span::after {
    background: url("/Content/themes/novapay/img/newDesign/icon/ico-checkbox.svg") no-repeat;
}

.newDesign .auth__login .form-check input[type=checkbox] {
    position: absolute;
    opacity: 0;
    z-index: -1;
}

    .newDesign .auth__login .form-check input[type=checkbox]:checked ~ span::after {
        opacity: 1;
    }

.newDesign .auth__login .form-check-label {
    position: relative;
    padding-left: 1.5rem;
    margin: 0 !important;
    float: none !important;
    color: #000000;
    font-family: "Fixel Text", "Fixel Display", "Helvetica", "Arial", sans-serif;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.2;
    z-index: 1;
}

.auth-slick {
    display: flex;
    height: 100%;
    align-items: center;
    justify-content: center;
    width: 100%;
    position: relative;
}

@media (max-width: 1700px) {
    .auth-slick {
        width: 50%;
    }
}

.auth-slick__slider {
    max-height: 100vh;
    overflow: hidden;
    background-color: #873DDC;
    border-radius: 16px;
}

    .auth-slick__slider.slick-initialized .slider-item {
        display: flex;
    }

    .auth-slick__slider .slider-item {
        position: relative;
        align-items: center;
        justify-content: center;
        min-height: 200px;
        max-height: 100vh;
        text-align: center;
        overflow: hidden;
        color: white;
    }

@media (max-width: 768px) {
    .auth-slick__slider .slider-item {
        min-height: 150px;
    }
}

.auth-slick__slider .slider-item img {
    max-height: 100%;
    width: auto;
    object-fit: contain;
    max-width: 402px;
}

.auth-slick__slider .slider-item__bottom-content {
    position: absolute;
    bottom: 10%;
    left: 0;
    width: 100%;
    display: flex;
    justify-content: center;
    flex-wrap: nowrap;
    flex-direction: column;
}

@media (max-width: 1200px) {
    .auth-slick__slider .slider-item__bottom-content {
        padding-bottom: 20px;
    }
}

.auth-slick__slider .slider-item__bottom-content.bottom-position {
    bottom: 5%;
}

@media (max-width: 1200px) {
    .auth-slick__slider .slider-item__bottom-content.bottom-position {
        padding-bottom: 20px;
    }
}

.auth-slick__slider .slider-item__title {
    margin-top: 0;
    margin-bottom: 0;
    padding-bottom: 16px;
}

@media (max-width: 1200px) {
    .auth-slick__slider .slider-item__title {
        padding-bottom: 8px;
    }
}

.auth-slick__slider .slider-item__subTitle {
    font-size: 14px;
}

.auth-slick__slider .slick-prev,
.auth-slick__slider .slick-next {
    padding: 36px 16px;
    background: rgba(244, 246, 247, 0.2);
    border-radius: 8px;
    transition: background-color 0.22s ease-out;
    z-index: 1;
}

    .auth-slick__slider .slick-prev:before,
    .auth-slick__slider .slick-next:before {
        content: "";
        position: absolute;
        top: 50%;
        left: 50%;
        height: 100%;
        width: 100%;
        transform: translate(-50%, -50%) rotate(0deg);
        background: url("../img/newDesign/icon/arrow.svg") no-repeat center;
    }

.debugUrl .auth-slick__slider .slick-prev:before,
.debugUrl .auth-slick__slider .slick-next:before {
    background: url("/Content/themes/novapay/img/newDesign/icon/arrow.svg") no-repeat center;
}

.auth-slick__slider .slick-prev:hover,
.auth-slick__slider .slick-next:hover {
    transition: background-color 0.42s ease-out;
    background: rgba(244, 246, 247, 0.5);
}

.auth-slick__slider .slick-prev {
    left: 20px;
}

.auth-slick__slider .slick-next {
    right: 20px;
}

    .auth-slick__slider .slick-next:before {
        transform: translate(-50%, -50%) rotate(180deg);
    }

.auth-slick__slider .slick-dots {
    display: flex;
    justify-content: center;
    align-items: center;
    bottom: 32px;
    left: 0;
}

    .auth-slick__slider .slick-dots li {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 16px;
        width: 16px;
        margin: 0;
    }

        .auth-slick__slider .slick-dots li:not(.auth-slick__slider .slick-dots li:last-of-type) {
            margin-right: 8px;
        }

        .auth-slick__slider .slick-dots li button {
            position: relative;
            height: 100%;
            width: 100%;
        }

            .auth-slick__slider .slick-dots li button:before {
                content: "";
                left: 50%;
                top: 50%;
                height: 16px;
                width: 16px;
                background: url("../img/newDesign/icon/slick-dot.svg") no-repeat center;
                transition: all 0.22s ease-out;
                border-radius: 50%;
                transform: translate(-50%, -50%);
            }

.debugUrl .auth-slick__slider .slick-dots li button:before {
    background: url("/Content/themes/novapay/img/newDesign/icon/slick-dot.svg") no-repeat center;
}

.auth-slick__slider .slick-dots .slick-active button:before {
    background: url("../img/newDesign/icon/slick-active-dot.svg") no-repeat center;
    transition: all 0.42s ease-out;
}

.debugUrl .auth-slick__slider .slick-dots .slick-active button:before {
    background: url("/Content/themes/novapay/img/newDesign/icon/slick-active-dot.svg") no-repeat center;
}

.auth-slick .slick-list {
    height: 100%;
    max-width: 60.938rem;
    max-height: 46.25rem;
}

    .auth-slick .slick-list .slick-track {
        height: 100%;
    }

@media (min-width: 1700px) {
    .auth-slick .slick-list .slick-track {
        min-width: 975px !important;
    }
}

.newDesign .auth-recovery__request, .newDesign .auth-recovery__form {
    flex-direction: column;
    width: 100%;
    background-color: #fff;
}

@media (max-width: 768px) {
    .newDesign .auth-recovery__request, .newDesign .auth-recovery__form {
        justify-content: center;
    }
}

.newDesign .auth-recovery__title {
    margin-top: 2rem;
}

.newDesign .auth-recovery__notification {
    margin-top: 0.75rem;
}

.newDesign .auth-recovery__banner {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-bottom: 44px;
}

.newDesign .auth-recovery__banner-bg {
    position: relative;
    width: 14.188rem;
    height: 14.188rem;
    padding: 0.75rem;
    margin-bottom: 2rem;
    background-color: #F5EDFF;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
}

    .newDesign .auth-recovery__banner-bg::after {
        content: "";
        position: absolute;
        top: 50%;
        left: 0;
        height: 100%;
        width: 100%;
        transform: translateY(-50%);
        background: url("../img/newDesign/recovery-banner.png") no-repeat center;
    }

.debugUrl .newDesign .auth-recovery__banner-bg::after {
    background: url("/Content/themes/novapay/img/newDesign/recovery-banner.png") no-repeat center;
}

.newDesign .auth-recovery .recovery-title {
    display: block;
    width: 100%;
    text-align: left;
}

.newDesign .auth-recovery .title-request {
    text-align: center;
}

.newDesign .auth-recovery .temporary-password {
    display: flex;
    margin-top: 1.5rem;
    padding: 0;
    font-size: 14px;
    font-weight: 500;
    border-color: transparent;
    border: none;
    background-color: inherit !important;
}

.newDesign .auth-recovery .recovery-instruction {
    display: block;
    padding-top: 0.75rem;
    font-size: 16px;
}

.newDesign .auth-recovery .notificatio-info {
    display: block;
    text-align: center;
    font-size: 16px;
    color: #464B53;
}

.newDesign .auth-recovery .btn-remember-password {
    display: flex;
    margin-top: 1.5rem;
    padding: 0;
    font-size: 14px;
    font-weight: 500;
    border-color: transparent;
    border: none;
    background-color: inherit !important;
}

.newDesign .recovery-title,
.newDesign .recovery-instruction,
.newDesign .temporary-password {
    display: none;
}

.newDesign .change-password {
    display: flex;
}

.newDesign .change-password__column {
    display: flex;
    justify-content: center;
    align-items: center;
}

@media (max-width: 768px) {
    .newDesign .change-password__column {
        padding: 0;
    }
}

.newDesign .change-password__forms-container {
    position: relative;
    border-radius: 0.75rem;
    background: #FFF;
    max-width: 450px;
    width: 100%;
    box-shadow: 0px 0.25rem 34px 0px rgba(191, 195, 204, 0.3);
    padding: 1.5rem 1.5rem 2rem;
}

@media (max-width: 992px) {
    .newDesign .change-password__forms-container {
        padding-left: 16px;
        padding-right: 16px;
    }
}

@media (max-width: 768px) {
    .newDesign .change-password__forms-container {
        height: 100%;
        display: flex;
        align-items: center;
        border-radius: 0;
        justify-content: center;
        flex-direction: column;
    }
}

@media (max-width: 479px) {
    .newDesign .change-password__forms-container {
        padding-left: 0;
        padding-right: 0;
        box-shadow: none;
    }
}

.newDesign .change-password__form-group {
    width: 100%;
}

.newDesign .change-password__form-wrapper {
    margin-top: 2rem;
}

    .newDesign .change-password__form-wrapper .invalid-feedback.d-block {
        display: block !important;
    }

.newDesign .change-password__field-wrapper {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.newDesign .change-password__field {
    position: relative;
    margin-bottom: 0;
    display: flex;
    flex-direction: column;
}

    .newDesign .change-password__field .icon-show-password,
    .newDesign .change-password__field .icon-hide-password {
        position: absolute;
        right: 11px;
        top: auto;
        bottom: 11px;
    }

    .newDesign .change-password__field .icon-show-password {
        background: url("../img/newDesign/icon/Input-eye.svg") no-repeat center;
        color: red;
    }

.debugUrl .newDesign .change-password__field .icon-show-password {
    background: url("/Content/themes/novapay/img/newDesign/icon/Input-eye.svg") no-repeat center;
}

.newDesign .change-password .form-control {
    margin-top: 0.5rem;
}

.newDesign .change-password .btm-save-password {
    margin-top: 3rem;
    width: 100%;
    cursor: pointer;
}

.newDesign .change-password .invalid-feedback.green {
    color: #4CAF50;
}

.newDesign .change-password .invalid-feedback.orange {
    color: orange;
}

.newDesign .change-password .invalid-feedback.red {
    color: #EB4235;
}

.newDesign #recoveryModal .modal-dialog {
    min-width: 400px;
    max-width: 560px;
}

@media (max-width: 576px) {
    .newDesign #recoveryModal .modal-dialog {
        top: 50%;
        transform: translate(0, -50%);
        bottom: inherit;
        border-radius: 12px;
        min-width: inherit;
    }
}

.newDesign #recoveryModal .modal-dialog .modal-content {
    max-width: 100%;
}

.newDesign #recoveryModal .modal-recovery__header {
    display: flex;
    position: relative;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
}

.newDesign #recoveryModal .modal-recovery__header-title {
    color: #32383c;
    font-size: 20px;
    font-style: normal;
    font-weight: 600;
    line-height: 24px;
}

.newDesign #recoveryModal .modal-recovery__header-close {
    padding: 5px;
}

    .newDesign #recoveryModal .modal-recovery__header-close i {
        background-color: #767F8A;
    }

.newDesign #recoveryModal .modal-recovery__content-title {
    color: #32383c;
    font-size: 15px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px;
    max-width: 520px;
}

.newDesign #recoveryModal .modal-recovery__content-info {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 16px;
    padding: 20px;
    border-radius: 12px;
    border: 1px solid #DBDFE4;
    background: #FFF;
}

.newDesign #recoveryModal .modal-recovery__phone {
    color: #32383c;
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: 18px;
}

.newDesign #recoveryModal .modal-recovery__phone-line {
    display: flex;
    align-items: center;
    gap: 8px;
}

    .newDesign #recoveryModal .modal-recovery__phone-line i {
        width: 20px;
        height: 20px;
        background-color: #767F8A;
    }

.newDesign #recoveryModal .modal-recovery__web-line {
    display: flex;
    align-items: center;
    gap: 8px;
}

    .newDesign #recoveryModal .modal-recovery__web-line i {
        width: 20px;
        height: 20px;
        background-color: #767F8A;
    }

.newDesign #recoveryModal .modal-recovery__link {
    color: #32383c;
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    text-decoration-line: underline;
    text-decoration-style: solid;
    text-decoration-skip-ink: auto;
    text-decoration-thickness: auto;
    text-underline-offset: auto;
    text-underline-position: from-font;
}

.newDesign #recoveryModal .modal-recovery__subtitle {
    margin-left: 28px;
    color: #767F8A;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 16px;
}

.newDesign .confirm {
    display: flex;
    padding: 24px 0px;
    height: 100%;
    gap: 15px;
}

@media (max-width: 767px) {
    .newDesign .confirm {
        padding: 24px 0 100px 0;
    }
}

.newDesign .confirm__column {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    width: 100%;
}

@media (max-width: 1700px) {
    .newDesign .confirm__column {
        justify-content: center;
    }
}

@media (min-width: 1700px) {
    .newDesign .confirm__column {
        align-items: end;
    }
}

.newDesign .confirm__auth {
    padding: 24px;
    max-width: 450px;
    width: 100%;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0px 4px 34px 0px rgba(191, 195, 204, 0.3);
}

.newDesign .confirm__description {
    margin-top: 12px;
    max-width: 380px;
}

.newDesign .confirm__form {
    margin-top: 32px;
    display: flex;
    flex-direction: column;
    gap: 32px;
}

.newDesign .confirm__field {
    display: flex;
    flex-direction: column;
}

.newDesign .confirm__inp {
    margin-top: 8px;
}

.newDesign .confirm__sign-in {
    width: 100%;
    margin-top: 40px;
}

.newDesign .confirm__methods {
    padding: 24px 24px 32px;
    max-width: 450px;
    width: 100%;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0px 4px 34px 0px rgba(191, 195, 204, 0.3);
}

.newDesign .confirm__subtitle {
    text-align: center;
}

.newDesign .confirm__action {
    margin-top: 12px;
    display: flex;
    gap: 12px;
    width: 100%;
}

.newDesign .confirm__btn-method {
    width: 100%;
}

.newDesign .confirm-sms__wrap-code {
    position: relative;
    margin-top: 8px;
    display: flex;
    gap: 16px;
}

.newDesign .confirm-sms__inp-validation {
    position: absolute;
    top: 39px;
}

.newDesign .confirm-sms__inp, .newDesign .confirm-sms__time-wrap {
    width: 50%;
}

.newDesign .confirm-sms__sign-in {
    margin-top: 10px;
    width: 100%;
}

.newDesign .confirm-sms__sign-in-confirm {
    margin-top: 40px;
    width: 100%;
}

.newDesign .confirm-sms__time-wrap {
    display: flex;
    align-items: center;
}

.newDesign .confirm-sms__resend {
    padding: 11px 13px;
}

.newDesign .confirm-sms__timer {
    color: #202427;
    font-family: "Fixel Text", "Fixel Display", "Helvetica", "Arial", sans-serif;
    font-size: 12px;
    font-style: normal;
    font-weight: 500;
    line-height: 16px;
}

.newDesign .confirm-sms__timer-text {
    font-weight: 400;
}

@media (max-width: 479px) {
    .newDesign .container {
        padding: 0;
        height: 100%;
        background: #FFF;
    }

    .newDesign .confirm__column {
        gap: 0;
    }

    .newDesign .confirm__auth {
        padding: 44px 0 36px;
        box-shadow: none;
        border-radius: 0;
    }

    .newDesign .confirm__methods {
        padding: 0 0 32px;
        box-shadow: none;
        border-radius: 0;
    }

    .newDesign .confirm__description {
        font-size: 14px;
    }

    .newDesign .confirm__action {
        flex-direction: column;
        gap: 12px;
    }

    .newDesign .confirm-sms__wrap-code {
        gap: 14px;
    }

    .newDesign .confirm-sms__inp {
        width: 40%;
    }

    .newDesign .confirm-sms__time-wrap {
        width: 60%;
    }

    .newDesign .confirm-sms__resend {
        width: 100%;
        padding: 11px;
    }
}

body[data-design=new] .newDesign .confirm-ecp__enterprise, body[data-design=new] .newDesign .confirm-ecp__container, body[data-design=new] .newDesign .confirm-ecp__password-wrap {
    padding-left: 0px;
    padding-right: 0px;
}

body[data-design=new] .newDesign .confirm-ecp__text-chose {
    display: none;
}

body[data-design=new] .newDesign .confirm-ecp__br {
    display: none;
}

body[data-design=new] .newDesign .confirm-ecp__enterprise {
    display: flex;
    flex-direction: column;
    margin-bottom: 16px;
}

body[data-design=new] .newDesign .confirm-ecp__select-enterprise {
    width: 100%;
    padding-left: 0;
}

    body[data-design=new] .newDesign .confirm-ecp__select-enterprise .k-dropdown-wrap {
        border-radius: 8px !important;
        border: 1px solid #DBDFE4;
        background: #FFF;
        display: flex;
        align-items: center;
        padding: 8px 35px 8px 12px;
        height: 40px;
        overflow: hidden;
        color: #32383c;
        font-feature-settings: "case" on;
        text-overflow: ellipsis;
        font-family: "Fixel Text", "Fixel Display", "Helvetica", "Arial", sans-serif;
        font-size: 15px;
        font-style: normal;
        font-weight: 400;
        line-height: 24px;
    }

    body[data-design=new] .newDesign .confirm-ecp__select-enterprise .k-dropdown {
        border: 1px solid transparent !important;
        border-radius: 8px !important;
    }

        body[data-design=new] .newDesign .confirm-ecp__select-enterprise .k-dropdown:focus, body[data-design=new] .newDesign .confirm-ecp__select-enterprise .k-dropdown:hover {
            border: 1px solid #690DD3 !important;
        }

    body[data-design=new] .newDesign .confirm-ecp__select-enterprise .k-list > .k-state-selected.k-state-focused {
        -webkit-box-shadow: none;
        box-shadow: none;
        overflow: hidden;
        color: #32383c !important;
        text-overflow: ellipsis;
        font-family: "Fixel Text", "Fixel Display", "Helvetica", "Arial", sans-serif;
        font-size: 14px;
        font-style: normal;
        font-weight: 500;
        line-height: 18px;
        border-bottom: 1px solid #DBDFE4;
        background: #f4f6f7 !important;
    }

    body[data-design=new] .newDesign .confirm-ecp__select-enterprise .k-animation-container {
        max-width: 400px !important;
        width: 90%;
    }

@media (max-width: 470px) {
    body[data-design=new] .newDesign .confirm-ecp__select-enterprise .k-animation-container {
        width: 89% !important;
    }
}

body[data-design=new] .newDesign .confirm-ecp__select-enterprise .k-animation-container .k-list-container {
    width: 99% !important;
}

@media (max-width: 470px) {
    body[data-design=new] .newDesign .confirm-ecp__select-enterprise .k-animation-container .k-list-container {
        width: 100% !important;
    }
}

body[data-design=new] .newDesign .confirm-ecp__select-enterprise .k-icon {
    transition: transform 0.3s ease;
    pointer-events: none;
    margin-top: 7px;
    background: url("../img/newDesign/icon/arrow_down_small.svg") no-repeat center !important;
}

.debugUrl body[data-design=new] .newDesign .confirm-ecp__select-enterprise .k-icon {
    background: url("/Content/themes/novapay/img/newDesign/icon/arrow_down_small.svg") no-repeat center !important;
}

body[data-design=new] .newDesign .confirm-ecp__select-enterprise .k-icon {
    transform-origin: center;
}

    body[data-design=new] .newDesign .confirm-ecp__select-enterprise .k-icon:hover {
        transform: rotate(180deg);
    }

body[data-design=new] .newDesign .confirm-ecp__select-enterprise .k-select:focus,
body[data-design=new] .newDesign .confirm-ecp__select-enterprise .k-select:hover + .k-icon {
    transform: translateY(-50%) rotate(180deg);
    fill: #007bff;
}

body[data-design=new] .newDesign .confirm-ecp__validation-text {
    margin-top: 16px;
}

body[data-design=new] .newDesign .confirm-ecp__type-wrap {
    min-width: 100%;
    display: flex;
    padding: 4px;
    gap: 4px;
    flex-direction: row;
    border-radius: 8px;
    border: 1px solid #DBDFE4;
    background: #FFF;
    margin-bottom: 16px;
}

body[data-design=new] .newDesign .confirm-ecp__container {
    width: 100%;
    flex-wrap: wrap;
}

body[data-design=new] .newDesign .confirm-ecp__type-ecp {
    display: flex;
    flex-direction: column;
}

body[data-design=new] .newDesign .confirm-ecp__btn {
    width: 50%;
    border-radius: 8px;
    background: #FFF;
    color: #767F8A;
    font-family: "Fixel Text", "Fixel Display", "Helvetica", "Arial", sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: 20px;
    border: none;
    text-transform: capitalize;
}

    body[data-design=new] .newDesign .confirm-ecp__btn:hover {
        border: 1px solid #DBDFE4 !important;
        background: #F5EDFF !important;
        color: #690DD3 !important;
        border-radius: 4px !important;
        text-transform: capitalize !important;
    }

@media (max-width: 600px) {
    body[data-design=new] .newDesign .confirm-ecp__btn {
        font-size: 16px !important;
    }
}

body[data-design=new] .newDesign .confirm-ecp__password-wrap {
    display: flex;
    flex-direction: column;
    margin-top: 24px;
    margin-bottom: -12px;
}

    body[data-design=new] .newDesign .confirm-ecp__password-wrap .icon {
        position: relative !important;
        left: 0px;
        top: 10px !important;
    }

body[data-design=new] .newDesign .confirm-ecp__password-block {
    width: 100%;
    margin-top: 0 !important;
    padding-left: 0;
}

body[data-design=new] .newDesign .confirm-ecp__lable-text {
    display: block !important;
    text-align: start;
    margin-bottom: 8px;
}

body[data-design=new] .newDesign .confirm-ecp__action-btns {
    display: none;
}

body[data-design=new] .newDesign .confirm-ecp__description {
    margin-top: 8px;
    color: #767F8A;
    font-family: "Fixel Text", "Fixel Display", "Helvetica", "Arial", sans-serif;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 16px;
}

body[data-design=new] .newDesign .confirm-ecp__token-descriotion {
    display: block !important;
}

body[data-design=new] .newDesign .confirm-ecp__fake-field {
    display: block !important;
    width: 47%;
    border-radius: 8px;
    border: 1px solid #DBDFE4;
    background: #f4f6f7;
    height: 37.5px;
    margin-bottom: -37.5px;
}

body[data-design=new] .newDesign .confirm-ecp__form-control {
    height: 40px !important;
    padding: 8px 12px !important;
    width: 100% !important;
    font-size: 15px !important;
    color: #32383c !important;
    max-width: 100% !important;
}

    body[data-design=new] .newDesign .confirm-ecp__form-control:focus {
        outline: none;
    }

body[data-design=new] .newDesign .confirm-ecp__icon-password {
    display: none;
}

body[data-design=new] .newDesign .confirm-ecp__file-block {
    width: 100%;
    padding-left: 0;
}

    body[data-design=new] .newDesign .confirm-ecp__file-block .k-upload {
        display: flex;
        flex-direction: row-reverse;
        gap: 16px;
        background: none;
        border: none;
        height: 37.5px;
        margin-bottom: -1px;
    }

    body[data-design=new] .newDesign .confirm-ecp__file-block .k-upload-button {
        border-radius: 8px !important;
        border: 1px solid #DBDFE4;
        display: flex;
        padding: 8px 16px;
        justify-content: center;
        align-items: center;
        width: 50%;
        color: #202427;
        font-feature-settings: "case" on;
        font-family: "Fixel Text", "Fixel Display", "Helvetica", "Arial", sans-serif;
        font-size: 15px;
        font-style: normal;
        font-weight: 600;
        line-height: 18px;
        max-height: 40px;
    }

@media (max-width: 450px) {
    body[data-design=new] .newDesign .confirm-ecp__file-block .k-upload-button {
        font-size: 13px;
    }
}

body[data-design=new] .newDesign .confirm-ecp__file-block .k-upload-button::before {
    position: relative;
    content: "";
    width: 20px;
    height: 20px;
    left: -8px;
    background: url("../img/newDesign/icon/arrow-down.svg") no-repeat;
}

.debugUrl body[data-design=new] .newDesign .confirm-ecp__file-block .k-upload-button::before {
    background: url("/Content/themes/novapay/img/newDesign/icon/arrow-down.svg") no-repeat;
}

body[data-design=new] .newDesign .confirm-ecp__file-block .k-upload-files {
    display: flex;
    flex-direction: column;
    line-height: normal;
    border-width: 0;
    gap: 5px;
    width: 48%;
}

body[data-design=new] .newDesign .confirm-ecp__file-block .k-file {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 7px 12px;
    border-radius: 8px;
    border: 1px solid var(--System-Gray-NEW-300---Stroke, #DBDFE4);
    background: #f4f6f7;
    font-family: "Fixel Text", "Fixel Display", "Helvetica", "Arial", sans-serif;
    font-size: 15px;
    font-style: normal;
    font-weight: 400;
}

    body[data-design=new] .newDesign .confirm-ecp__file-block .k-file .k-filename {
        padding-bottom: 0;
        margin-left: 0;
    }

body[data-design=new] .newDesign .confirm-ecp__file-block .k-i-exe {
    display: none;
}

body[data-design=new] .newDesign .k-widget.k-dropdown[aria-expanded=false] .k-icon.k-i-arrow-s {
    transform: rotate(180deg);
    transition: transform 0.3s;
}

body[data-design=new] .newDesign .k-animation-container .k-list-container {
    max-width: 100% !important;
}

@media (max-width: 991px) {
    body[data-design=new] .newDesign body .tablet .k-animation-container {
        max-width: 100% !important;
        width: 100%;
    }
}

body[data-design=new] .newDesign .selected {
    border: 1px solid #DBDFE4 !important;
    border-radius: 4px !important;
    background: #F5EDFF !important;
    color: #690DD3 !important;
    text-transform: capitalize !important;
}

body[data-design=new] .newDesign div ::-webkit-scrollbar-track {
    background: #e8ecef;
    -webkit-border-radius: 10px;
    border-radius: 10px;
}

body[data-design=new] .newDesign div ::-webkit-scrollbar-thumb {
    -webkit-border-radius: 10px;
    border-radius: 10px;
    background: #A8ADB4;
}

    body[data-design=new] .newDesign div ::-webkit-scrollbar-thumb:window-inactive {
        background: #A8ADB4;
    }

body[data-design=new] .newDesign .options-subtitle {
    color: #767F8A;
    font-family: "Fixel Text", "Fixel Display", "Helvetica", "Arial", sans-serif;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 16px;
}

body[data-design=new] .newDesign .options-title {
    color: #32383c;
    text-overflow: ellipsis;
    font-family: "Fixel Text", "Fixel Display", "Helvetica", "Arial", sans-serif;
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: 18px;
}

@media (max-width: 500px) {
    body[data-design=new] .newDesign .k-filename {
        min-width: 120px;
    }
}

.new-popup .k-window-titlebar {
    background: #690DD3;
    font-family: "Fixel Text", "Fixel Display", "Helvetica", "Arial", sans-serif;
}

    .new-popup .k-window-titlebar span {
        font-size: 17px !important;
        max-width: 85%;
    }

.new-popup .generalDetails {
    font-family: "Fixel Text", "Fixel Display", "Helvetica", "Arial", sans-serif;
    font-size: 17px;
    font-style: normal;
    font-weight: 500;
    color: #32383c;
    line-height: 15px;
}

.new-popup .btn {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 7px 16px;
    border-radius: 8px;
    line-height: 1.2;
    text-align: center;
    font-family: "Fixel Text", "Fixel Display", "Helvetica", "Arial", sans-serif;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
}

    .new-popup .btn__disabled, .new-popup .btn:disabled {
        pointer-events: none;
        cursor: not-allowed;
        opacity: 0.5;
    }

    .new-popup .btn:focus {
        outline: none;
        transition: all 0.42s ease-out;
    }

    .new-popup .btn:focus-visible {
        outline: none;
        border: none;
    }

.new-popup .btn-primary-bg {
    border: none;
    background-color: #690DD3;
    color: #FFF;
    transition: background-color 0.22s ease-out;
    box-shadow: none;
}

    .new-popup .btn-primary-bg:hover {
        background-color: rgb(51.0416666667%, 13.1915266106%, 94.6516106443%);
        transition: background-color 0.42s ease-out;
    }

    .new-popup .btn-primary-bg:active {
        background-color: rgb(31.8014705882%, 3.93732493%, 63.9058123249%);
        transition: background-color 0.42s ease-out;
    }

.newDesign .auth__column {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
}

@media (max-width: 1700px) {
    .newDesign .auth__column {
        justify-content: center;
    }
}

@media (min-width: 1700px) {
    .newDesign .auth__column {
        justify-content: end;
    }
}

@media (max-width: 768px) {
    .newDesign .auth__column {
        padding: 0;
    }
}

.newDesign .auth-forms-container {
    position: relative;
    border-radius: 12px;
    background: #FFF;
    max-width: 450px;
    width: 100%;
    box-shadow: 0px 4px 34px 0px rgba(191, 195, 204, 0.3);
    padding: 24px 24px 32px;
}

@media (max-width: 992px) {
    .newDesign .auth-forms-container {
        padding-left: 16px;
        padding-right: 16px;
    }
}

@media (max-width: 768px) {
    .newDesign .auth-forms-container {
        height: 100%;
        display: flex;
        align-items: center;
        border-radius: 0;
        justify-content: center;
        flex-direction: column;
    }
}

@media (max-width: 479px) {
    .newDesign .auth-forms-container {
        box-shadow: none;
        padding-left: 0;
        padding-right: 0;
    }
}

.newDesign .auth__login {
    width: 100%;
}

    .newDesign .auth__login.auth-recovery .auth__title {
        display: none;
    }

    .newDesign .auth__login.auth-recovery .forgot-password {
        display: none;
    }

    .newDesign .auth__login.auth-recovery .login-field {
        position: absolute;
        width: 0;
        height: 0;
        top: 0;
        padding: 0;
        margin: 0;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0;
    }

.newDesign .auth__form {
    margin-top: 32px;
}

    .newDesign .auth__form .capture {
        width: 100%;
        height: auto;
        padding: 0.5rem;
        margin-top: 0.5rem;
    }

        .newDesign .auth__form .capture table, .newDesign .auth__form .capture tbody {
            width: 100%;
        }

        .newDesign .auth__form .capture #CaptchaImage {
            margin: 0 auto;
        }

        .newDesign .auth__form .capture #CaptchaInputText {
            padding: 0.5rem 0.75rem;
            width: 100%;
            border-radius: 0.5rem;
            border-radius: 0.5rem;
            border: 1px solid #DBDFE4;
            background: #FFF;
            color: #32383c;
            font-family: "Fixel Text", "Fixel Display", "Helvetica", "Arial", sans-serif;
            font-size: 15px;
            font-style: normal;
            font-weight: 400;
            line-height: 1.5rem;
        }

            .newDesign .auth__form .capture #CaptchaInputText:focus {
                outline: none;
            }

.newDesign .auth__field {
    position: relative;
    margin-top: 24px;
    display: flex;
    flex-direction: column;
}

    .newDesign .auth__field .icon-show-password,
    .newDesign .auth__field .icon-hide-password {
        position: absolute;
        right: 11px;
        top: 33px;
    }

    .newDesign .auth__field .icon-show-password {
        background: url("../img/newDesign/icon/Input-eye.svg") no-repeat center;
    }

        .newDesign .auth__field .icon-show-password.debugUrl {
            background: url("/Content/themes/novapay/img/newDesign/icon/loader.png") no-repeat center center;
        }

    .newDesign .auth__field .icon-hide-password {
        background: url("../img/newDesign/icon/eye-close.svg") no-repeat center;
    }

        .newDesign .auth__field .icon-hide-password.debugUrl {
            background: url("/Content/themes/novapay/img/newDesign/icon/eye-close.svg") no-repeat center center;
        }

.newDesign .auth__inp-auth {
    margin-top: 8px;
}

.newDesign .auth__sign-in {
    cursor: pointer;
    margin-top: 48px;
    width: 100%;
}

.newDesign .forgot-password {
    display: flex;
    margin-top: 24px;
    padding: 0;
    font-size: 14px;
    font-weight: 500;
    border-color: transparent;
    border: none;
    background-color: initial !important;
}

    .newDesign .forgot-password:hover, .newDesign .forgot-password:focus, .newDesign .forgot-password:active {
        border-color: transparent;
    }

@media (max-width: 768px) {
    body[data-design=new].open-dropdown-cell {
        overflow: hidden;
    }

        body[data-design=new].open-dropdown-cell .container-page {
            z-index: 3;
        }
}

.accounts.accounts-main {
    border-radius: 0.75rem;
}

.accounts__skeleton-wrap {
    min-height: 270px;
}

    .accounts__skeleton-wrap:not(skeleton-active) .accounts-td__loading {
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        width: 100%;
        z-index: 1000;
        display: none;
        background: rgba(255, 255, 255, 0.6);
        backdrop-filter: blur(4px);
        z-index: 1071;
    }

        .accounts__skeleton-wrap:not(skeleton-active) .accounts-td__loading:before {
            position: absolute;
            content: "";
            display: block;
            top: 50%;
            left: calc(50% - 25px);
            width: 50px;
            height: 50px;
            background: url("../img/newDesign/spinner-loading.png") no-repeat center;
            animation: rotate 1s linear infinite;
            transform: translate(-50%, -50%);
        }

.debugUrl .accounts__skeleton-wrap:not(skeleton-active) .accounts-td__loading:before {
    background: url("/Content/themes/novapay/img/newDesign/spinner-loading.png") no-repeat center;
}

@keyframes rotate {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

.accounts-td {
    position: relative;
    background-color: #fff;
    border-radius: 0.75rem;
    padding: 1.5rem;
    min-height: 18rem;
    font-weight: 500;
}

@media (max-width: 768px) {
    .accounts-td {
        padding: 1rem 0.75rem;
    }
}

.accounts-td .tooltip-text.tooltip-blocked-account {
    display: none;
    bottom: 2.5rem;
    left: 4rem;
}

.accounts-td__title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 1.5rem;
}

@media (max-width: 768px) {
    .accounts-td__title {
        padding-bottom: 1.75rem;
    }
}

.accounts-td__title h3 {
    font-weight: 500;
}

.accounts-td .archive-activity {
    position: relative;
    padding: 0.5rem 1rem;
    display: flex;
    align-items: center;
    height: fit-content;
    color: #690DD3;
    font-size: 15px;
    font-weight: 500;
    background: transparent;
    border-radius: 0.5rem;
    border: 1px solid transparent;
    cursor: pointer;
}

    .accounts-td .archive-activity span {
        position: relative;
        display: block;
    }

        .accounts-td .archive-activity span::before {
            content: "";
            display: inline-block;
            height: 1.25rem;
            width: 1.25rem;
            transform: translateY(-50%);
            position: absolute;
            top: 50%;
            left: -1.75rem;
            color: #690DD3;
        }

        .accounts-td .archive-activity span.show-archive::before {
            display: inline-block;
            width: 20px;
            height: 20px;
            background-color: currentColor;
            background-image: none;
            mask-image: url("../img/sprite.svg#icon-archive-show");
        }

.debugUrl .accounts-td .archive-activity span.show-archive::before {
    mask-image: url("/Content/themes/novapay/img/sprite.svg#icon-archive-show");
}

.accounts-td .archive-activity span.show-archive::before {
    mask-repeat: no-repeat;
    mask-size: contain;
}

.accounts-td .archive-activity span.hide-archive {
    display: none;
}

    .accounts-td .archive-activity span.hide-archive::before {
        display: inline-block;
        width: 20px;
        height: 20px;
        background-color: currentColor;
        background-image: none;
        mask-image: url("../img/sprite.svg#icon-archive-hidden");
    }

.debugUrl .accounts-td .archive-activity span.hide-archive::before {
    mask-image: url("/Content/themes/novapay/img/sprite.svg#icon-archive-hidden");
}

.accounts-td .archive-activity span.hide-archive::before {
    mask-repeat: no-repeat;
    mask-size: contain;
}

.accounts-td .archive-activity .archive-checkbox {
    width: 0;
    height: 0;
    opacity: 0;
}

    .accounts-td .archive-activity .archive-checkbox:checked ~ .archive-labels .hide-archive {
        display: block;
    }

    .accounts-td .archive-activity .archive-checkbox:checked ~ .archive-labels .show-archive {
        display: none;
    }

.accounts-td__list {
    display: block;
    margin-bottom: 2.5rem;
    border-radius: 0.5rem;
    border: 1px solid #DBDFE4;
}

@media (max-width: 992px) {
    .accounts-td__list {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        border: none;
        gap: 0.5rem;
    }
}

@media (max-width: 768px) {
    .accounts-td__list {
        grid-template-columns: repeat(1, 1fr);
        margin-bottom: 1rem;
    }
}

.accounts-td__row {
    display: grid;
    grid-template-columns: 2fr 2fr 1.5fr 1fr 0.5fr;
    gap: 10px;
    max-width: 100%;
    padding: 0.75rem;
}

@media (max-width: 1500px) {
    .accounts-td__row {
        grid-template-columns: 1.5fr 1fr 1fr 1fr 0.5fr;
    }
}

@media (max-width: 1160px) {
    .accounts-td__row {
        grid-template-columns: 2fr 1fr 1fr 1fr 0.5fr;
    }
}

.accounts-td__row:not(:last-of-type) {
    border-bottom: 1px solid #DBDFE4;
}

@media (max-width: 992px) {
    .accounts-td__row {
        position: relative;
        display: block;
        padding-top: 0;
        padding-bottom: 0;
        border-radius: 0.5rem;
        border: 1px solid #DBDFE4;
    }

        .accounts-td__row.active .cell-IBAN .icon-arrow-dropdown {
            transform: translateY(-50%) rotate(0deg);
        }

        .accounts-td__row.active .cell-balance:not(:last-of-type)::after {
            display: block;
        }

        .accounts-td__row.active .cell-status,
        .accounts-td__row.active .cell-actions {
            display: flex;
        }
}

.accounts-td__cell {
    position: relative;
    display: flex;
    align-items: center;
    text-align: left;
}

    .accounts-td__cell:before {
        display: none;
        content: attr(data-label);
        margin-right: 1rem;
        color: #767F8A;
        font-size: 12px;
    }

    .accounts-td__cell:last-of-type {
        justify-content: center;
    }

@media (max-width: 992px) {
    .accounts-td__cell.cell-generation-qr {
        flex-direction: row;
        align-items: center;
        position: relative;
    }

        .accounts-td__cell.cell-generation-qr::after {
            content: "";
            display: block;
            position: absolute;
            top: 0;
            left: 0;
            height: 1px;
            width: 100%;
            background: #EDEFF1;
        }
}

@media (max-width: 992px) {
    .accounts-td__cell {
        position: relative;
        flex-direction: column;
        align-items: start;
        padding: 0.75rem 0;
        gap: 0.25rem;
    }

        .accounts-td__cell.cell-status, .accounts-td__cell.cell-actions {
            display: none;
        }

        .accounts-td__cell:before {
            display: block;
            margin-bottom: 5px;
        }

        .accounts-td__cell.cell-balance:not(:last-of-type)::after {
            display: none;
        }

        .accounts-td__cell:not(:last-of-type)::after {
            content: "";
            display: block;
            position: absolute;
            bottom: 0;
            left: 0;
            height: 1px;
            width: 100%;
            background: #EDEFF1;
        }
}

.accounts-td__cell.cell-actions {
    cursor: pointer;
}

    .accounts-td__cell.cell-actions:before {
        display: none;
    }

.accounts-td__cell .icon-arrow-dropdown {
    display: none;
}

@media (max-width: 992px) {
    .accounts-td__cell .icon-arrow-dropdown {
        position: absolute;
        right: 5px;
        top: 47%;
        display: block;
        height: 1.5rem;
        width: 1.5rem;
        opacity: 1;
        transform: translateY(-50%) rotate(-180deg);
        transform-origin: center;
        transition: transform 0.32s ease-out;
    }
}

.accounts-td__header {
    text-align: left;
    background-color: #EDEFF1;
    border-top-right-radius: 0.5rem;
    border-top-left-radius: 0.5rem;
}

    .accounts-td__header .accounts-td__cell {
        padding: 0;
    }

    .accounts-td__header .cell-header {
        color: #767F8A;
        font-size: 12px;
    }

@media (max-width: 992px) {
    .accounts-td__header {
        display: none;
    }
}

.accounts-td .iban-container {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
}

    .accounts-td .iban-container span {
        display: block;
        width: 100%;
    }

    .accounts-td .iban-container .iban-block {
        width: fit-content;
        font-size: 15px;
        color: #690DD3;
        line-height: 1.6;
        user-select: none;
        cursor: pointer;
    }

        .accounts-td .iban-container .iban-block:after {
            content: attr(data-full-iban);
            user-select: text;
            position: absolute;
            left: -1px;
            font-size: 1px;
            transform: scale(0);
        }

@media (max-width: 576px) {
    .accounts-td .iban-container .iban-block {
        padding-right: 2rem;
    }
}

.accounts-td .iban-container .full-iban {
    position: absolute;
    left: -1px;
    font-size: 1px;
    transform: scale(0);
}

.accounts-td .iban-container .iban-label {
    font-size: 14px;
    color: #767F8A;
    line-height: 1.3;
}

@media (max-width: 992px) {
    .accounts-td .iban-container .iban-label {
        display: none;
    }
}

.accounts-td .iban-container .account-number {
    position: relative;
}

@media (max-width: 1200px) {
    .accounts-td .iban-label {
        display: block;
        word-break: break-all;
    }
}

.accounts-td .account-balance {
    color: #32383c;
    font-size: 14px;
    line-height: 1.3;
}

@media (max-width: 992px) {
    .accounts-td .account-balance {
        color: #22967F;
    }
}

.accounts-td .cell-status {
    font-size: 12px;
}

    .accounts-td .cell-status .status {
        border-radius: 1.5rem;
        padding: 0.5rem 0.625rem 0.45rem;
        border: 1px solid transparent;
    }

        .accounts-td .cell-status .status .status-text {
            position: relative;
            display: none;
            padding-left: 1.5rem;
        }

            .accounts-td .cell-status .status .status-text:before {
                position: absolute;
                content: "";
                display: inline-block;
                left: 0;
                top: 50%;
                height: 1.125rem;
                width: 1.125rem;
                transform: translateY(-50%);
            }

        .accounts-td .cell-status .status[data-status="0"] {
            background: #FFEBEA;
            color: #C6261A;
            border-color: #FBA18C;
        }

            .accounts-td .cell-status .status[data-status="0"] .status-text.close {
                display: block;
            }

            .accounts-td .cell-status .status[data-status="0"] .status-text:before {
                background: url("../img/newDesign/icon/icon-account-close.svg") no-repeat center;
            }

.debugUrl .accounts-td .cell-status .status[data-status="0"] .status-text:before {
    background: url("/Content/themes/novapay/img/newDesign/icon/icon-account-close.svg") no-repeat center;
}

.accounts-td .cell-status .status[data-status="1"] {
    background: #D9FCF4;
    color: #0D5C53;
}

    .accounts-td .cell-status .status[data-status="1"] .status-text.open {
        display: block;
    }

    .accounts-td .cell-status .status[data-status="1"] .status-text:before {
        background: url("../img/newDesign/icon/icon-account-open.svg") no-repeat center;
    }

.debugUrl .accounts-td .cell-status .status[data-status="1"] .status-text:before {
    background: url("/Content/themes/novapay/img/newDesign/icon/icon-account-open.svg") no-repeat center;
}

.accounts-td .cell-status .status[data-status="2"] {
    background: #f4f6f7;
    color: #32383c;
    border-color: #DBDFE4;
}

    .accounts-td .cell-status .status[data-status="2"].tooltip-wrap[data-limit-ac=true]:hover .tooltip-blocked-account {
        display: block;
    }

    .accounts-td .cell-status .status[data-status="2"] .status-text.blocked {
        display: block;
    }

    .accounts-td .cell-status .status[data-status="2"] .status-text:before {
        background: url("../img/newDesign/icon/icon-account-blocked.svg") no-repeat center;
    }

.debugUrl .accounts-td .cell-status .status[data-status="2"] .status-text:before {
    background: url("/Content/themes/novapay/img/newDesign/icon/icon-account-blocked.svg") no-repeat center;
}

.accounts-td .cell-status .status[data-status="4"] {
    background: #FFF5DD;
    color: #7F560F;
    border-color: transparent;
}

    .accounts-td .cell-status .status[data-status="4"] .status-text.in-processing {
        display: block;
    }

    .accounts-td .cell-status .status[data-status="4"] .status-text:before {
        background: url("../img/newDesign/icon/icon-account-clock.svg") no-repeat center;
    }

.debugUrl .accounts-td .cell-status .status[data-status="4"] .status-text:before {
    background: url("/Content/themes/novapay/img/newDesign/icon/icon-account-clock.svg") no-repeat center;
}

.accounts-td .cell-status .status span {
    display: block;
    white-space: nowrap;
}

.accounts-td .cell-status .status .ico-n {
    margin-right: 4px;
}

.accounts-td .cell-status .status[data-status].has-limit {
    background: #FFF4F3;
    color: #EB4235;
    border-color: #EB4235;
}

    .accounts-td .cell-status .status[data-status].has-limit .status-text {
        display: none;
    }

        .accounts-td .cell-status .status[data-status].has-limit .status-text.limit {
            display: block;
        }

            .accounts-td .cell-status .status[data-status].has-limit .status-text.limit:before {
                display: inline-block;
                width: 18px;
                height: 18px;
                background-color: currentColor;
                background-image: none;
                mask-image: url("../img/sprite.svg#icon-trianglee-warning");
            }

.debugUrl .accounts-td .cell-status .status[data-status].has-limit .status-text.limit:before {
    mask-image: url("/Content/themes/novapay/img/sprite.svg#icon-trianglee-warning");
}

.accounts-td .cell-status .status[data-status].has-limit .status-text.limit:before {
    mask-repeat: no-repeat;
    mask-size: contain;
}

@media (max-width: 992px) {
    .accounts-td .cell-status {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }
}

.accounts-td .btn-td__generation-qr {
    padding: 0.5rem;
    border-radius: 0.25rem;
    border: 1px solid #DBDFE4;
    transition: all 0.22s ease-in-out;
}

    .accounts-td .btn-td__generation-qr:hover, .accounts-td .btn-td__generation-qr:active, .accounts-td .btn-td__generation-qr:focus {
        border-color: #690DD3;
    }

        .accounts-td .btn-td__generation-qr:hover .ico-n, .accounts-td .btn-td__generation-qr:active .ico-n, .accounts-td .btn-td__generation-qr:focus .ico-n {
            background-color: #690DD3 !important;
        }

.accounts-td .btn-td__action {
    width: 2rem;
    height: 2rem;
    padding: 0;
    border-radius: 0.5rem;
    background: transparent;
    border: none;
    outline: none;
    color: #202427;
}

    .accounts-td .btn-td__action .icon-vertical-dot {
        color: #DBDFE4;
    }

    .accounts-td .btn-td__action:hover .icon-vertical-dot, .accounts-td .btn-td__action:active .icon-vertical-dot, .accounts-td .btn-td__action:focus .icon-vertical-dot {
        color: #767F8A;
    }

.accounts-td span {
    cursor: pointer;
    position: relative;
}

.accounts-td .content-text {
    display: none;
}

@media (max-width: 992px) {
    .accounts-td {
        width: 100%;
        border-radius: 0.5rem;
        border: 1px solid #DBDFE4;
        background: transparent;
        font-weight: 500;
    }

        .accounts-td .content-dot {
            display: none;
        }

        .accounts-td .content-text {
            display: block;
            width: 100%;
            font-size: 14px;
            text-align: center;
            line-height: 1.35;
        }
}

.accounts-td .more-activity {
    text-align: left;
}

.accounts-td__show-more {
    display: flex;
    justify-content: space-between;
    padding: 0.5rem 0;
}

@media (max-width: 768px) {
    .accounts-td__show-more {
        flex-direction: column-reverse;
        align-items: center;
    }
}

.accounts-td .table-pagination {
    display: flex;
    align-items: center;
    color: #767F8A;
}

.accounts-td .table-pagination__info-title {
    margin-right: 0.75rem;
}

.accounts-td .table-pagination__switch:checked + .table-pagination__options-filter .table-pagination__select {
    transform: scaleY(1);
    opacity: 1;
}

.accounts-td .table-pagination__switch:checked + .table-pagination__options-filter .table-pagination__filter:after {
    transform: rotate(0deg);
}

.accounts-td .table-pagination__options-filter {
    width: 100%;
    cursor: pointer;
}

.accounts-td .table-pagination__filter {
    position: relative;
    display: flex;
    margin-right: 0.75rem;
    padding: 0.35rem 2rem 0.2rem 0.5rem;
    color: #27292C;
    background-color: #fff;
    border-radius: 0.25rem;
    border: 1px solid #CDD3DD;
    font-size: 14px;
    transition: 0.32s;
}

    .accounts-td .table-pagination__filter::after {
        content: "";
        position: absolute;
        top: 4px;
        right: 0.5rem;
        width: 1rem;
        height: 1rem;
        transform: rotate(180deg);
        transition: 0.3s ease-in-out;
        display: inline-block;
        width: 17px;
        height: 17px;
        background-color: currentColor;
        background-image: none;
        mask-image: url("../img/sprite.svg#icon-arrow-black-down");
    }

.debugUrl .accounts-td .table-pagination__filter::after {
    mask-image: url("/Content/themes/novapay/img/sprite.svg#icon-arrow-black-down");
}

.accounts-td .table-pagination__filter::after {
    mask-repeat: no-repeat;
    mask-size: contain;
}

.accounts-td .table-pagination__select {
    position: absolute;
    bottom: 100%;
    left: 0;
    display: flex;
    flex-direction: column-reverse;
    width: 100%;
    margin-bottom: 5px;
    overflow: hidden;
    transform: scaleY(0);
    transform-origin: bottom;
    opacity: 0;
    transition: 0.22s ease-in-out;
    z-index: 4;
    border: 1px solid #CDD3DD;
    border-radius: 0.25rem;
}

.accounts-td .table-pagination__select-option {
    padding: 0.25rem 0.5rem;
    background-color: #FFF;
    border-bottom: 1px solid #e9ecef;
    transition: 0.3s;
}

    .accounts-td .table-pagination__select-option:first-of-type {
        border-bottom: 0;
    }

    .accounts-td .table-pagination__select-option:hover {
        background-color: #e9ecef;
    }

.accounts-td .btn-show-more {
    padding: 0.5rem 1rem;
    height: fit-content;
    border-radius: 0.5rem;
    color: #690DD3;
    font-size: 15px;
    font-weight: 600;
    background: transparent;
    border: 1px solid #690DD3;
    outline: none;
    cursor: pointer;
}

    .accounts-td .btn-show-more .ico-n {
        margin-right: 0.5rem;
    }

    .accounts-td .btn-show-more span {
        margin-left: 0.5rem;
    }

@media (max-width: 768px) {
    .accounts-td .btn-show-more {
        margin-bottom: 1.125rem;
    }
}

.accounts-td__dropdown {
    transform: scaleY(0);
    transition: 0.32s ease-in-out;
    min-width: 13.313rem;
}

    .accounts-td__dropdown .btn-Swiper-Container {
        display: none;
    }

@media (max-width: 768px) {
    .accounts-td__dropdown .btn-Swiper-Container {
        position: relative;
        display: flex;
        height: 1.25rem;
        width: 100%;
    }

        .accounts-td__dropdown .btn-Swiper-Container:before {
            content: "";
            position: absolute;
            top: 0.5rem;
            left: 50%;
            width: 2rem;
            height: 0.25rem;
            border-radius: 0.625rem;
            transform: translateX(-50%);
            background: #767F8A;
        }
}

.accounts-td__dropdown .dropdown-item {
    padding: 0;
}

    .accounts-td__dropdown .dropdown-item.create-payment {
        display: none;
    }

        .accounts-td__dropdown .dropdown-item.create-payment[data-account-status="1"] {
            display: flex;
            flex-direction: column;
        }

    .accounts-td__dropdown .dropdown-item[data-account-newdesignpaymentcreate=true] button {
        display: flex;
    }

    .accounts-td__dropdown .dropdown-item[data-account-newdesignpaymentcreate=true] a {
        display: none;
    }

    .accounts-td__dropdown .dropdown-item[data-account-newdesignpaymentcreate=false] button {
        display: none;
    }

    .accounts-td__dropdown .dropdown-item[data-account-newdesignpaymentcreate=false] a {
        display: flex;
    }

.accounts-td__dropdown .btn-account {
    width: 100%;
    padding: 0;
    gap: 0.75rem;
    padding: 0.74rem 0.5rem 0.5rem 0.5rem;
    font-size: 12px;
    font-weight: 500;
    color: #767F8A;
    text-align: left;
}

    .accounts-td__dropdown .btn-account:hover {
        color: #32383c !important;
    }

        .accounts-td__dropdown .btn-account:hover .icon-view-details {
            color: #464B53;
        }

        .accounts-td__dropdown .btn-account:hover .icon-menu-references-list {
            background-color: #32383c !important;
            display: inline-block;
            width: 24px;
            height: 24px;
            background-color: currentColor;
            background-image: none;
            mask-image: url("../img/sprite.svg#icon-menu-references-hover");
        }

.debugUrl .accounts-td__dropdown .btn-account:hover .icon-menu-references-list {
    mask-image: url("/Content/themes/novapay/img/sprite.svg#icon-menu-references-hover");
}

.accounts-td__dropdown .btn-account:hover .icon-menu-references-list {
    mask-repeat: no-repeat;
    mask-size: contain;
}

.accounts-td__dropdown .btn-account:hover .icon-create-payment {
    color: #464B53;
}

.accounts-td__dropdown.open {
    display: block;
    transform: scaleY(1);
    top: 2.625rem;
    left: -135px;
    transform: translateX(-12%);
}

@media (min-width: 106rem) {
    .accounts-td__dropdown.open {
        left: -80px;
        transform: translateX(0);
    }
}

@media (max-width: 992px) {
    .accounts-td__dropdown.open {
        left: 50%;
        top: 3rem;
        width: 100%;
    }
}

@media (max-width: 768px) {
    .accounts-td__dropdown.open {
        position: fixed;
        bottom: 0;
        left: 0;
        top: auto;
        padding-bottom: 2rem;
        border-bottom-right-radius: 0;
        border-bottom-left-radius: 0;
        border-top-right-radius: 1rem;
        border-top-left-radius: 1rem;
        transform: translateX(0);
        overflow: inherit;
        box-shadow: none;
        z-index: 10002;
    }
}

@media (max-width: 768px) {
    .accounts-td__dropdown-bg {
        position: fixed;
        top: 0;
        left: 0;
        height: 100%;
        width: 100%;
        background: rgba(32, 36, 39, 0.5);
        z-index: 1001;
    }
}

.modal-account-detail .modal-account {
    display: flex;
    flex-direction: column;
}

.modal-account-detail .modal-account__title, .modal-account-detail .modal-account__item, .modal-account-detail .modal-account__file-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.modal-account-detail .modal-account__title {
    padding: 1.25rem 0.875rem 1.25rem 1.25rem;
    border-bottom: 1px solid #DBDFE4;
}

    .modal-account-detail .modal-account__title .account-detail__title {
        margin: 0;
        font-size: 1.25rem;
        font-weight: 600;
    }

    .modal-account-detail .modal-account__title .btn {
        padding: 6px;
    }

.modal-account-detail .modal-account__item {
    padding: 0.5rem 1.25rem;
    border-bottom: 1px solid #DBDFE4;
}

    .modal-account-detail .modal-account__item .item-name {
        font-size: 14px;
        color: #767F8A;
        line-height: 1.35;
    }

.modal-account-detail .modal-account__item-QR {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0.5rem;
    padding-top: 1rem;
    padding-bottom: 1rem;
}

    .modal-account-detail .modal-account__item-QR .item-name {
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .modal-account-detail .modal-account__item-QR .qr-code-container {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 0.5rem;
    }

    .modal-account-detail .modal-account__item-QR .qr-code-image {
        display: block;
        max-width: 17rem;
        max-height: 17rem;
    }

    .modal-account-detail .modal-account__item-QR .qr-link {
        display: flex;
        align-items: center;
        max-width: 17.5rem;
        padding: 0.375rem 0.75rem;
        border-radius: 0.5rem;
        border: 1px solid #DBDFE4;
        background: #fff;
        transition: all 0.22s ease-in-out;
    }

        .modal-account-detail .modal-account__item-QR .qr-link:hover {
            border-color: #E1CFF6;
            background: #F5EDFF;
        }

            .modal-account-detail .modal-account__item-QR .qr-link:hover .qr-link-text {
                color: #690DD3 !important;
            }

    .modal-account-detail .modal-account__item-QR .qr-link-text {
        padding: 0;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .modal-account-detail .modal-account__item-QR .btn-item-generation-qr .icon-qr-code {
        margin-right: 0.5rem;
    }

.modal-account-detail .modal-account__file-actions {
    display: flex;
    justify-content: end;
    gap: 1rem;
    padding: 1.5rem 1.255rem;
}

    .modal-account-detail .modal-account__file-actions .btn-secondary {
        display: flex;
        gap: 0.25rem;
        padding: 0.5rem 0.75rem;
        border-color: #DBDFE4;
        color: #202427;
    }

        .modal-account-detail .modal-account__file-actions .btn-secondary .ico-n {
            background-size: 1.25rem;
        }

        .modal-account-detail .modal-account__file-actions .btn-secondary:hover {
            border-color: rgb(51.0416666667%, 13.1915266106%, 94.6516106443%);
            color: rgb(31.8014705882%, 3.93732493%, 63.9058123249%);
        }

            .modal-account-detail .modal-account__file-actions .btn-secondary:hover .icon-account-copyAll {
                background: url("../img/newDesign/icon/icon-account-copyAll-hover.svg") no-repeat center/1.25rem;
            }

.debugUrl .modal-account-detail .modal-account__file-actions .btn-secondary:hover .icon-account-copyAll {
    background: url("/Content/themes/novapay/img/newDesign/icon/icon-account-copyAll-hover.svg") no-repeat center/1.25rem;
}

.modal-account-detail .modal-account__file-actions .btn-secondary:hover .icon-account-print {
    background: url("../img/newDesign/icon/icon-account-print-hover.svg") no-repeat center/1.25rem;
}

.debugUrl .modal-account-detail .modal-account__file-actions .btn-secondary:hover .icon-account-print {
    background: url("/Content/themes/novapay/img/newDesign/icon/icon-account-print-hover.svg") no-repeat center/1.25rem;
}

.modal-account-detail .modal-account__file-actions .btn-secondary:hover .icon-account-detail {
    background: url("../img/newDesign/icon/icon-account-detail-hover.svg") no-repeat center/1.25rem;
}

.debugUrl .modal-account-detail .modal-account__file-actions .btn-secondary:hover .icon-account-detail {
    background: url("/Content/themes/novapay/img/newDesign/icon/icon-account-detail-hover.svg") no-repeat center/1.25rem;
}

.modal-account-detail .modal-account__file-actions .btn-secondary:hover .icon-account-letter {
    background: url("../img/newDesign/icon/icon-account-letter-hover.svg") no-repeat center/1.25rem;
}

.debugUrl .modal-account-detail .modal-account__file-actions .btn-secondary:hover .icon-account-letter {
    background: url("/Content/themes/novapay/img/newDesign/icon/icon-account-letter-hover.svg") no-repeat center/1.25rem;
}

@media (max-width: 768px) {
    .modal-account-detail .modal-account__file-actions .btn-secondary {
        width: 47%;
    }
}

@media (max-width: 768px) {
    .modal-account-detail .modal-account__file-actions {
        flex-direction: row;
        justify-content: space-between;
        flex-wrap: wrap;
    }
}

.modal-account-detail .modal-account__print {
    display: none;
    opacity: 0;
    visibility: hidden;
    z-index: -1;
}

.modal-account-detail .item-content__info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
}

    .modal-account-detail .item-content__info .btn {
        padding: 0;
    }

.modal-account-detail .item-content__text {
    padding: 9px 0;
    font-size: 14px;
    color: #32383c;
    line-height: 1.35;
}

.modal-account-detail .btn-coppy .ico-n {
    background: url("../img/newDesign/icon/icon-account-copy-hover.svg") no-repeat center;
}

.debugUrl .modal-account-detail .btn-coppy .ico-n {
    background: url("/Content/themes/novapay/img/newDesign/icon/icon-account-copy-hover.svg") no-repeat center;
}

@media (max-width: 576px) {
    .modal-account-detail {
        top: 50% !important;
        transform: translate(0%, -50%) !important;
        height: fit-content;
        border-radius: 12px !important;
        width: 100% !important;
        min-width: 200px !important;
    }
}

.modal-detailsOf-account .modal-account__title {
    display: flex;
    position: relative;
    align-items: center;
    padding: 1.25rem 0.75rem;
    gap: 1rem;
}

    .modal-detailsOf-account .modal-account__title .account-details__title {
        font-size: 1.25rem;
        font-weight: 600;
    }

.modal-detailsOf-account .modal-account .btn-close__modal-account {
    position: absolute;
    right: 0;
}

.modal-detailsOf-account .modal-account .btn-back {
    padding: 0;
}

.modal-detailsOf-account .modal-details .details-account {
    display: flex;
}

.modal-detailsOf-account .modal-details .btn-coppy-info-account {
    padding: 0;
}

    .modal-detailsOf-account .modal-details .btn-coppy-info-account .icon-account-copy {
        background: url("../img/newDesign/icon/icon-account-copy-hover.svg") no-repeat center;
    }

.debugUrl .modal-detailsOf-account .modal-details .btn-coppy-info-account .icon-account-copy {
    background: url("/Content/themes/novapay/img/newDesign/icon/icon-account-copy-hover.svg") no-repeat center;
}

.modal-detailsOf-account .modal-details__available-balance {
    position: relative;
    flex-direction: column;
    padding: 1.5rem 1.25rem;
}

.modal-detailsOf-account .modal-details .balance-info {
    color: #767F8A;
    font-size: 14px;
}

.modal-detailsOf-account .modal-details .balance-info__tooltip .ico-n {
    background-color: #690DD3 !important;
    margin-bottom: 2px;
}

.modal-detailsOf-account .modal-details .balance-info__tooltip:hover .tooltip-text {
    display: flex;
    flex-direction: column;
    align-items: self-start;
    gap: 0.25rem;
}

.modal-detailsOf-account .modal-details .balance-limit-count {
    padding-bottom: 0.5rem;
}

    .modal-detailsOf-account .modal-details .balance-limit-count .title {
        color: #32383c;
    }

    .modal-detailsOf-account .modal-details .balance-limit-count .coins-type,
    .modal-detailsOf-account .modal-details .balance-limit-count .currency {
        font-size: 24px;
        color: #767F8A;
    }

.modal-detailsOf-account .modal-details .balance-blocked-funds {
    display: flex;
    color: #EB4235;
    font-size: 14px;
}

    .modal-detailsOf-account .modal-details .balance-blocked-funds .blocked-funds__count,
    .modal-detailsOf-account .modal-details .balance-blocked-funds .blocked-funds {
        padding-right: 0.25rem;
    }

.modal-detailsOf-account .modal-details__group-field-account {
    flex-direction: column;
    padding: 0.75rem 1.25rem;
}

    .modal-detailsOf-account .modal-details__group-field-account .form-label {
        padding-bottom: 0.5rem;
        font-size: 12px;
        color: #767F8A;
    }

    .modal-detailsOf-account .modal-details__group-field-account .form-group-field {
        display: flex;
        justify-content: space-between;
        gap: 0.5rem;
    }

    .modal-detailsOf-account .modal-details__group-field-account .form-check-input:checked + .checkbox-view::after {
        background-size: 100%;
    }

    .modal-detailsOf-account .modal-details__group-field-account .checkbox-view::after, .modal-detailsOf-account .modal-details__group-field-account .checkbox-view::before {
        content: "";
        position: absolute;
        height: 100%;
        width: 100%;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
        border-radius: 0.57rem;
    }

    .modal-detailsOf-account .modal-details__group-field-account .checkbox-view::after {
        background-size: 0;
    }

    .modal-detailsOf-account .modal-details__group-field-account .form-control-input {
        flex: 1 1 100%;
        border-radius: 0.5rem;
        padding: 0.5rem 0.75rem;
        max-height: 2.5rem;
        font-size: 15px;
    }

    .modal-detailsOf-account .modal-details__group-field-account .checkbox-view {
        position: relative;
        height: 2.5rem;
        width: 2.5rem;
    }

.modal-detailsOf-account .modal-details .main-account-checkbox {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

    .modal-detailsOf-account .modal-details .main-account-checkbox .checkbox-view {
        position: relative;
        padding-left: 1.875rem;
        color: #32383c;
    }

        .modal-detailsOf-account .modal-details .main-account-checkbox .checkbox-view::after, .modal-detailsOf-account .modal-details .main-account-checkbox .checkbox-view::before {
            height: 1.375rem;
            width: 1.375rem;
        }

.modal-detailsOf-account .modal-details__number-account {
    flex-direction: column;
    padding: 0.75rem 1.25rem;
}

    .modal-detailsOf-account .modal-details__number-account .title-number-account {
        padding-bottom: 0.5rem;
        font-size: 12px;
        color: #767F8A;
    }

    .modal-detailsOf-account .modal-details__number-account .content-number-account {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding-bottom: 1rem;
        font-size: 12px;
    }

@media (max-width: 768px) {
    .modal-detailsOf-account .modal-details__number-account .content-number-account {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.75rem;
    }
}

.modal-detailsOf-account .modal-details__number-account .content-number-account .status {
    border-radius: 1.5rem;
    padding: 0.5rem 0.625rem 0.45rem;
    border: 1px solid transparent;
    max-height: 2rem;
}

@media (max-width: 768px) {
    .modal-detailsOf-account .modal-details__number-account .content-number-account .status {
        width: 50%;
    }
}

.modal-detailsOf-account .modal-details__number-account .content-number-account .status .status-text {
    position: relative;
    display: none;
    padding-left: 1.5rem;
}

    .modal-detailsOf-account .modal-details__number-account .content-number-account .status .status-text:before {
        position: absolute;
        content: "";
        display: inline-block;
        left: 0;
        top: 50%;
        height: 1.125rem;
        width: 1.125rem;
        transform: translateY(-50%);
    }

.modal-detailsOf-account .modal-details__number-account .content-number-account .status[data-status="0"] {
    background: #FFEBEA;
    color: #C6261A;
    border-color: #FBA18C;
}

    .modal-detailsOf-account .modal-details__number-account .content-number-account .status[data-status="0"] .status-text.close {
        display: block;
    }

    .modal-detailsOf-account .modal-details__number-account .content-number-account .status[data-status="0"] .status-text:before {
        background: url("../img/newDesign/icon/icon-account-close.svg") no-repeat center;
    }

.debugUrl .modal-detailsOf-account .modal-details__number-account .content-number-account .status[data-status="0"] .status-text:before {
    background: url("/Content/themes/novapay/img/newDesign/icon/icon-account-close.svg") no-repeat center;
}

.modal-detailsOf-account .modal-details__number-account .content-number-account .status[data-status="1"] {
    background: #D9FCF4;
    color: #0D5C53;
}

    .modal-detailsOf-account .modal-details__number-account .content-number-account .status[data-status="1"] .status-text.open {
        display: block;
    }

    .modal-detailsOf-account .modal-details__number-account .content-number-account .status[data-status="1"] .status-text:before {
        background: url("../img/newDesign/icon/icon-account-open.svg") no-repeat center;
    }

.debugUrl .modal-detailsOf-account .modal-details__number-account .content-number-account .status[data-status="1"] .status-text:before {
    background: url("/Content/themes/novapay/img/newDesign/icon/icon-account-open.svg") no-repeat center;
}

.modal-detailsOf-account .modal-details__number-account .content-number-account .status[data-status="2"] {
    background: #f4f6f7;
    color: #32383c;
    border-color: #DBDFE4;
}

    .modal-detailsOf-account .modal-details__number-account .content-number-account .status[data-status="2"] .status-text.blocked {
        display: block;
    }

    .modal-detailsOf-account .modal-details__number-account .content-number-account .status[data-status="2"] .status-text:before {
        background: url("../img/newDesign/icon/icon-account-blocked.svg") no-repeat center;
    }

.debugUrl .modal-detailsOf-account .modal-details__number-account .content-number-account .status[data-status="2"] .status-text:before {
    background: url("/Content/themes/novapay/img/newDesign/icon/icon-account-blocked.svg") no-repeat center;
}

.modal-detailsOf-account .modal-details__number-account .content-number-account .status[data-status="4"] {
    background: #FFF5DD;
    color: #7F560F;
    border-color: transparent;
}

    .modal-detailsOf-account .modal-details__number-account .content-number-account .status[data-status="4"] .status-text.in-processing {
        display: block;
    }

    .modal-detailsOf-account .modal-details__number-account .content-number-account .status[data-status="4"] .status-text:before {
        background: url("../img/newDesign/icon/icon-account-clock.svg") no-repeat center;
    }

.debugUrl .modal-detailsOf-account .modal-details__number-account .content-number-account .status[data-status="4"] .status-text:before {
    background: url("/Content/themes/novapay/img/newDesign/icon/icon-account-clock.svg") no-repeat center;
}

.modal-detailsOf-account .modal-details__number-account .content-number-account .status[data-status].has-limit {
    background: #FFF4F3;
    color: #EB4235;
    border-color: #EB4235;
}

    .modal-detailsOf-account .modal-details__number-account .content-number-account .status[data-status].has-limit .status-text {
        display: none;
    }

        .modal-detailsOf-account .modal-details__number-account .content-number-account .status[data-status].has-limit .status-text.limit {
            display: block;
        }

            .modal-detailsOf-account .modal-details__number-account .content-number-account .status[data-status].has-limit .status-text.limit:before {
                display: inline-block;
                width: 18px;
                height: 18px;
                background-color: currentColor;
                background-image: none;
                mask-image: url("../img/sprite.svg#icon-trianglee-warning");
            }

.debugUrl .modal-detailsOf-account .modal-details__number-account .content-number-account .status[data-status].has-limit .status-text.limit:before {
    mask-image: url("/Content/themes/novapay/img/sprite.svg#icon-trianglee-warning");
}

.modal-detailsOf-account .modal-details__number-account .content-number-account .status[data-status].has-limit .status-text.limit:before {
    mask-repeat: no-repeat;
    mask-size: contain;
}

.modal-detailsOf-account .modal-details__number-account .content-number-account .status span {
    display: block;
    white-space: nowrap;
}

.modal-detailsOf-account .modal-details__number-account .content-number-account .status .ico-n {
    margin-right: 4px;
}

.modal-detailsOf-account .modal-details__number-account .number-accoun-wrapper {
    display: flex;
    flex-direction: column;
}

.modal-detailsOf-account .modal-details__number-account .number-account__value-wrapper {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

    .modal-detailsOf-account .modal-details__number-account .number-account__value-wrapper .number-account {
        font-size: 14px;
    }

.modal-detailsOf-account .modal-details__number-contract {
    justify-content: space-between;
    padding: 1rem 1.25rem;
    align-items: center;
}

    .modal-detailsOf-account .modal-details__number-contract .number-contract-container {
        display: flex;
        gap: 0.5rem;
        align-items: center;
    }

    .modal-detailsOf-account .modal-details__number-contract .title-number-contract {
        color: #767F8A;
    }

.modal-detailsOf-account .modal-details__company-info {
    justify-content: space-between;
    padding: 1rem 1.25rem;
    align-items: center;
}

    .modal-detailsOf-account .modal-details__company-info .title-company-info {
        color: #767F8A;
    }

    .modal-detailsOf-account .modal-details__company-info .company-info-container {
        display: flex;
        gap: 0.5rem;
        align-items: center;
    }

.modal-detailsOf-account .modal-details__contract-date {
    justify-content: space-between;
    padding: 1rem 1.25rem;
    align-items: center;
}

    .modal-detailsOf-account .modal-details__contract-date .title-contract-date {
        color: #767F8A;
    }

    .modal-detailsOf-account .modal-details__contract-date .contract-date-container {
        display: flex;
        gap: 0.5rem;
        align-items: center;
    }

.modal-detailsOf-account .modal-details__actions {
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.25rem;
    justify-content: end;
}

    .modal-detailsOf-account .modal-details__actions .btn-secondary {
        padding: 0.5rem 1rem;
        border-color: #DBDFE4;
        color: #202427;
    }

        .modal-detailsOf-account .modal-details__actions .btn-secondary:hover {
            border-color: rgb(51.0416666667%, 13.1915266106%, 94.6516106443%);
            color: rgb(31.8014705882%, 3.93732493%, 63.9058123249%);
        }

@media (max-width: 768px) {
    .modal-detailsOf-account .modal-details__actions .btn-secondary {
        width: 100%;
    }
}

.modal-detailsOf-account .border-details:before {
    position: absolute;
    content: "";
    bottom: 0;
    left: 0;
    height: 1px;
    width: 100%;
    background: #DBDFE4;
}

.modal-senderof-account .border-details:before {
    position: absolute;
    content: "";
    bottom: 0;
    left: 0;
    height: 1px;
    width: 100%;
    background: #DBDFE4;
}

.modal-senderof-account .modal-sender__title {
    display: flex;
    position: relative;
    align-items: center;
    padding: 1.25rem 0.75rem;
    gap: 1rem;
}

    .modal-senderof-account .modal-sender__title .account-sender-title {
        font-size: 1.25rem;
        font-weight: 600;
    }

.modal-senderof-account .modal-sender .btn-close__modal-account {
    position: absolute;
    right: 0;
}

.modal-senderof-account .modal-sender__wrapper {
    padding: 1.5rem 1.25rem 2rem;
}

.modal-senderof-account .modal-sender__form .form-label {
    padding-bottom: 0.5rem;
    font-size: 12px;
    color: #767F8A;
}

.modal-senderof-account .modal-sender__form .form-control-input {
    margin-bottom: 1.5rem;
}

.modal-senderof-account .slider-container {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: 2.5rem;
    padding: 0.25rem;
    margin-bottom: 1rem;
    border: 0.0625rem solid #DBDFE4;
    border-radius: 0.5rem;
}

    .modal-senderof-account .slider-container input[type=checkbox] {
        display: none;
    }

        .modal-senderof-account .slider-container input[type=checkbox]:checked ~ .slider-bg {
            left: 50%;
        }

        .modal-senderof-account .slider-container input[type=checkbox]:checked ~ .email {
            color: #767F8A;
        }

        .modal-senderof-account .slider-container input[type=checkbox]:checked ~ .sms {
            color: #690DD3;
        }

    .modal-senderof-account .slider-container label {
        position: relative;
        z-index: 1;
        flex: 1;
        text-align: center;
        cursor: pointer;
        color: #767F8A;
        transition: color 0.3s ease;
    }

        .modal-senderof-account .slider-container label.noTax {
            color: #690DD3;
        }

.modal-senderof-account .slider-bg {
    position: absolute;
    top: 4px;
    left: 4px;
    right: 0;
    width: calc(50% - 4px);
    height: calc(100% - 8px);
    background-color: #F5EDFF;
    border-radius: 8px;
    transition: left 0.32s ease;
}

.modal-generation-qr__header {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.63rem 1.25rem;
}

    .modal-generation-qr__header .btn {
        position: absolute;
        top: 50%;
        right: 0;
        transform: translateY(-50%);
    }

    .modal-generation-qr__header .account-sender-title {
        font-size: 1.25rem;
        font-weight: 600;
    }

.modal-generation-qr__content {
    display: flex;
    flex-direction: column;
    padding: 1rem 1.25rem;
    border-top: 1px solid #DBDFE4;
}

.modal-generation-qr__footer {
    border-top: 1px solid #DBDFE4;
    padding: 1rem 1.25rem;
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
}

.modal-generation-qr .qr-amount-section {
    display: flex;
    padding: 0 0 1rem;
    flex-direction: column;
}

.modal-generation-qr .qr-payment-purpose {
    display: flex;
    flex-direction: column;
    padding: 1rem 0 0;
}

.modal-generation-qr .qr-payment-purpose__label {
    position: relative;
}

.modal-generation-qr .qr-amount__controls {
    display: flex;
    align-items: center;
}

.modal-generation-qr .qr-amount__fields {
    display: flex;
    gap: 1.25rem;
}

@media (max-width: 768px) {
    .modal-generation-qr .qr-amount__fields {
        flex-direction: column;
    }
}

.modal-generation-qr .qr-amount__label {
    display: flex;
    flex-direction: column;
}

@media (max-width: 768px) {
    .modal-generation-qr .qr-amount__label {
        width: 100%;
    }
}

.modal-generation-qr .label-text {
    display: block;
    margin-bottom: 0.25rem;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.125rem;
    color: #767F8A;
}

.modal-generation-qr .qr-amount-input,
.modal-generation-qr .qr-payment-purpose__textarea {
    padding: 0.5rem 0.75rem;
    border-radius: 0.5rem;
    border: 1px solid #DBDFE4;
}

    .modal-generation-qr .qr-amount-input:focus-visible,
    .modal-generation-qr .qr-payment-purpose__textarea:focus-visible {
        border-color: #690DD3;
    }

.modal-generation-qr .qr-payment-purpose__textarea {
    padding: 0.5rem 0.75rem 1.8rem 0.75rem;
}

.modal-generation-qr .qr-payment-purpose__textarea {
    width: 100%;
    height: 6.5rem;
    resize: none;
    font-size: 15px;
    color: #767F8A;
}

.modal-generation-qr .qr-payment-purpose__controls {
    position: relative;
}

    .modal-generation-qr .qr-payment-purpose__controls .purpose-counter {
        position: absolute;
        bottom: 0.813rem;
        right: 1.438rem;
        font-size: 12px;
        color: #767F8A;
    }

.modal-generation-qr .tooltip-text:after {
    left: calc(100% - (50% + 5px));
}

.modal-generation-qr .icon-info-new {
    background-color: #690DD3 !important;
}

.newDesign .index-balans {
    border-radius: 12px;
    background: #FFF;
    padding: 24px 24px 32px;
}

.newDesign .index-balans__header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
}

.newDesign .index-balans__header-balans {
    min-width: 250px;
}

.newDesign .index-balans__create-payment {
    padding: 0;
}

.newDesign .index-balans__total {
    color: #32383c;
}

.newDesign .index-balans__total-fractional {
    color: #767F8A;
    font-size: 24px;
    font-style: normal;
    font-weight: 600;
    line-height: 28px;
}

.newDesign .index-balans__actions {
    display: flex;
    gap: 12px;
}

.newDesign .index-balans__import-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #690DD3 !important;
    font-weight: 500;
}

@media (max-width: 992px) {
    .newDesign .index-balans__import-btn {
        display: none;
    }
}

.newDesign .index-balans__import-icon {
    margin-top: -4px;
    width: 20px;
    height: 20px;
}

.newDesign .index-balans__select-btn {
    position: relative;
    gap: 8px;
    width: 186px;
    font-weight: 500;
}

    .newDesign .index-balans__select-btn .icon-triger-white-arrow {
        width: 20px;
        height: 20px;
        margin-top: -2px;
        transform: rotate(180deg);
        transition: transform 0.3s ease-out;
    }

    .newDesign .index-balans__select-btn.open:hover .icon-triger-white-arrow, .newDesign .index-balans__select-btn.open:focus .icon-triger-white-arrow {
        transform: none;
    }

.newDesign .index-balans__label {
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    margin-bottom: 4px;
    line-height: 18px;
}

.newDesign .index-balans__line {
    margin: 24px 0;
    height: 1px;
    width: 100%;
    background: #EDEFF1;
}

.newDesign .index-balans__title {
    width: fit-content;
}

.newDesign .index-balans__title-section {
    margin-bottom: 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1.25rem;
}

.newDesign .index-balans__dropdown-wrap {
    position: relative;
}

    .newDesign .index-balans__dropdown-wrap .p-select-dropdown {
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 0.25rem;
        padding: 11px 0 11px 16px;
        margin-bottom: 0;
        cursor: pointer;
    }

        .newDesign .index-balans__dropdown-wrap .p-select-dropdown .icon-arrow {
            height: 1rem;
            width: 1rem;
            opacity: 1;
        }

            .newDesign .index-balans__dropdown-wrap .p-select-dropdown .icon-arrow:before {
                content: "";
                position: relative;
                display: block;
                height: 1rem;
                width: 1rem;
                transform: rotate(180deg);
                transition: transform 0.32s ease-out;
                background: url("../img/newDesign/icon/arrow-white.svg") no-repeat center;
            }

.debugUrl .newDesign .index-balans__dropdown-wrap .p-select-dropdown .icon-arrow:before {
    background: url("/Content/themes/novapay/img/newDesign/icon/arrow-white.svg") no-repeat center;
}

.newDesign .index-balans__dropdown-wrap .vue-dropdown-wrapper .p-select {
    display: flex;
    flex-direction: row-reverse;
    gap: 0.5rem;
}

.newDesign .index-balans__dropdown-wrap .vue-dropdown-wrapper .p-select-label {
    padding: 11px 16px 11px 0;
}

.newDesign .index-balans__dropdown-wrap .vue-dropdown-wrapper .p-select-option {
    padding: 10px 6px;
    cursor: pointer;
    position: relative;
    display: flex;
    align-items: center;
    flex-direction: row;
    flex-wrap: nowrap;
    min-height: 2.5rem;
    padding: 0.74rem 0.5rem 0.5rem 2.5rem;
    border-radius: 0.25rem;
    color: #767F8A;
}

    .newDesign .index-balans__dropdown-wrap .vue-dropdown-wrapper .p-select-option:hover {
        background: #f4f6f7;
        color: #000000;
    }

        .newDesign .index-balans__dropdown-wrap .vue-dropdown-wrapper .p-select-option:hover span {
            color: #000000 !important;
            text-decoration: none;
            border: none;
        }

.newDesign .index-balans__dropdown-wrap .vue-dropdown-wrapper .p-select-open .p-select-dropdown .icon-arrow:before {
    transform: rotate(0deg);
}

.newDesign .index-balans__dropdown-wrap .vue-dropdown-wrapper .vue-dropdown-container__list-label {
    color: #767F8A;
    text-align: left;
}

    .newDesign .index-balans__dropdown-wrap .vue-dropdown-wrapper .vue-dropdown-container__list-label:hover {
        background: #f4f6f7;
        color: #000000 !important;
        text-decoration: none;
        border: none;
    }

.newDesign .index-balans__icon-dropdown {
    display: none;
    width: 20px;
    height: 20px;
    position: absolute;
    right: 12px;
    top: 20px;
    transform: none;
    transition: transform 0.3s ease-out;
}

.newDesign .index-balans__tooltip-wrap {
    margin-bottom: 4px;
}

.newDesign .index-balans__icon-tooltip {
    width: 16px;
    height: 16px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    cursor: pointer;
}

.newDesign .index-balans__payment-dropdown {
    padding: 0.25rem;
    display: flex;
    top: 100%;
    left: -6px;
    min-width: 12.6rem;
    width: 100%;
}

.newDesign .index-balans__dropdown-items {
    width: 100%;
}

.newDesign .index-balans__dropdown-item {
    padding: 10px 6px;
    cursor: pointer;
}

.newDesign .index-balans__data-container {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 3px;
}

    .newDesign .index-balans__data-container .btn-clear-period {
        height: 40px;
        width: 40px;
    }

.newDesign .index-balans__data-wrap {
    display: flex;
    padding: 0.5rem 0.75rem;
    min-width: 17.188rem;
    border-radius: 0.5rem;
    border: 1px solid #DBDFE4;
    cursor: pointer;
    gap: 5px;
    height: 42px;
}

@media (max-width: 1150px) {
    .newDesign .index-balans__data-wrap {
        min-width: 15rem;
    }
}

@media (max-width: 768px) {
    .newDesign .index-balans__data-wrap {
        width: 100%;
        min-width: auto;
    }
}

.newDesign .index-balans__data-info {
    display: flex;
    align-items: center;
    margin-top: 2px;
}

.newDesign .index-balans__calendar-period {
    font-size: 1rem;
    font-weight: 500;
    color: #32383c;
    background: transparent;
    border: none;
    cursor: pointer;
}

.newDesign .index-balans__table {
    border-radius: 8px;
    border: 1px solid #DBDFE4;
    background: #FFF;
    padding: 20px 0;
    display: flex;
    justify-content: space-between;
}

    .newDesign .index-balans__table .active .icon-arrow-dropdown {
        transform: rotate(180deg);
        transition: transform 0.3s ease-out;
    }

.newDesign .index-balans__table-title {
    margin-bottom: 4px;
}

.newDesign .index-balans__table-title-wrap {
    position: relative;
    align-items: center;
    display: flex;
    gap: 8px;
}

.newDesign .index-balans__table-value {
    overflow: hidden;
    color: #32383c;
    text-overflow: ellipsis;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px;
}

.newDesign .index-balans__table-value_green {
    color: #22967F;
    font-size: 16px;
    font-weight: 500;
}

.newDesign .index-balans__table-value_bold {
    font-weight: 500;
}

.newDesign .index-balans__table-item {
    position: relative;
    width: 100%;
    gap: 4px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

    .newDesign .index-balans__table-item::after {
        content: "";
        position: absolute;
        left: 100%;
        height: 32px;
        width: 1px;
        background: #DBDFE4;
    }

    .newDesign .index-balans__table-item:last-child::after {
        display: none;
    }

.newDesign .index-balans .btn-Swiper-Container {
    display: none;
}

@media (max-width: 768px) {
    .newDesign .index-balans .btn-Swiper-Container {
        position: relative;
        display: flex;
        height: 1.25rem;
        width: 100%;
    }

        .newDesign .index-balans .btn-Swiper-Container:before {
            content: "";
            position: absolute;
            top: 0.5rem;
            left: 50%;
            width: 2rem;
            height: 0.25rem;
            border-radius: 0.625rem;
            transform: translateX(-50%);
            background: #767F8A;
        }
}

@media (max-width: 768px) {
    .newDesign .payment-dropdown-bg {
        position: fixed;
        top: 0;
        left: 0;
        height: 100%;
        width: 100%;
        background: rgba(32, 36, 39, 0.5);
        z-index: 1001;
    }
}

@media (max-width: 1279px) {
    .newDesign .index-balans__total {
        font-size: 28px;
    }
}

@media (max-width: 767px) {
    .newDesign .overlay {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.5);
        z-index: 100;
    }

        .newDesign .overlay.open {
            display: block;
        }

    .newDesign .index-balans {
        padding: 20px 20px 28px;
    }

    .newDesign .index-balans__payment-dropdown.open {
        display: block;
    }

    .newDesign .index-balans__header {
        align-items: start;
        flex-direction: column;
        gap: 16px;
    }

    .newDesign .index-balans__total-fractional {
        font-size: 17px;
        line-height: 20px;
    }

    .newDesign .index-balans__total {
        font-size: 24px;
    }

    .newDesign .index-balans__table {
        flex-direction: column;
        padding: 0;
        margin: auto;
        width: 75%;
    }

    .newDesign .index-balans__table-title-wrap {
        width: 100%;
        justify-content: space-between;
    }

    .newDesign .index-balans__icon-dropdown {
        display: block;
    }

    .newDesign .index-balans__actions {
        width: 100%;
    }

    .newDesign .index-balans__import-btn, .newDesign .index-balans__dropdown-wrap {
        width: 50%;
    }

    .newDesign .index-balans__select-btn {
        width: 100%;
    }

    .newDesign .index-balans__table-item {
        padding: 12px 12px 0px;
    }

        .newDesign .index-balans__table-item::after {
            content: none;
        }

    .newDesign .index-balans__table-item-wrap {
        border-bottom: 1px solid #EDEFF1;
        display: flex;
        flex-direction: column;
        width: 100%;
        padding-bottom: 8px;
    }

    .newDesign .index-balans .js-accordion-content {
        display: none;
        transition: max-height 0.8s ease-out;
    }

    .newDesign .index-balans .js-accordion-header.active + .js-accordion-content,
    .newDesign .index-balans .js-accordion-header.active + .js-accordion-content + .js-accordion-content {
        display: flex;
        flex-direction: column;
        transition: max-height 0.8s ease-out;
    }
}

@media (max-width: 767px) {
    .newDesign .index-balans {
        padding: 16px 12px;
    }

    .newDesign .index-balans__label {
        font-size: 12px;
        line-height: 16px;
    }

    .newDesign .index-balans__line {
        margin: 18px 0;
    }

    .newDesign .index-balans__title {
        display: none;
    }

    .newDesign .index-balans__table {
        width: 100%;
    }

    .newDesign .index-balans__table-item-wrap {
        align-items: baseline;
    }

    .newDesign .index-balans__select-btn, .newDesign .index-balans__import-btn {
        font-size: 14px;
    }

    .newDesign .index-balans__import-icon, .newDesign .index-balans__drop-icon {
        display: none;
    }

    .newDesign .index-balans__table-value, .newDesign .index-balans__table-value_green {
        font-size: 14px;
        font-weight: 500;
    }

    .newDesign .index-balans__payment-dropdown {
        position: fixed;
        top: inherit;
        left: 0;
        bottom: 0;
        display: flex;
        flex-direction: column;
        box-shadow: 0px 4px 34px 0px rgba(191, 195, 204, 0.3);
        padding: 8px 10px 40px;
        width: 100%;
        border-radius: 16px 16px 0px 0px;
        z-index: 1002;
    }

    .newDesign .index-balans__dropdown-item {
        display: flex;
        padding: 12px 6px;
        font-size: 15px;
        color: #202427;
    }
}

.main-content .modal.is-open .modal-dialog.createPayment {
    position: relative;
    top: 0;
    right: 0;
    left: 0;
    height: 100%;
    width: 100%;
    max-width: 59.5rem;
    min-width: 22rem;
    padding: 0;
    border-radius: 0;
    transform: translate(0);
}

@media (max-width: 1623px) {
    .main-content .modal.is-open .modal-dialog.createPayment {
        width: 100%;
        max-width: 48.688rem;
    }
}

@media (max-width: 768px) {
    .main-content .modal.is-open .modal-dialog.createPayment {
        min-width: 22rem;
        width: 50%;
    }
}

@media (max-width: 576px) {
    .main-content .modal.is-open .modal-dialog.createPayment {
        width: 360px;
    }
}

.main-content .modal.is-open .modal-dialog.createPayment .modal-content {
    height: 100%;
    width: 100%;
    max-width: 100%;
}

.main-content .modal.is-open .modal-dialog.createPayment:before {
    position: absolute;
    content: "";
    display: block;
    top: 50%;
    left: calc(50% - 25px);
    width: 50px;
    height: 50px;
    background: url("../img/newDesign/spinner-loading.png") no-repeat center;
    animation: rotate 1s linear infinite;
    transform: translate(-50%, -50%);
}

.debugUrl .main-content .modal.is-open .modal-dialog.createPayment:before {
    background: url("/Content/themes/novapay/img/newDesign/spinner-loading.png") no-repeat center;
}

.main-content .modal.is-open .modal-dialog.createPayment:has(.account-payment)::before {
    display: none;
}

.main-content .modal .modal-dialog.createPayment {
    position: relative;
    top: 0;
    right: 0;
    left: 0;
    height: 100%;
    max-height: 100%;
    width: 100%;
    padding: 0;
    border-radius: 0;
    transform: translate(200%, 0);
}

.account-payment {
    display: flex;
    flex-direction: column;
    max-height: calc(100vh - 69px);
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(168, 173, 180, 0.5);
}

@media (max-width: 768px) {
    .account-payment {
        max-height: calc(100vh - 79px);
        padding-bottom: 40px;
        height: calc(100% - env(safe-area-inset-bottom));
    }
}

.account-payment::-webkit-scrollbar-track {
    background: rgba(168, 173, 180, 0.5);
    border-radius: 0.25rem;
}

.account-payment::-webkit-scrollbar-thumb {
    background: rgba(168, 173, 180, 0.5);
    border-radius: 0.25rem;
}

    .account-payment::-webkit-scrollbar-thumb:hover {
        background: rgba(168, 173, 180, 0.5);
    }

.account-payment.active-rental-detail::before {
    content: "";
    position: absolute;
    background: rgba(255, 255, 255, 0);
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    z-index: 16;
    pointer-events: auto;
}

@media (max-width: 1110px) {
    .account-payment.active-rental-detail::before {
        background: rgba(32, 36, 39, 0.5);
    }
}

.account-payment .wrapper-credit-code-IBAN .p-inputwrapper,
.account-payment .wrapper-credit-state-code .p-inputwrapper {
    position: relative;
    border-radius: 0.5rem;
    border: 1px solid #DBDFE4;
}

    .account-payment .wrapper-credit-code-IBAN .p-inputwrapper .payment-receiver__account-input,
    .account-payment .wrapper-credit-state-code .p-inputwrapper .payment-receiver__account-input {
        width: 100%;
        border-start-end-radius: 0.5rem;
        border-end-end-radius: 0.5rem;
    }

    .account-payment .wrapper-credit-code-IBAN .p-inputwrapper.p-autocomplete:has(.p-autocomplete-clear-icon) .p-autocomplete-dropdown,
    .account-payment .wrapper-credit-state-code .p-inputwrapper.p-autocomplete:has(.p-autocomplete-clear-icon) .p-autocomplete-dropdown {
        pointer-events: none;
        opacity: 0;
    }

    .account-payment .wrapper-credit-code-IBAN .p-inputwrapper .p-autocomplete-dropdown,
    .account-payment .wrapper-credit-code-IBAN .p-inputwrapper .p-autocomplete-clear-icon,
    .account-payment .wrapper-credit-state-code .p-inputwrapper .p-autocomplete-dropdown,
    .account-payment .wrapper-credit-state-code .p-inputwrapper .p-autocomplete-clear-icon {
        position: absolute;
        right: 0;
        top: 50%;
        transform: translateY(-50%);
        border-radius: 15px;
        padding: 0;
        transform-origin: center;
        margin: 0;
        background-color: #fff;
        opacity: 1;
    }

    .account-payment .wrapper-credit-code-IBAN .p-inputwrapper .p-autocomplete-clear-icon,
    .account-payment .wrapper-credit-state-code .p-inputwrapper .p-autocomplete-clear-icon {
        right: 0.5rem;
        width: 0.625rem;
        aspect-ratio: 1/1;
        fill: #767F8A;
        z-index: 1;
    }

.account-payment__title {
    display: flex;
    justify-content: space-between;
    padding: 1.25rem 1.5rem 1rem 1.5rem;
    border-bottom: 1px solid #DBDFE4;
}

    .account-payment__title .title-wrapper {
        display: flex;
        gap: 0.75rem;
        align-items: center;
    }

        .account-payment__title .title-wrapper .title__h2 {
            display: flex;
            gap: 0.75rem;
        }

@media (max-width: 992px) {
    .account-payment__title .title-wrapper .title__h2 {
        font-size: 1.25rem;
    }
}

.account-payment__title .title-wrapper .payment-number {
    position: relative;
}

.account-payment__title .title-wrapper .payment-number__title {
    overflow-wrap: anywhere;
}

.account-payment__title .title-wrapper.edit .title-editor-field {
    width: calc(100% + 6rem);
    opacity: 1;
}

    .account-payment__title .title-wrapper.edit .title-editor-field .form-control {
        padding: 3px 0.75rem;
        width: 100%;
    }

    .account-payment__title .title-wrapper.edit .title-editor-field .form-check-label {
        display: block;
        position: absolute;
        right: -2.5rem;
        top: 0;
        height: 2rem;
        width: 2rem;
    }

        .account-payment__title .title-wrapper.edit .title-editor-field .form-check-label .checkbox-view::after, .account-payment__title .title-wrapper.edit .title-editor-field .form-check-label .checkbox-view::before {
            height: 100%;
            width: 100%;
        }

        .account-payment__title .title-wrapper.edit .title-editor-field .form-check-label .checkbox-view::after {
            opacity: 1;
            border-radius: 0.5rem;
        }

    .account-payment__title .title-wrapper.edit .title-editor-field .btn-clear-edit {
        width: auto;
    }

.account-payment__title .btn-title-edit {
    padding: 0.25rem;
    background: transparent;
}

    .account-payment__title .btn-title-edit:hover {
        background: #f4f6f7;
    }

        .account-payment__title .btn-title-edit:hover .ico-n {
            background: url("../img/newDesign/icon/icon-account-edit-hover.svg") no-repeat center;
        }

.debugUrl .account-payment__title .btn-title-edit:hover .ico-n {
    background: url("/Content/themes/novapay/img/newDesign/icon/icon-account-edit-hover.svg") no-repeat center;
}

.account-payment__title .title-editor-field {
    position: absolute;
    top: -0.25rem;
    left: 0;
    width: 0;
    transform-origin: top;
    opacity: 0;
    transition: 0.22s ease-in-out;
    z-index: 4;
    border: 1px solid #690DD3;
    border-radius: 0.5rem;
}

    .account-payment__title .title-editor-field .form-control {
        padding: 0;
        width: 0;
        border: none;
    }

    .account-payment__title .title-editor-field .btn-clear-edit {
        position: absolute;
        right: 0;
        top: 50%;
        width: 0;
        padding: 3px;
        transform: translateY(-50%);
    }

    .account-payment__title .title-editor-field .form-check-label {
        display: none;
        right: 0;
        top: 0;
        height: 0;
        width: 0;
    }

        .account-payment__title .title-editor-field .form-check-label .checkbox-view::after, .account-payment__title .title-editor-field .form-check-label .checkbox-view::before {
            height: 100%;
            width: 100%;
        }

.account-payment .btn-close__payment {
    height: 2rem;
    width: 2rem;
    padding: 0.25rem;
    background: #F4F6F7;
}

.account-payment__creation-date {
    display: flex;
    justify-content: space-between;
    padding: 0.5rem 1.5rem;
    min-height: 3rem;
    background: #F4F6F7;
}

@media (max-width: 992px) {
    .account-payment__creation-date {
        padding: 0.5rem 1rem;
        justify-content: center;
    }
}

.account-payment .creation-date,
.account-payment .date-picker-wrapper {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 400;
    font-size: 14px;
    color: #767F8A;
}

.account-payment .creation-date__active,
.account-payment .date-picker-wrapper__active {
    color: #32383c;
}

.account-payment .date-picker-wrapper {
    position: relative;
}

    .account-payment .date-picker-wrapper .date-picker-content {
        display: flex;
        align-items: center;
        min-width: 5rem;
        border-radius: 0.5rem;
        border: 1px solid #DBDFE4;
        background: #fff;
    }

        .account-payment .date-picker-wrapper .date-picker-content .date-field-range {
            width: 100%;
            padding: 0;
            border-color: transparent;
        }

    .account-payment .date-picker-wrapper .btn-date-picker {
        padding: 3px;
    }

        .account-payment .date-picker-wrapper .btn-date-picker:hover .icon-calendar {
            background: url("../img/newDesign/icon/icon-account-calendar-hover.svg") no-repeat center;
        }

.debugUrl .account-payment .date-picker-wrapper .btn-date-picker:hover .icon-calendar {
    background: url("/Content/themes/novapay/img/newDesign/icon/icon-account-calendar-hover.svg") no-repeat center;
}

.account-payment .date-picker-wrapper .date-display {
    color: #32383c;
}

.account-payment .date-picker-wrapper .btn-date-clear {
    padding: 3px;
    display: none;
}

    .account-payment .date-picker-wrapper .btn-date-clear.show {
        display: flex;
    }

.account-payment .date-picker-wrapper .dropdown-calendar {
    position: absolute;
    right: -0.5rem;
    padding: 0.5rem;
    width: 18.125rem;
    box-shadow: 0px 1.5rem 2.75rem 0px rgba(98, 98, 100, 0.3);
    border-radius: 1.25rem;
    background: #FFF;
    border: 1px solid #DBDFE4;
    z-index: 10;
}

    .account-payment .date-picker-wrapper .dropdown-calendar.calendar-top {
        bottom: 107%;
    }

    .account-payment .date-picker-wrapper .dropdown-calendar.calendar-bottom {
        top: 107%;
    }

.account-payment .date-picker-wrapper .calendar-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.625rem;
}

.account-payment .date-picker-wrapper .btn-prev,
.account-payment .date-picker-wrapper .btn-next {
    position: relative;
    padding: 0;
    height: 2rem;
    width: 2rem;
}

    .account-payment .date-picker-wrapper .btn-prev::after,
    .account-payment .date-picker-wrapper .btn-next::after {
        content: "";
        position: absolute;
        top: 50%;
        left: 50%;
        width: 0.5rem;
        height: 0.5rem;
        border-top: 2px solid #32383c;
        border-left: 2px solid #32383c;
        transform: translate(-50%, -50%) rotate(-45deg);
        transform-origin: center;
    }

    .account-payment .date-picker-wrapper .btn-prev::before,
    .account-payment .date-picker-wrapper .btn-next::before {
        content: "";
        position: absolute;
        top: 50%;
        left: 50%;
        width: 0;
        height: 0;
        background: #f0f0f0;
        border-radius: 50%;
        transform: translate(-50%, -50%);
        transition: width 0.22s ease, height 0.22s ease;
    }

    .account-payment .date-picker-wrapper .btn-prev:hover::before,
    .account-payment .date-picker-wrapper .btn-next:hover::before {
        width: 100%;
        height: 100%;
    }

    .account-payment .date-picker-wrapper .btn-prev::after {
        transform: translate(-50%, -50%) rotate(-45deg);
    }

    .account-payment .date-picker-wrapper .btn-next::after {
        transform: translate(-50%, -50%) rotate(135deg);
    }

.account-payment .date-picker-wrapper .week-header {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    text-align: center;
}

.account-payment .date-picker-wrapper .empty-day,
.account-payment .date-picker-wrapper .calendar-day,
.account-payment .date-picker-wrapper .week-day {
    text-align: center;
    height: 2.375rem;
    width: 2.375rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.account-payment .date-picker-wrapper .calendar-body .days-container {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
}

.account-payment .date-picker-wrapper .calendar-body .empty-day {
    visibility: hidden;
}

.account-payment .date-picker-wrapper .calendar-body .calendar-day {
    position: relative;
    cursor: pointer;
    border-radius: 50%;
}

    .account-payment .date-picker-wrapper .calendar-body .calendar-day.disabled {
        pointer-events: none;
        border-radius: 0;
    }

        .account-payment .date-picker-wrapper .calendar-body .calendar-day.disabled::before {
            width: 100%;
            height: 100%;
            border-radius: 0.75rem;
            background: #f4f6f7;
        }

        .account-payment .date-picker-wrapper .calendar-body .calendar-day.disabled span {
            color: #ccc;
        }

    .account-payment .date-picker-wrapper .calendar-body .calendar-day span {
        position: relative;
        display: block;
        color: #32383c;
    }

    .account-payment .date-picker-wrapper .calendar-body .calendar-day::before {
        content: "";
        position: absolute;
        top: 50%;
        left: 50%;
        width: 0;
        height: 0;
        background: #f0f0f0;
        border-radius: 50%;
        transform: translate(-50%, -50%);
        transition: width 0.22s ease, height 0.22s ease;
    }

    .account-payment .date-picker-wrapper .calendar-body .calendar-day:hover::before {
        width: 100%;
        height: 100%;
    }

    .account-payment .date-picker-wrapper .calendar-body .calendar-day.chosen {
        background-color: #E1CFF6;
        color: #32383c;
        border-radius: 50%;
    }

        .account-payment .date-picker-wrapper .calendar-body .calendar-day.chosen:hover::before {
            display: none;
        }

.account-payment .date-picker-wrapper .year-selector {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    margin-top: 10px;
    color: #32383c;
    text-align: center;
}

    .account-payment .date-picker-wrapper .year-selector .calendar-year {
        position: relative;
        padding: 0.5rem;
        display: block;
        color: #32383c;
        border-radius: 0.25rem;
        cursor: pointer;
        overflow: hidden;
    }

        .account-payment .date-picker-wrapper .year-selector .calendar-year.disabled {
            pointer-events: none;
        }

            .account-payment .date-picker-wrapper .year-selector .calendar-year.disabled::before {
                width: 100%;
                height: 100%;
                background: #f4f6f7;
            }

        .account-payment .date-picker-wrapper .year-selector .calendar-year span {
            position: relative;
            display: block;
        }

        .account-payment .date-picker-wrapper .year-selector .calendar-year::before {
            content: "";
            position: absolute;
            top: 50%;
            left: 50%;
            width: 0;
            height: 0;
            background: #f0f0f0;
            border-radius: 50%;
            transform: translate(-50%, -50%);
            transition: width 0.22s ease, height 0.22s ease;
        }

        .account-payment .date-picker-wrapper .year-selector .calendar-year:hover::before {
            width: 200%;
            height: 200%;
        }

        .account-payment .date-picker-wrapper .year-selector .calendar-year.chosen {
            background-color: #E1CFF6;
            color: #32383c;
        }

            .account-payment .date-picker-wrapper .year-selector .calendar-year.chosen:hover::before {
                display: none;
            }

.account-payment .date-picker-wrapper .current-month-year {
    position: relative;
    cursor: pointer;
    font-weight: bold;
    font-size: 14px;
    text-transform: capitalize;
    color: #32383c;
}

    .account-payment .date-picker-wrapper .current-month-year::before {
        content: "";
        position: absolute;
        top: 0.25rem;
        width: 7px;
        right: -1.125rem;
        height: 7px;
        border-top: 2px solid #32383c;
        border-left: 2px solid #32383c;
        transform-origin: center;
        transform: translate(-50%, 0) rotate(225deg);
    }

.account-payment .section-title {
    padding-bottom: 0.5rem;
    font-size: 12px;
    color: #767F8A;
}

.account-payment__radio-tabs {
    padding: 1.25rem 1.5rem;
    width: 100%;
}

@media (max-width: 992px) {
    .account-payment__radio-tabs {
        padding: 1rem;
    }
}

@media (max-width: 768px) {
    .account-payment__radio-tabs {
        padding-bottom: 1.25rem;
    }
}

.account-payment__radio-tabs .tabs-container {
    display: flex;
    gap: 0.25rem;
    padding: 0.25rem;
    border: 1px solid #DBDFE4;
    border-radius: 0.5rem;
    width: 100%;
}

@media (max-width: 992px) {
    .account-payment__radio-tabs .tabs-container {
        display: none;
    }
}

.account-payment__radio-tabs .radio-tab {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    padding: 0;
    border-radius: 0.5rem;
    cursor: pointer;
    transition: background-color 0.3s, color 0.3s;
}

    .account-payment__radio-tabs .radio-tab input[type=radio] {
        display: none;
    }

        .account-payment__radio-tabs .radio-tab input[type=radio]:checked + span {
            background: #F5EDFF;
            color: #690DD3;
        }

    .account-payment__radio-tabs .radio-tab span {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        height: 100%;
        padding: 0.5rem 1rem;
        border-radius: 0.5rem;
        font-size: 16px;
        color: #767F8A;
        text-align: center;
    }

    .account-payment__radio-tabs .radio-tab:hover span {
        color: #690DD3;
    }

.account-payment__radio-tabs .tabs-mobile-select {
    display: none;
    position: relative;
    border: 1px solid #DBDFE4;
    border-radius: 0.5rem;
    width: 100%;
    cursor: pointer;
}

@media (max-width: 992px) {
    .account-payment__radio-tabs .tabs-mobile-select {
        display: block;
    }

        .account-payment__radio-tabs .tabs-mobile-select::before {
            content: "";
            position: absolute;
            right: 5px;
            top: 7px;
            height: 1.5rem;
            width: 1.5rem;
            opacity: 1;
            transform: rotate(180deg);
            transition: transform 0.22s ease-out;
            background: url("../img/newDesign/icon/icon-small-up.svg") no-repeat center;
        }

    .debugUrl .account-payment__radio-tabs .tabs-mobile-select::before {
        background: url("/Content/themes/novapay/img/newDesign/icon/icon-small-up.svg") no-repeat center;
    }

    .account-payment__radio-tabs .tabs-mobile-select.active-tabs-select::before {
        transform: rotate(0deg);
    }
}

.account-payment__radio-tabs .tabs-mobile-select .tabs-selected {
    position: relative;
    padding: 0.5rem;
    font-size: 16px;
    color: #767F8A;
    z-index: 1;
}

.account-payment__radio-tabs .tabs-mobile-select .tabs-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    margin: 0;
    padding: 0.25rem;
    background: white;
    transform: scaleY(0);
    transform-origin: top;
    opacity: 0;
    transition: 0.32s ease-in-out;
    z-index: 10;
    list-style: none;
    border: 1px solid #DBDFE4;
    border-radius: 0.5rem;
}

.account-payment__radio-tabs .tabs-mobile-select .tabs-dropdown__item {
    padding: 0.5rem;
    border-radius: 0.5rem;
    font-size: 16px;
    color: #767F8A;
    cursor: pointer;
}

    .account-payment__radio-tabs .tabs-mobile-select .tabs-dropdown__item.active {
        background: #F5EDFF;
        color: #690DD3;
    }

    .account-payment__radio-tabs .tabs-mobile-select .tabs-dropdown__item:hover {
        background: #F5EDFF;
        color: #690DD3;
    }

.account-payment__radio-tabs .tabs-mobile-select .tabs-dropdown.open {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    margin-top: 0.25rem;
    transform: scaleY(1);
    opacity: 1;
}

.account-payment__sender-dropdown {
    padding: 0 1.5rem 0.75rem;
}

@media (max-width: 992px) {
    .account-payment__sender-dropdown {
        padding: 0 1rem 1rem;
    }
}

@media (max-width: 768px) {
    .account-payment__sender-dropdown {
        padding: 0 1rem 0.75rem;
    }
}

.account-payment__sender-dropdown .invalid-feedback {
    position: relative;
    bottom: 17px;
}

.account-payment__sender-dropdown .sender-dropdown-container {
    position: relative;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: column;
    justify-content: space-between;
    align-content: center;
    width: 21.75rem;
    border-radius: 0.75rem;
    font-size: 14px;
    font-weight: 500;
    color: #767F8A;
    background-color: #fff;
    line-height: 1.35;
}

@media (max-width: 768px) {
    .account-payment__sender-dropdown .sender-dropdown-container {
        width: 100%;
        flex-direction: column;
    }
}

.account-payment__sender-dropdown .sender-dropdown-container .oneLineContent {
    display: none;
    opacity: 0;
    visibility: hidden;
}

.account-payment__sender-dropdown .sender-dropdown-container.open .sender-dropdown-container__show {
    border-color: #DBDFE4;
}

    .account-payment__sender-dropdown .sender-dropdown-container.open .sender-dropdown-container__show .icon-arrow:before {
        transform: rotate(0deg);
    }

.account-payment__sender-dropdown .sender-dropdown-container.open .sender-dropdown-container__wrapper {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0.625rem) scaleY(1);
}

.account-payment__sender-dropdown .sender-dropdown-container.open .sender-dropdown-container__list {
    display: block;
}

.account-payment__sender-dropdown .sender-dropdown-container .title-selected {
    width: 100%;
    font-size: 12px;
    color: #767F8A;
}

.account-payment__sender-dropdown .sender-dropdown-container .title-selected__item {
    font-size: 12px;
    font-weight: 400;
}

.account-payment__sender-dropdown .sender-dropdown-container__show {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    margin: 0 0 0.5rem 0;
    gap: 4px;
    min-height: 2.5rem;
    padding: 0.55rem 2.625rem 0.55rem 0.75rem;
    border-radius: 0.75rem;
    border: 1px solid #DBDFE4;
    cursor: pointer;
}

    .account-payment__sender-dropdown .sender-dropdown-container__show .icon-arrow {
        position: absolute;
        right: 0.75rem;
        top: 50%;
        height: 1rem;
        width: 1rem;
        opacity: 1;
        transform: translateY(-50%);
    }

        .account-payment__sender-dropdown .sender-dropdown-container__show .icon-arrow:before {
            content: "";
            position: relative;
            display: block;
            height: 1rem;
            width: 1rem;
            transform: rotate(180deg);
            transition: transform 0.32s ease-out;
            background: url("../img/newDesign/icon/icon-small-up.svg") no-repeat center;
        }

.debugUrl .account-payment__sender-dropdown .sender-dropdown-container__show .icon-arrow:before {
    background: url("/Content/themes/novapay/img/newDesign/icon/icon-small-up.svg") no-repeat center;
}

.account-payment__sender-dropdown .sender-dropdown-container__active-item {
    display: inline-block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
    font-size: 15px;
    color: #32383c;
}

.account-payment__sender-dropdown .sender-dropdown-container__wrapper {
    position: absolute;
    top: 2.2rem;
    display: flex;
    flex-direction: column;
    width: 100%;
    min-height: 2.5rem;
    pointer-events: none;
    background-color: #fff;
    border-radius: 0.75rem;
    border: 1px solid #DBDFE4;
    overflow: hidden;
    transition: max-height 0.32s ease-out, opacity 0.22s ease-out, transform 0.22s cubic-bezier(0.55, 0.085, 0.68, 0.53);
    transform: translateY(-0.5rem) scaleY(0);
    transform-origin: top;
    opacity: 0;
    z-index: 14;
}

.account-payment__sender-dropdown .sender-dropdown-container__search-block {
    position: relative;
    padding: 0.5rem 0.75rem;
}

    .account-payment__sender-dropdown .sender-dropdown-container__search-block .ico-n {
        position: absolute;
        left: 1rem;
        top: 50%;
        transform: translateY(-50%);
    }

.account-payment__sender-dropdown .sender-dropdown-container__search-input {
    display: block;
    width: 100%;
    min-height: 2.5rem;
    padding: 0.5rem 0.75rem 0.5rem 2rem;
    border-radius: 0.5rem;
    border: 1px solid #DBDFE4;
    background: #FFF;
    color: #32383c;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 1.35;
}

    .account-payment__sender-dropdown .sender-dropdown-container__search-input:focus {
        border-color: #9b51e0;
        box-shadow: 0 0 4px rgba(155, 81, 224, 0.2);
    }

.account-payment__sender-dropdown .sender-dropdown-container__list {
    display: none;
    margin: 0;
    padding: 0;
    overflow: auto;
    max-height: 23.25rem;
    list-style: none;
    background-color: #fff;
    border-radius: 0 0 0.75rem 0.75rem;
    scrollbar-width: thin;
    scrollbar-color: rgba(168, 173, 180, 0.5);
}

    .account-payment__sender-dropdown .sender-dropdown-container__list::-webkit-scrollbar-track {
        background: rgba(168, 173, 180, 0.5);
        border-radius: 0.25rem;
    }

    .account-payment__sender-dropdown .sender-dropdown-container__list::-webkit-scrollbar-thumb {
        background: rgba(168, 173, 180, 0.5);
        border-radius: 0.25rem;
    }

        .account-payment__sender-dropdown .sender-dropdown-container__list::-webkit-scrollbar-thumb:hover {
            background: rgba(168, 173, 180, 0.5);
        }

    .account-payment__sender-dropdown .sender-dropdown-container__list li {
        display: flex;
        align-items: center;
        padding: 0;
        border: none;
        cursor: pointer;
    }

        .account-payment__sender-dropdown .sender-dropdown-container__list li:last-child {
            border-bottom: none;
        }

        .account-payment__sender-dropdown .sender-dropdown-container__list li.empty-message {
            display: flex;
            align-items: start;
            padding: 0.75rem;
            width: 100%;
            color: #32383c;
        }

    .account-payment__sender-dropdown .sender-dropdown-container__list label {
        position: relative;
        display: flex;
        align-items: start;
        padding: 0.75rem;
        width: 100%;
        flex-direction: column;
        cursor: pointer;
        overflow: hidden;
    }

        .account-payment__sender-dropdown .sender-dropdown-container__list label:has(input[type=radio]:checked) {
            background: #f4f6f7;
        }

        .account-payment__sender-dropdown .sender-dropdown-container__list label::before {
            content: "";
            position: absolute;
            top: 50%;
            left: 50%;
            width: 0;
            height: 0;
            background: #f4f6f7;
            border-radius: 50%;
            transform: translate(-50%, -50%);
            transition: width 0.32s ease, height 0.32s ease;
        }

        .account-payment__sender-dropdown .sender-dropdown-container__list label:hover::before {
            width: 200%;
            height: 200%;
        }

    .account-payment__sender-dropdown .sender-dropdown-container__list .icon-checkbox {
        display: none;
    }

        .account-payment__sender-dropdown .sender-dropdown-container__list .icon-checkbox::after, .account-payment__sender-dropdown .sender-dropdown-container__list .icon-checkbox::before {
            display: none;
        }

    .account-payment__sender-dropdown .sender-dropdown-container__list input[type=radio] {
        position: absolute;
        left: 0;
        opacity: 0;
        z-index: -1;
    }

        .account-payment__sender-dropdown .sender-dropdown-container__list input[type=radio]:checked + .icon-checkbox::after {
            opacity: 1;
        }

.account-payment__sender-dropdown .sender-dropdown-container .form-check-content {
    display: flex;
    flex-wrap: wrap;
}

.account-payment__sender-dropdown .sender-dropdown-container .form-check-name {
    position: relative;
    display: block;
    width: 100%;
    color: #000000;
}

.account-payment__sender-dropdown .sender-dropdown-container .form-check-index {
    position: relative;
    font-size: 12px;
}

.account-payment__sender-dropdown .multiselect-container .sender-dropdown-container__list label {
    flex-direction: row;
    align-items: center;
}

.account-payment__sender-dropdown .multiselect-container .sender-dropdown-container__list-label::before {
    display: none;
}

.account-payment__sender-dropdown .multiselect-container .sender-dropdown-container__list-item .form-check-content {
    padding-left: 1.75rem;
}

.account-payment__sender-dropdown .multiselect-container .sender-dropdown-container__list-item .icon-checkbox {
    position: absolute;
    top: 50%;
    left: 0.875rem;
    display: block;
    font-size: 0;
    height: 1.125rem;
    width: 1.125rem;
    transform: translateY(-50%);
}

    .account-payment__sender-dropdown .multiselect-container .sender-dropdown-container__list-item .icon-checkbox::after, .account-payment__sender-dropdown .multiselect-container .sender-dropdown-container__list-item .icon-checkbox::before {
        content: "";
        position: absolute;
        height: 1.125rem;
        width: 1.125rem;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
        display: block;
    }

    .account-payment__sender-dropdown .multiselect-container .sender-dropdown-container__list-item .icon-checkbox::before {
        border-radius: 4px;
        border: 1px solid #DBDFE4;
        background: #fff;
        transition: background 0.42s ease, border-color 0.3s ease;
    }

    .account-payment__sender-dropdown .multiselect-container .sender-dropdown-container__list-item .icon-checkbox::after {
        border-radius: 0.35rem;
        border: 1px solid #690DD3;
        background: url("../img/newDesign/icon/ico-checkbox.svg") no-repeat center center;
        opacity: 0;
        transition: opacity 0.42s ease;
    }

.debugUrl .account-payment__sender-dropdown .multiselect-container .sender-dropdown-container__list-item .icon-checkbox::after {
    background: url("/Content/themes/novapay/img/newDesign/icon/ico-checkbox.svg") no-repeat;
}

.account-payment__sender-dropdown .multiselect-container .sender-dropdown-container__list-item input[type=checkbox] {
    position: absolute;
    left: 0.875rem;
    opacity: 0;
    z-index: -1;
}

    .account-payment__sender-dropdown .multiselect-container .sender-dropdown-container__list-item input[type=checkbox]:checked + .icon-checkbox::after {
        opacity: 1;
    }

.account-payment__select-wrapper {
    display: flex;
    justify-content: space-between;
    gap: 1.25rem;
}

@media (max-width: 768px) {
    .account-payment__select-wrapper {
        flex-direction: column;
        gap: 0;
    }
}

.account-payment__account-list {
    padding-bottom: 20px;
    border-bottom: 1px solid #DBDFE4;
}

.account-payment__available-balance-wrapper {
    display: flex;
    flex-direction: column;
    width: 100%;
}

    .account-payment__available-balance-wrapper .balance-content {
        font-weight: 400;
    }

        .account-payment__available-balance-wrapper .balance-content .balance-count {
            font-weight: 600;
            background: transparent;
        }

    .account-payment__available-balance-wrapper .balance-content__action {
        color: #EB4235;
    }

.account-payment__available-balance {
    display: flex;
    align-items: center;
    max-width: -webkit-fill-available;
    width: 100%;
    height: fit-content;
    min-height: 2.5rem;
    padding: 0.375rem 0.75rem;
    font-weight: 400;
    border-radius: 0.5rem;
    background: #D9FCF4;
    color: #0D5C53;
    font-size: 15px;
}

@media (max-width: 768px) {
    .account-payment__available-balance {
        max-width: 100%;
        margin-top: 0.75rem;
    }
}

.account-payment__limit-warning {
    padding-top: 0.5rem;
}

    .account-payment__limit-warning .ico-n {
        color: #EB4235;
    }

.account-payment__footer {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 1rem 1.25rem;
    border-top: 1px solid #DBDFE4;
    background: #fff;
    z-index: 2;
}

    .account-payment__footer .button-group {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

        .account-payment__footer .button-group .btn {
            padding-bottom: 0.5rem;
            padding-top: 0.5rem;
        }

@media (max-width: 768px) {
    .account-payment__footer .button-group .btn {
        padding: 0.625rem;
        height: 40px;
    }
}

@media (max-width: 768px) {
    .account-payment__footer .button-group {
        align-items: end;
    }
}

.account-payment__footer .right-buttons {
    margin-left: auto;
    display: flex;
    gap: 0.75rem;
}

@media (max-width: 768px) {
    .account-payment__footer .right-buttons {
        flex-direction: column;
    }

        .account-payment__footer .right-buttons #vue_freePaymentNewSignAndSendButton .p-select {
            padding: 8px 10px;
        }
}

.account-payment .payment-form {
    padding: 20px 24px;
    font-style: normal;
    font-weight: 500;
}

@media (max-width: 992px) {
    .account-payment .payment-form {
        padding: 20px 16px;
    }
}

.account-payment .payment-form .error-border {
    border: 1px solid #EB4235;
}

.account-payment .payment-form .error-message {
    position: absolute;
    top: calc(100% + 5px);
    left: 0;
    color: #EB4235;
    font-size: 0.75rem;
    font-weight: normal;
}

@media (max-width: 768px) {
    .account-payment .payment-form .payment-template .error-message {
        top: calc(100% - 20px);
    }
}

.account-payment .payment-form .payment-receiver__header {
    display: flex;
    gap: 1rem;
}

.account-payment .payment-form .payment-receiver__title {
    color: #464B53;
    font-size: 1rem;
    line-height: 1.35;
}

.account-payment .payment-form .payment-receiver__account {
    margin-top: 1.25rem;
}

.account-payment .payment-form .payment-receiver__account-select {
    min-width: 116px;
    width: 25%;
}

.account-payment .payment-form .payment-receiver__account-subtitle {
    margin-bottom: 0.5rem;
}

.account-payment .payment-form .payment-receiver__account-form {
    display: flex;
    gap: 0.5rem;
}

.account-payment .payment-form .payment-receiver__account-input {
    min-width: 312px;
    width: 40%;
    margin: 0;
}

    .account-payment .payment-form .payment-receiver__account-input.p-autocomplete-input {
        padding-right: 0;
        border: none;
    }

.account-payment .payment-form .payment-receiver__account-disable-input {
    display: flex;
    flex-direction: column;
    min-width: 207px;
    width: -webkit-fill-available;
    display: flex;
    align-items: center;
    border-radius: 0.5rem;
}

.account-payment .payment-form .payment-receiver__account-disable-content {
    display: flex;
    align-items: center;
    min-height: 2.5rem;
    height: fit-content;
    padding: 0.375rem 0.75rem;
    border-radius: 0.5rem;
    background: #F4F6F7;
    font-size: 15px;
    font-weight: 500;
    color: #767F8A;
}

    .account-payment .payment-form .payment-receiver__account-disable-content:empty {
        opacity: 0;
        height: 0;
        min-height: 0;
        padding: 0;
    }

.account-payment .payment-form .payment-receiver__account-actual-payee {
    min-width: 120px;
    width: 100%;
}

.account-payment .payment-form .payment-receiver__document {
    margin-top: 1.75rem;
    display: flex;
    gap: 0.5rem;
}

    .account-payment .payment-form .payment-receiver__document.actual-payee {
        margin-top: 18px;
    }

.account-payment .payment-form .payment-receiver__document-form {
    width: 52%;
}

.account-payment .payment-form .payment-receiver__document-line {
    position: relative;
    display: flex;
    width: 100%;
    gap: 0.5rem;
}

    .account-payment .payment-form .payment-receiver__document-line .invalid-feedback {
        position: absolute;
        top: calc(100% - 0px);
    }

.account-payment .payment-form .payment-receiver__document-subtitle {
    margin-bottom: 8px;
}

.account-payment .payment-form .payment-receiver__document-subtitle1 {
    margin-bottom: 0;
}

.account-payment .payment-form .payment-receiver__document-select {
    min-width: 116px;
    width: 25%;
}

.account-payment .payment-form .payment-receiver__document-long-select {
    min-width: 170px;
}

@media (max-width: 767px) {
    .account-payment .payment-form .payment-receiver__document-long-select {
        min-width: inherit;
    }
}

.account-payment .payment-form .payment-receiver__document-input-seria {
    width: 4rem;
}

.account-payment .payment-form .payment-receiver__document-input-number {
    min-width: 7.5rem;
    width: 100%;
}

    .account-payment .payment-form .payment-receiver__document-input-number.p-autocomplete-input {
        padding-right: 0;
        border: none;
        border-start-end-radius: 0.5rem;
        border-end-end-radius: 0.5rem;
    }

.account-payment .payment-form .payment-receiver__document-input-name {
    width: 100%;
}

.account-payment .payment-form .payment-receiver__document-receiver {
    display: flex;
    align-items: center;
    margin-top: 1.25rem;
    width: fit-content;
    font-weight: normal;
    font-size: 15px;
}

.account-payment .payment-form .payment-receiver__document-title {
    position: relative;
    width: fit-content;
    padding-left: 2rem;
}

.account-payment .payment-form .payment-receiver__important {
    color: #EB4235;
}

.account-payment .payment-form .payment-receiver__actual-total-payee {
    position: relative;
    padding: 1.25rem 0 0 0;
    margin-top: 28px;
}

    .account-payment .payment-form .payment-receiver__actual-total-payee:before {
        content: "";
        position: absolute;
        top: 0;
        left: -1.5rem;
        height: 0.0625rem;
        width: calc(100% + 3rem);
        background: #DBDFE4;
    }

@media (max-width: 992px) {
    .account-payment .payment-form .payment-receiver__actual-total-payee:before {
        left: -1rem;
        width: calc(100% + 2rem);
    }
}

.account-payment .payment-form .payment-receiver__actual-total-payee .slider-container {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 176px;
    height: 2.5rem;
    border: 0.0625rem solid #DBDFE4;
    border-radius: 0.5rem;
    padding: 0.25rem;
}

    .account-payment .payment-form .payment-receiver__actual-total-payee .slider-container input[type=checkbox] {
        display: none;
    }

        .account-payment .payment-form .payment-receiver__actual-total-payee .slider-container input[type=checkbox]:checked ~ .slider-bg {
            left: 50%;
        }

        .account-payment .payment-form .payment-receiver__actual-total-payee .slider-container input[type=checkbox]:checked ~ .noTax {
            color: #767F8A;
        }

        .account-payment .payment-form .payment-receiver__actual-total-payee .slider-container input[type=checkbox]:checked ~ .tax {
            color: #690DD3;
        }

    .account-payment .payment-form .payment-receiver__actual-total-payee .slider-container label {
        position: relative;
        z-index: 1;
        flex: 1;
        text-align: center;
        cursor: pointer;
        color: #767F8A;
        transition: color 0.3s ease;
    }

        .account-payment .payment-form .payment-receiver__actual-total-payee .slider-container label.noTax {
            color: #690DD3;
        }

.account-payment .payment-form .payment-receiver__actual-total-payee .slider-bg {
    position: absolute;
    top: 4px;
    left: 4px;
    right: 0;
    width: calc(50% - 4px);
    height: calc(100% - 8px);
    background-color: #F5EDFF;
    border-radius: 8px;
    transition: left 0.32s ease;
}

.account-payment .payment-form .payment-receiver__actual-total-payee .payment-receiver__total {
    display: flex;
    flex-direction: column;
}

.account-payment .payment-form .payment-receiver__actual-total-payee .payment-receiver__total-sum {
    position: relative;
    height: 62px;
}

    .account-payment .payment-form .payment-receiver__actual-total-payee .payment-receiver__total-sum .invalid-feedback {
        position: unset;
        margin-top: 13px;
    }

.account-payment .payment-form .payment-receiver__actual-total-payee .payment-receiver__total .total-count {
    position: absolute;
    bottom: 0;
    display: block;
    width: max-content;
    margin: 0.5rem 0 0 0;
    color: #767F8A;
    font-size: 12px;
}

.account-payment .payment-form .payment-receiver__actual-total-payee .payment-receiver__total .total-detail {
    color: #32383c;
}

.account-payment .payment-form .payment-receiver__actual-total-payee .payment-receiver__total .invalid-feedback {
    left: 0;
}

.account-payment .payment-form .payment-receiver__actual-total-payee .payment-receiver__document-form {
    width: 100%;
}

.account-payment .payment-form .payment-receiver__actual-total-payee .payment-receiver__document-line {
    width: 100%;
}

@media (max-width: 768px) {
    .account-payment .payment-form .payment-receiver__actual-total-payee .payment-receiver__document-line {
        gap: 0;
        flex-direction: column;
    }
}

.account-payment .payment-form .payment-receiver__autocomplite-iban {
    position: relative;
}

.account-payment .payment-form .payment-receiver__config-tax {
    display: flex;
    gap: 8px;
}

.account-payment .payment-form .payment-receiver__purpose-block {
    padding-top: 1.75rem;
}

    .account-payment .payment-form .payment-receiver__purpose-block .purpose-title {
        display: flex;
        width: 100%;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 0.5rem;
        pointer-events: auto;
    }

        .account-payment .payment-form .payment-receiver__purpose-block .purpose-title .btn-select-directory {
            padding: 0 16px 0 0;
            pointer-events: all;
        }

            .account-payment .payment-form .payment-receiver__purpose-block .purpose-title .btn-select-directory:before {
                right: -8px;
            }

.account-payment .payment-form .payment-receiver__purpose-textarea {
    position: relative;
}

    .account-payment .payment-form .payment-receiver__purpose-textarea .invalid-feedback {
        position: absolute;
        top: calc(100% - 3px);
    }

    .account-payment .payment-form .payment-receiver__purpose-textarea .purpose-textarea {
        width: 100%;
        min-height: 112px;
        padding: 8px 12px;
        border-radius: 8px;
        border: 0.0625rem solid #DBDFE4;
        font-size: 15px;
        resize: none;
    }

@media (max-width: 768px) {
    .account-payment .payment-form .payment-receiver__purpose-textarea .purpose-textarea {
        min-height: 84px;
    }
}

.account-payment .payment-form .payment-receiver__purpose-textarea .textarea-count {
    position: absolute;
    right: 14px;
    bottom: 11.008px;
    color: #767F8A;
    font-size: 12px;
}

.account-payment .payment-form__btn-select-directory {
    position: relative;
    font-size: 12px;
    color: #690DD3;
    font-weight: 500;
    padding-right: 1.25rem;
}

    .account-payment .payment-form__btn-select-directory:before {
        content: "";
        position: absolute;
        right: -0.25rem;
        top: 50%;
        height: 24px;
        width: 24px;
        opacity: 1;
        transform: translateY(-50%) rotate(90deg);
        transform-origin: center;
        background: url("../img/newDesign/icon/icon-small-up-hover.svg") no-repeat center;
    }

.debugUrl .account-payment .payment-form__btn-select-directory:before {
    background: url("/Content/themes/novapay/img/newDesign/icon/icon-small-up-hover.svg") no-repeat center;
}

.account-payment .payment-form__btn-select-directory:hover {
    color: #5E1CAB;
}

.account-payment .payment-form__template {
    position: relative;
    padding: 1.25rem 0 1.75rem 0;
    margin-top: 1.75rem;
}

    .account-payment .payment-form__template:before {
        content: "";
        position: absolute;
        top: 0;
        left: -23.008px;
        height: 0.0625rem;
        width: calc(100% + 46.016px);
        background: #DBDFE4;
    }

@media (max-width: 992px) {
    .account-payment .payment-form__template:before {
        left: -16px;
        width: calc(100% + 32px);
    }
}

.account-payment .payment-form .payment-template__activator {
    padding-bottom: 0.375rem;
}

    .account-payment .payment-form .payment-template__activator .visually-hidden {
        clip: rect(0 0 0 0);
        clip-path: inset(50%);
        height: 0.0625rem;
        overflow: hidden;
        position: absolute;
        white-space: nowrap;
        width: 0.0625rem;
    }

    .account-payment .payment-form .payment-template__activator .checkbox-activator {
        display: flex;
        flex-direction: row;
        gap: 12px;
        justify-content: flex-start;
        align-items: center;
    }

    .account-payment .payment-form .payment-template__activator .toggle-activator {
        cursor: pointer;
        display: flex;
        min-width: 48px;
        height: 28px;
        border-radius: 400px;
        padding: 4px;
        transition: background 0.3s ease;
        background-color: #bababa;
        position: relative;
    }

        .account-payment .payment-form .payment-template__activator .toggle-activator:before {
            content: "";
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            min-width: 24px;
            height: 24px;
            border-radius: 50%;
            background-color: #fff;
            transition: opacity 0.3s ease, transform 0.3s ease;
        }

        .account-payment .payment-form .payment-template__activator .toggle-activator:before {
            left: 0.1875rem;
        }

        .account-payment .payment-form .payment-template__activator .toggle-activator:has(input[type=checkbox]:checked) {
            background-color: #690DD3;
        }

            .account-payment .payment-form .payment-template__activator .toggle-activator:has(input[type=checkbox]:checked):before {
                background-color: #fff;
                transform: translate(75%, -50%);
            }

    .account-payment .payment-form .payment-template__activator .label-activator {
        color: #202427;
        font-size: 14px;
    }

.account-payment .payment-form .payment-template__configurator {
    padding: 12px 0 0 0;
    display: flex;
    flex-direction: column;
}

    .account-payment .payment-form .payment-template__configurator .configurator-title {
        position: relative;
        font-size: 12px;
    }

        .account-payment .payment-form .payment-template__configurator .configurator-title:after {
            content: "*";
            position: relative;
            top: 0;
            right: 0;
            width: 8px;
            height: 100%;
            margin-left: 4px;
            color: #EB4235;
        }

    .account-payment .payment-form .payment-template__configurator .configurator-wrapper {
        display: flex;
        align-items: center;
        gap: 16px;
        justify-content: flex-start;
        padding: 8px 0 16px 0;
    }

@media (max-width: 768px) {
    .account-payment .payment-form .payment-template__configurator .configurator-wrapper {
        flex-direction: column;
        gap: 0;
        padding: 8px 0 0 0;
    }
}

.account-payment .payment-form .payment-template__configurator .template-name {
    display: flex;
    color: #767F8A;
    min-width: 356px;
}

.account-payment .payment-form .payment-template__configurator .template-name__field {
    display: block;
    width: 100%;
    min-height: 40px;
    padding: 8px 12px;
    border: 0.0625rem solid #DBDFE4;
    font-size: 15px;
    border-radius: 8px;
}

@media (max-width: 768px) {
    .account-payment .payment-form .payment-template__configurator .template-name {
        min-width: 100%;
        padding-bottom: 24px;
    }
}

.account-payment .payment-form .payment-template .recurrence-selector {
    display: flex;
    gap: 12px;
    align-items: center;
}

.account-payment .payment-form .payment-template .recurrence-selector__label {
    display: flex;
    align-items: center;
}

    .account-payment .payment-form .payment-template .recurrence-selector__label .invalid-feedback {
        position: absolute;
        top: calc(100% + 8px);
    }

.account-payment .payment-form .payment-template .recurrence-selector__title {
    position: relative;
    height: auto;
    padding-left: 28px;
    color: #32383c;
    font-weight: 400;
    font-size: 15px;
}

.account-payment .payment-form .payment-template .recurrence-selector__point-block {
    min-width: 140px;
    width: auto;
}

@media (max-width: 768px) {
    .account-payment .payment-form .payment-template .recurrence-selector__point-block {
        min-width: 127.008px;
    }
}

.account-payment .payment-form .payment-template .recurrence-selector__date-range {
    display: flex;
    align-items: center;
    gap: 16px;
    width: 100%;
    padding: 12px 28px 4px 0;
}

@media (max-width: 768px) {
    .account-payment .payment-form .payment-template .recurrence-selector__date-range {
        flex-direction: column;
        align-items: flex-start;
    }
}

.account-payment .payment-form .payment-template .recurrence-selector__date-range .date-range-title {
    display: block;
}

.account-payment .payment-form .payment-template .recurrence-selector__date-range .date-range__period-validity {
    position: relative;
    display: flex;
    align-items: center;
    gap: 1rem;
}

    .account-payment .payment-form .payment-template .recurrence-selector__date-range .date-range__period-validity .invalid-feedback {
        position: absolute;
    }

.account-payment .payment-form .payment-template .recurrence-selector__date-range .date-range-start,
.account-payment .payment-form .payment-template .recurrence-selector__date-range .date-range-end {
    min-width: 194px;
}

@media (max-width: 768px) {
    .account-payment .payment-form .payment-template .recurrence-selector__date-range .date-range-start,
    .account-payment .payment-form .payment-template .recurrence-selector__date-range .date-range-end {
        min-width: 144px;
    }
}

@media (max-width: 768px) {
    .account-payment .payment-form .payment-template .recurrence-selector__date-range .date-range-end .dropdown-calendar {
        right: -8px;
        left: auto;
    }
}

.account-payment .payment-form .payment-template .recurrence-selector__date-range .dropdown-calendar {
    left: -8px;
}

.account-payment .payment-form .payment-template .recurrence-selector__date-range .date-picker-content {
    width: 100%;
    padding: 4px 12px;
}

.account-payment .payment-form__transfer {
    position: relative;
}

    .account-payment .payment-form__transfer .payment-receiver__total {
        position: relative;
        padding-top: 1.25rem;
        margin-top: 1.75rem;
    }

        .account-payment .payment-form__transfer .payment-receiver__total:before {
            content: "";
            position: absolute;
            top: 0;
            left: -1.438rem;
            height: 0.0625rem;
            width: calc(100% + 2.476rem);
            background: #DBDFE4;
        }

@media (max-width: 768px) {
    .account-payment .payment-form__transfer .payment-receiver__total:before {
        left: -1rem;
        width: calc(100% + 2rem);
    }
}

.account-payment .payment-form__transfer-subtitle {
    margin: 1.25rem 0 0.5rem;
}

.account-payment .payment-form__transfer-inp-sum {
    margin-top: 0.5rem;
    max-width: 238px;
    width: 100%;
}

@media (max-width: 768px) {
    .account-payment .payment-form__transfer-inp-sum {
        max-width: none;
    }
}

.account-payment .payment-form__transfer-custom-select .account-payment__sender-dropdown {
    padding: 0;
}

@media (max-width: 768px) {
    .account-payment .payment-form__transfer-custom-select {
        max-width: none;
        width: 100%;
    }
}

.account-payment .payment-form__transfer-custom-select #SelfCreditCodeIBAN {
    display: none;
}

.account-payment .payment-form__transfer-select__value {
    color: #32383c;
}

.account-payment .payment-form__transfer-wrap {
    position: relative;
    margin-top: 3rem;
    margin-bottom: 0.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

    .account-payment .payment-form__transfer-wrap::after {
        content: "";
        position: absolute;
        top: -1.25rem;
        left: -23.008px;
        height: 0.0625rem;
        width: calc(100% + 46.016px);
        background: #DBDFE4;
    }

.account-payment .payment-form__transfer-payment {
    padding: 1.25rem 0 2.625rem;
}

@media (max-width: 768px) {
    .account-payment .payment-form__transfer-payment {
        padding: 1.25rem 0 1.75rem;
    }
}

.account-payment .payment-form__transfer-textarea {
    width: 100%;
    height: 5.5rem;
}

@media (max-width: 767px) {
    .account-payment .payment-form .payment-receiver__header {
        display: flex;
        justify-content: space-between;
    }

    .account-payment .payment-form .payment-receiver__account-form {
        flex-direction: column;
        gap: 0.5rem;
    }

    .account-payment .payment-form .payment-receiver__document-select, .account-payment .payment-form .payment-receiver__account-input, .account-payment .payment-form .payment-receiver__account-disable-input {
        width: 100%;
    }

    .account-payment .payment-form .payment-receiver__account-disable-input {
        margin-top: 0.75rem;
    }

    .account-payment .payment-form .payment-receiver__account-input {
        margin: 0;
        font-size: 15px;
    }

    .account-payment .payment-form .payment-receiver__document {
        margin-top: 24px;
        gap: 1.5rem;
        flex-direction: column;
    }

    .account-payment .payment-form .payment-receiver__document-form {
        width: 100%;
    }

    .account-payment .payment-form .payment-receiver__document-input-seria {
        max-width: 64px;
    }

    .account-payment .payment-form .payment-receiver__document-input-number {
        min-width: inherit;
    }

    .account-payment .payment-form .payment-receiver__document-receiver {
        margin-top: 32px;
    }

    .account-payment .payment-form .payment-receiver__account-actual-payee {
        width: auto;
        margin: 0;
    }

    .account-payment .payment-form .payment-receiver .actual-payee {
        display: flex;
        flex-direction: column;
        gap: 24px;
    }

    .account-payment .payment-form .payment-receiver__config-tax {
        margin-top: 20px;
    }

        .account-payment .payment-form .payment-receiver__config-tax .slider-container {
            min-width: 175px;
        }

            .account-payment .payment-form .payment-receiver__config-tax .slider-container .slider-bg {
                border-radius: 4px;
            }

    .account-payment .payment-form .payment-receiver__purpose-block {
        margin-top: 4px;
    }

    .account-payment .payment-form .payment-template .recurrence-selector {
        width: 100%;
        justify-content: space-between;
    }
}

.account-payment .payment-form__base-area .account-payment__radio-tabs {
    padding-left: 0;
    padding-right: 0;
    padding-bottom: 0.5rem;
}

@media (max-width: 768px) {
    .account-payment .payment-form__base-area .account-payment__radio-tabs {
        padding-bottom: 0.25rem;
    }
}

.account-payment .payment-form .p-autocomplete-loader {
    display: none !important;
}

    .account-payment .payment-form .p-autocomplete-loader + .custom-loader-container {
        display: block;
    }

.account-payment .tab-payment-taxes,
.account-payment .tab-payment-singleaccount,
.account-payment .tab-payment-rental,
.account-payment .tab-payment-other {
    padding-bottom: 0;
}

    .account-payment .tab-payment-taxes .payment-form,
    .account-payment .tab-payment-singleaccount .payment-form,
    .account-payment .tab-payment-rental .payment-form,
    .account-payment .tab-payment-other .payment-form {
        padding: 0;
    }

    .account-payment .tab-payment-taxes .payment-receiver__important,
    .account-payment .tab-payment-singleaccount .payment-receiver__important,
    .account-payment .tab-payment-rental .payment-receiver__important,
    .account-payment .tab-payment-other .payment-receiver__important {
        color: #EB4235;
    }

    .account-payment .tab-payment-taxes .tax-total-payee {
        position: relative;
        display: flex;
        align-items: normal;
        gap: 1.25rem;
        margin-top: 1.75rem;
        padding-top: 1.25rem;
    }

@media (max-width: 768px) {
    .account-payment .tab-payment-taxes .tax-total-payee {
        flex-direction: column;
        align-items: flex-start;
    }
}

.account-payment .tab-payment-taxes .tax-total-payee:before {
    content: "";
    position: absolute;
    top: 0;
    left: -1.438rem;
    height: 0.0625rem;
    width: calc(99% + 2.476rem);
    background: #DBDFE4;
}

@media (max-width: 768px) {
    .account-payment .tab-payment-taxes .tax-total-payee:before {
        left: -1rem;
        width: calc(100% + 2rem);
    }
}

.account-payment .tab-payment-taxes .tax-total-payee .payment-receiver__actual-total-payee {
    width: auto;
    margin: 0;
    padding: 0;
}

    .account-payment .tab-payment-taxes .tax-total-payee .payment-receiver__actual-total-payee:before {
        display: none;
    }

@media (max-width: 768px) {
    .account-payment .tab-payment-taxes .tax-total-payee .payment-receiver__actual-total-payee {
        width: 100%;
    }
}

.account-payment .tab-payment-taxes .tax-total-payee .tax-total-payment-code {
    display: flex;
    width: 100%;
    flex-direction: column;
}

@media (max-width: 1623px) {
    .account-payment .tab-payment-taxes .tax-total-payee .tax-total-payment-code {
        width: 68.5%;
    }
}

@media (max-width: 768px) {
    .account-payment .tab-payment-taxes .tax-total-payee .tax-total-payment-code {
        width: 100%;
    }
}

@media (max-width: 768px) {
    .account-payment .tab-payment-taxes .tax-total-payee .tax-total-payment-code__subtitle {
        display: flex;
        justify-content: space-between;
        width: 100%;
    }
}

.account-payment .tab-payment-taxes .tax-total-payee .tax-total-payment-code__notification {
    display: none;
    font-size: 12px;
    color: #690DD3;
    text-align: right;
    width: 100%;
    white-space: nowrap;
}

@media (max-width: 768px) {
    .account-payment .tab-payment-taxes .tax-total-payee .tax-total-payment-code__notification {
        display: block;
    }
}

.account-payment .tab-payment-taxes .tax-total-payee .tax-total-payment-code .payment-form__transfer-subtitle {
    margin-top: 0;
}

.account-payment .tab-payment-taxes .tax-total-payee .tax-total-payment-code .account-payment__sender-dropdown {
    padding: 0;
    width: 100%;
}

    .account-payment .tab-payment-taxes .tax-total-payee .tax-total-payment-code .account-payment__sender-dropdown .sender-dropdown-container {
        width: 100%;
        max-width: 42.375rem;
    }

.account-payment .tab-payment-taxes .tax-total-payee .tax-total-payment-code .sender-dropdown-container__list-item .form-check-content {
    position: relative;
    z-index: 1;
}

.account-payment .tab-payment-taxes .tax-total-payee .payment-form__transfer-custom-select {
    width: 100%;
    max-height: fit-content;
    max-width: fit-content;
    min-width: 100%;
}

.account-payment .tab-payment-taxes .payment-form .payment-receiver__purpose-block {
    padding-bottom: 0;
    padding-top: 1.75rem;
}

@media (max-width: 768px) {
    .account-payment .tab-payment-taxes .payment-form .payment-receiver__purpose-block {
        padding-top: 1.5rem;
    }
}

.account-payment .tab-payment-singleaccount {
    margin-top: 1.25rem;
}

    .account-payment .tab-payment-singleaccount .payment-form .payment-form__transfer-subtitle {
        margin-top: 0;
    }

    .account-payment .tab-payment-singleaccount .payment-form .payment-receiver__purpose-block {
        padding-bottom: 0;
        padding-top: 1.5rem;
    }

@media (max-width: 768px) {
    .account-payment .tab-payment-singleaccount .payment-form .payment-receiver__purpose-block {
        padding-top: 1.5rem;
        margin: 0;
    }
}

.account-payment .tab-payment-singleaccount .payment-form .payment-receiver__purpose-block .purpose-textarea {
    min-height: 3.75rem;
}

.account-payment .tab-payment-singleaccount .tax-decisio-wrapper {
    display: flex;
    gap: 1.25rem;
}

@media (max-width: 768px) {
    .account-payment .tab-payment-singleaccount .tax-decisio-wrapper {
        flex-direction: column;
    }
}

.account-payment .tab-payment-singleaccount .tax-decisio-wrapper .payment-receiver__actual-total-payee {
    margin: 0;
    padding: 0;
}

    .account-payment .tab-payment-singleaccount .tax-decisio-wrapper .payment-receiver__actual-total-payee:before {
        display: none;
    }

.account-payment .tab-payment-singleaccount .tax-decisio-wrapper .account-field {
    display: flex;
    flex-direction: column;
}

.account-payment .tab-payment-singleaccount .tax-decisio-wrapper .account-field__label {
    margin-bottom: 0.5rem;
    font-size: 12px;
    color: #767F8A;
}

.account-payment .tab-payment-singleaccount .tax-decisio-wrapper .account-field__input {
    padding: 0.5rem 0.75rem;
    min-width: 18.813rem;
    min-height: 2.5rem;
    border-radius: 0.5rem;
    border: 1px solid #DBDFE4;
    font-size: 15px;
    color: #767F8A;
}

@media (max-width: 768px) {
    .account-payment .tab-payment-singleaccount .tax-decisio-wrapper .account-field__input {
        width: 100%;
    }
}

.account-payment .tab-payment-singleaccount .tax-decisio-wrapper .payment-receiver__total .base-input {
    max-width: 9.438rem;
    width: 100%;
}

@media (max-width: 768px) {
    .account-payment .tab-payment-singleaccount .tax-decisio-wrapper .payment-receiver__total .base-input {
        max-width: 100%;
    }
}

.account-payment .tab-payment-singleaccount .tax-decision {
    display: flex;
    flex-direction: column;
    color: #767F8A;
}

.account-payment .tab-payment-singleaccount .tax-decision__label {
    display: block;
    margin-bottom: 0.5rem;
    font-size: 12px;
    color: #767F8A;
}

.account-payment .tab-payment-singleaccount .tax-decision__field-wrapper {
    position: relative;
}

.account-payment .tab-payment-singleaccount .tax-decision__input {
    padding: 0.5rem 0.75rem;
    min-width: 13.938rem;
    min-height: 2.5rem;
    border-radius: 0.5rem;
    border: 1px solid #DBDFE4;
    font-size: 15px;
}

@media (max-width: 768px) {
    .account-payment .tab-payment-singleaccount .tax-decision__input {
        width: 100%;
    }
}

.account-payment .tab-payment-singleaccount .tax-decision__tooltip {
    position: absolute;
    display: inline-block;
    cursor: pointer;
    height: 1.5rem;
    width: 1.5rem;
    right: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
}

    .account-payment .tab-payment-singleaccount .tax-decision__tooltip .icon-info {
        background: url("../img/newDesign/icon/info-hover.svg") no-repeat center;
    }

.debugUrl .account-payment .tab-payment-singleaccount .tax-decision__tooltip .icon-info {
    background: url("/Content/themes/novapay/img/newDesign/icon/info-hover.svg") no-repeat center;
}

.account-payment .tab-payment-singleaccount .tax-decision__tooltip:hover .tooltip-content, .account-payment .tab-payment-singleaccount .tax-decision__tooltip.active .tooltip-content {
    visibility: visible;
    opacity: 1;
}

.account-payment .tab-payment-singleaccount .tax-decision .tooltip-content {
    position: absolute;
    bottom: 120%;
    left: 50%;
    width: 13.813rem;
    transform: translateX(-50%);
    background: #202427;
    color: #fff;
    padding: 6px 8px;
    border-radius: 0.25rem;
    font-size: 11px;
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
    z-index: 100;
    text-align: center;
}

    .account-payment .tab-payment-singleaccount .tax-decision .tooltip-content:after {
        content: "";
        position: absolute;
        top: 100%;
        left: 50%;
        transform: translateX(-50%);
        border-width: 6px;
        border-style: solid;
        border-color: #202427 transparent transparent transparent;
    }

@media (max-width: 768px) {
    .account-payment .tab-payment-singleaccount .tax-decision .tooltip-content:after {
        left: 92%;
        transform: translateX(-93%);
    }
}

@media (max-width: 768px) {
    .account-payment .tab-payment-singleaccount .tax-decision .tooltip-content {
        left: 0;
        transform: translateX(-84%);
    }
}

.account-payment .tab-payment-singleaccount .tax-decision .tooltip-link {
    text-decoration: underline;
}

.account-payment .tab-payment-singleaccount__created-container {
    display: flex;
    flex-direction: column;
}

.account-payment .tab-payment-singleaccount__created-tax-field, .account-payment .tab-payment-singleaccount__created-template {
    width: 100%;
    position: relative;
    padding: 1.25rem 0;
}

    .account-payment .tab-payment-singleaccount__created-tax-field:before, .account-payment .tab-payment-singleaccount__created-template:before {
        content: "";
        position: absolute;
        top: 0;
        left: -1.438rem;
        height: 0.0625rem;
        width: calc(100% + 2.476rem);
        background: #DBDFE4;
    }

@media (max-width: 768px) {
    .account-payment .tab-payment-singleaccount__created-tax-field:before, .account-payment .tab-payment-singleaccount__created-template:before {
        left: -1rem;
        width: calc(100% + 2rem);
    }
}

.account-payment .tab-payment-singleaccount__created-template .created-template-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 1.25rem;
}

.account-payment .tab-payment-singleaccount__created-template .created-template-number {
    font-size: 15px;
}

.account-payment .tab-payment-singleaccount__created-template .btn-template-remove {
    display: flex;
    gap: 6px;
    align-items: center;
    color: #690DD3;
    font-size: 12px;
    font-weight: 500;
}

.account-payment .tab-payment-singleaccount__template-generator {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
}

@media (max-width: 768px) {
    .account-payment .tab-payment-singleaccount__template-generator {
        flex-direction: column;
        gap: 1.25rem;
        width: 100%;
    }
}

.account-payment .tab-payment-singleaccount__template-generator .payment-amount__container {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

@media (max-width: 768px) {
    .account-payment .tab-payment-singleaccount__template-generator .payment-amount__container {
        width: 100%;
    }
}

.account-payment .tab-payment-singleaccount__template-generator .payment-amount__title {
    font-size: 12px;
    color: #A56EE5;
    line-height: 1.3;
}

.account-payment .tab-payment-singleaccount__template-generator .payment-amount__value {
    min-height: 2.5rem;
    display: flex;
    align-items: center;
    padding: 0.375rem 0.75rem;
    border-radius: 0.5rem;
    background: #F5EDFF;
    color: #690DD3;
    font-weight: 500;
}

@media (max-width: 768px) {
    .account-payment .tab-payment-singleaccount .template-generator-container {
        width: 100%;
    }
}

.account-payment .tab-payment-singleaccount .btn-singleaccount-generate-template {
    position: relative;
    display: flex;
    gap: 0.5rem;
    padding-top: 0.425rem;
    padding-bottom: 0.425rem;
    min-height: 2.5rem;
    font-weight: 500;
}

@media (max-width: 768px) {
    .account-payment .tab-payment-singleaccount .btn-singleaccount-generate-template {
        width: 100%;
    }
}

.account-payment .tab-payment-singleaccount .btn-singleaccount-generate-template:hover {
    background: #fff;
}

    .account-payment .tab-payment-singleaccount .btn-singleaccount-generate-template:hover .icon-plus {
        background: url("../img/newDesign/icon/icon-account-plus-hover.svg") no-repeat center;
    }

.debugUrl .account-payment .tab-payment-singleaccount .btn-singleaccount-generate-template:hover .icon-plus {
    background: url("/Content/themes/novapay/img/newDesign/icon/icon-account-plus-hover.svg") no-repeat center;
}

.account-payment .tab-payment-rental {
    display: flex;
    flex-direction: column;
}

    .account-payment .tab-payment-rental .rental-payment-details {
        display: flex;
        width: 100%;
        align-items: end;
        padding: 0.5rem 0 1.75rem 0;
    }

@media (max-width: 768px) {
    .account-payment .tab-payment-rental .rental-payment-details {
        padding: 0.5rem 0 1.5rem 0;
    }
}

.account-payment .tab-payment-rental .account-iBan-field {
    max-width: 20.125rem;
    width: 100%;
    padding-right: 1.25rem;
}

@media (max-width: 768px) {
    .account-payment .tab-payment-rental .account-iBan-field {
        max-width: 100%;
    }
}

.account-payment .tab-payment-rental .account-iBan-field__label {
    display: block;
    margin-bottom: 0.5rem;
}

.account-payment .tab-payment-rental .account-iBan-field__input {
    padding: 0.5rem 0.75rem;
    width: 100%;
    min-height: 2.5rem;
    border-radius: 0.5rem;
    border: 1px solid #DBDFE4;
    font-size: 15px;
    color: #32383c;
}

.account-payment .tab-payment-rental .account-card-field__input {
    padding: 0.5rem 0.75rem;
    min-width: 15.625rem;
    min-height: 2.5rem;
    border-radius: 0.5rem;
    border: 1px solid #DBDFE4;
    font-size: 15px;
    color: #767F8A;
}

@media (max-width: 768px) {
    .account-payment .tab-payment-rental .account-card-field__input {
        width: 100%;
    }
}

.account-payment .tab-payment-rental .rental-payment-receiver {
    display: flex;
    flex-direction: column;
}

.account-payment .tab-payment-rental .rental-payment-receiver__label {
    display: block;
    margin-bottom: 0.5rem;
}

.account-payment .tab-payment-rental .rental-payment-receiver__input {
    padding: 0.5rem 0.75rem;
    max-width: 20.125rem;
    min-height: 2.5rem;
    border-radius: 0.5rem;
    border: 1px solid #DBDFE4;
    font-size: 15px;
    color: #767F8A;
}

@media (max-width: 768px) {
    .account-payment .tab-payment-rental .rental-payment-receiver__input {
        width: 100%;
    }
}

.account-payment .tab-payment-rental .rental-total-payee {
    position: relative;
    display: flex;
    align-items: normal;
    gap: 1.25rem;
    margin-top: 1.75rem;
    padding-top: 1.25rem;
}

@media (max-width: 768px) {
    .account-payment .tab-payment-rental .rental-total-payee {
        flex-direction: column;
        align-items: flex-start;
    }
}

.account-payment .tab-payment-rental .rental-total-payee:before {
    content: "";
    position: absolute;
    top: 0;
    left: -1.438rem;
    height: 0.0625rem;
    width: calc(99% + 2.876rem);
    background: #DBDFE4;
}

@media (max-width: 768px) {
    .account-payment .tab-payment-rental .rental-total-payee:before {
        left: -1rem;
        width: calc(100% + 2rem);
    }
}

.account-payment .tab-payment-rental .rental-total-payee .payment-receiver__actual-total-payee {
    width: auto;
    margin: 0;
    padding: 0;
}

    .account-payment .tab-payment-rental .rental-total-payee .payment-receiver__actual-total-payee:before {
        display: none;
    }

@media (max-width: 768px) {
    .account-payment .tab-payment-rental .rental-total-payee .payment-receiver__actual-total-payee {
        width: 100%;
    }
}

.account-payment .tab-payment-rental .rental-total-payee .rental-total-payment-code {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
}

@media (max-width: 1623px) {
    .account-payment .tab-payment-rental .rental-total-payee .rental-total-payment-code {
        width: 68%;
    }
}

@media (max-width: 768px) {
    .account-payment .tab-payment-rental .rental-total-payee .rental-total-payment-code {
        width: 100%;
    }
}

@media (max-width: 768px) {
    .account-payment .tab-payment-rental .rental-total-payee .rental-total-payment-code__subtitle {
        display: flex;
        justify-content: space-between;
        width: 100%;
    }
}

.account-payment .tab-payment-rental .rental-total-payee .rental-total-payment-code__notification-link {
    position: absolute;
    right: 0;
    top: 0;
    width: fit-content;
    font-size: 12px;
    text-align: right;
    color: #690DD3;
}

    .account-payment .tab-payment-rental .rental-total-payee .rental-total-payment-code__notification-link:before {
        content: "";
        position: absolute;
        height: 1px;
        width: 100%;
        bottom: 0;
        background: #690DD3;
    }

    .account-payment .tab-payment-rental .rental-total-payee .rental-total-payment-code__notification-link:hover {
        color: #690DD3 !important;
    }

.account-payment .tab-payment-rental .rental-total-payee .rental-total-payment-code .account-payment__sender-dropdown {
    padding: 0;
}

    .account-payment .tab-payment-rental .rental-total-payee .rental-total-payment-code .account-payment__sender-dropdown .sender-dropdown-container {
        width: 100%;
        max-width: 42.375rem;
    }

        .account-payment .tab-payment-rental .rental-total-payee .rental-total-payment-code .account-payment__sender-dropdown .sender-dropdown-container .form-check-content {
            position: relative;
            z-index: 1;
        }

.account-payment .tab-payment-rental .rental-total-payee .rental-total-payment-code .payment-form__transfer-subtitle {
    margin-top: 0;
}

.account-payment .tab-payment-rental .rental-total-payee .payment-form__transfer-custom-select {
    width: 100%;
    max-height: fit-content;
    max-width: fit-content;
    min-width: 100%;
}

.account-payment .tab-payment-rental .rental-total-edit,
.account-payment .tab-payment-rental .rental-detail-add {
    padding-top: 1.75rem;
}

@media (max-width: 768px) {
    .account-payment .tab-payment-rental .rental-total-edit,
    .account-payment .tab-payment-rental .rental-detail-add {
        padding-top: 1.5rem;
    }
}

.account-payment .tab-payment-rental .rental-total-edit .btn-rental-total-edit,
.account-payment .tab-payment-rental .rental-total-edit .btn-add-rental-details,
.account-payment .tab-payment-rental .rental-detail-add .btn-rental-total-edit,
.account-payment .tab-payment-rental .rental-detail-add .btn-add-rental-details {
    min-width: 16rem;
    height: 2.5rem;
}

@media (max-width: 768px) {
    .account-payment .tab-payment-rental .rental-total-edit .btn-rental-total-edit,
    .account-payment .tab-payment-rental .rental-total-edit .btn-add-rental-details,
    .account-payment .tab-payment-rental .rental-detail-add .btn-rental-total-edit,
    .account-payment .tab-payment-rental .rental-detail-add .btn-add-rental-details {
        width: 100%;
        min-width: 100%;
    }
}

.account-payment .tab-payment-rental .rental-total-edit .btn-rental-total-edit .ico-n,
.account-payment .tab-payment-rental .rental-total-edit .btn-add-rental-details .ico-n,
.account-payment .tab-payment-rental .rental-detail-add .btn-rental-total-edit .ico-n,
.account-payment .tab-payment-rental .rental-detail-add .btn-add-rental-details .ico-n {
    margin-right: 0.5rem;
}

.account-payment .tab-payment-rental .rental-total-edit .btn-rental-total-edit .ico-n,
.account-payment .tab-payment-rental .rental-detail-add .btn-rental-total-edit .ico-n {
    margin-right: 0.5rem;
    background: url("../img/newDesign/icon/icon-account-edit-hover.svg") no-repeat center;
}

.debugUrl .account-payment .tab-payment-rental .rental-total-edit .btn-rental-total-edit .ico-n,
.debugUrl .account-payment .tab-payment-rental .rental-detail-add .btn-rental-total-edit .ico-n {
    background: url("/Content/themes/novapay/img/newDesign/icon/icon-account-edit-hover.svg") no-repeat center;
}

.account-payment .tab-payment-rental .rental-total-edit .rental-detail-notification,
.account-payment .tab-payment-rental .rental-detail-add .rental-detail-notification {
    display: block;
    padding-top: 0.75rem;
    color: #EB4235;
    font-size: 14px;
}

.account-payment .tab-payment-rental .rental-total-edit {
    gap: 0.75rem;
}

    .account-payment .tab-payment-rental .rental-total-edit .config-rental-detail {
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }

    .account-payment .tab-payment-rental .rental-total-edit .config-rental-detail__content {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

@media (max-width: 768px) {
    .account-payment .tab-payment-rental .rental-total-edit {
        flex-direction: column;
    }
}

.account-payment .tab-payment-other {
    display: flex;
    flex-direction: column;
    padding-top: 1.25rem;
}

    .account-payment .tab-payment-other .other-payment-details {
        display: flex;
        width: 100%;
        align-items: end;
        padding: 0;
    }

    .account-payment .tab-payment-other .account-iBan-field {
        max-width: 20.125rem;
        width: 100%;
        padding-right: 1.25rem;
    }

@media (max-width: 768px) {
    .account-payment .tab-payment-other .account-iBan-field {
        max-width: 100%;
    }
}

.account-payment .tab-payment-other .account-iBan-field__label {
    display: block;
    margin-bottom: 0.5rem;
}

.account-payment .tab-payment-other .account-iBan-field__input {
    padding: 0.5rem 0.75rem;
    width: 100%;
    min-height: 2.5rem;
    border-radius: 0.5rem;
    border: 1px solid #DBDFE4;
    font-size: 15px;
    color: #32383c;
}

.account-payment .modal-rental-detail {
    position: absolute;
    right: 0;
    left: auto;
    top: 1.25rem;
    height: calc(100% - 2.5rem);
    width: 0;
    background: #fff;
    overflow: hidden;
    transform: translateX(100%);
    transition: transform 0.3s ease, left 0.3s ease, opacity 0.3s ease;
    opacity: 0;
    border-radius: 0.5rem;
    z-index: 10;
}

    .account-payment .modal-rental-detail.open {
        right: auto;
        left: -35%;
        transform: translateX(0);
        width: 312px;
        opacity: 1;
    }

@media (max-width: 1623px) {
    .account-payment .modal-rental-detail.open {
        left: -43.5%;
    }
}

@media (max-width: 1110px) {
    .account-payment .modal-rental-detail.open {
        left: 2.5%;
        z-index: 17;
    }
}

@media (max-width: 768px) {
    .account-payment .modal-rental-detail.open {
        left: 0;
        z-index: 17;
        height: 100%;
        top: 0;
        width: 100%;
        border-radius: 0;
    }
}

.account-payment .rental-detail__container {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
}

@media (max-width: 768px) {
    .account-payment .rental-detail__container {
        overflow-y: auto;
    }
}

.account-payment .rental-detail__header {
    display: flex;
    justify-content: space-between;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid #DBDFE4;
}

.account-payment .rental-detail__title {
    color: #464B53;
    font-size: 16px;
}

.account-payment .rental-detail__close {
    padding: 0;
}

.account-payment .rental-detail__content {
    flex: 1;
    padding: 1.5rem 1rem 0;
}

.account-payment .rental-detail__form {
    padding-bottom: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1.75rem;
}

.account-payment .rental-detail__form-group {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.account-payment .rental-detail__form-label, .account-payment .rental-detail__notification {
    color: #767F8A;
    font-size: 12px;
}

@media (max-width: 768px) {
    .account-payment .rental-detail__notification {
        padding-bottom: 1rem;
    }
}

.account-payment .rental-detail__custom-select {
    position: relative;
    width: 100%;
    background: #fff;
    border: 1px solid #DBDFE4;
    border-radius: 0.5rem;
    cursor: pointer;
}

.account-payment .rental-detail__select-selected {
    position: relative;
    width: 100%;
    padding: 0.75rem 2.188rem 0.75rem 0.75rem;
    border-radius: 0.5rem;
    text-align: left;
    font-weight: normal;
}

    .account-payment .rental-detail__select-selected .custom-select__arrow {
        position: absolute;
        top: 50%;
        right: 0;
        transition: transform 0.2s ease-out;
        transform: translate(-50%, -50%) rotate(0deg);
    }

    .account-payment .rental-detail__select-selected.open .custom-select__arrow {
        transform: translate(-50%, -50%) rotate(180deg);
    }

.account-payment .rental-detail__type-list {
    position: absolute;
    top: 109%;
    left: 0;
    width: 100%;
    border-radius: 0.5rem;
    list-style: none;
    padding: 0;
    margin: 0;
    background: #fff;
    border: 1px solid #DBDFE4;
    z-index: 10;
    margin: 0;
    padding: 0;
    overflow: auto;
    max-height: 23.25rem;
    list-style: none;
    background-color: #fff;
    scrollbar-width: thin;
    scrollbar-color: rgba(168, 173, 180, 0.5);
}

    .account-payment .rental-detail__type-list::-webkit-scrollbar-track {
        background: rgba(168, 173, 180, 0.5);
        border-radius: 0.25rem;
    }

    .account-payment .rental-detail__type-list::-webkit-scrollbar-thumb {
        background: rgba(168, 173, 180, 0.5);
        border-radius: 0.25rem;
    }

        .account-payment .rental-detail__type-list::-webkit-scrollbar-thumb:hover {
            background: rgba(168, 173, 180, 0.5);
        }

.account-payment .rental-detail__type-item {
    position: relative;
    padding: 10px;
    cursor: pointer;
    overflow: hidden;
}

    .account-payment .rental-detail__type-item:not(:last-of-type)::before {
        content: "";
        position: absolute;
        height: 1px;
        width: 100%;
        left: 50%;
        bottom: 0;
        background: #DBDFE4;
        transform: translateX(-50%);
    }

    .account-payment .rental-detail__type-item::after {
        content: "";
        position: absolute;
        top: 50%;
        left: 50%;
        width: 0;
        height: 0;
        background: #f0f0f0;
        border-radius: 50%;
        transform: translate(-50%, -50%);
        transition: width 0.22s ease, height 0.22s ease;
        z-index: -1;
    }

    .account-payment .rental-detail__type-item:hover::after {
        width: 200%;
        height: 200%;
    }

.account-payment .rental-detail__footer {
    margin-top: auto;
    margin-top: auto;
    padding: 1rem;
    display: flex;
    justify-content: space-between;
    border-top: 1px solid #DBDFE4;
}

.account-payment .date-start-lease .date-picker-wrapper .date-picker-content {
    width: 100%;
}

.account-payment .date-start-lease .date-picker-wrapper .btn-date-picker {
    font-weight: normal;
    width: 100%;
    padding: 0;
    text-align: left;
}

.account-payment .date-start-lease .date-picker-wrapper .date-display {
    display: block;
    width: 100%;
    padding: 0;
    color: #767F8A;
    font-size: 15px;
}

.account-payment .date-start-lease .date-picker-wrapper .date-field-range {
    padding: 0.5rem 0.75rem;
    border-color: transparent;
    border-radius: 0.75rem;
    width: 100%;
}

@media (max-width: 479px) {
    .account-payment__title {
        padding: 1.25rem 1rem 1rem;
    }

        .account-payment__title .title-wrapper {
            gap: 8px;
        }

        .account-payment__title.edit .title-editor-field {
            width: calc(100% + 1.95rem);
        }

    .account-payment .date-picker-wrapper {
        display: flex;
        align-items: center;
        gap: 0.25rem;
        font-weight: 400;
        font-size: 12px;
    }

    .account-payment__radio-tabs {
        padding: 1rem 1rem 1.25rem;
    }

    .account-payment__select {
        padding: 0 1rem 1.25rem;
    }

    .account-payment__available-balance {
        padding: 0.375rem 0.75rem;
    }

    .account-payment__account-list {
        padding-bottom: 28px;
    }
}

.PaymentCreateModal_CreditStateCode-wraper .invalid-feedback {
    position: unset !important;
}

.modal-directories-recipients {
    padding: 0 !important;
    max-width: 926px;
    width: 100% !important;
    min-height: 564px;
    border: 1px solid #DBDFE4;
    border-radius: 12px !important;
}

    .modal-directories-recipients .modal-content {
        display: contents;
    }

    .modal-directories-recipients *, .modal-directories-recipients :after, .modal-directories-recipients :before {
        box-sizing: border-box;
        font-family: "Fixel Text", "Fixel Display", "Helvetica", "Arial", sans-serif !important;
    }

.debugUrl .modal-directories-recipients *, .debugUrl .modal-directories-recipients :after, .debugUrl .modal-directories-recipients :before {
    font-family: "Fixel Text", "Fixel Display", "Helvetica", "Arial", sans-serif !important;
}

.modal-directories-recipients__loading {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    z-index: 1000;
    display: none;
    background: rgba(255, 255, 255, 0.6);
    backdrop-filter: blur(4px);
    z-index: 10000;
}

    .modal-directories-recipients__loading:before {
        position: absolute;
        content: "";
        display: block;
        top: 50%;
        left: calc(50% - 25px);
        width: 50px;
        height: 50px;
        background: url("../img/newDesign/spinner-loading.png") no-repeat center;
        animation: rotate 1s linear infinite;
        transform: translate(-50%, -50%);
    }

.debugUrl .modal-directories-recipients__loading:before {
    background: url("/Content/themes/novapay/img/newDesign/spinner-loading.png") no-repeat center;
}

.modal-directories-recipients .directory-recipients__container {
    position: relative;
    max-height: 570px;
    height: 100%;
    border-radius: 12px;
    width: 100%;
    background: #FFF;
}

@media (max-width: 480px) {
    .modal-directories-recipients .directory-recipients__container {
        max-height: 580px;
    }
}

.modal-directories-recipients .directory-recipients__header {
    padding: 20px 14px 20px 20px;
    display: flex;
    gap: 16px;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #e1e6f0;
}

.modal-directories-recipients .directory-recipients__header-header {
    color: #32383c;
    font-size: 20px;
    font-style: normal;
    font-weight: 600;
    line-height: 24px;
}

.modal-directories-recipients .directory-recipients__header-title {
    color: #32383c;
    font-size: 20px;
    font-style: normal;
    font-weight: 600;
    line-height: 24px;
}

.modal-directories-recipients .directory-recipients__close {
    padding: 6px;
    border: none;
    background: none;
    cursor: pointer;
}

.modal-directories-recipients .directory-recipients__section-inputs {
    padding: 12px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
}

.modal-directories-recipients .directory-recipients__section-left, .modal-directories-recipients .directory-recipients__section-right {
    width: 50%;
}

.modal-directories-recipients .directory-recipients__label {
    margin-bottom: 0.5rem;
}

.modal-directories-recipients .directory-recipients__input-wrap {
    position: relative;
}

.modal-directories-recipients .directory-recipients__icon {
    position: absolute;
    width: 24px;
    height: 24px;
    left: 12px;
    top: 8px;
}

.modal-directories-recipients .directory-recipients__select-value {
    max-height: 24px;
    overflow: hidden;
}

.modal-directories-recipients .directory-recipients__custom-select, .modal-directories-recipients .directory-recipients__search {
    width: -webkit-fill-available;
}

.modal-directories-recipients .directory-recipients__select-list {
    max-height: 20rem;
    overflow-y: auto;
    scrollbar-width: thin;
}

.modal-directories-recipients .directory-recipients__search {
    padding-left: 40px;
}

.modal-directories-recipients .directory-recipients__table {
    height: 358px;
}

.modal-directories-recipients .directory-recipients__table-header {
    padding: 8px 20px;
    display: flex;
    align-items: center;
    gap: 12px;
    border: 1px solid #EDEFF1;
    background: #EDEFF1;
}

.modal-directories-recipients .directory-recipients__table-header-data {
    color: #767F8A;
    font-size: 12px;
    font-weight: 500;
    line-height: 16px;
}

.modal-directories-recipients .directory-recipients__table-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 20px;
    border-bottom: 1px solid #e1e6f0;
}

.modal-directories-recipients .directory-recipients__table-body {
    overflow-y: auto;
    max-height: 325px;
}

    .modal-directories-recipients .directory-recipients__table-body .directory-recipients__table-row:last-child {
        border-bottom: none;
    }

.modal-directories-recipients .directory-recipients__table-data {
    color: #32383c;
    font-family: "Fixel Display";
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: 18px;
    min-width: 190px;
}

.modal-directories-recipients .directory-recipients__table-btn {
    padding: 8px 12px;
    font-weight: 400;
}

.modal-directories-recipients .directory-recipients__table-column1 {
    max-width: 290px;
    width: 100%;
}

.modal-directories-recipients .directory-recipients__table-column2 {
    max-width: 148px;
    width: 100%;
}

.modal-directories-recipients .directory-recipients__table-column3 {
    max-width: 260px;
    width: 100%;
}

.modal-directories-recipients .directory-recipients__table-column4 {
    display: flex;
    justify-content: end;
    max-width: 152px;
    width: 100%;
}

.modal-directories-recipients .directory-recipients__footer {
    padding: 12px 20px;
}

@media (max-width: 480px) {
    .modal-directories-recipients .directory-recipients__footer {
        padding: 6px 20px;
    }
}

.modal-directories-recipients .directory-recipients__footer-pages {
    color: #767F8A;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 16px;
}

    .modal-directories-recipients .directory-recipients__footer-pages span {
        color: #32383c;
        font-size: 16px;
    }

@media (max-width: 480px) {
    .modal-directories-recipients .directory-recipients__footer-pages span {
        font-size: 14px;
    }
}

.modal-directories-recipients .directory-recipients__mobile-container {
    max-height: 310px;
    overflow-y: auto;
}

.modal-directories-recipients .directory-recipients__mobile {
    display: none;
}

@media (max-width: 768px) {
    .modal-directories-recipients .directory-recipients__table {
        display: none;
    }

    .modal-directories-recipients .directory-recipients__section-inputs {
        flex-direction: column;
        gap: 12px;
    }

    .modal-directories-recipients .directory-recipients__section-left, .modal-directories-recipients .directory-recipients__section-right {
        width: 100%;
    }

        .modal-directories-recipients .directory-recipients__section-right .directory-recipients__label {
            display: none;
        }

    .modal-directories-recipients .directory-recipients__mobile {
        margin: 16px;
        padding: 12px;
        display: block;
        border-radius: 8px;
        border: 1px solid #EDEFF1;
        background: #FFF;
    }

    .modal-directories-recipients .directory-recipients__mobile-header {
        position: relative;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .modal-directories-recipients .directory-recipients__mobile-wrap {
        padding-bottom: 8px;
        border-bottom: 1px solid #EDEFF1;
        width: 100%;
        margin-bottom: 8px;
    }

    .modal-directories-recipients .directory-recipients__mobile-lable {
        margin-bottom: 4px;
    }

    .modal-directories-recipients .directory-recipients__mobile-data {
        overflow: hidden;
        color: #32383c;
        font-size: 14px;
        font-weight: 500;
        line-height: 18px;
    }

    .modal-directories-recipients .directory-recipients__mobile-btn {
        width: 100%;
        font-size: 14px;
    }

    .modal-directories-recipients .directory-recipients__mobile-footer .directory-recipients__mobile-wrap {
        border-bottom: none;
    }

    .modal-directories-recipients .directory-recipients__mobile-icon-dropdown {
        position: absolute;
        right: 0;
        top: 7px;
        width: 24px;
        height: 24px;
        transform: rotate(0deg);
        transition: transform 0.3s ease-out;
    }

    .modal-directories-recipients .directory-recipients__mobile .active .directory-recipients__mobile-icon-dropdown {
        transform: rotate(180deg);
        transition: transform 0.3s ease-out;
    }
}

.modal-directories-recipients .p-datatable-table .p-datatable-thead th {
    position: sticky;
    top: 0;
    height: 2.5rem;
    vertical-align: middle;
    background-color: #EDEFF1;
}

    .modal-directories-recipients .p-datatable-table .p-datatable-thead th .p-datatable-column-title {
        font-size: 12px;
        font-weight: 500;
        color: #767F8A;
        white-space: nowrap;
    }

.modal-directories-recipients .p-datatable-table .directory-recipients__table-column {
    color: #32383c;
    font-size: 14px;
    font-weight: 500;
}

.js-directory-recipients__mobile-accordion-content {
    overflow: hidden;
    transition: max-height 0.3s ease-out;
}

.js-directory-recipients__mobile-header.active + .js-directory-recipients__mobile-accordion-content,
.js-directory-recipients__mobile-header.active + .js-directory-recipients__mobile-accordion-content + .js-directory-recipients__mobile-accordion-content {
    display: block;
    flex-direction: column;
    transition: max-height 0.8s ease-out;
}

@media (max-width: 576px) {
    .modal-directories-recipients {
        top: 50% !important;
        transform: translate(0%, -50%) !important;
    }
}

.modal-directories-recipients {
    padding: 0 !important;
    max-width: 926px;
    width: 100% !important;
    min-height: 564px;
    border: 1px solid #DBDFE4;
    border-radius: 12px !important;
}

    .modal-directories-recipients *,
    .modal-directories-recipients :after,
    .modal-directories-recipients :before {
        box-sizing: border-box;
        font-family: "Fixel Text", "Fixel Display", "Helvetica", "Arial", sans-serif !important;
    }

.debugUrl .modal-directories-recipients *,
.debugUrl .modal-directories-recipients :after,
.debugUrl .modal-directories-recipients :before {
    font-family: "Fixel Text", "Fixel Display", "Helvetica", "Arial", sans-serif !important;
}

.modal-directories-recipients__loading {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    z-index: 1000;
    display: none;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.6);
    backdrop-filter: blur(4px);
    z-index: 10000;
}

    .modal-directories-recipients__loading:before {
        position: absolute;
        content: "";
        display: block;
        top: 50%;
        left: calc(50% - 25px);
        width: 50px;
        height: 50px;
        background: url("../img/newDesign/spinner-loading.png") no-repeat center;
        animation: rotate 1s linear infinite;
        transform: translate(-50%, -50%);
    }

.debugUrl .modal-directories-recipients__loading:before {
    background: url("/Content/themes/novapay/img/newDesign/spinner-loading.png") no-repeat center;
}

.modal-directories-recipients .directory-payment__container {
    position: relative;
    max-height: 570px;
    min-height: 565px;
    height: 100%;
    border-radius: 12px;
    width: 100%;
}

@media (max-width: 480px) {
    .modal-directories-recipients .directory-payment__container {
        max-height: 580px;
    }
}

.modal-directories-recipients .directory-payment__header {
    padding: 20px 14px 20px 20px;
    display: flex;
    gap: 16px;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #e1e6f0;
}

.modal-directories-recipients .directory-payment__header-header {
    color: #32383c;
    font-size: 20px;
    font-style: normal;
    font-weight: 600;
    line-height: 24px;
}

.modal-directories-recipients .directory-payment__header-title {
    color: #32383c;
    font-size: 20px;
    font-style: normal;
    font-weight: 600;
    line-height: 24px;
}

.modal-directories-recipients .directory-payment__close {
    padding: 6px;
    border: none;
    background: none;
    cursor: pointer;
}

.modal-directories-recipients .directory-payment__section-inputs {
    padding: 12px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
}

.modal-directories-recipients .directory-payment__section-left, .modal-directories-recipients .directory-payment__section-right {
    width: 50%;
}

.modal-directories-recipients .directory-payment__label {
    margin-bottom: 8px;
}

.modal-directories-recipients .directory-payment__input-wrap {
    position: relative;
}

.modal-directories-recipients .directory-payment__icon {
    position: absolute;
    width: 24px;
    height: 24px;
    left: 12px;
    top: 8px;
}

.modal-directories-recipients .directory-payment__select-value {
    max-height: 24px;
    overflow: hidden;
}

.modal-directories-recipients .directory-payment__search {
    width: -webkit-fill-available;
    padding-left: 40px;
}

.modal-directories-recipients .directory-payment__slider-container {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 40px;
    border: 0.0625rem solid #DBDFE4;
    border-radius: 8px;
    padding: 4px;
}

    .modal-directories-recipients .directory-payment__slider-container input[type=checkbox] {
        display: none;
    }

        .modal-directories-recipients .directory-payment__slider-container input[type=checkbox]:checked ~ .directory-payment__slider-bg {
            left: 50%;
        }

        .modal-directories-recipients .directory-payment__slider-container input[type=checkbox]:checked ~ .noTax {
            color: #767F8A;
        }

        .modal-directories-recipients .directory-payment__slider-container input[type=checkbox]:checked ~ .tax {
            color: #690DD3;
        }

    .modal-directories-recipients .directory-payment__slider-container label {
        position: relative;
        z-index: 1;
        flex: 1;
        text-align: center;
        cursor: pointer;
        color: #767F8A;
        transition: color 0.3s ease;
    }

        .modal-directories-recipients .directory-payment__slider-container label.noTax {
            color: #690DD3;
        }

.modal-directories-recipients .directory-payment__slider-bg {
    position: absolute;
    top: 4px;
    left: 4px;
    right: 0;
    width: calc(50% - 4px);
    height: calc(100% - 8px);
    background-color: #F5EDFF;
    border-radius: 8px;
    transition: left 0.32s ease;
}

.modal-directories-recipients .directory-payment__table-header {
    padding: 8px 20px;
    display: flex;
    align-items: center;
    gap: 12px;
    border: 1px solid #EDEFF1;
    background: #EDEFF1;
}

.modal-directories-recipients .directory-payment__table-header-data {
    color: #767F8A;
    font-size: 12px;
    font-weight: 500;
    line-height: 16px;
}

.modal-directories-recipients .directory-payment__table-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 20px;
    border-bottom: 1px solid #e1e6f0;
}

.modal-directories-recipients .directory-payment__table-body {
    overflow-y: auto;
    max-height: 325px;
}

    .modal-directories-recipients .directory-payment__table-body .directory-payment__table-row:last-child {
        border-bottom: none;
    }

.modal-directories-recipients .directory-payment__table-data {
    color: #32383c;
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: 18px;
    min-width: 190px;
}

.modal-directories-recipients .directory-payment__table-btn {
    padding: 8px 12px;
    font-weight: 400;
}

.modal-directories-recipients .directory-payment__table-column1 {
    max-width: 290px;
    width: 100%;
    overflow-wrap: anywhere;
}

.modal-directories-recipients .directory-payment__table-column2 {
    max-width: 350px;
    width: 100%;
    overflow-wrap: anywhere;
}

.modal-directories-recipients .directory-payment__table-column3 {
    display: flex;
    justify-content: end;
    width: 100%;
    overflow-wrap: anywhere;
}

.modal-directories-recipients .directory-payment__footer {
    padding: 12px 20px;
}

@media (max-width: 480px) {
    .modal-directories-recipients .directory-payment__footer {
        padding: 6px 20px;
    }
}

.modal-directories-recipients .directory-payment__footer-pages {
    color: #767F8A;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 16px;
}

    .modal-directories-recipients .directory-payment__footer-pages span {
        color: #32383c;
        font-size: 16px;
    }

@media (max-width: 480px) {
    .modal-directories-recipients .directory-payment__footer-pages span {
        font-size: 14px;
    }
}

.modal-directories-recipients .directory-payment__mobile-container {
    max-height: 310px;
    overflow-y: auto;
}

@media (max-width: 410px) {
    .modal-directories-recipients .directory-payment__mobile-container {
        max-height: 302px;
    }
}

.modal-directories-recipients .directory-payment__mobile {
    display: none;
}

@media (max-width: 768px) {
    .modal-directories-recipients .directory-payment__table {
        display: none;
    }

    .modal-directories-recipients .directory-payment__section-inputs {
        flex-direction: column;
        gap: 12px;
    }

    .modal-directories-recipients .directory-payment__section-left, .modal-directories-recipients .directory-payment__section-right {
        width: 100%;
    }

        .modal-directories-recipients .directory-payment__section-right .directory-payment__label {
            display: none;
        }

    .modal-directories-recipients .directory-payment__mobile {
        margin: 16px;
        padding: 12px;
        display: block;
        border-radius: 8px;
        border: 1px solid #EDEFF1;
        background: #FFF;
    }

    .modal-directories-recipients .directory-payment__mobile-header {
        position: relative;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .modal-directories-recipients .directory-payment__mobile-wrap {
        padding-bottom: 8px;
        border-bottom: 1px solid #EDEFF1;
        width: 100%;
        margin-bottom: 8px;
    }

    .modal-directories-recipients .directory-payment__mobile-lable {
        margin-bottom: 4px;
    }

    .modal-directories-recipients .directory-payment__mobile-data {
        overflow: hidden;
        color: #32383c;
        font-size: 14px;
        font-weight: 500;
        line-height: 18px;
    }

    .modal-directories-recipients .directory-payment__mobile-btn {
        width: 100%;
        font-size: 14px;
    }

    .modal-directories-recipients .directory-payment__mobile-footer .directory-payment__mobile-wrap {
        border-bottom: none;
    }

    .modal-directories-recipients .directory-payment__mobile-icon-dropdown {
        position: absolute;
        right: 0;
        top: 7px;
        width: 24px;
        height: 24px;
        transform: rotate(0deg);
        transition: transform 0.3s ease-out;
    }

    .modal-directories-recipients .directory-payment__mobile .active .directory-payment__mobile-icon-dropdown {
        transform: rotate(180deg);
        transition: transform 0.3s ease-out;
    }
}

.js-directory-payment__mobile-accordion-content {
    overflow: hidden;
    transition: max-height 0.3s ease-out;
}

    .js-directory-payment__mobile-accordion-content.active {
        max-height: 500px;
    }

.js-directory-payment__mobile-header.active + .js-directory-payment__mobile-accordion-content,
.js-directory-payment__mobile-header.active + .js-directory-payment__mobile-accordion-content + .js-directory-payment__mobile-accordion-content {
    display: block;
    flex-direction: column;
    transition: max-height 0.8s ease-out;
}

.postpaid-container {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;
    min-height: calc(100vh - 112px - 40px);
    background: #fff;
    border-radius: 0.75rem;
}

    .postpaid-container * {
        box-sizing: border-box;
    }

@media (max-width: 768px) {
    .postpaid-container {
        height: fit-content;
    }
}

.postpaid-container .postpaid-header {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: auto;
    padding: 1.5rem;
    box-shadow: 0px 4px 34px 0px rgba(191, 195, 204, 0.3);
    border-bottom: 1px solid #DBDFE4;
    z-index: 1;
    border-top-right-radius: 0.75rem;
    border-top-left-radius: 0.75rem;
    background: #fff;
}

@media (max-width: 479px) {
    .postpaid-container .postpaid-header {
        padding: 24px 12px;
    }
}

.postpaid-container .postpaid-configuration {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

@media (max-width: 991px) {
    .postpaid-container .postpaid-configuration {
        flex-direction: column;
        gap: 1.25rem;
        width: 100%;
    }
}

.postpaid-container .postpaid-configuration__cell {
    display: flex;
    flex-direction: column;
}

.postpaid-container .postpaid-configuration__cell-select {
    width: 100%;
    gap: 0.5rem;
    display: flex;
    flex-direction: column;
}

@media (max-width: 991px) {
    .postpaid-container .postpaid-configuration__cell {
        width: 100%;
    }
}

.postpaid-container .postpaid-configuration__format .custom-select {
    width: 7.75rem;
}

@media (max-width: 1279px) {
    .postpaid-container .postpaid-configuration__format .custom-select {
        width: 85px;
    }
}

@media (max-width: 991px) {
    .postpaid-container .postpaid-configuration__format .custom-select {
        width: 100%;
        max-width: 100%;
    }
}

.postpaid-container .postpaid-configuration__generate-statement {
    padding-top: 1.5rem;
    margin-left: 0.5rem;
}

@media (max-width: 1279px) {
    .postpaid-container .postpaid-configuration__generate-statement {
        margin-left: 0;
    }
}

@media (max-width: 991px) {
    .postpaid-container .postpaid-configuration__generate-statement {
        padding-top: 8px;
    }
}

.postpaid-container .postpaid-configuration__title {
    color: #767F8A;
    font-size: 14px;
}

.postpaid-container .postpaid-configuration__data-wrap {
    gap: 8px;
    display: flex;
    align-items: center;
    max-height: 2.5rem;
    padding: 0.5rem 0.75rem;
    border-radius: 0.5rem;
    width: 275px;
    border: 1px solid #DBDFE4;
    background: #FFF;
    cursor: pointer;
}

@media (max-width: 1279px) {
    .postpaid-container .postpaid-configuration__data-wrap {
        min-width: max-content;
        width: 14.625rem;
    }
}

@media (max-width: 73.75rem) {
    .postpaid-container .postpaid-configuration__data-wrap {
        min-width: 8.4375rem;
        width: auto;
    }
}

.postpaid-container .postpaid-configuration__data-icon {
    width: 1.5rem;
    height: 1.5rem;
}

.postpaid-container .postpaid-configuration__data-info {
    color: #32383C;
    font-size: 16px;
    font-weight: normal;
    line-height: 1.25rem;
}

.postpaid-container .postpaid-configuration__right {
    display: flex;
    align-items: center;
    gap: 1rem;
}

@media (max-width: 1279px) {
    .postpaid-container .postpaid-configuration__right {
        gap: 10.4px;
    }
}

@media (max-width: 991px) {
    .postpaid-container .postpaid-configuration__right {
        flex-direction: column;
        width: 100%;
        gap: 1rem;
    }
}

.postpaid-container .postpaid-configuration .postpaid-select {
    position: relative;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: column;
    justify-content: space-between;
    width: 100%;
    max-width: 16.75rem;
    min-width: 13.75rem;
    border-radius: 0.75rem;
    font-size: 14px;
    font-weight: 500;
    color: #767F8A;
    background-color: #fff;
    line-height: 1.35;
}

@media (max-width: 992px) {
    .postpaid-container .postpaid-configuration .postpaid-select {
        max-width: 100%;
    }
}

.postpaid-container .postpaid-configuration .postpaid-select .sender-dropdown-container__select-allItem {
    display: none !important;
}

.postpaid-container .postpaid-configuration .postpaid-select .account-payment__sender-dropdown {
    padding: 0;
}

.postpaid-container .postpaid-configuration .postpaid-select .sender-dropdown-container {
    width: auto;
}

    .postpaid-container .postpaid-configuration .postpaid-select .sender-dropdown-container .sender-dropdown-container__show {
        margin: 0;
    }

    .postpaid-container .postpaid-configuration .postpaid-select .sender-dropdown-container .title-selected__item {
        display: none;
    }

.postpaid-container .postpaid-configuration .btn-generate-statement {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0.5rem 1rem;
    border-radius: 0.5rem;
    text-align: center;
    font-size: 14px;
    font-weight: 600;
    width: 13.875rem;
    gap: 0.5rem;
    background-color: #690DD3;
    color: #FFF;
    transition: background-color 0.22s ease-out;
    cursor: pointer;
    border: none;
}

    .postpaid-container .postpaid-configuration .btn-generate-statement:hover {
        background-color: #5E1CAB;
        transition: background-color 0.42s ease-out;
        color: #FFF !important;
    }

    .postpaid-container .postpaid-configuration .btn-generate-statement:active {
        background-color: #5E1CAB;
        transition: background-color 0.42s ease-out;
        color: #FFF !important;
    }

    .postpaid-container .postpaid-configuration .btn-generate-statement__disabled, .postpaid-container .postpaid-configuration .btn-generate-statement:disabled {
        pointer-events: none;
        cursor: not-allowed;
        opacity: 0.5;
    }

@media (max-width: 73.75rem) {
    .postpaid-container .postpaid-configuration .btn-generate-statement {
        width: 100%;
        padding: 8px 10px;
    }
}

.postpaid-container__notification {
    height: 100%;
    min-height: 46.75rem;
}

.postpaid-container__empty {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100vh;
}

.postpaid-container__empty-img {
    width: 12.563rem;
    height: 12.563rem;
    background: url("../img/newDesign/box_error.png") no-repeat center;
    background-size: contain;
    image-rendering: crisp-edges;
    image-rendering: pixelated;
}

.debugUrl .postpaid-container__empty-img {
    background: url("/Content/themes/novapay/img/newDesign/box_error.png") no-repeat center;
    background-size: contain;
    image-rendering: crisp-edges;
    image-rendering: pixelated;
}

.postpaid-container__empty-title {
    color: #464B53;
    text-align: center;
    font-size: 1rem;
    font-style: normal;
    font-weight: 500;
    line-height: 1.25rem;
    margin-bottom: 0.75rem;
}

.postpaid-container__empty-description {
    color: #767F8A;
    text-align: center;
    font-size: 14px;
    font-style: normal;
    font-weight: normal;
    line-height: 1.125rem;
}

.postpaid-container .notification-message {
    display: flex;
    flex-direction: column;
    text-align: center;
    justify-content: center;
    padding: 0.75rem;
    background: #fff;
    border-top-left-radius: 12px;
    border-bottom-left-radius: 12px;
}

@media (max-width: 992px) {
    .postpaid-container .notification-message {
        padding-bottom: 2.281rem;
        padding-top: 2.281rem;
        border-top-right-radius: 12px;
        border-bottom-left-radius: 0;
    }
}

.postpaid-container .notification-message__images {
    display: block;
    margin: 0 auto 1.25rem auto;
}

.postpaid-container .notification-message__images-empty {
    width: 12.563rem;
    height: 12.563rem;
    background: url("../img/newDesign/box_error.png") no-repeat center;
    background-size: contain;
}

.debugUrl .postpaid-container .notification-message__images-empty {
    background: url("/Content/themes/novapay/img/newDesign/box_error.png") no-repeat center;
}

.postpaid-container .notification-message .notification-message-title {
    margin: 0 0 1rem 0;
    color: #464B53;
}

.postpaid-container .notification-message__instruction {
    display: flex;
    flex-direction: column;
    font-size: 14px;
    color: #767F8A;
}

@media (max-width: 992px) {
    .postpaid-container .notification-message__instruction {
        font-size: 12px;
    }
}

.postpaid-container .notification-message .instruction-item:not(:last-of-type) {
    padding-bottom: 0.5rem;
}

.postpaid-container .notification-message__form {
    position: absolute;
    bottom: 1.5rem;
    left: 50%;
    width: 100%;
    padding: 0 0.75rem;
    font-size: 14px;
    font-style: normal;
    font-weight: normal;
    color: #767F8A;
    transform: translateX(-50%);
}

.postpaid-container .notification-message__form-link {
    text-decoration-line: underline;
    text-decoration-style: solid;
    text-decoration-skip-ink: auto;
    text-decoration-thickness: auto;
    text-underline-offset: auto;
    text-underline-position: from-font;
    font-weight: 500;
    color: #690DD3;
}

@media (max-width: 1100px) {
    .postpaid-container .notification-message__form {
        position: relative;
        margin-top: 1.5rem;
        bottom: 0;
    }
}

.postpaid-container .notification-video {
    display: flex;
    justify-content: center;
    height: 100%;
    width: 100%;
    border-top-right-radius: 0.75rem;
    border-bottom-right-radius: 0.75rem;
}

@media (max-width: 992px) {
    .postpaid-container .notification-video {
        border-top-right-radius: 0;
        border-bottom-right-radius: 0;
    }
}

@media (max-width: 768px) {
    .postpaid-container .notification-video {
        height: fit-content;
    }
}

.postpaid-container .notification-video .video-instruction {
    display: flex;
    width: 100%;
    overflow: hidden;
}

@media (max-width: 768px) {
    .postpaid-container .notification-video .video-instruction {
        overflow: visible;
    }
}

.postpaid-container .notification-video .video-instruction video {
    flex: 1 1 100%;
}

@media (max-width: 768px) {
    .postpaid-container .notification-video .video-instruction video {
        width: 100%;
    }
}

.postpaid-container .notification-video .instruction-img {
    height: 100%;
    width: 100%;
    background: #E1CFF6;
    border-top-right-radius: 0.75rem;
    border-bottom-right-radius: 0.75rem;
}

    .postpaid-container .notification-video .instruction-img img {
        display: block;
        width: 100%;
    }

@media (max-width: 992px) {
    .postpaid-container .notification-video .instruction-img img {
        border-top-right-radius: 0;
        border-bottom-right-radius: 0.75rem;
        border-bottom-left-radius: 0.75rem;
    }
}

.postpaid-container .postpaid-content {
    display: flex;
    flex-direction: column;
    max-height: calc(100vh - 112px - 40px);
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(168, 173, 180, 0.5);
}

    .postpaid-container .postpaid-content::-webkit-scrollbar-track {
        background: rgba(168, 173, 180, 0.5);
        border-radius: 0.25rem;
    }

    .postpaid-container .postpaid-content::-webkit-scrollbar-thumb {
        background: rgba(168, 173, 180, 0.5);
        border-radius: 0.25rem;
    }

        .postpaid-container .postpaid-content::-webkit-scrollbar-thumb:hover {
            background: rgba(168, 173, 180, 0.5);
        }

@media (max-height: 56.25rem) {
    .postpaid-container .postpaid-content {
        max-height: 100%;
    }
}

.postpaid-container .postpaid-content__header {
    width: 100%;
    padding: 1.5rem 1.5rem 0.5rem;
    font-size: 14px;
    color: #767F8A;
    border-bottom: 1px solid #DBDFE4;
}

@media (max-width: 768px) {
    .postpaid-container .postpaid-content__header {
        border-bottom: none;
        padding: 2rem 1.5rem 0.75rem;
    }
}

.postpaid-container .postpaid-content__table {
    display: block;
    width: 100%;
    height: 100%;
}

@media (max-width: 768px) {
    .postpaid-container .postpaid-content {
        padding: 0;
    }
}

.postpaid-container .postpaid-table__row {
    display: grid;
    grid-template-columns: 3rem 1fr 1fr 9.063rem;
    gap: 1rem;
    padding: 1rem 1.5rem;
    border-bottom: 1px solid #DBDFE4;
}

    .postpaid-container .postpaid-table__row.blurred-bg {
        position: relative;
        overflow: hidden;
        background: rgba(255, 255, 255, 0.5);
        z-index: 0;
    }

        .postpaid-container .postpaid-table__row.blurred-bg:before {
            content: "";
            position: absolute;
            left: 0;
            top: 0;
            height: 100%;
            width: 100%;
            filter: blur(7px);
            backdrop-filter: blur(2px);
            z-index: 1;
        }

@media (max-width: 768px) {
    .postpaid-container .postpaid-table__row {
        display: flex;
        flex-direction: column;
        padding: 0 0 1.5rem 0;
        gap: 0;
    }
}

.postpaid-container .postpaid-table__time-point {
    margin-top: 3px;
}

.postpaid-container .postpaid-table__cell {
    display: flex;
    align-items: center;
}

@media (max-width: 768px) {
    .postpaid-container .postpaid-table__cell {
        padding-bottom: 0.75rem;
    }
}

.postpaid-container .postpaid-table__cell--icon {
    justify-content: center;
    padding: 0.75rem;
    background: #F5EDFF;
    border-radius: 0.5rem;
}

@media (max-width: 768px) {
    .postpaid-container .postpaid-table__cell--icon {
        display: none;
    }
}

.postpaid-container .postpaid-table__cell--info {
    flex-direction: column;
    align-items: baseline;
    justify-content: center;
}

    .postpaid-container .postpaid-table__cell--info .info-title {
        margin-bottom: 0.25rem;
        font-size: 16px;
        color: #32383c;
    }

@media (max-width: 768px) {
    .postpaid-container .postpaid-table__cell--info .info-title {
        margin-bottom: 1rem;
    }
}

.postpaid-container .postpaid-table__cell--info .info-notification {
    font-size: 12px;
    color: #767F8A;
}

@media (max-width: 768px) {
    .postpaid-container .postpaid-table__cell--info {
        position: relative;
        order: 2;
        padding: 0 0.75rem 0.75rem;
    }

        .postpaid-container .postpaid-table__cell--info:before {
            content: "";
            position: absolute;
            bottom: 0;
            left: 0.75rem;
            width: calc(100% - 24px);
            height: 1px;
            background: #DBDFE4;
        }
}

.postpaid-container .postpaid-table__cell--time {
    font-size: 12px;
}

@media (max-width: 768px) {
    .postpaid-container .postpaid-table__cell--time {
        order: 1;
        padding-top: 0;
    }
}

.postpaid-container .postpaid-table__cell--time .ico-n {
    margin-right: 0.25rem;
}

.postpaid-container .postpaid-table__cell--time .time-point {
    position: relative;
    border-radius: 0.5rem;
    padding: 0.25rem 0.5rem;
    display: flex;
    align-items: center;
    min-width: 99.5px;
}

@media (max-width: 768px) {
    .postpaid-container .postpaid-table__cell--time .time-point {
        width: 100%;
        border-radius: 0;
        text-align: center;
    }
}

.postpaid-container .postpaid-table__cell--time .time-point:hover .tooltip-content, .postpaid-container .postpaid-table__cell--time .time-point.active .tooltip-content {
    visibility: visible;
    opacity: 1;
}

.postpaid-container .postpaid-table__cell--time.indicator-sufficient-time .time-point {
    color: #7F560F;
    background: #FFF5DD;
}

.postpaid-container .postpaid-table__cell--time.indicator-limit-time .time-point {
    color: #C6261A;
    background: #FFEBEA;
}

.postpaid-container .postpaid-table__cell--time .tooltip-content {
    position: absolute;
    bottom: 120%;
    left: 50%;
    width: 13.813rem;
    transform: translateX(-50%);
    background: #202427;
    color: #fff;
    padding: 6px 8px;
    border-radius: 0.25rem;
    font-size: 11px;
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
    z-index: 100;
    text-align: center;
}

    .postpaid-container .postpaid-table__cell--time .tooltip-content:after {
        content: "";
        position: absolute;
        top: 100%;
        left: 50%;
        transform: translateX(-50%);
        border-width: 6px;
        border-style: solid;
        border-color: #202427 transparent transparent transparent;
    }

@media (max-width: 768px) {
    .postpaid-container .postpaid-table__cell--time .tooltip-content:after {
        left: 92%;
        transform: translateX(-93%);
    }
}

@media (max-width: 768px) {
    .postpaid-container .postpaid-table__cell--time .tooltip-content {
        left: 0;
        transform: translateX(-84%);
    }
}

.postpaid-container .postpaid-table__cell--action .download-btn {
    display: flex;
    align-items: center;
    padding: 0.5rem 0.75rem;
    border-radius: 0.5rem;
    border: none;
    font-size: 14px;
    color: #464B53;
    background: #EDEFF1;
    cursor: pointer;
}

    .postpaid-container .postpaid-table__cell--action .download-btn__disabled, .postpaid-container .postpaid-table__cell--action .download-btn:disabled {
        pointer-events: none;
        cursor: not-allowed;
        opacity: 0.5;
    }

    .postpaid-container .postpaid-table__cell--action .download-btn:hover {
        border-color: rgb(51.0416666667%, 13.1915266106%, 94.6516106443%);
        color: rgb(31.8014705882%, 3.93732493%, 63.9058123249%);
        background-color: #F5EDFF;
        transition: background-color 0.42s ease-out;
    }

        .postpaid-container .postpaid-table__cell--action .download-btn:hover .ico-n {
            display: inline-block;
            width: 24px;
            height: 24px;
            background-color: currentColor;
            background-image: none;
            mask-image: url("../img/sprite.svg#icon-download-hover");
        }

.debugUrl .postpaid-container .postpaid-table__cell--action .download-btn:hover .ico-n {
    mask-image: url("/Content/themes/novapay/img/sprite.svg#icon-download-hover");
}

.postpaid-container .postpaid-table__cell--action .download-btn:hover .ico-n {
    mask-repeat: no-repeat;
    mask-size: contain;
}

.postpaid-container .postpaid-table__cell--action .download-btn:active {
    border-color: rgb(31.8014705882%, 3.93732493%, 63.9058123249%);
    color: rgb(31.8014705882%, 3.93732493%, 63.9058123249%);
    transition: background-color 0.42s ease-out;
}

@media (max-width: 768px) {
    .postpaid-container .postpaid-table__cell--action .download-btn {
        justify-content: center;
    }
}

@media (max-width: 768px) {
    .postpaid-container .postpaid-table__cell--action {
        order: 3;
        padding: 0.75rem 0.75rem 0;
    }
}

.postpaid-container .icon-search__new {
    transform: translateY(-0.5rem);
}

.modal-postpaid.p-dialog .p-dialog-header {
    padding: 0;
    justify-content: flex-end;
}

.modal-postpaid.p-dialog .p-dialog-content {
    padding: 0;
}

.modal-postpaid__error {
    padding: 1rem 1rem 2rem 1rem;
}

    .modal-postpaid__error .postpaid-error__images {
        display: flex;
        align-items: center;
        justify-content: center;
    }

        .modal-postpaid__error .postpaid-error__images .error-images {
            width: 6.813rem;
            height: 3.125rem;
            background: url("../img/newDesign/postpaid-error.svg") no-repeat center;
        }

.debugUrl .modal-postpaid__error .postpaid-error__images .error-images {
    background: url("/Content/themes/novapay/img/newDesign/postpaid-error.svg") no-repeat center;
}

.modal-postpaid__error .postpaid-error__content {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.modal-postpaid__error .postpaid-error__title {
    margin-bottom: 0.5rem;
    color: #ED1C24;
    font-size: 1.25rem;
    font-weight: 600;
}

.modal-postpaid__error .postpaid-error__message {
    font-size: 14px;
    color: #6D737E;
}

.modal-postpaid__loading {
    padding: 2.25rem 2.75rem;
}

.modal-postpaid__content.generate-statement {
    display: flex;
    justify-content: center;
}

    .modal-postpaid__content.generate-statement span {
        color: #464B53;
        text-align: center;
    }

.modal-postpaid__no-data {
    padding: 2rem;
}

    .modal-postpaid__no-data .postpaid-no-data__images-wrapper {
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 1rem;
    }

        .modal-postpaid__no-data .postpaid-no-data__images-wrapper .postpaid-no-data-images {
            width: 6.813rem;
            height: 3.125rem;
            background: url("../img/newDesign/postpaid-error.svg") no-repeat center;
        }

.debugUrl .modal-postpaid__no-data .postpaid-no-data__images-wrapper .postpaid-no-data-images {
    background: url("/Content/themes/novapay/img/newDesign/postpaid-error.svg") no-repeat center;
}

.modal-postpaid__no-data .postpaid-no-data__content {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.modal-postpaid__no-data .postpaid-no-data__title {
    margin-bottom: 0.5rem;
    color: #ED1C24;
    font-size: 1.25rem;
    font-weight: 600;
}

.modal-postpaid__no-data .postpaid-no-data__message {
    text-align: center;
    line-height: 21px;
    font-size: 14px;
    color: #6D737E;
}

@media (max-width: 460px) {
    .modal-postpaid__no-data .postpaid-no-data__message {
        width: 110%;
    }
}

.modal-postpaid__no-data .postpaid-no-data__message:not(:last-of-type) {
    margin-bottom: 0.25rem;
}

.modal-postpaid__processing .postpaid-processing__header {
    position: relative;
    padding: 1.25rem 0.875rem 1.25rem 1.25rem;
}

    .modal-postpaid__processing .postpaid-processing__header .btn-close__postpaid {
        right: 1rem;
    }

.modal-postpaid__processing .postpaid-processing__title {
    font-size: 1.25rem;
    font-weight: 600;
    color: #32383c;
}

.modal-postpaid__processing .postpaid-processing__content {
    padding: 0 1.25rem 1.25rem 1.25rem;
}

.modal-postpaid__processing .postpaid-processing__message {
    font-size: 15px;
    color: #32383c;
}

.modal-postpaid__processing .postpaid-processing__footer {
    padding: 1.25rem 1rem;
    width: 100%;
    display: flex;
    justify-content: end;
}

.modal-postpaid__processing .postpaid-processing__button {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0.5rem 0.75rem;
    border-radius: 0.5rem;
    text-align: center;
    font-size: 14px;
    font-weight: 600;
    background-color: #690DD3;
    color: #FFF;
    transition: background-color 0.22s ease-out;
    cursor: pointer;
    border: none;
}

    .modal-postpaid__processing .postpaid-processing__button:hover {
        background-color: #5E1CAB;
        transition: background-color 0.42s ease-out;
        color: #FFF !important;
    }

    .modal-postpaid__processing .postpaid-processing__button:active {
        background-color: #5E1CAB;
        transition: background-color 0.42s ease-out;
        color: #FFF !important;
    }

.modal-postpaid .postpaid-loading {
    position: relative;
    display: flex;
    justify-content: center;
    padding-top: 2rem;
    margin-bottom: 1.25rem;
}

.modal-postpaid .postpaid-loading__spiner {
    position: absolute !important;
    top: 0;
    width: 2rem;
    height: 2rem;
    background: url("../img/newDesign/icon/loader.png") no-repeat center center;
    animation: spin 1s linear infinite;
}

    .modal-postpaid .postpaid-loading__spiner.debugUrl {
        background: url("/Content/themes/novapay/img/newDesign/icon/loader.png") no-repeat center center;
    }

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

#modalPostpaidloading .postpaid-additional-class,
#modalPostpaidError .postpaid-additional-class,
#modalPostpaidnodata .postpaid-additional-class,
#modalPostpaidProcessing .postpaid-additional-class {
    padding: 0;
}

    #modalPostpaidloading .postpaid-additional-class .modal-postpaid,
    #modalPostpaidError .postpaid-additional-class .modal-postpaid,
    #modalPostpaidnodata .postpaid-additional-class .modal-postpaid,
    #modalPostpaidProcessing .postpaid-additional-class .modal-postpaid {
        justify-content: center;
        align-items: center;
    }

        #modalPostpaidloading .postpaid-additional-class .modal-postpaid .btn-close__postpaid,
        #modalPostpaidError .postpaid-additional-class .modal-postpaid .btn-close__postpaid,
        #modalPostpaidnodata .postpaid-additional-class .modal-postpaid .btn-close__postpaid,
        #modalPostpaidProcessing .postpaid-additional-class .modal-postpaid .btn-close__postpaid {
            position: absolute;
            right: 0.5rem;
            top: 0.5rem;
            padding: 0.375rem;
            background: transparent;
            border: none;
            cursor: pointer;
        }

#modalPostpaidProcessing .modal-content {
    max-width: 35rem;
    width: 100%;
}

@media (max-width: 576px) {
    .postpaid-additional-class {
        top: 50% !important;
        height: fit-content;
        border-radius: 12px !important;
        width: 94% !important;
        min-width: 200px !important;
        transform: translate(3%, -50%) !important;
    }
}

.icon-extracts {
    background-color: #873DDC !important;
    display: inline-block;
    width: 24px;
    height: 24px;
    background-color: currentColor;
    background-image: none;
    mask-image: url("../img/sprite.svg#icon-menu-extracts-hover");
}

.debugUrl .icon-extracts {
    mask-image: url("/Content/themes/novapay/img/sprite.svg#icon-menu-extracts-hover");
}

.icon-extracts {
    mask-repeat: no-repeat;
    mask-size: contain;
}

.modal-dialog.modal-extracts {
    perspective: 1200px;
    background: transparent !important;
}

    .modal-dialog.modal-extracts .modal-extract {
        backface-visibility: hidden;
        background-color: #fff;
        transform-style: preserve-3d;
        will-change: transform;
        border-radius: 0.75rem;
    }

        .modal-dialog.modal-extracts .modal-extract:after {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: #DBDFE4;
            transform: rotateY(180deg);
            backface-visibility: hidden;
            z-index: 0;
            pointer-events: none;
        }

.modal-dialog.extract-error-modal .btn-close__modal, .modal-dialog.extract-confirmation-email .btn-close__modal {
    position: absolute;
    right: 0.5rem;
    top: 0.5rem;
    background: transparent;
}

.extracts-container {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;
    min-height: calc(100vh - 112px - 40px);
    background: #fff;
    border-radius: 0.75rem;
}

    .extracts-container * {
        box-sizing: border-box;
    }

    .extracts-container .extracts-content {
        display: flex;
        flex-direction: column;
        max-height: calc(100vh - 112px - 40px);
        overflow-y: auto;
        scrollbar-width: thin;
        scrollbar-color: rgba(168, 173, 180, 0.5);
    }

        .extracts-container .extracts-content::-webkit-scrollbar-track {
            background: rgba(168, 173, 180, 0.5);
            border-radius: 0.25rem;
        }

        .extracts-container .extracts-content::-webkit-scrollbar-thumb {
            background: rgba(168, 173, 180, 0.5);
            border-radius: 0.25rem;
        }

            .extracts-container .extracts-content::-webkit-scrollbar-thumb:hover {
                background: rgba(168, 173, 180, 0.5);
            }

@media (max-height: 56.25rem) {
    .extracts-container .extracts-content {
        max-height: 100%;
    }
}

@media (max-width: 768px) {
    .extracts-container__list {
        padding: 1.5rem 0.75rem;
    }
}

.extracts-container__list-item {
    position: relative;
    display: flex;
    padding: 1rem 1.5rem;
    border: 1px solid transparent;
}

    .extracts-container__list-item:not(:last-of-type):before {
        content: "";
        position: absolute;
        bottom: 0;
        left: 0;
        height: 1px;
        width: 100%;
        background-color: #DBDFE4;
    }

@media (max-width: 768px) {
    .extracts-container__list-item:not(:last-of-type) {
        margin-bottom: 1.5rem;
    }

        .extracts-container__list-item:not(:last-of-type):before {
            display: none;
        }
}

@media (max-width: 768px) {
    .extracts-container__list-item {
        flex-direction: column;
        padding: 0.75rem;
        border-radius: 0.8rem;
        border-color: #DBDFE4;
    }
}

.extracts-container__list-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.75rem;
    border-radius: 0.5rem;
    background-color: #F5EDFF;
}

@media (max-width: 768px) {
    .extracts-container__list-icon {
        display: none;
        padding: 0;
        background-color: transparent;
    }
}

.extracts-container__list-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0.25rem;
    padding-left: 1rem;
}

@media (max-width: 768px) {
    .extracts-container__list-content {
        position: relative;
        padding-left: 0;
    }

        .extracts-container__list-content:before {
            content: "";
            position: absolute;
            bottom: 0;
            left: 0;
            height: 1px;
            width: 100%;
            background-color: #DBDFE4;
        }
}

.extracts-container .document-title {
    position: relative;
    padding-bottom: 0;
    font-size: 16px;
    color: #464B53;
    font-weight: 500;
}

@media (max-width: 768px) {
    .extracts-container .document-title {
        padding-left: 2.5rem;
        padding-bottom: 0.75rem;
    }

        .extracts-container .document-title:before {
            content: "";
            position: absolute;
            top: 50%;
            left: 0;
            background-color: #873DDC !important;
            transform: translateY(-50%);
            display: inline-block;
            width: 24px;
            height: 24px;
            background-color: currentColor;
            background-image: none;
            mask-image: url("../img/sprite.svg#icon-menu-extracts-hover");
        }

    .debugUrl .extracts-container .document-title:before {
        mask-image: url("/Content/themes/novapay/img/sprite.svg#icon-menu-extracts-hover");
    }

    .extracts-container .document-title:before {
        mask-repeat: no-repeat;
        mask-size: contain;
    }
}

.extracts-container .document-description {
    font-size: 12px;
    color: #767F8A;
    font-weight: normal;
}

@media (max-width: 768px) {
    .extracts-container .document-description {
        padding-bottom: 0.75rem;
    }
}

.extracts-container__list-button {
    margin-left: auto;
}

@media (max-width: 768px) {
    .extracts-container__list-button {
        padding-top: 0.75rem;
        margin: 0 auto;
        width: 100%;
    }
}

.extracts-container .btn-extracts {
    display: flex;
    align-items: center;
    padding: 0.5rem 0.75rem;
    border-radius: 0.5rem;
    border: none;
    font-size: 14px;
    color: #464B53;
    background: #EDEFF1;
    cursor: pointer;
}

    .extracts-container .btn-extracts__disabled, .extracts-container .btn-extracts:disabled {
        pointer-events: none;
        cursor: not-allowed;
        opacity: 0.5;
    }

    .extracts-container .btn-extracts:hover {
        border-color: rgb(51.0416666667%, 13.1915266106%, 94.6516106443%);
        color: rgb(31.8014705882%, 3.93732493%, 63.9058123249%);
        background-color: #F5EDFF;
        transition: background-color 0.42s ease-out;
    }

        .extracts-container .btn-extracts:hover .ico-n {
            display: inline-block;
            width: 24px;
            height: 24px;
            background-color: currentColor;
            background-image: none;
            mask-image: url("../img/sprite.svg#icon-download-hover");
        }

.debugUrl .extracts-container .btn-extracts:hover .ico-n {
    mask-image: url("/Content/themes/novapay/img/sprite.svg#icon-download-hover");
}

.extracts-container .btn-extracts:hover .ico-n {
    mask-repeat: no-repeat;
    mask-size: contain;
}

.extracts-container .btn-extracts:active {
    border-color: rgb(31.8014705882%, 3.93732493%, 63.9058123249%);
    color: rgb(31.8014705882%, 3.93732493%, 63.9058123249%);
    transition: background-color 0.42s ease-out;
}

@media (max-width: 768px) {
    .extracts-container .btn-extracts {
        justify-content: center;
        width: 100%;
    }
}

.extracts-container .popup-calendar-new__bg {
    z-index: 1073;
}

.extracts-container .popup-calendar-new .popup-calendar__wrap {
    transition: all 0.22s ease-in-out;
}

.extracts-container .popup-calendar-new .calendar-input-error {
    border-color: #EB4235;
}

.extracts-container .popup-calendar__input-wrap.single-date-mode + .popup-calendar__input-line,
.extracts-container .popup-calendar__input-wrap.single-date-mode + .popup-calendar__input-line + .popup-calendar__input-wrap {
    display: none;
}

.extracts-container #calendar-end.single-date-mode {
    display: none;
}

.calendar-input-error-tooltip {
    position: absolute;
    top: -2.813rem;
    left: 0;
    padding: 0.25rem 0.75rem;
    max-width: 12.5rem;
    width: 100%;
    background: #fff;
    border: 1px solid #EB4235;
    font-size: 12px;
    color: #EB4235;
    border-radius: 0.25rem;
    z-index: 1000;
}

    .calendar-input-error-tooltip:after {
        content: "";
        position: absolute;
        bottom: -12px;
        left: 50%;
        transform: translateX(-50%) rotate(0);
        border-width: 6px;
        border-style: solid;
        border-color: #EB4235 transparent transparent transparent;
    }

@media (max-width: 768px) {
    .calendar-input-error-tooltip:after {
        left: 92%;
        transform: translateX(-93%);
    }
}

.modal-extract {
    display: flex;
    flex-direction: column;
    height: 100%;
}

    .modal-extract * {
        box-sizing: border-box;
    }

.modal-extract__header {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 0 1.25rem 1rem 1.25rem;
}

@media (max-width: 768px) {
    .modal-extract__header {
        padding: 0.75rem 0.75rem 0 0.75rem;
    }
}

.modal-extract__header:before {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    height: 1px;
    width: 100%;
    background-color: #DBDFE4;
}

@media (max-width: 768px) {
    .modal-extract__header:before {
        z-index: 1;
    }
}

.modal-extract__header-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.modal-extract__header-filter {
    position: relative;
    margin-top: 2rem;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

@media (max-width: 768px) {
    .modal-extract__header-filter {
        margin-top: 1rem;
        padding-bottom: 1rem;
    }

        .modal-extract__header-filter:before {
            position: absolute;
            content: "";
            display: block;
            bottom: 0;
            left: -0.75rem;
            width: calc(100% + 24px);
            height: 1px;
            background-color: #DBDFE4;
        }
}

@media screen and (max-height: 667px) {
    .modal-extract__filters {
        height: 21rem;
        overflow-y: auto;
        scrollbar-width: thin;
        scrollbar-color: rgba(168, 173, 180, 0.5);
    }

        .modal-extract__filters::-webkit-scrollbar-track {
            background: rgba(168, 173, 180, 0.5);
            border-radius: 0.25rem;
        }

        .modal-extract__filters::-webkit-scrollbar-thumb {
            background: rgba(168, 173, 180, 0.5);
            border-radius: 0.25rem;
        }

            .modal-extract__filters::-webkit-scrollbar-thumb:hover {
                background: rgba(168, 173, 180, 0.5);
            }
}

.modal-extract__title {
    margin: 0;
}

@media (max-width: 768px) {
    .modal-extract__title {
        font-size: 15px;
    }
}

.modal-extract__content {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    height: 100%;
}

@media (max-width: 768px) {
    .modal-extract__content {
        display: none;
        padding: 0 0.75rem;
        margin-top: 1rem;
    }
}

.modal-extract__content .document-result {
    height: 100%;
    padding: 1.25rem 1.25rem 0 1.25rem;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(168, 173, 180, 0.5);
}

    .modal-extract__content .document-result::-webkit-scrollbar-track {
        background: rgba(168, 173, 180, 0.5);
        border-radius: 0.25rem;
    }

    .modal-extract__content .document-result::-webkit-scrollbar-thumb {
        background: rgba(168, 173, 180, 0.5);
        border-radius: 0.25rem;
    }

        .modal-extract__content .document-result::-webkit-scrollbar-thumb:hover {
            background: rgba(168, 173, 180, 0.5);
        }

    .modal-extract__content .document-result .content-pdf {
        height: 100%;
    }

    .modal-extract__content .document-result .pdf-frame-wrapper {
        width: 100%;
        background: #fff;
        display: block;
        overflow-y: auto;
        padding: 10px 0 10px 0;
    }

    .modal-extract__content .document-result .pdf-canvas {
        display: block;
        margin: 0 auto 20px auto;
        max-width: 100%;
        width: 100%;
        height: auto;
        border: 1px solid #DBDFE4;
    }

.modal-extract__content .emptyState {
    position: absolute;
    left: 50%;
    top: 50%;
    display: flex;
    justify-content: center;
    flex-direction: column;
    width: 100%;
    max-width: 22.813rem;
    transform: translate(-50%, -50%);
}

@media (max-width: 768px) {
    .modal-extract__content .emptyState {
        max-width: 100%;
        padding: 0 1rem;
    }
}

.modal-extract__content .emptyState__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    padding-bottom: 1.25rem;
}

@media (max-width: 768px) {
    .modal-extract__content .emptyState__icon {
        padding-bottom: 0.5rem;
    }

        .modal-extract__content .emptyState__icon .ico-n {
            width: 60px;
            height: 60px;
        }
}

.modal-extract__content .emptyState__title {
    padding-bottom: 0.5rem;
    text-align: center;
    font-size: 17px;
    color: #767F8A;
    font-weight: 500;
}

@media (max-width: 768px) {
    .modal-extract__content .emptyState__title {
        font-size: 14px;
    }
}

.modal-extract__content .emptyState__description {
    font-size: 14px;
    font-weight: normal;
    text-align: center;
    color: #767F8A;
}

@media (max-width: 768px) {
    .modal-extract__content .emptyState__description {
        font-size: 12px;
    }
}

.modal-extract__document-result {
    height: 100%;
}

.modal-extract__filter-panel {
    display: flex;
    flex-direction: row;
    padding: 1.25rem 0;
    gap: 1.25rem;
}

@media (max-width: 768px) {
    .modal-extract__filter-panel {
        padding: 0.75rem 0;
        flex-direction: column;
        gap: 1rem;
    }
}

.modal-extract__company-dropdown {
    padding: 0;
}

    .modal-extract__company-dropdown.account-payment__sender-dropdown {
        padding: 0;
        width: 50%;
    }

@media (max-width: 768px) {
    .modal-extract__company-dropdown.account-payment__sender-dropdown {
        width: 100%;
    }
}

.modal-extract__company-dropdown .company-dropdown-title {
    padding-bottom: 0.5rem;
}

.modal-extract__company-dropdown .title-selected__item {
    display: none;
}

.modal-extract__company-dropdown .sender-dropdown-container__select-allItem {
    position: relative;
}

    .modal-extract__company-dropdown .sender-dropdown-container__select-allItem label {
        position: relative;
        display: flex;
        align-items: start;
        padding: 0.75rem;
        width: 100%;
        flex-direction: column;
        cursor: pointer;
        overflow: hidden;
    }

    .modal-extract__company-dropdown .sender-dropdown-container__select-allItem .form-check-content {
        padding-left: 1.75rem;
    }

.modal-extract__account-list {
    padding: 0;
    border: none;
    width: 50%;
    max-width: 20.75rem;
}

@media (max-width: 768px) {
    .modal-extract__account-list {
        width: 100%;
        max-width: 100%;
    }
}

.modal-extract__account-list .extract-sender-account-block {
    width: 100%;
}

.modal-extract__account-list .title-selected__item {
    display: none;
}

.modal-extract__account-list .account-dropdown-title {
    padding-bottom: 0.5rem;
}

.modal-extract__account-list .sender-dropdown-container {
    width: 100%;
}

.modal-extract__account-list .sender-dropdown-container__select-allItem {
    position: relative;
}

    .modal-extract__account-list .sender-dropdown-container__select-allItem label {
        position: relative;
        display: flex;
        align-items: start;
        padding: 0.75rem;
        width: 100%;
        flex-direction: column;
        cursor: pointer;
        overflow: hidden;
    }

    .modal-extract__account-list .sender-dropdown-container__select-allItem .form-check-content {
        padding-left: 1.75rem;
    }

@media (max-width: 768px) {
    .modal-extract__account-list .sender-dropdown-container__list {
        max-height: 11.25rem;
    }
}

.modal-extract__receiver-account-dropdown {
    width: 50%;
}

@media (max-width: 768px) {
    .modal-extract__receiver-account-dropdown {
        width: 100%;
    }
}

.modal-extract__receiver-account-dropdown .receiver-dropdown-title {
    padding-bottom: 0.5rem;
}

.modal-extract__receiver-account-dropdown .sender-dropdown-container {
    width: 100%;
}

    .modal-extract__receiver-account-dropdown .sender-dropdown-container .title-selected__item {
        display: none;
    }

.modal-extract__receiver-account-dropdown .account-payment__sender-dropdown {
    padding: 0;
}

.modal-extract__receiver-account-dropdown .disabled-dropdown.section-button {
    pointer-events: none;
    opacity: 0.8;
    cursor: default;
}

.modal-extract__receiver-account-dropdown[data-tooltip-content] {
    position: relative;
    cursor: pointer;
}

    .modal-extract__receiver-account-dropdown[data-tooltip-content]:hover:after {
        content: attr(data-tooltip-content);
        position: absolute;
        top: 110%;
        left: 50%;
        color: #fff;
        padding: 6px 8px;
        border-radius: 0.25rem;
        white-space: nowrap;
        font-size: 11px;
        transform: translateX(-50%);
        margin-top: 6px;
        pointer-events: none;
        background: #202427;
        z-index: 1000;
    }

    .modal-extract__receiver-account-dropdown[data-tooltip-content]:hover:before {
        content: "";
        position: absolute;
        top: 100%;
        left: 50%;
        transform: translateX(-50%) rotate(180deg);
        border-width: 6px;
        border-style: solid;
        border-color: #202427 transparent transparent transparent;
    }

.modal-extract__receiver-account-dropdown .sender-dropdown-container__select-allItem {
    position: relative;
}

    .modal-extract__receiver-account-dropdown .sender-dropdown-container__select-allItem label {
        position: relative;
        display: flex;
        align-items: start;
        padding: 0.75rem;
        width: 100%;
        flex-direction: column;
        cursor: pointer;
        overflow: hidden;
    }

    .modal-extract__receiver-account-dropdown .sender-dropdown-container__select-allItem .form-check-content {
        padding-left: 1.75rem;
    }

.modal-extract .counterparty-account-dropdown .sender-dropdown-container__show,
.modal-extract .counterparty-account-dropdown .sender-dropdown-container__wrapper {
    max-width: 18.8rem;
    padding-right: 0.75rem;
}

@media (max-width: 768px) {
    .modal-extract .counterparty-account-dropdown .sender-dropdown-container__show,
    .modal-extract .counterparty-account-dropdown .sender-dropdown-container__wrapper {
        width: calc(100% - 52px);
    }
}

.modal-extract .counterparty-account-dropdown .sender-dropdown-container__show .form-check-name,
.modal-extract .counterparty-account-dropdown .sender-dropdown-container__wrapper .form-check-name {
    max-width: 15.5rem;
    overflow: hidden;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.modal-extract .counterparty-account-dropdown .sender-dropdown-container .sender-dropdown-container__show {
    position: static;
}

.modal-extract .counterparty-account-dropdown .sender-dropdown-container .icon-arrow {
    height: 2.5rem;
    width: 2.5rem;
    position: absolute;
    top: 1.25rem;
    right: 2px;
    border-radius: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #F1F2F4;
}

    .modal-extract .counterparty-account-dropdown .sender-dropdown-container .icon-arrow:before {
        transform: rotate(0deg);
        display: inline-block;
        width: 20px;
        height: 20px;
        background-color: currentColor;
        background-image: none;
        mask-image: url("../img/sprite.svg#user-group");
    }

.debugUrl .modal-extract .counterparty-account-dropdown .sender-dropdown-container .icon-arrow:before {
    mask-image: url("/Content/themes/novapay/img/sprite.svg#user-group");
}

.modal-extract .counterparty-account-dropdown .sender-dropdown-container .icon-arrow:before {
    mask-repeat: no-repeat;
    mask-size: contain;
}

.modal-extract .counterparty-account-dropdown .sender-dropdown-container.open .icon-arrow:before {
    transform: rotate(0deg);
    display: inline-block;
    width: 20px;
    height: 20px;
    background-color: currentColor;
    background-image: none;
    mask-image: url("../img/sprite.svg#cross-user-group");
}

.debugUrl .modal-extract .counterparty-account-dropdown .sender-dropdown-container.open .icon-arrow:before {
    mask-image: url("/Content/themes/novapay/img/sprite.svg#cross-user-group");
}

.modal-extract .counterparty-account-dropdown .sender-dropdown-container.open .icon-arrow:before {
    mask-repeat: no-repeat;
    mask-size: contain;
}

.modal-extract .counterparty-account-dropdown .disabled {
    pointer-events: none;
    opacity: 0.5;
    position: relative;
}

.modal-extract__report-filter {
    display: flex;
    flex-direction: row;
    padding: 0 0;
    gap: 1.25rem;
}

@media (max-width: 768px) {
    .modal-extract__report-filter {
        padding: 0.75rem 0;
        flex-direction: column;
        gap: 1rem;
    }
}

.modal-extract .report-calendar {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 17.18rem;
}

@media (max-width: 768px) {
    .modal-extract .report-calendar {
        max-width: 100%;
    }
}

.modal-extract .report-calendar__title {
    padding-bottom: 0.5rem;
    color: #767F8A;
    font-size: 12px;
    font-weight: 500;
    line-height: 1rem;
    margin-bottom: 0;
}

.modal-extract .report-calendar__data-wrap {
    display: flex;
    align-items: center;
    padding: 0.5rem 0.75rem;
    border-radius: 0.5rem;
    border: 1px solid #DBDFE4;
}

.modal-extract .report-calendar__calendar-period {
    font-size: 1rem;
    font-weight: 500;
    color: #32383c;
}

.modal-extract .report-turnover-type,
.modal-extract .report-period-step,
.modal-extract .report-operation-type,
.modal-extract .report-grouping-transaction,
.modal-extract .report-empty-values {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: max-content;
}

.modal-extract .report-turnover-type__title,
.modal-extract .report-period-step__title,
.modal-extract .report-operation-type__title,
.modal-extract .report-grouping-transaction__title,
.modal-extract .report-empty-values__title {
    padding-bottom: 0.5rem;
}

@media (max-width: 768px) {
    .modal-extract .report-turnover-type,
    .modal-extract .report-period-step,
    .modal-extract .report-operation-type,
    .modal-extract .report-grouping-transaction,
    .modal-extract .report-empty-values {
        max-width: 100%;
    }
}

@media (max-width: 768px) {
    .modal-extract .report-empty-values__title {
        font-size: 0;
    }
}

@media (max-width: 768px) {
    .modal-extract .report-empty-values .form-check-label {
        display: flex;
        gap: 0.5rem;
    }
}

.modal-extract .report-empty-values .check-label {
    font-size: 0;
}

@media (max-width: 768px) {
    .modal-extract .report-empty-values .check-label {
        font-size: 14px;
    }
}

.modal-extract .report-empty-values .checkbox-view {
    position: relative;
    height: 2.5rem;
    width: 2.5rem;
}

@media (max-width: 768px) {
    .modal-extract .report-empty-values .checkbox-view {
        height: 1.375rem;
        width: 1.375rem;
        font-size: 14px;
    }
}

.modal-extract .report-empty-values .checkbox-view::after, .modal-extract .report-empty-values .checkbox-view::before {
    content: "";
    position: absolute;
    height: 100%;
    width: 100%;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    background-size: 100%;
    border-radius: 12px;
}

.modal-extract .report-empty-values .form-check-label {
    padding: 0;
}

.modal-extract__footer {
    position: absolute;
    bottom: 0;
    width: 100%;
    left: 0;
    padding: 1rem 1.25rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1.25rem;
    background-color: #fff;
    box-shadow: 0px 4px 34px 0px rgba(191, 195, 204, 0.3);
    border-bottom-left-radius: 1.25rem;
    border-bottom-right-radius: 1.25rem;
}

@media (max-width: 768px) {
    .modal-extract__footer {
        padding: 0.75rem;
        justify-content: normal;
        flex-direction: row;
        flex-wrap: wrap;
    }
}

.modal-extract__footer:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    height: 1px;
    width: 100%;
    background-color: #DBDFE4;
}

.modal-extract__footer .btn-extract-active {
    margin-left: auto;
}

.modal-extract__footer .btn-send-email {
    gap: 0.5rem;
    color: #202427;
}

    .modal-extract__footer .btn-send-email:hover {
        border-color: rgb(51.0416666667%, 13.1915266106%, 94.6516106443%);
        background-color: #F5EDFF;
        color: rgb(31.8014705882%, 3.93732493%, 63.9058123249%);
        transition: background-color 0.42s ease-out;
    }

        .modal-extract__footer .btn-send-email:hover .ico-n {
            background-color: rgb(31.8014705882%, 3.93732493%, 63.9058123249%) !important;
        }

@media (max-width: 768px) {
    .modal-extract__footer .btn-send-email {
        width: 100%;
    }
}

@media (max-width: 768px) {
    .modal-extract__footer .btn-create-extract,
    .modal-extract__footer .btn-download-extract {
        width: 100%;
    }
}

.modal-extract .extract-document__slider {
    padding-top: 1.25rem;
}

.modal-extract__error-dialog {
    padding: 1rem;
}

    .modal-extract__error-dialog .extract-error__images {
        display: flex;
        align-items: center;
        justify-content: center;
    }

        .modal-extract__error-dialog .extract-error__images .error-images {
            width: 6.813rem;
            height: 3.125rem;
            background: url("../img/newDesign/postpaid-error.svg") no-repeat center;
        }

.debugUrl .modal-extract__error-dialog .extract-error__images .error-images {
    background: url("/Content/themes/novapay/img/newDesign/postpaid-error.svg") no-repeat center;
}

.modal-extract__error-dialog .extract-error__content {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.modal-extract__error-dialog .extract-error__title {
    margin-bottom: 0.5rem;
    color: #ED1C24;
    font-size: 20px;
    font-weight: 600;
}

.modal-extract__error-dialog .extract-error__message {
    font-size: 14px;
    color: #6D737E;
}

.modal-extract__loading-dialog {
    padding: 2rem;
}

    .modal-extract__loading-dialog .p-dialog-content {
        padding: 0;
    }

    .modal-extract__loading-dialog .extract-loading {
        position: relative;
        display: flex;
        justify-content: center;
        padding-top: 2rem;
        margin-bottom: 1.25rem;
    }

    .modal-extract__loading-dialog .extract-loading__spiner {
        width: 2rem;
        height: 2rem;
        position: absolute !important;
        top: 0;
        background: url("../img/newDesign/icon/loader.png") no-repeat center center;
        animation: spin 1s linear infinite;
    }

        .modal-extract__loading-dialog .extract-loading__spiner.debugUrl {
            background: url("/Content/themes/novapay/img/newDesign/icon/loader.png") no-repeat center center;
        }

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

@media (max-width: 768px) {
    .modal-extract__confirmations-email-dialog .modal-extract__content {
        padding: 0;
        display: flex;
    }
}

.modal-extract__confirmations-email-dialog .btn-extracts__close {
    z-index: 1;
}

.modal-extract__confirmations-email-dialog .email-sub-title {
    padding-right: 2.5rem;
    padding-bottom: 0.5rem;
}

.modal-extract__confirmations-email-dialog .email-send-block {
    position: relative;
    width: 100%;
    display: flex;
    align-items: center;
    gap: 8px;
}

.modal-extract__confirmations-email-dialog .extract-email-input {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 4px;
    width: calc(100% - 50px);
    min-height: 2.5rem;
    padding: 0.55rem 0.75rem;
    border-radius: 0.75rem;
    border: 1px solid #DBDFE4;
    cursor: pointer;
}

    .modal-extract__confirmations-email-dialog .extract-email-input:focus {
        border-color: #690DD3;
    }

.modal-extract__confirmations-email-dialog .btn-edit-email {
    position: absolute;
    top: 50%;
    right: 0;
    padding: 9px;
    background: #f4f6f7;
    border: 1px solid transparent;
    transform: translateY(-50%);
}

    .modal-extract__confirmations-email-dialog .btn-edit-email:hover {
        border: 1px solid #DBDFE4;
    }

        .modal-extract__confirmations-email-dialog .btn-edit-email:hover .ico-n {
            background-color: #690DD3 !important;
        }

.modal-extract__confirmations-email-dialog .email-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 2.5rem;
}

.modal-extract__confirmations-email-dialog .invalid-feedback {
    position: absolute;
    bottom: -1.25rem;
    padding-top: 0.5rem;
    display: none;
    font-size: 12px;
    color: #EB4235;
}

.modal-extract__confirmations-email-dialog .is-invalid {
    border-color: #EB4235;
}

    .modal-extract__confirmations-email-dialog .is-invalid ~ .invalid-feedback {
        display: block !important;
        color: #EB4235;
    }

.extract__slider-info {
    position: absolute;
    bottom: -3rem;
    left: 50%;
    display: flex;
    align-items: center;
    transform: translateX(-50%);
    width: fit-content;
}

    .extract__slider-info .extract-slider-counter {
        padding: 0.5rem 1.5rem;
        width: 9.75rem;
        border-radius: 0.5rem;
        background: rgba(244, 246, 247, 0.5);
        backdrop-filter: blur(4.5px);
        font-size: 14px;
        font-weight: 500;
        color: #fff;
        text-align: center;
    }

    .extract__slider-info .slick-arrow {
        position: relative;
        height: 2rem;
        width: 2rem;
        border-radius: 0.5rem;
        background: rgba(244, 246, 247, 0.5);
        backdrop-filter: blur(4.5px);
        transform: none;
    }

        .extract__slider-info .slick-arrow:before {
            display: none;
        }

        .extract__slider-info .slick-arrow:hover {
            background: rgba(244, 246, 247, 0.35);
        }

        .extract__slider-info .slick-arrow .ico-n {
            background-color: #fff;
        }

.extract-filter__title {
    font-weight: 600;
    font-size: 16px;
}

@media (max-width: 768px) {
    .extract-filter__title {
        font-size: 14px;
    }
}

.extract-filter__subtitle-description {
    margin-top: 0.25rem;
    font-size: 12px;
}

@media (max-width: 768px) {
    .extract-filter__subtitle-description {
        display: none;
    }
}

.extract-footer__signature-label {
    padding-left: 2rem;
}

.extract-footer__lable-text {
    font-weight: 600;
    font-size: 15px;
}

.popup-calendar-new * {
    box-sizing: border-box;
}

.isActiveDataBtn {
    border: 1px solid #690DD3 !important;
    background: #F5EDFF !important;
}

.isError {
    border: 1px solid red !important;
}

.account-statement {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;
    min-height: calc(100vh - 112px - 40px);
    background: #fff;
    border-radius: 0.75rem;
    will-change: transform;
}

    .account-statement * {
        box-sizing: border-box;
    }

.account-statement__config {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    padding: 1.5rem;
    border-bottom: 1px solid #DBDFE4;
    border-top-right-radius: 0.75rem;
    border-top-left-radius: 0.75rem;
    z-index: 1;
}

@media (max-width: 768px) {
    .account-statement__config {
        padding: 1.5rem 0.75rem;
        gap: 1rem;
    }
}

.account-statement__balance, .account-statement__actions {
    display: flex;
    width: 100%;
    justify-content: space-between;
    align-items: center;
}

@media (max-width: 768px) {
    .account-statement__balance, .account-statement__actions {
        flex-direction: column;
        align-items: self-start;
        gap: 0.5rem;
    }
}

.account-statement__balance {
    align-items: baseline;
}

.account-statement__balance-info .balance-title,
.account-statement__balance-info .balance-current-period {
    font-size: 14px;
    color: #767F8A;
    font-weight: 500;
    font-family: "Fixel Text", "Fixel Display", "Helvetica", "Arial", sans-serif;
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: 18px;
}

.account-statement__balance-info__title {
    color: #767F8A;
    font-family: "Fixel Text", "Fixel Display", "Helvetica", "Arial", sans-serif;
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: 18px;
}

.account-statement__balance-info .balans-tooltip {
    position: relative;
    cursor: pointer;
}

    .account-statement__balance-info .balans-tooltip .tooltip-text {
        position: absolute;
        left: 50%;
        bottom: -45px !important;
        z-index: 1000;
        visibility: hidden;
        border-radius: 0.25rem;
        padding: 0;
        transform: translateX(-50%);
        transition: all 0.32s;
        white-space: nowrap;
        opacity: 0;
        background-color: #333;
        color: #fff;
        text-align: start;
    }

        .account-statement__balance-info .balans-tooltip .tooltip-text::after {
            content: "";
            position: absolute;
            bottom: 38px;
            left: 47%;
            transform: rotate(180deg);
            border-width: 6px;
            border-style: solid;
            border-color: #333 transparent transparent transparent;
        }

@media (max-width: 479px) {
    .account-statement__balance-info .balans-tooltip .tooltip-text::after {
        left: 85%;
    }
}

@media (max-width: 479px) {
    .account-statement__balance-info .balans-tooltip .tooltip-text {
        left: -55px;
    }
}

.account-statement__balance-info .balans-tooltip .ico-n {
    background-color: #690DD3 !important;
    margin-bottom: 2px;
}

.account-statement__balance-info .balans-tooltip:hover .tooltip-text {
    display: flex;
    flex-direction: column;
    align-items: baseline;
    bottom: 26px;
    visibility: visible;
    opacity: 1;
    font-size: 11px;
    padding: 6px 8px;
}

@media (max-width: 479px) {
    .account-statement__balance-info .balans-tooltip:hover .tooltip-text {
        bottom: 18px;
    }
}

.account-statement__blocked-funds {
    display: flex;
    color: #EB4235;
    font-size: 14px;
}

.account-statement .blocked-funds__count,
.account-statement .blocked-funds {
    padding-right: 0.25rem;
}

.account-statement__balance-limit-count {
    padding-bottom: 0.5rem;
}

    .account-statement__balance-limit-count .title {
        color: #32383c;
    }

    .account-statement__balance-limit-count .coins-type,
    .account-statement__balance-limit-count .currency {
        font-size: 24px;
        color: #767F8A;
    }

.account-statement__balance-accounts {
    display: flex;
    gap: 1rem;
    flex-direction: column;
    width: 350px;
}

@media (max-width: 1100px) {
    .account-statement__balance-accounts {
        width: 300px;
    }
}

.account-statement__balance-accounts .sender-dropdown-container__select-allItem {
    position: relative;
}

    .account-statement__balance-accounts .sender-dropdown-container__select-allItem label {
        position: relative;
        display: flex;
        align-items: start;
        padding: 0.75rem;
        width: 100%;
        flex-direction: column;
        cursor: pointer;
        overflow: hidden;
    }

    .account-statement__balance-accounts .sender-dropdown-container__select-allItem .form-check-content {
        padding-left: 1.75rem;
    }

.account-statement__balance-accounts #vue_accountStatementAccountsDropdown {
    width: 100%;
}

@media (max-widh: 1624px) {
    .account-statement__balance-accounts .account-payment__sender-dropdown-vue {
        width: 348px;
    }
}

.account-statement__balance-accounts .account-payment__sender-dropdown {
    padding: 0;
}

    .account-statement__balance-accounts .account-payment__sender-dropdown .account-dropdown-title {
        font-size: 14px;
        color: #767F8A;
        font-weight: 500;
        padding-bottom: 0.5rem;
    }

    .account-statement__balance-accounts .account-payment__sender-dropdown .sender-dropdown-container__active-item {
        font-weight: 400;
    }

    .account-statement__balance-accounts .account-payment__sender-dropdown .icon-checkbox {
        position: absolute;
        top: 50%;
        left: 0;
        float: none;
        font-size: 0;
        height: 1.125rem;
        width: 1.125rem;
        transform: translateY(-50%);
    }

        .account-statement__balance-accounts .account-payment__sender-dropdown .icon-checkbox::after, .account-statement__balance-accounts .account-payment__sender-dropdown .icon-checkbox::before {
            content: "";
            position: absolute;
            box-sizing: border-box;
            height: 1.125rem;
            width: 1.125rem;
            left: 0;
            top: 50%;
            transform: translateY(-50%);
        }

        .account-statement__balance-accounts .account-payment__sender-dropdown .icon-checkbox::before {
            border-radius: 0.25rem;
            border: 1px solid #DBDFE4;
            background: #fff;
            transition: background 0.42s ease, border-color 0.3s ease;
        }

        .account-statement__balance-accounts .account-payment__sender-dropdown .icon-checkbox::after {
            background: url("../img/newDesign/icon/ico-checkbox.svg") no-repeat center center;
            opacity: 0;
            transition: opacity 0.42s ease;
        }

.debugUrl .account-statement__balance-accounts .account-payment__sender-dropdown .icon-checkbox::after {
    background: url("/Content/themes/novapay/img/newDesign/icon/ico-checkbox.svg") no-repeat;
}

.account-statement__balance-accounts .title-selected__item {
    display: none;
}

@media (max-width: 768px) {
    .account-statement__balance-accounts {
        width: 100%;
    }
}

.account-statement #vue_accountStatementExportDropdown .p-select-label {
    display: flex;
    align-items: center;
    margin: auto;
    justify-content: center;
}

.account-statement__arrested-toggle {
    position: relative;
    display: flex;
    align-items: center;
    padding-left: 1.75rem;
    cursor: pointer;
}

    .account-statement__arrested-toggle .form-check-name {
        font-size: 15px;
        color: #32383c;
        font-weight: 400;
    }

    .account-statement__arrested-toggle .icon-checkbox {
        position: absolute;
        top: 50%;
        left: 0;
        float: none;
        font-size: 0;
        height: 1.125rem;
        width: 1.125rem;
        transform: translateY(-50%);
    }

        .account-statement__arrested-toggle .icon-checkbox::after, .account-statement__arrested-toggle .icon-checkbox::before {
            content: "";
            position: absolute;
            box-sizing: border-box;
            height: 1.125rem;
            width: 1.125rem;
            left: 0;
            top: 50%;
            transform: translateY(-50%);
        }

        .account-statement__arrested-toggle .icon-checkbox::before {
            border-radius: 0.25rem;
            border: 1px solid #DBDFE4;
            background: #fff;
            transition: background 0.42s ease, border-color 0.3s ease;
        }

        .account-statement__arrested-toggle .icon-checkbox::after {
            background: url("../img/newDesign/icon/ico-checkbox.svg") no-repeat center center;
            opacity: 0;
            transition: opacity 0.42s ease;
        }

.debugUrl .account-statement__arrested-toggle .icon-checkbox::after {
    background: url("/Content/themes/novapay/img/newDesign/icon/ico-checkbox.svg") no-repeat;
}

.account-statement__arrested-toggle input[type=checkbox] {
    position: absolute;
    left: 0;
    opacity: 0;
    z-index: -1;
}

    .account-statement__arrested-toggle input[type=checkbox]:checked + .icon-checkbox::after {
        opacity: 1;
    }

@media (max-width: 768px) {
    .account-statement__period {
        width: 100%;
    }
}

.account-statement__period .isDisabled-period {
    pointer-events: none;
    opacity: 0.5;
    cursor: not-allowed;
}

.account-statement__period .report-calendar {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

@media (max-width: 1100px) {
    .account-statement__period .report-calendar {
        gap: 0.4rem;
    }
}

@media (max-width: 768px) {
    .account-statement__period .report-calendar {
        max-width: 100%;
        flex-direction: row;
        align-items: self-start;
        flex-wrap: wrap;
    }
}

.account-statement__period .report-calendar__title {
    font-size: 17px;
    font-weight: 500;
    color: #32383c;
}

.account-statement__period .report-calendar__data-wrap {
    display: flex;
    padding: 0.5rem 0.75rem;
    min-width: 17.188rem;
    border-radius: 0.5rem;
    border: 1px solid #DBDFE4;
    cursor: pointer;
}

@media (max-width: 1150px) {
    .account-statement__period .report-calendar__data-wrap {
        min-width: 15rem;
    }
}

@media (max-width: 768px) {
    .account-statement__period .report-calendar__data-wrap {
        width: calc(100% - 3.25rem);
        min-width: auto;
        flex-basis: 100%;
    }
}

.account-statement__period .report-calendar__data-info {
    display: flex;
    align-items: center;
}

.account-statement__period .report-calendar__calendar-period {
    font-size: 1rem;
    font-weight: 500;
    color: #32383c;
    background: transparent;
    border: none;
    cursor: pointer;
}

.account-statement__period .report-calendar .btn-clear-period {
    border: 1px solid #DBDFE4;
    background-color: transparent;
    height: 2.5rem;
    width: 2.5rem;
    padding: 0;
    margin-right: 5px;
}

    .account-statement__period .report-calendar .btn-clear-period:hover {
        background-color: #f5edff;
        transition: background-color 0.42s ease-out;
        border-color: #5E1CAB;
        color: #5E1CAB;
    }

.account-statement .popup-calendar-new__bg {
    z-index: 1073;
}

.account-statement .popup-calendar-new .popup-calendar__wrap {
    transition: all 0.22s ease-in-out;
}

.account-statement__btn-group {
    display: flex;
    gap: 0.75rem;
}

@media (max-width: 768px) {
    .account-statement__btn-group {
        display: flex;
        flex-wrap: wrap;
        gap: 0.5rem;
        width: 100%;
        padding-top: 0.5rem;
    }
}

.account-statement__btn-group .btn {
    height: fit-content;
    min-height: 2.5rem;
    padding: 0 1.4rem;
    font-size: 14px;
    border: 1px solid transparent;
    color: #464B53;
}

@media (max-width: 1100px) {
    .account-statement__btn-group .btn {
        padding: 0 1rem;
    }
}

.account-statement__btn-group .btn:hover {
    border-color: #DBDFE4;
}

@media (max-width: 768px) {
    .account-statement__btn-group .btn.btn-extract, .account-statement__btn-group .btn.btn-data-export {
        flex: 1 1 48%;
    }
}

.account-statement__btn-group .btn.btn-export {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    color: #fff;
}

    .account-statement__btn-group .btn.btn-export .ico-n {
        background-color: #fff !important;
    }

    .account-statement__btn-group .btn.btn-export:hover {
        border-color: #5E1CAB;
    }

@media (max-width: 768px) {
    .account-statement__btn-group .btn {
        flex: 1 1 100%;
    }
}

.account-statement__result {
    position: relative;
    display: flex;
    flex-direction: column;
    flex: 1;
    gap: 0.25rem;
    height: 100%;
}

.account-statement__result-empty {
    position: absolute;
    left: 50%;
    top: 50%;
    height: 100%;
    width: 100%;
    transform: translate(-50%, -50%);
}

    .account-statement__result-empty .emptyState {
        position: absolute;
        left: 50%;
        top: 50%;
        display: flex;
        justify-content: center;
        flex-direction: column;
        width: 100%;
        max-width: 22.813rem;
        transform: translate(-50%, -50%);
    }

@media (max-width: 768px) {
    .account-statement__result-empty .emptyState {
        max-width: 100%;
        padding: 0 1rem;
    }
}

.account-statement__result-empty .emptyState__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    padding-bottom: 1.25rem;
}

.account-statement__result-empty .emptyState__title {
    padding-bottom: 0.5rem;
    text-align: center;
    font-size: 17px;
    color: #767F8A;
    font-weight: 500;
}

.account-statement__result-empty .emptyState__description {
    font-size: 14px;
    font-weight: normal;
    text-align: center;
    color: #767F8A;
}

.account-statement .pdf-pagination-controls {
    text-align: center;
    margin: 0.65rem 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
}

    .account-statement .pdf-pagination-controls .btn-pagination {
        position: relative;
        height: 1.5rem;
        width: 1.5rem;
        padding: 0;
        background: transparent;
        border: 1px solid transparent;
        border-radius: 0.25rem;
        transition: background 0.32s ease-in-out;
        color: #767F8A;
        font-size: 14px;
    }

        .account-statement .pdf-pagination-controls .btn-pagination .icon-arrow {
            position: absolute;
            top: 50%;
            height: 1rem;
            width: 1rem;
            opacity: 1;
            left: 50%;
            transform: translate(-50%, -50%);
        }

            .account-statement .pdf-pagination-controls .btn-pagination .icon-arrow:before {
                content: "";
                position: relative;
                display: block;
                height: 1rem;
                width: 1rem;
                transform: rotate(90deg);
                transition: transform 0.32s ease-out;
                background: url("../img/newDesign/icon/icon-small-up.svg") no-repeat center;
            }

.debugUrl .account-statement .pdf-pagination-controls .btn-pagination .icon-arrow:before {
    background: url("/Content/themes/novapay/img/newDesign/icon/icon-small-up.svg") no-repeat center;
}

.account-statement .pdf-pagination-controls .btn-pagination.active-page {
    background: #f5edff;
    color: #690DD3;
}

.account-statement .pdf-pagination-controls .btn-pagination:hover {
    border-color: #DBDFE4;
}

@media (max-width: 768px) {
    .account-statement .pdf-pagination-controls {
        display: none;
    }
}

.exstracts-turns__drop-icon {
    width: 20px;
    height: 20px;
    margin-top: -2px;
    transform: rotate(180deg);
    transition: transform 0.3s ease-out;
    margin-right: 8px;
}

.exstracts-turns__select-btn {
    padding: 0 !important;
    color: #FFF !important;
}

    .exstracts-turns__select-btn.open:hover .icon-triger-white-arrow, .exstracts-turns__select-btn.open:focus .icon-triger-white-arrow {
        transform: none;
    }

.exstracts-turns__exstracts-dropdown {
    min-width: 165px;
}

    .exstracts-turns__exstracts-dropdown.open {
        top: auto !important;
    }

    .exstracts-turns__exstracts-dropdown:hover .icon-triger-white-arrow, .exstracts-turns__exstracts-dropdown:focus .icon-triger-white-arrow {
        min-width: 165px;
    }

.exstracts-turns__dropdown-item {
    padding-left: 18px !important;
}

.exstracts-turns__icon-export {
    margin-right: 10px;
}

.exstracts-turns__after-ajax {
    display: flex;
    align-items: center;
    gap: 15px;
    width: 348px;
}

@media (max-width: 1060px) {
    .exstracts-turns__after-ajax {
        width: 100%;
        max-width: 320px;
    }
}

@media (max-width: 768px) {
    .exstracts-turns__after-ajax {
        width: 100%;
        max-width: inherit;
    }
}

.exstracts-turns__select-btn {
    width: 100%;
}

.exstracts-turns__back, .exstracts-turns__dropdown-wrap {
    width: 50%;
}

.exstracts-turns__back {
    gap: 8px;
    height: 40px;
}

    .exstracts-turns__back i {
        width: 20px;
        height: 20px;
    }

.extruct-turns__mibile {
    display: none;
}

    .extruct-turns__mibile .emptyState {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        margin-top: calc(50% - 140px);
    }

    .extruct-turns__mibile .emptyState__title {
        margin-top: 10px;
    }

    .extruct-turns__mibile .emptyState__description {
        text-align: center;
        margin-top: 10px;
    }

    .extruct-turns__mibile .emptyState .icon-emptyState {
        background-color: green !important;
    }

@media (max-width: 768px) {
    .extruct-turns__mibile {
        display: block;
    }
}

.extruct-turns__pdf-content {
    padding: 24px 0;
    display: flex;
    flex-direction: column;
    max-width: 1011px;
    margin: auto;
}

@media (max-width: 1440px) {
    .extruct-turns__pdf-content {
        max-width: 738px;
    }
}

@media (max-width: 800px) {
    .extruct-turns__pdf-content {
        max-width: 700px;
    }
}

@media (max-width: 768px) {
    .extruct-turns__pdf-content {
        display: none !important;
    }
}

.p-dialog.extracts-additional-class {
    padding: 0;
    min-width: 0;
    width: fit-content !important;
}

    .p-dialog.extracts-additional-class .p-dialog-content,
    .p-dialog.extracts-additional-class .p-dialog-footer, .p-dialog.extracts-additional-class .p-dialog-header {
        all: unset !important;
        display: block !important;
    }

        .p-dialog.extracts-additional-class .p-dialog-content::before,
        .p-dialog.extracts-additional-class .p-dialog-footer::before, .p-dialog.extracts-additional-class .p-dialog-header::before {
            display: none;
        }

    .p-dialog.extracts-additional-class .p-dialog-header-actions {
        position: absolute;
        top: 12px;
        right: 12px;
    }

    .p-dialog.extracts-additional-class .modal-extracts {
        justify-content: center;
        align-items: center;
        max-width: 350px;
    }

        .p-dialog.extracts-additional-class .modal-extracts .btn-close__extracts {
            position: absolute;
            right: 0.5rem;
            top: 0.5rem;
            padding: 0.375rem;
            background: transparent;
            border: none;
            cursor: pointer;
        }

    .p-dialog.extracts-additional-class .modal-extracts__loading {
        padding: 36px 44px;
        max-width: 349px;
        max-height: 164px;
    }

@media (max-width: 576px) {
    .p-dialog.extracts-additional-class .modal-extracts__loading {
        max-width: fit-content;
    }
}

.p-dialog.extracts-additional-class .modal-extracts__content.generate-statement {
    display: flex;
    justify-content: center;
}

    .p-dialog.extracts-additional-class .modal-extracts__content.generate-statement span {
        font-size: 16px;
        font-weight: 400;
        color: #464B53;
        text-align: center;
    }

.p-dialog.extracts-additional-class .modal-extracts__error {
    padding: 2rem;
    min-width: 413px;
}

@media (max-width: 576px) {
    .p-dialog.extracts-additional-class .modal-extracts__error {
        min-width: auto;
    }
}

.p-dialog.extracts-additional-class .modal-extracts__error .extracts-error__images {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
}

    .p-dialog.extracts-additional-class .modal-extracts__error .extracts-error__images .error-images {
        width: 6.813rem;
        height: 3.125rem;
        background: url("../img/newDesign/postpaid-error.svg") no-repeat center;
    }

.debugUrl .p-dialog.extracts-additional-class .modal-extracts__error .extracts-error__images .error-images {
    background: url("/Content/themes/novapay/img/newDesign/postpaid-error.svg") no-repeat center;
}

.p-dialog.extracts-additional-class .modal-extracts__error .extracts-error__content {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.p-dialog.extracts-additional-class .modal-extracts__error .extracts-error__title {
    margin-bottom: 0.5rem;
    color: #ED1C24;
    font-size: 20px;
    font-weight: 600;
}

.p-dialog.extracts-additional-class .modal-extracts__error .extracts-error__message {
    font-size: 14px;
    color: #6D737E;
}

.p-dialog.extracts-additional-class .modal-extracts .extracts-loading {
    position: relative;
    display: flex;
    justify-content: center;
    padding-top: 2rem;
    margin-bottom: 1.25rem;
}

.p-dialog.extracts-additional-class .modal-extracts .extracts-loading__spiner {
    width: 2rem;
    height: 2rem;
    position: absolute !important;
    top: 0;
    background: url("../img/newDesign/icon/loader.png") no-repeat center center;
    animation: spin 1s linear infinite;
}

    .p-dialog.extracts-additional-class .modal-extracts .extracts-loading__spiner.debugUrl {
        background: url("/Content/themes/novapay/img/newDesign/icon/loader.png") no-repeat center center;
    }

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

@media (max-width: 576px) {
    .extracts-additional-class {
        top: 50% !important;
        transform: translate(0%, -50%) !important;
        height: fit-content;
        border-radius: 12px !important;
        width: 94% !important;
        min-width: 200px !important;
    }
}

@media (min-width: 1624px) {
    .account-statement__balance-accounts, .account-statement__balance-info, .account-statement__period, .account-statement__btn-group {
        width: 28.5%;
    }

    .account-statement__period {
        position: relative;
    }

    .account-statement .btn-clear-period {
        position: absolute;
        right: -60px;
    }

    .account-statement .extract-sender-account-block, .account-statement .sender-dropdown-container, .account-statement .report-calendar__data-wrap {
        width: 100%;
    }

    .account-statement .btn-extract,
    .account-statement .btn-circulation {
        flex: 1;
    }

    .account-statement .btn-data-export {
        flex: 3;
    }

    .exstracts-turns__after-ajax {
        width: 28.5%;
    }

    .exstracts-turns__exstracts-dropdown {
        width: 13.5%;
    }
}

@media (min-width: 2048px) {
    .account-statement__balance-accounts, .account-statement__balance-info, .account-statement__period, .account-statement__btn-group,
    .account-statement .extract-sender-account-block,
    .account-statement .account-payment__sender-dropdown-vue {
        width: 468px;
    }

    .account-statement .report-calendar__data-wrap {
        width: 400px;
    }

    .exstracts-turns__after-ajax {
        width: 468px;
    }

    .exstracts-turns__exstracts-dropdown {
        width: 228px;
    }
}

@media (min-width: 62rem) {
    .main-content .main-border-wrapper.scrollbar-active {
        max-height: calc(100vh - 76px - 40px);
        height: 100%;
    }
}

.payment-page {
    display: flex;
    flex-direction: column;
    background: #fff;
    border-bottom-left-radius: 1rem;
    border-bottom-right-radius: 1rem;
}

    .payment-page * {
        box-sizing: border-box;
    }

    .payment-page .form-check-label .checkbox-view::after, .payment-page .form-check-label .checkbox-view::before {
        height: 1.125rem;
        width: 1.125rem;
    }

    .payment-page .form-check-label [disabled] {
        cursor: not-allowed;
    }

        .payment-page .form-check-label [disabled] + .checkbox-view::before {
            cursor: not-allowed;
            opacity: 0.4;
        }

    .payment-page .tooltip-text {
        bottom: -2.688rem;
        left: 50%;
        transform: translateX(-50%);
        text-align: start;
    }

@media (max-width: 479px) {
    .payment-page .tooltip-text {
        transform: translateX(-78%);
    }
}

@media (max-width: 385px) {
    .payment-page .tooltip-text {
        transform: translateX(-9%);
    }
}

.payment-page .tooltip-text::after {
    bottom: auto;
    top: -7px;
    transform: rotate(180deg);
}

@media (max-width: 385px) {
    .payment-page .tooltip-text::after {
        left: calc(100% - (89% + 14px));
    }
}

.payment-page .btn-footer-actions {
    display: inline-flex;
    max-height: 2.5rem;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    white-space: nowrap;
    min-width: 9.125rem;
    padding: 0.5rem 1rem;
    cursor: pointer;
}

@media (max-width: 992px) {
    .payment-page .btn-footer-actions {
        flex: 1 1 auto;
    }
}

.payment-page .btn-footer-actions .icon-copy-payment,
.payment-page .btn-footer-actions .icon-edit-payment {
    background-color: #767F8A !important;
}

.payment-page .btn-footer-actions .icon-sign-payment {
    width: 1.25rem;
    height: 1.25rem;
}

.payment-page .footer-actions-container .btn-cancel-small {
    max-width: 2.5rem;
    padding: 0;
    max-height: 2.5rem;
    min-width: 2.5rem;
}

.payment-page .btn-actions {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    white-space: nowrap;
    min-width: 9.125rem;
    padding: 0.5rem 1rem;
    border-radius: 0.5rem;
    background-color: #fff;
    border: 1px solid #DBDFE4;
    color: #202427;
    cursor: pointer;
}

@media (max-width: 992px) {
    .payment-page .btn-actions {
        flex: 1 1 auto;
    }
}

.payment-page .btn-actions:hover {
    background-color: #F5EDFF;
    transition: background-color 0.42s ease-out;
    border: 1px solid #5E1CAB;
    color: #5E1CAB;
}

    .payment-page .btn-actions:hover .icon-export-payment,
    .payment-page .btn-actions:hover .icon-copy-payment,
    .payment-page .btn-actions:hover .icon-edit-payment {
        background-color: #690DD3 !important;
    }

.payment-page .btn-actions.actions-negative {
    border: 1px solid #EB4235;
    background-color: #fff;
    cursor: pointer;
    color: #EB4235;
    transition: background-color 0.42s ease-out, color 0.42s ease-out;
}

    .payment-page .btn-actions.actions-negative:hover {
        background-color: #FFEEE2;
        color: #DE4420;
    }

.payment-page .btn-actions .icon-export-payment,
.payment-page .btn-actions .icon-copy-payment,
.payment-page .btn-actions .icon-edit-payment {
    background-color: #767F8A !important;
}

.payment-page .btn-actions .icon-sign-payment {
    width: 1.25rem;
    height: 1.25rem;
}

.payment-page__controls, .payment-page__list {
    display: flex;
    flex-direction: column;
}

.payment-page__controls {
    padding: 1.5rem 1.5rem 0;
}

@media (max-width: 768px) {
    .payment-page__controls {
        padding-bottom: 1rem;
    }
}

.payment-page__controls .account-info,
.payment-page__controls .payment-actions {
    display: flex;
    justify-content: space-between;
}

.payment-page__controls .account-info__label, .payment-page__controls .account-info__current-period,
.payment-page__controls .payment-actions__label,
.payment-page__controls .payment-actions__current-period {
    color: #767F8A;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.125rem;
}

@media (max-width: 768px) {
    .payment-page__controls .account-info,
    .payment-page__controls .payment-actions {
        flex-direction: column;
        gap: 1rem;
    }
}

.payment-page__controls .account-info {
    position: relative;
    padding-bottom: 1.5rem;
}

@media (max-width: 768px) {
    .payment-page__controls .account-info {
        padding-bottom: 1rem;
    }
}

.payment-page__controls .account-info:before {
    position: absolute;
    content: "";
    bottom: 0;
    left: 0;
    width: 100%;
    height: 1px;
    background: #EDEFF1;
}

@media (min-width: 1624px) {
    .payment-page__controls .account-info__balance {
        width: 28.5%;
    }
}

@media (min-width: 2048px) {
    .payment-page__controls .account-info__balance {
        width: 29.25rem;
    }
}

.payment-page__controls .account-info .account-dropdown-title {
    padding-bottom: 0.5rem;
    color: #767F8A;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.125rem;
}

.payment-page__controls .account-info .balans-tooltip {
    position: relative;
    background: transparent;
    border: none;
    padding: 0;
}

    .payment-page__controls .account-info .balans-tooltip i {
        margin-bottom: 3px;
    }

.payment-page__controls .account-info .icon-info-new {
    background-color: #690DD3 !important;
}

.payment-page__controls .account-info__select {
    width: 23.75rem;
}

@media (min-width: 1624px) {
    .payment-page__controls .account-info__select {
        width: 28.5%;
    }
}

@media (min-width: 2048px) {
    .payment-page__controls .account-info__select {
        width: 29.25rem;
    }
}

@media (max-width: 768px) {
    .payment-page__controls .account-info__select {
        width: 100%;
    }
}

.payment-page__controls .account-info__select .sender-dropdown-container,
.payment-page__controls .account-info__select .payment-sender-account-block {
    width: 100%;
}

    .payment-page__controls .account-info__select .sender-dropdown-container .p-multiselect-header .p-inputicon .ico-n,
    .payment-page__controls .account-info__select .payment-sender-account-block .p-multiselect-header .p-inputicon .ico-n {
        top: -0.25rem !important;
    }

.payment-page__controls .account-info__select .section-title {
    display: none;
}

.payment-page__controls .account-info__select .account-payment__sender-dropdown {
    padding: 0;
}

@media (max-width: 768px) {
    .payment-page__controls .account-info__select .account-payment__sender-dropdown {
        padding: 0;
    }
}

.payment-page__controls .account-info__select .account-payment__sender-dropdown .sender-dropdown-container__show {
    margin: 0;
    font-weight: 400;
}

.payment-page__controls .account-info__select .payment-sender-account-block .select-all-label {
    position: relative;
    display: flex;
    align-items: start;
    padding: 0.75rem;
    width: 100%;
    cursor: pointer;
    overflow: hidden;
}

.payment-page__controls .payment-statement__blocked-funds {
    display: flex;
    color: #EB4235;
    font-size: 14px;
    gap: 0.25rem;
}

.payment-page__controls .payment-statement__arrested-toggle {
    margin-top: 1rem;
    position: relative;
    display: flex;
    align-items: center;
    padding-left: 1.75rem;
    cursor: pointer;
}

    .payment-page__controls .payment-statement__arrested-toggle .form-check-name {
        font-size: 15px;
        color: #32383c;
        font-weight: 400;
    }

    .payment-page__controls .payment-statement__arrested-toggle .icon-checkbox {
        position: absolute;
        top: 50%;
        left: 0;
        float: none;
        font-size: 0;
        height: 1.125rem;
        width: 1.125rem;
        transform: translateY(-50%);
    }

        .payment-page__controls .payment-statement__arrested-toggle .icon-checkbox::after, .payment-page__controls .payment-statement__arrested-toggle .icon-checkbox::before {
            content: "";
            position: absolute;
            box-sizing: border-box;
            height: 1.125rem;
            width: 1.125rem;
            left: 0;
            top: 50%;
            transform: translateY(-50%);
        }

        .payment-page__controls .payment-statement__arrested-toggle .icon-checkbox::before {
            border-radius: 0.25rem;
            border: 1px solid #DBDFE4;
            background: #fff;
            transition: background 0.42s ease, border-color 0.3s ease;
        }

        .payment-page__controls .payment-statement__arrested-toggle .icon-checkbox::after {
            background: url("../img/newDesign/icon/ico-checkbox.svg") no-repeat center center;
            opacity: 0;
            transition: opacity 0.42s ease;
        }

.debugUrl .payment-page__controls .payment-statement__arrested-toggle .icon-checkbox::after {
    background: url("/Content/themes/novapay/img/newDesign/icon/ico-checkbox.svg") no-repeat;
}

.payment-page__controls .payment-statement__arrested-toggle input[type=checkbox] {
    position: absolute;
    left: 0;
    opacity: 0;
    z-index: -1;
}

    .payment-page__controls .payment-statement__arrested-toggle input[type=checkbox]:checked + .icon-checkbox::after {
        opacity: 1;
    }

.payment-page__controls .payment-actions {
    display: flex;
    flex-direction: column;
    width: 100%;
    padding-top: 1.25rem;
}

@media (max-width: 768px) {
    .payment-page__controls .payment-actions {
        padding-bottom: 1rem;
        gap: 1.5rem;
    }
}

.payment-page__controls .payment-actions .payment-filters {
    display: flex;
    margin-bottom: 1.5rem;
    justify-content: space-between;
}

@media (max-width: 768px) {
    .payment-page__controls .payment-actions .payment-filters {
        flex-direction: column;
        margin-bottom: 0;
        gap: 1rem;
    }
}

.payment-page__controls .payment-actions .payment-filters-group {
    display: flex;
    width: 100%;
    height: 2.5rem;
    gap: 1.25rem;
    flex: 0 0 64%;
}

@media (max-width: 1400px) {
    .payment-page__controls .payment-actions .payment-filters-group {
        flex: 0 0 55%;
    }
}

@media (max-width: 1080px) {
    .payment-page__controls .payment-actions .payment-filters-group {
        flex: 0 0 48%;
    }
}

@media (max-width: 992px) {
    .payment-page__controls .payment-actions .payment-filters-group {
        flex: 0 0 59%;
    }
}

@media (max-width: 768px) {
    .payment-page__controls .payment-actions .payment-filters-group {
        flex: 0 0 100%;
        justify-content: space-around;
    }
}

.payment-page__controls .payment-actions .filter-option {
    position: relative;
    display: flex;
    align-items: center;
    padding: 0 0.25rem;
    font-size: 1rem;
    font-weight: 500;
    color: #767F8A;
    cursor: pointer;
    transition: color 0.32s ease-in-out;
}

    .payment-page__controls .payment-actions .filter-option::before {
        content: "";
        position: absolute;
        bottom: 0;
        left: 0;
        width: 0;
        height: 2px;
        background: #690DD3;
        transition: width 0.32s ease-in-out;
    }

    .payment-page__controls .payment-actions .filter-option:hover {
        color: rgb(51.0416666667%, 13.1915266106%, 94.6516106443%);
    }

    .payment-page__controls .payment-actions .filter-option .filter-radio {
        position: absolute;
        opacity: 0;
    }

        .payment-page__controls .payment-actions .filter-option .filter-radio:checked ~ .filter-label {
            color: #690DD3;
        }

            .payment-page__controls .payment-actions .filter-option .filter-radio:checked ~ .filter-label::before {
                width: 100%;
            }

        .payment-page__controls .payment-actions .filter-option .filter-radio:focus-visible ~ .filter-label {
            outline: 2px solid #690DD3;
            outline-offset: 2px;
        }

    .payment-page__controls .payment-actions .filter-option .filter-label {
        position: relative;
    }

        .payment-page__controls .payment-actions .filter-option .filter-label::before {
            content: "";
            position: absolute;
            bottom: -2px;
            left: 0;
            width: 0;
            height: 2px;
            background: #690DD3;
            transition: width 0.32s ease-in-out;
        }

    .payment-page__controls .payment-actions .filter-option .badge {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 1.5rem;
        width: 1.5rem;
        border-radius: 50%;
        background: #690DD3;
        font-size: 12px;
        font-weight: 500;
        color: #fff;
    }

.payment-page__controls .payment-actions .action-buttons {
    flex: 1;
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    flex-wrap: wrap;
    row-gap: 1.5rem;
    column-gap: 12px;
    justify-content: end;
    max-width: 380px;
}

@media (min-width: 1624px) {
    .payment-page__controls .payment-actions .action-buttons {
        max-width: 28.5%;
        width: 100%;
        flex: none;
    }
}

@media (min-width: 2048px) {
    .payment-page__controls .payment-actions .action-buttons {
        max-width: 468px;
        width: 100%;
    }
}

@media (max-width: 768px) {
    .payment-page__controls .payment-actions .action-buttons {
        width: 100%;
        max-width: 100%;
    }
}

.payment-page__controls .payment-actions .action-buttons .selected-counter {
    flex: 0 0 auto;
    background: #EDEFF1;
    color: #464B53;
    border: none;
}

@media (max-width: 768px) {
    .payment-page__controls .payment-actions .action-buttons {
        flex-direction: column;
    }
}

.payment-page__controls .payment-actions .payment-creat-dropdown {
    position: relative;
}

    .payment-page__controls .payment-actions .payment-creat-dropdown .dropdown-block {
        min-width: 12.625rem;
        max-width: 100%;
        width: 100%;
        z-index: 14;
    }

@media (max-width: 1750px) {
    .payment-page__controls .payment-actions .payment-creat-dropdown .dropdown-block {
        right: -5.5%;
    }
}

@media (max-width: 1200px) {
    .payment-page__controls .payment-actions .payment-creat-dropdown .dropdown-block {
        right: -10%;
    }
}

@media (max-width: 991px) {
    .payment-page__controls .payment-actions .payment-creat-dropdown .dropdown-block {
        right: inherit;
    }
}

.payment-page__controls .payment-actions .btn {
    padding: 0;
    height: 2.5rem;
}

@media (max-width: 992px) {
    .payment-page__controls .payment-actions .btn-import-payment {
        display: none;
    }
}

.payment-page__controls .payment-actions .btn:not(.btn-clear-period),
.payment-page__controls .payment-actions .payment-creat-dropdown:not(.btn-clear-period) {
    flex: 1 1 calc(50% - 12px);
    width: 50%;
    min-width: 6.25rem;
    gap: 0.5rem;
    font-weight: 500;
    font-size: 14px;
}

    .payment-page__controls .payment-actions .btn:not(.btn-clear-period).btn-payment-dropdown,
    .payment-page__controls .payment-actions .payment-creat-dropdown:not(.btn-clear-period).btn-payment-dropdown {
        width: 100%;
    }

        .payment-page__controls .payment-actions .btn:not(.btn-clear-period).btn-payment-dropdown .icon-arrow-down,
        .payment-page__controls .payment-actions .payment-creat-dropdown:not(.btn-clear-period).btn-payment-dropdown .icon-arrow-down {
            width: 1.25rem;
            height: 1.25rem;
            margin-top: -2px;
            transform: rotate(0deg);
            transition: transform 0.3s ease-out;
        }

        .payment-page__controls .payment-actions .btn:not(.btn-clear-period).btn-payment-dropdown.open .icon-arrow-down,
        .payment-page__controls .payment-actions .payment-creat-dropdown:not(.btn-clear-period).btn-payment-dropdown.open .icon-arrow-down {
            transform: rotate(180deg);
        }

    .payment-page__controls .payment-actions .btn:not(.btn-clear-period) .payment-creat-list,
    .payment-page__controls .payment-actions .payment-creat-dropdown:not(.btn-clear-period) .payment-creat-list {
        display: flex;
        flex-direction: column;
    }

    .payment-page__controls .payment-actions .btn:not(.btn-clear-period) .dropdown-item,
    .payment-page__controls .payment-actions .payment-creat-dropdown:not(.btn-clear-period) .dropdown-item {
        padding: 0 0 0 0.5rem;
        cursor: pointer;
    }

@media (max-width: 768px) {
    .payment-page__controls .payment-actions .btn:not(.btn-clear-period),
    .payment-page__controls .payment-actions .payment-creat-dropdown:not(.btn-clear-period) {
        flex: 1 1 100%;
        width: 100%;
        max-width: 100%;
    }
}

.payment-page__controls .payment-actions .payment-search-wrapper {
    display: flex;
    gap: 0.75rem;
}

@media (max-width: 992px) {
    .payment-page__controls .payment-actions .payment-search-wrapper {
        flex-wrap: wrap;
    }
}

@media (max-width: 768px) {
    .payment-page__controls .payment-actions .payment-search-wrapper {
        flex-wrap: wrap;
        gap: 1rem;
    }
}

.payment-page__controls .payment-actions .payment-report-calendar {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

@media (max-width: 992px) {
    .payment-page__controls .payment-actions .payment-report-calendar {
        width: 100%;
    }
}

.payment-page__controls .payment-actions .payment-report-calendar__title {
    display: block;
    font-size: 17px;
    font-weight: 500;
    line-height: 1.5rem;
    color: #32383c;
}

.payment-page__controls .payment-actions .payment-report-calendar__data-wrap {
    display: flex;
    gap: 0.5rem;
    height: 40px;
}

.payment-page__controls .payment-actions .payment-report-calendar__data-info {
    padding: 0.5rem 0.75rem;
    display: flex;
    align-items: center;
    border-radius: 0.5rem;
    border: 1px solid #DBDFE4;
    transition: all 0.32s ease-in-out;
}

    .payment-page__controls .payment-actions .payment-report-calendar__data-info:hover {
        border-color: #690DD3;
        background: #F5EDFF;
    }

        .payment-page__controls .payment-actions .payment-report-calendar__data-info:hover .icon-payment-calendar-data {
            background-color: #690DD3 !important;
        }

.payment-page__controls .payment-actions .payment-report-calendar__btn-period {
    border-radius: 0.75rem;
    border: none;
    background: transparent;
    font-size: 1rem;
    line-height: 1.25rem;
    color: #32383c;
    cursor: pointer;
}

.payment-page__controls .payment-search__input-wrapper {
    position: relative;
    flex-basis: 64%;
    flex-grow: 1;
    flex: 1;
}

.payment-page__controls .payment-search__input {
    width: 100%;
    padding-right: 2.5rem;
    height: 40px;
}

.payment-page__controls .payment-search__clear {
    width: 2.5rem !important;
    max-height: 2.5rem !important;
    margin: 0;
}

.payment-page__controls .payment-search__clear-btn {
    position: absolute;
    right: 0.5rem;
    top: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 76%;
    width: 2rem;
    border: 1px solid #DBDFE4;
    border-radius: 0.5rem;
    background: #fff;
    transform: translateY(-50%) !important;
    cursor: pointer;
}

    .payment-page__controls .payment-search__clear-btn:hover {
        border-color: #690DD3;
    }

.payment-page__list {
    height: 100%;
}

    .payment-page__list .payment-grid {
        position: relative;
        display: grid;
        grid-template-rows: auto 1fr auto;
        width: calc(100% - 0.6px);
        box-sizing: border-box;
    }

@media (max-width: 1375px) {
    .payment-page__list .payment-grid {
        min-width: 100%;
    }
}

@media (max-width: 992px) {
    .payment-page__list .payment-grid {
        padding: 1.5rem 0.75rem;
    }
}

@media (max-width: 992px) {
    .payment-page__list .payment-grid {
        padding: 0 0.75rem;
    }
}

.payment-page__list .custom-pagination-selector {
    position: relative;
}

    .payment-page__list .custom-pagination-selector .pagination-selector-btn {
        position: relative;
        display: flex;
        width: 3.5rem;
        margin-right: 0.75rem;
        padding: 0.4rem 2rem 0.3rem 0.5rem;
        color: #27292C;
        background-color: #fff;
        border-radius: 0.25rem;
        border: 1px solid #CDD3DD;
        font-size: 12px;
        transition: 0.32s;
    }

        .payment-page__list .custom-pagination-selector .pagination-selector-btn::after {
            content: "";
            position: absolute;
            top: 0.25rem;
            right: 0.5rem;
            width: 1rem;
            height: 1rem;
            transform: rotate(180deg);
            transition: 0.3s ease-in-out;
            display: inline-block;
            width: 17px;
            height: 17px;
            background-color: currentColor;
            background-image: none;
            mask-image: url("../img/sprite.svg#icon-arrow-black-down");
        }

.debugUrl .payment-page__list .custom-pagination-selector .pagination-selector-btn::after {
    mask-image: url("/Content/themes/novapay/img/sprite.svg#icon-arrow-black-down");
}

.payment-page__list .custom-pagination-selector .pagination-selector-btn::after {
    mask-repeat: no-repeat;
    mask-size: contain;
}

.payment-page__list .custom-pagination-selector .pagination-selector-btn.dropdown-open:after {
    transform: rotate(0deg);
}

.payment-page__list .custom-pagination-selector .pagination-selector-dropdown {
    position: absolute;
    bottom: 100%;
    left: 0;
    display: flex;
    flex-direction: column-reverse;
    width: 100%;
    max-width: 3.5rem;
    margin-bottom: 5px;
    overflow: hidden;
    transform: scaleY(0);
    transform-origin: bottom;
    opacity: 0;
    transition: 0.22s ease-in-out;
    z-index: 4;
    border: 1px solid #CDD3DD;
    border-radius: 0.25rem;
}

    .payment-page__list .custom-pagination-selector .pagination-selector-dropdown.open {
        transform: scaleY(1);
        opacity: 1;
        z-index: 12;
    }

.payment-page__list .custom-pagination-selector .pagination-selector-list {
    display: flex;
    flex-direction: column-reverse;
}

.payment-page__list .custom-pagination-selector .pagination-selector-option {
    padding: 0.25rem 0.5rem;
    background-color: #fff;
    border-bottom: 1px solid #e9ecef;
    transition: 0.3s;
}

    .payment-page__list .custom-pagination-selector .pagination-selector-option:first-of-type {
        border-bottom: 0;
    }

    .payment-page__list .custom-pagination-selector .pagination-selector-option:hover {
        cursor: pointer;
        background-color: #e9ecef;
    }

.payment-page__list .grid-header {
    position: sticky;
    top: 0;
    display: grid;
    grid-template-columns: minmax(38px, 0.165fr) minmax(130px, 0.57fr) 0.525fr 1fr 0.525fr 1fr 0.57fr 0.17fr;
    align-items: center;
    gap: 0.5rem;
    padding: 0.49rem 1.5rem;
    height: 4rem;
    border-bottom: 1px solid #e0e0e0;
    z-index: 12;
    transition: all 0.3s ease;
    background-color: #EDEFF1;
}

@media (min-width: 993px) and (max-width: 1375px) {
    .payment-page__list .grid-header {
        grid-template-columns: minmax(38px, 0.165fr) minmax(80px, 0.57fr) 0.525fr 1fr 0.525fr 1fr 0.57fr 0.17fr;
    }
}

.payment-page__list .grid-header.is-fixed {
    padding-right: 1.875rem;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    box-shadow: 0 0.25rem 2.125rem 0 rgba(191, 195, 204, 0.3);
    transition: transform 0.2s ease;
}

@media (max-width: 992px) {
    .payment-page__list .grid-header {
        display: none;
    }
}

.payment-page__list .grid-header .grid-cell.period-col {
    flex-direction: row;
    gap: 0;
}

.payment-page__list .grid-header .grid-cell.status-col {
    position: relative;
    flex-direction: row;
}

    .payment-page__list .grid-header .grid-cell.status-col.is-disabled {
        display: none;
    }

@media (min-width: 993px) and (max-width: 1375px) {
    .payment-page__list .grid-header .grid-cell.status-col {
        max-width: 3.75rem;
    }
}

.payment-page__list .sort-button {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0;
    background: transparent;
    border: none;
    cursor: pointer;
    font-size: 12px;
    font-weight: 500;
    color: #767F8A;
}

    .payment-page__list .sort-button .icon-status-bg {
        position: relative;
        display: block;
    }

        .payment-page__list .sort-button .icon-status-bg:before {
            position: absolute;
            content: "";
            left: 50%;
            top: 50%;
            height: 1.5rem;
            width: 1.5rem;
            border-radius: 0.5rem;
            opacity: 0;
            background: #767F8A;
            transform: translate(-50%, -50%);
        }

    .payment-page__list .sort-button .ico-n {
        background-color: #767F8A !important;
    }

    .payment-page__list .sort-button.sort-button-status {
        gap: 0.75rem;
    }

        .payment-page__list .sort-button.sort-button-status .icon-status-bg {
            position: relative;
        }

        .payment-page__list .sort-button.sort-button-status .status-badge {
            position: absolute;
            background-color: #690DD3;
            color: #fff;
            border-radius: 50%;
        }

            .payment-page__list .sort-button.sort-button-status .status-badge.show {
                padding: 1px 4px;
                font-size: 11px;
                top: -0.25rem;
                left: 0.75rem;
            }

    .payment-page__list .sort-button:active .icon-status-bg:before {
        opacity: 0.1;
    }

    .payment-page__list .sort-button .data-last-update {
        display: block;
        text-align: left;
    }

    .payment-page__list .sort-button:hover .icon-tablestatus-payment {
        background-color: #690DD3 !important;
    }

.payment-page__list .sort-col-period {
    border: none;
    padding: 0;
    cursor: pointer;
    background: transparent;
}

    .payment-page__list .sort-col-period .ico-n {
        background-color: #767F8A !important;
    }

    .payment-page__list .sort-col-period .icon-arrow-sort.sort-up, .payment-page__list .sort-col-period .icon-arrow-sort.sort-down,
    .payment-page__list .sort-button .icon-arrow-sort.sort-up,
    .payment-page__list .sort-button .icon-arrow-sort.sort-down {
        opacity: 1;
    }

    .payment-page__list .sort-col-period .icon-arrow-sort.sort-down,
    .payment-page__list .sort-button .icon-arrow-sort.sort-down {
        transform: rotate(180deg);
    }

    .payment-page__list .sort-col-period .icon-arrow-sort.sort-up,
    .payment-page__list .sort-button .icon-arrow-sort.sort-up {
        margin-left: -0.625rem;
        transform: rotate(0deg);
    }

    .payment-page__list .sort-col-period[data-sort-order=asc] .icon-arrow-sort.sort-up,
    .payment-page__list .sort-button[data-sort-order=asc] .icon-arrow-sort.sort-up {
        opacity: 1;
        display: inline-block;
        margin: 0;
    }

    .payment-page__list .sort-col-period[data-sort-order=asc] .icon-arrow-sort.sort-down,
    .payment-page__list .sort-button[data-sort-order=asc] .icon-arrow-sort.sort-down {
        opacity: 0;
        display: none;
    }

    .payment-page__list .sort-col-period[data-sort-order=desc] .icon-arrow-sort.sort-up,
    .payment-page__list .sort-button[data-sort-order=desc] .icon-arrow-sort.sort-up {
        display: none;
        opacity: 0;
    }

    .payment-page__list .sort-col-period[data-sort-order=desc] .icon-arrow-sort.sort-down,
    .payment-page__list .sort-button[data-sort-order=desc] .icon-arrow-sort.sort-down {
        display: inline-block;
        opacity: 1;
    }

    .payment-page__list .sort-col-period.is-sort-active .ico-n,
    .payment-page__list .sort-button.is-sort-active .ico-n {
        background-color: #690DD3 !important;
    }

.payment-page__list .status-dropdown {
    position: absolute;
    right: 0;
    top: 143%;
    display: none;
    min-width: 14.125rem;
    height: 22rem;
    z-index: 100;
    border: 1px solid #ccc;
    border-radius: 0.375rem;
    display: flex;
    max-width: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: rgba(168, 173, 180, 0.5);
}

    .payment-page__list .status-dropdown::-webkit-scrollbar-track {
        background: rgba(168, 173, 180, 0.5);
        border-radius: 0.25rem;
    }

    .payment-page__list .status-dropdown::-webkit-scrollbar-thumb {
        background: rgba(168, 173, 180, 0.5);
        border-radius: 0.25rem;
    }

        .payment-page__list .status-dropdown::-webkit-scrollbar-thumb:hover {
            background: rgba(168, 173, 180, 0.5);
        }

.payment-page__list .status-dropdown__list {
    list-style: none;
    width: 100%;
}

.payment-page__list .status-dropdown__list-item {
    padding: 0.75rem 1rem;
    background: #fff;
}

    .payment-page__list .status-dropdown__list-item[data-status-active=true] {
        background: #f4f6f7;
    }

.payment-page__list .status-dropdown .form-check-label {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.25rem;
    cursor: pointer;
}

.payment-page__list .status-dropdown .checkbox-view {
    padding-left: 1.625rem;
}

.payment-page__list .grid-body {
    display: flex;
    flex-direction: column;
    list-style: none;
    margin: 0;
    padding: 0;
    min-height: 19rem;
}

@media (max-width: 992px) {
    .payment-page__list .grid-body {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        border: none;
        gap: 0.75rem;
        padding-bottom: 1.5rem;
    }
}

@media (max-width: 768px) {
    .payment-page__list .grid-body {
        grid-template-columns: repeat(1, 1fr);
        padding-bottom: 1rem;
    }
}

.payment-page__list .grid-body.empty-data {
    display: flex;
    align-items: center;
    justify-content: center;
}

.payment-page__list .no-payments__container {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.payment-page__list .no-payments__image {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 12.563rem;
    height: 12.563rem;
    margin-block-start: 0.75rem;
    background: url("../img/newDesign/box_error.png") no-repeat center;
}

.debugUrl .payment-page__list .no-payments__image {
    background: url("/Content/themes/novapay/img/newDesign/box_error.png") no-repeat center;
}

.payment-page__list .no-payments__text {
    text-align: center;
}

.payment-page__list .no-payments__title {
    margin: 0 0 0.25rem 0;
    font-size: 16px;
    color: #464B53;
    font-weight: normal;
}

.payment-page__list .no-payments__info {
    font-size: 14px;
    color: #767F8A;
}

.payment-page__list .grid-row {
    grid-template-columns: minmax(38px, 0.165fr) minmax(130px, 0.57fr) 0.525fr 1fr 0.525fr 1fr 0.57fr 0.17fr;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    align-items: center;
    border-bottom: 1px solid #f0f0f0;
    display: grid;
    background: #fff;
}

@media (min-width: 993px) and (max-width: 1375px) {
    .payment-page__list .grid-row {
        grid-template-columns: minmax(38px, 0.165fr) minmax(80px, 0.57fr) 0.525fr 1fr 0.525fr 1fr 0.57fr 0.17fr;
    }
}

@media (max-width: 992px) {
    .payment-page__list .grid-row {
        position: relative;
        display: grid;
        grid-template-columns: 38px 1fr;
        gap: 0.5rem;
        padding: 0.5rem;
        border-radius: 0.5rem;
        border: 1px solid #DBDFE4;
    }
}

.payment-page__list .grid-row:hover {
    background-color: #f9f9f9;
}

.payment-page__list .grid-cell {
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

@media (max-width: 992px) {
    .payment-page__list .grid-cell {
        flex-direction: column;
    }
}

.payment-page__list .grid-cell .sender-name,
.payment-page__list .grid-cell .payment-amount,
.payment-page__list .grid-cell .receiver-name {
    font-size: 14px;
    color: #32383c;
    font-weight: 500;
}

.payment-page__list .grid-cell .sender-name {
    display: flex;
    gap: 0.25rem;
}

@media (min-width: 993px) and (max-width: 1375px) {
    .payment-page__list .grid-cell .amount-col,
    .payment-page__list .grid-cell .payment-amount {
        min-width: 4.375rem;
    }
}

.payment-page__list .grid-cell .payment-amount {
    display: flex;
    gap: 0.25rem;
}

    .payment-page__list .grid-cell .payment-amount .amount-icon {
        display: block;
        height: 1.125rem;
        width: 1.125rem;
    }

        .payment-page__list .grid-cell .payment-amount .amount-icon .sort-down {
            transform: rotate(227deg);
        }

        .payment-page__list .grid-cell .payment-amount .amount-icon .sort-up {
            transform: rotate(45deg);
        }

    .payment-page__list .grid-cell .payment-amount.amount-debit .amount-value {
        color: #32383c;
    }

    .payment-page__list .grid-cell .payment-amount.amount-credit .amount-value {
        color: #22967F;
    }

    .payment-page__list .grid-cell .payment-amount.amount-transfer .amount-value, .payment-page__list .grid-cell .payment-amount.amount-own .amount-value {
        color: #3C81D3;
    }

    .payment-page__list .grid-cell .payment-amount.amount-deleted .amount-value, .payment-page__list .grid-cell .payment-amount.amount-rejected .amount-value {
        color: #DE4420;
    }

    .payment-page__list .grid-cell .payment-amount .icon-status-debit,
    .payment-page__list .grid-cell .payment-amount .icon-status-credit,
    .payment-page__list .grid-cell .payment-amount .icon-status-transfer,
    .payment-page__list .grid-cell .payment-amount .icon-status-own {
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
    }

        .payment-page__list .grid-cell .payment-amount .icon-status-debit.icon-status-deleted, .payment-page__list .grid-cell .payment-amount .icon-status-debit.rejected,
        .payment-page__list .grid-cell .payment-amount .icon-status-credit.icon-status-deleted,
        .payment-page__list .grid-cell .payment-amount .icon-status-credit.rejected,
        .payment-page__list .grid-cell .payment-amount .icon-status-transfer.icon-status-deleted,
        .payment-page__list .grid-cell .payment-amount .icon-status-transfer.rejected,
        .payment-page__list .grid-cell .payment-amount .icon-status-own.icon-status-deleted,
        .payment-page__list .grid-cell .payment-amount .icon-status-own.rejected {
            background: #FFF4F3;
        }

            .payment-page__list .grid-cell .payment-amount .icon-status-debit.icon-status-deleted .ico-n, .payment-page__list .grid-cell .payment-amount .icon-status-debit.rejected .ico-n,
            .payment-page__list .grid-cell .payment-amount .icon-status-credit.icon-status-deleted .ico-n,
            .payment-page__list .grid-cell .payment-amount .icon-status-credit.rejected .ico-n,
            .payment-page__list .grid-cell .payment-amount .icon-status-transfer.icon-status-deleted .ico-n,
            .payment-page__list .grid-cell .payment-amount .icon-status-transfer.rejected .ico-n,
            .payment-page__list .grid-cell .payment-amount .icon-status-own.icon-status-deleted .ico-n,
            .payment-page__list .grid-cell .payment-amount .icon-status-own.rejected .ico-n {
                background-color: #DE4420;
            }

    .payment-page__list .grid-cell .payment-amount .icon-status-debit {
        background: #F1F2F4;
    }

    .payment-page__list .grid-cell .payment-amount .icon-status-credit {
        background: #E1F8F2;
    }

    .payment-page__list .grid-cell .payment-amount .icon-status-transfer,
    .payment-page__list .grid-cell .payment-amount .icon-status-own {
        height: 1.125em;
        width: 1.125rem;
        background: #ecf7ff;
    }

    .payment-page__list .grid-cell .payment-amount [data-amount-sort=Debit] {
        background-color: #32383c;
    }

    .payment-page__list .grid-cell .payment-amount [data-amount-sort=Credit] {
        background-color: #22967F;
    }

    .payment-page__list .grid-cell .payment-amount [data-amount-sort=Transfer],
    .payment-page__list .grid-cell .payment-amount [data-amount-sort=Own] {
        background-color: #3C81D3;
    }

.payment-page__list .grid-cell .sender-iban,
.payment-page__list .grid-cell .receiver-iban,
.payment-page__list .grid-cell .sender-state-code,
.payment-page__list .grid-cell .receiver-state-code {
    font-size: 12px;
    color: #767F8A;
}

@media (max-width: 992px) {
    .payment-page__list .grid-cell__checkbox {
        position: absolute;
        grid-column: 1;
    }

        .payment-page__list .grid-cell__checkbox .form-check-label .checkbox-view::after, .payment-page__list .grid-cell__checkbox .form-check-label .checkbox-view::before {
            height: 1.5rem;
            width: 1.5rem;
        }
}

.payment-page__list .grid-cell__sender, .payment-page__list .grid-cell__period, .payment-page__list .grid-cell__amount, .payment-page__list .grid-cell__receiver, .payment-page__list .grid-cell__status, .payment-page__list .grid-cell__last-update {
    cursor: pointer;
}

@media (max-width: 992px) {
    .payment-page__list .grid-cell__period, .payment-page__list .grid-cell__sender, .payment-page__list .grid-cell__amount, .payment-page__list .grid-cell__receiver, .payment-page__list .grid-cell__status, .payment-page__list .grid-cell__actions, .payment-page__list .grid-cell__last-update {
        grid-column: 2;
    }
}

.payment-page__list .grid-cell__status {
    gap: 0.5rem;
}

    .payment-page__list .grid-cell__status .data-update {
        color: #767F8A;
        font-size: 14px;
        font-weight: 500;
        line-height: 1.3;
    }

@media (min-width: 993px) and (max-width: 1375px) {
    .payment-page__list .grid-cell__status {
        width: 100%;
    }
}

@media (max-width: 992px) {
    .payment-page__list .grid-cell__status {
        width: 100%;
        margin-top: 0.75rem;
    }
}

.payment-page__list .grid-cell__actions {
    position: relative;
    align-items: center;
}

@media (max-width: 992px) {
    .payment-page__list .grid-cell__actions {
        align-items: flex-start;
        margin-top: 0.75rem;
    }
}

.payment-page__list .grid-cell__actions .btn-td__action {
    width: 2rem;
    height: 2rem;
    padding: 0;
    border-radius: 0.5rem;
    background: transparent;
    border: none;
    outline: none;
    color: #202427;
}

    .payment-page__list .grid-cell__actions .btn-td__action .icon-vertical-dot {
        color: #DBDFE4;
    }

    .payment-page__list .grid-cell__actions .btn-td__action:hover .icon-vertical-dot, .payment-page__list .grid-cell__actions .btn-td__action:active .icon-vertical-dot, .payment-page__list .grid-cell__actions .btn-td__action:focus .icon-vertical-dot {
        color: #767F8A;
    }

    .payment-page__list .grid-cell__actions .btn-td__action span {
        cursor: pointer;
        position: relative;
    }

    .payment-page__list .grid-cell__actions .btn-td__action .content-text {
        display: none;
    }

@media (max-width: 992px) {
    .payment-page__list .grid-cell__actions .btn-td__action {
        width: 100%;
        height: 2.5rem;
        border-radius: 0.5rem;
        border: 1px solid #DBDFE4;
        background: transparent;
        font-weight: 500;
    }

        .payment-page__list .grid-cell__actions .btn-td__action .content-dot {
            display: none;
        }

        .payment-page__list .grid-cell__actions .btn-td__action .content-text {
            display: block;
            width: 100%;
            font-size: 14px;
            text-align: center;
            line-height: 1.35;
        }
}

.payment-page__list .grid-cell__actions-dropdown {
    transform: scaleY(0);
    min-width: 13.313rem;
    transition: transform 0.32s ease-in;
}

@media (max-width: 768px) {
    .payment-page__list .grid-cell__actions-dropdown {
        height: 0;
        transform: scale(0);
    }
}

.payment-page__list .grid-cell__actions-dropdown.open {
    display: block;
    transform: scaleY(1);
    top: -50%;
    left: 0;
    transform: translateX(-13rem);
    z-index: 20;
}

@media (max-width: 992px) {
    .payment-page__list .grid-cell__actions-dropdown.open {
        height: auto;
        left: 0;
        width: 100%;
        top: 110%;
        left: 0;
        width: 100%;
        transform: translateX(0) scale(1);
    }
}

.payment-page__list .grid-cell__actions-list {
    display: flex;
    flex-direction: column;
}

    .payment-page__list .grid-cell__actions-list .icon-edit-payment {
        width: 17px;
        height: 17px;
    }

.payment-page__list .grid-cell__actions-item {
    padding: 0;
    min-height: auto;
}

    .payment-page__list .grid-cell__actions-item:hover {
        background: #fff;
    }

    .payment-page__list .grid-cell__actions-item .btn-actions {
        position: relative;
        padding-left: 2.5rem;
        gap: 0;
        min-height: 2.25rem;
        border: none;
        border-radius: 0.25rem;
        font-size: 12px;
        font-weight: 500;
        text-align: left;
        color: #767F8A;
        transition: background-color 0.42s ease-out, color 0.42s ease-out;
    }

        .payment-page__list .grid-cell__actions-item .btn-actions:hover {
            background-color: #F5EDFF;
            color: #5E1CAB;
        }

        .payment-page__list .grid-cell__actions-item .btn-actions .ico-n {
            position: absolute;
            left: 0.5rem;
            top: 50% !important;
            transform: translateY(-50%);
        }

        .payment-page__list .grid-cell__actions-item .btn-actions.actions-negative {
            background-color: #FFF;
            color: #EB4235;
        }

            .payment-page__list .grid-cell__actions-item .btn-actions.actions-negative:hover {
                background-color: #FFEEE2;
                color: #DE4420;
            }

        .payment-page__list .grid-cell__actions-item .btn-actions.actions-positive:hover {
            background-color: #E1F8F2;
            color: #22967F;
        }

.payment-page__list .grid-cell__sender-name-wrap {
    display: flex;
    gap: 4px;
    align-items: center;
}

.payment-page__list .grid-cell__ob-notification-wrap {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #F5EDFF;
    display: flex;
    align-items: center;
    justify-content: center;
}

.payment-page__list .grid-cell__ob-notification-icon {
    background: #690DD3;
    width: 14px;
    height: 14px;
}

.payment-page__list .grid-dropdown__list {
    flex-direction: column;
}

.payment-page__list .period-col__title {
    display: block;
    width: fit-content;
    padding: 0.25rem 0.625rem;
    border-radius: 1.5rem;
    border: 1px solid #DBDFE4;
    background: #f4f6f7;
}

.payment-page__list .period-col__item {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.payment-page__list .period-col__date, .payment-page__list .period-col__payment-code {
    font-size: 14px;
    color: #32383c;
    font-weight: 500;
}

.payment-page__list .period-col__payment-code {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

@media (max-width: 992px) {
    .payment-page__list .period-col__payment-code {
        text-align: left;
    }
}

.payment-page__list .period-col__time {
    font-size: 12px;
    color: #767F8A;
}

.payment-page__list .checkbox-col {
    display: flex;
}

.payment-page__list .status-pill {
    padding: 0.5rem 0.5rem;
    width: 100%;
    max-width: 9.375rem;
    background-color: #ffeeba;
    border-radius: 1.5rem;
    font-size: 0.85rem;
    white-space: nowrap;
    color: #856404;
}

@media (max-width: 992px) {
    .payment-page__list .status-pill {
        width: 100%;
        padding: 0.65rem 0.75rem;
    }
}

.payment-page__list .grid-footer {
    position: sticky;
    bottom: 0;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    align-items: center;
    padding: 0.75rem 0;
    width: 100%;
    background-color: #fff;
    border-top: 1px solid #DBDFE4;
    border-bottom-left-radius: 0.75rem;
    border-bottom-right-radius: 0.75rem;
    z-index: 10;
}

@media (max-width: 992px) {
    .payment-page__list .grid-footer {
        flex-direction: column;
        gap: 0.75rem;
        padding: 1rem 0;
    }
}

.payment-page__list .grid-footer .footer-separator-border {
    display: block;
    position: relative;
    width: 0.25rem;
    height: 100%;
}

@media (max-width: 992px) {
    .payment-page__list .grid-footer .footer-separator-border {
        display: none;
    }
}

.payment-page__list .grid-footer .footer-separator-border:before {
    position: absolute;
    content: "";
    width: 1px;
    left: 50%;
    height: 100%;
    transform: translate(-50%, 0);
    background: #DBDFE4;
}

.payment-page__list .grid-footer.is-fixed-bottom {
    transition: transform 0.2s ease;
}

.payment-page__list .grid-footer .btn-notify-payment {
    position: relative;
    width: 2.5rem;
    font-weight: 500;
    font-size: 14px;
}

    .payment-page__list .grid-footer .btn-notify-payment .ico-n {
        position: absolute;
        left: 0.5rem;
        top: 50%;
        transform: translateY(-50%);
        background-color: #32383c !important;
    }

@media (max-width: 768px) {
    .payment-page__list .grid-footer .btn-notify-payment {
        max-width: 100%;
    }
}

.payment-page__list .grid-footer .btn-notify-payment .tooltip-text {
    bottom: auto;
    top: -34px;
    left: -35%;
    transform: translateX(-68%);
}

    .payment-page__list .grid-footer .btn-notify-payment .tooltip-text::after {
        top: auto;
        bottom: -7px;
        transform: rotate(0);
        left: 79% !important;
    }

.payment-page__list .footer-summary {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    width: 0;
    height: 0;
    opacity: 0;
    visibility: hidden;
    transition: opacity 3s ease;
}

@media (max-width: 992px) {
    .payment-page__list .footer-summary {
        width: 100%;
        flex-direction: row;
        gap: 1rem;
    }
}

.payment-page__list .footer-summary.active {
    width: auto;
    height: auto;
    margin-right: 2rem;
    opacity: 1;
    visibility: visible;
}

@media (max-width: 992px) {
    .payment-page__list .footer-summary.active {
        flex-direction: column;
    }
}

.payment-page__list .footer-summary__count, .payment-page__list .footer-summary__chosens {
    display: flex;
    gap: 0.25rem;
}

.payment-page__list .footer-summary__chosens {
    color: #767F8A;
    font-size: 12px;
}

.payment-page__list .footer-summary__count {
    color: #32383c;
    font-size: 14px;
    font-weight: 600;
}

    .payment-page__list .footer-summary__count .amount-payments {
        splay: block;
        white-space: nowrap;
    }

.payment-page__list .footer-actions-container {
    display: flex;
    max-width: 100%;
    width: 100%;
    padding: 0 1.5rem;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: rgba(168, 173, 180, 0.5);
}

    .payment-page__list .footer-actions-container::-webkit-scrollbar-track {
        background: rgba(168, 173, 180, 0.5);
        border-radius: 0.25rem;
    }

    .payment-page__list .footer-actions-container::-webkit-scrollbar-thumb {
        background: rgba(168, 173, 180, 0.5);
        border-radius: 0.25rem;
    }

        .payment-page__list .footer-actions-container::-webkit-scrollbar-thumb:hover {
            background: rgba(168, 173, 180, 0.5);
        }

@media (max-width: 992px) {
    .payment-page__list .footer-actions-container {
        width: 100%;
        max-width: 100%;
        flex-direction: row;
        flex-wrap: wrap;
        gap: 1rem;
        overflow-x: hidden;
        scrollbar-width: none;
    }

        .payment-page__list .footer-actions-container::-webkit-scrollbar {
            display: none;
        }
}

.payment-page__list .footer-actions {
    display: flex;
    gap: 0.75rem;
    padding-bottom: 0.5rem;
}

@media (max-width: 992px) {
    .payment-page__list .footer-actions {
        flex-wrap: wrap;
        padding-bottom: 0;
    }
}

.payment-page__list .footer-actions--positive + .footer-separator-border {
    display: block;
    padding: 0 0.75rem;
    min-height: 2.5rem;
}

@media (max-width: 992px) {
    .payment-page__list .footer-actions--positive + .footer-separator-border {
        padding: 0 0.5rem;
        display: none;
    }
}

.payment-page__list .name {
    font-weight: 500;
}

.payment-page__list .iban {
    font-size: 0.85em;
    color: #666;
}

.payment-page__list .grid-pagination {
    display: flex;
    justify-content: space-between;
    padding: 0.75rem 1.5rem;
    border-top: 1px solid #DBDFE4;
}

@media (max-width: 768px) {
    .payment-page__list .grid-pagination {
        flex-direction: column-reverse;
        align-items: center;
        padding: 0.85rem 0 0 0;
    }
}

.payment-page__list .grid-pagination__options-filter {
    width: 100%;
    cursor: pointer;
}

.payment-page__list .grid-pagination__switch:checked + .grid-pagination__options-filter .grid-pagination__select {
    transform: scaleY(1);
    opacity: 1;
    z-index: 12;
}

.payment-page__list .grid-pagination__switch:checked + .grid-pagination__options-filter .grid-pagination__filter:after {
    transform: rotate(0deg);
}

.payment-page__list .grid-pagination__filter {
    position: relative;
    display: flex;
    margin-right: 0.75rem;
    padding: 0.35rem 2rem 0.2rem 0.5rem;
    color: #27292C;
    background-color: #fff;
    border-radius: 0.25rem;
    border: 1px solid #CDD3DD;
    font-size: 12px;
    transition: 0.32s;
}

    .payment-page__list .grid-pagination__filter::after {
        content: "";
        position: absolute;
        top: 4px;
        right: 0.5rem;
        width: 1rem;
        height: 1rem;
        transform: rotate(180deg);
        transition: 0.3s ease-in-out;
        display: inline-block;
        width: 17px;
        height: 17px;
        background-color: currentColor;
        background-image: none;
        mask-image: url("../img/sprite.svg#icon-arrow-black-down");
    }

.debugUrl .payment-page__list .grid-pagination__filter::after {
    mask-image: url("/Content/themes/novapay/img/sprite.svg#icon-arrow-black-down");
}

.payment-page__list .grid-pagination__filter::after {
    mask-repeat: no-repeat;
    mask-size: contain;
}

.payment-page__list .grid-pagination__select {
    position: absolute;
    bottom: 100%;
    left: 0;
    display: flex;
    flex-direction: column-reverse;
    width: 100%;
    margin-bottom: 5px;
    overflow: hidden;
    transform: scaleY(0);
    transform-origin: bottom;
    opacity: 0;
    transition: 0.22s ease-in-out;
    z-index: 4;
    border: 1px solid #CDD3DD;
    border-radius: 0.25rem;
}

.payment-page__list .grid-pagination__select-option {
    padding: 0.25rem 0.5rem;
    background-color: #fff;
    border-bottom: 1px solid #e9ecef;
    transition: 0.3s;
}

    .payment-page__list .grid-pagination__select-option:first-of-type {
        border-bottom: 0;
    }

    .payment-page__list .grid-pagination__select-option:hover {
        background-color: #e9ecef;
    }

.payment-page__list .pagination-controls {
    display: flex;
    align-items: center;
    color: #767F8A;
}

.payment-page__list .pagination-info {
    margin-right: 0.75rem;
}

.payment-page__list .pagination-info-count {
    display: flex;
    gap: 0.5rem;
}

    .payment-page__list .pagination-info-count .pagination-interval {
        color: #32383c;
    }

.payment-page__list .btn-show-more {
    padding: 0.5rem 1rem;
    height: fit-content;
    border-radius: 0.5rem;
    color: #690DD3;
    font-size: 15px;
    font-weight: 600;
    background: transparent;
    border: 1px solid #690DD3;
    outline: none;
    cursor: pointer;
}

    .payment-page__list .btn-show-more .ico-n {
        margin-right: 0.5rem;
    }

    .payment-page__list .btn-show-more span {
        margin-left: 0.5rem;
    }

@media (max-width: 768px) {
    .payment-page__list .btn-show-more {
        margin-bottom: 1.125rem;
        width: 100%;
    }
}

.payment-page__list .btn-show-more.btn--loading {
    opacity: 0.6;
    cursor: not-allowed;
    position: relative;
}

    .payment-page__list .btn-show-more.btn--loading::after {
        content: "";
        position: absolute;
        top: 50%;
        left: 50%;
        margin-left: -0.5rem;
        margin-top: -0.5rem;
        width: 1rem;
        height: 1rem;
        border: 2px solid transparent;
        border-top: 2px solid currentColor;
        border-radius: 50%;
        animation: spin 1s linear infinite;
    }

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.payment-page .related-payments-info {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 1.25rem;
    width: 1.25rem;
    border-radius: 50%;
    background: #E1F8F2;
}

    .payment-page .related-payments-info .ico-n {
        color: #22967F;
    }

.resend-payment-detail {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.resend-payment-detail__header {
    display: flex;
    justify-content: space-between;
}

.resend-payment-detail__title {
    font-size: 1.25rem;
    font-weight: 600;
}

.resend-payment-detail__bodyl-confirmation {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.resend-payment-detail__confirmation-message {
    padding-bottom: 1rem;
    border-bottom: 1px solid #DBDFE4;
}

.resend-payment-detail__confirmation-actions {
    display: flex;
    position: relative;
    justify-content: space-between;
}

.export-payment {
    display: flex;
    flex-direction: column;
}

.export-payment__header {
    display: flex;
    justify-content: space-between;
}

.export-payment__title {
    font-size: 1.25rem;
    font-weight: 600;
}

.export-payment__subtitle {
    margin: 0 0 1.25rem 0;
}

.export-payment__message {
    margin: 1.25rem 0 0 0;
}

.export-payment__subtitle, .export-payment__message {
    font-size: 15px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px;
}

.export-payment__lable-text {
    margin-left: 30px;
    width: fit-content !important;
    color: #32383c;
    font-weight: 400;
    font-size: 14px;
    line-height: 18px;
}

    .export-payment__lable-text::before, .export-payment__lable-text::after {
        transform: translateY(-48%) !important;
    }

.export-payment .tooltip-text {
    color: #FFF;
    text-align: center;
    font-size: 11px;
    font-style: normal;
    font-weight: 400;
    line-height: 12px;
}

.export-payment #exportPayment-tooltip::after {
    left: calc(100% - (50% + 8px)) !important;
}

@media (max-width: 480px) {
    .export-payment #exportPayment-tooltip::after {
        left: calc(100% - (77% + 14px)) !important;
    }
}

.export-payment__control-wrap {
    padding: 0 0 4px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.export-payment__control-row {
    margin-bottom: 16px;
}

.export-payment__tooltip .icon-info-new {
    background-color: #690DD3 !important;
}

.export-payment__border {
    border-bottom: 1px solid #DBDFE4;
    margin-bottom: 20px;
}

.export-payment__format {
    position: relative;
    display: flex;
    justify-content: flex-end;
    gap: 16px;
    align-items: center;
}

@media (max-width: 768px) {
    .export-payment__format {
        flex-wrap: wrap;
    }
}

.export-payment__format .v-border {
    height: 2.25rem;
    width: 1px;
    background: #DBDFE4;
}

@media (max-width: 768px) {
    .export-payment__format .v-border {
        display: none;
    }
}

.export-payment__format .btn-action-format {
    padding: 0.5rem 0.75rem;
}

    .export-payment__format .btn-action-format:hover, .export-payment__format .btn-action-format:active {
        border-color: rgb(51.0416666667%, 13.1915266106%, 94.6516106443%);
        color: rgb(31.8014705882%, 3.93732493%, 63.9058123249%);
        background-color: #F5EDFF;
        transition: background-color 0.52s ease-out;
    }

@media (max-width: 768px) {
    .export-payment__format .btn-action-format {
        flex: 1 1 auto;
        min-width: 44%;
    }
}

.delete-payment {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.delete-payment__header {
    display: flex;
    justify-content: space-between;
    padding: 1.25rem 1.25rem 0 1.25rem;
}

.delete-payment__title {
    font-size: 20px;
    font-weight: 600;
}

.delete-payment__message {
    font-size: 15px;
    line-height: 160%;
}

.delete-payment__content {
    padding: 0 1.25rem;
}

.delete-payment__actions {
    position: relative;
    display: flex;
    justify-content: flex-end;
    gap: 1rem;
    padding: 1rem 1.25rem 1.25rem 1.25rem;
}

    .delete-payment__actions::after {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 1px;
        background: #DBDFE4;
    }

.payment-status {
    position: relative;
    padding: 0.438rem 0.625rem 0.438rem;
    width: 7.563rem;
    height: 1.938rem;
    justify-content: center;
    align-items: center;
    gap: 4px;
    display: none;
    border: 1px solid transparent;
    border-radius: 1.5rem;
    font-size: 12px;
    font-weight: 500;
}

    .payment-status:before {
        content: "";
        display: block;
        height: 1.125rem;
        width: 1.125rem;
        margin-bottom: 1px;
    }

    .payment-status[data-status="95"], .payment-status[data-status="94"], .payment-status[data-status="91"], .payment-status[data-status="92"], .payment-status[data-status="93"], .payment-status[data-status="96"], .payment-status[data-status="90"], .payment-status[data-status="97"] {
        display: flex;
        max-width: fit-content;
        padding: 7px 10px;
    }

    .payment-status[data-status="95"] {
        background: #D9FCF4;
        color: #0D5C53;
        border-color: #D9FCF4;
        max-width: fit-content;
    }

        .payment-status[data-status="95"].conducted {
            display: flex;
        }

        .payment-status[data-status="95"]:before {
            background: url("../img/newDesign/icon/icon-account-open.svg") no-repeat center;
        }

.debugUrl .payment-status[data-status="95"]:before {
    background: url("/Content/themes/novapay/img/newDesign/icon/icon-account-open.svg") no-repeat center;
}

.payment-status[data-status="91"] {
    background: #F5EDFF;
    color: #690DD3;
}

    .payment-status[data-status="91"].toSign {
        display: flex;
    }

    .payment-status[data-status="91"]:before {
        background: url("../img/newDesign/icon/status-icon-signature.svg") no-repeat center;
    }

.debugUrl .payment-status[data-status="91"]:before {
    background: url("/Content/themes/novapay/img/newDesign/icon/status-icon-signature.svg") no-repeat center;
}

.payment-status[data-status="94"] {
    background: #FFF5DD;
    color: #7F560F;
    border-color: transparent;
}

    .payment-status[data-status="94"].processing {
        display: flex;
    }

    .payment-status[data-status="94"]:before {
        background: url("../img/newDesign/icon/icon-account-clock.svg") no-repeat center;
    }

.debugUrl .payment-status[data-status="94"]:before {
    background: url("/Content/themes/novapay/img/newDesign/icon/icon-account-clock.svg") no-repeat center;
}

.payment-status[data-status="92"] {
    background: #FFF5DD;
    color: #7F560F;
    border-color: transparent;
}

    .payment-status[data-status="92"].toVisa {
        display: flex;
    }

    .payment-status[data-status="92"]:before {
        background: url("../img/newDesign/icon/status-icon-visa.svg") no-repeat center;
    }

.debugUrl .payment-status[data-status="92"]:before {
    background: url("/Content/themes/novapay/img/newDesign/icon/status-icon-visa.svg") no-repeat center;
}

.payment-status[data-status="93"] {
    background: #F5EDFF;
    color: #690DD3;
    border-color: transparent;
}

    .payment-status[data-status="93"].toSend {
        display: flex;
    }

    .payment-status[data-status="93"]:before {
        width: 18px !important;
        height: 18px !important;
        display: inline-block;
        width: 24px;
        height: 24px;
        background-color: currentColor;
        background-image: none;
        mask-image: url("../img/sprite.svg#icon-send-payment-new");
    }

.debugUrl .payment-status[data-status="93"]:before {
    mask-image: url("/Content/themes/novapay/img/sprite.svg#icon-send-payment-new");
}

.payment-status[data-status="93"]:before {
    mask-repeat: no-repeat;
    mask-size: contain;
}

.debugUrl .payment-status[data-status="93"]:before {
    width: 18px !important;
    height: 18px !important;
    display: inline-block;
    width: 24px;
    height: 24px;
    background-color: currentColor;
    background-image: none;
    mask-image: url("../img/sprite.svg#icon-send-payment-new");
}

.debugUrl .debugUrl .payment-status[data-status="93"]:before {
    mask-image: url("/Content/themes/novapay/img/sprite.svg#icon-send-payment-new");
}

.debugUrl .payment-status[data-status="93"]:before {
    mask-repeat: no-repeat;
    mask-size: contain;
}

.payment-status[data-status="96"] {
    background: #FFEBEA;
    color: #C6261A;
    border-color: transparent;
}

    .payment-status[data-status="96"].rejected {
        display: flex;
    }

    .payment-status[data-status="96"]:before {
        background: url("../img/newDesign/icon/icon-account-close.svg") no-repeat center;
    }

.debugUrl .payment-status[data-status="96"]:before {
    background: url("../img/newDesign/icon/icon-account-close.svg") no-repeat center;
}

.payment-status[data-status="90"] {
    background: #DBDFE4;
    color: #767F8A;
    border-color: transparent;
}

    .payment-status[data-status="90"] .status-text.unknown {
        display: flex;
        padding: 0;
    }

    .payment-status[data-status="90"] .status-text:before {
        position: absolute;
        content: "";
        display: inline-block;
        left: 0;
        top: 50%;
        height: 0;
        width: 0;
        transform: translateY(-50%);
    }

.payment-status[data-status="97"] {
    background: #FFEBEA;
    color: #C6261A;
    border-color: transparent;
}

    .payment-status[data-status="97"].deleted {
        display: flex;
    }

    .payment-status[data-status="97"]:before {
        background: url("../img/sprite.svg#icon-remove-payment") no-repeat center;
    }

.debugUrl .payment-status[data-status="97"]:before {
    background: url("../img/sprite.svg#icon-remove-payment") no-repeat center;
}

.payment-status.status-sign-1-2:before, .payment-status[data-status="91"].icon-status-sign.icon-status-sign-1-2:before {
    background: url("../img/newDesign/icon/paymentStatus/icon-status-sign-1-2.svg") no-repeat center;
}

.debugUrl .payment-status.status-sign-1-2:before, .debugUrl .payment-status[data-status="91"].icon-status-sign.icon-status-sign-1-2:before {
    background: url("/Content/themes/novapay/img/newDesign/icon/paymentStatus/icon-status-sign-1-2.svg") no-repeat center;
}

.payment-status.status-sign-2-2:before, .payment-status[data-status="91"].icon-status-sign.icon-status-sign-2-2:before {
    background: url("../img/newDesign/icon/paymentStatus/icon-status-sign-2-2.svg") no-repeat center;
}

.debugUrl .payment-status.status-sign-2-2:before, .debugUrl .payment-status[data-status="91"].icon-status-sign.icon-status-sign-2-2:before {
    background: url("/Content/themes/novapay/img/newDesign/icon/paymentStatus/icon-status-sign-2-2.svg") no-repeat center;
}

.payment-status.status-sign-1-3:before, .payment-status[data-status="91"].icon-status-sign.icon-status-sign-1-3:before {
    background: url("../img/newDesign/icon/paymentStatus/icon-status-sign-1-3.svg") no-repeat center;
}

.debugUrl .payment-status.status-sign-1-3:before, .debugUrl .payment-status[data-status="91"].icon-status-sign.icon-status-sign-1-3:before {
    background: url("/Content/themes/novapay/img/newDesign/icon/paymentStatus/icon-status-sign-1-3.svg") no-repeat center;
}

.payment-status.status-sign-2-3:before, .payment-status[data-status="91"].icon-status-sign.icon-status-sign-2-3:before {
    background: url("../img/newDesign/icon/paymentStatus/icon-status-sign-2-3.svg") no-repeat center;
}

.debugUrl .payment-status.status-sign-2-3:before, .debugUrl .payment-status[data-status="91"].icon-status-sign.icon-status-sign-2-3:before {
    background: url("/Content/themes/novapay/img/newDesign/icon/paymentStatus/icon-status-sign-2-3.svg") no-repeat center;
}

.payment-status.status-sign-3-3:before, .payment-status[data-status="91"].icon-status-sign.icon-status-sign-3-3:before {
    background: url("../img/newDesign/icon/paymentStatus/icon-status-sign-3-3.svg") no-repeat center;
}

.debugUrl .payment-status.status-sign-3-3:before, .debugUrl .payment-status[data-status="91"].icon-status-sign.icon-status-sign-3-3:before {
    background: url("/Content/themes/novapay/img/newDesign/icon/paymentStatus/icon-status-sign-3-3.svg") no-repeat center;
}

.payment-status.status-sign-1-4:before, .payment-status[data-status="91"].icon-status-sign.icon-status-sign-1-4:before {
    background: url("../img/newDesign/icon/status-icon-signature.svg") no-repeat center;
}

.debugUrl .payment-status.status-sign-1-4:before, .debugUrl .payment-status[data-status="91"].icon-status-sign.icon-status-sign-1-4:before {
    background: url("/Content/themes/novapay/img/newDesign/icon/status-icon-signature.svg") no-repeat center;
}

.payment-status.status-sign-2-4:before, .payment-status[data-status="91"].icon-status-sign.icon-status-sign-2-4:before {
    background: url("../img/newDesign/icon/status-icon-signature.svg") no-repeat center;
}

.debugUrl .payment-status.status-sign-2-4:before, .debugUrl .payment-status[data-status="91"].icon-status-sign.icon-status-sign-2-4:before {
    background: url("/Content/themes/novapay/img/newDesign/icon/status-icon-signature.svg") no-repeat center;
}

.payment-status.status-sign-3-4:before, .payment-status[data-status="91"].icon-status-sign.icon-status-sign-3-4:before, .payment-status[data-status="91"].icon-status-sign.icon-status-sign-4-4:before {
    background: url("../img/newDesign/icon/status-icon-signature.svg") no-repeat center;
}

.debugUrl .payment-status.status-sign-3-4:before, .debugUrl .payment-status[data-status="91"].icon-status-sign.icon-status-sign-3-4:before, .debugUrl .payment-status[data-status="91"].icon-status-sign.icon-status-sign-4-4:before {
    background: url("/Content/themes/novapay/img/newDesign/icon/status-icon-signature.svg") no-repeat center;
}

.payment-status.status-sign-4-4:before {
    background: url("../img/newDesign/icon/status-icon-signature.svg") no-repeat center;
}

.debugUrl .payment-status.status-sign-4-4:before {
    background: url("/Content/themes/novapay/img/newDesign/icon/status-icon-signature.svg") no-repeat center;
}

.payment-status.icon-status-sign-1-2:before, .payment-status.icon-status-sign-1-3:before, .payment-status.icon-status-sign-1-4:before, .payment-status.icon-status-sign-2-2:before, .payment-status.icon-status-sign-2-3:before, .payment-status.icon-status-sign-2-4:before, .payment-status.icon-status-sign-3-4:before, .payment-status.icon-status-sign-4-4:before {
    width: 1rem;
    height: 1rem;
    background-size: 100% !important;
}

.payment-status span {
    display: block;
    white-space: nowrap;
}

.payment-status .ico-n {
    margin-right: 4px;
}

.popup-calendar-new .popup-calendar__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 1rem;
}

    .popup-calendar-new .popup-calendar__header .popup-calendar__title {
        margin-bottom: 0;
    }

    .popup-calendar-new .popup-calendar__header::after {
        bottom: 0;
    }

.popup-calendar-new .btn-calendar__clear {
    padding: 7px 16px;
}

.popup-calendar__container .actions-payment-callendar {
    justify-content: space-between !important;
}

.calendar-checkboxes {
    position: relative;
    display: flex;
    padding: 2px;
    border: 1px solid #DBDFE4;
    border-radius: 0.5rem;
}

.checkbox-container {
    position: relative;
    display: flex;
    align-items: center;
    cursor: pointer;
    transition: all 0.3s ease;
}

.checkbox-period {
    position: absolute;
    opacity: 0;
}

    .checkbox-period:checked ~ .checkbox-label {
        color: #690DD3;
        background: #F5EDFF;
    }

.checkbox-label {
    padding: 0.375rem 0.75rem;
    border-radius: 0.5rem;
    font-size: 14px;
    font-weight: 500;
    color: #767F8A;
    background: transparent;
}

.payment-notification,
.payment-print {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.payment-notification__header,
.payment-print__header {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.payment-notification__close,
.payment-print__close {
    position: absolute;
    right: 0;
    top: 0;
}

.payment-notification .btn-close__modal,
.payment-print .btn-close__modal {
    background: #fff;
}

.payment-notification__title,
.payment-print__title {
    display: block;
    width: 100%;
    margin: 0;
    font-size: 1.25rem;
    font-weight: 600;
}

.payment-notification__list,
.payment-print__list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.payment-notification__list-item .item-text,
.payment-print__list-item .item-text {
    padding: 0 0 0 1.85rem;
}

.payment-notification__footer,
.payment-print__footer {
    display: flex;
    gap: 1.5rem;
    justify-content: space-between;
}

@media (max-width: 768px) {
    .payment-notification__footer,
    .payment-print__footer {
        gap: 1rem;
        flex-direction: column;
    }
}

.payment-print__header {
    gap: 1.25rem;
    padding: 1.25rem 1.25rem 0.5rem;
}

.payment-print__close {
    right: 1.25rem;
    top: 1.25rem;
}

.payment-print__body {
    padding: 0 1.25rem;
}

    .payment-print__body .form-check-label .checkbox-view::after, .payment-print__body .form-check-label .checkbox-view::before {
        height: 1.125rem;
        width: 1.125rem;
    }

.payment-print__sub-title {
    font-weight: normal;
}

.payment-print .item-text {
    font-size: 14px;
    color: #32383c;
    font-weight: normal;
}

.payment-print .item-text-light {
    color: #767F8A;
}

.payment-print__footer {
    position: relative;
    justify-content: end;
    padding: 1rem 1.25rem;
}

    .payment-print__footer:before {
        position: absolute;
        content: "";
        top: 0;
        left: 0;
        width: 100%;
        height: 1px;
        background: #EDEFF1;
    }

.qr-scanner__video-container {
    position: relative;
    width: 100%;
    max-width: 500px;
    margin: 0 auto;
    overflow: hidden;
    border-radius: 0.5rem;
}

.qr-scanner__video {
    width: 100%;
    height: auto;
    display: block;
}

.qr-scanner__overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.qr-scanner__frame {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 250px;
    height: 250px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: 12px;
    box-shadow: 0 0 0 4000px rgba(0, 0, 0, 0.5);
}

.qr-scanner__frame-corner {
    position: absolute;
    width: 20px;
    height: 20px;
    border: 3px solid #00ff00;
}

    .qr-scanner__frame-corner.top-left {
        top: -3px;
        left: -3px;
        border-right: none;
        border-bottom: none;
        border-top-left-radius: 0.5rem;
    }

    .qr-scanner__frame-corner.top-right {
        top: -3px;
        right: -3px;
        border-left: none;
        border-bottom: none;
        border-top-right-radius: 0.5rem;
    }

    .qr-scanner__frame-corner.bottom-left {
        bottom: -3px;
        left: -3px;
        border-right: none;
        border-top: none;
        border-bottom-left-radius: 0.5rem;
    }

    .qr-scanner__frame-corner.bottom-right {
        bottom: -3px;
        right: -3px;
        border-left: none;
        border-top: none;
        border-bottom-right-radius: 0.5rem;
    }

.qr-scanner__scan-line {
    position: absolute;
    height: 2px;
    width: 100%;
    background: linear-gradient(90deg, transparent, #00ff00, transparent);
    animation: scan 2s linear infinite;
}

.qr-scanner__status {
    text-align: center;
    margin: 15px 0;
    font-weight: 500;
    color: #333;
}

    .qr-scanner__status .url-warning {
        color: #ff9800;
        font-weight: 600;
    }

    .qr-scanner__status .url-success {
        color: #28a745;
        font-weight: bold;
    }

.qr-scanner__result {
    background: #f8f9fa;
    padding: 15px;
    border-radius: 0.5rem;
    margin: 15px 0;
    border-left: 4px solid #28a745;
}

    .qr-scanner__result a {
        color: #007bff;
        text-decoration: underline;
        word-break: break-all;
    }

        .qr-scanner__result a:hover {
            color: #0056b3;
            text-decoration: none;
        }

@keyframes scan {
    0% {
        top: 0;
        opacity: 0;
    }

    10% {
        opacity: 1;
    }

    90% {
        opacity: 1;
    }

    100% {
        top: 100%;
        opacity: 0;
    }
}

.payment-data {
    background: #f8f9fa;
    border-radius: 0.5rem;
    padding: 15px;
    margin: 10px 0;
}

    .payment-data h4 {
        margin: 0 0 15px 0;
        color: #2c3e50;
        font-size: 1.2em;
    }

.payment-details {
    display: grid;
    gap: 8px;
}

.payment-field {
    padding: 0.5rem 0.75rem;
    background: white;
    border-radius: 6px;
    border-left: 4px solid #3498db;
}

    .payment-field strong {
        color: #2c3e50;
        min-width: 100px;
        display: inline-block;
    }

.payment-raw {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px dashed #ddd;
    color: #7f8c8d;
    font-size: 0.9em;
}

.vue-tooltip {
    white-space: nowrap;
}

.p-tooltip {
    max-width: none !important;
    white-space: normal !important;
    transition: opacity 0.2s !important;
    --p-tooltip-background: #1e1e1e;
    --p-tooltip-color: #ffffff;
    opacity: 1 !important;
}

    .p-tooltip .p-tooltip-text {
        white-space: pre-line !important;
        word-wrap: break-word !important;
        width: auto !important;
        padding: 0.5rem 0.75rem !important;
        line-height: 1.4 !important;
        white-space: pre;
        font-size: 12px;
        border-radius: 0.5rem;
    }

        .p-tooltip .p-tooltip-text br {
            display: block !important;
            content: "" !important;
            margin: 0.25rem 0 !important;
        }

.custom-column-header {
    position: relative;
    display: flex;
    align-items: center;
}

.custom-column-header__dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 1000;
    background: #fff;
    border-radius: 0.25rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    min-width: 200px;
}

.custom-column-header__dropdown-global {
    background: #fff;
    border-radius: 0.5rem;
    border: 1px solid #DBDFE4;
    overflow: hidden;
}

.custom-column-header__dropdown-content {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.custom-column-header__option {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.75rem 0.5rem;
    background: none;
    border: none;
    cursor: pointer;
    font-size: 12px;
    color: #767F8A;
    transition: all 0.32s ease-in;
}

    .custom-column-header__option:hover, .custom-column-header__option.active-sort {
        background-color: #f4f6f7;
        color: #464B53;
    }

        .custom-column-header__option.active-sort .custom-column-header__option-icon .icon-double-arrow {
            transform: rotate(136deg);
        }

    .custom-column-header__option:not(:last-of-type):before {
        content: "";
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 1px;
        background: #DBDFE4;
    }

.custom-column-header__option-icon {
    width: 1.25rem;
    display: inline-flex;
    justify-content: center;
}

    .custom-column-header__option-icon .icon-double-arrow {
        transition: 0.3s ease-in-out;
        transform: rotate(-45deg);
    }

    .custom-column-header__option-icon .icon-search {
        height: 1rem;
        width: 1rem;
    }

.withdrawal-money__loadData {
    margin-top: 1.5rem;
    border-radius: 0.5rem;
    height: 12.5rem;
    width: 100%;
}

.withdrawal-money {
    padding: 0 1.25rem;
}

.withdrawal-money__title, .withdrawal-money__subtitle, .withdrawal-money__description {
    font-family: "Fixel Text", "Fixel Display", "Helvetica", "Arial", sans-serif;
    font-style: normal;
}

.withdrawal-money__title {
    color: #32383c;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.125rem;
}

.withdrawal-money__subtitle {
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 12px;
    font-weight: 400;
    line-height: 1rem;
}

.withdrawal-money__description {
    overflow: hidden;
    color: #464B53;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.125rem;
}

.withdrawal-money__dropdown-wrap {
    position: relative;
}

.withdrawal-money__dropdown-enterprise, .withdrawal-money__dropdown-contract {
    max-width: 17.313rem;
    width: 100%;
}

@media (max-width: 1623px) {
    .withdrawal-money__dropdown-enterprise, .withdrawal-money__dropdown-contract {
        max-width: 21.75rem;
    }
}

.withdrawal-money__dropdown-account {
    max-width: 20.625rem;
    min-width: calc(55% - 20px);
}

@media (max-width: 1623px) {
    .withdrawal-money__dropdown-account {
        max-width: 21.75rem;
        width: 100%;
        min-width: inherit;
    }
}

.withdrawal-money__dropdown-subtitle {
    font-size: 0.75rem !important;
    font-weight: 500 !important;
}

.withdrawal-money__enterprise-account-block {
    display: flex;
    align-items: end;
    gap: 1.25rem;
    width: 100%;
}

@media (max-width: 1623px) {
    .withdrawal-money__enterprise-account-block {
        width: 100%;
    }
}

@media (max-width: 768px) {
    .withdrawal-money__enterprise-account-block {
        flex-direction: column;
    }
}

.withdrawal-money__enterprise-row {
    margin-top: 1.25rem;
    padding-bottom: 1.25rem;
    display: flex;
    align-items: center;
    gap: 1.25rem;
}

@media (max-width: 1623px) {
    .withdrawal-money__enterprise-row {
        flex-direction: column;
        align-items: self-start;
    }
}

.withdrawal-money__enterprise-balance {
    min-width: 45%;
    display: flex;
    align-items: center;
    margin-top: 0.5rem;
    height: 2.5rem;
    padding: 0.375rem 0.75rem;
    border-radius: 0.5rem;
    background: #D9FCF4;
}

    .withdrawal-money__enterprise-balance p {
        color: #0D5C53;
        font-size: 15px;
        font-weight: 400;
        line-height: 1.5rem;
    }

        .withdrawal-money__enterprise-balance p span {
            font-weight: 600;
        }

@media (max-width: 1623px) {
    .withdrawal-money__enterprise-balance {
        width: 50%;
    }
}

@media (max-width: 768px) {
    .withdrawal-money__enterprise-balance {
        width: 100%;
    }
}

.withdrawal-money__card[disabled=true] {
    opacity: 0.5;
}

.withdrawal-money__limit-warning .ico-n {
    color: #EB4235;
}

.withdrawal-money__card {
    padding: 0.75rem;
    height: 3rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    border-radius: 0.5rem;
    border: 1px solid #DBDFE4;
    background: #FFF;
    max-width: 17.313rem;
    width: 100%;
}

@media (max-width: 1623px) {
    .withdrawal-money__card {
        max-width: 21.75rem;
    }
}

.withdrawal-money__card-icon {
    width: 2.25rem;
    height: 1.5rem;
}

.withdrawal-money__payee-left, .withdrawal-money__payee-right {
    width: 50%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: start;
    gap: 1.25rem;
}

@media (max-width: 768px) {
    .withdrawal-money__payee-left, .withdrawal-money__payee-right {
        position: relative;
        width: 100%;
    }
}

@media (max-width: 768px) {
    .withdrawal-money__payee-left:after {
        position: absolute;
        content: "";
        bottom: -11px;
        width: 100%;
        height: 1px;
        background: #DBDFE4;
    }
}

.withdrawal-money__payee-description {
    overflow: hidden;
    color: #464B53;
    font-family: "Fixel Text", "Fixel Display", "Helvetica", "Arial", sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.125rem;
}

.withdrawal-money__wrap-top {
    border-radius: 0.5rem;
    padding: 1rem;
    width: 100%;
    background: #f4f6f7;
    display: flex;
    gap: 1.25rem;
    align-items: center;
    justify-content: space-between;
}

@media (max-width: 768px) {
    .withdrawal-money__wrap-top {
        flex-direction: column;
        align-items: start;
    }
}

.withdrawal-money__wrap-payee {
    margin-top: 1.25rem;
    border-radius: 0.5rem;
    border: 1px solid #DBDFE4;
}

.withdrawal-money__wrap-payee-info {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.withdrawal-money__wrap-footer {
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.withdrawal-money__amount {
    margin-top: 1.5rem;
}

.withdrawal-money__amount-important {
    color: #EB4235;
}

.withdrawal-money__amount .amount-error {
    padding-top: 3px;
    display: block;
    color: #EB4235;
    font-family: "Fixel Text", "Fixel Display", "Helvetica", "Arial", sans-serif;
    font-size: 0.75rem;
    font-weight: 400;
    line-height: 1rem;
}

.withdrawal-money__sum {
    max-width: 17.313rem;
    width: 100%;
}

    .withdrawal-money__sum .p-inputtext {
        border: none;
    }

        .withdrawal-money__sum .p-inputtext::placeholder {
            color: #767F8A;
            font-family: "Fixel Text", "Fixel Display", "Helvetica", "Arial", sans-serif;
            font-size: 15px;
            font-weight: 400;
            line-height: 1.5rem;
        }

@media (max-width: 1623px) {
    .withdrawal-money__sum {
        max-width: 21.75rem;
    }
}

.withdrawal-money__action-btn {
    width: 9.125rem;
}

.withdrawal-money__icon-close {
    display: none;
}

@media (max-width: 768px) {
    .withdrawal-money__icon-close {
        display: block;
    }
}

.withdrawal-money__error-block {
    margin-top: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.withdrawal-money__error-text {
    font-size: 13px;
    color: #EB4235;
    font-weight: 400;
}

@media (max-width: 768px) {
    #withdrawalActionDropdownWrapper .p-component {
        padding: 0.5rem 0.625rem;
    }
}

.drawer-footer__right-custom.sign-btn.disabled {
    pointer-events: none !important;
    opacity: 0.5 !important;
}

.drawer-body-container:has(.drawer-loader-overlay) {
    position: static !important;
}

.pay-slip {
    padding: 0;
}

.pay-slip__steps {
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
    background: #f4f6f7;
    border-bottom: 1px solid #DBDFE4;
}

.pay-slip__steps-title {
    font-size: 16px;
    font-weight: 500;
    line-height: 1.25rem;
    color: #767F8A;
    border-bottom: #DBDFE4;
}

.pay-slip-header {
    width: 100%;
}

.pay-slip-header__top {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: 93%;
}

.pay-slip-header__title {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    color: #464B53;
    font-size: 24px;
    font-style: normal;
    font-weight: 600;
    line-height: 1.75rem;
}

@media (max-width: 768px) {
    .pay-slip-header__title {
        flex-direction: column;
        width: 100%;
        max-width: 70%;
        gap: 0;
        font-size: 1.125rem;
    }

        .pay-slip-header__title p {
            width: 100%;
            display: inline-block;
        }
}

.pay-slip-header__editor {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.pay-slip-header__input-wrapper {
    position: relative;
    height: 2.25rem;
}

.pay-slip-header__value {
    word-break: break-all;
}

@media (max-width: 768px) {
    .pay-slip-header__value {
        display: block;
        width: 100%;
    }
}

.pay-slip-header__input {
    height: 2.25rem;
    border: 1px solid #690DD3 !important;
    padding-right: 1.75rem !important;
}

.pay-slip-header__edit-btn {
    padding: 0.25rem !important;
    background: transparent !important;
    border: none;
}

    .pay-slip-header__edit-btn:hover {
        background: #f4f6f7 !important;
    }

        .pay-slip-header__edit-btn:hover .ico-n {
            background: url("../img/newDesign/icon/icon-account-edit-hover.svg") no-repeat center;
        }

.debugUrl .pay-slip-header__edit-btn:hover .ico-n {
    background: url("/Content/themes/novapay/img/newDesign/icon/icon-account-edit-hover.svg") no-repeat center;
}

.pay-slip-header__btn-clear {
    width: 2rem;
    height: 2rem;
    padding: 0 !important;
    border: none;
    position: absolute;
    right: 0;
    top: 50%;
    background: none;
    padding: 3px;
    transform: translateY(-50%);
}

.pay-slip-header .btn-save-check {
    width: 2rem;
    height: 2rem;
    padding: 0;
    background: none;
    border-radius: 0.25rem;
    border: none;
    cursor: pointer;
}

.pay-slip-header .icon-check {
    width: 100%;
    height: 100%;
    background: url("../img/newDesign/icon/ico-checkbox.svg") no-repeat center/100%;
    opacity: 1;
    transition: opacity 0.42s ease;
}

.debugUrl .pay-slip-header .icon-check {
    background: url("/Content/themes/novapay/img/newDesign/icon/ico-checkbox.svg") no-repeat center/100%;
}

.pay-slip-header__data {
    margin-top: 0.75rem;
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.pay-slip-header__label {
    color: #767F8A;
    font-family: "Fixel Display";
    font-size: 14px;
    font-weight: 400;
    line-height: 1.125rem;
}

.pay-slip-header__time {
    color: #32383c;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.125rem;
}

.pay-slip .datatable-title-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.25rem 0 1rem;
}

    .pay-slip .datatable-title-row .payslip-employees-header__title {
        padding: 0;
    }

    .pay-slip .datatable-title-row .btn.btn-Collapse {
        display: flex;
        gap: 0.5rem;
        padding-top: 9px;
        padding-bottom: 9px;
    }

.pay-slip__dropdown-wrap {
    position: relative;
}

.pay-slip__dropdown-enterprise, .pay-slip__dropdown-contract, .pay-slip__dropdown-accrual {
    flex: 1;
    min-width: 277px;
    width: fit-content;
}

@media (max-width: 1623px) {
    .pay-slip__dropdown-enterprise, .pay-slip__dropdown-contract, .pay-slip__dropdown-accrual {
        max-width: 330px;
    }
}

@media (max-width: 768px) {
    .pay-slip__dropdown-enterprise, .pay-slip__dropdown-contract, .pay-slip__dropdown-accrual {
        width: 100%;
        max-width: 100%;
    }
}

.pay-slip__dropdown-account {
    max-width: 330px !important;
    width: 50%;
}

.pay-slip__dropdown-subtitle {
    font-size: 0.75rem !important;
    font-style: normal;
    font-weight: 500 !important;
}

.pay-slip__steps, .pay-slip__enterprise-row, .pay-slip__check-block, .pay-slip__purpose-block, .pay-slip__verdict-block,
.pay-slip .vue_paySlipGrid, .pay-slip__accrual-row {
    padding-right: 1.25rem;
    padding-left: 1.25rem;
}

@media (max-width: 768px) {
    .pay-slip__steps, .pay-slip__enterprise-row, .pay-slip__check-block, .pay-slip__purpose-block, .pay-slip__verdict-block,
    .pay-slip .vue_paySlipGrid, .pay-slip__accrual-row {
        padding-right: 0.75rem;
        padding-left: 0.75rem;
    }
}

.pay-slip__enterprise-account-block {
    display: flex;
    align-items: end;
    gap: 20px;
    flex-basis: 100%;
}

@media (max-width: 1623px) {
    .pay-slip__enterprise-account-block {
        width: 100%;
    }
}

.pay-slip__enterprise-block {
    display: flex;
    align-items: center;
    gap: 20px;
}

@media (max-width: 1623px) {
    .pay-slip__enterprise-block {
        flex-direction: column;
        align-items: self-start;
    }
}

.pay-slip__enterprise-row {
    margin-top: 20px;
    padding-bottom: 30px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 20px;
    border-bottom: solid 1px #EDEFF1;
}

.pay-slip__enterprise-contract {
    position: absolute;
    bottom: -0.5rem;
    color: #767F8A;
    font-size: 12px;
    font-weight: 400;
    line-height: 1rem;
}

.pay-slip__enterprise-balance {
    width: 50%;
    display: flex;
    align-items: center;
    margin-top: 0.5rem;
    height: 2.5rem;
    padding: 0.375rem 0.75rem;
    border-radius: 0.5rem;
    background: #D9FCF4;
}

    .pay-slip__enterprise-balance p {
        color: #0D5C53;
        font-size: 15px;
        font-weight: 400;
        line-height: 1.5rem;
    }

        .pay-slip__enterprise-balance p span {
            font-weight: 600;
        }

@media (max-width: 1623px) {
    .pay-slip__enterprise-balance {
        width: 50%;
    }
}

.pay-slip__accrual-row {
    margin-top: 1.25rem;
    padding-bottom: 1.875rem;
    display: flex;
    align-items: end;
    gap: 1.25rem;
    border-bottom: solid 1px #EDEFF1;
}

@media (max-width: 768px) {
    .pay-slip__accrual-row {
        flex-direction: column;
        align-items: center;
        gap: 0.75rem;
    }
}

.pay-slip__accrual-checkbox {
    height: 2.5rem;
    display: flex;
}

.pay-slip__accrual-checkbox-label {
    color: #32383c;
    font-size: 15px;
    font-style: normal;
    line-height: 1.5rem;
    margin-left: 0.5rem;
}

@media (max-width: 768px) {
    .pay-slip__accrual-checkbox {
        justify-content: flex-start;
        width: 100%;
    }
}

.pay-slip-calendar {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-top: 0.5rem;
}

.pay-slip-calendar__data-wrap {
    width: 278px;
    display: flex;
    flex-direction: column;
}

@media (max-width: 1623px) {
    .pay-slip-calendar__data-wrap {
        width: 236px;
    }
}

@media (max-width: 768px) {
    .pay-slip-calendar__data-wrap {
        width: 100%;
    }
}

.pay-slip-calendar__data-info {
    width: 100%;
    height: 40px;
    padding: 0.5rem 0.75rem;
    display: flex;
    align-items: center;
    border-radius: 0.5rem;
    border: 1px solid #DBDFE4;
    transition: all 0.32s ease-in-out;
    cursor: pointer;
}

    .pay-slip-calendar__data-info .icon-payment-calendar-data {
        background-color: #767F8A !important;
    }

    .pay-slip-calendar__data-info:hover {
        border-color: #690DD3;
        background: #F5EDFF;
    }

        .pay-slip-calendar__data-info:hover .icon-payment-calendar-data {
            background-color: #767F8A !important;
        }

.pay-slip-calendar__btn-period {
    border: none;
    background: transparent;
    font-size: 1rem;
    line-height: 1.25rem;
    color: #32383c;
    cursor: pointer;
    padding-left: 0.5rem;
}

.pay-slip__dialog-check, .pay-slip__dialog-check--duplicates {
    max-width: 480px !important;
}

    .pay-slip__dialog-check .p-uni-dialog__actions button, .pay-slip__dialog-check--duplicates .p-uni-dialog__actions button {
        width: 50%;
    }

.pay-slip .p-checkbox.p-checkbox-checked .p-checkbox-box {
    border-radius: 4px;
    border: 1px solid #690DD3 !important;
    background: #690DD3 !important;
}

.pay-slip .p-checkbox-label {
    display: flex;
    align-items: center;
}

.pay-slip .p-checkbox-box .p-checkbox-icon {
    stroke: white;
    stroke-width: 1.1px;
    stroke-linejoin: round;
    padding: 1px;
}

.pay-slip .vue__add-dropdown {
    position: relative;
}

.pay-slip .vue__add-dropdown__menu {
    position: absolute;
    right: 0;
    top: calc(100% + 4px);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 13.313rem;
    max-height: 20rem;
    padding: 0.25rem;
    background: #fff;
    border-radius: 0.25rem;
    border: 1px solid #DBDFE4;
    box-shadow: 0 1.5rem 2.75rem 0 rgba(98, 98, 100, 0.3);
    overflow: hidden;
    z-index: 1000;
}

    .pay-slip .vue__add-dropdown__menu .btn-add-dropdown {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 0.5rem;
        white-space: nowrap;
        min-width: 9.125rem;
        padding: 0.5rem 1rem;
        border-radius: 0.25rem;
        background-color: #fff;
        border: none;
        color: #767F8A;
        cursor: pointer;
        font-weight: 500;
        text-align: left;
        font-size: 14px;
    }

@media (max-width: 992px) {
    .pay-slip .vue__add-dropdown__menu .btn-add-dropdown {
        flex: 1 1 auto;
    }
}

.pay-slip .vue__add-dropdown__menu .btn-add-dropdown:hover {
    background-color: #f4f6f7;
    transition: background-color 0.42s ease-out;
    color: #32383c;
}

.pay-slip .p-datatable-row-editor-save,
.pay-slip .p-datatable-row-editor-cancel {
    display: none !important;
}

.pay-slip__check-block {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 1.25rem;
    padding-bottom: 1.25rem;
}

    .pay-slip__check-block .btn.btn-check-action {
        padding: 0.625rem 1.125rem;
        margin-left: auto;
    }

    .pay-slip__check-block .btn.btn-expand {
        display: flex;
        gap: 0.5rem;
        padding-top: 9px;
        padding-bottom: 9px;
    }

    .pay-slip__check-block.has-editing .btn-check-action {
        transition: all 0.32s ease-in;
    }

.pay-slip__purpose-block {
    position: relative;
    margin-bottom: 2rem;
}

    .pay-slip__purpose-block.active-restore-autocomplete {
        margin-bottom: 0;
    }

.pay-slip__purpose-label {
    display: block;
    padding-bottom: 0.5rem;
}

.pay-slip__purpose-label-text {
    font-size: 12px;
    line-height: 1rem;
    font-weight: 500;
    color: #767F8A;
}

.pay-slip__textarea {
    position: relative;
}

    .pay-slip__textarea .textarea-purpose {
        width: 100%;
        padding: 0.5rem 0.75rem;
        border-radius: 0.5rem;
        border: 1px solid #DBDFE4;
        font-size: 15px;
        line-height: 1.5rem;
        color: #32383c;
    }

        .pay-slip__textarea .textarea-purpose:enabled:focus {
            border-color: #690DD3;
        }

        .pay-slip__textarea .textarea-purpose::placeholder {
            color: #767F8A;
            font-size: 15px;
            line-height: 1.5rem;
        }

    .pay-slip__textarea .textarea-count {
        position: absolute;
        bottom: 0.75rem;
        right: 0.875rem;
        font-size: 12px;
        line-height: 1rem;
        color: #767F8A;
    }

.pay-slip__restore-autocomplete-block {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 0;
    margin-bottom: 2rem;
}

    .pay-slip__restore-autocomplete-block .btn.btn-restore-autocomplete {
        display: flex;
        gap: 0.5rem;
        font-size: 14px;
        font-style: normal;
        line-height: 1.125rem;
        color: #690DD3;
        border: none;
    }

        .pay-slip__restore-autocomplete-block .btn.btn-restore-autocomplete .ico-n {
            background-color: #690DD3;
        }

        .pay-slip__restore-autocomplete-block .btn.btn-restore-autocomplete:hover {
            background: transparent;
            border: none;
        }

.pay-slip__taxes-block {
    padding: 2rem 1.25rem;
    margin-top: 0;
    color: #32383c;
}

.pay-slip__taxes-impotent {
    position: relative;
    margin-top: 1.5rem;
    display: flex;
    padding: 0.75rem;
    padding-left: 1.125rem;
    justify-content: center;
    align-items: center;
    gap: 0.75rem;
    border-radius: 0.25rem;
    border: 1px solid #FFE098;
    background: #FFF1DB;
}

    .pay-slip__taxes-impotent:after {
        content: "";
        position: absolute;
        height: 100%;
        width: 6px;
        left: 0;
        border-radius: 0.25rem 0 0 0.25rem;
        background: #EB9D35;
    }

    .pay-slip__taxes-impotent i {
        min-width: 1.25rem;
        color: #7F560F;
    }

.pay-slip__taxes-impotent-text {
    color: #7F560F;
    font-family: "Fixel Display";
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1.125rem;
}

.pay-slip__taxes-titl {
    font-size: 1rem;
    font-weight: 500;
    line-height: 1.25rem;
}

.pay-slip__taxes-checkbox {
    padding: 1.5rem 0 0;
}

.pay-slip__taxes-checkbox-block {
    display: flex;
    margin-top: 1.625rem;
}

    .pay-slip__taxes-checkbox-block .toggle-activator {
        cursor: pointer;
        display: flex;
        min-width: 3rem;
        height: 1.75rem;
        border-radius: 1.5rem;
        padding: 0.25rem;
        transition: background 0.3s ease;
        background-color: #bababa;
        position: relative;
    }

        .pay-slip__taxes-checkbox-block .toggle-activator .visually-hidden {
            clip: rect(0 0 0 0);
            clip-path: inset(50%);
            height: 0.0625rem;
            overflow: hidden;
            position: absolute;
            white-space: nowrap;
            width: 0.0625rem;
        }

        .pay-slip__taxes-checkbox-block .toggle-activator:before {
            content: "";
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            min-width: 1.5rem;
            height: 1.5rem;
            border-radius: 50%;
            background-color: #fff;
            transition: opacity 0.3s ease, transform 0.3s ease;
        }

        .pay-slip__taxes-checkbox-block .toggle-activator:before {
            left: 0.1875rem;
        }

        .pay-slip__taxes-checkbox-block .toggle-activator:has(input[type=checkbox]:checked) {
            background-color: #690DD3;
        }

            .pay-slip__taxes-checkbox-block .toggle-activator:has(input[type=checkbox]:checked):before {
                background-color: #fff;
                transform: translate(75%, -50%);
            }

.pay-slip__taxes-checkbox-label {
    padding-left: 0.75rem;
    font-size: 15px;
    font-weight: 400;
    line-height: 1.5rem;
}

.pay-slip__taxes-body {
    display: flex;
    flex-direction: column;
    margin-top: 0.75rem;
}

.pay-slip__taxes-bnt-set {
    width: 100%;
    display: flex;
    justify-content: end;
    margin: 0.25rem 0;
}

.pay-slip__taxes-bnt-set-data {
    cursor: pointer;
    color: #690DD3;
    font-family: "Fixel Display";
    font-size: 14px;
    font-style: normal;
    font-weight: 600;
    line-height: 1.125rem;
    display: flex;
    gap: 0.5rem;
    max-width: 295px;
    padding: 0.5rem 0.75rem;
    justify-content: center;
    align-items: center;
    border: none;
    background: none;
}

.pay-slip__tax-block {
    display: flex;
    flex-direction: column;
    padding: 1rem;
    border-radius: 0.5rem;
    border: 1px solid #DBDFE4;
}

    .pay-slip__tax-block:not(:last-of-type) {
        margin-bottom: 1rem;
    }

    .pay-slip__tax-block .p-inputtext:enabled:focus, .pay-slip__tax-block .p-inputtext:enabled:focus-visible, .pay-slip__tax-block .p-inputtext:not(:disabled):focus, .pay-slip__tax-block .p-inputtext:not(:disabled):focus-visible {
        border-color: #690DD3;
    }

.pay-slip__tax-block-title {
    display: block;
    width: 100%;
    margin-bottom: 1.5rem;
    font-size: 1rem;
    font-weight: 500;
    line-height: 1.25rem;
}

.pay-slip__tax-block-row, .pay-slip__tax-recipient, .pay-slip__tax-recipient-header, .pay-slip__tax-recipient-row, .pay-slip__tax-block-field, .pay-slip__tax-hint {
    display: flex;
}

.pay-slip__tax-block-row, .pay-slip__tax-recipient-row {
    gap: 1.25rem;
}

.pay-slip__tax-recipient, .pay-slip__tax-block-field {
    flex-direction: column;
}

@media (max-width: 768px) {
    .pay-slip__tax-block-row, .pay-slip__tax-recipient-row {
        flex-direction: column;
        width: 100%;
        flex: auto;
    }
}

.pay-slip__tax-block-purpose .p-inputtext {
    color: #464B53;
}

    .pay-slip__tax-block-purpose .p-inputtext:disabled {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        background: #f4f6f7;
    }

.pay-slip__tax-block-purpose-code {
    position: relative;
}

    .pay-slip__tax-block-purpose-code .p-inputtext:disabled {
        padding-right: 1.25rem;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        background: #f4f6f7;
    }

    .pay-slip__tax-block-purpose-code .icon-small-up {
        position: absolute;
        bottom: 0.5rem;
        right: 0.25rem;
        transform: rotate(180deg);
    }

.pay-slip__tax-recipient-header, .pay-slip__tax-block-row {
    justify-content: space-between;
    align-items: center;
}

.pay-slip__tax-hint {
    padding-top: 0.5rem;
    align-items: center;
    color: #690DD3;
}

    .pay-slip__tax-hint .icon-info-new {
        margin-right: 0.5rem;
    }

.pay-slip__tax-hint--stale {
    position: relative;
    height: 2.5rem;
    padding: 0 0 0 1.125rem;
    margin-top: 1rem;
    color: #7F560F;
    border: 1px solid #E3AE30;
    background: #FFF1DB;
    border-radius: 0.25rem;
}

    .pay-slip__tax-hint--stale:before {
        content: "";
        position: absolute;
        display: block;
        left: 0;
        top: 0;
        height: 100%;
        width: 0.375rem;
        border-top-left-radius: 0.25rem;
        border-bottom-left-radius: 0.25rem;
        background: #EB9D35;
    }

.pay-slip__tax-recipient-header {
    padding: 1rem 0;
}

.pay-slip__tax-recipient-field, .pay-slip__tax-block-field {
    flex: 1 1 0;
    min-width: 0;
}

    .pay-slip__tax-recipient-field .p-inputtext, .pay-slip__tax-block-field .p-inputtext {
        width: 100%;
    }

.pay-slip__tax-recipient-field--wide, .pay-slip__tax-block-field--wide {
    flex: 2 1 0;
}

@media (max-width: 768px) {
    .pay-slip__tax-recipient-field--wide, .pay-slip__tax-block-field--wide {
        flex: auto;
        width: 100%;
        max-width: 100%;
    }
}

.pay-slip__tax-recipient-field--narrow, .pay-slip__tax-block-field--narrow {
    flex: 1 1 20.375rem;
    max-width: 20.375rem;
    width: 100%;
}

@media (max-width: 768px) {
    .pay-slip__tax-recipient-field--narrow, .pay-slip__tax-block-field--narrow {
        flex: auto;
    }
}

@media (max-width: 1623px) {
    .pay-slip__tax-recipient-field-small, .pay-slip__tax-block-field-small {
        max-width: 240px;
    }
}

@media (max-width: 768px) {
    .pay-slip__tax-recipient-field-small, .pay-slip__tax-block-field-small {
        width: 100%;
        max-width: 100%;
    }
}

.pay-slip__tax-block-field--edrpou {
    max-width: 9.375rem;
}

@media (max-width: 1623px) {
    .pay-slip__tax-block-field--edrpou {
        max-width: 7.5rem;
    }
}

@media (max-width: 768px) {
    .pay-slip__tax-block-field--edrpou {
        max-width: 100%;
    }
}

.pay-slip__tax-block-field--edrpou .p-inputtext {
    width: 100%;
}

.pay-slip__tax-block-field--stale .p-inputtext {
    border-color: #E3AE30 !important;
}

.pay-slip__tax-bank-name, .pay-slip__tax-label {
    display: block;
    color: #767F8A;
    font-size: 12px;
    font-weight: 500;
    line-height: 1rem;
}

.pay-slip__tax-label {
    margin-bottom: 0.5rem;
}

.pay-slip__tax-bank-name {
    margin-top: 0.5rem;
    margin-bottom: 0;
}

.pay-slip__verdict-block {
    padding-top: 1.25rem;
    padding-bottom: 1.25rem;
    margin-top: 0;
    background: #f4f6f7;
}

@media (max-width: 768px) {
    .pay-slip__verdict-block {
        margin-top: 1rem;
    }
}

.pay-slip__verdict-title {
    padding-bottom: 1rem;
    font-size: 16px;
    line-height: 1.25rem;
}

.pay-slip .verdict-title,
.pay-slip .verdict-total-lable,
.pay-slip .verdict-total-count {
    font-weight: 500;
    color: #464B53;
}

.pay-slip__verdict-total {
    margin-bottom: 1.5rem;
    border-radius: 0.5rem;
    background: #fff;
}

.pay-slip__verdict-total-list {
    display: flex;
    flex-direction: column;
    border: 1px solid #DBDFE4;
    border-radius: 0.5rem;
}

.pay-slip__verdict-total-item {
    display: flex;
    justify-content: space-between;
    padding: 1rem;
}

    .pay-slip__verdict-total-item:not(:last-of-type) {
        border-bottom: 1px solid #DBDFE4;
    }

    .pay-slip__verdict-total-item.master-total .verdict-total-lable {
        font-weight: 600;
    }

    .pay-slip__verdict-total-item.master-total .verdict-total-count {
        color: #690DD3;
    }

.pay-slip__verdict-total-item--accordion {
    flex-direction: column;
}

    .pay-slip__verdict-total-item--accordion .pay-slip__verdict-total-item-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
    }

.pay-slip__verdict-total-item-right {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.pay-slip__verdict-accordion-btn {
    border: none;
    background: transparent;
    transform: rotate(0deg);
    transition: transform 0.32s ease-out;
}

    .pay-slip__verdict-accordion-btn:hover {
        background: transparent;
    }

.pay-slip__verdict-total-item--open .pay-slip__verdict-total-item-header {
    padding-bottom: 0.75rem;
}

.pay-slip__verdict-total-item--open .pay-slip__verdict-accordion-btn {
    transform: rotate(180deg);
}

.pay-slip__verdict-total-item-body {
    position: relative;
    padding: 1rem 0 0.75rem;
}

    .pay-slip__verdict-total-item-body:before {
        content: "";
        position: absolute;
        display: block;
        left: 0;
        top: 0;
        height: 1px;
        width: 100%;
        background: #EDEFF1;
    }

.pay-slip__verdict-total-item-purpose-label {
    padding-bottom: 0.25rem;
    font-size: 12px;
    font-weight: 400;
    line-height: 1rem;
    color: #767F8A;
}

.pay-slip__verdict-total-item-purpose-text {
    font-size: 14px;
    font-weight: 400;
    line-height: 1.125rem;
    color: #464B53;
}

.pay-slip__purpose-payment textarea {
    background: #fff;
}

.pay-slip__account-movements {
    margin-top: 1.5rem;
    display: flex;
    align-items: center;
    width: 100%;
    justify-content: space-between;
    padding: 0.75rem 1rem;
    border: 1px solid #DBDFE4;
    border-radius: 0.5rem;
}

@media (max-width: 768px) {
    .pay-slip__account-movements {
        flex-direction: column;
        gap: 0.75rem;
    }
}

.pay-slip__account-movements-lable {
    font-weight: 500;
    color: #767F8A;
}

.pay-slip__account-movements-account {
    font-size: 15px;
    line-height: 1.5rem;
    color: #32383c;
}

.pay-slip__account-movements-arrow .ico-n {
    background-color: #767F8A;
}

@media (max-width: 768px) {
    .pay-slip__account-movements-arrow .ico-n {
        transform: rotate(90deg);
    }
}

.pay-slip__account-movements-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.pay-slip .col-Amount[data-p-cell-editing=false] .extra-block {
    display: none;
}

.pay-slip .error-warning-message {
    position: absolute;
    display: flex;
    left: 0;
    bottom: -10%;
    flex-direction: row;
    align-items: center;
    padding-top: 0.25rem;
    padding-left: 0.5rem;
    white-space: nowrap;
    width: 100%;
    overflow: hidden;
}

    .pay-slip .error-warning-message .invalid-feedback,
    .pay-slip .error-warning-message .is-invalid {
        padding-top: 0;
    }

.pay-slip .edit-wrapper__field {
    position: relative;
    padding: 0.75rem 0;
}

    .pay-slip .edit-wrapper__field .extra-block {
        height: auto;
        min-height: fit-content;
        gap: 0.75rem;
        background: transparent;
    }

.pay-slip .edit-wrapper .iban-input-wrapper {
    position: relative;
}

.pay-slip .edit-wrapper .btn-search-clear {
    position: absolute;
    width: 1.125rem;
    height: 1.125rem;
    top: 50%;
    right: 0.95rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    padding: 0;
    border: none;
    background: transparent;
    cursor: pointer;
    transform: translateY(-50%);
}

    .pay-slip .edit-wrapper .btn-search-clear .icon-clear-input {
        width: 100%;
        height: 100%;
        background-color: #A8ADB4;
    }

.pay-slip .edit-wrapper:has(.error-message, .invalid-feedback) .p-inputtext {
    border-color: #EB4235 !important;
}

.pay-slip .edit-wrapper:has(.error-message, .invalid-feedback) .doc-type-select__btn {
    border-top-color: #EB4235 !important;
    border-right-color: #EB4235 !important;
    border-bottom-color: #EB4235 !important;
}

.pay-slip .col-StateCode[data-p-cell-editing=true] {
    vertical-align: baseline;
}

    .pay-slip .col-StateCode[data-p-cell-editing=true] .extra-block {
        position: static;
        display: flex;
        align-items: center;
        padding: 0;
    }

        .pay-slip .col-StateCode[data-p-cell-editing=true] .extra-block .doc-type {
            display: flex;
            align-items: baseline;
            gap: 0.5rem;
            flex-direction: column;
            width: 100%;
        }

        .pay-slip .col-StateCode[data-p-cell-editing=true] .extra-block .doc-type-select {
            width: 100%;
            position: static;
        }

        .pay-slip .col-StateCode[data-p-cell-editing=true] .extra-block .doc-type-select__btn {
            display: flex;
            justify-content: space-between;
            align-items: center;
            width: auto;
            padding: 0.25rem 0.25rem;
            height: 2.5rem;
            background: #fff;
            border: 1px solid #DBDFE4;
            border-left-color: transparent;
            border-top-left-radius: 0;
            border-bottom-left-radius: 0;
            border-top-right-radius: 0.5rem;
            border-bottom-right-radius: 0.5ren;
            cursor: pointer;
            transition: background 0.5s, border-color 0.3s;
            color: #767F8A;
            font-size: 15px;
            font-weight: 500;
            line-height: 1.5rem;
        }

        .pay-slip .col-StateCode[data-p-cell-editing=true] .extra-block .doc-type-select__label {
            display: block;
            font-size: 12px;
            line-height: 1rem;
            font-weight: 500;
            color: #767F8A;
        }

    .pay-slip .col-StateCode[data-p-cell-editing=true] .extra-block__document-input-seria {
        width: 3rem !important;
        border-radius: 0.5rem !important;
    }

    .pay-slip .col-StateCode[data-p-cell-editing=true] .extra-block .p-inputtext {
        max-height: 2.5rem;
        border-top-right-radius: 0 !important;
        border-bottom-right-radius: 0 !important;
    }

        .pay-slip .col-StateCode[data-p-cell-editing=true] .extra-block .p-inputtext.extra-block__psprt-number {
            border-top-left-radius: 0 !important;
            border-bottom-left-radius: 0 !important;
        }

        .pay-slip .col-StateCode[data-p-cell-editing=true] .extra-block .p-inputtext.statecode-data {
            min-width: 7rem;
        }

        .pay-slip .col-StateCode[data-p-cell-editing=true] .extra-block .p-inputtext:focus ~ label {
            color: #767F8A;
        }

    .pay-slip .col-StateCode[data-p-cell-editing=true] .extra-block label {
        color: #767F8A;
    }

    .pay-slip .col-StateCode[data-p-cell-editing=true] .extra-block .statecode-data-code {
        width: 5rem;
    }

    .pay-slip .col-StateCode[data-p-cell-editing=true] .extra-block .extra-block__psprt-number {
        width: 6.563rem;
    }

    .pay-slip .col-StateCode[data-p-cell-editing=true] .extra-block__seria-code, .pay-slip .col-StateCode[data-p-cell-editing=true] .extra-block__number-code {
        position: relative;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
    }

        .pay-slip .col-StateCode[data-p-cell-editing=true] .extra-block__seria-code .error-message, .pay-slip .col-StateCode[data-p-cell-editing=true] .extra-block__number-code .error-message {
            top: 100%;
            padding-top: 0.25rem;
        }

        .pay-slip .col-StateCode[data-p-cell-editing=true] .extra-block__seria-code .p-inputtext {
            width: 3rem !important;
            min-width: auto;
        }

    .pay-slip .col-StateCode[data-p-cell-editing=true] .edit-wrapper {
        width: 13.438rem;
    }

    .pay-slip .col-StateCode[data-p-cell-editing=true] .edit-wrapper__field {
        position: relative;
        display: flex;
        width: 100%;
    }

        .pay-slip .col-StateCode[data-p-cell-editing=true] .edit-wrapper__field .error-message {
            top: 90%;
            overflow: hidden;
            text-overflow: ellipsis;
            width: 100%;
            white-space: nowrap;
            padding: 0;
        }

.pay-slip .col-Editor[data-p-cell-editing=true] {
    width: 2.75rem;
    padding-right: 1.125rem !important;
}

.extra-block__document-list {
    width: 10rem;
    right: 0;
    z-index: 1000;
    background: #fff;
}

.extra-block__document-option {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.5rem 0.5rem;
    background: none;
    border: none;
    cursor: pointer;
    font-size: 15px;
    color: #767F8A;
    transition: all 0.32s ease-in;
}

    .extra-block__document-option:hover {
        background-color: #f4f6f7;
        color: #464B53;
    }

.p-popover.doc-type-popover {
    min-width: 12.5rem;
}

    .p-popover.doc-type-popover:before, .p-popover.doc-type-popover:after {
        right: calc(var(--p-popover-arrow-offset) + var(--p-popover-arrow-left));
        left: auto;
    }

    .p-popover.doc-type-popover .p-popover-content {
        padding: 0.5rem;
    }

@media (max-width: 768px) {
    .vue_paySlipGrid {
        padding-right: 0;
        padding-left: 0;
    }
}

.vue_paySlipGrid .p-datatable-header:has(.vue__global-search) {
    display: flex;
    column-gap: 1.25rem;
    align-items: center;
    flex-wrap: wrap;
    padding: 0 0 2rem 0;
    border: none;
}

@media (max-width: 1200px) {
    .vue_paySlipGrid .p-datatable-header:has(.vue__global-search) {
        flex-direction: column;
        align-items: flex-start;
    }
}

.vue_paySlipGrid .p-datatable-header .vue__global-search {
    order: 0;
}

    .vue_paySlipGrid .p-datatable-header .vue__global-search .p-inputtext {
        padding-right: 2rem;
        padding-left: 2rem;
    }

.vue_paySlipGrid .p-datatable-header .vue__header-actions {
    order: 1;
}

.vue_paySlipGrid .p-datatable-header .chips-wrapper {
    order: 2;
    width: 100%;
}

    .vue_paySlipGrid .p-datatable-header .chips-wrapper .chip-tableGrid {
        margin-top: 1.25rem;
    }

@media (max-width: 1200px) {
    .vue_paySlipGrid .p-datatable-header .datatable-global-search {
        width: 100%;
        margin-bottom: 16px;
    }

    .vue_paySlipGrid .p-datatable-header .vue__header-actions {
        width: 100%;
        flex-wrap: wrap;
    }

        .vue_paySlipGrid .p-datatable-header .vue__header-actions .btn,
        .vue_paySlipGrid .p-datatable-header .vue__header-actions .vue__add-dropdown {
            flex: 1 1 auto;
        }
}

.vue_paySlipGrid .p-datatable-header th.col-StateCode .p-datatable-column-header-content [data-pc-section=sort] {
    display: none;
}

.vue_paySlipGrid .p-datatable-header th.col-StateCode .p-datatable-column-title {
    white-space: break-spaces;
}

.vue_paySlipGrid .p-datatable-thead > tr > td:first-child, .vue_paySlipGrid .p-datatable-thead th:first-child,
.vue_paySlipGrid .p-datatable-tbody > tr > td:first-child,
.vue_paySlipGrid .p-datatable-tbody th:first-child {
    padding-left: 1rem !important;
    padding-right: 0;
    width: 2.5rem;
}

.vue_paySlipGrid .p-datatable-tbody > tr > td {
    position: relative;
}

.vue_paySlipGrid .p-datatable-tbody .col-IBAN .p-inputtext.ibanData {
    width: 16.875rem;
    padding-right: 2rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

@media (max-width: 1623px) {
    .vue_paySlipGrid .p-datatable-tbody .col-IBAN .p-inputtext.ibanData {
        width: auto;
    }
}

@media (max-width: 1200px) {
    .vue_paySlipGrid .p-datatable-tbody .col-IBAN .p-inputtext.ibanData {
        width: 100%;
    }
}

.vue_paySlipGrid .p-datatable-tbody .col-IBAN .p-inputtext.is-invalid {
    padding-right: 2rem;
}

.vue_paySlipGrid .p-datatable-tbody .col-IBAN .p-filled,
.vue_paySlipGrid .p-datatable-tbody .col-IBAN .p-inputtext,
.vue_paySlipGrid .p-datatable-tbody .col-StateCode .p-filled,
.vue_paySlipGrid .p-datatable-tbody .col-StateCode .p-inputtext,
.vue_paySlipGrid .p-datatable-tbody .col-Name .p-filled,
.vue_paySlipGrid .p-datatable-tbody .col-Name .p-inputtext {
    width: 100%;
    padding: 0.5rem 0.75rem;
    border-radius: 0.5rem;
    border: 1px solid #DBDFE4;
    font-size: 15px;
    line-height: 1.5rem;
}

    .vue_paySlipGrid .p-datatable-tbody .col-IBAN .p-filled:disabled,
    .vue_paySlipGrid .p-datatable-tbody .col-IBAN .p-inputtext:disabled,
    .vue_paySlipGrid .p-datatable-tbody .col-StateCode .p-filled:disabled,
    .vue_paySlipGrid .p-datatable-tbody .col-StateCode .p-inputtext:disabled,
    .vue_paySlipGrid .p-datatable-tbody .col-Name .p-filled:disabled,
    .vue_paySlipGrid .p-datatable-tbody .col-Name .p-inputtext:disabled {
        opacity: 1;
        background: transparent;
        color: #767F8A;
    }

.vue_paySlipGrid .p-datatable-tbody .col-IBAN .iban-value,
.vue_paySlipGrid .p-datatable-tbody .col-IBAN .name-value,
.vue_paySlipGrid .p-datatable-tbody .col-IBAN .edrpou-value,
.vue_paySlipGrid .p-datatable-tbody .col-IBAN span,
.vue_paySlipGrid .p-datatable-tbody .col-StateCode .iban-value,
.vue_paySlipGrid .p-datatable-tbody .col-StateCode .name-value,
.vue_paySlipGrid .p-datatable-tbody .col-StateCode .edrpou-value,
.vue_paySlipGrid .p-datatable-tbody .col-StateCode span,
.vue_paySlipGrid .p-datatable-tbody .col-Name .iban-value,
.vue_paySlipGrid .p-datatable-tbody .col-Name .name-value,
.vue_paySlipGrid .p-datatable-tbody .col-Name .edrpou-value,
.vue_paySlipGrid .p-datatable-tbody .col-Name span {
    color: #32383c;
    font-size: 14px;
    font-weight: 500;
}

.vue_paySlipGrid .p-datatable-tbody .col-Amount .amount-edit-wrapper {
    display: flex;
}

@media (max-width: 992px) {
    .vue_paySlipGrid .p-datatable-tbody .col-Amount .amount-edit-wrapper {
        width: 100%;
    }
}

.vue_paySlipGrid .p-datatable-tbody .col-Amount .amount-edit-wrapper .p-inputtext,
.vue_paySlipGrid .p-datatable-tbody .col-Amount .amount-edit-wrapper .p-filled {
    width: 100%;
    padding: 0.5rem 0.75rem;
    border-radius: 0.5rem;
    border: 1px solid #DBDFE4;
    font-size: 15px;
    line-height: 1.5rem;
}

.vue_paySlipGrid .p-datatable-tbody .col-Amount .btn-td__action {
    width: 2rem;
    height: 2rem;
    padding: 0;
    border-radius: 0.5rem;
    background: transparent;
    border: none;
    outline: none;
    color: #202427;
}

    .vue_paySlipGrid .p-datatable-tbody .col-Amount .btn-td__action .icon-vertical-dot {
        color: #DBDFE4;
    }

    .vue_paySlipGrid .p-datatable-tbody .col-Amount .btn-td__action:hover .icon-vertical-dot, .vue_paySlipGrid .p-datatable-tbody .col-Amount .btn-td__action:active .icon-vertical-dot, .vue_paySlipGrid .p-datatable-tbody .col-Amount .btn-td__action:focus .icon-vertical-dot {
        color: #767F8A;
    }

    .vue_paySlipGrid .p-datatable-tbody .col-Amount .btn-td__action span {
        cursor: pointer;
        position: relative;
    }

    .vue_paySlipGrid .p-datatable-tbody .col-Amount .btn-td__action .content-text {
        display: none;
    }

@media (max-width: 992px) {
    .vue_paySlipGrid .p-datatable-tbody .col-Amount .btn-td__action {
        width: 100%;
        height: 2.5rem;
        border-radius: 0.5rem;
        border: 1px solid #DBDFE4;
        background: transparent;
        font-weight: 500;
    }

        .vue_paySlipGrid .p-datatable-tbody .col-Amount .btn-td__action .content-dot {
            display: none;
        }

        .vue_paySlipGrid .p-datatable-tbody .col-Amount .btn-td__action .content-text {
            display: block;
            width: 100%;
            font-size: 14px;
            text-align: center;
            line-height: 1.35;
        }
}

.vue_paySlipGrid .p-datatable-tbody .col-Amount .amount-actions {
    position: relative;
    display: flex;
    align-items: center;
}

    .vue_paySlipGrid .p-datatable-tbody .col-Amount .amount-actions .btn-cancel {
        padding: 0.378rem;
        border: none;
        background-color: transparent;
        color: #A8ADB4;
    }

        .vue_paySlipGrid .p-datatable-tbody .col-Amount .amount-actions .btn-cancel:hover, .vue_paySlipGrid .p-datatable-tbody .col-Amount .amount-actions .btn-cancel:active {
            color: #EB4235;
            background-color: transparent;
        }

.vue_paySlipGrid .p-datatable-tbody .col-Editor {
    padding-left: 0.25rem;
    padding-right: 1.25rem;
}

    .vue_paySlipGrid .p-datatable-tbody .col-Editor .content-text {
        display: none;
    }

    .vue_paySlipGrid .p-datatable-tbody .col-Editor .content-dot {
        display: flex;
        height: 100%;
        border-radius: 0;
        width: 1.25rem;
        cursor: pointer;
    }

        .vue_paySlipGrid .p-datatable-tbody .col-Editor .content-dot:not(:disabled):hover {
            background: transparent;
        }

        .vue_paySlipGrid .p-datatable-tbody .col-Editor .content-dot .icon-vertical-dot {
            color: #DBDFE4;
        }

        .vue_paySlipGrid .p-datatable-tbody .col-Editor .content-dot:hover .icon-vertical-dot, .vue_paySlipGrid .p-datatable-tbody .col-Editor .content-dot:active .icon-vertical-dot, .vue_paySlipGrid .p-datatable-tbody .col-Editor .content-dot:focus .icon-vertical-dot {
            color: #767F8A;
        }

@media (max-width: 1200px) {
    .vue_paySlipGrid .p-datatable-tbody .col-Editor .content-dot {
        width: 100%;
        border: 1px solid #DBDFE4;
        border-radius: 0.5rem;
        background: transparent;
        font-weight: 500;
    }

        .vue_paySlipGrid .p-datatable-tbody .col-Editor .content-dot::after {
            content: "Дії за відомістю";
            display: flex;
            width: 100%;
            height: 2.5rem;
            align-items: center;
            justify-content: center;
            color: #32383c;
            font-size: 14px;
            font-weight: 500;
            line-height: 1;
        }
}

.vue_paySlipGrid .p-datatable-tbody .col-Editor[data-p-cell-editing=true] .content-dot.editor-state--view {
    display: none;
}

.vue_paySlipGrid .p-datatable-tbody .col-Editor--payslip .content-edit-delete-element {
    width: 100%;
    display: none;
    justify-content: center;
    align-items: center;
    padding: 0;
    color: #EB4235;
    cursor: pointer;
}

.vue_paySlipGrid .p-datatable-tbody .col-Editor--payslip[data-p-cell-editing=true] .content-edit-delete-element.editor-state--edit {
    display: inline-flex;
}

@media (max-width: 1200px) {
    .vue_paySlipGrid .p-datatable-tbody .col-Editor .p-button {
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 11px 16px;
        border-radius: 8px;
        line-height: 1.2;
        text-align: center;
        font-family: "Fixel Text", "Fixel Display", "Helvetica", "Arial", sans-serif;
        font-size: 15px;
        font-weight: 600;
        border: none;
        background-color: #690DD3;
        color: #FFF;
        transition: background-color 0.22s ease-out;
        box-shadow: none;
        cursor: pointer;
    }

        .vue_paySlipGrid .p-datatable-tbody .col-Editor .p-button:not(:disabled):hover, .vue_paySlipGrid .p-datatable-tbody .col-Editor .p-button:not(:disabled):active {
            background-color: #5E1CAB;
            transition: background-color 0.42s ease-out;
            color: #FFF !important;
        }

        .vue_paySlipGrid .p-datatable-tbody .col-Editor .p-button:not(:disabled):focus {
            outline: none;
            transition: all 0.42s ease-out;
        }

        .vue_paySlipGrid .p-datatable-tbody .col-Editor .p-button:not(:disabled):focus-visible {
            outline: none;
            border: none;
        }

    .vue_paySlipGrid .p-datatable-tbody .col-Editor .content-dot .ico-n {
        display: none;
    }

    .vue_paySlipGrid .p-datatable-tbody .col-Editor .content-text {
        position: relative;
        display: inline-block;
        width: 100%;
    }
}

.vue_paySlipGrid .p-datatable-tbody .col-IBAN[data-p-cell-editing=true],
.vue_paySlipGrid .p-datatable-tbody .col-StateCode[data-p-cell-editing=true],
.vue_paySlipGrid .p-datatable-tbody .col-Name[data-p-cell-editing=true],
.vue_paySlipGrid .p-datatable-tbody .col-Amount[data-p-cell-editing=true],
.vue_paySlipGrid .p-datatable-tbody .col-Editor[data-p-cell-editing=true] {
    padding-left: 0;
    padding-right: 0;
}

    .vue_paySlipGrid .p-datatable-tbody .col-IBAN[data-p-cell-editing=true] .edit-wrapper,
    .vue_paySlipGrid .p-datatable-tbody .col-StateCode[data-p-cell-editing=true] .edit-wrapper,
    .vue_paySlipGrid .p-datatable-tbody .col-Name[data-p-cell-editing=true] .edit-wrapper,
    .vue_paySlipGrid .p-datatable-tbody .col-Amount[data-p-cell-editing=true] .edit-wrapper,
    .vue_paySlipGrid .p-datatable-tbody .col-Editor[data-p-cell-editing=true] .edit-wrapper {
        padding-left: 0.5rem;
        padding-right: 0.5rem;
    }

    .vue_paySlipGrid .p-datatable-tbody .col-IBAN[data-p-cell-editing=true] .iban-input-wrapper,
    .vue_paySlipGrid .p-datatable-tbody .col-IBAN[data-p-cell-editing=true] .edit-wrapper__field,
    .vue_paySlipGrid .p-datatable-tbody .col-StateCode[data-p-cell-editing=true] .iban-input-wrapper,
    .vue_paySlipGrid .p-datatable-tbody .col-StateCode[data-p-cell-editing=true] .edit-wrapper__field,
    .vue_paySlipGrid .p-datatable-tbody .col-Name[data-p-cell-editing=true] .iban-input-wrapper,
    .vue_paySlipGrid .p-datatable-tbody .col-Name[data-p-cell-editing=true] .edit-wrapper__field,
    .vue_paySlipGrid .p-datatable-tbody .col-Amount[data-p-cell-editing=true] .iban-input-wrapper,
    .vue_paySlipGrid .p-datatable-tbody .col-Amount[data-p-cell-editing=true] .edit-wrapper__field,
    .vue_paySlipGrid .p-datatable-tbody .col-Editor[data-p-cell-editing=true] .iban-input-wrapper,
    .vue_paySlipGrid .p-datatable-tbody .col-Editor[data-p-cell-editing=true] .edit-wrapper__field {
        padding-left: 0;
        padding-right: 0;
    }

@media (max-width: 1200px) {
    .vue_paySlipGrid .p-datatable-tbody .col-IBAN[data-p-cell-editing=true] .iban-input-wrapper,
    .vue_paySlipGrid .p-datatable-tbody .col-IBAN[data-p-cell-editing=true] .edit-wrapper__field,
    .vue_paySlipGrid .p-datatable-tbody .col-StateCode[data-p-cell-editing=true] .iban-input-wrapper,
    .vue_paySlipGrid .p-datatable-tbody .col-StateCode[data-p-cell-editing=true] .edit-wrapper__field,
    .vue_paySlipGrid .p-datatable-tbody .col-Name[data-p-cell-editing=true] .iban-input-wrapper,
    .vue_paySlipGrid .p-datatable-tbody .col-Name[data-p-cell-editing=true] .edit-wrapper__field,
    .vue_paySlipGrid .p-datatable-tbody .col-Amount[data-p-cell-editing=true] .iban-input-wrapper,
    .vue_paySlipGrid .p-datatable-tbody .col-Amount[data-p-cell-editing=true] .edit-wrapper__field,
    .vue_paySlipGrid .p-datatable-tbody .col-Editor[data-p-cell-editing=true] .iban-input-wrapper,
    .vue_paySlipGrid .p-datatable-tbody .col-Editor[data-p-cell-editing=true] .edit-wrapper__field {
        padding: 0;
    }

        .vue_paySlipGrid .p-datatable-tbody .col-IBAN[data-p-cell-editing=true] .iban-input-wrapper .p-inputnumber,
        .vue_paySlipGrid .p-datatable-tbody .col-IBAN[data-p-cell-editing=true] .edit-wrapper__field .p-inputnumber,
        .vue_paySlipGrid .p-datatable-tbody .col-StateCode[data-p-cell-editing=true] .iban-input-wrapper .p-inputnumber,
        .vue_paySlipGrid .p-datatable-tbody .col-StateCode[data-p-cell-editing=true] .edit-wrapper__field .p-inputnumber,
        .vue_paySlipGrid .p-datatable-tbody .col-Name[data-p-cell-editing=true] .iban-input-wrapper .p-inputnumber,
        .vue_paySlipGrid .p-datatable-tbody .col-Name[data-p-cell-editing=true] .edit-wrapper__field .p-inputnumber,
        .vue_paySlipGrid .p-datatable-tbody .col-Amount[data-p-cell-editing=true] .iban-input-wrapper .p-inputnumber,
        .vue_paySlipGrid .p-datatable-tbody .col-Amount[data-p-cell-editing=true] .edit-wrapper__field .p-inputnumber,
        .vue_paySlipGrid .p-datatable-tbody .col-Editor[data-p-cell-editing=true] .iban-input-wrapper .p-inputnumber,
        .vue_paySlipGrid .p-datatable-tbody .col-Editor[data-p-cell-editing=true] .edit-wrapper__field .p-inputnumber {
            width: 100%;
        }
}

.vue_paySlipGrid .p-datatable-tbody .col-IBAN[data-p-cell-editing=true] .edit-wrapper__field .invalid-feedback {
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100%;
    white-space: nowrap;
}

@media (max-width: 1200px) {
    .vue_paySlipGrid .p-datatable-tbody tr .grid-cell {
        width: 100%;
    }
}

.vue_paySlipGrid .p-datatable-tbody tr.row-has-error {
    position: relative;
}

@media (max-width: 1200px) {
    .vue_paySlipGrid .p-datatable-tbody tr.row-has-error {
        box-shadow: none;
        border: 1px solid #EB4235;
    }
}

@media (max-width: 1200px) {
    .vue_paySlipGrid .p-datatable-tbody tr.row-has-warning {
        box-shadow: none;
        border: 1px solid #EB9D35;
    }
}

.vue_paySlipGrid .p-datatable-tbody tr.row-has-warning .is-invalid-warning {
    display: block !important;
}

.vue_paySlipGrid .p-datatable-tbody tr.row-has-warning .is-invalid,
.vue_paySlipGrid .p-datatable-tbody tr.row-has-warning .invalid-feedback {
    display: block !important;
}

.vue_paySlipGrid .p-datatable-tbody tr .is-invalid-warning {
    display: block !important;
    color: #EB9D35;
}

@media (max-width: 1200px) {
    .vue_paySlipGrid .p-datatable-footer {
        border-top-left-radius: 0.5rem;
        border-top-right-radius: 0.5rem;
        border-top: 1px solid #DBDFE4;
    }
}

.vue_paySlipGrid .p-datatable-footer .grid-pagination {
    flex-direction: column;
}

.vue_paySlipGrid .p-datatable-footer .grid-pagination__control-action {
    display: flex;
    justify-content: space-between;
    width: 100%;
}

@media (max-width: 768px) {
    .vue_paySlipGrid .p-datatable-footer .grid-pagination__control-action {
        flex-direction: column;
    }

        .vue_paySlipGrid .p-datatable-footer .grid-pagination__control-action .grid-pagination__pages {
            padding-top: 1rem;
            display: flex;
            width: 100%;
            justify-content: center;
        }
}

.vue_paySlipGrid .p-datatable-footer .grid-pagination__info {
    width: 100%;
    padding: 0.75rem 0;
}

.vue_paySlipGrid.paySlipGridExpand {
    padding-right: 0;
    padding-left: 0;
}

    .vue_paySlipGrid.paySlipGridExpand .datatable-title-row,
    .vue_paySlipGrid.paySlipGridExpand .p-datatable-header,
    .vue_paySlipGrid.paySlipGridExpand .pay-slip__check-block {
        padding-right: 1.25rem;
        padding-left: 1.25rem;
    }

    .vue_paySlipGrid.paySlipGridExpand .datatable-title-row,
    .vue_paySlipGrid.paySlipGridExpand .p-datatable-header {
        position: sticky;
        top: 0;
        z-index: 10;
        background: #fff;
    }

    .vue_paySlipGrid.paySlipGridExpand .p-datatable-header {
        top: 4.625rem;
        border-bottom: 1px solid #DBDFE4;
    }

    .vue_paySlipGrid.paySlipGridExpand .p-datatable-table-container {
        border-top-left-radius: 0;
        border-top-right-radius: 0;
    }

    .vue_paySlipGrid.paySlipGridExpand .p-datatable-footer {
        position: sticky;
        bottom: 0;
        border-top: 1px solid #DBDFE4;
    }

@media (max-width: 768px) {
    .vue_paySlipGrid .grid-footer .grid-footer__controls {
        flex-direction: column;
    }
}

@media (max-width: 768px) {
    .vue_paySlipGrid .grid-footer .grid-footer__info {
        align-items: flex-start;
        width: 100%;
    }
}

.vue_paySlipGrid .grid-footer .bulk-actions {
    display: flex;
}

@media (max-width: 768px) {
    .vue_paySlipGrid .grid-footer .bulk-actions {
        flex-direction: column;
        align-items: flex-start;
        margin: 1rem 0 0 0 !important;
        width: 100%;
    }

        .vue_paySlipGrid .grid-footer .bulk-actions .btn {
            width: 100%;
            min-width: 100%;
        }
}

.vue_paySlipGrid .grid-footer .bulk-actions .btn-invalid {
    flex-direction: row;
    min-width: 15em;
    padding-left: 0;
    padding-right: 0;
    border: none;
    background-color: transparent;
}

.vue_paySlipGrid .grid-footer .bulk-actions .btn-invalid__content {
    display: block;
    width: min-content;
    white-space: nowrap;
}

@media (max-width: 768px) {
    .vue_paySlipGrid .grid-footer .bulk-actions .btn-invalid__content {
        width: 100%;
    }
}

.vue__payslip-sign {
    padding: 0;
}

    .vue__payslip-sign .btn-actions {
        padding: 0.75rem;
    }

.drawer-footer__right-custom-pay-slip.sign-btn.disabled {
    pointer-events: none !important;
    opacity: 0.5 !important;
}

@media (max-width: 768px) {
    #paySlipActionDropdownWrapper .p-component {
        padding: 8px 10px;
    }
}

.pay-slip__dialog-whats-new {
    position: relative;
    max-width: 440px !important;
}

    .pay-slip__dialog-whats-new .p-dialog-header {
        padding: 8px 8px 0 !important;
        position: absolute;
        right: 0px;
    }

    .pay-slip__dialog-whats-new .p-dialog-content {
        padding-bottom: 0 !important;
    }

    .pay-slip__dialog-whats-new .whats-new__body-title {
        color: #32383c;
        text-align: center;
        font-size: 1.25rem;
        font-style: normal;
        font-weight: 600;
        line-height: 1.5rem;
        margin-bottom: 0.75rem;
    }

    .pay-slip__dialog-whats-new .whats-new__body-text {
        color: #32383c;
        text-align: center;
        font-size: 15px;
        font-style: normal;
        font-weight: 400;
        line-height: 1.5rem;
        margin-bottom: 0.75rem;
    }

    .pay-slip__dialog-whats-new .whats-new__body-text-strong {
        font-weight: 600;
    }

    .pay-slip__dialog-whats-new .whats-new__body-checkbox {
        display: flex;
        align-items: center;
        justify-content: center;
        margin-top: 25px;
    }

    .pay-slip__dialog-whats-new .whats-new__body--image {
        margin-top: 0.75rem;
    }

    .pay-slip__dialog-whats-new .p-dialog-footer::before {
        background: none !important;
    }

    .pay-slip__dialog-whats-new .p-dialog-footer button {
        width: 100%;
        margin-bottom: 12px;
    }

    .pay-slip__dialog-whats-new .heart-nova-pay {
        width: 120px;
        height: 120px;
        display: flex;
        margin: auto;
        margin-bottom: 20px;
        background: url("../img/newDesign/NovaPay-heart.png");
    }

        .pay-slip__dialog-whats-new .heart-nova-pay.debugUrl {
            background: url("/Content/themes/novapay/img/newDesign/NovaPay-heart.png");
        }

    .pay-slip__dialog-whats-new .heart-nova-pay {
        background-size: contain;
    }

.employeeListFooter .employee__items {
    color: #767F8A;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 16px;
}

.employeeListFooter-button {
    width: 146px;
}

@media (max-width: 1623px) {
    .modal.is-open .modal-dialog.importPayment {
        width: 100%;
        max-width: 47.688rem;
    }
}

@media (max-width: 768px) {
    .modal.is-open .modal-dialog.importPayment {
        min-width: 22rem;
        width: 50%;
    }
}

@media (max-width: 576px) {
    .modal.is-open .modal-dialog.importPayment {
        width: 360px;
    }
}

.modal.is-open .modal-dialog.importPayment .modal-content::before {
    position: absolute;
    content: "";
    display: block;
    top: 50%;
    left: calc(50% - 25px);
    width: 50px;
    height: 50px;
    background: url("../img/newDesign/spinner-loading.png") no-repeat center;
    animation: rotate 1s linear infinite;
    transform: translate(-50%, -50%);
    z-index: 2;
}

.modal.is-open .modal-dialog.importPayment .modal-content::after {
    position: absolute;
    content: "";
    height: 100%;
    width: 100%;
    background: rgba(255, 255, 255, 0.5);
    backdrop-filter: blur(0.25rem);
    top: 0;
    z-index: 1;
}

.debugUrl .modal.is-open .modal-dialog.importPayment .modal-content::before {
    background: url("/Content/themes/novapay/img/newDesign/spinner-loading.png") no-repeat center;
}

.modal.is-open .modal-dialog.importPayment .modal-content:has(.import-first-step, .import-two-step, .third-step-import, .step-import-done)::before {
    display: none;
}

.modal.is-open .modal-dialog.importPayment .modal-content:has(.import-first-step, .import-two-step, .third-step-import, .step-import-done)::after {
    display: none;
}

.file-important {
    color: #EB4235;
    font-size: 0.75rem;
}

.import-confirmation {
    display: flex;
    flex-direction: column;
}

.import-confirmation__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.25rem 0.875rem 1.25rem 1.25rem;
    font-size: 1.25rem;
}

.import-confirmation__body {
    padding: 0 1.25rem 1.25rem 1.25rem;
    font-size: 16px;
}

.import-confirmation__footer {
    padding: 1.25rem;
    display: flex;
    justify-content: flex-end;
    gap: 1rem;
    border-top: 1px solid #DBDFE4;
}

.modal-import {
    height: 100%;
}

.modal-import__content {
    height: 100%;
}

.modal-import__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.25rem 1.5rem 1rem 1.5rem;
}

    .modal-import__header .modal-title {
        margin: 0;
        font-weight: 500;
    }

.modal-import__body {
    height: calc(100% - 6rem);
}

    .modal-import__body .import1 {
        height: 101%;
    }

    .modal-import__body .itemDetails2,
    .modal-import__body .import3 {
        height: 100%;
    }

    .modal-import__body .third-step-import .config-import {
        padding: 0;
        max-height: calc(100vh - 258px);
    }

    .modal-import__body .third-step-import .itemDetailsContent {
        padding: 0;
    }

    .modal-import__body .itemDetailsHeader {
        display: none;
    }

    .modal-import__body .itemBlockHeader {
        padding: 0;
    }

    .modal-import__body .step-list {
        display: flex;
        gap: 2px;
        background: #fff;
        counter-reset: step-counter;
        list-style: none;
    }

    .modal-import__body .step-list__item {
        display: flex;
        align-items: center;
        justify-content: center;
        flex: 1;
        float: none;
        padding: 0.45rem 0.5rem;
        background: #F5EDFF;
        counter-increment: step-counter;
        position: relative;
    }

        .modal-import__body .step-list__item::before {
            content: counter(step-counter) ".";
            font-size: 14px;
            color: #A56EE5;
        }

        .modal-import__body .step-list__item .step-content {
            font-size: 14px;
            color: #A56EE5;
        }

        .modal-import__body .step-list__item.doneStepTab {
            background: #E1CFF6;
            color: #690DD3;
        }

        .modal-import__body .step-list__item.activeStepTab {
            background: #E1CFF6;
        }

            .modal-import__body .step-list__item.activeStepTab .step-content {
                color: #690DD3;
                text-transform: inherit;
            }

            .modal-import__body .step-list__item.activeStepTab::before {
                content: counter(step-counter) ".";
                font-size: 14px;
                color: #690DD3;
            }

    .modal-import__body .step-list .step-content {
        padding: 0;
        margin: 0;
        float: none;
        height: auto;
        line-height: 100%;
        font-size: 14px;
        color: #A56EE5;
        font-weight: normal;
        text-align: center;
        background: transparent;
    }

        .modal-import__body .step-list .step-content:after, .modal-import__body .step-list .step-content:before {
            display: none;
        }

    .modal-import__body .import-payment-container {
        position: relative;
        height: calc(100% - 0.89rem);
    }

        .modal-import__body .import-payment-container.upload {
            position: relative;
        }

            .modal-import__body .import-payment-container.upload:before {
                position: absolute;
                content: "";
                display: block;
                top: 50%;
                left: calc(50% - 25px);
                width: 50px;
                height: 50px;
                background: url("../img/newDesign/spinner-loading.png") no-repeat center;
                animation: rotate 1s linear infinite;
                transform: translate(-50%, -50%);
                z-index: 3;
            }

.debugUrl .modal-import__body .import-payment-container.upload:before {
    background: url("/Content/themes/novapay/img/newDesign/spinner-loading.png") no-repeat center;
}

.modal-import__body .import-payment-container.upload::after {
    position: absolute;
    content: "";
    height: 100%;
    width: 100%;
    background: rgba(255, 255, 255, 0.5);
    backdrop-filter: blur(0.25rem);
    top: 0;
    z-index: 1;
}

.modal-import__body .import-download-wrapper {
    position: absolute;
    bottom: 0;
    display: flex;
    justify-content: flex-end;
    width: 100%;
    height: fit-content;
    padding: 1rem 1.5rem;
    border-radius: 0;
    background: #fff;
    border-top: 1px solid #DBDFE4;
    border-bottom: none;
    border-left: none;
    border-right: none;
    box-shadow: 0 4px 34px 0 rgba(191, 195, 204, 0.3);
    z-index: 1;
}

    .modal-import__body .import-download-wrapper:not(.disabledBtn):hover {
        background: #fff;
    }

.modal-import__body .btn-import-download,
.modal-import__body .btn-download-more {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 11px 1rem;
    border-radius: 0.5rem;
    line-height: 1.2;
    text-align: center;
    font-family: "Fixel Text", "Fixel Display", "Helvetica", "Arial", sans-serif;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    border: none;
    background-color: #690DD3;
    color: #FFF;
    transition: background-color 0.22s ease-out;
    box-shadow: none;
}

    .modal-import__body .btn-import-download:hover, .modal-import__body .btn-import-download:active,
    .modal-import__body .btn-download-more:hover,
    .modal-import__body .btn-download-more:active {
        background-color: #5E1CAB;
        transition: background-color 0.42s ease-out;
        color: #FFF !important;
    }

.modal-import .main-import-payment {
    height: 100%;
}

.modal-import .import-payment__options {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
}

.modal-import .import-payment__format, .modal-import .import-payment__template {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.modal-import .import-payment__format-template {
    display: flex;
    flex-direction: column;
    padding: 1.5rem;
    gap: 1rem;
}

.modal-import .import-form__upload-field-wrapper {
    display: flex;
    justify-content: space-between;
}

.modal-import .import-form__control-field, .modal-import .import-form__control, .modal-import .import-form__file-upload, .modal-import .import-form__file-name-container {
    min-width: 21.875rem;
}

    .modal-import .import-form__control .import-format-dropdown,
    .modal-import .import-form__control .import-template-dropdown {
        width: 100%;
        position: relative;
    }

        .modal-import .import-form__control .import-format-dropdown .dropdown-block,
        .modal-import .import-form__control .import-template-dropdown .dropdown-block {
            width: 100%;
            margin-top: 4px;
        }

    .modal-import .import-form__control .import-format-list .dropdown-item {
        padding: 0.5rem;
    }

    .modal-import .import-form__control .btn-format-dropdown,
    .modal-import .import-form__control .btn-template-dropdown {
        justify-content: space-between;
        width: 100%;
        padding: 0.5rem 0.75rem;
        color: #32383c;
    }

        .modal-import .import-form__control .btn-format-dropdown .icon-arrow-down,
        .modal-import .import-form__control .btn-template-dropdown .icon-arrow-down {
            width: 20px;
            height: 17px;
            background-color: #767F8A !important;
            transform: rotate(0deg);
            transition: transform 0.3s ease-out;
        }

        .modal-import .import-form__control .btn-format-dropdown .selected-option,
        .modal-import .import-form__control .btn-template-dropdown .selected-option {
            font-weight: 400;
        }

        .modal-import .import-form__control .btn-format-dropdown.open .icon-arrow-down,
        .modal-import .import-form__control .btn-template-dropdown.open .icon-arrow-down {
            transform: rotate(180deg);
        }

.modal-import .import-form__control-field {
    display: flex;
    justify-content: space-between;
    flex: 1;
    gap: 1rem;
}

.modal-import .import-form__file-name-display, .modal-import .import-form__file-upload {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.modal-import .import-form__file-name-wrapper {
    position: relative;
}

.modal-import .import-form__file-name-input {
    padding: 0.5rem 0.75rem;
    min-width: 21.875rem;
    min-height: 2.5rem;
    border-radius: 0.5rem;
    border: 1px solid #DBDFE4;
}

.modal-import .import-form__file-name-clear {
    display: none;
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
}

.modal-import .import-form__file-upload .label-file-upload {
    display: flex;
    justify-content: center;
    align-items: center;
    width: fit-content;
    min-width: 10rem;
    padding: 0.5rem 0.75rem;
    cursor: pointer;
    border-radius: 0.5rem;
    border: 1px solid #DBDFE4;
}

    .modal-import .import-form__file-upload .label-file-upload .ico-n {
        margin-right: 0.5rem;
    }

.modal-import .import-form__file-upload-label {
    opacity: 0;
}

.modal-import .import-form__file-input {
    opacity: 0;
    display: none;
}

.modal-import .import-form__file-name-btn {
    position: absolute;
    right: 0;
}

.modal-import .import-label {
    font-size: 12px;
    color: #767F8A;
}

.import-template-payment,
.import-template-PTR {
    padding: 0;
}

    .import-template-payment.import2,
    .import-template-PTR.import2 {
        min-height: auto;
        min-width: auto;
        height: 100%;
    }

    .import-template-payment .itemDetails,
    .import-template-PTR .itemDetails {
        border: none;
        height: 100%;
    }

    .import-template-payment .itemBlockHeader,
    .import-template-PTR .itemBlockHeader {
        margin: 0;
    }

    .import-template-payment .import-payment-config__footer,
    .import-template-PTR .import-payment-config__footer {
        height: auto;
        display: flex;
        justify-content: space-between;
    }

    .import-template-payment .import-payment-config .back-step-import,
    .import-template-payment .import-payment-config .next-step-import,
    .import-template-PTR .import-payment-config .back-step-import,
    .import-template-PTR .import-payment-config .next-step-import {
        width: auto;
        margin: 0;
        border: none;
        background: transparent;
        line-height: normal;
        height: auto;
    }

    .import-template-payment .import-payment-config .next-step-import,
    .import-template-PTR .import-payment-config .next-step-import {
        display: flex;
        gap: 0.5rem;
    }

        .import-template-payment .import-payment-config .next-step-import .ico-n,
        .import-template-PTR .import-payment-config .next-step-import .ico-n {
            margin-left: 0.25rem;
        }

    .import-template-payment .import-payment-config .back-step-import .ico-n,
    .import-template-PTR .import-payment-config .back-step-import .ico-n {
        margin-right: 0.25rem;
    }

    .import-template-payment .import-payment-config .btn-import-back-step,
    .import-template-payment .import-payment-config .btn-import-next-step,
    .import-template-payment .import-payment-config .btn-save-import-template,
    .import-template-PTR .import-payment-config .btn-import-back-step,
    .import-template-PTR .import-payment-config .btn-import-next-step,
    .import-template-PTR .import-payment-config .btn-save-import-template {
        min-width: 10rem;
        display: flex;
        align-items: center;
        gap: 5px;
    }

        .import-template-payment .import-payment-config .btn-import-back-step .icon-back-arrow-black,
        .import-template-payment .import-payment-config .btn-import-next-step .icon-back-arrow-black,
        .import-template-payment .import-payment-config .btn-save-import-template .icon-back-arrow-black,
        .import-template-PTR .import-payment-config .btn-import-back-step .icon-back-arrow-black,
        .import-template-PTR .import-payment-config .btn-import-next-step .icon-back-arrow-black,
        .import-template-PTR .import-payment-config .btn-save-import-template .icon-back-arrow-black {
            width: 20px;
            height: 20px;
        }

        .import-template-payment .import-payment-config .btn-import-next-step .sort-up,
        .import-template-PTR .import-payment-config .btn-import-next-step .sort-up {
            background-color: white !important;
            transform: rotate(90deg);
            width: 20px;
            height: 20px;
        }

    .import-template-payment .config-import,
    .import-template-PTR .config-import {
        display: flex;
        flex-direction: column;
        gap: 1.5rem;
        position: relative;
        padding: 1.5rem;
        max-height: calc(100vh - 110px);
        overflow-y: auto;
        scrollbar-width: thin;
        scrollbar-color: rgba(168, 173, 180, 0.5);
    }

        .import-template-payment .config-import::-webkit-scrollbar-track,
        .import-template-PTR .config-import::-webkit-scrollbar-track {
            background: rgba(168, 173, 180, 0.5);
            border-radius: 0.25rem;
        }

        .import-template-payment .config-import::-webkit-scrollbar-thumb,
        .import-template-PTR .config-import::-webkit-scrollbar-thumb {
            background: rgba(168, 173, 180, 0.5);
            border-radius: 0.25rem;
        }

            .import-template-payment .config-import::-webkit-scrollbar-thumb:hover,
            .import-template-PTR .config-import::-webkit-scrollbar-thumb:hover {
                background: rgba(168, 173, 180, 0.5);
            }

        .import-template-payment .config-import.ptr-config-import,
        .import-template-PTR .config-import.ptr-config-import {
            gap: 0;
        }

    .import-template-payment .config-import__instruction,
    .import-template-PTR .config-import__instruction {
        position: relative;
        display: flex;
        gap: 0.5rem;
        width: 100%;
        padding: 1rem;
        background: #f4f6f7;
        border-radius: 0 0.25rem 0.25rem 0;
    }

        .import-template-payment .config-import__instruction::before,
        .import-template-PTR .config-import__instruction::before {
            position: absolute;
            content: "";
            left: 0;
            top: 0;
            width: 6px;
            height: 100%;
            background: #A8ADB4;
            border-radius: 4px 0 0 4px;
        }

    .import-template-payment .config-import__instruction-icon-wrapper,
    .import-template-PTR .config-import__instruction-icon-wrapper {
        display: flex;
        align-items: center;
        justify-content: center;
    }

        .import-template-payment .config-import__instruction-icon-wrapper .ico-n,
        .import-template-PTR .config-import__instruction-icon-wrapper .ico-n {
            background-color: #767F8A !important;
        }

    .import-template-payment .config-import__instruction-content,
    .import-template-PTR .config-import__instruction-content {
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
    }

    .import-template-payment .config-import__instruction-title, .import-template-payment .config-import__instruction-text,
    .import-template-PTR .config-import__instruction-title,
    .import-template-PTR .config-import__instruction-text {
        color: #32383c;
    }

    .import-template-payment .config-import__instruction-title,
    .import-template-PTR .config-import__instruction-title {
        font-size: 16px;
    }

    .import-template-payment .config-import__instruction-text,
    .import-template-PTR .config-import__instruction-text {
        font-size: 14px;
    }

    .import-template-payment .config-import__container-content,
    .import-template-PTR .config-import__container-content {
        display: flex;
        justify-content: space-between;
        gap: 1.5rem;
    }

    .import-template-payment .config-import .downloadDataContent .file-columns,
    .import-template-PTR .config-import .downloadDataContent .file-columns {
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
    }

    .import-template-payment .config-import .downloadDataContent .contentRow,
    .import-template-PTR .config-import .downloadDataContent .contentRow {
        width: 100%;
        margin: 0;
        border-radius: 0.5rem;
        border: 1px solid #DBDFE4;
    }

    .import-template-payment .config-import .downloadDataContent .upDownArrows,
    .import-template-PTR .config-import .downloadDataContent .upDownArrows {
        border-bottom-right-radius: 0.5rem;
        border-top-right-radius: 0.5rem;
    }

        .import-template-payment .config-import .downloadDataContent .upDownArrows .icon-toggle,
        .import-template-PTR .config-import .downloadDataContent .upDownArrows .icon-toggle {
            background-color: #A8ADB4 !important;
        }

    .import-template-payment .config-import .save-template-section,
    .import-template-PTR .config-import .save-template-section {
        padding-bottom: 4.625rem;
    }

        .import-template-payment .config-import .save-template-section .form-row,
        .import-template-PTR .config-import .save-template-section .form-row {
            display: flex;
            flex-direction: column;
            width: 100%;
        }

    .import-template-payment .config-import .save-template__activator,
    .import-template-PTR .config-import .save-template__activator {
        padding-bottom: 0.75rem;
    }

        .import-template-payment .config-import .save-template__activator .visually-hidden,
        .import-template-PTR .config-import .save-template__activator .visually-hidden {
            clip: rect(0 0 0 0);
            clip-path: inset(50%);
            height: 0.0625rem;
            overflow: hidden;
            position: absolute;
            white-space: nowrap;
            width: 0.0625rem;
        }

        .import-template-payment .config-import .save-template__activator .checkbox-activator,
        .import-template-PTR .config-import .save-template__activator .checkbox-activator {
            display: flex;
            flex-direction: row;
            gap: 12px;
            justify-content: flex-start;
            align-items: center;
            padding: 0.375rem 0;
        }

        .import-template-payment .config-import .save-template__activator .toggle-activator,
        .import-template-PTR .config-import .save-template__activator .toggle-activator {
            cursor: pointer;
            display: flex;
            min-width: 48px;
            height: 28px;
            border-radius: 400px;
            padding: 4px;
            transition: background 0.3s ease;
            background-color: #bababa;
            position: relative;
        }

            .import-template-payment .config-import .save-template__activator .toggle-activator:before,
            .import-template-PTR .config-import .save-template__activator .toggle-activator:before {
                content: "";
                position: absolute;
                top: 50%;
                transform: translateY(-50%);
                min-width: 24px;
                height: 24px;
                border-radius: 50%;
                background-color: #fff;
                transition: opacity 0.3s ease, transform 0.3s ease;
            }

            .import-template-payment .config-import .save-template__activator .toggle-activator:before,
            .import-template-PTR .config-import .save-template__activator .toggle-activator:before {
                left: 0.1875rem;
            }

            .import-template-payment .config-import .save-template__activator .toggle-activator:has(input[type=checkbox]:checked),
            .import-template-PTR .config-import .save-template__activator .toggle-activator:has(input[type=checkbox]:checked) {
                background-color: #690DD3;
            }

                .import-template-payment .config-import .save-template__activator .toggle-activator:has(input[type=checkbox]:checked):before,
                .import-template-PTR .config-import .save-template__activator .toggle-activator:has(input[type=checkbox]:checked):before {
                    background-color: #fff;
                    transform: translate(75%, -50%);
                }

        .import-template-payment .config-import .save-template__activator .label-activator,
        .import-template-PTR .config-import .save-template__activator .label-activator {
            color: #202427;
            font-size: 14px;
        }

    .import-template-payment .config-import .form-control-template,
    .import-template-PTR .config-import .form-control-template {
        display: flex;
        gap: 0.5rem;
        align-items: end;
    }

        .import-template-payment .config-import .form-control-template .form-input,
        .import-template-PTR .config-import .form-control-template .form-input {
            display: flex;
            flex-direction: column;
            gap: 0.5rem;
            width: 100%;
            max-width: 22.25rem;
        }

        .import-template-payment .config-import .form-control-template .btn-save-import-template,
        .import-template-PTR .config-import .form-control-template .btn-save-import-template {
            height: 2.5rem;
        }

    .import-template-payment .config-import .downloadData, .import-template-payment .config-import .standardField,
    .import-template-PTR .config-import .downloadData,
    .import-template-PTR .config-import .standardField {
        width: auto;
        float: none;
        flex: 0 0 50%;
        min-width: 20rem;
    }

    .import-template-payment .config-import .downloadDataHeader,
    .import-template-payment .config-import .standardFieldHeader,
    .import-template-PTR .config-import .downloadDataHeader,
    .import-template-PTR .config-import .standardFieldHeader {
        margin: 0;
    }

        .import-template-payment .config-import .downloadDataHeader p,
        .import-template-payment .config-import .standardFieldHeader p,
        .import-template-PTR .config-import .downloadDataHeader p,
        .import-template-PTR .config-import .standardFieldHeader p {
            margin: 0;
            color: #767F8A;
            font-size: 14px;
            font-weight: 500;
        }

    .import-template-payment .config-import .standardField .standardFieldNames,
    .import-template-PTR .config-import .standardField .standardFieldNames {
        display: flex;
        flex-direction: column;
        gap: 0.37rem;
    }

    .import-template-payment .config-import .standardField .importRowName label,
    .import-template-PTR .config-import .standardField .importRowName label {
        display: flex;
        align-items: center;
    }

    .import-template-payment .config-import .standardField .importRowName .check,
    .import-template-PTR .config-import .standardField .importRowName .check {
        width: 100%;
        padding: 0;
    }

        .import-template-payment .config-import .standardField .importRowName .check .form-check-input,
        .import-template-PTR .config-import .standardField .importRowName .check .form-check-input {
            position: absolute;
            opacity: 0;
            z-index: -1;
        }

            .import-template-payment .config-import .standardField .importRowName .check .form-check-input:checked ~ .checkbox-view,
            .import-template-PTR .config-import .standardField .importRowName .check .form-check-input:checked ~ .checkbox-view {
                background: transparent;
            }

                .import-template-payment .config-import .standardField .importRowName .check .form-check-input:checked ~ .checkbox-view::after,
                .import-template-PTR .config-import .standardField .importRowName .check .form-check-input:checked ~ .checkbox-view::after {
                    opacity: 1;
                }

        .import-template-payment .config-import .standardField .importRowName .check .checkbox-view,
        .import-template-PTR .config-import .standardField .importRowName .check .checkbox-view {
            width: 100%;
            display: block;
            padding-left: 2rem;
            background: transparent;
            color: #464B53;
        }

    .import-template-payment .config-import .standardField .contentRow.defaultColumn,
    .import-template-PTR .config-import .standardField .contentRow.defaultColumn {
        height: 2.3rem;
        position: relative;
        padding: 0;
        display: flex;
        align-items: center;
        line-height: normal;
    }

        .import-template-payment .config-import .standardField .contentRow.defaultColumn:before,
        .import-template-PTR .config-import .standardField .contentRow.defaultColumn:before {
            position: absolute;
            content: "";
            top: -0.25rem;
            width: 100%;
            height: 1px;
            background: #DBDFE4;
        }

    .import-template-payment .config-import .standardField .import-row-name,
    .import-template-PTR .config-import .standardField .import-row-name {
        font-size: 15px;
        color: #464B53;
    }

    .import-template-payment .import-grid-container,
    .import-template-PTR .import-grid-container {
        display: flex;
        flex-direction: column;
    }

    .import-template-payment .import-grid,
    .import-template-PTR .import-grid {
        position: relative;
        padding-top: 0.25rem;
        overflow: hidden;
    }

    .import-template-payment .import-grid__row,
    .import-template-PTR .import-grid__row {
        display: grid;
        grid-template-columns: 2rem 1fr 1fr 3.75rem 1fr;
        align-items: center;
        gap: 1rem;
        padding: 0.5rem 1.5rem;
        border-bottom: 1px solid #e0e0e0;
        color: #32383c;
    }

        .import-template-payment .import-grid__row.error-row,
        .import-template-PTR .import-grid__row.error-row {
            color: #767F8A;
            pointer-events: none;
        }

            .import-template-payment .import-grid__row.error-row:hover,
            .import-template-PTR .import-grid__row.error-row:hover {
                cursor: no-drop;
            }

    .import-template-payment .import-grid__header,
    .import-template-PTR .import-grid__header {
        position: sticky;
        background-color: #EDEFF1;
        z-index: 10;
        transition: all 0.3s ease;
    }

        .import-template-payment .import-grid__header.fixed-header,
        .import-template-PTR .import-grid__header.fixed-header {
            position: fixed;
            background: white;
            z-index: 1000;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
            transition: all 0.3s ease;
            top: 0;
        }

@media (max-width: 992px) {
    .import-template-payment .import-grid__header,
    .import-template-PTR .import-grid__header {
        display: none;
    }
}

.import-template-payment .import-grid__header .grid-cell.period-col,
.import-template-PTR .import-grid__header .grid-cell.period-col {
    flex-direction: row;
    gap: 0;
}

.import-template-payment .import-grid__header .grid-cell.status-col,
.import-template-PTR .import-grid__header .grid-cell.status-col {
    position: relative;
    flex-direction: row;
}

    .import-template-payment .import-grid__header .grid-cell.status-col.is-disabled,
    .import-template-PTR .import-grid__header .grid-cell.status-col.is-disabled {
        display: none;
    }

.import-template-payment .import-grid__header.is-fixed,
.import-template-PTR .import-grid__header.is-fixed {
    left: 0;
    box-shadow: 0 0.25rem 2.125rem 0 rgba(191, 195, 204, 0.3);
}

    .import-template-payment .import-grid__header.is-fixed:before,
    .import-template-PTR .import-grid__header.is-fixed:before {
        content: "";
        position: absolute;
        top: -0.25rem;
        left: 0;
        width: 100%;
        height: 0.25rem;
        background: #fff;
    }

.import-template-payment .import-grid__col-title, .import-template-payment .import-grid__cell-content,
.import-template-PTR .import-grid__col-title,
.import-template-PTR .import-grid__cell-content {
    display: block;
    width: 100%;
    text-align: left;
}

.import-template-payment .import-grid__col-title,
.import-template-PTR .import-grid__col-title {
    font-size: 12px;
    font-weight: 500;
    line-height: 1rem;
    color: #767F8A;
}

.import-template-payment .import-grid__cell,
.import-template-PTR .import-grid__cell {
    padding: 0 !important;
    text-align: left !important;
    font-size: 12px;
}

.import-template-payment .import-grid__sort-button,
.import-template-PTR .import-grid__sort-button {
    display: flex;
    flex-direction: column;
    align-items: baseline;
    padding: 0;
    font-size: 0.7rem;
}

.import-template-payment .loading-spinner,
.import-template-PTR .loading-spinner {
    padding: 0.5rem 1rem;
}

.import-template-payment .grid-pagination,
.import-template-PTR .grid-pagination {
    display: flex;
    justify-content: space-between;
    padding: 1.5rem 1.5rem 1.25rem;
    border-top: 1px solid #DBDFE4;
}

@media (max-width: 768px) {
    .import-template-payment .grid-pagination,
    .import-template-PTR .grid-pagination {
        flex-direction: column-reverse;
        align-items: center;
    }
}

.import-template-payment .grid-pagination__options-filter,
.import-template-PTR .grid-pagination__options-filter {
    width: 100%;
    cursor: pointer;
}

.import-template-payment .grid-pagination__switch:checked + .grid-pagination__options-filter .grid-pagination__select,
.import-template-PTR .grid-pagination__switch:checked + .grid-pagination__options-filter .grid-pagination__select {
    transform: scaleY(1);
    opacity: 1;
}

.import-template-payment .grid-pagination__switch:checked + .grid-pagination__options-filter .grid-pagination__filter:after,
.import-template-PTR .grid-pagination__switch:checked + .grid-pagination__options-filter .grid-pagination__filter:after {
    transform: rotate(0deg);
}

.import-template-payment .grid-pagination__filter,
.import-template-PTR .grid-pagination__filter {
    position: relative;
    display: flex;
    margin-right: 0.75rem;
    padding: 0.35rem 2rem 0.2rem 0.5rem;
    color: #27292C;
    background-color: #fff;
    border-radius: 0.25rem;
    border: 1px solid #CDD3DD;
    font-size: 12px;
    transition: 0.32s;
}

    .import-template-payment .grid-pagination__filter::after,
    .import-template-PTR .grid-pagination__filter::after {
        content: "";
        position: absolute;
        top: 4px;
        right: 0.5rem;
        width: 1rem;
        height: 1rem;
        transform: rotate(180deg);
        transition: 0.3s ease-in-out;
        display: inline-block;
        width: 17px;
        height: 17px;
        background-color: currentColor;
        background-image: none;
        mask-image: url("../img/sprite.svg#icon-arrow-black-down");
    }

.debugUrl .import-template-payment .grid-pagination__filter::after,
.debugUrl .import-template-PTR .grid-pagination__filter::after {
    mask-image: url("/Content/themes/novapay/img/sprite.svg#icon-arrow-black-down");
}

.import-template-payment .grid-pagination__filter::after,
.import-template-PTR .grid-pagination__filter::after {
    mask-repeat: no-repeat;
    mask-size: contain;
}

.import-template-payment .grid-pagination__select,
.import-template-PTR .grid-pagination__select {
    position: absolute;
    bottom: 100%;
    left: 0;
    display: flex;
    flex-direction: column-reverse;
    width: 100%;
    margin-bottom: 5px;
    overflow: hidden;
    transform: scaleY(0);
    transform-origin: bottom;
    opacity: 0;
    transition: 0.22s ease-in-out;
    z-index: 4;
    border: 1px solid #CDD3DD;
    border-radius: 0.25rem;
}

.import-template-payment .grid-pagination__select-option,
.import-template-PTR .grid-pagination__select-option {
    padding: 0.25rem 0.5rem;
    background-color: #fff;
    border-bottom: 1px solid #e9ecef;
    transition: 0.3s;
}

    .import-template-payment .grid-pagination__select-option:first-of-type,
    .import-template-PTR .grid-pagination__select-option:first-of-type {
        border-bottom: 0;
    }

    .import-template-payment .grid-pagination__select-option:hover,
    .import-template-PTR .grid-pagination__select-option:hover {
        background-color: #e9ecef;
    }

.import-template-payment .grid-pagination__selection-summary,
.import-template-PTR .grid-pagination__selection-summary {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: #767F8A;
    font-size: 12px;
}

    .import-template-payment .grid-pagination__selection-summary .active-count,
    .import-template-payment .grid-pagination__selection-summary .active-amount,
    .import-template-payment .grid-pagination__selection-summary .active-count-name,
    .import-template-PTR .grid-pagination__selection-summary .active-count,
    .import-template-PTR .grid-pagination__selection-summary .active-amount,
    .import-template-PTR .grid-pagination__selection-summary .active-count-name {
        font-size: 14px;
        color: #32383c;
    }

    .import-template-payment .grid-pagination__selection-summary .active-count,
    .import-template-PTR .grid-pagination__selection-summary .active-count {
        margin-right: 0.25rem;
        margin-left: 0.5rem;
    }

.import-template-payment .pagination-controls,
.import-template-PTR .pagination-controls {
    display: flex;
    align-items: center;
    color: #767F8A;
}

.import-template-payment .pagination-info,
.import-template-PTR .pagination-info {
    margin-right: 0.75rem;
}

.import-template-payment.imp-content,
.import-template-PTR.imp-content {
    padding: 0;
}

    .import-template-payment.imp-content .imported-list,
    .import-template-PTR.imp-content .imported-list {
        display: flex;
        flex-direction: column;
        border: 1px solid #DBDFE4;
    }

    .import-template-payment.imp-content .imported-list__item,
    .import-template-PTR.imp-content .imported-list__item {
        display: flex;
        height: auto;
        padding: 0 0.75rem;
        border-bottom: 1px solid #DBDFE4;
    }

        .import-template-payment.imp-content .imported-list__item:last-of-type,
        .import-template-PTR.imp-content .imported-list__item:last-of-type {
            border: none;
        }

    .import-template-payment.imp-content .imported-list .item-info,
    .import-template-PTR.imp-content .imported-list .item-info {
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }

.import-template-PTR .import-grid__row {
    grid-template-columns: 2rem 1fr 1fr 1fr 1fr;
}

    .import-template-PTR .import-grid__row.error-row .cell-comment {
        color: #EB4235;
    }

.step-import-done.itemDetails {
    border: none;
}

.step-import-done .itemBlockHeader {
    margin: 0;
}

.step-import-done .download-more-import {
    display: flex;
    width: 100%;
    justify-content: flex-start;
}

.main-content .paymentDetailAdditionalClass .modal-content {
    max-width: none !important;
}

.main-content .paymentDetailAdditionalClass {
    width: 100% !important;
    max-width: 645px !important;
    padding: 0 !important;
}

@media (max-width: 576px) {
    .main-content .paymentDetailAdditionalClass {
        top: 50% !important;
        transform: translate(0%, -50%) !important;
        border-radius: 12px !important;
        height: fit-content;
        width: calc(100% - 32px) !important;
        left: 16px !important;
        min-width: auto !important;
    }
}

.main-content .paymentDetailAdditionalClass .payment-datail {
    position: relative;
}

.main-content .paymentDetailAdditionalClass .payment-datail__header {
    padding: 20px 20px 16px;
    display: flex;
    flex-direction: column;
    border-bottom: 1px solid #DBDFE4;
}

.main-content .paymentDetailAdditionalClass .payment-datail__header-title {
    color: #32383c;
    font-size: 1.5rem;
    font-weight: 600;
    line-height: 24px;
    word-break: break-word;
}

.main-content .paymentDetailAdditionalClass .payment-datail__header-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.main-content .paymentDetailAdditionalClass .payment-datail__header-wrap {
    display: flex;
    align-items: center;
    gap: 16px;
}

@media (max-width: 600px) {
    .main-content .paymentDetailAdditionalClass .payment-datail__header-wrap {
        flex-direction: column;
        align-items: flex-start;
    }
}

.main-content .paymentDetailAdditionalClass .payment-datail__header-info {
    margin: 10px 0 16px;
    display: flex;
    gap: 20px;
    align-items: center;
}

    .main-content .paymentDetailAdditionalClass .payment-datail__header-info .payment-status {
        width: auto;
        min-width: 7.563rem;
    }

.main-content .paymentDetailAdditionalClass .payment-datail__header-name {
    display: flex;
    color: #464B53;
    flex-direction: column;
    font-size: 12px;
    font-style: normal;
    font-weight: 500;
}

.main-content .paymentDetailAdditionalClass .payment-datail__header-create {
    display: flex;
    gap: 3px;
    color: #767F8A;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
}

@media (max-width: 540px) {
    .main-content .paymentDetailAdditionalClass .payment-datail__header-create {
        display: none;
    }
}

.main-content .paymentDetailAdditionalClass .payment-datail__header-data {
    color: #464B53;
    font-family: "Fixel Text", "Fixel Display", "Helvetica", "Arial", sans-serif;
    font-size: 12px;
    font-style: normal;
    font-weight: 500;
    line-height: 16px;
}

.main-content .paymentDetailAdditionalClass .payment-datail__close {
    padding: 6px;
    background: #F1F2F4;
}

.main-content .paymentDetailAdditionalClass .payment-datail .label-text {
    color: #767F8A;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 18px;
}

.main-content .paymentDetailAdditionalClass .payment-datail .title {
    color: #32383c;
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: 20px;
}

.main-content .paymentDetailAdditionalClass .payment-datail__notification {
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px;
    margin-left: 3px;
    border-radius: 0 4px 4px 0;
    border: 1px solid #F1AEAB;
    background: #FFEBEA;
}

    .main-content .paymentDetailAdditionalClass .payment-datail__notification:before {
        position: absolute;
        content: "";
        top: 0;
        height: 100%;
        left: -3px;
        border-radius: 4px 0px 0px 4px;
        width: 6px;
        background: #EB4235;
    }

.main-content .paymentDetailAdditionalClass .payment-datail__notification-title {
    color: #C6261A;
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: 18px;
}

.main-content .paymentDetailAdditionalClass .payment-datail__notification .ico-n {
    width: 20px;
    height: 20px;
}

.main-content .paymentDetailAdditionalClass .payment-datail .paymentDatailMain {
    padding: 18px 20px 45px;
    overflow-y: auto;
    height: 65vh;
}

    .main-content .paymentDetailAdditionalClass .payment-datail .paymentDatailMain .payment-datail__money {
        margin-bottom: 24px;
    }

    .main-content .paymentDetailAdditionalClass .payment-datail .paymentDatailMain .payment-datail__money-label {
        margin-bottom: 4px;
        color: #767F8A;
        font-size: 12px;
        font-style: normal;
        font-weight: 400;
        line-height: 16px;
    }

    .main-content .paymentDetailAdditionalClass .payment-datail .paymentDatailMain .payment-datail__money-sum span:nth-child(2),
    .main-content .paymentDetailAdditionalClass .payment-datail .paymentDatailMain .payment-datail__money-sum span:nth-child(3) {
        font-size: 17px;
        font-weight: 500;
    }

    .main-content .paymentDetailAdditionalClass .payment-datail .paymentDatailMain .payment-datail__sender {
        margin-top: 16px;
        display: flex;
        flex-direction: column;
        gap: 20px;
        padding: 16px;
        border-radius: 8px;
        background: #f4f6f7;
    }

    .main-content .paymentDetailAdditionalClass .payment-datail .paymentDatailMain .payment-datail__sender-title {
        color: #32383c;
        font-size: 16px;
        font-weight: 600;
        line-height: 20px;
    }

    .main-content .paymentDetailAdditionalClass .payment-datail .paymentDatailMain .payment-datail__sender-label {
        margin-bottom: 4px;
        color: #767F8A;
        font-size: 12px;
        line-height: 16px;
    }

    .main-content .paymentDetailAdditionalClass .payment-datail .paymentDatailMain .payment-datail__sender-description {
        color: #464B53;
        font-size: 14px;
        font-weight: 500;
        line-height: 18px;
    }

    .main-content .paymentDetailAdditionalClass .payment-datail .paymentDatailMain .payment-datail__sender-row {
        display: flex;
        align-items: center;
        gap: 20px;
    }

@media (max-width: 600px) {
    .main-content .paymentDetailAdditionalClass .payment-datail .paymentDatailMain .payment-datail__sender-row {
        flex-direction: column;
        align-items: flex-start;
    }
}

.main-content .paymentDetailAdditionalClass .payment-datail .paymentDatailMain .payment-datail__sender-info {
    display: flex;
    flex-direction: column;
    min-width: 240px;
}

.main-content .paymentDetailAdditionalClass .payment-datail .paymentDatailMain .payment-datail__receiver {
    margin-top: 16px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    border: solid 1px #DBDFE4;
    border-radius: 8px;
    padding-bottom: 16px;
}

.main-content .paymentDetailAdditionalClass .payment-datail .paymentDatailMain .payment-datail__receiver-wrap {
    background: #f4f6f7;
    gap: 20px;
    display: flex;
    padding: 16px;
    flex-direction: column;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
}

.main-content .paymentDetailAdditionalClass .payment-datail .paymentDatailMain .payment-datail__receiver-title {
    color: #32383c;
    font-size: 16px;
    font-weight: 600;
    line-height: 20px;
}

.main-content .paymentDetailAdditionalClass .payment-datail .paymentDatailMain .payment-datail__receiver-label {
    margin-bottom: 4px;
    color: #767F8A;
    font-size: 12px;
    line-height: 16px;
}

.main-content .paymentDetailAdditionalClass .payment-datail .paymentDatailMain .payment-datail__receiver-description {
    color: #464B53;
    font-size: 14px;
    font-weight: 500;
    line-height: 18px;
}

.main-content .paymentDetailAdditionalClass .payment-datail .paymentDatailMain .payment-datail__receiver-row {
    display: flex;
    align-items: center;
    gap: 20px;
}

@media (max-width: 600px) {
    .main-content .paymentDetailAdditionalClass .payment-datail .paymentDatailMain .payment-datail__receiver-row {
        flex-direction: column;
        align-items: flex-start;
    }
}

.main-content .paymentDetailAdditionalClass .payment-datail .paymentDatailMain .payment-datail__receiver-info {
    display: flex;
    flex-direction: column;
    min-width: 240px;
}

.main-content .paymentDetailAdditionalClass .payment-datail .paymentDatailMain .payment-datail__receiver-appointment {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 0 16px 16px;
    gap: 4px;
}

    .main-content .paymentDetailAdditionalClass .payment-datail .paymentDatailMain .payment-datail__receiver-appointment:not(:last-of-type)::after {
        position: absolute;
        height: 1px;
        content: "";
        background: #EDEFF1;
        width: calc(100% - 32px);
        left: 16px;
        bottom: 0px;
    }

.main-content .paymentDetailAdditionalClass .payment-datail .paymentDatailMain .payment-datail__receiver-text {
    color: #464B53;
    font-size: 14px;
    line-height: 18px;
    font-weight: 400;
}

.main-content .paymentDetailAdditionalClass .payment-datail .paymentDatailMain .payment-datail__receiver-taxes {
    display: flex;
    flex-direction: column;
    gap: 20px;
    position: relative;
}

    .main-content .paymentDetailAdditionalClass .payment-datail .paymentDatailMain .payment-datail__receiver-taxes:not(:last-of-type)::after {
        position: absolute;
        height: 1px;
        content: "";
        background: #EDEFF1;
        width: calc(100% - 32px);
        left: 16px;
        bottom: 0px;
    }

.main-content .paymentDetailAdditionalClass .payment-datail .paymentDatailMain .payment-datail__receiver-line {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 0 16px;
}

@media (max-width: 700px) {
    .main-content .paymentDetailAdditionalClass .payment-datail .paymentDatailMain .payment-datail__receiver-line {
        flex-wrap: wrap;
    }
}

@media (max-width: 479px) {
    .main-content .paymentDetailAdditionalClass .payment-datail .paymentDatailMain .payment-datail__tooltip {
        transform: translateX(-66%);
        width: 210px !important;
        min-width: min-content;
    }
}

.main-content .paymentDetailAdditionalClass .payment-datail .paymentDatailMain .payment-datail__tooltip-status {
    position: relative;
    color: #690DD3;
}

    .main-content .paymentDetailAdditionalClass .payment-datail .paymentDatailMain .payment-datail__tooltip-status .tooltip-text {
        top: -40px;
        bottom: inherit;
    }

    .main-content .paymentDetailAdditionalClass .payment-datail .paymentDatailMain .payment-datail__tooltip-status i {
        width: 14px;
        height: 14px;
        position: absolute;
        top: -5px;
    }

    .main-content .paymentDetailAdditionalClass .payment-datail .paymentDatailMain .payment-datail__tooltip-status::after {
        position: absolute;
        content: "";
        width: 90px;
        height: 22px;
        right: 0;
    }

.main-content .paymentDetailAdditionalClass .payment-datail .paymentDatailMain .payment-datail__history {
    margin-top: 32px;
    padding: 32px 0;
    border-top: 1px solid #EDEFF1;
    border-bottom: 1px solid #EDEFF1;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.main-content .paymentDetailAdditionalClass .payment-datail .paymentDatailMain .payment-datail__history-title {
    margin-bottom: 24px;
}

.main-content .paymentDetailAdditionalClass .payment-datail .paymentDatailMain .payment-datail__history-row {
    display: flex;
    gap: 14px;
    align-items: flex-start;
}

    .main-content .paymentDetailAdditionalClass .payment-datail .paymentDatailMain .payment-datail__history-row:last-child .payment-datail__history-status,
    .main-content .paymentDetailAdditionalClass .payment-datail .paymentDatailMain .payment-datail__history-row:last-child .payment-datail__history-system, .main-content .paymentDetailAdditionalClass .payment-datail .paymentDatailMain .payment-datail__history-row:last-child .payment-datail__history-data {
        color: #32383c;
        font-weight: 500;
    }

.main-content .paymentDetailAdditionalClass .payment-datail .paymentDatailMain .payment-datail__history-data {
    width: 178px;
    min-width: 132px;
}

.main-content .paymentDetailAdditionalClass .payment-datail .paymentDatailMain .payment-datail__history-items {
    width: 100%;
    display: flex;
    gap: 12px;
}

.main-content .paymentDetailAdditionalClass .payment-datail .paymentDatailMain .payment-datail__history-status {
    position: relative;
    width: 37%;
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    color: #767F8A;
    display: flex;
}

@media (max-width: 540px) {
    .main-content .paymentDetailAdditionalClass .payment-datail .paymentDatailMain .payment-datail__history-status {
        width: 100%;
    }
}

.main-content .paymentDetailAdditionalClass .payment-datail .paymentDatailMain .payment-datail__history-system {
    max-width: 40%;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
}

@media (max-width: 540px) {
    .main-content .paymentDetailAdditionalClass .payment-datail .paymentDatailMain .payment-datail__history-system {
        display: none;
    }
}

.main-content .paymentDetailAdditionalClass .payment-datail .paymentDatailMain .payment-datail__visa {
    margin-top: 32px;
}

.main-content .paymentDetailAdditionalClass .payment-datail .paymentDatailMain .payment-datail__visa-title {
    margin-bottom: 24px;
}

.main-content .paymentDetailAdditionalClass .payment-datail .paymentDatailMain .payment-datail__visa-wraper {
    position: relative;
}

.main-content .paymentDetailAdditionalClass .payment-datail .paymentDatailMain .payment-datail__visa-wrap {
    padding-top: 16px;
    border-bottom: 1px solid #EDEFF1;
}

.main-content .paymentDetailAdditionalClass .payment-datail .paymentDatailMain .payment-datail__visa-subtitle {
    color: #464B53;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 18px;
    display: flex;
    align-items: center;
}

.main-content .paymentDetailAdditionalClass .payment-datail .paymentDatailMain .payment-datail__visa-icon {
    width: 20px;
    height: 20px;
    margin-right: 8px;
}

@media (max-width: 479px) {
    .main-content .paymentDetailAdditionalClass .payment-datail .paymentDatailMain .payment-datail__visa-data {
        margin-left: 28px;
    }
}

.main-content .paymentDetailAdditionalClass .payment-datail .paymentDatailMain .payment-datail__visa-row {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
}

@media (max-width: 479px) {
    .main-content .paymentDetailAdditionalClass .payment-datail .paymentDatailMain .payment-datail__visa-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }
}

.main-content .paymentDetailAdditionalClass .payment-datail .paymentDatailMain .payment-datail__visa-info {
    margin-top: -20px;
    margin-bottom: 24px;
    margin-left: 28px;
    color: #767F8A;
    text-overflow: ellipsis;
    font-family: "Fixel Text", "Fixel Display", "Helvetica", "Arial", sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 18px;
}

.main-content .paymentDetailAdditionalClass .payment-datail .paymentDatailMain .payment-datail__visa-IDkey {
    margin: 8px 0 16px;
}

.main-content .paymentDetailAdditionalClass .payment-datail .paymentDatailMain .payment-datail__visa-sistem {
    display: flex;
    max-width: 350px;
    gap: 24px;
    align-items: center;
    margin-bottom: 24px;
}

.main-content .paymentDetailAdditionalClass .payment-datail .paymentDatailMain .payment-datail__tracking {
    margin-top: 32px;
    border-top: 1px solid #EDEFF1;
    padding: 32px 0 20px;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.main-content .paymentDetailAdditionalClass .payment-datail .paymentDatailMain .payment-datail__tracking-title {
    display: flex;
    align-items: center;
    gap: 8px;
}

.main-content .paymentDetailAdditionalClass .payment-datail .paymentDatailMain .payment-datail__UETR-title {
    color: #767F8A;
    text-overflow: ellipsis;
    font-family: "Fixel Text", "Fixel Display", "Helvetica", "Arial", sans-serif;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 16px;
    margin-bottom: 4px;
}

.main-content .paymentDetailAdditionalClass .payment-datail .paymentDatailMain .payment-datail__UETR-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
}

.main-content .paymentDetailAdditionalClass .payment-datail .paymentDatailMain .payment-datail__UETR-text {
    overflow: hidden;
    color: #32383c;
    text-overflow: ellipsis;
    font-family: "Fixel Text", "Fixel Display", "Helvetica", "Arial", sans-serif;
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: 18px;
}

.main-content .paymentDetailAdditionalClass .payment-datail .paymentDatailMain .payment-datail__UETR .btn-coppy {
    padding: 0;
}

    .main-content .paymentDetailAdditionalClass .payment-datail .paymentDatailMain .payment-datail__UETR .btn-coppy i {
        background: url("../img/newDesign/icon/icon-account-copy-hover.svg") no-repeat center;
    }

.debugUrl .main-content .paymentDetailAdditionalClass .payment-datail .paymentDatailMain .payment-datail__UETR .btn-coppy i {
    background: url("/Content/themes/novapay/img/newDesign/icon/icon-account-copy-hover.svg") no-repeat center;
}

.main-content .paymentDetailAdditionalClass .payment-datail .paymentDatailMain .payment-datail__UETR-sep {
    cursor: pointer;
    color: #690DD3;
    font-family: "Fixel Text", "Fixel Display", "Helvetica", "Arial", sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: 20px;
    text-decoration-line: underline;
    text-decoration-style: solid;
    text-decoration-skip-ink: none;
    text-decoration-thickness: auto;
    text-underline-offset: auto;
    text-underline-position: from-font;
}

.main-content .paymentDetailAdditionalClass .payment-datail .paymentDatailMain .payment-datail__ob-notification {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 24px;
}

.main-content .paymentDetailAdditionalClass .payment-datail .paymentDatailMain .payment-datail__ob-notification-wrap {
    min-width: 28px;
    border-radius: 50%;
    height: 28px;
    background: #F5EDFF;
    display: flex;
    align-items: center;
    justify-content: center;
}

.main-content .paymentDetailAdditionalClass .payment-datail .paymentDatailMain .payment-datail__ob-notification-icon {
    width: 20px;
    height: 20px;
    background: #690DD3;
}

.main-content .paymentDetailAdditionalClass .payment-datail .paymentDatailMain .payment-datail__tooltip-tracking {
    color: #690DD3;
}

.main-content .paymentDetailAdditionalClass .payment-datail .paymentDatailMain .payment-datail__tooltip-text {
    font-weight: 400;
    min-width: auto;
    width: 320px;
    transform: translateX(-15%);
}

    .main-content .paymentDetailAdditionalClass .payment-datail .paymentDatailMain .payment-datail__tooltip-text:after {
        left: calc(100% - (84% + 14px));
    }

@media (max-width: 479px) {
    .main-content .paymentDetailAdditionalClass .payment-datail .paymentDatailMain .payment-datail__tooltip-text:after {
        left: calc(100% - (70% + 14px));
    }
}

@media (max-width: 479px) {
    .main-content .paymentDetailAdditionalClass .payment-datail .paymentDatailMain .payment-datail__tooltip-text {
        width: 280px;
        left: -40px;
    }
}

.main-content .paymentDetailAdditionalClass .payment-datail .visaIsError {
    border-left: 6px solid #EB4235;
    padding-left: 6px;
    border-radius: 6px;
    margin-left: -10px;
    border-bottom: solid 1px #EB4235 !important;
    margin-bottom: 10px;
}

.main-content .paymentDetailAdditionalClass .payment-datail .errorNotify {
    display: flex;
    align-items: center;
    gap: 8px;
    position: absolute;
    bottom: 0;
    justify-content: center;
    width: 100%;
}

    .main-content .paymentDetailAdditionalClass .payment-datail .errorNotify p {
        color: #EB4235;
        font-size: 12px;
        font-weight: 600;
    }

.main-content .paymentDetailAdditionalClass .payment-datail__footer {
    position: relative;
    height: 68px;
    display: flex;
    justify-content: flex-start;
    padding: 12px 24px 16px;
    border-top: 1px solid #DBDFE4;
    box-shadow: 0 4px 34px rgba(191, 195, 204, 0.3);
}

    .main-content .paymentDetailAdditionalClass .payment-datail__footer .scroll-shadow-left,
    .main-content .paymentDetailAdditionalClass .payment-datail__footer .scroll-shadow-right {
        position: absolute;
        top: 0;
        bottom: 0;
        width: 100px;
        pointer-events: none;
        z-index: 3;
        opacity: 0;
        transition: opacity 0.2s ease;
    }

    .main-content .paymentDetailAdditionalClass .payment-datail__footer .scroll-shadow-left {
        left: 0;
        border-bottom-left-radius: 20%;
        background: linear-gradient(270deg, rgba(255, 255, 255, 0) -3.85%, #FFF 100%);
    }

    .main-content .paymentDetailAdditionalClass .payment-datail__footer .scroll-shadow-right {
        right: 0;
        border-bottom-right-radius: 20%;
        background: linear-gradient(270deg, #FFF -3.85%, rgba(255, 255, 255, 0) 100%);
    }

    .main-content .paymentDetailAdditionalClass .payment-datail__footer.after .scroll-shadow-left,
    .main-content .paymentDetailAdditionalClass .payment-datail__footer.after .scroll-shadow-right {
        opacity: 1;
    }

    .main-content .paymentDetailAdditionalClass .payment-datail__footer .scroll-left.hidden ~ .scroll-shadow-left {
        opacity: 0 !important;
    }

    .main-content .paymentDetailAdditionalClass .payment-datail__footer .scroll-right.hidden ~ .scroll-shadow-right {
        opacity: 0 !important;
    }

    .main-content .paymentDetailAdditionalClass .payment-datail__footer .scroll-btn {
        position: absolute;
        background: rgba(32, 36, 39, 0.5);
        width: 32px;
        height: 32px;
        border-radius: 50%;
        top: 15.5px;
        z-index: 4;
    }

    .main-content .paymentDetailAdditionalClass .payment-datail__footer .scroll-left {
        left: 10px;
    }

    .main-content .paymentDetailAdditionalClass .payment-datail__footer .scroll-right {
        right: 10px;
        transform: rotate(180deg);
    }

    .main-content .paymentDetailAdditionalClass .payment-datail__footer .icon-Scroll-Button {
        width: 20px;
        height: 20px;
        color: white;
    }

.main-content .paymentDetailAdditionalClass .payment-datail__footer-wrap {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    gap: 12px;
    justify-content: flex-start;
    -ms-overflow-style: none;
    scrollbar-width: none;
}

    .main-content .paymentDetailAdditionalClass .payment-datail__footer-wrap::-webkit-scrollbar {
        display: none;
    }

.main-content .paymentDetailAdditionalClass .payment-datail__footer-action {
    flex: 0 0 auto;
    min-width: 140px;
    white-space: nowrap;
    display: flex;
    gap: 8px;
    height: 39px;
}

    .main-content .paymentDetailAdditionalClass .payment-datail__footer-action i {
        width: 20px;
        height: 20px;
    }

.payment-datail__footer .btn-cancel-small {
    max-width: 40px;
    padding: 0;
    min-width: 40px;
}

.modalDetailAdditionalClass {
    padding: 20px 20px 16px !important;
}

@media (max-width: 576px) {
    .modalDetailAdditionalClass {
        top: 50% !important;
        transform: translate(0%, -50%) !important;
        border-radius: 12px !important;
        height: fit-content;
        width: calc(100% - 32px) !important;
        left: 16px !important;
        min-width: auto !important;
    }
}

.modalDetailAdditionalClass .modal-content {
    max-width: 100% !important;
    width: 520px;
}

    .modalDetailAdditionalClass .modal-content .delete-payment-detail .delete-deatil__header,
    .modalDetailAdditionalClass .modal-content .delete-payment-detail .download-deatil__header,
    .modalDetailAdditionalClass .modal-content .delete-payment-detail .rejected__header,
    .modalDetailAdditionalClass .modal-content .download-payment-detail .delete-deatil__header,
    .modalDetailAdditionalClass .modal-content .download-payment-detail .download-deatil__header,
    .modalDetailAdditionalClass .modal-content .download-payment-detail .rejected__header,
    .modalDetailAdditionalClass .modal-content .rejected-payment .delete-deatil__header,
    .modalDetailAdditionalClass .modal-content .rejected-payment .download-deatil__header,
    .modalDetailAdditionalClass .modal-content .rejected-payment .rejected__header {
        display: flex;
        justify-content: space-between;
        color: #32383c;
        font-size: 1.25rem;
        font-weight: 500;
    }

    .modalDetailAdditionalClass .modal-content .delete-payment-detail .delete-deatil__close,
    .modalDetailAdditionalClass .modal-content .delete-payment-detail .download-deatil__close,
    .modalDetailAdditionalClass .modal-content .delete-payment-detail .rejected__close,
    .modalDetailAdditionalClass .modal-content .download-payment-detail .delete-deatil__close,
    .modalDetailAdditionalClass .modal-content .download-payment-detail .download-deatil__close,
    .modalDetailAdditionalClass .modal-content .download-payment-detail .rejected__close,
    .modalDetailAdditionalClass .modal-content .rejected-payment .delete-deatil__close,
    .modalDetailAdditionalClass .modal-content .rejected-payment .download-deatil__close,
    .modalDetailAdditionalClass .modal-content .rejected-payment .rejected__close {
        margin-right: -6px;
    }

    .modalDetailAdditionalClass .modal-content .delete-payment-detail .delete-deatil__message,
    .modalDetailAdditionalClass .modal-content .delete-payment-detail .download-deatil__message,
    .modalDetailAdditionalClass .modal-content .delete-payment-detail .rejected__message,
    .modalDetailAdditionalClass .modal-content .download-payment-detail .delete-deatil__message,
    .modalDetailAdditionalClass .modal-content .download-payment-detail .download-deatil__message,
    .modalDetailAdditionalClass .modal-content .download-payment-detail .rejected__message,
    .modalDetailAdditionalClass .modal-content .rejected-payment .delete-deatil__message,
    .modalDetailAdditionalClass .modal-content .rejected-payment .download-deatil__message,
    .modalDetailAdditionalClass .modal-content .rejected-payment .rejected__message {
        padding: 20px 0 16px;
        color: #32383c;
        font-size: 15px;
        font-weight: normal;
        line-height: 1.5rem;
    }

    .modalDetailAdditionalClass .modal-content .delete-payment-detail .delete-deatil__lable-text,
    .modalDetailAdditionalClass .modal-content .delete-payment-detail .download-deatil__lable-text,
    .modalDetailAdditionalClass .modal-content .delete-payment-detail .rejected__lable-text,
    .modalDetailAdditionalClass .modal-content .download-payment-detail .delete-deatil__lable-text,
    .modalDetailAdditionalClass .modal-content .download-payment-detail .download-deatil__lable-text,
    .modalDetailAdditionalClass .modal-content .download-payment-detail .rejected__lable-text,
    .modalDetailAdditionalClass .modal-content .rejected-payment .delete-deatil__lable-text,
    .modalDetailAdditionalClass .modal-content .rejected-payment .download-deatil__lable-text,
    .modalDetailAdditionalClass .modal-content .rejected-payment .rejected__lable-text {
        margin-left: 30px;
        width: fit-content;
        color: #32383c;
        font-family: "Fixel Text", "Fixel Display", "Helvetica", "Arial", sans-serif;
        font-weight: 400;
        font-size: 14px;
        line-height: 18px;
    }

        .modalDetailAdditionalClass .modal-content .delete-payment-detail .delete-deatil__lable-text::before, .modalDetailAdditionalClass .modal-content .delete-payment-detail .delete-deatil__lable-text::after,
        .modalDetailAdditionalClass .modal-content .delete-payment-detail .download-deatil__lable-text::before,
        .modalDetailAdditionalClass .modal-content .delete-payment-detail .download-deatil__lable-text::after,
        .modalDetailAdditionalClass .modal-content .delete-payment-detail .rejected__lable-text::before,
        .modalDetailAdditionalClass .modal-content .delete-payment-detail .rejected__lable-text::after,
        .modalDetailAdditionalClass .modal-content .download-payment-detail .delete-deatil__lable-text::before,
        .modalDetailAdditionalClass .modal-content .download-payment-detail .delete-deatil__lable-text::after,
        .modalDetailAdditionalClass .modal-content .download-payment-detail .download-deatil__lable-text::before,
        .modalDetailAdditionalClass .modal-content .download-payment-detail .download-deatil__lable-text::after,
        .modalDetailAdditionalClass .modal-content .download-payment-detail .rejected__lable-text::before,
        .modalDetailAdditionalClass .modal-content .download-payment-detail .rejected__lable-text::after,
        .modalDetailAdditionalClass .modal-content .rejected-payment .delete-deatil__lable-text::before,
        .modalDetailAdditionalClass .modal-content .rejected-payment .delete-deatil__lable-text::after,
        .modalDetailAdditionalClass .modal-content .rejected-payment .download-deatil__lable-text::before,
        .modalDetailAdditionalClass .modal-content .rejected-payment .download-deatil__lable-text::after,
        .modalDetailAdditionalClass .modal-content .rejected-payment .rejected__lable-text::before,
        .modalDetailAdditionalClass .modal-content .rejected-payment .rejected__lable-text::after {
            transform: translateY(-48%) !important;
        }

    .modalDetailAdditionalClass .modal-content .delete-payment-detail .delete-deatil .tooltip-text,
    .modalDetailAdditionalClass .modal-content .delete-payment-detail .download-deatil .tooltip-text,
    .modalDetailAdditionalClass .modal-content .delete-payment-detail .rejected .tooltip-text,
    .modalDetailAdditionalClass .modal-content .download-payment-detail .delete-deatil .tooltip-text,
    .modalDetailAdditionalClass .modal-content .download-payment-detail .download-deatil .tooltip-text,
    .modalDetailAdditionalClass .modal-content .download-payment-detail .rejected .tooltip-text,
    .modalDetailAdditionalClass .modal-content .rejected-payment .delete-deatil .tooltip-text,
    .modalDetailAdditionalClass .modal-content .rejected-payment .download-deatil .tooltip-text,
    .modalDetailAdditionalClass .modal-content .rejected-payment .rejected .tooltip-text {
        color: #FFF;
        text-align: center;
        font-family: "Fixel Text", "Fixel Display", "Helvetica", "Arial", sans-serif;
        font-size: 11px;
        font-style: normal;
        font-weight: 400;
        line-height: 12px;
    }

    .modalDetailAdditionalClass .modal-content .delete-payment-detail .delete-deatil #exportt-tooltip::after,
    .modalDetailAdditionalClass .modal-content .delete-payment-detail .download-deatil #exportt-tooltip::after,
    .modalDetailAdditionalClass .modal-content .delete-payment-detail .rejected #exportt-tooltip::after,
    .modalDetailAdditionalClass .modal-content .download-payment-detail .delete-deatil #exportt-tooltip::after,
    .modalDetailAdditionalClass .modal-content .download-payment-detail .download-deatil #exportt-tooltip::after,
    .modalDetailAdditionalClass .modal-content .download-payment-detail .rejected #exportt-tooltip::after,
    .modalDetailAdditionalClass .modal-content .rejected-payment .delete-deatil #exportt-tooltip::after,
    .modalDetailAdditionalClass .modal-content .rejected-payment .download-deatil #exportt-tooltip::after,
    .modalDetailAdditionalClass .modal-content .rejected-payment .rejected #exportt-tooltip::after {
        left: calc(100% - (50% + 8px)) !important;
    }

@media (max-width: 480px) {
    .modalDetailAdditionalClass .modal-content .delete-payment-detail .delete-deatil #exportt-tooltip::after,
    .modalDetailAdditionalClass .modal-content .delete-payment-detail .download-deatil #exportt-tooltip::after,
    .modalDetailAdditionalClass .modal-content .delete-payment-detail .rejected #exportt-tooltip::after,
    .modalDetailAdditionalClass .modal-content .download-payment-detail .delete-deatil #exportt-tooltip::after,
    .modalDetailAdditionalClass .modal-content .download-payment-detail .download-deatil #exportt-tooltip::after,
    .modalDetailAdditionalClass .modal-content .download-payment-detail .rejected #exportt-tooltip::after,
    .modalDetailAdditionalClass .modal-content .rejected-payment .delete-deatil #exportt-tooltip::after,
    .modalDetailAdditionalClass .modal-content .rejected-payment .download-deatil #exportt-tooltip::after,
    .modalDetailAdditionalClass .modal-content .rejected-payment .rejected #exportt-tooltip::after {
        left: calc(100% - (77% + 14px)) !important;
    }
}

.modalDetailAdditionalClass .modal-content .delete-payment-detail .delete-deatil__control-wrap,
.modalDetailAdditionalClass .modal-content .delete-payment-detail .download-deatil__control-wrap,
.modalDetailAdditionalClass .modal-content .delete-payment-detail .rejected__control-wrap,
.modalDetailAdditionalClass .modal-content .download-payment-detail .delete-deatil__control-wrap,
.modalDetailAdditionalClass .modal-content .download-payment-detail .download-deatil__control-wrap,
.modalDetailAdditionalClass .modal-content .download-payment-detail .rejected__control-wrap,
.modalDetailAdditionalClass .modal-content .rejected-payment .delete-deatil__control-wrap,
.modalDetailAdditionalClass .modal-content .rejected-payment .download-deatil__control-wrap,
.modalDetailAdditionalClass .modal-content .rejected-payment .rejected__control-wrap {
    padding: 0 0 4px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    border-bottom: 1px solid #DBDFE4;
}

.modalDetailAdditionalClass .modal-content .delete-payment-detail .delete-deatil__control-row,
.modalDetailAdditionalClass .modal-content .delete-payment-detail .download-deatil__control-row,
.modalDetailAdditionalClass .modal-content .delete-payment-detail .rejected__control-row,
.modalDetailAdditionalClass .modal-content .download-payment-detail .delete-deatil__control-row,
.modalDetailAdditionalClass .modal-content .download-payment-detail .download-deatil__control-row,
.modalDetailAdditionalClass .modal-content .download-payment-detail .rejected__control-row,
.modalDetailAdditionalClass .modal-content .rejected-payment .delete-deatil__control-row,
.modalDetailAdditionalClass .modal-content .rejected-payment .download-deatil__control-row,
.modalDetailAdditionalClass .modal-content .rejected-payment .rejected__control-row {
    margin-bottom: 16px;
}

.modalDetailAdditionalClass .modal-content .delete-payment-detail .delete-deatil__tooltip .icon-info-new,
.modalDetailAdditionalClass .modal-content .delete-payment-detail .download-deatil__tooltip .icon-info-new,
.modalDetailAdditionalClass .modal-content .delete-payment-detail .rejected__tooltip .icon-info-new,
.modalDetailAdditionalClass .modal-content .download-payment-detail .delete-deatil__tooltip .icon-info-new,
.modalDetailAdditionalClass .modal-content .download-payment-detail .download-deatil__tooltip .icon-info-new,
.modalDetailAdditionalClass .modal-content .download-payment-detail .rejected__tooltip .icon-info-new,
.modalDetailAdditionalClass .modal-content .rejected-payment .delete-deatil__tooltip .icon-info-new,
.modalDetailAdditionalClass .modal-content .rejected-payment .download-deatil__tooltip .icon-info-new,
.modalDetailAdditionalClass .modal-content .rejected-payment .rejected__tooltip .icon-info-new {
    background-color: #690DD3 !important;
}

.modalDetailAdditionalClass .modal-content .delete-payment-detail .delete-deatil__action,
.modalDetailAdditionalClass .modal-content .delete-payment-detail .download-deatil__action,
.modalDetailAdditionalClass .modal-content .delete-payment-detail .rejected__action,
.modalDetailAdditionalClass .modal-content .download-payment-detail .delete-deatil__action,
.modalDetailAdditionalClass .modal-content .download-payment-detail .download-deatil__action,
.modalDetailAdditionalClass .modal-content .download-payment-detail .rejected__action,
.modalDetailAdditionalClass .modal-content .rejected-payment .delete-deatil__action,
.modalDetailAdditionalClass .modal-content .rejected-payment .download-deatil__action,
.modalDetailAdditionalClass .modal-content .rejected-payment .rejected__action {
    display: flex;
    gap: 1rem;
    justify-content: flex-end;
    margin-top: 1.25rem;
    flex-wrap: wrap;
}

.modalDetailAdditionalClass .modal-content .delete-payment-detail .delete-deatil__action-delete,
.modalDetailAdditionalClass .modal-content .delete-payment-detail .download-deatil__action-delete,
.modalDetailAdditionalClass .modal-content .delete-payment-detail .rejected__action-delete,
.modalDetailAdditionalClass .modal-content .download-payment-detail .delete-deatil__action-delete,
.modalDetailAdditionalClass .modal-content .download-payment-detail .download-deatil__action-delete,
.modalDetailAdditionalClass .modal-content .download-payment-detail .rejected__action-delete,
.modalDetailAdditionalClass .modal-content .rejected-payment .delete-deatil__action-delete,
.modalDetailAdditionalClass .modal-content .rejected-payment .download-deatil__action-delete,
.modalDetailAdditionalClass .modal-content .rejected-payment .rejected__action-delete {
    padding: 0.5rem 0.75rem;
    border: 1px solid #EB4235;
    background-color: #FFEEE2;
    color: #EB4235;
    font-weight: 500;
}

.modalDetailAdditionalClass .modal-content .delete-payment-detail .delete-deatil__action-save,
.modalDetailAdditionalClass .modal-content .delete-payment-detail .download-deatil__action-save,
.modalDetailAdditionalClass .modal-content .delete-payment-detail .rejected__action-save,
.modalDetailAdditionalClass .modal-content .download-payment-detail .delete-deatil__action-save,
.modalDetailAdditionalClass .modal-content .download-payment-detail .download-deatil__action-save,
.modalDetailAdditionalClass .modal-content .download-payment-detail .rejected__action-save,
.modalDetailAdditionalClass .modal-content .rejected-payment .delete-deatil__action-save,
.modalDetailAdditionalClass .modal-content .rejected-payment .download-deatil__action-save,
.modalDetailAdditionalClass .modal-content .rejected-payment .rejected__action-save {
    padding: 0.5rem 0.75rem;
    font-weight: 500;
}

.modalDetailAdditionalClass .modal-content .delete-payment-detail .delete-deatil__action-format,
.modalDetailAdditionalClass .modal-content .delete-payment-detail .download-deatil__action-format,
.modalDetailAdditionalClass .modal-content .delete-payment-detail .rejected__action-format,
.modalDetailAdditionalClass .modal-content .download-payment-detail .delete-deatil__action-format,
.modalDetailAdditionalClass .modal-content .download-payment-detail .download-deatil__action-format,
.modalDetailAdditionalClass .modal-content .download-payment-detail .rejected__action-format,
.modalDetailAdditionalClass .modal-content .rejected-payment .delete-deatil__action-format,
.modalDetailAdditionalClass .modal-content .rejected-payment .download-deatil__action-format,
.modalDetailAdditionalClass .modal-content .rejected-payment .rejected__action-format {
    height: 36px;
    width: 58px;
    text-transform: uppercase;
}

.modalDetailAdditionalClass .modal-content .delete-payment-detail .delete-deatil__border,
.modalDetailAdditionalClass .modal-content .delete-payment-detail .download-deatil__border,
.modalDetailAdditionalClass .modal-content .delete-payment-detail .rejected__border,
.modalDetailAdditionalClass .modal-content .download-payment-detail .delete-deatil__border,
.modalDetailAdditionalClass .modal-content .download-payment-detail .download-deatil__border,
.modalDetailAdditionalClass .modal-content .download-payment-detail .rejected__border,
.modalDetailAdditionalClass .modal-content .rejected-payment .delete-deatil__border,
.modalDetailAdditionalClass .modal-content .rejected-payment .download-deatil__border,
.modalDetailAdditionalClass .modal-content .rejected-payment .rejected__border {
    background: #DBDFE4;
    height: 32px;
    width: 1px;
}

.modalDetailAdditionalClass .modal-content .delete-payment-detail .delete-deatil__textarea,
.modalDetailAdditionalClass .modal-content .delete-payment-detail .download-deatil__textarea,
.modalDetailAdditionalClass .modal-content .delete-payment-detail .rejected__textarea,
.modalDetailAdditionalClass .modal-content .download-payment-detail .delete-deatil__textarea,
.modalDetailAdditionalClass .modal-content .download-payment-detail .download-deatil__textarea,
.modalDetailAdditionalClass .modal-content .download-payment-detail .rejected__textarea,
.modalDetailAdditionalClass .modal-content .rejected-payment .delete-deatil__textarea,
.modalDetailAdditionalClass .modal-content .rejected-payment .download-deatil__textarea,
.modalDetailAdditionalClass .modal-content .rejected-payment .rejected__textarea {
    position: relative;
    border-bottom: 1px solid #DBDFE4;
    padding-bottom: 20px;
}

.modalDetailAdditionalClass .modal-content .delete-payment-detail .delete-deatil__textarea-field,
.modalDetailAdditionalClass .modal-content .delete-payment-detail .download-deatil__textarea-field,
.modalDetailAdditionalClass .modal-content .delete-payment-detail .rejected__textarea-field,
.modalDetailAdditionalClass .modal-content .download-payment-detail .delete-deatil__textarea-field,
.modalDetailAdditionalClass .modal-content .download-payment-detail .download-deatil__textarea-field,
.modalDetailAdditionalClass .modal-content .download-payment-detail .rejected__textarea-field,
.modalDetailAdditionalClass .modal-content .rejected-payment .delete-deatil__textarea-field,
.modalDetailAdditionalClass .modal-content .rejected-payment .download-deatil__textarea-field,
.modalDetailAdditionalClass .modal-content .rejected-payment .rejected__textarea-field {
    padding: 8px 12px;
    color: #767F8A;
    font-size: 15px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px;
    position: relative;
    height: 120px;
    width: 100%;
    border-radius: 8px;
    border: 1px solid #DBDFE4;
}

.modalDetailAdditionalClass .modal-content .delete-payment-detail .delete-deatil__textarea-count,
.modalDetailAdditionalClass .modal-content .delete-payment-detail .download-deatil__textarea-count,
.modalDetailAdditionalClass .modal-content .delete-payment-detail .rejected__textarea-count,
.modalDetailAdditionalClass .modal-content .download-payment-detail .delete-deatil__textarea-count,
.modalDetailAdditionalClass .modal-content .download-payment-detail .download-deatil__textarea-count,
.modalDetailAdditionalClass .modal-content .download-payment-detail .rejected__textarea-count,
.modalDetailAdditionalClass .modal-content .rejected-payment .delete-deatil__textarea-count,
.modalDetailAdditionalClass .modal-content .rejected-payment .download-deatil__textarea-count,
.modalDetailAdditionalClass .modal-content .rejected-payment .rejected__textarea-count {
    position: absolute;
    right: 12px;
    bottom: 30px;
    color: #767F8A;
    text-align: right;
    font-weight: 400;
    font-size: 12px;
}

.modalDetailAdditionalClass .modal-content .delete-payment-detail .rejected__message,
.modalDetailAdditionalClass .modal-content .download-payment-detail .rejected__message,
.modalDetailAdditionalClass .modal-content .rejected-payment .rejected__message {
    border-bottom: none;
    padding-bottom: 16px;
}

.confirmation-actions .confirmation__header {
    display: flex;
    justify-content: space-between;
    color: #32383c;
    font-size: 1.25rem;
    font-weight: 500;
}

.confirmation-actions .confirmation__close {
    margin-right: -6px;
}

.confirmation-actions .confirmation__message {
    padding: 1.25rem 0;
    color: #32383c;
    font-size: 15px;
    font-weight: normal;
    line-height: 1.5rem;
    border-bottom: 1px solid #DBDFE4;
}

.confirmation-actions .confirmation__action {
    display: flex;
    gap: 1rem;
    justify-content: flex-end;
    margin-top: 1.25rem;
}

.confirmation-actions .confirmation__action-delete {
    padding: 0.5rem 0.75rem;
    font-weight: 500;
}

.confirmation-actions .confirmation__action-save {
    padding: 0.5rem 0.75rem;
    font-weight: 500;
}

.PaymentTemplatesAndReferences {
    height: 84.1vh;
    background-color: #fff;
    overflow: auto;
}

    .PaymentTemplatesAndReferences * {
        box-sizing: border-box;
    }

        .PaymentTemplatesAndReferences *::before,
        .PaymentTemplatesAndReferences *::after {
            box-sizing: border-box;
        }

    .PaymentTemplatesAndReferences .ptr {
        height: 100%;
        display: flex;
        flex-direction: column;
    }

        .PaymentTemplatesAndReferences .ptr .ptr-header {
            padding: 1.5rem;
        }

@media (max-width: 768px) {
    .PaymentTemplatesAndReferences .ptr .ptr-header {
        padding-left: 0.75rem;
        padding-right: 0.75rem;
    }
}

.PaymentTemplatesAndReferences .ptr .ptr-header__top {
    display: flex;
    justify-content: space-between;
    align-items: end;
}

@media (max-width: 768px) {
    .PaymentTemplatesAndReferences .ptr .ptr-header__top {
        flex-direction: column;
        align-items: start;
    }
}

.PaymentTemplatesAndReferences .ptr .ptr-header__top-tile {
    color: #32383c;
    font-size: 1.25rem;
    font-weight: 600;
    line-height: 1.5rem;
}

.PaymentTemplatesAndReferences .ptr .ptr-header__top-description {
    margin-top: 9px;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.PaymentTemplatesAndReferences .ptr .ptr-header__top-icon {
    stroke-width: 1.5px;
    color: #767F8A;
}

.PaymentTemplatesAndReferences .ptr .ptr-header__top-text {
    color: #767F8A;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.125rem;
}

.PaymentTemplatesAndReferences .ptr .ptr-header__top-swich .p-tablist-tab-list {
    width: 192px;
}

.PaymentTemplatesAndReferences .ptr .ptr-header__line {
    margin: 26px 0 14px 0;
    height: 1px;
    width: 100%;
    background: #edeff1;
}

.PaymentTemplatesAndReferences .ptr .ptr-header__bottom-row {
    display: flex;
    justify-content: flex-end;
    gap: 1rem;
    align-items: center;
    width: 50%;
}

@media (max-width: 1200px) {
    .PaymentTemplatesAndReferences .ptr .ptr-header__bottom-row {
        width: 100%;
        justify-content: space-between;
    }
}

@media (max-width: 768px) {
    .PaymentTemplatesAndReferences .ptr .ptr-header__bottom-row {
        gap: 0.75rem;
    }
}

.PaymentTemplatesAndReferences .ptr .ptr-header__bottom-row.header-active-reference {
    justify-content: space-between;
    width: 100%;
    padding-bottom: 1.25rem;
}

@media (max-width: 992px) {
    .PaymentTemplatesAndReferences .ptr .ptr-header__bottom-row.header-active-reference {
        flex-direction: column;
        align-items: start;
    }

        .PaymentTemplatesAndReferences .ptr .ptr-header__bottom-row.header-active-reference .ptr-header__bottom-actions {
            width: 100%;
            margin-left: 0;
        }

            .PaymentTemplatesAndReferences .ptr .ptr-header__bottom-row.header-active-reference .ptr-header__bottom-actions .ptr-header__bottom-import,
            .PaymentTemplatesAndReferences .ptr .ptr-header__bottom-row.header-active-reference .ptr-header__bottom-actions .ptr-header__bottom-export {
                width: 48%;
            }

            .PaymentTemplatesAndReferences .ptr .ptr-header__bottom-row.header-active-reference .ptr-header__bottom-actions .ptr-header__bottom-create {
                margin-left: auto;
                width: 50%;
            }

        .PaymentTemplatesAndReferences .ptr .ptr-header__bottom-row.header-active-reference.header-active-purposes {
            flex-direction: row;
        }

            .PaymentTemplatesAndReferences .ptr .ptr-header__bottom-row.header-active-reference.header-active-purposes .ptr-header__bottom-actions {
                width: auto;
                min-width: 0;
            }

                .PaymentTemplatesAndReferences .ptr .ptr-header__bottom-row.header-active-reference.header-active-purposes .ptr-header__bottom-actions .ptr-header__bottom-create {
                    width: 100%;
                }
}

.PaymentTemplatesAndReferences .ptr .ptr-header__bottom-input-wrap {
    max-width: 30.8rem;
    width: 100%;
    position: relative;
}

@media (max-width: 992px) {
    .PaymentTemplatesAndReferences .ptr .ptr-header__bottom-input-wrap {
        max-width: 100%;
        flex: 1;
    }
}

.PaymentTemplatesAndReferences .ptr .ptr-header__bottom-icon {
    width: 1.5rem;
    height: 1.5rem;
    position: absolute;
    top: 8px;
    left: 12px;
}

.PaymentTemplatesAndReferences .ptr .ptr-header__bottom-search {
    padding-left: 2.75rem;
    width: 100%;
}

@media (max-width: 992px) {
    .PaymentTemplatesAndReferences .ptr .ptr-header__bottom-search {
        max-width: 100%;
        width: 100%;
        flex: 1;
    }
}

.PaymentTemplatesAndReferences .ptr .ptr-header__bottom-clear {
    position: absolute;
    right: 0.5rem;
    top: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 76%;
    width: 2rem;
    border: 1px solid #DBDFE4;
    border-radius: 0.5rem;
    background: #fff;
    transform: translateY(-50%);
    cursor: pointer;
}

    .PaymentTemplatesAndReferences .ptr .ptr-header__bottom-clear:hover {
        border-color: #690DD3;
    }

.PaymentTemplatesAndReferences .ptr .ptr-header__bottom-actions {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

@media (max-width: 768px) {
    .PaymentTemplatesAndReferences .ptr .ptr-header__bottom-actions {
        margin-left: auto;
    }
}

@media (min-width: 1624px) {
    .PaymentTemplatesAndReferences .ptr .ptr-header__bottom-Btn {
        width: 8.25rem;
    }
}

.PaymentTemplatesAndReferences .ptr .ptr-header__bottom-create {
    height: 2.5rem;
    gap: 0.5rem;
    width: 8.25rem;
    font-size: 15px;
    font-weight: 500;
}

@media (max-width: 768px) {
    .PaymentTemplatesAndReferences .ptr .ptr-header__bottom-create .content-btn-create {
        display: none;
    }
}

.PaymentTemplatesAndReferences .ptr .ptr-header__bottom-import, .PaymentTemplatesAndReferences .ptr .ptr-header__bottom-export {
    height: 2.5rem;
    padding: 0.5rem 1rem;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
    font-size: 15px;
    font-weight: 500;
    line-height: 18px;
}

    .PaymentTemplatesAndReferences .ptr .ptr-header__bottom-import i, .PaymentTemplatesAndReferences .ptr .ptr-header__bottom-export i {
        width: 1.25rem;
        height: 1.25rem;
    }

.PaymentTemplatesAndReferences .ptr .ptr-header__bottom-options {
    display: flex;
}

    .PaymentTemplatesAndReferences .ptr .ptr-header__bottom-options .p-tablist-tab-list {
        gap: 0.5rem;
        align-items: center;
    }

@media (max-width: 768px) {
    .PaymentTemplatesAndReferences .ptr .ptr-header__bottom-options {
        padding-bottom: 0.75rem;
        width: inherit;
        overflow: hidden;
        overflow-x: scroll;
        scrollbar-width: thin;
        scrollbar-color: rgba(168, 173, 180, 0.5);
    }

        .PaymentTemplatesAndReferences .ptr .ptr-header__bottom-options::-webkit-scrollbar-track {
            background: rgba(168, 173, 180, 0.5);
            border-radius: 0.25rem;
        }

        .PaymentTemplatesAndReferences .ptr .ptr-header__bottom-options::-webkit-scrollbar-thumb {
            background: rgba(168, 173, 180, 0.5);
            border-radius: 0.25rem;
        }

            .PaymentTemplatesAndReferences .ptr .ptr-header__bottom-options::-webkit-scrollbar-thumb:hover {
                background: rgba(168, 173, 180, 0.5);
            }

        .PaymentTemplatesAndReferences .ptr .ptr-header__bottom-options.header-active-purposes-optiont, .PaymentTemplatesAndReferences .ptr .ptr-header__bottom-options.w-max-0 {
            width: auto;
            min-width: 0;
        }
}

.PaymentTemplatesAndReferences .ptr .ptr-header__bottom-options-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1.5rem;
}

@media (max-width: 1200px) {
    .PaymentTemplatesAndReferences .ptr .ptr-header__bottom-options-wrapper {
        flex-direction: column-reverse;
        align-items: self-start;
        width: 100%;
    }
}

.PaymentTemplatesAndReferences .ptr .ptr-header__bottom-options-wrapper.header-options-active-reference {
    justify-content: space-between;
}

@media (max-width: 768px) {
    .PaymentTemplatesAndReferences .ptr .ptr-header__bottom-options-wrapper.header-options-active-reference {
        overflow-x: clip;
    }
}

.PaymentTemplatesAndReferences .ptr .ptr-header__btn-group-wrapper .p-tablist-tab-list {
    align-items: center;
}

.PaymentTemplatesAndReferences .ptr .ptr-header__references-type {
    max-width: 127px;
    min-width: 127px;
}

.PaymentTemplatesAndReferences .ptr .ptr-main {
    flex: 1;
}

@media (max-width: 780px) {
    .modalAdditionalClassRecipient {
        width: 95% !important;
    }
}

@media (max-width: 576px) {
    .modalAdditionalClassRecipient {
        top: 50% !important;
        transform: translate(0%, -50%) !important;
        border-radius: 12px !important;
        height: fit-content;
        width: calc(100% - 32px) !important;
        left: 1rem !important;
        min-width: auto !important;
    }
}

.modalAdditionalClassRecipient.p-dialog {
    max-width: 100% !important;
    width: 46rem;
}

    .modalAdditionalClassRecipient.p-dialog .ptr-recipient__header {
        position: relative;
        display: flex;
        gap: 1.25rem;
        justify-content: space-between;
        color: #32383c;
        font-size: 1.25rem;
        font-weight: 500;
        padding-bottom: 20px;
    }

        .modalAdditionalClassRecipient.p-dialog .ptr-recipient__header::after {
            content: "";
            position: absolute;
            bottom: 0;
            right: -1.25rem;
            height: 1px;
            width: calc(100% + 40px);
            background-color: #dbdfe4;
        }

    .modalAdditionalClassRecipient.p-dialog .ptr-recipient__close {
        margin-right: -6px;
    }

    .modalAdditionalClassRecipient.p-dialog .ptr-recipient__main {
        position: relative;
        margin: 0;
    }

        .modalAdditionalClassRecipient.p-dialog .ptr-recipient__main .section-title {
            margin-bottom: 0.5rem;
            color: #767F8A;
            font-size: 0.75rem;
            font-weight: 500;
            line-height: 1rem;
        }

    .modalAdditionalClassRecipient.p-dialog .ptr-recipient__main-row {
        display: flex;
        align-items: center;
        gap: 8px;
    }

@media (max-width: 500px) {
    .modalAdditionalClassRecipient.p-dialog .ptr-recipient__main-row {
        flex-direction: column;
        align-items: baseline;
    }
}

.modalAdditionalClassRecipient.p-dialog .ptr-recipient__main-iban {
    max-width: 288px;
    width: 100%;
}

@media (max-width: 500px) {
    .modalAdditionalClassRecipient.p-dialog .ptr-recipient__main-iban {
        max-width: inherit;
    }
}

.modalAdditionalClassRecipient.p-dialog .ptr-recipient__main-disable-input {
    height: 2.5rem;
    width: 100%;
    max-width: 15.688rem;
    background: aliceblue;
    margin-left: 0.75rem;
    border-radius: 0.5rem;
    background: #f4f6f7;
}

.modalAdditionalClassRecipient.p-dialog .ptr-recipient__main-disable-content {
    display: flex;
    padding: 6px 0.75rem;
    color: #767F8A;
    font-size: 15px;
    font-weight: 500;
    line-height: 1.5rem;
}

.modalAdditionalClassRecipient.p-dialog .ptr-recipient__contractor-types-row {
    display: flex;
    flex-direction: column;
    align-items: baseline;
    padding-top: 1rem;
}

.modalAdditionalClassRecipient.p-dialog .ptr-recipient__contractor-types {
    display: flex;
    gap: 1rem;
    align-items: center;
}

    .modalAdditionalClassRecipient.p-dialog .ptr-recipient__contractor-types .form-check-label .form-check-input[disabled] {
        cursor: not-allowed;
    }

        .modalAdditionalClassRecipient.p-dialog .ptr-recipient__contractor-types .form-check-label .form-check-input[disabled] + .checkbox-view {
            opacity: 0.4;
        }

            .modalAdditionalClassRecipient.p-dialog .ptr-recipient__contractor-types .form-check-label .form-check-input[disabled] + .checkbox-view::before {
                cursor: not-allowed;
            }

    .modalAdditionalClassRecipient.p-dialog .ptr-recipient__contractor-types .checkbox-view {
        height: 1.375rem;
        width: 1.375rem;
        position: relative;
    }

    .modalAdditionalClassRecipient.p-dialog .ptr-recipient__contractor-types .check-label {
        color: #767F8A;
        font-size: 0.25rem;
        font-weight: 500;
        line-height: 1rem;
        font-size: 14px;
    }

.modalAdditionalClassRecipient.p-dialog .ptr-recipient__document-trigger {
    width: 170px;
}

.modalAdditionalClassRecipient.p-dialog .ptr-recipient__action {
    display: flex;
    gap: 1rem;
    justify-content: space-between;
    margin-top: 1.25rem;
    flex-wrap: wrap;
    width: 100%;
}

.modalAdditionalClassRecipient.p-dialog .ptr-recipient__action-right {
    display: flex;
    gap: 1rem;
    justify-content: flex-end;
    align-items: center;
}

.modalAdditionalClassRecipient.p-dialog .ptr-recipient__action-cancel {
    height: 38px;
    width: 111px;
    padding: 8px 16px;
    border: 1px solid #EB4235;
    background-color: #ffeee2;
    color: #EB4235;
    font-weight: 500;
}

.modalAdditionalClassRecipient.p-dialog .ptr-recipient__action-create {
    height: 38px;
    width: 111px;
    padding: 8px 16px;
    font-weight: 500;
}

.modalAdditionalClassRecipient.p-dialog .ptr-recipient__custom-select {
    display: flex;
    min-width: 170px;
}

.modalAdditionalClassRecipient.p-dialog .ptr-recipient__document {
    display: flex;
    width: 100%;
    margin-top: 1.75rem;
    gap: 0.5rem;
}

@media (max-width: 768px) {
    .modalAdditionalClassRecipient.p-dialog .ptr-recipient__document {
        flex-direction: column;
    }
}

.modalAdditionalClassRecipient.p-dialog .ptr-recipient__document-form {
    width: 52%;
}

@media (max-width: 768px) {
    .modalAdditionalClassRecipient.p-dialog .ptr-recipient__document-form {
        width: 100%;
        max-width: 29.25rem;
    }
}

.modalAdditionalClassRecipient.p-dialog .ptr-recipient__document-line {
    position: relative;
    display: flex;
    width: 100%;
    gap: 0.5rem;
}

@media (max-width: 450px) {
    .modalAdditionalClassRecipient.p-dialog .ptr-recipient__document-line {
        flex-direction: column;
    }
}

.modalAdditionalClassRecipient.p-dialog .ptr-recipient__document-line .invalid-feedback {
    position: absolute;
    top: calc(100% - 0px);
    left: 51%;
}

.modalAdditionalClassRecipient.p-dialog .ptr-recipient__document-subtitle {
    margin-bottom: 0.5rem;
}

.modalAdditionalClassRecipient.p-dialog .ptr-recipient__document-input-seria {
    width: 4rem;
}

.modalAdditionalClassRecipient.p-dialog .ptr-recipient__document-input-number {
    min-width: 7.5rem;
    width: 100%;
}

.modalAdditionalClassRecipient.p-dialog .ptr-recipient__document-input-name {
    width: 100%;
}

.modalAdditionalClassRecipient.p-dialog .ptr-recipient__sender-dropdown {
    margin-bottom: 24px;
    width: 50%;
    padding: 0;
}

@media (max-width: 768px) {
    .modalAdditionalClassRecipient.p-dialog .ptr-recipient__sender-dropdown {
        width: 100%;
        max-width: 29.25rem;
    }
}

.modalAdditionalClassRecipient.p-dialog .ptr-recipient__sender-dropdown .invalid-feedback {
    position: relative;
    bottom: 17px;
}

.modalAdditionalClassRecipient.p-dialog .ptr-recipient__sender-dropdown .sender-dropdown-container {
    width: 100%;
    position: relative;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: column;
    justify-content: space-between;
    align-content: center;
    width: 21.75rem;
    border-radius: 0.75rem;
    font-size: 14px;
    font-weight: 500;
    color: #767F8A;
    background-color: #fff;
    line-height: 1.35;
}

@media (max-width: 768px) {
    .modalAdditionalClassRecipient.p-dialog .ptr-recipient__sender-dropdown .sender-dropdown-container {
        width: 100%;
        flex-direction: column;
    }
}

.modalAdditionalClassRecipient.p-dialog .ptr-recipient__sender-dropdown .sender-dropdown-container .oneLineContent {
    display: none;
    opacity: 0;
    visibility: hidden;
}

.modalAdditionalClassRecipient.p-dialog .ptr-recipient__sender-dropdown .sender-dropdown-container.open .sender-dropdown-container__show {
    border-color: #DBDFE4;
}

    .modalAdditionalClassRecipient.p-dialog .ptr-recipient__sender-dropdown .sender-dropdown-container.open .sender-dropdown-container__show .icon-arrow:before {
        transform: rotate(0deg);
    }

.modalAdditionalClassRecipient.p-dialog .ptr-recipient__sender-dropdown .sender-dropdown-container.open .sender-dropdown-container__wrapper {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0.625rem) scaleY(1);
}

.modalAdditionalClassRecipient.p-dialog .ptr-recipient__sender-dropdown .sender-dropdown-container.open .sender-dropdown-container__list {
    display: block;
}

.modalAdditionalClassRecipient.p-dialog .ptr-recipient__sender-dropdown .sender-dropdown-container .title-selected {
    width: 100%;
    font-size: 12px;
    color: #767F8A;
}

.modalAdditionalClassRecipient.p-dialog .ptr-recipient__sender-dropdown .sender-dropdown-container .title-selected__item {
    display: none;
}

.modalAdditionalClassRecipient.p-dialog .ptr-recipient__sender-dropdown .sender-dropdown-container .title-selected__item {
    font-size: 12px;
    font-weight: 400;
}

.modalAdditionalClassRecipient.p-dialog .ptr-recipient__sender-dropdown .sender-dropdown-container__show {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    margin: 0;
    gap: 4px;
    min-height: 2.5rem;
    padding: 0.55rem 2.625rem 0.55rem 0.75rem;
    border-radius: 0.75rem;
    border: 1px solid #DBDFE4;
    cursor: pointer;
}

    .modalAdditionalClassRecipient.p-dialog .ptr-recipient__sender-dropdown .sender-dropdown-container__show .icon-arrow {
        position: absolute;
        right: 0.75rem;
        top: 50%;
        height: 1rem;
        width: 1rem;
        opacity: 1;
        transform: translateY(-50%);
    }

        .modalAdditionalClassRecipient.p-dialog .ptr-recipient__sender-dropdown .sender-dropdown-container__show .icon-arrow:before {
            content: "";
            position: relative;
            display: block;
            height: 1rem;
            width: 1rem;
            transform: rotate(180deg);
            transition: transform 0.32s ease-out;
            background: url("../img/newDesign/icon/icon-small-up.svg") no-repeat center;
        }

.debugUrl .modalAdditionalClassRecipient.p-dialog .ptr-recipient__sender-dropdown .sender-dropdown-container__show .icon-arrow:before {
    background: url("/Content/themes/novapay/img/newDesign/icon/icon-small-up.svg") no-repeat center;
}

.modalAdditionalClassRecipient.p-dialog .ptr-recipient__sender-dropdown .sender-dropdown-container__active-item {
    display: inline-block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
    font-size: 15px;
    color: #32383c;
}

.modalAdditionalClassRecipient.p-dialog .ptr-recipient__sender-dropdown .sender-dropdown-container__wrapper {
    position: absolute;
    top: 3.2rem;
    display: flex;
    flex-direction: column;
    width: 100%;
    min-height: 2.5rem;
    pointer-events: none;
    background-color: #fff;
    border-radius: 0.75rem;
    border: 1px solid #DBDFE4;
    overflow: hidden;
    transition: max-height 0.32s ease-out, opacity 0.22s ease-out, transform 0.22s cubic-bezier(0.55, 0.085, 0.68, 0.53);
    transform: translateY(-0.5rem) scaleY(0);
    transform-origin: top;
    opacity: 0;
    z-index: 14;
}

.modalAdditionalClassRecipient.p-dialog .ptr-recipient__sender-dropdown .sender-dropdown-container__search-block {
    position: relative;
    padding: 0.5rem 0.75rem;
}

    .modalAdditionalClassRecipient.p-dialog .ptr-recipient__sender-dropdown .sender-dropdown-container__search-block .ico-n {
        position: absolute;
        left: 1rem;
        top: 50%;
        transform: translateY(-50%);
    }

.modalAdditionalClassRecipient.p-dialog .ptr-recipient__sender-dropdown .sender-dropdown-container__search-input {
    display: block;
    width: 100%;
    min-height: 2.5rem;
    padding: 0.5rem 0.75rem 0.5rem 2rem;
    border-radius: 0.5rem;
    border: 1px solid #DBDFE4;
    background: #FFF;
    color: #32383c;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 1.35;
}

    .modalAdditionalClassRecipient.p-dialog .ptr-recipient__sender-dropdown .sender-dropdown-container__search-input:focus {
        border-color: #9b51e0;
        box-shadow: 0 0 4px rgba(155, 81, 224, 0.2);
    }

.modalAdditionalClassRecipient.p-dialog .ptr-recipient__sender-dropdown .sender-dropdown-container__list {
    display: none;
    margin: 0;
    padding: 0;
    overflow: auto;
    max-height: 23.25rem;
    list-style: none;
    background-color: #fff;
    border-radius: 0 0 0.75rem 0.75rem;
    scrollbar-width: thin;
    scrollbar-color: rgba(168, 173, 180, 0.5);
}

    .modalAdditionalClassRecipient.p-dialog .ptr-recipient__sender-dropdown .sender-dropdown-container__list::-webkit-scrollbar-track {
        background: rgba(168, 173, 180, 0.5);
        border-radius: 0.25rem;
    }

    .modalAdditionalClassRecipient.p-dialog .ptr-recipient__sender-dropdown .sender-dropdown-container__list::-webkit-scrollbar-thumb {
        background: rgba(168, 173, 180, 0.5);
        border-radius: 0.25rem;
    }

        .modalAdditionalClassRecipient.p-dialog .ptr-recipient__sender-dropdown .sender-dropdown-container__list::-webkit-scrollbar-thumb:hover {
            background: rgba(168, 173, 180, 0.5);
        }

    .modalAdditionalClassRecipient.p-dialog .ptr-recipient__sender-dropdown .sender-dropdown-container__list li {
        display: flex;
        align-items: center;
        padding: 0;
        border: none;
        cursor: pointer;
    }

        .modalAdditionalClassRecipient.p-dialog .ptr-recipient__sender-dropdown .sender-dropdown-container__list li:last-child {
            border-bottom: none;
        }

        .modalAdditionalClassRecipient.p-dialog .ptr-recipient__sender-dropdown .sender-dropdown-container__list li.empty-message {
            display: flex;
            align-items: start;
            padding: 0.75rem;
            width: 100%;
            color: #32383c;
        }

    .modalAdditionalClassRecipient.p-dialog .ptr-recipient__sender-dropdown .sender-dropdown-container__list label {
        position: relative;
        display: flex;
        align-items: start;
        padding: 0.75rem;
        width: 100%;
        flex-direction: column;
        cursor: pointer;
        overflow: hidden;
    }

        .modalAdditionalClassRecipient.p-dialog .ptr-recipient__sender-dropdown .sender-dropdown-container__list label:has(input[type=radio]:checked) {
            background: #f4f6f7;
        }

        .modalAdditionalClassRecipient.p-dialog .ptr-recipient__sender-dropdown .sender-dropdown-container__list label::before {
            content: "";
            position: absolute;
            top: 50%;
            left: 50%;
            width: 0;
            height: 0;
            background: #f4f6f7;
            border-radius: 50%;
            transform: translate(-50%, -50%);
            transition: width 0.32s ease, height 0.32s ease;
        }

        .modalAdditionalClassRecipient.p-dialog .ptr-recipient__sender-dropdown .sender-dropdown-container__list label:hover::before {
            width: 200%;
            height: 200%;
        }

    .modalAdditionalClassRecipient.p-dialog .ptr-recipient__sender-dropdown .sender-dropdown-container__list .icon-checkbox {
        display: none;
    }

        .modalAdditionalClassRecipient.p-dialog .ptr-recipient__sender-dropdown .sender-dropdown-container__list .icon-checkbox::after, .modalAdditionalClassRecipient.p-dialog .ptr-recipient__sender-dropdown .sender-dropdown-container__list .icon-checkbox::before {
            display: none;
        }

    .modalAdditionalClassRecipient.p-dialog .ptr-recipient__sender-dropdown .sender-dropdown-container__list input[type=radio] {
        position: absolute;
        left: 0;
        opacity: 0;
        z-index: -1;
    }

        .modalAdditionalClassRecipient.p-dialog .ptr-recipient__sender-dropdown .sender-dropdown-container__list input[type=radio]:checked + .icon-checkbox::after {
            opacity: 1;
        }

.modalAdditionalClassRecipient.p-dialog .ptr-recipient__sender-dropdown .sender-dropdown-container .form-check-content {
    display: flex;
    flex-wrap: wrap;
}

.modalAdditionalClassRecipient.p-dialog .ptr-recipient__sender-dropdown .sender-dropdown-container .form-check-name {
    position: relative;
    display: block;
    width: 100%;
    color: #000000;
}

.modalAdditionalClassRecipient.p-dialog .ptr-recipient__sender-dropdown .sender-dropdown-container .form-check-index {
    position: relative;
    font-size: 12px;
}

.modalAdditionalClassRecipient.p-dialog .small-description {
    color: #767F8A;
    font-family: "Fixel Text", "Fixel Display", "Helvetica", "Arial", sans-serif;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 1rem;
}

.modalAdditionalClassRecipient.p-dialog .p-dialog-header {
    padding-bottom: 0 !important;
}

.modalAdditionalClassRecipient.p-dialog .p-dialog-content {
    overflow-y: inherit;
}

.modalAdditionalClassRecipient.p-dialog .p-dialog-footer {
    padding-top: 0 !important;
}

.modalDestinationAdditionalClass {
    padding: 1.25rem !important;
}

    .modalDestinationAdditionalClass.p-dialog {
        width: 46rem;
        max-width: 100% !important;
    }

@media (max-width: 780px) {
    .modalDestinationAdditionalClass.modal-purpose-dialog {
        width: 95% !important;
    }
}

@media (max-width: 576px) {
    .modalDestinationAdditionalClass.modal-purpose-dialog {
        top: 50% !important;
        transform: translate(0%, -50%) !important;
        border-radius: 0.75rem !important;
        height: fit-content;
        width: calc(100% - 32px) !important;
        left: 1rem !important;
        min-width: auto !important;
    }
}

.modalDestinationAdditionalClass.modal-purpose-dialog .ptr-destination__header {
    position: relative;
    display: flex;
    justify-content: space-between;
    color: #32383c;
    font-size: 1.25rem;
    font-weight: 500;
    padding-bottom: 1.25rem;
}

    .modalDestinationAdditionalClass.modal-purpose-dialog .ptr-destination__header::after {
        content: "";
        position: absolute;
        bottom: 0;
        right: -1.25rem;
        height: 1px;
        width: calc(100% + 40px);
        background-color: #dbdfe4;
    }

.modalDestinationAdditionalClass.modal-purpose-dialog .ptr-destination__main {
    position: relative;
    margin: 0;
}

.modalDestinationAdditionalClass.modal-purpose-dialog .ptr-destination__main-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1.25rem;
    margin-bottom: 1.25rem;
}

@media (max-width: 768px) {
    .modalDestinationAdditionalClass.modal-purpose-dialog .ptr-destination__main-container {
        flex-direction: column;
        align-items: self-start;
    }
}

.modalDestinationAdditionalClass.modal-purpose-dialog .ptr-destination__main-iban {
    width: 50%;
}

@media (max-width: 768px) {
    .modalDestinationAdditionalClass.modal-purpose-dialog .ptr-destination__main-iban {
        width: 100%;
    }
}

.modalDestinationAdditionalClass.modal-purpose-dialog .ptr-destination__main-name {
    width: 100%;
}

.modalDestinationAdditionalClass.modal-purpose-dialog .ptr-destination__main-textarea {
    position: relative;
}

.modalDestinationAdditionalClass.modal-purpose-dialog .ptr-destination__main-field {
    width: 100%;
    position: relative;
    border-radius: 0.5rem;
    border: 1px solid #DBDFE4;
    background: #fff;
    height: 88px;
    resize: none;
    padding: 0.5rem 0.75rem;
    font-size: 15px;
    font-weight: 400;
    line-height: 1.25rem;
}

.modalDestinationAdditionalClass.modal-purpose-dialog .ptr-destination__main-count {
    position: absolute;
    bottom: 0.5rem;
    right: 0.75rem;
    color: #767F8A;
    text-align: right;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 1rem;
}

.modalDestinationAdditionalClass.modal-purpose-dialog .ptr-destination .section-title {
    margin-bottom: 0.5rem;
    color: #767F8A;
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 1rem;
}

.modalDestinationAdditionalClass.modal-purpose-dialog .ptr-destination__sender-dropdown {
    width: 50%;
    padding: 0;
}

@media (max-width: 992px) {
    .modalDestinationAdditionalClass.modal-purpose-dialog .ptr-destination__sender-dropdown {
        padding: 0;
    }
}

@media (max-width: 768px) {
    .modalDestinationAdditionalClass.modal-purpose-dialog .ptr-destination__sender-dropdown {
        width: 100%;
    }
}

.modalDestinationAdditionalClass.modal-purpose-dialog .ptr-destination__sender-dropdown .invalid-feedback {
    position: relative;
    bottom: 17px;
}

.modalDestinationAdditionalClass.modal-purpose-dialog .ptr-destination__sender-dropdown .sender-dropdown-container {
    width: 100%;
    position: relative;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: column;
    justify-content: space-between;
    align-content: center;
    width: 21.75rem;
    border-radius: 0.75rem;
    font-size: 14px;
    font-weight: 500;
    color: #767F8A;
    background-color: #fff;
    line-height: 1.35;
}

@media (max-width: 768px) {
    .modalDestinationAdditionalClass.modal-purpose-dialog .ptr-destination__sender-dropdown .sender-dropdown-container {
        width: 100%;
        flex-direction: column;
    }
}

.modalDestinationAdditionalClass.modal-purpose-dialog .ptr-destination__sender-dropdown .sender-dropdown-container .oneLineContent {
    display: none;
    opacity: 0;
    visibility: hidden;
}

.modalDestinationAdditionalClass.modal-purpose-dialog .ptr-destination__sender-dropdown .sender-dropdown-container.open .sender-dropdown-container__show {
    border-color: #DBDFE4;
}

    .modalDestinationAdditionalClass.modal-purpose-dialog .ptr-destination__sender-dropdown .sender-dropdown-container.open .sender-dropdown-container__show .icon-arrow:before {
        transform: rotate(0deg);
    }

.modalDestinationAdditionalClass.modal-purpose-dialog .ptr-destination__sender-dropdown .sender-dropdown-container.open .sender-dropdown-container__wrapper {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0.625rem) scaleY(1);
}

.modalDestinationAdditionalClass.modal-purpose-dialog .ptr-destination__sender-dropdown .sender-dropdown-container.open .sender-dropdown-container__list {
    display: block;
}

.modalDestinationAdditionalClass.modal-purpose-dialog .ptr-destination__sender-dropdown .sender-dropdown-container .title-selected {
    width: 100%;
    font-size: 12px;
    color: #767F8A;
}

.modalDestinationAdditionalClass.modal-purpose-dialog .ptr-destination__sender-dropdown .sender-dropdown-container .title-selected__item {
    display: none;
}

.modalDestinationAdditionalClass.modal-purpose-dialog .ptr-destination__sender-dropdown .sender-dropdown-container .title-selected__item {
    font-size: 12px;
    font-weight: 400;
}

.modalDestinationAdditionalClass.modal-purpose-dialog .ptr-destination__sender-dropdown .sender-dropdown-container__show {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    margin: 0;
    gap: 4px;
    min-height: 2.5rem;
    padding: 0.55rem 2.625rem 0.55rem 0.75rem;
    border-radius: 0.75rem;
    border: 1px solid #DBDFE4;
    cursor: pointer;
}

    .modalDestinationAdditionalClass.modal-purpose-dialog .ptr-destination__sender-dropdown .sender-dropdown-container__show .icon-arrow {
        position: absolute;
        right: 0.75rem;
        top: 50%;
        height: 1rem;
        width: 1rem;
        opacity: 1;
        transform: translateY(-50%);
    }

        .modalDestinationAdditionalClass.modal-purpose-dialog .ptr-destination__sender-dropdown .sender-dropdown-container__show .icon-arrow:before {
            content: "";
            position: relative;
            display: block;
            height: 1rem;
            width: 1rem;
            transform: rotate(180deg);
            transition: transform 0.32s ease-out;
            background: url("../img/newDesign/icon/icon-small-up.svg") no-repeat center;
        }

.debugUrl .modalDestinationAdditionalClass.modal-purpose-dialog .ptr-destination__sender-dropdown .sender-dropdown-container__show .icon-arrow:before {
    background: url("/Content/themes/novapay/img/newDesign/icon/icon-small-up.svg") no-repeat center;
}

.modalDestinationAdditionalClass.modal-purpose-dialog .ptr-destination__sender-dropdown .sender-dropdown-container__active-item {
    display: inline-block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
    font-size: 15px;
    color: #32383c;
}

.modalDestinationAdditionalClass.modal-purpose-dialog .ptr-destination__sender-dropdown .sender-dropdown-container__wrapper {
    position: absolute;
    top: 3.2rem;
    display: flex;
    flex-direction: column;
    width: 100%;
    min-height: 2.5rem;
    pointer-events: none;
    background-color: #fff;
    border-radius: 0.75rem;
    border: 1px solid #DBDFE4;
    overflow: hidden;
    transition: max-height 0.32s ease-out, opacity 0.22s ease-out, transform 0.22s cubic-bezier(0.55, 0.085, 0.68, 0.53);
    transform: translateY(-0.5rem) scaleY(0);
    transform-origin: top;
    opacity: 0;
    z-index: 14;
}

.modalDestinationAdditionalClass.modal-purpose-dialog .ptr-destination__sender-dropdown .sender-dropdown-container__search-block {
    position: relative;
    padding: 0.5rem 0.75rem;
}

    .modalDestinationAdditionalClass.modal-purpose-dialog .ptr-destination__sender-dropdown .sender-dropdown-container__search-block .ico-n {
        position: absolute;
        left: 1rem;
        top: 50%;
        transform: translateY(-50%);
    }

.modalDestinationAdditionalClass.modal-purpose-dialog .ptr-destination__sender-dropdown .sender-dropdown-container__search-input {
    display: block;
    width: 100%;
    min-height: 2.5rem;
    padding: 0.5rem 0.75rem 0.5rem 2rem;
    border-radius: 0.5rem;
    border: 1px solid #DBDFE4;
    background: #FFF;
    color: #32383c;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 1.35;
}

    .modalDestinationAdditionalClass.modal-purpose-dialog .ptr-destination__sender-dropdown .sender-dropdown-container__search-input:focus {
        border-color: #9b51e0;
        box-shadow: 0 0 4px rgba(155, 81, 224, 0.2);
    }

.modalDestinationAdditionalClass.modal-purpose-dialog .ptr-destination__sender-dropdown .sender-dropdown-container__list {
    display: none;
    margin: 0;
    padding: 0;
    overflow: auto;
    max-height: 23.25rem;
    list-style: none;
    background-color: #fff;
    border-radius: 0 0 0.75rem 0.75rem;
    scrollbar-width: thin;
    scrollbar-color: rgba(168, 173, 180, 0.5);
}

    .modalDestinationAdditionalClass.modal-purpose-dialog .ptr-destination__sender-dropdown .sender-dropdown-container__list::-webkit-scrollbar-track {
        background: rgba(168, 173, 180, 0.5);
        border-radius: 0.25rem;
    }

    .modalDestinationAdditionalClass.modal-purpose-dialog .ptr-destination__sender-dropdown .sender-dropdown-container__list::-webkit-scrollbar-thumb {
        background: rgba(168, 173, 180, 0.5);
        border-radius: 0.25rem;
    }

        .modalDestinationAdditionalClass.modal-purpose-dialog .ptr-destination__sender-dropdown .sender-dropdown-container__list::-webkit-scrollbar-thumb:hover {
            background: rgba(168, 173, 180, 0.5);
        }

    .modalDestinationAdditionalClass.modal-purpose-dialog .ptr-destination__sender-dropdown .sender-dropdown-container__list li {
        display: flex;
        align-items: center;
        padding: 0;
        border: none;
        cursor: pointer;
    }

        .modalDestinationAdditionalClass.modal-purpose-dialog .ptr-destination__sender-dropdown .sender-dropdown-container__list li:last-child {
            border-bottom: none;
        }

        .modalDestinationAdditionalClass.modal-purpose-dialog .ptr-destination__sender-dropdown .sender-dropdown-container__list li.empty-message {
            display: flex;
            align-items: start;
            padding: 0.75rem;
            width: 100%;
            color: #32383c;
        }

    .modalDestinationAdditionalClass.modal-purpose-dialog .ptr-destination__sender-dropdown .sender-dropdown-container__list label {
        position: relative;
        display: flex;
        align-items: start;
        padding: 0.75rem;
        width: 100%;
        flex-direction: column;
        cursor: pointer;
        overflow: hidden;
    }

        .modalDestinationAdditionalClass.modal-purpose-dialog .ptr-destination__sender-dropdown .sender-dropdown-container__list label:has(input[type=radio]:checked) {
            background: #f4f6f7;
        }

        .modalDestinationAdditionalClass.modal-purpose-dialog .ptr-destination__sender-dropdown .sender-dropdown-container__list label::before {
            content: "";
            position: absolute;
            top: 50%;
            left: 50%;
            width: 0;
            height: 0;
            background: #f4f6f7;
            border-radius: 50%;
            transform: translate(-50%, -50%);
            transition: width 0.32s ease, height 0.32s ease;
        }

        .modalDestinationAdditionalClass.modal-purpose-dialog .ptr-destination__sender-dropdown .sender-dropdown-container__list label:hover::before {
            width: 200%;
            height: 200%;
        }

    .modalDestinationAdditionalClass.modal-purpose-dialog .ptr-destination__sender-dropdown .sender-dropdown-container__list .icon-checkbox {
        display: none;
    }

        .modalDestinationAdditionalClass.modal-purpose-dialog .ptr-destination__sender-dropdown .sender-dropdown-container__list .icon-checkbox::after, .modalDestinationAdditionalClass.modal-purpose-dialog .ptr-destination__sender-dropdown .sender-dropdown-container__list .icon-checkbox::before {
            display: none;
        }

    .modalDestinationAdditionalClass.modal-purpose-dialog .ptr-destination__sender-dropdown .sender-dropdown-container__list input[type=radio] {
        position: absolute;
        left: 0;
        opacity: 0;
        z-index: -1;
    }

        .modalDestinationAdditionalClass.modal-purpose-dialog .ptr-destination__sender-dropdown .sender-dropdown-container__list input[type=radio]:checked + .icon-checkbox::after {
            opacity: 1;
        }

.modalDestinationAdditionalClass.modal-purpose-dialog .ptr-destination__sender-dropdown .sender-dropdown-container .form-check-content {
    display: flex;
    flex-wrap: wrap;
}

.modalDestinationAdditionalClass.modal-purpose-dialog .ptr-destination__sender-dropdown .sender-dropdown-container .form-check-name {
    position: relative;
    display: block;
    width: 100%;
    color: #000000;
}

.modalDestinationAdditionalClass.modal-purpose-dialog .ptr-destination__sender-dropdown .sender-dropdown-container .form-check-index {
    position: relative;
    font-size: 12px;
}

.modalDestinationAdditionalClass.modal-purpose-dialog .ptr-destination__close {
    margin-right: -6px;
}

.modalDestinationAdditionalClass.modal-purpose-dialog .ptr-destination__action {
    display: flex;
    width: 100%;
    gap: 1rem;
    justify-content: space-between;
    margin-top: 1.25rem;
    flex-wrap: wrap;
}

.modalDestinationAdditionalClass.modal-purpose-dialog .ptr-destination__action-right {
    display: flex;
    gap: 1rem;
    justify-content: flex-end;
    align-items: center;
}

.modalDestinationAdditionalClass.modal-purpose-dialog .ptr-destination__action-cancel {
    height: 2.375rem;
    width: 6.938rem;
    padding: 0.5rem 1rem;
    border: 1px solid #EB4235;
    background-color: #ffeee2;
    color: #EB4235;
    font-weight: 500;
}

.modalDestinationAdditionalClass.modal-purpose-dialog .ptr-destination__action-create {
    height: 2.375rem;
    width: 6.938rem;
    padding: 0.5rem 1rem;
    font-weight: 500;
}

.modalDestinationAdditionalClass.modal-purpose-dialog .p-dialog-header {
    padding: 0 0 1.25rem !important;
}

.modalDestinationAdditionalClass.modal-purpose-dialog .p-dialog-content {
    overflow-y: inherit;
    padding: 0 0 1.25rem !important;
}

.modalDestinationAdditionalClass.modal-purpose-dialog .p-dialog-footer {
    padding: 0 !important;
}

.modalDetailAdditionalClass {
    padding: 1.25rem 1.25rem 1rem !important;
}

@media (max-width: 576px) {
    .modalDetailAdditionalClass {
        top: 50% !important;
        transform: translate(0%, -50%) !important;
        border-radius: 0, 75rem !important;
        height: fit-content;
        width: calc(100% - 32px) !important;
        left: 16px !important;
        min-width: auto !important;
    }
}

.modalDetailAdditionalClass .modal-content {
    max-width: 100% !important;
    width: 32.5rem;
}

    .modalDetailAdditionalClass .modal-content .ptr-delete__header {
        display: flex;
        justify-content: space-between;
        color: #32383c;
        font-size: 1.25rem;
        font-weight: 500;
    }

    .modalDetailAdditionalClass .modal-content .ptr-delete__close {
        margin-right: -0.375rem;
    }

    .modalDetailAdditionalClass .modal-content .ptr-delete__message {
        padding: 1.25rem 0 1rem;
        color: #32383c;
        font-size: 15px;
        font-weight: normal;
        line-height: 1.5rem;
    }

    .modalDetailAdditionalClass .modal-content .ptr-delete__lable-text {
        margin-left: 1.875rem;
        width: fit-content;
        color: #32383c;
        font-weight: 400;
        font-size: 14px;
        line-height: 1.125rem;
    }

        .modalDetailAdditionalClass .modal-content .ptr-delete__lable-text::before, .modalDetailAdditionalClass .modal-content .ptr-delete__lable-text::after {
            transform: translateY(-48%) !important;
        }

    .modalDetailAdditionalClass .modal-content .ptr-delete .tooltip-text {
        color: #fff;
        text-align: center;
        font-size: 11px;
        font-style: normal;
        font-weight: 400;
        line-height: 0.75rem;
    }

    .modalDetailAdditionalClass .modal-content .ptr-delete #exportt-tooltip::after {
        left: calc(100% - (50% + 8px)) !important;
    }

@media (max-width: 480px) {
    .modalDetailAdditionalClass .modal-content .ptr-delete #exportt-tooltip::after {
        left: calc(100% - (77% + 14px)) !important;
    }
}

.modalDetailAdditionalClass .modal-content .ptr-delete__control-wrap {
    padding: 0 0 4px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    border-bottom: 1px solid #DBDFE4;
}

.modalDetailAdditionalClass .modal-content .ptr-delete__control-row {
    margin-bottom: 1rem;
}

.modalDetailAdditionalClass .modal-content .ptr-delete__tooltip .icon-info-new {
    background-color: #690DD3 !important;
}

.modalDetailAdditionalClass .modal-content .ptr-delete__action {
    display: flex;
    gap: 1rem;
    justify-content: flex-end;
    margin-top: 1.25rem;
    flex-wrap: wrap;
}

.modalDetailAdditionalClass .modal-content .ptr-delete__action-delete {
    padding: 0.5rem 0.75rem;
    border: 1px solid #EB4235;
    background-color: #ffeee2;
    color: #EB4235;
    font-weight: 500;
}

.modalDetailAdditionalClass .modal-content .ptr-delete__action-save {
    padding: 0.5rem 0.75rem;
    font-weight: 500;
}

.modalDetailAdditionalClass .modal-content .ptr-delete__action-format {
    height: 2.25rem;
    width: 3.625rem;
    text-transform: uppercase;
}

.modalDetailAdditionalClass .modal-content .ptr-delete__border {
    background: #DBDFE4;
    height: 2rem;
    width: 1px;
}

.modalDetailAdditionalClass .modal-content .ptr-delete__textarea {
    position: relative;
    border-bottom: 1px solid #DBDFE4;
    padding-bottom: 1.25rem;
}

.modalDetailAdditionalClass .modal-content .ptr-delete__textarea-field {
    padding: 0.5rem 0.75rem;
    color: #767F8A;
    font-size: 15px;
    font-style: normal;
    font-weight: 400;
    line-height: 1.5rem;
    position: relative;
    height: 7.5rem;
    width: 100%;
    border-radius: 0.5rem;
    border: 1px solid #DBDFE4;
}

.modalDetailAdditionalClass .modal-content .ptr-delete__textarea-count {
    position: absolute;
    right: 0.75rem;
    bottom: 1.875rem;
    color: #767F8A;
    text-align: right;
    font-weight: 400;
    font-size: 12px;
}

.btn-control-templates-item-dropdown {
    width: 2.5rem;
    height: 2.5rem;
    padding: 0;
    border-radius: 0.5rem;
    background: transparent;
    border: none;
    outline: none;
    color: #202427;
}

    .btn-control-templates-item-dropdown .icon-vertical-dot {
        color: #DBDFE4;
    }

    .btn-control-templates-item-dropdown:hover .icon-vertical-dot, .btn-control-templates-item-dropdown:active .icon-vertical-dot, .btn-control-templates-item-dropdown:focus .icon-vertical-dot {
        color: #767F8A;
    }

    .btn-control-templates-item-dropdown span {
        cursor: pointer;
        position: relative;
    }

    .btn-control-templates-item-dropdown .content-text {
        display: none;
    }

@media (max-width: 992px) {
    .btn-control-templates-item-dropdown {
        border-radius: 0.5rem;
        border: 1px solid #DBDFE4;
        background: transparent;
        font-weight: 500;
    }

        .btn-control-templates-item-dropdown .content-dot {
            display: none;
        }

        .btn-control-templates-item-dropdown .content-text {
            display: block;
            width: 100%;
            padding: 0.5rem;
            font-size: 14px;
            text-align: center;
            line-height: 1.35;
        }
}

@media (max-width: 768px) {
    .btn-control-templates-item-dropdown {
        width: 2.5rem;
        height: 2.5rem;
    }
}

.dropdown-block-templates.open {
    display: flex;
    top: 2.2rem;
    left: auto;
    right: 0;
    transform: translateX(-20%) scaleY(1);
}

@media (min-width: 106rem) {
    .dropdown-block-templates.open {
        transform: translateX(0);
    }
}

@media (max-width: 992px) {
    .dropdown-block-templates.open {
        top: 3.2rem;
        width: 100%;
        transform: translateX(0);
    }
}

@media (max-width: 768px) {
    .dropdown-block-templates.open {
        left: auto;
        transform: translateX(0);
    }
}

.ptr-templates .payment-templates-list__all-content-item:has(.dropdown-block-templates.open),
.ptr-references .payment-templates-list__all-content-item:has(.dropdown-block-templates.open) {
    position: relative;
    z-index: 1;
}

    .ptr-templates .payment-templates-list__all-content-item:has(.dropdown-block-templates.open) .dropdown-block-templates.open,
    .ptr-references .payment-templates-list__all-content-item:has(.dropdown-block-templates.open) .dropdown-block-templates.open {
        z-index: 1000;
        transform: translateX(-2.5rem);
    }

.ptr-templates .payment-templates-list__all-content-item:not(:has(.payment-templates-list__all-content-select-label-btn)) .btn-control-templates-item-dropdown,
.ptr-references .payment-templates-list__all-content-item:not(:has(.payment-templates-list__all-content-select-label-btn)) .btn-control-templates-item-dropdown {
    width: 100%;
}

.ptr-templates .payment-references-list__purpose-item:has(.dropdown-block-templates.open), .ptr-templates .payment-references-list__contractor-item:has(.dropdown-block-templates.open),
.ptr-templates .payment-purposes-list__purpose-item:has(.dropdown-block-templates.open),
.ptr-templates .payment-purposes-list__contractor-item:has(.dropdown-block-templates.open),
.ptr-references .payment-references-list__purpose-item:has(.dropdown-block-templates.open),
.ptr-references .payment-references-list__contractor-item:has(.dropdown-block-templates.open),
.ptr-references .payment-purposes-list__purpose-item:has(.dropdown-block-templates.open),
.ptr-references .payment-purposes-list__contractor-item:has(.dropdown-block-templates.open) {
    position: relative;
    z-index: 1;
}

    .ptr-templates .payment-references-list__purpose-item:has(.dropdown-block-templates.open) .dropdown-block-templates.open, .ptr-templates .payment-references-list__contractor-item:has(.dropdown-block-templates.open) .dropdown-block-templates.open,
    .ptr-templates .payment-purposes-list__purpose-item:has(.dropdown-block-templates.open) .dropdown-block-templates.open,
    .ptr-templates .payment-purposes-list__contractor-item:has(.dropdown-block-templates.open) .dropdown-block-templates.open,
    .ptr-references .payment-references-list__purpose-item:has(.dropdown-block-templates.open) .dropdown-block-templates.open,
    .ptr-references .payment-references-list__contractor-item:has(.dropdown-block-templates.open) .dropdown-block-templates.open,
    .ptr-references .payment-purposes-list__purpose-item:has(.dropdown-block-templates.open) .dropdown-block-templates.open,
    .ptr-references .payment-purposes-list__contractor-item:has(.dropdown-block-templates.open) .dropdown-block-templates.open {
        z-index: 1000;
        transform: translateX(-2.5rem);
    }

.ptr-templates .payment-references-list__purpose-item:not(:has(.payment-templates-list__all-content-select-label-btn)) .btn-control-templates-item-dropdown, .ptr-templates .payment-references-list__contractor-item:not(:has(.payment-templates-list__all-content-select-label-btn)) .btn-control-templates-item-dropdown,
.ptr-templates .payment-purposes-list__purpose-item:not(:has(.payment-templates-list__all-content-select-label-btn)) .btn-control-templates-item-dropdown,
.ptr-templates .payment-purposes-list__contractor-item:not(:has(.payment-templates-list__all-content-select-label-btn)) .btn-control-templates-item-dropdown,
.ptr-references .payment-references-list__purpose-item:not(:has(.payment-templates-list__all-content-select-label-btn)) .btn-control-templates-item-dropdown,
.ptr-references .payment-references-list__contractor-item:not(:has(.payment-templates-list__all-content-select-label-btn)) .btn-control-templates-item-dropdown,
.ptr-references .payment-purposes-list__purpose-item:not(:has(.payment-templates-list__all-content-select-label-btn)) .btn-control-templates-item-dropdown,
.ptr-references .payment-purposes-list__contractor-item:not(:has(.payment-templates-list__all-content-select-label-btn)) .btn-control-templates-item-dropdown {
    width: 100%;
}

.ptr-templates .payment-references-list__edit-active,
.ptr-templates .payment-purposes-list__edit-active,
.ptr-references .payment-references-list__edit-active,
.ptr-references .payment-purposes-list__edit-active {
    cursor: pointer;
    width: 2.5rem;
    height: 2.5rem;
    padding: 0;
    border-radius: 0.5rem;
    background: transparent;
    color: #202427;
    outline: none;
    border: 1px solid #DBDFE4;
}

    .ptr-templates .payment-references-list__edit-active:hover,
    .ptr-templates .payment-purposes-list__edit-active:hover,
    .ptr-references .payment-references-list__edit-active:hover,
    .ptr-references .payment-purposes-list__edit-active:hover {
        background: #f4f6f7;
        border-color: #690DD3;
    }

        .ptr-templates .payment-references-list__edit-active:hover .ico-n,
        .ptr-templates .payment-purposes-list__edit-active:hover .ico-n,
        .ptr-references .payment-references-list__edit-active:hover .ico-n,
        .ptr-references .payment-purposes-list__edit-active:hover .ico-n {
            background: url("../img/newDesign/icon/icon-account-edit-hover.svg") no-repeat center;
        }

.debugUrl .ptr-templates .payment-references-list__edit-active:hover .ico-n,
.debugUrl .ptr-templates .payment-purposes-list__edit-active:hover .ico-n,
.debugUrl .ptr-references .payment-references-list__edit-active:hover .ico-n,
.debugUrl .ptr-references .payment-purposes-list__edit-active:hover .ico-n {
    background: url("/Content/themes/novapay/img/newDesign/icon/icon-account-edit-hover.svg") no-repeat center;
}

.ptr-templates .btn-actions,
.ptr-references .btn-actions {
    display: inline-flex;
    align-items: center;
    justify-content: left;
    gap: 0.5rem;
    white-space: nowrap;
    min-width: 146px;
    padding: 0.5rem;
    border-radius: 0.5rem;
    background-color: #fff;
    border: none;
    color: #767F8A;
    cursor: pointer;
    font-size: 12px;
    font-weight: 500;
    text-align: left;
}

@media (max-width: 992px) {
    .ptr-templates .btn-actions,
    .ptr-references .btn-actions {
        flex: 1 1 auto;
    }
}

.ptr-templates .btn-actions:hover,
.ptr-references .btn-actions:hover {
    background-color: #f5edff;
    transition: background-color 0.42s ease-out;
    border: none;
    color: #5E1CAB;
}

    .ptr-templates .btn-actions:hover .icon-copy-payment,
    .ptr-templates .btn-actions:hover .icon-edit-payment,
    .ptr-references .btn-actions:hover .icon-copy-payment,
    .ptr-references .btn-actions:hover .icon-edit-payment {
        background-color: #690DD3 !important;
    }

.ptr-templates .btn-actions.actions-negative,
.ptr-references .btn-actions.actions-negative {
    background-color: #fff;
    color: #EB4235;
    transition: background-color 0.42s ease-out, color 0.42s ease-out;
}

    .ptr-templates .btn-actions.actions-negative:hover,
    .ptr-references .btn-actions.actions-negative:hover {
        background-color: #FFEEE2;
        color: #DE4420;
    }

.ptr-templates .btn-actions .icon-copy-payment,
.ptr-templates .btn-actions .icon-edit-payment,
.ptr-references .btn-actions .icon-copy-payment,
.ptr-references .btn-actions .icon-edit-payment {
    background-color: #767F8A !important;
}

.ptr-templates .btn-actions .icon-activate-new,
.ptr-templates .btn-actions .icon-deactivate-new,
.ptr-templates .btn-actions .icon-edit-payment,
.ptr-references .btn-actions .icon-activate-new,
.ptr-references .btn-actions .icon-deactivate-new,
.ptr-references .btn-actions .icon-edit-payment {
    display: block;
    width: 1.25rem;
    height: 1.25rem;
    flex-shrink: 0;
}

.ptr-templates .btn-actions.btn-templates-activate:hover,
.ptr-references .btn-actions.btn-templates-activate:hover {
    background-color: #e1f2ef;
}

    .ptr-templates .btn-actions.btn-templates-activate:hover .icon-activate-new,
    .ptr-references .btn-actions.btn-templates-activate:hover .icon-activate-new {
        background-color: #22967F !important;
    }

    .ptr-templates .btn-actions.btn-templates-activate:hover .btn-actions__content-activate,
    .ptr-references .btn-actions.btn-templates-activate:hover .btn-actions__content-activate {
        color: #22967F;
    }

.ptr-templates .btn-actions.btn-templates-deactivate:hover,
.ptr-references .btn-actions.btn-templates-deactivate:hover {
    background-color: #ffeaea;
}

    .ptr-templates .btn-actions.btn-templates-deactivate:hover .icon-deactivate-new,
    .ptr-references .btn-actions.btn-templates-deactivate:hover .icon-deactivate-new {
        background-color: #EB4235 !important;
    }

    .ptr-templates .btn-actions.btn-templates-deactivate:hover .btn-actions__content-deactivate,
    .ptr-references .btn-actions.btn-templates-deactivate:hover .btn-actions__content-deactivate {
        color: #EB4235;
    }

.ptr-templates .control-templates__actions-list,
.ptr-references .control-templates__actions-list {
    display: flex;
    flex-direction: column;
}

.ptr-templates .control-templates__actions-item,
.ptr-references .control-templates__actions-item {
    padding: 0;
    background: transparent;
}

.ptr-templates .payment-templates-list .form-check-label,
.ptr-templates .payment-references-list .form-check-label,
.ptr-templates .payment-purposes-list .form-check-label,
.ptr-references .payment-templates-list .form-check-label,
.ptr-references .payment-references-list .form-check-label,
.ptr-references .payment-purposes-list .form-check-label {
    height: 1.125rem;
    width: 1.125rem;
}

    .ptr-templates .payment-templates-list .form-check-label .checkbox-view::after, .ptr-templates .payment-templates-list .form-check-label .checkbox-view::before,
    .ptr-templates .payment-references-list .form-check-label .checkbox-view::after,
    .ptr-templates .payment-references-list .form-check-label .checkbox-view::before,
    .ptr-templates .payment-purposes-list .form-check-label .checkbox-view::after,
    .ptr-templates .payment-purposes-list .form-check-label .checkbox-view::before,
    .ptr-references .payment-templates-list .form-check-label .checkbox-view::after,
    .ptr-references .payment-templates-list .form-check-label .checkbox-view::before,
    .ptr-references .payment-references-list .form-check-label .checkbox-view::after,
    .ptr-references .payment-references-list .form-check-label .checkbox-view::before,
    .ptr-references .payment-purposes-list .form-check-label .checkbox-view::after,
    .ptr-references .payment-purposes-list .form-check-label .checkbox-view::before {
        height: 1.125rem;
        width: 1.125rem;
    }

    .ptr-templates .payment-templates-list .form-check-label [disabled],
    .ptr-templates .payment-references-list .form-check-label [disabled],
    .ptr-templates .payment-purposes-list .form-check-label [disabled],
    .ptr-references .payment-templates-list .form-check-label [disabled],
    .ptr-references .payment-references-list .form-check-label [disabled],
    .ptr-references .payment-purposes-list .form-check-label [disabled] {
        cursor: not-allowed;
    }

        .ptr-templates .payment-templates-list .form-check-label [disabled] + .checkbox-view::before,
        .ptr-templates .payment-references-list .form-check-label [disabled] + .checkbox-view::before,
        .ptr-templates .payment-purposes-list .form-check-label [disabled] + .checkbox-view::before,
        .ptr-references .payment-templates-list .form-check-label [disabled] + .checkbox-view::before,
        .ptr-references .payment-references-list .form-check-label [disabled] + .checkbox-view::before,
        .ptr-references .payment-purposes-list .form-check-label [disabled] + .checkbox-view::before {
            cursor: not-allowed;
            opacity: 0.4;
        }

.ptr-templates .payment-templates-list .selectAll-active .checkbox-view::after,
.ptr-templates .payment-references-list .selectAll-active .checkbox-view::after,
.ptr-templates .payment-purposes-list .selectAll-active .checkbox-view::after,
.ptr-references .payment-templates-list .selectAll-active .checkbox-view::after,
.ptr-references .payment-references-list .selectAll-active .checkbox-view::after,
.ptr-references .payment-purposes-list .selectAll-active .checkbox-view::after {
    opacity: 1;
}

.ptr-templates .payment-templates-list .checkedAllItem,
.ptr-templates .payment-templates-list .checkedItem,
.ptr-templates .payment-references-list .checkedAllItem,
.ptr-templates .payment-references-list .checkedItem,
.ptr-templates .payment-purposes-list .checkedAllItem,
.ptr-templates .payment-purposes-list .checkedItem,
.ptr-references .payment-templates-list .checkedAllItem,
.ptr-references .payment-templates-list .checkedItem,
.ptr-references .payment-references-list .checkedAllItem,
.ptr-references .payment-references-list .checkedItem,
.ptr-references .payment-purposes-list .checkedAllItem,
.ptr-references .payment-purposes-list .checkedItem {
    display: flex;
    align-items: center;
    height: 1.125rem;
    width: 1.125rem;
}

.ptr-templates .payment-templates-list__pagination-container,
.ptr-templates .payment-references-list__pagination-container,
.ptr-templates .payment-purposes-list__pagination-container,
.ptr-references .payment-templates-list__pagination-container,
.ptr-references .payment-references-list__pagination-container,
.ptr-references .payment-purposes-list__pagination-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.5rem;
    border-bottom: 2px solid #DBDFE4;
}

@media (max-width: 768px) {
    .ptr-templates .payment-templates-list__pagination-container,
    .ptr-templates .payment-references-list__pagination-container,
    .ptr-templates .payment-purposes-list__pagination-container,
    .ptr-references .payment-templates-list__pagination-container,
    .ptr-references .payment-references-list__pagination-container,
    .ptr-references .payment-purposes-list__pagination-container {
        padding-left: 0.75rem;
        padding-right: 0.75rem;
        border-top: 1px solid #DBDFE4;
    }
}

.ptr-templates .payment-templates-list .grid-pagination,
.ptr-templates .payment-references-list .grid-pagination,
.ptr-templates .payment-purposes-list .grid-pagination,
.ptr-references .payment-templates-list .grid-pagination,
.ptr-references .payment-references-list .grid-pagination,
.ptr-references .payment-purposes-list .grid-pagination {
    display: flex;
    justify-content: space-between;
    padding: 0 1.5rem;
    border-top: none;
}

@media (max-width: 768px) {
    .ptr-templates .payment-templates-list .grid-pagination,
    .ptr-templates .payment-references-list .grid-pagination,
    .ptr-templates .payment-purposes-list .grid-pagination,
    .ptr-references .payment-templates-list .grid-pagination,
    .ptr-references .payment-references-list .grid-pagination,
    .ptr-references .payment-purposes-list .grid-pagination {
        flex-direction: column-reverse;
        align-items: center;
        padding: 0.85rem 0 0 0;
    }
}

.ptr-templates .payment-templates-list .grid-pagination__options-filter,
.ptr-templates .payment-references-list .grid-pagination__options-filter,
.ptr-templates .payment-purposes-list .grid-pagination__options-filter,
.ptr-references .payment-templates-list .grid-pagination__options-filter,
.ptr-references .payment-references-list .grid-pagination__options-filter,
.ptr-references .payment-purposes-list .grid-pagination__options-filter {
    width: 100%;
    cursor: pointer;
}

.ptr-templates .payment-templates-list .grid-pagination__switch:checked + .grid-pagination__options-filter .grid-pagination__select,
.ptr-templates .payment-references-list .grid-pagination__switch:checked + .grid-pagination__options-filter .grid-pagination__select,
.ptr-templates .payment-purposes-list .grid-pagination__switch:checked + .grid-pagination__options-filter .grid-pagination__select,
.ptr-references .payment-templates-list .grid-pagination__switch:checked + .grid-pagination__options-filter .grid-pagination__select,
.ptr-references .payment-references-list .grid-pagination__switch:checked + .grid-pagination__options-filter .grid-pagination__select,
.ptr-references .payment-purposes-list .grid-pagination__switch:checked + .grid-pagination__options-filter .grid-pagination__select {
    transform: scaleY(1);
    opacity: 1;
    z-index: 12;
}

.ptr-templates .payment-templates-list .grid-pagination__switch:checked + .grid-pagination__options-filter .grid-pagination__filter:after,
.ptr-templates .payment-references-list .grid-pagination__switch:checked + .grid-pagination__options-filter .grid-pagination__filter:after,
.ptr-templates .payment-purposes-list .grid-pagination__switch:checked + .grid-pagination__options-filter .grid-pagination__filter:after,
.ptr-references .payment-templates-list .grid-pagination__switch:checked + .grid-pagination__options-filter .grid-pagination__filter:after,
.ptr-references .payment-references-list .grid-pagination__switch:checked + .grid-pagination__options-filter .grid-pagination__filter:after,
.ptr-references .payment-purposes-list .grid-pagination__switch:checked + .grid-pagination__options-filter .grid-pagination__filter:after {
    transform: rotate(0deg);
}

.ptr-templates .payment-templates-list .grid-pagination__filter,
.ptr-templates .payment-references-list .grid-pagination__filter,
.ptr-templates .payment-purposes-list .grid-pagination__filter,
.ptr-references .payment-templates-list .grid-pagination__filter,
.ptr-references .payment-references-list .grid-pagination__filter,
.ptr-references .payment-purposes-list .grid-pagination__filter {
    position: relative;
    display: flex;
    margin-right: 0.75rem;
    padding: 0.35rem 2rem 0.2rem 0.5rem;
    color: #27292C;
    background-color: #fff;
    border-radius: 0.25rem;
    border: 1px solid #CDD3DD;
    font-size: 12px;
    transition: 0.32s;
}

    .ptr-templates .payment-templates-list .grid-pagination__filter::after,
    .ptr-templates .payment-references-list .grid-pagination__filter::after,
    .ptr-templates .payment-purposes-list .grid-pagination__filter::after,
    .ptr-references .payment-templates-list .grid-pagination__filter::after,
    .ptr-references .payment-references-list .grid-pagination__filter::after,
    .ptr-references .payment-purposes-list .grid-pagination__filter::after {
        content: "";
        position: absolute;
        top: 4px;
        right: 0.5rem;
        width: 1rem;
        height: 1rem;
        transform: rotate(180deg);
        transition: 0.3s ease-in-out;
        display: inline-block;
        width: 17px;
        height: 17px;
        background-color: currentColor;
        background-image: none;
        mask-image: url("../img/sprite.svg#icon-arrow-black-down");
    }

.debugUrl .ptr-templates .payment-templates-list .grid-pagination__filter::after,
.debugUrl .ptr-templates .payment-references-list .grid-pagination__filter::after,
.debugUrl .ptr-templates .payment-purposes-list .grid-pagination__filter::after,
.debugUrl .ptr-references .payment-templates-list .grid-pagination__filter::after,
.debugUrl .ptr-references .payment-references-list .grid-pagination__filter::after,
.debugUrl .ptr-references .payment-purposes-list .grid-pagination__filter::after {
    mask-image: url("/Content/themes/novapay/img/sprite.svg#icon-arrow-black-down");
}

.ptr-templates .payment-templates-list .grid-pagination__filter::after,
.ptr-templates .payment-references-list .grid-pagination__filter::after,
.ptr-templates .payment-purposes-list .grid-pagination__filter::after,
.ptr-references .payment-templates-list .grid-pagination__filter::after,
.ptr-references .payment-references-list .grid-pagination__filter::after,
.ptr-references .payment-purposes-list .grid-pagination__filter::after {
    mask-repeat: no-repeat;
    mask-size: contain;
}

.ptr-templates .payment-templates-list .grid-pagination__select,
.ptr-templates .payment-references-list .grid-pagination__select,
.ptr-templates .payment-purposes-list .grid-pagination__select,
.ptr-references .payment-templates-list .grid-pagination__select,
.ptr-references .payment-references-list .grid-pagination__select,
.ptr-references .payment-purposes-list .grid-pagination__select {
    position: absolute;
    bottom: 100%;
    left: 0;
    display: flex;
    flex-direction: column-reverse;
    width: 100%;
    margin-bottom: 5px;
    overflow: hidden;
    transform: scaleY(0);
    transform-origin: bottom;
    opacity: 0;
    transition: 0.22s ease-in-out;
    z-index: 4;
    border: 1px solid #CDD3DD;
    border-radius: 0.25rem;
}

.ptr-templates .payment-templates-list .grid-pagination__select-option,
.ptr-templates .payment-references-list .grid-pagination__select-option,
.ptr-templates .payment-purposes-list .grid-pagination__select-option,
.ptr-references .payment-templates-list .grid-pagination__select-option,
.ptr-references .payment-references-list .grid-pagination__select-option,
.ptr-references .payment-purposes-list .grid-pagination__select-option {
    padding: 0.25rem 0.5rem;
    background-color: #fff;
    border-bottom: 1px solid #e9ecef;
    transition: 0.3s;
}

    .ptr-templates .payment-templates-list .grid-pagination__select-option:first-of-type,
    .ptr-templates .payment-references-list .grid-pagination__select-option:first-of-type,
    .ptr-templates .payment-purposes-list .grid-pagination__select-option:first-of-type,
    .ptr-references .payment-templates-list .grid-pagination__select-option:first-of-type,
    .ptr-references .payment-references-list .grid-pagination__select-option:first-of-type,
    .ptr-references .payment-purposes-list .grid-pagination__select-option:first-of-type {
        border-bottom: 0;
    }

    .ptr-templates .payment-templates-list .grid-pagination__select-option:hover,
    .ptr-templates .payment-references-list .grid-pagination__select-option:hover,
    .ptr-templates .payment-purposes-list .grid-pagination__select-option:hover,
    .ptr-references .payment-templates-list .grid-pagination__select-option:hover,
    .ptr-references .payment-references-list .grid-pagination__select-option:hover,
    .ptr-references .payment-purposes-list .grid-pagination__select-option:hover {
        background-color: #e9ecef;
    }

.ptr-templates .payment-templates-list .pagination-controls,
.ptr-templates .payment-references-list .pagination-controls,
.ptr-templates .payment-purposes-list .pagination-controls,
.ptr-references .payment-templates-list .pagination-controls,
.ptr-references .payment-references-list .pagination-controls,
.ptr-references .payment-purposes-list .pagination-controls {
    display: flex;
    align-items: center;
    color: #767F8A;
}

.ptr-templates .payment-templates-list .pagination-info,
.ptr-templates .payment-references-list .pagination-info,
.ptr-templates .payment-purposes-list .pagination-info,
.ptr-references .payment-templates-list .pagination-info,
.ptr-references .payment-references-list .pagination-info,
.ptr-references .payment-purposes-list .pagination-info {
    margin-right: 0.75rem;
}

.ptr-templates .payment-templates-list .pagination-info-count,
.ptr-templates .payment-references-list .pagination-info-count,
.ptr-templates .payment-purposes-list .pagination-info-count,
.ptr-references .payment-templates-list .pagination-info-count,
.ptr-references .payment-references-list .pagination-info-count,
.ptr-references .payment-purposes-list .pagination-info-count {
    display: flex;
    gap: 0.5rem;
}

    .ptr-templates .payment-templates-list .pagination-info-count .pagination-interval,
    .ptr-templates .payment-references-list .pagination-info-count .pagination-interval,
    .ptr-templates .payment-purposes-list .pagination-info-count .pagination-interval,
    .ptr-references .payment-templates-list .pagination-info-count .pagination-interval,
    .ptr-references .payment-references-list .pagination-info-count .pagination-interval,
    .ptr-references .payment-purposes-list .pagination-info-count .pagination-interval {
        color: #32383c;
    }

.ptr-templates .payment-templates-list .btn-show-more,
.ptr-templates .payment-references-list .btn-show-more,
.ptr-templates .payment-purposes-list .btn-show-more,
.ptr-references .payment-templates-list .btn-show-more,
.ptr-references .payment-references-list .btn-show-more,
.ptr-references .payment-purposes-list .btn-show-more {
    padding: 0.5rem 1rem;
    height: fit-content;
    border-radius: 0.5rem;
    color: #690DD3;
    font-size: 15px;
    font-weight: 600;
    background: transparent;
    border: 1px solid #690DD3;
    outline: none;
    cursor: pointer;
}

    .ptr-templates .payment-templates-list .btn-show-more .ico-n,
    .ptr-templates .payment-references-list .btn-show-more .ico-n,
    .ptr-templates .payment-purposes-list .btn-show-more .ico-n,
    .ptr-references .payment-templates-list .btn-show-more .ico-n,
    .ptr-references .payment-references-list .btn-show-more .ico-n,
    .ptr-references .payment-purposes-list .btn-show-more .ico-n {
        margin-right: 0.5rem;
    }

    .ptr-templates .payment-templates-list .btn-show-more span,
    .ptr-templates .payment-references-list .btn-show-more span,
    .ptr-templates .payment-purposes-list .btn-show-more span,
    .ptr-references .payment-templates-list .btn-show-more span,
    .ptr-references .payment-references-list .btn-show-more span,
    .ptr-references .payment-purposes-list .btn-show-more span {
        margin-left: 0.5rem;
    }

@media (max-width: 768px) {
    .ptr-templates .payment-templates-list .btn-show-more,
    .ptr-templates .payment-references-list .btn-show-more,
    .ptr-templates .payment-purposes-list .btn-show-more,
    .ptr-references .payment-templates-list .btn-show-more,
    .ptr-references .payment-references-list .btn-show-more,
    .ptr-references .payment-purposes-list .btn-show-more {
        margin-bottom: 1.125rem;
        width: 100%;
    }
}

.ptr-templates .payment-templates-list .btn-show-more.btn--loading,
.ptr-templates .payment-references-list .btn-show-more.btn--loading,
.ptr-templates .payment-purposes-list .btn-show-more.btn--loading,
.ptr-references .payment-templates-list .btn-show-more.btn--loading,
.ptr-references .payment-references-list .btn-show-more.btn--loading,
.ptr-references .payment-purposes-list .btn-show-more.btn--loading {
    opacity: 0.6;
    cursor: not-allowed;
    position: relative;
}

    .ptr-templates .payment-templates-list .btn-show-more.btn--loading::after,
    .ptr-templates .payment-references-list .btn-show-more.btn--loading::after,
    .ptr-templates .payment-purposes-list .btn-show-more.btn--loading::after,
    .ptr-references .payment-templates-list .btn-show-more.btn--loading::after,
    .ptr-references .payment-references-list .btn-show-more.btn--loading::after,
    .ptr-references .payment-purposes-list .btn-show-more.btn--loading::after {
        content: "";
        position: absolute;
        top: 50%;
        left: 50%;
        margin-left: -8px;
        margin-top: -8px;
        width: 16px;
        height: 16px;
        border: 2px solid transparent;
        border-top: 2px solid currentColor;
        border-radius: 50%;
        animation: spin 1s linear infinite;
    }

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.ptr-templates .payment-templates-list .custom-pagination-selector,
.ptr-templates .payment-references-list .custom-pagination-selector,
.ptr-templates .payment-purposes-list .custom-pagination-selector,
.ptr-references .payment-templates-list .custom-pagination-selector,
.ptr-references .payment-references-list .custom-pagination-selector,
.ptr-references .payment-purposes-list .custom-pagination-selector {
    position: relative;
}

    .ptr-templates .payment-templates-list .custom-pagination-selector .pagination-selector-btn,
    .ptr-templates .payment-references-list .custom-pagination-selector .pagination-selector-btn,
    .ptr-templates .payment-purposes-list .custom-pagination-selector .pagination-selector-btn,
    .ptr-references .payment-templates-list .custom-pagination-selector .pagination-selector-btn,
    .ptr-references .payment-references-list .custom-pagination-selector .pagination-selector-btn,
    .ptr-references .payment-purposes-list .custom-pagination-selector .pagination-selector-btn {
        position: relative;
        display: flex;
        width: 3.5rem;
        margin-right: 0.75rem;
        padding: 0.4rem 2rem 0.3rem 0.5rem;
        color: #27292C;
        background-color: #fff;
        border-radius: 0.25rem;
        border: 1px solid #CDD3DD;
        font-size: 12px;
        transition: 0.32s;
    }

        .ptr-templates .payment-templates-list .custom-pagination-selector .pagination-selector-btn::after,
        .ptr-templates .payment-references-list .custom-pagination-selector .pagination-selector-btn::after,
        .ptr-templates .payment-purposes-list .custom-pagination-selector .pagination-selector-btn::after,
        .ptr-references .payment-templates-list .custom-pagination-selector .pagination-selector-btn::after,
        .ptr-references .payment-references-list .custom-pagination-selector .pagination-selector-btn::after,
        .ptr-references .payment-purposes-list .custom-pagination-selector .pagination-selector-btn::after {
            content: "";
            position: absolute;
            top: 0.25rem;
            right: 0.5rem;
            width: 1rem;
            height: 1rem;
            transform: rotate(180deg);
            transition: 0.3s ease-in-out;
            display: inline-block;
            width: 17px;
            height: 17px;
            background-color: currentColor;
            background-image: none;
            mask-image: url("../img/sprite.svg#icon-arrow-black-down");
        }

.debugUrl .ptr-templates .payment-templates-list .custom-pagination-selector .pagination-selector-btn::after,
.debugUrl .ptr-templates .payment-references-list .custom-pagination-selector .pagination-selector-btn::after,
.debugUrl .ptr-templates .payment-purposes-list .custom-pagination-selector .pagination-selector-btn::after,
.debugUrl .ptr-references .payment-templates-list .custom-pagination-selector .pagination-selector-btn::after,
.debugUrl .ptr-references .payment-references-list .custom-pagination-selector .pagination-selector-btn::after,
.debugUrl .ptr-references .payment-purposes-list .custom-pagination-selector .pagination-selector-btn::after {
    mask-image: url("/Content/themes/novapay/img/sprite.svg#icon-arrow-black-down");
}

.ptr-templates .payment-templates-list .custom-pagination-selector .pagination-selector-btn::after,
.ptr-templates .payment-references-list .custom-pagination-selector .pagination-selector-btn::after,
.ptr-templates .payment-purposes-list .custom-pagination-selector .pagination-selector-btn::after,
.ptr-references .payment-templates-list .custom-pagination-selector .pagination-selector-btn::after,
.ptr-references .payment-references-list .custom-pagination-selector .pagination-selector-btn::after,
.ptr-references .payment-purposes-list .custom-pagination-selector .pagination-selector-btn::after {
    mask-repeat: no-repeat;
    mask-size: contain;
}

.ptr-templates .payment-templates-list .custom-pagination-selector .pagination-selector-btn.dropdown-open:after,
.ptr-templates .payment-references-list .custom-pagination-selector .pagination-selector-btn.dropdown-open:after,
.ptr-templates .payment-purposes-list .custom-pagination-selector .pagination-selector-btn.dropdown-open:after,
.ptr-references .payment-templates-list .custom-pagination-selector .pagination-selector-btn.dropdown-open:after,
.ptr-references .payment-references-list .custom-pagination-selector .pagination-selector-btn.dropdown-open:after,
.ptr-references .payment-purposes-list .custom-pagination-selector .pagination-selector-btn.dropdown-open:after {
    transform: rotate(0deg);
}

.ptr-templates .payment-templates-list .custom-pagination-selector .pagination-selector-dropdown,
.ptr-templates .payment-references-list .custom-pagination-selector .pagination-selector-dropdown,
.ptr-templates .payment-purposes-list .custom-pagination-selector .pagination-selector-dropdown,
.ptr-references .payment-templates-list .custom-pagination-selector .pagination-selector-dropdown,
.ptr-references .payment-references-list .custom-pagination-selector .pagination-selector-dropdown,
.ptr-references .payment-purposes-list .custom-pagination-selector .pagination-selector-dropdown {
    position: absolute;
    bottom: 100%;
    left: 0;
    display: flex;
    flex-direction: column-reverse;
    width: 100%;
    max-width: 3.5rem;
    margin-bottom: 5px;
    overflow: hidden;
    transform: scaleY(0);
    transform-origin: bottom;
    opacity: 0;
    transition: 0.22s ease-in-out;
    z-index: 4;
    border: 1px solid #CDD3DD;
    border-radius: 0.25rem;
}

    .ptr-templates .payment-templates-list .custom-pagination-selector .pagination-selector-dropdown.open,
    .ptr-templates .payment-references-list .custom-pagination-selector .pagination-selector-dropdown.open,
    .ptr-templates .payment-purposes-list .custom-pagination-selector .pagination-selector-dropdown.open,
    .ptr-references .payment-templates-list .custom-pagination-selector .pagination-selector-dropdown.open,
    .ptr-references .payment-references-list .custom-pagination-selector .pagination-selector-dropdown.open,
    .ptr-references .payment-purposes-list .custom-pagination-selector .pagination-selector-dropdown.open {
        transform: scaleY(1);
        opacity: 1;
        z-index: 12;
    }

.ptr-templates .payment-templates-list .custom-pagination-selector .pagination-selector-list,
.ptr-templates .payment-references-list .custom-pagination-selector .pagination-selector-list,
.ptr-templates .payment-purposes-list .custom-pagination-selector .pagination-selector-list,
.ptr-references .payment-templates-list .custom-pagination-selector .pagination-selector-list,
.ptr-references .payment-references-list .custom-pagination-selector .pagination-selector-list,
.ptr-references .payment-purposes-list .custom-pagination-selector .pagination-selector-list {
    display: flex;
    flex-direction: column-reverse;
}

.ptr-templates .payment-templates-list .custom-pagination-selector .pagination-selector-option,
.ptr-templates .payment-references-list .custom-pagination-selector .pagination-selector-option,
.ptr-templates .payment-purposes-list .custom-pagination-selector .pagination-selector-option,
.ptr-references .payment-templates-list .custom-pagination-selector .pagination-selector-option,
.ptr-references .payment-references-list .custom-pagination-selector .pagination-selector-option,
.ptr-references .payment-purposes-list .custom-pagination-selector .pagination-selector-option {
    padding: 0.25rem 0.5rem;
    background-color: #fff;
    border-bottom: 1px solid #e9ecef;
    transition: 0.3s;
}

    .ptr-templates .payment-templates-list .custom-pagination-selector .pagination-selector-option:first-of-type,
    .ptr-templates .payment-references-list .custom-pagination-selector .pagination-selector-option:first-of-type,
    .ptr-templates .payment-purposes-list .custom-pagination-selector .pagination-selector-option:first-of-type,
    .ptr-references .payment-templates-list .custom-pagination-selector .pagination-selector-option:first-of-type,
    .ptr-references .payment-references-list .custom-pagination-selector .pagination-selector-option:first-of-type,
    .ptr-references .payment-purposes-list .custom-pagination-selector .pagination-selector-option:first-of-type {
        border-bottom: 0;
    }

    .ptr-templates .payment-templates-list .custom-pagination-selector .pagination-selector-option:hover,
    .ptr-templates .payment-references-list .custom-pagination-selector .pagination-selector-option:hover,
    .ptr-templates .payment-purposes-list .custom-pagination-selector .pagination-selector-option:hover,
    .ptr-references .payment-templates-list .custom-pagination-selector .pagination-selector-option:hover,
    .ptr-references .payment-references-list .custom-pagination-selector .pagination-selector-option:hover,
    .ptr-references .payment-purposes-list .custom-pagination-selector .pagination-selector-option:hover {
        cursor: pointer;
        background-color: #e9ecef;
    }

.ptr-templates .payment-templates-list__footer-action,
.ptr-templates .payment-references-list__footer-action,
.ptr-templates .payment-purposes-list__footer-action,
.ptr-references .payment-templates-list__footer-action,
.ptr-references .payment-references-list__footer-action,
.ptr-references .payment-purposes-list__footer-action {
    position: sticky;
    bottom: 0;
    display: none;
    gap: 1rem;
    align-items: center;
    padding: 0.75rem 0;
    width: 100%;
    background-color: #fff;
    border-top: 1px solid #DBDFE4;
    border-bottom-left-radius: 0.75rem;
    border-bottom-right-radius: 0.75rem;
    z-index: 10;
}

    .ptr-templates .payment-templates-list__footer-action.visible,
    .ptr-templates .payment-references-list__footer-action.visible,
    .ptr-templates .payment-purposes-list__footer-action.visible,
    .ptr-references .payment-templates-list__footer-action.visible,
    .ptr-references .payment-references-list__footer-action.visible,
    .ptr-references .payment-purposes-list__footer-action.visible {
        display: flex;
    }

@media (max-width: 992px) {
    .ptr-templates .payment-templates-list__footer-action,
    .ptr-templates .payment-references-list__footer-action,
    .ptr-templates .payment-purposes-list__footer-action,
    .ptr-references .payment-templates-list__footer-action,
    .ptr-references .payment-references-list__footer-action,
    .ptr-references .payment-purposes-list__footer-action {
        flex-direction: column;
        gap: 0.75rem;
        padding: 1rem 0;
    }
}

.ptr-templates .payment-templates-list__footer-action .footer-separator-border,
.ptr-templates .payment-references-list__footer-action .footer-separator-border,
.ptr-templates .payment-purposes-list__footer-action .footer-separator-border,
.ptr-references .payment-templates-list__footer-action .footer-separator-border,
.ptr-references .payment-references-list__footer-action .footer-separator-border,
.ptr-references .payment-purposes-list__footer-action .footer-separator-border {
    display: block;
    position: relative;
    width: 0.25rem;
    height: auto;
}

@media (max-width: 992px) {
    .ptr-templates .payment-templates-list__footer-action .footer-separator-border,
    .ptr-templates .payment-references-list__footer-action .footer-separator-border,
    .ptr-templates .payment-purposes-list__footer-action .footer-separator-border,
    .ptr-references .payment-templates-list__footer-action .footer-separator-border,
    .ptr-references .payment-references-list__footer-action .footer-separator-border,
    .ptr-references .payment-purposes-list__footer-action .footer-separator-border {
        display: none;
    }
}

.ptr-templates .payment-templates-list__footer-action .footer-separator-border:before,
.ptr-templates .payment-references-list__footer-action .footer-separator-border:before,
.ptr-templates .payment-purposes-list__footer-action .footer-separator-border:before,
.ptr-references .payment-templates-list__footer-action .footer-separator-border:before,
.ptr-references .payment-references-list__footer-action .footer-separator-border:before,
.ptr-references .payment-purposes-list__footer-action .footer-separator-border:before {
    position: absolute;
    content: "";
    width: 1px;
    left: 50%;
    height: 100%;
    transform: translate(-50%, 0);
    background: #DBDFE4;
}

.ptr-templates .payment-templates-list__footer-action .actions-container-chosens,
.ptr-templates .payment-references-list__footer-action .actions-container-chosens,
.ptr-templates .payment-purposes-list__footer-action .actions-container-chosens,
.ptr-references .payment-templates-list__footer-action .actions-container-chosens,
.ptr-references .payment-references-list__footer-action .actions-container-chosens,
.ptr-references .payment-purposes-list__footer-action .actions-container-chosens {
    display: flex;
    gap: 0.25rem;
    color: #767F8A;
    font-size: 12px;
}

.ptr-templates .payment-templates-list__footer-action .actions-container-btn-group,
.ptr-templates .payment-references-list__footer-action .actions-container-btn-group,
.ptr-templates .payment-purposes-list__footer-action .actions-container-btn-group,
.ptr-references .payment-templates-list__footer-action .actions-container-btn-group,
.ptr-references .payment-references-list__footer-action .actions-container-btn-group,
.ptr-references .payment-purposes-list__footer-action .actions-container-btn-group {
    display: flex;
    gap: 10px;
}

.ptr-templates .payment-templates-list__footer-action .btn-footer-actions,
.ptr-templates .payment-references-list__footer-action .btn-footer-actions,
.ptr-templates .payment-purposes-list__footer-action .btn-footer-actions,
.ptr-references .payment-templates-list__footer-action .btn-footer-actions,
.ptr-references .payment-references-list__footer-action .btn-footer-actions,
.ptr-references .payment-purposes-list__footer-action .btn-footer-actions {
    gap: 0.5rem;
}

.PaymentTemplatesAndReferences .ptr-main .ptr-templates {
    position: relative;
    height: 100%;
}

    .PaymentTemplatesAndReferences .ptr-main .ptr-templates * {
        box-sizing: border-box;
    }

.PaymentTemplatesAndReferences .ptr-main .payment-templates {
    height: 100%;
}

.PaymentTemplatesAndReferences .ptr-main .payment-templates__tab-content {
    height: 100%;
}

    .PaymentTemplatesAndReferences .ptr-main .payment-templates__tab-content.active {
        display: block;
        height: 100%;
    }

.PaymentTemplatesAndReferences .ptr-main .payment-templates-list {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.PaymentTemplatesAndReferences .ptr-main .payment-templates-list__loading-total {
    font-size: 0.75rem;
    color: #32383c;
    font-weight: 500;
}

.PaymentTemplatesAndReferences .ptr-main .payment-templates-list__item {
    position: relative;
    display: flex;
    flex-direction: column;
}

    .PaymentTemplatesAndReferences .ptr-main .payment-templates-list__item:first-of-type .payment-templates-list__header, .PaymentTemplatesAndReferences .ptr-main .payment-templates-list__item:last-of-type .payment-templates-list__header {
        border-top: none;
    }

@media (max-width: 768px) {
    .PaymentTemplatesAndReferences .ptr-main .payment-templates-list__item {
        flex-direction: column;
        padding: 0;
        border-radius: 0.8rem;
        border-color: #DBDFE4;
    }
}

.PaymentTemplatesAndReferences .ptr-main .payment-templates-list__header {
    display: flex;
    gap: 1.25rem;
    padding: 1rem 1.5rem;
    border-bottom: 1px solid #DBDFE4;
    border-top: 1px solid #DBDFE4;
    transition: background-color 0.2s ease;
}

    .PaymentTemplatesAndReferences .ptr-main .payment-templates-list__header:hover {
        background-color: #f9f9f9;
    }

    .PaymentTemplatesAndReferences .ptr-main .payment-templates-list__header .payment-templates-name {
        font-size: 14px;
        font-weight: 500;
        line-height: 1.125rem;
        color: #767F8A;
    }

@media (max-width: 768px) {
    .PaymentTemplatesAndReferences .ptr-main .payment-templates-list__header {
        border-top-color: transparent;
    }
}

.PaymentTemplatesAndReferences .ptr-main .payment-templates-list__info {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex: 1;
}

    .PaymentTemplatesAndReferences .ptr-main .payment-templates-list__info .icon-arrow {
        height: 1rem;
        width: 1rem;
        opacity: 1;
    }

        .PaymentTemplatesAndReferences .ptr-main .payment-templates-list__info .icon-arrow:before {
            content: "";
            position: relative;
            display: block;
            height: 1rem;
            width: 1rem;
            transform: rotate(180deg);
            transition: transform 0.32s ease-out;
            background: url("../img/newDesign/icon/icon-small-up.svg") no-repeat center;
        }

.debugUrl .PaymentTemplatesAndReferences .ptr-main .payment-templates-list__info .icon-arrow:before {
    background: url("/Content/themes/novapay/img/newDesign/icon/icon-small-up.svg") no-repeat center;
}

.PaymentTemplatesAndReferences .ptr-main .payment-templates-list__accordion-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s ease;
}

    .PaymentTemplatesAndReferences .ptr-main .payment-templates-list__accordion-icon.up {
        transform: rotate(180deg);
    }

    .PaymentTemplatesAndReferences .ptr-main .payment-templates-list__accordion-icon.down {
        transform: rotate(0deg);
    }

.PaymentTemplatesAndReferences .ptr-main .payment-templates-list__all-accordion-content {
    transition: all 0.3s ease-in-out;
    max-height: 0;
    opacity: 0;
}

    .PaymentTemplatesAndReferences .ptr-main .payment-templates-list__all-accordion-content.is-expanded {
        max-height: max-content;
        opacity: 1;
    }

        .PaymentTemplatesAndReferences .ptr-main .payment-templates-list__all-accordion-content.is-expanded .payment-templates-list__all-content-item {
            opacity: 1;
            transform: translateY(0);
        }

@media (max-width: 768px) {
    .PaymentTemplatesAndReferences .ptr-main .payment-templates-list__all-accordion-content.is-expanded {
        max-height: max-content !important;
    }
}

@media (max-width: 768px) {
    .PaymentTemplatesAndReferences .ptr-main .payment-templates-list__all-accordion-content {
        display: flex;
        flex-direction: column;
    }
}

.PaymentTemplatesAndReferences .ptr-main .payment-templates-list__all-content-item {
    display: flex;
    align-items: center;
    padding: 1rem 1.5rem;
    opacity: 0;
    transform: translateY(10px);
    transition: all 0.3s ease;
}

    .PaymentTemplatesAndReferences .ptr-main .payment-templates-list__all-content-item:before {
        content: "";
        position: absolute;
        bottom: 0;
        left: 0;
        height: 2px;
        width: 100%;
        background-color: #DBDFE4;
    }

@media (max-width: 768px) {
    .PaymentTemplatesAndReferences .ptr-main .payment-templates-list__all-content-item {
        flex-direction: column;
        align-items: flex-start;
        margin-bottom: 1.5rem;
        padding-right: 0;
        padding-left: 0;
    }
}

@media (max-width: 992px) {
    .PaymentTemplatesAndReferences .ptr-main .payment-templates-list__all-content-item:before {
        height: 1px;
    }
}

.PaymentTemplatesAndReferences .ptr-main .payment-templates-list__all-content-item:last-of-type:before {
    display: none;
}

.PaymentTemplatesAndReferences .ptr-main .payment-templates-list__all-content-item-info {
    display: flex;
    align-items: center;
    flex: 1;
    gap: 1rem;
}

@media (max-width: 768px) {
    .PaymentTemplatesAndReferences .ptr-main .payment-templates-list__all-content-item-info {
        flex-direction: column-reverse;
        align-items: flex-start;
        width: 100%;
        padding-bottom: 1.5rem;
    }
}

.PaymentTemplatesAndReferences .ptr-main .payment-templates-list__all-content-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.75rem;
    border-radius: 0.5rem;
    background-color: #F5EDFF;
}

@media (max-width: 768px) {
    .PaymentTemplatesAndReferences .ptr-main .payment-templates-list__all-content-icon {
        padding: 0;
        background-color: transparent;
    }

        .PaymentTemplatesAndReferences .ptr-main .payment-templates-list__all-content-icon .icon-extracts {
            background-color: #873DDC !important;
            display: inline-block;
            width: 24px;
            height: 24px;
            background-color: currentColor;
            background-image: none;
            mask-image: url("../img/sprite.svg#icon-extracts-template");
        }

    .debugUrl .PaymentTemplatesAndReferences .ptr-main .payment-templates-list__all-content-icon .icon-extracts {
        mask-image: url("/Content/themes/novapay/img/sprite.svg#icon-extracts-template");
    }

    .PaymentTemplatesAndReferences .ptr-main .payment-templates-list__all-content-icon .icon-extracts {
        mask-repeat: no-repeat;
        mask-size: contain;
    }
}

.PaymentTemplatesAndReferences .ptr-main .payment-templates-list__all-content-wrapper {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.PaymentTemplatesAndReferences .ptr-main .payment-templates-list__all-content-info {
    display: flex;
    gap: 1rem;
    align-items: center;
    max-width: 55%;
}

@media (max-width: 768px) {
    .PaymentTemplatesAndReferences .ptr-main .payment-templates-list__all-content-info {
        gap: 0.75rem;
        width: 100%;
        max-width: 100%;
        padding-left: 0.75rem;
        padding-right: 0.75rem;
    }
}

.PaymentTemplatesAndReferences .ptr-main .payment-templates-list__all-content-purpose {
    font-size: 16px;
    font-weight: 500;
    line-height: 1.125rem;
    color: #32383c;
}

.PaymentTemplatesAndReferences .ptr-main .payment-templates-list .template-purpose {
    font-size: 12px;
    line-height: 1rem;
    color: #767F8A;
}

.PaymentTemplatesAndReferences .ptr-main .payment-templates-list__reminder {
    font-size: 14px;
    font-weight: 500;
    color: #32383c;
}

@media (max-width: 768px) {
    .PaymentTemplatesAndReferences .ptr-main .payment-templates-list__reminder {
        width: 100%;
    }
}

.PaymentTemplatesAndReferences .ptr-main .payment-templates-list__reminder-status {
    display: flex;
    align-items: center;
    justify-items: center;
    padding: 0.5rem 0.75rem;
    border-radius: 0.5rem;
}

.PaymentTemplatesAndReferences .ptr-main .payment-templates-list__reminder-status--active {
    background-color: #DEF5FA;
}

.PaymentTemplatesAndReferences .ptr-main .payment-templates-list__reminder-status--disabled {
    background-color: #F4F6F7;
}

@media (max-width: 768px) {
    .PaymentTemplatesAndReferences .ptr-main .payment-templates-list__reminder-status {
        border-radius: 0;
    }
}

.PaymentTemplatesAndReferences .ptr-main .payment-templates-list__all-content-select {
    margin-left: auto;
}

.PaymentTemplatesAndReferences .ptr-main .payment-templates-list__all-content-select-label-btn {
    display: flex;
    align-items: center;
    padding: 0.5rem 0.75rem;
    min-width: 9.063rem;
    border-radius: 0.5rem;
    border: none;
    font-size: 14px;
    color: #464B53;
    background: #EDEFF1;
    cursor: pointer;
}

    .PaymentTemplatesAndReferences .ptr-main .payment-templates-list__all-content-select-label-btn__disabled, .PaymentTemplatesAndReferences .ptr-main .payment-templates-list__all-content-select-label-btn:disabled {
        pointer-events: none;
        cursor: not-allowed;
        opacity: 0.5;
    }

    .PaymentTemplatesAndReferences .ptr-main .payment-templates-list__all-content-select-label-btn:hover {
        border-color: rgb(51.0416666667%, 13.1915266106%, 94.6516106443%);
        color: rgb(31.8014705882%, 3.93732493%, 63.9058123249%);
        background-color: #F5EDFF;
        transition: background-color 0.42s ease-out;
    }

    .PaymentTemplatesAndReferences .ptr-main .payment-templates-list__all-content-select-label-btn:active {
        border-color: rgb(31.8014705882%, 3.93732493%, 63.9058123249%);
        color: rgb(31.8014705882%, 3.93732493%, 63.9058123249%);
        transition: background-color 0.42s ease-out;
    }

@media (max-width: 768px) {
    .PaymentTemplatesAndReferences .ptr-main .payment-templates-list__all-content-select-label-btn {
        justify-content: center;
        width: 100%;
    }
}

.PaymentTemplatesAndReferences .ptr-main .payment-templates-list .btn-control-templates-item-dropdown {
    padding: 0;
}

.PaymentTemplatesAndReferences .ptr-main .payment-templates-list__actions-purpose {
    position: relative;
    display: flex;
}

@media (max-width: 992px) {
    .PaymentTemplatesAndReferences .ptr-main .payment-templates-list__actions-purpose {
        gap: 0.75rem;
    }
}

@media (max-width: 768px) {
    .PaymentTemplatesAndReferences .ptr-main .payment-templates-list__actions-purpose {
        width: 100%;
        padding-left: 0.75rem;
        padding-right: 0.75rem;
    }
}

.PaymentTemplatesAndReferences .ptr-main .payment-templates-list .purpose-switcher-action {
    position: relative;
    cursor: pointer;
    user-select: none;
}

    .PaymentTemplatesAndReferences .ptr-main .payment-templates-list .purpose-switcher-action .checkbox-purpose-switcher {
        position: absolute;
        opacity: 0;
        width: 0;
        height: 0;
        pointer-events: none;
    }

        .PaymentTemplatesAndReferences .ptr-main .payment-templates-list .purpose-switcher-action .checkbox-purpose-switcher:checked ~ .icon-activate-new {
            display: none !important;
        }

        .PaymentTemplatesAndReferences .ptr-main .payment-templates-list .purpose-switcher-action .checkbox-purpose-switcher:checked ~ .icon-deactivate-new {
            background-color: #EB4235;
            display: block !important;
        }

        .PaymentTemplatesAndReferences .ptr-main .payment-templates-list .purpose-switcher-action .checkbox-purpose-switcher:checked ~ .btn-actions__content-activate {
            display: none !important;
        }

        .PaymentTemplatesAndReferences .ptr-main .payment-templates-list .purpose-switcher-action .checkbox-purpose-switcher:checked ~ .btn-actions__content-deactivate {
            display: block !important;
        }

    .PaymentTemplatesAndReferences .ptr-main .payment-templates-list .purpose-switcher-action .icon-activate-new,
    .PaymentTemplatesAndReferences .ptr-main .payment-templates-list .purpose-switcher-action .icon-deactivate-new {
        display: block;
        width: 1.25rem;
        height: 1.25rem;
        flex-shrink: 0;
    }

    .PaymentTemplatesAndReferences .ptr-main .payment-templates-list .purpose-switcher-action .icon-activate-new {
        display: block;
    }

    .PaymentTemplatesAndReferences .ptr-main .payment-templates-list .purpose-switcher-action .icon-deactivate-new {
        display: none;
    }

    .PaymentTemplatesAndReferences .ptr-main .payment-templates-list .purpose-switcher-action .btn-actions__content.btn-actions__content-activate {
        display: block;
    }

    .PaymentTemplatesAndReferences .ptr-main .payment-templates-list .purpose-switcher-action .btn-actions__content.btn-actions__content-deactivate {
        display: none;
        color: #EB4235;
    }

    .PaymentTemplatesAndReferences .ptr-main .payment-templates-list .purpose-switcher-action:hover:not(:has(.checkbox-purpose-switcher:checked)) {
        background-color: #e1f2ef;
    }

    .PaymentTemplatesAndReferences .ptr-main .payment-templates-list .purpose-switcher-action:hover:has(.checkbox-purpose-switcher:checked):hover {
        background-color: #ffeaea;
    }

    .PaymentTemplatesAndReferences .ptr-main .payment-templates-list .purpose-switcher-action:hover .icon-activate-new {
        background-color: #22967F !important;
    }

    .PaymentTemplatesAndReferences .ptr-main .payment-templates-list .purpose-switcher-action:hover .icon-deactivate-new {
        background-color: #EB4235 !important;
    }

    .PaymentTemplatesAndReferences .ptr-main .payment-templates-list .purpose-switcher-action:hover .btn-actions__content-activate {
        color: #22967F;
    }

    .PaymentTemplatesAndReferences .ptr-main .payment-templates-list .purpose-switcher-action:hover .btn-actions__content-deactivate {
        color: #EB4235;
    }

.PaymentTemplatesAndReferences .ptr-main .payment-templates-list .purpose-switcher-action {
    transition: all 0.3s ease;
}

    .PaymentTemplatesAndReferences .ptr-main .payment-templates-list .purpose-switcher-action .icon-activate-new,
    .PaymentTemplatesAndReferences .ptr-main .payment-templates-list .purpose-switcher-action .icon-deactivate-new {
        transition: opacity 0.3s ease, transform 0.3s ease;
    }

    .PaymentTemplatesAndReferences .ptr-main .payment-templates-list .purpose-switcher-action .icon-deactivate-new,
    .PaymentTemplatesAndReferences .ptr-main .payment-templates-list .purpose-switcher-action .btn-actions__content-deactivate {
        animation: fadeInOut 0.3s ease forwards;
    }

@keyframes fadeInOut {
    0% {
        opacity: 0;
        transform: scale(0.8);
    }

    50% {
        opacity: 0.5;
    }

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

.PaymentTemplatesAndReferences .ptr-main .ptr-references {
    position: relative;
    height: 100%;
}

    .PaymentTemplatesAndReferences .ptr-main .ptr-references * {
        box-sizing: border-box;
    }

.PaymentTemplatesAndReferences .ptr-main .payment-references,
.PaymentTemplatesAndReferences .ptr-main .payment-purposes {
    height: 100%;
}

.PaymentTemplatesAndReferences .ptr-main .payment-references__tab-content,
.PaymentTemplatesAndReferences .ptr-main .payment-purposes__tab-content {
    display: none;
}

    .PaymentTemplatesAndReferences .ptr-main .payment-references__tab-content.active,
    .PaymentTemplatesAndReferences .ptr-main .payment-purposes__tab-content.active {
        display: block;
        height: 100%;
    }

.PaymentTemplatesAndReferences .ptr-main .payment-purposes-list:not(:last-of-type) {
    border-bottom: 1px solid #DBDFE4;
}

.PaymentTemplatesAndReferences .ptr-main .payment-references-list,
.PaymentTemplatesAndReferences .ptr-main .payment-purposes-list {
    display: flex;
    flex-direction: column;
    position: relative;
    height: 100%;
    overflow: hidden;
}

.PaymentTemplatesAndReferences .ptr-main .payment-references-list__item,
.PaymentTemplatesAndReferences .ptr-main .payment-purposes-list__item {
    position: relative;
    display: flex;
    flex-direction: column;
}

    .PaymentTemplatesAndReferences .ptr-main .payment-references-list__item:first-of-type .payment-purposes-list__header,
    .PaymentTemplatesAndReferences .ptr-main .payment-references-list__item:first-of-type .payment-references-list__header, .PaymentTemplatesAndReferences .ptr-main .payment-references-list__item:last-of-type .payment-purposes-list__header,
    .PaymentTemplatesAndReferences .ptr-main .payment-references-list__item:last-of-type .payment-references-list__header,
    .PaymentTemplatesAndReferences .ptr-main .payment-purposes-list__item:first-of-type .payment-purposes-list__header,
    .PaymentTemplatesAndReferences .ptr-main .payment-purposes-list__item:first-of-type .payment-references-list__header,
    .PaymentTemplatesAndReferences .ptr-main .payment-purposes-list__item:last-of-type .payment-purposes-list__header,
    .PaymentTemplatesAndReferences .ptr-main .payment-purposes-list__item:last-of-type .payment-references-list__header {
        border-top: none;
    }

@media (max-width: 768px) {
    .PaymentTemplatesAndReferences .ptr-main .payment-references-list__item,
    .PaymentTemplatesAndReferences .ptr-main .payment-purposes-list__item {
        flex-direction: column;
        padding: 0.75rem;
        border-radius: 0.8rem;
        border-color: #DBDFE4;
    }
}

.PaymentTemplatesAndReferences .ptr-main .payment-references-list__header,
.PaymentTemplatesAndReferences .ptr-main .payment-purposes-list__header {
    display: flex;
    gap: 1.25rem;
    padding: 1rem 1.5rem;
    border-bottom: 1px solid #DBDFE4;
    border-top: 1px solid #DBDFE4;
    transition: background-color 0.2s ease;
}

    .PaymentTemplatesAndReferences .ptr-main .payment-references-list__header:hover,
    .PaymentTemplatesAndReferences .ptr-main .payment-purposes-list__header:hover {
        background-color: #f9f9f9;
    }

    .PaymentTemplatesAndReferences .ptr-main .payment-references-list__header .payment-references-name,
    .PaymentTemplatesAndReferences .ptr-main .payment-references-list__header .payment-purposes-name,
    .PaymentTemplatesAndReferences .ptr-main .payment-purposes-list__header .payment-references-name,
    .PaymentTemplatesAndReferences .ptr-main .payment-purposes-list__header .payment-purposes-name {
        display: block;
        max-width: 75%;
        font-size: 14px;
        font-weight: 500;
        line-height: 1.125rem;
        color: #767F8A;
        word-break: break-all;
    }

@media (max-width: 768px) {
    .PaymentTemplatesAndReferences .ptr-main .payment-references-list__header,
    .PaymentTemplatesAndReferences .ptr-main .payment-purposes-list__header {
        border-top: none;
    }
}

.PaymentTemplatesAndReferences .ptr-main .payment-references-list__info,
.PaymentTemplatesAndReferences .ptr-main .payment-purposes-list__info {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex: 1;
}

    .PaymentTemplatesAndReferences .ptr-main .payment-references-list__info .icon-arrow,
    .PaymentTemplatesAndReferences .ptr-main .payment-purposes-list__info .icon-arrow {
        height: 1rem;
        width: 1rem;
        opacity: 1;
    }

        .PaymentTemplatesAndReferences .ptr-main .payment-references-list__info .icon-arrow:before,
        .PaymentTemplatesAndReferences .ptr-main .payment-purposes-list__info .icon-arrow:before {
            content: "";
            position: relative;
            display: block;
            height: 1rem;
            width: 1rem;
            transform: rotate(180deg);
            transition: transform 0.32s ease-out;
            background: url("../img/newDesign/icon/icon-small-up.svg") no-repeat center;
        }

.debugUrl .PaymentTemplatesAndReferences .ptr-main .payment-references-list__info .icon-arrow:before,
.debugUrl .PaymentTemplatesAndReferences .ptr-main .payment-purposes-list__info .icon-arrow:before {
    background: url("/Content/themes/novapay/img/newDesign/icon/icon-small-up.svg") no-repeat center;
}

.PaymentTemplatesAndReferences .ptr-main .payment-references-list__accordion-icon,
.PaymentTemplatesAndReferences .ptr-main .payment-purposes-list__accordion-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s ease;
}

    .PaymentTemplatesAndReferences .ptr-main .payment-references-list__accordion-icon.up,
    .PaymentTemplatesAndReferences .ptr-main .payment-purposes-list__accordion-icon.up {
        transform: rotate(180deg);
    }

    .PaymentTemplatesAndReferences .ptr-main .payment-references-list__accordion-icon.down,
    .PaymentTemplatesAndReferences .ptr-main .payment-purposes-list__accordion-icon.down {
        transform: rotate(0deg);
    }

.PaymentTemplatesAndReferences .ptr-main .payment-references-list__accordion-content,
.PaymentTemplatesAndReferences .ptr-main .payment-purposes-list__accordion-content {
    transition: all 0.3s ease-in-out;
    max-height: 0;
    opacity: 0;
}

    .PaymentTemplatesAndReferences .ptr-main .payment-references-list__accordion-content.is-expanded,
    .PaymentTemplatesAndReferences .ptr-main .payment-purposes-list__accordion-content.is-expanded {
        max-height: max-content;
        opacity: 1;
    }

        .PaymentTemplatesAndReferences .ptr-main .payment-references-list__accordion-content.is-expanded .payment-references-list__contractor-item,
        .PaymentTemplatesAndReferences .ptr-main .payment-references-list__accordion-content.is-expanded .payment-purposes-list__purpose-item,
        .PaymentTemplatesAndReferences .ptr-main .payment-purposes-list__accordion-content.is-expanded .payment-references-list__contractor-item,
        .PaymentTemplatesAndReferences .ptr-main .payment-purposes-list__accordion-content.is-expanded .payment-purposes-list__purpose-item {
            opacity: 1;
            transform: translateY(0);
        }

@media (max-width: 768px) {
    .PaymentTemplatesAndReferences .ptr-main .payment-references-list__accordion-content.is-expanded,
    .PaymentTemplatesAndReferences .ptr-main .payment-purposes-list__accordion-content.is-expanded {
        max-height: max-content !important;
    }
}

.PaymentTemplatesAndReferences .ptr-main .payment-references-list__contractor-item, .PaymentTemplatesAndReferences .ptr-main .payment-references-list__purpose-item,
.PaymentTemplatesAndReferences .ptr-main .payment-purposes-list__contractor-item,
.PaymentTemplatesAndReferences .ptr-main .payment-purposes-list__purpose-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 1.5rem;
    opacity: 0;
    transform: translateY(10px);
    transition: all 0.3s ease;
}

    .PaymentTemplatesAndReferences .ptr-main .payment-references-list__contractor-item:before, .PaymentTemplatesAndReferences .ptr-main .payment-references-list__purpose-item:before,
    .PaymentTemplatesAndReferences .ptr-main .payment-purposes-list__contractor-item:before,
    .PaymentTemplatesAndReferences .ptr-main .payment-purposes-list__purpose-item:before {
        content: "";
        position: absolute;
        bottom: 0;
        left: 0;
        height: 2px;
        width: 100%;
        background-color: #DBDFE4;
    }

@media (max-width: 768px) {
    .PaymentTemplatesAndReferences .ptr-main .payment-references-list__contractor-item, .PaymentTemplatesAndReferences .ptr-main .payment-references-list__purpose-item,
    .PaymentTemplatesAndReferences .ptr-main .payment-purposes-list__contractor-item,
    .PaymentTemplatesAndReferences .ptr-main .payment-purposes-list__purpose-item {
        flex-direction: column;
        align-items: start;
        padding-right: 0;
        padding-left: 0;
        border-top: 1px solid #DBDFE4;
    }

        .PaymentTemplatesAndReferences .ptr-main .payment-references-list__contractor-item:before, .PaymentTemplatesAndReferences .ptr-main .payment-references-list__purpose-item:before,
        .PaymentTemplatesAndReferences .ptr-main .payment-purposes-list__contractor-item:before,
        .PaymentTemplatesAndReferences .ptr-main .payment-purposes-list__purpose-item:before {
            display: none;
        }
}

.PaymentTemplatesAndReferences .ptr-main .payment-references-list__contractor-item:last-of-type:before, .PaymentTemplatesAndReferences .ptr-main .payment-references-list__purpose-item:last-of-type:before,
.PaymentTemplatesAndReferences .ptr-main .payment-purposes-list__contractor-item:last-of-type:before,
.PaymentTemplatesAndReferences .ptr-main .payment-purposes-list__purpose-item:last-of-type:before {
    display: none;
}

.PaymentTemplatesAndReferences .ptr-main .payment-references-list__contractor-item:has(.dropdown-block-purpose.open), .PaymentTemplatesAndReferences .ptr-main .payment-references-list__purpose-item:has(.dropdown-block-purpose.open),
.PaymentTemplatesAndReferences .ptr-main .payment-purposes-list__contractor-item:has(.dropdown-block-purpose.open),
.PaymentTemplatesAndReferences .ptr-main .payment-purposes-list__purpose-item:has(.dropdown-block-purpose.open) {
    position: relative;
    z-index: 1;
}

    .PaymentTemplatesAndReferences .ptr-main .payment-references-list__contractor-item:has(.dropdown-block-purpose.open) .dropdown-block-purpose.open, .PaymentTemplatesAndReferences .ptr-main .payment-references-list__purpose-item:has(.dropdown-block-purpose.open) .dropdown-block-purpose.open,
    .PaymentTemplatesAndReferences .ptr-main .payment-purposes-list__contractor-item:has(.dropdown-block-purpose.open) .dropdown-block-purpose.open,
    .PaymentTemplatesAndReferences .ptr-main .payment-purposes-list__purpose-item:has(.dropdown-block-purpose.open) .dropdown-block-purpose.open {
        z-index: 1000;
    }

.PaymentTemplatesAndReferences .ptr-main .payment-references-list__purpose-item-info, .PaymentTemplatesAndReferences .ptr-main .payment-references-list__contractor-item-info,
.PaymentTemplatesAndReferences .ptr-main .payment-purposes-list__purpose-item-info,
.PaymentTemplatesAndReferences .ptr-main .payment-purposes-list__contractor-item-info {
    display: flex;
    align-items: center;
    flex: 1;
    gap: 1rem;
}

@media (max-width: 768px) {
    .PaymentTemplatesAndReferences .ptr-main .payment-references-list__purpose-item-info, .PaymentTemplatesAndReferences .ptr-main .payment-references-list__contractor-item-info,
    .PaymentTemplatesAndReferences .ptr-main .payment-purposes-list__purpose-item-info,
    .PaymentTemplatesAndReferences .ptr-main .payment-purposes-list__contractor-item-info {
        flex-direction: column;
        align-items: start;
    }
}

.PaymentTemplatesAndReferences .ptr-main .payment-references-list__purpose-icon, .PaymentTemplatesAndReferences .ptr-main .payment-references-list__contractor-icon,
.PaymentTemplatesAndReferences .ptr-main .payment-purposes-list__purpose-icon,
.PaymentTemplatesAndReferences .ptr-main .payment-purposes-list__contractor-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.75rem;
    border-radius: 0.5rem;
    background-color: #F5EDFF;
}

@media (max-width: 768px) {
    .PaymentTemplatesAndReferences .ptr-main .payment-references-list__purpose-icon, .PaymentTemplatesAndReferences .ptr-main .payment-references-list__contractor-icon,
    .PaymentTemplatesAndReferences .ptr-main .payment-purposes-list__purpose-icon,
    .PaymentTemplatesAndReferences .ptr-main .payment-purposes-list__contractor-icon {
        display: none;
        padding: 0;
        background-color: transparent;
    }
}

.PaymentTemplatesAndReferences .ptr-main .payment-references-list__purpose-info, .PaymentTemplatesAndReferences .ptr-main .payment-references-list__contractor-info,
.PaymentTemplatesAndReferences .ptr-main .payment-purposes-list__purpose-info,
.PaymentTemplatesAndReferences .ptr-main .payment-purposes-list__contractor-info {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    max-width: 55%;
}

@media (max-width: 768px) {
    .PaymentTemplatesAndReferences .ptr-main .payment-references-list__purpose-info, .PaymentTemplatesAndReferences .ptr-main .payment-references-list__contractor-info,
    .PaymentTemplatesAndReferences .ptr-main .payment-purposes-list__purpose-info,
    .PaymentTemplatesAndReferences .ptr-main .payment-purposes-list__contractor-info {
        gap: 0.75rem;
        width: 100%;
        max-width: 100%;
        padding-left: 0.75rem;
        padding-right: 0.75rem;
        padding-right: 0.75rem;
    }
}

.PaymentTemplatesAndReferences .ptr-main .payment-references-list__purpose-name-purpose, .PaymentTemplatesAndReferences .ptr-main .payment-references-list__contractor-name-purpose,
.PaymentTemplatesAndReferences .ptr-main .payment-purposes-list__purpose-name-purpose,
.PaymentTemplatesAndReferences .ptr-main .payment-purposes-list__contractor-name-purpose {
    overflow-wrap: break-word;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.125rem;
    color: #32383c;
}

.PaymentTemplatesAndReferences .ptr-main .payment-references-list__purpose-iBan, .PaymentTemplatesAndReferences .ptr-main .payment-references-list__contractor-iBan,
.PaymentTemplatesAndReferences .ptr-main .payment-purposes-list__purpose-iBan,
.PaymentTemplatesAndReferences .ptr-main .payment-purposes-list__contractor-iBan {
    font-size: 12px;
    line-height: 1rem;
    color: #767F8A;
}

.PaymentTemplatesAndReferences .ptr-main .payment-references-list__purpose-select-label-btn, .PaymentTemplatesAndReferences .ptr-main .payment-references-list__contractor-select-label-btn,
.PaymentTemplatesAndReferences .ptr-main .payment-purposes-list__purpose-select-label-btn,
.PaymentTemplatesAndReferences .ptr-main .payment-purposes-list__contractor-select-label-btn {
    display: flex;
    align-items: center;
    padding: 0.5rem 0.75rem;
    min-width: 9.063rem;
    border-radius: 0.5rem;
    border: none;
    font-size: 14px;
    color: #464B53;
    background: #EDEFF1;
    cursor: pointer;
}

    .PaymentTemplatesAndReferences .ptr-main .payment-references-list__purpose-select-label-btn__disabled, .PaymentTemplatesAndReferences .ptr-main .payment-references-list__purpose-select-label-btn:disabled, .PaymentTemplatesAndReferences .ptr-main .payment-references-list__contractor-select-label-btn__disabled, .PaymentTemplatesAndReferences .ptr-main .payment-references-list__contractor-select-label-btn:disabled,
    .PaymentTemplatesAndReferences .ptr-main .payment-purposes-list__purpose-select-label-btn__disabled,
    .PaymentTemplatesAndReferences .ptr-main .payment-purposes-list__purpose-select-label-btn:disabled,
    .PaymentTemplatesAndReferences .ptr-main .payment-purposes-list__contractor-select-label-btn__disabled,
    .PaymentTemplatesAndReferences .ptr-main .payment-purposes-list__contractor-select-label-btn:disabled {
        pointer-events: none;
        cursor: not-allowed;
        opacity: 0.5;
    }

    .PaymentTemplatesAndReferences .ptr-main .payment-references-list__purpose-select-label-btn:hover, .PaymentTemplatesAndReferences .ptr-main .payment-references-list__contractor-select-label-btn:hover,
    .PaymentTemplatesAndReferences .ptr-main .payment-purposes-list__purpose-select-label-btn:hover,
    .PaymentTemplatesAndReferences .ptr-main .payment-purposes-list__contractor-select-label-btn:hover {
        border-color: rgb(51.0416666667%, 13.1915266106%, 94.6516106443%);
        color: rgb(31.8014705882%, 3.93732493%, 63.9058123249%);
        background-color: #F5EDFF;
        transition: background-color 0.42s ease-out;
    }

    .PaymentTemplatesAndReferences .ptr-main .payment-references-list__purpose-select-label-btn:active, .PaymentTemplatesAndReferences .ptr-main .payment-references-list__contractor-select-label-btn:active,
    .PaymentTemplatesAndReferences .ptr-main .payment-purposes-list__purpose-select-label-btn:active,
    .PaymentTemplatesAndReferences .ptr-main .payment-purposes-list__contractor-select-label-btn:active {
        border-color: rgb(31.8014705882%, 3.93732493%, 63.9058123249%);
        color: rgb(31.8014705882%, 3.93732493%, 63.9058123249%);
        transition: background-color 0.42s ease-out;
    }

@media (max-width: 768px) {
    .PaymentTemplatesAndReferences .ptr-main .payment-references-list__purpose-select-label-btn, .PaymentTemplatesAndReferences .ptr-main .payment-references-list__contractor-select-label-btn,
    .PaymentTemplatesAndReferences .ptr-main .payment-purposes-list__purpose-select-label-btn,
    .PaymentTemplatesAndReferences .ptr-main .payment-purposes-list__contractor-select-label-btn {
        flex: 1;
        justify-content: center;
        width: 100%;
    }
}

.PaymentTemplatesAndReferences .ptr-main .payment-references-list__actions,
.PaymentTemplatesAndReferences .ptr-main .payment-purposes-list__actions {
    position: relative;
    display: flex;
}

@media (max-width: 1200px) {
    .PaymentTemplatesAndReferences .ptr-main .payment-references-list__actions,
    .PaymentTemplatesAndReferences .ptr-main .payment-purposes-list__actions {
        gap: 0.75rem;
    }
}

@media (max-width: 768px) {
    .PaymentTemplatesAndReferences .ptr-main .payment-references-list__actions,
    .PaymentTemplatesAndReferences .ptr-main .payment-purposes-list__actions {
        width: 100%;
    }
}

.PaymentTemplatesAndReferences .ptr-main .payment-references-list__actions .btn-control-templates-item-dropdown,
.PaymentTemplatesAndReferences .ptr-main .payment-purposes-list__actions .btn-control-templates-item-dropdown {
    padding: 0;
}

@media (max-width: 992px) {
    .PaymentTemplatesAndReferences .ptr-main .payment-references-list__actions .btn-control-templates-item-dropdown,
    .PaymentTemplatesAndReferences .ptr-main .payment-purposes-list__actions .btn-control-templates-item-dropdown {
        width: 2.5rem;
    }
}

.PaymentTemplatesAndReferences .ptr-main .payment-references-list__actions-purpose,
.PaymentTemplatesAndReferences .ptr-main .payment-purposes-list__actions-purpose {
    cursor: pointer;
    position: relative;
    display: flex;
}

.PaymentTemplatesAndReferences .ptr-main .payment-references-list .btn-control-purposes-item-dropdown,
.PaymentTemplatesAndReferences .ptr-main .payment-purposes-list .btn-control-purposes-item-dropdown {
    width: 2rem;
    height: 2rem;
    padding: 0;
    border-radius: 0.5rem;
    background: transparent;
    border: none;
    outline: none;
    color: #202427;
}

    .PaymentTemplatesAndReferences .ptr-main .payment-references-list .btn-control-purposes-item-dropdown .icon-vertical-dot,
    .PaymentTemplatesAndReferences .ptr-main .payment-purposes-list .btn-control-purposes-item-dropdown .icon-vertical-dot {
        color: #DBDFE4;
    }

    .PaymentTemplatesAndReferences .ptr-main .payment-references-list .btn-control-purposes-item-dropdown:hover .icon-vertical-dot, .PaymentTemplatesAndReferences .ptr-main .payment-references-list .btn-control-purposes-item-dropdown:active .icon-vertical-dot, .PaymentTemplatesAndReferences .ptr-main .payment-references-list .btn-control-purposes-item-dropdown:focus .icon-vertical-dot,
    .PaymentTemplatesAndReferences .ptr-main .payment-purposes-list .btn-control-purposes-item-dropdown:hover .icon-vertical-dot,
    .PaymentTemplatesAndReferences .ptr-main .payment-purposes-list .btn-control-purposes-item-dropdown:active .icon-vertical-dot,
    .PaymentTemplatesAndReferences .ptr-main .payment-purposes-list .btn-control-purposes-item-dropdown:focus .icon-vertical-dot {
        color: #767F8A;
    }

    .PaymentTemplatesAndReferences .ptr-main .payment-references-list .btn-control-purposes-item-dropdown span,
    .PaymentTemplatesAndReferences .ptr-main .payment-purposes-list .btn-control-purposes-item-dropdown span {
        cursor: pointer;
        position: relative;
    }

    .PaymentTemplatesAndReferences .ptr-main .payment-references-list .btn-control-purposes-item-dropdown .content-text,
    .PaymentTemplatesAndReferences .ptr-main .payment-purposes-list .btn-control-purposes-item-dropdown .content-text {
        display: none;
    }

@media (max-width: 992px) {
    .PaymentTemplatesAndReferences .ptr-main .payment-references-list .btn-control-purposes-item-dropdown,
    .PaymentTemplatesAndReferences .ptr-main .payment-purposes-list .btn-control-purposes-item-dropdown {
        width: 100%;
        border-radius: 0.5rem;
        border: 1px solid #DBDFE4;
        background: transparent;
        font-weight: 500;
    }

        .PaymentTemplatesAndReferences .ptr-main .payment-references-list .btn-control-purposes-item-dropdown .content-dot,
        .PaymentTemplatesAndReferences .ptr-main .payment-purposes-list .btn-control-purposes-item-dropdown .content-dot {
            display: none;
        }

        .PaymentTemplatesAndReferences .ptr-main .payment-references-list .btn-control-purposes-item-dropdown .content-text,
        .PaymentTemplatesAndReferences .ptr-main .payment-purposes-list .btn-control-purposes-item-dropdown .content-text {
            display: block;
            width: 100%;
            padding: 0.5rem;
            font-size: 14px;
            text-align: center;
            line-height: 1.35;
        }
}

.PaymentTemplatesAndReferences .ptr-main .payment-references-list .dropdown-block-purpose.open,
.PaymentTemplatesAndReferences .ptr-main .payment-purposes-list .dropdown-block-purpose.open {
    display: flex;
    top: 0;
    left: -135px;
    transform: scaleY(1);
    transform: translateX(-40%);
}

@media (min-width: 106rem) {
    .PaymentTemplatesAndReferences .ptr-main .payment-references-list .dropdown-block-purpose.open,
    .PaymentTemplatesAndReferences .ptr-main .payment-purposes-list .dropdown-block-purpose.open {
        left: -80px;
        transform: translateX(0);
    }
}

@media (max-width: 992px) {
    .PaymentTemplatesAndReferences .ptr-main .payment-references-list .dropdown-block-purpose.open,
    .PaymentTemplatesAndReferences .ptr-main .payment-purposes-list .dropdown-block-purpose.open {
        left: 50%;
        top: 3rem;
        width: 100%;
    }
}

@media (max-width: 768px) {
    .PaymentTemplatesAndReferences .ptr-main .payment-references-list .dropdown-block-purpose.open,
    .PaymentTemplatesAndReferences .ptr-main .payment-purposes-list .dropdown-block-purpose.open {
        position: fixed;
        bottom: 0;
        left: 0;
        top: auto;
        padding-bottom: 2rem;
        border-bottom-right-radius: 0;
        border-bottom-left-radius: 0;
        border-top-right-radius: 1rem;
        border-top-left-radius: 1rem;
        transform: translateX(0);
        overflow: inherit;
        box-shadow: none;
        z-index: 10002;
    }
}

.PaymentTemplatesAndReferences .ptr-main .payment-references-list .btn-actions,
.PaymentTemplatesAndReferences .ptr-main .payment-purposes-list .btn-actions {
    display: inline-flex;
    align-items: center;
    justify-content: left;
    gap: 0.5rem;
    white-space: nowrap;
    min-width: 146px;
    padding: 0.5rem;
    border-radius: 0.5rem;
    background-color: #fff;
    border: none;
    color: #767F8A;
    cursor: pointer;
    font-size: 12px;
    font-weight: 500;
    text-align: left;
}

@media (max-width: 992px) {
    .PaymentTemplatesAndReferences .ptr-main .payment-references-list .btn-actions,
    .PaymentTemplatesAndReferences .ptr-main .payment-purposes-list .btn-actions {
        flex: 1 1 auto;
    }
}

.PaymentTemplatesAndReferences .ptr-main .payment-references-list .btn-actions:hover,
.PaymentTemplatesAndReferences .ptr-main .payment-purposes-list .btn-actions:hover {
    background-color: #f5edff;
    transition: background-color 0.42s ease-out;
    border: none;
    color: #5E1CAB;
}

    .PaymentTemplatesAndReferences .ptr-main .payment-references-list .btn-actions:hover .icon-copy-payment,
    .PaymentTemplatesAndReferences .ptr-main .payment-references-list .btn-actions:hover .icon-edit-payment,
    .PaymentTemplatesAndReferences .ptr-main .payment-purposes-list .btn-actions:hover .icon-copy-payment,
    .PaymentTemplatesAndReferences .ptr-main .payment-purposes-list .btn-actions:hover .icon-edit-payment {
        background-color: #690DD3 !important;
    }

.PaymentTemplatesAndReferences .ptr-main .payment-references-list .btn-actions .icon-copy-payment,
.PaymentTemplatesAndReferences .ptr-main .payment-references-list .btn-actions .icon-edit-payment,
.PaymentTemplatesAndReferences .ptr-main .payment-references-list .btn-actions .icon-pen-edit,
.PaymentTemplatesAndReferences .ptr-main .payment-purposes-list .btn-actions .icon-copy-payment,
.PaymentTemplatesAndReferences .ptr-main .payment-purposes-list .btn-actions .icon-edit-payment,
.PaymentTemplatesAndReferences .ptr-main .payment-purposes-list .btn-actions .icon-pen-edit {
    width: 1.25rem;
}

.PaymentTemplatesAndReferences .ptr-main .payment-references-list .btn-actions.actions-negative,
.PaymentTemplatesAndReferences .ptr-main .payment-purposes-list .btn-actions.actions-negative {
    background-color: #fff;
    color: #EB4235;
    transition: background-color 0.42s ease-out, color 0.42s ease-out;
}

    .PaymentTemplatesAndReferences .ptr-main .payment-references-list .btn-actions.actions-negative:hover,
    .PaymentTemplatesAndReferences .ptr-main .payment-purposes-list .btn-actions.actions-negative:hover {
        background-color: #FFEEE2;
        color: #DE4420;
    }

.PaymentTemplatesAndReferences .ptr-main .payment-references-list .btn-actions .icon-copy-payment,
.PaymentTemplatesAndReferences .ptr-main .payment-references-list .btn-actions .icon-edit-payment,
.PaymentTemplatesAndReferences .ptr-main .payment-purposes-list .btn-actions .icon-copy-payment,
.PaymentTemplatesAndReferences .ptr-main .payment-purposes-list .btn-actions .icon-edit-payment {
    background-color: #767F8A !important;
}

.PaymentTemplatesAndReferences .ptr-main .payment-references-list .btn-actions .icon-edit-payment,
.PaymentTemplatesAndReferences .ptr-main .payment-purposes-list .btn-actions .icon-edit-payment {
    display: block;
    width: 1.25rem;
    height: 1.25rem;
    flex-shrink: 0;
}

.PaymentTemplatesAndReferences .ptr-main .payment-references-list .control-purposes__actions-list,
.PaymentTemplatesAndReferences .ptr-main .payment-purposes-list .control-purposes__actions-list {
    display: flex;
    flex-direction: column;
}

.PaymentTemplatesAndReferences .ptr-main .payment-references-list .control-purposes__actions-item,
.PaymentTemplatesAndReferences .ptr-main .payment-purposes-list .control-purposes__actions-item {
    padding: 0;
    background: transparent;
}

.PaymentTemplatesAndReferences .ptr-main .payment-references-list__loading-total,
.PaymentTemplatesAndReferences .ptr-main .payment-purposes-list__loading-total {
    font-size: 0.75rem;
    color: #32383c;
    font-weight: 500;
}

.PaymentTemplatesAndReferences .ptr-main .no-data {
    padding: 1rem 1.25rem;
}

.modal-export-dialog.p-dialog {
    width: 100%;
    max-width: 35rem;
    height: auto;
}

.modal-export-dialog .p-dialog-content {
    padding: 0;
}

.export-contractors {
    position: relative;
    display: flex;
    flex-direction: column;
}

.export-contractors__header {
    display: flex;
    justify-content: space-between;
    padding: 1.25rem 0.875rem 1.25rem;
}

.export-contractors__title {
    font-size: 1.25rem;
    font-weight: 600;
}

.export-contractors__subtitle {
    margin: 0;
}

.export-contractors__message-wrapper {
    padding: 0 1.25rem 1.25rem;
}

.export-contractors__message {
    margin: 0;
}

.export-contractors__subtitle, .export-contractors__message {
    font-size: 15px;
    line-height: 1.5rem;
    font-weight: 300;
}

.export-contractors__format {
    position: relative;
    display: flex;
    justify-content: flex-end;
    gap: 1rem;
    align-items: center;
    padding: 1rem 1.25rem;
}

@media (max-width: 768px) {
    .export-contractors__format {
        flex-wrap: wrap;
    }
}

.export-contractors__format:before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 1px;
    background: #DBDFE4;
}

.export-contractors__format .btn-action-format {
    padding: 9px 13px;
}

    .export-contractors__format .btn-action-format:hover, .export-contractors__format .btn-action-format:active {
        border-color: rgb(51.0416666667%, 13.1915266106%, 94.6516106443%);
        color: rgb(31.8014705882%, 3.93732493%, 63.9058123249%);
        background-color: #F5EDFF;
        transition: background-color 0.52s ease-out;
    }

.export-contractors .spinner-container {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    z-index: 1000;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.6);
    backdrop-filter: blur(4px);
}

    .export-contractors .spinner-container .spinner:before {
        content: "";
        display: block;
        width: 3.125rem;
        height: 3.125rem;
        background: url("../img/newDesign/spinner-loading.png") no-repeat center;
        animation: rotate 1s linear infinite;
        transform: translate(-50%, -50%);
    }

.debugUrl .export-contractors .spinner-container .spinner:before {
    background: url("/Content/themes/novapay/img/newDesign/spinner-loading.png") no-repeat center;
}

.export-contractors .loading-content-info {
    padding: 1rem;
    font-size: 1rem;
    color: #464B53;
    line-height: 1.25rem;
}

.no-contractors-message {
    color: #EB4235;
}

.import-container__sender-dropdown {
    margin-bottom: 24px;
    width: 50%;
    padding: 1rem;
}

@media (max-width: 992px) {
    .import-container__sender-dropdown {
        padding: 0 1rem 1rem;
    }
}

@media (max-width: 768px) {
    .import-container__sender-dropdown {
        padding: 0 1rem 0.75rem;
    }
}

.import-container__sender-dropdown .invalid-feedback {
    position: relative;
    bottom: 17px;
}

.import-container__sender-dropdown .sender-dropdown-container {
    width: 100%;
    position: relative;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: column;
    justify-content: space-between;
    align-content: center;
    width: 21.75rem;
    border-radius: 0.75rem;
    font-size: 14px;
    font-weight: 500;
    color: #767F8A;
    background-color: #fff;
    line-height: 1.35;
}

@media (max-width: 768px) {
    .import-container__sender-dropdown .sender-dropdown-container {
        width: 100%;
        flex-direction: column;
    }
}

.import-container__sender-dropdown .sender-dropdown-container .oneLineContent {
    display: none;
    opacity: 0;
    visibility: hidden;
}

.import-container__sender-dropdown .sender-dropdown-container.open .sender-dropdown-container__show {
    border-color: #DBDFE4;
}

    .import-container__sender-dropdown .sender-dropdown-container.open .sender-dropdown-container__show .icon-arrow:before {
        transform: rotate(0deg);
    }

.import-container__sender-dropdown .sender-dropdown-container.open .sender-dropdown-container__wrapper {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0.625rem) scaleY(1);
}

.import-container__sender-dropdown .sender-dropdown-container.open .sender-dropdown-container__list {
    display: block;
}

.import-container__sender-dropdown .sender-dropdown-container .title-selected {
    width: 100%;
    font-size: 12px;
    color: #767F8A;
}

.import-container__sender-dropdown .sender-dropdown-container .title-selected__item {
    display: none;
}

.import-container__sender-dropdown .sender-dropdown-container .title-selected__item {
    font-size: 12px;
    font-weight: 400;
}

.import-container__sender-dropdown .sender-dropdown-container__show {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    margin: 0;
    gap: 4px;
    min-height: 2.5rem;
    padding: 0.55rem 2.625rem 0.55rem 0.75rem;
    border-radius: 0.75rem;
    border: 1px solid #DBDFE4;
    cursor: pointer;
}

    .import-container__sender-dropdown .sender-dropdown-container__show .icon-arrow {
        position: absolute;
        right: 0.75rem;
        top: 50%;
        height: 1rem;
        width: 1rem;
        opacity: 1;
        transform: translateY(-50%);
    }

        .import-container__sender-dropdown .sender-dropdown-container__show .icon-arrow:before {
            content: "";
            position: relative;
            display: block;
            height: 1rem;
            width: 1rem;
            transform: rotate(180deg);
            transition: transform 0.32s ease-out;
            background: url("../img/newDesign/icon/icon-small-up.svg") no-repeat center;
        }

.debugUrl .import-container__sender-dropdown .sender-dropdown-container__show .icon-arrow:before {
    background: url("/Content/themes/novapay/img/newDesign/icon/icon-small-up.svg") no-repeat center;
}

.import-container__sender-dropdown .sender-dropdown-container__active-item {
    display: inline-block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
    font-size: 15px;
    color: #32383c;
}

.import-container__sender-dropdown .sender-dropdown-container__wrapper {
    position: absolute;
    top: 2.2rem;
    display: flex;
    flex-direction: column;
    width: 100%;
    min-height: 2.5rem;
    pointer-events: none;
    background-color: #fff;
    border-radius: 0.75rem;
    border: 1px solid #DBDFE4;
    overflow: hidden;
    transition: max-height 0.32s ease-out, opacity 0.22s ease-out, transform 0.22s cubic-bezier(0.55, 0.085, 0.68, 0.53);
    transform: translateY(-0.5rem) scaleY(0);
    transform-origin: top;
    opacity: 0;
    z-index: 14;
}

.import-container__sender-dropdown .sender-dropdown-container__search-block {
    position: relative;
    padding: 0.5rem 0.75rem;
}

    .import-container__sender-dropdown .sender-dropdown-container__search-block .ico-n {
        position: absolute;
        left: 1rem;
        top: 50%;
        transform: translateY(-50%);
    }

.import-container__sender-dropdown .sender-dropdown-container__search-input {
    display: block;
    width: 100%;
    min-height: 2.5rem;
    padding: 0.5rem 0.75rem 0.5rem 2rem;
    border-radius: 0.5rem;
    border: 1px solid #DBDFE4;
    background: #FFF;
    color: #32383c;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 1.35;
}

    .import-container__sender-dropdown .sender-dropdown-container__search-input:focus {
        border-color: #9b51e0;
        box-shadow: 0 0 4px rgba(155, 81, 224, 0.2);
    }

.import-container__sender-dropdown .sender-dropdown-container__list {
    display: none;
    margin: 0;
    padding: 0;
    overflow: auto;
    max-height: 23.25rem;
    list-style: none;
    background-color: #fff;
    border-radius: 0 0 0.75rem 0.75rem;
    scrollbar-width: thin;
    scrollbar-color: rgba(168, 173, 180, 0.5);
}

    .import-container__sender-dropdown .sender-dropdown-container__list::-webkit-scrollbar-track {
        background: rgba(168, 173, 180, 0.5);
        border-radius: 0.25rem;
    }

    .import-container__sender-dropdown .sender-dropdown-container__list::-webkit-scrollbar-thumb {
        background: rgba(168, 173, 180, 0.5);
        border-radius: 0.25rem;
    }

        .import-container__sender-dropdown .sender-dropdown-container__list::-webkit-scrollbar-thumb:hover {
            background: rgba(168, 173, 180, 0.5);
        }

    .import-container__sender-dropdown .sender-dropdown-container__list li {
        display: flex;
        align-items: center;
        padding: 0;
        border: none;
        cursor: pointer;
    }

        .import-container__sender-dropdown .sender-dropdown-container__list li:last-child {
            border-bottom: none;
        }

        .import-container__sender-dropdown .sender-dropdown-container__list li.empty-message {
            display: flex;
            align-items: start;
            padding: 0.75rem;
            width: 100%;
            color: #32383c;
        }

    .import-container__sender-dropdown .sender-dropdown-container__list label {
        position: relative;
        display: flex;
        align-items: start;
        padding: 0.75rem;
        width: 100%;
        flex-direction: column;
        cursor: pointer;
        overflow: hidden;
    }

        .import-container__sender-dropdown .sender-dropdown-container__list label:has(input[type=radio]:checked) {
            background: #f4f6f7;
        }

        .import-container__sender-dropdown .sender-dropdown-container__list label::before {
            content: "";
            position: absolute;
            top: 50%;
            left: 50%;
            width: 0;
            height: 0;
            background: #f4f6f7;
            border-radius: 50%;
            transform: translate(-50%, -50%);
            transition: width 0.32s ease, height 0.32s ease;
        }

        .import-container__sender-dropdown .sender-dropdown-container__list label:hover::before {
            width: 200%;
            height: 200%;
        }

    .import-container__sender-dropdown .sender-dropdown-container__list .icon-checkbox {
        display: none;
    }

        .import-container__sender-dropdown .sender-dropdown-container__list .icon-checkbox::after, .import-container__sender-dropdown .sender-dropdown-container__list .icon-checkbox::before {
            display: none;
        }

    .import-container__sender-dropdown .sender-dropdown-container__list input[type=radio] {
        position: absolute;
        left: 0;
        opacity: 0;
        z-index: -1;
    }

        .import-container__sender-dropdown .sender-dropdown-container__list input[type=radio]:checked + .icon-checkbox::after {
            opacity: 1;
        }

.import-container__sender-dropdown .sender-dropdown-container .form-check-content {
    display: flex;
    flex-wrap: wrap;
}

.import-container__sender-dropdown .sender-dropdown-container .form-check-name {
    position: relative;
    display: block;
    width: 100%;
    color: #000000;
}

.import-container__sender-dropdown .sender-dropdown-container .form-check-index {
    position: relative;
    font-size: 12px;
}

.main-content .modal.is-open .modal-dialog.creatTemplatePayment:has(.create-template-payment)::before {
    display: none;
}

[data-mode][data-mode=create] .edit-template-title,
[data-mode][data-mode=create] .copy-template-title,
[data-mode][data-mode=create] .detail-template-title,
[data-mode][data-mode=create] .btn-Close-detail-template,
[data-mode][data-mode=create] .footer-detail {
    display: none !important;
}

[data-mode][data-mode=copy] .create-template-title,
[data-mode][data-mode=copy] .detail-template-title,
[data-mode][data-mode=copy] .btn-Close-detail-template,
[data-mode][data-mode=copy] .edit-template-title,
[data-mode][data-mode=copy] .footer-detail {
    display: none !important;
}

[data-mode][data-mode=edit] .create-template-title,
[data-mode][data-mode=edit] .copy-template-title,
[data-mode][data-mode=edit] .detail-template-title,
[data-mode][data-mode=edit] .btn-Close-detail-template,
[data-mode][data-mode=edit] .footer-create-copy,
[data-mode][data-mode=edit] .footer-detail {
    display: none !important;
}

[data-mode][data-mode=detail] .create-template-title,
[data-mode][data-mode=detail] .btn-create-template,
[data-mode][data-mode=detail] .edit-template-title,
[data-mode][data-mode=detail] .copy-template-title,
[data-mode][data-mode=detail] .footer-create-edit,
[data-mode][data-mode=detail] .footer-create-copy {
    display: none !important;
}

[data-mode][data-mode=detail][data-reminder-active=false] .btn-deactivating-reminder {
    display: none !important;
}

[data-mode][data-mode=detail] .payment-form .payment-receiver__actual-payee {
    display: block !important;
}

[data-mode][data-mode=detail] .payment-form .payment-receiver__document-receiver.form-check-label {
    cursor: default;
}

[data-mode][data-mode=detail] .payment-form .payment-receiver__document.actual-payee {
    display: flex;
}

[data-mode][data-mode=detail][data-regular=false] .btn-deactivating-reminder {
    display: none !important;
}

.create-template-payment {
    display: flex;
    flex-direction: column;
    max-height: calc(100vh - 40px);
    height: 100%;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(168, 173, 180, 0.5);
}

@media (max-width: 768px) {
    .create-template-payment {
        max-height: calc(100vh - 79px);
        padding-bottom: 40px;
        height: calc(100% - env(safe-area-inset-bottom));
    }
}

.create-template-payment::-webkit-scrollbar-track {
    background: rgba(168, 173, 180, 0.5);
    border-radius: 0.25rem;
}

.create-template-payment::-webkit-scrollbar-thumb {
    background: rgba(168, 173, 180, 0.5);
    border-radius: 0.25rem;
}

    .create-template-payment::-webkit-scrollbar-thumb:hover {
        background: rgba(168, 173, 180, 0.5);
    }

.create-template-payment .disabled-field {
    background-color: #f5f5f5 !important;
    border-color: #ddd !important;
    color: #666 !important;
    cursor: not-allowed !important;
    pointer-events: none !important;
    opacity: 0.8;
}

.create-template-payment__title {
    display: flex;
    justify-content: space-between;
    padding: 1.25rem 1.5rem 1rem 1.5rem;
    border-bottom: 1px solid #DBDFE4;
}

    .create-template-payment__title .title-wrapper {
        display: flex;
        gap: 0.75rem;
        align-items: center;
    }

        .create-template-payment__title .title-wrapper .title__h2 {
            display: flex;
            gap: 0.75rem;
            font-size: 1.25rem;
            line-height: 1.5rem;
        }

.create-template-payment .section-title {
    display: block;
    padding-bottom: 0.5rem;
    font-size: 12px;
    color: #767F8A;
}

.create-template-payment__important {
    color: #EB4235;
}

.create-template-payment__primary-settings {
    padding: 1.5rem 1.25rem 0;
}

.create-template-payment__template-nane {
    padding: 0 0 0.75rem;
    width: 21.75rem;
}

.create-template-payment__sender-settings {
    display: flex;
    justify-content: space-between;
    padding: 0 0 0.75rem;
}

.create-template-payment__sender-dropdown {
    padding: 0;
}

@media (max-width: 992px) {
    .create-template-payment__sender-dropdown {
        padding: 0 1rem 1rem;
    }
}

@media (max-width: 768px) {
    .create-template-payment__sender-dropdown {
        padding: 0 1rem 0.75rem;
    }
}

.create-template-payment__sender-dropdown .invalid-feedback {
    position: relative;
    bottom: 17px;
}

.create-template-payment__sender-dropdown .sender-dropdown-container {
    position: relative;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: column;
    justify-content: space-between;
    align-content: center;
    width: 21.75rem;
    border-radius: 0.75rem;
    font-size: 14px;
    font-weight: 500;
    color: #767F8A;
    background-color: #fff;
    line-height: 1.35;
}

@media (max-width: 768px) {
    .create-template-payment__sender-dropdown .sender-dropdown-container {
        width: 100%;
        flex-direction: column;
    }
}

.create-template-payment__sender-dropdown .sender-dropdown-container .oneLineContent {
    display: none;
    opacity: 0;
    visibility: hidden;
}

.create-template-payment__sender-dropdown .sender-dropdown-container.open .sender-dropdown-container__show {
    border-color: #DBDFE4;
}

    .create-template-payment__sender-dropdown .sender-dropdown-container.open .sender-dropdown-container__show .icon-arrow:before {
        transform: rotate(0deg);
    }

.create-template-payment__sender-dropdown .sender-dropdown-container.open .sender-dropdown-container__wrapper {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0.625rem) scaleY(1);
}

.create-template-payment__sender-dropdown .sender-dropdown-container.open .sender-dropdown-container__list {
    display: block;
}

.create-template-payment__sender-dropdown .sender-dropdown-container .title-selected {
    width: 100%;
    font-size: 12px;
    color: #767F8A;
}

.create-template-payment__sender-dropdown .sender-dropdown-container .title-selected__item {
    font-size: 12px;
    font-weight: 400;
}

.create-template-payment__sender-dropdown .sender-dropdown-container__show {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    margin: 0 0 0.5rem 0;
    gap: 4px;
    min-height: 2.5rem;
    padding: 0.55rem 2.625rem 0.55rem 0.75rem;
    border-radius: 0.75rem;
    border: 1px solid #DBDFE4;
    cursor: pointer;
}

    .create-template-payment__sender-dropdown .sender-dropdown-container__show .icon-arrow {
        position: absolute;
        right: 0.75rem;
        top: 50%;
        height: 1rem;
        width: 1rem;
        opacity: 1;
        transform: translateY(-50%);
    }

        .create-template-payment__sender-dropdown .sender-dropdown-container__show .icon-arrow:before {
            content: "";
            position: relative;
            display: block;
            height: 1rem;
            width: 1rem;
            transform: rotate(180deg);
            transition: transform 0.32s ease-out;
            background: url("../img/newDesign/icon/icon-small-up.svg") no-repeat center;
        }

.debugUrl .create-template-payment__sender-dropdown .sender-dropdown-container__show .icon-arrow:before {
    background: url("/Content/themes/novapay/img/newDesign/icon/icon-small-up.svg") no-repeat center;
}

.create-template-payment__sender-dropdown .sender-dropdown-container__active-item {
    display: inline-block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
    font-size: 15px;
    color: #32383c;
}

.create-template-payment__sender-dropdown .sender-dropdown-container__wrapper {
    position: absolute;
    top: 2.2rem;
    display: flex;
    flex-direction: column;
    width: 100%;
    min-height: 2.5rem;
    pointer-events: none;
    background-color: #fff;
    border-radius: 0.75rem;
    border: 1px solid #DBDFE4;
    overflow: hidden;
    transition: max-height 0.32s ease-out, opacity 0.22s ease-out, transform 0.22s cubic-bezier(0.55, 0.085, 0.68, 0.53);
    transform: translateY(-0.5rem) scaleY(0);
    transform-origin: top;
    opacity: 0;
    z-index: 14;
}

.create-template-payment__sender-dropdown .sender-dropdown-container__search-block {
    position: relative;
    padding: 0.5rem 0.75rem;
}

    .create-template-payment__sender-dropdown .sender-dropdown-container__search-block .ico-n {
        position: absolute;
        left: 1rem;
        top: 50%;
        transform: translateY(-50%);
    }

.create-template-payment__sender-dropdown .sender-dropdown-container__search-input {
    display: block;
    width: 100%;
    min-height: 2.5rem;
    padding: 0.5rem 0.75rem 0.5rem 2rem;
    border-radius: 0.5rem;
    border: 1px solid #DBDFE4;
    background: #FFF;
    color: #32383c;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 1.35;
}

    .create-template-payment__sender-dropdown .sender-dropdown-container__search-input:focus {
        border-color: #9b51e0;
        box-shadow: 0 0 4px rgba(155, 81, 224, 0.2);
    }

.create-template-payment__sender-dropdown .sender-dropdown-container__list {
    display: none;
    margin: 0;
    padding: 0;
    overflow: auto;
    max-height: 23.25rem;
    list-style: none;
    background-color: #fff;
    border-radius: 0 0 0.75rem 0.75rem;
    scrollbar-width: thin;
    scrollbar-color: rgba(168, 173, 180, 0.5);
}

    .create-template-payment__sender-dropdown .sender-dropdown-container__list::-webkit-scrollbar-track {
        background: rgba(168, 173, 180, 0.5);
        border-radius: 0.25rem;
    }

    .create-template-payment__sender-dropdown .sender-dropdown-container__list::-webkit-scrollbar-thumb {
        background: rgba(168, 173, 180, 0.5);
        border-radius: 0.25rem;
    }

        .create-template-payment__sender-dropdown .sender-dropdown-container__list::-webkit-scrollbar-thumb:hover {
            background: rgba(168, 173, 180, 0.5);
        }

    .create-template-payment__sender-dropdown .sender-dropdown-container__list li {
        display: flex;
        align-items: center;
        padding: 0;
        border: none;
        cursor: pointer;
    }

        .create-template-payment__sender-dropdown .sender-dropdown-container__list li:last-child {
            border-bottom: none;
        }

        .create-template-payment__sender-dropdown .sender-dropdown-container__list li.empty-message {
            display: flex;
            align-items: start;
            padding: 0.75rem;
            width: 100%;
            color: #32383c;
        }

    .create-template-payment__sender-dropdown .sender-dropdown-container__list label {
        position: relative;
        display: flex;
        align-items: start;
        padding: 0.75rem;
        width: 100%;
        flex-direction: column;
        cursor: pointer;
        overflow: hidden;
    }

        .create-template-payment__sender-dropdown .sender-dropdown-container__list label:has(input[type=radio]:checked) {
            background: #f4f6f7;
        }

        .create-template-payment__sender-dropdown .sender-dropdown-container__list label::before {
            content: "";
            position: absolute;
            top: 50%;
            left: 50%;
            width: 0;
            height: 0;
            background: #f4f6f7;
            border-radius: 50%;
            transform: translate(-50%, -50%);
            transition: width 0.32s ease, height 0.32s ease;
        }

        .create-template-payment__sender-dropdown .sender-dropdown-container__list label:hover::before {
            width: 200%;
            height: 200%;
        }

    .create-template-payment__sender-dropdown .sender-dropdown-container__list .icon-checkbox {
        display: none;
    }

        .create-template-payment__sender-dropdown .sender-dropdown-container__list .icon-checkbox::after, .create-template-payment__sender-dropdown .sender-dropdown-container__list .icon-checkbox::before {
            display: none;
        }

    .create-template-payment__sender-dropdown .sender-dropdown-container__list input[type=radio] {
        position: absolute;
        left: 0;
        opacity: 0;
        z-index: -1;
    }

        .create-template-payment__sender-dropdown .sender-dropdown-container__list input[type=radio]:checked + .icon-checkbox::after {
            opacity: 1;
        }

.create-template-payment__sender-dropdown .sender-dropdown-container .form-check-content {
    display: flex;
    flex-wrap: wrap;
}

.create-template-payment__sender-dropdown .sender-dropdown-container .form-check-name {
    position: relative;
    display: block;
    width: 100%;
    color: #000000;
}

.create-template-payment__sender-dropdown .sender-dropdown-container .form-check-index {
    position: relative;
    font-size: 12px;
}

.create-template-payment__sender-dropdown .multiselect-container .sender-dropdown-container__list label {
    flex-direction: row;
    align-items: center;
}

.create-template-payment__sender-dropdown .multiselect-container .sender-dropdown-container__list-label::before {
    display: none;
}

.create-template-payment__sender-dropdown .multiselect-container .sender-dropdown-container__list-item .form-check-content {
    padding-left: 1.75rem;
}

.create-template-payment__sender-dropdown .multiselect-container .sender-dropdown-container__list-item .icon-checkbox {
    position: absolute;
    top: 50%;
    left: 0.875rem;
    display: block;
    font-size: 0;
    height: 1.125rem;
    width: 1.125rem;
    transform: translateY(-50%);
}

    .create-template-payment__sender-dropdown .multiselect-container .sender-dropdown-container__list-item .icon-checkbox::after, .create-template-payment__sender-dropdown .multiselect-container .sender-dropdown-container__list-item .icon-checkbox::before {
        content: "";
        position: absolute;
        height: 1.125rem;
        width: 1.125rem;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
        display: block;
    }

    .create-template-payment__sender-dropdown .multiselect-container .sender-dropdown-container__list-item .icon-checkbox::before {
        border-radius: 4px;
        border: 1px solid #DBDFE4;
        background: #fff;
        transition: background 0.42s ease, border-color 0.3s ease;
    }

    .create-template-payment__sender-dropdown .multiselect-container .sender-dropdown-container__list-item .icon-checkbox::after {
        border-radius: 0.35rem;
        border: 1px solid #690DD3;
        background: url("../img/newDesign/icon/ico-checkbox.svg") no-repeat center center;
        opacity: 0;
        transition: opacity 0.42s ease;
    }

.debugUrl .create-template-payment__sender-dropdown .multiselect-container .sender-dropdown-container__list-item .icon-checkbox::after {
    background: url("/Content/themes/novapay/img/newDesign/icon/ico-checkbox.svg") no-repeat;
}

.create-template-payment__sender-dropdown .multiselect-container .sender-dropdown-container__list-item input[type=checkbox] {
    position: absolute;
    left: 0.875rem;
    opacity: 0;
    z-index: -1;
}

    .create-template-payment__sender-dropdown .multiselect-container .sender-dropdown-container__list-item input[type=checkbox]:checked + .icon-checkbox::after {
        opacity: 1;
    }

.create-template-payment__radio-tabs {
    padding: 0;
    width: 100%;
}

@media (max-width: 992px) {
    .create-template-payment__radio-tabs {
        padding: 1rem;
    }
}

@media (max-width: 768px) {
    .create-template-payment__radio-tabs {
        padding-bottom: 1.25rem;
    }
}

.create-template-payment__radio-tabs .tabs-container {
    display: flex;
    gap: 0.25rem;
    padding: 0.25rem;
    border: 1px solid #DBDFE4;
    border-radius: 0.5rem;
    width: 100%;
}

@media (max-width: 992px) {
    .create-template-payment__radio-tabs .tabs-container {
        display: none;
    }
}

.create-template-payment__radio-tabs .radio-tab {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    padding: 0;
    border-radius: 0.5rem;
    cursor: pointer;
    transition: background-color 0.3s, color 0.3s;
}

    .create-template-payment__radio-tabs .radio-tab input[type=radio] {
        display: none;
    }

        .create-template-payment__radio-tabs .radio-tab input[type=radio]:checked + span {
            background: #F5EDFF;
            color: #690DD3;
        }

    .create-template-payment__radio-tabs .radio-tab span {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        height: 100%;
        padding: 0.5rem 1rem;
        border-radius: 0.5rem;
        font-size: 16px;
        color: #767F8A;
        text-align: center;
    }

    .create-template-payment__radio-tabs .radio-tab:hover span {
        color: #690DD3;
    }

.create-template-payment__radio-tabs .tabs-mobile-select {
    display: none;
    position: relative;
    border: 1px solid #DBDFE4;
    border-radius: 0.5rem;
    width: 100%;
    cursor: pointer;
}

@media (max-width: 992px) {
    .create-template-payment__radio-tabs .tabs-mobile-select {
        display: block;
    }

        .create-template-payment__radio-tabs .tabs-mobile-select::before {
            content: "";
            position: absolute;
            right: 5px;
            top: 7px;
            height: 1.5rem;
            width: 1.5rem;
            opacity: 1;
            transform: rotate(180deg);
            transition: transform 0.22s ease-out;
            background: url("../img/newDesign/icon/icon-small-up.svg") no-repeat center;
        }

    .debugUrl .create-template-payment__radio-tabs .tabs-mobile-select::before {
        background: url("/Content/themes/novapay/img/newDesign/icon/icon-small-up.svg") no-repeat center;
    }

    .create-template-payment__radio-tabs .tabs-mobile-select.active-tabs-select::before {
        transform: rotate(0deg);
    }
}

.create-template-payment__radio-tabs .tabs-mobile-select .tabs-selected {
    position: relative;
    padding: 0.5rem;
    font-size: 16px;
    color: #767F8A;
    z-index: 1;
}

.create-template-payment__radio-tabs .tabs-mobile-select .tabs-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    margin: 0;
    padding: 0.25rem;
    background: white;
    transform: scaleY(0);
    transform-origin: top;
    opacity: 0;
    transition: 0.32s ease-in-out;
    z-index: 10;
    list-style: none;
    border: 1px solid #DBDFE4;
    border-radius: 0.5rem;
}

.create-template-payment__radio-tabs .tabs-mobile-select .tabs-dropdown__item {
    padding: 0.5rem;
    border-radius: 0.5rem;
    font-size: 16px;
    color: #767F8A;
    cursor: pointer;
}

    .create-template-payment__radio-tabs .tabs-mobile-select .tabs-dropdown__item.active {
        background: #F5EDFF;
        color: #690DD3;
    }

    .create-template-payment__radio-tabs .tabs-mobile-select .tabs-dropdown__item:hover {
        background: #F5EDFF;
        color: #690DD3;
    }

.create-template-payment__radio-tabs .tabs-mobile-select .tabs-dropdown.open {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    margin-top: 0.25rem;
    transform: scaleY(1);
    opacity: 1;
}

.create-template-payment__select-wrapper {
    display: flex;
    justify-content: space-between;
    gap: 1.25rem;
}

@media (max-width: 768px) {
    .create-template-payment__select-wrapper {
        flex-direction: column;
        gap: 0;
    }
}

.create-template-payment__payment-form-settings {
    padding: 20px 24px;
    font-style: normal;
    font-weight: 500;
}

@media (max-width: 992px) {
    .create-template-payment__payment-form-settings {
        padding: 20px 16px;
    }
}

.create-template-payment .payment-form .error-border {
    border: 1px solid #EB4235;
}

.create-template-payment .payment-form .error-message {
    position: absolute;
    top: calc(100% + 5px);
    left: 0;
    color: #EB4235;
    font-size: 0.75rem;
    font-weight: normal;
}

@media (max-width: 768px) {
    .create-template-payment .payment-form .payment-template .error-message {
        top: calc(100% - 20px);
    }
}

.create-template-payment .payment-form .payment-receiver__header {
    display: flex;
    gap: 1rem;
}

.create-template-payment .payment-form .payment-receiver__title {
    color: #464B53;
    font-size: 1rem;
    line-height: 1.35;
}

.create-template-payment .payment-form .payment-receiver__account {
    margin-top: 1.25rem;
}

.create-template-payment .payment-form .payment-receiver__account-select {
    min-width: 116px;
    width: 25%;
}

.create-template-payment .payment-form .payment-receiver__account-subtitle {
    margin-bottom: 0.5rem;
}

.create-template-payment .payment-form .payment-receiver__account-form {
    display: flex;
    gap: 0.5rem;
}

.create-template-payment .payment-form .payment-receiver__account-input {
    min-width: 312px;
    width: 40%;
    margin: 0;
}

.create-template-payment .payment-form .payment-receiver__account-disable-input {
    display: flex;
    flex-direction: column;
    min-width: 207px;
    width: -webkit-fill-available;
    display: flex;
    align-items: center;
    border-radius: 0.5rem;
}

.create-template-payment .payment-form .payment-receiver__account-disable-content {
    display: flex;
    align-items: center;
    min-height: 2.5rem;
    height: fit-content;
    padding: 0.375rem 0.75rem;
    border-radius: 0.5rem;
    background: #F4F6F7;
    font-size: 15px;
    font-weight: 500;
    color: #767F8A;
}

    .create-template-payment .payment-form .payment-receiver__account-disable-content:empty {
        opacity: 0;
        height: 0;
        min-height: 0;
        padding: 0;
    }

.create-template-payment .payment-form .payment-receiver__account-actual-payee {
    min-width: 120px;
    width: 100%;
}

.create-template-payment .payment-form .payment-receiver__document {
    margin-top: 1.75rem;
    display: flex;
    gap: 0.5rem;
}

    .create-template-payment .payment-form .payment-receiver__document.actual-payee {
        margin-top: 18px;
    }

.create-template-payment .payment-form .payment-receiver__document-form {
    width: 52%;
}

.create-template-payment .payment-form .payment-receiver__document-line {
    position: relative;
    display: flex;
    width: 100%;
    gap: 0.5rem;
}

    .create-template-payment .payment-form .payment-receiver__document-line .invalid-feedback {
        position: absolute;
        top: calc(100% - 0px);
        left: 51%;
    }

.create-template-payment .payment-form .payment-receiver__document-subtitle {
    margin-bottom: 8px;
}

.create-template-payment .payment-form .payment-receiver__document-subtitle1 {
    margin-bottom: 0;
}

.create-template-payment .payment-form .payment-receiver__document-select {
    min-width: 116px;
    width: 25%;
}

.create-template-payment .payment-form .payment-receiver__document-long-select {
    min-width: 170px;
}

@media (max-width: 767px) {
    .create-template-payment .payment-form .payment-receiver__document-long-select {
        min-width: inherit;
    }
}

.create-template-payment .payment-form .payment-receiver__document-input-seria {
    width: 64px;
}

.create-template-payment .payment-form .payment-receiver__document-input-number {
    min-width: 120px;
    width: 100%;
}

.create-template-payment .payment-form .payment-receiver__document-input-name {
    width: 100%;
}

.create-template-payment .payment-form .payment-receiver__document-receiver {
    display: flex;
    align-items: center;
    margin-top: 1.25rem;
    width: fit-content;
    font-weight: normal;
    font-size: 15px;
}

.create-template-payment .payment-form .payment-receiver__document-title {
    position: relative;
    width: fit-content;
    padding-left: 2rem;
}

.create-template-payment .payment-form .payment-receiver__important {
    color: #EB4235;
}

.create-template-payment .payment-form .payment-receiver__actual-total-payee {
    position: relative;
    padding: 0;
    margin-top: 1.25rem;
}

    .create-template-payment .payment-form .payment-receiver__actual-total-payee .slider-container {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 176px;
        height: 2.5rem;
        border: 0.0625rem solid #DBDFE4;
        border-radius: 0.5rem;
        padding: 0.25rem;
    }

        .create-template-payment .payment-form .payment-receiver__actual-total-payee .slider-container input[type=checkbox] {
            display: none;
        }

            .create-template-payment .payment-form .payment-receiver__actual-total-payee .slider-container input[type=checkbox]:checked ~ .slider-bg {
                left: 50%;
            }

            .create-template-payment .payment-form .payment-receiver__actual-total-payee .slider-container input[type=checkbox]:checked ~ .noTax {
                color: #767F8A;
            }

            .create-template-payment .payment-form .payment-receiver__actual-total-payee .slider-container input[type=checkbox]:checked ~ .tax {
                color: #690DD3;
            }

        .create-template-payment .payment-form .payment-receiver__actual-total-payee .slider-container label {
            position: relative;
            z-index: 1;
            flex: 1;
            text-align: center;
            cursor: pointer;
            color: #767F8A;
            transition: color 0.3s ease;
        }

            .create-template-payment .payment-form .payment-receiver__actual-total-payee .slider-container label.noTax {
                color: #690DD3;
            }

    .create-template-payment .payment-form .payment-receiver__actual-total-payee .slider-bg {
        position: absolute;
        top: 4px;
        left: 4px;
        right: 0;
        width: calc(50% - 4px);
        height: calc(100% - 8px);
        background-color: #F5EDFF;
        border-radius: 8px;
        transition: left 0.32s ease;
    }

    .create-template-payment .payment-form .payment-receiver__actual-total-payee .payment-receiver__total {
        display: flex;
        flex-direction: column;
    }

    .create-template-payment .payment-form .payment-receiver__actual-total-payee .payment-receiver__total-sum {
        position: relative;
        height: 62px;
    }

        .create-template-payment .payment-form .payment-receiver__actual-total-payee .payment-receiver__total-sum .invalid-feedback {
            position: unset;
            margin-top: 13px;
        }

    .create-template-payment .payment-form .payment-receiver__actual-total-payee .payment-receiver__total .total-count {
        position: absolute;
        bottom: 0;
        display: block;
        width: max-content;
        margin: 0.5rem 0 0 0;
        color: #767F8A;
        font-size: 12px;
    }

    .create-template-payment .payment-form .payment-receiver__actual-total-payee .payment-receiver__total .total-detail {
        color: #32383c;
    }

    .create-template-payment .payment-form .payment-receiver__actual-total-payee .payment-receiver__total .invalid-feedback {
        left: 0;
    }

    .create-template-payment .payment-form .payment-receiver__actual-total-payee .payment-receiver__document-form {
        width: 100%;
    }

    .create-template-payment .payment-form .payment-receiver__actual-total-payee .payment-receiver__document-line {
        width: 100%;
    }

@media (max-width: 768px) {
    .create-template-payment .payment-form .payment-receiver__actual-total-payee .payment-receiver__document-line {
        gap: 0;
        flex-direction: column;
    }
}

.create-template-payment .payment-form .payment-receiver__autocomplite-iban {
    position: relative;
}

.create-template-payment .payment-form .payment-receiver__config-tax {
    display: flex;
    gap: 8px;
}

.create-template-payment .payment-form .payment-receiver__purpose-block {
    padding-top: 1.75rem;
}

    .create-template-payment .payment-form .payment-receiver__purpose-block .purpose-title {
        display: flex;
        width: 100%;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 0.5rem;
        pointer-events: auto;
    }

        .create-template-payment .payment-form .payment-receiver__purpose-block .purpose-title .btn-select-directory {
            padding: 0 16px 0 0;
            pointer-events: all;
        }

            .create-template-payment .payment-form .payment-receiver__purpose-block .purpose-title .btn-select-directory:before {
                right: -8px;
            }

.create-template-payment .payment-form .payment-receiver__purpose-textarea {
    position: relative;
}

    .create-template-payment .payment-form .payment-receiver__purpose-textarea .invalid-feedback {
        position: absolute;
        top: calc(100% - 3px);
    }

    .create-template-payment .payment-form .payment-receiver__purpose-textarea .purpose-textarea {
        width: 100%;
        min-height: 112px;
        padding: 8px 12px;
        border-radius: 8px;
        border: 0.0625rem solid #DBDFE4;
        font-size: 15px;
        resize: none;
    }

@media (max-width: 768px) {
    .create-template-payment .payment-form .payment-receiver__purpose-textarea .purpose-textarea {
        min-height: 84px;
    }
}

.create-template-payment .payment-form .payment-receiver__purpose-textarea .textarea-count {
    position: absolute;
    right: 14px;
    bottom: 11.008px;
    color: #767F8A;
    font-size: 12px;
}

.create-template-payment .payment-form__btn-select-directory {
    position: relative;
    font-size: 12px;
    color: #690DD3;
    font-weight: 500;
    padding-right: 1.25rem;
}

    .create-template-payment .payment-form__btn-select-directory:before {
        content: "";
        position: absolute;
        right: -0.25rem;
        top: 50%;
        height: 24px;
        width: 24px;
        opacity: 1;
        transform: translateY(-50%) rotate(90deg);
        transform-origin: center;
        background: url("../img/newDesign/icon/icon-small-up-hover.svg") no-repeat center;
    }

.debugUrl .create-template-payment .payment-form__btn-select-directory:before {
    background: url("/Content/themes/novapay/img/newDesign/icon/icon-small-up-hover.svg") no-repeat center;
}

.create-template-payment .payment-form__btn-select-directory:hover {
    color: #5E1CAB;
}

.create-template-payment .payment-form__template {
    position: relative;
    padding: 0.8rem 0 1.75rem 0;
    margin-top: 0;
}

.create-template-payment .payment-form .payment-template__activator {
    padding-bottom: 0.375rem;
}

    .create-template-payment .payment-form .payment-template__activator .visually-hidden {
        clip: rect(0 0 0 0);
        clip-path: inset(50%);
        height: 0.0625rem;
        overflow: hidden;
        position: absolute;
        white-space: nowrap;
        width: 0.0625rem;
    }

    .create-template-payment .payment-form .payment-template__activator .checkbox-activator {
        display: flex;
        flex-direction: row;
        gap: 12px;
        justify-content: flex-start;
        align-items: center;
    }

    .create-template-payment .payment-form .payment-template__activator .toggle-activator {
        cursor: pointer;
        display: flex;
        min-width: 48px;
        height: 28px;
        border-radius: 400px;
        padding: 4px;
        transition: background 0.3s ease;
        position: relative;
    }

    .create-template-payment .payment-form .payment-template__activator .label-activator {
        color: #202427;
        font-size: 14px;
    }

.create-template-payment .payment-form .payment-template__configurator {
    padding: 12px 0 0 0;
    display: flex;
    flex-direction: column;
}

    .create-template-payment .payment-form .payment-template__configurator .configurator-title {
        position: relative;
        font-size: 12px;
    }

        .create-template-payment .payment-form .payment-template__configurator .configurator-title:after {
            content: "*";
            position: relative;
            top: 0;
            right: 0;
            width: 8px;
            height: 100%;
            margin-left: 4px;
            color: #EB4235;
        }

.create-template-payment .payment-form__transfer {
    position: relative;
}

    .create-template-payment .payment-form__transfer .payment-receiver__total {
        position: relative;
        padding-top: 0;
        margin-top: 1.25rem;
    }

.create-template-payment .payment-form__transfer-subtitle {
    margin: 1.25rem 0 0.5rem;
}

.create-template-payment .payment-form__transfer-inp-sum {
    margin-top: 0.5rem;
    max-width: 238px;
    width: 100%;
}

@media (max-width: 768px) {
    .create-template-payment .payment-form__transfer-inp-sum {
        max-width: none;
    }
}

.create-template-payment .payment-form__transfer-custom-select .account-payment__sender-dropdown {
    padding: 0;
}

@media (max-width: 768px) {
    .create-template-payment .payment-form__transfer-custom-select {
        max-width: none;
        width: 100%;
    }
}

.create-template-payment .payment-form__transfer-custom-select #SelfCreditCodeIBAN {
    display: none;
}

.create-template-payment .payment-form__transfer-select__value {
    color: #32383c;
}

.create-template-payment .payment-form__transfer-wrap {
    position: relative;
    margin-top: 3rem;
    margin-bottom: 0.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

    .create-template-payment .payment-form__transfer-wrap::after {
        content: "";
        position: absolute;
        top: -1.25rem;
        left: -23.008px;
        height: 0.0625rem;
        width: calc(100% + 46.016px);
        background: #DBDFE4;
    }

.create-template-payment .payment-form__transfer-payment {
    padding: 1.25rem 0 2.625rem;
}

@media (max-width: 768px) {
    .create-template-payment .payment-form__transfer-payment {
        padding: 1.25rem 0 1.75rem;
    }
}

.create-template-payment .payment-form__transfer-textarea {
    width: 100%;
    height: 5.5rem;
}

@media (max-width: 767px) {
    .create-template-payment .payment-form .payment-receiver__header {
        display: flex;
        justify-content: space-between;
    }

    .create-template-payment .payment-form .payment-receiver__account-form {
        flex-direction: column;
        gap: 0.5rem;
    }

    .create-template-payment .payment-form .payment-receiver__document-select, .create-template-payment .payment-form .payment-receiver__account-input, .create-template-payment .payment-form .payment-receiver__account-disable-input {
        width: 100%;
    }

    .create-template-payment .payment-form .payment-receiver__account-disable-input {
        margin-top: 0.75rem;
    }

    .create-template-payment .payment-form .payment-receiver__account-input {
        margin: 0;
        font-size: 15px;
    }

    .create-template-payment .payment-form .payment-receiver__document {
        margin-top: 24px;
        gap: 1.5rem;
        flex-direction: column;
    }

    .create-template-payment .payment-form .payment-receiver__document-form {
        width: 100%;
    }

    .create-template-payment .payment-form .payment-receiver__document-input-seria {
        max-width: 64px;
    }

    .create-template-payment .payment-form .payment-receiver__document-input-number {
        min-width: inherit;
    }

    .create-template-payment .payment-form .payment-receiver__document-receiver {
        margin-top: 32px;
    }

    .create-template-payment .payment-form .payment-receiver__account-actual-payee {
        width: auto;
        margin: 0;
    }

    .create-template-payment .payment-form .payment-receiver .actual-payee {
        display: flex;
        flex-direction: column;
        gap: 24px;
    }

    .create-template-payment .payment-form .payment-receiver__config-tax {
        margin-top: 20px;
    }

        .create-template-payment .payment-form .payment-receiver__config-tax .slider-container {
            min-width: 175px;
        }

            .create-template-payment .payment-form .payment-receiver__config-tax .slider-container .slider-bg {
                border-radius: 4px;
            }

    .create-template-payment .payment-form .payment-receiver__purpose-block {
        margin-top: 4px;
    }

    .create-template-payment .payment-form .payment-template .recurrence-selector {
        width: 100%;
        justify-content: space-between;
    }
}

.create-template-payment .payment-form__base-area .account-payment__radio-tabs {
    padding-left: 0;
    padding-right: 0;
    padding-bottom: 0.5rem;
}

@media (max-width: 768px) {
    .create-template-payment .payment-form__base-area .account-payment__radio-tabs {
        padding-bottom: 0.25rem;
    }
}

.create-template-payment .tab-payment-taxes,
.create-template-payment .tab-payment-singleaccount,
.create-template-payment .tab-payment-rental,
.create-template-payment .tab-payment-other {
    padding-bottom: 0;
}

    .create-template-payment .tab-payment-taxes .payment-form,
    .create-template-payment .tab-payment-singleaccount .payment-form,
    .create-template-payment .tab-payment-rental .payment-form,
    .create-template-payment .tab-payment-other .payment-form {
        padding: 0;
    }

    .create-template-payment .tab-payment-taxes .payment-receiver__important,
    .create-template-payment .tab-payment-singleaccount .payment-receiver__important,
    .create-template-payment .tab-payment-rental .payment-receiver__important,
    .create-template-payment .tab-payment-other .payment-receiver__important {
        color: #EB4235;
    }

    .create-template-payment .tab-payment-taxes .tax-total-payee {
        position: relative;
        display: flex;
        align-items: normal;
        gap: 1.25rem;
        margin-top: 1.75rem;
        padding-top: 0;
    }

@media (max-width: 768px) {
    .create-template-payment .tab-payment-taxes .tax-total-payee {
        flex-direction: column;
        align-items: flex-start;
    }
}

.create-template-payment .tab-payment-taxes .tax-total-payee .payment-receiver__actual-total-payee {
    width: auto;
    margin: 0;
    padding: 0;
}

    .create-template-payment .tab-payment-taxes .tax-total-payee .payment-receiver__actual-total-payee:before {
        display: none;
    }

@media (max-width: 768px) {
    .create-template-payment .tab-payment-taxes .tax-total-payee .payment-receiver__actual-total-payee {
        width: 100%;
    }
}

.create-template-payment .tab-payment-taxes .tax-total-payee .tax-total-payment-code {
    display: flex;
    width: 100%;
    flex-direction: column;
}

@media (max-width: 1623px) {
    .create-template-payment .tab-payment-taxes .tax-total-payee .tax-total-payment-code {
        width: 68.5%;
    }
}

@media (max-width: 768px) {
    .create-template-payment .tab-payment-taxes .tax-total-payee .tax-total-payment-code {
        width: 100%;
    }
}

@media (max-width: 768px) {
    .create-template-payment .tab-payment-taxes .tax-total-payee .tax-total-payment-code__subtitle {
        display: flex;
        justify-content: space-between;
        width: 100%;
    }
}

.create-template-payment .tab-payment-taxes .tax-total-payee .tax-total-payment-code__notification {
    display: none;
    font-size: 12px;
    color: #690DD3;
    text-align: right;
    width: 100%;
    white-space: nowrap;
}

@media (max-width: 768px) {
    .create-template-payment .tab-payment-taxes .tax-total-payee .tax-total-payment-code__notification {
        display: block;
    }
}

.create-template-payment .tab-payment-taxes .tax-total-payee .tax-total-payment-code .payment-form__transfer-subtitle {
    margin-top: 0;
}

.create-template-payment .tab-payment-taxes .tax-total-payee .tax-total-payment-code .account-payment__sender-dropdown {
    padding: 0;
    width: 100%;
}

    .create-template-payment .tab-payment-taxes .tax-total-payee .tax-total-payment-code .account-payment__sender-dropdown .sender-dropdown-container {
        width: 100%;
        max-width: 42.375rem;
    }

.create-template-payment .tab-payment-taxes .tax-total-payee .tax-total-payment-code .sender-dropdown-container__list-item .form-check-content {
    position: relative;
    z-index: 1;
}

.create-template-payment .tab-payment-taxes .tax-total-payee .payment-form__transfer-custom-select {
    width: 100%;
    max-height: fit-content;
    max-width: fit-content;
    min-width: 100%;
}

.create-template-payment .tab-payment-taxes .payment-form .payment-receiver__purpose-block {
    padding-bottom: 0;
    padding-top: 1.75rem;
}

@media (max-width: 768px) {
    .create-template-payment .tab-payment-taxes .payment-form .payment-receiver__purpose-block {
        padding-top: 1.5rem;
    }
}

.create-template-payment .tab-payment-singleaccount {
    margin-top: 1.25rem;
}

    .create-template-payment .tab-payment-singleaccount .payment-form .payment-form__transfer-subtitle {
        margin-top: 0;
    }

    .create-template-payment .tab-payment-singleaccount .payment-form .payment-receiver__purpose-block {
        padding-bottom: 0;
        padding-top: 1.5rem;
    }

@media (max-width: 768px) {
    .create-template-payment .tab-payment-singleaccount .payment-form .payment-receiver__purpose-block {
        padding-top: 1.5rem;
        margin: 0;
    }
}

.create-template-payment .tab-payment-singleaccount .payment-form .payment-receiver__purpose-block .purpose-textarea {
    min-height: 3.75rem;
}

.create-template-payment .tab-payment-singleaccount .tax-decisio-wrapper {
    display: flex;
    gap: 1.25rem;
}

@media (max-width: 768px) {
    .create-template-payment .tab-payment-singleaccount .tax-decisio-wrapper {
        flex-direction: column;
    }
}

.create-template-payment .tab-payment-singleaccount .tax-decisio-wrapper .payment-receiver__actual-total-payee {
    margin: 0;
    padding: 0;
}

    .create-template-payment .tab-payment-singleaccount .tax-decisio-wrapper .payment-receiver__actual-total-payee:before {
        display: none;
    }

.create-template-payment .tab-payment-singleaccount .tax-decisio-wrapper .account-field {
    display: flex;
    flex-direction: column;
}

.create-template-payment .tab-payment-singleaccount .tax-decisio-wrapper .account-field__label {
    margin-bottom: 0.5rem;
    font-size: 12px;
    color: #767F8A;
}

.create-template-payment .tab-payment-singleaccount .tax-decisio-wrapper .account-field__input {
    padding: 0.5rem 0.75rem;
    min-width: 18.813rem;
    min-height: 2.5rem;
    border-radius: 0.5rem;
    border: 1px solid #DBDFE4;
    font-size: 15px;
}

@media (max-width: 768px) {
    .create-template-payment .tab-payment-singleaccount .tax-decisio-wrapper .account-field__input {
        width: 100%;
    }
}

.create-template-payment .tab-payment-singleaccount .tax-decisio-wrapper .payment-receiver__total .base-input {
    max-width: 9.438rem;
    width: 100%;
}

@media (max-width: 768px) {
    .create-template-payment .tab-payment-singleaccount .tax-decisio-wrapper .payment-receiver__total .base-input {
        max-width: 100%;
    }
}

.create-template-payment .tab-payment-singleaccount .tax-decision {
    display: flex;
    flex-direction: column;
    color: #767F8A;
}

.create-template-payment .tab-payment-singleaccount .tax-decision__label {
    display: block;
    margin-bottom: 0.5rem;
    font-size: 12px;
    color: #767F8A;
}

.create-template-payment .tab-payment-singleaccount .tax-decision__field-wrapper {
    position: relative;
}

.create-template-payment .tab-payment-singleaccount .tax-decision__input {
    padding: 0.5rem 0.75rem;
    min-width: 13.938rem;
    min-height: 2.5rem;
    border-radius: 0.5rem;
    border: 1px solid #DBDFE4;
    font-size: 15px;
}

@media (max-width: 768px) {
    .create-template-payment .tab-payment-singleaccount .tax-decision__input {
        width: 100%;
    }
}

.create-template-payment .tab-payment-singleaccount .tax-decision__tooltip {
    position: absolute;
    display: inline-block;
    cursor: pointer;
    height: 1.5rem;
    width: 1.5rem;
    right: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
}

    .create-template-payment .tab-payment-singleaccount .tax-decision__tooltip .icon-info {
        background: url("../img/newDesign/icon/info-hover.svg") no-repeat center;
    }

.debugUrl .create-template-payment .tab-payment-singleaccount .tax-decision__tooltip .icon-info {
    background: url("/Content/themes/novapay/img/newDesign/icon/info-hover.svg") no-repeat center;
}

.create-template-payment .tab-payment-singleaccount .tax-decision__tooltip:hover .tooltip-content, .create-template-payment .tab-payment-singleaccount .tax-decision__tooltip.active .tooltip-content {
    visibility: visible;
    opacity: 1;
}

.create-template-payment .tab-payment-singleaccount .tax-decision .tooltip-content {
    position: absolute;
    bottom: 120%;
    left: 50%;
    width: 13.813rem;
    transform: translateX(-50%);
    background: #202427;
    color: #fff;
    padding: 6px 8px;
    border-radius: 0.25rem;
    font-size: 11px;
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
    z-index: 100;
    text-align: center;
}

    .create-template-payment .tab-payment-singleaccount .tax-decision .tooltip-content:after {
        content: "";
        position: absolute;
        top: 100%;
        left: 50%;
        transform: translateX(-50%);
        border-width: 6px;
        border-style: solid;
        border-color: #202427 transparent transparent transparent;
    }

@media (max-width: 768px) {
    .create-template-payment .tab-payment-singleaccount .tax-decision .tooltip-content:after {
        left: 92%;
        transform: translateX(-93%);
    }
}

@media (max-width: 768px) {
    .create-template-payment .tab-payment-singleaccount .tax-decision .tooltip-content {
        left: 0;
        transform: translateX(-84%);
    }
}

.create-template-payment .tab-payment-singleaccount .tax-decision .tooltip-link {
    text-decoration: underline;
}

.create-template-payment .tab-payment-singleaccount__created-container {
    display: flex;
    flex-direction: column;
}

.create-template-payment .tab-payment-singleaccount__created-tax-field, .create-template-payment .tab-payment-singleaccount__created-template {
    width: 100%;
    position: relative;
    padding: 0 0 1.25rem;
}

    .create-template-payment .tab-payment-singleaccount__created-template .created-template-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding-bottom: 1.25rem;
    }

    .create-template-payment .tab-payment-singleaccount__created-template .created-template-number {
        font-size: 15px;
    }

    .create-template-payment .tab-payment-singleaccount__created-template .btn-template-remove {
        display: flex;
        gap: 6px;
        align-items: center;
        color: #690DD3;
        font-size: 12px;
        font-weight: 500;
    }

.create-template-payment .tab-payment-singleaccount__template-generator {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
}

@media (max-width: 768px) {
    .create-template-payment .tab-payment-singleaccount__template-generator {
        flex-direction: column;
        gap: 1.25rem;
        width: 100%;
    }
}

.create-template-payment .tab-payment-singleaccount__template-generator .payment-amount__container {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

@media (max-width: 768px) {
    .create-template-payment .tab-payment-singleaccount__template-generator .payment-amount__container {
        width: 100%;
    }
}

.create-template-payment .tab-payment-singleaccount__template-generator .payment-amount__title {
    font-size: 12px;
    color: #A56EE5;
    line-height: 1.3;
}

.create-template-payment .tab-payment-singleaccount__template-generator .payment-amount__value {
    min-height: 2.5rem;
    display: flex;
    align-items: center;
    padding: 0.375rem 0.75rem;
    border-radius: 0.5rem;
    background: #F5EDFF;
    color: #690DD3;
    font-weight: 500;
}

@media (max-width: 768px) {
    .create-template-payment .tab-payment-singleaccount .template-generator-container {
        width: 100%;
    }
}

.create-template-payment .tab-payment-singleaccount .btn-singleaccount-generate-template {
    position: relative;
    display: flex;
    gap: 0.5rem;
    padding-top: 0.425rem;
    padding-bottom: 0.425rem;
    min-height: 2.5rem;
    font-weight: 500;
}

@media (max-width: 768px) {
    .create-template-payment .tab-payment-singleaccount .btn-singleaccount-generate-template {
        width: 100%;
    }
}

.create-template-payment .tab-payment-singleaccount .btn-singleaccount-generate-template:hover {
    background: #fff;
}

    .create-template-payment .tab-payment-singleaccount .btn-singleaccount-generate-template:hover .icon-plus {
        background: url("../img/newDesign/icon/icon-account-plus-hover.svg") no-repeat center;
    }

.debugUrl .create-template-payment .tab-payment-singleaccount .btn-singleaccount-generate-template:hover .icon-plus {
    background: url("/Content/themes/novapay/img/newDesign/icon/icon-account-plus-hover.svg") no-repeat center;
}

.create-template-payment .tab-payment-rental {
    display: flex;
    flex-direction: column;
}

    .create-template-payment .tab-payment-rental .rental-payment-details {
        display: flex;
        width: 100%;
        align-items: end;
        padding: 0.5rem 0 1.75rem 0;
    }

@media (max-width: 768px) {
    .create-template-payment .tab-payment-rental .rental-payment-details {
        padding: 0.5rem 0 1.5rem 0;
    }
}

.create-template-payment .tab-payment-rental .account-iBan-field {
    max-width: 20.125rem;
    width: 100%;
    padding-right: 1.25rem;
}

@media (max-width: 768px) {
    .create-template-payment .tab-payment-rental .account-iBan-field {
        max-width: 100%;
    }
}

.create-template-payment .tab-payment-rental .account-iBan-field__label {
    display: block;
    margin-bottom: 0.5rem;
}

.create-template-payment .tab-payment-rental .account-iBan-field__input {
    padding: 0.5rem 0.75rem;
    width: 100%;
    min-height: 2.5rem;
    border-radius: 0.5rem;
    border: 1px solid #DBDFE4;
    font-size: 15px;
    color: #32383c;
}

.create-template-payment .tab-payment-rental .account-card-field__input {
    padding: 0.5rem 0.75rem;
    min-width: 15.625rem;
    min-height: 2.5rem;
    border-radius: 0.5rem;
    border: 1px solid #DBDFE4;
    font-size: 15px;
    color: #767F8A;
}

@media (max-width: 768px) {
    .create-template-payment .tab-payment-rental .account-card-field__input {
        width: 100%;
    }
}

.create-template-payment .tab-payment-rental .rental-payment-receiver {
    display: flex;
    flex-direction: column;
}

.create-template-payment .tab-payment-rental .rental-payment-receiver__label {
    display: block;
    margin-bottom: 0.5rem;
}

.create-template-payment .tab-payment-rental .rental-payment-receiver__input {
    padding: 0.5rem 0.75rem;
    max-width: 20.125rem;
    min-height: 2.5rem;
    border-radius: 0.5rem;
    border: 1px solid #DBDFE4;
    font-size: 15px;
    color: #767F8A;
}

@media (max-width: 768px) {
    .create-template-payment .tab-payment-rental .rental-payment-receiver__input {
        width: 100%;
    }
}

.create-template-payment .tab-payment-rental .rental-total-payee {
    position: relative;
    display: flex;
    align-items: normal;
    gap: 1.25rem;
    margin-top: 1.75rem;
    padding-top: 0;
}

@media (max-width: 768px) {
    .create-template-payment .tab-payment-rental .rental-total-payee {
        flex-direction: column;
        align-items: flex-start;
    }
}

.create-template-payment .tab-payment-rental .rental-total-payee .payment-receiver__actual-total-payee {
    width: auto;
    margin: 0;
    padding: 0;
}

    .create-template-payment .tab-payment-rental .rental-total-payee .payment-receiver__actual-total-payee:before {
        display: none;
    }

@media (max-width: 768px) {
    .create-template-payment .tab-payment-rental .rental-total-payee .payment-receiver__actual-total-payee {
        width: 100%;
    }
}

.create-template-payment .tab-payment-rental .rental-total-payee .rental-total-payment-code {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
}

@media (max-width: 1623px) {
    .create-template-payment .tab-payment-rental .rental-total-payee .rental-total-payment-code {
        width: 68%;
    }
}

@media (max-width: 768px) {
    .create-template-payment .tab-payment-rental .rental-total-payee .rental-total-payment-code {
        width: 100%;
    }
}

@media (max-width: 768px) {
    .create-template-payment .tab-payment-rental .rental-total-payee .rental-total-payment-code__subtitle {
        display: flex;
        justify-content: space-between;
        width: 100%;
    }
}

.create-template-payment .tab-payment-rental .rental-total-payee .rental-total-payment-code__notification-link {
    position: absolute;
    right: 0;
    top: 0;
    width: fit-content;
    font-size: 12px;
    text-align: right;
    color: #690DD3;
}

    .create-template-payment .tab-payment-rental .rental-total-payee .rental-total-payment-code__notification-link:before {
        content: "";
        position: absolute;
        height: 1px;
        width: 100%;
        bottom: 0;
        background: #690DD3;
    }

    .create-template-payment .tab-payment-rental .rental-total-payee .rental-total-payment-code__notification-link:hover {
        color: #690DD3 !important;
    }

.create-template-payment .tab-payment-rental .rental-total-payee .rental-total-payment-code .account-payment__sender-dropdown {
    padding: 0;
}

    .create-template-payment .tab-payment-rental .rental-total-payee .rental-total-payment-code .account-payment__sender-dropdown .sender-dropdown-container {
        width: 100%;
        max-width: 42.375rem;
    }

        .create-template-payment .tab-payment-rental .rental-total-payee .rental-total-payment-code .account-payment__sender-dropdown .sender-dropdown-container .form-check-content {
            position: relative;
            z-index: 1;
        }

.create-template-payment .tab-payment-rental .rental-total-payee .rental-total-payment-code .payment-form__transfer-subtitle {
    margin-top: 0;
}

.create-template-payment .tab-payment-rental .rental-total-payee .payment-form__transfer-custom-select {
    width: 100%;
    max-height: fit-content;
    max-width: fit-content;
    min-width: 100%;
}

.create-template-payment .tab-payment-rental .rental-total-edit,
.create-template-payment .tab-payment-rental .rental-detail-add {
    padding-top: 1.75rem;
}

@media (max-width: 768px) {
    .create-template-payment .tab-payment-rental .rental-total-edit,
    .create-template-payment .tab-payment-rental .rental-detail-add {
        padding-top: 1.5rem;
    }
}

.create-template-payment .tab-payment-rental .rental-total-edit .btn-rental-total-edit,
.create-template-payment .tab-payment-rental .rental-total-edit .btn-add-rental-details,
.create-template-payment .tab-payment-rental .rental-detail-add .btn-rental-total-edit,
.create-template-payment .tab-payment-rental .rental-detail-add .btn-add-rental-details {
    min-width: 16rem;
    height: 2.5rem;
}

@media (max-width: 768px) {
    .create-template-payment .tab-payment-rental .rental-total-edit .btn-rental-total-edit,
    .create-template-payment .tab-payment-rental .rental-total-edit .btn-add-rental-details,
    .create-template-payment .tab-payment-rental .rental-detail-add .btn-rental-total-edit,
    .create-template-payment .tab-payment-rental .rental-detail-add .btn-add-rental-details {
        width: 100%;
        min-width: 100%;
    }
}

.create-template-payment .tab-payment-rental .rental-total-edit .btn-rental-total-edit .ico-n,
.create-template-payment .tab-payment-rental .rental-total-edit .btn-add-rental-details .ico-n,
.create-template-payment .tab-payment-rental .rental-detail-add .btn-rental-total-edit .ico-n,
.create-template-payment .tab-payment-rental .rental-detail-add .btn-add-rental-details .ico-n {
    margin-right: 0.5rem;
}

.create-template-payment .tab-payment-rental .rental-total-edit .btn-rental-total-edit .ico-n,
.create-template-payment .tab-payment-rental .rental-detail-add .btn-rental-total-edit .ico-n {
    margin-right: 0.5rem;
    background: url("../img/newDesign/icon/icon-account-edit-hover.svg") no-repeat center;
}

.debugUrl .create-template-payment .tab-payment-rental .rental-total-edit .btn-rental-total-edit .ico-n,
.debugUrl .create-template-payment .tab-payment-rental .rental-detail-add .btn-rental-total-edit .ico-n {
    background: url("/Content/themes/novapay/img/newDesign/icon/icon-account-edit-hover.svg") no-repeat center;
}

.create-template-payment .tab-payment-rental .rental-total-edit .rental-detail-notification,
.create-template-payment .tab-payment-rental .rental-detail-add .rental-detail-notification {
    display: block;
    padding-top: 0.75rem;
    color: #EB4235;
    font-size: 14px;
}

.create-template-payment .tab-payment-rental .rental-total-edit {
    gap: 0.75rem;
}

    .create-template-payment .tab-payment-rental .rental-total-edit .config-rental-detail {
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }

    .create-template-payment .tab-payment-rental .rental-total-edit .config-rental-detail__content {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

@media (max-width: 768px) {
    .create-template-payment .tab-payment-rental .rental-total-edit {
        flex-direction: column;
    }
}

.create-template-payment .tab-payment-other {
    display: flex;
    flex-direction: column;
    padding-top: 1.25rem;
}

    .create-template-payment .tab-payment-other .other-payment-details {
        display: flex;
        width: 100%;
        align-items: end;
        padding: 0;
    }

    .create-template-payment .tab-payment-other .account-iBan-field {
        max-width: 20.125rem;
        width: 100%;
        padding-right: 1.25rem;
    }

@media (max-width: 768px) {
    .create-template-payment .tab-payment-other .account-iBan-field {
        max-width: 100%;
    }
}

.create-template-payment .tab-payment-other .account-iBan-field__label {
    display: block;
    margin-bottom: 0.5rem;
}

.create-template-payment .tab-payment-other .account-iBan-field__input {
    padding: 0.5rem 0.75rem;
    width: 100%;
    min-height: 2.5rem;
    border-radius: 0.5rem;
    border: 1px solid #DBDFE4;
    font-size: 15px;
    color: #32383c;
}

.create-template-payment .modal-rental-detail {
    position: absolute;
    right: 0;
    left: auto;
    top: 1.25rem;
    height: calc(100% - 2.5rem);
    width: 0;
    background: #fff;
    overflow: hidden;
    transform: translateX(100%);
    transition: transform 0.3s ease, left 0.3s ease, opacity 0.3s ease;
    opacity: 0;
    border-radius: 0.5rem;
    z-index: 10;
}

    .create-template-payment .modal-rental-detail.open {
        right: auto;
        left: -20.5rem;
        transform: translateX(0);
        width: 312px;
        opacity: 1;
    }

@media (max-width: 1623px) {
    .create-template-payment .modal-rental-detail.open {
        left: -43.5%;
    }
}

@media (max-width: 1110px) {
    .create-template-payment .modal-rental-detail.open {
        left: 2.5%;
        z-index: 17;
    }
}

@media (max-width: 768px) {
    .create-template-payment .modal-rental-detail.open {
        left: 0;
        z-index: 17;
        height: 100%;
        top: 0;
        width: 100%;
        border-radius: 0;
    }
}

.create-template-payment .rental-detail__container {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
}

@media (max-width: 768px) {
    .create-template-payment .rental-detail__container {
        overflow-y: auto;
    }
}

.create-template-payment .rental-detail__header {
    display: flex;
    justify-content: space-between;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid #DBDFE4;
}

.create-template-payment .rental-detail__title {
    color: #464B53;
    font-size: 16px;
}

.create-template-payment .rental-detail__close {
    padding: 0;
}

.create-template-payment .rental-detail__content {
    flex: 1;
    padding: 1.5rem 1rem 0;
}

.create-template-payment .rental-detail__form {
    padding-bottom: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1.75rem;
}

.create-template-payment .rental-detail__form-group {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.create-template-payment .rental-detail__form-label, .create-template-payment .rental-detail__notification {
    color: #767F8A;
    font-size: 12px;
}

@media (max-width: 768px) {
    .create-template-payment .rental-detail__notification {
        padding-bottom: 1rem;
    }
}

.create-template-payment .rental-detail__custom-select {
    position: relative;
    width: 100%;
    background: #fff;
    border: 1px solid #DBDFE4;
    border-radius: 0.5rem;
    cursor: pointer;
}

.create-template-payment .rental-detail__select-selected {
    position: relative;
    width: 100%;
    padding: 0.75rem 2.188rem 0.75rem 0.75rem;
    border-radius: 0.5rem;
    text-align: left;
    font-weight: normal;
}

    .create-template-payment .rental-detail__select-selected .custom-select__arrow {
        position: absolute;
        top: 50%;
        right: 0;
        transition: transform 0.2s ease-out;
        transform: translate(-50%, -50%) rotate(0deg);
    }

    .create-template-payment .rental-detail__select-selected.open .custom-select__arrow {
        transform: translate(-50%, -50%) rotate(180deg);
    }

.create-template-payment .rental-detail__type-list {
    position: absolute;
    top: 109%;
    left: 0;
    width: 100%;
    border-radius: 0.5rem;
    list-style: none;
    padding: 0;
    margin: 0;
    background: #fff;
    border: 1px solid #DBDFE4;
    z-index: 10;
    margin: 0;
    padding: 0;
    overflow: auto;
    max-height: 23.25rem;
    list-style: none;
    background-color: #fff;
    scrollbar-width: thin;
    scrollbar-color: rgba(168, 173, 180, 0.5);
}

    .create-template-payment .rental-detail__type-list::-webkit-scrollbar-track {
        background: rgba(168, 173, 180, 0.5);
        border-radius: 0.25rem;
    }

    .create-template-payment .rental-detail__type-list::-webkit-scrollbar-thumb {
        background: rgba(168, 173, 180, 0.5);
        border-radius: 0.25rem;
    }

        .create-template-payment .rental-detail__type-list::-webkit-scrollbar-thumb:hover {
            background: rgba(168, 173, 180, 0.5);
        }

.create-template-payment .rental-detail__type-item {
    position: relative;
    padding: 10px;
    cursor: pointer;
    overflow: hidden;
}

    .create-template-payment .rental-detail__type-item:not(:last-of-type)::before {
        content: "";
        position: absolute;
        height: 1px;
        width: 100%;
        left: 50%;
        bottom: 0;
        background: #DBDFE4;
        transform: translateX(-50%);
    }

    .create-template-payment .rental-detail__type-item::after {
        content: "";
        position: absolute;
        top: 50%;
        left: 50%;
        width: 0;
        height: 0;
        background: #f0f0f0;
        border-radius: 50%;
        transform: translate(-50%, -50%);
        transition: width 0.22s ease, height 0.22s ease;
        z-index: -1;
    }

    .create-template-payment .rental-detail__type-item:hover::after {
        width: 200%;
        height: 200%;
    }

.create-template-payment .rental-detail__footer {
    margin-top: auto;
    margin-top: auto;
    padding: 1rem;
    display: flex;
    justify-content: space-between;
    border-top: 1px solid #DBDFE4;
}

.create-template-payment .date-picker-wrapper {
    position: relative;
}

    .create-template-payment .date-picker-wrapper .date-picker-content {
        display: flex;
        align-items: center;
        min-width: 5rem;
        border-radius: 0.5rem;
        border: 1px solid #DBDFE4;
        background: #fff;
        gap: 8px;
    }

        .create-template-payment .date-picker-wrapper .date-picker-content .date-field-range {
            width: 100%;
            padding: 0;
            border-color: transparent;
        }

    .create-template-payment .date-picker-wrapper .btn-date-picker {
        padding: 0 !important;
    }

        .create-template-payment .date-picker-wrapper .btn-date-picker:hover .icon-calendar {
            background: url("../img/newDesign/icon/icon-account-calendar-hover.svg") no-repeat center;
        }

.debugUrl .create-template-payment .date-picker-wrapper .btn-date-picker:hover .icon-calendar {
    background: url("/Content/themes/novapay/img/newDesign/icon/icon-account-calendar-hover.svg") no-repeat center;
}

.create-template-payment .date-picker-wrapper .date-display {
    color: #32383c;
}

.create-template-payment .date-picker-wrapper .btn-date-clear {
    padding: 3px;
    display: none;
}

    .create-template-payment .date-picker-wrapper .btn-date-clear.show {
        display: flex;
    }

.create-template-payment .date-picker-wrapper .dropdown-calendar {
    position: absolute;
    right: -0.5rem;
    padding: 0.5rem;
    width: 18.125rem;
    box-shadow: 0px 1.5rem 2.75rem 0px rgba(98, 98, 100, 0.3);
    border-radius: 1.25rem;
    background: #FFF;
    border: 1px solid #DBDFE4;
    z-index: 10;
}

    .create-template-payment .date-picker-wrapper .dropdown-calendar.calendar-top {
        bottom: 107%;
    }

    .create-template-payment .date-picker-wrapper .dropdown-calendar.calendar-bottom {
        top: 107%;
    }

.create-template-payment .date-picker-wrapper .calendar-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.625rem;
}

.create-template-payment .date-picker-wrapper .btn-prev,
.create-template-payment .date-picker-wrapper .btn-next {
    position: relative;
    padding: 0;
    height: 2rem;
    width: 2rem;
}

    .create-template-payment .date-picker-wrapper .btn-prev::after,
    .create-template-payment .date-picker-wrapper .btn-next::after {
        content: "";
        position: absolute;
        top: 50%;
        left: 50%;
        width: 0.5rem;
        height: 0.5rem;
        border-top: 2px solid #32383c;
        border-left: 2px solid #32383c;
        transform: translate(-50%, -50%) rotate(-45deg);
        transform-origin: center;
    }

    .create-template-payment .date-picker-wrapper .btn-prev::before,
    .create-template-payment .date-picker-wrapper .btn-next::before {
        content: "";
        position: absolute;
        top: 50%;
        left: 50%;
        width: 0;
        height: 0;
        background: #f0f0f0;
        border-radius: 50%;
        transform: translate(-50%, -50%);
        transition: width 0.22s ease, height 0.22s ease;
    }

    .create-template-payment .date-picker-wrapper .btn-prev:hover::before,
    .create-template-payment .date-picker-wrapper .btn-next:hover::before {
        width: 100%;
        height: 100%;
    }

    .create-template-payment .date-picker-wrapper .btn-prev::after {
        transform: translate(-50%, -50%) rotate(-45deg);
    }

    .create-template-payment .date-picker-wrapper .btn-next::after {
        transform: translate(-50%, -50%) rotate(135deg);
    }

.create-template-payment .date-picker-wrapper .week-header {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    text-align: center;
}

.create-template-payment .date-picker-wrapper .empty-day,
.create-template-payment .date-picker-wrapper .calendar-day,
.create-template-payment .date-picker-wrapper .week-day {
    text-align: center;
    height: 2.375rem;
    width: 2.375rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.create-template-payment .date-picker-wrapper .calendar-body .days-container {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
}

.create-template-payment .date-picker-wrapper .calendar-body .empty-day {
    visibility: hidden;
}

.create-template-payment .date-picker-wrapper .calendar-body .calendar-day {
    position: relative;
    cursor: pointer;
    border-radius: 50%;
}

    .create-template-payment .date-picker-wrapper .calendar-body .calendar-day.disabled {
        pointer-events: none;
        border-radius: 0;
    }

        .create-template-payment .date-picker-wrapper .calendar-body .calendar-day.disabled::before {
            width: 100%;
            height: 100%;
            border-radius: 0.75rem;
            background: #f4f6f7;
        }

        .create-template-payment .date-picker-wrapper .calendar-body .calendar-day.disabled span {
            color: #ccc;
        }

    .create-template-payment .date-picker-wrapper .calendar-body .calendar-day span {
        position: relative;
        display: block;
        color: #32383c;
    }

    .create-template-payment .date-picker-wrapper .calendar-body .calendar-day::before {
        content: "";
        position: absolute;
        top: 50%;
        left: 50%;
        width: 0;
        height: 0;
        background: #f0f0f0;
        border-radius: 50%;
        transform: translate(-50%, -50%);
        transition: width 0.22s ease, height 0.22s ease;
    }

    .create-template-payment .date-picker-wrapper .calendar-body .calendar-day:hover::before {
        width: 100%;
        height: 100%;
    }

    .create-template-payment .date-picker-wrapper .calendar-body .calendar-day.chosen {
        background-color: #E1CFF6;
        color: #32383c;
        border-radius: 50%;
    }

        .create-template-payment .date-picker-wrapper .calendar-body .calendar-day.chosen:hover::before {
            display: none;
        }

.create-template-payment .date-picker-wrapper .year-selector {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    margin-top: 10px;
    color: #32383c;
    text-align: center;
}

    .create-template-payment .date-picker-wrapper .year-selector .calendar-year {
        position: relative;
        padding: 0.5rem;
        display: block;
        color: #32383c;
        border-radius: 0.25rem;
        cursor: pointer;
        overflow: hidden;
    }

        .create-template-payment .date-picker-wrapper .year-selector .calendar-year.disabled {
            pointer-events: none;
        }

            .create-template-payment .date-picker-wrapper .year-selector .calendar-year.disabled::before {
                width: 100%;
                height: 100%;
                background: #f4f6f7;
            }

        .create-template-payment .date-picker-wrapper .year-selector .calendar-year span {
            position: relative;
            display: block;
        }

        .create-template-payment .date-picker-wrapper .year-selector .calendar-year::before {
            content: "";
            position: absolute;
            top: 50%;
            left: 50%;
            width: 0;
            height: 0;
            background: #f0f0f0;
            border-radius: 50%;
            transform: translate(-50%, -50%);
            transition: width 0.22s ease, height 0.22s ease;
        }

        .create-template-payment .date-picker-wrapper .year-selector .calendar-year:hover::before {
            width: 200%;
            height: 200%;
        }

        .create-template-payment .date-picker-wrapper .year-selector .calendar-year.chosen {
            background-color: #E1CFF6;
            color: #32383c;
        }

            .create-template-payment .date-picker-wrapper .year-selector .calendar-year.chosen:hover::before {
                display: none;
            }

.create-template-payment .date-picker-wrapper .current-month-year {
    position: relative;
    cursor: pointer;
    font-weight: bold;
    font-size: 14px;
    text-transform: capitalize;
    color: #32383c;
}

    .create-template-payment .date-picker-wrapper .current-month-year::before {
        content: "";
        position: absolute;
        top: 0.25rem;
        width: 7px;
        right: -1.125rem;
        height: 7px;
        border-top: 2px solid #32383c;
        border-left: 2px solid #32383c;
        transform-origin: center;
        transform: translate(-50%, 0) rotate(225deg);
    }

.create-template-payment .date-start-lease .date-picker-wrapper .date-picker-content {
    width: 100%;
}

.create-template-payment .date-start-lease .date-picker-wrapper .btn-date-picker {
    font-weight: normal;
    width: 100%;
    padding: 0;
    text-align: left;
}

.create-template-payment .date-start-lease .date-picker-wrapper .date-display {
    display: block;
    width: 100%;
    padding: 0;
    color: #767F8A;
    font-size: 15px;
}

.create-template-payment .date-start-lease .date-picker-wrapper .date-field-range {
    padding: 0.5rem 0.75rem;
    border-color: transparent;
    border-radius: 0.75rem;
    width: 100%;
}

.create-template-payment.open-regular-comfirm {
    max-height: 100vh;
}

.create-template-payment__footer {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 1rem 1.25rem;
    border-top: 1px solid #DBDFE4;
    background: #fff;
    z-index: 2;
}

    .create-template-payment__footer .button-group {
        display: flex;
        justify-content: end;
        align-items: center;
        gap: 0.75rem;
    }

        .create-template-payment__footer .button-group .btn {
            padding-bottom: 0.5rem;
            padding-top: 0.5rem;
        }

@media (max-width: 768px) {
    .create-template-payment__footer .button-group .btn {
        padding: 0.625rem;
    }
}

.create-template-payment__footer .right-buttons {
    display: flex;
}

.open-banking-main {
    padding: 0;
    background: #fff;
    border-radius: 0.75rem;
}

    .open-banking-main .ob-header {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 0;
        padding: 1rem 1.5rem;
    }

@media (max-width: 769px) {
    .open-banking-main .ob-header {
        flex-direction: column;
    }
}

@media (max-width: 480px) {
    .open-banking-main .ob-header__tabs .p-tab {
        font-size: 13px;
    }
}

.open-banking-main .ob-header:before {
    position: absolute;
    content: "";
    bottom: 0;
    background: #EDEFF1;
    width: calc(100% - 48px);
    height: 1px;
    left: 24px;
}

.open-banking-main .ob-header__title {
    color: #32383c;
    font-size: 1.25rem;
    font-weight: 600;
    line-height: 1.5rem;
    margin: 0;
}

.open-banking-main .ob-toolbar {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 1.25rem 1.5rem;
}

@media (max-width: 992px) {
    .open-banking-main .ob-toolbar {
        flex-direction: column;
        align-items: revert;
    }

        .open-banking-main .ob-toolbar .ob-toolbar__search-vertical-line {
            display: none;
        }
}

.open-banking-main .ob-toolbar__report-calendar {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

@media (max-width: 480px) {
    .open-banking-main .ob-toolbar__report-calendar {
        gap: 8px;
    }
}

.open-banking-main .ob-toolbar .report-calendar__title {
    font-size: 17px;
    font-weight: 500;
    color: #32383c;
}

@media (max-width: 480px) {
    .open-banking-main .ob-toolbar .report-calendar__title {
        font-size: 13px;
    }
}

.open-banking-main .ob-toolbar .report-calendar__data-wrap {
    height: 40px;
    display: flex;
    padding: 0.5rem 0.75rem;
    min-width: 223px;
    gap: 2px;
    border-radius: 0.5rem;
    border: 1px solid #DBDFE4;
    cursor: pointer;
}

@media (max-width: 768px) {
    .open-banking-main .ob-toolbar .report-calendar__data-wrap {
        width: calc(100% - 3.25rem);
        min-width: auto;
        flex-basis: 100%;
    }
}

.open-banking-main .ob-toolbar .report-calendar__calendar-period {
    width: 100%;
    text-align: left;
    font-size: 1rem;
    font-weight: 500;
    color: #32383c;
    background: transparent;
    border: none;
    cursor: pointer;
}

@media (max-width: 480px) {
    .open-banking-main .ob-toolbar .report-calendar__calendar-period {
        font-size: 14px !important;
    }
}

.open-banking-main .ob-toolbar .report-calendar .btn-clear-period {
    border: 1px solid #DBDFE4;
    background-color: transparent;
    height: 2.5rem;
    width: 2.5rem;
    padding: 0;
    margin: 0;
}

    .open-banking-main .ob-toolbar .report-calendar .btn-clear-period:hover {
        background-color: #f5edff;
        transition: background-color 0.42s ease-out;
        border-color: #5E1CAB;
        color: #5E1CAB;
    }

.open-banking-main .ob-toolbar__search {
    position: relative;
    flex: 1;
    max-width: 100%;
}

.open-banking-main .ob-toolbar__search-vertical-line {
    width: 1px;
    height: 16px;
    background: #EDEFF1;
}

.open-banking-main .ob-toolbar__search-input.form-control {
    width: 100%;
    padding-left: 3.25rem;
    font-size: 15px;
}

.open-banking-main .ob-toolbar .pay-slip-header__btn-clear {
    margin-right: 8px;
}

.open-banking-main .ob-toolbar__search-icon {
    position: absolute;
    width: 20px;
    height: 20px;
    left: 1rem;
    top: 50%;
    transform: translateY(-50%);
    color: #9ca3af;
    pointer-events: none;
}

.open-banking-main .ob-grid-wrapper {
    border: 1px solid #e5e7eb;
    border-radius: 0;
    overflow: hidden;
}

.open-banking-main .ob-tpp {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.open-banking-main .ob-tpp__logo {
    width: 1.25rem;
    height: 1.25rem;
    border-radius: 0.25rem;
    object-fit: contain;
    flex-shrink: 0;
}

.open-banking-main .ob-tpp__logo-placeholder {
    width: 1.25rem;
    height: 1.25rem;
    border-radius: 0.25rem;
    background: #32383c;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.open-banking-main .ob-tpp__name {
    font-size: 14px;
    color: #111827;
}

.open-banking-main .ob-status {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    padding: 7px 10px;
    width: fit-content;
    border-radius: 1.5rem;
    font-size: 12px;
    font-weight: 500;
    line-height: 1rem;
    margin-bottom: 0.25rem;
}

    .open-banking-main .ob-status .ico-n {
        width: 1rem;
        height: 1rem;
    }

    .open-banking-main .ob-status[data-status="1"], .open-banking-main .ob-status[data-status="41"] {
        background: #FFF5DD;
        color: #7F560F;
    }

    .open-banking-main .ob-status[data-status="9"] {
        background: #D9FCF4;
        color: #0D5C53;
    }

    .open-banking-main .ob-status[data-status="3"] {
        background: #FFEBEA;
        color: #C6261A;
    }

        .open-banking-main .ob-status[data-status="3"] .ico-n {
            width: 18px;
            height: 18px;
        }

    .open-banking-main .ob-status[data-status="10"], .open-banking-main .ob-status[data-status="11"] {
        background: #f4f6f7;
        color: #32383c;
    }

    .open-banking-main .ob-status[data-status="8"] {
        background: #def5fa;
        color: #0d475c;
    }

    .open-banking-main .ob-status[data-status="0"], .open-banking-main .ob-status[data-status="13"] {
        background: #f4f6f7;
        color: #32383c;
    }

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

.vue_ob-infoGrid .p-datatable-table-container, .vue_ob-paymentsGrid .p-datatable-table-container {
    border: none;
    border-radius: 0;
}

.vue_ob-infoGrid .chip-tableGrid, .vue_ob-paymentsGrid .chip-tableGrid {
    margin-bottom: 12px;
}

.vue_ob-infoGrid .p-datatable-thead > tr > td:not(.client_info).col-TppName, .vue_ob-infoGrid .p-datatable-thead th:not(.client_info).col-TppName, .vue_ob-infoGrid .p-datatable-tbody > tr > td:not(.client_info).col-TppName, .vue_ob-infoGrid .p-datatable-tbody th:not(.client_info).col-TppName, .vue_ob-paymentsGrid .p-datatable-thead > tr > td:not(.client_info).col-TppName, .vue_ob-paymentsGrid .p-datatable-thead th:not(.client_info).col-TppName, .vue_ob-paymentsGrid .p-datatable-tbody > tr > td:not(.client_info).col-TppName, .vue_ob-paymentsGrid .p-datatable-tbody th:not(.client_info).col-TppName {
    padding-left: 1.5rem;
}

@media (max-width: 1200px) {
    .vue_ob-infoGrid .p-datatable-thead > tr > td:not(.client_info).col-TppName, .vue_ob-infoGrid .p-datatable-thead th:not(.client_info).col-TppName, .vue_ob-infoGrid .p-datatable-tbody > tr > td:not(.client_info).col-TppName, .vue_ob-infoGrid .p-datatable-tbody th:not(.client_info).col-TppName, .vue_ob-paymentsGrid .p-datatable-thead > tr > td:not(.client_info).col-TppName, .vue_ob-paymentsGrid .p-datatable-thead th:not(.client_info).col-TppName, .vue_ob-paymentsGrid .p-datatable-tbody > tr > td:not(.client_info).col-TppName, .vue_ob-paymentsGrid .p-datatable-tbody th:not(.client_info).col-TppName {
        padding-left: 0.5rem;
    }
}

.vue_ob-infoGrid .p-datatable-thead > tr > td:not(.client_info).col-ValidTo, .vue_ob-infoGrid .p-datatable-thead th:not(.client_info).col-ValidTo, .vue_ob-infoGrid .p-datatable-tbody > tr > td:not(.client_info).col-ValidTo, .vue_ob-infoGrid .p-datatable-tbody th:not(.client_info).col-ValidTo, .vue_ob-paymentsGrid .p-datatable-thead > tr > td:not(.client_info).col-ValidTo, .vue_ob-paymentsGrid .p-datatable-thead th:not(.client_info).col-ValidTo, .vue_ob-paymentsGrid .p-datatable-tbody > tr > td:not(.client_info).col-ValidTo, .vue_ob-paymentsGrid .p-datatable-tbody th:not(.client_info).col-ValidTo {
    width: 9.375rem;
}

@media (max-width: 1200px) {
    .vue_ob-infoGrid .p-datatable-thead > tr > td:not(.client_info).col-ValidTo, .vue_ob-infoGrid .p-datatable-thead th:not(.client_info).col-ValidTo, .vue_ob-infoGrid .p-datatable-tbody > tr > td:not(.client_info).col-ValidTo, .vue_ob-infoGrid .p-datatable-tbody th:not(.client_info).col-ValidTo, .vue_ob-paymentsGrid .p-datatable-thead > tr > td:not(.client_info).col-ValidTo, .vue_ob-paymentsGrid .p-datatable-thead th:not(.client_info).col-ValidTo, .vue_ob-paymentsGrid .p-datatable-tbody > tr > td:not(.client_info).col-ValidTo, .vue_ob-paymentsGrid .p-datatable-tbody th:not(.client_info).col-ValidTo {
        width: auto;
    }
}

.vue_ob-infoGrid .p-datatable-thead th, .vue_ob-paymentsGrid .p-datatable-thead th {
    padding-top: 16px !important;
    padding-bottom: 16px !important;
}

    .vue_ob-infoGrid .p-datatable-thead th.col-Status .icon-search, .vue_ob-paymentsGrid .p-datatable-thead th.col-Status .icon-search {
        display: inline-block;
        width: 14px;
        height: 14px;
        background-color: currentColor;
        background-image: none;
        mask-image: url("../img/sprite.svg#icon-sort-status");
    }

.debugUrl .vue_ob-infoGrid .p-datatable-thead th.col-Status .icon-search, .debugUrl .vue_ob-paymentsGrid .p-datatable-thead th.col-Status .icon-search {
    mask-image: url("/Content/themes/novapay/img/sprite.svg#icon-sort-status");
}

.vue_ob-infoGrid .p-datatable-thead th.col-Status .icon-search, .vue_ob-paymentsGrid .p-datatable-thead th.col-Status .icon-search {
    mask-repeat: no-repeat;
    mask-size: contain;
}

.vue_ob-infoGrid .p-datatable-thead th.col-Created .p-datatable-column-title, .vue_ob-paymentsGrid .p-datatable-thead th.col-Created .p-datatable-column-title {
    width: 70px;
    white-space: break-spaces;
}

.vue_ob-infoGrid .p-datatable-thead th.col-ValidTo .p-datatable-column-title, .vue_ob-paymentsGrid .p-datatable-thead th.col-ValidTo .p-datatable-column-title {
    width: 75px;
    white-space: break-spaces;
}

@media (max-width: 1640px) {
    .vue_ob-infoGrid .p-datatable-thead th.col-OpenBankingAccess, .vue_ob-paymentsGrid .p-datatable-thead th.col-OpenBankingAccess {
        width: 210px;
    }
}

.vue_ob-infoGrid .p-datatable-thead th.col-OpenBankingAccounts, .vue_ob-paymentsGrid .p-datatable-thead th.col-OpenBankingAccounts {
    width: 280px;
}

@media (max-width: 1640px) {
    .vue_ob-infoGrid .p-datatable-thead th.col-OpenBankingAccounts, .vue_ob-paymentsGrid .p-datatable-thead th.col-OpenBankingAccounts {
        width: 210px;
    }
}

.vue_ob-infoGrid .p-datatable-tbody > tr > td:not(.client_info), .vue_ob-paymentsGrid .p-datatable-tbody > tr > td:not(.client_info) {
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
    color: #32383c !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    line-height: 1.125rem !important;
}

    .vue_ob-infoGrid .p-datatable-tbody > tr > td:not(.client_info).col-Actions, .vue_ob-paymentsGrid .p-datatable-tbody > tr > td:not(.client_info).col-Actions {
        padding-right: 24px;
    }

        .vue_ob-infoGrid .p-datatable-tbody > tr > td:not(.client_info).col-Actions .content-dot, .vue_ob-paymentsGrid .p-datatable-tbody > tr > td:not(.client_info).col-Actions .content-dot {
            display: flex;
            height: 100%;
            border-radius: 0;
            width: 1.25rem;
            cursor: pointer;
        }

            .vue_ob-infoGrid .p-datatable-tbody > tr > td:not(.client_info).col-Actions .content-dot:not(:disabled):hover, .vue_ob-paymentsGrid .p-datatable-tbody > tr > td:not(.client_info).col-Actions .content-dot:not(:disabled):hover {
                background: transparent;
            }

            .vue_ob-infoGrid .p-datatable-tbody > tr > td:not(.client_info).col-Actions .content-dot .icon-vertical-dot, .vue_ob-paymentsGrid .p-datatable-tbody > tr > td:not(.client_info).col-Actions .content-dot .icon-vertical-dot {
                color: #DBDFE4;
            }

            .vue_ob-infoGrid .p-datatable-tbody > tr > td:not(.client_info).col-Actions .content-dot:hover .icon-vertical-dot, .vue_ob-infoGrid .p-datatable-tbody > tr > td:not(.client_info).col-Actions .content-dot:active .icon-vertical-dot, .vue_ob-infoGrid .p-datatable-tbody > tr > td:not(.client_info).col-Actions .content-dot:focus .icon-vertical-dot, .vue_ob-paymentsGrid .p-datatable-tbody > tr > td:not(.client_info).col-Actions .content-dot:hover .icon-vertical-dot, .vue_ob-paymentsGrid .p-datatable-tbody > tr > td:not(.client_info).col-Actions .content-dot:active .icon-vertical-dot, .vue_ob-paymentsGrid .p-datatable-tbody > tr > td:not(.client_info).col-Actions .content-dot:focus .icon-vertical-dot {
                color: #767F8A;
            }

@media (max-width: 1200px) {
    .vue_ob-infoGrid .p-datatable-tbody > tr > td:not(.client_info).col-Actions .content-dot, .vue_ob-paymentsGrid .p-datatable-tbody > tr > td:not(.client_info).col-Actions .content-dot {
        width: 100%;
        border: 1px solid #DBDFE4;
        border-radius: 0.5rem;
        background: transparent;
        font-weight: 500;
    }

        .vue_ob-infoGrid .p-datatable-tbody > tr > td:not(.client_info).col-Actions .content-dot .ico-n, .vue_ob-paymentsGrid .p-datatable-tbody > tr > td:not(.client_info).col-Actions .content-dot .ico-n {
            display: none;
        }

        .vue_ob-infoGrid .p-datatable-tbody > tr > td:not(.client_info).col-Actions .content-dot::after, .vue_ob-paymentsGrid .p-datatable-tbody > tr > td:not(.client_info).col-Actions .content-dot::after {
            content: "Дії за доступом";
            display: flex;
            width: 100%;
            height: 2.5rem;
            align-items: center;
            justify-content: center;
            color: #32383c;
            font-size: 14px;
            font-weight: 500;
            line-height: 1;
        }
}

.vue_ob-infoGrid .p-datatable-tbody .p-datatable-empty-message .no-data-openBanking, .vue_ob-paymentsGrid .p-datatable-tbody .p-datatable-empty-message .no-data-openBanking {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 20.625rem;
}

    .vue_ob-infoGrid .p-datatable-tbody .p-datatable-empty-message .no-data-openBanking .no-openBanking__container, .vue_ob-paymentsGrid .p-datatable-tbody .p-datatable-empty-message .no-data-openBanking .no-openBanking__container {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 0.75rem;
    }

    .vue_ob-infoGrid .p-datatable-tbody .p-datatable-empty-message .no-data-openBanking .no-openBanking__image .icon-no-employees, .vue_ob-paymentsGrid .p-datatable-tbody .p-datatable-empty-message .no-data-openBanking .no-openBanking__image .icon-no-employees {
        background-color: #DBDFE4;
    }

    .vue_ob-infoGrid .p-datatable-tbody .p-datatable-empty-message .no-data-openBanking .no-openBanking__text, .vue_ob-paymentsGrid .p-datatable-tbody .p-datatable-empty-message .no-data-openBanking .no-openBanking__text {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 0.5rem;
    }

    .vue_ob-infoGrid .p-datatable-tbody .p-datatable-empty-message .no-data-openBanking .no-openBanking__title, .vue_ob-paymentsGrid .p-datatable-tbody .p-datatable-empty-message .no-data-openBanking .no-openBanking__title {
        font-size: 17px;
        font-weight: 500;
        line-height: 1.5rem;
        color: #767F8A;
    }

    .vue_ob-infoGrid .p-datatable-tbody .p-datatable-empty-message .no-data-openBanking .no-openBanking__subtitle, .vue_ob-paymentsGrid .p-datatable-tbody .p-datatable-empty-message .no-data-openBanking .no-openBanking__subtitle {
        font-size: 14px;
        line-height: 1.125rem;
        color: #767F8A;
    }

.vue_ob-infoGrid .p-datatable-footer, .vue_ob-paymentsGrid .p-datatable-footer {
    border-radius: 0;
}

.ob-recall-payment-icon {
    min-width: 24px;
    max-width: 24px;
    margin-left: -3px;
}

.ob-accounts__iban,
.ob-accounts__count {
    color: #767F8A;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 16px;
}

@media (max-width: 1200px) {
    .vue_ob-infoGrid .p-datatable-scrollable-table {
        margin-top: 24px;
    }
}

.p-checkbox.p-checkbox-checked .p-checkbox-box {
    border-radius: 4px;
    border: 1px solid #690DD3 !important;
    background: #690DD3 !important;
}

.p-checkbox-label {
    display: flex;
    align-items: center;
}

.p-checkbox-box .p-checkbox-icon {
    stroke: white;
    stroke-width: 1.1px;
    stroke-linejoin: round;
    padding: 1px;
}

.btn-show-more {
    padding: 0.5rem 1rem !important;
    height: fit-content;
    border-radius: 0.5rem;
    color: #690DD3 !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    background: transparent !important;
    border: 1px solid #690DD3 !important;
    outline: none;
    cursor: pointer;
}

    .btn-show-more span {
        margin-left: 0.5rem;
    }

@media (max-width: 768px) {
    .btn-show-more {
        margin-bottom: 1.125rem;
        width: 100%;
    }
}

.btn-show-more.btn--loading {
    opacity: 0.6;
    cursor: not-allowed;
    position: relative;
}

    .btn-show-more.btn--loading::after {
        content: "";
        position: absolute;
        top: 50%;
        left: 50%;
        margin-left: -8px;
        margin-top: -8px;
        width: 16px;
        height: 16px;
        border: 2px solid transparent;
        border-top: 2px solid currentColor;
        border-radius: 50%;
        animation: spin 1s linear infinite;
    }

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.btn-editor-dropdown .ob-icon-recall {
    height: 18px !important;
    min-width: 18px !important;
}

.vue_ob-paymentsGrid .col-payment-purpose {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    word-break: break-all;
}

@media (max-width: 2200px) {
    .vue_ob-paymentsGrid .col-payment-purpose {
        max-width: 350px;
    }
}

@media (max-width: 1900px) {
    .vue_ob-paymentsGrid .col-payment-purpose {
        max-width: 250px;
    }
}

@media (max-width: 1700px) {
    .vue_ob-paymentsGrid .col-payment-purpose {
        max-width: 220px;
    }
}

@media (max-width: 1640px) {
    .vue_ob-paymentsGrid .col-payment-purpose {
        max-width: 180px;
    }
}

.openBankingDetailsHeader__title,
.banking-details-header__title {
    color: #464B53;
    font-size: 24px;
    font-style: normal;
    font-weight: 600;
    line-height: 28px;
    margin-bottom: 16px;
}

@media (max-width: 768px) {
    .openBankingDetailsHeader__title,
    .banking-details-header__title {
        font-size: 20px;
    }
}

.openBankingDetailsHeader__type,
.banking-details-header__type {
    margin-top: 16px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.openBankingDetailsHeader__type-text,
.banking-details-header__type-text {
    color: #767F8A;
}

.openBankingDetailsHeader__type-icon,
.banking-details-header__type-icon {
    min-width: 30px;
    height: 30px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #690DD3;
}

    .openBankingDetailsHeader__type-icon .ico-n,
    .banking-details-header__type-icon .ico-n {
        width: 18px;
        height: 18px;
        background: white;
    }

.openBankingDetailsHeader__status,
.banking-details-header__status {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 7px 10px;
    width: fit-content;
    border-radius: 24px;
    font-size: 12px;
    font-weight: 500;
    line-height: 16px;
    margin-bottom: 4px;
}

    .openBankingDetailsHeader__status .ico-n,
    .banking-details-header__status .ico-n {
        width: 16px;
        height: 16px;
    }

    .openBankingDetailsHeader__status[data-status="1"], .openBankingDetailsHeader__status[data-status="41"],
    .banking-details-header__status[data-status="1"],
    .banking-details-header__status[data-status="41"] {
        background: #FFF5DD;
        color: #7F560F;
    }

    .openBankingDetailsHeader__status[data-status="9"],
    .banking-details-header__status[data-status="9"] {
        background: #D9FCF4;
        color: #0D5C53;
    }

    .openBankingDetailsHeader__status[data-status="3"],
    .banking-details-header__status[data-status="3"] {
        background: #FFEBEA;
        color: #C6261A;
    }

        .openBankingDetailsHeader__status[data-status="3"] .ico-n,
        .banking-details-header__status[data-status="3"] .ico-n {
            width: 18px;
            height: 18px;
        }

    .openBankingDetailsHeader__status[data-status="10"], .openBankingDetailsHeader__status[data-status="11"],
    .banking-details-header__status[data-status="10"],
    .banking-details-header__status[data-status="11"] {
        background: #f4f6f7;
        color: #32383c;
    }

    .openBankingDetailsHeader__status[data-status="8"],
    .banking-details-header__status[data-status="8"] {
        background: #def5fa;
        color: #0d475c;
    }

    .openBankingDetailsHeader__status[data-status="0"], .openBankingDetailsHeader__status[data-status="13"],
    .banking-details-header__status[data-status="0"],
    .banking-details-header__status[data-status="13"] {
        background: #f4f6f7;
        color: #32383c;
    }

.openBankingDetailsBody {
    padding: 0 20px 28px;
}

    .openBankingDetailsBody .banking-details__title {
        color: #32383c;
        font-size: 16px;
        font-style: normal;
        font-weight: 600;
        line-height: 20px;
    }

    .openBankingDetailsBody .banking-details__provider {
        padding: 20px 0 25px;
        border-bottom: solid 1px #EDEFF1;
    }

    .openBankingDetailsBody .banking-details__provider-type {
        margin-top: 24px;
        display: flex;
        align-items: center;
        gap: 12px;
    }

    .openBankingDetailsBody .banking-details__provider-icon {
        width: 48px;
        height: 48px;
    }

    .openBankingDetailsBody .banking-details__provider-info {
        display: flex;
        flex-direction: column;
        gap: 4;
    }

    .openBankingDetailsBody .banking-details__provider-name {
        color: #32383c;
        font-size: 20px;
        font-style: normal;
        font-weight: 600;
        line-height: 24px;
    }

    .openBankingDetailsBody .banking-details__provider-document {
        color: #767F8A;
        font-size: 14px;
        font-style: normal;
        font-weight: 400;
        line-height: 18px;
    }

        .openBankingDetailsBody .banking-details__provider-document span {
            color: #32383c;
            font-weight: 500;
        }

    .openBankingDetailsBody .banking-details__accounts {
        margin-top: 25px;
    }

    .openBankingDetailsBody .banking-details__accounts-wrap {
        border-radius: 8px;
        border: 1px solid #DBDFE4;
        margin-top: 16px;
    }

    .openBankingDetailsBody .banking-details__accounts-item {
        position: relative;
        padding: 16px 16px 14px 16px;
        display: flex;
        flex-direction: column;
        gap: 4px;
        background: #f4f6f7;
    }

        .openBankingDetailsBody .banking-details__accounts-item:nth-child(1) {
            border-top-left-radius: 8px;
            border-top-right-radius: 8px;
        }

        .openBankingDetailsBody .banking-details__accounts-item:not(:last-child)::after {
            position: absolute;
            content: "";
            bottom: 0;
            left: 16px;
            width: calc(100% - 32px);
            height: 1px;
            background: #DBDFE4;
        }

    .openBankingDetailsBody .banking-details__accounts-item {
        color: #32383c;
        font-size: 16px;
        font-style: normal;
        font-weight: 500;
        line-height: 20px;
    }

    .openBankingDetailsBody .banking-details__accounts-iban {
        color: #767F8A;
        font-size: 14px;
        font-style: normal;
        font-weight: 400;
        line-height: 18px;
    }

    .openBankingDetailsBody .banking-details__accounts-access {
        padding: 16px;
        display: flex;
        flex-direction: column;
        gap: 8px;
    }

    .openBankingDetailsBody .banking-details__accounts-access-item {
        display: flex;
        align-items: center;
        gap: 12px;
    }

    .openBankingDetailsBody .banking-details__accounts-access-point {
        width: 6.6px;
        height: 6.6px;
        background-color: #767F8A;
        border-radius: 50%;
    }

    .openBankingDetailsBody .banking-details__accounts-access-text {
        color: #32383c;
        font-feature-settings: "case" on;
        font-size: 15px;
        font-style: normal;
        line-height: 24px;
        font-weight: 400;
    }

    .openBankingDetailsBody .banking-details__purpose {
        display: flex;
        align-items: center;
        gap: 8px;
        margin-top: 15px;
    }

@media (max-width: 768px) {
    .openBankingDetailsBody .banking-details__purpose {
        flex-direction: column;
        gap: 2px;
    }
}

.openBankingDetailsBody .banking-details__linked-payment {
    margin-top: 24px;
}

    .openBankingDetailsBody .banking-details__linked-payment .table-header-name {
        color: #767F8A;
        font-size: 12px;
        font-style: normal;
        font-weight: 500;
        line-height: 16px;
    }

    .openBankingDetailsBody .banking-details__linked-payment .table-body-name {
        color: #32383c;
        font-size: 12px;
        font-style: normal;
        font-weight: 500;
        line-height: 16px;
        word-break: break-all;
    }

    .openBankingDetailsBody .banking-details__linked-payment .linked-payment__status {
        position: relative;
        padding: 0.438rem 0.625rem 0.438rem;
        width: 7.563rem;
        height: 1.938rem;
        justify-content: center;
        align-items: center;
        gap: 4px;
        display: none;
        border: 1px solid transparent;
        border-radius: 1.5rem;
        font-size: 12px;
        font-weight: 500;
    }

        .openBankingDetailsBody .banking-details__linked-payment .linked-payment__status:before {
            content: "";
            display: block;
            height: 1.125rem;
            width: 1.125rem;
            margin-bottom: 1px;
        }

        .openBankingDetailsBody .banking-details__linked-payment .linked-payment__status[data-status="95"], .openBankingDetailsBody .banking-details__linked-payment .linked-payment__status[data-status="94"], .openBankingDetailsBody .banking-details__linked-payment .linked-payment__status[data-status="91"], .openBankingDetailsBody .banking-details__linked-payment .linked-payment__status[data-status="92"], .openBankingDetailsBody .banking-details__linked-payment .linked-payment__status[data-status="93"], .openBankingDetailsBody .banking-details__linked-payment .linked-payment__status[data-status="96"], .openBankingDetailsBody .banking-details__linked-payment .linked-payment__status[data-status="90"], .openBankingDetailsBody .banking-details__linked-payment .linked-payment__status[data-status="97"] {
            display: flex;
            max-width: fit-content;
            padding: 7px 10px;
            width: 100%;
        }

        .openBankingDetailsBody .banking-details__linked-payment .linked-payment__status[data-status="95"] {
            background: #D9FCF4;
            color: #0D5C53;
            border-color: #D9FCF4;
            max-width: fit-content;
        }

            .openBankingDetailsBody .banking-details__linked-payment .linked-payment__status[data-status="95"].conducted {
                display: flex;
            }

            .openBankingDetailsBody .banking-details__linked-payment .linked-payment__status[data-status="95"]:before {
                background: url("../img/newDesign/icon/icon-account-open.svg") no-repeat center;
            }

.debugUrl .openBankingDetailsBody .banking-details__linked-payment .linked-payment__status[data-status="95"]:before {
    background: url("/Content/themes/novapay/img/newDesign/icon/icon-account-open.svg") no-repeat center;
}

.openBankingDetailsBody .banking-details__linked-payment .linked-payment__status[data-status="91"] {
    background: #f5edff;
    color: #690DD3;
}

    .openBankingDetailsBody .banking-details__linked-payment .linked-payment__status[data-status="91"].toSign {
        display: flex;
    }

    .openBankingDetailsBody .banking-details__linked-payment .linked-payment__status[data-status="91"]:before {
        background: url("../img/newDesign/icon/status-icon-signature.svg") no-repeat center;
    }

.debugUrl .openBankingDetailsBody .banking-details__linked-payment .linked-payment__status[data-status="91"]:before {
    background: url("/Content/themes/novapay/img/newDesign/icon/status-icon-signature.svg") no-repeat center;
}

.openBankingDetailsBody .banking-details__linked-payment .linked-payment__status[data-status="94"] {
    background: #FFF5DD;
    color: #7F560F;
    border-color: transparent;
}

    .openBankingDetailsBody .banking-details__linked-payment .linked-payment__status[data-status="94"].processing {
        display: flex;
    }

    .openBankingDetailsBody .banking-details__linked-payment .linked-payment__status[data-status="94"]:before {
        background: url("../img/newDesign/icon/icon-account-clock.svg") no-repeat center;
    }

.debugUrl .openBankingDetailsBody .banking-details__linked-payment .linked-payment__status[data-status="94"]:before {
    background: url("/Content/themes/novapay/img/newDesign/icon/icon-account-clock.svg") no-repeat center;
}

.openBankingDetailsBody .banking-details__linked-payment .linked-payment__status[data-status="92"] {
    background: #FFF5DD;
    color: #7F560F;
    border-color: transparent;
}

    .openBankingDetailsBody .banking-details__linked-payment .linked-payment__status[data-status="92"].toVisa {
        display: flex;
    }

    .openBankingDetailsBody .banking-details__linked-payment .linked-payment__status[data-status="92"]:before {
        background: url("../img/newDesign/icon/status-icon-visa.svg") no-repeat center;
    }

.debugUrl .openBankingDetailsBody .banking-details__linked-payment .linked-payment__status[data-status="92"]:before {
    background: url("/Content/themes/novapay/img/newDesign/icon/status-icon-visa.svg") no-repeat center;
}

.openBankingDetailsBody .banking-details__linked-payment .linked-payment__status[data-status="93"] {
    background: #F5EDFF;
    color: #690DD3;
    border-color: transparent;
}

    .openBankingDetailsBody .banking-details__linked-payment .linked-payment__status[data-status="93"].toSend {
        display: flex;
    }

    .openBankingDetailsBody .banking-details__linked-payment .linked-payment__status[data-status="93"]:before {
        width: 18px !important;
        height: 18px !important;
        display: inline-block;
        width: 24px;
        height: 24px;
        background-color: currentColor;
        background-image: none;
        mask-image: url("../img/sprite.svg#icon-send-payment-new");
    }

.debugUrl .openBankingDetailsBody .banking-details__linked-payment .linked-payment__status[data-status="93"]:before {
    mask-image: url("/Content/themes/novapay/img/sprite.svg#icon-send-payment-new");
}

.openBankingDetailsBody .banking-details__linked-payment .linked-payment__status[data-status="93"]:before {
    mask-repeat: no-repeat;
    mask-size: contain;
}

.debugUrl .openBankingDetailsBody .banking-details__linked-payment .linked-payment__status[data-status="93"]:before {
    width: 18px !important;
    height: 18px !important;
    display: inline-block;
    width: 24px;
    height: 24px;
    background-color: currentColor;
    background-image: none;
    mask-image: url("../img/sprite.svg#icon-send-payment-new");
}

.debugUrl .debugUrl .openBankingDetailsBody .banking-details__linked-payment .linked-payment__status[data-status="93"]:before {
    mask-image: url("/Content/themes/novapay/img/sprite.svg#icon-send-payment-new");
}

.debugUrl .openBankingDetailsBody .banking-details__linked-payment .linked-payment__status[data-status="93"]:before {
    mask-repeat: no-repeat;
    mask-size: contain;
}

.openBankingDetailsBody .banking-details__linked-payment .linked-payment__status[data-status="96"] {
    background: #FFEBEA;
    color: #C6261A;
    border-color: transparent;
}

    .openBankingDetailsBody .banking-details__linked-payment .linked-payment__status[data-status="96"].rejected {
        display: flex;
    }

    .openBankingDetailsBody .banking-details__linked-payment .linked-payment__status[data-status="96"]:before {
        background: url("../img/newDesign/icon/icon-account-close.svg") no-repeat center;
    }

.debugUrl .openBankingDetailsBody .banking-details__linked-payment .linked-payment__status[data-status="96"]:before {
    background: url("../img/newDesign/icon/icon-account-close.svg") no-repeat center;
}

.openBankingDetailsBody .banking-details__linked-payment .linked-payment__status[data-status="90"] {
    background: #DBDFE4;
    color: #767F8A;
    border-color: transparent;
}

    .openBankingDetailsBody .banking-details__linked-payment .linked-payment__status[data-status="90"] .status-text.unknown {
        display: flex;
        padding: 0;
    }

    .openBankingDetailsBody .banking-details__linked-payment .linked-payment__status[data-status="90"] .status-text:before {
        position: absolute;
        content: "";
        display: inline-block;
        left: 0;
        top: 50%;
        height: 0;
        width: 0;
        transform: translateY(-50%);
    }

.openBankingDetailsBody .banking-details__linked-payment .linked-payment__status[data-status="97"] {
    background: #FFEBEA;
    color: #C6261A;
    border-color: transparent;
}

    .openBankingDetailsBody .banking-details__linked-payment .linked-payment__status[data-status="97"].deleted {
        display: flex;
    }

    .openBankingDetailsBody .banking-details__linked-payment .linked-payment__status[data-status="97"]:before {
        background: url("../img/sprite.svg#icon-remove-payment") no-repeat center;
    }

.debugUrl .openBankingDetailsBody .banking-details__linked-payment .linked-payment__status[data-status="97"]:before {
    background: url("../img/sprite.svg#icon-remove-payment") no-repeat center;
}

.openBankingDetailsBody .banking-details__linked-payment .linked-payment__status.status-sign-1-2:before, .openBankingDetailsBody .banking-details__linked-payment .linked-payment__status[data-status="91"].icon-status-sign.icon-status-sign-1-2:before {
    background: url("../img/newDesign/icon/paymentStatus/icon-status-sign-1-2.svg") no-repeat center;
}

.debugUrl .openBankingDetailsBody .banking-details__linked-payment .linked-payment__status.status-sign-1-2:before, .debugUrl .openBankingDetailsBody .banking-details__linked-payment .linked-payment__status[data-status="91"].icon-status-sign.icon-status-sign-1-2:before {
    background: url("/Content/themes/novapay/img/newDesign/icon/paymentStatus/icon-status-sign-1-2.svg") no-repeat center;
}

.openBankingDetailsBody .banking-details__linked-payment .linked-payment__status.status-sign-2-2:before, .openBankingDetailsBody .banking-details__linked-payment .linked-payment__status[data-status="91"].icon-status-sign.icon-status-sign-2-2:before {
    background: url("../img/newDesign/icon/paymentStatus/icon-status-sign-2-2.svg") no-repeat center;
}

.debugUrl .openBankingDetailsBody .banking-details__linked-payment .linked-payment__status.status-sign-2-2:before, .debugUrl .openBankingDetailsBody .banking-details__linked-payment .linked-payment__status[data-status="91"].icon-status-sign.icon-status-sign-2-2:before {
    background: url("/Content/themes/novapay/img/newDesign/icon/paymentStatus/icon-status-sign-2-2.svg") no-repeat center;
}

.openBankingDetailsBody .banking-details__linked-payment .linked-payment__status.status-sign-1-3:before, .openBankingDetailsBody .banking-details__linked-payment .linked-payment__status[data-status="91"].icon-status-sign.icon-status-sign-1-3:before {
    background: url("../img/newDesign/icon/paymentStatus/icon-status-sign-1-3.svg") no-repeat center;
}

.debugUrl .openBankingDetailsBody .banking-details__linked-payment .linked-payment__status.status-sign-1-3:before, .debugUrl .openBankingDetailsBody .banking-details__linked-payment .linked-payment__status[data-status="91"].icon-status-sign.icon-status-sign-1-3:before {
    background: url("/Content/themes/novapay/img/newDesign/icon/paymentStatus/icon-status-sign-1-3.svg") no-repeat center;
}

.openBankingDetailsBody .banking-details__linked-payment .linked-payment__status.status-sign-2-3:before, .openBankingDetailsBody .banking-details__linked-payment .linked-payment__status[data-status="91"].icon-status-sign.icon-status-sign-2-3:before {
    background: url("../img/newDesign/icon/paymentStatus/icon-status-sign-2-3.svg") no-repeat center;
}

.debugUrl .openBankingDetailsBody .banking-details__linked-payment .linked-payment__status.status-sign-2-3:before, .debugUrl .openBankingDetailsBody .banking-details__linked-payment .linked-payment__status[data-status="91"].icon-status-sign.icon-status-sign-2-3:before {
    background: url("/Content/themes/novapay/img/newDesign/icon/paymentStatus/icon-status-sign-2-3.svg") no-repeat center;
}

.openBankingDetailsBody .banking-details__linked-payment .linked-payment__status.status-sign-3-3:before, .openBankingDetailsBody .banking-details__linked-payment .linked-payment__status[data-status="91"].icon-status-sign.icon-status-sign-3-3:before {
    background: url("../img/newDesign/icon/paymentStatus/icon-status-sign-3-3.svg") no-repeat center;
}

.debugUrl .openBankingDetailsBody .banking-details__linked-payment .linked-payment__status.status-sign-3-3:before, .debugUrl .openBankingDetailsBody .banking-details__linked-payment .linked-payment__status[data-status="91"].icon-status-sign.icon-status-sign-3-3:before {
    background: url("/Content/themes/novapay/img/newDesign/icon/paymentStatus/icon-status-sign-3-3.svg") no-repeat center;
}

.openBankingDetailsBody .banking-details__linked-payment .linked-payment__status.status-sign-1-4:before, .openBankingDetailsBody .banking-details__linked-payment .linked-payment__status[data-status="91"].icon-status-sign.icon-status-sign-1-4:before {
    background: url("../img/newDesign/icon/status-icon-signature.svg") no-repeat center;
}

.debugUrl .openBankingDetailsBody .banking-details__linked-payment .linked-payment__status.status-sign-1-4:before, .debugUrl .openBankingDetailsBody .banking-details__linked-payment .linked-payment__status[data-status="91"].icon-status-sign.icon-status-sign-1-4:before {
    background: url("/Content/themes/novapay/img/newDesign/icon/status-icon-signature.svg") no-repeat center;
}

.openBankingDetailsBody .banking-details__linked-payment .linked-payment__status.status-sign-2-4:before, .openBankingDetailsBody .banking-details__linked-payment .linked-payment__status[data-status="91"].icon-status-sign.icon-status-sign-2-4:before {
    background: url("../img/newDesign/icon/status-icon-signature.svg") no-repeat center;
}

.debugUrl .openBankingDetailsBody .banking-details__linked-payment .linked-payment__status.status-sign-2-4:before, .debugUrl .openBankingDetailsBody .banking-details__linked-payment .linked-payment__status[data-status="91"].icon-status-sign.icon-status-sign-2-4:before {
    background: url("/Content/themes/novapay/img/newDesign/icon/status-icon-signature.svg") no-repeat center;
}

.openBankingDetailsBody .banking-details__linked-payment .linked-payment__status.status-sign-3-4:before, .openBankingDetailsBody .banking-details__linked-payment .linked-payment__status[data-status="91"].icon-status-sign.icon-status-sign-3-4:before, .openBankingDetailsBody .banking-details__linked-payment .linked-payment__status[data-status="91"].icon-status-sign.icon-status-sign-4-4:before {
    background: url("../img/newDesign/icon/status-icon-signature.svg") no-repeat center;
}

.debugUrl .openBankingDetailsBody .banking-details__linked-payment .linked-payment__status.status-sign-3-4:before, .debugUrl .openBankingDetailsBody .banking-details__linked-payment .linked-payment__status[data-status="91"].icon-status-sign.icon-status-sign-3-4:before, .debugUrl .openBankingDetailsBody .banking-details__linked-payment .linked-payment__status[data-status="91"].icon-status-sign.icon-status-sign-4-4:before {
    background: url("/Content/themes/novapay/img/newDesign/icon/status-icon-signature.svg") no-repeat center;
}

.openBankingDetailsBody .banking-details__linked-payment .linked-payment__status.status-sign-4-4:before {
    background: url("../img/newDesign/icon/status-icon-signature.svg") no-repeat center;
}

.debugUrl .openBankingDetailsBody .banking-details__linked-payment .linked-payment__status.status-sign-4-4:before {
    background: url("/Content/themes/novapay/img/newDesign/icon/status-icon-signature.svg") no-repeat center;
}

.openBankingDetailsBody .banking-details__linked-payment .linked-payment__status.icon-status-sign-1-2:before, .openBankingDetailsBody .banking-details__linked-payment .linked-payment__status.icon-status-sign-1-3:before, .openBankingDetailsBody .banking-details__linked-payment .linked-payment__status.icon-status-sign-1-4:before, .openBankingDetailsBody .banking-details__linked-payment .linked-payment__status.icon-status-sign-2-2:before, .openBankingDetailsBody .banking-details__linked-payment .linked-payment__status.icon-status-sign-2-3:before, .openBankingDetailsBody .banking-details__linked-payment .linked-payment__status.icon-status-sign-2-4:before, .openBankingDetailsBody .banking-details__linked-payment .linked-payment__status.icon-status-sign-3-4:before, .openBankingDetailsBody .banking-details__linked-payment .linked-payment__status.icon-status-sign-4-4:before {
    width: 1rem;
    height: 1rem;
    background-size: 100% !important;
}

.openBankingDetailsBody .banking-details__linked-payment .linked-payment__status span {
    display: block;
    white-space: nowrap;
}

.openBankingDetailsBody .banking-details__linked-payment .linked-payment__status .ico-n {
    margin-right: 4px;
}

.openBankingDetailsBody .banking-details__linked-payment .linked-payment__table {
    margin-top: 8px;
    width: calc(100% + 40px);
    margin-left: -20px;
}

@media (max-width: 768px) {
    .openBankingDetailsBody .banking-details__linked-payment .linked-payment__table {
        display: none;
    }
}

.openBankingDetailsBody .banking-details__linked-payment .linked-payment__table-row {
    padding: 12px 20px;
    height: 78px;
    border-bottom: 1px solid #DBDFE4;
}

.openBankingDetailsBody .banking-details__linked-payment .linked-payment__table-row, .openBankingDetailsBody .banking-details__linked-payment .linked-payment__table-header {
    display: flex;
    gap: 15px;
    width: 100%;
    align-items: center;
}

.openBankingDetailsBody .banking-details__linked-payment .linked-payment__info-title {
    color: #32383c;
    text-overflow: ellipsis;
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: 18px;
}

.openBankingDetailsBody .banking-details__linked-payment .linked-payment__info-iban, .openBankingDetailsBody .banking-details__linked-payment .linked-payment__info-document {
    color: #767F8A;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 16px;
}

.openBankingDetailsBody .banking-details__linked-payment .linked-payment__table-header {
    height: 56px;
    padding: 4px 20px;
    border-bottom: 1px solid #DBDFE4;
    background: #EDEFF1;
}

.openBankingDetailsBody .banking-details__linked-payment .linked-payment__col-number {
    width: 12%;
}

.openBankingDetailsBody .banking-details__linked-payment .linked-payment__col-info {
    width: 25%;
}

.openBankingDetailsBody .banking-details__linked-payment .linked-payment__col-sum {
    width: 12%;
}

.openBankingDetailsBody .banking-details__linked-payment .linked-payment__col-status {
    width: 15%;
}

.openBankingDetailsBody .banking-details__linked-payment .linked-payment__col-purpose {
    width: 25%;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    word-break: break-word;
}

.openBankingDetailsBody .banking-details__linked-payment .linked-payment__mobile-table {
    display: none;
    flex-direction: column;
    gap: 16px;
    margin-top: 24px;
}

@media (max-width: 768px) {
    .openBankingDetailsBody .banking-details__linked-payment .linked-payment__mobile-table {
        display: flex;
    }
}

.openBankingDetailsBody .banking-details__linked-payment .linked-payment__mobile-table-card {
    padding: 16px;
    border: 1px solid #DBDFE4;
    display: flex;
    flex-direction: column;
    gap: 8px;
    border-radius: 16px;
}

.openBankingDetailsBody .banking-details__linked-payment .linked-payment__mobile-table-row {
    display: flex;
    width: 100%;
    border-bottom: 1px solid;
    align-items: center;
    gap: 12px;
    padding-bottom: 8px;
}

    .openBankingDetailsBody .banking-details__linked-payment .linked-payment__mobile-table-row .table-header-name {
        width: 90px;
    }

    .openBankingDetailsBody .banking-details__linked-payment .linked-payment__mobile-table-row .table-body-name {
        width: calc(100% - 90px);
        word-break: break-all;
    }

.openBankingDetailsBody .banking-details__linked-payment .linked-payment__mobile-table-status {
    display: flex;
}

@media (max-width: 768px) {
    .openBankingDetailsBody .banking-details__linked-payment .linked-payment__mobile-table-status {
        margin: auto;
    }
}

.openBankingDetailsBody .banking-details__linked-payment .linked-payment__mobile-table-header {
    min-width: 90px;
}

.openBankingDetailsBody .banking-details__request {
    margin-top: 24px;
    display: flex;
    align-items: center;
    gap: 20px;
    width: 100%;
}

.openBankingDetailsBody .banking-details__request-left, .openBankingDetailsBody .banking-details__request-rigth, .openBankingDetailsBody .banking-details__request-single {
    width: 100%;
    padding: 16px;
    display: flex;
    align-items: center;
    gap: 16px;
    border-radius: 8px;
    border: 1px solid #DBDFE4;
}

@media (max-width: 768px) {
    .openBankingDetailsBody .banking-details__request-left, .openBankingDetailsBody .banking-details__request-rigth, .openBankingDetailsBody .banking-details__request-single {
        gap: 8px;
    }
}

.openBankingDetailsBody .banking-details__request-icon-left, .openBankingDetailsBody .banking-details__request-icon-right, .openBankingDetailsBody .banking-details__request-icon-single {
    width: 36px;
    min-width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .openBankingDetailsBody .banking-details__request-icon-left .ico-n, .openBankingDetailsBody .banking-details__request-icon-right .ico-n, .openBankingDetailsBody .banking-details__request-icon-single .ico-n {
        width: 20px;
        height: 20px;
    }

.openBankingDetailsBody .banking-details__request-single {
    width: 100%;
}

.openBankingDetailsBody .banking-details__request-icon-left {
    background-color: rgba(255, 204, 84, 0.2);
}

    .openBankingDetailsBody .banking-details__request-icon-left i {
        background: #E3AE30;
    }

.openBankingDetailsBody .banking-details__request-icon-right {
    background-color: rgba(93, 161, 234, 0.2);
}

    .openBankingDetailsBody .banking-details__request-icon-right i {
        background: #3C81D3;
    }

.openBankingDetailsBody .banking-details__request-icon-single {
    background-color: #EDEFF1;
}

    .openBankingDetailsBody .banking-details__request-icon-single i {
        background: #767F8A;
    }

.openBankingDetailsBody .banking-details__request-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.openBankingDetailsBody .banking-details__request-subtitle {
    color: #767F8A;
    font-size: 12px;
    font-style: normal;
    font-weight: 500;
    line-height: 16px;
}

.openBankingDetailsBody .banking-details__request-data {
    color: #202427;
    font-size: 15px;
    font-weight: 600;
    line-height: 18px;
}

@media (max-width: 768px) {
    .openBankingDetailsBody .banking-details__request-data {
        font-size: 14px;
        font-weight: 500;
    }
}

.openBankingDetailsBody .banking-details__history {
    margin-top: 24px;
    padding: 24px 0;
    border-top: 1px solid #EDEFF1;
    border-bottom: 1px solid #EDEFF1;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.openBankingDetailsBody .banking-details__history-title {
    margin-bottom: 12px;
}

.openBankingDetailsBody .banking-details__history-row {
    display: flex;
    gap: 16px;
    align-items: flex-start;
}

.openBankingDetailsBody .banking-details__history-row-items {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.openBankingDetailsBody .banking-details__history-row:last-child .banking-details__history-status,
.openBankingDetailsBody .banking-details__history-row:last-child .banking-details__history-system,
.openBankingDetailsBody .banking-details__history-row:last-child .banking-details__history-data {
    color: #32383c;
    font-weight: 500;
}

.openBankingDetailsBody .banking-details__history-data {
    width: 178px;
    min-width: 132px;
    overflow: hidden;
    color: #767F8A;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 18px;
}

.openBankingDetailsBody .banking-details__history-items {
    width: 100%;
    display: flex;
    gap: 12px;
}

.openBankingDetailsBody .banking-details__history-status {
    position: relative;
    width: 35%;
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    color: #767F8A;
}

@media (max-width: 540px) {
    .openBankingDetailsBody .banking-details__history-status {
        width: 100%;
    }
}

.openBankingDetailsBody .banking-details__history-system {
    max-width: 40%;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
}

@media (max-width: 540px) {
    .openBankingDetailsBody .banking-details__history-system {
        display: none;
    }
}

.openBankingDetailsBody .banking-details__history-notify {
    margin-top: 12px;
    border-radius: 8px;
    border: 1px solid #DBDFE4;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.openBankingDetailsBody .banking-details__history-notify-subtitle {
    color: #767F8A;
    text-overflow: ellipsis;
    font-size: 12px;
    font-weight: 400;
    line-height: 16px;
}

.openBankingDetailsBody .banking-details__history-notify-text {
    color: #464B53;
    font-size: 14px;
    font-weight: 400;
    line-height: 18px;
}

.openBankingFooterRight {
    display: flex;
    align-items: center;
    gap: 16px;
}

    .openBankingFooterRight .open-banking__sign .ico-n, .openBankingFooterRight .open-banking__recall .ico-n {
        width: 16px !important;
        height: 16px !important;
    }

.openBanking-action-modal__description {
    margin-bottom: 16px;
}

.vuePopUpCalendar {
    max-width: 820px;
}

    .vuePopUpCalendar .calendar-PopUp {
        display: flex;
    }

        .vuePopUpCalendar .calendar-PopUp .p-inputtext:hover,
        .vuePopUpCalendar .calendar-PopUp .p-inputtext:focus {
            border-color: #DBDFE4;
        }

        .vuePopUpCalendar .calendar-PopUp .p-inputtext {
            border-radius: 0.5rem;
            border: 1px solid #DBDFE4;
            background: #FFF;
            color: #32383c;
            font-family: "Fixel Text", "Fixel Display", "Helvetica", "Arial", sans-serif;
            font-size: 15px;
            line-height: 1.5rem;
        }

            .vuePopUpCalendar .calendar-PopUp .p-inputtext.p-invalid {
                border-color: red;
            }

    .vuePopUpCalendar .calendar-PopUp__header {
        position: relative;
    }

        .vuePopUpCalendar .calendar-PopUp__header::after {
            position: absolute;
            content: "";
            right: -1rem;
            background: #DBDFE4;
            width: calc(32px + 100%);
            height: 1px;
        }

        .vuePopUpCalendar .calendar-PopUp__header .p-selectbutton {
            position: absolute;
            flex-direction: row-reverse;
            top: -9px;
            right: 0;
            gap: 0.25rem;
            padding: 0.25rem;
            border: 1px solid #DBDFE4;
            z-index: 10;
        }

        .vuePopUpCalendar .calendar-PopUp__header .p-togglebutton {
            padding: 0;
            background-color: transparent;
            color: #202427;
            border-radius: 0.25rem;
            box-shadow: none;
            border: none;
        }

            .vuePopUpCalendar .calendar-PopUp__header .p-togglebutton .p-togglebutton-content {
                color: #767F8A;
                font-size: 14px;
                box-shadow: none;
            }

            .vuePopUpCalendar .calendar-PopUp__header .p-togglebutton:not(:disabled):hover, .vuePopUpCalendar .calendar-PopUp__header .p-togglebutton:not(:disabled):active, .vuePopUpCalendar .calendar-PopUp__header .p-togglebutton:not(:disabled).p-togglebutton-checked {
                background-color: #f5edff;
                transition: background-color 0.42s ease-out;
                border: none;
                color: #5E1CAB;
            }

                .vuePopUpCalendar .calendar-PopUp__header .p-togglebutton:not(:disabled):hover .p-togglebutton-content, .vuePopUpCalendar .calendar-PopUp__header .p-togglebutton:not(:disabled):active .p-togglebutton-content, .vuePopUpCalendar .calendar-PopUp__header .p-togglebutton:not(:disabled).p-togglebutton-checked .p-togglebutton-content {
                    background: transparent;
                    box-shadow: none;
                    color: #5E1CAB;
                }

    .vuePopUpCalendar .calendar-PopUp__date-wrap {
        width: 50%;
    }

@media (max-width: 768px) {
    .vuePopUpCalendar .calendar-PopUp__date-wrap {
        width: 100%;
    }
}

.vuePopUpCalendar .calendar-PopUp__calendar-box {
    width: 100%;
}

.vuePopUpCalendar .calendar-PopUp__title {
    margin-bottom: 1rem;
    color: #32383c;
    font-size: 17px;
    font-weight: 600;
    line-height: 1.25rem;
}

.vuePopUpCalendar .calendar-PopUp__left {
    padding: 1rem;
    width: 32.5rem;
    background: #FFF;
    border-radius: 0.5rem 0 0 0.5rem;
}

.vuePopUpCalendar .calendar-PopUp__inputs-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 2rem;
    gap: 1rem;
}

.vuePopUpCalendar .calendar-PopUp__icon {
    position: absolute;
    top: 0.5rem;
    left: 0.75rem;
}

.vuePopUpCalendar .calendar-PopUp__input-wrap {
    position: relative;
    width: 50%;
}

.vuePopUpCalendar .calendar-PopUp__input-data {
    padding: 0.5rem 2.5rem !important;
    width: 100%;
}

.vuePopUpCalendar .calendar-PopUp__input-line {
    display: flex;
    align-items: center;
    width: 0.5rem;
    border-top: 1px solid #DBDFE4;
}

.vuePopUpCalendar .calendar-PopUp__wrap {
    display: flex;
    margin-top: 1rem;
    gap: 2.5rem;
}

.vuePopUpCalendar .calendar-PopUp__wrap-manth {
    margin-top: 2rem;
}

    .vuePopUpCalendar .calendar-PopUp__wrap-manth .p-datepicker-month.p-datepicker-month {
        border-radius: 6.25rem;
    }

    .vuePopUpCalendar .calendar-PopUp__wrap-manth .calendar-PopUp__date-wrap {
        width: 100%;
        padding: 1.25rem;
    }

    .vuePopUpCalendar .calendar-PopUp__wrap-manth .p-datepicker-header {
        justify-content: space-around;
    }

    .vuePopUpCalendar .calendar-PopUp__wrap-manth .p-datepicker-month.p-datepicker-month, .vuePopUpCalendar .calendar-PopUp__wrap-manth .p-datepicker-month.p-datepicker-year,
    .vuePopUpCalendar .calendar-PopUp__wrap-manth .p-datepicker-year.p-datepicker-month,
    .vuePopUpCalendar .calendar-PopUp__wrap-manth .p-datepicker-year.p-datepicker-year, .vuePopUpCalendar .calendar-PopUp__wrap-period .p-datepicker-month.p-datepicker-month, .vuePopUpCalendar .calendar-PopUp__wrap-period .p-datepicker-month.p-datepicker-year,
    .vuePopUpCalendar .calendar-PopUp__wrap-period .p-datepicker-year.p-datepicker-month,
    .vuePopUpCalendar .calendar-PopUp__wrap-period .p-datepicker-year.p-datepicker-year {
        color: #32383c;
    }

        .vuePopUpCalendar .calendar-PopUp__wrap-manth .p-datepicker-month.p-datepicker-month:not(.p-disabled):not(.p-datepicker-month-selected, .p-datepicker-year-selected):hover, .vuePopUpCalendar .calendar-PopUp__wrap-manth .p-datepicker-month.p-datepicker-year:not(.p-disabled):not(.p-datepicker-month-selected, .p-datepicker-year-selected):hover,
        .vuePopUpCalendar .calendar-PopUp__wrap-manth .p-datepicker-year.p-datepicker-month:not(.p-disabled):not(.p-datepicker-month-selected, .p-datepicker-year-selected):hover,
        .vuePopUpCalendar .calendar-PopUp__wrap-manth .p-datepicker-year.p-datepicker-year:not(.p-disabled):not(.p-datepicker-month-selected, .p-datepicker-year-selected):hover, .vuePopUpCalendar .calendar-PopUp__wrap-period .p-datepicker-month.p-datepicker-month:not(.p-disabled):not(.p-datepicker-month-selected, .p-datepicker-year-selected):hover, .vuePopUpCalendar .calendar-PopUp__wrap-period .p-datepicker-month.p-datepicker-year:not(.p-disabled):not(.p-datepicker-month-selected, .p-datepicker-year-selected):hover,
        .vuePopUpCalendar .calendar-PopUp__wrap-period .p-datepicker-year.p-datepicker-month:not(.p-disabled):not(.p-datepicker-month-selected, .p-datepicker-year-selected):hover,
        .vuePopUpCalendar .calendar-PopUp__wrap-period .p-datepicker-year.p-datepicker-year:not(.p-disabled):not(.p-datepicker-month-selected, .p-datepicker-year-selected):hover {
            background: #E1CFF6;
            color: #32383c;
        }

    .vuePopUpCalendar .calendar-PopUp__wrap-manth .p-datepicker-month.p-datepicker-month-selected, .vuePopUpCalendar .calendar-PopUp__wrap-manth .p-datepicker-month.p-datepicker-year-selected,
    .vuePopUpCalendar .calendar-PopUp__wrap-manth .p-datepicker-year.p-datepicker-month-selected,
    .vuePopUpCalendar .calendar-PopUp__wrap-manth .p-datepicker-year.p-datepicker-year-selected, .vuePopUpCalendar .calendar-PopUp__wrap-period .p-datepicker-month.p-datepicker-month-selected, .vuePopUpCalendar .calendar-PopUp__wrap-period .p-datepicker-month.p-datepicker-year-selected,
    .vuePopUpCalendar .calendar-PopUp__wrap-period .p-datepicker-year.p-datepicker-month-selected,
    .vuePopUpCalendar .calendar-PopUp__wrap-period .p-datepicker-year.p-datepicker-year-selected {
        background: #E1CFF6;
    }

.vuePopUpCalendar .calendar-PopUp__wrap-period .p-datepicker-month.p-datepicker-month, .vuePopUpCalendar .calendar-PopUp__wrap-period .p-datepicker-month.p-datepicker-year,
.vuePopUpCalendar .calendar-PopUp__wrap-period .p-datepicker-year.p-datepicker-month,
.vuePopUpCalendar .calendar-PopUp__wrap-period .p-datepicker-year.p-datepicker-year {
    border-radius: 0.5rem;
}

.vuePopUpCalendar .calendar-PopUp__wrap-period .p-datepicker-month:not(.p-disabled):not(.p-datepicker-month-selected, .p-datepicker-year-selected):hover,
.vuePopUpCalendar .calendar-PopUp__wrap-period .p-datepicker-year:not(.p-disabled):not(.p-datepicker-month-selected, .p-datepicker-year-selected):hover {
    border-radius: 0.5rem;
}

.vuePopUpCalendar .calendar-PopUp .p-datepicker-panel-inline {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    height: 285px;
    padding: 0;
    border: none;
}

.vuePopUpCalendar .calendar-PopUp .p-datepicker-header {
    position: relative;
}

.vuePopUpCalendar .calendar-PopUp .p-datepicker-month-view, .vuePopUpCalendar .calendar-PopUp .p-datepicker-year-view {
    flex: 1;
    height: 100%;
    display: grid;
    gap: 0.25rem;
}

.vuePopUpCalendar .calendar-PopUp .p-datepicker-year-view {
    grid-template-columns: 1fr 1fr;
}

.vuePopUpCalendar .calendar-PopUp .p-datepicker-year, .vuePopUpCalendar .calendar-PopUp .p-datepicker-month {
    width: 100%;
}

    .vuePopUpCalendar .calendar-PopUp .p-datepicker-year.p-disabled, .vuePopUpCalendar .calendar-PopUp .p-datepicker-month.p-disabled {
        opacity: 0.5;
    }

.vuePopUpCalendar .calendar-PopUp .p-datepicker-month-view {
    grid-template-columns: 1fr 1fr 1fr;
}

.vuePopUpCalendar .calendar-PopUp .p-datepicker-day {
    padding: 0;
    border: none;
    border-radius: 0;
    background: transparent;
    color: #32383c;
}

    .vuePopUpCalendar .calendar-PopUp .p-datepicker-day:not(.p-datepicker-day-selected):not(.p-disabled):hover {
        background: none;
    }

    .vuePopUpCalendar .calendar-PopUp .p-datepicker-day.p-disabled {
        opacity: 0.6;
    }

.vuePopUpCalendar .calendar-PopUp .p-datepicker-other-month {
    opacity: 0;
}

.vuePopUpCalendar .calendar-PopUp .p-datepicker-day-view {
    width: 100%;
    align-items: center;
}

    .vuePopUpCalendar .calendar-PopUp .p-datepicker-day-view td {
        width: 2rem;
        height: 2rem;
        padding: 2px 0;
        font-size: 14px !important;
        text-align: center;
        line-height: 1.75rem;
    }

        .vuePopUpCalendar .calendar-PopUp .p-datepicker-day-view td .p-disabled {
            color: #767F8A;
        }

    .vuePopUpCalendar .calendar-PopUp .p-datepicker-day-view thead th {
        padding: 9px 8px 7px 8px;
        color: #767F8A;
        text-align: center;
        font-size: 12px;
        line-height: 1rem;
    }

.vuePopUpCalendar .calendar-PopUp .p-datepicker-title {
    height: 2.25rem;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #32383c;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.125rem;
    gap: 5px;
}

.vuePopUpCalendar .calendar-PopUp .p-datepicker-select-month, .vuePopUpCalendar .calendar-PopUp .p-datepicker-select-year {
    color: #32383c;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.125rem;
}

.vuePopUpCalendar .calendar-PopUp .p-datepicker-next-button {
    padding-right: 0.5rem;
}

.vuePopUpCalendar .calendar-PopUp .p-datepicker-prev-button {
    padding-left: 0.5rem;
}

.vuePopUpCalendar .calendar-PopUp__right {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    position: relative;
    padding: 1.5rem 1rem 4.25rem;
    max-width: 18.75rem;
    width: 100%;
    border-left: 1px solid #DBDFE4;
    background: #f4f6f7;
    border-radius: 0 0.5rem 0.5rem 0;
}

.vuePopUpCalendar .calendar-PopUp__right-title {
    color: #32383c;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.125rem;
}

.vuePopUpCalendar .calendar-PopUp__right .p-selectbutton {
    display: flex !important;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.vuePopUpCalendar .calendar-PopUp__right-checkbox-wrap {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

    .vuePopUpCalendar .calendar-PopUp__right-checkbox-wrap .icon-info-new {
        background-color: #A56EE5 !important;
    }

    .vuePopUpCalendar .calendar-PopUp__right-checkbox-wrap .is-disabled, .vuePopUpCalendar .calendar-PopUp__right-checkbox-wrap .p-disabled {
        opacity: 0.5;
        pointer-events: none;
    }

.vuePopUpCalendar .calendar-PopUp__right .p-togglebutton {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 2px;
    border-radius: 1.5rem !important;
    border: 1px solid #DBDFE4;
    background: #f4f6f7;
    padding: 7px 10px;
    color: #32383c;
    font-size: 12px;
    font-weight: 500;
    line-height: 1rem;
    cursor: pointer;
}

    .vuePopUpCalendar .calendar-PopUp__right .p-togglebutton:hover, .vuePopUpCalendar .calendar-PopUp__right .p-togglebutton-checked, .vuePopUpCalendar .calendar-PopUp__right .p-togglebutton:active {
        background: #32383c;
        color: #FFF;
    }

@media (max-width: 768px) {
    .vuePopUpCalendar .calendar-PopUp__right .p-togglebutton {
        gap: 0.25rem;
        flex: 1 1 48%;
        padding: 0.625rem;
        font-size: 14px;
    }
}

.vuePopUpCalendar .calendar-PopUp .p-checkbox .p-checkbox-box {
    width: 1.125rem;
    height: 1.125rem;
    border-radius: 0.25rem;
    background: #fff;
    border: 1px solid #DBDFE4 !important;
}

.vuePopUpCalendar .calendar-PopUp .p-checkbox.p-checkbox-checked .p-checkbox-box {
    border: 1px solid #690DD3 !important;
    background: #690DD3 !important;
}

.vuePopUpCalendar .calendar-PopUp .p-checkbox .p-checkbox-icon {
    stroke: white;
    stroke-width: 1.1px;
    stroke-linejoin: round;
    padding: 1px;
}

.vuePopUpCalendar .calendar-PopUp__label {
    color: #32383c;
    font-size: 14px;
    line-height: 1.125rem;
}

.vuePopUpCalendar .calendar-PopUp__actions {
    display: flex;
    gap: 0.5rem;
}

.vuePopUpCalendar .calendar-PopUp__actions-wrap {
    display: flex;
    gap: 0.5rem;
    width: 100%;
}

.vuePopUpCalendar .calendar-PopUp__actions-top {
    flex-wrap: wrap;
}

.vuePopUpCalendar .calendar-PopUp__actions-bottom {
    position: absolute;
    bottom: 1.5rem;
    right: 1rem;
}

.vuePopUpCalendar .calendar-PopUp__actions .active {
    background: #32383c;
    color: #FFF;
}

.vuePopUpCalendar .calendar-PopUp__save {
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0.5rem 0.75rem;
    transition: background-color 0.22s ease-out;
    box-shadow: none;
    color: #FFF;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.125rem;
    border-radius: 0.5rem;
    border: none;
    background-color: #690DD3;
    color: #FFF;
}

    .vuePopUpCalendar .calendar-PopUp__save:hover {
        background-color: #5E1CAB;
        transition: background-color 0.42s ease-out;
        color: #FFF !important;
    }

    .vuePopUpCalendar .calendar-PopUp__save:active {
        background-color: #5E1CAB;
        transition: background-color 0.42s ease-out;
        color: #FFF !important;
    }

    .vuePopUpCalendar .calendar-PopUp__save__disabled, .vuePopUpCalendar .calendar-PopUp__save:disabled {
        pointer-events: none;
        cursor: not-allowed;
        opacity: 0.5;
    }

.vuePopUpCalendar .calendar-PopUp__cansel {
    cursor: pointer;
    width: 6.125rem;
    height: 2.125rem;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0.5rem 0.75rem;
    border: none;
    color: #690DD3;
    border-radius: 0.5rem;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.125rem;
    background: none;
}

    .vuePopUpCalendar .calendar-PopUp__cansel:hover {
        background-color: #f5edff;
        transition: background-color 0.42s ease-out;
        border-color: #8222f1;
        border: 1px solid;
    }

    .vuePopUpCalendar .calendar-PopUp__cansel:active {
        background-color: #f5edff;
        transition: background-color 0.42s ease-out;
        border-color: #8222f1;
        border: 1px solid;
    }

.vuePopUpCalendar .vue-selected-range {
    background: #E1CFF6 !important;
    border-radius: 0;
    color: #32383c;
}

    .vuePopUpCalendar .vue-selected-range.vue-range-start {
        border-top-left-radius: 3.125rem;
        border-bottom-left-radius: 3.125rem;
    }

    .vuePopUpCalendar .vue-selected-range.vue-range-end {
        border-top-right-radius: 3.125rem;
        border-bottom-right-radius: 3.125rem;
    }

.popup-calendarWitoutpanel {
    max-width: 32.5rem;
    height: auto;
}

    .popup-calendarWitoutpanel .actions-block-without-panelBtn {
        display: flex;
        align-items: end;
        justify-content: end;
        border-top: 1px solid #DBDFE4;
        position: relative;
        height: 3.125rem;
    }

    .popup-calendarWitoutpanel .calendar-PopUp__actions {
        position: initial;
    }

    .popup-calendarWitoutpanel .calendar-PopUp__right {
        width: 0;
        padding: 0;
        display: none;
    }

    .popup-calendarWitoutpanel .calendar-PopUp__left {
        border-radius: 0.5rem;
    }

@media (max-width: 850px) {
    .vuePopUpCalendar .calendar-PopUp {
        width: 100%;
        max-width: 32.5rem;
        flex-direction: column;
    }

    .vuePopUpCalendar .calendar-PopUp__left {
        border-radius: 0.5rem 0.5rem 0 0;
        width: 100%;
        max-width: 100%;
    }

    .vuePopUpCalendar .calendar-PopUp__right {
        width: 100%;
        max-width: 100%;
        border-radius: 0 0 0.5rem 0.5rem;
        padding: 1.5rem 1rem 4.375rem;
    }

    .popup-calendarWitoutpanel .calendar-PopUp__left {
        border-radius: 0.5rem;
    }
}

@media (max-width: 550px) {
    .vuePopUpCalendar {
        width: calc(100% - 32px);
        max-height: 86%;
        overflow: auto;
    }

        .vuePopUpCalendar .calendar-PopUp .p-datepicker-day-view td {
            width: -webkit-fill-available;
        }

        .vuePopUpCalendar .calendar-PopUp__inputs-container {
            gap: 0.5rem;
        }

        .vuePopUpCalendar .calendar-PopUp__input-data {
            padding: 0.5rem 0 0.5rem 2.5rem !important;
        }

        .vuePopUpCalendar .calendar-PopUp__wrap {
            flex-direction: column;
            gap: 2.188rem;
            height: 18.438rem;
            overflow-y: scroll;
        }

        .vuePopUpCalendar .calendar-PopUp__calendar-box {
            width: 100%;
        }
}

.vue-tooltip .p-tooltip-text {
    padding: 6px 8px;
    color: #FFF;
    text-align: center;
    font-size: 11px;
    max-width: 15rem;
    line-height: 0.75rem;
    border-radius: 0.25rem;
    background: #202427;
}

.vue-tooltip.p-tooltip-right .p-tooltip-arrow {
    border-width: 6px 6px 6px 0;
    border-color: transparent #1f1f1f transparent transparent;
}

.vue-tooltip.p-tooltip-left .p-tooltip-arrow {
    border-width: 6px 0 6px 6px;
    border-color: transparent transparent transparent #1f1f1f;
}

.vue-tooltip.p-tooltip-top .p-tooltip-arrow {
    border-width: 6px 6px 0 6px;
    border-color: #1f1f1f transparent transparent transparent;
}

.vue-tooltip.p-tooltip-bottom .p-tooltip-arrow {
    border-width: 0 6px 6px 6px;
    border-color: transparent transparent #1f1f1f transparent;
}

.p-select-list-container {
    border-radius: 0.5rem;
    border: 1px solid #DBDFE4;
    box-shadow: 0 1.5rem 2.75rem 0 rgba(98, 98, 100, 0.3);
    background: white;
}

.p-select-option {
    padding: 0.75rem !important;
    background: #fff;
    display: flex;
    flex-direction: column;
    align-items: self-start !important;
    white-space: normal !important;
}

    .p-select-option:hover, .p-select-option:focus, .p-select-option .p-focus {
        background: #f4f6f7 !important;
    }

.p-select-option-selected {
    background: #f4f6f7 !important;
    color: #32383c !important;
}

.vue__dropdown-title {
    color: #767F8A;
    font-size: 12px;
    font-weight: 500;
    line-height: 1rem;
    margin-bottom: 0.5rem;
}

.vue__dropdown-wrap.custom-select {
    min-width: 8.125rem;
}

.vue__dropdown-block .p-select.p-focus,
.vue__dropdown-block .p-select:focus,
.vue__dropdown-block .p-select:hover,
.vue__dropdown-block .p-select:focus-visible {
    border-color: #ced4da !important;
    box-shadow: none !important;
    outline: none !important;
    --p-select-focus-ring-color: transparent !important;
    --p-select-focus-ring-width: 0 !important;
    --p-select-focus-ring-style: none !important;
    --p-select-focus-ring-shadow: none !important;
}

.vue__dropdown-block .vue-dropdown-wrapper {
    height: 2.5rem;
}

    .vue__dropdown-block .vue-dropdown-wrapper .p-select.p-disabled .p-select-label,
    .vue__dropdown-block .vue-dropdown-wrapper .p-multiselect.p-disabled .p-select-label {
        color: #767F8A;
    }

    .vue__dropdown-block .vue-dropdown-wrapper .p-select.p-select-open .icon-arrow:before, .vue__dropdown-block .vue-dropdown-wrapper .p-select.p-multiselect-open .icon-arrow:before,
    .vue__dropdown-block .vue-dropdown-wrapper .p-multiselect.p-select-open .icon-arrow:before,
    .vue__dropdown-block .vue-dropdown-wrapper .p-multiselect.p-multiselect-open .icon-arrow:before {
        transform: rotate(0deg);
    }

    .vue__dropdown-block .vue-dropdown-wrapper .p-disabled .p-select-dropdown {
        display: none;
    }

    .vue__dropdown-block .vue-dropdown-wrapper .error-text {
        padding-top: 3px;
        display: block;
        color: #EB4235;
        font-family: "Fixel Text", "Fixel Display", "Helvetica", "Arial", sans-serif;
        font-size: 12px;
        font-style: normal;
        font-weight: 400;
        line-height: 1rem;
    }

    .vue__dropdown-block .vue-dropdown-wrapper .p-select-empty-message,
    .vue__dropdown-block .vue-dropdown-wrapper .p-multiselect-empty-message {
        padding: 0.75rem;
        color: #32383c;
        font-family: "Fixel Text", "Fixel Display", "Helvetica", "Arial", sans-serif;
        font-size: 14px;
        font-style: normal;
        font-weight: 15px;
        line-height: 1.125rem;
        margin: auto;
    }

    .vue__dropdown-block .vue-dropdown-wrapper .p-select-header,
    .vue__dropdown-block .vue-dropdown-wrapper .p-multiselect-header {
        padding: 0.5rem 0.75rem;
        border-bottom: 1px solid #DBDFE4;
        background: #fff;
        border-top-left-radius: 0.5rem;
        border-top-right-radius: 0.5rem;
    }

        .vue__dropdown-block .vue-dropdown-wrapper .p-select-header .p-inputtext,
        .vue__dropdown-block .vue-dropdown-wrapper .p-multiselect-header .p-inputtext {
            padding: 0.5rem 0.75rem 0.5rem 2.75rem;
            height: 2.5rem;
            border-radius: 0.5rem;
            border: 1px solid #DBDFE4;
            background: #fff;
            overflow: hidden;
            color: #32383c;
            font-size: 15px;
            font-style: normal;
            font-weight: 400;
            line-height: 1.5rem;
        }

            .vue__dropdown-block .vue-dropdown-wrapper .p-select-header .p-inputtext::placeholder,
            .vue__dropdown-block .vue-dropdown-wrapper .p-multiselect-header .p-inputtext::placeholder {
                color: #767F8A;
            }

        .vue__dropdown-block .vue-dropdown-wrapper .p-select-header .p-inputicon,
        .vue__dropdown-block .vue-dropdown-wrapper .p-multiselect-header .p-inputicon {
            position: absolute;
            left: 0.75rem;
        }

            .vue__dropdown-block .vue-dropdown-wrapper .p-select-header .p-inputicon .ico-n,
            .vue__dropdown-block .vue-dropdown-wrapper .p-multiselect-header .p-inputicon .ico-n {
                position: absolute;
                top: -0.25rem;
            }

    .vue__dropdown-block .vue-dropdown-wrapper .p-select,
    .vue__dropdown-block .vue-dropdown-wrapper .p-multiselect {
        display: flex;
        align-items: center;
        height: 100%;
        width: 100%;
        padding: 0.5rem 0.75rem;
        border-radius: 0.5rem;
        border: 1px solid #DBDFE4;
        background: #fff;
    }

    .vue__dropdown-block .vue-dropdown-wrapper .p-select-overlay,
    .vue__dropdown-block .vue-dropdown-wrapper .p-multiselect-overlay {
        width: -webkit-fill-available;
        border-radius: 0.5rem;
        border: 1px solid #DBDFE4;
        box-shadow: 0 1.5rem 2.75rem 0 rgba(98, 98, 100, 0.3);
        display: flex;
        flex-direction: column;
    }

    .vue__dropdown-block .vue-dropdown-wrapper .p-select .p-select-list-container,
    .vue__dropdown-block .vue-dropdown-wrapper .p-multiselect .p-select-list-container {
        padding-bottom: 8px;
    }

    .vue__dropdown-block .vue-dropdown-wrapper .p-select-dropdown,
    .vue__dropdown-block .vue-dropdown-wrapper .p-multiselect-dropdown {
        width: 1.5rem;
    }

    .vue__dropdown-block .vue-dropdown-wrapper .p-select-option-group .p-multiselect-impotent-text,
    .vue__dropdown-block .vue-dropdown-wrapper .p-multiselect-option-group .p-multiselect-impotent-text {
        height: 12.5px;
    }

    .vue__dropdown-block .vue-dropdown-wrapper .p-select-option-group .p-multiselect-impotent-wrapp,
    .vue__dropdown-block .vue-dropdown-wrapper .p-multiselect-option-group .p-multiselect-impotent-wrapp {
        padding: 8px 12px;
        justify-content: center;
        align-items: center;
        gap: 4px;
        width: calc(100% - 24px);
        font-size: 12px;
        margin: 12px 12px 4px;
        background: #FFF;
        border-radius: 8px;
        border: 1px solid #DBDFE4;
        display: none;
    }

    .vue__dropdown-block .vue-dropdown-wrapper .p-select-option-group:first-child .p-multiselect-currency,
    .vue__dropdown-block .vue-dropdown-wrapper .p-multiselect-option-group:first-child .p-multiselect-currency {
        border-top: none;
    }

    .vue__dropdown-block .vue-dropdown-wrapper .p-select-option-group:first-child .p-multiselect-impotent-wrapp,
    .vue__dropdown-block .vue-dropdown-wrapper .p-multiselect-option-group:first-child .p-multiselect-impotent-wrapp {
        display: flex;
    }

    .vue__dropdown-block .vue-dropdown-wrapper .p-select-option-group,
    .vue__dropdown-block .vue-dropdown-wrapper .p-multiselect-option-group {
        background: #FFF;
    }

    .vue__dropdown-block .vue-dropdown-wrapper .p-select-currency,
    .vue__dropdown-block .vue-dropdown-wrapper .p-multiselect-currency {
        padding-top: 12px;
        border-top: solid 1px #DBDFE4;
        margin: 0 12px;
    }

        .vue__dropdown-block .vue-dropdown-wrapper .p-select-currency p,
        .vue__dropdown-block .vue-dropdown-wrapper .p-multiselect-currency p {
            border-radius: 4px;
            margin: 4px 0px;
            color: #32383c;
            font-size: 14px;
            font-weight: 500;
            line-height: 18px;
            padding: 4px 8px;
            background: #f4f6f7;
            max-width: fit-content;
        }

    .vue__dropdown-block .vue-dropdown-wrapper .p-select-list,
    .vue__dropdown-block .vue-dropdown-wrapper .p-multiselect-list {
        padding: 0 !important;
        gap: 0 !important;
        position: relative;
    }

    .vue__dropdown-block .vue-dropdown-wrapper .p-select .p-focus,
    .vue__dropdown-block .vue-dropdown-wrapper .p-multiselect .p-focus {
        background: #f4f6f7 !important;
    }

    .vue__dropdown-block .vue-dropdown-wrapper .p-select-option,
    .vue__dropdown-block .vue-dropdown-wrapper .p-multiselect-option {
        padding: 0.75rem;
        background: #fff;
        display: flex;
        flex-direction: column;
        align-items: self-start;
        white-space: normal !important;
    }

        .vue__dropdown-block .vue-dropdown-wrapper .p-select-option:hover, .vue__dropdown-block .vue-dropdown-wrapper .p-select-option:focus, .vue__dropdown-block .vue-dropdown-wrapper .p-select-option .p-focus,
        .vue__dropdown-block .vue-dropdown-wrapper .p-multiselect-option:hover,
        .vue__dropdown-block .vue-dropdown-wrapper .p-multiselect-option:focus,
        .vue__dropdown-block .vue-dropdown-wrapper .p-multiselect-option .p-focus {
            background: #f4f6f7 !important;
        }

    .vue__dropdown-block .vue-dropdown-wrapper .p-select-option-selected,
    .vue__dropdown-block .vue-dropdown-wrapper .p-multiselect-option-selected {
        background: #f4f6f7 !important;
    }

    .vue__dropdown-block .vue-dropdown-wrapper .p-select:not(.p-disabled):hover,
    .vue__dropdown-block .vue-dropdown-wrapper .p-multiselect:not(.p-disabled):hover {
        border-color: #DBDFE4;
    }

    .vue__dropdown-block .vue-dropdown-wrapper .p-multiselect-option, .vue__dropdown-block .vue-dropdown-wrapper .p-multiselect-header, .vue__dropdown-block .vue-dropdown-wrapper .vue-dropdown-select-all {
        flex-direction: row;
        align-items: center;
        gap: 0.5rem;
    }

        .vue__dropdown-block .vue-dropdown-wrapper .p-multiselect-option .p-checkbox, .vue__dropdown-block .vue-dropdown-wrapper .p-multiselect-header .p-checkbox, .vue__dropdown-block .vue-dropdown-wrapper .vue-dropdown-select-all .p-checkbox {
            height: 19px;
            width: 19px;
            margin-left: 0;
        }

            .vue__dropdown-block .vue-dropdown-wrapper .p-multiselect-option .p-checkbox .p-checkbox-input, .vue__dropdown-block .vue-dropdown-wrapper .p-multiselect-header .p-checkbox .p-checkbox-input, .vue__dropdown-block .vue-dropdown-wrapper .vue-dropdown-select-all .p-checkbox .p-checkbox-input {
                border-color: #DBDFE4;
                background: #fff;
            }

            .vue__dropdown-block .vue-dropdown-wrapper .p-multiselect-option .p-checkbox.p-checkbox-checked .p-checkbox-box, .vue__dropdown-block .vue-dropdown-wrapper .p-multiselect-header .p-checkbox.p-checkbox-checked .p-checkbox-box, .vue__dropdown-block .vue-dropdown-wrapper .vue-dropdown-select-all .p-checkbox.p-checkbox-checked .p-checkbox-box {
                border-radius: 0.25rem;
                border: 1px solid #690DD3;
                background: #690DD3;
                padding: 1px;
            }

        .vue__dropdown-block .vue-dropdown-wrapper .p-multiselect-option .p-checkbox-box .p-checkbox-icon, .vue__dropdown-block .vue-dropdown-wrapper .p-multiselect-header .p-checkbox-box .p-checkbox-icon, .vue__dropdown-block .vue-dropdown-wrapper .vue-dropdown-select-all .p-checkbox-box .p-checkbox-icon {
            stroke: white;
            stroke-width: 1.1px;
            stroke-linejoin: round;
            padding: 1px;
            width: 14px;
            height: 14px;
        }

        .vue__dropdown-block .vue-dropdown-wrapper .p-multiselect-option .p-checkbox-box, .vue__dropdown-block .vue-dropdown-wrapper .p-multiselect-header .p-checkbox-box, .vue__dropdown-block .vue-dropdown-wrapper .vue-dropdown-select-all .p-checkbox-box {
            height: 100%;
            width: 100%;
            border: 1px solid #DBDFE4;
            background: #fff;
            border-radius: 0.25rem;
        }

            .vue__dropdown-block .vue-dropdown-wrapper .p-multiselect-option .p-checkbox-box:hover, .vue__dropdown-block .vue-dropdown-wrapper .p-multiselect-header .p-checkbox-box:hover, .vue__dropdown-block .vue-dropdown-wrapper .vue-dropdown-select-all .p-checkbox-box:hover {
                border-color: #690DD3;
                background: #fff;
            }

    .vue__dropdown-block .vue-dropdown-wrapper .vue-dropdown__list__list-content {
        display: flex;
        flex-wrap: wrap;
    }

    .vue__dropdown-block .vue-dropdown-wrapper .vue-dropdown__list-title {
        overflow: hidden;
        color: #32383c;
        font-size: 14px;
        font-weight: 500;
        line-height: 1.125rem;
        word-wrap: break-word;
    }

    .vue__dropdown-block .vue-dropdown-wrapper .vue-dropdown__list-subtitle {
        color: #767F8A;
        word-wrap: break-word;
        font-size: 12px;
        line-height: 1rem;
    }

    .vue__dropdown-block .vue-dropdown-wrapper .p-select-label {
        overflow: hidden;
        text-overflow: ellipsis;
        display: flex;
        width: 100%;
        padding: 0;
        color: #32383c;
        font-size: 15px;
        font-style: normal;
        line-height: 1.5rem;
    }

.vue__dropdown-block .icon-arrow {
    position: absolute;
    right: 0.75rem;
    top: 50%;
    height: 1rem;
    width: 1rem;
    opacity: 1;
    transform: translateY(-50%);
}

    .vue__dropdown-block .icon-arrow:before {
        content: "";
        position: relative;
        display: block;
        height: 1rem;
        width: 1rem;
        transform: rotate(180deg);
        transition: transform 0.32s ease-out;
        background: url("../img/newDesign/icon/icon-small-up.svg") no-repeat center;
    }

.debugUrl .vue__dropdown-block .icon-arrow:before {
    background: url("/Content/themes/novapay/img/newDesign/icon/icon-small-up.svg") no-repeat center;
}

.vue__dropdown-block .p-multiselect .p-multiselect-label-empty {
    visibility: visible;
}

.vue__editor-dropdown-menu {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0.5rem;
    background: #fff;
    border-radius: 0.25rem;
    border: 1px solid #DBDFE4;
    box-shadow: 0 1.5rem 2.75rem 0 rgba(98, 98, 100, 0.3);
    z-index: 9999;
}

    .vue__editor-dropdown-menu .btn-editor-dropdown {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 0.5rem;
        white-space: nowrap;
        min-width: 9.125rem;
        padding: 0.5rem;
        border-radius: 0.25rem;
        background-color: #fff;
        border: none;
        color: #767F8A;
        cursor: pointer;
        font-weight: 500;
        text-align: left;
        font-size: 14px;
    }

@media (max-width: 992px) {
    .vue__editor-dropdown-menu .btn-editor-dropdown {
        flex: 1 1 auto;
    }
}

.vue__editor-dropdown-menu .btn-editor-dropdown:hover {
    background-color: #f4f6f7;
    transition: background-color 0.42s ease-out;
    color: #32383c;
}

.vue__editor-dropdown-menu .btn-editor-dropdown .ico-n {
    height: 1.5rem;
    width: 1.5rem;
}

.vue__editor-dropdown-menu .btn-editor-dropdown[data-action=edit]:hover, .vue__editor-dropdown-menu .btn-editor-dropdown[data-action=sign]:hover, .vue__editor-dropdown-menu .btn-editor-dropdown[data-action=view]:hover {
    background-color: #f5edff;
    color: #5E1CAB;
}

.vue__editor-dropdown-menu .btn-editor-dropdown[data-action=delete], .vue__editor-dropdown-menu .btn-editor-dropdown[data-action=decline], .vue__editor-dropdown-menu .btn-editor-dropdown[data-action=reject], .vue__editor-dropdown-menu .btn-editor-dropdown[data-action=recall] {
    color: #EB4235;
}

    .vue__editor-dropdown-menu .btn-editor-dropdown[data-action=delete] .ico-n, .vue__editor-dropdown-menu .btn-editor-dropdown[data-action=decline] .ico-n, .vue__editor-dropdown-menu .btn-editor-dropdown[data-action=reject] .ico-n, .vue__editor-dropdown-menu .btn-editor-dropdown[data-action=recall] .ico-n {
        background-color: #EB4235;
    }

    .vue__editor-dropdown-menu .btn-editor-dropdown[data-action=delete]:hover, .vue__editor-dropdown-menu .btn-editor-dropdown[data-action=decline]:hover, .vue__editor-dropdown-menu .btn-editor-dropdown[data-action=reject]:hover, .vue__editor-dropdown-menu .btn-editor-dropdown[data-action=recall]:hover {
        background-color: #FFEBEA;
    }

.vue-btn-wrap-dropdown {
    padding: 0 !important;
    outline: none;
    border: none;
}

.vue__dropdown-button {
    width: 100%;
}

    .vue__dropdown-button .p-select,
    .vue__dropdown-button .p-multiselect {
        width: 100% !important;
    }

.vue__dropdown-wrap:has(.p-select-header) .p-select-list-container {
    border-radius: 0;
    border-top: none;
    border-bottom-left-radius: 0.5rem;
    border-bottom-right-radius: 0.5rem;
}

.vue__dropdown-wrap:has(.vue__dropdown-button) .p-select {
    padding: 0.5rem 1rem;
    border: none;
    background-color: #690DD3;
    color: #FFF;
    transition: background-color 0.22s ease-out;
    box-shadow: none;
}

    .vue__dropdown-wrap:has(.vue__dropdown-button) .p-select:hover, .vue__dropdown-wrap:has(.vue__dropdown-button) .p-select:active {
        background-color: #5E1CAB;
        transition: background-color 0.42s ease-out;
        color: #FFF !important;
    }

.vue__dropdown-wrap:has(.vue__dropdown-button) .p-select-label {
    display: flex;
    gap: 5px;
    color: #FFF;
    font-weight: 600;
}

    .vue__dropdown-wrap:has(.vue__dropdown-button) .p-select-label:hover, .vue__dropdown-wrap:has(.vue__dropdown-button) .p-select-label:active {
        color: #FFF !important;
    }

.vue__dropdown-wrap:has(.vue__dropdown-button) .p-select-dropdown,
.vue__dropdown-wrap:has(.vue__dropdown-button) .p-multiselect-dropdown {
    display: none;
}

.vue__dropdown-wrap:has(.vue__dropdown-button) .p-select.p-select-open .icon-arrow-down,
.vue__dropdown-wrap:has(.vue__dropdown-button) .p-multiselect.p-select-open .icon-arrow-down {
    transform: rotate(180deg);
    transition: transform 0.2s ease-in-out;
}

.vue__dropdown-wrap:has(.vue__dropdown-button) .icon-arrow-down {
    height: 1.438rem;
    width: 1.438rem;
    transform: rotate(0deg);
    transition: transform 0.2s ease-in-out;
}

.vue-dropdown-panel .p-select-list-container::-webkit-scrollbar {
    width: 0.5rem;
}

.vue-dropdown-panel .p-select-list-container::-webkit-scrollbar-thumb {
    background: #A8ADB4 !important;
    border-radius: 0.625rem !important;
}

.vue-dropdown-panel .p-select-list-container::-webkit-scrollbar-track {
    background: transparent;
}

.vue__dropdown-wrap.disabled {
    pointer-events: none !important;
    opacity: 0.5 !important;
}

.p-multiselect:not(.p-disabled).p-focus {
    border: 1px solid #DBDFE4;
}

.vue__dropdown-wrap:has(.p-multiselect-header) .p-multiselect-list-container {
    order: 2;
}

.vue__dropdown-wrap:has(.p-multiselect-header) .p-multiselect-header .p-checkbox {
    display: none;
}

.vue__dropdown-wrap:has(.p-multiselect-header) .vue-dropdown-select-all {
    order: 1;
    background: white;
    padding: 13px 12px;
    display: flex;
    align-items: center;
}

    .vue__dropdown-wrap:has(.p-multiselect-header) .vue-dropdown-select-all label {
        cursor: pointer;
        margin: 0;
        font-size: 14px;
        user-select: none;
    }

.vue-dropdown-wrapper:has(.p-multiselect-header) .p-multiselect-header .p-checkbox {
    display: none;
}

.vue-dropdown-wrapper:has(.p-multiselect-header) .p-multiselect-header .icon-search__new {
    top: -12px !important;
}

.drawer-header {
    width: 100%;
}

.p-drawer-mask {
    background-color: rgba(0, 0, 0, 0.5) !important;
}

.p-drawer {
    max-width: 59.5rem;
    width: 100% !important;
    background: #fff !important;
    border-inline-start-width: 0 !important;
}

@media (max-width: 1623px) {
    .p-drawer {
        width: 100% !important;
        max-width: 48.688rem;
    }
}

@media (max-width: 768px) {
    .p-drawer {
        min-width: 22rem;
        width: 50% !important;
    }
}

@media (max-width: 576px) {
    .p-drawer {
        width: 22.5rem;
    }
}

.p-drawer-header {
    padding: 1.25rem 1.5rem 1rem !important;
    color: #464B53;
    font-family: "Fixel Text", "Fixel Display", "Helvetica", "Arial", sans-serif;
    border-bottom: 1px solid #DBDFE4;
}

    .p-drawer-header .drawer-header__title {
        color: #464B53;
        font-size: 1.5rem;
        font-weight: 600;
        line-height: 1.75rem;
    }

@media (max-width: 768px) {
    .p-drawer-header .drawer-header__title {
        font-size: 1.25rem;
    }
}

@media (max-width: 992px) {
    .p-drawer-header {
        padding: 1.25rem 1rem 1rem;
    }
}

.p-drawer-header .p-drawer-close-button {
    all: inherit;
    position: absolute;
    right: 1.25rem;
    top: 1.25rem;
    outline: none !important;
    cursor: pointer !important;
    border-radius: 0.5rem !important;
    background: #F1F2F4 !important;
    display: flex;
    width: 2rem !important;
    height: 2rem !important;
    padding: 0.375rem !important;
    justify-content: center;
    align-items: center;
    stroke-width: 0.2px !important;
    stroke: #767F8A;
}

    .p-drawer-header .p-drawer-close-button:hover, .p-drawer-header .p-drawer-close-button :active, .p-drawer-header .p-drawer-close-button :focus, .p-drawer-header .p-drawer-close-button :focus-visible {
        outline: none !important;
        stroke-width: 0.2px !important;
        width: 2rem !important;
        height: 2rem !important;
        justify-content: center;
        align-items: center;
    }

    .p-drawer-header .p-drawer-close-button svg {
        width: 1rem !important;
        height: 1rem !important;
    }

        .p-drawer-header .p-drawer-close-button svg:hover, .p-drawer-header .p-drawer-close-button svg :active, .p-drawer-header .p-drawer-close-button svg :focus, .p-drawer-header .p-drawer-close-button svg :focus-visible {
            width: 1rem !important;
            height: 1rem !important;
            margin-bottom: 1px;
        }

.p-drawer-content {
    scrollbar-width: thin;
    scrollbar-color: rgba(168, 173, 180, 0.5);
}

    .p-drawer-content::-webkit-scrollbar-track {
        background: rgba(168, 173, 180, 0.5);
        border-radius: 0.25rem;
    }

    .p-drawer-content::-webkit-scrollbar-thumb {
        background: rgba(168, 173, 180, 0.5);
        border-radius: 0.25rem;
    }

        .p-drawer-content::-webkit-scrollbar-thumb:hover {
            background: rgba(168, 173, 180, 0.5);
        }

    .p-drawer-content:has(.drawer-loader-overlay) {
        overflow: hidden;
    }

.p-drawer .drawer-footer__right {
    display: flex;
    gap: 0.75rem;
}

@media (max-width: 768px) {
    .p-drawer .drawer-footer__right-custom {
        flex-direction: column;
    }
}

.p-drawer .drawer-footer .btn {
    max-height: 2.5rem;
    gap: 0.5rem;
}

    .p-drawer .drawer-footer .btn .ico-n {
        width: 1.25rem;
        height: 1.25rem;
    }

@media (max-width: 768px) {
    .p-drawer .drawer-footer .btn {
        width: auto;
    }
}

.p-drawer .drawer-footer .btn.sign-btn .icon-arrow-down {
    height: 1.438rem;
    width: 1.438rem;
    transform: rotate(180deg);
    transition: transform 0.2s ease;
}

.p-drawer .drawer-footer .btn.sign-btn--open .icon-arrow-down {
    transform: rotate(0deg);
}

.p-drawer .drawer-footer__left .btn-cancel {
    padding: 0.625rem;
}

.p-drawer .drawer-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.25rem;
    border-top: 1px solid #DBDFE4;
    height: 4.5rem;
}

@media (max-width: 768px) {
    .p-drawer .drawer-footer {
        height: initial;
        align-items: end;
    }

    .p-drawer .drawer-footer__btn-text-cansel {
        display: none;
    }
}

.drawer-loader-overlay {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 100;
    border-radius: inherit;
    transform: translateY(-50%);
    height: 100%;
}

    .drawer-loader-overlay .loader-spinner {
        width: 3.125rem;
        height: 3.125rem;
        background: url("../img/newDesign/spinner-loading.png") no-repeat center;
        background-size: contain;
        animation: rotate 1s linear infinite;
    }

.debugUrl .drawer-loader-overlay .loader-spinner {
    background: url("/Content/themes/novapay/img/newDesign/spinner-loading.png") no-repeat center;
}

@keyframes rotate {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

.datatable-title-row {
    display: flex;
}

    .datatable-title-row .payslip-employees-header__title {
        display: block;
        padding-bottom: 1.25rem;
        font-size: 16px;
        font-weight: 500;
        line-height: 1.25rem;
        color: #464B53;
    }

.grid-actions-dropdown {
    position: fixed;
    max-height: 20rem;
    padding: 0.5rem;
    background: #fff;
    border-radius: 0.5rem;
    border: 1px solid #DBDFE4;
    box-shadow: 0 1.5rem 2.75rem 0 rgba(98, 98, 100, 0.3);
    z-index: 9999;
    font-family: "Fixel Text", "Fixel Display", "Helvetica", "Arial", sans-serif !important;
}

.grid-actions-actions-list {
    display: flex;
    flex-direction: column;
}

.grid-actions-actions-list__item {
    padding: 0;
    min-height: auto;
}

    .grid-actions-actions-list__item:hover {
        background: #fff;
    }

    .grid-actions-actions-list__item .btn-actions {
        position: relative;
        padding-left: 2.5rem;
        gap: 0;
        min-height: 2.25rem;
        border: none;
        border-radius: 0.25rem;
        background-color: #fff;
        font-size: 12px;
        font-weight: 500;
        text-align: left;
        color: #767F8A;
        transition: background-color 0.42s ease-out, color 0.42s ease-out;
    }

        .grid-actions-actions-list__item .btn-actions:hover {
            background-color: #f5edff;
            color: #5E1CAB;
            cursor: pointer;
        }

        .grid-actions-actions-list__item .btn-actions .ico-n {
            position: absolute;
            left: 0.5rem;
            top: 50%;
            transform: translateY(-50%);
        }

        .grid-actions-actions-list__item .btn-actions.actions-negative {
            background-color: #fff;
            color: #EB4235;
        }

            .grid-actions-actions-list__item .btn-actions.actions-negative:hover {
                background-color: #FFEEE2;
                color: #DE4420;
            }

        .grid-actions-actions-list__item .btn-actions.actions-positive:hover {
            background-color: #E1F8F2;
            color: #22967F;
        }

    .grid-actions-actions-list__item .icon-edit-payment {
        width: 17px;
        height: 17px;
    }

.vue_paySlipGrid .p-datatable, .vue_employeeListGrid .p-datatable, .vue_ob-infoGrid .p-datatable, .vue_ob-paymentsGrid .p-datatable {
    padding: 0;
}

    .vue_paySlipGrid .p-datatable.skeleton-active:before, .vue_employeeListGrid .p-datatable.skeleton-active:before, .vue_ob-infoGrid .p-datatable.skeleton-active:before, .vue_ob-paymentsGrid .p-datatable.skeleton-active:before {
        right: 0;
        left: 0;
    }

.vue_paySlipGrid .p-datatable-table, .vue_employeeListGrid .p-datatable-table, .vue_ob-infoGrid .p-datatable-table, .vue_ob-paymentsGrid .p-datatable-table {
    position: relative;
}

@media (max-width: 1200px) {
    .vue_paySlipGrid .p-datatable-table, .vue_employeeListGrid .p-datatable-table, .vue_ob-infoGrid .p-datatable-table, .vue_ob-paymentsGrid .p-datatable-table {
        min-width: auto;
    }
}

.vue_paySlipGrid .p-datatable-table-container, .vue_employeeListGrid .p-datatable-table-container, .vue_ob-infoGrid .p-datatable-table-container, .vue_ob-paymentsGrid .p-datatable-table-container {
    min-height: 21.875rem !important;
    border-top-left-radius: 0.5rem;
    border-top-right-radius: 0.5rem;
    border: 1px solid #DBDFE4;
    border-bottom: none;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: rgba(168, 173, 180, 0.5);
}

    .vue_paySlipGrid .p-datatable-table-container::-webkit-scrollbar-track, .vue_employeeListGrid .p-datatable-table-container::-webkit-scrollbar-track, .vue_ob-infoGrid .p-datatable-table-container::-webkit-scrollbar-track, .vue_ob-paymentsGrid .p-datatable-table-container::-webkit-scrollbar-track {
        background: rgba(168, 173, 180, 0.5);
        border-radius: 0.25rem;
    }

    .vue_paySlipGrid .p-datatable-table-container::-webkit-scrollbar-thumb, .vue_employeeListGrid .p-datatable-table-container::-webkit-scrollbar-thumb, .vue_ob-infoGrid .p-datatable-table-container::-webkit-scrollbar-thumb, .vue_ob-paymentsGrid .p-datatable-table-container::-webkit-scrollbar-thumb {
        background: rgba(168, 173, 180, 0.5);
        border-radius: 0.25rem;
    }

        .vue_paySlipGrid .p-datatable-table-container::-webkit-scrollbar-thumb:hover, .vue_employeeListGrid .p-datatable-table-container::-webkit-scrollbar-thumb:hover, .vue_ob-infoGrid .p-datatable-table-container::-webkit-scrollbar-thumb:hover, .vue_ob-paymentsGrid .p-datatable-table-container::-webkit-scrollbar-thumb:hover {
            background: rgba(168, 173, 180, 0.5);
        }

@media (max-width: 1200px) {
    .vue_paySlipGrid .p-datatable-table-container, .vue_employeeListGrid .p-datatable-table-container, .vue_ob-infoGrid .p-datatable-table-container, .vue_ob-paymentsGrid .p-datatable-table-container {
        width: 100%;
        max-width: 100%;
        flex-direction: row;
        flex-wrap: wrap;
        gap: 1rem;
        overflow-x: hidden;
        scrollbar-width: none;
    }

        .vue_paySlipGrid .p-datatable-table-container::-webkit-scrollbar, .vue_employeeListGrid .p-datatable-table-container::-webkit-scrollbar, .vue_ob-infoGrid .p-datatable-table-container::-webkit-scrollbar, .vue_ob-paymentsGrid .p-datatable-table-container::-webkit-scrollbar {
            display: none;
        }
}

@media (max-width: 1200px) {
    .vue_paySlipGrid .p-datatable, .vue_employeeListGrid .p-datatable, .vue_ob-infoGrid .p-datatable, .vue_ob-paymentsGrid .p-datatable {
        padding: 0 0.75rem;
    }
}

.vue_paySlipGrid .p-datatable-thead, .vue_employeeListGrid .p-datatable-thead, .vue_ob-infoGrid .p-datatable-thead, .vue_ob-paymentsGrid .p-datatable-thead {
    position: sticky !important;
    top: 0;
    z-index: 100;
    background-color: #fff;
}

    .vue_paySlipGrid .p-datatable-thead.is-fixed, .vue_employeeListGrid .p-datatable-thead.is-fixed, .vue_ob-infoGrid .p-datatable-thead.is-fixed, .vue_ob-paymentsGrid .p-datatable-thead.is-fixed {
        position: fixed !important;
        top: 0;
        left: 0;
        z-index: 1000;
        display: table;
    }

        .vue_paySlipGrid .p-datatable-thead.is-fixed th, .vue_employeeListGrid .p-datatable-thead.is-fixed th, .vue_ob-infoGrid .p-datatable-thead.is-fixed th, .vue_ob-paymentsGrid .p-datatable-thead.is-fixed th {
            display: table-cell !important;
            vertical-align: middle;
        }

            .vue_paySlipGrid .p-datatable-thead.is-fixed th:first-child, .vue_employeeListGrid .p-datatable-thead.is-fixed th:first-child, .vue_ob-infoGrid .p-datatable-thead.is-fixed th:first-child, .vue_ob-paymentsGrid .p-datatable-thead.is-fixed th:first-child {
                width: 4rem;
            }

            .vue_paySlipGrid .p-datatable-thead.is-fixed th.col-Code, .vue_employeeListGrid .p-datatable-thead.is-fixed th.col-Code, .vue_ob-infoGrid .p-datatable-thead.is-fixed th.col-Code, .vue_ob-paymentsGrid .p-datatable-thead.is-fixed th.col-Code {
                width: 7.5rem;
            }

            .vue_paySlipGrid .p-datatable-thead.is-fixed th.col-Created, .vue_employeeListGrid .p-datatable-thead.is-fixed th.col-Created, .vue_ob-infoGrid .p-datatable-thead.is-fixed th.col-Created, .vue_ob-paymentsGrid .p-datatable-thead.is-fixed th.col-Created {
                width: 11rem;
            }

    .vue_paySlipGrid .p-datatable-thead th, .vue_employeeListGrid .p-datatable-thead th, .vue_ob-infoGrid .p-datatable-thead th, .vue_ob-paymentsGrid .p-datatable-thead th {
        position: sticky;
        top: 0;
        height: 2.5rem;
        vertical-align: middle;
        background-color: #EDEFF1;
    }

        .vue_paySlipGrid .p-datatable-thead th .p-datatable-column-title, .vue_employeeListGrid .p-datatable-thead th .p-datatable-column-title, .vue_ob-infoGrid .p-datatable-thead th .p-datatable-column-title, .vue_ob-paymentsGrid .p-datatable-thead th .p-datatable-column-title {
            cursor: pointer;
            font-size: 12px;
            font-weight: 500;
            color: #767F8A;
            white-space: nowrap;
        }

    .vue_paySlipGrid .p-datatable-thead .p-checkbox, .vue_employeeListGrid .p-datatable-thead .p-checkbox, .vue_ob-infoGrid .p-datatable-thead .p-checkbox, .vue_ob-paymentsGrid .p-datatable-thead .p-checkbox {
        margin-left: 0.75rem;
    }

    .vue_paySlipGrid .p-datatable-thead .p-datatable-sort-icon, .vue_employeeListGrid .p-datatable-thead .p-datatable-sort-icon, .vue_ob-infoGrid .p-datatable-thead .p-datatable-sort-icon, .vue_ob-paymentsGrid .p-datatable-thead .p-datatable-sort-icon {
        display: none;
    }

    .vue_paySlipGrid .p-datatable-thead .p-datatable-sortable-column .p-datatable-column-header-content [data-pc-section=sort], .vue_employeeListGrid .p-datatable-thead .p-datatable-sortable-column .p-datatable-column-header-content [data-pc-section=sort], .vue_ob-infoGrid .p-datatable-thead .p-datatable-sortable-column .p-datatable-column-header-content [data-pc-section=sort], .vue_ob-paymentsGrid .p-datatable-thead .p-datatable-sortable-column .p-datatable-column-header-content [data-pc-section=sort] {
        position: relative;
        display: block;
        height: 1.5rem;
        width: 1.5rem;
        padding: 0;
        cursor: pointer;
    }

        .vue_paySlipGrid .p-datatable-thead .p-datatable-sortable-column .p-datatable-column-header-content [data-pc-section=sort]::after, .vue_employeeListGrid .p-datatable-thead .p-datatable-sortable-column .p-datatable-column-header-content [data-pc-section=sort]::after, .vue_ob-infoGrid .p-datatable-thead .p-datatable-sortable-column .p-datatable-column-header-content [data-pc-section=sort]::after, .vue_ob-paymentsGrid .p-datatable-thead .p-datatable-sortable-column .p-datatable-column-header-content [data-pc-section=sort]::after {
            content: "";
            position: absolute;
            top: 50%;
            left: 50%;
            width: 100%;
            height: 100%;
            transition: 0.3s ease-in-out;
            transform: translate(-50%, -50%) rotate(-45deg);
            background-color: #767F8A !important;
            display: inline-block;
            width: 17px;
            height: 17px;
            background-color: currentColor;
            background-image: none;
            mask-image: url("../img/sprite.svg#icon-double-arrow");
        }

.debugUrl .vue_paySlipGrid .p-datatable-thead .p-datatable-sortable-column .p-datatable-column-header-content [data-pc-section=sort]::after, .debugUrl .vue_employeeListGrid .p-datatable-thead .p-datatable-sortable-column .p-datatable-column-header-content [data-pc-section=sort]::after, .debugUrl .vue_ob-infoGrid .p-datatable-thead .p-datatable-sortable-column .p-datatable-column-header-content [data-pc-section=sort]::after, .debugUrl .vue_ob-paymentsGrid .p-datatable-thead .p-datatable-sortable-column .p-datatable-column-header-content [data-pc-section=sort]::after {
    mask-image: url("/Content/themes/novapay/img/sprite.svg#icon-double-arrow");
}

.vue_paySlipGrid .p-datatable-thead .p-datatable-sortable-column .p-datatable-column-header-content [data-pc-section=sort]::after, .vue_employeeListGrid .p-datatable-thead .p-datatable-sortable-column .p-datatable-column-header-content [data-pc-section=sort]::after, .vue_ob-infoGrid .p-datatable-thead .p-datatable-sortable-column .p-datatable-column-header-content [data-pc-section=sort]::after, .vue_ob-paymentsGrid .p-datatable-thead .p-datatable-sortable-column .p-datatable-column-header-content [data-pc-section=sort]::after {
    mask-repeat: no-repeat;
    mask-size: contain;
}

.vue_paySlipGrid .p-datatable-thead .p-datatable-sortable-column[aria-sort=ascending] .p-datatable-column-header-content [data-pc-section=sort], .vue_paySlipGrid .p-datatable-thead .p-datatable-sortable-column[aria-sort=descending] .p-datatable-column-header-content [data-pc-section=sort], .vue_employeeListGrid .p-datatable-thead .p-datatable-sortable-column[aria-sort=ascending] .p-datatable-column-header-content [data-pc-section=sort], .vue_employeeListGrid .p-datatable-thead .p-datatable-sortable-column[aria-sort=descending] .p-datatable-column-header-content [data-pc-section=sort], .vue_ob-infoGrid .p-datatable-thead .p-datatable-sortable-column[aria-sort=ascending] .p-datatable-column-header-content [data-pc-section=sort], .vue_ob-infoGrid .p-datatable-thead .p-datatable-sortable-column[aria-sort=descending] .p-datatable-column-header-content [data-pc-section=sort], .vue_ob-paymentsGrid .p-datatable-thead .p-datatable-sortable-column[aria-sort=ascending] .p-datatable-column-header-content [data-pc-section=sort], .vue_ob-paymentsGrid .p-datatable-thead .p-datatable-sortable-column[aria-sort=descending] .p-datatable-column-header-content [data-pc-section=sort] {
    border-radius: 6px;
    border: 1px solid #C39EED;
    background: #E1CFF6;
}

    .vue_paySlipGrid .p-datatable-thead .p-datatable-sortable-column[aria-sort=ascending] .p-datatable-column-header-content [data-pc-section=sort]:after, .vue_paySlipGrid .p-datatable-thead .p-datatable-sortable-column[aria-sort=descending] .p-datatable-column-header-content [data-pc-section=sort]:after, .vue_employeeListGrid .p-datatable-thead .p-datatable-sortable-column[aria-sort=ascending] .p-datatable-column-header-content [data-pc-section=sort]:after, .vue_employeeListGrid .p-datatable-thead .p-datatable-sortable-column[aria-sort=descending] .p-datatable-column-header-content [data-pc-section=sort]:after, .vue_ob-infoGrid .p-datatable-thead .p-datatable-sortable-column[aria-sort=ascending] .p-datatable-column-header-content [data-pc-section=sort]:after, .vue_ob-infoGrid .p-datatable-thead .p-datatable-sortable-column[aria-sort=descending] .p-datatable-column-header-content [data-pc-section=sort]:after, .vue_ob-paymentsGrid .p-datatable-thead .p-datatable-sortable-column[aria-sort=ascending] .p-datatable-column-header-content [data-pc-section=sort]:after, .vue_ob-paymentsGrid .p-datatable-thead .p-datatable-sortable-column[aria-sort=descending] .p-datatable-column-header-content [data-pc-section=sort]:after {
        background-color: #690DD3 !important;
    }

    .vue_paySlipGrid .p-datatable-thead .p-datatable-sortable-column[aria-sort=ascending] .p-datatable-column-header-content [data-pc-section=sort]::after, .vue_employeeListGrid .p-datatable-thead .p-datatable-sortable-column[aria-sort=ascending] .p-datatable-column-header-content [data-pc-section=sort]::after, .vue_ob-infoGrid .p-datatable-thead .p-datatable-sortable-column[aria-sort=ascending] .p-datatable-column-header-content [data-pc-section=sort]::after, .vue_ob-paymentsGrid .p-datatable-thead .p-datatable-sortable-column[aria-sort=ascending] .p-datatable-column-header-content [data-pc-section=sort]::after {
        transform: translate(-50%, -50%) rotate(0deg);
        display: inline-block;
        width: 17px;
        height: 17px;
        background-color: currentColor;
        background-image: none;
        mask-image: url("../img/sprite.svg#icon-arrow-sort");
    }

.debugUrl .vue_paySlipGrid .p-datatable-thead .p-datatable-sortable-column[aria-sort=ascending] .p-datatable-column-header-content [data-pc-section=sort]::after, .debugUrl .vue_employeeListGrid .p-datatable-thead .p-datatable-sortable-column[aria-sort=ascending] .p-datatable-column-header-content [data-pc-section=sort]::after, .debugUrl .vue_ob-infoGrid .p-datatable-thead .p-datatable-sortable-column[aria-sort=ascending] .p-datatable-column-header-content [data-pc-section=sort]::after, .debugUrl .vue_ob-paymentsGrid .p-datatable-thead .p-datatable-sortable-column[aria-sort=ascending] .p-datatable-column-header-content [data-pc-section=sort]::after {
    mask-image: url("/Content/themes/novapay/img/sprite.svg#icon-arrow-sort");
}

.vue_paySlipGrid .p-datatable-thead .p-datatable-sortable-column[aria-sort=ascending] .p-datatable-column-header-content [data-pc-section=sort]::after, .vue_employeeListGrid .p-datatable-thead .p-datatable-sortable-column[aria-sort=ascending] .p-datatable-column-header-content [data-pc-section=sort]::after, .vue_ob-infoGrid .p-datatable-thead .p-datatable-sortable-column[aria-sort=ascending] .p-datatable-column-header-content [data-pc-section=sort]::after, .vue_ob-paymentsGrid .p-datatable-thead .p-datatable-sortable-column[aria-sort=ascending] .p-datatable-column-header-content [data-pc-section=sort]::after {
    mask-repeat: no-repeat;
    mask-size: contain;
}

.vue_paySlipGrid .p-datatable-thead .p-datatable-sortable-column[aria-sort=descending] .p-datatable-column-header-content [data-pc-section=sort]::after, .vue_employeeListGrid .p-datatable-thead .p-datatable-sortable-column[aria-sort=descending] .p-datatable-column-header-content [data-pc-section=sort]::after, .vue_ob-infoGrid .p-datatable-thead .p-datatable-sortable-column[aria-sort=descending] .p-datatable-column-header-content [data-pc-section=sort]::after, .vue_ob-paymentsGrid .p-datatable-thead .p-datatable-sortable-column[aria-sort=descending] .p-datatable-column-header-content [data-pc-section=sort]::after {
    transform: translate(-50%, -50%) rotate(180deg);
    display: inline-block;
    width: 17px;
    height: 17px;
    background-color: currentColor;
    background-image: none;
    mask-image: url("../img/sprite.svg#icon-arrow-sort");
}

.debugUrl .vue_paySlipGrid .p-datatable-thead .p-datatable-sortable-column[aria-sort=descending] .p-datatable-column-header-content [data-pc-section=sort]::after, .debugUrl .vue_employeeListGrid .p-datatable-thead .p-datatable-sortable-column[aria-sort=descending] .p-datatable-column-header-content [data-pc-section=sort]::after, .debugUrl .vue_ob-infoGrid .p-datatable-thead .p-datatable-sortable-column[aria-sort=descending] .p-datatable-column-header-content [data-pc-section=sort]::after, .debugUrl .vue_ob-paymentsGrid .p-datatable-thead .p-datatable-sortable-column[aria-sort=descending] .p-datatable-column-header-content [data-pc-section=sort]::after {
    mask-image: url("/Content/themes/novapay/img/sprite.svg#icon-arrow-sort");
}

.vue_paySlipGrid .p-datatable-thead .p-datatable-sortable-column[aria-sort=descending] .p-datatable-column-header-content [data-pc-section=sort]::after, .vue_employeeListGrid .p-datatable-thead .p-datatable-sortable-column[aria-sort=descending] .p-datatable-column-header-content [data-pc-section=sort]::after, .vue_ob-infoGrid .p-datatable-thead .p-datatable-sortable-column[aria-sort=descending] .p-datatable-column-header-content [data-pc-section=sort]::after, .vue_ob-paymentsGrid .p-datatable-thead .p-datatable-sortable-column[aria-sort=descending] .p-datatable-column-header-content [data-pc-section=sort]::after {
    mask-repeat: no-repeat;
    mask-size: contain;
}

.vue_paySlipGrid .p-datatable-thead .p-datatable-sortable-column.col-StatusLight .icon-search, .vue_employeeListGrid .p-datatable-thead .p-datatable-sortable-column.col-StatusLight .icon-search, .vue_ob-infoGrid .p-datatable-thead .p-datatable-sortable-column.col-StatusLight .icon-search, .vue_ob-paymentsGrid .p-datatable-thead .p-datatable-sortable-column.col-StatusLight .icon-search {
    display: inline-block;
    width: 14px;
    height: 14px;
    background-color: currentColor;
    background-image: none;
    mask-image: url("../img/sprite.svg#icon-sort-status");
}

.debugUrl .vue_paySlipGrid .p-datatable-thead .p-datatable-sortable-column.col-StatusLight .icon-search, .debugUrl .vue_employeeListGrid .p-datatable-thead .p-datatable-sortable-column.col-StatusLight .icon-search, .debugUrl .vue_ob-infoGrid .p-datatable-thead .p-datatable-sortable-column.col-StatusLight .icon-search, .debugUrl .vue_ob-paymentsGrid .p-datatable-thead .p-datatable-sortable-column.col-StatusLight .icon-search {
    mask-image: url("/Content/themes/novapay/img/sprite.svg#icon-sort-status");
}

.vue_paySlipGrid .p-datatable-thead .p-datatable-sortable-column.col-StatusLight .icon-search, .vue_employeeListGrid .p-datatable-thead .p-datatable-sortable-column.col-StatusLight .icon-search, .vue_ob-infoGrid .p-datatable-thead .p-datatable-sortable-column.col-StatusLight .icon-search, .vue_ob-paymentsGrid .p-datatable-thead .p-datatable-sortable-column.col-StatusLight .icon-search {
    mask-repeat: no-repeat;
    mask-size: contain;
}

@media (max-width: 1500px) {
    .vue_paySlipGrid .p-datatable-thead .p-datatable-sortable-column.custom-dropdown-open, .vue_employeeListGrid .p-datatable-thead .p-datatable-sortable-column.custom-dropdown-open, .vue_ob-infoGrid .p-datatable-thead .p-datatable-sortable-column.custom-dropdown-open, .vue_ob-paymentsGrid .p-datatable-thead .p-datatable-sortable-column.custom-dropdown-open {
        position: relative;
        padding: 0 0.75rem;
    }

        .vue_paySlipGrid .p-datatable-thead .p-datatable-sortable-column.custom-dropdown-open .p-datatable-column-header-content, .vue_employeeListGrid .p-datatable-thead .p-datatable-sortable-column.custom-dropdown-open .p-datatable-column-header-content, .vue_ob-infoGrid .p-datatable-thead .p-datatable-sortable-column.custom-dropdown-open .p-datatable-column-header-content, .vue_ob-paymentsGrid .p-datatable-thead .p-datatable-sortable-column.custom-dropdown-open .p-datatable-column-header-content {
            width: fit-content;
            padding: 0.25rem 0.5rem;
            border: 1px solid #A8ADB4;
            border-radius: 6px;
            background-color: #DBDFE4;
        }
}

.vue_paySlipGrid .p-datatable-thead .p-datatable-popover-filter, .vue_employeeListGrid .p-datatable-thead .p-datatable-popover-filter, .vue_ob-infoGrid .p-datatable-thead .p-datatable-popover-filter, .vue_ob-paymentsGrid .p-datatable-thead .p-datatable-popover-filter {
    margin: 0;
}

.vue_paySlipGrid .p-datatable-thead .p-datatable-column-filter-button, .vue_employeeListGrid .p-datatable-thead .p-datatable-column-filter-button, .vue_ob-infoGrid .p-datatable-thead .p-datatable-column-filter-button, .vue_ob-paymentsGrid .p-datatable-thead .p-datatable-column-filter-button {
    position: relative;
    height: 1.5rem;
    width: 1.5rem;
    padding: 0;
    display: block;
    cursor: pointer;
    border-radius: 0.5rem;
}

    .vue_paySlipGrid .p-datatable-thead .p-datatable-column-filter-button:after, .vue_employeeListGrid .p-datatable-thead .p-datatable-column-filter-button:after, .vue_ob-infoGrid .p-datatable-thead .p-datatable-column-filter-button:after, .vue_ob-paymentsGrid .p-datatable-thead .p-datatable-column-filter-button:after {
        display: none;
    }

    .vue_paySlipGrid .p-datatable-thead .p-datatable-column-filter-button .p-icon, .vue_employeeListGrid .p-datatable-thead .p-datatable-column-filter-button .p-icon, .vue_ob-infoGrid .p-datatable-thead .p-datatable-column-filter-button .p-icon, .vue_ob-paymentsGrid .p-datatable-thead .p-datatable-column-filter-button .p-icon {
        display: none;
    }

    .vue_paySlipGrid .p-datatable-thead .p-datatable-column-filter-button .icon-search, .vue_employeeListGrid .p-datatable-thead .p-datatable-column-filter-button .icon-search, .vue_ob-infoGrid .p-datatable-thead .p-datatable-column-filter-button .icon-search, .vue_ob-paymentsGrid .p-datatable-thead .p-datatable-column-filter-button .icon-search {
        background-color: #767F8A;
        display: inline-block;
        width: 16px;
        height: 16px;
        background-color: currentColor;
        background-image: none;
        mask-image: url("../img/sprite.svg#icon-search");
    }

.debugUrl .vue_paySlipGrid .p-datatable-thead .p-datatable-column-filter-button .icon-search, .debugUrl .vue_employeeListGrid .p-datatable-thead .p-datatable-column-filter-button .icon-search, .debugUrl .vue_ob-infoGrid .p-datatable-thead .p-datatable-column-filter-button .icon-search, .debugUrl .vue_ob-paymentsGrid .p-datatable-thead .p-datatable-column-filter-button .icon-search {
    mask-image: url("/Content/themes/novapay/img/sprite.svg#icon-search");
}

.vue_paySlipGrid .p-datatable-thead .p-datatable-column-filter-button .icon-search, .vue_employeeListGrid .p-datatable-thead .p-datatable-column-filter-button .icon-search, .vue_ob-infoGrid .p-datatable-thead .p-datatable-column-filter-button .icon-search, .vue_ob-paymentsGrid .p-datatable-thead .p-datatable-column-filter-button .icon-search {
    mask-repeat: no-repeat;
    mask-size: contain;
}

.vue_paySlipGrid .p-datatable-thead .p-datatable-column-filter-button:hover .icon-search, .vue_employeeListGrid .p-datatable-thead .p-datatable-column-filter-button:hover .icon-search, .vue_ob-infoGrid .p-datatable-thead .p-datatable-column-filter-button:hover .icon-search, .vue_ob-paymentsGrid .p-datatable-thead .p-datatable-column-filter-button:hover .icon-search {
    background-color: #690DD3;
}

.vue_paySlipGrid .p-datatable-thead .p-datatable-column-filter-button[aria-expanded=true], .vue_employeeListGrid .p-datatable-thead .p-datatable-column-filter-button[aria-expanded=true], .vue_ob-infoGrid .p-datatable-thead .p-datatable-column-filter-button[aria-expanded=true], .vue_ob-paymentsGrid .p-datatable-thead .p-datatable-column-filter-button[aria-expanded=true] {
    border-radius: 6px;
    border: 1px solid #C39EED;
    background: #F5EDFF;
}

    .vue_paySlipGrid .p-datatable-thead .p-datatable-column-filter-button[aria-expanded=true] .icon-search, .vue_employeeListGrid .p-datatable-thead .p-datatable-column-filter-button[aria-expanded=true] .icon-search, .vue_ob-infoGrid .p-datatable-thead .p-datatable-column-filter-button[aria-expanded=true] .icon-search, .vue_ob-paymentsGrid .p-datatable-thead .p-datatable-column-filter-button[aria-expanded=true] .icon-search {
        background-color: #690DD3;
    }

    .vue_paySlipGrid .p-datatable-thead .p-datatable-column-filter-button[aria-expanded=true]:hover, .vue_employeeListGrid .p-datatable-thead .p-datatable-column-filter-button[aria-expanded=true]:hover, .vue_ob-infoGrid .p-datatable-thead .p-datatable-column-filter-button[aria-expanded=true]:hover, .vue_ob-paymentsGrid .p-datatable-thead .p-datatable-column-filter-button[aria-expanded=true]:hover {
        border-radius: 6px;
        border: 1px solid #C39EED;
        background: #F5EDFF;
    }

        .vue_paySlipGrid .p-datatable-thead .p-datatable-column-filter-button[aria-expanded=true]:hover .icon-search, .vue_employeeListGrid .p-datatable-thead .p-datatable-column-filter-button[aria-expanded=true]:hover .icon-search, .vue_ob-infoGrid .p-datatable-thead .p-datatable-column-filter-button[aria-expanded=true]:hover .icon-search, .vue_ob-paymentsGrid .p-datatable-thead .p-datatable-column-filter-button[aria-expanded=true]:hover .icon-search {
            background-color: #690DD3;
        }

.vue_paySlipGrid .p-datatable-thead .p-datatable-column-filter-button:has(.icon-search.icon-search-active), .vue_employeeListGrid .p-datatable-thead .p-datatable-column-filter-button:has(.icon-search.icon-search-active), .vue_ob-infoGrid .p-datatable-thead .p-datatable-column-filter-button:has(.icon-search.icon-search-active), .vue_ob-paymentsGrid .p-datatable-thead .p-datatable-column-filter-button:has(.icon-search.icon-search-active) {
    border-radius: 6px;
    border: 1px solid #C39EED;
    background: #E1CFF6;
}

    .vue_paySlipGrid .p-datatable-thead .p-datatable-column-filter-button:has(.icon-search.icon-search-active) .icon-search, .vue_employeeListGrid .p-datatable-thead .p-datatable-column-filter-button:has(.icon-search.icon-search-active) .icon-search, .vue_ob-infoGrid .p-datatable-thead .p-datatable-column-filter-button:has(.icon-search.icon-search-active) .icon-search, .vue_ob-paymentsGrid .p-datatable-thead .p-datatable-column-filter-button:has(.icon-search.icon-search-active) .icon-search {
        background-color: #690DD3;
    }

@media (max-width: 1200px) {
    .vue_paySlipGrid .p-datatable-thead, .vue_employeeListGrid .p-datatable-thead, .vue_ob-infoGrid .p-datatable-thead, .vue_ob-paymentsGrid .p-datatable-thead {
        display: none !important;
    }
}

.vue_paySlipGrid .p-datatable-thead > tr > td, .vue_paySlipGrid .p-datatable-thead th,
.vue_paySlipGrid .p-datatable-tbody > tr > td,
.vue_paySlipGrid .p-datatable-tbody th, .vue_employeeListGrid .p-datatable-thead > tr > td, .vue_employeeListGrid .p-datatable-thead th,
.vue_employeeListGrid .p-datatable-tbody > tr > td,
.vue_employeeListGrid .p-datatable-tbody th, .vue_ob-infoGrid .p-datatable-thead > tr > td, .vue_ob-infoGrid .p-datatable-thead th,
.vue_ob-infoGrid .p-datatable-tbody > tr > td,
.vue_ob-infoGrid .p-datatable-tbody th, .vue_ob-paymentsGrid .p-datatable-thead > tr > td, .vue_ob-paymentsGrid .p-datatable-thead th,
.vue_ob-paymentsGrid .p-datatable-tbody > tr > td,
.vue_ob-paymentsGrid .p-datatable-tbody th {
    padding: 0.5rem;
}

    .vue_paySlipGrid .p-datatable-thead > tr > td:first-child, .vue_paySlipGrid .p-datatable-thead th:first-child,
    .vue_paySlipGrid .p-datatable-tbody > tr > td:first-child,
    .vue_paySlipGrid .p-datatable-tbody th:first-child, .vue_employeeListGrid .p-datatable-thead > tr > td:first-child, .vue_employeeListGrid .p-datatable-thead th:first-child,
    .vue_employeeListGrid .p-datatable-tbody > tr > td:first-child,
    .vue_employeeListGrid .p-datatable-tbody th:first-child, .vue_ob-infoGrid .p-datatable-thead > tr > td:first-child, .vue_ob-infoGrid .p-datatable-thead th:first-child,
    .vue_ob-infoGrid .p-datatable-tbody > tr > td:first-child,
    .vue_ob-infoGrid .p-datatable-tbody th:first-child, .vue_ob-paymentsGrid .p-datatable-thead > tr > td:first-child, .vue_ob-paymentsGrid .p-datatable-thead th:first-child,
    .vue_ob-paymentsGrid .p-datatable-tbody > tr > td:first-child,
    .vue_ob-paymentsGrid .p-datatable-tbody th:first-child {
        padding-left: 1.5rem;
    }

    .vue_paySlipGrid .p-datatable-thead > tr > td .col-Code, .vue_paySlipGrid .p-datatable-thead th .col-Code,
    .vue_paySlipGrid .p-datatable-tbody > tr > td .col-Code,
    .vue_paySlipGrid .p-datatable-tbody th .col-Code, .vue_employeeListGrid .p-datatable-thead > tr > td .col-Code, .vue_employeeListGrid .p-datatable-thead th .col-Code,
    .vue_employeeListGrid .p-datatable-tbody > tr > td .col-Code,
    .vue_employeeListGrid .p-datatable-tbody th .col-Code, .vue_ob-infoGrid .p-datatable-thead > tr > td .col-Code, .vue_ob-infoGrid .p-datatable-thead th .col-Code,
    .vue_ob-infoGrid .p-datatable-tbody > tr > td .col-Code,
    .vue_ob-infoGrid .p-datatable-tbody th .col-Code, .vue_ob-paymentsGrid .p-datatable-thead > tr > td .col-Code, .vue_ob-paymentsGrid .p-datatable-thead th .col-Code,
    .vue_ob-paymentsGrid .p-datatable-tbody > tr > td .col-Code,
    .vue_ob-paymentsGrid .p-datatable-tbody th .col-Code {
        width: 9.75rem;
    }

.vue_paySlipGrid .p-datatable-thead .p-checkbox,
.vue_paySlipGrid .p-datatable-tbody .p-checkbox, .vue_employeeListGrid .p-datatable-thead .p-checkbox,
.vue_employeeListGrid .p-datatable-tbody .p-checkbox, .vue_ob-infoGrid .p-datatable-thead .p-checkbox,
.vue_ob-infoGrid .p-datatable-tbody .p-checkbox, .vue_ob-paymentsGrid .p-datatable-thead .p-checkbox,
.vue_ob-paymentsGrid .p-datatable-tbody .p-checkbox {
    height: 1.125rem;
    width: 1.125rem;
    margin-left: 0;
}

.vue_paySlipGrid .p-datatable-thead .p-checkbox-checked:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box,
.vue_paySlipGrid .p-datatable-tbody .p-checkbox-checked:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box, .vue_employeeListGrid .p-datatable-thead .p-checkbox-checked:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box,
.vue_employeeListGrid .p-datatable-tbody .p-checkbox-checked:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box, .vue_ob-infoGrid .p-datatable-thead .p-checkbox-checked:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box,
.vue_ob-infoGrid .p-datatable-tbody .p-checkbox-checked:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box, .vue_ob-paymentsGrid .p-datatable-thead .p-checkbox-checked:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box,
.vue_ob-paymentsGrid .p-datatable-tbody .p-checkbox-checked:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box {
    border-color: #DBDFE4;
    background: #fff;
}

    .vue_paySlipGrid .p-datatable-thead .p-checkbox-checked:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box .p-checkbox-icon,
    .vue_paySlipGrid .p-datatable-tbody .p-checkbox-checked:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box .p-checkbox-icon, .vue_employeeListGrid .p-datatable-thead .p-checkbox-checked:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box .p-checkbox-icon,
    .vue_employeeListGrid .p-datatable-tbody .p-checkbox-checked:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box .p-checkbox-icon, .vue_ob-infoGrid .p-datatable-thead .p-checkbox-checked:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box .p-checkbox-icon,
    .vue_ob-infoGrid .p-datatable-tbody .p-checkbox-checked:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box .p-checkbox-icon, .vue_ob-paymentsGrid .p-datatable-thead .p-checkbox-checked:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box .p-checkbox-icon,
    .vue_ob-paymentsGrid .p-datatable-tbody .p-checkbox-checked:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box .p-checkbox-icon {
        color: transparent;
    }

.vue_paySlipGrid .p-datatable-thead .p-checkbox-box,
.vue_paySlipGrid .p-datatable-tbody .p-checkbox-box, .vue_employeeListGrid .p-datatable-thead .p-checkbox-box,
.vue_employeeListGrid .p-datatable-tbody .p-checkbox-box, .vue_ob-infoGrid .p-datatable-thead .p-checkbox-box,
.vue_ob-infoGrid .p-datatable-tbody .p-checkbox-box, .vue_ob-paymentsGrid .p-datatable-thead .p-checkbox-box,
.vue_ob-paymentsGrid .p-datatable-tbody .p-checkbox-box {
    height: 100%;
    width: 100%;
    border: 1px solid #DBDFE4;
    background: #fff;
}

    .vue_paySlipGrid .p-datatable-thead .p-checkbox-box .p-checkbox-icon,
    .vue_paySlipGrid .p-datatable-tbody .p-checkbox-box .p-checkbox-icon, .vue_employeeListGrid .p-datatable-thead .p-checkbox-box .p-checkbox-icon,
    .vue_employeeListGrid .p-datatable-tbody .p-checkbox-box .p-checkbox-icon, .vue_ob-infoGrid .p-datatable-thead .p-checkbox-box .p-checkbox-icon,
    .vue_ob-infoGrid .p-datatable-tbody .p-checkbox-box .p-checkbox-icon, .vue_ob-paymentsGrid .p-datatable-thead .p-checkbox-box .p-checkbox-icon,
    .vue_ob-paymentsGrid .p-datatable-tbody .p-checkbox-box .p-checkbox-icon {
        opacity: 1;
        border: 1px solid #690DD3;
        border-radius: 0.25rem;
        background: url("../img/newDesign/icon/ico-checkbox.svg") no-repeat center center;
        transition: opacity 0.42s ease;
        transform: scale(1.35);
        color: transparent;
    }

.debugUrl .vue_paySlipGrid .p-datatable-thead .p-checkbox-box .p-checkbox-icon,
.debugUrl .vue_paySlipGrid .p-datatable-tbody .p-checkbox-box .p-checkbox-icon, .debugUrl .vue_employeeListGrid .p-datatable-thead .p-checkbox-box .p-checkbox-icon,
.debugUrl .vue_employeeListGrid .p-datatable-tbody .p-checkbox-box .p-checkbox-icon, .debugUrl .vue_ob-infoGrid .p-datatable-thead .p-checkbox-box .p-checkbox-icon,
.debugUrl .vue_ob-infoGrid .p-datatable-tbody .p-checkbox-box .p-checkbox-icon, .debugUrl .vue_ob-paymentsGrid .p-datatable-thead .p-checkbox-box .p-checkbox-icon,
.debugUrl .vue_ob-paymentsGrid .p-datatable-tbody .p-checkbox-box .p-checkbox-icon {
    background: url("/Content/themes/novapay/img/newDesign/icon/ico-checkbox.svg") no-repeat center/100%;
}

.vue_paySlipGrid .p-datatable-thead .p-checkbox-box:hover,
.vue_paySlipGrid .p-datatable-tbody .p-checkbox-box:hover, .vue_employeeListGrid .p-datatable-thead .p-checkbox-box:hover,
.vue_employeeListGrid .p-datatable-tbody .p-checkbox-box:hover, .vue_ob-infoGrid .p-datatable-thead .p-checkbox-box:hover,
.vue_ob-infoGrid .p-datatable-tbody .p-checkbox-box:hover, .vue_ob-paymentsGrid .p-datatable-thead .p-checkbox-box:hover,
.vue_ob-paymentsGrid .p-datatable-tbody .p-checkbox-box:hover {
    border-color: #690DD3;
    background: #fff;
}

.vue_paySlipGrid .p-datatable-tbody:has(.p-datatable-empty-message), .vue_employeeListGrid .p-datatable-tbody:has(.p-datatable-empty-message), .vue_ob-infoGrid .p-datatable-tbody:has(.p-datatable-empty-message), .vue_ob-paymentsGrid .p-datatable-tbody:has(.p-datatable-empty-message) {
    min-height: 25rem;
}

@media (max-width: 1200px) {
    .vue_paySlipGrid .p-datatable-tbody:has(.p-datatable-empty-message), .vue_employeeListGrid .p-datatable-tbody:has(.p-datatable-empty-message), .vue_ob-infoGrid .p-datatable-tbody:has(.p-datatable-empty-message), .vue_ob-paymentsGrid .p-datatable-tbody:has(.p-datatable-empty-message) {
        grid-template-columns: repeat(1, 1fr);
    }
}

.vue_paySlipGrid .p-datatable-tbody .col-DebitIBAN .iban-value,
.vue_paySlipGrid .p-datatable-tbody .col-DebitIBAN .name-value,
.vue_paySlipGrid .p-datatable-tbody .col-DebitIBAN .edrpou-value,
.vue_paySlipGrid .p-datatable-tbody .col-DebitIBAN span,
.vue_paySlipGrid .p-datatable-tbody .col-DebitAccountName .iban-value,
.vue_paySlipGrid .p-datatable-tbody .col-DebitAccountName .name-value,
.vue_paySlipGrid .p-datatable-tbody .col-DebitAccountName .edrpou-value,
.vue_paySlipGrid .p-datatable-tbody .col-DebitAccountName span,
.vue_paySlipGrid .p-datatable-tbody .col-DebitCodeAccount .iban-value,
.vue_paySlipGrid .p-datatable-tbody .col-DebitCodeAccount .name-value,
.vue_paySlipGrid .p-datatable-tbody .col-DebitCodeAccount .edrpou-value,
.vue_paySlipGrid .p-datatable-tbody .col-DebitCodeAccount span,
.vue_paySlipGrid .p-datatable-tbody .col-Name .iban-value,
.vue_paySlipGrid .p-datatable-tbody .col-Name .name-value,
.vue_paySlipGrid .p-datatable-tbody .col-Name .edrpou-value,
.vue_paySlipGrid .p-datatable-tbody .col-Name span,
.vue_paySlipGrid .p-datatable-tbody .col-IBAN .iban-value,
.vue_paySlipGrid .p-datatable-tbody .col-IBAN .name-value,
.vue_paySlipGrid .p-datatable-tbody .col-IBAN .edrpou-value,
.vue_paySlipGrid .p-datatable-tbody .col-IBAN span, .vue_employeeListGrid .p-datatable-tbody .col-DebitIBAN .iban-value,
.vue_employeeListGrid .p-datatable-tbody .col-DebitIBAN .name-value,
.vue_employeeListGrid .p-datatable-tbody .col-DebitIBAN .edrpou-value,
.vue_employeeListGrid .p-datatable-tbody .col-DebitIBAN span,
.vue_employeeListGrid .p-datatable-tbody .col-DebitAccountName .iban-value,
.vue_employeeListGrid .p-datatable-tbody .col-DebitAccountName .name-value,
.vue_employeeListGrid .p-datatable-tbody .col-DebitAccountName .edrpou-value,
.vue_employeeListGrid .p-datatable-tbody .col-DebitAccountName span,
.vue_employeeListGrid .p-datatable-tbody .col-DebitCodeAccount .iban-value,
.vue_employeeListGrid .p-datatable-tbody .col-DebitCodeAccount .name-value,
.vue_employeeListGrid .p-datatable-tbody .col-DebitCodeAccount .edrpou-value,
.vue_employeeListGrid .p-datatable-tbody .col-DebitCodeAccount span,
.vue_employeeListGrid .p-datatable-tbody .col-Name .iban-value,
.vue_employeeListGrid .p-datatable-tbody .col-Name .name-value,
.vue_employeeListGrid .p-datatable-tbody .col-Name .edrpou-value,
.vue_employeeListGrid .p-datatable-tbody .col-Name span,
.vue_employeeListGrid .p-datatable-tbody .col-IBAN .iban-value,
.vue_employeeListGrid .p-datatable-tbody .col-IBAN .name-value,
.vue_employeeListGrid .p-datatable-tbody .col-IBAN .edrpou-value,
.vue_employeeListGrid .p-datatable-tbody .col-IBAN span, .vue_ob-infoGrid .p-datatable-tbody .col-DebitIBAN .iban-value,
.vue_ob-infoGrid .p-datatable-tbody .col-DebitIBAN .name-value,
.vue_ob-infoGrid .p-datatable-tbody .col-DebitIBAN .edrpou-value,
.vue_ob-infoGrid .p-datatable-tbody .col-DebitIBAN span,
.vue_ob-infoGrid .p-datatable-tbody .col-DebitAccountName .iban-value,
.vue_ob-infoGrid .p-datatable-tbody .col-DebitAccountName .name-value,
.vue_ob-infoGrid .p-datatable-tbody .col-DebitAccountName .edrpou-value,
.vue_ob-infoGrid .p-datatable-tbody .col-DebitAccountName span,
.vue_ob-infoGrid .p-datatable-tbody .col-DebitCodeAccount .iban-value,
.vue_ob-infoGrid .p-datatable-tbody .col-DebitCodeAccount .name-value,
.vue_ob-infoGrid .p-datatable-tbody .col-DebitCodeAccount .edrpou-value,
.vue_ob-infoGrid .p-datatable-tbody .col-DebitCodeAccount span,
.vue_ob-infoGrid .p-datatable-tbody .col-Name .iban-value,
.vue_ob-infoGrid .p-datatable-tbody .col-Name .name-value,
.vue_ob-infoGrid .p-datatable-tbody .col-Name .edrpou-value,
.vue_ob-infoGrid .p-datatable-tbody .col-Name span,
.vue_ob-infoGrid .p-datatable-tbody .col-IBAN .iban-value,
.vue_ob-infoGrid .p-datatable-tbody .col-IBAN .name-value,
.vue_ob-infoGrid .p-datatable-tbody .col-IBAN .edrpou-value,
.vue_ob-infoGrid .p-datatable-tbody .col-IBAN span, .vue_ob-paymentsGrid .p-datatable-tbody .col-DebitIBAN .iban-value,
.vue_ob-paymentsGrid .p-datatable-tbody .col-DebitIBAN .name-value,
.vue_ob-paymentsGrid .p-datatable-tbody .col-DebitIBAN .edrpou-value,
.vue_ob-paymentsGrid .p-datatable-tbody .col-DebitIBAN span,
.vue_ob-paymentsGrid .p-datatable-tbody .col-DebitAccountName .iban-value,
.vue_ob-paymentsGrid .p-datatable-tbody .col-DebitAccountName .name-value,
.vue_ob-paymentsGrid .p-datatable-tbody .col-DebitAccountName .edrpou-value,
.vue_ob-paymentsGrid .p-datatable-tbody .col-DebitAccountName span,
.vue_ob-paymentsGrid .p-datatable-tbody .col-DebitCodeAccount .iban-value,
.vue_ob-paymentsGrid .p-datatable-tbody .col-DebitCodeAccount .name-value,
.vue_ob-paymentsGrid .p-datatable-tbody .col-DebitCodeAccount .edrpou-value,
.vue_ob-paymentsGrid .p-datatable-tbody .col-DebitCodeAccount span,
.vue_ob-paymentsGrid .p-datatable-tbody .col-Name .iban-value,
.vue_ob-paymentsGrid .p-datatable-tbody .col-Name .name-value,
.vue_ob-paymentsGrid .p-datatable-tbody .col-Name .edrpou-value,
.vue_ob-paymentsGrid .p-datatable-tbody .col-Name span,
.vue_ob-paymentsGrid .p-datatable-tbody .col-IBAN .iban-value,
.vue_ob-paymentsGrid .p-datatable-tbody .col-IBAN .name-value,
.vue_ob-paymentsGrid .p-datatable-tbody .col-IBAN .edrpou-value,
.vue_ob-paymentsGrid .p-datatable-tbody .col-IBAN span {
    color: #32383c;
    font-size: 14px;
    font-weight: 500;
}

.vue_paySlipGrid .p-datatable-tbody .col-DebitCodeAccount .edrpou-value,
.vue_paySlipGrid .p-datatable-tbody .col-DebitCodeAccount span,
.vue_paySlipGrid .p-datatable-tbody .col-StateCode .edrpou-value,
.vue_paySlipGrid .p-datatable-tbody .col-StateCode span, .vue_employeeListGrid .p-datatable-tbody .col-DebitCodeAccount .edrpou-value,
.vue_employeeListGrid .p-datatable-tbody .col-DebitCodeAccount span,
.vue_employeeListGrid .p-datatable-tbody .col-StateCode .edrpou-value,
.vue_employeeListGrid .p-datatable-tbody .col-StateCode span, .vue_ob-infoGrid .p-datatable-tbody .col-DebitCodeAccount .edrpou-value,
.vue_ob-infoGrid .p-datatable-tbody .col-DebitCodeAccount span,
.vue_ob-infoGrid .p-datatable-tbody .col-StateCode .edrpou-value,
.vue_ob-infoGrid .p-datatable-tbody .col-StateCode span, .vue_ob-paymentsGrid .p-datatable-tbody .col-DebitCodeAccount .edrpou-value,
.vue_ob-paymentsGrid .p-datatable-tbody .col-DebitCodeAccount span,
.vue_ob-paymentsGrid .p-datatable-tbody .col-StateCode .edrpou-value,
.vue_ob-paymentsGrid .p-datatable-tbody .col-StateCode span {
    color: #767F8A;
    font-size: 14px;
    font-weight: 500;
}

@media (max-width: 1200px) {
    .vue_paySlipGrid .p-datatable-tbody, .vue_employeeListGrid .p-datatable-tbody, .vue_ob-infoGrid .p-datatable-tbody, .vue_ob-paymentsGrid .p-datatable-tbody {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        border: none;
        gap: 0.75rem;
        padding-bottom: 1.5rem;
    }

        .vue_paySlipGrid .p-datatable-tbody > tr, .vue_employeeListGrid .p-datatable-tbody > tr, .vue_ob-infoGrid .p-datatable-tbody > tr, .vue_ob-paymentsGrid .p-datatable-tbody > tr {
            position: relative;
            display: grid;
            grid-template-columns: 38px 1fr;
            gap: 0.5rem;
            padding: 0.5rem;
            border-radius: 0.5rem;
            border: 1px solid #DBDFE4;
        }

            .vue_paySlipGrid .p-datatable-tbody > tr > td, .vue_employeeListGrid .p-datatable-tbody > tr > td, .vue_ob-infoGrid .p-datatable-tbody > tr > td, .vue_ob-paymentsGrid .p-datatable-tbody > tr > td {
                display: flex;
                align-items: flex-start;
                grid-column: 2;
                border: none;
                width: 100% !important;
                padding: 0;
            }

                .vue_paySlipGrid .p-datatable-tbody > tr > td:first-child, .vue_employeeListGrid .p-datatable-tbody > tr > td:first-child, .vue_ob-infoGrid .p-datatable-tbody > tr > td:first-child, .vue_ob-paymentsGrid .p-datatable-tbody > tr > td:first-child {
                    width: auto;
                    top: 50%;
                    position: absolute;
                    grid-column: 1;
                    transform: translateY(-50%);
                }

                .vue_paySlipGrid .p-datatable-tbody > tr > td:last-child, .vue_employeeListGrid .p-datatable-tbody > tr > td:last-child, .vue_ob-infoGrid .p-datatable-tbody > tr > td:last-child, .vue_ob-paymentsGrid .p-datatable-tbody > tr > td:last-child {
                    justify-content: center;
                }

                .vue_paySlipGrid .p-datatable-tbody > tr > td .grid-cell__actions, .vue_employeeListGrid .p-datatable-tbody > tr > td .grid-cell__actions, .vue_ob-infoGrid .p-datatable-tbody > tr > td .grid-cell__actions, .vue_ob-paymentsGrid .p-datatable-tbody > tr > td .grid-cell__actions {
                    width: 100%;
                }

                .vue_paySlipGrid .p-datatable-tbody > tr > td .grid-cell__actions-dropdown.open, .vue_employeeListGrid .p-datatable-tbody > tr > td .grid-cell__actions-dropdown.open, .vue_ob-infoGrid .p-datatable-tbody > tr > td .grid-cell__actions-dropdown.open, .vue_ob-paymentsGrid .p-datatable-tbody > tr > td .grid-cell__actions-dropdown.open {
                    height: auto;
                    left: 0;
                    width: 100%;
                    top: 110%;
                    left: 0;
                    width: 100%;
                    transform: translateX(0) scale(1);
                }

        .vue_paySlipGrid .p-datatable-tbody .col-Code span, .vue_employeeListGrid .p-datatable-tbody .col-Code span, .vue_ob-infoGrid .p-datatable-tbody .col-Code span, .vue_ob-paymentsGrid .p-datatable-tbody .col-Code span {
            overflow: inherit;
        }

        .vue_paySlipGrid .p-datatable-tbody .grid-cell .sender-name,
        .vue_paySlipGrid .p-datatable-tbody .grid-cell .receiver-name, .vue_employeeListGrid .p-datatable-tbody .grid-cell .sender-name,
        .vue_employeeListGrid .p-datatable-tbody .grid-cell .receiver-name, .vue_ob-infoGrid .p-datatable-tbody .grid-cell .sender-name,
        .vue_ob-infoGrid .p-datatable-tbody .grid-cell .receiver-name, .vue_ob-paymentsGrid .p-datatable-tbody .grid-cell .sender-name,
        .vue_ob-paymentsGrid .p-datatable-tbody .grid-cell .receiver-name {
            max-width: 100%;
            white-space: pre-wrap;
            overflow: inherit;
        }

        .vue_paySlipGrid .p-datatable-tbody .grid-cell .status-pill, .vue_employeeListGrid .p-datatable-tbody .grid-cell .status-pill, .vue_ob-infoGrid .p-datatable-tbody .grid-cell .status-pill, .vue_ob-paymentsGrid .p-datatable-tbody .grid-cell .status-pill {
            max-width: 100%;
        }

        .vue_paySlipGrid .p-datatable-tbody .grid-cell .payment-status[data-status="95"], .vue_employeeListGrid .p-datatable-tbody .grid-cell .payment-status[data-status="95"], .vue_ob-infoGrid .p-datatable-tbody .grid-cell .payment-status[data-status="95"], .vue_ob-paymentsGrid .p-datatable-tbody .grid-cell .payment-status[data-status="95"] {
            max-width: 100%;
        }

        .vue_paySlipGrid .p-datatable-tbody .grid-cell__actions, .vue_employeeListGrid .p-datatable-tbody .grid-cell__actions, .vue_ob-infoGrid .p-datatable-tbody .grid-cell__actions, .vue_ob-paymentsGrid .p-datatable-tbody .grid-cell__actions {
            position: relative;
            align-items: flex-start;
            margin-top: 0.75rem;
        }

            .vue_paySlipGrid .p-datatable-tbody .grid-cell__actions .btn-td__action, .vue_employeeListGrid .p-datatable-tbody .grid-cell__actions .btn-td__action, .vue_ob-infoGrid .p-datatable-tbody .grid-cell__actions .btn-td__action, .vue_ob-paymentsGrid .p-datatable-tbody .grid-cell__actions .btn-td__action {
                width: 100%;
                height: 2.5rem;
                border-radius: 0.5rem;
                border: 1px solid #DBDFE4;
                background: transparent;
                font-weight: 500;
            }

                .vue_paySlipGrid .p-datatable-tbody .grid-cell__actions .btn-td__action:hover .icon-vertical-dot, .vue_paySlipGrid .p-datatable-tbody .grid-cell__actions .btn-td__action:active .icon-vertical-dot, .vue_paySlipGrid .p-datatable-tbody .grid-cell__actions .btn-td__action:focus .icon-vertical-dot, .vue_employeeListGrid .p-datatable-tbody .grid-cell__actions .btn-td__action:hover .icon-vertical-dot, .vue_employeeListGrid .p-datatable-tbody .grid-cell__actions .btn-td__action:active .icon-vertical-dot, .vue_employeeListGrid .p-datatable-tbody .grid-cell__actions .btn-td__action:focus .icon-vertical-dot, .vue_ob-infoGrid .p-datatable-tbody .grid-cell__actions .btn-td__action:hover .icon-vertical-dot, .vue_ob-infoGrid .p-datatable-tbody .grid-cell__actions .btn-td__action:active .icon-vertical-dot, .vue_ob-infoGrid .p-datatable-tbody .grid-cell__actions .btn-td__action:focus .icon-vertical-dot, .vue_ob-paymentsGrid .p-datatable-tbody .grid-cell__actions .btn-td__action:hover .icon-vertical-dot, .vue_ob-paymentsGrid .p-datatable-tbody .grid-cell__actions .btn-td__action:active .icon-vertical-dot, .vue_ob-paymentsGrid .p-datatable-tbody .grid-cell__actions .btn-td__action:focus .icon-vertical-dot {
                    display: inline-block;
                    width: 24px;
                    height: 24px;
                    background-color: currentColor;
                    background-image: none;
                    mask-image: url("../img/sprite.svg#icon-vertical-dot-hover");
                }

    .debugUrl .vue_paySlipGrid .p-datatable-tbody .grid-cell__actions .btn-td__action:hover .icon-vertical-dot, .debugUrl .vue_paySlipGrid .p-datatable-tbody .grid-cell__actions .btn-td__action:active .icon-vertical-dot, .debugUrl .vue_paySlipGrid .p-datatable-tbody .grid-cell__actions .btn-td__action:focus .icon-vertical-dot, .debugUrl .vue_employeeListGrid .p-datatable-tbody .grid-cell__actions .btn-td__action:hover .icon-vertical-dot, .debugUrl .vue_employeeListGrid .p-datatable-tbody .grid-cell__actions .btn-td__action:active .icon-vertical-dot, .debugUrl .vue_employeeListGrid .p-datatable-tbody .grid-cell__actions .btn-td__action:focus .icon-vertical-dot, .debugUrl .vue_ob-infoGrid .p-datatable-tbody .grid-cell__actions .btn-td__action:hover .icon-vertical-dot, .debugUrl .vue_ob-infoGrid .p-datatable-tbody .grid-cell__actions .btn-td__action:active .icon-vertical-dot, .debugUrl .vue_ob-infoGrid .p-datatable-tbody .grid-cell__actions .btn-td__action:focus .icon-vertical-dot, .debugUrl .vue_ob-paymentsGrid .p-datatable-tbody .grid-cell__actions .btn-td__action:hover .icon-vertical-dot, .debugUrl .vue_ob-paymentsGrid .p-datatable-tbody .grid-cell__actions .btn-td__action:active .icon-vertical-dot, .debugUrl .vue_ob-paymentsGrid .p-datatable-tbody .grid-cell__actions .btn-td__action:focus .icon-vertical-dot {
        mask-image: url("/Content/themes/novapay/img/sprite.svg#icon-vertical-dot-hover");
    }

    .vue_paySlipGrid .p-datatable-tbody .grid-cell__actions .btn-td__action:hover .icon-vertical-dot, .vue_paySlipGrid .p-datatable-tbody .grid-cell__actions .btn-td__action:active .icon-vertical-dot, .vue_paySlipGrid .p-datatable-tbody .grid-cell__actions .btn-td__action:focus .icon-vertical-dot, .vue_employeeListGrid .p-datatable-tbody .grid-cell__actions .btn-td__action:hover .icon-vertical-dot, .vue_employeeListGrid .p-datatable-tbody .grid-cell__actions .btn-td__action:active .icon-vertical-dot, .vue_employeeListGrid .p-datatable-tbody .grid-cell__actions .btn-td__action:focus .icon-vertical-dot, .vue_ob-infoGrid .p-datatable-tbody .grid-cell__actions .btn-td__action:hover .icon-vertical-dot, .vue_ob-infoGrid .p-datatable-tbody .grid-cell__actions .btn-td__action:active .icon-vertical-dot, .vue_ob-infoGrid .p-datatable-tbody .grid-cell__actions .btn-td__action:focus .icon-vertical-dot, .vue_ob-paymentsGrid .p-datatable-tbody .grid-cell__actions .btn-td__action:hover .icon-vertical-dot, .vue_ob-paymentsGrid .p-datatable-tbody .grid-cell__actions .btn-td__action:active .icon-vertical-dot, .vue_ob-paymentsGrid .p-datatable-tbody .grid-cell__actions .btn-td__action:focus .icon-vertical-dot {
        mask-repeat: no-repeat;
        mask-size: contain;
    }

    .vue_paySlipGrid .p-datatable-tbody .grid-cell__actions .btn-td__action span, .vue_employeeListGrid .p-datatable-tbody .grid-cell__actions .btn-td__action span, .vue_ob-infoGrid .p-datatable-tbody .grid-cell__actions .btn-td__action span, .vue_ob-paymentsGrid .p-datatable-tbody .grid-cell__actions .btn-td__action span {
        cursor: pointer;
        position: relative;
    }

    .vue_paySlipGrid .p-datatable-tbody .grid-cell__actions .btn-td__action .content-dot, .vue_employeeListGrid .p-datatable-tbody .grid-cell__actions .btn-td__action .content-dot, .vue_ob-infoGrid .p-datatable-tbody .grid-cell__actions .btn-td__action .content-dot, .vue_ob-paymentsGrid .p-datatable-tbody .grid-cell__actions .btn-td__action .content-dot {
        display: none;
    }

    .vue_paySlipGrid .p-datatable-tbody .grid-cell__actions .btn-td__action .content-text, .vue_employeeListGrid .p-datatable-tbody .grid-cell__actions .btn-td__action .content-text, .vue_ob-infoGrid .p-datatable-tbody .grid-cell__actions .btn-td__action .content-text, .vue_ob-paymentsGrid .p-datatable-tbody .grid-cell__actions .btn-td__action .content-text {
        display: block;
        width: 100%;
        font-size: 14px;
        text-align: center;
        line-height: 1.35;
    }
}

@media (max-width: 768px) {
    .vue_paySlipGrid .p-datatable-tbody, .vue_employeeListGrid .p-datatable-tbody, .vue_ob-infoGrid .p-datatable-tbody, .vue_ob-paymentsGrid .p-datatable-tbody {
        grid-template-columns: repeat(1, 1fr);
        padding-bottom: 1rem;
    }
}

.vue_paySlipGrid .p-datatable-footer, .vue_employeeListGrid .p-datatable-footer, .vue_ob-infoGrid .p-datatable-footer, .vue_ob-paymentsGrid .p-datatable-footer {
    padding: 0;
    border-bottom-left-radius: 0.5rem;
    border-bottom-right-radius: 0.5rem;
    border-top: none;
    border-bottom: 1px solid #DBDFE4;
    border-left: 1px solid #DBDFE4;
    border-right: 1px solid #DBDFE4;
}

    .vue_paySlipGrid .p-datatable-footer .pagination-controls, .vue_employeeListGrid .p-datatable-footer .pagination-controls, .vue_ob-infoGrid .p-datatable-footer .pagination-controls, .vue_ob-paymentsGrid .p-datatable-footer .pagination-controls {
        display: flex;
        align-items: center;
        color: #767F8A;
    }

    .vue_paySlipGrid .p-datatable-footer .pagination-info, .vue_employeeListGrid .p-datatable-footer .pagination-info, .vue_ob-infoGrid .p-datatable-footer .pagination-info, .vue_ob-paymentsGrid .p-datatable-footer .pagination-info {
        margin-right: 0.75rem;
    }

    .vue_paySlipGrid .p-datatable-footer .pagination-info-count, .vue_employeeListGrid .p-datatable-footer .pagination-info-count, .vue_ob-infoGrid .p-datatable-footer .pagination-info-count, .vue_ob-paymentsGrid .p-datatable-footer .pagination-info-count {
        display: flex;
        gap: 0.5rem;
    }

        .vue_paySlipGrid .p-datatable-footer .pagination-info-count .pagination-interval, .vue_employeeListGrid .p-datatable-footer .pagination-info-count .pagination-interval, .vue_ob-infoGrid .p-datatable-footer .pagination-info-count .pagination-interval, .vue_ob-paymentsGrid .p-datatable-footer .pagination-info-count .pagination-interval {
            color: #32383c;
        }

    .vue_paySlipGrid .p-datatable-footer .custom-pagination-selector, .vue_employeeListGrid .p-datatable-footer .custom-pagination-selector, .vue_ob-infoGrid .p-datatable-footer .custom-pagination-selector, .vue_ob-paymentsGrid .p-datatable-footer .custom-pagination-selector {
        position: relative;
    }

        .vue_paySlipGrid .p-datatable-footer .custom-pagination-selector .pagination-selector-btn, .vue_employeeListGrid .p-datatable-footer .custom-pagination-selector .pagination-selector-btn, .vue_ob-infoGrid .p-datatable-footer .custom-pagination-selector .pagination-selector-btn, .vue_ob-paymentsGrid .p-datatable-footer .custom-pagination-selector .pagination-selector-btn {
            position: relative;
            display: flex;
            width: 3.5rem;
            margin-right: 0.75rem;
            padding: 0.4rem 2rem 0.3rem 0.5rem;
            color: #27292C;
            background-color: #fff;
            border-radius: 0.25rem;
            border: 1px solid #CDD3DD;
            font-size: 12px;
            transition: 0.32s;
        }

            .vue_paySlipGrid .p-datatable-footer .custom-pagination-selector .pagination-selector-btn::after, .vue_employeeListGrid .p-datatable-footer .custom-pagination-selector .pagination-selector-btn::after, .vue_ob-infoGrid .p-datatable-footer .custom-pagination-selector .pagination-selector-btn::after, .vue_ob-paymentsGrid .p-datatable-footer .custom-pagination-selector .pagination-selector-btn::after {
                content: "";
                position: absolute;
                top: 0.25rem;
                right: 0.5rem;
                width: 1rem;
                height: 1rem;
                transform: rotate(180deg);
                transition: 0.3s ease-in-out;
                display: inline-block;
                width: 17px;
                height: 17px;
                background-color: currentColor;
                background-image: none;
                mask-image: url("../img/sprite.svg#icon-arrow-black-down");
            }

.debugUrl .vue_paySlipGrid .p-datatable-footer .custom-pagination-selector .pagination-selector-btn::after, .debugUrl .vue_employeeListGrid .p-datatable-footer .custom-pagination-selector .pagination-selector-btn::after, .debugUrl .vue_ob-infoGrid .p-datatable-footer .custom-pagination-selector .pagination-selector-btn::after, .debugUrl .vue_ob-paymentsGrid .p-datatable-footer .custom-pagination-selector .pagination-selector-btn::after {
    mask-image: url("/Content/themes/novapay/img/sprite.svg#icon-arrow-black-down");
}

.vue_paySlipGrid .p-datatable-footer .custom-pagination-selector .pagination-selector-btn::after, .vue_employeeListGrid .p-datatable-footer .custom-pagination-selector .pagination-selector-btn::after, .vue_ob-infoGrid .p-datatable-footer .custom-pagination-selector .pagination-selector-btn::after, .vue_ob-paymentsGrid .p-datatable-footer .custom-pagination-selector .pagination-selector-btn::after {
    mask-repeat: no-repeat;
    mask-size: contain;
}

.vue_paySlipGrid .p-datatable-footer .custom-pagination-selector .pagination-selector-btn.dropdown-open:after, .vue_employeeListGrid .p-datatable-footer .custom-pagination-selector .pagination-selector-btn.dropdown-open:after, .vue_ob-infoGrid .p-datatable-footer .custom-pagination-selector .pagination-selector-btn.dropdown-open:after, .vue_ob-paymentsGrid .p-datatable-footer .custom-pagination-selector .pagination-selector-btn.dropdown-open:after {
    transform: rotate(0deg);
}

.vue_paySlipGrid .p-datatable-footer .custom-pagination-selector .pagination-selector-dropdown, .vue_employeeListGrid .p-datatable-footer .custom-pagination-selector .pagination-selector-dropdown, .vue_ob-infoGrid .p-datatable-footer .custom-pagination-selector .pagination-selector-dropdown, .vue_ob-paymentsGrid .p-datatable-footer .custom-pagination-selector .pagination-selector-dropdown {
    position: absolute;
    bottom: 100%;
    left: 0;
    display: flex;
    flex-direction: column-reverse;
    width: 100%;
    max-width: 3.5rem;
    margin-bottom: 5px;
    overflow: hidden;
    transform: scaleY(0);
    transform-origin: bottom;
    opacity: 0;
    transition: 0.22s ease-in-out;
    z-index: 4;
    border: 1px solid #CDD3DD;
    border-radius: 0.25rem;
}

    .vue_paySlipGrid .p-datatable-footer .custom-pagination-selector .pagination-selector-dropdown.open, .vue_employeeListGrid .p-datatable-footer .custom-pagination-selector .pagination-selector-dropdown.open, .vue_ob-infoGrid .p-datatable-footer .custom-pagination-selector .pagination-selector-dropdown.open, .vue_ob-paymentsGrid .p-datatable-footer .custom-pagination-selector .pagination-selector-dropdown.open {
        transform: scaleY(1);
        opacity: 1;
        z-index: 12;
    }

.vue_paySlipGrid .p-datatable-footer .custom-pagination-selector .pagination-selector-list, .vue_employeeListGrid .p-datatable-footer .custom-pagination-selector .pagination-selector-list, .vue_ob-infoGrid .p-datatable-footer .custom-pagination-selector .pagination-selector-list, .vue_ob-paymentsGrid .p-datatable-footer .custom-pagination-selector .pagination-selector-list {
    display: flex;
    flex-direction: column-reverse;
}

.vue_paySlipGrid .p-datatable-footer .custom-pagination-selector .pagination-selector-option, .vue_employeeListGrid .p-datatable-footer .custom-pagination-selector .pagination-selector-option, .vue_ob-infoGrid .p-datatable-footer .custom-pagination-selector .pagination-selector-option, .vue_ob-paymentsGrid .p-datatable-footer .custom-pagination-selector .pagination-selector-option {
    padding: 0.25rem 0.5rem;
    background-color: #fff;
    border-bottom: 1px solid #e9ecef;
    transition: 0.3s;
}

    .vue_paySlipGrid .p-datatable-footer .custom-pagination-selector .pagination-selector-option:first-of-type, .vue_employeeListGrid .p-datatable-footer .custom-pagination-selector .pagination-selector-option:first-of-type, .vue_ob-infoGrid .p-datatable-footer .custom-pagination-selector .pagination-selector-option:first-of-type, .vue_ob-paymentsGrid .p-datatable-footer .custom-pagination-selector .pagination-selector-option:first-of-type {
        border-bottom: 0;
    }

    .vue_paySlipGrid .p-datatable-footer .custom-pagination-selector .pagination-selector-option:hover, .vue_employeeListGrid .p-datatable-footer .custom-pagination-selector .pagination-selector-option:hover, .vue_ob-infoGrid .p-datatable-footer .custom-pagination-selector .pagination-selector-option:hover, .vue_ob-paymentsGrid .p-datatable-footer .custom-pagination-selector .pagination-selector-option:hover {
        cursor: pointer;
        background-color: #e9ecef;
    }

.vue_paySlipGrid .grid-footer, .vue_employeeListGrid .grid-footer, .vue_ob-infoGrid .grid-footer, .vue_ob-paymentsGrid .grid-footer {
    display: flex;
    flex-direction: column;
}

.vue_paySlipGrid .grid-footer__controls, .vue_paySlipGrid .grid-footer__actions-block, .vue_employeeListGrid .grid-footer__controls, .vue_employeeListGrid .grid-footer__actions-block, .vue_ob-infoGrid .grid-footer__controls, .vue_ob-infoGrid .grid-footer__actions-block, .vue_ob-paymentsGrid .grid-footer__controls, .vue_ob-paymentsGrid .grid-footer__actions-block {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 1.5rem 1rem;
    border-bottom: 1px solid #DBDFE4;
}

.vue_paySlipGrid .grid-footer__info, .vue_employeeListGrid .grid-footer__info, .vue_ob-infoGrid .grid-footer__info, .vue_ob-paymentsGrid .grid-footer__info {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.vue_paySlipGrid .grid-footer .selected-count, .vue_employeeListGrid .grid-footer .selected-count, .vue_ob-infoGrid .grid-footer .selected-count, .vue_ob-paymentsGrid .grid-footer .selected-count {
    font-weight: 500;
    color: #767F8A;
    font-size: 12px;
    line-height: 1rem;
}

.vue_paySlipGrid .grid-footer .selected-amount, .vue_employeeListGrid .grid-footer .selected-amount, .vue_ob-infoGrid .grid-footer .selected-amount, .vue_ob-paymentsGrid .grid-footer .selected-amount {
    font-size: 14px;
    font-weight: 600;
    line-height: 1.125rem;
    color: #32383c;
}

.vue_paySlipGrid .grid-footer .bulk-actions, .vue_employeeListGrid .grid-footer .bulk-actions, .vue_ob-infoGrid .grid-footer .bulk-actions, .vue_ob-paymentsGrid .grid-footer .bulk-actions {
    display: flex;
    gap: 0.5rem;
    margin-left: 1rem;
}

    .vue_paySlipGrid .grid-footer .bulk-actions .btn-bulk-action, .vue_employeeListGrid .grid-footer .bulk-actions .btn-bulk-action, .vue_ob-infoGrid .grid-footer .bulk-actions .btn-bulk-action, .vue_ob-paymentsGrid .grid-footer .bulk-actions .btn-bulk-action {
        max-height: 2.5rem;
    }

.vue_paySlipGrid .grid-pagination, .vue_employeeListGrid .grid-pagination, .vue_ob-infoGrid .grid-pagination, .vue_ob-paymentsGrid .grid-pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.5rem 1.5rem;
}

.vue_paySlipGrid .grid-pagination__info, .vue_employeeListGrid .grid-pagination__info, .vue_ob-infoGrid .grid-pagination__info, .vue_ob-paymentsGrid .grid-pagination__info {
    font-weight: 500;
    color: #767F8A;
    font-size: 12px;
    line-height: 1rem;
}

.vue_paySlipGrid .pagination, .vue_employeeListGrid .pagination, .vue_ob-infoGrid .pagination, .vue_ob-paymentsGrid .pagination {
    display: flex;
    gap: 0.25rem;
}

.vue_paySlipGrid .pagination__btn, .vue_employeeListGrid .pagination__btn, .vue_ob-infoGrid .pagination__btn, .vue_ob-paymentsGrid .pagination__btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    padding: 0.25rem;
    border: none;
    border-radius: 0.25rem;
    line-height: 1rem;
    background: #fff;
    font-size: 12px;
    line-height: 1rem;
    color: #767F8A;
}

    .vue_paySlipGrid .pagination__btn:hover, .vue_paySlipGrid .pagination__btn:active, .vue_paySlipGrid .pagination__btn:focus, .vue_paySlipGrid .pagination__btn--active, .vue_employeeListGrid .pagination__btn:hover, .vue_employeeListGrid .pagination__btn:active, .vue_employeeListGrid .pagination__btn:focus, .vue_employeeListGrid .pagination__btn--active, .vue_ob-infoGrid .pagination__btn:hover, .vue_ob-infoGrid .pagination__btn:active, .vue_ob-infoGrid .pagination__btn:focus, .vue_ob-infoGrid .pagination__btn--active, .vue_ob-paymentsGrid .pagination__btn:hover, .vue_ob-paymentsGrid .pagination__btn:active, .vue_ob-paymentsGrid .pagination__btn:focus, .vue_ob-paymentsGrid .pagination__btn--active {
        color: #690DD3;
        background: #F5EDFF;
        cursor: pointer;
    }

.vue_paySlipGrid .pagination__btn--prev .ico-n, .vue_employeeListGrid .pagination__btn--prev .ico-n, .vue_ob-infoGrid .pagination__btn--prev .ico-n, .vue_ob-paymentsGrid .pagination__btn--prev .ico-n {
    transform: rotate(270deg);
}

.vue_paySlipGrid .pagination__btn--next .ico-n, .vue_employeeListGrid .pagination__btn--next .ico-n, .vue_ob-infoGrid .pagination__btn--next .ico-n, .vue_ob-paymentsGrid .pagination__btn--next .ico-n {
    transform: rotate(90deg);
}

.vue_paySlipGrid .p-datatable-paginator-bottom, .vue_employeeListGrid .p-datatable-paginator-bottom, .vue_ob-infoGrid .p-datatable-paginator-bottom, .vue_ob-paymentsGrid .p-datatable-paginator-bottom {
    display: none;
}

.vue_paySlipGrid .employee-filter, .vue_employeeListGrid .employee-filter, .vue_ob-infoGrid .employee-filter, .vue_ob-paymentsGrid .employee-filter {
    padding: 12px;
    min-width: 250px;
}

.vue_paySlipGrid .filter-header, .vue_employeeListGrid .filter-header, .vue_ob-infoGrid .filter-header, .vue_ob-paymentsGrid .filter-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
    font-weight: 500;
    color: #333;
}

.vue_paySlipGrid .filter-body, .vue_employeeListGrid .filter-body, .vue_ob-infoGrid .filter-body, .vue_ob-paymentsGrid .filter-body {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

    .vue_paySlipGrid .filter-body input.form-control, .vue_employeeListGrid .filter-body input.form-control, .vue_ob-infoGrid .filter-body input.form-control, .vue_ob-paymentsGrid .filter-body input.form-control {
        padding: 8px 12px;
        border: 1px solid #ddd;
        border-radius: 4px;
        font-size: 14px;
        width: 100%;
        box-sizing: border-box;
    }

        .vue_paySlipGrid .filter-body input.form-control:focus, .vue_employeeListGrid .filter-body input.form-control:focus, .vue_ob-infoGrid .filter-body input.form-control:focus, .vue_ob-paymentsGrid .filter-body input.form-control:focus {
            outline: none;
            border-color: #2c7da0;
        }

.vue_paySlipGrid .filter-actions, .vue_employeeListGrid .filter-actions, .vue_ob-infoGrid .filter-actions, .vue_ob-paymentsGrid .filter-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 4px;
}

.vue_paySlipGrid .btn-filter-clear, .vue_employeeListGrid .btn-filter-clear, .vue_ob-infoGrid .btn-filter-clear, .vue_ob-paymentsGrid .btn-filter-clear {
    padding: 6px 12px;
    background: #f5f5f5;
    border: 1px solid #ddd;
    border-radius: 4px;
    cursor: pointer;
    font-size: 13px;
}

.vue_paySlipGrid .btn-filter-apply, .vue_employeeListGrid .btn-filter-apply, .vue_ob-infoGrid .btn-filter-apply, .vue_ob-paymentsGrid .btn-filter-apply {
    padding: 6px 12px;
    background: #2c7da0;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 13px;
}

    .vue_paySlipGrid .btn-filter-apply:hover, .vue_employeeListGrid .btn-filter-apply:hover, .vue_ob-infoGrid .btn-filter-apply:hover, .vue_ob-paymentsGrid .btn-filter-apply:hover {
        background: #1a5d7a;
    }

.vue_paySlipGrid .amount-range, .vue_employeeListGrid .amount-range, .vue_ob-infoGrid .amount-range, .vue_ob-paymentsGrid .amount-range {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.vue_paySlipGrid .amount-range__field, .vue_employeeListGrid .amount-range__field, .vue_ob-infoGrid .amount-range__field, .vue_ob-paymentsGrid .amount-range__field {
    display: flex;
    align-items: center;
    gap: 8px;
}

    .vue_paySlipGrid .amount-range__field label, .vue_employeeListGrid .amount-range__field label, .vue_ob-infoGrid .amount-range__field label, .vue_ob-paymentsGrid .amount-range__field label {
        width: 30px;
        font-size: 13px;
        color: #666;
    }

    .vue_paySlipGrid .amount-range__field input, .vue_employeeListGrid .amount-range__field input, .vue_ob-infoGrid .amount-range__field input, .vue_ob-paymentsGrid .amount-range__field input {
        flex: 1;
    }

.vue_paySlipGrid .no-data-employees, .vue_employeeListGrid .no-data-employees, .vue_ob-infoGrid .no-data-employees, .vue_ob-paymentsGrid .no-data-employees {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 20.625rem;
}

    .vue_paySlipGrid .no-data-employees .no-employees__container, .vue_employeeListGrid .no-data-employees .no-employees__container, .vue_ob-infoGrid .no-data-employees .no-employees__container, .vue_ob-paymentsGrid .no-data-employees .no-employees__container {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 0.75rem;
    }

    .vue_paySlipGrid .no-data-employees .no-employees__image .icon-no-employees, .vue_employeeListGrid .no-data-employees .no-employees__image .icon-no-employees, .vue_ob-infoGrid .no-data-employees .no-employees__image .icon-no-employees, .vue_ob-paymentsGrid .no-data-employees .no-employees__image .icon-no-employees {
        background-color: #DBDFE4;
    }

    .vue_paySlipGrid .no-data-employees .no-employees__text, .vue_employeeListGrid .no-data-employees .no-employees__text, .vue_ob-infoGrid .no-data-employees .no-employees__text, .vue_ob-paymentsGrid .no-data-employees .no-employees__text {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 0.5rem;
    }

    .vue_paySlipGrid .no-data-employees .no-employees__title, .vue_employeeListGrid .no-data-employees .no-employees__title, .vue_ob-infoGrid .no-data-employees .no-employees__title, .vue_ob-paymentsGrid .no-data-employees .no-employees__title {
        font-size: 17px;
        font-weight: 500;
        line-height: 1.5rem;
        color: #767F8A;
    }

    .vue_paySlipGrid .no-data-employees .no-employees__subtitle, .vue_employeeListGrid .no-data-employees .no-employees__subtitle, .vue_ob-infoGrid .no-data-employees .no-employees__subtitle, .vue_ob-paymentsGrid .no-data-employees .no-employees__subtitle {
        font-size: 14px;
        line-height: 1.125rem;
        color: #767F8A;
    }

@media (max-width: 1200px) {
    .vue_paySlipGrid .p-datatable-tbody > tr > td, .vue_paySlipGrid .p-datatable-tbody th {
        padding: 0;
    }
}

.vue_paySlipGrid .p-datatable-tbody > tr > td:first-child, .vue_paySlipGrid .p-datatable-tbody th:first-child {
    padding-left: 1.5rem;
}

@media (max-width: 1200px) {
    .vue_paySlipGrid .p-datatable-tbody > tr > td:first-child, .vue_paySlipGrid .p-datatable-tbody th:first-child {
        padding-left: 0.5rem !important;
    }
}

.vue_paySlipGrid .p-datatable-table-container {
    min-height: 5.188rem !important;
}

@media (max-width: 1200px) {
    .vue_paySlipGrid .p-datatable-table-container {
        border: none;
    }
}

.vue_paySlipGrid .chip-tableGrid {
    margin-right: 0;
    margin-left: 0;
}

.vue_paySlipGrid .grid-footer {
    display: flex;
    flex-direction: column;
}

.vue_paySlipGrid .grid-footer__controls {
    border-top: 1px solid #DBDFE4;
}

.vue_employeeListGrid .p-datatable {
    margin-top: 1rem;
}

    .vue_employeeListGrid .p-datatable .datatable-global-search {
        margin: 0 0.75rem 0.75rem;
    }

@media (max-width: 1200px) {
    .vue_employeeListGrid .p-datatable .datatable-global-search {
        margin-left: 0;
        margin-right: 0;
    }
}

.vue_employeeListGrid .p-datatable:has(.p-datatable-empty-message) .p-datatable-sortable-column,
.vue_employeeListGrid .p-datatable:has(.p-datatable-empty-message) .p-datatable-filter {
    pointer-events: none;
    cursor: default;
}

.vue_employeeListGrid .p-datatable:has(.p-datatable-empty-message) .p-datatable-sort-icon,
.vue_employeeListGrid .p-datatable:has(.p-datatable-empty-message) .p-datatable-filter {
    opacity: 0.3;
}

.vue_employeeListGrid .p-datatable-header {
    padding: 0;
    border: none;
}

.vue_employeeListGrid .p-datatable-tbody > tr > td, .vue_employeeListGrid .p-datatable-tbody th {
    padding: 1.4rem 0.5rem;
}

@media (max-width: 1200px) {
    .vue_employeeListGrid .p-datatable-tbody > tr > td, .vue_employeeListGrid .p-datatable-tbody th {
        padding: 0;
    }
}

.vue_employeeListGrid .p-datatable-tbody > tr > td:first-child, .vue_employeeListGrid .p-datatable-tbody th:first-child {
    padding-left: 1.5rem;
}

@media (max-width: 1200px) {
    .vue_employeeListGrid .p-datatable-tbody > tr > td:first-child, .vue_employeeListGrid .p-datatable-tbody th:first-child {
        padding-left: 0.5rem;
    }
}

.vue_employeeListGrid .p-datatable-table-container {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    border-right: none;
}

@media (max-width: 1200px) {
    .vue_employeeListGrid .p-datatable-table-container {
        border: none;
    }
}

.vue_employeeListGrid .p-datatable-footer {
    position: sticky;
    bottom: 0;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    border-left: none;
    border-right: none;
}

.vue_employeeListGrid .grid-footer {
    display: flex;
    flex-direction: column;
    padding: 0.5rem 0;
}

.vue_employeeListGrid .grid-footer__actions-block {
    padding-top: 0;
    padding-bottom: 0.75rem;
}

.vue_paymentGrid .p-datatable {
    margin-top: 1rem;
    padding-top: 0 !important;
}

    .vue_paymentGrid .p-datatable.skeleton-active:before {
        right: 0;
        left: 0;
    }

.vue_paymentGrid .p-datatable-table {
    position: relative;
}

@media (max-width: 1200px) {
    .vue_paymentGrid .p-datatable-table {
        min-width: auto;
    }
}

.vue_paymentGrid .p-datatable-table-container {
    min-height: 21.875rem !important;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: rgba(168, 173, 180, 0.5);
}

    .vue_paymentGrid .p-datatable-table-container::-webkit-scrollbar-track {
        background: rgba(168, 173, 180, 0.5);
        border-radius: 0.25rem;
    }

    .vue_paymentGrid .p-datatable-table-container::-webkit-scrollbar-thumb {
        background: rgba(168, 173, 180, 0.5);
        border-radius: 0.25rem;
    }

        .vue_paymentGrid .p-datatable-table-container::-webkit-scrollbar-thumb:hover {
            background: rgba(168, 173, 180, 0.5);
        }

@media (max-width: 1200px) {
    .vue_paymentGrid .p-datatable-table-container {
        width: 100%;
        max-width: 100%;
        flex-direction: row;
        flex-wrap: wrap;
        gap: 1rem;
        overflow-x: hidden;
        scrollbar-width: none;
    }

        .vue_paymentGrid .p-datatable-table-container::-webkit-scrollbar {
            display: none;
        }
}

@media (max-width: 1200px) {
    .vue_paymentGrid .p-datatable {
        padding: 0 0.75rem;
    }
}

.vue_paymentGrid .p-datatable-thead {
    position: sticky !important;
    top: 0;
    z-index: 100;
    background-color: #fff;
}

    .vue_paymentGrid .p-datatable-thead th {
        position: sticky;
        top: 0;
        height: 50px;
        padding: 0.8rem 0.75rem;
        vertical-align: middle;
        background-color: #EDEFF1;
    }

        .vue_paymentGrid .p-datatable-thead th .p-datatable-column-title {
            cursor: pointer;
            font-size: 12px;
            font-weight: 500;
            color: #767F8A;
            white-space: nowrap;
        }

    .vue_paymentGrid .p-datatable-thead.is-fixed {
        position: fixed !important;
        top: 0;
        left: 0;
        z-index: 1000;
        display: table;
    }

        .vue_paymentGrid .p-datatable-thead.is-fixed th {
            display: table-cell !important;
            vertical-align: middle;
        }

            .vue_paymentGrid .p-datatable-thead.is-fixed th.col-Code {
                width: 9.5rem;
            }

    .vue_paymentGrid .p-datatable-thead .p-datatable-sort-icon {
        display: none;
    }

    .vue_paymentGrid .p-datatable-thead .p-datatable-sortable-column .p-datatable-column-header-content [data-pc-section=sort] {
        position: relative;
        display: block;
        height: 1.5rem;
        width: 1.5rem;
        padding: 0;
        cursor: pointer;
    }

        .vue_paymentGrid .p-datatable-thead .p-datatable-sortable-column .p-datatable-column-header-content [data-pc-section=sort]::after {
            content: "";
            position: absolute;
            top: 50%;
            left: 50%;
            width: 100%;
            height: 100%;
            transition: 0.3s ease-in-out;
            transform: translate(-50%, -50%) rotate(-45deg);
            background-color: #767F8A !important;
            display: inline-block;
            width: 17px;
            height: 17px;
            background-color: currentColor;
            background-image: none;
            mask-image: url("../img/sprite.svg#icon-double-arrow");
        }

.debugUrl .vue_paymentGrid .p-datatable-thead .p-datatable-sortable-column .p-datatable-column-header-content [data-pc-section=sort]::after {
    mask-image: url("/Content/themes/novapay/img/sprite.svg#icon-double-arrow");
}

.vue_paymentGrid .p-datatable-thead .p-datatable-sortable-column .p-datatable-column-header-content [data-pc-section=sort]::after {
    mask-repeat: no-repeat;
    mask-size: contain;
}

.vue_paymentGrid .p-datatable-thead .p-datatable-sortable-column[aria-sort=ascending] .p-datatable-column-header-content [data-pc-section=sort], .vue_paymentGrid .p-datatable-thead .p-datatable-sortable-column[aria-sort=descending] .p-datatable-column-header-content [data-pc-section=sort] {
    border-radius: 6px;
    border: 1px solid #C39EED;
    background: #E1CFF6;
}

    .vue_paymentGrid .p-datatable-thead .p-datatable-sortable-column[aria-sort=ascending] .p-datatable-column-header-content [data-pc-section=sort]:after, .vue_paymentGrid .p-datatable-thead .p-datatable-sortable-column[aria-sort=descending] .p-datatable-column-header-content [data-pc-section=sort]:after {
        background-color: #690DD3 !important;
    }

    .vue_paymentGrid .p-datatable-thead .p-datatable-sortable-column[aria-sort=ascending] .p-datatable-column-header-content [data-pc-section=sort]::after {
        transform: translate(-50%, -50%) rotate(0deg);
        display: inline-block;
        width: 17px;
        height: 17px;
        background-color: currentColor;
        background-image: none;
        mask-image: url("../img/sprite.svg#icon-arrow-sort");
    }

.debugUrl .vue_paymentGrid .p-datatable-thead .p-datatable-sortable-column[aria-sort=ascending] .p-datatable-column-header-content [data-pc-section=sort]::after {
    mask-image: url("/Content/themes/novapay/img/sprite.svg#icon-arrow-sort");
}

.vue_paymentGrid .p-datatable-thead .p-datatable-sortable-column[aria-sort=ascending] .p-datatable-column-header-content [data-pc-section=sort]::after {
    mask-repeat: no-repeat;
    mask-size: contain;
}

.vue_paymentGrid .p-datatable-thead .p-datatable-sortable-column[aria-sort=descending] .p-datatable-column-header-content [data-pc-section=sort]::after {
    transform: translate(-50%, -50%) rotate(180deg);
    display: inline-block;
    width: 17px;
    height: 17px;
    background-color: currentColor;
    background-image: none;
    mask-image: url("../img/sprite.svg#icon-arrow-sort");
}

.debugUrl .vue_paymentGrid .p-datatable-thead .p-datatable-sortable-column[aria-sort=descending] .p-datatable-column-header-content [data-pc-section=sort]::after {
    mask-image: url("/Content/themes/novapay/img/sprite.svg#icon-arrow-sort");
}

.vue_paymentGrid .p-datatable-thead .p-datatable-sortable-column[aria-sort=descending] .p-datatable-column-header-content [data-pc-section=sort]::after {
    mask-repeat: no-repeat;
    mask-size: contain;
}

.vue_paymentGrid .p-datatable-thead .p-datatable-sortable-column.col-StatusLight .icon-search {
    display: inline-block;
    width: 14px;
    height: 14px;
    background-color: currentColor;
    background-image: none;
    mask-image: url("../img/sprite.svg#icon-sort-status");
}

.debugUrl .vue_paymentGrid .p-datatable-thead .p-datatable-sortable-column.col-StatusLight .icon-search {
    mask-image: url("/Content/themes/novapay/img/sprite.svg#icon-sort-status");
}

.vue_paymentGrid .p-datatable-thead .p-datatable-sortable-column.col-StatusLight .icon-search {
    mask-repeat: no-repeat;
    mask-size: contain;
}

@media (max-width: 1500px) {
    .vue_paymentGrid .p-datatable-thead .p-datatable-sortable-column.custom-dropdown-open {
        position: relative;
        padding: 0 0.75rem;
    }

        .vue_paymentGrid .p-datatable-thead .p-datatable-sortable-column.custom-dropdown-open .p-datatable-column-header-content {
            width: fit-content;
            padding: 0.25rem 0.5rem;
            border: 1px solid #A8ADB4;
            border-radius: 6px;
            background-color: #DBDFE4;
        }
}

.vue_paymentGrid .p-datatable-thead .p-datatable-popover-filter {
    margin: 0;
}

.vue_paymentGrid .p-datatable-thead .p-datatable-column-filter-button {
    position: relative;
    height: 1.5rem;
    width: 1.5rem;
    padding: 0;
    display: block;
    cursor: pointer;
    border-radius: 0.5rem;
}

    .vue_paymentGrid .p-datatable-thead .p-datatable-column-filter-button:after {
        display: none;
    }

    .vue_paymentGrid .p-datatable-thead .p-datatable-column-filter-button .p-icon {
        display: none;
    }

    .vue_paymentGrid .p-datatable-thead .p-datatable-column-filter-button .icon-search {
        background-color: #767F8A;
        display: inline-block;
        width: 16px;
        height: 16px;
        background-color: currentColor;
        background-image: none;
        mask-image: url("../img/sprite.svg#icon-search");
    }

.debugUrl .vue_paymentGrid .p-datatable-thead .p-datatable-column-filter-button .icon-search {
    mask-image: url("/Content/themes/novapay/img/sprite.svg#icon-search");
}

.vue_paymentGrid .p-datatable-thead .p-datatable-column-filter-button .icon-search {
    mask-repeat: no-repeat;
    mask-size: contain;
}

.vue_paymentGrid .p-datatable-thead .p-datatable-column-filter-button:hover .icon-search {
    background-color: #690DD3;
}

.vue_paymentGrid .p-datatable-thead .p-datatable-column-filter-button[aria-expanded=true] {
    border-radius: 6px;
    border: 1px solid #C39EED;
    background: #F5EDFF;
}

    .vue_paymentGrid .p-datatable-thead .p-datatable-column-filter-button[aria-expanded=true] .icon-search {
        background-color: #690DD3;
    }

    .vue_paymentGrid .p-datatable-thead .p-datatable-column-filter-button[aria-expanded=true]:hover {
        border-radius: 6px;
        border: 1px solid #C39EED;
        background: #F5EDFF;
    }

        .vue_paymentGrid .p-datatable-thead .p-datatable-column-filter-button[aria-expanded=true]:hover .icon-search {
            background-color: #690DD3;
        }

.vue_paymentGrid .p-datatable-thead .p-datatable-column-filter-button:has(.icon-search.icon-search-active) {
    border-radius: 6px;
    border: 1px solid #C39EED;
    background: #E1CFF6;
}

    .vue_paymentGrid .p-datatable-thead .p-datatable-column-filter-button:has(.icon-search.icon-search-active) .icon-search {
        background-color: #690DD3;
    }

@media (max-width: 1200px) {
    .vue_paymentGrid .p-datatable-thead {
        display: none !important;
    }
}

.vue_paymentGrid .p-datatable-thead > tr > td:first-child, .vue_paymentGrid .p-datatable-thead > tr th:first-child,
.vue_paymentGrid .p-datatable-tbody > tr > td:first-child,
.vue_paymentGrid .p-datatable-tbody > tr th:first-child {
    width: 3rem;
}

.vue_paymentGrid .p-datatable-thead > tr > td.col-Created, .vue_paymentGrid .p-datatable-thead > tr th.col-Created,
.vue_paymentGrid .p-datatable-tbody > tr > td.col-Created,
.vue_paymentGrid .p-datatable-tbody > tr th.col-Created {
    width: 10.5rem;
}

@media (min-width: 1640px) {
    .vue_paymentGrid .p-datatable-thead > tr > td.col-Created, .vue_paymentGrid .p-datatable-thead > tr th.col-Created,
    .vue_paymentGrid .p-datatable-tbody > tr > td.col-Created,
    .vue_paymentGrid .p-datatable-tbody > tr th.col-Created {
        width: auto;
    }
}

.vue_paymentGrid .p-datatable-thead > tr > td.col-DebitName, .vue_paymentGrid .p-datatable-thead > tr th.col-DebitName,
.vue_paymentGrid .p-datatable-tbody > tr > td.col-DebitName,
.vue_paymentGrid .p-datatable-tbody > tr th.col-DebitName {
    width: 13.875rem;
}

@media (min-width: 1640px) {
    .vue_paymentGrid .p-datatable-thead > tr > td.col-DebitName, .vue_paymentGrid .p-datatable-thead > tr th.col-DebitName,
    .vue_paymentGrid .p-datatable-tbody > tr > td.col-DebitName,
    .vue_paymentGrid .p-datatable-tbody > tr th.col-DebitName {
        width: auto;
    }
}

.vue_paymentGrid .p-datatable-thead > tr > td.col-CrncyAmount, .vue_paymentGrid .p-datatable-thead > tr th.col-CrncyAmount,
.vue_paymentGrid .p-datatable-tbody > tr > td.col-CrncyAmount,
.vue_paymentGrid .p-datatable-tbody > tr th.col-CrncyAmount {
    width: 16rem;
}

@media (min-width: 1640px) {
    .vue_paymentGrid .p-datatable-thead > tr > td.col-CrncyAmount, .vue_paymentGrid .p-datatable-thead > tr th.col-CrncyAmount,
    .vue_paymentGrid .p-datatable-tbody > tr > td.col-CrncyAmount,
    .vue_paymentGrid .p-datatable-tbody > tr th.col-CrncyAmount {
        width: auto;
    }
}

.vue_paymentGrid .p-datatable-thead > tr > td.col-CreditName, .vue_paymentGrid .p-datatable-thead > tr th.col-CreditName,
.vue_paymentGrid .p-datatable-tbody > tr > td.col-CreditName,
.vue_paymentGrid .p-datatable-tbody > tr th.col-CreditName {
    width: 15.8rem;
}

@media (min-width: 1640px) {
    .vue_paymentGrid .p-datatable-thead > tr > td.col-CreditName, .vue_paymentGrid .p-datatable-thead > tr th.col-CreditName,
    .vue_paymentGrid .p-datatable-tbody > tr > td.col-CreditName,
    .vue_paymentGrid .p-datatable-tbody > tr th.col-CreditName {
        width: auto;
    }
}

.vue_paymentGrid .p-datatable-thead > tr > td,
.vue_paymentGrid .p-datatable-tbody > tr > td {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
}

.vue_paymentGrid .p-datatable-thead .p-checkbox,
.vue_paymentGrid .p-datatable-tbody .p-checkbox {
    height: 1.125rem;
    width: 1.125rem;
}

.vue_paymentGrid .p-datatable-thead .p-checkbox-checked:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box,
.vue_paymentGrid .p-datatable-tbody .p-checkbox-checked:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box {
    border-color: #DBDFE4;
    background: #fff;
}

    .vue_paymentGrid .p-datatable-thead .p-checkbox-checked:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box .p-checkbox-icon,
    .vue_paymentGrid .p-datatable-tbody .p-checkbox-checked:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box .p-checkbox-icon {
        color: transparent;
    }

.vue_paymentGrid .p-datatable-thead .p-checkbox-box,
.vue_paymentGrid .p-datatable-tbody .p-checkbox-box {
    height: 100%;
    width: 100%;
    border: 1px solid #DBDFE4;
    background: #fff;
}

    .vue_paymentGrid .p-datatable-thead .p-checkbox-box .p-checkbox-icon,
    .vue_paymentGrid .p-datatable-tbody .p-checkbox-box .p-checkbox-icon {
        opacity: 1;
        border: 1px solid #690DD3;
        border-radius: 0.25rem;
        background: url("../img/newDesign/icon/ico-checkbox.svg") no-repeat center center;
        transition: opacity 0.42s ease;
        transform: scale(1.35);
        color: transparent;
    }

.debugUrl .vue_paymentGrid .p-datatable-thead .p-checkbox-box .p-checkbox-icon,
.debugUrl .vue_paymentGrid .p-datatable-tbody .p-checkbox-box .p-checkbox-icon {
    background: url("/Content/themes/novapay/img/newDesign/icon/ico-checkbox.svg") no-repeat center/100%;
}

.vue_paymentGrid .p-datatable-thead .p-checkbox-box:hover,
.vue_paymentGrid .p-datatable-tbody .p-checkbox-box:hover {
    border-color: #690DD3;
    background: #fff;
}

.vue_paymentGrid .p-datatable-thead .p-checkbox {
    margin-left: 0.25rem;
}

.vue_paymentGrid .p-datatable-tbody:has(.p-datatable-empty-message) {
    min-height: 25rem;
}

@media (max-width: 1200px) {
    .vue_paymentGrid .p-datatable-tbody:has(.p-datatable-empty-message) {
        grid-template-columns: repeat(1, 1fr);
    }
}

.vue_paymentGrid .p-datatable-tbody .col-Code {
    width: 9.75rem;
}

    .vue_paymentGrid .p-datatable-tbody .col-Code span,
    .vue_paymentGrid .p-datatable-tbody .col-Created span {
        font-size: 14px;
        color: #32383c;
        font-weight: 500;
    }

    .vue_paymentGrid .p-datatable-tbody .col-Code span {
        max-width: 8.5rem;
        display: block;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

@media (max-width: 992px) {
    .vue_paymentGrid .p-datatable-tbody .col-Code span {
        text-align: left;
    }
}

.vue_paymentGrid .p-datatable-tbody .grid-cell .sender-name,
.vue_paymentGrid .p-datatable-tbody .grid-cell .receiver-name {
    max-width: 11.875rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

@media (max-width: 1200px) {
    .vue_paymentGrid .p-datatable-tbody {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        border: none;
        gap: 0.75rem;
        padding-bottom: 1.5rem;
    }

        .vue_paymentGrid .p-datatable-tbody > tr {
            position: relative;
            display: grid;
            grid-template-columns: 38px 1fr;
            gap: 0.5rem;
            padding: 0.5rem;
            border-radius: 0.5rem;
            border: 1px solid #DBDFE4;
        }

            .vue_paymentGrid .p-datatable-tbody > tr > td {
                display: flex;
                align-items: flex-start;
                grid-column: 2;
                border: none;
                width: 100% !important;
                padding: 0;
            }

                .vue_paymentGrid .p-datatable-tbody > tr > td:first-child {
                    width: auto;
                    top: 50%;
                    position: absolute;
                    grid-column: 1;
                    transform: translateY(-50%);
                }

                .vue_paymentGrid .p-datatable-tbody > tr > td:last-child {
                    justify-content: center;
                }

                .vue_paymentGrid .p-datatable-tbody > tr > td .grid-cell__actions {
                    width: 100%;
                }

                .vue_paymentGrid .p-datatable-tbody > tr > td .grid-cell__actions-dropdown.open {
                    height: auto;
                    left: 0;
                    width: 100%;
                    top: 110%;
                    left: 0;
                    width: 100%;
                    transform: translateX(0) scale(1);
                }

        .vue_paymentGrid .p-datatable-tbody .col-Code span {
            overflow: inherit;
        }

        .vue_paymentGrid .p-datatable-tbody .grid-cell .sender-name,
        .vue_paymentGrid .p-datatable-tbody .grid-cell .receiver-name {
            max-width: 100%;
            white-space: pre-wrap;
            overflow: inherit;
        }

        .vue_paymentGrid .p-datatable-tbody .grid-cell .status-pill {
            max-width: 100%;
        }

        .vue_paymentGrid .p-datatable-tbody .grid-cell .payment-status[data-status="95"] {
            max-width: 100%;
        }

        .vue_paymentGrid .p-datatable-tbody .grid-cell__actions {
            position: relative;
            align-items: flex-start;
            margin-top: 0.75rem;
        }

            .vue_paymentGrid .p-datatable-tbody .grid-cell__actions .btn-td__action {
                width: 100%;
                height: 2.5rem;
                border-radius: 0.5rem;
                border: 1px solid #DBDFE4;
                background: transparent;
                font-weight: 500;
            }

                .vue_paymentGrid .p-datatable-tbody .grid-cell__actions .btn-td__action .icon-vertical-dot {
                    color: #DBDFE4;
                }

                .vue_paymentGrid .p-datatable-tbody .grid-cell__actions .btn-td__action:hover .icon-vertical-dot, .vue_paymentGrid .p-datatable-tbody .grid-cell__actions .btn-td__action:active .icon-vertical-dot, .vue_paymentGrid .p-datatable-tbody .grid-cell__actions .btn-td__action:focus .icon-vertical-dot {
                    color: #767F8A;
                }

                .vue_paymentGrid .p-datatable-tbody .grid-cell__actions .btn-td__action span {
                    cursor: pointer;
                    position: relative;
                }

                .vue_paymentGrid .p-datatable-tbody .grid-cell__actions .btn-td__action .content-dot {
                    display: none;
                }

                .vue_paymentGrid .p-datatable-tbody .grid-cell__actions .btn-td__action .content-text {
                    display: block;
                    width: 100%;
                    font-size: 14px;
                    text-align: center;
                    line-height: 1.35;
                }
}

@media (max-width: 768px) {
    .vue_paymentGrid .p-datatable-tbody {
        grid-template-columns: repeat(1, 1fr);
        padding-bottom: 1rem;
    }
}

.vue_paymentGrid .p-datatable-footer {
    padding: 0;
    position: sticky;
    bottom: 0;
}

    .vue_paymentGrid .p-datatable-footer .grid-pagination {
        border-top: none;
    }

    .vue_paymentGrid .p-datatable-footer .footer-actions-container {
        padding-bottom: 0;
        border-bottom: 1px solid #DBDFE4;
    }

.vue_paymentGrid .p-datatable-paginator-bottom {
    display: none;
}

@media (max-width: 1400px) {
    .vue_paymentGrid .p-datatable {
        display: block;
    }

    .vue_paymentGrid .p-datatable-tbody > tr > td:first-child::before {
        display: none;
    }

    .vue_paymentGrid .p-datatable-tbody > tr > td:last-child::before {
        display: none;
    }
}

@media screen and (max-width: 1500px) {
    .vue_paymentGrid .p-datatable-thead .p-sortable-column-icon {
        display: none !important;
    }

    .vue_paymentGrid .p-datatable-filter-column .p-datatable-column-filter-button {
        visibility: hidden;
        width: 0;
        padding: 0;
    }
}

@media (max-width: 1500px) {
    .vue_paymentGrid .p-datatable .p-datatable-sort-icon {
        display: none !important;
    }

    .vue_paymentGrid .p-datatable-column-filter-button {
        opacity: 0 !important;
        visibility: visible !important;
        position: relative !important;
        width: 2rem !important;
        height: 2rem !important;
        pointer-events: auto !important;
        cursor: pointer !important;
        display: inline-flex !important;
    }

    .vue_paymentGrid .p-datatable-filter {
        display: none !important;
        visibility: visible;
    }
}

.vue_ob-infoGrid .p-datatable-thead > tr:not(.p-datatable-empty-message) > td:first-child, .vue_ob-infoGrid .p-datatable-thead > tr:not(.p-datatable-empty-message) th:first-child,
.vue_ob-infoGrid .p-datatable-tbody > tr:not(.p-datatable-empty-message) > td:first-child,
.vue_ob-infoGrid .p-datatable-tbody > tr:not(.p-datatable-empty-message) th:first-child, .vue_ob-paymentsGrid .p-datatable-thead > tr:not(.p-datatable-empty-message) > td:first-child, .vue_ob-paymentsGrid .p-datatable-thead > tr:not(.p-datatable-empty-message) th:first-child,
.vue_ob-paymentsGrid .p-datatable-tbody > tr:not(.p-datatable-empty-message) > td:first-child,
.vue_ob-paymentsGrid .p-datatable-tbody > tr:not(.p-datatable-empty-message) th:first-child {
    display: none;
}

.vue_ob-infoGrid .p-datatable-thead > tr.p-datatable-empty-message,
.vue_ob-infoGrid .p-datatable-tbody > tr.p-datatable-empty-message, .vue_ob-paymentsGrid .p-datatable-thead > tr.p-datatable-empty-message,
.vue_ob-paymentsGrid .p-datatable-tbody > tr.p-datatable-empty-message {
    min-height: 25rem;
}

@media (max-width: 1200px) {
    .vue_ob-infoGrid .p-datatable-thead > tr.p-datatable-empty-message,
    .vue_ob-infoGrid .p-datatable-tbody > tr.p-datatable-empty-message, .vue_ob-paymentsGrid .p-datatable-thead > tr.p-datatable-empty-message,
    .vue_ob-paymentsGrid .p-datatable-tbody > tr.p-datatable-empty-message {
        grid-template-columns: repeat(1, 1fr);
    }
}

.vue_ob-infoGrid .p-datatable-thead .p-checkbox,
.vue_ob-infoGrid .p-datatable-tbody .p-checkbox, .vue_ob-paymentsGrid .p-datatable-thead .p-checkbox,
.vue_ob-paymentsGrid .p-datatable-tbody .p-checkbox {
    display: none;
}

.vue_ob-infoGrid .p-datatable-table-container, .vue_ob-paymentsGrid .p-datatable-table-container {
    border: none;
    border-radius: 0;
}

.vue_ob-infoGrid .p-datatable-thead th.col-Editor, .vue_ob-paymentsGrid .p-datatable-thead th.col-Editor {
    display: none;
}

.vue__global-search {
    position: relative;
    flex: 1;
}

    .vue__global-search .p-inputtext {
        width: 100%;
        max-height: 2.5rem;
        display: flex;
        padding: 0.5rem 0.75rem 0.5rem 2.75rem !important;
        align-items: center;
        border-radius: 0.5rem;
        border: 1px solid #DBDFE4;
        background: #FFF;
        font-size: 15px;
        line-height: 1.5rem;
        color: #32383c;
        box-shadow: none;
        margin-bottom: 0;
    }

        .vue__global-search .p-inputtext:hover {
            caret-color: #690DD3;
            border-color: #690DD3;
        }

        .vue__global-search .p-inputtext:enabled:focus {
            border-color: #690DD3;
        }

        .vue__global-search .p-inputtext::placeholder {
            color: #767F8A;
            font-size: 15px;
            line-height: 1.5rem;
        }

    .vue__global-search .icon-search {
        position: absolute;
        width: 1.125rem;
        height: 1.125rem;
        top: 50%;
        left: 0.75rem;
        background-color: #767F8A;
        transform: translateY(-50%);
    }

    .vue__global-search .btn-search-clear {
        position: absolute;
        width: 1.125rem;
        height: 1.125rem;
        top: 50%;
        right: 0.75rem;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        padding: 0;
        border: none;
        background: transparent;
        cursor: pointer;
        transform: translateY(-50%);
    }

        .vue__global-search .btn-search-clear .icon-clear-input {
            width: 100%;
            height: 100%;
            background-color: #A8ADB4;
        }

.vue__header-actions {
    display: flex;
    gap: 0.75rem;
}

    .vue__header-actions .btn-header-action {
        max-height: 40px;
        gap: 8px;
    }

.p-datatable-filter-overlay {
    border-radius: 1rem;
    border: 1px solid #DBDFE4;
    box-shadow: 0 1.5rem 44px 0 rgba(98, 98, 100, 0.3);
}

    .p-datatable-filter-overlay .filter-icon__search {
        position: absolute;
        width: 1.5rem;
        height: 1.5rem;
        top: 0.5rem;
        left: 0.75rem;
    }

    .p-datatable-filter-overlay .filter-icon__clear {
        position: absolute;
        width: 17.5px;
        height: 17.5px;
        top: 11px;
        right: 0.75rem;
        background: #A8ADB4;
        cursor: pointer;
    }

    .p-datatable-filter-overlay .filter-input,
    .p-datatable-filter-overlay .filter-amount-wrappe .p-inputtext,
    .p-datatable-filter-overlay .p-datatable-filter-rule .p-inputtext,
    .p-datatable-filter-overlay .employee-filter .form-control {
        width: 100%;
        max-height: 2.375rem;
        display: flex;
        padding: 0.5rem 0.75rem 0.5rem 2.75rem;
        align-items: center;
        border-radius: 0.5rem;
        border: 1px solid #DBDFE4;
        background: #FFF;
        font-size: 15px;
        line-height: 1.5rem;
        color: #32383c;
        box-shadow: none;
        margin-bottom: 0.75rem;
    }

        .p-datatable-filter-overlay .filter-input:hover, .p-datatable-filter-overlay .filter-input:focus,
        .p-datatable-filter-overlay .filter-amount-wrappe .p-inputtext:hover,
        .p-datatable-filter-overlay .filter-amount-wrappe .p-inputtext:focus,
        .p-datatable-filter-overlay .p-datatable-filter-rule .p-inputtext:hover,
        .p-datatable-filter-overlay .p-datatable-filter-rule .p-inputtext:focus,
        .p-datatable-filter-overlay .employee-filter .form-control:hover,
        .p-datatable-filter-overlay .employee-filter .form-control:focus {
            border-color: #DBDFE4;
        }

        .p-datatable-filter-overlay .filter-input::placeholder,
        .p-datatable-filter-overlay .filter-amount-wrappe .p-inputtext::placeholder,
        .p-datatable-filter-overlay .p-datatable-filter-rule .p-inputtext::placeholder,
        .p-datatable-filter-overlay .employee-filter .form-control::placeholder {
            color: #767F8A;
            font-size: 15px;
            line-height: 1.5rem;
        }

        .p-datatable-filter-overlay .filter-input.active-input,
        .p-datatable-filter-overlay .filter-amount-wrappe .p-inputtext.active-input,
        .p-datatable-filter-overlay .p-datatable-filter-rule .p-inputtext.active-input,
        .p-datatable-filter-overlay .employee-filter .form-control.active-input {
            padding-right: 2rem;
            border: 1px solid #690DD3;
            caret-color: #690DD3;
        }

    .p-datatable-filter-overlay .p-datatable-filter-rule:not(:has(.filter-icon__search)) .filter-input,
    .p-datatable-filter-overlay .p-datatable-filter-rule:not(:has(.filter-icon__search)) .filter-amount-wrappe .p-inputtext {
        padding-left: 0.75rem;
    }

    .p-datatable-filter-overlay .p-datatable-filter-rule:not(:has(.filter-icon__search)) .p-inputtext {
        padding-left: 0.75rem;
    }

    .p-datatable-filter-overlay .p-invalid {
        border-color: #EB4235 !important;
    }

    .p-datatable-filter-overlay .p-button:disabled {
        opacity: 0.5;
    }

    .p-datatable-filter-overlay .highlight {
        color: #690DD3;
        font-weight: 500;
        background: transparent;
    }

    .p-datatable-filter-overlay .action-block {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: end;
        gap: 0.75rem;
        margin-top: 0.75rem;
    }

        .p-datatable-filter-overlay .action-block:before {
            position: absolute;
            content: "";
            background-color: #DBDFE4;
            width: calc(100% + 24px);
            height: 1px;
            top: -0.75rem;
            left: -0.75rem;
            display: block;
        }

        .p-datatable-filter-overlay .action-block .btn {
            border-radius: 8px;
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 0.5rem 0.75rem;
            text-align: center;
            font-size: 14px;
            font-weight: 500;
            cursor: pointer;
            box-shadow: none;
            height: 2.25rem;
        }

    .p-datatable-filter-overlay .action-block__apply {
        width: 120px;
        line-height: 1.2;
        background-color: #690DD3;
        color: #FFF;
        transition: background-color 0.22s ease-out;
        border: none;
    }

        .p-datatable-filter-overlay .action-block__apply:not(:disabled):hover, .p-datatable-filter-overlay .action-block__apply:not(:disabled):active {
            background-color: #5E1CAB;
            transition: background-color 0.42s ease-out;
            color: #FFF !important;
            border: none;
        }

    .p-datatable-filter-overlay .action-block__clear {
        width: 107px;
        border: 1px solid #DBDFE4;
        background-color: transparent;
        color: #32383c;
    }

        .p-datatable-filter-overlay .action-block__clear:not(:disabled):hover, .p-datatable-filter-overlay .action-block__clear:not(:disabled):active {
            border-color: #A8ADB4;
            color: #32383c;
            background-color: #f4f6f7;
            transition: background-color 0.52s ease-out;
        }

    .p-datatable-filter-overlay .action-block__icon-close {
        width: 10px;
        height: 10px;
    }

    .p-datatable-filter-overlay .filter-list {
        position: relative;
        min-height: 100px;
        max-height: 350px;
        overflow: auto;
    }

    .p-datatable-filter-overlay:has(.filter-code), .p-datatable-filter-overlay:has(.employee-filter) {
        max-width: 300px;
    }

        .p-datatable-filter-overlay:has(.filter-code) .filter-code,
        .p-datatable-filter-overlay:has(.filter-code) .employee-filter, .p-datatable-filter-overlay:has(.employee-filter) .filter-code,
        .p-datatable-filter-overlay:has(.employee-filter) .employee-filter {
            position: relative;
        }

        .p-datatable-filter-overlay:has(.filter-code) .filter-code__loader-container,
        .p-datatable-filter-overlay:has(.filter-code) .employee-filter__loader-container, .p-datatable-filter-overlay:has(.employee-filter) .filter-code__loader-container,
        .p-datatable-filter-overlay:has(.employee-filter) .employee-filter__loader-container {
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 1.25rem 0;
        }

        .p-datatable-filter-overlay:has(.filter-code) .filter-code__empty,
        .p-datatable-filter-overlay:has(.filter-code) .employee-filter__empty, .p-datatable-filter-overlay:has(.employee-filter) .filter-code__empty,
        .p-datatable-filter-overlay:has(.employee-filter) .employee-filter__empty {
            padding: 1rem;
            text-align: center;
            height: 100px;
            display: flex;
            margin: auto;
        }

        .p-datatable-filter-overlay:has(.filter-code) .filter-code__empty-text,
        .p-datatable-filter-overlay:has(.filter-code) .employee-filter__empty-text, .p-datatable-filter-overlay:has(.employee-filter) .filter-code__empty-text,
        .p-datatable-filter-overlay:has(.employee-filter) .employee-filter__empty-text {
            color: #767F8A;
            text-align: center;
            font-size: 1rem;
            font-weight: 500;
            line-height: 1.25rem;
            margin: auto;
        }

        .p-datatable-filter-overlay:has(.filter-code) .filter-code__item,
        .p-datatable-filter-overlay:has(.filter-code) .employee-filter__item, .p-datatable-filter-overlay:has(.employee-filter) .filter-code__item,
        .p-datatable-filter-overlay:has(.employee-filter) .employee-filter__item {
            display: flex;
            align-items: center;
            gap: 0.5rem;
            margin-bottom: 1rem;
        }

            .p-datatable-filter-overlay:has(.filter-code) .filter-code__item label,
            .p-datatable-filter-overlay:has(.filter-code) .employee-filter__item label, .p-datatable-filter-overlay:has(.employee-filter) .filter-code__item label,
            .p-datatable-filter-overlay:has(.employee-filter) .employee-filter__item label {
                color: #32383c;
                font-size: 14px;
                font-weight: 400;
                line-height: 1.125rem;
                overflow-wrap: break-word;
                max-width: 89%;
            }

        .p-datatable-filter-overlay:has(.filter-code) .filter-code .active-input,
        .p-datatable-filter-overlay:has(.filter-code) .employee-filter .active-input, .p-datatable-filter-overlay:has(.employee-filter) .filter-code .active-input,
        .p-datatable-filter-overlay:has(.employee-filter) .employee-filter .active-input {
            border: 1px solid #690DD3;
            caret-color: #690DD3;
        }

        .p-datatable-filter-overlay:has(.filter-code) .filter-code .p-checkbox.p-checkbox-checked .p-checkbox-box,
        .p-datatable-filter-overlay:has(.filter-code) .employee-filter .p-checkbox.p-checkbox-checked .p-checkbox-box, .p-datatable-filter-overlay:has(.employee-filter) .filter-code .p-checkbox.p-checkbox-checked .p-checkbox-box,
        .p-datatable-filter-overlay:has(.employee-filter) .employee-filter .p-checkbox.p-checkbox-checked .p-checkbox-box {
            border-radius: 0.25rem;
            border: 1px solid #690DD3;
            background: #690DD3;
        }

        .p-datatable-filter-overlay:has(.filter-code) .filter-code .p-checkbox-box .p-checkbox-icon,
        .p-datatable-filter-overlay:has(.filter-code) .employee-filter .p-checkbox-box .p-checkbox-icon, .p-datatable-filter-overlay:has(.employee-filter) .filter-code .p-checkbox-box .p-checkbox-icon,
        .p-datatable-filter-overlay:has(.employee-filter) .employee-filter .p-checkbox-box .p-checkbox-icon {
            stroke: white;
            stroke-width: 1.1px;
            stroke-linejoin: round;
            padding: 1px;
        }

    .p-datatable-filter-overlay:has(.filter-amount), .p-datatable-filter-overlay:has(.employee-filter--amount) {
        max-width: 300px;
    }

        .p-datatable-filter-overlay:has(.filter-amount) .filter-amount,
        .p-datatable-filter-overlay:has(.filter-amount) .amount-range, .p-datatable-filter-overlay:has(.employee-filter--amount) .filter-amount,
        .p-datatable-filter-overlay:has(.employee-filter--amount) .amount-range {
            position: relative;
            display: flex;
            gap: 8px;
            align-items: center;
            margin-bottom: 0.75rem;
        }

        .p-datatable-filter-overlay:has(.filter-amount) .filter-amount__icon,
        .p-datatable-filter-overlay:has(.filter-amount) .amount-range__icon, .p-datatable-filter-overlay:has(.employee-filter--amount) .filter-amount__icon,
        .p-datatable-filter-overlay:has(.employee-filter--amount) .amount-range__icon {
            position: absolute;
            width: 1.5rem;
            height: 1.5rem;
            top: 0.5rem;
            left: 0.75rem;
        }

        .p-datatable-filter-overlay:has(.filter-amount) .filter-amount__icon-clear,
        .p-datatable-filter-overlay:has(.filter-amount) .amount-range__icon-clear, .p-datatable-filter-overlay:has(.employee-filter--amount) .filter-amount__icon-clear,
        .p-datatable-filter-overlay:has(.employee-filter--amount) .amount-range__icon-clear {
            position: absolute;
            width: 17.5px;
            height: 17.5px;
            top: 11px;
            right: 0.75rem;
            background: #A8ADB4;
            cursor: pointer;
        }

        .p-datatable-filter-overlay:has(.filter-amount) .filter-amount__line,
        .p-datatable-filter-overlay:has(.filter-amount) .amount-range__line, .p-datatable-filter-overlay:has(.employee-filter--amount) .filter-amount__line,
        .p-datatable-filter-overlay:has(.employee-filter--amount) .amount-range__line {
            width: 100%;
            max-width: 8px;
            height: 1.5px;
            background: #DBDFE4;
        }

    .p-datatable-filter-overlay:has(.filter-recipient), .p-datatable-filter-overlay:has(.filter-sender) {
        max-width: 395px;
    }

        .p-datatable-filter-overlay:has(.filter-recipient) .filter-recipient,
        .p-datatable-filter-overlay:has(.filter-recipient) .filter-sender, .p-datatable-filter-overlay:has(.filter-sender) .filter-recipient,
        .p-datatable-filter-overlay:has(.filter-sender) .filter-sender {
            position: relative;
        }

        .p-datatable-filter-overlay:has(.filter-recipient) .filter-recipient__icon,
        .p-datatable-filter-overlay:has(.filter-recipient) .filter-sender__icon, .p-datatable-filter-overlay:has(.filter-sender) .filter-recipient__icon,
        .p-datatable-filter-overlay:has(.filter-sender) .filter-sender__icon {
            position: absolute;
            width: 1.5rem;
            height: 1.5rem;
            top: 0.5rem;
            left: 0.75rem;
        }

        .p-datatable-filter-overlay:has(.filter-recipient) .filter-recipient__icon-clear,
        .p-datatable-filter-overlay:has(.filter-recipient) .filter-sender__icon-clear, .p-datatable-filter-overlay:has(.filter-sender) .filter-recipient__icon-clear,
        .p-datatable-filter-overlay:has(.filter-sender) .filter-sender__icon-clear {
            position: absolute;
            width: 17.5px;
            height: 17.5px;
            top: 11px;
            right: 0.75rem;
            background: #A8ADB4;
            cursor: pointer;
        }

        .p-datatable-filter-overlay:has(.filter-recipient) .filter-recipient__loader-container,
        .p-datatable-filter-overlay:has(.filter-recipient) .filter-sender__loader-container, .p-datatable-filter-overlay:has(.filter-sender) .filter-recipient__loader-container,
        .p-datatable-filter-overlay:has(.filter-sender) .filter-sender__loader-container {
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 1.25rem 0;
        }

        .p-datatable-filter-overlay:has(.filter-recipient) .filter-recipient__empty,
        .p-datatable-filter-overlay:has(.filter-recipient) .filter-sender__empty, .p-datatable-filter-overlay:has(.filter-sender) .filter-recipient__empty,
        .p-datatable-filter-overlay:has(.filter-sender) .filter-sender__empty {
            padding: 16px;
            text-align: center;
            height: 100px;
            display: flex;
            margin: auto;
        }

        .p-datatable-filter-overlay:has(.filter-recipient) .filter-recipient__empty-text,
        .p-datatable-filter-overlay:has(.filter-recipient) .filter-sender__empty-text, .p-datatable-filter-overlay:has(.filter-sender) .filter-recipient__empty-text,
        .p-datatable-filter-overlay:has(.filter-sender) .filter-sender__empty-text {
            color: #767F8A;
            font-size: 1rem;
            font-style: normal;
            font-weight: 500;
            line-height: 1.25rem;
            margin: auto;
        }

        .p-datatable-filter-overlay:has(.filter-recipient) .filter-recipient__item,
        .p-datatable-filter-overlay:has(.filter-recipient) .filter-sender__item, .p-datatable-filter-overlay:has(.filter-sender) .filter-recipient__item,
        .p-datatable-filter-overlay:has(.filter-sender) .filter-sender__item {
            display: flex;
            align-items: center;
            gap: 0.5rem;
            margin-bottom: 16px;
        }

        .p-datatable-filter-overlay:has(.filter-recipient) .filter-recipient__item-wrap,
        .p-datatable-filter-overlay:has(.filter-recipient) .filter-sender__item-wrap, .p-datatable-filter-overlay:has(.filter-sender) .filter-recipient__item-wrap,
        .p-datatable-filter-overlay:has(.filter-sender) .filter-sender__item-wrap {
            color: #32383c;
            font-size: 14px;
            font-style: normal;
            font-weight: 400;
            line-height: 1.125rem;
        }

        .p-datatable-filter-overlay:has(.filter-recipient) .filter-recipient__item-info,
        .p-datatable-filter-overlay:has(.filter-recipient) .filter-sender__item-info, .p-datatable-filter-overlay:has(.filter-sender) .filter-recipient__item-info,
        .p-datatable-filter-overlay:has(.filter-sender) .filter-sender__item-info {
            display: flex;
            align-items: center;
            color: #767F8A;
            font-size: 12px;
            font-style: normal;
            font-weight: 400;
            line-height: 1rem;
            gap: 17px;
        }

        .p-datatable-filter-overlay:has(.filter-recipient) .filter-recipient__item-iban,
        .p-datatable-filter-overlay:has(.filter-recipient) .filter-sender__item-iban, .p-datatable-filter-overlay:has(.filter-sender) .filter-recipient__item-iban,
        .p-datatable-filter-overlay:has(.filter-sender) .filter-sender__item-iban {
            position: relative;
        }

            .p-datatable-filter-overlay:has(.filter-recipient) .filter-recipient__item-iban::after,
            .p-datatable-filter-overlay:has(.filter-recipient) .filter-sender__item-iban::after, .p-datatable-filter-overlay:has(.filter-sender) .filter-recipient__item-iban::after,
            .p-datatable-filter-overlay:has(.filter-sender) .filter-sender__item-iban::after {
                position: absolute;
                display: block;
                content: "";
                width: 1px;
                height: 8px;
                right: -9.5px;
                top: 4px;
                background: #DBDFE4;
            }

        .p-datatable-filter-overlay:has(.filter-recipient) .filter-recipient .active-input,
        .p-datatable-filter-overlay:has(.filter-recipient) .filter-sender .active-input, .p-datatable-filter-overlay:has(.filter-sender) .filter-recipient .active-input,
        .p-datatable-filter-overlay:has(.filter-sender) .filter-sender .active-input {
            border: 1px solid #690DD3;
            caret-color: #690DD3;
        }

        .p-datatable-filter-overlay:has(.filter-recipient) .filter-recipient .p-checkbox.p-checkbox-checked .p-checkbox-box,
        .p-datatable-filter-overlay:has(.filter-recipient) .filter-sender .p-checkbox.p-checkbox-checked .p-checkbox-box, .p-datatable-filter-overlay:has(.filter-sender) .filter-recipient .p-checkbox.p-checkbox-checked .p-checkbox-box,
        .p-datatable-filter-overlay:has(.filter-sender) .filter-sender .p-checkbox.p-checkbox-checked .p-checkbox-box {
            border-radius: 4px;
            border: 1px solid #690DD3;
            background: #690DD3;
        }

        .p-datatable-filter-overlay:has(.filter-recipient) .filter-recipient .p-checkbox-box .p-checkbox-icon,
        .p-datatable-filter-overlay:has(.filter-recipient) .filter-sender .p-checkbox-box .p-checkbox-icon, .p-datatable-filter-overlay:has(.filter-sender) .filter-recipient .p-checkbox-box .p-checkbox-icon,
        .p-datatable-filter-overlay:has(.filter-sender) .filter-sender .p-checkbox-box .p-checkbox-icon {
            stroke: white;
            stroke-width: 1.1px;
            stroke-linejoin: round;
            padding: 1px;
        }

    .p-datatable-filter-overlay:has(.status-filter) {
        max-width: 265px;
    }

        .p-datatable-filter-overlay:has(.status-filter) .status-filter__item {
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 0.75rem 0.5rem;
            cursor: pointer;
        }

            .p-datatable-filter-overlay:has(.status-filter) .status-filter__item .p-checkbox {
                width: 1.125rem;
                height: 1.125rem;
            }

                .p-datatable-filter-overlay:has(.status-filter) .status-filter__item .p-checkbox .p-checkbox-box {
                    width: 100%;
                    height: 100%;
                }

        .p-datatable-filter-overlay:has(.status-filter) .status-filter__label {
            color: #32383c;
            font-size: 14px;
            font-weight: 400;
            line-height: 1.125rem;
        }

        .p-datatable-filter-overlay:has(.status-filter) .status-filter .p-checkbox.p-checkbox-checked .p-checkbox-box {
            border-radius: 0.25rem;
            border: 1px solid #690DD3;
            background: #690DD3;
        }

        .p-datatable-filter-overlay:has(.status-filter) .status-filter .p-checkbox-box .p-checkbox-icon {
            stroke: white;
            stroke-width: 1.1px;
            stroke-linejoin: round;
            padding: 1px;
        }

.chip-tableGrid {
    margin: 1rem 1.5rem 0;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.chip-tableGrid__wrap {
    margin-top: 2px;
    display: flex;
    gap: 0.5rem;
    flex: 1;
    max-width: calc(100% - 152px);
    transition: max-height 0.7s ease-in-out;
}

.chip-tableGrid__wrap--nowrap {
    flex-wrap: nowrap;
    overflow: hidden;
}

.chip-tableGrid__wrap:not(.chip-tableGrid__wrap--nowrap) {
    flex-wrap: wrap;
    transition: max-height 0.7s ease-in-out;
}

.chip-tableGrid__action-wrap {
    display: flex;
    align-items: center;
    gap: 20px;
}

.chip-tableGrid--expanded {
    overflow: visible;
    max-height: none;
}

.chip-tableGrid__more {
    flex-shrink: 0;
    white-space: nowrap;
    height: 2rem;
    white-space: nowrap;
    display: flex;
    padding: 7px 10px;
    justify-content: center;
    align-items: center;
    gap: 2px;
    color: #5E1CAB;
    font-size: 12px;
    font-style: normal;
    font-weight: 500;
    line-height: 1rem;
    border-radius: 1.5rem;
    border: 1px solid #C39EED;
    background: #FFF;
}

.chip-tableGrid__icon-down {
    background: #5E1CAB;
    width: 15px;
    height: 15px;
}

.chip-tableGrid__icon-down-hide {
    transform: rotate(180deg);
}

.chip-tableGrid__clear-all {
    width: 135px;
    border-radius: 0.5rem;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0.5rem 0.75rem;
    text-align: center;
    font-size: 14px !important;
    font-weight: 500 !important;
    cursor: pointer;
    box-shadow: none;
    height: 2.25rem;
    border: 1px solid #DBDFE4 !important;
    background-color: transparent;
    color: #32383c;
    gap: 8px;
}

    .chip-tableGrid__clear-all:hover, .chip-tableGrid__clear-all:active {
        border-color: #A8ADB4;
        color: #32383c;
        background-color: #f4f6f7;
        transition: background-color 0.52s ease-out;
    }

.chip-tableGrid__icon-close {
    width: 10px;
    height: 10px;
    cursor: pointer;
}

.chip-tableGrid__icon-close-chips {
    width: 10px;
    height: 10px;
    cursor: pointer;
}

.chip-tableGrid .p-chip {
    padding: 7px 10px;
    border-radius: 1.5rem;
    border: 1px solid #DBDFE4;
    background: #F4F6F7;
    display: flex;
    gap: 0.5rem;
}

.chip-tableGrid .p-chip-label {
    max-width: 11.875rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: #32383c;
    font-size: 12px;
    font-weight: 500;
    line-height: 1rem;
}

.signatures-visas {
    margin-top: 32px;
}

.signatures-visas__title {
    margin-bottom: 24px;
    color: #32383c;
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: 20px;
}

.signatures-visas__wrapper {
    position: relative;
}

.signatures-visas__item {
    padding-top: 16px;
    border-bottom: 1px solid #EDEFF1 !important;
}

.signatures-visas__item--error {
    border-left: 6px solid #EB4235 !important;
    padding-left: 6px;
    border-radius: 6px;
    margin-left: -10px;
    border-bottom: solid 1px #EB4235 !important;
    margin-bottom: 10px;
}

.signatures-visas__subtitle {
    color: #464B53 !important;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 18px;
    display: flex;
    align-items: center;
}

.signatures-visas__icon {
    width: 20px;
    height: 20px;
    margin-right: 8px;
}

@media (max-width: 479px) {
    .signatures-visas__date {
        margin-left: 28px;
    }
}

.signatures-visas__row {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
}

@media (max-width: 479px) {
    .signatures-visas__row {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }
}

.signatures-visas__info {
    margin-top: -20px;
    margin-bottom: 24px;
    margin-left: 28px;
    color: #767F8A;
    text-overflow: ellipsis;
    font-family: "Fixel Text", "Fixel Display", "Helvetica", "Arial", sans-serif !important;
    font-size: 14px;
    font-weight: 400;
    line-height: 18px;
}

.signatures-visas__key-id {
    margin: 8px 0 16px;
}

.signatures-visas__system {
    display: flex;
    max-width: 350px;
    gap: 24px;
    align-items: center;
    margin-bottom: 24px;
}

.signatures-visas .label-text {
    color: #767F8A;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 18px;
}

.signatures-visas .errorNotify {
    display: flex;
    align-items: center;
    gap: 8px;
    position: absolute;
    bottom: 0;
    justify-content: center;
    width: 100%;
}

    .signatures-visas .errorNotify p {
        color: #EB4235;
        font-size: 12px;
        font-weight: 600;
    }

.p-toast-top-right.app-notifications-toast {
    display: none;
}

.p-dialog {
    max-width: 35rem;
    width: 100%;
    border: none !important;
    box-shadow: none !important;
    border-radius: 0.75rem !important;
    background-color: #fff !important;
    backface-visibility: hidden !important;
}

    .p-dialog .p-dialog-header {
        padding: 1.25rem 0.875rem 1.25rem 1.25rem;
        align-items: baseline;
    }

    .p-dialog .p-dialog-header-actions button:focus, .p-dialog .p-dialog-header-actions button:hover, .p-dialog .p-dialog-header-actions button:focus-visible {
        background: none !important;
        border: none !important;
        box-shadow: none;
        outline: none;
    }

    .p-dialog .p-dialog-title {
        color: #32383c;
        font-size: 1.25rem !important;
        font-style: normal;
        font-weight: 500 !important;
        line-height: 1.5rem;
    }

    .p-dialog .p-dialog-content {
        padding: 1.25rem 1rem;
        font-weight: normal;
        font-size: 1rem;
        color: #464B53;
        font-family: "Fixel Display";
    }

        .p-dialog .p-dialog-content .p-confirmdialog-message {
            color: #32383c;
            font-size: 15px !important;
            font-weight: 400 !important;
            line-height: 1.5rem;
        }

        .p-dialog .p-dialog-content .p-textarea-group {
            position: relative;
            display: flex;
            flex-direction: column;
        }

        .p-dialog .p-dialog-content .p-textarea-group-label {
            color: #767F8A;
            font-size: 12px;
            font-style: normal;
            font-weight: 500;
            line-height: 1rem;
            margin-bottom: 0.5rem;
        }

        .p-dialog .p-dialog-content .p-textarea-group-label-impotent {
            color: #EB4235;
        }

        .p-dialog .p-dialog-content .p-textarea-group .textarea-form {
            position: relative;
            width: 100%;
            padding: 8px 12px;
            border-radius: 8px;
            border: 1px solid #DBDFE4;
            background: #FFF;
            resize: none;
            height: 88px;
            font-size: 15px;
            font-style: normal;
            font-weight: 400;
            line-height: 24px;
        }

            .p-dialog .p-dialog-content .p-textarea-group .textarea-form::placeholder {
                color: #767F8A;
                font-size: 15px;
                font-style: normal;
                font-weight: 400;
                line-height: 24px;
            }

        .p-dialog .p-dialog-content .p-textarea-group .textarea-counter {
            position: absolute;
            bottom: 8px;
            right: 12px;
            color: #767F8A;
            font-size: 12px;
            font-style: normal;
            font-weight: 400;
        }

        .p-dialog .p-dialog-content li {
            list-style: none;
        }

    .p-dialog .p-dialog-footer {
        padding: 1.25rem !important;
        position: relative;
        gap: 1rem !important;
    }

        .p-dialog .p-dialog-footer:before {
            content: "";
            position: absolute;
            width: 100%;
            height: 1px;
            background: #DBDFE4;
            top: 0;
            left: 0;
        }

        .p-dialog .p-dialog-footer .p-button {
            border-radius: 0.5rem;
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 0.5rem 0.75rem;
            text-align: center;
            font-size: 14px;
            font-weight: 500;
            cursor: pointer;
            box-shadow: none;
            height: 2.25rem;
        }

        .p-dialog .p-dialog-footer .p-uni-dialog__actions {
            justify-content: space-between;
            width: 100%;
        }

        .p-dialog .p-dialog-footer .p-uni-dialog__btn--cancel {
            border: 1px solid #DBDFE4;
            background-color: transparent;
            color: #32383c;
        }

            .p-dialog .p-dialog-footer .p-uni-dialog__btn--cancel:hover, .p-dialog .p-dialog-footer .p-uni-dialog__btn--cancel:active {
                border-color: #A8ADB4;
                color: #32383c;
                background-color: #f4f6f7;
                transition: background-color 0.52s ease-out;
            }

    .p-dialog .p-confirmdialog-accept-button, .p-dialog .p-button-danger {
        border: 1px solid #EB4235 !important;
        background-color: #FFF4F3 !important;
        color: #EB4235 !important;
    }

        .p-dialog .p-confirmdialog-accept-button:active, .p-dialog .p-confirmdialog-accept-button:hover, .p-dialog .p-confirmdialog-accept-button:focus, .p-dialog .p-button-danger:active, .p-dialog .p-button-danger:hover, .p-dialog .p-button-danger:focus {
            color: #EB4235 !important;
            background: #FFEBEA !important;
            transition: background-color 0.42s ease-out;
        }

    .p-dialog .p-confirmdialog-reject-button {
        width: 6.063rem;
        border: 1px solid #DBDFE4 !important;
        background: transparent !important;
        color: #32383c !important;
    }

        .p-dialog .p-confirmdialog-reject-button:hover, .p-dialog .p-confirmdialog-reject-button:active {
            border-color: #A8ADB4 !important;
            color: #32383c !important;
            background: #f4f6f7 !important;
            transition: background-color 0.52s ease-out;
        }

    .p-dialog.p-close-dialog, .p-dialog.p-confirmdialog {
        max-width: 35rem;
        border: 1px solid #DBDFE4 !important;
        box-shadow: 0 0.25rem 0.625rem rgba(0, 0, 0, 0.3) !important;
    }

        .p-dialog.p-close-dialog .p-dialog-header, .p-dialog.p-confirmdialog .p-dialog-header {
            padding: 1.25rem 0.875rem 1.25rem 1.25rem;
            align-items: baseline;
        }

        .p-dialog.p-close-dialog .p-dialog-header-actions button:focus, .p-dialog.p-close-dialog .p-dialog-header-actions button:hover, .p-dialog.p-close-dialog .p-dialog-header-actions button:focus-visible, .p-dialog.p-confirmdialog .p-dialog-header-actions button:focus, .p-dialog.p-confirmdialog .p-dialog-header-actions button:hover, .p-dialog.p-confirmdialog .p-dialog-header-actions button:focus-visible {
            outline: none;
            background: none !important;
            border: none !important;
        }

        .p-dialog.p-close-dialog .p-dialog-content, .p-dialog.p-confirmdialog .p-dialog-content {
            padding: 0 1.25rem 1.25rem;
        }

            .p-dialog.p-close-dialog .p-dialog-content:has(.popup-calendar-new.is-open), .p-dialog.p-confirmdialog .p-dialog-content:has(.popup-calendar-new.is-open) {
                display: none;
            }

        .p-dialog.p-close-dialog .p-close-dialog .p-dialog-header, .p-dialog.p-close-dialog .p-close-dialog__description, .p-dialog.p-confirmdialog .p-close-dialog .p-dialog-header, .p-dialog.p-confirmdialog .p-close-dialog__description {
            font-family: "Fixel Text", "Fixel Display", "Helvetica", "Arial", sans-serif;
            font-style: normal;
        }

        .p-dialog.p-close-dialog .p-close-dialog .p-dialog-header, .p-dialog.p-confirmdialog .p-close-dialog .p-dialog-header {
            color: #32383c;
            font-size: 1.25rem;
            font-weight: 600;
            line-height: 1.5rem;
        }

        .p-dialog.p-close-dialog .p-close-dialog__description, .p-dialog.p-confirmdialog .p-close-dialog__description {
            color: #464B53;
            font-size: 16px;
            font-weight: 400;
            line-height: 1.25rem;
        }

        .p-dialog.p-close-dialog .p-close-dialog .p-dialog-footer, .p-dialog.p-confirmdialog .p-close-dialog .p-dialog-footer {
            padding: 1.25rem 1.25rem 1rem;
            position: relative;
        }

            .p-dialog.p-close-dialog .p-close-dialog .p-dialog-footer:before, .p-dialog.p-confirmdialog .p-close-dialog .p-dialog-footer:before {
                content: "";
                position: absolute;
                width: 100%;
                height: 1px;
                background: #DBDFE4;
                top: 0;
                left: 0;
            }

        .p-dialog.p-close-dialog .p-close-dialog__actions, .p-dialog.p-confirmdialog .p-close-dialog__actions {
            display: flex;
            align-items: center;
            gap: 1rem;
        }

            .p-dialog.p-close-dialog .p-close-dialog__actions button, .p-dialog.p-confirmdialog .p-close-dialog__actions button {
                height: 2.25rem;
            }

    .p-dialog:has(.popup-calendar-new.is-open) {
        min-height: 30.438rem;
    }

@media (max-width: 580px) {
    .p-dialog:has(.popup-calendar-new.is-open) {
        min-height: 50rem;
    }
}

.p-dialog.extracts-dialog {
    max-width: 46.25rem !important;
    height: 85%;
    transform-style: preserve-3d;
    will-change: transform;
}

@media (max-width: 768px) {
    .p-dialog.extracts-dialog {
        min-width: 1rem;
        max-width: 22rem;
        width: 100%;
        height: fit-content;
    }
}

.p-dialog.extracts-dialog .p-dialog-header {
    padding-bottom: 0;
}

    .p-dialog.extracts-dialog .p-dialog-header .p-dialog-title {
        font-size: 1.5rem;
        font-weight: 600;
        line-height: 1.2;
    }

.p-dialog.extracts-dialog .p-dialog-content {
    padding: 0;
}

.p-dialog.extracts-dialog .modal-extract {
    border-radius: 0.75rem;
    backface-visibility: hidden;
    transform-style: preserve-3d;
    will-change: transform;
}

.p-dialog.extracts-dialog .p-multiselect-header {
    flex-direction: column-reverse;
    align-items: baseline;
    gap: 0.75rem;
}

    .p-dialog.extracts-dialog .p-multiselect-header .p-multiselect-filter-container {
        width: 100%;
    }

    .p-dialog.extracts-dialog .p-multiselect-header .p-checkbox-checked:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box {
        border-color: #DBDFE4;
        background: #fff;
    }

        .p-dialog.extracts-dialog .p-multiselect-header .p-checkbox-checked:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box .p-checkbox-icon {
            color: transparent;
        }

    .p-dialog.extracts-dialog .p-multiselect-header .p-checkbox-box {
        height: 1.125rem;
        width: 1.125rem;
        margin-left: 0;
        border: 1px solid #DBDFE4;
        background: #fff;
        border-radius: 0.25rem;
    }

        .p-dialog.extracts-dialog .p-multiselect-header .p-checkbox-box .p-checkbox-icon {
            opacity: 1;
            border: 1px solid #690DD3;
            border-radius: 0.25rem;
            background: url("../img/newDesign/icon/ico-checkbox.svg") no-repeat center center;
            transition: opacity 0.42s ease;
            transform: scale(1.16);
            color: transparent;
            stroke: transparent;
        }

.debugUrl .p-dialog.extracts-dialog .p-multiselect-header .p-checkbox-box .p-checkbox-icon {
    background: url("/Content/themes/novapay/img/newDesign/icon/ico-checkbox.svg") no-repeat center/100%;
}

.p-dialog.extracts-dialog .p-multiselect-header .p-checkbox-box:hover {
    border-color: #690DD3;
    background: #fff;
}

.p-dialog.extracts-dialog .p-multiselect-header [data-pc-name=pcheadercheckbox]::after {
    content: "Усі";
    margin-left: 6px;
}

.p-dialog.extracts-dialog .p-multiselect-header .p-inputicon .ico-n {
    top: 50%;
    transform: translateY(-50%);
}

.p-dialog.modal-extract__confirmations-email-dialog, .p-dialog.modal-extract__error-dialog, .p-dialog.modal-extract__loading-dialog {
    transform-style: preserve-3d;
    will-change: transform;
    min-width: 25rem;
}

    .p-dialog.modal-extract__error-dialog .p-dialog-header,
    .p-dialog.modal-extract__error-dialog .p-dialog-content, .p-dialog.modal-extract__loading-dialog .p-dialog-header,
    .p-dialog.modal-extract__loading-dialog .p-dialog-content {
        padding: 0;
    }

    .p-dialog.modal-extract__confirmations-email-dialog .p-dialog-header {
        padding: 1rem 1rem 0 1rem;
    }

    .p-dialog.modal-extract__confirmations-email-dialog .p-dialog-content {
        padding: 0 1rem 1rem 1rem;
        position: relative;
        display: flex;
        flex-direction: column;
        gap: 0.25rem;
        height: 100%;
    }

.p-dialog.modal-directories-recipients {
    max-width: 924px !important;
    transform-style: preserve-3d;
    will-change: transform;
    position: relative;
}

    .p-dialog.modal-directories-recipients .spiner-loader {
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        width: 100%;
        z-index: 10000;
        background: rgba(255, 255, 255, 0.6);
        backdrop-filter: blur(4px);
    }

        .p-dialog.modal-directories-recipients .spiner-loader:before {
            position: absolute;
            content: "";
            display: block;
            top: 50%;
            left: calc(50% - 25px);
            width: 50px;
            height: 50px;
            background: url("../img/newDesign/spinner-loading.png") no-repeat center;
            animation: rotate 1s linear infinite;
            transform: translate(-50%, -50%);
        }

.debugUrl .p-dialog.modal-directories-recipients .spiner-loader:before {
    background: url("/Content/themes/novapay/img/newDesign/spinner-loading.png") no-repeat center;
}

@media (max-width: 576px) {
    .p-dialog.modal-directories-recipients {
        transform: translate(0%, -100%) !important;
    }

        .p-dialog.modal-directories-recipients .directory-recipients__card-left .directory-recipients__table-column {
            width: 64px;
        }
}

@media (max-width: 768px) {
    .p-dialog.modal-directories-recipients {
        min-width: 1rem;
        max-width: 100%;
        width: 100%;
        height: fit-content;
    }
}

.p-dialog.modal-directories-recipients .p-dialog-header {
    border-bottom: 1px solid #DBDFE4;
}

.p-dialog.modal-directories-recipients .p-dialog-content {
    padding-top: 8px;
}

.p-dialog.modal-directories-recipients .directory-recipients__section-inputs {
    padding-left: 0;
    padding-right: 0;
}

.p-dialog.modal-directories-recipients .directory-recipients__table-body, .p-dialog.modal-directories-recipients .directory-recipients__table {
    max-height: 100%;
    height: 100%;
}

.p-dialog.modal-directories-recipients .directory-recipients__empty-container {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.p-dialog.modal-directories-recipients .directory-recipients__empty-image,
.p-dialog.modal-directories-recipients .directory-recipients .no-employees__text {
    margin: auto;
}

    .p-dialog.modal-directories-recipients .directory-recipients__empty-image span,
    .p-dialog.modal-directories-recipients .directory-recipients .no-employees__text span {
        font-size: 16px;
    }

.p-dialog.modal-directories-recipients .directory-recipients__table-empty {
    height: 270px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.p-dialog.modal-directories-recipients .directory-recipients__table {
    padding-bottom: 0.2rem;
}

    .p-dialog.modal-directories-recipients .directory-recipients__table .p-datatable-table-container {
        max-height: 340px;
    }

.p-dialog.modal-directories-recipients .directory-recipients__table-column {
    word-break: break-all;
    max-width: 300px;
}

@media (max-width: 768px) {
    .p-dialog.modal-directories-recipients .directory-recipients__card {
        display: block !important;
        margin-bottom: 20px;
        max-height: 388px;
        overflow-y: scroll;
    }

    .p-dialog.modal-directories-recipients .directory-recipients__card-item {
        border: 1px solid #DBDFE4;
        border-radius: 8px;
        padding: 12px 12px 0px;
        margin-bottom: 12px;
    }

    .p-dialog.modal-directories-recipients .directory-recipients__card-row {
        display: flex;
        position: relative;
        align-items: center;
        gap: 10px;
        width: 100%;
        padding: 8px 0;
    }

        .p-dialog.modal-directories-recipients .directory-recipients__card-row p {
            font-size: 14px;
        }

        .p-dialog.modal-directories-recipients .directory-recipients__card-row::after {
            position: absolute;
            content: "";
            bottom: 0;
            height: 1px;
            left: -12px;
            width: calc(100% + 24px);
            background: #DBDFE4;
        }

        .p-dialog.modal-directories-recipients .directory-recipients__card-row:last-child::after {
            display: none;
        }

        .p-dialog.modal-directories-recipients .directory-recipients__card-row button {
            margin: auto;
        }

    .p-dialog.modal-directories-recipients .directory-recipients__card-left {
        width: 130px;
    }
}

.p-dialog.modal-directories-recipients .directory-recipients__table-row {
    padding-left: 0.25rem;
}

.p-dialog.modal-directories-recipients .directory-recipients__label {
    color: #767F8A;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 16px;
}

.p-dialog.modal-directories-recipients .directory-recipients #vue_taxRecipientClientDropdown .vue__dropdown-block .vue-dropdown-wrapper .p-select-label {
    color: #767F8A !important;
    flex: 1;
    border-color: transparent;
    text-align: left;
    font-size: 15px;
    font-style: normal;
    font-weight: 400;
    line-height: 1.5rem;
}

.p-dialog.modal-directories-recipients .directory-recipients__footer {
    padding: 12px 20px 0px 0;
}

.p-dialog.modal-directories-recipients .directory-recipients__footer-pages {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.p-dialog.modal-postpaid {
    min-width: 23rem;
    width: auto;
    transform-style: preserve-3d;
    will-change: transform;
}

.p-close-dialog,
.p-uni-dialog {
    min-width: 30rem;
    font-family: "Fixel Text", "Fixel Display", "Helvetica", "Arial", sans-serif;
}

.p-close-dialog__actions,
.p-uni-dialog__actions {
    display: flex;
    gap: 1rem;
}

.p-close-dialog .importantTextBlack,
.p-uni-dialog .importantTextBlack {
    color: #464B53;
    font-weight: 600;
}

.p-close-dialog .p-dialog-header-actions button:focus, .p-close-dialog .p-dialog-header-actions button:hover, .p-close-dialog .p-dialog-header-actions button:focus-visible,
.p-uni-dialog .p-dialog-header-actions button:focus,
.p-uni-dialog .p-dialog-header-actions button:hover,
.p-uni-dialog .p-dialog-header-actions button:focus-visible {
    background: none !important;
    border: none !important;
    box-shadow: none;
    outline: none;
}

.p-close-dialog__actions {
    display: flex;
    gap: 1rem;
    width: 100%;
    justify-content: space-between;
}

.p-uni-dialog--confirm.p-dialog {
    max-width: 35rem;
    width: 100%;
    border: none !important;
    box-shadow: none !important;
}

    .p-uni-dialog--confirm.p-dialog .p-dialog-header {
        position: relative;
        padding: 1rem 0.875rem 1rem 1rem;
        align-items: baseline;
    }

    .p-uni-dialog--confirm.p-dialog .p-dialog-header-actions button:focus, .p-uni-dialog--confirm.p-dialog .p-dialog-header-actions button:hover, .p-uni-dialog--confirm.p-dialog .p-dialog-header-actions button:focus-visible {
        background: none !important;
        border: none !important;
        box-shadow: none;
        outline: none;
    }

    .p-uni-dialog--confirm.p-dialog .p-dialog-header:before {
        content: "";
        position: absolute;
        width: 100%;
        height: 1px;
        background: #DBDFE4;
        bottom: 0;
        left: 0;
    }

    .p-uni-dialog--confirm.p-dialog .p-dialog-title {
        color: #32383c;
        font-size: 1.25rem !important;
        font-style: normal;
        font-weight: 500 !important;
        line-height: 1.5rem;
    }

    .p-uni-dialog--confirm.p-dialog .p-dialog-content {
        padding: 1.25rem 1rem;
        font-weight: normal;
        font-size: 1rem;
        color: #464B53;
    }

        .p-uni-dialog--confirm.p-dialog .p-dialog-content .p-confirmdialog-message {
            color: #32383c;
            font-size: 15px !important;
            font-weight: 400 !important;
            line-height: 1.5rem;
        }

        .p-uni-dialog--confirm.p-dialog .p-dialog-content .p-textarea-group {
            position: relative;
            display: flex;
            flex-direction: column;
        }

        .p-uni-dialog--confirm.p-dialog .p-dialog-content .p-textarea-group-label {
            color: #767F8A;
            font-size: 12px;
            font-style: normal;
            font-weight: 500;
            line-height: 1rem;
            margin-bottom: 0.5rem;
        }

        .p-uni-dialog--confirm.p-dialog .p-dialog-content .p-textarea-group-label-impotent {
            color: #EB4235;
        }

        .p-uni-dialog--confirm.p-dialog .p-dialog-content .p-textarea-group .textarea-form {
            position: relative;
            width: 100%;
            padding: 8px 12px;
            border-radius: 8px;
            border: 1px solid #DBDFE4;
            background: #FFF;
            resize: none;
            height: 88px;
            font-size: 15px;
            font-style: normal;
            font-weight: 400;
            line-height: 24px;
        }

            .p-uni-dialog--confirm.p-dialog .p-dialog-content .p-textarea-group .textarea-form::placeholder {
                color: #767F8A;
                font-size: 15px;
                font-style: normal;
                font-weight: 400;
                line-height: 24px;
            }

        .p-uni-dialog--confirm.p-dialog .p-dialog-content .p-textarea-group .textarea-counter {
            position: absolute;
            bottom: 8px;
            right: 12px;
            color: #767F8A;
            font-size: 12px;
            font-style: normal;
            font-weight: 400;
        }

        .p-uni-dialog--confirm.p-dialog .p-dialog-content li {
            list-style: none;
        }

    .p-uni-dialog--confirm.p-dialog .p-dialog-footer {
        padding: 1.25rem !important;
        position: relative;
        gap: 1rem !important;
    }

        .p-uni-dialog--confirm.p-dialog .p-dialog-footer:before {
            content: "";
            position: absolute;
            width: 100%;
            height: 1px;
            background: #DBDFE4;
            top: 0;
            left: 0;
        }

        .p-uni-dialog--confirm.p-dialog .p-dialog-footer .p-button {
            border-radius: 0.5rem;
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 0.5rem 0.75rem;
            text-align: center;
            font-size: 14px;
            font-weight: 500;
            cursor: pointer;
            box-shadow: none;
            height: 2.25rem;
        }

        .p-uni-dialog--confirm.p-dialog .p-dialog-footer .p-uni-dialog__actions {
            justify-content: space-between;
            width: 100%;
        }

        .p-uni-dialog--confirm.p-dialog .p-dialog-footer .p-uni-dialog__btn--cancel {
            border: 1px solid #DBDFE4;
            background-color: transparent;
            color: #32383c;
        }

            .p-uni-dialog--confirm.p-dialog .p-dialog-footer .p-uni-dialog__btn--cancel:hover, .p-uni-dialog--confirm.p-dialog .p-dialog-footer .p-uni-dialog__btn--cancel:active {
                border-color: #A8ADB4;
                color: #32383c;
                background-color: #f4f6f7;
                transition: background-color 0.52s ease-out;
            }

    .p-uni-dialog--confirm.p-dialog .p-confirmdialog-accept-button, .p-uni-dialog--confirm.p-dialog .p-button-danger {
        border: 1px solid #EB4235 !important;
        background-color: #FFF4F3 !important;
        color: #EB4235 !important;
    }

        .p-uni-dialog--confirm.p-dialog .p-confirmdialog-accept-button:active, .p-uni-dialog--confirm.p-dialog .p-confirmdialog-accept-button:hover, .p-uni-dialog--confirm.p-dialog .p-confirmdialog-accept-button:focus, .p-uni-dialog--confirm.p-dialog .p-button-danger:active, .p-uni-dialog--confirm.p-dialog .p-button-danger:hover, .p-uni-dialog--confirm.p-dialog .p-button-danger:focus {
            color: #EB4235 !important;
            background: #FFEBEA !important;
            transition: background-color 0.42s ease-out;
        }

    .p-uni-dialog--confirm.p-dialog .p-confirmdialog-reject-button {
        width: 6.063rem;
        border: 1px solid #DBDFE4 !important;
        background: transparent !important;
        color: #32383c !important;
    }

        .p-uni-dialog--confirm.p-dialog .p-confirmdialog-reject-button:hover, .p-uni-dialog--confirm.p-dialog .p-confirmdialog-reject-button:active {
            border-color: #A8ADB4 !important;
            color: #32383c !important;
            background: #f4f6f7 !important;
            transition: background-color 0.52s ease-out;
        }

    .p-uni-dialog--confirm.p-dialog.p-close-dialog, .p-uni-dialog--confirm.p-dialog.p-confirmdialog {
        max-width: 35rem;
        border: 1px solid #DBDFE4 !important;
        background: #FFF;
        box-shadow: 0 0.25rem 0.625rem rgba(0, 0, 0, 0.3) !important;
        border-radius: 0.75rem;
    }

        .p-uni-dialog--confirm.p-dialog.p-close-dialog .p-dialog-header, .p-uni-dialog--confirm.p-dialog.p-confirmdialog .p-dialog-header {
            padding: 1.25rem 0.875rem 1.25rem 1.25rem;
            align-items: baseline;
        }

        .p-uni-dialog--confirm.p-dialog.p-close-dialog .p-dialog-header-actions button:focus, .p-uni-dialog--confirm.p-dialog.p-close-dialog .p-dialog-header-actions button:hover, .p-uni-dialog--confirm.p-dialog.p-close-dialog .p-dialog-header-actions button:focus-visible, .p-uni-dialog--confirm.p-dialog.p-confirmdialog .p-dialog-header-actions button:focus, .p-uni-dialog--confirm.p-dialog.p-confirmdialog .p-dialog-header-actions button:hover, .p-uni-dialog--confirm.p-dialog.p-confirmdialog .p-dialog-header-actions button:focus-visible {
            outline: none;
            background: none !important;
            border: none !important;
        }

        .p-uni-dialog--confirm.p-dialog.p-close-dialog .p-dialog-content, .p-uni-dialog--confirm.p-dialog.p-confirmdialog .p-dialog-content {
            padding: 0 1.25rem 1.25rem;
        }

            .p-uni-dialog--confirm.p-dialog.p-close-dialog .p-dialog-content:has(.popup-calendar-new.is-open), .p-uni-dialog--confirm.p-dialog.p-confirmdialog .p-dialog-content:has(.popup-calendar-new.is-open) {
                display: none;
            }

        .p-uni-dialog--confirm.p-dialog.p-close-dialog .p-close-dialog .p-dialog-header, .p-uni-dialog--confirm.p-dialog.p-close-dialog .p-close-dialog__description, .p-uni-dialog--confirm.p-dialog.p-confirmdialog .p-close-dialog .p-dialog-header, .p-uni-dialog--confirm.p-dialog.p-confirmdialog .p-close-dialog__description {
            font-family: "Fixel Text", "Fixel Display", "Helvetica", "Arial", sans-serif;
            font-style: normal;
        }

        .p-uni-dialog--confirm.p-dialog.p-close-dialog .p-close-dialog .p-dialog-header, .p-uni-dialog--confirm.p-dialog.p-confirmdialog .p-close-dialog .p-dialog-header {
            color: #32383c;
            font-size: 1.25rem;
            font-weight: 600;
            line-height: 1.5rem;
        }

        .p-uni-dialog--confirm.p-dialog.p-close-dialog .p-close-dialog__description, .p-uni-dialog--confirm.p-dialog.p-confirmdialog .p-close-dialog__description {
            color: #464B53;
            font-size: 16px;
            font-weight: 400;
            line-height: 1.25rem;
        }

        .p-uni-dialog--confirm.p-dialog.p-close-dialog .p-close-dialog .p-dialog-footer, .p-uni-dialog--confirm.p-dialog.p-confirmdialog .p-close-dialog .p-dialog-footer {
            padding: 1.25rem 1.25rem 1rem;
            position: relative;
        }

            .p-uni-dialog--confirm.p-dialog.p-close-dialog .p-close-dialog .p-dialog-footer:before, .p-uni-dialog--confirm.p-dialog.p-confirmdialog .p-close-dialog .p-dialog-footer:before {
                content: "";
                position: absolute;
                width: 100%;
                height: 1px;
                background: #DBDFE4;
                top: 0;
                left: 0;
            }

        .p-uni-dialog--confirm.p-dialog.p-close-dialog .p-close-dialog__actions, .p-uni-dialog--confirm.p-dialog.p-confirmdialog .p-close-dialog__actions {
            display: flex;
            align-items: center;
            gap: 1rem;
        }

            .p-uni-dialog--confirm.p-dialog.p-close-dialog .p-close-dialog__actions button, .p-uni-dialog--confirm.p-dialog.p-confirmdialog .p-close-dialog__actions button {
                height: 2.25rem;
            }

    .p-uni-dialog--confirm.p-dialog:has(.popup-calendar-new.is-open) {
        min-height: 30.438rem;
    }

@media (max-width: 580px) {
    .p-uni-dialog--confirm.p-dialog:has(.popup-calendar-new.is-open) {
        min-height: 50rem;
    }
}

.p-uni-dialog--confirm.p-uni-dialog--create-payments .p-checkbox-label {
    margin-top: 1rem;
}

.p-uni-dialog--confirm.p-uni-dialog--create-payments .btn {
    width: 50%;
}

.p-dialog-mask {
    background: rgba(32, 36, 39, 0.5) !important;
}

    .p-dialog-mask:has(.extracts-dialog) {
        z-index: 1100 !important;
        perspective: 100rem;
    }

.p-dialog:has(.popup-calendar-new.is-open) .p-dialog-header {
    display: none !important;
}

.spiner-loader {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    z-index: 10000;
    background: rgba(255, 255, 255, 0.6);
    backdrop-filter: blur(4px);
    border-radius: 25px;
}

    .spiner-loader:before {
        position: absolute;
        content: "";
        display: block;
        top: 50%;
        left: calc(50% - 25px);
        width: 50px;
        height: 50px;
        background: url("../img/newDesign/spinner-loading.png") no-repeat center;
        animation: rotate 1s linear infinite;
        transform: translate(-50%, -50%);
    }

.debugUrl .spiner-loader:before {
    background: url("/Content/themes/novapay/img/newDesign/spinner-loading.png") no-repeat center;
}

.p-tablist .p-tablist-tab-list {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    border: none;
}

.tab-swich .ptr-header__top-swich-btn,
.tab-swich .p-tab {
    position: relative;
    cursor: pointer;
    color: #767F8A;
    font-size: 1rem;
    font-weight: 500;
    line-height: 1.25rem;
    padding: 0.625rem 0.25rem;
    border: none;
}

    .tab-swich .ptr-header__top-swich-btn::after,
    .tab-swich .p-tab::after {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        height: 2px;
        transform: scaleX(0);
        border-radius: 0.25rem 0.25rem 0 0;
        transition: transform 0.2s ease;
        background: #690DD3;
    }

    .tab-swich .ptr-header__top-swich-btn input,
    .tab-swich .p-tab input {
        display: none;
    }

    .tab-swich .ptr-header__top-swich-btn.p-tab-active,
    .tab-swich .p-tab.p-tab-active {
        color: #690DD3;
    }

        .tab-swich .ptr-header__top-swich-btn.p-tab-active::after,
        .tab-swich .p-tab.p-tab-active::after {
            transform: scaleX(1);
        }

    .tab-swich .ptr-header__top-swich-btn:hover,
    .tab-swich .p-tab:hover {
        color: #690DD3;
    }

.tab-btn-type .p-tab {
    cursor: pointer;
    height: 2.25rem;
    width: 6.563rem;
    padding: 0.5rem 0.75rem;
    border-radius: 0.5rem;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.125rem;
    border: 1px solid #690DD3;
    background-color: #fff;
    color: #690DD3;
}

    .tab-btn-type .p-tab:hover {
        border-color: rgb(51.0416666667%, 13.1915266106%, 94.6516106443%);
        color: rgb(31.8014705882%, 3.93732493%, 63.9058123249%);
        background-color: #F5EDFF;
        transition: background-color 0.42s ease-out;
    }

    .tab-btn-type .p-tab:active {
        border-color: rgb(31.8014705882%, 3.93732493%, 63.9058123249%);
        color: rgb(31.8014705882%, 3.93732493%, 63.9058123249%);
        transition: background-color 0.42s ease-out;
    }

    .tab-btn-type .p-tab[data-p-active=true] {
        background-color: #f5edff;
        transition: background-color 0.42s ease-out;
        border: 1px solid #5E1CAB;
        color: #5E1CAB;
    }