/* Minification failed. Returning unminified contents.
(2,28): run-time error CSS1039: Token not allowed after unary operator: '-clr-navy-700'
(21,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '@media'
(27,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '@media'
(195,22): run-time error CSS1039: Token not allowed after unary operator: '-clr-grey-75'
(207,22): run-time error CSS1039: Token not allowed after unary operator: '-clr-azure-95'
(208,17): run-time error CSS1039: Token not allowed after unary operator: '-clr-white'
(219,35): run-time error CSS1039: Token not allowed after unary operator: '-clr-azure-70'
(220,36): run-time error CSS1046: Expect comma, found '0'
(220,40): run-time error CSS1046: Expect comma, found '/'
(220,72): run-time error CSS1046: Expect comma, found '0'
(220,76): run-time error CSS1046: Expect comma, found '/'
(229,23): run-time error CSS1039: Token not allowed after unary operator: '-font-primary'
(230,33): run-time error CSS1039: Token not allowed after unary operator: '-clr-azure-80'
(240,21): run-time error CSS1039: Token not allowed after unary operator: '-font-size-base'
(242,23): run-time error CSS1039: Token not allowed after unary operator: '-font-primary'
(243,33): run-time error CSS1039: Token not allowed after unary operator: '-clr-azure-80'
(256,21): run-time error CSS1039: Token not allowed after unary operator: '-text-size-xs'
(264,21): run-time error CSS1039: Token not allowed after unary operator: '-font-size-2xs'
(265,17): run-time error CSS1039: Token not allowed after unary operator: '-clr-navy-500'
(266,23): run-time error CSS1039: Token not allowed after unary operator: '-font-secondary'
(271,21): run-time error CSS1039: Token not allowed after unary operator: '-font-size-sm'
(275,23): run-time error CSS1039: Token not allowed after unary operator: '-font-primary'
(285,28): run-time error CSS1039: Token not allowed after unary operator: '-clr-azure-09'
(286,24): run-time error CSS1039: Token not allowed after unary operator: '-clr-azure-09'
(297,24): run-time error CSS1039: Token not allowed after unary operator: '-clr-navy-400'
(304,22): run-time error CSS1039: Token not allowed after unary operator: '-clr-azure-95'
(306,22): run-time error CSS1039: Token not allowed after unary operator: '-space-5'
(314,25): run-time error CSS1039: Token not allowed after unary operator: '-border-radius-md'
(315,34): run-time error CSS1039: Token not allowed after unary operator: '-clr-azure-85'
(316,22): run-time error CSS1039: Token not allowed after unary operator: '-shadow-md'
(323,23): run-time error CSS1039: Token not allowed after unary operator: '-font-primary'
(329,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '@media'
(347,40): run-time error CSS1039: Token not allowed after unary operator: '-clr-azure-85'
(355,23): run-time error CSS1039: Token not allowed after unary operator: '-font-secondary'
(356,17): run-time error CSS1039: Token not allowed after unary operator: '-clr-azure-46'
(357,21): run-time error CSS1039: Token not allowed after unary operator: '-font-size-xs'
(359,41): run-time error CSS1039: Token not allowed after unary operator: '-clr-azure-85'
(360,19): run-time error CSS1039: Token not allowed after unary operator: '-space-3'
(366,23): run-time error CSS1039: Token not allowed after unary operator: '-font-primary'
(368,19): run-time error CSS1039: Token not allowed after unary operator: '-space-3'
(369,21): run-time error CSS1039: Token not allowed after unary operator: '-font-size-base'
(379,25): run-time error CSS1039: Token not allowed after unary operator: '-border-radius-md'
(381,22): run-time error CSS1039: Token not allowed after unary operator: '-space-6'
(388,22): run-time error CSS1039: Token not allowed after unary operator: '-clr-cyan-47'
(390,19): run-time error CSS1039: Token not allowed after unary operator: '-space-4'
(392,34): run-time error CSS1039: Token not allowed after unary operator: '-border-radius-md'
(393,37): run-time error CSS1039: Token not allowed after unary operator: '-border-radius-md'
(395,23): run-time error CSS1039: Token not allowed after unary operator: '-font-secondary'
(403,25): run-time error CSS1039: Token not allowed after unary operator: '-border-radius-md'
(405,23): run-time error CSS1039: Token not allowed after unary operator: '-space-2'
(406,19): run-time error CSS1039: Token not allowed after unary operator: '-space-4'
(407,23): run-time error CSS1039: Token not allowed after unary operator: '-font-primary'
(408,21): run-time error CSS1039: Token not allowed after unary operator: '-font-size-lg'
(413,23): run-time error CSS1039: Token not allowed after unary operator: '-font-primary'
(430,41): run-time error CSS1039: Token not allowed after unary operator: '-clr-grey-75'
(431,26): run-time error CSS1039: Token not allowed after unary operator: '-space-2'
(433,21): run-time error CSS1039: Token not allowed after unary operator: '-font-size-base'
(437,23): run-time error CSS1039: Token not allowed after unary operator: '-space-1'
(439,17): run-time error CSS1039: Token not allowed after unary operator: '-clr-success'
(440,17): run-time error CSS1039: Token not allowed after unary operator: '-clr-navy-500'
(441,21): run-time error CSS1039: Token not allowed after unary operator: '-font-size-lg'
(449,22): run-time error CSS1039: Token not allowed after unary operator: '-space-1'
(459,22): run-time error CSS1039: Token not allowed after unary operator: '-clr-azure-95'
(465,22): run-time error CSS1039: Token not allowed after unary operator: '-clr-white'
(469,23): run-time error CSS1039: Token not allowed after unary operator: '-font-primary'
(474,22): run-time error CSS1039: Token not allowed after unary operator: '-shadow-sm'
(480,23): run-time error CSS1039: Token not allowed after unary operator: '-font-secondary'
(483,21): run-time error CSS1039: Token not allowed after unary operator: '-font-size-xs'
(508,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '&'
(538,17): run-time error CSS1039: Token not allowed after unary operator: '-clr-azure-19'
(544,21): run-time error CSS1039: Token not allowed after unary operator: '-font-size-4xl'
(549,17): run-time error CSS1039: Token not allowed after unary operator: '-clr-success'
(553,17): run-time error CSS1039: Token not allowed after unary operator: '-clr-grey-65'
(559,22): run-time error CSS1039: Token not allowed after unary operator: '-clr-info-light'
(560,17): run-time error CSS1039: Token not allowed after unary operator: '-clr-info-dark'
(561,21): run-time error CSS1039: Token not allowed after unary operator: '-font-size-sm'
(566,22): run-time error CSS1039: Token not allowed after unary operator: '-clr-success-light'
(567,17): run-time error CSS1039: Token not allowed after unary operator: '-clr-success-dark'
(568,21): run-time error CSS1039: Token not allowed after unary operator: '-font-size-sm'
(575,23): run-time error CSS1039: Token not allowed after unary operator: '-font-primary'
(577,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '@media'
(584,19): run-time error CSS1039: Token not allowed after unary operator: '-space-3'
(584,34): run-time error CSS1039: Token not allowed after unary operator: '-space-5'
(589,23): run-time error CSS1039: Token not allowed after unary operator: '-space-5'
(590,22): run-time error CSS1039: Token not allowed after unary operator: '-shadow-sm'
(596,15): run-time error CSS1039: Token not allowed after unary operator: '-space-8'
(607,19): run-time error CSS1039: Token not allowed after unary operator: '-space-6'
(607,34): run-time error CSS1039: Token not allowed after unary operator: '-space-3'
(607,51): run-time error CSS1039: Token not allowed after unary operator: '-space-3'
(608,25): run-time error CSS1039: Token not allowed after unary operator: '-space-6'
(637,22): run-time error CSS1039: Token not allowed after unary operator: '-clr-danger-light'
(638,17): run-time error CSS1039: Token not allowed after unary operator: '-clr-danger-dark'
(644,21): run-time error CSS1039: Token not allowed after unary operator: '-font-size-sm'
(649,22): run-time error CSS1039: Token not allowed after unary operator: '-clr-azure-95'
(650,17): run-time error CSS1039: Token not allowed after unary operator: '-clr-azure-80'
(654,22): run-time error CSS1039: Token not allowed after unary operator: '-clr-success-light'
(655,17): run-time error CSS1039: Token not allowed after unary operator: '-clr-success-dark'
(662,19): run-time error CSS1039: Token not allowed after unary operator: '-space'
(671,21): run-time error CSS1039: Token not allowed after unary operator: '-font-size-xl'
(706,21): run-time error CSS1039: Token not allowed after unary operator: '-font-size-2xl'
(726,21): run-time error CSS1039: Token not allowed after unary operator: '-font-size-lg'
(727,17): run-time error CSS1039: Token not allowed after unary operator: '-clr-navy-500'
(728,23): run-time error CSS1039: Token not allowed after unary operator: '-font-headings'
(732,25): run-time error CSS1039: Token not allowed after unary operator: '-border-radius-md'
(734,19): run-time error CSS1039: Token not allowed after unary operator: '-space-5'
(738,41): run-time error CSS1039: Token not allowed after unary operator: '-clr-azure-70'
(742,19): run-time error CSS1039: Token not allowed after unary operator: '-space-5'
(753,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '&'
(770,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '@media'
(776,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '@media'
(783,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '@media'
(800,22): run-time error CSS1039: Token not allowed after unary operator: '-clr-azure-95'
(808,17): run-time error CSS1039: Token not allowed after unary operator: '-clr-grey-20'
(810,23): run-time error CSS1039: Token not allowed after unary operator: '-font-primary'
(814,23): run-time error CSS1035: Expected colon, found '{'
(826,17): run-time error CSS1039: Token not allowed after unary operator: '-clr-azure-46'
(827,23): run-time error CSS1039: Token not allowed after unary operator: '-font-secondary'
(830,21): run-time error CSS1039: Token not allowed after unary operator: '-font-size-xs'
(840,23): run-time error CSS1039: Token not allowed after unary operator: '-font-secondary'
(841,21): run-time error CSS1039: Token not allowed after unary operator: '-font-size-base'
(842,17): run-time error CSS1039: Token not allowed after unary operator: '-clr-blue-brand'
(847,21): run-time error CSS1039: Token not allowed after unary operator: '-font-size-xl'
(848,17): run-time error CSS1039: Token not allowed after unary operator: '-clr-azure-46'
(852,21): run-time error CSS1039: Token not allowed after unary operator: '-font-size-xs'
(907,22): run-time error CSS1039: Token not allowed after unary operator: '-clr-azure-95'
(908,34): run-time error CSS1039: Token not allowed after unary operator: '-clr-azure-89'
(912,23): run-time error CSS1039: Token not allowed after unary operator: '-font-primary'
(916,22): run-time error CSS1039: Token not allowed after unary operator: '-shadow-sm'
(920,23): run-time error CSS1039: Token not allowed after unary operator: '-font-secondary'
(921,21): run-time error CSS1039: Token not allowed after unary operator: '-font-size-xs'
(937,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '&'
(958,21): run-time error CSS1039: Token not allowed after unary operator: '-font-size-2xl'
(963,25): run-time error CSS1046: Expect comma, found '126'
(963,33): run-time error CSS1046: Expect comma, found '/'
(973,17): run-time error CSS1039: Token not allowed after unary operator: '-clr-navy-800'
(977,17): run-time error CSS1039: Token not allowed after unary operator: '-clr-navy-400'
(981,17): run-time error CSS1039: Token not allowed after unary operator: '-clr-cyan-47'
(1000,25): run-time error CSS1039: Token not allowed after unary operator: '-border-radius-sm'
(1015,15): run-time error CSS1039: Token not allowed after unary operator: '-space-1'
(1027,23): run-time error CSS1039: Token not allowed after unary operator: '-font-secondary'
(1028,21): run-time error CSS1039: Token not allowed after unary operator: '-font-size-sm'
(1038,22): run-time error CSS1039: Token not allowed after unary operator: '-clr-azure-89'
(1046,17): run-time error CSS1039: Token not allowed after unary operator: '-clr-grey-20'
(1058,22): run-time error CSS1039: Token not allowed after unary operator: '-clr-success'
(1063,17): run-time error CSS1039: Token not allowed after unary operator: '-clr-success'
(1072,22): run-time error CSS1039: Token not allowed after unary operator: '-clr-navy-400'
(1077,17): run-time error CSS1039: Token not allowed after unary operator: '-clr-navy-400'
(1086,17): run-time error CSS1039: Token not allowed after unary operator: '-clr-navy-400'
(1097,22): run-time error CSS1039: Token not allowed after unary operator: '-clr-danger'
(1102,17): run-time error CSS1039: Token not allowed after unary operator: '-clr-danger'
(1111,17): run-time error CSS1039: Token not allowed after unary operator: '-clr-danger'
(1115,17): run-time error CSS1039: Token not allowed after unary operator: '-clr-danger-dark'
(1131,22): run-time error CSS1039: Token not allowed after unary operator: '-clr-navy-500'
(1162,38): run-time error CSS1039: Token not allowed after unary operator: '-clr-azure-85'
(1166,21): run-time error CSS1039: Token not allowed after unary operator: '-font-size-sm'
(1185,17): run-time error CSS1039: Token not allowed after unary operator: '-clr-success'
(1192,17): run-time error CSS1039: Token not allowed after unary operator: '-clr-grey-20'
(1199,21): run-time error CSS1039: Token not allowed after unary operator: '-font-size-xs'
(1200,17): run-time error CSS1039: Token not allowed after unary operator: '-clr-azure-19'
(1220,36): run-time error CSS1019: Unexpected token, found ' '
(1220,36): run-time error CSS1019: Unexpected token, found ' '
(1220,36): run-time error CSS1042: Expected function, found ' '
(1220,36): run-time error CSS1062: Expected semicolon or closing curly-brace, found ' '
(1242,21): run-time error CSS1039: Token not allowed after unary operator: '-font-size-xs'
(1243,22): run-time error CSS1039: Token not allowed after unary operator: '-shadow-md'
(1257,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '@media'
(1288,23): run-time error CSS1039: Token not allowed after unary operator: '-font-secondary'
(1293,20): run-time error CSS1035: Expected colon, found '{'
(1308,23): run-time error CSS1039: Token not allowed after unary operator: '-font-secondary'
(1332,19): run-time error CSS1039: Token not allowed after unary operator: '-space-3'
(1332,34): run-time error CSS1039: Token not allowed after unary operator: '-space-4'
(1337,28): run-time error CSS1039: Token not allowed after unary operator: '-clr-azure-70'
(1342,28): run-time error CSS1039: Token not allowed after unary operator: '-clr-azure-19'
(1347,25): run-time error CSS1039: Token not allowed after unary operator: '-border-radius-md'
(1349,28): run-time error CSS1039: Token not allowed after unary operator: '-bs-border-color-translucent'
(1358,19): run-time error CSS1039: Token not allowed after unary operator: '-bs-accordion-btn-padding-y'
(1358,53): run-time error CSS1039: Token not allowed after unary operator: '-bs-accordion-btn-padding-x'
(1360,17): run-time error CSS1039: Token not allowed after unary operator: '-bs-accordion-btn-color'
(1362,28): run-time error CSS1039: Token not allowed after unary operator: '-clr-white'
(1364,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '@media'
(1380,19): run-time error CSS1039: Token not allowed after unary operator: '-space-2'
(1380,34): run-time error CSS1039: Token not allowed after unary operator: '-space-3'
(1391,28): run-time error CSS1039: Token not allowed after unary operator: '-clr-navy-600'
(1394,10): run-time error CSS1035: Expected colon, found '{'
(1417,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '@media'
(1423,24): run-time error CSS1039: Token not allowed after unary operator: '-space-2'
(1427,18): run-time error CSS1039: Token not allowed after unary operator: '-space-2'
(1427,33): run-time error CSS1039: Token not allowed after unary operator: '-space-4'
(1430,14): run-time error CSS1039: Token not allowed after unary operator: '-space-4'
(1431,22): run-time error CSS1039: Token not allowed after unary operator: '-shadow-md'
(1433,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '@media'
(1440,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '@media'
(1468,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(1477,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '&'
(1495,10): run-time error CSS1030: Expected identifier, found '#login-modal'
(1495,28): run-time error CSS1031: Expected selector, found ')'
(1495,28): run-time error CSS1025: Expected comma or open brace, found ')'
(1501,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '@media'
(1513,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '@media'
(1525,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '@media'
(1536,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '&'
(1552,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(1562,8): run-time error CSS1035: Expected colon, found 'a'
(1573,26): run-time error CSS1062: Expected semicolon or closing curly-brace, found '{'
(1580,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '&'
(1617,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '@media'
(1627,28): run-time error CSS1039: Token not allowed after unary operator: '-clr-azure-89'
(1631,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(1632,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(1636,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(1640,23): run-time error CSS1039: Token not allowed after unary operator: '-font-primary'
(1644,23): run-time error CSS1039: Token not allowed after unary operator: '-font-secondary'
(1645,21): run-time error CSS1039: Token not allowed after unary operator: '-font-size-xs'
(1646,28): run-time error CSS1039: Token not allowed after unary operator: '-clr-navy-700'
(1650,25): run-time error CSS1039: Token not allowed after unary operator: '-space-8'
(1669,15): run-time error CSS1039: Token not allowed after unary operator: '-space-2'
(1674,28): run-time error CSS1039: Token not allowed after unary operator: '-clr-cyan-47'
(1675,28): run-time error CSS1039: Token not allowed after unary operator: '-clr-cyan-47'
(1679,28): run-time error CSS1039: Token not allowed after unary operator: '-clr-azure-19'
(1680,28): run-time error CSS1039: Token not allowed after unary operator: '-clr-azure-19'
(1685,21): run-time error CSS1035: Expected colon, found ','
(1692,25): run-time error CSS1039: Token not allowed after unary operator: '-border-radius-lg'
(1694,28): run-time error CSS1039: Token not allowed after unary operator: '-clr-azure-85'
(1696,22): run-time error CSS1039: Token not allowed after unary operator: '-shadow-sm'
(1698,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '&'
(1735,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '&'
(1746,22): run-time error CSS1039: Token not allowed after unary operator: '-clr-azure-95'
(1748,22): run-time error CSS1039: Token not allowed after unary operator: '-space-5'
(1751,32): run-time error CSS1035: Expected colon, found '{'
(1872,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(1877,16): run-time error CSS1035: Expected colon, found '{'
(2016,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '&'
(2082,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '&'
(2105,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '&'
(2133,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '&'
(2144,6): run-time error CSS1035: Expected colon, found ','
(2174,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '&'
(2194,23): run-time error CSS1039: Token not allowed after unary operator: '-font-secondary'
(2199,17): run-time error CSS1039: Token not allowed after unary operator: '-brand-dark'
(2200,32): run-time error CSS1039: Token not allowed after unary operator: '-brand-dark'
(2207,40): run-time error CSS1039: Token not allowed after unary operator: '-clr-cyan-47'
(2212,50): run-time error CSS1046: Expect comma, found '41'
(2212,55): run-time error CSS1046: Expect comma, found ')'
(2214,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '@media'
(2226,21): run-time error CSS1039: Token not allowed after unary operator: '-font-size-xs'
(2229,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '&'
(2276,28): run-time error CSS1039: Token not allowed after unary operator: '-clr-navy-200'
(2277,17): run-time error CSS1039: Token not allowed after unary operator: '-clr-azure-19'
(2293,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '&'
(2314,35): run-time error CSS1039: Token not allowed after unary operator: '-clr-navy-200'
(2318,23): run-time error CSS1039: Token not allowed after unary operator: '-font-secondary'
(2320,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '&'
(2326,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '&'
(2333,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '&'
(2341,8): run-time error CSS1035: Expected colon, found '{'
(2415,28): run-time error CSS1039: Token not allowed after unary operator: '-clr-azure-09'
(2431,17): run-time error CSS1039: Token not allowed after unary operator: '-brand-dark'
(2482,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '&'
(2493,8): run-time error CSS1035: Expected colon, found '{'
(2502,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '@media'
(2513,6): run-time error CSS1035: Expected colon, found '.'
(2530,11): run-time error CSS1035: Expected colon, found '{'
(2539,31): run-time error CSS1039: Token not allowed after unary operator: '-clr-navy-500'
(2542,7): run-time error CSS1035: Expected colon, found '{'
(2595,7): run-time error CSS1035: Expected colon, found '{'
(2618,18): run-time error CSS1039: Token not allowed after unary operator: '-space-2'
(2618,33): run-time error CSS1039: Token not allowed after unary operator: '-space-4'
(2619,23): run-time error CSS1039: Token not allowed after unary operator: '-space-12'
(2620,21): run-time error CSS1039: Token not allowed after unary operator: '-clr-navy-900'
(2628,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '&'
(2654,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '&'
(2668,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '@media'
(2688,17): run-time error CSS1039: Token not allowed after unary operator: '-clr-azure-70'
(2689,15): run-time error CSS1039: Token not allowed after unary operator: '-space-3'
(2695,9): run-time error CSS1035: Expected colon, found '{'
(2715,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '&'
(2804,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '&'
(2849,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '@media'
(2863,19): run-time error CSS1039: Token not allowed after unary operator: '-space-4'
(2863,34): run-time error CSS1039: Token not allowed after unary operator: '-space-8'
(2870,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '@media'
(2894,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '&'
(2902,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '@media'
(2925,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '@media'
(2944,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '&'
(2963,17): run-time error CSS1039: Token not allowed after unary operator: '-clr-grey-50'
(2971,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '&'
(3091,22): run-time error CSS1039: Token not allowed after unary operator: '-clr-azure-89'
(3097,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '@media'
(3136,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '@media'
(3154,23): run-time error CSS1030: Expected identifier, found '>'
(3154,43): run-time error CSS1031: Expected selector, found ')'
(3154,43): run-time error CSS1025: Expected comma or open brace, found ')'
(3160,23): run-time error CSS1035: Expected colon, found ','
(3174,23): run-time error CSS1039: Token not allowed after unary operator: '-font-primary'
(3176,7): run-time error CSS1035: Expected colon, found ','
(3280,23): run-time error CSS1039: Token not allowed after unary operator: '-font-primary'
(3291,10): run-time error CSS1035: Expected colon, found '['
(3316,24): run-time error CSS1035: Expected colon, found 'input'
(3333,14): run-time error CSS1035: Expected colon, found '{'
(3437,11): run-time error CSS1035: Expected colon, found 'tr'
(3462,23): run-time error CSS1035: Expected colon, found '{'
(3538,44): run-time error CSS1019: Unexpected token, found ' '
(3538,44): run-time error CSS1019: Unexpected token, found ' '
(3538,44): run-time error CSS1042: Expected function, found ' '
(3538,44): run-time error CSS1062: Expected semicolon or closing curly-brace, found ' '
(3563,26): run-time error CSS1039: Token not allowed after unary operator: '-space-5'
(3656,18): run-time error CSS1035: Expected colon, found ';'
(3669,19): run-time error CSS1039: Token not allowed after unary operator: '-space-2'
(3747,42): run-time error CSS1039: Token not allowed after unary operator: '-clr-azure-85'
(3776,25): run-time error CSS1039: Token not allowed after unary operator: '-font-size-2xl'
(3784,25): run-time error CSS1039: Token not allowed after unary operator: '-font-size-2xl'
(3826,23): run-time error CSS1039: Token not allowed after unary operator: '-space-2'
(3901,42): run-time error CSS1039: Token not allowed after unary operator: '-clr-azure-95'
(3917,25): run-time error CSS1039: Token not allowed after unary operator: '-font-size-sm'
(3941,26): run-time error CSS1039: Token not allowed after unary operator: '-clr-cyan-47'
(3942,38): run-time error CSS1039: Token not allowed after unary operator: '-border-radius-md'
(3943,39): run-time error CSS1039: Token not allowed after unary operator: '-border-radius-md'
(3949,32): run-time error CSS1039: Token not allowed after unary operator: '-space-2'
(3950,33): run-time error CSS1039: Token not allowed after unary operator: '-space-2'
(3955,19): run-time error CSS1039: Token not allowed after unary operator: '-space-3'
(4054,24): run-time error CSS1039: Token not allowed after unary operator: '-space-6'
(4055,22): run-time error CSS1039: Token not allowed after unary operator: '-space-3'
(4056,25): run-time error CSS1039: Token not allowed after unary operator: '-space-3'
(4058,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '&'
(4072,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '&'
(4085,6): run-time error CSS1035: Expected colon, found '.'
(4104,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(4182,1): run-time error CSS1019: Unexpected token, found '@import'
(4182,9): run-time error CSS1019: Unexpected token, found 'url('https://fonts.googleapis.com/css2?family=Roboto+Mono&display=swap')'
(4188,35): run-time error CSS1039: Token not allowed after unary operator: '-bs-gutter-x'
(4190,34): run-time error CSS1039: Token not allowed after unary operator: '-bs-gutter-x'
(4202,34): run-time error CSS1039: Token not allowed after unary operator: '-font-primary'
(4205,29): run-time error CSS1039: Token not allowed after unary operator: '-space-3'
(4229,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(4230,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(4231,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(4232,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(4233,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(4234,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(4235,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(4239,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(4240,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(4241,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(4242,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(4243,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(4244,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(4245,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(4246,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(4247,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(4248,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(4249,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(4253,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(4254,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(4255,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(4256,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(4257,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(4260,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(4261,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(4264,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(4265,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(4266,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(4267,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(4268,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(4269,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(4270,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(4273,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(4274,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(4275,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(4276,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(4277,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(4278,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(4281,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(4282,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(4283,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(4284,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(4287,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(4288,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(4289,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(4290,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(4291,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(4292,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(4293,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(4294,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(4297,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(4298,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(4299,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(4300,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(4304,13): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(4305,13): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(4306,13): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(4307,13): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(4308,13): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(4309,13): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(4310,13): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(4311,13): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(4312,13): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(4313,13): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(4316,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(4317,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(4318,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(4319,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(4320,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(4324,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(4325,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(4326,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(4327,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(4328,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(4329,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(4330,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(4331,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(4332,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(4333,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(4334,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(4335,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(4338,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(4339,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(4340,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(4341,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(4342,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(4344,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(4345,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(4347,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(4348,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(4349,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(4352,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(4353,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(4354,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(4355,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(4357,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(4358,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(4359,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(4362,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(4378,23): run-time error CSS1039: Token not allowed after unary operator: '-font-primary'
(4379,28): run-time error CSS1039: Token not allowed after unary operator: '-clr-background-main'
(4380,17): run-time error CSS1039: Token not allowed after unary operator: '-clr-text-primary'
(4386,23): run-time error CSS1039: Token not allowed after unary operator: '-font-headings'
(4387,17): run-time error CSS1039: Token not allowed after unary operator: '-clr-text-headings'
(4420,20): run-time error CSS1039: Token not allowed after unary operator: '-space-1'
(4421,20): run-time error CSS1039: Token not allowed after unary operator: '-space-2'
(4422,20): run-time error CSS1039: Token not allowed after unary operator: '-space-4'
(4423,20): run-time error CSS1039: Token not allowed after unary operator: '-space-6'
(4424,20): run-time error CSS1039: Token not allowed after unary operator: '-space-8'
(4428,21): run-time error CSS1039: Token not allowed after unary operator: '-space-1'
(4428,55): run-time error CSS1039: Token not allowed after unary operator: '-space-1'
(4429,21): run-time error CSS1039: Token not allowed after unary operator: '-space-2'
(4429,55): run-time error CSS1039: Token not allowed after unary operator: '-space-2'
(4430,21): run-time error CSS1039: Token not allowed after unary operator: '-space-3'
(4430,55): run-time error CSS1039: Token not allowed after unary operator: '-space-3'
(4431,21): run-time error CSS1039: Token not allowed after unary operator: '-space-4'
(4431,55): run-time error CSS1039: Token not allowed after unary operator: '-space-4'
(4432,21): run-time error CSS1039: Token not allowed after unary operator: '-space-5'
(4432,55): run-time error CSS1039: Token not allowed after unary operator: '-space-5'
(4433,21): run-time error CSS1039: Token not allowed after unary operator: '-space-6'
(4433,55): run-time error CSS1039: Token not allowed after unary operator: '-space-6'
(4434,21): run-time error CSS1039: Token not allowed after unary operator: '-space-8'
(4434,55): run-time error CSS1039: Token not allowed after unary operator: '-space-8'
(4435,22): run-time error CSS1039: Token not allowed after unary operator: '-space-10'
(4435,58): run-time error CSS1039: Token not allowed after unary operator: '-space-10'
(4436,22): run-time error CSS1039: Token not allowed after unary operator: '-space-12'
(4436,58): run-time error CSS1039: Token not allowed after unary operator: '-space-12'
(4437,22): run-time error CSS1039: Token not allowed after unary operator: '-space-16'
(4437,58): run-time error CSS1039: Token not allowed after unary operator: '-space-16'
(4438,22): run-time error CSS1039: Token not allowed after unary operator: '-space-20'
(4438,58): run-time error CSS1039: Token not allowed after unary operator: '-space-20'
(4439,22): run-time error CSS1039: Token not allowed after unary operator: '-space-24'
(4439,58): run-time error CSS1039: Token not allowed after unary operator: '-space-24'
(4442,26): run-time error CSS1039: Token not allowed after unary operator: '-space-1'
(4442,67): run-time error CSS1039: Token not allowed after unary operator: '-space-1'
(4442,116): run-time error CSS1039: Token not allowed after unary operator: '-space-1'
(4442,158): run-time error CSS1039: Token not allowed after unary operator: '-space-1'
(4443,26): run-time error CSS1039: Token not allowed after unary operator: '-space-2'
(4443,67): run-time error CSS1039: Token not allowed after unary operator: '-space-2'
(4443,116): run-time error CSS1039: Token not allowed after unary operator: '-space-2'
(4443,158): run-time error CSS1039: Token not allowed after unary operator: '-space-2'
(4444,26): run-time error CSS1039: Token not allowed after unary operator: '-space-4'
(4444,67): run-time error CSS1039: Token not allowed after unary operator: '-space-4'
(4444,116): run-time error CSS1039: Token not allowed after unary operator: '-space-4'
(4444,158): run-time error CSS1039: Token not allowed after unary operator: '-space-4'
(4445,26): run-time error CSS1039: Token not allowed after unary operator: '-space-5'
(4445,67): run-time error CSS1039: Token not allowed after unary operator: '-space-5'
(4445,116): run-time error CSS1039: Token not allowed after unary operator: '-space-5'
(4445,158): run-time error CSS1039: Token not allowed after unary operator: '-space-5'
(4446,26): run-time error CSS1039: Token not allowed after unary operator: '-space-6'
(4446,67): run-time error CSS1039: Token not allowed after unary operator: '-space-6'
(4446,116): run-time error CSS1039: Token not allowed after unary operator: '-space-6'
(4446,158): run-time error CSS1039: Token not allowed after unary operator: '-space-6'
(4447,26): run-time error CSS1039: Token not allowed after unary operator: '-space-8'
(4447,67): run-time error CSS1039: Token not allowed after unary operator: '-space-8'
(4447,116): run-time error CSS1039: Token not allowed after unary operator: '-space-8'
(4447,158): run-time error CSS1039: Token not allowed after unary operator: '-space-8'
(4448,27): run-time error CSS1039: Token not allowed after unary operator: '-space-12'
(4448,69): run-time error CSS1039: Token not allowed after unary operator: '-space-12'
(4448,120): run-time error CSS1039: Token not allowed after unary operator: '-space-12'
(4448,163): run-time error CSS1039: Token not allowed after unary operator: '-space-12'
(4449,27): run-time error CSS1039: Token not allowed after unary operator: '-space-16'
(4449,69): run-time error CSS1039: Token not allowed after unary operator: '-space-16'
(4449,120): run-time error CSS1039: Token not allowed after unary operator: '-space-16'
(4449,163): run-time error CSS1039: Token not allowed after unary operator: '-space-16'
(4452,27): run-time error CSS1039: Token not allowed after unary operator: '-space-1'
(4452,57): run-time error CSS1039: Token not allowed after unary operator: '-space-1'
(4452,97): run-time error CSS1039: Token not allowed after unary operator: '-space-1'
(4452,128): run-time error CSS1039: Token not allowed after unary operator: '-space-1'
(4453,27): run-time error CSS1039: Token not allowed after unary operator: '-space-2'
(4453,67): run-time error CSS1039: Token not allowed after unary operator: '-space-2'
(4453,117): run-time error CSS1039: Token not allowed after unary operator: '-space-2'
(4453,158): run-time error CSS1039: Token not allowed after unary operator: '-space-2'
(4454,27): run-time error CSS1039: Token not allowed after unary operator: '-space-4'
(4454,57): run-time error CSS1039: Token not allowed after unary operator: '-space-4'
(4454,97): run-time error CSS1039: Token not allowed after unary operator: '-space-4'
(4454,138): run-time error CSS1039: Token not allowed after unary operator: '-space-4'
(4455,27): run-time error CSS1039: Token not allowed after unary operator: '-space-6'
(4455,57): run-time error CSS1039: Token not allowed after unary operator: '-space-6'
(4455,97): run-time error CSS1039: Token not allowed after unary operator: '-space-6'
(4455,128): run-time error CSS1039: Token not allowed after unary operator: '-space-6'
(4456,27): run-time error CSS1039: Token not allowed after unary operator: '-space-8'
(4456,57): run-time error CSS1039: Token not allowed after unary operator: '-space-8'
(4456,97): run-time error CSS1039: Token not allowed after unary operator: '-space-8'
(4456,128): run-time error CSS1039: Token not allowed after unary operator: '-space-8'
(4457,28): run-time error CSS1039: Token not allowed after unary operator: '-space-12'
(4457,59): run-time error CSS1039: Token not allowed after unary operator: '-space-12'
(4457,101): run-time error CSS1039: Token not allowed after unary operator: '-space-12'
(4457,133): run-time error CSS1039: Token not allowed after unary operator: '-space-12'
(4458,28): run-time error CSS1039: Token not allowed after unary operator: '-space-16'
(4458,59): run-time error CSS1039: Token not allowed after unary operator: '-space-16'
(4458,101): run-time error CSS1039: Token not allowed after unary operator: '-space-16'
(4458,133): run-time error CSS1039: Token not allowed after unary operator: '-space-16'
(4462,26): run-time error CSS1039: Token not allowed after unary operator: '-space-1'
(4462,75): run-time error CSS1039: Token not allowed after unary operator: '-space-1'
(4463,26): run-time error CSS1039: Token not allowed after unary operator: '-space-2'
(4463,75): run-time error CSS1039: Token not allowed after unary operator: '-space-2'
(4464,26): run-time error CSS1039: Token not allowed after unary operator: '-space-4'
(4464,75): run-time error CSS1039: Token not allowed after unary operator: '-space-4'
(4465,26): run-time error CSS1039: Token not allowed after unary operator: '-space-5'
(4465,75): run-time error CSS1039: Token not allowed after unary operator: '-space-5'
(4466,26): run-time error CSS1039: Token not allowed after unary operator: '-space-6'
(4466,75): run-time error CSS1039: Token not allowed after unary operator: '-space-6'
(4467,26): run-time error CSS1039: Token not allowed after unary operator: '-space-8'
(4467,75): run-time error CSS1039: Token not allowed after unary operator: '-space-8'
(4468,27): run-time error CSS1039: Token not allowed after unary operator: '-space-12'
(4468,78): run-time error CSS1039: Token not allowed after unary operator: '-space-12'
(4469,27): run-time error CSS1039: Token not allowed after unary operator: '-space-16'
(4469,78): run-time error CSS1039: Token not allowed after unary operator: '-space-16'
(4472,29): run-time error CSS1039: Token not allowed after unary operator: '-space-1'
(4472,81): run-time error CSS1039: Token not allowed after unary operator: '-space-1'
(4473,29): run-time error CSS1039: Token not allowed after unary operator: '-space-2'
(4473,81): run-time error CSS1039: Token not allowed after unary operator: '-space-2'
(4474,29): run-time error CSS1039: Token not allowed after unary operator: '-space-3'
(4474,81): run-time error CSS1039: Token not allowed after unary operator: '-space-3'
(4475,29): run-time error CSS1039: Token not allowed after unary operator: '-space-4'
(4475,81): run-time error CSS1039: Token not allowed after unary operator: '-space-4'
(4476,29): run-time error CSS1039: Token not allowed after unary operator: '-space-5'
(4476,81): run-time error CSS1039: Token not allowed after unary operator: '-space-5'
(4477,29): run-time error CSS1039: Token not allowed after unary operator: '-space-6'
(4477,81): run-time error CSS1039: Token not allowed after unary operator: '-space-6'
(4478,29): run-time error CSS1039: Token not allowed after unary operator: '-space-8'
(4478,81): run-time error CSS1039: Token not allowed after unary operator: '-space-8'
(4479,30): run-time error CSS1039: Token not allowed after unary operator: '-space-12'
(4479,84): run-time error CSS1039: Token not allowed after unary operator: '-space-12'
(4480,30): run-time error CSS1039: Token not allowed after unary operator: '-space-16'
(4480,84): run-time error CSS1039: Token not allowed after unary operator: '-space-16'
(4483,27): run-time error CSS1039: Token not allowed after unary operator: '-space-1'
(4483,67): run-time error CSS1039: Token not allowed after unary operator: '-space-1'
(4484,27): run-time error CSS1039: Token not allowed after unary operator: '-space-2'
(4484,67): run-time error CSS1039: Token not allowed after unary operator: '-space-2'
(4485,27): run-time error CSS1039: Token not allowed after unary operator: '-space-4'
(4485,67): run-time error CSS1039: Token not allowed after unary operator: '-space-4'
(4486,27): run-time error CSS1039: Token not allowed after unary operator: '-space-6'
(4486,67): run-time error CSS1039: Token not allowed after unary operator: '-space-6'
(4487,27): run-time error CSS1039: Token not allowed after unary operator: '-space-8'
(4487,67): run-time error CSS1039: Token not allowed after unary operator: '-space-8'
(4488,28): run-time error CSS1039: Token not allowed after unary operator: '-space-12'
(4488,69): run-time error CSS1039: Token not allowed after unary operator: '-space-12'
(4489,28): run-time error CSS1039: Token not allowed after unary operator: '-space-16'
(4489,69): run-time error CSS1039: Token not allowed after unary operator: '-space-16'
(4492,28): run-time error CSS1039: Token not allowed after unary operator: '-space-1'
(4492,79): run-time error CSS1039: Token not allowed after unary operator: '-space-1'
(4493,28): run-time error CSS1039: Token not allowed after unary operator: '-space-2'
(4493,79): run-time error CSS1039: Token not allowed after unary operator: '-space-2'
(4494,28): run-time error CSS1039: Token not allowed after unary operator: '-space-4'
(4494,79): run-time error CSS1039: Token not allowed after unary operator: '-space-4'
(4495,28): run-time error CSS1039: Token not allowed after unary operator: '-space-6'
(4495,79): run-time error CSS1039: Token not allowed after unary operator: '-space-6'
(4496,28): run-time error CSS1039: Token not allowed after unary operator: '-space-8'
(4496,79): run-time error CSS1039: Token not allowed after unary operator: '-space-8'
(4497,29): run-time error CSS1039: Token not allowed after unary operator: '-space-12'
(4497,82): run-time error CSS1039: Token not allowed after unary operator: '-space-12'
(4498,29): run-time error CSS1039: Token not allowed after unary operator: '-space-16'
(4498,82): run-time error CSS1039: Token not allowed after unary operator: '-space-16'
(4501,29): run-time error CSS1039: Token not allowed after unary operator: '-font-size-2xs'
(4502,28): run-time error CSS1039: Token not allowed after unary operator: '-font-size-xs'
(4503,28): run-time error CSS1039: Token not allowed after unary operator: '-font-size-sm'
(4504,30): run-time error CSS1039: Token not allowed after unary operator: '-font-size-base'
(4505,28): run-time error CSS1039: Token not allowed after unary operator: '-font-size-lg'
(4506,28): run-time error CSS1039: Token not allowed after unary operator: '-font-size-xl'
(4507,29): run-time error CSS1039: Token not allowed after unary operator: '-font-size-2xl'
(4508,29): run-time error CSS1039: Token not allowed after unary operator: '-font-size-3xl'
(4509,29): run-time error CSS1039: Token not allowed after unary operator: '-font-size-4xl'
(4510,29): run-time error CSS1039: Token not allowed after unary operator: '-font-size-5xl'
(4513,35): run-time error CSS1039: Token not allowed after unary operator: '-font-weight-regular'
(4514,34): run-time error CSS1039: Token not allowed after unary operator: '-font-weight-medium'
(4515,36): run-time error CSS1039: Token not allowed after unary operator: '-font-weight-semibold'
(4516,32): run-time error CSS1039: Token not allowed after unary operator: '-font-weight-bold'
(4518,33): run-time error CSS1039: Token not allowed after unary operator: '-font-weight-black'
(4520,42): run-time error CSS1039: Token not allowed after unary operator: '-font-primary'
(4521,39): run-time error CSS1039: Token not allowed after unary operator: '-font-secondary'
(4522,43): run-time error CSS1039: Token not allowed after unary operator: '-font-headings'
(4523,46): run-time error CSS1039: Token not allowed after unary operator: '-font-monospace'
(4525,29): run-time error CSS1039: Token not allowed after unary operator: '-clr-text-primary'
(4526,31): run-time error CSS1039: Token not allowed after unary operator: '-clr-text-secondary'
(4527,28): run-time error CSS1039: Token not allowed after unary operator: '-clr-danger'
(4528,29): run-time error CSS1039: Token not allowed after unary operator: '-clr-success'
(4529,26): run-time error CSS1039: Token not allowed after unary operator: '-clr-info'
(4530,34): run-time error CSS1039: Token not allowed after unary operator: '-clr-success-dark'
(4531,33): run-time error CSS1039: Token not allowed after unary operator: '-clr-danger-dark'
(4532,31): run-time error CSS1039: Token not allowed after unary operator: '-clr-info-dark'
(4533,34): run-time error CSS1039: Token not allowed after unary operator: '-clr-warning-dark'
(4534,36): run-time error CSS1039: Token not allowed after unary operator: '-clr-navy-900'
(4535,30): run-time error CSS1039: Token not allowed after unary operator: '-clr-azure-09'
(4536,30): run-time error CSS1039: Token not allowed after unary operator: '-clr-azure-19'
(4537,30): run-time error CSS1039: Token not allowed after unary operator: '-clr-azure-42'
(4538,30): run-time error CSS1039: Token not allowed after unary operator: '-clr-azure-44'
(4539,30): run-time error CSS1039: Token not allowed after unary operator: '-clr-azure-46'
(4540,30): run-time error CSS1039: Token not allowed after unary operator: '-clr-navy-500'
(4541,30): run-time error CSS1039: Token not allowed after unary operator: '-clr-azure-70'
(4542,30): run-time error CSS1039: Token not allowed after unary operator: '-clr-azure-80'
(4543,30): run-time error CSS1039: Token not allowed after unary operator: '-clr-azure-85'
(4544,30): run-time error CSS1039: Token not allowed after unary operator: '-clr-azure-89'
(4545,29): run-time error CSS1039: Token not allowed after unary operator: '-clr-navy-700'
(4546,32): run-time error CSS1039: Token not allowed after unary operator: '-clr-blue-brand'
(4547,32): run-time error CSS1039: Token not allowed after unary operator: '-clr-blue-light-bg'
(4548,29): run-time error CSS1039: Token not allowed after unary operator: '-clr-grey-95'
(4549,29): run-time error CSS1039: Token not allowed after unary operator: '-clr-grey-65'
(4550,29): run-time error CSS1039: Token not allowed after unary operator: '-clr-grey-50'
(4551,29): run-time error CSS1039: Token not allowed after unary operator: '-clr-grey-40'
(4552,29): run-time error CSS1039: Token not allowed after unary operator: '-clr-grey-20'
(4554,33): run-time error CSS1039: Token not allowed after unary operator: '-clr-cyan-47'
(4558,38): run-time error CSS1039: Token not allowed after unary operator: '-clr-success'
(4559,44): run-time error CSS1039: Token not allowed after unary operator: '-clr-success-light'
(4560,43): run-time error CSS1039: Token not allowed after unary operator: '-clr-success-dark'
(4561,37): run-time error CSS1039: Token not allowed after unary operator: '-clr-danger'
(4562,43): run-time error CSS1039: Token not allowed after unary operator: '-clr-danger-light'
(4563,42): run-time error CSS1039: Token not allowed after unary operator: '-clr-danger-dark'
(4564,41): run-time error CSS1039: Token not allowed after unary operator: '-clr-info-light'
(4565,38): run-time error CSS1039: Token not allowed after unary operator: '-clr-warning'
(4566,44): run-time error CSS1039: Token not allowed after unary operator: '-clr-warning-light'
(4567,43): run-time error CSS1039: Token not allowed after unary operator: '-clr-warning-dark'
(4571,38): run-time error CSS1039: Token not allowed after unary operator: '-clr-azure-80'
(4574,36): run-time error CSS1039: Token not allowed after unary operator: '-clr-white'
(4575,39): run-time error CSS1039: Token not allowed after unary operator: '-clr-navy-900'
(4576,39): run-time error CSS1039: Token not allowed after unary operator: '-clr-navy-800'
(4577,39): run-time error CSS1039: Token not allowed after unary operator: '-clr-navy-700'
(4578,39): run-time error CSS1039: Token not allowed after unary operator: '-clr-navy-600'
(4579,39): run-time error CSS1039: Token not allowed after unary operator: '-clr-navy-500'
(4580,39): run-time error CSS1039: Token not allowed after unary operator: '-clr-navy-400'
(4581,39): run-time error CSS1039: Token not allowed after unary operator: '-clr-azure-85'
(4582,39): run-time error CSS1039: Token not allowed after unary operator: '-clr-azure-89'
(4583,39): run-time error CSS1039: Token not allowed after unary operator: '-clr-azure-95'
(4584,39): run-time error CSS1039: Token not allowed after unary operator: '-clr-azure-99'
(4585,39): run-time error CSS1039: Token not allowed after unary operator: '-clr-azure-19'
(4586,39): run-time error CSS1039: Token not allowed after unary operator: '-clr-azure-09'
(4587,41): run-time error CSS1039: Token not allowed after unary operator: '-clr-blue-brand'
(4588,41): run-time error CSS1039: Token not allowed after unary operator: '-clr-blue-light-bg'
(4589,38): run-time error CSS1039: Token not allowed after unary operator: '-clr-grey-95'
(4593,35): run-time error CSS1039: Token not allowed after unary operator: '-border-radius-sm'
(4594,35): run-time error CSS1039: Token not allowed after unary operator: '-border-radius-md'
(4595,35): run-time error CSS1039: Token not allowed after unary operator: '-border-radius-lg'
(4596,35): run-time error CSS1039: Token not allowed after unary operator: '-border-radius-xl'
(4597,37): run-time error CSS1039: Token not allowed after unary operator: '-border-radius-full'
(4599,31): run-time error CSS1039: Token not allowed after unary operator: '-shadow-sm'
(4600,31): run-time error CSS1039: Token not allowed after unary operator: '-shadow-md'
(4601,31): run-time error CSS1039: Token not allowed after unary operator: '-shadow-lg'
(4604,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(4605,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(4606,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(4608,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(4609,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(4610,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(4612,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(4614,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(4615,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(4616,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(4619,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(4620,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(4621,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(4635,31): run-time error CSS1039: Token not allowed after unary operator: '-transition-property-common'
(4636,38): run-time error CSS1039: Token not allowed after unary operator: '-transition-timing-function-ease'
(4637,31): run-time error CSS1039: Token not allowed after unary operator: '-transition-duration-fast'
(4640,31): run-time error CSS1039: Token not allowed after unary operator: '-transition-property-common'
(4641,38): run-time error CSS1039: Token not allowed after unary operator: '-transition-timing-function-ease'
(4642,31): run-time error CSS1039: Token not allowed after unary operator: '-transition-duration-normal'
(4650,48): run-time error CSS1039: Token not allowed after unary operator: '-transform-scale-lg'
(4652,58): run-time error CSS1039: Token not allowed after unary operator: '-transform-translate-y-sm'
(4653,43): run-time error CSS1039: Token not allowed after unary operator: '-shadow-lg'
(4656,49): run-time error CSS1039: Token not allowed after unary operator: '-transform-scale-sm'
(4678,32): run-time error CSS1039: Token not allowed after unary operator: '-clr-info-light'
(4682,20): run-time error CSS1039: Token not allowed after unary operator: '-space-5'
(4683,26): run-time error CSS1039: Token not allowed after unary operator: '-space-5'
(4683,66): run-time error CSS1039: Token not allowed after unary operator: '-space-5'
(4689,20): run-time error CSS1039: Token not allowed after unary operator: '-space-3'
(4690,20): run-time error CSS1039: Token not allowed after unary operator: '-space-4'
(4691,20): run-time error CSS1039: Token not allowed after unary operator: '-space-5'
(4692,20): run-time error CSS1039: Token not allowed after unary operator: '-space-8'
(4693,21): run-time error CSS1039: Token not allowed after unary operator: '-space-12'
(4694,21): run-time error CSS1039: Token not allowed after unary operator: '-space-16'
(4695,21): run-time error CSS1039: Token not allowed after unary operator: '-space-20'
(4701,37): run-time error CSS1039: Token not allowed after unary operator: '-font-headings'
(4701,84): run-time error CSS1019: Unexpected token, found ' '
(4701,84): run-time error CSS1019: Unexpected token, found ' '
(4701,84): run-time error CSS1042: Expected function, found ' '
(4701,84): run-time error CSS1062: Expected semicolon or closing curly-brace, found ' '
(4704,30): run-time error CSS1039: Token not allowed after unary operator: '-font-headings'
(4704,78): run-time error CSS1019: Unexpected token, found ' '
(4704,78): run-time error CSS1019: Unexpected token, found ' '
(4704,78): run-time error CSS1042: Expected function, found ' '
(4704,78): run-time error CSS1062: Expected semicolon or closing curly-brace, found ' '
(4707,30): run-time error CSS1039: Token not allowed after unary operator: '-font-headings'
(4707,77): run-time error CSS1019: Unexpected token, found ' '
(4707,77): run-time error CSS1019: Unexpected token, found ' '
(4707,77): run-time error CSS1042: Expected function, found ' '
(4707,77): run-time error CSS1062: Expected semicolon or closing curly-brace, found ' '
(4710,30): run-time error CSS1039: Token not allowed after unary operator: '-font-headings'
(4710,80): run-time error CSS1019: Unexpected token, found ' '
(4710,80): run-time error CSS1019: Unexpected token, found ' '
(4710,80): run-time error CSS1042: Expected function, found ' '
(4710,80): run-time error CSS1062: Expected semicolon or closing curly-brace, found ' '
(4713,30): run-time error CSS1039: Token not allowed after unary operator: '-font-headings'
(4713,79): run-time error CSS1019: Unexpected token, found ' '
(4713,79): run-time error CSS1019: Unexpected token, found ' '
(4713,79): run-time error CSS1042: Expected function, found ' '
(4713,79): run-time error CSS1062: Expected semicolon or closing curly-brace, found ' '
(4716,30): run-time error CSS1039: Token not allowed after unary operator: '-font-headings'
(4716,80): run-time error CSS1019: Unexpected token, found ' '
(4716,80): run-time error CSS1019: Unexpected token, found ' '
(4716,80): run-time error CSS1042: Expected function, found ' '
(4716,80): run-time error CSS1062: Expected semicolon or closing curly-brace, found ' '
(4719,30): run-time error CSS1039: Token not allowed after unary operator: '-font-headings'
(4719,80): run-time error CSS1019: Unexpected token, found ' '
(4719,80): run-time error CSS1019: Unexpected token, found ' '
(4719,80): run-time error CSS1042: Expected function, found ' '
(4719,80): run-time error CSS1062: Expected semicolon or closing curly-brace, found ' '
(4722,35): run-time error CSS1039: Token not allowed after unary operator: '-font-secondary'
(4725,35): run-time error CSS1039: Token not allowed after unary operator: '-font-secondary'
(4727,38): run-time error CSS1039: Token not allowed after unary operator: '-font-secondary'
(4730,35): run-time error CSS1039: Token not allowed after unary operator: '-font-secondary'
(4733,34): run-time error CSS1039: Token not allowed after unary operator: '-font-secondary'
(4733,84): run-time error CSS1019: Unexpected token, found ' '
(4733,84): run-time error CSS1019: Unexpected token, found ' '
(4733,84): run-time error CSS1042: Expected function, found ' '
(4733,84): run-time error CSS1062: Expected semicolon or closing curly-brace, found ' '
(4736,34): run-time error CSS1039: Token not allowed after unary operator: '-font-secondary'
(4736,85): run-time error CSS1019: Unexpected token, found ' '
(4736,85): run-time error CSS1019: Unexpected token, found ' '
(4736,85): run-time error CSS1042: Expected function, found ' '
(4736,85): run-time error CSS1062: Expected semicolon or closing curly-brace, found ' '
(4739,34): run-time error CSS1039: Token not allowed after unary operator: '-font-secondary'
(4739,85): run-time error CSS1019: Unexpected token, found ' '
(4739,85): run-time error CSS1019: Unexpected token, found ' '
(4739,85): run-time error CSS1042: Expected function, found ' '
(4739,85): run-time error CSS1062: Expected semicolon or closing curly-brace, found ' '
(4742,39): run-time error CSS1039: Token not allowed after unary operator: '-font-headings'
(4745,34): run-time error CSS1039: Token not allowed after unary operator: '-font-primary'
(4748,38): run-time error CSS1039: Token not allowed after unary operator: '-font-secondary'
(4764,10): run-time error CSS1035: Expected colon, found '&'
(4789,21): run-time error CSS1039: Token not allowed after unary operator: '-font-size-sm'
 */
