/* Minification failed. Returning unminified contents.
(274,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(275,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(278,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(279,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(280,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(3815,1): run-time error CSS1019: Unexpected token, found '}'
(4616,1): run-time error CSS1019: Unexpected token, found '@keyframes'
(4617,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%'
(9126,1): run-time error CSS1019: Unexpected token, found '@-webkit-keyframes'
(9127,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%'
(9143,1): run-time error CSS1019: Unexpected token, found '@keyframes'
(9144,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%'
(9168,1): run-time error CSS1019: Unexpected token, found '@-webkit-keyframes'
(9169,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%'
(9178,1): run-time error CSS1019: Unexpected token, found '@keyframes'
(9179,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%'
(9195,1): run-time error CSS1019: Unexpected token, found '@-webkit-keyframes'
(9196,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%'
(9212,1): run-time error CSS1019: Unexpected token, found '@keyframes'
(9213,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%'
(9237,1): run-time error CSS1019: Unexpected token, found '@-webkit-keyframes'
(9238,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%'
(9264,1): run-time error CSS1019: Unexpected token, found '@keyframes'
(9265,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%'
(9301,1): run-time error CSS1019: Unexpected token, found '@-webkit-keyframes'
(9302,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%'
(9318,1): run-time error CSS1019: Unexpected token, found '@keyframes'
(9319,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%'
(9343,1): run-time error CSS1019: Unexpected token, found '@-webkit-keyframes'
(9344,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '20%'
(9370,1): run-time error CSS1019: Unexpected token, found '@keyframes'
(9371,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '20%'
(9410,1): run-time error CSS1019: Unexpected token, found '@-webkit-keyframes'
(9411,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%'
(9437,1): run-time error CSS1019: Unexpected token, found '@keyframes'
(9438,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%'
(9476,1): run-time error CSS1019: Unexpected token, found '@-webkit-keyframes'
(9477,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%'
(9513,1): run-time error CSS1019: Unexpected token, found '@keyframes'
(9514,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%'
(9562,1): run-time error CSS1019: Unexpected token, found '@-webkit-keyframes'
(9563,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%'
(9587,1): run-time error CSS1019: Unexpected token, found '@keyframes'
(9588,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%'
(9621,1): run-time error CSS1019: Unexpected token, found '@-webkit-keyframes'
(9622,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%'
(9645,1): run-time error CSS1019: Unexpected token, found '@keyframes'
(9646,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%'
(9678,1): run-time error CSS1019: Unexpected token, found '@-webkit-keyframes'
(9679,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%'
(9702,1): run-time error CSS1019: Unexpected token, found '@keyframes'
(9703,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%'
(9735,1): run-time error CSS1019: Unexpected token, found '@-webkit-keyframes'
(9736,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%'
(9759,1): run-time error CSS1019: Unexpected token, found '@keyframes'
(9760,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%'
(9792,1): run-time error CSS1019: Unexpected token, found '@-webkit-keyframes'
(9793,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%'
(9816,1): run-time error CSS1019: Unexpected token, found '@keyframes'
(9817,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%'
(9849,1): run-time error CSS1019: Unexpected token, found '@-webkit-keyframes'
(9850,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%'
(9873,1): run-time error CSS1019: Unexpected token, found '@keyframes'
(9874,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%'
(9906,1): run-time error CSS1019: Unexpected token, found '@-webkit-keyframes'
(9907,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%'
(9925,1): run-time error CSS1019: Unexpected token, found '@keyframes'
(9926,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%'
(9952,1): run-time error CSS1019: Unexpected token, found '@-webkit-keyframes'
(9953,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%'
(9971,1): run-time error CSS1019: Unexpected token, found '@keyframes'
(9972,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%'
(9998,1): run-time error CSS1019: Unexpected token, found '@-webkit-keyframes'
(9999,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%'
(10017,1): run-time error CSS1019: Unexpected token, found '@keyframes'
(10018,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%'
(10044,1): run-time error CSS1019: Unexpected token, found '@-webkit-keyframes'
(10045,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%'
(10063,1): run-time error CSS1019: Unexpected token, found '@keyframes'
(10064,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%'
(10090,1): run-time error CSS1019: Unexpected token, found '@-webkit-keyframes'
(10091,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%'
(10100,1): run-time error CSS1019: Unexpected token, found '@keyframes'
(10101,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%'
(10115,1): run-time error CSS1019: Unexpected token, found '@-webkit-keyframes'
(10116,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%'
(10129,1): run-time error CSS1019: Unexpected token, found '@keyframes'
(10130,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%'
(10150,1): run-time error CSS1019: Unexpected token, found '@-webkit-keyframes'
(10151,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%'
(10164,1): run-time error CSS1019: Unexpected token, found '@keyframes'
(10165,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%'
(10185,1): run-time error CSS1019: Unexpected token, found '@-webkit-keyframes'
(10186,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%'
(10199,1): run-time error CSS1019: Unexpected token, found '@keyframes'
(10200,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%'
(10220,1): run-time error CSS1019: Unexpected token, found '@-webkit-keyframes'
(10221,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%'
(10234,1): run-time error CSS1019: Unexpected token, found '@keyframes'
(10235,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%'
(10255,1): run-time error CSS1019: Unexpected token, found '@-webkit-keyframes'
(10256,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%'
(10269,1): run-time error CSS1019: Unexpected token, found '@keyframes'
(10270,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%'
(10290,1): run-time error CSS1019: Unexpected token, found '@-webkit-keyframes'
(10291,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%'
(10304,1): run-time error CSS1019: Unexpected token, found '@keyframes'
(10305,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%'
(10325,1): run-time error CSS1019: Unexpected token, found '@-webkit-keyframes'
(10326,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%'
(10339,1): run-time error CSS1019: Unexpected token, found '@keyframes'
(10340,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%'
(10360,1): run-time error CSS1019: Unexpected token, found '@-webkit-keyframes'
(10361,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%'
(10374,1): run-time error CSS1019: Unexpected token, found '@keyframes'
(10375,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%'
(10395,1): run-time error CSS1019: Unexpected token, found '@-webkit-keyframes'
(10396,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%'
(10405,1): run-time error CSS1019: Unexpected token, found '@keyframes'
(10406,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%'
(10420,1): run-time error CSS1019: Unexpected token, found '@-webkit-keyframes'
(10421,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%'
(10434,1): run-time error CSS1019: Unexpected token, found '@keyframes'
(10435,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%'
(10455,1): run-time error CSS1019: Unexpected token, found '@-webkit-keyframes'
(10456,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%'
(10469,1): run-time error CSS1019: Unexpected token, found '@keyframes'
(10470,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%'
(10490,1): run-time error CSS1019: Unexpected token, found '@-webkit-keyframes'
(10491,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%'
(10504,1): run-time error CSS1019: Unexpected token, found '@keyframes'
(10505,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%'
(10525,1): run-time error CSS1019: Unexpected token, found '@-webkit-keyframes'
(10526,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%'
(10539,1): run-time error CSS1019: Unexpected token, found '@keyframes'
(10540,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%'
(10560,1): run-time error CSS1019: Unexpected token, found '@-webkit-keyframes'
(10561,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%'
(10574,1): run-time error CSS1019: Unexpected token, found '@keyframes'
(10575,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%'
(10595,1): run-time error CSS1019: Unexpected token, found '@-webkit-keyframes'
(10596,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%'
(10609,1): run-time error CSS1019: Unexpected token, found '@keyframes'
(10610,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%'
(10630,1): run-time error CSS1019: Unexpected token, found '@-webkit-keyframes'
(10631,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%'
(10644,1): run-time error CSS1019: Unexpected token, found '@keyframes'
(10645,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%'
(10665,1): run-time error CSS1019: Unexpected token, found '@-webkit-keyframes'
(10666,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%'
(10679,1): run-time error CSS1019: Unexpected token, found '@keyframes'
(10680,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%'
(10700,1): run-time error CSS1019: Unexpected token, found '@-webkit-keyframes'
(10701,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%'
(10737,1): run-time error CSS1019: Unexpected token, found '@keyframes'
(10738,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%'
(10787,1): run-time error CSS1019: Unexpected token, found '@-webkit-keyframes'
(10788,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%'
(10811,1): run-time error CSS1019: Unexpected token, found '@keyframes'
(10812,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%'
(10847,1): run-time error CSS1019: Unexpected token, found '@-webkit-keyframes'
(10848,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%'
(10871,1): run-time error CSS1019: Unexpected token, found '@keyframes'
(10872,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%'
(10907,1): run-time error CSS1019: Unexpected token, found '@-webkit-keyframes'
(10908,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%'
(10921,1): run-time error CSS1019: Unexpected token, found '@keyframes'
(10922,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%'
(10945,1): run-time error CSS1019: Unexpected token, found '@-webkit-keyframes'
(10946,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%'
(10959,1): run-time error CSS1019: Unexpected token, found '@keyframes'
(10960,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%'
(10983,1): run-time error CSS1019: Unexpected token, found '@-webkit-keyframes'
(10984,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%'
(11009,1): run-time error CSS1019: Unexpected token, found '@keyframes'
(11010,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%'
(11046,1): run-time error CSS1019: Unexpected token, found '@-webkit-keyframes'
(11047,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%'
(11060,1): run-time error CSS1019: Unexpected token, found '@keyframes'
(11061,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%'
(11083,1): run-time error CSS1019: Unexpected token, found '@-webkit-keyframes'
(11084,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%'
(11101,1): run-time error CSS1019: Unexpected token, found '@keyframes'
(11102,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%'
(11128,1): run-time error CSS1019: Unexpected token, found '@-webkit-keyframes'
(11129,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%'
(11146,1): run-time error CSS1019: Unexpected token, found '@keyframes'
(11147,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%'
(11173,1): run-time error CSS1019: Unexpected token, found '@-webkit-keyframes'
(11174,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%'
(11191,1): run-time error CSS1019: Unexpected token, found '@keyframes'
(11192,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%'
(11218,1): run-time error CSS1019: Unexpected token, found '@-webkit-keyframes'
(11219,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%'
(11236,1): run-time error CSS1019: Unexpected token, found '@keyframes'
(11237,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%'
(11263,1): run-time error CSS1019: Unexpected token, found '@-webkit-keyframes'
(11264,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%'
(11281,1): run-time error CSS1019: Unexpected token, found '@keyframes'
(11282,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%'
(11308,1): run-time error CSS1019: Unexpected token, found '@-webkit-keyframes'
(11309,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%'
(11326,1): run-time error CSS1019: Unexpected token, found '@keyframes'
(11327,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%'
(11353,1): run-time error CSS1019: Unexpected token, found '@-webkit-keyframes'
(11354,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%'
(11371,1): run-time error CSS1019: Unexpected token, found '@keyframes'
(11372,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%'
(11398,1): run-time error CSS1019: Unexpected token, found '@-webkit-keyframes'
(11399,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%'
(11416,1): run-time error CSS1019: Unexpected token, found '@keyframes'
(11417,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%'
(11443,1): run-time error CSS1019: Unexpected token, found '@-webkit-keyframes'
(11444,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%'
(11461,1): run-time error CSS1019: Unexpected token, found '@keyframes'
(11462,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%'
(11488,1): run-time error CSS1019: Unexpected token, found '@-webkit-keyframes'
(11489,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%'
(11506,1): run-time error CSS1019: Unexpected token, found '@keyframes'
(11507,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%'
(11533,1): run-time error CSS1019: Unexpected token, found '@-webkit-keyframes'
(11534,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%'
(11546,1): run-time error CSS1019: Unexpected token, found '@keyframes'
(11547,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%'
(11566,1): run-time error CSS1019: Unexpected token, found '@-webkit-keyframes'
(11567,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%'
(11579,1): run-time error CSS1019: Unexpected token, found '@keyframes'
(11580,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%'
(11599,1): run-time error CSS1019: Unexpected token, found '@-webkit-keyframes'
(11600,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%'
(11612,1): run-time error CSS1019: Unexpected token, found '@keyframes'
(11613,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%'
(11632,1): run-time error CSS1019: Unexpected token, found '@-webkit-keyframes'
(11633,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%'
(11645,1): run-time error CSS1019: Unexpected token, found '@keyframes'
(11646,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%'
(11665,1): run-time error CSS1019: Unexpected token, found '@-webkit-keyframes'
(11666,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%'
(11678,1): run-time error CSS1019: Unexpected token, found '@keyframes'
(11679,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%'
(11698,1): run-time error CSS1019: Unexpected token, found '@-webkit-keyframes'
(11699,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%'
(11711,1): run-time error CSS1019: Unexpected token, found '@keyframes'
(11712,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%'
(11731,1): run-time error CSS1019: Unexpected token, found '@-webkit-keyframes'
(11732,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%'
(11744,1): run-time error CSS1019: Unexpected token, found '@keyframes'
(11745,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%'
(11764,1): run-time error CSS1019: Unexpected token, found '@-webkit-keyframes'
(11765,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%'
(11809,1): run-time error CSS1019: Unexpected token, found '@keyframes'
(11810,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%'
(11870,1): run-time error CSS1019: Unexpected token, found '@-webkit-keyframes'
(11871,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%'
(11884,1): run-time error CSS1019: Unexpected token, found '@keyframes'
(11885,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%'
(11907,1): run-time error CSS1019: Unexpected token, found '@-webkit-keyframes'
(11908,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%'
(11921,1): run-time error CSS1019: Unexpected token, found '@keyframes'
(11922,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%'
(13386,17): run-time error CSS1039: Token not allowed after unary operator: '-bf-accento'
(13415,28): run-time error CSS1039: Token not allowed after unary operator: '-bf-accento'
(13426,28): run-time error CSS1039: Token not allowed after unary operator: '-bf-accento'
(13439,17): run-time error CSS1039: Token not allowed after unary operator: '-bf-accento'
(13856,21): run-time error CSS1039: Token not allowed after unary operator: '-bf-accento'
(13944,1): run-time error CSS1019: Unexpected token, found '@keyframes'
(13945,10): run-time error CSS1035: Expected colon, found '{'
(13985,1): run-time error CSS1019: Unexpected token, found '@keyframes'
(13986,10): run-time error CSS1035: Expected colon, found '{'
(14052,17): run-time error CSS1039: Token not allowed after unary operator: '-bf-accento'
(14125,17): run-time error CSS1039: Token not allowed after unary operator: '-bf-accento'
(14145,17): run-time error CSS1039: Token not allowed after unary operator: '-bf-accento'
(14262,17): run-time error CSS1039: Token not allowed after unary operator: '-bf-accento'
(14267,17): run-time error CSS1039: Token not allowed after unary operator: '-bf-accento'
(14272,28): run-time error CSS1039: Token not allowed after unary operator: '-bf-accento-velato'
(14273,17): run-time error CSS1039: Token not allowed after unary operator: '-bf-accento'
(14278,21): run-time error CSS1039: Token not allowed after unary operator: '-bf-accento'
(14284,28): run-time error CSS1039: Token not allowed after unary operator: '-bf-accento'
(14304,17): run-time error CSS1039: Token not allowed after unary operator: '-bf-accento'
(14305,28): run-time error CSS1039: Token not allowed after unary operator: '-bf-accento-velato'
(14320,17): run-time error CSS1039: Token not allowed after unary operator: '-bf-accento'
(14321,28): run-time error CSS1039: Token not allowed after unary operator: '-bf-accento-velato'
(14387,1): run-time error CSS1019: Unexpected token, found '@keyframes'
(14388,10): run-time error CSS1035: Expected colon, found '{'
(14457,28): run-time error CSS1039: Token not allowed after unary operator: '-bf-accento-velato'
(14458,17): run-time error CSS1039: Token not allowed after unary operator: '-bf-accento'
(14463,21): run-time error CSS1039: Token not allowed after unary operator: '-bf-accento'
(14502,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(14503,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(14511,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(14517,15): run-time error CSS1039: Token not allowed after unary operator: '-bfSiPayInizio'
(14522,17): run-time error CSS1039: Token not allowed after unary operator: '-bfSiPayLarghezza'
(14525,34): run-time error CSS1039: Token not allowed after unary operator: '-bfSiPayInizio'
(14570,21): run-time error CSS1039: Token not allowed after unary operator: '-bf-accento'
(14584,21): run-time error CSS1039: Token not allowed after unary operator: '-bf-accento'
(14589,28): run-time error CSS1039: Token not allowed after unary operator: '-bf-accento-velato'
(14590,17): run-time error CSS1039: Token not allowed after unary operator: '-bf-accento'
(14709,28): run-time error CSS1039: Token not allowed after unary operator: '-bf-accento'
(14880,32): run-time error CSS1039: Token not allowed after unary operator: '-bf-accento-tenue'
(14880,56): run-time error CSS1039: Token not allowed after unary operator: '-bf-accento-velato'
(14933,16): run-time error CSS1039: Token not allowed after unary operator: '-bfSiPayContenuti'
(14940,16): run-time error CSS1039: Token not allowed after unary operator: '-bfSiPayContenuti'
(14960,21): run-time error CSS1039: Token not allowed after unary operator: '-bfSiPayContenuti'
(14965,21): run-time error CSS1039: Token not allowed after unary operator: '-bfSiPayContenuti'
(14974,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(14978,16): run-time error CSS1039: Token not allowed after unary operator: '-bfSiPayColonnaSinistra'
(14984,16): run-time error CSS1039: Token not allowed after unary operator: '-bfSiPayColonnaSinistra'
(14992,21): run-time error CSS1039: Token not allowed after unary operator: '-bfSiPayColonnaSinistra'
(15034,28): run-time error CSS1039: Token not allowed after unary operator: '-bf-accento-velato'
(15035,17): run-time error CSS1039: Token not allowed after unary operator: '-bf-accento'
(15039,32): run-time error CSS1039: Token not allowed after unary operator: '-bf-accento'
(15056,1): run-time error CSS1019: Unexpected token, found '@keyframes'
(15057,10): run-time error CSS1035: Expected colon, found '{'
(15070,1): run-time error CSS1019: Unexpected token, found '@keyframes'
(15071,10): run-time error CSS1035: Expected colon, found '{'
(15146,17): run-time error CSS1039: Token not allowed after unary operator: '-bf-accento'
(15236,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
 */
body {
    color: #003a49;
    background-image: url(../Images/GeometricoGrigioBasso.jpg);
    background-repeat: no-repeat !important;
    background-position: center center;
    background-size: contain;
    height: auto;
    padding-bottom: 100px;
}



.clackpay-point-body {
    padding-top: 120px;
    text-align: center;
}

.clackpay-point-login {
    margin: auto;
    max-width: 380px;
    border-radius: 10px;
    padding: 50px 50px 50px 42px;
    background-color: white !important;
    border: solid #1E5E2E 3px !important;
}

@media only screen and (max-width: 600px) {
    .clackpay-point-login .immagine img {
        height: 40px;
    }

    .clackpay-point-login {
        padding: 50px 20px 50px 20px;
        margin-top: -100px;
    }
}




    .clackpay-point-login .immagine {
        margin-bottom: 20px;
    }

@media only screen and (max-width: 600px) {
    .clackpay-point-login .immagine img {
        height: 40px;
    }

    .clackpay-point-login {
        padding: 50px 20px 50px 20px;
        margin-top: -100px;
    }
}



    .clackpay-point-login input {
        border-radius: 6px;
    }

        .clackpay-point-login input[type=text],
        .clackpay-point-login input[type=password] {
            font-size: 18px;
            font-weight: bold;
            text-align: center;
            background-color: white;
            width: 100%;
            margin-bottom: 20px;
            padding: 10px 20px !important;
        }

        .clackpay-point-login input[type=submit] {
            font-size: 20px;
            background-color: #9a004f;
            color: white;
            width: 100% !important;
            border: none;
            padding: 13px 0px 43px 0px !important;
            border-radius: 10px !important;
            text-transform: uppercase;
        }

            .clackpay-point-login input[type=submit]:hover,
            .clackpay-point-login input[type=submit]:focus {
                background-color: #2C7A3E;
                color: white;
            }

    .clackpay-point-login .avvisoBrowser {
        text-align: left;
        border: solid 1px #323232;
        color: #323232;
        border-radius: 8px;
        padding: 8px 8px 8px 70px;
        margin: 20px 2px 2px 2px;
        background-image: url("../../../Common/Immagini/Icone/alertMini.png");
        background-repeat: no-repeat;
        background-position: top 10px left 20px
    }

        .clackpay-point-login .avvisoBrowser a {
            color: #75c044;
        }

            .clackpay-point-login .avvisoBrowser a:hover {
                color: #323232;
            }



::-webkit-input-placeholder { /* Chrome/Opera/Safari */
    text-align: center;
    font-size: 16px;
    font-weight: bold;
}

::-moz-placeholder { /* Firefox 19+ */
    text-align: center;
    font-weight: bold;
    font-size: 16px;
}

:-ms-input-placeholder { /* IE 10+ */
    text-align: center;
    font-weight: bold;
    font-size: 16px;
}

:-moz-placeholder { /* Firefox 18- */
    text-align: center;
    font-weight: bold;
    font-size: 16px;
}


.password-reset {
    margin-top: 20px;
    margin-bottom: -30px;
    padding-right:24px;
    text-align: right !important;
}

    .password-reset a {
        color: #003a49 !important;
        font-weight: bold;
        font-size:14px;
    }

    .password-reset a:hover{
        color:#9a004f !important;
    }


body {
    color: #003a49;
    background-repeat: no-repeat !important;
    background-position: center center;
    background-size: cover;
    height: auto;
    padding-bottom: 100px;
}


.clackpay-point-body {
    padding-top: 120px;
    text-align: center;
}


.clackpay-point-login .immagine {
    margin-bottom: 20px;
}

@media only screen and (max-width: 600px) {
    .clackpay-point-login .immagine img {
        height: 40px;
    }

    .clackpay-point-login {
        padding: 50px 20px 50px 20px;
        margin-top: -100px;
    }
}




.clackpay-point-login input {
    border-radius: 6px;
}

    .clackpay-point-login input[type=text],
    .clackpay-point-login input[type=password] {
        font-size: 18px;
        font-weight: bold;
        text-align: center;
        background-color: white;
        width: 100%;
        margin-bottom: 20px;
        padding: 10px 20px !important;
    }

    .clackpay-point-login input[type=submit] {
        font-size: 20px;
        background-color: #1E5E2E;
        color: white;
        width: 100% !important;
        border: none;
        padding: 13px 0px 43px 0px !important;
        border-radius: 30px;
        text-transform: uppercase;
    }

    .clackpay-point-login input:hover[type=submit] {
        background-color: #2C7A3E;
        color: white;
    }

.clackpay-point-login .avvisoBrowser {
    text-align: left;
    border: solid 1px #323232;
    color: #323232;
    border-radius: 8px;
    padding: 8px 8px 8px 70px;
    margin: 20px 2px 2px 2px;
    background-image: url("../../../Common/Immagini/Icone/alertMini.png");
    background-repeat: no-repeat;
    background-position: top 10px left 20px
}

    .clackpay-point-login .avvisoBrowser a {
        color: #75c044;
    }

        .clackpay-point-login .avvisoBrowser a:hover {
            color: #323232;
        }



::-webkit-input-placeholder { /* Chrome/Opera/Safari */
    text-align: center;
    font-size: 16px;
    font-weight: bold;
}

::-moz-placeholder { /* Firefox 19+ */
    text-align: center;
    font-weight: bold;
    font-size: 16px;
}

:-ms-input-placeholder { /* IE 10+ */
    text-align: center;
    font-weight: bold;
    font-size: 16px;
}

:-moz-placeholder { /* Firefox 18- */
    text-align: center;
    font-weight: bold;
    font-size: 16px;
}


/* Colori del pannello delle funzioni (SiPay/Common/Styles/BarraFunzioniSiPay.css).
   Stanno qui e non nel foglio condiviso perche' sono l'unica cosa che cambia da un brand
   all'altro: il disegno del pannello resta uno solo.

   L'accento e' quello del pulsante "Vai al Pagamento" della maschera di scelta: il pannello
   usa lo stesso colore con cui il brand segnala gia' cio' su cui si clicca. */
:root {
    --bf-accento: #1E5E2E;
    --bf-accento-velato: #EDF2EE;
    /* Barra di caricamento in cima alla finestra (Scripts/AttesaCaricamentoPagina.js):
       la stessa tinta al 20%, al 52% e piena, nel verso in cui la barra si muove. */
    --ps-attesa-chiaro: #D2DFD5;
    --ps-attesa-medio: #8AAB92;
    --ps-attesa-pieno: #1E5E2E;
}

body {
    /*background-color: #b9eea3 !important;*/
    /*background-image: url(../Images/CLACKPAY_LOGO_HAND_K5.jpg);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;*/
    height: auto !important;
    padding-bottom: 100px;
    background: linear-gradient(108.08deg, #FFF 90%, #DBDBDB 100%);
    font-family: 'Nunito Sans', sans-serif;
}

a {
    text-decoration: none !important;
}

b {
    /*color: #75c044;*/
    font-size: 14px;
}

label {
    font-weight: normal !important;
}

input[type="checkbox"] {
    margin: 3px 7px 3px 3px !important;
}

input:focus {
    outline: none;
}

ul li {
    list-style-type: none;
}

h1 {
    font-size: 26px !important;
    font-weight: bold !important;
    color: #35496A !important;
}

#pagina {
    font-family: 'Nunito Sans', sans-serif;
    padding-top: 60px;
    padding-bottom: 20px;
    width: 90%;
    max-width: 1200px;
}


.user-icon {
    float: left;
    margin-right: 3px;
    margin-top: 1px;
}

#headerVisuale {
    color: white;
    border-bottom: solid 8px white;
    margin-top: -8px;
    height: 61px;
    box-shadow: 0px 1px 10px 0 #35496A;
    background: linear-gradient(240deg, #1E5E2E 62%, #1E5E2E 40%, #1E5E2E 40%, white 80%);
}


    #headerVisuale a {
        font-size: 13px;
        text-transform: uppercase;
        color: white;
        font-weight: bold;
    }

        #headerVisuale a:hover {
            color: #323232;
            font-weight: bold;
            background-color:#18A689;
        }

#headerOperativo {
    color: white;
    border-bottom: solid 8px white;
    margin-top: -8px;
    height: 61px;
    box-shadow: 0px 1px 10px 0 #35496A;
    background: linear-gradient(240deg, #1E5E2E 62%, #1E5E2E 40%, #1E5E2E 40%, white 80%);
}

    #headerOperativo a {
        text-transform: uppercase;
        font-size: 12px;
        font-weight: bold;
        color: white;
    }

        #headerOperativo a:hover {
            color: #323232;
        }

.navbar-collapse.collapse.in .dropdown a,
.navbar-collapse.collapse.in .dropdown a {
    height: 41px;
}

/* OPERAZIONI RICORRENTI */

.operazioni-ricorrenti {
    width: 1080px;
    text-align: center;
    padding: 12px 0px 2px 0px;
}

    .operazioni-ricorrenti .operazione-ricorrente-etichetta {
        margin-left: 0px !important;
        text-align: left !important;
        position: absolute;
        text-transform: none;
    }


    .operazioni-ricorrenti .fa {
        text-align: left;
        padding: 9px 14px 6px 14px;
        font-size: 20px !important;
        opacity: 0.8;
        color: white !important;
        margin-right: 8px;
    }


        .operazioni-ricorrenti .fa span {
            font-size: 12px !important;
            float: right;
            margin-left: 8px;
            font-family: 'Nunito Sans', sans-serif !important;
            text-align: left;
            margin-top: -2px;
        }

        .operazioni-ricorrenti .fa:hover {
            transition: background-color 0.5s;
            background-color: #35496A;
            color: white !important;
            border-radius: 5px;
            opacity: 1;
        }

#headerVisuale .operazioni-ricorrenti {
    padding-top: 7px !important;
}


@media only screen and (max-width: 1150px) {
    .operazioni-ricorrenti {
        display: none;
    }
}



#disabilitaOperativita {
    position: fixed;
    padding: 0px;
    width: 2000px;
    height: 1500px;
    margin: 0px auto 0px auto;
    /*background-image: url('../Immagini/sfondoBriciolePane.png');*/
    background-repeat: repeat;
    z-index: 150;
    cursor: wait;
}


#page_disabilita_operativita {
    position: fixed;
    padding: 0px;
    width: 100%;
    height: 100%;
    margin: 0px auto 0px auto;
    background-repeat: repeat;
    z-index: 150;
    cursor: wait;
    top: 0px;
    left: 0px;
    background: rgba(239, 239, 239, 0.1);
}

#page_disabilita_operativita_body {
    margin: auto;
    text-align: center;
    border-radius: 5px;
    padding: 4px 8px;
    width: 100%;
    z-index: 150;
    margin-top: 200px !important;
}

#page_disabilita_operativita_immagine {
    text-align: center;
    padding: 20px;
}

#page_disabilita_operativita_messaggio {
    font-size: 16px;
    font-weight: bold;
    text-align: center;
    margin: auto;
    max-width: 600px;
    margin-top: 20px;
    padding: 30px 24px;
    border-radius: 3px;
    z-index: 200;
    background-color: white;
    box-shadow: 4px 4px 8px #888888;
}

    #page_disabilita_operativita_messaggio a {
        color: #35496A;
    }

.accessoUtente {
    position: relative;
    float: left;
    margin-right: 2px;
    font-size: 12px;
    text-align: right;
    max-width: 200px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-transform: none
}



    .accessoUtente span {
        font-size: 15px;
    }


.link-main-ddl li :hover {
    color: white !important;
}

.link-ddl {
    padding: 3px 20px;
}

    .link-ddl li {
        color: #323232 !important;
        background-color: white !important;
    }

    .link-ddl a {
        color: #323232 !important;
    }


    .link-ddl :hover a {
        color: #323232 !important;
    }

    .link-ddl li :hover {
        background-color: rgba(154,0,79, 0.5) !important;
    }

    .link-ddl li .nonSelezionabile :hover {
        background-color: white !important;
    }

    .link-ddl li .nonSelezionabile {
        background-color: white !important;
        margin-bottom: 5px;
        padding-bottom: 5px;
        border-bottom: 1px solid #939598;
    }

    .link-ddl li .saldo {
        color: #323232 !important;
        font-weight: bold;
        padding: 0px 10px 0px 20px;
        font-size: 22px;
    }

        .link-ddl li .saldo :hover {
            color: #323232 !important;
        }




    .link-ddl li .infoAnagrafica {
        color: #1E5E2E !important;
        text-align: center;
        font-weight: bold;
        width: 250px;
        padding: 3px;
        font-size: 18px;
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
    }

        .link-ddl li .infoAnagrafica :hover {
            color: #1E5E2E !important;
        }

        .link-ddl li .infoAnagrafica .icona-user {
            font-size: 120px;
        }


.accessoUtente a {
    margin-top: -12px;
    font-weight: normal !important;
    text-transform: none !important;
    font-size: 14px !important;
    color: #323232 !important;
}

.accessoUtente:hover a {
    margin-top: -12px;
    font-weight: normal !important;
    text-transform: none !important;
    font-size: 14px !important;
    color: #323232 !important;
}


.numerico {
    text-align: right;
    padding: 4px !important;
}

    .numerico:focus {
        font-weight: bold !important;
    }

.scrollabile {
    overflow-y: auto;
}


/* USERCONTROLS CUSTOM   
----------------------------------------------------------*/

.selezioneBinaria a {
    font-size: 12px;
    border: solid 1px #D9D9D9;
    text-decoration: none;
    text-transform: uppercase;
    color: #485D71;
    font-weight: 600;
}

.selezioneBinaria .selezioneBinaria-elemento-sinistra {
    border-right: none;
    border-radius: 6px 0px 0px 6px;
    padding: 6px 17px !important;
    margin-right: -5px;
}

.selezioneBinaria .selezioneBinaria-elemento-destra {
    border-radius: 0px 6px 6px 0px;
    padding: 6px 14px !important;
}


.selezioneBinaria .selezioneBinaria-elemento-selezionato {
    background-color: #1E5E2E;
    color: white;
    padding-top: 7px !important;
}

    .selezioneBinaria .selezioneBinaria-elemento-selezionato:hover {
        background-color: #1E5E2E;
        color: white;
    }

.selezioneBinaria a:hover {
    background-color: #35496A;
    color: white;
}



/* FILTRI E OPZIONI DI RICERCA
----------------------------------------------------------*/

.filtro {
    width: 100%;
    border-bottom: solid 1px #e5e6e7;
    overflow: auto;
}

.filtro-elemento {
    padding: 10px 0px;
    float: left;
    margin-right: 20px;
    width: 150px;
}


/* SELEZIONE AREA
----------------------------------------------------------*/
#pagina_selezioneAree {
    height: 52px;
    text-align: center;
    background-color: none;
}

.scrollabile-orizzontalmente {
    overflow-x: auto;
    white-space: nowrap;
}

/*------ Personalizzazione Scrollbar Selzione Voci Aree -------*/

::-webkit-scrollbar {
    height: 8px;
    width: 12px;
}

::-webkit-scrollbar-track {
    background: #f1f1f1;
}

::-webkit-scrollbar-thumb {
    background: #35496A;
}

    ::-webkit-scrollbar-thumb:hover {
        background: #1E5E2E;
    }

/*------- Fine Personalizzazione Scrollbar Selzione Voci Aree ------*/

#pagina_selezioneAree ul {
    text-align: center;
    margin: 0px;
    padding: 0px;
    padding-top: 10px;
}

#pagina_selezioneAree li {
    display: inline;
    font-weight: bold;
    font-size: 17px;
    margin-right: 8px;
    padding: 0px 6px 0px 6px;
    text-transform: uppercase;
}

    #pagina_selezioneAree li :hover {
        padding-bottom: 5px;
        border-bottom: solid 4px #F39021;
        color: #35496A !important;
    }

    #pagina_selezioneAree li a:link, a:visited, a:hover, a:active {
        text-decoration: none;
        color: rgba(53, 73, 106, 0.83);
    }

    #pagina_selezioneAree li a:active {
        text-decoration: underline;
    }

#pagina_selezioneAree .areaSelezionata {
    padding-bottom: 5px;
    border-bottom: solid 4px #F39021;
}

    #pagina_selezioneAree .areaSelezionata a {
        color: #35496A !important;
    }


.nav .navbar-nav {
}

/* AREE
----------------------------------------------------------*/
/*#pagina .area {
    padding: 10px 10px 30px 10px;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}*/

#headerVisuale .logoHome,
#headerOperativo .logoHome {
    position: absolute;
    top: 2px;
    left: 12px;
}

    #headerVisuale .info-point,
    #headerOperativo .info-point {
        position: absolute;
        right: 20px;
    }

@media (min-width: 768px) {
    .navbar > .container .navbar-brand, .navbar > .container-fluid .navbar-brand {
        margin-left: -15px;
        width: 0px !important;
        background-color:white !important;
    }
}


#pagina .area {
    padding: 10px 10px 30px 10px;
}


    #pagina .area .chiudi {
        position: relative;
        top: 70px;
        margin-left: 45%;
        font-size: 18px;
        font-weight: bold;
        width: 180px;
    }

        #pagina .area .chiudi a {
            color: #1E5E2E;
            padding: 6px 14px 6px 14px;
        }

            #pagina .area .chiudi a:active,
            #pagina .area .chiudi a:visited,
            #pagina .area .chiudi a:link {
                border: solid 1px #1E5E2E;
                border-radius: 4px;
                margin: -7px;
            }

        #pagina .area .chiudi:hover a {
            color: white;
            border-color: #1E5E2E;
            background-color: #1E5E2E;
        }



    #pagina .area .titolo {
        margin-left: 12px;
        font-size: 46px !important;
        font-weight: bold !important;
        color: #35496A;
        padding: 10px 0px 10px 0px;
    }

    #pagina .area .titolo-centra {
        position: relative;
        text-align:center;
        margin-bottom: 20px;
    }

@media only screen and (max-width: 600px) {
    #pagina .area .titolo img {
        height: 40px;
    }

    .clackpay-point-login {
        padding: 50px 20px 50px 20px;
        margin-top: -100px;
    }
}


#pagina .sezione {
    padding: 10px 20px 10px 20px;
    margin-bottom: 20px;
    border-radius: 2px;
    font-size: 20px;
}

    #pagina .sezione .titolo {
        font-size: 20px !important;
        font-weight: bold;
        padding: 0px;
        padding-bottom: 8px;
        margin: 0px;
        margin-bottom: 8px;
        color: #35496A;
        border-bottom: #35496A 1px solid;
        text-transform: capitalize;
    }

    #pagina .sezione p {
        font-size: 11px;
        color: #939598;
    }


    #pagina .sezione.cliccabile {
        text-align: center;
        cursor: pointer;
        border: solid 3px white;
        border-radius: 10px;
        color: white;
        background: linear-gradient(114.15deg, #1E5E2E 0%, #2C7A3E 100%);
        /*background-image: url('../../Common/Images/Background.png');*/
        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.10);
    }

    #pagina .sezione .icona {
        height: 90px;
    }



    #pagina .sezione.cliccabile:hover {
        border: solid 3px #F39021;
        color: white;
        background: linear-gradient(114.15deg, #1E5E2E 0%, #2C7A3E 20%);
        opacity: 1;
    }


    #pagina .sezione.cliccabile > p {
        display: none;
    }


    #pagina .sezione.cliccabile:hover > p {
        display: inline;
    }



    #pagina .sezione.cliccabile .titoletto {
        font-weight: bold;
        font-size: 25px;
        border: none;
    }




    #pagina .sezione .info .logo {
        width: 90px;
        display: inline;
    }

        #pagina .sezione .info .logo .imageLogo {
            width: 70px;
        }

    #pagina .sezione .info .saldo {
        color: #35496A;
        font-size: 44px;
        font-weight: bold;
        position: absolute;
        right: 30px;
        display: inline;
    }



/*-------------------------------------------------------- 
    ALTRE FUNZIONI
----------------------------------------------------------*/

#pagina .area .altreFunzioni {
    margin-top: 50px;
    height: auto;
}

    #pagina .area .altreFunzioni a {
        color: #3C5581 !important;
        font-size: 20px;
    }

        #pagina .area .altreFunzioni a:hover {
            color: #1E5E2E !important;
        }

    #pagina .area .altreFunzioni .icona {
        font-size: 24px;
    }

#pagina .area .altreFunzioni-funzione {
    border-radius: 4px;
    padding: 23px;
    text-align: center;
    max-width: 340px;
    margin-right: 40px;
}

    #pagina .area .altreFunzioni-funzione:hover {
        border: 3px solid #1E5E2E;
        border-radius: 4px;
        padding: 20px;
        cursor: pointer;
    }

        #pagina .area .altreFunzioni-funzione:hover a {
            color: #1E5E2E !important;
        }






/*#pagina .area .altreFunzioni {
    margin-top: 50px;
}

    #pagina .area .altreFunzioni ul {
        list-style-type: disc;
        padding: 20px 30px 20px 30px;
    }


#pagina .area .altreFunzioni ul li {
    font-size: 16px;
    display: inline;
    margin-right: 30px;
}

    #pagina .area .altreFunzioni a {
        color: #939598 !important;
    }

        #pagina .area .altreFunzioni a:hover {
            color: #75c044 !important;
        }*/
/* AREA RICARICHE
----------------------------------------------------------*/
#pagina .area .ricariche {
    color: #323232;
    font-weight: lighter;
    padding-top: 0px;
    width: 100%;
}

    #pagina .area .ricariche .ricarica {
        border-bottom: solid #e5e6e7 1px;
        padding: 10px 20px 40px 20px;
        height: 70px;
        border-radius: 6px;
    }

        #pagina .area .ricariche .ricarica:hover {
            background-color: #1E5E2E;
            color: white;
        }

        #pagina .area .ricariche .ricarica .data {
            text-align: right;
            float: left;
            margin-right: 20px;
            max-width: 120px;
        }

            #pagina .area .ricariche .ricarica .data .giorno {
                min-width: 110px;
                height: 15px;
                float: left;
                text-align: right !important;
                font-size: 15px;
                margin-bottom: 4px;
            }

            #pagina .area .ricariche .ricarica .data .ora {
                min-width: 110px;
                height: 26px;
                float: left;
                text-align: right !important;
                font-size: 24px;
                font-weight: normal;
            }

        #pagina .area .ricariche .ricarica .logo {
            height: 40px;
            padding-top: 0px;
            margin-top: 0px;
            float: left;
            margin-right: 20px;
            max-width: 60px;
        }

        #pagina .area .ricariche .ricarica .gestore {
            font-size: 16px;
            height: 20px;
            float: left;
            font-weight: bold;
            margin-right: 20px;
        }

            #pagina .area .ricariche .ricarica .gestore .categoria {
                font-size: 16px;
                height: 20px;
                font-weight: normal;
            }

        #pagina .area .ricariche .ricarica .cellulare {
            font-size: 24px;
            text-align: center;
        }

        #pagina .area .ricariche .ricarica .tipo {
            height: 20px;
            float: left;
        }

        #pagina .area .ricariche .ricarica .importo {
            font-weight: normal;
            font-size: 28px;
            height: 40px;
            float: right;
        }


/* AREA BOLLETTINI
----------------------------------------------------------*/

#pagina .area .bollettini {
    color: #323232;
    font-weight: lighter;
    padding-top: 0px;
    width: 100%;
}

    #pagina .area .bollettini .bollettino {
        border-bottom: solid #e5e6e7 1px;
        padding: 10px 20px 40px 20px;
        height: 70px;
        border-radius: 6px;
    }

        #pagina .area .bollettini .bollettino:hover {
            background-color: #1E5E2E;
            color: white;
        }

        #pagina .area .bollettini .bollettino .data {
            text-align: right;
            float: left;
            margin-right: 20px;
            max-width: 120px;
        }

            #pagina .area .bollettini .bollettino .data .giorno {
                min-width: 110px;
                height: 15px;
                float: left;
                text-align: right !important;
                font-size: 16px;
                margin-bottom: 4px;
            }

            #pagina .area .bollettini .bollettino .data .ora {
                min-width: 110px;
                height: 26px;
                float: left;
                text-align: right !important;
                font-size: 24px;
                font-weight: normal;
            }

        #pagina .area .bollettini .bollettino .biller {
            font-size: 18px;
            float: left;
            font-weight: bold;
            margin-right: 20px;
            width: 200px;
        }

        #pagina .area .bollettini .bollettino .categoria {
            font-size: 16px;
            height: 20px;
            font-weight: normal !important;
            height: 30px;
            max-width: 150px;
        }

        #pagina .area .bollettini .bollettino .cliente {
            text-align: center;
            font-size: 18px;
            font-weight: bold;
            float: left;
            min-width: 100px;
            max-width: 150px;
        }

        #pagina .area .bollettini .bollettino .tipo {
            height: 20px;
            float: left;
        }

        #pagina .area .bollettini .bollettino .importo {
            font-weight: normal;
            font-size: 28px;
            height: 40px;
            float: right;
        }


/* AREA PACCHI
----------------------------------------------------------*/

#pagina .area .pacchi {
    color: #323232;
    font-weight: lighter;
    padding-top: 0px;
    width: 100%;
}

    #pagina .area .pacchi .pacco {
        border-bottom: solid #e5e6e7 1px;
        padding: 10px 20px 40px 20px;
        height: 70px;
        border-radius: 6px;
    }

        #pagina .area .pacchi .pacco:hover {
            background-color: #1E5E2E;
            color: white;
        }

        #pagina .area .pacchi .pacco .data {
            text-align: right;
            float: left;
            margin-right: 10px;
            max-width: 80px;
        }

            #pagina .area .pacchi .pacco .data .giorno {
                min-width: 70px;
                height: 15px;
                float: left;
                text-align: right !important;
                font-size: 16px;
                margin-bottom: 4px;
            }

            #pagina .area .pacchi .pacco .data .ora {
                min-width: 70px;
                height: 26px;
                float: left;
                text-align: right !important;
                font-size: 24px;
                font-weight: normal;
            }



        #pagina .area .pacchi .pacco .estremi {
            font-size: 15px;
            height: 40px;
            float: left;
            font-weight: bold;
            margin-right: 10px;
            width: 210px;
            text-overflow: ellipsis;
            white-space: nowrap;
            overflow: hidden;
        }

            #pagina .area .pacchi .pacco .estremi .etichettaEstremo {
                font-weight: normal;
                font-size: 10px;
                float: left;
                margin-right: 3px;
                margin-top: 5px;
            }

        #pagina .area .pacchi .pacco .misure {
            text-align: right;
            float: left;
            margin-right: 20px;
            max-width: 120px;
        }

            #pagina .area .pacchi .pacco .misure .peso {
                min-width: 125px;
                height: 26px;
                float: left;
                text-align: right !important;
                font-size: 24px;
                font-weight: normal;
            }

            #pagina .area .pacchi .pacco .misure .dimensioni {
                min-width: 125px;
                height: 15px;
                float: left;
                text-align: right !important;
                font-size: 16px;
                margin-bottom: 4px;
            }

        #pagina .area .pacchi .pacco .prezzo {
            min-width: 110px;
            height: 26px;
            float: left;
            text-align: right !important;
            font-size: 24px;
            font-weight: normal;
        }

        #pagina .area .pacchi .pacco .logo {
            width: 70px;
            height: 35px;
            margin-right: 20px;
            float: left;
            background-size: 70px 35px;
            position: center;
        }

        #pagina .area .pacchi .pacco .tipoProdotto {
            font-weight: bold;
            width: 85px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        #pagina .area .pacchi .pacco .infProdotto {
            float: left;
            display: inline-grid;
        }



/* INTESTAZIONE
----------------------------------------------------------*/
#pagina #pagina_intestazione {
    height: 30px;
    width: 100%;
}


    #pagina #pagina_intestazione .info {
        text-align: right;
        margin-left: 20px;
    }

        #pagina #pagina_intestazione .info .label {
            text-align: right;
            padding: 0px;
            font-size: 18px;
            color: #1E5E2E;
        }

        #pagina #pagina_intestazione .info .valore {
            line-height: 20px;
            font-weight: bold;
            font-size: 32px;
            color: #323232;
        }


    #pagina #pagina_intestazione .titolo {
        font-weight: bold;
        color: #35496A;
        font-size: 42px;
        float: left;
        margin-top: 0px;
    }

    #pagina #pagina_intestazione .altriStrumenti {
        width: 100%;
        margin-left: -20px;
        height: 36px;
        padding-top: 6px;
        float: left;
        overflow: auto;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

        #pagina #pagina_intestazione .altriStrumenti i {
            font-size: 30px;
            margin-right: 20px;
        }

            #pagina #pagina_intestazione .altriStrumenti i:hover {
                font-size: 30px;
                color: #1ABFFF;
                cursor: pointer;
            }

    #pagina #pagina_intestazione .altreInfo {
        height: 59px;
        float: right;
        background-color: white;
        position: fixed;
        right: 0px;
        top: 53px;
        padding: 14px 10px 0px 0px;
        border-bottom-left-radius: 6px;
    }

#pagina #pagina_main {
    width: 100%;
    overflow: auto;
    padding: 0px 0px 20px 0px;
    overflow-x: hidden;
}

/*#pagina #pagina_main {
    padding: 20px;
    background-color: white;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}*/

.autenticazioneYappay .credenziali {
    float: left;
    width: 250px;
    height: 150px;
    margin-right: 20px;
}

    .autenticazioneYappay .credenziali input[type="text"],
    .autenticazioneYappay .credenziali input[type="password"] {
        font-size: 14px !important;
        padding: 6px !important;
    }

.autenticazioneYappay .logo {
    float: left;
    width: 280px;
    height: 150px;
    text-align: center;
}

    .autenticazioneYappay .logo img {
        height: 90px;
        margin-top: 30px;
    }

.autenticazioneYappay .comandi {
    margin-top: 20px;
    width: 100%;
    height: 200px;
}

    .autenticazioneYappay .comandi .btn {
        height: 30px !important;
        padding: 6px 18px 26px 18px !important;
    }

/* Info in Popup
----------------------------------------------------------*/

.popUpDiv .info {
    text-align: right;
    margin: 0px 15px 0px 0px;
    padding-right: 15px;
    float: right;
    border-right: 1px solid #e5e5e5;
    display: inline-grid;
}

    .popUpDiv .info .label {
        text-align: right;
        padding: 0px;
        font-size: 18px;
        color: #1E5E2E;
        margin-bottom: 8px;
    }

    .popUpDiv .info .valore {
        line-height: 20px;
        font-weight: bold;
        font-size: 26px;
        color: #323232;
    }

.popUpDiv .infoOrdine {
    float: left;
    margin: 10px 10px 10px 30px;
}

.popUpDiv .titolo {
    font-weight: bold;
    color: #1E5E2E;
    font-size: 42px;
    margin-top: 0px;
    float: left
}

.intestazioneNuovaPostSemplificata {
    display: inline-block;
    margin-bottom: 5px;
    width: 100%;
}
/* GESTIONE POP UP
----------------------------------------------------------*/
.popUpPanel {
    background-color: white;
    width: 100%;
    height: 100%;
    padding-bottom: 20px;
    z-index: 110;
    overflow: auto;
}

.popUpDiv {
    background-color: #FFFFFF;
    width: 100%;
    margin: 60px auto 20px auto;
    overflow: auto;
    padding: 10px 20px 20px 20px;
    z-index: 1000;
}

.popupDivMaxLarghezza {
    width: 1200px !important;
}

.popUpDivBarraSuperiore {
    padding: 5px;
    position: absolute;
    background-color: #BCC7D8;
    margin-top: 70px;
    margin-bottom: 0;
    margin-left: 83%;
    z-index: 110;
}

/* FIELDSET
----------------------------------------------------------*/

fieldset {
    margin: 10px 0px 1px 0px !important;
    padding: 0px 0px 30px 4px !important;
    background-position: bottom;
    background-repeat: no-repeat;
}

    fieldset legend {
        font-size: 18px;
        margin-top: 16px;
        margin-bottom: 6px;
        font-weight: bold;
        color: #352424;
        border: none;
    }

legend.enfatizzato {
    font-size: 18px !important;
    color: #35496A !important;
    font-weight: bold;
}

.fieldsetNoBackground {
    background-image: none;
    padding-bottom: 10px;
}

.fieldsetNoBackgroundDark {
    background-image: none;
    padding-bottom: 10px;
}



/* TEXTBOX
----------------------------------------------------------*/

input[type="text"], input[type="password"] {
    vertical-align: middle;
    color: black;
    background-color: #E9ECEF;
    border-radius: 4px;
}

.textBox {
    border-radius: 4px;
    border: 2px solid #D6DBDF;
    vertical-align: middle;
    color: #666666;
    padding: 6px 14px !important;
    font-weight: bold !important;
    font-size: 20px !important;
}

    .textBox:focus {
        border-radius: 4px;
        border: 2px solid #2C7A3E;
        color: #000000;
        outline: none;
    }

.textBoxLarge {
    border-radius: 4px;
    border: 1px solid #e5e6e7;
    vertical-align: middle;
    font-size: 16px !important;
    color: #333333;
    padding: 4px 6px;
}

.noBorder {
    border: none;
    font-weight: 700;
}

.textBoxLarge:focus {
    border: 1px solid #2C7A3E;
    color: #000000;
}

.textBox-enfatizza, .textBox-enfatizza:focus {
    border: solid 1px #ff6a00 !important;
}

.textBox-enfatizza-obbligatorio, .textBox-enfatizza-obbligatorio:focus {
    border: solid 1px #a94442 !important;
}


/* NOTIFICHE
----------------------------------------------------------*/
.notifica {
    padding: 5px 5px 5px 10px;
    border-left-style: solid;
    border-left-width: 4px;
    font-size: 16px;
    color: #333333;
    margin-bottom: 20px;
    font-weight: 300;
}

    .notifica b {
        font-size: 24px;
        font-weight: normal;
        text-transform: none;
    }

.notifica-correzione {
    display: inline-block;
    margin-top: 0px !important;
    width: 100%;
}

.notifica-note {
    border-left-color: #1E5E2E;
}

.notifica-note-evidenzia {
    border-left-color: #18db86;
}

.notifica-alert {
    border-left-color: #1E5E2E;
}

.notifica-success {
    border-left-color: #18db28;
}

.alert {
    border: 1px solid #e5e6e7;
    margin: 0px 7px 10px 0px;
    padding: 6px 10px 6px 10px;
    background-color: #FFFF99;
    color: #333333;
    line-height: 20px;
}

.success {
    border: 1px solid #e5e6e7;
    margin: 0px 7px 10px 0px;
    padding: 6px 10px 6px 10px;
    border-color: #D9D9D9;
    color: #333333;
    line-height: 20px;
}

.successNew {
    border: 1px solid #e5e6e7;
    margin: 0px 7px 10px 0px;
    padding: 6px 10px 6px 10px;
    background-color: #99FF99;
    color: #333333;
    line-height: 20px;
}

/* MEGA NOTIFICA
----------------------------------------------------------*/
.megaNotifica {
    padding-top: 20px;
    width: 700px;
    font-family: 'Nunito Sans', sans-serif;
    border-left-style: solid;
    border-left-width: 8px;
    padding-left: 20px;
}

.megaNotifica-titolo-completo {
    font-family: 'Nunito Sans', sans-serif;
    font-size: 32px;
}


.megaNotifica-titolo {
    color: #35496A;
}

.megaNotifica-alert {
    border-left-color: #FF4000;
    color: #FF4000;
}

.megaNotifica-info {
    border-left-color: #1a9ad5;
    color: #1a9ad5;
}

.megaNotifica-icona {
    float: left;
    margin-right: 5px;
}

.megaNotifica-success {
    border-left-color: #18db28;
    color: #18db28;
}


.megaNotifica-testo {
    font-size: 22px;
    color: #3F5266;
    line-height: 32px;
}

.megaNotifica-ulterioriInformazioni {
    margin-top: 14px;
    font-size: 16px;
    color: #666666;
}


/* TABELLE
----------------------------------------------------------*/
/* 1° Livello */
.tabellaDati {
    width: 100%;
}

    .tabellaDati.alternaRighe tr:nth-child(even) {
        background: #F9F9F9 !important;
    }

    .tabellaDati.alternaRighe tr:nth-child(odd) {
        background: #FFF !important;
    }

    .tabellaDati tr:nth-child(even) {
        background: #f8f9fa;
    }

    .tabellaDati tr:nth-child(odd) {
        background: #FFF;
    }

    .tabellaDati.alternaRighe tr:hover {
        background: #EBEBEB;
    }

    .tabellaDati th {
        text-align: left;
        padding: 5px 2px 5px 2px;
        font-size: 13px;
        text-transform: uppercase;
        background-repeat: repeat-x;
        color: #1E5E2E;
        border: none;
        border-bottom: 1px solid #E7E7E7;
    }

        .tabellaDati th a {
            color: #1E5E2E;
            text-decoration: underline !important;
        }



            .tabellaDati th a.sort-by {
                padding-right: 18px;
                position: relative;
            }

    .tabellaDati a.sort-by:before,
    .tabellaDati a.sort-by:after {
        border: 4px solid transparent;
        content: "";
        display: block;
        height: 0;
        right: 5px;
        top: 50%;
        position: absolute;
        width: 0;
    }

    .tabellaDati a.sort-by:before {
        border-bottom-color: #666;
        margin-top: -9px;
    }

    .tabellaDati a.sort-by:after {
        border-top-color: #666;
        margin-top: 1px;
    }


    .tabellaDati tr {
        background-color: white;
    }


        .tabellaDati tr:hover {
            color: black;
            background-color: #EBEBEB;
        }



    .tabellaDati td {
        padding: 4px 6px 4px 6px;
        font-size: 13px;
        color: black;
    }

/* 2° Livello */
.tabellaDatiNid2 {
    width: 100%;
    float: right;
}


    .tabellaDatiNid2 tr th {
        text-align: left;
        background-color: #C0C0C0;
        padding: 3px;
        color: #000000;
        font-size: 12px;
    }

    .tabellaDatiNid2 td {
        text-align: left;
        font-size: 12px;
        padding: 3px;
    }


.rigaPari {
    border-bottom: 1px solid #e5e6e7;
}

.rigaDispari {
    border-bottom: 1px solid #E7E7E7;
}

    .rigaDispari td {
        border-bottom: 1px solid #E7E7E7;
    }

.filtro {
    overflow: auto;
}

.filtro-elemento {
    min-height: 12px;
    min-width: 100px;
    padding: 6px 10px;
    display: inline-block;
    overflow: auto;
}


.tabellaInfoSpedizione td {
    padding: 5px;
    font-size: 15px;
}

.AjaxTabStile1Livello a {
    color: none;
}

    .AjaxTabStile1Livello a:link, a:hover, a:active, a:visited {
        color: none;
        outline: none;
    }

/*  STILI TAB CONTAINER AJAX CONTR */
.AjaxTabStile1Livello .ajax__tab_header a {
    color: #677685;
    cursor: pointer;
    font-size: 24px;
    font-family: 'Nunito Sans', sans-serif !important;
}

.AjaxTabStile1Livello .ajax__tab_outer {
    padding: 6px 0px 0px 0px;
    margin-left: 0px;
    margin-right: 16px;
}

.AjaxTabStile1Livello .ajax__tab_inner {
}

.AjaxTabStile1Livello .ajax__tab_body {
    padding: 4px 0px 4px 0px;
    border-top-style: solid;
    border-top-width: 1px;
    border-top-color: #E9E9E9;
}

.AjaxTabStile1Livello .ajax__tab_tab {
    padding-left: 0px;
    margin-left: 0px;
}

.AjaxTabStile1Livello .ajax__tab_hover {
    border-bottom: solid 2px #35496A;
}

    .AjaxTabStile1Livello .ajax__tab_hover a {
        color: #35496A !important;
    }

.AjaxTabStile1Livello .ajax__tab_active a {
    color: #35496A !important;
}

.AjaxTabStile1Livello .ajax__tab_active {
    color: #3B4D60 !important;
    font-weight: bold;
}

/*.AjaxTabStile1Livello .ajax__tab_active
{    
    border-bottom-style: solid;
    border-bottom-width: 2px;
    border-bottom-color: #1A9AD5;
}

.AjaxTabStile1Livello .ajax__tab_active a
{
    color: #1A9AD5 !important;
}*/






/*  STILI TAB CONTAINER AJAX CONTROL TOOLKIT */

.AjaxTabStile2Livello a {
    color: none;
    padding-left: 6px !important;
}

    .AjaxTabStile2Livello a:link, a:hover, a:active, a:visited {
        color: none;
        outline: none;
    }

.AjaxTabStile2Livello .ajax__tab_header a {
    color: #BBBBBB;
    cursor: pointer;
    font-size: 18px;
    font-family: 'Nunito Sans', sans-serif;
    padding: 0px 10px 0px 0px;
    margin-top: -6px;
    margin-left: 16px;
}

.AjaxTabStile2Livello .ajax__tab_outer {
    padding: 2px 10px -10px 0px;
    margin-left: 0px;
}

.AjaxTabStile2Livello .ajax__tab_inner {
}

.AjaxTabStile2Livello .ajax__tab_body {
    padding: 4px 0px 4px 0px;
    border-top-style: solid;
    border-top-width: 1px;
    border-top-color: #E9E9E9;
    margin-top: 0px;
}

.AjaxTabStile2Livello .ajax__tab_tab {
    padding-left: 0px;
    margin-left: 0px;
}

.AjaxTabStile2Livello .ajax__tab_hover {
    color: #1A9AD5;
    border-bottom: solid 2px #323232;
}

.AjaxTabStile2Livello .ajax__tab_active a {
    font-weight: normal;
    color: #323232 !important;
}

.AjaxTabStile2Livello .ajax__tab_active {
    padding-bottom: 0px;
    border-bottom: solid 2px #323232;
}
/*  STILI TAB PROCESSO */
.processo a {
    color: none;
}

    .processo a:link, a:hover, a:active, a:visited {
        color: none;
        outline: none;
    }

.processo .ajax__tab_header a {
    color: #BBBBBB;
    cursor: pointer;
    font-family: 'Nunito Sans', sans-serif;
    font-weight: bold;
    font-size: 20px !important;
    font-weight: bold;
    padding-bottom: 10px !important;
    padding-right: 30px;
    cursor: default;
}

.processo .ajax__tab_outer {
    padding: 6px 0px 6px 0px;
    margin-left: 0px;
}

/*.processoPagamento .ajax__tab_inner {
}*/

.processo .ajax__tab_body {
    padding: 8px 0px 4px 0px;
    margin-top: -12px;
    height: 500px;
    border-top-style: solid;
    border-top-width: 1px;
    border-top-color: #D9D9D9;
}

.processo .ajax__tab_tab {
    padding: 0px 10px 0px 10px;
    margin-right: 10px;
}

.processo .ajax__tab_hover {
    border-bottom-style: solid;
    border-bottom-width: 3px;
    border-bottom-color: #37485A;
}

.processo .ajax__tab_active {
    border-bottom-style: solid;
    border-bottom-width: 3px;
    border-bottom-color: lime;
}

    .processo .ajax__tab_active a {
        /*color: #1A9AD5 !important;*/
        color: #323232 !important;
        border-bottom-style: solid;
        border-bottom-width: 3px;
        border-bottom-color: #1E5E2E;
        padding-bottom: 7px !important;
    }

.processo .cliente-definzione .ajax__tab_header a {
    font-weight: normal !important;
    font-size: 18px !important;
    color: #1a9ad5 !important;
    border: none;
    text-transform: none !important;
    padding: 0px;
    margin-top: 0px;
}


.processo span {
    border-bottom-style: none !important;
}


.ajax__calendar_title {
    font-size: 11px;
    font-weight: bold;
    padding-left: -10px !important;
    margin-left: -10px !important;
    width: 100px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis;
    color: #1E5E2E;
}




/* OPZIONI
----------------------------------------------------------*/
.opzioni {
    background-position: right top;
    padding: 10px 10px 10px 10px;
    background-repeat: no-repeat;
    border-bottom: 4px solid #1E5E2E;
    background-color: white;
    border-radius: 2px;
    margin: 2px 0px 10px 0px;
    min-height: 60px;
}


/* DROP DOWN LIST
----------------------------------------------------------*/


.dropDownList {
    font-size: 13px;
    padding: 3px 5px;
    color: #666666;
    border: 1px solid #e5e6e7;
}

.dropDownListLarge {
    font-size: 13px;
    padding: 3px 5px;
    background-color: none;
    font-size: 18px;
    border: 1px solid #d5d5d5;
    vertical-align: middle;
    color: #333333;
}


/* BOTTONI
----------------------------------------------------------*/

.btn {
    border-radius: 3px !important;
    color: #35496A !important;
    border: solid 1px #D9D9D9 !important;
    padding: 0px 24px 0px 24px !important;
    font-size: 14px !important;
    font-weight: bold !important;
    height: 36px !important;
}

.btn-large {
    padding: 12px 24px 32px 24px !important;
}

.btn:hover {
    cursor: pointer;
}

.btn-rigido-sx {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

.btn-rigido-dx {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.btn-grande {
    height: 60px !important;
    font-size: 16px !important;
}

.btn-default {
    color: #333333;
}

    .btn-default:hover, .btn-default:focus {
        border-color: #1a9ad5;
    }

.btn-primary {
    border: solid 1px #1E5E2E !important;
    background-color: #1E5E2E !important;
    color: white !important;
}

    .btn-primary:hover,
    .btn-primary:focus {
        background-color: #35496A !important;
        color: white;
    }

.btn-success {
    border: solid 1px #898a8d !important;
    background-color: #1E5E2E !important;
    color: white !important;
}

    .btn-success:hover {
        background-color: #18A689 !important;
    }

.btn-cancel {
    background-color: white;
    color: #35496A;
}

    .btn-cancel:hover,
    .btn-cancel:focus {
        background-color: #EF5352;
        color: white;
    }

.btn-enfatizza {
    background-color: white !important;
    color: #ff6e00 !important;
}

    .btn-enfatizza:focus, .btn-enfatizza:hover {
        background-color: #ff6e00 !important;
        color: white !important;
    }


/* ESITO OPERAZIONI A PIE' DI PAGINA
----------------------------------------------------------*/

/*.esitoOperazione {
    font-size:50px !important;
    padding: 6px 20px 6px 20px;
    height: 24px;
    color: #FFFFFF;
    z-index: 10;
}*/

.esitoOperazionePositiva {
    max-height: 130px !important;
    overflow-y: auto;
    position: fixed !important;
    top: auto !important;
    bottom: 0px !important;
    left: 0 !important;
    right: 0 !important;
    width: auto !important;
    background-color: white;
    font-size: 17px;
    font-family: 'Nunito Sans', sans-serif;
    padding: 6px 20px 6px 18px;
    color: #000000;
    vertical-align: bottom;
    border: solid 1px #e5e6e7;
    border-bottom: 3px Solid #1ab394;
    border-radius: 4px;
    max-width: 1180px;
    margin: 6px auto;
    opacity: 0.9;
    box-shadow: 0px 2px 10px 0 #d1d1d1;
    z-index: 5000;
    scrollbar-width: thin;
    scrollbar-color: #1ab394 #f1f1f1;
}

.esitoOperazioneAlert,
.esitoOperazioneNegativa {
    max-height: 130px !important;
    overflow-y: auto;
    position: fixed !important;
    top: auto !important;
    bottom: 0px !important;
    left: 0 !important;
    right: 0 !important;
    width: auto !important;
    background-color: white;
    font-size: 17px;
    font-family: 'Nunito Sans', sans-serif;
    padding: 6px 20px 6px 18px;
    color: #000000;
    vertical-align: middle;
    border: solid 1px #e5e6e7;
    border-bottom: 3px Solid #ff660d;
    border-radius: 4px;
    max-width: 1180px;
    margin: 6px auto;
    opacity: 0.9;
    box-shadow: 0px 2px 10px 0 #d1d1d1;
    z-index: 5000;
    scrollbar-width: thin;
    scrollbar-color: #ff660d #f1f1f1;
}

.esitoOperazionePositiva:hover,
.esitoOperazionePositiva:active,
.esitoOperazioneAlert:hover,
.esitoOperazioneAlert:active,
.esitoOperazioneNegativa:hover,
.esitoOperazioneNegativa:active {
    opacity: 1;
}

/* Icona di stato a sinistra (fa-check / fa-exclamation-triangle nei colori brand) */
.esitoOperazionePositiva::before,
.esitoOperazioneAlert::before,
.esitoOperazioneNegativa::before {
    font-family: FontAwesome;
    float: left;
    margin-right: 14px;
    margin-top: 6px;
    line-height: 1;
}

.esitoOperazionePositiva::before {
    content: "\f00c"; /* fa-check */
    font-size: 40px !important;
    color: #1ab394;
}

.esitoOperazioneAlert::before,
.esitoOperazioneNegativa::before {
    content: "\f071"; /* fa-exclamation-triangle */
    font-size: 32px !important;
    color: #ff660d !important;
}

/* Testo del messaggio: niente float, padding 10px */
.esitoOperazionePositiva #esitoOperazione > div,
.esitoOperazioneAlert #esitoOperazione > div,
.esitoOperazioneNegativa #esitoOperazione > div {
    float: none !important;
    width: auto !important;
    text-align: left;
    padding: 10px;
}

/* Iconcina di chiusura: discreta, piu' evidente al hover.
   Il display !important attiva l'icona nascosta inline in SiPay.Master */
.esitoOperazionePositiva .esito-chiudi,
.esitoOperazioneAlert .esito-chiudi,
.esitoOperazioneNegativa .esito-chiudi {
    display: block !important;
    position: absolute;
    top: 8px;
    right: 10px;
    font-size: 14px;
    color: #4e5766;
    opacity: 0.35;
    cursor: pointer;
    padding: 2px;
    line-height: 1;
    transition: opacity 0.15s ease-in-out, transform 0.15s ease-in-out;
}

.esitoOperazionePositiva .esito-chiudi:hover,
.esitoOperazioneAlert .esito-chiudi:hover,
.esitoOperazioneNegativa .esito-chiudi:hover {
    opacity: 1;
    transform: scale(1.25);
}

/* Neutralizza nel footer il padding/font che PagamentiSiPay.css impone a .enfatizza */
.esitoOperazionePositiva .enfatizza,
.esitoOperazioneAlert .enfatizza,
.esitoOperazioneNegativa .enfatizza {
    padding: 0 !important;
    font-size: inherit !important;
}

/* Scrollbar sottile e colorata come lo stato */
.esitoOperazionePositiva::-webkit-scrollbar,
.esitoOperazioneAlert::-webkit-scrollbar,
.esitoOperazioneNegativa::-webkit-scrollbar {
    width: 6px;
}

.esitoOperazionePositiva::-webkit-scrollbar-track,
.esitoOperazioneAlert::-webkit-scrollbar-track,
.esitoOperazioneNegativa::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 3px;
}

.esitoOperazionePositiva::-webkit-scrollbar-thumb {
    background-color: #1ab394;
    border-radius: 3px;
}

.esitoOperazioneAlert::-webkit-scrollbar-thumb,
.esitoOperazioneNegativa::-webkit-scrollbar-thumb {
    background-color: #ff660d;
    border-radius: 3px;
}

@media (max-width: 500px) {
    .esitoOperazionePositiva,
    .esitoOperazioneAlert,
    .esitoOperazioneNegativa {
        font-weight: normal !important;
        letter-spacing: 0px !important;
    }
}

/*.esitoOperazioneNegativa {
    font-size: 20px;
    padding: 6px 20px 6px 20px;
    color: #000000;
    vertical-align: middle;
    border-top-style: solid;
    border-top-width: 1px;
    border-bottom-style: Solid;
    border-bottom-width: 8px;
    border-color: #FFD300;
    background-color: #FFFFFF;
    z-index: 5000;
}*/

#MessaggioNotifica {
    padding: 25px;
    border: 10px solid #333333;
    background-color: #FFFFFF;
    z-index: 3;
}

#oscuraSchermata {
    margin: 0px;
    background-image: url('../../Common/Immagini/Icone/sfondoEsitoOperazione.png');
    background-repeat: repeat;
    width: 100%;
    z-index: 2;
    position: relative;
}


/* TOOLTIP
----------------------------------------------------------*/
.tooltip {
    color: #336699;
    outline: none;
    cursor: help;
    text-decoration: none;
    position: relative;
    text-transform: none;
    font-weight: bold;
}

    .tooltip input {
        cursor: none;
    }

    .tooltip span {
        margin-left: -999em;
        position: absolute;
    }

    .tooltip:hover span {
        font-family: 'Nunito Sans', sans-serif;
        position: absolute;
        left: 1em;
        top: 2em;
        z-index: 1000;
        margin-left: 0;
        width: 250px;
    }

    .tooltip:hover img {
        border: 0;
        margin: -10px 0 0 -55px;
        float: left;
        position: absolute;
    }

    .tooltip:hover em {
        font-family: 'Nunito Sans', sans-serif;
        font-size: 1.2em;
        font-weight: bold;
        display: block;
        padding: 0.2em 0 0.6em 0;
    }

.classic {
    padding: 0.8em 1em;
}

.custom {
    padding: 0.5em 0.8em 0.8em 2em;
}

* html a:hover {
    background: transparent;
}

.classic {
    background: #FFFFAA;
    border: 1px solid #FFAD33;
}

.critical {
    background: #FFCCAA;
    border: 1px solid #FF3334;
}

.help {
    border-style: solid;
    border-width: 1px 1px 10px 1px;
    border-color: #5AD0F6;
    padding: 10px;
    background: #293955;
    font-size: 14px;
    color: #FFFFFF;
    font-weight: normal;
    font-family: arial, Helvetica, sans-serif;
    text-align: left;
    z-index: 10000;
}

.tooltip .info {
    background: #9FDAEE;
    border: 1px solid #2BB0D7;
}

.warning {
    padding: 10px;
    background: #FFFFAA;
    border: 1px solid #FFAD33;
}




/*CUSTOM TOOLTIP ALTO*/

.tooltip-ps {
    position: relative;
    display: inline-block;
    /*border-bottom: 1px dotted black;*/
}

    .tooltip-ps .tooltip-text {
        font-size: 13px;
        font-family: 'Nunito Sans', sans-serif;
        font-weight: normal;
        text-transform: none;
        visibility: hidden;
        width: 150px;
        background-color: #485D71;
        color: #fff;
        text-align: left;
        border-radius: 6px;
        padding: 5px 10px;
        position: absolute;
        z-index: 1000;
        /* posizionamento in alto/basso*/
        bottom: 150%; /* bottom per posizione alta, top per posizione bassa */
        left: 50%;
        margin-left: -85px;
        /**************************/
        /* posizionamento a destra/sinistra*/
        /*top: -5px;
    right: 105%;  /* right posiziona a sinistra, left posiziona a destra*/
        /**************************/
        /* grado di opacità (inizialmente 0 per poi passare ad 1) e tempo di transazione */
        opacity: 0;
        transition: opacity 500ms;
        /**************************/
    }


.tooltip-text.tooltip-text-lg {
    width: 300px;
    padding: 5px 10px;
    position: absolute !important;
    z-index: 110 !important;
    /* posizionamento in alto/basso*/
    bottom: 150%; /* bottom per posizione alta, top per posizione bassa */
    left: 20%;
    margin-left: -148px !important;
    /**************************/
    /* posizionamento a destra/sinistra*/
    /*top: -5px;
    right: 105%;  /* right posiziona a sinistra, left posiziona a destra*/
    /**************************/
    /* grado di opacità (inizialmente 0 per poi passare ad 1) e tempo di transazione */
    opacity: 0;
    transition: opacity 500ms;
    /**************************/
}

/* freccia del tooltip */
.tooltip-ps .tooltip-text::after {
    content: "";
    position: absolute;
    top: 100%; /* top per freccia sotto, bottom per freccia sopra, right per freccia a sinistra, left per freccia a destra */
    left: 50%; /* posizione della freccia sull'asse orizzontale */
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: #485D71 transparent transparent transparent;
}


.tooltip-text.tooltip-text-extra-lg {
    width: 500px !important;
    padding: 5px 10px;
    position: absolute;
    z-index: 10000;
    /* posizionamento in alto/basso*/
    bottom: 150%; /* bottom per posizione alta, top per posizione bassa */
    left: 20%;
    margin-left: -250px !important;
    /**************************/
    /* posizionamento a destra/sinistra*/
    /*top: -5px;
    right: 105%;  /* right posiziona a sinistra, left posiziona a destra*/
    /**************************/
    /* grado di opacità (inizialmente 0 per poi passare ad 1) e tempo di transazione */
    opacity: 0;
    transition: opacity 500ms;
    /**************************/
}



.tooltip-ps:hover .tooltip-text {
    visibility: visible;
    /* grado di opacità della transazione */
    opacity: 1;
}

/*CUSTOM TOOLTIP ALTO SENZA FRECCIA*/

.tooltip-top-sf {
    position: relative;
    display: inline-block;
    /*border-bottom: 1px dotted black;*/
}

    .tooltip-top-sf .tooltip-text {
        font-size: 13px;
        font-family: 'Nunito Sans', sans-serif;
        font-weight: normal;
        text-transform: none;
        visibility: hidden;
        width: 150px;
        background-color: #485D71;
        color: #fff;
        text-align: left;
        border-radius: 6px;
        padding: 5px 10px;
        position: absolute;
        z-index: 1000;
        /* posizionamento in alto/basso*/
        bottom: 150%; /* bottom per posizione alta, top per posizione bassa */
        left: 50%;
        margin-left: -85px;
        /**************************/
        /* posizionamento a destra/sinistra*/
        /*top: -5px;
    right: 105%;  /* right posiziona a sinistra, left posiziona a destra*/
        /**************************/
        /* grado di opacità (inizialmente 0 per poi passare ad 1) e tempo di transazione */
        opacity: 0;
        transition: opacity 500ms;
        /**************************/
    }



    .tooltip-top-sf:hover .tooltip-text {
        visibility: visible;
        /* grado di opacità della transazione */
        opacity: 1;
    }


/*CUSTOM TOOLTIP BASSO*/

.tooltip-down-sf {
    position: relative;
    display: inline-block;
    /*border-bottom: 1px dotted black;*/
}

    .tooltip-down-sf .tooltip-text {
        font-size: 13px;
        font-family: 'Nunito Sans', sans-serif;
        font-weight: normal;
        text-transform: none;
        visibility: hidden;
        width: 150px;
        background-color: #485D71;
        color: #fff !important;
        text-align: center;
        border-radius: 6px;
        padding: 5px 10px;
        position: absolute;
        z-index: 1000;
        /* posizionamento in alto/basso*/
        top: 150%; /* bottom per posizione alta, top per posizione bassa */
        left: -110%;
        margin-left: -85px;
        /**************************/
        /* posizionamento a destra/sinistra*/
        /*top: -5px;
    right: 105%;  /* right posiziona a sinistra, left posiziona a destra*/
        /**************************/
        /* grado di opacità (inizialmente 0 per poi passare ad 1) e tempo di transazione */
        opacity: 0;
        transition: opacity 500ms;
        /**************************/
    }

    .tooltip-down-sf .tooltip-text-lg {
        width: 300px;
        padding: 5px 10px;
        position: absolute;
        z-index: 10000;
        /* posizionamento in alto/basso*/
        top: 150%; /* bottom per posizione alta, top per posizione bassa */
        left: 20%;
        margin-left: -110px;
        /**************************/
        /* posizionamento a destra/sinistra*/
        /*top: -5px;
    right: 105%;  /* right posiziona a sinistra, left posiziona a destra*/
        /**************************/
        /* grado di opacità (inizialmente 0 per poi passare ad 1) e tempo di transazione */
        opacity: 0;
        transition: opacity 500ms;
        /**************************/
    }



    .tooltip-down-sf:hover .tooltip-text {
        visibility: visible;
        /* grado di opacità della transazione */
        opacity: 1;
    }

/*CUSTOM TOOLTIP SINISTRA*/

.tooltip-left-sf {
    position: relative;
    display: inline-block;
    /*border-bottom: 1px dotted black;*/
}

    .tooltip-left-sf .tooltip-text {
        font-size: 13px;
        font-family: 'Nunito Sans', sans-serif;
        font-weight: normal;
        text-transform: none;
        visibility: hidden;
        width: 150px;
        background-color: #485D71;
        color: #fff !important;
        text-align: center;
        border-radius: 6px;
        padding: 5px 10px;
        position: absolute;
        z-index: 1000;
        /* posizionamento in alto/basso*/
        /*top: 150%;   /* bottom per posizione alta, top per posizione bassa 
    left: -110%;
    margin-left: -85px;*/
        /**************************/
        /* posizionamento a destra/sinistra*/
        top: -5px;
        right: 105%; /* right posiziona a sinistra, left posiziona a destra*/
        /**************************/
        /* grado di opacità (inizialmente 0 per poi passare ad 1) e tempo di transazione */
        opacity: 0;
        transition: opacity 500ms;
        /**************************/
    }

    .tooltip-left-sf .tooltip-text-lg {
        width: 300px;
        padding: 5px 10px;
        position: absolute;
        z-index: 10000;
        /* posizionamento in alto/basso*/
        /*top: 150%;    bottom per posizione alta, top per posizione bassa 
    left: 20%;
    margin-left: -110px;*/
        /**************************/
        /* posizionamento a destra/sinistra*/
        top: -5px;
        right: 105%; /* right posiziona a sinistra, left posiziona a destra*/
        /**************************/
        /* grado di opacità (inizialmente 0 per poi passare ad 1) e tempo di transazione */
        opacity: 0;
        transition: opacity 500ms;
        /**************************/
    }



    .tooltip-left-sf:hover .tooltip-text {
        visibility: visible;
        /* grado di opacità della transazione */
        opacity: 1;
    }

/*CUSTOM TOOLTIP DESTRA*/

.tooltip-right-sf {
    position: relative;
    display: inline-block;
    /*border-bottom: 1px dotted black;*/
}

    .tooltip-right-sf .tooltip-text {
        font-size: 13px;
        font-weight: normal;
        text-transform: none;
        visibility: hidden;
        width: 150px;
        background-color: #485D71;
        color: #fff !important;
        text-align: center;
        border-radius: 6px;
        padding: 5px 10px;
        position: absolute;
        z-index: 1000;
        font-family: 'Nunito Sans', sans-serif;
        /* posizionamento in alto/basso*/
        /*top: 150%;   /* bottom per posizione alta, top per posizione bassa 
    left: -110%;
    margin-left: -85px;*/
        /**************************/
        /* posizionamento a destra/sinistra*/
        top: -5px;
        left: 105%; /* right posiziona a sinistra, left posiziona a destra*/
        /**************************/
        /* grado di opacità (inizialmente 0 per poi passare ad 1) e tempo di transazione */
        opacity: 0;
        transition: opacity 500ms;
        /**************************/
    }

    .tooltip-right-sf .tooltip-text-lg {
        width: auto;
        height: auto;
        padding: 5px 10px;
        position: absolute;
        z-index: 10000;
        /* posizionamento in alto/basso*/
        /*top: 150%;    bottom per posizione alta, top per posizione bassa 
    left: 20%;
    margin-left: -110px;*/
        /**************************/
        /* posizionamento a destra/sinistra*/
        bottom: 0px;
        left: 560%; /* right posiziona a sinistra, left posiziona a destra*/
        /**************************/
        /* grado di opacità (inizialmente 0 per poi passare ad 1) e tempo di transazione */
        opacity: 0;
        transition: opacity 500ms;
        /**************************/
    }



    .tooltip-right-sf:hover .tooltip-text {
        visibility: visible;
        /* grado di opacità della transazione */
        opacity: 1;
    }

/*CUSTOM TOOLTIP DESTRA ALERT*/

.tooltip-right-sf-alert {
    position: relative;
    display: inline-block;
    /*border-bottom: 1px dotted black;*/
}

    .tooltip-right-sf-alert .tooltip-text {
        font-size: 13px;
        font-weight: normal;
        text-transform: none;
        visibility: hidden;
        width: 150px;
        background-color: #FF6600;
        color: #fff !important;
        text-align: center;
        border-radius: 6px;
        padding: 5px 10px;
        position: absolute;
        z-index: 1000;
        font-family: 'Nunito Sans', sans-serif;
        /* posizionamento in alto/basso*/
        /*top: 150%;   /* bottom per posizione alta, top per posizione bassa 
    left: -110%;
    margin-left: -85px;*/
        /**************************/
        /* posizionamento a destra/sinistra*/
        top: -28px;
        left: 0%; /* right posiziona a sinistra, left posiziona a destra*/
        /**************************/
        /* grado di opacità (inizialmente 0 per poi passare ad 1) e tempo di transazione */
        opacity: 0;
        transition: opacity 500ms;
        /**************************/
    }

    .tooltip-right-sf-alert .tooltip-text-lg {
        width: auto;
        height: auto;
        padding: 5px 10px;
        position: absolute;
        z-index: 10000;
        /* posizionamento in alto/basso*/
        /*top: 150%;    bottom per posizione alta, top per posizione bassa 
    left: 20%;
    margin-left: -110px;*/
        /**************************/
        /* posizionamento a destra/sinistra*/
        bottom: 38px;
        left: 300%; /* right posiziona a sinistra, left posiziona a destra*/
        /**************************/
        /* grado di opacità (inizialmente 0 per poi passare ad 1) e tempo di transazione */
        opacity: 0;
        transition: opacity 500ms;
        /**************************/
    }



    .tooltip-right-sf-alert:hover .tooltip-text {
        visibility: visible;
        /* grado di opacità della transazione */
        opacity: 1;
    }



/* UTILITY
----------------------------------------------------------*/

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

/* RADIO BUTTON LIST
----------------------------------------------------------*/

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

    .radioButtonEnfatizzato input[type="radio"] + label {
        padding: 10px 20px 10px 20px;
        border: 3px solid rgba(255, 0, 0, 0);
    }

        .radioButtonEnfatizzato input[type="radio"] + label:hover {
            font-weight: bold !important;
            border: 3px solid #DBDBEA;
            position: relative;
            border-radius: 6px;
            box-shadow: 6px 6px 8px #888888;
            background-color: white;
        }


    .radioButtonEnfatizzato input[type="radio"]:checked + label {
        font-weight: bold !important;
        color: #1E5E2E;
        /*border: 1px solid #DBDBEA; da valutare*/
        border: 3px solid #1E5E2E;
        position: relative;
        border-radius: 6px;
        background-color: white;
        box-shadow: 4px 4px 8px #888888;
    }

        /*Definisce contenuto del triangolino (in questo caso la spunta)*/
        .radioButtonEnfatizzato input[type="radio"]:checked + label::before {
            position: absolute;
            right: 0%;
            top: 0;
            margin: .25em;
            color: white;
            font-family: FontAwesome;
            top: -2px;
            text-align: right;
            font-size: 12px;
            content: "\f00c";
            z-index: 21;
        }

        /*Definisce il triangolino in alto a destra*/
        .radioButtonEnfatizzato input[type="radio"]:checked + label::after {
            content: '';
            position: absolute;
            width: 0;
            height: 0;
            top: 0;
            right: 0;
            border-width: 18px;
            border-style: solid;
            border-color: #1E5E2E #1E5E2E transparent transparent;
            z-index: 20;
        }




/* STILI LINKBUTTON ASP.NET
----------------------------------------------------------*/

.linkButton {
    border: 1px solid #E6E6E6;
    padding: 3px 6px 4px 6px;
    color: #003366;
    margin: 20px -6px 0px 0px;
    font-size: 11px;
    text-transform: uppercase;
    background-image: url('../Immagini/button.jpg');
    background-repeat: repeat-x;
    height: 14px;
    text-decoration: none;
    text-align: center;
}

.linkButton-confirm {
    border: 1px solid #465c71;
    padding: 3px 14px 4px 14px;
    color: white;
    margin: 20px -6px 0px 0px;
    font-size: 11px;
    text-transform: uppercase;
    background-repeat: repeat-x;
    height: 14px;
    text-decoration: none;
    text-align: center;
    background-image: url('../Immagini/buttonVerde.jpg');
    background-color: #00D800;
}

.linkButton:link {
    border: 1px solid #e5e6e7;
    padding: 3px 6px 4px 6px;
    color: #003366;
    font-weight: bold;
    margin: 20px -6px 0px 0px;
    font-size: 11px;
    text-transform: uppercase;
    background-image: url('../Immagini/button.jpg');
    background-repeat: repeat-x;
    height: 14px;
    text-decoration: none;
    background-color: #F4F4F4;
}

.linkButton:visited {
    border: 1px solid #003366;
    padding: 3px 6px 4px 6px;
    color: #003366;
    font-weight: bold;
    margin: 20px -6px 0px 0px;
    font-size: 11px;
    text-transform: uppercase;
    background-image: url('../Immagini/button.jpg');
    background-repeat: repeat-x;
    height: 14px;
    text-decoration: none;
}

.linkButton:hover {
    border: 1px solid #0099FF;
    color: #FFFFFF;
    font-weight: bold;
    background-image: none;
    background-color: #35496A;
    text-decoration: none;
}

    .linkButton:hover i {
        color: white;
    }



.linkButton:active {
    border: 1px solid #3366CC;
    color: #FFFFFF;
    font-weight: bold;
    background-image: none;
    background-color: #35496A;
    text-decoration: none;
}

.linkButton:focus {
    border: 1px solid #3366CC;
    color: #FFFFFF;
    font-weight: bold;
    background-image: none;
    background-color: #35496A;
}

/* CASELLE INPUT PER UNITA' DI MISURA
----------------------------------------------------------*/
.input-unita-misura {
    position: relative;
}

    .input-unita-misura input {
        display: block;
        padding-right: 10px !important
    }

    .input-unita-misura .unit {
        position: absolute;
        display: block;
        right: 5px;
        top: 8px;
        z-index: 9;
        font-size: 20px;
    }


/* SELEZIONE TIPO RADIO CON LINK BUTTON
----------------------------------------------------------*/

.linkButtonEnfatizzato .panel label {
    padding: 10px 20px 10px 20px;
    border: 3px solid rgba(255, 0, 0, 0);
    display: inline-block;
    color: black !important;
    cursor: pointer;
}

    .linkButtonEnfatizzato .panel label:hover {
        font-weight: bold !important;
        border: 3px solid #1E5E2E;
        position: relative;
        border-radius: 6px;
        box-shadow: 4px 4px 8px #888888;
        color: black !important;
    }

.linkButtonEnfatizzato .panelSelezionato label {
    padding: 10px 20px 10px 20px;
    border: 3px solid rgba(255, 0, 0, 0);
    display: inline-block;
}


.linkButtonEnfatizzato .panelSelezionato label {
    font-weight: bold !important;
    color: #1E5E2E !important;
    border: 3px solid #1E5E2E;
    position: relative;
    border-radius: 6px;
    background-color: white;
    box-shadow: 4px 4px 8px #888888;
    cursor: pointer;
}


    .linkButtonEnfatizzato .panelSelezionato label::before {
        position: absolute;
        right: 0%;
        top: 0;
        margin: .25em;
        color: white;
        font-family: FontAwesome;
        top: -2px;
        text-align: right;
        font-size: 12px;
        content: "\f00c";
        z-index: 21;
    }

    .linkButtonEnfatizzato .panelSelezionato label::after {
        content: '';
        position: absolute;
        width: 0;
        height: 0;
        top: 0;
        right: 0;
        border-width: 18px;
        border-style: solid;
        border-color: #1E5E2E #1E5E2E transparent transparent;
        z-index: 20;
    }

/* 
----------------------------------------------------------*/

.icon-input-left {
    float: left;
    margin-left: 6px;
    margin-top: -35px;
    position: relative;
    z-index: 2;
    font-size: 17px !important;
}

.fa-rotate-45 {
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
}
/* ICONE */
.icona > a {
    border-radius: 3px;
    padding: 4px 10px 5px 10px;
    text-decoration: none;
    color: #003366;
    font-size: 18px;
    margin-bottom: 4px;
}


.icona-lg > a {
    font-size: 30px !important;
    padding: 8px 8px 4px 8px;
}

.icona-sm > a {
    font-size: 15px;
    padding: 4px 6px 4px 6px;
}

.icona span {
    font-family: 'Nunito Sans', sans-serif;
    font-size: 14px;
    font-weight: 900;
}

.icona a:hover {
    background-color: #1E5E2E;
    color: white;
}

.icona a:focus {
    background-color: #1E5E2E;
    color: white;
}

.icona-danger > a {
    color: red;
    color: #003366;
}

.icona-danger a:hover {
    background-color: #ef5352;
    color: white;
}

.icona-danger-contrasto-forte > a {
    background-color: #ef5352;
    color: white;
}

.icona-danger-contrasto-forte a:hover {
    background-color: white;
    color: #ef5352;
}


.icona-alert > a {
    color: #ff6a00 !important;
}

    .icona-alert > a:hover, .icona-alert > a:focus {
        color: white !important;
        background-color: #ff6a00 !important;
    }

.icona-excel > a {
    color: #02723B !important;
}

.icona-excel a:hover {
    background-color: #02723B !important;
    color: white !important;
}

.icona-non-in-evidenza > a {
    color: lightgrey;
}


.icona-disattiva > a:hover {
    background-color: #ebebeb;
    color: #003366;
}


.icona-primary > a {
    background-color: #1a9ad5;
    color: white;
}

.icona-primary-contrasto-forte > a {
    background-color: #1a9ad5 !important;
    color: white !important;
}

.icona-primary-contrasto-forte a:hover {
    background-color: white !important;
    color: #1a9ad5 !important;
}

.icona-success a:active, .icona-success a:visited, .icona-success a:link {
    background-color: #1a9ad5;
}



.icona-primary a:hover {
    background-color: #35496A;
    color: white;
}



.icona-success > a {
    color: white;
    background-color: #18A689;
    border-left: solid 2px #18A689;
    border-right: solid 2px #18A689;
}

.icona-success a:active, .icona-success a:visited, .icona-success a:link {
    background-color: #18A689;
}


.icona-success a:hover {
    background-color: #00c710;
    color: white;
}

.pulsante-icona > a {
    font-size: 18px;
    padding: 10px 30px !important;
}

.pulsante-icona span {
    font-size: 18px;
}


/**/

.destinazione-directa {
    background-image: url("../../../Common/Immagini/LoghiGestori/LoghiRidotti/logo_directa.png") !important;
}

.destinazione-crono {
    background-image: url("../../../Common/Immagini/LoghiGestori/logo_crono.png") !important;
}

.destinazione-ups {
    background-image: url("../../../Common/Immagini/LoghiGestori/LoghiRidotti/logo_ups.png") !important;
}

.destinazione-sda {
    background-image: url("../../../Common/Immagini/LoghiGestori/LoghiRidotti/logo_sda.png") !important;
}

.destinazione-posteItaliane {
    background-image: url("../../../Common/Immagini/LoghiGestori/LoghiRidotti/logo_posteItaliane.png") !important;
}


/* PANNELLI SPOSTABILI CON JQUERY
----------------------------------------------------------*/

.spostabile:hover {
    cursor: all-scroll;
}

/**********************************************/
/*               ARCHIVI                      */
/**********************************************/
.etichettaOpzioniFiltri {
    padding-top: 5px;
    font-weight: bold;
    float: left;
    margin-right: 5px;
}

.numPagCorrente {
    color: #1E5E2E;
    font-weight: bold;
    font-size: 19px;
}

.numAltrePagine {
    font-size: 13px;
    color: #b9eea3 !important;
}


/**********************************************/
/*               DOCUMENTI                    */
/**********************************************/

.fileDocumenti {
    margin-top: 30px;
}


    .fileDocumenti .linkButtonEnfatizzatoDocumenti .panel label {
        padding: 10px 20px 10px 20px;
        border: 3px solid rgba(255, 0, 0, 0);
        display: inline-block;
        color: black !important;
        cursor: pointer;
        font-size: 20px;
    }

        .fileDocumenti .linkButtonEnfatizzatoDocumenti .panel label:hover {
            font-weight: bold !important;
            border: 3px solid #1E5E2E;
            position: relative;
            border-radius: 6px;
            box-shadow: 4px 4px 8px #888888;
            color: black !important;
            font-size: 20px;
        }

    .fileDocumenti .linkButtonEnfatizzatoDocumenti .panelSelezionato label {
        padding: 10px 20px 10px 20px;
        border: 3px solid rgba(255, 0, 0, 0);
        display: inline-block;
        font-size: 20px;
    }


    .fileDocumenti .linkButtonEnfatizzatoDocumenti .panelSelezionato label {
        font-weight: bold !important;
        color: #1E5E2E !important;
        border: 3px solid #1E5E2E;
        position: relative;
        border-radius: 6px;
        background-color: white;
        box-shadow: 4px 4px 8px #888888;
        cursor: pointer;
        font-size: 20px;
    }

    .fileDocumenti .cornice {
        border: 1px solid #323232;
        border-radius: 8px;
        display: inline-block;
        padding: 25px;
        background-color: white;
    }

    .fileDocumenti .documentiVisualizzabili {
        float: left;
        margin-right: 20px;
        width: 280px;
    }

        .fileDocumenti .documentiVisualizzabili .contenuto {
            width: 180px;
        }

    .fileDocumenti .visualizzazioneFile {
    }


/*              DATI RITIRO                 */

.dataOraRitiro .dataRitiro input[type=text] {
    width: 100px !important;
}

.dataOraRitiro .orarioRitiro input[type=text] {
    width: 35px !important;
}


.asterisco {
    color: mediumvioletred !important;
    font-weight: bold !important;
    font-size: 18px !important;
    font-family: 'Nunito Sans', sans-serif !important;
}


/*********************************************************/
/*   STILI AUTOCOMPLETE TEXT AJAX CONTROL TOOLKI         */
/*********************************************************/

.AutoExtenderHighlight {
    padding: 10px 16px !important;
    color: #00152b;
    background-color: white;
    font-size: 16px !important;
    min-height: 29px;
    min-width: 200px;
    z-index: 1000;
    border-left-style: solid;
    border-left-width: 8px;
    border-left-color: #1E5E2E;
    width: 600px !important;
    background-color: #F7F7F7;
    font-weight: bold;
    overflow-x: hidden !important;
}

.autocomplete_listItem {
    padding: 14px 16px !important;
    font-family: Calibri;
    padding-top: 0px;
    color: black;
    background-color: white;
    font-size: 16px;
    min-height: 29px;
    min-width: 200px;
    z-index: 1000;
    width: 600px !important;
    overflow-x: hidden !important;
}


.autocomplete_highlightedListItem {
    padding: 14px 16px !important;
    color: #00152b;
    background-color: white;
    font-size: 16px !important;
    min-height: 29px;
    min-width: 200px;
    z-index: 1000;
    border-left-style: solid;
    border-left-width: 8px;
    border-left-color: #1E5E2E;
    width: 600px !important;
    background-color: #F7F7F7;
    font-weight: bold;
    overflow-x: hidden !important;
}

.completionListCssClass {
    margin-top: 0px;
    background-color: White;
    overflow: auto;
    border-right-style: solid;
    border-bottom-style: solid;
    border-left-style: solid;
    border-right-width: 1px;
    border-bottom-width: 1px;
    border-left-width: 1px;
    border-right-color: #1E5E2E !important;
    border-bottom-color: #1E5E2E !important;
    border-left-color: #1E5E2E !important;
    max-height: 240px;
    min-height: 100px;
    overflow-y: scroll;
    width: 600px !important;
    overflow-x: hidden !important;
    z-index: 100002 !important;
    padding: 0px !important;
}

.autocomplete_highlightedListItemClear {
    color: black;
    background-color: white;
    font-size: 16px;
    min-height: 29px;
    min-width: 200px;
    z-index: 1000;
    width: 500px !important;
}


.trunc {
    float: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}


.autocomplete_list {
    min-width: 700px;
    background-color: White;
    margin: 0px;
    border-right-style: solid;
    border-left-style: solid;
    border-right-width: 1px;
    border-left-width: 1px;
    border-right-color: #e5e6e7;
    border-left-color: #e5e6e7;
}



.autocomplete_listItem b {
    font-size: 1px;
    color: white;
}

.autocomplete_highlightedListItem b {
    font-size: 1px;
    color: none;
}


/*********************************************************/
/*   ALTRE RISOLUZIONI                                   */
/*********************************************************/

@media only screen and (max-width: 800px) {
    #pagina .area .titolo {
        font-size: 35px !important;
    }

    #pagina #pagina_intestazione .titolo {
        font-size: 30px !important;
    }
}

@media (max-width: 600px) {
    .ultimeOperazioniEffettuate {
        display: none;
    }

    .info.saldo .valore {
        font-size: 17px !important
    }
}


/**************************************************************/
/*      Vecchio Controllo utente importazione file                  */
/**************************************************************/

.importazione-upload-file.importazione-upload-file-danea .importazione-definizioneFile input[type=file] {
}

    .importazione-upload-file.importazione-upload-file-danea .importazione-definizioneFile input[type=file]:hover {
        background-color: #35496A !important;
    }

.importazione-upload-file.importazione-upload-file-danea input[type=submit] {
    border-color: #1E5E2E !important;
    background-color: #1E5E2E;
    color: white !important;
    border-left: none !important;
}

    .importazione-upload-file.importazione-upload-file-danea input[type=submit]:hover {
        background-color: #35496A;
    }

.divCaricamentoNuovoFile-div2 {
    float: left;
    margin-right: 20px;
}

.divCaricamentoNuovoFile-div3 {
    font-size: 18px;
}

    .divCaricamentoNuovoFile-div3 b {
        color: #1E5E2E;
        font-size: 17px;
    }



.importazione-danea-file-non-importabili-container .popUp {
    top: 52px;
    min-height: 1000px;
}

.importazione-danea-file-non-importabili-container .popUp-container {
    padding-top: 14px !important;
    max-width: 900px !important;
    margin: auto !important;
}

.importazione-danea-file-non-importabili-container .popUp b {
    font-size: 18px;
}

.importazione-danea-file-non-importabili-container .popUp a {
    font-size: 16px;
    color: #1E5E2E !important;
    font-weight: bold;
    text-decoration: underline !important;
}

.importazione-danea-file-non-importabili-body {
    padding-left: 50px;
}

/********************************************************************************/
/*                                 COMUNICAZIONI                                                         */
/********************************************************************************/

.comunicazione {
    border-left: 4px #003366 solid;
    padding-left: 10px;
    min-height: 30px;
    width: 100%;
    max-width: 1100px;
    overflow: auto;
    margin: auto;
    margin-bottom: 16px;
}

    .comunicazione .comunicazione-immagine {
        width: 30px;
        height: 30px;
        padding-top: 8px;
        margin-right: 8px;
        float: left;
    }

.comunicazione-oggetto {
    margin-left: 40px;
    font-weight: bold;
    font-size: 16px;
}

.comunicazione-corpo {
    margin-left: 40px;
    font-size: 15px;
}

.comunicazione.comunicazione-avviso {
    border-left-color: #ff5600 !important;
    margin-bottom: 20px;
}

    .comunicazione.comunicazione-avviso .fa {
        color: #ef5352;
        font-size: 25px;
    }

.comunicazione.comunicazione-notificaOK {
    border-left-color: #1ab394 !important;
}

    .comunicazione.comunicazione-notificaOK .fa {
        color: #1ab394;
        font-size: 25px;
    }


/********************************************************************************/
/*                                 RITIRI                                       */
/********************************************************************************/

#infoELocalitRitiro input[type=text] {
    font-size: 16px !important;
}


/********************************************************************************/
/*          INVIO EMAIL RICEVUTE                                                */
/********************************************************************************/

.file-invio-email {
    margin: 4px 10px 10px 0px;
}

    .file-invio-email input {
        background-color: white;
        width: 394px;
        height: 40px !important;
        border-radius: 4px;
        padding: 3px 4px 3px 10px;
        font-size: 16px;
        font-weight: bold;
    }

    .file-invio-email a {
        position: absolute;
        margin: 5px -80px 0px;
        height: 30px !important;
    }

    .file-invio-email.esito {
        padding-left: 10px;
        font-size: 20px;
    }

        .file-invio-email.esito .fa-check {
            font-size: 30px !important;
            color: #18A689;
        }

        .file-invio-email.esito .fa-exclamation-triangle {
            font-size: 30px !important;
            color: #ff844d;
        }



.servizio-clackpay-richiesta-attivazione {
    background-color: #35496A;
    color: white;
    font-weight: bold;
    position: absolute;
    top: 10px;
    right: 26px;
    padding: 2px 8px;
    border-radius: 3px;
    border-bottom: solid 2px white;
    letter-spacing: 0.5px;
}
/* Rimozione outline focus voci menu aree */
#pagina_selezioneAree li a:focus { outline: none; }

/* Rimozione outline focus pulsanti operazioni ricorrenti */
.operazioni-ricorrenti .fa:focus { outline: none; }
}

/* Barra di attesa del caricamento pagina, nel colore del brand.
   Gli stili di base li scrive AttesaCaricamentoPagina.js in testa alla head, percio' qui
   basta ridefinire il colore e non serve !important. Il fondo resta quello di base, bianco:
   velato del colore del marchio spariva sopra la barra superiore, che e' dello stesso colore. */
#ps_attesa_navigazione div {
    background-image: linear-gradient(to right, #D2DFD5, #83A68C 45%, #1E5E2E);
}

/* Campo data: negli 84px del controllo l'anno non ci sta */
.campoData {
    width: 100px !important;
}

/***************************************************************/
/* PAGAMENTI SIPAY                                             */
/***************************************************************/

#infoInRilievo {
    position: fixed;
    z-index: 102;
    margin: -131px 0px 0px 48px;
}

    #infoInRilievo div {
        float: left;
        margin-right: 16px;
    }

    #infoInRilievo .label {
        color: #00e4ff;
        font-size: 14px;
        margin-top: 3px;
        letter-spacing: 1px;
    }

    #infoInRilievo span {
        color: white;
        font-size: 18px;
        font-weight: bold;
    }

    #infoInRilievo #modalitaSistemaPagamentoBollettini i {
        color: #fff046;
        font-size: 18px;
        margin-top: 1px;
    }

        #infoInRilievo #modalitaSistemaPagamentoBollettini i span {
            color: #fff046;
            font-size: 16px;
            margin-top: 1px;
            font-family: Calibri;
        }



#barraStrumentiPagamenti {
    position: fixed;
    z-index: 102;
    margin: -28px 0px 0px 0px;
}



/*.datiPagamento {

}*/

/*.sezione {
    background-color: white;
    padding: 15px 10px 20px 15px;
    border-radius: 2px;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.10);
}*/


.datiPagamento input[type=text] {
    font-size: 20px;
    padding: 8px 10px;
    font-weight: normal;
}

.opzioniPagamento input[type=text] {
    font-size: 20px;
    padding: 8px 10px;
    font-weight: normal;
}

.enfatizza {
    padding: 10px 40px 26px 40px;
}

.datiPagamento legend {
    margin-bottom: 10px;
}

.selezione-cliente {
    width: 100%;
    margin-bottom: 0px !important;
    padding-bottom: 4px !important;
}

.selezione-intestatario {
    margin-right: 65px;
}

.selezione-esecutore {
    margin-right: 20px;
}


.notificaIntestatarioIsClienteEsecutore {
    margin-left: 3px;
    display: inline-block;
    width: 534px;
}

.notificaIntestatarioIsClienteEsecutore-etichetta {
    float: left;
    margin-right: 8px;
    font-weight: normal;
}

.notificaIntestatarioIsClienteEsecutore-scelta {
    float: right;
}



::-webkit-input-placeholder {
    font-size: 18px;
    color: #37485A !important;
    font-weight: normal !important;
    letter-spacing: 0.3px;
    text-align: left;
}

::-moz-placeholder {
    color: #37485A !important;
    font-weight: normal !important;
    letter-spacing: 0.3px;
}
/* firefox 19+ */
:-ms-input-placeholder {
    color: #37485A !important;
    font-weight: normal !important;
    letter-spacing: 0.3px;
}
/* ie */
input:-moz-placeholder {
    color: #37485A !important;
    font-weight: normal !important;
    letter-spacing: 0.3px;
}



.datiPagamento .importo {
    text-align: right;
}

.notifica-nessunpos {
    display: inline-block;
    padding: 10px;
    margin-top: 20px;
    width: 500px;
}

    .notifica-nessunpos .testoprimario {
        font-size: 16px;
    }

    .notifica-nessunpos .sottotesto {
        font-size: 14px;
        color: #BBBBBB;
    }

    .notifica-nessunpos i {
        font-size: 45px;
        float: left;
        height: 100%;
        margin-right: 8px;
    }


.altro {
    margin: 15px 0px 0px 20px;
    float: left;
    width: 480px;
}

.altreOpzioni {
    padding: 10px 0px 0px 10px;
}

    .altreOpzioni .descrizione {
        font-size: 13px;
        margin-top: 3px;
        margin-left: 20px;
    }

.anteprimaPagamento {
    width: 900px;
    min-height: 250px;
    overflow: auto;
    color: black;
    margin-top: -20px;
}

    .anteprimaPagamento input[type=button] {
        padding: 8px 10px;
    }

    .anteprimaPagamento .section {
        padding: 2px;
        margin: 4px 6px 0px 0px;
        border: none;
        font-size: 20px !important;
        line-height: 24px;
    }

        .anteprimaPagamento .section h1 {
            font-size: 22px !important;
            font-weight: bold !important;
            background-image: none;
            color: #394c5f !important;
            text-transform: capitalize;
            margin-bottom: -20px;
        }

    .anteprimaPagamento .datiCliente {
        margin-top: 30px;
        min-width: 200px;
        min-height: 100px;
        float: left;
    }

    .anteprimaPagamento .datiPagamento-causale {
        display:inline-block;
        width:100%;
    }

    .anteprimaPagamento .datiPagamento {
        min-width: 200px;
        float: left;
        display: inline-block;
        max-width: 580px;
    }

    .anteprimaPagamento .dettaglioCosti {
        width: 310px;
        height: 220px;
        overflow: auto;
        float: right;
        display: inline-table;
        text-align: right;
    }

        .anteprimaPagamento .dettaglioCosti table {
            margin-top: 10px;
        }

        .anteprimaPagamento .dettaglioCosti td {
            padding: 6px 8px;
        }

    .anteprimaPagamento .totale {
        font-size: 20px !important;
    }


    .anteprimaPagamento .comandi {
        padding-top: 20px;
        width: 100%;
        overflow: auto;
    }

        .anteprimaPagamento .comandi input[type=submit] {
            margin-left: 6px;
            padding: 10px 30px 26px 30px;
        }


    .anteprimaPagamento .avvisoUtilizzoPos {
        padding: 8px;
        margin: 4px 6px 0px 0px;
        border-right: none;
        border-top: none;
        font-size: 16px;
        line-height: 24px;
    }


.popUpSuggerimentiPos {
    max-width: 1200px !important;
}



#esitoPagamento {
    width: 900px;
    min-height: 250px;
    overflow: auto;
}

    #esitoPagamento input[type=submit] {
        padding: 10px 30px 25px 30px;
        font-size: 13px;
    }


    #esitoPagamento .notifica {
        font-size: 22px;
        margin-bottom: 14px;
    }

    #esitoPagamento .section {
        padding: 8px;
        margin: 4px 6px 0px 0px;
        border: none;
        font-size: 16px;
        line-height: 24px;
    }

        #esitoPagamento .section h1 {
            font-size: 22px !important;
            font-weight: bold !important;
            background-image: none;
            color: #394c5f !important;
            text-transform: capitalize;
        }


    #esitoPagamento .datiPagamento {
        min-width: 250px;
        float: left;
    }

        #esitoPagamento .datiPagamento .categoria {
            color: #394c5f;
            font-size: 34px;
            text-transform: uppercase;
            letter-spacing: 1.5px;
        }

        #esitoPagamento .datiPagamento .tipologia {
            padding-left: 2PX;
            color: #394c5f;
            font-size: 14px;
            font-weight: bold;
            text-transform: uppercase;
            letter-spacing: 0.8px;
        }



    #esitoPagamento .dettaglioCosti {
        /*width: 300px;*/
        height: 230px;
        overflow: auto;
        float: left;
        text-align: right;
    }

        #esitoPagamento .dettaglioCosti .totale {
            font-size: 20px !important;
            font-weight: bold;
        }


    #esitoPagamento .fa-check {
        font-size: 42px;
        color: #5cb85c;
        margin-right: 12px;
    }

    #esitoPagamento .fa-exclamation-triangle {
        font-size: 28px;
        color: #ff5600;
        margin-right: 12px;
    }

    #esitoPagamento .codiceAvvenutoPagamento {
        margin-top: 20px;
        width: 300px;
    }


        #esitoPagamento .codiceAvvenutoPagamento > span {
            color: #5cb85c;
            font-size: 16px;
            font-weight: bold;
            display: inline-grid !important;
        }

        #esitoPagamento .codiceAvvenutoPagamento .codice {
            color: #394c5f;
            font-size: 28px;
            font-weight: bold;
            letter-spacing: 0.8px;
        }

    #esitoPagamento .dettaglioCosti table {
        width: 280px;
        margin-top: -20px;
    }

    #esitoPagamento .dettaglioCosti td {
        padding: 6px 8px;
    }

    #esitoPagamento .ricevuta {
        background-color: #ffffff !important;
        border: solid 1px !important;
        border-radius: 10px !important;
        padding: 20px !important;
        margin-top: -180px !important;
        margin-left: 650px !important;
        position: fixed !important;
        z-index: 101;
        /*height: 500px;*/
    }


    #esitoPagamento .comandi {
        padding-top: 20px;
        width: 100%;
        overflow: auto;
    }

    #esitoPagamento #messaggioEsitoPagamento {
        font-weight: bold !important;
    }


/*
    SCELTA NUOVO PAGAMENTO
*********************************************************/


.nuovoPagamento {
    width: 980px;
    min-height: 450px;
}

.descrizionePagamento {
    font-size: 11px;
    margin-bottom: 15px;
    padding-bottom: 10px
}

.nuovoBollettino {
    width: 100%;
    padding-bottom: 20px;
    margin-bottom: 20px;
}

.macroCategorieBollettino {
    width: 100%;
    margin-bottom: 20px;
}

.tipoBollettino {
    margin-top: -20px;
    padding-top: 0px !important;
    width: 100%;
}

.tipoBollettino-scelta {
    padding-top: 20px;
}


.nuovoBollettino .definizioneCodiceABarreOQRCode input[type="text"] {
    border: solid 3px #1E5E2E;
    border-left: 20px #1E5E2E solid;
    width: 100%;
    max-width: 905px;
    padding: 25px 20px;
    font-size: 20px;
    height: 60px;
    background-color: white;
}

.nuovoPagamento btn {
    height: 100px;
    padding: 100px;
}

/* SELEZIONE BOLLETTINI
----------------------------------------------------------*/

.nuovoBollettino ::-webkit-input-placeholder {
    color: #37485A !important;
    font-weight: normal !important;
    letter-spacing: 0.3px;
    font-size: 28px !important;
    text-align: center;
}

.nuovoBollettino ::-moz-placeholder {
    color: #37485A !important;
    font-weight: normal !important;
    letter-spacing: 0.3px;
    font-size: 28px !important;
    text-align: center;
}
/* firefox 19+ */
.nuovoBollettino :-ms-input-placeholder {
    color: #37485A !important;
    font-weight: normal !important;
    letter-spacing: 0.3px;
    font-size: 28px !important;
    text-align: center;
}
/* ie */
.nuovoBollettino input:-moz-placeholder {
    color: #37485A !important;
    font-weight: normal !important;
    letter-spacing: 0.3px;
    font-size: 28px !important;
    text-align: center;
}

.radioButtonEnfatizzato label:hover {
    cursor: pointer;
    border: none;
}

.macroCategorieBollettino .radioButtonEnfatizzato label {
    margin-right: 6px;
    height: 95px;
    width: 150px;
    font-size: 16px;
    text-align: center;
}

.macroCategorieBollettino .bollettinoGenerico {
    width: 98px !important;
    height: 47px;
    margin: 0 auto 5px auto;
    background-repeat: no-repeat;
}

.macroCategorieBollettino #bollettinoBianco {
    background-image: url('../../../Common/Immagini/Bollettini/Icone/BiancoGenerico.png');
}

.macroCategorieBollettino input[type="radio"]:checked + label #bollettinoBianco {
    background-image: url('../../../Common/Immagini/Bollettini/Icone/BiancoGenerico-Green.png') !important;
}


.macroCategorieBollettino #bollettinoPremarcato {
    background-image: url('../../../Common/Immagini/Bollettini/Icone/Precompilato.png');
}

.macroCategorieBollettino input[type="radio"]:checked + label #bollettinoPremarcato {
    background-image: url('../../../Common/Immagini/Bollettini/Icone/Precompilato-Green.png') !important;
}


.macroCategorieBollettino #mavRav {
    background-image: url('../../../Common/Immagini/Bollettini/Icone/MavRav.png');
}

.macroCategorieBollettino input[type="radio"]:checked + label #mavRav {
    background-image: url('../../../Common/Immagini/Bollettini/Icone/MavRav-Green.png') !important;
}

.macroCategorieBollettino #pagoPA {
    background-image: url('../../../Common/Immagini/Bollettini/Icone/PagoPALogo.png');
}

.macroCategorieBollettino input[type="radio"]:checked + label #pagoPA {
    background-image: url('../../../Common/Immagini/Bollettini/Icone/PagoPALogo.png') !important;
}

.macroCategorieBollettino #freccia {
    background-image: url('../../../Common/Immagini/Bollettini/Icone/FrecciaLogo.png');
}

.macroCategorieBollettino input[type="radio"]:checked + label #freccia {
    background-image: url('../../../Common/Immagini/Bollettini/Icone/FrecciaLogo.png') !important;
}


.macroCategorieBollettino #f24 {
    background-image: url('../../../Common/Immagini/Bollettini/Icone/f24.png');
}

.macroCategorieBollettino input[type="radio"]:checked + label #f24 {
    background-image: url('../../../Common/Immagini/Bollettini/Icone/f24.png') !important;
}

.macroCategorieBollettino #spid {
    background-image: url('../../../Common/Immagini/Bollettini/Icone/identita-digitale.png');
}

.macroCategorieBollettino input[type="radio"]:checked + label #spid {
    background-image: url('../../../Common/Immagini/Bollettini/Icone/identita-digitale.png') !important;
}

/*.radioButtonEnfatizzato.bollettino896 input[type="radio"] + label {
}*/
/*.tipoBollettino {
}*/
.tipoBollettino-scelta .bollettino label {
    width: 450px;
    height: 220px;
    background-repeat: no-repeat;
    margin-right: 20px;
    border: solid 1px #e5e6e7 !important;
    font-size: 18px;
}

    .tipoBollettino-scelta .bollettino label:hover {
        cursor: pointer;
    }

    .tipoBollettino-scelta .bollettino label:hover {
        cursor: pointer;
    }

.tipoBollettino-scelta input[type="radio"]:checked + label {
    border: solid 4px #1E5E2E !important;
}


.tipoBollettino-scelta .bollettino.bollettino_896 label {
    background-image: url('../../../Common/Immagini/Bollettini/896.png');
    width: 440px;
    height: 220px;
    background-repeat: no-repeat;
    margin-right: 20px;
    font-size: 18px;
}


.tipoBollettino-scelta .bollettino.bollettino_674 label {
    background-image: url('../../../Common/Immagini/Bollettini/674.png');
    width: 440px;
    height: 220px;
    background-repeat: no-repeat;
    margin-right: 20px;
    border: solid 1px #e5e6e7 !important;
    font-size: 18px;
}


.tipoBollettino-scelta .bollettino.bollettino_123 label {
    background-image: url('../../../Common/Immagini/Bollettini/123.png');
    width: 440px;
    height: 220px;
    background-repeat: no-repeat;
    margin-right: 20px;
    border: solid 1px #e5e6e7 !important;
    font-size: 18px;
}


.tipoBollettino-scelta .bollettino.bollettino_451 label {
    background-image: url('../../../Common/Immagini/Bollettini/451.png');
    width: 440px;
    height: 220px;
    background-repeat: no-repeat;
    margin-right: 20px;
    border: solid 1px #e5e6e7 !important;
    font-size: 18px;
}

.tipoBollettino-scelta .bollettino.bollettino_prenotazione label {
    background-image: url('../../../Common/Immagini/Bollettini/prenotazioneBollettino.png');
    width: 440px;
    height: 216px;
    background-repeat: no-repeat;
    margin-right: 20px;
    border: solid 1px #e5e6e7 !important;
    font-size: 18px;
}

.tipoBollettino-scelta .bollettino.freccia label {
    background-image: url('../../../Common/Immagini/Bollettini/Freccia.png');
    background-repeat: no-repeat;
    margin-right: 20px;
    border: solid 1px #e5e6e7 !important;
    font-size: 18px;
    padding-bottom: 190px !important;
    padding-right: 360px !important;
}

.tipoBollettino-scelta .bollettino.bollettino_freccia_prenotazione label {
    background-image: url('../../../Common/Immagini/Bollettini/prenotazioneFreccia.png');
    width: 430px;
    height: 216px;
    background-repeat: no-repeat;
    margin-right: 20px;
    border: solid 1px #e5e6e7 !important;
    font-size: 18px;
}

.tipoBollettino-scelta .bollettino.bollettino_Mav label {
    background-image: url('../../../Common/Immagini/Bollettini/Mav.png');
    width: 440px;
    height: 220px;
    background-repeat: no-repeat;
    margin-right: 20px;
    border: solid 1px #e5e6e7 !important;
    font-size: 18px;
}


.tipoBollettino-scelta .bollettino.bollettino_Rav label {
    background-image: url('../../../Common/Immagini/Bollettini/Rav.png');
    width: 440px;
    height: 220px;
    background-repeat: no-repeat;
    margin-right: 20px;
    border: solid 1px #e5e6e7 !important;
    font-size: 18px;
}


.tipoBollettino-scelta .pagamento.pagamento_tributo label {
    background-image: url('../../../Common/Immagini/Bollettini/Tributo.png');
    width: 275px;
    height: 220px;
    background-repeat: no-repeat;
    margin-right: 43px;
    border: solid 1px #e5e6e7 !important;
    font-size: 18px;
}

.tipoBollettino-scelta .pagamento.pagamento_tassaVeicolo label {
    background-image: url('../../../Common/Immagini/Bollettini/TassaVeicolo.png');
    width: 275px;
    height: 220px;
    background-repeat: no-repeat;
    margin-right: 43px;
    border: solid 1px #e5e6e7 !important;
    font-size: 18px;
}

.tipoBollettino-scelta .pagamento.pagamento_passaporto label {
    background-image: url('../../../Common/Immagini/Bollettini/Passaporto.png');
    background-repeat: no-repeat;
    border: solid 1px #e5e6e7 !important;
    font-size: 18px;
    padding-bottom: 180px !important;
    padding-right: 84px !important;
}

/* ============================================================
   NUOVO SERVIZIO - Pratica Passaporto
   Badge "Novita'" verde a fianco della nota + badge piccolo
   sulla card di scelta.
   ============================================================ */

/* --- Badge verde "Novita'" floatato accanto alla nota ----- */
#praticaPassaporto .notifica-note .badge-novita-verde {
    float: left;
    margin: 6px 12px 4px 0;
    padding: 4px 6px;
    background: #1AB394;
    color: #ffffff;
    font-size: 11px;
    font-weight: bold;
    letter-spacing: 1px;
    text-transform: uppercase;
    border-radius: 4px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.12);
}


/* --- Badge "NOVITA'" sulla card "Pratica Passaporto" ----- */
.tipoBollettino-scelta .pagamento.pagamento_passaporto {
    position: relative;
}

    .tipoBollettino-scelta .pagamento.pagamento_passaporto::before {
        content: "\2605 NOVIT\C0";
        position: absolute;
        top: 24px;
        left: 22px;
        background: linear-gradient(135deg, #FFB400 0%, #FF6B35 100%);
        color: #ffffff;
        font-size: 9px;
        font-weight: bold;
        letter-spacing: 0.8px;
        padding: 3px 8px;
        border-radius: 8px;
        text-transform: uppercase;
        box-shadow: 0 1px 4px rgba(0,0,0,0.20);
        pointer-events: none;
        z-index: 25;
        white-space: nowrap;
        animation: novitaPulse 2.4s ease-in-out infinite;
    }

@keyframes novitaPulse {
    0%, 100% {
        box-shadow: 0 1px 4px rgba(0,0,0,0.20), 0 0 0 0 rgba(255, 107, 53, 0.55);
    }

    50% {
        box-shadow: 0 1px 4px rgba(0,0,0,0.20), 0 0 0 6px rgba(255, 107, 53, 0);
    }
}

.tipoBollettino-scelta .pagamento.pagamento_f24 label {
    background-image: url('../../../Common/Immagini/Bollettini/F24_attivazione.jpg');
    background-repeat: no-repeat;
    background-position-x: center;
    background-position-y: center;
    background-size: cover;
    margin-right: 0px;
    border: solid 1px #e5e6e7 !important;
    font-size: 18px;
    padding-bottom: 190px !important;
    padding-right: 842px !important;
    cursor: default;
    /*background-position-x: center;
    background-position-y: center;
    background-size: cover;
    width: 920px;
    height: 220px;
    background-repeat: no-repeat;
    border: solid 1px #e5e6e7 !important;
    font-size: 18px;
    cursor: none;*/
}

.tipoBollettino-scelta .pagamento.pagamento_f24_prod label {
    background-image: url('../../../Common/Immagini/Bollettini/F24_banner.jpg');
    background-repeat: no-repeat;
    background-position-x: center;
    background-position-y: center;
    background-size: cover;
    margin-right: 0;
    border: solid 1px #e5e6e7 !important;
    font-size: 18px;
    padding-bottom: 190px !important;
    padding-right: 840px !important;
    cursor: default;
    background-size: 820px 250px;
    /* background-position-x: center;
    background-position-y: center;
    background-size: cover;
    width: 920px;
    height: 220px;
    background-repeat: no-repeat;
    border: solid 1px #e5e6e7 !important;
    font-size: 18px;
    cursor: none;
    color: white !important;*/
}



.tipoBollettino-scelta .pagamento.pagamento_spid_richiedi_attivazione label {
    background-image: url(../../../Common/Immagini/Bollettini/SPID_attivazione.jpg);
    background-repeat: no-repeat;
    background-position-x: center;
    background-position-y: center;
    background-size: cover;
    margin-right: 0;
    border: solid 1px #e5e6e7 !important;
    font-size: 18px;
    padding-bottom: 190px !important;
    padding-right: 840px !important;
    cursor: default;
    color: white !important;
}


.tipoBollettino-scelta .pagamento.pagamento_spid_attivo label {
    background-image: url(../../../Common/Immagini/Bollettini/SPID_banner.jpg);
    background-repeat: no-repeat;
    background-position-x: center;
    background-position-y: center;
    background-size: cover;
    margin-right: 0;
    border: solid 1px #e5e6e7 !important;
    font-size: 18px;
    padding-bottom: 190px !important;
    padding-right: 840px !important;
    cursor: default;
    color: white !important;
}



::-webkit-input-placeholder {
    color: #37485A !important;
    font-weight: normal !important;
    letter-spacing: 0.3px;
}

::-moz-placeholder {
    color: #37485A !important;
    font-weight: normal !important;
    letter-spacing: 0.3px;
}
/* firefox 19+ */
:-ms-input-placeholder {
    color: #37485A !important;
    font-weight: normal !important;
    letter-spacing: 0.3px;
}
/* ie */
input:-moz-placeholder {
    color: #37485A !important;
    font-weight: normal !important;
    letter-spacing: 0.3px;
}

.archivio .definizioneParametriRicerca {
    /*text-transform:uppercase;*/
}


.archivio .ricercaCodicepagamento input[type=text] {
    height: 36px;
    width: 250px;
    padding: 4px 10px;
    font-size: 18px;
    color: #003A49;
}

.archivio .intervalloDiRicerca input[type=text] {
    height: 36px;
    width: 106px !important;
    margin-right: 0px;
    padding: 2px 10px;
}

.archivio .enfatizza {
    font-weight: bold;
    font-size: 14px;
}


.ricevutaPagamenti {
    border-radius: 8px;
    margin-top: -60px;
    background-color: white;
    width: 490px;
    display: inline-block;
    border: 1px solid;
    padding: 20px 20px 20px 40px;
    position: fixed;
    top: 130px;
    right: 300px;
    border: 6px solid #35496a;
    border-radius: 5px;
    border-top: 30px solid #35496a;
    box-shadow: 20px 20px 10px -1px rgba(7, 10, 25, 0.4), 0 22px 27px -20px rgba(7, 10, 25, 0.2);
}

    .ricevutaPagamenti h1 {
        background-color: white;
        color: #053948;
        font-weight: bold;
        padding: 0px;
        margin: 6px 0px;
        font-size: 22px;
    }

    .ricevutaPagamenti .chiudi {
        margin-top: -20px;
    }
/*
    PAGAMENTI
*********************************************************/

.infoPagamentoInCorso .destinatarioPagamento {
    margin-top: -4px;
    padding: 0px 10px 4px 10px;
    font-family: Calibri;
    overflow: auto;
    float: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    border-bottom: solid 2px #e5e6e7;
}

    .infoPagamentoInCorso .destinatarioPagamento .fa.fa-check {
        color: #1ab394;
        font-size: 30px;
        padding-right: 10px;
    }

    .infoPagamentoInCorso .destinatarioPagamento .etichetta {
        font-size: 19px;
        text-transform: uppercase;
        font-weight: bold;
        color: #1ab394;
        padding: 0px;
    }

    .infoPagamentoInCorso .destinatarioPagamento .denominazione {
        font-size: 24px;
        font-weight: bold;
        color: #053948;
        padding: 0px;
    }

.infoPagamentoInCorso .importoTotale {
    font-size: 58px;
    font-weight: bold;
    color: #053948;
    padding: 0px;
}

.selezioneTipoPagamento {
    width: 100%;
}

.definizioneCliente {
    width: 540px !important;
}


    .definizioneCliente input[type="text"] {
        width: 100%;
    }

/*
    NUOVO BOLLETTINO
*********************************************************/
#bollettino {
    margin-bottom: 25px;
    background-color: white;
    opacity: 0.9;
}

    #bollettino fieldset {
        margin-top: 0px !important;
    }

fieldset {
    padding-bottom: 16px !important;
}

#bollettino input[type="text"] {
    width: 100%;
}

#bollettino .datiPagamento {
    width: 600px;
    margin-right: 20px;
    float: left;
}



#bollettino-tipologia {
    float: left;
    margin-right: 10px;
}

#bollettino-contoCorrente {
    float: left;
    width: 200px;
    margin-right: 20px;
}

#bollettino_codice {
    float: left;
    width: 238px;
}

#bollettino-importo {
    float: left;
    width: 100px;
    margin-right: 20px;
}

    #bollettino-importo input[type=text] {
        text-align: right;
    }


#bollettino-causale {
    width: 560px;
    margin: 0px 0px 0px 0px;
    display: inline-block;
    padding-bottom: 4px !important;
}

    #bollettino-causale #causaleNonFormattata {
        width: 95%;
        display: inline-block;
    }

        #bollettino-causale #causaleNonFormattata textarea {
            padding: 8px 10px;
            margin-bottom: 8px;
            background-color: #eaedf0;
            width: 535px;
        }

    #bollettino-causale input[type="radio"] + label {
        padding: 10px 20px 10px 3px;
        font-size: 14px;
    }


    #bollettino-causale #tipoFormattazioneCausale {
        margin-bottom: 15px;
    }



#bollettino .vociCausali {
    width: 100%;
    min-height: 30px;
    display: inline-block;
}

#bollettino-causale .vociCausali span {
    text-transform: uppercase !important;
    font-size: 12px;
    color: #053948;
}

#bollettino-causale .vociCausali input[type=text] {
    padding: 5px 10px;
    font-size: 16px;
}

#bollettino-causale .voce {
    float: left;
    margin-right: 10px;
    margin-bottom: 10px;
}

    #bollettino-causale .voce .etichettaVoce {
        font-weight: bold;
        font-size: 13px;
        color: black;
    }

.causale-voci .causale-voci-valore input {
    padding: 3px 8px !important;
}


#bollettino .definizioneCliente {
    padding-bottom: 0px !important;
}

.definizioneCliente input {
    height: 32px;
}

#bollettino .comandi {
    width: 300px;
    overflow: auto;
    float: left;
}

    #bollettino .comandi input {
        padding: 10px 40px 26px 40px;
    }

#bollettino #suggerimentoCausale {
    width: 100%;
    border: none;
    overflow: auto;
}

    #bollettino #suggerimentoCausale span {
        margin-left: 40px;
        float: left;
    }

    #bollettino #suggerimentoCausale b {
        font-size: 20px;
    }

    #bollettino #suggerimentoCausale .fa-info-circle {
        font-size: 28px;
        margin-right: 14px;
        float: left;
        color: #1A9AD5;
    }

#suggerimentoCausale.notifica {
    border: none;
    width: 550px;
}


#bollettino #definizioneCodiceABarre {
    width: 570px;
    margin-top: 4px;
    margin-bottom: 20px;
}

    #bollettino #definizioneCodiceABarre input {
        max-width: 570px;
        height: 40px !important;
    }

#bollettino #txtCodiceBarreBollettino,
#txtCodiceBarreBollettino:focus {
    border: solid 2px #1E5E2E;
    background-color: white;
    border-left-width: 8px;
    padding: 20px 20px 20px 20px;
}


#bollettino #definizioneCodiceABarre input {
    width: 100%;
    height: 40px;
    font-size: 20px;
}

#bollettino input[type="text"] {
    width: 100%;
    color: black;
    font-size: 20px;
    padding: 6px 10px;
    font-weight: normal;
    background-color: #eaedf0;
    border-radius: 3px;
    border: solid 1px #D4D9DE;
}


#bollettino .notifica-note {
    border: none;
    width: 568px;
    font-family: Calibri;
    font-size: 15px;
    border: solid 1px #eaedf0;
    border-bottom: solid 6px #eaedf0;
    border-radius: 2px;
}

    #bollettino .notifica-note .nota {
        float: left;
        background-color: white;
        color: #1E5E2E;
        padding: 2px 14px;
        font-weight: bold;
        border-radius: 2px;
        margin-right: 10px;
        vertical-align: middle;
        margin-top: 10px;
        text-transform: uppercase;
        letter-spacing: 1px;
        font-size: 18px;
    }

    #bollettino .notifica-note .descrizione {
        font-size: 14px;
        padding: 4px 6px;
    }



/*
    FRECCIA
*********************************************************/

.datipagamento-freccia {
    padding-top: 4px;
    display: inline-flex;
}

    .datipagamento-freccia input {
        color: #003946 !important;
    }

.bollettino-freccia .selezioneBinaria {
    margin-left: 100px !important;
    float: left;
    margin-left: 114px;
}

.bollettino-freccia-info {
    width: 454px !important;
    float: left;
    background-image: url("../Immagini/Logo_Freccia.png");
    background-position: bottom -5px left 20px;
    background-repeat: no-repeat;
    background-size: 120px;
}

.bollettino-freccia-codice {
    height: 60px !important;
    width: 280px !important;
}

    .bollettino-freccia-codice input {
        text-align: center;
    }

    .bollettino-freccia-codice input {
        text-transform: uppercase;
    }

.bollettino-freccia-importo {
    height: 60px !important;
    width: 120px !important;
    margin-left: 14px !important;
}

.bollettino-freccia-ibanCreditore {
    overflow: auto;
    margin-top: 80px;
    height: 120px !important;
    width: 414px !important;
}

    .bollettino-freccia-ibanCreditore input {
        text-transform: uppercase;
    }

.bollettino-freccia-cin-elenco {
    width: 80px !important;
    float: right;
    border-left: solid 1px #d9d9d9;
    padding-left: 40px;
}

    .bollettino-freccia-cin-elenco b {
        font-size: 12px;
    }

.bollettino-freccia-cin {
    height: 60px !important;
    width: 160px !important;
    display: inline-block;
    margin-right: 30px;
    margin-bottom: 23px;
}

    .bollettino-freccia-cin .asterisco {
        font-size: 15px !important;
    }

    .bollettino-freccia-cin input {
        width: 70px !important;
        text-align: center;
        font-size: 45px;
        text-transform: uppercase;
        margin-bottom: 35px;
    }

.bollettino-freccia-codiceEsenzione {
    margin-top: -30px;
    text-align: right;
    height: 50px !important;
    width: 410px !important;
}

.bollettino-freccia-codiceEsenzione-selezione {
    height: 50px !important;
    width: 60px !important;
    float: right;
    font-weight: bold;
}

.bollettino-freccia-codiceEsenzione-descrizione {
    margin-right: 20px;
    height: 50px !important;
    width: 200px !important;
    float: right;
    display: table;
    margin-top: -8px;
    font-size: 13px;
    text-transform: uppercase;
    color: #1E5E2E;
    font-weight: bold;
}

    .bollettino-freccia-codiceEsenzione-descrizione span {
        display: table-cell;
        vertical-align: middle;
    }

.bollettino-freccia-codiceEsenzione select {
    width: 100%;
    height: 34px;
}



/*
    DEFINIZIONE CLIENTE
*************************************/


.definizioneCliente {
    width: 100%;
}

    .definizioneCliente legend {
        text-transform: none;
        font-size: 22px !important;
    }

::-webkit-input-placeholder {
    font-size: 15px !important;
    color: black !important;
    font-weight: normal !important;
    letter-spacing: 0.3px;
}

::-moz-placeholder {
    color: black !important;
    font-weight: normal !important;
    letter-spacing: 0.3px;
}
/* firefox 19+ */
:-ms-input-placeholder {
    color: black !important;
    font-weight: normal !important;
    letter-spacing: 0.3px;
}
/* ie */
input:-moz-placeholder {
    color: black !important;
    font-weight: normal !important;
    letter-spacing: 0.3px;
}


/* ie */
input:-moz-placeholder {
    color: black !important;
}

.definizioneCliente input[type="text"] {
    padding: 10px 12px !important;
    margin-top: -7px;
}

.definizioneCliente .ricercaCliente {
    width: 800px;
    margin-bottom: 15px;
}

    .definizioneCliente .ricercaCliente input[type="text"] {
        width: 402px !important;
        height: 36px;
        border-right: none;
        border-bottom-right-radius: 0;
        border-top-right-radius: 0;
    }

.definizioneCliente .nuovoCliente {
    margin-bottom: -15px;
    margin-left: -3px;
}

    .definizioneCliente .nuovoCliente a {
        float: right !important;
        border-top-left-radius: 0px !important;
        border-bottom-left-radius: 0px !important;
        color: white;
        margin-left: 0px;
    }


    .definizioneCliente .nuovoCliente .btn {
        padding: 6px 20px 22px 20px !important;
        height: 12px;
    }


.definizioneCliente .riga {
    width: 100%;
    border-bottom: none;
    display: inline-flex;
}

    .definizioneCliente .riga > div {
        margin-left: 0px;
        margin-bottom: 4px;
    }

    .definizioneCliente .riga div {
        float: left;
        margin-left: 3px !important;
    }

    .definizioneCliente .riga .pannelloCliente {
        float: none !important;
        margin-left: 0px !important;
    }

    .definizioneCliente .riga .civico input[type=text] {
        width: 124px !important;
    }

    .definizioneCliente .riga .email input[type=text] {
        width: 295px !important;
    }

.definizioneCliente .idCliente {
    float: left !important;
    text-align: right;
    padding-left: 30px;
}

    .definizioneCliente .idCliente .label {
        color: #1ab394;
        font-weight: bold;
        text-align: right;
        font-size: 14px;
        padding: 0px;
        margin: 0px;
    }

    .definizioneCliente .idCliente .valore {
        text-align: right;
        font-size: 14px;
        font-weight: bold;
    }

.definizioneCliente .ricerca .casellaTesto {
    margin-right: 300px;
    float: left;
}

.definizioneCliente .ricerca .btn {
    float: left;
}

/*.definizioneCliente .cognomeORagioneSociale {
}*/

.definizioneCliente .indirizzo {
    width: 454px;
}

.definizioneCliente .civico {
    width: 100px;
}

.definizioneCliente .nazione {
    width: 90px;
}

.definizioneCliente .cap {
    width: 60px;
}

.definizioneCliente .citta {
    width: 235px;
}

.definizioneCliente .regione {
    width: 60px;
}

.definizioneCliente .provincia {
    width: 60px;
}

.definizioneCliente .telefono {
    width: 140px;
}

.definizioneCliente .cellulare {
    width: 140px;
}

.definizioneCliente .email {
    width: 271px;
}

/*
   SELEZIONE CLIENTE
**********************************************************/

.definizioneCliente {
    font-family: Calibri;
}

.definizioneCliente-intestazione {
    float: right;
    width: 180px !important;
    color: #1ab394;
    font-weight: bold;
    font-size: 16px;
    margin-bottom: 6px;
    margin-top: 0px;
    text-align: right;
}

.definizioneCliente-codiceYappay {
    color: #053948;
    font-size: 18px;
    margin: 0px 10px 0px 10px;
}

.definizioneCliente .presentazioneCliente {
    height: 35px;
}

.definizioneCliente .denominazioneCliente {
    font-size: 20px;
    text-transform: capitalize;
    font-weight: bold;
    float: left;
    color: #053948;
}

.definizioneCliente .modificaCliente {
    float: right;
}

.definizioneCliente .indirizziCliente {
    width: 100%;
    margin-bottom: 6px;
}

/*
   GESTIONE CLIENTE
**********************************************************/
.popUpPannelloGestioneCliente {
    width: 1025px;
}

.areaInfoCliente {
    float: left;
    margin: 5px 3px 15px 3px;
    height: 400px;
    border: solid 1px #e5e6e7;
    border-radius: 8px;
    padding: 8px;
}

    .areaInfoCliente .asterisco {
        font-size: 13px !important;
    }

    .areaInfoCliente .etichettaArea {
        font-weight: bold;
        font-size: 18px;
        margin-bottom: 10px;
    }

    .areaInfoCliente .infoCliente {
        margin-bottom: 5px;
    }

        .areaInfoCliente .infoCliente .etichettaInfoCliente {
            font-weight: bold;
            font-size: 13px;
        }

        .areaInfoCliente .infoCliente .campoInfoCliente-data {
            width: 114px !important;
        }

.campoNonValido {
    border-color: #a94442;
}



/*
    MAV
**********************************************************/
#mav {
    max-width: 900px;
    padding-top: 4px;
    margin-bottom: 15px;
    background-color: white;
    opacity: 0.9;
}

    #mav input[type="text"] {
        width: 100%;
    }

    #mav .datiPagamento {
        width: 100%;
        margin-right: 20px;
        float: left;
        padding-bottom: 0px !important;
        margin-bottom: 20px;
    }

    #mav .opzioniPagamento {
        width: 400px;
        float: left;
    }

    #mav .selezioneOpzioniPagamento {
        margin-top: 0px;
    }

    #mav .selezioneModalitaPagamento {
        float: left;
        margin-right: 5px;
    }


#mav-codice {
    float: left;
    margin-right: 20px;
}

#mav-importo {
    float: left;
    margin-bottom: 10px;
}

    #mav-importo input[type=text] {
        text-align: right;
    }

#mav-causale {
    overflow: auto;
    margin-top: 40px;
    width: 100%;
}

#mav-causale-V2 {
    overflow: auto;
    margin-bottom: 40px;
    width: 100%;
}

#mav #causaleNonFormattata textarea {
    width: 534px;
}



#mav .definizioneCliente {
    padding-bottom: 0px !important;
}

#mav .comandi {
    overflow: auto;
    width: 100%;
}

    #mav .comandi input {
        padding: 10px 40px 26px 40px;
    }

/*
    RAV
**********************************************************/


#rav {
    max-width: 900px;
    padding-top: 4px;
    margin-bottom: 15px;
    background-color: white;
    opacity: 0.9;
}

    #rav input[type="text"] {
        width: 100%;
    }

    #rav .datiPagamento {
        width: 100%;
        margin-right: 20px;
        float: left;
        padding-bottom: 0px !important;
        margin-bottom: 20px;
    }

    #rav .opzioniPagamento {
        width: 400px;
        float: left;
    }

    #rav .selezioneOpzioniPagamento {
        margin-top: 0px;
    }

#rav-codice {
    float: left;
    margin-right: 10px;
}

#rav-importo {
    float: left;
    margin-bottom: 10px;
}

    #rav-importo input[type=text] {
        text-align: right;
    }

#rav-causale {
    margin-top: 20px;
    overflow: auto;
    width: 100%;
}

#rav-causale-V2 {
    margin-bottom: 40px;
    overflow: auto;
    width: 100%;
}

#rav #causaleNonFormattata textarea {
    width: 534px;
}



#rav .definizioneCliente {
    padding-bottom: 0px !important;
}

#rav .comandi {
    overflow: auto;
    width: 100%;
}

    #rav .comandi input {
        padding: 10px 40px 26px 40px;
    }

    #rav .comandi .btn {
        padding: 16px 40px 30px 30px !important;
    }


/*
    PROPOSTA BILLER
**********************************************************/

.nuovoBiller div {
    margin-bottom: 16px;
}

.nuovoBiller legend {
    color: #1E5E2E;
}


.nuovoBiller input[type=text] {
    height: 34px;
    font-size: 18px !important;
    padding-top: 8px !important;
}

.allegato {
    height: 80px;
    margin-bottom: 40px;
    width: 100%;
}

    .allegato .upload {
        padding-top: 10px;
    }

.nuovoBiller .contoCorrente {
    width: 100%;
    height: 40px;
    float: left;
    margin-bottom: 30px;
}

.nuovoBiller .codice {
    width: 300px;
    padding-right: 20px;
    margin-right: 20px;
}

.nuovoBiller .iban {
    width: 340px;
    float: left;
}

.nuovoBiller .noteBiller {
    height: 50px;
    width: 460px;
    text-align: left;
    float: left;
    margin-bottom: 30px;
}

.nuovoBiller .allegato {
    height: 160px;
    padding-top: 15px;
    width: 100%;
    display: inline-block;
}

.nuovoBiller .comandi {
    width: 100%;
}

.nuovoBiller .infoCondominio input[type=checkbox] {
    height: 28px;
    width: 28px;
    float: left;
}

.nuovoBiller .infoCondominio label {
    padding-top: 3px;
    font-size: 20px !important;
    float: left;
    font-weight: bold !important;
    color: #1E5E2E;
}

.nuovoBiller .infoCondominio-infoAmministratore {
    padding-top: 10px;
    width: 100%;
    overflow: auto;
}

.nuovoBiller .infoAmministratoreCondominio-denominazione input[type=text] {
    width: 100%;
}

.nuovoBiller .infoAmministratoreCondominio-telefono input[type=text] {
    width: 200px;
    text-align: center;
}


/*********************************************************/
/*    RICARICHE MENSE SCOLASTICHE                        */
/*********************************************************/

/*Definizione Dati Ricarica*/

.ricaricaMensa {
    background-color: #ffffff;
    padding: 10px 14px;
    width: 1108px;
}

    .ricaricaMensa fieldset legend {
        margin-bottom: 10px;
    }

        .ricaricaMensa fieldset legend.enfatizzato {
            font-weight: bold;
            font-size: 10px
        }

    .ricaricaMensa .btn {
        padding: 10px 60px 28px 60px !important;
    }

    .ricaricaMensa b {
        text-transform: uppercase;
        color: #35496a;
        font-weight: normal;
        font-size: 14px;
    }


    .ricaricaMensa .definizioneInfoRicarica {
        padding-top: 16px;
        position: relative;
        padding-bottom: 40px;
    }

        .ricaricaMensa .definizioneInfoRicarica input[type=text] {
            margin-top: 8px;
            padding: 4px 12px;
            font-weight: bold !important;
            font-size: 28px !important;
            text-align: right;
            width: 150px;
        }

.ricaricaMensa-infoStudente {
    float: left;
    margin-right: 50px;
    width: 300px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

    .ricaricaMensa-infoStudente .denominazione {
        font-weight: bold;
        font-size: 22px;
        height: 28px;
    }

.ricaricaMensa-saldoStudente .importo {
    text-align: right;
    font-size: 36px;
}

.ricaricaMensa-infoStudente .istituto {
    font-size: 18px;
}

.ricaricaMensa .ricaricaMensa-importo {
    float: left;
    margin-right: 70px;
}

.ricaricaMensa-saldoStudente {
    float: left;
}

.ricaricaMensa-notificaCliente {
    width: 100%;
    height: 50px;
    display: block;
    overflow: auto;
}

    .ricaricaMensa-notificaCliente .notifica {
        font-size: 16px;
    }

/*Anteprima*/

.anteprimaRicaricaMensa {
    width: 800px;
    position: relative;
    padding: 10px;
    margin-bottom: 50px;
}

.anteprimaRicaricaMensa-titolo {
    font-size: 18px;
    color: #1A9AD5;
    height: 16px;
    margin-bottom: 12px;
}

.anteprimaRicaricaMensa .studente {
    font-size: 32px;
    height: 38px;
}

.anteprimaRicaricaMensa .istitutoScolastico {
    font-size: 22px;
}

.anteprimaRicaricaMensa .importo {
    padding-top: 40px;
    font-size: 50px;
    font-weight: bold;
    position: absolute;
    top: 10px;
    right: 20px;
}

.anteprimaRicaricaMensa .clienti {
    border-top: solid 1px #e0e0e0;
    width: 100%;
    margin-top: 20px;
    overflow: auto;
    padding-top: 10px;
}

.anteprimaRicaricaMensa .cliente {
    width: 360px;
    display: inline-block;
}

.anteprimaRicaricaMensa .cliente-tipo {
    font-size: 16px;
    text-transform: none;
    color: #1ab394;
    margin-bottom: 6px;
    padding-bottom: 0px;
    height: 16px;
    font-weight: bold;
}

.anteprimaRicaricaMensa .cliente .denominazione {
    font-size: 20px;
    font-weight: bold;
    height: 28px;
}

.anteprimaRicaricaMensa .cliente .indirizzo,
.anteprimaRicaricaMensa .cliente .localita {
    font-size: 16px;
}

.anteprimaRicaricaMensa .notifica {
    margin-top: 20px;
}

/* ESITO RICARICA MENSA */
.esitoRicaricaMensa .datiEsitoRicarica {
    width: 500px;
    min-height: 150px;
    padding: 20px;
    float: left;
    margin-right: 40px;
}

    .esitoRicaricaMensa .datiEsitoRicarica .totaleRicarica {
        text-align: right;
        font-size: 50px;
        font-weight: bold;
        float: right;
        margin-top: 120px;
        margin-right: -50px;
    }

.esitoRicaricaMensa .notifica {
    font-size: 22px;
    margin-bottom: 14px;
}

#esitoPagamento .sezione {
    padding: 8px;
    margin: 4px 6px 0px 0px;
    border: none;
    font-size: 16px;
    line-height: 24px;
}

#esitoPagamento .sezioneRicevuta {
    padding: 8px;
    margin: 4px 6px 0px 0px;
    border: none;
    font-size: 16px;
    line-height: 24px;
}

.esitoRicaricaMensa .datiEsitoRicarica .infoRicarica {
    margin-top: -30px;
    float: left;
    max-width: 290px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}


    .esitoRicaricaMensa .datiEsitoRicarica .infoRicarica .studente {
        font-weight: bold;
        font-size: 30px;
        margin-bottom: 0px;
    }


    .esitoRicaricaMensa .datiEsitoRicarica .infoRicarica .istituto {
        font-size: 22px;
    }


.esitoRicaricaMensa .datiEsitoRicarica .infoSecondarie {
    font-size: 18px;
}

.ricevutaRicaricaMensa {
    border-radius: 8px;
    margin-top: -60px;
    background-color: white;
    width: 500px;
    display: inline-block;
    border: 1px solid;
    padding: 20px 20px 20px 50px;
    z-index: 10000;
}


/* STILI TAB CONTAINER AJAX CONTR */

.processoPagamento .ajax__tab_header a {
    color: #BBBBBB;
    cursor: pointer;
    font-family: "Segoe UI" !important;
    font-weight: bold;
    font-size: 20px !important;
    font-weight: bold;
    padding-bottom: 10px !important;
    padding-right: 30px;
    cursor: default;
}

.processoPagamento .ajax__tab_outer {
    padding: 6px 0px 6px 0px;
    margin-left: 0px;
}

.processoPagamento .ajax__tab_inner {
}

.processoPagamento .ajax__tab_body {
    padding: 8px 0px 4px 0px;
    margin-top: -12px;
    height: 500px;
    border-top-style: solid;
    border-top-width: 1px;
    border-top-color: #D9D9D9;
}

.processoPagamento .ajax__tab_tab {
    padding: 0px 10px 0px 10px;
    margin-right: 10px;
}

.processoPagamento .ajax__tab_hover {
    border-bottom-style: solid;
    border-bottom-width: 3px;
    border-bottom-color: #37485A;
}

.processoPagamento .ajax__tab_active {
    border-bottom-style: solid;
    border-bottom-width: 3px;
    border-bottom-color: #1E5E2E;
}

    .processoPagamento .ajax__tab_active a {
        color: #37485A !important;
        border-bottom-style: solid;
        border-bottom-width: 3px;
        border-bottom-color: #1E5E2E;
        padding-bottom: 7px !important;
        outline: none !important;
    }

.processoPagamento .cliente-definzione .ajax__tab_header a {
    font-weight: normal !important;
    font-size: 18px !important;
    color: #1a9ad5 !important;
    border: none;
    text-transform: none !important;
}

.processoPagamento span {
    border-bottom-style: none !important;
}



/*********************************************************/
/*    CAMPI RICHIESTI DAI BILLER PER PAGAMENTO           */
/*********************************************************/

.campiRichiesti {
    margin: 10px 0px 15px 0px;
    overflow: auto;
    width: 800px;
    overflow-x: hidden;
}

    .campiRichiesti .textBoxLarge {
        font-size: 18px !important;
    }

    .campiRichiesti .asterisco {
        font-size: 14px !important;
    }


.campiRichiesti-campi div {
    float: left;
    margin-right: 6px;
    height: 60px;
}

.campiRichiesti-campi b {
    text-transform: none;
    font-size: 16px;
}

.campiRichiesti-intestazione {
    border-bottom: solid 1px #e5e6e7;
    margin-bottom: 4px;
}

    .campiRichiesti-intestazione b {
        color: #1E5E2E;
        text-transform: capitalize;
        font-size: 18px;
    }

.campiRichiesti .email {
    width: 218px !important;
}

.campiRichiesti .codiceFiscale {
    font-size: 10px;
    text-transform: uppercase;
    font-weight: bold;
    width: 200px !important;
}

    .campiRichiesti .codiceFiscale input {
        font-size: 16px !important;
    }

.campiRichiesti .partitaIva {
    width: 140px !important;
}

.campiRichiesti input[type=text] {
    padding: 5px 10px !important;
    font-size: 17px !important;
}

.campiRichiesti-voceCausaleAggiuntiva {
    float: left;
    margin-right: 6px;
    width: 34%;
}

    .campiRichiesti-voceCausaleAggiuntiva div {
        margin-right: 10px;
    }


.definizioneCausale-vociAggiuntiveCausale {
    margin-top: 20px;
    border-top: solid 1px #e5e5e5;
    padding-top: 8px;
}

.campiRichiesti-voceCausaleAggiuntiva div {
    margin-right: 10px;
}

.definizioneCausale-vociAggiuntiveCausale-etichetta {
    color: #707F90;
    font-weight: 600;
    font-size: 18px;
}

.definizioneCausale-vociAggiuntiveCausale-valore {
    padding-top: 3px;
    color: #003948;
    font-size: 16px;
    line-height: 26px;
}



.documentoIdentita {
    margin: 25px 0px 15px 0px;
}

.documentoIdentita-intestazione {
    border-bottom: solid 1px #e5e6e7;
    margin-bottom: 4px;
}

    .documentoIdentita-intestazione b {
        color: #1A9AD5;
        text-transform: capitalize !important;
        font-size: 16px !important;
    }

.documentoIdentita b {
    text-transform: none;
    font-size: 14px;
}

.documentoIdentita select {
    width: 315px;
    height: 32px;
}

.documentoIdentita .campo {
    float: left;
    margin-right: 5px;
}

.documentoIdentita .dataScadenza input[type="text"] {
    width: 103px !important;
}

.documentoIdentita .dataRilascio input[type="text"] {
    width: 103px !important;
}

.documentoIdentita .numeroDocumento {
    width: 140px;
    margin-top: 7px;
}

    .documentoIdentita .numeroDocumento input[type="text"] {
        width: 140px !important;
        text-align: center;
    }


.documentoIdentita .enteRilascio {
    width: 386px;
    margin-top: 7px;
}



/***************************************************************/
/* RENDICONTAZIONI                                             */
/***************************************************************/

.rendicontazioni td {
    font-size: 18px;
}

.rendicontazioni table .tipoOperazione {
    font-size: 16px;
}

.rendicontazioni td.numerico {
    font-size: 14px;
}

.rendicontazioni table .dicituraIva {
    font-size: 16px;
    font-weight: normal;
}

.rendicontazioni-opzioni {
    margin-top: 14px;
}

    .rendicontazioni-opzioni input[type=text] {
        padding: 6px 10px;
        border-radius: 3px;
    }

.rendicontazioni-opzioni-data {
    float: left;
    margin-right: 10px;
}

.rendicontazioni-utenteDaRendicontare {
    float: left;
    width: 300px;
    margin-right: 20px;
}

    .rendicontazioni-utenteDaRendicontare input[type=text] {
        width: 290px;
        margin-right: 20px;
    }


.rendicontazioni-opzioni-comandi {
    padding-top: 20px;
}

.rendicontazioni-opzioni-data input[type=text] {
    padding: 6px;
    width: 100px !important;
}

.rendicontazioni-elenco {
    margin-top: 40px;
}

.rendicontazioni-totali {
    text-align: right;
    margin-top: 10px;
    padding: 10px 0px;
}

    .rendicontazioni-totali .totale-aggi {
        font-weight: bold;
        line-height: 28px;
        font-size: 46px !important;
    }

    .rendicontazioni-totali .totale {
        text-align: right;
        font-weight: bold;
        font-size: 21px !important;
        text-transform: lowercase !important;
        color: #37485A;
    }

    .rendicontazioni-totali .th-noBackground {
        background-color: White;
        border-top: 0;
        border-left-width: 0;
        border-bottom-width: 0;
    }

.rendicontazioni-totali-parziali .totale {
    text-align: right !important;
    font-weight: bold;
    font-size: 18px;
    text-transform: lowercase !important;
}


/***************************************************************/
/* ARCHIVIO PAGAMENTI                                          */
/***************************************************************/

.archivioPagamenti .elementoDiRicerca {
    margin-right: 4px;
    float: left;
}

    .archivioPagamenti .elementoDiRicerca input {
        min-height: 21px;
    }

.archivioPagamenti .elementoDiRicercaDiFineRiga {
    float: none !important;
}


.archivioPagamenti .ricercaCodicepagamento input {
    width: 200px;
}

.archivioPagamenti .ricercaClientePagamento input {
    width: 300px;
}

.archivioPagamenti .ricercaBillerPagamento input {
    width: 300px;
}

.archivioPagamenti .definizioneParametriRicercaAvanzata {
    margin-top: 15px;
    margin-bottom: 15px;
    float: none;
}

.archivioPagamenti b {
    text-transform: none;
}

.archivioPagamenti .intervalloDiRicercaBollettini {
    float: left;
    width: 410px;
    margin-bottom: 15px;
}

    .archivioPagamenti .intervalloDiRicercaBollettini input[type="text"] {
        width: 100px !important;
        height: 36px;
        border: solid 4px inherit !important;
    }

.archivioPagamenti .elementoDiRicerca.dataEOra div {
    float: left;
    margin-right: 1px;
}

.archivioPagamenti .elementoDiRicerca.dataEOra .orario input[type="text"] {
    width: 40px !important;
    margin-right: 2px;
    padding: 2px 4px !important;
    font-weight: normal !important;
    font-size: 18px !important;
    text-align: center;
}

.archivioPagamenti .archivioPagamenti-chiaveDiRicerca {
    float: left;
    margin-right: 6px;
    margin-bottom: 20px;
}

    .archivioPagamenti .archivioPagamenti-chiaveDiRicerca input[type="text"] {
        height: 36px;
        width: 460px;
    }


.archivioPagamenti .comandi {
    overflow: auto;
    margin-bottom: 20px;
    width: 100%;
    height: 40px;
}


.archivioPagamenti .esitoPagamento {
    padding: 8px;
    border-radius: 2px;
    color: white;
    font-weight: bold;
    font-family: Calibri;
    font-size: 12px;
    float: left;
    margin-right: 10px;
    margin-bottom: 10px;
}

    .archivioPagamenti .esitoPagamento.pagato {
        padding: 8px;
        border-radius: 2px;
        color: white;
        font-weight: bold;
        font-family: Calibri;
        font-size: 12px;
        float: left;
        margin-right: 10px;
        margin-bottom: 10px;
        background-color: #1AB394 !important;
    }

    .archivioPagamenti .esitoPagamento.avviato {
        background-color: #ffd800;
    }

    .archivioPagamenti .esitoPagamento.fallito {
        background-color: #ED5565;
    }

.tooltip-top-sf-custom .tooltip-text {
    left: 320% !important;
}

.archivioPagamenti .causale {
    max-width: 250px;
    font-size: 12px;
}

.archivioPagamenti .modalitaPagamento {
    text-align: left;
    width: 100px !important;
    font-weight: bold;
    float:left;
}

/***************************************************************/
/* ARCHIVIO CLIENTI                                            */
/***************************************************************/

.archivioClienti b {
    text-transform: none !important
}

.archivioClienti .intervalloDiRicerca div {
    float: left;
    margin-right: 4px;
}

.archivioClienti .comandi {
    margin-top: 0px !important;
    padding-top: 31px;
    margin-bottom: 30px;
    float: left;
}

.archivioClienti #opzioniDiRicerca {
    padding-bottom: 10px;
    padding-top: 11px;
    float: left;
    height: 50px;
    margin-right: 4px;
}

    .archivioClienti #opzioniDiRicerca input[type="text"] {
        height: 37px !important;
    }


.archivioClienti .cliente-denominazione {
    font-size: 14px;
}

/***********************************************************/
/*    PAGO PA                                              */
/***********************************************************/

.datiPagamento-codiceABarreOQrCode input[type=text] {
    border: solid 3px #1ab394;
    border-left-width: 14px;
    padding: 10px 6px;
    margin-bottom: 20px;
}



/***********************************************************/
/*    TRIBUTI                                              */
/***********************************************************/

#tributo {
    padding-left: 30px;
    background-color: white;
    opacity: 0.8;
}

    #tributo .datiPagamento {
        width: 540px;
    }

    #tributo .comandi {
        width: 300px;
        overflow: auto;
        float: left;
    }

        #tributo .comandi input {
            padding: 10px 40px 26px 40px;
        }

    #tributo input[type="text"] {
        width: 100%;
        color: black;
    }

/***********************************************************/
/*    BONIFICI                                             */
/***********************************************************/
#bonifico .datiPagamento {
    width: 540px;
}

#bonifico input[type="text"] {
    width: 100%;
    color: black;
}

.datiPagamento-idCreditorePA {
    margin-top: 20px;
}

/***********************************************************/
/*    TASSE VEICOLI                                        */
/***********************************************************/

#tassaVeicolo {
    padding-left: 30px;
}

    #tassaVeicolo .datiPagamento {
        width: 550px;
    }

    #tassaVeicolo .comandi {
        width: 300px;
        overflow: auto;
        float: left;
    }

        #tassaVeicolo .comandi input {
            padding: 10px 40px 26px 40px;
        }

    #tassaVeicolo input[type="text"] {
        width: 100%;
        color: black;
    }

.datiPagamento-tipoVeicolo select {
    height: 42px;
    width: 100%;
}

.datiPagamento-tipoVeicolo {
    display: inline-block;
    width: 200px;
    margin-bottom: 20px;
}

.datiPagamento-targa {
    width: 170px;
    display: inline-block;
}

    .datiPagamento-targa input[type=text] {
        text-transform: uppercase;
    }

.datiPagamento-numeroTelaio {
    width: 172px;
    display: inline-block;
}

.datiPagamento-codiceFiscaleProprietario {
    display: inline-block;
    width: 100%;
}

.datiPagamento-idCreditorePA {
    margin-top: 20px;
}


/***********************************************************/
/*    PAGAMENTI GIA' EFFETTUATI                            */
/***********************************************************/

.pagamentoGiaEffettuato {
    padding-top: 20px;
}

    .pagamentoGiaEffettuato .megaNotifica {
        margin-bottom: 40px;
    }

    .pagamentoGiaEffettuato .btn {
        padding: 10px 30px 26px 30px !important;
    }


/***********************************************************/
/*    PRENOTAZIONE BOLLETTINI                              */
/***********************************************************/

.definizioneCodicePrenotazioneSepafin input[type=text],
.definizioneCodicePrenotazioneSepafin .textBox {
    margin-top: 12px !important;
    width: 480px !important;
    border: solid 3px #1E5E2E;
    border-left: solid 14px #1E5E2E !important;
    padding: 10px !important;
}

/***********************************************************/
/*    F24                                                  */
/***********************************************************/

.F24 {
    max-width: 1000px;
}

    .F24 b {
        font-weight: 900;
        font-size: 17px;
        color: #053948;
        letter-spacing: 0.7px;
    }

    .F24 .etichetta {
        font-size: 13px;
        font-weight: bold;
        text-transform: lowercase;
        color: #053948;
    }

    .F24 b .etichetta {
        font-weight: bold;
        font-size: 15px;
    }

    .F24 .codice-fiscale {
    }

    .F24 .contribuente input,
    .F24 .contribuente select,
    .F24 .coobligato input,
    .F24 .coobligato select,
    .F24 .motivazione-identificativo input {
        font-weight: bold;
        font-size: 18px;
        border: none;
        padding: 3px 10px !important;
        letter-spacing: 2.5px;
        text-transform: uppercase;
        color: black;
        border: solid 2px white !important;
        border-radius: 3px !important;
        text-align: left;
        background-color: white;
    }

    .F24 .motivazione-identificativo input {
        padding: 14px 6px !important;
    }

    .F24 .contribuente select {
        padding:0px 0px 4px 0px !important;
        height:34px !important;
    }

    .F24 .caratteri-distanziati {
        letter-spacing: 5px !important;
    }

    .F24 select {
        padding-top: 5px !important;
        padding-bottom: 7px !important;
    }


        .F24 input:focus,
        .F24 select:focus {
            border: solid 2px #053948 !important;
            border-radius: 3px !important;
        }


    .F24 .row {
        padding: 5px 0px;
    }

    .F24 fieldset {
        max-width: 1200px !important;
        background-color: #d4eff4 !important;
        padding: 0px 20px 20px 20px !important;
        overflow: auto;
        background: none;
        margin-bottom: 20px;
        border-radius: 4px !important;
        box-shadow: 0 3px 12px -1px rgba(7, 10, 25, 0.2), 0 22px 27px -20px rgba(7, 10, 25, 0.2);
    }

        .F24 fieldset legend {
            width: 1000px;
            font-size: 21px;
            font-weight: bolder;
            color: white;
            background-color: #8fd6e7;
            margin-left: -20px !important;
            padding: 5px 20px 5px 20px !important;
            text-transform: uppercase;
            border-top-left-radius: 4px !important;
            border-top-right-radius: 4px !important;
        }

    .F24 .contribuente-codice-fiscale {
        display: inline-block;
        margin-right: 16px;
        width: 500px;
    }

        .F24 .contribuente-codice-fiscale input {
            width: 300px;
            text-align: center;
        }

    .F24 .contribuente-codice-fiscale-header {
        width: 170px;
        display: inline-block;
    }

    .F24 .contribuente-codice-fiscale-body {
        width: 200px;
        display: inline-block;
    }

    .F24 .contribuente-codice-ufficio {
        display: inline-block;
        margin-right: 16px;
    }

        .F24 .contribuente-codice-ufficio input {
            width: 86px;
            text-align: center;
        }

    .F24 .contribuente-codice-atto {
        display: inline-block;
    }

        .F24 .contribuente-codice-atto input {
            width: 330px;
        }

/* DATI ANAGRAFICI CONTRIBUENTE*/
.contribuente-dati-anagrafici {
    overflow: auto;
    width: 100%;
}

    .contribuente-dati-anagrafici input {
        width: 100%;
    }

.contribuente-dati-anagrafici-header {
    width: 170px;
    vertical-align: top;
    float: left;
    padding-top:18px;
}

.contribuente-dati-anagrafici-body {
    padding-left: 4px;
    width: 780px;
    float: left;
}

    .contribuente-dati-anagrafici-body .denominazione {
        margin-bottom: 6px;
    }

    .contribuente-dati-anagrafici-body .cognomeORagioneSociale {
        display: inline-block;
        width: 422px;
        margin-right: 20px;
    }

    .contribuente-dati-anagrafici-body .nome {
        display: inline-block;
        width: 330px;
    }

        .contribuente-dati-anagrafici-body .nome input {
            display: inline-block;
            width: 340px;
        }

    .contribuente-dati-anagrafici-body .indirizzo {
        display: inline-block;
        width: 206px;
        margin-right: 40px;
    }

    .contribuente-dati-anagrafici-body .data-nascita {
        display: inline-block;
        width: 110px;
        margin-right: 30px;
    }

        .contribuente-dati-anagrafici-body .data-nascita input {
            display: inline-block;
            width: 134px !important;
            margin-right: 30px;
        }

    .contribuente-dati-anagrafici-body .sesso {
        display: inline-block;
        width: 26px;
        margin-right: 30px;
    }

        .contribuente-dati-anagrafici-body .sesso select {
            width: 48px;
            padding-left: 5px !important;
            padding-right: 0px !important;
        }

    .contribuente-dati-anagrafici-body .cap-nascita {
        display: inline-block;
        width: 80px;
        margin-right: 30px;
    }

        .contribuente-dati-anagrafici-body .cap-nascita input {
            width: 104px;
            padding: 5px 10px !important;
            text-align: center;
            font-size: 18px !important;
        }

     .contribuente-dati-anagrafici-body .nazione-nascita {
          display: inline-block;
          width: 128px;
          margin-right: 10px;
      }

        .contribuente-dati-anagrafici-body .nazione-nascita select {
            display: inline-block;
            margin-right: 40px;
            width: 120px;
            padding-left: 5px !important;
            padding-right: 0px !important;
        }

    .contribuente-dati-anagrafici-body .comune-nascita {
        display: inline-block;
        width: 250px;
        margin-right: 6px;
    }

        .contribuente-dati-anagrafici-body .comune-nascita select {
            width:441px;
        }

    .contribuente-dati-anagrafici-body .provincia-nascita {
        display: inline-block;
        width: 40px;
    }

        .contribuente-dati-anagrafici-body .provincia-nascita input {
            display: inline-block;
            width: 68px;
        }

.contribuente-domicilio-fiscale-indirizzo {
    width: 311px;
    display: inline-block;
    margin-right: 30px;
}

.contribuente-dati-anagrafici-alert {
    padding: 4px 10px;
    background-color: #35496a !important;
    margin-top: 3px;
    border-left: solid 10px #eb6c00;
    border-radius: 3px;
    color: white;
}

/*INFO COOBLIGATO */
.F24 .coobligato {
    margin-top: 14px;
    width: 100% !important;
    display: block;
    overflow: auto;
}

.F24 .coobligato-codice-fiscale {
    display: inline-block;
}

.F24 .coobligato-codice-fiscale-header {
    display: inline-block;
    width: 333px;
}

.F24 .coobligato-codice-fiscale-body {
    display: inline-block;
    vertical-align: top;
}

.F24 .coobligato-codice-fiscale input {
    width: 300px;
    text-align: center;
}

.F24 .coobligato-tipo {
    display: inline-block;
    float: right;
}

    .F24 .coobligato-tipo select {
        width: 280px !important;
    }

/*MOTIVO DEL PAGAMENTO*/

.motivazione input {
    font-weight: bold;
    font-size: 16px !important;
    border: none;
    text-align: center;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: black;
    border: solid 2px white !important;
    border-bottom: solid 2px #1A9AD5 !important;
    background-color: white;
    padding: 4px 3px !important;
}

.motivazione table th,
.motivazione table td {
    margin: 0px !important;
    padding: 5px 6px !important;
}

.motivazione table th {
    font-size: 12px;
    color: black;
}

.F24 .importo {
    padding-right: 2px;
    text-align: right !important;
}

.motivazione .sfondo-grigio {
    background-color: #f1f1f2;
    border-bottom: solid 1px #1A9AD5 !important;
    padding: 6px 12px;
}

    .motivazione .sfondo-grigio input {
        background-color: #f1f1f2;
        border-bottom: none !important;
        margin: 0px;
    }

fieldset.motivazione {
    border-bottom: solid 26px #8fd6e7 !important;
    padding-bottom: 0px;
}

.motivazione legend b {
    font-weight: bolder;
    border: none;
    font-size: 16px;
}

.motivazione-identificativo {
    float: right;
    margin-right:26px;
}

    .motivazione-identificativo input {
        width: 300px;
        font-size: 20px !important;
        padding: 16px 10px !important;
        text-align: center !important;
    }

.motivazione {
    max-width: 1000px;
    background-color: #d4eff4 !important;
}

    .motivazione table tr td {
        padding: 5px 8px;
    }

    .motivazione table tr {
        margin: 40px;
    }

.motivazione-identificativo input {
    height: 14px;
}

.motivazione-footer {
    float: right;
    background-color: #8fd6e7;
    width: 430px;
    padding: 2px 0px;
    margin-right: 18px;
}

.motivazione-footer-header {
    background-color: #8fd6e7;
    display: inline-block;
    color: white;
    font-size: 20px;
    text-transform: uppercase;
    font-weight: bold;
    width: 30px;
    letter-spacing: 1px;
    text-align: center;
    font-family: Calibri;
    padding: 2px 12px;
}

.motivazione-footer-body {
    width: 316px;
    text-align: right;
    background-color: #d4eff4;
    display: inline-block;
    float: right;
    height: 46px;
    margin: -2px -8px -2px;
    padding: 3px 15px;
}

    .motivazione-footer-body input {
        width: 100px;
        text-align: right;
    }

.F24 .notifica-note {
    border: none;
    width: 100%;
    font-family: Calibri;
    font-size: 15px;
    border: solid 1px #eaedf0;
    border-bottom: solid 6px #eaedf0;
    border-radius: 2px;
    font-weight: bold;
    letter-spacing: 0.5px;
}

    .F24 .notifica-note .nota {
        float: left;
        background-color: white;
        color: #1E5E2E;
        padding: 2px 14px;
        font-weight: bold;
        border-radius: 2px;
        margin-right: 10px;
        vertical-align: middle;
        margin-top: 8px;
        text-transform: uppercase;
        letter-spacing: 1px;
        font-size: 16px;
    }

    .F24 .notifica-note .descrizione {
        font-size: 15px;
        padding: 4px 6px;
    }

.F24 .quietanza-emailPerComunicarla.notifica-note {
    margin-top: 14px;
}

    .F24 .quietanza-emailPerComunicarla.notifica-note .nota {
        height: 100px;
    }

    .F24 .quietanza-emailPerComunicarla.notifica-note .descrizione {
        width: 700px;
    }

    .F24 .quietanza-emailPerComunicarla.notifica-note input {
        margin: 8px 0px 8px 0px;
        border-radius: 3px;
        width: 600px;
        padding: 8px 20px;
        font-size: 18px;
        color: black !important;
    }

#anteprimaPreScontrino {
    height: 540px !important;
}

#anteprimaPreScontrino .notifica-note {
    border: none;
    font-family: Calibri;
    font-size: 16px;
    border: solid 3px #eaedf0;
    border-radius: 2px;
    margin-bottom: 10px;
    color: black;
    padding: 5px;
}

    #anteprimaPreScontrino .notifica-note .nota {
        float: left;
        background-color: white;
        color: white;
        padding: 2px 14px;
        font-weight: bold;
        border: none;
        margin-right: 0px;
        vertical-align: middle;
        margin-top: 8px;
        text-transform: uppercase;
        letter-spacing: 1px;
        height: 60px;
    }

    #anteprimaPreScontrino .notifica-note .fa {
        color: #ff6500;
        font-size: 30px;
    }

#anteprimaPreScontrino iframe {
    width: 545px !important;
    height: 300px;
    padding: 0px;
    border: 6px solid #344657;
    border-radius: 3px;
    border-top: 26px solid #344657;
    box-shadow: 20px 20px 10px -1px rgba(7, 10, 25, 0.4), 0 22px 27px -20px rgba(7, 10, 25, 0.2);
}



/***********************************************************/
/*    SPID                                                 */
/***********************************************************/

#spid {
    max-width: 800px;
}

    .spid-processo-pagamento .notifica-note {
        border: none;
        font-family: Calibri;
        font-size: 15px;
        border: solid 1px #eaedf0;
        border-bottom: solid 6px #eaedf0;
        border-radius: 2px;
        margin-bottom: 20px;
    }

        .spid-processo-pagamento .notifica-note .nota {
            float: left;
            color: #1E5E2E;
            padding: 2px 14px;
            font-weight: bold;
            border-radius: 2px;
            margin-right: 10px;
            vertical-align: middle;
            margin-top: 10px;
            text-transform: uppercase;
            letter-spacing: 1px;
            font-size: 18px;
            height:110px;
        }

            .spid-processo-pagamento .notifica-note .nota .fa-exclamation-triangle {
                font-size: 40px;
                color: #ff6d00;
            }

            .spid-processo-pagamento .notifica-note .nota .descrizione ul {
                list-style: decimal;
            }

        .spid-processo-pagamento .notifica-note .descrizione {
            font-size: 16px;
            padding: 4px 6px;
            font-weight: 600;
        }

.spid-processo-pagamento .btn-primary {
    padding: 10px 40px 26px;
}


.spid-processo-pagamento #tipologiaProdotto .radioButtonEnfatizzato label {
    width: 261px;
    height: 200px;
}

.spid-uso-privato {
    height: 240px;
    width: 240px;
    background-image: url('../../../Common/Immagini/Infocert/spid_uso_privato.jpg') !important;
    background-size: contain;
    background-repeat: no-repeat;
    margin: -4px -5px -5px -12px;
}

.spid-uso-professionale {
    height: 240px;
    width: 240px;
    background-size: contain;
    background-repeat: no-repeat;
    background-image: url('../../../Common/Immagini/Infocert/spid_uso_professionale.jpg');
    margin: -4px -5px -5px -12px;
}


.spid-processo-pagamento .spid-istruzioni {
    border-radius: 8px;
    background-color: white;
    display: inline-block;
    padding: 26px 20px !important;
    position: fixed;
    top: 100px !important;
    right: 300px;
    z-index: 100;
    padding: 0px 10px;
    border: 6px solid #344657;
    border-radius: 5px;
    border-top: 30px solid #344657;
    box-shadow: 20px 20px 10px -1px rgba(7, 10, 25, 0.4), 0 22px 27px -20px rgba(7, 10, 25, 0.2);
    width: 400px;
    border: 10px solid #053948 !important;
    border-radius: 10px;
    background-color: white;
    font-size: 15px;
    height: 500px !important;
}


.spid-processo-pagamento b {
    font-size: 20px;
}

.informazioni-spid-anteprima {
    margin-top: 0px;
    margin-bottom:20px;
    border-top: 1px #e5e6e7 solid;
    padding-top: 6px;
}

    .informazioni-spid-anteprima div {
        margin-bottom: 2px;
    }

    .informazioni-spid-anteprima span {
        font-size: 24px;
    }

.informazioni-spid-anteprima-cf {
    font-size: 28px;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 5px !important;
}

.stato-servizio-infocert {
    padding: 3px 6px;
    border-radius: 3px;
    font-weight: bold;
    text-transform: uppercase;
    font-size: 9px !important;
    text-align: center;
    margin: auto;
    letter-spacing: 1px;
    max-width: 100px;
    color: white;
    text-overflow: ellipsis; /* IE, Safari (WebKit) */
    overflow: hidden; /* don't show excess chars */
    white-space: nowrap; /* force single line */
}

    /*PrenotazioneAvviata*/
    .stato-servizio-infocert.stato-1 {
        background-color: #ff5600;
        color: white;
    }

    /*Pagato*/
    .stato-servizio-infocert.stato-2,
    .stato-servizio-infocert.stato-4 {
        background-color: #1AB394;
        color: white;
    }

  
    /*Errore o Annullato*/
    .stato-servizio-infocert.stato-3,
    .stato-servizio-infocert.stato-5 {
        background-color: #ED5565;
        color: white;
    }




.prenotazione-codice {
    letter-spacing: 1px;
    font-size: 18px;
    color: #053a49;
    font-weight: bold;
    text-align: center;
}

/***********************************************************/
/*    CREDITORI                                            */
/***********************************************************/

.estremiPagamento-utilizzoInSepafin {
    font-size: 10px;
    font-weight: bold;
    text-transform: uppercase;
    padding: 3px 0px 3px 8px;
    text-shadow: none;
    line-height: 1;
    white-space: nowrap;
    text-align: center;
    border-top-left-radius: 4px !important;
    margin-right: 20px;
    border-radius: 4px;
    margin-right:20px;
}

    .estremiPagamento-utilizzoInSepafin i {
        font-size: 12px;
        padding: 5px;
        border-radius: 3px;
        float: left;
    }

    .estremiPagamento-utilizzoInSepafin.estremiPagamento-utilizzoInSepafin-ok i {
        background-color: #1ab394;
        color: white;
    }

    .estremiPagamento-utilizzoInSepafin.estremiPagamento-utilizzoInSepafin-ko i {
        background-color: #e3732f;
        color: white;
    }



.pagamenti-filtri-post-ricerca {
    float: left;
    width: 240px;
    position: fixed;
    top: 120px;
    left: 0px;
    background-color: white;
    padding: 20px;
    border-radius:6px;
    box-shadow: 10px 10px 10px -1px rgba(7, 10, 25, 0.4), 0 22px 27px -20px rgba(7, 10, 25, 0.2);
    z-index:1000;
}

.pagamenti-filtri-post-ricerca div {
    margin-bottom:10px;
}

.pagamenti-totali {
    position: relative;
    top: 0px;
    margin: auto;
}

.pagamenti-totali th {
    font-size: 18px !important;
    color: #37485A;
    text-align: right;
}

    .pagamenti-totali th b {
        text-transform:capitalize;
    }
/* ===== Bonifici (esperimento UI): icona (edificio bancario con moneta in Euro), banner placeholder, fit riga a 7 pulsanti ===== */
.macroCategorieBollettino { white-space: nowrap; }
.macroCategorieBollettino .radioButtonEnfatizzato label { white-space: normal; }
.macroCategorieBollettino #bonifici {
    background-image: url('../../../Common/Immagini/Bollettini/Icone/bonifici.svg');
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}
.macroCategorieBollettino input[type="radio"]:checked + label #bonifici {
    background-image: url('../../../Common/Immagini/Bollettini/Icone/bonifici.svg') !important;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}
.tipoBollettino-scelta .pagamento.pagamento_bonifico label {
    background-color: #34495E !important;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    margin-right: 0;
    border: solid 1px #e5e6e7 !important;
    font-size: 18px;
    padding-bottom: 190px !important;
    padding-right: 790px !important;
    cursor: default;
    color: white !important;
}
/* Bonifici fit width */
.macroCategorieBollettino .radioButtonEnfatizzato label { width: 126px !important; margin-right: 6px !important; }

/* Bonifici hover fix */
.macroCategorieBollettino .radioButtonEnfatizzato input[type="radio"] + label:hover { font-weight: normal !important; }

/* Bonifici checked fix */
.macroCategorieBollettino .radioButtonEnfatizzato input[type="radio"]:checked + label { font-weight: normal !important; }


/* Bonifici: centratura icona nel pulsante */
/* La casella dell'icona (.bollettinoGenerico, 98px) e' piu' larga dello spazio interno del
   pulsante dopo il restringimento a 126px (126 - 6 di bordo - 40 di padding = 80px): il
   'margin: 0 auto' si azzera, l'icona si appoggia a sinistra e finisce ~9px a destra del
   centro del testo. Riduco il padding orizzontale per farcela stare. */
.macroCategorieBollettino .radioButtonEnfatizzato input[type="radio"] + label { padding: 10px 6px !important; }

/* ============================================================================
   SERVIZI INFOCERT: SPID, PEC E FIRMA DIGITALE AFFIANCATI
   ----------------------------------------------------------------------------
   La riga dei tipi di pagamento non va a capo (il contenitore e' nowrap e
   scorre in orizzontale): perche' i tre servizi si vedano tutti insieme senza
   scorrere, stanno dentro la larghezza del pannello e hanno la stessa misura.
   Il banner largo dello SPID lascia quindi il posto al riquadro quadrato.

   Ogni servizio porta la propria grafica Infocert.
   ============================================================================ */

.tipoBollettino-scelta .pagamento.pagamento_spid_attivo label,
.tipoBollettino-scelta .pagamento.pagamento_spid_richiedi_attivazione label,
.tipoBollettino-scelta .pagamento.pagamento_pec_attivo label,
.tipoBollettino-scelta .pagamento.pagamento_pec_richiedi_attivazione label,
.tipoBollettino-scelta .pagamento.pagamento_firma_digitale_attivo label,
.tipoBollettino-scelta .pagamento.pagamento_firma_digitale_richiedi_attivazione label {
    box-sizing: border-box;
    display: inline-block;
    vertical-align: top;
    width: 290px;
    height: 230px;
    padding: 12px 14px !important;
    margin-right: 10px !important;
    white-space: normal;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    border: solid 1px #e5e6e7 !important;
    border-radius: 4px;
    font-size: 18px;
    color: #ffffff !important;
    cursor: pointer;
}

/* L'ultimo dei tre chiude la riga */
.tipoBollettino-scelta .pagamento.pagamento_firma_digitale_attivo label,
.tipoBollettino-scelta .pagamento.pagamento_firma_digitale_richiedi_attivazione label {
    margin-right: 0 !important;
}

/* Lo SPID porta la propria grafica: nel riquadro stretto entra la card, non il banner */
.tipoBollettino-scelta .pagamento.pagamento_spid_attivo label,
.tipoBollettino-scelta .pagamento.pagamento_spid_richiedi_attivazione label {
    background-image: url(../../../Common/Immagini/Infocert/spid_uso_privato.jpg);
}

.tipoBollettino-scelta .pagamento.pagamento_pec_attivo label,
.tipoBollettino-scelta .pagamento.pagamento_pec_richiedi_attivazione label {
    background-image: url(../../../Common/Immagini/Infocert/pec-infocert.png);
}

.tipoBollettino-scelta .pagamento.pagamento_firma_digitale_attivo label,
.tipoBollettino-scelta .pagamento.pagamento_firma_digitale_richiedi_attivazione label {
    background-image: url(../../../Common/Immagini/Infocert/firma-digitale-infocert.png);
}

/* Regge il fumetto dell'attivazione da chiedere */
.tipoBollettino-scelta .pagamento.pagamento_spid_richiedi_attivazione,
.tipoBollettino-scelta .pagamento.pagamento_pec_richiedi_attivazione,
.tipoBollettino-scelta .pagamento.pagamento_firma_digitale_richiedi_attivazione {
    position: relative;
}

/* Servizio non ancora attivo per il punto: il riquadro resta - e' il modo in cui
   lo SPID ha sempre annunciato se stesso - ma dice che va chiesto */
.tipoBollettino-scelta .pagamento.pagamento_spid_richiedi_attivazione::after,
.tipoBollettino-scelta .pagamento.pagamento_pec_richiedi_attivazione::after,
.tipoBollettino-scelta .pagamento.pagamento_firma_digitale_richiedi_attivazione::after {
    content: "RICHIEDI L'ATTIVAZIONE";
    position: absolute;
    left: 14px;
    top: 186px;
    padding: 4px 10px;
    background-color: rgba(0, 0, 0, 0.55);
    color: #ffffff;
    font-size: 11px;
    font-weight: bold;
    letter-spacing: 0.8px;
    border-radius: 10px;
    white-space: nowrap;
    pointer-events: none;
    z-index: 6;
}

#infoBase #tipologiaProdotto .immagineEtichetta {
    font-size: 30px;
}

.areeInfobase {
    margin-bottom: 30px;
}

#infoBase #tipologiaProdotto .selezioneTipoProdotto {
    width: 107px;
}

#tipologiaProdotto .radioButtonEnfatizzato label {
    margin-right: 20px;
    height: 100px;
    font-size: 16px;
    text-align: center;
    display: inline-block;
}

#localitaInvio #nazioni {
    float: left;
    margin-right: 5px;
}


#localitaInvio #locationField input {
    /*background-image: url("http://maps.google.com/mapfiles/ms/icons/red.png");*/
    background-image: url("https://developers.google.com/maps/documentation/javascript/images/default-marker.png");
    background-position: left top;
    background-repeat: no-repeat;
    background-size: contain;
    padding-left: 45px !important;
    height: 40px;
    width: 700px;
}

.inserimentoLocalitaManuale input {
    height: 40px;
    font-size: 16px;
    padding-left: 8px;
}


.inserimentoLocalitaManuale .inserimentoLocalitaManuale_capManuale {
    width: 250px;
}

.inserimentoLocalitaManuale .inserimentoLocalitaManuale_comuneManuale {
    width: 450px;
}

#dimensioniPeso .altreInfo {
    float: left;
    margin-right: 5px;
}

    #dimensioniPeso .altreInfo input[type=text] {
        font-size: 22px !important;
    }

    #dimensioniPeso .altreInfo .infoDimensioni {
        width: 125px;
        text-align: right;
        padding-right: 33px !important;
        padding-left: 23px;
    }

    #dimensioniPeso .altreInfo .infoPeso {
        width: 125px;
        padding-right: 18px !important;
        padding-left: 23px;
        text-align: right;
    }

.altreInfo .asterisco {
    font-size: 16px !important;
}

.selezioneCasellaPostale {
    margin-top: 15px;
    display: inline-block;
    width: 830px;
    height: 46px;
    padding-top: 10px;
}

.selezioneCasellaPostale-etichetta {
    float: left;
    margin-right: 50px;
}

.selezioneCasellaPostale-scelta {
}

.nextStep {
    float: left;
    margin-right: 5px;
}

#selezioneProdotto .linkButtonEnfatizzato #anteprimaProdotto {
    margin-bottom: 10px;
    max-width: 1050px;
    display: inline-block;
}

#selezioneProdotto .selezioneProdotto-opzioni {
    border: solid 1px #D9D9D9;
    border-radius: 4px;
    margin-top: 6px;
    margin-bottom: 20px;
    padding: 10px;
}

    #selezioneProdotto .selezioneProdotto-opzioni .icona {
        padding: 6px;
        font-weight: bold;
    }

#selezioneProdotto #logoCorriere {
}

#selezioneProdotto #infoAnteprima {
    float: left;
    padding-left: 150px;
}

#selezioneProdotto #nomeProdottoListino {
    width: 700px;
}

#selezioneProdotto #nomeProdotto {
    font-size: 25px;
}

#selezioneProdotto #nomeListino {
    color: #BBBBBB;
}

#selezioneProdotto #descrizioneProdotto {
    width: 700px;
    font-weight: normal;
    font-size: 14px;
    color: #003A48;
}

#selezioneProdotto #caratteristicheProdotto {
    margin-top: 8px;
    width: 700px;
    font-weight: normal;
    font-size: 14px;
    color: #535362;
}

#selezioneProdotto #prezzoSpedizione {
    float: right;
    font-size: 40px;
    margin-top: 20px;
}


.logo-corriere {
    background-repeat: no-repeat;
    background-position: top left;
}

.destinazione-directa {
    background-image: url("../../../Common/Immagini/LoghiGestori/LoghiRidotti/logo_directa.png");
}

.destinazione-crono {
    background-image: url(../../../Common/Immagini/LoghiGestori/LoghiRidotti/logo_crono.png)
}

.destinazione-ups {
    background-image: url("../../../Common/Immagini/LoghiGestori/LoghiRidotti/logo_ups.png");
}

.destinazione-sda {
    background-image: url("../../../Common/Immagini/LoghiGestori/LoghiRidotti/logo_sda.png");
}

.destinazione-poste {
    background-image: url("../../../Common/Immagini/LoghiGestori/logo_posteItaliane.png");
}

.destinazione-bartolini {
    background-image: url("../../../Common/Immagini/LoghiGestori/logo_bartolini.png");
}

#selezioneProdotto .popUpDefinizioneCodiceSpedizione {
    z-index: 1000;
    padding: 30px 50px 30px 50px;
    margin: auto;
    overflow: auto;
    background-color: white;
    width: 820px;
    height: 670px;
    margin-top: 100px;
    border: solid 1px #003A48;
    border-radius: 8px;
}

#selezioneProdotto .sfondoPopUpDefinizioneCodiceSpedizione {
    background-image: url('/Common/Immagini/sfondoEsitoOperazione.png');
    width: 100%;
    height: 100%;
    padding-bottom: 20px;
    z-index: 110;
    overflow: auto;
}



#selezioneProdotto .popUpDefinizioneCodiceSpedizione .etichettaCodiceSped {
    font-weight: bold;
    color: #003A48;
    font-size: 25px;
}

#selezioneProdotto .popUpDefinizioneCodiceSpedizione .comandi {
    margin-top: 40px;
}

#selezioneProdotto .popUpDefinizioneCodiceSpedizione .chiusuraDefinizioneCodiceSpedizione {
    float: right;
    margin-top: -30px;
}

#selezioneProdotto .popUpDefinizioneCodiceSpedizione .infoUtiliDefinizioneCodiceSpedizione {
    margin-top: 20px;
    margin-bottom: 30px;
    color: #878787;
    font-size: 18px;
}

#selezioneProdotto .popUpDefinizioneCodiceSpedizione input[type="text"] {
    border: solid 3px #1AB394;
    border-left: 20px #1AB394 solid;
    width: 550px;
    padding: 24px 20px !important;
    font-size: 26px;
    height: 35px;
    float: left;
    margin: 10px 0px 10px 0px;
}

#selezioneProdotto .popUpDefinizioneCodiceSpedizione img {
    width: 700px;
    box-shadow: 4px 6px 4px #888888;
}

#selezioneProdotto .popUpDefinizioneCodiceSpedizione input[type=submit] {
    height: 54px !important;
    width: 150px;
    margin-top: 9px;
}



.rigaAnteprima {
    width: 100%;
    min-height: 100px;
    border-bottom: solid 1px #D9D9D9;
    display: inline-block;
    padding: 20px;
}

#anteprima {
    width: 100%;
    font-family: Calibri;
    margin-bottom: 20px;
    color: #003946;
}

    #anteprima .valore {
        font-weight: bold;
        font-size: 30px;
        color: #535353;
    }

    #anteprima .etichettaAnteprima {
        color: #0846b6;
        font-weight: bold;
        font-size: 18px;
    }

    #anteprima .etichettaAnteprima-alert {
        font-size: 18px;
        font-weight: bold;
        color: #FF7F00;
    }


    #anteprima #prezzoFinale {
        float: right;
        font-size: 54px;
        font-weight: bold;
        margin-top: 20px;
    }

    #anteprima #infoProdotto {
        float: left;
    }

        #anteprima #infoProdotto #nomeProdotto {
            font-size: 46px;
            font-weight: bold;
            margin-bottom: -18px;
        }

        #anteprima #infoProdotto #caratteristicheProdotto {
            font-size: 28px;
            font-weight: bold;
            margin-bottom: -18px;
        }

        #anteprima #infoProdotto #nomeListino {
            font-size: 20px;
        }

    #anteprima #altreInfoSpedizione {
        font-size: 20px;
    }

    #anteprima .altreInfoSpedizione .pesoSpedizione {
        float: left;
        margin-right: 20px;
        width: 150px;
        min-height: 20px;
    }

    #anteprima .altreInfoSpedizione .dimensioniSpedizione {
        float: left;
        width: 200px;
        min-height: 20px;
        margin-right: 108px;
    }

    #anteprima .altreInfoSpedizione .contenuto {
        float: left;
        width: 300px;
        min-height: 20px;
        font-size: 16px;
    }

    #anteprima .altreInfoSpedizione .costiAggiuntivi {
        float: right;
        text-align: right;
        width: 150px;
        min-height: 20px;
    }

        #anteprima .altreInfoSpedizione .costiAggiuntivi .chiarimento {
            margin-top: -6px;
            font-size: 12px;
        }




    #anteprima .infoSecondarie {
        margin-top: 10px;
        color: #878787;
        font-size: 18px;
    }

    #anteprima #estremiSpedizione .estremo {
        float: left;
        min-height: 160px !important;
        width: 480px;
    }

        #anteprima #estremiSpedizione .estremo .ragioneSociale {
            font-size: 26px;
            font-weight: bold;
            margin-bottom: -6px;
        }

        #anteprima #estremiSpedizione .estremo .localita {
            font-size: 20px;
        }

/******************************************************************/
/*      ESITO POSTALIZZAZIONE                                     */
/******************************************************************/
#esitoPostalizzazione {
    position: relative;
}

    #esitoPostalizzazione > .notifica {
        height: 220px;
        margin-bottom: 40px;
        font-size: 32px;
    }


    #esitoPostalizzazione .popUpStampaFileSpedizione {
        position: absolute;
        padding: 15px 20px;
        background-color: white;
        border: solid 1px #003A48;
        border-radius: 8px;
    }

.popUpStampaFileSpedizione .fa-exclamation-triangle {
    color: #9a004f;
    font-size: 48px;
    height: 30px;
    float: left;
    margin-right: 10px;
}

/*#esitoPostalizzazione .popUpStampaFileSpedizione .icona a{
        padding:10px 30px;
    }*/



#esitoPostalizzazione .popUpStampaFileSpedizione.ricevutaRacc {
    z-index: 1000;
    top: 0px;
    right: 100px;
    width: 500px;
    height: 420px;
}

#esitoPostalizzazione .popUpStampaFileSpedizione.affrancatura {
    z-index: 1001;
    top: 45px;
    right: 40px;
    width: 460px;
    height: 290px;
}

#esitoPostalizzazione .popUpStampaFileSpedizione.letteraDiVettura {
    z-index: 1000;
    top: 100px;
    right: 250px;
    width: 500px;
    height: 450px;
    position: fixed;
}

#esitoPostalizzazione .popUpStampaFileSpedizione.moduloAccettazionePacchi {
    z-index: 1000;
    top: 300px;
    right: 50px;
    width: 500px;
    height: 420px;
    position: fixed;
}




#esitoPostalizzazione .popUpStampaFileSpedizione .etichettaStampa {
    font-weight: bold;
    color: #323232;
    font-size: 25px;
}

#esitoPostalizzazione .popUpStampaFileSpedizione .chiusuraStampa {
    float: right;
    margin-top: -30px;
}

#esitoPostalizzazione .popUpStampaFileSpedizione .suggerimentoStampa {
    width: 405px;
    margin: 10px 0px 5px 0px;
}

/******************************************************************/
/*    DEFINIZIONE ESTREMI                                         */
/******************************************************************/
.definizioneEstremi {
    width: 100%;
}

    .definizioneEstremi .definizioneEstremi-estremi {
        width: 100%;
        padding-top: 10px;
        overflow: auto;
    }

    .definizioneEstremi .definizioneEstremi-mittente {
        margin-right: 20px;
        float: left;
        overflow: auto;
    }

    .definizioneEstremi .definizioneEstremi-destinatario {
        float: left;
        overflow: auto;
    }

    .definizioneEstremi .definizioneEstremi-comandi {
        margin-top: 20px;
        float: none;
        height: 50px;
        width: 100%;
    }


.estremoSpedizione {
    width: 534px;
    font-family: Calibri;
    border: solid 1px #f1f1f1;
    color: #003A48;
    border-radius: 10px;
    padding: 20px 10px 50px 20px;
    font-size: 18px;
}

    .estremoSpedizione input[type=text],
    .estremoSpedizione select {
        padding: 6px 8px;
        width: 100%;
    }

    .estremoSpedizione .textBox {
        font-size: 20px !important;
    }

    .estremoSpedizione select {
        height: 33px;
    }

    .estremoSpedizione ::-webkit-input-placeholder {
        color: #37485A !important;
        font-weight: normal !important;
        letter-spacing: 0.3px;
    }

    .estremoSpedizione ::-moz-placeholder {
        color: #37485A !important;
        font-weight: normal !important;
        letter-spacing: 0.3px;
    }
    /* firefox 19+ */
    .estremoSpedizione :-ms-input-placeholder {
        color: #37485A !important;
        font-weight: normal !important;
        letter-spacing: 0.3px;
    }
    /* ie */
    .estremoSpedizione input:-moz-placeholder {
        color: #37485A !important;
        font-weight: normal !important;
        letter-spacing: 0.3px;
    }



    .estremoSpedizione .estremo-sezione {
        padding: 20px 0px 10px 0px;
    }

        .estremoSpedizione .estremo-sezione .asterisco {
            font-size: 14px !important;
        }

    .estremoSpedizione label {
        font-weight: bold !important;
        font-size: 14px;
    }

    .estremoSpedizione .etichetta {
        font-weight: bold;
        font-size: 28px;
        color: #003A48;
        margin-bottom: 6px;
    }

        .estremoSpedizione .etichetta .asterisco {
            font-size: 22px !important;
        }

    /* Estremo editabile per nuovo inserimento*/
    .estremoSpedizione .denominazione input[type=text] {
        width: 402px;
    }

    .estremoSpedizione .denominazione .btn.btn-primary {
        padding: 5px 24px 5px 24px !important;
        margin-left: -4px !important;
        border-top-left-radius: 0px !important;
        border-bottom-left-radius: 0px !important;
    }



    /*.estremospedizione .denominazione {
        margin-bottom:10px;
    }*/

    /* Indirizzo */
    .estremoSpedizione .indirizzo {
        width: 100%;
        height: 30px;
    }

    .estremoSpedizione .indirizzo-via {
        float: left;
        padding-right: 3px;
        width: 400px;
    }

    .estremoSpedizione .indirizzo-civico {
        float: left;
        width: 90px;
    }

    /* Localita */
    .estremoSpedizione .localita {
        width: 100%;
        margin-top: 30px;
        height: 50px;
    }

    .estremoSpedizione .localita-nazione {
        width: 120px;
        float: left;
        padding-right: 3px;
    }

    .estremoSpedizione .localita-stato {
        width: 80px;
        float: left;
        padding-right: 3px;
    }

    .estremoSpedizione .localita-comune {
        width: 282px;
        float: left;
        padding-right: 3px;
    }

    .estremoSpedizione .localita-cap {
        width: 90px;
        float: left;
        padding-right: 3px;
    }

    /* Altre Info */
    .estremoSpedizione .altreInfo {
        margin-top: 30px;
        width: 100%;
        height: 130px;
    }

    .estremoSpedizione .altreInfo-infoAggiuntive {
        width: 488px;
        margin-bottom: 10px;
    }

    .estremoSpedizione .altreInfo-infoEdificio {
        width: 488px;
    }


    /* Contatti */
    .estremoSpedizione .contatti {
        width: 100%;
        height: 50px;
    }

    .estremoSpedizione .contatti-telefono {
        float: left;
        width: 160px;
        padding-right: 3px;
    }

    .estremoSpedizione .contatti-email {
        float: left;
        width: 328px;
    }




/* Estremo visualizzato dopo averlo selezionato tra quelli già esitenti*/

.estremo-selezionato {
    margin-top: 26px;
    padding-left: 16px;
    font-size: 28px;
    font-weight: normal;
    color: #37485A;
    white-space: nowrap;
    width: 500px;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 26px;
    border-left: 6px solid #1ab394;
    min-height: 150px;
}

    .estremo-selezionato input[type=text]:focus {
        font-weight: bold;
    }

    .estremo-selezionato span {
        width: 100%;
    }

    .estremo-selezionato .estremo-selezionato-denominazione {
        width: 300px;
        color: #003A48;
    }

        .estremo-selezionato .estremo-selezionato-denominazione span {
            font-size: 32px;
        }

    .estremo-selezionato .estremo-selezionato-indirizzo {
        margin-top: 4px;
        font-size: 30px;
    }

        .estremo-selezionato .estremo-selezionato-indirizzo span {
            font-size: 24px;
        }

    .estremo-selezionato .estremo-selezionato-localita {
        font-size: 24px;
    }

    .estremo-selezionato .estremo-selezionato-altreInfo {
        font-size: 20px;
    }

    .estremo-selezionato .estremo-selezionato-contatti {
        margin-top: 14px;
        font-size: 20px;
    }


/**********************************************************/
/*        SERVIZI ACCESSORI                               */
/**********************************************************/

#serviziAccessori .serviziAccessori-elenco {
    width: 100%;
    overflow: auto;
    margin-bottom: 20px;
}

.serviziAccessori {
    font-family: 'Segoe UI';
    width: 100%;
}

    .serviziAccessori .servizio {
        float: left;
        margin: 0px 30px 30px 0px;
        padding: 20px;
        border: solid #ebebeb 1px;
        border-radius: 3px;
    }

        .serviziAccessori .servizio .nome {
            font-weight: bold;
            font-size: 25px;
            font-weight: bold;
            margin-bottom: 10px;
        }

        .serviziAccessori .servizio .descrizione {
            font-size: 16px;
            margin-bottom: 10px;
        }

        .serviziAccessori .servizio .altreInfo {
        }

        .serviziAccessori .servizio .parametri {
            border-top: solid 1px #f1f1f1;
            padding-top: 20px;
            margin-top: 20px;
            text-align: right;
        }

        .serviziAccessori .servizio .importo input[type=text] {
            width: 120px;
            font-size: 20px;
            text-align: right;
            font-weight: bold;
            float: left;
            margin-right: 10px;
            padding-right: 25px !important;
        }

        .serviziAccessori .servizio .importo .valuta {
            font-weight: bold;
            font-size: 30px;
            float: left;
            right: 294px;
            top: 1px;
        }



        .serviziAccessori .servizio.assicurata {
            width: 450px;
        }

        .serviziAccessori .servizio.contrassegno {
            width: 450px;
        }

.popUpNuovaPostalizzazioneSemplificata {
    width: 1200px !important;
}

#visualizzazioneDatiSpedizione .logo-corriere {
    background-repeat: no-repeat;
    background-position: top 60px left 60px
}

#visualizzazioneSpedizione .rigaVisualizzazione {
    width: 95%;
    min-height: 100px;
    border-bottom: solid 1px #BBBBBB;
    display: inline-block;
    padding: 12px;
    margin-left: 20px;
    color: #3b4d60;
}

#visualizzazioneSpedizione .infoSecondoPiano {
    color: #BBBBBB
}

#visualizzazioneSpedizione {
    box-shadow: 4px 4px 8px #888888;
    border: solid 1px #BBBBBB;
}

    #visualizzazioneSpedizione #barraFunzioniAltreInfo {
        background-color: #3b4d60;
        color: white;
        height: 40px;
        /*padding: 5px;*/
        font-size: 26px;
    }

        #visualizzazioneSpedizione #barraFunzioniAltreInfo .etichetta {
            color: #1a9ad5;
            display: initial;
        }


        #visualizzazioneSpedizione #barraFunzioniAltreInfo div {
            float: left;
            width: 240px;
        }

        #visualizzazioneSpedizione #barraFunzioniAltreInfo #tipoProdotto {
            font-weight: bold;
            text-align: center;
        }

        #visualizzazioneSpedizione #barraFunzioniAltreInfo #lblPesoSpedizione {
            font-weight: bold;
        }

        #visualizzazioneSpedizione #barraFunzioniAltreInfo #funzioniSuSpedizione {
            float: right;
            text-align: right;
            padding: 0px 5px 0px 5px;
            margin-top: -4px;
            width:auto;
        }

        #visualizzazioneSpedizione #barraFunzioniAltreInfo #funzioniSuSpedizione div{
            width: auto;
            margin-right:8px;
        }


            #visualizzazioneSpedizione #barraFunzioniAltreInfo #funzioniSuSpedizione .icona-fix a:focus {
                background-color: white !important;
                color: #1691d9 !important;
            }


    #visualizzazioneSpedizione #infoPrincipali #infoProdottoPostale {
        font-weight: bold;
        font-size: 20px;
        float: left;
        margin-left: 200px;
    }

        #visualizzazioneSpedizione #infoPrincipali #infoProdottoPostale #nomeProdotto {
            font-size: 27px;
        }

        #visualizzazioneSpedizione #infoPrincipali #infoProdottoPostale .codiciDellaSpedizione div{
            float:none !important;
        }


        #visualizzazioneSpedizione #infoPrincipali #infoProdottoPostale .codiciDellaSpedizione #codiceSpedizioneSecondario{
            font-size:14px;
        }
        
        
        #visualizzazioneSpedizione #infoPrincipali #infoProdottoPostale #numeroSpedizione {
            width: 120px;
        }

        #visualizzazioneSpedizione #infoPrincipali #infoProdottoPostale #codiceENumeroSpedizione div {
           float:left;
           margin-right: 5px;
        }



    #visualizzazioneSpedizione #infoPrincipali #destionazioneSpedizione {
        float: right;
        font-size: 23px;
        font-weight: bold;
        text-align: right;
    }



        #visualizzazioneSpedizione #infoPrincipali #destionazioneSpedizione #indirizzoDestionazioneSpedizione {
            font-size: 16px;
            font-weight: normal;
        }

        #visualizzazioneSpedizione #infoPrincipali #destionazioneSpedizione #nazioneDestionazioneSpedizione {
            text-transform: uppercase;
        }

    #visualizzazioneSpedizione #dettagliSpedizione .ragionesociale {
        font-size: 18px;
        font-weight: bold;
    }

    #visualizzazioneSpedizione #dettagliSpedizione .residenza {
        font-size: 16px;
    }

    #visualizzazioneSpedizione #dettagliSpedizione .etichetta {
        color: #0079B8;
        font-size: 16px;
        font-weight: bold;
    }

    #visualizzazioneSpedizione #dettagliSpedizione #NoteContenutoSpedizione {
        width: 20%;
    } 
    
    #visualizzazioneSpedizione #dettagliSpedizione .elementoDettaglio {
        width: 37%;
        display: inline-block;
        float: left;
        padding: 5px 30px 5px 10px
    }

    #visualizzazioneSpedizione #infoCosti .etichetta {
        color: #FF7F00;
        font-size: 16px;
        font-weight: bold;
    }

    #visualizzazioneSpedizione #infoCosti .elementoInfoCosti {
        font-size: 30px;
        font-weight: bold;
        float: left;
        padding: 5px 30px 5px 10px
    }

    #visualizzazioneSpedizione #infoCosti #costoFinaleSpedizione {
        float: right;
        font-size: 55px;
        text-align: right;
        padding:0px;
    }


/*************************************************/
/*              IDENTIFICAZIONE STUDENTE         */
/*************************************************/

.identificazioneStudente
{
    width:550px;
    min-height:200px;
}

.identificazioneStudente .inserimentoCodicePan {
    margin-bottom: 10px;
    display:inline-block;
        
}

.identificazioneStudente .inserimentoCodicePan .etichettaPan {
    color: #323232;
    font-weight:bold;
}

.identificazioneStudente .inserimentoCodicePan .ricerca
{
    position:absolute;
    padding-top:10px;
}

.identificazioneStudente .inserimentoCodicePan .ricerca > a {
    padding: 10px 20px;
}

.identificazioneStudente .inserimentoCodicePan .ricerca span {
    font-size:18px;
}
    
    
    
.identificazioneStudente .inserimentoCodicePan input[type=text] {
    width: 400px;
    padding: 5px 10px 5px 10px;
    height: 44px;
    float: left;
    font-size: 20px;
}



.identificazioneStudente .infoConto{
    font-size:18px;
    font-weight:bold;
    padding:10px;
    margin-bottom:20px;
}

.identificazioneStudente .infoConto .etichettaInfoConto {
    color: #35496A;
    float: left;
    margin-right: 5px;
}



.identificazioneStudente .comandi div{
    float:left;
    margin-right:20px;
}

.identificazioneStudente .pulsanteComandi > a {
    font-size: 18px;
    padding: 10px 30px !important;
}

.identificazioneStudente .pulsanteComandi span {
    font-size: 18px;
}


.stampaRicevutaSaldo{
    width:500px;
    height:400px;
}
/*************************************************/
/*          ARCHIVIO RICARICHE MENSA             */
/*************************************************/
.definizioneParametriRicerca {
    margin-top: 20px;
    margin-bottom: 20px;
}

    .definizioneParametriRicerca .comandi {
        padding-top:18px;
    }

.definizioneParametriRicerca .intervalloDiRicerca div {
    float: left;
    margin-right: 4px;
}

.elencoRicaricheMensa .tooltip-top-sf-custom .tooltip-text {
    left: 320% !important;
}


.elencoRicaricheMensa .esitoPagamento {
    padding: 8px;
    border-radius: 2px;
    font-weight: bold;
    font-family: Calibri;
    font-size: 12px;
    float: left;
    margin-right: 10px;
}

.elencoRicaricheMensa .effettuata {
    background-color: #1AB394 !important;
}

.elencoRicaricheMensa .fallita {
    background-color: #ED5565 !important;
}

.elencoRicaricheMensa .id{
    width:55px;
}

.elencoRicaricheMensa .funzioni {
    width: 40px;
}

.elencoRicaricheMensa .esito {
    width: 140px;
}

.elencoRicaricheMensa .cliente {
    width: 220px;
}

.elencoRicaricheMensa .dataRicarica {
    width: 160px;
}

.elencoRicaricheMensa .costoRicarica {
    width: 100px;
}

.elencoRicaricheMensa .campoNumerico {
    text-align: right;
    padding-right:10px;
}

.elencoRicaricheMensa .inEvidenza {
    font-weight: bold;
    font-size:14px;
}

.infoInRilievoArchivioRicaricheMensa #infoInRilievo {
    position: fixed;
    z-index: 102;
    margin: -150px 0px 0px 48px;
}

.stampaRicevutaRicaricaMensa{
    width:550px;
    height:400px;
}

/*************************************************/
/*          ESITO RICARICHE MENSA                */
/*************************************************/

.esitoRicaricaMensa .fa-check {
    font-size: 42px;
    color: #5cb85c;
    margin-right: 12px;
}

.esitoRicaricaMensa .fa-exclamation-triangle {
    font-size: 28px;
    color: #ff5600;
    margin-right: 12px;
}

.ricevutaRicaricaMensa {
    position: absolute;
    top: 220px;
    right: 80px;
    z-index: 10000;
}

.esitoRicaricaMensa .section h1 {
    font-size:20px;
    color:#5cb85c;
    margin-bottom:0px;
}

.esitoRicaricaMensa .importoRicaricato {
    margin-top: 40px;
    width: 100%;
    height: 100px;
}

.esitoRicaricaMensa b {
    font-size: 18px;
    color: #0094ff;
}

.esitoRicaricaMensa .importoRicaricato .importo {
    font-size: 30px;
}


/********************************************/
/**          SCELTA RICARICA               **/
/********************************************/
/*.processoRicarica .ajax__tab_body ajax__scroll_none {
    min-height: 600px;
    overflow: hidden;
}*/
#datiPagamento {
    font-family: Calibri;
    color: #2c3f50;
    max-width: 1075px;
}

    #datiPagamento #categoriaRicarica {
        float: left;
        margin-right: 25px;
    }

    #datiPagamento fieldset {
        padding-bottom: 0px !important;
        margin-bottom: 10px !important;
    }

    #datiPagamento legend {
        margin-bottom: 6px;
    }



    #datiPagamento #categoriaRicarica .elenco {
        padding: 4px 0px 0px 0px;
    }

    #datiPagamento #categoriaRicarica select {
        font-size: 22px;
        font-weight: bold;
        font-family: Calibri;
        text-transform: none;
        color: #2c3f50;
        border-top-right-radius: 20px;
        border-bottom-right-radius: 20px;
    }

    #datiPagamento #categoriaRicarica #categorie label {
        float: left;
        font-size: 14px;
        margin-right: 30px;
        margin-bottom: 20px;
        text-align: center;
        cursor: pointer;
    }

    #datiPagamento #categoriaRicarica #categorie .immagineEtichetta {
        font-size: 30px;
    }


    #datiPagamento .opzioneRicarica {
        width: 107px;
    }

    #datiPagamento #tipoRicarica {
        padding: 20px 6px 6px 6px;
    }

    #datiPagamento #tipoRicarica {
        height: 180px;
    }

        #datiPagamento #tipoRicarica label {
            font-size: 24px;
            margin-right: 15px;
            cursor: pointer;
            width: 125px;
        }

#selezioneUtente #pulsantePaga {
    float: left;
    margin-right: 10px;
    height: 50px;
}

#selezioneUtente .pulsanteProcedi {
    height: 50px !important;
    width: 300px;
}

#selezioneUtente .pulsanteProcedi-margin {
    margin-top: 42px;
}



#selezioneUtente .alertRicaricaNonAnnullabile {
    height: 25px;
    width: 520px;
    float: left
}

.rigaDati {
    display: block;
    margin-bottom: 15px;
}

#fornitori {
    width: 100%;
}

    #fornitori .elenco {
        padding-top: 10px;
    }

    #fornitori img {
        padding-left: 10px;
        object-fit: contain;
    }

        #fornitori img:hover {
            cursor: pointer;
        }

    #fornitori .fornitoreSelezionabile {
        /*width:110px;*/
    }

    #fornitori input {
        float: left;
        padding-right: 50px;
    }

    #fornitori label {
        float: left;
        font-size: 14px;
        margin-right: 30px;
        margin-bottom: 20px;
        text-align: center;
        width: 140px;
        height: 140px;
    }


#tagli .elenco {
}


#tagli .taglioSelezionabile {
    /*width:90px;*/
    text-align: center;
}

#tagli label {
    float: right;
    margin-bottom: 18px;
    vertical-align: top;
    margin-right: 30px;
}



#tagli .taglioSelezionabile:hover {
    cursor: pointer;
}


#tagli .taglioSelezionabile .importo {
    font-size: 24px;
}

#tagli .taglioSelezionabile .altreInfo {
    font-size: 14px;
}

#tagli .taglioSelezionabile .altreInfoHidden {
    height: 0px;
}

.numeroTelefono input[type="text"], .numeroTelefono input[type="text"]:focus {
    font-weight: bold;
    text-align: center;
    border: solid #1AB394 3px !important;
    height: 50px;
    width: 300px;
    border-radius: 2px;

    font-size:26px !important;
    margin: 2px 20px 20px 4px;
    letter-spacing:2px;

}


.numeroTelefono fieldset {
    float: left;
    margin-right: 40px;
    width: 340px;
}


/********************************************/
/**         ANTEPRIMA                      **/
/********************************************/

#datiAnteprima {
    width: 570px;
    height: 230px;
}

#supplier {
    float: left;
    margin-right: 20px;
    padding-top: 12px;
}

    #supplier #logoSupplier {
        float: left;
        margin-right: 5px;
    }

.infoSecondarie {
    font-size: 15px;
}

#supplier #nomeSupplier {
    font-size: 25px
}

#taglio {
    text-align: right;
    font-weight: bold;
}

    #taglio #importoTaglio {
        font-size: 45px;
    }

    #taglio #nomeTaglio {
        font-size: 16px;
    }

#infoBase {
    margin-bottom: 35px;
}

#etichettaNumeroTelefono {
    font-size: 16px;
    color: #1A9AD5;
}

#numeroTelefono {
    font-size: 30px;
}

#comandi {
    margin-top: 20px;
}

/********************************************/
/**         ESITO                          **/
/********************************************/
#datiEsitoRicarica {
    width: 500px;
    min-height: 200px;
    margin-right:150px;
    float:left;
}

    #datiEsitoRicarica .supplier {
        float: left;
        margin-right: 20px;
    }

        #datiEsitoRicarica .supplier .logoSupplier {
            float: left;
            margin-right: 5px;
        }

    #datiEsitoRicarica .infoSecondarie {
        font-size: 18px;
    }

    #datiEsitoRicarica .supplier .nomeSupplier {
        font-size: 25px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 250px;
    }

    #datiEsitoRicarica .taglio {
        text-align: right;
        font-weight: bold;
    }

        #datiEsitoRicarica .taglio .importoTaglio {
            padding: 10px 10px 0px 0px;
            font-size: 60px;
        }

        #datiEsitoRicarica .taglio .nomeTaglio {
            font-size: 10px;
        }



    #datiEsitoRicarica .infoBase {
        width: 600px;
        min-height: 80px;
        margin-bottom: 35px;
    }



    #datiEsitoRicarica .etichettaNumeroTelefono {
        font-size: 16px;
        color: #1A9AD5;
    }

    #datiEsitoRicarica .numeroTelefono {
        font-size: 36px;
    }

.comandiRicarica {
    margin-top: 310px !important;
}


.ricevutaRicarica {
    border-radius: 8px;
    margin-top: -120px;
    background-color: white;
    width: 500px;
    display: inline-block;
    border: 1px solid;
    padding: 20px 20px 20px 50px;
    position: absolute;
    margin-left: 100px;
}


.esitoPagamento .fa-check {
    font-size: 42px;
    color: #5cb85c;
    margin-right: 12px;
}

.esitoPagamento .fa-exclamation-triangle {
    font-size: 28px;
    color: #ff5600;
    margin-right: 12px;
}

.esitoPagamento .notifica {
    font-size: 22px;
}
@charset "UTF-8";

/*!
Animate.css - http://daneden.me/animate
Licensed under the MIT license

Copyright (c) 2013 Daniel Eden

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
*/

.animated {
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    z-index: 100;
}

.animated.infinite {
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
}

.animated.hinge {
    -webkit-animation-duration: 2s;
    animation-duration: 2s;
}

@-webkit-keyframes bounce {
    0%, 20%, 50%, 80%, 100% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }

    40% {
        -webkit-transform: translateY(-30px);
        transform: translateY(-30px);
    }

    60% {
        -webkit-transform: translateY(-15px);
        transform: translateY(-15px);
    }
}

@keyframes bounce {
    0%, 20%, 50%, 80%, 100% {
        -webkit-transform: translateY(0);
        -ms-transform: translateY(0);
        transform: translateY(0);
    }

    40% {
        -webkit-transform: translateY(-30px);
        -ms-transform: translateY(-30px);
        transform: translateY(-30px);
    }

    60% {
        -webkit-transform: translateY(-15px);
        -ms-transform: translateY(-15px);
        transform: translateY(-15px);
    }
}

.bounce {
    -webkit-animation-name: bounce;
    animation-name: bounce;
}

@-webkit-keyframes flash {
    0%, 50%, 100% {
        opacity: 1;
    }

    25%, 75% {
        opacity: 0;
    }
}

@keyframes flash {
    0%, 50%, 100% {
        opacity: 1;
    }

    25%, 75% {
        opacity: 0;
    }
}

.flash {
    -webkit-animation-name: flash;
    animation-name: flash;
}

/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */

@-webkit-keyframes pulse {
    0% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }

    50% {
        -webkit-transform: scale(1.1);
        transform: scale(1.1);
    }

    100% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }
}

@keyframes pulse {
    0% {
        -webkit-transform: scale(1);
        -ms-transform: scale(1);
        transform: scale(1);
    }

    50% {
        -webkit-transform: scale(1.1);
        -ms-transform: scale(1.1);
        transform: scale(1.1);
    }

    100% {
        -webkit-transform: scale(1);
        -ms-transform: scale(1);
        transform: scale(1);
    }
}

.pulse {
    -webkit-animation-name: pulse;
    animation-name: pulse;
}

@-webkit-keyframes rubberBand {
    0% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }

    30% {
        -webkit-transform: scaleX(1.25) scaleY(0.75);
        transform: scaleX(1.25) scaleY(0.75);
    }

    40% {
        -webkit-transform: scaleX(0.75) scaleY(1.25);
        transform: scaleX(0.75) scaleY(1.25);
    }

    60% {
        -webkit-transform: scaleX(1.15) scaleY(0.85);
        transform: scaleX(1.15) scaleY(0.85);
    }

    100% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }
}

@keyframes rubberBand {
    0% {
        -webkit-transform: scale(1);
        -ms-transform: scale(1);
        transform: scale(1);
    }

    30% {
        -webkit-transform: scaleX(1.25) scaleY(0.75);
        -ms-transform: scaleX(1.25) scaleY(0.75);
        transform: scaleX(1.25) scaleY(0.75);
    }

    40% {
        -webkit-transform: scaleX(0.75) scaleY(1.25);
        -ms-transform: scaleX(0.75) scaleY(1.25);
        transform: scaleX(0.75) scaleY(1.25);
    }

    60% {
        -webkit-transform: scaleX(1.15) scaleY(0.85);
        -ms-transform: scaleX(1.15) scaleY(0.85);
        transform: scaleX(1.15) scaleY(0.85);
    }

    100% {
        -webkit-transform: scale(1);
        -ms-transform: scale(1);
        transform: scale(1);
    }
}

.rubberBand {
    -webkit-animation-name: rubberBand;
    animation-name: rubberBand;
}

@-webkit-keyframes shake {
    0%, 100% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }

    10%, 30%, 50%, 70%, 90% {
        -webkit-transform: translateX(-10px);
        transform: translateX(-10px);
    }

    20%, 40%, 60%, 80% {
        -webkit-transform: translateX(10px);
        transform: translateX(10px);
    }
}

@keyframes shake {
    0%, 100% {
        -webkit-transform: translateX(0);
        -ms-transform: translateX(0);
        transform: translateX(0);
    }

    10%, 30%, 50%, 70%, 90% {
        -webkit-transform: translateX(-10px);
        -ms-transform: translateX(-10px);
        transform: translateX(-10px);
    }

    20%, 40%, 60%, 80% {
        -webkit-transform: translateX(10px);
        -ms-transform: translateX(10px);
        transform: translateX(10px);
    }
}

.shake {
    -webkit-animation-name: shake;
    animation-name: shake;
}

@-webkit-keyframes swing {
    20% {
        -webkit-transform: rotate(15deg);
        transform: rotate(15deg);
    }

    40% {
        -webkit-transform: rotate(-10deg);
        transform: rotate(-10deg);
    }

    60% {
        -webkit-transform: rotate(5deg);
        transform: rotate(5deg);
    }

    80% {
        -webkit-transform: rotate(-5deg);
        transform: rotate(-5deg);
    }

    100% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
}

@keyframes swing {
    20% {
        -webkit-transform: rotate(15deg);
        -ms-transform: rotate(15deg);
        transform: rotate(15deg);
    }

    40% {
        -webkit-transform: rotate(-10deg);
        -ms-transform: rotate(-10deg);
        transform: rotate(-10deg);
    }

    60% {
        -webkit-transform: rotate(5deg);
        -ms-transform: rotate(5deg);
        transform: rotate(5deg);
    }

    80% {
        -webkit-transform: rotate(-5deg);
        -ms-transform: rotate(-5deg);
        transform: rotate(-5deg);
    }

    100% {
        -webkit-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        transform: rotate(0deg);
    }
}

.swing {
    -webkit-transform-origin: top center;
    -ms-transform-origin: top center;
    transform-origin: top center;
    -webkit-animation-name: swing;
    animation-name: swing;
}

@-webkit-keyframes tada {
    0% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }

    10%, 20% {
        -webkit-transform: scale(0.9) rotate(-3deg);
        transform: scale(0.9) rotate(-3deg);
    }

    30%, 50%, 70%, 90% {
        -webkit-transform: scale(1.1) rotate(3deg);
        transform: scale(1.1) rotate(3deg);
    }

    40%, 60%, 80% {
        -webkit-transform: scale(1.1) rotate(-3deg);
        transform: scale(1.1) rotate(-3deg);
    }

    100% {
        -webkit-transform: scale(1) rotate(0);
        transform: scale(1) rotate(0);
    }
}

@keyframes tada {
    0% {
        -webkit-transform: scale(1);
        -ms-transform: scale(1);
        transform: scale(1);
    }

    10%, 20% {
        -webkit-transform: scale(0.9) rotate(-3deg);
        -ms-transform: scale(0.9) rotate(-3deg);
        transform: scale(0.9) rotate(-3deg);
    }

    30%, 50%, 70%, 90% {
        -webkit-transform: scale(1.1) rotate(3deg);
        -ms-transform: scale(1.1) rotate(3deg);
        transform: scale(1.1) rotate(3deg);
    }

    40%, 60%, 80% {
        -webkit-transform: scale(1.1) rotate(-3deg);
        -ms-transform: scale(1.1) rotate(-3deg);
        transform: scale(1.1) rotate(-3deg);
    }

    100% {
        -webkit-transform: scale(1) rotate(0);
        -ms-transform: scale(1) rotate(0);
        transform: scale(1) rotate(0);
    }
}

.tada {
    -webkit-animation-name: tada;
    animation-name: tada;
}

/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */

@-webkit-keyframes wobble {
    0% {
        -webkit-transform: translateX(0%);
        transform: translateX(0%);
    }

    15% {
        -webkit-transform: translateX(-25%) rotate(-5deg);
        transform: translateX(-25%) rotate(-5deg);
    }

    30% {
        -webkit-transform: translateX(20%) rotate(3deg);
        transform: translateX(20%) rotate(3deg);
    }

    45% {
        -webkit-transform: translateX(-15%) rotate(-3deg);
        transform: translateX(-15%) rotate(-3deg);
    }

    60% {
        -webkit-transform: translateX(10%) rotate(2deg);
        transform: translateX(10%) rotate(2deg);
    }

    75% {
        -webkit-transform: translateX(-5%) rotate(-1deg);
        transform: translateX(-5%) rotate(-1deg);
    }

    100% {
        -webkit-transform: translateX(0%);
        transform: translateX(0%);
    }
}

@keyframes wobble {
    0% {
        -webkit-transform: translateX(0%);
        -ms-transform: translateX(0%);
        transform: translateX(0%);
    }

    15% {
        -webkit-transform: translateX(-25%) rotate(-5deg);
        -ms-transform: translateX(-25%) rotate(-5deg);
        transform: translateX(-25%) rotate(-5deg);
    }

    30% {
        -webkit-transform: translateX(20%) rotate(3deg);
        -ms-transform: translateX(20%) rotate(3deg);
        transform: translateX(20%) rotate(3deg);
    }

    45% {
        -webkit-transform: translateX(-15%) rotate(-3deg);
        -ms-transform: translateX(-15%) rotate(-3deg);
        transform: translateX(-15%) rotate(-3deg);
    }

    60% {
        -webkit-transform: translateX(10%) rotate(2deg);
        -ms-transform: translateX(10%) rotate(2deg);
        transform: translateX(10%) rotate(2deg);
    }

    75% {
        -webkit-transform: translateX(-5%) rotate(-1deg);
        -ms-transform: translateX(-5%) rotate(-1deg);
        transform: translateX(-5%) rotate(-1deg);
    }

    100% {
        -webkit-transform: translateX(0%);
        -ms-transform: translateX(0%);
        transform: translateX(0%);
    }
}

.wobble {
    -webkit-animation-name: wobble;
    animation-name: wobble;
}

@-webkit-keyframes bounceIn {
    0% {
        opacity: 0;
        -webkit-transform: scale(.3);
        transform: scale(.3);
    }

    50% {
        opacity: 1;
        -webkit-transform: scale(1.05);
        transform: scale(1.05);
    }

    70% {
        -webkit-transform: scale(.9);
        transform: scale(.9);
    }

    100% {
        opacity: 1;
        -webkit-transform: scale(1);
        transform: scale(1);
    }
}

@keyframes bounceIn {
    0% {
        opacity: 0;
        -webkit-transform: scale(.3);
        -ms-transform: scale(.3);
        transform: scale(.3);
    }

    50% {
        opacity: 1;
        -webkit-transform: scale(1.05);
        -ms-transform: scale(1.05);
        transform: scale(1.05);
    }

    70% {
        -webkit-transform: scale(.9);
        -ms-transform: scale(.9);
        transform: scale(.9);
    }

    100% {
        opacity: 1;
        -webkit-transform: scale(1);
        -ms-transform: scale(1);
        transform: scale(1);
    }
}

.bounceIn {
    -webkit-animation-name: bounceIn;
    animation-name: bounceIn;
}

@-webkit-keyframes bounceInDown {
    0% {
        opacity: 0;
        -webkit-transform: translateY(-2000px);
        transform: translateY(-2000px);
    }

    60% {
        opacity: 1;
        -webkit-transform: translateY(30px);
        transform: translateY(30px);
    }

    80% {
        -webkit-transform: translateY(-10px);
        transform: translateY(-10px);
    }

    100% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }
}

@keyframes bounceInDown {
    0% {
        opacity: 0;
        -webkit-transform: translateY(-2000px);
        -ms-transform: translateY(-2000px);
        transform: translateY(-2000px);
    }

    60% {
        opacity: 1;
        -webkit-transform: translateY(30px);
        -ms-transform: translateY(30px);
        transform: translateY(30px);
    }

    80% {
        -webkit-transform: translateY(-10px);
        -ms-transform: translateY(-10px);
        transform: translateY(-10px);
    }

    100% {
        -webkit-transform: translateY(0);
        -ms-transform: translateY(0);
        transform: translateY(0);
    }
}

.bounceInDown {
    -webkit-animation-name: bounceInDown;
    animation-name: bounceInDown;
}

@-webkit-keyframes bounceInLeft {
    0% {
        opacity: 0;
        -webkit-transform: translateX(-2000px);
        transform: translateX(-2000px);
    }

    60% {
        opacity: 1;
        -webkit-transform: translateX(30px);
        transform: translateX(30px);
    }

    80% {
        -webkit-transform: translateX(-10px);
        transform: translateX(-10px);
    }

    100% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }
}

@keyframes bounceInLeft {
    0% {
        opacity: 0;
        -webkit-transform: translateX(-2000px);
        -ms-transform: translateX(-2000px);
        transform: translateX(-2000px);
    }

    60% {
        opacity: 1;
        -webkit-transform: translateX(30px);
        -ms-transform: translateX(30px);
        transform: translateX(30px);
    }

    80% {
        -webkit-transform: translateX(-10px);
        -ms-transform: translateX(-10px);
        transform: translateX(-10px);
    }

    100% {
        -webkit-transform: translateX(0);
        -ms-transform: translateX(0);
        transform: translateX(0);
    }
}

.bounceInLeft {
    -webkit-animation-name: bounceInLeft;
    animation-name: bounceInLeft;
}

@-webkit-keyframes bounceInRight {
    0% {
        opacity: 0;
        -webkit-transform: translateX(2000px);
        transform: translateX(2000px);
    }

    60% {
        opacity: 1;
        -webkit-transform: translateX(-30px);
        transform: translateX(-30px);
    }

    80% {
        -webkit-transform: translateX(10px);
        transform: translateX(10px);
    }

    100% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }
}

@keyframes bounceInRight {
    0% {
        opacity: 0;
        -webkit-transform: translateX(2000px);
        -ms-transform: translateX(2000px);
        transform: translateX(2000px);
    }

    60% {
        opacity: 1;
        -webkit-transform: translateX(-30px);
        -ms-transform: translateX(-30px);
        transform: translateX(-30px);
    }

    80% {
        -webkit-transform: translateX(10px);
        -ms-transform: translateX(10px);
        transform: translateX(10px);
    }

    100% {
        -webkit-transform: translateX(0);
        -ms-transform: translateX(0);
        transform: translateX(0);
    }
}

.bounceInRight {
    -webkit-animation-name: bounceInRight;
    animation-name: bounceInRight;
}

@-webkit-keyframes bounceInUp {
    0% {
        opacity: 0;
        -webkit-transform: translateY(2000px);
        transform: translateY(2000px);
    }

    60% {
        opacity: 1;
        -webkit-transform: translateY(-30px);
        transform: translateY(-30px);
    }

    80% {
        -webkit-transform: translateY(10px);
        transform: translateY(10px);
    }

    100% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }
}

@keyframes bounceInUp {
    0% {
        opacity: 0;
        -webkit-transform: translateY(2000px);
        -ms-transform: translateY(2000px);
        transform: translateY(2000px);
    }

    60% {
        opacity: 1;
        -webkit-transform: translateY(-30px);
        -ms-transform: translateY(-30px);
        transform: translateY(-30px);
    }

    80% {
        -webkit-transform: translateY(10px);
        -ms-transform: translateY(10px);
        transform: translateY(10px);
    }

    100% {
        -webkit-transform: translateY(0);
        -ms-transform: translateY(0);
        transform: translateY(0);
    }
}

.bounceInUp {
    -webkit-animation-name: bounceInUp;
    animation-name: bounceInUp;
}

@-webkit-keyframes bounceOut {
    0% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }

    25% {
        -webkit-transform: scale(.95);
        transform: scale(.95);
    }

    50% {
        opacity: 1;
        -webkit-transform: scale(1.1);
        transform: scale(1.1);
    }

    100% {
        opacity: 0;
        -webkit-transform: scale(.3);
        transform: scale(.3);
    }
}

@keyframes bounceOut {
    0% {
        -webkit-transform: scale(1);
        -ms-transform: scale(1);
        transform: scale(1);
    }

    25% {
        -webkit-transform: scale(.95);
        -ms-transform: scale(.95);
        transform: scale(.95);
    }

    50% {
        opacity: 1;
        -webkit-transform: scale(1.1);
        -ms-transform: scale(1.1);
        transform: scale(1.1);
    }

    100% {
        opacity: 0;
        -webkit-transform: scale(.3);
        -ms-transform: scale(.3);
        transform: scale(.3);
    }
}

.bounceOut {
    -webkit-animation-name: bounceOut;
    animation-name: bounceOut;
}

@-webkit-keyframes bounceOutDown {
    0% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }

    20% {
        opacity: 1;
        -webkit-transform: translateY(-20px);
        transform: translateY(-20px);
    }

    100% {
        opacity: 0;
        -webkit-transform: translateY(2000px);
        transform: translateY(2000px);
    }
}

@keyframes bounceOutDown {
    0% {
        -webkit-transform: translateY(0);
        -ms-transform: translateY(0);
        transform: translateY(0);
    }

    20% {
        opacity: 1;
        -webkit-transform: translateY(-20px);
        -ms-transform: translateY(-20px);
        transform: translateY(-20px);
    }

    100% {
        opacity: 0;
        -webkit-transform: translateY(2000px);
        -ms-transform: translateY(2000px);
        transform: translateY(2000px);
    }
}

.bounceOutDown {
    -webkit-animation-name: bounceOutDown;
    animation-name: bounceOutDown;
}

@-webkit-keyframes bounceOutLeft {
    0% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }

    20% {
        opacity: 1;
        -webkit-transform: translateX(20px);
        transform: translateX(20px);
    }

    100% {
        opacity: 0;
        -webkit-transform: translateX(-2000px);
        transform: translateX(-2000px);
    }
}

@keyframes bounceOutLeft {
    0% {
        -webkit-transform: translateX(0);
        -ms-transform: translateX(0);
        transform: translateX(0);
    }

    20% {
        opacity: 1;
        -webkit-transform: translateX(20px);
        -ms-transform: translateX(20px);
        transform: translateX(20px);
    }

    100% {
        opacity: 0;
        -webkit-transform: translateX(-2000px);
        -ms-transform: translateX(-2000px);
        transform: translateX(-2000px);
    }
}

.bounceOutLeft {
    -webkit-animation-name: bounceOutLeft;
    animation-name: bounceOutLeft;
}

@-webkit-keyframes bounceOutRight {
    0% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }

    20% {
        opacity: 1;
        -webkit-transform: translateX(-20px);
        transform: translateX(-20px);
    }

    100% {
        opacity: 0;
        -webkit-transform: translateX(2000px);
        transform: translateX(2000px);
    }
}

@keyframes bounceOutRight {
    0% {
        -webkit-transform: translateX(0);
        -ms-transform: translateX(0);
        transform: translateX(0);
    }

    20% {
        opacity: 1;
        -webkit-transform: translateX(-20px);
        -ms-transform: translateX(-20px);
        transform: translateX(-20px);
    }

    100% {
        opacity: 0;
        -webkit-transform: translateX(2000px);
        -ms-transform: translateX(2000px);
        transform: translateX(2000px);
    }
}

.bounceOutRight {
    -webkit-animation-name: bounceOutRight;
    animation-name: bounceOutRight;
}

@-webkit-keyframes bounceOutUp {
    0% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }

    20% {
        opacity: 1;
        -webkit-transform: translateY(20px);
        transform: translateY(20px);
    }

    100% {
        opacity: 0;
        -webkit-transform: translateY(-2000px);
        transform: translateY(-2000px);
    }
}

@keyframes bounceOutUp {
    0% {
        -webkit-transform: translateY(0);
        -ms-transform: translateY(0);
        transform: translateY(0);
    }

    20% {
        opacity: 1;
        -webkit-transform: translateY(20px);
        -ms-transform: translateY(20px);
        transform: translateY(20px);
    }

    100% {
        opacity: 0;
        -webkit-transform: translateY(-2000px);
        -ms-transform: translateY(-2000px);
        transform: translateY(-2000px);
    }
}

.bounceOutUp {
    -webkit-animation-name: bounceOutUp;
    animation-name: bounceOutUp;
}

@-webkit-keyframes fadeIn {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes fadeIn {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

.fadeIn {
    -webkit-animation-name: fadeIn;
    animation-name: fadeIn;
}

@-webkit-keyframes fadeInDown {
    0% {
        opacity: 0;
        -webkit-transform: translateY(-20px);
        transform: translateY(-20px);
    }

    100% {
        opacity: 1;
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }
}

@keyframes fadeInDown {
    0% {
        opacity: 0;
        -webkit-transform: translateY(-20px);
        -ms-transform: translateY(-20px);
        transform: translateY(-20px);
    }

    100% {
        opacity: 1;
        -webkit-transform: translateY(0);
        -ms-transform: translateY(0);
        transform: translateY(0);
    }
}

.fadeInDown {
    -webkit-animation-name: fadeInDown;
    animation-name: fadeInDown;
}

@-webkit-keyframes fadeInDownBig {
    0% {
        opacity: 0;
        -webkit-transform: translateY(-2000px);
        transform: translateY(-2000px);
    }

    100% {
        opacity: 1;
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }
}

@keyframes fadeInDownBig {
    0% {
        opacity: 0;
        -webkit-transform: translateY(-2000px);
        -ms-transform: translateY(-2000px);
        transform: translateY(-2000px);
    }

    100% {
        opacity: 1;
        -webkit-transform: translateY(0);
        -ms-transform: translateY(0);
        transform: translateY(0);
    }
}

.fadeInDownBig {
    -webkit-animation-name: fadeInDownBig;
    animation-name: fadeInDownBig;
}

@-webkit-keyframes fadeInLeft {
    0% {
        opacity: 0;
        -webkit-transform: translateX(-20px);
        transform: translateX(-20px);
    }

    100% {
        opacity: 1;
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }
}

@keyframes fadeInLeft {
    0% {
        opacity: 0;
        -webkit-transform: translateX(-20px);
        -ms-transform: translateX(-20px);
        transform: translateX(-20px);
    }

    100% {
        opacity: 1;
        -webkit-transform: translateX(0);
        -ms-transform: translateX(0);
        transform: translateX(0);
    }
}

.fadeInLeft {
    -webkit-animation-name: fadeInLeft;
    animation-name: fadeInLeft;
}

@-webkit-keyframes fadeInLeftBig {
    0% {
        opacity: 0;
        -webkit-transform: translateX(-2000px);
        transform: translateX(-2000px);
    }

    100% {
        opacity: 1;
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }
}

@keyframes fadeInLeftBig {
    0% {
        opacity: 0;
        -webkit-transform: translateX(-2000px);
        -ms-transform: translateX(-2000px);
        transform: translateX(-2000px);
    }

    100% {
        opacity: 1;
        -webkit-transform: translateX(0);
        -ms-transform: translateX(0);
        transform: translateX(0);
    }
}

.fadeInLeftBig {
    -webkit-animation-name: fadeInLeftBig;
    animation-name: fadeInLeftBig;
}

@-webkit-keyframes fadeInRight {
    0% {
        opacity: 0;
        -webkit-transform: translateX(20px);
        transform: translateX(20px);
    }

    100% {
        opacity: 1;
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }
}

@keyframes fadeInRight {
    0% {
        opacity: 0;
        -webkit-transform: translateX(40px);
        -ms-transform: translateX(40px);
        transform: translateX(40px);
    }

    100% {
        opacity: 1;
        -webkit-transform: translateX(0);
        -ms-transform: translateX(0);
        transform: translateX(0);
    }
}

.fadeInRight {
    -webkit-animation-name: fadeInRight;
    animation-name: fadeInRight;
}

@-webkit-keyframes fadeInRightBig {
    0% {
        opacity: 0;
        -webkit-transform: translateX(2000px);
        transform: translateX(2000px);
    }

    100% {
        opacity: 1;
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }
}

@keyframes fadeInRightBig {
    0% {
        opacity: 0;
        -webkit-transform: translateX(2000px);
        -ms-transform: translateX(2000px);
        transform: translateX(2000px);
    }

    100% {
        opacity: 1;
        -webkit-transform: translateX(0);
        -ms-transform: translateX(0);
        transform: translateX(0);
    }
}

.fadeInRightBig {
    -webkit-animation-name: fadeInRightBig;
    animation-name: fadeInRightBig;
}

@-webkit-keyframes fadeInUp {
    0% {
        opacity: 0;
        -webkit-transform: translateY(20px);
        transform: translateY(20px);
    }

    100% {
        opacity: 1;
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }
}

@keyframes fadeInUp {
    0% {
        opacity: 0;
        -webkit-transform: translateY(20px);
        -ms-transform: translateY(20px);
        transform: translateY(20px);
    }

    100% {
        opacity: 1;
        -webkit-transform: translateY(0);
        -ms-transform: translateY(0);
        transform: translateY(0);
    }
}

.fadeInUp {
    -webkit-animation-name: fadeInUp;
    animation-name: fadeInUp;
}

@-webkit-keyframes fadeInUpBig {
    0% {
        opacity: 0;
        -webkit-transform: translateY(2000px);
        transform: translateY(2000px);
    }

    100% {
        opacity: 1;
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }
}

@keyframes fadeInUpBig {
    0% {
        opacity: 0;
        -webkit-transform: translateY(2000px);
        -ms-transform: translateY(2000px);
        transform: translateY(2000px);
    }

    100% {
        opacity: 1;
        -webkit-transform: translateY(0);
        -ms-transform: translateY(0);
        transform: translateY(0);
    }
}

.fadeInUpBig {
    -webkit-animation-name: fadeInUpBig;
    animation-name: fadeInUpBig;
}

@-webkit-keyframes fadeOut {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

@keyframes fadeOut {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

.fadeOut {
    -webkit-animation-name: fadeOut;
    animation-name: fadeOut;
}

@-webkit-keyframes fadeOutDown {
    0% {
        opacity: 1;
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }

    100% {
        opacity: 0;
        -webkit-transform: translateY(20px);
        transform: translateY(20px);
    }
}

@keyframes fadeOutDown {
    0% {
        opacity: 1;
        -webkit-transform: translateY(0);
        -ms-transform: translateY(0);
        transform: translateY(0);
    }

    100% {
        opacity: 0;
        -webkit-transform: translateY(20px);
        -ms-transform: translateY(20px);
        transform: translateY(20px);
    }
}

.fadeOutDown {
    -webkit-animation-name: fadeOutDown;
    animation-name: fadeOutDown;
}

@-webkit-keyframes fadeOutDownBig {
    0% {
        opacity: 1;
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }

    100% {
        opacity: 0;
        -webkit-transform: translateY(2000px);
        transform: translateY(2000px);
    }
}

@keyframes fadeOutDownBig {
    0% {
        opacity: 1;
        -webkit-transform: translateY(0);
        -ms-transform: translateY(0);
        transform: translateY(0);
    }

    100% {
        opacity: 0;
        -webkit-transform: translateY(2000px);
        -ms-transform: translateY(2000px);
        transform: translateY(2000px);
    }
}

.fadeOutDownBig {
    -webkit-animation-name: fadeOutDownBig;
    animation-name: fadeOutDownBig;
}

@-webkit-keyframes fadeOutLeft {
    0% {
        opacity: 1;
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }

    100% {
        opacity: 0;
        -webkit-transform: translateX(-20px);
        transform: translateX(-20px);
    }
}

@keyframes fadeOutLeft {
    0% {
        opacity: 1;
        -webkit-transform: translateX(0);
        -ms-transform: translateX(0);
        transform: translateX(0);
    }

    100% {
        opacity: 0;
        -webkit-transform: translateX(-20px);
        -ms-transform: translateX(-20px);
        transform: translateX(-20px);
    }
}

.fadeOutLeft {
    -webkit-animation-name: fadeOutLeft;
    animation-name: fadeOutLeft;
}

@-webkit-keyframes fadeOutLeftBig {
    0% {
        opacity: 1;
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }

    100% {
        opacity: 0;
        -webkit-transform: translateX(-2000px);
        transform: translateX(-2000px);
    }
}

@keyframes fadeOutLeftBig {
    0% {
        opacity: 1;
        -webkit-transform: translateX(0);
        -ms-transform: translateX(0);
        transform: translateX(0);
    }

    100% {
        opacity: 0;
        -webkit-transform: translateX(-2000px);
        -ms-transform: translateX(-2000px);
        transform: translateX(-2000px);
    }
}

.fadeOutLeftBig {
    -webkit-animation-name: fadeOutLeftBig;
    animation-name: fadeOutLeftBig;
}

@-webkit-keyframes fadeOutRight {
    0% {
        opacity: 1;
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }

    100% {
        opacity: 0;
        -webkit-transform: translateX(20px);
        transform: translateX(20px);
    }
}

@keyframes fadeOutRight {
    0% {
        opacity: 1;
        -webkit-transform: translateX(0);
        -ms-transform: translateX(0);
        transform: translateX(0);
    }

    100% {
        opacity: 0;
        -webkit-transform: translateX(20px);
        -ms-transform: translateX(20px);
        transform: translateX(20px);
    }
}

.fadeOutRight {
    -webkit-animation-name: fadeOutRight;
    animation-name: fadeOutRight;
}

@-webkit-keyframes fadeOutRightBig {
    0% {
        opacity: 1;
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }

    100% {
        opacity: 0;
        -webkit-transform: translateX(2000px);
        transform: translateX(2000px);
    }
}

@keyframes fadeOutRightBig {
    0% {
        opacity: 1;
        -webkit-transform: translateX(0);
        -ms-transform: translateX(0);
        transform: translateX(0);
    }

    100% {
        opacity: 0;
        -webkit-transform: translateX(2000px);
        -ms-transform: translateX(2000px);
        transform: translateX(2000px);
    }
}

.fadeOutRightBig {
    -webkit-animation-name: fadeOutRightBig;
    animation-name: fadeOutRightBig;
}

@-webkit-keyframes fadeOutUp {
    0% {
        opacity: 1;
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }

    100% {
        opacity: 0;
        -webkit-transform: translateY(-20px);
        transform: translateY(-20px);
    }
}

@keyframes fadeOutUp {
    0% {
        opacity: 1;
        -webkit-transform: translateY(0);
        -ms-transform: translateY(0);
        transform: translateY(0);
    }

    100% {
        opacity: 0;
        -webkit-transform: translateY(-20px);
        -ms-transform: translateY(-20px);
        transform: translateY(-20px);
    }
}

.fadeOutUp {
    -webkit-animation-name: fadeOutUp;
    animation-name: fadeOutUp;
}

@-webkit-keyframes fadeOutUpBig {
    0% {
        opacity: 1;
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }

    100% {
        opacity: 0;
        -webkit-transform: translateY(-2000px);
        transform: translateY(-2000px);
    }
}

@keyframes fadeOutUpBig {
    0% {
        opacity: 1;
        -webkit-transform: translateY(0);
        -ms-transform: translateY(0);
        transform: translateY(0);
    }

    100% {
        opacity: 0;
        -webkit-transform: translateY(-2000px);
        -ms-transform: translateY(-2000px);
        transform: translateY(-2000px);
    }
}

.fadeOutUpBig {
    -webkit-animation-name: fadeOutUpBig;
    animation-name: fadeOutUpBig;
}

@-webkit-keyframes flip {
    0% {
        -webkit-transform: perspective(400px) translateZ(0) rotateY(0) scale(1);
        transform: perspective(400px) translateZ(0) rotateY(0) scale(1);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out;
    }

    40% {
        -webkit-transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1);
        transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out;
    }

    50% {
        -webkit-transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1);
        transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
    }

    80% {
        -webkit-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(.95);
        transform: perspective(400px) translateZ(0) rotateY(360deg) scale(.95);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
    }

    100% {
        -webkit-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1);
        transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
    }
}

@keyframes flip {
    0% {
        -webkit-transform: perspective(400px) translateZ(0) rotateY(0) scale(1);
        -ms-transform: perspective(400px) translateZ(0) rotateY(0) scale(1);
        transform: perspective(400px) translateZ(0) rotateY(0) scale(1);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out;
    }

    40% {
        -webkit-transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1);
        -ms-transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1);
        transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out;
    }

    50% {
        -webkit-transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1);
        -ms-transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1);
        transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
    }

    80% {
        -webkit-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(.95);
        -ms-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(.95);
        transform: perspective(400px) translateZ(0) rotateY(360deg) scale(.95);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
    }

    100% {
        -webkit-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1);
        -ms-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1);
        transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
    }
}

.animated.flip {
    -webkit-backface-visibility: visible;
    -ms-backface-visibility: visible;
    backface-visibility: visible;
    -webkit-animation-name: flip;
    animation-name: flip;
}

@-webkit-keyframes flipInX {
    0% {
        -webkit-transform: perspective(400px) rotateX(90deg);
        transform: perspective(400px) rotateX(90deg);
        opacity: 0;
    }

    40% {
        -webkit-transform: perspective(400px) rotateX(-10deg);
        transform: perspective(400px) rotateX(-10deg);
    }

    70% {
        -webkit-transform: perspective(400px) rotateX(10deg);
        transform: perspective(400px) rotateX(10deg);
    }

    100% {
        -webkit-transform: perspective(400px) rotateX(0deg);
        transform: perspective(400px) rotateX(0deg);
        opacity: 1;
    }
}

@keyframes flipInX {
    0% {
        -webkit-transform: perspective(400px) rotateX(90deg);
        -ms-transform: perspective(400px) rotateX(90deg);
        transform: perspective(400px) rotateX(90deg);
        opacity: 0;
    }

    40% {
        -webkit-transform: perspective(400px) rotateX(-10deg);
        -ms-transform: perspective(400px) rotateX(-10deg);
        transform: perspective(400px) rotateX(-10deg);
    }

    70% {
        -webkit-transform: perspective(400px) rotateX(10deg);
        -ms-transform: perspective(400px) rotateX(10deg);
        transform: perspective(400px) rotateX(10deg);
    }

    100% {
        -webkit-transform: perspective(400px) rotateX(0deg);
        -ms-transform: perspective(400px) rotateX(0deg);
        transform: perspective(400px) rotateX(0deg);
        opacity: 1;
    }
}

.flipInX {
    -webkit-backface-visibility: visible !important;
    -ms-backface-visibility: visible !important;
    backface-visibility: visible !important;
    -webkit-animation-name: flipInX;
    animation-name: flipInX;
}

@-webkit-keyframes flipInY {
    0% {
        -webkit-transform: perspective(400px) rotateY(90deg);
        transform: perspective(400px) rotateY(90deg);
        opacity: 0;
    }

    40% {
        -webkit-transform: perspective(400px) rotateY(-10deg);
        transform: perspective(400px) rotateY(-10deg);
    }

    70% {
        -webkit-transform: perspective(400px) rotateY(10deg);
        transform: perspective(400px) rotateY(10deg);
    }

    100% {
        -webkit-transform: perspective(400px) rotateY(0deg);
        transform: perspective(400px) rotateY(0deg);
        opacity: 1;
    }
}

@keyframes flipInY {
    0% {
        -webkit-transform: perspective(400px) rotateY(90deg);
        -ms-transform: perspective(400px) rotateY(90deg);
        transform: perspective(400px) rotateY(90deg);
        opacity: 0;
    }

    40% {
        -webkit-transform: perspective(400px) rotateY(-10deg);
        -ms-transform: perspective(400px) rotateY(-10deg);
        transform: perspective(400px) rotateY(-10deg);
    }

    70% {
        -webkit-transform: perspective(400px) rotateY(10deg);
        -ms-transform: perspective(400px) rotateY(10deg);
        transform: perspective(400px) rotateY(10deg);
    }

    100% {
        -webkit-transform: perspective(400px) rotateY(0deg);
        -ms-transform: perspective(400px) rotateY(0deg);
        transform: perspective(400px) rotateY(0deg);
        opacity: 1;
    }
}

.flipInY {
    -webkit-backface-visibility: visible !important;
    -ms-backface-visibility: visible !important;
    backface-visibility: visible !important;
    -webkit-animation-name: flipInY;
    animation-name: flipInY;
}

@-webkit-keyframes flipOutX {
    0% {
        -webkit-transform: perspective(400px) rotateX(0deg);
        transform: perspective(400px) rotateX(0deg);
        opacity: 1;
    }

    100% {
        -webkit-transform: perspective(400px) rotateX(90deg);
        transform: perspective(400px) rotateX(90deg);
        opacity: 0;
    }
}

@keyframes flipOutX {
    0% {
        -webkit-transform: perspective(400px) rotateX(0deg);
        -ms-transform: perspective(400px) rotateX(0deg);
        transform: perspective(400px) rotateX(0deg);
        opacity: 1;
    }

    100% {
        -webkit-transform: perspective(400px) rotateX(90deg);
        -ms-transform: perspective(400px) rotateX(90deg);
        transform: perspective(400px) rotateX(90deg);
        opacity: 0;
    }
}

.flipOutX {
    -webkit-animation-name: flipOutX;
    animation-name: flipOutX;
    -webkit-backface-visibility: visible !important;
    -ms-backface-visibility: visible !important;
    backface-visibility: visible !important;
}

@-webkit-keyframes flipOutY {
    0% {
        -webkit-transform: perspective(400px) rotateY(0deg);
        transform: perspective(400px) rotateY(0deg);
        opacity: 1;
    }

    100% {
        -webkit-transform: perspective(400px) rotateY(90deg);
        transform: perspective(400px) rotateY(90deg);
        opacity: 0;
    }
}

@keyframes flipOutY {
    0% {
        -webkit-transform: perspective(400px) rotateY(0deg);
        -ms-transform: perspective(400px) rotateY(0deg);
        transform: perspective(400px) rotateY(0deg);
        opacity: 1;
    }

    100% {
        -webkit-transform: perspective(400px) rotateY(90deg);
        -ms-transform: perspective(400px) rotateY(90deg);
        transform: perspective(400px) rotateY(90deg);
        opacity: 0;
    }
}

.flipOutY {
    -webkit-backface-visibility: visible !important;
    -ms-backface-visibility: visible !important;
    backface-visibility: visible !important;
    -webkit-animation-name: flipOutY;
    animation-name: flipOutY;
}

@-webkit-keyframes lightSpeedIn {
    0% {
        -webkit-transform: translateX(100%) skewX(-30deg);
        transform: translateX(100%) skewX(-30deg);
        opacity: 0;
    }

    60% {
        -webkit-transform: translateX(-20%) skewX(30deg);
        transform: translateX(-20%) skewX(30deg);
        opacity: 1;
    }

    80% {
        -webkit-transform: translateX(0%) skewX(-15deg);
        transform: translateX(0%) skewX(-15deg);
        opacity: 1;
    }

    100% {
        -webkit-transform: translateX(0%) skewX(0deg);
        transform: translateX(0%) skewX(0deg);
        opacity: 1;
    }
}

@keyframes lightSpeedIn {
    0% {
        -webkit-transform: translateX(100%) skewX(-30deg);
        -ms-transform: translateX(100%) skewX(-30deg);
        transform: translateX(100%) skewX(-30deg);
        opacity: 0;
    }

    60% {
        -webkit-transform: translateX(-20%) skewX(30deg);
        -ms-transform: translateX(-20%) skewX(30deg);
        transform: translateX(-20%) skewX(30deg);
        opacity: 1;
    }

    80% {
        -webkit-transform: translateX(0%) skewX(-15deg);
        -ms-transform: translateX(0%) skewX(-15deg);
        transform: translateX(0%) skewX(-15deg);
        opacity: 1;
    }

    100% {
        -webkit-transform: translateX(0%) skewX(0deg);
        -ms-transform: translateX(0%) skewX(0deg);
        transform: translateX(0%) skewX(0deg);
        opacity: 1;
    }
}

.lightSpeedIn {
    -webkit-animation-name: lightSpeedIn;
    animation-name: lightSpeedIn;
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
}

@-webkit-keyframes lightSpeedOut {
    0% {
        -webkit-transform: translateX(0%) skewX(0deg);
        transform: translateX(0%) skewX(0deg);
        opacity: 1;
    }

    100% {
        -webkit-transform: translateX(100%) skewX(-30deg);
        transform: translateX(100%) skewX(-30deg);
        opacity: 0;
    }
}

@keyframes lightSpeedOut {
    0% {
        -webkit-transform: translateX(0%) skewX(0deg);
        -ms-transform: translateX(0%) skewX(0deg);
        transform: translateX(0%) skewX(0deg);
        opacity: 1;
    }

    100% {
        -webkit-transform: translateX(100%) skewX(-30deg);
        -ms-transform: translateX(100%) skewX(-30deg);
        transform: translateX(100%) skewX(-30deg);
        opacity: 0;
    }
}

.lightSpeedOut {
    -webkit-animation-name: lightSpeedOut;
    animation-name: lightSpeedOut;
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
}

@-webkit-keyframes rotateIn {
    0% {
        -webkit-transform-origin: center center;
        transform-origin: center center;
        -webkit-transform: rotate(-200deg);
        transform: rotate(-200deg);
        opacity: 0;
    }

    100% {
        -webkit-transform-origin: center center;
        transform-origin: center center;
        -webkit-transform: rotate(0);
        transform: rotate(0);
        opacity: 1;
    }
}

@keyframes rotateIn {
    0% {
        -webkit-transform-origin: center center;
        -ms-transform-origin: center center;
        transform-origin: center center;
        -webkit-transform: rotate(-200deg);
        -ms-transform: rotate(-200deg);
        transform: rotate(-200deg);
        opacity: 0;
    }

    100% {
        -webkit-transform-origin: center center;
        -ms-transform-origin: center center;
        transform-origin: center center;
        -webkit-transform: rotate(0);
        -ms-transform: rotate(0);
        transform: rotate(0);
        opacity: 1;
    }
}

.rotateIn {
    -webkit-animation-name: rotateIn;
    animation-name: rotateIn;
}

@-webkit-keyframes rotateInDownLeft {
    0% {
        -webkit-transform-origin: left bottom;
        transform-origin: left bottom;
        -webkit-transform: rotate(-90deg);
        transform: rotate(-90deg);
        opacity: 0;
    }

    100% {
        -webkit-transform-origin: left bottom;
        transform-origin: left bottom;
        -webkit-transform: rotate(0);
        transform: rotate(0);
        opacity: 1;
    }
}

@keyframes rotateInDownLeft {
    0% {
        -webkit-transform-origin: left bottom;
        -ms-transform-origin: left bottom;
        transform-origin: left bottom;
        -webkit-transform: rotate(-90deg);
        -ms-transform: rotate(-90deg);
        transform: rotate(-90deg);
        opacity: 0;
    }

    100% {
        -webkit-transform-origin: left bottom;
        -ms-transform-origin: left bottom;
        transform-origin: left bottom;
        -webkit-transform: rotate(0);
        -ms-transform: rotate(0);
        transform: rotate(0);
        opacity: 1;
    }
}

.rotateInDownLeft {
    -webkit-animation-name: rotateInDownLeft;
    animation-name: rotateInDownLeft;
}

@-webkit-keyframes rotateInDownRight {
    0% {
        -webkit-transform-origin: right bottom;
        transform-origin: right bottom;
        -webkit-transform: rotate(90deg);
        transform: rotate(90deg);
        opacity: 0;
    }

    100% {
        -webkit-transform-origin: right bottom;
        transform-origin: right bottom;
        -webkit-transform: rotate(0);
        transform: rotate(0);
        opacity: 1;
    }
}

@keyframes rotateInDownRight {
    0% {
        -webkit-transform-origin: right bottom;
        -ms-transform-origin: right bottom;
        transform-origin: right bottom;
        -webkit-transform: rotate(90deg);
        -ms-transform: rotate(90deg);
        transform: rotate(90deg);
        opacity: 0;
    }

    100% {
        -webkit-transform-origin: right bottom;
        -ms-transform-origin: right bottom;
        transform-origin: right bottom;
        -webkit-transform: rotate(0);
        -ms-transform: rotate(0);
        transform: rotate(0);
        opacity: 1;
    }
}

.rotateInDownRight {
    -webkit-animation-name: rotateInDownRight;
    animation-name: rotateInDownRight;
}

@-webkit-keyframes rotateInUpLeft {
    0% {
        -webkit-transform-origin: left bottom;
        transform-origin: left bottom;
        -webkit-transform: rotate(90deg);
        transform: rotate(90deg);
        opacity: 0;
    }

    100% {
        -webkit-transform-origin: left bottom;
        transform-origin: left bottom;
        -webkit-transform: rotate(0);
        transform: rotate(0);
        opacity: 1;
    }
}

@keyframes rotateInUpLeft {
    0% {
        -webkit-transform-origin: left bottom;
        -ms-transform-origin: left bottom;
        transform-origin: left bottom;
        -webkit-transform: rotate(90deg);
        -ms-transform: rotate(90deg);
        transform: rotate(90deg);
        opacity: 0;
    }

    100% {
        -webkit-transform-origin: left bottom;
        -ms-transform-origin: left bottom;
        transform-origin: left bottom;
        -webkit-transform: rotate(0);
        -ms-transform: rotate(0);
        transform: rotate(0);
        opacity: 1;
    }
}

.rotateInUpLeft {
    -webkit-animation-name: rotateInUpLeft;
    animation-name: rotateInUpLeft;
}

@-webkit-keyframes rotateInUpRight {
    0% {
        -webkit-transform-origin: right bottom;
        transform-origin: right bottom;
        -webkit-transform: rotate(-90deg);
        transform: rotate(-90deg);
        opacity: 0;
    }

    100% {
        -webkit-transform-origin: right bottom;
        transform-origin: right bottom;
        -webkit-transform: rotate(0);
        transform: rotate(0);
        opacity: 1;
    }
}

@keyframes rotateInUpRight {
    0% {
        -webkit-transform-origin: right bottom;
        -ms-transform-origin: right bottom;
        transform-origin: right bottom;
        -webkit-transform: rotate(-90deg);
        -ms-transform: rotate(-90deg);
        transform: rotate(-90deg);
        opacity: 0;
    }

    100% {
        -webkit-transform-origin: right bottom;
        -ms-transform-origin: right bottom;
        transform-origin: right bottom;
        -webkit-transform: rotate(0);
        -ms-transform: rotate(0);
        transform: rotate(0);
        opacity: 1;
    }
}

.rotateInUpRight {
    -webkit-animation-name: rotateInUpRight;
    animation-name: rotateInUpRight;
}

@-webkit-keyframes rotateOut {
    0% {
        -webkit-transform-origin: center center;
        transform-origin: center center;
        -webkit-transform: rotate(0);
        transform: rotate(0);
        opacity: 1;
    }

    100% {
        -webkit-transform-origin: center center;
        transform-origin: center center;
        -webkit-transform: rotate(200deg);
        transform: rotate(200deg);
        opacity: 0;
    }
}

@keyframes rotateOut {
    0% {
        -webkit-transform-origin: center center;
        -ms-transform-origin: center center;
        transform-origin: center center;
        -webkit-transform: rotate(0);
        -ms-transform: rotate(0);
        transform: rotate(0);
        opacity: 1;
    }

    100% {
        -webkit-transform-origin: center center;
        -ms-transform-origin: center center;
        transform-origin: center center;
        -webkit-transform: rotate(200deg);
        -ms-transform: rotate(200deg);
        transform: rotate(200deg);
        opacity: 0;
    }
}

.rotateOut {
    -webkit-animation-name: rotateOut;
    animation-name: rotateOut;
}

@-webkit-keyframes rotateOutDownLeft {
    0% {
        -webkit-transform-origin: left bottom;
        transform-origin: left bottom;
        -webkit-transform: rotate(0);
        transform: rotate(0);
        opacity: 1;
    }

    100% {
        -webkit-transform-origin: left bottom;
        transform-origin: left bottom;
        -webkit-transform: rotate(90deg);
        transform: rotate(90deg);
        opacity: 0;
    }
}

@keyframes rotateOutDownLeft {
    0% {
        -webkit-transform-origin: left bottom;
        -ms-transform-origin: left bottom;
        transform-origin: left bottom;
        -webkit-transform: rotate(0);
        -ms-transform: rotate(0);
        transform: rotate(0);
        opacity: 1;
    }

    100% {
        -webkit-transform-origin: left bottom;
        -ms-transform-origin: left bottom;
        transform-origin: left bottom;
        -webkit-transform: rotate(90deg);
        -ms-transform: rotate(90deg);
        transform: rotate(90deg);
        opacity: 0;
    }
}

.rotateOutDownLeft {
    -webkit-animation-name: rotateOutDownLeft;
    animation-name: rotateOutDownLeft;
}

@-webkit-keyframes rotateOutDownRight {
    0% {
        -webkit-transform-origin: right bottom;
        transform-origin: right bottom;
        -webkit-transform: rotate(0);
        transform: rotate(0);
        opacity: 1;
    }

    100% {
        -webkit-transform-origin: right bottom;
        transform-origin: right bottom;
        -webkit-transform: rotate(-90deg);
        transform: rotate(-90deg);
        opacity: 0;
    }
}

@keyframes rotateOutDownRight {
    0% {
        -webkit-transform-origin: right bottom;
        -ms-transform-origin: right bottom;
        transform-origin: right bottom;
        -webkit-transform: rotate(0);
        -ms-transform: rotate(0);
        transform: rotate(0);
        opacity: 1;
    }

    100% {
        -webkit-transform-origin: right bottom;
        -ms-transform-origin: right bottom;
        transform-origin: right bottom;
        -webkit-transform: rotate(-90deg);
        -ms-transform: rotate(-90deg);
        transform: rotate(-90deg);
        opacity: 0;
    }
}

.rotateOutDownRight {
    -webkit-animation-name: rotateOutDownRight;
    animation-name: rotateOutDownRight;
}

@-webkit-keyframes rotateOutUpLeft {
    0% {
        -webkit-transform-origin: left bottom;
        transform-origin: left bottom;
        -webkit-transform: rotate(0);
        transform: rotate(0);
        opacity: 1;
    }

    100% {
        -webkit-transform-origin: left bottom;
        transform-origin: left bottom;
        -webkit-transform: rotate(-90deg);
        transform: rotate(-90deg);
        opacity: 0;
    }
}

@keyframes rotateOutUpLeft {
    0% {
        -webkit-transform-origin: left bottom;
        -ms-transform-origin: left bottom;
        transform-origin: left bottom;
        -webkit-transform: rotate(0);
        -ms-transform: rotate(0);
        transform: rotate(0);
        opacity: 1;
    }

    100% {
        -webkit-transform-origin: left bottom;
        -ms-transform-origin: left bottom;
        transform-origin: left bottom;
        -webkit-transform: rotate(-90deg);
        -ms-transform: rotate(-90deg);
        transform: rotate(-90deg);
        opacity: 0;
    }
}

.rotateOutUpLeft {
    -webkit-animation-name: rotateOutUpLeft;
    animation-name: rotateOutUpLeft;
}

@-webkit-keyframes rotateOutUpRight {
    0% {
        -webkit-transform-origin: right bottom;
        transform-origin: right bottom;
        -webkit-transform: rotate(0);
        transform: rotate(0);
        opacity: 1;
    }

    100% {
        -webkit-transform-origin: right bottom;
        transform-origin: right bottom;
        -webkit-transform: rotate(90deg);
        transform: rotate(90deg);
        opacity: 0;
    }
}

@keyframes rotateOutUpRight {
    0% {
        -webkit-transform-origin: right bottom;
        -ms-transform-origin: right bottom;
        transform-origin: right bottom;
        -webkit-transform: rotate(0);
        -ms-transform: rotate(0);
        transform: rotate(0);
        opacity: 1;
    }

    100% {
        -webkit-transform-origin: right bottom;
        -ms-transform-origin: right bottom;
        transform-origin: right bottom;
        -webkit-transform: rotate(90deg);
        -ms-transform: rotate(90deg);
        transform: rotate(90deg);
        opacity: 0;
    }
}

.rotateOutUpRight {
    -webkit-animation-name: rotateOutUpRight;
    animation-name: rotateOutUpRight;
}

@-webkit-keyframes slideInDown {
    0% {
        opacity: 0;
        -webkit-transform: translateY(-2000px);
        transform: translateY(-2000px);
    }

    100% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }
}

@keyframes slideInDown {
    0% {
        opacity: 0;
        -webkit-transform: translateY(-2000px);
        -ms-transform: translateY(-2000px);
        transform: translateY(-2000px);
    }

    100% {
        -webkit-transform: translateY(0);
        -ms-transform: translateY(0);
        transform: translateY(0);
    }
}

.slideInDown {
    -webkit-animation-name: slideInDown;
    animation-name: slideInDown;
}

@-webkit-keyframes slideInLeft {
    0% {
        opacity: 0;
        -webkit-transform: translateX(-2000px);
        transform: translateX(-2000px);
    }

    100% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }
}

@keyframes slideInLeft {
    0% {
        opacity: 0;
        -webkit-transform: translateX(-2000px);
        -ms-transform: translateX(-2000px);
        transform: translateX(-2000px);
    }

    100% {
        -webkit-transform: translateX(0);
        -ms-transform: translateX(0);
        transform: translateX(0);
    }
}

.slideInLeft {
    -webkit-animation-name: slideInLeft;
    animation-name: slideInLeft;
}

@-webkit-keyframes slideInRight {
    0% {
        opacity: 0;
        -webkit-transform: translateX(2000px);
        transform: translateX(2000px);
    }

    100% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }
}

@keyframes slideInRight {
    0% {
        opacity: 0;
        -webkit-transform: translateX(2000px);
        -ms-transform: translateX(2000px);
        transform: translateX(2000px);
    }

    100% {
        -webkit-transform: translateX(0);
        -ms-transform: translateX(0);
        transform: translateX(0);
    }
}

.slideInRight {
    -webkit-animation-name: slideInRight;
    animation-name: slideInRight;
}

@-webkit-keyframes slideOutLeft {
    0% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }

    100% {
        opacity: 0;
        -webkit-transform: translateX(-2000px);
        transform: translateX(-2000px);
    }
}

@keyframes slideOutLeft {
    0% {
        -webkit-transform: translateX(0);
        -ms-transform: translateX(0);
        transform: translateX(0);
    }

    100% {
        opacity: 0;
        -webkit-transform: translateX(-2000px);
        -ms-transform: translateX(-2000px);
        transform: translateX(-2000px);
    }
}

.slideOutLeft {
    -webkit-animation-name: slideOutLeft;
    animation-name: slideOutLeft;
}

@-webkit-keyframes slideOutRight {
    0% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }

    100% {
        opacity: 0;
        -webkit-transform: translateX(2000px);
        transform: translateX(2000px);
    }
}

@keyframes slideOutRight {
    0% {
        -webkit-transform: translateX(0);
        -ms-transform: translateX(0);
        transform: translateX(0);
    }

    100% {
        opacity: 0;
        -webkit-transform: translateX(2000px);
        -ms-transform: translateX(2000px);
        transform: translateX(2000px);
    }
}

.slideOutRight {
    -webkit-animation-name: slideOutRight;
    animation-name: slideOutRight;
}

@-webkit-keyframes slideOutUp {
    0% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }

    100% {
        opacity: 0;
        -webkit-transform: translateY(-2000px);
        transform: translateY(-2000px);
    }
}

@keyframes slideOutUp {
    0% {
        -webkit-transform: translateY(0);
        -ms-transform: translateY(0);
        transform: translateY(0);
    }

    100% {
        opacity: 0;
        -webkit-transform: translateY(-2000px);
        -ms-transform: translateY(-2000px);
        transform: translateY(-2000px);
    }
}

.slideOutUp {
    -webkit-animation-name: slideOutUp;
    animation-name: slideOutUp;
}

@-webkit-keyframes slideOutDown {
    0% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }

    100% {
        opacity: 0;
        -webkit-transform: translateY(2000px);
        transform: translateY(2000px);
    }
}

@keyframes slideOutDown {
    0% {
        -webkit-transform: translateY(0);
        -ms-transform: translateY(0);
        transform: translateY(0);
    }

    100% {
        opacity: 0;
        -webkit-transform: translateY(2000px);
        -ms-transform: translateY(2000px);
        transform: translateY(2000px);
    }
}

.slideOutDown {
    -webkit-animation-name: slideOutDown;
    animation-name: slideOutDown;
}

@-webkit-keyframes hinge {
    0% {
        -webkit-transform: rotate(0);
        transform: rotate(0);
        -webkit-transform-origin: top left;
        transform-origin: top left;
        -webkit-animation-timing-function: ease-in-out;
        animation-timing-function: ease-in-out;
    }

    20%, 60% {
        -webkit-transform: rotate(80deg);
        transform: rotate(80deg);
        -webkit-transform-origin: top left;
        transform-origin: top left;
        -webkit-animation-timing-function: ease-in-out;
        animation-timing-function: ease-in-out;
    }

    40% {
        -webkit-transform: rotate(60deg);
        transform: rotate(60deg);
        -webkit-transform-origin: top left;
        transform-origin: top left;
        -webkit-animation-timing-function: ease-in-out;
        animation-timing-function: ease-in-out;
    }

    80% {
        -webkit-transform: rotate(60deg) translateY(0);
        transform: rotate(60deg) translateY(0);
        -webkit-transform-origin: top left;
        transform-origin: top left;
        -webkit-animation-timing-function: ease-in-out;
        animation-timing-function: ease-in-out;
        opacity: 1;
    }

    100% {
        -webkit-transform: translateY(700px);
        transform: translateY(700px);
        opacity: 0;
    }
}

@keyframes hinge {
    0% {
        -webkit-transform: rotate(0);
        -ms-transform: rotate(0);
        transform: rotate(0);
        -webkit-transform-origin: top left;
        -ms-transform-origin: top left;
        transform-origin: top left;
        -webkit-animation-timing-function: ease-in-out;
        animation-timing-function: ease-in-out;
    }

    20%, 60% {
        -webkit-transform: rotate(80deg);
        -ms-transform: rotate(80deg);
        transform: rotate(80deg);
        -webkit-transform-origin: top left;
        -ms-transform-origin: top left;
        transform-origin: top left;
        -webkit-animation-timing-function: ease-in-out;
        animation-timing-function: ease-in-out;
    }

    40% {
        -webkit-transform: rotate(60deg);
        -ms-transform: rotate(60deg);
        transform: rotate(60deg);
        -webkit-transform-origin: top left;
        -ms-transform-origin: top left;
        transform-origin: top left;
        -webkit-animation-timing-function: ease-in-out;
        animation-timing-function: ease-in-out;
    }

    80% {
        -webkit-transform: rotate(60deg) translateY(0);
        -ms-transform: rotate(60deg) translateY(0);
        transform: rotate(60deg) translateY(0);
        -webkit-transform-origin: top left;
        -ms-transform-origin: top left;
        transform-origin: top left;
        -webkit-animation-timing-function: ease-in-out;
        animation-timing-function: ease-in-out;
        opacity: 1;
    }

    100% {
        -webkit-transform: translateY(700px);
        -ms-transform: translateY(700px);
        transform: translateY(700px);
        opacity: 0;
    }
}

.hinge {
    -webkit-animation-name: hinge;
    animation-name: hinge;
}

/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */

@-webkit-keyframes rollIn {
    0% {
        opacity: 0;
        -webkit-transform: translateX(-100%) rotate(-120deg);
        transform: translateX(-100%) rotate(-120deg);
    }

    100% {
        opacity: 1;
        -webkit-transform: translateX(0px) rotate(0deg);
        transform: translateX(0px) rotate(0deg);
    }
}

@keyframes rollIn {
    0% {
        opacity: 0;
        -webkit-transform: translateX(-100%) rotate(-120deg);
        -ms-transform: translateX(-100%) rotate(-120deg);
        transform: translateX(-100%) rotate(-120deg);
    }

    100% {
        opacity: 1;
        -webkit-transform: translateX(0px) rotate(0deg);
        -ms-transform: translateX(0px) rotate(0deg);
        transform: translateX(0px) rotate(0deg);
    }
}

.rollIn {
    -webkit-animation-name: rollIn;
    animation-name: rollIn;
}

/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */

@-webkit-keyframes rollOut {
    0% {
        opacity: 1;
        -webkit-transform: translateX(0px) rotate(0deg);
        transform: translateX(0px) rotate(0deg);
    }

    100% {
        opacity: 0;
        -webkit-transform: translateX(100%) rotate(120deg);
        transform: translateX(100%) rotate(120deg);
    }
}

@keyframes rollOut {
    0% {
        opacity: 1;
        -webkit-transform: translateX(0px) rotate(0deg);
        -ms-transform: translateX(0px) rotate(0deg);
        transform: translateX(0px) rotate(0deg);
    }

    100% {
        opacity: 0;
        -webkit-transform: translateX(100%) rotate(120deg);
        -ms-transform: translateX(100%) rotate(120deg);
        transform: translateX(100%) rotate(120deg);
    }
}

.rollOut {
    -webkit-animation-name: rollOut;
    animation-name: rollOut;
}
.rigaDistinta td {
    border: 2px solid #000000;
    height: 20px;
}


.statoOrdine {
   
}

.aperta {
    background-color: #FFFFFF;
    color: #000000;
    width: 120px;
    padding: 5px 8px 5px 8px;
    border-radius: 7px;
    font-family: Calibri;
    font-size: 14px;
    text-transform: uppercase;
    font-weight: bold;
    text-align: center;
    background-color: white;
    border: solid 1px #D9D9D9;
}

.chiusa {
    background-color: #59ACFF;
    color: #FFFFFF;
    width: 120px;
    padding: 5px 8px 5px 8px;
    border-radius: 7px;
    font-family: Calibri;
    font-size: 14px;
    text-transform: uppercase;
    font-weight: bold;
    text-align: center;
}

.insmistamento {
    background-color: #FFFF97;
    color: #000000;
    width: 120px;
    padding: 5px 8px 5px 8px;
    border-radius: 7px;
    font-family: Calibri;
    font-size: 14px;
    text-transform: uppercase;
    font-weight: bold;
    text-align: center;
}

.annullata {
    background-color: #FF7777;
    color: #FFFFFF;
    width: 120px;
    padding: 5px 8px 5px 8px;
    border-radius: 7px;
    font-family: Calibri;
    font-size: 14px;
    text-transform: uppercase;
    font-weight: bold;
    text-align: center;
}

.smistata {
    background-color: #99FF99;
    color: #000000;
    width: 120px;
    padding: 5px 8px 5px 8px;
    border-radius: 7px;
    font-family: Calibri;
    font-size: 14px;
    text-transform: uppercase;
    font-weight: bold;
    text-align: center;
}

.inverifica {
    background-color: #fe8835;
    color: #000000;
    width: 120px;
    padding: 5px 8px 5px 8px;
    border-radius: 7px;
    font-family: Calibri;
    font-size: 14px;
    text-transform: uppercase;
    font-weight: bold;
    text-align: center;
}


.statoDistinte {
    float: left;
    margin-right: 22px;
    border-left-style: solid;
    border-left-width: 8px;
    border-bottom: solid 1px #e5e6e7;
    padding-left: 6px;
}


.statoAperta {
    border-left-width: 0px !important;
    padding-left: 0px !important;
}

.coloreStatoAperta {
    border-left: solid 1px #e5e6e7;
    border-right: solid 1px #e5e6e7;
    border-top: solid 1px #e5e6e7;
    width: 8px;
    height: 28px;
    float: left;
    margin-right: 6px;
    background-color:white;
}

.statoInVerifica {
    border-left-color: #fe8835;
}

.statoChiusa {
    border-left-color: #59ACFF;
}

.statoInSmistamento {
    border-left-color: #FFFF97;
}

.statoSmistata {
    border-left-color: #99FF99;
}

.statoAnnullata {
    border-left-color: #FF7777;
}


.filtroContrassegno {
    border-right: solid 1px #e5e6e7;
    padding-right: 10px;
    float: left;
    margin-right: 13px;
}

.icona-danger {
    color: #FF6600;
    font-size: 18px;
}

    .icona-danger:hover {
        color: #FF6600;
    }

.tabellaOrdini {
    width: 100%;
}

    .tabellaOrdini.alternaRighe tr:nth-child(even) {
        background: #F9F9F9
    }

    .tabellaOrdini.alternaRighe tr:nth-child(odd) {
        background: #FFF
    }

    .tabellaOrdini.alternaRighe tr:hover {
        background: #EBEBEB;
    }

    .tabellaOrdini th {
        background-color: transparent;
        padding: 5px;
        color: #75c044;
        font-size: 16px;
        text-transform: uppercase;
        background-repeat: repeat-x;
    }

        .tabellaOrdini th a {
            color: #75c044;
        }

        .tabellaOrdini .intestazioneCosto{
            float:right;
            padding-right:20px;
        }


    .tabellaOrdini .intestazioneNumero {
        float: right;
        padding-right: 60px;
    }

    .tabellaOrdini tr:hover {
        color: black;
        background-color: #EBEBEB;
    }

    .tabellaOrdini tr {
        border-bottom: solid 1px #EBEBEB;
    }

    .tabellaOrdini td {
        padding: 2px 5px 2px 5px;
        font-size: 14px;
        color: #323232;
        height: 70px;
    }

.oraOrdine {
    min-width: 70px;
    height: 26px;
    float: left;
    text-align: right !important;
    font-size: 24px;
    font-weight: normal;
}

.giornoOrinde {
    min-width: 70px;
    height: 15px;
    float: left;
    text-align: right !important;
    font-size: 16px;
    margin-bottom: 4px;
}

.numeroOrdine {
    float: right;
    width: 100px;
    padding: 18px 20px 20px 10px !important;
    font-size: 22px !important;
}

.costoOrdine {
    text-align: right;
    font-weight: bold;
    width: 150px;
    font-size: 22px !important;
    padding: 0px 20px 0px 5px !important;
}

.funzioni{
    width:130px;
    text-align:left;
    padding:0px 10px 0px 30px;
}

.utente {
    width: 150px;
}

.ricercaDistintaPerCodiceSpedizione{
    color:#323232 !important;
}



.tooltip-top-sf-custom-ordini .tooltip-text {
    left: 400% !important;
    max-width: 100px;
}
/******************************************************************/
/*      STAMPE DISTINTA                                           */
/******************************************************************/
.popUpStampaFileSpedizione {
    position: absolute;
    padding: 15px 20px;
    background-color: white;
    border: solid 1px #003A48;
    border-radius: 8px;
}

.popUpStampaFileSpedizione.distinta {
    z-index: 1001;
    top: 65px;
    right: 90px;
    width: 760px;
    height: 850px;
}

.popUpStampaFileSpedizione .chiusuraStampa {
    float: right;
    margin-top: -30px;
}

.popUpStampaFileSpedizione .etichettaStampa {
    font-weight: bold;
    color: #003A48;
    font-size: 25px;
}


.ricercaPerSpedizione.etichettaRicerca {
    color: #75c044 !important;
    text-transform: none;
    font-size: 13px;
}

.dataRicercaDistinte {
    width: 95px !important;
}

.annoRicercaDistinte {
    height: 32px !important;
    width: 75px !important;
}

.statoRicercaDistinte {
    height: 32px !important;
}
.spedizioniEffettuabili-elenco {
}

.spedizioniEffettuabili-prodotto {
    width: 600px;
    margin-bottom: 40px;
    padding: 20px 0px;
    border-radius: 8px;
}

.spedizioneEffettuabile-prodotto-alias {
    font-size: 30px;
    font-weight: bold;
    color: #3e5164;
    margin-bottom: -10px;
}

.spedizioniEffettuabili-prodotto-scaglioni {
    font-size: 54px !important;
}


.spedizioneEffettuabile-listino-nome {
    font-size: 14px;
    font-weight: bold;
    color: #3e5164
}

.spedizioneEffettuabile-prodotto-nome {
    font-size: 20px;
    font-weight: bold;
    color: #3e5164
}

.spedizioniEffettuabili-elenco span.ajax__tab_inner {
    
}

.spedizioniEffettuabili-prodotto-scaglioni th.peso {
    width: 100px;
}

.spedizioniEffettuabili-prodotto-scaglioni th.margine {
    text-align: right;
    padding-right: 18px;
}

.spedizioniEffettuabili-prodotto-scaglioni th.totale {
    text-align: right;
    padding-right: 20px;
}

.spedizioniEffettuabili-prodotto-scaglioni td {
    font-size: 16px;
    border: none;
}


    .spedizioniEffettuabili-prodotto-scaglioni td.totale {
        font-size: 18px;
        font-weight:bold;
    }

.spedizioneEffettuabile-caratteristiche-descrizione {
    padding-top: 4px;
    font-size: 20px;
    color: #3e5164;
}

.spedizioneEffettuabile-caratteristiche-dettaglio {
    padding-top: 10px;
    font-size: 18px;
    color: #3e5164;
}

.AjaxTabSezioni a {
    color: none;
}

    .AjaxTabSezioni a:link, a:hover, a:active, a:visited {
        color: none;
        outline: none;
    }
/*  STILI TAB CONTAINER AJAX CONTR */
.AjaxTabSezioni .ajax__tab_header a {
    color: #BBBBBB;
    cursor: pointer;
    font-size: 20px;
    font-family: "Calibri";
}

.AjaxTabSezioni .ajax__tab_outer {
    padding: 6px 0px 6px 0px;
    margin-left: 0px;
}

.AjaxTabSezioni .ajax__tab_inner {
}

.AjaxTabSezioni .ajax__tab_body {
    padding: 0px 0px 4px 0px;
    margin-top: -2px;
    height: 500px;
    border-top-style: solid;
    border-top-width: 1px;
    border-top-color: #898a8d;
}

.AjaxTabSezioni .ajax__tab_tab {
    padding: 0px 10px 0px 10px;
    margin-right: 10px;
    margin-left:-8px;
}

.AjaxTabSezioni .ajax__tab_hover {
    border-bottom-style: solid;
    border-bottom-width: 5px;
    border-bottom-color: #37485A;
}

.AjaxTabSezioni .ajax__tab_active {
    border-bottom-style: solid;
    border-bottom-width: 5px;
    border-bottom-color: #9a004f !important;
}

    .AjaxTabSezioni .ajax__tab_active a {
        color: #9a004f !important;
    }

#barraMenuSinistra {
    font-family: Calibri;
    position: fixed;
    top: -20px;
    left: 0px;
    width: 300px;
    padding: 20px 28px;
    background: linear-gradient(150deg, #1E5E2E 62%, #1E5E2E 40%, white 80%);
    box-shadow: 10px 2px 30px 0 #35496A;
    height: 100%;
    z-index: 100000 !important;
    border-bottom-right-radius: 10px;
    max-height: 800px;
}


    #barraMenuSinistra .menu-chiudi a {
        float: right;
        height: 40px;
        color: #FFF;
        width: 70px;
        text-align: right;
        border-bottom: 2px solid #F39021;
        padding-bottom: 0px;
        margin-right: -20px;
    }


#menu_sinistra .menu-logo {
    margin-left:-10px;
    margin-top:10px !important;
}

    #barraMenuSinistra .menu-chiudi a:hover {
        opacity: 1;
    }

#barraMenuSinistra .menu-chiudi-etichetta {
    width: 200px;
    text-transform: uppercase;
    width: 25px;
    font-size: 12px;
    font-weight: 700;
    display: inline-table;
    position: relative;
    top: -18px;
    margin-right:4px;
}

#barraMenuSinistra .menu-chiudi-x {
    font-size: 42px !important;
    font-weight: 700;
    line-height: 40px;
    display: inline-table;
    color: #F39021;
}

.menu-denominazionePoint {
    margin-top: 50px;
    width: 240px;
    color: #FFF;
    font-family: Calibri;
    font-size: 38px;
    font-weight: 700;
    line-height: 38px;
    margin-bottom: 90px;
}

/* On screens that are 992px or less, set the background color to blue */
@media screen and (max-height: 700px) {
    .menu-denominazionePoint {
        font-size: 28px;
        margin-bottom: 20px;
    }
}

#barraMenuSinistra .menu-voci {
}

#barraMenuSinistra .menu-voce {
    height: 40px;
    width: 308px;
    padding: 5px 30px 34px 30px;
    margin: -1px -36px 0px -36px;
    cursor: pointer;
    border: 1px solid rgba(128,128,128,0.46);
    border-right: 0px !important;
}

    #barraMenuSinistra .menu-voce:hover {
        border: solid #F39021 2px;
        border-left: #F39021 solid 20px;
        border-right: none !important;
        color: #F39021 !important;
    }

    #barraMenuSinistra .menu-voce i {
        padding: 4px 16px 4px 4px;
        color: white;
        font-size: 18px !important;
    }

    #barraMenuSinistra .menu-voce a {
        color: #FFF;
        font-family: Calibri;
        font-size: 18px;
    }


/*INFO SALDO*/
#barraMenuSinistra .menu-saldo {
    margin-top: 50px !important;
}

#barraMenuSinistra .menu-saldo-etichetta {
    height: 19px;
    color: white;
    font-family: Calibri;
    font-size: 24px;
    font-weight: 700;
    line-height: 24px;
    text-transform: uppercase;
    text-align: left;
}

#barraMenuSinistra .menu-saldo-valore {
    height: 40px;
    width: 172px;
    color: #FFF;
    font-family: Calibri;
    font-size: 40px;
    font-weight: 700;
    line-height: 40px;
    text-align: left;
    width:200px;
}


/*ALTRE INFO*/

/* On screens that are 992px or less, set the background color to blue */
@media screen and (max-height: 700px) {
    .menu-denominazionePoint {
        font-size: 28px;
        margin-bottom: 20px;
    }
}

#barraMenuSinistra .menu-idPO {
    position: absolute;
    bottom: 10px;
    float: right;
    right: 10px;
    text-align:right;
}

    #barraMenuSinistra .menu-idPO label {
        color: #F39021;
        font-family: Calibri;
        font-size: 16px;
        font-weight: bold !important;
    }

#barraMenuSinistra .menu-gestore-idpo {
    margin-top: -10px;
    color: #35496A;
    letter-spacing: 2px;
}


#barraMenuSinistra .menu-supporto {
    position: absolute;
    bottom: 60px !important;
    right: 10px;
}

    #barraMenuSinistra .menu-supporto label {
        text-transform: uppercase;
        font-weight:bold;
        color: #F39021;
        font-size: 18px;
        font-weight: 700;
        float: right;
        margin-bottom: -2px;
    }

#menu_sinistra .menu-supporto-email {
    color: #35496A;
    font-size: 18px;
    font-weight: 700;
    line-height: 20px;
    letter-spacing: 1px;
    text-align: right;
}

@media screen and (max-height: 580px) {
    .menu-footer {
        display:none;
    }
}




/******************************************************/
/*             ICONA MENU                             */
/******************************************************/

#menu_sinistra #menu_icona {
    position: fixed;
    top: 70px;
    left: 10px;
    width: 50px;
    height: 50px;
    background-repeat: no-repeat;
    background-size: contain;
}

    #menu_sinistra #menu_icona:hover .menu-icona-barra {
        transition: background-color 0.3s ease;
        background-color: #1E2633;
    }

#menu_sinistra .menu-icona-etichetta {
    margin-bottom: 4px;
    margin-left: 4px;
    height: 13px;
    width: 42px;
    color: #35496A;
    font-family: Calibri;
    font-size: 15px;
    font-weight: 700;
    line-height: 13px;
    text-align: center;
}

#menu_sinistra .menu-icona-barra-1 {
    height: 6px;
    width: 41px;
    border-radius: 3px;
    width: 50px;
    height: 8px;
    margin-bottom: 3px;
    background: #1E5E2E;
    transition: width 0.4s;
    -webkit-transition: width 0.4s; /* Safari 3.1 to 6.0 */
}

#menu_sinistra .menu-icona-barra-2 {
    height: 8px;
    width: 36px;
    border-radius: 3px;
    background-color: #F39021;
    margin-bottom: 3px;
    transition: width 0.4s;
    -webkit-transition: width 0.4s; /* Safari 3.1 to 6.0 */
}

#menu_sinistra .menu-icona-barra-3 {
    height: 8px;
    width: 24px;
    border-radius: 3px;
    background-color: #1E5E2E;
    margin-bottom: 3px;
    transition: width 0.4s;
    -webkit-transition: width 0.4s; /* Safari 3.1 to 6.0 */
}

#menu_sinistra #menu_icona:hover .menu-icona-barra-1 {
    transition: width 0.4s;
    width: 61px;
    background-color: #2C7A3E;
}

#menu_sinistra #menu_icona:hover .menu-icona-barra-2 {
    transition: width 0.4s;
    width: 50px;
    background-color: #2C7A3E;
}

#menu_sinistra #menu_icona:hover .menu-icona-barra-3 {
    transition: width 0.4s;
    width: 34px;
    background-color: #2C7A3E;
}











/******************************************************/
/*      ALTEZZA RIDOTTA                               */
/*                                                    */
/*  Da quando le funzioni stanno nel pannello a       */
/*  fianco, qui restano poche voci: il menu si adatta */
/*  al contenuto invece di occupare tutta l'altezza   */
/*  della finestra, e il raggio in basso a destra     */
/*  torna a vedersi.                                  */
/******************************************************/

#barraMenuSinistra {
    height: auto;
    /* su finestre basse non sborda: si ferma e scorre */
    max-height: 100%;
    overflow-y: auto;
    /* Supporto e Id PO restano ancorati al fondo del riquadro. Essendo fuori dal flusso non
       contano nell'altezza calcolata: qui si riserva lo spazio che occupano, altrimenti
       finirebbero sopra le voci. */
    padding-bottom: 140px;
    /* serve solo a poter riordinare i blocchi qui sotto */
    display: flex;
    flex-direction: column;
}

/******************************************************/
/*      ORDINE DEI BLOCCHI                            */
/*                                                    */
/*  Il saldo sale sopra le voci: e' il dato che si    */
/*  guarda per primo, e sotto restano documenti e     */
/*  videoguide, che si aprono di rado.                */
/*                                                    */
/*  Si riordina da qui e non nel markup perche' il    */
/*  markup e' uno solo per tutte le brandizzazioni:   */
/*  cambiarlo sposterebbe il saldo anche a chi il     */
/*  menu delle funzioni non ce l'ha.                  */
/******************************************************/

#barraMenuSinistra .menu-chiudi {
    order: 1;
}

#barraMenuSinistra .menu-logo {
    order: 2;
}

#barraMenuSinistra .menu-denominazionePoint {
    order: 3;
}

#barraMenuSinistra .menu-saldo {
    order: 4;
}

#barraMenuSinistra .menu-voci {
    order: 5;
    margin-top: 28px;
}

#barraMenuSinistra .menu-footer {
    order: 6;
}

/* con poche voci sopra, le distanze pensate per un menu pieno lasciano vuoti che si notano */
.menu-denominazionePoint {
    margin-bottom: 40px;
}

/* lo stacco dalla ragione sociale ce l'ha gia' lei: qui basta togliere quello pensato per
   quando il saldo stava sotto le voci */
#barraMenuSinistra .menu-saldo {
    margin-top: 0 !important;
}

/* Con pochissime voci il riquadro diventerebbe un francobollo: gli si da' un'altezza minima
   che lo tiene proporzionato al pannello che gli sta accanto. Solo su finestre alte
   abbastanza da contenerla, altrimenti l'altezza minima vincerebbe sul massimo e sborderebbe. */
@media screen and (min-height: 760px) {
    #barraMenuSinistra {
        min-height: 560px;
    }
}

/* senza il blocco in fondo non c'e' spazio da riservare */
@media screen and (max-height: 580px) {
    #barraMenuSinistra {
        padding-bottom: 28px;
    }
}




/***************************************************************/
/* CARRELLO MINI                                               */
/***************************************************************/

.carrello-mini {
    width:220px;
    top:-0px;
    right:300px;
    z-index:108;
    background-color:white;
    border:solid 1px #e0e0e0;
    border-radius:5px;
    box-shadow: -8px 2px 8px -1px rgba(7, 10, 25, 0.2), 0 22px 27px -20px rgba(7, 10, 25, 0.2);
    float:right;
}

.carrello-mini .fa {
    position:absolute;
    top:7px;
    left:8px;
    font-size:30px !important;
    color:white;
}

.carrello-mini-info{
    position:absolute !important;
    margin:auto;
    margin-top:50px;
    width:600px;
    padding: 0px 24px 18px 24px !important;
    background-color:white;
    padding:10px;
    box-shadow: -4px 4px 4px -1px rgba(7, 10, 25, 0.2), 0 22px 27px -20px rgba(7, 10, 25, 0.2);
    border-radius:6px;
    font-size:15px;
    z-index:100;
    border:solid 1px #e0e0e0;
    text-align:justify;
}

.carrello-mini-info h2{
    font-family:Calibri;
    font-size:22px;
    font-weight:bold;
}

.carrello-mini-header {
    background-color:#28293e;
    height:44px;
    width:100%;
    border-top-left-radius:5px;
    border-top-right-radius:5px;
    border-bottom:solid 3px #73d3ff;
    box-shadow: -4px 4px 4px -1px rgba(7, 10, 25, 0.2), 0 22px 27px -20px rgba(7, 10, 25, 0.2);
}

.carrello-mini-header .carrello-pagamenti-info {
    width:60%;
    text-align:right;
    padding:4px;
    float:left;
}

.carrello-mini-header .carrello-pagamenti-info h1 {
    margin:0px;
    color:white;
    font-size:20px !important;
    text-transform:capitalize;
    padding-left:40px;
    color:white !important;
}

.carrello-mini-header .carrello-pagamenti-info h2 {
    margin:0px;
    color:#73d3ff;
    font-size:11px;
    letter-spacing:0.5px;
    margin-top:1px;
    text-align:right;
}

.carrello-mini-body {
    padding:4px 10px 0px 10px;
}

.carrello-pagamenti-tot {
    float:right;
    text-align:center;
    font-size:24px;
    color:#73d3ff;
    padding:5px 14px 0px 6px;
}

    .carrello-pagamenti-tot span {
        font-weight:bold;
        color:white;
    }

.carrello-mini-body-totale {
    font-size:34px;
    padding:10px;
    font-weight:bold !important;
}

.carrello-mini-footer {
    text-align:center;
}

.carrello-mini .comandi {
    padding:0px 10px 10px 10px;
    text-align:center;
}

.carrello-mini-totale {
    font-weight:bold;
    font-size:40px;
}

.carrello-mini-footer {
    padding:10px;
}

    .carrello-mini-footer a {
        font-weight:bold;
        text-align:center;
        color:#344657 !important;
        text-decoration:overline !important;
    }


/***************************************************************/
/* CARRELLO PAGAMENTI                                          */
/***************************************************************/

.carrello-pagamenti {
    margin-right:10px;
    margin-bottom:100px;
}

.carrello-pagamenti-riga {
    position:relative;
    padding:4px 10px;
    border:solid 1px #e4e4e4;
    width:100%;
    min-height:110px;
    margin-bottom:10px;
    overflow:auto;
    box-shadow: 4px 4px 4px -1px rgba(7, 10, 25, 0.4), 0 22px 27px -20px rgba(7, 10, 25, 0.2);
    border-radius:4px;
    border:solid 4px;
}

.carrello-pagamenti-riga-checkbox {
    width:20px;
    min-height:60px;
    float:left;
    margin-right:24px;
    padding-top:20px;
    margin-top:-12px;
}

.carrello-pagamenti-riga-checkbox input[type="checkbox"] {
    width:22px;
    height:22px;
}

.carrello-pagamenti-riga-tipo {
    font-weight:bold;
    font-size:22px;
    color:#053948;
}

.carrello-pagamenti-riga-causale {
    float:left;
    font-size:16px;
    letter-spacing:1px;
    max-width:300px;
    padding-bottom:34px;
}

.carrello-pagamenti-riga-commissione {
    right:170px;
    top:24px;
    position:absolute;
    font-size:28px;
    text-align:right;
}

    .carrello-pagamenti-riga-commissione .etichetta {
        font-size:16px;
    }

.carrello-pagamenti-riga-importo {
    position:absolute;
    right:20px;
    top:20px;
    font-size:30px;
    font-weight:bold;
    text-align:right;
}

    .carrello-pagamenti-riga-importo .etichetta {
        font-size:16px;
    }


.carrello-pagamenti-riga .fa-trash {
    color:red;
    font-size:22px;
}


/*Prenotato*/
.carrello-pagamenti-riga.stato-0 {
    border-color:#f5f6f8;
}

.carrello-pagamenti-riga.stato-1 {
    border-color:#1bb394;
}

.carrello-pagamenti-riga.stato-2 {
}

.carrello-pagamenti-riga.stato-3 {
}

.carrello-pagamenti-riga .stato-etichetta {
    position:absolute;
    bottom:10px;
    left:55px;
    padding:2px 10px 0px;
    border-radius:4px;
    border-top-right-radius:4px;
    font-weight:bold;
    width:120px;
    text-align:center;
    text-transform:uppercase;
    color:white;
    letter-spacing:1px;
}

/*Prenotato*/
.stato-etichetta.stato-etichetta-0 {
    border-color:#e5e6e7;
    background-color:#ff6a00;
}

/*Pagato*/
.stato-etichetta.stato-etichetta-1 {
    border-color:#e5e6e7;
    background-color:#1bb394;
}

/*Errore*/
.stato-etichetta.stato-etichetta-2,
.stato-etichetta.stato-etichetta-3,
.stato-etichetta.stato-etichetta-4,
.stato-etichetta.stato-etichetta-5,
.stato-etichetta.stato-etichetta-6,
.stato-etichetta.stato-etichetta-7,
.stato-etichetta.stato-etichetta-8
{
    border-color:#e5e6e7;
    background-color:#ed5565;
}


.carrello-pagamenti-info-utili {
    min-height:300px;
    padding:10px;
    font-size:16px;
}


.processo-pagamento-carrello .megaNotifica {
    width:100% !important;
    overflow:auto !important;
    margin-block:10px;
}

.processo-pagamento-carrello .megaNotifica-success {
    border-left-color:#1AB394;
    border-radius:3px;
}

    .processo-pagamento-carrello .megaNotifica-success .fa {
        color:#1bb394;
        margin-right:10px;
    }

    .processo-pagamento-carrello .megaNotifica-alert,
.processo-pagamento-carrello .megaNotifica-alert .fa{
    border-left-color:#ed5565;
    color:#ed5565;
}

 .processo-pagamento-carrello .notifica-note {
        font-size:20px;
        width:100% !important;
        margin-left:30px;
    }

.processo-pagamento-carrello .megaNotifica-testo {
       font-size:18px;
       margin-left:46px;
       line-height:26px;
}

.processo-pagamento-carrello .megaNotifica-ulterioriInformazioni {
    margin-top: 14px;
    font-size: 16px;
    color: black;
    margin-left:46px;
}

.processo-pagamento-carrello .selezioneTipoPagamento {
    position: fixed;
    left: -90px;
    bottom: 110px !important;
    background-color: white !important;
    margin: auto;
    z-index: 101;
    padding-bottom: 30px;
}


.carrello-pagamenti-recap {
    position:fixed;
    border:solid 4px #f5f6f8;
    box-shadow: 4px 4px 4px -1px rgba(7, 10, 25, 0.4), 0 22px 27px -20px rgba(7, 10, 25, 0.2);
    background-color:white;
    z-index:5001;
    border-radius:4px;
    bottom:0px;
    width:100%;
    padding:13px 20px;
    left:0px;
    background-color:#f9fafb;
    box-shadow: 0px 2px 2px rgba(7, 10, 25, 0.4), 0px -3px 3px rgba(7, 10, 25, 0.2);
    text-align:center;
    max-height:280px;
}

.carrello-pagamenti-recap-body {
    max-width:1000px;
    margin:auto;
}

.carrello-pagamenti-recap.esito_ok {
    border-top:8px #1bb394 solid;
}

.carrello-pagamenti-recap.esito_ko {
    border-top:8px #ed5565 solid;
}

.carrello-pagamenti-recap-esito-messaggio {
    padding:10px;
    max-height:70px;
    overflow-y:scroll;
}

.carrello-pagamenti-elenco {
    margin-top:5px;
    width:100%;
    padding-right:26px;
    min-height:140px;
    padding-bottom:150px;
}

.carrello-pagamenti-recap .comandi {
    width: 100%;
}

.carrello-pagamenti-recap table tr td {
    padding:1px;
}

.carrello-pagamenti-recap-etichetta {
    font-size:14px;
    font-weight:bold;
    text-align:right;
    color:#000000;
    text-transform:uppercase;
    letter-spacing:0.5px;
}

.carrello-pagamenti-recap-importo {
    font-size:29px;
    font-weight:bold;
    text-align:right;
}

.carrello-pagamenti-recap-importo.pagato {
    color:#1bb394;
}

.carrello-pagamenti-recap-importo.da-pagare {
}

.carrello-pagamenti-recap .comandi {
    margin-top:-24px;
    text-align:right;
    float:right;
}

.carrello-pagamenti-recap .comandi .btn-success,
.processo-pagamento-carrello-body .comandi .btn-success{
    width: 244px;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-weight:bold;
    font-size:24px !important;
    padding:6px 30px !important;
    height:54px !important;
    width:300px;
}

.carrello-pagamenti-ricevuta {
    border-radius: 8px;
    background-color: white;
    width: 437px;
    height:474px;
    display: inline-block;
    padding: 16px 30px 20px 36px;
    position: fixed;
    top: 50px !important;
    right: 300px;
    z-index: 5010;
    padding: 0px 10px;
    border: 6px solid #344657;
    border-radius: 5px;
    border-top: 30px solid #344657;
    box-shadow: 20px 20px 10px -1px rgba(7, 10, 25, 0.4), 0 22px 27px -20px rgba(7, 10, 25, 0.2);
    
}


/***************************************************************/
/* CARRELLO MINIATURA                                          */
/***************************************************************/

#carrello-miniatura {
    width: 60px;
    z-index: 1000;
    position: fixed;
    top: 150px;
    right: 0px;
    background-color: #344657;
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
    padding: 10px 13px;    
    border-left: solid 3px #344657;
    border-top: solid 3px #344657;
    border-bottom: solid 3px #344657;
}

    #carrello-miniatura .fa-shopping-cart {
       font-size:30px;
       color:white;
    }

    #carrello-miniatura:hover {
        border-left: solid 3px #73d3ff;
        border-top: solid 3px #73d3ff;
        border-bottom: solid 3px #73d3ff;
    }


/***************************************************************/
/* ARCHIVIO CARRELLI                                           */
/***************************************************************/

.archivio-carello-ricerca {
    padding: 10px 0px;
}

.archivio-carello-elenco {
}

.carrello-stato {
    font-size: 12px;
    height: 20px;
    width: 120px;
    text-align: center;
    font-weight: bold;
    margin-top: 4px;
    margin-bottom: 4px;
    color: white;
    padding: 3px 6px 6px 10px;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: 1.4px;
}
    /*Stati di riferimento in EStatoCarrelloPostSystem*/
    .carrello-stato.carrello-stato-1 {
        background-color: white;
        color: #344657;
    }

    .carrello-stato.carrello-stato-2 {
        background-color: #1bb394;
    }

    .carrello-stato.carrello-stato-3 {
        background-color: #ff6a00;
    }

    .carrello-stato.carrello-stato-4 {
        background-color: #ed5565;
    }

.supporto-resto {
    /* regole base */
    border-radius: 8px;
    border: solid 6px #364758;
    padding: 20px 20px;
    width: 260px;
    z-index: 10000;
    background-color: white;
    box-shadow: 10px 2px 30px 0 #35496A;
}

    .supporto-resto.centered { /* centro schermo */
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        margin: auto;
    }

    .supporto-resto.right { /* a destra, margin 0 */
        position: fixed;
        top: 200px;
        right: -265px;
        margin: 0px;
        transform: none;
    }

    .supporto-resto b {
        color:#35496A;
        font-size:16px;
    }

.supporto-resto-header {
    font-weight:bold;
    font-size:18px;
    padding:10px 0px;
}

.supporto-resto-toggle {
    background-color: #344657;
    border: solid 3px #364758;
    border-right: none;
    width: 66px;
    height: 56px;
    margin-top: -50px;
    margin-left: -92px;
    border-bottom-left-radius: 10px;
    border-top-left-radius: 10px;
}

    .supporto-resto-toggle:hover {
        border: solid 3px #73d3ff;
        border-right: none !important;
    }

    .supporto-resto-toggle .fa {
        font-size: 26px;
        color: white;
        padding: 12px 13px;
    }

.supporto-resto-body {
    margin-top:-10px;
}

.supporto-resto-importo-resto {
    font-size: 50px;
    font-weight: bolder;
    color: #1ab394;
    text-align: right;
    width:100%;
    line-height:40px;
}

.supporto-resto input[type=text] {
    text-align: right !important;
    font-size: 35px !important;
    width: 100% !important;
    padding: 4px 12px !important;
    border-radius: 4px;
}

    .supporto-resto .col {
        margin-bottom:10px;
    }

    .supporto-resto-comandi{
        padding:20px 20px;
    }

.supporto-resto-comandi .btn {
    height:46px !important;
    padding:10px 40px;
    width:100%;
    margin-bottom:10px;
}
/* Elenco di documenti: sezione delle aree e pagina Documenti. */

/* Icona davanti al titolo di sezione. */
#pagina .sezione .titolo .iconaTitolo {
    margin-right: 8px;
    font-size: .95em;
    color: var(--bf-accento, #35496A);
}

/* Uno sotto l'altro. */
#pagina .documentiArea .elencoDocumenti {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding-top: 4px;
}

#pagina .documentiArea .documento {
    display: flex;
    align-items: center;
    box-sizing: border-box;
    width: 100%;
    min-height: 52px;
    padding: 8px 12px;
    border: 1px solid #D9DEE5;
    border-radius: 4px;
    background-color: #FFF;
    color: #35496A;
    text-decoration: none;
    transition: background-color .15s ease, color .15s ease;
}

#pagina .documentiArea .documento:hover,
#pagina .documentiArea .documento:focus,
#pagina .documentiArea .documentoSelezionato {
    background-color: var(--bf-accento, #35496A);
    color: #FFF;
    text-decoration: none;
}

/* Targhetta del formato. */
#pagina .documentiArea .etichettaFormato {
    flex: 0 0 auto;
    margin-right: 10px;
    padding: 2px 6px;
    border-radius: 3px;
    background-color: var(--bf-accento, #35496A);
    color: #FFF;
    font-size: 11px;
    font-weight: bold;
    letter-spacing: .5px;
    line-height: 1.3;
    transition: background-color .15s ease, color .15s ease;
}

#pagina .documentiArea .documento:hover .etichettaFormato,
#pagina .documentiArea .documento:focus .etichettaFormato,
#pagina .documentiArea .documentoSelezionato .etichettaFormato {
    background-color: #FFF;
    color: var(--bf-accento, #35496A);
}

#pagina .documentiArea .testoDocumento {
    display: block;
    flex: 1 1 auto;
    min-width: 0;
}

#pagina .documentiArea .titoloDocumento {
    display: block;
    font-size: 14px;
    font-weight: bold;
    line-height: 1.25;
}

#pagina .documentiArea .descrizioneDocumento {
    display: block;
    margin-top: 2px;
    font-size: 13.5px;
    font-weight: normal;
    line-height: 1.35;
    opacity: .85;
}

/* Sul fondo pieno la descrizione va in chiaro. */
#pagina .documentiArea .documento:hover .descrizioneDocumento,
#pagina .documentiArea .documento:focus .descrizioneDocumento,
#pagina .documentiArea .documentoSelezionato .descrizioneDocumento {
    opacity: 1;
}

/* Senza descrizione resta il solo titolo. */
#pagina .documentiArea .descrizioneDocumento:empty {
    display: none;
}

/* Aree da cui si raggiunge il documento: serve dove i documenti di aree diverse stanno in
   un elenco solo. */
#pagina .documentiArea .etichettaAree {
    flex: 0 0 auto;
    margin-right: 12px;
    padding: 2px 8px;
    border-radius: 10px;
    background-color: #EDF0F4;
    color: #35496A;
    font-size: 11px;
    line-height: 1.4;
    white-space: nowrap;
}

#pagina .documentiArea .documento:hover .etichettaAree,
#pagina .documentiArea .documento:focus .etichettaAree {
    background-color: rgba(255, 255, 255, .22);
    color: #FFF;
}

#pagina .documentiArea .etichettaAree:empty {
    display: none;
}

/* Icona in fondo alla riga: dice cosa fa il rettangolo. */
#pagina .documentiArea .iconaAzione {
    flex: 0 0 auto;
    padding-left: 12px;
    font-size: 16px;
    opacity: .55;
}

#pagina .documentiArea .documento:hover .iconaAzione,
#pagina .documentiArea .documento:focus .iconaAzione,
#pagina .documentiArea .documentoSelezionato .iconaAzione {
    opacity: 1;
}

/* Il saldo e' in posizione assoluta e non occupa altezza: senza i documenti accanto, la
   sezione sotto gli salirebbe addosso. */
#pagina .colonnaSaldo .info {
    min-height: 64px;
}

/* Pagina Documenti: l'elenco e' da solo in pagina e senza un freno arriverebbe a tutta
   larghezza dello schermo. */
#pagina .documentiPagina {
    max-width: 720px;
    margin-top: 20px;
}

/* ============================================================= */
/*  Info utili sull'esecuzione del Bonifico                       */
/*  Stile condiviso da tutte le brandizzazioni SiPay.            */
/*  Volutamente NON brandizzato: si usa il verde PostSystem      */
/*  (#1AB394), come da indicazione.                              */
/*  Sorgente: Common/Styles/Pagamenti29082025.css (PostSystem).  */
/* ============================================================= */

/* Codice della Carta d'Identita' Elettronica: 9 caratteri (es. CA00000AA), casella breve */
#bonifico .datiPagamento-codiceCIE-etichetta {
    display: block;
}

/* Il grassetto dentro un tooltip prende il colore del tooltip stesso: la regola generale su <b>
   di SiPayStyle.css lo renderebbe scuro e illeggibile sul fondo scuro del tooltip.
   Qui e' limitato ai Bonifici perche' SiPayStyle.css e' duplicato per ogni brandizzazione */
#bonifico .tooltip-text b,
#bonifico .tooltip-text strong {
    color: inherit;
    text-transform: none;
}

/* la (i) con il tooltip di spiegazione, a fianco dell'etichetta */
#bonifico .datiPagamento-codiceCIE .tooltip-down-sf {
    margin-left: 6px;
    color: #1AB394;
    cursor: pointer;
}

/* Tooltip ancorato all'icona: essendo a inizio riga, quello centrato uscirebbe dal bordo sinistro.
   Si apre verso il basso perche' l'icona sta in cima al riquadro del tab: verso l'alto il tooltip
   ne uscirebbe e verrebbe tagliato dalla striscia dei tab */
#bonifico .datiPagamento-codiceCIE .tooltip-text {
    width: 280px;
    left: 0;
    margin-left: -24px;
    text-align: left;
}

    /* freccia sopra il tooltip, rivolta verso l'icona */
    #bonifico .datiPagamento-codiceCIE .tooltip-text::after {
        content: "";
        position: absolute;
        bottom: 100%;
        left: 24px;
        margin-left: -5px;
        border-width: 5px;
        border-style: solid;
        border-color: transparent transparent #485D71 transparent;
    }

/* larghezza calcolata sui 9 caratteri maiuscoli a 18px con letter-spacing 2px (~120px)
   piu' padding e bordi: con 110px l'ultimo carattere restava fuori dalla casella */
#bonifico .datiPagamento-codiceCIE input[type=text] {
    width: 160px;
    margin-top: 6px;
    padding: 8px 10px;
    font-size: 18px;
    font-weight: bold;
    letter-spacing: 2px;
    text-transform: uppercase;
    text-align: center;
    /* il letter-spacing aggiunge spazio anche dopo l'ultimo carattere: senza questo
       rientro il testo centrato risulterebbe spostato di 2px verso sinistra */
    text-indent: 2px;
}

#bonifico .comandi {
    margin-top: 18px;
}

/* --- Dati del Bonifico: stessa resa in anteprima e in esito --- */

/* il tipo di bonifico fa da titolo, al posto del fatturatore dei bollettini */
#bonifico .datiBonifico-tipo {
    font-size: 22px;
    font-weight: bold;
}

#bonifico .datiBonifico-voce {
    margin-top: 22px;
}

/* etichetta in grassetto, su riga propria */
#bonifico .datiBonifico-etichetta {
    display: block;
    font-weight: bold;
}

/* i valori vanno a capo subito sotto la loro etichetta, uno per riga */
#bonifico .datiBonifico-iban,
#bonifico .datiBonifico-codiceFiscale,
#bonifico .datiBonifico-stato,
#bonifico .datiBonifico-cro {
    display: block;
    letter-spacing: 1px;
}

/* --- Esito del Bonifico: stesse due colonne dell'anteprima --- */
#bonifico #esitoPagamento .datiBonifico {
    min-width: 480px;
    float: left;
}

/* Il messaggio di esito occupa una riga tutta sua: .notifica-alert nasce float:left
   e spingerebbe di lato le due colonne dei dati */
#bonifico #esitoPagamento .notifica {
    float: none;
    overflow: auto;
}

/* La (!) nasce piccola: giusto un filo piu' grande, il triangolo pieno pesa gia' di suo */
#bonifico #esitoPagamento .fa-exclamation-triangle {
    font-size: 30px;
    vertical-align: middle;
}

/* Il margine negativo generale serve al markup dei bollettini, che ha un <br /> dopo il titolo:
   qui il titolo finirebbe addossato alla riga dell'Importo */
#bonifico #esitoPagamento .dettaglioCosti table {
    margin-top: 10px;
}

/* --- Anteprima del Bonifico: due colonne come per gli altri pagamenti --- */

/* qui l'anteprima e' larga 700px e il dettaglio costi ne occupa 300 */
#bonifico .anteprimaPagamento .datiBonifico {
    width: 550px;
    float: left;
}

/* la causale scorre sotto entrambe le colonne, come nell'anteprima dei bollettini */
#bonifico .anteprimaPagamento .datiBonifico-causale {
    width: 370px;
    clear: both;
}

/* Info utili sull'esecuzione del Bonifico: link discreto + dialog nativo */
#bonifico .bonifico-infoUtili {
    width: 580px;
    max-width: 100%;
    /* lo stacco sotto il righino e' dato dal margin-top del campo QRCode */
    margin: 0;
    padding: 0 0 1px 6px;
    border-bottom: solid 1px #eeeeee;
    font-size: 15px;
}

    /* "Info utili:" e icona in verde, il resto nel colore classico del testo */
    #bonifico .bonifico-infoUtili a {
        color: #333333;
        text-decoration: none;
        outline: none;
    }

        #bonifico .bonifico-infoUtili a:hover {
            text-decoration: underline;
        }

    #bonifico .bonifico-infoUtili .bonifico-infoUtili-etichetta {
        color: #1AB394;
        font-weight: bold;
    }

.bonifico-infoUtili-dialog {
    width: 680px;
    max-width: 90vw;
    /* alza il dialog rispetto al centro verticale nativo, mantenendo il centraggio orizzontale */
    margin-top: 6vh;
    padding: 24px 28px;
    border: none;
    border-radius: 4px;
    box-shadow: 0 8px 28px rgba(0,0,0,.22);
    color: #333333;
    font-size: 16px;
    line-height: 1.5;
}

    .bonifico-infoUtili-dialog::backdrop {
        background-color: rgba(0,0,0,.35);
    }

    .bonifico-infoUtili-dialog h3 {
        margin: 0 0 18px 0;
        color: #1AB394;
        font-size: 22px;
        font-weight: bold;
    }

    .bonifico-infoUtili-dialog dl {
        margin: 0;
    }

    .bonifico-infoUtili-dialog dt {
        margin-top: 14px;
        font-weight: bold;
    }

        .bonifico-infoUtili-dialog dt:first-child {
            margin-top: 0;
        }

    .bonifico-infoUtili-dialog dd {
        margin: 4px 0 0 0;
        color: #666;
    }

    .bonifico-infoUtili-dialog a {
        color: #1AB394;
    }

        /* niente riquadro di focus sul link email quando il dialog si apre */
        .bonifico-infoUtili-dialog a:focus,
        .bonifico-infoUtili-dialog a:focus-visible {
            outline: none;
        }

.bonifico-infoUtili-dialog-comandi {
    margin-top: 22px;
    text-align: right;
}

    .bonifico-infoUtili-dialog-comandi button {
        padding: 8px 22px;
        border: none;
        border-radius: 4px;
        background-color: #1AB394;
        color: #fff;
        font-size: 16px;
        cursor: pointer;
    }

        .bonifico-infoUtili-dialog-comandi button:hover {
            background-color: #17a085;
        }


/* ============================================================= */
/*  Icona dei Bonifici (edificio bancario con moneta in Euro)    */
/*  Prende il posto del glifo Font Awesome fa-exchange nei       */
/*  riquadri delle aree e nella barra delle operazioni           */
/*  ricorrenti, cosi' e' la stessa della scelta del pagamento.   */
/*  E' disegnata come maschera e non come background-image:      */
/*  in questo modo assume da sola il colore del testo del        */
/*  contesto (bianco sui riquadri brandizzati) e non serve un    */
/*  file per ogni brandizzazione.                                */
/*  I percorsi sono relativi a SiPay/<Brand>/Styles/ perche' e'  */
/*  li' che viene servito il bundle che include questo file.     */
/* ============================================================= */

/* il blocco sta dentro @supports perche' senza maschere il riquadro colorato del ::before
   resterebbe pieno: meglio nessuna icona che un rettangolo bianco */
@supports ((-webkit-mask-image: url('icona.svg')) or (mask-image: url('icona.svg'))) {

    .icona-bonifico::before,
    .icona-bonifico-piccola::before {
        content: "";
        display: inline-block;
        width: 1.125em; /* proporzione 576x512 del disegno */
        height: 1em;
        /* La casella di un inline-block appoggia il proprio bordo inferiore sulla linea di base,
           mentre il glifo di un carattere scende sotto di essa: senza questa discesa la riga
           diventerebbe piu' alta di 1,4px, la barra delle operazioni ricorrenti si gonfierebbe
           e il pulsante dei Bonifici resterebbe l'unico fuori linea. Con -0,18em la casella
           rientra in quella dei glifi Font Awesome accanto: misurato a video, e' il valore
           piu' piccolo che azzera lo scarto sia a zoom 100% sia a zoom 200%. */
        vertical-align: -0.18em;
        background-color: currentColor;
        -webkit-mask-repeat: no-repeat;
        mask-repeat: no-repeat;
        -webkit-mask-position: center;
        mask-position: center;
        -webkit-mask-size: contain;
        mask-size: contain;
    }

    .icona-bonifico::before {
        -webkit-mask-image: url('../../../Common/Immagini/Bollettini/Icone/bonifici.svg');
        mask-image: url('../../../Common/Immagini/Bollettini/Icone/bonifici.svg');
    }

    /* sotto i ~30px le 4 colonne e il simbolo dell'Euro si impastano: variante a 3 colonne */
    .icona-bonifico-piccola::before {
        -webkit-mask-image: url('../../../Common/Immagini/Bollettini/Icone/bonifici-piccola.svg');
        mask-image: url('../../../Common/Immagini/Bollettini/Icone/bonifici-piccola.svg');
    }
}

/* Briciola sopra il titolo delle pagine operative: Il mio Point > area */
#pagina_intestazione .titolo .briciolaArea {
    display: block;
    /* sempre sopra il titolo: evita il lampeggio in hover */
    position: relative;
    z-index: 1;
    margin-bottom: -8px;
    font-size: 13px;
    line-height: 22px;
    white-space: nowrap;
    opacity: .55;
    transition: opacity .2s ease;
}

    #pagina_intestazione .titolo .briciolaArea:hover {
        opacity: 1;
    }

    #pagina_intestazione .titolo .briciolaArea .briciolaHome,
    #pagina_intestazione .titolo .briciolaArea .nomeArea {
        font-weight: 600;
        letter-spacing: .04em;
        text-transform: uppercase;
        text-decoration: none;
    }

    #pagina_intestazione .titolo .briciolaArea .briciolaHome {
        color: #6B7280;
    }

        #pagina_intestazione .titolo .briciolaArea .briciolaHome .fa-home {
            margin-right: 2px;
        }

    #pagina_intestazione .titolo .briciolaArea .separatore {
        margin: 0 6px;
        font-size: 13px;
        color: #6B7280;
    }

    #pagina_intestazione .titolo .briciolaArea .nomeArea {
        color: var(--bf-accento, #35496A);
    }

        /* Sullo span e non sul link: i fogli dei brand tolgono la sottolineatura a tutti gli a */
        #pagina_intestazione .titolo .briciolaArea .briciolaHome:hover .testoBriciola,
        #pagina_intestazione .titolo .briciolaArea .nomeArea:hover .testoBriciola {
            text-decoration: underline;
        }

/**************************************************************************************/
/*  Barra delle funzioni delle brandizzazioni point                                   */
/*                                                                                    */
/*  Pannello affiancato al menu colorato: si apre e si chiude con lui, quindi qui non  */
/*  ci sono stati di apertura, solo la resa di cio' che il server ha gia' deciso di    */
/*  mostrare.                                                                          */
/*                                                                                     */
/*  Foglio unico per tutte le brandizzazioni: i colori arrivano dalle variabili        */
/*  --bf-*, che ogni brand dichiara nel proprio SiPayStyle.css. I valori di ripiego     */
/*  scritti in ogni var() servono ai brand che non le hanno ancora: il pannello resta   */
/*  leggibile invece di restare senza colore.                                           */
/*                                                                                     */
/*  Gli stati non usano bordi ne' contorni di fuoco: dove serve separare o evidenziare  */
/*  si ricorre a un riempimento tenue.                                                  */
/**************************************************************************************/

/**************************************************************************************/
/*  Suggerimento sul pulsante MENU                                                    */
/*                                                                                    */
/*  Usa il tooltip gia' presente nei fogli delle brandizzazioni (tooltip-right-sf):    */
/*  qui si allarga soltanto il riquadro, che di suo sta su 150px e spezzerebbe la      */
/*  descrizione della scorciatoia su troppe righe.                                     */
/**************************************************************************************/

#menu_icona.tooltip-right-sf .tooltip-text {
    width: 250px;
    text-align: left;
    line-height: 1.4;
    top: 0;
}

/* Il corpo e il colore sono quelli del titolo di sopra tolti di un gradino, non due: la
   descrizione e' subordinata, ma resta una frase da leggere - e a 11.5px in grigio azzurro
   sul fondo scuro si guardava soltanto. */
.menu-icona-suggerimento {
    display: block;
    margin-top: 4px;
    font-size: 12.5px;
    line-height: 1.45;
    color: #e3ebf3;
}

/**************************************************************************************/
/*  Aperto o chiuso                                                                   */
/*                                                                                    */
/*  Il pannello viene ora disegnato su ogni pagina e non piu' al solo clic sul MENU:   */
/*  la colonna agganciata deve poterlo mostrare senza tornare al server, e per farlo   */
/*  il markup deve gia' esserci.                                                       */
/*                                                                                    */
/*  Finche' non e' aperto non si vede. Si toglie dal disegno invece di velarlo: da     */
/*  chiuso non deve raccogliere clic ne' occupare spazio, e cosi' l'apertura resta     */
/*  esattamente quella di prima, animazioni comprese.                                  */
/**************************************************************************************/

.bfSiPayBarra:not(.bfSiPayAperta) > .bfSiPayVelo,
.bfSiPayBarra:not(.bfSiPayAperta) > #bfSiPay,
.bfSiPayBarra:not(.bfSiPayAperta) > .bfSiPayRecenti {
    display: none;
}

/**************************************************************************************/
/*  Velatura                                                                          */
/*                                                                                    */
/*  Copre la pagina e sta sotto al menu colorato (100000) e al pannello (100001):      */
/*  smorza cio' che c'e' sotto e raccoglie i clic fuori dal menu, che lo chiudono.     */
/**************************************************************************************/

.bfSiPayVelo {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 99998;
    background-color: rgba(16, 24, 40, .34);
    /* accompagna il menu colorato, quindi entra subito e senza attese */
    animation: bfSiPayVelaturaEntra .3s ease both;
}

@keyframes bfSiPayVelaturaEntra {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/**************************************************************************************/
/*  Pannello                                                                          */
/*                                                                                    */
/*  I 316px di rientro sono i 300 del menu colorato piu' 16 di stacco: cambiando la    */
/*  larghezza del menu va rivisto questo valore, e con esso quello delle piu' usate.   */
/**************************************************************************************/

#bfSiPay {
    position: fixed;
    top: 70px;
    left: 316px;
    /* il menu colorato sta a 100000: il pannello gli appartiene e deve stargli sopra */
    z-index: 100001;
    width: 320px;
    /* si adatta al contenuto e si ferma prima del fondo pagina, dove inizia a scorrere */
    max-height: calc(100% - 90px);
    display: flex;
    flex-direction: column;
    font-family: 'Nunito Sans', sans-serif;
    background-color: #ffffff;
    border-radius: 10px;
    box-shadow: 0 12px 34px rgba(16, 24, 40, .22);
    overflow: hidden;
    /* Il ritardo lascia entrare prima il menu colorato, che arriva da sinistra con la propria
       animazione: senza, il pannello sarebbe gia' fermo mentre il menu e' ancora in viaggio.
       Con "both" il pannello resta invisibile per tutto il ritardo invece di lampeggiare. */
    animation: bfSiPayEntra .5s cubic-bezier(.22, .61, .36, 1) .3s both;
}

/* Entra da sinistra come la barra colorata: sembra uscire da dietro il menu, che a quel
   punto si e' appena fermato */
@keyframes bfSiPayEntra {
    from {
        opacity: 0;
        transform: translateX(-90px);
    }

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

/* In attesa della risposta del server: il pannello si smorza e smette di raccogliere clic,
   cosi' si vede che la richiesta e' partita e non se ne accavallano altre. Non sparisce e non
   si svuota: quello che si stava guardando resta dov'era. */
#bfSiPay.bfSiPayInAttesa .bfSiPayRicerca,
#bfSiPay.bfSiPayInAttesa .bfSiPayAree,
.bfSiPayRecenti.bfSiPayInAttesa {
    opacity: .4;
    pointer-events: none;
    transition: opacity .15s ease;
}

/**************************************************************************************/
/*  Ricerca                                                                           */
/**************************************************************************************/

.bfSiPayRicerca {
    position: relative;
    padding: 12px 14px 10px 14px;
}

.bfSiPayLente {
    position: absolute;
    left: 25px;
    top: 21px;
    font-size: 12px;
    color: #98a2ae;
    pointer-events: none;
}

#bfSiPay .bfSiPayFiltro {
    width: 100%;
    box-sizing: border-box;
    height: 34px;
    /* lo spazio a destra e' riservato sempre, anche quando la crocetta non c'e':
       comparendo, non deve far riposizionare il testo gia' scritto */
    padding: 0 30px 0 30px;
    font-size: 13px;
    color: #323232;
    background-color: #f2f4f7;
    border: 0;
    border-radius: 6px;
    transition: background-color .15s ease;
}

    #bfSiPay .bfSiPayFiltro::-ms-input-placeholder { color: #98a2ae; }
    #bfSiPay .bfSiPayFiltro::placeholder { color: #98a2ae; }

    /* Che il campo sia pronto lo dice il riempimento piu' marcato e la lente che prende il
       colore del brand: niente contorno di fuoco, che qui non si usa */
    #bfSiPay .bfSiPayFiltro:focus {
        background-color: #e4e9f0;
        outline: 0;
    }

#bfSiPay .bfSiPayFiltro:focus ~ .bfSiPayLente {
    color: var(--bf-accento, #35496A);
}

/* Cancella quanto scritto. Nasce nascosta: e' lo script a mostrarla quando c'e' del testo */
#bfSiPay .bfSiPayPulisci {
    display: none;
    position: absolute;
    right: 20px;
    top: 19px;
    width: 20px;
    height: 20px;
    line-height: 19px;
    text-align: center;
    font-size: 15px;
    color: #98a2ae;
    text-decoration: none;
    border-radius: 4px;
    transition: background-color .15s ease, color .15s ease;
}

    #bfSiPay .bfSiPayPulisci:hover {
        background-color: #dde3ea;
        color: #323232;
        text-decoration: none;
    }

/**************************************************************************************/
/*  Aree richiudibili                                                                 */
/**************************************************************************************/

.bfSiPayAree {
    /* min-height:0 e' necessario perche' un figlio flessibile possa scorrere invece di far
       crescere il pannello oltre la propria altezza massima */
    flex: 0 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding-bottom: 10px;
}

    /* barra di scorrimento sottile, visibile solo quando serve */
    .bfSiPayAree::-webkit-scrollbar {
        width: 8px;
    }

    .bfSiPayAree::-webkit-scrollbar-thumb {
        background-color: #dde2e9;
        border-radius: 5px;
    }

    .bfSiPayAree::-webkit-scrollbar-track {
        background-color: transparent;
    }

.bfSiPayArea {
    padding: 0 8px;
}

/* Apre un raggruppamento diverso da quello che la precede. Qui la linea e' voluta: il solo
   spazio non bastava a far leggere lo stacco. E' l'unica dell'intero pannello, e serve a
   separare gruppi, non a incorniciare elementi. */
.bfSiPayAreaStaccata {
    margin-top: 10px;
    padding: 10px 8px 0 8px;
    border-top: 1px solid #eceff3;
}

#bfSiPay .bfSiPayNomeArea {
    display: block;
    padding: 7px 8px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .02em;
    text-transform: uppercase;
    color: var(--bf-accento, #35496A);
    text-decoration: none;
    cursor: pointer;
    border-radius: 6px;
    transition: color .15s ease, background-color .15s ease;
}

    #bfSiPay .bfSiPayNomeArea:hover {
        background-color: #f6f8fa;
        text-decoration: none;
    }

/* inline-block e' necessario: su un elemento inline la larghezza verrebbe ignorata e ogni
   area partirebbe da un punto diverso, a seconda di quanto e' largo il glifo */
#bfSiPay .bfSiPayIconaArea {
    display: inline-block;
    width: 16px;
    margin-right: 9px;
    font-size: 13px;
    text-align: center;
    color: var(--bf-accento, #35496A);
}

.bfSiPayFreccia {
    float: right;
    margin-top: 3px;
    font-size: 9px;
    color: #b6bfc9;
    transition: transform .18s ease;
}

.bfSiPayAreaAperta .bfSiPayFreccia {
    transform: rotate(90deg);
}

/**************************************************************************************/
/*  Voci                                                                              */
/**************************************************************************************/

#bfSiPay .bfSiPayArea ul {
    list-style: none;
    margin: 0 0 4px 0;
    padding: 0;
    display: none;
}

#bfSiPay .bfSiPayAreaAperta ul {
    display: block;
}

/* Voci che non appartengono a nessun raggruppamento: si mostrano senza che nessuno le apra */
#bfSiPay .bfSiPayAreaSenzaTitolo ul {
    display: block;
}

/* I fogli delle brandizzazioni danno alle voci di elenco un colore e una spaziatura propri:
   qui diventerebbero righe fra una voce e l'altra, che non fanno parte di questo disegno */
#bfSiPay li {
    padding: 0;
    border: 0;
    color: inherit;
}

/* il rientro porta l'icona della voce sotto il nome dell'area */
#bfSiPay .bfSiPayArea li a {
    display: block;
    padding: 6px 8px 6px 33px;
    /* i nomi delle aree sono in maiuscolo e in grassetto: a parita' di corpo sembrerebbero
       piu' grandi, percio' le voci hanno bisogno di un corpo maggiore */
    font-size: 13px;
    font-weight: 500;
    color: #000000;
    text-decoration: none;
    border-radius: 6px;
    transition: background-color .15s ease, color .15s ease;
}

/* I fogli delle brandizzazioni impongono corpo e colore propri a ogni "ul li span" e vincono
   su quanto ereditato dal collegamento.

   Il colore va rimesso su tutto cio' che e' nome della voce - l'etichetta e le parole in cui
   viene spezzata nei riquadri - e su nient'altro: l'evidenziazione della ricerca e la
   targhetta del termine il loro colore ce l'hanno di proposito.

   Vale anche per le graduatorie e non solo per il pannello: da quando le voci diventano
   riquadri, li' dentro ci sono gli stessi elementi. */
#bfSiPay li a span,
#bfSiPayRecenti li a span {
    font-size: inherit;
}

#bfSiPay li a .bfSiPayEtichetta,
#bfSiPay li a .bfSiPayParola,
#bfSiPayRecenti li a .bfSiPayEtichetta,
#bfSiPayRecenti li a .bfSiPayParola {
    color: inherit;
}

#bfSiPay .bfSiPayArea li a:hover {
    background-color: #f2f4f7;
    color: #000000;
    font-weight: 700;
    text-decoration: none;
}

/* piu' piccola e piu' tenue di quella dell'area, che deve restare il riferimento */
#bfSiPay .bfSiPayIconaVoce {
    display: inline-block;
    width: 15px;
    margin-right: 8px;
    font-size: 12px;
    text-align: center;
    color: #aab4c0;
    transition: color .15s ease;
}

#bfSiPay .bfSiPayArea li a:hover .bfSiPayIconaVoce {
    color: #7a8794;
}

/* Le voci senza raggruppamento sono di pari grado con le aree, e come tali si presentano:
   stesso rientro, stessa misura d'icona, e l'icona nel colore pieno invece che smorzato.
   In grassetto perche' non hanno un nome sopra a reggerle.

   Stanno qui e non accanto alle altre regole del raggruppamento senza titolo perche' hanno
   la stessa specificita' delle regole generiche qui sopra - una classe sola per parte - e a
   parita' vince l'ultima scritta: messe prima, non avrebbero avuto alcun effetto. */
#bfSiPay .bfSiPayAreaSenzaTitolo li a {
    /* gli stessi 8px del nome dell'area: le etichette partono dalla stessa colonna */
    padding-left: 8px;
    font-weight: 700;
}

#bfSiPay .bfSiPayAreaSenzaTitolo .bfSiPayIconaVoce {
    width: 16px;
    margin-right: 9px;
    font-size: 13px;
    color: var(--bf-accento, #35496A);
}

/* senza questa, il passaggio del mouse riporterebbe l'icona al grigio delle voci comuni */
#bfSiPay .bfSiPayAreaSenzaTitolo li a:hover .bfSiPayIconaVoce {
    color: var(--bf-accento, #35496A);
}

/* Voce corrispondente alla pagina aperta */
#bfSiPay .bfSiPayArea li a.bfSiPayVoceCorrente {
    background-color: var(--bf-accento-velato, #eef1f6);
    color: var(--bf-accento, #35496A);
    font-weight: 700;
}

    #bfSiPay .bfSiPayArea li a.bfSiPayVoceCorrente .bfSiPayIconaVoce {
        color: var(--bf-accento, #35496A);
    }

/* Voce raggiunta con le frecce: deve distinguersi sia dal passaggio del mouse sia dalla
   pagina corrente, percio' e' piena e non una semplice velatura */
#bfSiPay .bfSiPayArea li a.bfSiPaySelezionata {
    background-color: var(--bf-accento, #35496A);
    color: #ffffff;
}

    #bfSiPay .bfSiPayArea li a.bfSiPaySelezionata .bfSiPayIconaVoce {
        color: #ffffff;
    }

/* Termine nascosto che ha risposto alla ricerca, mostrato accanto al nome della voce.
   Le graduatorie stanno fuori dal pannello - sono schede loro, affiancate - percio' vanno
   nominate a parte: senza, la targhetta li' non compare e il termine resta un numero scritto
   sotto il nome, che non si capisce cosa sia. */
#bfSiPay .bfSiPayTermineTrovato,
#bfSiPayRecenti .bfSiPayTermineTrovato {
    display: inline-block;
    margin-left: 6px;
    padding: 2px 4px;
    font-size: 9px;
    line-height: 13px;
    font-weight: 700;
    color: var(--bf-accento, #35496A);
    background-color: var(--bf-accento-velato, #eef1f6);
    border-radius: 3px;
    text-transform: uppercase;
    letter-spacing: .2px;
    vertical-align: 1px;
}

#bfSiPay .bfSiPaySelezionata .bfSiPayTermineTrovato {
    color: #ffffff;
    background-color: rgba(255, 255, 255, .24);
}

/* Parte dell'etichetta che corrisponde al testo cercato */
#bfSiPay .bfSiPayEvidenza {
    font-weight: 700;
    color: var(--bf-accento, #35496A);
    background-color: var(--bf-accento-velato, #eef1f6);
    border-radius: 2px;
}

#bfSiPay .bfSiPaySelezionata .bfSiPayEvidenza {
    color: #ffffff;
    background-color: rgba(255, 255, 255, .24);
}

/* Nessuna voce risponde alla ricerca: lo script nasconde tutte le aree, e senza questo
   messaggio il pannello resterebbe vuoto senza dire perche' */
.bfSiPayNessunRisultato {
    display: none;
    padding: 6px 22px 14px 22px;
    font-size: 13px;
    color: #8a95a1;
}

/**************************************************************************************/
/*  Funzioni piu' usate e usate di recente                                            */
/*                                                                                    */
/*  Pannello affiancato al principale: i 652px sono i 316 del rientro, i 320 di        */
/*  larghezza e 16 di stacco.                                                          */
/**************************************************************************************/

.bfSiPayRecenti {
    position: fixed;
    top: 70px;
    left: 652px;
    z-index: 100001;
    width: 260px;
    /* con due elenchi il pannello si allunga: su finestre basse scorre invece di sbordare */
    max-height: calc(100% - 90px);
    /* nasce vuoto e nascosto: si mostra solo se lo script vi ha trovato qualcosa da mettere */
    display: none;
    flex-direction: column;
    /* Contenitore e basta: la scheda bianca ce l'ha ciascuna delle due graduatorie, e lo
       stacco fra loro e' spazio vuoto. Qui non si disegna piu' niente. */
    gap: 10px;
    font-family: 'Nunito Sans', sans-serif;
    overflow-y: auto;
}

/* Una scheda per graduatoria, come il pannello a cui si affiancano: stesso bianco, stessi
   angoli, stessa ombra. Non si allungano a riempire il contenitore - sono alte quanto le
   voci che hanno - e restano larghe uguale perche' il contenitore le distende. */
.bfSiPayGraduatoria {
    flex: 0 0 auto;
    background-color: #ffffff;
    border-radius: 10px;
    box-shadow: 0 12px 34px rgba(16, 24, 40, .22);
    overflow: hidden;
}

/* E' un aiuto, non parte del menu: resta appena smorzato, quel tanto che basta a stare in
   secondo piano senza sparire */
.bfSiPayRecentiPiene {
    display: flex;
    opacity: .96;
    transition: opacity .2s ease;
    /* poco dopo il pannello principale: i due riquadri entrano in fila, non insieme */
    animation: bfSiPayEntraAccostato .5s cubic-bezier(.22, .61, .36, 1) .45s both;
}

/* Come l'ingresso del pannello, ma si ferma allo smorzato che compete a questo riquadro:
   e' un aiuto, non parte del menu */
@keyframes bfSiPayEntraAccostato {
    from {
        opacity: 0;
        transform: translateX(-90px);
    }

    to {
        opacity: .96;
        transform: translateX(0);
    }
}

    .bfSiPayRecentiPiene:hover {
        opacity: 1;
    }

/* piu' stretto di cosi' il pannello affiancato coprirebbe la pagina */
@media (max-width: 1100px) {
    .bfSiPayRecentiPiene {
        display: none;
    }
}

.bfSiPayRecentiTitolo {
    padding: 12px 14px 6px 14px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: #8a95a1;
}

#bfSiPayRecenti ul {
    list-style: none;
    margin: 0 0 8px 0;
    padding: 0 8px;
}

#bfSiPayRecenti li {
    padding: 0;
    border: 0;
}

/* Il secondo elenco e' il titolo che segue una lista: non serve distinguerlo nel markup.
   La riga e' rientrata come il testo, cosi' si legge come uno stacco e non come un bordo. */
#bfSiPayRecenti ul + .bfSiPayRecentiTitolo {
    margin: 2px 14px 0 14px;
    padding: 12px 0 6px 0;
    border-top: 1px solid #ebeef3;
}

/* stessa resa delle voci, senza il rientro che li' serve a stare sotto l'area */
#bfSiPayRecenti li a {
    display: block;
    padding: 6px 8px;
    font-size: 13px;
    font-weight: 500;
    color: #000000;
    text-decoration: none;
    /* l'etichetta arriva dal pannello e puo' essere piu' lunga di questo riquadro */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: background-color .15s ease, color .15s ease;
}

/* La voce della pagina aperta puo' comparire fra le piu' usate: segnalata come nel pannello,
   cosi' si vede che e' in classifica e che ci si e' gia' sopra. Prima del passaggio del
   mouse, che ha la stessa specificita' e deve poter prevalere. */
#bfSiPayRecenti li a.bfSiPayVoceCorrente {
    background-color: var(--bf-accento-velato, #eef1f6);
    color: var(--bf-accento, #35496A);
    font-weight: 700;
}

    #bfSiPayRecenti li a.bfSiPayVoceCorrente .bfSiPayIconaVoce {
        color: var(--bf-accento, #35496A);
    }

#bfSiPayRecenti li a:hover {
    background-color: #f2f4f7;
    color: #000000;
    font-weight: 700;
    text-decoration: none;
}

    #bfSiPayRecenti li a:hover .bfSiPayIconaVoce {
        color: #7a8794;
    }

#bfSiPayRecenti .bfSiPayIconaVoce {
    display: inline-block;
    width: 15px;
    margin-right: 8px;
    font-size: 12px;
    text-align: center;
    color: #aab4c0;
}

/**************************************************************************************/
/*  Colonna agganciata                                                                */
/*                                                                                    */
/*  Le sole icone delle aree, fissate al bordo sinistro. A differenza del pannello     */
/*  occupa spazio davvero: il contenuto della pagina rientra della sua larghezza,      */
/*  cosi' non copre nulla di quello che c'era prima.                                   */
/*                                                                                    */
/*  Due misure tornano in piu' punti e stanno percio' in un posto solo, qui sotto: la  */
/*  larghezza - da cui dipendono il rientro del contenuto e la posizione del pannello  */
/*  - e il punto in cui la colonna comincia, che e' sotto la barra in alto del brand.  */
/*                                                                                    */
/*  Lo stato sta sul body: il rientro riguarda la pagina, che della barra non e'       */
/*  figlia, e una classe sola non puo' discordare da se stessa.                        */
/**************************************************************************************/

:root {
    --bfSiPayLarghezza: 48px;
    --bfSiPayInizio: 70px;

    /* Dove comincia il contenuto della pagina, che in queste brandizzazioni e' centrato e non
       a tutta larghezza. Lo misura lo script su #pagina_main, e serve a chi deve incolonnarsi
       con il contenuto invece che con il bordo dello schermo: oggi la sola icona del MENU.
       La colonna no: quella sta al bordo, che e' l'unico riferimento che non si sposta mai
       ne' ridimensionando la finestra ne' cambiando pagina.
       Il valore qui e' il ripiego per quando la misura non riesce. */
    --bfSiPayContenuti: 10px;
}

.bfSiPayColonna {
    display: none;
    position: fixed;
    top: var(--bfSiPayInizio);
    left: 0;
    /* il menu colorato sta a 100000 e il pannello a 100001: la colonna sta sotto entrambi,
       perche' aprendosi il pannello la copre */
    z-index: 99999;
    width: var(--bfSiPayLarghezza);
    /* si ferma dove finiscono le icone, come fa il pannello: una colonna bianca tirata fino
       in fondo allo schermo sembrerebbe una seconda pagina accanto a quella vera */
    max-height: calc(100% - var(--bfSiPayInizio) - 12px);
    padding: 6px 0;
    font-family: "Nunito Sans", sans-serif;
    background-color: #ffffff;
    /* appoggiata al bordo sinistro: angolo tondo e ombra dalla sola parte libera */
    border-radius: 0 0 10px 0;
    box-shadow: 0 6px 18px rgba(16, 24, 40, .14);
    overflow-x: hidden;
    overflow-y: auto;
}

body.bfSiPayAgganciata .bfSiPayColonna {
    display: block;
}

    /* barra di scorrimento sottile, come nel pannello */
    .bfSiPayColonna::-webkit-scrollbar {
        width: 6px;
    }

    .bfSiPayColonna::-webkit-scrollbar-thumb {
        background-color: #dde2e9;
        border-radius: 5px;
    }

    .bfSiPayColonna::-webkit-scrollbar-track {
        background-color: transparent;
    }

#bfSiPayColonna .bfSiPayColonnaVoce {
    display: block;
    width: 34px;
    height: 34px;
    margin: 3px auto;
    line-height: 34px;
    text-align: center;
    font-size: 14px;
    color: #6d7a88;
    text-decoration: none;
    border-radius: 6px;
    transition: background-color .15s ease, color .15s ease;
}

    #bfSiPayColonna .bfSiPayColonnaVoce:hover {
        background-color: #f2f4f7;
        color: var(--bf-accento, #35496A);
        text-decoration: none;
    }

/* La lente sta in testa e chiude il gruppo dei comandi: e' lo stacco sotto di lei a dire
   che l'elenco delle aree comincia dopo. Riempimento tenue e non un filetto. */
#bfSiPayColonna .bfSiPayColonnaCerca {
    margin-bottom: 11px;
    background-color: #f2f4f7;
    color: #98a2ae;
}

    #bfSiPayColonna .bfSiPayColonnaCerca:hover {
        background-color: #e4e9ef;
        color: var(--bf-accento, #35496A);
    }

/* l'area della pagina aperta, segnalata come nel pannello */
#bfSiPayColonna .bfSiPayColonnaVoceCorrente {
    background-color: var(--bf-accento-velato, #eef1f6);
    color: var(--bf-accento, #35496A);
}

/* Stesso stacco fra gruppi che ha il pannello, qui ridotto a un respiro: in 48px una linea
   peserebbe piu' delle icone che dovrebbe separare. */
#bfSiPayColonna .bfSiPayColonnaVoceStaccata {
    margin-top: 13px;
}

/**************************************************************************************/
/*  Nome della voce sfiorata                                                          */
/*                                                                                    */
/*  Sta fuori dalla colonna e si colloca da se' con position:fixed: dentro, la colonna */
/*  che scorre lo taglierebbe al primo nome piu' largo di lei.                         */
/**************************************************************************************/

.bfSiPayNomeSfiorato {
    position: fixed;
    z-index: 100002;
    /* lo script porta il riquadro all'altezza del centro dell'icona: la meta' della propria
       altezza se la toglie da se', cosi' resta centrato comunque sia alto */
    transform: translateY(-50%);
    padding: 5px 10px;
    font-family: "Nunito Sans", sans-serif;
    font-size: 13px;
    font-weight: normal;
    line-height: 1.4;
    text-transform: none;
    white-space: nowrap;
    color: #ffffff;
    background-color: #485d71;
    border-radius: 6px;
    box-shadow: 0 4px 14px rgba(16, 24, 40, .22);
    opacity: 0;
    visibility: hidden;
    /* non riceve il mouse: comparendo accanto al cursore, se lo intercettasse lo farebbe
       uscire dall'icona che lo ha chiamato, e il riquadro sparirebbe da solo */
    pointer-events: none;
    transition: opacity .16s ease, visibility .16s ease;
}

    /* linguetta verso l'icona: un quadratino ruotato, cosi' prende lo stesso colore del
       riquadro senza doverlo ripetere in un bordo */
    .bfSiPayNomeSfiorato::before {
        content: '';
        position: absolute;
        top: 50%;
        left: -4px;
        width: 9px;
        height: 9px;
        margin-top: -5px;
        background-color: #485d71;
        border-radius: 1px;
        transform: rotate(45deg);
    }

.bfSiPayNomeVisibile {
    opacity: 1;
    visibility: visible;
}

/**************************************************************************************/
/*  Testata del pannello e comando di aggancio                                        */
/**************************************************************************************/

.bfSiPayTestata {
    display: flex;
    justify-content: flex-end;
    padding: 8px 12px 0 12px;
}

/* il contenitore porta il suggerimento; il comando resta il solo spillo */
.bfSiPayAggancioContenitore {
    position: relative;
    display: inline-block;
    line-height: 0;
}

#bfSiPay .bfSiPayAggancio,
#bfSiPay .bfSiPayChiusura {
    display: inline-block;
    width: 26px;
    height: 26px;
    line-height: 26px;
    text-align: center;
    font-size: 12px;
    color: #98a2ae;
    text-decoration: none;
    border-radius: 5px;
    transition: background-color .15s ease, color .15s ease;
}

    #bfSiPay .bfSiPayAggancio:hover,
    #bfSiPay .bfSiPayChiusura:hover {
        background-color: #f2f4f7;
        color: #1c2530;
        text-decoration: none;
    }

/* Ultima della fila, a destra dello spillo: nell'angolo si e' abituati a trovarci la
   chiusura, e lo spillo - che si usa una volta sola - le sta accanto.
   Il segno e' un poco piu' grande perche' la croce, a parita' di corpo, disegna meno dello
   spillo e accanto sembrerebbe piu' piccola. */
#bfSiPay .bfSiPayChiusura {
    margin-left: 4px;
    font-size: 14px;
}

/* Spillo storto finche' non e' piantato: i due stati si leggono dalla sola icona, senza
   bisogno di un secondo comando o di una scritta. */
.bfSiPayAggancio .fa-thumb-tack {
    transform: rotate(-45deg);
    transition: transform .18s ease;
}

/* Agganciata, lo spillo e' pieno: fra i comandi del pannello e' l'unico che porta uno stato,
   e una semplice velatura si confondeva con il passaggio del mouse. */
body.bfSiPayAgganciata #bfSiPay .bfSiPayAggancio {
    color: #ffffff;
    background-color: var(--bf-accento, #35496A);
    box-shadow: 0 2px 6px rgba(16, 24, 40, .30);
}

    body.bfSiPayAgganciata #bfSiPay .bfSiPayAggancio:hover {
        color: #ffffff;
    }

    body.bfSiPayAgganciata .bfSiPayAggancio .fa-thumb-tack {
        transform: rotate(0deg);
    }

/* Il suggerimento dello spillo: si apre verso il basso e con il bordo destro allineato al
   comando, perche' il pannello ritaglia cio' che ne esce e l'unica direzione libera e'
   dentro il pannello stesso. Stessi colori del riquadro delle icone della colonna. */
.bfSiPayAggancioSuggerimento {
    position: absolute;
    top: 32px;
    right: 0;
    z-index: 100002;
    width: 226px;
    padding: 6px 10px;
    font-family: "Nunito Sans", sans-serif;
    font-size: 12.5px;
    font-weight: normal;
    line-height: 1.4;
    text-transform: none;
    text-align: left;
    color: #ffffff;
    background-color: #485d71;
    border-radius: 6px;
    box-shadow: 0 4px 14px rgba(16, 24, 40, .22);
    opacity: 0;
    visibility: hidden;
    /* non riceve il mouse: si apre proprio sotto lo spillo, e intercettandolo si
       richiuderebbe da solo */
    pointer-events: none;
    transition: opacity .16s ease, visibility .16s ease;
}

    /* linguetta verso l'alto, in corrispondenza dello spillo */
    .bfSiPayAggancioSuggerimento::before {
        content: '';
        position: absolute;
        top: -4px;
        right: 9px;
        width: 9px;
        height: 9px;
        background-color: #485d71;
        border-radius: 1px;
        transform: rotate(45deg);
    }

.bfSiPayAggancioContenitore:hover .bfSiPayAggancioSuggerimento {
    opacity: 1;
    visibility: visible;
}

/* stessa mano della descrizione sotto l'icona del MENU: e' la stessa cosa, in un altro angolo */
.bfSiPayAggancioScorciatoia {
    display: block;
    margin-top: 4px;
    font-size: 12.5px;
    line-height: 1.45;
    color: #e3ebf3;
}

/**************************************************************************************/
/*  Aperto dalla colonna                                                              */
/*                                                                                    */
/*  Il pannello prende il posto della colonna, non le si affianca: sono le stesse      */
/*  icone, e affiancarle le mostrerebbe due volte. Da qui il bordo sinistro a zero.    */
/*  Il menu colorato non c'e' - la colonna ne fa le veci - quindi non c'e' nulla da    */
/*  cui uscire, e l'animazione che lo aspettava non ha piu' motivo di attendere.       */
/**************************************************************************************/

.bfSiPayDallaColonna > #bfSiPay {
    left: 0;
    border-radius: 0 0 10px 0;
    animation-delay: 0s;
}

.bfSiPayDallaColonna > .bfSiPayRecenti {
    /* dove comincia il pannello, piu' i suoi 320px di larghezza e 10 di stacco */
    left: 330px;
}

/**************************************************************************************/
/*  Le graduatorie su schermo largo                                                   */
/*                                                                                    */
/*  Da stretta, la seconda colonna e' una lista: sei voci in fila, una sotto l'altra,  */
/*  in un riquadro alto e magro. Dove c'e' spazio quella forma non serve piu' - resta   */
/*  alta e mezza vuota - e le stesse voci diventano riquadri affiancati, con l'icona    */
/*  grande sopra e il nome sotto: bersagli piu' larghi e un colpo d'occhio invece di    */
/*  un elenco da leggere.                                                               */
/*                                                                                     */
/*  La soglia e' piu' alta che in PostSystem perche' qui la fascia parte piu' a destra: */
/*  il menu colorato occupa i primi 316px e il pannello altri 320, quindi le            */
/*  graduatorie cominciano a 652 e sei riquadri le portano intorno ai 1250.             */
/*                                                                                     */
/*  Il riquadro si allarga quanto il suo contenuto: con due sole voci non deve restare  */
/*  largo per sei, o si sposterebbe soltanto da dove stava il vuoto.                     */
/**************************************************************************************/

@media (min-width: 1500px) {

    .bfSiPayRecenti {
        width: max-content;
        /* non oltre lo spazio che resta a destra del pannello */
        max-width: calc(100% - 680px);
    }

    .bfSiPayRecenti ul {
        display: flex;
        flex-wrap: wrap;
        margin: 0 0 10px 0;
        padding: 0 10px;
    }

    /* Il riquadro: icona sopra, nome sotto, tutto centrato. La misura e' fissa perche' i
       riquadri devono incolonnarsi fra una graduatoria e l'altra - nomi di lunghezza
       diversa darebbero due file sfalsate. */
    #bfSiPayRecenti li a {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 92px;
        padding: 10px 6px 8px 6px;
        font-size: 11.5px;
        line-height: 1.25;
        text-align: center;
        /* la lista tronca su una riga con i puntini: qui il nome va a capo */
        white-space: normal;
        text-overflow: clip;
    }

    /* Sopra il nome e non di fianco, e grande abbastanza da riconoscersi da sola: e' lei
       che si guarda per prima, il nome serve a confermare. */
    #bfSiPayRecenti .bfSiPayIconaVoce {
        width: auto;
        margin: 0 0 7px 0;
        font-size: 20px;
    }

    /* Due righe di nome e non una di piu': il riquadro deve restare alto uguale a tutti
       gli altri, altrimenti la fila si scompone. Il nome per esteso arriva al passaggio
       del mouse, che lo script mette su ogni riquadro. */
    #bfSiPayRecenti li a .bfSiPayEtichetta {
        display: block;
        max-height: 2.5em;
        overflow: hidden;
    }

    /* Le due parole di un nome corto, una per riga: e' quello che pareggia l'altezza dei
       riquadri. Vale solo qui - nella lista il nome sta su una riga sola. */
    #bfSiPayRecenti li a .bfSiPayParola {
        display: block;
    }

    /* La targhetta del termine e' l'ultima riga del riquadro e non una coda dell'etichetta:
       nella colonna stretta segue il nome sulla stessa riga, qui va sotto e centrata.
       Pesa piu' che nella lista di proposito: quando la stessa funzione compare piu' volte
       con termini diversi e' l'unica cosa che distingue un riquadro dall'altro. */
    #bfSiPayRecenti li a .bfSiPayTermineTrovato {
        margin: 5px 0 0 0;
        padding: 2px 7px;
        font-size: 10px;
        line-height: 14px;
        /* un poco piu' marcato che nel pannello: li' la targhetta accompagna un nome che si
           sta gia' leggendo, qui e' l'unica cosa che distingue due riquadri altrimenti
           identici, e la si cerca con l'occhio */
        background-color: var(--bf-accento-tenue, var(--bf-accento-velato, #eef1f6));
    }

    /* Tutti i riquadri di una fila alti uguale: senza, quello con la targhetta del termine
       e' piu' alto degli altri, e il passaggio del mouse accende rettangoli di misure
       diverse. Il posto lo fa la voce, il colore lo prende tutto il riquadro. */
    .bfSiPayRecenti li {
        display: flex;
    }
}

/**************************************************************************************/
/*  IL MENU RINNOVATO DELLE BRANDIZZAZIONI                                            */
/*                                                                                    */
/*  Foglio unico per tutte, come BarraFunzioniSiPay.css: il menu colorato, il pannello */
/*  delle funzioni e le graduatorie si aprono insieme sotto l'icona del MENU, e a      */
/*  cambiare da un brand all'altro sono i soli colori - che arrivano dalle variabili   */
/*  --bf-* dichiarate nel SiPayStyle.css di ognuno.                                    */
/*                                                                                    */
/*  Va caricato DOPO il BarraLateraleSinistra.css del brand, che porta la geometria di */
/*  partenza: e' quella che questi ritocchi correggono. I selettori nominano comunque  */
/*  il body per avere piu' peso di quelli del foglio comune del pannello, cosi' non    */
/*  dipendono dall'ordine con cui i due vengono inclusi.                               */
/*                                                                                    */
/*  Chi adotta questo foglio va aggiunto anche a ModalitaConColonnaAgganciabile        */
/*  (BarraMenuSinistra.ascx.cs): il foglio disegna la colonna, l'elenco la accende.    */
/**************************************************************************************/

/**************************************************************************************/
/*  Il menu si apre a partire dall'icona                                              */
/*                                                                                    */
/*  Il menu colorato, il pannello delle funzioni e le graduatorie sono una cosa sola:  */
/*  spostato il primo, gli altri due devono seguirlo, altrimenti si aprirebbero        */
/*  scollegati. I 316 e i 652 sono gli scostamenti che hanno di loro - i 300 della      */
/*  barra piu' 16 di stacco, e poi i 320 del pannello piu' 16 - qui semplicemente      */
/*  contati a partire da dove comincia il contenuto invece che dal bordo dello schermo. */
/*                                                                                    */
/*  Le misure di partenza sono le stesse in ogni brandizzazione - la barra nasce larga */
/*  300 e appoggiata al bordo - quindi questi ritocchi valgono per tutte: qui cambiano  */
/*  solo i colori, che arrivano dalle variabili --bf-* del singolo brand.               */
/**************************************************************************************/

/* I selettori nominano anche il body: hanno cosi' piu' peso di quelli del foglio comune e
   vincono comunque, senza dipendere da quale dei due venga caricato per ultimo. */

/* Il menu si apre a partire dall'icona che lo ha chiamato, non dal bordo dello schermo:
   l'icona siede all'inizio della riga dei comandi, incolonnata con il contenuto, e da li' in
   poi si srotola tutto il resto - questa barra, il pannello delle funzioni e le graduatorie.
   Aprendosi dal bordo, il menu sembrava arrivare da un'altra parte.
   La misura la fa lo script su #pagina_main (--bfSiPayContenuti in BarraFunzioniSiPay.css),
   perche' il contenuto e' centrato e si sposta con la finestra; lo zero e' il ripiego, che
   riporta tutto al bordo com'era prima. */
body #barraMenuSinistra {
    left: var(--bfSiPayContenuti, 0px);
}

/* L'icona del MENU si incolonna con il contenuto per la stessa ragione: e' li' che l'occhio
   la cerca, all'inizio della riga dei comandi, e non sperduta contro il bordo dello schermo.
   Scende da 50 a 34 perche' nella barra deve stare, non riempirla. */
body #menu_sinistra #menu_icona {
    left: var(--bfSiPayContenuti, 10px);
    width: 34px;
    height: 34px;
}

/* Senza la scritta: le tre barrette sono l'icona del menu ovunque, e la parola accanto era
   una spiegazione di cui nessuno ha bisogno. Togliendola l'icona puo' anche stringersi. */
body #menu_sinistra .menu-icona-etichetta {
    display: none;
}

/* Barra storica e pannello scendono entrambi a 280: le etichette ci stanno lo stesso e il
   menu occupa meno pagina. Le tre misure qui sotto sono legate fra loro - i 280 della barra
   piu' 16 di stacco fanno il rientro del pannello, e con i suoi altri 280 piu' 16 quello
   delle graduatorie - quindi vanno sempre rifatte insieme. */
body #barraMenuSinistra {
    width: 280px;
}

body #bfSiPay {
    left: calc(var(--bfSiPayContenuti, 0px) + 296px);
    width: 280px;
}

body .bfSiPayRecenti {
    left: calc(var(--bfSiPayContenuti, 0px) + 592px);
}

/* La colonna agganciata si appoggia subito a sinistra dell'icona del MENU: sono i due modi di
   arrivare alle stesse cose e stanno vicini, invece che uno contro il bordo dello schermo e
   l'altro in mezzo alla pagina. Gli 8px sono lo stacco che le impedisce di toccarla.
   Il minimo a zero serve alle finestre strette: li' il contenuto parte da subito, non c'e'
   spazio a sinistra dell'icona, e la colonna torna al bordo invece di uscire dallo schermo. */
:root {
    --bfSiPayColonnaSinistra: max(0px, calc(var(--bfSiPayContenuti, 0px) - var(--bfSiPayLarghezza, 48px) - 20px));
}

body #bfSiPayColonna {
    left: var(--bfSiPayColonnaSinistra);
}

/* Aperto dalla colonna il menu colorato non c'e', quindi il pannello non deve scavalcarlo:
   parte da dove sta la colonna e la copre, come fa sempre. */
body .bfSiPayDallaColonna > #bfSiPay {
    left: var(--bfSiPayColonnaSinistra);
    /* tutti e quattro gli angoli, come la colonna di cui prende il posto: l'angolo squadrato
       aveva senso quando partiva dal bordo dello schermo, non ora che sta in mezzo alla pagina */
    border-radius: 10px;
}

/* i 280 del pannello piu' 10 di stacco */
body .bfSiPayDallaColonna > .bfSiPayRecenti {
    left: calc(var(--bfSiPayColonnaSinistra) + 290px);
}

/**************************************************************************************/
/*  La barra storica in linea con il pannello                                         */
/*                                                                                    */
/*  Nasceva attaccata al bordo alto della finestra - anzi, venti pixel oltre - perche' */
/*  era l'unica cosa che si apriva. Ora si apre insieme al pannello delle funzioni e   */
/*  alle graduatorie: cominciando piu' in alto degli altri sembrava un elemento di un  */
/*  altro impianto, appiccicato li'. Stessa riga, stessa altezza, stessi angoli.       */
/**************************************************************************************/

body #barraMenuSinistra {
    top: 70px;
    /* si ferma prima del fondo come il pannello: prima si appoggiava al bordo e poteva
       arrivare fino in fondo, scesa di 90px sborderebbe di altrettanto */
    max-height: calc(100% - 90px);
    /* Tondi tutti tranne quello in alto a sinistra. Li' dentro ci finisce il logo, che ha un
       margine sinistro negativo e sporge oltre il riquadro: la curva glielo tagliava, e il
       risultato si leggeva come un difetto invece che come un angolo. Squadrato il taglio
       non c'e' piu'. */
    border-radius: 0 10px 10px 10px;
}

/**************************************************************************************/
/*  La colonna: angoli, allineamento e lente                                          */
/**************************************************************************************/

/* Tutti e quattro gli angoli: la colonna non e' piu' appoggiata al bordo dello schermo ma
   sta in mezzo alla pagina, accanto all'icona del MENU, quindi e' una scheda come le altre. */
body #bfSiPayColonna {
    border-radius: 10px;
    /* Il bordo alto della scheda si allinea con quello dell'icona del MENU che le sta a destra:
       sono due elementi affiancati e l'occhio li confronta per il bordo, non per il contenuto.
       L'altezza massima segue l'inizio, altrimenti sborderebbe in basso di altrettanto. */
    top: 70px;
    max-height: calc(100% - 82px);
}

/* La lente porta il colore dell'applicazione: e' l'unica voce della colonna che non e' una
   destinazione ma il modo di trovarne una, e in mezzo a icone tutte uguali si perdeva. */
body #bfSiPayColonna .bfSiPayColonnaCerca {
    background-color: var(--bf-accento-velato, #eef1f6);
    color: var(--bf-accento, #35496A);
}

    body #bfSiPayColonna .bfSiPayColonnaCerca:hover {
        background-color: var(--bf-accento, #35496A);
        color: #ffffff;
    }

/**************************************************************************************/
/*  Il menu scende dall'alto                                                          */
/*                                                                                    */
/*  Entrava da sinistra da quando era una fascia agganciata al bordo: ora barra,       */
/*  pannello e graduatorie sono schede staccate che si aprono sotto l'icona del MENU,  */
/*  e arrivare di lato le faceva sembrare in arrivo da fuori schermo invece che dal    */
/*  comando che le ha chiamate.                                                        */
/*                                                                                    */
/*  Si cambia il solo nome dell'animazione, non tutta la dichiarazione: durate e        */
/*  ritardi restano quelli del foglio comune, ed e' li' che le tre schede si mettono   */
/*  in fila una dopo l'altra invece di entrare insieme.                                 */
/**************************************************************************************/

@keyframes bfSiPayScendeDallAlto {
    from {
        opacity: 0;
        transform: translateY(-30px);
    }

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

/* Come sopra ma si ferma allo smorzato che compete alle graduatorie: l'animazione ha "both",
   quindi e' il suo ultimo fotogramma a restare, e arrivando a 1 cancellerebbe la velatura. */
@keyframes bfSiPayScendeDallAltoSmorzato {
    from {
        opacity: 0;
        transform: translateY(-30px);
    }

    to {
        opacity: .96;
        transform: translateY(0);
    }
}

/* Le tre schede scendono insieme, stessa durata e nessun ritardo.
   I ritardi c'erano quando entravano da sinistra una dietro l'altra: la barra apriva la
   strada e le altre sembravano uscirle da dietro. Cadendo dall'alto quella fila non si legge
   piu' come una sequenza ma come tre pezzi che arrivano scoordinati - e il primo, la barra
   storica, sembra scendere prima del menu vero. Insieme sono un gesto solo. */
body #barraMenuSinistra,
body #bfSiPay,
body .bfSiPayRecentiPiene {
    animation-duration: .45s;
    animation-delay: 0s;
    animation-timing-function: cubic-bezier(.22, .61, .36, 1);
    animation-fill-mode: both;
}

/* la barra storica porta dal markup le classi di animate.css: qui si sostituisce la sua */
body #barraMenuSinistra,
body #bfSiPay {
    animation-name: bfSiPayScendeDallAlto;
}

body .bfSiPayRecentiPiene {
    animation-name: bfSiPayScendeDallAltoSmorzato;
}

/**************************************************************************************/
/*  Rifiniture                                                                        */
/**************************************************************************************/

/* Raggio piu' contenuto su tutte le schede: a 10px, su riquadri stretti e affiancati, la
   curva si mangiava troppo dell'angolo e le faceva sembrare pillole. */
body #barraMenuSinistra,
body #bfSiPay,
body #bfSiPayColonna,
body .bfSiPayDallaColonna > #bfSiPay,
body .bfSiPayGraduatoria {
    border-radius: 8px;
}

/* La colonna sale a filo del bordo alto dell'icona del MENU che le sta a destra.
   L'altezza massima segue l'inizio, come sempre in questi spostamenti. */
body #bfSiPayColonna {
    top: 64px;
    max-height: calc(100% - 76px);
}

/* Il logo rientra nel riquadro: sporgendo di dieci pixel a sinistra veniva tagliato
   dall'angolo tondo, ed era quello a far sembrare strano l'angolo stesso. Rientrato, il
   raggio in alto a sinistra si puo' tenere come gli altri tre. */
body #menu_sinistra .menu-logo {
    margin-left: 0;
}

/* Scesa di novanta pixel, la barra storica ha perso altrettanta altezza: con lo spazio
   riservato in fondo di prima il contenuto non ci stava piu' e compariva la barra di
   scorrimento. Il piede - Supporto e Id PO - occupa un centinaio di pixel, quindi 120
   bastano a non farlo salire sopra le voci e restituiscono venti pixel al contenuto. */
body #barraMenuSinistra {
    padding-bottom: 120px;
}

/* Al passaggio del mouse l'icona prende il colore dell'applicazione: nelle graduatorie e'
   l'icona che si guarda per prima, e restando grigia era l'unica parte del riquadro a non
   accorgersi del cursore. */
body #bfSiPayRecenti li a:hover .bfSiPayIconaVoce {
    color: var(--bf-accento, #35496A);
}

/**************************************************************************************/
/*  Barra storica: via la barra di scorrimento, e angoli puliti                       */
/**************************************************************************************/

/* Supporto e Id PO stavano fuori dal flusso, ancorati al fondo del riquadro: per non farli
   finire sopra le voci si riservava loro spazio con un riempimento in fondo, e quel
   riempimento - sommato al contenuto - superava l'altezza disponibile facendo comparire la
   barra di scorrimento. Rimessi nel flusso, si mettono in coda da soli e lo spazio non va
   piu' prenotato: il riquadro torna alto quanto il suo contenuto. */
body #barraMenuSinistra .menu-supporto,
body #barraMenuSinistra .menu-idPO {
    position: static;
    bottom: auto;
    right: auto;
}

body #barraMenuSinistra {
    padding-bottom: 24px;
}

/* L'ombra era spostata di dieci pixel a destra, poco sfocata e dello stesso blu del fondo:
   attorno all'angolo in alto a sinistra lo riempiva, e la curva - che c'e' - si perdeva.
   Qui prende la stessa ombra delle altre schede, centrata e neutra. */
body #barraMenuSinistra {
    box-shadow: 0 12px 34px rgba(16, 24, 40, .22);
}

/**************************************************************************************/
/*  Tutto sulla stessa linea                                                          */
/*                                                                                    */
/*  La colonna e' salita a filo dell'icona del MENU: barra storica, pannello e         */
/*  graduatorie devono seguirla, altrimenti aprendo il menu si vedono due altezze di   */
/*  partenza diverse a sei pixel l'una dall'altra - che si notano proprio perche' sono */
/*  pochi. L'altezza massima segue l'inizio, come sempre.                              */
/**************************************************************************************/

body #barraMenuSinistra,
body #bfSiPay,
body .bfSiPayRecenti {
    top: 64px;
    max-height: calc(100% - 84px);
}

/* Lo stacco sopra la ragione sociale era pensato per quando la barra partiva dal bordo alto
   della finestra e aveva tutta l'altezza a disposizione. Ora parte da 64px e si ferma prima
   del fondo: quei cinquanta pixel sono il vuoto piu' grande rimasto, e sono quelli che
   spingono il contenuto oltre il riquadro facendo comparire la barra di scorrimento. */
body #barraMenuSinistra .menu-denominazionePoint {
    margin-top: 12px;
}

/**************************************************************************************/
/*  La colonna senza scheda                                                           */
/*                                                                                    */
/*  Undici icone grigie non hanno bisogno di un contenitore: fondo bianco, ombra e     */
/*  angoli tondi le facevano leggere come un secondo piano sospeso sopra una pagina    */
/*  che e' gia' chiara. Tolti, restano le sole icone appoggiate alla pagina.           */
/*                                                                                    */
/*  Al posto del riquadro un filo verticale a destra: senza nulla che le separi dal    */
/*  contenuto le icone sembrerebbero parte della pagina invece che un comando a se'.   */
/*  E' tenue di proposito - deve dire dove finisce la colonna, non disegnarla.         */
/**************************************************************************************/

body #bfSiPayColonna {
    background-color: transparent;
    border-radius: 0;
    box-shadow: none;
    border-right: 1px solid rgba(16, 24, 40, .07);
}

/* Senza il fondo bianco sotto, il grigio del passaggio del mouse cadeva sul grigio della
   pagina e non si vedeva piu': serve un tono che stacchi da quello, non dal bianco. */
body #bfSiPayColonna .bfSiPayColonnaVoce:hover {
    background-color: #e7ebf0;
}

/**************************************************************************************/
/*  La colonna: respiro attorno alle icone e fondo quando il menu e' aperto            */
/**************************************************************************************/

/* Senza il riquadro, il filo verticale e' l'unico bordo che si vede, e le icone gli stavano
   addosso: sette pixel da un lato e uno spazio aperto dall'altro si leggono come uno
   sbilanciamento, non come una colonna stretta. Allargandola sono tredici per parte, e il
   filo resta dov'era rispetto al contenuto perche' la posizione si calcola dalla larghezza.
   Il nome dell'elemento davanti al :root non e' un vezzo: il foglio comune, che porta il
   valore di partenza, e' caricato dopo questo, e a parita' di peso vincerebbe lui. */
html:root {
    --bfSiPayLarghezza: 60px;
}

/* Con il menu intero in pagina la colonna se ne va: le sue icone sono le stesse aree che il
   pannello elenca per esteso li' accanto, e tenerle entrambe le mostra due volte.
   Chi apre proprio dalla colonna e' l'eccezione: li' la colonna e' il comando che si sta
   usando, il pannello ci sta gia' sopra, e farla sparire da sotto il puntatore mentre lo si
   tiene fermo sull'icona interromperebbe il gesto a meta'. */
body .bfSiPayAperta:not(.bfSiPayDallaColonna) #bfSiPayColonna {
    display: none;
}

/* La chiusura del menu colorato sale a filo del bordo: sotto di lei c'e' il logo, che ha gia'
   il suo stacco, mentre sopra restava un vuoto che nessuno degli altri riquadri ha. */
body #barraMenuSinistra .menu-chiudi {
    margin-top: -12px;
}

/**************************************************************************************/
/*  La barra di scorrimento in fondo al menu colorato                                 */
/*                                                                                    */
/*  Non era verticale, come sembrava, ma orizzontale: le voci del menu sono larghe     */
/*  308px con trentasei di margine negativo per parte, misure fatte quando la barra    */
/*  era larga 300 - cosi' la voce arrivava esatta al bordo e sconfinava di quanto      */
/*  bastava a non lasciarci un margine. Portata la barra a 280, quei 308 sono venti    */
/*  pixel di troppo, e il browser ha mostrato di che cosa si trattava.                 */
/*                                                                                    */
/*  Si taglia invece di rimpicciolire la voce: sconfinare a destra e' voluto - la voce */
/*  non ha bordo da quel lato proprio per correre fino in fondo - e legare la sua      */
/*  larghezza a quella della barra vorrebbe dire rifare la misura a ogni ritocco.      */
/*                                                                                    */
/*  Da sola la riga non basterebbe a spiegarsi: e' lo scorrimento verticale, che serve */
/*  sulle finestre basse, a obbligare il browser a occuparsi anche dell'orizzontale -  */
/*  un asse che scorre non puo' stare accanto a uno che deborda.                       */
/**************************************************************************************/

body #barraMenuSinistra {
    overflow-x: hidden;
}

/**************************************************************************************/
/*  Supporto e Id PO tornano in fondo                                                 */
/*                                                                                    */
/*  Nel flusso si mettevano in coda alle voci e restavano a mezz'aria, con sotto un    */
/*  vuoto lungo quanto il riquadro: sono i dati che si cercano quando serve chiamare   */
/*  qualcuno, e il posto dove si cercano e' il piede.                                  */
/*                                                                                    */
/*  Il margine automatico e non il ritorno fuori dal flusso: in una colonna flessibile */
/*  si mangia lo spazio avanzato e spinge il blocco al fondo da se'. Restando nel      */
/*  flusso non puo' finire sopra le voci, quindi non c'e' piu' spazio da riservargli   */
/*  in fondo - ed era proprio quello spazio prenotato, quando erano fuori dal flusso,  */
/*  a far crescere il riquadro oltre l'altezza disponibile.                            */
/**************************************************************************************/

body #barraMenuSinistra .menu-footer {
    margin-top: auto;
}

/**************************************************************************************/
/*  La colonna si fa da parte finche' non la si cerca                                 */
/*                                                                                    */
/*  Agganciata, la colonna sta in pagina tutto il tempo, anche mentre si lavora ad     */
/*  altro: velata resta leggibile quanto basta a ritrovare l'icona che si sa gia' dove */
/*  sta, senza tirare l'occhio via dal contenuto. Avvicinandosi torna piena, ed e' il  */
/*  passaggio del mouse sulla colonna intera a riaccenderla - non sulla singola icona: */
/*  quando ci si avvicina non si sa ancora quale si vuole, e vederne una sola tornare  */
/*  nitida mentre le altre restano in ombra farebbe cercare due volte.                 */
/**************************************************************************************/

body #bfSiPayColonna {
    opacity: .62;
    transition: opacity .18s ease;
}

    body #bfSiPayColonna:hover {
        opacity: 1;
    }

/**************************************************************************************/
/*  L'icona del MENU scorre con la pagina                                             */
/*                                                                                    */
/*  Fissata alla finestra restava a mezz'aria mentre la pagina scorreva sotto, e       */
/*  finiva addosso al contenuto - sulle tabelle lunghe si sovrapponeva all'intestazione*/
/*  delle colonne. Sta nella riga dei comandi, sopra il titolo: e' li' che si trova    */
/*  quando serve, e da li' se ne va insieme al resto.                                  */
/*                                                                                    */
/*  Assoluta e non statica: la posizione la decide ancora lo script, che misura dove   */
/*  comincia il contenuto, e le due misure restano quelle di prima - a pagina in cima  */
/*  l'icona sta esattamente dove stava.                                                */
/**************************************************************************************/

body #menu_sinistra #menu_icona {
    position: absolute;
}


/* La voce del menu si preme su tutta la riga, non solo sulla scritta: il collegamento
   si distende sul riquadro che lo contiene. */
body #barraMenuSinistra .menu-voce {
    position: relative;
}

body #barraMenuSinistra .menu-voce a::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}