/* Minification failed. Returning unminified contents.
(2,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(3,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(4,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(5,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(7,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(8,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(9,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(10,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(11,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(12,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(13,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(14,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(15,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(16,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(17,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(18,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(19,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(20,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(21,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(22,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(23,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(24,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(25,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(26,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(27,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(28,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(29,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(30,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(31,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(32,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(34,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(35,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(36,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(38,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(39,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(40,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(42,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(43,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(44,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(45,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(46,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(47,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(48,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(49,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(50,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(56,28): run-time error CSS1039: Token not allowed after unary operator: '-mf-gray-lighter'
(113,17): run-time error CSS1039: Token not allowed after unary operator: '-mf-primary'
(128,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(132,32): run-time error CSS1039: Token not allowed after unary operator: '-mf-gray-border'
(140,17): run-time error CSS1039: Token not allowed after unary operator: '-mf-gray-dark'
(152,17): run-time error CSS1039: Token not allowed after unary operator: '-mf-darker-shade'
(159,17): run-time error CSS1039: Token not allowed after unary operator: '-mf-gray-dark'
(164,25): run-time error CSS1039: Token not allowed after unary operator: '-mf-default-radius'
(168,25): run-time error CSS1039: Token not allowed after unary operator: '-mf-radius-md'
(172,33): run-time error CSS1039: Token not allowed after unary operator: '-mf-gray-40'
(180,17): run-time error CSS1039: Token not allowed after unary operator: '-mf-secondary'
(181,21): run-time error CSS1039: Token not allowed after unary operator: '-mf-base-text'
(182,23): run-time error CSS1039: Token not allowed after unary operator: '-mf-text-semiBold'
(190,17): run-time error CSS1039: Token not allowed after unary operator: '-mf-gray-dark'
(195,21): run-time error CSS1039: Token not allowed after unary operator: '-mf-gray-dark'
(448,28): run-time error CSS1039: Token not allowed after unary operator: '-mf-gray-light'
(453,28): run-time error CSS1039: Token not allowed after unary operator: '-mf-gray-light'
(459,21): run-time error CSS1039: Token not allowed after unary operator: '-mf-gray-dark'
(464,28): run-time error CSS1039: Token not allowed after unary operator: '-mf-primary'
(468,28): run-time error CSS1039: Token not allowed after unary operator: '-mf-primary-light'
(473,28): run-time error CSS1039: Token not allowed after unary operator: '-mf-yellow-light'
(477,28): run-time error CSS1039: Token not allowed after unary operator: '-mf-orange-light'
(481,28): run-time error CSS1039: Token not allowed after unary operator: '-mf-green-light'
(485,28): run-time error CSS1039: Token not allowed after unary operator: '-mf-orange'
(489,28): run-time error CSS1039: Token not allowed after unary operator: '-mf-green'
(493,28): run-time error CSS1039: Token not allowed after unary operator: '-mf-gray-dark'
(497,28): run-time error CSS1039: Token not allowed after unary operator: '-mf-gray-light'
(502,17): run-time error CSS1039: Token not allowed after unary operator: '-mf-primary'
(506,17): run-time error CSS1039: Token not allowed after unary operator: '-mf-gray'
(510,17): run-time error CSS1039: Token not allowed after unary operator: '-mf-gray-dark'
(514,17): run-time error CSS1039: Token not allowed after unary operator: '-mf-green-dark'
(518,17): run-time error CSS1039: Token not allowed after unary operator: '-mf-secondary'
(522,17): run-time error CSS1039: Token not allowed after unary operator: '-mf-red'
(526,17): run-time error CSS1039: Token not allowed after unary operator: '-mf-white'
(531,21): run-time error CSS1039: Token not allowed after unary operator: '-mf-sm-text'
(532,23): run-time error CSS1039: Token not allowed after unary operator: '-mf-text-regular'
(536,21): run-time error CSS1039: Token not allowed after unary operator: '-mf-sm-text'
(537,23): run-time error CSS1039: Token not allowed after unary operator: '-mf-text-Bold'
(541,21): run-time error CSS1039: Token not allowed after unary operator: '-mf-base-text'
(542,23): run-time error CSS1039: Token not allowed after unary operator: '-mf-text-regular'
(546,21): run-time error CSS1039: Token not allowed after unary operator: '-mf-base-text'
(547,23): run-time error CSS1039: Token not allowed after unary operator: '-mf-text-semiBold'
(551,21): run-time error CSS1039: Token not allowed after unary operator: '-mf-lg-text'
(552,23): run-time error CSS1039: Token not allowed after unary operator: '-mf-text-semiBold'
(555,21): run-time error CSS1039: Token not allowed after unary operator: '-mf-lg-text'
(556,23): run-time error CSS1039: Token not allowed after unary operator: '-mf-text-regular'
(560,21): run-time error CSS1039: Token not allowed after unary operator: '-mf-xl-text'
(561,23): run-time error CSS1039: Token not allowed after unary operator: '-mf-text-semiBold'
(565,17): run-time error CSS1039: Token not allowed after unary operator: '-mf-primary'
(568,17): run-time error CSS1039: Token not allowed after unary operator: '-mf-gray'
(573,25): run-time error CSS1039: Token not allowed after unary operator: '-mf-radius'
(574,28): run-time error CSS1039: Token not allowed after unary operator: '-mf-white'
(575,22): run-time error CSS1039: Token not allowed after unary operator: '-mf-shadow-bottom'
(579,25): run-time error CSS1039: Token not allowed after unary operator: '-mf-radius-md'
(580,28): run-time error CSS1039: Token not allowed after unary operator: '-mf-white'
(581,28): run-time error CSS1039: Token not allowed after unary operator: '-mf-gray-light'
(582,22): run-time error CSS1039: Token not allowed after unary operator: '-mfi-card-shadow'
(592,28): run-time error CSS1039: Token not allowed after unary operator: '-mf-gray-20'
(613,28): run-time error CSS1039: Token not allowed after unary operator: '-mf-gray-light'
(615,25): run-time error CSS1039: Token not allowed after unary operator: '-mf-radius-md'
(619,35): run-time error CSS1039: Token not allowed after unary operator: '-mf-gray-20'
(623,21): run-time error CSS1039: Token not allowed after unary operator: '-mf-xxl-text'
(625,23): run-time error CSS1039: Token not allowed after unary operator: '-mf-text-semiBold'
(626,17): run-time error CSS1039: Token not allowed after unary operator: '-mf-gray-dark'
(631,23): run-time error CSS1039: Token not allowed after unary operator: '-mf-text-semiBold'
(632,21): run-time error CSS1039: Token not allowed after unary operator: '-mf-Base-text'
(634,25): run-time error CSS1039: Token not allowed after unary operator: '-mf-default-radius'
(644,17): run-time error CSS1039: Token not allowed after unary operator: '-mf-primary'
(649,17): run-time error CSS1039: Token not allowed after unary operator: '-mf-white'
(650,22): run-time error CSS1039: Token not allowed after unary operator: '-mf-primary'
(651,28): run-time error CSS1039: Token not allowed after unary operator: '-mf-primary'
(657,21): run-time error CSS1039: Token not allowed after unary operator: '-mf-white'
(662,22): run-time error CSS1039: Token not allowed after unary operator: '-mf-white'
(663,17): run-time error CSS1039: Token not allowed after unary operator: '-mf-primary'
(664,28): run-time error CSS1039: Token not allowed after unary operator: '-mf-primary'
(668,21): run-time error CSS1039: Token not allowed after unary operator: '-mf-primary'
(669,26): run-time error CSS1039: Token not allowed after unary operator: '-mf-primary-light'
(670,32): run-time error CSS1039: Token not allowed after unary operator: '-mf-primary-light'
(673,25): run-time error CSS1039: Token not allowed after unary operator: '-mf-primary'
(678,22): run-time error CSS1039: Token not allowed after unary operator: '-mf-gray-30'
(683,17): run-time error CSS1039: Token not allowed after unary operator: '-mf-white'
(684,22): run-time error CSS1039: Token not allowed after unary operator: '-mf-secondary'
(691,21): run-time error CSS1039: Token not allowed after unary operator: '-mf-white'
(692,26): run-time error CSS1039: Token not allowed after unary operator: '-mf-gray'
(697,22): run-time error CSS1039: Token not allowed after unary operator: '-mf-white'
(698,17): run-time error CSS1039: Token not allowed after unary operator: '-mf-secondary'
(699,28): run-time error CSS1039: Token not allowed after unary operator: '-mf-secondary'
(704,22): run-time error CSS1039: Token not allowed after unary operator: '-mf-white'
(705,17): run-time error CSS1039: Token not allowed after unary operator: '-mf-black'
(706,28): run-time error CSS1039: Token not allowed after unary operator: '-mf-gray-20'
(711,21): run-time error CSS1039: Token not allowed after unary operator: '-mf-black'
(716,21): run-time error CSS1039: Token not allowed after unary operator: '-mf-white'
(720,21): run-time error CSS1039: Token not allowed after unary operator: '-mf-white'
(721,26): run-time error CSS1039: Token not allowed after unary operator: '-mf-gray'
(722,32): run-time error CSS1039: Token not allowed after unary operator: '-mf-gray'
(726,25): run-time error CSS1039: Token not allowed after unary operator: '-mf-white'
(733,25): run-time error CSS1039: Token not allowed after unary operator: '-mf-white'
(737,28): run-time error CSS1039: Token not allowed after unary operator: '-mf-green-dark'
(738,17): run-time error CSS1039: Token not allowed after unary operator: '-mf-white'
(739,28): run-time error CSS1039: Token not allowed after unary operator: '-mf-green-dark'
(744,21): run-time error CSS1039: Token not allowed after unary operator: '-mf-green-dark'
(745,32): run-time error CSS1039: Token not allowed after unary operator: '-mf-green-light'
(746,32): run-time error CSS1039: Token not allowed after unary operator: '-mf-green-light'
(750,17): run-time error CSS1039: Token not allowed after unary operator: '-mf-white'
(751,22): run-time error CSS1039: Token not allowed after unary operator: '-mf-red'
(752,28): run-time error CSS1039: Token not allowed after unary operator: '-mf-red'
(757,21): run-time error CSS1039: Token not allowed after unary operator: '-mf-red'
(758,26): run-time error CSS1039: Token not allowed after unary operator: '-mf-red-light'
(759,32): run-time error CSS1039: Token not allowed after unary operator: '-mf-red-light'
(763,21): run-time error CSS1039: Token not allowed after unary operator: '-mf-white'
(768,22): run-time error CSS1039: Token not allowed after unary operator: '-mf-white'
(769,17): run-time error CSS1039: Token not allowed after unary operator: '-mf-red'
(770,28): run-time error CSS1039: Token not allowed after unary operator: '-mf-red'
(779,22): run-time error CSS1039: Token not allowed after unary operator: '-mf-red-light'
(780,17): run-time error CSS1039: Token not allowed after unary operator: '-mf-red'
(781,28): run-time error CSS1039: Token not allowed after unary operator: '-mf-red-light'
(785,17): run-time error CSS1039: Token not allowed after unary operator: '-mf-white'
(786,28): run-time error CSS1039: Token not allowed after unary operator: '-mf-gray-dark'
(791,21): run-time error CSS1039: Token not allowed after unary operator: '-mf-white'
(794,17): run-time error CSS1039: Token not allowed after unary operator: '-mf-gray-dark'
(804,28): run-time error CSS1039: Token not allowed after unary operator: '-mf-gray-light'
(813,28): run-time error CSS1039: Token not allowed after unary operator: '-mf-primary'
(821,17): run-time error CSS1039: Token not allowed after unary operator: '-mf-secondary'
(822,21): run-time error CSS1039: Token not allowed after unary operator: '-mf-base-text'
(823,23): run-time error CSS1039: Token not allowed after unary operator: '-mf-text-semiBold'
(828,21): run-time error CSS1039: Token not allowed after unary operator: '-mf-secondary'
(839,17): run-time error CSS1039: Token not allowed after unary operator: '-mf-primary'
(843,17): run-time error CSS1039: Token not allowed after unary operator: '-mf-white'
(847,17): run-time error CSS1039: Token not allowed after unary operator: '-mf-red'
(866,25): run-time error CSS1039: Token not allowed after unary operator: '-mf-radius-sm'
(871,17): run-time error CSS1039: Token not allowed after unary operator: '-mf-primary'
(875,17): run-time error CSS1039: Token not allowed after unary operator: '-mf-green'
(879,17): run-time error CSS1039: Token not allowed after unary operator: '-mf-orange'
(883,17): run-time error CSS1039: Token not allowed after unary operator: '-mf-yellow'
(889,28): run-time error CSS1039: Token not allowed after unary operator: '-mf-white'
(972,28): run-time error CSS1039: Token not allowed after unary operator: '-mf-gray-light'
(986,28): run-time error CSS1039: Token not allowed after unary operator: '-mf-green-light'
(996,28): run-time error CSS1039: Token not allowed after unary operator: '-mf-green-dark'
(1004,28): run-time error CSS1039: Token not allowed after unary operator: '-mf-green-light-30'
(1010,17): run-time error CSS1039: Token not allowed after unary operator: '-mf-gray-dark'
(1011,21): run-time error CSS1039: Token not allowed after unary operator: '-mf-base-text'
(1012,23): run-time error CSS1039: Token not allowed after unary operator: '-mf-text-semiBold'
(1014,25): run-time error CSS1039: Token not allowed after unary operator: '-mf-default-radius'
(1014,50): run-time error CSS1039: Token not allowed after unary operator: '-mf-default-radius'
(1015,35): run-time error CSS1039: Token not allowed after unary operator: '-mf-gray-light'
(1025,35): run-time error CSS1039: Token not allowed after unary operator: '-mf-gray-light'
(1031,28): run-time error CSS1039: Token not allowed after unary operator: '-mf-gray-light'
(1039,21): run-time error CSS1039: Token not allowed after unary operator: '-mf-sm-text'
(1040,17): run-time error CSS1039: Token not allowed after unary operator: '-mf-gray-dark'
(1048,17): run-time error CSS1039: Token not allowed after unary operator: '-mf-gray'
(1050,21): run-time error CSS1039: Token not allowed after unary operator: '-mf-sm-text'
(1061,21): run-time error CSS1039: Token not allowed after unary operator: '-mf-base-text'
(1062,17): run-time error CSS1039: Token not allowed after unary operator: '-mf-priary'
(1063,23): run-time error CSS1039: Token not allowed after unary operator: '-mf-text-semiBold'
(1067,29): run-time error CSS1039: Token not allowed after unary operator: '-mf-default-radius'
(1067,54): run-time error CSS1039: Token not allowed after unary operator: '-mf-default-radius'
(1077,28): run-time error CSS1039: Token not allowed after unary operator: '-mf-gray-light'
(1079,25): run-time error CSS1039: Token not allowed after unary operator: '-mf-radius-md'
(1080,22): run-time error CSS1039: Token not allowed after unary operator: '-mfi-card-shadow'
(1085,21): run-time error CSS1039: Token not allowed after unary operator: '-mf-base-text'
(1086,23): run-time error CSS1039: Token not allowed after unary operator: '-mf-text-semiBold'
(1087,17): run-time error CSS1039: Token not allowed after unary operator: '-mf-gray-dark'
(1096,21): run-time error CSS1039: Token not allowed after unary operator: '-mf-gray'
(1100,21): run-time error CSS1039: Token not allowed after unary operator: '-mf-sm-text'
(1101,23): run-time error CSS1039: Token not allowed after unary operator: '-mf-text-regular'
(1102,17): run-time error CSS1039: Token not allowed after unary operator: '-mf-gray'
(1108,17): run-time error CSS1039: Token not allowed after unary operator: '-mf-gray-dark'
(1125,22): run-time error CSS1039: Token not allowed after unary operator: '-mf-menu-shadow'
(1127,25): run-time error CSS1039: Token not allowed after unary operator: '-mf-radius-md'
(1131,28): run-time error CSS1039: Token not allowed after unary operator: '-mf-blue-gray-bg'
(1133,17): run-time error CSS1039: Token not allowed after unary operator: '-mf-primary-color'
(1138,25): run-time error CSS1039: Token not allowed after unary operator: '-mf-radius-md'
(1159,17): run-time error CSS1039: Token not allowed after unary operator: '-mf-white'
(1165,17): run-time error CSS1039: Token not allowed after unary operator: '-mf-primary'
(1174,17): run-time error CSS1039: Token not allowed after unary operator: '-mf-gray'
(1175,21): run-time error CSS1039: Token not allowed after unary operator: '-mf-base-text'
(1176,23): run-time error CSS1039: Token not allowed after unary operator: '-mf-text-semiBold'
(1192,17): run-time error CSS1039: Token not allowed after unary operator: '-mf-gray-dark'
(1193,21): run-time error CSS1039: Token not allowed after unary operator: '-mf-base-text'
(1194,23): run-time error CSS1039: Token not allowed after unary operator: '-mf-text-regular'
(1219,21): run-time error CSS1039: Token not allowed after unary operator: '-mf-sm-text'
(1220,23): run-time error CSS1039: Token not allowed after unary operator: '-mf-text-regular'
(1245,17): run-time error CSS1039: Token not allowed after unary operator: '-mf-gray'
(1247,22): run-time error CSS1039: Token not allowed after unary operator: '-mf-gray-30'
(1252,25): run-time error CSS1039: Token not allowed after unary operator: '-mf-radius-md'
(1252,49): run-time error CSS1039: Token not allowed after unary operator: '-mf-radius-md'
(1256,27): run-time error CSS1039: Token not allowed after unary operator: '-mf-radius-md'
(1256,47): run-time error CSS1039: Token not allowed after unary operator: '-mf-radius-md'
(1307,22): run-time error CSS1039: Token not allowed after unary operator: '-mfi-card-shadow'
(1335,25): run-time error CSS1039: Token not allowed after unary operator: '-mf-radius-md'
(1351,17): run-time error CSS1039: Token not allowed after unary operator: '-mf-gray'
(1352,21): run-time error CSS1039: Token not allowed after unary operator: '-mf-base-text'
(1354,23): run-time error CSS1039: Token not allowed after unary operator: '-mf-text-semiBold'
(1368,17): run-time error CSS1039: Token not allowed after unary operator: '-mf-gray'
(1373,17): run-time error CSS1039: Token not allowed after unary operator: '-mf-gray-dark'
(1399,23): run-time error CSS1039: Token not allowed after unary operator: '-mf-text-regular'
(1400,17): run-time error CSS1039: Token not allowed after unary operator: '-mf-gray'
(1401,21): run-time error CSS1039: Token not allowed after unary operator: '-mf-base-text'
(1404,23): run-time error CSS1039: Token not allowed after unary operator: '-mf-text-regular'
(1417,17): run-time error CSS1039: Token not allowed after unary operator: '-mf-primary'
(1424,28): run-time error CSS1039: Token not allowed after unary operator: '-mf-white'
(1426,25): run-time error CSS1039: Token not allowed after unary operator: '-mf-default-radius'
(1429,22): run-time error CSS1039: Token not allowed after unary operator: '-mf-menu-shadow'
(1438,17): run-time error CSS1039: Token not allowed after unary operator: '-mf-primary'
(1439,23): run-time error CSS1039: Token not allowed after unary operator: '-mf-text-semiBold'
(1453,22): run-time error CSS1039: Token not allowed after unary operator: '-mf-primary'
(1457,17): run-time error CSS1039: Token not allowed after unary operator: '-mf-blue-dark'
(1458,21): run-time error CSS1039: Token not allowed after unary operator: '-mf-xl-text'
(1459,23): run-time error CSS1039: Token not allowed after unary operator: '-mf-text-semiBold'
(1463,17): run-time error CSS1039: Token not allowed after unary operator: '-mf-gray-dark'
(1464,21): run-time error CSS1039: Token not allowed after unary operator: '-mf-lg-text'
(1465,23): run-time error CSS1039: Token not allowed after unary operator: '-mf-text-semiBold'
(1470,33): run-time error CSS1039: Token not allowed after unary operator: '-mf-primary'
(1471,28): run-time error CSS1039: Token not allowed after unary operator: '-mf-blue-light-20'
(1491,21): run-time error CSS1039: Token not allowed after unary operator: '-mf-base-text'
(1492,23): run-time error CSS1039: Token not allowed after unary operator: '-mf-text-regular'
(1534,28): run-time error CSS1039: Token not allowed after unary operator: '-mf-gray-light'
(1535,17): run-time error CSS1039: Token not allowed after unary operator: '-mf-black'
(1550,35): run-time error CSS1039: Token not allowed after unary operator: '-mf-gray-20'
(1552,17): run-time error CSS1039: Token not allowed after unary operator: '-mf-gray'
(1558,17): run-time error CSS1039: Token not allowed after unary operator: '-mf-primary'
(1614,25): run-time error CSS1039: Token not allowed after unary operator: '-mf-radius-sm'
(1615,28): run-time error CSS1039: Token not allowed after unary operator: '-mf-gray-light'
(1619,17): run-time error CSS1039: Token not allowed after unary operator: '-mf-orange'
(1623,17): run-time error CSS1039: Token not allowed after unary operator: '-mf-green-dark'
(1627,17): run-time error CSS1039: Token not allowed after unary operator: '-mf-red'
(1648,17): run-time error CSS1039: Token not allowed after unary operator: '-mf-primary'
(1680,21): run-time error CSS1039: Token not allowed after unary operator: '-mf-base-text'
(1681,23): run-time error CSS1039: Token not allowed after unary operator: '-mf-text-semiBold'
(1684,21): run-time error CSS1039: Token not allowed after unary operator: '-mf-gray-dark'
(1692,21): run-time error CSS1039: Token not allowed after unary operator: '-mf-red'
(1695,21): run-time error CSS1039: Token not allowed after unary operator: '-mf-green-dark'
(1698,21): run-time error CSS1039: Token not allowed after unary operator: '-mf-orange'
(1714,28): run-time error CSS1039: Token not allowed after unary operator: '-mf-gray-light'
(1720,35): run-time error CSS1039: Token not allowed after unary operator: '-mf-gray-20'
(1723,17): run-time error CSS1039: Token not allowed after unary operator: '-mf-secondary'
(1724,21): run-time error CSS1039: Token not allowed after unary operator: '-mf-base-text'
(1725,23): run-time error CSS1039: Token not allowed after unary operator: '-mf-text-semiBold'
(1729,25): run-time error CSS1039: Token not allowed after unary operator: '-mf-radius-md'
(1730,28): run-time error CSS1039: Token not allowed after unary operator: '-mf-gray-light'
(1740,17): run-time error CSS1039: Token not allowed after unary operator: '-mf-gray-dark'
(1741,28): run-time error CSS1039: Token not allowed after unary operator: '-mf-white'
(1742,21): run-time error CSS1039: Token not allowed after unary operator: '-mf-base-text'
(1743,23): run-time error CSS1039: Token not allowed after unary operator: '-mf-text-semiBold'
(1744,28): run-time error CSS1039: Token not allowed after unary operator: '-mf-gray-20'
(1745,25): run-time error CSS1039: Token not allowed after unary operator: '-mf-default-radius'
(1754,17): run-time error CSS1039: Token not allowed after unary operator: '-mf-gray-dark'
(1756,2): run-time error CSS1062: Expected semicolon or closing curly-brace, found '/'
(1843,17): run-time error CSS1039: Token not allowed after unary operator: '-mf-gray-dark'
(1863,25): run-time error CSS1039: Token not allowed after unary operator: '-mf-radius-md'
(1864,21): run-time error CSS1039: Token not allowed after unary operator: '-mf-base-text'
(1865,23): run-time error CSS1039: Token not allowed after unary operator: '-mf-text-regular'
(1875,32): run-time error CSS1039: Token not allowed after unary operator: '-mf-gray-light'
(1876,26): run-time error CSS1039: Token not allowed after unary operator: '-mf-gray-light'
(1877,21): run-time error CSS1039: Token not allowed after unary operator: '-mf-gray-dark'
(1886,17): run-time error CSS1039: Token not allowed after unary operator: '-mf-primary-color'
(1903,17): run-time error CSS1039: Token not allowed after unary operator: '-mf-secondary'
(1904,23): run-time error CSS1039: Token not allowed after unary operator: '-mf-text-semiBold'
(1905,21): run-time error CSS1039: Token not allowed after unary operator: '-mf-lg-text'
(1911,17): run-time error CSS1039: Token not allowed after unary operator: '-mf-secondary'
(1918,30): run-time error CSS1039: Token not allowed after unary operator: '-mf-primary'
(1932,17): run-time error CSS1039: Token not allowed after unary operator: '-mf-gray-dark'
(1933,21): run-time error CSS1039: Token not allowed after unary operator: '-mf-sm-text'
(1934,23): run-time error CSS1039: Token not allowed after unary operator: '-mf-text-Bold'
(1942,28): run-time error CSS1039: Token not allowed after unary operator: '-mf-gray-20'
(1943,25): run-time error CSS1039: Token not allowed after unary operator: '-mf-radius-md'
(1944,22): run-time error CSS1039: Token not allowed after unary operator: '-mf-white'
(1975,25): run-time error CSS1039: Token not allowed after unary operator: '-mf-radius-sm'
(1979,17): run-time error CSS1039: Token not allowed after unary operator: '-mf-primary'
(1980,21): run-time error CSS1039: Token not allowed after unary operator: '-mf-base-text'
(1981,23): run-time error CSS1039: Token not allowed after unary operator: '-mf-text-semiBold'
(1994,21): run-time error CSS1039: Token not allowed after unary operator: '-mf-base-text'
(1995,23): run-time error CSS1039: Token not allowed after unary operator: '-mf-text-regular'
(1996,17): run-time error CSS1039: Token not allowed after unary operator: '-mf-gray-dark'
(2004,23): run-time error CSS1039: Token not allowed after unary operator: '-mf-text-regular'
(2006,17): run-time error CSS1039: Token not allowed after unary operator: '-mf-gray'
(2010,17): run-time error CSS1039: Token not allowed after unary operator: '-mf-gray-dark'
(2011,28): run-time error CSS1039: Token not allowed after unary operator: '-mf-gray-light'
(2012,21): run-time error CSS1039: Token not allowed after unary operator: '-mf-base-text'
(2013,23): run-time error CSS1039: Token not allowed after unary operator: '-mf-text-regular'
(2026,17): run-time error CSS1039: Token not allowed after unary operator: '-mf-gray-dark'
(2027,22): run-time error CSS1039: Token not allowed after unary operator: '-mf-white'
(2028,28): run-time error CSS1039: Token not allowed after unary operator: '-mf-gray-20'
(2033,28): run-time error CSS1039: Token not allowed after unary operator: '-mf-gray-20'
(2050,17): run-time error CSS1039: Token not allowed after unary operator: '-mf-primary'
(2076,21): run-time error CSS1039: Token not allowed after unary operator: '-mf-base-text'
(2077,23): run-time error CSS1039: Token not allowed after unary operator: '-mf-text-semiBold'
(2086,17): run-time error CSS1039: Token not allowed after unary operator: '-mf-primary'
(2088,28): run-time error CSS1039: Token not allowed after unary operator: '-mf-white'
(2089,25): run-time error CSS1039: Token not allowed after unary operator: '-mf-radius-sm'
(2100,28): run-time error CSS1039: Token not allowed after unary operator: '-mf-gray'
(2106,28): run-time error CSS1039: Token not allowed after unary operator: '-mf-primary-light'
(2107,28): run-time error CSS1039: Token not allowed after unary operator: '-mf-primary-light'
(2118,21): run-time error CSS1039: Token not allowed after unary operator: '-mf-base-text'
(2119,23): run-time error CSS1039: Token not allowed after unary operator: '-mf-text-semiBold'
(2136,17): run-time error CSS1039: Token not allowed after unary operator: '-mf-gray'
(2139,31): run-time error CSS1039: Token not allowed after unary operator: '-mf-gray'
(2154,40): run-time error CSS1039: Token not allowed after unary operator: '-mf-primary'
(2158,35): run-time error CSS1039: Token not allowed after unary operator: '-mf-primary'
(2183,28): run-time error CSS1039: Token not allowed after unary operator: '-mf-gray-20'
(2184,25): run-time error CSS1039: Token not allowed after unary operator: '-mf-radius-md'
(2185,22): run-time error CSS1039: Token not allowed after unary operator: '-mf-white'
(2210,38): run-time error CSS1039: Token not allowed after unary operator: '-mf-gray-20'
(2219,28): run-time error CSS1039: Token not allowed after unary operator: '-mf-gray-20'
(2220,25): run-time error CSS1039: Token not allowed after unary operator: '-mf-radius-md'
(2221,22): run-time error CSS1039: Token not allowed after unary operator: '-mf-white'
(2239,32): run-time error CSS1039: Token not allowed after unary operator: '-mf-gray'
(2243,31): run-time error CSS1039: Token not allowed after unary operator: '-mf-radius-sm'
(2243,51): run-time error CSS1039: Token not allowed after unary operator: '-mf-radius-sm'
(2248,25): run-time error CSS1039: Token not allowed after unary operator: '-mf-gray-light'
(2254,17): run-time error CSS1039: Token not allowed after unary operator: '-mf-primary'
(2278,28): run-time error CSS1039: Token not allowed after unary operator: '-mf-gray-20'
(2280,28): run-time error CSS1039: Token not allowed after unary operator: '-mf-white'
(2281,21): run-time error CSS1039: Token not allowed after unary operator: '-mf-base-text'
(2304,32): run-time error CSS1039: Token not allowed after unary operator: '-mf-primary'
(2305,21): run-time error CSS1039: Token not allowed after unary operator: '-mf-white'
(2310,25): run-time error CSS1039: Token not allowed after unary operator: '-mf-base-text'
(2311,27): run-time error CSS1039: Token not allowed after unary operator: '-mf-text-semiBold'
(2316,28): run-time error CSS1039: Token not allowed after unary operator: '-mf-gray-light'
(2317,17): run-time error CSS1039: Token not allowed after unary operator: '-mf-gray-dark'
(2322,21): run-time error CSS1039: Token not allowed after unary operator: '-mf-base-text'
(2323,23): run-time error CSS1039: Token not allowed after unary operator: '-mf-text-semiBold'
(2328,32): run-time error CSS1039: Token not allowed after unary operator: '-mf-primary-light'
(2329,32): run-time error CSS1039: Token not allowed after unary operator: '-mf-primary-light'
(2330,21): run-time error CSS1039: Token not allowed after unary operator: '-mf-primary'
(2341,17): run-time error CSS1039: Token not allowed after unary operator: '-mf-gray-dark'
(2375,17): run-time error CSS1039: Token not allowed after unary operator: '-mf-gray-dark'
(2379,17): run-time error CSS1039: Token not allowed after unary operator: '-mf-white'
(2406,17): run-time error CSS1039: Token not allowed after unary operator: '-mfi-gray'
(2442,29): run-time error CSS1039: Token not allowed after unary operator: '-mf-radius'
(2442,46): run-time error CSS1039: Token not allowed after unary operator: '-mf-radius'
(2443,39): run-time error CSS1039: Token not allowed after unary operator: '-mf-primary'
(2454,32): run-time error CSS1039: Token not allowed after unary operator: '-mf-gray-20'
(2456,29): run-time error CSS1039: Token not allowed after unary operator: '-mf-radius-md'
(2456,49): run-time error CSS1039: Token not allowed after unary operator: '-mf-radius-md'
(2457,25): run-time error CSS1039: Token not allowed after unary operator: '-mf-lg-text'
(2458,27): run-time error CSS1039: Token not allowed after unary operator: '-mf-text-semiBold'
(2459,21): run-time error CSS1039: Token not allowed after unary operator: '-mf-gray-dark'
(2467,36): run-time error CSS1039: Token not allowed after unary operator: '-mf-primary'
(2468,43): run-time error CSS1039: Token not allowed after unary operator: '-mf-white'
(2469,25): run-time error CSS1039: Token not allowed after unary operator: '-mf-primary'
(2473,25): run-time error CSS1039: Token not allowed after unary operator: '-mf-primary'
(2482,29): run-time error CSS1039: Token not allowed after unary operator: '-mf-radius'
(2482,46): run-time error CSS1039: Token not allowed after unary operator: '-mf-radius'
(2507,32): run-time error CSS1039: Token not allowed after unary operator: '-mf-gray-20'
(2511,25): run-time error CSS1039: Token not allowed after unary operator: '-mf-base-text'
(2512,21): run-time error CSS1039: Token not allowed after unary operator: '-mf-gray'
(2516,32): run-time error CSS1039: Token not allowed after unary operator: '-mf-gray-lighter'
(2521,27): run-time error CSS1039: Token not allowed after unary operator: '-mf-text-semiBold'
(2522,21): run-time error CSS1039: Token not allowed after unary operator: '-mf-gray-dark'
(2542,28): run-time error CSS1039: Token not allowed after unary operator: '-mf-gray-20'
(2543,25): run-time error CSS1039: Token not allowed after unary operator: '-mf-radius-md'
(2557,21): run-time error CSS1039: Token not allowed after unary operator: '-mf-base-text'
(2558,23): run-time error CSS1039: Token not allowed after unary operator: '-mf-text-regular'
(2559,17): run-time error CSS1039: Token not allowed after unary operator: '-mf-gray-dark'
(2574,17): run-time error CSS1039: Token not allowed after unary operator: '-mf-primary'
(2603,25): run-time error CSS1039: Token not allowed after unary operator: '-mf-radius'
(2618,17): run-time error CSS1039: Token not allowed after unary operator: '-mf-primary'
(2619,21): run-time error CSS1039: Token not allowed after unary operator: '-mf-base-text'
(2620,23): run-time error CSS1039: Token not allowed after unary operator: '-mf-text-semiBold'
(2648,28): run-time error CSS1039: Token not allowed after unary operator: '-mf-gray-light'
(2649,29): run-time error CSS1039: Token not allowed after unary operator: '-mf-gray'
(2650,25): run-time error CSS1039: Token not allowed after unary operator: '-mf-radius-md'
(2668,21): run-time error CSS1039: Token not allowed after unary operator: '-mf-gray-dark'
(2677,17): run-time error CSS1039: Token not allowed after unary operator: '-mf-gray'
(2678,21): run-time error CSS1039: Token not allowed after unary operator: '-mf-sm-text'
(2715,17): run-time error CSS1039: Token not allowed after unary operator: '-mf-primary'
(2716,21): run-time error CSS1039: Token not allowed after unary operator: '-mf-base-text'
(2717,23): run-time error CSS1039: Token not allowed after unary operator: '-mf-text-semiBold'
(2746,23): run-time error CSS1039: Token not allowed after unary operator: '-mf-shadow-bottom'
(2769,17): run-time error CSS1039: Token not allowed after unary operator: '-mf-red'
(2781,17): run-time error CSS1039: Token not allowed after unary operator: '-mf-gray'
(2790,17): run-time error CSS1039: Token not allowed after unary operator: '-mf-primary'
(2832,17): run-time error CSS1039: Token not allowed after unary operator: '-mf-gray'
(2833,23): run-time error CSS1039: Token not allowed after unary operator: '-mf-text-regular'
(2854,17): run-time error CSS1039: Token not allowed after unary operator: '-mf-red'
(2863,28): run-time error CSS1039: Token not allowed after unary operator: '-mf-white'
(2869,17): run-time error CSS1039: Token not allowed after unary operator: '-mf-red'
(2878,28): run-time error CSS1039: Token not allowed after unary operator: '-mf-white'
(2919,21): run-time error CSS1039: Token not allowed after unary operator: '-mf-red'
(2928,17): run-time error CSS1039: Token not allowed after unary operator: '-mf-gray-dark'
(2939,17): run-time error CSS1039: Token not allowed after unary operator: '-mf-gray'
(2944,17): run-time error CSS1039: Token not allowed after unary operator: '-mf-primary'
(2969,17): run-time error CSS1039: Token not allowed after unary operator: '-mf-white'
(2973,17): run-time error CSS1039: Token not allowed after unary operator: '-mf-red'
(2977,28): run-time error CSS1039: Token not allowed after unary operator: '-mf-gray-20'
(2979,25): run-time error CSS1039: Token not allowed after unary operator: '-mf-radius-md'
(2985,17): run-time error CSS1039: Token not allowed after unary operator: '-mf-primary'
(2992,21): run-time error CSS1039: Token not allowed after unary operator: '-mf-primary'
(3014,28): run-time error CSS1039: Token not allowed after unary operator: '-mf-gray-20'
(3016,25): run-time error CSS1039: Token not allowed after unary operator: '-mf-radius-md'
(3051,28): run-time error CSS1039: Token not allowed after unary operator: '-mf-red'
(3059,21): run-time error CSS1039: Token not allowed after unary operator: '-mf-white'
(3065,28): run-time error CSS1039: Token not allowed after unary operator: '-mf-white'
(3066,28): run-time error CSS1039: Token not allowed after unary operator: '-mf-primary'
(3070,28): run-time error CSS1039: Token not allowed after unary operator: '-mf-white'
(3071,28): run-time error CSS1039: Token not allowed after unary operator: '-mf-gray'
(3093,28): run-time error CSS1039: Token not allowed after unary operator: '-mf-primary'
(3097,28): run-time error CSS1039: Token not allowed after unary operator: '-mf-gray'
(3128,28): run-time error CSS1039: Token not allowed after unary operator: '-mf-gray'
(3144,17): run-time error CSS1039: Token not allowed after unary operator: '-mf-white'
(3145,22): run-time error CSS1039: Token not allowed after unary operator: '-mf-white'
(3146,28): run-time error CSS1039: Token not allowed after unary operator: '-mf-red'
(3176,21): run-time error CSS1039: Token not allowed after unary operator: '-mf-base-text'
(3177,23): run-time error CSS1039: Token not allowed after unary operator: '-mf-text-semiBold'
(3199,25): run-time error CSS1039: Token not allowed after unary operator: '-mf-base-text'
(3200,27): run-time error CSS1039: Token not allowed after unary operator: '-mf-text-semiBold'
(3205,17): run-time error CSS1039: Token not allowed after unary operator: '-mf-gray'
(3206,21): run-time error CSS1039: Token not allowed after unary operator: '-mf-base-text'
(3207,23): run-time error CSS1039: Token not allowed after unary operator: '-mf-text-regular'
(3215,25): run-time error CSS1039: Token not allowed after unary operator: '-mf-base-text'
(3216,27): run-time error CSS1039: Token not allowed after unary operator: '-mf-text-semiBold'
(3230,21): run-time error CSS1039: Token not allowed after unary operator: '-mf-base-text'
(3231,23): run-time error CSS1039: Token not allowed after unary operator: '-mf-text-semiBold'
(3239,21): run-time error CSS1039: Token not allowed after unary operator: '-mf-red'
(3244,21): run-time error CSS1039: Token not allowed after unary operator: '-mf-red'
(3269,17): run-time error CSS1039: Token not allowed after unary operator: '-mf-gray-dark'
(3270,21): run-time error CSS1039: Token not allowed after unary operator: '-mf-lg-text'
(3271,23): run-time error CSS1039: Token not allowed after unary operator: '-mf-text-regular'
(3287,23): run-time error CSS1039: Token not allowed after unary operator: '-mf-text-semiBold'
(3288,17): run-time error CSS1039: Token not allowed after unary operator: '-mf-primary'
(3290,21): run-time error CSS1039: Token not allowed after unary operator: '-mf-xl-text'
(3299,23): run-time error CSS1039: Token not allowed after unary operator: '-mf-text-regular'
(3300,17): run-time error CSS1039: Token not allowed after unary operator: '-mf-gray'
(3302,21): run-time error CSS1039: Token not allowed after unary operator: '-mf-base-text'
(3321,23): run-time error CSS1039: Token not allowed after unary operator: '-mf-text-semiBold'
(3322,21): run-time error CSS1039: Token not allowed after unary operator: '-mf-Base-text'
(3324,25): run-time error CSS1039: Token not allowed after unary operator: '-mf-default-radius'
(3330,17): run-time error CSS1039: Token not allowed after unary operator: '-mf-secondary-color'
(3336,21): run-time error CSS1039: Token not allowed after unary operator: '-mf-link'
(3339,17): run-time error CSS1039: Token not allowed after unary operator: '-mf-white'
(3340,22): run-time error CSS1039: Token not allowed after unary operator: '-mf-primary'
(3341,28): run-time error CSS1039: Token not allowed after unary operator: '-mf-primary'
(3344,21): run-time error CSS1039: Token not allowed after unary operator: '-mf-primary'
(3345,26): run-time error CSS1039: Token not allowed after unary operator: '-mf-primary-light'
(3346,32): run-time error CSS1039: Token not allowed after unary operator: '-mf-primary-light'
(3349,17): run-time error CSS1039: Token not allowed after unary operator: '-mf-secondary'
(3350,28): run-time error CSS1039: Token not allowed after unary operator: '-mf-white'
(3351,28): run-time error CSS1039: Token not allowed after unary operator: '-mf-secondary'
(3354,21): run-time error CSS1039: Token not allowed after unary operator: '-mf-white'
(3355,26): run-time error CSS1039: Token not allowed after unary operator: '-mf-gray'
(3377,17): run-time error CSS1039: Token not allowed after unary operator: '-mf-red'
(3381,21): run-time error CSS1039: Token not allowed after unary operator: '-mf-xl-text'
(3382,17): run-time error CSS1039: Token not allowed after unary operator: '-mf-gray-dark'
(3383,23): run-time error CSS1039: Token not allowed after unary operator: '-mf-text-semiBold'
(3392,25): run-time error CSS1039: Token not allowed after unary operator: '-mf-radius-md'
(3394,21): run-time error CSS1039: Token not allowed after unary operator: '-mf-base-text'
(3395,23): run-time error CSS1039: Token not allowed after unary operator: '-mf-text-regular'
(3410,17): run-time error CSS1039: Token not allowed after unary operator: '-mf-gray'
(3413,17): run-time error CSS1039: Token not allowed after unary operator: '-mf-green-dark'
(3414,28): run-time error CSS1039: Token not allowed after unary operator: '-mf-green-light-30'
(3415,28): run-time error CSS1039: Token not allowed after unary operator: '-mf-green-dark'
(3447,17): run-time error CSS1039: Token not allowed after unary operator: '-mf-green-dark'
(3450,17): run-time error CSS1039: Token not allowed after unary operator: '-mf-red'
(3459,28): run-time error CSS1039: Token not allowed after unary operator: '-mf-gray-light'
(3485,17): run-time error CSS1039: Token not allowed after unary operator: '-mf-primary'
(3503,28): run-time error CSS1039: Token not allowed after unary operator: '-mf-primary'
(3505,25): run-time error CSS1039: Token not allowed after unary operator: '-mf-radius-md'
(3526,17): run-time error CSS1039: Token not allowed after unary operator: '-mf-gray'
 */