.availability-menu {
    background-color: var(--clr-navy-700);
    position: fixed;
    top: 0;
    width: 100%
}

.nav-up:not(.open) {
    transform: translateY(-10.5625rem);
}

.availability-menu.open {
    background-color: #14264f;
}

.availability-menu.open .mob-logo img {
    opacity: 0;
}

.marketing .mob-logo {
    @media (max-width:767px) {
        max-width: 200px !important;
    }
}

.marketing .mob-menu-child {
    @media (max-width:767px) {
        top: 3.5rem;
    }
}

.navbar {
    background-color: #fff;
}

.navbar-toggle .icon-bar {
    background-color: #303c47;
}

.nav-logo {
    padding: 0.6875rem 0;
    max-width: 12.65rem;
    line-height: 1em;
}

.nav-logo a {
    display: block;
}

.nav-logo img {
    vertical-align: middle;
    transition: all .3s ease;
}

body:not(.marketing) .hamburger-menu {
    height: 2.875rem;
    cursor: pointer;
}

body:not(.marketing) .bar,
body:not(.marketing) .bar:after,
body:not(.marketing) .bar:before {
    width: 1.4375rem;
    height: 0.1875rem;
}

body:not(.marketing) .bar {
    position: relative;
    background: #ffffff;
    transition: all 0s .3s;
    transform: translateY(1.3125rem);
}

