/* Minification failed. Returning unminified contents.
(19,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(20,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(21,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(22,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(23,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(24,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(25,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(26,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(27,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(28,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(29,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(30,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(31,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(32,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(33,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(34,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(35,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(36,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(37,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(38,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(39,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(40,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(41,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(42,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(43,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(44,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(45,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(46,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(47,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(48,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(49,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(50,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(51,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(52,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(53,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(54,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(55,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(56,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(57,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(58,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(59,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(60,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(61,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(62,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(63,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(64,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(65,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(66,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(67,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(68,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(69,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(70,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(71,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(72,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(73,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(74,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(75,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(76,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(77,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(78,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(79,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(80,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(81,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(82,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(83,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(84,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(85,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(86,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(87,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(88,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(89,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(90,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(91,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(92,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(93,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(94,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(95,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(96,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(97,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(98,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(99,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(100,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(101,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(102,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(103,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(104,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(105,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(106,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(107,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(108,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(109,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(110,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(111,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(112,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(113,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(114,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(115,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(116,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(117,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(118,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(119,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(120,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(121,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(122,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(123,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(124,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(125,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(126,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(127,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(128,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(129,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(130,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(131,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(132,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(133,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(134,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(135,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(136,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(137,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(138,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(139,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(140,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(141,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(142,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(143,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(144,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(145,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(146,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(147,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(148,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(149,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(150,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(151,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(152,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(153,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(154,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(155,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(156,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(160,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(161,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(162,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(163,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(164,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(165,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(166,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(167,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(168,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(169,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(170,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(171,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(172,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(173,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(174,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(175,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(176,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(177,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(178,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(179,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(180,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(181,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(182,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(183,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(184,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(185,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(186,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(187,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(188,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(189,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(190,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(191,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(192,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(193,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(194,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(195,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(196,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(197,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(198,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(199,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(200,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(201,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(202,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(203,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(204,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(205,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(206,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(207,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(208,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(209,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(210,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(211,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(212,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(213,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(214,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(215,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(216,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(217,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(218,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(219,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(220,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(221,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(222,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(223,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(224,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(225,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(226,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(227,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(228,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(229,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(230,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(231,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(232,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(233,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(234,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(235,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(236,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(237,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(238,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(239,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(240,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(241,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(242,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(243,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(244,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(245,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(246,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(247,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(248,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(249,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(250,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(251,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(252,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(253,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(254,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(255,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(256,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(257,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(258,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(259,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(260,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(261,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(262,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(263,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(264,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(265,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(266,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(267,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(268,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(269,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(270,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(271,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(272,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(273,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(274,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(275,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(276,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(277,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(278,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(279,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(280,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(281,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(282,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(283,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(284,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(285,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(286,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(287,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(288,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(289,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(290,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(291,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(292,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(293,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(294,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(295,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(296,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(297,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(298,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(299,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(300,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(301,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(302,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(303,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(304,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(305,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(306,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(307,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(308,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(309,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(310,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(311,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(312,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(313,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(314,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(315,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(316,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(317,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(318,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(319,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(320,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(321,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(322,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(323,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(324,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(325,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(326,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(327,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(328,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(329,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(330,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(331,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(332,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(333,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(334,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(335,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(467,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(474,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(475,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(476,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(477,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(478,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(479,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(480,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(481,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(482,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(483,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(484,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(485,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(486,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(487,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(506,15): run-time error CSS1039: Token not allowed after unary operator: '-text-gray'
(507,20): run-time error CSS1039: Token not allowed after unary operator: '-bg-gray-90c'
(512,19): run-time error CSS1039: Token not allowed after unary operator: '-black'
(520,15): run-time error CSS1039: Token not allowed after unary operator: '-text-link'
(524,17): run-time error CSS1039: Token not allowed after unary operator: '-text-link-active-extra-dark'
(537,28): run-time error CSS1039: Token not allowed after unary operator: '-focus-outline'
(575,15): run-time error CSS1039: Token not allowed after unary operator: '-text-gray'
(576,20): run-time error CSS1039: Token not allowed after unary operator: '-bg-white'
(628,15): run-time error CSS1039: Token not allowed after unary operator: '-text-light-gray'
(639,15): run-time error CSS1039: Token not allowed after unary operator: '-text-light-gray'
(650,15): run-time error CSS1039: Token not allowed after unary operator: '-text-light-gray'
(661,15): run-time error CSS1039: Token not allowed after unary operator: '-text-light-gray'
(845,15): run-time error CSS1039: Token not allowed after unary operator: '-text-gray'
(859,36): run-time error CSS1039: Token not allowed after unary operator: '-border-gray-80'
(1223,15): run-time error CSS1039: Token not allowed after unary operator: '-text-light-gray'
(1232,15): run-time error CSS1039: Token not allowed after unary operator: '-text-gray-35'
(1242,15): run-time error CSS1039: Token not allowed after unary operator: '-text-gray-35'
(1257,15): run-time error CSS1039: Token not allowed after unary operator: '-text-white'
(1266,15): run-time error CSS1039: Token not allowed after unary operator: '-text-white-opacity-85'
(1275,15): run-time error CSS1039: Token not allowed after unary operator: '-text-primary'
(1280,15): run-time error CSS1039: Token not allowed after unary operator: '-text-link'
(1284,17): run-time error CSS1039: Token not allowed after unary operator: '-text-link-dark'
(1290,15): run-time error CSS1039: Token not allowed after unary operator: '-text-link-active-extra-dark'
(1295,33): run-time error CSS1039: Token not allowed after unary operator: '-border-light-gray'
(1307,15): run-time error CSS1039: Token not allowed after unary operator: '-text-link-active-extra-dark'
(1312,33): run-time error CSS1039: Token not allowed after unary operator: '-border-med-gray'
(1313,15): run-time error CSS1039: Token not allowed after unary operator: '-text-link-dark'
(1328,15): run-time error CSS1039: Token not allowed after unary operator: '-text-gray'
(1337,15): run-time error CSS1039: Token not allowed after unary operator: '-text-med-gray'
(1346,15): run-time error CSS1039: Token not allowed after unary operator: '-text-white-opacity-70'
(1355,15): run-time error CSS1039: Token not allowed after unary operator: '-text-light-gray'
(1364,15): run-time error CSS1039: Token not allowed after unary operator: '-text-white-opacity-50'
(1373,15): run-time error CSS1039: Token not allowed after unary operator: '-text-faint-gray'
(1382,15): run-time error CSS1039: Token not allowed after unary operator: '-text-error'
(1385,15): run-time error CSS1039: Token not allowed after unary operator: '-text-error'
(1394,15): run-time error CSS1039: Token not allowed after unary operator: '-text-success'
(1397,15): run-time error CSS1039: Token not allowed after unary operator: '-text-success'
(1406,15): run-time error CSS1039: Token not allowed after unary operator: '-text-warn'
(1409,15): run-time error CSS1039: Token not allowed after unary operator: '-text-warn'
(1418,15): run-time error CSS1039: Token not allowed after unary operator: '-text-info'
(1426,17): run-time error CSS1039: Token not allowed after unary operator: '-text-link-dark'
(1429,15): run-time error CSS1039: Token not allowed after unary operator: '-text-info'
(1441,15): run-time error CSS1039: Token not allowed after unary operator: '-text-white'
(1445,26): run-time error CSS1039: Token not allowed after unary operator: '-bg-error'
(1448,26): run-time error CSS1039: Token not allowed after unary operator: '-bg-warn'
(1451,26): run-time error CSS1039: Token not allowed after unary operator: '-bg-info'
(1453,28): run-time error CSS1039: Token not allowed after unary operator: '-bg-info-light'
(1456,26): run-time error CSS1039: Token not allowed after unary operator: '-bg-faint-gray'
(1459,26): run-time error CSS1039: Token not allowed after unary operator: '-bg-light-gray'
(1462,26): run-time error CSS1039: Token not allowed after unary operator: '-bg-med-gray'
(1465,26): run-time error CSS1039: Token not allowed after unary operator: '-bg-gray'
(1467,28): run-time error CSS1039: Token not allowed after unary operator: '-bg-dark-gray'
(1470,26): run-time error CSS1039: Token not allowed after unary operator: '-bg-white'
(1473,26): run-time error CSS1039: Token not allowed after unary operator: '-bg-dark-gray'
(1476,26): run-time error CSS1039: Token not allowed after unary operator: '-bg-success'
(1479,31): run-time error CSS1039: Token not allowed after unary operator: '-border-error'
(1482,31): run-time error CSS1039: Token not allowed after unary operator: '-border-success'
(1485,31): run-time error CSS1039: Token not allowed after unary operator: '-border-warn'
(1488,31): run-time error CSS1039: Token not allowed after unary operator: '-border-info'
(1517,28): run-time error CSS1039: Token not allowed after unary operator: '-bg-gray-34'
(1518,25): run-time error CSS1039: Token not allowed after unary operator: '-focus-outline-white-opacity-70'
(1519,17): run-time error CSS1039: Token not allowed after unary operator: '-text-white'
(1532,28): run-time error CSS1039: Token not allowed after unary operator: '-border-light-gray'
(1541,26): run-time error CSS1039: Token not allowed after unary operator: '-box-shadow-no-opacity'
(1542,30): run-time error CSS1039: Token not allowed after unary operator: '-box-shadow'
(1545,40): run-time error CSS1039: Token not allowed after unary operator: '-filter-drop-shadow'
(2360,30): run-time error CSS1039: Token not allowed after unary operator: '-border-light-gray'
(2361,33): run-time error CSS1039: Token not allowed after unary operator: '-border-white'
(2376,28): run-time error CSS1039: Token not allowed after unary operator: '-border-gray-87'
(2377,31): run-time error CSS1039: Token not allowed after unary operator: '-border-light-gray'
(2379,28): run-time error CSS1039: Token not allowed after unary operator: '-border-gray-90'
(2380,31): run-time error CSS1039: Token not allowed after unary operator: '-border-faint-gray'
(4087,28): run-time error CSS1039: Token not allowed after unary operator: '-border-light-gray'
(4090,37): run-time error CSS1039: Token not allowed after unary operator: '-border-light-gray'
(4188,22): run-time error CSS1039: Token not allowed after unary operator: '-border-light-gray'
(4198,30): run-time error CSS1039: Token not allowed after unary operator: '-bg-faint-gray'
(4208,24): run-time error CSS1039: Token not allowed after unary operator: '-border-white-opacity-20'
(4212,24): run-time error CSS1039: Token not allowed after unary operator: '-border-gray-90'
(5793,31): run-time error CSS1039: Token not allowed after unary operator: '-border-gray-87'
(5794,32): run-time error CSS1039: Token not allowed after unary operator: '-border-gray-87'
(5796,32): run-time error CSS1039: Token not allowed after unary operator: '-border-gray-87'
(5798,35): run-time error CSS1039: Token not allowed after unary operator: '-border-gray-87'
(5853,34): run-time error CSS1039: Token not allowed after unary operator: '-border-gray-87'
(5859,28): run-time error CSS1039: Token not allowed after unary operator: '-border-gray-87'
(5863,37): run-time error CSS1039: Token not allowed after unary operator: '-border-gray-87'
(5940,26): run-time error CSS1039: Token not allowed after unary operator: '-bg-gray-45'
(5941,15): run-time error CSS1039: Token not allowed after unary operator: '-text-white'
(5989,29): run-time error CSS1039: Token not allowed after unary operator: '-transition-duration'
(5995,29): run-time error CSS1039: Token not allowed after unary operator: '-transition-duration'
(6000,29): run-time error CSS1039: Token not allowed after unary operator: '-transition-duration'
(6021,28): run-time error CSS1039: Token not allowed after unary operator: '-bg-gray-70'
(6023,28): run-time error CSS1039: Token not allowed after unary operator: '-bg-gray-90'
(6139,28): run-time error CSS1039: Token not allowed after unary operator: '-border-gray-87'
(6178,20): run-time error CSS1039: Token not allowed after unary operator: '-bg-primary'
(6179,26): run-time error CSS1039: Token not allowed after unary operator: '-border-primary'
(6189,17): run-time error CSS1039: Token not allowed after unary operator: '-text-white'
(6192,28): run-time error CSS1039: Token not allowed after unary operator: '-border-primary'
(6200,19): run-time error CSS1039: Token not allowed after unary operator: '-text-primary'
(6203,28): run-time error CSS1039: Token not allowed after unary operator: '-border-white-opacity-90'
(6211,19): run-time error CSS1039: Token not allowed after unary operator: '-text-white-opacity-95'
(6261,35): run-time error CSS1039: Token not allowed after unary operator: '-box-shadow'
(6275,17): run-time error CSS1039: Token not allowed after unary operator: '-text-light-gray'
(6283,30): run-time error CSS1039: Token not allowed after unary operator: '-bg-faint-gray'
(6286,26): run-time error CSS1039: Token not allowed after unary operator: '-border-gray-87'
(6306,26): run-time error CSS1039: Token not allowed after unary operator: '-bg-white'
(6307,26): run-time error CSS1039: Token not allowed after unary operator: '-border-gray-87'
(6308,30): run-time error CSS1039: Token not allowed after unary operator: '-border-gray-34'
(6310,28): run-time error CSS1039: Token not allowed after unary operator: '-border-success'
(6312,28): run-time error CSS1039: Token not allowed after unary operator: '-border-warn'
(6314,28): run-time error CSS1039: Token not allowed after unary operator: '-border-info'
(6316,28): run-time error CSS1039: Token not allowed after unary operator: '-border-error'
(6319,34): run-time error CSS1039: Token not allowed after unary operator: '-border-gray-87'
(6320,35): run-time error CSS1039: Token not allowed after unary operator: '-border-gray-34'
(6322,36): run-time error CSS1039: Token not allowed after unary operator: '-border-gray-87'
(6323,33): run-time error CSS1039: Token not allowed after unary operator: '-border-success'
(6325,36): run-time error CSS1039: Token not allowed after unary operator: '-border-gray-87'
(6326,33): run-time error CSS1039: Token not allowed after unary operator: '-border-warn'
(6328,36): run-time error CSS1039: Token not allowed after unary operator: '-border-gray-87'
(6329,33): run-time error CSS1039: Token not allowed after unary operator: '-border-info'
(6331,36): run-time error CSS1039: Token not allowed after unary operator: '-border-gray-87'
(6332,33): run-time error CSS1039: Token not allowed after unary operator: '-border-error'
(6570,26): run-time error CSS1039: Token not allowed after unary operator: '-bg-primary'
(6571,26): run-time error CSS1039: Token not allowed after unary operator: '-border-primary'
(6576,15): run-time error CSS1039: Token not allowed after unary operator: '-text-white'
(6586,17): run-time error CSS1039: Token not allowed after unary operator: '-text-white'
(6587,28): run-time error CSS1039: Token not allowed after unary operator: '-border-primary-dark'
(6588,28): run-time error CSS1039: Token not allowed after unary operator: '-border-primary-dark'
(6599,26): run-time error CSS1039: Token not allowed after unary operator: '-bg-gray-44'
(6600,26): run-time error CSS1039: Token not allowed after unary operator: '-border-gray-44'
(6605,15): run-time error CSS1039: Token not allowed after unary operator: '-text-white'
(6615,17): run-time error CSS1039: Token not allowed after unary operator: '-text-white'
(6616,28): run-time error CSS1039: Token not allowed after unary operator: '-bg-gray-34'
(6617,28): run-time error CSS1039: Token not allowed after unary operator: '-border-gray-34'
(6629,26): run-time error CSS1039: Token not allowed after unary operator: '-border-med-gray'
(6634,15): run-time error CSS1039: Token not allowed after unary operator: '-text-med-gray'
(6644,17): run-time error CSS1039: Token not allowed after unary operator: '-text-gray'
(6645,28): run-time error CSS1039: Token not allowed after unary operator: '-bg-faint-gray'
(6646,28): run-time error CSS1039: Token not allowed after unary operator: '-border-gray'
(6659,26): run-time error CSS1039: Token not allowed after unary operator: '-button-disabled-background'
(6660,16): run-time error CSS1039: Token not allowed after unary operator: '-button-disabled-border'
(6665,15): run-time error CSS1039: Token not allowed after unary operator: '-button-disabled-text'
(6675,17): run-time error CSS1039: Token not allowed after unary operator: '-button-disabled-text'
(6680,30): run-time error CSS1039: Token not allowed after unary operator: '-focus-outline-gray'
(6705,15): run-time error CSS1039: Token not allowed after unary operator: '-text-link'
(6715,17): run-time error CSS1039: Token not allowed after unary operator: '-text-link-active-extra-dark'
(6718,17): run-time error CSS1039: Token not allowed after unary operator: '-text-med-gray'
(6728,17): run-time error CSS1039: Token not allowed after unary operator: '-text-light-gray'
(6731,17): run-time error CSS1039: Token not allowed after unary operator: '-text-light-gray'
(6741,17): run-time error CSS1039: Token not allowed after unary operator: '-text-med-gray'
(6745,28): run-time error CSS1039: Token not allowed after unary operator: '-bg-faint-gray'
(6748,30): run-time error CSS1039: Token not allowed after unary operator: '-focus-outline'
(6775,28): run-time error CSS1039: Token not allowed after unary operator: '-border-gray-34'
(6781,17): run-time error CSS1039: Token not allowed after unary operator: '-text-gray-34'
(6785,17): run-time error CSS1039: Token not allowed after unary operator: '-text-white'
(6786,28): run-time error CSS1039: Token not allowed after unary operator: '-bg-gray-34'
(6787,34): run-time error CSS1039: Token not allowed after unary operator: '-border-gray-34'
(6799,26): run-time error CSS1039: Token not allowed after unary operator: '-border-white'
(6804,15): run-time error CSS1039: Token not allowed after unary operator: '-text-white'
(6814,17): run-time error CSS1039: Token not allowed after unary operator: '-text-gray-34'
(6815,28): run-time error CSS1039: Token not allowed after unary operator: '-bg-white'
(6816,28): run-time error CSS1039: Token not allowed after unary operator: '-border-white'
(6920,30): run-time error CSS1039: Token not allowed after unary operator: '-border-gray-85'
(6943,26): run-time error CSS1039: Token not allowed after unary operator: '-border-med-gray'
(6946,30): run-time error CSS1039: Token not allowed after unary operator: '-bg-primary'
(6947,30): run-time error CSS1039: Token not allowed after unary operator: '-border-primary'
(6951,15): run-time error CSS1039: Token not allowed after unary operator: '-text-med-gray'
(6955,19): run-time error CSS1039: Token not allowed after unary operator: '-text-white'
(6965,17): run-time error CSS1039: Token not allowed after unary operator: '-text-gray'
(6966,28): run-time error CSS1039: Token not allowed after unary operator: '-bg-faint-gray'
(6967,28): run-time error CSS1039: Token not allowed after unary operator: '-border-gray'
(6978,21): run-time error CSS1039: Token not allowed after unary operator: '-text-white'
(6979,32): run-time error CSS1039: Token not allowed after unary operator: '-border-primary-dark'
(6980,32): run-time error CSS1039: Token not allowed after unary operator: '-border-primary-dark'
(7015,15): run-time error CSS1039: Token not allowed after unary operator: '-text-gray-20'
(7031,15): run-time error CSS1039: Token not allowed after unary operator: '-text-gray-34'
(7038,17): run-time error CSS1039: Token not allowed after unary operator: '-text-gray-54'
(7061,33): run-time error CSS1039: Token not allowed after unary operator: '-border-gray-85'
(7072,15): run-time error CSS1039: Token not allowed after unary operator: '-text-gray-20'
(7089,15): run-time error CSS1039: Token not allowed after unary operator: '-text-gray-20'
(7099,17): run-time error CSS1039: Token not allowed after unary operator: '-text-white'
(7101,22): run-time error CSS1039: Token not allowed after unary operator: '-bg-gray-34'
(7104,17): run-time error CSS1039: Token not allowed after unary operator: '-text-gray-45'
(7108,30): run-time error CSS1039: Token not allowed after unary operator: '-border-gray-85'
(7113,15): run-time error CSS1039: Token not allowed after unary operator: '-text-gray-34'
(7118,17): run-time error CSS1039: Token not allowed after unary operator: '-text-gray-54'
(7143,20): run-time error CSS1039: Token not allowed after unary operator: '-bg-white'
(7144,30): run-time error CSS1039: Token not allowed after unary operator: '-box-shadow'
(7161,26): run-time error CSS1039: Token not allowed after unary operator: '-border-gray-80'
(7164,15): run-time error CSS1039: Token not allowed after unary operator: '-text-primary'
(7168,15): run-time error CSS1039: Token not allowed after unary operator: '-text-primary'
(7174,17): run-time error CSS1039: Token not allowed after unary operator: '-text-primary-active-extra-dark'
(7177,15): run-time error CSS1039: Token not allowed after unary operator: '-text-gray-38'
(7181,15): run-time error CSS1039: Token not allowed after unary operator: '-text-gray-38'
(7188,17): run-time error CSS1039: Token not allowed after unary operator: '-text-white'
(7189,22): run-time error CSS1039: Token not allowed after unary operator: '-bg-primary-extra-dark'
(7192,22): run-time error CSS1039: Token not allowed after unary operator: '-bg-gray-88'
(7195,17): run-time error CSS1039: Token not allowed after unary operator: '-text-gray-73'
(7199,17): run-time error CSS1039: Token not allowed after unary operator: '-text-faint-gray'
(7201,19): run-time error CSS1039: Token not allowed after unary operator: '-text-faint-gray'
(7204,17): run-time error CSS1039: Token not allowed after unary operator: '-text-white'
(7206,19): run-time error CSS1039: Token not allowed after unary operator: '-text-white'
(7208,17): run-time error CSS1039: Token not allowed after unary operator: '-text-white'
(7209,22): run-time error CSS1039: Token not allowed after unary operator: '-bg-primary'
(7289,17): run-time error CSS1039: Token not allowed after unary operator: '-text-gray-34'
(7294,19): run-time error CSS1039: Token not allowed after unary operator: '-text-gray'
(7297,19): run-time error CSS1039: Token not allowed after unary operator: '-text-gray'
(7301,19): run-time error CSS1039: Token not allowed after unary operator: '-text-gray'
(7314,33): run-time error CSS1039: Token not allowed after unary operator: '-border-primary'
(7921,31): run-time error CSS1039: Token not allowed after unary operator: '-border-success'
(7923,31): run-time error CSS1039: Token not allowed after unary operator: '-border-warn'
(7925,31): run-time error CSS1039: Token not allowed after unary operator: '-border-error'
(7927,31): run-time error CSS1039: Token not allowed after unary operator: '-border-info'
(7961,15): run-time error CSS1039: Token not allowed after unary operator: '-text-gray'
(8007,26): run-time error CSS1039: Token not allowed after unary operator: '-bg-gray-60'
(8008,15): run-time error CSS1039: Token not allowed after unary operator: '-text-white'
(8047,15): run-time error CSS1039: Token not allowed after unary operator: '-text-gray'
(8050,26): run-time error CSS1039: Token not allowed after unary operator: '-border-gray-80'
(8055,20): run-time error CSS1039: Token not allowed after unary operator: '-bg-white'
(8058,28): run-time error CSS1039: Token not allowed after unary operator: '-focus-outline'
(8090,20): run-time error CSS1039: Token not allowed after unary operator: '-bg-white'
(8092,34): run-time error CSS1039: Token not allowed after unary operator: '-box-shadow-no-opacity'
(8107,33): run-time error CSS1039: Token not allowed after unary operator: '-border-light-gray'
(8117,22): run-time error CSS1039: Token not allowed after unary operator: '-bg-light-gray'
(8118,24): run-time error CSS1039: Token not allowed after unary operator: '-border-white'
(8148,34): run-time error CSS1039: Token not allowed after unary operator: '-border-info-light'
(8151,31): run-time error CSS1039: Token not allowed after unary operator: '-border-gray-60'
(8199,15): run-time error CSS1039: Token not allowed after unary operator: '-text-gray'
(8210,20): run-time error CSS1039: Token not allowed after unary operator: '-bg-white'
(8211,26): run-time error CSS1039: Token not allowed after unary operator: '-border-gray-80'
(8213,34): run-time error CSS1039: Token not allowed after unary operator: '-box-shadow-no-opacity'
(8221,28): run-time error CSS1039: Token not allowed after unary operator: '-focus-outline'
(8228,17): run-time error CSS1039: Token not allowed after unary operator: '-text-gray-60'
(8243,28): run-time error CSS1039: Token not allowed after unary operator: '-border-gray-80'
(8308,26): run-time error CSS1039: Token not allowed after unary operator: '-border-gray-80'
(8381,15): run-time error CSS1039: Token not allowed after unary operator: '-text-light-gray'
(8396,17): run-time error CSS1039: Token not allowed after unary operator: '-text-gray-38'
(8408,15): run-time error CSS1039: Token not allowed after unary operator: '-text-light-gray'
(8504,15): run-time error CSS1039: Token not allowed after unary operator: '-text-light-gray'
(8512,32): run-time error CSS1039: Token not allowed after unary operator: '-border-gray-80'
(8522,17): run-time error CSS1039: Token not allowed after unary operator: '-text-gray-38'
(8569,20): run-time error CSS1039: Token not allowed after unary operator: '-bg-white'
(8572,26): run-time error CSS1039: Token not allowed after unary operator: '-border-gray-87'
(8573,30): run-time error CSS1039: Token not allowed after unary operator: '-box-shadow-level-1'
(8648,22): run-time error CSS1039: Token not allowed after unary operator: '-bg-gray-98'
(8650,30): run-time error CSS1039: Token not allowed after unary operator: '-focus-outline'
(8697,28): run-time error CSS1039: Token not allowed after unary operator: '-focus-outline'
(8727,30): run-time error CSS1039: Token not allowed after unary operator: '-border-light-gray'
(8757,22): run-time error CSS1039: Token not allowed after unary operator: '-border-gray-60'
(8758,52): run-time error CSS1039: Token not allowed after unary operator: '-border-light-gray'
(8758,78): run-time error CSS1039: Token not allowed after unary operator: '-border-light-gray'
(8758,108): run-time error CSS1039: Token not allowed after unary operator: '-bg-white'
(8758,129): run-time error CSS1039: Token not allowed after unary operator: '-bg-white'
(8760,17): run-time error CSS1039: Token not allowed after unary operator: '-text-light-gray'
(8763,22): run-time error CSS1039: Token not allowed after unary operator: '-border-warn'
(8764,52): run-time error CSS1039: Token not allowed after unary operator: '-bg-warn-extra-light'
(8764,80): run-time error CSS1039: Token not allowed after unary operator: '-bg-warn-extra-light'
(8764,112): run-time error CSS1039: Token not allowed after unary operator: '-bg-white'
(8764,133): run-time error CSS1039: Token not allowed after unary operator: '-bg-white'
(8766,17): run-time error CSS1039: Token not allowed after unary operator: '-text-warn'
(8769,22): run-time error CSS1039: Token not allowed after unary operator: '-border-success'
(8770,20): run-time error CSS1039: Token not allowed after unary operator: '-bg-success-extra-light'
(8772,17): run-time error CSS1039: Token not allowed after unary operator: '-text-success'
(8787,15): run-time error CSS1039: Token not allowed after unary operator: '-text-error'
(8791,26): run-time error CSS1039: Token not allowed after unary operator: '-border-error'
(8792,20): run-time error CSS1039: Token not allowed after unary operator: '-bg-white'
(8798,26): run-time error CSS1039: Token not allowed after unary operator: '-border-error'
(8799,20): run-time error CSS1039: Token not allowed after unary operator: '-bg-white'
(8802,26): run-time error CSS1039: Token not allowed after unary operator: '-border-error'
(8813,28): run-time error CSS1039: Token not allowed after unary operator: '-border-error'
(8818,26): run-time error CSS1039: Token not allowed after unary operator: '-border-error'
(8898,26): run-time error CSS1039: Token not allowed after unary operator: '-bg-white'
(8899,26): run-time error CSS1039: Token not allowed after unary operator: '-border-gray-80'
(8964,26): run-time error CSS1039: Token not allowed after unary operator: '-bg-white'
(8984,28): run-time error CSS1039: Token not allowed after unary operator: '-bg-white'
(8985,28): run-time error CSS1039: Token not allowed after unary operator: '-border-gray-80'
(8988,19): run-time error CSS1039: Token not allowed after unary operator: '-text-gray'
(8995,19): run-time error CSS1039: Token not allowed after unary operator: '-text-light-gray'
(9003,28): run-time error CSS1039: Token not allowed after unary operator: '-text-gray-60'
(9019,28): run-time error CSS1039: Token not allowed after unary operator: '-bg-gray-93'
(9024,24): run-time error CSS1039: Token not allowed after unary operator: '-focus-outline'
(9027,48): run-time error CSS1039: Token not allowed after unary operator: '-text-gray-60'
(9030,28): run-time error CSS1039: Token not allowed after unary operator: '-bg-white'
(9031,28): run-time error CSS1039: Token not allowed after unary operator: '-border-gray-80'
(9050,30): run-time error CSS1039: Token not allowed after unary operator: '-bg-faint-gray'
(9051,30): run-time error CSS1039: Token not allowed after unary operator: '-border-gray-80'
(9059,19): run-time error CSS1039: Token not allowed after unary operator: '-text-gray-60'
(9066,21): run-time error CSS1039: Token not allowed after unary operator: '-text-gray'
(9076,24): run-time error CSS1039: Token not allowed after unary operator: '-focus-outline'
(9079,28): run-time error CSS1039: Token not allowed after unary operator: '-bg-faint-gray'
(9090,28): run-time error CSS1039: Token not allowed after unary operator: '-border-gray-80'
(9103,17): run-time error CSS1039: Token not allowed after unary operator: '-text-gray-60'
(9105,17): run-time error CSS1039: Token not allowed after unary operator: '-text-faint-gray'
(9126,28): run-time error CSS1039: Token not allowed after unary operator: '-bg-faint-gray'
(9202,33): run-time error CSS1039: Token not allowed after unary operator: '-border-light-gray'
(9203,30): run-time error CSS1039: Token not allowed after unary operator: '-border-light-gray'
(9205,24): run-time error CSS1039: Token not allowed after unary operator: '-border-white-opacity-20'
(9211,35): run-time error CSS1039: Token not allowed after unary operator: '-border-light-gray'
(9212,32): run-time error CSS1039: Token not allowed after unary operator: '-border-light-gray'
(9392,24): run-time error CSS1039: Token not allowed after unary operator: '-border-light-gray'
(9402,28): run-time error CSS1039: Token not allowed after unary operator: '-border-gray-87'
(9403,28): run-time error CSS1039: Token not allowed after unary operator: '-bg-white'
(9404,22): run-time error CSS1039: Token not allowed after unary operator: '-box-shadow'
(9414,26): run-time error CSS1039: Token not allowed after unary operator: '-border-light-gray'
(9422,26): run-time error CSS1039: Token not allowed after unary operator: '-border-light-gray'
(9429,34): run-time error CSS1039: Token not allowed after unary operator: '-border-light-gray'
(9431,32): run-time error CSS1039: Token not allowed after unary operator: '-border-white-opacity-20'
(9433,32): run-time error CSS1039: Token not allowed after unary operator: '-border-gray-90'
(9526,24): run-time error CSS1039: Token not allowed after unary operator: '-bg-faint-gray'
(9530,35): run-time error CSS1039: Token not allowed after unary operator: '-bg-faint-gray'
(9531,32): run-time error CSS1039: Token not allowed after unary operator: '-border-gray-90'
(9534,24): run-time error CSS1039: Token not allowed after unary operator: '-border-white-opacity-20'
(9535,17): run-time error CSS1039: Token not allowed after unary operator: '-text-white'
(9537,24): run-time error CSS1039: Token not allowed after unary operator: '-border-gray-90'
(9541,28): run-time error CSS1039: Token not allowed after unary operator: '-bg-black-opacity-10'
(9542,17): run-time error CSS1039: Token not allowed after unary operator: '-text-white'
(9545,30): run-time error CSS1039: Token not allowed after unary operator: '-focus-outline-white-opacity-70'
(9566,30): run-time error CSS1039: Token not allowed after unary operator: '-border-light-gray'
(9568,32): run-time error CSS1039: Token not allowed after unary operator: '-border-white'
(9576,33): run-time error CSS1039: Token not allowed after unary operator: '-border-light-gray'
(9578,35): run-time error CSS1039: Token not allowed after unary operator: '-border-white'
(9583,31): run-time error CSS1039: Token not allowed after unary operator: '-border-light-gray'
(9585,33): run-time error CSS1039: Token not allowed after unary operator: '-border-white'
(9588,35): run-time error CSS1039: Token not allowed after unary operator: '-border-light-gray'
(9591,35): run-time error CSS1039: Token not allowed after unary operator: '-border-light-gray'
(9594,35): run-time error CSS1039: Token not allowed after unary operator: '-border-light-gray'
(9597,35): run-time error CSS1039: Token not allowed after unary operator: '-border-light-gray'
(9600,32): run-time error CSS1039: Token not allowed after unary operator: '-border-light-gray'
(9602,34): run-time error CSS1039: Token not allowed after unary operator: '-border-white'
(9605,36): run-time error CSS1039: Token not allowed after unary operator: '-border-light-gray'
(9608,36): run-time error CSS1039: Token not allowed after unary operator: '-border-light-gray'
(9611,36): run-time error CSS1039: Token not allowed after unary operator: '-border-light-gray'
(9614,36): run-time error CSS1039: Token not allowed after unary operator: '-border-light-gray'
(9711,28): run-time error CSS1039: Token not allowed after unary operator: '-border-gray-87'
(9720,24): run-time error CSS1039: Token not allowed after unary operator: '-bg-faint-gray'
(9724,35): run-time error CSS1039: Token not allowed after unary operator: '-border-faint-gray'
(9725,32): run-time error CSS1039: Token not allowed after unary operator: '-border-gray-90'
(9786,30): run-time error CSS1039: Token not allowed after unary operator: '-border-light-gray'
(9922,33): run-time error CSS1039: Token not allowed after unary operator: '-border-gray-88'
(9928,32): run-time error CSS1039: Token not allowed after unary operator: '-border-gray-88'
(9930,35): run-time error CSS1039: Token not allowed after unary operator: '-border-gray-88'
(9931,32): run-time error CSS1039: Token not allowed after unary operator: '-border-gray-88'
(9935,24): run-time error CSS1039: Token not allowed after unary operator: '-bg-gray-54-opacity-35'
(9937,19): run-time error CSS1039: Token not allowed after unary operator: '-bg-primary'
(9941,15): run-time error CSS1039: Token not allowed after unary operator: '-text-gray'
(9945,30): run-time error CSS1039: Token not allowed after unary operator: '-border-gray-88'
(9950,22): run-time error CSS1039: Token not allowed after unary operator: '-bg-gray-54-opacity-25'
(9953,35): run-time error CSS1039: Token not allowed after unary operator: '-border-gray-88'
(9961,22): run-time error CSS1039: Token not allowed after unary operator: '-bg-gray-54-opacity-35'
(9962,17): run-time error CSS1039: Token not allowed after unary operator: '-text-gray'
(9964,22): run-time error CSS1039: Token not allowed after unary operator: '-bg-gray-54-opacity-25'
(9965,17): run-time error CSS1039: Token not allowed after unary operator: '-text-gray'
(9967,25): run-time error CSS1039: Token not allowed after unary operator: '-focus-outline-white-opacity-70'
(10004,17): run-time error CSS1039: Token not allowed after unary operator: '-text-gray-34'
(10010,19): run-time error CSS1039: Token not allowed after unary operator: '-text-gray-45'
(10013,32): run-time error CSS1039: Token not allowed after unary operator: '-border-gray-54'
(10017,34): run-time error CSS1039: Token not allowed after unary operator: '-border-primary'
(10019,28): run-time error CSS1039: Token not allowed after unary operator: '-bg-primary'
(10022,17): run-time error CSS1039: Token not allowed after unary operator: '-text-primary'
(10024,32): run-time error CSS1039: Token not allowed after unary operator: '-border-primary'
(10026,28): run-time error CSS1039: Token not allowed after unary operator: '-bg-primary'
(10033,26): run-time error CSS1039: Token not allowed after unary operator: '-bg-white'
(10034,26): run-time error CSS1039: Token not allowed after unary operator: '-border-gray-54'
(10035,30): run-time error CSS1039: Token not allowed after unary operator: '-bg-white'
(10044,28): run-time error CSS1039: Token not allowed after unary operator: '-bg-primary'
(10061,33): run-time error CSS1039: Token not allowed after unary operator: '-border-gray-85'
(10063,32): run-time error CSS1039: Token not allowed after unary operator: '-border-gray-85'
(10069,33): run-time error CSS1039: Token not allowed after unary operator: '-border-gray-85'
(10071,15): run-time error CSS1039: Token not allowed after unary operator: '-text-gray'
(10076,32): run-time error CSS1039: Token not allowed after unary operator: '-border-gray-88'
(10086,22): run-time error CSS1039: Token not allowed after unary operator: '-bg-gray-54-opacity-35'
(10087,17): run-time error CSS1039: Token not allowed after unary operator: '-text-gray'
(10089,22): run-time error CSS1039: Token not allowed after unary operator: '-bg-gray-54-opacity-25'
(10091,25): run-time error CSS1039: Token not allowed after unary operator: '-focus-outline'
(10138,17): run-time error CSS1039: Token not allowed after unary operator: '-text-gray'
(10140,24): run-time error CSS1039: Token not allowed after unary operator: '-border-gray-85'
(10142,19): run-time error CSS1039: Token not allowed after unary operator: '-text-white'
(10156,19): run-time error CSS1039: Token not allowed after unary operator: '-text-gray-34'
(10157,24): run-time error CSS1039: Token not allowed after unary operator: '-bg-gray-54-opacity-25'
(10160,19): run-time error CSS1039: Token not allowed after unary operator: '-text-gray-34'
(10161,24): run-time error CSS1039: Token not allowed after unary operator: '-bg-gray-54-opacity-25'
(10173,19): run-time error CSS1039: Token not allowed after unary operator: '-text-white'
(10174,24): run-time error CSS1039: Token not allowed after unary operator: '-bg-black-opacity-20'
(10180,33): run-time error CSS1039: Token not allowed after unary operator: '-border-gray-85'
(10200,15): run-time error CSS1039: Token not allowed after unary operator: '-text-gray-34'
(10204,22): run-time error CSS1039: Token not allowed after unary operator: '-bg-gray-54-opacity-35'
(10206,22): run-time error CSS1039: Token not allowed after unary operator: '-bg-gray-54-opacity-25'
(10209,17): run-time error CSS1039: Token not allowed after unary operator: '-text-gray-34'
(10214,30): run-time error CSS1039: Token not allowed after unary operator: '-border-gray-85'
(10218,19): run-time error CSS1039: Token not allowed after unary operator: '-text-gray-34'
(10219,24): run-time error CSS1039: Token not allowed after unary operator: '-bg-gray-54-opacity-35'
(10221,19): run-time error CSS1039: Token not allowed after unary operator: '-text-gray-34'
(10222,24): run-time error CSS1039: Token not allowed after unary operator: '-bg-gray-54-opacity-25'
(10275,20): run-time error CSS1039: Token not allowed after unary operator: '-bg-gray-20-opacity-50'
(10292,22): run-time error CSS1039: Token not allowed after unary operator: '-bg-white'
(10294,32): run-time error CSS1039: Token not allowed after unary operator: '-box-shadow-level-20'
(10320,20): run-time error CSS1039: Token not allowed after unary operator: '-bg-white-opacity-80'
(10327,35): run-time error CSS1039: Token not allowed after unary operator: '-border-gray-87'
(10328,36): run-time error CSS1039: Token not allowed after unary operator: '-border-gray-87'
(10354,30): run-time error CSS1039: Token not allowed after unary operator: '-border-gray-87'
(10371,19): run-time error CSS1039: Token not allowed after unary operator: '-text-primary'
(10385,17): run-time error CSS1039: Token not allowed after unary operator: '-text-light-gray'
(10393,30): run-time error CSS1039: Token not allowed after unary operator: '-bg-faint-gray'
(10436,20): run-time error CSS1039: Token not allowed after unary operator: '-bg-gray-20-opacity-50'
(10463,22): run-time error CSS1039: Token not allowed after unary operator: '-bg-white'
(10465,35): run-time error CSS1039: Token not allowed after unary operator: '-box-shadow-level-20'
(10514,33): run-time error CSS1039: Token not allowed after unary operator: '-border-light-gray'
(10522,17): run-time error CSS1039: Token not allowed after unary operator: '-text-primary'
(10536,15): run-time error CSS1039: Token not allowed after unary operator: '-text-light-gray'
(10544,28): run-time error CSS1039: Token not allowed after unary operator: '-bg-faint-gray'
(10619,26): run-time error CSS1039: Token not allowed after unary operator: '-popover-background'
(10620,34): run-time error CSS1039: Token not allowed after unary operator: '-box-shadow-black-opacity-30'
(10627,15): run-time error CSS1039: Token not allowed after unary operator: '-text-link'
(10645,28): run-time error CSS1039: Token not allowed after unary operator: '-bg-black-opacity-05'
(10646,17): run-time error CSS1039: Token not allowed after unary operator: '-text-link-active-extra-dark'
(10648,28): run-time error CSS1039: Token not allowed after unary operator: '-bg-black-opacity-05'
(10655,17): run-time error CSS1039: Token not allowed after unary operator: '-text-link-active-extra-dark'
(10660,19): run-time error CSS1039: Token not allowed after unary operator: '-text-link-active-extra-dark'
(10669,26): run-time error CSS1039: Token not allowed after unary operator: '-popover-title-background'
(10670,15): run-time error CSS1039: Token not allowed after unary operator: '-text-gray-35'
(10694,28): run-time error CSS1039: Token not allowed after unary operator: '-popover-point-border'
(10702,30): run-time error CSS1039: Token not allowed after unary operator: '-popover-point-border'
(10707,31): run-time error CSS1039: Token not allowed after unary operator: '-popover-point-border'
(10715,29): run-time error CSS1039: Token not allowed after unary operator: '-popover-point-border'
(10739,34): run-time error CSS1039: Token not allowed after unary operator: '-progress-spin-indicator-border-right'
(10739,78): run-time error CSS1039: Token not allowed after unary operator: '-progress-spin-indicator-border-bottom'
(10739,123): run-time error CSS1039: Token not allowed after unary operator: '-progress-spin-indicator-border-left'
(10860,26): run-time error CSS1039: Token not allowed after unary operator: '-uwcu-loading-circle-border'
(10861,22): run-time error CSS1039: Token not allowed after unary operator: '-uwcu-loading-circle-border'
(10868,28): run-time error CSS1039: Token not allowed after unary operator: '-uwcu-loading-circle-inner-border'
(10869,48): run-time error CSS1039: Token not allowed after unary operator: '-uwcu-loading-circle-inner-border'
(10951,26): run-time error CSS1039: Token not allowed after unary operator: '-bg-gray-87'
(10967,28): run-time error CSS1039: Token not allowed after unary operator: '-bg-white'
(10989,15): run-time error CSS1039: Token not allowed after unary operator: '-text-faint-gray'
(11001,17): run-time error CSS1039: Token not allowed after unary operator: '-text-link'
(11024,24): run-time error CSS1039: Token not allowed after unary operator: '-border-info'
(11028,15): run-time error CSS1039: Token not allowed after unary operator: '-text-success'
(11032,22): run-time error CSS1039: Token not allowed after unary operator: '-border-success'
(11036,15): run-time error CSS1039: Token not allowed after unary operator: '-text-warn'
(11040,22): run-time error CSS1039: Token not allowed after unary operator: '-border-warn'
(11044,15): run-time error CSS1039: Token not allowed after unary operator: '-text-primary'
(11048,22): run-time error CSS1039: Token not allowed after unary operator: '-border-primary'
(11052,15): run-time error CSS1039: Token not allowed after unary operator: '-text-white'
(11056,22): run-time error CSS1039: Token not allowed after unary operator: '-border-white'
(11059,26): run-time error CSS1039: Token not allowed after unary operator: '-bg-gray'
(11061,28): run-time error CSS1039: Token not allowed after unary operator: '-bg-dark-gray'
(11063,17): run-time error CSS1039: Token not allowed after unary operator: '-text-gray-80'
(11066,17): run-time error CSS1039: Token not allowed after unary operator: '-text-white'
(11069,26): run-time error CSS1039: Token not allowed after unary operator: '-bg-white'
(11071,28): run-time error CSS1039: Token not allowed after unary operator: '-bg-gray-90'
(11100,36): run-time error CSS1039: Token not allowed after unary operator: '-progress-spin-indicator-border-right'
(11100,80): run-time error CSS1039: Token not allowed after unary operator: '-progress-spin-indicator-border-bottom'
(11100,125): run-time error CSS1039: Token not allowed after unary operator: '-progress-spin-indicator-border-left'
(11165,20): run-time error CSS1039: Token not allowed after unary operator: '-progress-steps-todo-borders-backgrounds'
(11175,28): run-time error CSS1039: Token not allowed after unary operator: '-progress-steps-done-borders-backgrounds'
(11178,30): run-time error CSS1039: Token not allowed after unary operator: '-progress-steps-done-borders-backgrounds'
(11206,26): run-time error CSS1039: Token not allowed after unary operator: '-progress-steps-todo-borders-backgrounds'
(11207,20): run-time error CSS1039: Token not allowed after unary operator: '-progress-steps-todo-borders-backgrounds'
(11214,24): run-time error CSS1039: Token not allowed after unary operator: '-progress-steps-done-borders-backgrounds'
(11215,22): run-time error CSS1039: Token not allowed after unary operator: '-progress-steps-done-borders-backgrounds'
(11218,24): run-time error CSS1039: Token not allowed after unary operator: '-progress-steps-done-borders-backgrounds'
(11219,22): run-time error CSS1039: Token not allowed after unary operator: '-bg-white'
(11225,17): run-time error CSS1039: Token not allowed after unary operator: '-progress-steps-text-todo'
(11230,19): run-time error CSS1039: Token not allowed after unary operator: '-text-primary'
(11233,17): run-time error CSS1039: Token not allowed after unary operator: '-text-white'
(11334,20): run-time error CSS1039: Token not allowed after unary operator: '-bg-light-gray'
(11338,22): run-time error CSS1039: Token not allowed after unary operator: '-bg-info-light'
(11339,46): run-time error CSS1039: Token not allowed after unary operator: '-bg-info-light'
(11339,71): run-time error CSS1039: Token not allowed after unary operator: '-bg-info-dark'
(11341,24): run-time error CSS1039: Token not allowed after unary operator: '-bg-info-dark'
(11342,48): run-time error CSS1039: Token not allowed after unary operator: '-bg-info-dark'
(11342,72): run-time error CSS1039: Token not allowed after unary operator: '-bg-info-darker'
(11353,26): run-time error CSS1039: Token not allowed after unary operator: '-bg-gray-87'
(11356,30): run-time error CSS1039: Token not allowed after unary operator: '-bg-gray-73'
(11358,28): run-time error CSS1039: Token not allowed after unary operator: '-bg-white'
(11361,32): run-time error CSS1039: Token not allowed after unary operator: '-bg-gray-90c'
(11395,17): run-time error CSS1039: Token not allowed after unary operator: '-text-white'
(11397,23): run-time error CSS1039: Token not allowed after unary operator: '-text-shadow'
(11404,28): run-time error CSS1039: Token not allowed after unary operator: '-bg-success'
(11405,30): run-time error CSS1039: Token not allowed after unary operator: '-box-shadow-black-opacity-30'
(11410,34): run-time error CSS1039: Token not allowed after unary operator: '-border-success-dark'
(11438,15): run-time error CSS1039: Token not allowed after unary operator: '-text-primary'
(11446,17): run-time error CSS1039: Token not allowed after unary operator: '-text-white'
(11449,15): run-time error CSS1039: Token not allowed after unary operator: '-text-primary'
(11561,15): run-time error CSS1039: Token not allowed after unary operator: '-text-primary'
(11564,19): run-time error CSS1039: Token not allowed after unary operator: '-text-white'
(11670,27): run-time error CSS1039: Token not allowed after unary operator: '-border-gray-80'
(11693,19): run-time error CSS1039: Token not allowed after unary operator: '-text-gray-34'
(11703,24): run-time error CSS1039: Token not allowed after unary operator: '-bg-white'
(11714,34): run-time error CSS1039: Token not allowed after unary operator: '-box-shadow-black-opacity-50'
(11771,19): run-time error CSS1039: Token not allowed after unary operator: '-text-white'
(11778,30): run-time error CSS1039: Token not allowed after unary operator: '-bg-gray'
(11780,30): run-time error CSS1039: Token not allowed after unary operator: '-bg-dark-gray'
(11783,30): run-time error CSS1039: Token not allowed after unary operator: '-bg-success'
(11785,30): run-time error CSS1039: Token not allowed after unary operator: '-bg-success-dark'
(11825,26): run-time error CSS1039: Token not allowed after unary operator: '-bg-white'
(11826,26): run-time error CSS1039: Token not allowed after unary operator: '-border-gray-85'
(11827,30): run-time error CSS1039: Token not allowed after unary operator: '-box-shadow'
(11886,28): run-time error CSS1039: Token not allowed after unary operator: '-bg-white'
(11887,28): run-time error CSS1039: Token not allowed after unary operator: '-border-gray-85'
(11888,32): run-time error CSS1039: Token not allowed after unary operator: '-box-shadow'
(11893,29): run-time error CSS1039: Token not allowed after unary operator: '-border-light-gray'
(11930,20): run-time error CSS1039: Token not allowed after unary operator: '-bg-gray-34-opacity-90'
(11931,15): run-time error CSS1039: Token not allowed after unary operator: '-text-white'
(11998,15): run-time error CSS1039: Token not allowed after unary operator: '-toggle-text'
(12007,17): run-time error CSS1039: Token not allowed after unary operator: '-text-med-gray'
(12011,17): run-time error CSS1039: Token not allowed after unary operator: '-toggle-pressed-text'
(12023,26): run-time error CSS1039: Token not allowed after unary operator: '-toggle-border'
(12024,26): run-time error CSS1039: Token not allowed after unary operator: '-toggle-background'
(12040,28): run-time error CSS1039: Token not allowed after unary operator: '-bg-light-gray'
(12042,30): run-time error CSS1039: Token not allowed after unary operator: '-focus-outline-gray'
(12046,28): run-time error CSS1039: Token not allowed after unary operator: '-toggle-pressed-border'
(12047,28): run-time error CSS1039: Token not allowed after unary operator: '-toggle-pressed-background'
(12049,19): run-time error CSS1039: Token not allowed after unary operator: '-text-white'
(12050,30): run-time error CSS1039: Token not allowed after unary operator: '-border-success'
(12051,30): run-time error CSS1039: Token not allowed after unary operator: '-bg-success'
(12053,25): run-time error CSS1039: Token not allowed after unary operator: '-focus-outline-white-opacity-70'
(12059,17): run-time error CSS1039: Token not allowed after unary operator: '-toggle-pressed-text'
(12132,26): run-time error CSS1039: Token not allowed after unary operator: '-bg-white'
(12133,26): run-time error CSS1039: Token not allowed after unary operator: '-border-gray-85'
(12134,30): run-time error CSS1039: Token not allowed after unary operator: '-box-shadow-level-1'
(12141,28): run-time error CSS1039: Token not allowed after unary operator: '-bg-gray-60'
(12143,30): run-time error CSS1039: Token not allowed after unary operator: '-bg-info-light'
(12200,15): run-time error CSS1039: Token not allowed after unary operator: '-verifyukey-digit-text'
(12229,15): run-time error CSS1039: Token not allowed after unary operator: '-verifyukey-date-text'
(12404,30): run-time error CSS1039: Token not allowed after unary operator: '-bg-white-opacity-10'
(12411,30): run-time error CSS1039: Token not allowed after unary operator: '-border-light-gray'
(12416,35): run-time error CSS1039: Token not allowed after unary operator: '-border-light-gray'
(12423,28): run-time error CSS1039: Token not allowed after unary operator: '-bg-gray-54-opacity-05'
(12434,15): run-time error CSS1039: Token not allowed after unary operator: '-text-light-gray'
(12439,17): run-time error CSS1039: Token not allowed after unary operator: '-text-gray-35'
(12461,20): run-time error CSS1039: Token not allowed after unary operator: '-bg-white'
(12463,31): run-time error CSS1039: Token not allowed after unary operator: '-border-gray'
(12465,22): run-time error CSS1039: Token not allowed after unary operator: '-bg-success'
(12466,24): run-time error CSS1039: Token not allowed after unary operator: '-border-success'
(12469,15): run-time error CSS1039: Token not allowed after unary operator: '-text-gray'
(12584,28): run-time error CSS1039: Token not allowed after unary operator: '-bg-gray-87'
(12624,33): run-time error CSS1039: Token not allowed after unary operator: '-border-light-gray'
(12630,26): run-time error CSS1039: Token not allowed after unary operator: '-border-white'
(12653,28): run-time error CSS1039: Token not allowed after unary operator: '-bg-faint-gray'
(12655,32): run-time error CSS1039: Token not allowed after unary operator: '-bg-faint-gray'
(12695,20): run-time error CSS1039: Token not allowed after unary operator: '-label-purple'
(12696,15): run-time error CSS1039: Token not allowed after unary operator: '-text-white'
(12697,26): run-time error CSS1039: Token not allowed after unary operator: '-label-purple'
(12700,20): run-time error CSS1039: Token not allowed after unary operator: '-bg-white'
(12701,15): run-time error CSS1039: Token not allowed after unary operator: '-label-purple-text'
(12702,26): run-time error CSS1039: Token not allowed after unary operator: '-label-purple'
(12705,20): run-time error CSS1039: Token not allowed after unary operator: '-bg-success'
(12706,15): run-time error CSS1039: Token not allowed after unary operator: '-label-green-1-text'
(12707,26): run-time error CSS1039: Token not allowed after unary operator: '-border-success'
(12710,20): run-time error CSS1039: Token not allowed after unary operator: '-bg-white'
(12711,15): run-time error CSS1039: Token not allowed after unary operator: '-label-green-2-text'
(12712,26): run-time error CSS1039: Token not allowed after unary operator: '-border-success'
(12715,20): run-time error CSS1039: Token not allowed after unary operator: '-bg-warn'
(12716,15): run-time error CSS1039: Token not allowed after unary operator: '-label-orange-1-text'
(12717,26): run-time error CSS1039: Token not allowed after unary operator: '-border-warn'
(12720,20): run-time error CSS1039: Token not allowed after unary operator: '-bg-white'
(12721,15): run-time error CSS1039: Token not allowed after unary operator: '-label-orange-2-text'
(12722,26): run-time error CSS1039: Token not allowed after unary operator: '-border-warn'
(12725,20): run-time error CSS1039: Token not allowed after unary operator: '-bg-info'
(12726,15): run-time error CSS1039: Token not allowed after unary operator: '-label-blue-1-text'
(12727,26): run-time error CSS1039: Token not allowed after unary operator: '-border-info'
(12730,20): run-time error CSS1039: Token not allowed after unary operator: '-bg-white'
(12731,15): run-time error CSS1039: Token not allowed after unary operator: '-label-blue-2-text'
(12732,26): run-time error CSS1039: Token not allowed after unary operator: '-border-info'
(12735,20): run-time error CSS1039: Token not allowed after unary operator: '-label-brown'
(12736,15): run-time error CSS1039: Token not allowed after unary operator: '-label-brown-1-text'
(12737,26): run-time error CSS1039: Token not allowed after unary operator: '-label-brown'
(12740,20): run-time error CSS1039: Token not allowed after unary operator: '-bg-white'
(12741,15): run-time error CSS1039: Token not allowed after unary operator: '-label-brown-2-text'
(12742,26): run-time error CSS1039: Token not allowed after unary operator: '-label-brown'
(12745,20): run-time error CSS1039: Token not allowed after unary operator: '-label-yellow'
(12746,15): run-time error CSS1039: Token not allowed after unary operator: '-label-yellow-1-text'
(12747,26): run-time error CSS1039: Token not allowed after unary operator: '-label-yellow'
(12750,20): run-time error CSS1039: Token not allowed after unary operator: '-bg-white'
(12751,15): run-time error CSS1039: Token not allowed after unary operator: '-label-yellow-2-text'
(12752,26): run-time error CSS1039: Token not allowed after unary operator: '-label-yellow'
(12755,20): run-time error CSS1039: Token not allowed after unary operator: '-bg-primary'
(12756,15): run-time error CSS1039: Token not allowed after unary operator: '-text-white'
(12757,26): run-time error CSS1039: Token not allowed after unary operator: '-border-primary'
(12760,20): run-time error CSS1039: Token not allowed after unary operator: '-bg-white'
(12761,15): run-time error CSS1039: Token not allowed after unary operator: '-text-primary'
(12762,26): run-time error CSS1039: Token not allowed after unary operator: '-border-primary'
(12765,20): run-time error CSS1039: Token not allowed after unary operator: '-bg-gray-34'
(12766,15): run-time error CSS1039: Token not allowed after unary operator: '-text-white'
(12767,26): run-time error CSS1039: Token not allowed after unary operator: '-border-gray-34'
(12770,20): run-time error CSS1039: Token not allowed after unary operator: '-bg-white'
(12771,15): run-time error CSS1039: Token not allowed after unary operator: '-text-gray-34'
(12772,26): run-time error CSS1039: Token not allowed after unary operator: '-border-gray-34'
(12852,15): run-time error CSS1039: Token not allowed after unary operator: '-text-gray'
(12868,26): run-time error CSS1039: Token not allowed after unary operator: '-bg-white'
(12869,15): run-time error CSS1039: Token not allowed after unary operator: '-text-gray'
(12884,26): run-time error CSS1039: Token not allowed after unary operator: '-bg-faint-gray'
(12948,28): run-time error CSS1039: Token not allowed after unary operator: '-brand-blue-bg-lighten-55'
(12974,15): run-time error CSS1039: Token not allowed after unary operator: '-text-faint-gray'
(12983,17): run-time error CSS1039: Token not allowed after unary operator: '-text-gray'
(13027,22): run-time error CSS1039: Token not allowed after unary operator: '-bg-faint-gray'
(13041,24): run-time error CSS1039: Token not allowed after unary operator: '-bg-warn'
(13042,19): run-time error CSS1039: Token not allowed after unary operator: '-text-white'
(13162,24): run-time error CSS1039: Token not allowed after unary operator: '-bg-faint-gray'
(13211,38): run-time error CSS1039: Token not allowed after unary operator: '-border-light-gray'
(13212,41): run-time error CSS1039: Token not allowed after unary operator: '-border-light-gray'
(13213,37): run-time error CSS1039: Token not allowed after unary operator: '-border-white'
(13214,38): run-time error CSS1039: Token not allowed after unary operator: '-border-white'
(13218,36): run-time error CSS1039: Token not allowed after unary operator: '-border-white'
(13272,26): run-time error CSS1039: Token not allowed after unary operator: '-bg-gray-96'
(13275,28): run-time error CSS1039: Token not allowed after unary operator: '-border-gray-80'
(13335,15): run-time error CSS1039: Token not allowed after unary operator: '-text-white'
(13523,30): run-time error CSS1039: Token not allowed after unary operator: '-border-gray-87'
(13567,32): run-time error CSS1039: Token not allowed after unary operator: '-border-gray-87'
(13606,15): run-time error CSS1039: Token not allowed after unary operator: '-text-info'
(13615,34): run-time error CSS1039: Token not allowed after unary operator: '-focus-outline-link'
(13629,17): run-time error CSS1039: Token not allowed after unary operator: '-text-link-active-extra-dark'
(13649,26): run-time error CSS1039: Token not allowed after unary operator: '-bg-white'
(13669,33): run-time error CSS1039: Token not allowed after unary operator: '-border-light-gray'
(13697,30): run-time error CSS1039: Token not allowed after unary operator: '-border-gray-85'
(13704,15): run-time error CSS1039: Token not allowed after unary operator: '-text-gray'
(13719,31): run-time error CSS1039: Token not allowed after unary operator: '-border-light-gray'
(13728,15): run-time error CSS1039: Token not allowed after unary operator: '-text-gray'
(13737,15): run-time error CSS1039: Token not allowed after unary operator: '-text-light-gray'
(13801,26): run-time error CSS1039: Token not allowed after unary operator: '-border-white'
(13802,34): run-time error CSS1039: Token not allowed after unary operator: '-box-shadow-black-opacity-20'
(13844,26): run-time error CSS1039: Token not allowed after unary operator: '-bg-gray-87'
(13847,30): run-time error CSS1039: Token not allowed after unary operator: '-bg-white'
(13911,21): run-time error CSS1039: Token not allowed after unary operator: '-text-success'
(13914,21): run-time error CSS1039: Token not allowed after unary operator: '-text-med-gray'
(13986,26): run-time error CSS1039: Token not allowed after unary operator: '-border-gray-85'
(13991,15): run-time error CSS1039: Token not allowed after unary operator: '-text-gray-34'
(13994,28): run-time error CSS1039: Token not allowed after unary operator: '-focus-outline-gray'
(14022,17): run-time error CSS1039: Token not allowed after unary operator: '-text-gray-34'
(14024,28): run-time error CSS1039: Token not allowed after unary operator: '-border-gray-85'
(14025,22): run-time error CSS1039: Token not allowed after unary operator: '-bg-white'
(14037,19): run-time error CSS1039: Token not allowed after unary operator: '-text-gray-34'
(14038,24): run-time error CSS1039: Token not allowed after unary operator: '-bg-gray-85'
(14130,31): run-time error CSS1039: Token not allowed after unary operator: '-timeline-line'
(14132,33): run-time error CSS1039: Token not allowed after unary operator: '-border-gray-60'
(14147,22): run-time error CSS1039: Token not allowed after unary operator: '-bg-white'
(14154,28): run-time error CSS1039: Token not allowed after unary operator: '-timeline-line'
(14155,17): run-time error CSS1039: Token not allowed after unary operator: '-text-primary'
(14163,30): run-time error CSS1039: Token not allowed after unary operator: '-border-gray-60'
(14164,34): run-time error CSS1039: Token not allowed after unary operator: '-bg-white'
(14166,24): run-time error CSS1039: Token not allowed after unary operator: '-bg-faint-gray'
(14242,17): run-time error CSS1039: Token not allowed after unary operator: '-text-gray-51'
(14310,17): run-time error CSS1039: Token not allowed after unary operator: '-text-gray'
(14342,17): run-time error CSS1039: Token not allowed after unary operator: '-text-light-gray'
(14343,28): run-time error CSS1039: Token not allowed after unary operator: '-border-light-gray'
(14369,28): run-time error CSS1039: Token not allowed after unary operator: '-bg-white'
(14381,26): run-time error CSS1039: Token not allowed after unary operator: '-bg-white'
(14390,15): run-time error CSS1039: Token not allowed after unary operator: '-text-gray-35'
(14401,26): run-time error CSS1039: Token not allowed after unary operator: '-bg-white'
(14402,26): run-time error CSS1039: Token not allowed after unary operator: '-border-gray-85'
(14404,30): run-time error CSS1039: Token not allowed after unary operator: '-box-shadow'
(14527,15): run-time error CSS1039: Token not allowed after unary operator: '-text-gray'
(14546,26): run-time error CSS1039: Token not allowed after unary operator: '-bg-gray-34-opacity-95'
(14561,20): run-time error CSS1039: Token not allowed after unary operator: '-bg-gray-90c'
(14564,24): run-time error CSS1039: Token not allowed after unary operator: '-white'
(14597,26): run-time error CSS1039: Token not allowed after unary operator: '-bg-white'
(14619,26): run-time error CSS1039: Token not allowed after unary operator: '-bg-white'
(14635,36): run-time error CSS1039: Token not allowed after unary operator: '-box-shadow-black-opacity-10'
(14669,20): run-time error CSS1039: Token not allowed after unary operator: '-bg-primary'
(14686,24): run-time error CSS1039: Token not allowed after unary operator: '-bg-white'
(14694,41): run-time error CSS1039: Token not allowed after unary operator: '-box-shadow-black-opacity-10'
(14709,26): run-time error CSS1039: Token not allowed after unary operator: '-bg-white'
(14750,25): run-time error CSS1039: Token not allowed after unary operator: '-focus-outline-white-opacity-70'
(14796,26): run-time error CSS1039: Token not allowed after unary operator: '-bg-white'
(14817,17): run-time error CSS1039: Token not allowed after unary operator: '-text-gray'
(14821,22): run-time error CSS1039: Token not allowed after unary operator: '-bg-gray-54-opacity-35'
(14823,17): run-time error CSS1039: Token not allowed after unary operator: '-text-white'
(14828,24): run-time error CSS1039: Token not allowed after unary operator: '-bg-black-opacity-20'
(14829,19): run-time error CSS1039: Token not allowed after unary operator: '-text-white'
(14928,26): run-time error CSS1039: Token not allowed after unary operator: '-bg-white'
(14929,15): run-time error CSS1039: Token not allowed after unary operator: '-text-gray-34'
(14930,35): run-time error CSS1039: Token not allowed after unary operator: '-box-shadow-black-opacity-10'
(14946,19): run-time error CSS1039: Token not allowed after unary operator: '-text-gray-34'
(14952,30): run-time error CSS1039: Token not allowed after unary operator: '-bg-gray-34-opacity-95'
(14953,19): run-time error CSS1039: Token not allowed after unary operator: '-text-white'
(15021,39): run-time error CSS1039: Token not allowed after unary operator: '-border-gray-64'
(15100,21): run-time error CSS1039: Token not allowed after unary operator: '-text-gray-34'
(15136,19): run-time error CSS1039: Token not allowed after unary operator: '-text-gray-34'
(15140,23): run-time error CSS1039: Token not allowed after unary operator: '-text-white'
(15212,15): run-time error CSS1039: Token not allowed after unary operator: '-text-gray-34'
(15216,17): run-time error CSS1039: Token not allowed after unary operator: '-text-gray'
(15218,28): run-time error CSS1039: Token not allowed after unary operator: '-bg-gray-93c'
(15221,19): run-time error CSS1039: Token not allowed after unary operator: '-text-white'
(15223,19): run-time error CSS1039: Token not allowed after unary operator: '-text-gray-85'
(15275,28): run-time error CSS1039: Token not allowed after unary operator: '-bg-white'
(15320,35): run-time error CSS1039: Token not allowed after unary operator: '-border-gray-87'
(15321,36): run-time error CSS1039: Token not allowed after unary operator: '-border-gray-87'
(15353,15): run-time error CSS1039: Token not allowed after unary operator: '-text-white'
(15376,28): run-time error CSS1039: Token not allowed after unary operator: '-bg-gray-44'
(15377,32): run-time error CSS1039: Token not allowed after unary operator: '-box-shadow-black-opacity-40'
(15384,19): run-time error CSS1039: Token not allowed after unary operator: '-text-white'
(15385,30): run-time error CSS1039: Token not allowed after unary operator: '-bg-gray-34'
(15416,28): run-time error CSS1039: Token not allowed after unary operator: '-bg-primary'
(15417,32): run-time error CSS1039: Token not allowed after unary operator: '-box-shadow-black-opacity-40'
(15419,17): run-time error CSS1039: Token not allowed after unary operator: '-text-white'
(15429,30): run-time error CSS1039: Token not allowed after unary operator: '-border-primary-extra-dark'
(15468,22): run-time error CSS1039: Token not allowed after unary operator: '-bg-primary'
(15469,32): run-time error CSS1039: Token not allowed after unary operator: '-box-shadow-black-opacity-40'
(15472,30): run-time error CSS1039: Token not allowed after unary operator: '-bg-primary'
(15486,22): run-time error CSS1039: Token not allowed after unary operator: '-text-white'
(15525,35): run-time error CSS1039: Token not allowed after unary operator: '-border-light-gray'
(15555,33): run-time error CSS1039: Token not allowed after unary operator: '-border-gray-85'
(15601,26): run-time error CSS1039: Token not allowed after unary operator: '-bg-white'
(15621,20): run-time error CSS1039: Token not allowed after unary operator: '-bg-white'
(15635,35): run-time error CSS1039: Token not allowed after unary operator: '-border-light-gray'
(15704,30): run-time error CSS1039: Token not allowed after unary operator: '-focus-outline-link'
(15744,15): run-time error CSS1039: Token not allowed after unary operator: '-text-gray'
(15758,17): run-time error CSS1039: Token not allowed after unary operator: '-text-link'
(15762,15): run-time error CSS1039: Token not allowed after unary operator: '-text-gray'
(15770,33): run-time error CSS1039: Token not allowed after unary operator: '-border-gray-85'
(15777,17): run-time error CSS1039: Token not allowed after unary operator: '-text-link'
(15784,20): run-time error CSS1039: Token not allowed after unary operator: '-bg-white'
(15849,26): run-time error CSS1039: Token not allowed after unary operator: '-bg-gray-90c'
(15929,20): run-time error CSS1039: Token not allowed after unary operator: '-bg-black-opacity-40'
(16015,30): run-time error CSS1039: Token not allowed after unary operator: '-focus-outline-white-opacity-70'
(16111,16): run-time error CSS1039: Token not allowed after unary operator: '-bg-white'
(16113,16): run-time error CSS1039: Token not allowed after unary operator: '-text-gray'
(16115,16): run-time error CSS1039: Token not allowed after unary operator: '-text-gray'
(16117,16): run-time error CSS1039: Token not allowed after unary operator: '-text-gray'
(16120,18): run-time error CSS1039: Token not allowed after unary operator: '-border-gray-80'
(16124,16): run-time error CSS1039: Token not allowed after unary operator: '-bg-info'
(16126,16): run-time error CSS1039: Token not allowed after unary operator: '-bg-info'
(16128,18): run-time error CSS1039: Token not allowed after unary operator: '-bg-white'
(16130,16): run-time error CSS1039: Token not allowed after unary operator: '-bg-primary'
(16132,28): run-time error CSS1039: Token not allowed after unary operator: '-bg-primary'
(16134,16): run-time error CSS1039: Token not allowed after unary operator: '-bg-primary-darker'
(16136,28): run-time error CSS1039: Token not allowed after unary operator: '-bg-primary-darker'
(16138,16): run-time error CSS1039: Token not allowed after unary operator: '-text-gray-67'
(16140,28): run-time error CSS1039: Token not allowed after unary operator: '-text-gray-67'
(16142,16): run-time error CSS1039: Token not allowed after unary operator: '-bg-gray-60'
(16144,16): run-time error CSS1039: Token not allowed after unary operator: '-bg-info'
(16146,16): run-time error CSS1039: Token not allowed after unary operator: '-bg-info'
(16148,18): run-time error CSS1039: Token not allowed after unary operator: '-gray-60'
(16150,18): run-time error CSS1039: Token not allowed after unary operator: '-bg-info'
(16154,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(16155,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(16156,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(16157,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(16158,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(16159,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(16160,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(16161,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(16162,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(16163,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(16164,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(16169,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(16170,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(16171,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(16172,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(16173,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(16174,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(16175,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(16176,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(16177,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(16178,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(16179,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(16180,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(16181,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(16182,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(16183,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(16184,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(16185,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(16186,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(16187,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(16188,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(16189,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(16190,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(16191,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(16192,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(16193,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(16194,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(16195,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(16196,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(16197,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(16198,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(16199,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(16200,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(16201,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(16202,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(16203,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(16204,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(16205,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(16206,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(16210,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(16211,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(16212,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(16213,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(16214,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(16215,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(16216,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(16217,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(16218,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(16219,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(16220,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(16221,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(16222,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(16223,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(16224,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(16225,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(16226,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(16227,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(16228,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(16229,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(16230,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(16231,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(16232,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(16233,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(16234,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(16235,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(16236,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(16237,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(16238,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(16239,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(16240,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(16241,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(16242,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(16243,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(16244,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(16245,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(16246,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(16247,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(16248,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(16249,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(16250,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(16251,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(16252,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(16253,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(16254,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(16255,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(16256,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(16257,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(16258,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(16259,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(16260,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(16261,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(16262,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(16263,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(16264,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(16265,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(16266,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(16267,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(16268,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(16269,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(16270,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(16271,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(16272,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(16273,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(16274,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(16275,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(16276,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(16277,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(16278,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(16279,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(16280,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(16281,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(16282,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(16283,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(16284,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(16285,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(16286,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(16287,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(16288,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
 */
@charset "UTF-8";
/* 
    Relative units in media queries are based on the initial value, 
which means that units are never based on results of declarations. 
For example, in HTML, the em unit is relative to the initial value of font-size, 
defined by the user agent or the user’s preferences, not any styling on the page.

    Calculted based on assumed 16px default font size; if user has changed this everythggn will be relative and
    should still fit in any device or window width
    better for user, harder to target devices at specific px - test this on devices
    -could you get in sencario where you are not within a block of min-width/max-width if your font size is enlarged
    because the em to px conversion ends up being more than 1px apart?
    we only use max-width for the visibility helpers - :( If we used visiblity helpers like foundation, ems would work

*/
:root,
:root .light-mode-only {
  color-scheme: light;
  --brand-red-h:              346;
  --brand-red-s:              100%;
  --brand-red-l:              42%;
  --brand-red:                hsl(var(--brand-red-h), var(--brand-red-s), var(--brand-red-l));
  --brand-red-darken-5:       hsl(var(--brand-red-h), var(--brand-red-s), calc(var(--brand-red-l) - 5%));
  --brand-red-darken-10:      hsl(var(--brand-red-h), var(--brand-red-s), calc(var(--brand-red-l) - 10%));
  --brand-red-bg-h:           346;
  --brand-red-bg-s:           100%;
  --brand-red-bg-l:           42%;
  --brand-red-bg:             hsl(var(--brand-red-bg-h), var(--brand-red-bg-s), var(--brand-red-bg-l));
  --brand-red-bg-darken-5:    hsl(var(--brand-red-bg-h), var(--brand-red-bg-s), calc(var(--brand-red-bg-l) - 5%));
  --brand-red-bg-darken-7:    hsl(var(--brand-red-bg-h), var(--brand-red-bg-s), calc(var(--brand-red-bg-l) - 7%));
  --brand-red-bg-darken-10:   hsl(var(--brand-red-bg-h), var(--brand-red-bg-s), calc(var(--brand-red-bg-l) - 10%));
  --brand-blue-h:             198;
  --brand-blue-s:             51%;
  --brand-blue-l:             39%;
  --brand-blue:               hsl(var(--brand-blue-h), var(--brand-blue-s), var(--brand-blue-l));
  --brand-blue-darken-4:      hsl(var(--brand-blue-h), var(--brand-blue-s), calc(var(--brand-blue-l) - 4%));
  --brand-blue-darken-6:      hsl(var(--brand-blue-h), var(--brand-blue-s), calc(var(--brand-blue-l) - 6%));
  --brand-blue-darken-10:     hsl(var(--brand-blue-h), var(--brand-blue-s), calc(var(--brand-blue-l) - 10%));
  --brand-blue-bg-h:          198;
  --brand-blue-bg-s:          51%;
  --brand-blue-bg-l:          39%;
  --brand-blue-bg:            hsl(var(--brand-blue-bg-h), var(--brand-blue-bg-s), var(--brand-blue-bg-l));
  --brand-blue-bg-lighten-55: hsl(var(--brand-blue-bg-h), var(--brand-blue-bg-s), calc(var(--brand-blue-bg-l) + 55%));
  --brand-blue-bg-lighten-13: hsl(var(--brand-blue-bg-h), var(--brand-blue-bg-s), calc(var(--brand-blue-bg-l) + 13%));
  --brand-blue-bg-lighten-6:  hsl(var(--brand-blue-bg-h), var(--brand-blue-bg-s), calc(var(--brand-blue-bg-l) + 6%));
  --brand-blue-bg-darken-4:   hsl(var(--brand-blue-bg-h), var(--brand-blue-bg-s), calc(var(--brand-blue-bg-l) - 4%));
  --brand-blue-bg-darken-10:  hsl(var(--brand-blue-bg-h), var(--brand-blue-bg-s), calc(var(--brand-blue-bg-l) - 10%));
  --error-h:                  353;
  --error-s:                  100%;
  --error-l:                  41%;
  --error:                    hsl(var(--error-h), var(--error-s), var(--error-l));
  --error-bg-h:               353;
  --error-bg-s:               100%;
  --error-bg-l:               41%;
  --error-bg:                 hsl(var(--error-bg-h), var(--error-bg-s), var(--error-bg-l));
  --success-h:                155;
  --success-s:                100%;
  --success-l:                24%;
  --success:                  hsl(var(--success-h), var(--success-s), var(--success-l));
  --success-bg-h:             155;
  --success-bg-s:             100%;
  --success-bg-l:             24%;
  --success-bg:               hsl(var(--success-bg-h), var(--success-bg-s), var(--success-bg-l));
  --success-bg-lighten-56:    hsl(var(--success-bg-h), var(--success-bg-s), calc(var(--success-bg-l) + 56%));
  --success-bg-darken-5:      hsl(var(--success-bg-h), var(--success-bg-s), calc(var(--success-bg-l) - 5%));
  --success-bg-darken-9:      hsl(var(--success-bg-h), var(--success-bg-s), calc(var(--success-bg-l) - 9%));
  --warn-h:                   20;
  --warn-s:                   100%;
  --warn-l:                   41%;
  --warn:                     hsl(var(--warn-h), var(--warn-s), var(--warn-l));
  --warn-bg-h:                23;
  --warn-bg-s:                100%;
  --warn-bg-l:                40%;
  --warn-bg:                  hsl(var(--warn-bg-h), var(--warn-bg-s), var(--warn-bg-l));
  --warn-bg-lighten-45:       hsl(var(--warn-bg-h), var(--warn-bg-s), calc(var(--warn-bg-l) + 45%));
  --white:                    hsl(214, 0%, 100%);
  --gray-98:                  hsl(214, 0%, 98%);
  --gray-96:                  hsl(214, 0%, 96%);
  --gray-93:                  hsl(214, 0%, 93%);
  --gray-93c:                 hsl(214, 3%, 93%);
  --gray-90:                  hsl(214, 0%, 90%);
  --gray-90c:                 hsl(214, 2%, 90%);
  --gray-88:                  hsl(214, 3%, 88%);
  --gray-87:                  hsl(214, 0%, 87%);
  --gray-85:                  hsl(214, 0%, 85%);
  --gray-83:                  hsl(214, 0%, 83%);
  --gray-80:                  hsl(214, 0%, 80%);
  --gray-77:                  hsl(214, 0%, 77%);
  --gray-73:                  hsl(214, 0%, 73%);
  --gray-70:                  hsl(214, 0%, 70%);
  --gray-67:                  hsl(214, 0%, 67%);
  --gray-64:                  hsl(214, 2%, 64%);
  --gray-60:                  hsl(214, 0%, 60%);
  --gray-54:                  hsl(214, 2%, 54%);
  --gray-51:                  hsl(214, 0%, 51%);
  --gray-45:                  hsl(214, 2%, 45%);
  --gray-44:                  hsl(214, 4%, 44%);
  --gray-42:                  hsl(214, 4%, 42%);
  --gray-40:                  hsl(214, 4%, 40%);
  --gray-38:                  hsl(214, 2%, 38%);
  --gray-35:                  hsl(214, 2%, 35%);
  --gray-34:                  hsl(214, 4%, 34%);
  --gray-32:                  hsl(214, 2%, 32%);
  --gray-30:                  hsl(214, 2%, 30%);
  --gray-29:                  hsl(214, 4%, 29%);
  --gray-28:                  hsl(214, 2%, 28%);
  --gray-26:                  hsl(214, 0%, 26%);
  --gray-24:                  hsl(214, 4%, 24%);
  --gray-20:                  hsl(214, 2%, 20%);
  --gray-18:                  hsl(214, 0%, 18%);
  --gray-17:                  hsl(214, 0%, 17%);
  --gray-16:                  hsl(214, 0%, 16%);
  --gray-15:                  hsl(214, 0%, 15%);
  --gray-14:                  hsl(214, 0%, 14%);
  --gray-12:                  hsl(214, 0%, 12%);
  --gray-10:                  hsl(214, 0%, 10%);
  --black:                    hsl(214, 0%, 0%);
  --faint-gray:               var(--gray-96);
  --light-gray:               var(--gray-93);
  --med-gray:                 var(--gray-67);
  --neutral-gray:             var(--gray-60);
  --gray:                     var(--gray-45);
  --dark-gray:                var(--gray-35);
  --extra-dark-gray:          var(--gray-28);
  --brand-faint-gray:         var(--gray-93c);
  --brand-light-gray:         var(--gray-85);
  --brand-medium-gray:        var(--gray-54);
  --brand-dark-gray:          var(--gray-34);
  --white-hsl:                214, 0%, 100%;
  --white-05:                 hsla(var(--white-hsl), .05);
  --white-10:                 hsla(var(--white-hsl), .1);
  --white-15:                 hsla(var(--white-hsl), .15);
  --white-20:                 hsla(var(--white-hsl), .2);
  --white-30:                 hsla(var(--white-hsl), .3);
  --white-40:                 hsla(var(--white-hsl), .4);
  --white-50:                 hsla(var(--white-hsl), .5);
  --white-60:                 hsla(var(--white-hsl), .6);
  --white-70:                 hsla(var(--white-hsl), .7);
  --white-80:                 hsla(var(--white-hsl), .8);
  --white-85:                 hsla(var(--white-hsl), .85);
  --white-90:                 hsla(var(--white-hsl), .9);
  --white-95:                 hsla(var(--white-hsl), .95);
  --black-hsl:                214, 0%, 0%;
  --black-10:                 hsla(var(--black-hsl), .1);
  --black-15:                 hsla(var(--black-hsl), .15);
  --black-20:                 hsla(var(--black-hsl), .2);
  --black-30:                 hsla(var(--black-hsl), .3);
  --black-35:                 hsla(var(--black-hsl), .35);
  --black-40:                 hsla(var(--black-hsl), .4);
  --black-50:                 hsla(var(--black-hsl), .5);
  --black-60:                 hsla(var(--black-hsl), .6);
  --black-70:                 hsla(var(--black-hsl), .7);
  --black-80:                 hsla(var(--black-hsl), .8);
  --black-90:                 hsla(var(--black-hsl), .9);
  --warn-03:                  hsla(var(--warn), .3);
  --warn-08:                  hsla(var(--warn), .8); }

:root,
:root .light-mode-only {
  --text-primary:                     var(--brand-red);
  --text-primary-active:              var(--brand-red-darken-5);
  --text-primary-active-extra-dark:   var(--brand-red-darken-10);
  --text-link:                        var(--brand-blue);
  --text-link-dark:                   var(--brand-blue-darken-4);
  --text-link-active:                 var(--brand-blue-darken-6);
  --text-link-active-extra-dark:      var(--brand-blue-darken-10);
  --text-info:                        var(--text-link);
  --text-info-active:                 var(--text-link-active);
  --text-info-active-extra-dark:      var(--text-link-active-extra-dark);
  --text-error:                       var(--error);
  --text-success:                     var(--success);
  --text-warn:                        var(--warn);
  --text-gray-85:                     var(--gray-85);
  --text-gray-80:                     var(--gray-80);
  --text-gray-73:                     var(--gray-73);
  --text-gray-67:                     var(--gray-67);
  --text-gray-60:                     var(--gray-60);
  --text-gray-54:                     var(--gray-54);
  --text-gray-51:                     var(--gray-51);
  --text-gray-45:                     var(--gray-45);
  --text-gray-42:                     var(--gray-42);
  --text-gray-38:                     var(--gray-38);
  --text-gray-35:                     var(--gray-35);
  --text-gray-34:                     var(--gray-34);
  --text-gray-32:                     var(--gray-32);
  --text-gray-20:                     var(--gray-20);
  --text-faint-gray:                  var(--text-gray-73);
  --text-light-gray:                  var(--text-gray-45);
  --text-med-gray:                    var(--text-gray-32);
  --text-gray:                        var(--text-gray-20);
  --text-white:                       var(--white);
  --text-white-opacity-50:            var(--white-50);
  --text-white-opacity-70:            var(--white-70);
  --text-white-opacity-85:            var(--white-85);
  --text-white-opacity-95:            var(--white-95);
  --bg-primary:                       var(--brand-red-bg);
  --bg-primary-dark:                  var(--brand-red-bg-darken-5);
  --bg-primary-darker:                var(--brand-red-bg-darken-7);
  --bg-primary-extra-dark:            var(--brand-red-bg-darken-10);
  --bg-info:                          var(--brand-blue-bg);
  --bg-info-light:                    var(--brand-blue-bg-lighten-6);
  --bg-info-dark:                     var(--brand-blue-bg-darken-4);
  --bg-info-darker:                   var(--brand-blue-bg-darken-10);
  --bg-error:                         var(--error-bg);
  --bg-success:                       var(--success-bg);
  --bg-success-dark:                  var(--success-bg-darken-5);
  --bg-success-extra-light:           var(--success-bg-lighten-56);
  --bg-warn:                          var(--warn-bg);
  --bg-warn-extra-light:              var(--warn-bg-lighten-45);
  --bg-gray-98:                       var(--gray-98);
  --bg-gray-96:                       var(--gray-96);
  --bg-gray-93c:                      var(--gray-93c);
  --bg-gray-93:                       var(--gray-93);
  --bg-gray-90c:                      var(--gray-90c);
  --bg-gray-90:                       var(--gray-90);
  --bg-gray-88:                       var(--gray-88);
  --bg-gray-87:                       var(--gray-87);
  --bg-gray-85:                       var(--gray-85);
  --bg-gray-80:                       var(--gray-80);
  --bg-gray-73:                       var(--gray-73);
  --bg-gray-70:                       var(--gray-70);
  --bg-gray-67:                       var(--gray-67);
  --bg-gray-60:                       var(--gray-60);
  --bg-gray-54:                       var(--gray-54);
  --bg-gray-51:                       var(--gray-51);
  --bg-gray-45:                       var(--gray-45);
  --bg-gray-44:                       var(--gray-44);
  --bg-gray-40:                       var(--gray-40);
  --bg-gray-35:                       var(--gray-35);
  --bg-gray-34:                       var(--gray-34);
  --bg-gray-29:                       var(--gray-29);
  --bg-gray-24:                       var(--gray-24);
  --bg-gray-20:                       var(--gray-20);
  --bg-faint-gray:                    var(--bg-gray-96);
  --bg-light-gray:                    var(--bg-gray-93);
  --bg-med-gray:                      var(--bg-gray-67);
  --bg-gray:                          var(--bg-gray-45);
  --bg-dark-gray:                     var(--bg-gray-35);
  --bg-gray-54-opacity-05:            hsla(214, 2%, 54%, .05);
  --bg-gray-54-opacity-25:            hsla(214, 2%, 54%, .25);
  --bg-gray-54-opacity-35:            hsla(214, 2%, 54%, .35);
  --bg-gray-34-opacity-90:            hsla(214, 4%, 34%, .9);
  --bg-gray-34-opacity-95:            hsla(214, 4%, 34%, .95);
  --bg-gray-20-opacity-50:            hsla(214, 2%, 20%, .5);
  --bg-white:                         var(--white);
  --bg-white-opacity-10:              var(--white-10);
  --bg-white-opacity-80:              var(--white-80);
  --bg-white-opacity-95:              var(--white-95);
  --bg-black:                         var(--black);
  --bg-black-opacity-05:              var(--black-5);
  --bg-black-opacity-10:              var(--black-10);
  --bg-black-opacity-20:              var(--black-20);
  --bg-black-opacity-30:              var(--black-30);
  --bg-black-opacity-40:              var(--black-40);
  --border-primary:                   var(--brand-red-bg);
  --border-primary-dark:              var(--brand-red-bg-darken-5);
  --border-primary-extra-dark:        var(--brand-red-bg-darken-10);
  --border-info:                      var(--brand-blue-bg);
  --border-info-light:                var(--brand-blue-bg-lighten-13);
  --border-error:                     var(--error-bg);
  --border-success:                   var(--success-bg);
  --border-success-dark:              var(--success-bg-darken-9);
  --border-warn:                      var(--warn-bg);
  --border-warn-opacity-3:            var(--warn-03);
  --border-white:                     var(--bg-white);
  --border-white-opacity-20:          var(--white-20);
  --border-white-opacity-30:          var(--white-30);
  --border-white-opacity-80:          var(--white-80);
  --border-white-opacity-90:          var(--white-90);
  --border-gray-96:                   var(--gray-96);
  --border-gray-93:                   var(--gray-93);
  --border-gray-90:                   var(--gray-90);
  --border-gray-88:                   var(--gray-88);
  --border-gray-87:                   var(--gray-87);
  --border-gray-85:                   var(--gray-85);
  --border-gray-80:                   var(--gray-80);
  --border-gray-70:                   var(--gray-70);
  --border-gray-67:                   var(--gray-67);
  --border-gray-64:                   var(--gray-64);
  --border-gray-60:                   var(--gray-60);
  --border-gray-54:                   var(--gray-54);
  --border-gray-45:                   var(--gray-45);
  --border-gray-44:                   var(--gray-44);
  --border-gray-35:                   var(--gray-35);
  --border-gray-34:                   var(--gray-34);
  --border-gray-29:                   var(--gray-29);
  --border-gray-24:                   var(--gray-24);
  --border-faint-gray:                var(--border-gray-96);
  --border-light-gray:                var(--border-gray-93);
  --border-med-gray:                  var(--border-gray-67);
  --border-gray:                      var(--border-gray-45);
  --border-dark-gray:                 var(--border-gray-35);
  --box-shadow:                       hsla(0, 0%, 87%, .65);
  --box-shadow-level-1:               hsla(0, 0%, 83%,.53);
  --box-shadow-level-20:              hsla(0, 0%, 20%, .5);
  --box-shadow-no-opacity:            var(--gray-87);
  --box-shadow-black-opacity-10:      var(--black-10);
  --box-shadow-black-opacity-20:      var(--black-20);
  --box-shadow-black-opacity-30:      var(--black-30);
  --box-shadow-black-opacity-35:      var(--black-35);
  --box-shadow-black-opacity-40:      var(--black-40);
  --box-shadow-black-opacity-50:      var(--black-50);
  --box-shadow-warn:                  var(--warn-08);
  --box-shadow-info:                  var(--brand-blue-bg);
  --text-shadow:                      var(--gray-28);
  --filter-drop-shadow:               var(--gray-60);
  --focus-outline:                    var(--brand-blue-bg-lighten-13);
  --focus-outline-link:               var(--brand-bg-blue);
  --focus-outline-link-extra-dark:    var(--brand-blue-bg-darken-10);
  --focus-outline-white:              var(--white);
  --focus-outline-white-opacity-70:   var(--white-70);
  --focus-outline-gray:            var(--gray-60);
  --progress-spin-indicator-border-right:         var(--gray-64);
  --progress-spin-indicator-border-bottom:        var(--gray-54);
  --progress-spin-indicator-border-left:          var(--gray-44);
  --progress-steps-todo-borders-backgrounds:      var(--gray-70);
  --progress-steps-done-borders-backgrounds:      var(--gray-34);
  --progress-steps-text-todo:                     var(--gray-90c);
  --uwcu-loading-circle-border:                   var(--gray-67);
  --uwcu-loading-circle-inner-border:             var(--gray-87);
  --timeline-line:                                var(--gray-34);
  --toggle-text:                                  var(--text-med-gray);
  --toggle-background:                            var(--bg-white);
  --toggle-border:                                var(--border-gray-80);
  --toggle-pressed-text:                          var(--text-white);
  --toggle-pressed-background:                    var(--bg-gray-45);
  --toggle-pressed-border:                        var(--border-gray-45);
  --popover-background:                var(--bg-white);
  --popover-title-background:          var(--bg-faint-gray);
  --popover-point-border:              var(--border-med-gray);
  --button-disabled-text:              var(--text-faint-gray);
  --button-disabled-border:            var(--border-gray-87);
  --button-disabled-background:        var(--border-light-gray);
  --verifyukey-digit-text:                         var(--gray-20);
  --verifyukey-date-text:                          var(--gray-34); }

/*#region ACCESSBILITY */
/*#endregion */
/*#region HORIZONTAL RULES */
/*#endregion */
/*#region IMAGES */
/*#endregion */
/*#region TYPOGRAPHY */
/*#endregion */
/*#region RESETS */
/*#endregion */
/*#region ADS */
/*#endregion */
/*#region BADGES */
/*#endregion */
/*#region BOXES */
/*#endregion */
/*#region BUTTONS */
/*#endregion */
/*#region CALENDARS */
/*#endregion */
/*#region FILTERS */
/*#endregion */
/*#region ICONS*/
/*#endregion */
/*#region INPUTS */
/*#endregion */
/*#region LINES */
/*#endregion */
/*#region LISTS */
/*#endregion */
/*#region NAV */
/*#endregion */
/*#region OVERLAYS */
/*#endregion */
/*#endregion */
/*#region LOADING SPINNERS */
/*#endregion */
/*#region RIBBONS */
/*#endregion */
/*#region SORTING */
/*#endregion */
/*#region SWITCHES */
/*#endregion */
/*#region TILES */
/*#endregion */
/*#region TOGGLES */
/*#endregion */
/*#region WIZARDS */
/*#endregion */
/*#region ACTION MODE */
/*#endregion */
/*#region TOASTER */
/*#endregion */
/* #region CAROUSELS*/
/*#endregion */
/*#region TIMELINE*/
/*#endregion*/
/*  @function unicode will compile these properly

    SASS file example:
    .icon-line-chart:before {
	    content: unicode($icon-line-chart); 
    }

    Compiles to :

    .icon-line-chart:before {
      content: "\e600"; 
    }

*/
/*
    NOTES ABOUT BASE FONT SIZE
    
    
    CURRENT STATE -
    Base font - 10px
    Media queries in pixels (480px, 768px, 980px, 1260px)
    
    Pros
            - 10px base makes calculations of rems easy
            - Media queries in pixels makes it easy to target specific devices
    Con
            - User font size not reflected on our site, must use zoom instead

    
    DESIRED STATE - 
    Base font - 62.5% = 10px (assuming default browser font size of 16px)
    Media queries in ems (30em, 48em, 61.25em, 78.75em)
    
    Pros 
            - Allows user to change font size and have it honored on our site
            - 10px base makes calculations of rems easy
    Con 
            - Our visibility helpers use combinations of min-with and max-width. 
                - It's possbile to end up with an extra pixel between tiers if brwoser hits that pixel none of the visiblity helpers kick in.
                - (set user font size to 20px and browser width to 599)
            - Potentially certain devices might not hit the em-based breakpoints as expected (would need to test)

    Solution 
            - Switch our visiblity helpers to only use min-width - see Foundation - this is a better method, but our current visibility helpers are so widely used, changing it now seems like too much effort

    
*/
/*
 
 NOTES ABOUT EM & REM


 Font sizes set in rem.
 Margin and padding set in em (2) or rem (3).

 (1)    10px sets up a base of 10 units for easy mental math on px to rem. 10px = 1rem
        Prevents user font size from taking effect. Necessary evil due to the fact that our media queries cannot be in ems.
        We use the Bootstrap visibility helpers which use combinations of min-with and max-width. Using ems in media queries, makes it possbile at larger font sizes, to end up with an extra pixel between tiers.
        If the browser hits that pixel none of the visiblity helpers kick in. (To see this, use em-based media queries and set user font size to 20px and browser width to 599.)

 (2)    Vertical padding and margins for typography elements - p, ul, h1, etc. - are set in rem.
        The spacing is relative to the root font-size of the element and therefore the same regardless of the element's font size.

        Note: Vertical padding and margins for other elements may be em. It depends on whether or not the vertical height and distance from other elements should change relative to its font size

 (3)    Hortizontal padding and margins for typography elements - blockquote, ul - are set in rem.
        The spacing is relative to the root font size and therefore the same regardless of the element.
        This gives a consistent left indent down the page regardless of the font size of each element.

 Note:  "IE 9 & IE 10 do not support rem units when used in the font shorthand property (the entire declaration is ignored) or when used on pseudo elements." See caniuse.com/#search=rem

*/
:root {
  --uwcu-font-stack: "Gotham Narrow SSm A", "Gotham Narrow SSm B", Arial, Helvetica, sans-serif; }

/* Gotham Narrow Light */
/* Gotham Narrow Book */
/* Gotham Narrow Medium */
/* Gotham Narrow Bold */
:root {
  --label-purple:             #7d4698;
  --label-brown:              #975031;
  --label-yellow:             #d5a300;
  --label-purple-text:        var(--label-purple);
  --label-green-1-text:       var(--text-white);
  --label-green-2-text:       var(--text-green);
  --label-orange-1-text:      var(--text-white);
  --label-orange-2-text:      var(--text-warn);
  --label-blue-1-text:        var(--text-white);
  --label-blue-2-text:        var(--text-info);
  --label-brown-1-text:       var(--text-white);
  --label-brown-2-text:       var(--label-brown);
  --label-yellow-1-text:      var(--text-white);
  --label-yellow-2-text:      var(--label-yellow); }

/* WEB TEMP VARIABLES 
    $sidebar-width-*       The width of the left and right (if showing) sidebar
    $toast-margin-*        margin matches the widths of the left and right sidebar so that toaster stays the size of the middle column
    $circle-button-distance-from-edge:  Distance of circle butotns (menu, log out, scroll to top) from edge of viewport
    $gradient-background   The background images for the left and right sidebars 

*/
/* Multiplier for base padding unit */
/* Function to output icons with proper characters when complied */
/*self clearing*/
@-ms-viewport {
  width: device-width; }

html {
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0); }

body {
  color: var(--text-gray);
  background: var(--bg-gray-90c);
  margin: 0;
  padding: 0; }
  @media print {
    body {
      color: var(--black); } }

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

a {
  color: var(--text-link);
  text-decoration: underline;
  -webkit-touch-callout: none; }
  .hover a:hover, a.active {
    color: var(--text-link-active-extra-dark);
    text-decoration: none; }
  a.inactive {
    cursor: default; }
  @media (min-width: 768px) {
    a[href^='tel:'],
    .hover a[href^='tel:']:hover {
      color: inherit;
      cursor: default;
      text-decoration: none; } }

.hover a:focus,
.hover button:focus {
  outline: 1px dotted var(--focus-outline);
  outline-offset: -2px; }

.hover a:active,
.hover button:active,
.hover a.active,
.hover button.active {
  outline: none !important; }

.hover a.active,
.hover button.active {
  transition: none !important; }

table {
  max-width: 100%;
  border-collapse: collapse;
  border-spacing: 0;
  background: transparent;
  font-family: inherit;
  font-size: inherit; }

td,
th {
  padding: 0;
  text-align: left;
  vertical-align: top;
  border-width: 0; }

form,
fieldset,
legend {
  margin: 0; }

fieldset {
  padding: 0;
  border: 0; }

legend {
  color: var(--text-gray);
  background: var(--bg-white);
  display: block;
  padding: 0;
  margin-bottom: .7143em;
  line-height: inherit;
  border: 0; }

button,
input,
select,
textarea {
  margin: 0;
  font: inherit;
  color: inherit; }

button {
  overflow: visible;
  background: none;
  border: none;
  padding: 0; }

button,
select {
  text-transform: none; }

button,
input[type="submit"] {
  -webkit-appearance: none;
  -moz-appearance: none;
  cursor: pointer; }

button::-moz-focus-inner,
input::-moz-focus-inner {
  padding: 0;
  border: 0; }

input,
button {
  line-height: normal; }

input[type=number] {
  -moz-appearance: textfield; }

input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0; }

input[type=text]::-ms-clear {
  display: none; }

input::-webkit-input-placeholder {
  color: var(--text-light-gray);
  font-style: normal;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: 1.4rem; }
  @media print, (min-width: 768px) {
    input::-webkit-input-placeholder {
      font-size: 1.2rem; } }

input:-moz-placeholder {
  color: var(--text-light-gray);
  font-style: normal;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: 1.4rem; }
  @media print, (min-width: 768px) {
    input:-moz-placeholder {
      font-size: 1.2rem; } }

input::-moz-placeholder {
  color: var(--text-light-gray);
  font-style: normal;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: 1.4rem; }
  @media print, (min-width: 768px) {
    input::-moz-placeholder {
      font-size: 1.2rem; } }

input:-ms-input-placeholder {
  color: var(--text-light-gray);
  font-style: normal;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: 1.4rem; }
  @media print, (min-width: 768px) {
    input:-ms-input-placeholder {
      font-size: 1.2rem; } }

input[type=checkbox] {
  display: none; }

input[type=radio] {
  display: none; }

html {
  font-size: 10px;
  font-family: sans-serif;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%; }

body {
  font-size: 1.6rem;
  font-family: "Gotham Narrow SSm A", "Gotham Narrow SSm B", Arial, Helvetica, sans-serif;
  font-style: normal;
  font-weight: 400;
  line-height: 1.4; }
  @media (min-width: 768px) {
    body {
      font-size: 1.4rem; } }
  @media print {
    body {
      font-size: 9pt; } }

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

sup {
  top: -0.5em; }

sub {
  bottom: -0.25em; }

h1, .looks-like-h1,
h2,
.looks-like-h2,
h3,
.looks-like-h3,
h4,
.looks-like-h4,
h5,
h6 {
  text-rendering: optimizelegibility;
  color: inherit; }
  @media print {
    h1, .looks-like-h1,
    h2,
    .looks-like-h2,
    h3,
    .looks-like-h3,
    h4,
    .looks-like-h4,
    h5,
    h6 {
      break-after: avoid; } }

h1, .looks-like-h1 {
  font-family: "Gotham Narrow SSm A", "Gotham Narrow SSm B", Arial, Helvetica, sans-serif;
  font-size: 2.8rem;
  font-weight: 300;
  line-height: 1.15;
  margin: 0 0 1.5rem; }
  p + h1, p + .looks-like-h1 {
    margin-top: 2.5rem; }
  @media print, (min-width: 768px) {
    h1, .looks-like-h1 {
      font-size: 3.8rem;
      margin-bottom: 1.5rem; }
      p + h1, p + .looks-like-h1 {
        margin-top: 2.5rem; } }


h2,
.looks-like-h2 {
  font-family: "Gotham Narrow SSm A", "Gotham Narrow SSm B", Arial, Helvetica, sans-serif;
  font-size: 2rem;
  font-weight: 400;
  line-height: 1.15;
  margin: 0 0 1rem; }
  p + h2, p + .looks-like-h2 {
    margin-top: 2rem; }
  @media print, (min-width: 768px) {
    
    h2,
    .looks-like-h2 {
      font-size: 2.2rem;
      margin-bottom: 1rem; }
      p + h2, p + .looks-like-h2 {
        margin-top: 2rem; } }


h3,
.looks-like-h3 {
  font-family: "Gotham Narrow SSm A", "Gotham Narrow SSm B", Arial, Helvetica, sans-serif;
  font-size: 1.8rem;
  font-weight: 500;
  line-height: 1.15;
  margin: 0 0 1rem; }
  p + h3, p + .looks-like-h3 {
    margin-top: 2rem; }
  @media print, (min-width: 768px) {
    
    h3,
    .looks-like-h3 {
      font-size: 1.6rem;
      margin-bottom: 1rem; }
      p + h3, p + .looks-like-h3 {
        margin-top: 2rem; } }


h4,
.looks-like-h4 {
  font-family: "Gotham Narrow SSm A", "Gotham Narrow SSm B", Arial, Helvetica, sans-serif;
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1.15;
  margin: 0 0 1rem; }
  p + h4, p + .looks-like-h4 {
    margin-top: 2rem; }
  @media print, (min-width: 768px) {
    
    h4,
    .looks-like-h4 {
      font-size: 1.4rem;
      margin-bottom: 1rem; }
      p + h4, p + .looks-like-h4 {
        margin-top: 2rem; } }

h5 {
  font-family: "Gotham Narrow SSm A", "Gotham Narrow SSm B", Arial, Helvetica, sans-serif;
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1.15;
  margin: 0 0 1rem; }
  p + h5 {
    margin-top: 2rem; }
  @media print, (min-width: 768px) {
    h5 {
      font-size: 1.4rem;
      margin-bottom: 1rem; }
      p + h5 {
        margin-top: 2rem; } }

h6 {
  font-family: "Gotham Narrow SSm A", "Gotham Narrow SSm B", Arial, Helvetica, sans-serif;
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1.15;
  margin: 0 0 1rem; }
  p + h6 {
    margin-top: 2rem; }
  @media print, (min-width: 768px) {
    h6 {
      font-size: 1.4rem;
      margin-bottom: 1rem; }
      p + h6 {
        margin-top: 2rem; } }

p {
  margin: 0 0 2rem;
  padding: 0; }
  @media print, (min-width: 768px) {
    p {
      margin: 0 0 2rem; } }

/*BLOCKQUOTE*/
blockquote {
  margin: 2rem;
  border: none;
  color: var(--text-gray); }
  @media print, (min-width: 768px) {
    blockquote {
      margin: 2rem; } }

/*ABBREVIATION*/
/*does not display on small + touchable screens*/
abbr[title]:after {
  content: ""; }

/*displays only on hover, aria hidden true*/
/*abbreviation indicated by a small dotted line under the text; on hover, the cursor turns into a question mark*/
@media (min-width: 980px) {
  abbr[title] {
    border-bottom: 1px dotted var(--border-gray-80);
    cursor: help; } }

.txt-xxsmall {
  font-size: 0.9rem !important; }

.txt-xsmall, .txt-caps-xsmall {
  font-size: 1.2rem !important; }

small, .txt-small, .txt-caps-small {
  font-size: 1.4rem !important; }

.txt-default-size {
  font-size: 1.6rem !important; }

.txt-large {
  font-size: 1.8rem !important; }

.txt-xlarge {
  font-size: 2rem !important; }

.txt-xxlarge {
  font-size: 3rem !important; }

@media print, (min-width: 768px) {
  .txt-xxsmall {
    font-size: 0.9rem !important; }
  .txt-xsmall, .txt-caps-xsmall {
    font-size: 1.1rem !important; }
  small, .txt-small, .txt-caps-small {
    font-size: 1.2rem !important; }
  .txt-default-size {
    font-size: 1.4rem !important; }
  .txt-large {
    font-size: 1.6rem !important; }
  .txt-xlarge {
    font-size: 2.2rem !important; }
  .txt-xxlarge {
    font-size: 3.2rem !important; } }

.txt-bold {
  font-weight: 700 !important;
  font-style: normal !important; }

.txt-semibold {
  font-weight: 500 !important;
  font-style: normal !important; }

.txt-normal {
  font-weight: 400 !important;
  font-style: normal !important; }

.txt-light {
  font-weight: 300 !important;
  font-style: normal !important; }

.txt-italic {
  font-style: italic !important; }

.txt-center, .txt-center-xs {
  text-align: center !important; }

@media print, (min-width: 480px) {
  .txt-center-sm {
    text-align: center !important; } }

@media print, (min-width: 768px) {
  .txt-center-md {
    text-align: center !important; } }

@media (min-width: 980px) {
  .txt-center-lg {
    text-align: center !important; } }

@media print, (min-width: 1260px) {
  .txt-center-xl {
    text-align: center !important; } }

.txt-left, .txt-left-xs {
  text-align: left !important; }

@media print, (min-width: 480px) {
  .txt-left-sm {
    text-align: left !important; } }

@media print, (min-width: 768px) {
  .txt-left-md {
    text-align: left !important; } }

@media (min-width: 980px) {
  .txt-left-lg {
    text-align: left !important; } }

@media print, (min-width: 1260px) {
  .txt-left-xl {
    text-align: left !important; } }

.txt-right, .txt-right-xs {
  text-align: right !important; }

@media print, (min-width: 480px) {
  .txt-right-sm {
    text-align: right !important; } }

@media print, (min-width: 768px) {
  .txt-right-md {
    text-align: right !important; } }

@media (min-width: 980px) {
  .txt-right-lg {
    text-align: right !important; } }

@media print, (min-width: 1260px) {
  .txt-right-xl {
    text-align: right !important; } }

.txt-caps, .txt-caps-xsmall, .txt-caps-small {
  text-transform: uppercase !important;
  letter-spacing: 1px; }

.txt-transform-none {
  text-transform: none !important; }

.txt-bottom,
.txt-bottom th,
.txt-bottom td {
  vertical-align: bottom !important; }

.txt-top,
.txt-top th,
.txt-top td {
  vertical-align: top !important; }

.txt-middle,
.txt-middle th,
.txt-middle td {
  vertical-align: middle !important; }

.txt-line-normal {
  line-height: normal !important; }

.txt-line-1 {
  line-height: 1em !important; }

.txt-breakword {
  word-wrap: break-word; }

.txt-overflow-ellipsis {
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
  overflow: hidden; }

.nowrap {
  white-space: nowrap; }

/*
    ul      An unorderd list with disc bullet points    
    ol      An ordered list with numbered items
    .no-indent      A list (ordered or unordered) without a left indent
    .no-bullet      An unordered list without bullets and without a left indent
    .lower-alpha    An ordered list with lower-alpha numbering
    .spaced         A list (ordered or unordered) with extra space under each list item

*/
ul,
ol {
  margin: 0 0 2rem 2rem;
  padding: 0; }
  @media print, (min-width: 768px) {
    ul,
    ol {
      margin: 0 0 2rem 4rem;
      padding: 0; } }
  ul.no-indent,
  ol.no-indent {
    margin-left: 1.5rem; }
  ul.spaced > li,
  ol.spaced > li {
    padding-bottom: 0.7143em; }

ul {
  list-style: disc; }
  ul.no-bullet {
    list-style: none;
    margin-left: 0; }

ol {
  list-style: decimal; }
  ol.lower-alpha {
    list-style-type: lower-alpha; }

ul ul,
ul ol,
ol ol,
ol ul {
  margin-bottom: 0; }

.indent, .indent-xs {
  margin-left: 4rem !important; }

@media print, (min-width: 480px) {
  .indent-sm {
    margin-left: 4rem !important; } }

@media print, (min-width: 768px) {
  .indent-md {
    margin-left: 4rem !important; } }

@media (min-width: 980px) {
  .indent-lg {
    margin-left: 4rem !important; } }

@media (min-width: 1260px) {
  .indent-xl {
    margin-left: 4rem !important; } }

/* ASTERISKS */
/*align a single line of text with an asterisk*/
.asterisk-container {
  position: relative;
  top: -4px; }

.asterisk {
  font-weight: bold;
  font-size: 2.4rem;
  position: relative;
  top: 4px;
  line-height: 1; }

/*
    .currency           A container to hold formatted currency with a small dollar sign and elevated cents
                        [Module parent]
    .currency_symbol    A container for the dollar symbol
                        [Child of .currency]
    .currency_sign      A container for the sign - positive or negative
                        [Child of .currency]
    .currency_dollars   A container for the dollars
                        [Child of .currency]
    .currency_cents     A container for the cents 
                        [Child of .currency]
    .currency_label     A container for the label 
                        [Child of .currency.large]

    Example markup:

    <span class="currency" aria-hidden="true">
        <span class="currency_symbol">$</span>
        <span class="currency_dollars">500</span>
        <span class="currency_cents">00</span>
        <span class="currency_label">Avail<span class="screen-reader-only">able</span></span>
    </span>
    <span class="screen-reader-only">$500.00</span>

    */
.currency_symbol, .currency_sign, .currency_cents, .currency.large .currency_label {
  display: inline-block;
  line-height: 1;
  vertical-align: top;
  position: relative; }

.currency_symbol, .currency_cents, .currency.large .currency_label {
  font-size: 1.4rem; }
  @media print, (min-width: 768px) {
    .currency_symbol, .currency_cents, .currency.large .currency_label {
      font-size: 1.2rem; } }

.currency.large .currency_symbol, .currency.large .currency_cents {
  font-size: 1.5rem; }
  @media print, (min-width: 768px) {
    .currency.large .currency_symbol, .currency.large .currency_cents {
      font-size: 2rem; } }

.currency {
  display: inline-block;
  line-height: normal;
  white-space: nowrap;
  font-size: 2rem; }
  @media print, (min-width: 768px) {
    .currency {
      font-size: 1.8rem; } }
  .currency.large {
    font-size: 2.6rem; }
    @media print, (min-width: 768px) {
      .currency.large {
        font-size: 3.2rem; } }
  .currency_symbol {
    top: 4px;
    margin-right: -4px;
    /* scoot closer to the dollars */ }
    @media print, (min-width: 768px) {
      .currency_symbol {
        margin-right: -2px; } }
    .currency.large .currency_symbol {
      top: 5px; }
      @media print, (min-width: 768px) {
        .currency.large .currency_symbol {
          top: 7px;
          margin-right: -6px; } }
  .currency_sign {
    font-size: 1.6rem;
    top: 3px;
    margin-right: -1px;
    /* scoot closer to the dollars */
    min-width: .5em;
    /* make the width more even whether it's + or -*/ }
    @media print, (min-width: 768px) {
      .currency_sign {
        font-size: 1.4rem; } }
  .currency_cents {
    top: 3px;
    margin-left: -3px;
    /* scoot closer to the dollars */ }
    .currency.large .currency_cents {
      top: 4px;
      margin-left: -5px; }
      @media print, (min-width: 768px) {
        .currency.large .currency_cents {
          top: 6px; } }
  .currency.large .currency_dollars {
    font-weight: 300; }
  .currency.large .currency_label {
    text-transform: uppercase;
    letter-spacing: 1px;
    top: 4px; }
    @media print, (min-width: 768px) {
      .currency.large .currency_label {
        top: 8px; } }

/*
    .date               A styled date with a larger month and day and smaller year
                        [Module parent]

    .date_month-day     The month and day, i.e. Jan 4
                        [Child of .date]

    .date_year          The year, i.e. 1980
                        [Child of .date]


    Example markup:
    <div class="date">
        <div class="date_month-day">Jan 4</div>
        <div class="date_year">2017</div>
    </div>

   */
.date {
  line-height: normal;
  padding-top: .1em;
  white-space: nowrap; }

.date_month-day {
  display: inline;
  font-size: 1.8rem; }
  @media print, (min-width: 768px) {
    .date_month-day {
      display: block;
      font-size: 1.6rem; } }

.date_year {
  display: inline;
  font-size: 1.2rem;
  font-weight: 500;
  color: var(--text-light-gray); }
  @media print, (min-width: 768px) {
    .date_year {
      display: block;
      font-size: 1.1rem; } }

.mini-label {
  font-weight: 500;
  font-size: 1.2rem;
  color: var(--text-gray-35);
  text-transform: uppercase;
  letter-spacing: 1px; }
  @media print, (min-width: 768px) {
    .mini-label {
      font-size: 1.1rem; } }

.mini-heading {
  font-weight: 500;
  font-size: 1.4rem;
  color: var(--text-gray-35);
  text-transform: uppercase;
  letter-spacing: 1px; }
  @media print, (min-width: 768px) {
    .mini-heading {
      font-size: 1.2rem; } }

/*#region TEXTCOLORS BRAND REFRESH 2018*/
.txt-white,
.txt-white a,
.txt-white a.active,
.hover .txt-white a:hover,
body a.txt-white,
body a.txt-white.active,
body.hover a.txt-white:hover {
  color: var(--text-white); }

.txt-white-reversed,
.txt-white-reversed a,
.txt-white-reversed a.active,
.hover .txt-white-reversed a:hover,
body a.txt-white-reversed,
body a.txt-white-reversed.active,
body.hover a.txt-white-reversed:hover {
  color: var(--text-white-opacity-85); }

.txt-primary,
.txt-primary a,
.txt-primary a.active,
.hover .txt-primary a:hover,
body a.txt-primary,
body a.txt-primary.active,
body.hover a.txt-primary:hover {
  color: var(--text-primary); }

.txt-link,
.txt-link a,
body a.txt-link {
  color: var(--text-link); }
  .bg-light-gray .txt-link, .bg-light-gray
  .txt-link a, .bg-light-gray
  body a.txt-link {
    color: var(--text-link-dark); }

.txt-link a.active,
.hover .txt-link a:hover,
body a.txt-link.active,
body.hover a.txt-link:hover {
  color: var(--text-link-active-extra-dark); }

a.txt-link,
.txt-link a {
  text-decoration: none;
  border-bottom: 1px solid var(--border-light-gray); }
  a.txt-link:hover, a.txt-link:focus, a.txt-link:active, a.txt-link.active,
  .txt-link a:hover,
  .txt-link a:focus,
  .txt-link a:active,
  .txt-link a.active {
    border-bottom: 1px solid transparent; }

.txt-link-dark a.active,
.hover .txt-link-dark a:hover,
body a.txt-link-dark.active,
body.hover a.txt-link-dark:hover {
  color: var(--text-link-active-extra-dark); }

a.txt-link-dark,
.txt-link-dark a {
  text-decoration: none;
  border-bottom: 1px solid var(--border-med-gray);
  color: var(--text-link-dark); }
  a.txt-link-dark:hover, a.txt-link-dark:focus, a.txt-link-dark:active, a.txt-link-dark.active,
  .txt-link-dark a:hover,
  .txt-link-dark a:focus,
  .txt-link-dark a:active,
  .txt-link-dark a.active {
    border-bottom: 1px solid transparent; }

.txt-gray,
.txt-gray a,
.txt-gray a.active,
.hover .txt-gray a:hover,
body a.txt-gray,
body a.txt-gray.active,
.hover a.txt-gray:hover {
  color: var(--text-gray); }

.txt-med-gray,
.txt-med-gray a,
.txt-med-gray a.active,
.hover .txt-med-gray a:hover,
body a.txt-med-gray,
body a.txt-med-gray.active,
body.hover a.txt-med-gray:hover {
  color: var(--text-med-gray); }

.txt-med-gray-reversed,
.txt-med-gray-reversed a,
.txt-med-gray-reversed a.active,
.hover .txt-med-gray-reversed a:hover,
body a.txt-med-gray-reversed,
body a.txt-med-gray-reversed.active,
body.hover a.txt-med-gray-reversed:hover {
  color: var(--text-white-opacity-70); }

.txt-light-gray,
.txt-light-gray a,
.txt-light-gray a.active,
.hover .txt-light-gray a:hover,
body a.txt-light-gray,
body a.txt-light-gray.active,
.hover a.txt-light-gray:hover {
  color: var(--text-light-gray); }

.txt-light-gray-reversed,
.txt-light-gray-reversed a,
.txt-light-gray-reversed a.active,
.hover .txt-light-gray-reversed a:hover,
body a.txt-light-gray-reversed,
body a.txt-light-gray-reversed.active,
body.hover a.txt-light-gray-reversed:hover {
  color: var(--text-white-opacity-50); }

.txt-faint-gray,
.txt-faint-gray a,
.txt-faint-gray a.active,
.hover .txt-faint-gray a:hover,
body a.txt-faint-gray,
body a.txt-faint-gray.active,
body.hover a.txt-faint-gray:hover {
  color: var(--text-faint-gray); }

.txt-error,
.txt-error a,
.txt-error a.active,
.hover .txt-error a:hover,
body a.txt-error,
body a.txt-error.active,
body.hover a.txt-error:hover {
  color: var(--text-error); }

.icon.txt-error:before {
  color: var(--text-error); }

.txt-success,
.txt-success a,
.txt-success a.active,
.hover .txt-success a:hover,
body a.txt-success,
body a.txt-success.active,
body.hover a.txt-success:hover {
  color: var(--text-success); }

.icon.txt-success:before {
  color: var(--text-success); }

.txt-warn,
.txt-warn a,
.txt-warn a.active,
.hover .txt-warn a:hover,
body a.txt-warn,
body a.txt-warn.active,
body.hover a.txt-warn:hover {
  color: var(--text-warn); }

.icon.txt-warn:before {
  color: var(--text-warn); }

.txt-info,
.txt-info a,
.txt-info a.active,
.hover .txt-info a:hover,
body a.txt-info,
body a.txt-info.active,
body.hover a.txt-info:hover {
  color: var(--text-info); }
  .bg-light-gray .txt-info, .bg-light-gray
  .txt-info a, .bg-light-gray
  .txt-info a.active, .bg-light-gray
  .hover .txt-info a:hover, .bg-light-gray
  body a.txt-info, .bg-light-gray
  body a.txt-info.active, .bg-light-gray
  body.hover a.txt-info:hover {
    color: var(--text-link-dark); }

.icon.txt-info:before {
  color: var(--text-info); }

.hover .txt-active-white:hover,
body.hover a.txt-active-white:hover,
.hover a:hover .txt-active-white,
.hover .txt-active-white:focus,
.hover a:focus .txt-active-white,
.hover .txt-active-white:active,
.hover a:active .txt-active-white,
.txt-active-white.active,
body a.txt-active-white.active,
.active .txt-active-white {
  color: var(--text-white); }

/*#endregion */
.bg-error {
  background-color: var(--bg-error) !important; }

.bg-warn {
  background-color: var(--bg-warn) !important; }

.bg-info {
  background-color: var(--bg-info) !important; }
  .hover .bg-info.clickable:hover, .bg-info.clickable.active {
    background-color: var(--bg-info-light) !important; }

.bg-faint-gray {
  background-color: var(--bg-faint-gray) !important; }

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

.bg-med-gray {
  background-color: var(--bg-med-gray) !important; }

.bg-gray {
  background-color: var(--bg-gray) !important; }
  .hover .bg-gray.clickable:hover, .bg-gray.clickable.active {
    background-color: var(--bg-dark-gray) !important; }

.bg-white {
  background-color: var(--bg-white) !important; }

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

.bg-success {
  background-color: var(--bg-success) !important; }

.border-error {
  border: 0.1429em solid var(--border-error) !important; }

.border-success {
  border: 0.1429em solid var(--border-success) !important; }

.border-warn {
  border: 0.1429em solid var(--border-warn) !important; }

.border-info {
  border: 0.1429em solid var(--border-info) !important; }

.screen-reader-only {
  position: absolute !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px); }

/* SKIP TO MAIN LINK
    .skip-to-main   A "skip to main content" link for accessibility
                    First link on the page for screen readers and keyboard navigation
                    Invisible until it receives focus
                    [Extends .screen-reader-only]

*/
a.skip-to-main {
  display: block;
  top: -2em;
  transition: top .25s ease-in-out; }
  .hover a.skip-to-main:focus {
    top: 0;
    left: 10px;
    z-index: 1200;
    width: auto;
    height: auto;
    clip: auto;
    padding: .5em 2em;
    margin: 0;
    background-color: var(--bg-gray-34);
    outline-color: var(--focus-outline-white-opacity-70);
    color: var(--text-white);
    text-decoration: none;
    border-bottom-right-radius: .2143em;
    border-bottom-left-radius: .2143em; }

img {
  border: 0;
  width: auto;
  height: auto;
  max-width: 100%;
  vertical-align: middle;
  -ms-interpolation-mode: bicubic; }
  img.deco {
    border: 3px solid var(--border-light-gray); }

.img-responsive {
  display: block;
  height: auto;
  margin-left: auto;
  margin-right: auto; }

.img-shadowed {
  border: 1px solid var(--box-shadow-no-opacity);
  box-shadow: 0 0 1px 0 var(--box-shadow); }

.img-drop-shadow {
  filter: drop-shadow(2px 2px 2px var(--filter-drop-shadow)); }

.img-full-width {
  left: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  max-width: 100vw;
  position: relative;
  right: 50%;
  width: 100vw;
  text-align: center; }

.img-illustration {
  max-height: 100px;
  width: auto;
  margin: 1em auto;
  text-decoration: none;
  border-bottom: 0; }

/* BREAKPOINT DETECTION
    

    #BreakpointDetection    A container for empty elements which are set to display:inline; or display:none; depending on the breakpoint.
                            Used by javascript to detect which CSS breakpoint is being displayed.

    .bp-sm                  Set to display:inline; at the SM breakpoint and above
    .bp-md                  Set to display:inline; at the MD breakpoint and above
    .bp-lg                  Set to display:inline; at the LG breakpoint and above
    .bp-xl                  Set to display:inline; at the XL breakpoint and above
    
*/
#BreakpointDetection {
  position: absolute;
  /*remove from flow of document so it doesn't take up space */
  height: 1px;
  width: 1px;
  overflow: hidden;
  bottom: 0;
  left: 0; }

.bp-sm, .bp-md, .bp-lg, .bp-xl {
  display: none; }

@media print, (min-width: 480px) {
  .bp-sm {
    display: inline; } }

@media print, (min-width: 768px) {
  .bp-md {
    display: inline; } }

@media (min-width: 980px) {
  .bp-lg {
    display: inline; } }

@media (min-width: 1260px) {
  .bp-xl {
    display: inline; } }

/* VISIBILITY 
    .invisible  Used to hide an element while preserving the amount of space it takes up.
    .hidden     Used to hide an element while not preserving the amount of space it takes up.  
                
*/
.invisible {
  visibility: hidden !important; }

.hidden {
  display: none !important; }

.visible-xs,
.visible-inline-xs {
  display: none !important; }

@media screen and (max-width: 479px) {
  .visible-xs {
    display: block !important; }
  .visible-inline-xs {
    display: inline !important; } }

@media screen and (min-width: 480px) and (max-width: 767px) {
  .visible-xs.visible-sm {
    display: block !important; }
  .visible-inline-xs.visible-inline-sm {
    display: inline !important; } }

@media print, (min-width: 768px) and (max-width: 979px) {
  .visible-xs.visible-md {
    display: block !important; }
  .visible-inline-xs.visible-inline-md {
    display: inline !important; } }

@media screen and (min-width: 980px) and (max-width: 1259px) {
  .visible-xs.visible-lg {
    display: block !important; }
  .visible-inline-xs.visible-inline-lg {
    display: inline !important; } }

@media screen and (min-width: 1260px) {
  .visible-xs.visible-xl {
    display: block !important; }
  .visible-inline-xs.visible-inline-xl {
    display: inline !important; } }

.visible-sm,
.visible-inline-sm {
  display: none !important; }

@media screen and (max-width: 479px) {
  .visible-sm.visible-xs {
    display: block !important; }
  .visible-inline-sm.visible-inline-xs {
    display: inline !important; } }

@media screen and (min-width: 480px) and (max-width: 767px) {
  .visible-sm {
    display: block !important; }
  .visible-inline-sm {
    display: inline !important; } }

@media print, (min-width: 768px) and (max-width: 979px) {
  .visible-sm.visible-md {
    display: block !important; }
  .visible-sm-inline.visible-md-inline {
    display: inline !important; } }

@media screen and (min-width: 980px) and (max-width: 1259px) {
  .visible-sm.visible-lg {
    display: block !important; }
  .visible-sm-inline.visible-lg-inline {
    display: inline !important; } }

@media screen and (min-width: 1260px) {
  .visible-sm.visible-xl {
    display: block !important; }
  .visible-inline-sm.visible-inline-xl {
    display: inline !important; } }

.visible-md,
.visible-inline-md {
  display: none !important; }

@media screen and (max-width: 479px) {
  .visible-md.visible-xs {
    display: block !important; }
  .visible-inline-md.visible-inline-xs {
    display: inline !important; } }

@media screen and (min-width: 480px) and (max-width: 767px) {
  .visible-md.visible-sm {
    display: block !important; }
  .visible-inline-md.visible-inline-sm {
    display: inline !important; } }

@media print, (min-width: 768px) and (max-width: 979px) {
  .visible-md {
    display: block !important; }
  .visible-inline-md {
    display: inline !important; } }

@media screen and (min-width: 980px) and (max-width: 1259px) {
  .visible-md.visible-lg {
    display: block !important; }
  .visible-inline-md.visible-inline-lg {
    display: inline !important; } }

@media screen and (min-width: 1260px) {
  .visible-md.visible-xl {
    display: block !important; }
  .visible-inline-md.visible-inline-xl {
    display: inline !important; } }

.visible-lg,
.visible-inline-lg {
  display: none !important; }

@media screen and (max-width: 479px) {
  .visible-lg.visible-xs {
    display: block !important; }
  .visible-inline-lg.visible-inline-xs {
    display: inline !important; } }

@media screen and (min-width: 480px) and (max-width: 767px) {
  .visible-lg.visible-sm {
    display: block !important; }
  .visible-inline-lg.visible-inline-sm {
    display: inline !important; } }

@media print, (min-width: 768px) and (max-width: 979px) {
  .visible-lg.visible-md {
    display: block !important; }
  .visible-lg.visible-md.inline {
    display: inline !important; } }

@media screen and (min-width: 980px) and (max-width: 1259px) {
  .visible-lg {
    display: block !important; }
  .visible-inline-lg {
    display: inline !important; } }

@media screen and (min-width: 1260px) {
  .visible-lg.visible-xl {
    display: block !important; }
  .visible-inline-lg.visible-inline-xl {
    display: inline !important; } }

.visible-xl,
.visible-inline-xl {
  display: none !important; }

@media screen and (max-width: 479px) {
  .visible-xl.visible-xs {
    display: block !important; }
  .visible-inline-xl.visible-inline-xs {
    display: inline !important; } }

@media screen and (min-width: 480px) and (max-width: 767px) {
  .visible-xl.visible-sm {
    display: block !important; }
  .visible-inline-xl.visible-inline-sm {
    display: inline !important; } }

@media print, (min-width: 768px) and (max-width: 979px) {
  .visible-xl.visible-md {
    display: block !important; }
  .visible-inline-xl.visible-inline-md {
    display: inline !important; } }

@media screen and (min-width: 980px) and (max-width: 1259px) {
  .visible-xl.visible-lg {
    display: block !important; }
  .visible-inline-xl.visible-inline-lg {
    display: inline !important; } }

@media screen and (min-width: 1260px) {
  .visible-xl {
    display: block !important; }
  .visible-inline-xl {
    display: inline !important; } }

/* Visible Mobile */
.visible-mobile,
.visible-inline-mobile {
  display: none !important; }

@media screen and (max-width: 479px) {
  .visible-mobile,
  .visible-mobile.visible-xs {
    display: block !important; }
  .visible-inline-mobile,
  .visible-inline-mobile.visible-inline-xs {
    display: inline !important; } }

@media screen and (min-width: 480px) and (max-width: 767px) {
  .visible-mobile,
  .visible-mobile.visible-sm {
    display: block !important; }
  .visible-inline-mobile,
  .visible-inline-mobile.visible-inline-sm {
    display: inline !important; } }

@media print, (min-width: 768px) and (max-width: 979px) {
  .visible-mobile.visible-md {
    display: block !important; }
  .visible-inline-mobile.visible-inline-md {
    display: inline !important; } }

@media screen and (min-width: 980px) and (max-width: 1259px) {
  .visible-mobile.visible-lg {
    display: block !important; }
  .visible-inline-mobile.visible-inline-lg {
    display: inline !important; } }

@media screen and (min-width: 1260px) {
  .visible-mobile.visible-xl {
    display: block !important; }
  .visible-inline-mobile.visible-inline-xl {
    display: inline !important; } }

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

.hidden-inline-xs {
  display: inline !important; }

@media screen and (max-width: 479px) {
  .hidden-xs,
  .hidden-inline-xs {
    display: none !important; } }

@media screen and (min-width: 480px) and (max-width: 767px) {
  .hidden-xs.hidden-sm,
  .hidden-inline-xs.hidden-inline-sm {
    display: none !important; } }

@media print, (min-width: 768px) and (max-width: 979px) {
  .hidden-xs.hidden-md,
  .hidden-inline-xs.hidden-inline-md {
    display: none !important; } }

@media screen and (min-width: 980px) and (max-width: 1259px) {
  .hidden-xs.hidden-lg,
  .hidden-inline-xs.hidden-inline-lg {
    display: none !important; } }

@media screen and (min-width: 1260px) {
  .hidden-xs.hidden-xl,
  .hidden-inline-xs.hidden-inline-xl {
    display: none !important; } }

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

.hidden-inline-sm {
  display: inline !important; }

@media screen and (max-width: 479px) {
  .hidden-sm.hidden-xs,
  .hidden-inline-sm.hidden-inline-xs {
    display: none !important; } }

@media screen and (min-width: 480px) and (max-width: 767px) {
  .hidden-sm,
  .hidden-inline-sm {
    display: none !important; } }

@media print, (min-width: 768px) and (max-width: 979px) {
  .hidden-sm.hidden-md,
  .hidden-inline-sm.hidden-inline-md {
    display: none !important; } }

@media screen and (min-width: 980px) and (max-width: 1259px) {
  .hidden-sm.hidden-lg,
  .hidden-inline-sm.hidden-inline-lg {
    display: none !important; } }

@media screen and (min-width: 1260px) {
  .hidden-sm.hidden-xl,
  .hidden-inline-sm.hidden-inline-xl {
    display: none !important; } }

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

.hidden-inline-md {
  display: inline !important; }

@media screen and (max-width: 479px) {
  .hidden-md.hidden-xs,
  .hidden-inline-md.hidden-inline-xs {
    display: none !important; } }

@media screen and (min-width: 480px) and (max-width: 767px) {
  .hidden-md.hidden-sm,
  .hidden-inline-md.hidden-inline-sm {
    display: none !important; } }

@media print, (min-width: 768px) and (max-width: 979px) {
  .hidden-md,
  .hidden-inline-md {
    display: none !important; } }

@media screen and (min-width: 980px) and (max-width: 1259px) {
  .hidden-md.hidden-lg,
  .hidden-inline-md.hidden-inline-lg {
    display: none !important; } }

@media screen and (min-width: 1260px) {
  .hidden-md.hidden-xl,
  .hidden-inline-md.hidden-inline-xl {
    display: none !important; } }

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

.hidden-inline-lg {
  display: inline !important; }

@media screen and (max-width: 479px) {
  .hidden-lg.hidden-xs,
  .hidden-inline-lg.hidden-inline-xs {
    display: none !important; } }

@media screen and (min-width: 480px) and (max-width: 767px) {
  .hidden-lg.hidden-sm,
  .hidden-inline-lg.hidden-inline-sm {
    display: none !important; } }

@media print, (min-width: 768px) and (max-width: 979px) {
  .hidden-lg.hidden-md,
  .hidden-inline-lg.hidden-inline-md {
    display: none !important; } }

@media screen and (min-width: 980px) and (max-width: 1259px) {
  .hidden-lg,
  .hidden-inline-lg {
    display: none !important; } }

@media screen and (min-width: 1260px) {
  .hidden-lg.hidden-xl,
  .hidden-inline-lg.hidden-inline-xl {
    display: none !important; } }

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

.hidden-inline-xl {
  display: inline !important; }

@media screen and (max-width: 479px) {
  .hidden-xl.hidden-xs,
  .hidden-inline-xl.hidden-inline-xs {
    display: none !important; } }

@media screen and (min-width: 480px) and (max-width: 767px) {
  .hidden-xl.hidden-sm,
  .hidden-inline-xl.hidden-inline-sm {
    display: none !important; } }

@media print, (min-width: 768px) and (max-width: 979px) {
  .hidden-xl.hidden-md,
  .hidden-inline-xl.hidden-inline-md {
    display: none !important; } }

@media screen and (min-width: 980px) and (max-width: 1259px) {
  .hidden-xl.hidden-lg,
  .hidden-inline-xl.hidden-inline-lg {
    display: none !important; } }

@media screen and (min-width: 1260px) {
  .hidden-xl,
  .hidden-inline-xl {
    display: none !important; } }

/* hidden mobile*/
.hidden-mobile {
  display: block !important; }

.hidden-inline-mobile {
  display: inline !important; }

@media screen and (max-width: 767px) {
  .hidden-mobile,
  .hidden-inline-mobile {
    display: none !important; } }

@media screen and (min-width: 480px) and (max-width: 767px) {
  .hidden-mobile,
  .hidden-inline-mobile,
  .hidden-mobile.hidden-sm,
  .hidden-inline-mobile.hidden-inline-sm {
    display: none !important; } }

@media print, (min-width: 768px) and (max-width: 979px) {
  .hidden-mobile.hidden-md,
  .hidden-inline-mobile.hidden-inline-md {
    display: none !important; } }

@media screen and (min-width: 980px) and (max-width: 1259px) {
  .hidden-mobile.hidden-lg,
  .hidden-inline-mobile.hidden-inline-lg {
    display: none !important; } }

@media screen and (min-width: 1260px) {
  .hidden-mobile.hidden-xl,
  .hidden-inline-mobile.hidden-inline-xl {
    display: none !important; } }

/* .table-cell 
*/
@media print, (min-width: 768px) {
  .hidden-xs.hidden-sm.table-cell {
    display: table-cell !important; } }

/* PADDING & MARGIN HELPERS

p,m = padding, margin
a,t,r,b,l,h,v = all,top,right,bottom,left,horizontal,vertical
0,1,2,3,4,5,6 = units of padding


*/
.pt0, .pv0, .pa0 {
  padding-top: 0 !important; }

.pt1, .pv1, .pa1 {
  padding-top: 0.5rem !important; }

.pt2, .pv2, .pa2 {
  padding-top: 1rem !important; }

.pt3, .pv3, .pa3 {
  padding-top: 1.5rem !important; }

.pt4, .pv4, .pa4 {
  padding-top: 2rem !important; }

.pt5, .pv5, .pa5 {
  padding-top: 2.5rem !important; }

.pt6, .pv6, .pa6 {
  padding-top: 3rem !important; }

.pr0, .ph0, .pa0 {
  padding-right: 0 !important; }

.pr1, .ph1, .pa1 {
  padding-right: 0.5rem !important; }

.pr2, .ph2, .pa2 {
  padding-right: 1rem !important; }

.pr3, .ph3, .pa3 {
  padding-right: 1.5rem !important; }

.pr4, .ph4, .pa4 {
  padding-right: 2rem !important; }

.pr5, .ph5, .pa5 {
  padding-right: 2.5rem !important; }

.pr6, .ph6, .pa6 {
  padding-right: 3rem !important; }

.pb0, .pv0, .pa0 {
  padding-bottom: 0 !important; }

.pb1, .pv1, .pa1 {
  padding-bottom: 0.5rem !important; }

.pb2, .pv2, .pa2 {
  padding-bottom: 1rem !important; }

.pb3, .pv3, .pa3 {
  padding-bottom: 1.5rem !important; }

.pb4, .pv4, .pa4 {
  padding-bottom: 2rem !important; }

.pb5, .pv5, .pa5 {
  padding-bottom: 2.5rem !important; }

.pb6, .pv6, .pa6 {
  padding-bottom: 3rem !important; }

.pl0, .ph0, .pa0 {
  padding-left: 0 !important; }

.pl1, .ph1, .pa1 {
  padding-left: 0.5rem !important; }

.pl2, .ph2, .pa2 {
  padding-left: 1rem !important; }

.pl3, .ph3, .pa3 {
  padding-left: 1.5rem !important; }

.pl4, .ph4, .pa4 {
  padding-left: 2rem !important; }

.pl5, .ph5, .pa5 {
  padding-left: 2.5rem !important; }

.pl6, .ph6, .pa6 {
  padding-left: 3rem !important; }

.mt0, .mv0, .ma0 {
  margin-top: 0 !important; }

.mt1, .mv1, .ma1 {
  margin-top: 0.5rem !important; }

.mt2, .mv2, .ma2 {
  margin-top: 1rem !important; }

.mt3, .mv3, .ma3 {
  margin-top: 1.5rem !important; }

.mt4, .mv4, .ma4 {
  margin-top: 2rem !important; }

.mt5, .mv5, .ma5 {
  margin-top: 2.5rem !important; }

.mt6, .mv6, .ma6 {
  margin-top: 3rem !important; }

.mr0, .mh0, .ma0 {
  margin-right: 0 !important; }

.mr1, .mh1, .ma1 {
  margin-right: 0.5rem !important; }

.mr2, .mh2, .ma2 {
  margin-right: 1rem !important; }

.mr3, .mh3, .ma3 {
  margin-right: 1.5rem !important; }

.mr4, .mh4, .ma4 {
  margin-right: 2rem !important; }

.mr5, .mh5, .ma5 {
  margin-right: 2.5rem !important; }

.mr6, .mh6, .ma6 {
  margin-right: 3rem !important; }

.mb0, .mv0, .ma0 {
  margin-bottom: 0 !important; }

.mb1, .mv1, .ma1 {
  margin-bottom: 0.5rem !important; }

.mb2, .mv2, .ma2 {
  margin-bottom: 1rem !important; }

.mb3, .mv3, .ma3 {
  margin-bottom: 1.5rem !important; }

.mb4, .mv4, .ma4 {
  margin-bottom: 2rem !important; }

.mb5, .mv5, .ma5 {
  margin-bottom: 2.5rem !important; }

.mb6, .mv6, .ma6 {
  margin-bottom: 3rem !important; }

.ml0, .mh0, .ma0 {
  margin-left: 0 !important; }

.ml1, .mh1, .ma1 {
  margin-left: 0.5rem !important; }

.ml2, .mh2, .ma2 {
  margin-left: 1rem !important; }

.ml3, .mh3, .ma3 {
  margin-left: 1.5rem !important; }

.ml4, .mh4, .ma4 {
  margin-left: 2rem !important; }

.ml5, .mh5, .ma5 {
  margin-left: 2.5rem !important; }

.ml6, .mh6, .ma6 {
  margin-left: 3rem !important; }

/* PADDING & MARGIN HELPERS 

p,m = padding,margin
a,t,r,b,l,h,v = all,top,right,bottom,left,horizontal,vertical
xs, s,m,l,xl,n = xsmall,small,medium,large,extra-large,none
*/
.ptn, .pvn, .pan {
  padding-top: 0 !important; }

.ptxs, .pvxs, .paxs {
  padding-top: .2143em !important;
  /*3px assuming 14px base*/ }

.pts, .pvs, .pas {
  padding-top: 0.5rem !important; }

.ptm, .pvm, .pam {
  padding-top: 1rem !important; }

.ptl, .pvl, .pal {
  padding-top: 2rem !important; }

.ptxl, .pvxl, .paxl {
  padding-top: 3rem !important; }

.prn, .phn, .pan {
  padding-right: 0 !important; }

.prxs, .phxs, .paxs {
  padding-right: .2143em !important; }

.prs, .phs, .pas {
  padding-right: 0.5rem !important; }

.prm, .phm, .pam {
  padding-right: 1rem !important; }

.prl, .phl, .pal {
  padding-right: 2rem !important; }

.prxl, .phxl, .paxl {
  padding-right: 3rem !important; }

.pbn, .pvn, .pan {
  padding-bottom: 0 !important; }

.pbxs, .pvxs, .paxs {
  padding-bottom: .2143em !important; }

.pbs, .pvs, .pas {
  padding-bottom: 0.5rem !important; }

.pbm, .pvm, .pam {
  padding-bottom: 1rem !important; }

.pbl, .pvl, .pal {
  padding-bottom: 2rem !important; }

.pbxl, .pvxl, .paxl {
  padding-bottom: 3rem !important; }

.pln, .phn, .pan {
  padding-left: 0 !important; }

.plxs, .phxs, .paxs {
  padding-left: .2143em !important;
  /*3px assuming 14px base*/ }

.pls, .phs, .pas {
  padding-left: 0.5rem !important; }

.plm, .phm, .pam {
  padding-left: 1rem !important; }

.pll, .phl, .pal {
  padding-left: 2rem !important; }

.plxl, .phxl, .paxl {
  padding-left: 3rem !important; }

.mtn, .mvn, .man {
  margin-top: 0 !important; }

.mtxs, .mvxs, .maxs {
  margin-top: .2143em !important;
  /*3px assuming 14px base*/ }

.mts, .mvs, .mas {
  margin-top: 0.5rem !important; }

.mtm, .mvm, .mam {
  margin-top: 1rem !important; }

.mtl, .mvl, .mal {
  margin-top: 2rem !important; }

.mtxl, .mvxl, .maxl {
  margin-top: 3rem !important; }

.mrn, .mhn, .man {
  margin-right: 0 !important; }

.mrxs, .mhxs, .maxs {
  margin-right: .2143em !important;
  /*3px assuming 14px base*/ }

.mrs, .mhs, .mas {
  margin-right: 0.5rem !important; }

.mrm, .mhm, .mam {
  margin-right: 1rem !important; }

.mrl, .mhl, .mal {
  margin-right: 2rem !important; }

.mrxl, .mhxl, .maxl {
  margin-right: 3rem !important; }

.mbn, .mvn, .man {
  margin-bottom: 0 !important; }

.mbxs, .mvxs, .maxs {
  margin-bottom: .2143em !important;
  /*3px assuming 14px base*/ }

.mbs, .mvs, .mas {
  margin-bottom: 0.5rem !important; }

.mbm, .mvm, .mam {
  margin-bottom: 1rem !important; }

.mbl, .mvl, .mal {
  margin-bottom: 2rem !important; }

.mbxl, .mvxl, .maxl {
  margin-bottom: 3rem !important; }

.mln, .mhn, .man {
  margin-left: 0 !important; }

.mlxs, .mhxs, .maxs {
  margin-left: .2143em !important;
  /*3px assuming 14px base*/ }

.mls, .mhs, .mas {
  margin-left: 0.5rem !important; }

.mlm, .mhm, .mam {
  margin-left: 1rem !important; }

.mll, .mhl, .mal {
  margin-left: 2rem !important; }

.mlxl, .mhxl, .maxl {
  margin-left: 3rem !important; }

/* HORIZONTAL RULES
    .condensed      An hr with less space above and below
    .on-light-gray  An hr that can be placed on a light-gray background that does not turn the rule white in color
    .on-faint-gray  An hr that can be placed on a faint-gray background that does not turn the rule white in color
*/
hr {
  margin: 1.0714em 0;
  border: 0;
  height: 0;
  border-top: 1px solid var(--border-light-gray);
  border-bottom: 1px solid var(--border-white);
  box-sizing: content-box;
  width: 100%; }
  @media print, (min-width: 768px) {
    hr {
      margin: 1.4286em 0;
      /* 20px 0 */ } }
  hr.condensed {
    margin: .5em 0;
    /* 7px 0 */ }
    @media print, (min-width: 768px) {
      hr.condensed {
        margin: .7143em 0;
        /* 10px 0 */ } }
  hr.on-light-gray {
    border-top-color: var(--border-gray-87);
    border-bottom-color: var(--border-light-gray); }
  hr.on-faint-gray {
    border-top-color: var(--border-gray-90);
    border-bottom-color: var(--border-faint-gray); }

/*ROUNDED CORNERS
    r = round
    t = top
    b = bottom
    r = right
    l = left
    a = all
*/
.corner-rtr,
.corner-rt,
.corner-rr,
.corner-ra {
  border-top-right-radius: 0.1875em !important;
  /* 3px/16px */ }
  @media (min-width: 768px) {
    .corner-rtr-medium,
    .corner-rt-medium,
    .corner-rr-medium,
    .corner-ra-medium {
      border-top-right-radius: 0.1875em !important;
      /* 3px/16px */ } }

.corner-rtl,
.corner-rt,
.corner-rl,
.corner-ra {
  border-top-left-radius: 0.1875em !important;
  /* 3px/16px */ }
  @media (min-width: 768px) {
    .corner-rtl-medium,
    .corner-rt-medium,
    .corner-rl-medium,
    .corner-ra-medium {
      border-top-left-radius: 0.1875em !important;
      /* 3px/16px */ } }

.corner-rbr,
.corner-rb,
.corner-rr,
.corner-ra {
  border-bottom-right-radius: 0.1875em !important;
  /* 3px/16px */ }
  @media (min-width: 768px) {
    .corner-rbr-medium,
    .corner-rb-medium,
    .corner-rr-medium,
    .corner-ra-medium {
      border-bottom-right-radius: 0.1875em !important;
      /* 3px/16px */ } }

.corner-rbl,
.corner-rb,
.corner-rl,
.corner-ra {
  border-bottom-left-radius: 0.1875em !important;
  /* 3px/16px */ }
  @media (min-width: 768px) {
    .corner-rbl-medium,
    .corner-rb-medium,
    .corner-rl-medium,
    .corner-ra-medium {
      border-bottom-left-radius: 0.1875em !important;
      /* 3px/16px */ } }

/* PRINT */
.print-only {
  display: none !important; }
  @media print {
    .print-only {
      display: block !important; } }

.print-avoid-break-inside {
  page-break-inside: avoid; }

@media print {
  .no-print, .no-print.visible-xs, .no-print.visible-sm, .no-print.visible-md, .no-print.visible-lg, .no-print.visible-xl, .no-print.visible-inline-xs, .no-print.visible-inline-sm, .no-print.visible-inline-md, .no-print.visible-inline-lg, .no-print.visible-inline-xl {
    display: none !important; } }

.clickable {
  cursor: pointer !important; }

/* DISPLAY */
.inline-block {
  display: inline-block; }

.block {
  display: block; }

.inline {
  display: inline; }

.flex {
  display: -ms-flexbox;
  display: flex; }

/* POSITION */
.position-fixed {
  position: fixed; }

.position-sticky {
  position: sticky; }

.position-relative {
  position: relative; }

/* WIDTHS */
.full-width {
  width: 100%; }

.auto-width {
  width: auto !important; }

/* CENTERING */
.center-container {
  width: 100%;
  text-align: center; }

.center {
  margin-left: auto !important;
  margin-right: auto !important;
  text-align: left; }

/* AUTO MARGINS */
.ml-auto {
  margin-left: auto !important; }

.mr-auto {
  margin-right: auto !important; }

/* COLUMN BREAKS */
.break-inside-avoid {
  break-inside: avoid; }

/* CLEARS, FLOATS */
.clearfix:before, .clearfix:after {
  display: table;
  content: ""; }

.clearfix:after {
  clear: both; }

.right {
  float: right; }
  @media print, (min-width: 480px) {
    .right-sm {
      float: right; } }
  @media print, (min-width: 768px) {
    .right-md {
      float: right; } }
  @media (min-width: 980px) {
    .right-lg {
      float: right; } }
  @media (min-width: 1260px) {
    .right-xl {
      float: right; } }

.left {
  float: left; }
  @media print, (min-width: 480px) {
    .left-sm {
      float: left; } }
  @media print, (min-width: 768px) {
    .left-md {
      float: left; } }
  @media (min-width: 980px) {
    .left-lg {
      float: left; } }
  @media (min-width: 1260px) {
    .left-xl {
      float: left; } }

/* BORDERS */
.bt-none {
  border-top: none !important; }

.bb-none {
  border-bottom: none !important; }

/*
   CSS GRID STYLES

*/
/* Variables for CSS Grid Functions and Mixins*/
/*
    FUNCTIONS FOR CSS GRID STYLES 

    (borrowed from bootstrap)
    These funtions will not generate CSS on their own.
    Will be used in the @mixin and @each

    breakpoint-infix ()     Will adds the -sm, -md, -lg & -xl to the rule (does not add -xs)

    breakpoint-min()        This checks if the breakpoint has a value (480px, 768px, etc.)

*/
/*
   MIXIN CSS GRID STYLES
   These mixins will not generate CSS on their own.
   Must be used with the @include

    media-breakpoint-up()               Figures out if there is a value for the breakpoint and will add it when it builds out the media queries
                                        Example: @media (inserts value) {...}
                                        (also borrowed from bootstrap)
                                        [Mixin Selector]

    make-grid-rows()                    will make all the rules for number of rows for the grid  (1 through max-rows)
                                        Example: .grid .rows-3
                                        [Mixin Selector]

    make-grid-cols()                    will make all the rules for number of columns for the grid  (1 through max-columns)
                                        Example: .grid .cols-3
                                        [Mixin Selector]

    make-grid-item-position-row()       Will make all the rules for what row the grid item will start
                                        Example: .grid_item .position-row-3
                                        [Mixin Selector]

    make-grid-item-position-col()       Will make all the rules for what column the grid item will start
                                        Example: .grid_item .position-column-3
                                        [Mixin Selector]

    make-grid-item-rowspan()            Will make all the rules for how tall grid item will be
                                        Example: .grid_item .rowspan-3
                                        [Mixin Selector]

    make-grid-item-colspan()            Will make all the rules for how wide grid item will be
                                        Example: .grid_item .colspan-3
                                        [Mixin Selector]

*/
/* GRID 

    .grid           Container for the Grid items
                    Define/Extend the size of the grid using (.cols-* .rows-* see below)
                    [Parent Module]

    .grid_item      Individual children of the grid
                    Define/extend .grid_items with size and position (.rowspan-*, .colspan-*, .position-row-*, & .position-col-* see below)
                    [Child Module]

   Example Markup:
    <div class="grid">
        <div class="grid_item">
            ...
        </div>
        <div class="grid_item">
            ...
        </div>
    </div>

*/
.grid {
  display: -ms-grid;
  display: grid; }
  @media (min-width: 480px) {
    .grid-sm {
      display: -ms-grid;
      display: grid; } }
  @media (min-width: 768px) {
    .grid-md {
      display: -ms-grid;
      display: grid; } }
  @media (min-width: 980px) {
    .grid-lg {
      display: -ms-grid;
      display: grid; } }
  @media (min-width: 1260px) {
    .grid-xl {
      display: -ms-grid;
      display: grid; } }

/* 
 
    .rows-*             Defines/sets the number of rows the grid will have          
                        Examples: .rows-3, .rows-sm-3, .rows-md-3,... etc.
                        Max of 12 rows
                        [Extends .grid]

    .cols-*             Defines/sets the number of columns the grid will have             
                        Examples: .cols-12, .cols-sm-12, .cols-md-12,... etc.
                        Max of 12 columns
                        [Extends .grid]
    
    .postion-row-*      Defines/sets the start position for the grid item vertically - "Start in row 6"
                        Examples: .position-row-6, .position-row-sm-6, .position-row-md-6,... etc.
                        Max of 12 rows
                        [Extends .grid_item]

    .postion-col-*      Defines/sets the start position for the grid item horizontally - "Start in column 3"
                        Examples: .position-cols-3, .position-cols-sm-3, .position-cols-md-3,... etc.
                        Max of 12 columns
                        [Extends .grid_item]

    .rowspan-*          Defines the height for the grid item - "Span three rows"
                        Examples: .rowspan-3, .rowspan-sm-3, .rowspan-md-3,... etc.
                        Max of 12 rows
                        [Extends .grid_item]

    .colspan-*          Defines the width for the grid item - "Span four columns"
                        Examples: .colspan-4, .colspan-sm-4, .colspan-md-4,... etc.
                        Max of 12 columns
                        [Extends .grid_item]


    Example Markup:
    <div class="grid cols-3 rows-2">
        <div class="grid_item colspan-2 rowspan-1">
            ...
        </div>
        <div class="grid_item position-row-1 position-col-3">
            ...
        </div>
    </div>
*/
/*This magic creates all of the above css grid extension rules */
.rows-1 {
  -ms-grid-rows: (auto)[1];
  grid-template-rows: repeat(1, auto); }

.rows-2 {
  -ms-grid-rows: (auto)[2];
  grid-template-rows: repeat(2, auto); }

.rows-3 {
  -ms-grid-rows: (auto)[3];
  grid-template-rows: repeat(3, auto); }

.rows-4 {
  -ms-grid-rows: (auto)[4];
  grid-template-rows: repeat(4, auto); }

.rows-5 {
  -ms-grid-rows: (auto)[5];
  grid-template-rows: repeat(5, auto); }

.rows-6 {
  -ms-grid-rows: (auto)[6];
  grid-template-rows: repeat(6, auto); }

.rows-7 {
  -ms-grid-rows: (auto)[7];
  grid-template-rows: repeat(7, auto); }

.rows-8 {
  -ms-grid-rows: (auto)[8];
  grid-template-rows: repeat(8, auto); }

.rows-9 {
  -ms-grid-rows: (auto)[9];
  grid-template-rows: repeat(9, auto); }

.rows-10 {
  -ms-grid-rows: (auto)[10];
  grid-template-rows: repeat(10, auto); }

.rows-11 {
  -ms-grid-rows: (auto)[11];
  grid-template-rows: repeat(11, auto); }

.rows-12 {
  -ms-grid-rows: (auto)[12];
  grid-template-rows: repeat(12, auto); }

.cols-1 {
  -ms-grid-columns: (1fr)[1];
  grid-template-columns: repeat(1, 1fr); }

.cols-2 {
  -ms-grid-columns: (1fr)[2];
  grid-template-columns: repeat(2, 1fr); }

.cols-3 {
  -ms-grid-columns: (1fr)[3];
  grid-template-columns: repeat(3, 1fr); }

.cols-4 {
  -ms-grid-columns: (1fr)[4];
  grid-template-columns: repeat(4, 1fr); }

.cols-5 {
  -ms-grid-columns: (1fr)[5];
  grid-template-columns: repeat(5, 1fr); }

.cols-6 {
  -ms-grid-columns: (1fr)[6];
  grid-template-columns: repeat(6, 1fr); }

.cols-7 {
  -ms-grid-columns: (1fr)[7];
  grid-template-columns: repeat(7, 1fr); }

.cols-8 {
  -ms-grid-columns: (1fr)[8];
  grid-template-columns: repeat(8, 1fr); }

.cols-9 {
  -ms-grid-columns: (1fr)[9];
  grid-template-columns: repeat(9, 1fr); }

.cols-10 {
  -ms-grid-columns: (1fr)[10];
  grid-template-columns: repeat(10, 1fr); }

.cols-11 {
  -ms-grid-columns: (1fr)[11];
  grid-template-columns: repeat(11, 1fr); }

.cols-12 {
  -ms-grid-columns: (1fr)[12];
  grid-template-columns: repeat(12, 1fr); }

.grid_item.position-row-1 {
  -ms-grid-row: 1;
  grid-row-start: 1; }

.grid_item.position-row-2 {
  -ms-grid-row: 2;
  grid-row-start: 2; }

.grid_item.position-row-3 {
  -ms-grid-row: 3;
  grid-row-start: 3; }

.grid_item.position-row-4 {
  -ms-grid-row: 4;
  grid-row-start: 4; }

.grid_item.position-row-5 {
  -ms-grid-row: 5;
  grid-row-start: 5; }

.grid_item.position-row-6 {
  -ms-grid-row: 6;
  grid-row-start: 6; }

.grid_item.position-row-7 {
  -ms-grid-row: 7;
  grid-row-start: 7; }

.grid_item.position-row-8 {
  -ms-grid-row: 8;
  grid-row-start: 8; }

.grid_item.position-row-9 {
  -ms-grid-row: 9;
  grid-row-start: 9; }

.grid_item.position-row-10 {
  -ms-grid-row: 10;
  grid-row-start: 10; }

.grid_item.position-row-11 {
  -ms-grid-row: 11;
  grid-row-start: 11; }

.grid_item.position-row-12 {
  -ms-grid-row: 12;
  grid-row-start: 12; }

.grid_item.position-col-1 {
  -ms-grid-column: 1;
  grid-column-start: 1; }

.grid_item.position-col-2 {
  -ms-grid-column: 2;
  grid-column-start: 2; }

.grid_item.position-col-3 {
  -ms-grid-column: 3;
  grid-column-start: 3; }

.grid_item.position-col-4 {
  -ms-grid-column: 4;
  grid-column-start: 4; }

.grid_item.position-col-5 {
  -ms-grid-column: 5;
  grid-column-start: 5; }

.grid_item.position-col-6 {
  -ms-grid-column: 6;
  grid-column-start: 6; }

.grid_item.position-col-7 {
  -ms-grid-column: 7;
  grid-column-start: 7; }

.grid_item.position-col-8 {
  -ms-grid-column: 8;
  grid-column-start: 8; }

.grid_item.position-col-9 {
  -ms-grid-column: 9;
  grid-column-start: 9; }

.grid_item.position-col-10 {
  -ms-grid-column: 10;
  grid-column-start: 10; }

.grid_item.position-col-11 {
  -ms-grid-column: 11;
  grid-column-start: 11; }

.grid_item.position-col-12 {
  -ms-grid-column: 12;
  grid-column-start: 12; }

.grid_item.rowspan-1 {
  -ms-grid-row-span: 1;
  grid-row-end: span 1; }

.grid_item.rowspan-2 {
  -ms-grid-row-span: 2;
  grid-row-end: span 2; }

.grid_item.rowspan-3 {
  -ms-grid-row-span: 3;
  grid-row-end: span 3; }

.grid_item.rowspan-4 {
  -ms-grid-row-span: 4;
  grid-row-end: span 4; }

.grid_item.rowspan-5 {
  -ms-grid-row-span: 5;
  grid-row-end: span 5; }

.grid_item.rowspan-6 {
  -ms-grid-row-span: 6;
  grid-row-end: span 6; }

.grid_item.rowspan-7 {
  -ms-grid-row-span: 7;
  grid-row-end: span 7; }

.grid_item.rowspan-8 {
  -ms-grid-row-span: 8;
  grid-row-end: span 8; }

.grid_item.rowspan-9 {
  -ms-grid-row-span: 9;
  grid-row-end: span 9; }

.grid_item.rowspan-10 {
  -ms-grid-row-span: 10;
  grid-row-end: span 10; }

.grid_item.rowspan-11 {
  -ms-grid-row-span: 11;
  grid-row-end: span 11; }

.grid_item.rowspan-12 {
  -ms-grid-row-span: 12;
  grid-row-end: span 12; }

.grid_item.colspan-1 {
  -ms-grid-column-span: 1;
  grid-column-end: span 1; }

.grid_item.colspan-2 {
  -ms-grid-column-span: 2;
  grid-column-end: span 2; }

.grid_item.colspan-3 {
  -ms-grid-column-span: 3;
  grid-column-end: span 3; }

.grid_item.colspan-4 {
  -ms-grid-column-span: 4;
  grid-column-end: span 4; }

.grid_item.colspan-5 {
  -ms-grid-column-span: 5;
  grid-column-end: span 5; }

.grid_item.colspan-6 {
  -ms-grid-column-span: 6;
  grid-column-end: span 6; }

.grid_item.colspan-7 {
  -ms-grid-column-span: 7;
  grid-column-end: span 7; }

.grid_item.colspan-8 {
  -ms-grid-column-span: 8;
  grid-column-end: span 8; }

.grid_item.colspan-9 {
  -ms-grid-column-span: 9;
  grid-column-end: span 9; }

.grid_item.colspan-10 {
  -ms-grid-column-span: 10;
  grid-column-end: span 10; }

.grid_item.colspan-11 {
  -ms-grid-column-span: 11;
  grid-column-end: span 11; }

.grid_item.colspan-12 {
  -ms-grid-column-span: 12;
  grid-column-end: span 12; }

@media (min-width: 480px) {
  .rows-sm-1 {
    -ms-grid-rows: (auto)[1];
    grid-template-rows: repeat(1, auto); }
  .rows-sm-2 {
    -ms-grid-rows: (auto)[2];
    grid-template-rows: repeat(2, auto); }
  .rows-sm-3 {
    -ms-grid-rows: (auto)[3];
    grid-template-rows: repeat(3, auto); }
  .rows-sm-4 {
    -ms-grid-rows: (auto)[4];
    grid-template-rows: repeat(4, auto); }
  .rows-sm-5 {
    -ms-grid-rows: (auto)[5];
    grid-template-rows: repeat(5, auto); }
  .rows-sm-6 {
    -ms-grid-rows: (auto)[6];
    grid-template-rows: repeat(6, auto); }
  .rows-sm-7 {
    -ms-grid-rows: (auto)[7];
    grid-template-rows: repeat(7, auto); }
  .rows-sm-8 {
    -ms-grid-rows: (auto)[8];
    grid-template-rows: repeat(8, auto); }
  .rows-sm-9 {
    -ms-grid-rows: (auto)[9];
    grid-template-rows: repeat(9, auto); }
  .rows-sm-10 {
    -ms-grid-rows: (auto)[10];
    grid-template-rows: repeat(10, auto); }
  .rows-sm-11 {
    -ms-grid-rows: (auto)[11];
    grid-template-rows: repeat(11, auto); }
  .rows-sm-12 {
    -ms-grid-rows: (auto)[12];
    grid-template-rows: repeat(12, auto); }
  .cols-sm-1 {
    -ms-grid-columns: (1fr)[1];
    grid-template-columns: repeat(1, 1fr); }
  .cols-sm-2 {
    -ms-grid-columns: (1fr)[2];
    grid-template-columns: repeat(2, 1fr); }
  .cols-sm-3 {
    -ms-grid-columns: (1fr)[3];
    grid-template-columns: repeat(3, 1fr); }
  .cols-sm-4 {
    -ms-grid-columns: (1fr)[4];
    grid-template-columns: repeat(4, 1fr); }
  .cols-sm-5 {
    -ms-grid-columns: (1fr)[5];
    grid-template-columns: repeat(5, 1fr); }
  .cols-sm-6 {
    -ms-grid-columns: (1fr)[6];
    grid-template-columns: repeat(6, 1fr); }
  .cols-sm-7 {
    -ms-grid-columns: (1fr)[7];
    grid-template-columns: repeat(7, 1fr); }
  .cols-sm-8 {
    -ms-grid-columns: (1fr)[8];
    grid-template-columns: repeat(8, 1fr); }
  .cols-sm-9 {
    -ms-grid-columns: (1fr)[9];
    grid-template-columns: repeat(9, 1fr); }
  .cols-sm-10 {
    -ms-grid-columns: (1fr)[10];
    grid-template-columns: repeat(10, 1fr); }
  .cols-sm-11 {
    -ms-grid-columns: (1fr)[11];
    grid-template-columns: repeat(11, 1fr); }
  .cols-sm-12 {
    -ms-grid-columns: (1fr)[12];
    grid-template-columns: repeat(12, 1fr); }
  .grid_item.position-row-sm-1 {
    -ms-grid-row: 1;
    grid-row-start: 1; }
  .grid_item.position-row-sm-2 {
    -ms-grid-row: 2;
    grid-row-start: 2; }
  .grid_item.position-row-sm-3 {
    -ms-grid-row: 3;
    grid-row-start: 3; }
  .grid_item.position-row-sm-4 {
    -ms-grid-row: 4;
    grid-row-start: 4; }
  .grid_item.position-row-sm-5 {
    -ms-grid-row: 5;
    grid-row-start: 5; }
  .grid_item.position-row-sm-6 {
    -ms-grid-row: 6;
    grid-row-start: 6; }
  .grid_item.position-row-sm-7 {
    -ms-grid-row: 7;
    grid-row-start: 7; }
  .grid_item.position-row-sm-8 {
    -ms-grid-row: 8;
    grid-row-start: 8; }
  .grid_item.position-row-sm-9 {
    -ms-grid-row: 9;
    grid-row-start: 9; }
  .grid_item.position-row-sm-10 {
    -ms-grid-row: 10;
    grid-row-start: 10; }
  .grid_item.position-row-sm-11 {
    -ms-grid-row: 11;
    grid-row-start: 11; }
  .grid_item.position-row-sm-12 {
    -ms-grid-row: 12;
    grid-row-start: 12; }
  .grid_item.position-col-sm-1 {
    -ms-grid-column: 1;
    grid-column-start: 1; }
  .grid_item.position-col-sm-2 {
    -ms-grid-column: 2;
    grid-column-start: 2; }
  .grid_item.position-col-sm-3 {
    -ms-grid-column: 3;
    grid-column-start: 3; }
  .grid_item.position-col-sm-4 {
    -ms-grid-column: 4;
    grid-column-start: 4; }
  .grid_item.position-col-sm-5 {
    -ms-grid-column: 5;
    grid-column-start: 5; }
  .grid_item.position-col-sm-6 {
    -ms-grid-column: 6;
    grid-column-start: 6; }
  .grid_item.position-col-sm-7 {
    -ms-grid-column: 7;
    grid-column-start: 7; }
  .grid_item.position-col-sm-8 {
    -ms-grid-column: 8;
    grid-column-start: 8; }
  .grid_item.position-col-sm-9 {
    -ms-grid-column: 9;
    grid-column-start: 9; }
  .grid_item.position-col-sm-10 {
    -ms-grid-column: 10;
    grid-column-start: 10; }
  .grid_item.position-col-sm-11 {
    -ms-grid-column: 11;
    grid-column-start: 11; }
  .grid_item.position-col-sm-12 {
    -ms-grid-column: 12;
    grid-column-start: 12; }
  .grid_item.rowspan-sm-1 {
    -ms-grid-row-span: 1;
    grid-row-end: span 1; }
  .grid_item.rowspan-sm-2 {
    -ms-grid-row-span: 2;
    grid-row-end: span 2; }
  .grid_item.rowspan-sm-3 {
    -ms-grid-row-span: 3;
    grid-row-end: span 3; }
  .grid_item.rowspan-sm-4 {
    -ms-grid-row-span: 4;
    grid-row-end: span 4; }
  .grid_item.rowspan-sm-5 {
    -ms-grid-row-span: 5;
    grid-row-end: span 5; }
  .grid_item.rowspan-sm-6 {
    -ms-grid-row-span: 6;
    grid-row-end: span 6; }
  .grid_item.rowspan-sm-7 {
    -ms-grid-row-span: 7;
    grid-row-end: span 7; }
  .grid_item.rowspan-sm-8 {
    -ms-grid-row-span: 8;
    grid-row-end: span 8; }
  .grid_item.rowspan-sm-9 {
    -ms-grid-row-span: 9;
    grid-row-end: span 9; }
  .grid_item.rowspan-sm-10 {
    -ms-grid-row-span: 10;
    grid-row-end: span 10; }
  .grid_item.rowspan-sm-11 {
    -ms-grid-row-span: 11;
    grid-row-end: span 11; }
  .grid_item.rowspan-sm-12 {
    -ms-grid-row-span: 12;
    grid-row-end: span 12; }
  .grid_item.colspan-sm-1 {
    -ms-grid-column-span: 1;
    grid-column-end: span 1; }
  .grid_item.colspan-sm-2 {
    -ms-grid-column-span: 2;
    grid-column-end: span 2; }
  .grid_item.colspan-sm-3 {
    -ms-grid-column-span: 3;
    grid-column-end: span 3; }
  .grid_item.colspan-sm-4 {
    -ms-grid-column-span: 4;
    grid-column-end: span 4; }
  .grid_item.colspan-sm-5 {
    -ms-grid-column-span: 5;
    grid-column-end: span 5; }
  .grid_item.colspan-sm-6 {
    -ms-grid-column-span: 6;
    grid-column-end: span 6; }
  .grid_item.colspan-sm-7 {
    -ms-grid-column-span: 7;
    grid-column-end: span 7; }
  .grid_item.colspan-sm-8 {
    -ms-grid-column-span: 8;
    grid-column-end: span 8; }
  .grid_item.colspan-sm-9 {
    -ms-grid-column-span: 9;
    grid-column-end: span 9; }
  .grid_item.colspan-sm-10 {
    -ms-grid-column-span: 10;
    grid-column-end: span 10; }
  .grid_item.colspan-sm-11 {
    -ms-grid-column-span: 11;
    grid-column-end: span 11; }
  .grid_item.colspan-sm-12 {
    -ms-grid-column-span: 12;
    grid-column-end: span 12; } }

@media (min-width: 768px) {
  .rows-md-1 {
    -ms-grid-rows: (auto)[1];
    grid-template-rows: repeat(1, auto); }
  .rows-md-2 {
    -ms-grid-rows: (auto)[2];
    grid-template-rows: repeat(2, auto); }
  .rows-md-3 {
    -ms-grid-rows: (auto)[3];
    grid-template-rows: repeat(3, auto); }
  .rows-md-4 {
    -ms-grid-rows: (auto)[4];
    grid-template-rows: repeat(4, auto); }
  .rows-md-5 {
    -ms-grid-rows: (auto)[5];
    grid-template-rows: repeat(5, auto); }
  .rows-md-6 {
    -ms-grid-rows: (auto)[6];
    grid-template-rows: repeat(6, auto); }
  .rows-md-7 {
    -ms-grid-rows: (auto)[7];
    grid-template-rows: repeat(7, auto); }
  .rows-md-8 {
    -ms-grid-rows: (auto)[8];
    grid-template-rows: repeat(8, auto); }
  .rows-md-9 {
    -ms-grid-rows: (auto)[9];
    grid-template-rows: repeat(9, auto); }
  .rows-md-10 {
    -ms-grid-rows: (auto)[10];
    grid-template-rows: repeat(10, auto); }
  .rows-md-11 {
    -ms-grid-rows: (auto)[11];
    grid-template-rows: repeat(11, auto); }
  .rows-md-12 {
    -ms-grid-rows: (auto)[12];
    grid-template-rows: repeat(12, auto); }
  .cols-md-1 {
    -ms-grid-columns: (1fr)[1];
    grid-template-columns: repeat(1, 1fr); }
  .cols-md-2 {
    -ms-grid-columns: (1fr)[2];
    grid-template-columns: repeat(2, 1fr); }
  .cols-md-3 {
    -ms-grid-columns: (1fr)[3];
    grid-template-columns: repeat(3, 1fr); }
  .cols-md-4 {
    -ms-grid-columns: (1fr)[4];
    grid-template-columns: repeat(4, 1fr); }
  .cols-md-5 {
    -ms-grid-columns: (1fr)[5];
    grid-template-columns: repeat(5, 1fr); }
  .cols-md-6 {
    -ms-grid-columns: (1fr)[6];
    grid-template-columns: repeat(6, 1fr); }
  .cols-md-7 {
    -ms-grid-columns: (1fr)[7];
    grid-template-columns: repeat(7, 1fr); }
  .cols-md-8 {
    -ms-grid-columns: (1fr)[8];
    grid-template-columns: repeat(8, 1fr); }
  .cols-md-9 {
    -ms-grid-columns: (1fr)[9];
    grid-template-columns: repeat(9, 1fr); }
  .cols-md-10 {
    -ms-grid-columns: (1fr)[10];
    grid-template-columns: repeat(10, 1fr); }
  .cols-md-11 {
    -ms-grid-columns: (1fr)[11];
    grid-template-columns: repeat(11, 1fr); }
  .cols-md-12 {
    -ms-grid-columns: (1fr)[12];
    grid-template-columns: repeat(12, 1fr); }
  .grid_item.position-row-md-1 {
    -ms-grid-row: 1;
    grid-row-start: 1; }
  .grid_item.position-row-md-2 {
    -ms-grid-row: 2;
    grid-row-start: 2; }
  .grid_item.position-row-md-3 {
    -ms-grid-row: 3;
    grid-row-start: 3; }
  .grid_item.position-row-md-4 {
    -ms-grid-row: 4;
    grid-row-start: 4; }
  .grid_item.position-row-md-5 {
    -ms-grid-row: 5;
    grid-row-start: 5; }
  .grid_item.position-row-md-6 {
    -ms-grid-row: 6;
    grid-row-start: 6; }
  .grid_item.position-row-md-7 {
    -ms-grid-row: 7;
    grid-row-start: 7; }
  .grid_item.position-row-md-8 {
    -ms-grid-row: 8;
    grid-row-start: 8; }
  .grid_item.position-row-md-9 {
    -ms-grid-row: 9;
    grid-row-start: 9; }
  .grid_item.position-row-md-10 {
    -ms-grid-row: 10;
    grid-row-start: 10; }
  .grid_item.position-row-md-11 {
    -ms-grid-row: 11;
    grid-row-start: 11; }
  .grid_item.position-row-md-12 {
    -ms-grid-row: 12;
    grid-row-start: 12; }
  .grid_item.position-col-md-1 {
    -ms-grid-column: 1;
    grid-column-start: 1; }
  .grid_item.position-col-md-2 {
    -ms-grid-column: 2;
    grid-column-start: 2; }
  .grid_item.position-col-md-3 {
    -ms-grid-column: 3;
    grid-column-start: 3; }
  .grid_item.position-col-md-4 {
    -ms-grid-column: 4;
    grid-column-start: 4; }
  .grid_item.position-col-md-5 {
    -ms-grid-column: 5;
    grid-column-start: 5; }
  .grid_item.position-col-md-6 {
    -ms-grid-column: 6;
    grid-column-start: 6; }
  .grid_item.position-col-md-7 {
    -ms-grid-column: 7;
    grid-column-start: 7; }
  .grid_item.position-col-md-8 {
    -ms-grid-column: 8;
    grid-column-start: 8; }
  .grid_item.position-col-md-9 {
    -ms-grid-column: 9;
    grid-column-start: 9; }
  .grid_item.position-col-md-10 {
    -ms-grid-column: 10;
    grid-column-start: 10; }
  .grid_item.position-col-md-11 {
    -ms-grid-column: 11;
    grid-column-start: 11; }
  .grid_item.position-col-md-12 {
    -ms-grid-column: 12;
    grid-column-start: 12; }
  .grid_item.rowspan-md-1 {
    -ms-grid-row-span: 1;
    grid-row-end: span 1; }
  .grid_item.rowspan-md-2 {
    -ms-grid-row-span: 2;
    grid-row-end: span 2; }
  .grid_item.rowspan-md-3 {
    -ms-grid-row-span: 3;
    grid-row-end: span 3; }
  .grid_item.rowspan-md-4 {
    -ms-grid-row-span: 4;
    grid-row-end: span 4; }
  .grid_item.rowspan-md-5 {
    -ms-grid-row-span: 5;
    grid-row-end: span 5; }
  .grid_item.rowspan-md-6 {
    -ms-grid-row-span: 6;
    grid-row-end: span 6; }
  .grid_item.rowspan-md-7 {
    -ms-grid-row-span: 7;
    grid-row-end: span 7; }
  .grid_item.rowspan-md-8 {
    -ms-grid-row-span: 8;
    grid-row-end: span 8; }
  .grid_item.rowspan-md-9 {
    -ms-grid-row-span: 9;
    grid-row-end: span 9; }
  .grid_item.rowspan-md-10 {
    -ms-grid-row-span: 10;
    grid-row-end: span 10; }
  .grid_item.rowspan-md-11 {
    -ms-grid-row-span: 11;
    grid-row-end: span 11; }
  .grid_item.rowspan-md-12 {
    -ms-grid-row-span: 12;
    grid-row-end: span 12; }
  .grid_item.colspan-md-1 {
    -ms-grid-column-span: 1;
    grid-column-end: span 1; }
  .grid_item.colspan-md-2 {
    -ms-grid-column-span: 2;
    grid-column-end: span 2; }
  .grid_item.colspan-md-3 {
    -ms-grid-column-span: 3;
    grid-column-end: span 3; }
  .grid_item.colspan-md-4 {
    -ms-grid-column-span: 4;
    grid-column-end: span 4; }
  .grid_item.colspan-md-5 {
    -ms-grid-column-span: 5;
    grid-column-end: span 5; }
  .grid_item.colspan-md-6 {
    -ms-grid-column-span: 6;
    grid-column-end: span 6; }
  .grid_item.colspan-md-7 {
    -ms-grid-column-span: 7;
    grid-column-end: span 7; }
  .grid_item.colspan-md-8 {
    -ms-grid-column-span: 8;
    grid-column-end: span 8; }
  .grid_item.colspan-md-9 {
    -ms-grid-column-span: 9;
    grid-column-end: span 9; }
  .grid_item.colspan-md-10 {
    -ms-grid-column-span: 10;
    grid-column-end: span 10; }
  .grid_item.colspan-md-11 {
    -ms-grid-column-span: 11;
    grid-column-end: span 11; }
  .grid_item.colspan-md-12 {
    -ms-grid-column-span: 12;
    grid-column-end: span 12; } }

@media (min-width: 980px) {
  .rows-lg-1 {
    -ms-grid-rows: (auto)[1];
    grid-template-rows: repeat(1, auto); }
  .rows-lg-2 {
    -ms-grid-rows: (auto)[2];
    grid-template-rows: repeat(2, auto); }
  .rows-lg-3 {
    -ms-grid-rows: (auto)[3];
    grid-template-rows: repeat(3, auto); }
  .rows-lg-4 {
    -ms-grid-rows: (auto)[4];
    grid-template-rows: repeat(4, auto); }
  .rows-lg-5 {
    -ms-grid-rows: (auto)[5];
    grid-template-rows: repeat(5, auto); }
  .rows-lg-6 {
    -ms-grid-rows: (auto)[6];
    grid-template-rows: repeat(6, auto); }
  .rows-lg-7 {
    -ms-grid-rows: (auto)[7];
    grid-template-rows: repeat(7, auto); }
  .rows-lg-8 {
    -ms-grid-rows: (auto)[8];
    grid-template-rows: repeat(8, auto); }
  .rows-lg-9 {
    -ms-grid-rows: (auto)[9];
    grid-template-rows: repeat(9, auto); }
  .rows-lg-10 {
    -ms-grid-rows: (auto)[10];
    grid-template-rows: repeat(10, auto); }
  .rows-lg-11 {
    -ms-grid-rows: (auto)[11];
    grid-template-rows: repeat(11, auto); }
  .rows-lg-12 {
    -ms-grid-rows: (auto)[12];
    grid-template-rows: repeat(12, auto); }
  .cols-lg-1 {
    -ms-grid-columns: (1fr)[1];
    grid-template-columns: repeat(1, 1fr); }
  .cols-lg-2 {
    -ms-grid-columns: (1fr)[2];
    grid-template-columns: repeat(2, 1fr); }
  .cols-lg-3 {
    -ms-grid-columns: (1fr)[3];
    grid-template-columns: repeat(3, 1fr); }
  .cols-lg-4 {
    -ms-grid-columns: (1fr)[4];
    grid-template-columns: repeat(4, 1fr); }
  .cols-lg-5 {
    -ms-grid-columns: (1fr)[5];
    grid-template-columns: repeat(5, 1fr); }
  .cols-lg-6 {
    -ms-grid-columns: (1fr)[6];
    grid-template-columns: repeat(6, 1fr); }
  .cols-lg-7 {
    -ms-grid-columns: (1fr)[7];
    grid-template-columns: repeat(7, 1fr); }
  .cols-lg-8 {
    -ms-grid-columns: (1fr)[8];
    grid-template-columns: repeat(8, 1fr); }
  .cols-lg-9 {
    -ms-grid-columns: (1fr)[9];
    grid-template-columns: repeat(9, 1fr); }
  .cols-lg-10 {
    -ms-grid-columns: (1fr)[10];
    grid-template-columns: repeat(10, 1fr); }
  .cols-lg-11 {
    -ms-grid-columns: (1fr)[11];
    grid-template-columns: repeat(11, 1fr); }
  .cols-lg-12 {
    -ms-grid-columns: (1fr)[12];
    grid-template-columns: repeat(12, 1fr); }
  .grid_item.position-row-lg-1 {
    -ms-grid-row: 1;
    grid-row-start: 1; }
  .grid_item.position-row-lg-2 {
    -ms-grid-row: 2;
    grid-row-start: 2; }
  .grid_item.position-row-lg-3 {
    -ms-grid-row: 3;
    grid-row-start: 3; }
  .grid_item.position-row-lg-4 {
    -ms-grid-row: 4;
    grid-row-start: 4; }
  .grid_item.position-row-lg-5 {
    -ms-grid-row: 5;
    grid-row-start: 5; }
  .grid_item.position-row-lg-6 {
    -ms-grid-row: 6;
    grid-row-start: 6; }
  .grid_item.position-row-lg-7 {
    -ms-grid-row: 7;
    grid-row-start: 7; }
  .grid_item.position-row-lg-8 {
    -ms-grid-row: 8;
    grid-row-start: 8; }
  .grid_item.position-row-lg-9 {
    -ms-grid-row: 9;
    grid-row-start: 9; }
  .grid_item.position-row-lg-10 {
    -ms-grid-row: 10;
    grid-row-start: 10; }
  .grid_item.position-row-lg-11 {
    -ms-grid-row: 11;
    grid-row-start: 11; }
  .grid_item.position-row-lg-12 {
    -ms-grid-row: 12;
    grid-row-start: 12; }
  .grid_item.position-col-lg-1 {
    -ms-grid-column: 1;
    grid-column-start: 1; }
  .grid_item.position-col-lg-2 {
    -ms-grid-column: 2;
    grid-column-start: 2; }
  .grid_item.position-col-lg-3 {
    -ms-grid-column: 3;
    grid-column-start: 3; }
  .grid_item.position-col-lg-4 {
    -ms-grid-column: 4;
    grid-column-start: 4; }
  .grid_item.position-col-lg-5 {
    -ms-grid-column: 5;
    grid-column-start: 5; }
  .grid_item.position-col-lg-6 {
    -ms-grid-column: 6;
    grid-column-start: 6; }
  .grid_item.position-col-lg-7 {
    -ms-grid-column: 7;
    grid-column-start: 7; }
  .grid_item.position-col-lg-8 {
    -ms-grid-column: 8;
    grid-column-start: 8; }
  .grid_item.position-col-lg-9 {
    -ms-grid-column: 9;
    grid-column-start: 9; }
  .grid_item.position-col-lg-10 {
    -ms-grid-column: 10;
    grid-column-start: 10; }
  .grid_item.position-col-lg-11 {
    -ms-grid-column: 11;
    grid-column-start: 11; }
  .grid_item.position-col-lg-12 {
    -ms-grid-column: 12;
    grid-column-start: 12; }
  .grid_item.rowspan-lg-1 {
    -ms-grid-row-span: 1;
    grid-row-end: span 1; }
  .grid_item.rowspan-lg-2 {
    -ms-grid-row-span: 2;
    grid-row-end: span 2; }
  .grid_item.rowspan-lg-3 {
    -ms-grid-row-span: 3;
    grid-row-end: span 3; }
  .grid_item.rowspan-lg-4 {
    -ms-grid-row-span: 4;
    grid-row-end: span 4; }
  .grid_item.rowspan-lg-5 {
    -ms-grid-row-span: 5;
    grid-row-end: span 5; }
  .grid_item.rowspan-lg-6 {
    -ms-grid-row-span: 6;
    grid-row-end: span 6; }
  .grid_item.rowspan-lg-7 {
    -ms-grid-row-span: 7;
    grid-row-end: span 7; }
  .grid_item.rowspan-lg-8 {
    -ms-grid-row-span: 8;
    grid-row-end: span 8; }
  .grid_item.rowspan-lg-9 {
    -ms-grid-row-span: 9;
    grid-row-end: span 9; }
  .grid_item.rowspan-lg-10 {
    -ms-grid-row-span: 10;
    grid-row-end: span 10; }
  .grid_item.rowspan-lg-11 {
    -ms-grid-row-span: 11;
    grid-row-end: span 11; }
  .grid_item.rowspan-lg-12 {
    -ms-grid-row-span: 12;
    grid-row-end: span 12; }
  .grid_item.colspan-lg-1 {
    -ms-grid-column-span: 1;
    grid-column-end: span 1; }
  .grid_item.colspan-lg-2 {
    -ms-grid-column-span: 2;
    grid-column-end: span 2; }
  .grid_item.colspan-lg-3 {
    -ms-grid-column-span: 3;
    grid-column-end: span 3; }
  .grid_item.colspan-lg-4 {
    -ms-grid-column-span: 4;
    grid-column-end: span 4; }
  .grid_item.colspan-lg-5 {
    -ms-grid-column-span: 5;
    grid-column-end: span 5; }
  .grid_item.colspan-lg-6 {
    -ms-grid-column-span: 6;
    grid-column-end: span 6; }
  .grid_item.colspan-lg-7 {
    -ms-grid-column-span: 7;
    grid-column-end: span 7; }
  .grid_item.colspan-lg-8 {
    -ms-grid-column-span: 8;
    grid-column-end: span 8; }
  .grid_item.colspan-lg-9 {
    -ms-grid-column-span: 9;
    grid-column-end: span 9; }
  .grid_item.colspan-lg-10 {
    -ms-grid-column-span: 10;
    grid-column-end: span 10; }
  .grid_item.colspan-lg-11 {
    -ms-grid-column-span: 11;
    grid-column-end: span 11; }
  .grid_item.colspan-lg-12 {
    -ms-grid-column-span: 12;
    grid-column-end: span 12; } }

@media (min-width: 1260px) {
  .rows-xl-1 {
    -ms-grid-rows: (auto)[1];
    grid-template-rows: repeat(1, auto); }
  .rows-xl-2 {
    -ms-grid-rows: (auto)[2];
    grid-template-rows: repeat(2, auto); }
  .rows-xl-3 {
    -ms-grid-rows: (auto)[3];
    grid-template-rows: repeat(3, auto); }
  .rows-xl-4 {
    -ms-grid-rows: (auto)[4];
    grid-template-rows: repeat(4, auto); }
  .rows-xl-5 {
    -ms-grid-rows: (auto)[5];
    grid-template-rows: repeat(5, auto); }
  .rows-xl-6 {
    -ms-grid-rows: (auto)[6];
    grid-template-rows: repeat(6, auto); }
  .rows-xl-7 {
    -ms-grid-rows: (auto)[7];
    grid-template-rows: repeat(7, auto); }
  .rows-xl-8 {
    -ms-grid-rows: (auto)[8];
    grid-template-rows: repeat(8, auto); }
  .rows-xl-9 {
    -ms-grid-rows: (auto)[9];
    grid-template-rows: repeat(9, auto); }
  .rows-xl-10 {
    -ms-grid-rows: (auto)[10];
    grid-template-rows: repeat(10, auto); }
  .rows-xl-11 {
    -ms-grid-rows: (auto)[11];
    grid-template-rows: repeat(11, auto); }
  .rows-xl-12 {
    -ms-grid-rows: (auto)[12];
    grid-template-rows: repeat(12, auto); }
  .cols-xl-1 {
    -ms-grid-columns: (1fr)[1];
    grid-template-columns: repeat(1, 1fr); }
  .cols-xl-2 {
    -ms-grid-columns: (1fr)[2];
    grid-template-columns: repeat(2, 1fr); }
  .cols-xl-3 {
    -ms-grid-columns: (1fr)[3];
    grid-template-columns: repeat(3, 1fr); }
  .cols-xl-4 {
    -ms-grid-columns: (1fr)[4];
    grid-template-columns: repeat(4, 1fr); }
  .cols-xl-5 {
    -ms-grid-columns: (1fr)[5];
    grid-template-columns: repeat(5, 1fr); }
  .cols-xl-6 {
    -ms-grid-columns: (1fr)[6];
    grid-template-columns: repeat(6, 1fr); }
  .cols-xl-7 {
    -ms-grid-columns: (1fr)[7];
    grid-template-columns: repeat(7, 1fr); }
  .cols-xl-8 {
    -ms-grid-columns: (1fr)[8];
    grid-template-columns: repeat(8, 1fr); }
  .cols-xl-9 {
    -ms-grid-columns: (1fr)[9];
    grid-template-columns: repeat(9, 1fr); }
  .cols-xl-10 {
    -ms-grid-columns: (1fr)[10];
    grid-template-columns: repeat(10, 1fr); }
  .cols-xl-11 {
    -ms-grid-columns: (1fr)[11];
    grid-template-columns: repeat(11, 1fr); }
  .cols-xl-12 {
    -ms-grid-columns: (1fr)[12];
    grid-template-columns: repeat(12, 1fr); }
  .grid_item.position-row-xl-1 {
    -ms-grid-row: 1;
    grid-row-start: 1; }
  .grid_item.position-row-xl-2 {
    -ms-grid-row: 2;
    grid-row-start: 2; }
  .grid_item.position-row-xl-3 {
    -ms-grid-row: 3;
    grid-row-start: 3; }
  .grid_item.position-row-xl-4 {
    -ms-grid-row: 4;
    grid-row-start: 4; }
  .grid_item.position-row-xl-5 {
    -ms-grid-row: 5;
    grid-row-start: 5; }
  .grid_item.position-row-xl-6 {
    -ms-grid-row: 6;
    grid-row-start: 6; }
  .grid_item.position-row-xl-7 {
    -ms-grid-row: 7;
    grid-row-start: 7; }
  .grid_item.position-row-xl-8 {
    -ms-grid-row: 8;
    grid-row-start: 8; }
  .grid_item.position-row-xl-9 {
    -ms-grid-row: 9;
    grid-row-start: 9; }
  .grid_item.position-row-xl-10 {
    -ms-grid-row: 10;
    grid-row-start: 10; }
  .grid_item.position-row-xl-11 {
    -ms-grid-row: 11;
    grid-row-start: 11; }
  .grid_item.position-row-xl-12 {
    -ms-grid-row: 12;
    grid-row-start: 12; }
  .grid_item.position-col-xl-1 {
    -ms-grid-column: 1;
    grid-column-start: 1; }
  .grid_item.position-col-xl-2 {
    -ms-grid-column: 2;
    grid-column-start: 2; }
  .grid_item.position-col-xl-3 {
    -ms-grid-column: 3;
    grid-column-start: 3; }
  .grid_item.position-col-xl-4 {
    -ms-grid-column: 4;
    grid-column-start: 4; }
  .grid_item.position-col-xl-5 {
    -ms-grid-column: 5;
    grid-column-start: 5; }
  .grid_item.position-col-xl-6 {
    -ms-grid-column: 6;
    grid-column-start: 6; }
  .grid_item.position-col-xl-7 {
    -ms-grid-column: 7;
    grid-column-start: 7; }
  .grid_item.position-col-xl-8 {
    -ms-grid-column: 8;
    grid-column-start: 8; }
  .grid_item.position-col-xl-9 {
    -ms-grid-column: 9;
    grid-column-start: 9; }
  .grid_item.position-col-xl-10 {
    -ms-grid-column: 10;
    grid-column-start: 10; }
  .grid_item.position-col-xl-11 {
    -ms-grid-column: 11;
    grid-column-start: 11; }
  .grid_item.position-col-xl-12 {
    -ms-grid-column: 12;
    grid-column-start: 12; }
  .grid_item.rowspan-xl-1 {
    -ms-grid-row-span: 1;
    grid-row-end: span 1; }
  .grid_item.rowspan-xl-2 {
    -ms-grid-row-span: 2;
    grid-row-end: span 2; }
  .grid_item.rowspan-xl-3 {
    -ms-grid-row-span: 3;
    grid-row-end: span 3; }
  .grid_item.rowspan-xl-4 {
    -ms-grid-row-span: 4;
    grid-row-end: span 4; }
  .grid_item.rowspan-xl-5 {
    -ms-grid-row-span: 5;
    grid-row-end: span 5; }
  .grid_item.rowspan-xl-6 {
    -ms-grid-row-span: 6;
    grid-row-end: span 6; }
  .grid_item.rowspan-xl-7 {
    -ms-grid-row-span: 7;
    grid-row-end: span 7; }
  .grid_item.rowspan-xl-8 {
    -ms-grid-row-span: 8;
    grid-row-end: span 8; }
  .grid_item.rowspan-xl-9 {
    -ms-grid-row-span: 9;
    grid-row-end: span 9; }
  .grid_item.rowspan-xl-10 {
    -ms-grid-row-span: 10;
    grid-row-end: span 10; }
  .grid_item.rowspan-xl-11 {
    -ms-grid-row-span: 11;
    grid-row-end: span 11; }
  .grid_item.rowspan-xl-12 {
    -ms-grid-row-span: 12;
    grid-row-end: span 12; }
  .grid_item.colspan-xl-1 {
    -ms-grid-column-span: 1;
    grid-column-end: span 1; }
  .grid_item.colspan-xl-2 {
    -ms-grid-column-span: 2;
    grid-column-end: span 2; }
  .grid_item.colspan-xl-3 {
    -ms-grid-column-span: 3;
    grid-column-end: span 3; }
  .grid_item.colspan-xl-4 {
    -ms-grid-column-span: 4;
    grid-column-end: span 4; }
  .grid_item.colspan-xl-5 {
    -ms-grid-column-span: 5;
    grid-column-end: span 5; }
  .grid_item.colspan-xl-6 {
    -ms-grid-column-span: 6;
    grid-column-end: span 6; }
  .grid_item.colspan-xl-7 {
    -ms-grid-column-span: 7;
    grid-column-end: span 7; }
  .grid_item.colspan-xl-8 {
    -ms-grid-column-span: 8;
    grid-column-end: span 8; }
  .grid_item.colspan-xl-9 {
    -ms-grid-column-span: 9;
    grid-column-end: span 9; }
  .grid_item.colspan-xl-10 {
    -ms-grid-column-span: 10;
    grid-column-end: span 10; }
  .grid_item.colspan-xl-11 {
    -ms-grid-column-span: 11;
    grid-column-end: span 11; }
  .grid_item.colspan-xl-12 {
    -ms-grid-column-span: 12;
    grid-column-end: span 12; } }

/*  Grid Gap

        .grid-gap               Add gaps/gutters between rows and columns
                                [Extends .grid]
    
        .grid-row-gap           Add gaps/gutters between rows only
                                [Extends .grid]

        .grid-column-gap        Add gaps/gutters between columns only
                                [Extends .grid]

        Note: there is potential to add .grid-gap-xs, .grid-gap-sm etc.

    Example Markup:
    <div class="grid cols-3 rows-2 grid-gap">
        <div class="grid_item">
            ...
        </div>
        <div class="grid_item">
            ...
        </div>
    </div>

*/
.grid-gap {
  grid-column-gap: calc(1.2em * 2);
  grid-row-gap: calc(1.2em * 2); }
  @media print, (min-width: 768px) {
    .grid-gap {
      grid-column-gap: calc(1.2em * 2);
      grid-row-gap: calc(1em * 2); } }

.grid-column-gap {
  grid-column-gap: calc(1.2em * 2); }
  @media print, (min-width: 768px) {
    .grid-column-gap {
      grid-column-gap: calc(1.2em * 2); } }

.grid-row-gap {
  grid-row-gap: calc(1.2em * 2); }
  @media print, (min-width: 768px) {
    .grid-row-gap {
      grid-row-gap: calc(1em * 2); } }

/*  Grid Auto Flow 
   
    .grid-auto-flow-column  Tells the auto-placement algorithm to fill in each row in turn, adding new columns as necessary
                            [Extends .grid]

    .grid-auto-flow-row     Tells the auto-placement algorithm to fill in each column in turn, adding new rows as necessary
                            [Extends .grid]
                            [Note: grid-auto-flow: row;  it the default - so remove class is best practice]

*/
.grid-auto-flow-column {
  grid-auto-flow: column !important; }

.grid-auto-flow-row {
  grid-auto-flow: row !important; }

/*  Grid Alignment 

    .justify-content-*  Aligns the whole grid horizontally
                        [Extends .grid]

    .align-content-*    Aligns the whole grid vertically
                        [Extends .grid]

*/
.grid.justify-content-start {
  -ms-flex-pack: start !important;
  justify-content: start !important; }

.grid.justify-content-center {
  -ms-flex-pack: center !important;
  justify-content: center !important; }

.grid.justify-content-end {
  -ms-flex-pack: end !important;
  justify-content: end !important; }

.grid.justify-content-stretch {
  -ms-flex-pack: stretch !important;
  justify-content: stretch !important; }

.grid.justify-content-space-between {
  -ms-flex-pack: justify !important;
  justify-content: space-between !important; }

.grid.justify-content-space-around {
  -ms-flex-pack: distribute !important;
  justify-content: space-around !important; }

.grid.justify-content-space-evenly {
  -ms-flex-pack: space-evenly !important;
  justify-content: space-evenly !important; }

.grid.align-content-start {
  -ms-flex-line-pack: start !important;
  align-content: start !important; }

.grid.align-content-center {
  -ms-flex-line-pack: center !important;
  align-content: center !important; }

.grid.align-content-end {
  -ms-flex-line-pack: end !important;
  align-content: end !important; }

.grid.align-content-stretch {
  -ms-flex-line-pack: stretch !important;
  align-content: stretch !important; }

.grid .align-content-space-between {
  -ms-flex-line-pack: justify !important;
  align-content: space-between !important; }

.grid .align-content-space-around {
  -ms-flex-line-pack: distribute !important;
  align-content: space-around !important; }

.grid.align-content-space-evenly {
  -ms-flex-line-pack: space-evenly !important;
  align-content: space-evenly !important; }

/*  Grid Items Alignment

    .justify-items-*    Aligns ALL the grid items content horizontally
                        [Default is stretch]
                        [Extends .grid]

    .align-items-*      Aligns ALL the grid items content vertically
                        [Default is stretch]
                        [Extends .grid]

*/
.grid.justify-items-start {
  -ms-grid-column-align: start !important;
  justify-items: start !important; }

.grid.justify-items-center {
  -ms-grid-column-align: center !important;
  justify-items: center !important; }

.grid.justify-items-end {
  -ms-grid-column-align: end !important;
  justify-items: end !important; }

.grid.justify-items-stretch {
  -ms-grid-column-align: stretch !important;
  justify-items: stretch !important; }

.grid.align-items-start {
  -ms-flex-align: start !important;
  align-items: start !important; }

.grid.align-items-center {
  -ms-flex-align: center !important;
  align-items: center !important; }

.grid.align-items-end {
  -ms-flex-align: end !important;
  align-items: end !important; }

.grid.align-items-stretch {
  -ms-flex-align: stretch !important;
  align-items: stretch !important; }

/*  Individual Grid Items Alignment

    .justify-self-*     Aligns the grid item content horizontally
                        [Default is stretch]
                        [Extends .grid_item]
                        Note: Not supported in IE11

    .align-self-*       Aligns the grid item content vertically
                        [Default is stretch]
                        [Extends .grid_item]
*/
.grid_item.justify-self-start {
  justify-self: start !important; }

.grid_item.justify-self-center {
  justify-self: center !important; }

.grid_item.justify-self-end {
  justify-self: end !important; }

.grid_item.justify-self-stretch {
  justify-self: stretch !important; }

.grid_item.align-self-start {
  -ms-flex-item-align: start !important;
  -ms-grid-row-align: start !important;
  align-self: start !important; }

.grid_item.align-self-center {
  -ms-flex-item-align: center !important;
  -ms-grid-row-align: center !important;
  align-self: center !important; }

.grid_item.align-self-end {
  -ms-flex-item-align: end !important;
  -ms-grid-row-align: end !important;
  align-self: end !important; }

.grid_item.align-self-stretch {
  -ms-flex-item-align: stretch !important;
  -ms-grid-row-align: stretch !important;
  align-self: stretch !important; }

/*
   PLACHOLDER CSS TABLE STYLES
   These placeholder rules will not generate CSS on their own.
   Must be used with the @extend directive.

    %table        Base styles for all responsive tables regardless of whether or not they are display:table
                  [Placeholder Selector]

*/
.table-xs, .table-sm, .table-md {
  margin: 0;
  padding: 0;
  width: 100%; }
  .center.table-xs, .center.table-sm, .center.table-md {
    width: auto;
    margin: 0 auto; }
  .auto-width.table-xs, .auto-width.table-sm, .auto-width.table-md {
    width: auto; }
  .deco.table-xs, .deco.table-sm, .deco.table-md {
    border: 1px solid var(--border-light-gray);
    border-collapse: collapse; }
    .deco.table-xs > .table-row, .deco.table-sm > .table-row, .deco.table-md > .table-row {
      border-bottom: 1px solid var(--border-light-gray);
      /*apply a horizontal border between rows when not rendering as a table */ }
    .deco.table-xs > .table-row:last-child, .deco.table-sm > .table-row:last-child, .deco.table-md > .table-row:last-child {
      border-bottom: none; }

/*
   MIXIN CSS TABLE STYLES
   These placeholder rules will not generate CSS on their own.
   Must be used with the @extend directive.

    table-display()        Base styles for responsive tables when they are display:table;
                           [Placeholder Selector]

*/
/* CSS TABLES
    
    .table-container        For nested tables or tables that should be flush to the edge of their container.
                            Sets negative horiztonal margin equal to horizontal padding of contained table-cells
    
    .table-*                An element that renders as a table at * screen sizes and above
                            Currently supports XS, SM, MD (LG, XL have yet to be a valid use case)
                            [Module parent]
    .deco                   Applies a border around the element and borders under each row when not rendering as a table
                            Applies borders around each table cell when rendering as a table
                            [Extends .table-*]
    .center                 Centers the table when rending as a table
                            [Extends .table-*]
    .auto-width             Sets the width to auto so the table shrinks around its content and doesn't extend to full width
                            [Extends .table-*]

    .table-header           A header row which labels the columns.
                            An element that is visible and renders as a table row when its parent renders as a table; Otherwise it is hidden
                            [Child of .table-*]

    .table-row              An element that renders as a table row when its parent renders as a table
                            [Child of .table-*]
    .deco-bottom            Adds a bottom border to child table cell elements when its parent renders as a table
                            [Extends .table-row]
    .deco-top               Adds a top border to child table cell elements when its parent renders as a table
                            [Extends .table-row]
    .bg-*                   Apply a background color to the row
                            [Extends .table-row]
    .has-ribbon             An item with a ribbon; Leaves room for the ribbon
                            [Extends .table-row; See modules_decoration.css]
    .has-ribbon-large       An item with a large ribbon; Leaves room for the ribbon
                            [Extends .table-row;  See modules_decoration.css]
    .has-empty-ribbon       An item without a ribbon in a list of other items with ribbons
                            Leaves empty space where a ribbon would be on MD+ only
                            [Extends .table-row; See modules_decoration.css]
    .has-empty-ribbon-large    An item without a large ribbon in a list of other items with large ribbons
                                Leaves empty space where a ribbon would be on MD+ only
                                [Extends .table-row;  See modules_decoration.css]
    

    .table-cell             An element that renders as a table cell when its parent renders as a table row     
                            [Child of .table-row]
    .full-width             A table cell that stretches to take up the maximum amount of space.                      
                            [Extends .table-cell]
    .deco-left              Adds a left border to child table cell elements when its parent renders as a table
                            [Extends .table-cell]
    .deco-right             Adds a right border to child table cell elements when its parent renders as a table
                            [Extends .table-cell]
    .valign-middle          Vertically align items to the middle  when its parent renders as a table
                            [Extends .table-cell]
    .valign-bottom          Vertically align items to the bottom  when its parent renders as a table
                            [Extends .table-cell]
    .bg-*                   Apply a background color to the cells
                            [Extends .table-cell]

    .table-caption          An element that renders as a table caption when its parent renders as a table
                            [Child of .table-*]

*/
.table-container {
  margin-left: -1.2em;
  margin-right: -1.2em; }
  @media print, (min-width: 768px) {
    .table-container {
      margin-right: -1.2em;
      margin-left: -1.2em; } }

.table-header {
  display: none; }

.table-row {
  padding-top: 0.7em;
  padding-bottom: 0.7em; }
  @media print, (min-width: 768px) {
    .table-row {
      padding-top: 1em;
      padding-bottom: 1em; } }

.table-cell {
  display: block;
  padding-right: 1.2em;
  padding-left: 1.2em;
  padding-top: 0.4em;
  padding-bottom: 0.4em;
  border-color: var(--border-light-gray);
  border-style: solid;
  border-width: 0; }
  @media print, (min-width: 768px) {
    .table-cell {
      padding-right: 1.2em;
      padding-left: 1.2em; } }
  a.table-cell {
    text-decoration: none; }
    .hover a.table-cell.clickable:active {
      background-color: var(--bg-faint-gray); }
  .table-cell.full-width {
    width: 100%; }
  .table-cell.deco-right {
    border-right-width: 0; }
  .table-cell.deco-left {
    border-left-width: 0; }
  .table-cell[class*="bg-"],
  .table-row[class*="bg-"] > .table-cell,
  .table-header[class*="bg-"] > .table-cell {
    border-color: var(--border-white-opacity-20); }
  .table-cell.bg-faint-gray,
  .table-row.bg-faint-gray > .table-cell,
  .table-header.bg-faint-gray > .table-cell {
    border-color: var(--border-gray-90); }

/* XS Table */
.table-xs {
  display: table; }

.table-xs > .table-row,
.table-xs > .table-header {
  display: table-row; }
  .table-xs > .table-row > .table-cell,
  .table-xs > .table-header > .table-cell {
    display: table-cell;
    vertical-align: top;
    padding-top: 1.2em;
    padding-bottom: 1.2em; }
    @media print, (min-width: 768px) {
      .table-xs > .table-row > .table-cell,
      .table-xs > .table-header > .table-cell {
        padding-top: 1em;
        padding-bottom: 1em; } }
    .table-xs > .table-row > .table-cell.valign-middle,
    .table-xs > .table-header > .table-cell.valign-middle {
      vertical-align: middle; }
    .table-xs > .table-row > .table-cell.valign-bottom,
    .table-xs > .table-header > .table-cell.valign-bottom {
      vertical-align: bottom; }

.table-xs.deco > .table-header > .table-cell {
  border-left-width: 1px; }
  .table-xs.deco > .table-header > .table-cell:first-child {
    border-left-width: 0; }

.table-xs.deco > .table-row > .table-cell {
  border-width: 1px; }

.table-xs > .table-row {
  padding: 0; }
  .table-xs > .table-row > .table-cell.deco-right {
    border-right-width: 1px; }
  .table-xs > .table-row > .table-cell.deco-left {
    border-left-width: 1px; }
  .table-xs > .table-row.deco-bottom > .table-cell {
    border-bottom-width: 1px; }
  .table-xs > .table-row.deco-top > .table-cell {
    border-top-width: 1px; }

.table-xs .basic-item.deco-top-thick > .table-cell {
  border-top-width: 5px; }

.table-xs > .table-caption {
  display: table-caption;
  caption-side: bottom; }

/* SM Table */
@media print, (min-width: 480px) {
  .table-sm {
    display: table; }
  .table-sm > .table-row,
  .table-sm > .table-header {
    display: table-row; }
    .table-sm > .table-row > .table-cell,
    .table-sm > .table-header > .table-cell {
      display: table-cell;
      vertical-align: top;
      padding-top: 1.2em;
      padding-bottom: 1.2em; } }
    @media print, print and (min-width: 480px), print and (min-width: 768px), (min-width: 480px) and (min-width: 768px) {
      .table-sm > .table-row > .table-cell,
      .table-sm > .table-header > .table-cell {
        padding-top: 1em;
        padding-bottom: 1em; } }

@media print, (min-width: 480px) {
      .table-sm > .table-row > .table-cell.valign-middle,
      .table-sm > .table-header > .table-cell.valign-middle {
        vertical-align: middle; }
      .table-sm > .table-row > .table-cell.valign-bottom,
      .table-sm > .table-header > .table-cell.valign-bottom {
        vertical-align: bottom; }
  .table-sm.deco > .table-header > .table-cell {
    border-left-width: 1px; }
    .table-sm.deco > .table-header > .table-cell:first-child {
      border-left-width: 0; }
  .table-sm.deco > .table-row > .table-cell {
    border-width: 1px; }
  .table-sm > .table-row {
    padding: 0; }
    .table-sm > .table-row > .table-cell.deco-right {
      border-right-width: 1px; }
    .table-sm > .table-row > .table-cell.deco-left {
      border-left-width: 1px; }
    .table-sm > .table-row.deco-bottom > .table-cell {
      border-bottom-width: 1px; }
    .table-sm > .table-row.deco-top > .table-cell {
      border-top-width: 1px; }
  .table-sm .basic-item.deco-top-thick > .table-cell {
    border-top-width: 5px; }
  .table-sm > .table-caption {
    display: table-caption;
    caption-side: bottom; } }

/* MD Table */
@media print, (min-width: 768px) {
  .table-md {
    display: table; }
  .table-md > .table-row,
  .table-md > .table-header {
    display: table-row; }
    .table-md > .table-row > .table-cell,
    .table-md > .table-header > .table-cell {
      display: table-cell;
      vertical-align: top;
      padding-top: 1.2em;
      padding-bottom: 1.2em; } }
    @media print, print and (min-width: 768px), print and (min-width: 768px), (min-width: 768px) and (min-width: 768px) {
      .table-md > .table-row > .table-cell,
      .table-md > .table-header > .table-cell {
        padding-top: 1em;
        padding-bottom: 1em; } }

@media print, (min-width: 768px) {
      .table-md > .table-row > .table-cell.valign-middle,
      .table-md > .table-header > .table-cell.valign-middle {
        vertical-align: middle; }
      .table-md > .table-row > .table-cell.valign-bottom,
      .table-md > .table-header > .table-cell.valign-bottom {
        vertical-align: bottom; }
  .table-md.deco > .table-header > .table-cell {
    border-left-width: 1px; }
    .table-md.deco > .table-header > .table-cell:first-child {
      border-left-width: 0; }
  .table-md.deco > .table-row > .table-cell {
    border-width: 1px; }
  .table-md > .table-row {
    padding: 0; }
    .table-md > .table-row > .table-cell.deco-right {
      border-right-width: 1px; }
    .table-md > .table-row > .table-cell.deco-left {
      border-left-width: 1px; }
    .table-md > .table-row.deco-bottom > .table-cell {
      border-bottom-width: 1px; }
    .table-md > .table-row.deco-top > .table-cell {
      border-top-width: 1px; }
  .table-md .basic-item.deco-top-thick > .table-cell {
    border-top-width: 5px; }
  .table-md > .table-caption {
    display: table-caption;
    caption-side: bottom; } }

/* TABLE CELL WIDTHS
    
    .cell-xs-*      A table cell set to a specific percentage width, based on 12 units
                    (Allows division by 2, 3, 4, 6)
                    i.e. .cell-xs-3
    
*/
.cell-xs-1 {
  width: 8.333333333333332% !important; }

.cell-xs-2 {
  width: 16.666666666666664% !important; }

.cell-xs-3 {
  width: 25% !important; }

.cell-xs-4 {
  width: 33.33333333333333% !important; }

.cell-xs-5 {
  width: 41.66666666666667% !important; }

.cell-xs-6 {
  width: 50% !important; }

.cell-xs-7 {
  width: 58.333333333333336% !important; }

.cell-xs-8 {
  width: 66.66666666666666% !important; }

.cell-xs-9 {
  width: 75% !important; }

.cell-xs-10 {
  width: 83.33333333333334% !important; }

.cell-xs-11 {
  width: 91.66666666666666% !important; }

.cell-xs-12 {
  width: 100% !important; }

@media print, (min-width: 480px) {
  .cell-sm-1 {
    width: 8.333333333333332% !important; }
  .cesl-sm-2 {
    width: 16.666666666666664% !important; }
  .cell-sm-3 {
    width: 25% !important; }
  .cell-sm-4 {
    width: 33.33333333333333% !important; }
  .cell-sm-5 {
    width: 41.66666666666667% !important; }
  .cell-sm-6 {
    width: 50% !important; }
  .cell-sm-7 {
    width: 58.333333333333336% !important; }
  .cell-sm-8 {
    width: 66.66666666666666% !important; }
  .cell-sm-9 {
    width: 75% !important; }
  .cell-sm-10 {
    width: 83.33333333333334% !important; }
  .cell-sm-11 {
    width: 91.66666666666666% !important; }
  .cell-sm-12 {
    width: 100% !important; } }

@media print, (min-width: 768px) {
  .cell-md-1 {
    width: 8.333333333333332% !important; }
  .cell-md-2 {
    width: 16.666666666666664% !important; }
  .cell-md-3 {
    width: 25% !important; }
  .cell-md-4 {
    width: 33.33333333333333% !important; }
  .cell-md-5 {
    width: 41.66666666666667% !important; }
  .cell-md-6 {
    width: 50% !important; }
  .cell-md-7 {
    width: 58.333333333333336% !important; }
  .cell-md-8 {
    width: 66.66666666666666% !important; }
  .cell-md-9 {
    width: 75% !important; }
  .cell-md-10 {
    width: 83.33333333333334% !important; }
  .cell-md-11 {
    width: 91.66666666666666% !important; }
  .cell-md-12 {
    width: 100% !important; } }

@media (min-width: 980px) {
  .cell-lg-1 {
    width: 8.333333333333332% !important; }
  .cesl-lg-2 {
    width: 16.666666666666664% !important; }
  .cell-lg-3 {
    width: 25% !important; }
  .cell-lg-4 {
    width: 33.33333333333333% !important; }
  .cell-lg-5 {
    width: 41.66666666666667% !important; }
  .cell-lg-6 {
    width: 50% !important; }
  .cell-lg-7 {
    width: 58.333333333333336% !important; }
  .cell-lg-8 {
    width: 66.66666666666666% !important; }
  .cell-lg-9 {
    width: 75% !important; }
  .cell-lg-10 {
    width: 83.33333333333334% !important; }
  .cell-lg-11 {
    width: 91.66666666666666% !important; }
  .cell-lg-12 {
    width: 100% !important; } }

@media (min-width: 1260px) {
  .cell-xl-1 {
    width: 8.333333333333332% !important; }
  .cesl-xl-2 {
    width: 16.666666666666664% !important; }
  .cell-xl-3 {
    width: 25% !important; }
  .cell-xl-4 {
    width: 33.33333333333333% !important; }
  .cell-xl-5 {
    width: 41.66666666666667% !important; }
  .cell-xl-6 {
    width: 50% !important; }
  .cell-xl-7 {
    width: 58.333333333333336% !important; }
  .cell-xl-8 {
    width: 66.66666666666666% !important; }
  .cell-xl-9 {
    width: 75% !important; }
  .cell-xl-10 {
    width: 83.33333333333334% !important; }
  .cell-xl-11 {
    width: 91.66666666666666% !important; }
  .cell-xl-12 {
    width: 100% !important; } }

/* LINK CELL

    Example Markup:
    <div class="table-cell"><div class="link-cell">...

    .link-cell          A wrapper for the contents of a clickable table cell
                        Establishes positioning context for an icon to indicate that the cell is clickable
                        [Module Parent; Child of .table-cell]
    
    .link-cell_icon     The icon which indicates that the cell is clickable
                        [Child of .link-cell]
                    
*/
.link-cell {
  display: block;
  position: relative;
  padding-right: 1.7143em; }
  .link-cell:focus {
    outline-style: solid; }

.link-cell_icon {
  position: absolute;
  top: 0;
  right: 0; }
  .link-cell_icon.txt-middle {
    top: 30%; }
  .link-cell_icon.medium.txt-middle {
    top: 25%; }

/* RESPONSIVE TABLE 
    
    .faux-table                     A CSS table that responds to screen size. 
                                    Columns will wrap to their own line on small screens.
                                    Good for two column tables, where the second column should wrap to the next line on narrow screens.
                                    [Module Parent]
    .faux-table.flat                The faux-table automatically applies spacing below table rows and below the table itself. 
                                    Use the "flat" protocol to remove spacing.
    .faux-table.flat-wide-screens   Remove spacing on wide screens only
    .faux-table.flat-medium-screens Remove spacing on medium screens 
    .faux-table_row                 A container for a row of data
                                    [Child of .faux-table]
    .faux-table_item                A container for a piece of data
                                    [Child of .faux-table]

*/
.faux-table {
  display: block; }
  @media print, (min-width: 768px) {
    .faux-table .faux-table {
      display: table; } }
  h2 + .faux-table, .looks-like-h2 + .faux-table {
    margin-top: 2rem; }

.faux-table_row {
  display: block;
  padding-bottom: .7143em; }
  .faux-table_row:last-child {
    padding-bottom: 0; }
  .faux-table.condensed .faux-table_row {
    padding-bottom: .3571em; }
  @media print, (min-width: 768px) {
    .faux-table_row {
      display: table-row;
      padding-bottom: 0; } }

.faux-table_item {
  display: block; }
  .faux-table.flat .faux-table_item,
  .faux-table_row.flat .faux-table_item {
    padding-bottom: 0; }
  .faux-table.condensed .faux-table_item {
    padding-bottom: .2143em; }
  @media print, (min-width: 768px) {
    .faux-table_item {
      display: table-cell;
      vertical-align: top;
      padding: 0 .8571em .8571em 0; }
      .faux-table_row:last-child .faux-table_item,
      .faux-table.flat .faux-table_item,
      .faux-table_row.flat .faux-table_item {
        padding-bottom: 0; }
      .faux-table.condensed .faux-table_item {
        padding-bottom: .4286em; }
      .faux-table_item.txt-bottom {
        vertical-align: bottom; }
      .faux-table_item.txt-middle {
        vertical-align: middle; } }

/*
    
    This file includes the FLEXBOX GRID and FLEXBOX UTITLTY classes.

*/
/* FLEX CONTAINER 
    .container         For .flex-rows where items should be flush to the edge of their container.
                            Sets negative horiztonal margin equal to horizontal padding of contained flex-items
*/
.container {
  padding-right: 1.2em;
  padding-left: 1.2em;
  margin-right: auto;
  margin-left: auto;
  max-width: 100%; }
  @media print, (min-width: 768px) {
    .container {
      padding-right: 1.2em;
      padding-left: 1.2em; } }

/*
    FLEX DIRECTION STYLES
    --- to be placed on the flex parent container 
 */
.row {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  margin-left: -1.2em;
  margin-right: -1.2em; }
  @media print, (min-width: 768px) {
    .row {
      margin-right: -1.2em;
      margin-left: -1.2em; } }

.row-reverse {
  margin-left: -1.2em;
  margin-right: -1.2em;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: row-reverse;
  flex-direction: row-reverse; }
  @media print, (min-width: 768px) {
    .row-reverse {
      margin-right: -1.2em;
      margin-left: -1.2em; } }

.flex-column {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
  flex-direction: column; }

.flex-column-reversed {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column-reverse;
  flex-direction: column-reverse; }

/*
    FLEX WRAP STYLES
    --- to be placed on the flex parent container 
 */
.flex-nowrap {
  -ms-flex-wrap: nowrap !important;
  flex-wrap: nowrap !important; }

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

.flex-wrap-reverse {
  -ms-flex-wrap: wrap-reverse !important;
  flex-wrap: wrap-reverse !important; }

/*
    JUSTIFY CONTENT STYLES
    ---place on the flex parent container
    ---horizontally aligns children of row
    ---vertically aligns children of flex-column
 */
.justify-content-flex-start {
  -ms-flex-pack: start !important;
  justify-content: flex-start !important; }

.justify-content-flex-end {
  -ms-flex-pack: end !important;
  justify-content: flex-end !important; }

.justify-content-center {
  -ms-flex-pack: center !important;
  justify-content: center !important; }

.justify-content-space-between {
  -ms-flex-pack: justify !important;
  justify-content: space-between !important; }

.justify-content-space-around {
  -ms-flex-pack: distribute !important;
  justify-content: space-around !important; }

/*
    ALIGN ITEMS STYLES
    --- to be placed on the flex parent container 
    ---vertically aligns children of row
    ---horizontally aligns children of flex-column
*/
.align-items-flex-start {
  -ms-flex-align: start !important;
  align-items: flex-start !important; }

.align-items-flex-end {
  -ms-flex-align: end !important;
  align-items: flex-end !important; }

.align-items-center {
  -ms-flex-align: center !important;
  align-items: center !important; }

.align-items-baseline {
  -ms-flex-align: baseline !important;
  align-items: baseline !important; }

.align-items-stretch {
  -ms-flex-align: stretch !important;
  align-items: stretch !important; }

/*
    ALIGN CONTENT STYLES
    --- to be placed on the flex parent container 
 */
.align-content-flex-start {
  -ms-flex-line-pack: start !important;
  align-content: flex-start !important; }

.align-content-flex-end {
  -ms-flex-line-pack: end !important;
  align-content: flex-end !important; }

.align-content-center {
  -ms-flex-line-pack: center !important;
  align-content: center !important; }

.align-content-space-between {
  -ms-flex-line-pack: justify !important;
  align-content: space-between !important; }

.align-content-space-around {
  -ms-flex-line-pack: distribute !important;
  align-content: space-around !important; }

.align-content-stretch {
  -ms-flex-line-pack: stretch !important;
  align-content: stretch !important; }

/*
    ALIGN SELF STYLES
    --- to be placed on the flex children
*/
.align-self-auto {
  -ms-flex-item-align: auto !important;
  -ms-grid-row-align: auto !important;
  align-self: auto !important; }

.align-self-flex-start {
  -ms-flex-item-align: start !important;
  align-self: flex-start !important; }

.align-self-flex-end {
  -ms-flex-item-align: end !important;
  align-self: flex-end !important; }

.align-self-center {
  -ms-flex-item-align: center !important;
  -ms-grid-row-align: center !important;
  align-self: center !important; }

.align-self-baseline {
  -ms-flex-item-align: baseline !important;
  align-self: baseline !important; }

.align-self-stretch {
  -ms-flex-item-align: stretch !important;
  -ms-grid-row-align: stretch !important;
  align-self: stretch !important; }

/*
    FLEX GROW STYLES
    --- to be placed on the flex children
    .flex-grow-1, .flex-grow-2, etc.
*/
.flex-grow-1 {
  -ms-flex-positive: 1 !important;
  flex-grow: 1 !important; }

.flex-grow-2 {
  -ms-flex-positive: 2 !important;
  flex-grow: 2 !important; }

.flex-grow-3 {
  -ms-flex-positive: 3 !important;
  flex-grow: 3 !important; }

.flex-grow-4 {
  -ms-flex-positive: 4 !important;
  flex-grow: 4 !important; }

.flex-grow-5 {
  -ms-flex-positive: 5 !important;
  flex-grow: 5 !important; }

.flex-grow-6 {
  -ms-flex-positive: 6 !important;
  flex-grow: 6 !important; }

/*
    FLEX SHRINK STYLES 
    --- to be placed on the flex children
     .flex-shrink-0, .flex-shrink-1 (default)
*/
.flex-shrink-0 {
  -ms-flex-negative: 0 !important;
  flex-shrink: 0 !important; }

.flex-shrink-1 {
  -ms-flex-negative: 1 !important;
  flex-shrink: 1 !important; }

/*
    FLEX ORDER STYLES 
    --- to be placed on the flex children
    .flex-order-0, .flex-order-1, etc.
*/
.flex-order-0 {
  -ms-flex-order: 0 !important;
  order: 0 !important; }

.flex-order-1 {
  -ms-flex-order: 1 !important;
  order: 1 !important; }

.flex-order-2 {
  -ms-flex-order: 2 !important;
  order: 2 !important; }

.flex-order-3 {
  -ms-flex-order: 3 !important;
  order: 3 !important; }

.flex-order-4 {
  -ms-flex-order: 4 !important;
  order: 4 !important; }

.flex-order-5 {
  -ms-flex-order: 5 !important;
  order: 5 !important; }

.flex-order-6 {
  -ms-flex-order: 6 !important;
  order: 6 !important; }

.flex-order-7 {
  -ms-flex-order: 7 !important;
  order: 7 !important; }

.flex-order-8 {
  -ms-flex-order: 8 !important;
  order: 8 !important; }

.flex-order-9 {
  -ms-flex-order: 9 !important;
  order: 9 !important; }

.flex-order-10 {
  -ms-flex-order: 10 !important;
  order: 10 !important; }

.flex-order-11 {
  -ms-flex-order: 11 !important;
  order: 11 !important; }

.flex-order-12 {
  -ms-flex-order: 12 !important;
  order: 12 !important; }

.flex-order-13 {
  -ms-flex-order: 13 !important;
  order: 13 !important; }

.flex-order-14 {
  -ms-flex-order: 14 !important;
  order: 14 !important; }

.flex-order-15 {
  -ms-flex-order: 15 !important;
  order: 15 !important; }

.flex-order-16 {
  -ms-flex-order: 16 !important;
  order: 16 !important; }

.flex-order-17 {
  -ms-flex-order: 17 !important;
  order: 17 !important; }

.flex-order-18 {
  -ms-flex-order: 18 !important;
  order: 18 !important; }

.flex-order-19 {
  -ms-flex-order: 19 !important;
  order: 19 !important; }

.flex-order-20 {
  -ms-flex-order: 20 !important;
  order: 20 !important; }

/*#region FLEXBOX GRID */
/*

    FLEXBOX GRID
    --- to be placed on the .row children to make the grid

*/
.col-xs,
.col-sm,
.col-md,
.col-lg,
.col-xl {
  padding-right: 1.2em;
  padding-left: 1.2em; }
  @media print, (min-width: 768px) {
    .col-xs,
    .col-sm,
    .col-md,
    .col-lg,
    .col-xl {
      padding-right: 1.2em;
      padding-left: 1.2em; } }

.col-shrink-0 {
  padding-right: 1.2em;
  padding-left: 1.2em;
  -ms-flex-negative: 0;
  flex-shrink: 0; }
  @media print, (min-width: 768px) {
    .col-shrink-0 {
      padding-right: 1.2em;
      padding-left: 1.2em; } }

.col-xs-1,
.col-xs-2,
.col-xs-3,
.col-xs-4,
.col-xs-5,
.col-xs-6,
.col-xs-7,
.col-xs-8,
.col-xs-9,
.col-xs-10,
.col-xs-11,
.col-xs-12,
.col-sm-1,
.col-sm-2,
.col-sm-3,
.col-sm-4,
.col-sm-5,
.col-sm-6,
.col-sm-7,
.col-sm-8,
.col-sm-9,
.col-sm-10,
.col-sm-11,
.col-sm-12,
.col-md-1,
.col-md-2,
.col-md-3,
.col-md-4,
.col-md-5,
.col-md-6,
.col-md-7,
.col-md-8,
.col-md-9,
.col-md-10,
.col-md-11,
.col-md-12,
.col-lg-1,
.col-lg-2,
.col-lg-3,
.col-lg-4,
.col-lg-5,
.col-lg-6,
.col-lg-7,
.col-lg-8,
.col-lg-9,
.col-lg-10,
.col-lg-11,
.col-lg-12,
.col-xl-1,
.col-xl-2,
.col-xl-3,
.col-xl-4,
.col-xl-5,
.col-xl-6,
.col-xl-7,
.col-xl-8,
.col-xl-9,
.col-xl-10,
.col-xl-11,
.col-xl-12 {
  position: relative;
  min-height: 1px;
  padding-right: 1.2em;
  padding-left: 1.2em;
  width: 100%; }
  @media print, (min-width: 768px) {
    .col-xs-1,
    .col-xs-2,
    .col-xs-3,
    .col-xs-4,
    .col-xs-5,
    .col-xs-6,
    .col-xs-7,
    .col-xs-8,
    .col-xs-9,
    .col-xs-10,
    .col-xs-11,
    .col-xs-12,
    .col-sm-1,
    .col-sm-2,
    .col-sm-3,
    .col-sm-4,
    .col-sm-5,
    .col-sm-6,
    .col-sm-7,
    .col-sm-8,
    .col-sm-9,
    .col-sm-10,
    .col-sm-11,
    .col-sm-12,
    .col-md-1,
    .col-md-2,
    .col-md-3,
    .col-md-4,
    .col-md-5,
    .col-md-6,
    .col-md-7,
    .col-md-8,
    .col-md-9,
    .col-md-10,
    .col-md-11,
    .col-md-12,
    .col-lg-1,
    .col-lg-2,
    .col-lg-3,
    .col-lg-4,
    .col-lg-5,
    .col-lg-6,
    .col-lg-7,
    .col-lg-8,
    .col-lg-9,
    .col-lg-10,
    .col-lg-11,
    .col-lg-12,
    .col-xl-1,
    .col-xl-2,
    .col-xl-3,
    .col-xl-4,
    .col-xl-5,
    .col-xl-6,
    .col-xl-7,
    .col-xl-8,
    .col-xl-9,
    .col-xl-10,
    .col-xl-11,
    .col-xl-12 {
      padding-right: 1.2em;
      padding-left: 1.2em; } }

.col-xs {
  -ms-flex-preferred-size: 0;
  flex-basis: 0;
  -ms-flex-positive: 1;
  flex-grow: 1;
  max-width: 100%; }

.col-xs-1 {
  -ms-flex: 0 0 8.333333%;
  flex: 0 0 8.333333%;
  max-width: 8.333333%; }

.col-xs-2 {
  -ms-flex: 0 0 16.666667%;
  flex: 0 0 16.666667%;
  max-width: 16.666667%; }

.col-xs-3 {
  -ms-flex: 0 0 25%;
  flex: 0 0 25%;
  max-width: 25%; }

.col-xs-4 {
  -ms-flex: 0 0 33.333333%;
  flex: 0 0 33.333333%;
  max-width: 33.333333%; }

.col-xs-5 {
  -ms-flex: 0 0 41.666667%;
  flex: 0 0 41.666667%;
  max-width: 41.666667%; }

.col-xs-6 {
  -ms-flex: 0 0 50%;
  flex: 0 0 50%;
  max-width: 50%; }

.col-xs-7 {
  -ms-flex: 0 0 58.333333%;
  flex: 0 0 58.333333%;
  max-width: 58.333333%; }

.col-xs-8 {
  -ms-flex: 0 0 66.666667%;
  flex: 0 0 66.666667%;
  max-width: 66.666667%; }

.col-xs-9 {
  -ms-flex: 0 0 75%;
  flex: 0 0 75%;
  max-width: 75%; }

.col-xs-10 {
  -ms-flex: 0 0 83.333333%;
  flex: 0 0 83.333333%;
  max-width: 83.333333%; }

.col-xs-11 {
  -ms-flex: 0 0 91.666667%;
  flex: 0 0 91.666667%;
  max-width: 91.666667%; }

.col-xs-12 {
  -ms-flex: 0 0 100%;
  flex: 0 0 100%;
  max-width: 100%; }

.col-xs-pull-0 {
  right: auto; }

.col-xs-pull-1 {
  right: 8.333333%; }

.col-xs-pull-2 {
  right: 16.666667%; }

.col-xs-pull-3 {
  right: 25%; }

.col-xs-pull-4 {
  right: 33.333333%; }

.col-xs-pull-5 {
  right: 41.666667%; }

.col-xs-pull-6 {
  right: 50%; }

.col-xs-pull-7 {
  right: 58.333333%; }

.col-xs-pull-8 {
  right: 66.666667%; }

.col-xs-pull-9 {
  right: 75%; }

.col-xs-pull-10 {
  right: 83.333333%; }

.col-xs-pull-11 {
  right: 91.666667%; }

.col-xs-pull-12 {
  right: 100%; }

.col-xs-push-0 {
  left: auto; }

.col-xs-push-1 {
  left: 8.333333%; }

.col-xs-push-2 {
  left: 16.666667%; }

.col-xs-push-3 {
  left: 25%; }

.col-xs-push-4 {
  left: 33.333333%; }

.col-xs-push-5 {
  left: 41.666667%; }

.col-xs-push-6 {
  left: 50%; }

.col-xs-push-7 {
  left: 58.333333%; }

.col-xs-push-8 {
  left: 66.666667%; }

.col-xs-push-9 {
  left: 75%; }

.col-xs-push-10 {
  left: 83.333333%; }

.col-xs-push-11 {
  left: 91.666667%; }

.col-xs-push-12 {
  left: 100%; }

.col-xs-offset-1 {
  margin-left: 8.333333%; }

.col-xs-offset-2 {
  margin-left: 16.666667%; }

.col-xs-offset-3 {
  margin-left: 25%; }

.col-xs-offset-4 {
  margin-left: 33.333333%; }

.col-xs-offset-5 {
  margin-left: 41.666667%; }

.col-xs-offset-6 {
  margin-left: 50%; }

.col-xs-offset-7 {
  margin-left: 58.333333%; }

.col-xs-offset-8 {
  margin-left: 66.666667%; }

.col-xs-offset-9 {
  margin-left: 75%; }

.col-xs-offset-10 {
  margin-left: 83.333333%; }

.col-xs-offset-11 {
  margin-left: 91.666667%; }

@media (min-width: 480px) {
  .col-sm {
    -ms-flex-preferred-size: 0;
    flex-basis: 0;
    -ms-flex-positive: 1;
    flex-grow: 1;
    max-width: 100%; }
  .col-sm-1 {
    -ms-flex: 0 0 8.333333%;
    flex: 0 0 8.333333%;
    max-width: 8.333333%; }
  .col-sm-2 {
    -ms-flex: 0 0 16.666667%;
    flex: 0 0 16.666667%;
    max-width: 16.666667%; }
  .col-sm-3 {
    -ms-flex: 0 0 25%;
    flex: 0 0 25%;
    max-width: 25%; }
  .col-sm-4 {
    -ms-flex: 0 0 33.333333%;
    flex: 0 0 33.333333%;
    max-width: 33.333333%; }
  .col-sm-5 {
    -ms-flex: 0 0 41.666667%;
    flex: 0 0 41.666667%;
    max-width: 41.666667%; }
  .col-sm-6 {
    -ms-flex: 0 0 50%;
    flex: 0 0 50%;
    max-width: 50%; }
  .col-sm-7 {
    -ms-flex: 0 0 58.333333%;
    flex: 0 0 58.333333%;
    max-width: 58.333333%; }
  .col-sm-8 {
    -ms-flex: 0 0 66.666667%;
    flex: 0 0 66.666667%;
    max-width: 66.666667%; }
  .col-sm-9 {
    -ms-flex: 0 0 75%;
    flex: 0 0 75%;
    max-width: 75%; }
  .col-sm-10 {
    -ms-flex: 0 0 83.333333%;
    flex: 0 0 83.333333%;
    max-width: 83.333333%; }
  .col-sm-11 {
    -ms-flex: 0 0 91.666667%;
    flex: 0 0 91.666667%;
    max-width: 91.666667%; }
  .col-sm-12 {
    -ms-flex: 0 0 100%;
    flex: 0 0 100%;
    max-width: 100%; }
  .col-sm-pull-0 {
    right: auto; }
  .col-sm-pull-1 {
    right: 8.333333%; }
  .col-sm-pull-2 {
    right: 16.666667%; }
  .col-sm-pull-3 {
    right: 25%; }
  .col-sm-pull-4 {
    right: 33.333333%; }
  .col-sm-pull-5 {
    right: 41.666667%; }
  .col-sm-pull-6 {
    right: 50%; }
  .col-sm-pull-7 {
    right: 58.333333%; }
  .col-sm-pull-8 {
    right: 66.666667%; }
  .col-sm-pull-9 {
    right: 75%; }
  .col-sm-pull-10 {
    right: 83.333333%; }
  .col-sm-pull-11 {
    right: 91.666667%; }
  .col-sm-pull-12 {
    right: 100%; }
  .col-sm-push-0 {
    left: auto; }
  .col-sm-push-1 {
    left: 8.333333%; }
  .col-sm-push-2 {
    left: 16.666667%; }
  .col-sm-push-3 {
    left: 25%; }
  .col-sm-push-4 {
    left: 33.333333%; }
  .col-sm-push-5 {
    left: 41.666667%; }
  .col-sm-push-6 {
    left: 50%; }
  .col-sm-push-7 {
    left: 58.333333%; }
  .col-sm-push-8 {
    left: 66.666667%; }
  .col-sm-push-9 {
    left: 75%; }
  .col-sm-push-10 {
    left: 83.333333%; }
  .col-sm-push-11 {
    left: 91.666667%; }
  .col-sm-push-12 {
    left: 100%; }
  .col-sm-offset-0 {
    margin-left: 0%; }
  .col-sm-offset-1 {
    margin-left: 8.333333%; }
  .col-sm-offset-2 {
    margin-left: 16.666667%; }
  .col-sm-offset-3 {
    margin-left: 25%; }
  .col-sm-offset-4 {
    margin-left: 33.333333%; }
  .col-sm-offset-5 {
    margin-left: 41.666667%; }
  .col-sm-offset-6 {
    margin-left: 50%; }
  .col-sm-offset-7 {
    margin-left: 58.333333%; }
  .col-sm-offset-8 {
    margin-left: 66.666667%; }
  .col-sm-offset-9 {
    margin-left: 75%; }
  .col-sm-offset-10 {
    margin-left: 83.333333%; }
  .col-sm-offset-11 {
    margin-left: 91.666667%; } }

@media (min-width: 768px) {
  .col-md {
    -ms-flex-preferred-size: 0;
    flex-basis: 0;
    -ms-flex-positive: 1;
    flex-grow: 1;
    max-width: 100%; }
  .col-md-1 {
    -ms-flex: 0 0 8.333333%;
    flex: 0 0 8.333333%;
    max-width: 8.333333%; }
  .col-md-2 {
    -ms-flex: 0 0 16.666667%;
    flex: 0 0 16.666667%;
    max-width: 16.666667%; }
  .col-md-3 {
    -ms-flex: 0 0 25%;
    flex: 0 0 25%;
    max-width: 25%; }
  .col-md-4 {
    -ms-flex: 0 0 33.333333%;
    flex: 0 0 33.333333%;
    max-width: 33.333333%; }
  .col-md-5 {
    -ms-flex: 0 0 41.666667%;
    flex: 0 0 41.666667%;
    max-width: 41.666667%; }
  .col-md-6 {
    -ms-flex: 0 0 50%;
    flex: 0 0 50%;
    max-width: 50%; }
  .col-md-7 {
    -ms-flex: 0 0 58.333333%;
    flex: 0 0 58.333333%;
    max-width: 58.333333%; }
  .col-md-8 {
    -ms-flex: 0 0 66.666667%;
    flex: 0 0 66.666667%;
    max-width: 66.666667%; }
  .col-md-9 {
    -ms-flex: 0 0 75%;
    flex: 0 0 75%;
    max-width: 75%; }
  .col-md-10 {
    -ms-flex: 0 0 83.333333%;
    flex: 0 0 83.333333%;
    max-width: 83.333333%; }
  .col-md-11 {
    -ms-flex: 0 0 91.666667%;
    flex: 0 0 91.666667%;
    max-width: 91.666667%; }
  .col-md-12 {
    -ms-flex: 0 0 100%;
    flex: 0 0 100%;
    max-width: 100%; }
  .col-md-pull-0 {
    right: auto; }
  .col-md-pull-1 {
    right: 8.333333%; }
  .col-md-pull-2 {
    right: 16.666667%; }
  .col-md-pull-3 {
    right: 25%; }
  .col-md-pull-4 {
    right: 33.333333%; }
  .col-md-pull-5 {
    right: 41.666667%; }
  .col-md-pull-6 {
    right: 50%; }
  .col-md-pull-7 {
    right: 58.333333%; }
  .col-md-pull-8 {
    right: 66.666667%; }
  .col-md-pull-9 {
    right: 75%; }
  .col-md-pull-10 {
    right: 83.333333%; }
  .col-md-pull-11 {
    right: 91.666667%; }
  .col-md-pull-12 {
    right: 100%; }
  .col-md-push-0 {
    left: auto; }
  .col-md-push-1 {
    left: 8.333333%; }
  .col-md-push-2 {
    left: 16.666667%; }
  .col-md-push-3 {
    left: 25%; }
  .col-md-push-4 {
    left: 33.333333%; }
  .col-md-push-5 {
    left: 41.666667%; }
  .col-md-push-6 {
    left: 50%; }
  .col-md-push-7 {
    left: 58.333333%; }
  .col-md-push-8 {
    left: 66.666667%; }
  .col-md-push-9 {
    left: 75%; }
  .col-md-push-10 {
    left: 83.333333%; }
  .col-md-push-11 {
    left: 91.666667%; }
  .col-md-push-12 {
    left: 100%; }
  .col-md-offset-0 {
    margin-left: 0%; }
  .col-md-offset-1 {
    margin-left: 8.333333%; }
  .col-md-offset-2 {
    margin-left: 16.666667%; }
  .col-md-offset-3 {
    margin-left: 25%; }
  .col-md-offset-4 {
    margin-left: 33.333333%; }
  .col-md-offset-5 {
    margin-left: 41.666667%; }
  .col-md-offset-6 {
    margin-left: 50%; }
  .col-md-offset-7 {
    margin-left: 58.333333%; }
  .col-md-offset-8 {
    margin-left: 66.666667%; }
  .col-md-offset-9 {
    margin-left: 75%; }
  .col-md-offset-10 {
    margin-left: 83.333333%; }
  .col-md-offset-11 {
    margin-left: 91.666667%; } }

@media (min-width: 980px) {
  .col-lg {
    -ms-flex-preferred-size: 0;
    flex-basis: 0;
    -ms-flex-positive: 1;
    flex-grow: 1;
    max-width: 100%; }
  .col-lg-1 {
    -ms-flex: 0 0 8.333333%;
    flex: 0 0 8.333333%;
    max-width: 8.333333%; }
  .col-lg-2 {
    -ms-flex: 0 0 16.666667%;
    flex: 0 0 16.666667%;
    max-width: 16.666667%; }
  .col-lg-3 {
    -ms-flex: 0 0 25%;
    flex: 0 0 25%;
    max-width: 25%; }
  .col-lg-4 {
    -ms-flex: 0 0 33.333333%;
    flex: 0 0 33.333333%;
    max-width: 33.333333%; }
  .col-lg-5 {
    -ms-flex: 0 0 41.666667%;
    flex: 0 0 41.666667%;
    max-width: 41.666667%; }
  .col-lg-6 {
    -ms-flex: 0 0 50%;
    flex: 0 0 50%;
    max-width: 50%; }
  .col-lg-7 {
    -ms-flex: 0 0 58.333333%;
    flex: 0 0 58.333333%;
    max-width: 58.333333%; }
  .col-lg-8 {
    -ms-flex: 0 0 66.666667%;
    flex: 0 0 66.666667%;
    max-width: 66.666667%; }
  .col-lg-9 {
    -ms-flex: 0 0 75%;
    flex: 0 0 75%;
    max-width: 75%; }
  .col-lg-10 {
    -ms-flex: 0 0 83.333333%;
    flex: 0 0 83.333333%;
    max-width: 83.333333%; }
  .col-lg-11 {
    -ms-flex: 0 0 91.666667%;
    flex: 0 0 91.666667%;
    max-width: 91.666667%; }
  .col-lg-12 {
    -ms-flex: 0 0 100%;
    flex: 0 0 100%;
    max-width: 100%; }
  .col-lg-pull-0 {
    right: auto; }
  .col-lg-pull-1 {
    right: 8.333333%; }
  .col-lg-pull-2 {
    right: 16.666667%; }
  .col-lg-pull-3 {
    right: 25%; }
  .col-lg-pull-4 {
    right: 33.333333%; }
  .col-lg-pull-5 {
    right: 41.666667%; }
  .col-lg-pull-6 {
    right: 50%; }
  .col-lg-pull-7 {
    right: 58.333333%; }
  .col-lg-pull-8 {
    right: 66.666667%; }
  .col-lg-pull-9 {
    right: 75%; }
  .col-lg-pull-10 {
    right: 83.333333%; }
  .col-lg-pull-11 {
    right: 91.666667%; }
  .col-lg-pull-12 {
    right: 100%; }
  .col-lg-push-0 {
    left: auto; }
  .col-lg-push-1 {
    left: 8.333333%; }
  .col-lg-push-2 {
    left: 16.666667%; }
  .col-lg-push-3 {
    left: 25%; }
  .col-lg-push-4 {
    left: 33.333333%; }
  .col-lg-push-5 {
    left: 41.666667%; }
  .col-lg-push-6 {
    left: 50%; }
  .col-lg-push-7 {
    left: 58.333333%; }
  .col-lg-push-8 {
    left: 66.666667%; }
  .col-lg-push-9 {
    left: 75%; }
  .col-lg-push-10 {
    left: 83.333333%; }
  .col-lg-push-11 {
    left: 91.666667%; }
  .col-lg-push-12 {
    left: 100%; }
  .col-lg-offset-0 {
    margin-left: 0%; }
  .col-lg-offset-1 {
    margin-left: 8.333333%; }
  .col-lg-offset-2 {
    margin-left: 16.666667%; }
  .col-lg-offset-3 {
    margin-left: 25%; }
  .col-lg-offset-4 {
    margin-left: 33.333333%; }
  .col-lg-offset-5 {
    margin-left: 41.666667%; }
  .col-lg-offset-6 {
    margin-left: 50%; }
  .col-lg-offset-7 {
    margin-left: 58.333333%; }
  .col-lg-offset-8 {
    margin-left: 66.666667%; }
  .col-lg-offset-9 {
    margin-left: 75%; }
  .col-lg-offset-10 {
    margin-left: 83.333333%; }
  .col-lg-offset-11 {
    margin-left: 91.666667%; } }

@media (min-width: 1260px) {
  .col-xl {
    -ms-flex-preferred-size: 0;
    flex-basis: 0;
    -ms-flex-positive: 1;
    flex-grow: 1;
    max-width: 100%; }
  .col-xl-1 {
    -ms-flex: 0 0 8.333333%;
    flex: 0 0 8.333333%;
    max-width: 8.333333%; }
  .col-xl-2 {
    -ms-flex: 0 0 16.666667%;
    flex: 0 0 16.666667%;
    max-width: 16.666667%; }
  .col-xl-3 {
    -ms-flex: 0 0 25%;
    flex: 0 0 25%;
    max-width: 25%; }
  .col-xl-4 {
    -ms-flex: 0 0 33.333333%;
    flex: 0 0 33.333333%;
    max-width: 33.333333%; }
  .col-xl-5 {
    -ms-flex: 0 0 41.666667%;
    flex: 0 0 41.666667%;
    max-width: 41.666667%; }
  .col-xl-6 {
    -ms-flex: 0 0 50%;
    flex: 0 0 50%;
    max-width: 50%; }
  .col-xl-7 {
    -ms-flex: 0 0 58.333333%;
    flex: 0 0 58.333333%;
    max-width: 58.333333%; }
  .col-xl-8 {
    -ms-flex: 0 0 66.666667%;
    flex: 0 0 66.666667%;
    max-width: 66.666667%; }
  .col-xl-9 {
    -ms-flex: 0 0 75%;
    flex: 0 0 75%;
    max-width: 75%; }
  .col-xl-10 {
    -ms-flex: 0 0 83.333333%;
    flex: 0 0 83.333333%;
    max-width: 83.333333%; }
  .col-xl-11 {
    -ms-flex: 0 0 91.666667%;
    flex: 0 0 91.666667%;
    max-width: 91.666667%; }
  .col-xl-12 {
    -ms-flex: 0 0 100%;
    flex: 0 0 100%;
    max-width: 100%; }
  .col-xl-pull-0 {
    right: auto; }
  .col-xl-pull-1 {
    right: 8.333333%; }
  .col-xl-pull-2 {
    right: 16.666667%; }
  .col-xl-pull-3 {
    right: 25%; }
  .col-xl-pull-4 {
    right: 33.333333%; }
  .col-xl-pull-5 {
    right: 41.666667%; }
  .col-xl-pull-6 {
    right: 50%; }
  .col-xl-pull-7 {
    right: 58.333333%; }
  .col-xl-pull-8 {
    right: 66.666667%; }
  .col-xl-pull-9 {
    right: 75%; }
  .col-xl-pull-10 {
    right: 83.333333%; }
  .col-xl-pull-11 {
    right: 91.666667%; }
  .col-xl-pull-12 {
    right: 100%; }
  .col-xl-push-0 {
    left: auto; }
  .col-xl-push-1 {
    left: 8.333333%; }
  .col-xl-push-2 {
    left: 16.666667%; }
  .col-xl-push-3 {
    left: 25%; }
  .col-xl-push-4 {
    left: 33.333333%; }
  .col-xl-push-5 {
    left: 41.666667%; }
  .col-xl-push-6 {
    left: 50%; }
  .col-xl-push-7 {
    left: 58.333333%; }
  .col-xl-push-8 {
    left: 66.666667%; }
  .col-xl-push-9 {
    left: 75%; }
  .col-xl-push-10 {
    left: 83.333333%; }
  .col-xl-push-11 {
    left: 91.666667%; }
  .col-xl-push-12 {
    left: 100%; }
  .col-xl-offset-0 {
    margin-left: 0%; }
  .col-xl-offset-1 {
    margin-left: 8.333333%; }
  .col-xl-offset-2 {
    margin-left: 16.666667%; }
  .col-xl-offset-3 {
    margin-left: 25%; }
  .col-xl-offset-4 {
    margin-left: 33.333333%; }
  .col-xl-offset-5 {
    margin-left: 41.666667%; }
  .col-xl-offset-6 {
    margin-left: 50%; }
  .col-xl-offset-7 {
    margin-left: 58.333333%; }
  .col-xl-offset-8 {
    margin-left: 66.666667%; }
  .col-xl-offset-9 {
    margin-left: 75%; }
  .col-xl-offset-10 {
    margin-left: 83.333333%; }
  .col-xl-offset-11 {
    margin-left: 91.666667%; } }

/*#endregion */
/*
   PLACHOLDER FLEX TABLE STYLES
   These placeholder rules will not generate CSS on their own.
   Must be used with the @extend directive.

    %table-cell-deco-mobile        Base styles to put a border around a unit of flex-table-cells on mobile (when they are stacked)
                                   [Placeholder Selector]

*/
.flex-table-md.deco-cols > .flex-table-cell, .flex-table-md.deco-rows > .flex-table-cell {
  border-left: 1px solid var(--border-gray-87);
  border-right: 1px solid var(--border-gray-87); }
  .flex-table-md.deco-cols > .flex-table-cell.first, .flex-table-md.deco-rows > .flex-table-cell.first {
    border-top: 1px solid var(--border-gray-87); }
  .flex-table-md.deco-cols > .flex-table-cell.last, .flex-table-md.deco-rows > .flex-table-cell.last {
    border-bottom: 1px solid var(--border-gray-87); }
  .flex-table-md.deco-cols > .flex-table-cell.padded, .flex-table-md.deco-rows > .flex-table-cell.padded {
    padding: 1.5em 1.2em; }
    @media print, (min-width: 768px) {
      .flex-table-md.deco-cols > .flex-table-cell.padded, .flex-table-md.deco-rows > .flex-table-cell.padded {
        padding: 2em 2em; } }
  .flex-table-md.deco-cols > .flex-table-cell.padded-horizontal, .flex-table-md.deco-rows > .flex-table-cell.padded-horizontal {
    padding-left: 1.2em;
    padding-right: 1.2em; }
    @media print, (min-width: 768px) {
      .flex-table-md.deco-cols > .flex-table-cell.padded-horizontal, .flex-table-md.deco-rows > .flex-table-cell.padded-horizontal {
        padding-left: 2em;
        padding-right: 2em; } }

/* FLEX TABLES

    Note: This is currently written to work with .flex-table-md. Could be updated to .flex-table-* following the patterns used with placeholders and mixins for CSS tables --> .table-*

    .flex-table-*           An element that renders in a table-like fashion at * screen sizes and above
                            Currently supports MD only. See note above.

    .deco-cols              Applies a border around the "column". Columns are stacked on mobile and side by side on MD+
                            [Extends .flex-table-*]

    .deco-rows             Applies a border around the "row". Rows are stacked on mobile and MD+
                            [Extends .flex-table-*]

    .stacked-above          A flex-table that is stacked directly above something else with a border; removes the bottom margin and border if any was applied via .deco-
                            [Extends .flex-table-*]       
    

    .flex-table-cell        An element that renders in a table cell-like fashion at * screen sizes and above
                            [Child of .flex-table]

    .padded                 A table cell with more padding
                            [Extends .flex-table-cell]
    
    .padded-horizontal      A table cell with more horizontal padding
                            [Extends .flex-table-cell]

      

    */
@media print, (min-width: 768px) {
  .flex-table-md {
    position: relative;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin: 0 0 3em 0;
    padding: 0; } }

@media print, (min-width: 768px) {
  .flex-table-md.deco-cols {
    border-right: 1px solid var(--border-gray-87); }
    .flex-table-md.deco-cols > .flex-table-cell {
      border-right: 0; } }

@media print, (min-width: 768px) {
  .flex-table-md.deco-rows {
    border: 1px solid var(--border-gray-87);
    border-bottom: 0; }
    .flex-table-md.deco-rows > .flex-table-cell {
      border: 0;
      border-bottom: 1px solid var(--border-gray-87); }
      .flex-table-md.deco-rows > .flex-table-cell.first {
        border-top: 0; } }

.flex-table-md.stacked-above {
  margin-bottom: 0;
  border-bottom: 0; }
  @media print, (min-width: 768px) {
    .flex-table-md.stacked-above > .flex-table-cell,
    .flex-table-md.stacked-above > .flex-table-cell.last {
      border-bottom: 0; } }

@media print, (min-width: 768px) {
  .tile > .flex-table-md,
  .tile-convertible > .flex-table-md {
    margin-top: -1px; } }

.flex-table-cell {
  position: relative;
  padding-top: 0.4em;
  padding-bottom: 0.4em;
  padding-right: 1.2em;
  padding-left: 1.2em; }
  @media print, (min-width: 768px) {
    .flex-table-cell {
      padding-right: 1.2em;
      padding-left: 1.2em; } }
  .flex-table-cell.last {
    margin-bottom: 1.2em; }
    @media print, (min-width: 768px) {
      .flex-table-cell.last {
        margin-bottom: 0; } }
  @media print, (min-width: 768px) {
    .flex-table-cell {
      box-sizing: border-box;
      -ms-flex-positive: 1;
      flex-grow: 1;
      width: 100%;
      padding-top: 1.2em;
      padding-bottom: 1.2em; } }
  @media print, print and (min-width: 768px), print and (min-width: 768px), (min-width: 768px) and (min-width: 768px) {
    .flex-table-cell {
      padding-top: 1em;
      padding-bottom: 1em; } }
  @media print, (min-width: 768px) {
      .flex-table-cell.condensed {
        padding-top: 0.4em;
        padding-bottom: 0.4em; }
      .flex-table-md.two-cols > .flex-table-cell {
        width: 50%; }
      .flex-table-md.three-cols > .flex-table-cell {
        width: 33.33%; }
      .flex-table-md.four-cols > .flex-table-cell {
        width: 25%; }
      .flex-table-md.five-cols > .flex-table-cell {
        width: 20%; }
      .flex-table-md.six-cols > .flex-table-cell {
        width: 16.6%; } }

/* FLEX TABLES


    .column-directional     An element that shows direction between columns, with an icon, such as an arrow, or a word, such as "OR"
                            Note: This assumes the table is flex-table-md. If we ever use other breakpoints for flex-table, this will need to change based on the parent.
                            Use with .flext-table-md.deco-cols                        
                            [Module parent]
                            [Child of .flex-table-md or .flex-table-cell]
   
                            


*/
.column-directional {
  display: block;
  width: 2em;
  height: 2em;
  border-radius: 1em;
  background-color: var(--bg-gray-45);
  color: var(--text-white);
  text-align: center;
  line-height: 2.2;
  margin: 0 auto 1em; }
  @media print, (min-width: 768px) {
    .column-directional {
      z-index: 1;
      position: absolute;
      top: 50%;
      margin: -1em 0 0 -1em;
      line-height: 2.4; }
      .flex-table-md > .column-directional {
        left: 50%; }
      .flex-table-cell > .column-directional {
        right: -1em; } }

/* TRANSITIONS 
    
    .fade-in                    A class added to any element with a 0% opacity to apply a fade transition to 100% opacity
                                [Transition class]

    .fade-out                   A class added to any element with 100% opacity to apply a fade transition to 0% opacity
                                [Transition class]

    .fade                       A class added to any element to transition opacity; Opacity value set via javascript
                                [Transition class]

    --transition-duration       A custom value for transition-duration that can be passed in.
                                Optional. Defaults to 0.5s
                                [Custom Property]

    Note: !important used because as utility classes they need to be able to override style definitions of classes defined with the same specificity later in the CSS bundle.
    The fade* classes are deprecated. Please use the opacity classes instead


    Example:

    <div id="Modal" class="fade" style="--transition-duration: .2s;">
        <div class="modal_content fade" style="--transition-duration: .5s;">
            ...
        </div>
    </div>

*/
.fade-in {
  opacity: 1 !important;
  transition: opacity ease-in-out;
  transition-duration: .5s;
  transition-duration: var(--transition-duration, 0.5s); }

.fade-out {
  opacity: 0 !important;
  transition: opacity ease-in-out;
  transition-duration: .5s;
  transition-duration: var(--transition-duration, 0.5s); }

.fade {
  transition: opacity ease-in-out;
  transition-duration: .5s;
  transition-duration: var(--transition-duration, 0.5s); }

/* SKELETON LOADING 
    
    .skeleton                   A plusing gray background. Used on an element as a placeholder until the real content loads.
                                Note: The height and width are not defined here. Define those in the markup.
                                [Animation class]

    Example:             
    <button class="button-image skeleton border-radius-google" type="button" style="height: 38px; width: 215px;">
        <img src="@Url.StaticResource("content/assets/logos/external","button_add_to_google_wallet.svg")" class="img-responsive easeload-image" onload="this.style.opacity=1" 
                        alt="Add to Google Wallet" width="215" height="38" style="max-height: 38px" />
    </button>

*/
.skeleton {
  animation: skeleton-loading 1s linear infinite alternate;
  border-radius: 3px; }

@keyframes skeleton-loading {
  0% {
    background-color: var(--bg-gray-70); }
  100% {
    background-color: var(--bg-gray-90); } }

/* EASE LOAD IMAGE
    
    .easeload-image         An animation added to an image that fades the image in slowly so it doesn't pop in. 
                            Might be used with a skeleton that holds the place for the image and they fades in the image.
                            Use with the javascript onload="this.style.opacity=1" 
                            [Transition Class]

    Example:    
    
    <button class="button-image skeleton border-radius-google" type="button" style="height: 38px; width: 215px;">
        <img src="@Url.StaticResource("content/assets/logos/external","button_add_to_google_wallet.svg")" class="img-responsive easeload-image" onload="this.style.opacity=1" 
                        alt="Add to Google Wallet" width="215" height="38" style="max-height: 38px" />
    </button>


*/
.easeload-image {
  opacity: 0;
  transition: opacity 1.5s ease; }

/* OPACITY 
    .opacity-invisible     A class to set the visiblity of any element to 0.
    .opacity-visible       A class to set the visiblity of any element to 1.

    Note: Set in Web Branch on pjax container via JavaScript.
    Note: !important used because as utility classes they need to be able to override style definitions of classes defined with the same specificity later in the CSS bundle.
*/
.opacity-invisible {
  opacity: 0 !important; }

.opacity-visible {
  opacity: 1 !important; }

.transition-opacity {
  transition: opacity .5s ease-in-out; }

.transition-opacity-fast {
  transition: opacity .25s ease-in-out; }

/* SPIN
    .spin                   An animation class which makes any element spin 360 degrees
                            [Animation class]

    .spinnable              An animation class which enables an element to be spun (and un-spun)
                            [Transition class]

    .spin-60                 Can be added to an element with .spinnable to spin it 60 degrees, and removed to spin that element back to its previous position
                            [Modifier for .spinnable]

    .spin-180                Can be added to an element with .spinnable to spin it 180 degrees, and removed to spin that element back to its previous position
                            [Modifier for .spinnable]
   
*/
.spin {
  animation: spin 1s linear infinite; }

@keyframes spin {
  from {
    transform: rotate(0deg);
    -moz-transform: rotate(0deg); }
  50% {
    transform: rotate(180deg);
    -moz-transform: rotate(180deg); }
  to {
    transform: rotate(360deg);
    -moz-transform: rotate(360deg); } }

.spinnable {
  transform: rotate(0deg);
  transition: transform 0.25s linear;
  position: absolute; }
  .spinnable.spin-60 {
    transform: rotate(60deg) translateY(3px); }
  .spinnable.spin-180 {
    transform: rotate(180deg) translateY(3px); }

/*
    WB OFFER

    .wb-offer       A container for an iframe with the Marketing ad inside Web Branch
                    [Module Parent]

*/
.wb-offer {
  position: relative;
  margin-bottom: 1.5em;
  border-radius: 3px;
  height: 0;
  overflow: hidden;
  padding-bottom: 31.25%; }
  @media print, (min-width: 480px) {
    .wb-offer {
      padding-bottom: 12.36%; } }
  @media print, (min-width: 768px) {
    .wb-offer {
      padding-bottom: 9.27%; } }
  @media (min-width: 980px) {
    .wb-offer {
      padding-bottom: 9.27%; } }
  @media (min-width: 1720px) {
    .wb-offer {
      padding-bottom: 90px;
      width: 970px;
      margin-left: auto;
      margin-right: auto; } }
  .wb-offer iframe,
  .wb-offer a {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background-color: transparent;
    border: 1px solid var(--border-gray-87);
    border-radius: 3px;
    padding: 0; }

/*BADGES

   Badges are decorative elements that can be used to indicate a count/number of items.
   
  
    .badge                      A badge to hold a number indicating a count of items 
                                [Module Parent]
    
    .hollow                     A badge with a border and text for use on white backgrounds
                                [Extends .badge]

    .reversed                   A badge with white border and text for use on dark backgrounds
                                [Extends .badge]
    

*/
.badge {
  display: inline-block;
  font-weight: 700;
  font-size: 1rem;
  border-radius: 1.4em;
  height: 1.4em;
  min-width: 1.4em;
  line-height: 1;
  padding: 1px .2em 0 .3em;
  overflow: hidden;
  vertical-align: text-top; }
  .filter_item > .badge {
    vertical-align: baseline; }
  [class*=button-] > .badge {
    vertical-align: bottom;
    position: relative;
    top: -1px; }

.badge {
  background: var(--bg-primary);
  border: 1px solid var(--border-primary); }
  .badge.empty {
    display: none; }
  .badge,
  .hover .badge:hover,
  .hover a.badge:hover,
  .hover .badge:active,
  .hover a.badge:active,
  .hover .badge:focus,
  .hover a.badge:focus, .badge.active {
    color: var(--text-white); }
  .badge.hollow {
    background: transparent;
    border: 1px solid var(--border-primary); }
    .badge.hollow,
    .hover .badge.hollow:hover,
    .hover a.badge.hollow:hover,
    .hover .badge.hollow:active,
    .hover a.badge.hollow:active,
    .hover .badge.hollow:focus,
    .hover a.badge.hollow:focus, .badge.hollow.active {
      color: var(--text-primary); }
  .badge.reversed {
    background: transparent;
    border: 1px solid var(--border-white-opacity-90); }
    .badge.reversed,
    .hover .badge.reversed:hover,
    .hover a.badge.reversed:hover,
    .hover .badge.reversed:active,
    .hover a.badge.reversed:active,
    .hover .badge.reversed:focus,
    .hover a.badge.reversed:focus, .badge.reversed.active {
      color: var(--text-white-opacity-95); }

/*   
    PLACHOLDER BOX STYLES
    These placeholder rules will not generate CSS on their own.
    Must be used with the @extend directive.
*/
/* BOXES 

    .box                    A container with padding and rounded corners
                            [Module parent]  

    .padded                 A box with extra padding
                            [Extends .box, .box-message or .box-left-cap]

    .sharp                  A box, box message or box w/left cap  without rounded corners
                            [Extends .box, .box-message or .box-left-cap]

    .shadowed               A box, box message or box w/left cap with a drop shadow
                            [Extends .box, .box-message or .box-left-cap]

    .deco                   A box with a border
                            [Extends .box]

    .has-close-x            A close X in the upper right                            
                            [Extends .box]

    .inline-block           A box with display inline-block
                            [Extends .box]

*/
.box, .box-left-cap {
  display: block;
  padding: 1.2em 1.2em;
  margin: 0 0 3rem;
  border-radius: 3px;
  position: relative;
  /* WITH TABLE */ }
  @media print, (min-width: 768px) {
    .box, .box-left-cap {
      padding: 1.5em 1.2em;
      margin: 0 0 3rem; } }
  .padded.box, .padded.box-left-cap {
    padding: 1.5em 1.2em; }
    @media print, (min-width: 768px) {
      .padded.box, .padded.box-left-cap {
        padding: 2em 2em; } }
  .sharp.box, .sharp.box-left-cap {
    border-radius: 0; }
  .shadowed.box, .shadowed.box-left-cap {
    box-shadow: 0 0 0.2857em var(--box-shadow);
    margin: 0 -3px 3rem; }
    @media print, (min-width: 768px) {
      .shadowed.box, .shadowed.box-left-cap {
        margin: 0 -3px 3rem; } }
  .box > :last-child, .box-left-cap > :last-child {
    margin-bottom: 0; }
  .box[class*=table-], .box-left-cap[class*=table-] {
    padding: 0; }
  .has-close-x.box .close-x, .has-close-x.box-left-cap .close-x {
    position: absolute;
    top: 0;
    right: 0;
    padding: 1.2em 1.2em;
    color: var(--text-light-gray);
    text-decoration: none;
    z-index: 1; }
    @media print, (min-width: 768px) {
      .has-close-x.box .close-x, .has-close-x.box-left-cap .close-x {
        padding: 1em 1.2em; } }
    .has-close-x.box .close-x.active, .has-close-x.box-left-cap .close-x.active {
      /* class added via javascript on tap for touch devices for visual feedback that item was tapped */
      background-color: var(--bg-faint-gray); }

.box.deco, .box.shadowed {
  border: 1px solid var(--border-gray-87); }

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

/* 
    .box-left-cap           A box with an end cap on the left side (a thicker left border)
                            [Module Parent]
    .orange                 A box with an orange end cap 
                            [Extends .box-left-cap]
    .warn                   A box with an orange end cap on the left side 
                            [Extends .box-left-cap]
    .error                  A box with a red end cap
                            [Extends .box-left-cap]
    .success                A box with a green end cap
                            [Extends .box-left-cap]
    .info                   A box with a blue end cap
                            [Extends .box-left-cap]
*/
.box-left-cap {
  background-color: var(--bg-white);
  border: 1px solid var(--border-gray-87);
  border-top: 6px solid var(--border-gray-34); }
  .box-left-cap.success {
    border-top-color: var(--border-success); }
  .box-left-cap.warn {
    border-top-color: var(--border-warn); }
  .box-left-cap.info {
    border-top-color: var(--border-info); }
  .box-left-cap.error {
    border-top-color: var(--border-error); }
  @media print, (min-width: 768px) {
    .box-left-cap {
      border-top: 1px solid var(--border-gray-87);
      border-left: 6px solid var(--border-gray-34); }
      .box-left-cap.success {
        border-top: 1px solid var(--border-gray-87);
        border-left-color: var(--border-success); }
      .box-left-cap.warn {
        border-top: 1px solid var(--border-gray-87);
        border-left-color: var(--border-warn); }
      .box-left-cap.info {
        border-top: 1px solid var(--border-gray-87);
        border-left-color: var(--border-info); }
      .box-left-cap.error {
        border-top: 1px solid var(--border-gray-87);
        border-left-color: var(--border-error); } }

/*
   PLACHOLDER BUTTON STYLES
   These placeholder rules will not generate CSS on their own.
   Must be used with the @extend directive.

      %btn       Base styles for all buttons
                [Placeholder Selector]

*/
/* 

    BUTTON SIZES

    .small                     A small button with less padding (on mobile) that remains natural width and does not stretch to full width at any screen size.
                               [Extends .button-*]
    .xsmall                    An extra small button with less padding that remains natural width and does not stretch to full width at any screen size.
                               [Extends .button-*]
    .xlarge                    A hollow button for a single large icon
                               [Extends .button-hollow-circle]
   
    .full-width                A button that fills the entire width of its container at all screen sizes
                               [Extends .button-*]

*/
.button-primary, .button-secondary, .button-tertiary, .button-disabled, .button-link, .button-icon, .button-reversed, .button-tertiary-to-primary {
  display: inline-block;
  width: 100%;
  margin: 0;
  padding: 0.7em 1.2em;
  line-height: normal;
  border: none;
  text-align: center;
  font-weight: 500;
  font-size: 1.6rem;
  background-color: transparent;
  border-radius: 3px;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.1s ease; }
  @media print, (min-width: 768px) {
    .button-primary, .button-secondary, .button-tertiary, .button-disabled, .button-link, .button-icon, .button-reversed, .button-tertiary-to-primary {
      width: auto;
      padding: 0.6em 1.2em;
      font-size: 1.4rem; } }
  .small.button-primary, .small.button-secondary, .small.button-tertiary, .small.button-disabled, .small.button-link, .small.button-icon, .small.button-reversed, .small.button-tertiary-to-primary, .xsmall.button-primary, .xsmall.button-secondary, .xsmall.button-tertiary, .xsmall.button-disabled, .xsmall.button-link, .xsmall.button-icon, .xsmall.button-reversed, .xsmall.button-tertiary-to-primary {
    display: inline-block;
    width: auto; }
    @media print, (min-width: 768px) {
      .small.button-primary, .small.button-secondary, .small.button-tertiary, .small.button-disabled, .small.button-link, .small.button-icon, .small.button-reversed, .small.button-tertiary-to-primary, .xsmall.button-primary, .xsmall.button-secondary, .xsmall.button-tertiary, .xsmall.button-disabled, .xsmall.button-link, .xsmall.button-icon, .xsmall.button-reversed, .xsmall.button-tertiary-to-primary {
        width: auto; } }
  .small.button-primary, .small.button-secondary, .small.button-tertiary, .small.button-disabled, .small.button-link, .small.button-icon, .small.button-reversed, .small.button-tertiary-to-primary {
    padding: 0.6em 1.5em;
    font-size: 1.4rem; }
    @media print, (min-width: 768px) {
      .small.button-primary, .small.button-secondary, .small.button-tertiary, .small.button-disabled, .small.button-link, .small.button-icon, .small.button-reversed, .small.button-tertiary-to-primary {
        padding: 0.6em 1.5em;
        font-size: 1.2rem; } }
  .xsmall.button-primary, .xsmall.button-secondary, .xsmall.button-tertiary, .xsmall.button-disabled, .xsmall.button-link, .xsmall.button-icon, .xsmall.button-reversed, .xsmall.button-tertiary-to-primary {
    padding: 0.5em 1em;
    font-size: 1.2rem; }
    @media print, (min-width: 768px) {
      .xsmall.button-primary, .xsmall.button-secondary, .xsmall.button-tertiary, .xsmall.button-disabled, .xsmall.button-link, .xsmall.button-icon, .xsmall.button-reversed, .xsmall.button-tertiary-to-primary {
        padding: 0.6em 1.5em;
        font-size: 1.2rem; } }
  .full-width.button-primary, .full-width.button-secondary, .full-width.button-tertiary, .full-width.button-disabled, .full-width.button-link, .full-width.button-icon, .full-width.button-reversed, .full-width.button-tertiary-to-primary {
    display: block;
    width: 100%;
    padding-right: 0;
    padding-left: 0; }

/* decoration and focus

    Use %btn so it applies to any element (button, input, span, div) 
    In addition, use a%btn selector, to override default anchor tag styles

*/
.button-primary, .button-secondary, .button-tertiary, .button-disabled, .button-link, .button-icon, .button-reversed, .button-tertiary-to-primary,
a.button-primary,
a.button-secondary,
a.button-tertiary,
a.button-disabled,
a.button-link,
a.button-icon,
a.button-reversed,
a.button-tertiary-to-primary {
  text-decoration: none; }
  .hover .button-primary:focus, .hover .button-secondary:focus, .hover .button-tertiary:focus, .hover .button-disabled:focus, .hover .button-link:focus, .hover .button-icon:focus, .hover .button-reversed:focus, .hover .button-tertiary-to-primary:focus, .hover a.button-primary:focus, .hover a.button-secondary:focus, .hover a.button-tertiary:focus, .hover a.button-disabled:focus, .hover a.button-link:focus, .hover a.button-icon:focus, .hover a.button-reversed:focus, .hover a.button-tertiary-to-primary:focus {
    outline-offset: -4px;
    outline: 1px dotted rgba(255, 255, 255, 0.8); }

/*  GROUPS OF BUTTONS  - STACKED TO SIDE-BY-SIDE
    Adjust spacing between buttons to accommodate stacked on mobile versus side-by-side on desktop

*/
[class*=button-] + [class*=button-], form.left-md + form.left-md {
  margin-top: 1.5em; }
  @media print, (min-width: 768px) {
    [class*=button-] + [class*=button-], form.left-md + form.left-md {
      margin-top: 0;
      margin-left: 1em; } }

[class*=button-].left {
  margin-right: 1em;
  margin-left: 0; }

[class*=button-].small + [class*=button-].small {
  margin-top: 0;
  margin-left: 1rem; }

/* example markup
        <div class="clearfix">
            <form action="/wbnext/VerifyU/Key/Generate" class="left-md" method="post" novalidate="novalidate">                
                <button class="button-primary" type="submit">Generate New Key</button>
            </form>            
            <form action="/wbnext/VerifyU/Key/Generate" class="left-md" method="post" novalidate="novalidate">                
                <input name="Delete" value="True" type="hidden">
                <button class="button-secondary" type="submit" data-confirm="Are you sure you want to delete your VerifyU Key?">
                    <i class="icon-trash"></i> Delete My VerifyU Key
                </button>
            </form>        
        </div>
    */
/* Group of buttons that are 50% wide on MD+ screens and stack on mobile */
.buttons-stretched, .buttons-stretched.basic-item {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
  flex-direction: column;
  /* FLEX ORDER */ }
  @media print, (min-width: 768px) {
    .buttons-stretched, .buttons-stretched.basic-item {
      -ms-flex-direction: row;
      flex-direction: row; }
      .buttons-stretched [class*=button-], .buttons-stretched.basic-item [class*=button-] {
        -ms-flex-positive: 1;
        flex-grow: 1;
        max-width: 50%;
        /* if only one button don't let it get too wide*/ } }
  .buttons-stretched > .flex-first-mobile, .buttons-stretched.basic-item > .flex-first-mobile {
    /* Make the right button appear on top for mobile*/ }
    @media (max-width: 767px) {
      .buttons-stretched > .flex-first-mobile, .buttons-stretched.basic-item > .flex-first-mobile {
        -ms-flex-order: -1;
        order: -1;
        margin-top: 0;
        margin-bottom: 1.5em; } }

/*  
    ICONS IN BUTTONS 
    Adjust line-height to ensure button height remains the same height as buttons without icons across browsers
    Icons can only be used with <a> or <button> tags; <input> tags will not work

           
    .has-icon-only      A button that contains only an icon, reduces horizontal padding
                    Icon must be included in the markup
                    [Extends .button-*]
    .has-icon-right     A button with an icon to teh right of thext, reduces right padding
                    Icon must be included in the markup
                    [Extends .button-*]
    .has-icon-left      A button with an icon to the left of the text, reduces left padding
                    Icon must be included in the markup                
                    [Extends .button-*]
    .forward       A button with a "forward" icon, a chevron-right
                    Class automatically adds the icon, no icon needed in markup
                    Must be anchor or button tag; Input tag will not work
                    [Extends .button-*]
    .backward       A button with a "backward" icon, a chevron-left
                    Class automatically adds the icon, no icon needed in markup
                    [Extends .button-*]

*/
@media print, (min-width: 768px) {
  .has-icon-left[class*=button-], .backward[class*=button-] {
    padding-left: .9em; } }

.small.has-icon-left[class*=button-], .small.backward[class*=button-] {
  padding-left: .9em; }

@media print, (min-width: 768px) {
  .has-icon-right[class*=button-], .forward[class*=button-] {
    padding-right: .8em; } }

.small.has-icon-right[class*=button-], .small.forward[class*=button-] {
  padding-right: .8em; }

[class*=button-] [class*=icon-], .forward[class*=button-]:after, .backward[class*=button-]:before {
  position: relative;
  top: 2px; }
  [class*=button-] [class*=icon-]:before, .backward[class*=button-]:before, [class*=button-] [class*=icon-]:after, .forward[class*=button-]:after {
    line-height: .5 !important;
    /*line-height shouldn't be larger than line height of the text in the button, so set it really small*/ }

[class*=button-].has-icon-only {
  padding-left: 1.8em;
  padding-right: 1.7em; }
  [class*=button-].has-icon-only.small {
    padding-left: .9em;
    padding-right: .8em; }

[class*=button-].forward:after {
  content: "\e603";
  display: inline !important;
  padding-left: .4em;
  margin-right: -1em; }
  @media print, (min-width: 768px) {
    [class*=button-].forward:after {
      margin-right: 0; } }

[class*=button-].forward.small:after, [class*=button-].forward.xsmall:after {
  margin-right: 0; }

[class*=button-].backward:before {
  content: "\e602";
  padding-right: .4em;
  margin-left: -1em; }
  [class*=button-].backward:before.small, [class*=button-].backward:before.xsmall {
    margin-left: 0; }
  @media print, (min-width: 768px) {
    [class*=button-].backward:before {
      margin-left: 0; } }

[class*=button-].backward.small:before, [class*=button-].backward.xsmall:before {
  margin-left: 0;
  padding-right: 0; }

/*
     PRIMARY BUTTON
    
     .button-primary           The primary action for a form/wizard
                               [Module Parent]

*/
.button-primary {
  font-weight: 500;
  background-color: var(--bg-primary);
  border: 1px solid var(--border-primary);
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.1s ease; }

.button-primary,
a.button-primary {
  color: var(--text-white); }
  .hover .button-primary:hover,
  .hover .button-primary:focus,
  .hover .button-primary:active, .button-primary.active, .hover
  a.button-primary:hover,
  .hover
  a.button-primary:focus,
  .hover
  a.button-primary:active,
  a.button-primary.active {
    color: var(--text-white);
    background-color: var(--border-primary-dark);
    border: 1px solid var(--border-primary-dark); }

/*
     SECONDARY BUTTON
    
     .button-secondary         The secondary action for a form/wizard
                               [Module Parent]

*/
.button-secondary {
  font-weight: 500;
  background-color: var(--bg-gray-44);
  border: 1px solid var(--border-gray-44);
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.1s ease; }

.button-secondary,
a.button-secondary {
  color: var(--text-white); }
  .hover .button-secondary:hover,
  .hover .button-secondary:focus,
  .hover .button-secondary:active, .button-secondary.active, .hover
  a.button-secondary:hover,
  .hover
  a.button-secondary:focus,
  .hover
  a.button-secondary:active,
  a.button-secondary.active {
    color: var(--text-white);
    background-color: var(--bg-gray-34);
    border: 1px solid var(--border-gray-34); }

/*
     TERTIARY BUTTON
    
     .button-tertiary          A tertiary action on a page; Less prominent
                               [Module Parent]

*/
.button-tertiary {
  font-weight: 500;
  background-color: transparent;
  border: 1px solid var(--border-med-gray);
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.1s ease; }

.button-tertiary,
a.button-tertiary {
  color: var(--text-med-gray); }
  .hover .button-tertiary:hover,
  .hover .button-tertiary:focus,
  .hover .button-tertiary:active, .button-tertiary.active, .hover
  a.button-tertiary:hover,
  .hover
  a.button-tertiary:focus,
  .hover
  a.button-tertiary:active,
  a.button-tertiary.active {
    color: var(--text-gray);
    background-color: var(--bg-faint-gray);
    border: 1px solid var(--border-gray); }

/*
    DISABLED BUTTON
    
    .button-disabled               A button that looks disabled - gray background, gray text
                                The "not-allowed" cursor displays on hover
                                [Module Parent]

*/
/* base styles */
.button-disabled {
  font-weight: 500;
  background-color: var(--button-disabled-background);
  border: var(--button-disabled-border); }

/* text color, hover, focus */
.button-disabled,
a.button-disabled {
  color: var(--button-disabled-text); }
  .hover .button-disabled:hover,
  .hover .button-disabled:focus,
  .hover .button-disabled:active, .button-disabled.active, .hover
  a.button-disabled:hover,
  .hover
  a.button-disabled:focus,
  .hover
  a.button-disabled:active,
  a.button-disabled.active {
    color: var(--button-disabled-text);
    cursor: not-allowed; }
  .hover .button-disabled:focus, .hover
  a.button-disabled:focus {
    outline-offset: -2px;
    outline: 1px dotted var(--focus-outline-gray); }

/*
    LINK BUTTON

    
    .button-link    An anchor tag, button tag or input[type="submit"] that looks like a stylized text link, but has a larger hit area like a button
                    [Module Parent]

*/
/* base styles */
.button-link {
  font-weight: 700;
  background-color: transparent;
  transition: color 0.2s ease;
  padding-left: .5em;
  padding-right: .5em; }
  .button-link.backward {
    padding-left: .5em; }
  .button-link.forward {
    padding-right: .5em; }

/* text color, hover state */
.button-link,
a.button-link {
  color: var(--text-link); }
  .hover .button-link:hover,
  .hover .button-link:focus,
  .hover .button-link:active, .button-link.active, .hover
  a.button-link:hover,
  .hover
  a.button-link:focus,
  .hover
  a.button-link:active,
  a.button-link.active {
    color: var(--text-link-active-extra-dark); }
  .button-link.txt-med-gray,
  a.button-link.txt-med-gray {
    color: var(--text-med-gray); }
  .hover .button-link.txt-med-gray:hover,
  .hover .button-link.txt-med-gray:focus,
  .hover .button-link.txt-med-gray:active, .button-link.txt-med-gray.active, .hover
  a.button-link.txt-med-gray:hover,
  .hover
  a.button-link.txt-med-gray:focus,
  .hover
  a.button-link.txt-med-gray:active,
  a.button-link.txt-med-gray.active {
    color: var(--text-light-gray); }
  .button-link.txt-light-gray,
  a.button-link.txt-light-gray {
    color: var(--text-light-gray); }
  .hover .button-link.txt-light-gray:hover,
  .hover .button-link.txt-light-gray:focus,
  .hover .button-link.txt-light-gray:active, .button-link.txt-light-gray.active, .hover
  a.button-link.txt-light-gray:hover,
  .hover
  a.button-link.txt-light-gray:focus,
  .hover
  a.button-link.txt-light-gray:active,
  a.button-link.txt-light-gray.active {
    color: var(--text-med-gray); }
  .button-link.active,
  a.button-link.active {
    /* class added via javascript on tap for touch devices for visual feedback that item was tapped */
    background-color: var(--bg-faint-gray); }
  .hover .button-link:focus, .hover
  a.button-link:focus {
    outline: 1px dotted var(--focus-outline);
    outline-offset: -2px; }

/*
    ICON BUTTON

    .button-icon          A hollow, circular button for a single icon
                          [Module Parent]
    .xlarge               An extra large .button-icon
                          Currently this is the only type of this button in use.
                          [Extends .button-icon]
    
    Example markup:
    <span class="button-icon xlarge">
        <i class="icon-more xlarge"></i>
    </span>

   
*/
.button-icon {
  display: inline-block;
  vertical-align: middle;
  width: auto;
  font-weight: 700;
  background-color: transparent;
  transition: background-color 0.1s ease, color 0.2s ease; }
  .button-icon.xlarge {
    border: 3px solid var(--border-gray-34);
    font-size: 4rem;
    width: 8rem;
    height: 8rem;
    border-radius: 8rem;
    padding: 1.3rem 0 0 .2rem;
    color: var(--text-gray-34); }
  .hover .button-icon:hover,
  .hover .button-icon:focus,
  .hover .button-icon:active, .button-icon.active {
    color: var(--text-white);
    background-color: var(--bg-gray-34);
    border-color: 3px solid var(--border-gray-34); }

/*
     REVERSED BUTTON
    
     .button-reversed          A button that is reversed - white border and text for use on a dark background
                               [Module Parent]

*/
.button-reversed {
  font-weight: 500;
  background-color: transparent;
  border: 1px solid var(--border-white);
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.1s ease; }

.button-reversed,
a.button-reversed {
  color: var(--text-white); }
  .hover .button-reversed:hover,
  .hover .button-reversed:focus,
  .hover .button-reversed:active, .button-reversed.active, .hover
  a.button-reversed:hover,
  .hover
  a.button-reversed:focus,
  .hover
  a.button-reversed:active,
  a.button-reversed.active {
    color: var(--text-gray-34);
    background-color: var(--bg-white);
    border: 1px solid var(--border-white); }

/* IMAGE BUTTON 
     A button that is an image
    
     .button-image       A button that is tertiary on mobile (gray hollow) and primary (red solid) on desktop
                         [Module Parent]

    Example markup:
    <button class="button-image" type="button">
        <img src="//localhost/static/content/assets/logos/external/badge_add_to_google_wallet.svg" class="img-responsive" alt="Add to Google Wallet" width="138" height="38" style="max-height: 38px">
    </button>

*/
.button-image,
a.button-image {
  background-color: transparent;
  display: inline-block; }
  .hover .button-image:hover,
  .hover .button-image:focus,
  .hover .button-image:active, .button-image.active, .hover
  a.button-image:hover,
  .hover
  a.button-image:focus,
  .hover
  a.button-image:active,
  a.button-image.active {
    border: none; }
    .hover .button-image:hover img,
    .hover .button-image:focus img,
    .hover .button-image:active img, .button-image.active img, .hover
    a.button-image:hover img,
    .hover
    a.button-image:focus img,
    .hover
    a.button-image:active img,
    a.button-image.active img {
      filter: brightness(0.75);
      border: none; }
  .hover .button-image:focus, .hover
  a.button-image:focus {
    outline-width: 2px;
    outline-offset: 0; }
  .button-image.disabled img, .button-image:disabled img, .button-image[disabled] img,
  a.button-image.disabled img,
  a.button-image:disabled img,
  a.button-image[disabled] img {
    filter: grayscale(1) contrast(0.5); }
  .hover .button-image.disabled:hover,
  .hover .button-image.disabled:focus,
  .hover .button-image.disabled:active, .button-image.disabled.active, .hover .button-image:disabled:hover,
  .hover .button-image:disabled:focus,
  .hover .button-image:disabled:active, .button-image:disabled.active, .hover .button-image[disabled]:hover,
  .hover .button-image[disabled]:focus,
  .hover .button-image[disabled]:active, .button-image[disabled].active, .hover
  a.button-image.disabled:hover,
  .hover
  a.button-image.disabled:focus,
  .hover
  a.button-image.disabled:active,
  a.button-image.disabled.active, .hover
  a.button-image:disabled:hover,
  .hover
  a.button-image:disabled:focus,
  .hover
  a.button-image:disabled:active,
  a.button-image:disabled.active, .hover
  a.button-image[disabled]:hover,
  .hover
  a.button-image[disabled]:focus,
  .hover
  a.button-image[disabled]:active,
  a.button-image[disabled].active {
    cursor: not-allowed; }
    .hover .button-image.disabled:hover img,
    .hover .button-image.disabled:focus img,
    .hover .button-image.disabled:active img, .button-image.disabled.active img, .hover .button-image:disabled:hover img,
    .hover .button-image:disabled:focus img,
    .hover .button-image:disabled:active img, .button-image:disabled.active img, .hover .button-image[disabled]:hover img,
    .hover .button-image[disabled]:focus img,
    .hover .button-image[disabled]:active img, .button-image[disabled].active img, .hover
    a.button-image.disabled:hover img,
    .hover
    a.button-image.disabled:focus img,
    .hover
    a.button-image.disabled:active img,
    a.button-image.disabled.active img, .hover
    a.button-image:disabled:hover img,
    .hover
    a.button-image:disabled:focus img,
    .hover
    a.button-image:disabled:active img,
    a.button-image:disabled.active img, .hover
    a.button-image[disabled]:hover img,
    .hover
    a.button-image[disabled]:focus img,
    .hover
    a.button-image[disabled]:active img,
    a.button-image[disabled].active img {
      filter: brightness(0.75) grayscale(1) contrast(0.5); }
  .hover .button-image.disabled:focus, .hover .button-image:disabled:focus, .hover .button-image[disabled]:focus, .hover
  a.button-image.disabled:focus, .hover
  a.button-image:disabled:focus, .hover
  a.button-image[disabled]:focus {
    outline: 1px dotted var(--border-gray-85); }
  .button-image.border-radius-apple,
  a.button-image.border-radius-apple {
    border-radius: 7px; }
  .button-image.border-radius-google,
  a.button-image.border-radius-google {
    border-radius: 23px; }
  .button-image.border-radius-samsung,
  a.button-image.border-radius-samsung {
    border-radius: 6px; }

/*
     REVERSED TO ASSERTIVE BUTTON
    
     .button-tertiary-to-primary        A button that is tertiary on mobile (gray hollow) and primary (red solid) on desktop
                                        For use in the Web Branch header
                                        [Module Parent]

*/
.button-tertiary-to-primary {
  font-weight: 500;
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.1s ease;
  background-color: transparent;
  border: 1px solid var(--border-med-gray); }
  @media (min-width: 980px) {
    .button-tertiary-to-primary {
      background-color: var(--bg-primary);
      border: 1px solid var(--border-primary); } }

.button-tertiary-to-primary,
a.button-tertiary-to-primary {
  color: var(--text-med-gray); }
  @media (min-width: 980px) {
    .button-tertiary-to-primary,
    a.button-tertiary-to-primary {
      color: var(--text-white); } }
  .hover .button-tertiary-to-primary:hover,
  .hover .button-tertiary-to-primary:focus,
  .hover .button-tertiary-to-primary:active, .button-tertiary-to-primary.active, .hover
  a.button-tertiary-to-primary:hover,
  .hover
  a.button-tertiary-to-primary:focus,
  .hover
  a.button-tertiary-to-primary:active,
  a.button-tertiary-to-primary.active {
    color: var(--text-gray);
    background-color: var(--bg-faint-gray);
    border: 1px solid var(--border-gray); }
    @media (min-width: 980px) {
      .hover .button-tertiary-to-primary:hover,
      .hover .button-tertiary-to-primary:focus,
      .hover .button-tertiary-to-primary:active, .button-tertiary-to-primary.active, .hover
      a.button-tertiary-to-primary:hover,
      .hover
      a.button-tertiary-to-primary:focus,
      .hover
      a.button-tertiary-to-primary:active,
      a.button-tertiary-to-primary.active {
        color: var(--text-white);
        background-color: var(--border-primary-dark);
        border: 1px solid var(--border-primary-dark); } }

/* CALENDAR (no cleanup has been done on these classes. naming convention and code style may not be consistent.) */
/* todo: With next calendar/datepicker overhaul, update the class names to follow convention. 12/8/2016
     
    **mark-up is in core > DatepickerExensions.cs
    Suggested names for future:

    .calendar-container
    .calendar
    .calendar_head
    .calendar_head_trigger
    .calendar_body
        .calendar-day-container
            .calendar-day
    .calendar-date-container
        .calendar-date
    .calendar_footer

*/
.calendar-container {
  padding: 0;
  margin: 0 auto;
  width: 100%; }

.calendar {
  padding: 0 .3em;
  margin: 0 auto;
  border-radius: 3px;
  text-align: center; }

.calendar-header {
  font-size: 1.8rem;
  font-weight: 500;
  line-height: 1.5;
  color: var(--text-gray-20);
  padding: .8em .5em;
  position: relative;
  width: 100%;
  text-align: center;
  padding-left: 10%;
  padding-right: 10%; }
  @media print, (min-width: 768px) {
    .calendar-header {
      font-size: 1.6rem;
      padding-left: 10%;
      padding-right: 10%; } }

.calendar-header_previous,
.calendar-header_next {
  cursor: pointer;
  color: var(--text-gray-34);
  position: absolute;
  top: 22%; }
  .calendar-header_previous:hover, .calendar-header_previous:focus, .calendar-header_previous:active,
  .calendar-header_next:hover,
  .calendar-header_next:focus,
  .calendar-header_next:active {
    color: var(--text-gray-54); }

.calendar-header_previous {
  left: 8%; }
  @media print, (min-width: 768px) {
    .calendar-header_previous {
      left: 5%; } }

.calendar-header_next {
  right: 8%; }
  @media print, (min-width: 768px) {
    .calendar-header_next {
      right: 5%; } }

.calendar-body {
  margin: 0 -5px;
  padding: 0; }

.calendar-body_day {
  font-size: 1.4rem;
  margin: .4em 0;
  padding: 0 1.1em 8px;
  text-transform: uppercase;
  border-bottom: 1px solid var(--border-gray-85); }
  @media print, (min-width: 768px) {
    .calendar-body_day {
      font-size: 1.2rem; } }
  .calendar-body_day .row {
    display: -ms-flexbox;
    display: flex; }

.calendar-day {
  font-weight: 500;
  line-height: 1;
  color: var(--text-gray-20);
  padding: 0;
  margin: 0 auto;
  position: relative; }

.calendar-body_date {
  font-size: 1.4rem;
  margin: 0;
  padding: 0 1.1em; }
  .calendar-body_date .row {
    display: -ms-flexbox;
    display: flex; }
  @media (min-width: 768px) {
    .calendar-body_date {
      font-size: 1.2rem; } }

.calendar-date {
  color: var(--text-gray-20);
  padding: 0;
  margin: 3px auto;
  min-height: 28px;
  min-width: 28px;
  max-width: 28px;
  padding: 5px;
  text-align: center;
  line-height: 1.5; }
  .calendar-date.active {
    color: var(--text-white);
    font-weight: 500;
    background: var(--bg-gray-34);
    border-radius: 14px; }
  .calendar-date.other-month, .calendar-date.inactive {
    color: var(--text-gray-45);
    cursor: default; }

.calendar-footer {
  border-top: 1px solid var(--border-gray-85);
  font-size: 1.4rem;
  padding: .5em .4em .4em;
  margin: 0 -5px;
  cursor: pointer;
  color: var(--text-gray-34); }
  @media (min-width: 768px) {
    .calendar-footer {
      font-size: 1.2rem; } }
  .calendar-footer:hover, .calendar-footer:focus, .calendar-footer:active {
    color: var(--text-gray-54); }

/* DATEPICKER (no cleanup has been done on the date-picker code. does not follow convention)*/
/* todo: With next calendar/datepicker overhaul, update the class names to follow convention. 12/8/2016
     
    **mark-up is in Core > DatepickerExensions.cs
     Suggested names for future:

    .datepicker
    .calendar-container
    .calendar
    .calendar_head
    .calendar_head_trigger
    .calendar_body
        .calendar-day-container
            .calendar-day
    .calendar-date-container
        .calendar-date
    .calendar_footer

*/
.js-uwcu-datepicker {
  position: relative; }

.js-uwcu-datepicker-calendar.calendar-container {
  background: var(--bg-white);
  box-shadow: 0 0 5px 0 var(--box-shadow);
  max-height: 0;
  visibility: hidden;
  transition: ease-in 0.200s, max-height 0.25s, visibility 0.2s;
  overflow: hidden;
  position: absolute;
  z-index: 1100;
  min-width: 280px;
  max-width: 300px;
  padding: 0; }
  .js-uwcu-datepicker-calendar.calendar-container.show {
    max-height: 500px;
    visibility: visible; }
  body.modal-open .js-uwcu-datepicker-calendar.calendar-container {
    margin: 0 -11px; }

.js-uwcu-datepicker-calendar .calendar {
  border: 1px solid var(--border-gray-80); }

.js-uwcu-datepicker-calendar .calendar-header {
  color: var(--text-primary); }

.js-uwcu-datepicker-calendar .calendar-header_previous,
.js-uwcu-datepicker-calendar .calendar-header_next {
  color: var(--text-primary); }
  .hover .js-uwcu-datepicker-calendar .calendar-header_previous:active,
  .hover .js-uwcu-datepicker-calendar .calendar-header_previous:hover, .hover
  .js-uwcu-datepicker-calendar .calendar-header_next:active,
  .hover
  .js-uwcu-datepicker-calendar .calendar-header_next:hover {
    color: var(--text-primary-active-extra-dark); }

.js-uwcu-datepicker-calendar .calendar-day {
  color: var(--text-gray-38); }

.js-uwcu-datepicker-calendar .calendar-date {
  line-height: normal;
  color: var(--text-gray-38);
  cursor: pointer;
  min-height: 36px;
  min-width: 36px;
  padding: 10px;
  text-align: center; }
  .hover .js-uwcu-datepicker-calendar .calendar-date:active {
    color: var(--text-white);
    background: var(--bg-primary-extra-dark);
    border-radius: 20px; }
  .js-uwcu-datepicker-calendar .calendar-date.active {
    background: var(--bg-gray-88);
    border-radius: 20px; }
  .js-uwcu-datepicker-calendar .calendar-date.other-month {
    color: var(--text-gray-73); }
  .js-uwcu-datepicker-calendar .calendar-date.inactive {
    font-style: italic;
    cursor: default;
    color: var(--text-faint-gray); }
    .hover .js-uwcu-datepicker-calendar .calendar-date.inactive:active {
      color: var(--text-faint-gray);
      background: none; }
  .js-uwcu-datepicker-calendar .calendar-date.other-month.inactive {
    color: var(--text-white); }
    .hover .js-uwcu-datepicker-calendar .calendar-date.other-month.inactive:active {
      color: var(--text-white); }
  .js-uwcu-datepicker-calendar .calendar-date.selected {
    color: var(--text-white);
    background: var(--bg-primary);
    border-radius: 20px;
    font-weight: 500; }

.js-uwcu-datepicker-calendar .calendar-footer {
  display: none; }

/* COLLAPSIBLE AREA 
    .collapsible-area       A section of content that is collapsed by default to save screen real estate.
                            Relies on JavaScript to open/close the section via an associated button or trigger of some sort.                                               
                            [Module Parent]
    .open                   An open state. When this class is present, the section will be visible.
                            This class is added/removed via JavaScript.
                            [Extends .collapsible-area]
    .open-sm                The section will be open by default on SM+. It will only be collapsed on XS screens.
                            [Extends .collapsible-area]
    .open-md                Open by default on MD+.  Collapsed on XS, SM screens.
                            [Extends .collapsible-area]
    .open-lg                Open by default on LG+.  Collapsed on XS, SM, MD screens.
                            [Extends .collapsible-area]
    .open-xl                Open by default on XL. Collapsed on XS, SM, MD, LG screens.
                            [Extends .collapsible-area]
*/
.collapsible-area {
  display: none; }
  .collapsible-area.open {
    display: block; }
    @media print, (min-width: 480px) {
      .collapsible-area.open-sm {
        display: block; } }
    @media print, (min-width: 768px) {
      .collapsible-area.open-md {
        display: block; } }
    @media (min-width: 980px) {
      .collapsible-area.open-lg {
        display: block; } }
    @media (min-width: 1260px) {
      .collapsible-area.open-xl {
        display: block; } }

/* FILTER 
   .filter                      A container for a filter. The filter refines a list or view of data on the page, i.e. Transfer Activity or Report Type.
                                [Module parent; Optionally extends .tile_body]\
    
   .filter_title                The title of the filter
                                Sits to the left of the .filter_items on SM+
                                Sits in the .filter_trigger to the left of the selected item on XS 
                                [Child of .filter]
   
   .filter_item                 An item in the filter which represents a way to refine the view.
                                [Child of .filter]

   .filter_item.selected        The selected filter item.
                                Orange text with orange underline by default.
                                [Extends .filter_item] 
    
   .filter_bar                  The bar to that animates back and forth via javascript to indicate which item is selected
                                [Child of .filter]             
*/
.filter {
  display: inline-block;
  position: relative;
  padding: 0; }

.filter_title {
  margin-right: .3571em; }

.filter_item {
  font-size: 1.4rem;
  font-weight: 700;
  padding: 1.1em .6em .8em;
  display: inline-block;
  line-height: normal;
  background: transparent;
  border-bottom: 6px solid transparent !important; }
  @media print, (min-width: 768px) {
    .filter_item {
      font-size: 1.4rem;
      padding: 1.2em 1.4em .7em; } }
  a.filter_item {
    color: var(--text-gray-34);
    text-decoration: none; }
    .hover a.filter_item:hover,
    .hover a.filter_item:focus,
    .hover a.filter_item:active, a.filter_item.active {
      color: var(--text-gray);
      text-decoration: none; }
    a.filter_item.selected {
      color: var(--text-gray); }
    .hover a.filter_item.selected:hover,
    .hover a.filter_item.selected:focus,
    .hover a.filter_item.selected:active, a.filter_item.selected.active {
      color: var(--text-gray); }
    a.filter_item.selected,
    .hover a.filter_item.selected:hover,
    .hover a.filter_item.selected:focus,
    .hover a.filter_item.selected:active, a.filter_item.selected.active {
      border-bottom-width: 0;
      cursor: default; }

.filter_item .icon-more-horizontal {
  position: relative;
  top: 3px; }

.filter_bar {
  border-bottom: 6px solid var(--border-primary);
  border-top: none;
  transition: all .15s ease-out;
  margin-top: 0;
  margin-bottom: 0;
  width: 0;
  position: absolute;
  bottom: 0; }

/*  ____________________________
    MODULES_ICONS.css

    Purpose:        Use a custom icon font to display icons
                    Font generated from icomoon.io/app

    Screen Sizes:   All, including Print

    Notes:          Fonts created using SVG icons (IKONS) and downloaded SVG images from font libraries in Icomoon. All images
                    based on 16px grid. 16px used as this is the recommended size - relative to the size of browser
                    font size. This helps to guide the white space around the icon and the line height.

    TODO:           Better sizing for icons. The icons look better when they are a larger font size than any adjacent text, 
                    however, b/c of the relative font sizing in ems, the small and large sizes don't always act as expected
                    
    ____________________________
*/
/* TABLE OF CONTENTS
------------------------
    - @font-face / icons
    - FORM INPUTS
    - SIZES
    - POSITION HELPERS
    - ICON LINK
    - ICON PREPEND
-------------------------
*/
/* Documentation on @font-face loading. Explains reasons for syntax below.
    http://css-tricks.com/snippets/css/using-font-face/

    Anything after the question mark can/should be changed to the date of the new file upload for cache busting purposes
*/
@font-face {
  font-family: 'uwcu';
  src: url("../fonts/uwcu.eot?03182025");
  src: url("../fonts/uwcu.eot?#iefix03182025") format("embedded-opentype"), url("../fonts/uwcu.woff?03182025") format("woff"), url("../fonts/uwcu.ttf?03182025") format("truetype"), url("../fonts/uwcu.svg?03182025#uwcu") format("svg");
  font-weight: normal;
  font-style: normal; }

.forward[class*=button-]:after, .backward[class*=button-]:before, [class^=icon-]:before, [class*=' icon-']:before, .ui-datepicker-trigger, .sortable-overlay_handle, .check-mark-list:before,
.check-mark-list li:before, .basic-item.forward:before, .ribbon:before, .ribbon-small:before, .icon-link:before, .icon-link-small:before {
  font-family: 'uwcu';
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  font-size: 16px;
  text-transform: none;
  line-height: 1;
  display: inline-block;
  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale; }

.icon-checkbox, .icon-radio {
  margin-right: .2857em;
  font-size: 2.1rem;
  vertical-align: text-bottom; }
  @media print, (min-width: 768px) {
    .icon-checkbox, .icon-radio {
      font-size: 1.6rem; } }

[class^=icon-].small:before, [class*=' icon-'].small:before {
  font-size: 12px; }

[class^=icon-].medium:before, [class*=' icon-'].medium:before {
  font-size: 24px; }

[class^=icon-].large:before, [class*=' icon-'].large:before {
  font-size: 32px; }

[class^=icon-].xlarge:before, [class*=' icon-'].xlarge:before {
  font-size: 40px; }

[class^=icon-].rel-top-3, [class*=' icon-'].rel-top-3 {
  position: relative;
  top: 3px; }

li[class^=icon-], li[class*=' icon-'] {
  padding-right: .3571em; }

.icon-collapse:before {
  content: "\e902"; }

.icon-expand:before {
  content: "\e903"; }

.icon-line-chart:before {
  content: "\e600"; }

.icon-chevron-down:before {
  content: "\e601"; }

.icon-chevron-left:before {
  content: "\e602"; }

.icon-chevron-right:before {
  content: "\e603"; }

.icon-chevron-up:before {
  content: "\e605"; }

.icon-folder:before {
  content: "\e607"; }

.icon-folder-open:before {
  content: "\e608"; }

.icon-bar-chart:before {
  content: "\e609"; }

.icon-move:before {
  content: "\e60a"; }

.icon-pending-item:before {
  content: "\e60b"; }

.icon-edit-inline:before {
  content: "\e60c"; }

.icon-pie-chart:before {
  content: "\e60d"; }

.icon-document:before {
  content: "\e60e"; }

.icon-papercheck:before {
  content: "\e60f"; }

.icon-printer:before {
  content: "\e610"; }

.icon-mail:before {
  content: "\e907"; }

.icon-mail-outline:before {
  content: "\e908"; }

.icon-menu:before {
  content: "\e613"; }

.icon-notification:before {
  content: "\e90c"; }

.icon-notification-outline:before {
  content: "\e90b"; }

.icon-x:before {
  content: "\e616"; }

.icon-arrow-down:before {
  content: "\e617"; }

.icon-arrow-up:before {
  content: "\e618"; }

.icon-arrow-right:before {
  content: "\e618";
  transform: rotate(90deg); }

.icon-arrow-left:before {
  content: "\e618";
  transform: rotate(-90deg); }

.icon-larger-image:before {
  content: "\e619"; }

.icon-move-vertical:before {
  content: "\e61a"; }

.icon-more-horizontal:before {
  content: "\e61b"; }

.icon-trash:before {
  content: "\e61c"; }

.icon-triangle-left:before {
  content: "\e61d"; }

.icon-triangle-right:before {
  content: "\e61e"; }

.icon-triangle-up:before {
  content: "\e61f"; }

.icon-triangle-down:before {
  content: "\e620"; }

.icon-documents:before {
  content: "\e621"; }

.icon-dollar-sign:before {
  content: "\e622"; }

.icon-less:before {
  content: "\e623"; }

.icon-multiple {
  position: relative;
  top: 2px; }
  .icon-multiple:before {
    content: "\e625"; }

.icon-calendar:before {
  content: "\e626"; }

.icon-calendar-dropdown:before {
  content: "\e627"; }

.icon-compose:before {
  content: "\e628"; }

.icon-lock:before {
  content: "\e629"; }

.icon-unlock:before {
  content: "\e660"; }

.icon-card:before {
  content: "\e655"; }

.icon-cancel-card:before {
  content: "\e657"; }

.icon-replace-card:before {
  content: "\e659"; }

.icon-card-numbers:before {
  content: "\e91a"; }

.icon-change-pin:before {
  content: "\e658"; }

.icon-limit-increase:before {
  content: "\e661"; }

.icon-home:before {
  content: "\e62a"; }

.icon-organize-fill:before {
  content: "\e62b"; }

.icon-reorder {
  position: relative;
  top: 2px; }
  .icon-reorder:before {
    content: "\e62c"; }

.icon-mobile:before {
  content: "\e906"; }

.icon-mobile-outline:before {
  content: "\e905"; }

.icon-split-item:before {
  content: "\e62e"; }

.icon-reply:before {
  content: "\e62f"; }

.icon-mail-open:before {
  content: "\e909"; }

.icon-mail-open-outline:before {
  content: "\e90a"; }

.icon-star:before {
  content: "\e631"; }

.icon-star-empty:before {
  content: "\e9d7"; }

.icon-phone:before {
  content: "\e632"; }

.icon-electronic:before {
  content: "\e633"; }

.icon-help:before {
  content: "\e634"; }

.icon-error:before {
  content: "\e635"; }

.icon-warn:before {
  content: "\e636"; }

.icon-error-outline:before {
  content: "\e639"; }

.icon-user:before {
  content: "\e63b"; }

.icon-info:before {
  content: "\e63c"; }

.icon-checkmark-circle:before {
  content: "\e63d"; }

.icon-check-mark:before {
  content: "\e63e"; }

.icon-user-circle:before {
  content: "\e640"; }

.icon-recurring:before {
  content: "\e641"; }

.icon-split:before {
  content: "\e642"; }

.icon-text:before {
  content: "\e644"; }

.icon-key:before {
  content: "\e645"; }

.icon-more:before {
  content: "\e646"; }

.icon-location:before {
  content: "\e647"; }

.icon-edit:before {
  content: "\e649"; }

.icon-search:before {
  content: "\e64a"; }

.icon-dispute:before {
  content: "\e64e"; }

.icon-processing:before {
  content: "\e64f"; }

.icon-x-circle:before {
  content: "\e650"; }

.icon-camera:before {
  content: "\e651"; }

[class*=button-] .icon-camera {
  position: relative;
  top: 0; }

.icon-pin:before {
  content: "\e652"; }

.icon-cog:before {
  content: "\e653"; }

.icon-checkmark-filled-circle:before {
  content: "\e654"; }

.icon-pin-circle:before {
  content: "\e656"; }

.icon-dot:before {
  content: "\e90d"; }

.icon-gift:before {
  content: "\e901"; }

.icon-erase:before {
  content: "\e90e"; }

.icon-checkbox:before {
  content: "\e63f"; }

.icon-checkbox.checked:before {
  content: "\e624"; }

.icon-checkbox.half-checked:before {
  content: "\e64c"; }

.icon-radio:before {
  content: "\e64b"; }

.icon-radio.checked:before {
  content: "\e63a"; }

.icon-radio.mr0 {
  margin-right: 0; }

.icon-facebook:before {
  content: "\e910"; }

.icon-linkedin:before {
  content: "\e911"; }

.icon-twitter:before {
  content: "\e912"; }

.icon-youtube:before {
  content: "\e913"; }

.icon-instagram:before {
  content: "\e914"; }

.icon-tiktok:before {
  content: "\e91b"; }

.icon-eye:before {
  content: "\e9ce"; }

.icon-eye-blocked:before {
  content: "\e9d1"; }

.icon-lightbulb:before {
  content: "\e900"; }

.icon-office:before {
  content: "\e917"; }

.icon-users:before {
  content: "\e973"; }

.icon-download:before {
  content: "\e919"; }

.icon-upload:before {
  content: "\e934"; }

[class*=button-] .icon-upload {
  position: relative;
  top: 0; }

.icon-happy:before {
  content: "\e9df"; }

.icon-sad:before {
  content: "\e9e5"; }

.icon-smile:before {
  content: "\e9e1"; }

.icon-neutral:before {
  content: "\e9f7"; }

.icon-wondering:before {
  content: "\e9fb"; }

.icon-angry:before {
  content: "\e9ed"; }

.icon-earlypayday:before {
  content: "\e918"; }

.icon-link:before {
  content: "\e9cb"; }

.icon-sort-amount-asc:before {
  content: "\ea4c"; }

.icon-sort-amount-desc:before {
  content: "\ea4d"; }

.icon-sort-horizontal-arrows:before {
  content: "\ea45"; }

.icon-sort-vertical-arrows:before {
  content: "\ea46"; }

.icon-plus:before {
  content: "\ea0a"; }

.icon-filter:before {
  content: "\ea5b"; }

.icon-bar-filter-square:before {
  content: "\e91c"; }

.icon-bar-filter-rounded:before {
  content: "\e91d"; }

.icon-copy:before {
  content: "\e92c"; }

.icon-settings-horizontal:before {
  content: "\e992"; }

.icon-settings-vertical:before {
  content: "\e993"; }

.icon-menu-open:before {
  content: "\e9bf"; }

.icon-menu-close:before {
  content: "\e9c0"; }

.icon-sun:before {
  content: "\e91f"; }

.icon-bug:before {
  content: "\e920"; }

.icon-wallet:before {
  content: "\e921"; }

.icon-brightness-contrast:before {
  content: "\e91e"; }

/* CIRCULAR ICON BACKGROUNDS*/
/* TODO: Add to styleguide*/
.icon-bg-solid-circle {
  width: 1em;
  height: 1em;
  line-height: 1;
  border-radius: 50%;
  position: relative;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: center;
  justify-content: center;
  -ms-flex-align: center;
  align-items: center; }
  .icon-bg-solid-circle.small {
    font-size: 22px; }
    .icon-bg-solid-circle.small:before {
      font-size: 10px; }
  .icon-bg-solid-circle.medium {
    font-size: 38px; }
    .icon-bg-solid-circle.medium:before {
      font-size: 20px; }

/* ICON LINK 
    
    .link-icon  An anchor tag surrounding an icon.
                [Module parent]
*/
a.link-icon,
.hover a.link-icon:hover,
.hover a.link-icon:focus,
.hover a.link-icon:active, a.link-icon.active {
  text-decoration: none; }

/* ICON PREPEND 

    .prepend-icon                   A container for an icon and a block of content; the icon sits to the left of the content
                                    [Module parent]

    .condensed                      A container with less vertical spacing
                                    [Extends .prepend-icon]

    .medium                         A container with a medium-sized icon
                                    [Extends .prepend-icon]

    .border-bottom-*                Adds a border below the icon and title 
                                    Used in Messages
                                    [Extends .prepend-icon]

    .prepend-icon_title             Positioning of the text/headline that sits to the right of the icon
                                    [Child of .prepend-icon]

    .prepend-icon_icon              Positioning of the icon
                                    [Child of .prepend-icon]
*/
.prepend-icon {
  display: block;
  padding-left: 2.7143em;
  position: relative; }
  .prepend-icon.condensed {
    line-height: 1.2em; }
    .prepend-icon.condensed .prepend-icon_icon {
      top: 0; }
  @media (min-width: 980px) {
    .prepend-icon.medium .prepend-icon_icon {
      top: -4px; } }
  .prepend-icon.medium .prepend-icon_icon:before {
    font-size: 22px; }
  .prepend-icon.medium .icon-phone {
    top: 5px; }
  .prepend-icon.medium .icon-mail {
    top: 1px; }
  .prepend-icon.small {
    padding-left: 18px; }
    .prepend-icon.small .prepend-icon_icon:before {
      font-size: 14px; }
    .prepend-icon.small .icon-checkmark-circle {
      top: 2px; }
  .prepend-icon .prepend-icon_icon {
    position: absolute;
    top: -2px;
    left: 0; }
    .prepend-icon .prepend-icon_icon:before {
      font-size: 28px; }
    .prepend-icon .prepend-icon_icon.icon-warn {
      top: -4px; }
    .prepend-icon .prepend-icon_icon.icon-mail {
      top: -4px; }
  .prepend-icon_title {
    display: block; }
  .prepend-icon.border-bottom-success, .prepend-icon.border-bottom-warn, .prepend-icon.border-bottom-error, .prepend-icon.border-bottom-info {
    border-bottom-style: solid;
    border-bottom-width: 2px;
    padding-bottom: 5px;
    margin-bottom: 15px; }
  .prepend-icon.border-bottom-success {
    border-bottom-color: var(--border-success); }
  .prepend-icon.border-bottom-warn {
    border-bottom-color: var(--border-warn); }
  .prepend-icon.border-bottom-error {
    border-bottom-color: var(--border-error); }
  .prepend-icon.border-bottom-info {
    border-bottom-color: var(--border-info); }

.ui-datepicker-trigger:before {
  content: "\e627"; }

.ui-icon-seek-prev:before {
  content: "\e602"; }

.ui-icon-seek-next:before {
  content: "\e603"; }

/*  
    CHECK MARK LIST
    
    .check-mark-list    A list with checkmark icons in place of the default bullet
                        [Module parent]
    .centered           Extends .check-mark-list so that the list is centered
    .list-columns       Extends .check-mark-list so that the list breaks into two columns

    Examples:
    <ul class="check-mark-list">
    <li>Item 1</li>
    <li>Item 2</li>
    </ul>

    <div class="check-mark-list">
    This list contains only one item and therefore is not really a list. A div is a better container for semantics and accessibility.
    </div>
*/
.check-mark-list:before,
.check-mark-list li:before {
  content: "\e63e";
  font-weight: 700;
  font-size: 16px;
  color: var(--text-gray);
  position: absolute;
  left: -1.5em;
  top: 0; }

.check-mark-list {
  list-style: none;
  margin: 0 0 2rem 2rem;
  position: relative;
  text-align: left; }
  @media print, (min-width: 768px) {
    .check-mark-list {
      margin: 0 0 2rem 4rem; } }
  .check-mark-list li {
    position: relative; }
  .check-mark-list.centered {
    margin-left: auto;
    margin-right: auto;
    display: inline-block; }
  @media (min-width: 768px) {
    .check-mark-list.list-columns {
      column-count: 2;
      column-gap: 10rem; } }

ul.check-mark-list:before,
ol.check-mark-list:before {
  display: none; }

/*  
    ICON SOLID CIRCLE 
    
    .icon-solid-circle      A white icon (possibly an arrow) in a solid circle
                            [Module parent]

    Example Markup:
    <div class="icon-solid-circle centered">
        <i class="icon-arrow-down visible-sm visible-xs"></i>
        <i class="icon-arrow-right hidden-sm hidden-xs"></i>
    </div>
*/
.icon-solid-circle {
  display: block;
  max-width: 2em;
  width: 2em;
  height: 2em;
  border-radius: 1em;
  background-color: var(--bg-gray-60);
  color: var(--text-white);
  text-align: center;
  line-height: 2.3;
  margin-bottom: 1em;
  z-index: 1; }
  .icon-solid-circle.centered {
    margin-left: auto;
    margin-right: auto; }

/*correctly size the container of a standard-sized icon so the icon doesn't overflow the container */
.contains-icon {
  min-height: 2.5rem;
  padding-top: 0.5rem; }

@media (min-width: 768px) {
  .force-icon-right-md {
    padding-right: 3em !important; } }

/*
   PLACHOLDER INPUT STYLES
   These placeholder rules will not generate CSS on their own.
   Must be used with the @extend directive.

     %input-base                Base styles for inputs - borders, backgrounds, etc.
                                [Placeholder Selector]
     %input-text                Base styles for text inputs - single or multiline
                                [Placeholder Selector]
     %input-widths              Width modifiers for inputs - narrow, extra-narrow
                                [Placeholder Selector]

     %input-list-container      Base styles for an input container with a list, such as drop down lists or list of automatic suggestions appearing below a text field
                                [Placeholder Selector]
     %input-list                Base styles for input lists 
                                [Placeholder Selector]
     %input-list-item           Base styles for an individual item in an input list 
                                [Placeholder Selector]

*/
.input-text, .input-text-area, .input-date, .input-scrollbox, .input-append-outside_button {
  color: var(--text-gray);
  line-height: normal;
  vertical-align: middle;
  border: 1px solid var(--border-gray-80);
  outline: 0;
  margin: 0.2143em 0;
  padding: 0.445em;
  border-radius: .2143em;
  background: var(--bg-white); }
  .input-text:focus, .input-text-area:focus, .input-date:focus, .input-scrollbox:focus, .input-append-outside_button:focus {
    outline: 0;
    border: 1px solid var(--focus-outline); }

.input-text, .input-text-area, .input-button {
  width: 100%; }
  @media print, (min-width: 768px) {
    .input-text, .input-text-area, .input-button {
      width: 20em;
      max-width: 100%; }
      .full-width.input-text, .full-width.input-text-area, .full-width.input-button {
        width: 100%; } }

.narrow.input-text, .narrow.input-select, .narrow.input-suggest {
  max-width: 10em; }

.extra-narrow.input-text, .extra-narrow.input-select, .extra-narrow.input-suggest {
  max-width: 5em; }

.extra-narrow.input-select, .extra-narrow.input-suggest {
  max-width: 3.4286em; }

@media print, (min-width: 768px) {
  .input-select, .input-suggest {
    display: inline-block;
    width: 20em; }
    .full-width.input-select, .full-width.input-suggest {
      width: 100%;
      max-width: 100%; } }

.input-select_list, .input-suggest_list {
  width: 100%;
  margin: 0;
  padding: 0;
  background: var(--bg-white);
  border-radius: 3px;
  box-shadow: inset 0 0 1px var(--box-shadow-no-opacity); }
  @media print, (min-width: 768px) {
    .input-select_list, .input-suggest_list,
    [class*=input-].narrow .input-select_list,
    [class*=input-].narrow .input-suggest_list,
    [class*=input-].extra-narrow .input-select_list,
    [class*=input-].extra-narrow .input-suggest_list {
      width: 100%; } }

.input-select_list_item, .input-suggest_list_item {
  position: relative;
  list-style: none;
  overflow: hidden;
  margin: 0;
  line-height: normal;
  border-bottom: 1px solid var(--border-light-gray);
  border-collapse: collapse; }
  @media print, (min-width: 768px) {
    .input-select_list_item, .input-suggest_list_item {
      padding: .4286em .5714em; } }
  .input-select_list_item:first-child, .input-suggest_list_item:first-child {
    border-radius: 3px 3px 0 0; }
  .input-select_list_item:last-child, .input-suggest_list_item:last-child {
    border-radius: 0 0 3px 3px; }
  .hover .input-select_list_item:hover, .hover .input-suggest_list_item:hover, .active.input-select_list_item, .active.input-suggest_list_item, .selected.input-select_list_item, .selected.input-suggest_list_item {
    background: var(--bg-light-gray);
    border-color: var(--border-white);
    cursor: pointer; }

/* TEXT INPUT (SINGLE LINE TEXT INPUT)

    .input-text                     A text input field (input type="text") 
                                    [Module Parent]

    .narrow                         Good for small inputs, such as zip code, date, amount
                                    [Extends .input-text]

    .extra-narrow                   Good for 1-2 digit inputs, such as state or middle initial

*/
/* TEXT AREA (MULTILINE TEXT INPUT)

    .input-text-area         A textarea input field for multiline text input
                            [Module Parent]

*/
/*EDIT INLINE
    text that can be edited inline
    // todo: make this class name .edit-inline

    .editable                   Decorates the text to indicate clicking the text will open a form 
                                [Module Parent]

*/
a.editable, .editable {
  text-decoration: none;
  border-bottom: 1px dashed var(--border-info-light);
  margin: 0 .3571em 0 0; }
  a.editable.txt-gray, a.editable.txt-dark-gray, .editable.txt-gray, .editable.txt-dark-gray {
    border-bottom-color: var(--border-gray-60); }

/* DATE INPUT

    .input-date                     A text input field (input type="text") with a jQuery date box control
                                    [Module Parent]
*/
@media print, (min-width: 768px) {
  .input-date {
    width: 8em; } }

/*  SCROLLBOX

    .input-scrollbox                A textarea input field that is prefilled with information (such as a long agreement to terms) and scrolls via
                                    mouse or gesture
                                    [Module Parent]

*/
.input-scrollbox {
  width: 100%;
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch;
  height: 15em; }

/*
    INPUT SELECT LIST
    
    .input-select               A container for a custom drop down menu. The "select" element is hidden and replaced by a more stylized drop down menu. 
                                On small screens, the menu pops up as a modal box above the page content. On medium and large screens, the menu acts like an HTML select.
                                The trigger and the list of options stretch to 100% width inside this container. Conrol the width of this container
                                to control the width of the trigger and the list of options.
                                [Module parent]
    .has-ribbon                 An input select which leaves room for a ribbon in the trigger and the list_item
                                [Extends .input-select]

    .input-select_trigger       A button-like element that when clicked, opens the drop down menu
                                [Child of .input-select ]
    .input-select_list          An unordered list of select options
                                [Child of .input-select]
    .input-select_list_title    A title that appears at the beginning of the list on XS/SM when the list is rpesented as a modal
                                [Child of .input-select]
    .input-select_list_item     A single option
                                [Child of .input-select_list]
 

 */
.input-select {
  margin: 0.2143em 0;
  color: var(--text-gray); }
  .input-select select {
    display: none; }
  .input-select.has-ribbon {
    padding-left: 0; }

.input-select_trigger {
  position: relative;
  min-height: 1em;
  line-height: normal;
  padding: .5em .5714em;
  background: var(--bg-white);
  border: 1px solid var(--border-gray-80);
  border-radius: 3px;
  box-shadow: inset 0 0 1px var(--box-shadow-no-opacity);
  cursor: pointer;
  outline: 0; }
  @media print, (min-width: 768px) {
    .input-select_trigger {
      padding: .5em .4286em; } }
  .input-select_trigger:focus {
    outline: 0;
    border: 1px solid var(--focus-outline); }
  .input-select_trigger .icon-triangle-down {
    position: absolute;
    top: 30%;
    right: .2857em;
    font-size: 1.4rem;
    line-height: 1;
    color: var(--text-gray-60); }
  .input-select_trigger .icon-radio {
    display: none; }
  .input-select.has-ribbon .input-select_trigger .ribbon {
    display: none; }
  .input-select_trigger_text {
    display: block;
    padding-right: .7143em;
    overflow: hidden; }
    @media print, (min-width: 768px) {
      .input-select_trigger_text {
        padding-right: 1em; } }

@media print, (min-width: 768px) {
  .input-select_list {
    border: 1px solid var(--border-gray-80); } }

.input-select_list_title {
  position: relative;
  list-style: none;
  overflow: hidden;
  margin: 0; }
  @media print, (min-width: 768px) {
    .input-select_list_title .input-select_list_title {
      display: none; } }

.input-select_list_item {
  min-height: 1em;
  padding: 1em 0.5714em 1em 2.5714em; }
  @media print, (min-width: 768px) {
    .input-select_list_item {
      padding: 0.4286em 0.5714em; } }
  .input-select.has-ribbon .input-select_list_item {
    padding-right: 4.4em; }
    @media print, (min-width: 768px) {
      .input-select.has-ribbon .input-select_list_item {
        padding-left: 2.7em; } }
    .input-select.has-ribbon .input-select_list_item .ribbon {
      margin-top: 2px;
      right: 1em;
      left: auto; }
      @media print, (min-width: 768px) {
        .input-select.has-ribbon .input-select_list_item .ribbon {
          margin-top: 0;
          left: .6em;
          right: auto; } }
      @media print, (min-width: 768px) {
        .input-select.has-ribbon .input-select_list_item .ribbon:before {
          font-size: 16px; } }
  .input-select_list_item .icon-radio {
    position: absolute;
    top: .6em;
    left: .7em; }
    .input-select_list_item .icon-radio:before {
      font-size: 1.8rem; }
    @media print, (min-width: 768px) {
      .input-select_list_item .icon-radio {
        display: none; } }

/*
    INPUT WITH SUGGESTIONS

    .input-suggest              A container for a text input with a list of suggestions that appear as you type. 
                                The input and the list of suggestions stretch to 100% width inside this container. 
                                This container can be set to a narrower width using "narrow" or "extra-narrow", or to 100% of it's container with "full-width"
                                [Module parent]
    .input-suggest_input        A text input 
                                [Child of .input-suggest | Extends .input-text ]
    .input-suggest_list         An unordered list of suggestions
                                [Child of .input-suggest]
    .input-suggest_list_item    A single suggestion
                                [Child of .input-suggest_list]
*/
.input-suggest_input {
  margin-bottom: 0; }
  @media print, (min-width: 768px) {
    .input-suggest_input {
      width: 100%; } }

.input-suggest_list {
  border: 1px solid var(--border-gray-80);
  position: absolute;
  z-index: 100; }

.input-suggest_list_item {
  padding: .7143em .5714em; }
  .input-suggest_list_item a {
    text-decoration: none; }

/* APPENDED INPUT
    Example markup:

    <div class="input-append">
          <input type="text" class="input-text input-append_input">  
          <span class="input-append_button">


    .input-append               A container for a text input with an icon button appened to the right side (i.e. magnifying glass) 
                                The input stretches to 100% width inside this container. 
                                This container can be set to a narrower width using "narrow" or to 100% of it's container with "full-width"
                                [Module parent]
    
    .input-append_input         A text input 
                                [Child of .input-append; Extends .input-text]

    .input-append_button        An icon button that sits at the right side of the input field
                                [Child of .input-append]

    .large                      A modifier class to increase the padding-right on the text input.
                                Used when the button on the right side of the input field is a short string of text like "Not You?" in txt-small size.
                                [Extends .input-append_input]
    
*/
.input-append {
  position: relative;
  display: inline-block;
  width: 100%;
  margin: 0.2143em 0; }
  @media print, (min-width: 768px) {
    .input-append {
      width: 20em; }
      .input-append.full-width,
      .input-append.full-width .input-suggest {
        width: 100%; } }
  .input-append.narrow {
    max-width: 10em; }
  .input-append.extra-narrow {
    max-width: 5em; }

.input-append_input {
  width: 100%;
  padding-right: 2em;
  margin: 0; }
  @media print, (min-width: 768px) {
    .input-append_input {
      padding-right: 2.4286em; } }
  .input-append_input.two-icons {
    padding-right: 4.5rem; }
    @media print, (min-width: 768px) {
      .input-append_input.two-icons {
        padding-right: 4.5rem; } }
  .input-append_input.large {
    padding-right: 7rem; }
    @media print, (min-width: 768px) {
      .input-append_input.large {
        padding-right: 6rem; } }

.input-append_button {
  display: block;
  position: absolute;
  top: 50%;
  margin-top: -8px;
  right: .4286em;
  color: var(--text-light-gray);
  line-height: normal;
  border: none;
  text-align: center;
  background-color: transparent;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
  cursor: pointer; }
  a.input-append_button {
    text-decoration: none; }
  .hover .input-append_button:hover,
  .hover .input-append_button:focus,
  .hover .input-append_button:active, .input-append_button.active {
    color: var(--text-gray-38); }
  .hover .input-append_button:focus {
    outline-offset: 2px; }
  .input-append_button .icon-search:before {
    line-height: normal; }

.input-append_symbol {
  display: block;
  position: absolute;
  top: 50%;
  margin-top: -8px;
  right: .4286em;
  color: var(--text-light-gray);
  line-height: normal;
  border: none;
  text-align: center;
  background-color: transparent; }

/* APPENDED INPUT - OUTSIDE
    Example markup:

    <div class="input-append-outside">
          <input type="text" class="input-text input-append-outside_input">  
          <span class="input-append-outside_button">


    .input-append-outside           A container for a text input with an icon button appened to the right side - e.g: the show/hide password button
                                    Differs from the ".input-append" because the button and icon are actually outside the input, though they appear to be part of it.
                                    The input stretches to 100% width inside this container, and the container is full width at mobile sizes.
                                    [Module parent]
    
    .input-append-outside_input     A text input 
                                    [Child of .input-append-outside; Extends .input-text]

    .input-append-outside_button    An icon button that sits outside the input field, to the far right
                                    [Child of .input-append-outside]
    
*/
.input-append-outside {
  display: -ms-inline-flexbox;
  display: inline-flex;
  width: 100%; }
  @media (min-width: 768px) {
    .input-append-outside {
      width: auto; } }
  .input-append-outside_input {
    border-right: 0;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0; }
  .input-append-outside_button {
    border-bottom-left-radius: 0;
    border-top-left-radius: 0;
    -ms-flex-positive: 0;
    flex-grow: 0;
    -ms-flex-negative: 0;
    flex-shrink: 0; }

/* prependED INPUT
    Example markup:

    <div class="input-prepend">
          <input type="text" class="input-text input-prepend_input">  
          <span class="input-prepend_label">


    .input-prepend               A container for a text input with an icon label appened to the right side (i.e. magnifying glass) 
                                The input stretches to 100% width inside this container. 
                                This container can be set to a narrower width using "narrow" or to 100% of it's container with "full-width"
                                [Module parent]
    
    .input-prepend_input         A text input 
                                [Child of .input-prepend; Extends .input-text]

    .wide-label                 A text input with extra padding on the left to accommodate a wider label
                                [Extends .input-pepend_input]

    .input-prepend_label        An icon label that sits at the right side of the input field
                                [Child of .input-prepend]
    
*/
.input-prepend {
  position: relative;
  display: inline-block;
  width: 100%;
  margin: 0.2143em 0; }
  @media print, (min-width: 768px) {
    .input-prepend {
      width: 20em; }
      .input-prepend.full-width,
      .input-prepend.full-width .input-suggest {
        width: 100%; } }
  .input-prepend.narrow {
    max-width: 10em; }
  .input-prepend.extra-narrow {
    max-width: 6em; }

.input-prepend_input {
  width: 100%;
  padding-left: 2.85em;
  margin: 0; }
  .input-prepend_input.wide-label {
    padding-left: 3.9em; }

.input-prepend_label {
  display: block;
  position: absolute;
  top: 0;
  bottom: 0;
  color: var(--text-light-gray);
  line-height: normal;
  text-align: center;
  background-color: transparent;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
  border-right: 1px solid var(--border-gray-80);
  padding: 0.55em 0.75em; }
  @media print, (min-width: 768px) {
    .input-prepend_label {
      padding: 0.35em 0.65em; } }
  a.input-prepend_label {
    text-decoration: none; }
  .hover .input-prepend_label:hover,
  .hover .input-prepend_label:focus,
  .hover .input-prepend_label:active, .input-prepend_label.active {
    color: var(--text-gray-38); }
  .hover .input-prepend_label:focus {
    outline-offset: 2px; }
  .input-prepend_label [class^=icon-],
  .input-prepend_label [class*=' icon-'] {
    position: relative;
    top: 1px; }
    @media print, (min-width: 768px) {
      .input-prepend_label [class^=icon-],
      .input-prepend_label [class*=' icon-'] {
        top: 2px; } }

/* INPUT DIVIDER

    .input-divide    An hr to divide form inputs into logical sections 
                     Provides appropriate spacing when placed between two input-group containers
                     [Module Parent]
*/
@media print, (min-width: 768px) {
  .input-divide {
    margin: 1.0714em 0; } }

/*
   PLACHOLDER INPUT STYLES
   These placeholder rules will not generate CSS on their own.
   Must be used with the @extend directive.

   %input-group-option-child    Base styles for child of .input-group_option
                                [Placeholder Selector]

   %input-group-option-boxed    Styles when an .input-group_option is bordered
                                [Placeholder Selector]

*/
.input-group_option_input, .input-group_option_text {
  display: table-cell;
  vertical-align: top;
  cursor: pointer; }
  .input-group_option.txt-middle .input-group_option_input, .input-group_option.txt-middle .input-group_option_text {
    vertical-align: middle; }
  .input-group_option.disabled .input-group_option_input, .input-group_option.disabled .input-group_option_text {
    cursor: default; }
  .input-group_option.pvn .input-group_option_input, .input-group_option.pvn .input-group_option_text {
    padding-top: 0;
    padding-bottom: 0; }

.input-group_option-wrapper, .input-group.deco .input-group_option {
  background: var(--bg-white);
  margin-bottom: 1.1429em;
  border-radius: 3px;
  border: 1px solid var(--border-gray-87);
  box-shadow: 0 0 1px 0 var(--box-shadow-level-1); }

/* INPUT GROUP
  
    .input-group                    A container for an input and other elements, provides spacing under the group
                                    [Module parent]
    
    .deco                           A container for an input and other elements that adds a shadowed box around each input-group_option
                                    [Extends .input-group]
    
    .input-group-sub                A container for an input and other elements that is indented (i.e. to display under a radio button choice)
                                    [Optionally extends .input-group if a bottom margin is desired]    
    
    .input-group_option             One choice in a list of options (i.e. radio button list, check box list)
                                    Displays as a CSS table
                                    [Child of .input-group or .input-group_option-wrapper (only when an .input-group_description is also present)]
    TODO: example markup
    .highlighted                    The selected choice in a list of options (i.e. radio button list, check box list)
                                    [Extends .input-group_option]
    .disabled                       An input group option that contains a disabled input (radio button or checkbox)
                                    Sets the default cursor so the option doesn't appear clickable
                                    [Extends .input-group_option]
    .no-text                        An input group option that has a label but the label has no text                                    
                                    [Extends .input-group_option]

    .input-group_option_input       A container for the input element - radio button or checkbox
                                    Displays as a CSS table-cell 
                                    [Child of .input-group_option]
    
    .input-group_option_text        A container for the label element or othe text associated with the input
                                    Displays as a CSS table-cell to keep text indented (rather than wrapping to a second line below the input)
                                    [Child of .input-group_option]
    
    .input-group_description        An optional container used when an input-group_option needs further text
                                    Allows for responsive indenting via the .indent-sm, .indent-md classes
                                    [Child of .input-group_item-wrapper]

    .input-group_option-wrapper     A container for input-group_option and input-group_description
                                    Adds a shadowed box around the item
                                    If an input-group_description is present, this wrapper should be used.
                                    [Child of .input-group]

    .limit-width                    An input group option wrapper that has a limited width rather than extending full width
                                    [Extends .input-group_option-wrapper]

*/
.input-group {
  margin-bottom: .7143em; }
  .input-group.condensed {
    margin-bottom: .3571em; }

.input-group-sub {
  display: block;
  padding-left: 3.1429em; }
  @media print, (min-width: 768px) {
    .input-group-sub {
      padding-left: 2.5714em; } }
  .input-group-sub.highlighted {
    padding-bottom: .3571em;
    padding-right: .3571em; }

.input-group_option-wrapper.limit-width {
  max-width: 70ch; }

.input-group_option {
  display: table;
  cursor: pointer; }
  .input-group_option.disabled {
    cursor: default; }
  .input-group.deco .input-group_option,
  .input-group_option.full-width .input-group_option,
  .input-group_option-wrapper .input-group_option {
    width: 100%; }
  .input-group_option-wrapper .input-group_option.highlighted,
  .input-group.deco .input-group_option.highlighted {
    background: var(--bg-gray-98); }
  .hover .input-group_option:focus {
    outline: 1px dotted var(--focus-outline);
    outline-offset: -2px; }

@media print, (min-width: 768px) {
  .input-group_option_input {
    padding-top: .3571em;
    padding-bottom: .3571em; }
    .input-group_option.txt-middle > .input-group_option_input > .icon-radio {
      position: relative;
      top: -2px; } }

.input-group_option_input,
.input-group.no-deco .input-group_option_input {
  padding: .438em .2857em .5714em .7143em; }
  @media (min-width: 980px) {
    .input-group_option_input,
    .input-group.no-deco .input-group_option_input {
      padding: .5714em .2857em .5714em .7143em; } }

.input-group_option.pln .input-group_option_input,
.input-group_option.phn .input-group_option_input,
.input-group_option.no-indent .input-group_option_input {
  padding-left: 0; }

.input-group_option.label-ribbon .input-group_option_input {
  padding-top: .438em; }
  @media (min-width: 980px) {
    .input-group_option.label-ribbon .input-group_option_input {
      padding-top: .5714em; } }

.input-group.deco .input-group_option_input {
  padding: 1.4286em .2857em 1.4286em 1.0714em; }

.input-group_option-wrapper .input-group_option_input {
  padding: 1em .2857em .8571em 1.0714em; }

.input-group_option-wrapper .input-group_option_input [class*=icon-] {
  font-size: 1.6rem;
  line-height: 1; }

.input-group_option-wrapper .input-group_option_input [class*=icon-]::before {
  line-height: 1.3; }
  @media print, (min-width: 768px) {
    .input-group_option-wrapper .input-group_option_input [class*=icon-]::before {
      line-height: 1; } }

.hover .input-group_option_input input:focus + [class*=icon-] {
  outline: 1px dotted var(--focus-outline); }

.input-group_option_text {
  /*Checkboxes in action-mode (account history & web pay), messages and disputes have empty labels*/ }
  .input-group_option_text,
  .input-group.no-deco .input-group_option_text {
    padding: .7143em .5714em .5714em 0; }
  @media print, (min-width: 768px) {
    .input-group_option_text {
      padding-top: .5em;
      padding-bottom: .3571em; } }
  .input-group.deco .input-group_option_text,
  .input-group_option.full-width .input-group_option_text,
  .input-group_option-wrapper .input-group_option_text {
    width: 100%; }
  .input-group_option.prn .input-group_option_text,
  .input-group_option.phn .input-group_option_text {
    padding-right: 0; }
  .input-group.deco .input-group_option_text {
    padding: 1.4286em 1.4286em 1.4286em 0; }
  .input-group_option-wrapper .input-group_option_text {
    padding: 1em 1.0714em .8571em 0; }
    @media print, (min-width: 768px) {
      .input-group_option-wrapper .input-group_option_text {
        padding-top: .9286em; } }
  .input-group_option.no-text .input-group_option_text {
    padding: 0; }

.input-group_description {
  padding: .8571em 1.0714em 1.0714em;
  border-top: 1px solid var(--border-light-gray); }
  .input-group_description.indent-xs, .input-group_description.indent-sm, .input-group_description.indent-md {
    margin-left: 0 !important; }
  .input-group_description.indent-xs {
    padding-left: 3.2857em; }
  @media print, (min-width: 420px) {
    .input-group_description.indent-sm {
      padding-left: 3.2857em; } }
  @media print, (min-width: 768px) {
    .input-group_description.indent-xs, .input-group_description.indent-sm, .input-group_description.indent-md {
      padding-left: 2.9286em; } }

/* INPUT LABELS
    
    .input-label     A label element which displays above its corresponding input field
                     [Module Parent]


*/
.input-label {
  display: block;
  margin-bottom: .1429em;
  font-weight: 500;
  max-width: 100%; }

/* PASSWORD STRENGTH
    .strength-*     Apply styling to an input field to indicate password strength
                    [Extends .input-text]
*/
.strength-weak {
  border-color: var(--border-gray-60);
  background-image: linear-gradient(to right, var(--border-light-gray), var(--border-light-gray) 50%, var(--bg-white) 50%, var(--bg-white) 100%); }
  .strength-weak_text {
    color: var(--text-light-gray); }

.strength-good {
  border-color: var(--border-warn);
  background-image: linear-gradient(to right, var(--bg-warn-extra-light), var(--bg-warn-extra-light) 75%, var(--bg-white) 75%, var(--bg-white) 100%); }
  .strength-good_text {
    color: var(--text-warn); }

.strength-strong {
  border-color: var(--border-success);
  background: var(--bg-success-extra-light); }
  .strength-strong_text {
    color: var(--text-success); }

/* VALIDATION 
    The following class names are automatically generated by MVC valdition:

    .field-validation-error         A span next to an input field containing an error message 

    .input-validation-error         An input field with an error

    .input-select-validation-error  A container around a select input with an error

    .input-group-validation-error   A radio button list or check box list with an error
*/
.field-validation-error {
  display: block;
  color: var(--text-error); }

.input-validation-error,
.hover .input-validation-error:focus {
  border: 2px solid var(--border-error);
  background: var(--bg-white); }

.input-select-validation-error .input-select_trigger,
.hover .input-select-validation-error:hover .input-select_trigger,
.input-select-validation-error.active .input-select_trigger,
.hover .input-select-validation-error .input-select_trigger:focus {
  border: 2px solid var(--border-error);
  background: var(--bg-white); }

.input-group-validation-error {
  border: 2px solid var(--border-error);
  border-radius: .2143em; }
  .input-group-validation-error .field-validation-error {
    display: block;
    margin: .5714em .7143em; }

.input-group-validation-error.deco {
  border: none; }
  .input-group-validation-error.deco .field-validation-error {
    padding: .2857em;
    margin: .2857em 0 .7143em;
    border: 1px solid var(--border-error);
    border-radius: .2143em; }

.hover .input-validation-error:focus,
.hover .input-select-validation-error .input-select_trigger:focus {
  border: 3px solid var(--border-error); }

/*
    This SCSS is from a javascript package for Select2 that will replace the browser default selects with this.
    We use this for multi-select (travel plans in web branch) and selects that need opt groups (surveys google review branches). 
    UWCU HTML Helpers for select lists will not show opt groups.
    Important Note: Please use the UWCU HTML Helpers for selects unless you need one of these two use cases.
    
    Below is select2 SASS code but with some modifications to some classes or elements to more closely match UWCU inputs, including replacing their colors with our color variables.
    Comments are next to the things that have been modified.

    https://select2.org/
    Release 4.0.13 - 2020

    INPUT SINGLE SELECT2
    INPUT MULTISELECT SELECT2
*/
.select2-container {
  box-sizing: border-box;
  display: inline-block;
  margin: 0;
  position: relative;
  vertical-align: middle;
  width: 100% !important;
  /* modified from select2 */
  /* Start Single */
  /* End Single*/
  /* Start Multiple*/
  /* End Multiple*/ }
  @media print, (min-width: 768px) {
    .select2-container {
      width: 20em !important;
      /* Over ride the dynamic width created by the dropdown being wide enough that the countries don't wrap*/ } }
  .select2-container .select2-selection--single {
    box-sizing: border-box;
    cursor: pointer;
    display: block;
    height: 32px;
    -ms-user-select: none;
    user-select: none;
    -webkit-user-select: none; }
    .select2-container .select2-selection--single .select2-selection__rendered {
      display: block;
      padding-left: 8px;
      padding-right: 20px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap; }
    .select2-container .select2-selection--single .select2-selection__clear {
      position: relative; }
  .select2-container[dir="rtl"] .select2-selection--single .select2-selection__rendered {
    padding-right: 8px;
    padding-left: 20px; }
  .select2-container .select2-selection--multiple {
    box-sizing: border-box;
    cursor: pointer;
    display: block;
    min-height: 32px;
    -ms-user-select: none;
    user-select: none;
    -webkit-user-select: none; }
    .select2-container .select2-selection--multiple .select2-selection__rendered {
      display: inline-block;
      overflow: hidden;
      padding-left: 8px;
      text-overflow: ellipsis;
      white-space: nowrap; }
  .select2-container .select2-search--inline {
    float: left; }
    .select2-container .select2-search--inline .select2-search__field {
      box-sizing: border-box;
      border: none;
      font-size: 100%;
      margin-top: 5px;
      padding: 0; }
      .select2-container .select2-search--inline .select2-search__field::-webkit-search-cancel-button {
        -webkit-appearance: none; }

/* Start Dropdown */
.select2-dropdown {
  background-color: var(--bg-white);
  border: 1px solid var(--border-gray-80);
  border-radius: 4px;
  box-sizing: border-box;
  display: block;
  position: absolute;
  left: -100000px;
  width: 100%;
  z-index: 100; }

.select2-results {
  display: block; }

.select2-results__options {
  list-style: none;
  margin: 0;
  padding: 0; }

.select2-results__option {
  padding: 6px;
  -ms-user-select: none;
  user-select: none;
  -webkit-user-select: none; }
  .select2-results__option[aria-selected] {
    cursor: pointer; }

.select2-container--open .select2-dropdown {
  left: 0; }

.select2-container--open .select2-dropdown--above {
  border-bottom: none;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0; }

.select2-container--open .select2-dropdown--below {
  border-top: none;
  border-top-left-radius: 0;
  border-top-right-radius: 0; }

.select2-search--dropdown {
  display: block;
  padding: 4px; }
  .select2-search--dropdown .select2-search__field {
    padding: 4px;
    width: 100%;
    box-sizing: border-box; }
    .select2-search--dropdown .select2-search__field::-webkit-search-cancel-button {
      -webkit-appearance: none; }
  .select2-search--dropdown.select2-search--hide {
    display: none; }

/* End Dropdown */
.select2-close-mask {
  border: 0;
  margin: 0;
  padding: 0;
  display: block;
  position: fixed;
  left: 0;
  top: 0;
  min-height: 100%;
  min-width: 100%;
  height: auto;
  width: auto;
  opacity: 0;
  z-index: 99;
  background-color: var(--bg-white);
  filter: alpha(opacity=0); }

.select2-hidden-accessible {
  border: 0 !important;
  clip: rect(0 0 0 0) !important;
  height: 1px !important;
  margin: -1px !important;
  overflow: hidden !important;
  padding: 0 !important;
  position: absolute !important;
  width: 1px !important; }

/* Start Layout */
.select2-container--default {
  /*Start Layout Single*/
  /* End Layout Single*/
  /* Start Layout Mulitple */
  /* End Layout Mulitple */ }
  .select2-container--default .select2-selection--single {
    background-color: var(--bg-white);
    border: 1px solid var(--border-gray-80);
    border-radius: 4px; }
    .select2-container--default .select2-selection--single .select2-selection__rendered {
      color: var(--text-gray);
      line-height: 32px; }
    .select2-container--default .select2-selection--single .select2-selection__clear {
      cursor: pointer;
      float: right;
      font-weight: bold; }
    .select2-container--default .select2-selection--single .select2-selection__placeholder {
      color: var(--text-light-gray); }
    .select2-container--default .select2-selection--single .select2-selection__arrow {
      height: 26px;
      position: absolute;
      top: 3px;
      right: 1px;
      width: 20px; }
      .select2-container--default .select2-selection--single .select2-selection__arrow b {
        border-color: var(--text-gray-60) transparent transparent transparent;
        border-style: solid;
        border-width: 7px 4px 0 4px;
        height: 0;
        left: 50%;
        margin-left: -4px;
        margin-top: -2px;
        position: absolute;
        top: 50%;
        width: 0; }
  .select2-container--default[dir="rtl"] .select2-selection--single .select2-selection__clear {
    float: left; }
  .select2-container--default[dir="rtl"] .select2-selection--single .select2-selection__arrow {
    left: 1px;
    right: auto; }
  .select2-container--default.select2-container--disabled .select2-selection--single {
    background-color: var(--bg-gray-93);
    cursor: default; }
    .select2-container--default.select2-container--disabled .select2-selection--single .select2-selection__clear {
      display: none; }
  .select2-container--default.select2-container--focus .select2-selection--single {
    border: solid var(--focus-outline) 1px;
    outline: 0; }
  .select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b {
    border-color: transparent transparent var(--text-gray-60) transparent;
    border-width: 0 4px 7px 4px; }
  .select2-container--default .select2-selection--multiple {
    background-color: var(--bg-white);
    border: 1px solid var(--border-gray-80);
    border-radius: 4px;
    cursor: text; }
    .select2-container--default .select2-selection--multiple .select2-selection__rendered {
      box-sizing: border-box;
      list-style: none;
      margin: 0;
      padding: 0 5px;
      width: 100%; }
      .select2-container--default .select2-selection--multiple .select2-selection__rendered li {
        list-style: none; }
    .select2-container--default .select2-selection--multiple .select2-selection__clear {
      cursor: pointer;
      float: right;
      font-weight: bold;
      margin-top: 5px;
      margin-right: 10px;
      padding: 1px; }
    .select2-container--default .select2-selection--multiple .select2-selection__choice {
      background-color: var(--bg-faint-gray);
      border: 1px solid var(--border-gray-80);
      border-radius: 4px;
      cursor: default;
      float: left;
      margin-right: 5px;
      margin-top: 5px;
      padding: 0 5px; }
    .select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
      color: var(--text-gray-60);
      cursor: pointer;
      display: inline-block;
      font-weight: bold;
      margin-right: 2px;
      font-size: 16px; }
      .select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover {
        color: var(--text-gray); }
  .select2-container--default[dir="rtl"] .select2-selection--multiple .select2-selection__choice, .select2-container--default[dir="rtl"] .select2-selection--multiple .select2-search--inline {
    float: right; }
  .select2-container--default[dir="rtl"] .select2-selection--multiple .select2-selection__choice {
    margin-left: 5px;
    margin-right: auto; }
  .select2-container--default[dir="rtl"] .select2-selection--multiple .select2-selection__choice__remove {
    margin-left: 2px;
    margin-right: auto; }
  .select2-container--default.select2-container--focus .select2-selection--multiple {
    border: solid var(--focus-outline) 1px;
    outline: 0; }
  .select2-container--default.select2-container--disabled .select2-selection--multiple {
    background-color: var(--bg-faint-gray);
    cursor: default; }
  .select2-container--default.select2-container--disabled .select2-selection__choice__remove {
    display: none; }
  .select2-container--default.select2-container--open.select2-container--above .select2-selection--single, .select2-container--default.select2-container--open.select2-container--above .select2-selection--multiple {
    border-top-left-radius: 0;
    border-top-right-radius: 0; }
  .select2-container--default.select2-container--open.select2-container--below .select2-selection--single, .select2-container--default.select2-container--open.select2-container--below .select2-selection--multiple {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0; }
  .select2-container--default .select2-search--dropdown .select2-search__field {
    border: 1px solid var(--border-gray-80); }
  .select2-container--default .select2-search--inline .select2-search__field {
    background: transparent;
    border: none;
    outline: 0;
    box-shadow: none;
    -webkit-appearance: textfield; }
  .select2-container--default .select2-results > .select2-results__options {
    max-height: 200px;
    overflow-y: auto; }
  .select2-container--default .select2-results__option[role=group] {
    padding: 0; }
  .select2-container--default .select2-results__option[aria-disabled=true] {
    color: var(--text-gray-60); }
  .select2-container--default .select2-results__option[aria-selected=true] {
    color: var(--text-faint-gray); }
  .select2-container--default .select2-results__option .select2-results__option {
    padding-left: 1em; }
    .select2-container--default .select2-results__option .select2-results__option .select2-results__group {
      padding-left: 0; }
    .select2-container--default .select2-results__option .select2-results__option .select2-results__option {
      margin-left: -1em;
      padding-left: 2em; }
      .select2-container--default .select2-results__option .select2-results__option .select2-results__option .select2-results__option {
        margin-left: -2em;
        padding-left: 3em; }
        .select2-container--default .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option {
          margin-left: -3em;
          padding-left: 4em; }
          .select2-container--default .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option {
            margin-left: -4em;
            padding-left: 5em; }
            .select2-container--default .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option {
              margin-left: -5em;
              padding-left: 6em; }
  .select2-container--default .select2-results__option--highlighted[aria-selected] {
    background-color: var(--bg-faint-gray); }
  .select2-container--default .select2-results__group {
    cursor: default;
    display: block;
    padding: 6px; }

/*End Layout */
/* BUTTON INPUT

    .input-button                     A button input field, used to match widths with text inputs

*/
/*
   PLACHOLDER LIST item-container STYLES
   These placeholder rules will not generate CSS on their own.
   Must be used with the @extend directive.

    %item-container       Base styles for all list item-containers
                 [Placeholder Selector]
    

*/
.item-container, .item-container-unattached, .item-container-convertible {
  margin: 0;
  padding: 0;
  list-style: none; }
  .tile.item-container, .tile.item-container-unattached, .tile.item-container-convertible {
    padding: 0; }

/*  item-container 

    Accommodate 3 patterns of markup. 
    Use direct descendant selector (>) to avoid affecting nested item-containers

    Standard markup:
    <ul class="item-container"><li><a class="basic-item">...
    <ul class="item-container"><li class="basic-item">...
    <div class="item-container"><a class="basic-item">...

   
    Unattached markup:
    <ul class="item-container-unattached"><li><a class="basic-item">...
    <ul class="item-container-unattached"><li class="basic-item">...
    <div class="item-container-unattached"><a class="basic-item">...


    Convertible markup:
    <ul class="item-container-convertible"><li><a class="basic-item">...
    <ul class="item-container-convertible"><li class="basic-item">...
    <div class="item-container-convertible"><a class="basic-item">...

    Example item-container with background color:
    <ul class="item-container bg-orange"><li><a class="basic-item">...


     .item-container                A container (ul, ol, div) for a list of attached items
                                    [Module parent]

    .item-container-unattached      A container (ul, ol, div) for a list of unattached items
                                    [Module parent]

    .item-container-convertible     A container (ul, ol, div) for a list of unattached items on XS/SM, and attached items on MD+
                                    [Module parent]

    .condensed                      A container for a list of attached items with less vertical padding on each item.
                                    [Extends .item-container;]


    .bg-*                           Apply a background color to the container
                                    [Extends .item-container]




*/
.item-container {
  border-bottom: 1px solid var(--border-light-gray);
  border-top: 1px solid var(--border-light-gray); }
  .item-container[class*="bg-"] {
    border-color: var(--border-white-opacity-20); }
  .item-container .item-container {
    border-bottom: none; }

@media print, (min-width: 768px) {
  .item-container-convertible {
    border-bottom: 1px solid var(--border-light-gray);
    border-top: 1px solid var(--border-light-gray); } }

/*
   PLACHOLDER ITEM STYLES
   These placeholder rules will not generate CSS on their own.
   Must be used with the @extend directive.

   
    
    %item-icon           Base styles for a icon within an item
                         [Placeholder Selector]

    %item-icon-right     Base styles for a icon that sits on the right side of an item
                         [Placeholder Selector]

    %item-icon-left      Base styles for a icon that sits on the left side of an item
                         [Placeholder Selector]

*/
.basic-item.forward:before, .basic-item_icon-right, .basic-item_icon-left {
  position: absolute;
  top: 50%;
  margin-top: -10px;
  /*half the line-height of the icon, which is 16px, plus a little extra because it seems to need it*/ }
  @media print, (min-width: 768px) {
    .basic-item.forward:before, .basic-item_icon-right, .basic-item_icon-left {
      margin-top: -8px;
      /*half the line-height of the icon, which is 16px*/ } }
  .icon-radio.basic-item.forward:before, .icon-radio.basic-item_icon-right, .icon-radio.basic-item_icon-left {
    /*this icon sits low relative to the line-height, so scoot it up a little more*/
    margin-top: -15px; }
    @media print, (min-width: 768px) {
      .icon-radio.basic-item.forward:before, .icon-radio.basic-item_icon-right, .icon-radio.basic-item_icon-left {
        margin-top: -10px; } }
  .medium.basic-item.forward:before, .medium.basic-item_icon-right, .medium.basic-item_icon-left {
    margin-top: -12px;
    margin-left: -6px; }

.basic-item.forward:before, .basic-item_icon-right, .basic-item_icon-bottom-right, .basic-item_icon-top-right {
  right: 1.2em; }
  .link-area_action.basic-item.forward:before, .link-area_action.basic-item_icon-right, .link-area_action.basic-item_icon-bottom-right, .link-area_action.basic-item_icon-top-right,
  .link-area_action .basic-item.forward:before,
  .link-area_action .basic-item_icon-right,
  .link-area_action .basic-item_icon-bottom-right,
  .link-area_action .basic-item_icon-top-right {
    right: .1em; }
    .link-area.non-stacking .link-area_action.basic-item.forward:before, .link-area.non-stacking .link-area_action.basic-item_icon-right, .link-area.non-stacking .link-area_action.basic-item_icon-bottom-right, .link-area.non-stacking .link-area_action.basic-item_icon-top-right, .link-area.non-stacking .link-area_action .basic-item.forward:before, .link-area.non-stacking .link-area_action .basic-item_icon-right, .link-area.non-stacking .link-area_action .basic-item_icon-bottom-right, .link-area.non-stacking .link-area_action .basic-item_icon-top-right {
      right: 1.2em; }
  @media print, (min-width: 768px) {
    .basic-item.forward:before, .basic-item_icon-right, .basic-item_icon-bottom-right, .basic-item_icon-top-right {
      right: 1.2em; }
      .link-area_action.basic-item.forward:before, .link-area_action.basic-item_icon-right, .link-area_action.basic-item_icon-bottom-right, .link-area_action.basic-item_icon-top-right,
      .link-area_action .basic-item.forward:before,
      .link-area_action .basic-item_icon-right,
      .link-area_action .basic-item_icon-bottom-right,
      .link-area_action .basic-item_icon-top-right {
        right: 1.2em; } }

.basic-item_icon-left {
  left: 1.2em; }
  .link-area_action.basic-item_icon-left,
  .link-area_action .basic-item_icon-left {
    left: .1em; }
  @media print, (min-width: 768px) {
    .basic-item_icon-left {
      left: 1.2em; }
      .link-area_action.basic-item_icon-left,
      .link-area_action .basic-item_icon-left {
        left: 1.2em; } }

/* ITEM

    Standalone Markup:
    <div class="basic-item">...</div>
    <a class="basic-item">...</div>

    Markup In an .item-container:
    Accommodate 3 patterns of markup. 
    Use direct descendant selector (>) to avoid affecting nested item-containers
    <ul class="item-container"><li><a class="basic-item">...
    <ul class="item-container"><li class="basic-item">...
    <div class="item-container"><a class="basic-item">...


    .basic-item                       An item, either standalone or in a item-container
                                [Module Parent]
    .no-deco                    Remove default border from top of basic-item
                                [Extends .basic-item]
    .deco-top-thick             Adds a thick top border
                                [Extends .basic-item]
    .deco-bottom-thick          Adds a thick bottom border
                                [Extends .basic-item]
    .forward                    Adds a chevron-right to indicate forward motion
                                [Extends .basic-item]
    .has-icon-right             Adjusts right padding when the basic-item contains an icon on the right side
                                [Extends .basic-item]
    .has-icon-left              Adjusts left padding when the basic-item contains an icon on the left side
                                [Extends .basic-item]

    .basic-item_title           A title for the item
                                [Child of .basic-item]
    
    .basic-item_icon-right      An icon positioned to the right of basic-item
                                This class controls the positioning of the icon.
                                [Child of .basic-item]
    .basic-item_icon-bottom-right     An icon positioned to the right of basic-item, in the bottom corner
                                This class controls the positioning of the icon.
                                [Child of .basic-item]
    .basic-item_icon-top-right        An icon positioned to the right of basic-item, in the top corner
                                This class controls the positioning of the icon.
                                [Child of .basic-item]
    .basic-item_icon-left             An icon positioned to the left of basic-item
                                This class controls the positioning of the icon.
                                [Child of .basic-item]

*/
.basic-item {
  display: block;
  position: relative;
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.1s ease;
  /*  
        ITEM with Layout -  ROW or TABLE-ROW
        Example markup:
        <ul class="item-container"><li><a class="basic-item row"><div class="col-md-6">...
        <ul class="item-container"><li class="basic-item table-row"><div class="table-cell">...
    */
  /*  
        WITH TABLE-CELL
        <div class="table-cell basic-item forward">
          Link
        </div>
    */
  /* WITH LINK-AREA_ACTION (which is indented on mobile)
        <div class="link-area_action basic-item forward">...
        
        <div class="link-area_action item-container">
            <a class="basic-item forward">...
            <a class="basic-item forward">...
    */ }
  .basic-item, .basic-item.tile {
    padding: 1.2em 1.2em; }
    @media print, (min-width: 768px) {
      .basic-item, .basic-item.tile {
        padding: 1em 1.2em; } }
  .basic-item.button-link {
    padding-top: 1.5em;
    padding-bottom: 1.5em; }
    @media print, (min-width: 768px) {
      .basic-item.button-link {
        padding-top: 1.4em;
        padding-bottom: 1.4em; } }
  .basic-item.padded {
    padding: 1.5em 1.2em; }
    @media print, (min-width: 768px) {
      .basic-item.padded {
        padding: 2em 2em; } }
  .basic-item.padded-horizontal {
    padding-left: 1.2em;
    padding-right: 1.2em; }
    @media print, (min-width: 768px) {
      .basic-item.padded-horizontal {
        padding-left: 2em;
        padding-right: 2em; } }
  .item-container.condensed > .basic-item,
  .item-container.condensed > li:not(.basic-item) > .basic-item {
    padding-top: 0.7em;
    padding-bottom: 0.7em; }
    @media print, (min-width: 768px) {
      .item-container.condensed > .basic-item,
      .item-container.condensed > li:not(.basic-item) > .basic-item {
        padding-top: 0.7em;
        padding-bottom: 0.7em; } }
  @media print, (min-width: 768px) {
    .item-container.condensed-md > .basic-item,
    .item-container.condensed-md > li:not(.basic-item) > .basic-item {
      padding-top: 0.7em;
      padding-bottom: 0.7em; } }
  .item-container > .basic-item,
  .item-container > li:not(.basic-item) > .basic-item {
    border: none;
    border-color: var(--border-light-gray);
    border-top-style: solid;
    border-width: 1px; }
  .item-container > .basic-item:first-child,
  .item-container > li:first-child > .basic-item {
    border-top-width: 0; }
  [class*=item-container-] > .basic-item,
  [class*=item-container-] > li:not(.basic-item) > .basic-item {
    margin-bottom: .7em;
    border-radius: 3px;
    border: 1px solid var(--border-gray-87);
    background-color: var(--bg-white);
    box-shadow: var(--box-shadow); }
  .item-container-unattached.spaced > .basic-item,
  .item-container-unattached.spaced > li:not(.basic-item) > .basic-item {
    margin-bottom: 1.4em; }
  @media print, (min-width: 768px) {
    .item-container-convertible > .basic-item,
    .item-container-convertible > li:not(.basic-item) > .basic-item {
      margin-bottom: 0;
      box-shadow: none;
      border: none;
      border-color: var(--border-light-gray);
      border-top-style: solid;
      border-width: 1px; }
    .item-container-convertible > .basic-item:first-child,
    .item-container-convertible > li:first-child > .basic-item {
      border-top-width: 0; }
    .item-container > .basic-item > .table-cell {
      border: none;
      border-color: var(--border-light-gray);
      border-top-style: solid;
      border-width: 1px; }
    .item-container > .basic-item:first-child > .table-cell,
    .item-container-convertible > .basic-item:first-child > .table-cell {
      border-top-width: 0; }
    .item-container-convertible > .basic-item > .table-cell {
      border-top: 1px solid var(--border-light-gray); }
      .item-container-convertible > .basic-item > .table-cell[class*="bg-"] {
        border-top-color: var(--border-white-opacity-20); }
      .item-container-convertible > .basic-item > .table-cell.bg-faint-gray {
        border-top-color: var(--border-gray-90); } }
  .basic-item.no-deco {
    border: none; }
  .basic-item.deco-top-thick {
    border-top-width: 3px !important; }
  .basic-item.deco-bottom-thick {
    border-bottom-width: 3px !important;
    border-bottom-style: solid !important; }
  .basic-item.has-icon-right {
    padding-right: 3em; }
  .basic-item.has-icon-left {
    padding-left: 3em; }
  .basic-item.forward {
    padding-right: 3em !important; }
    .basic-item.forward:before {
      content: "\e603"; }
      @media print {
        .basic-item.forward:before {
          content: none; } }
    .basic-item.forward [class*=col-] .currency.right {
      position: absolute;
      right: -1.4em; }
      @media print, (min-width: 480px) {
        .basic-item.forward [class*=col-] .currency.right {
          position: relative;
          right: auto; } }
  .basic-item_title {
    font-size: 1.8rem;
    font-weight: 500; }
    @media print, (min-width: 768px) {
      .basic-item_title {
        font-size: 1.6rem; } }
  .basic-item_icon-bottom-right {
    position: absolute;
    bottom: 1.2em;
    margin-bottom: -2px; }
    @media print, (min-width: 768px) {
      .basic-item_icon-bottom-right {
        bottom: 1em; } }
  .basic-item_icon-top-right {
    position: absolute;
    top: 1.2em; }
    @media print, (min-width: 768px) {
      .basic-item_icon-top-right {
        top: 1em; } }
  .basic-item.row {
    padding-top: 0.7em;
    padding-bottom: 0.7em;
    padding-left: 0;
    padding-right: 0;
    margin-left: 0;
    margin-right: 0;
    display: -ms-flexbox;
    display: flex; }
    @media print, (min-width: 768px) {
      .basic-item.row {
        padding-top: 1em;
        padding-bottom: 1em; } }
    .basic-item.row > [class*=col-] {
      padding-top: 0.4em;
      padding-bottom: 0.4em; }
      @media print, (min-width: 768px) {
        .basic-item.row > [class*=col-] {
          padding-top: 0;
          padding-bottom: 0; } }
  .basic-item.table-row {
    padding-top: 0.7em;
    padding-bottom: 0.7em;
    padding-left: 0;
    padding-right: 0;
    margin-left: 0;
    margin-right: 0; }
    @media print, (min-width: 768px) {
      .basic-item.table-row {
        padding-top: 1em;
        padding-bottom: 1em; } }
  .basic-item.table-cell {
    vertical-align: middle !important;
    white-space: nowrap; }
  .basic-item.link-area_action,
  .link-area_action > .basic-item {
    padding-left: .4em;
    padding-right: .4em; }
    @media print, (min-width: 768px) {
      .basic-item.link-area_action,
      .link-area_action > .basic-item {
        padding-left: 1.2em;
        padding-right: 1.2em; } }
  a.basic-item {
    text-decoration: none; }
    .hover a.basic-item:hover,
    .hover a.basic-item:focus,
    .hover a.basic-item:active, a.basic-item.active {
      background: var(--bg-faint-gray); }
      .hover a.basic-item:hover hr,
      .hover a.basic-item:focus hr,
      .hover a.basic-item:active hr, a.basic-item.active hr {
        border-bottom-color: var(--bg-faint-gray);
        border-top-color: var(--border-gray-90); }
  .item-container[class*="bg-"] .basic-item,
  .item-container[class*="bg-"] > li:not(.basic-item) > .basic-item {
    border-color: var(--border-white-opacity-20);
    color: var(--text-white); }
  .item-container > .basic-item.bg-faint-gray {
    border-color: var(--border-gray-90); }
  .hover .item-container[class*="bg-"] a.basic-item:hover,
  .hover .item-container[class*="bg-"] a.basic-item:focus,
  .hover .item-container[class*="bg-"] a.basic-item:active, .item-container[class*="bg-"] a.basic-item.active {
    background-color: var(--bg-black-opacity-10);
    color: var(--text-white); }
  .hover .item-container[class*="bg-"] a.basic-item:focus {
    outline-offset: -2px;
    outline: 1px dotted var(--focus-outline-white-opacity-70); }
  .basic-item > :last-child {
    margin-bottom: 0; }

/* DECO (Borders & Underlines)
     
    .deco-top      Apply border-top to an element
    .deco-bottom   Apply border-bottom to an element
    .deco-left     Apply border-left to an element
    .deco-right    Apply border-right to an element

    .deco-top-white     Apply a white border-top to an element
    .deco-bottom        Apply a white border-bottom to an element
    .deco-left          Apply a white border-left to an element
    .deco-right         Apply a white border-right to an element

    .deco-left-*   Responsive deco-left classes. Only apply left border at * and larger sizes.

    .no-deco       Remove the underline or border(s) on an element
*/
.deco-top {
  border-top: 1px solid var(--border-light-gray); }
  .deco-top-white {
    border-top: 1px solid var(--border-white); }
  .deco-top-sm, .deco-top-md, .deco-top-lg, .deco-top-xl {
    border-left: none; }
  h1.deco-top, .deco-top.looks-like-h1, h2.deco-top, .deco-top.looks-like-h2, h3.deco-top, .deco-top.looks-like-h3, h4.deco-top, .deco-top.looks-like-h4, h5.deco-top, h6.deco-top {
    padding-top: .3571em;
    margin-top: 1em; }

.deco-bottom {
  border-bottom: 1px solid var(--border-light-gray); }
  .deco-bottom-white {
    border-bottom: 1px solid var(--border-white); }
  h1.deco-bottom, .deco-bottom.looks-like-h1, h2.deco-bottom, .deco-bottom.looks-like-h2, h3.deco-bottom, .deco-bottom.looks-like-h3, h4.deco-bottom, .deco-bottom.looks-like-h4, h5.deco-bottom, h6.deco-bottom {
    padding-bottom: .3571em; }

.deco-left {
  border-left: 1px solid var(--border-light-gray); }
  .deco-left-white {
    border-left: 1px solid var(--border-white); }
  @media (min-width: 480px) {
    .deco-left-sm {
      border-left: 1px solid var(--border-light-gray); } }
  @media print, (min-width: 768px) {
    .deco-left-md {
      border-left: 1px solid var(--border-light-gray); } }
  @media (min-width: 980px) {
    .deco-left-lg {
      border-left: 1px solid var(--border-light-gray); } }
  @media (min-width: 1260px) {
    .deco-left-xl {
      border-left: 1px solid var(--border-light-gray); } }

.deco-right {
  border-right: 1px solid var(--border-light-gray); }
  .deco-right-white {
    border-right: 1px solid var(--border-white); }
  @media (min-width: 480px) {
    .deco-right-sm {
      border-right: 1px solid var(--border-light-gray); } }
  @media print, (min-width: 768px) {
    .deco-right-md {
      border-right: 1px solid var(--border-light-gray); } }
  @media (min-width: 980px) {
    .deco-right-lg {
      border-right: 1px solid var(--border-light-gray); } }
  @media (min-width: 1260px) {
    .deco-right-xl {
      border-right: 1px solid var(--border-light-gray); } }

.no-deco {
  border: none !important; }
  a.no-deco,
  .hover a.no-deco:active,
  .hover a.no-deco:hover,
  .hover a.no-deco:focus,
  a.no-deco.active {
    text-decoration: none; }

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

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

/*DECORATIVE LINE
    Use the decorative line classes when a line helps fill the space and aid the eye in grouping content on larger screen sizes, 
    but adds too much visual clutter on smaller screens.

    .decorative-line-sm     A decorative line that shows on sm, md, lg, xl screens.
                            Does not show on xs screens.
    .decorative-line-md     A decorative line that shows on md, lg, xl screens.
                            Does not show on xs, sm screens.
    .decorative-line-lg     A decorative line that shows on lg, xl screens.
                            Does not show on xs, sm, md screens.
    .decorative-line-xl     A decorative line that shows on xl screens.
                            Does not show on xs, sm, md, lg screens.

*/
.decorative-line-sm, .decorative-line-md, .decorative-line-lg, .decorative-line-xl {
  display: none; }

@media print, (min-width: 480px) {
  .decorative-line-sm {
    display: block; } }

@media print, (min-width: 768px) {
  .decorative-line-md {
    display: block; } }

@media (min-width: 980px) {
  .decorative-line-lg {
    display: block; } }

@media (min-width: 1260px) {
  .decorative-line-xl {
    display: block; } }

/* LINK AREA 

    Example markup:
    <a href="..." class="link-area">
        <div class="link-area_content">...</div>
        <div class="link-area_action">...</div>
    </a>
               


    .link-area                      A clickable/tappable area of content 
                                    Consists of two parts - the content and the action
                                    On MD, LG, XL - both items appear in a row
                                    On SM, XS - the action appears below the content
                                    [Module parent]
    .non-stacking                   The content and action appear in a row on all screen sizes
                                    [Extends .link-area]

    .condensed                      Condense the vertical spacing

    .link-area_content              The content portion of the link area
                                    [Child of .link-area]
    
    .link-area_action                A container for the actionable part of the link-area, containing one or more .basic-item or other action such as buttons
                                    [Child of .link-area]
*/
.link-area {
  display: block;
  /*
        Example markup:
        <a class"box link-area">...
        <a class="tile link-area">...
        <div class="tile"><a class="link-area">...
        <ul class="item-container"><li><a href="..." class="basic-item link-area">...
    */ }
  @media print, (min-width: 768px) {
    .link-area {
      display: -ms-flexbox;
      display: flex;
      -ms-flex-direction: row;
      flex-direction: row;
      word-wrap: break-word; }
      .link-area.basic-item {
        display: -ms-flexbox;
        display: flex; } }
  .link-area.deco {
    border-radius: 3px;
    border: 1px solid var(--border-gray-87); }
  .link-area.non-stacking {
    display: -ms-flexbox;
    display: flex; }
  a.link-area {
    text-decoration: none; }
    .hover a.link-area:hover,
    .hover a.link-area:focus,
    .hover a.link-area:active, a.link-area.active {
      background: var(--bg-faint-gray); }
      .hover a.link-area:hover hr,
      .hover a.link-area:focus hr,
      .hover a.link-area:active hr, a.link-area.active hr {
        border-bottom-color: var(--border-faint-gray);
        border-top-color: var(--border-gray-90); }
    a.link-area:focus {
      outline-style: solid; }
  .link-area.box, .link-area[class*="box-"], .link-area.tile, .link-area.basic-item {
    padding: 0 !important; }

.link-area_content {
  padding: 1.2em 1.2em; }
  @media print, (min-width: 768px) {
    .link-area_content {
      padding: 1em 1.2em; } }
  .link-area.condensed .link-area_content {
    padding-top: 0.7em;
    padding-bottom: 0.7em; }
    @media print, (min-width: 768px) {
      .link-area.condensed .link-area_content {
        padding-top: 0.7em;
        padding-bottom: 0.7em; } }
  .link-area_content.row {
    padding-top: 0.7em;
    padding-bottom: 0.7em;
    padding-left: 0;
    padding-right: 0;
    margin-left: 0;
    margin-right: 0;
    display: -ms-flexbox;
    display: flex; }
    @media print, (min-width: 768px) {
      .link-area_content.row {
        padding-top: 1em;
        padding-bottom: 1em; } }
    .link-area_content.row > [class*=col-] {
      padding-top: 0.4em;
      padding-bottom: 0.4em; }
      @media print, (min-width: 768px) {
        .link-area_content.row > [class*=col-] {
          padding-top: 0;
          padding-bottom: 0; } }
  .link-area_content.table-row {
    padding-top: 0.7em;
    padding-bottom: 0.7em;
    padding-left: 0;
    padding-right: 0;
    margin-left: 0;
    margin-right: 0; }
    @media print, (min-width: 768px) {
      .link-area_content.table-row {
        padding-top: 1em;
        padding-bottom: 1em; } }
  @media print, (min-width: 768px) {
    .link-area_content {
      -ms-flex-positive: 1;
      flex-grow: 1;
      min-width: 0; } }
  .link-area.non-stacking .link-area_content {
    -ms-flex-positive: 1;
    flex-grow: 1;
    min-width: 0; }

.link-area_action {
  border: none;
  border-top: 1px solid var(--border-light-gray);
  margin-left: 1.2em;
  margin-right: 1.2em;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  width: auto;
  padding: 1.2em 1.2em; }
  @media print, (min-width: 768px) {
    .link-area_action {
      padding: 1em 1.2em; } }
  .link-area_action.item-container {
    padding: 0; }
  .link-area.non-stacking .link-area_action {
    border-top: none;
    margin-left: 0;
    margin-right: 0; }
  @media print, (min-width: 768px) {
    .link-area_action {
      display: -ms-flexbox;
      display: flex;
      -ms-flex-direction: column;
      flex-direction: column;
      -ms-flex-pack: center;
      justify-content: center;
      border-top: none;
      margin-left: 0;
      margin-right: 0; }
      .link-area_action.justify-content-flex-start {
        -ms-flex-pack: start;
        justify-content: flex-start; } }

/* TAB TITLE
        .tab-title     A title that looks like a tab
                       Good for use in item-containers
                       [Module parent]
  
*/
.tab-title {
  display: block;
  height: 1.1429em;
  line-height: 1;
  padding: 0 1.1em;
  border-radius: .7em;
  z-index: 1; }
  .basic-item .tab-title {
    text-align: center;
    position: absolute;
    top: -.6429em;
    left: 0;
    right: 0;
    width: 125px;
    margin: 0 auto;
    padding-left: .9286em; }
    @media print, (min-width: 768px) {
      .basic-item .tab-title {
        position: absolute;
        top: -.6429em;
        padding-left: 1.4286em; } }

/*     
    .has-tab-title    Moves the first <li> that contains a .tab-title up to land on the top border of the item-container.
                      [Extends .item-container] 
*/
.item-container.has-tab-title {
  margin-top: 1rem; }
  .item-container.has-tab-title li:first-child {
    margin-top: -1rem; }

/*   
    PLACHOLDER NAV STYLES
    These placeholder rules will not generate CSS on their own.
    Must be used with the @extend directive.

    %nav                Base styles for navigation lists
                        [Placeholder Selector]
    
    %nav-horizontal     Additional base styles for horizontal navigation lists
                        [Placeholder Selector]
*/
.nav, .nav-horizontal,
.nav ul,
.nav-horizontal ul,
.nav li,
.nav-horizontal li {
  margin: 0;
  padding: 0; }


.nav li,
.nav-horizontal li {
  list-style: none; }

.nav-horizontal:before, .nav-horizontal:after {
  display: table;
  content: ""; }

.nav-horizontal:after {
  clear: both; }

.nav-horizontal li {
  float: left; }

.nav-horizontal .nav_item {
  text-align: center; }

/* NAVIGATION 
    .nav                A vertical list (li or ol) that contains navigation
                        [Module parent]
    
    .nav-horizontal     A horizontal nav
                        [Module Parent] 
    
    .nav_item           Normally a link (could be another element) in the navigation that is an undecorated, block element
                        [Child of .nav; Child of .nav-horizontal;]
    
*/
.nav_item {
  display: block; }
  .nav_item:focus {
    outline-style: solid; }
  .nav_item,
  .hover .nav_item:hover,
  .hover .nav_item:focus,
  .hover .nav_item:active, .nav_item.active {
    text-decoration: none; }

/* NAV 
    .nav-group                  A container for a group of nav items on a dark background
                                [Module parent]
    .nav-group_item             A single item in the nav
                                [Child of .nav-group]
    .nav-group_item_text        The text for the .nav-group item
                                [Child of .nav-group_item]
*/
.nav-group {
  background: transparent;
  border-bottom: 3px solid var(--border-gray-88);
  font: 1.6rem; }
  @media (min-width: 768px) {
    .nav-group {
      font: 1.4rem; } }
  .nav-group.deco-top-thick {
    border-top: 2px solid var(--border-gray-88); }
  .nav-group.whats-new-parent {
    border-bottom: 1px solid var(--border-gray-88);
    border-top: 1px solid var(--border-gray-88); }
    .nav-group.whats-new-parent .whats-new-link:hover,
    .nav-group.whats-new-parent .whats-new-link:focus,
    .nav-group.whats-new-parent .whats-new-link:active {
      background: var(--bg-gray-54-opacity-35); }
    .nav-group.whats-new-parent .whats-new-badge {
      color: var(--bg-primary); }

.nav-group_item,
a.nav-group_item {
  color: var(--text-gray);
  display: block;
  position: relative;
  line-height: normal;
  border-top: 1px solid var(--border-gray-88);
  padding: 1.4em 1em 1.3em 1.3em;
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.1s ease; }
  .nav-group_item.active,
  a.nav-group_item.active {
    background: var(--bg-gray-54-opacity-25); }
  .nav-group_item.deco-bottom-thick,
  a.nav-group_item.deco-bottom-thick {
    border-bottom: 2px solid var(--border-gray-88); }

a.nav-group_item {
  cursor: pointer;
  text-decoration: none; }
  .hover a.nav-group_item:hover,
  .hover a.nav-group_item:focus,
  .hover a.nav-group_item:active {
    background: var(--bg-gray-54-opacity-35);
    color: var(--text-gray); }
  .hover a.nav-group_item:active {
    background: var(--bg-gray-54-opacity-25);
    color: var(--text-gray); }
  .hover a.nav-group_item:focus {
    outline-color: var(--focus-outline-white-opacity-70); }

.nav-group_item_text {
  font-weight: 500; }

/* PROGRESS NAVIGATION
    .nav-progress               A horizontal nav with forward arrows indicating progress through a workflow
                                [Module Parent]

    .done                       A progress nav that has reached the final step.
                                All dots, titles, and lines are green.
                                [child of .nav-progress]

    .nav-progress_title         Centered title for the current step. Color should match done-itude.
                                [child of .nav-progress]

    .nav-progress_block         A single nav item with a top border.
                                [child of .nav-progress]

    .step-done                   The nav item that represents the current step.
                                Filled with a brighter colored background.
                                Contains words to describe the current step.
                                [Extends .nav-progress_block]

    .nav-progress_dot           The dots on the nav
                                The dots match the step progress (empty gray circle for not done, orange for done)
                                                                
    .first                      The first nav dot.
                                This item is positioned at the top left of the progress bar


*/
.nav-progress {
  margin: 2rem auto;
  width: 70%; }
  .nav-progress .nav-progress_title {
    font-size: 1.6rem;
    color: var(--text-gray-34);
    font-weight: 500;
    text-align: center;
    margin-bottom: 20px; }
    .nav-progress .nav-progress_title .nav-progress_subtitle {
      font-size: 1.4rem;
      color: var(--text-gray-45);
      font-weight: 500; }
  .nav-progress .nav-progress_block {
    border-top: 5px solid var(--border-gray-54);
    position: relative;
    max-width: 150px; }
    .nav-progress .nav-progress_block.step-done {
      border-top: 5px solid var(--border-primary); }
  .nav-progress .step-done .nav-progress_dot {
    background-color: var(--bg-primary);
    border: none; }
  .nav-progress.done .nav-progress_title {
    color: var(--text-primary); }
  .nav-progress.done .nav-progress_block {
    border-top: 5px solid var(--border-primary); }
  .nav-progress.done .nav-progress_dot {
    background-color: var(--bg-primary);
    border: none; }

.nav-progress_dot {
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background-color: var(--bg-white);
  border: 2px solid var(--border-gray-54);
  box-shadow: 0 0 0 3px var(--bg-white);
  z-index: 1;
  position: absolute;
  top: -10px;
  right: 0px; }
  .nav-progress_dot.first {
    top: -5px;
    left: 2px;
    position: relative;
    background-color: var(--bg-primary);
    border: none; }

/* NAV Accounts

    .nav-account                A container for a group of nav account items has a transparent background to see the gradient or bokeh dots
                                [Module parent]
    .nav-account_item           The individual account items and container for the details for the account
                                [Child of .nav-account]
    .nav-account_item_name      Nickname of account
                                [Child of .nav-account_item]
*/
.nav-account {
  padding: 0 1.3em .5em;
  background: transparent;
  position: relative; }
  .nav-account .deco-left {
    border-left: 1px solid var(--border-gray-85); }
  .nav-account .deco-top {
    border-top: 1px solid var(--border-gray-85); }

a.nav-account_item {
  position: relative;
  display: block;
  padding: .7em .7em .7em 48px;
  border-bottom: 1px solid var(--border-gray-85);
  text-decoration: none;
  color: var(--text-gray);
  cursor: pointer;
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.1s ease; }
  a.nav-account_item:first-child {
    margin-top: .35em;
    border-top: 1px solid var(--border-gray-88); }
  a.nav-account_item:last-child {
    border-bottom: none; }
  @media print, (min-width: 768px) {
    a.nav-account_item {
      margin-left: 0;
      margin-right: 0; } }
  .hover a.nav-account_item:active,
  .hover a.nav-account_item:focus,
  .hover a.nav-account_item:hover {
    background: var(--bg-gray-54-opacity-35);
    color: var(--text-gray); }
  a.nav-account_item.active {
    background: var(--bg-gray-54-opacity-25); }
  .hover a.nav-account_item:focus {
    outline-color: var(--focus-outline); }

.nav-account_item .ribbon {
  top: 50%;
  transform: translateY(-50%) !important;
  margin-left: 1em; }

.nav-account_item_name {
  font-size: 1.4rem;
  font-weight: 500; }

.nav-account_item .currency_dollars {
  font-size: 2.0rem;
  font-weight: 500; }

.nav-account_item .currency_symbol,
.nav-account_item .currency_cents {
  font-size: 1.4rem;
  font-weight: 700; }

/* NAV Header

    .nav-header                 A container for a group of nav header
                                [Module parent]
    .nav-header_link            The logout button (large screens only) and settings link 
                                [Child of .nav-header]

*/
.nav-header {
  padding: .75em .75em 0;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: nowrap;
  flex-wrap: nowrap;
  -ms-flex-align: center;
  align-items: center;
  -ms-flex-pack: end;
  justify-content: flex-end; }
  @media (min-width: 1260px) {
    .nav-header {
      display: none; } }
  .nav-header_link {
    padding: .2em .5em;
    border-radius: 3px;
    overflow: hidden;
    text-decoration: none;
    text-align: center;
    color: var(--text-gray);
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.1s ease;
    border-color: var(--border-gray-85); }
    .short-header-visible .nav-header_link {
      color: var(--text-white); }
    button.nav-header_link {
      line-height: 1;
      padding-top: .45em;
      padding-bottom: .5em; }
    .hover .nav-header_link:hover,
    .hover .nav-header_link:focus,
    .hover .nav-header_link:active, .nav-header_link.active, .hover
    a.nav-header_link:hover,
    .hover
    a.nav-header_link:focus,
    .hover
    a.nav-header_link:active,
    a.nav-header_link.active {
      color: var(--text-gray-34);
      background: var(--bg-gray-54-opacity-25); }
    .nav-header_link.active,
    a.nav-header_link.active {
      color: var(--text-gray-34);
      background: var(--bg-gray-54-opacity-25); }
    .short-header-visible.hover .nav-header_link:hover,
    .short-header-visible.hover .nav-header_link:focus,
    .short-header-visible.hover .nav-header_link:active,
    .short-header-visible .nav-header_link.active, .short-header-visible.hover
    a.nav-header_link:hover,
    .short-header-visible.hover
    a.nav-header_link:focus,
    .short-header-visible.hover
    a.nav-header_link:active,
    .short-header-visible
    a.nav-header_link.active {
      color: var(--text-white);
      background: var(--bg-black-opacity-20); }
    @media print, (min-width: 768px) {
      .nav-header_link .icon-cog {
        position: relative;
        top: 2px; } }
  .nav-header_pipe {
    border-left: 1px solid var(--border-gray-85); }

/* NAV

    .nav-link       An anchor tag in the main nav (Profile & Services, Messages, All Accounts...)
                    [Module Parent]

    .nav-link-icon  An icon in the main nav (Notifications Icon and Secure Messages) with badges
                    [Module Parent]

*/
.nav-link, .nav-link-icon {
  text-decoration: none;
  text-align: center;
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.1s ease;
  border-radius: 3px;
  padding: .2em .5em; }

.nav-link {
  display: block;
  color: var(--text-gray-34); }
  .hover a.nav-link:hover,
  .hover a.nav-link:focus,
  .hover a.nav-link:active {
    background: var(--bg-gray-54-opacity-35); }
  a.nav-link.active {
    background: var(--bg-gray-54-opacity-25); }
  .nav-link-icon {
    display: inline-block;
    color: var(--text-gray-34);
    margin-left: .5em; }
    .nav-link-icon.first {
      margin-left: 0; }
    .nav-link-icon.deco {
      border: 1px solid var(--border-gray-85); }
    .hover a.nav-link-icon:hover,
    .hover a.nav-link-icon:focus,
    .hover a.nav-link-icon:active {
      color: var(--text-gray-34);
      background: var(--bg-gray-54-opacity-35); }
    a.nav-link-icon.active {
      color: var(--text-gray-34);
      background: var(--bg-gray-54-opacity-25); }
    .nav-link-icon .icon-mail-outline:before {
      position: relative;
      font-size: 24px; }
    .nav-link-icon .icon-mail-outline + .badge {
      position: relative;
      left: -12px;
      top: -8px; }
    .nav-link-icon .icon-notification-outline:before {
      position: relative;
      font-size: 22px; }
    .nav-link-icon .icon-notification-outline + .badge {
      position: relative;
      left: -12px;
      top: -8px; }
    .nav-link-icon .icon-card:before {
      position: relative;
      font-size: 22px;
      margin-left: 0;
      right: -2px; }
    .nav-link-icon .icon-card + .badge {
      position: relative;
      top: -8px;
      left: -12px;
      margin-right: -18px; }
    .nav-link-icon .icon-more-horizontal:before {
      position: relative;
      font-size: 22px;
      margin-left: 0; }

/* DROPDOWN 
    .dropdown           A container for content that is hidden by default (i.e. select list or flyout menu)
                        This class is just for controlling the content that shows/hides. The trigger to get the content to show/hide is controlled via other classes, i.e. input-select or .flyout)
                        Sets the positioning context for .dropdown_content on large screens.                    
                        Takes over the whole viewport and applies a dark background on smalls screens.        
                        [Module parent]
    //TOOD: REMOVE, no longer have pill buttons
    .under-pill-btn     Indents the drop down menu content so it sits under the flat edge of the button only (not under the rounded edges on left and right which looks weird)
                        [Extends .dropdown]

    .dropdown_content   Content drops down below on medium and large screens, like a traditional HTML select element.
                        Content pops up as an overlay box on small screens, like a modal.
                        [Child of .dropdown]
                        [Must to be extended with other styles to apply background colors, borders, shadows etc., i.e. .input-select_list or .flyout_content]
     
*/
.dropdown.open {
  position: fixed;
  z-index: 10000;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--bg-gray-20-opacity-50);
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch; }
  @media print, (min-width: 768px) {
    .dropdown.open {
      position: relative;
      overflow: visible; } }

.dropdown_content {
  display: none; }
  .dropdown.open .dropdown_content {
    display: block;
    position: relative;
    margin: 3% 2%;
    width: 96%;
    min-height: 94%;
    background: var(--bg-white);
    border-radius: .2143em;
    box-shadow: 0 0 1px 0 var(--box-shadow-level-20); }
    @media print, (min-width: 768px) {
      .dropdown.open .dropdown_content {
        position: absolute;
        top: 0;
        left: 0;
        margin: 0;
        width: 100%;
        height: auto;
        min-height: 0; } }
  @media print, (min-width: 768px) {
    .dropdown.open.under-pill-btn .dropdown_content {
      margin: 0 4%;
      width: 92%; } }

/* FEEDBACK OVERLAY 
    .feedback-overlay           A wrapper div for any feedback in a particular container. This overlay will almost white out the content behind the feedback.
                                Example is used on the Notifications Management page
     
*/
.feedback-overlay {
  position: absolute;
  margin-left: -2px;
  margin-right: -3px;
  top: 0;
  left: 0;
  background: var(--bg-white-opacity-80);
  z-index: 1;
  width: 101%;
  height: 100%;
  overflow: hidden; }
  @media (max-width: 979px) {
    .page-content .feedback-overlay .box-left-cap {
      border-left: 1px solid var(--border-gray-87);
      border-right: 1px solid var(--border-gray-87); } }

/*
    FLYOUT

    .flyout                     A container for a clickable/tapple trigger, and associated content that is hidden by default
                                This class is for visual styling of the trigger and content.                         
                                The show/hide and positioning of associated content is controlled by a functional class, i.e. .dropdown or .popup.
                                [Module parent]
    .flyout_trigger             The element that when clicked/tapped causes the content to appear. (Controlled via Javascript toggle of .open class.)
                                [Child of .flyout]
    .flyout_content             The content 
                                [Child of .flyout, Extends .dropdown_content or. popup_content]
    .flyout_content_title       The content title
                                Displays on small screens to give context to the content
                                [Child of .flyout_content]
*/
.flyout_trigger {
  cursor: pointer; }

.flyout_content {
  text-align: left;
  min-width: 16em;
  /* ITEM CONTAINER INSIDE A FLYOUT */ }
  @media print, (min-width: 768px) {
    .flyout_content {
      border: 1px solid var(--border-gray-87); }
      .flyout_content.dark {
        border: none;
        border-radius: 0; } }
  .flyout_content_title {
    padding: 1.2em 1.2em;
    padding-right: 3em;
    padding-left: 2rem;
    margin-bottom: 0;
    border-radius: 3px 3px 0 0; }
    @media print, (min-width: 768px) {
      .flyout_content_title {
        padding: 1em 1.2em;
        padding-right: 3em;
        padding-left: 2rem; } }
    .flyout_content_title, .flyout_content_title_text {
      margin: 0;
      color: var(--text-primary);
      font-size: 1.8rem;
      font-weight: 500; }
      @media print, (min-width: 768px) {
        .flyout_content_title, .flyout_content_title_text {
          font-size: 1.6rem; } }
    @media print, (min-width: 768px) {
      .flyout_content_title {
        display: none; } }
  .flyout_content_close {
    position: absolute;
    top: 0;
    right: 0;
    padding: 1.2em 1.2em;
    color: var(--text-light-gray);
    text-decoration: none;
    z-index: 9100; }
    @media print, (min-width: 768px) {
      .flyout_content_close {
        padding: 1em 1.2em; } }
    .flyout_content_close.active {
      /* class added via javascript on tap for touch devices for visual feedback that item was tapped */
      background-color: var(--bg-faint-gray); }
    @media print, (min-width: 768px) {
      .flyout_content_close {
        display: none; } }
  .flyout_content .item-container.condensed .basic-item {
    padding-top: 1.2em;
    padding-bottom: 1.2em; }
    @media print, (min-width: 768px) {
      .flyout_content .item-container.condensed .basic-item {
        padding-top: 0.7em 1.2em;
        padding-bottom: 0.7em 1.2em; } }

/*  MODAL 
    .modal                      A container for content that pops up as a modal box above page content.
                                Takes over the whole viewport and applies a dark background.
                                [Module parent]
    .modal.open                 A class applied via javascript when the modal is open
                                [Extends .modal]
    .modal.force-interaction    Hide the "X" for modals that don't allow closing without taking some action
                                [Extends .modal]
    .modal_content              The content sits on top of the dark background.
                                [Child of .modal]
    .modal_close                The close "X" in the upper right hand corner
                                [Child of .modal_content]

    
    .narrow                     Display the modal at a narrow width on md+ screen sizes
                                [Extends .modal]
    .wide                       Display the modal at a wide width on md+ screen sizes
                                [Extends .modal]
    .mini                       Display the modal at a mini width and height on all screen sizes
                                Only use when the modal content is very short
                                [Extends .modal]


*/
.modal.open {
  position: fixed;
  z-index: 9000;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--bg-gray-20-opacity-50);
  overflow-x: hidden;
  overflow-y: -moz-scrollbars-vertical;
  overflow-y: scroll;
  -webkit-overflow-scrolling: auto; }

@media (max-width: 979px) {
  .modal.open.mini {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: center;
    justify-content: center;
    -ms-flex-align: center;
    align-items: center; } }

@media print {
  .modal {
    display: none; } }

.modal_content {
  display: none; }
  .modal.open .modal_content {
    display: block;
    position: relative;
    margin: 3% 2%;
    width: 96%;
    min-height: 94%;
    background: var(--bg-white);
    border-radius: .2143em;
    box-shadow: 0 0 0.2857em var(--box-shadow-level-20); }
  .modal.open.mini .modal_content {
    min-height: 0;
    width: 300px;
    max-width: 95%;
    max-height: 95%;
    overflow-y: auto;
    overflow-x: hidden; }
  @media print, (min-width: 768px) {
    .modal.open .modal_content {
      margin: 5% 20%;
      width: 60%;
      min-height: 0; }
    .modal.open.narrow .modal_content {
      margin: 5% 30%;
      width: 40%; }
    .modal.open.wide .modal_content {
      margin: 5% 10%;
      width: 80%; }
    .modal.open.mini .modal_content {
      margin: 5% auto;
      width: 300px; } }
  @media (min-width: 980px) {
    .modal.open .modal_content {
      margin: 5% 25%;
      width: 50%; }
    .modal.open.narrow .modal_content {
      margin: 5% 35%;
      width: 30%; }
    .modal.open.wide .modal_content {
      margin: 5% 15%;
      width: 70%; } }
  @media (min-width: 1260px) {
    .modal.open .modal_content {
      margin: 5% 30%;
      width: 40%; }
    .modal.open.narrow .modal_content {
      margin: 5% 37%;
      width: 26%; }
    .modal.open.wide .modal_content {
      margin: 5% 22%;
      width: 56%; } }

.modal_title {
  padding: 1.2em 1.2em;
  padding-right: 3em;
  padding-left: 2rem;
  margin-bottom: 0;
  border-radius: 3px 3px 0 0;
  border-bottom: 1px solid var(--border-light-gray); }
  @media print, (min-width: 768px) {
    .modal_title {
      padding: 1em 1.2em;
      padding-right: 3em;
      padding-left: 2rem; } }
  .modal_title, .modal_title_text {
    margin: 0;
    color: var(--text-primary);
    font-size: 1.8rem;
    font-weight: 500; }
    @media print, (min-width: 768px) {
      .modal_title, .modal_title_text {
        font-size: 1.6rem; } }
  .modal.force-interaction .modal_title {
    padding-right: 1.25em; }

.modal_close {
  position: absolute;
  top: 0;
  right: 0;
  padding: 1.2em 1.2em;
  color: var(--text-light-gray);
  text-decoration: none;
  z-index: 9100; }
  @media print, (min-width: 768px) {
    .modal_close {
      padding: 1em 1.2em; } }
  .modal_close.active {
    /* class added via javascript on tap for touch devices for visual feedback that item was tapped */
    background-color: var(--bg-faint-gray); }
  .modal.force-interaction .modal_close {
    display: none; }

/* BODY SCROLLING 
 
    body                Add a dummy scroll bar to the body even if the page is shorter than the viewport. 
                        LG, XL (Desktop) only
                        If something dynamically changes on the page causing it's height to exceed the height of the viewport, the page won't jump.
                        This is especially helpful on the WB Dashboard when organizing widgets.

    body.modal-open     Prevent body scrolling when .modal is open. 
                        Note: Prevents scrolling on desktop only. Has no effect on mobile devices.
                        This hides the scrollbar on the body, however the .modal it has its own scrollbar (dummy or real depending on its height) which takes the place of the body's scrollbar. 
                        This makes for a smooth transition (although the body does jump slightly horizontally when its scrollbar disappears.)

*/
@media (min-width: 980px) {
  body {
    overflow-y: -moz-scrollbars-vertical;
    overflow-y: scroll; } }

body.modal-open {
  overflow: hidden; }

/* MODAL HEIGHT FIX */
body.modal-open.dropdown-open .modal {
  min-height: 105%; }
  @media print, (min-width: 768px) {
    body.modal-open.dropdown-open .modal {
      min-height: 0; } }

/* POPOVER

    .popover-container          A container for the popover to set positioning
                                [Module parent]  
    .active                     A class applied via javascript when the popover is open
                                [Extends .popover-container]

    .popover-trigger            The icon or text that opens the popup when clicked.
                                [Module parent]
    
    .popover                    A container for the contents of the popover                         
                                [Module parent]

    .popover_title              A container for the title of the popover
                                [Child of .popover]
    
    .popover_content            A container for the popover contents
                                [Child of .popover]

    .popover_arrow              The arrow for the popover to point to parent trigger.
                                [Child of .popover]
    .top                        Positions the arrow at the top of the popover
                                [Extends .popover_arrow]
    .bottom                     Positions the arrow at the bottom of the popover
                                [Extends .popover_arrow]
    .right                      Positions the arrow at the right of the popover
                                [Extends .popover_arrow]
    .left                       Positions the arrow at the left of the popover
                                [Extends .popover_arrow]
*/
.popover-container {
  position: relative;
  display: inline-block; }

.popover {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1100;
  width: 17.5em;
  padding: 0;
  text-align: left;
  font-weight: normal;
  background-color: var(--popover-background);
  box-shadow: 0 1px 3px 1px var(--box-shadow-black-opacity-30);
  border-radius: 4px 4px 3px 3px; }
  @media print, (min-width: 480px) {
    .popover {
      width: 31em; } }

.popover-trigger {
  color: var(--text-link);
  display: inline-block;
  margin: 0;
  padding: .5em;
  line-height: normal;
  border: none;
  background-color: transparent;
  text-align: center;
  border-radius: 3px;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
  transition: background-color .5s ease-in-out; }
  a.popover-trigger {
    text-decoration: none; }
  .hover .popover-trigger:focus {
    outline: none;
    background-color: var(--bg-black-opacity-05);
    color: var(--text-link-active-extra-dark); }
  .popover-container.active .popover-trigger {
    background-color: var(--bg-black-opacity-05); }
  .popover-container.active .popover-trigger [class*=icon-],
  .hover .popover-trigger [class*=icon-]:hover,
  .hover .popover-trigger [class*=icon-]:focus,
  .hover .popover-trigger [class*=icon-]:active,
  .popover-trigger [class*=icon-].active,
  .hover .popover-trigger:focus [class*=icon-] {
    color: var(--text-link-active-extra-dark); }
  .popover-trigger .icon-help {
    position: relative;
    top: 1px; }
  .hover .popover-trigger:focus [class*=icon-]:before {
    outline: var(--text-link-active-extra-dark) dotted 1px;
    outline-offset: 2px;
    border-radius: 50px; }

.popover_title {
  padding: 0.7em 1.2em;
  margin: 0;
  font-size: 1.6rem;
  font-weight: 500;
  background-color: var(--popover-title-background);
  color: var(--text-gray-35);
  border-radius: 3px 3px 0 0; }
  @media print, (min-width: 768px) {
    .popover_title {
      font-size: 1.4rem;
      padding: 0.7em 1.2em; } }

.popover_content {
  padding: 1.2em 1.2em; }
  .popover_content > :last-child {
    margin-bottom: 0; }
  @media print, (min-width: 768px) {
    .popover_content {
      padding: 1em 1.2em; } }

.popover_arrow {
  position: absolute;
  display: block;
  width: 0;
  height: 0;
  border: .875em solid transparent; }
  .popover.top .popover_arrow {
    bottom: -.875em;
    left: 50%;
    border-top-color: var(--popover-point-border);
    border-bottom-width: 0; }
    @media print, (min-width: 768px) {
      .popover.top .popover_arrow {
        bottom: -.8em; } }
  .popover.right .popover_arrow {
    top: 3px;
    left: -.8em;
    border-right-color: var(--popover-point-border);
    border-left-width: 0; }
  .popover.bottom .popover_arrow {
    top: -.875em;
    left: 50%;
    border-bottom-color: var(--popover-point-border);
    border-top-width: 0; }
    @media print, (min-width: 768px) {
      .popover.bottom .popover_arrow {
        top: -.8em; } }
  .popover.left .popover_arrow {
    top: 3px;
    right: -.8em;
    border-left-color: var(--popover-point-border);
    border-right-width: 0; }

/* LOADING SPINNERS  - IE
    
    .loading                A gray loading spinner
                            [Module parent]
    
    .spin                   An animation class which makes any element spin 360 degrees
                            [Animation class; Extends .loading]
    
    .small                  A smaller loading spinner
                            [Extends .loading]

    .large                  A larger loading spinner
                            [Extends .loading]
*/
.loading.spin {
  display: inline-block;
  vertical-align: text-bottom;
  margin-right: .7143em;
  width: 1.4286em;
  height: 1.4286em;
  border: 2px solid;
  border-color: transparent var(--progress-spin-indicator-border-right) var(--progress-spin-indicator-border-bottom) var(--progress-spin-indicator-border-left);
  border-radius: 1.4286em; }
  .loading.spin.small {
    width: 1.2143em;
    height: 1.2143em; }
  .loading.spin.large {
    width: 2.1429em;
    height: 2.1429em; }

/* UWCU LOADING SPINNER

    .uwcu-loading-container             The container for the uwcu animated loading graphic that includes the leaf logo.
                                        This container will center the animated loading graphic horizontally.

        .center-viewport                Add this class to above container to center the aninmated loading graphic vertically in the viewport
                                        [Extends .uwcu-loading-container]

    .uwcu-loading                       The parent container for the loading animation
                                        Includes the outer spinner, the inner spinner and the leaf logo.
                                        Doesn't include subtext.
                                        [Modual parent]

    .uwcu-loading_spinner               The outer spinner container or the inner spinner container
                                        These are absolute positioned so they stack on top of each other.
                                        [Child of .uwcu-loading]

        .inner                          Class added to the inner spinner 
                                        Makes spinner slightly smaller, different color and diferent border
                                        [Extends .uwcu-loading_spinner]

    .uwcu-loading_logo                  The leaf logo
                                        The leaf logo is absolute positioned to stack on top of the inner and outer spinners.
                                        [Child of .uwcu-loading]

    .uwcu-loading-circle-container      The container for the four circles that are stacked on top of each other
                                        [Modual Parent]

    .uwcu-loading-circle                One of four circles that are absolute positioned on top of each other 
                                        Each of the 4 circles animate a slightly different time to get desired animation
                                        [Child of .uwcu-loading-circle-container]

  
    Example Markup:

        <div class="uwcu-loading-container">
            <div> <!-- don't remove div - it's a child of flex container-->
                <div class="uwcu-loading">
                    <div class="uwcu-loading_spinner">
                        <div class="uwcu-loading-circle-container">
                            <div class="uwcu-loading-circle"></div>
                            <div class="uwcu-loading-circle"></div>
                            <div class="uwcu-loading-circle"></div>
                            <div class="uwcu-loading-circle"></div>
                        </div>
                    </div>
                    <div class="uwcu-loading_spinner inner">
                        <div class="uwcu-loading-circle-container">
                            <div class="uwcu-loading-circle"></div>
                            <div class="uwcu-loading-circle"></div>
                            <div class="uwcu-loading-circle"></div>
                            <div class="uwcu-loading-circle"></div>
                        </div>
                    </div>
                    <img src="@Url.StaticResource("Content/assets/logos/uwcu","icon_u_uwcu_leaf_only.svg")" class="uwcu-loading_logo" alt="UW Credit Union Logo"/>
                </div>
                <p class="txt-center mt5 txt-bold">Loading...</p>
            </div>
        </div>

*/
.uwcu-loading-container {
  width: 100%;
  position: relative;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: center;
  justify-content: center;
  -ms-flex-align: center;
  align-items: center; }
  .uwcu-loading-container.center-viewport {
    height: 100vh;
    /* used in the old app to take up the full viewport */ }

.uwcu-loading {
  position: relative;
  height: 150px;
  width: 150px; }

.uwcu-loading_spinner,
.uwcu-loading_logo {
  position: absolute;
  width: 100%;
  height: 100%; }

.uwcu-loading_spinner {
  opacity: 0;
  animation: 1.6s ease-out .7s normal forwards 1 fade-in-spinners; }
  @media (prefers-reduced-motion: reduce) {
    .uwcu-loading_spinner {
      animation: none; } }

.uwcu-loading_logo {
  animation: animate-logo .9s ease-out forwards; }
  @media (prefers-reduced-motion: reduce) {
    .uwcu-loading_logo {
      animation: none;
      transform: scale(0.5); } }

.uwcu-loading-circle-container {
  display: inline-block;
  position: relative;
  margin: 0 auto;
  top: -15px; }

.uwcu-loading-circle {
  box-sizing: border-box;
  display: block;
  position: absolute;
  border-radius: 50%;
  width: 150px;
  height: 150px;
  border: 8px solid var(--uwcu-loading-circle-border);
  border-color: var(--uwcu-loading-circle-border) transparent transparent transparent;
  animation: rotate-circles 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite; }
  .uwcu-loading_spinner.inner .uwcu-loading-circle {
    top: 15px;
    left: 15px;
    width: 120px;
    height: 120px;
    border: 6px solid var(--uwcu-loading-circle-inner-border);
    border-color: transparent transparent var(--uwcu-loading-circle-inner-border) transparent;
    animation: rotate-circles 1.6s cubic-bezier(0.5, 0, 0.5, 1) infinite; }
  .uwcu-loading-circle:nth-child(1),
  .uwcu-loading_spinner.inner .uwcu-loading-circle:nth-child(1) {
    animation-delay: -0.45s; }
  .uwcu-loading-circle:nth-child(2),
  .uwcu-loading_spinner.inner .uwcu-loading-circle:nth-child(2) {
    animation-delay: -0.3s; }
  .uwcu-loading-circle:nth-child(3),
  .uwcu-loading_spinner.inner .uwcu-loading-circle:nth-child(3) {
    animation-delay: -0.15s; }

@keyframes rotate-circles {
  0% {
    transform: rotate(0deg); }
  100% {
    transform: rotate(360deg); } }

@keyframes animate-logo {
  0% {
    transform: scale(0.85); }
  35% {
    transform: scale(0.4); }
  65% {
    transform: scale(0.55); }
  100% {
    transform: scale(0.4); } }

@keyframes fade-in-spinners {
  0% {
    transform: scale(0.75);
    opacity: 0; }
  100% {
    transform: scale(1);
    opacity: 1; } }

/* PROGRESS CIRCLE

TODO: add location of javascript dependency

.progress-circle			The container for the progress circle.
							Blue and light background by default.
							[Module Parent]						
.small						A small progress circle
							[Extends of .progress-circle]
.large						A large progress circle (UNUSED - code commented out below, uncomment if needed)
							[Extends .progress-circle]
.green						Makes the progress bar green
							[Extends .progress-circle]
.orange						Makes the progress bar orange
							[Extends .progress-circle]
.red						Makes the progress bar red
							[Extends .progress-circle]
.on-dark-gray               Progress bar in a container with .bg-dark-gray
							[Extends .progress-circle]             
.progress-circle_text 		Contains the percentage text 
                            The text is set via JavaScript using the data-progress value
							[Child of .progress-circle]													
.progress-circle_slice		The container for interior colored ring
							[Child of .progress-circle]
.progress-circle_slice_bar	The main ring that rotates throughout the circle. 
                            An inline style to set the roatation is applied via JavaScript
							[Child of .progress-circle_slice]
.progress-circle_slice_fill Fills in the right half of the ring when over 50%;
							[Child of .progress-circle_slice]
							
Example markup:
    <div class="progress-circle large" data-progress-circle="30">
		<span class="progress-circle_text"></span>
		<div class="progress-circle_slice">
			<div class="progress-circle_slice_bar"></div>
			<div class="progress-circle_slice_fill"></div>
		</div>
	</div>
    			
*/
.progress-circle {
  position: relative;
  width: 1em;
  height: 1em;
  border-radius: 50%;
  margin: 0 auto;
  background-color: var(--bg-gray-87);
  font-size: 80px; }
  @media (min-width: 768px) {
    .progress-circle {
      margin: 0 0.1em 0.1em 0; } }
  .progress-circle.small {
    font-size: 40px; }
  .progress-circle:hover {
    cursor: default; }
  .progress-circle_text, .progress-circle_slice, .progress-circle_slice_bar, .progress-circle_slice_fill, .progress-circle:after {
    box-sizing: content-box; }
  .progress-circle:after {
    position: absolute;
    display: block;
    content: " ";
    border-radius: 50%;
    background-color: var(--bg-white);
    width: 0.6em;
    height: 0.6em;
    transition-property: all;
    transition-duration: 0.2s;
    transition-timing-function: ease-in;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); }
  .progress-circle:hover:after {
    width: 0.8em;
    height: 0.8em; }

.progress-circle_text {
  position: absolute;
  z-index: 1;
  left: 0;
  top: 0;
  width: 5em;
  line-height: 5em;
  font-size: 0.2em;
  font-weight: bold;
  color: var(--text-faint-gray);
  display: block;
  text-align: center;
  white-space: nowrap;
  transition-property: all;
  transition-duration: 0.2s;
  transition-timing-function: ease-out; }
  .progress-circle:hover > .progress-circle_text {
    width: 3.33em;
    line-height: 3.33em;
    font-size: 0.3em;
    font-weight: bold;
    color: var(--text-link); }

.progress-circle_slice {
  position: absolute;
  width: 1em;
  height: 1em;
  clip: rect(0, 1em, 1em, 0.5em); }
  .progress-circle.above50 .progress-circle_slice {
    clip: rect(auto, auto, auto, auto); }
  .progress-circle_slice_bar,
  .progress-circle.above50 .progress-circle_slice_fill {
    position: absolute;
    border-style: solid;
    border-width: 0.2em;
    width: 0.6em;
    height: 0.6em;
    clip: rect(0, 0.5em, 1em, 0);
    border-radius: 50%;
    transform: rotate(0); }
  .progress-circle.above50 .progress-circle_slice_bar:after,
  .progress-circle.above50 .progress-circle_slice_fill {
    transform: rotate(180deg); }
  .progress-circle_slice_bar, .progress-circle_slice_fill {
    border-color: var(--border-info); }

.progress-circle.green > .progress-circle_text,
.progress-circle.green:hover > .progress-circle_text {
  color: var(--text-success); }

.progress-circle.green .progress-circle_slice_bar,
.progress-circle.green .progress-circle_slice_fill {
  border-color: var(--border-success); }

.progress-circle.orange > .progress-circle_text,
.progress-circle.orange:hover > .progress-circle_text {
  color: var(--text-warn); }

.progress-circle.orange .progress-circle_slice_bar,
.progress-circle.orange .progress-circle_slice_fill {
  border-color: var(--border-warn); }

.progress-circle.red > .progress-circle_text,
.progress-circle.red:hover > .progress-circle_text {
  color: var(--text-primary); }

.progress-circle.red .progress-circle_slice_bar,
.progress-circle.red .progress-circle_slice_fill {
  border-color: var(--border-primary); }

.progress-circle.white > .progress-circle_text,
.progress-circle.white:hover > .progress-circle_text {
  color: var(--text-white); }

.progress-circle.white .progress-circle_slice_bar,
.progress-circle.white .progress-circle_slice_fill {
  border-color: var(--border-white); }

.progress-circle.on-dark-gray {
  background-color: var(--bg-gray); }
  .progress-circle.on-dark-gray:after {
    background-color: var(--bg-dark-gray); }
  .progress-circle.on-dark-gray > .progress-circle_text {
    color: var(--text-gray-80); }
  .progress-circle.on-dark-gray.green:hover > .progress-circle_text,
  .progress-circle.on-dark-gray:hover > .progress-circle_text {
    color: var(--text-white); }

.on-gray-background .progress-circle {
  background-color: var(--bg-white); }
  .on-gray-background .progress-circle:after {
    background-color: var(--bg-gray-90); }

/* LOADING SPINNER
     
   .progress-spin-indicator     A loading spinner - fixed positioned in the center of the visible main content area 

*/
.progress-spin-indicator {
  position: fixed;
  top: 15em;
  left: 50%;
  z-index: 9999; }
  @media print, (min-width: 768px) {
    .progress-spin-indicator {
      top: 18em; } }
  @media (min-width: 980px) {
    .progress-spin-indicator {
      top: 15em;
      left: 60%; } }
  @media (min-width: 1260px) {
    .progress-spin-indicator {
      left: 50%; } }
  .progress-spin-indicator .spin {
    position: absolute;
    top: 0;
    left: -1em;
    width: 2em;
    height: 2em;
    border: 2px solid;
    border-color: transparent var(--progress-spin-indicator-border-right) var(--progress-spin-indicator-border-bottom) var(--progress-spin-indicator-border-left);
    border-radius: 2.8571em; }

/* PROGRESS STEPS

    .progress-steps                 The horizontal stepped progress indicating progress through a workflow
                                    [Module Parent]

    .progress-steps_step            A step in the progress through a workflow
                                    [Child of .progress-steps]

    .progress-steps_step_bar        The horizontal progress bar connecting the numbered steps
                                    [Child of .progress-steps_step]

    .progress-steps_step_circle     The circle that holds the checkmark icon or the number
                                    [Child of .progress-steps_step]

    .step-in-progress               A step that is in progress                             
                                    [Extends .progress-steps_step]

    .step-done                      A step that has been completed                                
                                    [Extends .progress-steps_step]

    .grow-line-*                    An indicator how far in the process you are bewteen steps where the line grows                            
                                    [Extends .progress-steps_step]


    Example markup:

        <div class="progress-steps" role="progressbar" aria-label="Progress Steps" aria-valuetext="Step 2: Getting to Know You" aria-valuenow="2" aria-valuemin="1" aria-valuemax="4">
            <div class="progress-steps_step step-done">
                <div class="progress-steps_step_bar"></div>
                <div class="progress-steps_step_circle">
                    <div class="progress-steps_step_circle_text">1</div>
                    <i class="progress-steps_step_circle_icon icon-check-mark"></i>
                </div>
            </div>
            <div class="progress-steps_step">
                <div class="progress-steps_step_bar"></div>
                <div class="progress-steps_step_circle">
                    <div class="progress-steps_step_circle_text">2</div>
                    <i class="progress-steps_step_circle_icon icon-check-mark"></i>
                </div>
            </div>
            ...
        </div>
*/
.progress-steps {
  display: -ms-flexbox;
  display: flex;
  width: 100%;
  max-width: 300px;
  margin: 0 auto;
  padding: 16px 0px 14px 13px; }

.progress-steps_step {
  -ms-flex-positive: 1;
  flex-grow: 1;
  position: relative; }
  .progress-steps_step:last-child {
    max-width: 32px; }

.progress-steps_step_bar {
  width: calc(100% - 22px);
  height: 3px;
  background: var(--progress-steps-todo-borders-backgrounds);
  margin-left: 22px;
  text-align: left; }
  .progress-steps_step:last-child .progress-steps_step_bar {
    display: none; }
  .progress-steps_step_bar:after {
    position: absolute;
    content: '';
    height: 3px;
    width: 0;
    background-color: var(--progress-steps-done-borders-backgrounds); }
    .step-done > .progress-steps_step_bar:after {
      width: 100%;
      background-color: var(--progress-steps-done-borders-backgrounds); }
    .grow-line-10 > .progress-steps_step_bar:after {
      animation: growLine-10 1s linear forwards; }
    .grow-line-20 > .progress-steps_step_bar:after {
      animation: growLine-20 1s linear forwards; }
    .grow-line-30 > .progress-steps_step_bar:after {
      animation: growLine-30 1s linear forwards; }
    .grow-line-40 > .progress-steps_step_bar:after {
      animation: growLine-40 1s linear forwards; }
    .grow-line-50 > .progress-steps_step_bar:after {
      animation: growLine-50 1s linear forwards; }
    .grow-line-60 > .progress-steps_step_bar:after {
      animation: growLine-60 1s linear forwards; }
    .grow-line-70 > .progress-steps_step_bar:after {
      animation: growLine-70 1s linear forwards; }
    .grow-line-80 > .progress-steps_step_bar:after {
      animation: growLine-80 1s linear forwards; }
    .grow-line-90 > .progress-steps_step_bar:after {
      animation: growLine-90 1s linear forwards; }
    .grow-line-100 > .progress-steps_step_bar:after {
      animation: growLine-100 1s linear forwards; }

.progress-steps_step_circle {
  display: inline-block;
  fill: none;
  position: absolute;
  top: -11px;
  left: 0px;
  border: 3px solid var(--progress-steps-todo-borders-backgrounds);
  background: var(--progress-steps-todo-borders-backgrounds);
  width: 24px;
  height: 24px;
  border-radius: 50%;
  padding: 4px;
  transition: all 0.25s linear; }
  .progress-steps_step.step-done .progress-steps_step_circle {
    border-color: var(--progress-steps-done-borders-backgrounds);
    background: var(--progress-steps-done-borders-backgrounds); }
  .progress-steps_step[class*="grow-line-"] .progress-steps_step_circle,
  .progress-steps_step.step-in-progress .progress-steps_step_circle {
    border-color: var(--progress-steps-done-borders-backgrounds);
    background: var(--bg-white); }
  .progress-steps_step_circle_text {
    text-align: center;
    font-size: 1.4rem;
    font-weight: 700;
    margin-top: -4px;
    color: var(--progress-steps-text-todo); }
    .step-done .progress-steps_step_circle_text {
      display: none; }
    [class*="grow-line-"] .progress-steps_step_circle_text,
    .step-in-progress .progress-steps_step_circle_text {
      color: var(--text-primary); }
  .progress-steps_step_circle_icon {
    display: none;
    color: var(--text-white); }
    .progress-steps_step_circle_icon:before {
      font-size: 1.4rem;
      position: absolute;
      margin-left: -2px;
      top: 1px; }
    .step-done .progress-steps_step_circle_icon {
      display: block; }

@keyframes growLine-10 {
  to {
    width: 10%; } }

@keyframes growLine-20 {
  from {
    width: 10%; }
  to {
    width: 20%; } }

@keyframes growLine-30 {
  from {
    width: 20%; }
  to {
    width: 30%; } }

@keyframes growLine-40 {
  from {
    width: 30%; }
  to {
    width: 40%; } }

@keyframes growLine-50 {
  from {
    width: 40%; }
  to {
    width: 50%; } }

@keyframes growLine-60 {
  from {
    width: 50%; }
  to {
    width: 60%; } }

@keyframes growLine-70 {
  from {
    width: 60%; }
  to {
    width: 70%; } }

@keyframes growLine-80 {
  from {
    width: 70%; }
  to {
    width: 80%; } }

@keyframes growLine-90 {
  from {
    width: 70%; }
  to {
    width: 90%; } }

@keyframes growLine-100 {
  from {
    width: 90%; }
  to {
    width: 100%; } }

/*
   PLACHOLDER STYLES
   These placeholder rules will not generate CSS on their own.
   Must be used with the @extend directive.

     %progress-child            Base styles chidren of .progress
                                [Placeholder Selector]

*/
.progress_bar, .progress_label {
  display: table-cell;
  vertical-align: middle; }

/* PROGRESS INDICATOR 
    .progress           A container (div) for a progress bar and label.
                        [Module parent]
    
    .progress_bar       A container for the progress bar.
                        [Child of .progress]
    
    .progress_bar_fill  The "fill" used to indicate progress. This element's width is updated via javascript.
                        [Child of .progress_bar]
    .complete           The "fill" used to indicate progress is complete
                        [Extends .progress_bar_fill]

    .progress_label     A continer for the label, i.e. "20%" or "Upload Complete"
                        [Child of .progress]
*/
.progress {
  display: table;
  width: 100%; }

.progress_bar {
  width: 100%;
  background: var(--bg-light-gray);
  height: 1.1429em; }
  .progress_bar_fill {
    height: 1.2857em;
    background: var(--bg-info-light);
    background: linear-gradient(135deg, var(--bg-info-light) 0%, var(--bg-info-dark) 100%); }
    .progress_bar_fill.complete {
      background: var(--bg-info-dark);
      background: linear-gradient(135deg, var(--bg-info-dark) 0%, var(--bg-info-darker) 100%); }

.progress_label {
  padding-left: .7143em;
  white-space: nowrap;
  min-width: 5em; }

/* PROGRESS CIRCLE
    
*/
.page-header .progress-circle {
  background-color: var(--bg-gray-87); }
  @media (min-width: 980px) {
    .page-header .progress-circle {
      background-color: var(--bg-gray-73); } }
  .page-header .progress-circle:after {
    background-color: var(--bg-white); }
    @media (min-width: 980px) {
      .page-header .progress-circle:after {
        background-color: var(--bg-gray-90c); } }

/*CORNER RIBBON CONTAINER & PLACEMENT
    
    .has-corner-ribbon      Sets the position of the container

    .corner-ribbon          The container for a ribbon   
                            Used to postion ribbon.
                            Container hides the overflow of the rectangular ribbon.           

    .corner-ribbon_inner    Sets the rotation, color, shadows, fonts, etc. of the ribbon.
    
    :before  and :after     Sets the triangles to the left and right to look like it wraps around the tile.
            

    Example markup:
        <div class="has-corner-ribbon">
            <div class="corner-ribbon">
                <div class="corner-ribbon_inner"><strong>NEW</strong></div>
            </div>
        </div>
*/
.has-corner-ribbon {
  position: relative; }

.corner-ribbon {
  width: 54px;
  height: 88px;
  overflow: hidden;
  position: absolute;
  top: -3px;
  left: -3px; }
  .corner-ribbon_inner {
    font-size: 12px;
    color: var(--text-white);
    text-align: center;
    text-shadow: var(--text-shadow) 0 1px 0;
    transform: rotate(-45deg);
    position: relative;
    padding: 5px 0 2px 2px;
    right: 0;
    top: 5px;
    width: 75px;
    background-color: var(--bg-success);
    box-shadow: 0 0 3px var(--box-shadow-black-opacity-30);
    float: right;
    z-index: 1; }
    .corner-ribbon_inner:before, .corner-ribbon_inner:after {
      content: "";
      border-top: 3px solid var(--border-success-dark);
      border-left: 3px solid transparent;
      border-right: 3px solid transparent;
      position: absolute;
      bottom: -3px; }
    .corner-ribbon_inner:before {
      left: 0; }
    .corner-ribbon_inner:after {
      right: 0; }

/*RIBBON
    .ribbon             A red circle with a star by default.
                        [Module Parent]
    .ribbon-small       A small red circle with a star by default.
                        [Module Parent]
    .reversed           A white circle with a star on an dark background
                        [Extends .ribbon]

    Example markup:
    <i class="ribbon"></i>
    <i class="ribbon-small"></i>
    <i class="ribbon reversed"></i>
*/
.ribbon {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 0;
  color: var(--text-primary); }
  @media print and (min-width: 768px) {
    .ribbon {
      margin-top: 0; } }
  .ribbon:before {
    content: "\e904";
    font-size: 24px; }
  .ribbon.reversed {
    color: var(--text-white); }

.ribbon-small {
  color: var(--text-primary);
  margin-right: .2em; }
  .ribbon-small:before {
    content: "\e904";
    position: relative;
    top: 2px;
    font-size: 16px; }

/* RIBBON PLACEMENT IN LISTS
    
    .has-ribbon                An item with a favorite icon (circle with star); Leaves room for the favorite icon
                               [Extends .basic-item; Extends .menu-link; Extends .menu-group; Extends .link-area_content; Extends .table-row; Extends .row]
    .has-ribbon-large          An item with a large favorite icon (circle with star); Leaves room for the favorite icon
                               [Extends .basic-item; Extends .menu-link; Extends .link-area_content; Extends .table-row; Extends .row]
    .has-empty-ribbon          An item without a favorite icon (circle with star) in a list of other items with favorite icons
                               Leaves empty space where a favorite icon (circle with star) would be on MD+ only
                               [Extends .basic-item; Extends .menu-link; Extends .link-area_content; Extends .table-row; Extends .row]
    .has-empty-ribbon-large    An item without a large favorite icon (circle with star) in a list of other items with large favorite icons
                               Leaves empty space where a favorite icon (circle with star) would be on MD+ only
                               [Extends .basic-item; Extends .menu-link, Extends .link-area_content;Extends .table-row; Extends .row]
    .account-item-header       Parent element of the ribbon and account name text
    .js-favorite-empty-ribbon  Container element used to impose padding for alignment with ribbon icon


    Example table markup:
    <div class="table-md">
        <div class="table-row has-ribbon">
              <div class="table-cell">...


    Example list group item markup:
    <ul class="item-container">
        <li class="basic-item has-ribbon">...

    <ul class="item-container">
        <li>
            <a class="basic-item_item has-ribbon">...

    Example menu group markup:
    <div class="menu-group">
        <div class="menu-group_content has-ribbon">...

    Example menu link markup:
    <a class="menu-link has-ribbon">
        <div class="menu-link_text">...


    Example link area markup:
    <a class="link-area">
        <div class="link-area_content">
            <div class="link-are_content_inner has-ribbon">...


*/
.has-ribbon, .has-ribbon-large {
  position: relative; }

.has-ribbon, .has-ribbon.table-row, .has-ribbon.row {
  padding-left: 35px; }

.has-ribbon-large, .has-ribbon-large.table-row, .has-ribbon-large.row {
  padding-left: 56px; }

.has-ribbon.table-row > .table-cell,
.has-ribbon-large.table-row > .table-cell,
.has-ribbon.row > [class*="col-"],
.has-ribbon.menu-link .menu-link_text,
.has-ribbon-large.menu-link .menu-link_text {
  padding-left: 0; }

@media print, (min-width: 768px) {
  .table-md > .has-ribbon.table-row > .table-cell:first-child, .has-ribbon.row {
    position: relative;
    padding-left: 45px; }
  .table-md > .has-ribbon-large.table-row > .table-cell:first-child {
    position: relative;
    padding-left: 56px; }
  .has-ribbon.row > [class*="col-"] {
    padding-left: 1.0714em; }
  .has-ribbon.row > [class*="col-"]:first-child {
    padding-left: 0; } }

@media print, (min-width: 768px) {
  .has-empty-ribbon {
    padding-left: 35px; }
    .has-empty-ribbon-large {
      padding-left: 56px; }
    .table-md > .has-empty-ribbon.table-row > .table-cell:first-child, .has-empty-ribbon.row {
      position: relative;
      padding-left: 45px; }
    .table-md > .has-empty-ribbon-large.table-row > .table-cell:first-child {
      position: relative;
      padding-left: 56px; }
    .has-empty-ribbon.row > [class*="col-"] {
      padding-left: 1.0714em; }
    .has-empty-ribbon.row > [class*="col-"]:first-child,
    .has-empty-ribbon.menu-link .menu-link_text,
    .has-empty-ribbon-large.menu-link .menu-link_text {
      padding-left: 0; } }

.account-item-header,
.js-favorite-empty-ribbon {
  transition: padding .2s; }

/*RIBBON

    .reversed-on-desktop         A container for a ribbon that is reversed on mobile and orange on desktop
                                For use in the Web Branch header
                                [Extends .ribbon in the global library see _global/partials/components/ribbons/ribbon]

*/
.ribbon.reversed-on-desktop {
  color: var(--text-primary); }
  @media print, (min-width: 980px) {
    .ribbon.reversed-on-desktop {
      color: var(--text-white); } }

/*
    External Account Icon

    .icon-link             
    .icon-link-small      
    .has-icon-link          

    Example markup:
    <i class="icon-link"></i>
    <i class="icon-link-small"></i>
*/
.icon-link {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 0; }
  @media print and (min-width: 768px) {
    .icon-link {
      margin-top: 0; } }
  .icon-link:before {
    content: "\e9cb";
    font-size: 24px; }

.icon-link-small {
  margin-right: .2em; }
  .icon-link-small:before {
    content: "\e9cb";
    position: relative;
    top: 2px;
    font-size: 16px; }

.has-icon-link, .has-icon-link-large {
  position: relative; }

.has-icon-link, .has-icon-link.table-row, .has-icon-link.row {
  padding-left: 35px; }

.has-icon-link-large, .has-icon-link-large.table-row, .has-icon-link-large.row {
  padding-left: 56px; }

.has-icon-link.table-row > .table-cell,
.has-icon-link-large.table-row > .table-cell,
.has-icon-link.row > [class*="col-"],
.has-icon-link.menu-link .menu-link_text,
.has-icon-link-large.menu-link .menu-link_text {
  padding-left: 0; }

@media print, (min-width: 768px) {
  .table-md > .has-icon-link.table-row > .table-cell:first-child.row, .has-icon-link.row.row {
    position: relative;
    padding-left: 45px; }
  .table-md > .table-md > .has-icon-link.table-row > .table-cell:first-child-large.table-row > .table-cell:first-child, .table-md > .has-icon-link.row-large.table-row > .table-cell:first-child {
    position: relative;
    padding-left: 56px; }
  .table-md > .has-icon-link.table-row > .table-cell:first-child.row > [class*="col-"], .has-icon-link.row.row > [class*="col-"] {
    padding-left: 1.0714em; }
  .table-md > .has-icon-link.table-row > .table-cell:first-child.row > [class*="col-"]:first-child, .has-icon-link.row.row > [class*="col-"]:first-child {
    padding-left: 0; } }

@media print, (min-width: 768px) {
  .has-icon-link .has-empty-icon-link {
    padding-left: 35px; }
    .has-icon-link .has-empty-icon-link-large {
      padding-left: 56px; }
    .table-md > .has-icon-link .has-empty-icon-link.table-row > .table-cell:first-child, .has-icon-link .has-empty-icon-link.row {
      position: relative;
      padding-left: 45px; }
    .table-md > .has-icon-link .has-empty-icon-link-large.table-row > .table-cell:first-child {
      position: relative;
      padding-left: 56px; }
    .has-icon-link .has-empty-icon-link.row > [class*="col-"] {
      padding-left: 1.0714em; }
    .has-icon-link .has-empty-icon-link.row > [class*="col-"]:first-child,
    .has-icon-link .has-empty-icon-link.menu-link .menu-link_text,
    .has-icon-link .has-empty-icon-link-large.menu-link .menu-link_text {
      padding-left: 0; } }

.has-icon-link .account-item-header,
.has-icon-link .js-favorite-empty-icon-link {
  transition: padding .2s; }

/*  SORTING

    .sortable-drop-placeholder  An area with a dotted border to indicate a potential drop zone when an item is being dragged
                                [Module parent]

    .sortable-item              An individual item that can be sorted
                                [Module parent]
    
    .sortable-overlay           An invisible element on top of the sortable-item, the same size as the item
                                Used in javascript for controlling the size of the sortable-drop-placeholder
                                Sets positioning context for the overlay_handle
                                [Module parent]

    .sortable-overlay_handle    An icon to indicate that the item is sortable. 
                                Default is an up/down arrow on the right side of the item
                                When inside a .panel on MD+ it's an up/down/left/right arrow in the midlde of the item
                                [Child of .sortable-overlay]

    .ui-sortable-helper         Class used to indate that an item is in a draggable state
                                [jQuery class; Extends .sortable-item]

    */
.sortable-drop-placeholder {
  border: 2px dashed var(--border-gray-80);
  height: 150px;
  margin-bottom: 28px;
  list-style: none; }

.sortable-item {
  position: relative; }

.sortable-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: -1px;
  bottom: 0;
  cursor: move;
  overflow: hidden;
  border-radius: 0 3px 3px 0; }
  .sortable-overlay_handle {
    -ms-touch-action: none;
    touch-action: none; }
    .sortable-overlay_handle:before {
      font-size: 36px;
      line-height: 50px;
      color: var(--text-gray-34);
      content: "\e61a";
      display: block;
      position: absolute;
      top: 50%;
      right: 3px;
      bottom: 0;
      width: 54px;
      height: 50px;
      text-align: center;
      background: var(--bg-white);
      opacity: 1;
      transform: translateY(-50%); }
      @media print, (min-width: 768px) {
        .panel .sortable-overlay_handle:before {
          content: "\e60a"; } }

.ui-sortable-helper {
  transform: scale(1.05, 1.05) !important; }
  .ui-sortable-helper.sortable-item,
  .ui-sortable-helper .sortable-item {
    box-shadow: 0 2px 3px 0 var(--box-shadow-black-opacity-50); }

/* ON OFF SWITCH 
    .switch                     This is the outter most container for the switch and used for positioning the switch
                                [Module Parent]

    .switch_checkbox            This is the hidden input
                                [Child of .switch]
    
    .switch_label               This is the outer container for the inner labels and will only have enough space to show one label at a time.
                                [Child of .switch]

    .switch_label_inner         This is the inner container for the two inner labels at 200%
                                [Child of .switch_label]

    .switch_label_inner:before  This is the label "Hidden" at 50% width .switch_label_inner

    .switch_lable_inner:after   This is the label "Visible" at 50% width .switch_label_inner

 */
/* We can make this more flexible in the future if needed, but for now this is in the panel_front.tile and positioned absolute with a fixed height and width to match a tile_head.condensed.*/
.switch {
  position: absolute;
  top: 1px;
  left: -22px;
  width: 5em;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none; }
  @media (min-width: 768px) {
    .switch {
      left: -2px; } }

.switch_checkbox {
  display: none; }

.switch_label {
  display: block;
  overflow: hidden;
  cursor: pointer;
  border-radius: 3px 0 0 3px; }
  .switch_label_inner {
    display: block;
    width: 200%;
    text-align: center;
    margin-left: -100%;
    transition: margin 0.3s ease-in 0s; }
    .switch_label_inner:before, .switch_label_inner:after {
      font-weight: 500;
      box-sizing: border-box;
      display: block;
      float: left;
      width: 50%;
      height: 4.2em;
      padding: 0;
      font-size: 1.4rem;
      line-height: 4.2em;
      color: var(--text-white); }
      @media (min-width: 768px) {
        .switch_label_inner:before, .switch_label_inner:after {
          font-size: 1.2rem;
          height: 3.85em; } }
    .switch_label_inner:before {
      content: "HIDDEN";
      background-color: var(--bg-gray); }
    .switch_label_inner:hover:before {
      background-color: var(--bg-dark-gray); }
    .switch_label_inner:after {
      content: "VISIBLE";
      background-color: var(--bg-success); }
    .switch_label_inner:hover:after {
      background-color: var(--bg-success-dark); }
    .switch_checkbox:checked + .switch_label .switch_label_inner {
      margin-left: 0; }

/*   
    PLACHOLDER TILE STYLES
    These placeholder rules will not generate CSS on their own.
    Must be used with the @extend directive.

*/
.tile, .tile-convertible {
  position: relative;
  margin: 0 -3px 3rem;
  border-radius: 3px; }
  @media print, (min-width: 768px) {
    .tile, .tile-convertible {
      margin: 0 -3px 3rem; } }

/* TILES 
    Example markup:
    <div class="tile">
    ...Content..
    </div>

    Example markup with .item-container
    <div class="tile item-container">
        <div class="basic-item">...Header Content...</div>
        <div class="basic-item">...Content...</div>
        <div class="basic-item">...Footer Content...</div>
    </div>

    .tile                   A container for a content tile
                            [Module parent]

    .condensed              Less padding to match .basic-item padding if needed
                            [Extends .tile]  
       
*/
/* Tile */
.tile {
  background-color: var(--bg-white);
  border: 1px solid var(--border-gray-85);
  box-shadow: 0 0 1px 0 var(--box-shadow);
  padding: 1.5em 1.2em;
  /*  
        TILE with Layout -  ROW 
        Example markup:
        <div class="tile row"><div class="col-md-6">...
    */ }
  @media print, (min-width: 768px) {
    .tile {
      padding: 2em 2em; } }
  .tile.condensed {
    padding: 1.2em 1.2em; }
    @media print, (min-width: 768px) {
      .tile.condensed {
        padding: 1em 1.2em; } }
  .tile > :last-child {
    margin-bottom: 0; }
  .tile.row {
    padding-top: 0.7em;
    padding-bottom: 0.7em;
    padding-left: 0;
    padding-right: 0;
    margin-left: 0;
    margin-right: 0;
    display: -ms-flexbox;
    display: flex; }
    @media print, (min-width: 768px) {
      .tile.row {
        padding-top: 1em;
        padding-bottom: 1em; } }
    .tile.row > [class*=col-] {
      padding-top: 0.4em;
      padding-bottom: 0.4em; }
      @media print, (min-width: 768px) {
        .tile.row > [class*=col-] {
          padding-top: 0;
          padding-bottom: 0; } }

/* TILE CONVERTIBLE 

     Example markup with .item-container
    <div class="item-container tile-convertible">
        <div class="basic-item">...Header Content...</div>
        <div class="basic-item">...Content...</div>
        <div class="basic-item">...Footer Content...</div>
    </div>
    
    .tile-convertible       A tile whose contents are attached at MD+ screen sizes and separate at XS, SM sizes
                            [Module parent]

    .stacked-above          A tile-convertible that is stacked directly above another tile-convertible (needed for lists that use "view more" functionality)
                            [Extends .tile-convertible]                
    
    .stacked-below          A tile-convertible that is stacked directly below another tile-convertible (needed for lists that use "view more" functionality)
                            [Extends .tile-convertible]
*/
/* Tile Convertible */
@media print, (min-width: 768px) {
  .tile-convertible {
    background-color: var(--bg-white);
    border: 1px solid var(--border-gray-85);
    box-shadow: 0 0 1px 0 var(--box-shadow); } }

.tile-convertible.stacked-above {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  border-bottom-color: var(--border-light-gray);
  margin-bottom: .7em; }
  @media print, (min-width: 768px) {
    .tile-convertible.stacked-above {
      margin-bottom: 0; } }

.tile-convertible.stacked-below {
  border-top-right-radius: 0;
  border-top-left-radius: 0;
  border-top: none; }

/*
    TOASTER

    .toaster                    A container for the toaster to set positioning
                                [Module parent]  
    .toaster-content            A container for the contents of the toaster                         
                                [Child of .toaster]
    .orange                     Orange background for the toaster content                      
                                [Extends toaster-content]    
    .toasterAnimation           Animates the .toaster
                                [Animations]
*/
.toaster {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9200;
  animation-fill-mode: forwards;
  animation-name: toasterAnimation;
  animation-timing-function: ease;
  animation-duration: 3s; }

.toaster-content {
  text-align: center;
  padding: 1.7em .6em;
  background: var(--bg-gray-34-opacity-90);
  color: var(--text-white);
  position: relative;
  margin-left: 0;
  margin-right: 0; }
  @media print, (min-width: 980px) {
    .toaster-content {
      margin-left: 25%; } }
  @media (min-width: 1260px) {
    .toaster-content {
      margin-left: 20%;
      margin-right: 20%; } }

@keyframes toasterAnimation {
  0% {
    transform: translate3d(0, 125px, 0);
    opacity: 0; }
  15% {
    transform: translate3d(0, 0, 0);
    opacity: 1; }
  75% {
    transform: translate3d(0, 0, 0);
    opacity: 1; }
  100% {
    transform: translate3d(0, 125px, 0);
    opacity: 0; } }

/* TOGGLES
    
    %toggle                    Base styles for all toggles
                               [Placeholder Selector]
*/
.toggle, .toggle-pill {
  width: 100%;
  margin-bottom: .4em; }
  .toggle:before, .toggle-pill:before, .toggle:after, .toggle-pill:after {
    display: table;
    content: ""; }
  .toggle:after, .toggle-pill:after {
    clear: both; }

/*
    TOGGLE
    
    .toggle                    A container wrapped around side-by-side buttons, where one button is active and can be pressed and one is inactive because it's already pressed by default
                               [Module parent]
    .narrow                    A narrow container for toggles
                               [Extends .toggle;]
    
    .toggle_item               An item within the toggle
                               [Child of .toggle]
    .positive                  When pressed, this item looks positive - orange. Good for "Yes", "On" or "Now" type actions.
                               [Extends .toggle_item]

    
*/
.toggle {
  max-width: 20em; }
  .toggle.narrow {
    max-width: 14em; }
  .toggle:focus {
    outline: none; }

/* toggle item - text colors and decoration */
.toggle_item,
a.toggle_item {
  font-size: 1.4rem;
  font-weight: 500;
  color: var(--toggle-text);
  text-decoration: none;
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.1s ease; }
  @media print, (min-width: 768px) {
    .toggle_item,
    a.toggle_item {
      font-size: 1.2rem; } }
  .toggle_item:hover,
  a.toggle_item:hover {
    color: var(--text-med-gray); }
  .toggle_item.pressed, .toggle_item.pressed:hover,
  a.toggle_item.pressed,
  a.toggle_item.pressed:hover {
    color: var(--toggle-pressed-text); }

/* toggle item - all other styles */
.toggle_item {
  display: block;
  margin: 0;
  padding: 0;
  float: left;
  min-width: 4em;
  width: 50%;
  line-height: 3em;
  text-align: center;
  border: 1px solid var(--toggle-border);
  background-color: var(--toggle-background);
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
  cursor: pointer; }
  @media print, (min-width: 768px) {
    .toggle_item {
      line-height: 2.75em; } }
  .toggle_item:first-of-type {
    border-radius: 3px 0 0 3px;
    border-right: none; }
  .toggle_item:last-of-type {
    border-radius: 0 3px 3px 0;
    border-left: none; }
  .toggle_item:hover, .toggle_item:active {
    background-color: var(--bg-light-gray); }
  .hover .toggle_item:focus {
    outline: 1px dotted var(--focus-outline-gray);
    outline-offset: -4px; }
  .toggle_item.pressed, .toggle_item.pressed:hover, .toggle_item.pressed:active {
    cursor: default;
    border: 1px solid var(--toggle-pressed-border);
    background-color: var(--toggle-pressed-background); }
    .toggle_item.pressed.positive, .toggle_item.pressed:hover.positive, .toggle_item.pressed:active.positive {
      color: var(--text-white);
      border: 1px solid var(--border-success);
      background-color: var(--bg-success); }
  .hover .toggle_item.pressed:focus {
    outline-color: var(--focus-outline-white-opacity-70); }
  .toggle_item [class*=icon-] {
    display: none;
    padding-right: .1429em; }
  .toggle_item.pressed [class*=icon-] {
    display: inline-block;
    color: var(--toggle-pressed-text); }

/* PILL TOGGLE

      .toggle-pill             A container for a pill-shaped toggle; Modifies contained .toggle_item to make them a pill shape.
                               [Module parent;Related to .toggle]

      .narrow                  A narrow container for toggles
                               [Extends .toggle-pill]

     .toggle_item              An item within the toggle
                               [Child of .toggle]
     .positive                  When pressed, this item looks positive - orange. Good for "Yes", "On" or "Now" type actions.
                               [Extends .toggle_item]
*/
.toggle-pill {
  max-width: 11em; }
  .toggle-pill .toggle_item {
    position: relative;
    width: 53%;
    border-radius: 1.875em; }
    .toggle-pill .toggle_item.pressed {
      width: 69%; }
    .toggle-pill .toggle_item:not(.pressed) {
      z-index: 1; }
    .toggle-pill .toggle_item:first-of-type {
      margin-right: -12%;
      text-align: left;
      padding-left: .8571em; }
    .toggle-pill .toggle_item:last-of-type {
      margin-left: -12%;
      text-align: right;
      padding-right: 1.0714em; }
    .toggle-pill .toggle_item:not(.pressed) {
      text-align: center;
      padding-right: 0;
      padding-left: 0; }

/* narrow toggle */
.toggle-pill.narrow {
  max-width: 9em; }
  .toggle-pill.narrow .toggle_item:first-of-type {
    padding-right: .7143em;
    padding-left: .7143em;
    margin-right: -14%; }
  .toggle-pill.narrow .toggle_item:last-of-type {
    margin-left: -14%;
    padding-right: .625em;
    padding-left: .625em; }
    @media print, (min-width: 768px) {
      .toggle-pill.narrow .toggle_item:last-of-type {
        padding-right: .429em;
        padding-left: .429em; } }

/*  ____________________________
    MODULES_WIZARDS.css

    Purpose:        Styles for wizard workflows

    Screens:        All, including Print

    ____________________________
*/
/* WIZARDS 
  .wizard                       A container for a wizard, with a background color
                                [Module parent]
  .wizard_progress              A container for the progress nav of the wizard.
                                [Child of wizard]
  .wizard_content               A container for the wizard contents, with a white background
                                [Child of wizard]

*/
.wizard {
  background-color: var(--bg-white);
  border: 1px solid var(--border-gray-85);
  box-shadow: 0 0 1px 0 var(--box-shadow-level-1);
  margin: 0 -3px 3rem;
  border-radius: 3px; }
  @media print, (min-width: 768px) {
    .wizard {
      margin: 0 -3px 3rem; } }
  .wizard_progress {
    background-color: var(--bg-gray-60); }
    .wizard_progress.completed {
      background-color: var(--bg-info-light); }
  .wizard_content {
    padding: 1em 1.2em 1.5em; }
    .wizard_content:before, .wizard_content:after {
      display: table;
      content: ""; }
    .wizard_content:after {
      clear: both; }
    @media print, (min-width: 768px) {
      .wizard_content {
        padding: 1em 2em 2em; } }
    .wizard_content hr {
      margin-top: 1.4286em;
      margin-bottom: 1.4286em; }
      @media print, (min-width: 768px) {
        .wizard_content hr {
          margin-top: 1.7143em; } }
    @media print, (min-width: 768px) {
      .wizard_content h2, .wizard_content .looks-like-h2 {
        font-size: 2rem; } }
    .wizard_content_buttons {
      margin-top: 1.4286em; }
      .wizard_content_buttons:before, .wizard_content_buttons:after {
        display: table;
        content: ""; }
      .wizard_content_buttons:after {
        clear: both; }
      @media print, (min-width: 768px) {
        .wizard_content_buttons {
          margin-top: 1.8571em; } }
  .wizard .data-display {
    margin-top: .7143em; }

/* VERIFYU LOGO

    .logo-verifyu       The VerifyU logo
                        [Extends .img-responsive]
    .logo-verifyu-link  An anchor tag surrounding the logo
     
*/
.logo-verifyu {
  max-height: 36px;
  min-width: 93px; }
  .basic-item .logo-verifyu {
    margin-top: 0.5rem;
    margin-bottom: 0.5rem; }
  .logo-verifyu-link {
    display: block; }
    .hover .logo-verifyu-link:focus {
      outline-offset: 0; }

.verifyukey {
  position: relative;
  height: 151px;
  width: 263px; }

.verifyukey_digit {
  color: var(--verifyukey-digit-text);
  font-size: 14px;
  font-weight: bold;
  position: absolute;
  text-align: center;
  top: 45px;
  width: 20px; }
  .verifyukey_digit-0 {
    left: 13px; }
  .verifyukey_digit-1 {
    left: 37px; }
  .verifyukey_digit-2 {
    left: 62px; }
  .verifyukey_digit-3 {
    left: 85px; }
  .verifyukey_digit-4 {
    left: 110px; }
  .verifyukey_digit-5 {
    left: 135px; }
  .verifyukey_digit-6 {
    left: 160px; }
  .verifyukey_digit-7 {
    left: 184px; }
  .verifyukey_digit-8 {
    left: 208px; }
  .verifyukey_digit-9 {
    left: 231px; }

.verifyukey_date {
  color: var(--verifyukey-date-text);
  font-size: 10px;
  font-weight: bold;
  position: absolute;
  text-align: left;
  bottom: 7px;
  width: 150px;
  left: 12px; }

.verifyuencode {
  position: relative; }

.verifyuencode_key {
  position: absolute;
  right: 43px;
  top: -6px; }

/*VERIFYU LIST METHODS
    .verifyu-list   The list of methods for completeing a verifyu challenge
                    Modify gutter on row/col for MD+ screens to give better visual separation between choices
    
    .verifyu-logo-wizard    A logo that sits to the right of the wizard title
    */
.verifyu-list.row {
  margin-left: -2.4286em;
  margin-right: -2.4286em; }

.verifyu-list .col-md-6 {
  padding-left: 2.4286em;
  padding-right: 2.4286em; }

.verifyu-logo-wizard {
  float: right;
  margin-right: .7143em;
  margin-top: -.5em; }
  @media print, (min-width: 768px) {
    .verifyu-logo-wizard {
      margin-top: -.2143em; } }

/* Zelle LOGO

    .logo-uwcu-with-zelle       The Zelle logo
                                [Extends .img-responsive]
*/
.logo-uwcu-with-zelle {
  max-height: 80px;
  max-width: 300px; }

/* Zelle IFRAME

    #zelle_iframe       The Zelle iframe
*/
#zelle_iframe {
  height: calc(100vh - 90px);
  min-height: 20vh; }
  @media print, (min-width: 768px) {
    #zelle_iframe {
      height: calc(100vh - 200px); } }

/* TABLE OF CONTENTS
------------------------
    - CREDIT SCORE WIDGET
    - CREDIT SCORE REQUIRED ACTION
    - SAVVYMONEY OFFER
-------------------------
*/
/* CREDIT SCORE WIDGET
    
    .credit-widget                          A credit score widget displaying various states (enrolled in credit score service, unenrolled, no report found)
                                            [Module parent]
    .credit-widget.small                    At widget widths of less than 360px, a .small class will be added to .credit-widget via JavaScript

    .credit-widget_visualization            A container for a score diagram image and related values
                                            [Descendant of .credit-widget]
    .credit-widget_visualization_svg        A container for the SVG diagram representing the credit score
                                            [Child of .credit-widget_visualization]
    .credit-widget_visualization_info       A container for the related values about the credit score
                                            [Child of .credit-widget_visualization]
    .credit-widget_visualization_score      The credit score
                                            [Child of .credit-widget_visualization_info]
    .credit-widget_visualization_tier       The label of the credit score tier
                                            [Descendant of .credit-widget_visualization_info]
    .credit-widget_banner                   A promotional image displayed when the member is not enrolled in the credit score service
                                            [Descendant of .credit-widget]
*/
.credit-widget_visualization {
  position: relative;
  height: 160px; }
  .credit-widget.small .credit-widget_visualization {
    height: 125px; }

.credit-widget_visualization_svg {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin-top: 3px;
  margin-bottom: 33px; }
  .credit-widget_visualization_svg > svg {
    width: 100%;
    height: 100%; }

.credit-widget_visualization_info {
  height: 100%; }

.credit-widget_visualization_score {
  line-height: 100%;
  font-size: 4.6rem; }
  .credit-widget.small .credit-widget_visualization_score {
    font-size: 3.6rem; }

.credit-widget_visualization_tier {
  width: 260px; }
  .credit-widget.small .credit-widget_visualization_tier {
    width: 180px; }

.credit-widget_banner {
  height: 100px;
  width: auto; }

/* CREDIT SCORE REQUIRED ACTION
    
    .credit-alert-banner                    A promotional image displayed within credit score required actions

*/
.credit-alert-banner {
  height: 100px;
  width: auto;
  display: block;
  margin: 0 auto; }
  @media print, (min-width: 768px) {
    .credit-alert-banner {
      margin-right: 0;
      margin-left: 25px; } }

/* SAVVYMONEY OFFER

    .savvy-offer                            A money-saving offer received from the SavvyMoney API and presented to the member.
                                            When clicked, the member is linked into the offer details on the SavvyMoney platform.
    .savvy-offer_title                      The title texts for the offer, which sits in the same row as the icon.
                                            Width is constrained to fit the icon tightly to the text in a consistent location across each offer.
                                            [Descendant of .savvy-offer]
    .savvy-offer_icon                       A PNG icon received via the SavvyMoney API.
                                            [Descendant of .savvy-offer]

*/
.savvy-offer_title {
  width: 10em; }

.savvy-offer_icon {
  height: 40px;
  width: auto; }

/* DASHBOARD NOTICE
    
    .dashboard-notice               A styled dashboard notice, i.e. Year End Reports and Tax Docs Available
                                    [Module parent]
    .dashboard-notice_title         A container for the title of the notice
                                    [Child of .dashboard-notice]
    .dashboard-notice_item          An item in the notice (anchor tag)
                                    [Child of .dashboard-notice]
    .dashboard-notice_item_icon     An icon in the item
                                    [Child of .dashboard-notice_item]
    .dashboard-notice_item_trigger  A trigger, i.e. icon-chevron-right, indicating tappability on XS, SM
                                    [Child of .dashboard-notice_item]
    .dashboard-notice_item_subtext  Subtext for the item
                                    [Child of .dashboard-notice_item]
   
    */
.dashboard-notice_title {
  display: none; }
  @media print, (min-width: 768px) {
    .dashboard-notice_title {
      display: table-cell;
      background-color: var(--bg-white-opacity-10);
      padding: .8571em 1.1429em; } }

.dashboard-notice_item {
  display: block;
  padding: .7857em 2.5714em .8571em 1.1429em;
  text-decoration: none;
  border-top: 1px solid var(--border-light-gray);
  position: relative; }
  @media print, (min-width: 768px) {
    .dashboard-notice_item {
      border-top: none;
      border-left: 1px solid var(--border-light-gray);
      padding: .7857em 1.1429em 1em; } }
  .dashboard-notice_item.first {
    border-top: none; }
  .hover a.dashboard-notice_item:hover,
  .hover a.dashboard-notice_item:focus,
  .hover a.dashboard-notice_item:active, a.dashboard-notice_item.active {
    background-color: var(--bg-gray-54-opacity-05); }

.dashboard-notice_item_icon:before {
  font-size: 20px;
  position: relative;
  top: 1px; }

.dashboard-notice_item_icon.icon-documents:before {
  top: 2px; }

.dashboard-notice_item_subtext {
  color: var(--text-light-gray); }
  .hover a.dashboard-notice_item:hover .dashboard-notice_item_subtext,
  .hover a.dashboard-notice_item:focus .dashboard-notice_item_subtext,
  .hover a.dashboard-notice_item:active .dashboard-notice_item_subtext,
  a.dashboard-notice_item.active .dashboard-notice_item_subtext {
    color: var(--text-gray-35); }

.dashboard-notice_item_trigger {
  position: absolute;
  top: 38%;
  right: 1.1429em; }
  @media print, (min-width: 480px) {
    .dashboard-notice_item_trigger {
      top: 35%; } }

/* DASHBOARD */
@media print, (min-width: 768px) {
  .dashboard-col-left {
    padding-right: 1.2em; } }

@media print, (min-width: 768px) {
  .dashboard-col-right {
    padding-left: 1.2em; } }

.dashboard-graph-bar {
  height: 1.7143em;
  width: 99%;
  background: var(--bg-white);
  border-radius: 1em;
  border: 0.1429em solid var(--border-gray); }
  .dashboard-graph-bar.goal {
    background: var(--bg-success) !important;
    border-color: var(--border-success); }

.dashboard-graph-footnote {
  color: var(--text-gray);
  margin: 0;
  padding: .3571em 0; }

/* WIDGET LARGE TEXT */
.widget-large-text {
  font-size: 3.8rem; }

/* DASHBOARD WIDGETS 
    .panel          A conatiner for a flippable panel with a front and back
                    [Module parent]
    .panel_front   A container for the front of the widget
                    [Child of .widget]
    .panel_back     A container for the back of the widget
                    [Child of .widget]
    
    */
.panel {
  height: 100%;
  width: 100%;
  margin: 0 auto;
  position: relative;
  perspective: 600px;
  transition: height .25s; }

.panel_front, .panel_back {
  transform: rotateX(0) rotateY(0);
  transform-style: preserve-3d;
  transition: transform .4s ease-in-out; }

.panel_front {
  position: static;
  transform: rotateX(0) rotateY(0);
  backface-visibility: hidden; }
  .panel.flip .panel_front {
    transform: rotateX(0) rotateY(180deg); }

.panel_back {
  position: absolute;
  top: 0;
  width: 100vw;
  transform: rotateX(0) rotateY(-180deg);
  backface-visibility: hidden; }
  @media print, (min-width: 768px) {
    .panel_back {
      width: 100%; } }

/*  
    DASHBOARD - HIDDEN PANEL (a.k.a. Widgets) this sets the styles for individual panels when they are hidden and hides the hidden panels when not in action mode
*/
.panel-hidden {
  display: none; }
  .action-mode .panel-hidden {
    display: block;
    margin-right: 54px; }
    @media (min-width: 768px) {
      .action-mode .panel-hidden {
        margin-right: 0; } }
    .action-mode .panel-hidden .sortable-overlay {
      display: none !important; }
    .action-mode .panel-hidden .sortable-item_head_title {
      opacity: .5; }

/* 
    DASHBOARD PANELS HIDDEN MODE - All Widgets have been hidden by the user.

    .panels-hidden-mode             The container for panels hidden mode on the dashboard
                                    "Panels Hidden mode" means the user has choosen to hide all their dashboard widgets.
                                    This class is set via JavaScript in response to the user hidding all their dashboard widgets.
                                    [Module parent]
    .panels-hidden-mode_show        A class applied to any element on the dashboard
                                    This element is shown when panels hidden mode is activated, i.e. links or buttons for an item that should be available while in panels hidden mode.
                                    [Child of .action-mode]
    .panels-hidden-mode_hide        A class applied to any element on the dashboard
                                    This element is hidden when panels hidden mode is activated, i.e. links or buttons for an item that shouldn't be available while in panels hidden mode.
                                    [Child of .action-mode]
*/
.panels-hidden-mode_show,
.panels-hidden-mode .panels-hidden-mode_hide {
  display: none !important; }

.panels-hidden-mode .panels-hidden-mode_show,
.panels-hidden-mode .action-mode_hide.panels-hidden-mode_show {
  display: block !important; }

.panels-hidden-mode .action-mode_hide.panels-hidden-mode_hide,
.panels-hidden-mode .action-mode_show.panels-hidden-mode_hide,
.panels-hidden-mode .action-mode_show.panels-hidden-mode_show {
  display: none !important; }

.action-mode .action-mode_show.panels-hidden-mode_hide,
.action-mode .action-mode_show.panels-hidden-mode_show,
.action-mode .action-mode_hide.panels-hidden-mode_show,
.action-mode .action-mode_hide.panels-hidden-mode_hide {
  display: none !important; }

.action-mode.panels-hidden-mode .action-mode_hide.panels-hidden-mode_show,
.action-mode.panels-hidden-mode .action-mode_show.panels-hidden-mode_hide,
.action-mode.panels-hidden-mode .action-mode_hide.panels-hidden-mode_hide {
  display: none !important; }

.action-mode.panels-hidden-mode .action-mode_show.panels-hidden-mode_show {
  display: block !important; }

/* 
    
    DASHBOARD EMPTY -  ADD A PANEL (a.k.a. Widget) 

    .add-panel      A special class added to a tile
                    This particular element appears on the dashboard when user has choosen to hide all the dashboard widgets.

*/
.tile.add-panel {
  border-width: 4px; }
  .tile.add-panel .tile_head {
    background-color: var(--bg-gray-87);
    border-radius: 0; }

.panel.flip .panel_back {
  transform: rotateX(0) rotateY(0); }

/* DASHBOARD ACCOUNTS WIDGET
    
    .dash-acct-sections         A container for the account sections (i.e. deposit, loans)
                                [Extends .list-group]
    .dash-acct-sections_title   The title of the account section
                                [Child of .dash-acct-sections]
    .dash-acct-sections_note    A note that sits to the right of the title
                                [Child of .dash-acct-sections]

    .dash-acct-list             A container for the list of individual accounts under any account section 
                                [Extends .list-group]

    */
.dash-acct-sections_title {
  float: left;
  font-weight: bold; }

.dash-acct-sections_note {
  position: relative;
  float: right;
  font-style: italic;
  top: 3px; }
  .dash-acct-sections_note .icon-triangle-up:before,
  .dash-acct-sections_note .icon-triangle-down:before {
    position: relative;
    top: 3px; }

.item-container.dash-acct-sections .basic-item {
  padding-top: .9em;
  padding-bottom: .8em; }
  .item-container.dash-acct-sections .basic-item:focus {
    outline: none; }

.item-container.dash-acct-list {
  border-bottom: 4px solid var(--border-light-gray); }

.dash-acct-sections > li:last-child .item-container.dash-acct-list {
  border-bottom: 0; }

.item-container.dash-acct-list li:first-child .basic-item {
  border-top-color: var(--border-white); }

.item-container.dash-acct-list .basic-item {
  padding-left: 2.2em; }
  @media print, (min-width: 768px) {
    .item-container.dash-acct-list .basic-item {
      padding-left: 2.6em; } }

/*
    ACCOUNT PAGE - OTHER ELEMENTS
   
    .mmt-category-choose        An anchor (a) used to launch into the category picker.
                                Used by the edit overlay and advanced search 

    .mmt-check-image            A check image (img)

*/
.mmt-category-choose {
  display: inline-block;
  text-decoration: none;
  padding: .2143em 0; }
  .mmt-category-choose.active {
    /* class added via javascript on tap for touch devices for visual feedback that item was tapped */
    background-color: var(--bg-faint-gray);
    border-radius: 3px;
    box-shadow: 0 0 0 3px var(--bg-faint-gray);
    /*extend outside bounds of element */ }

@media print, (min-width: 768px) {
  .mmt-check-image {
    max-width: 380px; } }

/*
    ACCOUNT PAGE - TRANSACTION LABELS 

    .mmt-label-*    A transaction label used in account history
                    
*/
[class*="mmt-label-"] {
  display: inline-block;
  padding: .1429em .3571em;
  margin-right: .3571em;
  font-size: 1.2rem;
  border-radius: .2143em;
  line-height: 1;
  max-width: 100%;
  text-overflow: ellipsis;
  overflow: hidden; }
  @media print, (min-width: 768px) {
    [class*="mmt-label-"] {
      font-size: 1.1rem; } }

/*When a long label with no spaces is inside an input-group_option_text which has display:table-cell, 
    it will take up as much width as possible, regardless of the container's width (it will stretch out past the container, i.e. a modal container)
    It won't honor the overlow:ellipsis or breakword.
    So set the max width to prevent overflow from happening.
    This works for the situations where we are curently using labels in check box lists, but might need further thought if
    different situations arise. */
.input-group_option_text [class*="mmt-label-"] {
  max-width: 50%; }
  @media print, (min-width: 480px) {
    .input-group_option_text [class*="mmt-label-"] {
      max-width: 100%; } }

.mmt-label-1 {
  background: var(--label-purple);
  color: var(--text-white);
  border: 1px solid var(--label-purple); }

.mmt-label-2 {
  background: var(--bg-white);
  color: var(--label-purple-text);
  border: 1px solid var(--label-purple); }

.mmt-label-3 {
  background: var(--bg-success);
  color: var(--label-green-1-text);
  border: 1px solid var(--border-success); }

.mmt-label-4 {
  background: var(--bg-white);
  color: var(--label-green-2-text);
  border: 1px solid var(--border-success); }

.mmt-label-5 {
  background: var(--bg-warn);
  color: var(--label-orange-1-text);
  border: 1px solid var(--border-warn); }

.mmt-label-6 {
  background: var(--bg-white);
  color: var(--label-orange-2-text);
  border: 1px solid var(--border-warn); }

.mmt-label-7 {
  background: var(--bg-info);
  color: var(--label-blue-1-text);
  border: 1px solid var(--border-info); }

.mmt-label-8 {
  background: var(--bg-white);
  color: var(--label-blue-2-text);
  border: 1px solid var(--border-info); }

.mmt-label-9 {
  background: var(--label-brown);
  color: var(--label-brown-1-text);
  border: 1px solid var(--label-brown); }

.mmt-label-10 {
  background: var(--bg-white);
  color: var(--label-brown-2-text);
  border: 1px solid var(--label-brown); }

.mmt-label-11 {
  background: var(--label-yellow);
  color: var(--label-yellow-1-text);
  border: 1px solid var(--label-yellow); }

.mmt-label-12 {
  background: var(--bg-white);
  color: var(--label-yellow-2-text);
  border: 1px solid var(--label-yellow); }

.mmt-label-13 {
  background: var(--bg-primary);
  color: var(--text-white);
  border: 1px solid var(--border-primary); }

.mmt-label-14 {
  background: var(--bg-white);
  color: var(--text-primary);
  border: 1px solid var(--border-primary); }

.mmt-label-15 {
  background: var(--bg-gray-34);
  color: var(--text-white);
  border: 1px solid var(--border-gray-34); }

.mmt-label-16 {
  background: var(--bg-white);
  color: var(--text-gray-34);
  border: 1px solid var(--border-gray-34); }

/* MMT TRANSACTIONS

    .mmt-header-buttons                 A container for the buttons in the pending or posted items header
                                        [Module parent]

    .mmt-search-input-field             The search field that is being hidden and show when clicking on the search icon
                                        [Child of .mmt-header-buttons]

    .mmt-search-options                 The Edit Multiple, Options buttons being animated to hide and show with opening of the .mmt-search-input-field
                                        [Child of .mmt-header-buttons]

    .mmt-advanced-search-options        The Advanced Search and Saved Search buttons  buttons being animated to hide and show with opening of the .mmt-search-input-field
                                        [Child of .mmt-header-buttons]

    .mmt-pending                        The pending items section 
                                        [Module parent]
    .mmt-pending_list                   The list of pending items 
                                        [Child of .mmt-pending]
    
    .pending-items-open                  A class added via javscript when pending items is open
                                        [Module parent; Extends .mmt-pending]

    .pending-items-open_show            Show these items when pending items is open
                                        [Child of .mmt-pending]
    .pending-items-open_hide              Hide these items when pending items is open
                                        [Child of .mmt-pending]

    .mmt-posted                         The posted items section 
                                        [Module parent]
    
    .mmt-transaction                    A table row with a transaction
                                        [Module parent]

     .updated                           A class applied via javascript to highlight the item that was updated, by applying a background color.
                                        Javascript fades the background color out after a short period of time.
                                        [Extends .mmt-transaction]

    .mmt-transaction_category           A table cell with the transaction category
                                        [Child of .mmt-transaction]
        
    .mmt-transaction_manual             A table cell with the man icon for manual pending items
                                        [Child of .mmt-transaction]
         
    .mmt-transaction_details            A table cell with the transaction details, including description, notes, labels
                                        [Child of .mmt-transaction]

    .mmt-transaction_details_text       Text for the details with a right margin so it does overlap the icon on mobile
                                        [Child of .mmt-transaction_details]

    .mmt-transaction_details_icon       The ... icon to indicate opening more (modal)
                                        [Child of .mmt-transaction_details]

    .mmt-transaction_amount             A table cell with the transaction amount
                                        [Child of .mmt-transaction]

    

    .mmt-transaction_running-balance            A table cell with the running balance
                                                [Child of .mmt-transaction]
    .mmt-transaction_running-balance_amount     A container with the dollar amount; Used for styling the negative balance when necessary
                                                [Child of .mmt-transaction_running-balance]
  
    .mmt-transaction_delete             A table cell with the trash can icon to delete a pending item
                                        [Child of .mmt-transaction]

    

   
*/
.mmt-transaction_date, .mmt-transaction_amount, .mmt-running-balance {
  height: 0;
  padding: 0; }
  @media print, (min-width: 768px) {
    .mmt-transaction_date, .mmt-transaction_amount, .mmt-running-balance {
      height: auto;
      padding: 1em 1.2em; } }

.action-mode .mmt-transaction_category, .action-mode .mmt-transaction_manual, .action-mode .mmt-transaction_details, .action-mode .mmt-transaction_date, .action-mode .mmt-transaction_amount, .action-mode .mmt-transaction_delete {
  color: var(--text-gray);
  cursor: default; }

.hover .action-mode a.mmt-transaction_category:hover, .hover .action-mode a.mmt-transaction_manual:hover, .hover .action-mode a.mmt-transaction_details:hover, .hover .action-mode a.mmt-transaction_date:hover, .hover .action-mode a.mmt-transaction_amount:hover, .hover .action-mode a.mmt-transaction_delete:hover,
.hover .action-mode a.mmt-transaction_category:focus,
.hover .action-mode a.mmt-transaction_manual:focus,
.hover .action-mode a.mmt-transaction_details:focus,
.hover .action-mode a.mmt-transaction_date:focus,
.hover .action-mode a.mmt-transaction_amount:focus,
.hover .action-mode a.mmt-transaction_delete:focus,
.hover .action-mode a.mmt-transaction_category:active,
.hover .action-mode a.mmt-transaction_manual:active,
.hover .action-mode a.mmt-transaction_details:active,
.hover .action-mode a.mmt-transaction_date:active,
.hover .action-mode a.mmt-transaction_amount:active,
.hover .action-mode a.mmt-transaction_delete:active, .action-mode a.active.mmt-transaction_category, .action-mode a.active.mmt-transaction_manual, .action-mode a.active.mmt-transaction_details, .action-mode a.active.mmt-transaction_date, .action-mode a.active.mmt-transaction_amount, .action-mode a.active.mmt-transaction_delete {
  background-color: var(--bg-white);
  color: var(--text-gray); }

.hover a.mmt-transaction_category:hover, .hover a.mmt-transaction_manual:hover, .hover a.mmt-transaction_details:hover, .hover a.mmt-transaction_date:hover, .hover a.mmt-transaction_amount:hover, .hover a.mmt-transaction_delete:hover,
.hover a.mmt-transaction_category:focus,
.hover a.mmt-transaction_manual:focus,
.hover a.mmt-transaction_details:focus,
.hover a.mmt-transaction_date:focus,
.hover a.mmt-transaction_amount:focus,
.hover a.mmt-transaction_delete:focus,
.hover a.mmt-transaction_category:active,
.hover a.mmt-transaction_manual:active,
.hover a.mmt-transaction_details:active,
.hover a.mmt-transaction_date:active,
.hover a.mmt-transaction_amount:active,
.hover a.mmt-transaction_delete:active, a.active.mmt-transaction_category, a.active.mmt-transaction_manual, a.active.mmt-transaction_details, a.active.mmt-transaction_date, a.active.mmt-transaction_amount, a.active.mmt-transaction_delete {
  background-color: var(--bg-faint-gray); }

a.mmt-transaction_category:focus, a.mmt-transaction_manual:focus, a.mmt-transaction_details:focus, a.mmt-transaction_date:focus, a.mmt-transaction_amount:focus, a.mmt-transaction_delete:focus {
  outline: none; }

.pending-items-open_show {
  display: none; }
  .pending-items-open .pending-items-open_show {
    display: block; }
  .pending-items-open_show.table-row, .pending-items-open_show .basic-item {
    display: none; }
    .pending-items-open .pending-items-open_show.table-row, .pending-items-open .pending-items-open_show .basic-item {
      display: block; }
    @media (min-width: 768px) {
      .pending-items-open .pending-items-open_show.table-row, .pending-items-open .pending-items-open_show .basic-item {
        display: table-row; } }

.pending-items-open_hide {
  display: block; }
  .pending-items-open .pending-items-open_hide {
    display: none; }

.pending-items-loading {
  transition: opacity 1s;
  opacity: 1;
  visibility: visible; }
  .pending-items-loading.hidden {
    overflow: hidden;
    width: 0;
    height: 0;
    margin: 0;
    opacity: 0;
    visibility: hidden; }

.mmt-header-buttons.row {
  margin-left: -1.2em;
  margin-right: -1.2em;
  text-align: center;
  padding: .8em 0 1.8em; }
  .no-pending-items .mmt-header-buttons.row {
    padding: .25em 0 .5em; }
  .mmt-pending .mmt-header-buttons.row {
    display: -ms-flexbox;
    display: flex; }
  .pending-items-open .mmt-header-buttons.row,
  .no-pending-items .mmt-header-buttons.row {
    display: -ms-flexbox;
    display: flex; }
  @media print, (min-width: 768px) {
    .mmt-header-buttons.row {
      margin: 0;
      text-align: left; }
      .mmt-posted .mmt-header-buttons.row,
      .mmt-pending .mmt-header-buttons.row {
        display: -ms-flexbox;
        display: flex;
        padding-top: .7em;
        padding-bottom: .7em; } }

.mmt-transaction {
  /*&.selected { // commenting this out for now because none of the other select/edit multiple do this
        background-color: $mmt-transaction-selected-background;
    }*/ }
  .mmt-transaction.updated {
    background-color: var(--brand-blue-bg-lighten-55) !important; }

.mmt-transaction_manual {
  padding-right: 0;
  padding-left: 1em; }

.mmt-transaction_details {
  position: relative;
  padding-top: 2.4em; }
  @media print, (min-width: 768px) {
    .mmt-transaction_details {
      padding-top: 1em;
      padding-right: 3em;
      padding-left: .75em;
      width: 100%; } }

.mmt-transaction_details_text {
  margin-right: 3rem; }
  @media print, (min-width: 768px) {
    .mmt-transaction_details_text {
      margin-right: 0; } }

.mmt-transaction_details_icon {
  position: absolute;
  right: 1.6em;
  bottom: .5em;
  color: var(--text-faint-gray); }
  @media print, (min-width: 768px) {
    .mmt-transaction_details_icon {
      right: .75em;
      top: 40%; } }
  .hover .mmt-transaction_details:hover .mmt-transaction_details_icon,
  .hover .mmt-transaction_details:focus .mmt-transaction_details_icon,
  .hover .mmt-transaction_details:active .mmt-transaction_details_icon,
  .mmt-transaction_details.active .mmt-transaction_details_icon {
    color: var(--text-gray); }

.mmt-transaction_date {
  position: relative;
  z-index: 1;
  white-space: nowrap; }
  @media print, (min-width: 768px) {
    .mmt-transaction_date {
      padding-left: 1em; } }
  .mmt-transaction_date .date {
    position: absolute;
    top: .5em;
    left: 1.2em; }
    .action-mode .mmt-transaction_date .date {
      left: 5.1em; }
    @media print, (min-width: 768px) {
      .mmt-transaction_date .date {
        position: relative;
        top: -2px; }
        .mmt-transaction_date .date,
        .action-mode .mmt-transaction_date .date,
        .mmt-pending .mmt-transaction_date .date {
          left: auto; } }

.mmt-transaction_amount {
  text-align: right; }
  .mmt-transaction_amount .amt {
    position: absolute;
    top: .9em;
    right: 1.2em; }
    @media print, (min-width: 768px) {
      .mmt-transaction_amount .amt {
        position: relative;
        top: auto;
        right: auto; } }

.mmt-running-balance {
  text-align: right; }
  .mmt-running-balance_amt {
    position: absolute;
    top: -.9em;
    left: 30%;
    right: 30%;
    text-align: center;
    background: var(--bg-faint-gray);
    border-radius: 20px;
    padding: .2em 0; }
    @media print, (min-width: 768px) {
      .mmt-running-balance_amt {
        position: relative;
        top: auto;
        left: auto;
        right: auto;
        text-align: right;
        background: transparent;
        padding: 0;
        white-space: nowrap; } }
    .mmt-running-balance_amt.balance-warning {
      background: var(--bg-warn);
      color: var(--text-white);
      line-height: 1; }
      @media print, (min-width: 768px) {
        .mmt-running-balance_amt.balance-warning {
          border-radius: 3px;
          padding: .3em .5em; } }

.mmt-pending {
  margin-bottom: 1.3em; }
  @media print, (min-width: 768px) {
    .mmt-pending {
      margin-bottom: 3rem; } }

.mmt-pending_list {
  display: block; }
  .pending-items-open .mmt-pending_list,
  .no-pending-items .mmt-pending_list {
    display: block; }
  @media print, (min-width: 768px) {
    .mmt-pending_list {
      display: block;
      border-top: none; } }
  .mmt-pending_list .basic-item {
    padding-left: 3em; }
    @media print, (min-width: 768px) {
      .mmt-pending_list .basic-item {
        padding-left: 0; } }

.mmt-transaction_delete {
  width: 3em;
  position: absolute;
  bottom: 0;
  top: 0;
  left: 0;
  text-decoration: none; }
  @media print, (min-width: 768px) {
    .mmt-transaction_delete {
      position: relative;
      top: auto;
      left: auto;
      bottom: auto; } }
  .mmt-transaction_delete .icon-trash {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -.9em;
    margin-left: -.4em; }
    @media print, (min-width: 768px) {
      .mmt-transaction_delete .icon-trash {
        position: relative;
        top: auto;
        left: auto;
        margin-left: 0;
        margin-right: 0; } }

.mmt-search-input-field {
  display: inline-block;
  margin-right: .15em;
  text-align: left;
  opacity: 1;
  visibility: visible; }
  @media print, (max-width: 767px) {
    .mmt-search-input-field {
      max-width: 72.5%; } }
  .mmt-search-input-field,
  .mmt-search-input-field .input-append_input {
    transition: width .25s ease-out; }
  .mmt-search-input-field.hidden {
    display: inline-block !important;
    overflow: hidden;
    width: 0;
    height: 0;
    margin: 0;
    visibility: hidden; }
    .mmt-search-input-field.hidden .input-append_input {
      width: 0; }

.mmt-search-options, .mmt-advanced-search-options {
  display: inline-block;
  transition: opacity 1s;
  opacity: 1;
  visibility: visible; }
  .hidden.mmt-search-options, .hidden.mmt-advanced-search-options {
    display: inline-block !important;
    overflow: hidden;
    width: 0;
    height: 0;
    margin: 0;
    opacity: 0;
    visibility: hidden; }

.mmt-advanced-search-options {
  margin-top: .5em; }
  @media print, (min-width: 480px) {
    .mmt-advanced-search-options {
      margin-top: 0; } }

/* ALL ACCOUNTS */
.all-account-totals {
  display: none !important; }
  @media print, (min-width: 768px) {
    .all-account-totals.table-row {
      display: table-row !important; } }

.all-account-hide-sm {
  display: none; }
  @media print, (min-width: 768px) {
    .all-account-hide-sm {
      display: table-cell; } }

.all-account-row {
  display: block; }
  @media print, (min-width: 768px) {
    .all-account-row .hover .all-account-row:focus {
      outline-style: none; } }
  @media print, (min-width: 768px) {
    .hover .all-account-row:hover .table-cell,
    .hover .all-account-row:focus .table-cell,
    .hover .all-account-row:active .table-cell,
    .all-account-row.active .table-cell {
      background: var(--bg-faint-gray); } }
  @media print, (min-width: 768px) {
    .all-account-row.forward:before {
      content: none; } }

/* ACCOUNT PAGE 
    .account-header                 The header on the account page which includes the account nickname and applicable actions.
                                    [Module parent]

    .account-header_title           A container to control min height on the account title so it remains at least as tall as the list of actions next to it on MD+.                            
                                    [Child of .account-header]

    .account-header_title-tall      A container to control min height on the account title when there isn't an extra list-group_item (i.e. Debit Card or Loan Payment) under the account-title.
                                    [Child of .account-header]

    .account-header_actions         The actions section 
                                    To the right of the title (MD+)
                                    Under the title (XS, SM)
*/
.account-header_title, .account-header_title-tall {
  min-height: 4.3em; }
  @media print, (min-width: 768px) {
    .account-header_title, .account-header_title-tall {
      min-height: 6.3em; } }
  @media print, (min-width: 768px) {
    .account-header_title-tall {
      min-height: 8.9em; } }

@media print, (min-width: 768px) {
  .link-area .link-area_content_inner.account-header_title, .link-area .link-area_content_inner.account-header_title-tall {
    padding-bottom: .5714em; } }

.account-header_actions {
  margin: -2px 1px 0; }
  @media print, (min-width: 768px) {
    .account-header_actions {
      padding-left: 0;
      margin: 2px 0 0; } }

.account-header {
  /*PRINT STYLES FOR ACCOUNT HEADER */ }
  @media print, (min-width: 768px) {
    .account-header {
      padding-right: 0; } }
  @media print {
    .account-header {
      width: 98%;
      margin-bottom: 1em; }
      .account-header .tile {
        border-top: 0.1em solid var(--border-light-gray);
        border-bottom: 0.1em solid var(--border-light-gray);
        border-left: 1px solid var(--border-white);
        border-right: 1px solid var(--border-white);
        border-radius: 0;
        box-shadow: none; }
      .account-header .list-group_item {
        border-top: 1px solid var(--border-white); }
      .account-header .list-group_item .link-area_content_inner {
        padding-left: 56px;
        margin-top: -1em; } }

/* ACCOUNT PAGE - SPLITTING ITEMS

    .split-icon-cell        The cell containing the split icon
                            This class manages the padding throughout the breakpoints

    .split-edit-cell        The cell containing the form input

    .split-delete-cell      The cell containing the delete "X"

    .split-category-cell    The cell containing the category for the split item

*/
.table-row > .table-cell.split-icon-cell {
  padding-left: 0;
  padding-right: 0;
  padding-top: .7143em; }
  @media print, (min-width: 480px) {
    .table-row > .table-cell.split-icon-cell {
      padding-left: .5em;
      padding-top: .8571em; } }
  @media print, (min-width: 480px) {
    .table-row > .table-cell.split-icon-cell {
      padding-top: 1.4286em; } }

.table-row > .table-cell.split-edit-cell {
  padding-left: .5em; }
  @media print, (min-width: 480px) {
    .table-row > .table-cell.split-edit-cell {
      padding-left: 1.1429em; } }

.table-row > .table-cell.split-delete-cell {
  padding-right: .5em;
  padding-left: 0; }
  @media print, (min-width: 480px) {
    .table-row > .table-cell.split-delete-cell {
      vertical-align: middle;
      padding-right: 1.1429em; } }

@media print, (min-width: 768px) {
  .table-row > .table-cell.split-category-cell {
    padding-top: .7143em;
    min-width: 12em; } }

.split-amount-prepend {
  max-width: 11em; }
  .split-amount-prepend .split-amount-prepend {
    max-width: 8em; }

.split-remainder {
  background-color: var(--bg-gray-96);
  font-weight: bold; }
  .split-remainder:focus {
    border: 1px solid var(--border-gray-80); }
  @media print, (min-width: 480px) {
    .split-remainder {
      padding-top: .5em; } }

.account-actions_container {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
  flex-direction: column;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -ms-flex-align: start;
  align-items: flex-start;
  gap: 1rem; }
  @media print, (min-width: 768px) {
    .account-actions_container {
      -ms-flex-direction: row;
      flex-direction: row;
      -ms-flex-pack: justify;
      justify-content: space-between;
      -ms-flex-align: center;
      align-items: center;
      gap: 0; } }

.account-actions_header {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
  flex-direction: column;
  width: 100%; }

.account-actions_linkcontainer {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: end;
  justify-content: flex-end;
  width: 100%; }

.account-actions_linkcontainer > :not(:last-child) {
  width: 100%;
  white-space: nowrap; }
  @media print, (min-width: 768px) {
    .account-actions_linkcontainer > :not(:last-child) {
      width: auto; } }

.mfr-statements-button {
  position: absolute;
  top: 0;
  right: 0; }

/*

    .account-warning    A small warning about low balance, payment overdue, etc. that appears near an account; 
                        Used when account is on a dark background (i.e. in the mobile header or the nav)
                        [Module parent]
*/
.account-warning {
  display: inline-block;
  border-radius: 3px;
  color: var(--text-white);
  width: auto;
  padding: 0 .8em;
  margin: .5em auto;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: 1.2rem;
  font-weight: 500; }
  @media (min-width: 768px) {
    .account-warning {
      padding: 0 1.2em;
      font-size: 1.1rem; } }

/* REPORTS */
.spending-report-list-item {
  border-top-width: 5px; }
  @media print, (min-width: 768px) {
    .spending-report-list-item {
      border-top-width: 1px; } }

.spending-report-legend {
  padding-top: 1px; }
  @media print, (min-width: 768px) {
    .spending-report-legend {
      padding-left: .4286em; } }

.report-pie {
  padding: 0; }

.report-bar {
  padding: 1em .3571em 0 0; }
  @media print, (min-width: 768px) {
    .report-bar {
      padding: 2em 2em 0 0; } }

.report-line {
  padding: 2em .3571em 0 0; }
  @media print, (min-width: 768px) {
    .report-line {
      padding: 3em 2em 2em 1em; } }

.legend-color {
  display: inline-block;
  width: 1em;
  height: 1em;
  border-radius: .2857em; }

/*  todo: Remove?
    PAGE ROUNDED ACTION BUTTONS
    .page-action-btn   A global button for a page which appears to the right of the page title.
                       [Module parent]
*/
.page-action-btn {
  margin-top: -.2857em;
  float: right; }
  @media print, (min-width: 768px) {
    .page-action-btn {
      margin-top: .3571em; } }
  .page-action-btn [class*=icon-] {
    position: relative;
    top: 3px; }
    @media print, (min-width: 768px) {
      .page-action-btn [class*=icon-] {
        top: 0;
        vertical-align: middle; } }
    .page-action-btn [class*=icon-].small {
      top: 0; }
      @media print, (min-width: 768px) {
        .page-action-btn [class*=icon-].small {
          top: -2px; } }
  .page-action-btn.activity-btn {
    padding-left: 1.0714em;
    padding-right: .3571em; }
    @media print, (min-width: 480px) {
      .page-action-btn.activity-btn {
        padding-left: 2.1429em;
        padding-right: 1.4286em; } }

/* TODO: remove? not sure we are using this anymore
    PAGE INPUT 

    .page-action-input  A global input element for a page which appears to the right of the page title.
                        This class adjusts the vertical alignment on XS, SM screens
                        Example: search box
                        [Module parent]   
*/
.page-action-input {
  margin-top: -.5714em; }
  @media print, (min-width: 768px) {
    .page-action-input {
      margin-top: 0; } }

/* 
    LIST FILTER MENUS

    .list-filter       A filter drop down list for a list page, which appears to the right of the page title.
                       [Module parent]

*/
.list-filter {
  margin-top: .25em;
  margin-bottom: 1.25em; }
  @media print, (min-width: 768px) {
    .list-filter {
      float: right;
      margin-top: 0;
      margin-bottom: 0; } }

/* DATA LIST TITLE
    .data-list_title    In the Web Branch template, extend the data-list_title tothe edge of the screen on XS, SM
*/
.data-list_title {
  margin-left: -0.5714em;
  margin-right: -0.5714em; }
  @media print, (min-width: 768px) {
    .data-list_title {
      margin-left: 0;
      margin-right: 0; } }

.tile-convertible .tile_head {
  margin-left: -0.5714em;
  margin-right: -0.5714em; }
  @media print, (min-width: 768px) {
    .tile-convertible .tile_head {
      margin-left: 0;
      margin-right: 0; } }

/*LOGIN  - MESSAGES, FORM AND MARKETING AD
    .login-message          A container for a login message - error, sucess, etc.
                            [Module parent]
    .login-area             The section of the login  page devoted to logging in. 
                            Contains a large Marketing ad image behind the login box on MD+
                            [Module parent]


    // OLD (keeping this option available for feature-gating purposes; can remove it once feature gate is removed)
    .login-area_offer-img   An ad image
                            [Child of .login-area]
    .login-area_offer-link  A link positioned over the Marketing ad.
                            MD - over the right 40% of the image
                            LG/XL - over the right 30% of the image
                            [Child of .login-area]
    // End OLD

    // NEW - with iframe
    .login-area_click-blocker     A div to block clicks on the left 55% of the image, to prevent accidental clicks onthe ad while interacting on or near the login form.
                                  [Child of .login-area]

    .login-offer                  A container for an iframe with the Marketing ad
                                  [Module Parent]
    // End NEW


    .login-form             A container for the login form
                            [Module parent; Child of .login-area]
    .login-form_util        A utility link in the login form, i.e. reset password, new user
                            [Child of .login-form]
*/
.login-message {
  margin: .4286em 0 .5714em; }
  @media print, (min-width: 768px) {
    .login-message {
      margin: .8em 0 1em; } }
  .login-message > :last-child {
    margin-bottom: 0; }
  @media print, (min-width: 768px) {
    .login-message > .box {
      margin: 0 0 1.4286em; } }

.login-area {
  padding: 0 0 .4286em; }
  @media print, (min-width: 768px) {
    .login-area {
      margin-bottom: 1.4286em;
      min-height: 28em;
      position: relative;
      padding: 0; } }
  @media (min-width: 980px) {
    .login-area {
      min-height: 24em; } }
  .login-area_click-blocker {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 45%; }
  @media print, (min-width: 768px) {
    .login-area_offer-img {
      border: 1px solid var(--border-gray-87);
      border-radius: .2143em; } }
  @media print, (min-width: 768px) {
    .login-area_offer-link {
      position: absolute;
      top: 0;
      bottom: 0;
      right: 0;
      left: 55%; } }
  @media (min-width: 980px) {
    .login-area_offer-link {
      left: 65%; } }

.login-offer {
  position: relative;
  height: 0;
  margin-left: -1.2em;
  margin-right: -1.2em;
  overflow: hidden;
  padding-bottom: 33.93%; }
  @media print, (min-width: 480px) {
    .login-offer {
      padding-bottom: 13.01%; } }
  @media print, (min-width: 768px) {
    .login-offer {
      padding-bottom: 54.23%;
      margin-left: 0;
      margin-right: 0; } }
  @media (min-width: 980px) {
    .login-offer {
      padding-bottom: 36.73%; } }
  .login-offer iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background-color: transparent;
    border: none;
    padding: 0; }
    @media print, (min-width: 768px) {
      .login-offer iframe {
        border-radius: .2143em;
        border: 1px solid var(--border-gray-87); } }

@media print, (min-width: 768px) {
  .login-form {
    position: absolute;
    top: 16px;
    left: 16px;
    width: 19em; } }

@media (min-width: 980px) {
  .login-form {
    width: 22em; } }

.login-form .tile {
  padding: 1.2em 0 0; }

.login-form .input-group {
  margin-bottom: .3571em; }
  @media print, (min-width: 768px) {
    .login-form .input-group {
      margin-bottom: .7143em; } }

.login-form .logo-verifyu {
  min-width: 80px; }
  @media print, (min-width: 768px) {
    .login-form .logo-verifyu {
      margin-top: .8em;
      position: relative;
      right: -5px; } }
  @media (min-width: 980px) {
    .login-form .logo-verifyu {
      margin-top: 0;
      right: 0;
      max-height: 34px; } }

.login-form_util {
  padding: 1.5em 1.3em;
  line-height: 1;
  text-decoration: none;
  color: var(--text-info);
  font-size: 1.4rem; }
  @media (min-width: 768px) {
    .login-form_util {
      font-size: 1.2rem; } }
  .hover .login-form_util:focus {
    outline-style: solid; }
    @media print, (min-width: 768px) {
      .hover .login-form_util:focus {
        outline: 1px dotted var(--focus-outline-link); } }
  .login-form_util.right {
    padding-left: 1em; }
    @media (min-width: 768px) {
      .login-form_util.right {
        padding-left: .8em; } }
  .login-form_util.left {
    padding-right: 1em; }
    @media (min-width: 768px) {
      .login-form_util.left {
        padding-right: .8em; } }
  .hover .login-form_util:hover,
  .hover .login-form_util:active,
  .hover .login-form_util:focus, .login-form_util.active {
    color: var(--text-link-active-extra-dark); }

/* LOGIN - NEWS & BLOG 

    .login-content-container        A container for the Press Releases and Release Notes 
                                    Sets the background color and margins

    .login-content                  A container for for page content - news & blog
                                    [Module parent]

    .col-releases                   Both columns for New Releases and Release Notes
                                    Remove standard col padding on XS and SM so that content goes edge to edge
                                    Uses regular col padding at MD+

    .login-content_details          Details are the release date and the "New Release" tag
                                    [Child of .login-content]


    */
.login-content-container {
  background-color: var(--bg-white);
  margin-top: 0;
  margin-bottom: 0;
  margin-left: -1.2em;
  margin-right: -1.2em; }
  @media (min-width: 768px) {
    .login-content-container {
      margin: 0; } }

@media (min-width: 768px) {
  .login-content {
    padding-top: 2em;
    padding-left: 0;
    padding-right: 0;
    margin: 0 auto;
    text-align: left;
    width: 96%;
    max-width: 70em; } }

.login-content.item-container {
  border-bottom: 5px solid var(--border-light-gray); }
  @media print, (min-width: 768px) {
    .login-content.item-container {
      border-bottom: 0; } }

@media (max-width: 767px) {
  .col-releases {
    padding: 0; } }

@media print, (min-width: 768px) {
  .login-content_details {
    font-size: 1.1rem;
    white-space: nowrap; } }

/* MENU NOTICE
    .menu-notice               A styled menu notice, i.e. Year End Reports and Tax Docs Available
                               [Module parent]
    .menu-notice_title         A container for the title of the notice 
                               [Child of .menu-notice]
    .menu-notice_item          An item in the notice (anchor tag)
                               [Child of .menu-notice]
    .menu-notice_item_icon     An icon in the item
                               [Child of .menu-notice_item]
    .menu-notice_item_subtext  Subtext for the item
                               [Child of .dashboard-notice_item]
    
    */
.menu-notice {
  border-top: 1px solid var(--border-gray-85);
  background-color: transparent; }
  @media print, (min-width: 480px) {
    .menu-notice {
      padding-left: 5%; } }

.menu-notice_title {
  color: var(--text-gray);
  padding: 0 .5em;
  text-align: center; }
  @media print, (min-width: 480px) {
    .menu-notice_title {
      text-align: left;
      padding-left: 0; } }
  @media print, (min-width: 768px) {
    .menu-notice_title {
      padding-right: 1em; } }

.menu-notice_item {
  display: block;
  text-decoration: none;
  padding: 1.2143em 0 1.2857em;
  border-left: 1px solid var(--border-light-gray);
  text-align: center; }

a.menu-notice_item {
  text-transform: none;
  letter-spacing: normal;
  line-height: 1.4; }

.menu-notice_item_icon:before {
  color: var(--text-gray);
  font-size: 18px;
  position: relative;
  top: 1px; }

.menu-notice_item_icon.icon-documents:before {
  top: 2px; }

.menu-notice_item_subtext {
  color: var(--text-light-gray); }

/* WEB PAY */
.multipay-memo-col,
.multipay-from-col {
  padding-right: 0; }
  @media print, (min-width: 768px) {
    .multipay-memo-col,
    .multipay-from-col {
      padding-right: 2.8571em; } }

/* ORDER CHECKS */
.check-style-thumb {
  width: 100%;
  max-width: 350px; }

/* SECURE MESSAGES

    .secure-message                 A container for the secure message
                                    [Module Parent]
  
*/
.secure-message .prepend-icon {
  padding-left: 2em; }
  @media (min-width: 768px) {
    .secure-message .prepend-icon {
      padding-left: 2.7em; } }

/* COMPOSE NEW MESSAGE

    .compose-question-col   A column containing a link to the help system
                            Need this class to adjust the horizontal spacing at MD+ to allow enough room for the content without line wrapping
*/
@media print, (min-width: 768px) {
  .compose-question-col {
    padding-left: .3571em; } }

/* RELEASE NOTES 
    
    .release-notes          A container for an individual release notes listing
                            Handles styling for child hr and img tags included in the listing via the TinyMCE editor
                            [Module parent]

*/
@media print, (min-width: 768px) {
  .release-notes {
    padding: .7143em; } }

.release-notes hr {
  clear: both;
  margin-top: 1.4286em;
  margin-bottom: 1.4286em; }
  @media print, (min-width: 768px) {
    .release-notes hr {
      margin-top: 2.1429em;
      margin-bottom: 2.1429em; } }

@media print, (min-width: 768px) {
  .release-notes ul.right-md {
    width: 64%;
    margin-left: 0; } }

.release-notes img {
  display: block;
  border: 4px solid var(--border-white);
  box-shadow: 1px 1px 4px 0 var(--box-shadow-black-opacity-20);
  margin-bottom: 2.1429em;
  position: relative;
  text-align: center;
  margin-left: auto;
  margin-right: auto; }
  @media print, (min-width: 480px) {
    .release-notes img {
      max-width: 80%; } }
  @media print, (min-width: 768px) {
    .release-notes img {
      text-align: left;
      margin-left: 0;
      margin-right: 0;
      max-width: 40%; } }
  .release-notes img.no-deco {
    border: none;
    box-shadow: none; }
  .release-notes img.narrow {
    max-width: 80%; }
    @media print, (min-width: 480px) {
      .release-notes img.narrow {
        max-width: 50%; } }
    @media print, (min-width: 768px) {
      .release-notes img.narrow {
        max-width: 25%; } }
  @media print, (min-width: 768px) {
    .release-notes img.left-md {
      float: left;
      margin-right: 3em; } }
  @media print, (min-width: 768px) {
    .release-notes img.right-md {
      float: right;
      margin-left: 3em; } }

/* 
    ALERTS PAGE
   - todo: unify pending items cards and alert cards nested in a tile in mobile.
   - todo: .tile-convertible.[some class name here,not sure what it should be? dark-until-md?]

*/
.tile.alerts {
  background-color: var(--bg-gray-87); }
  @media (min-width: 768px) {
    .tile.alerts {
      background-color: var(--bg-white); } }
  .tile.alerts .tile_body {
    padding: 0 10px; }
    @media (min-width: 768px) {
      .tile.alerts .tile_body {
        padding: 0; } }
  .tile.alerts .list-group-convertible {
    margin-bottom: 25px; }
    @media (min-width: 768px) {
      .tile.alerts .list-group-convertible {
        margin-bottom: 0; } }

/* todo: create a generic, all-purpose solution, such as (if this is done, leave the CSS here and add documentation for .has-tab-titles, add example to styleguide)
                .list-group-convertible.has-tab-titles li:nt:nth-child(2) .ribbon
    */
@media (min-width: 768px) {
  .alerts .list-group-convertible li:nth-child(2) .ribbon {
    margin-top: 6px; } }

/*NOTIFICATIONS MANAGEMENT GROUP
    
    .notification-group                     A container for the notifications with is a list-group
                                            [Module parent]
    .notification-group_description         Contains the circular empty icon, the title and short description of the notification group
                                            Selecting this turns the entire notification group on and off
                                            [Child of notification-group ]
    .notification-group_delivery            A container for the notification delivery options
                                            [Child of notification-group ]
    .notification-group_delivery_option     The individual delivery type options: email(s), text and push
                                            Selecting one of these options sets your delivery preference for the entire group
                                            [Child of notification-group_delivery ]
*/
.notification-group {
  padding-left: 0;
  padding-right: 0;
  padding-bottom: 10px;
  overflow: hidden; }
  @media (min-width: 768px) {
    .notification-group {
      padding-bottom: 5px; } }
  .notification-group_description {
    opacity: .5;
    transition: .3s; }
    .notification-group_description.selected {
      opacity: 1;
      transition: .3s; }
  .notification-group_delivery {
    margin-top: 20px;
    padding-left: 40px;
    -ms-flex-pack: justify;
    justify-content: space-between; }
    @media (min-width: 980px) {
      .notification-group_delivery {
        margin-top: 0;
        text-align: center;
        -ms-flex-pack: distribute;
        justify-content: space-around; } }
    .notification-group_delivery_option {
      transition: color .3s ease;
      text-align: center;
      -ms-flex-item-align: start;
      align-self: flex-start;
      cursor: pointer; }
      .notification-group_delivery_option.selected {
        color: var(--text-success);
        transition: color .3s ease; }
      .notification-group_delivery_option.locked {
        color: var(--text-med-gray);
        cursor: default; }
  .notification-group .item-container {
    padding-left: 55px; }
  .notification-group .basic-item {
    padding-left: 0; }

/*WELCOME PAGE
    .welcome-chart          A graphic of a donut chart
    .welcome-chart-cell     A table cell for holding a graphic of a donut chart
                            [Extends .table-cell]
    .welcome-ribbon-cell    A table cell for holding a ribbon
                            [Extends .table-cell]
    .welcome-all-devices    An image talking about the Design Refresh 

    .welcome-all-devices    An image talking about the new notifications feature 

*/
.welcome-chart {
  max-width: 50px; }
  @media print, (min-width: 768px) {
    .welcome-chart {
      max-width: 90px; } }

.table-cell.welcome-ribbon-cell, .table-cell.welcome-chart-cell {
  min-width: 60px;
  padding-right: 0;
  padding-left: 0; }
  @media print, (min-width: 768px) {
    .table-cell.welcome-ribbon-cell, .table-cell.welcome-chart-cell {
      min-width: 0; } }

@media print, (min-width: 768px) {
  .table-cell.welcome-ribbon-cell {
    padding-left: .2em;
    padding-right: 1.4em; } }

.table-cell.welcome-ribbon-cell .ribbon {
  top: 0;
  transform: none; }

.table-cell.welcome-ribbon-cell .ribbon:before {
  font-size: 50px; }
  @media print, (min-width: 768px) {
    .table-cell.welcome-ribbon-cell .ribbon:before {
      font-size: 40px; } }

@media print, (min-width: 768px) {
  .table-cell.welcome-chart-cell {
    padding-left: 4.5714em;
    padding-right: 1.4286em; } }

.welcome-all-devices,
.welcome-notifications {
  display: block;
  max-height: 110px;
  margin: 1.2em auto 1em; }
  @media print, (min-width: 768px) {
    .welcome-all-devices,
    .welcome-notifications {
      margin: 1em auto 2.5em; } }

.calculator-container {
  border: 1px solid transparent;
  border-radius: 3px;
  border-collapse: collapse;
  padding: 3% 3% 1% 3%;
  width: 100%;
  margin: 0 auto; }

.calculator_input {
  text-align: right;
  border: 1px solid var(--border-gray-85);
  padding: .6em;
  margin: 0 0 .8em 0;
  border-radius: .2em;
  width: 100%;
  color: var(--text-gray-34);
  background: transparent; }
  .calculator_input:focus {
    border: 1px solid var(--focus-outline-gray);
    -webkit-appearance: none;
    -moz-appearance: none;
    outline: 0; }
  .calculator_input::-ms-clear {
    width: 0;
    height: 0;
    display: none; }

.calculator_buttons {
  margin: 0;
  overflow: hidden;
  list-style: none;
  width: 100%;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: row;
  flex-direction: row;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -ms-flex-pack: justify;
  justify-content: space-between; }
  .calculator_buttons button {
    width: 23.5%;
    margin-bottom: .5vw;
    display: block;
    font-weight: 500;
    padding: .6em;
    color: var(--text-gray-34);
    font-size: 1.4rem;
    border: 1px solid var(--border-gray-85);
    background: var(--bg-white);
    border-radius: .2em;
    text-align: center;
    text-decoration: none;
    box-sizing: border-box;
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.1s ease;
    cursor: pointer; }
    .calculator_buttons button.wide {
      width: 49%; }
    .hover .calculator_buttons button:hover,
    .hover .calculator_buttons button:focus,
    .hover .calculator_buttons button:active, .calculator_buttons button.active {
      color: var(--text-gray-34);
      background: var(--bg-gray-85); }

/* CARDS 
    .card-tall-img                  An image for the tall card images in wb wizards    
*/
.card-tall-img {
  max-height: 150px; }
  @media (min-width: 480px) {
    .card-tall-img {
      max-height: 100px; } }

/* CARD REWARDS PAGE

    .card-rewards-illustration      An SVG illustration of the Rewards gift
    
    .card-rewards-points            The display of total card points
   
    .card-rewards-callout           The dismissible callout box next to the summary section
                                    [Module parent]

    .card-rewards-callout_img       An image for the callout
                                    [Child of .card-rewards-callout]
    
*/
.card-rewards-illustration {
  vertical-align: text-bottom;
  height: 3.2rem;
  width: auto; }

.card-rewards-points {
  font-size: 2.7rem; }

.card-rewards-callout {
  padding: 1.5rem 0;
  margin-bottom: 0; }
  @media (min-width: 768px) {
    .card-rewards-callout {
      padding: 1rem 2rem;
      margin-top: 1rem;
      margin-bottom: 1rem; } }
  .card-rewards-callout.has-close-x .close-x {
    padding-right: 0; }
    @media (min-width: 768px) {
      .card-rewards-callout.has-close-x .close-x {
        padding-right: 1rem;
        padding-top: 0; } }

.card-rewards-callout_img {
  max-height: 45px; }
  @media (min-width: 768px) {
    .card-rewards-callout_img {
      max-height: 55px; } }

/* TIMELINE 

    .timeline           Container for the entire timeline
                        [Module parent]
        .dot            Exends the timeline to make them dots instead of numbers
                        [Extends .timeline]
    .timeline_title     The title for each timeline
                        [Child of .timeline]
    .timeline_subtitle  The subtitle for each timeline
                        [Child of .timeline]
    .timeline_item      Each Individual item in a timeline
                        [Child of .timeline]

    .timeline_item_circle   The dot for each timeline
                            [Child of .timeline_item]
    .timeline_item_title    The title for each timeline item
                            [Child of .timeline_item]
    .timeline_item_text     The descriptive text within each timeline item
                            [Child of .timeline_item]

*/
/* Timeline Styles  */
.timeline ul {
  list-style: none;
  margin: 3rem 0 0 0; }

.timeline_title {
  font-weight: 500;
  margin-bottom: 0;
  font-size: 2rem; }

.timeline_subtitle {
  font-weight: 700;
  margin-top: 0; }

.timeline_item {
  min-height: 5.5rem;
  margin: 0 0 0 3rem;
  position: relative;
  border-left: 3px solid var(--timeline-line); }
  .dot .timeline_item {
    border-left: 3px solid var(--border-gray-60); }
  ul .timeline_item.li, .timeline_item {
    padding: 0 0 2rem 4rem; }
    .dot ul .timeline_item.li, .dot .timeline_item {
      padding: 0 0 2rem 3rem; }
  .timeline_item:last-child {
    border: 3px solid transparent;
    padding-bottom: 0;
    margin-bottom: 0; }
  .timeline_item_circle {
    margin-top: -.7rem;
    top: 0;
    left: -5.9rem;
    width: 3.6rem;
    height: 3.6rem;
    background: var(--bg-white);
    border-radius: 50%;
    display: block;
    position: absolute;
    padding: .4rem 0 0;
    font-weight: bold;
    text-align: center;
    border: 3px solid var(--timeline-line);
    color: var(--text-primary);
    font-size: 1.6rem; }
    .dot .timeline_item_circle {
      margin-top: .2rem;
      left: -3.9rem;
      width: 1.5rem;
      height: 1.5rem;
      padding: .2rem 0 0;
      border: 2px solid var(--border-gray-60);
      box-shadow: 0 0 0 3px var(--bg-white); }
    .bg-faint-gray .timeline_item_circle {
      background: var(--bg-faint-gray); }
  .timeline_item_title {
    font-weight: 700;
    position: relative;
    top: -5px; }
  .timeline_item_text {
    padding: 0 0 2rem;
    position: relative;
    word-break: break-word; }

.carousel-general {
  position: relative;
  margin: 2rem 0 4rem;
  height: 100%; }
  @media print {
    .carousel-general {
      margin: 0 0 4rem;
      height: 12.6rem; }
      .carousel-general .owl-stage {
        transform: none !important;
        width: 100% !important; }
      .carousel-general .owl-item.cloned {
        display: none !important; }
      .carousel-general .owl-item,
      .carousel-general .owl-item.active {
        width: 33% !important; } }
  .carousel-general .owl-carousel {
    padding-left: 3rem;
    padding-right: 3rem; }
    @media (min-width: 768px) {
      .carousel-general .owl-carousel {
        padding-left: 8rem;
        padding-right: 8rem; } }
    @media print {
      .carousel-general .owl-carousel {
        padding: 0; } }
  .carousel-general .owl-item {
    padding-left: .5em;
    padding-right: .5em; }
    @media (min-width: 1260px) {
      .carousel-general .owl-item {
        padding-left: 1em;
        padding-right: 1em; } }
  .carousel-general .owl-item img {
    max-width: 250px;
    max-height: 250px;
    width: auto;
    margin: 0 auto;
    image-rendering: -webkit-optimize-contrast; }
    @media (min-width: 768px) {
      .carousel-general .owl-item img {
        max-width: 350px;
        max-height: 350px; } }
    @media print {
      .carousel-general .owl-item img {
        max-width: 200px; } }

.carousel-arrow_button {
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 900; }
  @media print {
    .carousel-arrow_button {
      display: none; } }
  .carousel-arrow_button.left {
    left: 0; }
    @media (min-width: 768px) {
      .carousel-arrow_button.left {
        left: 2rem; } }
  .carousel-arrow_button.right {
    right: 0; }
    @media (min-width: 768px) {
      .carousel-arrow_button.right {
        right: 2rem; } }
  .carousel-arrow_button [class*="icon-"] {
    color: var(--text-gray-51); }
  .carousel-arrow_button .xlarge[class*="icon-"]::before {
    margin: -1rem; }
    @media (min-width: 768px) {
      .carousel-arrow_button .xlarge[class*="icon-"]::before {
        margin: -2.4rem;
        font-size: 8rem; } }

/* PREFERRED FIRST NAME ILLUSTRATION
    
    .name-tag                               An interactive name tag illustration that display the member's preferred first name
                                            [Module parent]

    .name-tag_label                         An absolutely positioned container to place the member's name on the correct part of the illustration
                                            [Child of .name-tag]

    .name-tag_label_name                    The member's first name displayed within the label
                                            [Child of .name-tag_label]

*/
.name-tag {
  display: inline-block;
  position: relative;
  margin-bottom: 2rem; }
  .name-tag_label {
    position: absolute;
    top: 55px;
    bottom: 17px;
    left: 0;
    right: 0;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column;
    -ms-flex-pack: center;
    justify-content: center;
    -ms-flex-align: center;
    align-items: center; }
    .name-tag_label_name {
      max-width: 100%;
      max-height: 100%;
      overflow: hidden;
      /* If the illustration should overflow, other page content would still show the full name */
      text-align: center;
      font-size: 2.4rem;
      /* Accommodate long names and multiple words as best as we can to fit inside the label. Three rows will display before truncation. */
      line-height: 1.1;
      overflow-wrap: break-word; }

/* ACTION MODE 
   
   
    .action-mode                    A container for a list of items that is in action mode.
                                    "Action mode" means the user can select, rearrage and/or toggle visibility of items before taking some action. 
                                    This class is set via JavaScript in response to a trigger (link or button).
                                    [Module parent]
    .action-mode_show               A class applied to any block or .table-cell element within a list of items
                                    This element is displayfed when action mode is activated, i.e. a checkbox next to each item
                                    [Child of .action-mode, Optionally extends .table-cell]
    .action-mode_hide               A class applied to any element within a list of items.
                                    This element is hidden when action mode is activated, i.e. links or buttons for an item that shouldn't be available while in action mode.
                                    [Child of .action-mode]
    .action-mode_checkbox           A checkbox element that only appears when in action-mode
                                    [Child of .action-mode]
    */
.action-mode {
  cursor: default; }
  .action-mode .txt-info {
    color: var(--text-gray); }

.action-mode_show {
  display: none !important; }
  .action-mode .action-mode_show {
    display: block !important; }
  @media print, (min-width: 768px) {
    .action-mode_show .table-md .action-mode_show.table-cell {
      display: table-cell !important; } }

.action-mode .action-mode_hide {
  display: none !important; }

.action-mode_checkbox {
  display: none;
  cursor: pointer; }
  .action-mode .action-mode_checkbox {
    display: block; }
  .table-md > .table-row > .action-mode_checkbox.table-cell {
    display: none; }
  .action-mode .table-md > .table-row > .action-mode_checkbox.table-cell {
    display: block; }
    @media print, (min-width: 768px) {
      .action-mode .table-md > .table-row > .action-mode_checkbox.table-cell {
        display: table-cell; } }
  .action-mode .table-md .action-mode_checkbox {
    width: 4em;
    position: absolute;
    bottom: 0;
    top: 0;
    left: 0;
    text-decoration: none;
    color: var(--text-light-gray);
    border-right: 1px var(--border-light-gray) solid;
    text-align: center; }
    @media print, (min-width: 768px) {
      .action-mode .table-md .action-mode_checkbox {
        position: relative; } }
    .action-mode .table-md .action-mode_checkbox [class*=icon-] {
      position: absolute;
      display: block;
      top: 50%;
      transform: translateY(-50%);
      left: 1.1em;
      margin-right: 0; }
      @media print, (min-width: 768px) {
        .action-mode .table-md .action-mode_checkbox [class*=icon-] {
          left: 0;
          right: 0; } }

.action-mode .table-md .basic-item {
  padding-left: 4em; }

.action-mode .table-cell {
  cursor: default; }

@media print, (min-width: 768px) {
  .hover .action-mode .table-cell:hover,
  .hover .action-mode .table-cell:focus {
    background-color: var(--bg-white); } }

/* 
    SORTABLE ITEMS IN ACTION MODE
*/
.action-mode .sortable-item {
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none; }

.action-mode .sortable-item .sortable-item_head {
  border-radius: 3px;
  background-color: var(--bg-white) !important; }

.action-mode .panel_front .sortable-item_head {
  padding-left: 5.7em; }
  @media (min-width: 768px) {
    .action-mode .panel_front .sortable-item_head {
      padding-left: 5.8em; } }

.action-mode .sortable-item_head_title {
  color: var(--text-gray-35) !important; }

/*
   REORDERING FAVORITE ACCTS IN ACTION MODE
*/
.action-mode .reorder-fav.tile-convertible {
  background-color: transparent;
  border: none;
  overflow: visible; }

.action-mode .reorder-fav .basic-item.sortable-item {
  background-color: var(--bg-white);
  border: 1px solid var(--border-gray-85);
  border-radius: 3px;
  box-shadow: 0 0 1px 0 var(--box-shadow);
  margin-bottom: 1em; }

.action-mode .reorder-fav .has-ribbon {
  padding-left: 15px; }

/*
    Digtial Lending

    .dl-steps-img           The images used on the introduction to the lending application, a.k.a. the 1, 2, 3 
                            These images are also used on the milestone pages
                            [Module Parent]

        .animate-once       The scaling/pulsing animation for the images on the milestone pages
                            [Extends .dle-steps-img]

    .dl-steps-text          The text below the images on the introduction to the lending application 
                            [Module Parent]

*/
.dl-steps-img {
  max-width: 125px; }
  @media print, (min-width: 980px) {
    .dl-steps-img {
      max-width: 150px; } }
  .dl-steps-img.animate-once {
    animation: scale-dle-images 2s ease-in; }

@keyframes scale-dle-images {
  33% {
    transform: scale(1.2); }
  66% {
    transform: scale(0.8); } }

.dl-steps-text {
  text-align: center; }
  @media (min-width: 480px) {
    .dl-steps-text {
      text-align: left; } }
  @media print, (min-width: 980px) {
    .dl-steps-text {
      text-align: center; } }

/* APP SETTINGS IN WEB BRANCH
    
    .app-setting-illustration           An illustration that displays within each app setting expander

*/
.app-setting-illustration {
  max-height: 145px;
  margin-bottom: 1.5rem; }
  @media (min-width: 768px) {
    .app-setting-illustration {
      margin-bottom: 0; } }

/* _TEMPLATE.scss

    Purpose:        Styles for Web Branch Template, including Header, Footer, Nav
                    (all of the elements that surround the page content)

  */
/* TABLE OF CONTENTS 

    - LOCAL MIXINS
    - LOCAL PLACEHOLDER CLASSES
    - BACKGROUND COLOR
    - SITE LAYOUT (STRUCTURE OF THREE COLUMNS)
    
    - MAIN NAV
    
    - TOOLS
    - LOG OUT BUTTON (TOOLS)
    - CALENDAR/CALCULATOR (TOOLS)
    - SIDEBAR LINK (TOOLS)
    
    - COMPLIANCE LOGOS
    - TAGLINE 
   
    - PAGE HEADER
    - PAGE BACK
    - STICKY HEADER
    - SHORT HEADER
   
    - PAGE CONTENT
    - PAGE INTRO TEXT
    
    - SCROLL TO TOP BUTTON
    - MOBILE LOG OUT BUTTON
    - MOBILE MENU BUTTON

    - PRINT HEADER
    - PRINT FOOTER

*/
/* LOCAL MIXINS 
     circle-button            Creates a circle button by applying a default width/height and border-radius
                              [Placeholder class]

*/
/* LOCAL PLACEHOLDER CLASSES 
    
    %ipad-scrolling-fix                 Applies a translate3d to all children in order for ipad to paint all of the child elements when the container is set to position:sticky 
                                        (Without this, the ipad waits until scrolling is done to paint some of the elements.)
                                        [Placeholder class]

    %sidebar                            Styles for the left and right sidebar
                                        [Placeholder class]


    %sidebar                            Styles for the left and right sidebar
                                        [Placeholder class]

    %short-header-side                  The side of the short header that stis above the left and right columns on desktop
                                        [Placeholder class]

*/
.short-header-sides_left *, .short-header-sides_right *, .nav-container *, .tools-container *, .page-header * {
  transform: translate3d(0, 0, 0); }

body.dropdown-open .short-header-sides_left *, body.dropdown-open .short-header-sides_right *, body.dropdown-open .nav-container *, body.dropdown-open .tools-container *, body.dropdown-open .page-header * {
  transform: none; }

.main-nav, .tools {
  color: var(--text-gray); }
  @media (min-width: 980px) {
    .main-nav, .tools {
      position: sticky; } }
  @media (min-width: 980px) {
    .position-fixed.main-nav, .position-fixed.tools {
      width: 25%; } }
  @media (min-width: 1260px) {
    .position-fixed.main-nav, .position-fixed.tools {
      width: 20%; } }

.short-header-sides_left, .short-header-sides_right {
  position: fixed;
  top: 0;
  left: 0;
  opacity: 0;
  visibility: hidden;
  z-index: 1100;
  height: 3.6em;
  background-color: var(--bg-gray-34-opacity-95); }
  @media (min-width: 980px) {
    .short-header-sides_left, .short-header-sides_right {
      width: 25%; } }
  @media (min-width: 1260px) {
    .short-header-sides_left, .short-header-sides_right {
      width: 20%; } }
  body.short-header-visible .short-header-sides_left, body.short-header-visible .short-header-sides_right {
    opacity: 1;
    visibility: visible; }
  body.transitions-on .short-header-sides_left, body.transitions-on .short-header-sides_right {
    transition: visibility .3s ease-out, opacity .3s ease-out; }

/* BACKGROUND COLOR */
body {
  background: var(--bg-gray-90c); }
  @media print {
    body {
      background: var(--white); } }

/* SITE LAYOUT 

    .site-container     A container for the three sections of the site - nav, page content and tools

    .header-container   A container that has the nav-container and other items / <header> needed for accessibility landmark

    .nav-container      A container for the nav
                        Hidden behind the hamburger menu on mobile
                        Visible in the left column on desktop

    .tools-container    A container for the tools
                        Hidden on mobile
                        Visible in the right column on desktop

    .content-container  A container for the page-header and page-content  
      
*/
@media (min-width: 980px) {
  .site-container {
    display: -ms-flexbox;
    display: flex;
    min-height: 100vh;
    /*100% of viewport height*/ } }

@media print {
  .site-container {
    display: block; } }

.header-container {
  width: 100%;
  height: 100%;
  background-color: var(--bg-white); }
  @media (min-width: 980px) {
    .header-container {
      width: 25%;
      height: auto; } }
  @media (min-width: 1260px) {
    .header-container {
      width: 20%; } }
  @media print {
    .header-container {
      width: 100%; } }

.nav-container {
  will-change: transform;
  position: fixed;
  width: 100%;
  height: 100%;
  bottom: 0;
  top: 0;
  right: 0;
  left: 0;
  z-index: 20;
  background-color: var(--bg-white);
  opacity: .95;
  visibility: hidden;
  clip-path: circle(0% at calc(100% - 42px) calc(100% - 40px));
  transition: clip-path .3s ease-in-out .1s, opacity .1s linear .02s, visibility .1s linear .4s; }
  @media (min-width: 980px) {
    .nav-container {
      position: static;
      display: block;
      -ms-flex: 0 0 25%;
      flex: 0 0 25%;
      max-width: 25%;
      height: 100%;
      width: 100%;
      border-radius: 0;
      z-index: 1000;
      box-shadow: 1px 0 1px 0 var(--box-shadow-black-opacity-10);
      clip-path: none;
      opacity: 1; } }
  @media print, (min-width: 1260px) {
    .nav-container {
      -ms-flex: 0 0 20%;
      flex: 0 0 20%;
      max-width: 20%; } }
  @media (min-width: 980px) {
    .header-container > .nav-container {
      max-width: 100%; } }
  @media print, (min-width: 1260px) {
    .header-container > .nav-container {
      max-width: 100%; } }
  .nav-open .nav-container {
    visibility: visible;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 100%;
    clip-path: circle(150% at calc(100% - 42px) calc(100% - 40px));
    opacity: 1;
    transition: clip-path .2s, opacity .2s linear .1s; }

.nav-container:before {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  background: var(--bg-primary);
  content: ''; }
  @media (min-width: 980px) {
    .nav-container:before {
      display: none; } }

.nav-hide-on-finish:before {
  display: none; }

.tools-container {
  display: none; }
  @media print, (min-width: 1260px) {
    .tools-container {
      display: block;
      -ms-flex: 0 0 20%;
      flex: 0 0 20%;
      max-width: 20%;
      background: var(--bg-white); } }

@media (min-width: 980px) {
  .content-container {
    -ms-flex: 1 0 0px;
    flex: 1 0 0;
    width: 100%;
    min-width: 0;
    box-shadow: inset -1px 0 1px 0 var(--box-shadow-black-opacity-10); } }

/* MAIN NAV
    .main-nav       The main navigation for the site
                    Hidden behind the hamburger menu on mobile; Visible in the left column on desktop 
                    [Module parent]

    .main-nav_logo  The UWCU logo in the main nav
                    [Child of .main-nav]

*/
.main-nav {
  width: 55px;
  height: 55px;
  border-radius: 27.5px;
  background-color: var(--bg-white);
  overflow: hidden;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  opacity: 0;
  visibility: hidden;
  transform: translateZ(0);
  z-index: 30;
  transition: opacity 0s .2s, visibility 0s .2s, width 0s .2s, height 0s .2s, border-radius 0s .2s; }
  @media (-webkit-min-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3 / 2), (min--moz-device-pixel-ratio: 1.5), (min-device-pixel-ratio: 1.5) {
    .main-nav {
      background-size: 747px 1018px; } }
  @media print, (min-width: 768px) {
    .main-nav {
      background-size: auto; } }
  @media (min-width: 980px) {
    .main-nav {
      opacity: 1;
      visibility: visible;
      height: auto;
      width: 100%;
      border-radius: 0;
      transition: none; } }
  .nav-open .main-nav {
    width: 100%;
    height: 100%;
    overflow-x: hidden;
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch;
    border-radius: 0;
    opacity: 1;
    visibility: visible;
    transition: opacity .25s linear .2s, visibility .25s linear .2s, width 0s .2s, height 0s .2s, border-radius 0s .2s; }
  .main-nav.position-fixed {
    position: absolute; }
    @media (min-width: 980px) {
      .main-nav.position-fixed {
        position: fixed; } }
  .hover .main-nav a:focus {
    outline-color: var(--focus-outline-white-opacity-70); }

.main-nav_logo {
  max-width: 180px;
  max-height: 80px;
  margin: 0 auto .5em;
  padding-left: .5rem;
  padding-right: .5rem; }
  @media (min-width: 980px) {
    .main-nav_logo {
      margin: 1em auto;
      max-width: 170px; } }
  @media (min-width: 1260px) {
    .main-nav_logo {
      margin: 2em auto 1.2em;
      max-width: 180px; } }

/* MAIN NAV WATERMARK 

    .main-nav_watermark     The faint gray U image behind the favorites menu in the main nav


*/
.main-nav_watermark {
  opacity: .04;
  position: absolute;
  top: 18px;
  width: 93%;
  max-width: 275px;
  left: 0;
  right: 0; }
  @media (min-width: 980px) {
    .main-nav_watermark {
      top: 16px; } }
  @media (min-width: 1260px) {
    .main-nav_watermark {
      max-width: 260px; } }

/* TOOLS 

    .tools      A tools section for the site; XL only
                [Module parent]

*/
.tools {
  z-index: 1000;
  background-color: var(--bg-white); }

/* Log Out Button for Tools Sidebar (only visible on XL screens) */
.log-out-container {
  -ms-flex-negative: 0;
  flex-shrink: 0; }

.log-out-item, .log-out-item_button {
  height: 100%; }

.log-out-item_button {
  white-space: nowrap;
  font-size: 1.4rem;
  font-weight: 700;
  padding: 1em 2em 1em;
  cursor: pointer;
  text-decoration: none; }
  .log-out-item_button,
  .hover .log-out-item_button:hover,
  .hover .log-out-item_button:focus,
  .hover .log-out-item_button:active, .log-out-item_button.active {
    color: var(--text-gray); }
  .hover .log-out-item_button:hover,
  .hover .log-out-item_button:focus,
  .hover .log-out-item_button:active, .log-out-item_button.active {
    background: var(--bg-gray-54-opacity-35); }
  .short-header-sides_right .log-out-item_button {
    color: var(--text-white);
    min-height: 3.6em; }
    .hover .short-header-sides_right .log-out-item_button:hover,
    .hover .short-header-sides_right .log-out-item_button:focus,
    .hover .short-header-sides_right .log-out-item_button:active, .short-header-sides_right .log-out-item_button.active {
      background: var(--bg-black-opacity-20);
      color: var(--text-white); }

/* COMPLIANCE LOGOS 
    .logos-compliance   The compliance logos -  NCUA, EHO
                        [Module Parent]

*/
.logos-compliance {
  image-rendering: -webkit-optimize-contrast;
  max-height: 24px; }
  .main-nav .logos-compliance,
  .tools .logos-compliance {
    margin-left: 0; }

/* TAGLINE

    .tagline-container      Container for the tagline in the left nav
                            

    .tagline                The UWCU tagline image
                            [Extends .img-responsive]
*/
.nav-container .tagline-container {
  padding: 2em 7%; }

.nav-container .tagline {
  image-rendering: -webkit-optimize-contrast;
  max-height: 20px;
  margin: 0 auto; }

/*
    Calendar & Calulator Container

*/
.calendar-container,
.calculator-container {
  padding-left: 5%;
  padding-right: 5%;
  max-width: 320px; }

/* PAGE HEADER
    .page-header                A container for the header of the page                                             
                                [Module parent]

    .page-header:after          This is the gray line under the page header.
                                This is a not a child, but a Pusedo element.

    .page-header_top            A container for the elements at the top of the page header

    .page-header_top_left       A container for the contents in the upper left corner of the header
                                Expected contents: back button
                                [Child of .page-header_top]

    .page-header_top_right      A container for the contents in the upper right corner of the header
                                Expected contents: action button or account selection drop down
                                [Child of .page-header_top]

    .page-header_bottom-right   A container for the contents in the lower right corner of the header on desktop
                                Sits below header on white background on mobile
                                Expected contents: account balance, progress circle
                                [Child of .page-header]

    .page-header_bottom-left    A container for the contents in the lower left corner of the header on desktop
                                Sits below header on white background on mobile
                                Expected contents: rewards points balance
                                [Child of .page-header]

    .page-header_under-title    A container for the contents underneath the title
                                Expected contents: local nav filter, activity totals (desktop only)
                                [Child of .page-header]
    
    .page-header_title          A container for the page title
                                Expected contents: an h1 and potentially a favorite ribbon
                                [Child of .page-header]

    .page-header_watermark      The container for the U watermark behind the mobile header                           
                                [Child of .page-header]

    .page-header_watermark_img  The gray U icon                            
                                [Child of .page-header_watermark]

    .body.short-header-visible  Class applied via javascript at scroll position
                                When this class is present, header changes from tall to short via CSS transitions


    .hide-when-short-header-visible            A class that hides an element when the header is short, no transition, hides instantly
                                               Good for things in the bottom-right, because teh header height changes so fast they get cropped oddly while fading out

    .short-header-mobile             Class applied to the body to indicate the page contents are coming from an iframe
                                On XS-MD, this keeps the .page-header at the short height
                                On LG+ it has no effect on the header

*/
.page-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10;
  background-color: var(--bg-white);
  color: var(--text-gray-34);
  box-shadow: 0 2px 1px -1px var(--box-shadow-black-opacity-10);
  background-position-y: -150px;
  background-position-x: -50px;
  /* Decided not to scale the image - it doesn't really look much clearer on mobile and then there's too much light compared to dark
    @media (-webkit-min-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3/2), (min--moz-device-pixel-ratio: 1.5), (min-device-pixel-ratio: 1.5) {
        background-size: 747px 1018px; // scale image for 2x
    }
    
    @media print, (min-width: $screen-md-min) {
        background-size: auto;
    }
    */ }
  @media (min-width: 980px) {
    .page-header {
      z-index: 999;
      background: transparent;
      color: var(--text-gray-34);
      box-shadow: none; } }
  .short-header-visible .page-header h1.has-ribbon, .short-header-visible .page-header .has-ribbon.looks-like-h1 {
    padding-left: 0; }
  @media (min-width: 980px) {
    .short-header-visible .page-header {
      background-color: var(--bg-gray-34-opacity-95);
      color: var(--text-white);
      min-height: 3.5em; } }
  @media (max-width: 979px) {
    .short-header-mobile .page-header {
      height: 4.2rem; } }
  @media (max-width: 767px) {
    .short-header-mobile .page-header {
      height: 4.6rem; } }
  @media print {
    .page-header {
      position: relative; } }
  @media (min-width: 980px) {
    .page-header {
      left: 25%; } }
  @media (min-width: 1260px) {
    .page-header {
      left: 20%;
      right: 20%; } }
  .page-header_top {
    position: absolute;
    z-index: 1;
    top: .5em;
    left: .25em;
    right: .5em;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: justify;
    justify-content: space-between;
    min-height: 3.5em; }
    @media print, (min-width: 768px) {
      .page-header_top {
        top: .75em;
        left: 1em;
        right: 1.2em; } }
    @media (min-width: 980px) {
      .page-header_top {
        right: 2em; } }
    .short-header-visible .page-header_top {
      min-height: 0; }
    .page-header_top_right {
      white-space: nowrap; }
      .page-header_top_right .input-select {
        white-space: normal; }
    .page-header_top_left {
      min-width: 0; }
      @media (min-width: 980px) {
        .short-header-visible .page-header_top_left {
          max-width: 30%; } }
  .page-header_under-title {
    text-align: center; }
    @media (min-width: 980px) {
      .page-header_under-title {
        padding-top: .75em;
        margin-top: -1em;
        margin-bottom: 1em;
        min-height: 1em; }
        .page-header_under-title .bg-white {
          background-color: transparent; } }
    @media (min-width: 980px) {
      .page-header_under-title::after {
        content: "";
        /* This is necessary for the pseudo element to work. */
        display: block;
        /* This will put the pseudo element on its own line. */
        margin: 0 auto;
        /* This will center the border. */
        width: 65%;
        /* Change this to whatever width you want. */
        border-bottom: 1px solid var(--border-gray-64);
        /* This creates the border. */ }
        .short-header-visible .page-header_under-title::after {
          display: none; } }
    .short-header-visible .page-header_under-title {
      display: none; }
  .page-header_bottom-right {
    background: transparent;
    padding: 1.2em 1.2em; }
    .short-header-visible .page-header_bottom-right {
      display: none; }
    @media (min-width: 980px) {
      .page-header_bottom-right {
        position: absolute;
        right: 3.2em;
        padding: 0;
        background: transparent; } }
  .page-header_bottom-left {
    padding: 1.2em 1.2em; }
    .short-header-visible .page-header_bottom-left {
      display: none; }
    @media (min-width: 980px) {
      .page-header_bottom-left {
        position: absolute;
        bottom: 1em;
        left: 3.2em;
        padding: 0;
        background: transparent;
        box-shadow: none; } }

.hide-when-short-header-visible {
  display: block; }
  @media (max-width: 979px) {
    .short-header-mobile .hide-when-short-header-visible {
      display: none; } }
  .short-header-visible .hide-when-short-header-visible {
    display: none; }

.page-header_title {
  text-align: center;
  padding: 5.5em 0 1em; }
  @media (min-width: 980px) {
    .page-header_title {
      padding-bottom: .25em; } }
  .page-header_title.condensed {
    padding-top: 4em;
    padding-bottom: .5em; }
    @media (min-width: 768px) {
      .page-header_title.condensed {
        padding-top: 5em; } }
    @media (min-width: 980px) {
      .page-header_title.condensed {
        padding-bottom: .25em; } }
  .transitions-on .page-header_title {
    transition: padding .6s ease; }
  @media (min-width: 980px) {
    .page-header_title, .page-header_title.condensed {
      padding-top: 6em; } }
  @media (max-width: 979px) {
    .short-header-mobile .page-header_title {
      padding: .8em 0 .6em; } }
  .short-header-visible .page-header_title {
    padding: .75em 0 .65em; }
    @media (min-width: 980px) {
      .short-header-visible .page-header_title {
        padding: 1.1em 0 .65em; } }
  @media (min-width: 980px) {
    .page-header_title.narrow h1, .page-header_title.narrow .looks-like-h1 {
      max-width: 50%; } }
  .page-header_title h1, .page-header_title .looks-like-h1 {
    font-weight: 500;
    display: inline-block;
    margin: 0;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 90%;
    overflow: hidden; }
    @media (min-width: 980px) {
      .page-header_title h1, .page-header_title .looks-like-h1 {
        color: var(--text-gray-34);
        max-width: 65%; } }
    .short-header-visible .page-header_title h1, .short-header-visible .page-header_title .looks-like-h1,
    .short-header-visible .page-header_title h1.has-ribbon,
    .short-header-visible .page-header_title .has-ribbon.looks-like-h1 {
      font-weight: 500; }
      @media (min-width: 768px) {
        .short-header-visible .page-header_title h1, .short-header-visible .page-header_title .looks-like-h1,
        .short-header-visible .page-header_title h1.has-ribbon,
        .short-header-visible .page-header_title .has-ribbon.looks-like-h1 {
          padding-top: .1em;
          padding-bottom: .05em; } }
    @media (max-width: 979px) {
      .short-header-mobile .page-header_title h1.has-ribbon, .short-header-mobile .page-header_title .has-ribbon.looks-like-h1 {
        min-height: 0; } }
    
    .short-header-visible .page-header_title h1.has-ribbon,
    .short-header-visible .page-header_title .has-ribbon.looks-like-h1 {
      min-height: 0; }
    .page-header_title h1.has-ribbon .ribbon, .page-header_title .has-ribbon.looks-like-h1 .ribbon {
      top: 0; }
      @media (min-width: 768px) {
        .page-header_title h1.has-ribbon .ribbon, .page-header_title .has-ribbon.looks-like-h1 .ribbon {
          top: -3px; } }
    .transitions-on .page-header_title h1, .transitions-on .page-header_title .looks-like-h1 {
      transition: font-size 0.4s ease, max-width 0.4s ease, padding 0.2s; }
    @media (min-width: 980px) {
      .page-header_title h1, .page-header_title .looks-like-h1 {
        max-width: 75%; } }
    @media (max-width: 979px) {
      .short-header-mobile .page-header_title h1, .short-header-mobile .page-header_title .looks-like-h1 {
        font-size: 1.6rem;
        max-width: 70%; } }
    .short-header-visible .page-header_title h1, .short-header-visible .page-header_title .looks-like-h1 {
      font-size: 1.6rem;
      max-width: 70%;
      color: var(--text-gray-34); }
      @media (min-width: 980px) {
        .short-header-visible .page-header_title h1, .short-header-visible .page-header_title .looks-like-h1 {
          font-size: 1.6rem;
          color: var(--text-white);
          max-width: 38%; } }

.page-header_watermark {
  overflow: hidden;
  width: 100%;
  height: 100%;
  position: absolute;
  padding: 15px 0; }

.page-header_watermark_img {
  height: 100%;
  min-height: 111px;
  max-height: 180px;
  max-width: 180px;
  opacity: .04;
  transition: height, min-height, max-height, max-width .2s linear; }
  .short-header-visible .page-header_watermark_img,
  .short-header-mobile .page-header_watermark_img {
    min-height: 180px;
    left: 0;
    right: 0;
    top: 50%;
    bottom: 50%;
    transform: translateY(-50%);
    height: 180px;
    transition: height .2s linear; }
  @media (min-width: 980px) {
    .page-header_watermark_img {
      display: none; } }

/* PAGE CONTENT 

    #PageContent         Print Styles
                         [Module parent]

 
*/
@media print {
  #PageContent {
    padding: 0 !important; } }

/* PAGE BACK 

    .page-back           An anchor (a) for the back link in the header
                         [Module parent, Child of .page-header]

 
*/
.page-back {
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
  overflow: hidden;
  position: relative;
  font-weight: 500;
  top: -.5em;
  left: -.25em; }
  @media print, (min-width: 768px) {
    .page-back {
      left: -1em; } }
  @media (min-width: 980px) {
    .page-back {
      top: -.55em; } }
  .page-back.button-link {
    margin-top: .25em;
    padding: .75em 1em .75em .75em; }
    @media (min-width: 980px) {
      .page-back.button-link {
        padding: 1em 1em 1em .75em; } }

a.page-back {
  color: var(--text-gray-34); }
  .hover a.page-back:hover,
  .hover a.page-back:focus,
  .hover a.page-back:active, a.page-back.active {
    color: var(--text-gray); }
  a.page-back.active {
    background-color: var(--bg-gray-93c); }
  @media (min-width: 980px) {
    .short-header-visible a.page-back.button-link {
      color: var(--text-white); }
    .short-header-visible.hover a.page-back.button-link:hover, .short-header-visible.hover a.page-back.button-link:focus, .short-header-visible.hover a.page-back.button-link:active {
      color: var(--text-gray-85); } }

/*SHORT HEADER

    .short-header-sides             The right and left sides of the short header that appears on scroll, LG+
                                    [Module parent]

    .short-header-sides_left        The left side of the short header, visible on LG+
                                    [Child of .short-header]

    .short-header-sides_right       The right side of the short header, visible on XL
                                    [Child of .short-header]

    .short-header-sides_log-out     The log out button in either the left or ride side
                                    [Child of .short-header_left and .short-header_right]

*/
.short-header-sides_right {
  left: auto;
  right: 0; }

/* PAGE CONTENT 
    
    .page-content           A container for the main content of the page
                            [Module parent]

    .page-content_iframe    An iframe which contains the page content, i.e. used for Zelle and Help
                            On mobile it takes up the whole viewport, minus the short header at the top
                            On desktop, it takes the width of it's container, i.e. .tile, and the height is set inline to something as tall as we expect the iframe's contents to be
                            [Child of .page-content]

    <div class="page-content">
        ...
        <div class="tile pan">
            <iframe class="page-content_iframe"></iframe>
        </div>
    </div>

*/
.page-content {
  margin-top: 1.5em;
  padding: 2em 0;
  overflow-x: hidden; }
  @media (min-width: 980px) {
    .page-content {
      margin-top: 2em;
      padding: 2em 1em;
      overflow-x: visible; } }
  @media (min-width: 1260px) {
    .page-content {
      padding: 2em 2%; } }
  .page-content_iframe {
    background-color: var(--bg-white);
    border: 0;
    width: 100vw;
    max-width: 100%;
    height: 2000px;
    min-height: 65vh;
    /*@media (max-width: $screen-md-max) { // using max-width here, otherwise all of the rules have to be undone for LG+
            position: fixed;
            top: 4.2rem;
            left: 0;
            right: 0;
            bottom: 0;
            height: calc(100% - 4.2rem); // height of viewport minus the header
        }

        @media (max-width: $screen-sm-max) { // header is alittle taller on XS and SM
            top: 4.6rem;
            height: calc(100% - 4.6rem);
        }*/ }
    @media (min-width: 768px) {
      .page-content_iframe {
        min-height: 55vh; } }
    @media (min-width: 768px) {
      .page-content_iframe {
        width: 100%; } }
  @media (max-width: 767px) {
    .page-content .tile,
    .page-content .tile-convertible:not(.no-bleed-mobile),
    .page-content .item-container-unattached,
    .page-content .wizard,
    .page-content .box.shadowed,
    .page-content .box-left-cap.shadowed,
    .page-content .full-bleed-mobile {
      margin-left: -1.2em;
      margin-right: -1.2em;
      border-radius: 0; }
    .page-content .wizard .item-container,
    .page-content .wizard .item-container-unattached,
    .page-content .item-container-unattached .tile {
      margin-left: 0;
      margin-right: 0; }
    .page-content .box-left-cap {
      border-left: none;
      border-right: none; }
    .page-content .wizard .box-left-cap {
      border-left: 1px solid var(--border-gray-87);
      border-right: 1px solid var(--border-gray-87); } }

/* PAGE INTRO TEXT

    .page-intro-text     A sentence or two describing the page

*/
.page-intro-text {
  text-align: center;
  margin-bottom: 2rem; }
  @media (min-width: 768px) {
    .page-intro-text {
      font-size: 1.6rem; } }
  .page-intro-text + h3, .page-intro-text + .looks-like-h3 {
    margin-top: 2em; }

/* SCROLL TO TOP BUTTON

    .scroll-to-top          A fixed container that appears when page is scrolled a calculated distance based on the viewport height. 
                            This class controls the placement of the button
                            Also creates a safe click zone around the outside to prevent accidental clicks on items behind the button
                            [Module parent]
                    
    .scroll-to-top_content  The visual presentation of the scroll to top button - roudn, orange circle; when clicked/tapped scrolls the page back to the top.
                            [Child of .scroll-to-top]
*/
.scroll-to-top {
  position: fixed;
  bottom: 75px;
  right: 0;
  padding: 10px 17px 10px;
  z-index: 40;
  color: var(--text-white);
  text-decoration: none;
  cursor: default; }
  @media print, (min-width: 980px) {
    .scroll-to-top {
      bottom: 10px; } }
  @media (min-width: 1260px) {
    .scroll-to-top {
      right: 20%;
      padding: 10px; } }
  .nav-open .scroll-to-top {
    display: none !important; }
  .scroll-to-top_content {
    width: 50px;
    height: 50px;
    border-radius: 25px;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-pack: center;
    justify-content: center;
    cursor: pointer;
    background-color: var(--bg-gray-44);
    box-shadow: 0 3px 5px var(--box-shadow-black-opacity-40);
    line-height: 1;
    cursor: pointer; }
    .hover .scroll-to-top:hover .scroll-to-top_content,
    .hover .scroll-to-top:active .scroll-to-top_content,
    .scroll-to-top:focus .scroll-to-top_content,
    .scroll-to-top.active .scroll-to-top_content {
      color: var(--text-white);
      background-color: var(--bg-gray-34); }

/* MOBILE LOG OUT BUTTON 
    .log-out-button             The mobile log out button
                                This class controls the placement of the button in the lower right corner, above the "X" to close the menu;
                                Also creates a safe click zone around the outside to prevent accidental clicks on items behind the button
                                [Module parent]

    .log-out-button_content     The visual presentation of the log out button - round circle
                                [Child of .log-out-button]
*/
.log-out-button {
  display: none;
  position: fixed;
  bottom: 75px;
  right: 0;
  padding: 10px 7px 10px;
  z-index: 40; }
  .nav-open .log-out-button {
    display: block; }
  .log-out-button_content {
    width: 70px;
    height: 70px;
    border-radius: 35px;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-pack: center;
    justify-content: center;
    cursor: pointer;
    background-color: var(--bg-primary);
    box-shadow: 0 3px 5px var(--box-shadow-black-opacity-40);
    transition: background-color .2s ease, color .1s ease;
    color: var(--text-white);
    font-size: 1.2rem;
    font-weight: 500;
    text-transform: uppercase;
    text-align: center;
    letter-spacing: 1px;
    line-height: 1; }
    .log-out-button:focus .log-out-button_content,
    .log-out-button.active .log-out-button_content,
    .log-out-button:active .log-out-button_content, .log-out-button_content.active {
      background-color: var(--border-primary-extra-dark); }

/* MOBILE MENU BUTTON

    


    .menu-button            Opens the mobile menu; 
                            This class controls the placement of the button in the lower right corner on XS-MD screens;
                            Also creates a safe click zone around the outside to prevent accidental clicks on items behind the button
                            [Module parent]

    .menu-button_content    The visual presentation of the menu button - round circle
                            [Child of .menu-button]

    .menu-icon              A container for the menu icon - animates from hamburger to "X"
                            [Module parent]

*/
.menu-button {
  position: fixed;
  bottom: 0;
  right: 0;
  padding: 10px 15px 15px;
  z-index: 40; }
  .menu-button_content {
    width: 55px;
    height: 55px;
    border-radius: 27.5px;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-pack: center;
    justify-content: center;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    background: transparent;
    cursor: pointer;
    background: var(--bg-primary);
    box-shadow: 0 3px 5px var(--box-shadow-black-opacity-40);
    transition: background .2s ease-out; }
    .nav-open .menu-button_content {
      background-color: var(--bg-primary); }

.menu-icon {
  width: 26px;
  height: 19px;
  position: relative;
  transform: translate3d(0, 0, 0) rotate(0deg);
  transition: transform .2s ease-out;
  cursor: pointer; }
  .menu-icon span {
    display: block;
    position: absolute;
    height: 3px;
    width: 100%;
    background: var(--text-white);
    border-radius: 9px;
    opacity: 1;
    left: 0;
    transform: translate3d(0, 0, 0) rotate(0deg);
    transition: transform .2s ease-out, opacity .1s ease-out .2s; }
    .menu-icon span:nth-child(1) {
      top: 0px; }
    .menu-icon span:nth-child(2), .menu-icon span:nth-child(3) {
      top: 8px; }
    .menu-icon span:nth-child(4) {
      top: 16px; }
    .nav-open .menu-icon span:nth-child(1), .nav-open .menu-icon span:nth-child(4) {
      top: 8px;
      width: 0%;
      opacity: 0;
      left: 50%; }
    .nav-open .menu-icon span:nth-child(2) {
      transform: translate3d(0, 0, 0) rotate(45deg); }
    .nav-open .menu-icon span:nth-child(3) {
      transform: translate3d(0, 0, 0) rotate(-45deg); }

/* MENU TOGGLE ICON - TODO: MIGHT STILL NEED TO DO THIS IN THE NEW DESIGN ON THE HAMBURGER BUTTON

        Prevent default actions from displaying if icon is double selected
*/
/*#menuToggle {
    user-select: none;
}*/
/*PRINT HEADER
    .header-print                   A header that displays for printing only.
                                    [Module parent]
    .header-print_uwcu-address      The UW Credit Union address.
                                    [Child of .header-print] 
    .header-print_member-address    The member's addres.
                                    [Child of .header-print] 
    */
@media print {
  .header-print {
    border-bottom: 3px solid var(--border-light-gray);
    margin-bottom: 2em; }
    .header-print .logo-stacked {
      float: left;
      max-height: 60px; }
  .header-print_uwcu-address {
    padding-left: 1.4286em;
    float: left; }
  .header-print_member-address {
    float: right;
    padding-right: 1.4286em; } }

/* PRINT FOOTER 
    .footer-print                   A footer that displays for printing only.
                                    [Module parent]
*/
@media print {
  .footer-print {
    margin-top: 1.4286em;
    text-align: center;
    page-break-inside: avoid; } }

/*  ANCHORS
    a:not([class*="-"])         anchors without a class will get a special treatment with a border and no text decoration
                                Note :This is a bit of a hack and we might need to find a better way in the future.
*/
.footer-simple a:not([class*="-"]),
.page-content a:not([class*="-"]),
.main_content a:not([class*="-"]) {
  text-decoration: none;
  border-bottom: 1px solid var(--border-gray-85); }
  .footer-simple a:not([class*="-"]):hover, .footer-simple a:not([class*="-"]):focus, .footer-simple a:not([class*="-"]):active,
  .page-content a:not([class*="-"]):hover,
  .page-content a:not([class*="-"]):focus,
  .page-content a:not([class*="-"]):active,
  .main_content a:not([class*="-"]):hover,
  .main_content a:not([class*="-"]):focus,
  .main_content a:not([class*="-"]):active {
    border-bottom-color: transparent; }

@media (min-width: 768px) {
  .footer-simple a[href*="tel"],
  .page-content a[href*="tel"],
  .main_content a[href*="tel"] {
    border-bottom-color: transparent; } }

.grecaptcha-badge {
  visibility: hidden; }

/* _template-simple-login.scss

    Purpose:        Styles for Simple Layout and Login Layout Template, including Header, Footer, Nav
                    (all of the elements that surround the page for simple layout and login layout)                  
  */
/* TABLE OF CONTENTS
------------------------
    - BACKGROUND COLOR
    - HEADER 
    - LOG IN /LOG OUT BUTTONS
    - LOGO
    - UTILTIY NAV
    - UTILITY MENU
    - PAGE CONTAINTER
    - BACK LINK
    - MAIN
    - FOOTER SIMPLE
    - LOGO FACEBOOK
    - APP STORE LINKS
    - TAGLINE
    - LOGOS COMPLIANCE
-------------------------
*/
/* BACKGROUND COLOR
*/
.layout-simple,
.layout-login {
  background-color: var(--bg-white); }

/* HEADER

    .header-main                    The header for simple, login and app layout
                                    Includes logo, utility links and log in and out buttons 
                                    Postion Fixed for Simple Only
                                    [Module parent]
      
    .header-main_content            Container for the content
                                    Sets the max-width for .layout-login and .layout-simple at LG+
                                    [Child of  .header-main]

    .header-main_log-out            Log in and log out buttons 
                                    visible in layout simple only
                                         
*/
.header-main {
  position: relative;
  overflow: hidden;
  background: var(--bg-white);
  height: 3.750em; }
  @media print, (min-width: 768px) {
    .header-main {
      height: 4.286em; } }
  @media print, (min-width: 980px) {
    .header-main {
      height: 6.857em; } }
  .layout-simple .header-main {
    z-index: 90;
    top: 0;
    left: 0;
    right: 0;
    position: fixed;
    border-bottom: 1px solid var(--border-light-gray); }

.header-main_content,
.header-main_content > .row {
  height: 100%; }

@media (min-width: 980px) {
  .layout-simple .header-main_content,
  .layout-login .header-main_content {
    padding-left: 0;
    padding-right: 0;
    margin: 0 auto; }
  .layout-simple .header-main_content {
    width: 80%;
    max-width: 60em; }
  .layout-login .header-main_content {
    width: 96%;
    max-width: 70em; } }

.layout-login .header-main_log-out {
  display: none; }

/* LOGO

    .logo-simple        UWCU logo that stays to the left of the utilites and buttons XS+

    .logo-login         UWCU Logo is full width on XS and SM but then is to the left of the utilites on MD+

    .logo-link          An anchor tag wrapped around the logo. Links to uwcu.org.  
      
    .logo-horizontal    The horizontal version of the UWUC logo in the header
                        [Extends .img-responsive]
    
*/
.logo-simple {
  display: none; }
  .layout-simple .logo-simple {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: center;
    justify-content: center;
    padding-left: 0;
    padding-right: 0; }
    @media (min-width: 768px) {
      .layout-simple .logo-simple {
        -ms-flex-pack: start;
        justify-content: flex-start;
        padding-left: 1.2em;
        padding-right: 1.2em; } }

.logo-login {
  display: none; }
  .layout-login .logo-login {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: center;
    justify-content: center; }
    @media (min-width: 768px) {
      .layout-login .logo-login {
        -ms-flex-pack: start;
        justify-content: flex-start; } }

@media print, (min-width: 768px) {
  .logo-link {
    float: left;
    padding-bottom: .8571em; } }

@media print, (min-width: 768px) {
  .hover .logo-link:focus {
    outline: 1px dotted var(--focus-outline-link);
    outline-offset: -1px; } }

.header-main .logo-horizontal {
  margin-top: 5px;
  height: 3.125em;
  max-width: 115px; }
  @media (min-width: 768px) {
    .header-main .logo-horizontal {
      height: 3.571em; } }
  @media (min-width: 980px) {
    .header-main .logo-horizontal {
      margin-top: 12px;
      height: 74px;
      max-width: 170px; } }

@media print, (min-width: 768px) {
  .layout-login .header-main .logo-horizontal {
    float: left;
    margin-left: 0; } }

/* UTILITIES in the Header
    
   .utlities-container      Container that houses the utilites nav (filter), the apply button, the log in button (unauthenticated) & log out button (authenticated)
                            Does not appear in xs and sm screens for .layout-login
                            [Module Parent]

   .filter_item             Regular filter but with a different text color and more padding
                            Only Appears on .layout-login and .layout-simple (unauthenticated)
                            [Module Parent]
    .button-link
*/
.layout-login .utilities-container {
  display: none; }
  @media (min-width: 768px) {
    .layout-login .utilities-container {
      display: block; } }

.layout-simple .header-main_content a.filter_item,
.layout-login .header-main_content a.filter_item {
  color: var(--text-gray);
  font-weight: 500;
  padding: 1.5em .9em 1.2em; }
  @media print, (min-width: 980px) {
    .layout-simple .header-main_content a.filter_item,
    .layout-login .header-main_content a.filter_item {
      padding: 3em .9em 2.3em;
      padding-left: 1.4em;
      padding-right: 1.4em; } }
  .layout-simple .header-main_content a.filter_item:hover,
  .hover .layout-simple .header-main_content a.filter_item:hover,
  .layout-login .header-main_content a.filter_item:hover,
  .hover
  .layout-login .header-main_content a.filter_item:hover {
    color: var(--text-link); }

.layout-simple .header-main_content a.button-link,
.layout-login .header-main_content a.button-link {
  color: var(--text-gray); }
  @media (min-width: 980px) {
    .layout-simple .header-main_content a.button-link,
    .layout-login .header-main_content a.button-link {
      padding-top: 18px;
      padding-bottom: 18px; } }
  .layout-simple .header-main_content a.button-link.deco-left,
  .layout-login .header-main_content a.button-link.deco-left {
    border-left: 1px solid var(--border-gray-85);
    border-radius: 0; }
  .layout-simple .header-main_content a.button-link:hover,
  .hover .layout-simple .header-main_content a.button-link:hover,
  .layout-login .header-main_content a.button-link:hover,
  .hover
  .layout-login .header-main_content a.button-link:hover {
    color: var(--text-link); }

/* UTILITY MENU - XS, SM
    .utility-menu      A container for a list of utility links on XS, SM.
                        [Module parent]
 */
.utility-menu {
  background: var(--bg-white) fixed top left;
  margin-left: -1.2em;
  margin-right: -1.2em; }

/* PAGE CONTAINER 
    
    .page-container         A container for the main content of the page
                            [Module parent]

*/
@media (max-width: 767px) {
  .page-container .tile,
  .page-container .tile-convertible,
  .page-container .item-container-unattached,
  .page-container .wizard,
  .page-container .box.shadowed,
  .page-container .box-left-cap.shadowed {
    margin-left: -1.2em;
    margin-right: -1.2em;
    border-radius: 0; }
  .page-container .wizard .item-container,
  .page-container .wizard .item-container-unattached,
  .page-container .item-container-unattached .tile {
    margin-left: 0;
    margin-right: 0; }
  .page-container .box-left-cap {
    border-left: none;
    border-right: none; } }

/* BACK LINKS 

    .layout-simple_back     A back navigation link above the page content
                            Only appears in .layout-simple to accomodate for the lack of global "back link" in the header 
                            [Module parent]
 */
.layout-simple_back {
  display: none;
  margin-bottom: .9286em; }
  @media print, (min-width: 768px) {
    .layout-simple_back {
      position: relative;
      top: -5px;
      margin-bottom: .3571em; } }
  @media (min-width: 980px) {
    .layout-simple_back {
      top: -10px; } }
  .layout-simple .layout-simple_back {
    display: block; }
  a.layout-simple_back {
    text-decoration: none; }

/* MAIN 

    .main                   Outer container for main content
                            [Module parent]
    .main_content           Inner container for main content
                            [Child of .main]
    .main_overlay           An element that overlays the main content. Darkens the content and prevents tapping on XS, SM, MD
                            Visible only when the left menuy has reveleated itself
                            [Child of .main]
*/
.main {
  padding-top: 3.750em;
  padding-left: 1.2em;
  padding-right: 1.2em;
  background-color: var(--bg-gray-90c);
  width: 100%; }
  .main:focus {
    outline: none; }
  @media (min-width: 768px) {
    .main {
      padding-top: 4.286em;
      padding-bottom: 20px; } }
  @media (min-width: 980px) {
    .main {
      padding-top: 6.857em;
      padding-left: 1.0714em;
      padding-right: 1.0714em; } }
  @media print {
    .main {
      padding: 0 !important;
      min-height: 0;
      height: auto !important; } }
  .layout-login .main {
    min-height: 0;
    padding-top: 0;
    padding-bottom: 0; }
    @media (min-width: 768px) {
      .layout-login .main {
        padding: 0; } }
    @media (min-width: 980px) {
      .layout-login .main {
        text-align: center; } }

.main_content {
  padding: 1.4286em 0 .7143em; }
  @media print {
    .main_content {
      padding: 0 !important; } }
  @media (min-width: 768px) {
    .main_content {
      padding: 1.7143em .5714em 2.8571em .5714em; } }
  @media (min-width: 980px) {
    .main_content {
      padding-top: 2.1429em; } }
  @media (min-width: 1260px) {
    .main_content {
      padding-left: .8571em;
      padding-right: 1.4286em; } }
  .layout-login .main_content {
    padding-top: .3571em;
    padding-bottom: .0714em; }
    @media print, (min-width: 768px) {
      .layout-login .main_content {
        padding-left: 1.4286em;
        padding-right: 1.4286em; } }
    @media (min-width: 980px) {
      .layout-login .main_content {
        padding-left: 0;
        padding-right: 0;
        margin: 0 auto;
        text-align: left;
        width: 96%;
        max-width: 70em; } }
  .layout-simple .main_content {
    padding-bottom: 1px; }
    @media print, (min-width: 768px) {
      .layout-simple .main_content {
        padding-left: 1.4286em;
        padding-right: 1.4286em; } }
    @media (min-width: 980px) {
      .layout-simple .main_content {
        padding-left: 0;
        padding-right: 0;
        margin: 0 auto;
        text-align: left;
        width: 80%;
        max-width: 60em; } }

.main_overlay {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background: var(--bg-black-opacity-40);
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
  z-index: 9999; }

/* FOOTER SIMPLE               
    
    .footer-simple              Container for footer content on simple layout page.
                                Contains tagline, utility links, copyright, compliance logos.
                                [Module parent]
    
    .footer-simple_content 

    .footer-simple_col-left     Column containing the about us link, online security link, privacy link and routing number

    .footer-simple_col-right    Column containing the complaince logos and the copyright

*/
.footer-simple {
  margin-top: 1.4286em;
  width: 100%; }
  @media print, (min-width: 768px) {
    .footer-simple {
      text-align: left;
      padding: 0 1.4286em;
      margin-top: 2.1429em; } }
  @media (min-width: 980px) {
    .footer-simple {
      padding: 0;
      margin-left: auto;
      margin-right: auto;
      width: 80%; } }
  @media (min-width: 980px) {
    .layout-simple .footer-simple {
      width: 80%;
      max-width: 60em; } }
  @media (min-width: 980px) {
    .layout-login .footer-simple {
      width: 96%;
      max-width: 70em; } }

@media print, (min-width: 768px) {
  .footer-simple_content {
    padding: 0 .2143em 0 .2143em; } }

.footer-simple_col-left, .footer-simple_col-right {
  text-align: center; }

.footer-simple_col-left {
  font-size: 1.3rem; }
  @media print, (min-width: 768px) {
    .footer-simple_col-left {
      text-align: left;
      padding-left: 0;
      font-size: 1.2rem; } }

.footer-simple_col-right {
  font-size: 1.1rem; }
  @media print, (min-width: 768px) {
    .footer-simple_col-right {
      padding-right: 0;
      text-align: right;
      font-size: 1rem; } }

/* LOGO FACEBOOK

    .logo-facebook          The Facebook logo image
                            [Extends .img-responsive]

*/
.footer-simple .logo-facebook {
  max-height: 28px; }
  @media print, (min-width: 768px) {
    .footer-simple .logo-facebook {
      max-height: 36px; } }
  .footer-simple .logo-facebook-link {
    text-align: center; }
    @media print, (min-width: 768px) {
      .footer-simple .logo-facebook-link {
        display: block;
        float: left;
        text-align: left; } }

@media print, (min-width: 768px) {
  .hover .logo-facebook-link:focus {
    outline: 1px dotted var(--focus-outline-white-opacity-70);
    outline-offset: -2px; } }

/* APP STORE LINKS

    .app-store-links        Container for links to Andoid, Apple app stores
                            [Module parent]

    .app-store-link,
    .play-store-link        Links that wrap the app store images
                            [Child of .app-store-links]
    
    .app-store,
    .play-store             Images to represent the Android and Apple app store
                            [Child of .app-store-link, .play-store-link]

    .app-store-disclosure   Disclosure text associated with app store links.
                            [Module parent]

*/
.footer-simple .app-store-links {
  text-align: center; }
  @media (min-width: 768px) {
    .footer-simple .app-store-links {
      text-align: left; } }
  .footer-simple .app-store-links .app-store-link,
  .footer-simple .app-store-links .play-store-link {
    display: inline-block; }
  .footer-simple .app-store-links .app-store,
  .footer-simple .app-store-links .play-store {
    max-height: 38px;
    image-rendering: -webkit-optimize-contrast; }

@media (max-width: 767px) {
  .footer-simple .app-store-disclosure {
    padding-left: 1.2em;
    padding-right: 1.2em; } }

/* TAGLINE

    .tagline-container      Container for the tagline
                            Adds some padding above the image so it lines up center with Facebooklogo

    .tagline                The UWCU tagline image
                            [Extends .img-responsive]
*/
.footer-simple .tagline-container {
  padding-top: 1em; }
  @media print, (min-width: 768px) {
    .footer-simple .tagline-container {
      padding-top: .7143em; } }

.footer-simple .tagline {
  max-height: 18px;
  margin: 0 auto .7em; }
  @media print, (min-width: 768px) {
    .footer-simple .tagline {
      max-height: 20px;
      margin-bottom: 1.4286em; } }

/* COMPLIANCE LOGOS 
    .logos-compliance       The compliance logos -  NCUA, EHO
                            [Module Parent]

*/
@media print, (min-width: 768px) {
  .footer-simple .logos-compliance {
    float: right;
    margin: 0; } }

/* Anchors in Content of WB */
/* _TEMPLATE-DM.scss

    Purpose:        These are some special rules for darkmode 
                    This file needs to come last in the cascade in order to not need !important tags on them.
                    Needed a separate file in order to feature gate these changes
                    These are temporary and can can be moved to their corresponding main styles after go live
  */
/* TABLE OF CONTENTS 
  
    - MAIN NAV WATERMARK   
    - PAGE HEADER WATERMARK

    - REPORTS (Old High Charts) - Not apart of the template per se but needed some new rules to do dark mode
*/
@media (prefers-color-scheme: dark) {
  .main-nav_watermark,
  .page-header_watermark_img {
    opacity: .25; }
  /*  REPORTS - Dark Mode

    Additional CSS rules just for dark mode (because the colors are in a config)
    This is not meant to stand alone. It should come after _reports.scss in the dark mode bundle for WB
    Eventually this will be depreciated when the new charts are implemented in WB
*/
  .highcharts-background {
    fill: var(--bg-white); }
  .highcharts-axis-labels text {
    fill: var(--text-gray) !important; }
  .highcharts-axis text {
    fill: var(--text-gray) !important; }
  .highcharts-data-labels text {
    fill: var(--text-gray) !important; }
  .highcharts-grid path,
  .highcharts-axis path {
    stroke: var(--border-gray-80); }
  .highcharts-series rect {
    stroke: transparent; }
  .highcharts-series rect[fill="rgba(113,114,117,.3)"] {
    fill: var(--bg-info); }
  .highcharts-series rect[fill="#317897"] {
    fill: var(--bg-info); }
  .highcharts-series.highcharts-tracker path {
    stroke: var(--bg-white); }
  .highcharts-series path[fill="#D50032"] {
    fill: var(--bg-primary); }
  .legend-color[style="background-color: #D50032;"] {
    background-color: var(--bg-primary) !important; }
  .highcharts-series path[fill='#890020'] {
    fill: var(--bg-primary-darker); }
  .legend-color[style="background-color: #890020;"] {
    background-color: var(--bg-primary-darker) !important; }
  .highcharts-series path[fill="#d9d9d6"] {
    fill: var(--text-gray-67); }
  .legend-color[style="background-color: #d9d9d6;"] {
    background-color: var(--text-gray-67) !important; }
  .highcharts-markers path[fill="rgba(113,114,117,.3)"] {
    fill: var(--bg-gray-60); }
  .highcharts-markers path[fill="rgba(29,165,188,.5)"] {
    fill: var(--bg-info); }
  .highcharts-series rect[fill="rgba(29,165,188,.5)"] {
    fill: var(--bg-info); }
  .highcharts-series path[stroke="rgba(113,114,117,.3)"] {
    stroke: var(--gray-60); }
  .highcharts-series path[stroke="rgba(29,165,188,.5)"] {
    stroke: var(--bg-info); } }

@media (prefers-color-scheme: dark) {
  :root {
    --label-purple-text:        var(--text-white);
    --label-green-1-text:       var(--text-white);
    --label-green-2-text:       var(--text-white);
    --label-orange-1-text:      var(--text-white);
    --label-orange-2-text:      var(--text-white);
    --label-blue-1-text:        var(--text-white);
    --label-blue-2-text:        var(--text-white);
    --label-brown-1-text:       var(--text-white);
    --label-brown-2-text:       var(--text-white);
    --label-yellow-1-text:      hsl(0, 0%, 0%);
    --label-yellow-2-text:      var(--text-white); } }

@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: light dark;
    --brand-red-bg-s:           92%;
    --brand-red-bg-l:           38%;
    --brand-blue-s:             70%;
    --brand-blue-l:             75%;
    --brand-blue-bg-l:          35%;
    --brand-blue-bg-lighten-55: hsl(var(--brand-blue-bg-h), var(--brand-blue-bg-s), calc(var(--brand-blue-bg-l) - 28%));
    --error-s:                  92%;
    --error-l:                  76%;
    --error-bg-s:               68%;
    --error-bg-l:               41%;
    --success-h:                141;
    --success-s:                48%;
    --success-l:                62%;
    --success-bg-l:             23%;
    --warn-s:                   70%;
    --warn-l:                   61%;
    --warn-bg-s:                80%;
    --warn-bg-l:                36%;
    --warn-bg-lighten-45:       hsl(var(--warn-bg-h), var(--warn-bg-s), var(--warn-bg-l));
    --gray-93c:         hsl(214, 0%, 93%);
    --gray-90c:         hsl(214, 0%, 90%);
    --gray-88:          hsl(214, 0%, 88%);
    --gray-64:          hsl(214, 0%, 64%);
    --gray-54:          hsl(214, 0%, 54%);
    --gray-45:          hsl(214, 0%, 45%);
    --gray-44:          hsl(214, 0%, 44%);
    --gray-42:          hsl(214, 0%, 42%);
    --gray-40:          hsl(214, 0%, 40%);
    --gray-38:          hsl(214, 0%, 38%);
    --gray-35:          hsl(214, 0%, 35%);
    --gray-34:          hsl(214, 0%, 34%);
    --gray-32:          hsl(214, 0%, 32%);
    --gray-30:          hsl(214, 0%, 30%);
    --gray-29:          hsl(214, 0%, 29%);
    --gray-28:          hsl(214, 0%, 28%);
    --gray-26:          hsl(214, 0%, 26%);
    --gray-24:          hsl(214, 0%, 24%);
    --gray-20:          hsl(214, 0%, 20%); } }

@media (prefers-color-scheme: dark) {
  :root {
    --text-primary:                         var(--gray-90);
    --text-primary-active:                  var(--gray-93);
    --text-primary-active-extra-dark:       var(--gray-96);
    --text-gray-60:                         var(--gray-64);
    --text-gray-54:                         var(--gray-67);
    --text-gray-51:                         var(--gray-70);
    --text-gray-45:                         var(--gray-73);
    --text-gray-42:                         var(--gray-77);
    --text-gray-38:                         var(--gray-80);
    --text-gray-35:                         var(--gray-83);
    --text-gray-34:                         var(--gray-85);
    --text-gray-32:                         var(--gray-88);
    --text-gray-20:                         var(--gray-90);
    --text-white:                           var(--gray-90);
    --bg-gray-98:                           var(--gray-15);
    --bg-gray-96:                           var(--gray-18);
    --bg-gray-93c:                          var(--gray-18);
    --bg-gray-93:                           var(--gray-18);
    --bg-gray-90c:                          var(--gray-15);
    --bg-gray-90:                           var(--gray-35);
    --bg-gray-88:                           var(--gray-15);
    --bg-gray-87:                           var(--gray-35);
    --bg-gray-85:                           var(--gray-15);
    --bg-gray-80:                           var(--gray-44);
    --bg-gray-73:                           var(--gray-45);
    --bg-gray-70:                           var(--gray-30);
    --bg-gray-67:                           var(--gray-17);
    --bg-gray-45:                           var(--gray-30);
    --bg-gray-44:                           var(--gray-35);
    --bg-gray-35:                         var(--gray-15);
    --bg-gray-34:                         var(--gray-15);
    --bg-gray-54-opacity-05:                hsla(0, 0%, 54%, .05);
    --bg-gray-54-opacity-25:                hsla(0, 0%, 15%, .55);
    --bg-gray-54-opacity-35:                hsla(0, 0%, 12%, .65);
    --bg-gray-34-opacity-90:                hsla(0, 0%, 34%, .9);
    --bg-gray-34-opacity-95:                hsla(0, 0%, 15%, .95);
    --bg-gray-20-opacity-50:                hsla(0, 0%, 0%, .5);
    --bg-white:                             var(--gray-20);
    --bg-white-opacity-10:                  var(--white-10);
    --bg-white-opacity-80:                  hsla(0, 0%, 10%, .7);
    --bg-white-opacity-95:                  hsla(0, 0%, 10%, .8);
    --border-white:                         var(--white-15);
    --border-gray-96:                       var(--white-15);
    --border-gray-93:                       var(--white-15);
    --border-gray-90:                       var(--white-15);
    --border-gray-88:                       var(--white-15);
    --border-gray-87:                       var(--white-15);
    --border-gray-85:                       var(--white-15);
    --border-gray-80:                       var(--white-40);
    --border-gray-70:                       var(--gray-30);
    --border-gray-64:                       var(--white-15);
    --border-gray-44:                       var(--gray-35);
    --border-gray-35:                       var(--white-15);
    --border-gray-34:                       var(--gray-40);
    --box-shadow:                           hsla(0, 0%, 0%, .65);
    --box-shadow-level-1:                   hsla(0, 0%, 0%, .53);
    --box-shadow-level-20:                  hsla(0, 0%, 0%, .5);
    --filter-drop-shadow:               var(--gray-20);
    --progress-spin-indicator-border-right:         var(--gray-64);
    --progress-spin-indicator-border-bottom:        var(--gray-54);
    --progress-spin-indicator-border-left:          var(--gray-44);
    --progress-steps-todo-borders-backgrounds:      var(--gray-30);
    --progress-steps-done-borders-backgrounds:      var(--gray-45);
    --progress-steps-text-todo:                     var(--gray-64);
    --uwcu-loading-circle-border:                   var(--gray-38);
    --uwcu-loading-circle-inner-border:             var(--gray-30);
    --timeline-line:                                var(--gray-60);
    --toggle-text:                                  var(--text-white);
    --toggle-background:                            var(--gray-40);
    --toggle-border:                                var(--gray-40);
    --toggle-pressed-text:                          var(--text-med-gray);
    --toggle-pressed-background:                    var(--gray-26);
    --toggle-pressed-border:                        var(--gray-26);
    --popover-background:                           var(--gray-26);
    --popover-title-background:                     var(--gray-24);
    --popover-point-border:                         var(--gray-24);
    --button-disabled-text:                         var(--gray-54);
    --button-disabled-border:                       var(--gray-26);
    --button-disabled-background:                   var(--gray-26); } }