:root {
    --mf-primary: #0018FF;
    --mf-primary-light: #DCEBFF;
    --mf-secondary: #000;
    --mf-primary-rgb-15: rgba(76, 180, 231, 0.15);
    --mf-yellow: #EFC000;
    --mf-yellow-light: #FCF1B5;
    --mf-orange: #F48331; /*orange*/
    --mf-orange-light: #FFE1CC;
    --mf-gray: #8C8C8C;
    --mf-gray-20: rgba(91, 107, 121, 0.2); /*border*/
    --mf-gray-30: rgba(91, 107, 121, 0.3); /*DISABLED*/
    --mf-gray-40: rgba(91, 107, 121, 0.4); /*separator*/
    --mf-gray-dark: #0D0D0D;
    --mf-gray-light: #F5F5F5;
    --mf-gray-lighter: #FAFAFA;
    --mf-white: #fff;
    --mf-blue-dark: #2B67B8;
    --mf-blue-light: #CFF0FF;
    --mf-blue-light-20: #CFF0FF33;
    --mf-green: #8BC627;
    --mf-green-light: #CCEEDD;
    --mf-green-light-30: rgba(204, 238, 221, 0.3);
    --mf-green-dark: #00AB55;
    --mf-green-dark-20: rgba(0, 171, 85, 0.2);
    --mf-orange-70: rgba(244, 131, 49, 0.7);
    --mf-orange-20: rgba(244, 131, 49, 0.2);
    --mf-orange-light: #FFE1CC;
    --mf-red: #CF3341;
    --mf-red-light: #FDE8E3;
    --mf-red-20: rgba(207, 51, 65, 0.2);
    --mf-black: #000000;
    /*--------------------------------*/
    --mf-default-radius: 14px;
    --mf-radius-md: 4px;
    --mf-radius-sm: 3px;
    /*--------------------------------*/
    --mf-shadow-bottom: 1px 1px 10px 0 rgb(219, 219,219, 0.5);
    --mf-menu-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);
    --mfi-card-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.05);
    /*--------------------------------*/
    --mf-sm-text: 12px;
    --mf-base-text: 14px;
    --mf-lg-text: 16px;
    --mf-xl-text: 18px;
    --mf-xxl-text: 24px;
    --mf-text-regular: 400;
    --mf-text-semiBold: 600;
    --mf-text-Bold: 700;
    --mf-text-extra-Bold: 800;
}