body:not(.marketing) .bar.animate {
    background: rgba(255, 60, 71, 0);
}

body:not(.marketing) .bar:before {
    position: absolute;
    bottom: 0.4375rem;
    left: 0;
    background: #ffffff;
    content: "";
    transition: bottom .3s .3s cubic-bezier(.23, 1, .32, 1), transform .3s cubic-bezier(.23, 1, .32, 1);
}

body:not(.marketing) .bar:after {
    position: absolute;
    top: 0.4375rem;
    left: 0;
    background: #ffffff;
    content: "";
    transition: top .3s .3s cubic-bezier(.23, 1, .32, 1), transform .3s cubic-bezier(.23, 1, .32, 1);
}

body:not(.marketing) .bar.animate:after {
    top: 0;
    background-color: #fff;
    transition: top .3s cubic-bezier(.23, 1, .32, 1), transform .3s .3s cubic-bezier(.23, 1, .32, 1);
    transform: rotate(45deg);
}

body:not(.marketing) .bar.animate:before {
    bottom: 0;
    background-color: #fff;
    transition: bottom .3s cubic-bezier(.23, 1, .32, 1), transform .3s .3s cubic-bezier(.23, 1, .32, 1);
    transform: rotate(-45deg);
}

.availability-menu-child {
    background-color: #14264f;
    text-transform: capitalize;
    width: 100%;
    position: fixed;
    top: 3.875rem;
    bottom: 0;
    overflow: hidden;
    display: none;
    overflow-y: auto;
}

.availability-menu-child a {
    color: #fff;
    display: block;
    font-size: 1rem;
    line-height: 3.25rem;
    font-family: 'PT Serif', serif;
}

.availability-menu-child a:focus {
    text-decoration: none;
}

.availability-menu-child ul {
    border-top: 0.0625rem solid #506680;
}

.availability-menu-child li {
    position: relative;
    border-bottom: 0.0625rem solid #506680;
}

.availability-menu-child li a {
    position: relative;
}

.availability-menu-child li i.fa-angle-down {
    position: absolute;
    right: 0;
    font-size: 1.25rem;
    top: 0;
    padding-top: 0.9375rem;
    padding-bottom: .9375rem;
    transition: all .3s ease;
    color: #fff;
}

.availability-menu-child li.active i.fa-angle-down {
    transform: rotate(180deg);
}

.availability-menu-child li i.fa-phone {
    color: #09b4e6;
    vertical-align: middle;
    font-size: 1.125rem;
    margin-right: 0.3125rem;
}

.open .availability-menu-child ul>li {
    opacity: 1;
    transform: none;
}

.mob-sub-menu {
    font-size: 0.875rem;
    display: none;
    border-top: 0.0625rem solid #506680;
    padding: 0.9375rem 0;
}

.mob-sub-menu a {
    color: #fff;
    font-size: 0.875rem;
    line-height: 1.875rem;
    text-transform: none;
    padding-left: 2.5rem;
    font-family: 'Nunito-SemiBold';
    text-transform: uppercase;
}

.availability-menu-top .nav-pages {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    background: var(--clr-grey-75);
    position: absolute !important;
    bottom: 0;
    left: 0;
}

.availability-menu-top {
    min-height: 3.75rem;
    align-items: center;
}

.nav-search-bar {
    background: var(--clr-azure-95);
    color: var(--clr-white);
    position: fixed;
    top: 3.875rem;
    width: 100vw;
    left: 0;
    right: 0;
    display: flex;
    align-items: stretch;
    gap: .5rem;
    justify-content: end;
    padding: 0.75rem;
    border-bottom: 2px solid var(--clr-azure-70);
    box-shadow: 0 .5rem 1rem rgb(0 0 0 / 0.05), 0 .125rem .25rem rgb(0 0 0 / 0.1);
}

.nav-search-bar select,
.nav-search-bar input,
.nav-search-bar input.form-control {
    height: 2rem;
    font-size: 1rem;
    padding: .25rem;
    font-family: var(--font-primary);
    border: .0625rem solid var(--clr-azure-80);
}

.modal-body select,
.modal-body input,
.modal-body input.form-control,
.tracking-widget .tab-content select,
.tracking-widget .tab-content input,
.tracking-widget .tab-content input.form-control {
    height: 2.9375rem;
    font-size: var(--font-size-base);
    padding: .5rem;
    font-family: var(--font-primary);
    border: .0625rem solid var(--clr-azure-80);
}

.tracking-widget .tab-content select,
.tracking-widget .tab-content input,
.tracking-widget .tab-content input.form-control {
    height: 2rem;
    padding: .25rem .5rem;
}

.nav-search-bar input,
input.form-control {
    text-transform: uppercase;
    font-size: var(--text-size-xs);
}

.nav-search-bar .btn-close {
    align-self: center;
}

.breadcrumb {
    font-size: var(--font-size-2xs);
    color: var(--clr-navy-500);
    font-family: var(--font-secondary);
}

.breadcrumb-item .bi {
    margin-top: -.15rem;
    font-size: var(--font-size-sm);
}

.btn {
    font-family: var(--font-primary);
}

.btn-sm {
    height: auto !important;
    padding: .5rem .75rem !important;
    line-height: 1em;
}

.btn-info:hover {
    background-color: var(--clr-azure-09);
    border-color: var(--clr-azure-09);
    color: white;
}

.availavility-v2 .form-control {
    appearance: auto;
    padding-right: 1rem;
}

.availavility-v2 .form-check-input[type=checkbox],
.availavility-v2 .form-check-input[type=radio] {
    border-color: var(--clr-navy-400);
}

/* This fixes the border color being too light in radios and checkboxes */


.mbl-details {
    background: var(--clr-azure-95);
    padding: 2.25rem 0;
    margin-top: var(--space-5);
}


.mbl-master-table,
.ipi-master-table,
.charge-step-module {
    text-align: center;
    border-radius: var(--border-radius-md);
    border: 0.0625rem solid var(--clr-azure-85);
    box-shadow: var(--shadow-md);
    margin-bottom: -2.375rem;
    z-index: 1;
    position: relative;
    background: white;
    display: inline-flex;
    align-self: flex-end;
    font-family: var(--font-primary);
}

.ipi-master-table {
    align-items: center;

    @media (max-width:768px){
        flex-wrap:wrap; margin-top:var(--space-2);

        &>div {
            padding:var(--space-3)!important;

            &>.detail-pair {
                flex-direction:row!important;
                justify-content: space-between!important;
                align-items:center!important;
            }
        }
    }
}



.mbl-master-table .table-col {
    border-right: 0.0625rem solid var(--clr-azure-85);
    padding: 0;
    flex-grow: 2;
    display: flex;
    flex-direction: column;
}

.mbl-master-table .table-header {
    font-family: var(--font-secondary);
    color: var(--clr-azure-46);
    font-size: var(--font-size-xs);
    line-height: 1.1em;
    border-bottom: 0.0625rem solid var(--clr-azure-85);
    padding: var(--space-3);
    text-transform: uppercase;
    text-wrap: no-wrap;
}

.mbl-master-table .table-data {
    font-family: var(--font-primary);
    font-weight: bolder;
    padding: var(--space-3);
    font-size: var(--font-size-base);
    line-height: 1.1em;
    display: flex;
    align-items: center;
    flex-grow: 10;
    flex-wrap: wrap;
    justify-content: center;
}

.terminal-appt-status {
    border-radius: var(--border-radius-md);
    background: white;
    margin-top: var(--space-6);
    line-height: 1em;
    display: flex;
    align-items: center;
}

.terminal-appt-status span:first-child {
    background: var(--clr-cyan-47) url('../_images/terminal-status-arrow.webp') no-repeat 101% center / auto 100%;
    display: inline-block;
    padding: var(--space-4);
    padding-right: 2.5rem;
    border-top-left-radius: var(--border-radius-md);
    border-bottom-left-radius: var(--border-radius-md);
    color: white;
    font-family: var(--font-secondary);
    font-weight: bolder;
    align-self: stretch;
    align-content: center;
    flex-shrink: 0;
}

.terminal-appt-status .status {
    border-radius: var(--border-radius-md);
    background: white;
    margin-left: var(--space-2);
    padding: var(--space-4);
    font-family: var(--font-primary);
    font-size: var(--font-size-lg);
    line-height: 120%;
}

.milestone-v2 {
    font-family: var(--font-primary);
    line-height: 1em;
    align-items: center;
    display: grid;
    grid-template-columns: repeat(11, auto);
    grid-template-rows: auto;
    justify-content: center;
    justify-items: center;
}

.milestone-v2 .col-auto {
    align-items: center;
    display: flex;
    flex-direction: column;
}

.milestone-v2 .check {
    border-bottom: 0.0625rem solid var(--clr-grey-75);
    padding-bottom: var(--space-2);
    font-weight: bolder;
    font-size: var(--font-size-base);
}

.milestone-v2 .date {
    padding-top: var(--space-1);
    font-weight: bolder;
    color: var(--clr-success);
    color: var(--clr-navy-500);
    font-size: var(--font-size-lg);
}

.milestone-v2 .icon-64 {
    width: auto;
    height: 4vw;
    object-fit: contain;
    object-position: bottom center;
    margin-top: var(--space-1);
}

.mbl-details .lfd-godate {
    background: white !important;
    border-radius: .5rem;
    padding: .5rem 1rem .5rem .75rem;
}

.hbl-master-list {
    background: var(--clr-azure-95);
    min-height: calc(100vh - 255px - 28.75rem);
}

.hbl-master-list .hbl-list-item,
.search-results .hbl-list-item {
    background: var(--clr-white);
    margin-left: 0;
    margin-right: 0;
    border-radius: .5rem;
    font-family: var(--font-primary);
    justify-content: space-between;
    align-items: center;
    transition: background-color .3s ease;
    min-height: 2.5rem;
    box-shadow: var(--shadow-sm);
}


.hide-label {
    display: none;
    font-family: var(--font-secondary);
    line-height: 1em;
    text-transform: uppercase;
    font-size: var(--font-size-xs);
    color: #57687A;
}


/* ----    HBL Table layout.    ----- */

.hbl-master-list .hbl-list-grid {
    display: grid;
    grid-template-columns: 2.1875rem 7.5rem 4.6875rem 4.6875rem 4.6875rem 4.25rem 2.8125rem 11.375rem 3.125rem minmax(5.9375rem, auto) minmax(15.625rem, auto);
    grid-template-rows: auto;
    gap: .75rem;
    align-items: center;
    justify-content: stretch;

}

