/* Minification failed. Returning unminified contents. (4826,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '@if' (5018,9): run-time error CSS1062: Expected semicolon or closing curly-brace, found '@if' (7360,26): run-time error CSS1039: Token not allowed after unary operator: '-nflpb-website-grey-grey-10' (7379,30): run-time error CSS1039: Token not allowed after unary operator: '-nflpb-website-grey-grey-10' (7862,1): run-time error CSS1019: Unexpected token, found '}' (7863,1): run-time error CSS1019: Unexpected token, found '}' (8801,1): run-time error CSS1019: Unexpected token, found '}' (9775,53): run-time error CSS1030: Expected identifier, found '.' (9775,66): run-time error CSS1031: Expected selector, found ')' (9775,66): run-time error CSS1025: Expected comma or open brace, found ')' (9872,53): run-time error CSS1030: Expected identifier, found '.' (9872,66): run-time error CSS1031: Expected selector, found ')' (9872,66): run-time error CSS1025: Expected comma or open brace, found ')' (11853,34): run-time error CSS1062: Expected semicolon or closing curly-brace, found '.' (12306,26): run-time error CSS1039: Token not allowed after unary operator: '-nflpb-website-grey-grey-10' (12675,26): run-time error CSS1039: Token not allowed after unary operator: '-nflpb-website-grey-grey-10' (12880,28): run-time error CSS1030: Expected identifier, found '.' (12880,48): run-time error CSS1031: Expected selector, found ')' (12880,48): run-time error CSS1025: Expected comma or open brace, found ')' (13733,1): run-time error CSS1019: Unexpected token, found '@-webkit-keyframes' (13734,8): run-time error CSS1035: Expected colon, found '{' (13743,1): run-time error CSS1019: Unexpected token, found '@keyframes' (13744,8): run-time error CSS1035: Expected colon, found '{' (14493,1): run-time error CSS1019: Unexpected token, found '@-webkit-keyframes' (14494,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%' (14503,1): run-time error CSS1019: Unexpected token, found '@keyframes' (14504,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%' (24553,1): run-time error CSS1019: Unexpected token, found '}' (25950,1): run-time error CSS1019: Unexpected token, found '@keyframes' (25951,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '100%' (26202,18): run-time error CSS1062: Expected semicolon or closing curly-brace, found ':' (26211,18): run-time error CSS1062: Expected semicolon or closing curly-brace, found ':' (27239,1): run-time error CSS1019: Unexpected token, found '@-webkit-keyframes' (27240,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%' (27263,1): run-time error CSS1019: Unexpected token, found '@keyframes' (27264,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%' (27289,1): run-time error CSS1019: Unexpected token, found '@-webkit-keyframes' (27290,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%' (27310,1): run-time error CSS1019: Unexpected token, found '@keyframes' (27311,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%' (27331,1): run-time error CSS1019: Unexpected token, found '@-webkit-keyframes' (27332,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%' (27352,1): run-time error CSS1019: Unexpected token, found '@keyframes' (27353,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%' (27396,1): run-time error CSS1019: Unexpected token, found '@-webkit-keyframes' (27397,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%' (27408,1): run-time error CSS1019: Unexpected token, found '@keyframes' (27409,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%' (27420,1): run-time error CSS1019: Unexpected token, found '@-webkit-keyframes' (27421,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%' (27432,1): run-time error CSS1019: Unexpected token, found '@keyframes' (27433,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%' (27491,1): run-time error CSS1019: Unexpected token, found '@-webkit-keyframes' (27492,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%' (27499,1): run-time error CSS1019: Unexpected token, found '@keyframes' (27500,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%' (27507,1): run-time error CSS1019: Unexpected token, found '@-webkit-keyframes' (27508,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%' (27519,1): run-time error CSS1019: Unexpected token, found '@keyframes' (27520,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%' (27531,1): run-time error CSS1019: Unexpected token, found '@-webkit-keyframes' (27532,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%' (27543,1): run-time error CSS1019: Unexpected token, found '@keyframes' (27544,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%' (27555,1): run-time error CSS1019: Unexpected token, found '@-webkit-keyframes' (27556,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%' (27567,1): run-time error CSS1019: Unexpected token, found '@keyframes' (27568,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%' (27579,1): run-time error CSS1019: Unexpected token, found '@-webkit-keyframes' (27580,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%' (27591,1): run-time error CSS1019: Unexpected token, found '@keyframes' (27592,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%' (27605,1): run-time error CSS1019: Unexpected token, found '@-webkit-keyframes' (27606,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%' (27613,1): run-time error CSS1019: Unexpected token, found '@keyframes' (27614,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%' (27621,1): run-time error CSS1019: Unexpected token, found '@-webkit-keyframes' (27622,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%' (27633,1): run-time error CSS1019: Unexpected token, found '@keyframes' (27634,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%' (27645,1): run-time error CSS1019: Unexpected token, found '@-webkit-keyframes' (27646,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%' (27657,1): run-time error CSS1019: Unexpected token, found '@keyframes' (27658,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%' (27669,1): run-time error CSS1019: Unexpected token, found '@-webkit-keyframes' (27670,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%' (27681,1): run-time error CSS1019: Unexpected token, found '@keyframes' (27682,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%' (27693,1): run-time error CSS1019: Unexpected token, found '@-webkit-keyframes' (27694,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%' (27705,1): run-time error CSS1019: Unexpected token, found '@keyframes' (27706,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%' (27745,1): run-time error CSS1019: Unexpected token, found '@-webkit-keyframes' (27746,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%' (27757,1): run-time error CSS1019: Unexpected token, found '@keyframes' (27758,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%' (27769,1): run-time error CSS1019: Unexpected token, found '@-webkit-keyframes' (27770,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%' (27781,1): run-time error CSS1019: Unexpected token, found '@keyframes' (27782,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%' (27795,1): run-time error CSS1019: Unexpected token, found '@-webkit-keyframes' (27796,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%' (27807,1): run-time error CSS1019: Unexpected token, found '@keyframes' (27808,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%' (27819,1): run-time error CSS1019: Unexpected token, found '@-webkit-keyframes' (27820,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%' (27831,1): run-time error CSS1019: Unexpected token, found '@keyframes' (27832,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%' (27856,1): run-time error CSS1019: Unexpected token, found '@-webkit-keyframes' (27857,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%' (27868,1): run-time error CSS1019: Unexpected token, found '@keyframes' (27869,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%' (27882,1): run-time error CSS1019: Unexpected token, found '@-webkit-keyframes' (27883,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%' (27894,1): run-time error CSS1019: Unexpected token, found '@keyframes' (27895,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%' (27963,1): run-time error CSS1019: Unexpected token, found '@-webkit-keyframes' (27964,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%' (27992,1): run-time error CSS1019: Unexpected token, found '@keyframes' (27993,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%' (28021,1): run-time error CSS1019: Unexpected token, found '@-webkit-keyframes' (28022,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%' (28045,1): run-time error CSS1019: Unexpected token, found '@keyframes' (28046,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%' (28069,1): run-time error CSS1019: Unexpected token, found '@-webkit-keyframes' (28070,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%' (28093,1): run-time error CSS1019: Unexpected token, found '@keyframes' (28094,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%' (28117,1): run-time error CSS1019: Unexpected token, found '@-webkit-keyframes' (28118,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%' (28141,1): run-time error CSS1019: Unexpected token, found '@keyframes' (28142,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%' (28165,1): run-time error CSS1019: Unexpected token, found '@-webkit-keyframes' (28166,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%' (28189,1): run-time error CSS1019: Unexpected token, found '@keyframes' (28190,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%' (28215,1): run-time error CSS1019: Unexpected token, found '@-webkit-keyframes' (28216,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '20%' (28232,1): run-time error CSS1019: Unexpected token, found '@keyframes' (28233,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '20%' (28249,1): run-time error CSS1019: Unexpected token, found '@-webkit-keyframes' (28250,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '20%' (28266,1): run-time error CSS1019: Unexpected token, found '@keyframes' (28267,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '20%' (28283,1): run-time error CSS1019: Unexpected token, found '@-webkit-keyframes' (28284,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '20%' (28300,1): run-time error CSS1019: Unexpected token, found '@keyframes' (28301,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '20%' (28317,1): run-time error CSS1019: Unexpected token, found '@-webkit-keyframes' (28318,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '20%' (28329,1): run-time error CSS1019: Unexpected token, found '@keyframes' (28330,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '20%' (28341,1): run-time error CSS1019: Unexpected token, found '@-webkit-keyframes' (28342,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '20%' (28353,1): run-time error CSS1019: Unexpected token, found '@keyframes' (28354,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '20%' (28422,1): run-time error CSS1019: Unexpected token, found '@-webkit-keyframes' (28423,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%' (28434,1): run-time error CSS1019: Unexpected token, found '@keyframes' (28435,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%' (28446,1): run-time error CSS1019: Unexpected token, found '@-webkit-keyframes' (28447,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%' (28458,1): run-time error CSS1019: Unexpected token, found '@keyframes' (28459,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%' (28472,1): run-time error CSS1019: Unexpected token, found '@-webkit-keyframes' (28473,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%' (28484,1): run-time error CSS1019: Unexpected token, found '@keyframes' (28485,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%' (28496,1): run-time error CSS1019: Unexpected token, found '@-webkit-keyframes' (28497,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%' (28508,1): run-time error CSS1019: Unexpected token, found '@keyframes' (28509,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%' (28580,1): run-time error CSS1019: Unexpected token, found '@-webkit-keyframes' (28581,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%' (28604,1): run-time error CSS1019: Unexpected token, found '@keyframes' (28605,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%' (28628,1): run-time error CSS1019: Unexpected token, found '@-webkit-keyframes' (28629,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%' (28652,1): run-time error CSS1019: Unexpected token, found '@keyframes' (28653,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%' (28678,1): run-time error CSS1019: Unexpected token, found '@-webkit-keyframes' (28679,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%' (28702,1): run-time error CSS1019: Unexpected token, found '@keyframes' (28703,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%' (28726,1): run-time error CSS1019: Unexpected token, found '@-webkit-keyframes' (28727,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%' (28750,1): run-time error CSS1019: Unexpected token, found '@keyframes' (28751,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%' (28823,1): run-time error CSS1019: Unexpected token, found '@-webkit-keyframes' (28824,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%' (28834,1): run-time error CSS1019: Unexpected token, found '@keyframes' (28835,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%' (28847,1): run-time error CSS1019: Unexpected token, found '@-webkit-keyframes' (28848,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%' (28869,1): run-time error CSS1019: Unexpected token, found '@keyframes' (28870,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%' (28893,1): run-time error CSS1019: Unexpected token, found '@-webkit-keyframes' (28894,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%' (28911,1): run-time error CSS1019: Unexpected token, found '@keyframes' (28912,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%' (28931,1): run-time error CSS1019: Unexpected token, found '@-webkit-keyframes' (28932,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%' (28959,1): run-time error CSS1019: Unexpected token, found '@keyframes' (28960,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%' (28989,1): run-time error CSS1019: Unexpected token, found '@-webkit-keyframes' (28990,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%' (29006,1): run-time error CSS1019: Unexpected token, found '@keyframes' (29007,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%' (29025,1): run-time error CSS1019: Unexpected token, found '@-webkit-keyframes' (29026,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%' (29055,1): run-time error CSS1019: Unexpected token, found '@keyframes' (29056,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%' */ /* ----------------- colors #ff6c42 = messagebox orange border #eaedf0 = messagebox blue bkgrd #eaedf0 = table borders blue #1b997d = messagebox green text #1b997d = messagebox green border #f2f3f5 = c-callout gray #f2f3f5 = table column bkgrd ------------------- */ /* ----------------- Utility classes ----------------- */ .m-btm-0 { margin-bottom: 0; } .m-btm-10 { margin-bottom: 10px !important; } .m-btm-15 { margin-bottom: 15px; } .m-btm-20 { margin-bottom: 20px; } .m-btm-25 { margin-bottom: 25px; } .m-btm-50 { margin-bottom: 50px; } .m-btm-neg35 { margin-bottom: -35px; } .pad-btm-0 { padding-bottom: 0px; } .pad-btm-10 { padding-bottom: 10px; } .pad-btm-30 { padding-bottom: 30px; } .pad-btm-70 { padding-bottom: 70px; } .pad-top-50 { padding-top: 50px; } .line-height-22 { line-height: 22px; } .m-top-10 { margin-top: 10px; } .m-top-15 { margin-top: 15px; } .m-top-20 { margin-top: 20px; } .m-top-25 { margin-top: 20px; } .m-top-30 { margin-top: 30px; } .m-top-12-percent { margin-top: 12%; } .m-top-40 { margin-top: 40px; } .m-top-50 { margin-top: 30px; } .m-top-neg35 { margin-top: -35px; } .m-top-neg25 { margin-top: -25px; } .m-top-0 { margin-top: 0px !important; } .m-right-20 { margin-right: 20px; } .m-left-20 { margin-left: 20px; } /* ====================== beneficiaries custom classes ====================== */ /*h3:first-of-type + p { margin-bottom: 0; } */ a.a--strong { font-family: "Macha-Bold", sans -serif; } .a--strong:after { content: '\2C5'; margin-left: 0.3em; font-size: .8em; font-family: "Macha-Bold", sans-serif; } p.transform-up { margin-top: 10px; margin-bottom: 0; } .c-benef-options__border { border: 2px solid #d4d9dd; width: 30px; margin-bottom: 25px; display: inline-block; } .c-benef-options__largelabel { font-family: "Macha-Bold", sans-serif; font-size: 14px; text-transform: uppercase; letter-spacing: 1.5px; margin-bottom: 7px; color: #5f6f7f; width: 208px; overflow: hidden; text-overflow: ellipsis; /* ellipis will display if char limit exceeds 22 per wireframe */ white-space: nowrap; } .c-benef-options__flagmsg-120 { overflow: hidden; height: 60px; /* set character limit >= 120 per wireframe */ max-width: 38ch; } .c-benef-options__txtlink-45 { max-width: 34ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } ul.c-benef-options__creditseasons { height: 60px; max-width: 30ch; margin-top: 20px; margin-bottom: 40px; } .c-benef-options__creditseasons li { border-top: 20px solid #eaedf0; border-bottom: 20px solid #eaedf0; border-right: 5px solid transparent; width: 40px; height: 20px; text-align: center; line-height: 3px; white-space: nowrap; color: #00ba98; font-weight: bold; display: inline-block; margin-right: 5px; margin-bottom: 10px; font-size: 12px; } /* ====================== disability classes ====================== */ table.lod-disability__table { border-collapse: collapse; border-spacing: 0; border-top: 1px solid #eaedf0; border-right: none; border-bottom: 1px solid #eaedf0; border-left: 1px solid #eaedf0; width: 100%; margin: 30px 0 0 0; padding: 0; line-height: 22px; } table.lod-disability__table tr th { padding: 20px; text-align: right; font-weight: bold; vertical-align: top; background: #f2f3f5; border-bottom: 1px solid #eaedf0; } table.lod-disability__table td { padding: 20px; vertical-align: top; border-bottom: 1px solid #eaedf0; } table.lod-disability__table tr.header-row th { background: #A4ACB6; color: #fff; padding: 20px; font-weight: bold; text-align: center; } @media screen and (max-width:600px) { table.lod-disability__table tr th, table.lod-disability__table td { display: block; text-align: left; } table.lod-disability__table ul.ul--default li { text-align: left !important; } } #lod-message-content { background: #f2f3f5; margin-left: auto; margin-right: auto; line-height: 22px; } .lod-disability__flag-message--icon { padding-left: 30px; padding-top: 2px; background: url("/assets/images/controls/c-message/flag.svg") no-repeat; } .lod-disability__statustbl { display: table; margin-bottom: 20px; width: 100%; } .lod-disability__statusrow { display: table-row; } .lod-disability__statuscell { display: table-cell; } .lod-disability__statuscell-top { display: table-cell; vertical-align: middle; padding-left: 10px; } p.p--intro.disability-intro-btm, div.l-columns--with-divider.disability-intro-btm, section.c-resources--two-boxes.disability-intro-btm { margin-bottom: 65px; } .c-infographic__icon--lod-documentation-forms:after { -webkit-transform: translate(-81px, -80px); -ms-transform: translate(-81px, -80px); transform: translate(-81px, -80px); background-image: url("/assets/images/icons/infographics/documentation-forms.svg"); } .c-infographic__icon--lod-surgeon:after { -webkit-transform: translate(-81px, -80px); -ms-transform: translate(-81px, -80px); transform: translate(-81px, -80px); background-image: url("/assets/images/icons/infographics/surgeon.svg"); } .c-infographic__icon--lod-committee:after { -webkit-transform: translate(-81px, -80px); -ms-transform: translate(-81px, -80px); transform: translate(-81px, -80px); background-image: url("/assets/images/icons/infographics/committee.svg"); } .c-infographic__icon--lod-calendar:after { -webkit-transform: translate(-81px, -80px); -ms-transform: translate(-81px, -80px); transform: translate(-81px, -80px); background-image: url("/assets/images/icons/infographics/calendar.svg"); } .c-infobox h1:first-of-type { font-size: 46px; line-height: 52px; text-align: left; margin-bottom: 10px; letter-spacing: 5px; max-width: 80%; margin-left: 0; margin-right: 0; } .l-content-holder .lod-disability-subtopic h3:not(:first-child) { margin-top: 20px; } .l-content-holder.lod-disability__bordered-list header { font-size: 32px; font-weight: 600; margin-bottom: 10px; line-height: 40px; } .lod-disability__bordered-list-subheader { line-height: 48px; text-transform: uppercase; letter-spacing: 1.5px; font-family: "Macha-Medium", sans-serif; color: #939eae; padding-left: 20px; font-size: 16px; font-weight: normal; background: #f2f3f5; border-bottom: solid 1px #dadee3; /*border-top: solid 2px #dadee3;*/ } .lod_disability__bordered-list-content { line-height: 64px; border-top: solid 2px #dadee3; font-weight: bold; } .lod_disability__bordered-list-content:last-of-type { border-bottom: solid 2px #dadee3; } .disability-callout { text-align: center; width:100%; } .disability-callout-title { width: 195px; height: 28px; font-family: Macha; font-size: 22px; font-weight: 500; font-style: normal; font-stretch: normal; line-height: 1.27; letter-spacing: normal; text-align: center; color: #142435; margin:auto; } .disability-callout-text { width: 492px; height: 24px; font-family: Macha-Book; font-size: 16px; font-weight: normal; font-style: normal; font-stretch: normal; line-height: 1.5; letter-spacing: normal; color: #1b3045; margin:auto; } .disability-callout-button { margin-top: 20px; margin-bottom: 30px; font-size: 18px; line-height: 18px; font-family: "Macha-Bold", sans-serif !important; color: #fff !important; font-weight: 400 !important; letter-spacing: 1.5px !important; } .c-megamenu__submenu .disability-callout-button { margin-bottom: 0px; } .bordered-list-doctitle { font-size: 18px; color: #1b3045; padding-left: 20px; /*padding: 20px 0 20px 20px;*/ } .bordered-list-linktitle { font-size: 18px; color: #00a4da; text-align: right; margin-right: 20px; } .bordered-list-linktitle a { display: inline-block; } fieldset.lod-borderbox-gray { padding: 30px 25px; border: 2px solid #f2f3f5; text-align: center; } @media screen and (max-width:699px) { .lod_disability__bordered-list-content { line-height: 28px; } .bordered-list-doctitle { margin: 10px 0 5px 0px; padding-left: 0px; } .bordered-list-linktitle { margin-bottom: 10px; } p.p--intro, .u-text-p-above-mobile.p--intro { font-size: 18px; line-height: 28px; text-align: center; color: #606f7f; } } @media screen and (min-width:700px) and (max-width:917px) { .bordered-list-doctitle { line-height: 28px; padding: 20px 0 20px 20px; } } @media screen and (min-width:918px) { .bordered-list-doctitle { line-height: 64px; } } /* ====================== Disability - Documents & Forms ====================== */ .l-content-holder.lod-disability__document-forms-list header { font-size: 32px; font-weight: 300; margin-bottom: 10px; line-height: 40px; } .l-content-holder.lod-disability__document-forms-list header ~ header { margin-top: 30px; } /*.lod_disability__document-forms-list-content:last-of-type ~ header { border-bottom:none; }*/ .lod-disability__document-forms-list-subheader { line-height: 48px; text-transform: uppercase; letter-spacing: 1.5px; font-family: "Macha-Medium", sans-serif; color: #939eae; padding-left: 20px; font-size: 16px; font-weight: normal; background: #f2f3f5; border-bottom: solid 1px #dadee3; /*border-top: solid 2px #dadee3;*/ } .lod_disability__document-forms-list-content { line-height: 64px; border-top: solid 2px #dadee3; font-weight: 600; color: #132c45; padding-bottom: 10px; } .lod_disability__document-forms-list-content > div > a > span { font-size: 14px; margin-top: 0; } .lod_disability__document-forms-list-content > div > p > a { margin-top: 25px; display: inline-block; } .lod_disability__document-forms-list-content div > span { font-size: 16px; line-height: 18px; font-weight: normal; } .lod_disability__document-forms-list-content div:last-of-type { padding-top: 10px; } .lod_disability__document-forms-list-content:last-of-type { border-bottom: solid 2px #dadee3; /*border-bottom: none;*/ } /*.bordered-list-doctitle */ .lod_disability__document-forms-list-content div:first-of-type { font-size: 18px; color: #1b3045; padding: 20px 0 20px 20px; } /*.bordered-list-linktitle */ .lod_disability__document-forms-list-content div:last-of-type { font-size: 18px; color: #00a4da; text-align: right; /*margin-right: 20px;*/ margin: 20px 0 20px 20px; } @media screen and (max-width:699px) { .lod_disability__document-forms-list-content { line-height: 28px; } .lod_disability__document-forms-list-content div:first-of-type > span { margin-top: 10px; display: inline-block; line-height: 18px; } .lod_disability__document-forms-list-content .div:first-of-type { margin: 10px 0 5px 0px; padding-left: 0px; } .lod_disability__document-forms-list-content div:last-of-type { margin: 0 0 10px 0; text-align: center; } } @media screen and (min-width:700px) and (max-width:917px) { .lod_disability__document-forms-list-content div:first-of-type { line-height: 28px; } .lod_disability__document-forms-list-content div:last-of-type { line-height: 24px; margin-top: 10px; } } @media screen and (min-width:918px) { .lod_disability__document-forms-list-content div:first-of-type { line-height: 24px; margin: 20px 0 20px 20px; } .lod_disability__document-forms-list-content div:last-of-type { line-height: 24px; } } /* ====================== Contact Us Online form ====================== */ .l-content-holder.c-form--contactonline {} .l-content-holder.c-form--contactonline fieldset { margin-top: 50px; } .c-form--contactonline__content {} .c-form--contactonline__content hr { border: 2px solid #d4d9dd; width: 30px; margin-bottom: 50px; } .c-form--contactonline__content label, .c-form--contactonline__content .ui-btn { margin-top: 15px; } .c-form--contactonline textarea { padding: 20px; font-family: "Macha-Book", sans-serif; line-height: 24px; border: 2px solid #dadee3; border-radius: 3px; -webkit-transition: all 0.25s; transition: all 0.25s; } textarea.c-form-control { padding: 20px; font-family: "Macha-Book", sans-serif; line-height: 24px; border: 2px solid #dadee3; border-radius: 3px; -webkit-transition: all 0.25s; transition: all 0.25s; } hr.c-form-linebreak { border: 0.5px solid #d4d9dd; } .c-form__info { font-family: Macha-Book; font-size: 16px; font-weight: normal; font-style: normal; font-stretch: normal; /*line-height: 1.5;*/ color: #1b3045; line-height: 20px; margin-top: 45px; margin-bottom: 10px; } .c-form--contactonline__info { margin-left: 20px; padding-left: 24px; padding-top: 0px; background: url("/assets/images/icons/green/light.svg") no-repeat; } .c-form--contactonline__info a { display: inline-block; } .c-form-contact-email, .c-form-contact-phone { display: inline-block; width: 300px; padding: 13px 15px 9px; font-size: 20px; line-height: 20px; color: #152c46; background-color: #fff; margin-left: 30px; } .c-form input[type='tel'] { border: 2px solid #dadee3; border-radius: 3px; font-family: "Macha-Book", sans-serif; -webkit-transition: all 0.25s; transition: all 0.25s; } .c-form-group--inline.c-form-contact-email__checkbox { margin: 5px 0px 0px 30px; } @media screen and (min-width: 320px) and (max-width: 483px) { .c-form__info { /*line-height: 0px;*/ } } @media screen and (min-width: 484px) and (max-width: 700px) { .c-form__info { font-size: 14px; line-height: 40px; color: #95a0ac; margin-top: 0px; margin-bottom: 10px; } } /* ====================== component classes ====================== */ /*------ Message Box ---------*/ .c-form-messagebox__orange { font-family: "Macha-Book", sans-serif; color: #1B3045; padding-top: 20px; padding-bottom: 20px !important; padding-left: 20px; padding-right: 20px; border-left: 5px solid #FF6C42; border-radius: 5px; background: #ffe9e3; margin-bottom: 30px; font-size: 16px; line-height: 22px; text-align: left; } .c-form-messagebox__red { font-family: "Macha-Book", sans-serif; color: #1B3045; padding-top: 20px; padding-bottom: 20px !important; padding-left: 20px; padding-right: 20px; border-left: 5px solid #DE0000; border-radius: 5px; background: #fad9d9; margin-bottom: 30px; font-size: 16px; line-height: 22px; text-align: left; } .c-form-messagebox__green { font-family: "Macha-Book", sans-serif; color: #1b997d; padding-top: 20px; padding-bottom: 20px !important; padding-left: 20px; padding-right: 20px; border-left: 8px solid #1b997d; background: #eaedf0; margin-bottom: 30px; font-size: 16px; line-height: 22px; text-align: left; } #alert-section { display:none; } @media only screen and (max-width: 699px) { #alert-section { display: block; } .c-form-messagebox__banner-alert.normal-alert { display:none; } } .c-form-messagebox__banner-alert { position:relative; font-family: "Macha-Book", sans-serif; color: #1B3045; padding-top: 10px; padding-bottom: 10px !important; padding-left: 60px; padding-right: 30px; background: #eaedf0; font-size: 16px; line-height: 22px; text-align: left; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; /* -webkit-transform: translateY(-150%); transform: translateY(-150%); -webkit-animation: alert-banner-slide-in 0.8s ease forwards; animation: alert-banner-slide-in 0.8s ease forwards;*/ box-shadow: 0px 0px 10px 0px #00000040; } .floating-alert { position: fixed; left: 10%; width: 80%; top: 15%; border-radius: 5px; padding: 10px !important; background-color: #FFFAED; border-left: 5px solid #FFC221; box-shadow: 0px 0px 10px 0px #00000040; } .banner-message { display:flex; align-items: center; } @media only screen and (max-width: 699px) { .banner-message { display: flex; align-items: flex-start; } } @-webkit-keyframes alert-banner-slide-in { 0% { -webkit-transform: translateY(-150%); transform: translateY(-150%); } 100% { -webkit-transform: translateY(0%); transform: translateY(0%); } } @keyframes alert-banner-slide-in { 0% { -webkit-transform: translateY(-150%); transform: translateY(-150%); } 100% { -webkit-transform: translateY(0%); transform: translateY(0%); } } .c-form-messagebox__banner-alert .banner-cta a { text-decoration: none; font-size: 16px; white-space: nowrap; } .c-form-messagebox__banner-alert a { text-decoration: underline; color: #1B3045; } .c-form-messagebox__banner-alert.low-urgency { background-color: #D3F4FF; } .c-form-messagebox__banner-alert.low-urgency .close::before { background-color: #1B3045; } .c-form-messagebox__banner-alert.low-urgency .close::after { background-color: #1B3045; } .c-form-messagebox__banner-alert.low-urgency .banner-icon .banner-cta a.ui-btn.ui-btn--tetriary:hover { border-color: #D3F4FF; color: #D3F4FF; background-color: #1B3045; } .c-form-messagebox__banner-alert.medium-urgency { background-color: #FFCF50; } .c-form-messagebox__banner-alert.medium-urgency .close::before { background-color: #1B3045; } .c-form-messagebox__banner-alert.medium-urgency .close::after { background-color: #1B3045; } .c-form-messagebox__banner-alert.medium-urgency .banner-icon .banner-cta a.ui-btn.ui-btn--tetriary:hover { border-color: #FFCF50; color: #FFCF50; background-color: #1B3045; } .c-form-messagebox__banner-alert.high-urgency { background-color: #D92424; color: white !important; } .c-form-messagebox__banner-alert.high-urgency a { color: white; } .c-form-messagebox__banner-alert.high-urgency .banner-icon .banner-cta a.ui-btn.ui-btn--tetriary:hover { border-color: #D92424; color: #D92424; background-color: white !important; } .c-form-messagebox__banner-alert.high-urgency h3 { color: white !important; } .c-form-messagebox__banner-alert.high-urgency h4 { color: white !important; } .c-form-messagebox__banner-alert.high-urgency .close::before{ background-color: white; } .c-form-messagebox__banner-alert.high-urgency .close::after { background-color: white; } .c-form-messagebox__banner-alert .close.smallest { position: absolute; background: none; top: 50%; transform: translate(0, -50%); } .c-form-messagebox__banner-alert .banner-icon { display: flex; min-width: 100%; align-content: flex-start; align-items: center; justify-content: space-between; } .c-form-messagebox__banner-alert .banner-icon .banner-message { display:flex; } .c-form-messagebox__banner-alert .banner-icon .alert-icon { align-items: center; padding: 10px; display: flex; } .c-form-messagebox__banner-alert .banner-icon .alert-icon img { width:27px; } .c-form-messagebox__banner-alert .banner-icon .ui-btn--tetriary { background: none; color: inherit; border-color: #1B3045; } .c-form-messagebox__banner-alert.high-urgency .banner-icon .ui-btn--tetriary { border-color: white; } .c-form-messagebox__banner-alert .banner-icon div { display: inline-block; } .c-form-messagebox__banner-alert .banner-cta{ margin-right:30px; } @media only screen and (max-width: 699px) { .c-form-messagebox__banner-alert .banner-icon .alert-icon { padding-left:0; } .c-form-messagebox__banner-alert .banner-icon { flex-wrap:wrap; align-content:center; justify-content:left; } .c-form-messagebox__banner-alert .banner-cta { padding-top: 10px; padding-left:40px; } .c-form-messagebox__banner-alert .close.smallest { position: absolute; background: none; top: 10px; transform: none; } } .c-form-messagebox__banner-alert.dark { background: #5f6e7c; font-size: 16px; font-weight: bold; font-style: normal; font-stretch: normal; line-height: 1.5; letter-spacing: 0.2px; color: #ffffff; } .c-form-messagebox__banner-alert .disability-message { font-weight: normal; } .c-form-messagebox__banner-alert a.disability-link { font-weight: 500; color: #76f4d8; } .c-form-messagebox__banner-alert p { padding-right: 50px; } div.c-form-messagebox__banner-alert + div.c-form-messagebox__banner-alert { margin-top:5px; /*border-top: 1px solid #00a4da;*/ } @media only screen and (max-width: 699px) { .c-form-messagebox__banner-alert { padding-left: 10px; padding-right: 10px; } } .c-form-messagebox__banner-alert h3 { padding-left: 10px; margin-bottom: 0; } .c-form-messagebox__banner-alert h4 { padding-left: 10px; margin-bottom: 0; font-size: 18px; line-height: 20px; } .c-form-messagebox__banner-alert p { padding-left: 10px; } div.l-content-holder.messageboxholder { padding-bottom: 0; padding-top: 0; } ul.c-form-messagebar__list, ul.c-form-messagebar__list_dismissable { padding: 40px 50px 40px 70px; background: #eaedf0; margin-top: 20px; position: relative; } .c-form-messagebar__list li, .c-form-messagebar__list_dismissable li { /*background: url("../images/controls/c-message/flag.svg") no-repeat 7px 2px;*/ line-height: 20px; list-style-image: url("/assets/images/controls/c-message/flag.svg"); padding: 10px 0px 15px 15px; vertical-align: bottom; text-align: left; } .c-form-messagebar__list_dismissable li:hover { background: #F9FAFB; } span.dismiss-item a { font-size: 20px; color: #95a0ac; float: right; margin-right: 5px; transform: scale(2, 1); -webkit-transform: scale(2, 1); } @media (min-width: 320px) and (max-width: 700px) { ul.c-form-messagebar__list, ul.c-form-messagebar__list_dismissable { padding: 40px 50px; background: #eaedf0; margin-top: 20px; margin-left: 20px; } .c-form-messagebar__list li, .c-form-messagebar__list_dismissable li { /*background: url("../images/controls/c-message/flag.svg") no-repeat 7px 2px;*/ line-height: 20px; list-style-type: none; padding: 10px 0px 20px 20px; vertical-align: middle; text-align: left; } .c-form-messagebar__list_dismissable li:hover { background: #F9FAFB; } span.dismiss-item a { font-size: 20px; color: #95a0ac; float: right; margin-right: 5px; transform: scale(2, 1); -webkit-transform: scale(2, 1); position: absolute; top: 10px; left: 300px; } } /*------ DisplayList (i.e.: Contact Us) ---------*/ .l-content-holder.c-comp__displaylist header { font-size: 32px; font-weight: 300; margin-bottom: 10px; line-height: 40px; } .l-content-holder.c-comp__displaylist header ~ header { margin-top: 30px; } .l-content-holder.c-comp__displaylist .l-col4.l-col--with-left-divider { margin: 20px 0px; padding-left: 18.5px; } .horizonbreak { display: none; margin: auto; margin-top: 15px; margin-bottom: 20px; border: 2px solid #dadee3; width: 30px; } .l-content-holder.c-comp__displaylist .horizonbreak { display: none; margin: auto; margin-top: 15px; margin-bottom: 20px; border: 2px solid #dadee3; width: 30px; } .c-accordion__content-holder.displaylistholder .horizonbreak { display: none; margin: auto; margin-top: 15px; margin-bottom: 20px; border: 2px solid #dadee3; width: 30px; } .display-list-link { margin-top: 10px; } @media screen and (max-width: 699px) { .l-content-holder.c-comp__displaylist .horizonbreak { display: block; } .c-accordion__content-holder.displaylistholder .horizonbreak { display: block; } .display-list-link { margin-bottom: 26px; } } .c-comp__displaylist-subheader { line-height: 48px; text-transform: uppercase; letter-spacing: 1.5px; font-family: "Macha-Medium", sans-serif; color: #939eae; padding-left: 20px; font-size: 16px; font-weight: normal; background: #f2f3f5; border-bottom: solid 1px #dadee3; } /*RDA Change: Changed color, removed padding*/ .c-comp__displaylist-content { line-height: 64px; border-top: solid 1px #dadee3; font-weight: 600; color: #132c45; /*padding-bottom: 10px;*/ } .c-comp__displaylist-content > div:first-of-type > div.displaylist-text > p { margin: 15px 30px 0px 0px; font-size: 16px; line-height: 24px; font-weight: normal; } @media screen and (max-width: 699px) { .c-comp__displaylist-content > div:first-of-type > div.displaylist-text > p { margin-right: 0; } } .l-columns.l-columns--grid .l-col--with-left-divider.no-left-border { border-left: none; } .l-columns.l-columns--grid > .l-col8:nth-child(1n).displaylst-left-column { margin-right: 0; } .c-comp__displaylist-content > div:first-of-type > div.displaylist-text > p:first-of-type { margin-top: 0; } .c-comp__displaylist-content > div:first-of-type > span { margin-bottom: 6px; } .c-comp__displaylist-content > div:first-of-type > span + div.displaylist-text { border-right: 1px solid #c6cdd4; margin-right: 0; margin-top: 12px; padding-top: 0; padding-bottom: 0; } /*Display list in accordion*/ .c-accordion__content-holder .l-col4.l-col--with-left-divider { margin: 20px 0px; padding-left: 20px; } /*RDA Change: Addedm to remove bar when display list is in accordion*/ .c-accordion__content-holder .c-comp__displaylist-content:first-child { border-top: none; } .c-accordion__content-holder .c-comp__displaylist-content:last-child { border-bottom: none; } /*Added for itemized list*/ div.l-content-holder.c-comp__displaylist > div.c-accordion__section-header + div.c-comp__displaylist-content.itemized { border-top: none; } .c-comp__displaylist-content.itemized > div:first-of-type > p { margin: 0px 20px 0px 0px; font-size: 16px; line-height: 18px; font-weight: normal; } /*Added for itemized list*/ .c-comp__displaylist-content.itemized > div > p + span { font-size: 14px; font-weight: normal; display: inline-block; } /*Added for itemized list*/ .c-comp__displaylist-content.itemized > div > span + a { font-size: 14px; font-weight: normal; display: inline-block; } .c-comp__displaylist-content.itemized > div:first-of-type > p > a { white-space:nowrap; } .c-comp__displaylist-content > div:last-of-type > p { margin-top: 20px; /*Added for display list bug fix*/ margin-bottom: 0px; } .c-comp__displaylist-content > div:last-of-type > p.itemized { margin-top: 0px; /*Added for display list bug fix*/ margin-bottom: 0px; } .c-comp__displaylist-content > div > p > span { font-weight: normal; display: block; margin-top: -3px; font-family: Macha-book, sans-serif; font-size: 13px; font-weight: normal; font-style: normal; font-stretch: normal; line-height: 1.23; color: #5f6e7c; } .c-comp__displaylist-content > div > p > span.itemized-flag-message { font-size: 14px; line-height: 18px; margin-top: 13px !important; margin-left: 20px; font-family: Macha-Medium; font-weight: 500; color: #939ea9; font-style: normal; font-stretch: normal; } .c-comp__displaylist-content > div > p > span.itemized-flag-message:before { content: ''; padding-left: 22px; padding-top: 2px; background: url(/Assets/images/controls/c-message/flag.svg) no-repeat; } .c-comp__displaylist-content > div > a > span { font-size: 14px; margin-top: 0; } .c-comp__displaylist-content > div > p + a { font-size: 14px; font-weight: normal; display: inline-block; } .c-comp__displaylist-content > div > p + a ~ a { font-size: 14px; font-weight: normal; display: inline-block; } .c-comp__displaylist-content div:last-of-type { padding-top: 15px; } .c-comp__displaylist-content div:last-of-type.itemized { padding-top: 20px; padding-bottom: 20px; } @media screen and (max-width: 699px) { .c-comp__displaylist-content div:last-of-type.itemized { margin-top: 10px; padding-bottom: 0px; } } .c-comp__displaylist-content div.display-1:last-of-type { padding-top: 50px; } .c-comp__displaylist-content:last-of-type { border-bottom: solid 1px #dadee3; } ul.displaylist-aside-list { /*list-style-type: disc;*/ font-family: Macha-Book; font-size: 16px; font-weight: normal; font-style: normal; font-stretch: normal; line-height: 24px; color: #1b3045; margin-top: 12px; } .displaylist-aside-list.c-plainlist li { margin-left: 0; } .displaylist-aside-list.c-plainlist li:before { content: ''; display: inline-block; margin-right: 5px; margin-bottom: 3px; width: 3px; height: 3px; border: 2px solid rgba(27, 48, 69, 0.75); border-radius: 50%; } @media screen and (max-width:699px) { .c-comp__displaylist-content > div:first-of-type > span + div.displaylist-text { border-right: none; text-align: center; } .displaylst-left-column { text-align: center; } div.c-comp__displaylist-content div.displaylst-right-column { text-align: center; } ul.displaylist-aside-list { text-align:center; } .displaylist-aside-list.c-plainlist li + li:before { content: ''; display: inline-block; margin-right: 19px; width: 9px; height: 9px; border: 3px solid #c6cdd4; border-radius: 50%; } .displaylist-aside-list.c-plainlist li:first-child:before { display: none; } } /*RDA Change*/ .font-medium-normal { font-family: Macha-Medium; font-weight: normal; } /*Rda Change*/ .c-accordion__section.is-expanded > .c-accordion__content-holder.displaylistholder { margin-top: -35px; } /*.bordered-list-doctitle */ /* RDA Change: Took out color*/ .c-comp__displaylist-content div:first-of-type { font-size: 18px; /*color: #1b3045;*/ /*color: #152c46;;*/ padding: 20px 0 18px 0px; } .c-comp__displaylist-content div.display1-left:first-of-type { font-size: 18px; /*color: #1b3045;*/ /*color: #152c46;;*/ padding: 50px 0 50px 0px; } @media screen and (max-width:699px) { .c-comp__displaylist-content div:first-of-type { font-size: 18px; /*color: #1b3045;*/ /*color: #152c46;;*/ padding: 0; } .c-comp__displaylist-content div.display1-left:first-of-type { font-size: 18px; /*color: #1b3045;*/ /*color: #152c46;;*/ padding: 0; } } /*.bordered-list-linktitle */ .c-comp__displaylist-content div:last-of-type { font-size: 18px; text-align: left; margin-right: 20px; } @media screen and (max-width:699px) { .c-comp__displaylist-content { line-height: 28px; } .c-comp__displaylist-content div:first-of-type > span { margin-top: 20px; display: inline-block; line-height: 18px; } .c-comp__displaylist-content div:first-of-type { margin: 10px 0 5px 0px; padding-left: 0px; } /*Added this for Itemized list*/ .c-comp__displaylist-content.itemized div:first-of-type { margin: 0 0 0px 0px; text-align:center; } .c-comp__displaylist-content.itemized div.l-col-9 { margin-right:0; } /*Added this for Itemized list*/ .c-comp__displaylist-content.itemized div:last-of-type { margin-bottom: 18px; padding-top: 0; text-align: center; } .l-content-holder.c-comp__displaylist .l-col4.l-col--with-left-divider { margin: 0px; padding: 0px; border: none; } .c-accordion__content-holder.displaylistholder .l-col4.l-col--with-left-divider { margin: 0px; padding: 0px; border: none; } } @media screen and (min-width:700px) and (max-width:917px) { .c-comp__displaylist-content div:first-of-type { line-height: 28px; } .c-comp__displaylist-content div:last-of-type { line-height: 24px; margin-top: 10px; } } @media screen and (min-width:918px) { .c-comp__displaylist-content div:first-of-type { line-height: 24px; /*margin: 20px 0 20px 20px;*/ } .c-comp__displaylist-content div:last-of-type { line-height: 24px; } } /* ====================== login custom classes ====================== */ .nflbp-darkbg { background:#1b3045; } .l-login-form{ color:#fff; background:#5f6e7c; padding:40px; } .l-login-verify{ color:#fff; background:#5f6e7c; padding-top:20px; } .r-login-form { background:#fff; color:#1b3045; margin-left:0 !important; padding:40px; } .centerdiv-content { padding:40px 40px 20px 40px; background:#fff; } div.centerdiv-content { padding:40px 40px 20px 40px; background:#fff; } .div-content-1 { padding:0px 40px 20px 40px; background:#fff; margin-top:-40px; } .div-content-full { background:#fff; padding:40px 10px 40px 40px; margin-top:-40px; } .logout-success-msg { color: #1b997d; padding-top:20px; padding-bottom:20px !important; padding-left:20px; padding-right:20px; border-left:8px solid #1b997d; background:#fff; margin-bottom:30px; } .2-col-open { background:#fff; margin-left:0; } .centered-nflbp-darkfooter { background:#1b3045; padding-top:50px; color:#fff; } span.p--smaller { font-size: 14px; } /* ----------------- Line-of-Duty/ Neurocognitive Application ----------------- */ form .lod-disability-app-content {} .ncog-disability-app-content {} .lod-disability-app-content h1, .ncog-disability-app-content { margin-bottom: 0; } .ncog-disability-app-content h1.h1-greenheader { color: #00ba98; margin-bottom: 30px; } .lod-disability-app-content h3, .ncog-disability-app-content h3 { margin-top: 10px; } .ncog-disability-app-content h2 + h3 { margin-top: 0; } .lod-disability-app-content .c-add__item { padding-left: 60px; min-height: 45px; position: relative; margin-top: 40px; } .lod-disability-app-content .c-add__item:before { content: ''; position: absolute; top: -15px; left: 0; width: 45px; height: 45px; display: block; background: url("/assets/images/controls/c-form/upload-plus.svg") no-repeat; background-size: contain; } .ncog-disability-app-content .c-add__item { padding-left: 60px; min-height: 45px; position: relative; margin-top: 40px; } .ncog-disability-app-content .c-add__item:before { content: ''; position: absolute; top: -15px; left: 0; width: 45px; height: 45px; display: block; background: url("/assets/images/controls/c-form/upload-plus.svg") no-repeat; background-size: contain; } .ncog-disability-app-content fieldset.ncog-subset { padding-top: 12px; border-top: 2px solid #eaedf0; border-bottom: 2px solid #eaedf0; margin-top: 30px; margin-bottom: 0px; } header.c--form-label { font-size: 17px; line-height: 22px; color: #7e8b96; font-family: "Macha-Medium", sans-serif; margin-top: 30px; margin-bottom: 10px; } header.c--form-label ~ p.p--smaller { margin-bottom: 5px; margin-top: -5px; } header.c-form-label ~ p.p--smaller { margin-bottom: 5px; margin-top: -5px; } .lod-disability-app-content h4, .ncog-disability-app-content h4 { color: #606f7f; } .ncog-disability-app-content blockquote { margin: 30px; line-height: 24px; } .lod-disability-app-content .c-form-group, .ncog-disability-app-content .c-form-group { margin-top: 15px; } .lod-disability-app-content p ~ .c-form-group, .ncog-disability-app-content p ~ .c-form-group { margin-top: 40px; } .lod-disability-app-content p + p, .ncog-disability-app-content p + p { margin-top: 15px; } .lod-disability-app-content textarea, .ncog-disability-app-content textarea { width: 100%; } .lod-disability-app-content textarea ~ .c-form-group, .ncog-disability-app-content textarea ~ .c-form-group { margin-top: 15px; } .lod-disability-app-content textarea ~ .c-form-group > label, .ncog-disability-app-content textarea ~ .c-form-group > label { font-size: 17px; } .lod-disability-app-content ol ~ .c-form-group, .ncog-disability-app-content ol ~ .c-form-group { margin-top: 20px; } .lod-disability-app-content input::-webkit-datetime-edit, .ncog-disability-app-content input::-webkit-datetime-edit { color: transparent; } /* placeholder text visible when input is clicked */ .lod-disability-app-content input:focus::-webkit-datetime-edit, .ncog-disability-app-content input:focus::-webkit-datetime-edit { color: #000; } .lod-disability-app-content ol.ol--lod, .ncog-disability-app-content ol.ol--ncog { list-style-type: decimal; margin: 30px 0px 50px 30px; line-height: 24px; } .lod-disability-app-content ol.ol--lod li, .ncog-disability-app-content ol.ol--ncog li { padding-left: 10px; } .lod-disability-app-content ol.ol--lod li + li, .ncog-disability-app-content ol.ol--ncog li + li { margin-top: 10px; } .lod-disability-app-content .c-form div[class^="l-col"] > .c-form-control-static--multiline, .lod-disability-app-content .c-form div[class*=" l-col"] > .c-form-control-static--multiline, .ncog-disability-app-content .c-form div[class^="l-col"] > .c-form-control-static--multiline, .ncog-disability-app-content .c-form div[class*=" l-col"] > .c-form-control-static--multiline { padding-top: 10px; padding-right: 60px; } .lod-disability-app-content .c-dot-progress { margin: 30px auto 70px auto; } .lod-disability-app-content h3, .ncog-disability-app-content h3 { color: #5F6E7C; } .lod-disability-app-content h3.green-header, .ncog-disability-app-content h3.green-header { color: #0F7D68; } .lod-disability-app-content label, .ncog-disability-app-content label { color: #5F6E7C; font-size: 20px; font-style: normal; font-weight: 500; line-height: 25px; } .lod-disability-app-content textarea, .ncog-disability-app-content textarea { color: #5F6E7C; border-radius: 4px; } /* ----------------- Disability Tool & Overlay ----------------- */ .l-content-table { position: relative; margin-left: auto; margin-right: auto; max-width: 900px; } table.tool-disability__table h3 { margin-bottom:0; } table.tool-disability__table tr td { width: 28%; } table.tool-disability__table tr td:first-child { width:16%; } table.tool-disability__table { border-collapse: collapse; border-spacing: 0; width: 100%; margin: 50px 0 0 0; padding: 0; line-height: 22px; table-layout:fixed; } table.tool-disability__table > *:first-child > tr:first-child > *:first-child { padding: 20px; text-align: right; font-weight: bold; vertical-align: top; background: white; border-bottom: 1px solid #eaedf0; border-left: none; width:16% } table.tool-disability__table tr th { padding: 20px; text-align: right; vertical-align: top; background: #f2f3f5; border-bottom: 1px solid #eaedf0; width: 16%; font-family: "Macha-Bold", sans-serif; } table.tool-disability__table td { padding: 20px; vertical-align: top; border-top: none; border-right: 1px solid #eaedf0; border-bottom: 1px solid #eaedf0; border-left: 1px solid #eaedf0; width:28%; } table h3.h1--green { color: #00ba98; margin-top: 0; } .tool-checklist__item { padding-left: 72px; min-height: 57px; position: relative; color: #00ba98; padding-top: 20px; } .tool-checklist__item:before { content: ''; position: absolute; top: 15px; left: 0; width: 57px; height: 57px; display: block; background: url("/assets/images/icons/circled-green-check.svg") no-repeat; background-size: contain; } .tool-checklist__item_no { padding-left: 72px; min-height: 57px; position: relative; color: #949fab; padding-top: 28px; } .tool-checklist__item_no:before { content: ''; position: absolute; top: 15px; left: 0; width: 57px; height: 57px; display: block; background: url("/assets/images/icons/circled-x.svg") no-repeat; background-size: contain; } .tool-resources { overflow: hidden; } header.tool-resources--topic-header { font-size: 14px; text-transform: uppercase; position: relative; letter-spacing: 1.5px; text-align: center; color: #5f6f7f; font-family: "Macha-Bold", sans-serif; display: table; white-space: nowrap; padding: 0 20px 30px; width: 100%; border-bottom: 1px solid #c6cdd4; margin-bottom: 0; } .tool-resources--topic-header a:first-of-type { text-align: left; float: left; } .tool-resources--topic-header a:last-of-type { text-align: right; float: right; padding-right: 10px; } .tool-resources--topic-header a:before { content: ''; position: absolute; display: block; top: 0; left: 0; background: url("/assets/images/controls/tools/tools-backarrow.svg") no-repeat; width: 16px; height: 16px; background-size: contain; } .tool-resources--topic-header a:after { content: ''; position: absolute; display: block; top: 2px; left: 97%; background: url("/assets/images/controls/tools/tools-nextarrow.svg") no-repeat; width: 16px; height: 16px; background-size: contain; } .tool-resources--topic-header a { text-transform: none; font-family: "Macha-Medium"; letter-spacing: normal; } .support-plans { display: none; } /*.support-plans .l-columns__item p:first-of-type { position: relative; color: #00ba98; margin-bottom: 40px; .support-plans p:first-of-type:after { content: ''; display: block; position: absolute; width: 46px; height: 5px; top: 40px; left: 20px; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); background: #eaedf0; } }*/ .support-plans .l-columns__item p.tool-hr-bar { color: #949fab; } .support--optional-choice { border: 1px solid #c6cdd4; padding: 30px 40px 70px; } .close-overlay-x { text-align: right; display: block; margin: 0px 25px 0px 0; } .desktop-disabity-table { display: block; } @media screen and (max-width:699px) { .tool-checklist__item { padding-left: 0px; min-height: 57px; position: relative; color: #00ba98; padding-top: 60px; } .tool-checklist__item:before { content: ''; position: absolute; top: 2px; left: 44%; width: 57px; height: 57px; display: block; background: url("/assets/images/icons/circled-green-check.svg") no-repeat; background-size: contain; } .tool-checklist__item_no { padding-left: 0px; min-height: 57px; position: relative; color: #949fab; padding-top: 60px; } .tool-checklist__item_no:before { content: ''; position: absolute; top: 2px; left: 44%; width: 57px; height: 57px; display: block; background: url("/assets/images/icons/circled-x.svg") no-repeat; background-size: contain; } .desktop-disabity-table { display: none; } .disability-options-table .desktop-disabity-table { display: block; } .disability-options-table .desktop-disabity-table .l-content-table { overflow: auto; position: relative; } .disability-options-table .desktop-disabity-table .l-content-table table { width: 865px; } .disability-options-table table.tool-disability__table tr th { position: sticky; position: -webkit-sticky; width: 120px; min-width: 120px; max-width: 120px; left: 0px; } .support-plans { display: block; } .disability-show-btn { font-size: 13px; font-weight: bold; font-style: normal; font-stretch: normal; letter-spacing: 1px; color: #00a4da; text-transform: uppercase; } /*.support-plans p:first-of-type:after { content: ''; display: block; position: absolute; width: 46px; height: 5px; top: 40px; left: 50%; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); background: #eaedf0; }*/ .tool-resources--topic-header a:after { content: ''; position: absolute; display: block; top: 2px; left: 90%; background: url("/assets/images/controls/tools/tools-nextarrow.svg") no-repeat; width: 16px; height: 16px; background-size: contain; } .support--optional-choice { display: none; } .tool-resources a { font-size: 0; } header.tool-resources--topic-header { border-bottom: none; } } /*@media screen and (max-width:450px) { .tool-checklist__item_no:before { left: 42%; } .tool-checklist__item:before { left: 42%; } }*/ @media screen and (max-width:450px) { .tool-checklist__item_no:before { left: 38%; } .tool-checklist__item:before { left: 38%; } } .learn-more-text { font-size: 14px; font-weight: bold; font-style: normal; font-stretch: normal; line-height: 1.36; letter-spacing: 2px; text-align: center; color: #5f6e7c; } /* ====================== Pension-Calulator TABS ====================== */ .c-tab-content span.b-dob { font-size: 22px; line-height: 24px; color: #606f7f; } .c-tab-content .c-calc-slider--with-ticks .c-calc-slider__rail-wrapper { margin-top: 100px; } .c-pension-calc-content { padding-top: 0px; } .c-pension-calc-content ul.c-tabs { list-style-type: none; margin: 0; padding: 0; overflow: hidden; background-color: #f2f3f5; width: 100%; box-sizing: border-box; } .c-pension-calc-content ul.c-tabs li { float: left; display: inline-block; color: #939eae; text-align: center; text-transform: uppercase; padding: 14px 16px; line-height: 2em; font-size: 16px; font-weight: bold; width: 50%; cursor: pointer; border: 1px solid #d4d4d1; transition: 0.3s; box-sizing: border-box; } .c-pension-calc-content ul.c-tabs li:hover { background-color: #ddd; width: 50%; } .c-pension-calc-content ul.c-tabs li.current { background-color: #fff; border-top: 4px solid #152c46; border-bottom: 1px solid #fff; z-index: 5; width: 50%; color: #152c46; box-sizing: border-box; } .c-pension-calc-content .c-tab-content { display: none; padding: 50px 30px 30px 30px; text-align: center; border-right: 1px solid #ccc; border-bottom: 1px solid #ccc; border-left: 1px solid #ccc; box-sizing: border-box; /*height: 450px;*/ /*overflow: auto;*/ } .c-tab-content .c-callout__header { margin-bottom: 30px; } .c-pension-calc-content .c-tab-content.current { display: inherit; } .c-pension-calc-content .center-calc-med { width: 70%; margin: 0 auto; } @media screen and (max-width:699px) { .c-pension-calc-content .center-calc-med { width: 100%; margin: 0 auto; } div.l-col6.l-col--with-left-divider.pension-calc-divider { border-top: none; margin-top: 0; padding-top: 0; } } .c-pension-calc-content .c-calc-slider__tick { font-size: 14px; color: #5f6e7c; width: 30px; height: 30px; position: absolute; bottom: -42px; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); } .c-pension-calc-content .c-calc-slider__tick:after { content: ''; display: block; width: 1px; height: 10px; background: #c6cdd4; position: absolute; bottom: 32px; left: 50%; } #benefits-options-content { margin-top: 30px; margin-bottom: 50px; margin-left: 40px; margin-right: 40px; } @media screen and (max-width:699px) { #benefits-options-content { margin-left: 10px; margin-right: 10px; } } #benefits-options-content p { font-weight: bold; } input.header--dated { width: 100%; text-transform: uppercase; text-overflow: ellipsis; white-space: nowrap; overflow-x: hidden; font-size: 22px; line-height: 28px; color: #939eae; border: none; padding-top: 12px; padding-left: 60px; text-align: center; margin: 0 auto 0px auto; /*width: 200px; padding-right:20px; border-style:none; border-width:0; border-bottom: 2px solid #939eae;*/ } .underline { position: relative; color: gray; display: block; font-size: 18px; /*text-align: center;*/ } .underline:after { content: ""; display: block; margin: 0 auto; width: 139px; height: 1px; background: #939eae; /*margin-bottom:30px;*/ } #legacy-options-content { /*margin: 30px 50px;*/ margin-top: 30px; margin-bottom: 50px; margin-left: 40px; margin-right: 40px; /*padding: 0 30px;*/ } @media screen and (max-width:699px) { #legacy-options-content { margin-left: 10px; margin-right: 10px; } } /* ====================== 401K-Calulator graph ====================== */ .c-401k-calc-content canvas { display: block; } .c-401k-calc-content { border: 1px solid #eaedf0; padding: 30px 30px; position: relative; } .c-401k-calc-content .graph { height: 525px; width: 100%; /*margin:0 auto;*/ padding-top: 70px; position: relative; } .c-401k-calc-slider { /*margin-top: 50px;*/ /*border: 1px solid green; */ position: absolute; top: 270px; left: 140px; } .pathslider-grip.ps-grip { width: 38px; height: 38px; position: absolute; border: none; box-shadow: none; background: url("/assets/Assets/images/controls/slider-handle.svg") no-repeat; } .pathslider-grip.ps-grip:hover { border: none; box-shadow: none; } /* SVG graph */ /*.conversion-slider-wrapper svg { width: 100%; height: 100%; }*/ .conversion-slider-wrapper { border: 5px solid #eaedf0; position: relative; } .conversion-slider-wrapper .graph { height: 500px; width: 100%; margin: 0 auto; margin-top: 70px; position: relative; } .conversion-slider { margin-top: 50px; border: 1px solid green; position: absolute; top: 220px; left: 140px; } .c-401k-calc-content .graph .labels.x-labels { text-anchor: middle; } .c-401k-calc-content .graph .labels.y-labels { text-anchor: end; } .c-401k-calc-content .graph .grid { stroke: #ccc; /*stroke-dasharray: 1;*/ stroke-width: 1; } .c-401k-calc-content .graph .grid.y-grid { stroke: #2d2d2d; /*stroke-dasharray: 1;*/ stroke-width: 1; } .c-401k-calc-content .labels { font-size: 13px; } .c-401k-calc-content .label-title { font-weight: bold; text-transform: uppercase; font-size: 12px; fill: black; } .c-401k-calc-content .data { fill: red; stroke-width: 1; } /* ====================== Planning for Retirement ====================== */ .border-boundary { border: 1px solid #ccc; padding: 0 50px; } .retirement-plans h2:first-of-type:before { content: ''; display: block; position: absolute; width: 46px; height: 5px; top: 5px; left: 50%; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); background: #eaedf0; } .ret-plan-types { padding: 50px 90px; } .ret-plan-types .c-calc-slider { margin-left: auto; margin-right: auto; margin-top: 27px; } .ret-plan-types .overlay-content-01 { /*margin: 0 auto;*/ /*background: #fff;*/ text-align: left; padding-left: 30px; } .overlay-content-01 .p-header { text-transform: uppercase; letter-spacing: 1.5px; font-weight: bold; font-size: 13px; } .overlay-content-01 .c-infobox .c-infobox__display { line-height: 50px; } .overlay-content-01 .c-infobox .c-infobox__note { line-height: 30px; } .overlay-content-01 .c-infobox p { line-height: 30px; font-weight: bold; text-transform: uppercase; font-size: 13px; letter-spacing: 1.5px; } .ret-plan-types .overlay-content-02 { text-align: left; padding-left: 30px; } .overlay-content-02 .p-header { text-transform: uppercase; letter-spacing: 1.5px; font-weight: bold; font-size: 13px; } .overlay-content-02 .c-infobox .c-infobox__display { /*line-height: 50px;*/ } .overlay-content-02 .c-infobox .c-infobox__note { line-height: 5px; } .overlay-content-02 .c-infobox p { /*line-height: 30px;*/ font-weight: bold; margin-bottom: 5px; text-transform: none; font-size: 13px; letter-spacing: 1.5px; } .overlay-content-01 .savings-table { font-size: 13px; margin-top: -15px; } .overlay-content-01 .savings-table tr td:first-of-type { padding: 10px 0; border-top: 1px solid #ccc; border-bottom: 1px solid #ccc; color: #666E79; font-weight: bold; line-height: 18px; letter-spacing: 1.5px; } .overlay-content-01 .savings-table td:not(first-of-type) { padding: 10px 0; border-top: 1px solid #ccc; } .ret-plan-types .c-calc-slider__tick { font-size: 14px; color: #5f6e7c; width: 30px; height: 30px; position: absolute; bottom: -43px; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); } .ret-plan-types .c-calc-slider__tick:after { content: ''; display: block; width: 1px; height: 10px; background: #c6cdd4; position: absolute; bottom: 32px; left: 50%; } .l-content-holder .assumptions-content { text-align: left; margin-top: 30px; } .assumptions-content a { text-transform: uppercase; font-size: 13px; } .assumptions-content > *:first-child { border-top: 1px solid #ccc; padding-top: 30px; } .show-or-hide .arrow-hidden, .hidden-or-shown .icon-hidden, .savings-table, .plan-assumptions { display: none; } .ret-plans-early h2:first-of-type:before { content: ''; display: block; position: absolute; width: 46px; height: 5px; top: 170px; left: 50%; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); background: #f0eaec; } /*.early-retirement-table table > *:first-child > tr:first-child > *:first-child*/ .tableTotalRowBackground { background-color: #eff1f3 !important; } table.early-retirement-table td:first-child { /*color:red;*/ } table.early-retirement-table { width: 100%; border-collapse: collapse; border-spacing: 0; margin: 30px 0 0 0; padding: 0; line-height: 22px; } table.early-retirement-table tr th { background: #A4ACB6; color: #fff; padding: 12px 20px; font-weight: bold; vertical-align:bottom; } table.early-retirement-table tr {} table.early-retirement-table tr td { background: #F8F9FA; padding: 15px 20px; border-right: 1px solid #dadee3; border-top: 1px solid #dadee3; width: 25%; } table.early-retirement-table.table--optimize tr td { background: #F8F9FA; padding: 15px 20px; border-right: 1px solid #dadee3; border-top: 1px solid #dadee3; width: 25em; vertical-align:top; } table.early-retirement-table.table--optimize tr td:last-child { border-right: none; } table.early-retirement-table + p { margin-top: 10px; } table.early-retirement-table + div { margin-top: 10px; } table.lod-disability__table + p { margin-top: 10px; } table.lod-disability__table + div { margin-top: 10px; } /* TODO Changes made for table element --- Want flexible classes*/ /*table.early-retirement-table td:first-child { color: #666E79; font-weight: bold; font-size: 18px; line-height: 24px; } table.early-retirement-table td:first-child + td { color: #666E79; font-weight: bold; }*/ table.early-retirement-table td .bold-text { color: #666E79; font-weight: bold; } table.early-retirement-table td .contrib-bold-text { font-size: 16px; font-weight: bold; line-height: 1.38; text-align: right; color: #1b3045; } table.early-retirement-table td .heading-text { color: #666E79; font-weight: bold; font-size: 18px; line-height: 24px; } table.early-retirement-table td h3 { color: #00ba98; margin-bottom: 0; } .early-retirement-table tr td:last-of-type { border-right: none; } .early-retirement-table tr td:last-of-type h3 { color: #949fab; margin-bottom: 0; } table.early-retirement-table.table--optimize tr td:last-of-type h3 { color: #00ba98; margin-bottom: 0; } .mobile-table-display { display: none; } @media screen and (max-width:699px) { table:not(.scrolling-mobile-table).early-retirement-table.three-plus-column tbody td.mobile-table-display { display: inline-block; width: 50%; vertical-align: top; height: 100%; border-left: none; } .ret-plan-types { padding: 0; } .border-boundary { padding: 0; } .plan-assumptions ul.ul--default li { text-align: left; } /* Added important tag for media query*/ table.early-retirement-table tr th, table.early-retirement-table td { /*display: block;*/ text-align: left; /*width: 100% !important;*/ } table.early-retirement-table ul.ul--default li { text-align: left !important; } table.early-retirement-table.three-plus-column { width: 100%; background: #F8F9FA; } table:not(.scrolling-mobile-table).early-retirement-table.three-plus-column th { display: none; } table.early-retirement-table.three-plus-column tr:nth-of-type(2n) { background-color: inherit; } table.early-retirement-table.three-plus-column tr td:first-child span.heading-text { color: #fff; } table:not(.scrolling-mobile-table).early-retirement-table.three-plus-column tr td:first-child { background: #A4ACB6; color: #fff; padding: 20px; font-weight: bold; display: block; width: 100%; height: auto; } table:not(.scrolling-mobile-table).early-retirement-table.three-plus-column tbody td { display: inline-block; text-align: center; width: 50%; height: 100%; border-left: 1px solid #dadee3; border-right: none; } table.early-retirement-table.three-plus-column tbody td:before { content: attr(data-th); display: block; text-align: center; } table.scrolling-mobile-table .mobile-table-display { display: none; } .l-content-holder.scrolling-mobile-table-wrapper { max-width: 100%; margin: auto; overflow-x: auto; margin-left: 1rem; } .l-content-holder.scrolling-mobile-table-wrapper table { margin-right: 1rem; } table.scrolling-mobile-table tr > th:first-child, table.scrolling-mobile-table tr > td:first-child { position: sticky; left: 0; border-right: 0; } table.scrolling-mobile-table tr > td:first-child:after { content: ''; position: absolute; top: 0; right: 0; height: 100%; border-right: 1px solid #dadee3; } } /*====================== Tuition Reimbursement ======================*/ table.tuition-reimbursement { width: 100%; position: relative; } table.tuition-reimbursement thead { color: #949fab; background: #EFF1F3; font-family: "Macha-Medium", sans-serif; text-transform: uppercase; } table.tuition-reimbursement tbody, tfoot { color: #333; font-weight: bold; font-size: 18px; font-family: "Macha-Medium", sans-serif; } table.tuition-reimbursement tbody a { font-size: 16px; font-style: normal; } table.tuition-reimbursement tfoot { background: #EFF1F3; } table.tuition-reimbursement td:last-of-type {} .divider-line { display: block; content: ''; width: 8px; height: 46px; background: #c6cdd4; position: absolute; top: 30px; left: 100px; } table.tuition-reimbursement, table.tuition-reimbursement th, table.tuition-reimbursement td { border: 1px solid #eaedf0; border-collapse: collapse; padding: 20px 10px; border-bottom: 1px solid #ccc; border-top: none; border-right: none; border-left: none; text-align: left; } /* ====================== Total & Permanent Disability ====================== */ .doc-support div.tp-bulletlist { margin-top: 30px; } ul.c-form-messagebar__list, ul.c-form-messagebar__list_dismissable { padding: 40px 50px 40px 70px; background: #eaedf0; margin-top: 20px; position: relative; } .c-form-messagebar__list li, .c-form-messagebar__list_dismissable li { /*background: url("../images/controls/c-message/flag.svg") no-repeat 7px 2px;*/ line-height: 20px; list-style-image: url("/assets/images/controls/c-message/flag.svg"); padding: 10px 0px 15px 15px; vertical-align: bottom; text-align: left; } .c-form-messagebar__list_dismissable li:hover { background: #F9FAFB; } span.dismiss-item a { font-size: 20px; color: #95a0ac; float: right; margin-right: 5px; transform: scale(2, 1); -webkit-transform: scale(2, 1); } @media (min-width: 320px) and (max-width: 700px) { ul.c-form-messagebar__list, ul.c-form-messagebar__list_dismissable { padding: 40px 50px; background: #eaedf0; margin-top: 20px; margin-left: 20px; } .c-form-messagebar__list li, .c-form-messagebar__list_dismissable li { /*background: url("../images/controls/c-message/flag.svg") no-repeat 7px 2px;*/ line-height: 20px; list-style-type: none; padding: 10px 0px 20px 20px; vertical-align: middle; text-align: left; } .c-form-messagebar__list_dismissable li:hover { background: #F9FAFB; } span.dismiss-item a { font-size: 20px; color: #95a0ac; float: right; margin-right: 5px; transform: scale(2, 1); -webkit-transform: scale(2, 1); position: absolute; top: 10px; left: 300px; } } /* ------------------------------ */ .resource-break { margin-top: 0px; } @media only screen and (max-width: 699px) { .resource-break { margin-top: 30px; } } @media only screen and (max-width: 699px) { .resource-break { margin-top: 30px; } } sup { font-size: xx-small; vertical-align: super !important; } #nextbutton { position: absolute; top: 400px; right: 0; width: 100px; z-index: 10000; background-color: white; border: 1px solid grey; color: black; padding: 15px 10px; text-align: center; text-decoration: none; display: inline-block; } @media only screen and (max-width: 960px) { #nextbutton { display: none; } } #nextbutton span.nexttext { font-size: 10px; text-transform: uppercase; letter-spacing: 1.5px; text-align: center; color: #5f6f7f; font-family: "Macha-Bold",sans-serif; white-space: nowrap; } #nextbutton span.linktext { font-size: 10px; text-align: center; color: black; font-family: "Macha-Bold",sans-serif; } /* ----------------Featurebox-------------- */ .featureboxwrapper { margin: 50px 0 0px 0; } .featurebox { border: 1px solid #dadee3; text-align: center; margin: 0; padding: 0; } .featurebox .l-columns { margin: 0 0 0 0; padding: 0; } main > section + section .l-content-holder:first-child.featurebox { padding-top: 40px; } .l-content-holder:first-child.featurebox { padding-top: 40px; } .featureboxwrapper .l-content-holder.featurebox { padding-bottom: 50px; } @media only screen and (max-width: 699px) { .l-content-holder.featurebox { margin: 0 10px 0 10px; padding: 30px 20px !important; } l-content-holder.featurebox .l-columns__item { margin-top: 0; margin-bottom: 0px; } .l-content-holder.featurebox .l-columns__item { margin-top: 0; } main > section + section .l-content-holder:first-child.featurebox { padding-top: 30px; } .featureboxwrapper .l-content-holder:last-child.featurebox { padding-bottom: 30px; } } .featurebox .l-columns__item { margin: auto; margin-top: 10px; margin-bottom: 0px; } .featurebox .horizbreak { margin: auto; margin-top: 20px; margin-bottom: 20px; border: 2px solid #dadee3; width: 30px; } .featurebox-description { font-family: Macha-Book; font-size: 16px; font-weight: normal; font-style: normal; font-stretch: normal; line-height: 1.5; text-align: center; color: #1b3045; padding: 0 65px 0 65px; } .featurebox h4 { margin: auto; width: 60%; } .featurebox__note { font-size: 14px; text-transform: uppercase; letter-spacing: 1.5px; text-align: center; color: #5f6f7f; font-family: "Macha-Bold",sans-serif; } .ul--featurebox { margin: 20px 0 0 0; } ul.ul--featurebox { line-height: 24px; } @media only screen and (max-width: 699px) { ul.ul--featurebox li { text-align: center; } } @media only screen and (max-width: 699px) { form[name='pensionDistForm'] .c-form-radio-inline { height: 25px; } div.mfp-content.pensionDistributionModel { width: auto !important; } } ul.ul--featurebox li::before { content: '\2022'; padding-right: 10px; } ul.ul--featurebox li + li { margin-top: 15px; } .featureboxwrapper .l-content-holder:last-child { padding-bottom: 50px; } .featurebox-header { text-align: center; margin-top: 0px; margin-bottom: 40px; color: #5f6f7f; font-family: Macha-Book, sans-serif; } .featurebox-eyebrow { font-size: 12px; font-weight: normal; font-style: normal; font-stretch: normal; line-height: 16px; letter-spacing: 1px; text-align: center; color: #5f6e7c; } .featurebox-bullets { font-family: Macha-Book; font-size: 16px; font-weight: normal; font-style: normal; font-stretch: normal; line-height: 1.5; letter-spacing: normal; text-align: center; color: #1b3045; margin: 15px auto 0 auto; } /* ------------------------------ */ /* Beneficiary Component styles */ div.l-content-holder.beneficiary_content { padding-top: 0; margin-top: 20px; } #beneficary-container .ui-btn { cursor: pointer; } .beneficiary_content { width: 1550px; padding: 0; margin: 55px 0 0 0; font-size: 20px; } .primary_beneficiaries { } .beneficiary_header { padding: 0 0 45px 0; margin: 0; line-height: 40px; } .beneficiary_header .header_text { font-size: 20px; font-weight: 600; float: left; } .beneficiary_header .header_link { margin: 0 0 0 20px; font-size: 16px; float: right; } .beneficiary_header .link_info { } .beneficiary_header .link_action_info { cursor: pointer; } .beneficiary_add_plus { font-size: 24px; font-weight: 600; margin-right: 5px; } .beneficiary_header_secondary { margin: 0; } .beneficiary_header_secondary.larger-padding { padding: 65px 0 35px 0; } #PrimaryGrid { } .beneficiary_content_beneficiaries { clear: both; border-bottom: solid 1px #dadee3; border-top: solid 1px #dadee3; overflow: hidden; } .display-beneficiaries[id^="beneficary-container"] .relationship_label, .display-beneficiaries[id^="beneficary-container"] .dob_label { display: none; } .display-beneficiaries a.add-beneficiary-btn:after { display: inline-block; content: '\f067'; font-family: FontAwesome; padding: 0 .5em 0 .5em; cursor: pointer; } .display-beneficiaries a.update-beneficiary-btn:after { display: inline-block; content: '\f040'; font-family: FontAwesome; padding: 0 .5em 0 .5em; cursor: pointer; } .display-beneficiaries #edit_primary_distributions { padding-bottom: 35px; } .distribution_edit { width: 100%; border: 1px solid #dadee3; } #checkSpouse l-content-holder, #spousal-consent-modal .l-content-holder { padding-bottom: 40px; padding-left: 20px; padding-right: 20px; } .display-beneficiaries .back-btn { cursor: pointer; border: 2px solid #DADEE3; } .beneficiary_row_content { clear: both; line-height: normal; border-top: solid 2px #dadee3; } .beneficiary_row_content > * { padding-top: 19px; padding-bottom: 19px; } .beneficiary_row_content input.edit { width: 74px; margin-top: -10px; margin-bottom: -10px; } .no-secondaries #SecondaryGrid { display: none; } .beneficiary_save, .beneficiary_cancel { float: right; margin-right: 15px; } @media only screen and (max-width: 699px) { .beneficiary_row_header { display: none !important; } .beneficiary_row_content > .name { width: auto !important; } #all-beneficiaries { margin-top: 35px; } .no-bene-flag-container { text-align: center; } .beneficiary_row_header .relationship, .display-beneficiaries .beneficiary_row_content .relationship { width: 100%; padding-left: 10px; padding-right: 10px; border-top: 1px solid #dadee3; } .beneficiary_row_header .dob, .display-beneficiaries .beneficiary_row_content .dob { width: 100%; padding-left: 10px; padding-right: 10px; } .beneficiary_row_data, .beneficiary_no_data { border: solid 1px #dadee3; } .beneficiary_no_data { padding: 30px 20px; } .display-beneficiaries .beneficiary_header_add_button { padding: 0; } .beneficiary_no_data .ui-btn { width: 100%; } .display-beneficiaries .beneficiary-info-row, .display-beneficiaries .actions { border-top: solid 1px #dadee3; background-color: white; white-space: nowrap; } .beneficiary_header .header_link { float: right; } .actions { width: 100% !important; padding-left: 0px !important; } .display-beneficiaries section header.header--section { display: block !important; text-align: center; padding: 0; margin-bottom: 45px; } .display-beneficiaries .beneficiary_header { position: relative; padding-bottom: 0; } .display-beneficiaries .beneficiary_header .header_text { width: 100%; background-color: #25aa8d; color: white; text-align: center; font-weight: normal; line-height: 52px; font-size: 22px; padding-bottom: 0; float: none; } .display-beneficiaries .beneficiary_header { margin-top: 45px; } .display-beneficiaries .beneficiary_header .header_link { position: absolute; top: -40px; right: 0; } .beneficiary_row_content input.edit { margin-top: auto; margin-bottom: auto; } .beneficiary_btn { height: auto; } .display-beneficiaries .beneficiary_content_beneficiaries { border: none; } .display-beneficiaries .relationship_label, .display-beneficiaries[id^="beneficary-container"] .dob_label { display: inline; } .display-beneficiaries .distribution, .display-beneficiaries .name { background: #f2f3f5; font-weight: bold; line-height: 26px; font-size: 20px; padding-top: 12px; padding-bottom: 12px; } .display-beneficiaries .distribution { padding-right: 5%; text-align: right; padding-left: 0; } .display-beneficiaries .name { padding-left: 5%; } .display-beneficiaries .relationship, .display-beneficiaries .dob { float: none; border: none; } .display-beneficiaries .relationship_label, .display-beneficiaries .dob_label { text-transform: uppercase; font-family: "Macha-Bold", sans-serif; color: #5F6E7C; letter-spacing: 2px; } .display-beneficiaries[id^="beneficary-container"] .relationship_label, .display-beneficiaries[id^="beneficary-container"] .dob_label, .display-beneficiaries[id^="beneficary-container"] .relationship_value, .display-beneficiaries[id^="beneficary-container"] .dob_value { display: inline-block; } .display-beneficiaries .relationship_label, .display-beneficiaries .dob_label, .display-beneficiaries .relationship_value, .display-beneficiaries .dob_value { width: 49%; display: inline-block; font-size: 14px; line-height: 16px; padding-bottom: 12px; padding-top: 12px; } .display-beneficiaries .relationship_value, .display-beneficiaries .dob_value { font-size: 18px; } #secondary_beneficiaries .no-beneficiaries { text-align: center; padding: 10px 15px; } #secondary_beneficiaries .beneficiary_text { display: none; } .display-beneficiaries .beneficiary_row_content { border-top: none; } .beneficiary_row_content > div { line-height: normal; } .display-beneficiaries .actions_info { display: flex; flex-direction: row; padding: 1.5em 5%; justify-content: center; border-top: solid 1px #dadee3; border-bottom: solid 1px #dadee3; } .display-beneficiaries .beneficiary_row_content .actions .actions_info { padding: 1em 5%; line-height: 50px; } .display-beneficiaries .beneficiary_row_content .actions .actions_info > div { float: none; } .display-beneficiaries .beneficiary_row_content > div { float: none; } .display-beneficiaries .beneficiary_row_data ~ .beneficiary_row_data { border-top: none; } .display-beneficiaries .beneficiary_footer { margin: 15px 0 0 0; } .display-beneficiaries .beneficiary_edit, .display-beneficiaries .beneficiary_save { float: none; } #manageBeneficiaries .l-content-holder { margin: 0; } .beneficiary_row_content.editing { flex-wrap: nowrap; } .beneficiary_row_content { display: flex; flex-wrap: wrap; background-color: #f2f3f5; justify-content: space-between; align-items: center; } .beneficiary_row_content div.distribution { flex: 0 1 78px; order: 1; white-space: nowrap; padding-left: 0; padding-right: 10px; width: auto; max-width: 100px; } .beneficiary_row_content div.name { flex: 0 1 auto; padding-left: 10px; padding-right: 5px; max-width: calc(100% - 100px); } .beneficiary_row_content .relationship { order: 2; } .beneficiary_row_content .dob { order: 3; } .beneficiary_row_content .actions { order: 4; } #edit_primary_distributions #primarysum, #edit_secondary_distributions #secondarysum { text-align: right; } form#benef-form .c-form-group { width: 100%; } form#benef-form input { width: 100% !important; } #checkSpouse l-content-holder, #spousal-consent-modal .l-content-holder { padding-left: 0; padding-right: 0; } .modal .modal-questions .question_answers .ui-btn { margin-left: 0; margin-right: 0; } .display-beneficiaries .beneficiary_total_error { height: auto; text-align: right; } .beneficiary_cancel.beneficiary_btn { margin-top: 20px; } #playerContactSection { text-align: center; } .beneficiary-form-switch-headline h3, .beneficiary-form-switch-headline .additional-bene-info-intro { text-align: center; } .beneficiary-form-switch-headline h3:first-of-type { margin-bottom: 20px; } .display-beneficiaries .form-submit { display: flex; flex-direction: column; } .display-beneficiaries .form-submit .beneficiary_save { order: -1; } .display-beneficiaries .form-submit .cancel-back { border-top: solid 1px #dadee3; display: flex; flex-direction: row; } .display-beneficiaries .form-submit .cancel-back > * { width: auto; flex-grow: 1; flex-basis: 50%; } .display-beneficiaries #edit_primary_distributions { padding-bottom: 0; } .display-beneficiaries { margin-bottom: 30px; } div#secondary_beneficiaries { padding-bottom: 0; } #no-beneficiaries header.header--section { margin-bottom: 0; } #primary_beneficiaries, #secondary_beneficiaries { margin-bottom: 55px; } .prime-add-list .dependants { display: block; } .prime-add-list .add-prime-select-btn { margin-bottom: 15px; } .beneficiary_row_content > * { padding-top: 0; padding-bottom: 0; } .no-secondaries #SecondaryGrid { display: block; } .beneficiary_save, .beneficiary_cancel { float: none; } .display-beneficiaries #PrimaryGrid { margin-bottom: 75px; } } .beneficiary_row_header { display: block; line-height: 48px; text-transform: uppercase; letter-spacing: 1.5px; font-family: "Macha-Medium", sans-serif; color: #939eae; font-size: 16px; font-weight: normal; } .beneficiary_row_header .distribution, .beneficiary_row_header .name, .beneficiary_row_header .relationship, .beneficiary_row_header .dob, .beneficiary_row_header .actions { float: left; background: #f2f3f5; padding-left: 25px; } .beneficiary_row_header .distribution, .beneficiary_row_content .distribution { width: 25%; float: left; padding-left: 25px; } .beneficiary_row_header .name, .beneficiary_row_content .name { width: 35%; float: left; padding-left: 25px; } .beneficiary_row_header .relationship, .beneficiary_row_content .relationship { width: 25%; float: left; padding-left: 25px; } .beneficiary_row_header .dob, .beneficiary_row_content .dob { width: 15%; float: left; padding-left: 25px; } .beneficiary_row_header .actions, .beneficiary_row_content .actions { width: 30%; float: left; padding-left: 25px; } .beneficiary_row_with_actions_header .distribution, .beneficiary_row_with_actions_content .distribution { width: 25%; float: left; padding-left: 25px; } .beneficiary_row_with_actions_header .name, .beneficiary_row_with_actions_content .name { width: 45%; float: left; padding-left: 25px; } .beneficiary_row_with_actions_header .actions, .beneficiary_row_with_actions_content .actions { width: 30%; float: left; padding-left: 25px; } .actions_info .row_action_info { margin-right: 10px; padding-right: 10px; border-right: 2px #dadee3 solid; } .beneficiary_edit { float: left; margin-right: 15px; } .beneficiary_cancel { margin-top: 15px; margin-right: 25px; } .beneficiary_btn { color: #00a4da; padding: 0; /*dislay: block; box-shadow: none; background: transparent; margin: 10px 0; text-transform: none; */ font-family: "Macha-Book", sans-serif; font-size: 16px; line-height: 16px; letter-spacing: 0px; border-radius: 0; height: auto; cursor: pointer; } .beneficiary_no_action { padding: 0; font-family: "Macha-Book", sans-serif; font-size: 16px; line-height: 16px; letter-spacing: 0px; border-radius: 0; height: 16px; } .beneficiary_row_content input { width: 45px; height: 40px; } .beneficiary_row_content .edit { font-size: 20px; padding-right: 8px; border-radius: 3px; border: solid 2px #dadee3; margin-right: 5px; text-align: right; } /* Styles used to display dynamic perfectage info */ .beneficiary_total { font-size: 28px; line-height: 28px; font-weight: 500; } .beneficiary_total_error { font-family: "Macha-Book", sans-serif; font-size: 16px; line-height: 16px; height: 16px; text-align: left; color: #de0000; font-weight: 600; } .beneficiary_total_good { font-family: "Macha-Book", sans-serif; color: #27b696; font-weight: 600; } @media only screen and (max-width: 499px) { .modal .modal-questions .question_answers .ui-btn { white-space: nowrap; font-size: 12px; } } /* below is for situations where there are no beneficiaries*/ .beneficiary_footer { margin: 15px 0 0 25px; font-size: 16px; } .beneficiary_footer { margin: 15px 0 0 25px; font-size: 16px; } .beneficiary_text { margin: 0 0 0 0; padding: 15px 0 0 0; font-size: 16px; clear: both; } .beneficiary_header_add_button { margin: 15px 0 0 0; padding: 0 0 45px 0; } .beneficiary_row_delete { clear: both; height: 72px; border: solid 3px #dadee3; } .beneficiary_row_delete_text { width: 70%; float: left; padding: 10px 0 0 25px; } .confirm_bold_delete_text { font-family: Macha-Medium; line-height: normal; font-weight: normal; font-size: 16px; color: #000000; } .unable_to_delete_spouse { font-weight: 600; font-size: 16px; color: #000000; padding: 10px; } .confirm_note_delete_text { height: 16px; font-family: Macha-Book; font-size: 13px; font-weight: normal; font-style: normal; font-stretch: normal; line-height: 1.23; color: #5f6e7c; padding-top: 5px; line-height: 16px; color: #0E0E0E; } .beneficiary_row_delete_btn { padding-left: 25px; width: 30%; float: left; } .beneficiary_delete_btn { margin: 10px 25px 0 0; float: left; } .beneficiary_delete_cancel_btn { margin: 25px 0 0 0; float: left; } .beneficiary_hidden_index { display: none; } @media only screen and (max-width: 699px) { .beneficiary_row_delete { clear: both; float: none; height: 221px; border: solid 3px #dadee3; } .beneficiary_row_delete_text { width: 100%; float: none; text-align: center; padding: 10px 25px 0px 25px; } .beneficiary_row_delete_btn { padding-left: 0; width: 100%; vertical-align: middle; float: none; text-align: center; margin-top: 35px; } .beneficiary_delete_btn { margin: 0; float: none; } .beneficiary_delete_cancel_btn { margin: 25px 0 0 0; float: none; } } /* ------------------------------ */ .modal { /*display: none;*/ position: fixed; /* Stay in place */ z-index: 200; /* Sit on top */ left: 0; top: 0; width: 100%; /* Full width */ height: 100%; /* Full height */ max-width: 100%; overflow-y: scroll; overflow-x: hidden; background-color: rgb(0,0,0); /* Fallback color */ background-color: rgba(0,0,0,0.4); /* Black w/ opacity */ } /*@media only screen and (max-width: 350px) { .modal { height: 300%; } } */ .modal .form-header { margin: 0; padding: 0; width: 100%; max-width: 100%; } .modal .form-header-splitter { margin-top: 25px; border-bottom: solid 4px #eaedf0; width: 5%; } .modal-popup { /*display: none;*/ /* Hidden by default */ position: absolute; /* Stay in place */ z-index: 50; /* Sit on top */ left: 0; top: 0; width: 100%; /* Full width */ height: 150em; /* Full height */ max-width: 100%; overflow: visible; /* Enable scroll if needed */ background-color: rgb(0,0,0); /* Fallback color */ background-color: rgba(0,0,0,0.4); /* Black w/ opacity */ } .modal-popup .form-header { margin: 0; padding: 0; width: 90%; max-width: 100%; } .modal-popup .form-header-splitter { margin-top: 25px; border-bottom: solid 4px #eaedf0; width: 5%; } /* Modal Content/Box */ .modal-content { background-color: #ffffff; /*border: 1px solid #888;*/ width: 100%; /* Could be more or less, depending on screen size */ height: 100%; padding: 20px; overflow-y: scroll; } .modal.scrollable-mobile { position: fixed; top: 0; bottom: 0; width: 100vw; /* viewport width */ height: 100vh; /* viewport height */ overflow-y: scroll; overflow-x: hidden; } /* Modal Content/Box */ .modal-content-small { margin: 0 0 0 0; background-color: #fefefe; margin-left: auto; margin-right: auto; margin-top: 8%; border: 1px solid #888; width: 40%; /* Could be more or less, depending on screen size */ text-align: center; } .modal-content-small--smaller { width: 30%; } .modal-content-medium { margin: 0 0 0 0; background-color: #fefefe; margin: 10% auto; border: 1px solid #888; width: 55%; /* Could be more or less, depending on screen size */ } .modal-content-medium .l-content-holder { padding: 20px; } .modal-content-large { margin: 0 0 0 0; background-color: #fefefe; margin: 10% auto; border: 1px solid #888; width: 55%; /* Could be more or less, depending on screen size */ } .modal-content-large .l-content-holder { padding-top: 60px; padding-bottom: 60px; padding-left: 60px; padding-right: 60px; max-width: 1240px; margin-left: 0px; margin-right: 0px; } @media only screen and (max-width: 959px) { .modal-content-small { margin-top: 15%; width: 50%; } .modal-content-medium { /*margin: 20% auto; 15% from the top and centered */ /*margin-top: 20%;*/ } } @media only screen and (max-width: 710px) { .modal-content-small { margin-top: 15%; width: 80%; } h3.spouse-check-header { margin-bottom: 24px; } .ui-btn.hasspouse-btn, .ui-btn.nospouse-btn { width: 100%; } .modal-content-medium { /*margin: 70% auto; 15% from the top and centered */ width: 90%; } .modal-content-large { width: 98%; } .modal-content-large .l-content-holder { padding-top: 20px; padding-bottom: 20px; padding-left: 10px; padding-right: 10px; } } @media only screen and (max-width: 350px) { .modal-content-small { margin-top: 60%; width: 90%; } .modal-content-medium { margin: 20% auto; /* 15% from the top and centered */ width: 90%; } } p.spouse-prompt { margin-left: 30px; margin-right: 30px; } .modal-questions { margin: 0; padding: 0; } .modal-questions.question_answers { margin: 0; padding: 0; margin: 15px 0 15px 0; } .modal-questions .question_answers div { margin: 0 10px 15px 10px; } .modal-questions .question_answers a { margin: 0 10px 15px 10px; } /* The Close Button */ /*.close { color: #aaa; float: right; font-size: 46px; font-weight: bold; cursor: pointer; }*/ .close.smaller { width: 30px; height: 30px; top: 20px; right: 20px; } .close.smallest { position: relative; width: 25px; height: 25px; top: 0; float: right; } .close { position: absolute; display: inline-block; width: 50px; height: 50px; overflow: hidden; border-radius: 80px; color: #5f6f7f; background: #d3d3d3; top: 10px; right: 10px; cursor: pointer; z-index: 10; } .close:hover::before, .close:hover::after { background: #142435; } .close::before, .close::after { content: ''; position: absolute; height: 2px; width: 70%; top: 50%; left: 15%; margin-top: -1px; background: #5f6f7f; } .close::before { -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); } .close::after { -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); } .close.rounded::before, .close.rounded::after { border-radius: 5px; } .close-popup { display: none !important; position: absolute; display: inline-block; top: 62px; right: 12px; font-size: 12px; font-weight: bold; color: #142435; letter-spacing: 2px; } .close:hover + .close-popup { display: inline !important; } .modal .cancel { cursor: pointer; margin-left: 20px; } .modal .form-simple-text { font-size: 16px; } .modal .form-general-text { font-size: 16px; float: right; clear: left; } .modal .form-submit { margin: 0; padding: 0; margin-top: 25px; } .modal .validation-error-certify, .modal .validation-error { color: #ff0000; /*font-size: 16px; font-weight: 600;*/ } .modal .validation-error-certify { margin-top: 15px; } .validation-error { color: #e40000; /*color: #e40000; font-size: 16px;*/ margin-top: 6px; display: inline-block; } .validation-error.block { display: block; } .c-form input[type='text'].input-error { border-color: #e40000; } .c-form input[type='password'].input-error { border-color: #e40000; } /* ====================== General reusable classes ====================== */ .transform-up { text-transform: uppercase; } .border-none { border: none; } .textalign-centered { text-align: center; } /* ====================== utility classes ====================== */ .margin-btm-20 { margin-bottom: 20px; } .margin-btm-10 { margin-bottom: 10px; } .margin-top-min35 { margin-top: -35px; } .margin-top-15 { margin-top: 15px; } .margin-right-24 { margin-right: 24px; } .margin-left-24 { margin-left: 24px; } .padding-left-20 { padding-left: 20px; } .padding-left-33 { padding-left: 33px; } .padding-top-0 { padding-top: 0px !important; } .padding-bottom-0 { padding-bottom: 0px !important; } .color-fff { color: #fff !important; } .color-headergreen { color: #27b696; } .ltrspacing-3 { letter-spacing: 3px; } /* ====================== login custom classes ====================== */ /*Added to make Header non-fixed when nflbp-darkbg (login page).....Is set on the body by javascript in login footer rendering */ .l-content-holder.padding-bottom-30 { padding-bottom: 30px; } .l-content-holder.padding-top-0 { padding-top: 0; } .l-content-holder.padding-top-10 { padding-top: 10px; } body.nflbp-darkbg > header.c-mainheader { position: relative; } body.nflbp-darkbg > main { padding-top: 0; } .nflbp-darkbg { background: #1b3045; } .l-login-form { color: #fff; background: #5f6e7c; padding: 40px; } .r-login-form { background: #fff; color: #1b3045; margin-left: 0 !important; padding: 40px; } .centerdiv-content { padding: 40px 40px 20px 40px; background: #fff; } .div-content-1 { padding: 0px 40px 20px 40px; background: #fff; margin-top: -40px; } .div-content-full { background: #fff; padding: 40px 10px 40px 40px; margin-top: -40px; } .logout-msg { padding: 0 0 15px 0; margin: 0 0 0 0; } .logout-msg .l-content-holder { padding: 0 !important; } .logout-success-msg { color: #1b997d; padding-top: 20px; padding-bottom: 20px !important; padding-left: 20px; padding-right: 20px; border-left: 8px solid #1b997d; background: #fff; /* margin-bottom:30px; */ margin-bottom: 0px; } .login-error-msg { color: #cc0000; padding-top: 20px; padding-bottom: 20px !important; padding-left: 20px; padding-right: 20px; border-left: 8px solid #cc0000; background: #fff; /* margin-bottom:30px; */ margin-bottom: 0px; } .login-warning-msg { color: #5f6e7c; padding-top: 20px; padding-bottom: 20px !important; padding-left: 20px; padding-right: 20px; border-left: 8px solid #ff6c42; background: #fff; /* margin-bottom:30px; */ margin-bottom: 0px; } .2-col-open { background: #fff; margin-left: 0; } .centered-nflbp-darkfooter { background: #1b3045; padding-top: 50px; color: #fff; height: 100%; text-align: center; display: block; -webkit-flex-shrink: 0; -ms-flex-negative: 0; flex-shrink: 0; } span.p--smaller { font-size: 14px; } .c-form-control-date { width: 250px; } .distribution-pending-flag { margin: 0 auto; } .accountsetting-form a.ui-btn { margin-right: 10px; } /*----------------------------------VideoJS CSS---------------------------------------------------*/ /* Player Skin Designer for Video.js http://videojs.com To customize the player skin edit the CSS below. Click "details" below to add comments or questions. This file uses some SCSS. Learn more at http://sass-lang.com/guide) This designer can be linked to at: http://codepen.io/heff/pen/EarCt/left/?editors=010 */ .video-container .video-js { /* The base font size controls the size of everything, not just text. All dimensions use em-based sizes so that the scale along with the font size. Try increasing it to 15px and see what happens. */ font-size: 10px; /* The main font color changes the ICON COLORS as well as the text */ color: #fff; } /* The "Big Play Button" is the play button that shows before the video plays. To center it set the align values to center and middle. The typical location of the button is the center, but there is trend towards moving it to a corner where it gets out of the way of valuable content in the poster image.*/ .video-container .vjs-default-skin .vjs-big-play-button { /* The font size is what makes the big play button...big. All width/height values use ems, which are a multiple of the font size. If the .video-js font-size is 10px, then 3em equals 30px.*/ font-size: 3em; line-height: 1.5em; height: 1.5em; width: 3em; /* 0.06666em = 2px default */ border: 0.06666em solid #fff; /* 0.3em = 9px default */ border-radius: 0.3em; @if $center-big-play-button { /* Align center */ left: 50%; top: 50%; margin-left: -($big-play-width / 2); margin-top: -($big-play-height / 2); } @else { /* Align top left. 0.5em = 15px default */ left: 0.5em; top: 0.5em; } } /* The default color of control backgrounds is mostly black but with a little bit of blue so it can still be seen on all-black video frames, which are common. */ .video-container .video-js .vjs-control-bar, .video-container .video-js .vjs-big-play-button, .video-container .video-js .vjs-menu-button .vjs-menu-content { /* IE8 - has no alpha support */ background-color: rgb(57,105,146); /* Opacity: 1.0 = 100%, 0.0 = 0% */ background-color: rgba(57,105,146, 0.7); } .video-container .video-js .vjs-control-bar { display: flex; } /* Slider - used for Volume bar and Progress bar */ .video-container .video-js .vjs-slider { background-color: rgb(129,189,236); background-color: rgba(129,189,236, 0.5); } /* The slider bar color is used for the progress bar and the volume bar (the first two can be removed after a fix that's coming) */ .video-container .video-js .vjs-volume-level, .video-container .video-js .vjs-play-progress, .video-container .video-js .vjs-slider-bar { background: #fff; } /* The main progress bar also has a bar that shows how much has been loaded. */ .video-container .video-js .vjs-load-progress { /* For IE8 we'll lighten the color */ background: rgb(129,189,236); /* Otherwise we'll rely on stacked opacities */ background: rgba(129,189,236, 0.5); } .video-container .video-js.vjs-fullscreen .vjs-dock-text { height: 5%; } .video-container .video-js .vjs-playback-rate.vjs-menu-button .vjs-menu { z-index: 50; } /* The load progress bar also has internal divs that represent smaller disconnected loaded time ranges */ .video-container .video-js .vjs-load-progress div { /* For IE8 we'll lighten the color */ background: rgba(129,189,236, 0.5); /* Otherwise we'll rely on stacked opacities */ background: rgba(129,189,236, 0.5); } /* VideoJS Custom Code*/ .video-container .video-js .vjs-dock-text { /*background: linear-gradient(rgb(57,105,146), transparent);*/ background: rgba(57,105,146,.8); height: 10%; } .video-container .video-js { /* The base font size controls the size of everything, not just text. All dimensions use em-based sizes so that the scale along with the font size. Try increasing it to 15px and see what happens. */ font-size: 10px; /* The main font color changes the ICON COLORS as well as the text */ color: #fff; } .video-container .video-js .vjs-dock-text, .video-container .video-js .vjs-dock-shelf { top: initial; bottom: 1.6em; } .video-container .video-js .vjs-dock-text .vjs-dock-title { display: none; } .max-width-1240 { max-width: 1240px; } .max-width-900 { max-width: 900px; } .max-width-701 { max-width: 701px; } .max-width-500 { max-width: 500px; } .max-width-320 { max-width: 320px; } .video-container .video-js .vjs-dock-text .vjs-dock-description { margin: 0; overflow: visible; text-overflow: ellipsis; white-space: normal; line-height: 1; font-size: 15px; width: 130%; } .video-container { margin: 10px 10px; } @media only screen and (min-width: 1240px) { .video-container { background-color: black; max-height: 335px; } } @media only screen and (min-width: 700px) { .video-container { background-color: none; max-height: 335px; } } .l-columns__item.video-container { margin: 0; } @media only screen and (max-width: 701px) { .l-columns__item.video-container { margin: 10px 0; } } .video-container .video-js .vjs-captions-button { z-index: 50; } /*Styles for Video container large*/ .video-container-large { /*margin: 10px 10px;*/ } .video-container-large .video-js { /* The base font size controls the size of everything, not just text. All dimensions use em-based sizes so that the scale along with the font size. Try increasing it to 15px and see what happens. */ font-size: 10px; /* The main font color changes the ICON COLORS as well as the text */ color: #fff; } /* The "Big Play Button" is the play button that shows before the video plays. To center it set the align values to center and middle. The typical location of the button is the center, but there is trend towards moving it to a corner where it gets out of the way of valuable content in the poster image.*/ .video-container-large .vjs-default-skin .vjs-big-play-button { /* The font size is what makes the big play button...big. All width/height values use ems, which are a multiple of the font size. If the .video-js font-size is 10px, then 3em equals 30px.*/ font-size: 3em; line-height: 1.5em; height: 1.5em; width: 3em; /* 0.06666em = 2px default */ border: 0.06666em solid #fff; /* 0.3em = 9px default */ border-radius: 0.3em; @if $center-big-play-button { /* Align center */ left: 50%; top: 50%; margin-left: -($big-play-width / 2); margin-top: -($big-play-height / 2); } @else { /* Align top left. 0.5em = 15px default */ left: 0.5em; top: 0.5em; } } /* The default color of control backgrounds is mostly black but with a little bit of blue so it can still be seen on all-black video frames, which are common. */ .video-container-large .video-js .vjs-control-bar, .video-container-large .video-js .vjs-big-play-button, .video-container-large .video-js .vjs-menu-button .vjs-menu-content { /* IE8 - has no alpha support */ /*background-color: rgb(57,105,146);*/ /* Opacity: 1.0 = 100%, 0.0 = 0% */ /*background-color: rgba(57,105,146, 0.7);*/ } /*Changed to removed large video control bar*/ .video-container-large .video-js .vjs-control-bar { display: flex; } /* Slider - used for Volume bar and Progress bar */ .video-container-large .video-js .vjs-slider { /*background-color: rgb(129,189,236); background-color: rgba(129,189,236, 0.5);*/ } /* The slider bar color is used for the progress bar and the volume bar (the first two can be removed after a fix that's coming) */ .video-container-large .video-js .vjs-volume-level, .video-container-large .video-js .vjs-play-progress, .video-container-large .video-js .vjs-slider-bar { background: #fff; } /* The main progress bar also has a bar that shows how much has been loaded. */ .video-container-large .video-js .vjs-load-progress { /* For IE8 we'll lighten the color */ /*background: rgb(129,189,236);*/ /* Otherwise we'll rely on stacked opacities */ /*background: rgba(129,189,236, 0.5);*/ } /* The load progress bar also has internal divs that represent smaller disconnected loaded time ranges */ .video-container-large .video-js .vjs-load-progress div { /* For IE8 we'll lighten the color */ /*background: rgba(129,189,236, 0.5);*/ /* Otherwise we'll rely on stacked opacities */ /*background: rgba(129,189,236, 0.5);*/ } /* VideoJS Custom Code*/ .video-container-large .video-js .vjs-dock-text { background: linear-gradient(to top, rgba(43, 51, 63, 0.7) 0%, rgba(43, 51, 63, 0.5) 30%, rgba(43, 51, 63, 0.4) 70%, transparent 100%); /*background: linear-gradient(to top, rgba(0,0,0,0.3) 0%, rgba(0,0,0,0.2) 30%, rgba(0,0,0,0.2) 70%, transparent 100%);*/ /*background: linear-gradient(to top, rgba(0,0,0,0.0) 0%, rgba(0,0,0,0.0) 30%, rgba(0,0,0,0.0) 70%, transparent 100%);*/ font-family: "Trebuchet MS", Helvetica, sans-serif; /*background:rgba(57,105,146,.8);*/ height: 25%; padding-left: 25%; padding-right: 25%; } .video-container-large .video-js .vjs-dock-text .vjs-dock-description { margin: 0; overflow: visible; text-overflow: ellipsis; white-space: normal; line-height: 1; font-size: 20px; width: 100%; text-align: center; } .video-container-large .video-js { /* The base font size controls the size of everything, not just text. All dimensions use em-based sizes so that the scale along with the font size. Try increasing it to 15px and see what happens. */ font-size: 10px; /* The main font color changes the ICON COLORS as well as the text */ color: #fff; } .video-container-large .video-js .vjs-dock-text, .video-container .video-js .vjs-dock-shelf { top: initial; bottom: 1.65em; } .video-container-large .video-js .vjs-dock-text .vjs-dock-title { display: none; } .video-container-large .small-screen-text { display: none; /*font-family: "Trebuchet MS", Helvetica, sans-serif;*/ /*font-size: 1em;*/ text-align: center; } .video-container-large .manual-small-width { display: block; text-align: center; } @media only screen and (max-width: 701px) { .video-container-large .small-screen-text { display: block; } .video-container-large .video-js .vjs-dock-text { display: none; } } /*----- -----------------------------End of VideoJS CSS---------------------------------------------------*/ /*----------------------------------CSS for Cursor on Links with no HREF---------------------------------------------------*/ .cursor-hand { cursor: pointer; } .mccbene_display .mccbene_headings { font-size: 12px; text-transform: uppercase; letter-spacing: 2.0px; color: #5f6f7f; font-family: "Macha-Bold",sans-serif; margin: 0 0 10px 0; } .mccbene_primaries { margin: 0; margin: 10px 0 10px 0; } .mccbene_secondaries { margin: 0; margin: 20px 0 10px 0; } .mccbene_links { margin: 0; padding: 0; margin-top: 20px; } /* Classes for Sidebar links*/ .sidebar-horiz { width: 30%; border-top: 3px solid; margin-bottom: 15px; color: #00ba98; } /*@media only screen and (min-width: 320px) and (max-width: 699px) { .sidebar-links { text-align:center; } .sidebar-horiz { width: 10%; margin-right: 45%; margin-left: 45%; } }*/ @media only screen and (max-width: 699px) { .sidebar-links { text-align: center; } .sidebar-horiz { width: 30%; margin-right: 35%; margin-left: 35%; } } /* Search bar */ @media only screen and (min-width: 771px) and (max-width: 850px) { .l-content-holder .c-mainheader__user-tools .c-header-search.is-shown { right: 0px; } } @media only screen and (min-width: 700px) and (max-width: 770px) { .l-content-holder .c-mainheader__user-tools .c-header-search.is-shown { right: 10px; /*width: 130px;*/ } } @media only screen and (max-width: 699px) { .l-content-holder .c-mainheader__user-tools .c-header-search.is-shown { right: 174px; top: -3px; /*width: 130px;*/ } } /*@media screen and (min-width: 460px) { .c-header-search.is-shown{ width:200px; } }*/ /* For target date fund*/ .tdf-header { display: inline-block; color: #00ba97; } @media only screen and (max-width: 699px) { .tdf-align { display: inline; text-align: center; } .l-content-holder .tdf-header { display: block; } } .credited-seasons-boxes { margin: 15px 0 5px 0; flex-flow: wrap; width: 100%; list-style: none; -ms-box-orient: horizontal; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -moz-flex; display: -webkit-flex; display: flex; } .credited-green { margin: 0px 5px 10px 5px; /*padding: 22px 20px 6px 18px;*/ object-fit: contain; color: #ffffff; font-size: 16px; font-weight: 900; } .credited-seasons-list-padding { padding: 2rem; border: 2px solid #eaedf0; box-shadow: 3px 3px #939EA94D; } .credited-seasons-list { text-align: left; position: relative; } .credited-seasons-list .cta-section-float { padding-top: 1.5rem; } @media only screen and (min-width: 900px) { .credited-seasons-list .cta-section-float { position: absolute; right: 0; text-align: right; top: 0; z-index: 1; padding-top: 0; } } .credited-link-cta-button { background-color: #F2F3F5; box-shadow: 3px 3px #939EA94D; padding: 1rem; border-radius: 2rem; font-weight: bold; text-transform: uppercase; display: inline-block; letter-spacing: .1rem; } .credited-season { border-bottom: 2px solid #eaedf0; padding: 1rem 0 1rem 0; display: flex; align-items: center; } .credited-seasons-list .c-message--smaller { font-family: 'Macha-Medium'; color: #5F6E7C; text-transform: uppercase; } .credited-season:last-of-type { border-bottom: none; } .credited-season .credited-green { color: #00a88c; font-size: 20px; padding: 0; margin: 0; word-spacing: 4px; line-height: 25px; } .helmet-icon-wrapper { padding-right: 20px; } .helmet-icon-wrapper, .season-list-wrapper { display: inline-block; } .credited-green:after { content: ''; width: 0; height: 0; border-style: solid; border-width: 20px 5px 20px 0; border-color: transparent #ffffff transparent transparent; position: absolute; right: 0; top: 0; } .helmet-icon { max-width: 3rem; } .credited-seasons-boxes { margin: 10px 0 15px 0; } /*Checklist Icon Classes*/ .c-checklist__item.checkmark-gray-icon:before { background-image: url("/Assets/images/controls/c-checklist/icons/checkmark-gray.svg"); } .c-checklist__item.checkmark-green-icon:before { background-image: url("/Assets/images/controls/c-checklist/icons/checkmark-green.svg"); } .c-checklist__item.checkmark-dark-green-icon:before { background-image: url("/Assets/images/controls/c-checklist/icons/checklist-green-check.svg"); } .c-checklist__item.hourglass-icon:before { background: url("/Assets/images/controls/c-checklist/icons/hourglass.svg") no-repeat; } .c-checklist__item.install-icon:before { background-image: url("/Assets/images/controls/c-checklist/icons/install.svg"); } .c-checklist__item.leaf-icon:before { background: url("/Assets/images/controls/c-checklist/icons/leaf.svg") no-repeat; } .c-checklist__item.life-10-icon:before { background-image: url("/Assets/images/controls/c-checklist/icons/life-10.svg"); } .c-checklist__item.life-100-icon:before { background-image: url("/Assets/images/controls/c-checklist/icons/life-100.svg"); } .c-checklist__item.life-25-icon:before { background-image: url("/Assets/images/controls/c-checklist/icons/life-25.svg"); } .c-checklist__item.life-50-icon:before { background-image: url("/Assets/images/controls/c-checklist/icons/life-50.svg"); } .c-checklist__item.life-75-icon:before { background-image: url("/Assets/images/controls/c-checklist/icons/life-75.svg"); } .c-checklist__item.lifetime-payments-icon:before { background-image: url("/Assets/images/controls/c-checklist/icons/lifetime-payments.svg"); } .c-checklist__item.list-flag-icon:before { background-image: url("/Assets/images/controls/c-checklist/icons/list-icon-flag.svg"); } .c-checklist__item.lump-sum-icon:before { background-image: url("/Assets/images/controls/c-checklist/icons/lump-sum.svg"); } .c-checklist__item.partial-lump-sum-icon:before { background-image: url("/Assets/images/controls/c-checklist/icons/partial-lump-sum.svg"); } .c-checklist__item.payment-lifetime-with-ss-icon:before { background-image: url("/Assets/images/controls/c-checklist/icons/payment-lifetime-with-ss.svg"); } .c-checklist__item.red-x-icon:before { background-image: url("/Assets/images/controls/c-checklist/icons/checklist-red-x.svg"); } .equation_item_narrow { -webkit-flex-basis: 28%; -ms-flex-preferred-size: 28%; flex-basis: 28%; } .equation_item_wide { -webkit-flex-basis: 72%; -ms-flex-preferred-size: 72%; flex-basis: 72%; margin: 0 0 0 25px; } .equation_border { border-right: 1px solid #dadee3; } .equation_row { -webkit-flex-basis: 100%; -ms-flex-preferred-size: 100%; flex-basis: 100%; width: 100%; } .equation_row_border { border-bottom: 1px solid #dadee3; padding-bottom: 35px; } .equation_row_lower { margin-top: 25px; } .col_w { -webkit-flex-basis: 50%; -ms-flex-preferred-size: 50%; flex-basis: 50%; } .col_s { -webkit-flex-basis: 50%; -ms-flex-preferred-size: 50%; flex-basis: 50%; text-align: right; } .col_s > * { text-align: right; } @media only screen and (max-width: 699px) { .login_descriptive_text { display: none; } } @media only screen and (min-width: 700px) { .login_external { display: none; } } #loginForm span.p--smaller { font-size: 14px; font-family: "Macha-Book", sans-serif; } #loginForm .c-form-control { border: none; border-radius: 0; } #loginForm .c-form-group { text-align: left; } /*RDA Change changed link color*/ .login_form_links a { color: #56D3FC; font-size: 14px; } .login_form_links a:hover { color: #92E2FD; } .login_form_links .m-btm-5 { margin-bottom: 10px !important; } @media only screen and (max-width: 699px) { .login_form_links .login-margin-pw { margin-top: 20px; } .login_form_links .login-margin-user { margin-top: 25px; } } .c-loginheader__logo { position: absolute; bottom: 18px; left: 0; z-index: 1; } .c-loginheader__logo img { display: block; } .c-loginheader__logo > * { float: left; } .c-loginheader__logo a + a { margin-left: 15px; } @media only screen and (max-width: 959px) { .c-loginheader__logo { height: 40px; } .c-loginheader__logo a + a { margin-left: 12px; } } @media only screen and (max-width: 699px) { .c-loginheader__logo { height: 34px; bottom: 14px; } .c-loginheader__logo a + a { margin-left: 10px; } } @media only screen and (max-width: 959px) { .c-loginheader__logo-nfl > img { width: 29px; height: auto; } } @media only screen and (max-width: 699px) { .c-loginheader__logo-nfl > img { width: 26px; } } @media only screen and (min-width: 959px) { .c-loginheader__logo-nflpa { -webkit-transform: translateY(3px); -ms-transform: translateY(3px); transform: translateY(3px); } } @media only screen and (max-width: 959px) { .c-loginheader__logo-nflpa > img { width: 30px; height: auto; -webkit-transform: translateY(2px); -ms-transform: translateY(2px); transform: translateY(2px); } } @media only screen and (max-width: 699px) { .c-loginheader__logo-nflpa { -webkit-transform: none; -ms-transform: none; transform: none; } .c-loginheader__logo-nflpa > img { width: 27px; } } .c-loginheader__logohr { width: 1px; height: 57px; background: #5f6e7c; display: inline-block; margin: 0px 18px; } @media only screen and (min-width: 699px) and (max-width: 959px) { .c-loginheader__logohr { height: 39px; margin: 0px 13px; -webkit-transform: translateY(0px); -ms-transform: translateY(0px); transform: translateY(0px); } } @media only screen and (max-width: 699px) { .c-loginheader__logohr { display: none; } } .c-loginheader__logotext { display: inline-block; } @media only screen and (min-width: 959px) { .c-loginheader__logotext { -webkit-transform: translateY(9px); -ms-transform: translateY(9px); transform: translateY(9px); } } @media only screen and (max-width: 959px) { .c-loginheader__logotext { -webkit-transform: translateY(8px); -ms-transform: translateY(8px); transform: translateY(8px); } .c-loginheader__logotext img { width: 85px; height: auto; } } @media only screen and (max-width: 699px) { .c-loginheader__logotext { margin-left: 12px; -webkit-transform: translateY(2px); -ms-transform: translateY(2px); transform: translateY(2px); } .c-loginheader__logotext img { width: 92px; height: 34px; } } /*------ Target Date Fund donut chart ---------*/ @media only screen and (max-width: 699px) { .l-content-holder.targetdatefund { } .l-content-holder.targetdatefund-description > p, .l-content-holder.targetdatefund-description > .u-text-p-above-mobile { text-align: left; } .l-content-holder.targetdatefund-description img { max-width: 100%; } } .c-comp__icontext { display: inline-block; position: absolute; top: 8px; padding-left: 10px; } /*Used to align headers with center*/ .center-text-align { text-align: center; } .basiccallout-box { border: 2px solid #dadee3; } .c-form .has-error select { background: -color #fdeded; border-color: #e40000; } /* RDA Change Added for for wizard column selector*/ div.l-columns__item.u-text-center p.column-select-paragraph { margin-bottom: 15px; } .button-pointer { cursor: pointer; } .ng-pristine .validation-error { display: none; } /*Added for dist form percentage mark*/ .c-form-input-group input.c-form-control--with-ext-addon.percent-input { width: 40%; padding-left: 15px; } .c-form-input-group__addon.percent_addon { left: 28%; right: 64%; } .c-form-input-group__addon.dollar_percent_addon:first-child { left: 85%; right: 6%; } .c-form-input-group__addon.dollar_percent_addon.dollar:first-child { left: 60%; right: 6%; } @media only screen and (min-width: 700px) and (max-width: 960px) { .c-form-input-group__addon.dollar_percent_addon:first-child { left: initial; right: -1%; } } @media only screen and (min-width: 350px) and (max-width: 699px) { .c-form-input-group__addon.percent_addon:first-child { left: initial; right: 20%; } .c-form-input-group__addon.dollar_percent_addon:first-child { left: initial; right: 8%; } } @media only screen and (max-width: 350px) { .c-form-input-group__addon.dollar_percent_addon:first-child { left: initial; right: 0%; } } .vert-align-middle { vertical-align: middle; } /*For display helmet*/ .helmet-text { font-family: Macha-Book; font-size: 16px; font-weight: normal; font-style: normal; font-stretch: normal; line-height: 24px; color: #1b3045; } .font-size-18 { font-size: 18px; } .font-size-18-macha-medium { font-size: 18px; font-family: Macha-Medium; } .font-size-16 { font-size: 16px; } div.c-form-group.font-size-16 { font-size: 16px; } label.account-display-helmet-lbl { padding-top: 20px; } .account-display-helmet-update { padding-top: 10px; } .helmet-icon-size { width: 42px; height: 38px; } div.ui.popup.password-str-tooltip { min-width: 40%; } @media only screen and (max-width: 699px) { div.ui.popup.password-str-tooltip { min-width: 80%; } } /*Password Strength Meter Code*/ input.ng-pristine + ul#strength { display: none; } ul#strength { display: inline; list-style: none; margin: 0; margin-left: 0; padding: 0; vertical-align: 2px; } .point:last { margin: 0 !important; } .point { background: #DDD; display: inline-block; height: 10px; margin-right: 5px; width: 25px; } /*End of password strength code*/ /*Positioning Login text on Login SCreen*/ .login-mobile-register { display: none; } @media only screen and (max-width: 699px) { .login-heading-text { float: left; } .login-mobile-register { float: right; display: block; } .login-text-bock { margin-top: -20px; } .login-desktop-register { display: none; } } form-fed-tax-center-elements { margin: 0; padding: 0; margin-top: 18px; } confirm-id-mail-fax { margin-top: 18px; } /* input.ng-valid, select.ng-valid { border-color: #99dba6 !important; } */ input.custom-invalid { border-color: #e40000 !important; } input.ng-empty:not(.ng-valid-required):not(.ng-invalid-required):not(.ng-invalid-number) { border-color: #dadee3 !important; } select.ng-empty:not(.ng-valid-required):not(.ng-invalid-required):not(.ng-invalid-number) { border-color: #dadee3 !important; } textarea.ng-empty:not(.ng-valid-required):not(.ng-invalid-required):not(.ng-invalid-number) { border-color: #dadee3 !important; } input.ng-invalid:not(.ng-untouched), select.ng-invalid:not(.ng-untouched), textarea.ng-invalid:not(.ng-untouched) { border-color: #e40000 !important; } input.ng-invalid.ng-untouched + span.c-form-message, input.ng-valid + span.c-form-message, select.ng-invalid.ng-untouched + span.c-form-message, select.ng-valid + span.c-form-message { display: none; } input.ng-invalid.ng-pristine + span.c-form-custom-ind + span.c-form-message, input.ng-valid + span.c-form-custom-ind + span.c-form-message { display: none; } textarea.ng-invalid.ng-untouched + span.c-form-message, textarea.ng-valid + span.c-form-message { display: none; } select.ng-invalid:not(.ng-untouched) + span.c-form-message, select.ng-invalid:not(.ng-untouched) + span.c-form-message { color: red; display: inline-block; } input.ng-invalid:not(.ng-untouched) + span.c-form-message, select.ng-invalid:not(.ng-untouched) + span.c-form-message { color: red; display: inline-block; } input.ng-invalid:not(.ng-pristine) + span.c-form-custom-ind + span.c-form-message { color: red; display: inline-block; } textarea.ng-invalid:not(.ng-untouched) + span .c-form-message, textarea.ng-invalid:not(.ng-untouched) + span.c-form-message { color: red; display: inline-block; } .disabled-checkbox { background-color: lightgrey; } .disabled-checkbox-text { color: gray; } /*Error style for reset field directive*/ input.ng-invalid.ng-untouched + i.fa + span.c-form-message, input.ng-valid + i.fa + span.c-form-message, select.ng-invalid.ng-untouched + i.fa + span.c-form-message, select.ng-valid + i.fa + span.c-form-message { display: none; } select.ng-invalid:not(.ng-untouched) + i.fa + span.c-form-message, select.ng-invalid:not(.ng-untouched) + i.fa + span.c-form-message { color: red; display: inline-block; } input.ng-invalid:not(.ng-untouched) + i.fa + span.c-form-message, select.ng-invalid:not(.ng-untouched) + i.fa + span.c-form-message { color: red; display: inline-block; } /* CSS for Reset Field Button on all Input elements */ .icon-close { float: right; margin-right: 6px; margin-top: -41px; } form[name="regisrationform"] input[reset-field] + .icon-close { margin-top: -51px; } input[reset-field].contact-us-input + .icon-close { right: 32px; margin-top: 10px; } .password-valid-checkmark { margin-top: -51px; float: right; margin-right: 4px; color: #27b796; } .update-password-valid-checkmark { margin-top: -41px; float: right; margin-right: 6px; color: #27b796; } input.padding-right-30 { padding-right: 30px; } @media only screen and (max-width: 500px) { input[reset-field].contact-us-input + .icon-close { margin-top: 10px; right: 55px; } input[reset-field].contact-us-input.c-form-contact-phone + .icon-close { margin-top: 10px; right: 35px; } input[reset-field].contact-us-input.c-form-contact-email + .icon-close { margin-top: 10px; right: 35px; } } @media only screen and (min-width: 500px) and (max-width: 560px) { input[reset-field].contact-us-input.c-form-contact-email + .icon-close { margin-top: -42px; right: 15px; } input[reset-field].contact-us-input.c-form-contact-phone + .icon-close { margin-top: 10px; right: 35px; } } @media only screen and (max-width: 699px) { .icon-close { margin-top: -40px; } form[name="regisrationform"] input[reset-field] + .icon-close { margin-top: -50px; } input[reset-field].contact-us-input + .icon-close { margin-top: 10px; } } @media only screen and (max-width: 400px) { input[reset-field].contact-us-input.c-form-contact-phone + .icon-close { margin-top: -42px; right: 5px; } input[reset-field].contact-us-input.c-form-contact-email + .icon-close { margin-top: -42px; right: 5px; } } /* prevent text from appearing underneath the icon */ input[reset-field] { padding-right: 30px; } /* hide the built-in IE10+ clear field icon */ input[reset-field]::-ms-clear { display: none; } /* hide cancel icon for search type */ input[reset-field]::-webkit-search-cancel-button { -webkit-appearance: none; } /* icon styles */ input[reset-field] + .fa { display: none; } @media only screen and (max-width: 700px) { input[reset-field] + .fa { display: inline-block; position: relative; right: 0px; color: #C0C0C0; cursor: pointer; } } .c-form-group--inline input.c-form-contact-email { width: 400px; } @media only screen and (max-width: 500px) { .c-form-group--inline input.c-form-contact-email { width: 250px; } } @media only screen and (max-width: 320px) { .c-form-group--inline input.c-form-contact-email { width: 200px; } .c-form-group--inline input.c-form-contact-phone { width: 200px; } } /*@media only screen and (max-width: 320px) { .c-form-group--inline input.c-form-contact-email { width: 175px; } }*/ /*RDA Change Added for manage benef page*/ .c-form-error { font-size: 16px; margin-top: 6px; color: red; display: inline-block; } input[disabled].c-form-control { /*background: #DCDAD1;*/ background: rgba(220, 224, 228, 0.25); } select[disabled].c-form-control { background: #DCDAD1; } .center-align-content { margin-left: auto; margin-right: auto; text-align: center; } /*For button on benefciairy*/ .no-border { border: none; } .secondry-button-not-solid { box-shadow: none; border-style: solid; background-color: transparent; } /*Added for MyAccount Settings Address*/ p.line-height-1-4 { line-height: 1.4; } /*For display helmet search box*/ input.search { font-family: Macha-Book; font-size: 20px; font-weight: normal; font-style: normal; font-stretch: normal; line-height: 1.4; color: #1b3045; } div.ui.fluid.search.selection.dropdown div.text { padding-left: 5px; } div.ui.fluid.search.selection.dropdown { border-radius: 3px; border: solid 2px #dadee3; } div.ui.fluid.search.selection.dropdown.active.visible { background-color: #ffffff; /*box-shadow: 3px 3px 0 0 rgba(20, 36, 52, 0.1);*/ border: solid 2px #92e2fd; } div.menu.transition.visible { background-color: #ffffff; /*box-shadow: 3px 3px 0 0 rgba(20, 36, 52, 0.1);*/ border: solid 2px #92e2fd; } div.menu.transition.visible { background-color: #ffffff; /*box-shadow: 3px 3px 0 0 rgba(20, 36, 52, 0.1);*/ border: solid 2px #92e2fd; } /*div.ui.selection.dropdown i.dropdown.icon { margin-top: 1px; }*/ div.c-form-control.dropdown.team-select-dropdown { border: 2px solid #dadee3; border-radius: 3px; font-family: "Macha-Book", sans-serif; -webkit-transition: all 0.25s; transition: all 0.25s; padding: 0; } div.c-form-control.dropdown.team-select-dropdown:focus { outline: none; border-color: #92e2fd; } section.c-callout--iconheader.l-content-holder { margin-top: 75px; } /*Added for mobile subnav*/ .desktop-subnav { display: block; } .mobile-subnav { background: #0f7d68; display: none; } form.subnav-form select.subnav-select { width: 80%; background-color: #ffffff !important; border: none; } .subnav-form { padding-bottom: 15px; padding-top: 15px; } @media only screen and (max-width: 699px) { .desktop-subnav { display: none; } .mobile-subnav { display: block; } } /*Added for form review pages (review personal information)*/ fieldset.c-form-fieldset.padding-bottom-0 { padding-bottom: 0; } h3.c-accordion__header.show-hide-header { font-size: 13px; font-weight: bold; font-style: normal; font-stretch: normal; color: #00a4da; text-transform: uppercase; } .c-accordion div.c-accordion__section.border-none { border: none; } div.show-hide > .c-accordion > .c-accordion__section > .c-accordion__header-holder { padding-top: 23px; padding-bottom: 23px; } section.show-hide-section + script + section.show-hide-section > div.show-hide > .c-accordion > .c-accordion__section > .c-accordion__header-holder { /*padding-top: 0px;*/ padding-bottom: 23px; border-top: 2px solid #eaedf0; } div.show-hide > .c-accordion > .c-accordion__section > .c-accordion__content-holder > section > div { padding-top: 0px; } div.show-hide > .c-accordion > .c-accordion__section > .c-accordion__content-holder > section > .l-content-holder { padding-top: 0px; } div.show-hide > .c-accordion > .c-accordion__section.is-expanded > .c-accordion__content-holder { padding-bottom: 23px; } /*Topic Header*/ div.topic-header { height: 59px; padding: 18px 20px 18px 20px; color: #FFFFFF; font-style: normal; font-weight: 400; font-size: 22px; line-height: 24px; margin-bottom: 20px; display: flex !important; justify-content: space-between; align-items: center; } div.topic-header h3 { margin-bottom: 0; } .topic-header-section { max-width: 900px; margin: auto; } div.topic-header img { margin: 0; padding: 0; } .c-page-subnav .c-hero disability-sub-nav { margin-top: 5px; } div.topic-header__Agreement { background: #1B3045; } div.topic-header__Balance { background: #0583AD; } div.topic-header__Form { background: #1B3045; } div.topic-header__Medical { background: #0583AD; } div.topic-header__Money { background: #0F7D68; } div.topic-header__content { padding: 16px 20px 19px 20px; /* display: flex; */ flex-flow: row wrap; justify-content: space-between; } .topic-header__content--no-bottom-padding { padding-bottom: 0px !important; } @media only screen and (max-width: 699px) { section.topic-header-section { margin-left: 20px; margin-right: 20px; } section.topic-header-section div.topic-header h3 { font-size: 20px; } .payments-container { text-align: center !important; } } /* Disability Payments Table */ .l-content-holder.disability-payment-table-container { padding-top: 0px; } .disability-payment-table { /*margin: 5rem auto;*/ width: 100%; display: grid; grid-auto-flow: row; gap: 0em; padding-bottom: 10px; } @media (min-width: 700px) { .disability-payment-table { flow-direction: column; grid-template-columns: 15% 20% 65%; } .dpt-column-1, .dpt-column-1-alt, .dpt-column-2, .dpt-column-2-alt { text-align: left !important; justify-content: left !important; } .dpt-column-2, .dpt-column-2-alt span { font-family: Macha-medium; } .dpt-column-2, .dpt-column-2-alt { padding-left: 20px; } .dpt-column-2-container { text-align: left !important; } } .dpt-column-2-container { text-align: center; } .dpt-column-1 { color: #FFFFFF; vertical-align: middle !important; background-color: #0F7D68 !important; border-top: 1px solid #dadee3; border-left: 1px solid #dadee3 !important; border-bottom: 1px solid #dadee3; padding-top: 10px !important; padding-left: 20px !important; padding-bottom: 10px !important; border-collapse: collapse; font-family: macha-bold; text-align: center; display: flex; align-items: center !important; justify-content: center; letter-spacing: 1.5px; } .dpt-column-1-alt { color: #FFFFFF; vertical-align: middle !important; background-color: #1B997D !important; border-top: 1px solid #dadee3; border-left: 1px solid #dadee3; border-right: 0px !important; border-bottom: 1px solid #dadee3; padding-top: 10px !important; padding-bottom: 10px !important; padding-left: 20px !important; border-collapse: collapse; font-family: macha-bold; text-align: center; display: flex; align-items: center !important; justify-content: center; letter-spacing: 1.5px; } .dpt-column-2 { color: #2BA0A0 !important; font-size: 30px !important; vertical-align: middle !important; font-family: Macha-medium !important; font-weight: 500 !important; border-top: 1px solid #dadee3; border-right: 1px solid #dadee3; border-bottom: 1px solid #dadee3; border-left: 1px solid #dadee3; padding-top: 10px !important; padding-bottom: 10px !important; border-collapse: collapse; display: flex; align-items: center; justify-content: center; } .dpt-column-2-alt { color: #2BA0A0 !important; font-size: 30px !important; vertical-align: middle !important; font-family: Macha-medium !important; font-weight: 500 !important; border-top: 1px solid #dadee3; border-right: 1px solid #dadee3; border-bottom: 1px solid #dadee3; border-left: 1px solid #dadee3; padding-top: 10px !important; padding-bottom: 10px !important; border-collapse: collapse; display: flex; align-items: center; justify-content: center; } .tp-column-2-alt span { display: flex; align-items: center; } .dpt-column-3 { list-style: disc !important; border: 1px solid #dadee3 !important; padding-top: 10px !important; padding-bottom: 10px !important; padding-left: 30px; padding-right: 10px; vertical-align: middle !important; display: flex; align-items: center; line-height: 24px; } .dpt-column--gray { background: #F8F9FA; } .dpt-column--white { background: #FFF; } .dpt-column-3 ul { list-style: disc !important; font-weight: 400 !important; display: inline; } /* disability options table*/ .disability-options-table__dark { background: #0583AD; text-align: center; color: #FFFFFF; border-top: 2px solid white; border-bottom: 2px solid white !important; } .disability-options-table__medium { background: #2B9ECB; text-align: center; color: #FFFFFF; border-top: 2px solid white; border-bottom: 2px solid white !important; } .disability-options-table__light { background: #14B8EE; text-align: center; color: #FFFFFF; border-top: 2px solid white; border-bottom: 2px solid white !important; } .disability-options-table__disabilityRow { background: #5F6E7C !important; color: #FFFFFF !important; min-width: 158px; font-size: 14px; text-align: left !important; } .disability-options-table__disabilityRow a { color: #FFFFFF !important; } /*For Intro Component*/ .intro-text { font-family: Macha-Book; font-size: 24px; font-weight: normal; font-style: normal; font-stretch: normal; line-height: 34px; text-align: center; color: #5f6e7c; } @media only screen and (max-width: 699px) { .intro-text { font-family: Macha-Book; font-size: 20px; font-weight: normal; font-style: normal; font-stretch: normal; line-height: 28px; text-align: center; color: #5f6e7c; } } /*Styles for numbered list*/ ol.numbered-list { counter-reset: item; margin: 0; /*padding: 0 0 0 26px;*/ padding: 0; } ol.numbered-list > li { counter-increment: item; list-style: none inside; margin: 15px 0; overflow: hidden; font-size: 16px !important; line-height: 1.5em; font-family: Macha-Book; font-size: 16px; font-weight: normal; font-style: normal; font-stretch: normal; letter-spacing: normal; color: #1b3045; min-height: 30px; margin-left: 35px; position: relative; padding-left: 35px; } ol.numbered-list > li:before { /*float: left;*/ position: absolute; left: 0px; font-weight: bold; font-style: normal; font-stretch: normal; line-height: normal; letter-spacing: normal; text-align: center; content: counter(item); margin-right: 10px; /*margin-bottom: 25px;*/ padding: 4px; display: block; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; width: 29px; color: #27b696; border: solid 2px #dadee3; text-align: center; font-family: Macha-book; font-size: 14px; } ul.bulleted-list { /*margin:0; padding-left:0;*/ list-style-type: none; font-family: Macha-Book; font-size: 16px; line-height: 24px; color: #1b3045; } ul.bulleted-list li:before { content: '\2022'; /*margin-right: 5px;*/ color: #1b3045; position: absolute; left: -10px; } ul.bulleted-list.centered li:before { content: '\2022'; margin-right: 15px; color: #1b3045; position: static; left: -10px; } ul.bulleted-list.center li:before { content: '\2022'; margin-right: 5px; color: #1b3045; position: relative !important; left: 0; } .featurebox-description ul.bulleted-list li:before { content: '\2022'; padding-right: 10px; position: relative; } .featurebox-description ul.bulleted-list { font-family: Macha-Book; font-size: 16px; font-weight: normal; font-style: normal; font-stretch: normal; line-height: 1.5; letter-spacing: normal; text-align: center; color: #1b3045; margin: 15px auto 0 auto; list-style-type: none; } .column-select-paragraph ul.bulleted-list li:before { content: '\2022'; padding-right: 10px; position: relative; } .column-select-paragraph ul.bulleted-list { font-family: Macha-Book; font-size: 16px; font-weight: normal; font-style: normal; font-stretch: normal; line-height: 1.5; letter-spacing: normal; text-align: center; color: #1b3045; margin: 15px auto 0 auto; list-style-type: none; } /*RDA Change*/ h4 + p { margin-top: 5px; } p + ul.bulleted-list { margin-top: -5px; } ul.bulleted-list li:last-child { margin-bottom: 15px; } ul.bulleted-list li { position: relative; margin-bottom: 10px; margin-left: 10px; } ul.bulleted-list li:last-child { margin-bottom: 15px; } ol.roman-list { padding-left: 40px; display: block; list-style: none; list-style-type: upper-roman; -webkit-margin-before: 1em; -webkit-margin-after: 1em; -webkit-margin-start: 0px; -webkit-margin-end: 0px; -webkit-padding-start: 40px; } ol.roman-list > li { display: list-item; text-align: -webkit-match-parent; } ol.alphabet-list { padding-left: 40px; display: block; list-style: none; list-style-type: lower-alpha; -webkit-margin-before: 1em; -webkit-margin-after: 1em; -webkit-margin-start: 0px; -webkit-margin-end: 0px; -webkit-padding-start: 40px; } ol.alphabet-list > li { display: list-item; text-align: -webkit-match-parent; } .callout-insert { margin-right: 0px !important; /*padding-left: 15px;*/ padding-top: 5px; vertical-align: middle; } /*.l-col1.callout-insert { margin-right: -25px !important; }*/ @media only screen and (max-width: 900px) { /* .l-col1.callout-insert { margin-right: -15px !important; }*/ } .c-comp__displaylist-content.itemized > div:first-of-type > p > span.itemized-flag-message { font-size: 14px; line-height: 18px; margin-top: 13px; margin-left: 20px; font-family: Macha-Medium; font-weight: 500; color: #939ea9; font-style: normal; font-stretch: normal; } .c-comp__displaylist-content.itemized > div:first-of-type > p > span.itemized-flag-message:before { content: ''; padding-left: 22px; padding-top: 2px; background: url(/Assets/images/controls/c-message/flag.svg) no-repeat; } .font-macha-bold { font-family: Macha-Bold; } .upload-text { font-size: 20px; color: #152c46; font-family: "Macha-Book", sans-serif; } a.anchor-link { display: block; position: relative; top: -250px; visibility: hidden; } a.anchor { display: block; position: relative; top: -250px; visibility: hidden; } .disability-modal-nav-block { border-bottom: 1px solid #dadee3; display: flex; padding-bottom: 25px; margin-bottom: 30px; margin-top: 20px; } .disability-modal-nav-item-left { -webkit-box-pack: end; -o-box-pack: end; -ms-flex-pack: end; -webkit-justify-content: flex-end; justify-content: flex-end; -webkit-flex-basis: 33.33%; -ms-flex-preferred-size: 33.33%; flex-basis: 33.33%; text-align: left; } .disability-modal-nav-item-right { -webkit-box-pack: end; -o-box-pack: end; -ms-flex-pack: end; -webkit-justify-content: flex-end; justify-content: flex-end; -webkit-flex-basis: 33.33%; -ms-flex-preferred-size: 33.33%; flex-basis: 33.33%; text-align: right; } .disability-modal-nav-item-middle { -webkit-box-pack: end; -o-box-pack: end; -ms-flex-pack: end; -webkit-justify-content: flex-end; justify-content: flex-end; -webkit-flex-basis: 33.33%; -ms-flex-preferred-size: 33.33%; flex-basis: 33.33%; text-align: center; } .disability-modal-nav-text { display: inline-block; font-size: 12px; font-weight: bold; color: #142435; letter-spacing: 2px; } .ui-btn.disability-nav-link-left, .ui-btn.disability-nav-link-left:hover { margin: 0; text-align: left; } .ui-btn.disability-nav-link-right, .ui-btn.disability-nav-link-right:hover { margin: 0; text-align: right; } .single-box-callout { padding: 30px 50px 40px 50px; } .not-elig-color { color: #949fab; } .elig-color { color: #00ba98; } .l-columns__item .horizonbreak { display: block; margin-top: 15px; margin-bottom: 20px; margin-left: 0; margin-right: 0; border: 3px solid #dadee3; width: 30px; } @media only screen and (max-width: 699px) { .l-columns__item .horizonbreak { margin-left: auto; margin-right: auto; } } input.hidden, div.hidden { display: none !important; } .next-step-text { font: Macha-Book; font-size: 16px; line-height: 24px; } @media only screen and (max-width: 699px) { .c-submit-block__item:nth-child(2) span { padding-right: 25px; padding-bottom: 25px; } } .c-submit-block__item:nth-child(2) span { padding-right: 25px; padding-bottom: 0px; } .l-columns.l-columns--grid > .l-col6:nth-child(even) ol.numbered-list > li:before { /*left: 51% !important;*/ } header.header--section a.right { float: right !important; font-size: 16px; font-family: "Macha-Book", sans-serif; } a.return-to-login { align-self: center; } div.forgot-local-section { justify-content: space-between; } .l-columns.pensionoption { margin-top: 0px !important; padding-top: 15px; padding-bottom: 15px; border-bottom: solid 1px #c6cdd4; } div.mfp-content.pensionDistributionModel { width: 420px; padding: 20px; } div.mfp-content.pensionDistributionModel .mfp-close { display: none; } div.mfp-content.pensionDistributionModel div.l-content-holder { padding-top: 0px; } div.mfp-content div.l-content-holder { padding-top: 0px; } /*Print Screen CSS */ @media print { .no-print, .no-print * { display: none !important; } } .l-columns__item.mccbene_display > .c-infobox > .c-infobox__display > img { height: 60px; } div#personalinfo-container + div#form-nav { margin-top: 0px; border-top: none; } .l-content-holder.table-padding { padding-top: 10px; } .hide-overflow { overflow: hidden; } .distribution .c-form-control.contribution_edit { border: none; border-bottom: 1px solid black; color: slategrey; width: 30px; padding: 0; text-align: center; display: inline-block; } .distribution .c-form-control.contribution-input-percent { font-weight: normal; font-size: 18px; line-height: 1.38; width: 160px; height: 50px; text-align: right; padding-right: 5px; } .distribution .c-form-control.contribution-input-dollar { font-weight: normal; font-size: 18px; line-height: 1.38; width: 200px; height: 50px; text-align: right; padding-right: 5px; } .distribution .c-form-control.contribution_edit.dollar-amount { width: 100px; font-size: 16px; } .c-form-group .contribution_title { color: black; text-align: center; } #contribution-401k > p { text-align: center; max-width: 660px; margin: auto; padding-bottom: 20px; } .contribution-info-message { display: flex; align-items: center; padding-bottom: 30px; justify-content: center; } .l-content-holder.contribution-401k { padding-top: 0px; } .l-columns.l-columns--grid.contribution_breakdown { text-align: center; margin-top: -25px; padding-bottom: 0px; } #contribution401k-form .h2--extra-margin.u-text-center, #investments401k-form .h2--extra-margin.u-text-center { padding-top: 25px; } #contribution401k-form .distribution { text-align: center; } .currency-toggle { padding-top: 15px; text-align: center; color: #0095d2; font-weight: bold; cursor: pointer; } #investments401k-form p.subtext { text-align: center; font-weight: bold; font-size: 15px; margin-bottom: 25px; } #investments401k-form select { max-width: 75px; border: none; border-bottom: 2px solid darkgray; padding-left: 5px; height: 22px; font-size: 15px; color: #0095d2; font-weight: bold; } #investments401k-form #mix-funds-picker, #investments401k-form #target-date-funds-picker { max-width: 150px; border: none; border-bottom: 2px solid darkgray; padding-left: 5px; height: 22px; font-size: 13px; color: #0095d2; font-weight: bold; } #investments401k-form .funds-column { margin: 0; display: none; } @media only screen and (max-width: 699px) { #investments401k-form #mix-funds-picker, #investments401k-form #target-date-funds-picker { max-width: 195px; font-size: 15px; } } #investments401k-form #target-fund-text { margin-top: 6px; margin-right: 9px !important; } #investments401k-form .c-form-radio-inline { font-size: 16px; } #investments401k-form .c-form-radio-inline:first-of-type { min-width: 250px; } #investments401k-form .investment-fund-input { margin-left: 10px; width: 50px; padding: 2px; margin-bottom: 20px; padding-left: 5px; } #investments401k-form .l-col9.l-columns { font-size: 12px; font-weight: bold; } #investments401k-form h1.suggested-date-fund { margin-bottom: 10px; margin-top: 25px; font-size: 30px; font-weight: bold; } #investments401k-form p.center { text-align: center; } #investments401k-form .funds-description { margin-top: 30px; } #investments401k-form .mix-funds-grid, #investments401k-form .target-date-funds-grid { height: fit-content; } #investments401k-form .funds-grid .l-col4 { margin-right: 0px; } #investments401k-form .funds-list > .l-columns.l-columns--grid:nth-child(even) { background-color: #f2f3f5; } #investments401k-form .funds-list > .l-columns.l-columns--grid { padding-left: 15px; padding-bottom: 15px; } #investments401k-form .c-form-input-group__addon { position: absolute; top: 2px; left: 66% !important; font-size: 12px; padding: 0px; } #investments401k-form .target-date-funds-percent, #investments401k-form .mix-funds-percent { left: 93% !important; } #investments401k-form .funds-grid .l-col4 { position: relative; padding-top: 0px; margin-top: 0px; } #investments401k-form .funds-grid .l-col4 > .l-col6:first-of-type { margin-top: 5px; } #investments401k-form .messages { display: inherit !important; text-align: right; } #investments401k-form .funds-list { border-top: 1px solid #dadee3; margin-top: 50px; } #investment-mobile-nav .nav-container { display: flex; flex-direction: row; width: 100%; } #investment-mobile-nav .nav-container .cancel-button-container { margin-top: 25px; margin-left: 5%; } #investment-mobile-nav .continue-button-container { text-align: right; padding-right: 15px; margin-top: 0px; display: flex; width: 100%; justify-content: center; padding-left: 15px; } .investment-add-shadow { box-shadow: 0px 14px 10px 17px rgba(0, 0, 0, 0.25); } .investment-mobile-form-navigation { height: 150px !important; } .investment-mobile-newmix-form-navigation { height: 170px !important; } .investment-mobile-form-navigation .total-mix-container { margin-top: 25px; margin-right: 20px; text-align: left; padding-left: 10px; padding-right: 50px; padding-top: 5px; display: flex; justify-content: end; background: var(--nflpb-website-grey-grey-10, #F8F9FA); } .investment-mobile-form-navigation .total-mix-container .total-mix-title { align-self: center; color: #5F6E7C; font-family: Macha-book; font-size: 14px; font-style: normal; font-weight: 700; line-height: 16px; letter-spacing: 2px; text-transform: uppercase; white-space: nowrap; padding-right: 35px; display: block; padding: 10px 15px; gap: 10px; border-radius: 5px; background: var(--nflpb-website-grey-grey-10, #F8F9FA); } .enroll-confirmation > p { width: 50%; margin: auto; text-align: center; } .hidden-desktop-flex { display: none !important; } .c-tile-selector__item.placeholder, .c-tile-selector__item.placeholder:hover { background: none; border: none; box-shadow: none; cursor: unset; } #investments401k-form .c-tile-selector__header, #contribution-401k .c-tile-selector__header { display: flex; justify-content: center; align-items: center; height: 100%; font-size: 20px; } .c-enrollment { height: 350px !important; padding-top: 30px; } .tip-link { font-size: 12px; color: #ffffff; border-bottom: 1px solid; cursor: pointer; } .c-enrollment-edit { padding-top: 30px; } .c-enrollment .c-infobox__note.link, .logout-info-msg a { cursor: pointer !important; } .line-above { margin: auto; text-align: center; margin-top: 40px; border-top: 1px solid #dadee3; padding-top: 25px; } .c-hero .c-guided__secondary .c-infobox > .c-infobox__display { font-size: 22px; line-height: 22px; } .c-guided__header-holder.inline { display: inline-block !important; } .c-hero .c-guided__secondary .c-infobox .c-infobox__display > .ui-btn--tetriary { margin: 35px; padding: 15px 90px; } #investments401k-form #target-date-fund__addon, #investments401k-form .mix-funds-percent { left: 91% !important; } @media only screen and (max-width: 699px) { .c-hero .c-guided__secondary .c-infobox .c-infobox__display > .ui-btn--tetriary { margin: 35px; padding: 15px 26px 13px 26px; } } .c-guided__secondary .c-infobox .c-infobox__note.link > a { color: white; font-weight: bold; text-decoration: underline; } .p-p-slide { padding-top: 30px; } .p-p-slide > img { width: 100%; } .enrollment-divider { margin-top: 50px; } .comments.c-tile-selector { margin-bottom: 0px; } .comments.c-tile-selector .c-tile-selector__item.placeholder { text-align: center; padding: 0px 15px; } .logout-msg.message-box { padding-top: 30px; } .logout-msg.message-box .l-content-holder > div { background: #eaedf0; } .logout-info-msg { color: #5f6e7c; padding-top: 20px; padding-bottom: 20px !important; padding-left: 20px; padding-right: 20px; border-left: 8px solid #ff6c42; background: #eaedf0; margin-bottom: 0px; } .hidden-mobile { display: inline-block !important; } .hidden-desktop { display: none !important; } #investments401k-form .funds-grid .l-columns.l-columns--grid > .l-col6:nth-child(1n) { margin-right: 0px !important; } @media only screen and (max-width: 768px) { #investments401k-form .funds-grid .l-col4 { width: 100%; } #investments401k-form .c-form-input-group__addon { top: 2px; left: 62% !important; } #investments401k-form #target-date-fund__addon { left: 63% !important; } #investments401k-form .mix-funds-percent, #investments401k-form .target-date-funds-percent { left: 22% !important; } } @media only screen and (max-width: 699px) { #investments401k-form h2, #contribution-401k h2, #enroll401kconfirm h2 { font-weight: bold; } #investments401k-form #target-date-funds-picker { margin-bottom: 25px; } #investments401k-form .messages { display: none !important; } .enroll-confirmation > p { width: 100%; } #investments401k-form .l-columns.l-columns--grid.contribution_breakdown > .l-col6, #investments401k-form .l-columns.l-columns--grid.contribution_breakdown > .l-col4, #contribution401k-form .l-columns.l-columns--grid.contribution_breakdown > .l-col4 { width: 50% !important; margin: 0; } #contribution401k-form .c-form-group.l-col4 { margin-top: initial; } #contribution401k-form .l-columns.l-columns--grid.contribution_breakdown { margin-top: initial; } #investments401k-form .c-form-input-group__addon { max-width: 30px; font-size: 16px; top: 8px; left: 78% !important; } #investments401k-form #target-date-fund__addon, #investments401k-form .mix-funds-percent { left: 65% !important; } #investments401k-form #target-fund-text { margin-top: 5px; font-size: 17px; margin-bottom: 3px; max-width: 50%; } #investments401k-form #target-fund-value { max-width: 46%; } #investments401k-form #investments401k-form { margin-bottom: 25px; } #investments401k-form .funds-grid > .l-col4 > .l-col6 { width: 49%; margin: 0px; font-size: 16px; } .hidden-mobile-flex { display: none !important; } .hidden-desktop-flex { display: flex !important; } .c-tile-selector__item { min-height: 135px; } #investments401k-form .investment-fund-input { height: 35px; width: 100px; font-size: 16px; font-weight: bold; } .c-enrollment .c-guided__header { font-size: 23px; line-height: 30px; } .c-enrollment { height: 375px !important; } .c-enrollment-edit { height: 560px !important; } .comments.c-tile-selector .c-tile-selector__item.placeholder { text-align: left; padding: 0px; min-height: 50px; margin-top: 0; } .sticky-percentage { position: fixed; bottom: 0; left: 0; width: 100%; text-align: center; height: 75px; background: white; border-top: 1px solid #dadee3; } .sticky-percentage.unstick { position: relative; border-top: none; } .sticky-percentage .l-columns { height: 100%; } .sticky-percentage .l-columns .l-col6 { width: 48% !important; margin: 0px !important; padding-top: 15px !important; text-align: left; max-width: 200px; } .sticky-percentage .l-columns .l-col6:first-of-type { padding-left: 45px; } .sticky-percentage.unstick .l-columns .l-col6:first-of-type { padding-left: 0px; } .sticky-percentage .l-columns .l-col6 .beneficiary_total { font-size: 35px; } .sticky-percentage .c-submit-block.ng-scope { margin: 0; padding: 0; width: 150px; border-top: 0px; } .hidden-mobile { display: none !important; } .hidden-desktop { display: inline-block !important; } } .column-selector-header { height: 96px; text-align: center; vertical-align: middle; } @media only screen and (max-width: 699px) { .column-selector-header { height: auto; text-align: center; vertical-align: middle; } } .verify-logout { position: absolute; right: 0; } @media only screen and (max-width: 699px) { .verify-logout { position: relative; right: 0; } } .blue-tip { } .c-enrollment .c-tip__container { display: flex; justify-content: center; align-items: center; margin-top: 20px; } .c-enrollment .c-tip__image { padding-right: 25px; } .c-enrollment .c-tip__text { text-align: left; line-height: 18px; } .c-enrollment .c-tip__text p { font-size: 12px; } .c-enrollment-edit .c-data__container { display: flex; flex-direction: row; justify-content: space-around; align-items: center; } @media only screen and (max-width: 699px) { .c-enrollment-edit .c-data__container { display: flex; flex-direction: column; justify-content: space-between; align-items: center; } } .c-enrollment-edit .c-data__enrollment { line-height: 18px; padding-top: 20px; } .c-enrollment-edit .c-data__enrollment p { font-size: 12px; } @media only screen and (max-width: 699px) and (min-width: 320px) { .current-step-name { font-size: 17px !important; } } .current-step-name { color: #42bfa3; font-size: 20px; text-align: center; margin-bottom: 25px; margin-top: -25px; } .c-data__enrollment div { font-weight: bold; } @media only screen and (min-width: 699px) { .contribution-401k .c-tile-selector { margin-bottom: 0; margin-top: 15px; } } .l-columns.l-columns--grid .l-col--with-left-divider.spring-contrib-container { padding-left: 50px; } @media only screen and (max-width: 699px) { .contribution-401k .c-tile-selector { margin-top: 10px; margin-bottom: 40px; } .contribution-401k .comments.c-tile-selector .c-tile-selector__item.placeholder { text-align: center; } } .c-enrollment .c-guided__header { margin-bottom: 0; } .c-form-messagebox__success { display: flex; font-family: "Macha-Medium", sans-serif; color: black; padding-top: 20px; padding-bottom: 20px !important; padding-left: 20px; padding-right: 20px; background: #eaedf0; font-size: 16px; line-height: 22px; text-align: left; margin-bottom: 0; } .message-box-icon { margin-right: 20px; } .beneficiary_content .header--section { border: none !important; line-height: inherit !important; display: grid !important; } .beneficiary_content .header--section h3 { font-size: 35px !important; line-height: inherit !important; grid-column: 1; } .beneficiary_content .header--section a { color: #0583AD; font-family: "Macha-book", sans-serif; font-size: 16px; font-style: normal; font-weight: 400; line-height: 24px; grid-column: 2; justify-self: right; height: 100%; align-content: center; display: grid; } } } .password-req-box { border: 1px solid black; padding: 20px; margin: 0 auto; width: 80%; } div.password-req-box h4 { margin-top: 0; margin-bottom: 10px; } .password-req-box ul { font-size: 12px; line-height: 20px; color: #7e8b96; font-family: "Macha-Medium", sans-serif; } .account-settings-italic { font-style: italic; font-size: 14px; font-weight: 600; color: #7e8b96; } #two-factor-confirm-wrapper { width: 385px; height: 55px; border: 2px solid #dadee3; } input.two-factor-input { margin-top: 0; width: 420px; font-size: 25px; letter-spacing: 50px; text-transform: uppercase; height: 50px; padding: 0 0 0 25px; border: none !important; /*background: repeating-linear-gradient(to right, #e1e1e1 0 26px, transparent 26px 38px) bottom/100% 1px no-repeat;*/ /*width: 260px;*/ clip-path: polygon(0 0, calc(100% - 47px) 0, calc(100% - 47px) 100%, 0 100%); } .qr-code { width: 100%; } @media only screen and (max-width: 900px) { input.two-factor-input { width: 420px; font-size: 25px; letter-spacing: 50px; } } .hide-on-mobile { display: block !important; } .success-image { width: 100%; } @media only screen and (max-width: 699px) { #two-factor-confirm-wrapper { width: 215px; height: 55px; border: 2px solid #dadee3; margin-right: 0; display: block; } input.two-factor-input { padding: 0 0 0 15px; width: 100%; font-size: 17px; letter-spacing: 24px; clip-path: polygon(0 0, calc(100% - 18px) 0, calc(100% - 18px) 100%, 0 100%); } #twoFactorConfirmStep1 .c-form-group h3 { text-align: left; } .qr-code { width: 85%; } .hide-on-mobile { display: none !important; } .success-image { width: 50%; } .criteria-box { display: none; } } input[type='text'].two-factor-input { border-color: black; } .l-content-holder.two-factor-form { background-color: white; padding: 30px 50px 30px 50px; } .two-factor-steps-header { margin-bottom: 20px; font-weight: bold; font-size: large; } img.two-factor-start-image { width: 100%; } .password-req-box { border: 1px solid black; padding: 20px; margin: 0 auto; width: 80%; } .mobile-password-req-box { display: none; } @media only screen and (max-width: 699px) { img.two-factor-start-image { display: none; } .password-req-box { display: none; } div p.mobile-password-req-box { display: inline-block; font-size: 12px; line-height: 20px; color: #7e8b96; font-family: "Macha-Medium", sans-serif; } .ui.custom.popup.registration-popup { display: none !important; } h4.two-factor-step1-header { margin-top: 20px; } } h4.two-factor-step1-header { margin-top: 50px; } .validation-reg-green { color: #00ba97; } .eligibility-countdown-message { color: #00ba97; margin-bottom: 10px; line-height: 22px; font-size: 14px; background: url(/Assets/images/controls/c-message/hourglass.svg) no-repeat; padding-left: 22px; } div.password-req-box h4 { margin-top: 0; margin-bottom: 10px; } .password-req-box ul { font-size: 12px; line-height: 20px; color: #7e8b96; font-family: "Macha-Medium", sans-serif; } .account-settings-italic { font-style: italic; font-size: 18px; font-weight: 500; color: #7e8b96; } img.overlay-image { width: 100%; } .l-content-holder.cta-overlay-content { padding: 80px; padding-bottom: 20px; } .l-content-holder.contact-overlay-content { padding: 0px; border: none; } #disability-contact-popup .modal-content-medium { width: 70%; } @media only screen and (max-width: 1099px) { #confirm-contact-modal-container .modal-content-medium { width: 70%; } } @media only screen and (max-width: 999px) { #confirm-contact-modal-container .modal-content-medium { width: 80%; } } @media only screen and (max-width: 899px) { .l-content-holder.cta-overlay-content { padding: 10px; padding-top: 60px; padding-bottom: 60px; } /*.l-content-holder.contact-overlay-content { padding:30px; }*/ .cta-overlay .modal-content-medium { width: 90%; } #confirm-contact-modal-container .modal-content-medium { width: 90%; } } @media only screen and (max-width: 699px) { img.overlay-image { display: none; } .l-content-holder.cta-overlay-content { padding: 10px; padding-top: 60px; padding-bottom: 60px; } /*.l-content-holder.contact-overlay-content { padding:30px; }*/ #disability-contact-popup .modal-content-medium { width: 90%; } } p.overlay-top-text { font-size: 12px; font-weight: bold; color: #000000; text-transform: uppercase; font-style: normal; font-stretch: normal; line-height: normal; letter-spacing: 1px; } #eligibilitydatemessage { font-size: 15px; padding-top: 5px; } @media only screen and (max-width: 699px) { } .blue-tip { color: #00a4da; text-align: center; } .contribution-401k .comments.c-tile-selector .c-401k-help-text { min-height: 0px; } .c-tile-selector.c-401k-tile { margin-bottom: 0; } span.chart-tooltip { float: right; margin-top: 20px; } @media only screen and (max-width: 699px) { span.chart-tooltip { float: none; margin-top: 20px; } div.chart-tooltip-container { text-align: center; margin-top: 20px; } } .pension-mcc-details { font-size: 14px; line-height: 1.4; } .c-infobox__note strong { color: rgb(21, 44, 70); } .mcc-horizbreak { margin-top: 10px; margin-bottom: 20px; border: 2px solid #dadee3; width: 30px; } .c-message--smaller.c-message--flag { background-size: 16px 16px; } .eb-header { color: #27b696; text-align: center; } .step-label { font-weight: 600; padding: 8px 0px; } .eb-text { font-size: 18px; text-align: center; } .eb-header-image { width: 268px; height: 140px; object-fit: contain; } .eb-apply-box { width: 125px; height: 100px; border-radius: 3px; box-shadow: 3px 3px 0 0 rgba(147, 158, 169, 0.3); background-color: #f2f3f5; text-align: center; cursor: pointer; border-width: 0; } .eb-apply-box:focus { outline: 0; } .eb-apply-box-text { padding: 20px 0; text-align: center; font-size: 20px; font-weight: 500; } .eb .form-submit { margin: 0; padding: 0; margin-top: 35px; margin-bottom: 35px; } .eb .certify { margin: 0; padding: 0; margin-top: 25px; } .eb-more-options { font-size: 22px; font-weight: bold; padding-top: 40px; margin-top: 40px; border-top: 2px solid #eaedf0; } .eb-percentage { font-size: 30px; text-align: center; color: #27b696; } .eb-margin-one-button { margin-left: auto; margin-right: auto; } .eb-margin-two-button { margin: 0 auto; text-align: center; } .eb-header-chcek { height: 55px; width: 55px; margin-left: auto !important; margin-right: auto !important; margin-bottom: 5px; } .understood-image { height: 66px; width: 65px; margin-left: auto !important; margin-right: auto !important; margin-top: 5px; } .eb-add-another:hover { box-shadow: 3px 3px 0px 0px #3D4955 !important; } .you-have-added { font-size: 18px; font-weight: bold; } .title-text { color: #27b696; text-align: center; font-size: 46px; margin-right: auto; margin-left: auto; } .bene-message { font-size: 30px; } @Media (min-width: 769px) { .one-btn-margin { margin-left: 0 !important; } } @Media (max-width: 768px) { .eb-apply-box-text { font-size: 16px; } .you-have-added { font-size: 18px; } .apply-text { font-size: 14px; } .eb-more-options { font-size: 16px; font-weight: normal; padding-top: 40px; margin-top: 40px; border-top: 2px solid #eaedf0; } .m-btm-25 > p { font-size: 14px; } .bene-message { font-size: 18px; } .title-text { color: #27b696; text-align: center; font-size: 22px; line-height: 25px; margin-left: 20%; font-weight: 500; width: 58%; } .eb-home-page { margin-left: 0 !important; margin-top: 10px; } } .eb-hero-image { margin: 0 auto; } .eb-apply-box { width: -webkit-calc(99.99% * 1/2 - (20px - 20px * 1/2)) !important; width: calc(99.99% * 1/2 - (20px - 20px * 1/2)) !important; } .dependents-box { width: -webkit-calc(99.99% * 1/3 - (20px - 20px * 1/3)) !important; width: calc(99.99% * 1/3 - (20px - 20px * 1/3)) !important; } .dependents-box { width: 125px; height: 100px; border-radius: 3px; box-shadow: 3px 3px 0 0 rgba(147, 158, 169, 0.3); background-color: #f2f3f5; text-align: center; cursor: pointer; border-width: 0; } .dependents-box:focus { outline: 0; } .eb-top-check-mark { width: 33px; } .step-label { padding-left: 10px; } .l-content-holder.c-comp__displaylist .statement-selector > header { font-size: 30px; line-height: 38px; margin-bottom: 0; } section.all-statements-list > div > h3 { font-family: Macha-Book; font-size: 30px; line-height: 38px; } /*Added for PIP and Other modules done with same project*/ @media (max-width: 768px) { .button-bar-wrap { text-align: center; } .back-button-wrap { display: none; float: none; } .back-button-wrap-mobile { display: block !important; margin-top: 20px; } .ext-next-step-button { padding-top: 10px !important; } .next-step-button-wrap { float: none !important; } } @media (min-width: 768px) { .xxx-large { font-size: 46px !important; } .x-large { font-size: 30px !important; font-weight: bold !important; } } /*Common Margin and Padding Style*/ .margin-top-30 { margin-top: 30px; } .margin-top-bottom-10 { margin-top: 10px; margin-bottom: 10px; } .margin-top-bottom-30 { margin-top: 30px; margin-bottom: 30px; } .margin-left-10 { margin-left: 10px; } .margin-right-10 { margin-right: 10px; } .margin-10 { margin: 10px; } .text-center { text-align: center; } /*Font Size Style*/ .xxx-large { font-size: 23px; } .xx-large { font-size: 20px; } .x-large { font-size: 18px; font-weight: bold; } .large { font-size: 17px; } .medium { font-size: 16px; } .normal { font-size: 15px !important; } .small { font-size: 14px; } .x-small { font-size: 13px; } .bold { font-weight: bold; } /*Color Style*/ .green { color: #27b696 !important; } .red { color: red !important; } .gray { color: rgba(95, 110, 124, 0.81) !important; } .light-black { color: #142435 !important; } /*header Style*/ .step-header-wrap { display: inline-flex; } .form-wrapper { max-width: 600px; margin: auto; } .line { height: 1px; object-fit: contain; border: solid 1px #dadee3; } .progress-bar { height: 7px; background-color: #57d2ff; } .button-bar-wrapper { font-family: Macha; font-stretch: normal; font-style: normal; letter-spacing: normal; line-height: normal; } .back-button-wrap { float: left; padding-top: 12px; } .back-button-wrap-mobile { display: none; } .ext-next-step-button { padding-top: 70px; } .back-button { object-fit: contain; font-size: 16px; font-weight: bold; line-height: 1.5; color: #00a4da; background-color: transparent; border: none; cursor: pointer; } .next-step-button-wrap { float: right; } .next-step-button { border-radius: 100px; box-shadow: 3px 3px 0 0 rgba(20, 36, 53, 0.2); background-color: #14b8ee; font-size: 13px; font-weight: bold; letter-spacing: 1.04px; text-align: center; color: #ffffff; display: inline-block; padding: 17px 26px 15px 26px; cursor: pointer; } .secondry-step-button { border-radius: 100px; box-shadow: 3px 3px 0 0 rgba(147, 158, 169, 0.3); background-color: #f2f3f5; color: #94a0ab; } #player-Insurance-dependent-container .c-form-radio > input[type=radio]:checked ~ .c-form-custom-ind:before, .c-form-radio-inline > input[type=radio]:checked ~ .c-form-custom-ind:before { background: #00a4da; } .back-text { width: 100%; margin-top: 20px; text-align: center; } .add-another { font-size: 14px; color: #5f6e7c; letter-spacing: 2px; margin-bottom: 5px; margin-top: 20px; } .election-section { margin-top: 20px; text-align: left; } .election-line { border: solid 0.5px #dadee3; margin-top: 15px; } #plan-intro ol.numbered-list > li { color: rgba(95, 110, 124, 0.81) !important; } /*COMMUNICATION PREFERENCES*/ .comm-pref-legal-text { margin-top: 15px; padding-top: 15px; border-top: 1px solid #dadee3; } .comm-pref-row .c-form-group label { display: inline-block; } .l-col9 .comm-pref-row .c-form-group.l-col8 { padding-top: 15px; } .l-col9 .comm-pref-row .c-form-group.l-col7 { padding-top: 15px; } .l-col9 .comm-pref-row { border-top: 1px solid #dadee3; } .save-popup .modal-content-small { margin-left: 0px; margin-right: 0px; margin-top: 0px; width: 100%; background-color: #1b3045; } .save-popup.modal { width: 250px; height: 50px; top: calc(90% - 50px); left: calc(50% - 125px); background-color: transparent; height: 150%; padding: 20px; overflow: hidden; } .save-popup h4 { margin-bottom: 0px; color: white; letter-spacing: 0.2px; } .save-popup .l-content-holder { padding-top: 25px; } label.c-form-checkbox.form-checkbox--disabled span.c-form-custom-ind { background: #dadee3 !important; } label.c-form-checkbox.form-checkbox--disabled .form-simple-text { /*color:#dadee3;*/ color: #7e8b96; } p.comm-pref-text { font-size: 14px; font-weight: normal; font-stretch: normal; font-style: normal; line-height: 1.43; letter-spacing: normal; color: #1b3045; } p.comm-pref-main-text { font-size: 16px; font-weight: normal; font-stretch: normal; font-style: normal; line-height: 1.63; letter-spacing: normal; color: #1b3045; } p.icon-text { font-size: 14px; font-weight: normal; font-stretch: normal; font-style: normal; line-height: 1.43; letter-spacing: normal; color: #5f6e7c; } p.comm-pref-modal-text { font-size: 14px; font-weight: bold; font-stretch: normal; font-style: normal; line-height: 1.14; letter-spacing: 2px; text-align: center; color: #5f6e7c; } .comm-pref-add-email-text { font-stretch: normal; font-style: normal; line-height: normal; letter-spacing: 0.22px; color: #1b3045; padding-top: 0; font-weight: 900; } .contact-modal-info-text { font-size: 20px !important; font-weight: 500; font-stretch: normal; font-style: normal; line-height: 1.2 !important; letter-spacing: 0.22px; color: #1b3045 !important; padding-top: 0px !important; font-family: macha-medium; } } .contact-modal-top-text { font-size: 14px; font-weight: bold; font-family: "Macha-Book", sans-serif; line-height: 1.14; letter-spacing: 2px; color: #5f6e7c; text-transform: uppercase; } .contact-modal-label-text { font-size: 17px; font-weight: 500; font-stretch: normal; font-style: normal; line-height: 1.41; letter-spacing: normal; color: rgba(95, 110, 124, 0.81); } .contact-modal-text-labels { font-family: "Macha-Medium", sans-serif; font-size: 20px; font-weight: 500; letter-spacing: 0.4px; color: #1c2f45; } .contact-modal-missing-item { font-family: "Macha-Book", sans-serif; font-size: 16px; font-weight: 500; line-height: 1.5; letter-spacing: normal; color: rgba(95, 110, 124, 0.81); font-family: "Macha-Book", sans-serif; display: flex; } .contact-modal-missing-item i { font-size: 24px; color: #27b696; margin-right: 8px; } .contact-modal-button-1 { float: right; } .contact-modal-button-2 { float: left; } @media (max-width: 699px) { .comm-pref-legal-text { border-top: none; } } @media (max-width: 768px) { .contact-modal-button-1 { float: none; } .contact-modal-button-2 { float: none; } } /* Current Investment Mix control overrides*/ table.current-investments-table tr, table.current-investments-table tr th, table.current-investments-table tr td { border-right: none !important; border-left: none !important; } .current-investments-header { text-align: center; } .positive-ytd { color: #00ba98; font-weight: 700; } .negative-ytd { color: #5f6f7f; font-weight: 700; } div label.contrib-grey-heading { font-size: 15px; text-transform: uppercase; letter-spacing: 2.0px; color: #5f6f7f; font-family: "Macha-Bold",sans-serif; margin: 0 0 10px 0; } .contrib-grey-heading { font-size: 12px; text-transform: uppercase; letter-spacing: 2.0px; color: #5f6f7f; font-family: "Macha-Bold",sans-serif; margin: 0 0 10px 0; } label.contrib-alignment { text-align: left; } div.contrib-alignment { text-align: left; } #contribution401k-form div.contrib-alignment { text-align: left; } span.contrib-alignment { text-align: left; } @Media (max-width: 699px) { div.contrib-alignment { text-align: center; } #contribution401k-form div.contrib-alignment { text-align: center; } span.contrib-alignment { text-align: center; } div.contrib-mobile-padding { padding: 20px !important; } } .apply-invest-options .c-tile-selector__header { font-size: 18px; line-height: 20px; font-weight: 500; } .apply-invest-options .c-tile-selector__item { padding: 30px 10px; } .current-mix-review-table { margin-right: 0px; padding-right: 20px; } .new-mix-review-table { position: relative; padding-left: 41px; } .new-mix-review-table .fa-long-arrow-right:before { position: absolute; left: 0; top: 50%; color: #27b696; } .new-mix-review-table .fa-long-arrow-down:before { display: none; } .current-mix-review-table .table-holder { background-color: rgba(243, 245, 246, 0.5); padding: 20px; padding-top: 40px; height: 100%; } .new-mix-review-table .table-holder { border: 1px solid #dadee3; box-shadow: 4px 5px #dadee3; padding: 20px; height: 100% } .new-mix-review-table h3 { text-align: left; } .selected-options-text { font-size: 18px; line-height: 24px; margin-bottom: 30px; margin-top: 40px; } .selected-options-text .fa-check { color: #27b696; } .review-mix-selected-options-text { display: flex; text-align: left; } .review-mix-save-button { align-items: flex-end !important; display: flex; flex-direction: column; text-align: right; } .review-mix-save-button a { align-self: flex-end; margin-bottom: 5px; } @Media (max-width: 699px) { .current-mix-review-table { margin-right: 0px; padding-right: 0px; padding-bottom: 20px; } .new-mix-review-table { position: relative; padding-left: 0px; padding-top: 36px; } .new-mix-review-table .fa-long-arrow-right:before { /*position:absolute; left: 50%; top: 0; color: #27b696;*/ display: none; } .new-mix-review-table .fa-long-arrow-down:before { display: block; position: absolute; left: 50%; top: 0; color: #27b696; } } .new-mix-review-table .table-holder.confirm-page { border: none; box-shadow: none; padding-left: 30%; padding-right: 30%; } @Media (max-width: 699px) { .new-mix-review-table .table-holder.confirm-page { border: none; box-shadow: none; padding-left: 10%; padding-right: 10%; } } .invest-confirm-image { width: 75px; height: 75px; } @Media (max-width: 699px) { .current-investments-header.c-callout--iconheader__header { font-size: 24px; margin-bottom: 0px; } .current-investments-header.c-callout--iconheader__header + .u-text-center.selected-options-text { margin-top: 20px; } } .c-callout--iconheader__header.review-investments-mix { margin-bottom: 60px; } span.transfer-review-fund-font { font-size: 18px; line-height: 24px; display: block; margin-bottom: 10px; } span.transfer-review-amount-font { font-size: 22px; line-height: 24px; font-weight: 900; display: block; } .form-nav-info-text { width: 60%; } @Media (max-width: 699px) { .form-nav-info-text { width: 100%; } } /*Account Settings*/ #emailSuggestionModal .modal-content { height: auto; width: 70%; margin: auto; margin-top: 15%; padding-bottom: 75px; text-align: center; } #emailSuggestionModal a { margin-left: 75px; } #emailSuggestionModal .btn-container { margin-top: 20px; } #emailSuggestionModal .grey-block { font-family: "Macha-Bold", sans-serif; font-size: 16px; text-transform: uppercase; letter-spacing: 1.5px; margin-bottom: 15px; color: #5f6f7f; } #emailSuggestionModal .green-headline { font-family: "Macha-Book", sans-serif; color: #00ba98; } .green-headline { font-family: "Macha-Book", sans-serif; color: #00ba98; } #mobile-search-holder { height: 57px; display: none; } #mobile-search-bar { display: none; z-index: 1000; position: fixed; width: 100%; top: 60px; z-index: 10; } .mobile-search-input { height: 100%; width: 101%; padding: 15px; font-size: 18px; line-height: 18px; } #mobile-alerts { display: none; } #mobile-extras { display: none; } #mobile-logout { display: none; } @Media (max-width: 699px) { #mobile-extras { display: block; } #mobile-logout { display: block; } } .account-settings-pwd-check { padding-left: 20%; padding-right: 20%; } @Media (max-width: 699px) { .account-settings-pwd-check { padding-left: 10%; padding-right: 10%; } } .twofactor-optin-back { font-size: 13px; position: absolute; top: 20px; left: 30px; font-family: "Macha-Medium", sans-serif; font-weight: bold; letter-spacing: 1.04px; } .twofactor-optin-header { font-size: 14px; font-weight: bold; font-stretch: normal; font-style: normal; line-height: 1.14; letter-spacing: 2px; text-align: center; color: #687582; } .two-factor-opt-in-header { padding-top: 25px !important; } @Media (max-width: 699px) { .two-factor-opt-in-header { padding-top: 35px !important; } .l-content-holder.two-factor-form { margin-top: 25px; } #twoFactorStep1Form h3 { text-align: left; } .two-factor-success-body { text-align: center; } .two-factor-success-image { display: block; margin-left: auto !important; margin-right: auto !important; } .two-factor-opt-in-header .c-hero__header { font-size: 24px; } .two-factor-form .c-form h3 { font-size: 22px; } } .comm-pref-switch-text { margin-top: 20px; width: 170% } @Media (max-width: 699px) { .comm-pref-switch-text { margin-top: 20px; width: 100%; padding-left: 33px; } .comm-pref-mail-col { padding-top: 20px; } .comm-pref-row.benefit-row { border-top: none; } } #search-results header { font-size: 18px; line-height: 24px; } #search-results .l-content-holder { padding-top: 30px; } #search-results h3 { padding: 10px; } section.search-results header.header--section { font-size: 18px; line-height: 24px; border-top: none; margin-bottom: 10px; padding-top: 0; } .search-results .l-content-holder { padding-top: 0; } .search-results .l-content-holder { padding-top: 0; } @media only screen and (max-width: 699px) { .search-results .l-content-holder p { text-align: left !important; } .search-results .l-content-holder header { text-align: left !important; } } #search-results svg g { stroke: #808080; } #search-results .c-header-search__but { top: 46px; right: 12px; } @Media (max-width: 699px) { #search-results .c-header-search__but { top: 92px; right: 8px; } } .fund_activity_content { clear: both; border-bottom: solid 1px #dadee3; border-top: solid 1px #dadee3; overflow: hidden; } .l-content-holder a { cursor: pointer; } .l-content-holder img { margin: 2px; vertical-align: middle; display: inline-block; } .l-content-holder .right { float: right !important; } @media only screen and (max-width: 699px) { .fund_activity_row_header { display: none !important; } .fund_activity_row_header .fund_name, .fund_activity_row_content .fund_name { width: 65% !important; padding-left: 0px !important; } .fund_activity_header .header_link { float: right !important; margin-right: 20px !important; } .fund_activity_edit.distribution_edit { float: right !important; } } .fund_activity_row_header { display: block; line-height: 24px; text-transform: uppercase; letter-spacing: 1.0px; font-family: "Macha-Book", sans-serif; color: #132c45; font-weight: normal; font-size: 16px; } .fund_activity_row_content { clear: both; line-height: 24px; border-top: solid 2px #dadee3; font-size: 16px; font-family: "Macha-book"; color: #1b3045; } .fund_activity_row_header .fund_name, .fund_activity_row_content .fund_name { width: 28%; float: left; padding-left: 25px; } .fund_activity_row_header .price, .fund_activity_row_content .price, .fund_activity_row_header .balance, .fund_activity_row_content .balance, .fund_activity_row_header .change, .fund_activity_row_content .change { width: 16%; float: left; padding-left: 25px; } .fund_activity_row_header .ratio, .fund_activity_row_content .ratio, .fund_activity_row_header .qty, .fund_activity_row_content .qty { width: 12%; float: left; padding-left: 25px; } .fund_activity_row_header .fund_name { float: left; background: #f2f3f5; min-height: 65px; padding-left: 5px; padding-right: 5px; } .fund_activity_row_header .qty, .fund_activity_row_header .price, .fund_activity_row_header .balance, .fund_activity_row_header .change, .fund_activity_row_header .ratio { background: #f2f3f5; min-height: 65px; padding-left: 5px; padding-right: 5px; justify-content: right; text-align: right; } .fund_activity_row_content .fund_name { float: left; color: #000000; min-height: 65px; padding-left: 5px; padding-right: 5px; } .fund_activity_row_content .qty, .fund_activity_row_content .price, .fund_activity_row_content .balance, .fund_activity_row_content .change, .fund_activity_row_content .ratio { color: #000000; min-height: 65px; padding-left: 5px; padding-right: 5px; justify-content: right; text-align: right; } .contribution-history-details-container { display: grid; } .l-content-holder img.hidden-desktop { display: none; } .hidden { display: none !important; } .contribution_details_row_header { line-height: 24px; text-transform: uppercase; letter-spacing: 1.0px; font-family: "Macha-Medium", sans-serif; color: #939eae; font-weight: normal; font-size: 14px; } .contribution_details_row_content { line-height: 24px; } .l-content-holder img.hidden-mobile { display: inline-block; } @media only screen and (max-width: 699px) { .l-content-holder img.hidden-desktop { display: inline-block; } .contribution_details_row_header .amount { background: #f2f3f5; min-height: 48px; padding-left: 5px; padding-right: 5px; justify-content: right; text-align: right; align-content: center; display: grid; float: left; border-top: solid 2px #dadee3; } .contribution_details_row_header .source, .contribution_details_row_header .date { background: #f2f3f5; min-height: 48px; padding-left: 5px; padding-right: 5px; text-align: left; align-content: center; display: grid; float: left; border-top: solid 2px #dadee3; } .contribution_details_row_content .amount { color: #000000; min-height: 48px; padding-left: 5px; padding-right: 5px; text-align: right; align-content: center; display: grid; float: left; border-top: solid 2px #dadee3; } .contribution_details_row_content .source, .contribution_details_row_content .date { color: #000000; min-height: 48px; padding-left: 5px; padding-right: 5px; text-align: left; align-content: center; display: grid; float: left; border-top: solid 2px #dadee3; } .contribution_details_row_content:last-child { border-bottom: solid 2px #dadee3; } .contribution_details_row_header .date, .contribution_details_row_content .date, .contribution_details_row_header .amount, .contribution_details_row_content .amount { width: 25%; } .contribution_details_row_header .source, .contribution_details_row_content .source { width: 50%; } .l-content-holder img.hidden-mobile { display: none; } } .group-dropdown-label { font-size: 20px; font-weight: 500; font-stretch: normal; font-style: normal; line-height: 1.6; letter-spacing: -0.14px; color: #939ea9; } .topic-infographic { display: flex; flex-direction: column; } .topic-infographic .c-infographic { flex-direction: column; } .topic-infographic .c-infographic__item .c-infographic__item-wrapper { text-align: left; display: flex; flex-direction: row; align-items: center; } .topic-infographic .c-infographic__item + .c-infographic__item { margin-left: 0; margin-top: 0; } .topic-infographic .c-infographic__item:before { content: ''; display: block; left: 130px; top: -44px; width: 12px; height: 19px; background: url(/Assets/images/controls/progress-arrow.svg) 50% 100% no-repeat; transform: rotate(90deg); } .topic-infographic .c-infographic__icon { margin: 0; } .topic-infographic .infographic-content { padding: 10px; margin-left: 30px; height: 186px; display: flex; align-items: center; } .topic-infographic .c-infographic__icon { background: none; } .topic-infographic .c-infographic__item { padding: 10px 20px 10px 20px; } .topic-infographic .infographic-body { border: 2px solid #eaedf0; border-top: none; } .topic-infographic .topic-header { background-color: #25aa8d; margin-bottom: 0; padding: 20px; color: white; font-weight: bold; font-size: 22px; } .topic-infographic .c-infographic__icon img { height: 133px; width: 133px; } .infographic-img-container { padding-left: 10px; } @media only screen and (max-width: 699px) { .topic-infographic .c-infographic__item .c-infographic__item-wrapper { flex-direction: column; } .topic-infographic .infographic-content { height: 100%; margin-left: 0; } .topic-infographic .c-infographic__item:before { display: none; } .topic-infographic .c-infographic__navdots { bottom: 10px; } .topic-infographic .c-infographic__item .c-infographic__item-wrapper { text-align: center; } .infographic-img-container { padding-left: 0; } .topic-infographic .c-infographic__next { right: 5px; } .topic-infographic .c-infographic__prev { left: 5px; } } .mostViewed { display: grid; } .mostViewed .container { padding: 20px 0px 20px 0px; border-radius: 4px; border: #C6CDD4 1px solid; margin-top: 50px; position: relative; margin-left: auto; margin-right: auto; max-width: 1054px; background-color: #fff; } .mostViewed h3 { font-family: Macha-Book, sans-serif; font-weight: 700; line-height: 25px; font-size: 20px; padding-left: 24px; } .mostViewed div { font-family: Macha-book; font-size: 16px; font-weight: 400; line-height: 24px; letter-spacing: 0px; text-align: left; } .mostViewed .documentItem { width: 45%; float: left; margin-left: 24px; margin-right: 24px; padding-top: 10px; padding-bottom: 10px; display: grid; } .mostViewed .documentItem:nth-child(1n+3 of .documentItem) { border-top: solid 1px #DADEE3; } .mostViewed .documentItem label { grid-column: 1; display: grid; align-self: center; } .mostViewed .documentItem p { grid-column: 2; justify-self: right; } .mostViewed .documentItem span { color: #7F8B96; text-transform: uppercase; font-style: normal; font-weight: 500; font-size: 12px; line-height: 16px; letter-spacing: 0.02em; } .mostViewed .ui-btn { font-family: Macha-book; font-size: 12px; font-weight: 700; line-height: 12px; letter-spacing: 0px; text-align: center; line-height: 1em; text-align: center; vertical-align: middle; } .mostViewed .ui-btn--blue { background-color: #fff; color: #0583AD; letter-spacing: 1.03px; border: 3px solid #eaedf0; box-shadow: none; padding: 10px 25px 10px 25px; font-family: 'Macha-medium'; } .mostViewed .ui-btn--blue:hover { color: #fff; background-color: #2B9ECB; border: 3px solid #2B9ECB; box-shadow: none; } .mostViewed .ui-btn--green { background-color: #fff; color: #1B997D; letter-spacing: 1.03px; border: 3px solid #eaedf0; box-shadow: none; padding: 10px 25px 10px 25px; font-family: 'Macha-medium'; } .mostViewed .ui-btn--green:hover { color: #fff; background-color: #1B997D; border: 3px solid #1B997D; box-shadow: none; } @media only screen and (max-width: 1094px) { .mostViewed .container { margin-left: 20px; margin-right: 20px; } } @media only screen and (max-width: 999px) { .mostViewed div { font-family: Macha-book; font-style: normal; font-weight: 500; font-size: 18px; line-height: 24px; } .mostViewed .documentItem { width: 95%; float: unset; padding-top: 12px; padding-bottom: 12px; } .mostViewed .documentItem:nth-child(1n+2 of .documentItem) { border-top: solid 1px #DADEE3; } } @media only screen and (max-width: 699px) { .mostViewed .container { margin-left: 20px; margin-right: 20px; padding-bottom: 0px; } .mostViewed h3 { font-style: normal; font-weight: 700; font-size: 25px; line-height: 32px; } .mostViewed div { font-family: Macha-book; font-style: normal; font-weight: 500; font-size: 18px; line-height: 24px; } /* .mostViewed label { display: block; padding-bottom: 10px; }*/ .mostViewed .documentItem { width: 90%; float: unset; margin-left: 24px; margin-right: 24px; padding-top: 20px; padding-bottom: 20px; display: block; } .mostViewed .documentItem span { text-align: center; width: 110%; display: block; padding-top: 5px; padding-bottom: 5px; } .mostViewed .ui-btn { width: 110%; } .mostViewed .ui-btn:first-of-type { margin-top: 15px; } .mostViewed .documentItem p { width: 90%; float: unset; } } .documentGroup { margin-top: 50px; position: relative; margin-left: auto; margin-right: auto; max-width: 1054px; } .documentGroup .l-columns--grid { min-height: 67px; } .documentGroup .c-comp__displaylist-content:last-of-type { border-bottom: 0; } .documentGroup .container { border-radius: 4px; border: #C6CDD4 1px solid; margin-top: 50px; line-height: normal; background-color: #fff; } .documentGroup .ui-btn { font-family: Macha-book; font-size: 12px; font-weight: 700; line-height: 12px; letter-spacing: 0px; text-align: center; line-height: 1em; text-align: center; vertical-align: middle; min-width: 160px; } .documentGroup .mobile-show { display: none; } .documentGroup header { background: #0583AD; color: #fff; padding-top: 10px; padding-bottom: 10px; margin: 0px; border-top-left-radius: 4px; border-top-right-radius: 4px; display: flex; align-content: center; } .documentGroup header h3 { font-family: Macha-book; font-style: normal; font-weight: 500; font-size: 25px; line-height: 32px; margin-bottom: 0px; padding-left: 24px; } .documentGroup header span { font-family: Macha-book; font-style: normal; font-weight: 400; font-size: 14px; line-height: 21px; padding-right: 24px; right: 0px; position: absolute; align-self: center; } .documentGroup header.subheader { padding: 15px 24px 14px 24px; background-color: #DADEE3; font-family: "Macha-medium", sans-serif; color: #1B3045; text-transform: uppercase; font-style: normal; font-weight: 500; font-size: 12px; line-height: 16px; letter-spacing: 0.02em; border-radius: 0px; } .documentGroup div.description { font-family: 'Macha-book'; font-style: normal; font-weight: 400; font-size: 14px; line-height: 21px; padding: 0px !important; display: grid; align-items: center; } .documentGroup .ui-btn--blue { background-color: #fff; color: #0583AD; letter-spacing: 1.03px; border: 3px solid #eaedf0; box-shadow: none; padding: 10px 25px 10px 25px; font-family: 'Macha-medium'; } .documentGroup .ui-btn--blue:hover { color: #fff; background-color: #2B9ECB; border: 3px solid #2B9ECB; box-shadow: none; letter-spacing: 1.03px; } .documentGroup .ui-btn--green { background-color: #fff; color: #1B997D; letter-spacing: 1.03px; border: 3px solid #eaedf0; box-shadow: none; padding: 10px 25px 10px 25px; font-family: 'Macha-medium'; } .documentGroup .ui-btn--green:hover { color: #fff; background-color: #1B997D; border: 3px solid #1B997D; box-shadow: none; letter-spacing: 1.03px; } .documentGroup .buttonContainer { display: flex; align-items: center; justify-content: right; margin-bottom: 12px; } .documentGroup i { font-family: 'Macha-medium'; font-style: normal; font-weight: 500; font-size: 12px; line-height: 16px; letter-spacing: 0.02em; text-transform: uppercase; color: #7F8B96; padding-right: 5px; } .documentGroup i.no-button { width: 180px; } .documentGroup .inner-link { display: grid; width: 75%; align-items: center; } .documentGroup .inner-description { grid-column: 1; padding-right: 10px; } .documentGroup .inner-button { grid-column: 2; max-width: 180px; justify-self: right; align-self: center; } .documentGroup .c-documents__documents:before { content: ''; padding-left: 22px; padding-top: 2px; background-image: url("/Assets/images/icons/documents/Icon-Documents.svg"); background-position: center; background-size: contain; background-repeat: no-repeat; font-size: 16px; margin-right: 5px; } .documentGroup .c-documents__forms:before { content: ''; padding-left: 22px; padding-top: 2px; background-image: url("/Assets/images/icons/documents/Icon-Forms.svg"); background-position: center; background-size: contain; background-repeat: no-repeat; font-size: 16px; margin-right: 5px; } .documentGroup .description-container { display: grid; margin-right: 0px !important; padding: 20px 0px 20px 0px; } .documentGroup .flag-row { height: 40px; padding-top: 0px !important; padding-bottom: 0px !important; } .documentGroup .desc-link-row { height: 40px; padding-top: 0px !important; padding-bottom: 0px !important; } .documentGroup .desc-link-row a { font-weight: 500; display: block; line-height: 18px; } .documentGroup .flagMessage { font-family: 'Macha-medium'; font-size: 13px; font-weight: 500; font-style: normal; font-stretch: normal; color: #FF6C42; display: block; padding-top: 5px; line-height: 18px; } .documentGroup .flagMessage:before { content: ''; padding-left: 22px; padding-top: 2px; background: url(/Assets/images/controls/c-message/flag.svg) no-repeat; } .documentGroup .download-button { padding: 0px !important; margin: 0px !important; position: absolute; right: 25px; align-self: center; align-items: center; display: flex; } @media screen and (max-width:1050px) { .documentGroup i { justify-self: center; } .documentGroup .mobile-show { display: inherit; } .documentGroup .mobile-hidden { display: none; } .documentGroup .inner-link { width: 100%; } .documentGroup .inner-description { grid-column: unset; margin-bottom: 10px; } .documentGroup .inner-button { grid-column: unset; max-width: unset; justify-self: unset; } .documentGroup .download-button { right: unset; position: unset; display: grid; } .documentGroup .download-button i { padding-top: 10px; padding-bottom: 10px; text-align: center; width: 100%; } .documentGroup .download-button i.no-button { padding-bottom: 0px; } .documentGroup .download-button a { justify-self: center; width: 100%; } } @media screen and (min-width:700px) and (max-width:925px) { .documentGroup .l-columns.l-columns--grid > .l-col3 { margin-top: 0px; } .documentGroup .l-columns.l-columns--grid > .l-col6 { margin-top: 0px; } } @media only screen and (max-width: 1094px) { .documentGroup { margin-left: 20px; margin-right: 20px; } } @media only screen and (max-width: 999px) { .documentGroup div.description { margin-top: 0px; } .documentGroup section { display: grid; align-items: center; margin-bottom: 10px; } .documentGroup section i { display: grid; justify-content: center; } .documentGroup header { display: grid; } .documentGroup header span { padding-left: 24px; position: unset; } .documentGroup header.subheader { display: flex; } .documentGroup .l-columns.l-columns--grid > .l-col3 { padding-bottom: 0px; } } .c-hero .c-hero__columns { line-height: 1.5em; } div.c-hero__columns__primary h1.c-hero__header-left { margin-top: 15px; text-align: left; margin-bottom: 5px; } div.c-hero.is-clone div.c-hero__columns__primary h1.c-hero__header-left { margin-bottom: 5px; padding-bottom: 15px; } .c-hero-column-image.mobile { display: none; } @media only screen and (min-width: 1051px) { .c-comp__displaylist-content .download-button i { text-align: right; } } @media only screen and (max-width: 775px) { .documentGroup .c-comp__displaylist-content div:last-of-type { padding-top: 0px; padding-bottom: 10px; } .documentGroup section { width: 100%; } .documentGroup section i { margin-top: 12px; } .documentGroup .flag-row { margin: 0px !important; height: auto !important; } .documentGroup .flagMessage { padding-bottom: 0px; margin-top: 0px; } .documentGroup .desc-link-row { margin: 0px !important; height: auto !important; } .documentGroup .description-container { padding: 0px 0px 20px 0px; } .documentGroup .description-container div:last-of-type { margin-bottom: 10px !important; } .documentGroup .buttonContainer { align-content: center; justify-content: center; width: 100%; } .documentGroup .download-button i { padding-top: 5px; } .documentGroup .buttonContainer i { margin-top: 8px; margin-bottom: 8px; } .documentGroup .l-columns.l-columns--grid > .l-col5 { -webkit-box-flex: 0; -webkit-flex: 0 0 auto; -ms-flex: 0 0 auto; flex: 0 0 auto; width: -webkit-calc(99.99% * 1 - (20px - 20px * 1)); width: calc(99.99% * 1 - (20px - 20px * 1)); } .documentGroup .l-columns.l-columns--grid > .l-col3 { -webkit-box-flex: 0; -webkit-flex: 0 0 auto; -ms-flex: 0 0 auto; flex: 0 0 auto; width: -webkit-calc(99.99% * 1 - (20px - 20px * 1)); width: calc(99.99% * 1 - (20px - 20px * 1)); margin-bottom: 10px; } .documentGroup .l-columns.l-columns--grid > .l-col4 { -webkit-box-flex: 0; -webkit-flex: 0 0 auto; -ms-flex: 0 0 auto; flex: 0 0 auto; width: -webkit-calc(99.99% * 1 - (20px - 20px * 1)); width: calc(99.99% * 1 - (20px - 20px * 1)); } .documentGroup .l-columns.l-columns--grid > .l-col6 { -webkit-box-flex: 0; -webkit-flex: 0 0 auto; -ms-flex: 0 0 auto; flex: 0 0 auto; width: -webkit-calc(99.6% * 1 - (20px - 20px * 1)); width: calc(99.99% * 1 - (20px - 20px * 1)); } .documentGroup .l-columns.l-columns--grid > .l-col9 { -webkit-box-flex: 0; -webkit-flex: 0 0 auto; -ms-flex: 0 0 auto; flex: 0 0 auto; width: -webkit-calc(99.6% * 1 - (20px - 20px * 1)); width: calc(99.99% * 1 - (20px - 20px * 1)); } .documentGroup .l-columns.l-columns--grid > .l-col3 .ui-btn:first-of-type { margin-top: 15px; } .documentGroup .l-columns.l-columns--grid > .l-col5 .ui-btn:first-of-type { margin-top: 15px; } .c-hero-overview-text { /*display:none;*/ } .c-hero-column-image { display: none; } .c-hero-column-image.mobile { display: block; } .c-hero-column-image.mobile img { width: 78px; height: 78px; } div.c-hero__columns__primary h1.c-hero__header-left { text-align: center; margin-bottom: 5px; } .documentGroup .description.mobile-no-buttons, .documentGroup .inner-description.mobile-no-buttons, .documentGroup .flagMessage.mobile-no-buttons { padding-bottom: 0px; margin-bottom: 0px; } } nav.c-page-subnav + .disability-sub-nav { margin-top: 5px; } .disability-sub-nav { background: #FFFFFF !important; } .disability-sub-nav p { color: #1B3045 !important; } .disability-sub-nav h2 { color: #1B997D; } .tp-column-1 { color: #FFFFFF; vertical-align: middle !important; background-color: #0F7D68 !important; width: 116px !important; border-top: 1px solid #dadee3; border-left: 1px solid #dadee3; border-bottom: 1px solid #dadee3; padding-top: 10px !important; padding-bottom: 10px !important; border-collapse: collapse; font-family: macha-bold; } .tp-column-1-alt { color: #FFFFFF; vertical-align: middle !important; background-color: #1B997D !important; width: 116px !important; border-top: 1px solid #dadee3; border-left: 1px solid #dadee3; border-right: 0px !important; border-bottom: 1px solid #dadee3; padding-top: 10px !important; padding-bottom: 10px !important; border-collapse: collapse; font-family: macha-bold; } .tp-column-2 { color: #2BA0A0 !important; background: #F8F9FA !important; width: 130px !important; font-size: 30px !important; vertical-align: middle !important; font-weight: 500 !important; line-height: 24px !important; border-top: 1px solid #dadee3; border-right: 1px solid #dadee3; border-bottom: 1px solid #dadee3; border-left: 0px !important; padding-top: 10px !important; padding-bottom: 10px !important; border-collapse: collapse; font-family: macha-bold; } .tp-column-3 { list-style: disc !important; border: 1px solid #dadee3 !important; padding-top: 10px !important; padding-bottom: 10px !important; vertical-align: middle !important; } .tp-column-3 ul { list-style: disc !important; font-weight: 400 !important; display: inline; } .tp-table-sub-text { font-size: 13px !important; font-style: normal !important; font-weight: 400 !important; color: #5F6E7C; padding-bottom: 10px; } .tp-column-subtext { color: #7F8B96 !important; font-size: 16px !important; font-style: normal !important; font-weight: 500 !important; } .tp-column-2-alt { color: #2BA0A0 !important; background: #FFFFFF !important; width: 130px !important; font-size: 30px !important; line-height: 24px !important; vertical-align: middle !important; font-weight: 500 !important; border: 1px solid #dadee3; padding-top: 10px !important; padding-bottom: 10px !important; font-family: macha-bold; } .topic-header__content ul { columns: 2; -webkit-columns: 2; -moz-columns: 2; line-height: 1.5em; } @media only screen and (max-width: 699px) { .topic-header__content ol { columns: 1 !important; } .topic-header__content ul { columns: 1 !important; } .l-content-holder.topic-header__content { padding-left: 0px; padding-right: 0px; } } .topic-header__content ol { list-style: none; counter-reset: topic-header-counter; columns: 2; -webkit-columns: 2; -moz-columns: 2; margin-left: 1rem; text-indent: -1rem; } .topic-header__content-sublist { list-style: none; counter-reset: topic-header-counter; columns: 1 !important; -webkit-columns: 1 !important; -moz-columns: 1 !important; margin-left: 20px; margin-top: 20px; } .topic-header__content-sublist-numeric { list-style: none; counter-reset: topic-header-counter; columns: 1 !important; -webkit-columns: 1 !important; -moz-columns: 1 !important; margin-left: 20px; margin-top: 20px; } .topic-header__content li { counter-increment: topic-header-counter; padding-right: 10px; line-height: 20px; } .topic-header__content-sublist li { margin-left: 1rem; text-indent: -1rem; line-height: 24px; padding-right: 5px; } .topic-header__content-sublist li::before { content: counter(topic-header-counter, lower-alpha) ". " !important; } .topic-header__content-sublist-numeric li::before { content: counter(topic-header-counter) !important; } .topic-header__content li:not(:last-child) { margin-bottom: 20px; } .topic-header__content ol li::before { content: counter(topic-header-counter) ". "; color: #1B997D; font-weight: bold; } .topic-header__content ol { columns: 2; -webkit-columns: 2; -moz-columns: 2; } .topic-header__content strong { font-family: Macha-bold; } .topic-header__subtitle { color: #1B997D; font-size: 20px; font-family: Macha-medium !important; margin-bottom: 24px !important; } .topic-header__br { margin-bottom: 20px !important; } .disability-sub-nav--extraflex { flex-basis: 75% !important; order: 1; } #club-trainer-contact header { color: #FFF; font-size: 20px; font-family: Macha-medium; font-weight: 700; line-height: 25px; background-color: #1B3045; display: flex; padding: 20px 0px; flex-direction: column; justify-content: center; align-items: center; border: 0; margin-bottom: 0px; } #club-trainer-contact .selectcontent { padding: 40px; border: 2px solid #1B3045; } #club-trainer-contact .extracontent { margin-top: 20px; } #club-trainer-contact .selectlabel { display: block; margin-bottom: 10px; color: #5F6E7C; font-size: 14px; font-family: Macha-medium; font-weight: 700; line-height: 16px; letter-spacing: 2px; text-transform: uppercase; } @media only screen and (max-width: 699px) { #club-trainer-contact .mobile-margin-20 { margin-top: 20px; } } .disability-med-records-info { grid-template-columns: repeat(3, minmax(0, 1fr)); } .disability-med-records-info section { margin-left: 10px; margin-right: 10px; } .disability-med-records-info header { color: #1B997D; text-align: center; font-size: 22px; font-family: Macha-medium; font-style: normal; font-weight: 500; line-height: 30px; } .disability-med-records-info .description-text { padding-top: 10px; color: #1B3045; font-size: 16px; font-family: Macha-book; font-style: normal; font-weight: 400; line-height: 24px; } @media only screen and (max-width: 699px) { .disability-med-records-info { grid-template-columns: unset; } .disability-med-records p { text-align: center; align-content: center; } .disability-med-records-info section { margin-left: 0px; margin-right: 0px; } .disability-med-records-info section:not(:first-child) { margin-top: 20px; } } .sub-header-title { color: #1B3045 !important; } .topic-header-one-col { columns: 1 !important; -webkit-columns: 1 !important; -moz-columns: 1 !important; } .topic-header-one-col { columns: 1 !important; -webkit-columns: 1 !important; -moz-columns: 1 !important; } .topic-header-one-col-ul { list-style: disc !important; margin-left: 25px; } .medical-records-qa-topic-sub-title { font-size: 20px; font-weight: bold; line-height: 25px; } .show-hide__applicationProcess { font-size: 22px !important; color: #1B3045 !important; font-weight: normal; text-transform: none !important; } .show-hide__applicationProcess--right { font-size: 14px !important; font-style: normal !important; font-weight: 700 !important; line-height: 16px !important; letter-spacing: 2px !important; text-transform: uppercase !important; color: #939EA9; float: right; margin-top: 5px; } .medical-evaluation { line-height: 1.5em; } .medical-evaluation img { transform: scale(0.96); } .medical-evaluation.l-content-holder img { margin: 0px; } .medical-evaluation div.c-infographic__icon { max-height: 160px; background: inherit; max-width: 195px !important; overflow: inherit; } .medical-evaluation header { border-top: 0px !important; text-align: center !important; font-family: Macha-book !important; line-height: 28px !important; } @media only screen and (max-width: 699px) { .medical-standard { } .medical-evaluation div.c-infographic__icon { max-height: 168px; } .medical-standard__header { font-size: 20px !important; width: 90%; margin-left: auto; margin-right: auto; } .medical-standard__leftwing { transform: scale(0.9) translate(-15px,5px) !important; } .medical-standard__rightwing { transform: scale(0.9) translate(15px,5px) !important; } .medical-standard__content { width: 90%; margin-left: auto; margin-right: auto; } .medical-standard-item { text-align: center; } .medical-standard-item__icon { float: none !important; text-align: center; } } .medical-standard { max-width: 796px; margin-left: auto; margin-right: auto; } .medical-standard__header { position: relative; background: #25AA8D; text-align: center; padding: 60px 80px 35px 80px; font-size: 40px; font-style: normal; font-weight: 400; color: #FFF; } .medical-standard__leftwing { float: left; transform: translate(-37px,15px); } .medical-standard__rightwing { float: right; transform: translate(37px,15px); } .medical-standard__header hr { color: #76F4D8; border-color: #76F4D8; background-color: #76F4D8; width: 67px; } .medical-standard__content { border-left: 2px solid !important; border-right: 2px solid !important; border-bottom: 2px solid !important; border-color: #C6CDD4 !important; padding: 48px 24px 48px 24px !important; } .medical-standard__content h4 { font-size: 18px; font-style: normal; font-weight: 400; line-height: 26px; text-align: center; font-family: Macha-book; } .medical-standard-item { padding-top: 40px; } .medical-standard-item__icon { float: left; padding-right: 20px; } .neurocognitive-payments { padding-top: 0px; padding-bottom: 0px; display: flex; flex-flow: row wrap; justify-content: space-between; } @media only screen and (max-width: 699px) { .neurocognitive-payments { flex-direction: column; padding-bottom: 0px; } .neurocognitive-payments__column { width: 90% !important; } } .neurocognitive-payments__column { float: left; width: 50%; } .neurocognitive-payments__column:after { content: ""; display: table; clear: both; padding-bottom: 40px; } .neurocognitive-plan { clear: both; background-color: #F1F2F2; padding: 20px; } .neurocognitive-plan__icon { float: left; padding-right: 10px; vertical-align: top; text-align: center; transform: scale(1.3); } .neurocognitive-plan span { color: #0583AD; font-size: 20px; font-style: normal; font-weight: 500; vertical-align: top; } .neurocognitive-plan span:before { content: ''; background: url("/Assets/images/icons/info-icon-alt.svg") no-repeat; background-position-x: 1px; background-position-y: -2px; padding-left: 30px; vertical-align: bottom; height: 22px; display: inline-block; } .neurocognitive-plan__description { padding-top: 5px; line-height: 24px; overflow: hidden; margin-left: 30px; } .ready-to-apply { text-align: center; width: 100%; } .ready-to-apply h2 { color: #1B3045; font-family: Macha-book; font-size: 30px; font-style: normal; font-weight: 400; line-height: 38px; /* 126.667% */ } .ready-to-apply.show-divider { border-top: 2px solid #DADEE3; padding-top: 40px; } .ready-to-apply-button { color: #FFF; text-align: center; font-family: Macha-medium !important; font-size: 12.957px !important; font-style: normal !important; font-weight: 700 !important; line-height: normal !important; letter-spacing: 1px !important; } @media only screen and (max-width: 699px) { .show-hide__applicationProcess--right { float: left; } } .disability-sub-nav-container { display: flex; flex-flow: row wrap; justify-content: space-between; } .disability-sub-nav-container strong { font-family: Macha-bold; } .disability-sub-nav__center { text-align: center; order: 1; } @media only screen and (max-width: 699px) { .disability-sub-nav-container { flex-direction: column-reverse; } .disability-sub-nav-container h2 { font-size: 22px !important; } .disability-sub-nav--extraflex { order: 2; } .disability-sub-nav__center img { transform: scale(0.75); } } .l-content-holder.m-hide { display: inherit; } .l-content-holder.m-hide h1 { margin-top: 20px; } .l-content-holder.m-show { display: none; } @media only screen and (max-width: 699px) { .l-content-holder.m-hide { display: none; margin-top: unset; } .l-content-holder.m-show { display: inherit; } .l-content-holder.m-show .header-image-center { display: grid; } .l-content-holder.m-show img { height: 80px; justify-self: center; } .l-content-holder.m-show h1 { text-align: center !important; font-family: Macha-Book; font-size: 22px; font-weight: 400; } } .decisions-and-appeals header { display: flex; padding: 20px 30px; align-items: flex-start; gap: 10px; background: #25AA8D; } .decisions-and-appeals h3 { color: #fff; font-family: Macha-medium; font-size: 25px; font-style: normal; font-weight: 500; line-height: 32px; margin-bottom: 0px; } .decisions-and-appeals-inner { border: 2px solid #DADEE3; } .decisions-and-appeals-inner .bullet-container { display: grid; margin-left: 30px; margin-right: 30px; margin-top: 20px; margin-bottom: 20px; justify-content: left; align-content: center; } .decisions-and-appeals-inner .bullet-container img { height: 100px; width: 100px; grid-column: 1; } .decisions-and-appeals-inner .bullet-container div { grid-column: 2; color: #1B997D; font-family: macha-medium; font-size: 20px; font-style: normal; font-weight: 500; line-height: 25px; padding-left: 30px; align-content: center; display: grid; } @media only screen and (max-width: 699px) { .decisions-and-appeals h3 { text-align: center; font-size: 20px; line-height: 28px; } .decisions-and-appeals-inner .bullet-container { display: grid; margin-left: 20px; margin-right: 20px; margin-top: 20px; justify-content: center; } .decisions-and-appeals-inner .bullet-container img { grid-column: unset; justify-self: center; } .decisions-and-appeals-inner .bullet-container div { padding-top: 10px; grid-column: unset; justify-self: center; text-align: center; padding-left: 0px; font-feature-settings: 'clig' off, 'liga' off; font-size: 18px; font-style: normal; font-weight: 500; line-height: 24px; } } .deny-appeal header { display: flex; padding: 20px 30px; align-items: flex-start; gap: 10px; background: #DE0000; } .deny-appeal h3 { color: #fff; font-family: Macha-medium; font-feature-settings: 'clig' off, 'liga' off; font-size: 25px; font-style: normal; font-weight: 500; line-height: 32px; margin-bottom: 0px; } .deny-appeal .body-copy { border: 2px solid #DADEE3; padding: 20px 30px 20px 30px; } .deny-appeal .body-copy div { color: #1B3045; font-feature-settings: 'clig' off, 'liga' off; font-family: Macha-book; font-size: 16px; font-style: normal; font-weight: 400; line-height: 24px; } @media only screen and (max-width: 699px) { .deny-appeal h3 { text-align: center; font-size: 20px; font-style: normal; line-height: 28px; } .deny-appeal .body-copy { padding: 20px 20px 20px 20px; text-align: center; } } .c-accordion-consent-form__header { color: #0F7D68; margin-bottom: 0px; } .consent-form-header { border-top: 2px solid #eaedf0; border-bottom: 2px solid #eaedf0; padding-left: 0px !important; padding-top: 18px !important; padding-bottom: 18px !important; } .consent-form .is-expanded .consent-form-header, .consent-form .consent-form-header { border-bottom: inherit; } .consent-form h3 { margin-top: 0px; padding-bottom: 20px; } .consent-form-header--right { float: right; vertical-align: middle; position: relative; top: 50%; transform: translateY(-50%); margin-top: 5px; } @media only screen and (max-width: 699px) { .consent-form h3 { width: 100%; } .consent-form-header--right { top: 25%; margin-top: 0px; } } .consent-form-header--right-text { font-size: 16px !important; line-height: 24px; float: right; vertical-align: middle; color: #5F6E7C; } .consent-form-header--right-text svg { padding-top: 10px; } .consent-form-header--right-text svg.down { transform: rotate(180deg); padding-bottom: 10px; padding-top: 0px; } .consent-form-sub-header { margin-top: -2px; } .consent-form-content { padding-left: 0px !important; } .consent-form-list li { margin-left: 0px !important; } .consent-form-header .title { display: inline-block; min-width: 150px; } .consent-form-header .signed { color: #0F7D68; text-align: right; font-feature-settings: 'clig' off, 'liga' off; font-family: macha-book; font-size: 16px; font-style: normal; font-weight: 400; line-height: 24px; margin-left: 20px; } .consent-form-header .signed svg { margin-right: 5px; } @media only screen and (max-width: 699px) { .consent-form-header .signed { margin-left: 0px; } } .legal-waiver { font-family: Macha-Book; line-height: 24px; } .legal-waiver strong { font-family: Macha-bold; } .legal-waiver p { padding-bottom: 20px; } .legal-waiver span { font-family: Macha-bold; font-weight: 500; font-size: 20px; line-height: 25px; color: #5F6E7C; } .legal-waiver span.bigger { font-weight: 500; font-size: 25px; line-height: 32px; color: #5F6E7C; } span.legal-waiver--green { color: #0F7D68; } p.legal-waiver--subheader { padding-bottom: 0px; margin-bottom: 0px; } .legal-waiver ul { padding-bottom: 20px; list-style-position: inside; line-height: 24px; } .legal-waiver br { padding-bottom: 10px; } .social-security-combined h2 { font-size: 25px; font-weight: 500; font-family: Macha-Medium; line-height: 32px; color: #0F7D68; margin-bottom: 9px; } .social-security-combined p { font-size: 14px; line-height: 21px; padding-bottom: 20px; } .social-security-combined-form h3 { font-size: 20px; line-height: 25px; font-family: Macha-Medium; } .social-security-combined-form fieldset { padding-bottom: 40px; } .medical-records-supporting-docs h2 { font-size: 25px; font-weight: 500; line-height: 32px; color: #0F7D68; margin-bottom: 9px; font-family: Macha-Medium; } .medical-records-supporting-docs p { font-size: 14px; line-height: 21px; padding-bottom: 20px; } .medical-records-supporting-docs h3 { font-size: 20px; line-height: 25px; color: #5F6E7C; font-family: Macha-Medium; } form[name="supportingdocsformsocialsecuritysupportingdocs"] h3 { color: #5F6E7C !important; } .medical-records-supporting-docs ul { padding-bottom: 40px; list-style-position: inside; line-height: 30px; } span.medical-records-supporting-docs--green { color: #0F7D68; } .medical-records-supporting-docs .medical-records--one-column { columns: 1; -webkit-columns: 1; -moz-columns: 1; line-height: 24px; } .medical-records-supporting-docs .medical-records--one-column li { margin-left: 14px; padding-left: 5px; } .medical-records-supporting-docs .medical-records--two-column { columns: 2; -webkit-columns: 2; -moz-columns: 2; line-height: 24px; } .medical-records-supporting-docs .medical-records--two-column li { margin-left: 14px; padding-left: 5px; display: inline-block; } @media only screen and (max-width: 699px) { .medical-records-supporting-docs .medical-records--two-column { columns: 1; -webkit-columns: 1; -moz-columns: 1; } .medical-records-where-get-container { grid-auto-flow: row; grid-template-columns: inherit; } } .medical-records-where-get-container { display: grid; flow-direction: column; gap: 5em; grid-template-columns: 50% 50%; padding-bottom: 40px; } .medical-records-where-get-container__item { border-right: 1px solid #DADEE3; } .medical-records-where-get-container__item:last-child { border-right: none; } .medical-records-where-get-container__header svg { vertical-align: middle; } .medical-records-where-get-container__header span { font-size: 18px; line-height: 26px; font-weight: 400; padding-left: 10px; color: #0F7D68; } .review-form.c-form label { font-size: 14px; color: #5F6E7C; font-weight: 400; } .review-form .c-form-control-static { font-size: 16px; font-weight: 400; } .review-form .signed-text { color: #0F7D68; position: absolute; top: 17px; left: 200px; font-weight: 700; font-size: 14px; line-height: 16px; text-transform: uppercase; letter-spacing: 2px; padding: 5px; } .medical-records-where-get-container__header p { padding-bottom: 0px; } .medical-records-where-get-container__content { max-width: 380px; font-size: 16px; line-height: 24px; } @media only screen and (max-width: 699px) { .medical-records-where-get-container__content { max-width: 100%; font-size: 16px; line-height: 24px; } .medical-records-where-get-container { display: block; flow-direction: column; gap: 5em; grid-template-columns: 50% 50%; padding-bottom: 40px; } .medical-records-where-get-container__item { border-right: none; text-align: center; } } .disability-applied-for h3 { color: #939EA9; font-feature-settings: 'clig' off, 'liga' off; font-size: 25px; font-style: normal; font-weight: 500; line-height: 32px; } .disability-applied-for hr { background-color: #EFF1F3; height: 2px; border: 0; } .disability-applied-for ul { padding-top: 20px; padding-bottom: 40px; list-style: outside circle; } .disability-applied-for > ul > li { color: #000; font-feature-settings: 'clig' off, 'liga' off; font-size: 16px; font-style: normal; font-weight: 400; line-height: 24px; margin-bottom: 20px; margin-left: 14px; padding-left: 5px; } .disability-application-applied-for h2 { font-size: 30px; color: #FFF; line-height: 38px; } .disability-application-applied-for--less-margin { margin-bottom: 10px !important; } .disability-application-applied-for__header { text-align: center; padding-bottom: 30px; } .disability-application-applied-for__header span { font-feature-settings: 'clig' off, 'liga' off; font-size: 13px; font-style: normal; font-weight: 500; line-height: normal; } .disability-applied-for-list-header { font-size: 22px; line-height: 24px; font-weight: 400; } .medical-evaluation--no-top-padding { padding-top: 0px !important; } #disabilityReminderModal h3 { text-align: center; font-feature-settings: 'clig' off, 'liga' off; font-family: Macha-medium; font-size: 22px; font-style: normal; font-weight: 500; line-height: 30px; /* 136.364% */ margin-bottom: 5px; } #disabilityReminderModal .lead-in { margin-left: 40px; margin-right: 40px; text-align: center; font-feature-settings: 'clig' off, 'liga' off; /* Desktop/Body/Small */ font-family: Macha-book; font-size: 14px; font-style: normal; font-weight: 400; line-height: 21px; /* 150% */ margin-bottom: 40px; } #disabilityReminderModal .remind-me { margin-top: 40px; margin-bottom: 40px; } #disabilityReminderModal .c-form-control-label { text-align: center; font-feature-settings: 'clig' off, 'liga' off; font-family: Macha-book; font-size: 16px; font-style: normal; font-weight: 400; line-height: 24px; } #disabilityReminderModal .existing-val { text-align: center; font-feature-settings: 'clig' off, 'liga' off; font-family: Macha-medium; font-size: 16px; font-style: normal; font-weight: 500; line-height: 24px; margin-bottom: 5px; } @media only screen and (max-width: 699px) { #disabilityReminderModal .lead-in { margin-left: 0px; margin-right: 0px; text-align: center; } #disabilityReminderModal .mobile-m-bottom-40 { margin-bottom: 40px; } #disabilityReminderModal label.c-form-radio-inline { display: inline-block; padding-left: 25px; } #disabilityReminderModal label.c-form-radio-inline:first-child { margin-bottom: 30px; } } .fund-last-updated { font-size: 12px; font-style: normal; font-weight: 500; line-height: 16px; /* 133.333% */ letter-spacing: 0.24px; text-transform: uppercase; padding-bottom: 10px; color: #5f6e7c; } .modal-questions .modal-documents-list { width: 100%; list-style: inside disc; line-height: 30px; padding-bottom: 20px; } .download-button--align-right { text-align: right; } @media only screen and (max-width: 699px) { .download-button--align-right { margin-top: 15px; } .download-button--align-right a { width: 100%; } } .fund-last-updated { font-size: 12px; font-style: normal; font-weight: 500; line-height: 16px; /* 133.333% */ letter-spacing: 0.24px; text-transform: uppercase; padding-bottom: 10px; color: #5f6e7c; } hr.c-form-linebreak-light { border: 0; border-top: 2px solid #EFF1F3 !important; } .distribution-section-spacer { padding-top: 40px; } .distribution-section-less-space { padding-bottom: 0px; margin-bottom: 0px; } .distribution-subheader { font-size: 22px; line-height: 24px; font-family: Macha-Medium, sans-serif; } .distribution-list { margin-left: 10px; list-style: outside disc; } .distribution-list li { line-height: 1.5em; padding-bottom: 10px; } form[name="supportingdocsformfederaltax"] { margin-top: 0px !important; } form[name="supportingdocsformfederaltax"] h2 { font-size: 25px; color: #142435 !important; } form[name="supportingdocsformstatetax"] h2 { font-size: 25px; color: #142435 !important; } .state-tax-centered { text-align: center; font-size: 30px; font-family: Macha-Book, sans-serif; } .state-tax-option-text { font-size: 22px !important; color: #142435 !important; padding-bottom: 5px; line-height: 24px; font-family: Macha-medium. sans-serif; } .modal-content-medium .distribution-consent-modal { padding: 20px; margin-left: 35px; margin-right: 35px; } @media only screen and (max-width: 749px) { .modal-content-medium .distribution-consent-modal { padding: 20px; margin-left: 0px; margin-right: 0px; } } .l-columns--with-divider strong { font-weight: bold; } .investment-mix-form-column .ui-btn, .auto-rebalance-form-column .ui-btn { margin-top: 0px !important; } .investment-mix-form-column .link-caption-spacer, .auto-rebalance-form-column .link-caption-spacer { font-size: 14px; font-weight: 500; color: #5f6e7c; margin-top: 20px; } .investment-mix-form-column .mobile-hidden { display: inherit; } @media only screen and (max-width: 699px) { .investment-mix-form-column, .auto-rebalance-form-column { margin-left: 40px !important; margin-right: 40px !important; } .investment-mix-form-column .l-columns__col-icon, .auto-rebalance-form-column .l-columns__col-icon { display: block !important; margin-top: 10px; margin-bottom: 10px; height: auto; } .investment-mix-form-column .l-columns__col-icon img, .auto-rebalance-form-column .l-columns__col-icon img { height: 60px; width: 60px; } .investment-mix-form-column .mobile-hidden { display: none; } .investment-mix-form-column .ui-btn, .auto-rebalance-form-column .ui-btn { width: auto !important; } } #secondary_beneficiaries { padding-bottom: 2em; } #playerContactSection header { font-size: 35px; border-top: none; } #appstore-icons { display: flex; justify-content: center; gap: 15px; margin-top: 70px; background: #f2f3f5; } #appstore-icons a { width: 10%; margin-top: 20px; } #appstore-icons #google-play-icon { width: 11%; } @media only screen and (max-width: 699px) { #appstore-icons a { width: 40%; } #appstore-icons #google-play-icon { width: 46% !important; } } @media only screen and (min-width: 1240px) { #appstore-icons a { width: 120px; } } @media only screen and (min-width: 1240px) { #appstore-icons #google-play-icon { width: 135px; } } #appstore-icons img { width: 100%; } #siteExitModal .ui-btn--secondary { margin-left: 20px; } .investment-mix-update { display: block !important; } .investment-mix-update .c-tile-selector__item { width: 60%; height: 197px; margin: auto; background-color: white; cursor: none; pointer-events: none; } #siteExitModal { z-index: 9999999; } @media only screen and (max-width: 699px) { .investment-mix-update .c-tile-selector__item { width: 100%; } } .investment-mix-update.c-tile-selector__item img { margin-bottom: 10px; } @media only screen and (max-width: 699px) { .investment-mix-update .c-tile-selector__item img { width: 20%; margin: auto; } } .investment-mix-update .l-columns--grid { display: block; margin-left: 21%; } @media only screen and (max-width: 699px) { .investment-mix-update .l-columns--grid { display: block; margin-left: 0; } } .investment-mix-update #applyInvestmentText { margin-top: 18px; margin-bottom: 5px; } .investment-mix-update .c-form-group { display: flex; } .investment-mix-update .c-tile-selector__header { line-height: 40px; font-size: 20px; } .investment-mix-update .c-form-custom-ind { margin-top: 5px; } @media only screen and (max-width: 699px) { .investment-mix-update .c-form-custom-ind { margin-top: 0; } } .investment-mix-row-header .hidden { border-bottom: 0px; } .investment-mix-row-header #investment-collapsed,.investment-mix-row-header #investment-expanded { display: flex; width: 100%; } .investment-mix-row.fund-mix-row { color: #1B3045; font-feature-settings: 'clig' off, 'liga' off; font-family: Macha-Book; font-size: 18px; font-style: normal; font-weight: 400; line-height: 26px; } .investment-mix-row.fund-mix-row .pdf-link { color: #2B9ECB; font-size: 16px; font-family: macha-book; padding-left: 10px; } .investment-mix-row.fund-mix-row .fund-name { font-family: Macha-medium; font-weight: 500; padding-left: 15px; } @media screen and (max-width: 699px) { .investment-mix-row.fund-mix-row .fund-name { flex-direction: column; align-items: start; margin-top: 5px; font-size: 16px !important; width: 65% !important; } } @media screen and (max-width: 499px) { .investment-mix-row.fund-mix-row .fund-name { width: 60% !important; } } @media screen and (max-width: 299px) { .investment-mix-row.fund-mix-row .fund-name { width: 50% !important; } } .investment-mix-row.fund-mix-row .percentage { color: #1B3045; font-size: 18px; font-style: normal; font-weight: 400; } .ui-menu.ui-widget.ui-widget-content { background-color: white; font-family: "Macha-Book", sans-serif; font-size: 18px; line-height: 28px; z-index: 500000; border-bottom: 2px solid #dadee3; border-left: 2px solid #dadee3; border-right: 2px solid #dadee3; border-radius: 3px; position: absolute !important; color: black; } .investment-mix-control { display: flex; } .investment-mix-control h3 { margin-left: 20px; } .investment-mix-control h3:before { content: ''; display: block; width: 24px; height: 24px; position: absolute; left: 0; background-size: contain; background: url("/Assets/images/controls/c-accordion/plus.svg") no-repeat; margin-left: 10px; } .investment-mix-control.isExpanded h3:before { background-image: url("/Assets/images/controls/c-accordion/minus.svg"); } @media only screen and (max-width: 699px) { .c-submit-block__item .ui-btn { width: 50% !important; max-width: 150px !important; margin-left: 20px; } } .c-mainheader__user-tools .ui-menu.ui-widget.ui-widget-content { font-size: 16px; } .headerpercent { leading-trim: both; font-family: Macha-medium; font-size: 18px; font-style: normal; font-weight: 700; line-height: 100%; padding-left: 5px; display: flex; align-self: center; height: 18px; } .headertext { display: flex; height: 14px; align-self: center; } .headerpercent:after { content: "%"; } .funds-fixed-nav-cancel-button { padding-left: 2%; } .funds-fixed-nav-save-button { padding-right: 2%; } @media only screen and (max-width: 699px) { .investment-mix-row-header { margin-top: 0px !important; } } .investment-desktop-form-navigation-bottom header { text-align: left !important; } .investment-desktop-form-navigation-bottom { padding-bottom: 80px; border-bottom: 1px solid #DADEE3; } .investment-desktop-form-navigation-bottom-confirmation-page { border: 1px solid #DADEE3; padding: 20px 20px 80px 20px; box-shadow: 5px 5px 5px #DADEE3; } .ui-menu.ui-widget.ui-widget-content li div { padding-left: 5px; } .investment-desktop-form-navigation-choosemix { width: 140% !important; background: white; position: -webkit-sticky; position: sticky; top: 95px; z-index: 10; width: 129%; padding-top: 10px; padding-bottom: 10px; } .investment-mix-col-right { min-width: 0; } .investment-mix-col-right-choosemix .headertext { white-space: nowrap; overflow: hidden; } .totalmix-continue-btn { margin-bottom: 3px; } .choosemix-grid { flex-wrap: nowrap !important; overflow: hidden; } .choosemix-title { padding-left: 14%; margin-right: 22% !important; overflow: hidden; white-space: nowrap; } .choosemix-cancel-button { margin-right: 10px !important; } @media only screen and (max-width: 899px) { .choosemix-title { width: auto !important; } } @media only screen and (max-width: 1200px) { .choosemix-title { margin-right: 9% !important; } } .choosemix-header { margin-top: 10px; margin-bottom: 10px; margin-left: -20%; } .choosemix-header h3 { color: #5F6E7C; font-family: Macha-medium; font-size: 25px; font-style: normal; font-weight: 500; line-height: 32px; align-self: center; margin-bottom: 0px !important; padding-bottom: 0px; display: inline-grid; height: 100%; align-content: center; } .choosemix-header .totalmix { color: #5F6E7C; font-family: Macha-book; font-size: 14px; font-style: normal; font-weight: 700; line-height: 16px; /* 114.286% */ letter-spacing: 2px; text-transform: uppercase; white-space: nowrap; padding-right: 35px; display: block; padding: 10px 15px; gap: 10px; border-radius: 5px; background: var(--nflpb-website-grey-grey-10, #F8F9FA); margin-right: 58px; } .choosemix-header .totalmix-container { margin-right: 10px !important; } .choosemixheader-mobile { width: 100%; margin-bottom: 0px; margin-left: 0px; } .choosemix-title-mobile { padding: 0px; } .choosemix-title-mobile h3 { font-size: 22px !important; } @media only screen and (max-width: 1199px) { .choosemix-header .totalmix { margin-right: 0px; } } .choosemix-header .totalmix i { padding: 0px; color: #de0000; } .choosemix-header .totalmix.fullyallocated i { padding: 0px; color: #27b696; } .choosemix-header .totalmix span { color: #de0000; font-family: Macha-book; font-size: 20px; font-style: normal; font-weight: 500; line-height: 32px; /* 128% */ letter-spacing: normal; } .choosemix-header .totalmix.fullyallocated span { color: #27b696; letter-spacing: normal; } .add-shadow { box-shadow: 0px 14px 10px -10px rgba(0, 0, 0, 0.25); } .reviewGraph { margin-top: 40px; margin-bottom: 10px; } .reviewGraph [dir="ltr"] { margin: auto; } @media only screen and (max-width: 699px) { .review-current-mix-graph .funds-list-container { width: 110% !important; margin-left: -5% !important; } } .review-current-mix-graph .is-expanded > .c-accordion__content-holder { height: auto; padding-bottom: 0px; } .review-current-mix-graph .mobile-accordian-color { margin-right: 5px; } .auto-rebalance__text { font-family: Macha-Medium; font-size: 13px; font-weight: 500; font-style: normal; font-stretch: normal; line-height: 1.23; letter-spacing: normal; color: #5f6e7c; } .fund-category__text { font-family: Macha-Medium; font-size: 16px; font-weight: 500; font-style: normal; font-stretch: normal; line-height: 1.38; letter-spacing: normal; color: #1b3045; } @media only screen and (min-width: 699px) { .fund-category__text { font-size: 18px; } } .fund__text { font-family: Macha-Book; font-size: 14px; font-weight: 500; font-style: normal; font-stretch: normal; line-height: 1.38; letter-spacing: normal; color: #1b3045; } @media only screen and (max-width: 899px) { .fund__text { font-size: 11px; } } .fund-total__text { font-family: Macha-Bold; font-size: 14px; font-weight: bold; font-style: normal; font-stretch: normal; line-height: 1.29; letter-spacing: 1px; color: #939eae; } .fund-type__text { font-family: Macha-Book; font-size: 14px; font-weight: 500; font-style: normal; font-stretch: normal; line-height: 1.29; letter-spacing: 1px; color: #00a4da; cursor: pointer; } .fund-type__text.selected { font-family: Macha-Medium; color: #1b3045; } .ui-menu.ui-widget.ui-widget-content li div:hover { cursor: pointer; background-color: lightgray; } .review-current-mix-graph .c-accordion .c-accordion__section:first-child { border-top-style: none; } .investment-mix-col-left-mobile { padding-bottom: 10px; } div.ui-helper-hidden-accessible { display: none; } @media only screen and (max-width: 699px) { .investment-mix-col-left-mobile { justify-content: flex-start; padding-bottom: 0px; } .investment-mix-mobile { width: auto !important; font-size: 12px !important; } .review-current-mix-graph .mobile-accordian { display: flex; } .review-current-mix-graph .mobile-accordian-color { align-self: center; margin-right: 5px; } @media only screen and (max-width: 699px) { .c-hero.is-clone.is-shown { display: flex; flex-direction: column; justify-content: center; text-align: center; } .review-current-mix-graph .mobile-accordian-title { width: 80%; } } .c-hero.is-clone.is-shown .l-content-holder { padding: 0 !important; } .investment-assetclass_row_data .l-columns.l-columns--grid.investment-mix-row .hidden { display: none; } .c-hero.is-clone.is-shown .c-hero__columns * { display: none; } .investment-mix-investment-type-header { text-align: left; } @media only screen and (min-width: 699px) { .investment-mix-row-header { font-size: 12px !important; } } .investment-mix-row-header .hidden { border-bottom: 0px; } .investment-mix-row.fund-mix-row { color: #1B3045; font-feature-settings: 'clig' off, 'liga' off; font-family: Macha-Book; font-size: 18px; font-style: normal; font-weight: 400; line-height: 26px; } .investment-mix-row.fund-mix-row .pdf-link { color:#2B9ECB; font-size: 16px; font-family:macha-book; padding-left:10px; } @media screen and (max-width: 699px) { .investment-mix-row.fund-mix-row .pdf-link { padding-left: 0px; margin-left: 0px !important; } } .investment-mix-row.fund-mix-row .fund-name { font-family: Macha-medium; font-weight: 500; padding-left: 15px; } .investment-mix-row.fund-mix-row .percentage { color: #1B3045; font-size: 18px; font-style: normal; font-weight: 400; } @media screen and (min-width: 700px) { .investment-mix-control { display: flex; } .investment-mix-control i { align-content: start; margin-top: 4px; margin-left: 7px; } } .investment-mix-control h3 { margin-left:20px; } .investment-mix-control h3:before { content: ''; display: block; width: 24px; height: 24px; position: absolute; left: 0; background-size: contain; background: url("/Assets/images/controls/c-accordion/plus.svg") no-repeat; margin-left:10px; } .investment-mix-control.is-expanded h3:before { background-image: url("/Assets/images/controls/c-accordion/minus.svg"); } .c-hero.is-clone.is-shown .c-hero__columns .c-hero__columns__primary { display: block; } .investment-mix-asset-title { cursor: pointer; } .investment-mix-asset-container { display: flex; } .headerpercent { leading-trim: both; font-family: Macha-medium; font-size: 18px; font-style: normal; font-weight: 700; line-height: 100%; padding-left: 5px; display: flex; align-self: center; height: 18px; } .headertext { display: flex; height: 14px; align-self: center; } .headerpercent:after { content: "%"; } .choosemix-header { margin-top: 10px; margin-bottom: 10px; } .choosemix-header h3 { color: #5F6E7C; font-family: Macha-medium; font-size: 25px; font-style: normal; font-weight: 500; line-height: 32px; align-self: center; margin-bottom: 0px !important; padding-bottom: 0px; display: inline-grid; height: 100%; align-content: center; } .choosemix-header .totalmix { color: #5F6E7C; font-family: Macha-book; font-size: 12px; font-style: normal; font-weight: 700; line-height: 16px; /* 114.286% */ letter-spacing: 2px; text-transform: uppercase; white-space: nowrap; padding-right: 35px; display: block; padding: 10px 15px; gap: 10px; border-radius: 5px; background: var(--nflpb-website-grey-grey-10, #F8F9FA); margin-right: 58px; } @media only screen and (max-width: 1199px) { .choosemix-header .totalmix { margin-right: 0px; } } .choosemix-header .totalmix i { padding: 0px; color: #de0000; } .choosemix-header .totalmix.fullyallocated i { padding-left: 5px; color: #27b696; } .choosemix-header .totalmix span { color: #de0000; font-family: Macha-book; font-size: 20px; font-style: normal; font-weight: 500; line-height: 32px; /* 128% */ letter-spacing: normal; } .choosemix-header .totalmix.fullyallocated span { color: #27b696; letter-spacing: normal; } .add-shadow { box-shadow: 0px 14px 10px -10px rgba(0, 0, 0, 0.25); } @media only screen and (max-width: 899px) { .choosemix-header .totalmix span { font-size: 12px !important; } .c-hero.is-clone.is-shown .c-hero__columns .c-hero__columns__primary h1 { display: block; padding-bottom: 0; } } .planner-cta-msg { padding-left: 10px; align-items: center; } .choosemix-header .totalmix div { font-size: 8px !important; } .planner-cta-msg .cta-link { text-align: right; } .totalmix .investment-info-circle { font-size: 15px; } } .new-investment-header-container { padding: 0px; padding-top: 20px !important; } @media only screen and (max-width: 699px) { .new-investment-header-container { margin-left: 0px !important; } } .new-investment-subheader-container { display: flex; gap: 10px; } .new-investment-subheader-container h3 { margin-bottom: 0px !important; } .new-investment-subheader-container span { line-height: 25px; } .new-investment-mix-l-columns_item { margin-left: 0px !important; } .macha-grey-heading { font-size: 25px; line-height: 32px; font-family: Macha-Medium; color: #5F6E7C; letter-spacing: normal; text-transform: none; margin: 0 0 10px 0; } #siteExitModal .ui-btn--secondary { margin-left: 20px; } @media only screen and (max-width: 699px) { #siteExitModal .ui-btn--secondary { margin-left: 0; margin-top:20px; } } /*Auto Complete*/ .ui-menu.ui-widget.ui-widget-content { background-color: white; font-family: "Macha-Book", sans-serif; font-size: 18px; line-height: 28px; z-index: 500000; border-bottom: 2px solid #dadee3; border-left: 2px solid #dadee3; border-right: 2px solid #dadee3; border-radius: 3px; position: absolute !important; color:black; } .c-mainheader__user-tools .ui-menu.ui-widget.ui-widget-content { font-size:16px; } .ui-menu.ui-widget.ui-widget-content li div { padding-left: 5px; } .ui-menu.ui-widget.ui-widget-content li div:hover { cursor: pointer; background-color: lightgray; } div.ui-helper-hidden-accessible { display: none; } @media only screen and (max-width: 699px) { .c-hero.is-clone.is-shown { display: flex; flex-direction: column; justify-content: center; text-align: center; } .c-hero.is-clone.is-shown .l-content-holder { padding: 0 !important; } .c-hero.is-clone.is-shown .c-hero__columns * { display: none; } .c-hero.is-clone.is-shown .c-hero__columns.no-title { display: none; } .c-hero.is-clone.is-shown .c-hero__columns .c-hero__columns__primary { display: block; } .c-hero.is-clone.is-shown .c-hero__columns .c-hero__columns__primary h1 { display: block; padding-bottom: 0; } } .planner-cta-msg { padding-left: 10px; align-items:center; } .planner-cta-msg .cta-link { text-align:right; } @media only screen and (max-width: 699px) { .planner-cta-msg { text-align: center; } .planner-cta-msg .callout-insert { width: 100% !important; padding-bottom: 15px; } .planner-cta-msg .cta-link { text-align: center; } } .c-megamenu__subhead:has(+ .c-megamenu__subhead) { display: none; } .c-megamenu__subhead:last-child { display: none; } @media only screen and (max-width: 699px) { .c-submit-block-pip__item { margin-left: auto !important; margin-right: auto !important; width: 100% !important; } .c-submit-block-pip__item .ui-btn { width: 100% !important; max-width: 300px !important; margin-left: auto; margin-right: auto; margin-bottom: 20px; } .numbered-list.pip-numbered-list { align-content: center; } .c-submit-block.c-submit-block-pip { justify-content: center; } .c-submit-block.c-submit-block-pip-401k { display: block !important; } } /*! * # Semantic UI 2.2.3 - Dropdown * http://github.com/semantic-org/semantic-ui/ * * * Released under the MIT license * http://opensource.org/licenses/MIT * */ /******************************* Dropdown *******************************/ .ui.dropdown { cursor: pointer; position: relative; display: inline-block; outline: none; text-align: left; -webkit-transition: box-shadow 0.1s ease, width 0.1s ease; transition: box-shadow 0.1s ease, width 0.1s ease; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } /******************************* Content *******************************/ /*-------------- Menu ---------------*/ .ui.dropdown .menu { cursor: auto; position: absolute; display: none; outline: none; top: 100%; min-width: -webkit-max-content; min-width: -moz-max-content; min-width: max-content; margin: 0em; padding: 0em 0em; background: #FFFFFF; font-size: 1em; text-shadow: none; text-align: left; box-shadow: 0px 2px 3px 0px rgba(34, 36, 38, 0.15); border: 1px solid rgba(34, 36, 38, 0.15); border-radius: 0.28571429rem; -webkit-transition: opacity 0.1s ease; transition: opacity 0.1s ease; z-index: 11; will-change: transform, opacity; } .ui.dropdown .menu > * { white-space: nowrap; } /*-------------- Hidden Input ---------------*/ .ui.dropdown > input:not(.search):first-child, .ui.dropdown > select { display: none !important; } /*-------------- Dropdown Icon ---------------*/ .ui.dropdown > .dropdown.icon { position: relative; width: auto; font-size: 0.85714286em; margin: 0em 0em 0em 1em; } .ui.dropdown .menu > .item .dropdown.icon { width: auto; float: right; margin: 0em 0em 0em 1em; } .ui.dropdown .menu > .item .dropdown.icon + .text { margin-right: 1em; } /*-------------- Text ---------------*/ .ui.dropdown > .text { display: inline-block; -webkit-transition: none; transition: none; } /*-------------- Menu Item ---------------*/ .ui.dropdown .menu > .item { position: relative; cursor: pointer; display: block; border: none; height: auto; text-align: left; border-top: none; line-height: 1em; color: rgba(0, 0, 0, 0.87); padding: 0.78571429rem 1.14285714rem !important; font-size: 1rem; text-transform: none; font-weight: normal; box-shadow: none; -webkit-touch-callout: none; } .ui.dropdown .menu > .item:first-child { border-top-width: 0px; } /*-------------- Floated Content ---------------*/ .ui.dropdown > .text > [class*="right floated"], .ui.dropdown .menu .item > [class*="right floated"] { float: right !important; margin-right: 0em !important; margin-left: 1em !important; } .ui.dropdown > .text > [class*="left floated"], .ui.dropdown .menu .item > [class*="left floated"] { float: left !important; margin-left: 0em !important; margin-right: 1em !important; } .ui.dropdown .menu .item > .icon.floated, .ui.dropdown .menu .item > .flag.floated, .ui.dropdown .menu .item > .image.floated, .ui.dropdown .menu .item > img.floated { margin-top: 0em; } /*-------------- Menu Divider ---------------*/ .ui.dropdown .menu > .header { margin: 1rem 0rem 0.75rem; padding: 0em 1.14285714rem; color: rgba(0, 0, 0, 0.85); font-size: 0.78571429em; font-weight: bold; text-transform: uppercase; } .ui.dropdown .menu > .divider { border-top: 1px solid rgba(34, 36, 38, 0.1); height: 0em; margin: 0.5em 0em; } .ui.dropdown .menu > .input { width: auto; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; margin: 1.14285714rem 0.78571429rem; min-width: 10rem; } .ui.dropdown .menu > .header + .input { margin-top: 0em; } .ui.dropdown .menu > .input:not(.transparent) input { padding: 0.5em 1em; } .ui.dropdown .menu > .input:not(.transparent) .button, .ui.dropdown .menu > .input:not(.transparent) .icon, .ui.dropdown .menu > .input:not(.transparent) .label { padding-top: 0.5em; padding-bottom: 0.5em; } /*----------------- Item Description -------------------*/ .ui.dropdown > .text > .description, .ui.dropdown .menu > .item > .description { float: right; margin: 0em 0em 0em 1em; color: rgba(0, 0, 0, 0.4); } /*----------------- Message -------------------*/ .ui.dropdown .menu > .message { padding: 0.78571429rem 1.14285714rem; font-weight: normal; } .ui.dropdown .menu > .message:not(.ui) { color: rgba(0, 0, 0, 0.4); } /*-------------- Sub Menu ---------------*/ .ui.dropdown .menu .menu { top: 0% !important; left: 100% !important; right: auto !important; margin: 0em 0em 0em -0.5em !important; border-radius: 0.28571429rem !important; z-index: 21 !important; } /* Hide Arrow */ .ui.dropdown .menu .menu:after { display: none; } /*-------------- Sub Elements ---------------*/ /* Icons / Flags / Labels / Image */ .ui.dropdown > .text > .icon, .ui.dropdown > .text > .label, .ui.dropdown > .text > .flag, .ui.dropdown > .text > img, .ui.dropdown > .text > .image { margin-top: 0em; } .ui.dropdown .menu > .item > .icon, .ui.dropdown .menu > .item > .label, .ui.dropdown .menu > .item > .flag, .ui.dropdown .menu > .item > .image, .ui.dropdown .menu > .item > img { margin-top: 0em; } .ui.dropdown > .text > .icon, .ui.dropdown > .text > .label, .ui.dropdown > .text > .flag, .ui.dropdown > .text > img, .ui.dropdown > .text > .image, .ui.dropdown .menu > .item > .icon, .ui.dropdown .menu > .item > .label, .ui.dropdown .menu > .item > .flag, .ui.dropdown .menu > .item > .image, .ui.dropdown .menu > .item > img { margin-left: 0em; float: none; margin-right: 0.78571429rem; } /*-------------- Image ---------------*/ .ui.dropdown > .text > img, .ui.dropdown > .text > .image, .ui.dropdown .menu > .item > .image, .ui.dropdown .menu > .item > img { display: inline-block; vertical-align: middle; width: auto; max-height: 2em; } /******************************* Coupling *******************************/ /*-------------- Menu ---------------*/ /* Remove Menu Item Divider */ .ui.dropdown .ui.menu > .item:before, .ui.menu .ui.dropdown .menu > .item:before { display: none; } /* Prevent Menu Item Border */ .ui.menu .ui.dropdown .menu .active.item { border-left: none; } /* Automatically float dropdown menu right on last menu item */ .ui.menu .right.menu .dropdown:last-child .menu, .ui.menu .right.dropdown.item .menu, .ui.buttons > .ui.dropdown:last-child .menu { left: auto; right: 0em; } /*-------------- Label ---------------*/ /* Dropdown Menu */ .ui.label.dropdown .menu { min-width: 100%; } /*-------------- Button ---------------*/ /* No Margin On Icon Button */ .ui.dropdown.icon.button > .dropdown.icon { margin: 0em; } .ui.button.dropdown .menu { min-width: 100%; } /******************************* Types *******************************/ /*-------------- Selection ---------------*/ /* Displays like a select box */ .ui.selection.dropdown { cursor: pointer; word-wrap: break-word; line-height: 1em; white-space: normal; outline: 0; -webkit-transform: rotateZ(0deg); -ms-transform: rotate(0deg); transform: rotateZ(0deg); min-width: 14em; min-height: 2.7142em; background: #FFFFFF; display: inline-block; padding: 0.78571429em 2.1em 0.78571429em 1em; color: rgba(0, 0, 0, 0.87); box-shadow: none; border: 1px solid rgba(34, 36, 38, 0.15); border-radius: 0.28571429rem; -webkit-transition: box-shadow 0.1s ease, width 0.1s ease; transition: box-shadow 0.1s ease, width 0.1s ease; } .ui.selection.dropdown.visible, .ui.selection.dropdown.active { z-index: 10; } select.ui.dropdown { height: 38px; padding: 0.5em; border: 1px solid rgba(34, 36, 38, 0.15); visibility: visible; } .ui.selection.dropdown > .search.icon, .ui.selection.dropdown > .delete.icon, .ui.selection.dropdown > .dropdown.icon { cursor: pointer; position: absolute; width: auto; height: auto; line-height: 1.2142em; top: 0.78571429em; right: 0.5em; z-index: 3; margin: -0.78571429em; padding: 0.78571429em; opacity: 0.8; -webkit-transition: opacity 0.1s ease; transition: opacity 0.1s ease; } /* Compact */ .ui.compact.selection.dropdown { min-width: 0px; } /* Selection Menu */ .ui.selection.dropdown .menu { overflow-x: hidden; overflow-y: auto; -webkit-backface-visibility: hidden; backface-visibility: hidden; -webkit-overflow-scrolling: touch; border-top-width: 0px !important; width: auto; outline: none; margin: 0px -1px; min-width: calc(100% + 2px ); width: calc(100% + 2px ); border-radius: 0em 0em 0.28571429rem 0.28571429rem; box-shadow:none; /*box-shadow: 0px 2px 3px 0px rgba(34, 36, 38, 0.15);*/ -webkit-transition: opacity 0.1s ease; transition: opacity 0.1s ease; } .ui.selection.dropdown .menu:after, .ui.selection.dropdown .menu:before { display: none; } /*-------------- Message ---------------*/ .ui.selection.dropdown .menu > .message { padding: 0.78571429rem 1.14285714rem; } @media only screen and (max-width: 767px) { .ui.selection.dropdown .menu { max-height: 8.01428571rem; } } @media only screen and (min-width: 768px) { .ui.selection.dropdown .menu { max-height: 10.68571429rem; } } @media only screen and (min-width: 992px) { .ui.selection.dropdown .menu { max-height: 16.02857143rem; } } @media only screen and (min-width: 1920px) { .ui.selection.dropdown .menu { max-height: 21.37142857rem; } } /* Menu Item */ .ui.selection.dropdown .menu > .item { border-top: 1px solid #FAFAFA; padding: 0.78571429rem 1.14285714rem !important; white-space: normal; word-wrap: normal; } /* User Item */ .ui.selection.dropdown .menu > .hidden.addition.item { display: none; } /* Hover */ .ui.selection.dropdown:hover { border-color: rgba(34, 36, 38, 0.35); box-shadow: none; } /* Active */ .ui.selection.active.dropdown { border-color: #96C8DA; box-shadow: none; /*box-shadow: 0px 2px 3px 0px rgba(34, 36, 38, 0.15);*/ } .ui.selection.active.dropdown .menu { border-color: #91e4fd; /*border-color: #96C8DA;*/ box-shadow:none; /*box-shadow: 0px 2px 3px 0px rgba(34, 36, 38, 0.15);*/ } /* Focus */ .ui.selection.dropdown:focus { border-color: #96C8DA; box-shadow: none; } .ui.selection.dropdown:focus .menu { border-color: #96C8DA; box-shadow:none; /*box-shadow: 0px 2px 3px 0px rgba(34, 36, 38, 0.15);*/ } /* Visible */ .ui.selection.visible.dropdown > .text:not(.default) { font-weight: normal; color: rgba(0, 0, 0, 0.8); } /* Visible Hover */ .ui.selection.active.dropdown:hover { border-color: #96C8DA; box-shadow: none; /*box-shadow: 0px 2px 3px 0px rgba(34, 36, 38, 0.15);*/ } .ui.selection.active.dropdown:hover .menu { border-color: #96C8DA; box-shadow: none; /*box-shadow: 0px 2px 3px 0px rgba(34, 36, 38, 0.15);*/ } /* Dropdown Icon */ .ui.active.selection.dropdown > .dropdown.icon, .ui.visible.selection.dropdown > .dropdown.icon { opacity: 1; z-index: 3; } /* Connecting Border */ .ui.active.selection.dropdown { border-bottom-left-radius: 0em !important; border-bottom-right-radius: 0em !important; } /* Empty Connecting Border */ .ui.active.empty.selection.dropdown { border-radius: 0.28571429rem !important; box-shadow: none !important; } .ui.active.empty.selection.dropdown .menu { border: none !important; box-shadow: none !important; } /*-------------- Searchable ---------------*/ /* Search Selection */ .ui.search.dropdown { min-width: ''; } /* Search Dropdown */ .ui.search.dropdown > input.search { background: none transparent !important; border: none !important; box-shadow: none !important; cursor: text; top: 0em; left: 1px; width: 100%; outline: none; -webkit-tap-highlight-color: rgba(255, 255, 255, 0); padding: inherit; } /* Text Layering */ .ui.search.dropdown > input.search { position: absolute; z-index: 2; } .ui.search.dropdown > .text { cursor: text; position: relative; left: 1px; z-index: 3; } /* Search Selection */ .ui.search.selection.dropdown > input.search { line-height: 1.2142em; padding: 0.67861429em 2.1em 0.67861429em 1em; } /* Used to size multi select input to character width */ .ui.search.selection.dropdown > span.sizer { line-height: 1.2142em; padding: 0.67861429em 2.1em 0.67861429em 1em; display: none; white-space: pre; } /* Active/Visible Search */ .ui.search.dropdown.active > input.search, .ui.search.dropdown.visible > input.search { cursor: auto; } .ui.search.dropdown.active > .text, .ui.search.dropdown.visible > .text { pointer-events: none; } /* Filtered Text */ .ui.active.search.dropdown input.search:focus + .text .icon, .ui.active.search.dropdown input.search:focus + .text .flag { opacity: 0.45; } .ui.active.search.dropdown input.search:focus + .text { color: rgba(115, 115, 115, 0.87) !important; } /* Search Menu */ .ui.search.dropdown .menu { overflow-x: hidden; overflow-y: auto; -webkit-backface-visibility: hidden; backface-visibility: hidden; -webkit-overflow-scrolling: touch; } @media only screen and (max-width: 767px) { .ui.search.dropdown .menu { max-height: 8.01428571rem; } } @media only screen and (min-width: 768px) { .ui.search.dropdown .menu { max-height: 10.68571429rem; } } @media only screen and (min-width: 992px) { .ui.search.dropdown .menu { max-height: 16.02857143rem; } } @media only screen and (min-width: 1920px) { .ui.search.dropdown .menu { max-height: 21.37142857rem; } } /*-------------- Multiple ---------------*/ /* Multiple Selection */ .ui.multiple.dropdown { padding: 0.22620476em 2.1em 0.22620476em 0.35714286em; } .ui.multiple.dropdown .menu { cursor: auto; } /* Multiple Search Selection */ .ui.multiple.search.dropdown, .ui.multiple.search.dropdown > input.search { cursor: text; } /* Selection Label */ .ui.multiple.dropdown > .label { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; display: inline-block; vertical-align: top; white-space: normal; font-size: 16px; /*font-size: 1em;*/ /*padding: 0.3em 0.78571429em;*/ padding: .6em 0.78571429em; margin: 0.14285714rem 0.28571429rem 0.14285714rem 0em; margin-top: 7px; box-shadow: 0px 0px 0px 1px rgba(34, 36, 38, 0.15) inset; } /* Dropdown Icon */ .ui.multiple.dropdown .dropdown.icon { margin: ''; padding: ''; } /* Text */ .ui.multiple.dropdown > .text { position: static; padding: 0; max-width: 100%; margin: 0.45240952em 0em 0.45240952em 0.64285714em; line-height: 1.21428571em; } .ui.multiple.dropdown > .label ~ input.search { margin-left: 0.14285714em !important; } .ui.multiple.dropdown > .label ~ .text { display: none; } /*----------------- Multiple Search -----------------*/ /* Prompt Text */ .ui.multiple.search.dropdown > .text { display: inline-block; position: absolute; top: 0; left: 0; padding: inherit; margin: 0.45240952em 0em 0.45240952em 0.64285714em; line-height: 1.21428571em; } .ui.multiple.search.dropdown > .label ~ .text { display: none; } /* Search */ .ui.multiple.search.dropdown > input.search { position: static; padding: 0; max-width: 100%; margin: 0.45240952em 0em 0.45240952em 0.64285714em; width: 2.2em; line-height: 1.21428571em; } /*-------------- Inline ---------------*/ .ui.inline.dropdown { cursor: pointer; display: inline-block; color: inherit; } .ui.inline.dropdown .dropdown.icon { margin: 0em 0.5em 0em 0.21428571em; vertical-align: baseline; } .ui.inline.dropdown > .text { font-weight: bold; } .ui.inline.dropdown .menu { cursor: auto; margin-top: 0.21428571em; border-radius: 0.28571429rem; } /******************************* States *******************************/ /*-------------------- Active ----------------------*/ /* Menu Item Active */ .ui.dropdown .menu .active.item { background: transparent; font-weight: bold; color: rgba(0, 0, 0, 0.95); box-shadow: none; z-index: 12; } /*-------------------- Hover ----------------------*/ /* Menu Item Hover */ .ui.dropdown .menu > .item:hover { background: rgba(0, 0, 0, 0.05); color: rgba(0, 0, 0, 0.95); z-index: 13; } /*-------------------- Loading ---------------------*/ .ui.loading.dropdown > i.icon { height: 1em !important; padding: 1.14285714em 1.07142857em !important; } .ui.loading.dropdown > i.icon:before { position: absolute; content: ''; top: 50%; left: 50%; margin: -0.64285714em 0em 0em -0.64285714em; width: 1.28571429em; height: 1.28571429em; border-radius: 500rem; border: 0.2em solid rgba(0, 0, 0, 0.1); } .ui.loading.dropdown > i.icon:after { position: absolute; content: ''; top: 50%; left: 50%; box-shadow: 0px 0px 0px 1px transparent; margin: -0.64285714em 0em 0em -0.64285714em; width: 1.28571429em; height: 1.28571429em; -webkit-animation: dropdown-spin 0.6s linear; animation: dropdown-spin 0.6s linear; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; border-radius: 500rem; border-color: #767676 transparent transparent; border-style: solid; border-width: 0.2em; } /* Coupling */ .ui.loading.dropdown.button > i.icon:before, .ui.loading.dropdown.button > i.icon:after { display: none; } @-webkit-keyframes dropdown-spin { from { -webkit-transform: rotate(0deg); transform: rotate(0deg); } to { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes dropdown-spin { from { -webkit-transform: rotate(0deg); transform: rotate(0deg); } to { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } /*-------------------- Default Text ----------------------*/ .ui.dropdown:not(.button) > .default.text, .ui.default.dropdown:not(.button) > .text { color: rgba(191, 191, 191, 0.87); } .ui.dropdown:not(.button) > input:focus + .default.text, .ui.default.dropdown:not(.button) > input:focus + .text { color: rgba(115, 115, 115, 0.87); } /*-------------------- Loading ----------------------*/ .ui.loading.dropdown > .text { -webkit-transition: none; transition: none; } /* Used To Check Position */ .ui.dropdown .loading.menu { display: block; visibility: hidden; z-index: -1; } /*-------------------- Keyboard Select ----------------------*/ /* Selected Item */ .ui.dropdown.selected, .ui.dropdown .menu .selected.item { background: rgba(0, 0, 0, 0.03); color: rgba(0, 0, 0, 0.95); } /*-------------------- Search Filtered ----------------------*/ /* Filtered Item */ .ui.dropdown > .filtered.text { visibility: hidden; } .ui.dropdown .filtered.item { display: none !important; } /*-------------------- Error ----------------------*/ .ui.dropdown.error, .ui.dropdown.error > .text, .ui.dropdown.error > .default.text { color: #9F3A38; } .ui.selection.dropdown.error { background: #FFF6F6; border-color: #E0B4B4; } .ui.selection.dropdown.error:hover { border-color: #E0B4B4; } .ui.dropdown.error > .menu, .ui.dropdown.error > .menu .menu { border-color: #E0B4B4; } .ui.dropdown.error > .menu > .item { color: #9F3A38; } .ui.multiple.selection.error.dropdown > .label { border-color: #E0B4B4; } /* Item Hover */ .ui.dropdown.error > .menu > .item:hover { background-color: #FFF2F2; } /* Item Active */ .ui.dropdown.error > .menu .active.item { background-color: #FDCFCF; } /*-------------------- Disabled ----------------------*/ /* Disabled */ .ui.disabled.dropdown, .ui.dropdown .menu > .disabled.item { cursor: default; pointer-events: none; opacity: 0.45; } /******************************* Variations *******************************/ /*-------------- Direction ---------------*/ /* Flyout Direction */ .ui.dropdown .menu { left: 0px; } /* Default Side (Right) */ .ui.dropdown .right.menu > .menu, .ui.dropdown .menu .right.menu { left: 100% !important; right: auto !important; border-radius: 0.28571429rem !important; } /* Left Flyout Menu */ .ui.dropdown > .left.menu .menu, .ui.dropdown .menu .left.menu { left: auto !important; right: 100% !important; border-radius: 0.28571429rem !important; } .ui.dropdown .item .left.dropdown.icon, .ui.dropdown .left.menu .item .dropdown.icon { width: auto; float: left; margin: 0em 0.78571429rem 0em 0em; } .ui.dropdown .item .left.dropdown.icon, .ui.dropdown .left.menu .item .dropdown.icon { width: auto; float: left; margin: 0em 0.78571429rem 0em 0em; } .ui.dropdown .item .left.dropdown.icon + .text, .ui.dropdown .left.menu .item .dropdown.icon + .text { margin-left: 1em; } /*-------------- Upward ---------------*/ /* Upward Main Menu */ .ui.upward.dropdown > .menu { top: auto; bottom: 100%; box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, 0.08); border-radius: 0.28571429rem 0.28571429rem 0em 0em; } /* Upward Sub Menu */ .ui.dropdown .upward.menu { top: auto !important; bottom: 0 !important; } /* Active Upward */ .ui.simple.upward.active.dropdown, .ui.simple.upward.dropdown:hover { border-radius: 0.28571429rem 0.28571429rem 0em 0em !important; } .ui.upward.dropdown.button:not(.pointing):not(.floating).active { border-radius: 0.28571429rem 0.28571429rem 0em 0em; } /* Selection */ .ui.upward.selection.dropdown .menu { border-top-width: 1px !important; border-bottom-width: 0px !important; box-shadow: 0px -2px 3px 0px rgba(0, 0, 0, 0.08); } .ui.upward.selection.dropdown:hover { box-shadow: 0px 0px 2px 0px rgba(0, 0, 0, 0.05); } /* Active Upward */ .ui.active.upward.selection.dropdown { border-radius: 0em 0em 0.28571429rem 0.28571429rem !important; } /* Visible Upward */ .ui.upward.selection.dropdown.visible { box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, 0.08); border-radius: 0em 0em 0.28571429rem 0.28571429rem !important; } /* Visible Hover Upward */ .ui.upward.active.selection.dropdown:hover { box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, 0.05); } .ui.upward.active.selection.dropdown:hover .menu { box-shadow: 0px -2px 3px 0px rgba(0, 0, 0, 0.08); } /*-------------- Simple ---------------*/ /* Selection Menu */ .ui.scrolling.dropdown .menu, .ui.dropdown .scrolling.menu { overflow-x: hidden; overflow-y: auto; } .ui.scrolling.dropdown .menu { overflow-x: hidden; overflow-y: auto; -webkit-backface-visibility: hidden; backface-visibility: hidden; -webkit-overflow-scrolling: touch; min-width: 100% !important; width: auto !important; } .ui.dropdown .scrolling.menu { position: static; overflow-y: auto; border: none; box-shadow: none !important; border-radius: 0 !important; margin: 0 !important; min-width: 100% !important; width: auto !important; border-top: 1px solid rgba(34, 36, 38, 0.15); } .ui.scrolling.dropdown .menu .item.item.item, .ui.dropdown .scrolling.menu > .item.item.item { border-top: none; padding-right: calc( 1.14285714rem + 17px ) !important; } .ui.scrolling.dropdown .menu .item:first-child, .ui.dropdown .scrolling.menu .item:first-child { border-top: none; } .ui.dropdown > .animating.menu .scrolling.menu, .ui.dropdown > .visible.menu .scrolling.menu { display: block; } /* Scrollbar in IE */ @media all and (-ms-high-contrast: none) { .ui.scrolling.dropdown .menu, .ui.dropdown .scrolling.menu { min-width: calc(100% - 17px ); } } @media only screen and (max-width: 767px) { .ui.scrolling.dropdown .menu, .ui.dropdown .scrolling.menu { max-height: 10.28571429rem; } } @media only screen and (min-width: 768px) { .ui.scrolling.dropdown .menu, .ui.dropdown .scrolling.menu { max-height: 15.42857143rem; } } @media only screen and (min-width: 992px) { .ui.scrolling.dropdown .menu, .ui.dropdown .scrolling.menu { max-height: 20.57142857rem; } } @media only screen and (min-width: 1920px) { .ui.scrolling.dropdown .menu, .ui.dropdown .scrolling.menu { max-height: 20.57142857rem; } } /*-------------- Simple ---------------*/ /* Displays without javascript */ .ui.simple.dropdown .menu:before, .ui.simple.dropdown .menu:after { display: none; } .ui.simple.dropdown .menu { position: absolute; display: block; overflow: hidden; top: -9999px !important; opacity: 0; width: 0; height: 0; -webkit-transition: opacity 0.1s ease; transition: opacity 0.1s ease; } .ui.simple.active.dropdown, .ui.simple.dropdown:hover { border-bottom-left-radius: 0em !important; border-bottom-right-radius: 0em !important; } .ui.simple.active.dropdown > .menu, .ui.simple.dropdown:hover > .menu { overflow: visible; width: auto; height: auto; top: 100% !important; opacity: 1; } .ui.simple.dropdown > .menu > .item:active > .menu, .ui.simple.dropdown:hover > .menu > .item:hover > .menu { overflow: visible; width: auto; height: auto; top: 0% !important; left: 100% !important; opacity: 1; } .ui.simple.disabled.dropdown:hover .menu { display: none; height: 0px; width: 0px; overflow: hidden; } /* Visible */ .ui.simple.visible.dropdown > .menu { display: block; } /*-------------- Fluid ---------------*/ .ui.fluid.dropdown { display: block; width: 100%; min-width: 0em; } .ui.fluid.dropdown > .dropdown.icon { float: right; } /*-------------- Floating ---------------*/ .ui.floating.dropdown .menu { left: 0; right: auto; box-shadow: 0px 2px 4px 0px rgba(34, 36, 38, 0.12), 0px 2px 10px 0px rgba(34, 36, 38, 0.15) !important; border-radius: 0.28571429rem !important; } .ui.floating.dropdown > .menu { margin-top: 0.5em !important; border-radius: 0.28571429rem !important; } /*-------------- Pointing ---------------*/ .ui.pointing.dropdown > .menu { top: 100%; margin-top: 0.78571429rem; border-radius: 0.28571429rem; } .ui.pointing.dropdown > .menu:after { display: block; position: absolute; pointer-events: none; content: ''; visibility: visible; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); width: 0.5em; height: 0.5em; box-shadow: -1px -1px 0px 1px rgba(34, 36, 38, 0.15); background: #FFFFFF; z-index: 2; } .ui.pointing.dropdown > .menu:after { top: -0.25em; left: 50%; margin: 0em 0em 0em -0.25em; } /* Top Left Pointing */ .ui.top.left.pointing.dropdown > .menu { top: 100%; bottom: auto; left: 0%; right: auto; margin: 1em 0em 0em; } .ui.top.left.pointing.dropdown > .menu { top: 100%; bottom: auto; left: 0%; right: auto; margin: 1em 0em 0em; } .ui.top.left.pointing.dropdown > .menu:after { top: -0.25em; left: 1em; right: auto; margin: 0em; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); } /* Top Right Pointing */ .ui.top.right.pointing.dropdown > .menu { top: 100%; bottom: auto; right: 0%; left: auto; margin: 1em 0em 0em; } .ui.top.right.pointing.dropdown > .menu:after { top: -0.25em; left: auto; right: 1em; margin: 0em; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); } /* Left Pointing */ .ui.left.pointing.dropdown > .menu { top: 0%; left: 100%; right: auto; margin: 0em 0em 0em 1em; } .ui.left.pointing.dropdown > .menu:after { top: 1em; left: -0.25em; margin: 0em 0em 0em 0em; -webkit-transform: rotate(-45deg); -ms-transform: rotate(-45deg); transform: rotate(-45deg); } /* Right Pointing */ .ui.right.pointing.dropdown > .menu { top: 0%; left: auto; right: 100%; margin: 0em 1em 0em 0em; } .ui.right.pointing.dropdown > .menu:after { top: 1em; left: auto; right: -0.25em; margin: 0em 0em 0em 0em; -webkit-transform: rotate(135deg); -ms-transform: rotate(135deg); transform: rotate(135deg); } /* Bottom Pointing */ .ui.bottom.pointing.dropdown > .menu { top: auto; bottom: 100%; left: 0%; right: auto; margin: 0em 0em 1em; } .ui.bottom.pointing.dropdown > .menu:after { top: auto; bottom: -0.25em; right: auto; margin: 0em; -webkit-transform: rotate(-135deg); -ms-transform: rotate(-135deg); transform: rotate(-135deg); } /* Reverse Sub-Menu Direction */ .ui.bottom.pointing.dropdown > .menu .menu { top: auto !important; bottom: 0px !important; } /* Bottom Left */ .ui.bottom.left.pointing.dropdown > .menu { left: 0%; right: auto; } .ui.bottom.left.pointing.dropdown > .menu:after { left: 1em; right: auto; } /* Bottom Right */ .ui.bottom.right.pointing.dropdown > .menu { right: 0%; left: auto; } .ui.bottom.right.pointing.dropdown > .menu:after { left: auto; right: 1em; } /* Upward pointing */ .ui.upward.pointing.dropdown > .menu, .ui.upward.top.pointing.dropdown > .menu { top: auto; bottom: 100%; margin: 0em 0em 0.78571429rem; border-radius: 0.28571429rem; } .ui.upward.pointing.dropdown > .menu:after, .ui.upward.top.pointing.dropdown > .menu:after { top: 100%; bottom: auto; box-shadow: 1px 1px 0px 1px rgba(34, 36, 38, 0.15); margin: -0.25em 0em 0em; } /******************************* Theme Overrides *******************************/ /* Dropdown Carets */ @font-face { font-family: 'Dropdown'; src: url(data:application/x-font-ttf;charset=utf-8;base64,AAEAAAALAIAAAwAwT1MvMggjB5AAAAC8AAAAYGNtYXAPfuIIAAABHAAAAExnYXNwAAAAEAAAAWgAAAAIZ2x5Zjo82LgAAAFwAAABVGhlYWQAQ88bAAACxAAAADZoaGVhAwcB6QAAAvwAAAAkaG10eAS4ABIAAAMgAAAAIGxvY2EBNgDeAAADQAAAABJtYXhwAAoAFgAAA1QAAAAgbmFtZVcZpu4AAAN0AAABRXBvc3QAAwAAAAAEvAAAACAAAwIAAZAABQAAAUwBZgAAAEcBTAFmAAAA9QAZAIQAAAAAAAAAAAAAAAAAAAABEAAAAAAAAAAAAAAAAAAAAABAAADw2gHg/+D/4AHgACAAAAABAAAAAAAAAAAAAAAgAAAAAAACAAAAAwAAABQAAwABAAAAFAAEADgAAAAKAAgAAgACAAEAIPDa//3//wAAAAAAIPDX//3//wAB/+MPLQADAAEAAAAAAAAAAAAAAAEAAf//AA8AAQAAAAAAAAAAAAIAADc5AQAAAAABAAAAAAAAAAAAAgAANzkBAAAAAAEAAAAAAAAAAAACAAA3OQEAAAAAAQAAAIABJQElABMAABM0NzY3BTYXFhUUDwEGJwYvASY1AAUGBwEACAUGBoAFCAcGgAUBEgcGBQEBAQcECQYHfwYBAQZ/BwYAAQAAAG4BJQESABMAADc0PwE2MzIfARYVFAcGIyEiJyY1AAWABgcIBYAGBgUI/wAHBgWABwaABQWABgcHBgUFBgcAAAABABIASQC3AW4AEwAANzQ/ATYXNhcWHQEUBwYnBi8BJjUSBoAFCAcFBgYFBwgFgAbbBwZ/BwEBBwQJ/wgEBwEBB38GBgAAAAABAAAASQClAW4AEwAANxE0NzYzMh8BFhUUDwEGIyInJjUABQYHCAWABgaABQgHBgVbAQAIBQYGgAUIBwWABgYFBwAAAAEAAAABAADZuaKOXw889QALAgAAAAAA0ABHWAAAAADQAEdYAAAAAAElAW4AAAAIAAIAAAAAAAAAAQAAAeD/4AAAAgAAAAAAASUAAQAAAAAAAAAAAAAAAAAAAAgAAAAAAAAAAAAAAAABAAAAASUAAAElAAAAtwASALcAAAAAAAAACgAUAB4AQgBkAIgAqgAAAAEAAAAIABQAAQAAAAAAAgAAAAAAAAAAAAAAAAAAAAAAAAAOAK4AAQAAAAAAAQAOAAAAAQAAAAAAAgAOAEcAAQAAAAAAAwAOACQAAQAAAAAABAAOAFUAAQAAAAAABQAWAA4AAQAAAAAABgAHADIAAQAAAAAACgA0AGMAAwABBAkAAQAOAAAAAwABBAkAAgAOAEcAAwABBAkAAwAOACQAAwABBAkABAAOAFUAAwABBAkABQAWAA4AAwABBAkABgAOADkAAwABBAkACgA0AGMAaQBjAG8AbQBvAG8AbgBWAGUAcgBzAGkAbwBuACAAMQAuADAAaQBjAG8AbQBvAG8Abmljb21vb24AaQBjAG8AbQBvAG8AbgBSAGUAZwB1AGwAYQByAGkAYwBvAG0AbwBvAG4ARgBvAG4AdAAgAGcAZQBuAGUAcgBhAHQAZQBkACAAYgB5ACAASQBjAG8ATQBvAG8AbgAuAAAAAAMAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA=) format('truetype'), url(data:application/font-woff;charset=utf-8;base64,d09GRk9UVE8AAAVwAAoAAAAABSgAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAABDRkYgAAAA9AAAAdkAAAHZLDXE/09TLzIAAALQAAAAYAAAAGAIIweQY21hcAAAAzAAAABMAAAATA9+4ghnYXNwAAADfAAAAAgAAAAIAAAAEGhlYWQAAAOEAAAANgAAADYAQ88baGhlYQAAA7wAAAAkAAAAJAMHAelobXR4AAAD4AAAACAAAAAgBLgAEm1heHAAAAQAAAAABgAAAAYACFAAbmFtZQAABAgAAAFFAAABRVcZpu5wb3N0AAAFUAAAACAAAAAgAAMAAAEABAQAAQEBCGljb21vb24AAQIAAQA6+BwC+BsD+BgEHgoAGVP/i4seCgAZU/+LiwwHi2v4lPh0BR0AAACIDx0AAACNER0AAAAJHQAAAdASAAkBAQgPERMWGyAlKmljb21vb25pY29tb29udTB1MXUyMHVGMEQ3dUYwRDh1RjBEOXVGMERBAAACAYkABgAIAgABAAQABwAKAA0AVgCfAOgBL/yUDvyUDvyUDvuUDvtvi/emFYuQjZCOjo+Pj42Qiwj3lIsFkIuQiY6Hj4iNhouGi4aJh4eHCPsU+xQFiIiGiYaLhouHjYeOCPsU9xQFiI+Jj4uQCA77b4v3FBWLkI2Pjo8I9xT3FAWPjo+NkIuQi5CJjogI9xT7FAWPh42Hi4aLhomHh4eIiIaJhosI+5SLBYaLh42HjoiPiY+LkAgO+92d928Vi5CNkI+OCPcU9xQFjo+QjZCLkIuPiY6Hj4iNhouGCIv7lAWLhomHh4iIh4eJhouGi4aNiI8I+xT3FAWHjomPi5AIDvvdi+YVi/eUBYuQjZCOjo+Pj42Qi5CLkImOhwj3FPsUBY+IjYaLhouGiYeHiAj7FPsUBYiHhomGi4aLh42Hj4iOiY+LkAgO+JQU+JQViwwKAAAAAAMCAAGQAAUAAAFMAWYAAABHAUwBZgAAAPUAGQCEAAAAAAAAAAAAAAAAAAAAARAAAAAAAAAAAAAAAAAAAAAAQAAA8NoB4P/g/+AB4AAgAAAAAQAAAAAAAAAAAAAAIAAAAAAAAgAAAAMAAAAUAAMAAQAAABQABAA4AAAACgAIAAIAAgABACDw2v/9//8AAAAAACDw1//9//8AAf/jDy0AAwABAAAAAAAAAAAAAAABAAH//wAPAAEAAAABAAA5emozXw889QALAgAAAAAA0ABHWAAAAADQAEdYAAAAAAElAW4AAAAIAAIAAAAAAAAAAQAAAeD/4AAAAgAAAAAAASUAAQAAAAAAAAAAAAAAAAAAAAgAAAAAAAAAAAAAAAABAAAAASUAAAElAAAAtwASALcAAAAAUAAACAAAAAAADgCuAAEAAAAAAAEADgAAAAEAAAAAAAIADgBHAAEAAAAAAAMADgAkAAEAAAAAAAQADgBVAAEAAAAAAAUAFgAOAAEAAAAAAAYABwAyAAEAAAAAAAoANABjAAMAAQQJAAEADgAAAAMAAQQJAAIADgBHAAMAAQQJAAMADgAkAAMAAQQJAAQADgBVAAMAAQQJAAUAFgAOAAMAAQQJAAYADgA5AAMAAQQJAAoANABjAGkAYwBvAG0AbwBvAG4AVgBlAHIAcwBpAG8AbgAgADEALgAwAGkAYwBvAG0AbwBvAG5pY29tb29uAGkAYwBvAG0AbwBvAG4AUgBlAGcAdQBsAGEAcgBpAGMAbwBtAG8AbwBuAEYAbwBuAHQAIABnAGUAbgBlAHIAYQB0AGUAZAAgAGIAeQAgAEkAYwBvAE0AbwBvAG4ALgAAAAADAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA) format('woff'); font-weight: normal; font-style: normal; } .ui.dropdown > .dropdown.icon { font-family: 'Dropdown'; line-height: 1; height: 1em; width: 1.23em; -webkit-backface-visibility: hidden; backface-visibility: hidden; font-weight: normal; font-style: normal; text-align: center; } .ui.dropdown > .dropdown.icon { width: auto; } .ui.dropdown > .dropdown.icon:before { content: '\f0d7'; font-size: 1.25em; color:#424242; } /* Sub Menu */ .ui.dropdown .menu .item .dropdown.icon:before { content: '\f0da' /*rtl:'\f0d9'*/; } .ui.dropdown .item .left.dropdown.icon:before, .ui.dropdown .left.menu .item .dropdown.icon:before { content: "\f0d9" /*rtl:"\f0da"*/; } /* Vertical Menu Dropdown */ .ui.vertical.menu .dropdown.item > .dropdown.icon:before { content: "\f0da" /*rtl:"\f0d9"*/; } /* Icons for Reference .dropdown.down.icon { content: "\f0d7"; } .dropdown.up.icon { content: "\f0d8"; } .dropdown.left.icon { content: "\f0d9"; } .dropdown.icon.icon { content: "\f0da"; } */ /******************************* User Overrides *******************************/ i.icon.cancel:before, i.icon.close:before, i.icon.delete:before, i.icon.x:before { content: "\f00d"; font-family: FontAwesome; margin-left: 6px; } i.icon { font-style: normal; cursor: pointer; } i.icon:before { background: 0 0!important; } .ui.label { display: inline-block; line-height: 1; vertical-align: baseline; margin: 0 .14285714em; background-color: #E8E8E8; background-image: none; padding: .5833em .833em; color: rgba(0,0,0,.6); text-transform: none; font-weight: 700; border: 0 solid transparent; border-radius: .28571429rem; -webkit-transition: background .1s ease; transition: background .1s ease; } a.ui.label:hover, a.ui.labels .label:hover { background-color: #E0E0E0; border-color: #E0E0E0; background-image: none; color: rgba(0,0,0,.8); } /*! * Font Awesome 4.6.3 by @davegandy - http://fontawesome.io - @fontawesome * License - http://fontawesome.io/license (Font: SIL OFL 1.1, CSS: MIT License) */ /* FONT PATH * -------------------------- */ @font-face { font-family: 'FontAwesome'; src: url('/assets/fonts/fontawesome-webfont.eot?v=4.6.3'); src: url('/assets/fonts/fontawesome-webfont.eot?#iefix&v=4.6.3') format('embedded-opentype'), url('/assets/fonts/fontawesome-webfont.woff2?v=4.6.3') format('woff2'), url('/assets/fonts/fontawesome-webfont.woff?v=4.6.3') format('woff'), url('/assets/fonts/fontawesome-webfont.ttf?v=4.6.3') format('truetype'), url('/assets/fonts/fontawesome-webfont.svg?v=4.6.3#fontawesomeregular') format('svg'); font-weight: normal; font-style: normal; } .fa { display: inline-block; font: normal normal normal 14px/1 FontAwesome; font-size: inherit; text-rendering: auto; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* makes the font 33% larger relative to the icon container */ .fa-lg { font-size: 1.33333333em; line-height: 0.75em; vertical-align: -15%; } .fa-2x { font-size: 2em; } .fa-3x { font-size: 3em; } .fa-4x { font-size: 4em; } .fa-5x { font-size: 5em; } .fa-fw { width: 1.28571429em; text-align: center; } .fa-ul { padding-left: 0; margin-left: 2.14285714em; list-style-type: none; } .fa-ul > li { position: relative; } .fa-li { position: absolute; left: -2.14285714em; width: 2.14285714em; top: 0.14285714em; text-align: center; } .fa-li.fa-lg { left: -1.85714286em; } .fa-border { padding: .2em .25em .15em; border: solid 0.08em #eeeeee; border-radius: .1em; } .fa-pull-left { float: left; } .fa-pull-right { float: right; } .fa.fa-pull-left { margin-right: .3em; } .fa.fa-pull-right { margin-left: .3em; } /* Deprecated as of 4.4.0 */ .pull-right { float: right; } .pull-left { float: left; } .fa.pull-left { margin-right: .3em; } .fa.pull-right { margin-left: .3em; } .fa-spin { -webkit-animation: fa-spin 2s infinite linear; animation: fa-spin 2s infinite linear; } .fa-pulse { -webkit-animation: fa-spin 1s infinite steps(8); animation: fa-spin 1s infinite steps(8); } @-webkit-keyframes fa-spin { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(359deg); transform: rotate(359deg); } } @keyframes fa-spin { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(359deg); transform: rotate(359deg); } } .fa-rotate-90 { -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=1)"; -webkit-transform: rotate(90deg); -ms-transform: rotate(90deg); transform: rotate(90deg); } .fa-rotate-180 { -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=2)"; -webkit-transform: rotate(180deg); -ms-transform: rotate(180deg); transform: rotate(180deg); } .fa-rotate-270 { -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=3)"; -webkit-transform: rotate(270deg); -ms-transform: rotate(270deg); transform: rotate(270deg); } .fa-flip-horizontal { -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=0, mirror=1)"; -webkit-transform: scale(-1, 1); -ms-transform: scale(-1, 1); transform: scale(-1, 1); } .fa-flip-vertical { -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=2, mirror=1)"; -webkit-transform: scale(1, -1); -ms-transform: scale(1, -1); transform: scale(1, -1); } :root .fa-rotate-90, :root .fa-rotate-180, :root .fa-rotate-270, :root .fa-flip-horizontal, :root .fa-flip-vertical { filter: none; } .fa-stack { position: relative; display: inline-block; width: 2em; height: 2em; line-height: 2em; vertical-align: middle; } .fa-stack-1x, .fa-stack-2x { position: absolute; left: 0; width: 100%; text-align: center; } .fa-stack-1x { line-height: inherit; } .fa-stack-2x { font-size: 2em; } .fa-inverse { color: #ffffff; } /* Font Awesome uses the Unicode Private Use Area (PUA) to ensure screen readers do not read off random characters that represent icons */ .fa-glass:before { content: "\f000"; } .fa-music:before { content: "\f001"; } .fa-search:before { content: "\f002"; } .fa-envelope-o:before { content: "\f003"; } .fa-heart:before { content: "\f004"; } .fa-star:before { content: "\f005"; } .fa-star-o:before { content: "\f006"; } .fa-user:before { content: "\f007"; } .fa-film:before { content: "\f008"; } .fa-th-large:before { content: "\f009"; } .fa-th:before { content: "\f00a"; } .fa-th-list:before { content: "\f00b"; } .fa-check:before { content: "\f00c"; } .fa-remove:before, .fa-close:before, .fa-times:before { content: "\f00d"; } .fa-search-plus:before { content: "\f00e"; } .fa-search-minus:before { content: "\f010"; } .fa-power-off:before { content: "\f011"; } .fa-signal:before { content: "\f012"; } .fa-gear:before, .fa-cog:before { content: "\f013"; } .fa-trash-o:before { content: "\f014"; } .fa-home:before { content: "\f015"; } .fa-file-o:before { content: "\f016"; } .fa-clock-o:before { content: "\f017"; } .fa-road:before { content: "\f018"; } .fa-download:before { content: "\f019"; } .fa-arrow-circle-o-down:before { content: "\f01a"; } .fa-arrow-circle-o-up:before { content: "\f01b"; } .fa-inbox:before { content: "\f01c"; } .fa-play-circle-o:before { content: "\f01d"; } .fa-rotate-right:before, .fa-repeat:before { content: "\f01e"; } .fa-refresh:before { content: "\f021"; } .fa-list-alt:before { content: "\f022"; } .fa-lock:before { content: "\f023"; } .fa-flag:before { content: "\f024"; } .fa-headphones:before { content: "\f025"; } .fa-volume-off:before { content: "\f026"; } .fa-volume-down:before { content: "\f027"; } .fa-volume-up:before { content: "\f028"; } .fa-qrcode:before { content: "\f029"; } .fa-barcode:before { content: "\f02a"; } .fa-tag:before { content: "\f02b"; } .fa-tags:before { content: "\f02c"; } .fa-book:before { content: "\f02d"; } .fa-bookmark:before { content: "\f02e"; } .fa-print:before { content: "\f02f"; } .fa-camera:before { content: "\f030"; } .fa-font:before { content: "\f031"; } .fa-bold:before { content: "\f032"; } .fa-italic:before { content: "\f033"; } .fa-text-height:before { content: "\f034"; } .fa-text-width:before { content: "\f035"; } .fa-align-left:before { content: "\f036"; } .fa-align-center:before { content: "\f037"; } .fa-align-right:before { content: "\f038"; } .fa-align-justify:before { content: "\f039"; } .fa-list:before { content: "\f03a"; } .fa-dedent:before, .fa-outdent:before { content: "\f03b"; } .fa-indent:before { content: "\f03c"; } .fa-video-camera:before { content: "\f03d"; } .fa-photo:before, .fa-image:before, .fa-picture-o:before { content: "\f03e"; } .fa-pencil:before { content: "\f040"; } .fa-map-marker:before { content: "\f041"; } .fa-adjust:before { content: "\f042"; } .fa-tint:before { content: "\f043"; } .fa-edit:before, .fa-pencil-square-o:before { content: "\f044"; } .fa-share-square-o:before { content: "\f045"; } .fa-check-square-o:before { content: "\f046"; } .fa-arrows:before { content: "\f047"; } .fa-step-backward:before { content: "\f048"; } .fa-fast-backward:before { content: "\f049"; } .fa-backward:before { content: "\f04a"; } .fa-play:before { content: "\f04b"; } .fa-pause:before { content: "\f04c"; } .fa-stop:before { content: "\f04d"; } .fa-forward:before { content: "\f04e"; } .fa-fast-forward:before { content: "\f050"; } .fa-step-forward:before { content: "\f051"; } .fa-eject:before { content: "\f052"; } .fa-chevron-left:before { content: "\f053"; } .fa-chevron-right:before { content: "\f054"; } .fa-plus-circle:before { content: "\f055"; } .fa-minus-circle:before { content: "\f056"; } .fa-times-circle:before { content: "\f057"; } .fa-check-circle:before { content: "\f058"; } .fa-question-circle:before { content: "\f059"; } .fa-info-circle:before { content: "\f05a"; } .fa-crosshairs:before { content: "\f05b"; } .fa-times-circle-o:before { content: "\f05c"; } .fa-check-circle-o:before { content: "\f05d"; } .fa-ban:before { content: "\f05e"; } .fa-arrow-left:before { content: "\f060"; } .fa-arrow-right:before { content: "\f061"; } .fa-arrow-up:before { content: "\f062"; } .fa-arrow-down:before { content: "\f063"; } .fa-mail-forward:before, .fa-share:before { content: "\f064"; } .fa-expand:before { content: "\f065"; } .fa-compress:before { content: "\f066"; } .fa-plus:before { content: "\f067"; } .fa-minus:before { content: "\f068"; } .fa-asterisk:before { content: "\f069"; } .fa-exclamation-circle:before { content: "\f06a"; } .fa-gift:before { content: "\f06b"; } .fa-leaf:before { content: "\f06c"; } .fa-fire:before { content: "\f06d"; } .fa-eye:before { content: "\f06e"; } .fa-eye-slash:before { content: "\f070"; } .fa-warning:before, .fa-exclamation-triangle:before { content: "\f071"; } .fa-plane:before { content: "\f072"; } .fa-calendar:before { content: "\f073"; } .fa-random:before { content: "\f074"; } .fa-comment:before { content: "\f075"; } .fa-magnet:before { content: "\f076"; } .fa-chevron-up:before { content: "\f077"; } .fa-chevron-down:before { content: "\f078"; } .fa-retweet:before { content: "\f079"; } .fa-shopping-cart:before { content: "\f07a"; } .fa-folder:before { content: "\f07b"; } .fa-folder-open:before { content: "\f07c"; } .fa-arrows-v:before { content: "\f07d"; } .fa-arrows-h:before { content: "\f07e"; } .fa-bar-chart-o:before, .fa-bar-chart:before { content: "\f080"; } .fa-twitter-square:before { content: "\f081"; } .fa-facebook-square:before { content: "\f082"; } .fa-camera-retro:before { content: "\f083"; } .fa-key:before { content: "\f084"; } .fa-gears:before, .fa-cogs:before { content: "\f085"; } .fa-comments:before { content: "\f086"; } .fa-thumbs-o-up:before { content: "\f087"; } .fa-thumbs-o-down:before { content: "\f088"; } .fa-star-half:before { content: "\f089"; } .fa-heart-o:before { content: "\f08a"; } .fa-sign-out:before { content: "\f08b"; } .fa-linkedin-square:before { content: "\f08c"; } .fa-thumb-tack:before { content: "\f08d"; } .fa-external-link:before { content: "\f08e"; } .fa-sign-in:before { content: "\f090"; } .fa-trophy:before { content: "\f091"; } .fa-github-square:before { content: "\f092"; } .fa-upload:before { content: "\f093"; } .fa-lemon-o:before { content: "\f094"; } .fa-phone:before { content: "\f095"; } .fa-square-o:before { content: "\f096"; } .fa-bookmark-o:before { content: "\f097"; } .fa-phone-square:before { content: "\f098"; } .fa-twitter:before { content: "\f099"; } .fa-facebook-f:before, .fa-facebook:before { content: "\f09a"; } .fa-github:before { content: "\f09b"; } .fa-unlock:before { content: "\f09c"; } .fa-credit-card:before { content: "\f09d"; } .fa-feed:before, .fa-rss:before { content: "\f09e"; } .fa-hdd-o:before { content: "\f0a0"; } .fa-bullhorn:before { content: "\f0a1"; } .fa-bell:before { content: "\f0f3"; } .fa-certificate:before { content: "\f0a3"; } .fa-hand-o-right:before { content: "\f0a4"; } .fa-hand-o-left:before { content: "\f0a5"; } .fa-hand-o-up:before { content: "\f0a6"; } .fa-hand-o-down:before { content: "\f0a7"; } .fa-arrow-circle-left:before { content: "\f0a8"; } .fa-arrow-circle-right:before { content: "\f0a9"; } .fa-arrow-circle-up:before { content: "\f0aa"; } .fa-arrow-circle-down:before { content: "\f0ab"; } .fa-globe:before { content: "\f0ac"; } .fa-wrench:before { content: "\f0ad"; } .fa-tasks:before { content: "\f0ae"; } .fa-filter:before { content: "\f0b0"; } .fa-briefcase:before { content: "\f0b1"; } .fa-arrows-alt:before { content: "\f0b2"; } .fa-group:before, .fa-users:before { content: "\f0c0"; } .fa-chain:before, .fa-link:before { content: "\f0c1"; } .fa-cloud:before { content: "\f0c2"; } .fa-flask:before { content: "\f0c3"; } .fa-cut:before, .fa-scissors:before { content: "\f0c4"; } .fa-copy:before, .fa-files-o:before { content: "\f0c5"; } .fa-paperclip:before { content: "\f0c6"; } .fa-save:before, .fa-floppy-o:before { content: "\f0c7"; } .fa-square:before { content: "\f0c8"; } .fa-navicon:before, .fa-reorder:before, .fa-bars:before { content: "\f0c9"; } .fa-list-ul:before { content: "\f0ca"; } .fa-list-ol:before { content: "\f0cb"; } .fa-strikethrough:before { content: "\f0cc"; } .fa-underline:before { content: "\f0cd"; } .fa-table:before { content: "\f0ce"; } .fa-magic:before { content: "\f0d0"; } .fa-truck:before { content: "\f0d1"; } .fa-pinterest:before { content: "\f0d2"; } .fa-pinterest-square:before { content: "\f0d3"; } .fa-google-plus-square:before { content: "\f0d4"; } .fa-google-plus:before { content: "\f0d5"; } .fa-money:before { content: "\f0d6"; } .fa-caret-down:before { content: "\f0d7"; } .fa-caret-up:before { content: "\f0d8"; } .fa-caret-left:before { content: "\f0d9"; } .fa-caret-right:before { content: "\f0da"; } .fa-columns:before { content: "\f0db"; } .fa-unsorted:before, .fa-sort:before { content: "\f0dc"; } .fa-sort-down:before, .fa-sort-desc:before { content: "\f0dd"; } .fa-sort-up:before, .fa-sort-asc:before { content: "\f0de"; } .fa-envelope:before { content: "\f0e0"; } .fa-linkedin:before { content: "\f0e1"; } .fa-rotate-left:before, .fa-undo:before { content: "\f0e2"; } .fa-legal:before, .fa-gavel:before { content: "\f0e3"; } .fa-dashboard:before, .fa-tachometer:before { content: "\f0e4"; } .fa-comment-o:before { content: "\f0e5"; } .fa-comments-o:before { content: "\f0e6"; } .fa-flash:before, .fa-bolt:before { content: "\f0e7"; } .fa-sitemap:before { content: "\f0e8"; } .fa-umbrella:before { content: "\f0e9"; } .fa-paste:before, .fa-clipboard:before { content: "\f0ea"; } .fa-lightbulb-o:before { content: "\f0eb"; } .fa-exchange:before { content: "\f0ec"; } .fa-cloud-download:before { content: "\f0ed"; } .fa-cloud-upload:before { content: "\f0ee"; } .fa-user-md:before { content: "\f0f0"; } .fa-stethoscope:before { content: "\f0f1"; } .fa-suitcase:before { content: "\f0f2"; } .fa-bell-o:before { content: "\f0a2"; } .fa-coffee:before { content: "\f0f4"; } .fa-cutlery:before { content: "\f0f5"; } .fa-file-text-o:before { content: "\f0f6"; } .fa-building-o:before { content: "\f0f7"; } .fa-hospital-o:before { content: "\f0f8"; } .fa-ambulance:before { content: "\f0f9"; } .fa-medkit:before { content: "\f0fa"; } .fa-fighter-jet:before { content: "\f0fb"; } .fa-beer:before { content: "\f0fc"; } .fa-h-square:before { content: "\f0fd"; } .fa-plus-square:before { content: "\f0fe"; } .fa-angle-double-left:before { content: "\f100"; } .fa-angle-double-right:before { content: "\f101"; } .fa-angle-double-up:before { content: "\f102"; } .fa-angle-double-down:before { content: "\f103"; } .fa-angle-left:before { content: "\f104"; } .fa-angle-right:before { content: "\f105"; } .fa-angle-up:before { content: "\f106"; } .fa-angle-down:before { content: "\f107"; } .fa-desktop:before { content: "\f108"; } .fa-laptop:before { content: "\f109"; } .fa-tablet:before { content: "\f10a"; } .fa-mobile-phone:before, .fa-mobile:before { content: "\f10b"; } .fa-circle-o:before { content: "\f10c"; } .fa-quote-left:before { content: "\f10d"; } .fa-quote-right:before { content: "\f10e"; } .fa-spinner:before { content: "\f110"; } .fa-circle:before { content: "\f111"; } .fa-mail-reply:before, .fa-reply:before { content: "\f112"; } .fa-github-alt:before { content: "\f113"; } .fa-folder-o:before { content: "\f114"; } .fa-folder-open-o:before { content: "\f115"; } .fa-smile-o:before { content: "\f118"; } .fa-frown-o:before { content: "\f119"; } .fa-meh-o:before { content: "\f11a"; } .fa-gamepad:before { content: "\f11b"; } .fa-keyboard-o:before { content: "\f11c"; } .fa-flag-o:before { content: "\f11d"; } .fa-flag-checkered:before { content: "\f11e"; } .fa-terminal:before { content: "\f120"; } .fa-code:before { content: "\f121"; } .fa-mail-reply-all:before, .fa-reply-all:before { content: "\f122"; } .fa-star-half-empty:before, .fa-star-half-full:before, .fa-star-half-o:before { content: "\f123"; } .fa-location-arrow:before { content: "\f124"; } .fa-crop:before { content: "\f125"; } .fa-code-fork:before { content: "\f126"; } .fa-unlink:before, .fa-chain-broken:before { content: "\f127"; } .fa-question:before { content: "\f128"; } .fa-info:before { content: "\f129"; } .fa-exclamation:before { content: "\f12a"; } .fa-superscript:before { content: "\f12b"; } .fa-subscript:before { content: "\f12c"; } .fa-eraser:before { content: "\f12d"; } .fa-puzzle-piece:before { content: "\f12e"; } .fa-microphone:before { content: "\f130"; } .fa-microphone-slash:before { content: "\f131"; } .fa-shield:before { content: "\f132"; } .fa-calendar-o:before { content: "\f133"; } .fa-fire-extinguisher:before { content: "\f134"; } .fa-rocket:before { content: "\f135"; } .fa-maxcdn:before { content: "\f136"; } .fa-chevron-circle-left:before { content: "\f137"; } .fa-chevron-circle-right:before { content: "\f138"; } .fa-chevron-circle-up:before { content: "\f139"; } .fa-chevron-circle-down:before { content: "\f13a"; } .fa-html5:before { content: "\f13b"; } .fa-css3:before { content: "\f13c"; } .fa-anchor:before { content: "\f13d"; } .fa-unlock-alt:before { content: "\f13e"; } .fa-bullseye:before { content: "\f140"; } .fa-ellipsis-h:before { content: "\f141"; } .fa-ellipsis-v:before { content: "\f142"; } .fa-rss-square:before { content: "\f143"; } .fa-play-circle:before { content: "\f144"; } .fa-ticket:before { content: "\f145"; } .fa-minus-square:before { content: "\f146"; } .fa-minus-square-o:before { content: "\f147"; } .fa-level-up:before { content: "\f148"; } .fa-level-down:before { content: "\f149"; } .fa-check-square:before { content: "\f14a"; } .fa-pencil-square:before { content: "\f14b"; } .fa-external-link-square:before { content: "\f14c"; } .fa-share-square:before { content: "\f14d"; } .fa-compass:before { content: "\f14e"; } .fa-toggle-down:before, .fa-caret-square-o-down:before { content: "\f150"; } .fa-toggle-up:before, .fa-caret-square-o-up:before { content: "\f151"; } .fa-toggle-right:before, .fa-caret-square-o-right:before { content: "\f152"; } .fa-euro:before, .fa-eur:before { content: "\f153"; } .fa-gbp:before { content: "\f154"; } .fa-dollar:before, .fa-usd:before { content: "\f155"; } .fa-rupee:before, .fa-inr:before { content: "\f156"; } .fa-cny:before, .fa-rmb:before, .fa-yen:before, .fa-jpy:before { content: "\f157"; } .fa-ruble:before, .fa-rouble:before, .fa-rub:before { content: "\f158"; } .fa-won:before, .fa-krw:before { content: "\f159"; } .fa-bitcoin:before, .fa-btc:before { content: "\f15a"; } .fa-file:before { content: "\f15b"; } .fa-file-text:before { content: "\f15c"; } .fa-sort-alpha-asc:before { content: "\f15d"; } .fa-sort-alpha-desc:before { content: "\f15e"; } .fa-sort-amount-asc:before { content: "\f160"; } .fa-sort-amount-desc:before { content: "\f161"; } .fa-sort-numeric-asc:before { content: "\f162"; } .fa-sort-numeric-desc:before { content: "\f163"; } .fa-thumbs-up:before { content: "\f164"; } .fa-thumbs-down:before { content: "\f165"; } .fa-youtube-square:before { content: "\f166"; } .fa-youtube:before { content: "\f167"; } .fa-xing:before { content: "\f168"; } .fa-xing-square:before { content: "\f169"; } .fa-youtube-play:before { content: "\f16a"; } .fa-dropbox:before { content: "\f16b"; } .fa-stack-overflow:before { content: "\f16c"; } .fa-instagram:before { content: "\f16d"; } .fa-flickr:before { content: "\f16e"; } .fa-adn:before { content: "\f170"; } .fa-bitbucket:before { content: "\f171"; } .fa-bitbucket-square:before { content: "\f172"; } .fa-tumblr:before { content: "\f173"; } .fa-tumblr-square:before { content: "\f174"; } .fa-long-arrow-down:before { content: "\f175"; } .fa-long-arrow-up:before { content: "\f176"; } .fa-long-arrow-left:before { content: "\f177"; } .fa-long-arrow-right:before { content: "\f178"; } .fa-apple:before { content: "\f179"; } .fa-windows:before { content: "\f17a"; } .fa-android:before { content: "\f17b"; } .fa-linux:before { content: "\f17c"; } .fa-dribbble:before { content: "\f17d"; } .fa-skype:before { content: "\f17e"; } .fa-foursquare:before { content: "\f180"; } .fa-trello:before { content: "\f181"; } .fa-female:before { content: "\f182"; } .fa-male:before { content: "\f183"; } .fa-gittip:before, .fa-gratipay:before { content: "\f184"; } .fa-sun-o:before { content: "\f185"; } .fa-moon-o:before { content: "\f186"; } .fa-archive:before { content: "\f187"; } .fa-bug:before { content: "\f188"; } .fa-vk:before { content: "\f189"; } .fa-weibo:before { content: "\f18a"; } .fa-renren:before { content: "\f18b"; } .fa-pagelines:before { content: "\f18c"; } .fa-stack-exchange:before { content: "\f18d"; } .fa-arrow-circle-o-right:before { content: "\f18e"; } .fa-arrow-circle-o-left:before { content: "\f190"; } .fa-toggle-left:before, .fa-caret-square-o-left:before { content: "\f191"; } .fa-dot-circle-o:before { content: "\f192"; } .fa-wheelchair:before { content: "\f193"; } .fa-vimeo-square:before { content: "\f194"; } .fa-turkish-lira:before, .fa-try:before { content: "\f195"; } .fa-plus-square-o:before { content: "\f196"; } .fa-space-shuttle:before { content: "\f197"; } .fa-slack:before { content: "\f198"; } .fa-envelope-square:before { content: "\f199"; } .fa-wordpress:before { content: "\f19a"; } .fa-openid:before { content: "\f19b"; } .fa-institution:before, .fa-bank:before, .fa-university:before { content: "\f19c"; } .fa-mortar-board:before, .fa-graduation-cap:before { content: "\f19d"; } .fa-yahoo:before { content: "\f19e"; } .fa-google:before { content: "\f1a0"; } .fa-reddit:before { content: "\f1a1"; } .fa-reddit-square:before { content: "\f1a2"; } .fa-stumbleupon-circle:before { content: "\f1a3"; } .fa-stumbleupon:before { content: "\f1a4"; } .fa-delicious:before { content: "\f1a5"; } .fa-digg:before { content: "\f1a6"; } .fa-pied-piper-pp:before { content: "\f1a7"; } .fa-pied-piper-alt:before { content: "\f1a8"; } .fa-drupal:before { content: "\f1a9"; } .fa-joomla:before { content: "\f1aa"; } .fa-language:before { content: "\f1ab"; } .fa-fax:before { content: "\f1ac"; } .fa-building:before { content: "\f1ad"; } .fa-child:before { content: "\f1ae"; } .fa-paw:before { content: "\f1b0"; } .fa-spoon:before { content: "\f1b1"; } .fa-cube:before { content: "\f1b2"; } .fa-cubes:before { content: "\f1b3"; } .fa-behance:before { content: "\f1b4"; } .fa-behance-square:before { content: "\f1b5"; } .fa-steam:before { content: "\f1b6"; } .fa-steam-square:before { content: "\f1b7"; } .fa-recycle:before { content: "\f1b8"; } .fa-automobile:before, .fa-car:before { content: "\f1b9"; } .fa-cab:before, .fa-taxi:before { content: "\f1ba"; } .fa-tree:before { content: "\f1bb"; } .fa-spotify:before { content: "\f1bc"; } .fa-deviantart:before { content: "\f1bd"; } .fa-soundcloud:before { content: "\f1be"; } .fa-database:before { content: "\f1c0"; } .fa-file-pdf-o:before { content: "\f1c1"; } .fa-file-word-o:before { content: "\f1c2"; } .fa-file-excel-o:before { content: "\f1c3"; } .fa-file-powerpoint-o:before { content: "\f1c4"; } .fa-file-photo-o:before, .fa-file-picture-o:before, .fa-file-image-o:before { content: "\f1c5"; } .fa-file-zip-o:before, .fa-file-archive-o:before { content: "\f1c6"; } .fa-file-sound-o:before, .fa-file-audio-o:before { content: "\f1c7"; } .fa-file-movie-o:before, .fa-file-video-o:before { content: "\f1c8"; } .fa-file-code-o:before { content: "\f1c9"; } .fa-vine:before { content: "\f1ca"; } .fa-codepen:before { content: "\f1cb"; } .fa-jsfiddle:before { content: "\f1cc"; } .fa-life-bouy:before, .fa-life-buoy:before, .fa-life-saver:before, .fa-support:before, .fa-life-ring:before { content: "\f1cd"; } .fa-circle-o-notch:before { content: "\f1ce"; } .fa-ra:before, .fa-resistance:before, .fa-rebel:before { content: "\f1d0"; } .fa-ge:before, .fa-empire:before { content: "\f1d1"; } .fa-git-square:before { content: "\f1d2"; } .fa-git:before { content: "\f1d3"; } .fa-y-combinator-square:before, .fa-yc-square:before, .fa-hacker-news:before { content: "\f1d4"; } .fa-tencent-weibo:before { content: "\f1d5"; } .fa-qq:before { content: "\f1d6"; } .fa-wechat:before, .fa-weixin:before { content: "\f1d7"; } .fa-send:before, .fa-paper-plane:before { content: "\f1d8"; } .fa-send-o:before, .fa-paper-plane-o:before { content: "\f1d9"; } .fa-history:before { content: "\f1da"; } .fa-circle-thin:before { content: "\f1db"; } .fa-header:before { content: "\f1dc"; } .fa-paragraph:before { content: "\f1dd"; } .fa-sliders:before { content: "\f1de"; } .fa-share-alt:before { content: "\f1e0"; } .fa-share-alt-square:before { content: "\f1e1"; } .fa-bomb:before { content: "\f1e2"; } .fa-soccer-ball-o:before, .fa-futbol-o:before { content: "\f1e3"; } .fa-tty:before { content: "\f1e4"; } .fa-binoculars:before { content: "\f1e5"; } .fa-plug:before { content: "\f1e6"; } .fa-slideshare:before { content: "\f1e7"; } .fa-twitch:before { content: "\f1e8"; } .fa-yelp:before { content: "\f1e9"; } .fa-newspaper-o:before { content: "\f1ea"; } .fa-wifi:before { content: "\f1eb"; } .fa-calculator:before { content: "\f1ec"; } .fa-paypal:before { content: "\f1ed"; } .fa-google-wallet:before { content: "\f1ee"; } .fa-cc-visa:before { content: "\f1f0"; } .fa-cc-mastercard:before { content: "\f1f1"; } .fa-cc-discover:before { content: "\f1f2"; } .fa-cc-amex:before { content: "\f1f3"; } .fa-cc-paypal:before { content: "\f1f4"; } .fa-cc-stripe:before { content: "\f1f5"; } .fa-bell-slash:before { content: "\f1f6"; } .fa-bell-slash-o:before { content: "\f1f7"; } .fa-trash:before { content: "\f1f8"; } .fa-copyright:before { content: "\f1f9"; } .fa-at:before { content: "\f1fa"; } .fa-eyedropper:before { content: "\f1fb"; } .fa-paint-brush:before { content: "\f1fc"; } .fa-birthday-cake:before { content: "\f1fd"; } .fa-area-chart:before { content: "\f1fe"; } .fa-pie-chart:before { content: "\f200"; } .fa-line-chart:before { content: "\f201"; } .fa-lastfm:before { content: "\f202"; } .fa-lastfm-square:before { content: "\f203"; } .fa-toggle-off:before { content: "\f204"; } .fa-toggle-on:before { content: "\f205"; } .fa-bicycle:before { content: "\f206"; } .fa-bus:before { content: "\f207"; } .fa-ioxhost:before { content: "\f208"; } .fa-angellist:before { content: "\f209"; } .fa-cc:before { content: "\f20a"; } .fa-shekel:before, .fa-sheqel:before, .fa-ils:before { content: "\f20b"; } .fa-meanpath:before { content: "\f20c"; } .fa-buysellads:before { content: "\f20d"; } .fa-connectdevelop:before { content: "\f20e"; } .fa-dashcube:before { content: "\f210"; } .fa-forumbee:before { content: "\f211"; } .fa-leanpub:before { content: "\f212"; } .fa-sellsy:before { content: "\f213"; } .fa-shirtsinbulk:before { content: "\f214"; } .fa-simplybuilt:before { content: "\f215"; } .fa-skyatlas:before { content: "\f216"; } .fa-cart-plus:before { content: "\f217"; } .fa-cart-arrow-down:before { content: "\f218"; } .fa-diamond:before { content: "\f219"; } .fa-ship:before { content: "\f21a"; } .fa-user-secret:before { content: "\f21b"; } .fa-motorcycle:before { content: "\f21c"; } .fa-street-view:before { content: "\f21d"; } .fa-heartbeat:before { content: "\f21e"; } .fa-venus:before { content: "\f221"; } .fa-mars:before { content: "\f222"; } .fa-mercury:before { content: "\f223"; } .fa-intersex:before, .fa-transgender:before { content: "\f224"; } .fa-transgender-alt:before { content: "\f225"; } .fa-venus-double:before { content: "\f226"; } .fa-mars-double:before { content: "\f227"; } .fa-venus-mars:before { content: "\f228"; } .fa-mars-stroke:before { content: "\f229"; } .fa-mars-stroke-v:before { content: "\f22a"; } .fa-mars-stroke-h:before { content: "\f22b"; } .fa-neuter:before { content: "\f22c"; } .fa-genderless:before { content: "\f22d"; } .fa-facebook-official:before { content: "\f230"; } .fa-pinterest-p:before { content: "\f231"; } .fa-whatsapp:before { content: "\f232"; } .fa-server:before { content: "\f233"; } .fa-user-plus:before { content: "\f234"; } .fa-user-times:before { content: "\f235"; } .fa-hotel:before, .fa-bed:before { content: "\f236"; } .fa-viacoin:before { content: "\f237"; } .fa-train:before { content: "\f238"; } .fa-subway:before { content: "\f239"; } .fa-medium:before { content: "\f23a"; } .fa-yc:before, .fa-y-combinator:before { content: "\f23b"; } .fa-optin-monster:before { content: "\f23c"; } .fa-opencart:before { content: "\f23d"; } .fa-expeditedssl:before { content: "\f23e"; } .fa-battery-4:before, .fa-battery-full:before { content: "\f240"; } .fa-battery-3:before, .fa-battery-three-quarters:before { content: "\f241"; } .fa-battery-2:before, .fa-battery-half:before { content: "\f242"; } .fa-battery-1:before, .fa-battery-quarter:before { content: "\f243"; } .fa-battery-0:before, .fa-battery-empty:before { content: "\f244"; } .fa-mouse-pointer:before { content: "\f245"; } .fa-i-cursor:before { content: "\f246"; } .fa-object-group:before { content: "\f247"; } .fa-object-ungroup:before { content: "\f248"; } .fa-sticky-note:before { content: "\f249"; } .fa-sticky-note-o:before { content: "\f24a"; } .fa-cc-jcb:before { content: "\f24b"; } .fa-cc-diners-club:before { content: "\f24c"; } .fa-clone:before { content: "\f24d"; } .fa-balance-scale:before { content: "\f24e"; } .fa-hourglass-o:before { content: "\f250"; } .fa-hourglass-1:before, .fa-hourglass-start:before { content: "\f251"; } .fa-hourglass-2:before, .fa-hourglass-half:before { content: "\f252"; } .fa-hourglass-3:before, .fa-hourglass-end:before { content: "\f253"; } .fa-hourglass:before { content: "\f254"; } .fa-hand-grab-o:before, .fa-hand-rock-o:before { content: "\f255"; } .fa-hand-stop-o:before, .fa-hand-paper-o:before { content: "\f256"; } .fa-hand-scissors-o:before { content: "\f257"; } .fa-hand-lizard-o:before { content: "\f258"; } .fa-hand-spock-o:before { content: "\f259"; } .fa-hand-pointer-o:before { content: "\f25a"; } .fa-hand-peace-o:before { content: "\f25b"; } .fa-trademark:before { content: "\f25c"; } .fa-registered:before { content: "\f25d"; } .fa-creative-commons:before { content: "\f25e"; } .fa-gg:before { content: "\f260"; } .fa-gg-circle:before { content: "\f261"; } .fa-tripadvisor:before { content: "\f262"; } .fa-odnoklassniki:before { content: "\f263"; } .fa-odnoklassniki-square:before { content: "\f264"; } .fa-get-pocket:before { content: "\f265"; } .fa-wikipedia-w:before { content: "\f266"; } .fa-safari:before { content: "\f267"; } .fa-chrome:before { content: "\f268"; } .fa-firefox:before { content: "\f269"; } .fa-opera:before { content: "\f26a"; } .fa-internet-explorer:before { content: "\f26b"; } .fa-tv:before, .fa-television:before { content: "\f26c"; } .fa-contao:before { content: "\f26d"; } .fa-500px:before { content: "\f26e"; } .fa-amazon:before { content: "\f270"; } .fa-calendar-plus-o:before { content: "\f271"; } .fa-calendar-minus-o:before { content: "\f272"; } .fa-calendar-times-o:before { content: "\f273"; } .fa-calendar-check-o:before { content: "\f274"; } .fa-industry:before { content: "\f275"; } .fa-map-pin:before { content: "\f276"; } .fa-map-signs:before { content: "\f277"; } .fa-map-o:before { content: "\f278"; } .fa-map:before { content: "\f279"; } .fa-commenting:before { content: "\f27a"; } .fa-commenting-o:before { content: "\f27b"; } .fa-houzz:before { content: "\f27c"; } .fa-vimeo:before { content: "\f27d"; } .fa-black-tie:before { content: "\f27e"; } .fa-fonticons:before { content: "\f280"; } .fa-reddit-alien:before { content: "\f281"; } .fa-edge:before { content: "\f282"; } .fa-credit-card-alt:before { content: "\f283"; } .fa-codiepie:before { content: "\f284"; } .fa-modx:before { content: "\f285"; } .fa-fort-awesome:before { content: "\f286"; } .fa-usb:before { content: "\f287"; } .fa-product-hunt:before { content: "\f288"; } .fa-mixcloud:before { content: "\f289"; } .fa-scribd:before { content: "\f28a"; } .fa-pause-circle:before { content: "\f28b"; } .fa-pause-circle-o:before { content: "\f28c"; } .fa-stop-circle:before { content: "\f28d"; } .fa-stop-circle-o:before { content: "\f28e"; } .fa-shopping-bag:before { content: "\f290"; } .fa-shopping-basket:before { content: "\f291"; } .fa-hashtag:before { content: "\f292"; } .fa-bluetooth:before { content: "\f293"; } .fa-bluetooth-b:before { content: "\f294"; } .fa-percent:before { content: "\f295"; } .fa-gitlab:before { content: "\f296"; } .fa-wpbeginner:before { content: "\f297"; } .fa-wpforms:before { content: "\f298"; } .fa-envira:before { content: "\f299"; } .fa-universal-access:before { content: "\f29a"; } .fa-wheelchair-alt:before { content: "\f29b"; } .fa-question-circle-o:before { content: "\f29c"; } .fa-blind:before { content: "\f29d"; } .fa-audio-description:before { content: "\f29e"; } .fa-volume-control-phone:before { content: "\f2a0"; } .fa-braille:before { content: "\f2a1"; } .fa-assistive-listening-systems:before { content: "\f2a2"; } .fa-asl-interpreting:before, .fa-american-sign-language-interpreting:before { content: "\f2a3"; } .fa-deafness:before, .fa-hard-of-hearing:before, .fa-deaf:before { content: "\f2a4"; } .fa-glide:before { content: "\f2a5"; } .fa-glide-g:before { content: "\f2a6"; } .fa-signing:before, .fa-sign-language:before { content: "\f2a7"; } .fa-low-vision:before { content: "\f2a8"; } .fa-viadeo:before { content: "\f2a9"; } .fa-viadeo-square:before { content: "\f2aa"; } .fa-snapchat:before { content: "\f2ab"; } .fa-snapchat-ghost:before { content: "\f2ac"; } .fa-snapchat-square:before { content: "\f2ad"; } .fa-pied-piper:before { content: "\f2ae"; } .fa-first-order:before { content: "\f2b0"; } .fa-yoast:before { content: "\f2b1"; } .fa-themeisle:before { content: "\f2b2"; } .fa-google-plus-circle:before, .fa-google-plus-official:before { content: "\f2b3"; } .fa-fa:before, .fa-font-awesome:before { content: "\f2b4"; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); border: 0; } .sr-only-focusable:active, .sr-only-focusable:focus { position: static; width: auto; height: auto; margin: 0; overflow: visible; clip: auto; } /* ================================================================== ** These classes are created to override ** class in jquery.jqplot.css ** ================================================================== */ /*------ Target Date Fund Pie Chart custom overrides ---------*/ table.jqplot-table-legend { /*width: 215px;*/ width: 80%; } @media screen and (min-width: 700px) and (max-width: 990px) { table.jqplot-table-legend { /*width: 250px;*/ width: 45% !important; } } /*tr > td.jqplot-table-legend { padding: 0.75em 0 0.75em 0 !important; /*width:10px;*//* }*/ tr > td.jqplot-table-legend + td { width:230px; } td.jqplot-table-legend { padding: 0.75em 0.5em 0.75em 0 !important; text-align: left !important; border-top: 1px solid #ccc; } #chart1, #chart2 { display: none; } @media screen and (min-width: 700px) { #chart1 { display: block; height:300px; width:325px; } } @media screen and (max-width: 699px) { #chart2 { display: block; height:500px; width:300px; margin:0 auto; } } .l-content-holder .l-columns__item.investment-info-box { margin-top: 80px; margin-left: 0px; } @media screen and (max-width: 699px) { div.l-content-holder .l-columns__item.investment-info-box { margin-top: 0px; margin-left: 0px; } } /*rules for the plot target div. These will be cascaded down to all plot elements according to css rules*/ .jqplot-target { position: relative; color: #666666; font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; font-size: 1em; /* height: 300px; width: 400px;*/ } /*rules applied to all axes*/ .jqplot-axis { font-size: 0.75em; } .jqplot-xaxis { margin-top: 10px; } .jqplot-x2axis { margin-bottom: 10px; } .jqplot-yaxis { margin-right: 10px; } .jqplot-y2axis, .jqplot-y3axis, .jqplot-y4axis, .jqplot-y5axis, .jqplot-y6axis, .jqplot-y7axis, .jqplot-y8axis, .jqplot-y9axis, .jqplot-yMidAxis { margin-left: 10px; margin-right: 10px; } /*rules applied to all axis tick divs*/ .jqplot-axis-tick, .jqplot-xaxis-tick, .jqplot-yaxis-tick, .jqplot-x2axis-tick, .jqplot-y2axis-tick, .jqplot-y3axis-tick, .jqplot-y4axis-tick, .jqplot-y5axis-tick, .jqplot-y6axis-tick, .jqplot-y7axis-tick, .jqplot-y8axis-tick, .jqplot-y9axis-tick, .jqplot-yMidAxis-tick { position: absolute; white-space: pre; } .jqplot-xaxis-tick { top: 0px; /* initial position untill tick is drawn in proper place */ left: 15px; /* padding-top: 10px;*/ vertical-align: top; } .jqplot-x2axis-tick { bottom: 0px; /* initial position untill tick is drawn in proper place */ left: 15px; /* padding-bottom: 10px;*/ vertical-align: bottom; } .jqplot-yaxis-tick { right: 0px; /* initial position untill tick is drawn in proper place */ top: 15px; /* padding-right: 10px;*/ text-align: right; } .jqplot-yaxis-tick.jqplot-breakTick { right: -20px; margin-right: 0px; padding:1px 5px 1px 5px; /*background-color: white;*/ z-index: 2; font-size: 1.5em; } .jqplot-y2axis-tick, .jqplot-y3axis-tick, .jqplot-y4axis-tick, .jqplot-y5axis-tick, .jqplot-y6axis-tick, .jqplot-y7axis-tick, .jqplot-y8axis-tick, .jqplot-y9axis-tick { left: 0px; /* initial position untill tick is drawn in proper place */ top: 15px; /* padding-left: 10px;*/ /* padding-right: 15px;*/ text-align: left; } .jqplot-yMidAxis-tick { text-align: center; white-space: nowrap; } .jqplot-xaxis-label { margin-top: 10px; font-size: 11pt; position: absolute; } .jqplot-x2axis-label { margin-bottom: 10px; font-size: 11pt; position: absolute; } .jqplot-yaxis-label { margin-right: 10px; /* text-align: center;*/ font-size: 11pt; position: absolute; } .jqplot-yMidAxis-label { font-size: 11pt; position: absolute; } .jqplot-y2axis-label, .jqplot-y3axis-label, .jqplot-y4axis-label, .jqplot-y5axis-label, .jqplot-y6axis-label, .jqplot-y7axis-label, .jqplot-y8axis-label, .jqplot-y9axis-label { /* text-align: center;*/ font-size: 11pt; margin-left: 10px; position: absolute; } .jqplot-meterGauge-tick { font-size: 0.75em; color: #999999; } .jqplot-meterGauge-label { font-size: 1em; color: #999999; } table.jqplot-table-legend { margin-top: 12px; margin-bottom: 12px; margin-left: 12px; margin-right: 12px; } table.jqplot-table-legend, table.jqplot-cursor-legend { background-color: rgba(255,255,255,0.6); border: 1px solid #cccccc; position: absolute; font-size: 0.75em; } td.jqplot-table-legend { vertical-align:middle; } /* These rules could be used instead of assigning element styles and relying on js object properties. */ /* td.jqplot-table-legend-swatch { padding-top: 0.5em; text-align: center; } tr.jqplot-table-legend:first td.jqplot-table-legend-swatch { padding-top: 0px; } */ td.jqplot-seriesToggle:hover, td.jqplot-seriesToggle:active { cursor: pointer; } .jqplot-table-legend .jqplot-series-hidden { text-decoration: line-through; } div.jqplot-table-legend-swatch-outline { border: 1px solid #cccccc; padding:1px; } div.jqplot-table-legend-swatch { width:0px; height:0px; border-top-width: 5px; border-bottom-width: 5px; border-left-width: 6px; border-right-width: 6px; border-top-style: solid; border-bottom-style: solid; border-left-style: solid; border-right-style: solid; } .jqplot-title { top: 0px; left: 0px; padding-bottom: 0.5em; font-size: 1.2em; } table.jqplot-cursor-tooltip { border: 1px solid #cccccc; font-size: 0.75em; } .jqplot-cursor-tooltip { border: 1px solid #cccccc; font-size: 0.75em; white-space: nowrap; background: rgba(208,208,208,0.5); padding: 1px; } .jqplot-highlighter-tooltip, .jqplot-canvasOverlay-tooltip { border: 1px solid #cccccc; font-size: 0.75em; white-space: nowrap; background: rgba(208,208,208,0.5); padding: 1px; } .jqplot-point-label { font-size: 0.75em; z-index: 2; } td.jqplot-cursor-legend-swatch { vertical-align: middle; text-align: center; } div.jqplot-cursor-legend-swatch { width: 1.2em; height: 0.7em; } .jqplot-error { /* Styles added to the plot target container when there is an error go here.*/ text-align: center; } .jqplot-error-message { /* Styling of the custom error message div goes here.*/ position: relative; top: 46%; display: inline-block; } div.jqplot-bubble-label { font-size: 0.8em; /* background: rgba(90%, 90%, 90%, 0.15);*/ padding-left: 2px; padding-right: 2px; color: rgb(20%, 20%, 20%); } div.jqplot-bubble-label.jqplot-bubble-label-highlight { background: rgba(90%, 90%, 90%, 0.7); } div.jqplot-noData-container { text-align: center; background-color: rgba(96%, 96%, 96%, 0.3); } @font-face { font-family: "Macha-Book"; src: url("/assets/fonts/300EEE_3_0.eot"); src: url("/assets/fonts/300EEE_3_0.eot?#iefix") format('embedded-opentype'), url("/assets/fonts/300EEE_3_0.woff") format('woff'), url("/assets/fonts/300EEE_3_0.ttf") format('truetype'); font-weight: normal; font-style: normal; } @font-face { font-family: "Macha-Book"; src: url("/assets/fonts/300EEE_2_0.eot"); src: url("/assets/fonts/300EEE_2_0.eot?#iefix") format('embedded-opentype'), url("/assets/fonts/300EEE_2_0.woff") format('woff'), url("/assets/fonts/300EEE_2_0.ttf") format('truetype'); font-weight: normal; font-style: italic; } @font-face { font-family: "Macha-Medium"; src: url("/assets/fonts/300EEE_4_0.eot"); src: url("/assets/fonts/300EEE_4_0.eot?#iefix") format('embedded-opentype'), url("/assets/fonts/300EEE_4_0.woff") format('woff'), url("/assets/fonts/300EEE_4_0.ttf") format('truetype'); font-weight: normal; font-style: normal; } @font-face { font-family: "Macha-Medium"; src: url("/assets/fonts/300EEE_5_0.eot"); src: url("/assets/fonts/300EEE_5_0.eot?#iefix") format('embedded-opentype'), url("/assets/fonts/300EEE_5_0.woff") format('woff'), url("/assets/fonts/300EEE_5_0.ttf") format('truetype'); font-weight: normal; font-style: italic; } @font-face { font-family: "Macha-Bold"; src: url("/assets/fonts/300EEE_0_0.eot"); src: url("/assets/fonts/300EEE_0_0.eot?#iefix") format('embedded-opentype'), url("/assets/fonts/300EEE_0_0.woff") format('woff'), url("/assets/fonts/300EEE_0_0.ttf") format('truetype'); font-weight: normal; font-style: normal; } html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, .c-resources--additional .c-resources__item-header, .c-resources--two-boxes .c-resources__item-header, .c-callout__header, .c-hero__header, .u-text-p-above-mobile { margin: 0; padding: 0; border: 0; outline: 0; font-weight: inherit; font-style: inherit; font-family: inherit; /*font-size: 100%;*/ vertical-align: baseline; } body { line-height: 1; color: #000; background: #fff; } ol, ul { list-style: none; } table { border-collapse: separate; border-spacing: 0; vertical-align: middle; } caption, th, td { text-align: left; font-weight: normal; vertical-align: middle; } a img { border: none; } body { position: relative; } body.debug-breakpoints:after { width: auto; display: block; height: 20px; line-height: 20px; background: rgba(255,255,255,0.8); border: 1px solid #808080; color: #000; font-weight: bold; padding: 0 20px; position: fixed; left: 0; top: 0; z-index: 9999; content: 'UNDEFINED'; font-family: sans-serif; font-size: 12px; } @media only screen and (max-width: 365px) { body.debug-breakpoints:after { content: 'mobile'; } } @media only screen and (min-width: 365px) and (max-width: 699px) { body.debug-breakpoints:after { content: 'tablet-portrait'; } } @media only screen and (min-width: 699px) and (max-width: 959px) { body.debug-breakpoints:after { content: 'tablet-landscape'; } } @media only screen and (min-width: 959px) and (max-width: 1280px) { body.debug-breakpoints:after { content: 'desktop'; } } @media only screen and (min-width: 1280px) { body.debug-breakpoints:after { content: 'hd'; } } html, body, * { box-sizing: border-box; } *, *:before, *:after { box-sizing: inherit; } html, body { width: 100%; height: auto; } > header, > main { min-width: 320px; } body { left: 0; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-orient: vertical; -o-box-orient: vertical; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; } body > main { -webkit-flex-shrink: 0; -ms-flex-negative: 0; flex-shrink: 0; } body > footer { height: 260px; margin-top: auto; /*margin-top: 40px; position: fixed; bottom: 0; width: 100%;*/ } @media only screen and (max-width: 699px) { body > main, body > footer { -webkit-transition: -webkit-transform 0.2s linear; transition: -webkit-transform 0.2s linear; transition: transform 0.2s linear; transition: transform 0.2s linear, -webkit-transform 0.2s linear; } } main { display: block; overflow-y: visible; /*overflow-x: hidden;*/ padding-top: 95px; min-height: calc(100vh - 260px); /*SIGNIFICANT RDA CHANGE*/ } @media only screen and (max-width: 699px) { main { padding-top: 60px; } } @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { .c-page-subnav.is-pinned, .c-hero.is-clone.is-shown { -webkit-transition: -webkit-transform 0.2s linear; transition: -webkit-transform 0.2s linear; transition: transform 0.2s linear; transition: transform 0.2s linear, -webkit-transform 0.2s linear; } } @media only screen and (max-width: 699px) { /*RDA Redisign of Mobile Nav*/ body.mobile-menu-open { overflow: hidden; } /*body.mobile-menu-open > main, body.mobile-menu-open > footer { -webkit-transform: translateX(-270px); -ms-transform: translateX(-270px); transform: translateX(-270px); } body.mobile-menu-open .c-megamenu { right: -285px; } body.mobile-menu-open .c-mainheader { -webkit-transform: translateX(-270px); -ms-transform: translateX(-270px); transform: translateX(-270px); }*/ body.mobile-menu-open .c-mainheader .l-content-holder { margin: 0; } } @media only screen and (max-width: 699px) and (-ms-high-contrast: active), only screen and (max-width: 699px) and (-ms-high-contrast: none) { body.mobile-menu-open .c-page-subnav.is-pinned, body.mobile-menu-open .c-hero.is-clone { -webkit-transform: translateX(-270px); -ms-transform: translateX(-270px); transform: translateX(-270px); } } @media only screen and (max-width: 699px) { .c-mainheader { overflow-x: hidden; } } .mobile-menu-open .c-mainheader, .mobile-menu-animating .c-mainheader { overflow: visible; } /*RDA Mobile Menu Redesign*/ .mobile-menu-open .c-megamenu { display: flex; padding-bottom: 100px; } .mobile-close-container { width: 100%; background-color: #FFF; z-index: 2000; height: 40px; position: fixed; display:none; border-bottom:1px solid #dadee3 } .mobile-menu-open .mobile-close-container { display: block; } @media only screen and (max-width: 699px) { #nfl-mobile-shade { position: fixed; height: 100%; width: 100%; top: 0; left: 0; background: #142435; /*display: block;*/ display: none; float: none; opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); padding: 0; visibility: hidden; -webkit-transition: opacity 0.5s, -webkit-transform 0.2s linear; transition: opacity 0.5s, -webkit-transform 0.2s linear; transition: opacity 0.5s, transform 0.2s linear; transition: opacity 0.5s, transform 0.2s linear, -webkit-transform 0.2s linear; z-index: 9; -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } } .mobile-menu-open #nfl-mobile-shade { opacity: 0.5; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; filter: alpha(opacity=50); visibility: visible; -webkit-transform: translateX(-270px); -ms-transform: translateX(-270px); transform: translateX(-270px); } /*Rda Change - MAIN SPACING CHANGE*/ /*main > section + section .l-content-holder:first-child { padding-top: 0; }*/ /*RDA Change BIG Change, make 70px padding target sections only*/ /*main > section:last-child > .l-content-holder { padding-bottom: 70px; } main > section:last-child > section > .l-content-holder { padding-bottom: 70px; }*/ /*section > .l-content-holder:last-child { padding-bottom: 70px; }*/ /*RDA Change added for components that should not have large amount of padding, that are wrapped by l-content-holder*/ /*section > .l-content-holder.less-padding:last-child { padding-bottom: 20px; } section > .l-content-holder.less-padding { padding-bottom: 20px; } section > .l-content-holder.medium-padding:last-child { padding-bottom: 60px; } section > .l-content-holder.section-padding:last-child { padding-bottom: 20px; } section > .l-content-holder.less-padding { padding-bottom: 20px; } section > .l-content-holder.medium-padding { padding-bottom: 60px; }*/ section > .l-content-holder.no-bot-padding:last-child { padding-bottom: 0px; } section > .l-content-holder.no-bot-padding { padding-bottom: 0px; } .l-content-holder.no-top-padding { padding-top: 0px; } .l-content-holder.no-bottom-padding { padding-bottom: 0px; } /*Rda Change - MAIN SPACING CHANGE*/ /*@media only screen and (max-width: 699px) { section > .l-content-holder:last-child { padding-bottom: 50px; } }*/ body { font-family: "Macha-Book", sans-serif; -webkit-font-smoothing: antialiased; color: #152c46; font-size: 16px; } section > .l-content-holder > .header--section, .c-checklist__section-header { padding-top: 12px; border-top: 2px solid #eaedf0; font-family: "Macha-Medium", sans-serif; font-size: 25px; line-height: 28px; color: #687582; /*Rda Change - MAIN SPACING CHANGE*/ margin-bottom: 20px; } /*Rda Change - MAIN SPACING CHANGE*/ /*RDA Change added so that the headers in Generic text have less bottom margin*/ /*section > .l-content-holder > .header--section, .c-checklist__section-header.generic-header-text { margin-bottom: 25px; }*/ /*Rda Change - MAIN SPACING CHANGE*/ /*section > .l-content-holder > .header--section, .c-checklist__section-header.generic-header-text.header-only { margin-bottom: 0px; }*/ /*Rda Change - MAIN SPACING CHANGE*/ /*@media only screen and (max-width: 1280px) { section > .l-content-holder > .header--section, .c-checklist__section-header { margin-bottom: 30px; } section > .l-content-holder > .header--section, .c-checklist__section-header.generic-header-text { margin-bottom: 20px; } }*/ /*RDA Change: Changed to text-align: left*/ @media only screen and (max-width: 959px) { section > .l-content-holder > .header--section, .c-checklist__section-header { text-align: left; } } /*RDA Change changed text-align from left to center*/ @media only screen and (max-width: 699px) { section > .l-content-holder > .header--section, .c-checklist__section-header { text-align: center; } } /*RDA Change: Removed margin right and left (switched from auto to 0) for Page Header 2 Main header, commented out max-width: 80%*/ h1, .c-hero__header { font-size: 46px; line-height: 52px; text-align: center; margin-bottom: 50px; letter-spacing: -0.5px; /*max-width: 80%;*/ margin-left: 0; margin-right: 0; } @media only screen and (min-width: 699px) and (max-width: 959px) { h1, .c-hero__header { font-size: 34px; font-size: -webkit-calc( 34px + (45 - 34) * ( (100vw - 699px) / ( 959 - 699) )); font-size: calc( 34px + (45 - 34) * ( (100vw - 699px) / ( 959 - 699) )); line-height: 1.2em; } } @media only screen and (max-width: 699px) { h1, .c-hero__header { font-size: 34px; } } @media only screen and (min-width: 320px) and (max-width: 699px) { h1, .c-hero__header { font-size: 20px; font-size: -webkit-calc( 20px + (34 - 20) * ( (100vw - 320px) / ( 699 - 320) )); font-size: calc( 20px + (34 - 20) * ( (100vw - 320px) / ( 699 - 320) )); line-height: 1.2em; } } @media only screen and (max-width: 320px) { h1, .c-hero__header { font-size: 20px; } } @media only screen and (max-width: 959px) { h1, .c-hero__header { line-height: 40px; } } /*RDA Change: commented out max-width: 90%*/ @media only screen and (max-width: 699px) { h1, .c-hero__header { line-height: 25px; margin-bottom: 25px; /*max-width: 90%;*/ } } h1.h1--forms + h2, .c-hero__header.h1--forms + h2 { margin-top: 85px; position: relative; } h1.h1--forms + h2:before, h1.h1--forms + div.form-column-extra-text:before, .c-hero__header.h1--forms + h2:before { content: ''; display: block; position: absolute; width: 46px; height: 5px; top: -40px; left: 50%; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); background: #eaedf0; } h1.h1--forms + div.form-column-extra-text { margin-top: 85px; position: relative; } h1.h1--forms.form-title { margin-left:40px; margin-right: 40px; } @media only screen and (max-width: 699px) { h1.h1--forms + h2, .c-hero__header.h1--forms + h2 { font-size: 18px; line-height: 22px; margin-top: 50px; } h1.h1--forms + h2:before, .c-hero__header.h1--forms + h2:before { width: 23px; top: -25px; } h1.h1--forms.form-title { margin-left:20px; margin-right: 20px; } } h1.h1--green, .c-hero__header.h1--green { color: #00ba98; } .header-green { color: #00ba98; } /* RDA Change: Made changed font sizes to: > 959px : 30px 959px - 701px : 30px - 22px (scale bases on width) <700px : 22p */ h2, .c-resources--two-boxes .c-resources__item-header { color: #142435; margin-bottom: 18px; font-size: 30px; line-height: 38px; } h2.h2--extra-margin, .c-resources--two-boxes .c-resources__item-header.h2--extra-margin { margin-bottom: 30px; } @media only screen and (min-width: 699px) and (max-width: 959px) { h2, .c-resources--two-boxes .c-resources__item-header { font-size: 28px; font-size: -webkit-calc( 28px + (30 - 28) * ( (100vw - 699px) / ( 959 - 699) )); font-size: calc( 28px + (30 - 28) * ( (100vw - 699px) / ( 959 - 699) )); line-height: 1.2em; } } @media only screen and (max-width: 699px) { h2, .c-resources--two-boxes .c-resources__item-header { font-size: 28px; } } @media only screen and (min-width: 320px) and (max-width: 699px) { h2, .c-resources--two-boxes .c-resources__item-header { font-size: 18px; font-size: -webkit-calc( 18px + (28 - 18) * ( (100vw - 320px) / ( 699 - 320) )); font-size: calc( 18px + (28 - 18) * ( (100vw - 320px) / ( 699 - 320) )); line-height: 1.2em; } } @media only screen and (max-width: 320px) { h2, .c-resources--two-boxes .c-resources__item-header { font-size: 18px; } } /*RDA CHange, Reduced margin-bot*/ @media only screen and (max-width: 699px) { h2, .c-resources--two-boxes .c-resources__item-header { line-height: 22px; margin-bottom: 15px; } } h2.version--green, .c-resources--two-boxes .c-resources__item-header.version--green { color: #00a88c; } /*RDA Change: Made font sizes changed*/ h3, .c-callout__header { margin-bottom: 15px; font-size: 22px; line-height: 24px; font-family: "Macha-Medium", sans-serif; } @media only screen and (max-width: 699px) { h3, .c-callout__header { font-size: 18px; line-height: 24px; margin-bottom: 5px; } } h3.version--green, .c-callout__header.version--green { color: #00a88c; } h3.benef-name { font-size: 30px; line-height: 32px; } @media only screen and (min-width: 699px) and (max-width: 959px) { h3.version--dynamic, .c-callout__header.version--dynamic { font-size: 18px; font-size: -webkit-calc( 18px + (22 - 18) * ( (100vw - 699px) / ( 959 - 699) )); font-size: calc( 18px + (22 - 18) * ( (100vw - 699px) / ( 959 - 699) )); line-height: 1.2em; } h3.benef-name { font-size: 22.5px; font-size: -webkit-calc( 22.5px + (30 - 22.5) * ( (100vw - 699px) / ( 959 - 699) )); font-size: calc( 22.5px + (30 - 22.5) * ( (100vw - 699px) / ( 959 - 699) )); line-height: 1.2em; } } @media only screen and (max-width: 699px) { h3.version--dynamic, .c-callout__header.version--dynamic { font-size: 18px; } h3.benef-name { font-size: 22.5px; line-height: 24.5px; } } /*RDA Change: reduced margin bttom from 15px to 11, added style to Additioanl resources

element for margin-bottom*/ h4, .c-resources--additional .c-resources__item-header { color: #132c45; font-size: 20px; line-height: 24px; font-family: "Macha-Medium", sans-serif; /*margin-bottom: 15px;*/ margin-bottom: 11px; } h4.version--green, .c-resources--additional .c-resources__item-header.version--green, .c-infographic__header { color: #00a88c; } .c-resources--additional p { margin-bottom: 10px; } ul.ul--default { margin-bottom: 15px; line-height: 24px; } @media only screen and (max-width: 699px) { ul.ul--default li { text-align: center; } } ul.ul--default li::before { content: '•'; padding-right: 10px; } ul.ul--default li + li { margin-top: 15px; } b, strong { font-family: "Macha-Medium", sans-serif; } p, .u-text-p-above-mobile { margin-bottom: 15px; line-height: 1.5em; } @media only screen and (max-width: 699px) { .l-content-holder > p, .l-content-holder > .u-text-p-above-mobile { text-align: center; } } p:last-child, .u-text-p-above-mobile:last-child { margin-bottom: 0; } p.p--intro, .u-text-p-above-mobile.p--intro { font-size: 24px; line-height: 34px; text-align: center; color: #606f7f; } p.p--text-secondary, .u-text-p-above-mobile.p--text-secondary { font-size: 14px; color: #5f6f7f; line-height: 20px; } p.p--smaller, .u-text-p-above-mobile.p--smaller { font-size: 14px; } p.p--bigger, .u-text-p-above-mobile.p--bigger { font-size: 18px; } p.p--light, .u-text-p-above-mobile.p--light { color: #606f7f; } p.p--legal, .u-text-p-above-mobile.p--legal { font-size: 13px; line-height: 16px; color: #606f7f; margin: 50px auto 0px auto; padding: 0 0; } @media only screen and (max-width: 699px) { p.p--legal, .u-text-p-above-mobile.p--legal { text-align: center; } } a { color: #107eb1; text-decoration: none; } a:hover { color: #0583ad; } a:active { color: #04698a; } p > a:only-child { line-height: 1.1em; } .a--chevron:after { content: '>'; display: inline-block; margin-left: 0.3em; } .a--external:after { content: ''; display: inline-block; margin-left: 0.3em; width: 13px; height: 13px; background: url("/Assets/images/controls/ui/link-external.svg") no-repeat; } .a--accented, .c-checklist__header a { font-family: "Macha-Bold", sans-serif; text-decoration: underline; } .text-footnote { text-align: center; margin-top: 40px; font-size: 16px; line-height: 24px; } .text-footnote--smalltype { color: #5f6f7f; font-size: 13px; line-height: 16px; } .text-pipe { color: #949fab; padding-left: 4px; padding-right: 4px; } .u-dev { position: relative; } .u-dev:before { content: 'placeholder'; display: block; position: absolute; background: #808080; color: #fff; font-size: 10px; padding: 5px; left: 0; top: 0; font-family: "Macha-Medium", sans-serif; } .u-dev--placeholder { display: block; padding: 10px; background: #808080; border: 1px solid #a9a9a9; margin: 10px 0; } .c-account-pulldown__trigger { position: relative; padding-right: 40px; padding-left: 20px; cursor: pointer; } .c-account-pulldown__trigger:hover { color: #76f4d8; } .c-account-pulldown__trigger:hover:after { content: ''; width: 0; height: 0; background: 0; border-style: solid; border-width: 5px 4.5px 0 4.5px; border-color: #76f4d8 transparent transparent transparent; position: absolute; right: 24px; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); } .c-account-pulldown__trigger:active { color: #33efc5; } .c-account-pulldown__trigger:after { content: ''; width: 0; height: 0; background: 0; border-style: solid; border-width: 5px 4.5px 0 4.5px; border-color: #fff transparent transparent transparent; position: absolute; right: 24px; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); } .is-open .c-account-pulldown__trigger { color: #fff; } .is-open .c-account-pulldown__trigger:after { content: ''; width: 0; height: 0; background: 0; border-style: solid; border-width: 5px 4.5px 0 4.5px; border-color: #fff transparent transparent transparent; position: absolute; right: 24px; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); } .is-open.c-account-pulldown { background: #5f6e7c; } .c-account-pulldown__panel { display: none; position: absolute; padding: 15px 20px 30px 25px; z-index: 20; box-shadow: 3px 3px 0px 0px rgba(20,36,52,0.4); line-height: 1.3em; } .is-open .c-account-pulldown__panel { display: block; background: #5f6e7c; } .c-account-pulldown__menu li + li { margin-top: 20px; } @media only screen and (max-width: 699px) { .c-account-pulldown__menu { font-size: 13px; } } .c-account-pulldown__extras { margin-top: 20px; padding-top: 20px; border-top: 1px solid #87929c; color: #c7ced6; } @media only screen and (min-width: 699px) { .c-account-pulldown__extras b { font-family: "Macha-Book", sans-serif; font-weight: normal; } } .c-account-pulldown__extras > p { margin-bottom: 2px; } .c-account-pulldown__extras > p:last-child { margin-bottom: 0; } /*.c-resources { margin-top: 30px; }*/ .c-resources > .l-content-holder { border: none !important; } @media only screen and (max-width: 959px) { .l-template--home .c-resources > .l-content-holder { margin-left: 0; margin-right: 0; } } /*RDA Change: Reduced margin from 30px to 20px*/ @media only screen and (max-width: 699px) { .c-resources .c-resources__item + .c-resources__item { margin-top: 20px; } } .c-resources__icon { margin-bottom: 10px; } /* RDA Change: Reduced Margin bottom from 40px to 30px*/ .c-resources--top-header { font-size: 14px; text-transform: uppercase; letter-spacing: 1.5px; text-align: center; color: #5f6f7f; font-family: "Macha-Bold", sans-serif; margin-bottom: 30px; display: table; white-space: nowrap; } .c-resources--top-header:before, .c-resources--top-header:after { border-top: 1px solid #c6cdd4; content: ''; display: table-cell; position: relative; top: 0.5em; width: 45%; } .c-resources--top-header:before { right: 0.15%; } .c-resources--top-header:after { left: 0.15%; } .c-resources--additional { text-align: center; } @media only screen and (max-width: 699px) { .c-resources--additional .c-resources__item-header { margin-bottom: 10px; } .c-resources--top-header { display: inline-block; white-space: initial; } } @media only screen and (max-width: 699px) { .c-resources--additional p { margin-bottom: 10px; } } .c-resources--additional__item { text-align: center; padding: 0 3%; } .c-resources--additional__item:first-child { padding-left: 5%; } .c-resources--additional__item:last-child { padding-right: 5%; } .c-resources--two-boxes { text-align: center; } .c-resources--two-boxes.single-box-callout { text-align: center; width: 100%; } .c-resources--two-boxes .c-resources__item-header { margin-bottom: 5px; } @media only screen and (max-width: 699px) { .c-resources--two-boxes .c-resources__item-header { font-size: 22px; line-height: 28px; } } .c-resources--two-boxes .c-resources__item { padding: 40px 5.9% 40px 5.9%; border: 1px solid #dadee3; } @media only screen and (max-width: 959px) { .c-resources--two-boxes .c-resources__item { padding-top: 30px; padding-bottom: 30px; } } .c-resources--two-boxes .l-columns__item + .l-columns__item { margin-left: 15px; } @media only screen and (max-width: 699px) { .c-resources--two-boxes .l-columns__item + .l-columns__item { margin-left: 0; } } .c-infobox { margin-bottom: 10px; } /*RDA Change: Changed font sizes to 40-30 (was 30-22) */ .c-infobox__display { /*font-size: 30px;*/ /*line-height: 32px;*/ line-height: 42px; font-size: 40px; color: #00a88c; } .l-columns--steps__num { /*font-size: 30px;*/ /*line-height: 32px;*/ line-height: 42px; font-size: 40px; color: #00a88c; } /*RDA Change: Changed font sizes to 40-30 (was 30-22) */ @media only screen and (min-width: 699px) and (max-width: 959px) { .c-infobox__display, .l-columns--steps__num { /*font-size: 22px; font-size: -webkit-calc( 22px + (30 - 22) * ( (100vw - 699px) / ( 959 - 699) )); font-size: calc( 22px + (30 - 22) * ( (100vw - 699px) / ( 959 - 699) ));*/ font-size: 30px; font-size: -webkit-calc( 30px + (40 - 30) * ( (100vw - 699px) / ( 959 - 699) )); font-size: calc( 30px + (40 - 30) * ( (100vw - 699px) / ( 959 - 699) )); line-height: 1.2em; } } /*RDA Change: Changed font sizes to 40-30 (was 30-22) */ @media only screen and (max-width: 699px) { .c-infobox__display, .l-columns--steps__num { /*font-size: 22px;*/ font-size: 30px; } } /*RDA Change: Changed font size to 17px from 13px*/ .c-infobox__display-frequence, .l-columns--steps__num-frequence { font-size: 17px; line-height: 17px; } /*RDA Change: Changed font sizes to 40-30 (was 30-22) */ @media only screen and (max-width: 699px) { .c-infobox__display, .l-columns--steps__num { /*font-size: 22px; line-height: 24px;*/ font-size: 30px; line-height: 32px; } } .c-infobox__note { font-size: 13px; line-height: 16px; color: #5f6f7f; } @media only screen and (max-width: 699px) { .c-infobox__note { margin-top: 3px; } } .c-infobox--xlarge .c-infobox__display { font-size: 60px; line-height: 64px; } @media only screen and (min-width: 699px) and (max-width: 959px) { .c-infobox--xlarge .c-infobox__display { font-size: 45px; font-size: -webkit-calc( 45px + (60 - 45) * ( (100vw - 699px) / ( 959 - 699) )); font-size: calc( 45px + (60 - 45) * ( (100vw - 699px) / ( 959 - 699) )); line-height: 1.2em; } } @media only screen and (max-width: 699px) { .c-infobox--xlarge .c-infobox__display { font-size: 45px; } } .c-infobox--xlarge .c-infobox__display-frequence { font-size: 30px; line-height: 34px; } @media only screen and (max-width: 699px) { .c-infobox--xlarge { display: none; } } .c-infobox--large .c-infobox__display { font-size: 40px; line-height: 42px; } @media only screen and (min-width: 699px) and (max-width: 959px) { .c-infobox--large .c-infobox__display { font-size: 30px; font-size: -webkit-calc( 30px + (40 - 30) * ( (100vw - 699px) / ( 959 - 699) )); font-size: calc( 30px + (40 - 30) * ( (100vw - 699px) / ( 959 - 699) )); line-height: 1.2em; } } @media only screen and (max-width: 699px) { .c-infobox--large .c-infobox__display { font-size: 30px; } } .c-infobox--large .c-infobox__display-frequence { font-size: 17px; line-height: 24px; } @media only screen and (max-width: 699px) { .c-infobox--large .c-infobox__display { font-size: 30px; line-height: 32px; } } .c-infobox--small .c-infobox__display { font-size: 22px; line-height: 24px; } .c-infobox--small .c-infobox__display-frequence { font-size: 13px; line-height: 24px; } @media only screen and (max-width: 699px) { .c-infobox--small .c-infobox__display { font-size: 22px; line-height: 24px; } } .c-hero .c-infobox { margin-bottom: 0; } .c-hero .c-infobox > .c-infobox__display, .c-hero .c-infobox > .c-infobox__note { color: #fff; } .c-hero .c-infobox > .c-infobox__display { font-size: 60px; line-height: 60px; margin-bottom: 0px; } .c-hero__returnLink { padding-top: 0px; /* padding-top: 15px;*/ padding-left: 25px; } .c-hero__returnLink a { color: #fff; text-decoration: underline; background: transparent url(/Assets/images/controls/ui/back-arrow.svg) center left no-repeat; padding-left: 35px; } @media only screen and (max-width: 959px) { .c-hero .c-infobox > .c-infobox__display { font-size: 45px; margin-bottom: 0; } } @media only screen and (max-width: 959px) and (min-width: 699px) and (max-width: 959px) { .c-hero .c-infobox > .c-infobox__display { font-size: 45px; font-size: -webkit-calc( 45px + (60 - 45) * ( (100vw - 699px) / ( 959 - 699) )); font-size: calc( 45px + (60 - 45) * ( (100vw - 699px) / ( 959 - 699) )); line-height: 1.2em; } } @media only screen and (max-width: 959px) and (max-width: 699px) { .c-hero .c-infobox > .c-infobox__display { font-size: 45px; } } .c-hero .c-infobox > .c-infobox__note { font-size: 14px; line-height: 18px; } .c-callout { position: relative; } .c-callout + .c-callout { margin-top: 50px; } .c-callout__header { line-height: 28px; } .c-callout--iconheader { background: #fff; text-align: center; border: 1px solid #dadee3; box-shadow: 3px 3px 0px 0px rgba(147,158,169,0.3); margin-bottom: 4px; /*z-index: -1;*/ } .c-callout--iconheader.l-content-holder { padding: 50px 0 20px 0; } @media only screen and (max-width: 959px) { .c-callout--iconheader.l-content-holder { padding-top: 60px; padding-left: 20px; padding-right: 20px; } } .c-callout--iconheader__icon { display: inline-block; background: #fff; border-radius: 50%; border: 1px solid #dadee3; position: absolute; left: 50%; top: -32px; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); width: 85px; height: 85px; } /*RDA Change: Removed, do not know why this styling is necessary, but was causing a bug on Notched callout text*/ .c-callout--iconheader__icon:before { content: ''; display: block; width: 110%; margin-left: -5%; height: 56px; background: #000; background: #fff; position: absolute; bottom: -4px; left: 0; } .c-callout--on-sidebar .c-callout--iconheader__icon { width: 60px; height: 60px; } .c-callout--on-sidebar .c-callout--iconheader__icon:before { height: 31px; } .c-callout--iconheader__icon > img { position: absolute; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } .c-callout--iconheader__icon > img:before { content: ''; display: block; padding-top: 100%; } /*RDA Change: Added calculations*/ .c-callout--iconheader__header { font-size: 30px; margin-top: 4px; margin-bottom: 20px; z-index: 1000; } @media only screen and (max-width: 959px) { .c-callout--iconheader__header { font-size: 28px; font-size: -webkit-calc( 28px + (30 - 28) * ( (100vw - 699px) / ( 959 - 699) )); font-size: calc( 28px + (30 - 28) * ( (100vw - 699px) / ( 959 - 699) )); line-height: 1.2em; } } @media only screen and (min-width: 320px) and (max-width: 699px) { .c-callout--iconheader__header { font-size: 18px; font-size: -webkit-calc( 18px + (28 - 18) * ( (100vw - 320px) / ( 699 - 320) )); font-size: calc( 18px + (28 - 18) * ( (100vw - 320px) / ( 699 - 320) )); line-height: 1.2em; } } @media only screen and (max-width: 320px) { .c-callout--iconheader__header { font-size: 18px; line-height: 1.2em; } } .c-callout--iconheader__content { padding: 10px 0 10px 0; font-size: 18px; line-height: 24px; } .c-callout--iconheader__content_aside { padding: 30px 0 10px 0; font-size: 18px; line-height: 24px; } .c-callout--gray { padding: 30px 25px; background-color: #f2f3f5; text-align: center; } .c-plainlist li { display: inline-block; position: relative; } .c-plainlist li + li { margin-left: 19px; } .c-plainlist li + li:before { content: ''; display: inline-block; margin-right: 19px; width: 9px; height: 9px; border: 3px solid #c6cdd4; border-radius: 50%; } @media only screen and (max-width: 959px) { .c-plainlist { font-size: 14px; line-height: 18px; } .c-plainlist li + li { margin-left: 15px; } .c-plainlist li + li:before { margin-right: 15px; } } @media only screen and (max-width: 699px) { .c-plainlist li { display: block; } .c-plainlist li + li { margin-left: 0px; /*RDA CHange decreased margin*/ margin-top: 30px; } .c-plainlist li + li:before { position: absolute; left: 50%; top: -18px; -webkit-transform: translateX(-52%); -ms-transform: translateX(-52%); transform: translateX(-52%); } } .c-mainheader { min-width: 320px; position: fixed; height: 95px; width: 100%; top: 0; left: 0; z-index: 30; color: #fff; background: #1b3045; } @media only screen and (max-width: 699px) { .c-mainheader { height: 60px; } } @media only screen and (max-width: 699px) { .c-mainheader { -webkit-transition: -webkit-transform 0.2s linear; transition: -webkit-transform 0.2s linear; transition: transform 0.2s linear; transition: transform 0.2s linear, -webkit-transform 0.2s linear; overflow: hidden; } } .c-mainheader a { color: #fff; } .c-mainheader a:hover { color: #76f4d8; } @media only screen and (max-width: 699px) { .c-mainheader a:hover { color: #1b3045; } } .c-mainheader__hamburger { display: none; cursor: pointer; } @media only screen and (max-width: 699px) { .c-mainheader__hamburger { display: block; position: absolute; top: 20px; right: 0; opacity: 1; -ms-filter: none; -webkit-filter: none; filter: none; -webkit-transition: opacity 0.5s; transition: opacity 0.5s; } .mobile-menu-open .c-mainheader__hamburger { opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); visibility: hidden; } } .c-mainheader__hamburger-close { display: none; cursor: pointer; } @media only screen and (max-width: 699px) { .c-mainheader__hamburger-close { z-index: 10; display: block; position: absolute; top: 6px; right: 12px; width: 30px; height: 30px; /*RDA Update close button*/ background: url("/Assets/images/icons/close-blue.svg") 50% 50% no-repeat; background-size: 16px 16px; -webkit-transform: rotate(-45deg); -ms-transform: rotate(-45deg); transform: rotate(-45deg); opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); -webkit-transition: all 0.5s; transition: all 0.5s; visibility: hidden; z-index:200; } .mobile-menu-open .c-mainheader__hamburger-close { -webkit-transform: rotate(0deg); -ms-transform: rotate(0deg); transform: rotate(0deg); opacity: 1; -ms-filter: none; -webkit-filter: none; filter: none; visibility: visible; } .mobile-menu-open .c-megamenu__topmenu { margin-top: 40px; } } /*RDA URGENT HERE IS START OF NAVIGATION CSS*/ /*RDA NEw header CSS*/ .c-mainheader__logo { position: absolute; bottom: 18px; left: 0; z-index: 1; } .c-mainheader__logo img { display: block; } .c-mainheader__logo > * { float: left; } .c-mainheader__logo a + a { margin-left: 15px; } @media only screen and (max-width: 959px) { .c-mainheader__logo { height: 40px; } .c-mainheader__logo a + a { margin-left: 12px; } } @media only screen and (max-width: 699px) { .c-mainheader__logo { height: 34px; bottom: 14px; } .c-mainheader__logo a + a { margin-left: 10px; } } @media only screen and (max-width: 959px) { .c-mainheader__logo-nfl > img { width: 29px; height: auto; } } @media only screen and (max-width: 699px) { .c-mainheader__logo-nfl > img { width: 26px; } } @media only screen and (min-width: 959px) { .c-mainheader__logo-nflpa { -webkit-transform: translateY(3px); -ms-transform: translateY(3px); transform: translateY(3px); } } @media only screen and (max-width: 959px) { .c-mainheader__logo-nflpa > img { width: 30px; height: auto; -webkit-transform: translateY(2px); -ms-transform: translateY(2px); transform: translateY(2px); } } @media only screen and (max-width: 699px) { .c-mainheader__logo-nflpa { -webkit-transform: none; -ms-transform: none; transform: none; } .c-mainheader__logo-nflpa > img { width: 27px; } } .c-mainheader__logohr { width: 1px; height: 57px; background: #5f6e7c; display: inline-block; margin: 0px 18px; } @media only screen and (min-width: 699px) and (max-width: 959px) { .c-mainheader__logohr { height: 39px; margin: 0px 13px; -webkit-transform: translateY(0px); -ms-transform: translateY(0px); transform: translateY(0px); } } @media only screen and (max-width: 699px) { .c-mainheader__logohr { display: none; } } .c-mainheader__logotext { display: inline-block; } @media only screen and (min-width: 959px) { .c-mainheader__logotext { -webkit-transform: translateY(9px); -ms-transform: translateY(9px); transform: translateY(9px); } } @media only screen and (max-width: 959px) { .c-mainheader__logotext { -webkit-transform: translateY(8px); -ms-transform: translateY(8px); transform: translateY(8px); } .c-mainheader__logotext img { width: 85px; height: auto; } } @media only screen and (max-width: 699px) { .c-mainheader__logotext { margin-left: 12px; -webkit-transform: translateY(2px); -ms-transform: translateY(2px); transform: translateY(2px); } .c-mainheader__logotext img { width: 92px; height: 34px; } } .c-mainheader__user-tools { position: absolute; top: 0px; right: 0; height: 40px; line-height: 40px; } .c-mainheader__user-tools__links a + a { margin-left: 25px; } .c-mainheader__user-tools__block { float: left; } .c-mainheader__user-tools__block + .c-mainheader__user-tools__block { margin-left: 25px; } .c-mainheader__user-tools__block + .c-mainheader__user-tools__links { margin-left: 10px; } @media only screen and (max-width: 699px) { .c-mainheader__user-tools { position: relative; right: inherit; top: inherit; position: absolute; right: 40px; width: 15px; height: 60px; padding-top: 11px; } } /*Old Logo Header CSS*/ /*.c-mainheader__logo { position: absolute; bottom: 16px; left: 0; } .c-mainheader__logo img { display: block; } .c-mainheader__logo > a { display: inline-block; } .c-mainheader__logo a + a { margin-left: 8px; } @media only screen and (max-width: 959px) { .c-mainheader__logo { bottom: 18px; } .c-mainheader__logo a { float: left; } .c-mainheader__logo a > img { -webkit-transform: scale(0.69); -ms-transform: scale(0.69); transform: scale(0.69); -webkit-transform-origin: 0% 70%; -ms-transform-origin: 0% 70%; transform-origin: 0% 70%; } .c-mainheader__logo .c-mainheader__logotext a > img { -webkit-transform-origin: 0% 100%; -ms-transform-origin: 0% 100%; transform-origin: 0% 100%; } .c-mainheader__logo a + a { margin-left: 2px; } } @media only screen and (max-width: 699px) { .c-mainheader__logo { bottom: 10px; } .c-mainheader__logo a > img { -webkit-transform: scale(0.6); -ms-transform: scale(0.6); transform: scale(0.6); -webkit-transform-origin: 0% 90%; -ms-transform-origin: 0% 90%; transform-origin: 0% 90%; } .c-mainheader__logo a + a { margin-left: -2px; } .c-mainheader__logo .c-mainheader__logotext a > img { -webkit-transform-origin: 0% 100%; -ms-transform-origin: 0% 100%; transform-origin: 0% 100%; } } @media only screen and (min-width: 959px) { .c-mainheader__logo-nflpa { -webkit-transform: translateY(-1px); -ms-transform: translateY(-1px); transform: translateY(-1px); } } @media only screen and (max-width: 699px) { .c-mainheader__logo-nflpa { -webkit-transform: none; -ms-transform: none; transform: none; } } .c-mainheader__logohr { width: 1px; height: 57px; background: #5f6e7c; display: inline-block; margin: 0px 14px; } @media only screen and (min-width: 699px) and (max-width: 959px) { .c-mainheader__logohr { height: 35px; margin: 0px 6px 0 0px; -webkit-transform: translateY(3px); -ms-transform: translateY(3px); transform: translateY(3px); } } @media only screen and (max-width: 699px) { .c-mainheader__logohr { display: none; } } .c-mainheader__logotext { display: inline-block; } @media only screen and (max-width: 959px) { .c-mainheader__logotext { -webkit-transform: translateY(3px); -ms-transform: translateY(3px); transform: translateY(3px); } .c-mainheader__logotext > img { width: 70%; } } @media only screen and (max-width: 699px) { .c-mainheader__logotext { -webkit-transform: translateY(4px); -ms-transform: translateY(4px); transform: translateY(4px); } }*/ /*RDA URGENT HERE IS END OF NAVIGATION CSS*/ .c-mainheader__user-tools { position: absolute; top: 0px; right: 0; height: 40px; line-height: 40px; } .c-mainheader__user-tools__links a + a { margin-left: 25px; } .c-mainheader__user-tools__block { float: left; } .c-mainheader__user-tools__block + .c-mainheader__user-tools__block { margin-left: 25px; } .c-mainheader__user-tools__block + .c-mainheader__user-tools__links { margin-left: 10px; } @media only screen and (max-width: 699px) { .c-mainheader__user-tools { position: relative; right: inherit; top: inherit; position: absolute; right: 50px; width: 15px; height: 60px; padding-top: 11px; } } .c-hero { /*background: #27b696;*/ background: #25aa8d; color: #fff; -webkit-transform: translateZ(0); -ms-transform: translateZ(0); transform: translateZ(0); } .c-hero .l-content-holder { padding-top: 30px; padding-bottom: 30px; } .c-hero.is-clone .l-content-holder { padding-top: 30px; padding-bottom: 30px; } @media only screen and (max-width: 699px) { .c-hero .l-content-holder { padding-top: 15px; padding-bottom: 15px; } } .c-hero__header { letter-spacing: 0px; color: #fff; margin-bottom: 0; } @media only screen and (min-width: 699px) and (max-width: 959px) { .c-hero__header { font-size: 34px; font-size: -webkit-calc( 34px + (46 - 34) * ( (100vw - 699px) / ( 959 - 699) )); font-size: calc( 34px + (46 - 34) * ( (100vw - 699px) / ( 959 - 699) )); line-height: 1.2em; } } @media only screen and (max-width: 699px) { .c-hero__header { font-size: 34px; } } @media only screen and (max-width: 699px) { .c-hero__header { font-size: 20px; } } .c-hero__header + .c-hero__columns { margin-top: 25px; } @media only screen and (max-width: 699px) { .c-hero__header + .c-hero__columns { margin-top: 10px; } } .c-hero__columns { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-pack: justify; -o-box-pack: justify; -ms-flex-pack: justify; -webkit-justify-content: space-between; justify-content: space-between; } .c-hero__columns__primary { -webkit-flex-basis: 64%; -ms-flex-preferred-size: 64%; flex-basis: 64%; font-size: 16px; line-height: 22px; } .c-hero__columns__secondary { -webkit-flex-basis: 25.44444%; -ms-flex-preferred-size: 25.44444%; flex-basis: 25.44444%; position: relative; } .c-hero__columns__secondary:before { display: block; content: ''; width: 1px; height: 100%; background: #76f4d8; position: absolute; top: 0; left: -15px; } @media only screen and (max-width: 699px) { .c-hero__columns__primary { -webkit-flex-basis: 100%; -ms-flex-preferred-size: 100%; flex-basis: 100%; text-align: center; display:flex; flex-direction:column; } .c-hero__columns__secondary { display: none; } .c-hero__columns { flex-direction:column; } } .c-hero .c-hero__header { opacity: 1; -ms-filter: none; -webkit-filter: none; filter: none; -webkit-transition: opacity 0.5s 0.2s linear, -webkit-transform 1s 0.2s; transition: opacity 0.5s 0.2s linear, -webkit-transform 1s 0.2s; transition: opacity 0.5s 0.2s linear, transform 1s 0.2s; transition: opacity 0.5s 0.2s linear, transform 1s 0.2s, -webkit-transform 1s 0.2s; } .c-hero .c-hero__columns { opacity: 1; -ms-filter: none; -webkit-filter: none; filter: none; -webkit-transition: opacity 0.5s; transition: opacity 0.5s; } .c-hero.is-offscreen .c-hero__columns { opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); } html.fixed-header-mobile .c-hero.is-offscreen .c-hero__columns { opacity: 1; -ms-filter: none; -webkit-filter: none; filter: none; } html.fixed-header-mobile .c-hero.is-offscreen .c-hero__header { opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); -webkit-transform: translateY(5px); -ms-transform: translateY(5px); transform: translateY(5px); } .c-hero.is-clone { overflow: hidden; position: fixed; top: 95px; width: 100%; background: #1b997d; opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); visibility: hidden; -webkit-transition: visibility 0s linear 0.2s, opacity 0.2s linear; transition: visibility 0s linear 0.2s, opacity 0.2s linear; z-index: 28; } .c-hero.is-clone.is-shown { visibility: visible; opacity: 1; -ms-filter: none; -webkit-filter: none; filter: none; -webkit-transition-delay: 0s; transition-delay: 0s; } @media only screen and (max-width: 699px) { .c-hero.is-clone { top: 60px; height: 60px; overflow: hidden; } .mobile-search-open .c-hero.is-clone { top: 113px; } } @media only screen and (max-width: 699px) { .c-hero.is-clone .l-content-holder { padding-top: 15px; } } @media only screen and (max-width: 699px) { .c-hero.is-clone .c-hero__header { font-size: 20px; } } /* .c-hero.is-clone .c-hero__columns { display: none; }*/ .c-hero.is-clone .c-hero__columns .c-hero-overview-text { display: none; } .c-hero.is-clone .c-hero__columns .c-hero__columns__secondary { display: none; } .c-hero.is-clone .c-hero__columns .c-hero-column-image { display: none; } /*Rda Change - MAIN SPACING CHANGE*/ .c-mainfooter { background: #f2f3f5; text-align: center; display: block; -webkit-flex-shrink: 0; -ms-flex-negative: 0; flex-shrink: 0; margin-top: 90px; } .footer-spacing { margin-top: 0px !important; } .c-mainfooter__contact { padding: 23px 0 18px 0; } .c-mainfooter__contact__head { font-family: "Macha-Bold", sans-serif; font-size: 14px; text-transform: uppercase; letter-spacing: 1.5px; margin-bottom: 15px; color: #5f6f7f; } .c-mainfooter__copy { font-size: 14px; color: #949fab; padding: 25px 0; border-top: 1px solid #dadee3; } @media only screen and (max-width: 699px) { .c-mainfooter__copy { font-size: 12px; } } .c-mainfooter__copy p { margin: 0; } .c-mainfooter__copy p + p { margin-top: 15px; } .c-mainfooter__links { margin-top: 15px; } @media only screen and (max-width: 699px) { .c-mainfooter__links { margin-top: 20px; } } .c-mainfooter__links li { display: inline-block; padding-left: 0.5em; padding-right: 0.5em; } .c-mainfooter__links li + li { border-left: 1px solid #606f7f; } .c-mainfooter__links li:first-child { padding-left: 0; } .c-mainfooter__links li:last-child { padding-right: 0; } @media only screen and (max-width: 699px) { .c-mainfooter__links li { display: block; bottom: 0; } .c-mainfooter__links li + li { margin-top: 15px; } } @media only screen and (max-width: 699px) { .c-mainfooter__copy-nfplb { display: block; } } .c-infographic { position: relative; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; } @media only screen and (max-width: 699px) { .c-infographic { padding-bottom: 40px; } } .c-infographic__header { margin-bottom: 5px; line-height: 24px; } .c-infographic__item { position: relative; -webkit-flex-shrink: 1; -ms-flex-negative: 1; flex-shrink: 1; } .c-infographic__item + .c-infographic__item { margin-left: 40px; } @media only screen and (max-width: 699px) { .c-infographic__item + .c-infographic__item { margin-left: 0; margin-top: 0px; } } .c-infographic__item p { margin-bottom: 10px; } .c-infographic--2-items > .c-infographic__item { -webkit-flex-basis: 50%; -ms-flex-preferred-size: 50%; flex-basis: 50%; } @media only screen and (min-width: 699px) { .c-infographic--3-items { -webkit-box-pack: justify; -o-box-pack: justify; -ms-flex-pack: justify; -webkit-justify-content: space-between; justify-content: space-between; } .c-infographic--3-items .c-infographic__item { -webkit-flex-basis: 33.33333%; -ms-flex-preferred-size: 33.33333%; flex-basis: 33.33333%; margin-left: 0; } /*RDA Change Made made width 205 (was 175)*/ .c-infographic--3-items .c-infographic__item-wrapper { width: 205px; margin-right: auto; margin-left: auto; } .c-infographic--3-items .c-infographic__item:first-child .c-infographic__item-wrapper { margin-left: inherit; } .c-infographic--3-items .c-infographic__item:nth-last-child(4) .c-infographic__item-wrapper { margin-right: inherit; margin-left: auto; } } .c-infographic--4-items > .c-infographic__item { -webkit-flex-basis: 25%; -ms-flex-preferred-size: 25%; flex-basis: 25%; } .c-infographic__item { text-align: center; position: relative; } .c-infographic__item:before { content: ''; display: block; position: absolute; padding-top: 90px; left: -25px; width: 12px; height: 19px; background: url("/Assets/images/controls/progress-arrow.svg") 50% 100% no-repeat; } @media only screen and (max-width: 699px) { .c-infographic__item:before { display: none; } } .c-infographic__item:first-child:before { display: none; } .c-infographic--3-items > .arrow { display: block; position: absolute; padding-top: 90px; width: 12px; height: 19px; background: url("/Assets/images/controls/progress-arrow.svg") 50% 100% no-repeat; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); } .c-infographic--3-items > .arrow:nth-last-child(2) { left: 30.97222%; } @media only screen and (max-width: 699px) { .c-infographic--3-items > .arrow:nth-last-child(2) { display: none; } } .c-infographic--3-items > .arrow:nth-last-child(1) { left: 69.02778%; } @media only screen and (max-width: 699px) { .c-infographic--3-items > .arrow:nth-last-child(1) { display: none; } } .c-infographic--3-items .c-infographic__item:before { display: none; } .c-infographic--3-items .c-infographic__item:first-child { margin-left: 1.95%; } @media only screen and (max-width: 900px) { .c-infographic--3-items .c-infographic__item:first-child { margin-left: 1%; } } @media only screen and (max-width: 800px) { .c-infographic--3-items .c-infographic__item:first-child { margin-left: 0; } } .c-infographic--3-items .c-infographic__item:nth-last-child(4) { margin-right: 1.95%; } @media only screen and (max-width: 900px) { .c-infographic--3-items .c-infographic__item:nth-last-child(4) { margin-right: 1%; } } @media only screen and (max-width: 800px) { .c-infographic--3-items .c-infographic__item:nth-last-child(4) { margin-right: 0; } } .c-infographic__controls-holder { display: none; } @media only screen and (max-width: 699px) { .c-infographic__controls-holder { display: block; } } .c-infographic__next, .c-infographic__prev { position: absolute; top: 120px; left: 0; } .c-infographic__next path, .c-infographic__prev path { stroke: #dadee3; } .c-infographic__next.is-enabled, .c-infographic__prev.is-enabled { cursor: pointer; } .c-infographic__next.is-enabled path, .c-infographic__prev.is-enabled path { stroke: #107eb1; } .c-infographic__next.is-enabled:active path, .c-infographic__prev.is-enabled:active path { stroke: #0083ae; } .c-infographic__next { left: inherit; right: 0; } .c-infographic__navdots { position: absolute; bottom: 0; left: 0; width: 100%; text-align: center; } .c-infographic__navdots > .dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: #dadee3; -webkit-transition: background 0.5s; transition: background 0.5s; cursor: pointer; } .c-infographic__navdots > .dot.is-selected { background: #107eb1; } .c-infographic__navdots > .dot + .dot { margin-left: 10px; } @media only screen and (max-width: 699px) { .c-infographic .l-columns__item + .l-columns__item { margin-top: 0; margin-left: inherit; } .c-infographic__item { width: 100%; position: absolute !important; top: 0; -webkit-transition: -webkit-transform 0.7s; transition: -webkit-transform 0.7s; transition: transform 0.7s; transition: transform 0.7s, -webkit-transform 0.7s; } .c-infographic__item.is-current { -webkit-transform: translateX(0%); -ms-transform: translateX(0%); transform: translateX(0%); } .c-infographic__item.is-offscreen-left { -webkit-transform: translateX(-100%); -ms-transform: translateX(-100%); transform: translateX(-100%); } .c-infographic__item.is-offscreen-right { -webkit-transform: translateX(100%); -ms-transform: translateX(100%); transform: translateX(100%); } .c-infographic__item-wrapper { max-width: 270px; margin: auto; } } /* TODO Added for bug on small screens*/ @media only screen and (max-width: 344px) { .c-infographic__item-wrapper { margin-right: 20px; margin-left: 20px; } } /*TODO Mod made stop max width*/ .c-infographic__icon { position: relative; display: block; width: 100%; background: #eaedf0; border-radius: 50%; margin: 0 auto 20px auto; overflow: hidden; /*max-width: 150px;*/ max-width: 160px; } .c-infographic--3-items .c-infographic__icon { max-width: 175px; height: 175px; } @media only screen and (max-width: 699px) { .c-infographic--3-items .c-infographic__icon > img { /*max-width: 150px;*/ /*width: 150px; height: 150px;*/ } .c-infographic--4-items .c-infographic__icon > img { /*max-width: 150px;*/ /*max-width: 175px; height: 175px;*/ } .c-infographic--4-items .c-infographic__icon { max-width: 175px; height: 175px; } } @media only screen and (min-width: 699px) and (max-width: 900px) { .c-infographic--4-items .c-infographic__icon > img { /*max-width: 150px;*/ width: 140px; height: 140px; } } /*.c-infographic__icon:before { content: ""; display: block; padding-top: 100%; }*/ .c-infographic__icon:after { content: ''; position: absolute; width: 100%; height: 100%; left: 50%; top: 50%; background-repeat: no-repeat; background-position: 0% 0%; } .c-infographic__icon--school:after { -webkit-transform: translate(-31px, -30px); -ms-transform: translate(-31px, -30px); transform: translate(-31px, -30px); background-image: url("/Assets/images/icons/infographics/school.svg"); } .c-infographic__icon--college-tuition:after { -webkit-transform: translate(-29px, -33px); -ms-transform: translate(-29px, -33px); transform: translate(-29px, -33px); background-image: url("/Assets/images/icons/infographics/college-tuition.svg"); } .c-infographic__icon--checklist:after { -webkit-transform: translate(-26px, -30px); -ms-transform: translate(-26px, -30px); transform: translate(-26px, -30px); background-image: url("/Assets/images/icons/infographics/checklist.svg"); } .c-infographic__icon--reimbursement:after { -webkit-transform: translate(-36px, -35px); -ms-transform: translate(-36px, -35px); transform: translate(-36px, -35px); background-image: url("/Assets/images/icons/infographics/reimbursement.svg"); } .c-header-search { width: 15px; width: 18px; height: 26px; /*overflow: hidden*/; position: relative; opacity: 1; -ms-filter: none; -webkit-filter: none; filter: none; -webkit-transition: opacity 0.15s; transition: opacity 0.15s; } .mobile-menu-open .c-header-search { opacity: 1; -ms-filter: none; -webkit-filter: none; filter: none; } .c-header-search__field, .c-header-search__but { position: absolute; right: 0; top: 0; } .c-header-search__but { top: 3px; right: 0; cursor: pointer; z-index: 2; } @media only screen and (max-width: 699px) { .c-header-search__but > svg { width: 22px; height: 22px; } .c-header-search { margin-top: 2px; width: 22px; } } .c-header-search__field { opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); } .c-header-search__field input { font-size: 16px; padding: 2px 5px; width: 100%; padding-right: 30px; } .c-header-search.is-shown { width: 200px; height: 100%; } .c-header-search.is-shown .c-header-search__field { opacity: 1; -ms-filter: none; -webkit-filter: none; filter: none; } .c-header-search.is-shown .c-header-search__but { right: 5px; } .c-header-search.is-shown .c-header-search__but svg g { stroke: #808080; } #mobile-search-bar .c-header-search__but svg g { stroke: #808080; } #mobile-search-bar .c-header-search__but { top: 19px; right: 10px; cursor: pointer; z-index: 2; } .c-guided { background: #2b9ecb; /*background: #00a4da;*/ color: #fff; text-align: center; height: 410px; } @media only screen and (max-width: 959px) { .c-guided { height: 480px; } } @media only screen and (max-width: 699px) { .c-guided { height: 425px; } } .c-guided-message-holder { padding: 20px; background: #56d3fc; position: relative; margin-bottom: 40px; } .c-guided-message-holder::after { content: ''; width: 0; height: 0; background: 0; border-style: solid; border-width: 15px 17.5px 0 17.5px; border-color: #56d3fc transparent transparent transparent; position: absolute; left: 50%; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); bottom: -15px; } .c-guided-message-holder ~ .c-guided { margin-top: -40px; } .c-guided__message { text-align: center; color: #152c46; font-size: 18px; line-height: 22px; letter-spacing: 0.2px; font-family: "Macha-Medium", sans-serif; } .c-guided__header-holder { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-pack: end; -o-box-pack: end; -ms-flex-pack: end; -webkit-justify-content: flex-end; justify-content: flex-end; -webkit-box-orient: vertical; -o-box-orient: vertical; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; height: 150px; } @media only screen and (max-width: 1440px) { .c-guided__header-holder { position: relative; } } @media only screen and (max-width: 959px) { .c-guided__header-holder { height: 140px; } } @media only screen and (max-width: 699px) { .c-guided__header-holder { height: 80px; } } .c-guided__welcome { text-transform: uppercase; letter-spacing: 0.57px; font-size: 16px; color: #d5f5ff; margin-bottom: 9px; font-family: "Macha-Bold", sans-serif; } @media only screen and (min-width: 320px) and (max-width: 699px) { .c-guided__welcome { font-size: 13px; font-size: -webkit-calc( 13px + (16 - 13) * ( (100vw - 320px) / ( 699 - 320) )); font-size: calc( 13px + (16 - 13) * ( (100vw - 320px) / ( 699 - 320) )); line-height: 1.2em; } } @media only screen and (max-width: 320px) { .c-guided__welcome { font-size: 13px; } } .c-guided__welcome ~ .c-guided__header-holder { margin-top: 0; } @media only screen and (max-width: 699px) { .c-guided__welcome { margin-bottom: 5px; } } .c-guided__footnote { margin-top: 15px; line-height: 21px; font-size: 14px; } @media only screen and (max-width: 959px) { .c-guided__footnote { margin-top: 45px; } } .c-guided__header { font-size: 40px; line-height: 44px; margin-bottom: 35px; padding: 0 70px; } .c-guided__header.bottom-message { font-size: 14px; line-height: 21px; margin-bottom: 35px; padding: 55px 70px; } @media only screen and (max-width: 959px) { .c-guided__header { font-size: 32px; line-height: 36px; margin-bottom: 25px; } .c-guided__header.bottom-message { font-size: 14px; line-height: 21px; margin-bottom: 15px; padding: 55px 70px; } } @media only screen and (max-width: 699px) { .c-guided__header { font-size: 18px; line-height: 24px; padding: 0 35px; margin-bottom: 15px; } .c-guided__header.bottom-message { color: #b6edff; font-size: 12px; line-height: 14px; margin-bottom: 0px; padding: 18px 5px; } } .c-guided__options-holder { position: relative; height: 260px; } @media only screen and (max-width: 959px) { .c-guided__options-holder { height: 340px; } } @media only screen and (max-width: 699px) { .c-guided__options-holder { height: 330px; } } .c-guided__back { position: absolute; left: -75px; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); width: 60px; height: 60px; display: inline-block; background-position: 47% 50%; background-repeat: no-repeat; background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width=%2215%22 height=%2224%22 viewBox=%220 0 15 24%22 xmlns=%22http://www.w3.org/2000/svg%22%3E%3Ctitle%3ELine%3C/title%3E%3Cpath d=%22M12 2.346l-9 9L12 21%22 stroke-width=%223%22 stroke=%22%23FFF%22 fill=%22none%22 stroke-linecap=%22square%22/%3E%3C/svg%3E"); background-color: rgba(86,211,252,0.5); overflow: hidden; border-radius: 50%; text-indent: -200px; -webkit-transition: background-color 0.15s; transition: background-color 0.15s; } .c-guided__back:hover { background-color: #56d3fc; } @media only screen and (max-width: 1440px) { .c-guided__back { left: 0px; top: inherit; bottom: 0px; } } @media only screen and (max-width: 959px) { .c-guided__back { width: 44px; height: 44px; background-size: 12px 20px; } } @media only screen and (max-width: 699px) { .c-guided__back { width: 40px; height: 40px; background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width=%2212%22 height=%2220%22 viewBox=%220 0 12 20%22 xmlns=%22http://www.w3.org/2000/svg%22%3E%3Cg transform=%22translate(-14 -12)%22 fill=%22none%22 fill-rule=%22evenodd%22%3E%3Ccircle cx=%2222%22 cy=%2222%22 r=%2222%22/%3E%3Cpath stroke=%22%2355D3FD%22 stroke-width=%222%22 d=%22M25 13l-9 9 9 9%22/%3E%3C/g%3E%3C/svg%3E"); background-color: transparent; left: -10px; top: inherit; bottom: 9px; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } .c-guided__back:hover, .c-guided__back:active { background-color: transparent; background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width=%2212%22 height=%2220%22 viewBox=%220 0 12 20%22 xmlns=%22http://www.w3.org/2000/svg%22%3E%3Cg transform=%22translate(-14 -12)%22 fill=%22none%22 fill-rule=%22evenodd%22%3E%3Ccircle cx=%2222%22 cy=%2222%22 r=%2222%22/%3E%3Cpath stroke=%22%23FFFFFF%22 stroke-width=%222%22 d=%22M25 13l-9 9 9 9%22/%3E%3C/g%3E%3C/svg%3E"); } } .c-guided__options { zoom: 1; text-align: center; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-lines: multiple; -moz-box-lines: multiple; -o-box-lines: multiple; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: center; -o-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; } .c-guided__options:after, .c-guided__options:before { content: ""; display: table; } .c-guided__options:after { clear: both; } @media only screen and (max-width: 959px) { .c-guided__options { margin-left: auto; margin-right: auto; } } .c-guided__options > li { -webkit-flex-basis: 31.61017%; -ms-flex-preferred-size: 31.61017%; flex-basis: 31.61017%; -webkit-flex-shrink: 1; -ms-flex-negative: 1; flex-shrink: 1; margin-bottom: 1.69492%; margin-right: 1.69492%; font-size: 22px; line-height: 28px; border: 2px solid #4ec0e5; border-radius: 5px; font-family: "Macha-Medium", sans-serif; } .c-guided__options > li:nth-child(3n) { margin-right: 0; } @media only screen and (max-width: 959px) { .c-guided__options > li { -webkit-flex-basis: 47.61905%; -ms-flex-preferred-size: 47.61905%; flex-basis: 47.61905%; margin-right: 1.90476%; margin-bottom: 1.90476%; } .c-guided__options > li:nth-child(3n) { margin-right: 1.90476%; } .c-guided__options > li:nth-child(2n) { margin-right: 0; } } @media only screen and (max-width: 959px) { .c-guided__options > li { font-size: 18px; line-height: 22px; } } @media only screen and (max-width: 699px) { .c-guided__options > li { font-size: 15px; line-height: 18px; } } .c-guided__options a { color: #fff; display: block; height: 85px; padding: 0 23px; -webkit-transition: background-color 0.3s; transition: background-color 0.3s; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-pack: center; -o-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; -webkit-box-orient: vertical; -o-box-orient: vertical; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; } .c-guided__options a:hover { background-color: #14b8ee; } .c-guided__options a:active { -webkit-transition-duration: 0s; transition-duration: 0s; background-color: #43c6f1; } @media only screen and (max-width: 699px) { .c-guided__options a { padding-left: 10px; padding-right: 10px; height: 80px; } } .c-guided__columns { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-pack: center; -o-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; } .c-guided__columns > .c-guided__column { -webkit-flex-basis: 33.33333%; -ms-flex-preferred-size: 33.33333%; flex-basis: 33.33333%; -webkit-flex-shrink: 1; -ms-flex-negative: 1; flex-shrink: 1; margin-bottom: 20px; position: relative; text-align: center; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-orient: vertical; -o-box-orient: vertical; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; margin-left: 35px; margin-right: 35px; } .c-guided__columns > .c-guided__column:first-child { margin-left: 0; } .c-guided__columns > .c-guided__column:last-child { margin-right: 0; } @media only screen and (max-width: 959px) { .c-guided__columns > .c-guided__column { margin-left: 20px; margin-right: 20px; } } .c-guided__columns > .c-guided__column + .c-guided__column:before { display: block; content: ''; width: 1px; height: 100%; background: #56d3fc; position: absolute; top: 0; left: -35px; } .c-guided__columns > .c-guided__column + .c-guided__column:first-child:before { display: none; } @media only screen and (max-width: 959px) { .c-guided__columns > .c-guided__column + .c-guided__column:before { left: -20px; } } .c-guided__columns--2col > .c-guided__column { -webkit-flex-basis: 50%; -ms-flex-preferred-size: 50%; flex-basis: 50%; margin-left: 50px; margin-right: 50px; } .c-guided__columns--2col > .c-guided__column + .c-guided__column:before { left: -50px; } @media only screen and (max-width: 959px) { .c-guided__columns--2col > .c-guided__column + .c-guided__column:before { left: -35px; } } @media only screen and (max-width: 959px) { .c-guided__columns--2col > .c-guided__column { -webkit-flex-basis: 50%; -ms-flex-preferred-size: 50%; flex-basis: 50%; margin-left: 35px; margin-right: 35px; } } .c-guided__column-header { font-size: 22px; line-height: 28px; margin-bottom: 5px; letter-spacing: -0.1px; } .c-guided__column-content { font-size: 16px; line-height: 22px; margin-bottom: 15px; } .c-guided__column-cta { -webkit-align-self: center; align-self: center; -ms-flex-item-align: center; margin-top: auto; z-index: 100; } .c-guided__column-cta > .ui-btn { margin-bottom: 0; } @media only screen and (max-width: 699px) { .c-guided__columns { display: block; margin-bottom: 15px; } .c-guided__column { margin: 0; background: #0083b5; width: 100%; margin-bottom: 2px !important; overflow: hidden; display: block !important; -webkit-transition: max-height 0.35s; transition: max-height 0.35s; max-height: 44px; } .c-guided__column.is-collapsed { max-height: 44px !important; } .c-guided__column.is-expanded { max-height: none; } .c-guided .c-guided__column + .c-guided__column { border: 0px; margin-left: 0; } .c-guided__column-header { height: 44px; font-size: 15px; line-height: 18px; padding: 0 8px; background: #20bff3; font-family: "Macha-Medium", sans-serif; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-pack: center; -o-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; -webkit-box-orient: vertical; -o-box-orient: vertical; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; position: relative; letter-spacing: 0; cursor: pointer; } .c-guided__column-header:after { content: ''; display: block; width: 20px; height: 9px; width: 0; height: 0; background: 0; border-style: solid; border-width: 9px 10px 0 10px; border-color: #20bff3 transparent transparent transparent; position: absolute; bottom: -9px; left: 50%; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); } .c-guided__column-content { padding: 12px 15px; margin-bottom: 0; font-size: 14px; line-height: 20px; } .c-guided__column-cta { padding-bottom: 15px; } .c-guided__column-cta a { text-transform: uppercase; letter-spacing: 1.5px; border: 0; box-shadow: none !important; padding: 0 !important; margin: 0 !important; background: transparent !important; color: #fff !important; border-radius: 0 !important; -webkit-transition-duration: 0 !important; transition-duration: 0 !important; } .c-guided__column-cta a::after { content: ''; width: 17px; height: 10px; display: inline-block; background: url("/Assets/images/controls/c-guided/cta-arrow-mobile.svg") no-repeat; margin-left: 6px; } .c-guided__column-cta a:hover { text-decoration: underline; } .c-guided__column-cta a:active { text-decoration: underline; color: #d9d9d9 !important; } .c-guided__column-content, .c-guided__column-cta { opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); -webkit-transition: opacity 0.25s 0.35s ease-out; transition: opacity 0.25s 0.35s ease-out; } .is-expanded .c-guided__column-content, .is-expanded .c-guided__column-cta { opacity: 1; -ms-filter: none; -webkit-filter: none; filter: none; } .c-guided__footnote { font-size: 12px; line-height: 14px; color: #b6edff; margin-top: 0; } } .c-guided__panel { width: 100%; opacity: 1; -ms-filter: none; -webkit-filter: none; filter: none; -webkit-transform: translateX(0%); -ms-transform: translateX(0%); transform: translateX(0%); -webkit-transition: all 0.6s ease-out; transition: all 0.6s ease-out; -webkit-transition-delay: 0.15s; transition-delay: 0.15s; } @media only screen and (max-width: 699px) { .c-guided__panel { -webkit-transition: all c-guided__transition--slide--mobile 0.2s ease-out; transition: all c-guided__transition--slide--mobile 0.2s ease-out; } } .c-guided__panel .c-guided__header, .c-guided__panel .c-guided__welcome { opacity: 1; -ms-filter: none; -webkit-filter: none; filter: none; -webkit-transition: opacity 0.2s linear; transition: opacity 0.2s linear; } .c-guided__panel .c-guided__back { opacity: 1; -ms-filter: none; -webkit-filter: none; filter: none; } .c-guided__panel--moving { position: absolute; } .c-guided__panel--moving .c-guided__header, .c-guided__panel--moving .c-guided__welcome, .c-guided__panel--moving .c-guided__back { opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); } .c-guided__panel--moving .c-guided__back { opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); } .c-guided__panel--upcoming { position: absolute; opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); -webkit-transform: translateX(100%); -ms-transform: translateX(100%); transform: translateX(100%); } .c-guided__panel--outgoing { opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); position: absolute; -webkit-transform: translateX(-100%); -ms-transform: translateX(-100%); transform: translateX(-100%); } .c-accordion__section-header { padding: 15px 20px 14px 20px; border-top: 1px solid #c6cdd4; border-bottom: 1px solid #c6cdd4; background-color: #f2f3f5; font-family: "Macha-Medium", sans-serif; color: #132c45; text-transform: uppercase; letter-spacing: 1.5px; font-weight: 500; } /*RDA Change: Added so that first child will have a top border*/ .c-accordion .c-accordion__section:first-child { border-top: 1px solid #c6cdd4; } .c-accordion__section { border-bottom: 1px solid #c6cdd4; } .c-accordion__section + .c-accordion__section-header { border-top: none; } .c-accordion__header-holder, .c-accordion__content-holder { padding-left: 35px; } .c-accordion__header-holder { position: relative; padding-top: 35px; padding-bottom: 35px; cursor: pointer; } @media only screen and (max-width: 699px) { .c-accordion__header-holder { padding-top: 15px; padding-bottom: 15px; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-pack: justify; -o-box-pack: justify; -ms-flex-pack: justify; -webkit-justify-content: space-between; justify-content: space-between; } } .c-accordion__header { margin-bottom: 0; } .c-accordion__header:hover { color: #0583ad; } .c-accordion__header:before { content: ''; display: block; width: 24px; height: 24px; position: absolute; left: 0; margin-top: -3px; background-size: contain; background: url("/Assets/images/controls/c-accordion/plus.svg") no-repeat; } .is-expanded .c-accordion__header:before { background-image: url("/Assets/images/controls/c-accordion/minus.svg"); } @media only screen and (max-width: 699px) { .c-accordion { padding-top: 20px; /*padding-bottom: 20px;*/ } .c-accordion__header { padding-right: 20px; -webkit-flex-shrink: 1; -ms-flex-negative: 1; flex-shrink: 1; } } @media only screen and (max-width: 699px) { .new-mix-review-table .c-accordion { padding-top: 0px; } } .c-accordion__header-holder__infobox { position: absolute; right: 0; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); } @media only screen and (max-width: 699px) { .c-accordion__header-holder__infobox { position: relative; float: right; padding-bottom: 0px; -webkit-transform: none; -ms-transform: none; transform: none; top: 0; } } .c-accordion__header-holder__infobox .c-infobox { margin-bottom: 0; text-align: right; } .c-accordion__header-holder__infobox .c-infobox__display { font-size: 30px; } @media only screen and (max-width: 699px) { .c-accordion__header-holder__infobox .c-infobox__note { margin-top: 0px; } } /*RDA Change: Removed dynamic font resizing*/ @media only screen and (max-width: 699px) and (min-width: 320px) and (max-width: 699px) { .c-accordion__header-holder__infobox .c-infobox__display { font-size: 22px; /*font-size: -webkit-calc( 22px + (30 - 22) * ( (100vw - 320px) / ( 699 - 320) )); font-size: calc( 22px + (30 - 22) * ( (100vw - 320px) / ( 699 - 320) ));*/ line-height: 1.2em; } } @media only screen and (max-width: 699px) and (max-width: 320px) { .c-accordion__header-holder__infobox .c-infobox__display { font-size: 22px; } } .c-accordion__content-holder { overflow: hidden; height: 0; } /*RDA Change: increase padding from 15 to 30px*/ .is-expanded > .c-accordion__content-holder { height: auto; padding-bottom: 30px; } /*RDA Change: Removed dynamci font size from Accordion header*/ @media only screen and (max-width: 699px) and (min-width: 320px) and (max-width: 699px) { .c-accordion__header { font-size: 16px; /*font-size: -webkit-calc( 16px + (22 - 16) * ( (100vw - 320px) / ( 699 - 320) )); font-size: calc( 16px + (22 - 16) * ( (100vw - 320px) / ( 699 - 320) ));*/ line-height: 1.2em; } } @media only screen and (max-width: 699px) and (max-width: 320px) { .c-accordion__header { font-size: 16px; } } .c-aside { padding-top: 55px; } .c-calc-slider { margin-top: 27px; } .c-calc-slider__tick { font-size: 14px; color: #5f6e7c; width: 30px; height: 30px; position: absolute; bottom: 29px; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); } .c-calc-slider__tick:after { content: ''; display: block; width: 1px; height: 10px; background: #c6cdd4; position: absolute; bottom: 0; left: 50%; } .c-calc-slider > header { font-size: 14px; color: #132c45; margin-bottom: 10px; } .c-calc-slider__rail-wrapper { padding-left: 15px; padding-right: 15px; border-radius: 22px; background-image: -webkit-linear-gradient(180deg, #0c5676 0%, #00a4da 48%, #27cea0 100%); background-image: -webkit-linear-gradient(right, #0c5676 0%, #00a4da 48%, #27cea0 100%); background-image: linear-gradient(-90deg, #0c5676 0%, #00a4da 48%, #27cea0 100%); } .c-calc-slider--with-ticks .c-calc-slider__rail-wrapper { margin-top: 50px; } .c-calc-slider__rail { height: 29px; position: relative; } .c-calc-slider__rail > .ui-slider-handle { cursor: pointer; z-index: 1; position: absolute; top: -4px; width: 39px; height: 39px; background: url("/Assets/images/controls/slider-handle.svg") no-repeat; background-size: contain; display: block; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); } .c-calc-slider__result { font-size: 30px; margin-top: 19px; margin-bottom: 24px; } .c-page-subnav { background: #0f7d68; /*background: #1b997d;*/ color: #fff; font-size: 15px; font-family: "Macha-Medium", sans-serif; text-align: center; opacity: 1; -ms-filter: none; -webkit-filter: none; filter: none; -webkit-transition: opacity 0.2s linear, visibility 0s; transition: opacity 0.2s linear, visibility 0s; -webkit-transform: translateZ(0); -ms-transform: translateZ(0); transform: translateZ(0); } .c-page-subnav > .l-content-holder { padding-top: 0; padding-bottom: 0; } .c-page-subnav--desktop header { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; clip: rect(0 0 0 0); overflow: hidden; } .c-page-subnav ul { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-lines: single; -moz-box-lines: single; -o-box-lines: single; -webkit-flex-wrap: nowrap; -ms-flex-wrap: nowrap; flex-wrap: nowrap; } .c-page-subnav--narrow.c-page-subnav ul { -webkit-box-pack: center; -o-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; } .c-page-subnav--wide.c-page-subnav ul { -webkit-box-pack: justify; -o-box-pack: justify; -ms-flex-pack: justify; -webkit-justify-content: space-between; justify-content: space-between; } .c-page-subnav a { color: #fff; } .c-page-subnav a:hover { color: #76f4d8; } .c-page-subnav li { margin: 0px 50px; padding-top: 25px; padding-bottom: 22px; position: relative; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-pack: center; -o-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; -webkit-box-orient: vertical; -o-box-orient: vertical; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; text-transform: uppercase; letter-spacing: 1.5px; letter-spacing: 0.5px; } .c-page-subnav--wide.c-page-subnav li { margin: 0px 4px; } .c-page-subnav--wide.c-page-subnav li:first-child { margin-left: 0; } .c-page-subnav--wide.c-page-subnav li:last-child { margin-right: 0; } .c-page-subnav li.is-selected:after { content: ''; width: 0; height: 0; background: 0; border-style: solid; border-width: 7px 8px 0 8px; border-color: #76f4d8 transparent transparent transparent; position: absolute; bottom: -6px; left: 50%; margin-left: -8px; } .c-page-subnav li.is-selected a { color: #76f4d8; } .c-page-subnav li.is-selected a:after { content: ''; display: block; width: 100%; height: 6px; background: #76f4d8; position: absolute; bottom: 0; } .c-page-subnav--mobile { background: #25aa8d; padding: 0; border: none; line-height: 45px; margin: 0; text-transform: uppercase; letter-spacing: 1.5px; letter-spacing: 0.5px; font-family: "Macha-Medium", sans-serif; } .c-page-subnav--mobile .l-content-holder { margin-left: 0; margin-right: 0; } .c-page-subnav--mobile br { content: ' '; } .c-page-subnav--mobile br:after { content: ' '; } .c-page-subnav--mobile header { height: 45px; cursor: pointer; } .c-page-subnav--mobile header:after { content: ''; display: inline-block; width: 13px; height: 8px; background: url("/Assets/images/controls/c-subnav/arrow-down.svg") no-repeat; margin-left: 10px; margin-bottom: 2px; } .is-open.c-page-subnav--mobile header:after { -webkit-transform: rotate(-180deg); -ms-transform: rotate(-180deg); transform: rotate(-180deg); } .c-page-subnav--mobile ul { background: #1b997d; display: none; padding-top: 5px; padding-bottom: 5px; } .is-open.c-page-subnav--mobile ul { display: block; border-top: 1px solid #8dccbe; } .c-page-subnav--mobile li { line-height: 45px; text-align: center; padding: 0; line-height: 1em; margin-left: 0px; margin-right: 0px; } .c-page-subnav--mobile li a { color: #fff; display: block; padding-top: 23px; padding-bottom: 22px; padding: 15px 10px; } .c-page-subnav--mobile li.is-selected { display: block; } .c-page-subnav--mobile li.is-selected:after { display: none; } .c-page-subnav--mobile li.is-selected a { color: #68f6d9; } .c-page-subnav--mobile li.is-selected a:after { display: none; } .c-page-subnav.is-pinned { position: fixed; z-index: 28; width: 100%; top: 143px; left: 0; visibility: visible; } .c-page-subnav.is-pinned.is-hidden { opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); visibility: hidden; -webkit-transition: opacity 0.2s linear, visibility 0s 0.2s; transition: opacity 0.2s linear, visibility 0s 0.2s; } @media only screen and (max-width: 699px) { .c-page-subnav.is-pinned { margin-top: 0; top: 120px; } .mobile-search-open .c-page-subnav.is-pinned { margin-top: 0; top: 173px; } } .c-megamenu { position: absolute; right: 0; bottom: 17px; width: 100%; text-align: right; font-family: "Macha-Medium", sans-serif; text-transform: uppercase; letter-spacing: 1.5px; letter-spacing: 0.5px; -webkit-transition: -webkit-transform 0.2s linear; transition: -webkit-transform 0.2s linear; transition: transform 0.2s linear; transition: transform 0.2s linear, -webkit-transform 0.2s linear; } @media only screen and (max-width: 959px) { .c-megamenu { bottom: 15px; } } @media only screen and (max-width: 699px) { /*RDA Mobile Nav Redesign*/ .c-megamenu { width: 100%; position: absolute; top: 0; background-color: white; } } .c-megamenu__topmenu > li { display: inline-block; font-size: 16px; position: relative; } @media only screen and (min-width: 699px) and (max-width: 959px) { .c-megamenu__topmenu > li { font-size: 14px; line-height: 17px; max-width: 85px; text-align: center; } } .c-megamenu__topmenu > li + li { margin-left: 48px; } @media only screen and (max-width: 1280px) { .c-megamenu__topmenu > li + li { margin-left: 3.75%; } } @media only screen and (max-width: 959px) { .c-megamenu__topmenu > li + li { margin-left: 2.85714%; } } .c-megamenu__topmenu .is-current > a, .c-megamenu__topmenu .is-hover > a { color: #67f6d8; cursor: default; } .c-megamenu__topmenu .is-current > a.cursor-hand { cursor: pointer; } @media only screen and (max-width: 699px) { .c-megamenu__topmenu .is-current > a, .c-megamenu__topmenu .is-hover > a { /*color: #1b3045;*/ color: #107EB1; } } @media only screen and (max-width: 699px) { .c-megamenu__topmenu { height: auto; } .c-megamenu__topmenu > li { display: block; text-align: left; } .c-megamenu__topmenu > li + li { margin-left: 0; border-top: 1px solid #dadee3; } .c-megamenu__topmenu > li > a { display: block; padding: 24px 40px 20px 20px; color: #1b3045; font-size:18px; } } .c-megamenu__toplevel.is-open > a { color: #76f4d8; } .c-megamenu__toplevel.is-open > a:after { content: ''; width: 0; height: 0; background: 0; border-style: solid; border-width: 0 8px 8px 8px; border-color: transparent transparent #76f4d8 transparent; position: absolute; bottom: -17px; left: 50%; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); } @media only screen and (max-width: 959px) { .c-megamenu__toplevel.is-open > a:after { bottom: -15px; } } @media only screen and (max-width: 699px) { .c-megamenu__toplevel.is-open > a { color: #1b3045; } .c-megamenu__toplevel.is-open > a:after { display: none; } } .c-megamenu__toplevel.is-open .c-megamenu__submenu { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; } @media only screen and (max-width: 699px) { .c-megamenu__toplevel.is-open .c-megamenu__submenu { display: block; } } @media only screen and (max-width: 699px) { /*RDA Menu Redesign*/ .c-megamenu__toplevel.has-submenu:before { content: ''; display: block; position: absolute; right: 20px; top: 25px; width: 15px; height: 15px; background: url("/Assets/images/icons/caret-blue.svg") 50% 50% no-repeat; /*background: url("/Assets/images/controls/mobile-menu-plus.svg") 50% 50% no-repeat;*/ } .c-megamenu__toplevel.has-submenu.is-open:before { transform: rotate(180deg); background: url("/Assets/images/icons/caret-blue.svg") 50% 50% no-repeat; /*background: url("/Assets/images/controls/mobile-menu-minus.svg") 50% 50% no-repeat;*/ } } .c-megamenu__submenu { display: none; background: #fff; position: absolute; border: 1px solid #dadee3; border-top: 6px solid #76f4d8; box-shadow: 3px 3px 0px 0px rgba(20,36,52,0.2); z-index: 10; top: -webkit-calc(100% + 17px); top: calc(100% + 17px); left: 50%; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); text-align: left; } @media only screen and (max-width: 959px) { .c-megamenu__submenu { top: -webkit-calc(100% + 15px); top: calc(100% + 15px); } } .c-megamenu__submenu a { color: #107eb1; text-transform: none; letter-spacing: 0px; font-family: "Macha-Book", sans-serif; } .c-megamenu__submenu a:hover { color: #0583ad; } .c-megamenu__submenu a:active { color: #04698a; } .c-megamenu__column a { color: #107eb1; text-transform: none; letter-spacing: 0px; font-family: "Macha-Book", sans-serif; /*margin-top: 20px;*/ display: block; } .c-megamenu__column a:hover { color: #0583ad; } .c-megamenu__column a:active { color: #04698a; } .c-megamenu__column a + .c-megamenu__subhead { margin-top: 20px; padding-top: 20px; border-top: 1px solid #dadee3; } .c-megamenu__column .c-megamenu__subhead + a { margin-top: 20px; } .c-megamenu__column a + a { margin-top: 20px; } .c-megamenu__column .c-megamenu__submenu-extra + a { margin-top: 20px; } .c-megamenu__column a + .c-megamenu__submenu-extra { border-top: 1px solid #dadee3; margin-top: 20px; } .c-megamenu__column .c-megamenu__subhead + .c-megamenu__submenu-extra { border-top: 1px solid #dadee3; margin-top: 20px; } @media only screen and (max-width: 699px) { .c-megamenu__submenu { position: relative; border: none; box-shadow: none; top: inherit; left: inherit; -webkit-transform: none; -ms-transform: none; transform: none; } .c-megamenu__submenu:after { display: none; } .c-megamenu__submenu a { font-size: 14px; } .c-megamenu__column a { font-size: 14px; padding-right: 20px; } } .c-megamenu__column { padding: 0 30px; margin: 30px 0; min-width: 310px; } .c-megamenu__column > .c-megamenu__subhead { font-size: 13px; color: #939eae; font-family: "Macha-Medium", sans-serif; margin-bottom: 20px; } @media only screen and (max-width: 699px) { .c-megamenu__column { padding: 0 30px 0 30px; margin: 0 0 20px 0; } .c-megamenu__column > .c-megamenu__subhead { margin-bottom: 15px; font-size: 12px; } } .c-megamenu__column + .c-megamenu__column { border-left: 1px solid #dadee3; } @media only screen and (max-width: 699px) { .c-megamenu__column + .c-megamenu__column { margin-top: 30px; } } .c-megamenu__submenu-nav { width: 250px; } .c-megamenu__submenu-nav li + li { margin-top: 20px; } .c-megamenu__submenu-nav + .c-megamenu__subhead { margin-top: 20px; padding-top: 20px; border-top: 1px solid #dadee3; } @media only screen and (max-width: 699px) { .c-megamenu__submenu-nav { width: auto; } } .c-megamenu__submenu-nav + .c-megamenu__submenu-extra { border-top: 1px solid #dadee3; margin-top: 20px; } .c-megamenu__submenu-extra { padding-top: 20px; margin-bottom: 10px; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; } .c-megamenu__submenu-extratext { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-pack: center; -o-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; -webkit-box-orient: vertical; -o-box-orient: vertical; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; padding: 5px 15px; font-size: 14px; line-height: 18px; max-width: 210px; } .c-megamenu .c-account-pulldown__extras .mobile-extras { display:none; } @media only screen and (max-width: 699px) { .c-megamenu__submenu-extra { display: none; } } @media only screen and (max-width: 699px) { .c-megamenu { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: none; -webkit-flex-shrink: 1; -ms-flex-negative: 1; flex-shrink: 1; -webkit-box-orient: vertical; -o-box-orient: vertical; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; -ms-flex-line-pack: justify; -webkit-align-content: space-between; align-content: space-between; overflow-y: auto; overflow-x: hidden; min-height: 100vh; height: auto; z-index: 100; } /*RDA Redesign*/ .c-megamenu .c-account-pulldown__extras .mobile-extras { display:block; font-weight:400; font-size: 16px; font-family: "Macha-Medium", sans-serif; } .c-megamenu .c-account-pulldown__extras .desktop-extras { display:none; } .c-megamenu .c-account-pulldown__extras { -webkit-flex-shrink: 0; -ms-flex-negative: 0; flex-shrink: 0; margin-top: 0; border-top: 1px solid #dadee3; /*border-bottom: 1px solid #dadee3;*/ color: #1b3045; text-align: left; padding: 15px 20px; padding-top: 30px; text-transform: none; letter-spacing: 0; font-family: "Macha-Book", sans-serif; } .c-megamenu .c-account-pulldown__extras a { color: #107EB1; /*color: #00a4da;*/ } .c-megamenu .c-account-pulldown__extras a:hover { color: #0583ad; } .c-megamenu .c-account-pulldown__extras a:active { color: #04698a; } .c-megamenu .c-mainheader__user-tools__links { float: none; text-align: left; /*margin-top: 10px; margin-bottom: 10px;*/ margin: 0; display: block; } .c-megamenu .c-mainheader__user-tools__links a { color: #107EB1; display: block; margin-left: 0; padding: 15px 20px; text-transform: none; letter-spacing: 0px; font-size: 16px; font-weight: 400; font-family: "Macha-Medium", sans-serif; } .c-megamenu .c-mainheader__user-tools__links a:hover { color: #0583ad; } .c-megamenu .c-mainheader__user-tools__links a:active { color: #04698a; } .c-megamenu .c-mainheader__user-tools__links a.logout-btn { text-transform: uppercase; font-weight: bold; } .c-megamenu .c-account-pulldown { text-align: center; left: 0; width: 100%; font-size: 12px; text-transform: none; letter-spacing: 0px; margin-left: 0; /*RDA MOD*/ /*margin-top: auto;*/ } .c-megamenu .c-account-pulldown__extras { color: #152c46; } .c-megamenu .c-account-pulldown__trigger { display: none; } .c-megamenu .c-account-pulldown__panel { display: block; box-shadow: none; padding: 0; position: relative; } .c-megamenu .c-account-pulldown__panel a { /*color: #5f6f7f;*/ color: #107EB1; font-size:16px; } .c-megamenu .c-account-pulldown__menu { /*display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: box;*/ display: block; /*-webkit-flex-shrink: 1; -ms-flex-negative: 1; flex-shrink: 1; -webkit-box-orient: horizontal; -o-box-orient: horizontal; -webkit-flex-direction: row; -ms-flex-direction: row; flex-direction: row;*/ /*border-top: 1px solid #dadee3; border-bottom: 1px solid #dadee3;*/ } .c-megamenu .c-account-pulldown__menu > li { /*display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: box;*/ display: block; /*-webkit-box-pack: center; -o-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; -webkit-box-orient: vertical; -o-box-orient: vertical; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; text-align: center; -webkit-flex-basis: 50%; -ms-flex-preferred-size: 50%; flex-basis: 50%;*/ text-align:left; } .c-megamenu .c-account-pulldown__menu > li { padding: 15px 20px; } .c-megamenu .c-account-pulldown__menu > li + li { margin-top: 0; border-left: 1px solid #dadee3; } .c-megamenu .c-account-pulldown__menu > li a { padding: 0; } .c-megamenu .c-account-pulldown__menu > li.c-account--hide-on-mobile { display: none; } } .c-calculator-dropdown { position: relative; display: inline-block; vertical-align: top; } .c-calculator-dropdown > select { display: inline-block; width: 100%; cursor: pointer; -webkit-appearance: none; -moz-appearance: none; appearance: none; outline: 0; border: 0; border-radius: 0; background: transparent; font-size: 20px; line-height: 28px; position: absolute; left: 0; top: 0; padding: 0; visibility: hidden; } .c-calculator-dropdown > select ::ms-expand { display: none; } .c-calculator-dropdown--native-mode > select { display: inline-block; opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); visibility: visible; } .c-calculator-dropdown__title { text-overflow: ellipsis; white-space: nowrap; overflow-x: hidden; cursor: pointer; font-size: 20px; line-height: 28px; color: #107eb1; border-bottom: 2px solid #939eae; padding-right: 20px; background: url("/Assets/images/controls/c-dropdown/down-arrow.svg") 100% 50% no-repeat; background-position: right 3px top 50%; } .c-calculator-dropdown__title:hover { color: #0583ad; } .c-calculator-dropdown__list { position: absolute; text-align: left; font-size: 20px; line-height: 23px; background: #fff; border: 2px solid #dadee3; box-shadow: 3px 3px 0px 0px rgba(20,36,52,0.1); border-radius: 3px; padding-top: 10px; padding-bottom: 7px; z-index: 15; } .c-calculator-dropdown__list-item { padding: 7px 15px; display: block; cursor: pointer; font-family: "Macha-Medium", sans-serif; } .c-calculator-dropdown__list-item:hover, .c-calculator-dropdown__list-item.is-active { background: #f2f3f5; } .c-calculator-dropdown__list-item.is-current { color: #107eb1; } .Drag-slider-to-see-h { width: 305px; height: 16px; font-family: Macha-Book; font-size: 13px; font-weight: normal; font-style: normal; font-stretch: normal; line-height: 1.23; letter-spacing: normal; text-align: center; color: #5f6e7c; } .c-form + .c-form { margin-top: 60px; } .c-form .l-columns + .l-columns, .c-form .l-columns + .c-form-group, .c-form .c-form-group + .l-columns, .c-form .c-form-group--inline + .c-form-group--inline, .c-form .c-form-group--inline + .c-form-group, .c-form .c-form-group--inline + .l-columns, .c-form .c-form-group + .l-columns--inline { margin-top: 25px; } @media only screen and (max-width: 699px) { .c-form .l-columns + .l-columns, .c-form .l-columns + .c-form-group, .c-form .c-form-group + .l-columns, .c-form .c-form-group--inline + .c-form-group--inline, .c-form .c-form-group--inline + .c-form-group, .c-form .c-form-group--inline + .l-columns, .c-form .c-form-group + .l-columns--inline { margin-top: 20px; } } .c-form--static-block .l-columns + .l-columns, .c-form--static-block .l-columns + .c-form-group, .c-form--static-block .c-form-group + .l-columns, .c-form--static-block .c-form-group--inline + .c-form-group--inline, .c-form--static-block .c-form-group--inline + .c-form-group, .c-form--static-block .c-form-group--inline + .l-columns, .c-form--static-block .c-form-group + .l-columns--inline { margin-top: 0; } .c-form div[class^="l-col"] > .l-columns, .c-form div[class*=" l-col"] > .l-columns { padding-top: 14px; } .c-form div[class^="l-col"] > .l-columns + .l-columns, .c-form div[class*=" l-col"] > .l-columns + .l-columns { padding-top: 0; } /*RDA Change added this for Form review pages*/ .c-form div[class^="l-col"] > .c-form-control-static, .c-form div[class*=" l-col"] > .c-form-control-static { margin-bottom: 0; } .c-form div[class^="l-col"] > .c-form-control-static, .c-form div[class*=" l-col"] > .c-form-control-static { padding-top: 14px; } .c-form div[class^="l-col"] > .c-form-control-static--multiline, .c-form div[class*=" l-col"] > .c-form-control-static--multiline { padding-top: 10px; } @media only screen and (max-width: 699px) { .c-form .c-form-group + .c-form-group { margin-top: 25px; } } .c-form h3 { margin-bottom: 15px; } @media only screen and (max-width: 699px) { .c-form h3 { font-size: 18px; text-align: center; margin-bottom: 10px; } } @media only screen and (max-width: 699px) { .c-form h3.h3--c-form-subhead { text-align: left; } } .c-form h3.h3--c-form-subhead ~ .c-form-fieldset { border-top: 0; padding-top: 0; } .c-form h4 { margin-top: 45px; margin-bottom: 20px; } .c-form label, .c-form-label { font-size: 17px; line-height: 20px; color: #687582; font-family: "Macha-Medium", sans-serif; } @media only screen and (max-width: 699px) { .c-form label, .c-form-label { font-size: 15px; line-height: 18px; } } .c-form input[type='text'], .c-form input[type='password'], .c-form input[type='number'], .c-form input[type='email'], .c-form input[type='date'] { -webkit-appearance: none; -moz-appearance: none; appearance: none; } .c-form input[type='text'], .c-form input[type='password'], .c-form input[type='number'], .c-form input[type='email'], .c-form input[type='date'], .c-form input[type='search'], .c-form select { border: 2px solid #dadee3; border-radius: 3px; font-family: "Macha-Book", sans-serif; -webkit-transition: all 0.25s; transition: all 0.25s; } .c-form input[type=number]::-webkit-outer-spin-button, .c-form input[type=number]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } .c-form input[type=number] { -moz-appearance: textfield; } .c-form input[type='text']:focus, .c-form input[type='password']:focus, .c-form input[type='number']:focus, .c-form input[type='email']:focus, .c-form input[type='date']:focus, .c-form input[type='search']:focus, .c-form select:focus { outline: none; border-color: #92e2fd; } .c-form .has-error input[type='text'], .c-form .has-error input[type='password'], .c-form .has-error input[type='number'], .c-form .has-error input[type='date'], .c-form .has-error input[type='email'] { background: -color #fdeded; border-color: #e40000; } input[type='date'].c-form-control { padding-top: 9px; } .c-form select { display: inline-block; width: 100%; cursor: pointer; -webkit-appearance: none; -moz-appearance: none; appearance: none; outline: 0; background: url("/Assets/images/controls/c-form/select-arrow.svg") -webkit-calc(100% - 10px) 50% no-repeat; background: url("/Assets/images/controls/c-form/select-arrow.svg") calc(100% - 10px) 50% no-repeat; box-sizing: border-box; padding-top: 0; padding-bottom: 0; height: 51px; line-height: 20px; } @media only screen and (max-width: 699px) { .c-form select { height: 49px; } } .c-form select ::ms-expand { display: none; } .c-form-message { font-size: 16px; margin-top: 6px; } .has-error .c-form-message { color: #e40000; } .c-form-fieldset { position: relative; } /*RDA Change added for Review form page (distribution application)*/ .c-form--confirmation { margin-bottom: 25px; } .c-form--confirmation .c-form-fieldset { padding: 10px 0 15px 0; } .c-form-fieldset + .c-form-fieldset { margin-top: 40px; } .c-form--confirmation .c-form-fieldset + .c-form-fieldset { margin-top: 0; } .c-form-fieldset + h3 { border-top: 1px solid #dadee3; } .c-form-static-fieldset-but { position: absolute; right: 0; top: 17px; display: block; font-size: 16px; background: url(/Assets/images/icons/nfl-edit.svg) no-repeat; background-position: left; padding-left: 25px; padding-top: 5px; padding-bottom: 5px; color: #0583AD; font-weight: 700; font-size: 14px; line-height: 16px; text-transform: uppercase; letter-spacing: 2px; } .c-form-group label { display: block; margin-bottom: 6px; } @media only screen and (max-width: 699px) { .c-form-group label { margin-bottom: 4px; } } .c-form-group--inline label { display: inline-block; margin-bottom: 0; } .c-form-group--inline label + label { margin-left: 20px; } .c-form-group--inline input, .c-form-group--inline select { display: inline-block; width: auto; } .c-form-group--inline select { padding-right: 30px; } .c-form-group--inline label + input, .c-form-group--inline label + select { margin-left: 10px; } .c-form-control, .c-form-control-static, .c-form-control-label, .c-form-input-group__addon, .c-form-input-group__addon-external { display: block; width: 100%; padding: 13px 15px 9px; font-size: 18px; line-height: 20px; color: #152c46; background-color: #fff; } .c-form-control::-ms-expand, .c-form-control-static::-ms-expand, .c-form-control-label::-ms-expand, .c-form-input-group__addon::-ms-expand, .c-form-input-group__addon-external::-ms-expand { background-color: transparent; border: 0; } .c-form-control::-webkit-input-placeholder, .c-form-control-static::-webkit-input-placeholder, .c-form-control-label::-webkit-input-placeholder, .c-form-input-group__addon::-webkit-input-placeholder, .c-form-input-group__addon-external::-webkit-input-placeholder { color: #d3d3d3; opacity: 1; -ms-filter: none; -webkit-filter: none; filter: none; } .c-form-control::-moz-placeholder, .c-form-control-static::-moz-placeholder, .c-form-control-label::-moz-placeholder, .c-form-input-group__addon::-moz-placeholder, .c-form-input-group__addon-external::-moz-placeholder { color: #d3d3d3; opacity: 1; -ms-filter: none; filter: none; } .c-form-control:-ms-input-placeholder, .c-form-control-static:-ms-input-placeholder, .c-form-control-label:-ms-input-placeholder, .c-form-input-group__addon:-ms-input-placeholder, .c-form-input-group__addon-external:-ms-input-placeholder { color: #d3d3d3; opacity: 1; -ms-filter: none; filter: none; } .c-form-control::placeholder, .c-form-control-static::placeholder, .c-form-control-label::placeholder, .c-form-input-group__addon::placeholder, .c-form-input-group__addon-external::placeholder { color: #d3d3d3; opacity: 1; -ms-filter: none; -webkit-filter: none; filter: none; } @media only screen and (max-width: 699px) { .c-form-control, .c-form-control-static, .c-form-control-label, .c-form-input-group__addon, .c-form-input-group__addon-external { font-size: 18px; line-height: 18px; } } .c-form select::-ms-expand { display: none; } .c-form input::-ms-clear { display: none; } .c-form-control-static, .c-form-control-label { min-height: 42px; padding-left: 0; padding-right: 0; } .c-form-control-label { padding-top: 15px; padding-bottom: 7px; } .c-form-control-static--multiline { padding-top: 0; padding-bottom: 0; margin-bottom: 0; min-height: 0; font-size: 20px; line-height: 28px; } @media only screen and (max-width: 699px) { .c-form-control-static--multiline { font-size: 18px; line-height: 26px; } } .c-form-control-static--multiline + .c-form-control-static--multiline { margin-top: 10px; } @media only screen and (min-width: 699px) { .c-form-control-static--multiline + .c-form-control-static--multiline { margin-top: -6px; } } .c-form-control-static--multiline-smaller { font-size: 16px; line-height: 24px; } .c-form-control-static--multiline-smaller { padding-top: 0; padding-bottom: 0; min-height: 0; margin-bottom: 0; } .c-form-control-static--multiline-smaller + .c-form-control-static--multiline-smaller { margin-top: 10px; } @media only screen and (min-width: 699px) { .c-form-control-static--multiline-smaller + .c-form-control-static--multiline-smaller { margin-top: -6px; } } .c-form-static-money-head { font-size: 20px; font-family: "Macha-Medium", sans-serif; } .c-form-control-static-edit-holder { float: right; font-size: 16px; } .c-form-control-static-edit-holder { display: block; background: url(/Assets/images/icons/nfl-edit.svg) no-repeat; background-position: left; padding-left: 25px; padding-top: 5px; padding-bottom: 5px; color: #0583AD; font-weight: 700; font-size: 14px; line-height: 16px; text-transform: uppercase; letter-spacing: 2px; } .c-form-input-group { position: relative; } .c-form-input-group__addon, .c-form-input-group__addon-external { padding-left: 0; padding-right: 0; width: auto; color: #959fab; } .c-form-input-group input.c-form-control--with-ext-addon { width: 75%; } .c-form-input-group__addon { position: absolute; top: 5px; /*RDA Change*/ left: 5px; } .c-form-input-group__addon:first-child { left: 15px; } .c-form-input-group__addon ~ input { padding-left: 27px; } .c-form-input-group__addon-external { width: 25%; position: absolute; right: 0; top: 4px; padding-left: 8px; border-left: 0; background: transparent; } .c-form-label { margin-bottom: 10px; } .c-form-label--bottom-margin { margin-bottom: 25px; } .c-form-radio, .c-form-radio-inline { padding-left: 33px; position: relative; cursor: pointer; } label.c-form-radio, label.c-form-radio-inline, label.c-form-title-inline { font-size: 20px; line-height: 24px; color: #152c46; font-family: "Macha-Book", sans-serif; } @media only screen and (max-width: 699px) { label.c-form-radio, label.c-form-radio-inlin.eb-percentage, label.c-form-title-inline { font-size: 18px; line-height: 22px; } } .c-form-radio > input[type=radio], .c-form-radio-inline > input[type=radio] { display: none; } .c-form-radio .c-form-custom-ind, .c-form-radio-inline .c-form-custom-ind { content: ''; display: block; width: 24px; height: 24px; border: 2px solid #dadee3; border-radius: 50%; position: absolute; left: 0; top: -4px; } .c-form-radio .c-form-custom-ind::before, .c-form-radio-inline .c-form-custom-ind::before { content: ''; display: block; width: 14px; height: 14px; background: transparent; border-radius: 50%; position: absolute; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); -webkit-transition: background 0.15s; transition: background 0.15s; } .c-form-radio > input[type=radio]:checked ~ .c-form-custom-ind:before, .c-form-radio-inline > input[type=radio]:checked ~ .c-form-custom-ind:before { background: #27b696; } .c-form-radio-inline, label.c-form-radio-inline { display: inline-block; width: auto; margin-bottom: 0; vertical-align: middle; } .c-form-radio-inline + .c-form-radio-inline, label.c-form-radio-inline + .c-form-radio-inline { margin-left: 40px; } @media only screen and (max-width: 699px) { .c-form-radio-inline, label.c-form-radio-inline { display: block; } .c-form-radio-inline + .c-form-radio-inline, label.c-form-radio-inline + .c-form-radio-inline { margin-left: 0; margin-top: 20px; } } .c-form-radio + .c-form-radio { margin-top: 18px; } .c-form-checkbox, .c-form-checkbox-inline { padding-left: 33px; position: relative; cursor: pointer; } label.c-form-checkbox, label.c-form-checkbox-inline { font-size: 20px; color: #152c46; font-family: "Macha-Book", sans-serif; } @media only screen and (max-width: 699px) { label.c-form-checkbox, label.c-form-checkbox-inline { font-size: 18px; line-height: 24px; } } .c-form-checkbox > input[type=checkbox], .c-form-checkbox-inline > input[type=checkbox] { display: none; } .c-form-checkbox .c-form-custom-ind, .c-form-checkbox-inline .c-form-custom-ind { content: ''; display: block; width: 25px; height: 25px; border: 2px solid #dadee3; position: absolute; left: 0; top: -4px; -webkit-transition: background 0.15s; transition: background 0.15s; } .c-form-checkbox .c-form-custom-ind::before, .c-form-checkbox-inline .c-form-custom-ind::before { content: ''; display: block; width: 21px; height: 21px; background-color: transparent; background-repeat: no-repeat; background-position: 50% 50%; background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width=%2217%22 height=%2213%22 viewBox=%220 0 17 13%22 xmlns=%22http://www.w3.org/2000/svg%22%3E%3Cpath d=%22M1 7.413l4.56 4.56 6.356-6.68L16 1%22 stroke=%22%23FFF%22 stroke-width=%222%22 fill=%22none%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22/%3E%3C/svg%3E"); position: absolute; left: 0; top: 0; -webkit-transition: background 0.15s; transition: background 0.15s; opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); } @media only screen and (max-width: 699px) { .c-form-checkbox .c-form-custom-ind, .c-form-checkbox-inline .c-form-custom-ind { top: 0; } } .c-form-checkbox > input[type=checkbox]:checked ~ .c-form-custom-ind, .c-form-checkbox-inline > input[type=checkbox]:checked ~ .c-form-custom-ind { background: #27b696; } .c-form-checkbox > input[type=checkbox]:checked ~ .c-form-custom-ind:before, .c-form-checkbox-inline > input[type=checkbox]:checked ~ .c-form-custom-ind:before { opacity: 1; -ms-filter: none; -webkit-filter: none; filter: none; } .c-form-explanation { font-size: 13px; line-height: 16px; color: #5f6f7f; margin-top: 5px; } .c-form--confirmation .c-form-fieldset + h3 { padding-top: 60px; } @media only screen and (max-width: 699px) { .c-form--confirmation .c-form-fieldset + h3 { padding-top: 30px; } } .c-form--confirmation h3 ~ .c-form-fieldset { border-top: 1px solid #dadee3; } .account-settings .c-form--confirmation h3 ~ .c-form-fieldset { border-top: 2px solid #dadee3; } /*RDA Change added for review personal info form */ .c-form--confirmation h3 ~ .c-form-fieldset.final-child { border-bottom: 1px solid #dadee3; } .c-form-balance-info { text-align: center; } .c-form-balance-info__header { color: #7e8b96; text-transform: uppercase; letter-spacing: 2px; font-family: "Macha-Bold", sans-serif; margin-bottom: 8px; } .c-form-balance-info__amount { color: #00ba98; font-size: 40px; letter-spacing: -1px; } @media only screen and (max-width: 699px) { .c-form-balance-info__header { font-size: 14px; } .c-form-balance-info__amount { font-size: 32px; line-height: 35px; letter-spacing: -0.8px; } } .c-form-flagged-text { padding-left: 22px; padding-top: 2px; font-size: 14px; line-height: 18px; color: #5f6f7f; background: url("/Assets/images/controls/c-message/flag.svg") no-repeat; margin-top: 15px; } @media only screen and (max-width: 699px) { .c-form-flagged-text { font-family: "Macha-Book", sans-serif; font-size: 14px; line-height: 18px; padding-top: 0; background-position-y: 2px; } } .c-form-file.c-form-file__add { width: 150px; height: 150px; position: relative; background: #eaedf0; text-align: center; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-pack: center; -o-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; -webkit-box-orient: vertical; -o-box-orient: vertical; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; color: #95a0ac; cursor: pointer; } .c-form-file.c-form-file__add > input[type="file"] { position: fixed; top: -1000px; } .c-form-file.c-form-file__add:hover { color: #718090; } .c-form-label-comment { color: #949fab; font-size: 13px; } @media only screen and (max-width: 699px) { .c-form--static-block.c-form-fieldset { padding-top: 20px; padding-bottom: 20px; } .c-form--static-block .c-form-control-label { padding-top: 0; padding-bottom: 2px; min-height: auto; } .c-form--static-block .c-form-control-static { min-height: auto; padding-top: 0 !important; padding-bottom: 0; } .c-form--static-block .l-columns + .l-columns { margin-top: 18px; } } .c-dot-progress { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; margin: 50px auto; color: #606f7f; font-size: 14px; line-height: 17px; position: relative; } @media only screen and (max-width: 699px) { .c-dot-progress { margin: 20px auto 30px auto; } } .c-dot-progress__item { width: 50px; position: relative; height: auto; text-align: center; padding-bottom: 12px; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-orient: vertical; -o-box-orient: vertical; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; margin-top: auto; } .c-dot-progress__item:before { content: ''; display: block; width: 100%; height: 5px; background: #c6cdd4; position: absolute; bottom: -3px; } .c-dot-progress__item:after { content: ''; display: block; width: 15px; height: 15px; background: #fff; border: 4px solid #c6cdd4; border-radius: 50%; position: absolute; bottom: -8px; left: 50%; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); } .c-dot-progress--2 .c-dot-progress__item { width: 50%; } .c-dot-progress--3 .c-dot-progress__item { width: 33.33333%; } .c-dot-progress--4 .c-dot-progress__item { width: 25%; } .c-dot-progress--5 .c-dot-progress__item { width: 20%; } .c-dot-progress--6 .c-dot-progress__item { width: 16.66667%; } .c-dot-progress--7 .c-dot-progress__item { width: 14.28571%; } .c-dot-progress--8 .c-dot-progress__item { width: 12.5%; } .c-dot-progress__item:first-child:before { width: 50%; right: 0; } .c-dot-progress__item:nth-last-child(2):before { width: 50%; } .c-dot-progress__item.is-complete { color: #152c46; } .c-dot-progress__item.is-complete:after { background: #27b696; border-color: #27b696; } .c-dot-progress__item.is-complete:before { background: #27b696; } .c-dot-progress__item.is-current { color: #152c46; font-family: "Macha-Bold", sans-serif; } .c-dot-progress__item.is-current:after { border-color: #27b696; } .c-dot-progress__item.is-current:before { background: -webkit-linear-gradient(left, #27b696 50%, #c6cdd4 50%); background: linear-gradient(to right, #27b696 50%, #c6cdd4 50%); } .c-dot-progress__item.is-current:first-child:before { background: #c6cdd4; } .c-dot-progress__item.is-current:nth-last-child(2):before { background: #27b696; } .c-dot-progress__mobile-title { position: absolute; width: 100%; left: 0; bottom: -35px; font-size: 14px; font-family: "Macha-Bold", sans-serif; text-align: center; line-height: 14px; color: #152c46; display: none; } @media only screen and (max-width: 699px) { .c-dot-progress__mobile-title { display: block; } } @media only screen and (max-width: 699px) { .c-dot-progress { margin-bottom: 50px; margin-top: -15px; } .c-dot-progress__item { font-size: 0px; padding-bottom: 0; } .c-dot-progress__item br { display: none; } } .c-submit-block { margin-top: 70px; padding-top: 60px; border-top: 1px solid #dadee3; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-lines: multiple; -moz-box-lines: multiple; -o-box-lines: multiple; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; } @media only screen and (max-width: 699px) { .c-submit-block { margin-top: 30px; padding-top: 30px; } } .c-submit-block__item { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-orient: horizontal; -o-box-orient: horizontal; -webkit-flex-direction: row; -ms-flex-direction: row; flex-direction: row; -webkit-box-align: center; -o-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; width: 100%; } .c-submit-block__item:nth-child(1) { -webkit-box-pack: start; -o-box-pack: start; -ms-flex-pack: start; -webkit-justify-content: flex-start; justify-content: flex-start; -webkit-flex-basis: 50%; -ms-flex-preferred-size: 50%; flex-basis: 50%; } .c-submit-block__item:nth-child(2) { -webkit-box-pack: end; -o-box-pack: end; -ms-flex-pack: end; -webkit-justify-content: flex-end; justify-content: flex-end; -webkit-flex-basis: 50%; -ms-flex-preferred-size: 50%; flex-basis: 50%; } .c-submit-block__item > .ui-btn { margin: 0; } .c-submit-block__item > .ui-btn + .ui-btn { margin-left: 30px; } .c-submit-block__item .ui-btn.ui-btn--link { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-align-self: center; align-self: center; -ms-flex-item-align: center; } .c-submit-block__item.c-submit-block--save { flex-basis: 60%; } .c-submit-block__item.c-submit-block--cancel { flex-basis: 40%; } @media only screen and (max-width: 699px) { .c-submit-block__item { -webkit-box-orient: vertical; -o-box-orient: vertical; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; } .c-submit-block__item:nth-child(1), .c-submit-block__item:nth-child(2) { -webkit-flex-basis: 100%; -ms-flex-preferred-size: 100%; flex-basis: 100%; -ms-flex-line-pack: center; -webkit-align-content: center; align-content: center; } .c-submit-block__item .ui-btn { width: 100%; max-width: 300px; margin-left: auto; margin-right: auto; } .c-submit-block__item > .ui-btn + a.ui-btn { margin-left: auto; margin-right: auto; margin-top: 30px; } .c-submit-block__item .ui-btn--link { text-align: center; display: block !important; } .c-submit-block__item .ui-btn--link:hover { margin-bottom: 0; margin-top: 0; } .c-submit-block__item.c-submit-block--save { -webkit-box-ordinal-group: 1; -o-box-ordinal-group: 1; -ms-flex-order: 1; -webkit-order: 1; order: 1; margin-bottom: 20px; } .c-submit-block__item.c-submit-block--cancel { -webkit-box-ordinal-group: 2; -o-box-ordinal-group: 2; -ms-flex-order: 2; -webkit-order: 2; order: 2; } } .c-submit-block__notes { padding-top: 17px; padding-right: 20px; text-align: right; line-height: 1.2em; -webkit-flex-basis: 100%; -ms-flex-preferred-size: 100%; flex-basis: 100%; text-align: right; padding-right: 0; } @media only screen and (max-width: 699px) { .c-submit-block__notes { text-align: center; padding-bottom: 15px; } } .c-submit-block--local { margin-top: 30px; margin-bottom: 30px; padding: 0; border: 0; } .c-submit-block--local .ui-btn { margin-bottom: 0; } @media only screen and (max-width: 699px) { .c-submit-block--local { margin-bottom: 10px; } .c-submit-block--local .ui-btn { width: 100%; max-width: 300px; margin-left: auto; margin-right: auto; } } .c-tile-selector { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-pack: center; -o-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; margin: 30px auto; } @media only screen and (min-width: 699px) { .c-tile-selector { margin-bottom: 50px; } } .c-tile-selector .c-tile-selector__item + .c-tile-selector__item { margin-left: 60px; } .c-tile-selector__item { -webkit-flex-basis: 320px; -ms-flex-preferred-size: 320px; flex-basis: 320px; -webkit-flex-shrink: 1; -ms-flex-negative: 1; flex-shrink: 1; box-shadow: 3px 3px 0px 0px rgba(147,158,169,0.3); padding: 30px 20px; text-align: center; background: #f2f3f5; border: 3px solid #f2f3f5; border-radius: 3px; -webkit-transition: background 0.25s; transition: background 0.25s; cursor: pointer; } .c-tile-selector__item.is-selected, .c-tile-selector__item.is-selected:hover { border-color: #27b696; background: #fff; box-shadow: 3px 3px 0px 0px rgba(147,158,169,0.3); cursor: default; } .c-tile-selector__item:hover { background: #eaedf0; border: 3px solid #eaedf0; box-shadow: 3px 3px 0px 0px rgba(147,158,169,0.6); } .c-tile-selector__header { font-family: "Macha-Medium", sans-serif; font-size: 22px; line-height: 28px; } .c-tile-selector__desc { margin-top: 10px; } @media only screen and (max-width: 699px) { .c-tile-selector__item { padding: 18px; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-pack: center; -o-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; -webkit-box-orient: vertical; -o-box-orient: vertical; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; } .c-tile-selector__header { font-size: 18px; line-height: 22px; } .c-tile-selector__desc { font-size: 14px; line-height: 20px; } .c-tile-selector .c-tile-selector__item + .c-tile-selector__item { margin-left: 18px; } } .c-checklist { margin-bottom: 30px; } .c-checklist__header { position: relative; background: #66c8e9; text-align: center; padding: 28px 80px 35px 80px; } @media only screen and (max-width: 699px) { .c-checklist__header { padding: 30px; } } .c-checklist__header h1, .c-checklist__header h2, .c-checklist__header h3, .c-checklist__header h4, .c-checklist__header p { color: #fff; } .c-checklist__header a { color: #fff; } .c-checklist__header a:hover { color: #f2f2f2; } .c-checklist__header a:active { color: #d9d9d9; } .c-checklist__header:before { content: ''; display: block; width: 66px; height: 66px; position: absolute; top: 0; right: 0; width: 0; height: 0; background: 0; border-style: solid; border-width: 0 66px 66px 0; border-color: transparent #fff transparent transparent; } @media only screen and (max-width: 1280px) { .c-checklist__header:before { width: 46px; height: 46px; width: 0; height: 0; background: 0; border-style: solid; border-width: 0 46px 46px 0; border-color: transparent #fff transparent transparent; } } @media only screen and (max-width: 699px) { .c-checklist__header:before { display: none; } } .c-checklist__header:after { content: ''; display: block; width: 66px; height: 66px; position: absolute; top: 0; right: 0; width: 0; height: 0; background: 0; border-style: solid; border-width: 66px 0 0 66px; border-color: transparent transparent transparent #00a4da; } @media only screen and (max-width: 1280px) { .c-checklist__header:after { width: 46px; height: 46px; width: 0; height: 0; background: 0; border-style: solid; border-width: 46px 0 0 46px; border-color: transparent transparent transparent #00a4da; } } @media only screen and (max-width: 699px) { .c-checklist__header:after { display: none; } } .c-checklist__content { padding: 40px 35px 40px 35px; border: 2px solid #dadee3; border-top: 0; } .c-checklist__content.no-header-block { border-top: 2px solid #dadee3; } @media only screen and (max-width: 699px) { .c-checklist__content { padding: 40px 17px; } } .c-checklist__section-header { border-top: 0; padding-top: 0; margin-bottom: 25px; } .c-checklist .c-checklist__item + .c-checklist__section-header { margin-top: 40px; } .c-checklist__item { padding-left: 60px; min-height: 45px; position: relative; } .c-checklist__item:before { content: ''; position: absolute; top: -5px; left: 0; width: 45px; height: 45px; display: block; background: url("/Assets/images/controls/c-checklist/checkmark.svg") no-repeat; background-size: contain; } .c-checklist__item--checklist-green-check:before { background-image: url("/Assets/images/controls/c-checklist/icons/checklist-green-check.svg"); } .c-checklist__item--checklist-red-x:before { background-image: url("/Assets/images/controls/c-checklist/icons/checklist-red-x.svg"); } .c-checklist__item--checkmark-gray:before { background-image: url("/Assets/images/controls/c-checklist/icons/checkmark-gray.svg"); } .c-checklist__item--checkmark-green:before { background-image: url("/Assets/images/controls/c-checklist/icons/checkmark-green.svg"); } .c-checklist__item--hourglass:before { background-image: url("/Assets/images/controls/c-checklist/icons/hourglass.svg"); } .c-checklist__item--install:before { background-image: url("/Assets/images/controls/c-checklist/icons/install.svg"); } .c-checklist__item--leaf:before { background-image: url("/Assets/images/controls/c-checklist/icons/leaf.svg"); } .c-checklist__item--life-10:before { background-image: url("/Assets/images/controls/c-checklist/icons/life-10.svg"); } .c-checklist__item--life-100:before { background-image: url("/Assets/images/controls/c-checklist/icons/life-100.svg"); } .c-checklist__item--life-25:before { background-image: url("/Assets/images/controls/c-checklist/icons/life-25.svg"); } .c-checklist__item--life-50:before { background-image: url("/Assets/images/controls/c-checklist/icons/life-50.svg"); } .c-checklist__item--life-75:before { background-image: url("/Assets/images/controls/c-checklist/icons/life-75.svg"); } .c-checklist__item--lifetime-payments:before { background-image: url("/Assets/images/controls/c-checklist/icons/lifetime-payments.svg"); } .c-checklist__item--list-icon-flag:before { background-image: url("/Assets/images/controls/c-checklist/icons/list-icon-flag.svg"); } .c-checklist__item--lump-sum:before { background-image: url("/Assets/images/controls/c-checklist/icons/lump-sum.svg"); } .c-checklist__item--partial-lump-sum:before { background-image: url("/Assets/images/controls/c-checklist/icons/partial-lump-sum.svg"); } .c-checklist__item--payment-lifetime-with-ss:before { background-image: url("/Assets/images/controls/c-checklist/icons/payment-lifetime-with-ss.svg"); } .c-checklist__item h4 { margin-bottom: 3px; } .c-checklist__item + .c-checklist__item { margin-top: 25px; } .c-message { font-size: 16px; line-height: 22px; color: #606f7f; margin-top: 10px; margin-bottom: 10px; } @media only screen and (max-width: 699px) { .c-message { font-size: 14px; line-height: 20px; } } .c-message--smaller { font-size: 14px; line-height: 20px; color: #95a0ac; } .c-message--important { color: #ff6e38; } .c-message--error { color: #e40000; } .c-message--info { padding-left: 22px; background: url("/Assets/images/controls/c-message/info-icon.svg") no-repeat; background-position-y: 6%; } .c-message--info:before { padding-left: 22px; padding-top: 2px; background: url("/Assets/images/controls/c-message/info-icon.svg") no-repeat; background-position-y: 2px; } @media only screen and (max-width: 699px) { .c-message--info { font-family: "Macha-Book", sans-serif; padding-top: 0; background-position-y: 2px; background: none; } .c-message--info:before { content: ''; padding-top: 0; } } .c-message--flag { padding-left: 22px; background: url("/Assets/images/controls/c-message/flag.svg") no-repeat; } .c-message--flag:before { padding-left: 22px; padding-top: 2px; background: url("/Assets/images/controls/c-message/flag.svg") no-repeat; background-position-y: 2px; } .c-message--success { padding-left: 22px; background: url("/Assets/images/icons/bold-checkmark.svg") no-repeat; background-position: left center; } .c-message--success:before { padding-left: 22px; padding-top: 2px; background: url("/Assets/images/icons/bold-checkmark.svg") no-repeat; background-position-y: 2px; } .c-message--blue-info { padding-left: 22px; background: url("/Assets/images/icons/blue-info.svg") no-repeat; background-position: left center; } .c-message--blue-info:before { padding-left: 22px; padding-top: 2px; background: url("/Assets/images/icons/blue-info.svg") no-repeat; background-position-y: 2px; } .c-message--urgent { padding-left: 22px; background: url("/Assets/images/controls/c-message/flag.svg") no-repeat; background-position: left center; } .c-message--urgent:before { padding-left: 22px; padding-top: 2px; background: url("/Assets/images/controls/c-message/flag.svg") no-repeat; background-position-y: 2px; } .c-message--disability { padding-left: 40px; padding-top: 2.5px; padding-bottom: 2.5px; background: url("/Assets/images/controls/c-message/disability.svg") no-repeat; background-position: left center; } .c-message--disability:before { padding-left: 40px; background: url("/Assets/images/controls/c-message/disability.svg") no-repeat; background-position-y: 2px; } @media only screen and (max-width: 699px) { .c-message--flag { font-family: "Macha-Book", sans-serif; padding-top: 0; background-position-y: 2px; background: none; } .c-message--flag:before { content: ''; padding-top: 0; } } .c-message--hourglass { padding-left: 22px; /*padding-top: 2px;*/ background: url("/Assets/images/controls/c-message/hourglass.svg") no-repeat; } .c-message--hourglass:before { padding-left: 22px; padding-top: 2px; background: url("/Assets/images/controls/c-message/hourglass.svg") no-repeat; background-position-y: 2px; } @media only screen and (max-width: 699px) { .c-message--hourglass { font-family: "Macha-Book", sans-serif; padding-top: 0; background-position-y: 2px; background: none; } .c-message--hourglass:before { content: ''; padding-top: 0px; } } @media only screen and (max-width: 959px) { #credited-seasons { display: none; } } .l-columns { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; } .l-columns__item { position: relative; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-orient: vertical; -o-box-orient: vertical; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; -webkit-flex-shrink: 1; -ms-flex-negative: 1; flex-shrink: 1; } .l-columns__item + .l-columns__item { margin-left: 40px; } @media only screen and (max-width: 699px) { .l-columns__item + .l-columns__item { margin-left: 0; margin-top: 0px; } } .l-columns--1 > .l-columns__item { -webkit-flex-basis: 100%; -ms-flex-preferred-size: 100%; flex-basis: 100%; } .l-columns--2 > .l-columns__item { -webkit-flex-basis: 50%; -ms-flex-preferred-size: 50%; flex-basis: 50%; } .l-columns--3 > .l-columns__item { -webkit-flex-basis: 33.33333%; -ms-flex-preferred-size: 33.33333%; flex-basis: 33.33333%; } .l-columns--4 > .l-columns__item { -webkit-flex-basis: 25%; -ms-flex-preferred-size: 25%; flex-basis: 25%; } .l-columns__item a.ui-btn:last-child { -webkit-align-self: center; align-self: center; -ms-flex-item-align: center; margin-top: auto; } @media only screen and (max-width: 699px) { .l-columns { -webkit-box-lines: multiple; -moz-box-lines: multiple; -o-box-lines: multiple; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; } .l-columns .l-columns__item { -webkit-flex-basis: 100% !important; -ms-flex-preferred-size: 100% !important; flex-basis: 100% !important; text-align: center; } .l-columns .l-columns__item .ui-btn { width: 100%; max-width: 375px; } } .l-columns__col-icon { margin-bottom: 25px; height: 80px; } @media only screen and (max-width: 699px) { .l-columns__col-icon { display: none; } } .l-columns--with-divider > .l-columns__item:before { display: block; content: ''; width: 1px; height: 100%; background: #DADEE3; position: absolute; top: 0; left: -19px; } .l-columns--with-divider > .l-columns__item:first-child:before { display: none; } @media only screen and (max-width: 699px) { .l-columns--with-divider > .l-columns__item:before { width: 100%; height: 1px; margin: 30px 0; position: relative; left: 0; } } @media only screen and (max-width: 699px) { .l-columns--steps { -webkit-box-lines: multiple; -moz-box-lines: multiple; -o-box-lines: multiple; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; } .l-columns--steps > .l-columns__item { zoom: 1; -webkit-flex-basis: 100%; -ms-flex-preferred-size: 100%; flex-basis: 100%; max-width: 420px; margin-left: auto; margin-right: auto; text-align: left; } .l-columns--steps > .l-columns__item:after, .l-columns--steps > .l-columns__item:before { content: ""; display: table; } .l-columns--steps > .l-columns__item:after { clear: both; } .l-columns--steps > .l-columns__item:before { display: none; } .l-columns--steps > .l-columns__item + .l-columns__item { margin-top: 30px; } .l-columns--steps > .l-columns__item > * { margin-left: 40px; } .l-columns--steps > .l-columns__item > .ui-btn { width: -webkit-calc(100% - 40px); width: calc(100% - 40px); } .l-columns--steps > .l-columns__item > .c-infobox { position: absolute; margin-left: 0; padding-top: 0; left: 0; top: 0; } } .l-columns.l-columns--grid { *zoom: 1; -webkit-box-lines: multiple; -moz-box-lines: multiple; -o-box-lines: multiple; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; } .l-columns.l-columns--grid:before { content: ''; display: table; } .l-columns.l-columns--grid:after { content: ''; display: table; clear: both; } .l-columns.l-columns--grid > .l-col1 { -webkit-box-flex: 0; -webkit-flex: 0 0 auto; -ms-flex: 0 0 auto; flex: 0 0 auto; width: -webkit-calc(99.99% * 0.99/12 - (20px - 20px * 0.99/12)); width: calc(99.99% * 0.99/12 - (20px - 20px * 0.99/12)); } .l-columns.l-columns--grid > .l-col1:nth-child(1n) { margin-right: 20px; margin-left: 0; } .l-columns.l-columns--grid > .l-col1:last-child { margin-right: 0; } .l-columns.l-columns--grid > .l-col1:nth-child(20pxn) { margin-right: 0; margin-left: auto; } .l-columns.l-columns--grid > .l-col2 { -webkit-box-flex: 0; -webkit-flex: 0 0 auto; -ms-flex: 0 0 auto; flex: 0 0 auto; width: -webkit-calc(99.99% * 1.99/12 - (20px - 20px * 1.99/12)); width: calc(99.99% * 1.99/12 - (20px - 20px * 1.99/12)); } /*RDA Change: Added this 3 classes from new CSSS file*/ .l-columns--steps > .l-columns__item .ui-btn { width: auto; } .l-columns--steps__num { font-size: 46px; line-height: 1em; margin-bottom: 10px; } @media only screen and (max-width: 699px) { .l-columns--steps__num { position: absolute; left: -35px; top: 0; } } .l-columns.l-columns--grid > .l-col2:nth-child(1n) { margin-right: 20px; margin-left: 0; } .l-columns.l-columns--grid > .l-col2:last-child { margin-right: 0; } .l-columns.l-columns--grid > .l-col2:nth-child(20pxn) { margin-right: 0; margin-left: auto; } .l-columns.l-columns--grid > .l-col3 { -webkit-box-flex: 0; -webkit-flex: 0 0 auto; -ms-flex: 0 0 auto; flex: 0 0 auto; width: -webkit-calc(99.99% * 2.99/12 - (20px - 20px * 2.99/12)); width: calc(99.99% * 2.99/12 - (20px - 20px * 2.99/12)); } .l-columns.l-columns--grid > .l-col3:nth-child(1n) { margin-right: 20px; margin-left: 0; } .l-columns.l-columns--grid > .l-col3:last-child { margin-right: 0; } .l-columns.l-columns--grid > .l-col3:nth-child(20pxn) { margin-right: 0; margin-left: auto; } .l-columns.l-columns--grid > .l-col4 { -webkit-box-flex: 0; -webkit-flex: 0 0 auto; -ms-flex: 0 0 auto; flex: 0 0 auto; width: -webkit-calc(99.99% * 3.99/12 - (20px - 20px * 3.99/12)); width: calc(99.99% * 3.99/12 - (20px - 20px * 3.99/12)); } .l-columns.l-columns--grid > .l-col4:nth-child(1n) { margin-right: 20px; margin-left: 0; } .l-columns.l-columns--grid > .l-col4:last-child { margin-right: 0; } .l-columns.l-columns--grid > .l-col4:nth-child(20pxn) { margin-right: 0; margin-left: auto; } .l-columns.l-columns--grid > .l-col5 { -webkit-box-flex: 0; -webkit-flex: 0 0 auto; -ms-flex: 0 0 auto; flex: 0 0 auto; width: -webkit-calc(99.99% * 4.99/12 - (20px - 20px * 4.99/12)); width: calc(99.99% * 4.99/12 - (20px - 20px * 4.99/12)); } .l-columns.l-columns--grid > .l-col5:nth-child(1n) { margin-right: 20px; margin-left: 0; } .l-columns.l-columns--grid > .l-col5:last-child { margin-right: 0; } .l-columns.l-columns--grid > .l-col5:nth-child(20pxn) { margin-right: 0; margin-left: auto; } .l-columns.l-columns--grid > .l-col6 { -webkit-box-flex: 0; -webkit-flex: 0 0 auto; -ms-flex: 0 0 auto; flex: 0 0 auto; width: -webkit-calc(99.99% * 5.99/12 - (20px - 20px * 5.99/12)); width: calc(99.99% * 5.99/12 - (20px - 20px * 5.99/12)); } .l-columns.l-columns--grid > .l-col6:nth-child(1n) { margin-right: 20px; margin-left: 0; } .l-columns.l-columns--grid > .l-col6:last-child { margin-right: 0; } .l-columns.l-columns--grid > .l-col6:nth-child(20pxn) { margin-right: 0; margin-left: auto; } .l-columns.l-columns--grid > .l-col7 { -webkit-box-flex: 0; -webkit-flex: 0 0 auto; -ms-flex: 0 0 auto; flex: 0 0 auto; width: -webkit-calc(99.99% * 6.99/12 - (20px - 20px * 6.99/12)); width: calc(99.99% * 6.99/12 - (20px - 20px * 6.99/12)); } .l-columns.l-columns--grid > .l-col7:nth-child(1n) { margin-right: 20px; margin-left: 0; } .l-columns.l-columns--grid > .l-col7:last-child { margin-right: 0; } .l-columns.l-columns--grid > .l-col7:nth-child(20pxn) { margin-right: 0; margin-left: auto; } .l-columns.l-columns--grid > .l-col8 { -webkit-box-flex: 0; -webkit-flex: 0 0 auto; -ms-flex: 0 0 auto; flex: 0 0 auto; width: -webkit-calc(99.99% * 7.99/12 - (20px - 20px * 7.99/12)); width: calc(99.99% * 7.99/12 - (20px - 20px * 7.99/12)); } .l-columns.l-columns--grid > .l-col8:nth-child(1n) { margin-right: 20px; margin-left: 0; } .l-columns.l-columns--grid > .l-col8:last-child { margin-right: 0; } .l-columns.l-columns--grid > .l-col8:nth-child(20pxn) { margin-right: 0; margin-left: auto; } .l-columns.l-columns--grid > .l-col9 { -webkit-box-flex: 0; -webkit-flex: 0 0 auto; -ms-flex: 0 0 auto; flex: 0 0 auto; width: -webkit-calc(99.99% * 8.99/12 - (20px - 20px * 8.99/12)); width: calc(99.99% * 8.99/12 - (20px - 20px * 8.99/12)); } .l-columns.l-columns--grid > .l-col9:nth-child(1n) { margin-right: 20px; margin-left: 0; } .l-columns.l-columns--grid > .l-col9:last-child { margin-right: 0; } .l-columns.l-columns--grid > .l-col9:nth-child(20pxn) { margin-right: 0; margin-left: auto; } .l-columns.l-columns--grid > .l-col10 { -webkit-box-flex: 0; -webkit-flex: 0 0 auto; -ms-flex: 0 0 auto; flex: 0 0 auto; width: -webkit-calc(99.99% * 9.99/12 - (20px - 20px * 9.99/12)); width: calc(99.99% * 9.99/12 - (20px - 20px * 9.99/12)); } .l-columns.l-columns--grid > .l-col10:nth-child(1n) { margin-right: 20px; margin-left: 0; } .l-columns.l-columns--grid > .l-col10:last-child { margin-right: 0; } .l-columns.l-columns--grid > .l-col10:nth-child(20pxn) { margin-right: 0; margin-left: auto; } .l-columns.l-columns--grid > .l-col11 { -webkit-box-flex: 0; -webkit-flex: 0 0 auto; -ms-flex: 0 0 auto; flex: 0 0 auto; width: -webkit-calc(99.99% * 10.99/12 - (20px - 20px * 10.99/12)); width: calc(99.99% * 10.99/12 - (20px - 20px * 10.99/12)); } .l-columns.l-columns--grid > .l-col11:nth-child(1n) { margin-right: 20px; margin-left: 0; } .l-columns.l-columns--grid > .l-col11:last-child { margin-right: 0; } .l-columns.l-columns--grid > .l-col11:nth-child(20pxn) { margin-right: 0; margin-left: auto; } .l-columns.l-columns--grid > .l-col12 { -webkit-box-flex: 0; -webkit-flex: 0 0 auto; -ms-flex: 0 0 auto; flex: 0 0 auto; width: -webkit-calc(99.99% * 11.99/12 - (20px - 20px * 11.99/12)); width: calc(99.99% * 11.99/12 - (20px - 20px * 11.99/12)); } .l-columns.l-columns--grid > .l-col12:nth-child(1n) { margin-right: 20px; margin-left: 0; } .l-columns.l-columns--grid > .l-col12:last-child { margin-right: 0; } .l-columns.l-columns--grid > .l-col12:nth-child(20pxn) { margin-right: 0; margin-left: auto; } .l-columns.l-columns--grid .l-col--with-left-divider { border-left: 1px solid #c6cdd4; padding-left: 18px; } @media only screen and (max-width: 699px) { .l-columns.l-columns--grid > .l-col1 { -webkit-box-flex: 0; -webkit-flex: 0 0 auto; -ms-flex: 0 0 auto; flex: 0 0 auto; width: -webkit-calc(99.99% * 1/2 - (20px - 20px * 1/2)); width: calc(99.99% * 1/2 - (20px - 20px * 1/2)); } .l-columns.l-columns--grid > .l-col1:nth-child(1n) { margin-right: 20px; margin-left: 0; } .l-columns.l-columns--grid > .l-col1:last-child { margin-right: 0; } .l-columns.l-columns--grid > .l-col1:nth-child(20pxn) { margin-right: 0; margin-left: auto; } .l-columns.l-columns--grid > .l-col2 { -webkit-box-flex: 0; -webkit-flex: 0 0 auto; -ms-flex: 0 0 auto; flex: 0 0 auto; width: -webkit-calc(99.99% * 1/2 - (20px - 20px * 1/2)); width: calc(99.99% * 1/2 - (20px - 20px * 1/2)); } .l-columns.l-columns--grid > .l-col2:nth-child(1n) { margin-right: 20px; margin-left: 0; } .l-columns.l-columns--grid > .l-col2:last-child { margin-right: 0; } .l-columns.l-columns--grid > .l-col2:nth-child(20pxn) { margin-right: 0; margin-left: auto; } .l-columns.l-columns--grid > .l-col3 { -webkit-box-flex: 0; -webkit-flex: 0 0 auto; -ms-flex: 0 0 auto; flex: 0 0 auto; width: -webkit-calc(99.99% * 1 - (20px - 20px * 1)); width: calc(99.99% * 1 - (20px - 20px * 1)); } .l-columns.l-columns--grid > .l-col3:nth-child(1n) { margin-right: 20px; margin-left: 0; } .l-columns.l-columns--grid > .l-col3:last-child { margin-right: 0; } .l-columns.l-columns--grid > .l-col3:nth-child(20pxn) { margin-right: 0; margin-left: auto; } .l-columns.l-columns--grid > .l-col4 { -webkit-box-flex: 0; -webkit-flex: 0 0 auto; -ms-flex: 0 0 auto; flex: 0 0 auto; width: -webkit-calc(99.99% * 1 - (20px - 20px * 1)); width: calc(99.99% * 1 - (20px - 20px * 1)); } .l-columns.l-columns--grid > .l-col4:nth-child(1n) { margin-right: 20px; margin-left: 0; } .l-columns.l-columns--grid > .l-col4:last-child { margin-right: 0; } .l-columns.l-columns--grid > .l-col4:nth-child(20pxn) { margin-right: 0; margin-left: auto; } .l-columns.l-columns--grid > .l-col5 { -webkit-box-flex: 0; -webkit-flex: 0 0 auto; -ms-flex: 0 0 auto; flex: 0 0 auto; width: -webkit-calc(99.99% * 1 - (20px - 20px * 1)); width: calc(99.99% * 1 - (20px - 20px * 1)); } .l-columns.l-columns--grid > .l-col5:nth-child(1n) { margin-right: 20px; margin-left: 0; } .l-columns.l-columns--grid > .l-col5:last-child { margin-right: 0; } .l-columns.l-columns--grid > .l-col5:nth-child(20pxn) { margin-right: 0; margin-left: auto; } .l-columns.l-columns--grid > .l-col6 { -webkit-box-flex: 0; -webkit-flex: 0 0 auto; -ms-flex: 0 0 auto; flex: 0 0 auto; width: -webkit-calc(99.6% * 1 - (20px - 20px * 1)); width: calc(99.99% * 1 - (20px - 20px * 1)); } .l-columns.l-columns--grid > .l-col6:nth-child(1n) { margin-right: 20px; margin-left: 0; } .l-columns.l-columns--grid > .l-col6:last-child { margin-right: 0; } .l-columns.l-columns--grid > .l-col6:nth-child(20pxn) { margin-right: 0; margin-left: auto; } .l-columns.l-columns--grid > .l-col7 { -webkit-box-flex: 0; -webkit-flex: 0 0 auto; -ms-flex: 0 0 auto; flex: 0 0 auto; width: -webkit-calc(99.99% * 1 - (20px - 20px * 1)); width: calc(99.99% * 1 - (20px - 20px * 1)); } .l-columns.l-columns--grid > .l-col7:nth-child(1n) { margin-right: 20px; margin-left: 0; } .l-columns.l-columns--grid > .l-col7:last-child { margin-right: 0; } .l-columns.l-columns--grid > .l-col7:nth-child(20pxn) { margin-right: 0; margin-left: auto; } .l-columns.l-columns--grid > .l-col8 { -webkit-box-flex: 0; -webkit-flex: 0 0 auto; -ms-flex: 0 0 auto; flex: 0 0 auto; width: -webkit-calc(99.99% * 1 - (20px - 20px * 1)); width: calc(99.99% * 1 - (20px - 20px * 1)); } .l-columns.l-columns--grid > .l-col8:nth-child(1n) { margin-right: 20px; margin-left: 0; } .l-columns.l-columns--grid > .l-col8:last-child { margin-right: 0; } .l-columns.l-columns--grid > .l-col8:nth-child(20pxn) { margin-right: 0; margin-left: auto; } .l-columns.l-columns--grid > .l-col9 { -webkit-box-flex: 0; -webkit-flex: 0 0 auto; -ms-flex: 0 0 auto; flex: 0 0 auto; width: -webkit-calc(99.99% * 1 - (20px - 20px * 1)); width: calc(99.99% * 1 - (20px - 20px * 1)); } .l-columns.l-columns--grid > .l-col9:nth-child(1n) { margin-right: 20px; margin-left: 0; } .l-columns.l-columns--grid > .l-col9:last-child { margin-right: 0; } .l-columns.l-columns--grid > .l-col9:nth-child(20pxn) { margin-right: 0; margin-left: auto; } .l-columns.l-columns--grid > .l-col10 { -webkit-box-flex: 0; -webkit-flex: 0 0 auto; -ms-flex: 0 0 auto; flex: 0 0 auto; width: -webkit-calc(99.99% * 1 - (20px - 20px * 1)); width: calc(99.99% * 1 - (20px - 20px * 1)); } .l-columns.l-columns--grid > .l-col10:nth-child(1n) { margin-right: 20px; margin-left: 0; } .l-columns.l-columns--grid > .l-col10:last-child { margin-right: 0; } .l-columns.l-columns--grid > .l-col10:nth-child(20pxn) { margin-right: 0; margin-left: auto; } .l-columns.l-columns--grid > .l-col11 { -webkit-box-flex: 0; -webkit-flex: 0 0 auto; -ms-flex: 0 0 auto; flex: 0 0 auto; width: -webkit-calc(99.99% * 1 - (20px - 20px * 1)); width: calc(99.99% * 1 - (20px - 20px * 1)); } .l-columns.l-columns--grid > .l-col11:nth-child(1n) { margin-right: 20px; margin-left: 0; } .l-columns.l-columns--grid > .l-col11:last-child { margin-right: 0; } .l-columns.l-columns--grid > .l-col11:nth-child(20pxn) { margin-right: 0; margin-left: auto; } .l-columns.l-columns--grid > .l-col12 { -webkit-box-flex: 0; -webkit-flex: 0 0 auto; -ms-flex: 0 0 auto; flex: 0 0 auto; width: -webkit-calc(99.99% * 1 - (20px - 20px * 1)); width: calc(99.99% * 1 - (20px - 20px * 1)); } .l-columns.l-columns--grid > .l-col12:nth-child(1n) { margin-right: 20px; margin-left: 0; } .l-columns.l-columns--grid > .l-col12:last-child { margin-right: 0; } .l-columns.l-columns--grid > .l-col12:nth-child(20pxn) { margin-right: 0; margin-left: auto; } .l-columns.l-columns--grid .l-col--with-left-divider { border-left: 0; border-top: 1px solid #c6cdd4; padding-left: 0; margin-top: 30px; padding-top: 30px; } .l-columns.l-columns--grid .l-col--mobile-half { -webkit-box-flex: 0; -webkit-flex: 0 0 auto; -ms-flex: 0 0 auto; flex: 0 0 auto; width: -webkit-calc(99.4% * 1/2 - (20px - 20px * 1/2)); width: calc(99.4% * 1/2 - (20px - 20px * 1/2)); /* Reduce to fix issue with iPhone */ } .l-columns.l-columns--grid .l-col--mobile-third { -webkit-box-flex: 0; -webkit-flex: 0 0 auto; -ms-flex: 0 0 auto; flex: 0 0 auto; width: -webkit-calc(99.6% * 1/3 - (20px - 20px * 1/3)); width: calc(99.6% * 1/3 - (20px - 20px * 1/3)); } .l-columns.l-columns--grid .l-col--mobile-half:nth-child(1n) { margin-right: 20px; margin-left: 0; } .l-columns.l-columns--grid .l-col--mobile-half:last-child { margin-right: 0; } .l-columns.l-columns--grid .l-col--mobile-half:nth-child(20pxn) { margin-right: 0; margin-left: auto; } } /*Rda Change - MAIN SPACING CHANGE*/ .l-content-holder { position: relative; margin-left: auto; margin-right: auto; max-width: 900px; /*padding: 40px 0;*/ padding-top: 50px; } .l-template { position: relative; margin-left: auto; margin-right: auto; max-width: 900px; /*padding: 40px 0;*/ /*padding-top: 50px;*/ } @media only screen and (max-width: 970px) { .l-content-holder, .l-template { width: auto; margin-left: 35px; margin-right: 35px; } } @media only screen and (max-width: 699px) { .l-content-holder, .l-template { margin-left: 20px; margin-right: 20px; } } @media only screen and (max-width: 699px) { .l-content-holder, .l-template { margin-left: 20px; margin-right: 20px; } /*Rda Change - MAIN SPACING CHANGE*/ /*main .l-content-holder, main .l-template { padding-top: 25px; }*/ } .c-mainheader .l-content-holder, .c-mainheader .l-template { max-width: 1250px; padding: 0; height: 100%; } @media only screen and (max-width: 1320px) { .c-mainheader .l-content-holder, .c-mainheader .l-template { margin-left: 35px; margin-right: 35px; } } @media only screen and (max-width: 699px) { .c-mainheader .l-content-holder, .c-mainheader .l-template { margin-left: 15px; margin-right: 15px; } } .c-guided .l-content-holder, .c-guided .l-template { max-width: 1200px; padding-left: 0; padding-right: 0; height: 100%; padding-top: 0; padding-bottom: 0; } @media only screen and (max-width: 1320px) { .c-guided .l-content-holder, .c-guided .l-template { margin-left: auto; margin-right: auto; } } @media only screen and (max-width: 1270px) { .c-guided .l-content-holder, .c-guided .l-template { margin-left: 27px; margin-right: 27px; } } @media only screen and (max-width: 699px) { .c-guided .l-content-holder, .c-guided .l-template { margin-left: 15px; margin-right: 15px; } } .l-template { zoom: 1; } .l-template:after, .l-template:before { content: ""; display: table; } .l-template:after { clear: both; } /*RDA Change: Made padding bottom 0 to accomadate most components being surrounded by l-content-holder. Big Change*/ .l-template--home { max-width: 1180px; padding-bottom: 0px; } @media only screen and (max-width: 1250px) { .l-template--home { width: auto; margin-left: 35px; margin-right: 35px; } } @media only screen and (max-width: 699px) { .l-template--home { margin-left: 20px; margin-right: 20px; } } @media only screen and (max-width: 365px) { .l-template--home { margin-left: 15px; margin-right: 15px; } } > section .l-template--home { margin-left: 0; margin-right: 0; } .l-template--home > section { width: 66.35593%; float: left; } .l-template--home > aside { width: 27.11864%; float: right; } @media only screen and (max-width: 1280px) { .l-template--home > section { width: -webkit-calc(100% - 320px - 3.89831%); width: calc(100% - 320px - 3.89831%); max-width: 783px; } .l-template--home > aside { width: 320px; } } @media only screen and (max-width: 959px) { .l-template--home > section, .l-template--home > aside { width: 100%; max-width: none; float: none; padding-top: 0px; } } @media only screen and (max-width: 365px) { .l-template--home { margin-left: 0; margin-right: 0; } .l-template--home > section { padding-left: 15px; padding-right: 15px; } } /*RDA Change: Changed drop shadow color*/ .ui-btn { display: inline-block; padding: 17px 26px 15px 26px; font-size: 18px; line-height: 18px; font-family: "Macha-Bold", sans-serif; color: #fff; letter-spacing: 1px; text-transform: uppercase; letter-spacing: 1.5px; text-align: center; color: #fff; background: #27a5d6; /*box-shadow: 3px 3px 0px 0px rgba(147,158,169,0.3);*/ box-shadow: 3px 3px 0px 0px rgba(21, 24, 28, 0.3); border-radius: 100px; -webkit-transition: all 0.25s; transition: all 0.25s; -webkit-transition-timing-function: ease-out; transition-timing-function: ease-out; -webkit-align-self: flex-start; align-self: flex-start; -ms-flex-item-align: start; } .ui-btn:hover { color: #fff; background: #00a4da; /*box-shadow: 3px 3px 0px 0px rgba(147,158,169,0.6); RDA Change hover shadow*/ box-shadow: 3px 3px 0px 0px #3D4955; } .ui-btn:active { color: #fff; background: #0095d2; box-shadow: 1px 1px 0px 0px rgba(147,158,169,0.6); -webkit-transition: none; transition: none; } .ui-btn--disabled { color: #95a0ac !important; background-color: #f2f3f5 !important; cursor: default; box-shadow: 3px 3px 0px 0px rgba(147,158,169,0.3) !important; } .ui-btn--secondary { background-color: #f2f3f5; color: #107eb1; } .ui-btn--secondary:hover { background-color: #f2f3f5; color: #0583ad; } .ui-btn--secondary:active { background-color: #f2f3f5; color: #04698a; } .ui-btn--secondary-white { background-color: #fff; color: #107eb1; box-shadow: 3px 3px 0px 0px rgba(147,158,169,0.3); } .ui-btn--secondary-white:hover { color: #0583ad; background-color: #fff; box-shadow: 3px 3px 0px 0px rgba(147,158,169,0.6); } .ui-btn--secondary-simple { width: 245px; height: 43px; margin: 41px 0 81px 16.5px; padding: 13px 25px 30px; border-radius: 100px; border: solid 3px #eaedf0; background-color: #fff; } .ui-btn--secondary-simple a { width: 173px; height: 17px; font-size: 14px; font-stretch: normal; font-style: normal; line-height: 1.21; letter-spacing: 1.14px; text-align: center; color: #107eb1; } } /*RDA Change: Added this from new CSS file*/ @media only screen and (max-width: 959px) { .ui-btn { padding-left: 20px; padding-right: 20px; } } .ui-btn--secondary-white:active { color: #04698a; background-color: #fff; } .c-guided .ui-btn--secondary-white { box-shadow: 3px 3px 0px 0px rgba(0,145,195,0.2); } .c-guided .ui-btn--secondary-white:hover { box-shadow: 3px 3px 0px 0px #0091c3; } .c-guided .ui-btn--secondary-white:active { box-shadow: 1px 1px 0px 0px #0091c3; } .ui-btn--tetriary { background-color: #fff; color: #107eb1; letter-spacing: 1.03px; border: 3px solid #eaedf0; box-shadow: none; padding: 15px 26px 13px 26px; } .ui-btn--tetriary:hover { color: #0583ad; background-color: #fff; border: 3px solid #dadee3; box-shadow: none; } /*RDA Change added dashed button*/ .ui-btn--tetriary-dashed { background-color: #fff; color: #107eb1; letter-spacing: 1.03px; border: 3px dashed #eaedf0; box-shadow: none; padding: 15px 26px 13px 26px; } .ui-btn--tetriary-dashed:hover { color: #0583ad; background-color: #fff; border: 3px dashed #dadee3; box-shadow: none; } .ui-btn--tetriary:active { color: #04698a; background-color: #fff; border: 3px solid #c9cfd6; box-shadow: none; } .ui-btn--quarternary, .ui-btn--quarternary:active, .ui-btn--quarternary:hover { color: #00a4da; padding: 0; display: block; box-shadow: none; background: transparent; margin: 10px 0; text-transform: none; font-family: "Macha-Bold", sans-serif; font-size: 13px; letter-spacing: 1px; border-radius: 0; height: 16px; text-transform: uppercase; } .ui-btn--quarternary:hover, .ui-btn--quarternary:active:hover, .ui-btn--quarternary:hover:hover { color: #0583ad; } .ui-btn--quarternary:active, .ui-btn--quarternary:active:active, .ui-btn--quarternary:hover:active { color: #04698a; } .ui-btn--link, .ui-btn--link:active, .ui-btn--link:hover { color: #107eb1; padding: 0; display: block; box-shadow: none; background: transparent; margin: 10px 0; text-transform: none; font-family: "Macha-Book", sans-serif; font-size: 16px; line-height: 16px; letter-spacing: 0px; border-radius: 0; height: 16px; } .ui-btn--link:hover, .ui-btn--link:active:hover, .ui-btn--link:hover:hover { color: #0583ad; } .ui-btn--link:active, .ui-btn--link:active:active, .ui-btn--link:hover:active { color: #04698a; } .ui-icon { display: inline-block; position: relative; } .ui-icon--check { background: url("/Assets/images/icons/circled-green-check.svg") no-repeat; width: 64px; height: 67px; } .ui-icon--info-gray { width: 19px; height: 19px; background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width=%224%22 height=%2211%22 viewBox=%220 0 4 11%22 xmlns=%22http://www.w3.org/2000/svg%22%3E%3Cpath d=%22M1.653 2.648c.528 0 1.008-.448 1.008-1.008 0-.544-.462-.992-.99-.992-.544 0-1.01.448-1.01.992a1 1 0 0 0 .994 1.008zM.005 11h3.6V9.848H2.5V4.104H.006v1.184h1.12v4.56H.006V11z%22 fill=%22%231B3045%22 fill-rule=%22evenodd%22/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: 50% 50%; background-color: #dadee3; border-radius: 50%; margin-left: 5px; margin-right: 5px; /*RDA MOD*/ margin-bottom: 5px; vertical-align:middle; } .ui-icon.ui-icon--info-gray { background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width=%224%22 height=%2211%22 viewBox=%220 0 4 11%22 xmlns=%22http://www.w3.org/2000/svg%22%3E%3Cpath d=%22M1.653 2.648c.528 0 1.008-.448 1.008-1.008 0-.544-.462-.992-.99-.992-.544 0-1.01.448-1.01.992a1 1 0 0 0 .994 1.008zM.005 11h3.6V9.848H2.5V4.104H.006v1.184h1.12v4.56H.006V11z%22 fill=%22%231B3045%22 fill-rule=%22evenodd%22/%3E%3C/svg%3E"); } .tooltipster-default { border-radius: 5px; background: #1b3045; color: #fff; border-radius: 3px; box-shadow: 2px 2px 0px 0px rgba(94,109,123,0.35); } .tooltipster { cursor: pointer; } .tooltipster-default .tooltipster-content { font-size: 14px; line-height: 20px; padding: 20px; overflow: hidden; } .tooltipster-icon { cursor: help; margin-left: 4px; } .tooltipster-close { width: 20px; height: 20px; position: absolute; top: 5px; right: 5px; display: block; background: url("/Assets/images/controls/tooltipster/close.svg") 50% 50% no-repeat; overflow: hidden; text-indent: -200px; z-index: 2; cursor: pointer; } .tooltipster-close:hover { background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width=%2214%22 height=%2213%22 viewBox=%220 0 14 13%22 xmlns=%22http://www.w3.org/2000/svg%22%3E%3Cpath d=%22M2.25 2.25l9.28 9.28m.22-9.28l-9.28 9.28%22 stroke-width=%222%22 stroke=%22%23FFFFFF%22 fill=%22none%22 stroke-linecap=%22square%22/%3E%3C/svg%3E"); } .tooltipster-base { padding: 0; font-size: 0; line-height: 0; position: absolute; left: 0; top: 0; z-index: 9999998; pointer-events: none; width: auto; overflow: visible; } .tooltipster-base .tooltipster-content { overflow: hidden; } .tooltipster-arrow { display: block; text-align: center; width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: -1; } .tooltipster-arrow span, .tooltipster-arrow-border { display: block; width: 0; height: 0; position: absolute; } .tooltipster-arrow-top span, .tooltipster-arrow-top-right span, .tooltipster-arrow-top-left span { border-left: 11px solid transparent !important; border-right: 11px solid transparent !important; border-top: 15px solid; bottom: -14px; } .tooltipster-arrow-top .tooltipster-arrow-border, .tooltipster-arrow-top-right .tooltipster-arrow-border, .tooltipster-arrow-top-left .tooltipster-arrow-border { border-left: 9px solid transparent !important; border-right: 9px solid transparent !important; border-top: 9px solid; bottom: -7px; } .tooltipster-arrow-bottom span, .tooltipster-arrow-bottom-right span, .tooltipster-arrow-bottom-left span { border-left: 11px solid transparent !important; border-right: 11px solid transparent !important; border-bottom: 15px solid; top: -12px; } .tooltipster-arrow-bottom .tooltipster-arrow-border, .tooltipster-arrow-bottom-right .tooltipster-arrow-border, .tooltipster-arrow-bottom-left .tooltipster-arrow-border { border-left: 9px solid transparent !important; border-right: 9px solid transparent !important; border-bottom: 9px solid; top: -7px; } .tooltipster-arrow-top span, .tooltipster-arrow-top .tooltipster-arrow-border, .tooltipster-arrow-bottom span, .tooltipster-arrow-bottom .tooltipster-arrow-border { left: 0; right: 0; margin: 0 auto; } .tooltipster-arrow-top-left span, .tooltipster-arrow-bottom-left span { left: 6px; } .tooltipster-arrow-top-left .tooltipster-arrow-border, .tooltipster-arrow-bottom-left .tooltipster-arrow-border { left: 5px; } .tooltipster-arrow-top-right span, .tooltipster-arrow-bottom-right span { right: 6px; } .tooltipster-arrow-top-right .tooltipster-arrow-border, .tooltipster-arrow-bottom-right .tooltipster-arrow-border { right: 5px; } .tooltipster-arrow-left span, .tooltipster-arrow-left .tooltipster-arrow-border { border-top: 8px solid transparent !important; border-bottom: 8px solid transparent !important; border-left: 8px solid; top: 50%; margin-top: -7px; right: -7px; } .tooltipster-arrow-left .tooltipster-arrow-border { border-top: 9px solid transparent !important; border-bottom: 9px solid transparent !important; border-left: 9px solid; margin-top: -8px; } .tooltipster-arrow-right span, .tooltipster-arrow-right .tooltipster-arrow-border { border-top: 8px solid transparent !important; border-bottom: 8px solid transparent !important; border-right: 8px solid; top: 50%; margin-top: -7px; left: -7px; } .tooltipster-arrow-right .tooltipster-arrow-border { border-top: 9px solid transparent !important; border-bottom: 9px solid transparent !important; border-right: 9px solid; margin-top: -8px; } .tooltipster-fade { opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); -webkit-transition-property: opacity; transition-property: opacity; } .tooltipster-fade-show { opacity: 1; -ms-filter: none; -webkit-filter: none; filter: none; } .tooltipster-grow { -webkit-transform: scale(0, 0); -ms-transform: scale(0, 0); transform: scale(0, 0); -webkit-transition-property: -webkit-transform; transition-property: -webkit-transform; transition-property: transform; transition-property: transform, -webkit-transform; -webkit-backface-visibility: hidden; -webkit-backface-visibility: hidden; backface-visibility: hidden; } .tooltipster-grow-show { -webkit-transform: scale(1, 1); -ms-transform: scale(1, 1); transform: scale(1, 1); -webkit-transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.15); transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.15); } .tooltipster-swing { opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); -webkit-transform: rotateZ(4deg); -ms-transform: rotateZ(4deg); transform: rotateZ(4deg); -webkit-transition-property: -webkit-transform; transition-property: -webkit-transform; transition-property: transform; transition-property: transform, -webkit-transform; } .tooltipster-swing-show { opacity: 1; -ms-filter: none; -webkit-filter: none; filter: none; -webkit-transform: rotateZ(0deg); -ms-transform: rotateZ(0deg); transform: rotateZ(0deg); -webkit-transition-timing-function: cubic-bezier(0.23, 0.635, 0.495, 2.4); transition-timing-function: cubic-bezier(0.23, 0.635, 0.495, 2.4); } .tooltipster-fall { top: 0; -webkit-transition-property: top; transition-property: top; -webkit-transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.15); transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.15); } .tooltipster-fall.tooltipster-dying { -webkit-transition-property: all; transition-property: all; top: 0px !important; opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); } .tooltipster-slide { left: -40px; -webkit-transition-property: left; transition-property: left; -webkit-transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.15); transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.15); } .tooltipster-slide.tooltipster-dying { -webkit-transition-property: all; transition-property: all; left: 0px !important; opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); } .tooltipster-content-changing { opacity: 0.5; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; filter: alpha(opacity=50); -webkit-transform: scale(1.1, 1.1); -ms-transform: scale(1.1, 1.1); transform: scale(1.1, 1.1); } .u-visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; clip: rect(0 0 0 0); overflow: hidden; } .disable-transitions { -webkit-transition: none !important; transition: none !important; } .u-text-center { text-align: center; } .u-text-left { text-align: left; } .u-text-right { text-align: right; } .u-text-float-right { float: right; } @media only screen and (min-width: 700px) { .u-text-float-right { float: right; } } @media only screen and (max-width: 699px) { .u-text-float-right { float: unset; } } @media only screen and (min-width: 699px) { .u-text-p-above-mobile { display: block; padding-top: 15px; } } .u-text-nobr { white-space: nowrap; } @media only screen and (min-width: 699px) { .u-mobile-only { display: none; } } @media only screen and (max-width: 699px) { .u-non-mobile-only { display: none; } } .u-add-top-vspace { margin-top: 10px; } .mfp-bg { top: 0; left: 0; width: 100%; height: 100%; z-index: 1042; overflow: hidden; position: fixed; background: #0b0b0b; opacity: 0.8; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)"; filter: alpha(opacity=80); } .mfp-wrap { top: 0; left: 0; width: 100%; height: 100%; z-index: 1043; position: fixed; outline: none !important; -webkit-backface-visibility: hidden; } .mfp-container { text-align: center; position: absolute; width: 100%; height: 100%; left: 0; top: 0; padding: 0 8px; box-sizing: border-box; } .mfp-container:before { content: ''; display: inline-block; height: 100%; vertical-align: middle; } .mfp-align-top .mfp-container:before { display: none; } .mfp-content { position: relative; display: inline-block; vertical-align: middle; margin: 0 auto; text-align: left; z-index: 1045; } .mfp-inline-holder .mfp-content, .mfp-ajax-holder .mfp-content { width: 100%; cursor: auto; } .mfp-ajax-cur { cursor: progress; } .mfp-zoom-out-cur, .mfp-zoom-out-cur .mfp-image-holder .mfp-close { cursor: -webkit-zoom-out; cursor: zoom-out; } .mfp-zoom { cursor: pointer; cursor: -webkit-zoom-in; cursor: zoom-in; } .mfp-auto-cursor .mfp-content { cursor: auto; } .mfp-close, .mfp-arrow, .mfp-preloader, .mfp-counter { -webkit-user-select: none; -moz-user-select: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .mfp-loading.mfp-figure { display: none; } .mfp-hide { display: none !important; } .mfp-preloader { color: #ccc; position: absolute; top: 50%; width: auto; text-align: center; margin-top: -0.8em; left: 8px; right: 8px; z-index: 1044; } .mfp-preloader a { color: #ccc; } .mfp-preloader a:hover { color: #fff; } .mfp-s-ready .mfp-preloader { display: none; } .mfp-s-error .mfp-content { display: none; } button.mfp-close, button.mfp-arrow { overflow: visible; cursor: pointer; background: transparent; border: 0; -webkit-appearance: none; display: block; outline: none; padding: 0; z-index: 1046; box-shadow: none; -ms-touch-action: manipulation; touch-action: manipulation; } button::-moz-focus-inner { padding: 0; border: 0; } .mfp-close { width: 44px; height: 44px; line-height: 44px; position: absolute; right: 0; top: 0; text-decoration: none; text-align: center; opacity: 0.65; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=65)"; filter: alpha(opacity=65); padding: 0 0 18px 10px; color: #fff; font-style: normal; font-size: 28px; font-family: Arial, Baskerville, monospace; } .mfp-close:hover, .mfp-close:focus { opacity: 1; -ms-filter: none; -webkit-filter: none; filter: none; } .mfp-close:active { top: 1px; } .mfp-close-btn-in .mfp-close { color: #333; } .mfp-image-holder .mfp-close, .mfp-iframe-holder .mfp-close { color: #fff; right: -6px; text-align: right; padding-right: 6px; width: 100%; } .mfp-counter { position: absolute; top: 0; right: 0; color: #ccc; font-size: 12px; line-height: 18px; white-space: nowrap; } .mfp-arrow { position: absolute; opacity: 0.65; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=65)"; filter: alpha(opacity=65); margin: 0; top: 50%; margin-top: -55px; padding: 0; width: 90px; height: 110px; -webkit-tap-highlight-color: transparent; } .mfp-arrow:active { margin-top: -54px; } .mfp-arrow:hover, .mfp-arrow:focus { opacity: 1; -ms-filter: none; -webkit-filter: none; filter: none; } .mfp-arrow:before, .mfp-arrow:after { content: ''; display: block; width: 0; height: 0; position: absolute; left: 0; top: 0; margin-top: 35px; margin-left: 35px; border: medium inset transparent; } .mfp-arrow:after { border-top-width: 13px; border-bottom-width: 13px; top: 8px; } .mfp-arrow:before { border-top-width: 21px; border-bottom-width: 21px; opacity: 0.7; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)"; filter: alpha(opacity=70); } .mfp-arrow-left { left: 0; } .mfp-arrow-left:after { border-right: 17px solid #fff; margin-left: 31px; } .mfp-arrow-left:before { margin-left: 25px; border-right: 27px solid #3f3f3f; } .mfp-arrow-right { right: 0; } .mfp-arrow-right:after { border-left: 17px solid #fff; margin-left: 39px; } .mfp-arrow-right:before { border-left: 27px solid #3f3f3f; } .mfp-iframe-holder { padding-top: 40px; padding-bottom: 40px; } .mfp-iframe-holder .mfp-content { line-height: 0; width: 100%; max-width: 900px; } .mfp-iframe-holder .mfp-close { top: -40px; } .mfp-iframe-scaler { width: 100%; height: 0; overflow: hidden; padding-top: 56.25%; } .mfp-iframe-scaler iframe { position: absolute; display: block; top: 0; left: 0; width: 100%; height: 100%; box-shadow: 0 0 8px rgba(0,0,0,0.6); background: #000; } img.mfp-img { width: auto; max-width: 100%; height: auto; display: block; line-height: 0; box-sizing: border-box; padding: 40px 0 40px; margin: 0 auto; } .mfp-figure { line-height: 0; } .mfp-figure:after { content: ''; position: absolute; left: 0; top: 40px; bottom: 40px; display: block; right: 0; width: auto; height: auto; z-index: -1; box-shadow: 0 0 8px rgba(0,0,0,0.6); background: #444; } .mfp-figure small { color: #bdbdbd; display: block; font-size: 12px; line-height: 14px; } .mfp-figure figure { margin: 0; } .mfp-bottom-bar { margin-top: -36px; position: absolute; top: 100%; left: 0; width: 100%; cursor: auto; } .mfp-title { text-align: left; line-height: 18px; color: #f3f3f3; word-wrap: break-word; padding-right: 36px; } .mfp-image-holder .mfp-content { max-width: 100%; } .mfp-gallery .mfp-image-holder .mfp-figure { cursor: pointer; } @media screen and (max-width: 800px) and (orientation: landscape), screen and (max-height: 300px) { .mfp-img-mobile .mfp-image-holder { padding-left: 0; padding-right: 0; } .mfp-img-mobile img.mfp-img { padding: 0; } .mfp-img-mobile .mfp-figure:after { top: 0; bottom: 0; } .mfp-img-mobile .mfp-figure small { display: inline; margin-left: 5px; } .mfp-img-mobile .mfp-bottom-bar { background: rgba(0,0,0,0.6); bottom: 0; margin: 0; top: auto; padding: 3px 5px; position: fixed; box-sizing: border-box; } .mfp-img-mobile .mfp-bottom-bar:empty { padding: 0; } .mfp-img-mobile .mfp-counter { right: 5px; top: 3px; } .mfp-img-mobile .mfp-close { top: 0; right: 0; width: 35px; height: 35px; line-height: 35px; background: rgba(0,0,0,0.6); position: fixed; text-align: center; padding: 0; } } @media all and (max-width: 900px) { .mfp-arrow { -webkit-transform: scale(0.75); -webkit-transform: scale(0.75); -ms-transform: scale(0.75); transform: scale(0.75); } .mfp-arrow-left { -webkit-transform-origin: 0; -webkit-transform-origin: 0; -ms-transform-origin: 0; transform-origin: 0; } .mfp-arrow-right { -webkit-transform-origin: 100%; -webkit-transform-origin: 100%; -ms-transform-origin: 100%; transform-origin: 100%; } .mfp-container { padding-left: 6px; padding-right: 6px; } } .mfp-container { background: rgba(95,110,124,0.7); } .mfp-content { background: #fff; padding: 40px 60px 40px 40px; max-width: 892px; } .mfp-ajax-holder .mfp-content { width: auto; } button.mfp-close { width: 30px; height: 30px; background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width=%2217%22 height=%2217%22 viewBox=%220 0 17 17%22 xmlns=%22http://www.w3.org/2000/svg%22%3E%3Cpath d=%22M1.375 1.375l13.92 13.92m.33-13.92l-13.92 13.92%22 stroke=%22%23939EA9%22 stroke-width=%222%22 fill=%22none%22 stroke-linecap=%22square%22/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: 50% 50%; overflow: hidden; text-indent: -100px; position: absolute; top: 10px; right: 10px; } button.mfp-close:hover, button.mfp-close:active { top: 10px; right: 10px; opacity: 0.8; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)"; filter: alpha(opacity=80); } .mfp-popup-alert { max-width: 480px; text-align: center; } .mfp-popup-buttons { margin-top: 30px; } .mfp-popup-buttons .ui-btn + .ui-btn { margin-left: 30px; } @media only screen and (max-width: 699px) { .mfp-popup-buttons { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-orient: vertical; -o-box-orient: vertical; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; } .mfp-popup-buttons .ui-btn, .mfp-popup-buttons .ui-btn + .ui-btn { margin-left: auto; margin-right: auto; } .mfp-popup-buttons .ui-btn { width: 100%; max-width: 375px; } } /* Investment Mix CSS */ .investment-mix-asset-title { color: #1b3045; line-height: 24px; font-size:18px; } h3.investment-mix-asset-title { margin-bottom:0px; } .investment-mix-asset-description { line-height: 24px; font-size: 14px; color: #1b3045; } .investment-mix-row-header { background: #F8F9FA; border-top: solid 2px #dadee3; border-bottom: solid 2px #dadee3; padding-left: 5px; padding-right: 5px; font-stretch: normal; line-height: 1.29; height: 48px; padding-top: 0px !important; text-justify: inherit; align-self: center; color:#5F6E7C; font-feature-settings: 'clig' off, 'liga' off; font-family: Macha-Medium; font-size: 14px; font-style: normal; font-weight: 500; line-height: 16px; /* 114.286% */ letter-spacing: 2px; text-transform: uppercase; } .investment-mix-row-header .hidden { border-bottom: 0px; } .investment-mix-row { border-bottom: solid 1px #dadee3; min-height: 46px; padding-left: 5px; padding-right: 5px; } @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) { .investment-mix-row { height:46px; } } .investment-mix-col { display: flex; align-items: center; } .investment-mix-col-right { display: flex; align-items: center; justify-content: flex-end; text-align: right; } .investment-mix-row-footer { border-bottom: none; text-transform: uppercase; } .investment-mix-row .c-form-control { margin-top: 10px; margin-bottom: 10px; border-color: #dadee3; border-width: 2px; border-style: solid; text-align: right; } input::-webkit-outer-spin-button, input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } /* Firefox */ input[type=number] { -moz-appearance: textfield; } .investment-desktop-form-navigation-container { padding-right: 0px; padding-left: 0px; margin: 0 auto; margin-top: 5px; } .investment-contribution-input { font-weight: normal; font-size: 16px; line-height: 1.38; width: 80%; height: 44px; text-align: right; padding-right: 5px; } .investment-contribution-input.dollar { margin-left:5px; } .investment-contribution-input.percent { margin-right:5px; } .investment-contribution-input.transfer-imput { width: 50%; } .investment-contribution-input::-webkit-input-placeholder { font-weight: normal; font-size: 16px; line-height: 1.38; color: #152c46; font-family: Macha-Book, sans-serif; } .investment-contribution-input::-moz-placeholder { font-weight: normal; font-size: 16px; line-height: 1.38; color: #152c46; font-family: Macha-Book, sans-serif; } .investment-contribution-input::-moz-placeholder { font-weight: normal; font-size: 16px; line-height: 1.38; color: #152c46; font-family: Macha-Book, sans-serif; } .investment-contribution-input:-ms-input-placeholder { font-weight: normal; font-size: 16px; line-height: 1.38; color: #152c46; font-family: Macha-Book, sans-serif; } .investment-contribution-input:-moz-placeholder { font-weight: normal; font-size: 16px; line-height: 1.38; color: #152c46; font-family: Macha-Book, sans-serif; } .investment-eb-percentage { font-size: 18px; font-weight: bold; line-height: 1.33; } .investment-info-circle { font-size: 22px; } .investment-mobile-details { font-size: 12px; line-height: 1.17; } @media only screen and (min-width: 700px) { .investment-desktop-hidden { display: none !important; } .investment-mobile-hidden { display: flex; } } @media only screen and (max-width: 699px) { .investment-mix-row-header { padding-left: 5px; padding-right: 5px; font-size: 12px; font-weight: bold; font-stretch: normal; font-style: normal; line-height: 14px; letter-spacing: 1px; } .investment-mix-row { border-bottom: solid 1px #dadee3; line-height: 1.43; font-size: 14px; padding-left: 5px; padding-right: 5px; } .investment-mobile-hidden { display: none !important; } .investment-desktop-hidden { display: flex; } .investment-mix-row .c-form-control { width: 60px; height: 40px; } .investment-mix-row-header { margin-top: 20px; } .eb-percentage { text-align: left; } } @media only screen and (max-width: 970px) { .investment-desktop-form-navigation-container { padding-right: 35px; padding-left: 35px; } } .investment-assetclass_row_data { margin-bottom: 20px; background-color:#f3f5f6; border-top: solid 2px #dadee3; border-bottom: solid 1px #dadee3; } .investment-assetclass_row_data .l-columns.l-columns--grid.investment-mix-row-header { border-top: none; } .investment-assetclass_row_data .l-columns.l-columns--grid.investment-mix-row { background-color: white; border-top: none; } .investment-assetclass_row_data .l-columns.l-columns--grid .l-col4 { padding:20px; } .investment-assetclass_row_data .l-columns.l-columns--grid .l-col8 { background-color: white; } div.l-columns.l-columns--grid.investment-mix-row:last-child { border-bottom: none; } .investment-desktop-form-navigation { border-top: 1px solid #dadee3; width: 100%; height: 112px; position: fixed; bottom: 0; left: 0; z-index: 1000; background: white; } @media only screen and (max-width: 1199px) { .investment-desktop-form-navigation { width: 100%; } } .investment-mobile-form-navigation { border-top: 1px solid #dadee3; width: 100%; height: 90px; z-index: 1000; background: white; } /* End Investment Mix CSS*/ .skeleton-box { display: inline-block; height: 3em; position: relative; overflow: hidden; background-color: #dddbdd; line-height:1em; width:100%; } .skeleton-box::after { position: absolute; top: 0; right: 0; bottom: 0; left: 0; transform: translateX(-100%); background-image: linear-gradient(90deg, rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, 0.2) 20%, rgba(255, 255, 255, 0.5) 60%, rgba(255, 255, 255, 0)); animation: shimmer 2s infinite; content: ""; } .still-skeleton-box { display: inline-block; height: 3em; position: relative; overflow: hidden; background-color: #dddbdd; line-height: 1em; width: 100%; } .still-skeleton-box::after { position: absolute; top: 0; right: 0; bottom: 0; left: 0; transform: translateX(-100%); background-image: linear-gradient(90deg, rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, 0.2) 20%, rgba(255, 255, 255, 0.5) 60%, rgba(255, 255, 255, 0)); content: ""; } @keyframes shimmer { 100% { transform: translateX(100%); } } .graph-empty__headline { font-size: 1.25em; font-weight: bold; } .graph-empty__meta { font-size: 0.85em; color: #6b6b6b; } .o-media { display: flex; } .o-media__body { flex-grow: 1; margin-left: 1em; } .o-vertical-spacing > * + * { margin-top: 0.75em; } .o-vertical-spacing--l > * + * { margin-top: 2em; } .review-mix-save-button { align-items: flex-end; display: flex; flex-direction: column-reverse; text-align: right; } .review-mix-save-button a { align-self: flex-end; margin-bottom: 10px !important } @media (max-width: 699px) { .review-mix-save-button { text-align: center; } } /* The jQuery UI Month Picker Version 3.0.4 https://github.com/KidSysco/jquery-ui-month-picker/ Copyright (C) 2007 Free Software Foundation, Inc. This program is free software: you can redistribute it and/or modify it under the terms of the GNU General Public License as published by the Free Software Foundation, either version 3 of the License, or (at your option) any later version. This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for more details. You should have received a copy of the GNU General Public License along with this program. If not, see . */ .month-picker { display: inline-block; position: absolute; z-index: 9999; } .month-picker table { border-collapse: separate; border-spacing: 2px 2px; } .month-picker td { padding: 0px; } /* Prevents the button labels from maving sligtly to the left when applying the width CSS property to the buttons. See: .month-picker-month-table button { width: 4.3em; } */ .month-picker .ui-button-text { padding: .4em 0; } .month-picker-header { margin: 3px 3px 0px 3px; } .month-picker-year-table { width: 100%; /* Makes sure the next/previous/jump years buttons are not unnecessarily selected if the user clicks them a couple of times fast. */ -ms-user-select: none; /* IE 10+ */ -moz-user-select: -moz-none; -khtml-user-select: none; -webkit-user-select: none; user-select: none; } /* The plugin uses buttons with a transparent background in the year-table (aka header) in order to look consistent with jQuery UI datepicker and to make the year title a button that blends into the heading in the default state. The plugin does this by removing the .ui-state-default class from (in MonthPicker.js) the a tags (buttons) which also ends up removing the 1px border that it applies. To prevent the button from resizing and moving everything around when you hover in and out, we use a carefully constructed selector, which gets overroden by the more specific .ui-state-hover/actove class selectors in the jquery-ui.css that apply the visible borders that we want. This selector applies a 1px transparent border that keeps the button in the same size, but it doesen't hide the borders that .ui-state-hover/actove give us. */ .month-picker-year-table a { border: 1px solid transparent; } /* Sets the size of the next/previous buttons, and makes the buttons in the heading (year-table) sligtly bigger, and removes the pointer cursor from the buttons in the heading (year-table). */ .month-picker-year-table .ui-button { font-size: 1.1em; width: 1.5em; height: 1.5em; cursor: default; margin: 0; } .month-picker-year-table .month-picker-title { text-align: center; } .month-picker-year-table .month-picker-title .ui-button { font-size: 1em; padding: .1em 0; width: 100%; font-weight: bold; } /* The buttons in the heading (year-table) are slightly shrinked, but because jQuery ui and the .month-picker .ui-button-text rule at the top of this CSS file apply some padding which results in the button text being moved to the bottom of the button. This rule removes the unnecessary padding so the text in the jump years button will be vericaly centred. */ .month-picker-year-table .ui-button-text { padding: 0; } .month-picker-month-table td { height: 35px; text-align: center; } /* Makes sure the buttons stay in the same size when swithching to the Jump years menu. this also ensures that the entire menu dosen't resize itself in response to the slightly bigger buttons in the Jump years menu. */ .month-picker-month-table .ui-button { width: 4.2em; margin: .2em; } .month-picker-open-button { height: 20px; width: 20px; vertical-align: bottom; } .month-picker-invalid-message { display: none; background-color: Yellow; } .month-picker-disabled { background-color: #e1e1e1; } /* set slider dimension here */ #slider { width: 200px; height: 200px; } /* Basic solid color slider grip */ .pathslider-grip { width: 30px; height: 15px; position: absolute; top: 0; left: 0; background: #ddd; font-size: 1px; z-index: 10; cursor: move; border: 1px solid; -webkit-border-radius: 7px; -moz-border-radius: 7px; border-radius: 7px; -webkit-box-shadow: 0px 1px 3px rgba(000,000,000,0.5), inset 0px 0px 1px rgba(255,255,255,0.6); /* Saf3-4, iOS 4.0.2 - 4.2, Android 2.3+ */ -moz-box-shadow: 0px 1px 3px rgba(000,000,000,0.5), inset 0px 0px 1px rgba(255,255,255,0.6); /* FF3.5 - 3.6 */ box-shadow: 0px 1px 3px rgba(000,000,000,0.5), inset 0px 0px 1px rgba(255,255,255,0.6); /* Opera 10.5, IE9, FF4+, Chrome 6+, iOS 5 */ } /* grip hover/sliding state */ .pathslider-grip.sliding, .pathslider-grip:hover { border-color: #8ce; -webkit-box-shadow: 0 0 15px #8ce; -moz-box-shadow: 0 0 15px #8ce; box-shadow: 0 0 15px #8ce; } /* slider extra css - same as #slider above */ .pathslider { position: relative; } /************* grip styles add these using the gripClass option *************/ /* shiny silver - sorta */ .silver { border-color: #949494; background-color: #ebebeb; background-image: -webkit-gradient(linear, left top, left bottom,from(#ffffff),color-stop(0.50, #ebebeb),color-stop(0.50, #dbdbdb),to(#b5b5b5)); background-image: -webkit-linear-gradient(top,#ffffff 0%,#ebebeb 50%,#dbdbdb 50%,#b5b5b5) /* Chrome 10+, Saf5.1+, iOS 5+ */ background-image: -moz-linear-gradient(top,#ffffff 0%,#ebebeb 50%,#dbdbdb 50%,#b5b5b5) /* FF3.6 */ background-image: -ms-linear-gradient(top,#ffffff 0%,#ebebeb 50%,#dbdbdb 50%,#b5b5b5) /* IE10 */ background-image: -o-linear-gradient(top,#ffffff 0%,#ebebeb 50%,#dbdbdb 50%,#b5b5b5) /* Opera 11.10+ */ background-image: linear-gradient(top,#ffffff 0%,#ebebeb 50%,#dbdbdb 50%,#b5b5b5) } /* shiny black */ .black { border-color: #000000 background-color: #3b3b3b; background-image: -webkit-gradient(linear, left top, left bottom,from(#a3a3a3),color-stop(0.50, #3b3b3b),color-stop(0.50, #242424),to(#000000)); background-image: -webkit-linear-gradient(top,#a3a3a3 0%,#3b3b3b 50%,#242424 50%,#000000); /* Chrome 10+, Saf5.1+, iOS 5+ */ background-image: -moz-linear-gradient(top,#a3a3a3 0%,#3b3b3b 50%,#242424 50%,#000000); /* FF3.6 */ background-image: -ms-linear-gradient(top,#a3a3a3 0%,#3b3b3b 50%,#242424 50%,#000000); /* IE10 */ background-image: -o-linear-gradient(top,#a3a3a3 0%,#3b3b3b 50%,#242424 50%,#000000); /* Opera 11.10+ */ background-image: linear-gradient(top,#a3a3a3 0%,#3b3b3b 50%,#242424 50%,#000000); } /* Small circular chrome knob including ".pathslider-grip" to remove border & box shadow */ .pathslider-grip.chrome1 { width: 18px; height: 18px; border: 0; background: url(../images/chrome1.png) center center no-repeat; -webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0; -webkit-box-shadow: 0 0 0; -moz-box-shadow: 0 0 0; box-shadow: 0 0 0; } /* Large curvy chrome slide */ .pathslider-grip.chrome2 { width: 57px; height: 35px; border: 0; background: url(../images/chrome2.png) center center no-repeat; -webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0; -webkit-box-shadow: 0 0 0; -moz-box-shadow: 0 0 0; box-shadow: 0 0 0; } .top{ color: white; background-color: #27b696; width: 160px; height: 24px; display: flex; align-items: center; justify-content: center; top: -5px; margin: auto; font-family: "Macha-Bold"; letter-spacing: 3px; font-size: 13px; } .effect-3{ position:relative; } .effect-3:before{ z-index: -1; position: absolute; content: ""; /* top: 1px; */ right: -21px; width: 50%; top: 103%; max-width: 300px; background: #777; -webkit-box-shadow: 0 15px 10px #777; -moz-box-shadow: 0 15px 10px #777; /* box-shadow: 0px 0px 10px #777; */ -webkit-transform: rotate(-3deg); -moz-transform: rotate(-3deg); -o-transform: rotate(-3deg); -ms-transform: rotate(-3deg); transform: rotate(-45deg); height: 25px; background-color: rgb(34, 145, 125); } .Rectangle-2 { border-radius:10px; width: 320px; height: 459px; background-color: #1b3045; margin:25px auto; } .c-poll-question { margin: 0 30px; color: white; font-size: 20px; text-align: center; line-height:25px; } .bg-copy-3 { width: 255px; height: 50px; background-color: #3a9a7d; margin-bottom:12px; text-transform:none; letter-spacing:0.5px; border:0px; font-size:14px; } .learn-more-link { width: 170px; height: 40px; margin:10px; color:#83e0ff; line-height:20px; margin-bottom:25px } .learn-more-link:hover { width: 170px; height: 40px; line-height:20px; margin-bottom: 25px; } .c-learn-more-text{ color:white; margin-bottom:10px; } .c-learn-more-button{ align-self:center; } .c-learn-more-flex{ display:flex; flex-direction:column; } .poll-content{ display: flex; flex-direction: column; align-items: center; height:420px; justify-content:space-around; } .c-result{ color: black; font-weight: bold; width: 255px; height: 48px; background-color: white; margin-bottom: 12px; display: flex; align-items: center; justify-content: space-between; position:relative; } .c-poll-response-text{ padding:10px; position:absolute; display:flex; align-items:center; } .c-poll-response-text img{ padding-left:5px; } span.c-poll-response-percent.ng-binding{ position:relative; right:35px; width:0px; } .c-poll-progress{ background-color:#76f4d8; height:100%; -webkit-transition:all linear 0.5s; transition:all linear 0.5s; } .c-poll-progress.ng-hide{ width:0%; } span.c-poll-response-percent.ng-binding.c-percent-triple { right: 50px; } span.c-poll-response-percent.ng-binding.c-percent-double { right: 42px; } .c-hr { width: 60px; height: 3px; background-color: rgba(95, 110, 124, 0.5); } /*! * # Semantic UI 2.2.6 - Popup * http://github.com/semantic-org/semantic-ui/ * * * Released under the MIT license * http://opensource.org/licenses/MIT * */ /******************************* Popup *******************************/ .ui.popup { display: none; position: absolute; top: 0px; right: 0px; /* Fixes content being squished when inline (moz only) */ min-width: -webkit-min-content; min-width: -moz-min-content; min-width: min-content; z-index: 1900; border: 1px solid #D4D4D5; line-height: 1.4285em; max-width: 250px; background: #FFFFFF; padding: 0.833em 1em; font-weight: normal; font-style: normal; color: rgba(0, 0, 0, 0.87); border-radius: 0.28571429rem; box-shadow: 0px 2px 4px 0px rgba(34, 36, 38, 0.12), 0px 2px 10px 0px rgba(34, 36, 38, 0.15); } .ui.popup > .header { padding: 0em; font-family: 'Lato', 'Helvetica Neue', Arial, Helvetica, sans-serif; font-size: 1.14285714em; line-height: 1.2; font-weight: bold; } .ui.popup > .header + .content { padding-top: 0.5em; } .ui.popup:before { position: absolute; content: ''; width: 0.71428571em; height: 0.71428571em; background: #FFFFFF; -webkit-transform: rotate(45deg); transform: rotate(45deg); z-index: 2; box-shadow: 1px 1px 0px 0px #bababc; } /******************************* Types *******************************/ /*-------------- Tooltip ---------------*/ /* Content */ [data-tooltip] { position: relative; } /* Arrow */ [data-tooltip]:before { pointer-events: none; position: absolute; content: ''; font-size: 1rem; width: 0.71428571em; height: 0.71428571em; background: #FFFFFF; -webkit-transform: rotate(45deg); transform: rotate(45deg); z-index: 2; box-shadow: 1px 1px 0px 0px #bababc; } /* Popup */ [data-tooltip]:after { pointer-events: none; content: attr(data-tooltip); position: absolute; text-transform: none; text-align: left; white-space: nowrap; font-size: 1rem; border: 1px solid #D4D4D5; line-height: 1.4285em; max-width: none; background: #FFFFFF; padding: 0.833em 1em; font-weight: normal; font-style: normal; color: rgba(0, 0, 0, 0.87); border-radius: 0.28571429rem; box-shadow: 0px 2px 4px 0px rgba(34, 36, 38, 0.12), 0px 2px 10px 0px rgba(34, 36, 38, 0.15); z-index: 1; } /* Default Position (Top Center) */ [data-tooltip]:not([data-position]):before { top: auto; right: auto; bottom: 100%; left: 50%; background: #FFFFFF; margin-left: -0.07142857rem; margin-bottom: 0.14285714rem; } [data-tooltip]:not([data-position]):after { left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); bottom: 100%; margin-bottom: 0.5em; } /* Animation */ [data-tooltip]:before, [data-tooltip]:after { pointer-events: none; visibility: hidden; } [data-tooltip]:before { opacity: 0; -webkit-transform: rotate(45deg) scale(0) !important; transform: rotate(45deg) scale(0) !important; -webkit-transform-origin: center top; transform-origin: center top; -webkit-transition: all 0.1s ease; transition: all 0.1s ease; } [data-tooltip]:after { opacity: 1; -webkit-transform-origin: center bottom; transform-origin: center bottom; -webkit-transition: all 0.1s ease; transition: all 0.1s ease; } [data-tooltip]:hover:before, [data-tooltip]:hover:after { visibility: visible; pointer-events: auto; } [data-tooltip]:hover:before { -webkit-transform: rotate(45deg) scale(1) !important; transform: rotate(45deg) scale(1) !important; opacity: 1; } /* Animation Position */ [data-tooltip]:after, [data-tooltip][data-position="top center"]:after, [data-tooltip][data-position="bottom center"]:after { -webkit-transform: translateX(-50%) scale(0) !important; transform: translateX(-50%) scale(0) !important; } [data-tooltip]:hover:after, [data-tooltip][data-position="bottom center"]:hover:after { -webkit-transform: translateX(-50%) scale(1) !important; transform: translateX(-50%) scale(1) !important; } [data-tooltip][data-position="left center"]:after, [data-tooltip][data-position="right center"]:after { -webkit-transform: translateY(-50%) scale(0) !important; transform: translateY(-50%) scale(0) !important; } [data-tooltip][data-position="left center"]:hover:after, [data-tooltip][data-position="right center"]:hover:after { -webkit-transform: translateY(-50%) scale(1) !important; transform: translateY(-50%) scale(1) !important; } [data-tooltip][data-position="top left"]:after, [data-tooltip][data-position="top right"]:after, [data-tooltip][data-position="bottom left"]:after, [data-tooltip][data-position="bottom right"]:after { -webkit-transform: scale(0) !important; transform: scale(0) !important; } [data-tooltip][data-position="top left"]:hover:after, [data-tooltip][data-position="top right"]:hover:after, [data-tooltip][data-position="bottom left"]:hover:after, [data-tooltip][data-position="bottom right"]:hover:after { -webkit-transform: scale(1) !important; transform: scale(1) !important; } /*-------------- Inverted ---------------*/ /* Arrow */ [data-tooltip][data-inverted]:before { box-shadow: none !important; } /* Arrow Position */ [data-tooltip][data-inverted]:before { background: #1B1C1D; } /* Popup */ [data-tooltip][data-inverted]:after { background: #1B1C1D; color: #FFFFFF; border: none; box-shadow: none; } [data-tooltip][data-inverted]:after .header { background-color: none; color: #FFFFFF; } /*-------------- Position ---------------*/ /* Top Center */ [data-position="top center"][data-tooltip]:after { top: auto; right: auto; left: 50%; bottom: 100%; -webkit-transform: translateX(-50%); transform: translateX(-50%); margin-bottom: 0.5em; } [data-position="top center"][data-tooltip]:before { top: auto; right: auto; bottom: 100%; left: 50%; background: #FFFFFF; margin-left: -0.07142857rem; margin-bottom: 0.14285714rem; } /* Top Left */ [data-position="top left"][data-tooltip]:after { top: auto; right: auto; left: 0; bottom: 100%; margin-bottom: 0.5em; } [data-position="top left"][data-tooltip]:before { top: auto; right: auto; bottom: 100%; left: 1em; margin-left: -0.07142857rem; margin-bottom: 0.14285714rem; } /* Top Right */ [data-position="top right"][data-tooltip]:after { top: auto; left: auto; right: 0; bottom: 100%; margin-bottom: 0.5em; } [data-position="top right"][data-tooltip]:before { top: auto; left: auto; bottom: 100%; right: 1em; margin-left: -0.07142857rem; margin-bottom: 0.14285714rem; } /* Bottom Center */ [data-position="bottom center"][data-tooltip]:after { bottom: auto; right: auto; left: 50%; top: 100%; -webkit-transform: translateX(-50%); transform: translateX(-50%); margin-top: 0.5em; } [data-position="bottom center"][data-tooltip]:before { bottom: auto; right: auto; top: 100%; left: 50%; margin-left: -0.07142857rem; margin-top: 0.14285714rem; } /* Bottom Left */ [data-position="bottom left"][data-tooltip]:after { left: 0; top: 100%; margin-top: 0.5em; } [data-position="bottom left"][data-tooltip]:before { bottom: auto; right: auto; top: 100%; left: 1em; margin-left: -0.07142857rem; margin-top: 0.14285714rem; } /* Bottom Right */ [data-position="bottom right"][data-tooltip]:after { right: 0; top: 100%; margin-top: 0.5em; } [data-position="bottom right"][data-tooltip]:before { bottom: auto; left: auto; top: 100%; right: 1em; margin-left: -0.14285714rem; margin-top: 0.07142857rem; } /* Left Center */ [data-position="left center"][data-tooltip]:after { right: 100%; top: 50%; margin-right: 0.5em; -webkit-transform: translateY(-50%); transform: translateY(-50%); } [data-position="left center"][data-tooltip]:before { right: 100%; top: 50%; margin-top: -0.14285714rem; margin-right: -0.07142857rem; } /* Right Center */ [data-position="right center"][data-tooltip]:after { left: 100%; top: 50%; margin-left: 0.5em; -webkit-transform: translateY(-50%); transform: translateY(-50%); } [data-position="right center"][data-tooltip]:before { left: 100%; top: 50%; margin-top: -0.07142857rem; margin-left: 0.14285714rem; } /* Arrow */ [data-position~="bottom"][data-tooltip]:before { background: #FFFFFF; box-shadow: -1px -1px 0px 0px #bababc; } [data-position="left center"][data-tooltip]:before { background: #FFFFFF; box-shadow: 1px -1px 0px 0px #bababc; } [data-position="right center"][data-tooltip]:before { background: #FFFFFF; box-shadow: -1px 1px 0px 0px #bababc; } [data-position~="top"][data-tooltip]:before { background: #FFFFFF; } /* Inverted Arrow Color */ [data-inverted][data-position~="bottom"][data-tooltip]:before { background: #1B1C1D; box-shadow: -1px -1px 0px 0px #bababc; } [data-inverted][data-position="left center"][data-tooltip]:before { background: #1B1C1D; box-shadow: 1px -1px 0px 0px #bababc; } [data-inverted][data-position="right center"][data-tooltip]:before { background: #1B1C1D; box-shadow: -1px 1px 0px 0px #bababc; } [data-inverted][data-position~="top"][data-tooltip]:before { background: #1B1C1D; } [data-position~="bottom"][data-tooltip]:before { -webkit-transform-origin: center bottom; transform-origin: center bottom; } [data-position~="bottom"][data-tooltip]:after { -webkit-transform-origin: center top; transform-origin: center top; } [data-position="left center"][data-tooltip]:before { -webkit-transform-origin: top center; transform-origin: top center; } [data-position="left center"][data-tooltip]:after { -webkit-transform-origin: right center; transform-origin: right center; } [data-position="right center"][data-tooltip]:before { -webkit-transform-origin: right center; transform-origin: right center; } [data-position="right center"][data-tooltip]:after { -webkit-transform-origin: left center; transform-origin: left center; } /*-------------- Spacing ---------------*/ .ui.popup { margin: 0em; } /* Extending from Top */ .ui.top.popup { margin: 0em 0em 0.71428571em; } .ui.top.left.popup { -webkit-transform-origin: left bottom; transform-origin: left bottom; } .ui.top.center.popup { -webkit-transform-origin: center bottom; transform-origin: center bottom; } .ui.top.right.popup { -webkit-transform-origin: right bottom; transform-origin: right bottom; } /* Extending from Vertical Center */ .ui.left.center.popup { margin: 0em 0.71428571em 0em 0em; -webkit-transform-origin: right 50%; transform-origin: right 50%; } .ui.right.center.popup { margin: 0em 0em 0em 0.71428571em; -webkit-transform-origin: left 50%; transform-origin: left 50%; } /* Extending from Bottom */ .ui.bottom.popup { margin: 0.71428571em 0em 0em; } .ui.bottom.left.popup { -webkit-transform-origin: left top; transform-origin: left top; } .ui.bottom.center.popup { -webkit-transform-origin: center top; transform-origin: center top; } .ui.bottom.right.popup { -webkit-transform-origin: right top; transform-origin: right top; } /*-------------- Pointer ---------------*/ /*--- Below ---*/ .ui.bottom.center.popup:before { margin-left: -0.30714286em; top: -0.30714286em; left: 50%; right: auto; bottom: auto; box-shadow: -1px -1px 0px 0px #bababc; } .ui.bottom.left.popup { margin-left: 0em; } /*rtl:rename*/ .ui.bottom.left.popup:before { top: -0.30714286em; left: 1em; right: auto; bottom: auto; margin-left: 0em; box-shadow: -1px -1px 0px 0px #bababc; } .ui.bottom.right.popup { margin-right: 0em; } /*rtl:rename*/ .ui.bottom.right.popup:before { top: -0.30714286em; right: 1em; bottom: auto; left: auto; margin-left: 0em; box-shadow: -1px -1px 0px 0px #bababc; } /*--- Above ---*/ .ui.top.center.popup:before { top: auto; right: auto; bottom: -0.30714286em; left: 50%; margin-left: -0.30714286em; } .ui.top.left.popup { margin-left: 0em; } /*rtl:rename*/ .ui.top.left.popup:before { bottom: -0.30714286em; left: 1em; top: auto; right: auto; margin-left: 0em; } .ui.top.right.popup { margin-right: 0em; } /*rtl:rename*/ .ui.top.right.popup:before { bottom: -0.30714286em; right: 1em; top: auto; left: auto; margin-left: 0em; } /*--- Left Center ---*/ /*rtl:rename*/ .ui.left.center.popup:before { top: 50%; right: -0.30714286em; bottom: auto; left: auto; margin-top: -0.30714286em; box-shadow: 1px -1px 0px 0px #bababc; } /*--- Right Center ---*/ /*rtl:rename*/ .ui.right.center.popup:before { top: 50%; left: -0.30714286em; bottom: auto; right: auto; margin-top: -0.30714286em; box-shadow: -1px 1px 0px 0px #bababc; } /* Arrow Color By Location */ .ui.bottom.popup:before { background: #FFFFFF; } .ui.right.center.popup:before, .ui.left.center.popup:before { background: #FFFFFF; } .ui.top.popup:before { background: #FFFFFF; } /* Inverted Arrow Color */ .ui.inverted.bottom.popup:before { background: #1B1C1D; } .ui.inverted.right.center.popup:before, .ui.inverted.left.center.popup:before { background: #1B1C1D; } .ui.inverted.top.popup:before { background: #1B1C1D; } /******************************* Coupling *******************************/ /* Immediate Nested Grid */ .ui.popup > .ui.grid:not(.padded) { width: calc(100% + 1.75rem); margin: -0.7rem -0.875rem; } /******************************* States *******************************/ .ui.loading.popup { display: block; visibility: hidden; z-index: -1; } .ui.animating.popup, .ui.visible.popup { display: block; } .ui.visible.popup { -webkit-transform: translateZ(0px); transform: translateZ(0px); -webkit-backface-visibility: hidden; backface-visibility: hidden; } /******************************* Variations *******************************/ /*-------------- Basic ---------------*/ .ui.basic.popup:before { display: none; } /*-------------- Wide ---------------*/ .ui.wide.popup { max-width: 350px; } .ui[class*="very wide"].popup { max-width: 550px; } @media only screen and (max-width: 767px) { .ui.wide.popup, .ui[class*="very wide"].popup { max-width: 250px; } } /*-------------- Fluid ---------------*/ .ui.fluid.popup { width: 100%; max-width: none; } /*-------------- Colors ---------------*/ /* Inverted colors */ .ui.inverted.popup { background: #1B1C1D; color: #FFFFFF; border: none; box-shadow: none; } .ui.inverted.popup .header { background-color: none; color: #FFFFFF; } .ui.inverted.popup:before { background-color: #1B1C1D; box-shadow: none !important; } /*-------------- Flowing ---------------*/ .ui.flowing.popup { max-width: none; } /*-------------- Sizes ---------------*/ .ui.mini.popup { font-size: 0.78571429rem; } .ui.tiny.popup { font-size: 0.85714286rem; } .ui.small.popup { font-size: 0.92857143rem; } .ui.popup { font-size: 1rem; } .ui.large.popup { font-size: 1.14285714rem; } .ui.huge.popup { font-size: 1.42857143rem; } /******************************* Theme Overrides *******************************/ /******************************* User Overrides *******************************/ /*! * # Semantic UI 2.2.6 - Transition * http://github.com/semantic-org/semantic-ui/ * * * Released under the MIT license * http://opensource.org/licenses/MIT * */ /******************************* Transitions *******************************/ .transition { -webkit-animation-iteration-count: 1; animation-iteration-count: 1; -webkit-animation-duration: 300ms; animation-duration: 300ms; -webkit-animation-timing-function: ease; animation-timing-function: ease; -webkit-animation-fill-mode: both; animation-fill-mode: both; } /******************************* States *******************************/ /* Animating */ .animating.transition { -webkit-backface-visibility: hidden; backface-visibility: hidden; visibility: visible !important; } /* Loading */ .loading.transition { position: absolute; top: -99999px; left: -99999px; } /* Hidden */ .hidden.transition { display: none; visibility: hidden; } /* Visible */ .visible.transition { display: block !important; visibility: visible !important; /* backface-visibility: @backfaceVisibility; transform: @use3DAcceleration;*/ } /* Disabled */ .disabled.transition { -webkit-animation-play-state: paused; animation-play-state: paused; } /******************************* Variations *******************************/ .looping.transition { -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; } /******************************* Transitions *******************************/ /* Some transitions adapted from Animate CSS https://github.com/daneden/animate.css Additional transitions adapted from Glide by Nick Pettit - https://github.com/nickpettit/glide */ /*-------------- Browse ---------------*/ .transition.browse { -webkit-animation-duration: 500ms; animation-duration: 500ms; } .transition.browse.in { -webkit-animation-name: browseIn; animation-name: browseIn; } .transition.browse.out, .transition.browse.left.out { -webkit-animation-name: browseOutLeft; animation-name: browseOutLeft; } .transition.browse.right.out { -webkit-animation-name: browseOutRight; animation-name: browseOutRight; } /* In */ @-webkit-keyframes browseIn { 0% { -webkit-transform: scale(0.8) translateZ(0px); transform: scale(0.8) translateZ(0px); z-index: -1; } 10% { -webkit-transform: scale(0.8) translateZ(0px); transform: scale(0.8) translateZ(0px); z-index: -1; opacity: 0.7; } 80% { -webkit-transform: scale(1.05) translateZ(0px); transform: scale(1.05) translateZ(0px); opacity: 1; z-index: 999; } 100% { -webkit-transform: scale(1) translateZ(0px); transform: scale(1) translateZ(0px); z-index: 999; } } @keyframes browseIn { 0% { -webkit-transform: scale(0.8) translateZ(0px); transform: scale(0.8) translateZ(0px); z-index: -1; } 10% { -webkit-transform: scale(0.8) translateZ(0px); transform: scale(0.8) translateZ(0px); z-index: -1; opacity: 0.7; } 80% { -webkit-transform: scale(1.05) translateZ(0px); transform: scale(1.05) translateZ(0px); opacity: 1; z-index: 999; } 100% { -webkit-transform: scale(1) translateZ(0px); transform: scale(1) translateZ(0px); z-index: 999; } } /* Out */ @-webkit-keyframes browseOutLeft { 0% { z-index: 999; -webkit-transform: translateX(0%) rotateY(0deg) rotateX(0deg); transform: translateX(0%) rotateY(0deg) rotateX(0deg); } 50% { z-index: -1; -webkit-transform: translateX(-105%) rotateY(35deg) rotateX(10deg) translateZ(-10px); transform: translateX(-105%) rotateY(35deg) rotateX(10deg) translateZ(-10px); } 80% { opacity: 1; } 100% { z-index: -1; -webkit-transform: translateX(0%) rotateY(0deg) rotateX(0deg) translateZ(-10px); transform: translateX(0%) rotateY(0deg) rotateX(0deg) translateZ(-10px); opacity: 0; } } @keyframes browseOutLeft { 0% { z-index: 999; -webkit-transform: translateX(0%) rotateY(0deg) rotateX(0deg); transform: translateX(0%) rotateY(0deg) rotateX(0deg); } 50% { z-index: -1; -webkit-transform: translateX(-105%) rotateY(35deg) rotateX(10deg) translateZ(-10px); transform: translateX(-105%) rotateY(35deg) rotateX(10deg) translateZ(-10px); } 80% { opacity: 1; } 100% { z-index: -1; -webkit-transform: translateX(0%) rotateY(0deg) rotateX(0deg) translateZ(-10px); transform: translateX(0%) rotateY(0deg) rotateX(0deg) translateZ(-10px); opacity: 0; } } @-webkit-keyframes browseOutRight { 0% { z-index: 999; -webkit-transform: translateX(0%) rotateY(0deg) rotateX(0deg); transform: translateX(0%) rotateY(0deg) rotateX(0deg); } 50% { z-index: 1; -webkit-transform: translateX(105%) rotateY(35deg) rotateX(10deg) translateZ(-10px); transform: translateX(105%) rotateY(35deg) rotateX(10deg) translateZ(-10px); } 80% { opacity: 1; } 100% { z-index: 1; -webkit-transform: translateX(0%) rotateY(0deg) rotateX(0deg) translateZ(-10px); transform: translateX(0%) rotateY(0deg) rotateX(0deg) translateZ(-10px); opacity: 0; } } @keyframes browseOutRight { 0% { z-index: 999; -webkit-transform: translateX(0%) rotateY(0deg) rotateX(0deg); transform: translateX(0%) rotateY(0deg) rotateX(0deg); } 50% { z-index: 1; -webkit-transform: translateX(105%) rotateY(35deg) rotateX(10deg) translateZ(-10px); transform: translateX(105%) rotateY(35deg) rotateX(10deg) translateZ(-10px); } 80% { opacity: 1; } 100% { z-index: 1; -webkit-transform: translateX(0%) rotateY(0deg) rotateX(0deg) translateZ(-10px); transform: translateX(0%) rotateY(0deg) rotateX(0deg) translateZ(-10px); opacity: 0; } } /*-------------- Drop ---------------*/ .drop.transition { -webkit-transform-origin: top center; transform-origin: top center; -webkit-animation-duration: 400ms; animation-duration: 400ms; -webkit-animation-timing-function: cubic-bezier(0.34, 1.61, 0.7, 1); animation-timing-function: cubic-bezier(0.34, 1.61, 0.7, 1); } .drop.transition.in { -webkit-animation-name: dropIn; animation-name: dropIn; } .drop.transition.out { -webkit-animation-name: dropOut; animation-name: dropOut; } /* Drop */ @-webkit-keyframes dropIn { 0% { opacity: 0; -webkit-transform: scale(0); transform: scale(0); } 100% { opacity: 1; -webkit-transform: scale(1); transform: scale(1); } } @keyframes dropIn { 0% { opacity: 0; -webkit-transform: scale(0); transform: scale(0); } 100% { opacity: 1; -webkit-transform: scale(1); transform: scale(1); } } @-webkit-keyframes dropOut { 0% { opacity: 1; -webkit-transform: scale(1); transform: scale(1); } 100% { opacity: 0; -webkit-transform: scale(0); transform: scale(0); } } @keyframes dropOut { 0% { opacity: 1; -webkit-transform: scale(1); transform: scale(1); } 100% { opacity: 0; -webkit-transform: scale(0); transform: scale(0); } } /*-------------- Fade ---------------*/ .transition.fade.in { -webkit-animation-name: fadeIn; animation-name: fadeIn; } .transition[class*="fade up"].in { -webkit-animation-name: fadeInUp; animation-name: fadeInUp; } .transition[class*="fade down"].in { -webkit-animation-name: fadeInDown; animation-name: fadeInDown; } .transition[class*="fade left"].in { -webkit-animation-name: fadeInLeft; animation-name: fadeInLeft; } .transition[class*="fade right"].in { -webkit-animation-name: fadeInRight; animation-name: fadeInRight; } .transition.fade.out { -webkit-animation-name: fadeOut; animation-name: fadeOut; } .transition[class*="fade up"].out { -webkit-animation-name: fadeOutUp; animation-name: fadeOutUp; } .transition[class*="fade down"].out { -webkit-animation-name: fadeOutDown; animation-name: fadeOutDown; } .transition[class*="fade left"].out { -webkit-animation-name: fadeOutLeft; animation-name: fadeOutLeft; } .transition[class*="fade right"].out { -webkit-animation-name: fadeOutRight; animation-name: fadeOutRight; } /* In */ @-webkit-keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } @keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } @-webkit-keyframes fadeInUp { 0% { opacity: 0; -webkit-transform: translateY(10%); transform: translateY(10%); } 100% { opacity: 1; -webkit-transform: translateY(0%); transform: translateY(0%); } } @keyframes fadeInUp { 0% { opacity: 0; -webkit-transform: translateY(10%); transform: translateY(10%); } 100% { opacity: 1; -webkit-transform: translateY(0%); transform: translateY(0%); } } @-webkit-keyframes fadeInDown { 0% { opacity: 0; -webkit-transform: translateY(-10%); transform: translateY(-10%); } 100% { opacity: 1; -webkit-transform: translateY(0%); transform: translateY(0%); } } @keyframes fadeInDown { 0% { opacity: 0; -webkit-transform: translateY(-10%); transform: translateY(-10%); } 100% { opacity: 1; -webkit-transform: translateY(0%); transform: translateY(0%); } } @-webkit-keyframes fadeInLeft { 0% { opacity: 0; -webkit-transform: translateX(10%); transform: translateX(10%); } 100% { opacity: 1; -webkit-transform: translateX(0%); transform: translateX(0%); } } @keyframes fadeInLeft { 0% { opacity: 0; -webkit-transform: translateX(10%); transform: translateX(10%); } 100% { opacity: 1; -webkit-transform: translateX(0%); transform: translateX(0%); } } @-webkit-keyframes fadeInRight { 0% { opacity: 0; -webkit-transform: translateX(-10%); transform: translateX(-10%); } 100% { opacity: 1; -webkit-transform: translateX(0%); transform: translateX(0%); } } @keyframes fadeInRight { 0% { opacity: 0; -webkit-transform: translateX(-10%); transform: translateX(-10%); } 100% { opacity: 1; -webkit-transform: translateX(0%); transform: translateX(0%); } } /* Out */ @-webkit-keyframes fadeOut { 0% { opacity: 1; } 100% { opacity: 0; } } @keyframes fadeOut { 0% { opacity: 1; } 100% { opacity: 0; } } @-webkit-keyframes fadeOutUp { 0% { opacity: 1; -webkit-transform: translateY(0%); transform: translateY(0%); } 100% { opacity: 0; -webkit-transform: translateY(5%); transform: translateY(5%); } } @keyframes fadeOutUp { 0% { opacity: 1; -webkit-transform: translateY(0%); transform: translateY(0%); } 100% { opacity: 0; -webkit-transform: translateY(5%); transform: translateY(5%); } } @-webkit-keyframes fadeOutDown { 0% { opacity: 1; -webkit-transform: translateY(0%); transform: translateY(0%); } 100% { opacity: 0; -webkit-transform: translateY(-5%); transform: translateY(-5%); } } @keyframes fadeOutDown { 0% { opacity: 1; -webkit-transform: translateY(0%); transform: translateY(0%); } 100% { opacity: 0; -webkit-transform: translateY(-5%); transform: translateY(-5%); } } @-webkit-keyframes fadeOutLeft { 0% { opacity: 1; -webkit-transform: translateX(0%); transform: translateX(0%); } 100% { opacity: 0; -webkit-transform: translateX(5%); transform: translateX(5%); } } @keyframes fadeOutLeft { 0% { opacity: 1; -webkit-transform: translateX(0%); transform: translateX(0%); } 100% { opacity: 0; -webkit-transform: translateX(5%); transform: translateX(5%); } } @-webkit-keyframes fadeOutRight { 0% { opacity: 1; -webkit-transform: translateX(0%); transform: translateX(0%); } 100% { opacity: 0; -webkit-transform: translateX(-5%); transform: translateX(-5%); } } @keyframes fadeOutRight { 0% { opacity: 1; -webkit-transform: translateX(0%); transform: translateX(0%); } 100% { opacity: 0; -webkit-transform: translateX(-5%); transform: translateX(-5%); } } /*-------------- Flips ---------------*/ .flip.transition.in, .flip.transition.out { -webkit-animation-duration: 600ms; animation-duration: 600ms; } .horizontal.flip.transition.in { -webkit-animation-name: horizontalFlipIn; animation-name: horizontalFlipIn; } .horizontal.flip.transition.out { -webkit-animation-name: horizontalFlipOut; animation-name: horizontalFlipOut; } .vertical.flip.transition.in { -webkit-animation-name: verticalFlipIn; animation-name: verticalFlipIn; } .vertical.flip.transition.out { -webkit-animation-name: verticalFlipOut; animation-name: verticalFlipOut; } /* In */ @-webkit-keyframes horizontalFlipIn { 0% { -webkit-transform: perspective(2000px) rotateY(-90deg); transform: perspective(2000px) rotateY(-90deg); opacity: 0; } 100% { -webkit-transform: perspective(2000px) rotateY(0deg); transform: perspective(2000px) rotateY(0deg); opacity: 1; } } @keyframes horizontalFlipIn { 0% { -webkit-transform: perspective(2000px) rotateY(-90deg); transform: perspective(2000px) rotateY(-90deg); opacity: 0; } 100% { -webkit-transform: perspective(2000px) rotateY(0deg); transform: perspective(2000px) rotateY(0deg); opacity: 1; } } @-webkit-keyframes verticalFlipIn { 0% { -webkit-transform: perspective(2000px) rotateX(-90deg); transform: perspective(2000px) rotateX(-90deg); opacity: 0; } 100% { -webkit-transform: perspective(2000px) rotateX(0deg); transform: perspective(2000px) rotateX(0deg); opacity: 1; } } @keyframes verticalFlipIn { 0% { -webkit-transform: perspective(2000px) rotateX(-90deg); transform: perspective(2000px) rotateX(-90deg); opacity: 0; } 100% { -webkit-transform: perspective(2000px) rotateX(0deg); transform: perspective(2000px) rotateX(0deg); opacity: 1; } } /* Out */ @-webkit-keyframes horizontalFlipOut { 0% { -webkit-transform: perspective(2000px) rotateY(0deg); transform: perspective(2000px) rotateY(0deg); opacity: 1; } 100% { -webkit-transform: perspective(2000px) rotateY(90deg); transform: perspective(2000px) rotateY(90deg); opacity: 0; } } @keyframes horizontalFlipOut { 0% { -webkit-transform: perspective(2000px) rotateY(0deg); transform: perspective(2000px) rotateY(0deg); opacity: 1; } 100% { -webkit-transform: perspective(2000px) rotateY(90deg); transform: perspective(2000px) rotateY(90deg); opacity: 0; } } @-webkit-keyframes verticalFlipOut { 0% { -webkit-transform: perspective(2000px) rotateX(0deg); transform: perspective(2000px) rotateX(0deg); opacity: 1; } 100% { -webkit-transform: perspective(2000px) rotateX(-90deg); transform: perspective(2000px) rotateX(-90deg); opacity: 0; } } @keyframes verticalFlipOut { 0% { -webkit-transform: perspective(2000px) rotateX(0deg); transform: perspective(2000px) rotateX(0deg); opacity: 1; } 100% { -webkit-transform: perspective(2000px) rotateX(-90deg); transform: perspective(2000px) rotateX(-90deg); opacity: 0; } } /*-------------- Scale ---------------*/ .scale.transition.in { -webkit-animation-name: scaleIn; animation-name: scaleIn; } .scale.transition.out { -webkit-animation-name: scaleOut; animation-name: scaleOut; } @-webkit-keyframes scaleIn { 0% { opacity: 0; -webkit-transform: scale(0.8); transform: scale(0.8); } 100% { opacity: 1; -webkit-transform: scale(1); transform: scale(1); } } @keyframes scaleIn { 0% { opacity: 0; -webkit-transform: scale(0.8); transform: scale(0.8); } 100% { opacity: 1; -webkit-transform: scale(1); transform: scale(1); } } /* Out */ @-webkit-keyframes scaleOut { 0% { opacity: 1; -webkit-transform: scale(1); transform: scale(1); } 100% { opacity: 0; -webkit-transform: scale(0.9); transform: scale(0.9); } } @keyframes scaleOut { 0% { opacity: 1; -webkit-transform: scale(1); transform: scale(1); } 100% { opacity: 0; -webkit-transform: scale(0.9); transform: scale(0.9); } } /*-------------- Fly ---------------*/ /* Inward */ .transition.fly { -webkit-animation-duration: 0.6s; animation-duration: 0.6s; -webkit-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } .transition.fly.in { -webkit-animation-name: flyIn; animation-name: flyIn; } .transition[class*="fly up"].in { -webkit-animation-name: flyInUp; animation-name: flyInUp; } .transition[class*="fly down"].in { -webkit-animation-name: flyInDown; animation-name: flyInDown; } .transition[class*="fly left"].in { -webkit-animation-name: flyInLeft; animation-name: flyInLeft; } .transition[class*="fly right"].in { -webkit-animation-name: flyInRight; animation-name: flyInRight; } /* Outward */ .transition.fly.out { -webkit-animation-name: flyOut; animation-name: flyOut; } .transition[class*="fly up"].out { -webkit-animation-name: flyOutUp; animation-name: flyOutUp; } .transition[class*="fly down"].out { -webkit-animation-name: flyOutDown; animation-name: flyOutDown; } .transition[class*="fly left"].out { -webkit-animation-name: flyOutLeft; animation-name: flyOutLeft; } .transition[class*="fly right"].out { -webkit-animation-name: flyOutRight; animation-name: flyOutRight; } /* In */ @-webkit-keyframes flyIn { 0% { opacity: 0; -webkit-transform: scale3d(0.3, 0.3, 0.3); transform: scale3d(0.3, 0.3, 0.3); } 20% { -webkit-transform: scale3d(1.1, 1.1, 1.1); transform: scale3d(1.1, 1.1, 1.1); } 40% { -webkit-transform: scale3d(0.9, 0.9, 0.9); transform: scale3d(0.9, 0.9, 0.9); } 60% { opacity: 1; -webkit-transform: scale3d(1.03, 1.03, 1.03); transform: scale3d(1.03, 1.03, 1.03); } 80% { -webkit-transform: scale3d(0.97, 0.97, 0.97); transform: scale3d(0.97, 0.97, 0.97); } 100% { opacity: 1; -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } } @keyframes flyIn { 0% { opacity: 0; -webkit-transform: scale3d(0.3, 0.3, 0.3); transform: scale3d(0.3, 0.3, 0.3); } 20% { -webkit-transform: scale3d(1.1, 1.1, 1.1); transform: scale3d(1.1, 1.1, 1.1); } 40% { -webkit-transform: scale3d(0.9, 0.9, 0.9); transform: scale3d(0.9, 0.9, 0.9); } 60% { opacity: 1; -webkit-transform: scale3d(1.03, 1.03, 1.03); transform: scale3d(1.03, 1.03, 1.03); } 80% { -webkit-transform: scale3d(0.97, 0.97, 0.97); transform: scale3d(0.97, 0.97, 0.97); } 100% { opacity: 1; -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } } @-webkit-keyframes flyInUp { 0% { opacity: 0; -webkit-transform: translate3d(0, 1500px, 0); transform: translate3d(0, 1500px, 0); } 60% { opacity: 1; -webkit-transform: translate3d(0, -20px, 0); transform: translate3d(0, -20px, 0); } 75% { -webkit-transform: translate3d(0, 10px, 0); transform: translate3d(0, 10px, 0); } 90% { -webkit-transform: translate3d(0, -5px, 0); transform: translate3d(0, -5px, 0); } 100% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @keyframes flyInUp { 0% { opacity: 0; -webkit-transform: translate3d(0, 1500px, 0); transform: translate3d(0, 1500px, 0); } 60% { opacity: 1; -webkit-transform: translate3d(0, -20px, 0); transform: translate3d(0, -20px, 0); } 75% { -webkit-transform: translate3d(0, 10px, 0); transform: translate3d(0, 10px, 0); } 90% { -webkit-transform: translate3d(0, -5px, 0); transform: translate3d(0, -5px, 0); } 100% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @-webkit-keyframes flyInDown { 0% { opacity: 0; -webkit-transform: translate3d(0, -1500px, 0); transform: translate3d(0, -1500px, 0); } 60% { opacity: 1; -webkit-transform: translate3d(0, 25px, 0); transform: translate3d(0, 25px, 0); } 75% { -webkit-transform: translate3d(0, -10px, 0); transform: translate3d(0, -10px, 0); } 90% { -webkit-transform: translate3d(0, 5px, 0); transform: translate3d(0, 5px, 0); } 100% { -webkit-transform: none; transform: none; } } @keyframes flyInDown { 0% { opacity: 0; -webkit-transform: translate3d(0, -1500px, 0); transform: translate3d(0, -1500px, 0); } 60% { opacity: 1; -webkit-transform: translate3d(0, 25px, 0); transform: translate3d(0, 25px, 0); } 75% { -webkit-transform: translate3d(0, -10px, 0); transform: translate3d(0, -10px, 0); } 90% { -webkit-transform: translate3d(0, 5px, 0); transform: translate3d(0, 5px, 0); } 100% { -webkit-transform: none; transform: none; } } @-webkit-keyframes flyInLeft { 0% { opacity: 0; -webkit-transform: translate3d(1500px, 0, 0); transform: translate3d(1500px, 0, 0); } 60% { opacity: 1; -webkit-transform: translate3d(-25px, 0, 0); transform: translate3d(-25px, 0, 0); } 75% { -webkit-transform: translate3d(10px, 0, 0); transform: translate3d(10px, 0, 0); } 90% { -webkit-transform: translate3d(-5px, 0, 0); transform: translate3d(-5px, 0, 0); } 100% { -webkit-transform: none; transform: none; } } @keyframes flyInLeft { 0% { opacity: 0; -webkit-transform: translate3d(1500px, 0, 0); transform: translate3d(1500px, 0, 0); } 60% { opacity: 1; -webkit-transform: translate3d(-25px, 0, 0); transform: translate3d(-25px, 0, 0); } 75% { -webkit-transform: translate3d(10px, 0, 0); transform: translate3d(10px, 0, 0); } 90% { -webkit-transform: translate3d(-5px, 0, 0); transform: translate3d(-5px, 0, 0); } 100% { -webkit-transform: none; transform: none; } } @-webkit-keyframes flyInRight { 0% { opacity: 0; -webkit-transform: translate3d(-1500px, 0, 0); transform: translate3d(-1500px, 0, 0); } 60% { opacity: 1; -webkit-transform: translate3d(25px, 0, 0); transform: translate3d(25px, 0, 0); } 75% { -webkit-transform: translate3d(-10px, 0, 0); transform: translate3d(-10px, 0, 0); } 90% { -webkit-transform: translate3d(5px, 0, 0); transform: translate3d(5px, 0, 0); } 100% { -webkit-transform: none; transform: none; } } @keyframes flyInRight { 0% { opacity: 0; -webkit-transform: translate3d(-1500px, 0, 0); transform: translate3d(-1500px, 0, 0); } 60% { opacity: 1; -webkit-transform: translate3d(25px, 0, 0); transform: translate3d(25px, 0, 0); } 75% { -webkit-transform: translate3d(-10px, 0, 0); transform: translate3d(-10px, 0, 0); } 90% { -webkit-transform: translate3d(5px, 0, 0); transform: translate3d(5px, 0, 0); } 100% { -webkit-transform: none; transform: none; } } /* Out */ @-webkit-keyframes flyOut { 20% { -webkit-transform: scale3d(0.9, 0.9, 0.9); transform: scale3d(0.9, 0.9, 0.9); } 50%, 55% { opacity: 1; -webkit-transform: scale3d(1.1, 1.1, 1.1); transform: scale3d(1.1, 1.1, 1.1); } 100% { opacity: 0; -webkit-transform: scale3d(0.3, 0.3, 0.3); transform: scale3d(0.3, 0.3, 0.3); } } @keyframes flyOut { 20% { -webkit-transform: scale3d(0.9, 0.9, 0.9); transform: scale3d(0.9, 0.9, 0.9); } 50%, 55% { opacity: 1; -webkit-transform: scale3d(1.1, 1.1, 1.1); transform: scale3d(1.1, 1.1, 1.1); } 100% { opacity: 0; -webkit-transform: scale3d(0.3, 0.3, 0.3); transform: scale3d(0.3, 0.3, 0.3); } } @-webkit-keyframes flyOutUp { 20% { -webkit-transform: translate3d(0, 10px, 0); transform: translate3d(0, 10px, 0); } 40%, 45% { opacity: 1; -webkit-transform: translate3d(0, -20px, 0); transform: translate3d(0, -20px, 0); } 100% { opacity: 0; -webkit-transform: translate3d(0, 2000px, 0); transform: translate3d(0, 2000px, 0); } } @keyframes flyOutUp { 20% { -webkit-transform: translate3d(0, 10px, 0); transform: translate3d(0, 10px, 0); } 40%, 45% { opacity: 1; -webkit-transform: translate3d(0, -20px, 0); transform: translate3d(0, -20px, 0); } 100% { opacity: 0; -webkit-transform: translate3d(0, 2000px, 0); transform: translate3d(0, 2000px, 0); } } @-webkit-keyframes flyOutDown { 20% { -webkit-transform: translate3d(0, -10px, 0); transform: translate3d(0, -10px, 0); } 40%, 45% { opacity: 1; -webkit-transform: translate3d(0, 20px, 0); transform: translate3d(0, 20px, 0); } 100% { opacity: 0; -webkit-transform: translate3d(0, -2000px, 0); transform: translate3d(0, -2000px, 0); } } @keyframes flyOutDown { 20% { -webkit-transform: translate3d(0, -10px, 0); transform: translate3d(0, -10px, 0); } 40%, 45% { opacity: 1; -webkit-transform: translate3d(0, 20px, 0); transform: translate3d(0, 20px, 0); } 100% { opacity: 0; -webkit-transform: translate3d(0, -2000px, 0); transform: translate3d(0, -2000px, 0); } } @-webkit-keyframes flyOutRight { 20% { opacity: 1; -webkit-transform: translate3d(20px, 0, 0); transform: translate3d(20px, 0, 0); } 100% { opacity: 0; -webkit-transform: translate3d(-2000px, 0, 0); transform: translate3d(-2000px, 0, 0); } } @keyframes flyOutRight { 20% { opacity: 1; -webkit-transform: translate3d(20px, 0, 0); transform: translate3d(20px, 0, 0); } 100% { opacity: 0; -webkit-transform: translate3d(-2000px, 0, 0); transform: translate3d(-2000px, 0, 0); } } @-webkit-keyframes flyOutLeft { 20% { opacity: 1; -webkit-transform: translate3d(-20px, 0, 0); transform: translate3d(-20px, 0, 0); } 100% { opacity: 0; -webkit-transform: translate3d(2000px, 0, 0); transform: translate3d(2000px, 0, 0); } } @keyframes flyOutLeft { 20% { opacity: 1; -webkit-transform: translate3d(-20px, 0, 0); transform: translate3d(-20px, 0, 0); } 100% { opacity: 0; -webkit-transform: translate3d(2000px, 0, 0); transform: translate3d(2000px, 0, 0); } } /*-------------- Slide ---------------*/ .transition.slide.in, .transition[class*="slide down"].in { -webkit-animation-name: slideInY; animation-name: slideInY; -webkit-transform-origin: top center; transform-origin: top center; } .transition[class*="slide up"].in { -webkit-animation-name: slideInY; animation-name: slideInY; -webkit-transform-origin: bottom center; transform-origin: bottom center; } .transition[class*="slide left"].in { -webkit-animation-name: slideInX; animation-name: slideInX; -webkit-transform-origin: center right; transform-origin: center right; } .transition[class*="slide right"].in { -webkit-animation-name: slideInX; animation-name: slideInX; -webkit-transform-origin: center left; transform-origin: center left; } .transition.slide.out, .transition[class*="slide down"].out { -webkit-animation-name: slideOutY; animation-name: slideOutY; -webkit-transform-origin: top center; transform-origin: top center; } .transition[class*="slide up"].out { -webkit-animation-name: slideOutY; animation-name: slideOutY; -webkit-transform-origin: bottom center; transform-origin: bottom center; } .transition[class*="slide left"].out { -webkit-animation-name: slideOutX; animation-name: slideOutX; -webkit-transform-origin: center right; transform-origin: center right; } .transition[class*="slide right"].out { -webkit-animation-name: slideOutX; animation-name: slideOutX; -webkit-transform-origin: center left; transform-origin: center left; } /* In */ @-webkit-keyframes slideInY { 0% { opacity: 0; -webkit-transform: scaleY(0); transform: scaleY(0); } 100% { opacity: 1; -webkit-transform: scaleY(1); transform: scaleY(1); } } @keyframes slideInY { 0% { opacity: 0; -webkit-transform: scaleY(0); transform: scaleY(0); } 100% { opacity: 1; -webkit-transform: scaleY(1); transform: scaleY(1); } } @-webkit-keyframes slideInX { 0% { opacity: 0; -webkit-transform: scaleX(0); transform: scaleX(0); } 100% { opacity: 1; -webkit-transform: scaleX(1); transform: scaleX(1); } } @keyframes slideInX { 0% { opacity: 0; -webkit-transform: scaleX(0); transform: scaleX(0); } 100% { opacity: 1; -webkit-transform: scaleX(1); transform: scaleX(1); } } /* Out */ @-webkit-keyframes slideOutY { 0% { opacity: 1; -webkit-transform: scaleY(1); transform: scaleY(1); } 100% { opacity: 0; -webkit-transform: scaleY(0); transform: scaleY(0); } } @keyframes slideOutY { 0% { opacity: 1; -webkit-transform: scaleY(1); transform: scaleY(1); } 100% { opacity: 0; -webkit-transform: scaleY(0); transform: scaleY(0); } } @-webkit-keyframes slideOutX { 0% { opacity: 1; -webkit-transform: scaleX(1); transform: scaleX(1); } 100% { opacity: 0; -webkit-transform: scaleX(0); transform: scaleX(0); } } @keyframes slideOutX { 0% { opacity: 1; -webkit-transform: scaleX(1); transform: scaleX(1); } 100% { opacity: 0; -webkit-transform: scaleX(0); transform: scaleX(0); } } /*-------------- Swing ---------------*/ .transition.swing { -webkit-animation-duration: 800ms; animation-duration: 800ms; } .transition[class*="swing down"].in { -webkit-animation-name: swingInX; animation-name: swingInX; -webkit-transform-origin: top center; transform-origin: top center; } .transition[class*="swing up"].in { -webkit-animation-name: swingInX; animation-name: swingInX; -webkit-transform-origin: bottom center; transform-origin: bottom center; } .transition[class*="swing left"].in { -webkit-animation-name: swingInY; animation-name: swingInY; -webkit-transform-origin: center right; transform-origin: center right; } .transition[class*="swing right"].in { -webkit-animation-name: swingInY; animation-name: swingInY; -webkit-transform-origin: center left; transform-origin: center left; } .transition.swing.out, .transition[class*="swing down"].out { -webkit-animation-name: swingOutX; animation-name: swingOutX; -webkit-transform-origin: top center; transform-origin: top center; } .transition[class*="swing up"].out { -webkit-animation-name: swingOutX; animation-name: swingOutX; -webkit-transform-origin: bottom center; transform-origin: bottom center; } .transition[class*="swing left"].out { -webkit-animation-name: swingOutY; animation-name: swingOutY; -webkit-transform-origin: center right; transform-origin: center right; } .transition[class*="swing right"].out { -webkit-animation-name: swingOutY; animation-name: swingOutY; -webkit-transform-origin: center left; transform-origin: center left; } /* In */ @-webkit-keyframes swingInX { 0% { -webkit-transform: perspective(1000px) rotateX(90deg); transform: perspective(1000px) rotateX(90deg); opacity: 0; } 40% { -webkit-transform: perspective(1000px) rotateX(-30deg); transform: perspective(1000px) rotateX(-30deg); opacity: 1; } 60% { -webkit-transform: perspective(1000px) rotateX(15deg); transform: perspective(1000px) rotateX(15deg); } 80% { -webkit-transform: perspective(1000px) rotateX(-7.5deg); transform: perspective(1000px) rotateX(-7.5deg); } 100% { -webkit-transform: perspective(1000px) rotateX(0deg); transform: perspective(1000px) rotateX(0deg); } } @keyframes swingInX { 0% { -webkit-transform: perspective(1000px) rotateX(90deg); transform: perspective(1000px) rotateX(90deg); opacity: 0; } 40% { -webkit-transform: perspective(1000px) rotateX(-30deg); transform: perspective(1000px) rotateX(-30deg); opacity: 1; } 60% { -webkit-transform: perspective(1000px) rotateX(15deg); transform: perspective(1000px) rotateX(15deg); } 80% { -webkit-transform: perspective(1000px) rotateX(-7.5deg); transform: perspective(1000px) rotateX(-7.5deg); } 100% { -webkit-transform: perspective(1000px) rotateX(0deg); transform: perspective(1000px) rotateX(0deg); } } @-webkit-keyframes swingInY { 0% { -webkit-transform: perspective(1000px) rotateY(-90deg); transform: perspective(1000px) rotateY(-90deg); opacity: 0; } 40% { -webkit-transform: perspective(1000px) rotateY(30deg); transform: perspective(1000px) rotateY(30deg); opacity: 1; } 60% { -webkit-transform: perspective(1000px) rotateY(-17.5deg); transform: perspective(1000px) rotateY(-17.5deg); } 80% { -webkit-transform: perspective(1000px) rotateY(7.5deg); transform: perspective(1000px) rotateY(7.5deg); } 100% { -webkit-transform: perspective(1000px) rotateY(0deg); transform: perspective(1000px) rotateY(0deg); } } @keyframes swingInY { 0% { -webkit-transform: perspective(1000px) rotateY(-90deg); transform: perspective(1000px) rotateY(-90deg); opacity: 0; } 40% { -webkit-transform: perspective(1000px) rotateY(30deg); transform: perspective(1000px) rotateY(30deg); opacity: 1; } 60% { -webkit-transform: perspective(1000px) rotateY(-17.5deg); transform: perspective(1000px) rotateY(-17.5deg); } 80% { -webkit-transform: perspective(1000px) rotateY(7.5deg); transform: perspective(1000px) rotateY(7.5deg); } 100% { -webkit-transform: perspective(1000px) rotateY(0deg); transform: perspective(1000px) rotateY(0deg); } } /* Out */ @-webkit-keyframes swingOutX { 0% { -webkit-transform: perspective(1000px) rotateX(0deg); transform: perspective(1000px) rotateX(0deg); } 40% { -webkit-transform: perspective(1000px) rotateX(-7.5deg); transform: perspective(1000px) rotateX(-7.5deg); } 60% { -webkit-transform: perspective(1000px) rotateX(17.5deg); transform: perspective(1000px) rotateX(17.5deg); } 80% { -webkit-transform: perspective(1000px) rotateX(-30deg); transform: perspective(1000px) rotateX(-30deg); opacity: 1; } 100% { -webkit-transform: perspective(1000px) rotateX(90deg); transform: perspective(1000px) rotateX(90deg); opacity: 0; } } @keyframes swingOutX { 0% { -webkit-transform: perspective(1000px) rotateX(0deg); transform: perspective(1000px) rotateX(0deg); } 40% { -webkit-transform: perspective(1000px) rotateX(-7.5deg); transform: perspective(1000px) rotateX(-7.5deg); } 60% { -webkit-transform: perspective(1000px) rotateX(17.5deg); transform: perspective(1000px) rotateX(17.5deg); } 80% { -webkit-transform: perspective(1000px) rotateX(-30deg); transform: perspective(1000px) rotateX(-30deg); opacity: 1; } 100% { -webkit-transform: perspective(1000px) rotateX(90deg); transform: perspective(1000px) rotateX(90deg); opacity: 0; } } @-webkit-keyframes swingOutY { 0% { -webkit-transform: perspective(1000px) rotateY(0deg); transform: perspective(1000px) rotateY(0deg); } 40% { -webkit-transform: perspective(1000px) rotateY(7.5deg); transform: perspective(1000px) rotateY(7.5deg); } 60% { -webkit-transform: perspective(1000px) rotateY(-10deg); transform: perspective(1000px) rotateY(-10deg); } 80% { -webkit-transform: perspective(1000px) rotateY(30deg); transform: perspective(1000px) rotateY(30deg); opacity: 1; } 100% { -webkit-transform: perspective(1000px) rotateY(-90deg); transform: perspective(1000px) rotateY(-90deg); opacity: 0; } } @keyframes swingOutY { 0% { -webkit-transform: perspective(1000px) rotateY(0deg); transform: perspective(1000px) rotateY(0deg); } 40% { -webkit-transform: perspective(1000px) rotateY(7.5deg); transform: perspective(1000px) rotateY(7.5deg); } 60% { -webkit-transform: perspective(1000px) rotateY(-10deg); transform: perspective(1000px) rotateY(-10deg); } 80% { -webkit-transform: perspective(1000px) rotateY(30deg); transform: perspective(1000px) rotateY(30deg); opacity: 1; } 100% { -webkit-transform: perspective(1000px) rotateY(-90deg); transform: perspective(1000px) rotateY(-90deg); opacity: 0; } } /******************************* Static Animations *******************************/ /*-------------- Emphasis ---------------*/ .flash.transition { -webkit-animation-duration: 750ms; animation-duration: 750ms; -webkit-animation-name: flash; animation-name: flash; } .shake.transition { -webkit-animation-duration: 750ms; animation-duration: 750ms; -webkit-animation-name: shake; animation-name: shake; } .bounce.transition { -webkit-animation-duration: 750ms; animation-duration: 750ms; -webkit-animation-name: bounce; animation-name: bounce; } .tada.transition { -webkit-animation-duration: 750ms; animation-duration: 750ms; -webkit-animation-name: tada; animation-name: tada; } .pulse.transition { -webkit-animation-duration: 500ms; animation-duration: 500ms; -webkit-animation-name: pulse; animation-name: pulse; } .jiggle.transition { -webkit-animation-duration: 750ms; animation-duration: 750ms; -webkit-animation-name: jiggle; animation-name: jiggle; } /* Flash */ @-webkit-keyframes flash { 0%, 50%, 100% { opacity: 1; } 25%, 75% { opacity: 0; } } @keyframes flash { 0%, 50%, 100% { opacity: 1; } 25%, 75% { opacity: 0; } } /* Shake */ @-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); 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); } } /* Bounce */ @-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); transform: translateY(0); } 40% { -webkit-transform: translateY(-30px); transform: translateY(-30px); } 60% { -webkit-transform: translateY(-15px); transform: translateY(-15px); } } /* Tada */ @-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); 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); } } /* Pulse */ @-webkit-keyframes pulse { 0% { -webkit-transform: scale(1); transform: scale(1); opacity: 1; } 50% { -webkit-transform: scale(0.9); transform: scale(0.9); opacity: 0.7; } 100% { -webkit-transform: scale(1); transform: scale(1); opacity: 1; } } @keyframes pulse { 0% { -webkit-transform: scale(1); transform: scale(1); opacity: 1; } 50% { -webkit-transform: scale(0.9); transform: scale(0.9); opacity: 0.7; } 100% { -webkit-transform: scale(1); transform: scale(1); opacity: 1; } } /* Rubberband */ @-webkit-keyframes jiggle { 0% { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } 30% { -webkit-transform: scale3d(1.25, 0.75, 1); transform: scale3d(1.25, 0.75, 1); } 40% { -webkit-transform: scale3d(0.75, 1.25, 1); transform: scale3d(0.75, 1.25, 1); } 50% { -webkit-transform: scale3d(1.15, 0.85, 1); transform: scale3d(1.15, 0.85, 1); } 65% { -webkit-transform: scale3d(0.95, 1.05, 1); transform: scale3d(0.95, 1.05, 1); } 75% { -webkit-transform: scale3d(1.05, 0.95, 1); transform: scale3d(1.05, 0.95, 1); } 100% { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } } @keyframes jiggle { 0% { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } 30% { -webkit-transform: scale3d(1.25, 0.75, 1); transform: scale3d(1.25, 0.75, 1); } 40% { -webkit-transform: scale3d(0.75, 1.25, 1); transform: scale3d(0.75, 1.25, 1); } 50% { -webkit-transform: scale3d(1.15, 0.85, 1); transform: scale3d(1.15, 0.85, 1); } 65% { -webkit-transform: scale3d(0.95, 1.05, 1); transform: scale3d(0.95, 1.05, 1); } 75% { -webkit-transform: scale3d(1.05, 0.95, 1); transform: scale3d(1.05, 0.95, 1); } 100% { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } } /******************************* Site Overrides *******************************/