body {
    margin: 0;
    padding: 0;
    background-color: var(--mf-gray-lighter);
    font-family: "Anek Gujarati", sans-serif !important;
    font-style: normal;
}

.mf-layout {
    display: flex;
    position: relative;
}

.mf-row-layout {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

.mf-main-container {
    display: flex;
    flex-direction: column;
     width: -webkit-fill-available;
}

.hidden-label {
    display: none;
}

.mf-section-vetical-boundry {
    margin-top: 1.5rem;
}

.divider {
    border-top: 1px solid #e7e8e98c;
    margin: 15px 0 30px 15px;
}

.top-space {
    padding-top: 16px;
}

.bottom-space {
    padding-bottom: 16px;
}

.space-around {
    padding-inline-end: 3rem;
}

.horizontal-end-separator {
    margin-inline-end: 1rem;
}

.break-word {
    word-break: break-all;
}
/* -----------------COMMON--------------------------- */
a, a:focus, a:hover, a:active {
    text-decoration: none;
    color: var(--mf-primary);
}

.page-content {
    position: relative;
    margin: 0;
}

.mf-main-content {
    margin-left: 0;
    min-height: 100%;
    padding: 24px;
}

.row {
    --bs-gutter-x: 0;
}

.mf-divider {
    border-top: 2px solid var(--mf-gray-border);
}

.mf-separator {
    margin: 1.5rem 0;
}

.mf-secondary-title {
    color: var(--mf-gray-dark);
    font-size: 14px;
    text-decoration-line: none !important;
    font-weight: 500;
}

.mf-secondary-title-space {
    margin-bottom: 1rem;
}


.mf-question {
    color: var(--mf-darker-shade);
    font-weight: 500;
    font-size: 18px;
    padding: 16px 0 8px;
}

.mf-sub-text {
    color: var(--mf-gray-dark);
    font-size: 16px;
}

.mf-default-radius {
    border-radius: var(--mf-default-radius);
}

.mf-radius-md {
    border-radius: var(--mf-radius-md);
}

.mf-border-left {
    border-left: 2px solid var(--mf-gray-40);
}

.mf-pointer {
    cursor: pointer;
}

.mf-base-semi-secondary, .input-group:not(.has-input) .input-group-addon.mf-base-semi-secondary {
    color: var(--mf-secondary);
    font-size: var(--mf-base-text);
    font-weight: var(--mf-text-semiBold);
}

.mf-underline {
    text-decoration: underline;
}

.mf-link {
    color: var(--mf-gray-dark);
    text-decoration: underline;
}

    .mf-link:hover {
        color: var(--mf-gray-dark);
        text-decoration: underline;
    }

.mf-underline {
    text-decoration: underline;
}

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

/* -----------------ALIGNMENT-------------------------- */
.mf-flex {
    display: flex;
}

.mf-row {
    flex-direction: row;
}

.mf-row {
    flex-direction: row;
}


.mf-column {
    flex-direction: column;
}

.mf-flex-end {
    justify-content: end;
}

.mf-row-separated-content {
    justify-content: space-between;
}

.mf-space-around {
    justify-content: space-around;
}

.mf-justify-center {
    justify-content: center;
}

.mf-align-center {
    align-items: center;
}

.mf-align-start {
    align-items: start;
}

.mf-align-end {
    align-items: end;
}

.mf-p-24 {
    padding: 24px;
}

.mf-p-32 {
    padding: 32px;
}

.mf-p-y-32 {
    padding: 32px 0;
}

.mf-p-16, .top, .bottom {
    padding: 16px;
}

.mf-p-12 {
    padding: 12px;
}

.mf-p-20 {
    padding: 20px;
}

.mf-p-4-16 {
    padding: 4px 16px;
}

.mf-p-6-12 {
    padding: 6px 12px;
}

.mf-p-y-8-16 {
    padding-top: 8px;
    padding-bottom: 16px;
}

.mf-p-y-8 {
    padding-top: 8px;
    padding-bottom: 8px;
}

.mf-p-y-12 {
    padding-top: 12px;
    padding-bottom: 12px;
}
.mf-p-y-16 {
    padding-top: 16px;
    padding-bottom: 16px;
}

.mf-m-y-32 {
    padding-top: 32px;
    padding-bottom: 32px;
}
.mf-m-x-4 {
    padding-left: 4px;
    padding-right: 4px;
}
.mf-p-x-8 {
    padding-left: 8px;
    padding-right: 8px;
}

.mf-p-x-12 {
    padding-left: 12px;
    padding-right: 12px;
}

.mf-p-x-16 {
    padding-left: 16px;
    padding-right: 16px;
}

.mf-p-x-24 {
    padding-left: 24px;
    padding-right: 24px;
}

.mf-p-x-80 {
    padding-left: 80px;
    padding-right: 80px;
}

.mf-m-16 {
    margin: 16px;
}

.mf-m-24 {
    margin: 24px;
}

.mf-m-b-16 {
    margin-bottom: 16px;
}

.mf-m-b-24 {
    margin-bottom: 24px;
}

.mf-m-b-32 {
    margin-bottom: 32px;
}
.mf-m-t-24 {
    margin-top: 24px;
}

.mf-m-x-16 {
    margin: 0px 16px;
}
.mf-m-y-16 {
    margin: 16px 0px;
}

.mf-p-x-60 {
    margin: 0px 60px;
}

.mf-m-8-16 {
    margin: 8px 16px;
}

.mf-m-y-8 {
    margin-top: 8px;
    margin-bottom: 8px;
}

.mf-m-y-12 {
    margin-top: 12px;
    margin-bottom: 12px;
}

.mf-m-start-8 {
    margin-inline-start: 8px;
}

.mf-m-start-12 {
    margin-inline-start: 12px;
}

.mf-m-start-40 {
    margin-inline-start: 40px;
}

.mf-p-start-12 {
    padding-inline-start: 12px;
}
.mf-p-start-lg {
    padding-inline-start: 24px;
}


.mf-m-b-12 {
    margin-bottom: 12px;
}
.mf-m-end-4 {
    margin-inline-end: 4px;
}
.mf-m-end-16 {
    margin-inline-end: 16px;
}

.mf-m-end-24 {
    margin-inline-end: 24px;
}

.mf-m-b-8 {
    margin-bottom: 8px;
}

.mf-m-b-14 {
    margin-bottom: 14px;
}

.mf-m-t-12 {
    margin-top: 12px;
}

.mf-m-y-24 {
    margin-top: 24px;
    margin-bottom: 24px;
}

.mf-m-x-12 {
    margin-left: 12px;
    margin-right: 12px;
}

.mf-text-start {
    text-align: start;
}
/*------------ BACKGROUND-----------------------*/
.mf-gray-hover:hover {
    background-color: var(--mf-gray-light);
}


.mf-highlight:hover, .mf-side-menu-item.mf-active {
    background-color: var(--mf-gray-light);
}


    .mf-side-menu-item.mf-active span, .mf-side-menu-item.mf-active span::before,
    .mf-highlight:hover span, .mf-highlight:hover span:before {
        color: var(--mf-gray-dark);
    }


.mf-primary-bg {
    background-color: var(--mf-primary);
}

.mf-primary-light-bg {
    background-color: var(--mf-primary-light);
}


.mf-yellow-light-bg {
    background-color: var(--mf-yellow-light);
}

.mf-orange-light-bg {
    background-color: var(--mf-orange-light);
}

.mf-green-light-bg {
    background-color: var(--mf-green-light);
}

.mf-orange-bg {
    background-color: var(--mf-orange);
}

.mf-green-bg {
    background-color: var(--mf-green);
}

.mf-gray-dark-bg {
    background-color: var(--mf-gray-dark);
}

.mf-gray-light-bg {
    background-color: var(--mf-gray-light);
}

/*------------ COLORS-----------------------*/
.mf-primary, table.refund-sumary td.mf-primary {
    color: var(--mf-primary);
}

.mf-gray {
    color: var(--mf-gray);
}

.mf-gray-dark, .mf-gray-hover.anchor-wrapper a {
    color: var(--mf-gray-dark);
}

.mf-green-dark, table.refund-sumary td.mf-green-dark {
    color: var(--mf-green-dark);
}

.mf-secondary {
    color: var(--mf-secondary);
}

.mf-red {
    color: var(--mf-red);
}

.mf-white {
    color: var(--mf-white);
}
/*------------ TYPOGRAPHY STYLE-----------------------*/

.mf-sm-txt-rg {
    font-size: var(--mf-sm-text);
    font-weight: var(--mf-text-regular);
}

.mf-sm-txt-bold {
    font-size: var(--mf-sm-text);
    font-weight: var(--mf-text-Bold);
}

.mf-base-txt-rg {
    font-size: var(--mf-base-text);
    font-weight: var(--mf-text-regular);
}

.mf-base-txt-semibold {
    font-size: var(--mf-base-text);
    font-weight: var(--mf-text-semiBold);
}

.mf-lg-txt-semibold {
    font-size: var(--mf-lg-text);
    font-weight: var(--mf-text-semiBold);
}
.mf-lg-txt-reg {
    font-size: var(--mf-lg-text);
    font-weight: var(--mf-text-regular);
}

.mf-xl-txt-semibold {
    font-size: var(--mf-xl-text);
    font-weight: var(--mf-text-semiBold);
}

.mf-primary-icon:before {
    color: var(--mf-primary);
}
.charities {
    color: var(--mf-gray);

}
/* ----------------- GLOBAL COMPONENTS-------------------------- */
.mf-card { /*OLD-CARD*/
    border-radius: var(--mf-radius);
    background-color: var(--mf-white);
    box-shadow: var(--mf-shadow-bottom);
}

.mf-main-card {
    border-radius: var(--mf-radius-md);
    background-color: var(--mf-white);
    border: 1px solid var(--mf-gray-light);
    box-shadow: var(--mfi-card-shadow);
}

.mf-main-card-padding {
    padding: 24px;
}

.mf-input-container-md, .mf-input-container-md,
div.dt-container .dt-search input,
div.dt-container #searchKey {
    border: 1px solid var(--mf-gray-20);
}
div.dt-container #searchKey {
    margin-inline-end: 8px;
    padding: 10px 12px;
    /* Arrow */
    appearance: none;
    background-image: url("../../imgs/new-dashboard/Dashboard-latest/Alt-Arrow-Down.svg");
    background-repeat: no-repeat;
    background-position: right 0.7rem top 50%;
    background-size: 16px auto;
    cursor: pointer;
}

    .mf-input-container-md, div.dt-container .dt-search input[type="search"] {
        padding: 10px 12px;
        line-height: 14.4px;
        height: 40px;
    }