.search-results .hbl-list-grid {
    display: grid;
    grid-template-columns: 2.1875rem 7.5rem 4.6875rem 4.6875rem 4.6875rem minmax(15.625rem, auto);
    grid-template-rows: auto;
    gap: .75rem;
    align-items: center;
    justify-content: stretch;

    &.availability {
        grid-template-columns: 8.75rem 8.5rem 4.6875rem 4.6875rem 4.6875rem 4.6875rem 4.6875rem 4.6875rem;
    }

    @media (min-width:992px) {

        &.availability,
        &.ipi {
            padding-left: var(--space-2) !important;
            padding-right: var(--space-2) !important;
        }
    }

}

.hbl-master-list .hbl-list-grid div:first-child {
    padding-left: 0px;
}

.hbl-master-list .hbl-list-item:hover {

    color: black;
    text-decoration: none;
}

.hbl-master-list .hbl-list-item:hover div {
    text-decoration: none;
}

.hbl-master-list .btn-link:hover {
    color: var(--clr-azure-19);
}


.hbl-list-item .bi.bi-check,
.hbl-list-item .bi.bi-dash {
    font-size: var(--font-size-4xl);
    line-height: 1em;
}

.hbl-list-item .bi.bi-check {
    color: var(--clr-success);
}

.hbl-list-item .bi.bi-dash {
    color: var(--clr-grey-65);
}

.hbl-master-list .hbl-list-item .badge.ipi-tracing,
.search-results .hbl-list-item .badge.ipi-tracing,
#charges-list-container .badge.ipi-tracing {
    background: var(--clr-info-light);
    color: var(--clr-info-dark);
    font-size: var(--font-size-sm);
}

.hbl-master-list .hbl-list-item .badge.local-pickup,
.search-results .hbl-list-item .badge.local-pickup {
    background: var(--clr-success-light);
    color: var(--clr-success-dark);
    font-size: var(--font-size-sm);
}



   .hbl-item-details-modal {
    min-width: 95vw;
    font-family: var(--font-primary);

    @media (max-width:768px) {
        min-width: 85vw;
    }
}

.offcanvas-header,
.offcanvas-body {
    padding: var(--space-3) var(--space-5);
}

.offcanvas-header {
    justify-content: space-between;
    padding-top: var(--space-5);
    box-shadow: var(--shadow-sm);
}

.offcanvas-body {
    display: flex;
    flex-direction: column;
    gap: var(--space-8);
    background: white;
    padding-top: 0;
}

.offcanvas-header .hbl-number {
    color: #002A8D;
}

.hbl-details-body-main {
    background: white;
    padding: var(--space-6) var(--space-3) 0 var(--space-3);
    margin-bottom: var(--space-6);
}


.hbl-item-details-modal.offcanvas {
    display: flex;
    flex-direction: column;
    height: 100vh;
    overflow: hidden;
    /* Prevents double scrollbars */
}

/* Allow the header to shrink and scroll if it gets too tall */
.hbl-item-details-modal .offcanvas-header {
    flex: 0 1 auto;
    /* Grow to fit, but shrink if necessary */
    border-bottom: 1px solid #dee2e6;
    /* Visual separation */
}

/* The body takes up the remaining space */
.hbl-item-details-modal .offcanvas-body {
    flex: 1 1 auto;
    overflow-y: auto;

}


.hbl-item-details-modal .badge.pill-hold {
    background: var(--clr-danger-light);
    color: var(--clr-danger-dark);
    line-height: 1em;
    padding-top: .5rem;
    padding-bottom: .5rem;
    padding-right: .75rem;
    padding-left: .75rem;
    font-size: var(--font-size-sm);
    min-width: 3.75rem;
}

.hbl-item-details-modal .badge.pill-hold.disabled {
    background: var(--clr-azure-95);
    color: var(--clr-azure-80);
}

.hbl-item-details-modal .badge.pill-hold.success {
    background: var(--clr-success-light);
    color: var(--clr-success-dark);
}


.hbl-list-item .btn-charges-mbl {
    min-width: 5.3125rem;
    border-radius: 6rem;
    padding: var(--space) var();
}

.hbl-list-item .btn-charges-mbl {
    text-align: center;
}

.hbl-list-item .btn-charges-mbl .btn-icon {
    opacity: 0;
    font-size: var(--font-size-xl) !important;
}

.hbl-list-item .btn-charges-mbl:hover .btn-icon {
    opacity: 1;
    margin-left: 0;
}

.hbl-list-item .btn-charges-mbl span {
    transition: all ease .2s;
}

.hbl-list-item .btn-charges-mbl:hover span {
    opacity: 0;
    width: 0;
    display: none;
}

.hbl-list-item .btn-charges-mbl:hover .btn-icon img {
    filter: brightness(0) saturate(100%) invert(59%) sepia(45%) saturate(4297%) hue-rotate(110deg) brightness(89%) contrast(84%);
    height: 1.75rem;
}


.hbl-item-details-modal .info-bar {
    display: flex;
    justify-content: space-between;
    gap: 2rem;
}

.hbl-item-details-modal .frt-status {
    width: 21rem;
}

.hbl-item-details-modal .date-with-icon {
    font-size: var(--font-size-2xl);
    font-weight: bolder;
    line-height: 1.1em;
}

.hbl-item-details-modal .info-bar .info-status {
    min-width: 25%;
}

.info-item-holds {
    margin-right: auto;
}

.hbl-item-details-modal .info-bar .info-item {
    display: flex;
    flex-direction: column;
    gap: .25rem;
}

.hbl-item-details-modal .hbl-subheader {
    font-size: var(--font-size-lg);
    color: var(--clr-navy-500);
    font-family: var(--font-headings);
}

.hbl-item-details-modal .details-card {
    border-radius: var(--border-radius-md);
    background: #F9F9F9;
    padding: var(--space-5);
}

.details-card .details-grid .main-details .border {
    border-bottom: 0.0625rem solid var(--clr-azure-70);
}

.hbl-item-details-modal .details-card.ipi-status {
    padding: var(--space-5);
}

.details-card .main-details {
    display: grid;
    grid-template-columns: 1.5fr repeat(2, 1fr);
    grid-template-rows: repeat(2, 1fr);
    grid-row-gap: 1rem;
}

.hbl-details-container .btn-group {
    & button:first-child {
        border-radius: 3rem 0 0 3rem;
    }

    & button:last-child {
        border-radius: 0 3rem 3rem 0;
    }

    & button.disabled {
        border: 1px solid gray;
        color: gray;
        cursor: not-allowed !important;
        pointer-events: auto;
    }
}

.hbl-details-container .btn-group.btn-group-responsive {
    @media (max-width:576px) {
        width: 100%;
    }
}

.hbl-details-container .hbl-details-title {
    @media (max-width:768px) {
        width: 100%;
    }
}


.hbl-details-container {
    @media (max-width:576px) {
        & button.btn.close {
            position: absolute;
            top: 1rem;
            right: 2rem;
            background: white;
            color: rgb(33, 37, 41);
            box-shadow: var(--shadow-md);
        }
    }
}


.details-card.logistic-details,
.details-card.notes-details,
.details-card.exam-details,
.details-card.ipi-status {
    background: var(--clr-azure-95);
}

.logistic-details .main-details .detail-value,
.logistic-details .palet-details .detail-value,
#warehouse-in-out-Accordion .detail-value,
.warehouse-in-out-details .detail-value {
    font-weight: bolder;
    color: var(--clr-grey-20);
    line-height: 1.4em;
    font-family: var(--font-primary);
}

#warehouse-in-out-Accordion {
    .accordion-button {
        @media (max-width:768px){
            flex-wrap:wrap!important;
        }

        a.btn { color:black }
        a.btn:hover { color:white!important; text-decoration: none; }
    }
}

.info-label,
.detail-label {
    color: var(--clr-azure-46);
    font-family: var(--font-secondary);
    text-transform: uppercase;
    line-height: 1em;
    font-size: var(--font-size-xs);
    display: block;
}

.hbl-item-details-modal .details-card h2,
.hbl-item-details-modal .photo-gallery-section h2,
.hbl-item-details-modal h3,
.mbl-details.ipi-tracing h2,
.mbl-details.ipi-tracing .useful-links h2,
.warehouse-in-out h3 {
    font-family: var(--font-secondary);
    font-size: var(--font-size-base);
    color: var(--clr-blue-brand);
    font-weight: bold;
}

.hbl-item-details-modal .details-card h2 {
    font-size: var(--font-size-xl);
    color: var(--clr-azure-46);
}

.hbl-item-details-modal h3 {
    font-size: var(--font-size-xs);
}

.hbl-item-details-modal .status-timeline.local-pickup {
    height: 100%;
    justify-content: flex-start;
}

.hbl-item-details-modal .main-content {
    display: grid;
    grid-template-columns: 6fr 2.25fr 2.5fr;
    grid-template-rows: 1fr auto;
}

.hbl-item-details-modal .main-content .logistic-details {
    grid-area: 1 / 1 / 2 / 2;
}

.hbl-item-details-modal .main-content .notes-details {
    grid-area: 1 / 2 / 3 / 3;
}

.hbl-item-details-modal .main-content .exam-details {
    grid-area: 2 / 1 / 3 / 2;
}

.hbl-item-details-modal .main-content .ipi-status {
    grid-area: 1 / 3 / 3 / 4;
}


.btn-outline-dark i.btn-icon,
.btn-outline-dark i.btn-icon img,
.link-offset-2 i.btn-icon,
.link-offset-2 i.btn-icon img {
    height: 1rem;
    transition: filter ease .2s;
}

.btn-outline-dark:hover i.btn-icon img {
    filter: invert();
}


.ams-section,
.ams-release {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    padding: .75rem 0;
}


.ams-section .ams-list-item,
.ams-release .ams-list-item {
    background: var(--clr-azure-95);
    border: 0.0625rem solid var(--clr-azure-89);
    margin-left: 0;
    margin-right: 0;
    border-radius: .5rem;
    font-family: var(--font-primary);
    align-items: center;
    transition: background-color .3s ease;
    min-height: 2.5rem;
    box-shadow: var(--shadow-sm);
}

.ams-section .ams-list-header {
    font-family: var(--font-secondary);
    font-size: var(--font-size-xs);
    line-height: 1em;
}

.ams-list-grid,
.ams-header-grid {
    display: grid;
    grid-template-columns: 10rem 3.875rem 4.35rem 5.25rem 5.25rem minmax(21rem, auto) 7.5rem 6.7rem 6rem;
    grid-template-rows: auto;
    gap: 0;
    align-items: center;
    justify-content: stretch;
}

.ams-release {

    & .ams-list-grid,
    & .ams-header-grid {
        grid-template-columns: 2.5rem 10rem 3.875rem 4.35rem 5.25rem 5.25rem 7.5rem 7.125rem 6rem minmax(7rem, auto);
    }

    & .ams-list-grid {
        min-height: 3rem;
    }

    & input[type="checkbox"] {
        margin-top: 0;
    }
}

.ams-header-grid div:first-child,
.ams-list-grid div:first-child {
    padding-left: .75rem;
}

.ams-list-item .bi.bi-check,
.ams-list-item .bi.bi-exclamation-circle-fill .ams-list-item .bi.bi-dash {
    font-size: var(--font-size-2xl);
    line-height: 1em;
}

.ams-list-item.danger {
    background: rgb(255 126 142 / 50%);
}

.ams-list-item>div,
.break-word {
    overflow-wrap: break-word;
}

a.link-offset-2 {
    text-decoration: underline;
    color: var(--clr-navy-800);
}

a.link-offset-2.muted {
    color: var(--clr-navy-400);
}

a.link-offset-2:hover {
    color: var(--clr-cyan-47);
}

a.link-disabled {
    text-decoration: none;
    cursor: auto;
    color: #000;
}

a.link-disabled:hover {
    color: #000;
}

/* Photo gallery in HBL details */

.photo-thumbnail {
    width: 7.9375rem;
    height: auto;
    max-height: 5rem;
    border-radius: var(--border-radius-sm);
}

.notes-details .detail-value {
    min-height: 2.375rem;
    display: inline-block;
}

.notes-details .details-list,
.ipi-status .status-timeline {
    height: 100%;
    display: grid;
    align-content: stretch;
    grid-template-columns: 1fr;
    grid-template-rows: repeat(3, auto);
    gap: var(--space-1);
}

body,
button,
input,
select,
textarea {
    line-height: initial;
}

.status-timeline {
    font-family: var(--font-secondary);
    font-size: var(--font-size-sm);
}

.hbl-item-details-modal .main-content .detail-pair.commodity p,
.detail-pair.commodity p {
    height: 4.75rem;
    line-height: 130% !important;
    overflow-y: scroll !important;
    padding: 0.5rem;
    border-radius: .25rem;
    background: var(--clr-azure-89);
}

.ipi-status {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: start;
    color: var(--clr-grey-20);
}

.ipi-status.local-pickup .status-marker .bi-check-lg,
.ipi-status.local-pickup .status-marker .bi-dash-lg,
.ipi-status.local-pickup .status-marker .bi-x-lg {
    display: none;
}

/* Set icons to display none to be able to enable them with parent classes */

.ipi-status .status-item.status-success .status-marker {
    background: var(--clr-success);
}

.ipi-status .status-item.status-success .status-label,
.ipi-status .status-item.status-success .status-title {
    color: var(--clr-success) !important;
}

.ipi-status.local-pickup .status-item.status-success .bi-check-lg {
    display: block;
    /* Enables check for success parent class */
}

.ipi-status .status-item.status-disabled .status-marker {
    background: var(--clr-navy-400);
}

.ipi-status .status-item.status-disabled .status-label,
.ipi-status .status-item.status-disabled .status-title {
    color: var(--clr-navy-400) !important;
}

.ipi-status.local-pickup .status-item.status-disabled .bi-dash-lg {
    display: block;
    /* Enables dash for disabled parent class */
}

.ipi-status .status-item.status-disabled .rejection-notice .status-title {
    color: var(--clr-navy-400) !important;
    text-decoration: none;
    cursor: text;
}

.ipi-status .status-item.status-disabled .rejection-notice .status-title .bi-printer {
    display: none;
}


.ipi-status .status-item.status-danger .status-marker {
    background: var(--clr-danger);
}

.ipi-status .status-item.status-danger .status-label,
.ipi-status .status-item.status-danger .status-title {
    color: var(--clr-danger) !important;
}

.ipi-status.local-pickup .status-item.status-danger .bi-x-lg {
    display: block;
    /* Enables X for danger parent class */
}

.ipi-status.local-pickup .status-item.status-danger .rejection-notice a {
    color: var(--clr-danger);
}

.ipi-status.local-pickup .status-item.status-danger .rejection-notice a:hover {
    color: var(--clr-danger-dark);
}

.ipi-status .status-marker {
    border-radius: 100%;
    align-self: start;
    width: 1.25rem;
    height: 1.25rem;
    text-align: center;
    display: flex;
    justify-content: center;
    aspect-ratio: 1 !important;
    margin-left: -1px;
}

.ipi-status .pending .status-marker {
    background: var(--clr-navy-500);
}


.ipi-status .status-marker i.bi {
    color: white;
    margin: auto;
    line-height: 0 !important;
}

.ipi-status .status-item {
    display: flex;
    gap: .5rem;
    flex-wrap: nowrap;
    align-items: flex-start;
}

.ipi-status .status-title {
    font-weight: bold;
}

.ipi-status .status-info b {
    min-width: 2.5rem;
    display: inline-block;
}

.ipi-status .status-title .status-meta {
    font-weight: normal !important;
}

.status-item.border-top {
    border-top: 0.0625rem solid var(--clr-azure-85) !important;
}

.status-title.btn {
    font-size: var(--font-size-sm);
}

.status-title.btn i,
.view-history-link.btn i,
a i.bi {
    transition: margin-left ease .2s;
    font-size: 120%;
    display: inline-block;
}

.status-title.btn:hover i,
.view-history-link.btn:hover i,
.hbl-master-list a:hover i.bi {
    margin-left: .5rem !important;
}

.ipi-status .status-label {
    text-transform: uppercase;
    color: var(--clr-success);
    font-weight: bold;
    line-height: 1em;
}

.pending {
    color: initial;
    color: var(--clr-grey-20);
}

.ipi-warehouse-buttons {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    font-size: var(--font-size-xs);
    color: var(--clr-azure-19);
    text-transform: uppercase;
}

.container-fluid {
    max-width: 112.8rem;
}

.exam-details .aside-details {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: .75rem;
}

.exam-details .detail-pair {
    min-height: 2.125rem !important
}

html {
    font-size: clamp(1rem, 0.5rem + 0.625vw, 1.25rem) !important;
}

.lfd-godate {
    flex-direction: column;
}

.search-bar .alert,
.search-error.alert {
    position: absolute;
    min-width: 20rem;
    right: 0;
    top: 130%;
    line-height: 140%;
}

.search-error.alert {
    top: auto;
    bottom: 100%;
    min-width: 10rem !important;
    left: -20%;
    right: -20%;
    font-size: var(--font-size-xs) !important;
    box-shadow: var(--shadow-md);
    text-transform: none;
}

/* IPI Tracing page */

.card-shadow.destination {
    position: relative;
    outline: 1rem solid #DCE2EF;
    box-sizing: border-box;
    margin-right: 1.5rem;
}

.ipi-tracing .destination-container {
    @media (min-width:992px) {
        min-width: 25rem;
    }

    @media (max-width:768px){
        margin-top:1rem;
        .card {
            margin-right:0!important;
        }
    }
}

.transport-badge {
    padding: 0.3125rem 0.75rem;
    border-radius: 1.25rem;
    font-size: 0.8rem;
    font-weight: 600;
}

.badge-truck {
    background-color: #eef4fc;
    color: #0d6efd;
}

.badge-rail {
    background-color: #eef4fc;
    color: #0d6efd;
}


.ipi-milestones {
    font-family: var(--font-secondary);
    flex-grow: 10;
    max-height: 30rem;
    overflow-y: scroll;

    .timeline-item {
        text-transform: uppercase;
    }
}

.sticky-column-content {
    position: sticky;
    top: 5rem;
}

#warehouse-in-out-Accordion .accordion-body .row:first-child .detail-label {
    display: inline-block;
}

.useful-links {
    font-family: var(--font-secondary) !important;
}

.useful-links .dropdown-menu {
    display: block;
    visibility: hidden;
    opacity: 0;
    max-height: 0;
    overflow: hidden;
    transition: max-height ease .8s;
}

.useful-links .dropdown-menu.show {
    inset: 0.25rem auto auto 0 !important;
    padding-top: 0;
    padding-bottom: 0;
    height: auto;
    visibility: visible;
    opacity: 1;
    max-height: 18.75rem;
    transition: margin-top ease .8s;
}

.useful-links .dropdown-menu.show a.dropdown-item {
    padding: var(--space-3) var(--space-4) !important;
    transition: all .2s ease;
}

.useful-links .dropdown-menu.show a.dropdown-item:hover {
    background-color: var(--clr-azure-70);
    text-decoration: none;
}

.useful-links .dropdown-menu.show a.dropdown-item:active {
    background-color: var(--clr-azure-19);
    text-decoration: none;
}

.warehouse-in-out-details {
    border-radius: var(--border-radius-md);
    overflow: hidden;
    border: 1px solid var(--bs-border-color-translucent);
}

.warehouse-in-out-details .warehouse-details-header div {
    position: relative;
    display: flex;
    flex-wrap:wrap;
    align-items: center;
    width: 100%;
    padding: var(--bs-accordion-btn-padding-y) var(--bs-accordion-btn-padding-x);
    font-size: 1rem;
    color: var(--bs-accordion-btn-color);
    text-align: left;
    background-color: var(--clr-white);

    @media (max-width:768px) {
        gap: .5rem;
        flex-direction: column;
        align-items: flex-start;
    }
    
}


#warehouse-in-out .accordion-collapse div.form-check {
    display: inline-flex;
    flex-direction: row-reverse;
    justify-content: center;
    align-items: center;
    gap: .25rem;
    border-radius: 5rem;
    padding: var(--space-2) var(--space-3);
}

#warehouse-in-out .accordion-collapse .form-switch.form-check-reverse .form-check-input {
    margin-right: 0;
    margin-top: 0;
}



.whse-in-out #warehouse-in-out-Accordion .accordion-button:not(.collapsed) {
    background-color: var(--clr-navy-600);
    color: white;

    span {
        color: white;
    }

    span span {
        color: white !important;
    }

    
    a.btn { color:white!important; border:1px solid white!important; }
    a.btn:hover { color:black!important; background:white!important; border:1px solid black!important; text-decoration: none; }
}

.whse-in-out .accordion-button:not(.collapsed)::after {
    filter: brightness(0) invert(1);
}


.milestone-v2 .same-width {
    min-width: 8rem;
}

.hbl-wrapper {
    @media (max-width:768px) {
        flex-direction:column;
    }
}

.ams-list-item2 {
    border-radius:var(--space-2);
    background:white;
    width:100%;
    display:flex;
    padding:var(--space-2) var(--space-4);
    min-height: 3rem;
    align-items:center;
    gap:var(--space-4);
    box-shadow: var(--shadow-md);

    @media (max-width:1279px){
        flex-wrap:wrap;
    }

}

.flex-column-sm {
    @media (max-width:768px) {
        flex-direction: column !important;
    }
}


/* Search Modal */

header#header {
    position: relative;
    z-index: 1060;
    /* Higher than Bootstrap's modal (1055) */
    background-color: white;
    /* Ensure header isn't transparent */
}

.modal-under-header.modal {
    top: 3.849375rem !important;
    height: calc(100% - 3.849375rem) !important;
}

.modal-backdrop {
    top: 3.849375rem !important;
    height: calc(100% - 3.849375rem) !important;

    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);

    --bs-backdrop-opacity: 1 !important;

    background-color: rgba(0, 0, 0, 0.5) !important;
}

#login-modal.modal {
    top: 0 !important;
    height: 100% !important;

    & .CustomerLogin-box {
        border: 0 !important;
        margin: 0 auto;
        padding: 2rem 1.25rem;
        max-width: 18.75rem;

        & h2 {
            text-transform: none !important;
            margin-bottom: 2rem;
        }
    }

    & a {
        color: initial !important;
        text-shadow: none;
    }
}

body:has(#login-modal.modal) .modal-backdrop {
    top: 0 !important;
    height: 100% !important;
}

.modal-body {
    @media (max-width:576px) {
        padding: var(--space-4);
    }
}

.modal-body label {
    flex-grow: 2;
}

.modal-body .search-container {
    flex-direction: row;

    @media (max-width:992px) {
        flex-wrap: wrap !important;
    }

    @media (max-width:576px) {
        flex-direction: column;
    }
}


.modal-lg,
.modal-xl {
    @media (min-width: 992px) {
        --bs-modal-width: 44rem;
    }
}

.offcanvas .modal.confirmation-modal,
.profile-page .modal.confirmation-modal,
#confirm-logout-modal.modal.confirmation-modal {
    z-index: 1073 !important;


    & .modal-dialog {
        pointer-events: none;
    }

    & button {
        pointer-events: auto !important;
    }
}

.faux-modal::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    --bs-backdrop-opacity: 1 !important;
    background-color: rgba(0, 0, 0, 0.5);
    /* The visual backdrop color */
    z-index: -1;
    /* Place it behind the modal-dialog content */
    pointer-events: none;
    /* Let clicks pass through if needed, though usually backdrop blocks clicks */
}

.marketing .profile-dropdown .dropdown-menu {
    li a, li a i {
        color:var(--clr-azure-09)!important;
        text-shadow: none;
    }

    li a:hover {
        background-color: var(--clr-azure-89)
    }
}

.availability-menu .profile-dropdown .dropdown-menu {
    .dropdown-item:hover {
        background-color:var(--clr-azure-89)!important;
        text-decoration:none;
    }
}

.availability-menu>.availability-menu-top>.container-fluid>.row {
    &>div:nth-child(1){
        @media (max-width:768px) {
            padding-right:2px!important;
            gap:4px!important;

            .nav-logo {
                min-width:72px!important;
            }
        }
    }    

    &>div:nth-child(2){
        @media (max-width:421px) {
            display:none!important;
        }
    }

    &>div:nth-child(3){
        @media (max-width:768px) {
            display:none;
        }
    }

    &>div:nth-child(4){
        @media (max-width:768px) {
            max-width:12%;
        }
    }

    /* This forces the burger menu to always show  */
    &>div:has(.hamburger-menu) {
        display:block!important;
        max-width:12%!important;
    }
}

.search-results-wrapper {
    @media (max-width:576px){
        padding:1.5rem .5rem!important;
        max-width: 99vw;
    }
}


/* Transit Time Schedule */

.availavility-v2 .table-striped>tbody>tr:nth-of-type(odd) {
    background-color: var(--clr-azure-89) !important;
}

.availavility-v2 .table-striped>tbody>tr:nth-of-type(odd)>* {
    --bs-table-color-type: var(--bs-table-striped-color);
    --bs-table-bg-type: var(--clr-azure-89) !important;
}

.availavility-v2 .table-striped>tbody>tr:hover>* {
    --bs-table-bg-type: #b8eeff !important;
}

.availavility-v2 .Availability-table {
    font-family: var(--font-primary);
}

.availavility-v2 .Availability-table thead th {
    font-family: var(--font-secondary);
    font-size: var(--font-size-xs);
    background-color: var(--clr-navy-700)
}

.availavility-v2 .Availability-table tbody tr>td:first-child {
    padding-right: var(--space-8);
    font-weight: bolder;
}

.availavility-v2 .Availability-table tbody td {
    vertical-align: middle;
}

/* -------- Charges Page -------*/

.availavility-v2 table.ginfo {
    width: 100% !important;
    max-width: 50rem;
    margin: 0 !important;
}

.availavility-v2 .charges-table .btn-group {
    flex-direction: column !important;
    display: flex;
    gap: var(--space-2);
    max-width: 12rem;
}

.availavility-v2 .charges-table .btn-group button {
    background-color: var(--clr-cyan-47);
    border: 1px solid var(--clr-cyan-47);
}

.availavility-v2 .charges-table .btn-group button:hover {
    background-color: var(--clr-azure-19);
    border: 1px solid var(--clr-azure-19);
}

.charges-page {

    .toast-container, 
    .toast-container #cardValidationToast {
        min-width:30vw;
    }
}

.cucc-item {
    border-radius: var(--border-radius-lg);
    overflow: hidden;
    border: 1px solid var(--clr-azure-85) !important;
    transition: box-shadow ease .1s;
    box-shadow: var(--shadow-sm);

    & .accordion-button {
        min-height: 3.3087rem;
    }

    & .accordion-button.no-arrow::after {
        display: none !important;
    }

    & .service-fee::before {
        content: "- ";
    }

    & .cucc-item-total p:last-child:before {
        content: "$"
    }

    & .cucc-item-total p.js-val-fee::before {
        content: "-$"
    }
}

#collapse-cucc .cucc-amounts-grid {
    display: grid;
    grid-template-columns: 200px 180px 180px;
}

.cucc-item .accordion-button:not(.collapsed) {
    background: white !important;
}

#edit-charge-modal-1 .modal-dialog {
    max-width: 80vw !important;

}

.money-sign {

    &::before {
        content: "$";
    }

    &.negative::before {
        content: "-$";
    }
}


.terminal-schedule-main {
    background: var(--clr-azure-95);
    padding: 2.25rem 0;
    margin-top: var(--space-5);
    min-height:calc(100vh - 22.37rem);

    .terminal-schedule-section { /* This is the collapsible and tables */

        .port-header:hover {
            cursor: pointer;
        }
        .port-header div,
        .port-header:hover i.bi {
            transition:all .2s ease;
        }
        .port-header:hover div {
            font-weight: bolder;
            transform: translateY(-.25rem);
        }
 
        .port-header i.bi {
            transform: rotate(180deg);
        }
        .port-header.collapsed i.bi {
            transform: rotate(0deg);
        }

        .table-hover tbody tr:hover > td.terminal-cell {
            box-shadow: none !important;
            background-color: #fff !important;
        }


        .table-responsive {
            font-family: var(--font-primary);
            border-radius: var(--border-radius-md);
            overflow-x: scroll;
            box-shadow: var(--shadow-lg);
            border: 1px solid var(--clr-azure-85);

            table.table { margin-bottom:0; text-align:left;}    

            .terminal-cell, 
            .terminal-cell .terminal-info {
                max-width:5rem;
            }
            .terminal-info {
                font-family: var(--font-secondary); 
                font-size: var(--font-size-base); 
                text-align: left;
                

                h6 { font-family: var(--font-secondary);font-size: var(--font-size-base); letter-spacing: -.5px; font-weight:800; }
                span { font-size: var(--font-size-xs); color: var(--clr-azure-70); }
            }

            tr th:first-child {
                padding-left: var(--space-6) !important;
                padding-right: var(--space-6) !important;
            }

            td {
                padding:var(--space-1) var(--space-6);
                font-size:var(--font-size-xs);
                height: auto !important;
                color:var(--clr-navy-600);

                &.closed {
                    color:var(--clr-danger);
                }

                &.shift-badge {
                    font-weight:bold!important;
                    color:var(--clr-azure-70)!important;
                    font-family: var(--font-secondary);
                    font-size: var(--font-size-sm);

                    & sup {
                        font-size: 60%!important;
                        color:var(--clr-azure-80)!important;
                    }
                }
            }

            th {
                background-color: var(--clr-azure-89);
                color: var(--clr-azure-46);
                font-family: var(--font-secondary);
                font-size:var(--font-size-2xs);
                vertical-align: middle;
                border-bottom: 1px solid var(--clr-azure-95);
                padding:var(--space-3)var(--space-6);

                .day-of-week {
                    display: block;
                    font-size: var(--font-size-2xs);
                    color: var(--clr-azure-19)!important;
                    font-family: var(--font-primary)
                }

                .date-sub {
                    color: var(--clr-azure-46);
                    font-size:var(--font-size-sm);
                }
            }

            tbody>tr:nth-child(odd) { 
                td {padding-top:var(--space-2);}
            }
            tbody>tr:nth-child(even) { 
                border-bottom:1px solid var(--clr-azure-89);
                td {padding-bottom:var(--space-2);}padding-bottom:var(--space-2);
            }

            .table-striped>tbody>tr:nth-of-type(even)>* {
                --bs-table-bg-type: var(--clr-azure-99)!important;
            }
            .table-striped>tbody>tr:nth-of-type(odd)>* {
                --bs-table-bg-type: white!important;
            }

        }
    }
}

.availavility-v2 .table-responsive .table-striped>tbody>tr:nth-of-type(odd)>.terminal-cell {
    background-color: white !important;
    --bs-table-bg-type:white!important;
}

.container-level-release {

    .list-item {
        background: var(--clr-white);
        margin-left: 0;
        margin-right: 0;
        border-radius: .5rem;
        font-family: var(--font-primary);
        justify-content: space-between;
        align-items: center;
        transition: background-color .3s ease;
        min-height: 3rem;

        @media (min-width:1279px) { 
            & p,span { line-height:10%; }
        }
    }

    .container-list-item {
        background-color: #C8D1DE;
    }
    
    .hbl-list-item {
        background-color:var(--clr-azure-89);
        margin-left:var(--space-12);
        position:relative;
        align-self:end;
        align-self:flex-start;

        &::before {
            content: "\F132"; 
            font-family: "bootstrap-icons";
            left: calc(var(--space-8) * -1);
            top:var(--space-2);
            vertical-align: middle;
            position:absolute;
            color:#c0c0c0;
        }
    }

    .ams-list-wrapper {
        margin-top:var(--space-2);
        @media (min-width:1279px){
            margin-top:-.5rem;
        }
        
    }

    .ams-list-header {
        font-family: var(--font-secondary);
        font-size: var(--font-size-xs);
        line-height: 1em;
        position: relative;
        bottom: var(--space-4);
    }

    .ams-list-item {
        background: white;
        border: 0.0625rem solid var(--clr-azure-89);
        border-radius: .5rem;
        font-family: var(--font-primary);
        align-items: center;
        transition: background-color .3s ease;
        box-shadow: var(--shadow-md);
        position: relative;

        &::before {
            content: "\F132"; 
            font-family: "bootstrap-icons";
            left: calc(var(--space-8) * -1);
            top:var(--space-2);
            vertical-align: middle;
            position:absolute;
            color:#c0c0c0;
        }

        div:nth-child(2) {
            display: flex;
            align-items: center;
        }
    }

    .ams-header-grid, .ams-list-grid {   
        display: flex; 
        flex-wrap:wrap;            
        width:100%;
        padding:8px;
        margin-left:calc(2 * var(--space-12));
        max-width:calc(100% - (2 * var(--space-12)));

        &>div {
            display:flex;
            flex-direction:column; 
            justify-content:center!important;

            @media (max-width:768px){
                &:nth-child(2) {
                    width:calc(100% - 2.5rem);
                    text-align:left;
                    justify-content: start!important;
                }
            }
        }

        &.grid-2 {
            margin-left:0;

            &::before {
                content:"";
                display:none;
            }
        }


        @media (min-width:1279px) {
            &>div {flex-direction:row; gap: 0;}
            padding:0;
            display: inline-grid;
            grid-template-columns: 2.5rem 12rem 5rem 5rem 5rem minmax(9.375rem, 1fr) 6rem;
            grid-template-rows: auto;
            gap: 0;
            align-items: center;
            justify-content: stretch;
            width: auto;
            
        }
    }
}



/* --------- Information / Marketing Pages  ------- */

.availavility-v2 .hero-section {
    min-height: calc(100vh - 12.37rem);
    background-image: linear-gradient(to right, rgba(20, 38, 79, 0.9) 20%, rgba(20, 38, 79, 0) 80%), url("../_images/hero-desktop.webp");
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;

    & .row .hero-text {
        min-height: 30rem;
    }

    @media (min-width:1180px) {
        h2 .no__wrap {
            white-space: nowrap;
        }

        .container-fluid {
            padding-top: var(--space-12);
        }
    }

    @media (max-width:992px) {
        min-height: calc(60vh - 8.75rem);
        padding-top: 4.3125rem;
        padding-bottom: 1rem;

        .tracking-widget { margin-top: var(--space-6)!important; }

        & .row .hero-text {
            min-height: calc(50vh - 8.75rem);
            margin-bottom: 0 !important;
        }
    }

    @media (max-width:768px) {
        background-image: linear-gradient(to bottom, rgba(20, 38, 79, 0.9) 20%, rgba(20, 38, 79, 0) 80%), url("../_images/hero-mobile.webp");
        background-position: center bottom;

        #trackingTabs button {
            padding: var(--space-3) var(--space-1)!important;
            text-align: center;
            i {
                display:inline-block; 
                width:100%;
                margin-bottom: var(--space-1);
            }
        }

        #trackingTabsContent {
            padding: var(--space-4);
        }

        .search-container, .bg-warning-light {
            flex-direction: column;
        }
    }

    @media (max-width:576px) {
        padding-top: 5rem;
    }
}

.quote-bubble {
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
    /* Bouncy pop effect */
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.30), 0 8px 48px 0 rgba(51, 122, 183, 0.15) !important;
    z-index: 1080;
    /* Initial Hidden State */
    opacity: 0;
    transform: translateY(3rem) scale(0.9);
    pointer-events: none;
    /* Prevent clicks while hidden */

    &:hover {
        transform: scale(1.05) translateY(-2px) !important;
        background-color: var(--clr-blue-brand);
    }
}

.quote-bubble.show {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}


.availavility-v2 .hero-section.template {
    min-height: 12.75rem;
    background-image: linear-gradient(to top, rgba(20, 38, 79, 0.9) 30%, rgba(20, 38, 79, 0) 80%), url("../_images/hero-desktop.webp");
    background-size: cover;
    background-position: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-top: 5rem;

    & .row .hero-text {
        min-height: 12.75rem;
        display: flex;
        flex-direction: column;
        justify-content: end;
        padding-bottom: var(--space-6);
    }

    @media (max-width:992px) {
        min-height: 12.75rem;

        & .row .hero-text {
            min-height: 12.75rem;
            margin-bottom: 0 !important;
        }
    }

    @media (max-width:768px) {
        background-image: linear-gradient(to top, rgba(20, 38, 79, 0.9) 20%, rgba(20, 38, 79, 0) 80%), url("../_images/hero-mobile.webp");
        background-position: center bottom;
    }

    @media (max-width:576px) {
        padding-top: 5rem;
    }
}

.side-nav {
    & .card:first-child {
        box-shadow: var(--shadow-lg);
    }
}

.side-nav .card-header:first-child {
    border-radius: 0;
}

.marketing .main-content {

    p,
    li {
        margin-bottom: 1em;
        line-height: 158%;
        font-family: var(--font-secondary);
        color: var(--clr-grey-40);

        i {
            color: var(--clr-cyan-47) !important;
        }

        li i {
            font-size: var(--font-size-xs);
        }
    }

    bold,
    strong {
        color: var(--clr-grey-20);
    }

}

.tracking-widget {
    background: white;
    border-radius: 0.75rem;
    overflow: hidden;
    box-shadow: 0 0.625rem 1.875rem rgba(0, 0, 0, 0.2);
    transition: transform .3s;

    &:hover {
        transform: translateY(-0.3125rem);
        box-shadow: 0 10px 24px rgba(0, 0, 0, 0.35);
        outline: 0;
    }

    @media (max-width:992px) {
        margin-bottom: var(--space-5);
    }
}

.widget-tab {
    padding: 0.9375rem;
    text-align: center;
    font-weight: 600;
    color: #6c757d !important;
    cursor: pointer;
    border: none;
    border-bottom: 2px solid #f0f0f0;
    background: #f8f9fa;
    font-family: var(--font-secondary);
}

.widget-tab.active {
    background: white !important;
    color: var(--brand-dark) !important;
    border-top: 3px solid var(--brand-dark);
    border-bottom: none;
}



.availavility-v2 .tracking-widget .nav-item .active {
    box-shadow: inset 0 .5rem 0 0 var(--clr-cyan-47);
}


.availavility-v2 .about-section {
    background: linear-gradient(to right, rgb(41 41 41) 59%, #05162A 59%);

    @media (max-width:992px) {
        background: linear-gradient(to bottom, rgba(51, 51, 51, 1) 59%, #05162A 59%);
    }
}

.btn-marketing {
    display: inline-flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    color: white !important;
    text-transform: uppercase;
    font-size: var(--font-size-xs);
    padding:4px 0;

    &:hover {
        color: var(--clr-azure-46) !important;
        text-decoration: none;

        & i.bi {
            left: -.5rem;
        }
    }

    &.blue {
        color: var(--clr-navy-800) !important;

        &:hover { color: var(--clr-azure-46) !important;}
    }

    & i.bi {
        font-size: 1.125rem;
        position: relative;
        left: 0;
        transition: left ease .2s;
    }


}

.marketing .photo-banner {
    width: 100%;
    max-height: 18.75rem;
    overflow: hidden;
    object-fit: cover;
    object-position: left center;
}

.marketing .core-capabilities {
    background-image: url('../_images/core-capabilities-bg.webp');
    background-size: cover;
    background-position: bottom;
}

.marketing .core-capabilities a:hover {
    text-decoration: none;
    color: initial;
}

.feature-icon-box {
    width: 3.75rem;
    height: 3.75rem;
    background-color: var(--clr-navy-200);
    color: var(--clr-azure-19);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    margin-bottom: 1.5rem;
}

.feature-card {
    border: 1px solid #eef2f6;
    border-radius: .75rem;
    transition: transform 0.3s;
    height: 100%;
    background: white;

    &:hover {
        transform: translateY(-0.3125rem);
        box-shadow: 0 10px 20px rgba(0, 0, 0, 0.05);
        outline: 1px solid var(--clr-azure-89);
    }

    & .badge {
        background-color: var(--clr-azure-95);
        font-family: var(--font-secondary);
    }
}

.marketing .integration-security .card {
    display: flex;
    justify-content: space-between;
    flex-direction: column;
}

/* Navbar in marketing pages */

.marketing .pc-menu {
    border-bottom: 1px solid var(--clr-navy-200);
}

.availavility-v2.marketing #header {
    font-family: var(--font-secondary) !important;

    & a {
        font-family: var(--font-secondary) !important;
    }
}

.availavility-v2.marketing .header-top {
    & a {
        color: white;
        font-size: var(--font-size-2xs);
    }
}

.availavility-v2.marketing .header-main {
    & a {
        font-size: var(--font-size-xs) !important;
    }
}

.availavility-v2.marketing .header-main .menu-list {
    height: 100%;

    li {
        height: 100%;

        a {
            display: flex;
            height: 100%;
            align-items: center;
        }

        a i.fa {
            transition: ease transform .2s;
        }
    }

    li:hover a i.fa.rotate {
        transform: rotate(180deg);
    }
}

body .pc-menu {
    background: transparent;
}

.marketing .pc-logo {
    max-width: 12.75rem;
    margin-top: 0;
    margin-top: .5rem !important;
    margin-bottom: .5rem !important;
}

.header-main .menu-list li > a:not(.btn):after {
    content: "";
    display: block;
    position: absolute;
    transition: all .3s ease;
    height: 0.1875rem;
    left: 0;
    bottom: 0;
    width: 0;
    background-color: currentColor;
}

    .menu-list li.profile-dropdown li > a:not(.btn):after {
        display:none;
    }

.header-main .menu-list li>a:not(.btn):hover:after {
    width: 100%;
}
 
.menu-list li>a:after {
    display: none;
}

.header-top a.link-offset-3:hover {
    text-decoration: underline;
}


/* --- HEADER SCROLL EFFECT CSS --- */

.pc-menu {
    background-color: transparent;
}

/* 1. Base Header Styling (The "Scrolled" / Default State) */
.pc-menu {
    transition: all 0.3s ease;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.15);
}

/* Top Bar: Dark Blue Background by default */
.header-top {
    transition: background-color 0.3s ease;
    background-color: var(--clr-azure-09);
} 

.header-top a {
    color: rgba(255, 255, 255, 0.8);
    text-decoration: none;
    transition: color 0.3s ease;
}

/* Main Bar: White Background by default */
.header-main {
    background-color: #ffffff;
    transition: background-color 0.3s ease;
}

.header-main a {
    color: var(--brand-dark);
    /* Dark text on white bg */
    transition: color 0.3s ease;
}

.menu-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    gap: 1.875rem;
}

/* 2. The "On Top" State (Applied via JS when scroll < 10rem) */
body.on-top .pc-menu {
    box-shadow: none;
    /* No shadow at top */
    border-bottom: 0;
    background: linear-gradient(to bottom, rgba(2, 10, 20, 1) 0%, rgba(2, 11, 23, 0.9) 25%, rgba(5, 22, 42, 0) 100%);
}

body.on-top .header-top {
    background-color: transparent !important;
    /* Transparent Top Bar */
}

body.on-top .header-main {
    background-color: transparent !important;
    /* Transparent Main Bar */
}

body.on-top .pc-logo {
    margin-top: 0 !important;
    padding-bottom: 0 !important;
}

/* Force ALL links to white when on top */
body.on-top .header-top a,
body.on-top .header-main a,
body.on-top .header-main i {
    color: #ffffff !important;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
    /* Shadow for readability over image */
}

body.on-top .header-main .sub-menu a,
body.on-top .header-main .sub-menu i {
    color: black !important;
    text-shadow: 0 0 0;

    &:hover {
        color: var(--clr-info) !important;
        font-weight: bolder !important;
    }
}

body.on-top .pc-logo img {
    filter: brightness(0) invert(1);
}

.marketing .pc-menu .sub-menu {
    dd {
        padding: var(--space-1) var(--space-1);
    }
}


.news-ticker .border-start.border-secondary {
    

    @media (max-width:768px) {
        border-left: 0 !important;
        border-top: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color) !important;
        --bs-border-opacity: 1;
        border-color: rgba(var(--bs-secondary-rgb), var(--bs-border-opacity)) !important;

        padding: var(--space-4) .75rem !important;
    }   
}