.mf-gray-light-card {
    background-color: var(--mf-gray-light);
    padding: 12px 24px 24px;
    border-radius: var(--mf-radius-md);
}

.mf-border-bottom, #grid-view_wrapper .top, .top {
    border-bottom: 1px solid var(--mf-gray-20);
}
/* ------------------HEADING--------------------- */
.mf-page-title {
    font-size: var(--mf-xxl-text);
    line-height: 32.74px;
    font-weight: var(--mf-text-semiBold);
    color: var(--mf-gray-dark);
}

/*------------------------BUTTONS---------------------------------------------------*/
.mf-btn {
    font-weight: var(--mf-text-semiBold);
    font-size: var(--mf-Base-text);
    /*line-height: 17.88px;*/
    border-radius: var(--mf-default-radius);
    transition: 0.3s;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 12px;
}

.mf-btn-primary-text {
    border: none;
    color: var(--mf-primary);
    background-color: transparent;
}

.mf-btn-primary {
    color: var(--mf-white);
    background: var(--mf-primary);
    border: 2px solid var(--mf-primary);
    padding: 10px 16px;
    height: 40px;
}

    .mf-btn-primary span:before {
        color: var(--mf-white);
        transition: 0.3s;
    }

.mf-btn-primary-outlined {
    background: var(--mf-white);
    color: var(--mf-primary);
    border: 2px solid var(--mf-primary);
    padding: 8px 16px;
}
    .mf-btn-primary-outlined:hover, .mf-btn-primary:hover {
        color: var(--mf-primary);
        background: var(--mf-primary-light);
        border: 2px solid var(--mf-primary-light);
    }
        .mf-btn-primary:hover span:before {
            color: var(--mf-primary);
        }


.mf-btn-primary:disabled {
    background: var(--mf-gray-30);
    border: 2px solid transparent;
}

.mf-btn-secondary {
    color: var(--mf-white);
    background: var(--mf-secondary);
    border: 2px solid transparent;
    padding: 8px 16px;
    height: 40px;
}

    .mf-btn-secondary:hover, .mf-btn-secondary-outlined:hover {
        color: var(--mf-white);
        background: var(--mf-gray);
        border: 2px solid transparent;
    }

.mf-btn-secondary-outlined {
    background: var(--mf-white);
    color: var(--mf-secondary);
    border: 2px solid var(--mf-secondary);
    padding: 9.47px 16px;
}

.mf-btn-default-outlined { /*must be action button*/
    background: var(--mf-white);
    color: var(--mf-black);
    border: 2px solid var(--mf-gray-20);
    padding: 9.47px 16px;
}

    .mf-btn-default-outlined span:before {
        color: var(--mf-black);
        transition: 0.3s;
    }

    .mf-btn-default-outlined:hover span:before {
        color: var(--mf-white);
    }
    .mf-btn-default-outlined:hover,
    .mf-filter:hover {
        color: var(--mf-white);
        background: var(--mf-gray);
        border: 2px solid var(--mf-gray);
    }

        .mf-btn-default-outlined:hover .icon-Cloud-Download:before {
            color: var(--mf-white);
            transition: 0.3s;
        }

        .mf-btn-default-outlined:hover .icon-Cloud-Download:before,
        .mf-filter:hover .icon-Cloud-Download:before,
        .mf-filter:hover .icon-filter-lines:before {
            color: var(--mf-white);
        }

.mf-btn-success {
    background-color: var(--mf-green-dark);
    color: var(--mf-white);
    border: 2px solid var(--mf-green-dark);
    padding: 8px 12px;
}

    .mf-btn-success:hover {
        color: var(--mf-green-dark);
        background-color: var(--mf-green-light);
        border: 2px solid var(--mf-green-light);
    }

.mf-btn-danger {
    color: var(--mf-white);
    background: var(--mf-red);
    border: 2px solid var(--mf-red);
    padding: 8px 12px;
    height: 40px;
}
    .mf-btn-danger:hover {
        color: var(--mf-red);
        background: var(--mf-red-light);
        border: 2px solid var(--mf-red-light);
    }

    .mf-btn-danger .icon-Trash-Bin-Trash:before {
        color: var(--mf-white);
        font-size: 18px;
    }

.mf-btn-danger-outlined {
    background: var(--mf-white);
    color: var(--mf-red);
    border: 2px solid var(--mf-red);
    padding: 8px 12px;
}

.mf-batch.mf-btn-danger-outlined {
    height: unset !important;
}

.mf-btn-danger-outlined:hover {
    background: var(--mf-red-light);
    color: var(--mf-red);
    border: 2px solid var(--mf-red-light);
}

.mf-btn-dark-gray {
    color: var(--mf-white);
    background-color: var(--mf-gray-dark);
    padding: 10px 12px;
}

    .mf-btn-dark-gray span:before {
        color: var(--mf-white);
    }
.mf-export-excel span:before {
    color: var(--mf-gray-dark);
}
.mf-export-excel span {
    font-size: 16px;
}
.mf-export-excel .download-menu-item {
    display: flex;
    align-items: center;
}
.mf-export-excel .download-menu-item:hover {
    background-color: var(--mf-gray-light);
}


.btn.btn-info, .btn-info, .btn-info:active, .btn-info:focus {
    color: white;
}

.mf-btn.btn-info {
    background-color: var(--mf-primary);
}

.btn:first-child:active {
    color: inherit;
}

.mf-cancel-text {
    color: var(--mf-secondary);
    font-size: var(--mf-base-text);
    font-weight: var(--mf-text-semiBold);
    padding: 12px 16px;
}

    .mf-cancel-text:hover, .mf-cancel-text:active {
        color: var(--mf-secondary);
    }

.mf-btn-doc-icon:before,.mf-btn-edit-icon::before, 
.icon-Square-Share-Line.mf-btn-process-icon::before, .mf-btn-del-icon::before,
.icon-Plain.mf-btn-process-icon::before {
    font-size: 18px;
    margin: 0;
}

.mf-btn-edit-icon::before, .icon-Square-Share-Line.mf-btn-process-icon::before, .mf-btn-del-icon::before {
    color: var(--mf-primary);
}

.icon-Square-Share-Line.mf-btn-process-icon::before {
    color: var(--mf-white);
}

.mf-btn-del-icon::before {
    color: var(--mf-red);
}

/*------------CREATE INVOICE MENU ICONS STYLE-----------------------*/
.mf-create-invoice .mf-create-invoice-icon {
    padding: 0 !important;
    font-size: 24px;
}
.dropdown-menu.mf-dropdown-menu.mf-create-invoice {
    width: max-content;
}
/*------------CREATE MENU ICONS STYLE-----------------------*/
.dropdown-menu.mf-dropdown-menu.mf-create-menu {
    width: max-content;
}

.dropdown-menu .icon-Bill, .dropdown-menu .icon-Bill-List,
.dropdown-menu .icon-Link-Round, .dropdown-menu .icon-Bill-Check {
    padding: 10px;
    border-radius: var(--mf-radius-sm);
    font-size: 24px;
}

.mf-dropdown-menu .icon-Bill.mf-primary-light-bg:before {
    color: var(--mf-primary);
}

.mf-dropdown-menu .icon-Bill-List.mf-green-light-bg:before {
    color: var(--mf-green);
}

.mf-dropdown-menu .icon-Link-Round.mf-orange-light-bg:before {
    color: var(--mf-orange);
}

.mf-dropdown-menu .icon-Bill-Check.mf-yellow-light-bg:before {
    color: var(--mf-yellow);
}

/*------------TOP BAR ----------------------------------------------*/
.mf-header-container {
    padding: 12px 24px;
    background-color: var(--mf-white);
    border: none;
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
    position: relative;
    z-index: 1;
}

.mf-bottom-light-shadow {
    box-shadow: 0 2px 5px 0 #0000000D;
}

.mf-top-bar-container {
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}

.mf-nav-container {
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
}

.mf-nav-item-container {
    margin: 0 4px;
    cursor: pointer;
}

    .mf-nav-item-container:first-child {
        margin-inline-end: 0;
    }

.mf-nav-icon, .mf-icon-md {
    font-size: 20px;
}


/*------------AVATAR--------------------------------*/
.mf-circle-img-xs-flag {
    border-radius: 50%;
    display: inline-block;
    width: 24px;
    height: 24px;
}
.mf-circle-img-sm {
    border-radius: 50%;
    display: inline-block;
    width: 40px;
    height: 40px;
}

.mf-circle-img-md {
    border-radius: 50%;
    display: inline-block;
    width: 60px;
    height: 60px;
}

.mf-circle-img-lg {
    border-radius: 50%;
    display: inline-block;
    width: 100px;
    height: 100px;
}
/*------------NOTIFICATION- ICON----------*/

.mf-circle-img-sm {
    width: 40px;
    height: 40px;
}

.mf-black {
    color: black;
}

.mf-notification-bg , .mf-gray-circle-bg {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: var(--mf-gray-light);
    border-radius: 50%;
    width: 40px;
    height: 40px;
    position: relative;
}

.mf-outer-green-circle {
    position: absolute;
    top: -4px;
    right: 1px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background-color: var(--mf-green-light);
    display: flex;
    justify-content: center;
    align-items: center;
}

.mf-inner-green-circle {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: var(--mf-green-dark);
}

.mf-nav-dropdown.dropdown-toggle::after {
    display: none;
}

.mf-dropdown-item.unread {
    background-color: var(--mf-green-light-30);
}


/*---------------------NOTIFICATION- MENU---------------------------*/
.mf-notification-title {
    color: var(--mf-gray-dark);
    font-size: var(--mf-base-text);
    font-weight: var(--mf-text-semiBold);
    padding: 12px 16px;
    border-radius: var(--mf-default-radius) var(--mf-default-radius) 0 0;
    border-bottom: 1px solid var(--mf-gray-light);
}

.dropdown-menu.mf-notification {
    padding: 0;
    width: 18rem;
    margin: 11px 0 !important;
}

.mf-notification .mf-dropdown-item {
    border-bottom: 1px solid var(--mf-gray-light);
    border-top: none;
}

div.dropdown-menu ul li:hover,
.dropdown-item:hover {
    background-color: var(--mf-gray-light);
}

.noti-title {
    padding: 16px 16px 0;
    line-height: 16px;
    display: inline-block;
    clear: both;
    font-size: var(--mf-sm-text);
    color: var(--mf-gray-dark);
    width: 100%;
    color: #000;
    
}

.noti-time {
    padding: 0 16px 16px;
    color: var(--mf-gray);
    display: inline-block;
    font-size: var(--mf-sm-text);
    clear: both;
    margin-top: 4px;
    width: 100%;
}

#notifications-content .scroll-content {
    max-height: 250px !important;
}

.mf-notification-footer {
    font-size: var(--mf-base-text);
    color: var(--mf-priary);
    font-weight: var(--mf-text-semiBold);
    padding: 11px;
    line-height: 18px;
    text-align: center;
    border-radius: 0 0 var(--mf-default-radius) var(--mf-default-radius);
}

    .mf-notification-footer a {
        text-decoration-line: none;
    }