.news-ticker {
    a.news-item {
        color:white!important;
        transition:transform .2s ease;
        display:inline-block;
        border-top:0;

        &:hover {
            transform:translateY(-2px);
            text-decoration: none;
            color:var(--clr-azure-42);
        }
    }
}

.recent-news {
    color:white!important;

    .date {
        color:white;
        font-family: var(--font-secondary);
        font-size: var(--font-size-sm);
        min-width:6.125rem;
    }
}

.news-item { 
    border-top:1px solid var(--clr-navy-500);


    a {
        display:flex;
        padding:var(--space-3) 0;
        align-items:center;
        gap:var(--space-6);
        transition:transform .2s ease;

        &:hover {
            transform:translateY(-2px);
            text-decoration: none;
            color:var(--clr-azure-42);
        }
    }

    p {
        margin-bottom:0!important;
        line-height:100%!important;
        margin-top:2px;
        min-width:4.125rem;
    }

    &.latest {
        border-top:0;
        

        h3 { 
            color:white;
            &:hover {
                color:var(--clr-cyan-47)!important;
            }
        }

        a {
            display:block;
            padding:var(--space-4) 0;
            transition:transform .2s ease;
            color:white!important;

            &:hover {
                transform:translateY(-4px);
                color:var(--clr-cyan-47)!important;
                text-underline-offset: 6px;

                .date {
                    color:var(--clr-danger)!important;
                    min-width:4.125rem;
                }
            }
        }
    }
}

.news-post-content {
    p { margin-bottom:0!important; font-family:var(--font-secondary)!important; 
        span {font-family:var(--font-secondary)!important; }
    }

    h1 { 
        padding-bottom:var(--space-6); 
        margin-bottom:var(--space-8);

        &:after {
            display:block;
            content:"";
            width:10rem;
            height:.25rem;
            background:var(--clr-azure-46);
            position:relative;
            top:var(--space-6);
        }
    }
    h2, h3, h4, h5, h6 { margin-top:2rem!important;margin-bottom:1rem; }
}

.news-post-content a.link-document {
    position:relative;
    padding:var(--space-2) var(--space-4);
    padding-left:var(--space-12);
    background:var(--clr-navy-900);
    border-radius:100px;
    margin-top:.5rem;
    display:inline-block;
    color:white;
    transition:all .2s ease;


    &:hover {
        color:white;
        text-decoration:none;
        background:var(--clr-azure-46);
        transform: translateY(-2px);
    }
}

.news-post-content a.link-document:before {
    content: "";
    width:1rem;
    height:1rem;
    background-image:url('/_images/download.svg');
    filter:invert(1);
    background-size:contain;
    background-position:center; 
    display:block;
    position:absolute;
    left:1rem;
    top:.7rem;
    /* o un icono de Font Awesome / Bootstrap Icons */
}

.download-button {
    transition: all ease .2s;

    &:hover {
        transform: translateY(-.325rem);
        box-shadow: 0 10px 20px rgba(0, 0, 0, 0.05);
        outline: 1px solid var(--clr-azure-89);
        background: var(--clr-azure-99);
    }

    & a:hover {
        text-decoration: none;
        color: #333;
    }
}

.marketing aside .sticky-top {
    @media (min-width:992px) {
        margin-top: -7.5rem;
    }
}

.long-text {
    max-width: 40em;
    text-wrap: balance;
    hyphens: auto;
    overflow-wrap: break-word;
}


.tooltip-inner {
    max-width: none !important;
}

.ipi-milestones-empty {
    display: flex;
    flex-direction: row;
    color: var(--clr-azure-70);
    gap: var(--space-3);
    width: 100%;
    height: 100%;
    justify-content: center;
    align-items: center;

    svg {
        width: 3rem;
    }

    p {
        max-width: 50%;
    }

    &.reports {
        min-height: calc(50vh - 150px);
    }
}

.mbl-details.charges-page {
    min-height: calc(100vh - 20rem);
}

.charge-steps {
    height: auto;

    & .charge-instructions {
        padding-top: var(--space-4);
        border-top: 1px solid var(--clr-azure-85);
        display: inline-block;
        margin-bottom: var(--space-4);

        & span {
            font-family: var(--font-secondary);
            font-size: var(--font-size-base);
            color: var(--clr-navy-500);
        }
    }

    & .charges-table {
        display: flex;
        flex-direction: column;
        gap: var(--space-3);
        align-items: stretch;

        & .charges-table-heading,
        & .charges-table-item {
            display: grid;
            grid-template-columns: 1fr 6.5rem 6rem;
            align-items: center;

            @media (max-width:576px) {
                grid-template-columns: 1fr 6.5rem;
            }

            & label {
                display: flex;
                gap: var(--space-2);
                align-items: center;

                & input {
                    margin-bottom: 4px;
                }
            }

            & .paid {
                color: var(--clr-success) !important;
                font-weight: bolder;
            }
        }

        & .charges-table-heading {
            font-family: var(--font-secondary);
            font-size: var(--font-xs);
            color: var(--clr-azure-46);
            padding-bottom: var(--space-3);
            border-bottom: 1px solid var(--clr-azure-95);
        }

        & .charges-table-item :nth-child(2) {
            font-weight: bolder;
            text-align: right;

            &:before {
                content: "$"
            }
        }
    }

    & .charges-totals {
        display: flex;
        flex-direction: column;
        gap: var(--space-4);
        text-align: right;
        margin-right: 8rem;

        & p b::before {
            content: "$";
        }

        @media (max-width:576px) {
            margin: 1rem 1.25rem 1.5rem 0;
        }
    }

    .invoice-totals {

        @media (max-width:576px) {
            flex-direction: column-reverse;
            align-items: stretch !important;
        }
    }
}

.payment-methods {
    & .nav-pills .nav-link {
        background-color: var(--clr-cyan-47);
        padding: var(--space-5);
        border-radius: var(--border-radius-xl);
        color: white;
        font-size: var(--font-size-base);
        text-transform: uppercase;
        font-weight: bold;
    }

    & .nav-pills .nav-link.active,
    & .nav-pills .show>.nav-link {
        background-color: var(--clr-navy-700);
    }

    & .nav-pills {
        gap: var(--space-3);
    }

    & .charge-step-module {
        padding: var(--space-8);
    }

    & input,
    & textarea {
        border-radius: var(--border-radius-sm);
    }

    & .summary-card {
        box-shadow: 0 4px 16px -1px rgb(51 122 183 / 0.2),
            0 2px 8px -2px rgba(51 122 183, 0.1),
            0 2px 4px -2px rgba(3, 5, 13, 0.1);
    }

    & .charge-row.ccard-fee {
        font-weight: bold;
        color: var(--clr-success);
    }

    & .charge-row.demurrage-fee {
        margin-top: var(--space-2);
    }
}

.charge-step-module.date-picker {
    @media (max-width:768px) {
        gap: 1rem;

        & .arrow {
            transform: rotate(90deg);
        }

        & div:last-child>div {
            justify-content: center;
        }
    }
}

.charge-step-module {
    padding: var(--space-4) var(--space-8);
    display: block;
    margin-bottom: initial;
}

#js-charges-sidebar {

    @media (min-width:1200px) {
        margin-top: -3rem;
    }

    span i {
        display: inline-block;
        width: 1.25rem;
        height: auto;
        object-fit: contain;
        text-align: center;
    }
}

#js-charges-sidebar.sticky-top.destination {
    position: sticky !important;
    top: 6.25rem;
}

.charges-summary-sticky {
    top: 5rem;
}

.CustomerLogin-box {

    & p,
    & p a,
    & a {
        font-family: var(--font-primary);
    }
}

.shipment-search {
    @media (max-width:576px) {
        width: 100%;
        margin-left: initial;

        & div.d-flex.gap-2 {
            width: 100% !important;
            flex-direction: column;

            &>* {
                margin-left: initial;
                width: 100%;
                display: block;

                &>input {
                    width: 100% !important;
                    display: block !important;
                }
            }
        }
    }
}

#charges-select-container {
    @media (max-width:576px) {
        padding: 1.25rem;

        & .charges-table-item>label {
            text-align: start;
            grid-column: span 2;
        }

        & .charges-table-item>span:last-child {
            display: block;
            grid-column: span 3;
            text-align: start;
            padding-left: 1.5rem;
        }
    }
}

#paycargo-terms-modal,
#cc-terms-modal {
    & .modal-dialog {
        max-width: 60vw;
        max-height: 60vh;

        & .modal-content {
            max-height: 60vh;
        }
    }

    & h2 {
        margin-bottom: 1.75rem;
    }

    & p {
        margin-bottom: 1rem;
    }
}

input::placeholder {
    color: var(--clr-grey-50);
    font-weight: 400 !important;
}


/* ---- Profile Page Styles ---- */
.profile-page {

    &>.container-fluid:first-child>.row {
        @media (max-width:992px) {
            flex-direction: column-reverse;
        }
    }

    .profile-icon-circle {
        border: 3px solid var(--clr-cyan-80);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--clr-cyan-80);
        font-size: 1.1rem;
        padding: .25rem;
        aspect-ratio: 1;
        background-color: var(--clr-cyan-99);
    }

    .report-btn {
        background: white;
        border: none;
        border-radius: 100px;
        padding: 12px 20px;
        width: 100%;
        text-align: left;
        display: flex;
        align-items: center;
        margin-bottom: 10px;
        transition: transform 0.2s;
        text-decoration: none;
        color: inherit;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);

        &.col-lg-6 {
            width: 49%;

            @media (max-width:768px) {
                width: 100%;
            }
        }
    }

    .report-btn:hover {
        transform: translateY(-2px);
        background-color: #f8fafc;
        text-decoration: none;
        color: inherit;
    }

    .report-btn i {
        color: var(--clr-azure-19);
        font-size: 1.2rem;
        margin-right: 0.9375rem;
        width: 1.5rem; 
        text-align: center;
    }

    #release {
        label {
            border-radius: .5rem;
            background-color: var(--clr-azure-89);
            min-width: 16%;
            color: var(--clr-navy-400);
            border: 0;

            &:hover {
                background-color: var(--clr-azure-95);
            }
        }

        .btn-check:checked+.btn {
            border: 0;
            background-color: var(--clr-navy-700);
            color: white;
            font-weight: bolder;
        }

        @media (max-width:768px) {

            .form-check,
            .search-container {
                display: flex;
                flex-direction: column;
                gap: 1rem;
                width: 100% !important;
            }

            label {
                width: 100%;
            }
        }
    }

    .card.sticky-top {
        @media (min-width:992px) {
            top: 5rem;
            margin-top: -6.25rem;
        }
    }

    .nav-link-custom {
        background-color: var(--clr-azure-99);
        border-radius: 8px;
        padding: var(--space-2) var(--space-4);
        line-height: 1.5;

        &:hover,
        &:active {
            background-color: var(--clr-azure-85);
            color: var(--clr-azure-09);
            text-decoration: none;
        }
    }

}

#payment-successful>.container-fluid {
    padding-top: 4.43rem;
    min-height: calc(100vh - 30rem);
    background: var(--clr-azure-89);
}

.mobile-nav-profile {
    display: none;

    @media (max-width:992px) {
        display: flex;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        background: white;
        justify-content: space-around;
        padding: 0.625rem 0;
        box-shadow: 0 -0.125rem 0.625rem rgba(0, 0, 0, 0.1);
        z-index: 1000;

        .mobile-nav-item {
            text-align: center;
            color: #64748b;
            text-decoration: none;
            font-size: 0.7rem;
        }

        .mobile-nav-item.active {
            color: var(--clr-navy-700);
            font-weight: bold;
        }

        .mobile-nav-item i {
            display: flex;
            font-size: 1.2rem;
            margin-bottom: .25rem;
            margin-left: auto;
            margin-right: auto;
            aspect-ratio: 1;
            height: 1.8rem;
            justify-content: center;
            align-items: center;
        }
    }
}

.profile-page {
    @media (max-width:992px) {
        padding-bottom: 5rem;

        #sidebar-nav-scrollspy {
            display: none !important;
        }

        #backToTopBtn {
            display: none;
        }
    }
}

/* User Management Page */

/* Tables */
/* KEVIN: This are the styles for the Report Tables */

.table-responsive:has(>div>table.dataTable) {
    padding: var(--space-8) 0;
}

.dataTables_wrapper {
    
    .dataTables_length,
    .dataTables_filter {
        margin-bottom:var(--space-3);

        label {
            display:flex;
            align-items:center;
            gap:var(--space-3);
        }
    }
}

table.table.table-striped.no-footer.dataTable,
table.data.table.table-striped {
    font-family: var(--font-primary);

    th,
    td {
        white-space: nowrap;
        padding: .75rem 1rem !important;
        border:none;
    }

    thead th {
        font-family: var(--font-secondary);
        font-size: var(--font-size-xs);
        background-color: var(--clr-navy-700);
        text-align: left;
    }

    tbody tr>td:first-child {
        padding-right: var(--space-8);
        font-weight: bolder;
        font-family: var(--font-secondary)!important;
    }

    tbody tr td {
        vertical-align: middle;
        font-family: var(--font-primary)!important;
        font-weight: normal!important;
        font-size: var(--font-size-sm);

        & a {
            color: var(--clr-azure-42) !important;
            text-decoration: underline;
            text-underline-offset: .125rem;
            padding: 1rem 1rem 1rem 0;
            font-weight: bolder;
            transition: color ease .2s, text-underline-offset ease .2s;

            &:hover {
                color: var(--clr-azure-09) !important;
                text-underline-offset: .25rem;
            }
        }
    }

    &>tbody>tr:nth-of-type(odd) {
        background-color: var(--clr-azure-95) !important;
    }

    &>tbody>tr:nth-of-type(odd)>* {
        --bs-table-color-type: var(--bs-table-striped-color);
        --bs-table-bg-type: var(--clr-azure-95) !important;
    }

    >tbody>tr:hover>* {
        background-color: #b8eeff !important;
    }


    /* KEVIN: This is the first sticky column o */
    thead th:nth-child(1),
    tbody td:nth-child(1) {
        position: sticky;
        left: 0;
        background-color: #d0daee;
        z-index: 1;
        border-right: 1px solid #ccc;
        min-width: 12.95rem!important;
        width: 12.95rem!important;
        max-width: 12.95rem!important;
    }

    /* KEVIN: This is the second sticky column */
    thead th:nth-child(2),
    tbody td:nth-child(2) {
        position: sticky;
        left: 14.96rem; /* This is the width of the first column + padding */
        background-color: #d0daee;
        z-index: 1;
        border-right: 1px solid #ccc;
        min-width: 8rem;
    }

    tbody>tr:nth-of-type(even)>td:nth-child(-n+2) {
        background-color: white !important;
    }

    thead th:nth-child(-n+2) {
        background-color: var(--clr-navy-700);
    }



    /* Make the 7th column wider (20rem) */
    tr th:nth-child(7),
    tr td:nth-child(7) {
        min-width: 20rem !important;
    }

    /* Make the last column wider (18rem) */
    tr th:last-child,
    tr td:last-child {
        min-width: 18rem !important;
    }

}

table.table-striped.no-footer.dataTable tbody tr td {
    font-family: var(--font-primary)!important;
    font-weight:400!important;
}

.dataTables_wrapper .dataTables_paginate {
    float: none;
    text-align: left;
    padding-top: 0.25em;
}

.Availability-search {
    input[type="submit"], 
    input[type="text"], 
    input[type="search"],
    .btn,  
    select {
        border-radius: var(--border-radius-sm)!important;
        min-height: 2rem;
        font-size: 1rem!important;
        font-family: var(--font-primary)!important;
    }

    input[type="text"], 
    input[type="search"],  
    select {
        padding: 0.25rem;
        border: .0625rem solid var(--clr-azure-80)!important;
    }

    padding-top:1rem;

}

.Availability-info,
.Availability-main {

    .dataTables_filter input[type="search"],
    select {
        border-radius: var(--border-radius-sm)!important;
        min-height: 2rem;
        font-size: 1rem!important;
        font-family: var(--font-primary)!important;
        padding: 0.25rem!important;
        border: .0625rem solid var(--clr-azure-80)!important;
    }
}

.reports-banner.ac {
    text-align:left;
}

.reports {

    .content {
        padding-top:1rem;
        margin-top:1rem;
        background:var(--clr-azure-95);

        @media screen and (max-width:768px){
            div::has(h1) { margin-bottom:var(--space-2)!important; }
        }
    }

    input, select {
        appearance:auto;
        max-height:2rem;
    }

    button {
        padding: .45rem .75rem !important;
        max-height:2rem;
    }

    .filter-group {
        display:flex;
        flex-direction: column;
        gap:.5rem;

        &>label {
            font-family:var(--font-secondary);
            font-size:var(--font-size-sm);
            color:var(--clr-azure-46);
            font-weight:bolder;        
        }

        &.date-range,
        &.invoice-number {
            display:flex;
            flex-direction:column;

            .date-range-container {
                width:100%;
                .form-group {
                    width:50%;
                }
            }

            div { 
                display:inline-flex; 
                gap:.5rem;
                align-items:center;
            }


            @media (min-width:992px){
                .date-range-container {
                    width:auto;
                }
                div, input {
                    width:auto;
                }
            }
        }
    }

}


/* Button hover effect Microinteraction except for disabled buttons */

.btn:not([disabled]):hover {
    transform: translateY(-0.125rem);
}

/* Entry animation for the success Icon */
@keyframes icon-pop-in {
    0% {
        opacity: 0;
        transform: scale(0.5) rotate(0deg) translate(-10rem, 10rem);
    }

    40% {
        opacity: .2;
        transform: scale(0.5) rotate(-50deg) translate(0, 0);
    }

    60% {
        opacity: .8;
        transform: scale(1.3) rotate(20deg) translate(0, 0);
    }

    80% {
        transform: scale(0.90) rotate(-4deg) translate(0, 0);
    }

    100% {
        opacity: 1;
        transform: scale(1) rotate(0deg);
    }
}

.animated-success-icon {
    display: inline-block;
    animation: icon-pop-in 1s ease-out;
}

#warehouseListTable {
    tbody tr>td:first-child {
        text-underline-offset: 4px;

        &>* {
            transition: transform .2s ease;
            text-decoration: underline!important;
        }
        &>*:hover {
            transform: translateY(-2px);
        }
        &>*:after {
            content: "\F135";
            font-family: "Bootstrap-icons";
            position:relative;
            top:0.125rem;
            left:.25rem;
            display:inline-block;
            color:#6c757d;
        }
    }
}

.inland-warehouse.offcanvas {
    width:60vw;

    .offcanvas-header {
        margin-bottom:var(--space-4);
        h5 { font-weight:400; }
    }

    .table-responsive {
        border:1px solid var(--clr-navy-400);
        border-radius:.5rem;
    }

    table, table th, table td. {
        border: none!important;
    }
    table {
        width: 100%;
        table-layout: fixed;
        box-sizing: border-box;
        text-wrap: wrap;
        border-collapse: collapse;

        td, th {
            word-wrap: break-word; 
            white-space: normal;
            text-wrap: balance;
            padding:var(--space-2) var(--space-1);
        }


        tr:nth-of-type(odd) > td,
        tr:nth-of-type(even) > td {
            background:white;
            border-bottom:1px solid var(--clr-navy-400);
        }

        tbody > tr > td:first-child {
            width:7.25rem!important;
            background:white;
            color:var(--clr-azure-42);
            padding-right:var(--space-2);
            font-family:var(--font-secondary);
            font-size:var(--font-size-2xs);
            text-transform:uppercase;
        }

        tbody > tr:first-child {

            td { background:var(--clr-navy-600); color:white;}
        
            & > td:nth-child(2) {
            font-size:var(--font-size-xl)!important;
            font-weight:bold;
            }
        }
        tbody > tr:last-child >td {
            border-bottom:0;
        }
    }
}


/* --------------- Responsive styles -------- */

@media screen and (min-width:1366px) {
    .container-fluid {
        max-width: 112.8rem;
    }


}

@media screen and (min-width:1920px) {
    .container-fluid {
        max-width: 94vw;
    }

    html {
        font-size: clamp(1.25rem, -0.5rem + 1.4583vw, 3rem) !important;
    }

    .marketing .container-fluid {
        max-width: 90vw !important;
    }
}

@media screen and (min-width:1279px) {
    .hbl-master-list .hbl-list-item .badge {
        text-wrap: auto;
        max-width: 16rem;
        margin: .5rem 0;
    }
}

@media screen and (max-width:1279px) {

    .milestone-v2-container {
        width: 100% !important;
    }

    .lfd-godate {
        width: 100% !important;
        flex-direction: row;
        margin-top: var(--space-5) !important;
    }

    /* ----    HBL Table layout     ----- */
    .hbl-master-list .hbl-list-grid,
    .search-results .hbl-list-grid {
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        align-items: center;
    }

    .search-results .hbl-list-grid {
        gap: .75rem !important;
    }

    .hbl-master-list .hbl-list-grid .hbl {
        min-width: 86%;
        padding: 1rem .75rem;
        font-size: 1rem;
    }

    .hbl-master-list .hbl-list-grid .quantity {
        max-width: 5em;
    }

    .hbl-master-list .hbl-list-grid .status,
    .search-results .hbl-list-grid .status {
        min-width: 30em;
    }

    .hbl-master-list .hbl-list-grid div:first-child {
        padding-left: .75rem;
    }

    .hbl-master-list .hbl-list-grid,
    .search-results .hbl-list-grid {
        row-gap: .75rem;
        column-gap: 1.375rem;
        align-items: flex-start;
        justify-content: flex-start;
        padding: .25rem .25rem .5rem .25rem;
    }

    .hbl-master-list .hbl-list-grid .seqno,
    .search-results .hbl-list-grid .seqno {
        min-width: 8%;
        flex-direction: row;
        align-items: center !important;
        padding: .25rem .75rem;
    }

    .hbl-master-list .hbl-list-grid .status,
    .search-results .hbl-list-grid .status {
        min-width: 20em;
        align-items: center;
        margin-left: 1.25rem;
    }

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

    .hide-header {
        display: none !important;
    }

    .hbl-master-list .hbl-list-grid .quantity {
        max-width: none;
    }

    .hbl-master-list .hbl-list-grid>div {
        padding: .25rem .75rem;
        flex-direction: column;
        align-items: start !important;
        gap: .5rem;
    }

    .hbl-master-list .hbl-list-grid .hbl-charges {
        min-width: 4%;
    }

    .hbl-master-list .hbl-list-grid .hbl-holds {
        min-width: 25%;
    }

    /* Layout inside Offcanvas for AMS lists  */
    .ams-list-grid,
    .ams-header-grid {
        display: flex;
        gap: .75rem;
        align-items: center;
        justify-content: stretch;
        flex-wrap;
    }
}

@media screen and (max-width:992px) {
    .mbl-master-table {
        flex-wrap: wrap;
    }

    .milestone-v2 .check {
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: var(--space-2);
        text-align: center;
    }

    .milestone-v2 .check .bi {
        text-align: center;
    }

    .hbl-master-list .hbl-list-grid .status {
        min-width: 40%;
        margin-left: 0 !important;
    }

    .hbl-master-list .hbl-list-grid,
    .search-results .hbl-list-grid {
        gap: .25rem;
        padding: .5rem;
    }

    .hbl-master-list .hbl-list-grid .hbl {
        min-width: 84%;
        padding: 1rem .75rem;
        font-size: 1.125rem;
    }

    /* Layout inside Offcanvas */
    .hbl-item-details-modal .main-content {
        grid-template-columns: 6fr 2.5fr !important;
        grid-template-rows: 1fr auto;
    }

    .details-card.ipi-status {
        grid-column: 2 / 3;
        grid-row: 1 / -1;
    }

    .offcanvas-hbl-header {
        flex-wrap: wrap;
    }

    .offcanvas-hbl-header .info-item {
        width: 100%;
    }

    .ams-section .ams-list-item {
        padding: .75rem;
        flex-wrap: wrap;
    }

    .ams-section .ams-list-item .hbl {
        font-size: 1rem;
        min-width: 33%;
    }

    .ams-section .ams-list-item>div {
        flex-direction: column !important;
        padding: .5rem .75rem;
    }

    .milestone-v2>.col-auto .icon-64 {
        height: 4vw !important;
    }

    .milestone-v2 {
        display: grid;
        grid-template-columns: repeat(11, auto);
        grid-template-rows: auto;
        justify-content: center;
        justify-items: center;
    }
}

@media screen and (max-width:768px) {
    .mbl-master-table {
        margin-top: .75rem;
    }

    .mbl-master-table div:nth-child(n + 4) {
        border-top: 0.0625rem solid var(--clr-azure-85);
    }

    .table-col-mbl {
        min-width: 40%;
    }

    .milestone-v2 {
        display: flex !important;
        flex-direction: column;
        margin-bottom: .75rem;
    }

    .milestone-v2>.col-auto {
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: .75rem;
        justify-content: center;
        width: 100%;
        margin-top: .25rem;
        margin-bottom: .25rem;
    }

    .milestone-v2>.col-auto .check {
        padding-bottom: 0;
        border: 0;
        order: 2;
        min-width: 30%;
        font-size: var(--font-size-2xl);
        flex-direction: row;
    }

    .milestone-v2>.col-auto .date {
        padding-top: 0;
        border: 0;
        order: 3;
        font-size: var(--font-size-2xl);
    }

    .milestone-v2>.col-auto .icon-64 {
        margin-top: 0;
        height: 3.75rem !important;
        order: 1;
        aspect-ratio: 1;
        width: 8rem;
    }

    .hbl-item-details-modal .main-content {
        display: flex;
        flex-direction: column;
    }

    .hbl-master-list .hbl-list-grid .hbl {
        min-width: 80%;
        padding: 1rem .75rem;
        font-size: 1.5rem;
    }

    .details-card.ipi-status {
        grid-column: initial;
        grid-row: initial;
    }

    .hbl-item-details-modal .info-bar {
        flex-wrap: wrap !important;
        gap: .75rem;
    }

    .milestone-v2 {
        font-size: 190%;
    }

    .milestone-v2 .bi.bi-chevron-right {
        display: none;
    }

    .ams-section .ams-list-item .hbl {
        min-width: 100%;
        padding: var(--space-2);
    }


}

@media screen and (max-width:576px) {
    .hide-mobile {
        display: none !important;
    }

    .nav-search-bar {
        display: grid;
        grid-template-columns: repeat(1, 1fr auto);
        grid-template-rows: repeat(3, 1fr);
    }

    .nav-search-bar label:first-child {
        grid-area: 1 / 1 / 2 / 2;
    }

    .nav-search-bar .form-control {
        margin-left: 0 !important;
    }

    .nav-search-bar label:nth-child(2) {
        grid-area: 2 / 1 / 3 / 2;
    }

    .nav-search-bar label:nth-child(2) input {
        width: 100%
    }

    .nav-search-bar .btn-primary {
        grid-area: 3 / 1 / 4 / 2;
    }

    .nav-search-bar .btn-close {
        grid-area: 1 / 2 / 4 / 3;
    }


    .mbl-master-table .table-col {
        display: flex;
        flex-direction: row;
        text-align: left;
        border: 0 !important;
        align-self: baseline;
    }

    .mbl-master-table .table-col .table-header {
        border: 0 !important;
        align-self: baseline;
    }

    .mbl-master-table .table-data {
        justify-content: start;
    }

    .hbl-master-list .hbl-list-grid .hbl {
        font-size: 1.25rem;
    }

    .hbl-master-list .hbl-list-grid>div {
        min-width: 100%;
        flex-direction: row !important;
        justify-content: flex-start !important;
        align-items: center !important;
    }

    .hbl-master-list .hbl-list-grid .quantity {
        min-width: 30%;
    }

    .hbl-master-list .hbl-list-grid .status {
        border-top: 0.0625rem solid var(--clr-azure-95);
        width: 100%;
        justify-content: space-between !important;
        align-items: flex-start !important;
        padding-top: .75rem;
    }

    .hbl-master-list .hbl-list-grid .status>div {
        flex-wrap: wrap;
    }

    .hbl-master-list .hbl-list-grid .status .hide-label {
        padding-top: 0.3125rem;
    }

    .hbl-master-list .hbl-list-grid .status .badge {
        font-size: var(--font-size-sm);
    }

    .hbl-master-list .hbl-list-grid .status .ipi-warehouse-buttons {
        flex-direction: row;
        gap: .75rem;
    }

    .milestone-v2>.col-auto {
        justify-content: flex-start !important;
        gap: 1.5rem;
        padding: 0 !important;
    }

    .milestone-v2>.col-auto .icon-64 {
        height: 3.5rem !important;
        width: auto;
    }

    .milestone-v2>.col-auto .date {
        margin-left: auto;
    }

    .terminal-appt-status span:first-child {
        background: var(--clr-cyan-47);
        border-top-left-radius: var(--border-radius-md);
        border-top-right-radius: var(--border-radius-md);
        border-bottom-left-radius: 0;
    }

    .terminal-appt-status {
        flex-direction: column;
        margin-left: calc(var(--space-2) * -1);
        margin-right: calc(var(--space-2) * -1);
    }

    .offcanvas-header {
        flex-direction: column;
        gap: var(--space-3);
    }

    /* Offcanvas open from bottom  */
    .offcanvas-end.offcanvas {
        transform: translateY(100%);
        top: auto;
        right: 0;
        left: 0;
        bottom: 0;
        height: auto;
        max-height: 85vh;
        width: 100vw;
        min-width: none;
    }

    .offcanvas-end.offcanvas.show {
        /* Show the offcanvas from the bottom when open */
        transform: translateY(0);
    }

    .exam-details .aside-details {
        display: flex;
        flex-direction: row;
        gap: .75rem;
        justify-content: space-between;
        padding-top: .75rem;
        padding-left: .75rem !important;
    }

    .info-item-holds {
        width: 100%;
    }

    .ams-list-item {
        flex-wrap: wrap;
        gap: .25rem;
    }
}

.custom-scrollbar {
    overflow: auto;
    scrollbar-width: thin;
    scrollbar-color: #333 transparent;
}

.custom-scrollbar::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

/* The draggable handle (thumb) */
.custom-scrollbar::-webkit-scrollbar-thumb {
    background-color: #333;
    border-radius: 10px;
}

/* The track (background) */
.custom-scrollbar::-webkit-scrollbar-track {
    background-color: transparent;
    border-radius: 10px;
}

/* Remove the arrows at the start and end of the scrollbar (WebKit) */
.custom-scrollbar::-webkit-scrollbar-button {
    display: none;
}

.offcanvas-backdrop {
    opacity: .7 !important;
}

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

.offcanvas {
    z-index: 1060;
}

/* Fix for header being over offcanvas */

/* Applies top margin when navigating to an element ID */
:target {
    scroll-margin-top: 5.2rem;
    /* Adjust '5rem' to match your fixed header height */
}

.no-wrap {
    text-wrap: nowrap;
}

input[type=text] {
    font-weight: 400;
}

.marketing .main-content ul li ul {
    padding-left: var(--space-6);
    margin-top: var(--space-3);
    margin-bottom: var(--space-3);

    & i {
        margin-right: var(--space-2);
        color: var(--clr-grey-50);
    }
}

.filter-cyan {
    filter: brightness(0) saturate(100%) invert(44%) sepia(9%) saturate(3785%) hue-rotate(166deg) brightness(96%) contrast(87%);
}

.square-bullet {
    padding-left: 1.5125rem;
    position: relative;

    &:before {
        content: "";
        display: block;
        width: .575rem;
        height: .575rem;
        background: var(--clr-cyan-47);
        position: absolute;
        left: 0;
        top: 25%;
    }
}

.marketing .list-group {
    a.active {
        background-color: var(--clr-azure-89);
        border: var(--clr-cyan-47);
        color: black;
    }

    a.active:before {
        content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' class='bi bi-chevron-right' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708'/%3E%3C/svg%3E");
        margin-right: .125rem;
        filter: brightness(0) saturate(100%) invert(44%) sepia(9%) saturate(3785%) hue-rotate(166deg) brightness(96%) contrast(87%);
    }
}

.marketing .breadcrumb-item+.breadcrumb-item::before {
    color: white !important;
}


body.availavility-v2.marketing .breadcrumb {
    --bs-breadcrumb-divider: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8'%3E%3Cpath d='M2.5 0L1 1.5 3.5 4 1 6.5 2.5 8l4-4-4-4z' fill='%23ffffff'/%3E%3C/svg%3E");
}

input[type="text"]:focus,
select:focus {
    border: 2px solid rgb(13, 202, 240) !important;
    background: rgb(246, 253, 255);
}
/*
================================================================
1. Declaración de Fuentes Locales (@font-face)
================================================================
*/
@font-face {
    font-family: 'Archivo Narrow';
    src: url('../_includes/fonts/ArchivoNarrow-Regular.woff') format('woff');
    font-weight: 400; /* Regular */
    font-style: normal;
}
@font-face {
    font-family: 'Archivo Narrow';
    src: url('../_includes/fonts/ArchivoNarrow-Italic.woff') format('woff');
    font-weight: 400; /* Regular Italic */
    font-style: italic;
}
@font-face {
    font-family: 'Archivo Narrow';
    src: url('../_includes/fonts/ArchivoNarrow-Bold.woff') format('woff');
    font-weight: 700; /* Bold */
    font-style: normal;
}
@font-face {
    font-family: 'Archivo Narrow';
    src: url('../_includes/fonts/ArchivoNarrow-BoldItalic.woff') format('woff');
    font-weight: 700; /* Bold Italic */
    font-style: italic;
}

/* --- DM Serif Display --- */
@font-face {
    font-family: 'DM Serif Text';
    src: url('../_includes/fonts/DMSerifDisplay-Regular.woff2') format('woff2'), url('../_includes/fonts/DMSerifDisplay-Regular.woff') format('woff');
    font-weight: 400; /* Regular */
    font-style: normal;
}
@font-face {
    font-family: 'DM Serif Text';
    src: url('../_includes/fonts/DMSerifDisplay-Italic.woff2') format('woff2'), url('../_includes/fonts/DMSerifDisplay-Italic.woff') format('woff');
    font-weight: 400; /* Regular Italic */
    font-style: italic;
}

/* --- Sora --- */
@font-face {
    font-family: 'Sora';
    src: url('../_includes/fonts/Sora-Light.woff') format('woff');
    font-weight: 300; /* Light */
    font-style: normal;
}
@font-face {
    font-family: 'Sora';
    src: url('../_includes/fonts/Sora-Regular.woff') format('woff');
    font-weight: 400; /* Regular */
    font-style: normal;
}
@font-face {
    font-family: 'Sora';
    src: url('../_includes/fonts/Sora-Bold.woff') format('woff');
    font-weight: 700; /* Bold */
    font-style: normal;
}
@font-face {
    font-family: 'Sora';
    src: url('../_includes/fonts/Sora-ExtraBold.woff') format('woff');
    font-weight: 800; /* ExtraBold */
    font-style: normal;
}

@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono&display=swap');


/* RESETS FROM OLD CSS */

.row {
    margin-right: calc(-.5 * var(--bs-gutter-x))
    !important;
    margin-left: calc(-.5 * var(--bs-gutter-x))!important;
}

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

.btn {
    border-radius: 0;
    height: initial!important;
    font-size:initial!important;
}

body, button, input, select, textarea {
    font: initial / initial var(--font-primary);
}

.mb-3 { margin-bottom: var(--space-3) !important; }

.lh-1rem { line-height:1rem!important; }

.mb-1px { margin-bottom:1px!important}

.row-no-wrap {
    margin-left:-24px!important; margin-right:-24px!important;
}


/*
================================================================
IMPERIAL CFS - DESIGN SYSTEM
================================================================
*/

/* ----------------------------------------------------------------
2. CSS Variables (Tokens de Diseño)
----------------------------------------------------------------
*/
:root {
    /* == Colores == */
    /* Paleta de Azul Marino (Nuevo) */
    --clr-navy-900: #0A192F; 
    --clr-navy-800: #1C2A4E; 
    --clr-navy-700: #14264f; 
    --clr-navy-600: #2e3f6b;
    --clr-navy-500: #57687A;
    --clr-navy-400: #778a9e;
    --clr-navy-200: #DBEAFE;
    

    /* Azure colors */
    --clr-azure-09: #05162A;
    --clr-azure-19: #14264F;
    --clr-azure-42: #0a6aca;
    --clr-azure-44: #277cd1;
    --clr-azure-46: #337AB7;
    --clr-azure-70: #9daec0;
    --clr-azure-80: #b1bbc9;
    --clr-azure-85: #b4bed4;
    --clr-azure-89: #DCE2EF;
    --clr-azure-95: #EDF0F6;
    --clr-azure-99: #f3f7fc;


    /* Paleta de Cyan (Azul) */
    --clr-cyan-47: #09B4E6;
    --clr-cyan-80: #4CD4FC;
    --clr-cyan-95: #8CE5FF;
    --clr-cyan-99: #c3f1ff;
    --clr-cyan-primary: var(--clr-cyan-47); /* Alias para el color principal */
    
    /* Paleta de Azul de Marca (Nuevo) */
    --clr-blue-brand: #0062A9; /* Color de los botones y enlaces principales */
    --clr-blue-light-bg: #F0F5FA; /* Fondo para secciones destacadas */

    /* Paleta de Grises */
    --clr-grey-20: #333333; /* Texto principal oscuro */
    --clr-grey-40: #555555;
    --clr-grey-50: #808080; /* Texto secundario */
    --clr-grey-65: #A6A6A6; /* Bordes y divisores */
    --clr-grey-75: #CCCCCC; /* Bordes sutiles */
    --clr-grey-95: #EDFDF6; /* Fondos muy claros */
    --clr-white: #FFFFFF;
    
    /* Paleta Semántica (para estados) */
    --clr-background-main: #F8F9FA; /* gris claro para el fondo */
    --clr-background-card: var(--clr-white);
    --clr-text-primary: var(--clr-grey-20);
    --clr-text-secondary: var(--clr-grey-50);
    --clr-text-headings: var(--clr-navy-900);
    --clr-border: var(--clr-grey-65);
    
    /* Colores para estados (pueden ser ajustados) */
    --clr-success: #14AE5C; 
    --clr-warning: #f97316;
    --clr-danger: #dc2626;
    --clr-info: #2563eb;
    
    /* Nuevas variables para Pills/Etiquetas */
    --clr-success-light: #dcfce7; /* Fondo para pill de éxito */
    --clr-success-dark: #166534;  /* Texto para pill de éxito */
    --clr-warning-light: #ffedd5; /* Fondo para pill de advertencia */
    --clr-warning-dark: #9a3412;  /* Texto para pill de advertencia */
    --clr-danger-light: #fee2e2;  /* Fondo para pill de peligro */
    --clr-danger-dark: #8A0200;   /* Texto para pill de peligro */
    --clr-info-light: #e0f2fe;    /* Fondo para pill de información */
    --clr-info-dark: #075985;     /* Texto para pill de información */

    /* == Tipografía == */
    --font-primary: 'Archivo Narrow', sans-serif;
    --font-secondary: 'Sora', sans-serif;
    --font-headings: 'DM Serif Text', serif;
    --font-monospace: 'Roboto Mono', monospace;
    
    /* Tamaños de Fuente (Escala modular) */ 
        /* Tamaños fluidos para textos */
            --font-size-2xs: clamp(0.625rem, 0.5714rem + 0.1488vw, 0.75rem); /* 10px -> 12px */
            --font-size-xs: clamp(0.75rem, 0.6964rem + 0.1488vw, 0.875rem);  /* 12px -> 14px */
            --font-size-sm: clamp(0.875rem, 0.8482rem + 0.0744vw, 0.9375rem); /* 14px -> 15px */
            --font-size-base: clamp(0.9375rem, 0.12vw + 0.89rem, 1rem);      /* 15px -> 16px */
            --font-size-lg: clamp(1rem, 0.24vw + 0.91rem, 1.125rem);         /* 16px -> 18px */
            --font-size-xl: clamp(1.125rem, 0.24vw + 1.04rem, 1.25rem);      /* 18px -> 20px */
            --font-size-2xl: clamp(1.25rem, 0.48vw + 1.08rem, 1.5rem);       /* 20px -> 24px */
            --font-size-3xl: clamp(1.5rem, 0.73vw + 1.24rem, 1.875rem);      /* 24px -> 30px */
            --font-size-4xl: clamp(1.575rem, 0.97vw + 1.4rem, 2.25rem);       /* 28px -> 36px */
            --font-size-5xl: clamp(2.125rem, 1.45vw + 1.73rem, 3rem);         /* 36px -> 48px */

    /* Pesos de Fuente */
    --font-weight-regular: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --font-weight-black: bolder;

    /* == Espaciado (Márgenes y Padding) == */
    /* Escala de 4px */
    --space-1: 0.25rem; /* 4px */
    --space-2: 0.5rem;  /* 8px */
    --space-3: 0.75rem; /* 12px */
    --space-4: 1rem;    /* 16px */
    --space-5: 1.25rem; /* 20px */
    --space-6: 1.5rem!important;  /* 24px */
    --space-8: 2rem;    /* 32px */
    --space-10: 2.5rem;  /* 40px */
    --space-12: 3rem;  /* 48px */
    --space-16: 4rem;  /* 64px */
    --space-20: 5rem;  /* 80px */
    --space-24: 6rem;  /* 96px */

    /* == Bordes y Sombras == */
    --border-radius-sm: 0.25rem; /* 4px */
    --border-radius-md: 0.5rem;  /* 8px */
    --border-radius-lg: 1rem;    /* 16px */
    --border-radius-xl: 1.5rem;    /* 24px */
    --border-radius-full: 9999px;

    --stroke-width-1: 1px;
    --stroke-width-3: 3px;

    --shadow-sm: 0 1px 2px 0 rgb(51 122 183 / 0.05); 
    --shadow-md: 0 4px 6px -1px rgb(51 122 183 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
    --shadow-lg: 0 10px 15px -3px rgb(51 122 183 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);

    /* == Interacciones y Transiciones == */
    --transition-property-common: background-color, border-color, color, fill, stroke, opacity, box-shadow, transform;
    --transition-timing-function-ease: cubic-bezier(0.4, 0, 0.2, 1);
    --transition-duration-fast: 150ms;
    --transition-duration-normal: 300ms;

    --transform-scale-sm: 0.99; /* Para efecto de "presionado" */
    --transform-scale-lg: 1.0025; /* Para efecto de "hover" sutil */
    --transform-translate-y-sm: -4px; /* Para levantar un elemento */

    /* == Breadcrums == */
    --bs-breadcrumb-divider: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="8" height="8" fill="currentColor" class="bi bi-chevron-right" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708"/></svg>');
}

/* ----------------------------------------------------------------
3. Estilos Base
----------------------------------------------------------------
*/
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: var(--font-primary);
    background-color: var(--clr-background-main);
    color: var(--clr-text-primary);
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
    font-family: var(--font-headings);
    color: var(--clr-text-headings);
}

/* ----------------------------------------------------------------
4. Clases Utilitarias
----------------------------------------------------------------
*/

/* == Display == */
.d-none { display: none; }
.d-block { display: block; }
.d-inline-block { display: inline-block; }
.d-flex { display: flex; }
.d-inline-flex { display: inline-flex; }
.d-grid { display: grid; }

/* == Flexbox == */
.flex-row { flex-direction: row; }
.flex-col { flex-direction: column; }
.flex-wrap { flex-wrap: wrap; }
.flex-nowrap { flex-wrap: nowrap; }

.items-start { align-items: flex-start; }
.items-center { align-items: center; }
.items-end { align-items: flex-end; }
.items-stretch { align-items: stretch; }