/*---------------------NOTIFICATION- MENU---------------------------*/

.mf-notification-item-container {
    border: 1px solid var(--mf-gray-light);
    padding: 24px;
    border-radius: var(--mf-radius-md);
    box-shadow: var(--mfi-card-shadow);
    cursor: pointer;
}

.mf-notification-item {
    font-size: var(--mf-base-text);
    font-weight: var(--mf-text-semiBold);
    color: var(--mf-gray-dark);
}

.mf-notification-calender.icon-Calendar {
    font-size: 18px;
    margin-inline-end: 8px;
}

    .mf-notification-calender.icon-Calendar:before {
        color: var(--mf-gray);
    }

.mf-notification-date {
    font-size: var(--mf-sm-text);
    font-weight: var(--mf-text-regular);
    color: var(--mf-gray);
    margin-inline-end: 24px;
    padding-top: 5px;
}

.mf-notification-item-container .icon-Alt-Arrow-Right:before {
    color: var(--mf-gray-dark);
    font-size: 24px;
}


/*------------ USER- DROPDOWN- MENU----------------------*/
.mf-user-info {
    width: auto;
    margin-inline-start: 14px;
}

.mf-nav-dropdown.dropdown-toggle::after {
    border: none
}

.dropdown-menu {
    border: none;
    box-shadow: var(--mf-menu-shadow);
    padding: 12px 0;
    border-radius: var(--mf-radius-md);
}

.dropdown-item.active, .dropdown-item:active {
    background-color: var(--mf-blue-gray-bg);
    /*border-radius: var(--mf-radius);*/
    color: var(--mf-primary-color);
}


.mf-dropdown-menu {
    border-radius: var(--mf-radius-md) !important;
    transform: translate3d(0px, 53.4px, 0px) !important;
}

.mf-dropdown-item:hover {
    border-radius: 0;
}

.icon-Logout,
.icon-Settings,
.icon-User-Rounded {
    font-size: 24px;
}

.user-menu-arrow {
    color: #1C274C;
    font-size: 10px;
}

.mf-dropdown-item.mf-yellow-hover:hover .user-menu-arrow,
.mf-dropdown-item.mf-yellow-hover:hover div span {
    color: var(--mf-white);
}

/*------------ Multi login / small - MENU----------------------*/

.mf-nav-dropdown .icon-Alt-Arrow-Down1:before {
    color: var(--mf-primary);
}

.mf-multiLogin-menu {
    transform: translate3d(0px, 43.4px, 0px) !important;
    padding: 8px 0;
}

.mf-multiLogin-menu-item {
    color: var(--mf-gray);
    font-size: var(--mf-base-text);
    font-weight: var(--mf-text-semiBold);
    padding: 8px 12px;
    cursor: pointer;
}

/*------------ ACTION / small - MENU----------------------*/
.mf-dropdown-menu.mf-action-menu {
    transform: translate3d(0px, 25.4px, 0px) !important;
    padding: 8px 0;
}

.mf-action-menu-item {
}

.mf-action-menu-item, .mf-sm-menu-item,
.mf-sm-menu-item a {
    color: var(--mf-gray-dark);
    font-size: var(--mf-base-text);
    font-weight: var(--mf-text-regular);
}
.mf-action-menu-item, .mf-sm-menu-item {
    padding: 8px 16px;
    cursor: pointer;
}

/*-------------------------------- SIDEBAR---------------------------------------*/
.mf_tooltip {
    position: relative;
    display: inline-block;
}
.mf-side-menu-item.mf_tooltip .mf_text {
    visibility: hidden;
    width: 125px;
    background-color: black;
    color: white;
    text-align: left;
    border-radius: 6px;
    padding: 4px;
    position: absolute;
    z-index: 1;
    bottom: 115%;
    left: 50%;
    margin-left: -28px;
    font-size: var(--mf-sm-text);
    font-weight: var(--mf-text-regular)
}

    .mf_tooltip .mf_text::after {
        content: "";
        position: absolute;
        top: 100%;
        left: 20%;
        margin-left: -5px;
        border-width: 5px;
        border-style: solid;
        border-color: black transparent transparent transparent;
    }
.mf_text {
    word-wrap: break-word !important;
    white-space: normal;
    text-align: center !important;
}

.mf_tooltip:hover .mf_text {
    visibility: visible;
}

.icon-Double-Alt-Arrow-Left:before,
.icon-Double-Alt-Arrow-Right:before {
    color: var(--mf-gray);
    font-size: 30px;
    background: var(--mf-gray-30);
    cursor: pointer;
}

.icon-Double-Alt-Arrow-Left:before {
    border-radius: var(--mf-radius-md) 0 0 var(--mf-radius-md);
}

.icon-Double-Alt-Arrow-Right:before {
    border-radius: 0 var(--mf-radius-md) var(--mf-radius-md) 0;
    display: none;
}

.icon-Double-Alt-Arrow-Right {
    display: flex;
    position: absolute;
    right: -30px;
    top: 20px;
}

    .icon-Double-Alt-Arrow-Right:before {
        display: none;
    }

.mf-collapsed.mf-side-bar-container {
    width: 64px;
}

    .mf-collapsed.mf-side-bar-container .mf-side-menu-item {
        min-width: unset;
    }

    .mf-collapsed.mf-side-bar-container .mf-side-menu-title,
    .mf-collapsed.mf-side-bar-container .mf-category-title,
    .mf-collapsed.mf-side-bar-container .mf-logo,
    .mf-collapsed.mf-side-bar-container .icon-Double-Alt-Arrow-Left:before,
    .mf-collapsed.mf-side-bar-container .icon-Alt-Arrow-Down {
        display: none;
    }

    .mf-collapsed.mf-side-bar-container .mf-letter-logo,
    .mf-collapsed.mf-side-bar-container .icon-Double-Alt-Arrow-Right:before {
        display: block;
    }

.mf-side-bar-container {
    width: 260px;
    background-color: white;
    z-index: 2;
    position: relative;
    transition: 0.3s;
}

.mf-balance-container {
    display: none;
}

.mf-side-bar {
    background-color: white;
    margin-bottom: 6rem;
    box-shadow: var(--mfi-card-shadow);
}

.mf-side-menu {
    padding: 4px;
}

.mf-logo {
    width: 137.25px;
    height: 20px;
    margin: 15px 20px;
}

.mf-letter-logo {
    display: none;
    width: 32px;
    margin: 12px 16px 6px;
}

.mf-category-title {
    padding: 16px 8px 0;
    margin: 4px 0;
}

.mf-side-menu-item {
    margin: 4px 0;
    padding: 8px;
    min-width: max-content;
    border-radius: var(--mf-radius-md);
}
.mf-side-menu-item.mf-flex {
    display: flex !important;
}

.mf-side-menu-item-content {
    display: flex;
    align-items: baseline;
}

.mf-sb-icon {
    font-size: 24px;
}

.mf-side-menu-title {
    color: var(--mf-gray);
    font-size: var(--mf-base-text);
    margin-inline-end: 0.75rem;
    font-weight: var(--mf-text-semiBold);
    margin-inline-start: 12px;
    line-height: 16px;
}

.mf-side-menu-item a {
    text-decoration-line: none;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}

.mf-side-bar-arrow {
    color: var(--mf-gray);
    font-size: 12px;
}

.mf-side-menu-item.mf-active span, .mf-side-menu-item.mf-active span::before {
    color: var(--mf-gray-dark);
}


i.fa-angle-down {
    transition: 0.3s;
}

.mf-side-menu-item.mf-active i.fa-angle-down {
    transform: rotate(-180deg);
    -webkit-transform: rotate(-180deg);
}

.mf-side-menu-item.mf-active a.collapsed i.fa-angle-down {
    transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
}

.mf-sub-menu {
    position: relative;
    margin: 0.35rem 0;
}

.mf-sub-menu-item {
    padding: 4px 0;
    margin: 4px 0 4px 54px;
    font-weight: var(--mf-text-regular);
    color: var(--mf-gray);
    font-size: var(--mf-base-text);
}
.mf-sub-menu-item .mf-side-menu-title {
    font-weight: var(--mf-text-regular);
    margin-inline-start: 4px;
}
.mf-sub-menu-anchor {
    font-weight: inherit;
    color: inherit;
    font-size: inherit;
    text-decoration-line: none;
    cursor: pointer;
}
.mf-sub-menu-item:hover .mf-side-menu-title,
.mf-sub-menu-item:hover, .mf-sub-menu-item a:hover, .mf-sub-menu-item.active a,
li.active.mf-sub-menu-item::marker {
    color: var(--mf-primary);
}
.mf-side-menu-item {
    position: relative;
}
.mf-side-bar-container.mf-collapsed .mf-sub-menu.collapse.show {
    width: max-content;
    background-color: var(--mf-white);
    padding: 18px 12px;
    border-radius: var(--mf-default-radius);
    margin-inline-start: 4rem;
    margin-top: -44px;
    box-shadow: var(--mf-menu-shadow);
    position: absolute;
    list-style: none;
}
    .mf-side-bar-container.mf-collapsed .mf-sub-menu.collapse.show .mf-sub-menu-item {
        margin: 4px 0;
        padding: 4px 12px 0;
    }
.mf-sub-menu-item.mf-active, .mf-sub-menu-item.mf-active a, .mf-sub-menu-item.mf-active .mf-side-menu-title {
    color: var(--mf-primary);
    font-weight: var(--mf-text-semiBold);
}
a.mf-sub-menu-anchor span.mf-side-menu-title {
    display: block !important;
}
/*.collapsing {
    height: 0px !important;
}*/
.collapsing {
    height: auto !important;
    transition: none !important;
}
/*-------------------------------- DATATABLE TOTAL GRAND---------------------------------------*/
div.dt-processing > div:last-child > div {
    background: var(--mf-primary);
}
    .label-primary.total-values-label, .label-primary.transactions-totals, .mf-grand-total-val {
    background-color: transparent;
    color: var(--mf-blue-dark);
    font-size: var(--mf-xl-text);
    font-weight: var(--mf-text-semiBold);
}

.mf-grand-total-label {
    color: var(--mf-gray-dark);
    font-size: var(--mf-lg-text);
    font-weight: var(--mf-text-semiBold);
    margin-inline-end: 12px;
}

#total-values .grand-total-container {
    border-top: 1px dashed var(--mf-primary);
    background-color: var(--mf-blue-light-20);
    margin: 0;
    padding: 16px;
}

.grand-total-container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 60px;
}
.dt-length .dt-input {
    margin-inline-end: 8px !important;
}
/*-------------------------------- DATATABLE SEARCH---------------------------------------*/
.dt-search label {
    display: none;
}

div.dt-container .dt-search input[type="search"]::placeholder {
    font-size: var(--mf-base-text);
    font-weight: var(--mf-text-regular);
}

div.dt-container .dt-search {
    display: flex;
    justify-content: flex-end;
}

/*-------------------------------- DATATABLE ---------------------------------------*/
table.data-table {
    overflow-x: scroll;
    overflow-y: hidden;
    white-space: nowrap;
}

div.dt-container div.dt-layout-cell {
    padding: 8px 0;
}

.ui.table > thead > tr > th {
    font-size: 14px;
    font-weight: 600;
}

.ui.table > tbody > tr > td, .ui.table > tr > td {
    vertical-align: middle;
}

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

.ui.table > thead > tr:first-child > th:first-child,
.ui.table > thead > tr:first-child > th:last-child {
    border-radius: 0;
}

.ui.table {
    border: 0;
}

.ui.celled.table > thead > tr > th {
    background-color: var(--mf-gray-light);
    color: var(--mf-black);
}

.ui.celled.table > tbody > tr > th, .ui.celled.table > tfoot > tr > th, .ui.celled.table > thead > tr > th, .ui.celled.table > tr > th {
    border-top: 0;
    border-left: 0;
    border-right: 0;
    border-bottom: 0;
    padding: 16px 32px 16px 16px;
}

.ui.celled.table > tbody > tr > td, .ui.celled.table > tfoot > tr > td, .ui.celled.table > tr > td {
    border-top: 0;
    border-left: 0;
    border-right: 0;
    border-bottom: 1px solid var(--mf-gray-20);
    padding: 16px 32px 16px 16px;
    color: var(--mf-gray);
}

table.dataTable thead > tr > th.dt-orderable-desc span.dt-column-order:after,
table.dataTable thead > tr > th.dt-orderable-asc span.dt-column-order:before,
.dt-ordering-desc, .dt-ordering-asc {
    color: var(--mf-primary) !important;
}


table.dataTable thead > tr > th.dt-orderable-asc span.dt-column-order:before {
    position: absolute;
    font-family: FontAwesome;
    content: "\f0de";
    content: "\f0de" / "";
    font-size: 16px;
}
table.dataTable thead > tr > th.dt-orderable-desc span.dt-column-order:after {
    top: 40%;
    font-family: FontAwesome;
    content: "\f0dd";
    content: "\f0dd" / "";
    font-size: 16px;
}

#invalid_datas .dt-column-title, .dt-column-title {
    margin-inline-end: 8px;
}

table.dataTable.dtr-inline.collapsed > tbody > tr > td.dtr-control:before, table.dataTable.dtr-inline.collapsed > tbody > tr > th.dtr-control:before {
    margin-inline-end: 0.5em;
    display: inline-block;
    box-sizing: border-box;
    border-top: none !important;
    border-left: none !important;
    border-bottom: none !important;
    border-right: none !important;
}

table.dataTable.dtr-inline.collapsed > tbody > tr > td.dtr-control:before,
table.dataTable.dtr-inline.collapsed > tbody > tr > th.dtr-control:before {
    font-family: FontAwesome !important;
    content: "\f138" !important;
    content: "\f138" / "";
}

table.dataTable.dtr-inline.collapsed > tbody > tr.dtr-expanded > td.dtr-control:before,
table.dataTable.dtr-inline.collapsed > tbody > tr.dtr-expanded > th.dtr-control:before {
    font-family: FontAwesome !important;
    content: "\f13a" !important;
    border-top: none !important;
    border-left: none !important;
    border-bottom: none !important;
    border-right: none !important;
}

.mf-pending, .mf-success, .mf-cancel {
    margin-bottom: 8px;
}

.mf-pending, .mf-success, .mf-cancel , .mf-status-bg {
    padding: 2px 12px;
    border-radius: var(--mf-radius-sm);
    background-color: var(--mf-gray-light);
}

.mf-pending {
    color: var(--mf-orange);
}

.mf-success {
    color: var(--mf-green-dark);
}

.mf-cancel, .mf-danger {
    color: var(--mf-red);
}

td span.text-success, td span.text-warning, td span.text-danger {
    font-weight: 500;
}

div.dataTables_length div.form-control button.dropdown-toggle {
    border-radius: 0.28571429rem;
}


table.dataTable.dtr-inline.collapsed > tbody > tr > td:first-child:before, table.dataTable.dtr-inline.collapsed > tbody > tr > th:first-child:before {
    top: 13px;
}

.ui.table > tbody > tr > td, .ui.table > tr > td {
    border-top: none;
}

.ui.celled.table > tbody > tr > td:first-child {
    color: var(--mf-primary) !important;
}

table.dataTable.ui.table th.dt-type-numeric {
    text-align: left;
}

.fa-solid.fa-ellipsis-vertical.actions {
    float: inline-end;
    color: black;
    padding: 8px;
}

    .fa-solid.fa-ellipsis-vertical.actions:hover {
        color: black;
    }

.batchInvoiceDetails [class="row"]:first-child {
    margin: 24px 24px 0 24px;
}

.batchInvoiceDetails [class="row"]:last-child {
    margin: 0 24px 24px 24px;
}

div.dt-button-collection .dt-button {
    border-radius: 0 !important;
}
button.dt-button:hover {
    text-decoration: none !important;
}
.mf-dt-doc, .buttons-columnVisibility {
    font-size: var(--mf-base-text);
    font-weight: var(--mf-text-semiBold);
}
    .buttons-columnVisibility {
        color: var(--mf-gray-dark);
    }
    .mf-dt-icon {
        font-size: 18px;
        width: 18px;
        margin-inline-end: 8px;
    }
    .mf-dt-icon.fa-file-pdf, .buttons-pdf .mf-dt-doc {
        color: var(--mf-red);
    }
    .mf-dt-icon.fa-file-excel, .buttons-excel .mf-dt-doc {
        color: var(--mf-green-dark);
    }
    .mf-dt-icon.fa-file-lines, .buttons-csv .mf-dt-doc {
        color: var(--mf-orange);
    }

div.dt-button-collection .dt-button {
    display: flex;
    flex-direction: row;
    align-items: center;
}

#invoices .dt-container .top .dt-buttons {
    width: -moz-available; 
    width: -webkit-fill-available;
    width: fill-available;
}
/*---------------------------------- DEFAULT TABLE ------------------------------------------*/
.mf-default-table thead tr {
    background-color: var(--mf-gray-light);
}
.mf-default-table th, .mf-default-table td {
    padding: 16px;
}
.mf-default-table td {
    border-bottom: 1px solid var(--mf-gray-20);
}
.mf-default-table th {
    color: var(--mf-secondary);
    font-size: var(--mf-base-text);
    font-weight: var(--mf-text-semiBold);
}
/*-------------------FILTERS---------------------------------------------------------*/
#filters .well, #orders-filters .well {
    border-radius: var(--mf-radius-md);
    background-color: var(--mf-gray-light);
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    align-items: end;
    justify-content: start;
}

.mf-filter {
    display: flex;
    color: var(--mf-gray-dark);
    background-color: var(--mf-white);
    font-size: var(--mf-base-text);
    font-weight: var(--mf-text-semiBold);
    border: 2px solid var(--mf-gray-20);
    border-radius: var(--mf-default-radius);
}

    .mf-filter a {
        padding: 8px 16px;
        color: inherit;
    }

.mf-filters-icon {
    color: var(--mf-gray-dark);
    width: 20px;
*/ margin-inline-end: 4px;
}
#orders-filters .well div:last-child, #filters .well div:last-child {
    margin-left: auto;
}
#orders-filters .well div,
#filters .mf-transaction.well div,
#filters .well div {
    flex: 1 0 20%;
    max-width: 281px;
}

    #filters input.form-control, #orders-filters input.form-control,
    #filters div.form-control button.dropdown-toggle, #orders-filters div.form-control button.dropdown-toggle,
    #filters select.form-control, #orders-filters select.form-control,
    #filters div.form-control, #orders-filters div.form-control,
    #btn-refresh {
        width: 100% !important;
    }
/*-------------------DATATABLE BUTTONS---------------------------------------*/
.top {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.bottom {
    display: flex;
    justify-content: start;
    align-items: center;
}

    .bottom div.dt-info {
        margin-inline-end: 6px;
    }

    .bottom div:last-child {
        flex-grow: 3;
        display: flex;
        justify-content: end;
    }

.dt-paging {
    align-self: end;
}

.dt-buttons {
    display: flex;
}


.dt-button span, div.dt-buttons div.dt-button-split .dt-button:last-child {
    display: flex;
    align-items: center;
}

a.dt-button {
    background: none;
    border: none;
    font-size: 14px;
    font-weight: 500;
    text-shadow: none;
}

.dt-button span.dt-button-down-arrow {
    display: none;
}

div.dt-buttons > .dt-button {
    border: none;
}

a.dt-button:hover, button.dt-button:hover, div.dt-button:hover, a.dt-button.active,
.btn-default.active, :not(.btn-check) + .btn:active, .btn:first-child:active {
    border: none !important;
    text-decoration: underline;
}

a.dt-button::selection, button.dt-button::selection, div.dt-button {
    background-color: yellow;
    color: rgba(0,0,0,.87);
}


.buttons-copy.btn.btn-default, a.buttons-print.btn.btn-default,
a.buttons-excel.btn.btn-default, a.buttons-csv.btn.btn-default,
a.buttons-pdf.btn.btn-default {
    color: var(--mf-gray-dark) !important;
}

div.dt-buttons > div.dt-button-split .dt-button {
    background: none;
}

div.dt-button-split {
    border-left: none;
}

a.buttons-csv.btn.btn-default,
a.buttons-excel.btn.btn-default,
.buttons-print.btn.btn-default,
.buttons-copy.btn.btn-default,
.buttons-colvis.btn.btn-default,
div.dt-buttons div.dt-button-split .dt-button:last-child,
div.dt-buttons > .dt-button {
    border: none !important;
    padding: 8px 16px;
    border-radius: var(--mf-radius-md) !important;
    font-size: var(--mf-base-text);
    font-weight: var(--mf-text-regular);
}

    .buttons-csv.btn.btn-default:active, .buttons-csv.btn.btn-default:hover,
    .dt-button-split-drop:active, .dt-button-split-drop:hover,
    div.dt-buttons div.dt-button-split .dt-button:last-child:active, div.dt-buttons div.dt-button-split .dt-button:last-child:hover,
    .buttons-excel.btn.btn-default:active, .buttons-excel.btn.btn-default:hover,
    .buttons-print.btn.btn-default:active, .buttons-print.btn.btn-default:hover,
    .buttons-copy.btn.btn-default:active, .buttons-copy.btn.btn-default:hover,
    .buttons-colvis.btn.btn-default:active, .buttons-colvis.btn.btn-default:hover {
        background-color: var(--mf-gray-light) !important;
        background: var(--mf-gray-light) !important;
        color: var(--mf-gray-dark) !important;
    }

div.dt-buttons div.dt-button-split .dt-button:first-child {
    display: none;
}


.form-group > label[class*="col-"] {
    color: var(--mf-primary-color);
    font-size: 14px;
}

/*----------------------------FORMS------------------------------------------*/
/*----------------------------INPUTS---------------------------*/

.ace-file-input ~ ul {
    margin-inline-start: 20px;
    margin-top: 8px;
}
.mf-nested-inputs {
    margin: -20px 16px 24px;
}

.form-title, .mf-card-title,
.mf-table-title {
    color: var(--mf-secondary);
    font-weight: var(--mf-text-semiBold);
    font-size: var(--mf-lg-text);
    padding: 12px 0;
}


.mf-card-icon, .icon-Settings.mf-card-icon {
    color: var(--mf-secondary);
    font-size: 20px;
    margin-inline-end: 8px;
}

.mf-rounded-icon {
    font-size: 10px;
    border: 1.5px solid var(--mf-primary);
    padding: 4px 6px;
    border-radius: 50%;
}

.mf-row-container, .mf-fit-content {
    width: fit-content;
}

    .mf-row-container div.mf-flex:first-child {
        margin-inline-end: 16px;
    }

.mf-label, .control-label {
    color: var(--mf-gray-dark);
    font-size: var(--mf-sm-text);
    font-weight: var(--mf-text-Bold);
    margin-bottom: 4px;
}


textarea, .mf-input, .form-control, input[type="text"], input,
input.form-control, div.form-control button.dropdown-toggle,
.form-group textarea, div.input-group select.form-control {
    border: 1px solid var(--mf-gray-20);
    border-radius: var(--mf-radius-md);
    background: var(--mf-white);
}

    select.form-control,
    .bootstrap-select, div.form-control,
    .mf-input-container, .mf-360,
    input.form-control, div.form-control button.dropdown-toggle,
    div.input-group select.form-control,
    .ace-file-input .ace-file-container {
        width: 360px !important;
        height: 40px;
    }
        select.form-control.mf-table-input,
        input.form-control.mf-table-input, div.form-control.mf-table-input,
        div.form-control.mf-table-input button.dropdown-toggle {
            width: 200px !important;
        }

td div input.form-control, td input.form-control {
    width: unset;
}

input.form-control.input-sm {
    width: 251px !important;
}

input.form-control.input-xs {
    width: 185px;
}

.input-group:not(.has-validation) > :not(:last-child):not(.dropdown-toggle):not(.dropdown-menu):not(.form-floating) {
    border-radius: var(--mf-radius-sm);
}

.input-group:not(.has-input) .input-group-addon {
    color: var(--mf-primary);
    font-size: var(--mf-base-text);
    font-weight: var(--mf-text-semiBold);
}

textarea {
    width: 360px;
    height: 80px;
    padding: 12px 20px;
    box-sizing: border-box;
    font-size: 16px;
    resize: none;
}

.bootstrap-select .dropdown-toggle .filter-option-inner-inner {
    font-size: var(--mf-base-text);
    font-weight: var(--mf-text-regular);
    color: var(--mf-gray-dark);
}
.bootstrap-select .dropdown-toggle .filter-option {
    height: unset !important;
}

.form-control::placeholder, input[type="text"]::placeholder, input::placeholder,
input.form-control::placeholder, textarea::placeholder {
    font-weight: var(--mf-text-regular);
    opacity: 0.5;
    color: var(--mf-gray);
}

.form-control:disabled, .mf-input-read-only {
    color: var(--mf-gray-dark);
    background-color: var(--mf-gray-light);
    font-size: var(--mf-base-text);
    font-weight: var(--mf-text-regular);
}

.textarea-lg {
    width: 518px;
}

.mf-w-100 {
    width: 100px !important;
}


input[readonly] {
    color: var(--mf-gray-dark);
    background: var(--mf-white);
    border: 1px solid var(--mf-gray-20);
    cursor: default;
}

    input[readonly]:hover {
        border-color: var(--mf-gray-20);
    }

    input[readonly]:focus {
        -webkit-box-shadow: none;
        box-shadow: none;
    }

.mf-webhook-settings input.form-control {
    width: 800px !important;
}

.mf-editable-input input.form-control {
    width: 150px !important;
    border: none;
    height: 22px;
    background: transparent;
    color: var(--mf-primary);
}
/*----------------------------CHECKBOX ++ RADIAL INPUTS--------------------------*/
input[type=checkbox].ace  {
    position: absolute;
    z-index: 1;
    width: 18px;
    height: 18px;
    cursor: pointer;
}

label input[type=checkbox].ace {
    z-index: -100 !important;
    width: 1px !important;
    height: 1px !important;
    position: absolute;
}

input[type=checkbox].ace ~ .lbl {
    position: relative;
    display: inline-block;
    padding: 8px 24px 8px 0;
    margin: 8px 16px 8px 0;
    line-height: 20px;
    min-height: 18px;
    min-width: 160px;
    font-size: var(--mf-base-text);
    font-weight: var(--mf-text-semiBold);
    cursor: pointer;
}

input[type=checkbox].ace ~ .lbl::before {
    cursor: pointer;
    font-family: fontAwesome;
    font-weight: normal;
    font-size: 12px;
    color: var(--mf-primary);
    content: "\a0";
    background-color: var(--mf-white);
    border-radius: var(--mf-radius-sm);
    margin: 2px;
    display: inline-block;
    text-align: center;
    height: 20px;
    line-height: 16px;
    min-width: 20px;
    margin-inline-end: 8px;
    position: relative;
    top: -1px;
    border-radius: 4px;
    border: 2px solid var(--mf-gray) !important;
}

input[type=checkbox].ace:checked ~ .lbl::before {
    display: inline-block;
    content: '\f00c';
    background-color: var(--mf-primary-light);
    border: 2px solid var(--mf-primary-light) !important;
}


input[type=radio].ace ~ .lbl {
    position: relative;
    display: inline-block;
    margin: 6px 8px;
    line-height: 20px;
    min-height: 18px;
    min-width: 18px;
    font-size: var(--mf-base-text);
    font-weight: var(--mf-text-semiBold);
    cursor: pointer;
}

    input[type=radio].ace ~ .lbl::before {
        display: inline-block;
    }

input[type="radio"] {
    /*  Add if not using autoprefixer */
    -webkit-appearance: none;
    appearance: none;
    /* For iOS < 15 to remove gradient background */
    background-color: #fff;
    /*Not removed via appearance*/
    margin: 0;
    font-size: 2rem;
    color: var(--mf-gray);
    width: 0.65em;
    height: 0.65em;
    border: 0.05em solid var(--mf-gray);
    border-radius: 50%;
    display: grid;
    place-content: center;
    padding: 0;
    cursor: pointer;
}

    input[type="radio"]::before {
        content: "";
        width: 0.4em;
        height: 0.4em;
        border-radius: 50%;
        transform: scale(0);
        transition: 120ms transform ease-in-out;
        box-shadow: inset 1em 1em var(--mf-primary);
    }

    input[type="radio"]:checked {
        border: 0.05em solid var(--mf-primary);
    }

        input[type="radio"]:checked::before {
            transform: scale(1);
        }

label.radio-inline {
    display: inline-flex;
    align-items: center;
}

.radio-inline {
    padding-inline-end: 24px;
}

/*.input-group > :not(:first-child):not(.dropdown-menu):not(.valid-tooltip):not(.valid-feedback):not(.invalid-tooltip):not(.invalid-feedback) {
    border-top-left-radius: var(--mf-radius-sm);
    border-bottom-left-radius: var(--mf-radius-sm);
}*/

/*------------COUNTRY CODE + MOBILE NUMBER WRAPPER -----------------------*/
.mf-mobile-inputs-wrapper {
    display: flex;
    align-items: center;
    border: 1px solid var(--mf-gray-20);
    border-radius: var(--mf-radius-md);
    background: var(--mf-white);
    width: 360px;
    box-sizing: content-box;
}
.mf-pli-body .mf-mobile-inputs-wrapper {
    width: 100%;
}
    /*.mf-mobile-inputs-wrapper .bootstrap-select, .mf-mobile-inputs-wrapper div.form-control,*/
    .mf-mobile-inputs-wrapper select.form-control.countryPhoneCode,
    .mf-mobile-inputs-wrapper div.form-control button.dropdown-toggle {
        width: unset !important;
        border: none;
    }
    .mf-mobile-inputs-wrapper .input-group-addon {
        text-align: start;
    }
        .mf-mobile-inputs-wrapper .input-group-addon .bootstrap-select,
        .mf-mobile-inputs-wrapper input.form-control {
            width: 100% !important;
            
        }
    .mf-mobile-inputs-wrapper input.form-control {
        border-top: none;
        border-right: none;
        border-bottom: none;
        border-left:  1px solid var(--mf-gray-20);
        border-radius: 0px;
    }


/*------------INPUTS - ICONS STYLE-----------------------*/
.mf-input-icon-wrapper, .mf-filter-date-wrapper {
    display: flex;
    align-items: center;
    border: 1px solid var(--mf-gray-20);
    border-radius: var(--mf-radius-md);
    background: var(--mf-white);
}
.mf-input-icon-wrapper {
    width: 360px;
}

.mf-input-icon-wrapper.input-sm {
    width: 251px;
}

.mf-filter-date-wrapper .form-control,
.mf-input-icon-wrapper .form-control {
    border: none !important;
}

    .mf-filter-date-wrapper .icon-Calendar,
    .mf-input-icon-wrapper .icon-Calendar {
        font-size: 24px;
        background-color: var(--mf-gray);
        padding: 6.7px;
        width: fit-content;
        height: 40px;
        border-radius: 0 var(--mf-radius-sm) var(--mf-radius-sm) 0;
    }

        .mf-filter-date-wrapper .icon-Calendar:before,
        .mf-input-icon-wrapper .icon-Calendar:before {
            color: var(--mf-gray-light);
        }

.mf-input-end-word-second {
    left: 728px;
    margin-top: 8px;
    color: var(--mf-primary);
}



.mf-back-icon {
    font-size: 16px;
    padding: 5px 5px 3px;
    margin-inline-end: 8px;
}

.icon-Alt-Arrow-Down:before, .icon-Alt-Arrow-Right:before {
    font-size: 16px;
}

.mf-btn .icon-Cloud-Download, .mf-filter .icon-filter-lines,
.icon-Cloud-Download.mf-primary-icon {
    margin-inline-end: 8px;
    font-size: 20px;
}


/*------------ -----------------Tables---------------------*/
table.refund-sumary, table.refund-sumary td {
    border: 1px solid var(--mf-gray-20);
    padding: 16px;
    background-color: var(--mf-white);
    font-size: var(--mf-base-text);
}

table.refund-sumary {
    border-collapse: collapse;
}

    table.refund-sumary.refund td {
        width: 50%;
    }
/*------------ -----------------PAGINATION-----------------------*/
div.dt-container .dt-paging .dt-paging-button {
    margin: 0 8px;
}

    div.dt-container .dt-paging .dt-paging-button.first,
    div.dt-container .dt-paging .dt-paging-button.last {
        display: none;
    }

    div.dt-container .dt-paging .dt-paging-button.current,
    div.dt-container .dt-paging .dt-paging-button.current:hover,
    div.dt-container .dt-paging .dt-paging-button.current:active {
        background-color: var(--mf-primary) !important;
        color: var(--mf-white) !important;
        border-radius: 50%;
        width: 36px;
        height: 36px;
        border: none;
        font-size: var(--mf-base-text);
        font-weight: var(--mf-text-semiBold);
    }

div.dt-container .dt-paging [class="dt-paging-button"] {
    /* only apply to an element if the element has a class and the only class is 'foobar'. */
    background-color: var(--mf-gray-light);
    color: var(--mf-gray-dark);
    border-radius: 50%;
    width: 36px;
    height: 36px;
    border: none;
    font-size: var(--mf-base-text);
    font-weight: var(--mf-text-semiBold);
}

    div.dt-container .dt-paging [class="dt-paging-button"]:active,
    div .dt-container .dt-paging [class="dt-paging-button"]:hover {
        background-color: var(--mf-primary-light) !important;
        border: 1px solid var(--mf-primary-light) !important;
        color: var(--mf-primary) !important;
    }

div .dt-container .dt-paging .dt-paging-button.next,
div .dt-container .dt-paging .dt-paging-button.next:hover,
div .dt-container .dt-paging .dt-paging-button.next:active,
div .dt-container .dt-paging .dt-paging-button.previous,
div .dt-container .dt-paging .dt-paging-button.previous:hover,
div .dt-container .dt-paging .dt-paging-button.previous:active {
    background-color: transparent !important;
    border: none !important;
    color: var(--mf-gray-dark) !important;
}

.grid-search-only_wrapper .top 
{
    justify-content: flex-end !important;
}
div.dt-container .dt-paging .dt-paging-button {
    padding: unset !important;
}


/*-----------------------------  CONTACTS PAGE  -----------------------*/
.mf-contacts-form input.form-control, .mf-half-width,
.mf-contacts-form div.form-control, .mf-contacts-form .ace-file-input .ace-file-container,
.mf-contacts-form textarea, .mf-contacts-form #btn-submit {
    width: 50% !important;
}

    .mf-contacts-form div.form-control button.dropdown-toggle,
    .form-control.mf-full-width,
    .mf-full-width {
        width: 100% !important;
    }