.justify-start { justify-content: flex-start; }
.justify-center { justify-content: center; }
.justify-end { justify-content: flex-end; }
.justify-between { justify-content: space-between; }
.justify-around { justify-content: space-around; }

.gap-1 { gap: var(--space-1); }
.gap-2 { gap: var(--space-2); }
.gap-4 { gap: var(--space-4); }
.gap-6 { gap: var(--space-6); }
.gap-8 { gap: var(--space-8); }

/* == Espaciado (Márgenes y Paddings) == */
/* All sides */
.m-1 { margin: var(--space-1); } .p-1 { padding: var(--space-1); }
.m-2 { margin: var(--space-2); } .p-2 { padding: var(--space-2)!important; }
.m-3 { margin: var(--space-3); } .p-3 { padding: var(--space-3); }
.m-4 { margin: var(--space-4); } .p-4 { padding: var(--space-4); }
.m-5 { margin: var(--space-5); } .p-5 { padding: var(--space-5); }
.m-6 { margin: var(--space-6); } .p-6 { padding: var(--space-6); }
.m-8 { margin: var(--space-8); } .p-8 { padding: var(--space-8); }
.m-10 { margin: var(--space-10); } .p-10 { padding: var(--space-10); }
.m-12 { margin: var(--space-12); } .p-12 { padding: var(--space-12); }
.m-16 { margin: var(--space-16); } .p-16 { padding: var(--space-16); }
.m-20 { margin: var(--space-20); } .p-20 { padding: var(--space-20); }
.m-24 { margin: var(--space-24); } .p-24 { padding: var(--space-24); }

/* Y-axis (top & bottom) */
.my-1 { margin-top: var(--space-1)!important; margin-bottom: var(--space-1)!important; } .py-1 { padding-top: var(--space-1)!important; padding-bottom: var(--space-1)!important; }
.my-2 { margin-top: var(--space-2)!important; margin-bottom: var(--space-2)!important; } .py-2 { padding-top: var(--space-2)!important; padding-bottom: var(--space-2)!important; }
.my-4 { margin-top: var(--space-4)!important; margin-bottom: var(--space-4)!important; } .py-4 { padding-top: var(--space-4)!important; padding-bottom: var(--space-4)!important; }
.my-5 { margin-top: var(--space-5)!important; margin-bottom: var(--space-5)!important; } .py-5 { padding-top: var(--space-5)!important; padding-bottom: var(--space-5)!important; }
.my-6 { margin-top: var(--space-6)!important; margin-bottom: var(--space-6)!important; } .py-6 { padding-top: var(--space-6)!important; padding-bottom: var(--space-6)!important; }
.my-8 { margin-top: var(--space-8)!important; margin-bottom: var(--space-8)!important; } .py-8 { padding-top: var(--space-8)!important; padding-bottom: var(--space-8)!important; }
.my-12 { margin-top: var(--space-12)!important; margin-bottom: var(--space-12)!important; } .py-12 { padding-top: var(--space-12)!important; padding-bottom: var(--space-12)!important; }
.my-16 { margin-top: var(--space-16)!important; margin-bottom: var(--space-16)!important; } .py-16 { padding-top: var(--space-16)!important; padding-bottom: var(--space-16)!important; }

/* X-axis (left & right) */
.mx-1 { margin-left: var(--space-1); margin-right: var(--space-1); } .px-1 { padding-left: var(--space-1); padding-right: var(--space-1); }
.mx-2 { margin-left: var(--space-2)!important; margin-right: var(--space-2)!important; } .px-2 { padding-left: var(--space-2)!important; padding-right: var(--space-2)!important; }
.mx-4 { margin-left: var(--space-4); margin-right: var(--space-4); } .px-4 { padding-left: var(--space-4)!important; padding-right: var(--space-4)!important; }
.mx-6 { margin-left: var(--space-6); margin-right: var(--space-6); } .px-6 { padding-left: var(--space-6); padding-right: var(--space-6); }
.mx-8 { margin-left: var(--space-8); margin-right: var(--space-8); } .px-8 { padding-left: var(--space-8); padding-right: var(--space-8); }
.mx-12 { margin-left: var(--space-12); margin-right: var(--space-12); } .px-12 { padding-left: var(--space-12); padding-right: var(--space-12); }
.mx-16 { margin-left: var(--space-16); margin-right: var(--space-16); } .px-16 { padding-left: var(--space-16); padding-right: var(--space-16); } 

/* Top */
.mt-0 { margin-top: 0!important; } .pt-0 { padding-top: 0!important; }
.mt-1 { margin-top: var(--space-1)!important; } .pt-1 { padding-top: var(--space-1)!important; }
.mt-2 { margin-top: var(--space-2)!important; } .pt-2 { padding-top: var(--space-2)!important; }
.mt-4 { margin-top: var(--space-4)!important; } .pt-4 { padding-top: var(--space-4)!important; }
.mt-5 { margin-top: var(--space-5)!important; } .pt-5 { padding-top: var(--space-5)!important; }
.mt-6 { margin-top: var(--space-6)!important; } .pt-6 { padding-top: var(--space-6)!important; }
.mt-8 { margin-top: var(--space-8)!important; } .pt-8 { padding-top: var(--space-8)!important; }
.mt-12 { margin-top: var(--space-12)!important; } .pt-12 { padding-top: var(--space-12)!important; }
.mt-16 { margin-top: var(--space-16)!important; } .pt-16 { padding-top: var(--space-16)!important; }

/* Bottom */
.mb-1 { margin-bottom: var(--space-1)!important; } .pb-1 { padding-bottom: var(--space-1)!important; }
.mb-2 { margin-bottom: var(--space-2)!important; } .pb-2 { padding-bottom: var(--space-2)!important; }
.mb-3 { margin-bottom: var(--space-3)!important; } .pb-3 { padding-bottom: var(--space-3)!important; }
.mb-4 { margin-bottom: var(--space-4)!important; } .pb-4 { padding-bottom: var(--space-4)!important; }
.mb-5 { margin-bottom: var(--space-5)!important; } .pb-5 { padding-bottom: var(--space-5)!important; }
.mb-6 { margin-bottom: var(--space-6)!important; } .pb-6 { padding-bottom: var(--space-6)!important; }
.mb-8 { margin-bottom: var(--space-8)!important; } .pb-8 { padding-bottom: var(--space-8)!important; }
.mb-12 { margin-bottom: var(--space-12)!important; } .pb-12 { padding-bottom: var(--space-12)!important; }
.mb-16 { margin-bottom: var(--space-16)!important; } .pb-16 { padding-bottom: var(--space-16)!important; }

/* Left */
.ml-1 { margin-left: var(--space-1); } .pl-1 { padding-left: var(--space-1); }
.ml-2 { margin-left: var(--space-2); } .pl-2 { padding-left: var(--space-2); }
.ml-4 { margin-left: var(--space-4); } .pl-4 { padding-left: var(--space-4); }
.ml-6 { margin-left: var(--space-6); } .pl-6 { padding-left: var(--space-6); }
.ml-8 { margin-left: var(--space-8); } .pl-8 { padding-left: var(--space-8); }
.ml-12 { margin-left: var(--space-12); } .pl-8 { padding-left: var(--space-12); }
.ml-16 { margin-left: var(--space-16); } .pl-8 { padding-left: var(--space-16); }

/* Right */
.mr-1 { margin-right: var(--space-1)!important; } .pr-1 { padding-right: var(--space-1)!important; }
.mr-2 { margin-right: var(--space-2)!important; } .pr-2 { padding-right: var(--space-2)!important; }
.mr-4 { margin-right: var(--space-4)!important; } .pr-4 { padding-right: var(--space-4)!important; }
.mr-6 { margin-right: var(--space-6)!important; } .pr-6 { padding-right: var(--space-6)!important; }
.mr-8 { margin-right: var(--space-8)!important; } .pr-8 { padding-right: var(--space-8)!important; }
.mr-12 { margin-right: var(--space-12)!important; } .pr-12 { padding-right: var(--space-12)!important; }
.mr-16 { margin-right: var(--space-16)!important; } .pr-16 { padding-right: var(--space-16)!important; }

/* == Tipografía == */
.text-2xs { font-size: var(--font-size-2xs)!important; }  /* 10px */
.text-xs { font-size: var(--font-size-xs)!important; }    /* 12px */
.text-sm { font-size: var(--font-size-sm); }    /* 14px */
.text-base { font-size: var(--font-size-base)!important; }    /* 15px -> 16px */
.text-lg { font-size: var(--font-size-lg)!important; }    /* 16px -> 18px */
.text-xl { font-size: var(--font-size-xl)!important; }    /* 18px -> 20px */
.text-2xl { font-size: var(--font-size-2xl); }  /* 20px -> 24px */
.text-3xl { font-size: var(--font-size-3xl); }  /* 24px -> 30px */
.text-4xl { font-size: var(--font-size-4xl); }  /* 28px -> 36px */
.text-5xl { font-size: var(--font-size-5xl); }  /* 36px -> 48px */
    

.font-regular { font-weight: var(--font-weight-regular)!important; }
.font-medium { font-weight: var(--font-weight-medium)!important; }
.font-semibold { font-weight: var(--font-weight-semibold)!important; }
.font-bold { font-weight: var(--font-weight-bold)!important; }
.font-bolder { font-weight: bolder!important; }
.font-black { font-weight: var(--font-weight-black)!important; }

.font-family-archivo { font-family: var(--font-primary)!important; }
.font-family-sora { font-family: var(--font-secondary)!important; }
.font-family-dm-serif { font-family: var(--font-headings)!important; }
.font-family-roboto-mono { font-family: var(--font-monospace)!important; }

.text-primary { color: var(--clr-text-primary); }
.text-secondary { color: var(--clr-text-secondary); }
.text-danger { color: var(--clr-danger); }
.text-success { color: var(--clr-success); }
.text-info { color: var(--clr-info); }
.text-success-dark { color: var(--clr-success-dark); }
.text-danger-dark { color: var(--clr-danger-dark); }
.text-info-dark { color: var(--clr-info-dark); }
.text-warning-dark { color: var(--clr-warning-dark); }
.text-color-headings { color: var(--clr-navy-900)!important; }
.text-navy-900 { color: var(--clr-azure-09)!important; }
.text-navy-800 { color: var(--clr-azure-19)!important; }
.text-navy-700 { color: var(--clr-azure-42)!important; }
.text-navy-600 { color: var(--clr-azure-44)!important; }
.text-navy-500 { color: var(--clr-azure-46)!important; }
.text-navy-450 { color: var(--clr-navy-500)!important; }
.text-navy-400 { color: var(--clr-azure-70)!important; }
.text-navy-300 { color: var(--clr-azure-80)!important; }
.text-navy-200 { color: var(--clr-azure-85)!important; }
.text-navy-100 { color: var(--clr-azure-89)!important; }
.text-azure-700 {color:var(--clr-navy-700);}
.text-blue-brand { color: var(--clr-blue-brand); }
.text-blue-light { color: var(--clr-blue-light-bg); }
.text-grey-95 { color: var(--clr-grey-95); }
.text-grey-65 { color: var(--clr-grey-65); }
.text-grey-50 { color: var(--clr-grey-50); }
.text-grey-40 { color: var(--clr-grey-40); }
.text-grey-20 { color: var(--clr-grey-20); }
.text-white {color:white!important;}
.text-cyan-primary { color:var(--clr-cyan-47)!important; }


/* == Fondos == */
.bg-success { background-color: var(--clr-success); }
.bg-success-light { background-color: var(--clr-success-light); }
.bg-success-dark { background-color: var(--clr-success-dark); }
.bg-danger { background-color: var(--clr-danger); }
.bg-danger-light { background-color: var(--clr-danger-light); }
.bg-danger-dark { background-color: var(--clr-danger-dark); }
.bg-info-light { background-color: var(--clr-info-light); }
.bg-warning { background-color: var(--clr-warning); }
.bg-warning-light { background-color: var(--clr-warning-light); }
.bg-warning-dark { background-color: var(--clr-warning-dark); }

/* Border colors */

.border-navy-300 { border-color:var(--clr-azure-80); }

/* Clases de Fondos Comunes (Nuevo) */
.bg-white { background-color: var(--clr-white); }
.bg-navy-900 { background-color: var(--clr-navy-900); }
.bg-navy-800 { background-color: var(--clr-navy-800); }
.bg-navy-700 { background-color: var(--clr-navy-700); }
.bg-navy-600 { background-color: var(--clr-navy-600); }
.bg-navy-500 { background-color: var(--clr-navy-500); }
.bg-navy-400 { background-color: var(--clr-navy-400); }
.bg-navy-200 { background-color: var(--clr-azure-85); }
.bg-navy-100 { background-color: var(--clr-azure-89); }
.bg-azure-95 { background-color: var(--clr-azure-95); }
.bg-azure-99 { background-color: var(--clr-azure-99); }
.bg-azure-19 { background-color: var(--clr-azure-19); }
.bg-azure-09 { background-color: var(--clr-azure-09); }
.bg-blue-brand { background-color: var(--clr-blue-brand); }
.bg-blue-light { background-color: var(--clr-blue-light-bg); }
.bg-grey-95 { background-color: var(--clr-grey-95); }
.bg-transparent { background-color: transparent; }

/* == Bordes y Sombras == */
.rounded-sm { border-radius: var(--border-radius-sm)!important; }
.rounded-md { border-radius: var(--border-radius-md)!important; }
.rounded-lg { border-radius: var(--border-radius-lg)!important; }
.rounded-xl { border-radius: var(--border-radius-xl)!important; }
.rounded-full { border-radius: var(--border-radius-full)!important; }

.shadow-sm { box-shadow: var(--shadow-sm)!important; }
.shadow-md { box-shadow: var(--shadow-md)!important; }
.shadow-lg { box-shadow: var(--shadow-lg)!important; }

.btn-accent {
  --bs-btn-color: #ffffff;
  --bs-btn-bg: var(--clr-cyan-47);
  --bs-btn-border-color: var(--clr-cyan-47);
  
  --bs-btn-hover-color: #ffffff;
  --bs-btn-hover-bg: var(--clr-azure-19);
  --bs-btn-hover-border-color: var(--clr-azure-19);
  
  --bs-btn-focus-shadow-rgb: 0, 175, 233;
  
  --bs-btn-active-color: #ffffff;
  --bs-btn-active-bg: var(--clr-azure-09);
  --bs-btn-active-border-color: var(--clr-azure-09);
  

  --bs-btn-disabled-color: #ffffff;
  --bs-btn-disabled-bg: var(--clr-grey-75);
  --bs-btn-disabled-border-color: var(--clr-grey-75);
}

.opacity-10 {
  opacity: 0.1 !important;
}

/* ----------------------------------------------------------------
5. Clases de Interacción y Efectos (Corregido para Bootstrap)
----------------------------------------------------------------
*/

/* == Transiciones == */
.transition {
    transition-property: var(--transition-property-common);
    transition-timing-function: var(--transition-timing-function-ease);
    transition-duration: var(--transition-duration-fast);
}
.transition-normal {
    transition-property: var(--transition-property-common);
    transition-timing-function: var(--transition-timing-function-ease);
    transition-duration: var(--transition-duration-normal);
}

/* == Transformaciones == */
/* Añade estas clases a un elemento (junto con .transition) para habilitar el efecto en hover */
.hover-scale-102,
.hover-scale-97,
.hover-translate-y-sm { transition:transform .2s ease}
.hover-scale-102:hover { transform: scale(var(--transform-scale-lg)); }
.hover-scale-97:hover { transform: scale(99%); }
.hover-translate-y-sm:hover { transform: translateY(var(--transform-translate-y-sm)); }
.hover-shadow-lg:hover { box-shadow: var(--shadow-lg); }

/* Para un efecto de "click" o "presionado" */
.active-scale-98:active { transform: scale(var(--transform-scale-sm)); }

/* == Filtros == */
.filter-grayscale { filter: grayscale(100%); }
.hover-filter-grayscale-0:hover { filter: grayscale(0%); }
.hover-brightness-105:hover { filter: brightness(1.05); }

/* == Opacidad == */
.opacity-50 { opacity: 0.5; }
.opacity-75 { opacity: 0.75; }
.hover-opacity-75:hover { opacity: 0.75; }

/* == Cursor == */
.cursor-pointer { cursor: pointer; }
.cursor-not-allowed { cursor: not-allowed; }
.cursor-help { cursor: help; }

/* == Anillo de Foco (Accesibilidad) == */
/* Aplicar a botones, enlaces e inputs para un feedback claro al navegar con teclado */
.focus-ring:focus-visible {
    outline: 2px solid transparent;
    outline-offset: 2px;
    box-shadow: 0 0 0 3px var(--clr-info-light);
}


.p-5 {padding:var(--space-5)!important}
.px-5 {padding-left:var(--space-5)!important; padding-right:var(--space-5)!important}

.text-not-uppercase {
  text-transform: none!important;
}

.gap-3 { gap: var(--space-3)!important; }
.gap-4 { gap: var(--space-4)!important; }
.gap-5 { gap: var(--space-5)!important; }
.gap-8 { gap: var(--space-8)!important; }
.gap-12 { gap: var(--space-12)!important; }
.gap-16 { gap: var(--space-16)!important; }
.gap-20 { gap: var(--space-20)!important; }


/* Typography classes for marketing pages */

/* Display 1: 64pt (4rem) Base */
.type-display-1 { font-family: var(--font-headings); font-size: clamp(3.4rem, 5vw + 1rem, 4.25rem); letter-spacing: -.0425rem; line-height: 1.1;}

/* H1: 46pt (2.875rem) Base */
.type-h1 { font-family: var(--font-headings); font-size: clamp(2.44rem, 3vw + 1rem, 3.16rem); line-height: 1.2;}

/* H2: 32pt (2rem) Base */
.type-h2 { font-family: var(--font-headings); font-size: clamp(1.7rem, 2vw + 1rem, 2.2rem); line-height: 1.25;}

/* H3: 28pt (1.75rem) Base */
.type-h3 { font-family: var(--font-headings); font-size: clamp(1.48rem, 1.5vw + 1rem, 1.92rem); line-height: 1.3;}

/* H4: 24pt (1.5rem) Base */
.type-h4 { font-family: var(--font-headings); font-size: clamp(1.275rem, 1vw + 1rem, 1.65rem); line-height: 1.2;}

/* H5: 20pt (1.25rem) Base */
.type-h5 { font-family: var(--font-headings); font-size: clamp(1.06rem, 0.5vw + 1rem, 1.375rem); line-height: 1.4;}

/* H6: 18pt (1.125rem) Base */
.type-h6 { font-family: var(--font-headings); font-size: clamp(0.95rem, 0.5vw + 1rem, 1.23rem); line-height: 1.4;}

/* Body Lg: 16pt (1rem) / Sora */
.type-body-lg { font-family: var(--font-secondary); font-size: 1rem; line-height: 1.2;}

/* Subhead: 16pt (1rem) / Uppercase */
.type-subhead { font-family: var(--font-secondary); font-size: 1rem; text-transform: uppercase; letter-spacing: 0.05em; font-weight: 600; line-height:105%!important;}
/* Subhead: 12pt (.75rem) / Uppercase */
.type-subhead-sm { font-family: var(--font-secondary); font-size: .75rem; text-transform: uppercase; letter-spacing: 0.05em; font-weight: 600; line-height:100%!important;}

/* Body Sm: 12pt (0.75rem) */
.type-body-sm { font-family: var(--font-secondary);  font-size: 0.75rem; line-height: 1.5;}

/* H4 Alt: 24pt (1.5rem) / Sora */
.type-h4-alt { font-family: var(--font-secondary); font-size: clamp(1.275rem, 1vw + 1rem, 1.65rem); font-weight: 700;}

/* H5: 20pt (1.25rem) / Sora */
.type-h5-alt { font-family: var(--font-secondary); font-size: clamp(1.06rem, 0.5vw + 1rem, 1.375rem); line-height: 1.4;}

/* H6: 18pt (1.125rem) / Sora */
.type-h6-alt { font-family: var(--font-secondary); font-size: clamp(0.95rem, 0.5vw + 1rem, 1.23rem); line-height: 1.4;}

/* Body Lg Alt: 16pt (1rem) / DM Serif */
.type-body-lg-alt { font-family: var(--font-headings); font-size: 1rem;}

/* Button Sm: 16pt (1rem) / Archivo */
.type-btn-sm { font-family: var(--font-primary); font-size: 0.9rem; /* Adjusted slightly for UI balance */ font-weight: 600; text-transform: uppercase;  letter-spacing: 0.03em;}

/* Button Sm Alt: 16pt (1rem) / Sora */
.type-btn-sm-alt { font-family: var(--font-secondary); font-size: 0.9rem; font-weight: 600; text-transform: uppercase;}

.text-lowercase { text-transform: initial!important; }
.letter-spacing-0 { letter-spacing:0; }
.letter-spacing-sm { letter-spacing:.5%; }
.letter-spacing-md { letter-spacing:1%; }
.letter-spacing-lg { letter-spacing:2%; }

h1, h2, h3, h4, h5, h6 { line-height:120%; }

.min-h-100vh { min-height:calc(100dvh - 15.94rem); }

.form-control {
    border-radius: initial;
    font-size: 1rem;

    input&,
    select& {
        min-height:2rem;
    }
    
}

/* Style for Read-Only Text Inputs */
input[readonly],
input[type="text"][readonly] {
    color: #495057;            /* Keep text readable (dark grey) */
    cursor: default;           /* Shows standard arrow instead of text beam */
    opacity: 1;                /* Prevents iOS from overriding opacity */
    border-color: #ced4da;     /* Standard border color */
}

/* Optional: Remove focus ring so it doesn't look clickable */
input[readonly]:focus,
input[type="text"][readonly]:focus {
    box-shadow: none!important;
    border: 1px solid #ced4da!important;
    background-color: initial!important;
}

.btn-sm {
    font-size: var(--font-size-sm)!important;
}

html {
    scroll-margin-top: 5.2rem!important;
}