.mf-slash:not(:last-child):after {
    content: "/";
}

/*-----------------------------  ICONS  -----------------------*/
.dt-button .icon-Copy:before, .dt-button .icon-Printer-Minimalistic1:before, .dt-button .icon-Settings:before,
.dt-button .icon-Cloud-Download:before, .dt-button .icon-Square-Share-Line:before {
    font-size: 20px;
    margin-inline-end: 4px;
    color: var(--mf-gray-dark);
}

#btn-download .icon-Cloud-Download:before {
    color: var(--mf-white);
}
.fa.fa-plus {
    padding-inline-end: 8px;
}

/*-----------------------------  IMAGES  -----------------------*/
.mf-card-200 {
    width: 200px;
    height: 200px;
}

/*------------ -----------------  HIDDEN  -----------------------*/
#invoice-items [class="row"],
#invoice-transactions [class="row"],
#invoice-views [class="row"] {
    display: none;
}
/*------------ -----------------  POSITION  -----------------------*/
.mf-export-excel {
    top: 45px;
    left: 0;
}


/* -------------------FOOTER - NEW---------- */
.mf-footer-new {
    color: var(--mfi-gray);
    font-size: 12px;
    font-weight: 400;
    padding-bottom: 16px;
}
/* -------------------FOOTER---------- */
.mf-footer .mf-footer-inner .mf-footer-content {
    position: absolute;
    padding: 1.5rem;
    line-height: 36px;
    background-color: #fff;
    width: 100%;
}

.mf-footer .mf-footer-inner {
    text-align: center;
    z-index: auto;
}

.mf-footer-logo {
    width: 100.69px;
}

.mf-footer-hint {
    color: #555353;
    font-size: 14px;
}

.mf-contact-icon {
    height: 24px;
    margin-inline-end: 8px;
}

/* -------------------NAV-PANEL-TABS------------------ */

    .nav.nav-tabs {
        border-radius: var(--mf-radius) var(--mf-radius) 0 0;
        border-bottom: 2px solid var(--mf-primary);
    }

.nav-tabs > li {
    margin: 4px;
    padding: 10px 0px;
}


    .nav-tabs > li > a {
        padding: 12px 24px;
        border: 2px solid var(--mf-gray-20);
        border-bottom: none;
        border-radius: var(--mf-radius-md) var(--mf-radius-md) 0 0;
        font-size: var(--mf-lg-text);
        font-weight: var(--mf-text-semiBold);
        color: var(--mf-gray-dark);
        line-height: 28.5px;
        transition: 0.3s;
    }

        .nav-tabs > li > a.active,
        .nav-tabs > li.active > a,
        .nav-tabs > li > a:focus {
            border: 2px solid var(--mf-primary);
            border-bottom: 3px solid var(--mf-white);
            color: var(--mf-primary);
        }

        .nav-tabs > li > a:hover {
            color: var(--mf-primary);
            border-color: transparent;
        }

        .nav-tabs > li > a > img {
            width: 16px;
        }

.tab-content {
    border-radius: 0 0 var(--mf-radius) var(--mf-radius);
}

.nav-tabs > li > a > i.fa {
    display: none;
}
/* --------------------------DATA TABLES----------------------------- */
.mf-page-half-width {
    width: 48%;
}

.mf-data-table {
    border-collapse: collapse;
}

.mf-data-table-fullWidth {
    border-collapse: collapse;
}

.mf-data-table-fill {
    border-collapse: collapse;
    width: -webkit-fill-available;
}

    .mf-data-table td, .mf-data-table-fullWidth td {
        border: 1px solid var(--mf-gray-20);
        text-align: left;
        padding: 16px;
        width: 50%;
        font-size: var(--mf-base-text);
        color: var(--mf-gray);
    }

    .mf-data-table tr:nth-child(even), .mf-data-table-fullWidth tr:nth-child(even) {
        background-color: var(--mf-gray-lighter);
    }

    .mf-data-table td:first-child, .mf-data-table-fullWidth td:first-child, .mf-data-table td label:first-child,
    .mf-data-table-fullWidth td label:first-child {
        font-weight: var(--mf-text-semiBold);
        color: var(--mf-gray-dark);
    }

/*------------QR FRAME----------*/
.qr-frame {
    display: flex;
    flex-direction: column;
}

.qr-space {
    margin-top: 0.5rem;
}

#qrCode img, #qrCodeEn img, #qrCodeAr img {
    height: 100px;
    width: 100px;
}

.qrCode-container {
    padding: 24px 54px;
    border: 1px solid var(--mf-gray-20) !important;
    border-radius: var(--mf-radius-md);
}

.profile-url {
    overflow-x: auto;
    text-overflow: ellipsis;
}

div.mf-left-borders-sharp button.btn {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

.mf-paragragh p {
    font-size: var(--mf-base-text);
    font-weight: var(--mf-text-regular);
    color: var(--mf-gray-dark);
}

/*-------------------EDIT USER PROFILE / UPLOAD PHOTO----------------------*/

.img-rounded {
    border-radius: 50%;
}

.icon-md {
    font-size: 18px;
}

.mf-change-img .icon-Pen-New-Square:before,
.mf-edit-user-avatar .icon-Pen-New-Square:before {
    color: var(--mf-primary);
    margin-inline-end: 4px;
}

.mf-edit-user-avatar .ace-file-input .ace-file-container,
.mf-edit-user-avatar input.form-control {
    width: 68px !important;
}


.mf-edit-user-avatar .ace-file-input .ace-file-container {
    display: block;
    position: absolute;
    top: 5px;
    left: 0;
    right: 0;
    height: 40px;
    background-color: #ffffff;
    border-radius: 8px;
    border: none !important;
    cursor: pointer;
    -webkit-box-shadow: none;
    box-shadow: none;
    -webkit-transition: all 0.15s;
    -o-transition: all 0.15s;
    transition: all 0.15s;
}

.ace-file-input .ace-file-container:before {
    border-radius: var(--mf-radius);
    margin: 2px;
}

.mf-edit-user-avatar .ace-file-input .ace-file-container:before {
    display: inline-block;
    content: "Add Photo";
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    line-height: 24px;
    text-align: center;
    padding: 0 !important;
    background-color: transparent;
    color: var(--mf-primary);
    font-size: var(--mf-base-text);
    font-weight: var(--mf-text-semiBold);
    border: none;
    -webkit-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
}

/*.mf-upload-img-container .ace-file-input .ace-file-container .ace-file-name,
*/.mf-edit-user-avatar .ace-file-input .ace-file-container .ace-file-name {
    display: none;
}

.user-profile,
.mf-edit-user-form {
    margin-inline-start: 64px;
}


    .mf-edit-user-form .mf-save,
    .mf-edit-user-form input.form-control {
        width: 400px !important;
    }

/*------------------- UPLOAD FILE----------------------*/

.mf-upload-file-container {
    width: 200px;
    height: 200px;
    background-color: var(--mf-gray-light);
    border: 1px dashed var(--mf-gray);
    border-radius: var(--mf-radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
}

.mf-upload-file-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

    .mf-upload-file-content span {
        margin-bottom: 8px;
    }

    .mf-upload-file-content .icon-Cloud-Upload:before {
        color: var(--mf-gray-dark);
    }

    .mf-upload-file-content .icon-Cloud-Upload {
        font-size: 24px;
    }

.mf-upload-sub-title {
    text-align: center;
    color: var(--mf-gray);
    font-size: var(--mf-sm-text);
}


.mf-upload-file-md {
    height: 130px;
    margin-bottom: 24px;
}

    .mf-upload-img-container .ace-file-input .ace-file-container:before, /*replace .mf-upload-img-container and  .mf-supplier-avatar to .mf-upload-file-sm*/
    .mf-supplier-avatar .ace-file-input .ace-file-container:before,
    .mf-upload-file-md .ace-file-input .ace-file-container:before {
        display: inline-block;
        content: "";
        background-repeat: no-repeat;
        margin: 0;
    }

.mf-upload-img-container .ace-file-input .ace-file-container:before,
.mf-supplier-avatar .ace-file-input .ace-file-container:before {
    background-image: url('../imgs/new-dashboard/Dashboard-latest/Upload.svg');
    width: 203px;
    height: 203px;
}

.mf-upload-file-md .ace-file-input .ace-file-container:before {
    background-image: url('../imgs/new-dashboard/Dashboard-latest/Upload-md.svg');
    width: 350px;
    height: 120px;
}

.mf-upload-img-container .mf-change-img .ace-file-input .ace-file-container:before,
.profile-image-section .mf-change-img .ace-file-input .ace-file-container:before {
    background-image: none;
    width: unset;
    height: unset;
    content: "Upload File";
    color: var(--mf-primary);
    font-size: var(--mf-base-text);
    font-weight: var(--mf-text-semiBold);
}
.mf-upload-img-container .ace-file-input .ace-file-container .ace-file-name {
    padding-left: 0;
}
.mf-upload-img-container.icon-Pen-New-Square,
.mf-upload-img-container .mf-change-img .ace-file-input .ace-file-container .ace-file-name:after,
.profile-image-section .mf-change-img .ace-file-input .ace-file-container .ace-file-name:after {
    display: none;
}
.mf-upload-img-container .ace-file-input .ace-file-container.selected .ace-file-name:after {
    display: block;
}
.mf-upload-img-container .mf-change-img .icon-Pen-New-Square,
.profile-image-section .mf-change-img .icon-Pen-New-Square {
    display: block;
}
.mf-upload-img-container .mf-change-img .ace-file-input .ace-file-container:before,
.mf-upload-img-container .mf-change-img .icon-Pen-New-Square {
    padding-top: 40px;
}
.mf-change-img{
    display: flex;
    justify-content: center;
}
.mf-upload-img-container .mf-change-img .ace-file-input .ace-file-container {
    width: unset !important;
}
 .img-card-shadow {
     box-shadow: var(--mf-shadow-bottom);
 }

.mf-upload-img-container .ace-file-input .ace-file-container .ace-icon,
.mf-supplier-avatar .ace-file-input .ace-file-container .ace-icon,
.mf-upload-file-md .ace-file-input .ace-file-container .ace-icon {
    display: none;
}

.mf-upload-img-container .ace-file-input .ace-file-container,
.mf-supplier-avatar .ace-file-input .ace-file-container {
    width: 230px !important;
}
.mf-upload-img-container .ace-file-input .ace-file-container,
.mf-supplier-avatar .ace-file-input .ace-file-container {
    border: none !important;
    width: 20px !important;
    position: relative;
}
.mf-red-trash .icon-Trash-Bin-Trash:before,
.mf-upload-img-container .icon-Trash-Bin-Trash:before,
.mf-supplier-avatar .icon-Trash-Bin-Trash:before,
.mf-edit-user-avatar .icon-Trash-Bin-Trash:before {
    color: var(--mf-red);
}

.mf-upload-file-md .ace-file-input .ace-file-container {
    border: none !important;
    width: 425px !important;
    position: relative;
    display: flex;
    justify-content: start;
}

.mf-edit-user-avatar .ace-file-input .ace-file-container .ace-file-name {
    color: var(--mf-gray);
    position: absolute;
    padding: 0;
    top: 207px;
}

.mf-upload-img-container .ace-file-input .ace-file-container.selected .ace-file-name:after,
.mf-supplier-avatar .ace-file-input .ace-file-container.selected .ace-file-name:after,
.mf-upload-file-md .ace-file-input .ace-file-container.selected .ace-file-name:after {
    color: var(--mf-primary);
    position: absolute;
}
.mf-upload-img-container .ace-file-input .ace-file-container .ace-file-name:after,
.mf-supplier-avatar .ace-file-input .ace-file-container .ace-file-name:after {
    position: absolute;
}

/*.mf-upload-img-container .ace-file-input .ace-file-container .ace-file-name:after,*/
/*.mf-upload-img-container .ace-file-input .ace-file-container.selected .ace-file-name:after,*/
.mf-supplier-avatar .ace-file-input .ace-file-container.selected .ace-file-name:after,
.mf-supplier-avatar .ace-file-input .ace-file-container .ace-file-name:after {
    left: 2px;
    top: 206px;
}
.mf-upload-img-container .mf-change-img .ace-file-input .ace-file-container.selected .ace-file-name:after {
    left: -78px;
}
.ace-file-input .ace-file-container.selected .ace-file-name:after {

    width: 125px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.mf-upload-img-container .mf-change-img .ace-file-input .remove {
    right: -56px;
    top: 6px;
}
.mf-upload-img-container .ace-file-input .remove {
    right: 0px;
    top: 215px;
    bottom: unset;
}

    .mf-upload-file-md .ace-file-input .ace-file-container.selected .ace-file-name:after, .mf-upload-file-md .ace-file-input .ace-file-container .ace-file-name:after {
    position: absolute;
    left: 2px;
    top: 130px;
}

.mf-upload-file-md .ace-file-input .ace-file-container .ace-file-name:after, .mf-gray-reg {
    color: var(--mf-gray);
    font-weight: var(--mf-text-regular);
}
.mf-contact-remove .ace-file-input .remove  {
    left: 51%;
    top: 10px;
}
.mf-create-invoice-remove .ace-file-input .remove,
.mf-remove-position-md .ace-file-input .remove
{
    left: 375px;
    top: 10px;
}
.mf-create-batch-invoice-remove .ace-file-input .remove {
    left: 369px;
    top: 10px;
} 
.mf-red-trash .ace-file-input .remove,
.mf-upload-img-container .ace-file-input .remove,
.mf-edit-user-avatar .ace-file-input .remove,
.mf-supplier-avatar .ace-file-input .remove,
.mf-upload-file-md .ace-file-input .remove {
    color: var(--mf-red);
    position: absolute;
    display: none;
    width: 17px;
    text-align: center;
    height: 17px;
    line-height: 15px;
    font-size: 11px;
    font-weight: normal;
    background-color: var(--mf-white);
    border-radius: 100%;
    text-decoration: none;
}

.mf-upload-img-container .ace-file-input .remove {
    color: var(--mf-red);
    position: absolute;
/*    display: none;
*/    width: 17px;
    text-align: center;
    height: 17px;
    line-height: 15px;
    font-size: 11px;
    font-weight: normal;
    background-color: var(--mf-white);
    border-radius: 100%;
    text-decoration: none;
}


/*.mf-upload-img-container .ace-file-input .remove,
*/.mf-supplier-avatar .ace-file-input .remove {
    right: 2px;
    top: 210px;
}

.mf-upload-file-md .ace-file-input .remove {
    right: 2px;
    top: 125px;
    padding: 4px;
}
.mf-edit-user-avatar .ace-file-input .remove {
    position: absolute;
    right: -100px;
    top: 10px;
}
.mf-prd-trash .icon-Trash-Bin-Trash {
    position: absolute;
    right: 16px;
    top: 4px;
}
.mf-import-trash .icon-Trash-Bin-Trash {
    position: absolute;
    left: 32px;
    top: 4px;
}
.mf-red-trash .icon-Trash-Bin-Trash,
.mf-upload-img-container .icon-Trash-Bin-Trash,
.mf-edit-user-avatar .icon-Trash-Bin-Trash, .mf-supplier-avatar .icon-Trash-Bin-Trash, .mf-upload-file-md .icon-Trash-Bin-Trash {
    font-size: 20px;
}

    .mf-upload-img-container .icon-Trash-Bin-Trash:before,
    .mf-supplier-avatar .icon-Trash-Bin-Trash:before,
    .mf-remove-label {
        color: var(--mf-red);
    }

.mf-remove-label {
    font-size: 12px;
}

.mf-supplier-details input[type=checkbox].ace ~ .lbl {
    margin: 0;
    color: var(--mf-gray-dark);
}

.mf-upload-file-md + .mf-download {
    position: absolute;
    bottom: 114px;
    right: 0;
    text-align: end;
}
/*------------------- INVOICE DETAILS ICONS & BUTTONS----------------------*/
.mf-invoice-details-icons .icon-Copy:before {
    color: var(--mf-gray);
    cursor: pointer;
}

.mf-invoice-details-icons .icon-Square-Share-Line:before {
    color: var(--mf-primary);
    cursor: pointer;
}

.mf-invoice-details-icons .icon-Copy,
.mf-invoice-details-icons .icon-Square-Share-Line {
    font-size: 20px;
}

.mf-invoice-details-action-buttons .icon-Printer-Minimalistic1,
.mf-invoice-details-action-buttons .icon-Plain,
.mf-invoice-details-action-buttons .icon-Cross {
    font-size: 20px;
    margin-inline-end: 8px;
}

.mf-invoice-details-action-buttons button {
    margin-inline-end: 12px;
}

    .mf-invoice-details-action-buttons button:last-child {
        margin-inline-end: 0;
    }

.mf-btn-danger .icon-Cross:before {
    color: var(--mf-white);
    transition: 0.3s;
}
.mf-btn-danger:hover .icon-Cross:before {
    color: var(--mf-red);
}

.mf-simple-card {
    border: 1px solid var(--mf-gray-20);
    padding: 16px;
    border-radius: var(--mf-radius-md);
}

input.form-control.mf-invoice-details-url {
    border: none !important;
    background-color: transparent !important;
    color: var(--mf-primary);
    max-width: 160px;
    margin-inline-end: 5.5px;
}

    input.form-control.mf-invoice-details-url:hover {
        background-color: transparent !important;
        color: var(--mf-primary);
        border: none !important;
        outline: none !important;
    }

.has-input .input-group-addon,
.input-group .input-group-addon {
    padding: 0;
    border: 0;
}

/*------------------- EDIT BUSINESS PROFILE----------------------*/
.business-details-form textarea {
    width: 98%;
}

#SocialMedias .well {
    min-height: unset;
    margin: 0;
    margin-bottom: 16px;
    -webkit-box-shadow: none;
    box-shadow: none;
    border: 1px solid var(--mf-gray-20);
    padding: 16px;
    border-radius: var(--mf-radius-md);
    display: flex;
    flex-direction: row;
    position: relative;
    background-color: transparent;
}

.mf-tertiary-btn {
    border: none;
    background-color: transparent;
}

.bootstrap-select > select {
    left: 0 !important;
}

.mf-sMedia-del {
    position: absolute;
    top: 0;
    right: 64px;
    width: 42px;
    height: 40px;
}

.mf-upload-file-md .ace-file-input .remove {
    position: absolute;
    top: 0;
    right: 24px;
    width: 32px;
    height: 30px;
}


.mf-upload-file-md .ace-file-input .remove,
.mf-sMedia-del, .mf-eye-trash-btn {
    background-color: var(--mf-red);
    border-radius: 0 14px 0 5px;
    border: none;
}

    .mf-upload-file-md .icon-Trash-Bin-Trash:before,
    .mf-eye-trash-btn .icon-Trash-Bin-Trash:before,
    .mf-sMedia-del .icon-Trash-Bin-Trash:before {
        color: var(--mf-white);
        font-size: 18px;
    }

/*---------------------------- Profile Invoice Setting-------------------------------*/
input[type="checkbox"]:checked + input[type="hidden"] + .slider, input[type="checkbox"]:checked + .slider {
    background-color: var(--mf-white);
    border: 1px solid var(--mf-primary);
}

input[type="checkbox"] + input[type="hidden"] + .slider, input[type="checkbox"] + .slider {
    background-color: var(--mf-white);
    border: 1px solid var(--mf-gray);
}

.slider.round {
    border-radius: 34px;
    width: 48px;
    height: 29px;
}

.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    transition: .4s;
}

input[type="checkbox"]:checked + input[type="hidden"] + .slider:before, input[type="checkbox"]:checked + .slider:before {
    transform: translateX(18px);
    background-color: var(--mf-primary);
}

input[type="checkbox"] + input[type="hidden"] + .slider:before, input[type="checkbox"] + .slider:before {
    background-color: var(--mf-gray);
}

.slider.round:before {
    border-radius: 50%;
    width: 24px;
    height: 24px;
}

.slider:before {
    position: absolute;
    content: "";
    background-color: #fff;
    transition: .4s;
    height: 15px;
    width: 15px;
    left: 2px;
    bottom: 2px;
}

.mf-invoice-settings label.control-label {
    width: 177px;
    margin-inline-end: 24px;
    margin-bottom: 0;
}

.form-control.colorTheme {
    width: 48px !important;
    min-width: 48px !important;
    height: 48px !important;
    padding: 3px;
    border: 1px solid var(--mf-gray);
}

.editTerminalNameBtn {
    height: 40px;
}

.mf-btn-icon {
    display: inline-block;
    height: 40px;
    width: fit-content;
    padding: 8px 12px;
}

.mf-btn-icon-danger {
    padding: 8px 12px;
    color: var(--mf-white);
    background: var(--mf-white);
    border: 2px solid var(--mf-red);
}

#grid-view-batch-invoices tbody tr td:last-child {
    display: flex;
    min-height: 72.8px;
}

.mf-switch-label-md {
    width: 187px;
    margin-inline-end: 24px;
    margin-bottom: 0;
}

.mf-shipping-input div.form-control, .mf-shipping-input input.form-control {
    width: 48.5% !important;
}

    .mf-shipping-input div.form-control button.dropdown-toggle,
    .mf-row-inputs-wrapper input.form-control, .mf-row-inputs-wrapper .bootstrap-select.form-control,
    .mf-row-inputs-wrapper div.form-control button.dropdown-toggle {
        width: 100% !important;
    }

.mf-row-inputs-wrapper {
    width: 100%;
    margin-inline-end: 16px;
}

.mf-vendor-doc label, .mf-supplier-doc label {
    font-size: var(--mf-base-text);
    font-weight: var(--mf-text-semiBold);
}

.mf-vendor-doc label {
    width: 200px;
}

.mf-supplier-doc-container {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
}

.mf-supplier-doc {
    position: relative
}

    .mf-supplier-doc .mf-input-icon-wrapper {
        width: 348px;
    }

    .mf-supplier-doc label {
        font-size: var(--mf-base-text);
        font-weight: var(--mf-text-semiBold);
        width: 350px;
    }

.mf-download a {
    color: var(--mf-gray);
    font-size: var(--mf-base-text);
    font-weight: var(--mf-text-regular);
}

.mf-supplier-doc-approved {
    margin: 10px 0;
}

    .mf-supplier-doc-approved label {
        font-size: var(--mf-base-text);
        font-weight: var(--mf-text-semiBold);
        width: 350px;
    }


/*---------------------------- MULTILOGIN-------------------------------*/
.table.grid-view-invoice-items > thead > tr > th,
.table.grid-view-invoice-items > tbody > tr > td,
.table.grid-view-invoice-items > tfoot > tr > td {
    padding: 16px;
}

.grid-view-invoice-items .mf-danger-button {
    border: none !important;
    font-size: var(--mf-base-text);
    font-weight: var(--mf-text-semiBold);
    display: flex;
    align-items: center;
    padding: 0;
}

    .grid-view-invoice-items .mf-danger-button:hover {
        border: none !important;
        color: var(--mf-red) !important;
        background-color: transparent !important;
    }

    .grid-view-invoice-items .mf-danger-button .icon-Trash-Bin-Trash:before {
        color: var(--mf-red);
        font-size: 20px;
        margin-inline-end: 4px;
    }

/*------------------ MODAL-SESSION-EXPIRE -----------*/

    .modal.show .modal-dialog {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        width: 100%;
    }

.modal-header {
    position: relative;
}

.modal-header, .modal-footer {
    background-color: white;
    border: none;
}

.mf-modal-counter {
    color: var(--mf-gray-dark);
    font-size: var(--mf-lg-text);
    font-weight: var(--mf-text-regular);
}

.modal-content {
    border-radius: 8px;
    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
    border: none;
}

.modal-img {
    width: 3rem;
    background-image: url("../imgs/clock.png");
    margin-bottom: 20px;
}

.modal-title, .modal-message .modal-title .mf-center-success-title {
    font-weight: var(--mf-text-semiBold);
    color: var(--mf-primary);
    text-align: center;
    font-size: var(--mf-xl-text);
    margin: 0 auto;
}
.modal-header {
    padding: 32px 16px 8px;
    justify-content: center;
}

.modal-body {
    font-weight: var(--mf-text-regular);
    color: var(--mf-gray);
    text-align: center;
    font-size: var(--mf-base-text);
    padding: 16px 0 32px;
}
.modal-footer {
    padding: 0 32px 32px;
    justify-content: center;
}

.bootbox-confirm .modal-footer button:last-child {
    margin-inline-start: 16px;
}


.modal-backdrop, div.dt-button-background {
    background: rgba(0, 0, 0, 0.2);
}
.modal-footer .btn-default,
.modal-footer .btn-success,
.modal-footer .btn-danger {
    font-weight: var(--mf-text-semiBold);
    font-size: var(--mf-Base-text);
    line-height: 17.88px;
    border-radius: var(--mf-default-radius);
    transition: 0.3s;
    padding: 11px 12px;
}
.modal-footer .btn-default
 {
    color: var(--mf-secondary-color) !important;
    transition: none !important;
    transition: 0.3s !important;
}

    .modal-footer .btn-default:hover {
        color: var(--mf-link) !important;
    }
.bootbox-confirm .modal-footer .btn-success {
    color: var(--mf-white);
    background: var(--mf-primary);
    border: 2px solid var(--mf-primary);
}
    .bootbox-confirm .modal-footer .btn-success:hover {
        color: var(--mf-primary);
        background: var(--mf-primary-light);
        border: 2px solid var(--mf-primary-light);
    }
.bootbox-confirm .modal-footer .btn-danger { /*MODAL SECONDARY*/
    color: var(--mf-secondary);
    background-color: var(--mf-white);
    border: 2px solid var(--mf-secondary);
}
    .bootbox-confirm .modal-footer .btn-danger:hover {
        color: var(--mf-white);
        background: var(--mf-gray) !important;
        border: 2px solid transparent;
    }
    .modal-content .close {
    border: none;
    background: transparent;
    font-size: 24px;
    height: 28px;
    color: #1C274C;
    position: absolute;
    left: 8px;
    top: 8px;
    cursor: pointer;
    margin-top: 0 !important;
}

    .modal-footer .btn-success i, .modal-footer .btn-danger i, .modal-footer .btn-default i {
        display: none;
    }

.modal-message.modal-danger .modal-header,
.modal-message.modal-success .modal-header {
    color: var(--mf-red);
    border-bottom: none !important;
}
.modal-message .modal-title {
    font-size: var(--mf-xl-text);
    color: var(--mf-gray-dark);
    font-weight: var(--mf-text-semiBold);
    margin-bottom: 3px;
}

/* -------------------ALERTS------------------ */

/*------------ -----------------ALERT-----------------------*/

.alert {
    border-radius: var(--mf-radius-md);
    text-align: center;
    font-size: var(--mf-base-text);
    font-weight: var(--mf-text-regular);
    position: relative;
}

.alert, .alert form {
    display: flex;
    align-items: center;
    justify-content: center;
}
.alert .close {
    position: absolute;
    right: 16px;
}
.alert .fa-xmark {
    font-size: 16px;
    color: var(--mf-gray);
}
.alert.alert-success {
    color: var(--mf-green-dark);
    background-color: var(--mf-green-light-30);
    border: 1px solid var(--mf-green-dark);
}
.alert.alert-warning {
    color:  #C9A238;
    background-color: #FEF9D9;
    border: 1px solid #FFE078;
}
.alert.alert-warning strong {
    margin-inline-end: 4px;
}
.alert.alert-danger {
    color: #970029;
    background-color: #FDE8E3;
    border: 1px solid #970029;
}
.alert.alert-info {
    color: #2B67B8;
    background-color: #CFF0FF;
    border: 1px solid #2B67B8;
}

.alert.alert-block button.close {
    border: none;
    border-radius: 8px;
    background: transparent;
}

.mf-alert-xmark, .mf-alert-check  {
    font-size: 28px;
    margin: auto 16px;
}
.mf-alert-check {
    color: var(--mf-green-dark);
}
.mf-alert-xmark {
    color: var(--mf-red);
}
.ace-icon.fa-check.green {
    margin: 0 16px;
}
/*---------------------------- PRODUCTS-------------------------------*/
.mf-circle-frame-sm {
    width: 40px;
    height: 40px;
    background-color: var(--mf-gray-light);
    display: flex;
    align-items: center;
    border-radius: 50%;
}
.mf-circle-img-xs {
    width: 20px;
    height: 20px;
    margin: auto;
}

.mf-short-link {
    display: inline-block;
    width: 200px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
/*-------------------LOADER-------------*/

.dataTables_processing div {
    display: none;
}

.mf-blue,
.ajax-loading-icon.fa-spinner {
    color: var(--mf-primary);
}

/*-------------------------- BULK REFUND-------------------------*/
.mf-bulk-refund .ace-file-input 
{
    margin-bottom: 8px;
}

/*-------------------------- CUSTOM TEMPLATES---------------------*/
.mf-image-container-md {
    width: 140px;
    height: 140px;
}
.mf-avatar {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border: 2px solid var(--mf-primary);
    padding: 4px;
    border-radius: var(--mf-radius-md);
}
.mf-icon-img-sm {
    width: 18px;
    margin-inline-end: 8px;
}
/*---------------------------- COMMISSION CHAREGES-------------------------------*/
.mf-commission-from .bootstrap-select {
    width: 100% !important;
    height: 100% !important;
}
.mf-commission-from .bootstrap-select > .dropdown-toggle {
    border: none;
    background-color: transparent;
    padding: 0;
    cursor: default;
}
.mf-commission-from .bootstrap-select > .dropdown-toggle:after {
    display: none;
}
.mf-commission-from .bootstrap-select .dropdown-toggle .filter-option-inner-inner {
    color: var(--mf-gray);
}

.mf-dropdown-menu.actionflyBtnRP {
    inset: 0px 0px auto auto !important;
}
.mf-short-error-truncated {
    display: inline-flex;
    width: 190px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/*---------------------------- RESPONSIVE-------------------------------*/
@media (min-width: 1300px) {
    #orders-filters .well div, #filters .mf-transaction.well div, #filters .well div {
        flex: 1 0 19%;
    }
}

@media (max-width: 1400px) {

    .mf-main-container {
        min-width: 1000px;
    }
}

@media (max-width: 991.98px) {
    .mf-side-bar-container {
        width: 90px;
    }
        .mf-side-bar-container .mf-side-menu-item {
            min-width: unset;
            display: flex;
            justify-content: center;
        }
        .mf-side-bar-container .mf-side-menu-title,
        .mf-side-bar-container .mf-category-title,
        .mf-side-bar-container .mf-logo,
        .mf-side-bar-container .icon-Double-Alt-Arrow-Left:before,
        .mf-side-bar-container .icon-Double-Alt-Arrow-Right:before,
        .mf-side-bar-container .icon-Alt-Arrow-Down {
            display: none;
        }

    .mf-side-bar-container .mf-letter-logo
     {
        display: block;
    }
    .mf-letter-logo {
        margin: 6px;
    }
    .mf-side-bar #accordion {
        margin: 0;
    }
    .mf-side-menu-item {
        padding: 7px;
    }
    .mf-side-bar {
        padding: 0 16px;
    }
    }

@media (max-width: 1320px ) {
    .business-result-supplier div.form-control,
    .business-result-supplier input.form-control,
    .business-result-supplier div.form-control button.dropdown-toggle,
    .business-details-form div.form-control,
    .business-details-form input.form-control,
    .business-details-form div.form-control button.dropdown-toggle {
        width: 320px !important;
    }

}
/*----------------------------------FAWRY RESPONSIVE ----------------------*/
@media (max-width: 575.98px) {
    input.form-control, div.form-control button.dropdown-toggle,
    #dvmobilesection input.form-control {
        width: 200px !important;
    }
    input.form-control, div.form-control button.dropdown-toggle {
        width: 260px !important;
    }

}

#searchKey option {
    background: #FFF;
}

#searchKey option:checked, #searchKey option:hover {
    background-color: #EBF0FE;
    color: #000;
}
.fa-check-circle::before {
    margin-inline-end: 4px;
}