Document upload service

signaturepage.jpg

diff --git a/src/31new.html b/src/31new.html new file mode 100644 index 0000000..21a6b8a --- /dev/null +++ b/src/31new.html @@ -0,0 +1,86 @@ + + + + + DLS - DEVELOPMENT BUILD + + + + + + + + + + + + + +

+ +

Document upload service

signaturepage.jpg

+ +

Uploading

File size: 378 KB

+ Lorem ipsum dolor sit amet, consec tetur adipiscing elit. +

Cursus euismod quis viverra nibh cras pulvinar mattis nunc. + Bibendum neque egestas congue quisque egestas diam in arcu cursus. +

+ Delete + Replace +

+ Continue +

+ +

What you need to know

Lorem ipsum dolor sit amet.

Sed do eiusmod tempor incididunt ut labore et dolore:

cursus euismod quis viverra
nibh cras pulvinar mattis nunc.

Sed do eiusmod tempor incididunt ut labore et dolore:

cursus euismod quis viverra
nibh cras pulvinar mattis nunc.

Pretium lectus quam id leo in vitae

+ Bibendum neque egestas congue quisque egestas diam in arcu cursus. + Diam vulputate ut pharetra sit amet. Aliquet sagittis id consectetur purus ut faucibus. +

+ + \ No newline at end of file diff --git a/src/33.html b/src/33.html index 7b6737b..9a29320 100644 --- a/src/33.html +++ b/src/33.html @@ -89,7 +89,7 @@

- +

I give consent for these document to be retrieved by Medicare.

diff --git a/src/css/bigstyle.css b/src/css/bigstyle.css index 8461345..b3e3e98 100644 --- a/src/css/bigstyle.css +++ b/src/css/bigstyle.css @@ -49,17 +49,21 @@ --button-border-radius: 0.25rem; --button-border-width: 2px; --input-border-radius: 0.125rem; - --input-border-width: 2px; + --input-border-width: 1px; --input-border-width-active: 2px; --input-border-color: var(--dark-grey); - --input-border-color-hover: var(--black); + --input-border-color-focus: var(--black); --input-border-color-emphasis: var(--dark-grey); --input-border-color-error: var(--system-red-120); --input-border-color-disabled: var(--grey9c-100); /*Application color variables*/ + --body-text-color: var(--black); --link-color: var(--light-navy); + --link-hover-bg: var(--light-navy); + --link-hover-color: var(--white); --default-font-size: var(--font-size-16); --focus-outline-color: var(--black); + --focus-link-outline-color: var(--navy); --error-color: var(--system-red-120); --warning-color: var(--system-yellow-80); --success-color: var(--system-green-80); @@ -730,7 +734,6 @@ body.is-development::before { /* ------------- COLOURS ------------ */ /* ------------- REM ---------------- */ h1, -p, .h1, .smart-search .search-header, .page-mygov-home .smart-search .search-header, @@ -807,10 +810,12 @@ h1, .global-header .wrapper .smart-search .search-header { font-family: "Montserrat", sans-serif; font-weight: 700; - color: #101820; font-size: 36px; - line-height: 40px; + font-size: 2.25rem; letter-spacing: -0.5px; + letter-spacing: -0.03125rem; + line-height: 1.1111111111; + color: #101820; } .page-ausgov-home h1, .page-mygov-home h1, .page-ausgov-home .h1, @@ -824,7 +829,8 @@ h1, .page-mygov-home .global-header .wrapper .smart-search .search-header, .global-header .wrapper .smart-search .page-mygov-home .search-header { font-size: 50px; - line-height: 56px; + font-size: 3.125rem; + line-height: 1.12; } @media only screen and (min-width: 64em) { .page-ausgov-home h1, .page-mygov-home h1, @@ -839,8 +845,10 @@ h1, .page-mygov-home .global-header .wrapper .smart-search .search-header, .global-header .wrapper .smart-search .page-mygov-home .search-header { font-size: 72px; - line-height: 80px; + font-size: 4.5rem; letter-spacing: -1px; + letter-spacing: -0.0625rem; + line-height: 1.1111111111; } } .page-mygov-auth-home h1, @@ -850,23 +858,27 @@ h1, .page-mygov-auth-home .global-header .wrapper .smart-search .search-header, .global-header .wrapper .smart-search .page-mygov-auth-home .search-header { font-size: 50px; - line-height: 56px; + font-size: 3.125rem; + line-height: 1.12; } h2, .h2 { font-family: "Montserrat", sans-serif; font-weight: 700; - color: #101820; font-size: 24px; - line-height: 30px; + font-size: 1.5rem; + line-height: 1.25; + color: #101820; } .page-ausgov-home h2, .page-mygov-home h2, .page-ausgov-home .h2, .page-mygov-home .h2 { font-size: 36px; - line-height: 40px; + font-size: 2.25rem; letter-spacing: -0.5px; + letter-spacing: -0.03125rem; + line-height: 1.1111111111; } .page-mygov-auth-home h2, .page-mygov-auth-content h2, .page-mygov-auth-home .h2, @@ -883,56 +895,62 @@ h3, .h3 { font-family: "Montserrat", sans-serif; font-weight: 700; - color: #101820; font-size: 20px; - line-height: 24px; + font-size: 1.25rem; + line-height: 1.2; + color: #101820; } @media only screen and (min-width: 64em) { h3, .h3 { - line-height: 28px; + line-height: 1.4; } } .page-ausgov-home h3, .page-mygov-home h3, .page-ausgov-home .h3, .page-mygov-home .h3 { font-size: 24px; - line-height: 30px; + font-size: 1.5rem; + line-height: 1.25; } h4, .h4 { font-family: "Montserrat", sans-serif; font-weight: 700; - color: #101820; font-size: 18px; - line-height: 24px; + font-size: 1.125rem; + line-height: 1.3333333333; + color: #101820; } h5, .h5 { font-family: "Montserrat", sans-serif; font-weight: 700; - color: #101820; font-size: 18px; - line-height: 24px; + font-size: 1.125rem; + line-height: 1.3333333333; + color: #101820; } h6, .h6 { font-family: "Montserrat", sans-serif; font-weight: 700; - color: #101820; font-size: 18px; - line-height: 24px; + font-size: 1.125rem; + line-height: 1.3333333333; + color: #101820; } .p { font-family: "Roboto", sans-serif; - color: #525252; font-size: 16px; - line-height: 24px; + font-size: 1rem; + line-height: 1.5; font-weight: normal; + color: #525252; } .theme-dark .p { color: #FFFFFF; @@ -940,10 +958,12 @@ h6, p { font-family: "Roboto", sans-serif; - color: #525252; font-size: 18px; - line-height: 30px; + font-size: 1.125rem; margin: 20px 0; + margin: 1.25rem 0; + line-height: 1.6666666667; + color: #525252; } .theme-dark p { color: #FFFFFF; @@ -951,10 +971,12 @@ p { p b, p strong, p.bold { font-family: "Roboto", sans-serif; - color: #525252; font-size: 18px; - line-height: 30px; + font-size: 1.125rem; margin: 20px 0; + margin: 1.25rem 0; + line-height: 1.6666666667; + color: #525252; font-weight: 700; } .theme-dark p b, @@ -963,10 +985,12 @@ p strong, p.bold { } p.black { font-family: "Roboto", sans-serif; - color: #525252; font-size: 18px; - line-height: 30px; + font-size: 1.125rem; margin: 20px 0; + margin: 1.25rem 0; + line-height: 1.6666666667; + color: #525252; color: #101820; } .theme-dark p.black { @@ -978,10 +1002,11 @@ p.black strong { } p.small { font-family: "Roboto", sans-serif; - color: #525252; font-size: 16px; - line-height: 24px; + font-size: 1rem; + line-height: 1.5; font-weight: normal; + color: #525252; } .theme-dark p.small { color: #FFFFFF; @@ -989,10 +1014,11 @@ p.small { p.small b, p.small strong, p.small.bold { font-family: "Roboto", sans-serif; - color: #525252; font-size: 16px; - line-height: 24px; + font-size: 1rem; + line-height: 1.5; font-weight: normal; + color: #525252; color: #101820; font-weight: 700; } @@ -1006,10 +1032,11 @@ p.small strong, p.small.bold { } p.small.black { font-family: "Roboto", sans-serif; - color: #525252; font-size: 16px; - line-height: 24px; + font-size: 1rem; + line-height: 1.5; font-weight: normal; + color: #525252; color: #101820; } .theme-dark p.small.black { @@ -1018,10 +1045,11 @@ p.small.black { p.small.black b, p.small.black strong { font-family: "Roboto", sans-serif; - color: #525252; font-size: 16px; - line-height: 24px; + font-size: 1rem; + line-height: 1.5; font-weight: normal; + color: #525252; color: #101820; font-weight: 700; } @@ -1036,24 +1064,28 @@ p.small.black strong { .footnote { font-family: "Roboto", sans-serif; - color: #525252; font-size: 16px; - line-height: 24px; + font-size: 1rem; + line-height: 1.5; font-weight: normal; + color: #525252; font-size: 14px; - line-height: 20px; + font-size: 0.875rem; + line-height: 1.3571428571; } .theme-dark .footnote { color: #FFFFFF; } .footnote.black { font-family: "Roboto", sans-serif; - color: #525252; font-size: 16px; - line-height: 24px; + font-size: 1rem; + line-height: 1.5; font-weight: normal; + color: #525252; font-size: 14px; - line-height: 20px; + font-size: 0.875rem; + line-height: 1.3571428571; color: #101820; } .theme-dark .footnote.black { @@ -1066,9 +1098,11 @@ ol { } hr { - border: 0; border-top: 1px solid #DDDDDD; + border-top: 0.0625rem solid #DDDDDD; margin: 60px 0; + margin: 3.75rem 0; + border: 0; } p a { @@ -1133,9 +1167,10 @@ p a { margin: 0 0 1.125rem; } .page-mygov-auth-account h2 { + font-size: 24px; font-size: 1.5rem; font-weight: bold; - line-height: 1.33; + line-height: 1.2083333333; margin: 0 0 1.125rem; } .page-mygov-auth-account h3 { @@ -1289,10 +1324,12 @@ h1, .global-header .wrapper .smart-search .search-header { font-family: "Montserrat", sans-serif; font-weight: 700; - color: #101820; font-size: 36px; - line-height: 40px; + font-size: 2.25rem; letter-spacing: -0.5px; + letter-spacing: -0.03125rem; + line-height: 1.1111111111; + color: #101820; } .page-ausgov-home h1, .page-mygov-home h1, .page-ausgov-home .h1, @@ -1306,7 +1343,8 @@ h1, .page-mygov-home .global-header .wrapper .smart-search .search-header, .global-header .wrapper .smart-search .page-mygov-home .search-header { font-size: 50px; - line-height: 56px; + font-size: 3.125rem; + line-height: 1.12; } @media only screen and (min-width: 64em) { .page-ausgov-home h1, .page-mygov-home h1, @@ -1321,8 +1359,10 @@ h1, .page-mygov-home .global-header .wrapper .smart-search .search-header, .global-header .wrapper .smart-search .page-mygov-home .search-header { font-size: 72px; - line-height: 80px; + font-size: 4.5rem; letter-spacing: -1px; + letter-spacing: -0.0625rem; + line-height: 1.1111111111; } } .page-mygov-auth-home h1, @@ -1332,23 +1372,27 @@ h1, .page-mygov-auth-home .global-header .wrapper .smart-search .search-header, .global-header .wrapper .smart-search .page-mygov-auth-home .search-header { font-size: 50px; - line-height: 56px; + font-size: 3.125rem; + line-height: 1.12; } h2, .h2 { font-family: "Montserrat", sans-serif; font-weight: 700; - color: #101820; font-size: 24px; - line-height: 30px; + font-size: 1.5rem; + line-height: 1.25; + color: #101820; } .page-ausgov-home h2, .page-mygov-home h2, .page-ausgov-home .h2, .page-mygov-home .h2 { font-size: 36px; - line-height: 40px; + font-size: 2.25rem; letter-spacing: -0.5px; + letter-spacing: -0.03125rem; + line-height: 1.1111111111; } .page-mygov-auth-home h2, .page-mygov-auth-content h2, .page-mygov-auth-home .h2, @@ -1365,56 +1409,62 @@ h3, .h3 { font-family: "Montserrat", sans-serif; font-weight: 700; - color: #101820; font-size: 20px; - line-height: 24px; + font-size: 1.25rem; + line-height: 1.2; + color: #101820; } @media only screen and (min-width: 64em) { h3, .h3 { - line-height: 28px; + line-height: 1.4; } } .page-ausgov-home h3, .page-mygov-home h3, .page-ausgov-home .h3, .page-mygov-home .h3 { font-size: 24px; - line-height: 30px; + font-size: 1.5rem; + line-height: 1.25; } h4, .h4 { font-family: "Montserrat", sans-serif; font-weight: 700; - color: #101820; font-size: 18px; - line-height: 24px; + font-size: 1.125rem; + line-height: 1.3333333333; + color: #101820; } h5, .h5 { font-family: "Montserrat", sans-serif; font-weight: 700; - color: #101820; font-size: 18px; - line-height: 24px; + font-size: 1.125rem; + line-height: 1.3333333333; + color: #101820; } h6, .h6 { font-family: "Montserrat", sans-serif; font-weight: 700; - color: #101820; font-size: 18px; - line-height: 24px; + font-size: 1.125rem; + line-height: 1.3333333333; + color: #101820; } .p { font-family: "Roboto", sans-serif; - color: #525252; font-size: 16px; - line-height: 24px; + font-size: 1rem; + line-height: 1.5; font-weight: normal; + color: #525252; } .theme-dark .p { color: #FFFFFF; @@ -1422,10 +1472,12 @@ h6, p { font-family: "Roboto", sans-serif; - color: #525252; font-size: 18px; - line-height: 30px; + font-size: 1.125rem; margin: 20px 0; + margin: 1.25rem 0; + line-height: 1.6666666667; + color: #525252; } .theme-dark p { color: #FFFFFF; @@ -1433,10 +1485,12 @@ p { p b, p strong, p.bold { font-family: "Roboto", sans-serif; - color: #525252; font-size: 18px; - line-height: 30px; + font-size: 1.125rem; margin: 20px 0; + margin: 1.25rem 0; + line-height: 1.6666666667; + color: #525252; font-weight: 700; } .theme-dark p b, @@ -1445,10 +1499,12 @@ p strong, p.bold { } p.black { font-family: "Roboto", sans-serif; - color: #525252; font-size: 18px; - line-height: 30px; + font-size: 1.125rem; margin: 20px 0; + margin: 1.25rem 0; + line-height: 1.6666666667; + color: #525252; color: #101820; } .theme-dark p.black { @@ -1460,10 +1516,11 @@ p.black strong { } p.small { font-family: "Roboto", sans-serif; - color: #525252; font-size: 16px; - line-height: 24px; + font-size: 1rem; + line-height: 1.5; font-weight: normal; + color: #525252; } .theme-dark p.small { color: #FFFFFF; @@ -1471,10 +1528,11 @@ p.small { p.small b, p.small strong, p.small.bold { font-family: "Roboto", sans-serif; - color: #525252; font-size: 16px; - line-height: 24px; + font-size: 1rem; + line-height: 1.5; font-weight: normal; + color: #525252; color: #101820; font-weight: 700; } @@ -1488,10 +1546,11 @@ p.small strong, p.small.bold { } p.small.black { font-family: "Roboto", sans-serif; - color: #525252; font-size: 16px; - line-height: 24px; + font-size: 1rem; + line-height: 1.5; font-weight: normal; + color: #525252; color: #101820; } .theme-dark p.small.black { @@ -1500,10 +1559,11 @@ p.small.black { p.small.black b, p.small.black strong { font-family: "Roboto", sans-serif; - color: #525252; font-size: 16px; - line-height: 24px; + font-size: 1rem; + line-height: 1.5; font-weight: normal; + color: #525252; color: #101820; font-weight: 700; } @@ -1518,24 +1578,28 @@ p.small.black strong { .footnote { font-family: "Roboto", sans-serif; - color: #525252; font-size: 16px; - line-height: 24px; + font-size: 1rem; + line-height: 1.5; font-weight: normal; + color: #525252; font-size: 14px; - line-height: 20px; + font-size: 0.875rem; + line-height: 1.3571428571; } .theme-dark .footnote { color: #FFFFFF; } .footnote.black { font-family: "Roboto", sans-serif; - color: #525252; font-size: 16px; - line-height: 24px; + font-size: 1rem; + line-height: 1.5; font-weight: normal; + color: #525252; font-size: 14px; - line-height: 20px; + font-size: 0.875rem; + line-height: 1.3571428571; color: #101820; } .theme-dark .footnote.black { @@ -1548,9 +1612,11 @@ ol { } hr { - border: 0; border-top: 1px solid #DDDDDD; + border-top: 0.0625rem solid #DDDDDD; margin: 60px 0; + margin: 3.75rem 0; + border: 0; } p a { @@ -2122,10 +2188,11 @@ dl dd p { } .cmp-text small { font-family: "Roboto", sans-serif; - color: #525252; font-size: 16px; - line-height: 24px; + font-size: 1rem; + line-height: 1.5; font-weight: normal; + color: #525252; color: #101820; } .theme-dark .cmp-text small { @@ -2134,10 +2201,11 @@ dl dd p { .cmp-text small b, .cmp-text small strong { font-family: "Roboto", sans-serif; - color: #525252; font-size: 16px; - line-height: 24px; + font-size: 1rem; + line-height: 1.5; font-weight: normal; + color: #525252; color: #101820; font-weight: 700; } @@ -2176,12 +2244,14 @@ dl dd p { } .cmp-image__title { font-family: "Roboto", sans-serif; - color: #525252; font-size: 16px; - line-height: 24px; + font-size: 1rem; + line-height: 1.5; font-weight: normal; + color: #525252; font-size: 14px; - line-height: 20px; + font-size: 0.875rem; + line-height: 1.3571428571; display: block; padding: 20px 0; border-bottom: 1px solid #DDDDDD; @@ -2325,10 +2395,11 @@ dl dd p { .inbox-ul-list > li > a, .inbox-ul-list > li > label { font-family: "Roboto", sans-serif; - color: #525252; font-size: 16px; - line-height: 24px; + font-size: 1rem; + line-height: 1.5; font-weight: normal; + color: #525252; color: #101820; display: block; margin: 0; @@ -2345,10 +2416,11 @@ dl dd p { .inbox-ul-list > li > label b, .inbox-ul-list > li > label strong { font-family: "Roboto", sans-serif; - color: #525252; font-size: 16px; - line-height: 24px; + font-size: 1rem; + line-height: 1.5; font-weight: normal; + color: #525252; color: #101820; font-weight: 700; } @@ -2415,10 +2487,11 @@ dl dd p { .inbox-ul-folder-list > li > a, .inbox-ul-folder-list > li > label { font-family: "Roboto", sans-serif; - color: #525252; font-size: 16px; - line-height: 24px; + font-size: 1rem; + line-height: 1.5; font-weight: normal; + color: #525252; color: #101820; display: block; margin: 0; @@ -2437,10 +2510,11 @@ dl dd p { .inbox-ul-folder-list > li > label b, .inbox-ul-folder-list > li > label strong { font-family: "Roboto", sans-serif; - color: #525252; font-size: 16px; - line-height: 24px; + font-size: 1rem; + line-height: 1.5; font-weight: normal; + color: #525252; color: #101820; font-weight: 700; } @@ -2514,12 +2588,16 @@ dl dd p { } .inbox-ul-folder-list > li > a::before, .inbox-ul-folder-list > li > label::before { + width: 20px; + width: 1.25rem; + height: 20px; + height: 1.25rem; + min-width: 20px; + min-width: 1.25rem; content: ""; position: absolute; top: 0; left: 0; - width: 20px; - height: 20px; background-size: contain; background-position: center; background-repeat: no-repeat; @@ -2534,6 +2612,10 @@ dl dd p { .inbox-ul-folder-list > li > label.is-trash::before { background-image: url("styles/resources/assets/icons/authenticated/icon-trash.svg"); } +.inbox-ul-folder-list > li > a.top-level-inbox::before, +.inbox-ul-folder-list > li > label.top-level-inbox::before { + background-image: url("styles/resources/assets/icons/icon-email.svg"); +} .inbox-ul-folder-list > li > a.is-selected, .inbox-ul-folder-list > li > label.is-selected { background: #E5F1FD; @@ -2805,8 +2887,10 @@ dl dd p { } } -.updateContactDetails .update-details-tile .update-details-tile__header div.heading, -.updateContactDetails .update-details-tile > .update-details-tile__wrapper .update-details-tile__header div.heading, .updateContactDetails .update-notification-tile .header div.heading { +body .updateContactDetails .update-details-tile .tile__header div.heading, +body .updateContactDetails .update-details-tile > .tile__wrapper .tile__header div.heading, +.page-mygov-auth-account .updateContactDetails .update-details-tile .tile__header div.heading, +.page-mygov-auth-account .updateContactDetails .update-details-tile > .tile__wrapper .tile__header div.heading { font-family: "Roboto", sans-serif; font-size: 16px; line-height: 1.15; @@ -2815,15 +2899,17 @@ dl dd p { display: flex; flex-wrap: wrap; } -.updateContactDetails .update-details-tile .update-details-tile__header div.heading strong, -.updateContactDetails .update-details-tile > .update-details-tile__wrapper .update-details-tile__header div.heading strong, .updateContactDetails .update-notification-tile .header div.heading strong { +body .updateContactDetails .update-details-tile .tile__header div.heading strong, +body .updateContactDetails .update-details-tile > .tile__wrapper .tile__header div.heading strong, +.page-mygov-auth-account .updateContactDetails .update-details-tile .tile__header div.heading strong { font-size: 16px; line-height: 1.15; margin: 0; color: #000000; } -.updateContactDetails .update-details-tile .update-details-tile__header div.heading > h3, -.updateContactDetails .update-details-tile > .update-details-tile__wrapper .update-details-tile__header div.heading > h3, .updateContactDetails .update-notification-tile .header div.heading > h3 { +body .updateContactDetails .update-details-tile .tile__header div.heading > h3, +body .updateContactDetails .update-details-tile > .tile__wrapper .tile__header div.heading > h3, +.page-mygov-auth-account .updateContactDetails .update-details-tile .tile__header div.heading > h3 { font-family: "Roboto", sans-serif; font-size: 16px; line-height: 1.15; @@ -2831,15 +2917,17 @@ dl dd p { margin: 0; font-weight: 700; } -.updateContactDetails .update-details-tile .update-details-tile__header div.heading > h3 strong, -.updateContactDetails .update-details-tile > .update-details-tile__wrapper .update-details-tile__header div.heading > h3 strong, .updateContactDetails .update-notification-tile .header div.heading > h3 strong { +body .updateContactDetails .update-details-tile .tile__header div.heading > h3 strong, +body .updateContactDetails .update-details-tile > .tile__wrapper .tile__header div.heading > h3 strong, +.page-mygov-auth-account .updateContactDetails .update-details-tile .tile__header div.heading > h3 strong { font-size: 16px; line-height: 1.15; margin: 0; color: #000000; } -.updateContactDetails .update-details-tile .update-details-tile__header div.heading > p, -.updateContactDetails .update-details-tile > .update-details-tile__wrapper .update-details-tile__header div.heading > p, .updateContactDetails .update-notification-tile .header div.heading > p { +body .updateContactDetails .update-details-tile .tile__header div.heading > p, +body .updateContactDetails .update-details-tile > .tile__wrapper .tile__header div.heading > p, +.page-mygov-auth-account .updateContactDetails .update-details-tile .tile__header div.heading > p { font-family: "Roboto", sans-serif; font-size: 16px; line-height: 1.15; @@ -2847,8 +2935,9 @@ dl dd p { margin: 0; font-weight: 400; } -.updateContactDetails .update-details-tile .update-details-tile__header div.heading > p strong, -.updateContactDetails .update-details-tile > .update-details-tile__wrapper .update-details-tile__header div.heading > p strong, .updateContactDetails .update-notification-tile .header div.heading > p strong { +body .updateContactDetails .update-details-tile .tile__header div.heading > p strong, +body .updateContactDetails .update-details-tile > .tile__wrapper .tile__header div.heading > p strong, +.page-mygov-auth-account .updateContactDetails .update-details-tile .tile__header div.heading > p strong { font-size: 16px; line-height: 1.15; margin: 0; @@ -2904,9 +2993,16 @@ dl dd p { } .page-mygov-auth-account .disclosure-summary img { position: relative; - margin-left: 0.5em; - bottom: 0.2em; - height: 0.5em; + margin-left: 2px; + margin-left: 0.125rem; + bottom: -2px; + height: 1em; +} +.page-mygov-auth-account .disclosure-summary img.opened { + content: url(styles/resources/assets/icons/ia/chevron-up-light-navy.svg); +} +.page-mygov-auth-account .disclosure-summary img.closed { + content: url(styles/resources/assets/icons/ia/chevron-down-light-navy.svg); } .page-mygov-auth-account .authored-disclosure-content ul { padding-left: 1rem; @@ -3240,10 +3336,11 @@ dl dd p { text-align: left; border-bottom: 1px solid #CCCCCC; font-family: "Roboto", sans-serif; - color: #525252; font-size: 16px; - line-height: 24px; + font-size: 1rem; + line-height: 1.5; font-weight: normal; + color: #525252; color: #666666; padding: 30px 30px 30px 0px; line-height: 1.25; @@ -3287,6 +3384,7 @@ dl dd p { margin-left: 12.5px; margin-left: 0.78125rem; background-size: contain; + background-repeat: no-repeat; position: static; display: none; } @@ -3317,6 +3415,9 @@ dl dd p { font-size: 14px; font-size: 0.875rem; } +.smartbanner__info__author { + display: none; +} .smartbanner, .smartbanner.smartbanner--android { height: 80px; height: 5rem; @@ -3390,6 +3491,15 @@ dl dd p { } } +html[style="margin-top: 0px;"] .smartbanner { + display: none; +} +@media only screen and (min-width: 48em) { + html[data-smartbanner-original-margin-top] { + margin-top: 0 !important; + } +} + /* ------------- FORM ------------- */ fieldset { border: none; @@ -3429,10 +3539,11 @@ fieldset { } .input-group--sort.input-group label { font-family: "Roboto", sans-serif; - color: #525252; font-size: 16px; - line-height: 24px; + font-size: 1rem; + line-height: 1.5; font-weight: normal; + color: #525252; color: #101820; padding: 20px 5px 20px 27px; top: initial; @@ -3445,10 +3556,11 @@ fieldset { .input-group--sort.input-group label b, .input-group--sort.input-group label strong { font-family: "Roboto", sans-serif; - color: #525252; font-size: 16px; - line-height: 24px; + font-size: 1rem; + line-height: 1.5; font-weight: normal; + color: #525252; color: #101820; font-weight: 700; } @@ -3461,12 +3573,16 @@ fieldset { color: #FFFFFF; } .input-group--sort.input-group label::before { - content: ""; + width: 20px; + width: 1.25rem; + height: 20px; + height: 1.25rem; + min-width: 20px; + min-width: 1.25rem; + content: ""; position: absolute; top: 0; left: 0; - width: 20px; - height: 20px; background-size: contain; background-position: center; background-repeat: no-repeat; @@ -3478,13 +3594,14 @@ fieldset { } .input-group--sort.input-group select { font-family: "Roboto", sans-serif; - color: #525252; font-size: 16px; - line-height: 24px; + font-size: 1rem; + line-height: 1.5; font-weight: normal; + color: #525252; font-weight: 500; margin: 0; - padding: 5px 25px 5px 10px; + padding: 5px 0px 5px 10px; color: #006CE0; border: 0; background-size: 15px 15px; @@ -3521,12 +3638,14 @@ fieldset { } .input-group label { font-family: "Roboto", sans-serif; - color: #525252; font-size: 16px; - line-height: 24px; + font-size: 1rem; + line-height: 1.5; font-weight: normal; + color: #525252; font-size: 14px; - line-height: 20px; + font-size: 0.875rem; + line-height: 1.3571428571; color: #101820; font-weight: 700; } @@ -3535,10 +3654,12 @@ fieldset { } .input-group legend { font-family: "Roboto", sans-serif; - color: #525252; font-size: 18px; - line-height: 30px; + font-size: 1.125rem; margin: 20px 0; + margin: 1.25rem 0; + line-height: 1.6666666667; + color: #525252; color: #101820; margin: 0; font-weight: 700; @@ -3755,12 +3876,16 @@ fieldset { } .input-group input[type=checkbox][type=checkbox] + .check::after, .input-group input[type=radio][type=checkbox] + .check::after { + width: 18px; + width: 1.125rem; + height: 18px; + height: 1.125rem; + min-width: 18px; + min-width: 1.125rem; content: ""; position: absolute; top: 0; right: 0; - width: 18px; - height: 18px; background-size: contain; background-position: center; background-repeat: no-repeat; @@ -3804,10 +3929,11 @@ fieldset { } .input-group .hint-text { font-family: "Roboto", sans-serif; - color: #525252; font-size: 16px; - line-height: 24px; + font-size: 1rem; + line-height: 1.5; font-weight: normal; + color: #525252; margin: 3px 0 5px; font-size: 14px; } @@ -3920,8 +4046,6 @@ fieldset { min-width: 19px; min-width: 1.1875rem; display: block; - height: 19px; - width: 19px; background-size: contain; background-position: center; background-repeat: no-repeat; @@ -3965,10 +4089,11 @@ fieldset { } .input-group .custom-input__mobile .dropdown-menu__menu a { font-family: "Roboto", sans-serif; - color: #525252; font-size: 16px; - line-height: 24px; + font-size: 1rem; + line-height: 1.5; font-weight: normal; + color: #525252; color: #101820; width: 100%; height: 50px; @@ -3979,10 +4104,11 @@ fieldset { .input-group .custom-input__mobile .dropdown-menu__menu a b, .input-group .custom-input__mobile .dropdown-menu__menu a strong { font-family: "Roboto", sans-serif; - color: #525252; font-size: 16px; - line-height: 24px; + font-size: 1rem; + line-height: 1.5; font-weight: normal; + color: #525252; color: #101820; font-weight: 700; } @@ -4162,10 +4288,11 @@ fieldset .input-group:first-child { } .dropdown-menu__menu a { font-family: "Roboto", sans-serif; - color: #525252; font-size: 16px; - line-height: 24px; + font-size: 1rem; + line-height: 1.5; font-weight: normal; + color: #525252; color: #101820; display: flex; align-items: center; @@ -4186,10 +4313,11 @@ fieldset .input-group:first-child { .dropdown-menu__menu a b, .dropdown-menu__menu a strong { font-family: "Roboto", sans-serif; - color: #525252; font-size: 16px; - line-height: 24px; + font-size: 1rem; + line-height: 1.5; font-weight: normal; + color: #525252; color: #101820; font-weight: 700; } @@ -4222,12 +4350,16 @@ fieldset .input-group:first-child { right: 0; } .action-menu__button { + width: 30px; + width: 1.875rem; + height: 30px; + height: 1.875rem; + min-width: 30px; + min-width: 1.875rem; content: ""; position: absolute; top: 0; right: 0; - width: 30px; - height: 30px; background-size: contain; background-position: center; background-repeat: no-repeat; @@ -4241,6 +4373,7 @@ fieldset .input-group:first-child { top: 0; right: 0; z-index: 402; + transform: rotate(90deg); } .action-menu__button:hover, .action-menu__button:focus { background-color: #FFFFFF; @@ -4274,12 +4407,16 @@ fieldset .input-group:first-child { border-color: #183052; } .action-menu__button-with-label::after { + width: 30px; + width: 1.875rem; + height: 30px; + height: 1.875rem; + min-width: 30px; + min-width: 1.875rem; content: ""; position: absolute; top: 0; right: 0; - width: 30px; - height: 30px; background-size: contain; background-position: center; background-repeat: no-repeat; @@ -4292,6 +4429,7 @@ fieldset .input-group:first-child { border-radius: 7px; border: 2px solid transparent; transition: border 150ms; + transform: rotate(90deg); } .action-menu__menu { position: absolute; @@ -4332,10 +4470,11 @@ fieldset .input-group:first-child { .action-menu__menu > ul > li > a, .action-menu__menu > ul > li > label { font-family: "Roboto", sans-serif; - color: #525252; font-size: 16px; - line-height: 24px; + font-size: 1rem; + line-height: 1.5; font-weight: normal; + color: #525252; color: #101820; display: block; margin: 0; @@ -4352,10 +4491,11 @@ fieldset .input-group:first-child { .action-menu__menu > ul > li > label b, .action-menu__menu > ul > li > label strong { font-family: "Roboto", sans-serif; - color: #525252; font-size: 16px; - line-height: 24px; + font-size: 1rem; + line-height: 1.5; font-weight: normal; + color: #525252; color: #101820; font-weight: 700; } @@ -4417,12 +4557,16 @@ fieldset .input-group:first-child { border-bottom: 1px solid transparent; } .action-menu__menu a[role=menuitem]::before { + width: 20px; + width: 1.25rem; + height: 20px; + height: 1.25rem; + min-width: 20px; + min-width: 1.25rem; content: ""; position: absolute; top: 0; left: 0; - width: 20px; - height: 20px; background-size: contain; background-position: center; background-repeat: no-repeat; @@ -4470,10 +4614,11 @@ fieldset .input-group:first-child { font-size: 0.875rem; } .page-mygov-auth-account div .error-message { + display: flex; margin-top: 0.75em; } .page-mygov-auth-account div .error-message::before { - content: url("../img/error.png"); + content: url("styles/resources/assets/icons/error-oct-red.svg"); position: relative; left: 0px; top: 0px; @@ -4524,30 +4669,22 @@ fieldset .input-group:first-child { height: 3rem; width: 4rem; border: solid var(--input-border-width) var(--input-border-color); - border-radius: solid 1px var(--input-border-radius); - /* &:hover { - border: solid var(--input-border-width-active) - var(--input-border-color-hover); - } */ - /* &:active, - &:focus { - border: solid var(--input-border-width-active) - var(--input-border-color-emphasis); - } */ + border-radius: var(--input-border-radius); } .page-mygov-auth-account .current-password-input:focus-visible, .page-mygov-auth-account .password-input:focus-visible, .page-mygov-auth-account input:focus-visible:not([type=checkbox]), .page-mygov-auth-account input:focus-visible:not([type=radio]) { outline: none; } +.page-mygov-auth-account .current-password-input:focus, +.page-mygov-auth-account .password-input:focus, .page-mygov-auth-account input:focus:not([type=checkbox]), .page-mygov-auth-account input:focus:not([type=radio]) { + border-width: var(--input-border-width-active); + outline: solid var(--input-border-width-active) var(--input-border-color-focus); + outline-offset: 2px; + outline-offset: 0.125rem; +} .page-mygov-auth-account [disabled].current-password-input, .page-mygov-auth-account [disabled].password-input, .page-mygov-auth-account input[disabled]:not([type=checkbox]), .page-mygov-auth-account input[disabled]:not([type=radio]) { border: solid var(--input-border-width) var(--input-border-color-disabled); - /* &:hover, - &:active, - &:focus { - border: solid var(--input-border-width) - var(--input-border-color-disabled); - } */ } .page-mygov-auth-account .stretch.current-password-input, .page-mygov-auth-account .stretch.password-input, .page-mygov-auth-account input.stretch:not([type=checkbox]), .page-mygov-auth-account input.stretch:not([type=radio]) { @@ -4572,6 +4709,10 @@ fieldset .input-group:first-child { border-color: var(--input-border-radius); border-width: var(--input-border-width); } +.page-mygov-auth-account input:not(.current-password-input).ng-untouched:focus, +.page-mygov-auth-account input :not(.password-input).ng-untouched:focus { + border-width: var(--input-border-width-active); +} .page-mygov-auth-account input::-ms-reveal, .page-mygov-auth-account input::-ms-clear { display: none; } @@ -4593,6 +4734,7 @@ fieldset .input-group:first-child { .page-mygov-auth-account .current-password-input.invalid-input, .page-mygov-auth-account .password-input.invalid-input { border-color: var(--input-border-color-error); + border-width: var(--input-border-width-active); } .page-mygov-auth-account .current-password-show, .page-mygov-auth-account .password-show { @@ -4641,68 +4783,54 @@ fieldset .input-group:first-child { } .page-mygov-auth-account .show-password button[type=button].invalid-input { border-color: var(--input-border-color-error); -} - -.page-mygov-auth-account a.btn[class=btn]:hover, -.page-mygov-auth-account button.btn[class=btn]:hover, .page-mygov-auth-account a.btn.secondary:hover, -.page-mygov-auth-account button.btn.secondary:hover, .page-mygov-auth-account a.btn.primary:hover, -.page-mygov-auth-account button.btn.primary:hover, .page-mygov-auth-account a.btn--tertiary:hover, -.page-mygov-auth-account button.btn--tertiary:hover, .page-mygov-auth-account a.btn--secondary:hover, -.page-mygov-auth-account button.btn--secondary:hover, .page-mygov-auth-account a.btn--primary:hover, -.page-mygov-auth-account button.btn--primary:hover, .page-mygov-auth-account a.btn[class=btn]:focus, -.page-mygov-auth-account button.btn[class=btn]:focus, .page-mygov-auth-account a.btn.secondary:focus, -.page-mygov-auth-account button.btn.secondary:focus, .page-mygov-auth-account a.btn.primary:focus, -.page-mygov-auth-account button.btn.primary:focus, .page-mygov-auth-account a.btn--tertiary:focus, -.page-mygov-auth-account button.btn--tertiary:focus, .page-mygov-auth-account a.btn--secondary:focus, -.page-mygov-auth-account button.btn--secondary:focus, .page-mygov-auth-account a.btn--primary:focus, -.page-mygov-auth-account button.btn--primary:focus, .page-mygov-auth-account a[aria-checked=true].btn[class=btn], -.page-mygov-auth-account button[aria-checked=true].btn[class=btn], .page-mygov-auth-account a[aria-checked=true].btn.secondary, -.page-mygov-auth-account button[aria-checked=true].btn.secondary, .page-mygov-auth-account a[aria-checked=true].btn.primary, -.page-mygov-auth-account button[aria-checked=true].btn.primary, .page-mygov-auth-account a[aria-checked=true].btn--tertiary, -.page-mygov-auth-account button[aria-checked=true].btn--tertiary, .page-mygov-auth-account a[aria-checked=true].btn--secondary, -.page-mygov-auth-account button[aria-checked=true].btn--secondary, .page-mygov-auth-account a[aria-checked=true].btn--primary, -.page-mygov-auth-account button[aria-checked=true].btn--primary { + border-width: var(--input-border-width-active); +} + +[class=btn].btn.ia-btn:hover, .page-mygov-auth-account a[class=btn].btn:hover, +.page-mygov-auth-account button[class=btn].btn:hover, .btn--tertiary.btn.ia-btn:hover, .page-mygov-auth-account a.btn--tertiary.btn:hover, +.page-mygov-auth-account button.btn--tertiary.btn:hover, .btn--secondary.btn.ia-btn:hover, .page-mygov-auth-account a.btn--secondary.btn:hover, +.page-mygov-auth-account button.btn--secondary.btn:hover, .btn--primary.btn.ia-btn:hover, .page-mygov-auth-account a.btn--primary.btn:hover, +.page-mygov-auth-account button.btn--primary.btn:hover, [aria-checked=true][class=btn].btn.ia-btn, .page-mygov-auth-account a[aria-checked=true][class=btn].btn, +.page-mygov-auth-account button[aria-checked=true][class=btn].btn, [aria-checked=true].btn--tertiary.btn.ia-btn, .page-mygov-auth-account a[aria-checked=true].btn--tertiary.btn, +.page-mygov-auth-account button[aria-checked=true].btn--tertiary.btn, [aria-checked=true].btn--secondary.btn.ia-btn, .page-mygov-auth-account a[aria-checked=true].btn--secondary.btn, +.page-mygov-auth-account button[aria-checked=true].btn--secondary.btn, [aria-checked=true].btn--primary.btn.ia-btn, .page-mygov-auth-account a[aria-checked=true].btn--primary.btn, +.page-mygov-auth-account button[aria-checked=true].btn--primary.btn { background: var(--light-navy); color: var(--white); text-decoration: none; border: 2px solid transparent; border: 0.125rem solid transparent; } -.page-mygov-auth-account a.btn[class=btn]:focus, -.page-mygov-auth-account button.btn[class=btn]:focus, .page-mygov-auth-account a.btn.secondary:focus, -.page-mygov-auth-account button.btn.secondary:focus, .page-mygov-auth-account a.btn.primary:focus, -.page-mygov-auth-account button.btn.primary:focus, .page-mygov-auth-account a.btn--tertiary:focus, -.page-mygov-auth-account button.btn--tertiary:focus, .page-mygov-auth-account a.btn--secondary:focus, -.page-mygov-auth-account button.btn--secondary:focus, .page-mygov-auth-account a.btn--primary:focus, -.page-mygov-auth-account button.btn--primary:focus, .page-mygov-auth-account a[aria-checked=true].btn[class=btn], -.page-mygov-auth-account button[aria-checked=true].btn[class=btn], .page-mygov-auth-account a[aria-checked=true].btn.secondary, -.page-mygov-auth-account button[aria-checked=true].btn.secondary, .page-mygov-auth-account a[aria-checked=true].btn.primary, -.page-mygov-auth-account button[aria-checked=true].btn.primary, .page-mygov-auth-account a[aria-checked=true].btn--tertiary, -.page-mygov-auth-account button[aria-checked=true].btn--tertiary, .page-mygov-auth-account a[aria-checked=true].btn--secondary, -.page-mygov-auth-account button[aria-checked=true].btn--secondary, .page-mygov-auth-account a[aria-checked=true].btn--primary, -.page-mygov-auth-account button[aria-checked=true].btn--primary { +[class=btn].btn.ia-btn:focus, .page-mygov-auth-account a[class=btn].btn:focus, +.page-mygov-auth-account button[class=btn].btn:focus, .btn--tertiary.btn.ia-btn:focus, .page-mygov-auth-account a.btn--tertiary.btn:focus, +.page-mygov-auth-account button.btn--tertiary.btn:focus, .btn--secondary.btn.ia-btn:focus, .page-mygov-auth-account a.btn--secondary.btn:focus, +.page-mygov-auth-account button.btn--secondary.btn:focus, .btn--primary.btn.ia-btn:focus, .page-mygov-auth-account a.btn--primary.btn:focus, +.page-mygov-auth-account button.btn--primary.btn:focus, [aria-checked=true][class=btn].btn.ia-btn, .page-mygov-auth-account a[aria-checked=true][class=btn].btn, +.page-mygov-auth-account button[aria-checked=true][class=btn].btn, [aria-checked=true].btn--tertiary.btn.ia-btn, .page-mygov-auth-account a[aria-checked=true].btn--tertiary.btn, +.page-mygov-auth-account button[aria-checked=true].btn--tertiary.btn, [aria-checked=true].btn--secondary.btn.ia-btn, .page-mygov-auth-account a[aria-checked=true].btn--secondary.btn, +.page-mygov-auth-account button[aria-checked=true].btn--secondary.btn, [aria-checked=true].btn--primary.btn.ia-btn, .page-mygov-auth-account a[aria-checked=true].btn--primary.btn, +.page-mygov-auth-account button[aria-checked=true].btn--primary.btn { outline: 2px solid var(--navy); outline: 0.125rem solid var(--navy); } -.page-mygov-auth-account a[disabled].btn[class=btn], -.page-mygov-auth-account button[disabled].btn[class=btn], .page-mygov-auth-account a[disabled].btn.secondary, -.page-mygov-auth-account button[disabled].btn.secondary, .page-mygov-auth-account a[disabled].btn.primary, -.page-mygov-auth-account button[disabled].btn.primary, .page-mygov-auth-account a[disabled].btn--tertiary, -.page-mygov-auth-account button[disabled].btn--tertiary, .page-mygov-auth-account a[disabled].btn--secondary, -.page-mygov-auth-account button[disabled].btn--secondary, .page-mygov-auth-account a[disabled].btn--primary, -.page-mygov-auth-account button[disabled].btn--primary { +[disabled][class=btn].btn.ia-btn, .page-mygov-auth-account a[disabled][class=btn].btn, +.page-mygov-auth-account button[disabled][class=btn].btn, [disabled].btn--tertiary.btn.ia-btn, .page-mygov-auth-account a[disabled].btn--tertiary.btn, +.page-mygov-auth-account button[disabled].btn--tertiary.btn, [disabled].btn--secondary.btn.ia-btn, .page-mygov-auth-account a[disabled].btn--secondary.btn, +.page-mygov-auth-account button[disabled].btn--secondary.btn, [disabled].btn--primary.btn.ia-btn, .page-mygov-auth-account a[disabled].btn--primary.btn, +.page-mygov-auth-account button[disabled].btn--primary.btn { color: var(--grey9c-100); background-color: var(--grey1c-100); } - -.page-mygov-auth-account button:hover, .page-mygov-auth-account button:focus { - cursor: pointer; -} -.page-mygov-auth-account button:hover[disabled], .page-mygov-auth-account button:focus[disabled] { - cursor: not-allowed; - border-color: #A0A0A3; +[class=btn].btn.ia-btn:active, .page-mygov-auth-account a[class=btn].btn:active, +.page-mygov-auth-account button[class=btn].btn:active, .btn--tertiary.btn.ia-btn:active, .page-mygov-auth-account a.btn--tertiary.btn:active, +.page-mygov-auth-account button.btn--tertiary.btn:active, .btn--secondary.btn.ia-btn:active, .page-mygov-auth-account a.btn--secondary.btn:active, +.page-mygov-auth-account button.btn--secondary.btn:active, .btn--primary.btn.ia-btn:active, .page-mygov-auth-account a.btn--primary.btn:active, +.page-mygov-auth-account button.btn--primary.btn:active { + background: var(--navy); + color: var(--white); } -.page-mygov-auth-account a.btn, + +.btn.ia-btn, .page-mygov-auth-account a.btn, .page-mygov-auth-account button.btn { font-family: var(--family-roboto); font-style: var(--style-normal); @@ -4713,7 +4841,6 @@ fieldset .input-group:first-child { min-width: 10rem; height: 50px; height: 3.125rem; - background: var(--ocean-blue-40); font-weight: 500; font-size: var(--default-font-size); display: inline-block; @@ -4728,94 +4855,51 @@ fieldset .input-group:first-child { border-radius: var(--button-border-radius); transition-property: background, color, padding, margin; transition-duration: 150ms; + white-space: nowrap; } @media (max-width: 639px) { - .page-mygov-auth-account a.btn, + .btn.ia-btn, .page-mygov-auth-account a.btn, .page-mygov-auth-account button.btn { display: block; width: 100%; } } -.page-mygov-auth-account a.btn--primary, -.page-mygov-auth-account button.btn--primary { - color: var(--darker-navy); -} -.page-mygov-auth-account a.btn--primary:focus, -.page-mygov-auth-account button.btn--primary:focus { +.btn--primary.btn.ia-btn, .page-mygov-auth-account a.btn--primary.btn, +.page-mygov-auth-account button.btn--primary.btn { background: var(--ocean-blue-40); - color: var(--navy); - border: 2px solid transparent; - border: 0.125rem solid transparent; - outline: 2px solid var(--navy); - outline: 0.125rem solid var(--navy); -} -.page-mygov-auth-account a.btn--primary:active, -.page-mygov-auth-account button.btn--primary:active { - background: var(--navy); - color: var(--white); - outline: none; + color: var(--darker-navy); } -.page-mygov-auth-account a.btn--secondary, -.page-mygov-auth-account button.btn--secondary { +.btn--secondary.btn.ia-btn, .page-mygov-auth-account a.btn--secondary.btn, +.page-mygov-auth-account button.btn--secondary.btn { border: 2px solid var(--darker-navy); border: 0.125rem solid var(--darker-navy); background: var(--white); color: var(--darker-navy); } -.page-mygov-auth-account a.btn--secondary[disabled], -.page-mygov-auth-account button.btn--secondary[disabled] { +.btn--secondary[disabled].btn.ia-btn, .page-mygov-auth-account a.btn--secondary[disabled].btn, +.page-mygov-auth-account button.btn--secondary[disabled].btn { border: 2px solid var(--grey4c-100); border: 0.125rem solid var(--grey4c-100); } -.page-mygov-auth-account a.btn--secondary:focus, -.page-mygov-auth-account button.btn--secondary:focus { - background-color: var(--white); - color: var(--navy); - border: 2px solid var(--darker-navy); - border: 0.125rem solid var(--darker-navy); -} -.page-mygov-auth-account a.btn--secondary:active, -.page-mygov-auth-account button.btn--secondary:active { - background: var(--navy); - color: var(--white); - outline: none; -} -.page-mygov-auth-account a.btn--tertiary, -.page-mygov-auth-account button.btn--tertiary { +.btn--tertiary.btn.ia-btn, .page-mygov-auth-account a.btn--tertiary.btn, +.page-mygov-auth-account button.btn--tertiary.btn { border: 2px solid var(--grey4c-100); border: 0.125rem solid var(--grey4c-100); background: var(--white); color: var(--navy); font-weight: normal; } -.page-mygov-auth-account a.btn--tertiary[disabled], -.page-mygov-auth-account button.btn--tertiary[disabled] { - border: 2px solid var(--grey4c-100); - border: 0.125rem solid var(--grey4c-100); - background: var(--white); -} -.page-mygov-auth-account a.btn--tertiary:focus, -.page-mygov-auth-account button.btn--tertiary:focus { - background-color: var(--white); - color: var(--navy); - outline: 2px solid var(--navy); - outline: 0.125rem solid var(--navy); +.btn--tertiary[disabled].btn.ia-btn, .page-mygov-auth-account a.btn--tertiary[disabled].btn, +.page-mygov-auth-account button.btn--tertiary[disabled].btn { border: 2px solid var(--grey4c-100); border: 0.125rem solid var(--grey4c-100); } -.page-mygov-auth-account a.btn--tertiary:active, -.page-mygov-auth-account button.btn--tertiary:active { - background: var(--navy); - color: var(--white); - outline: none; - border: 2px solid transparent; - border: 0.125rem solid transparent; +.page-mygov-auth-account button:hover, .page-mygov-auth-account button:focus { + cursor: pointer; } -.page-mygov-auth-account .btn-group { - gap: 12px; - gap: 0.75rem; - display: flex; - flex-wrap: wrap; +.page-mygov-auth-account button:hover[disabled], .page-mygov-auth-account button:focus[disabled] { + cursor: not-allowed; + border-color: #A0A0A3; } .page-mygov-auth-account .return-link { padding: 3px; @@ -4900,12 +4984,41 @@ fieldset .input-group:first-child { right: 0; left: 0; bottom: 0; - border: solid 2px var(--black); + border-style: solid; + border-color: var(--black); + border-width: 2px; + border-width: 0.125rem; border-radius: 3px; + border-radius: 0.1875rem; } .page-mygov-auth-account .checkbox input:focus:checked ~ .label::after { border-color: var(--light-navy); } +.page-mygov-auth-account .checkbox input.ng-invalid:not(.ng-untouched) ~ .label::after { + position: absolute; + content: ""; + top: 0; + right: 0; + left: 0; + bottom: 0; + border-style: solid; + border-color: var(--black); + border-width: 2px; + border-width: 0.125rem; + border-radius: 3px; + border-radius: 0.1875rem; +} +.page-mygov-auth-account .checkbox input.ng-invalid:not(.ng-untouched):focus ~ .label::after { + outline: solid var(--input-border-width-active) var(--input-border-color-focus); + outline-offset: 2px; + outline-offset: 0.125rem; +} +.page-mygov-auth-account .checkbox input.ng-invalid:not(.ng-untouched) ~ .label::after { + border-color: var(--input-border-color-error); +} +.page-mygov-auth-account .checkbox input.ng-invalid:not(.ng-untouched):checked ~ .label::after { + border-color: var(--input-border-color-error); +} .page-mygov-auth-account .checkbox input:active ~ .checkmark { border: 2px solid var(--light-navy); } @@ -4931,9 +5044,22 @@ fieldset .input-group:first-child { border: solid 1px transparent; margin-right: 12px; margin-right: 0.75rem; + margin-left: 2px; + margin-left: 0.125rem; + margin-bottom: 2px; + margin-bottom: 0.125rem; /* span for label*/ /* span for tickmark */ } +.page-mygov-auth-account .radio-button-group { + padding-right: 2px; + padding-right: 0.125rem; +} +.page-mygov-auth-account .radio-button-group.ng-invalid:not(.ng-untouched) { + border: solid var(--input-border-width-active) var(--input-border-color-error); + border-radius: 3px; + border-radius: 0.1875rem; +} .page-mygov-auth-account .radio-button:last-of-type { margin-right: 0; } @@ -4999,12 +5125,41 @@ fieldset .input-group:first-child { right: 0; left: 0; bottom: 0; - border: solid 2px var(--black); + border-style: solid; + border-color: var(--black); + border-width: 2px; + border-width: 0.125rem; border-radius: 3px; + border-radius: 0.1875rem; } .page-mygov-auth-account .radio-button input:focus:checked ~ .label::after { border-color: var(--light-navy); } +.page-mygov-auth-account .radio-button input.ng-invalid:not(.ng-untouched) ~ .label::after { + position: absolute; + content: ""; + top: 0; + right: 0; + left: 0; + bottom: 0; + border-style: solid; + border-color: var(--black); + border-width: 2px; + border-width: 0.125rem; + border-radius: 3px; + border-radius: 0.1875rem; +} +.page-mygov-auth-account .radio-button input.ng-invalid:not(.ng-untouched):focus ~ .label::after { + outline: solid var(--input-border-width-active) var(--input-border-color-focus); + outline-offset: 2px; + outline-offset: 0.125rem; +} +.page-mygov-auth-account .radio-button input.ng-invalid:not(.ng-untouched) ~ .label::after { + border-color: var(--input-border-color-error); +} +.page-mygov-auth-account .radio-button input.ng-invalid:not(.ng-untouched):checked ~ .label::after { + border-color: var(--input-border-color-error); +} .page-mygov-auth-account .radio-button input:active ~ .mark { border: 2px solid var(--light-navy); } @@ -5022,6 +5177,27 @@ fieldset .input-group:first-child { .page-mygov-auth-account .main-layout { display: block; } +.page-mygov-auth-account .layout-shell.w-670, +.page-mygov-auth-account .main-layout.w-670 { + max-width: none; +} +@media only screen and (min-width: 64em) { + .page-mygov-auth-account .layout-shell.w-670, +.page-mygov-auth-account .main-layout.w-670 { + max-width: 670px; + max-width: 41.875rem; + } +} +.page-mygov-auth-account .layout-shell.center, +.page-mygov-auth-account .main-layout.center { + margin: none; +} +@media only screen and (min-width: 64em) { + .page-mygov-auth-account .layout-shell.center, +.page-mygov-auth-account .main-layout.center { + margin: auto; + } +} .success_error_page_container { display: flex; @@ -5087,6 +5263,9 @@ fieldset .input-group:first-child { height: 1px; overflow: hidden; } +.page-mygov-auth-account fieldset.d-inline-block { + display: inline-block; +} .custom-datepicker { display: flex; @@ -5130,8 +5309,6 @@ fieldset .input-group:first-child { min-width: 30px; min-width: 1.875rem; display: block; - height: 30px; - width: 30px; background-size: contain; background-position: center; background-repeat: no-repeat; @@ -5179,12 +5356,16 @@ fieldset .input-group:first-child { border-color: transparent; } .input-group .react-datepicker__navigation--previous { + width: 16px; + width: 1rem; + height: 16px; + height: 1rem; + min-width: 16px; + min-width: 1rem; content: ""; position: absolute; top: 0; right: 0; - width: 16px; - height: 16px; background-size: contain; background-position: center; background-repeat: no-repeat; @@ -5197,12 +5378,16 @@ fieldset .input-group:first-child { left: 15px; } .input-group .react-datepicker__navigation--next { + width: 16px; + width: 1rem; + height: 16px; + height: 1rem; + min-width: 16px; + min-width: 1rem; content: ""; position: absolute; top: 0; right: 0; - width: 16px; - height: 16px; background-size: contain; background-position: center; background-repeat: no-repeat; @@ -5218,16 +5403,20 @@ fieldset .input-group:first-child { } .input-group .react-datepicker__current-month { font-family: "Roboto", sans-serif; - color: #525252; font-size: 18px; - line-height: 30px; + font-size: 1.125rem; margin: 20px 0; + margin: 1.25rem 0; + line-height: 1.6666666667; + color: #525252; font-weight: 700; font-family: "Roboto", sans-serif; - color: #525252; font-size: 18px; - line-height: 30px; + font-size: 1.125rem; margin: 20px 0; + margin: 1.25rem 0; + line-height: 1.6666666667; + color: #525252; color: #101820; margin: 0; font-size: 16px; @@ -5250,10 +5439,11 @@ fieldset .input-group:first-child { } .input-group .react-datepicker__day-name { font-family: "Roboto", sans-serif; - color: #525252; font-size: 16px; - line-height: 24px; + font-size: 1rem; + line-height: 1.5; font-weight: normal; + color: #525252; line-height: 1.8; height: 35px; width: 35px; @@ -5267,10 +5457,11 @@ fieldset .input-group:first-child { } .input-group .react-datepicker__day { font-family: "Roboto", sans-serif; - color: #525252; font-size: 16px; - line-height: 24px; + font-size: 1rem; + line-height: 1.5; font-weight: normal; + color: #525252; color: #101820; display: inline-flex; justify-content: center; @@ -5288,10 +5479,11 @@ fieldset .input-group:first-child { .input-group .react-datepicker__day b, .input-group .react-datepicker__day strong { font-family: "Roboto", sans-serif; - color: #525252; font-size: 16px; - line-height: 24px; + font-size: 1rem; + line-height: 1.5; font-weight: normal; + color: #525252; color: #101820; font-weight: 700; } @@ -5355,10 +5547,11 @@ fieldset .input-group:first-child { } .form-error__message p { font-family: "Roboto", sans-serif; - color: #525252; font-size: 16px; - line-height: 24px; + font-size: 1rem; + line-height: 1.5; font-weight: normal; + color: #525252; color: #101820; font-weight: 700; color: #FFFFFF; @@ -5388,10 +5581,11 @@ fieldset .input-group:first-child { } .form-error__links ul li a { font-family: "Roboto", sans-serif; - color: #525252; font-size: 16px; - line-height: 24px; + font-size: 1rem; + line-height: 1.5; font-weight: normal; + color: #525252; color: #006CE0; } .theme-dark .form-error__links ul li a { @@ -5457,15 +5651,13 @@ fieldset .input-group:first-child { .change-pin-tile, .signin-options-tile, .secret-questions-answers-tile { + padding: 6px 20px; + padding: 0.375rem 1.25rem; display: flex; flex-direction: column; background-color: #FFFFFF; - box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.25); - border-radius: 5px; - max-width: 927px; - padding: 10px; - margin-bottom: 20px; - margin-top: 32px; + border-bottom: 1px solid #D9D9D6; + border-bottom: 0.0625rem solid #D9D9D6; } .account-settings-generic-tile__header, .change-inbox-notification-tile__header, @@ -5527,7 +5719,183 @@ fieldset .input-group:first-child { margin: 0; line-height: 20px; } -@media only screen and (min-width: 40em) { +.account-settings-generic-tile__container, +.change-inbox-notification-tile__container, +.change-password-tile__container, +.update-details-tile__container, +.close-my-account-tile__container, +.change-pin-tile__container, +.signin-options-tile__container, +.secret-questions-answers-tile__container { + display: flex; + align-items: center; + justify-content: flex-start; +} +@media (max-width: 639px) { + .account-settings-generic-tile__container, +.change-inbox-notification-tile__container, +.change-password-tile__container, +.update-details-tile__container, +.close-my-account-tile__container, +.change-pin-tile__container, +.signin-options-tile__container, +.secret-questions-answers-tile__container { + flex-direction: column; + align-items: flex-start; + } + .account-settings-generic-tile__container p, +.change-inbox-notification-tile__container p, +.change-password-tile__container p, +.update-details-tile__container p, +.close-my-account-tile__container p, +.change-pin-tile__container p, +.signin-options-tile__container p, +.secret-questions-answers-tile__container p { + margin: 0; + } +} +.account-settings-generic-tile__container .heading, +.change-inbox-notification-tile__container .heading, +.change-password-tile__container .heading, +.update-details-tile__container .heading, +.close-my-account-tile__container .heading, +.change-pin-tile__container .heading, +.signin-options-tile__container .heading, +.secret-questions-answers-tile__container .heading { + min-width: 22.5%; +} +.account-settings-generic-tile__container .link.highlight, .account-settings-generic-tile__container .highlight.linked-services__rightInternalLink, +.change-inbox-notification-tile__container .link.highlight, +.change-inbox-notification-tile__container .highlight.linked-services__rightInternalLink, +.change-password-tile__container .link.highlight, +.change-password-tile__container .highlight.linked-services__rightInternalLink, +.update-details-tile__container .link.highlight, +.update-details-tile__container .highlight.linked-services__rightInternalLink, +.close-my-account-tile__container .link.highlight, +.close-my-account-tile__container .highlight.linked-services__rightInternalLink, +.change-pin-tile__container .link.highlight, +.change-pin-tile__container .highlight.linked-services__rightInternalLink, +.signin-options-tile__container .link.highlight, +.signin-options-tile__container .highlight.linked-services__rightInternalLink, +.secret-questions-answers-tile__container .link.highlight, +.secret-questions-answers-tile__container .highlight.linked-services__rightInternalLink { + padding: 10px; + padding: 0.625rem; + border-radius: 2px; + border-radius: 0.125rem; + font-size: 15px; + font-size: 0.9375rem; + text-decoration: none; + border: 1px solid #183052; + border: 0.0625rem solid #183052; + color: #183052; + line-height: 1.2; + white-space: nowrap; + margin-left: auto; +} +@media (max-width: 639px) { + .account-settings-generic-tile__container .link.highlight, .account-settings-generic-tile__container .highlight.linked-services__rightInternalLink, +.change-inbox-notification-tile__container .link.highlight, +.change-inbox-notification-tile__container .highlight.linked-services__rightInternalLink, +.change-password-tile__container .link.highlight, +.change-password-tile__container .highlight.linked-services__rightInternalLink, +.update-details-tile__container .link.highlight, +.update-details-tile__container .highlight.linked-services__rightInternalLink, +.close-my-account-tile__container .link.highlight, +.close-my-account-tile__container .highlight.linked-services__rightInternalLink, +.change-pin-tile__container .link.highlight, +.change-pin-tile__container .highlight.linked-services__rightInternalLink, +.signin-options-tile__container .link.highlight, +.signin-options-tile__container .highlight.linked-services__rightInternalLink, +.secret-questions-answers-tile__container .link.highlight, +.secret-questions-answers-tile__container .highlight.linked-services__rightInternalLink { + margin-top: 12px; + margin-top: 0.75rem; + margin-left: 0; + } +} +.account-settings-generic-tile__container .link.highlight::after, .account-settings-generic-tile__container .highlight.linked-services__rightInternalLink::after, +.change-inbox-notification-tile__container .link.highlight::after, +.change-inbox-notification-tile__container .highlight.linked-services__rightInternalLink::after, +.change-password-tile__container .link.highlight::after, +.change-password-tile__container .highlight.linked-services__rightInternalLink::after, +.update-details-tile__container .link.highlight::after, +.update-details-tile__container .highlight.linked-services__rightInternalLink::after, +.close-my-account-tile__container .link.highlight::after, +.close-my-account-tile__container .highlight.linked-services__rightInternalLink::after, +.change-pin-tile__container .link.highlight::after, +.change-pin-tile__container .highlight.linked-services__rightInternalLink::after, +.signin-options-tile__container .link.highlight::after, +.signin-options-tile__container .highlight.linked-services__rightInternalLink::after, +.secret-questions-answers-tile__container .link.highlight::after, +.secret-questions-answers-tile__container .highlight.linked-services__rightInternalLink::after { + display: none; +} +.account-settings-generic-tile__container .link.highlight span.linkIcon, .account-settings-generic-tile__container .highlight.linked-services__rightInternalLink span.linkIcon, +.change-inbox-notification-tile__container .link.highlight span.linkIcon, +.change-inbox-notification-tile__container .highlight.linked-services__rightInternalLink span.linkIcon, +.change-password-tile__container .link.highlight span.linkIcon, +.change-password-tile__container .highlight.linked-services__rightInternalLink span.linkIcon, +.update-details-tile__container .link.highlight span.linkIcon, +.update-details-tile__container .highlight.linked-services__rightInternalLink span.linkIcon, +.close-my-account-tile__container .link.highlight span.linkIcon, +.close-my-account-tile__container .highlight.linked-services__rightInternalLink span.linkIcon, +.change-pin-tile__container .link.highlight span.linkIcon, +.change-pin-tile__container .highlight.linked-services__rightInternalLink span.linkIcon, +.signin-options-tile__container .link.highlight span.linkIcon, +.signin-options-tile__container .highlight.linked-services__rightInternalLink span.linkIcon, +.secret-questions-answers-tile__container .link.highlight span.linkIcon, +.secret-questions-answers-tile__container .highlight.linked-services__rightInternalLink span.linkIcon { + margin-right: 10px; + margin-right: 0.625rem; + width: 12px; + width: 0.75rem; + height: 12px; + height: 0.75rem; + display: inline-block; + background: no-repeat; + background-image: url("styles/resources/assets/icons/edit-icon.svg"); + background-size: contain; + background-position: center; +} +.account-settings-generic-tile__container .link.highlight:hover, .account-settings-generic-tile__container .highlight.linked-services__rightInternalLink:hover, +.change-inbox-notification-tile__container .link.highlight:hover, +.change-inbox-notification-tile__container .highlight.linked-services__rightInternalLink:hover, +.change-password-tile__container .link.highlight:hover, +.change-password-tile__container .highlight.linked-services__rightInternalLink:hover, +.update-details-tile__container .link.highlight:hover, +.update-details-tile__container .highlight.linked-services__rightInternalLink:hover, +.close-my-account-tile__container .link.highlight:hover, +.close-my-account-tile__container .highlight.linked-services__rightInternalLink:hover, +.change-pin-tile__container .link.highlight:hover, +.change-pin-tile__container .highlight.linked-services__rightInternalLink:hover, +.signin-options-tile__container .link.highlight:hover, +.signin-options-tile__container .highlight.linked-services__rightInternalLink:hover, +.secret-questions-answers-tile__container .link.highlight:hover, +.secret-questions-answers-tile__container .highlight.linked-services__rightInternalLink:hover { + background-color: #254A7E; + color: #FFFFFF; + border: 1px solid #254A7E; + border: 0.0625rem solid #254A7E; +} +.account-settings-generic-tile__container .link.highlight:hover span.linkIcon, .account-settings-generic-tile__container .highlight.linked-services__rightInternalLink:hover span.linkIcon, +.change-inbox-notification-tile__container .link.highlight:hover span.linkIcon, +.change-inbox-notification-tile__container .highlight.linked-services__rightInternalLink:hover span.linkIcon, +.change-password-tile__container .link.highlight:hover span.linkIcon, +.change-password-tile__container .highlight.linked-services__rightInternalLink:hover span.linkIcon, +.update-details-tile__container .link.highlight:hover span.linkIcon, +.update-details-tile__container .highlight.linked-services__rightInternalLink:hover span.linkIcon, +.close-my-account-tile__container .link.highlight:hover span.linkIcon, +.close-my-account-tile__container .highlight.linked-services__rightInternalLink:hover span.linkIcon, +.change-pin-tile__container .link.highlight:hover span.linkIcon, +.change-pin-tile__container .highlight.linked-services__rightInternalLink:hover span.linkIcon, +.signin-options-tile__container .link.highlight:hover span.linkIcon, +.signin-options-tile__container .highlight.linked-services__rightInternalLink:hover span.linkIcon, +.secret-questions-answers-tile__container .link.highlight:hover span.linkIcon, +.secret-questions-answers-tile__container .highlight.linked-services__rightInternalLink:hover span.linkIcon { + background-image: url("styles/resources/assets/icons/edit-icon-white.svg"); +} +@media (max-width: 639px) { .account-settings-generic-tile, .change-inbox-notification-tile, .change-password-tile, @@ -5536,40 +5904,105 @@ fieldset .input-group:first-child { .change-pin-tile, .signin-options-tile, .secret-questions-answers-tile { - padding: 20px 20px 15px 25px; + padding: 20px 20px; + padding: 1.25rem 1.25rem; } } -.update-details-tile .update-details-tile__wrapper { +.update-details-tile .tile__wrapper { display: flex; flex-direction: column; flex: 1 1 auto; } -.update-details-tile .update-details-tile__wrapper .update-details-tile__header { +.update-details-tile .tile__wrapper .tile__header { display: flex; flex-flow: row nowrap; align-items: center; justify-content: space-between; } -.update-details-tile .update-details-tile__wrapper .update-details-tile__header a { +.update-details-tile .tile__wrapper .tile__header a { white-space: nowrap; } -.update-details-tile .update-details-tile__wrapper .update-details-tile__header .heading { +.update-details-tile .tile__wrapper .tile__header .heading { margin-top: 0; margin-bottom: 5px; font-weight: bold; flex-basis: 70%; } @media only screen and (min-width: 40em) { - .update-details-tile .update-details-tile__wrapper .update-details-tile__header .heading { + .update-details-tile .tile__wrapper .tile__header .heading { flex-basis: auto; } } -.update-details-tile .update-details-tile__wrapper .update-details-tile__content p { +.update-details-tile .tile__wrapper .update-details-tile__content p { font-size: 14px; margin: 0; line-height: 20px; } +.update-details-tile .tile__wrapper__container { + display: flex; + align-items: center; + justify-content: flex-start; +} +@media (max-width: 639px) { + .update-details-tile .tile__wrapper__container { + flex-direction: column; + align-items: flex-start; + } + .update-details-tile .tile__wrapper__container p { + margin: 0; + } +} +.update-details-tile .tile__wrapper__container .heading { + min-width: 22.5%; +} +.update-details-tile .tile__wrapper__container .link.highlight, .update-details-tile .tile__wrapper__container .highlight.linked-services__rightInternalLink { + padding: 10px; + padding: 0.625rem; + border-radius: 2px; + border-radius: 0.125rem; + font-size: 15px; + font-size: 0.9375rem; + text-decoration: none; + border: 1px solid #183052; + border: 0.0625rem solid #183052; + color: #183052; + line-height: 1.2; + white-space: nowrap; + margin-left: auto; +} +@media (max-width: 639px) { + .update-details-tile .tile__wrapper__container .link.highlight, .update-details-tile .tile__wrapper__container .highlight.linked-services__rightInternalLink { + margin-top: 12px; + margin-top: 0.75rem; + margin-left: 0; + } +} +.update-details-tile .tile__wrapper__container .link.highlight::after, .update-details-tile .tile__wrapper__container .highlight.linked-services__rightInternalLink::after { + display: none; +} +.update-details-tile .tile__wrapper__container .link.highlight span.linkIcon, .update-details-tile .tile__wrapper__container .highlight.linked-services__rightInternalLink span.linkIcon { + margin-right: 10px; + margin-right: 0.625rem; + width: 12px; + width: 0.75rem; + height: 12px; + height: 0.75rem; + display: inline-block; + background: no-repeat; + background-image: url("styles/resources/assets/icons/edit-icon.svg"); + background-size: contain; + background-position: center; +} +.update-details-tile .tile__wrapper__container .link.highlight:hover, .update-details-tile .tile__wrapper__container .highlight.linked-services__rightInternalLink:hover { + background-color: #254A7E; + color: #FFFFFF; + border: 1px solid #254A7E; + border: 0.0625rem solid #254A7E; +} +.update-details-tile .tile__wrapper__container .link.highlight:hover span.linkIcon, .update-details-tile .tile__wrapper__container .highlight.linked-services__rightInternalLink:hover span.linkIcon { + background-image: url("styles/resources/assets/icons/edit-icon-white.svg"); +} .key-article { margin: 40px 0; @@ -5585,10 +6018,12 @@ fieldset .input-group:first-child { .key-article__content--text .cmp-text p b, .key-article__content--text .cmp-text p strong { font-family: "Roboto", sans-serif; - color: #525252; font-size: 18px; - line-height: 30px; + font-size: 1.125rem; margin: 20px 0; + margin: 1.25rem 0; + line-height: 1.6666666667; + color: #525252; color: #101820; } .theme-dark .key-article__content--text .cmp-text p, @@ -5676,9 +6111,10 @@ fieldset .input-group:first-child { .authenticated-container__nav .unread-count-desktop { font-family: "Montserrat", sans-serif; font-weight: 700; - color: #101820; font-size: 18px; - line-height: 24px; + font-size: 1.125rem; + line-height: 1.3333333333; + color: #101820; font-size: 12px; font-weight: normal; color: #FFFFFF; @@ -5771,10 +6207,11 @@ fieldset .input-group:first-child { } .authenticated-container__nav .nav-sidebar__top .nav-sidebar-link, .authenticated-container__nav .nav-sidebar__top--logout { font-family: "Roboto", sans-serif; - color: #525252; font-size: 16px; - line-height: 24px; + font-size: 1rem; + line-height: 1.5; font-weight: normal; + color: #525252; color: #101820; display: flex; flex-flow: row nowrap; @@ -5798,10 +6235,11 @@ fieldset .input-group:first-child { .authenticated-container__nav .nav-sidebar__top .nav-sidebar-link strong, .authenticated-container__nav .nav-sidebar__top--logout b, .authenticated-container__nav .nav-sidebar__top--logout strong { font-family: "Roboto", sans-serif; - color: #525252; font-size: 16px; - line-height: 24px; + font-size: 1rem; + line-height: 1.5; font-weight: normal; + color: #525252; color: #101820; font-weight: 700; } @@ -5904,8 +6342,6 @@ fieldset .input-group:first-child { min-width: 16px; min-width: 1rem; display: block; - height: 16px; - width: 16px; background-size: contain; background-position: center; background-repeat: no-repeat; @@ -5940,10 +6376,11 @@ fieldset .input-group:first-child { } .authenticated-container__nav .nav-mobile .nav-mobile-link a { font-family: "Roboto", sans-serif; - color: #525252; font-size: 16px; - line-height: 24px; + font-size: 1rem; + line-height: 1.5; font-weight: normal; + color: #525252; color: #101820; display: block; text-decoration: none; @@ -5957,10 +6394,11 @@ fieldset .input-group:first-child { .authenticated-container__nav .nav-mobile .nav-mobile-link a b, .authenticated-container__nav .nav-mobile .nav-mobile-link a strong { font-family: "Roboto", sans-serif; - color: #525252; font-size: 16px; - line-height: 24px; + font-size: 1rem; + line-height: 1.5; font-weight: normal; + color: #525252; color: #101820; font-weight: 700; } @@ -6062,7 +6500,9 @@ fieldset .input-group:first-child { .page-mygov-auth-account .cmp-title__text { font-weight: 300; font-size: 2.875em; - margin: 0 0.1em 0.75em; + margin: 0; + padding: 0 0.1em 50px; + padding: 0 0.1em 3.125rem; } .page-mygov-auth-account .cmp-title__text .section-title { font-weight: 500; @@ -6070,8 +6510,8 @@ fieldset .input-group:first-child { @media (max-width: 63.9375em) { .page-mygov-auth-account .cmp-title__text { font-size: 1.5em; - margin: 0.5em 0.1em 0.75em; - padding-left: 0.5em; + padding: 17px 0.5em 15px; + padding: 1.0625rem 0.5em 0.9375rem; } } .page-mygov-auth-account .cmp-title__caption { @@ -6086,11 +6526,19 @@ fieldset .input-group:first-child { margin-left: 1rem; margin-top: 16px; margin-top: 1rem; + margin-bottom: -16px; + margin-bottom: -1rem; } } .page-mygov-auth-account .cmp-title .cmp-title__caption ~ .cmp-title__text { margin-top: 0; } +@media (max-width: 63.9375em) { + .page-mygov-auth-account .cmp-title .cmp-title__caption ~ .cmp-title__text { + margin-left: 2px; + margin-left: 0.125rem; + } +} .page-mygov-auth-account .authaccountbody { padding: 0; /* these classes are needed for BirthOfChild SPA for a very unique implementation ;) */ @@ -6203,7 +6651,6 @@ fieldset .input-group:first-child { background-clip: border-box; border: 1px solid rgba(17, 9, 9, 0.125); border-radius: 0.3125em; - min-height: calc(100vh - 390px); } } .page-mygov-auth-account .authenticated-body-container.no-min-height { @@ -6215,6 +6662,16 @@ fieldset .input-group:first-child { .page-mygov-auth-account .authenticated-body-container .key-message-container .carousel-outer-container { margin-bottom: 0; } +.page-mygov-auth-account .authenticated-body-container__page { + padding: 1em; + width: 100%; +} +@media only screen and (min-width: 64em) { + .page-mygov-auth-account .authenticated-body-container__page { + padding: 50px 57px 54px; + padding: 3.125rem 3.5625rem 3.375rem; + } +} .page-mygov-auth-account .authenticated-body-container__nav { position: relative; background: #FFFFFF; @@ -6257,10 +6714,11 @@ fieldset .input-group:first-child { } .page-mygov-auth-account .authenticated-body-container__nav-sidebar__top > ul li .nav-sidebar-link { font-family: "Roboto", sans-serif; - color: #525252; font-size: 16px; - line-height: 24px; + font-size: 1rem; + line-height: 1.5; font-weight: normal; + color: #525252; color: #101820; display: flex; flex-flow: row nowrap; @@ -6280,10 +6738,11 @@ fieldset .input-group:first-child { .page-mygov-auth-account .authenticated-body-container__nav-sidebar__top > ul li .nav-sidebar-link b, .page-mygov-auth-account .authenticated-body-container__nav-sidebar__top > ul li .nav-sidebar-link strong { font-family: "Roboto", sans-serif; - color: #525252; font-size: 16px; - line-height: 24px; + font-size: 1rem; + line-height: 1.5; font-weight: normal; + color: #525252; color: #101820; font-weight: 700; } @@ -6330,13 +6789,14 @@ fieldset .input-group:first-child { .page-mygov-auth-account .authenticated-body-container__nav-sidebar-link { padding: 15px 10px; } -.page-mygov-auth-account .authenticated-body-container__page { - padding: 1em 0.5em; - width: 100%; +.page-mygov-auth-account .authenticated-body-container__nav + .authenticated-body-container__page { + padding: 27px 20px 80px; + padding: 1.6875rem 1.25rem 5rem; } @media only screen and (min-width: 64em) { - .page-mygov-auth-account .authenticated-body-container__page { - padding: 3em 3.375em; + .page-mygov-auth-account .authenticated-body-container__nav + .authenticated-body-container__page { + padding: 51px 64px 53px 58px; + padding: 3.1875rem 4rem 3.3125rem 3.625rem; } } .page-mygov-auth-account .error-banner { @@ -6850,12 +7310,14 @@ fieldset .input-group:first-child { } .notifications__btn-container .nav-buttons .counter { font-family: "Roboto", sans-serif; - color: #525252; font-size: 16px; - line-height: 24px; + font-size: 1rem; + line-height: 1.5; font-weight: normal; + color: #525252; font-size: 14px; - line-height: 20px; + font-size: 0.875rem; + line-height: 1.3571428571; margin: 15px 0 15px 15px; padding: 0; } @@ -6897,8 +7359,6 @@ fieldset .input-group:first-child { min-width: 30px; min-width: 1.875rem; display: block; - height: 30px; - width: 30px; background-size: contain; background-position: center; background-repeat: no-repeat; @@ -6920,12 +7380,14 @@ fieldset .input-group:first-child { } .notifications__tile .publish-date { font-family: "Roboto", sans-serif; - color: #525252; font-size: 16px; - line-height: 24px; + font-size: 1rem; + line-height: 1.5; font-weight: normal; + color: #525252; font-size: 14px; - line-height: 20px; + font-size: 0.875rem; + line-height: 1.3571428571; display: flex; color: #525252; } @@ -6940,8 +7402,6 @@ fieldset .input-group:first-child { min-width: 20px; min-width: 1.25rem; display: block; - height: 20px; - width: 20px; background-size: contain; background-position: center; background-repeat: no-repeat; @@ -6951,10 +7411,11 @@ fieldset .input-group:first-child { } .notifications__tile h2 { font-family: "Roboto", sans-serif; - color: #525252; font-size: 16px; - line-height: 24px; + font-size: 1rem; + line-height: 1.5; font-weight: normal; + color: #525252; color: #101820; font-weight: 700; margin-top: 16px; @@ -6968,12 +7429,14 @@ fieldset .input-group:first-child { } .notifications__tile > p { font-family: "Roboto", sans-serif; - color: #525252; font-size: 16px; - line-height: 24px; + font-size: 1rem; + line-height: 1.5; font-weight: normal; + color: #525252; font-size: 14px; - line-height: 20px; + font-size: 0.875rem; + line-height: 1.3571428571; } .theme-dark .notifications__tile > p { color: #FFFFFF; @@ -7004,8 +7467,6 @@ fieldset .input-group:first-child { min-width: 24px; min-width: 1.5rem; display: block; - height: 24px; - width: 24px; background-size: contain; background-position: center; background-repeat: no-repeat; @@ -7080,8 +7541,6 @@ fieldset .input-group:first-child { min-width: 30px; min-width: 1.875rem; display: block; - height: 16px; - width: 30px; background-size: contain; background-position: center; background-repeat: no-repeat; @@ -7306,6 +7765,7 @@ fieldset .input-group:first-child { } .cmp-breadcrumb__item--active { color: #000000; + font-weight: 500; } .cmp-breadcrumb li { display: inline-block; @@ -7316,6 +7776,8 @@ fieldset .input-group:first-child { vertical-align: top; content: url("styles/resources/assets/icons/chevron-right-black.svg"); /* this chevron file is a placeholder and must be overwritten with correct icon */ + width: 24px; + height: 24px; display: inline-block; } .cmp-breadcrumb li a { @@ -7329,14 +7791,17 @@ fieldset .input-group:first-child { } .cmp-breadcrumb li a:hover { background-color: #254A7E; + border: 5px solid #254A7E; } .cmp-breadcrumb li a:focus { border-radius: 1px; background-color: #254A7E; + border: 5px solid #254A7E; } .cmp-breadcrumb li a:active { border-radius: 1px; background-color: #183052; + border: 5px solid #183052; } @media screen and (max-width: 640px) { .cmp-breadcrumb li:not(.show-mobile) { @@ -7345,10 +7810,16 @@ fieldset .input-group:first-child { .cmp-breadcrumb li.show-mobile::before { display: inline-block; vertical-align: top; + width: 16px; + height: 24px; content: url("styles/resources/assets/icons/chevron-left-black.svg"); } } +.page-mygov-landing .cmp-breadcrumb { + margin: 1.5em 0.5em; +} + /** Buttons **/ button:hover, button:focus { cursor: pointer; @@ -7359,6 +7830,10 @@ button:hover[disabled], button:hover.disabled, button:focus[disabled], button:fo } .btn, +body mygov-dashboard-transition-modal button.btn, +body mygov-tasks-transition-modal button.btn, +.page-mygov-auth-account mygov-dashboard-transition-modal button.btn, +.page-mygov-auth-account mygov-tasks-transition-modal button.btn, .un_link-confirmation__button { padding: 16px 17px; padding: 1rem 1.0625rem; @@ -7382,15 +7857,23 @@ button:hover[disabled], button:hover.disabled, button:focus[disabled], button:fo } @media only screen and (min-width: 48em) { .btn, +body mygov-dashboard-transition-modal button.btn, +body mygov-tasks-transition-modal button.btn, +.page-mygov-auth-account mygov-dashboard-transition-modal button.btn, +.page-mygov-auth-account mygov-tasks-transition-modal button.btn, .un_link-confirmation__button { display: inline-block; } } .btn:hover, +.page-mygov-auth-account mygov-dashboard-transition-modal button.btn:hover, +.page-mygov-auth-account mygov-tasks-transition-modal button.btn:hover, .un_link-confirmation__button:hover { background: #183052; } .btn:focus, +.page-mygov-auth-account mygov-dashboard-transition-modal button.btn:focus, +.page-mygov-auth-account mygov-tasks-transition-modal button.btn:focus, .un_link-confirmation__button:focus { outline-width: 3px; outline-width: 0.1875rem; @@ -7398,6 +7881,8 @@ button:hover[disabled], button:hover.disabled, button:focus[disabled], button:fo outline-color: #254A7E; } .btn.mygov, +.page-mygov-auth-account mygov-dashboard-transition-modal button.mygov.btn, +.page-mygov-auth-account mygov-tasks-transition-modal button.mygov.btn, .mygov.un_link-confirmation__button { background: #026540; } @@ -7406,6 +7891,8 @@ button:hover[disabled], button:hover.disabled, button:focus[disabled], button:fo background: #0061C8; } .btn.is-loading, +.page-mygov-auth-account mygov-dashboard-transition-modal button.is-loading.btn, +.page-mygov-auth-account mygov-tasks-transition-modal button.is-loading.btn, .is-loading.un_link-confirmation__button { padding: 16px 17px 16px 45px; padding: 1rem 1.0625rem 1rem 2.8125rem; @@ -7420,13 +7907,19 @@ button:hover[disabled], button:hover.disabled, button:focus[disabled], button:fo } } .btn.is-loading::before, +.page-mygov-auth-account mygov-dashboard-transition-modal button.is-loading.btn::before, +.page-mygov-auth-account mygov-tasks-transition-modal button.is-loading.btn::before, .is-loading.un_link-confirmation__button::before { + width: 26px; + width: 1.625rem; + height: 26px; + height: 1.625rem; + min-width: 26px; + min-width: 1.625rem; content: ""; position: absolute; top: 0; left: 0; - width: 26px; - height: 26px; background-size: contain; background-position: center; background-repeat: no-repeat; @@ -7442,12 +7935,16 @@ button:hover[disabled], button:hover.disabled, button:focus[disabled], button:fo } @media only screen and (min-width: 48em) { .btn.is-loading::before, +.page-mygov-auth-account mygov-dashboard-transition-modal button.is-loading.btn::before, +.page-mygov-auth-account mygov-tasks-transition-modal button.is-loading.btn::before, .is-loading.un_link-confirmation__button::before { left: 25px; left: 1.5625rem; } } .btn.mygov-green, +.page-mygov-auth-account mygov-dashboard-transition-modal button.mygov-green.btn, +.page-mygov-auth-account mygov-tasks-transition-modal button.mygov-green.btn, .mygov-green.un_link-confirmation__button { background: #026540; } @@ -7465,6 +7962,8 @@ button:hover[disabled], button:hover.disabled, button:focus[disabled], button:fo filter: invert(1); } .btn.outline, +.page-mygov-auth-account mygov-dashboard-transition-modal button.outline.btn, +.page-mygov-auth-account mygov-tasks-transition-modal button.outline.btn, .outline.un_link-confirmation__button { padding: 15px 16px; padding: 0.9375rem 1rem; @@ -7490,8 +7989,13 @@ button:hover[disabled], button:hover.disabled, button:focus[disabled], button:fo color: #A0A0A3; cursor: not-allowed; } -.btn.secondary, -.secondary.un_link-confirmation__button { +.btn.secondary, .btn.cmp-feature-teaser__action-link, +.page-mygov-auth-account mygov-dashboard-transition-modal button.secondary.btn, +.page-mygov-auth-account mygov-tasks-transition-modal button.secondary.btn, +.secondary.un_link-confirmation__button, +.page-mygov-auth-account mygov-dashboard-transition-modal button.cmp-feature-teaser__action-link.btn, +.page-mygov-auth-account mygov-tasks-transition-modal button.cmp-feature-teaser__action-link.btn, +.cmp-feature-teaser__action-link.un_link-confirmation__button { padding: 15px 16px; padding: 0.9375rem 1rem; border-width: 2px; @@ -7501,22 +8005,28 @@ button:hover[disabled], button:hover.disabled, button:focus[disabled], button:fo border-style: solid; border-color: #006CE0; } -.btn.secondary:hover, .btn.secondary:focus, +.btn.secondary:hover, .btn.cmp-feature-teaser__action-link:hover, .btn.secondary:focus, .btn.cmp-feature-teaser__action-link:focus, .secondary.un_link-confirmation__button:hover, -.secondary.un_link-confirmation__button:focus { +.cmp-feature-teaser__action-link.un_link-confirmation__button:hover, +.secondary.un_link-confirmation__button:focus, +.cmp-feature-teaser__action-link.un_link-confirmation__button:focus { color: #313131; text-decoration: underline; border-color: #313131; } -.btn.secondary[disabled], .btn.secondary.disabled, +.btn.secondary[disabled], .btn[disabled].cmp-feature-teaser__action-link, .btn.secondary.disabled, .btn.disabled.cmp-feature-teaser__action-link, .secondary[disabled].un_link-confirmation__button, -.secondary.disabled.un_link-confirmation__button { +[disabled].cmp-feature-teaser__action-link.un_link-confirmation__button, +.secondary.disabled.un_link-confirmation__button, +.disabled.cmp-feature-teaser__action-link.un_link-confirmation__button { background: #F5F5F5; border-color: #A0A0A3; color: #A0A0A3; cursor: not-allowed; } .btn.tertiary, +.page-mygov-auth-account mygov-dashboard-transition-modal button.tertiary.btn, +.page-mygov-auth-account mygov-tasks-transition-modal button.tertiary.btn, .tertiary.un_link-confirmation__button { padding: 15px 16px; padding: 0.9375rem 1rem; @@ -7541,6 +8051,8 @@ button:hover[disabled], button:hover.disabled, button:focus[disabled], button:fo cursor: not-allowed; } .btn.icon span, +.page-mygov-auth-account mygov-dashboard-transition-modal button.icon.btn span, +.page-mygov-auth-account mygov-tasks-transition-modal button.icon.btn span, .icon.un_link-confirmation__button span { padding-right: 27px; padding-right: 1.6875rem; @@ -7549,12 +8061,16 @@ button:hover[disabled], button:hover.disabled, button:focus[disabled], button:fo } .btn.icon span::after, .icon.un_link-confirmation__button span::after { + width: 18px; + width: 1.125rem; + height: 18px; + height: 1.125rem; + min-width: 18px; + min-width: 1.125rem; content: ""; position: absolute; top: 0; right: 0; - width: 18px; - height: 18px; background-size: contain; background-position: center; background-repeat: no-repeat; @@ -7576,15 +8092,21 @@ button:hover[disabled], button:hover.disabled, button:focus[disabled], button:fo background-image: url("styles/resources/assets/icons/icon-external-link-white.svg"); } .btn[disabled], .btn.disabled, +.page-mygov-auth-account mygov-dashboard-transition-modal button[disabled].btn, +.page-mygov-auth-account mygov-tasks-transition-modal button[disabled].btn, [disabled].un_link-confirmation__button, +.page-mygov-auth-account mygov-dashboard-transition-modal button.disabled.btn, +.page-mygov-auth-account mygov-tasks-transition-modal button.disabled.btn, .disabled.un_link-confirmation__button { - background: #A0A0A3; - border-color: #A0A0A3; - color: #FFFFFF; + background: var(--grey1c-100); + border-color: var(--grey1c-100); + color: #76797c; cursor: not-allowed; pointer-events: none; } .btn.loading, +.page-mygov-auth-account mygov-dashboard-transition-modal button.loading.btn, +.page-mygov-auth-account mygov-tasks-transition-modal button.loading.btn, .loading.un_link-confirmation__button { text-indent: -9999px; text-indent: -624.9375rem; @@ -7606,6 +8128,8 @@ button:hover[disabled], button:hover.disabled, button:focus[disabled], button:fo background-position: center; } .btn.close, +.page-mygov-auth-account mygov-dashboard-transition-modal button.close.btn, +.page-mygov-auth-account mygov-tasks-transition-modal button.close.btn, .close.un_link-confirmation__button { height: 30px; height: 1.875rem; @@ -7617,6 +8141,8 @@ button:hover[disabled], button:hover.disabled, button:focus[disabled], button:fo background: transparent; } .btn.close i, +.page-mygov-auth-account mygov-dashboard-transition-modal button.close.btn i, +.page-mygov-auth-account mygov-tasks-transition-modal button.close.btn i, .close.un_link-confirmation__button i { width: 30px; width: 1.875rem; @@ -7625,14 +8151,14 @@ button:hover[disabled], button:hover.disabled, button:focus[disabled], button:fo min-width: 30px; min-width: 1.875rem; display: block; - height: 30px; - width: 30px; background-size: contain; background-position: center; background-repeat: no-repeat; - background-image: url("styles/resources/assets/icons/icon-close.svg"); + background-image: url("styles/resources/assets/icons/icon-close-black.svg"); } .btn.toggle, +.page-mygov-auth-account mygov-dashboard-transition-modal button.toggle.btn, +.page-mygov-auth-account mygov-tasks-transition-modal button.toggle.btn, .toggle.un_link-confirmation__button { padding: 0 25px 0 3px; padding: 0 1.5625rem 0 0.1875rem; @@ -7647,13 +8173,19 @@ button:hover[disabled], button:hover.disabled, button:focus[disabled], button:fo min-width: auto; } .btn.toggle::after, +.page-mygov-auth-account mygov-dashboard-transition-modal button.toggle.btn::after, +.page-mygov-auth-account mygov-tasks-transition-modal button.toggle.btn::after, .toggle.un_link-confirmation__button::after { + width: 15px; + width: 0.9375rem; + height: 15px; + height: 0.9375rem; + min-width: 15px; + min-width: 0.9375rem; content: ""; position: absolute; top: 0; right: 0; - width: 15px; - height: 15px; background-size: contain; background-position: center; background-repeat: no-repeat; @@ -7667,12 +8199,16 @@ button:hover[disabled], button:hover.disabled, button:focus[disabled], button:fo } .btn.toggle.is-expanded::after, .toggle.is-expanded.un_link-confirmation__button::after { + width: 15px; + width: 0.9375rem; + height: 15px; + height: 0.9375rem; + min-width: 15px; + min-width: 0.9375rem; content: ""; position: absolute; top: 0; right: 0; - width: 15px; - height: 15px; background-size: contain; background-position: center; background-repeat: no-repeat; @@ -7831,12 +8367,16 @@ button:hover[disabled], button:hover.disabled, button:focus[disabled], button:fo position: relative; } .link.action.icon span::after, .action.icon.linked-services__rightInternalLink span::after { + width: 18px; + width: 1.125rem; + height: 18px; + height: 1.125rem; + min-width: 18px; + min-width: 1.125rem; content: ""; position: absolute; top: 0; left: 0; - width: 18px; - height: 18px; background-size: contain; background-position: center; background-repeat: no-repeat; @@ -7917,16 +8457,23 @@ button:hover[disabled], button:hover.disabled, button:focus[disabled], button:fo width: 100%; } -.cmp-btn-link__conjunction { - margin: 0 1.25rem; -} .cmp-btn-link div[data-habitat] { display: inline-block; } +.cmp-btn-link .cmp-button { + display: inline-block; +} +.cmp-btn-link__conjunction { + font-family: "Roboto", sans-serif; + color: #000000; + line-height: 1.5556; + font-weight: 300; + font-size: 1.125rem; + margin: 0 1rem; +} /** Buttons **/ -.btnr, -.cmp-feature-teaser__action-link, +.btnr, .cmp-feature-teaser__action-link, .cmp-button { display: block; position: relative; @@ -7944,59 +8491,50 @@ button:hover[disabled], button:hover.disabled, button:focus[disabled], button:fo transition-duration: 150ms; } @media only screen and (min-width: 48em) { - .btnr, -.cmp-feature-teaser__action-link, + .btnr, .cmp-feature-teaser__action-link, .cmp-button { display: inline-block; } } -.btnr:hover, -.cmp-feature-teaser__action-link:hover, +.btnr:hover, .cmp-feature-teaser__action-link:hover, .cmp-button:hover { color: #FFFFFF; background: #254A7E; } -.btnr:focus, -.cmp-feature-teaser__action-link:focus, +.btnr:focus, .cmp-feature-teaser__action-link:focus, .cmp-button:focus { outline: 2px solid #183052; color: #FFFFFF; background: #254A7E; } -.btnr:active, -.cmp-feature-teaser__action-link:active, +.btnr:active, .cmp-feature-teaser__action-link:active, .cmp-button:active { outline: 2px solid #183052; color: #FFFFFF; background: #183052; } -.btnr[disabled], -[disabled].cmp-feature-teaser__action-link, +.btnr[disabled], [disabled].cmp-feature-teaser__action-link, [disabled].cmp-button { background: #D9D9D6; border-color: #D9D9D6; color: #75787B; cursor: not-allowed; } -.btnr[aria-checked=true], -[aria-checked=true].cmp-feature-teaser__action-link, +.btnr[aria-checked=true], [aria-checked=true].cmp-feature-teaser__action-link, [aria-checked=true].cmp-button { outline: 2px solid #183052; color: #FFFFFF; background: #254A7E; } -.btnr.mygov, -.mygov.cmp-feature-teaser__action-link, +.btnr.mygov, .mygov.cmp-feature-teaser__action-link, .mygov.cmp-button { background: #026540; } -.btnr.mygov:focus, -.mygov.cmp-feature-teaser__action-link:focus, +.btnr.mygov:focus, .mygov.cmp-feature-teaser__action-link:focus, .mygov.cmp-button:focus { background: #0061C8; } -.btnr.is-loading, -.is-loading.cmp-feature-teaser__action-link, +.btnr.is-loading, .is-loading.cmp-feature-teaser__action-link, .is-loading.cmp-button { pointer-events: none; padding: 16px 17px 16px 45px; @@ -8009,15 +8547,18 @@ button:hover[disabled], button:hover.disabled, button:focus[disabled], button:fo transform: rotate(360deg); } } -.btnr.is-loading::before, -.is-loading.cmp-feature-teaser__action-link::before, +.btnr.is-loading::before, .is-loading.cmp-feature-teaser__action-link::before, .is-loading.cmp-button::before { + width: 26px; + width: 1.625rem; + height: 26px; + height: 1.625rem; + min-width: 26px; + min-width: 1.625rem; content: ""; position: absolute; top: 0; left: 0; - width: 26px; - height: 26px; background-size: contain; background-position: center; background-repeat: no-repeat; @@ -8030,97 +8571,86 @@ button:hover[disabled], button:hover.disabled, button:focus[disabled], button:fo animation: rotate 1s linear infinite; } @media only screen and (min-width: 48em) { - .btnr.is-loading::before, -.is-loading.cmp-feature-teaser__action-link::before, + .btnr.is-loading::before, .is-loading.cmp-feature-teaser__action-link::before, .is-loading.cmp-button::before { left: 25px; } } -.btnr.mygov-green, -.mygov-green.cmp-feature-teaser__action-link, +.btnr.mygov-green, .mygov-green.cmp-feature-teaser__action-link, .mygov-green.cmp-button { background: #026540; } -.btnr.mygov-green span::after, -.mygov-green.cmp-feature-teaser__action-link span::after, +.btnr.mygov-green span::after, .mygov-green.cmp-feature-teaser__action-link span::after, .mygov-green.cmp-button span::after { backface-visibility: none; } -.btnr.mygov-green:hover, -.mygov-green.cmp-feature-teaser__action-link:hover, +.btnr.mygov-green:hover, .mygov-green.cmp-feature-teaser__action-link:hover, .mygov-green.cmp-button:hover { background: #78C433; color: #101820; } -.btnr.mygov-green:hover span::after, -.mygov-green.cmp-feature-teaser__action-link:hover span::after, +.btnr.mygov-green:hover span::after, .mygov-green.cmp-feature-teaser__action-link:hover span::after, .mygov-green.cmp-button:hover span::after { filter: invert(1); } -.btnr.outline, -.outline.cmp-feature-teaser__action-link, +.btnr.outline, .outline.cmp-feature-teaser__action-link, .outline.cmp-button { color: #006CE0; background: #FFFFFF; border: 2px solid #006CE0; padding: 15px 16px; } -.btnr.outline:hover, .btnr.outline:focus, -.outline.cmp-feature-teaser__action-link:hover, +.btnr.outline:hover, .outline.cmp-feature-teaser__action-link:hover, .btnr.outline:focus, .outline.cmp-feature-teaser__action-link:focus, .outline.cmp-button:hover, -.outline.cmp-feature-teaser__action-link:focus, .outline.cmp-button:focus { text-decoration: underline; color: #313131; border: 2px solid #313131; } -.btnr.outline[disabled], -.outline[disabled].cmp-feature-teaser__action-link, +.btnr.outline[disabled], .outline[disabled].cmp-feature-teaser__action-link, .outline[disabled].cmp-button { background: #F5F5F5; border-color: #A0A0A3; color: #A0A0A3; cursor: not-allowed; } -.btnr.tertiary, -.tertiary.cmp-feature-teaser__action-link, +.btnr.tertiary, .tertiary.cmp-feature-teaser__action-link, .tertiary.cmp-button { color: #006CE0; background: #FFFFFF; border: 2px solid #D1D2D3; padding: 15px 16px; } -.btnr.tertiary:hover, .btnr.tertiary:focus, -.tertiary.cmp-feature-teaser__action-link:hover, +.btnr.tertiary:hover, .tertiary.cmp-feature-teaser__action-link:hover, .btnr.tertiary:focus, .tertiary.cmp-feature-teaser__action-link:focus, .tertiary.cmp-button:hover, -.tertiary.cmp-feature-teaser__action-link:focus, .tertiary.cmp-button:focus { background-color: #F5F9FE; } -.btnr.tertiary[disabled], -.tertiary[disabled].cmp-feature-teaser__action-link, +.btnr.tertiary[disabled], .tertiary[disabled].cmp-feature-teaser__action-link, .tertiary[disabled].cmp-button { background: #F5F5F5; border-color: #A0A0A3; color: #A0A0A3; cursor: not-allowed; } -.btnr.icon span, -.icon.cmp-feature-teaser__action-link span, +.btnr.icon span, .icon.cmp-feature-teaser__action-link span, .icon.cmp-button span { position: relative; font-weight: 400; padding-right: 27px; } -.btnr.icon span::after, -.icon.cmp-feature-teaser__action-link span::after, +.btnr.icon span::after, .icon.cmp-feature-teaser__action-link span::after, .icon.cmp-button span::after { + width: 18px; + width: 1.125rem; + height: 18px; + height: 1.125rem; + min-width: 18px; + min-width: 1.125rem; content: ""; position: absolute; top: 0; right: 0; - width: 18px; - height: 18px; background-size: contain; background-position: center; background-repeat: no-repeat; @@ -8129,23 +8659,19 @@ button:hover[disabled], button:hover.disabled, button:focus[disabled], button:fo transition-timing-function: ease; transition: all 150ms; } -.btnr.icon span.btn-icon-filter::after, -.icon.cmp-feature-teaser__action-link span.btn-icon-filter::after, +.btnr.icon span.btn-icon-filter::after, .icon.cmp-feature-teaser__action-link span.btn-icon-filter::after, .icon.cmp-button span.btn-icon-filter::after { background-image: url("styles/resources/assets/icons/icon-filter-white.svg"); } -.btnr.icon span.btn-icon-arrow::after, -.icon.cmp-feature-teaser__action-link span.btn-icon-arrow::after, +.btnr.icon span.btn-icon-arrow::after, .icon.cmp-feature-teaser__action-link span.btn-icon-arrow::after, .icon.cmp-button span.btn-icon-arrow::after { background-image: url("styles/resources/assets/icons/arrow-right-white.svg"); } -.btnr.icon span.btn-icon-external-link::after, -.icon.cmp-feature-teaser__action-link span.btn-icon-external-link::after, +.btnr.icon span.btn-icon-external-link::after, .icon.cmp-feature-teaser__action-link span.btn-icon-external-link::after, .icon.cmp-button span.btn-icon-external-link::after { background-image: url("styles/resources/assets/icons/icon-external-link-white.svg"); } -.btnr.loading, -.loading.cmp-feature-teaser__action-link, +.btnr.loading, .loading.cmp-feature-teaser__action-link, .loading.cmp-button { background: url("styles/resources/assets/icons/spinner.svg") no-repeat; background-position: center; @@ -8154,16 +8680,14 @@ button:hover[disabled], button:hover.disabled, button:focus[disabled], button:fo border-color: #A0A0A3; pointer-events: none; } -.btnr.loading[disabled], -.loading[disabled].cmp-feature-teaser__action-link, +.btnr.loading[disabled], .loading[disabled].cmp-feature-teaser__action-link, .loading[disabled].cmp-button { background: url("styles/resources/assets/icons/spinner.svg") no-repeat; background-position: center; text-indent: -9999px; background-size: 30px; } -.btnr.close, -.close.cmp-feature-teaser__action-link, +.btnr.close, .close.cmp-feature-teaser__action-link, .close.cmp-button { margin: 0; padding: 0; @@ -8172,8 +8696,7 @@ button:hover[disabled], button:hover.disabled, button:focus[disabled], button:fo min-width: auto; background: transparent; } -.btnr.close i, -.close.cmp-feature-teaser__action-link i, +.btnr.close i, .close.cmp-feature-teaser__action-link i, .close.cmp-button i { width: 30px; width: 1.875rem; @@ -8182,15 +8705,12 @@ button:hover[disabled], button:hover.disabled, button:focus[disabled], button:fo min-width: 30px; min-width: 1.875rem; display: block; - height: 30px; - width: 30px; background-size: contain; background-position: center; background-repeat: no-repeat; background-image: url("styles/resources/assets/icons/icon-close.svg"); } -.btnr.toggle, -.toggle.cmp-feature-teaser__action-link, +.btnr.toggle, .toggle.cmp-feature-teaser__action-link, .toggle.cmp-button { display: block; margin: 0; @@ -8202,15 +8722,18 @@ button:hover[disabled], button:hover.disabled, button:focus[disabled], button:fo color: #006CE0; min-width: auto; } -.btnr.toggle::after, -.toggle.cmp-feature-teaser__action-link::after, +.btnr.toggle::after, .toggle.cmp-feature-teaser__action-link::after, .toggle.cmp-button::after { + width: 15px; + width: 0.9375rem; + height: 15px; + height: 0.9375rem; + min-width: 15px; + min-width: 0.9375rem; content: ""; position: absolute; top: 0; right: 0; - width: 15px; - height: 15px; background-size: contain; background-position: center; background-repeat: no-repeat; @@ -8221,15 +8744,18 @@ button:hover[disabled], button:hover.disabled, button:focus[disabled], button:fo top: 2px; transition-property: none; } -.btnr.toggle.is-expanded::after, -.toggle.is-expanded.cmp-feature-teaser__action-link::after, +.btnr.toggle.is-expanded::after, .toggle.is-expanded.cmp-feature-teaser__action-link::after, .toggle.is-expanded.cmp-button::after { + width: 15px; + width: 0.9375rem; + height: 15px; + height: 0.9375rem; + min-width: 15px; + min-width: 0.9375rem; content: ""; position: absolute; top: 0; right: 0; - width: 15px; - height: 15px; background-size: contain; background-position: center; background-repeat: no-repeat; @@ -8241,31 +8767,26 @@ button:hover[disabled], button:hover.disabled, button:focus[disabled], button:fo transition-property: none; } -.btnr.secondary, -.cmp-feature-teaser__action-link { +.btnr.secondary, .cmp-feature-teaser__action-link { background: #FFFFFF; color: #183052; border: 2px solid #183052; } -.btnr.secondary:hover, -.cmp-feature-teaser__action-link:hover { +.btnr.secondary:hover, .cmp-feature-teaser__action-link:hover { color: #FFFFFF; background: #254A7E; } -.btnr.secondary:focus, -.cmp-feature-teaser__action-link:focus { +.btnr.secondary:focus, .cmp-feature-teaser__action-link:focus { outline: 2px solid #183052; color: #FFFFFF; background: #254A7E; } -.btnr.secondary:active, -.cmp-feature-teaser__action-link:active { +.btnr.secondary:active, .cmp-feature-teaser__action-link:active { outline: 2px solid #183052; color: #FFFFFF; background: #183052; } -.btnr.secondary[disabled], -[disabled].cmp-feature-teaser__action-link { +.btnr.secondary[disabled], [disabled].cmp-feature-teaser__action-link { background: #D9D9D6; border-color: #BBBCBC; color: #75787B; @@ -8338,6 +8859,7 @@ button:hover[disabled], button:hover.disabled, button:focus[disabled], button:fo .cmp-card-list__item > a { display: flex; height: 100%; + width: 100%; border-radius: 4px; text-decoration: none; } @@ -8345,6 +8867,7 @@ button:hover[disabled], button:hover.disabled, button:focus[disabled], button:fo display: flex; overflow: hidden; height: 100%; + width: 100%; background: #FFFFFF; border-radius: 4px; box-shadow: 0 2px 6px rgba(16, 24, 32, 0.16); @@ -8654,8 +9177,6 @@ button:hover[disabled], button:hover.disabled, button:focus[disabled], button:fo min-width: 24px; min-width: 1.5rem; display: block; - height: 24px; - width: 24px; background-size: contain; background-position: center; background-repeat: no-repeat; @@ -8664,10 +9185,11 @@ button:hover[disabled], button:hover.disabled, button:focus[disabled], button:fo } .centrelink-tasks__tile h2 { font-family: "Roboto", sans-serif; - color: #525252; font-size: 16px; - line-height: 24px; + font-size: 1rem; + line-height: 1.5; font-weight: normal; + color: #525252; color: #101820; font-weight: 700; font-size: 18px; @@ -8682,12 +9204,14 @@ button:hover[disabled], button:hover.disabled, button:focus[disabled], button:fo } .centrelink-tasks__tile p { font-family: "Roboto", sans-serif; - color: #525252; font-size: 16px; - line-height: 24px; + font-size: 1rem; + line-height: 1.5; font-weight: normal; + color: #525252; font-size: 14px; - line-height: 20px; + font-size: 0.875rem; + line-height: 1.3571428571; margin-top: 10px; } .theme-dark .centrelink-tasks__tile p { @@ -9000,12 +9524,14 @@ button:hover[disabled], button:hover.disabled, button:focus[disabled], button:fo background-color: #006CE0; } .dashboard-alert i.info::after { + width: 60px; + width: 3.75rem; + min-width: 60px; + min-width: 3.75rem; content: ""; position: absolute; top: 0; right: 0; - width: 60px; - height: 100%; background-size: contain; background-position: center; background-repeat: no-repeat; @@ -9017,10 +9543,11 @@ button:hover[disabled], button:hover.disabled, button:focus[disabled], button:fo } .dashboard-alert > h2 { font-family: "Roboto", sans-serif; - color: #525252; font-size: 16px; - line-height: 24px; + font-size: 1rem; + line-height: 1.5; font-weight: normal; + color: #525252; color: #101820; font-weight: 700; display: block; @@ -9048,10 +9575,11 @@ button:hover[disabled], button:hover.disabled, button:focus[disabled], button:fo } .dashboard-alert .cmp-text ul li { font-family: "Roboto", sans-serif; - color: #525252; font-size: 16px; - line-height: 24px; + font-size: 1rem; + line-height: 1.5; font-weight: normal; + color: #525252; color: #101820; } .theme-dark .dashboard-alert .cmp-text ul li { @@ -9060,10 +9588,11 @@ button:hover[disabled], button:hover.disabled, button:focus[disabled], button:fo .dashboard-alert .cmp-text ul li b, .dashboard-alert .cmp-text ul li strong { font-family: "Roboto", sans-serif; - color: #525252; font-size: 16px; - line-height: 24px; + font-size: 1rem; + line-height: 1.5; font-weight: normal; + color: #525252; color: #101820; font-weight: 700; } @@ -9077,10 +9606,11 @@ button:hover[disabled], button:hover.disabled, button:focus[disabled], button:fo } .dashboard-alert .cmp-text p { font-family: "Roboto", sans-serif; - color: #525252; font-size: 16px; - line-height: 24px; + font-size: 1rem; + line-height: 1.5; font-weight: normal; + color: #525252; color: #000000; margin: 0; align-self: center; @@ -9096,10 +9626,11 @@ button:hover[disabled], button:hover.disabled, button:focus[disabled], button:fo .dashboard-alert .cmp-text p strong, .dashboard-alert .cmp-text p b { font-family: "Roboto", sans-serif; - color: #525252; font-size: 16px; - line-height: 24px; + font-size: 1rem; + line-height: 1.5; font-weight: normal; + color: #525252; color: #101820; font-weight: 700; color: #000000; @@ -9260,8 +9791,6 @@ button:hover[disabled], button:hover.disabled, button:focus[disabled], button:fo min-width: 22px; min-width: 1.375rem; display: block; - height: 22px; - width: 22px; background-size: contain; background-position: center; background-repeat: no-repeat; @@ -9283,12 +9812,14 @@ button:hover[disabled], button:hover.disabled, button:focus[disabled], button:fo } .emergency-status .content h2 { font-family: "Roboto", sans-serif; - color: #525252; font-size: 16px; - line-height: 24px; + font-size: 1rem; + line-height: 1.5; font-weight: normal; + color: #525252; font-size: 14px; - line-height: 20px; + font-size: 0.875rem; + line-height: 1.3571428571; color: #525252; margin: 0; letter-spacing: normal; @@ -9301,10 +9832,12 @@ button:hover[disabled], button:hover.disabled, button:focus[disabled], button:fo } .emergency-status .content p { font-family: "Roboto", sans-serif; - color: #525252; font-size: 18px; - line-height: 30px; + font-size: 1.125rem; margin: 20px 0; + margin: 1.25rem 0; + line-height: 1.6666666667; + color: #525252; color: #101820; font-size: 16px; margin: 0; @@ -9367,10 +9900,11 @@ button:hover[disabled], button:hover.disabled, button:focus[disabled], button:fo } .emergency-status.is-form-error .content h2 { font-family: "Roboto", sans-serif; - color: #525252; font-size: 16px; - line-height: 24px; + font-size: 1rem; + line-height: 1.5; font-weight: normal; + color: #525252; color: #101820; font-weight: 700; letter-spacing: normal; @@ -9399,40 +9933,102 @@ button:hover[disabled], button:hover.disabled, button:focus[disabled], button:fo .cmp-feature-teaser { display: flex; flex-direction: column; - overflow: hidden; + margin: 0 -20px; + width: calc(100% + 40px); +} +@media only screen and (min-width: 40em) { + .cmp-feature-teaser { + margin: 0; + width: 100%; + border-radius: 4px; + border: 1px solid #e1e1de; + overflow: hidden; + } +} +@media only screen and (min-width: 64em) { + .cmp-feature-teaser { + flex-direction: row-reverse; + min-height: 350px; + } } .cmp-feature-teaser .cmp-image { - width: 100%; margin: 0; } +@media only screen and (min-width: 88.125em) { + .cmp-feature-teaser .cmp-image { + width: 50%; + } +} .cmp-feature-teaser .cmp-image__image { height: 160px; + width: 100%; object-fit: cover; } +@media only screen and (min-width: 64em) { + .cmp-feature-teaser .cmp-image__image { + height: 100%; + width: 240px; + } +} +@media only screen and (min-width: 88.125em) { + .cmp-feature-teaser .cmp-image__image { + width: 100%; + } +} .cmp-feature-teaser__info { display: flex; flex-direction: column; - padding: 36px 20px; + padding: 2.25rem 20px 0; +} +@media only screen and (min-width: 40em) { + .cmp-feature-teaser__info { + padding: 2.25rem 2.5rem; + } +} +@media only screen and (min-width: 64em) { + .cmp-feature-teaser__info { + align-items: flex-start; + } +} +@media only screen and (min-width: 88.125em) { + .cmp-feature-teaser__info { + width: 50%; + padding: 2.75rem 2.5rem; + } } .cmp-feature-teaser__info__pretitle, -.cmp-feature-teaser__info h3 { - color: #101820; +.cmp-feature-teaser__info h2 { + font-family: "Roboto", sans-serif; + color: #000000; line-height: 1.25; - font-weight: 500; - font-size: 1.625rem; - margin-bottom: 1rem; + letter-spacing: 0.001em; + font-weight: 400; + font-size: 2.25rem; margin-top: 0; + margin-bottom: 1.125rem; +} +@media only screen and (min-width: 64em) { + .cmp-feature-teaser__info__pretitle, +.cmp-feature-teaser__info h2 { + margin-bottom: 1.75rem; + } } .cmp-feature-teaser__info__description { margin-bottom: 1.75rem; } .cmp-feature-teaser__info__description p { + font-family: "Roboto", sans-serif; color: #000000; line-height: 1.5556; font-weight: 300; font-size: 1.125rem; margin: 0; } +@media only screen and (min-width: 64em) { + .cmp-feature-teaser__info__description { + margin-bottom: 2.25rem; + } +} .cmp-feature-teaser__action-container { display: flex; flex-direction: column; @@ -9444,33 +10040,6 @@ button:hover[disabled], button:hover.disabled, button:focus[disabled], button:fo margin-bottom: 28px; } -@media only screen and (min-width: 768px) { - .cmp-feature-teaser { - flex-direction: row-reverse; - min-height: 340px; - border-radius: 4px; - border: 1px solid #E1E1DE; - } - .cmp-feature-teaser .cmp-image { - width: 50%; - } - .cmp-feature-teaser .cmp-image__image { - height: 100%; - } - .cmp-feature-teaser__info { - align-items: flex-start; - padding: 48px; - padding-left: 36px; - width: 50%; - } - .cmp-feature-teaser__info__pretitle, -.cmp-feature-teaser__info h3 { - margin-bottom: 1.25rem; - } - .cmp-feature-teaser__info__description { - margin-bottom: 2.5rem; - } -} .feedback-poll { display: flex; flex-flow: column nowrap; @@ -9712,12 +10281,14 @@ button:hover[disabled], button:hover.disabled, button:focus[disabled], button:fo } .footer-bottom p { font-family: "Roboto", sans-serif; - color: #525252; font-size: 16px; - line-height: 24px; + font-size: 1rem; + line-height: 1.5; font-weight: normal; + color: #525252; font-size: 14px; - line-height: 20px; + font-size: 0.875rem; + line-height: 1.3571428571; color: #F4F4F4; display: inline-block; } @@ -10138,10 +10709,11 @@ button:hover[disabled], button:hover.disabled, button:focus[disabled], button:fo } .genre-carousel-item .item-box .title { font-family: "Roboto", sans-serif; - color: #525252; font-size: 16px; - line-height: 24px; + font-size: 1rem; + line-height: 1.5; font-weight: normal; + color: #525252; color: #101820; font-weight: 700; margin-bottom: 15px; @@ -10157,12 +10729,14 @@ button:hover[disabled], button:hover.disabled, button:focus[disabled], button:fo } .genre-carousel-item .item-box .description { font-family: "Roboto", sans-serif; - color: #525252; font-size: 16px; - line-height: 24px; + font-size: 1rem; + line-height: 1.5; font-weight: normal; + color: #525252; font-size: 14px; - line-height: 20px; + font-size: 0.875rem; + line-height: 1.3571428571; display: block; } .theme-dark .genre-carousel-item .item-box .description { @@ -10274,16 +10848,20 @@ button:hover[disabled], button:hover.disabled, button:focus[disabled], button:fo } .genre-landing__item .item-box .title { font-family: "Roboto", sans-serif; - color: #525252; font-size: 18px; - line-height: 30px; + font-size: 1.125rem; margin: 20px 0; + margin: 1.25rem 0; + line-height: 1.6666666667; + color: #525252; font-weight: 700; font-family: "Roboto", sans-serif; - color: #525252; font-size: 18px; - line-height: 30px; + font-size: 1.125rem; margin: 20px 0; + margin: 1.25rem 0; + line-height: 1.6666666667; + color: #525252; color: #101820; margin-top: 0; } @@ -10299,10 +10877,11 @@ button:hover[disabled], button:hover.disabled, button:focus[disabled], button:fo } .genre-landing__item .item-box .description { font-family: "Roboto", sans-serif; - color: #525252; font-size: 16px; - line-height: 24px; + font-size: 1rem; + line-height: 1.5; font-weight: normal; + color: #525252; } .theme-dark .genre-landing__item .item-box .description { color: #FFFFFF; @@ -11035,10 +11614,11 @@ button:hover[disabled], button:hover.disabled, button:focus[disabled], button:fo } .nav-offscreen .subnav .is-active-auth { font-family: "Roboto", sans-serif; - color: #525252; font-size: 16px; - line-height: 24px; + font-size: 1rem; + line-height: 1.5; font-weight: normal; + color: #525252; color: #101820; font-weight: 700; font-size: 18px; @@ -11222,10 +11802,11 @@ button:hover[disabled], button:hover.disabled, button:focus[disabled], button:fo } .cmp-search__item-title { font-family: "Roboto", sans-serif; - color: #525252; font-size: 16px; - line-height: 24px; + font-size: 1rem; + line-height: 1.5; font-weight: normal; + color: #525252; color: #FFFFFF; text-decoration: underline; } @@ -11250,10 +11831,12 @@ button:hover[disabled], button:hover.disabled, button:focus[disabled], button:fo } .cmp-search__alert__message { font-family: "Roboto", sans-serif; - color: #525252; font-size: 18px; - line-height: 30px; + font-size: 1.125rem; margin: 20px 0; + margin: 1.25rem 0; + line-height: 1.6666666667; + color: #525252; color: #FFFFFF; padding-left: 38px; } @@ -11316,12 +11899,16 @@ body.is-open { #global-search-onscreen-toggle .search-icon::before, #global-search-onscreen-toggle .search-icon::after, #global-search-onscreen-toggle .cross-icon::before, #global-search-onscreen-toggle .cross-icon::after { + width: 16px; + width: 1rem; + height: 16px; + height: 1rem; + min-width: 16px; + min-width: 1rem; content: ""; position: absolute; top: 0; left: 0; - width: 16px; - height: 16px; background-size: contain; background-position: center; background-repeat: no-repeat; @@ -11356,12 +11943,16 @@ body.is-open { } #nav-onscreen .cmp-search--header { + width: 18px; + width: 1.125rem; + height: 18px; + height: 1.125rem; + min-width: 18px; + min-width: 1.125rem; content: ""; position: absolute; top: 0; right: 0; - width: 18px; - height: 18px; background-size: contain; background-position: center; background-repeat: no-repeat; @@ -11578,7 +12169,7 @@ body.is-open { border: none; } .login-container .sign-in:active .sign-in-btn { - background: #EDF2F4; + background: #edf2f4; } .login-container .sign-in::after:active, .login-container .sign-in::after:focus { outline: none; @@ -11712,8 +12303,6 @@ body.is-open { min-width: 16px; min-width: 1rem; display: block; - height: 16px; - width: 16px; background-size: contain; background-position: center; background-repeat: no-repeat; @@ -11755,7 +12344,10 @@ body.is-open { position: absolute; } #user-banner:focus { - outline: 2px solid #33C4E8; + outline: none; +} +#user-banner:focus:not(.sign-in--unauth) { + outline: 2px solid #33c4e8; outline-offset: 5px; } #user-banner:focus::after { @@ -11787,10 +12379,11 @@ body.is-open { .user-text span, .user-text a { font-family: "Roboto", sans-serif; - color: #525252; font-size: 16px; - line-height: 24px; + font-size: 1rem; + line-height: 1.5; font-weight: normal; + color: #525252; color: #101820; font-weight: 700; color: #FFFFFF; @@ -11853,33 +12446,21 @@ body.is-open { min-width: 200px; } } -.drop-down::before, .drop-down::after { - content: ""; - position: absolute; -} -.drop-down::before { - right: 0; - width: 100%; - height: 4px; - transition-property: background-color; - transition-duration: 150ms; - background-color: #FFFFFF; -} .drop-down ul { margin: 0; padding: 0; list-style: none; - padding-top: 4px; + padding: 0; position: absolute; - width: 100%; border-radius: 5px; box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.25); background-color: #FFFFFF; + width: 233px; + left: -37px; } .drop-down__item { font-family: "Roboto", sans-serif; - color: #525252; - font-size: 16px; + font-size: 14px; line-height: 24px; font-weight: normal; color: #101820; @@ -11893,42 +12474,19 @@ body.is-open { text-decoration: none; transition: background 150ms; } -.theme-dark .drop-down__item { - color: #FFFFFF; -} -.drop-down__item b, -.drop-down__item strong { - font-family: "Roboto", sans-serif; - color: #525252; - font-size: 16px; - line-height: 24px; - font-weight: normal; - color: #101820; - font-weight: 700; -} -.theme-dark .drop-down__item b, -.theme-dark .drop-down__item strong { - color: #FFFFFF; -} -.theme-dark .drop-down__item b, -.theme-dark .drop-down__item strong { - color: #FFFFFF; -} .drop-down__item:hover { cursor: pointer; - background: #E5F1FD; + background: #ccf0f9; } .drop-down__item:hover a { - text-decoration: underline; + text-decoration: none; +} +.drop-down__item:focus { + cursor: pointer; + background: #99e1f3; } .drop-down__item a { - font-family: "Roboto", sans-serif; - color: #525252; - font-size: 16px; - line-height: 24px; - font-weight: normal; - color: #101820; - padding: 10px 20px; + padding: 14px 14px; margin: 0; display: flex; flex-flow: row nowrap; @@ -11936,27 +12494,6 @@ body.is-open { width: 100%; align-items: flex-start; } -.theme-dark .drop-down__item a { - color: #FFFFFF; -} -.drop-down__item a b, -.drop-down__item a strong { - font-family: "Roboto", sans-serif; - color: #525252; - font-size: 16px; - line-height: 24px; - font-weight: normal; - color: #101820; - font-weight: 700; -} -.theme-dark .drop-down__item a b, -.theme-dark .drop-down__item a strong { - color: #FFFFFF; -} -.theme-dark .drop-down__item a b, -.theme-dark .drop-down__item a strong { - color: #FFFFFF; -} @media only screen and (min-width: 64em) and (max-width: 88.0625em) { .drop-down__item a { padding: 10px 10px; @@ -11971,16 +12508,13 @@ body.is-open { height: 24px; } .drop-down__item a span { - margin-left: 16px; + margin-left: 26px; display: block; position: relative; width: 100%; - max-width: 120px; align-self: center; line-height: 25px; -} -.drop-down__item a:focus { - outline-color: #183052; + color: #000; } .drop-down__item:last-child { border-top: 1px solid #DDDDDD; @@ -11995,13 +12529,14 @@ body.is-open { } .drop-down__active { font-family: "Roboto", sans-serif; - color: #525252; font-size: 16px; - line-height: 24px; + font-size: 1rem; + line-height: 1.5; font-weight: normal; + color: #525252; color: #101820; font-weight: 700; - background: #E5F1FD; + background: #99e1f3; } .theme-dark .drop-down__active { color: #FFFFFF; @@ -12384,12 +12919,16 @@ body.is-open { list-style: none; } .guided-content-recommendations .recommendation-tiles .tile .tile-body ul.tile-item li span::before { + width: 20px; + width: 1.25rem; + height: 20px; + height: 1.25rem; + min-width: 20px; + min-width: 1.25rem; content: ""; position: absolute; top: 0; right: 0; - width: 20px; - height: 20px; background-size: contain; background-position: center; background-repeat: no-repeat; @@ -12495,32 +13034,25 @@ body.is-open { } .cmp-custom-header__content { display: flex; - flex-direction: column; align-items: center; - flex: 1; - width: 100%; - max-width: 1360px; -} -.cmp-custom-header__upper { - display: flex; - align-items: flex-start; justify-content: space-between; - width: 100%; - max-width: 100%; padding: 16px 20px; + width: 100%; + max-width: 1360px; } @media only screen and (min-width: 64em) { - .cmp-custom-header__upper { + .cmp-custom-header__content { width: 1024px; + padding: 50px 40px; } } @media only screen and (min-width: 77.75em) { - .cmp-custom-header__upper { + .cmp-custom-header__content { width: 1244px; } } @media only screen and (min-width: 88.125em) { - .cmp-custom-header__upper { + .cmp-custom-header__content { width: 1360px; } } @@ -12545,6 +13077,7 @@ body.is-open { .cmp-custom-header__link-container { display: flex; flex-direction: column; + align-self: center; } .cmp-custom-header__link-container-upper { display: flex; @@ -12568,13 +13101,21 @@ body.is-open { height: 0; left: 0; bottom: -8px; - border-bottom: 4px solid #FFF; + border-bottom: 4px solid #fff; } .cmp-custom-header__list-upper li { display: inline-flex; align-items: center; margin-right: 34px; } +.cmp-custom-header__list-upper li:last-of-type { + margin-right: 58px; +} +@media only screen and (min-width: 77.75em) { + .cmp-custom-header__list-upper li:last-of-type { + margin-right: 34px; + } +} .cmp-custom-header__list-upper li a { position: relative; display: inline-flex; @@ -12606,6 +13147,7 @@ body.is-open { padding: 0; list-style: none; display: flex; + align-items: center; } .cmp-custom-header__list-lower li { margin-right: 32px; @@ -12625,12 +13167,12 @@ body.is-open { border-radius: 1px; } .cmp-custom-header__list-lower li a:active { - background: #D9D9D6; + background: #d9d9d6; } .cmp-custom-header .sign-in-btn { height: 45px; width: 104px; - background: #99E1F3; + background: #99e1f3; display: inline-flex; justify-content: center; align-items: center; @@ -12751,11 +13293,9 @@ body.is-open { } @media only screen and (min-width: 1024px) { .cmp-custom-header__logo-container { + min-width: 328px; max-width: 328px; } - .cmp-custom-header__upper { - padding: 50px 40px; - } .cmp-custom-header__list-upper { display: flex; align-items: flex-start; @@ -12814,9 +13354,10 @@ body.is-open { .hero-banner p { font-family: "Montserrat", sans-serif; font-weight: 700; - color: #101820; font-size: 20px; - line-height: 24px; + font-size: 1.25rem; + line-height: 1.2; + color: #101820; color: #FFFFFF; max-width: 860px; margin: 0 auto; @@ -12824,34 +13365,37 @@ body.is-open { } @media only screen and (min-width: 64em) { .hero-banner p { - line-height: 28px; + line-height: 1.4; } } .page-ausgov-home .hero-banner p, .page-mygov-home .hero-banner p { font-size: 24px; - line-height: 30px; + font-size: 1.5rem; + line-height: 1.25; } .hero-banner p b, .hero-banner p strong { font-family: "Montserrat", sans-serif; font-weight: 700; - color: #101820; font-size: 20px; - line-height: 24px; + font-size: 1.25rem; + line-height: 1.2; + color: #101820; color: #FFFFFF; font-weight: 700; } @media only screen and (min-width: 64em) { .hero-banner p b, .hero-banner p strong { - line-height: 28px; + line-height: 1.4; } } .page-ausgov-home .hero-banner p b, .page-mygov-home .hero-banner p b, .page-ausgov-home .hero-banner p strong, .page-mygov-home .hero-banner p strong { font-size: 24px; - line-height: 30px; + font-size: 1.5rem; + line-height: 1.25; } .hero-banner p a { text-decoration: underline; @@ -12945,10 +13489,12 @@ body.is-open { } .hero-banner.info p { font-family: "Roboto", sans-serif; - color: #525252; font-size: 18px; - line-height: 30px; + font-size: 1.125rem; margin: 20px 0; + margin: 1.25rem 0; + line-height: 1.6666666667; + color: #525252; color: #000000; font-weight: 300; margin-left: auto; @@ -12960,10 +13506,12 @@ body.is-open { .hero-banner.info p b, .hero-banner.info p strong { font-family: "Roboto", sans-serif; - color: #525252; font-size: 18px; - line-height: 30px; + font-size: 1.125rem; margin: 20px 0; + margin: 1.25rem 0; + line-height: 1.6666666667; + color: #525252; font-weight: 700; font-weight: 500; color: #000000; @@ -13058,9 +13606,10 @@ body.is-open { .hero-banner.aus-gov .cmp-text p { font-family: "Montserrat", sans-serif; font-weight: 700; - color: #101820; font-size: 20px; - line-height: 24px; + font-size: 1.25rem; + line-height: 1.2; + color: #101820; color: #FFFFFF; font-weight: 300; margin: 10px 0; @@ -13069,14 +13618,15 @@ body.is-open { @media only screen and (min-width: 64em) { .hero-banner.aus-gov p, .hero-banner.aus-gov .cmp-text p { - line-height: 28px; + line-height: 1.4; } } .page-ausgov-home .hero-banner.aus-gov p, .page-mygov-home .hero-banner.aus-gov p, .page-ausgov-home .hero-banner.aus-gov .cmp-text p, .page-mygov-home .hero-banner.aus-gov .cmp-text p { font-size: 24px; - line-height: 30px; + font-size: 1.5rem; + line-height: 1.25; } .hero-banner.aus-gov p b, .hero-banner.aus-gov p strong, @@ -13112,10 +13662,12 @@ body.is-open { } .hero-banner.aus-gov .link-container a:not(.btn) { font-family: "Roboto", sans-serif; - color: #525252; font-size: 18px; - line-height: 30px; + font-size: 1.125rem; margin: 20px 0; + margin: 1.25rem 0; + line-height: 1.6666666667; + color: #525252; color: #FFFFFF; font-weight: normal; margin: 20px 0; @@ -13240,19 +13792,43 @@ body.is-open { width: 100% !important; } +.modal__content--inbox { + width: unset !important; + margin: 0.5em; +} .modal__content--inbox .modal-header { display: flex; flex-direction: column; } +.modal__content--inbox .modal-header.inbox { + padding: 20px !important; +} +@media only screen and (min-width: 40em) { + .modal__content--inbox .modal-header.inbox { + padding: 30px !important; + } +} .modal__content--inbox .modal-header .modal-close-header { display: flex; justify-content: flex-end; align-items: center; } .modal__content--inbox .modal-header .modal-close-header .inbox-modal-close { + width: 14px; + width: 0.875rem; + height: 14px; + height: 0.875rem; + min-width: 14px; + min-width: 0.875rem; + display: block; + background-size: contain; + background-position: center; + background-repeat: no-repeat; border: none; background-color: transparent; text-decoration: underline; + background-size: auto; + background-image: url("styles/resources/assets/icons/icon-close-black.svg"); } .modal__content--inbox .inbox-modal-input { width: 100% !important; @@ -13261,6 +13837,7 @@ body.is-open { .link.action.searchbar-apply-filters-button, .action.searchbar-apply-filters-button.linked-services__rightInternalLink { display: flex; justify-content: flex-end; + color: var(--light-navy); align-items: center; margin-left: 2em; margin-top: 0.5em; @@ -13270,6 +13847,20 @@ body.is-open { justify-content: center; } } +.link.action.searchbar-apply-filters-button:hover, .action.searchbar-apply-filters-button.linked-services__rightInternalLink:hover, .link.action.searchbar-apply-filters-button:focus, .action.searchbar-apply-filters-button.linked-services__rightInternalLink:focus { + color: var(--light-navy); +} +.link.action.icon.inbox, .action.icon.inbox.linked-services__rightInternalLink { + color: var(--light-navy); +} +.link.action.icon.inbox:hover, .action.icon.inbox.linked-services__rightInternalLink:hover, .link.action.icon.inbox:focus, .action.icon.inbox.linked-services__rightInternalLink:focus { + color: var(--light-navy); +} + +select.inbox-select-sort-by { + color: var(--light-navy) !important; + text-decoration: underline; +} .search-icon { height: 24px; @@ -13335,7 +13926,7 @@ body.is-open { } .inbox-sortby-label { - margin: 0; + margin: 0 !important; } .input-group.input-group--sort.inbox { @@ -13345,6 +13936,7 @@ body.is-open { } .input-group.input-group--sort.inbox select { background-color: transparent; + background-image: none; } .display-filters-button { @@ -13354,6 +13946,9 @@ body.is-open { justify-content: center; } +.authenticated-inbox { + margin-top: -1em; +} @media (max-width: 63.9375em) { .authenticated-inbox .section-heading { display: none; @@ -13389,7 +13984,6 @@ body.is-open { display: flex; position: relative; margin: 0; - padding-top: 10px; flex-grow: 1; } .authenticated-inbox .inbox-search .input-row.search-box--skeleton { @@ -13435,7 +14029,7 @@ body.is-open { } .authenticated-inbox .inbox-search .input-row.search-box .search-clear-button:focus, .authenticated-inbox .inbox-search .input-row.search-box .search-clear-button:hover { background-color: black; - color: white; + color: white !important; height: 48px; } @media only screen and (min-width: 64em) { @@ -13480,12 +14074,16 @@ body.is-open { padding-right: 37px; } .authenticated-inbox .inbox-search .input-row.search-box .search-box__search span::after { + width: 28px; + width: 1.75rem; + height: 28px; + height: 1.75rem; + min-width: 28px; + min-width: 1.75rem; content: ""; position: absolute; top: 0; right: 0; - width: 28px; - height: 28px; background-size: contain; background-position: center; background-repeat: no-repeat; @@ -13514,12 +14112,16 @@ body.is-open { display: none; } .authenticated-inbox .inbox-search .input-row.search-box .search-box__submit::before { + width: 20px; + width: 1.25rem; + height: 20px; + height: 1.25rem; + min-width: 20px; + min-width: 1.25rem; content: ""; position: absolute; top: 0; left: 0; - width: 20px; - height: 20px; background-size: contain; background-position: center; background-repeat: no-repeat; @@ -13580,6 +14182,7 @@ body.is-open { display: flex; flex-direction: column; gap: 20px; + flex-grow: 1; } @media only screen and (min-width: 48em) { .authenticated-inbox .inbox-search__advanced .short-filter-row { @@ -13613,11 +14216,11 @@ body.is-open { display: flex; justify-content: center; align-items: center; + max-height: 48px; } @media only screen and (min-width: 40em) { .authenticated-inbox .inbox-search__advanced .button-input-row .btn.apply-filters { width: unset; - padding: 0; } } .authenticated-inbox .inbox-search__advanced .button-input-row .btn.apply-filters .apply-filters-chevron { @@ -13675,10 +14278,11 @@ body.is-open { } .authenticated-inbox .inbox-no-message__message { font-family: "Roboto", sans-serif; - color: #525252; font-size: 16px; - line-height: 24px; + font-size: 1rem; + line-height: 1.5; font-weight: normal; + color: #525252; margin: 30px 0; text-align: center; } @@ -13693,8 +14297,6 @@ body.is-open { @media (max-width: 63.9375em) { .authenticated-inbox .inbox-list { flex-direction: column; - width: 100vw; - margin-left: -20px; } } .authenticated-inbox .inbox-list .action-menu { @@ -13742,10 +14344,11 @@ body.is-open { .authenticated-inbox .inbox-list > ul > li > a, .authenticated-inbox .inbox-list > ul > li > label { font-family: "Roboto", sans-serif; - color: #525252; font-size: 16px; - line-height: 24px; + font-size: 1rem; + line-height: 1.5; font-weight: normal; + color: #525252; color: #101820; display: block; margin: 0; @@ -13762,10 +14365,11 @@ body.is-open { .authenticated-inbox .inbox-list > ul > li > label b, .authenticated-inbox .inbox-list > ul > li > label strong { font-family: "Roboto", sans-serif; - color: #525252; font-size: 16px; - line-height: 24px; + font-size: 1rem; + line-height: 1.5; font-weight: normal; + color: #525252; color: #101820; font-weight: 700; } @@ -13824,10 +14428,11 @@ body.is-open { } .authenticated-inbox .inbox-list__folders .list-title, .authenticated-inbox .inbox-list__messages .list-title { font-family: "Roboto", sans-serif; - color: #525252; font-size: 16px; - line-height: 24px; + font-size: 1rem; + line-height: 1.5; font-weight: normal; + color: #525252; color: #101820; font-weight: 700; margin: 0; @@ -13853,10 +14458,11 @@ body.is-open { .authenticated-inbox .inbox-list__folders ul > li > label, .authenticated-inbox .inbox-list__messages ul > li > a, .authenticated-inbox .inbox-list__messages ul > li > label { font-family: "Roboto", sans-serif; - color: #525252; font-size: 16px; - line-height: 24px; + font-size: 1rem; + line-height: 1.5; font-weight: normal; + color: #525252; color: #101820; display: block; margin: 0; @@ -13877,10 +14483,11 @@ body.is-open { .authenticated-inbox .inbox-list__messages ul > li > label b, .authenticated-inbox .inbox-list__messages ul > li > label strong { font-family: "Roboto", sans-serif; - color: #525252; font-size: 16px; - line-height: 24px; + font-size: 1rem; + line-height: 1.5; font-weight: normal; + color: #525252; color: #101820; font-weight: 700; } @@ -13959,10 +14566,14 @@ body.is-open { visibility: visible; opacity: 1; max-height: 1650px; - margin-bottom: 40px; transition: max-height 450ms, opacity 450ms, margin 450ms, visibility 0s linear; } } +@media only screen and (max-width: 63.9375em) and (min-width: 64em) { + .authenticated-inbox .inbox-list__folders.is-visible { + margin-bottom: 40px; + } +} @media only screen and (min-width: 64em) { .authenticated-inbox .inbox-list__folders { width: 240px; @@ -13983,10 +14594,11 @@ body.is-open { .authenticated-inbox .inbox-list__folders ul > li > a, .authenticated-inbox .inbox-list__folders ul > li > label { font-family: "Roboto", sans-serif; - color: #525252; font-size: 16px; - line-height: 24px; + font-size: 1rem; + line-height: 1.5; font-weight: normal; + color: #525252; color: #101820; display: block; margin: 0; @@ -14005,10 +14617,11 @@ body.is-open { .authenticated-inbox .inbox-list__folders ul > li > label b, .authenticated-inbox .inbox-list__folders ul > li > label strong { font-family: "Roboto", sans-serif; - color: #525252; font-size: 16px; - line-height: 24px; + font-size: 1rem; + line-height: 1.5; font-weight: normal; + color: #525252; color: #101820; font-weight: 700; } @@ -14082,12 +14695,16 @@ body.is-open { } .authenticated-inbox .inbox-list__folders ul > li > a::before, .authenticated-inbox .inbox-list__folders ul > li > label::before { + width: 20px; + width: 1.25rem; + height: 20px; + height: 1.25rem; + min-width: 20px; + min-width: 1.25rem; content: ""; position: absolute; top: 0; left: 0; - width: 20px; - height: 20px; background-size: contain; background-position: center; background-repeat: no-repeat; @@ -14102,6 +14719,10 @@ body.is-open { .authenticated-inbox .inbox-list__folders ul > li > label.is-trash::before { background-image: url("styles/resources/assets/icons/authenticated/icon-trash.svg"); } +.authenticated-inbox .inbox-list__folders ul > li > a.top-level-inbox::before, +.authenticated-inbox .inbox-list__folders ul > li > label.top-level-inbox::before { + background-image: url("styles/resources/assets/icons/icon-email.svg"); +} .authenticated-inbox .inbox-list__folders ul > li > a.is-selected, .authenticated-inbox .inbox-list__folders ul > li > label.is-selected { background: #E5F1FD; @@ -14144,10 +14765,11 @@ body.is-open { } .authenticated-inbox .inbox-list__folders .btn-add-folder { font-family: "Roboto", sans-serif; - color: #525252; font-size: 16px; - line-height: 24px; + font-size: 1rem; + line-height: 1.5; font-weight: normal; + color: #525252; color: #101820; padding: 20px 20px 20px 62px; border: 0; @@ -14163,10 +14785,11 @@ body.is-open { .authenticated-inbox .inbox-list__folders .btn-add-folder b, .authenticated-inbox .inbox-list__folders .btn-add-folder strong { font-family: "Roboto", sans-serif; - color: #525252; font-size: 16px; - line-height: 24px; + font-size: 1rem; + line-height: 1.5; font-weight: normal; + color: #525252; color: #101820; font-weight: 700; } @@ -14182,20 +14805,24 @@ body.is-open { background: #E5F1FD; } .authenticated-inbox .inbox-list__folders .btn-add-folder::before { + width: 20px; + width: 1.25rem; + height: 20px; + height: 1.25rem; + min-width: 20px; + min-width: 1.25rem; content: ""; position: absolute; top: 0; left: 0; - width: 30px; - height: 30px; background-size: contain; background-position: center; background-repeat: no-repeat; transition-property: transform, margin; transition-duration: 300ms; transition-timing-function: ease; - background-image: url("styles/resources/assets/icons/authenticated/icon-add.svg"); - top: 14px; + background-image: url("styles/resources/assets/icons/ia/add_box.svg"); + top: 20px; left: 20px; } .authenticated-inbox .inbox-list__folders .btn-add-folder--skeleton { @@ -14226,10 +14853,11 @@ body.is-open { } .authenticated-inbox .inbox-list__messages .communication-item.is-unread .communication-item__preview { font-family: "Roboto", sans-serif; - color: #525252; font-size: 16px; - line-height: 24px; + font-size: 1rem; + line-height: 1.5; font-weight: normal; + color: #525252; color: #101820; font-weight: 700; } @@ -14239,13 +14867,18 @@ body.is-open { .theme-dark .authenticated-inbox .inbox-list__messages .communication-item.is-unread .communication-item__preview { color: #FFFFFF; } +.authenticated-inbox .inbox-list__messages .communication-item.is-unread .communication-item__provider { + color: var(--light-navy); + font-weight: var(--font-weight-bold); +} .authenticated-inbox .inbox-list__messages .communication-item.is-unread::before { + filter: none; content: ""; position: absolute; top: 0; left: 0; - border-top: 8px solid #006CE0; - border-left: 8px solid #006CE0; + border-top: 8px solid var(--ocean-blue-40); + border-left: 8px solid var(--ocean-blue-40); border-bottom: 8px solid transparent; border-right: 8px solid transparent; } @@ -14264,54 +14897,32 @@ body.is-open { } } .authenticated-inbox .inbox-list__messages .communication-item__provider { - font-family: "Roboto", sans-serif; - color: #525252; - font-size: 16px; - line-height: 24px; - font-weight: normal; - color: #101820; margin: 0 auto 0 0; -} -.theme-dark .authenticated-inbox .inbox-list__messages .communication-item__provider { - color: #FFFFFF; -} -.authenticated-inbox .inbox-list__messages .communication-item__provider b, -.authenticated-inbox .inbox-list__messages .communication-item__provider strong { - font-family: "Roboto", sans-serif; - color: #525252; - font-size: 16px; - line-height: 24px; - font-weight: normal; - color: #101820; - font-weight: 700; -} -.theme-dark .authenticated-inbox .inbox-list__messages .communication-item__provider b, -.theme-dark .authenticated-inbox .inbox-list__messages .communication-item__provider strong { - color: #FFFFFF; -} -.theme-dark .authenticated-inbox .inbox-list__messages .communication-item__provider b, -.theme-dark .authenticated-inbox .inbox-list__messages .communication-item__provider strong { - color: #FFFFFF; + font-size: var(--font-size-18); + color: var(--black); } .authenticated-inbox .inbox-list__messages .communication-item__date { - font-family: "Roboto", sans-serif; - color: #525252; - font-size: 16px; - line-height: 24px; - font-weight: normal; - font-size: 14px; - line-height: 20px; + font-size: var(--font-size-15); + font-weight: var(--font-weight-normal); margin: 0 0 0 15px; + display: flex; + align-items: center; } -.theme-dark .authenticated-inbox .inbox-list__messages .communication-item__date { - color: #FFFFFF; +.authenticated-inbox .inbox-list__messages .communication-item__date-icon { + display: block; + height: 24px; + width: 24px; + background-repeat: no-repeat; + background-position: center; + background-image: url("styles/resources/assets/icons/ia/chevron-light-navy-right.svg"); } .authenticated-inbox .inbox-list__messages .communication-item__preview { font-family: "Roboto", sans-serif; - color: #525252; font-size: 16px; - line-height: 24px; + font-size: 1rem; + line-height: 1.5; font-weight: normal; + color: #525252; margin: 0; } .theme-dark .authenticated-inbox .inbox-list__messages .communication-item__preview { @@ -14339,13 +14950,15 @@ body.is-open { } .authenticated-inbox .inbox-list__messages .communication-item__attachment { font-family: "Roboto", sans-serif; - color: #525252; font-size: 16px; - line-height: 24px; + font-size: 1rem; + line-height: 1.5; font-weight: normal; + color: #525252; font-size: 14px; - line-height: 20px; - margin: 0 0 0 15px; + font-size: 0.875rem; + line-height: 1.3571428571; + margin: 0 22px 0 15px; padding-right: 22px; white-space: nowrap; position: relative; @@ -14354,12 +14967,16 @@ body.is-open { color: #FFFFFF; } .authenticated-inbox .inbox-list__messages .communication-item__attachment::after { + width: 16px; + width: 1rem; + height: 16px; + height: 1rem; + min-width: 16px; + min-width: 1rem; content: ""; position: absolute; top: 0; right: 0; - width: 16px; - height: 16px; background-size: contain; background-position: center; background-repeat: no-repeat; @@ -14377,12 +14994,16 @@ body.is-open { padding-left: 22px; } .authenticated-inbox .inbox-list__messages .communication-item__attachment::before { + width: 16px; + width: 1rem; + height: 16px; + height: 1rem; + min-width: 16px; + min-width: 1rem; content: ""; position: absolute; top: 0; left: 0; - width: 16px; - height: 16px; background-size: contain; background-position: center; background-repeat: no-repeat; @@ -14483,26 +15104,29 @@ body.is-open { .authenticated-inbox .inbox-list__mobile-heading-bar .list-title { font-family: "Montserrat", sans-serif; font-weight: 700; - color: #101820; font-size: 20px; - line-height: 24px; + font-size: 1.25rem; + line-height: 1.2; + color: #101820; margin: 0; } @media only screen and (min-width: 64em) { .authenticated-inbox .inbox-list__mobile-heading-bar .list-title { - line-height: 28px; + line-height: 1.4; } } .page-ausgov-home .authenticated-inbox .inbox-list__mobile-heading-bar .list-title, .page-mygov-home .authenticated-inbox .inbox-list__mobile-heading-bar .list-title { font-size: 24px; - line-height: 30px; + font-size: 1.5rem; + line-height: 1.25; } .authenticated-inbox .inbox-list__mobile-heading-bar .unread-count { font-family: "Roboto", sans-serif; - color: #525252; font-size: 16px; - line-height: 24px; + font-size: 1rem; + line-height: 1.5; font-weight: normal; + color: #525252; color: #101820; line-height: 1.2; margin: 0 0 0 15px; @@ -14513,10 +15137,11 @@ body.is-open { .authenticated-inbox .inbox-list__mobile-heading-bar .unread-count b, .authenticated-inbox .inbox-list__mobile-heading-bar .unread-count strong { font-family: "Roboto", sans-serif; - color: #525252; font-size: 16px; - line-height: 24px; + font-size: 1rem; + line-height: 1.5; font-weight: normal; + color: #525252; color: #101820; font-weight: 700; } @@ -14537,6 +15162,9 @@ body.is-open { margin-bottom: 40px; } } +.authenticated-inbox .inbox-list__communication-view { + width: 100%; +} .authenticated-inbox .inbox-list__communication-view .communication-actions { display: flex; align-items: center; @@ -14603,35 +15231,9 @@ body.is-open { } } .authenticated-inbox .inbox-list__communication-view .communication-content__header .comm-provider { - font-family: "Roboto", sans-serif; - color: #525252; - font-size: 16px; - line-height: 24px; - font-weight: normal; - color: #101820; margin: 0 0 15px; max-width: calc(100% - 190px); -} -.theme-dark .authenticated-inbox .inbox-list__communication-view .communication-content__header .comm-provider { - color: #FFFFFF; -} -.authenticated-inbox .inbox-list__communication-view .communication-content__header .comm-provider b, -.authenticated-inbox .inbox-list__communication-view .communication-content__header .comm-provider strong { - font-family: "Roboto", sans-serif; - color: #525252; - font-size: 16px; - line-height: 24px; - font-weight: normal; - color: #101820; - font-weight: 700; -} -.theme-dark .authenticated-inbox .inbox-list__communication-view .communication-content__header .comm-provider b, -.theme-dark .authenticated-inbox .inbox-list__communication-view .communication-content__header .comm-provider strong { - color: #FFFFFF; -} -.theme-dark .authenticated-inbox .inbox-list__communication-view .communication-content__header .comm-provider b, -.theme-dark .authenticated-inbox .inbox-list__communication-view .communication-content__header .comm-provider strong { - color: #FFFFFF; + font-size: var(--font-size-18); } @media only screen and (max-width: 29.9375em) { .authenticated-inbox .inbox-list__communication-view .communication-content__header .comm-provider { @@ -14641,10 +15243,12 @@ body.is-open { } .authenticated-inbox .inbox-list__communication-view .communication-content__header .comm-subject { font-family: "Roboto", sans-serif; - color: #525252; font-size: 18px; - line-height: 30px; + font-size: 1.125rem; margin: 20px 0; + margin: 1.25rem 0; + line-height: 1.6666666667; + color: #525252; font-weight: 700; color: #101820; margin: 0 0 10px; @@ -14654,10 +15258,11 @@ body.is-open { } .authenticated-inbox .inbox-list__communication-view .communication-content__header .comm-expiry { font-family: "Roboto", sans-serif; - color: #525252; font-size: 16px; - line-height: 24px; + font-size: 1rem; + line-height: 1.5; font-weight: normal; + color: #525252; font-size: 14px; margin: 10px 0; } @@ -14677,12 +15282,14 @@ body.is-open { } .authenticated-inbox .inbox-list__communication-view .communication-content__header .comm-date { font-family: "Roboto", sans-serif; - color: #525252; font-size: 16px; - line-height: 24px; + font-size: 1rem; + line-height: 1.5; font-weight: normal; + color: #525252; font-size: 14px; - line-height: 20px; + font-size: 0.875rem; + line-height: 1.3571428571; margin: 0; max-width: 190px; } @@ -14703,6 +15310,7 @@ body.is-open { } } .authenticated-inbox .inbox-list__communication-view .communication-content__header .comm-attachment { + width: 100%; display: inline-block; padding: 10px; margin-right: 10px; @@ -14717,7 +15325,7 @@ body.is-open { } .authenticated-inbox .inbox-list__communication-view .communication-content__header .comm-attachment:hover, .authenticated-inbox .inbox-list__communication-view .communication-content__header .comm-attachment:focus { background: #E5F1FD; - border-color: #006CE0; + border-color: var(--light-navy); } .authenticated-inbox .inbox-list__communication-view .communication-content__header .comm-attachment:hover .comm-attachment__name, .authenticated-inbox .inbox-list__communication-view .communication-content__header .comm-attachment:focus .comm-attachment__name { text-decoration: underline; @@ -14736,8 +15344,6 @@ body.is-open { min-width: 20px; min-width: 1.25rem; display: block; - height: 20px; - width: 20px; background-size: contain; background-position: center; background-repeat: no-repeat; @@ -14753,8 +15359,6 @@ body.is-open { min-width: 20px; min-width: 1.25rem; display: block; - height: 20px; - width: 20px; background-size: contain; background-position: center; background-repeat: no-repeat; @@ -14764,24 +15368,27 @@ body.is-open { } .authenticated-inbox .inbox-list__communication-view .communication-content__header .comm-attachment__name { font-family: "Roboto", sans-serif; - color: #525252; font-size: 16px; - line-height: 24px; + font-size: 1rem; + line-height: 1.5; font-weight: normal; + color: #525252; margin: 0; - color: #006CE0; + color: var(--light-navy); } .theme-dark .authenticated-inbox .inbox-list__communication-view .communication-content__header .comm-attachment__name { color: #FFFFFF; } .authenticated-inbox .inbox-list__communication-view .communication-content__header .comm-attachment__size { font-family: "Roboto", sans-serif; - color: #525252; font-size: 16px; - line-height: 24px; + font-size: 1rem; + line-height: 1.5; font-weight: normal; + color: #525252; font-size: 14px; - line-height: 20px; + font-size: 0.875rem; + line-height: 1.3571428571; margin: 3px 7px 0 0; padding-right: 7px; } @@ -14863,8 +15470,6 @@ body.is-open { min-width: 70px; min-width: 4.375rem; display: block; - height: 70px; - width: 70px; background-size: contain; background-position: center; background-repeat: no-repeat; @@ -14872,10 +15477,11 @@ body.is-open { } .authenticated-inbox .spinner-overlay__message { font-family: "Roboto", sans-serif; - color: #525252; font-size: 16px; - line-height: 24px; + font-size: 1rem; + line-height: 1.5; font-weight: normal; + color: #525252; color: #101820; margin: 12px 0 0; } @@ -14885,10 +15491,11 @@ body.is-open { .authenticated-inbox .spinner-overlay__message b, .authenticated-inbox .spinner-overlay__message strong { font-family: "Roboto", sans-serif; - color: #525252; font-size: 16px; - line-height: 24px; + font-size: 1rem; + line-height: 1.5; font-weight: normal; + color: #525252; color: #101820; font-weight: 700; } @@ -14916,10 +15523,11 @@ body.is-open { } .info-banner__text { font-family: "Roboto", sans-serif; - color: #525252; font-size: 16px; - line-height: 24px; + font-size: 1rem; + line-height: 1.5; font-weight: normal; + color: #525252; margin: 0 0 15px; } .theme-dark .info-banner__text { @@ -14948,12 +15556,16 @@ body.is-open { font-size: 16px; } .info-banner__cta.link.action::after, .info-banner__cta.action.linked-services__rightInternalLink::after { + width: 16px; + width: 1rem; + height: 16px; + height: 1rem; + min-width: 16px; + min-width: 1rem; content: ""; position: absolute; top: 0; right: 0; - width: 16px; - height: 16px; background-size: contain; background-position: center; background-repeat: no-repeat; @@ -15013,10 +15625,12 @@ body.is-open { } .key-message-container .cmp-text { font-family: "Roboto", sans-serif; - color: #525252; font-size: 18px; - line-height: 30px; + font-size: 1.125rem; margin: 20px 0; + margin: 1.25rem 0; + line-height: 1.6666666667; + color: #525252; position: relative; display: block; max-width: 100%; @@ -15031,10 +15645,12 @@ body.is-open { } .key-message-container .cmp-text p { font-family: "Roboto", sans-serif; - color: #525252; font-size: 18px; - line-height: 30px; + font-size: 1.125rem; margin: 20px 0; + margin: 1.25rem 0; + line-height: 1.6666666667; + color: #525252; margin: 0; padding: 0; } @@ -15098,12 +15714,14 @@ body.is-open { } .latest-updates .list__date { font-family: "Roboto", sans-serif; - color: #525252; font-size: 16px; - line-height: 24px; + font-size: 1rem; + line-height: 1.5; font-weight: normal; + color: #525252; font-size: 14px; - line-height: 20px; + font-size: 0.875rem; + line-height: 1.3571428571; height: 30px; margin: 0; line-height: 2.14; @@ -15136,10 +15754,11 @@ body.is-open { } .latest-updates .list__description { font-family: "Roboto", sans-serif; - color: #525252; font-size: 16px; - line-height: 24px; + font-size: 1rem; + line-height: 1.5; font-weight: normal; + color: #525252; margin: 0 0 12px 0; color: #525252; } @@ -15178,10 +15797,11 @@ body.is-open { } .latest-updates-archived .latest-updates-container .results-info { font-family: "Roboto", sans-serif; - color: #525252; font-size: 16px; - line-height: 24px; + font-size: 1rem; + line-height: 1.5; font-weight: normal; + color: #525252; color: #101820; } .theme-dark .latest-updates-archived .latest-updates-container .results-info { @@ -15190,10 +15810,11 @@ body.is-open { .latest-updates-archived .latest-updates-container .results-info b, .latest-updates-archived .latest-updates-container .results-info strong { font-family: "Roboto", sans-serif; - color: #525252; font-size: 16px; - line-height: 24px; + font-size: 1rem; + line-height: 1.5; font-weight: normal; + color: #525252; color: #101820; font-weight: 700; } @@ -15207,10 +15828,11 @@ body.is-open { } .latest-updates-archived .latest-updates-container .results-info .bold { font-family: "Roboto", sans-serif; - color: #525252; font-size: 16px; - line-height: 24px; + font-size: 1rem; + line-height: 1.5; font-weight: normal; + color: #525252; color: #101820; } .theme-dark .latest-updates-archived .latest-updates-container .results-info .bold { @@ -15219,10 +15841,11 @@ body.is-open { .latest-updates-archived .latest-updates-container .results-info .bold b, .latest-updates-archived .latest-updates-container .results-info .bold strong { font-family: "Roboto", sans-serif; - color: #525252; font-size: 16px; - line-height: 24px; + font-size: 1rem; + line-height: 1.5; font-weight: normal; + color: #525252; color: #101820; font-weight: 700; } @@ -15344,12 +15967,14 @@ body.is-open { .latest-updates-archived .latest-updates-item .item-box .category__list, .latest-updates-archived .latest-updates-item-skeleton .item-box .category__list { font-family: "Roboto", sans-serif; - color: #525252; font-size: 16px; - line-height: 24px; + font-size: 1rem; + line-height: 1.5; font-weight: normal; + color: #525252; font-size: 14px; - line-height: 20px; + font-size: 0.875rem; + line-height: 1.3571428571; color: #101820; position: relative; display: block; @@ -15364,10 +15989,11 @@ body.is-open { .latest-updates-archived .latest-updates-item .item-box .category__list, .latest-updates-archived .latest-updates-item-skeleton .item-box .category__list { font-family: "Roboto", sans-serif; - color: #525252; font-size: 16px; - line-height: 24px; + font-size: 1rem; + line-height: 1.5; font-weight: normal; + color: #525252; color: #101820; } .theme-dark .latest-updates-archived .latest-updates-item .item-box .category__list, @@ -15379,10 +16005,11 @@ body.is-open { .latest-updates-archived .latest-updates-item-skeleton .item-box .category__list b, .latest-updates-archived .latest-updates-item-skeleton .item-box .category__list strong { font-family: "Roboto", sans-serif; - color: #525252; font-size: 16px; - line-height: 24px; + font-size: 1rem; + line-height: 1.5; font-weight: normal; + color: #525252; color: #101820; font-weight: 700; } @@ -15419,10 +16046,11 @@ body.is-open { .latest-updates-archived .latest-updates-item .item-box .date, .latest-updates-archived .latest-updates-item-skeleton .item-box .date { font-family: "Roboto", sans-serif; - color: #525252; font-size: 16px; - line-height: 24px; + font-size: 1rem; + line-height: 1.5; font-weight: normal; + color: #525252; margin: 0 0 5px 0; font-weight: 400; } @@ -15439,10 +16067,11 @@ body.is-open { .latest-updates-archived .latest-updates-item .item-box .title, .latest-updates-archived .latest-updates-item-skeleton .item-box .title { font-family: "Roboto", sans-serif; - color: #525252; font-size: 16px; - line-height: 24px; + font-size: 1rem; + line-height: 1.5; font-weight: normal; + color: #525252; color: #101820; font-weight: 700; font-size: 18px; @@ -15460,10 +16089,11 @@ body.is-open { .latest-updates-archived .latest-updates-item .item-box .description, .latest-updates-archived .latest-updates-item-skeleton .item-box .description { font-family: "Roboto", sans-serif; - color: #525252; font-size: 16px; - line-height: 24px; + font-size: 1rem; + line-height: 1.5; font-weight: normal; + color: #525252; margin: 0; } .theme-dark .latest-updates-archived .latest-updates-item .item-box .description, @@ -15491,10 +16121,11 @@ body.is-open { } .filter-container .filter__info { font-family: "Roboto", sans-serif; - color: #525252; font-size: 16px; - line-height: 24px; + font-size: 1rem; + line-height: 1.5; font-weight: normal; + color: #525252; margin-bottom: 20px; } .theme-dark .filter-container .filter__info { @@ -15502,16 +16133,20 @@ body.is-open { } .filter-container .filter__subheading { font-family: "Roboto", sans-serif; - color: #525252; font-size: 18px; - line-height: 30px; + font-size: 1.125rem; margin: 20px 0; + margin: 1.25rem 0; + line-height: 1.6666666667; + color: #525252; font-weight: 700; font-family: "Roboto", sans-serif; - color: #525252; font-size: 18px; - line-height: 30px; + font-size: 1.125rem; margin: 20px 0; + margin: 1.25rem 0; + line-height: 1.6666666667; + color: #525252; color: #101820; } .theme-dark .filter-container .filter__subheading { @@ -15696,10 +16331,11 @@ body.is-open { } .latest-updates-carousel-item .item-box .title { font-family: "Roboto", sans-serif; - color: #525252; font-size: 16px; - line-height: 24px; + font-size: 1rem; + line-height: 1.5; font-weight: normal; + color: #525252; color: #101820; font-weight: 700; margin-top: 0; @@ -15714,10 +16350,11 @@ body.is-open { } .latest-updates-carousel-item .item-box .description { font-family: "Roboto", sans-serif; - color: #525252; font-size: 16px; - line-height: 24px; + font-size: 1rem; + line-height: 1.5; font-weight: normal; + color: #525252; } .theme-dark .latest-updates-carousel-item .item-box .description { color: #FFFFFF; @@ -15739,15 +16376,16 @@ body.is-open { margin-left: 5px; } -.cmp-link, .cmp-link--light { +.cmp-link, .cmp-sign-in-teaser > .cmp-experiencefragment a:not(.cmp-button), .cmp-link--light { position: relative; color: #254A7E; font-size: 1.125rem; line-height: 1.5rem; + font-weight: normal; transition: 150ms ease; text-decoration: underline; } -.cmp-link::after, .cmp-link--light::after { +.cmp-link::after, .cmp-sign-in-teaser > .cmp-experiencefragment a:not(.cmp-button)::after, .cmp-link--light::after { content: ""; display: none; position: absolute; @@ -15758,27 +16396,27 @@ body.is-open { border-radius: 2px; border: 2px solid #183052; } -.cmp-link:hover, .cmp-link--light:hover, .cmp-link:focus, .cmp-link--light:focus, .cmp-link:active, .cmp-link--light:active { +.cmp-link:hover, .cmp-sign-in-teaser > .cmp-experiencefragment a:hover:not(.cmp-button), .cmp-link--light:hover, .cmp-link:focus, .cmp-sign-in-teaser > .cmp-experiencefragment a:focus:not(.cmp-button), .cmp-link--light:focus, .cmp-link:active, .cmp-sign-in-teaser > .cmp-experiencefragment a:active:not(.cmp-button), .cmp-link--light:active { text-decoration: none; } -.cmp-link:hover, .cmp-link--light:hover { +.cmp-link:hover, .cmp-sign-in-teaser > .cmp-experiencefragment a:hover:not(.cmp-button), .cmp-link--light:hover { color: #FFFFFF; background: #254A7E; } -.cmp-link:focus, .cmp-link--light:focus { +.cmp-link:focus, .cmp-sign-in-teaser > .cmp-experiencefragment a:focus:not(.cmp-button), .cmp-link--light:focus { color: #FFFFFF; background: #254A7E; outline: none; } -.cmp-link:focus::after, .cmp-link--light:focus::after { +.cmp-link:focus::after, .cmp-sign-in-teaser > .cmp-experiencefragment a:focus:not(.cmp-button)::after, .cmp-link--light:focus::after { display: block; } -.cmp-link:active, .cmp-link--light:active { +.cmp-link:active, .cmp-sign-in-teaser > .cmp-experiencefragment a:active:not(.cmp-button), .cmp-link--light:active { color: #FFFFFF; background: #183052; outline: none; } -.cmp-link:active::after, .cmp-link--light:active::after { +.cmp-link:active::after, .cmp-sign-in-teaser > .cmp-experiencefragment a:active:not(.cmp-button)::after, .cmp-link--light:active::after { display: block; } .cmp-link--light { @@ -15796,7 +16434,7 @@ body.is-open { .cmp-link--light::after { border: 2px solid #33C4E8; } -.cmp-link.lg, .lg.cmp-link--light { +.cmp-link.lg, .cmp-sign-in-teaser > .cmp-experiencefragment a.lg:not(.cmp-button), .lg.cmp-link--light { font-size: 1.75rem; line-height: 2.5rem; font-weight: 300; @@ -15853,10 +16491,12 @@ body.is-open { } .link-tiles__tile > a { font-family: "Roboto", sans-serif; - color: #525252; font-size: 18px; - line-height: 30px; + font-size: 1.125rem; margin: 20px 0; + margin: 1.25rem 0; + line-height: 1.6666666667; + color: #525252; font-weight: 700; margin: 0 0 0 15px; text-decoration: none; @@ -15900,8 +16540,6 @@ body.is-open { min-width: 32px; min-width: 2rem; display: block; - height: 32px; - width: 32px; background-size: contain; background-position: center; background-repeat: no-repeat; @@ -15977,10 +16615,12 @@ body.is-open { .linked-services p { font-family: "Roboto", sans-serif; - color: #525252; font-size: 18px; - line-height: 30px; + font-size: 1.125rem; margin: 20px 0; + margin: 1.25rem 0; + line-height: 1.6666666667; + color: #525252; color: #101820; max-width: 770px; } @@ -16061,10 +16701,12 @@ body.is-open { } .linked-services__list--item .list-link__title { font-family: "Roboto", sans-serif; - color: #525252; font-size: 18px; - line-height: 30px; + font-size: 1.125rem; margin: 20px 0; + margin: 1.25rem 0; + line-height: 1.6666666667; + color: #525252; font-weight: 700; color: #333333; line-height: 24px; @@ -16155,46 +16797,36 @@ body.is-open { .linked-services-tile__block--title-dateStr { font-weight: normal; } -.linked-services-tile__block--label-link { +.linked-services-tile__block--label { display: flex; - flex-direction: row; - margin-right: 0.625rem; - padding: 0.3125rem 1.04375rem; - border: 0.125rem solid #183052; - float: left; + flex-flow: row nowrap; } -.linked-services-tile__block--label-link:hover { - cursor: pointer; +.linked-services-tile__block--label button.btn { + display: block; + height: 3rem; } -.linked-services-tile__block--label-link-text { - color: #183052; - font-weight: 500; - font-size: var(--font-size-15); +.linked-services-tile__block--label-sso-link { + display: flex !important; + flex-direction: row; + min-width: 12rem !important; + margin-right: 0.625rem; } -.linked-services-tile__block--label-link-icon { - margin-right: 0.3125rem; +.linked-services-tile__block--label-sso-link i { + margin-right: 0.625rem; width: 1.2rem; - height: 1.4rem; - background: white url("styles/resources/assets/icons/icon-external-link-black.svg") no-repeat center; - background-size: 1rem; -} -@media (max-width: 639px) { - .linked-services-tile__block--label-link { - float: left; - margin-right: 0.3125rem; - } + height: 1rem; + background: url("styles/resources/assets/icons/icon-external-link-black.svg") no-repeat center; + background-size: 1.2rem; } -.linked-services-tile__block--label-btn { - float: right; - padding: 0.3125rem 1.04375rem; - border: 0.125rem solid #BBBCBC; +.linked-services-tile__block--label-sso-link:hover i { + background: url("styles/resources/assets/icons/icon-external-link-white.svg") no-repeat center; } -.linked-services-tile__block--label-btn:hover { - cursor: pointer; +.linked-services-tile__block--label-unlink { + min-width: 0rem !important; } @media (max-width: 639px) { .linked-services-tile__block--label { - margin-top: 0.3125rem; + margin-top: 0.625rem; } } @media (max-width: 639px) { @@ -16242,7 +16874,7 @@ body.is-open { display: block; height: 1px; margin: 0 1.25rem; - background: #D9D9D6; + background: #d9d9d6; } .cmp-menu__link, .cmp-menu__accordion-trigger { display: flex; @@ -16266,7 +16898,10 @@ body.is-open { color: #555555; } .cmp-menu__link:hover, .cmp-menu__accordion-trigger:hover { - background: #99E1F3; + background: #99e1f3; +} +.cmp-menu__link:focus, .cmp-menu__link:active, .cmp-menu__accordion-trigger:focus, .cmp-menu__accordion-trigger:active { + outline-offset: -3px; } .cmp-menu__accordion-trigger::after { content: url("styles/resources/assets/icons/chevron-down-black.svg"); @@ -16282,7 +16917,7 @@ body.is-open { max-height: 0; overflow: hidden; flex-direction: column; - background: #F7F7F7; + background: #f7f7f7; transition: max-height 0.4s ease-in-out; margin: 0; padding: 0; @@ -16297,8 +16932,24 @@ body.is-open { color: #555555; text-decoration: none; } +.cmp-menu__accordion-panel li a.chevron-right { + justify-content: space-between; +} +.cmp-menu__accordion-panel li a.chevron-right::after { + content: url("styles/resources/assets/icons/chevron-right-grey.svg"); + display: inline-block; + position: relative; + margin-left: 1.25rem; + height: 12px; + width: 12px; + bottom: 6px; + right: 4px; +} +.cmp-menu__accordion-panel li a:focus, .cmp-menu__accordion-panel li a:active { + outline-offset: -3px; +} .cmp-menu__accordion-panel li:hover { - background: #99E1F3; + background: #99e1f3; } .cmp-menu.open { width: 100%; @@ -16310,6 +16961,11 @@ body.is-open { } } +.cmp-menu-no-scroll { + height: 100%; + overflow: hidden; +} + .modal__overlay { position: fixed; top: 0; @@ -16378,10 +17034,11 @@ body.is-open { } .modal__content--inbox.modal__content .modal-header p, .modal__content--common.modal__content .modal-header p { font-family: "Roboto", sans-serif; - color: #525252; font-size: 16px; - line-height: 24px; + font-size: 1rem; + line-height: 1.5; font-weight: normal; + color: #525252; color: #101820; } .theme-dark .modal__content--inbox.modal__content .modal-header p, .theme-dark .modal__content--common.modal__content .modal-header p { @@ -16391,10 +17048,11 @@ body.is-open { .modal__content--inbox.modal__content .modal-header p strong, .modal__content--common.modal__content .modal-header p b, .modal__content--common.modal__content .modal-header p strong { font-family: "Roboto", sans-serif; - color: #525252; font-size: 16px; - line-height: 24px; + font-size: 1rem; + line-height: 1.5; font-weight: normal; + color: #525252; color: #101820; font-weight: 700; } @@ -16410,10 +17068,11 @@ body.is-open { } .modal__content--inbox.modal__content .modal-header__subheader, .modal__content--common.modal__content .modal-header__subheader { font-family: "Roboto", sans-serif; - color: #525252; font-size: 16px; - line-height: 24px; + font-size: 1rem; + line-height: 1.5; font-weight: normal; + color: #525252; color: #101820; margin-top: 20px; margin-bottom: 0; @@ -16425,10 +17084,11 @@ body.is-open { .modal__content--inbox.modal__content .modal-header__subheader strong, .modal__content--common.modal__content .modal-header__subheader b, .modal__content--common.modal__content .modal-header__subheader strong { font-family: "Roboto", sans-serif; - color: #525252; font-size: 16px; - line-height: 24px; + font-size: 1rem; + line-height: 1.5; font-weight: normal; + color: #525252; color: #101820; font-weight: 700; } @@ -16448,10 +17108,11 @@ body.is-open { } .modal__content--inbox.modal__content .modal-body p, .modal__content--common.modal__content .modal-body p { font-family: "Roboto", sans-serif; - color: #525252; font-size: 16px; - line-height: 24px; + font-size: 1rem; + line-height: 1.5; font-weight: normal; + color: #525252; color: #101820; margin-top: 10px; margin-bottom: 10px; @@ -16463,10 +17124,11 @@ body.is-open { .modal__content--inbox.modal__content .modal-body p strong, .modal__content--common.modal__content .modal-body p b, .modal__content--common.modal__content .modal-body p strong { font-family: "Roboto", sans-serif; - color: #525252; font-size: 16px; - line-height: 24px; + font-size: 1rem; + line-height: 1.5; font-weight: normal; + color: #525252; color: #101820; font-weight: 700; } @@ -16482,10 +17144,11 @@ body.is-open { } .modal__content--inbox.modal__content .modal-body__subheader, .modal__content--common.modal__content .modal-body__subheader { font-family: "Roboto", sans-serif; - color: #525252; font-size: 16px; - line-height: 24px; + font-size: 1rem; + line-height: 1.5; font-weight: normal; + color: #525252; color: #101820; margin-top: 0; } @@ -16496,10 +17159,11 @@ body.is-open { .modal__content--inbox.modal__content .modal-body__subheader strong, .modal__content--common.modal__content .modal-body__subheader b, .modal__content--common.modal__content .modal-body__subheader strong { font-family: "Roboto", sans-serif; - color: #525252; font-size: 16px; - line-height: 24px; + font-size: 1rem; + line-height: 1.5; font-weight: normal; + color: #525252; color: #101820; font-weight: 700; } @@ -16543,7 +17207,6 @@ body.is-open { @media only screen and (min-width: 48em) { .modal__content--inbox.modal__content .modal-body .inbox-ul-folder-list, .modal__content--common.modal__content .modal-body .inbox-ul-folder-list { width: 500px; - margin-left: -30px; } } .modal__content--inbox.modal__content .modal-footer, .modal__content--common.modal__content .modal-footer { @@ -16583,10 +17246,11 @@ body.is-open { } .modal__content--transition.modal__content .modal-body .sub-heading { font-family: "Roboto", sans-serif; - color: #525252; font-size: 16px; - line-height: 24px; + font-size: 1rem; + line-height: 1.5; font-weight: normal; + color: #525252; color: #101820; font-weight: 700; margin-bottom: 10px; @@ -16599,10 +17263,11 @@ body.is-open { } .modal__content--transition.modal__content .modal-body .description { font-family: "Roboto", sans-serif; - color: #525252; font-size: 16px; - line-height: 24px; + font-size: 1rem; + line-height: 1.5; font-weight: normal; + color: #525252; color: #101820; margin-bottom: 0; margin-top: 0; @@ -16613,10 +17278,11 @@ body.is-open { .modal__content--transition.modal__content .modal-body .description b, .modal__content--transition.modal__content .modal-body .description strong { font-family: "Roboto", sans-serif; - color: #525252; font-size: 16px; - line-height: 24px; + font-size: 1rem; + line-height: 1.5; font-weight: normal; + color: #525252; color: #101820; font-weight: 700; } @@ -16855,10 +17521,11 @@ body.is-open { } .most-viewed-carousel-item span { font-family: "Roboto", sans-serif; - color: #525252; font-size: 16px; - line-height: 24px; + font-size: 1rem; + line-height: 1.5; font-weight: normal; + color: #525252; color: #101820; font-weight: 700; margin-top: 12px; @@ -16873,12 +17540,14 @@ body.is-open { } .most-viewed-carousel-item p { font-family: "Roboto", sans-serif; - color: #525252; font-size: 16px; - line-height: 24px; + font-size: 1rem; + line-height: 1.5; font-weight: normal; + color: #525252; font-size: 14px; - line-height: 20px; + font-size: 0.875rem; + line-height: 1.3571428571; margin-top: 0; } .theme-dark .most-viewed-carousel-item p { @@ -16894,12 +17563,16 @@ body.is-open { font-weight: 500; } .most-viewed-carousel-item .most-viewed-carousel-link::after { + width: 14px; + width: 0.875rem; + height: 14px; + height: 0.875rem; + min-width: 14px; + min-width: 0.875rem; content: ""; position: absolute; top: 0; right: 0; - width: 14px; - height: 14px; background-size: contain; background-position: center; background-repeat: no-repeat; @@ -16917,12 +17590,16 @@ body.is-open { background-image: url("styles/resources/assets/icons/arrow-right.svg"); } .most-viewed-carousel-item .most-viewed-carousel-link.external::after { + width: 18px; + width: 1.125rem; + height: 18px; + height: 1.125rem; + min-width: 18px; + min-width: 1.125rem; content: ""; position: absolute; top: 0; right: 0; - width: 18px; - height: 18px; background-size: contain; background-position: center; background-repeat: no-repeat; @@ -16991,10 +17668,11 @@ body.is-open { .news__comp .feature .feature__description, .news__comp .feature .feature__published { font-family: "Roboto", sans-serif; - color: #525252; font-size: 16px; - line-height: 24px; + font-size: 1rem; + line-height: 1.5; font-weight: normal; + color: #525252; display: block; max-width: 530px; margin-top: 0; @@ -17014,10 +17692,12 @@ body.is-open { .news__comp .feature .feature__published .cmp-text p b, .news__comp .feature .feature__published .cmp-text p strong { font-family: "Roboto", sans-serif; - color: #525252; font-size: 18px; - line-height: 30px; + font-size: 1.125rem; margin: 20px 0; + margin: 1.25rem 0; + line-height: 1.6666666667; + color: #525252; color: #101820; } .theme-dark .news__comp .feature .feature__description .cmp-text p, @@ -17053,8 +17733,6 @@ body.is-open { min-width: 32px; min-width: 2rem; display: block; - height: 32px; - width: 32px; background-size: contain; background-position: center; background-repeat: no-repeat; @@ -17119,10 +17797,12 @@ body.is-open { } .news__comp .list-container .article-list li h3 a { font-family: "Roboto", sans-serif; - color: #525252; font-size: 18px; - line-height: 30px; + font-size: 1.125rem; margin: 20px 0; + margin: 1.25rem 0; + line-height: 1.6666666667; + color: #525252; font-weight: 700; color: #000000; text-decoration: none; @@ -17149,10 +17829,11 @@ body.is-open { .news__comp .list-container .article-list li p, .news__comp .list-container .article-list li p i { font-family: "Roboto", sans-serif; - color: #525252; font-size: 16px; - line-height: 24px; + font-size: 1rem; + line-height: 1.5; font-weight: normal; + color: #525252; display: block; margin: 10px 0; } @@ -17213,10 +17894,11 @@ body.is-open { } .notification-banner__text { font-family: "Roboto", sans-serif; - color: #525252; font-size: 16px; - line-height: 24px; + font-size: 1rem; + line-height: 1.5; font-weight: normal; + color: #525252; color: #101820; margin: 0; padding-bottom: 10px; @@ -17227,10 +17909,11 @@ body.is-open { .notification-banner__text b, .notification-banner__text strong { font-family: "Roboto", sans-serif; - color: #525252; font-size: 16px; - line-height: 24px; + font-size: 1rem; + line-height: 1.5; font-weight: normal; + color: #525252; color: #101820; font-weight: 700; } @@ -17247,10 +17930,11 @@ body.is-open { } .notification-banner__cta { font-family: "Roboto", sans-serif; - color: #525252; font-size: 16px; - line-height: 24px; + font-size: 1rem; + line-height: 1.5; font-weight: normal; + color: #525252; padding: 0; margin: 0; } @@ -17259,10 +17943,11 @@ body.is-open { } .notification-banner__cta a { font-family: "Roboto", sans-serif; - color: #525252; font-size: 16px; - line-height: 24px; + font-size: 1rem; + line-height: 1.5; font-weight: normal; + color: #525252; color: #006CE0; text-decoration: underline; } @@ -17311,8 +17996,6 @@ body.is-open { min-width: 60px; min-width: 3.75rem; display: block; - height: 60px; - width: 60px; background-size: contain; background-position: center; background-repeat: no-repeat; @@ -17395,8 +18078,6 @@ body.is-open { min-width: 24px; min-width: 1.5rem; display: block; - height: 24px; - width: 24px; background-size: contain; background-position: center; background-repeat: no-repeat; @@ -17405,10 +18086,12 @@ body.is-open { } .key-information__text { font-family: "Roboto", sans-serif; - color: #525252; font-size: 18px; - line-height: 30px; + font-size: 1.125rem; margin: 20px 0; + margin: 1.25rem 0; + line-height: 1.6666666667; + color: #525252; color: #FFFFFF; margin-top: 0; margin-bottom: 20px; @@ -17481,10 +18164,12 @@ body.is-open { .page-anchors__links li a, .page-anchors__links li span { font-family: "Roboto", sans-serif; - color: #525252; font-size: 18px; - line-height: 30px; + font-size: 1.125rem; margin: 20px 0; + margin: 1.25rem 0; + line-height: 1.6666666667; + color: #525252; color: #101820; display: flex; align-items: center; @@ -17597,10 +18282,11 @@ body.is-open { width: 30px; display: flex; font-family: "Roboto", sans-serif; - color: #525252; font-size: 16px; - line-height: 24px; + font-size: 1rem; + line-height: 1.5; font-weight: normal; + color: #525252; color: #101820; align-items: center; justify-content: center; @@ -17616,10 +18302,11 @@ body.is-open { .pagination > li a b, .pagination > li a strong { font-family: "Roboto", sans-serif; - color: #525252; font-size: 16px; - line-height: 24px; + font-size: 1rem; + line-height: 1.5; font-weight: normal; + color: #525252; color: #101820; font-weight: 700; } @@ -17669,8655 +18356,9519 @@ body.is-open { transition: color 150ms ease; } -.payments .loading-section { +.error-container { + height: calc(100vh - 488px); + min-height: 200px; + min-height: 12.5rem; display: flex; flex-direction: column; - align-items: flex-start; + align-items: center; + justify-content: center; + width: 100%; } -.payments .loading-section .loading-spinner { - width: 96px; - width: 6rem; - height: 96px; - height: 6rem; - min-width: 96px; - min-width: 6rem; - display: block; - height: 96px; - width: 96px; - background-size: contain; - background-position: center; - background-repeat: no-repeat; - background-image: url("styles/resources/assets/icons/spinner.svg"); - margin: 13px 28px 0; +.error-container img { + height: 68px; + height: 4.25rem; + width: 68px; + width: 4.25rem; } -@media only screen and (min-width: 77.75em) { - .payments .loading-section .loading-spinner { - width: 96px; - width: 6rem; - height: 96px; - height: 6rem; - min-width: 96px; - min-width: 6rem; - display: block; - height: 96px; - width: 96px; - background-size: contain; - background-position: center; - background-repeat: no-repeat; - margin: 17px 35px 0; + +.max-content-width { + max-width: 768px; +} +@media (max-width: 639px) { + .max-content-width { + width: 100%; } } -.payments .no-payments { - display: flex; - flex-flow: row nowrap; + +.callout-box-content p { + margin-bottom: 8px; + margin-bottom: 0.5rem; + margin-top: 0; + word-break: break-word; } -.payments .no-payments .no-payments-container { - margin-right: auto; - margin-left: 0; + +.conflicting-profile-details { display: flex; flex-direction: column; - align-items: center; } -.payments .no-payments .no-payments-container .no-payments-icon-container { - flex: 1; - flex-basis: auto; - width: 50px; +.conflicting-profile-details > div { + display: flex; } -.payments .no-payments .no-payments-container .no-payments-icon-container .icon { - width: 100%; - height: auto; +.conflicting-profile-details div > p { + margin: 0; } -.payments .no-payments .no-payments-container .no-payments-text-container { - flex: 1; - flex-basis: auto; - width: 100%; - text-align: center; +.conflicting-profile-details div > p:first-child { + width: 20%; } -.payments .no-payments .no-payments-container .no-payments-text-container p { - margin: 0 !important; +@media (max-width: 639px) { + .conflicting-profile-details > div { + flex-direction: column; + } + .conflicting-profile-details div > p:first-child { + width: 100%; + } } -.payments-dashboard { - margin: 60px 0 20px; -} -.payments-dashboard .loading-section { +.personal-details-table > div { display: flex; - flex-direction: column; - align-items: flex-start; + border-top: 2px solid #D9D9D6; + border-top: 0.125rem solid #D9D9D6; } -.payments-dashboard .loading-section .loading-spinner { - width: 96px; - width: 6rem; - height: 96px; - height: 6rem; - min-width: 96px; - min-width: 6rem; - display: block; - height: 96px; - width: 96px; - background-size: contain; - background-position: center; - background-repeat: no-repeat; - background-image: url("styles/resources/assets/icons/spinner.svg"); - margin: 13px 28px 0; +.personal-details-table > div:last-child { + border-bottom: 2px solid #D9D9D6; + border-bottom: 0.125rem solid #D9D9D6; } -@media only screen and (min-width: 77.75em) { - .payments-dashboard .loading-section .loading-spinner { - width: 96px; - width: 6rem; - height: 96px; - height: 6rem; - min-width: 96px; - min-width: 6rem; - display: block; - height: 96px; - width: 96px; - background-size: contain; - background-position: center; - background-repeat: no-repeat; - margin: 17px 35px 0; - } +.personal-details-table p { + margin: 24px 0; + margin: 1.5rem 0; } -.payments-dashboard .payments-table { - box-shadow: 0 2pt 8pt rgba(0, 0, 0, 0.1254901961); +.personal-details-table .label-column { + margin: 0 16px 0 20px; + margin: 0 1rem 0 1.25rem; + display: flex; + align-items: center; + width: 30%; } -.payments-dashboard__view-all-row { - text-align: right; - font-size: 16px; - font-family: "Roboto", sans-serif; - padding-top: 10px; +.personal-details-table .label-column p { + margin: 24px 0; + margin: 1.5rem 0; } -.payments-dashboard .no-payments-container { - background-color: #FFFFFF; - box-shadow: 0 0 2px rgba(17, 17, 18, 0.2509803922); +.personal-details-table .label-column .alert-icon-box { border-radius: 5px; - opacity: 1; - padding: 20px 20px 20px 20px; + border-radius: 0.3125rem; + padding: 7px; + padding: 0.4375rem; display: flex; - align-items: center; + justify-content: center; + background-color: #FBE679; } -@media screen and (max-width: 320px) { - .payments-dashboard .no-payments-container { +.personal-details-table .label-column .alert-icon-box img { + width: 16px; + width: 1rem; + height: 16px; + height: 1rem; +} +@media (max-width: 639px) { + .personal-details-table > div { flex-direction: column; } + .personal-details-table > div:last-child { + border-bottom: none; + } + .personal-details-table p { + margin: 0 0 20px; + margin: 0 0 1.25rem; + } + .personal-details-table .label-column { + width: 100%; + margin: 0; + } + .personal-details-table .label-column p { + margin: 20px 0 12px; + margin: 1.25rem 0 0.75rem; + } } -.payments-dashboard .no-payments-container .no-payments-icon-container { - flex: 1; - flex-basis: auto; - width: 44px; - margin-right: 15px; + +.callout-box-container { + border-radius: 4px; + border-radius: 0.25rem; + padding: 20px; + padding: 1.25rem; + display: flex; + flex-direction: row-reverse; + justify-content: flex-end; } -.payments-dashboard .no-payments-container .no-payments-icon-container .icon { - width: 100%; - height: auto; +@media (max-width: 639px) { + .callout-box-container { + padding: 12px; + padding: 0.75rem; + } } -.payments-dashboard .no-payments-container .no-payments-text-container { - flex: 1; - flex-basis: auto; - width: 100%; +.callout-box-container.warning { + border: 2px solid #FBE679; + border: 0.125rem solid #FBE679; + background-color: #FBE679; } -@media screen and (max-width: 320px) { - .payments-dashboard .no-payments-container .no-payments-text-container { - text-align: center; +.callout-box-container .callout-box-icon-bar { + margin-right: 16px; + margin-right: 1rem; + display: flex; + justify-content: center; +} +@media (max-width: 639px) { + .callout-box-container .callout-box-icon-bar { + margin-right: 12px; + margin-right: 0.75rem; } } -.payments-dashboard .no-payments-container .no-payments-text-container p { - font-size: 16px; - margin: 0 !important; +.callout-box-container .callout-box-icon-bar .callout-box-icon { + width: 24px; + width: 1.5rem; + height: 24px; + height: 1.5rem; +} +@media (max-width: 639px) { + .callout-box-container .callout-box-icon-bar .callout-box-icon { + width: 16px; + width: 1rem; + height: 16px; + height: 1rem; + } } -.payments-filter { - display: block; - min-height: 30px; +.poll { + display: inline-block; + transition: height 1.25s; + width: 100%; } -.payments-filter .btn { - color: #183052; - padding-left: 0; - margin: 5px 0; +.poll > * { + margin: auto; + text-align: left; } -.payments-filter__show-hide-filter-container { - display: block; +.poll .question { + margin-top: 29px; + margin-bottom: 29px; + display: flex; + flex-direction: column; + align-items: center; + justify-content: flex-start; } -.payments-filter__show-hide-filter { - padding-top: 5px; +.poll .question .question-text { + display: inline-block; + font-family: "Roboto", sans-serif; + color: #000000; + line-height: 1.25; + margin-top: 1.875rem; + letter-spacing: 0; + font-weight: 500; + font-size: 1.625rem; } -.payments-filter__show-hide-clear-filter-container { - display: block; - min-height: 30px; - margin-top: 10px; +@media (min-width: 30em) { + .poll .question .question-text { + margin-right: 32px; + } } -.payments-filter__show-hide-filter-container { - float: left; +.poll .question .question-buttons { + display: inline-flex; } -.payments-filter__clear-filter-container { - float: right; +@media (min-width: 30em) { + .poll .question { + flex-direction: row; + } } -.payments-filter__clear-filter { - height: auto; - width: auto; - background: transparent; - min-width: auto; - padding: 5px; +.poll .answers { + margin-bottom: 56px; } -.payments-filter__clear-filter.btn { - padding: 0 15px 0 0; - color: #006CE0; +.poll .answers .sub-question-text { + font-family: "Roboto", sans-serif; + color: #000000; + line-height: 1.25; + margin-top: 1.25rem; + letter-spacing: 0.001em; + font-weight: 500; + font-size: 1.375rem; } -.payments-filter__clear-filter.btn::after { - content: ""; - position: absolute; - top: 0; - right: 0; - width: 12px; - height: 12px; - background-size: contain; - background-position: center; - background-repeat: no-repeat; - transition-property: transform, margin, background; - transition-duration: 300ms; - transition-timing-function: ease; - background-image: url("styles/resources/assets/icons/clear.svg"); - top: 2px; +.poll .answers .input-group { + align-items: flex-start; } -.payments-filter__clear-filter.btn:hover { - background-color: transparent; +.poll .answers legend { + margin: 0; + padding: 0; + display: inline; } -.payments-filter__date-filter-container .custom-datepicker__input::-ms-clear { - display: none; +.poll .answers fieldset { + margin: 0; + padding: 0; + display: inline; } -.payments-filter__date-filter-container .custom-datepicker__calendar-button { - height: 45px; - top: -6px; +.poll .input-row { + display: flex; + align-items: flex-start; } -.payments-filter__date-filter-container .input-group input { - margin: 5px 0; - border-color: #183052; +.poll .input-row label { + display: inline-block; + vertical-align: top; + cursor: pointer; + padding: 1px 4px 0 0; + color: #000000; + font-weight: 400; + font-family: "Roboto", sans-serif; + font-size: 17px; } -@media screen and (max-width: 768px) { - .payments-filter__date-filter-container { - display: block; - } - .payments-filter__date-filter-container .input-group { - margin: 0; - padding: 5px; - } +.poll .confirmation { + margin-bottom: 40px; + font-family: "Roboto", sans-serif; + color: black; + line-height: 1.25; + margin-top: 1.25rem; + letter-spacing: 0.001em; + font-weight: 500; + font-size: 1.375rem; } -@media screen and (min-width: 768px) { - .payments-filter__date-filter-container { - display: flex; - } - .payments-filter__date-filter-container .input-group { - margin: 0; - padding: 10px 15px 10px 0; - } - .payments-filter__date-filter-container__date-from-filter-container { - width: 50%; - } - .payments-filter__date-filter-container__date-to-filter-container { - width: 50%; - } + +.enhanced-polling:empty { + display: none !important; } -.payments-filter__date-filter-container label { - color: #183052; + +.profile { + max-width: 770px; } -.payments-filter__filter-buttons-container { - display: flex; - flex-wrap: wrap; +.profile .section-heading { + margin: 0 0 40px; } -.payments-filter__payment-system { - border: 2px solid #183052; - background-color: #FFFFFF; - border-radius: 15px; - font-size: 14px; +.profile__list { + margin: 0; } -.payments-filter__payment-system.btn { - padding: 5px 20px 5px 20px; - text-align: center; - margin-right: 10px; - margin-bottom: 5px; - min-height: 30px; - min-width: 100px; - flex-grow: 1; +.profile__title { + font-family: "Roboto", sans-serif; + font-size: 16px; + font-size: 1rem; + line-height: 1.5; + font-weight: normal; + color: #525252; + color: #101820; + font-weight: 700; + margin: 0 0 8px; } -.payments-filter__payment-system.btn:hover { +.theme-dark .profile__title { color: #FFFFFF; - background-color: #006CE0; - border-color: #006CE0; } -.payments-filter__payment-system.btn:active { +.theme-dark .profile__title { color: #FFFFFF; - background-color: #183052; } -.payments-filter__payment-system.selected { - color: #FFFFFF; - background-color: #183052; - padding: 5px 20px; +.profile__panel { + background: #FFFFFF; + border-bottom: 1px solid #DDDDDD; + padding: 40px 22px; + position: relative; } -.payments-filter__payment-system.selected::after { +.profile__panel::before, .profile__panel::after { content: ""; position: absolute; + height: 5px; top: 0; +} +.profile__panel::before { + width: 50px; + left: 0; + background-color: #006CE0; +} +.profile__panel::after { + width: calc(100% - 49px); right: 0; - width: 13px; - height: 13px; - background-size: contain; - background-position: center; - background-repeat: no-repeat; - transition-property: transform, margin, background; - transition-duration: 300ms; - transition-timing-function: ease; - background-image: url("styles/resources/assets/icons/clear-white.svg"); - position: absolute; - top: 6px; - right: 2px; + background-color: #183052; } -.payments-filter__payment-system.selected:hover { - background-color: #808080; - border-color: #808080; +@media only screen and (min-width: 64em) { + .profile__panel { + padding: 40px 30px; + } +} +.profile__info { + font-family: "Roboto", sans-serif; + font-size: 18px; + font-size: 1.125rem; + margin: 20px 0; + margin: 1.25rem 0; + line-height: 1.6666666667; + color: #525252; + color: #101820; + margin: 0 0 20px; +} +.theme-dark .profile__info { color: #FFFFFF; } -.payments-filter__payment-system.selected:active { - color: #183052; - background-color: #FFFFFF; +.profile__info b, +.profile__info strong { + color: #101820; } - -img.payments-indicator-icon { - display: inline-block; - width: 30px; - height: 30px; - padding: 5px; - background-color: #FCB80E; - border-radius: 50%; - margin-right: 0.5rem; - text-align: center; - vertical-align: middle; +.profile__callout { + background: #FFFFFF; + border-bottom: 1px solid #DDDDDD; + padding: 20px 22px; } - -@media screen and (max-width: 480px) { - .modal__content.modal__content--transactions { - min-width: 327px; +@media only screen and (min-width: 64em) { + .profile__callout { + padding: 20px; } } -@media screen and (min-width: 480px) { - .modal__content.modal__content--transactions { - min-width: 550px; - } +.profile__callout:last-of-type { + border-bottom: 0; } - -dl.lodgement-components > *.lodgement-components__component.lodgement-components__component--important > dd, dl.lodgement-components > *.lodgement-components__component.lodgement-components__component--important > dt, dl.lodgement-components > *.lodgement-components__component.lodgement-components__component--long > dt, dl.payment-components > *.payment-components__component.payment-components__component--important > dd, dl.payment-components > *.payment-components__component.payment-components__component--important > dt, dl.payment-components > *.payment-components__component.payment-components__component--long > dt, .transaction-details .distinctive { +.profile__data { + font-family: "Roboto", sans-serif; + font-size: 16px; + font-size: 1rem; + line-height: 1.5; + font-weight: normal; + color: #525252; color: #101820; - font-weight: bold; - font-size: 1.15em; + margin: 0 0 6px; } -dl.lodgement-components > *.lodgement-components__component.lodgement-components__component--important > dd > strong, dl.lodgement-components > *.lodgement-components__component.lodgement-components__component--important > dt > strong, dl.lodgement-components > *.lodgement-components__component.lodgement-components__component--long > dt > strong, dl.payment-components > *.payment-components__component.payment-components__component--important > dd > strong, dl.payment-components > *.payment-components__component.payment-components__component--important > dt > strong, dl.payment-components > *.payment-components__component.payment-components__component--long > dt > strong, .transaction-details .distinctive > strong { - font-weight: bold; +.theme-dark .profile__data { + color: #FFFFFF; } - -.transaction-details { - color: #525252; +.profile__data b, +.profile__data strong { + font-family: "Roboto", sans-serif; font-size: 16px; + font-size: 1rem; + line-height: 1.5; + font-weight: normal; + color: #525252; + color: #101820; + font-weight: 700; } -.transaction-details h3, -.transaction-details h4 { - margin: 10px 0 10px 0; -} -.transaction-details__summary { - font-size: 18px; - margin-bottom: 10px; +.theme-dark .profile__data b, +.theme-dark .profile__data strong { + color: #FFFFFF; } -.transaction-details__summary .payment-date-with-indicator { - display: flex; - flex-flow: row nowrap; - align-items: center; +.theme-dark .profile__data b, +.theme-dark .profile__data strong { + color: #FFFFFF; } -.transaction-details__summary .row { - display: flex; - justify-content: space-between; - flex-wrap: nowrap; - padding: 0; - align-items: center; +.profile__data:last-child { + margin: 0; } -.transaction-details__summary .row:first-child { - min-height: 40px; +.profile dl dd { + margin: 0 0 6px; } -.transaction-details__summary .row > * { - margin-top: auto; - margin-bottom: auto; +.profile h2 { + margin: 60px 0 30px; } -@media (max-width: 47.9375em) { - .transaction-details__summary .row { - display: flex !important; - } + +/* Detail View Styles */ +.page-mygov-auth-account .authenticated-body-container .auth-section-heading { + margin-top: 0 !important; } -.transaction-details__summary .row > :first-child { - max-width: 70%; - padding-right: 30px; - margin-left: 0; + +body, +.page-mygov-auth-account { + /* Dashboard Component Styles */ } -.transaction-details__summary .row > :last-child { - max-width: 30%; - margin-right: 0; +body .progress-tracker h2.auth-section-heading, +.page-mygov-auth-account .progress-tracker h2.auth-section-heading { + margin-bottom: 21px; + margin-bottom: 1.3125rem; } -.transaction-details .hline { - border: 1px solid #EAEAEA; - margin-top: 15px; - margin-bottom: 15px; +body .progress-tracker-container ul, +.page-mygov-auth-account .progress-tracker-container ul { + flex-direction: column; + list-style: none; + padding: 0; } -.transaction-details .payment-breakdown-section { +body .progress-tracker-details, +.page-mygov-auth-account .progress-tracker-details { + position: relative; + flex-direction: column; + justify-content: space-between; + height: auto; +} +body .progress-tracker-details > ul, +.page-mygov-auth-account .progress-tracker-details > ul { + padding: 0 20px; + padding: 0 1.25rem; + list-style-type: none; margin: 0; + position: relative; } -@media screen and (max-width: 480px) { - .transaction-details .components .component-type { - max-width: 200px; +@media only screen and (min-width: 48em) { + body .progress-tracker-details > ul, +.page-mygov-auth-account .progress-tracker-details > ul { + border-radius: 4px; + border-radius: 0.25rem; + width: 100%; + right: 0; } } -@media screen and (min-width: 480px) { - .transaction-details .components .component-type { - max-width: 260px; +body .progress-tracker-details > ul li, +.page-mygov-auth-account .progress-tracker-details > ul li { + padding: 15px 0px 12px; + padding: 0.9375rem 0rem 0.75rem; + position: relative; + display: flex; + flex-flow: column nowrap; + align-items: center; + padding-left: 0; + width: 100%; +} +@media only screen and (min-width: 48em) { + body .progress-tracker-details > ul li, +.page-mygov-auth-account .progress-tracker-details > ul li { + padding-left: 0; } } -.transaction-details .net-payment-amount.row { - padding-bottom: 15px; +body .progress-tracker-details > ul li::before, +.page-mygov-auth-account .progress-tracker-details > ul li::before { + height: 1px; + height: 0.0625rem; + position: absolute; + bottom: 0; + margin: 0 auto; + content: ""; + display: block; + background-color: #DDDDDD; + width: 100%; } -.transaction-details .links a { - padding: 5px 25px 5px 0; - text-decoration: none; +body .progress-tracker-details > ul li:first-child, +.page-mygov-auth-account .progress-tracker-details > ul li:first-child { + padding-top: 9px; + padding-top: 0.5625rem; +} +@media only screen and (min-width: 48em) { + body .progress-tracker-details > ul li:first-child, +.page-mygov-auth-account .progress-tracker-details > ul li:first-child { + padding-top: 1.5px; + padding-top: 0.09375rem; + } +} +body .progress-tracker-details > ul li:last-child::before, +.page-mygov-auth-account .progress-tracker-details > ul li:last-child::before { + display: none; +} +body .progress-tracker-details > ul li div, +.page-mygov-auth-account .progress-tracker-details > ul li div { display: flex; - justify-content: flex-end; + width: 100%; + padding: 0; + margin: 0; + align-items: flex-start; + justify-content: space-around; + position: relative; } -.transaction-details .links a::after { - content: ""; - position: absolute; - top: 0; - right: 0; +body .progress-tracker-details > ul li div > img, +.page-mygov-auth-account .progress-tracker-details > ul li div > img { width: 20px; + width: 1.25rem; height: 20px; + height: 1.25rem; + min-width: 20px; + min-width: 1.25rem; + display: block; background-size: contain; background-position: center; background-repeat: no-repeat; - transition-property: transform, margin, background; - transition-duration: 300ms; - transition-timing-function: ease; - transition: transform 150ms ease-out; - backface-visibility: hidden; - top: 5px; - background-image: url("styles/resources/assets/icons/icon-external-link.svg"); -} -.transaction-details .links a:hover::after { - transform: translate(3px, -3px); -} -.transaction-details .close-button-container button { - min-width: 100%; - margin-top: 20px; -} - -ul.lodgements-list { - list-style: none; - margin: 0; - padding: 0; + position: relative; } -ul.lodgements-list > li { - margin: 0; - padding: 0; +body .progress-tracker-details > ul li span, +.page-mygov-auth-account .progress-tracker-details > ul li span { + position: relative; + display: flex; + flex-flow: column nowrap; + width: 100%; } - -dl.payment-components { +body .progress-tracker-details > ul li span p, +.page-mygov-auth-account .progress-tracker-details > ul li span p { + font-family: "Roboto", sans-serif; + font-size: 16px; + font-size: 1rem; + margin-left: 15px; + margin-left: 0.9375rem; + color: black; + font-weight: bold; margin: 0; - padding: 0; } -dl.payment-components > * > dd, dl.payment-components > * > dt { - color: #525252; - font-size: 1em; - margin: 0; +body .progress-tracker-details > ul li span p.date, body .progress-tracker-details > ul li span p.body, +.page-mygov-auth-account .progress-tracker-details > ul li span p.date, +.page-mygov-auth-account .progress-tracker-details > ul li span p.body { + font-family: "Roboto", sans-serif; + font-size: 16px; + font-size: 1rem; + line-height: 1.5; font-weight: normal; + color: #525252; + font-size: 14px; + font-size: 0.875rem; + line-height: 1.3571428571; + color: #333333; + font-weight: 400; } -dl.payment-components > *.payment-components__component { - display: flex; - flex-flow: row nowrap; - justify-content: space-between; -} -dl.payment-components > *.payment-components__component > dd, dl.payment-components > *.payment-components__component > dt { - width: 50%; +.theme-dark body .progress-tracker-details > ul li span p.date, .theme-dark body .progress-tracker-details > ul li span p.body, +.theme-dark .page-mygov-auth-account .progress-tracker-details > ul li span p.date, +.theme-dark .page-mygov-auth-account .progress-tracker-details > ul li span p.body { + color: #FFFFFF; } -dl.payment-components > *.payment-components__component > dd { - text-align: right; +body .progress-tracker-details > ul li span p.date a, body .progress-tracker-details > ul li span p.body a, +.page-mygov-auth-account .progress-tracker-details > ul li span p.date a, +.page-mygov-auth-account .progress-tracker-details > ul li span p.body a { + margin-left: 0; } -dl.payment-components > *.payment-components__component.payment-components__component--long { - flex-flow: column nowrap; - justify-content: initial; +body .progress-tracker-details > ul li span p.body b, +body .progress-tracker-details > ul li span p.body strong, +.page-mygov-auth-account .progress-tracker-details > ul li span p.body b, +.page-mygov-auth-account .progress-tracker-details > ul li span p.body strong { + font-size: 14px; + font-size: 0.875rem; + font-weight: 700; + line-height: normal; } -dl.payment-components > *.payment-components__component.payment-components__component--long > dd, dl.payment-components > *.payment-components__component.payment-components__component--long > dt { - width: 100%; +body .progress-tracker-details > ul li span .claim-status-link, +.page-mygov-auth-account .progress-tracker-details > ul li span .claim-status-link { + font-size: 14px; + font-size: 0.875rem; + display: flex; + align-items: center; + color: #006CE0; + font-weight: 400; + position: relative; + text-decoration: none; } -dl.payment-components > *.payment-components__component.payment-components__component--long > dd { - text-align: left; - margin-top: 5px; +body .progress-tracker-details > ul li span .claim-status-link:hover, +.page-mygov-auth-account .progress-tracker-details > ul li span .claim-status-link:hover { + margin-right: 15px; + margin-right: 0.9375rem; + transition-property: margin-right; + transition-duration: 300ms; + text-decoration: underline; } -dl.payment-components > *.payment-components__component.payment-components__component--long > dt { - font-size: inherit; +body .progress-tracker-details > ul li span .claim-status-link img, +.page-mygov-auth-account .progress-tracker-details > ul li span .claim-status-link img { + width: 11px; + width: 0.6875rem; + height: 11px; + height: 0.6875rem; + min-width: 11px; + min-width: 0.6875rem; + display: block; + background-size: contain; + background-position: center; + background-repeat: no-repeat; + transition: transform 150ms ease-out; + backface-visibility: hidden; + margin-left: 10px; + margin-left: 0.625rem; + display: block; } -dl.payment-components > div + * { - margin-top: 10px; +body .progress-tracker-details > ul li span .claim-status-link.external, +.page-mygov-auth-account .progress-tracker-details > ul li span .claim-status-link.external { + color: #254A7E; + width: fit-content; } - -dl.lodgement-components { - margin: 0; - padding: 0; +body .progress-tracker-details > ul li span .claim-status-link.external:hover, +.page-mygov-auth-account .progress-tracker-details > ul li span .claim-status-link.external:hover { + color: #FFFFFF; + text-decoration: none; } -dl.lodgement-components > * > dd, dl.lodgement-components > * > dt { - color: #525252; - font-size: 1em; - margin: 0; - font-weight: normal; +body .progress-tracker-details > ul li span .claim-status-link.external:focus, body .progress-tracker-details > ul li span .claim-status-link.external:focus:hover, +.page-mygov-auth-account .progress-tracker-details > ul li span .claim-status-link.external:focus, +.page-mygov-auth-account .progress-tracker-details > ul li span .claim-status-link.external:focus:hover { + color: #254A7E; + background-color: unset; + outline: 2px solid #254A7E; } -dl.lodgement-components > *.lodgement-components__component { - display: flex; - flex-flow: row nowrap; +body .progress-tracker-claim-item, +.page-mygov-auth-account .progress-tracker-claim-item { + margin-top: 20px; + margin-top: 1.25rem; + position: relative; + flex-direction: column; justify-content: space-between; + padding-bottom: 0; + height: auto; + display: flex; + height: 100%; + background: #FFFFFF; + text-decoration: none; + overflow: hidden; + color: #333333; } -dl.lodgement-components > *.lodgement-components__component > dd, dl.lodgement-components > *.lodgement-components__component > dt { - width: 50%; +body .progress-tracker-claim-item .claim-number, +.page-mygov-auth-account .progress-tracker-claim-item .claim-number { + font-size: 14px; + font-size: 0.875rem; + margin: 0 0 15px; + margin: 0 0 0.9375rem; + color: #333333; + line-height: 1.3571428571; } -dl.lodgement-components > *.lodgement-components__component > dd { - text-align: right; +@media only screen and (min-width: 48em) { + body .progress-tracker-claim-item .claim-number, +.page-mygov-auth-account .progress-tracker-claim-item .claim-number { + font-size: 16px; + font-size: 1rem; + line-height: 1.1875; + } } -dl.lodgement-components > *.lodgement-components__component.lodgement-components__component--long { - flex-flow: column nowrap; - justify-content: initial; +body .progress-tracker-claim-item .status-title, +.page-mygov-auth-account .progress-tracker-claim-item .status-title { + margin: 0 0 5px; + margin: 0 0 0.3125rem; + line-height: 1.3125; } -dl.lodgement-components > *.lodgement-components__component.lodgement-components__component--long > dd, dl.lodgement-components > *.lodgement-components__component.lodgement-components__component--long > dt { - width: 100%; +body .progress-tracker-claim-item .details-link, +.page-mygov-auth-account .progress-tracker-claim-item .details-link { + margin: 20px 0 0; + margin: 1.25rem 0 0; } -dl.lodgement-components > *.lodgement-components__component.lodgement-components__component--long > dd { - text-align: left; - margin-top: 5px; +body .progress-tracker-claim-item .details-link a, +.page-mygov-auth-account .progress-tracker-claim-item .details-link a { + font-size: 14px; + font-size: 0.875rem; + font-weight: 400; + color: #254A7E; } -dl.lodgement-components > *.lodgement-components__component.lodgement-components__component--long > dt { - font-size: inherit; +body .progress-tracker-claim-item .details-link a:hover, +.page-mygov-auth-account .progress-tracker-claim-item .details-link a:hover { + color: #FFFFFF; + background-color: #254A7E; + text-decoration: none; } -dl.lodgement-components > div + * { - margin-top: 10px; +body .progress-tracker-claim-item .details-link a:focus, body .progress-tracker-claim-item .details-link a:focus:hover, +.page-mygov-auth-account .progress-tracker-claim-item .details-link a:focus, +.page-mygov-auth-account .progress-tracker-claim-item .details-link a:focus:hover { + color: #254A7E; + background-color: unset; + outline: 2px solid #254A7E; } - -.payments-table { - max-width: 1072px; - min-width: 280px; +body .progress-tracker-claim-item .claim-info, +.page-mygov-auth-account .progress-tracker-claim-item .claim-info { + padding: 18px 20px 0 20px; + padding: 1.125rem 1.25rem 0 1.25rem; + border: 1px solid #DDDDDD; + border: 0.0625rem solid #DDDDDD; + border-radius: 6px; + border-radius: 0.375rem; + overflow: hidden; } -.payments-table .cmp-text table tr td, -.payments-table .cmp-text table tr th { - border-bottom: #F5F5F5 2px solid; +body .progress-tracker-claim-item .claim-info span, +.page-mygov-auth-account .progress-tracker-claim-item .claim-info span { + margin: 20px 0 10px 0; + margin: 1.25rem 0 0.625rem 0; } -@media screen and (max-width: 480px) { - .payments-table .cmp-text table tr td, -.payments-table .cmp-text table tr th { - padding-left: 5px; - padding-right: 5px; - } +body .progress-tracker-claim-item .claim-info span strong, +.page-mygov-auth-account .progress-tracker-claim-item .claim-info span strong { + font-family: "Roboto", sans-serif; + font-size: 16px; + font-size: 1rem; + line-height: 1.5; + font-weight: normal; + color: #525252; + font-size: 14px; + font-size: 0.875rem; + line-height: 1.3571428571; + font-weight: 700; } -.payments-table .cmp-text { - margin: 0 !important; - min-height: 180px; +.theme-dark body .progress-tracker-claim-item .claim-info span strong, +.theme-dark .page-mygov-auth-account .progress-tracker-claim-item .claim-info span strong { + color: #FFFFFF; } -@media only screen and (min-width: 48em) { - .payments-table .cmp-text { - min-height: 210px; - } +body .progress-tracker-claim-item .claim-info .service, +.page-mygov-auth-account .progress-tracker-claim-item .claim-info .service { + font-family: "Roboto", sans-serif; + font-size: 16px; + font-size: 1rem; + line-height: 1.5; + font-weight: normal; + color: #525252; + font-size: 14px; + font-size: 0.875rem; + max-height: 40px; + max-height: 2.5rem; + color: #101820; + display: flex; + align-items: center; + text-transform: capitalize; } -.payments-table .table-responsive { - margin: 0 !important; +.theme-dark body .progress-tracker-claim-item .claim-info .service, +.theme-dark .page-mygov-auth-account .progress-tracker-claim-item .claim-info .service { + color: #FFFFFF; } -.payments-table .future-definition-row { - background: #EAEAEA !important; - padding: 20px 20px 20px 20px; - max-width: 1072px; - min-width: 280px; +body .progress-tracker-claim-item .claim-info .service img, +.page-mygov-auth-account .progress-tracker-claim-item .claim-info .service img { + margin-right: 10px; + margin-right: 0.625rem; } -.payments-table .future-definition-text { - display: inline; - margin-left: 10px; - line-height: 30px !important; - color: #000000; - font-weight: 500; - font-size: 16px; +body .progress-tracker-claim-item .claim-info .title, +.page-mygov-auth-account .progress-tracker-claim-item .claim-info .title { font-family: "Roboto", sans-serif; -} -.payments-table__view-all-row { - text-align: right; font-size: 16px; - font-family: "Roboto", sans-serif; - padding: 10px 10px 0 0; -} -.payments-table__view-all-row .link, .payments-table__view-all-row .linked-services__rightInternalLink { - color: #006CE0; -} -.payments-table .future-icon-cell { - vertical-align: top; + font-size: 1rem; + line-height: 1.5; + font-weight: normal; + color: #525252; + color: #101820; + font-weight: 700; + margin-bottom: 1px; + margin-bottom: 0.0625rem; + font-size: 14px; + font-size: 0.875rem; + line-height: 1.2857142857; + color: #333333; + margin-top: 0; } -.payments-table__table { - border-collapse: collapse; - width: 100%; - max-width: 1072px; - min-width: 280px; - background-color: #FFFFFF !important; +.theme-dark body .progress-tracker-claim-item .claim-info .title, +.theme-dark .page-mygov-auth-account .progress-tracker-claim-item .claim-info .title { + color: #FFFFFF; } -.payments-table__table th button.ascending::after { - content: ""; - position: absolute; - top: 0; - right: 0; - width: 15px; - height: 15px; - background-size: contain; - background-position: center; - background-repeat: no-repeat; - transition-property: transform, margin, background; - transition-duration: 300ms; - transition-timing-function: ease; - margin-left: 0.5em; - position: absolute; - top: auto; - right: auto; - background-image: url("styles/resources/assets/icons/arrow-up-black.svg"); - transition-property: none; +.theme-dark body .progress-tracker-claim-item .claim-info .title, +.theme-dark .page-mygov-auth-account .progress-tracker-claim-item .claim-info .title { + color: #FFFFFF; } -.payments-table__table th button.descending::after { - content: ""; - position: absolute; - top: 0; - right: 0; - width: 15px; - height: 15px; - background-size: contain; - background-position: center; - background-repeat: no-repeat; - transition-property: transform, margin, background; - transition-duration: 300ms; - transition-timing-function: ease; - margin-left: 0.5em; - position: absolute; - top: auto; - right: auto; - background-image: url("styles/resources/assets/icons/arrow-down-black.svg"); - transition-property: none; +@media only screen and (min-width: 48em) { + body .progress-tracker-claim-item .claim-info .title, +.page-mygov-auth-account .progress-tracker-claim-item .claim-info .title { + font-size: 16px; + font-size: 1rem; + margin-bottom: 5px; + margin-bottom: 0.3125rem; + line-height: 1.1875; + } } -.payments-table__table button.payments-table__sort-button { - border: 0; - background-color: #FFFFFF; - font-weight: bold; - color: #183052; +body .progress-tracker-claim-item .claim-info .status, +.page-mygov-auth-account .progress-tracker-claim-item .claim-info .status { + font-family: "Roboto", sans-serif; font-size: 16px; - cursor: pointer; - padding: 0; + font-size: 1rem; + line-height: 1.5; + font-weight: normal; + color: #525252; + color: #101820; + font-weight: 700; + padding: 0 0 21px 0; + padding: 0 0 1.3125rem 0; + color: #333333; + display: flex; + align-items: center; } -.payments-table__table button.payments-table__sort-button:focus { - outline: auto; +.theme-dark body .progress-tracker-claim-item .claim-info .status, +.theme-dark .page-mygov-auth-account .progress-tracker-claim-item .claim-info .status { + color: #FFFFFF; } -.payments-table__table__table-heading { - background-color: #FFFFFF; +.theme-dark body .progress-tracker-claim-item .claim-info .status, +.theme-dark .page-mygov-auth-account .progress-tracker-claim-item .claim-info .status { + color: #FFFFFF; } -.payments-table__table__table-heading__amount { - text-align: right !important; +body .progress-tracker-claim-item .claim-info .status img, +.page-mygov-auth-account .progress-tracker-claim-item .claim-info .status img { + margin-right: 12px; + margin-right: 0.75rem; + margin-top: 3px; + margin-top: 0.1875rem; + width: 20px; + width: 1.25rem; } -.payments-table__table__payment-row { - border-width: 0; - border: none; - cursor: pointer; - background-color: #FFFFFF !important; - transition: background-color 0.5s ease-in; +@media only screen and (min-width: 48em) { + body .progress-tracker-claim-item .claim-info .status, +.page-mygov-auth-account .progress-tracker-claim-item .claim-info .status { + padding: 0 0 28px 0; + padding: 0 0 1.75rem 0; + } } -.payments-table__table__payment-row.new { - background-color: #EAEAEA !important; - transition: background-color 0.5s ease-in; +body .progress-tracker-claim-item .claim-info .info, +.page-mygov-auth-account .progress-tracker-claim-item .claim-info .info { + font-family: "Roboto", sans-serif; + font-size: 16px; + font-size: 1rem; + line-height: 1.5; + font-weight: normal; + color: #525252; + font-size: 14px; + font-size: 0.875rem; + line-height: 1.3571428571; + margin-top: 5px; + margin-top: 0.3125rem; + margin-bottom: 9px; + margin-bottom: 0.5625rem; + color: #333333; + position: relative; + line-height: 1.2142857143; } -.payments-table__table__payment-row .link, .payments-table__table__payment-row .linked-services__rightInternalLink { - font-weight: 600 !important; +.theme-dark body .progress-tracker-claim-item .claim-info .info, +.theme-dark .page-mygov-auth-account .progress-tracker-claim-item .claim-info .info { + color: #FFFFFF; } -.payments-table__table__payment-row button.view-payment { - border: 0; - background: inherit; +body .progress-tracker-claim-item .claim-info .info b, +body .progress-tracker-claim-item .claim-info .info strong, +.page-mygov-auth-account .progress-tracker-claim-item .claim-info .info b, +.page-mygov-auth-account .progress-tracker-claim-item .claim-info .info strong { + font-size: 14px; + font-size: 0.875rem; + font-weight: 700; + line-height: normal; } -.payments-table__table__payment-row button.view-payment.view-payment--wide { - color: #006CE0; +body .progress-tracker-claim-item .claim-info .icon, +.page-mygov-auth-account .progress-tracker-claim-item .claim-info .icon { + background-size: 24px; + background-repeat: no-repeat; + background-position: center center; + top: 0; + align-self: start; } -.payments-table__table__payment-row__payment-desc { - position: relative; - line-height: 25px !important; +@media only screen and (min-width: 48em) { + body .progress-tracker-claim-item .claim-info, +.page-mygov-auth-account .progress-tracker-claim-item .claim-info { + padding: 16px 20px 0 20px; + padding: 1rem 1.25rem 0 1.25rem; + } } -.payments-table__table__payment-row__payment-desc__system { - font-weight: 600; - font-size: 18px !important; +body .progress-tracker-claim-item .claim-links, +.page-mygov-auth-account .progress-tracker-claim-item .claim-links { + border: 1px solid #DDDDDD; + border: 0.0625rem solid #DDDDDD; + border-bottom-right-radius: 6px; + border-bottom-right-radius: 0.375rem; + border-bottom-left-radius: 6px; + border-bottom-left-radius: 0.375rem; + display: block; + width: 100%; + position: relative; + overflow: hidden; + background-color: #F5F5F5; } -.payments-table__table__payment-row__payment-desc__amount { - font-weight: 600; - font-size: 18px !important; +body .progress-tracker-claim-item .claim-links p, +.page-mygov-auth-account .progress-tracker-claim-item .claim-links p { + margin: 0; + padding: 0; + line-height: 1; } -.payments-table__table__payment-row__payment-detail { - line-height: 25px !important; +body .progress-tracker-claim-item .claim-links p.status-heading, +.page-mygov-auth-account .progress-tracker-claim-item .claim-links p.status-heading { + margin-bottom: 4px; + margin-bottom: 0.25rem; + font-weight: 700; + color: #333333; + line-height: 1.3125; } -.payments-table__table__payment-row__payment-detail__amount { - font-weight: 600; +body .progress-tracker-claim-item .claim-links p .claim-status-link, +.page-mygov-auth-account .progress-tracker-claim-item .claim-links p .claim-status-link { + font-family: "Roboto", sans-serif; + font-size: 16px; + font-size: 1rem; + line-height: 1.5; + font-weight: normal; + color: #525252; + font-size: 14px; + font-size: 0.875rem; + height: 49px; + height: 3.0625rem; + padding: 14px 22px 16px; + padding: 0.875rem 1.375rem 1rem; + font-weight: 500; + position: relative; + display: flex; + align-items: center; + color: #254A7E; + text-decoration: none; + cursor: pointer; } -.payments-table__table__payment-row__payment-detail__amount.negative { - color: #DC3548; +.theme-dark body .progress-tracker-claim-item .claim-links p .claim-status-link, +.theme-dark .page-mygov-auth-account .progress-tracker-claim-item .claim-links p .claim-status-link { + color: #FFFFFF; } -.payments-table__table__payment-cell { - color: #525252; +body .progress-tracker-claim-item .claim-links p .claim-status-link .link-text, +.page-mygov-auth-account .progress-tracker-claim-item .claim-links p .claim-status-link .link-text { + color: var(--link-color); } -.payments-table__table__payment-cell__payment-system__literal { - font-size: 18px !important; - font-weight: 500 !important; +body .progress-tracker-claim-item .claim-links p .claim-status-link:focus, +.page-mygov-auth-account .progress-tracker-claim-item .claim-links p .claim-status-link:focus { + outline-offset: -8px; + outline-offset: -0.5rem; + margin-right: 15px; + margin-right: 0.9375rem; + transition-property: margin-right; + text-decoration: underline; } -.payments-table__table__payment-cell__amount { - font-size: 18px !important; - text-align: right !important; - font-weight: 500 !important; +body .progress-tracker-claim-item .claim-links p .claim-status-link:hover .link-text, +.page-mygov-auth-account .progress-tracker-claim-item .claim-links p .claim-status-link:hover .link-text { + color: #FFFFFF; + background-color: #254A7E; } -.payments-table__table__payment-cell__action { - min-width: 110px; +body .progress-tracker-claim-item .claim-links p .claim-status-link img, +.page-mygov-auth-account .progress-tracker-claim-item .claim-links p .claim-status-link img { + width: 11px; + width: 0.6875rem; + height: 11px; + height: 0.6875rem; + min-width: 11px; + min-width: 0.6875rem; + display: block; + background-size: contain; + background-position: center; + background-repeat: no-repeat; + transition: transform 150ms ease-out; + backface-visibility: hidden; + margin-left: 10px; + margin-left: 0.625rem; + margin-top: 1px; + margin-top: 0.0625rem; + display: block; } -.payments-table__table__text-message-row { - background-color: #FFFFFF !important; +body .progress-tracker-claim-item .claim-links p .claim-status-link.internal, +.page-mygov-auth-account .progress-tracker-claim-item .claim-links p .claim-status-link.internal { + background-color: #F5F5F5; } -.payments-table__table__text-message-row__text-message-cell { - text-align: center !important; +body .progress-tracker-claim-item .claim-links p .claim-status-link.internal[aria-expanded=true] img, +.page-mygov-auth-account .progress-tracker-claim-item .claim-links p .claim-status-link.internal[aria-expanded=true] img { + transform: rotate(180deg); } -.payments-table__table--narrow .payments-table__table__payment-row button.view-payment { - text-align: inherit; +body .progress-tracker-claim-item .claim-links .claim-status-link.external, +.page-mygov-auth-account .progress-tracker-claim-item .claim-links .claim-status-link.external { + margin-top: 18px; + margin-top: 1.125rem; + text-decoration: underline; } -.payments-table__table--narrow .payments-table__table__payment-row button.view-payment:focus { - outline: none; +@media only screen and (min-width: 48em) { + body .progress-tracker-claim-item .claim-links .claim-status-link.external, +.page-mygov-auth-account .progress-tracker-claim-item .claim-links .claim-status-link.external { + margin-top: 16px; + margin-top: 1rem; + } } -.payments-table__table--narrow .payments-table__table__payment-row:focus-within { - outline: 3px solid #000000; +body .progress-tracker-claim-item .claim-links img, +.page-mygov-auth-account .progress-tracker-claim-item .claim-links img { + margin-right: 15px; + margin-right: 0.9375rem; + margin-top: 3px; + margin-top: 0.1875rem; } -.payments-table__show-more-results { - margin-top: 10px; - display: inline-block; +body .progress-tracker-claim-item.compliant-claim-item .claim-info, +.page-mygov-auth-account .progress-tracker-claim-item.compliant-claim-item .claim-info { + border-bottom-right-radius: 0; + border-bottom-left-radius: 0; + border-bottom: 0 none; } -.payments-table__show-more-results .link, .payments-table__show-more-results .linked-services__rightInternalLink { - font-weight: normal; - color: #183052; - cursor: pointer; - text-decoration: underline; +@media only screen and (min-width: 48em) { + body .progress-tracker-claim-item, +.page-mygov-auth-account .progress-tracker-claim-item { + width: 666px; + width: 41.625rem; + } } -.payments-table__show-more-results .link:hover, .payments-table__show-more-results .linked-services__rightInternalLink:hover { - text-decoration: none; +body .claims-error-section, +.page-mygov-auth-account .claims-error-section { + text-align: center; } -.payments-table__show-more-results .link:not(.action)::after, .payments-table__show-more-results .linked-services__rightInternalLink:not(.action)::after { - background: url("styles/resources/assets/icons/chevron-down.svg") no-repeat; - top: 5px; +body .claims-error-section img, +.page-mygov-auth-account .claims-error-section img { + margin: 0 auto 30px; + margin: 0 auto 1.875rem; + width: 69px; + width: 4.3125rem; + height: 69px; + height: 4.3125rem; + min-width: 69px; + min-width: 4.3125rem; + display: block; + background-size: contain; + background-position: center; + background-repeat: no-repeat; + display: block; } -.payments-table__show-more-results .link:not(.action):hover::after, .payments-table__show-more-results .linked-services__rightInternalLink:not(.action):hover::after, .payments-table__show-more-results .link:not(.action):focus::after, .payments-table__show-more-results .linked-services__rightInternalLink:not(.action):focus::after { - right: -10px; +body .not-linked a.btn--primary[target=_blank], +.page-mygov-auth-account .not-linked a.btn--primary[target=_blank] { + line-height: unset; +} +body .not-linked a.btn--primary[target=_blank]::after, body .not-linked a.btn--primary[target=_blank]:hover body .not-linked a.btn--primary[target=_blank]::after, +.page-mygov-auth-account .not-linked a.btn--primary[target=_blank]::after, +body .not-linked a.btn--primary[target=_blank]:hover .page-mygov-auth-account .not-linked a.btn--primary[target=_blank]::after, +.page-mygov-auth-account .not-linked a.btn--primary[target=_blank]:hover body .not-linked a.btn--primary[target=_blank]::after, +.page-mygov-auth-account .not-linked a.btn--primary[target=_blank]:hover .page-mygov-auth-account .not-linked a.btn--primary[target=_blank]::after { + content: none; } -.error-container { - height: calc(100vh - 488px); - min-height: 200px; - min-height: 12.5rem; +.quick-exit { display: flex; flex-direction: column; - align-items: center; justify-content: center; + height: 110px; + max-height: 15vh; + min-height: 40px; + background-color: #FCB80E; + text-align: center; + text-decoration: none; width: 100%; } -.error-container img { - height: 68px; - height: 4.25rem; - width: 68px; - width: 4.25rem; -} - -.max-content-width { - max-width: 768px; +.quick-exit__header { + font-family: "Montserrat", sans-serif; + font-weight: 700; + color: #101820; + margin: 0; + font-size: 20px; } -@media (max-width: 639px) { - .max-content-width { - width: 100%; +@media only screen and (min-width: 64em) { + .quick-exit__header { + padding-bottom: 10px; } } - -.callout-box-content p { - margin-bottom: 8px; - margin-bottom: 0.5rem; - margin-top: 0; +.quick-exit__body { + font-family: "Roboto", sans-serif; + font-size: 16px; + font-size: 1rem; + line-height: 1.5; + font-weight: normal; + color: #525252; + color: #101820; + margin: 0; } - -.conflicting-profile-details { - display: flex; - flex-direction: column; +.theme-dark .quick-exit__body { + color: #FFFFFF; } -.conflicting-profile-details > div { - display: flex; +.quick-exit__body b, +.quick-exit__body strong { + font-family: "Roboto", sans-serif; + font-size: 16px; + font-size: 1rem; + line-height: 1.5; + font-weight: normal; + color: #525252; + color: #101820; + font-weight: 700; } -.conflicting-profile-details div > p { +.theme-dark .quick-exit__body b, +.theme-dark .quick-exit__body strong { + color: #FFFFFF; +} +.theme-dark .quick-exit__body b, +.theme-dark .quick-exit__body strong { + color: #FFFFFF; +} +.quick-exit strong { + font-family: "Roboto", sans-serif; + font-size: 16px; + font-size: 1rem; + line-height: 1.5; + font-weight: normal; + color: #525252; + color: #101820; + font-weight: 700; margin: 0; } -.conflicting-profile-details div > p:first-child { - width: 20%; +.theme-dark .quick-exit strong { + color: #FFFFFF; } -@media (max-width: 639px) { - .conflicting-profile-details > div { - flex-direction: column; - } - .conflicting-profile-details div > p:first-child { - width: 100%; +.theme-dark .quick-exit strong { + color: #FFFFFF; +} +@media only screen and (min-width: 64em) { + .quick-exit { + text-align: left; } } +.quick-exit p { + line-height: 1em; +} -.personal-details-table > div { - display: flex; - border-top: 2px solid #D9D9D6; - border-top: 0.125rem solid #D9D9D6; +.hide-quick-exit { + display: none; } -.personal-details-table > div:last-child { - border-bottom: 2px solid #D9D9D6; - border-bottom: 0.125rem solid #D9D9D6; + +.resources-carousel-container .react-multi-carousel-item { + height: 430px; } -.personal-details-table p { - margin: 24px 0; - margin: 1.5rem 0; + +.resources-carousel-item { + display: flex; + flex-direction: column; + padding: 20px 20px 30px; } -.personal-details-table .label-column { - margin: 0 16px 0 20px; - margin: 0 1rem 0 1.25rem; +.resources-carousel-item .item-box { display: flex; - align-items: center; - width: 30%; + flex-direction: column; + flex: 1; + align-items: stretch; + justify-content: flex-start; + padding-top: 70px; } -.personal-details-table .label-column p { - margin: 24px 0; - margin: 1.5rem 0; +.resources-carousel-item .item-box span { + font-family: "Montserrat", sans-serif; + font-weight: 700; + font-size: 24px; + font-size: 1.5rem; + line-height: 1.25; + color: #101820; + margin: 0; + display: block; } -.personal-details-table .label-column .alert-icon-box { - border-radius: 5px; - border-radius: 0.3125rem; - padding: 7px; - padding: 0.4375rem; - display: flex; - justify-content: center; - background-color: #FBE679; +.page-ausgov-home .resources-carousel-item .item-box span, .page-mygov-home .resources-carousel-item .item-box span { + font-size: 36px; + font-size: 2.25rem; + letter-spacing: -0.5px; + letter-spacing: -0.03125rem; + line-height: 1.1111111111; } -.personal-details-table .label-column .alert-icon-box img { - width: 16px; - width: 1rem; - height: 16px; - height: 1rem; +.page-mygov-auth-home .resources-carousel-item .item-box span, .page-mygov-auth-content .resources-carousel-item .item-box span { + font-weight: 400; } -@media (max-width: 639px) { - .personal-details-table > div { - flex-direction: column; - } - .personal-details-table > div:last-child { - border-bottom: none; - } - .personal-details-table p { - margin: 0 0 20px; - margin: 0 0 1.25rem; - } - .personal-details-table .label-column { - width: 100%; - margin: 0; - } - .personal-details-table .label-column p { - margin: 20px 0 12px; - margin: 1.25rem 0 0.75rem; - } -} - -.callout-box-container { - border-radius: 4px; - border-radius: 0.25rem; - padding: 20px; - padding: 1.25rem; - display: flex; - flex-direction: row-reverse; - justify-content: flex-end; +.key-message-container .resources-carousel-item .item-box span, .modal__content .resources-carousel-item .item-box span { + font-weight: 700; } -@media (max-width: 639px) { - .callout-box-container { - padding: 12px; - padding: 0.75rem; - } +.resources-carousel-item .item-box .description { + font-family: "Roboto", sans-serif; + font-size: 16px; + font-size: 1rem; + line-height: 1.5; + font-weight: normal; + color: #525252; + margin: 15px 0 0; } -.callout-box-container.warning { - border: 2px solid #FBE679; - border: 0.125rem solid #FBE679; - background-color: #FBE679; +.theme-dark .resources-carousel-item .item-box .description { + color: #FFFFFF; } -.callout-box-container .callout-box-icon-bar { - margin-right: 16px; - margin-right: 1rem; +.resources-carousel-item .item-bar { display: flex; - justify-content: center; -} -@media (max-width: 639px) { - .callout-box-container .callout-box-icon-bar { - margin-right: 12px; - margin-right: 0.75rem; - } -} -.callout-box-container .callout-box-icon-bar .callout-box-icon { - width: 24px; - width: 1.5rem; - height: 24px; - height: 1.5rem; + align-items: flex-end; + justify-content: space-between; + padding-top: 20px; + border-top: 1px solid #DDDDDD; } -@media (max-width: 639px) { - .callout-box-container .callout-box-icon-bar .callout-box-icon { - width: 16px; - width: 1rem; - height: 16px; - height: 1rem; - } +.resources-carousel-item .item-bar__meta .file-format, +.resources-carousel-item .item-bar__meta .file-size, +.resources-carousel-item .item-bar__meta .date { + font-family: "Roboto", sans-serif; + font-size: 16px; + font-size: 1rem; + line-height: 1.5; + font-weight: normal; + color: #525252; } - -.poll { - display: inline-block; - transition: height 1.25s; - width: 100%; +.theme-dark .resources-carousel-item .item-bar__meta .file-format, +.theme-dark .resources-carousel-item .item-bar__meta .file-size, +.theme-dark .resources-carousel-item .item-bar__meta .date { + color: #FFFFFF; } -.poll > * { - margin: auto; - text-align: left; +.resources-carousel-item .item-bar__meta > div span:not(:first-child) { + border-left: 1px solid #DDDDDD; + margin-left: 10px; + padding-left: 9px; } -.poll .question { - margin-top: 29px; - margin-bottom: 29px; - display: flex; - flex-direction: column; - align-items: center; - justify-content: flex-start; +.resources-carousel-item .item-bar__meta--file { + display: block; + position: relative; + margin-bottom: 5px; + padding-left: 24px; } -.poll .question .question-text { - display: inline-block; - font-family: "Roboto", sans-serif; - color: #000000; - line-height: 1.25; - margin-top: 1.875rem; - letter-spacing: 0; - font-weight: 500; - font-size: 1.625rem; +.resources-carousel-item .item-bar__meta--file::before { + width: 16px; + width: 1rem; + height: 16px; + height: 1rem; + min-width: 16px; + min-width: 1rem; + content: ""; + position: absolute; + top: 0; + left: 0; + background-size: contain; + background-position: center; + background-repeat: no-repeat; + transition-property: transform, margin; + transition-duration: 300ms; + transition-timing-function: ease; + top: 3px; + background-image: url("styles/resources/assets/icons/icon-attachment.svg"); } -@media (min-width: 30em) { - .poll .question .question-text { - margin-right: 32px; - } +.resources-carousel-item .item-bar__icon { + height: 30px; + width: 30px; } -.poll .question .question-buttons { - display: inline-flex; + +.section.top-border { + border-top: 1px solid grey; } -@media (min-width: 30em) { - .poll .question { - flex-direction: row; - } +.section.left-border { + border-left: 1px solid red; } -.poll .answers { - margin-bottom: 56px; +.section.bottom-border { + border-bottom: 1px solid grey; } -.poll .answers .sub-question-text { - font-family: "Roboto", sans-serif; - color: #000000; - line-height: 1.25; - margin-top: 1.25rem; - letter-spacing: 0.001em; - font-weight: 500; - font-size: 1.375rem; + +.section-heading { + position: relative; + width: 100%; + display: flex; + justify-content: space-between; } -.poll .answers .input-group { - align-items: flex-start; +.section-heading, .section-heading:first-child, .authenticated-container__page .section-heading, .authenticated-container__page .section-heading:first-child { + margin: 20px 0 28px; + margin: 1.25rem 0 1.75rem; } -.poll .answers legend { +.section-heading.sr-only, .section-heading:first-child.sr-only, .authenticated-container__page .section-heading.sr-only, .authenticated-container__page .section-heading:first-child.sr-only { margin: 0; - padding: 0; - display: inline; } -.poll .answers fieldset { +.section-heading.sr-only { + width: 1px; + width: 0.0625rem; + position: absolute; margin: 0; - padding: 0; display: inline; } -.poll .input-row { - display: flex; - align-items: flex-start; -} -.poll .input-row label { - display: inline-block; - vertical-align: top; - cursor: pointer; - padding: 1px 4px 0 0; - color: #000000; - font-weight: 400; - font-family: "Roboto", sans-serif; - font-size: 17px; +.section-heading:after { + height: 1px; + height: 0.0625rem; + content: ""; + position: absolute; + bottom: 0; + background-color: rgba(14, 99, 147, 0.2); + margin: auto; + right: 0; + left: 0; } -.poll .confirmation { - margin-bottom: 40px; - font-family: "Roboto", sans-serif; - color: black; - line-height: 1.25; - margin-top: 1.25rem; - letter-spacing: 0.001em; - font-weight: 500; - font-size: 1.375rem; +.section-heading div > :first-child { + margin-top: 30px; + margin-top: 1.875rem; } - -.profile { - max-width: 770px; +@media only screen and (min-width: 64em) { + .section-heading div > :first-child { + margin-top: 40px; + margin-top: 2.5rem; + } } -.profile .section-heading { - margin: 0 0 40px; +.section-heading h2 { + font-family: "Roboto", sans-serif; + margin-right: 10px; + margin-right: 0.625rem; + margin-bottom: 7px; + margin-bottom: 0.4375rem; + font-size: 18px; + font-size: 1.125rem; + font-weight: 400; + margin-top: 0; + margin-left: 0; + line-height: 1.4444444444; } -.profile__list { - margin: 0; +.section-heading h2::first-line { + line-height: 1.5; } -.profile__title { +.section-heading a { font-family: "Roboto", sans-serif; - color: #525252; + line-height: 28px; + line-height: 1.75rem; + margin-bottom: 15px; + margin-bottom: 0.9375rem; font-size: 16px; - line-height: 24px; - font-weight: normal; - color: #101820; - font-weight: 700; - margin: 0 0 8px; + font-size: 1rem; + display: inline-flex; + position: relative; + text-decoration: none; + color: #254A7E; + line-height: 1.1875; + margin-top: auto; + margin-left: auto; + white-space: nowrap; + padding-right: 0; + font-weight: 500; } -.theme-dark .profile__title { - color: #FFFFFF; +@media (min-width: 22.4375em) { + .section-heading a { + max-width: 95%; + } } -.theme-dark .profile__title { - color: #FFFFFF; +@media only screen and (min-width: 48em) { + .section-heading a { + margin-bottom: 7px; + margin-bottom: 0.4375rem; + max-width: 90%; + } } -.profile__panel { - background: #FFFFFF; - border-bottom: 1px solid #DDDDDD; - padding: 40px 22px; +@media only screen and (min-width: 64em) { + .section-heading a { + max-width: 75%; + } +} +.section-heading a:hover { + text-decoration: underline; +} +.section-heading a:hover, .section-heading a:focus { + color: #254A7E; +} +.section-heading a:hover:after, .section-heading a:focus:after { + transform: none; +} +.section-heading a:focus { + outline: 2px solid #254A7E; + outline: 0.125rem solid #254A7E; + text-decoration: none; +} +.section-heading a:after { + width: 7px; + width: 0.4375rem; + height: 11px; + height: 0.6875rem; + margin-left: 9px; + margin-left: 0.5625rem; + content: ""; + background: no-repeat bottom center; + background-image: url("resources/assets/icons/chevron-right-dark-blue.svg"); + position: static; + align-self: center; +} +.section-heading .items-count { + font-size: 18px; + font-size: 1.125rem; + font-weight: 400; + line-height: 1.625; + align-self: flex-end; +} +.section-heading.is-underlined { position: relative; + padding-bottom: 20px; + padding-bottom: 1.25rem; } -.profile__panel::before, .profile__panel::after { +.section-heading.is-underlined::before, .section-heading.is-underlined::after { content: ""; position: absolute; height: 5px; - top: 0; + bottom: 0; } -.profile__panel::before { +.section-heading.is-underlined::before { width: 50px; left: 0; background-color: #006CE0; } -.profile__panel::after { +.section-heading.is-underlined::after { width: calc(100% - 49px); right: 0; background-color: #183052; } +.section-heading.is-underlined + .section-description { + padding-top: 20px; + padding-top: 1.25rem; +} +.section-heading:focus, .section-heading:active { + outline: none; +} +.page-ausgov-home .section-heading a::after, .page-mygov-home .section-heading a::after { + top: 12px; + top: 0.75rem; +} +@media (max-width: 47.9375em) { + .section-heading { + flex-direction: column; + } + .section-heading a { + margin-left: 0; + } +} + @media only screen and (min-width: 64em) { - .profile__panel { - padding: 40px 30px; + .section-heading.is-padded, +.section-description.is-padded { + margin-left: 40px; + margin-left: 2.5rem; } } -.profile__info { - font-family: "Roboto", sans-serif; - color: #525252; - font-size: 18px; - line-height: 30px; - margin: 20px 0; - color: #101820; - margin: 0 0 20px; +.section-heading.is-centered, +.section-description.is-centered { + margin-left: auto; + margin-right: auto; + text-align: center; } -.theme-dark .profile__info { - color: #FFFFFF; +.section-heading.is-centered p, +.section-description.is-centered p { + text-align: center; } -.profile__info b, -.profile__info strong { - color: #101820; +.authenticated-container .section-heading, +.authenticated-container .section-description { + margin-left: 0; } -.profile__callout { - background: #FFFFFF; - border-bottom: 1px solid #DDDDDD; - padding: 20px 22px; + +.section-heading.is-centered { + padding-right: 0; } -@media only screen and (min-width: 64em) { - .profile__callout { - padding: 20px; - } + +.auth-section-heading { + margin: 60px 0 20px 0; + margin: 3.75rem 0 1.25rem 0; } -.profile__callout:last-of-type { - border-bottom: 0; + +.service-details { + overflow-wrap: break-word; } -.profile__data { + +/** Site wide alert **/ +.sitewide-alert { + display: none; + background: #DC3548; + color: #FFFFFF; + padding: 20px 60px 20px 80px; + flex-wrap: wrap; + position: relative; + min-height: 60px; + transition-duration: 300ms; +} +.sitewide-alert.is-active { + display: flex; +} +.sitewide-alert i.info { + position: absolute; + top: 0; + left: 0; + min-width: 60px; + height: 100%; + background: url("styles/resources/assets/icons/icon-alert-circle.svg") no-repeat; + background-color: rgba(0, 0, 0, 0.2); + background-size: 20px; + background-position: center center; +} +.sitewide-alert button.close { + position: absolute; + top: 0; + right: 0; + min-width: 60px; + height: 100%; + border: 0; + background: url("styles/resources/assets/icons/icon-close-white.svg") no-repeat; + background-color: rgba(0, 0, 0, 0.2); + background-size: 16px; + background-position: center center; + text-indent: -9999px; +} +.sitewide-alert p { font-family: "Roboto", sans-serif; - color: #525252; font-size: 16px; - line-height: 24px; + font-size: 1rem; + line-height: 1.5; font-weight: normal; - color: #101820; - margin: 0 0 6px; + color: #525252; + color: #FFFFFF; + margin: 0; + align-self: center; + margin-right: 20px; } -.theme-dark .profile__data { +.theme-dark .sitewide-alert p { color: #FFFFFF; } -.profile__data b, -.profile__data strong { +@media (max-width: 63.9375em) { + .sitewide-alert p + p { + margin-top: 16px; + } +} +.sitewide-alert p strong, +.sitewide-alert p b { font-family: "Roboto", sans-serif; - color: #525252; font-size: 16px; - line-height: 24px; + font-size: 1rem; + line-height: 1.5; font-weight: normal; + color: #525252; color: #101820; font-weight: 700; -} -.theme-dark .profile__data b, -.theme-dark .profile__data strong { color: #FFFFFF; } -.theme-dark .profile__data b, -.theme-dark .profile__data strong { +.theme-dark .sitewide-alert p strong, +.theme-dark .sitewide-alert p b { color: #FFFFFF; } -.profile__data:last-child { - margin: 0; -} -.profile dl dd { - margin: 0 0 6px; -} -.profile h2 { - margin: 60px 0 30px; +.theme-dark .sitewide-alert p strong, +.theme-dark .sitewide-alert p b { + color: #FFFFFF; } - -/* Detail View Styles */ -.progress-tracker-details { +.sitewide-alert a { + color: #FFFFFF; + text-decoration: none; + align-self: center; + font-weight: 700; position: relative; - flex-direction: column; - justify-content: space-between; - height: auto; -} -.progress-tracker-details__header { - display: block; - position: relative; - max-width: 770px; -} -.progress-tracker-details__header .link.back.highlight::before, .progress-tracker-details__header .back.highlight.linked-services__rightInternalLink::before { - transition: left 300ms; - left: 0; + padding: 5px 20px 5px 0; + display: inline-block; } -.progress-tracker-details__header .link.back.highlight:hover::before, .progress-tracker-details__header .back.highlight.linked-services__rightInternalLink:hover::before { - transition: left 300ms; - left: -10px; +.sitewide-alert a::before { + content: ""; + position: absolute; + top: 50%; + transform: translateY(-50%); + right: 0; + background: url("styles/resources/assets/icons/arrow-right-white.svg") no-repeat; + background-size: 14px; + width: 14px; + height: 14px; + transition: all 300ms; } -.progress-tracker-details__header h2 { - font-family: "Montserrat", sans-serif; - font-weight: 700; - color: #101820; - font-size: 36px; - line-height: 40px; - letter-spacing: -0.5px; - margin-bottom: 0; +.sitewide-alert a:hover, .sitewide-alert a:focus { + text-decoration: underline; } -.page-ausgov-home .progress-tracker-details__header h2, .page-mygov-home .progress-tracker-details__header h2 { - font-size: 50px; - line-height: 56px; +.sitewide-alert a:hover::before, .sitewide-alert a:focus::before { + right: -5px; } -@media only screen and (min-width: 64em) { - .page-ausgov-home .progress-tracker-details__header h2, .page-mygov-home .progress-tracker-details__header h2 { - font-size: 72px; - line-height: 80px; - letter-spacing: -1px; +@media (max-width: 47.9375em) { + .sitewide-alert { + padding-top: 20px; + padding-bottom: 20px; + padding-right: 80px; + } + .sitewide-alert p { + line-height: 1.5; } } -.page-mygov-auth-home .progress-tracker-details__header h2 { - font-size: 50px; - line-height: 56px; -} -.progress-tracker-details__header p { - font-family: "Roboto", sans-serif; - color: #525252; - font-size: 16px; - line-height: 24px; - font-weight: normal; - font-size: 14px; - line-height: 20px; - font-weight: normal; - color: #666666; +.sitewide-alert.is-persistent { + padding-right: 0; } -.theme-dark .progress-tracker-details__header p { - color: #FFFFFF; +.sitewide-alert.is-persistent .close { + display: none; } -.progress-tracker-details__header h3 { - margin-top: 40px; +.sitewide-alert.is-ongoing { + background: #F69900; } -.progress-tracker-details > ul { - list-style-type: none; - margin: 0; - width: calc(40px + 100%); - right: 20px; - padding: 0 0 0 20px; - position: relative; - box-shadow: 0 2pt 6pt rgba(17, 17, 18, 0.2509803922); - background-color: #FFFFFF; - border-radius: 0; +.sitewide-alert.is-resolved { + background: #1A9F50; } -@media only screen and (min-width: 48em) { - .progress-tracker-details > ul { - width: 100%; - max-width: 520px; - right: 0; - border-radius: 4px; - padding: 0 20px; - } +.sitewide-alert.is-offscreen { + height: 0; + min-height: 0; + padding-top: 0; + padding-bottom: 0; + transform: translate(0, -170px); } -.progress-tracker-details > ul li { - position: relative; - display: flex; - flex-flow: column nowrap; - min-height: 70px; - align-items: center; - padding: 13px 10px; - padding-left: 0; + +.react-loading-skeleton { + background-color: #EEE; + background-image: linear-gradient(90deg, #EEE, #F5F5F5, #EEE); + background-size: 200px 100%; + background-repeat: no-repeat; + border-radius: 4px; + display: inline-block; + line-height: 1; width: 100%; + animation: skeletonKeyframes 1s ease-in-out infinite; } -@media only screen and (min-width: 48em) { - .progress-tracker-details > ul li { - padding-left: 13px; - } -} -.progress-tracker-details > ul li::before { - position: absolute; - bottom: 0; - margin: 0 auto; - content: " "; - display: block; - height: 1px; - background-color: #DDDDDD; - width: calc(100% + 40px); - right: -20px; -} -.progress-tracker-details > ul li:last-child::before { - display: none; -} -.progress-tracker-details > ul li div { - display: flex; + +.loading-skeleton { + border-radius: 2px; + border-radius: 0.125rem; + background-color: #E4EAEC; + background-image: linear-gradient(90deg, #E4EAEC, #F5F5F5, #E4EAEC); + background-size: 200px 100%; + background-size: 12.5rem 100%; + background-repeat: no-repeat; + display: inline-block; + line-height: 1; width: 100%; - padding: 0; - margin: 0; - align-items: flex-start; - justify-content: space-around; - position: relative; + animation: skeletonKeyframes 1s ease-in-out infinite; } -.progress-tracker-details > ul li div > img { - width: 19px; - width: 1.1875rem; - height: 19px; - height: 1.1875rem; - min-width: 19px; - min-width: 1.1875rem; - display: block; - height: 19px; - width: 19px; - background-size: contain; - background-position: center; - background-repeat: no-repeat; - position: relative; - margin-top: 6px; + +@keyframes skeletonKeyframes { + 0% { + background-position: -200px 0; + } + 100% { + background-position: calc(200px + 100%) 0; + } } -.progress-tracker-details > ul li span { - position: relative; - display: flex; - flex-flow: column nowrap; - width: 100%; +/* to overide the border-top stying of profile-panel class */ +.profile__panel.skeleton:before, .profile__panel.skeleton:after { + content: none; } -.progress-tracker-details > ul li span p { - font-family: "Roboto", sans-serif; - font-size: 16px; - color: black; - font-weight: bold; - margin: 0; - margin-left: 15px; + +.smart-search, +.page-mygov-home .smart-search, +.global-header .wrapper .smart-search { + padding: 0 0 40px; } -.progress-tracker-details > ul li span p.date, .progress-tracker-details > ul li span p.body { - font-family: "Roboto", sans-serif; - color: #525252; - font-size: 16px; - line-height: 24px; - font-weight: normal; - font-size: 14px; - line-height: 20px; - color: #666666; - font-weight: normal; +@media only screen and (max-height: 56em) { + .smart-search, +.page-mygov-home .smart-search, +.global-header .wrapper .smart-search { + padding: 0 0 124px; + } } -.theme-dark .progress-tracker-details > ul li span p.date, .theme-dark .progress-tracker-details > ul li span p.body { - color: #FFFFFF; +@media only screen and (min-width: 77.75em) { + .smart-search, +.page-mygov-home .smart-search, +.global-header .wrapper .smart-search { + text-align: center; + padding: 0 0 100px; + } } -.progress-tracker-details > ul li span p.date a, .progress-tracker-details > ul li span p.body a { - margin-left: 0; +.smart-search .l-padding, +.page-mygov-home .smart-search .l-padding, +.global-header .wrapper .smart-search .l-padding { + margin-left: 0 !important; + padding-left: 0 !important; } -.progress-tracker-details > ul li span p.body { - margin: 10px 15px 0 15px; +.smart-search .search-header, +.page-mygov-home .smart-search .search-header, +.global-header .wrapper .smart-search .search-header { + margin: 0 0 15px; + text-align: left; + font-size: 50px; + line-height: 56px; } -.progress-tracker-details > ul li span p.body b, -.progress-tracker-details > ul li span p.body strong { - font-weight: 700; - font-size: 14px; - line-height: normal; +@media only screen and (min-width: 64em) { + .smart-search .search-header, +.page-mygov-home .smart-search .search-header, +.global-header .wrapper .smart-search .search-header { + margin-bottom: 20px; + font-size: 50px; + } } -.progress-tracker-details > ul li span .claim-status-link { - display: flex; - align-items: center; - color: #006CE0; - font-size: 14px; - font-weight: normal; - position: relative; - margin: 13px 15px 6px 15px; - text-decoration: none; +@media only screen and (min-width: 77.75em) { + .smart-search .search-header, +.page-mygov-home .smart-search .search-header, +.global-header .wrapper .smart-search .search-header { + display: block; + font-size: 72px; + line-height: 80px; + text-align: center; + } } -.progress-tracker-details > ul li span .claim-status-link:hover { - transition-property: margin-right; - transition-duration: 300ms; - margin-right: 15px; +.smart-search .search-result__title, +.page-mygov-home .smart-search .search-result__title, +.global-header .wrapper .smart-search .search-result__title { + color: #254A7E; + font-size: 28px; + font-weight: 300; + line-height: 1.4; + margin: 0; text-decoration: underline; + text-underline-position: under; + text-decoration-thickness: 1px; + width: 100%; + transition: color 150ms; } -.progress-tracker-details > ul li span .claim-status-link img { - width: 22px; - width: 1.375rem; - height: 22px; - height: 1.375rem; - min-width: 22px; - min-width: 1.375rem; - display: block; - height: 22px; - width: 22px; - background-size: contain; - background-position: center; - background-repeat: no-repeat; - transition: transform 150ms ease-out; - backface-visibility: hidden; - display: block; - margin-right: 10px; - margin-top: -2px; -} -.progress-tracker-details > ul li span .claim-status-link.external:hover img { - transform: translate(3px, -3px); -} -.progress-tracker-details > ul li span .claim-status-link.external img { - transition: transform 150ms ease-out; - backface-visibility: hidden; +@media only screen and (min-width: 1024px) { + .smart-search .search-result__title::after, +.page-mygov-home .smart-search .search-result__title::after, +.global-header .wrapper .smart-search .search-result__title::after { + width: 24px; + width: 1.5rem; + height: 24px; + height: 1.5rem; + min-width: 24px; + min-width: 1.5rem; + content: ""; + position: absolute; + top: 0; + right: 0; + background-size: contain; + background-position: center; + background-repeat: no-repeat; + transition-property: transform, margin, background; + transition-duration: 300ms; + transition-timing-function: ease; + top: unset; + right: 32px; + background-image: url("styles/resources/assets/icons/chevron-right-dark-blue.svg"); + transition: transform 150ms ease; + } } - -/* Dashboard Component Styles */ -.progress-tracker-carousel-item { - position: relative; - flex-direction: column; - justify-content: space-between; - padding: 20px; - padding-bottom: 0; - height: auto; +.smart-search .search-result__title b, +.smart-search .search-result__title strong, +.page-mygov-home .smart-search .search-result__title b, +.page-mygov-home .smart-search .search-result__title strong, +.global-header .wrapper .smart-search .search-result__title b, +.global-header .wrapper .smart-search .search-result__title strong { + color: inherit; + font-size: inherit; + line-height: inherit; + font-weight: 500; } -.progress-tracker-carousel-item .claim-info p { +.smart-search .search-result__description, +.page-mygov-home .smart-search .search-result__description, +.global-header .wrapper .smart-search .search-result__description { + color: #000000; margin: 0; + padding-top: 16px; + padding-right: 24px; + text-decoration: none; + font-weight: 200; + line-height: 28px; } -.progress-tracker-carousel-item .claim-info span { - margin: 20px 0 10px 0; -} -.progress-tracker-carousel-item .claim-info span strong { +.smart-search .search-result__description b, +.smart-search .search-result__description strong, +.page-mygov-home .smart-search .search-result__description b, +.page-mygov-home .smart-search .search-result__description strong, +.global-header .wrapper .smart-search .search-result__description b, +.global-header .wrapper .smart-search .search-result__description strong { font-family: "Roboto", sans-serif; - color: #525252; font-size: 16px; - line-height: 24px; + font-size: 1rem; + line-height: 1.5; font-weight: normal; - font-size: 14px; - line-height: 20px; - font-weight: 700; -} -.theme-dark .progress-tracker-carousel-item .claim-info span strong { - color: #FFFFFF; -} -.progress-tracker-carousel-item .claim-info .service { - font-family: "Roboto", sans-serif; color: #525252; - font-size: 16px; - line-height: 24px; - font-weight: normal; color: #101820; - font-size: 14px; - display: flex; - align-items: center; - max-height: 40px; - text-transform: capitalize; + font-weight: 700; + font-size: 18px; + line-height: 28px; } -.theme-dark .progress-tracker-carousel-item .claim-info .service { +.theme-dark .smart-search .search-result__description b, +.theme-dark .smart-search .search-result__description strong, +.theme-dark .page-mygov-home .smart-search .search-result__description b, +.theme-dark .page-mygov-home .smart-search .search-result__description strong, +.theme-dark .global-header .wrapper .smart-search .search-result__description b, +.theme-dark .global-header .wrapper .smart-search .search-result__description strong { color: #FFFFFF; } -.progress-tracker-carousel-item .claim-info .service img { - margin-right: 10px; +.theme-dark .smart-search .search-result__description b, +.theme-dark .smart-search .search-result__description strong, +.theme-dark .page-mygov-home .smart-search .search-result__description b, +.theme-dark .page-mygov-home .smart-search .search-result__description strong, +.theme-dark .global-header .wrapper .smart-search .search-result__description b, +.theme-dark .global-header .wrapper .smart-search .search-result__description strong { + color: #FFFFFF; } -.progress-tracker-carousel-item .claim-info .title { +.smart-search .search-result__searchterm, +.page-mygov-home .smart-search .search-result__searchterm, +.global-header .wrapper .smart-search .search-result__searchterm { font-family: "Roboto", sans-serif; + font-size: 18px; + font-size: 1.125rem; + margin: 20px 0; + margin: 1.25rem 0; + line-height: 1.6666666667; color: #525252; - font-size: 16px; - line-height: 24px; - font-weight: normal; - color: #101820; font-weight: 700; - color: #101820; - margin-top: 20px; - margin-bottom: 10px; + display: block; + text-decoration: underline; + margin: 0; + position: relative; + transition: color 150ms; + color: #254A7E; + font-weight: 200; } -.theme-dark .progress-tracker-carousel-item .claim-info .title { +.theme-dark .smart-search .search-result__searchterm, +.theme-dark .page-mygov-home .smart-search .search-result__searchterm, +.theme-dark .global-header .wrapper .smart-search .search-result__searchterm { color: #FFFFFF; } -.theme-dark .progress-tracker-carousel-item .claim-info .title { +.smart-search .search-result__searchterm:hover, .smart-search .search-result__searchterm:focus, +.page-mygov-home .smart-search .search-result__searchterm:hover, +.page-mygov-home .smart-search .search-result__searchterm:focus, +.global-header .wrapper .smart-search .search-result__searchterm:hover, +.global-header .wrapper .smart-search .search-result__searchterm:focus { color: #FFFFFF; + background-color: #254A7E; } -.progress-tracker-carousel-item .claim-info .status { - font-family: "Roboto", sans-serif; - color: #525252; - font-size: 16px; - line-height: 24px; - font-weight: normal; - font-size: 14px; - color: #101820; +.smart-search .search-result__searchterm:focus, +.page-mygov-home .smart-search .search-result__searchterm:focus, +.global-header .wrapper .smart-search .search-result__searchterm:focus { + border: 0; + outline: 2px solid #254A7E; +} +.smart-search .search-suggestion__autocomplete, +.page-mygov-home .smart-search .search-suggestion__autocomplete, +.global-header .wrapper .smart-search .search-suggestion__autocomplete { + display: inline-block; + flex-direction: column; + padding: 5px 0; + margin-bottom: 10px; +} +.smart-search .search-suggestion__suggestion, +.page-mygov-home .smart-search .search-suggestion__suggestion, +.global-header .wrapper .smart-search .search-suggestion__suggestion { display: flex; - align-items: center; - max-height: 30px; - padding: 5px 0 10px 0; + flex-direction: column; + padding: 5px 0; + padding: 2rem 1.5rem; } -.theme-dark .progress-tracker-carousel-item .claim-info .status { +.smart-search .search-suggestion__suggestion:hover .search-result__title, +.page-mygov-home .smart-search .search-suggestion__suggestion:hover .search-result__title, +.global-header .wrapper .smart-search .search-suggestion__suggestion:hover .search-result__title { color: #FFFFFF; + background: #254A7E; + text-decoration: none; + width: fit-content; } -.progress-tracker-carousel-item .claim-info .status img { - margin-right: 10px; +.smart-search .search-suggestion__suggestion:hover .search-result__title::after, +.page-mygov-home .smart-search .search-suggestion__suggestion:hover .search-result__title::after, +.global-header .wrapper .smart-search .search-suggestion__suggestion:hover .search-result__title::after { + transform: translateX(5px); } -.progress-tracker-carousel-item .claim-info .info { - font-family: "Roboto", sans-serif; - color: #525252; - font-size: 16px; - line-height: 24px; - font-weight: normal; - font-size: 14px; - line-height: 20px; - position: relative; - margin: 10px 0 20px 0; +.smart-search .search-suggestion__suggestion-link, +.page-mygov-home .smart-search .search-suggestion__suggestion-link, +.global-header .wrapper .smart-search .search-suggestion__suggestion-link { + display: block; + padding: 0; + text-decoration: none; } -.theme-dark .progress-tracker-carousel-item .claim-info .info { - color: #FFFFFF; +.smart-search .search-suggestion__suggestion-link:focus, +.page-mygov-home .smart-search .search-suggestion__suggestion-link:focus, +.global-header .wrapper .smart-search .search-suggestion__suggestion-link:focus { + outline: 2px solid #183052; } -.progress-tracker-carousel-item .claim-info .info b, -.progress-tracker-carousel-item .claim-info .info strong { - font-weight: 700; - font-size: 14px; - line-height: normal; +.smart-search .search-suggestion__suggestion-link:focus .search-result__title::after, +.page-mygov-home .smart-search .search-suggestion__suggestion-link:focus .search-result__title::after, +.global-header .wrapper .smart-search .search-suggestion__suggestion-link:focus .search-result__title::after { + transform: translateX(5px); } -.progress-tracker-carousel-item .claim-info .icon { - background-size: 24px; - background-repeat: no-repeat; - background-position: center center; - top: 0; - align-self: left; +.smart-search .search-suggestion__autocomplete:focus, .smart-search .search-suggestion__suggestion-link:focus, +.page-mygov-home .smart-search .search-suggestion__autocomplete:focus, +.page-mygov-home .smart-search .search-suggestion__suggestion-link:focus, +.global-header .wrapper .smart-search .search-suggestion__autocomplete:focus, +.global-header .wrapper .smart-search .search-suggestion__suggestion-link:focus { + border: 0; + outline: 3px solid #2B78E3; } -.progress-tracker-carousel-item .claim-links { - display: block; +.smart-search .search-wrapper, +.page-mygov-home .smart-search .search-wrapper, +.global-header .wrapper .smart-search .search-wrapper { width: 100%; - position: relative; + margin: auto 0; } -.progress-tracker-carousel-item .claim-links p { - margin: 0; - padding: 0; +@media only screen and (min-width: 77.75em) { + .smart-search .search-wrapper, +.page-mygov-home .smart-search .search-wrapper, +.global-header .wrapper .smart-search .search-wrapper { + max-width: 900px; + } } -.progress-tracker-carousel-item .claim-links p .claim-status-link { - font-family: "Roboto", sans-serif; - color: #525252; - font-size: 16px; - line-height: 24px; - font-weight: normal; - font-size: 14px; +.smart-search .search-wrapper .search-input-wrapper, +.page-mygov-home .smart-search .search-wrapper .search-input-wrapper, +.global-header .wrapper .smart-search .search-wrapper .search-input-wrapper { position: relative; - display: flex; - align-items: center; - color: #006CE0; - height: 50px; - padding: 3px 0; - text-decoration: none; - border-top: 1px solid #DDDDDD; - width: calc(40px + 100%); - right: 20px; - padding-left: 20px; -} -.theme-dark .progress-tracker-carousel-item .claim-links p .claim-status-link { - color: #FFFFFF; -} -.progress-tracker-carousel-item .claim-links p .claim-status-link:focus { - outline-offset: -8px; - transition-property: margin-right; - margin-right: 15px; + margin-top: 0; + margin-bottom: 0; } -.progress-tracker-carousel-item .claim-links p .claim-status-link:hover { - transition-property: margin-right; - transition-duration: 300ms; - margin-right: 15px; - text-decoration: underline; -} -.progress-tracker-carousel-item .claim-links p .claim-status-link img { - width: 19px; - width: 1.1875rem; - height: 19px; - height: 1.1875rem; - min-width: 19px; - min-width: 1.1875rem; +.smart-search .search-wrapper .search-input-wrapper .reset-button, +.page-mygov-home .smart-search .search-wrapper .search-input-wrapper .reset-button, +.global-header .wrapper .smart-search .search-wrapper .search-input-wrapper .reset-button { + position: absolute; + margin: auto; + right: 18px; + top: 0; + bottom: 0; + border: none; + text-decoration: none; + width: 100%; + height: auto; + width: 24px; + width: 1.5rem; + height: 24px; + height: 1.5rem; + min-width: 24px; + min-width: 1.5rem; display: block; - height: 19px; - width: 19px; background-size: contain; background-position: center; background-repeat: no-repeat; - transition: transform 150ms ease-out; - backface-visibility: hidden; - display: block; - margin-right: 10px; -} -.progress-tracker-carousel-item .claim-links p .claim-status-link.external:hover img { - transform: translate(3px, -3px); -} -.progress-tracker-carousel-item .claim-links p .claim-status-link.external img { - transition: transform 150ms ease-out; - backface-visibility: hidden; -} -.progress-tracker-carousel-item .claim-links p .claim-status-link.internal { - background-color: #F5F5F5; -} - -.quick-exit { - display: flex; - flex-direction: column; - justify-content: center; - height: 110px; - max-height: 15vh; - min-height: 40px; - background-color: #FCB80E; - text-align: center; - text-decoration: none; - width: 100%; -} -.quick-exit__header { - font-family: "Montserrat", sans-serif; - font-weight: 700; - color: #101820; - margin: 0; - font-size: 20px; + background-image: url("styles/resources/assets/icons/clear-dark-blue.svg"); } @media only screen and (min-width: 64em) { - .quick-exit__header { - padding-bottom: 10px; + .smart-search .search-wrapper .search-input-wrapper .reset-button, +.page-mygov-home .smart-search .search-wrapper .search-input-wrapper .reset-button, +.global-header .wrapper .smart-search .search-wrapper .search-input-wrapper .reset-button { + right: 22px; } } -.quick-exit__body { - font-family: "Roboto", sans-serif; - color: #525252; - font-size: 16px; - line-height: 24px; - font-weight: normal; - color: #101820; - margin: 0; +@media only screen and (min-width: 77.75em) { + .smart-search .search-wrapper .search-input-wrapper .reset-button, +.page-mygov-home .smart-search .search-wrapper .search-input-wrapper .reset-button, +.global-header .wrapper .smart-search .search-wrapper .search-input-wrapper .reset-button { + width: 30px; + width: 1.875rem; + height: 30px; + height: 1.875rem; + min-width: 30px; + min-width: 1.875rem; + display: block; + background-size: contain; + background-position: center; + background-repeat: no-repeat; + right: 24px; + } } -.theme-dark .quick-exit__body { - color: #FFFFFF; +.smart-search .search-wrapper .search-input-wrapper .reset-button:focus, +.page-mygov-home .smart-search .search-wrapper .search-input-wrapper .reset-button:focus, +.global-header .wrapper .smart-search .search-wrapper .search-input-wrapper .reset-button:focus { + outline: 3px solid #000000; } -.quick-exit__body b, -.quick-exit__body strong { - font-family: "Roboto", sans-serif; - color: #525252; - font-size: 16px; - line-height: 24px; - font-weight: normal; - color: #101820; - font-weight: 700; +.smart-search .search-wrapper .search-input-wrapper .reset-button span:not(.sr-only), +.page-mygov-home .smart-search .search-wrapper .search-input-wrapper .reset-button span:not(.sr-only), +.global-header .wrapper .smart-search .search-wrapper .search-input-wrapper .reset-button span:not(.sr-only) { + position: relative; + padding-right: 29px; + margin-right: 15px; + background: transparent; + height: 100%; } -.theme-dark .quick-exit__body b, -.theme-dark .quick-exit__body strong { - color: #FFFFFF; +@media (max-width: 63.9375em) { + .smart-search .search-wrapper .search-input-wrapper .reset-button span:not(.sr-only), +.page-mygov-home .smart-search .search-wrapper .search-input-wrapper .reset-button span:not(.sr-only), +.global-header .wrapper .smart-search .search-wrapper .search-input-wrapper .reset-button span:not(.sr-only) { + font-size: 14px; + } } -.theme-dark .quick-exit__body b, -.theme-dark .quick-exit__body strong { - color: #FFFFFF; +@media only screen and (min-width: 77.75em) { + .smart-search .search-wrapper .search-input-wrapper .reset-button span:not(.sr-only), +.page-mygov-home .smart-search .search-wrapper .search-input-wrapper .reset-button span:not(.sr-only), +.global-header .wrapper .smart-search .search-wrapper .search-input-wrapper .reset-button span:not(.sr-only) { + margin-right: 24px; + padding-right: 45px; + } } -.quick-exit strong { - font-family: "Roboto", sans-serif; - color: #525252; - font-size: 16px; - line-height: 24px; - font-weight: normal; - color: #101820; - font-weight: 700; - margin: 0; +.smart-search .search-wrapper .search-input-wrapper .loading-spinner, +.page-mygov-home .smart-search .search-wrapper .search-input-wrapper .loading-spinner, +.global-header .wrapper .smart-search .search-wrapper .search-input-wrapper .loading-spinner { + width: 24px; + width: 1.5rem; + height: 24px; + height: 1.5rem; + min-width: 24px; + min-width: 1.5rem; + display: block; + background-size: contain; + background-position: center; + background-repeat: no-repeat; + background-image: url("styles/resources/assets/icons/spinner-dark-blue.svg"); + margin: 13px 28px 0; } -.theme-dark .quick-exit strong { - color: #FFFFFF; +@media only screen and (min-width: 64em) { + .smart-search .search-wrapper .search-input-wrapper .loading-spinner, +.page-mygov-home .smart-search .search-wrapper .search-input-wrapper .loading-spinner, +.global-header .wrapper .smart-search .search-wrapper .search-input-wrapper .loading-spinner { + width: 24px; + width: 1.5rem; + height: 24px; + height: 1.5rem; + min-width: 24px; + min-width: 1.5rem; + display: block; + background-size: contain; + background-position: center; + background-repeat: no-repeat; + margin: 12px 24px; + } } -.theme-dark .quick-exit strong { - color: #FFFFFF; +@media only screen and (min-width: 77.75em) { + .smart-search .search-wrapper .search-input-wrapper .loading-spinner, +.page-mygov-home .smart-search .search-wrapper .search-input-wrapper .loading-spinner, +.global-header .wrapper .smart-search .search-wrapper .search-input-wrapper .loading-spinner { + width: 30px; + width: 1.875rem; + height: 30px; + height: 1.875rem; + min-width: 30px; + min-width: 1.875rem; + display: block; + background-size: contain; + background-position: center; + background-repeat: no-repeat; + margin: auto; + margin-right: 24px; + } +} +.smart-search .search-wrapper .search-input-wrapper .search-icon, +.page-mygov-home .smart-search .search-wrapper .search-input-wrapper .search-icon, +.global-header .wrapper .smart-search .search-wrapper .search-input-wrapper .search-icon { + width: 24px; + width: 1.5rem; + height: 24px; + height: 1.5rem; + min-width: 24px; + min-width: 1.5rem; + display: block; + background-size: contain; + background-position: center; + background-repeat: no-repeat; + position: absolute; + margin: auto; + margin-right: 18px; + right: 0; + left: 0; + top: 0; + bottom: 0; + border: none; + background-color: transparent; + background-image: url("styles/resources/assets/icons/search-black.svg"); } @media only screen and (min-width: 64em) { - .quick-exit { - text-align: left; + .smart-search .search-wrapper .search-input-wrapper .search-icon, +.page-mygov-home .smart-search .search-wrapper .search-input-wrapper .search-icon, +.global-header .wrapper .smart-search .search-wrapper .search-input-wrapper .search-icon { + margin-right: 22px; } } -.quick-exit p { - line-height: 1em; +@media only screen and (min-width: 77.75em) { + .smart-search .search-wrapper .search-input-wrapper .search-icon, +.page-mygov-home .smart-search .search-wrapper .search-input-wrapper .search-icon, +.global-header .wrapper .smart-search .search-wrapper .search-input-wrapper .search-icon { + margin-right: 24px; + } } - -.hide-quick-exit { - display: none; +.smart-search .search-wrapper .search-input-wrapper .search-input-action, +.page-mygov-home .smart-search .search-wrapper .search-input-wrapper .search-input-action, +.global-header .wrapper .smart-search .search-wrapper .search-input-wrapper .search-input-action { + z-index: 500; + position: absolute; + right: 0; + top: 0; + height: 61px; + width: 61px; } - -.resources-carousel-container .react-multi-carousel-item { - height: 430px; +@media only screen and (min-width: 64em) { + .smart-search .search-wrapper .search-input-wrapper .search-input-action, +.page-mygov-home .smart-search .search-wrapper .search-input-wrapper .search-input-action, +.global-header .wrapper .smart-search .search-wrapper .search-input-wrapper .search-input-action { + height: 61px; + width: 100px; + display: flex; + } } - -.resources-carousel-item { - display: flex; - flex-direction: column; - padding: 20px 20px 30px; +.smart-search .search-wrapper .search-input-wrapper .smart-search-text-input, +.page-mygov-home .smart-search .search-wrapper .search-input-wrapper .smart-search-text-input, +.global-header .wrapper .smart-search .search-wrapper .search-input-wrapper .smart-search-text-input { + border: 1px solid #000000; + border-radius: 2px; + margin: 0; + background-color: #FFFFFF; + top: 0; + color: #000000; + height: 61px; + padding-left: 15px; + padding-right: 95px; + font-size: 18px; + transition: border 150ms, box-shadow none; } -.resources-carousel-item .item-box { - display: flex; - flex-direction: column; - flex: 1; - align-items: stretch; - justify-content: flex-start; - padding-top: 70px; +.smart-search .search-wrapper .search-input-wrapper .smart-search-text-input:hover, .smart-search .search-wrapper .search-input-wrapper .smart-search-text-input:focus, +.page-mygov-home .smart-search .search-wrapper .search-input-wrapper .smart-search-text-input:hover, +.page-mygov-home .smart-search .search-wrapper .search-input-wrapper .smart-search-text-input:focus, +.global-header .wrapper .smart-search .search-wrapper .search-input-wrapper .smart-search-text-input:hover, +.global-header .wrapper .smart-search .search-wrapper .search-input-wrapper .smart-search-text-input:focus { + border-width: 2px; } -.resources-carousel-item .item-box span { - font-family: "Montserrat", sans-serif; - font-weight: 700; - color: #101820; - font-size: 24px; - line-height: 30px; - margin: 0; - display: block; +.smart-search .search-wrapper .search-input-wrapper .smart-search-text-input:focus, .smart-search .search-wrapper .search-input-wrapper .smart-search-text-input:active, +.page-mygov-home .smart-search .search-wrapper .search-input-wrapper .smart-search-text-input:focus, +.page-mygov-home .smart-search .search-wrapper .search-input-wrapper .smart-search-text-input:active, +.global-header .wrapper .smart-search .search-wrapper .search-input-wrapper .smart-search-text-input:focus, +.global-header .wrapper .smart-search .search-wrapper .search-input-wrapper .smart-search-text-input:active { + outline: 2px solid #183052; + outline-offset: 2px; + -webkit-appearance: none; } -.page-ausgov-home .resources-carousel-item .item-box span, .page-mygov-home .resources-carousel-item .item-box span { - font-size: 36px; - line-height: 40px; - letter-spacing: -0.5px; +.smart-search .search-wrapper .search-input-wrapper .smart-search-text-input::-ms-clear, .smart-search .search-wrapper .search-input-wrapper .smart-search-text-input::-ms-reveal, +.page-mygov-home .smart-search .search-wrapper .search-input-wrapper .smart-search-text-input::-ms-clear, +.page-mygov-home .smart-search .search-wrapper .search-input-wrapper .smart-search-text-input::-ms-reveal, +.global-header .wrapper .smart-search .search-wrapper .search-input-wrapper .smart-search-text-input::-ms-clear, +.global-header .wrapper .smart-search .search-wrapper .search-input-wrapper .smart-search-text-input::-ms-reveal { + display: none; + width: 0; + height: 0; } -.page-mygov-auth-home .resources-carousel-item .item-box span, .page-mygov-auth-content .resources-carousel-item .item-box span { - font-weight: 400; +.smart-search .search-wrapper .react-autosuggest__suggestions-container, +.page-mygov-home .smart-search .search-wrapper .react-autosuggest__suggestions-container, +.global-header .wrapper .smart-search .search-wrapper .react-autosuggest__suggestions-container { + background: transparent; } -.key-message-container .resources-carousel-item .item-box span, .modal__content .resources-carousel-item .item-box span { - font-weight: 700; +.smart-search .search-wrapper .react-autosuggest__suggestions-list, +.page-mygov-home .smart-search .search-wrapper .react-autosuggest__suggestions-list, +.global-header .wrapper .smart-search .search-wrapper .react-autosuggest__suggestions-list { + margin: 20px 0; + border-left: 4px solid #254A7E; + padding-left: 20px; } -.resources-carousel-item .item-box .description { - font-family: "Roboto", sans-serif; - color: #525252; - font-size: 16px; - line-height: 24px; - font-weight: normal; - margin: 15px 0 0; +.smart-search .search-wrapper .react-autosuggest__suggestion, +.page-mygov-home .smart-search .search-wrapper .react-autosuggest__suggestion, +.global-header .wrapper .smart-search .search-wrapper .react-autosuggest__suggestion { + list-style: none; + text-align: left; + cursor: pointer; + border: 0; } -.theme-dark .resources-carousel-item .item-box .description { - color: #FFFFFF; +.smart-search .search-wrapper .react-autosuggest__suggestion--highlighted:not(:hover) .search-result__searchterm, +.smart-search .search-wrapper .react-autosuggest__suggestion--highlighted:not(:hover) .search-suggestion__suggestion-link, +.page-mygov-home .smart-search .search-wrapper .react-autosuggest__suggestion--highlighted:not(:hover) .search-result__searchterm, +.page-mygov-home .smart-search .search-wrapper .react-autosuggest__suggestion--highlighted:not(:hover) .search-suggestion__suggestion-link, +.global-header .wrapper .smart-search .search-wrapper .react-autosuggest__suggestion--highlighted:not(:hover) .search-result__searchterm, +.global-header .wrapper .smart-search .search-wrapper .react-autosuggest__suggestion--highlighted:not(:hover) .search-suggestion__suggestion-link { + border: 0; + outline: 3px solid #2B78E3; } -.resources-carousel-item .item-bar { - display: flex; - align-items: flex-end; - justify-content: space-between; - padding-top: 20px; - border-top: 1px solid #DDDDDD; +.smart-search .search-wrapper .react-autosuggest__suggestion--highlighted:not(:hover) .search-result__title::after, +.page-mygov-home .smart-search .search-wrapper .react-autosuggest__suggestion--highlighted:not(:hover) .search-result__title::after, +.global-header .wrapper .smart-search .search-wrapper .react-autosuggest__suggestion--highlighted:not(:hover) .search-result__title::after { + transform: translateX(5px); } -.resources-carousel-item .item-bar__meta .file-format, -.resources-carousel-item .item-bar__meta .file-size, -.resources-carousel-item .item-bar__meta .date { - font-family: "Roboto", sans-serif; - color: #525252; - font-size: 16px; - line-height: 24px; - font-weight: normal; +.smart-search .search-wrapper .react-autosuggest__section-container, +.page-mygov-home .smart-search .search-wrapper .react-autosuggest__section-container, +.global-header .wrapper .smart-search .search-wrapper .react-autosuggest__section-container { + padding-top: 15px; } -.theme-dark .resources-carousel-item .item-bar__meta .file-format, -.theme-dark .resources-carousel-item .item-bar__meta .file-size, -.theme-dark .resources-carousel-item .item-bar__meta .date { - color: #FFFFFF; +.smart-search .search-wrapper .react-autosuggest__section-container h3, +.page-mygov-home .smart-search .search-wrapper .react-autosuggest__section-container h3, +.global-header .wrapper .smart-search .search-wrapper .react-autosuggest__section-container h3 { + text-align: left; } -.resources-carousel-item .item-bar__meta > div span:not(:first-child) { - border-left: 1px solid #DDDDDD; - margin-left: 10px; - padding-left: 9px; +.smart-search .search-wrapper .react-autosuggest__section-container:not(:first-child), +.page-mygov-home .smart-search .search-wrapper .react-autosuggest__section-container:not(:first-child), +.global-header .wrapper .smart-search .search-wrapper .react-autosuggest__section-container:not(:first-child) { + border-top: 1px solid rgba(255, 255, 255, 0.3); } -.resources-carousel-item .item-bar__meta--file { - display: block; +.smart-search .search-wrapper .suggested-results, +.page-mygov-home .smart-search .search-wrapper .suggested-results, +.global-header .wrapper .smart-search .search-wrapper .suggested-results { + border-top: 1px solid rgba(255, 255, 255, 0.3); +} +.smart-search .search-wrapper .suggested-results, +.smart-search .search-wrapper .search-results, +.page-mygov-home .smart-search .search-wrapper .suggested-results, +.page-mygov-home .smart-search .search-wrapper .search-results, +.global-header .wrapper .smart-search .search-wrapper .suggested-results, +.global-header .wrapper .smart-search .search-wrapper .search-results { + text-align: left; + width: 99%; +} +.smart-search .search-wrapper .suggested-results__item, +.smart-search .search-wrapper .search-results__item, +.page-mygov-home .smart-search .search-wrapper .suggested-results__item, +.page-mygov-home .smart-search .search-wrapper .search-results__item, +.global-header .wrapper .smart-search .search-wrapper .suggested-results__item, +.global-header .wrapper .smart-search .search-wrapper .search-results__item { + border-bottom: solid 1px #DDDDDD; +} +.smart-search .search-wrapper .suggested-results__item:first-child, +.smart-search .search-wrapper .search-results__item:first-child, +.page-mygov-home .smart-search .search-wrapper .suggested-results__item:first-child, +.page-mygov-home .smart-search .search-wrapper .search-results__item:first-child, +.global-header .wrapper .smart-search .search-wrapper .suggested-results__item:first-child, +.global-header .wrapper .smart-search .search-wrapper .search-results__item:first-child { + border-top: solid 1px #DDDDDD; +} +.smart-search .search-wrapper .suggested-results__item a:hover, .smart-search .search-wrapper .suggested-results__item a:focus, .smart-search .search-wrapper .suggested-results__item a:active, +.smart-search .search-wrapper .search-results__item a:hover, +.smart-search .search-wrapper .search-results__item a:focus, +.smart-search .search-wrapper .search-results__item a:active, +.page-mygov-home .smart-search .search-wrapper .suggested-results__item a:hover, +.page-mygov-home .smart-search .search-wrapper .suggested-results__item a:focus, +.page-mygov-home .smart-search .search-wrapper .suggested-results__item a:active, +.page-mygov-home .smart-search .search-wrapper .search-results__item a:hover, +.page-mygov-home .smart-search .search-wrapper .search-results__item a:focus, +.page-mygov-home .smart-search .search-wrapper .search-results__item a:active, +.global-header .wrapper .smart-search .search-wrapper .suggested-results__item a:hover, +.global-header .wrapper .smart-search .search-wrapper .suggested-results__item a:focus, +.global-header .wrapper .smart-search .search-wrapper .suggested-results__item a:active, +.global-header .wrapper .smart-search .search-wrapper .search-results__item a:hover, +.global-header .wrapper .smart-search .search-wrapper .search-results__item a:focus, +.global-header .wrapper .smart-search .search-wrapper .search-results__item a:active { + color: #FFFFFF !important; + border-bottom: unset; +} +.smart-search .search-wrapper .suggested-results__item a:hover, +.smart-search .search-wrapper .search-results__item a:hover, +.page-mygov-home .smart-search .search-wrapper .suggested-results__item a:hover, +.page-mygov-home .smart-search .search-wrapper .search-results__item a:hover, +.global-header .wrapper .smart-search .search-wrapper .suggested-results__item a:hover, +.global-header .wrapper .smart-search .search-wrapper .search-results__item a:hover { + background-color: #F5F5F5; +} +.smart-search .search-wrapper .suggested-results__item a:focus, +.smart-search .search-wrapper .search-results__item a:focus, +.page-mygov-home .smart-search .search-wrapper .suggested-results__item a:focus, +.page-mygov-home .smart-search .search-wrapper .search-results__item a:focus, +.global-header .wrapper .smart-search .search-wrapper .suggested-results__item a:focus, +.global-header .wrapper .smart-search .search-wrapper .search-results__item a:focus { + border-radius: 1px; +} +.smart-search .search-wrapper .suggested-results__item a:active, +.smart-search .search-wrapper .search-results__item a:active, +.page-mygov-home .smart-search .search-wrapper .suggested-results__item a:active, +.page-mygov-home .smart-search .search-wrapper .search-results__item a:active, +.global-header .wrapper .smart-search .search-wrapper .suggested-results__item a:active, +.global-header .wrapper .smart-search .search-wrapper .search-results__item a:active { + border-radius: 1px; +} +.smart-search .search-wrapper .suggested-results__status, +.smart-search .search-wrapper .search-results__status, +.page-mygov-home .smart-search .search-wrapper .suggested-results__status, +.page-mygov-home .smart-search .search-wrapper .search-results__status, +.global-header .wrapper .smart-search .search-wrapper .suggested-results__status, +.global-header .wrapper .smart-search .search-wrapper .search-results__status { + font-family: "Roboto", sans-serif; + font-size: 18px; + font-size: 1.125rem; + margin: 20px 0; + margin: 1.25rem 0; + line-height: 1.6666666667; + color: #525252; + margin: 0; position: relative; - margin-bottom: 5px; - padding-left: 24px; + padding-left: 28px; } -.resources-carousel-item .item-bar__meta--file::before { +.theme-dark .smart-search .search-wrapper .suggested-results__status, +.theme-dark .smart-search .search-wrapper .search-results__status, +.theme-dark .page-mygov-home .smart-search .search-wrapper .suggested-results__status, +.theme-dark .page-mygov-home .smart-search .search-wrapper .search-results__status, +.theme-dark .global-header .wrapper .smart-search .search-wrapper .suggested-results__status, +.theme-dark .global-header .wrapper .smart-search .search-wrapper .search-results__status { + color: #FFFFFF; +} +.smart-search .search-wrapper .suggested-results__status::before, +.smart-search .search-wrapper .search-results__status::before, +.page-mygov-home .smart-search .search-wrapper .suggested-results__status::before, +.page-mygov-home .smart-search .search-wrapper .search-results__status::before, +.global-header .wrapper .smart-search .search-wrapper .suggested-results__status::before, +.global-header .wrapper .smart-search .search-wrapper .search-results__status::before { + width: 18px; + width: 1.125rem; + height: 18px; + height: 1.125rem; + min-width: 18px; + min-width: 1.125rem; content: ""; position: absolute; top: 0; left: 0; - width: 16px; - height: 16px; background-size: contain; background-position: center; background-repeat: no-repeat; transition-property: transform, margin; transition-duration: 300ms; transition-timing-function: ease; - top: 3px; - background-image: url("styles/resources/assets/icons/icon-attachment.svg"); -} -.resources-carousel-item .item-bar__icon { - height: 30px; - width: 30px; -} - -.section.top-border { - border-top: 1px solid grey; + top: 5px; } -.section.left-border { - border-left: 1px solid red; -} -.section.bottom-border { - border-bottom: 1px solid grey; -} - -.section-heading { - position: relative; - width: 100%; - display: flex; - justify-content: space-between; -} -.section-heading, .section-heading:first-child, .authenticated-container__page .section-heading, .authenticated-container__page .section-heading:first-child { - margin: 20px 0 28px; - margin: 1.25rem 0 1.75rem; -} -.section-heading.sr-only, .section-heading:first-child.sr-only, .authenticated-container__page .section-heading.sr-only, .authenticated-container__page .section-heading:first-child.sr-only { - margin: 0; -} -.section-heading.sr-only { - width: 1px; - width: 0.0625rem; - position: absolute; - margin: 0; - display: inline; -} -.section-heading:after { - height: 1px; - height: 0.0625rem; - content: ""; - position: absolute; - bottom: 0; - background-color: rgba(14, 99, 147, 0.2); - margin: auto; - right: 0; - left: 0; -} -.section-heading div > :first-child { - margin-top: 30px; - margin-top: 1.875rem; +.smart-search .search-wrapper .suggested-results__status--loading, +.smart-search .search-wrapper .search-results__status--loading, +.page-mygov-home .smart-search .search-wrapper .suggested-results__status--loading, +.page-mygov-home .smart-search .search-wrapper .search-results__status--loading, +.global-header .wrapper .smart-search .search-wrapper .suggested-results__status--loading, +.global-header .wrapper .smart-search .search-wrapper .search-results__status--loading { + opacity: 0; + animation: fadeIn 300ms 2000ms forwards; + transition: 150ms; } -@media only screen and (min-width: 64em) { - .section-heading div > :first-child { - margin-top: 40px; - margin-top: 2.5rem; +@keyframes fadeIn { + 0% { + opacity: 0; + } + 100% { + opacity: 100; } } -.section-heading h2 { - font-family: "Roboto", sans-serif; - margin-right: 10px; - margin-right: 0.625rem; - margin-bottom: 7px; - margin-bottom: 0.4375rem; - font-size: 18px; - font-size: 1.125rem; - font-weight: 400; - margin-top: 0; - margin-left: 0; - line-height: 1.4444444444; +.smart-search .search-wrapper .suggested-results__status--loading::before, +.smart-search .search-wrapper .search-results__status--loading::before, +.page-mygov-home .smart-search .search-wrapper .suggested-results__status--loading::before, +.page-mygov-home .smart-search .search-wrapper .search-results__status--loading::before, +.global-header .wrapper .smart-search .search-wrapper .suggested-results__status--loading::before, +.global-header .wrapper .smart-search .search-wrapper .search-results__status--loading::before { + background-image: url("styles/resources/assets/icons/icon-info-white.svg"); } -.section-heading h2::first-line { - line-height: 1.5; +.smart-search .search-wrapper .suggested-results__status--error::before, +.smart-search .search-wrapper .search-results__status--error::before, +.page-mygov-home .smart-search .search-wrapper .suggested-results__status--error::before, +.page-mygov-home .smart-search .search-wrapper .search-results__status--error::before, +.global-header .wrapper .smart-search .search-wrapper .suggested-results__status--error::before, +.global-header .wrapper .smart-search .search-wrapper .search-results__status--error::before { + background-image: url("styles/resources/assets/icons/icon-warning-white.svg"); } -.section-heading a { +.smart-search .search-wrapper .suggested-results__status--empty::before, +.smart-search .search-wrapper .search-results__status--empty::before, +.page-mygov-home .smart-search .search-wrapper .suggested-results__status--empty::before, +.page-mygov-home .smart-search .search-wrapper .search-results__status--empty::before, +.global-header .wrapper .smart-search .search-wrapper .suggested-results__status--empty::before, +.global-header .wrapper .smart-search .search-wrapper .search-results__status--empty::before { + background-image: url("styles/resources/assets/icons/icon-alert-circle.svg"); +} +.smart-search .search-wrapper .suggested-results__count, +.smart-search .search-wrapper .search-results__count, +.page-mygov-home .smart-search .search-wrapper .suggested-results__count, +.page-mygov-home .smart-search .search-wrapper .search-results__count, +.global-header .wrapper .smart-search .search-wrapper .suggested-results__count, +.global-header .wrapper .smart-search .search-wrapper .search-results__count { font-family: "Roboto", sans-serif; - line-height: 28px; - line-height: 1.75rem; - margin-bottom: 15px; - margin-bottom: 0.9375rem; font-size: 16px; font-size: 1rem; - display: inline-flex; + line-height: 1.5; + font-weight: normal; + color: #525252; + margin: 0; position: relative; - text-decoration: none; - color: #254A7E; - line-height: 1.1875; - margin-top: auto; - margin-left: auto; - white-space: nowrap; - padding-right: 0; - font-weight: 500; -} -@media (min-width: 22.4375em) { - .section-heading a { - max-width: 95%; - } -} -@media only screen and (min-width: 48em) { - .section-heading a { - margin-bottom: 7px; - margin-bottom: 0.4375rem; - max-width: 90%; - } + text-align: left; + padding-bottom: 20px; + border-bottom: 1px solid rgba(255, 255, 255, 0.3); } -@media only screen and (min-width: 64em) { - .section-heading a { - max-width: 75%; - } +.theme-dark .smart-search .search-wrapper .suggested-results__count, +.theme-dark .smart-search .search-wrapper .search-results__count, +.theme-dark .page-mygov-home .smart-search .search-wrapper .suggested-results__count, +.theme-dark .page-mygov-home .smart-search .search-wrapper .search-results__count, +.theme-dark .global-header .wrapper .smart-search .search-wrapper .suggested-results__count, +.theme-dark .global-header .wrapper .smart-search .search-wrapper .search-results__count { + color: #FFFFFF; } -.section-heading a:hover { - text-decoration: underline; +.smart-search .search-wrapper .suggested-results .bot-response, +.smart-search .search-wrapper .search-results .bot-response, +.page-mygov-home .smart-search .search-wrapper .suggested-results .bot-response, +.page-mygov-home .smart-search .search-wrapper .search-results .bot-response, +.global-header .wrapper .smart-search .search-wrapper .suggested-results .bot-response, +.global-header .wrapper .smart-search .search-wrapper .search-results .bot-response { + margin: 0 0 50px 0; } -.section-heading a:hover, .section-heading a:focus { - color: #254A7E; +.smart-search .search-wrapper .suggested-results .bot-response .followUp-questions li a, +.smart-search .search-wrapper .search-results .bot-response .followUp-questions li a, +.page-mygov-home .smart-search .search-wrapper .suggested-results .bot-response .followUp-questions li a, +.page-mygov-home .smart-search .search-wrapper .search-results .bot-response .followUp-questions li a, +.global-header .wrapper .smart-search .search-wrapper .suggested-results .bot-response .followUp-questions li a, +.global-header .wrapper .smart-search .search-wrapper .search-results .bot-response .followUp-questions li a { + color: #006CE0; + font-size: 20px; } -.section-heading a:hover:after, .section-heading a:focus:after { - transform: none; +.smart-search .search-wrapper .suggested-results .results-section .search-result-list, +.smart-search .search-wrapper .search-results .results-section .search-result-list, +.page-mygov-home .smart-search .search-wrapper .suggested-results .results-section .search-result-list, +.page-mygov-home .smart-search .search-wrapper .search-results .results-section .search-result-list, +.global-header .wrapper .smart-search .search-wrapper .suggested-results .results-section .search-result-list, +.global-header .wrapper .smart-search .search-wrapper .search-results .results-section .search-result-list { + list-style: none; + padding-left: 0; } -.section-heading a:focus { - outline: 2px solid #254A7E; - outline: 0.125rem solid #254A7E; - text-decoration: none; +.smart-search .search-wrapper .suggested-results .pagination, +.smart-search .search-wrapper .search-results .pagination, +.page-mygov-home .smart-search .search-wrapper .suggested-results .pagination, +.page-mygov-home .smart-search .search-wrapper .search-results .pagination, +.global-header .wrapper .smart-search .search-wrapper .suggested-results .pagination, +.global-header .wrapper .smart-search .search-wrapper .search-results .pagination { + border-top: 1px solid rgba(255, 255, 255, 0.3); + margin: 15px 0 0; + padding-top: 30px; } -.section-heading a:after { - width: 7px; - width: 0.4375rem; - height: 11px; - height: 0.6875rem; - margin-left: 9px; - margin-left: 0.5625rem; - content: ""; - background: no-repeat bottom center; - background-image: url("resources/assets/icons/chevron-right-dark-blue.svg"); - position: static; - align-self: center; +.smart-search .search-wrapper .suggested-results .pagination > li a:not(.disabled):focus, +.smart-search .search-wrapper .search-results .pagination > li a:not(.disabled):focus, +.page-mygov-home .smart-search .search-wrapper .suggested-results .pagination > li a:not(.disabled):focus, +.page-mygov-home .smart-search .search-wrapper .search-results .pagination > li a:not(.disabled):focus, +.global-header .wrapper .smart-search .search-wrapper .suggested-results .pagination > li a:not(.disabled):focus, +.global-header .wrapper .smart-search .search-wrapper .search-results .pagination > li a:not(.disabled):focus { + border-color: #FFFFFF; + box-shadow: 0 0 0 2px #FFFFFF; } -.section-heading .items-count { - font-size: 18px; - font-size: 1.125rem; - font-weight: 400; - line-height: 1.625; - align-self: flex-end; +.smart-search .search-wrapper .suggested-results .pagination > li.previous:not(.disabled) a::after, +.smart-search .search-wrapper .search-results .pagination > li.previous:not(.disabled) a::after, +.page-mygov-home .smart-search .search-wrapper .suggested-results .pagination > li.previous:not(.disabled) a::after, +.page-mygov-home .smart-search .search-wrapper .search-results .pagination > li.previous:not(.disabled) a::after, +.global-header .wrapper .smart-search .search-wrapper .suggested-results .pagination > li.previous:not(.disabled) a::after, +.global-header .wrapper .smart-search .search-wrapper .search-results .pagination > li.previous:not(.disabled) a::after { + background-image: url("styles/resources/assets/icons/arrow-left-white.svg"); } -.section-heading.is-underlined { - position: relative; - padding-bottom: 20px; - padding-bottom: 1.25rem; +.smart-search .search-wrapper .suggested-results .pagination > li.previous:not(.disabled) a:hover, +.smart-search .search-wrapper .search-results .pagination > li.previous:not(.disabled) a:hover, +.page-mygov-home .smart-search .search-wrapper .suggested-results .pagination > li.previous:not(.disabled) a:hover, +.page-mygov-home .smart-search .search-wrapper .search-results .pagination > li.previous:not(.disabled) a:hover, +.global-header .wrapper .smart-search .search-wrapper .suggested-results .pagination > li.previous:not(.disabled) a:hover, +.global-header .wrapper .smart-search .search-wrapper .search-results .pagination > li.previous:not(.disabled) a:hover { + border-color: #FFFFFF; + background-color: #FFFFFF; } -.section-heading.is-underlined::before, .section-heading.is-underlined::after { - content: ""; - position: absolute; - height: 5px; - bottom: 0; +.smart-search .search-wrapper .suggested-results .pagination > li.previous:not(.disabled) a:hover::after, +.smart-search .search-wrapper .search-results .pagination > li.previous:not(.disabled) a:hover::after, +.page-mygov-home .smart-search .search-wrapper .suggested-results .pagination > li.previous:not(.disabled) a:hover::after, +.page-mygov-home .smart-search .search-wrapper .search-results .pagination > li.previous:not(.disabled) a:hover::after, +.global-header .wrapper .smart-search .search-wrapper .suggested-results .pagination > li.previous:not(.disabled) a:hover::after, +.global-header .wrapper .smart-search .search-wrapper .search-results .pagination > li.previous:not(.disabled) a:hover::after { + background-image: url("styles/resources/assets/icons/arrow-left.svg"); } -.section-heading.is-underlined::before { - width: 50px; - left: 0; - background-color: #006CE0; +.smart-search .search-wrapper .suggested-results .pagination > li.next:not(.disabled) a::after, +.smart-search .search-wrapper .search-results .pagination > li.next:not(.disabled) a::after, +.page-mygov-home .smart-search .search-wrapper .suggested-results .pagination > li.next:not(.disabled) a::after, +.page-mygov-home .smart-search .search-wrapper .search-results .pagination > li.next:not(.disabled) a::after, +.global-header .wrapper .smart-search .search-wrapper .suggested-results .pagination > li.next:not(.disabled) a::after, +.global-header .wrapper .smart-search .search-wrapper .search-results .pagination > li.next:not(.disabled) a::after { + background-image: url("styles/resources/assets/icons/arrow-right-white.svg"); } -.section-heading.is-underlined::after { - width: calc(100% - 49px); - right: 0; - background-color: #183052; +.smart-search .search-wrapper .suggested-results .pagination > li.next:not(.disabled) a:hover, +.smart-search .search-wrapper .search-results .pagination > li.next:not(.disabled) a:hover, +.page-mygov-home .smart-search .search-wrapper .suggested-results .pagination > li.next:not(.disabled) a:hover, +.page-mygov-home .smart-search .search-wrapper .search-results .pagination > li.next:not(.disabled) a:hover, +.global-header .wrapper .smart-search .search-wrapper .suggested-results .pagination > li.next:not(.disabled) a:hover, +.global-header .wrapper .smart-search .search-wrapper .search-results .pagination > li.next:not(.disabled) a:hover { + border-color: #FFFFFF; + background-color: #FFFFFF; } -.section-heading.is-underlined + .section-description { - padding-top: 20px; - padding-top: 1.25rem; +.smart-search .search-wrapper .suggested-results .pagination > li.next:not(.disabled) a:hover::after, +.smart-search .search-wrapper .search-results .pagination > li.next:not(.disabled) a:hover::after, +.page-mygov-home .smart-search .search-wrapper .suggested-results .pagination > li.next:not(.disabled) a:hover::after, +.page-mygov-home .smart-search .search-wrapper .search-results .pagination > li.next:not(.disabled) a:hover::after, +.global-header .wrapper .smart-search .search-wrapper .suggested-results .pagination > li.next:not(.disabled) a:hover::after, +.global-header .wrapper .smart-search .search-wrapper .search-results .pagination > li.next:not(.disabled) a:hover::after { + background-image: url("styles/resources/assets/icons/arrow-right.svg"); } -.section-heading:focus, .section-heading:active { - outline: none; +.smart-search .search-wrapper .suggested-results .pagination > li:not(.previous):not(.next):not(.break-me) a, +.smart-search .search-wrapper .search-results .pagination > li:not(.previous):not(.next):not(.break-me) a, +.page-mygov-home .smart-search .search-wrapper .suggested-results .pagination > li:not(.previous):not(.next):not(.break-me) a, +.page-mygov-home .smart-search .search-wrapper .search-results .pagination > li:not(.previous):not(.next):not(.break-me) a, +.global-header .wrapper .smart-search .search-wrapper .suggested-results .pagination > li:not(.previous):not(.next):not(.break-me) a, +.global-header .wrapper .smart-search .search-wrapper .search-results .pagination > li:not(.previous):not(.next):not(.break-me) a { + background-color: #183052; + color: #FFFFFF; } -.page-ausgov-home .section-heading a::after, .page-mygov-home .section-heading a::after { - top: 12px; - top: 0.75rem; +.smart-search .search-wrapper .suggested-results .pagination > li:not(.previous):not(.next):not(.break-me) a:hover, +.smart-search .search-wrapper .search-results .pagination > li:not(.previous):not(.next):not(.break-me) a:hover, +.page-mygov-home .smart-search .search-wrapper .suggested-results .pagination > li:not(.previous):not(.next):not(.break-me) a:hover, +.page-mygov-home .smart-search .search-wrapper .search-results .pagination > li:not(.previous):not(.next):not(.break-me) a:hover, +.global-header .wrapper .smart-search .search-wrapper .suggested-results .pagination > li:not(.previous):not(.next):not(.break-me) a:hover, +.global-header .wrapper .smart-search .search-wrapper .search-results .pagination > li:not(.previous):not(.next):not(.break-me) a:hover { + background-color: #FFFFFF; + color: #525252; + border-color: transparent; } -@media (max-width: 47.9375em) { - .section-heading { - flex-direction: column; - } - .section-heading a { - margin-left: 0; - } +.smart-search .search-wrapper .suggested-results .pagination > li:not(.previous):not(.next):not(.break-me).active a, +.smart-search .search-wrapper .search-results .pagination > li:not(.previous):not(.next):not(.break-me).active a, +.page-mygov-home .smart-search .search-wrapper .suggested-results .pagination > li:not(.previous):not(.next):not(.break-me).active a, +.page-mygov-home .smart-search .search-wrapper .search-results .pagination > li:not(.previous):not(.next):not(.break-me).active a, +.global-header .wrapper .smart-search .search-wrapper .suggested-results .pagination > li:not(.previous):not(.next):not(.break-me).active a, +.global-header .wrapper .smart-search .search-wrapper .search-results .pagination > li:not(.previous):not(.next):not(.break-me).active a { + color: #006CE0; + border-color: #006CE0; + background-color: #FFFFFF; } - -@media only screen and (min-width: 64em) { - .section-heading.is-padded, -.section-description.is-padded { - margin-left: 40px; - margin-left: 2.5rem; - } +.smart-search .search-wrapper .suggested-results__next, +.smart-search .search-wrapper .search-results__next, +.page-mygov-home .smart-search .search-wrapper .suggested-results__next, +.page-mygov-home .smart-search .search-wrapper .search-results__next, +.global-header .wrapper .smart-search .search-wrapper .suggested-results__next, +.global-header .wrapper .smart-search .search-wrapper .search-results__next { + height: 28px; + background: transparent; + border: none; + margin-left: 20px; } -.section-heading.is-centered, -.section-description.is-centered { - margin-left: auto; - margin-right: auto; - text-align: center; +.smart-search .search-wrapper .suggested-results__next i, +.smart-search .search-wrapper .search-results__next i, +.page-mygov-home .smart-search .search-wrapper .suggested-results__next i, +.page-mygov-home .smart-search .search-wrapper .search-results__next i, +.global-header .wrapper .smart-search .search-wrapper .suggested-results__next i, +.global-header .wrapper .smart-search .search-wrapper .search-results__next i { + display: inline-block; + width: 28px; + height: 28px; + background: url("styles/resources/assets/icons/chevron-right.svg") no-repeat; + background-size: 28px; } -.section-heading.is-centered p, -.section-description.is-centered p { - text-align: center; +.smart-search .search-wrapper .suggested-results__current, +.smart-search .search-wrapper .search-results__current, +.page-mygov-home .smart-search .search-wrapper .suggested-results__current, +.page-mygov-home .smart-search .search-wrapper .search-results__current, +.global-header .wrapper .smart-search .search-wrapper .suggested-results__current, +.global-header .wrapper .smart-search .search-wrapper .search-results__current { + margin-left: 3px; + margin-right: 3px; + width: 28px; + height: 28px; + border-radius: 5px; + border: 1px solid #006CE0; + color: #006CE0; } -.authenticated-container .section-heading, -.authenticated-container .section-description { - margin-left: 0; +.smart-search .search-wrapper .suggested-results .results-section .search-result-list, +.smart-search .search-wrapper .search-results .results-section .search-result-list, +.page-mygov-home .smart-search .search-wrapper .suggested-results .results-section .search-result-list, +.page-mygov-home .smart-search .search-wrapper .search-results .results-section .search-result-list, +.global-header .wrapper .smart-search .search-wrapper .suggested-results .results-section .search-result-list, +.global-header .wrapper .smart-search .search-wrapper .search-results .results-section .search-result-list { + list-style: none; + padding-left: 0; } -.section-heading.is-centered { - padding-right: 0; +.storing-personal-details { + display: flex; + flex-direction: column; } - -.auth-section-heading { - margin: 60px 0 20px 0; - margin: 3.75rem 0 1.25rem 0; +.storing-personal-details a { + margin: 10px 10px 0 0; } - -.service-details { - overflow-wrap: break-word; +.storing-personal-details__content { + margin: 1.2em 0 1.2em 0; } -/** Site wide alert **/ -.sitewide-alert { - display: none; - background: #DC3548; - color: #FFFFFF; - padding: 20px 60px 20px 80px; - flex-wrap: wrap; - position: relative; - min-height: 60px; - transition-duration: 300ms; -} -.sitewide-alert.is-active { - display: flex; -} -.sitewide-alert i.info { - position: absolute; - top: 0; - left: 0; - min-width: 60px; - height: 100%; - background: url("styles/resources/assets/icons/icon-alert-circle.svg") no-repeat; - background-color: rgba(0, 0, 0, 0.2); - background-size: 20px; - background-position: center center; -} -.sitewide-alert button.close { - position: absolute; - top: 0; - right: 0; - min-width: 60px; - height: 100%; - border: 0; - background: url("styles/resources/assets/icons/icon-close-white.svg") no-repeat; - background-color: rgba(0, 0, 0, 0.2); - background-size: 16px; - background-position: center center; - text-indent: -9999px; +/* common styles for .cmp-text and .styled-list */ +.cmp-text, +.styled-list { + /* common styles for both inner and outer ul and ol */ + /* common styles for outer ul and ol */ + /* styles only for ul */ + /* styles only for ol */ + /* styles for ul and ol with white background */ } -.sitewide-alert p { - font-family: "Roboto", sans-serif; - color: #525252; - font-size: 16px; - line-height: 24px; - font-weight: normal; - color: #FFFFFF; +.cmp-text ul, +.cmp-text ol, +.styled-list ul, +.styled-list ol { + position: relative; margin: 0; - align-self: center; - margin-right: 20px; -} -.theme-dark .sitewide-alert p { - color: #FFFFFF; -} -@media (max-width: 63.9375em) { - .sitewide-alert p + p { - margin-top: 16px; - } + list-style: none; + overflow-wrap: break-word; } -.sitewide-alert p strong, -.sitewide-alert p b { +.cmp-text ul li, +.cmp-text ol li, +.styled-list ul li, +.styled-list ol li { font-family: "Roboto", sans-serif; + font-size: 18px; + font-size: 1.125rem; + margin: 20px 0; + margin: 1.25rem 0; + line-height: 1.6666666667; color: #525252; - font-size: 16px; - line-height: 24px; - font-weight: normal; - color: #101820; - font-weight: 700; - color: #FFFFFF; + margin: 0 0 12px 0; + position: relative; } -.theme-dark .sitewide-alert p strong, -.theme-dark .sitewide-alert p b { +.theme-dark .cmp-text ul li, +.theme-dark .cmp-text ol li, +.theme-dark .styled-list ul li, +.theme-dark .styled-list ol li { color: #FFFFFF; } -.theme-dark .sitewide-alert p strong, -.theme-dark .sitewide-alert p b { - color: #FFFFFF; +.cmp-text ul li:last-child, +.cmp-text ol li:last-child, +.styled-list ul li:last-child, +.styled-list ol li:last-child { + margin: 0; } -.sitewide-alert a { - color: #FFFFFF; - text-decoration: none; - align-self: center; - font-weight: 700; - position: relative; - padding: 5px 20px 5px 0; - display: inline-block; +.cmp-text ul li a, +.cmp-text ol li a, +.styled-list ul li a, +.styled-list ol li a { + color: #006CE0; } -.sitewide-alert a::before { - content: ""; - position: absolute; - top: 50%; - transform: translateY(-50%); - right: 0; - background: url("styles/resources/assets/icons/arrow-right-white.svg") no-repeat; - background-size: 14px; - width: 14px; - height: 14px; - transition: all 300ms; +.cmp-text ul li ul, +.cmp-text ul li ol, +.cmp-text ol li ul, +.cmp-text ol li ol, +.styled-list ul li ul, +.styled-list ul li ol, +.styled-list ol li ul, +.styled-list ol li ol { + padding: 15px 0 0 24px; } -.sitewide-alert a:hover, .sitewide-alert a:focus { - text-decoration: underline; +.cmp-text ul li ul li::before, +.cmp-text ul li ol li::before, +.cmp-text ol li ul li::before, +.cmp-text ol li ol li::before, +.styled-list ul li ul li::before, +.styled-list ul li ol li::before, +.styled-list ol li ul li::before, +.styled-list ol li ol li::before { + left: -24px; } -.sitewide-alert a:hover::before, .sitewide-alert a:focus::before { - right: -5px; +.cmp-text > ul, +.cmp-text > ol, +.styled-list > ul, +.styled-list > ol { + margin: 20px 0 40px; } -@media (max-width: 47.9375em) { - .sitewide-alert { - padding-top: 20px; - padding-bottom: 20px; - padding-right: 80px; - } - .sitewide-alert p { - line-height: 1.5; - } +.cmp-text ul, +.styled-list ul { + position: relative; } -.sitewide-alert.is-persistent { - padding-right: 0; +.cmp-text ul li, +.styled-list ul li { + /* styling of the blue bullet on the left of outer lis */ } -.sitewide-alert.is-persistent .close { - display: none; +.cmp-text ul li::before, +.styled-list ul li::before { + content: ""; + position: absolute; + top: 12px; + left: -26px; + width: 4px; + height: 4px; + background-color: #006CE0; + border-radius: 50%; } -.sitewide-alert.is-ongoing { - background: #F69900; +.cmp-text ul li ul, +.styled-list ul li ul { + /* color of the bullet on the left of the inner lis */ } -.sitewide-alert.is-resolved { - background: #1A9F50; +.cmp-text ul li ul li::before, +.styled-list ul li ul li::before { + background-color: #525252; } -.sitewide-alert.is-offscreen { - height: 0; - min-height: 0; - padding-top: 0; - padding-bottom: 0; - transform: translate(0, -170px); +.cmp-text ol, +.styled-list ol { + counter-reset: step-counter; } - -.react-loading-skeleton { - background-color: #EEE; - background-image: linear-gradient(90deg, #EEE, #F5F5F5, #EEE); - background-size: 200px 100%; - background-repeat: no-repeat; - border-radius: 4px; - display: inline-block; - line-height: 1; - width: 100%; - animation: skeletonKeyframes 1s ease-in-out infinite; +.cmp-text ol li, +.styled-list ol li { + counter-increment: step-counter; } - -.loading-skeleton { - border-radius: 2px; - border-radius: 0.125rem; - background-color: #E4EAEC; - background-image: linear-gradient(90deg, #E4EAEC, #F5F5F5, #E4EAEC); - background-size: 200px 100%; - background-size: 12.5rem 100%; - background-repeat: no-repeat; - display: inline-block; - line-height: 1; - width: 100%; - animation: skeletonKeyframes 1s ease-in-out infinite; +.cmp-text ol li::before, +.styled-list ol li::before { + content: counter(step-counter); + color: #006CE0; + position: absolute; + left: -30px; } - -@keyframes skeletonKeyframes { - 0% { - background-position: -200px 0; - } - 100% { - background-position: calc(200px + 100%) 0; - } +.cmp-text ol li ol li::before, +.styled-list ol li ol li::before { + color: #525252; } -/* to overide the border-top stying of profile-panel class */ -.profile__panel.skeleton:before, .profile__panel.skeleton:after { - content: none; +.cmp-text.is-bg-white, +.styled-list.is-bg-white { + /* mygov-auth-home and content requires the styled list to have transparent bg */ } - -.smart-search, -.page-mygov-home .smart-search, -.global-header .wrapper .smart-search { - padding: 0 0 40px; +.cmp-text.is-bg-white ul, +.cmp-text.is-bg-white ol, +.styled-list.is-bg-white ul, +.styled-list.is-bg-white ol { + background: #FFFFFF; } -@media only screen and (max-height: 56em) { - .smart-search, -.page-mygov-home .smart-search, -.global-header .wrapper .smart-search { - padding: 0 0 124px; - } +.cmp-text.is-bg-white > ul, +.styled-list.is-bg-white > ul { + padding: 0 30px 0 27px; } -@media only screen and (min-width: 77.75em) { - .smart-search, -.page-mygov-home .smart-search, -.global-header .wrapper .smart-search { - text-align: center; - padding: 0 0 100px; - } +.cmp-text.is-bg-white > ol, +.styled-list.is-bg-white > ol { + padding: 0 30px 0 57px; } -.smart-search .l-padding, -.page-mygov-home .smart-search .l-padding, -.global-header .wrapper .smart-search .l-padding { - margin-left: 0 !important; - padding-left: 0 !important; +.cmp-text.is-bg-white > ol > li::before, +.styled-list.is-bg-white > ol > li::before { + width: 26px; + height: 26px; + background: #006CE0; + border-radius: 50%; + color: #FFFFFF; + display: flex; + justify-content: center; + align-items: center; + font-size: 14px; + font-weight: bold; + top: 2px; + left: -57px; } -.smart-search .search-header, -.page-mygov-home .smart-search .search-header, -.global-header .wrapper .smart-search .search-header { - margin: 0 0 15px; - text-align: left; - font-size: 50px; - line-height: 56px; +.page-mygov-auth-home .cmp-text.is-bg-white ul, +.page-mygov-auth-home .cmp-text.is-bg-white ol, .page-mygov-auth-content .cmp-text.is-bg-white ul, +.page-mygov-auth-content .cmp-text.is-bg-white ol, +.page-mygov-auth-home .styled-list.is-bg-white ul, +.page-mygov-auth-home .styled-list.is-bg-white ol, +.page-mygov-auth-content .styled-list.is-bg-white ul, +.page-mygov-auth-content .styled-list.is-bg-white ol { + background: transparent; +} + +/** styles for styled list only **/ +.styled-list { + color: #333333; + /* common styles for outer ul and ol */ + /* only styled lists without white background should have a top border */ +} +.styled-list > ul, +.styled-list > ol { + padding: 40px 20px 40px 57px; } @media only screen and (min-width: 64em) { - .smart-search .search-header, -.page-mygov-home .smart-search .search-header, -.global-header .wrapper .smart-search .search-header { - margin-bottom: 20px; - font-size: 50px; + .styled-list > ul, +.styled-list > ol { + padding-right: 116px; } } -@media only screen and (min-width: 77.75em) { - .smart-search .search-header, -.page-mygov-home .smart-search .search-header, -.global-header .wrapper .smart-search .search-header { - display: block; - font-size: 72px; - line-height: 80px; - text-align: center; +.styled-list .small { + display: block; + margin-top: 40px; +} +@media only screen and (min-width: 48em) { + .styled-list .small + h2 { + margin-top: 20px; } } -.smart-search .search-result__title, -.page-mygov-home .smart-search .search-result__title, -.global-header .wrapper .smart-search .search-result__title { - color: #254A7E; - font-size: 28px; - font-weight: 300; - line-height: 1.4; - margin: 0; - text-decoration: underline; - text-underline-position: under; - text-decoration-thickness: 1px; - width: 100%; - transition: color 150ms; +.styled-list h2 { + margin: 40px 0 20px; } -@media only screen and (min-width: 1024px) { - .smart-search .search-result__title::after, -.page-mygov-home .smart-search .search-result__title::after, -.global-header .wrapper .smart-search .search-result__title::after { - content: ""; - position: absolute; - top: 0; - right: 0; - width: 24px; - height: 24px; - background-size: contain; - background-position: center; - background-repeat: no-repeat; - transition-property: transform, margin, background; - transition-duration: 300ms; - transition-timing-function: ease; - top: unset; - right: 32px; - background-image: url("styles/resources/assets/icons/chevron-right-dark-blue.svg"); - transition: transform 150ms ease; - } -} -.smart-search .search-result__title b, -.smart-search .search-result__title strong, -.page-mygov-home .smart-search .search-result__title b, -.page-mygov-home .smart-search .search-result__title strong, -.global-header .wrapper .smart-search .search-result__title b, -.global-header .wrapper .smart-search .search-result__title strong { - color: inherit; - font-size: inherit; - line-height: inherit; - font-weight: 500; +.styled-list h3 { + margin-top: 40px; + margin-bottom: 10px; } -.smart-search .search-result__description, -.page-mygov-home .smart-search .search-result__description, -.global-header .wrapper .smart-search .search-result__description { - color: #000000; - margin: 0; - padding-top: 16px; - padding-right: 24px; - text-decoration: none; - font-weight: 200; - line-height: 28px; +@media only screen and (min-width: 48em) { + .styled-list h3 { + margin-top: 60px; + } } -.smart-search .search-result__description b, -.smart-search .search-result__description strong, -.page-mygov-home .smart-search .search-result__description b, -.page-mygov-home .smart-search .search-result__description strong, -.global-header .wrapper .smart-search .search-result__description b, -.global-header .wrapper .smart-search .search-result__description strong { +.styled-list > p { font-family: "Roboto", sans-serif; - color: #525252; - font-size: 16px; - line-height: 24px; - font-weight: normal; - color: #101820; - font-weight: 700; font-size: 18px; - line-height: 28px; + font-size: 1.125rem; + margin: 20px 0; + margin: 1.25rem 0; + line-height: 1.6666666667; + color: #525252; + margin-top: 20px; + margin-bottom: 20px; } -.theme-dark .smart-search .search-result__description b, -.theme-dark .smart-search .search-result__description strong, -.theme-dark .page-mygov-home .smart-search .search-result__description b, -.theme-dark .page-mygov-home .smart-search .search-result__description strong, -.theme-dark .global-header .wrapper .smart-search .search-result__description b, -.theme-dark .global-header .wrapper .smart-search .search-result__description strong { +.theme-dark .styled-list > p { color: #FFFFFF; } -.theme-dark .smart-search .search-result__description b, -.theme-dark .smart-search .search-result__description strong, -.theme-dark .page-mygov-home .smart-search .search-result__description b, -.theme-dark .page-mygov-home .smart-search .search-result__description strong, -.theme-dark .global-header .wrapper .smart-search .search-result__description b, -.theme-dark .global-header .wrapper .smart-search .search-result__description strong { - color: #FFFFFF; +.styled-list .styled-divider { + display: flex; } -.smart-search .search-result__searchterm, -.page-mygov-home .smart-search .search-result__searchterm, -.global-header .wrapper .smart-search .search-result__searchterm { - font-family: "Roboto", sans-serif; - color: #525252; - font-size: 18px; - line-height: 30px; - margin: 20px 0; - font-weight: 700; - display: block; - text-decoration: underline; - margin: 0; +.styled-list .styled-divider .left { + height: 5px; + width: 10%; + background: #006CE0; +} +.styled-list .styled-divider .right { + height: 5px; + width: 90%; + background: #4B5980; +} +.styled-list:not(.is-bg-white) > ul, +.styled-list:not(.is-bg-white) > ol { + background: #F5F5F5; + position: relative; + /* before and after rules to create border at the top of the outer ul and ol - true denotes that it is a topBorder */ position: relative; - transition: color 150ms; - color: #254A7E; - font-weight: 200; } -.theme-dark .smart-search .search-result__searchterm, -.theme-dark .page-mygov-home .smart-search .search-result__searchterm, -.theme-dark .global-header .wrapper .smart-search .search-result__searchterm { - color: #FFFFFF; +.styled-list:not(.is-bg-white) > ul::before, .styled-list:not(.is-bg-white) > ul::after, +.styled-list:not(.is-bg-white) > ol::before, +.styled-list:not(.is-bg-white) > ol::after { + content: ""; + position: absolute; + height: 5px; + top: 0; } -.smart-search .search-result__searchterm:hover, .smart-search .search-result__searchterm:focus, -.page-mygov-home .smart-search .search-result__searchterm:hover, -.page-mygov-home .smart-search .search-result__searchterm:focus, -.global-header .wrapper .smart-search .search-result__searchterm:hover, -.global-header .wrapper .smart-search .search-result__searchterm:focus { - color: #FFFFFF; - background-color: #254A7E; +.styled-list:not(.is-bg-white) > ul::before, +.styled-list:not(.is-bg-white) > ol::before { + width: 50px; + left: 0; + background-color: #006CE0; } -.smart-search .search-result__searchterm:focus, -.page-mygov-home .smart-search .search-result__searchterm:focus, -.global-header .wrapper .smart-search .search-result__searchterm:focus { - border: 0; - outline: 2px solid #254A7E; +.styled-list:not(.is-bg-white) > ul::after, +.styled-list:not(.is-bg-white) > ol::after { + width: calc(100% - 49px); + right: 0; + background-color: #183052; } -.smart-search .search-suggestion__autocomplete, -.page-mygov-home .smart-search .search-suggestion__autocomplete, -.global-header .wrapper .smart-search .search-suggestion__autocomplete { + +/* styles for .cmp-text only */ +.cmp-text > ul, +.cmp-text > ol { + padding: 0 0 0 30px; +} + +.switch { + position: relative; display: inline-block; - flex-direction: column; - padding: 5px 0; - margin-bottom: 10px; + width: 2.125rem; + height: 1.25rem; + /* Rounded sliders */ } -.smart-search .search-suggestion__suggestion, -.page-mygov-home .smart-search .search-suggestion__suggestion, -.global-header .wrapper .smart-search .search-suggestion__suggestion { - display: flex; - flex-direction: column; - padding: 5px 0; - padding: 2rem 1.5rem; +.switch input { + opacity: 0; + width: 0; + height: 0; } -.smart-search .search-suggestion__suggestion:hover .search-result__title, -.page-mygov-home .smart-search .search-suggestion__suggestion:hover .search-result__title, -.global-header .wrapper .smart-search .search-suggestion__suggestion:hover .search-result__title { - color: #FFFFFF; - background: #254A7E; - text-decoration: none; - width: fit-content; +.switch .slider { + position: absolute; + cursor: pointer; + top: 0; + left: 0; + right: 0; + bottom: 0; + background-color: #183052; + -webkit-transition: 0.4s; + transition: 0.4s; } -.smart-search .search-suggestion__suggestion:hover .search-result__title::after, -.page-mygov-home .smart-search .search-suggestion__suggestion:hover .search-result__title::after, -.global-header .wrapper .smart-search .search-suggestion__suggestion:hover .search-result__title::after { - transform: translateX(5px); +.switch .slider:before { + position: absolute; + content: ""; + height: 1.0625rem; + width: 1.0625rem; + left: 0.125rem; + bottom: 0.125rem; + background-color: #FFFFFF; + -webkit-transition: 0.4s; + transition: 0.4s; } -.smart-search .search-suggestion__suggestion-link, -.page-mygov-home .smart-search .search-suggestion__suggestion-link, -.global-header .wrapper .smart-search .search-suggestion__suggestion-link { - display: block; - padding: 0; - text-decoration: none; +.switch input:checked + .slider { + background-color: #254A7E; } -.smart-search .search-suggestion__suggestion-link:focus, -.page-mygov-home .smart-search .search-suggestion__suggestion-link:focus, -.global-header .wrapper .smart-search .search-suggestion__suggestion-link:focus { - outline: 2px solid #183052; +.switch input:focus + .slider { + box-shadow: 0 0 0.0625rem #CCCCCC; } -.smart-search .search-suggestion__suggestion-link:focus .search-result__title::after, -.page-mygov-home .smart-search .search-suggestion__suggestion-link:focus .search-result__title::after, -.global-header .wrapper .smart-search .search-suggestion__suggestion-link:focus .search-result__title::after { - transform: translateX(5px); +.switch input:checked + .slider:before { + -webkit-transform: translateX(0.8125rem); + -ms-transform: translateX(0.8125rem); + transform: translateX(0.8125rem); } -.smart-search .search-suggestion__autocomplete:focus, .smart-search .search-suggestion__suggestion-link:focus, -.page-mygov-home .smart-search .search-suggestion__autocomplete:focus, -.page-mygov-home .smart-search .search-suggestion__suggestion-link:focus, -.global-header .wrapper .smart-search .search-suggestion__autocomplete:focus, -.global-header .wrapper .smart-search .search-suggestion__suggestion-link:focus { - border: 0; - outline: 3px solid #2B78E3; +.switch .slider.round { + border-radius: 2.125rem; } -.smart-search .search-wrapper, -.page-mygov-home .smart-search .search-wrapper, -.global-header .wrapper .smart-search .search-wrapper { - width: 100%; - margin: auto 0; +.switch .slider.round:before { + border-radius: 50%; } -@media only screen and (min-width: 77.75em) { - .smart-search .search-wrapper, -.page-mygov-home .smart-search .search-wrapper, -.global-header .wrapper .smart-search .search-wrapper { - max-width: 900px; - } + +.system-error { + display: flex; + flex-direction: column; } -.smart-search .search-wrapper .search-input-wrapper, -.page-mygov-home .smart-search .search-wrapper .search-input-wrapper, -.global-header .wrapper .smart-search .search-wrapper .search-input-wrapper { - position: relative; - margin-top: 0; - margin-bottom: 0; +.system-error a { + margin: 10px 10px 0 0; } -.smart-search .search-wrapper .search-input-wrapper .reset-button, -.page-mygov-home .smart-search .search-wrapper .search-input-wrapper .reset-button, -.global-header .wrapper .smart-search .search-wrapper .search-input-wrapper .reset-button { - position: absolute; - margin: auto; - right: 18px; - top: 0; - bottom: 0; - border: none; - text-decoration: none; - width: 100%; - height: auto; - width: 24px; - width: 1.5rem; - height: 24px; - height: 1.5rem; - min-width: 24px; - min-width: 1.5rem; +.system-error__content { + margin: 1.2em 0 1.2em 0; +} + +.cmp-text .table-responsive { display: block; - height: 24px; - width: 24px; - background-size: contain; - background-position: center; - background-repeat: no-repeat; - background-image: url("styles/resources/assets/icons/clear-dark-blue.svg"); + width: 100%; + overflow-x: auto; + -webkit-overflow-scrolling: touch; + position: relative; + overflow-y: hidden; + margin: 40px 0; } -@media only screen and (min-width: 64em) { - .smart-search .search-wrapper .search-input-wrapper .reset-button, -.page-mygov-home .smart-search .search-wrapper .search-input-wrapper .reset-button, -.global-header .wrapper .smart-search .search-wrapper .search-input-wrapper .reset-button { - right: 22px; +@media (max-width: 77.6875em) { + .cmp-text .table-responsive .shadow-before, .cmp-text .table-responsive .shadow-after { + position: absolute; + background-image: linear-gradient(to left, rgba(255, 255, 255, 0.7), #000000 132%); + opacity: 0.21; + width: 33px; + z-index: 401; + display: none; } } -@media only screen and (min-width: 77.75em) { - .smart-search .search-wrapper .search-input-wrapper .reset-button, -.page-mygov-home .smart-search .search-wrapper .search-input-wrapper .reset-button, -.global-header .wrapper .smart-search .search-wrapper .search-input-wrapper .reset-button { - width: 30px; - width: 1.875rem; - height: 30px; - height: 1.875rem; - min-width: 30px; - min-width: 1.875rem; - display: block; - height: 30px; - width: 30px; - background-size: contain; - background-position: center; - background-repeat: no-repeat; - right: 24px; +@media (max-width: 77.6875em) { + .cmp-text .table-responsive .shadow-after { + background-image: linear-gradient(to right, rgba(255, 255, 255, 0.7), #000000 132%); + right: 0; } } -.smart-search .search-wrapper .search-input-wrapper .reset-button:focus, -.page-mygov-home .smart-search .search-wrapper .search-input-wrapper .reset-button:focus, -.global-header .wrapper .smart-search .search-wrapper .search-input-wrapper .reset-button:focus { - outline: 3px solid #000000; +.cmp-text .table-responsive::-webkit-scrollbar { + height: 6px; + background: #F5F5F5; } -.smart-search .search-wrapper .search-input-wrapper .reset-button span:not(.sr-only), -.page-mygov-home .smart-search .search-wrapper .search-input-wrapper .reset-button span:not(.sr-only), -.global-header .wrapper .smart-search .search-wrapper .search-input-wrapper .reset-button span:not(.sr-only) { +.cmp-text .table-responsive::-webkit-scrollbar-thumb { + background: #A0A0A3; + height: 6px; + border-radius: 3px; +} +.cmp-text table { + border-bottom: 1px solid #DDDDDD; position: relative; - padding-right: 29px; - margin-right: 15px; - background: transparent; - height: 100%; } -@media (max-width: 63.9375em) { - .smart-search .search-wrapper .search-input-wrapper .reset-button span:not(.sr-only), -.page-mygov-home .smart-search .search-wrapper .search-input-wrapper .reset-button span:not(.sr-only), -.global-header .wrapper .smart-search .search-wrapper .search-input-wrapper .reset-button span:not(.sr-only) { - font-size: 14px; +@media only screen and (max-width: 39.9375em) { + .cmp-text table { + border-bottom: 0; } } -@media only screen and (min-width: 77.75em) { - .smart-search .search-wrapper .search-input-wrapper .reset-button span:not(.sr-only), -.page-mygov-home .smart-search .search-wrapper .search-input-wrapper .reset-button span:not(.sr-only), -.global-header .wrapper .smart-search .search-wrapper .search-input-wrapper .reset-button span:not(.sr-only) { - margin-right: 24px; - padding-right: 45px; - } +.cmp-text table .wrap { + word-wrap: break-word; } -.smart-search .search-wrapper .search-input-wrapper .loading-spinner, -.page-mygov-home .smart-search .search-wrapper .search-input-wrapper .loading-spinner, -.global-header .wrapper .smart-search .search-wrapper .search-input-wrapper .loading-spinner { - width: 24px; - width: 1.5rem; - height: 24px; - height: 1.5rem; - min-width: 24px; - min-width: 1.5rem; - display: block; - height: 24px; - width: 24px; - background-size: contain; - background-position: center; - background-repeat: no-repeat; - background-image: url("styles/resources/assets/icons/spinner-dark-blue.svg"); - margin: 13px 28px 0; +.cmp-text table caption { + font-family: "Montserrat", sans-serif; + font-weight: 700; + font-size: 20px; + font-size: 1.25rem; + line-height: 1.2; + color: #101820; + text-align: left; + padding-bottom: 20px; + /* mixin for table border - false denotes it is not a topBorder */ + position: relative; + caption-side: top; } @media only screen and (min-width: 64em) { - .smart-search .search-wrapper .search-input-wrapper .loading-spinner, -.page-mygov-home .smart-search .search-wrapper .search-input-wrapper .loading-spinner, -.global-header .wrapper .smart-search .search-wrapper .search-input-wrapper .loading-spinner { - width: 24px; - width: 1.5rem; - height: 24px; - height: 1.5rem; - min-width: 24px; - min-width: 1.5rem; - display: block; - height: 24px; - width: 24px; - background-size: contain; - background-position: center; - background-repeat: no-repeat; - margin: 12px 24px; + .cmp-text table caption { + line-height: 1.4; } } -@media only screen and (min-width: 77.75em) { - .smart-search .search-wrapper .search-input-wrapper .loading-spinner, -.page-mygov-home .smart-search .search-wrapper .search-input-wrapper .loading-spinner, -.global-header .wrapper .smart-search .search-wrapper .search-input-wrapper .loading-spinner { - width: 30px; - width: 1.875rem; - height: 30px; - height: 1.875rem; - min-width: 30px; - min-width: 1.875rem; - display: block; - height: 30px; - width: 30px; - background-size: contain; - background-position: center; - background-repeat: no-repeat; - margin: auto; - margin-right: 24px; - } +.page-ausgov-home .cmp-text table caption, .page-mygov-home .cmp-text table caption { + font-size: 24px; + font-size: 1.5rem; + line-height: 1.25; } -.smart-search .search-wrapper .search-input-wrapper .search-icon, -.page-mygov-home .smart-search .search-wrapper .search-input-wrapper .search-icon, -.global-header .wrapper .smart-search .search-wrapper .search-input-wrapper .search-icon { - width: 24px; - width: 1.5rem; - height: 24px; - height: 1.5rem; - min-width: 24px; - min-width: 1.5rem; - display: block; - height: 24px; - width: 24px; - background-size: contain; - background-position: center; - background-repeat: no-repeat; +.cmp-text table caption::before, .cmp-text table caption::after { + content: ""; position: absolute; - margin: auto; - margin-right: 18px; - right: 0; - left: 0; - top: 0; + height: 5px; bottom: 0; - border: none; - background-color: transparent; - background-image: url("styles/resources/assets/icons/search-black.svg"); -} -@media only screen and (min-width: 64em) { - .smart-search .search-wrapper .search-input-wrapper .search-icon, -.page-mygov-home .smart-search .search-wrapper .search-input-wrapper .search-icon, -.global-header .wrapper .smart-search .search-wrapper .search-input-wrapper .search-icon { - margin-right: 22px; - } } -@media only screen and (min-width: 77.75em) { - .smart-search .search-wrapper .search-input-wrapper .search-icon, -.page-mygov-home .smart-search .search-wrapper .search-input-wrapper .search-icon, -.global-header .wrapper .smart-search .search-wrapper .search-input-wrapper .search-icon { - margin-right: 24px; - } +.cmp-text table caption::before { + width: 50px; + left: 0; + background-color: #006CE0; } -.smart-search .search-wrapper .search-input-wrapper .search-input-action, -.page-mygov-home .smart-search .search-wrapper .search-input-wrapper .search-input-action, -.global-header .wrapper .smart-search .search-wrapper .search-input-wrapper .search-input-action { - z-index: 500; - position: absolute; +.cmp-text table caption::after { + width: calc(100% - 49px); right: 0; - top: 0; - height: 61px; - width: 61px; -} -@media only screen and (min-width: 64em) { - .smart-search .search-wrapper .search-input-wrapper .search-input-action, -.page-mygov-home .smart-search .search-wrapper .search-input-wrapper .search-input-action, -.global-header .wrapper .smart-search .search-wrapper .search-input-wrapper .search-input-action { - height: 61px; - width: 100px; - display: flex; - } + background-color: #183052; } -.smart-search .search-wrapper .search-input-wrapper .smart-search-text-input, -.page-mygov-home .smart-search .search-wrapper .search-input-wrapper .smart-search-text-input, -.global-header .wrapper .smart-search .search-wrapper .search-input-wrapper .smart-search-text-input { - border: 1px solid #000000; - border-radius: 2px; - margin: 0; - background-color: #FFFFFF; - top: 0; - color: #000000; - height: 61px; - padding-left: 15px; - padding-right: 95px; - font-size: 18px; - transition: border 150ms, box-shadow none; +.cmp-text table tr:first-child th { + font-weight: 700; } -.smart-search .search-wrapper .search-input-wrapper .smart-search-text-input:hover, .smart-search .search-wrapper .search-input-wrapper .smart-search-text-input:focus, -.page-mygov-home .smart-search .search-wrapper .search-input-wrapper .smart-search-text-input:hover, -.page-mygov-home .smart-search .search-wrapper .search-input-wrapper .smart-search-text-input:focus, -.global-header .wrapper .smart-search .search-wrapper .search-input-wrapper .smart-search-text-input:hover, -.global-header .wrapper .smart-search .search-wrapper .search-input-wrapper .smart-search-text-input:focus { - border-width: 2px; +.cmp-text table tr:nth-child(even) { + background-color: #F5F5F5; } -.smart-search .search-wrapper .search-input-wrapper .smart-search-text-input:focus, .smart-search .search-wrapper .search-input-wrapper .smart-search-text-input:active, -.page-mygov-home .smart-search .search-wrapper .search-input-wrapper .smart-search-text-input:focus, -.page-mygov-home .smart-search .search-wrapper .search-input-wrapper .smart-search-text-input:active, -.global-header .wrapper .smart-search .search-wrapper .search-input-wrapper .smart-search-text-input:focus, -.global-header .wrapper .smart-search .search-wrapper .search-input-wrapper .smart-search-text-input:active { - outline: 2px solid #183052; - outline-offset: 2px; - -webkit-appearance: none; -} -.smart-search .search-wrapper .search-input-wrapper .smart-search-text-input::-ms-clear, .smart-search .search-wrapper .search-input-wrapper .smart-search-text-input::-ms-reveal, -.page-mygov-home .smart-search .search-wrapper .search-input-wrapper .smart-search-text-input::-ms-clear, -.page-mygov-home .smart-search .search-wrapper .search-input-wrapper .smart-search-text-input::-ms-reveal, -.global-header .wrapper .smart-search .search-wrapper .search-input-wrapper .smart-search-text-input::-ms-clear, -.global-header .wrapper .smart-search .search-wrapper .search-input-wrapper .smart-search-text-input::-ms-reveal { - display: none; - width: 0; - height: 0; -} -.smart-search .search-wrapper .react-autosuggest__suggestions-container, -.page-mygov-home .smart-search .search-wrapper .react-autosuggest__suggestions-container, -.global-header .wrapper .smart-search .search-wrapper .react-autosuggest__suggestions-container { - background: transparent; -} -.smart-search .search-wrapper .react-autosuggest__suggestions-list, -.page-mygov-home .smart-search .search-wrapper .react-autosuggest__suggestions-list, -.global-header .wrapper .smart-search .search-wrapper .react-autosuggest__suggestions-list { - margin: 20px 0; - border-left: 4px solid #254A7E; - padding-left: 20px; -} -.smart-search .search-wrapper .react-autosuggest__suggestion, -.page-mygov-home .smart-search .search-wrapper .react-autosuggest__suggestion, -.global-header .wrapper .smart-search .search-wrapper .react-autosuggest__suggestion { - list-style: none; - text-align: left; - cursor: pointer; +.cmp-text table tr td, +.cmp-text table tr th { border: 0; + vertical-align: top; + text-align: left; + font-family: "Roboto", sans-serif; + font-size: 16px; + font-size: 1rem; + line-height: 1.5; + font-weight: normal; + color: #525252; + padding: 14px 20px 16px; + line-height: 1.25; } -.smart-search .search-wrapper .react-autosuggest__suggestion--highlighted:not(:hover) .search-result__searchterm, -.smart-search .search-wrapper .react-autosuggest__suggestion--highlighted:not(:hover) .search-suggestion__suggestion-link, -.page-mygov-home .smart-search .search-wrapper .react-autosuggest__suggestion--highlighted:not(:hover) .search-result__searchterm, -.page-mygov-home .smart-search .search-wrapper .react-autosuggest__suggestion--highlighted:not(:hover) .search-suggestion__suggestion-link, -.global-header .wrapper .smart-search .search-wrapper .react-autosuggest__suggestion--highlighted:not(:hover) .search-result__searchterm, -.global-header .wrapper .smart-search .search-wrapper .react-autosuggest__suggestion--highlighted:not(:hover) .search-suggestion__suggestion-link { - border: 0; - outline: 3px solid #2B78E3; +.theme-dark .cmp-text table tr td, +.theme-dark .cmp-text table tr th { + color: #FFFFFF; } -.smart-search .search-wrapper .react-autosuggest__suggestion--highlighted:not(:hover) .search-result__title::after, -.page-mygov-home .smart-search .search-wrapper .react-autosuggest__suggestion--highlighted:not(:hover) .search-result__title::after, -.global-header .wrapper .smart-search .search-wrapper .react-autosuggest__suggestion--highlighted:not(:hover) .search-result__title::after { - transform: translateX(5px); +.cmp-text table tr th { + border-bottom: 1px solid #DDDDDD; + color: #101820; } -.smart-search .search-wrapper .react-autosuggest__section-container, -.page-mygov-home .smart-search .search-wrapper .react-autosuggest__section-container, -.global-header .wrapper .smart-search .search-wrapper .react-autosuggest__section-container { - padding-top: 15px; +.cmp-text table tr th:only-of-type { + border-right: 1px solid #DDDDDD; + border-bottom: none; } -.smart-search .search-wrapper .react-autosuggest__section-container h3, -.page-mygov-home .smart-search .search-wrapper .react-autosuggest__section-container h3, -.global-header .wrapper .smart-search .search-wrapper .react-autosuggest__section-container h3 { - text-align: left; +.cmp-text table tr th.border-right { + border-right: 1px solid #DDDDDD; + font-weight: 700; } -.smart-search .search-wrapper .react-autosuggest__section-container:not(:first-child), -.page-mygov-home .smart-search .search-wrapper .react-autosuggest__section-container:not(:first-child), -.global-header .wrapper .smart-search .search-wrapper .react-autosuggest__section-container:not(:first-child) { - border-top: 1px solid rgba(255, 255, 255, 0.3); +.cmp-text table .total-cell { + font-family: "Roboto", sans-serif; + font-size: 18px; + font-size: 1.125rem; + margin: 20px 0; + margin: 1.25rem 0; + line-height: 1.6666666667; + color: #525252; + font-weight: 700; + margin: 0; + color: #101820; + display: block; + text-align: right; } -.smart-search .search-wrapper .suggested-results, -.page-mygov-home .smart-search .search-wrapper .suggested-results, -.global-header .wrapper .smart-search .search-wrapper .suggested-results { - border-top: 1px solid rgba(255, 255, 255, 0.3); +.theme-dark .cmp-text table .total-cell { + color: #FFFFFF; } -.smart-search .search-wrapper .suggested-results, -.smart-search .search-wrapper .search-results, -.page-mygov-home .smart-search .search-wrapper .suggested-results, -.page-mygov-home .smart-search .search-wrapper .search-results, -.global-header .wrapper .smart-search .search-wrapper .suggested-results, -.global-header .wrapper .smart-search .search-wrapper .search-results { - text-align: left; - width: 99%; + +.tags { + border-top: 1px solid #DDDDDD; + margin: 40px 0 20px; } -.smart-search .search-wrapper .suggested-results__item, -.smart-search .search-wrapper .search-results__item, -.page-mygov-home .smart-search .search-wrapper .suggested-results__item, -.page-mygov-home .smart-search .search-wrapper .search-results__item, -.global-header .wrapper .smart-search .search-wrapper .suggested-results__item, -.global-header .wrapper .smart-search .search-wrapper .search-results__item { - border-bottom: solid 1px #DDDDDD; +@media only screen and (min-width: 64em) { + .tags { + margin: 60px 0 40px; + } } -.smart-search .search-wrapper .suggested-results__item:first-child, -.smart-search .search-wrapper .search-results__item:first-child, -.page-mygov-home .smart-search .search-wrapper .suggested-results__item:first-child, -.page-mygov-home .smart-search .search-wrapper .search-results__item:first-child, -.global-header .wrapper .smart-search .search-wrapper .suggested-results__item:first-child, -.global-header .wrapper .smart-search .search-wrapper .search-results__item:first-child { - border-top: solid 1px #DDDDDD; +.tags h2 { + margin-top: 40px; } -.smart-search .search-wrapper .suggested-results__item a:hover, .smart-search .search-wrapper .suggested-results__item a:focus, .smart-search .search-wrapper .suggested-results__item a:active, -.smart-search .search-wrapper .search-results__item a:hover, -.smart-search .search-wrapper .search-results__item a:focus, -.smart-search .search-wrapper .search-results__item a:active, -.page-mygov-home .smart-search .search-wrapper .suggested-results__item a:hover, -.page-mygov-home .smart-search .search-wrapper .suggested-results__item a:focus, -.page-mygov-home .smart-search .search-wrapper .suggested-results__item a:active, -.page-mygov-home .smart-search .search-wrapper .search-results__item a:hover, -.page-mygov-home .smart-search .search-wrapper .search-results__item a:focus, -.page-mygov-home .smart-search .search-wrapper .search-results__item a:active, -.global-header .wrapper .smart-search .search-wrapper .suggested-results__item a:hover, -.global-header .wrapper .smart-search .search-wrapper .suggested-results__item a:focus, -.global-header .wrapper .smart-search .search-wrapper .suggested-results__item a:active, -.global-header .wrapper .smart-search .search-wrapper .search-results__item a:hover, -.global-header .wrapper .smart-search .search-wrapper .search-results__item a:focus, -.global-header .wrapper .smart-search .search-wrapper .search-results__item a:active { - color: #FFFFFF !important; - border-bottom: unset; +@media only screen and (min-width: 64em) { + .tags h2 { + margin-top: 60px; + } } -.smart-search .search-wrapper .suggested-results__item a:hover, -.smart-search .search-wrapper .search-results__item a:hover, -.page-mygov-home .smart-search .search-wrapper .suggested-results__item a:hover, -.page-mygov-home .smart-search .search-wrapper .search-results__item a:hover, -.global-header .wrapper .smart-search .search-wrapper .suggested-results__item a:hover, -.global-header .wrapper .smart-search .search-wrapper .search-results__item a:hover { - background-color: #F5F5F5; +.tags__links { + margin: 0; + padding: 0; + list-style: none; + margin-top: 20px; } -.smart-search .search-wrapper .suggested-results__item a:focus, -.smart-search .search-wrapper .search-results__item a:focus, -.page-mygov-home .smart-search .search-wrapper .suggested-results__item a:focus, -.page-mygov-home .smart-search .search-wrapper .search-results__item a:focus, -.global-header .wrapper .smart-search .search-wrapper .suggested-results__item a:focus, -.global-header .wrapper .smart-search .search-wrapper .search-results__item a:focus { - border-radius: 1px; +.tags__links li { + display: inline-block; + margin: 0 20px 20px 0; } -.smart-search .search-wrapper .suggested-results__item a:active, -.smart-search .search-wrapper .search-results__item a:active, -.page-mygov-home .smart-search .search-wrapper .suggested-results__item a:active, -.page-mygov-home .smart-search .search-wrapper .search-results__item a:active, -.global-header .wrapper .smart-search .search-wrapper .suggested-results__item a:active, -.global-header .wrapper .smart-search .search-wrapper .search-results__item a:active { - border-radius: 1px; +.tags__links li img { + background-size: contain; + background-repeat: no-repeat; + background-position: center center; + height: 25px; + width: auto; + margin-right: 20px; } -.smart-search .search-wrapper .suggested-results__status, -.smart-search .search-wrapper .search-results__status, -.page-mygov-home .smart-search .search-wrapper .suggested-results__status, -.page-mygov-home .smart-search .search-wrapper .search-results__status, -.global-header .wrapper .smart-search .search-wrapper .suggested-results__status, -.global-header .wrapper .smart-search .search-wrapper .search-results__status { +.tags__links li a, +.tags__links li span { font-family: "Roboto", sans-serif; - color: #525252; font-size: 18px; - line-height: 30px; + font-size: 1.125rem; margin: 20px 0; + margin: 1.25rem 0; + line-height: 1.6666666667; + color: #525252; + color: #101820; + display: flex; + align-items: center; + justify-content: center; + text-decoration: none; + border: 2px solid #006CE0; + border-radius: 5px; + background-color: transparent; + transition: background-color 150ms ease; margin: 0; - position: relative; - padding-left: 28px; + padding: 15px 20px; } -.theme-dark .smart-search .search-wrapper .suggested-results__status, -.theme-dark .smart-search .search-wrapper .search-results__status, -.theme-dark .page-mygov-home .smart-search .search-wrapper .suggested-results__status, -.theme-dark .page-mygov-home .smart-search .search-wrapper .search-results__status, -.theme-dark .global-header .wrapper .smart-search .search-wrapper .suggested-results__status, -.theme-dark .global-header .wrapper .smart-search .search-wrapper .search-results__status { +.theme-dark .tags__links li a, +.theme-dark .tags__links li span { color: #FFFFFF; } -.smart-search .search-wrapper .suggested-results__status::before, -.smart-search .search-wrapper .search-results__status::before, -.page-mygov-home .smart-search .search-wrapper .suggested-results__status::before, -.page-mygov-home .smart-search .search-wrapper .search-results__status::before, -.global-header .wrapper .smart-search .search-wrapper .suggested-results__status::before, -.global-header .wrapper .smart-search .search-wrapper .search-results__status::before { - content: ""; - position: absolute; - top: 0; - left: 0; - width: 18px; - height: 18px; - background-size: contain; - background-position: center; - background-repeat: no-repeat; - transition-property: transform, margin; - transition-duration: 300ms; - transition-timing-function: ease; - top: 5px; -} -.smart-search .search-wrapper .suggested-results__status--loading, -.smart-search .search-wrapper .search-results__status--loading, -.page-mygov-home .smart-search .search-wrapper .suggested-results__status--loading, -.page-mygov-home .smart-search .search-wrapper .search-results__status--loading, -.global-header .wrapper .smart-search .search-wrapper .suggested-results__status--loading, -.global-header .wrapper .smart-search .search-wrapper .search-results__status--loading { - opacity: 0; - animation: fadeIn 300ms 2000ms forwards; - transition: 150ms; +.tags__links li a b, +.tags__links li a strong, +.tags__links li span b, +.tags__links li span strong { + color: #101820; } -@keyframes fadeIn { - 0% { - opacity: 0; - } - 100% { - opacity: 100; - } +.tags__links li a:focus, +.tags__links li span:focus { + outline: 0; + text-decoration: underline; } -.smart-search .search-wrapper .suggested-results__status--loading::before, -.smart-search .search-wrapper .search-results__status--loading::before, -.page-mygov-home .smart-search .search-wrapper .suggested-results__status--loading::before, -.page-mygov-home .smart-search .search-wrapper .search-results__status--loading::before, -.global-header .wrapper .smart-search .search-wrapper .suggested-results__status--loading::before, -.global-header .wrapper .smart-search .search-wrapper .search-results__status--loading::before { - background-image: url("styles/resources/assets/icons/icon-info-white.svg"); + +.tasks-section__body { + max-width: 1072px; } -.smart-search .search-wrapper .suggested-results__status--error::before, -.smart-search .search-wrapper .search-results__status--error::before, -.page-mygov-home .smart-search .search-wrapper .suggested-results__status--error::before, -.page-mygov-home .smart-search .search-wrapper .search-results__status--error::before, -.global-header .wrapper .smart-search .search-wrapper .suggested-results__status--error::before, -.global-header .wrapper .smart-search .search-wrapper .search-results__status--error::before { - background-image: url("styles/resources/assets/icons/icon-warning-white.svg"); + +.tasks-card { + padding: 20px; + border-width: 0; + margin-bottom: 20px; + box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.25); + border-radius: 5px; + width: 100%; + display: flex; + justify-content: space-between; + align-items: stretch; + background-color: #FFFFFF; + text-decoration: none; } -.smart-search .search-wrapper .suggested-results__status--empty::before, -.smart-search .search-wrapper .search-results__status--empty::before, -.page-mygov-home .smart-search .search-wrapper .suggested-results__status--empty::before, -.page-mygov-home .smart-search .search-wrapper .search-results__status--empty::before, -.global-header .wrapper .smart-search .search-wrapper .suggested-results__status--empty::before, -.global-header .wrapper .smart-search .search-wrapper .search-results__status--empty::before { - background-image: url("styles/resources/assets/icons/icon-alert-circle.svg"); +.tasks-card:focus { + outline: 3px solid #183052; + z-index: 401; } -.smart-search .search-wrapper .suggested-results__count, -.smart-search .search-wrapper .search-results__count, -.page-mygov-home .smart-search .search-wrapper .suggested-results__count, -.page-mygov-home .smart-search .search-wrapper .search-results__count, -.global-header .wrapper .smart-search .search-wrapper .suggested-results__count, -.global-header .wrapper .smart-search .search-wrapper .search-results__count { - font-family: "Roboto", sans-serif; - color: #525252; - font-size: 16px; - line-height: 24px; - font-weight: normal; - margin: 0; - position: relative; - text-align: left; - padding-bottom: 20px; - border-bottom: 1px solid rgba(255, 255, 255, 0.3); +@media only screen and (min-width: 48em) { + .tasks-card { + padding: 25px 25px 25px 25px; + } } -.theme-dark .smart-search .search-wrapper .suggested-results__count, -.theme-dark .smart-search .search-wrapper .search-results__count, -.theme-dark .page-mygov-home .smart-search .search-wrapper .suggested-results__count, -.theme-dark .page-mygov-home .smart-search .search-wrapper .search-results__count, -.theme-dark .global-header .wrapper .smart-search .search-wrapper .suggested-results__count, -.theme-dark .global-header .wrapper .smart-search .search-wrapper .search-results__count { - color: #FFFFFF; +.tasks-card .icon-container { + display: flex; + flex-direction: column; + align-items: flex-start; + flex: 0 1 auto; + margin: 0 16px 0 0; } -.smart-search .search-wrapper .suggested-results .bot-response, -.smart-search .search-wrapper .search-results .bot-response, -.page-mygov-home .smart-search .search-wrapper .suggested-results .bot-response, -.page-mygov-home .smart-search .search-wrapper .search-results .bot-response, -.global-header .wrapper .smart-search .search-wrapper .suggested-results .bot-response, -.global-header .wrapper .smart-search .search-wrapper .search-results .bot-response { - margin: 0 0 50px 0; +.tasks-card .icon-container img { + width: 26px; + height: auto; } -.smart-search .search-wrapper .suggested-results .bot-response .followUp-questions li a, -.smart-search .search-wrapper .search-results .bot-response .followUp-questions li a, -.page-mygov-home .smart-search .search-wrapper .suggested-results .bot-response .followUp-questions li a, -.page-mygov-home .smart-search .search-wrapper .search-results .bot-response .followUp-questions li a, -.global-header .wrapper .smart-search .search-wrapper .suggested-results .bot-response .followUp-questions li a, -.global-header .wrapper .smart-search .search-wrapper .search-results .bot-response .followUp-questions li a { +.tasks-card .icon-container .day { + margin: 0; + background-color: #006CE0; + border-radius: 50%; + width: 26px; + height: 26px; + text-align: center; + line-height: 26px; + color: #FFFFFF; + font-size: 16px; + letter-spacing: -2px; + text-indent: -2px; +} +.tasks-card .icon-container .month { + width: 26px; + font-size: 10px; + line-height: 10px; + margin: 6px 0 0 0; color: #006CE0; - font-size: 20px; + text-transform: uppercase; + text-align: center; } -.smart-search .search-wrapper .suggested-results .results-section .search-result-list, -.smart-search .search-wrapper .search-results .results-section .search-result-list, -.page-mygov-home .smart-search .search-wrapper .suggested-results .results-section .search-result-list, -.page-mygov-home .smart-search .search-wrapper .search-results .results-section .search-result-list, -.global-header .wrapper .smart-search .search-wrapper .suggested-results .results-section .search-result-list, -.global-header .wrapper .smart-search .search-wrapper .search-results .results-section .search-result-list { - list-style: none; - padding-left: 0; +@media only screen and (min-width: 48em) { + .tasks-card .icon-container { + margin: 0 25px 0 0; + } + .tasks-card .icon-container img { + width: 40px; + } + .tasks-card .icon-container .day { + width: 40px; + height: 40px; + line-height: 40px; + font-size: 23px; + } + .tasks-card .icon-container .month { + width: 40px; + font-size: 13px; + line-height: 1; + } } -.smart-search .search-wrapper .suggested-results .pagination, -.smart-search .search-wrapper .search-results .pagination, -.page-mygov-home .smart-search .search-wrapper .suggested-results .pagination, -.page-mygov-home .smart-search .search-wrapper .search-results .pagination, -.global-header .wrapper .smart-search .search-wrapper .suggested-results .pagination, -.global-header .wrapper .smart-search .search-wrapper .search-results .pagination { - border-top: 1px solid rgba(255, 255, 255, 0.3); - margin: 15px 0 0; - padding-top: 30px; +.tasks-card .content-container { + display: flex; + flex-direction: column; + flex: 1 1 auto; } -.smart-search .search-wrapper .suggested-results .pagination > li a:not(.disabled):focus, -.smart-search .search-wrapper .search-results .pagination > li a:not(.disabled):focus, -.page-mygov-home .smart-search .search-wrapper .suggested-results .pagination > li a:not(.disabled):focus, -.page-mygov-home .smart-search .search-wrapper .search-results .pagination > li a:not(.disabled):focus, -.global-header .wrapper .smart-search .search-wrapper .suggested-results .pagination > li a:not(.disabled):focus, -.global-header .wrapper .smart-search .search-wrapper .search-results .pagination > li a:not(.disabled):focus { - border-color: #FFFFFF; - box-shadow: 0 0 0 2px #FFFFFF; +@media only screen and (min-width: 48em) { + .tasks-card .content-container { + flex-direction: row; + } } -.smart-search .search-wrapper .suggested-results .pagination > li.previous:not(.disabled) a::after, -.smart-search .search-wrapper .search-results .pagination > li.previous:not(.disabled) a::after, -.page-mygov-home .smart-search .search-wrapper .suggested-results .pagination > li.previous:not(.disabled) a::after, -.page-mygov-home .smart-search .search-wrapper .search-results .pagination > li.previous:not(.disabled) a::after, -.global-header .wrapper .smart-search .search-wrapper .suggested-results .pagination > li.previous:not(.disabled) a::after, -.global-header .wrapper .smart-search .search-wrapper .search-results .pagination > li.previous:not(.disabled) a::after { - background-image: url("styles/resources/assets/icons/arrow-left-white.svg"); +.tasks-card .content-container .details-container { + display: flex; + flex-direction: column; + justify-content: flex-start; + flex: 1 1 auto; } -.smart-search .search-wrapper .suggested-results .pagination > li.previous:not(.disabled) a:hover, -.smart-search .search-wrapper .search-results .pagination > li.previous:not(.disabled) a:hover, -.page-mygov-home .smart-search .search-wrapper .suggested-results .pagination > li.previous:not(.disabled) a:hover, -.page-mygov-home .smart-search .search-wrapper .search-results .pagination > li.previous:not(.disabled) a:hover, -.global-header .wrapper .smart-search .search-wrapper .suggested-results .pagination > li.previous:not(.disabled) a:hover, -.global-header .wrapper .smart-search .search-wrapper .search-results .pagination > li.previous:not(.disabled) a:hover { - border-color: #FFFFFF; - background-color: #FFFFFF; +.tasks-card .content-container .details-container p { + margin: 0; + line-height: 1.15; } -.smart-search .search-wrapper .suggested-results .pagination > li.previous:not(.disabled) a:hover::after, -.smart-search .search-wrapper .search-results .pagination > li.previous:not(.disabled) a:hover::after, -.page-mygov-home .smart-search .search-wrapper .suggested-results .pagination > li.previous:not(.disabled) a:hover::after, -.page-mygov-home .smart-search .search-wrapper .search-results .pagination > li.previous:not(.disabled) a:hover::after, -.global-header .wrapper .smart-search .search-wrapper .suggested-results .pagination > li.previous:not(.disabled) a:hover::after, -.global-header .wrapper .smart-search .search-wrapper .search-results .pagination > li.previous:not(.disabled) a:hover::after { - background-image: url("styles/resources/assets/icons/arrow-left.svg"); +.tasks-card .content-container .details-container .name { + color: #000000; + text-align: left; + margin: 0 0 3px 0; + font-size: 16px; + font-weight: bold; } -.smart-search .search-wrapper .suggested-results .pagination > li.next:not(.disabled) a::after, -.smart-search .search-wrapper .search-results .pagination > li.next:not(.disabled) a::after, -.page-mygov-home .smart-search .search-wrapper .suggested-results .pagination > li.next:not(.disabled) a::after, -.page-mygov-home .smart-search .search-wrapper .search-results .pagination > li.next:not(.disabled) a::after, -.global-header .wrapper .smart-search .search-wrapper .suggested-results .pagination > li.next:not(.disabled) a::after, -.global-header .wrapper .smart-search .search-wrapper .search-results .pagination > li.next:not(.disabled) a::after { - background-image: url("styles/resources/assets/icons/arrow-right-white.svg"); +.tasks-card .content-container .details-container .description { + text-align: left; + margin: 10px 0 0 0; + font-size: 14px; + line-height: 1.25; } -.smart-search .search-wrapper .suggested-results .pagination > li.next:not(.disabled) a:hover, -.smart-search .search-wrapper .search-results .pagination > li.next:not(.disabled) a:hover, -.page-mygov-home .smart-search .search-wrapper .suggested-results .pagination > li.next:not(.disabled) a:hover, -.page-mygov-home .smart-search .search-wrapper .search-results .pagination > li.next:not(.disabled) a:hover, -.global-header .wrapper .smart-search .search-wrapper .suggested-results .pagination > li.next:not(.disabled) a:hover, -.global-header .wrapper .smart-search .search-wrapper .search-results .pagination > li.next:not(.disabled) a:hover { - border-color: #FFFFFF; - background-color: #FFFFFF; +.tasks-card .content-container .details-container .status-container { + display: flex; + align-items: center; } -.smart-search .search-wrapper .suggested-results .pagination > li.next:not(.disabled) a:hover::after, -.smart-search .search-wrapper .search-results .pagination > li.next:not(.disabled) a:hover::after, -.page-mygov-home .smart-search .search-wrapper .suggested-results .pagination > li.next:not(.disabled) a:hover::after, -.page-mygov-home .smart-search .search-wrapper .search-results .pagination > li.next:not(.disabled) a:hover::after, -.global-header .wrapper .smart-search .search-wrapper .suggested-results .pagination > li.next:not(.disabled) a:hover::after, -.global-header .wrapper .smart-search .search-wrapper .search-results .pagination > li.next:not(.disabled) a:hover::after { - background-image: url("styles/resources/assets/icons/arrow-right.svg"); +.tasks-card .content-container .details-container .status-container p.status { + font-size: 12px; + font-weight: bold; } -.smart-search .search-wrapper .suggested-results .pagination > li:not(.previous):not(.next):not(.break-me) a, -.smart-search .search-wrapper .search-results .pagination > li:not(.previous):not(.next):not(.break-me) a, -.page-mygov-home .smart-search .search-wrapper .suggested-results .pagination > li:not(.previous):not(.next):not(.break-me) a, -.page-mygov-home .smart-search .search-wrapper .search-results .pagination > li:not(.previous):not(.next):not(.break-me) a, -.global-header .wrapper .smart-search .search-wrapper .suggested-results .pagination > li:not(.previous):not(.next):not(.break-me) a, -.global-header .wrapper .smart-search .search-wrapper .search-results .pagination > li:not(.previous):not(.next):not(.break-me) a { - background-color: #183052; - color: #FFFFFF; +.tasks-card .content-container .details-container .status-container p.status.due-now { + color: #B36000; } -.smart-search .search-wrapper .suggested-results .pagination > li:not(.previous):not(.next):not(.break-me) a:hover, -.smart-search .search-wrapper .search-results .pagination > li:not(.previous):not(.next):not(.break-me) a:hover, -.page-mygov-home .smart-search .search-wrapper .suggested-results .pagination > li:not(.previous):not(.next):not(.break-me) a:hover, -.page-mygov-home .smart-search .search-wrapper .search-results .pagination > li:not(.previous):not(.next):not(.break-me) a:hover, -.global-header .wrapper .smart-search .search-wrapper .suggested-results .pagination > li:not(.previous):not(.next):not(.break-me) a:hover, -.global-header .wrapper .smart-search .search-wrapper .search-results .pagination > li:not(.previous):not(.next):not(.break-me) a:hover { - background-color: #FFFFFF; - color: #525252; - border-color: transparent; +.tasks-card .content-container .details-container .status-container p.status.overdue { + color: #DC3548; } -.smart-search .search-wrapper .suggested-results .pagination > li:not(.previous):not(.next):not(.break-me).active a, -.smart-search .search-wrapper .search-results .pagination > li:not(.previous):not(.next):not(.break-me).active a, -.page-mygov-home .smart-search .search-wrapper .suggested-results .pagination > li:not(.previous):not(.next):not(.break-me).active a, -.page-mygov-home .smart-search .search-wrapper .search-results .pagination > li:not(.previous):not(.next):not(.break-me).active a, -.global-header .wrapper .smart-search .search-wrapper .suggested-results .pagination > li:not(.previous):not(.next):not(.break-me).active a, -.global-header .wrapper .smart-search .search-wrapper .search-results .pagination > li:not(.previous):not(.next):not(.break-me).active a { +.tasks-card .content-container .details-container .status-container p.status.not-due { color: #006CE0; - border-color: #006CE0; - background-color: #FFFFFF; -} -.smart-search .search-wrapper .suggested-results__next, -.smart-search .search-wrapper .search-results__next, -.page-mygov-home .smart-search .search-wrapper .suggested-results__next, -.page-mygov-home .smart-search .search-wrapper .search-results__next, -.global-header .wrapper .smart-search .search-wrapper .suggested-results__next, -.global-header .wrapper .smart-search .search-wrapper .search-results__next { - height: 28px; - background: transparent; - border: none; - margin-left: 20px; -} -.smart-search .search-wrapper .suggested-results__next i, -.smart-search .search-wrapper .search-results__next i, -.page-mygov-home .smart-search .search-wrapper .suggested-results__next i, -.page-mygov-home .smart-search .search-wrapper .search-results__next i, -.global-header .wrapper .smart-search .search-wrapper .suggested-results__next i, -.global-header .wrapper .smart-search .search-wrapper .search-results__next i { - display: inline-block; - width: 28px; - height: 28px; - background: url("styles/resources/assets/icons/chevron-right.svg") no-repeat; - background-size: 28px; } -.smart-search .search-wrapper .suggested-results__current, -.smart-search .search-wrapper .search-results__current, -.page-mygov-home .smart-search .search-wrapper .suggested-results__current, -.page-mygov-home .smart-search .search-wrapper .search-results__current, -.global-header .wrapper .smart-search .search-wrapper .suggested-results__current, -.global-header .wrapper .smart-search .search-wrapper .search-results__current { - margin-left: 3px; - margin-right: 3px; - width: 28px; - height: 28px; - border-radius: 5px; - border: 1px solid #006CE0; - color: #006CE0; +.tasks-card .content-container .details-container .status-container p.status ~ .date:before { + margin: 0 4px 0 4px; + content: "•"; } -.smart-search .search-wrapper .suggested-results .results-section .search-result-list, -.smart-search .search-wrapper .search-results .results-section .search-result-list, -.page-mygov-home .smart-search .search-wrapper .suggested-results .results-section .search-result-list, -.page-mygov-home .smart-search .search-wrapper .search-results .results-section .search-result-list, -.global-header .wrapper .smart-search .search-wrapper .suggested-results .results-section .search-result-list, -.global-header .wrapper .smart-search .search-wrapper .search-results .results-section .search-result-list { - list-style: none; - padding-left: 0; +.tasks-card .content-container .details-container .status-container .date { + font-size: 12px; } - -.storing-personal-details { +.tasks-card .content-container .action-container { + flex: 0 1 auto; display: flex; - flex-direction: column; + justify-content: space-between; + margin: 16px 0 0 0; + padding: 16px 0 0 0; + border-top: 1px solid #DDDDDD; } -.storing-personal-details a { - margin: 10px 10px 0 0; +@media only screen and (min-width: 48em) { + .tasks-card .content-container .action-container { + margin: 0 0 0 20px; + padding: 0 0 0 20px; + justify-content: center; + border-left: 1px solid #DDDDDD; + border-top: none; + flex-direction: column; + } } -.storing-personal-details__content { - margin: 1.2em 0 1.2em 0; +.tasks-card .content-container .action-container .action { + white-space: nowrap; + display: flex; + flex-direction: row; } - -/* common styles for .cmp-text and .styled-list */ -.cmp-text, -.styled-list { - /* common styles for both inner and outer ul and ol */ - /* common styles for outer ul and ol */ - /* styles only for ul */ - /* styles only for ol */ - /* styles for ul and ol with white background */ +.tasks-card .content-container .action-container .action p { + font-size: 14px; + font-weight: 500; + text-align: left; + line-height: 1; + color: #006CE0; + margin: 0 4px 0 0; } -.cmp-text ul, -.cmp-text ol, -.styled-list ul, -.styled-list ol { +.tasks-card .content-container .action-container .action img { + width: 16px; + height: auto; position: relative; - margin: 0; - list-style: none; - overflow-wrap: break-word; + top: -2px; } -.cmp-text ul li, -.cmp-text ol li, -.styled-list ul li, -.styled-list ol li { - font-family: "Roboto", sans-serif; +.tasks-card .content-container .action-container .agency-name { + text-align: left; + font-size: 12px; color: #525252; - font-size: 18px; - line-height: 30px; - margin: 20px 0; - margin: 0 0 12px 0; - position: relative; -} -.theme-dark .cmp-text ul li, -.theme-dark .cmp-text ol li, -.theme-dark .styled-list ul li, -.theme-dark .styled-list ol li { - color: #FFFFFF; -} -.cmp-text ul li:last-child, -.cmp-text ol li:last-child, -.styled-list ul li:last-child, -.styled-list ol li:last-child { - margin: 0; + line-height: 1; } -.cmp-text ul li a, -.cmp-text ol li a, -.styled-list ul li a, -.styled-list ol li a { - color: #006CE0; +.tasks-card.more-tasks { + align-items: center; } -.cmp-text ul li ul, -.cmp-text ul li ol, -.cmp-text ol li ul, -.cmp-text ol li ol, -.styled-list ul li ul, -.styled-list ul li ol, -.styled-list ol li ul, -.styled-list ol li ol { - padding: 15px 0 0 24px; +.tasks-card.more-tasks .content-container { + display: flex; + justify-content: space-between; } -.cmp-text ul li ul li::before, -.cmp-text ul li ol li::before, -.cmp-text ol li ul li::before, -.cmp-text ol li ol li::before, -.styled-list ul li ul li::before, -.styled-list ul li ol li::before, -.styled-list ol li ul li::before, -.styled-list ol li ol li::before { - left: -24px; +.tasks-card.more-tasks .content-container p { + margin: 0; } -.cmp-text > ul, -.cmp-text > ol, -.styled-list > ul, -.styled-list > ol { - margin: 20px 0 40px; +.tasks-card.more-tasks .content-container .name { + color: #000000; + font-weight: bold; + text-align: left; } -.cmp-text ul, -.styled-list ul { - position: relative; +.tasks-card.more-tasks .content-container .action { + display: flex; } -.cmp-text ul li, -.styled-list ul li { - /* styling of the blue bullet on the left of outer lis */ +.tasks-card.more-tasks .content-container .action p { + color: #006CE0; } -.cmp-text ul li::before, -.styled-list ul li::before { - content: ""; - position: absolute; - top: 12px; - left: -26px; - width: 4px; - height: 4px; - background-color: #006CE0; - border-radius: 50%; +.tasks-card.more-tasks .content-container .action img { + padding-left: 10px; } -.cmp-text ul li ul, -.styled-list ul li ul { - /* color of the bullet on the left of the inner lis */ + +.no-tasks-section { + display: flex; + align-items: center; + background-color: transparent; + flex-direction: column; + box-shadow: none; + padding: 0; } -.cmp-text ul li ul li::before, -.styled-list ul li ul li::before { - background-color: #525252; +.no-tasks-section.dashboard { + flex-direction: row; + background-color: #FFFFFF; + box-shadow: 0 0 2pt rgba(17, 17, 18, 0.2509803922); + border-radius: 5pt; + padding: 26px; } -.cmp-text ol, -.styled-list ol { - counter-reset: step-counter; +.no-tasks-section.dashboard img { + margin-right: 20px; } -.cmp-text ol li, -.styled-list ol li { - counter-increment: step-counter; +.no-tasks-section.dashboard p { + margin: 0; } -.cmp-text ol li::before, -.styled-list ol li::before { - content: counter(step-counter); - color: #006CE0; - position: absolute; - left: -30px; +.no-tasks-section img { + width: 45px; + height: auto; } -.cmp-text ol li ol li::before, -.styled-list ol li ol li::before { +.no-tasks-section p { color: #525252; + font-size: 16px; + font-weight: 300px; + margin: 20px 0 0 0; } -.cmp-text.is-bg-white, -.styled-list.is-bg-white { - /* mygov-auth-home and content requires the styled list to have transparent bg */ + +.loading-section { + display: flex; + flex-direction: column; } -.cmp-text.is-bg-white ul, -.cmp-text.is-bg-white ol, -.styled-list.is-bg-white ul, -.styled-list.is-bg-white ol { - background: #FFFFFF; -} -.cmp-text.is-bg-white > ul, -.styled-list.is-bg-white > ul { - padding: 0 30px 0 27px; -} -.cmp-text.is-bg-white > ol, -.styled-list.is-bg-white > ol { - padding: 0 30px 0 57px; -} -.cmp-text.is-bg-white > ol > li::before, -.styled-list.is-bg-white > ol > li::before { - width: 26px; - height: 26px; - background: #006CE0; - border-radius: 50%; - color: #FFFFFF; - display: flex; - justify-content: center; +.loading-section:not(.dashboard) { align-items: center; - font-size: 14px; - font-weight: bold; - top: 2px; - left: -57px; -} -.page-mygov-auth-home .cmp-text.is-bg-white ul, -.page-mygov-auth-home .cmp-text.is-bg-white ol, .page-mygov-auth-content .cmp-text.is-bg-white ul, -.page-mygov-auth-content .cmp-text.is-bg-white ol, -.page-mygov-auth-home .styled-list.is-bg-white ul, -.page-mygov-auth-home .styled-list.is-bg-white ol, -.page-mygov-auth-content .styled-list.is-bg-white ul, -.page-mygov-auth-content .styled-list.is-bg-white ol { - background: transparent; -} - -/** styles for styled list only **/ -.styled-list { - color: #333333; - /* common styles for outer ul and ol */ - /* only styled lists without white background should have a top border */ } -.styled-list > ul, -.styled-list > ol { - padding: 40px 20px 40px 57px; +.loading-section .loading-spinner { + width: 96px; + width: 6rem; + height: 96px; + height: 6rem; + min-width: 96px; + min-width: 6rem; + display: block; + background-size: contain; + background-position: center; + background-repeat: no-repeat; + background-image: url("styles/resources/assets/icons/spinner.svg"); + margin: 13px 28px 0; } -@media only screen and (min-width: 64em) { - .styled-list > ul, -.styled-list > ol { - padding-right: 116px; +@media only screen and (min-width: 77.75em) { + .loading-section .loading-spinner { + width: 96px; + width: 6rem; + height: 96px; + height: 6rem; + min-width: 96px; + min-width: 6rem; + display: block; + background-size: contain; + background-position: center; + background-repeat: no-repeat; + margin: 17px 35px 0; } } -.styled-list .small { - display: block; - margin-top: 40px; +.loading-section.dashboard { + background-color: #FFFFFF; + border-radius: 5pt; + padding: 18px 14px 18px 14px; +} +.loading-section.dashboard .skeleton__title { + width: 70%; + font-size: 32px; + padding-bottom: 8px; } @media only screen and (min-width: 48em) { - .styled-list .small + h2 { - margin-top: 20px; + .loading-section.dashboard .skeleton__title { + width: 30%; } } -.styled-list h2 { - margin: 40px 0 20px; -} -.styled-list h3 { - margin-top: 40px; - margin-bottom: 10px; +.loading-section.dashboard .skeleton__paragraph { + width: 100%; + font-size: 16px; + padding: 8px 0 8px 0; } @media only screen and (min-width: 48em) { - .styled-list h3 { - margin-top: 60px; + .loading-section.dashboard .skeleton__paragraph { + width: 75%; + } + .loading-section.dashboard .skeleton__paragraph.paragraph-2 { + display: none; } } -.styled-list > p { +.loading-section.dashboard p { + margin: 0; +} + +.DI-services p { font-family: "Roboto", sans-serif; - color: #525252; font-size: 18px; - line-height: 30px; + font-size: 1.125rem; margin: 20px 0; - margin-top: 20px; - margin-bottom: 20px; + margin: 1.25rem 0; + line-height: 1.6666666667; + color: #525252; + color: #101820; + max-width: 770px; + margin-bottom: 15px; + margin-top: 5px; } -.theme-dark .styled-list > p { +.theme-dark .DI-services p { color: #FFFFFF; } -.styled-list .styled-divider { - display: flex; +.DI-services p b, +.DI-services p strong { + color: #101820; } -.styled-list .styled-divider .left { - height: 5px; - width: 10%; - background: #006CE0; +.DI-services__list { + display: flex; + flex-flow: column wrap; + padding: 0; } -.styled-list .styled-divider .right { - height: 5px; - width: 90%; - background: #4B5980; +@media only screen and (min-width: 48em) { + .DI-services__list { + flex-flow: column wrap; + } } -.styled-list:not(.is-bg-white) > ul, -.styled-list:not(.is-bg-white) > ol { - background: #F5F5F5; - position: relative; - /* before and after rules to create border at the top of the outer ul and ol - true denotes that it is a topBorder */ - position: relative; +.DI-services__list--item { + display: flex; + padding: 7px; } -.styled-list:not(.is-bg-white) > ul::before, .styled-list:not(.is-bg-white) > ul::after, -.styled-list:not(.is-bg-white) > ol::before, -.styled-list:not(.is-bg-white) > ol::after { - content: ""; - position: absolute; - height: 5px; - top: 0; +@media only screen and (min-width: 48em) { + .DI-services__list--item { + width: 90%; + } } -.styled-list:not(.is-bg-white) > ul::before, -.styled-list:not(.is-bg-white) > ol::before { - width: 50px; - left: 0; - background-color: #006CE0; +@media only screen and (min-width: 64em) { + .DI-services__list--item { + width: 90%; + } } -.styled-list:not(.is-bg-white) > ul::after, -.styled-list:not(.is-bg-white) > ol::after { - width: calc(100% - 49px); - right: 0; - background-color: #183052; +@media only screen and (min-width: 77.75em) { + .DI-services__list--item { + width: 33.33%; + } } - -/* styles for .cmp-text only */ -.cmp-text > ul, -.cmp-text > ol { - padding: 0 0 0 30px; +@media only screen and (min-width: 88.125em) { + .DI-services__list--item { + width: 25%; + } } - -.switch { - position: relative; - display: inline-block; - width: 2.125rem; - height: 1.25rem; - /* Rounded sliders */ +.DI-services__list--item--skeleton { + box-shadow: none; } -.switch input { - opacity: 0; - width: 0; - height: 0; +.DI-services__list--item .list-link { + display: flex; + padding: 0 30px; + align-items: center; + background: #FFFFFF; + height: 100px; + width: 100%; + text-decoration: none; + border-radius: 5px; + box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.25); } -.switch .slider { - position: absolute; - cursor: pointer; - top: 0; - left: 0; - right: 0; - bottom: 0; - background-color: #183052; - -webkit-transition: 0.4s; - transition: 0.4s; +.DI-services__list--item .list-link__wrapper-block { + display: flex; } -.switch .slider:before { - position: absolute; - content: ""; - height: 1.0625rem; - width: 1.0625rem; - left: 0.125rem; - bottom: 0.125rem; - background-color: #FFFFFF; - -webkit-transition: 0.4s; - transition: 0.4s; +.DI-services__list--item .list-link__wrapper-block-external { + display: flex; + margin-left: auto; } -.switch input:checked + .slider { - background-color: #254A7E; +.DI-services__list--item .list-link:hover .list-link__external { + transform: translate(3px, -3px); } -.switch input:focus + .slider { - box-shadow: 0 0 0.0625rem #CCCCCC; +.DI-services__list--item .list-link__icon { + height: 40px; + width: 40px; + min-height: 40px; + min-width: 40px; } -.switch input:checked + .slider:before { - -webkit-transform: translateX(0.8125rem); - -ms-transform: translateX(0.8125rem); - transform: translateX(0.8125rem); -} -.switch .slider.round { - border-radius: 2.125rem; +.DI-services__list--item .list-link__title { + font-family: "Roboto", sans-serif; + font-size: 18px; + font-size: 1.125rem; + margin: 20px 0; + margin: 1.25rem 0; + line-height: 1.6666666667; + color: #525252; + font-weight: 700; + color: #333333; + line-height: 24px; + padding: 0 20px 0 20px; } -.switch .slider.round:before { - border-radius: 50%; +.theme-dark .DI-services__list--item .list-link__title { + color: #FFFFFF; } - -.system-error { +.DI-services__list--item .list-link__external { + transition: transform 150ms ease-out; + backface-visibility: hidden; + height: 32px; + width: 32px; + min-height: 32px; + min-width: 32px; + background-color: rgba(0, 121, 202, 0.1); display: flex; - flex-direction: column; -} -.system-error a { - margin: 10px 10px 0 0; + align-items: center; + justify-content: center; + background-repeat: no-repeat; + border-radius: 5px; + margin-left: auto; } -.system-error__content { - margin: 1.2em 0 1.2em 0; +.DI-services__list--item .list-link__external--cta { + height: 18px; + width: 18px; + min-height: 18px; + min-width: 18px; } - -.cmp-text .table-responsive { +.DI-services__list--item .list-link--skeleton { display: block; - width: 100%; - overflow-x: auto; - -webkit-overflow-scrolling: touch; - position: relative; - overflow-y: hidden; - margin: 40px 0; + padding: 30px 20px; + box-shadow: none; } -@media (max-width: 77.6875em) { - .cmp-text .table-responsive .shadow-before, .cmp-text .table-responsive .shadow-after { - position: absolute; - background-image: linear-gradient(to left, rgba(255, 255, 255, 0.7), #000000 132%); - opacity: 0.21; - width: 33px; - z-index: 401; - display: none; - } +.DI-services a { + margin-top: 16px; + margin-right: 16px; } -@media (max-width: 77.6875em) { - .cmp-text .table-responsive .shadow-after { - background-image: linear-gradient(to right, rgba(255, 255, 255, 0.7), #000000 132%); - right: 0; + +@keyframes ShowToasts { + from { + opacity: 0; + transform: translateY(30px); + } + to { + opacity: 1; + transform: translateY(0); } } -.cmp-text .table-responsive::-webkit-scrollbar { - height: 6px; - background: #F5F5F5; -} -.cmp-text .table-responsive::-webkit-scrollbar-thumb { - background: #A0A0A3; - height: 6px; - border-radius: 3px; +@keyframes HideToasts { + from { + opacity: 1; + transform: translateY(0); + } + to { + opacity: 0; + transform: translateY(30px); + } } -.cmp-text table { - border-bottom: 1px solid #DDDDDD; - position: relative; +.toast__container { + position: fixed; + bottom: 40px; + left: 20px; + z-index: 1100; + width: fit-content; + max-width: calc(100vw - 40px); + visibility: hidden; + transition: visibility 0s linear 150ms, opacity 150ms linear, transform 150ms ease; + animation: HideToasts 100ms; + animation-fill-mode: forwards; } -@media only screen and (max-width: 39.9375em) { - .cmp-text table { - border-bottom: 0; +@media only screen and (min-width: 64em) { + .toast__container { + left: 40px; + max-width: 770px; } } -.cmp-text table .wrap { - word-wrap: break-word; +.toast__container.is-visible { + transition: visibility 0s linear, opacity 150ms linear, transform 150ms ease; + visibility: visible; + animation: ShowToasts 150ms; + animation-fill-mode: forwards; } -.cmp-text table caption { - font-family: "Montserrat", sans-serif; - font-weight: 700; - color: #101820; - font-size: 20px; - line-height: 24px; - text-align: left; - padding-bottom: 20px; - /* mixin for table border - false denotes it is not a topBorder */ +.toast__message { position: relative; - caption-side: top; + display: flex; + flex-wrap: wrap; + min-height: 60px; + padding: 15px 55px 15px 80px; + background: #006CE0; + color: #FFFFFF; + border-radius: 5px; + box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.25); + transition-property: opacity, transform; + transition-duration: 150ms; } @media only screen and (min-width: 64em) { - .cmp-text table caption { - line-height: 28px; + .toast__message { + padding-top: 20px; + padding-bottom: 20px; } } -.page-ausgov-home .cmp-text table caption, .page-mygov-home .cmp-text table caption { - font-size: 24px; - line-height: 30px; -} -.cmp-text table caption::before, .cmp-text table caption::after { +.toast__message button.close { + width: 48px; + width: 3rem; + min-width: 48px; + min-width: 3rem; content: ""; position: absolute; - height: 5px; - bottom: 0; -} -.cmp-text table caption::before { - width: 50px; - left: 0; - background-color: #006CE0; -} -.cmp-text table caption::after { - width: calc(100% - 49px); + top: 0; right: 0; - background-color: #183052; -} -.cmp-text table tr:first-child th { - font-weight: 700; + background-size: contain; + background-position: center; + background-repeat: no-repeat; + transition-property: transform, margin, background; + transition-duration: 300ms; + transition-timing-function: ease; + background: url("styles/resources/assets/icons/icon-close-bold-white.svg") no-repeat; + background-size: 14px; + background-position: right 20px top 23px; } -.cmp-text table tr:nth-child(even) { - background-color: #F5F5F5; +.toast__message button.close:focus { + outline-color: #000000; } -.cmp-text table tr td, -.cmp-text table tr th { - border: 0; - vertical-align: top; - text-align: left; +.toast__message p { font-family: "Roboto", sans-serif; - color: #525252; font-size: 16px; - line-height: 24px; + font-size: 1rem; + line-height: 1.5; font-weight: normal; - padding: 14px 20px 16px; - line-height: 1.25; -} -.theme-dark .cmp-text table tr td, -.theme-dark .cmp-text table tr th { + color: #525252; color: #FFFFFF; + margin: 0; + align-self: center; } -.cmp-text table tr th { - border-bottom: 1px solid #DDDDDD; - color: #101820; -} -.cmp-text table tr th:only-of-type { - border-right: 1px solid #DDDDDD; - border-bottom: none; -} -.cmp-text table tr th.border-right { - border-right: 1px solid #DDDDDD; - font-weight: 700; +.theme-dark .toast__message p { + color: #FFFFFF; } -.cmp-text table .total-cell { +.toast__message p strong, +.toast__message p b { font-family: "Roboto", sans-serif; + font-size: 16px; + font-size: 1rem; + line-height: 1.5; + font-weight: normal; color: #525252; - font-size: 18px; - line-height: 30px; - margin: 20px 0; - font-weight: 700; - margin: 0; color: #101820; - display: block; - text-align: right; + font-weight: 700; + color: #FFFFFF; } -.theme-dark .cmp-text table .total-cell { +.theme-dark .toast__message p strong, +.theme-dark .toast__message p b { color: #FFFFFF; } - -.tags { - border-top: 1px solid #DDDDDD; - margin: 40px 0 20px; +.theme-dark .toast__message p strong, +.theme-dark .toast__message p b { + color: #FFFFFF; } -@media only screen and (min-width: 64em) { - .tags { - margin: 60px 0 40px; - } +.toast__message.is-error { + background: #DC3548; } -.tags h2 { - margin-top: 40px; +.toast__message.is-information { + background: #006CE0; } -@media only screen and (min-width: 64em) { - .tags h2 { - margin-top: 60px; - } -} -.tags__links { - margin: 0; - padding: 0; - list-style: none; - margin-top: 20px; -} -.tags__links li { - display: inline-block; - margin: 0 20px 20px 0; +.toast__message.is-success { + background: #168845; } -.tags__links li img { +.toast__icon { + width: 60px; + width: 3.75rem; + min-width: 60px; + min-width: 3.75rem; + content: ""; + position: absolute; + top: 0; + left: 0; background-size: contain; + background-position: center; background-repeat: no-repeat; - background-position: center center; - height: 25px; - width: auto; - margin-right: 20px; + transition-property: transform, margin; + transition-duration: 300ms; + transition-timing-function: ease; + background-color: rgba(0, 0, 0, 0.2); + background-size: 24px; + background-position: center top 17px; + border-radius: 5px 0 0 5px; + background-image: url("styles/resources/assets/icons/icon-info-white.svg"); } -.tags__links li a, -.tags__links li span { - font-family: "Roboto", sans-serif; - color: #525252; - font-size: 18px; - line-height: 30px; - margin: 20px 0; - color: #101820; - display: flex; - align-items: center; - justify-content: center; - text-decoration: none; - border: 2px solid #006CE0; - border-radius: 5px; - background-color: transparent; - transition: background-color 150ms ease; - margin: 0; - padding: 15px 20px; +.is-error .toast__icon { + background-image: url("styles/resources/assets/icons/icon-warning-white.svg"); } -.theme-dark .tags__links li a, -.theme-dark .tags__links li span { - color: #FFFFFF; +.is-success .toast__icon { + background-image: url("styles/resources/assets/icons/icon-check-circle-white.svg"); } -.tags__links li a b, -.tags__links li a strong, -.tags__links li span b, -.tags__links li span strong { - color: #101820; + +.toast__container { + bottom: 40px; + bottom: 2.5rem; + left: 20px; + left: 1.25rem; + right: 20px; + right: 1.25rem; + position: fixed; + z-index: 1100; + width: fit-content; + max-width: calc(100% - 20px - 20px); + visibility: hidden; + transition: visibility 0s linear 150ms, opacity 150ms linear, transform 150ms ease; + animation: HideToasts 100ms; + animation-fill-mode: forwards; } -.tags__links li a:focus, -.tags__links li span:focus { - outline: 0; - text-decoration: underline; +.toast__container.is-visible { + transition: visibility 0s linear, opacity 150ms linear, transform 150ms ease; + visibility: visible; + animation: ShowToasts 150ms; + animation-fill-mode: forwards; } - -.tasks-section__body { - max-width: 1072px; +@media only screen and (min-width: 64em) { + .toast__container { + max-width: 770px; + max-width: 48.125rem; + left: 5vw; + } } -.tasks-card { - padding: 20px; - border-width: 0; - margin-bottom: 20px; - box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.25); +.toast__message { + min-height: 43px; + min-height: 2.6875rem; border-radius: 5px; - width: 100%; + border-radius: 0.3125rem; + position: relative; display: flex; - justify-content: space-between; + flex-flow: row nowrap; + background: #006CE0; + color: #101820; + box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.25); + box-shadow: 0 0.125rem 0.375rem 0 rgba(0, 0, 0, 0.25); + transition-property: opacity, transform; + transition-duration: 150ms; + height: auto; align-items: stretch; - background-color: #FFFFFF; - text-decoration: none; + line-height: 1.25; + padding: 0; } -.tasks-card:focus { - outline: 3px solid #183052; - z-index: 401; +.toast__message p { + font-family: "Roboto", sans-serif; + font-size: 16px; + font-size: 1rem; + line-height: 1.5; + font-weight: normal; + color: #525252; + overflow-wrap: break-word; + word-wrap: break-word; + -ms-word-break: break-all; + word-break: break-all; + word-break: break-word; + font-size: 16px; + font-size: 1rem; + padding: 12px 8px 12px 16px; + padding: 0.75rem 0.5rem 0.75rem 1rem; + color: #101820; + align-self: center; + line-height: 1.25; + position: static; } -@media only screen and (min-width: 48em) { - .tasks-card { - padding: 25px 25px 25px 25px; - } +.theme-dark .toast__message p { + color: #FFFFFF; } -.tasks-card .icon-container { - display: flex; - flex-direction: column; - align-items: flex-start; - flex: 0 1 auto; - margin: 0 16px 0 0; +.toast__message p strong, +.toast__message p b { + font-family: "Roboto", sans-serif; + font-size: 16px; + font-size: 1rem; + line-height: 1.5; + font-weight: normal; + color: #525252; + color: #101820; + font-weight: 700; + color: #101820; } -.tasks-card .icon-container img { - width: 26px; - height: auto; +.theme-dark .toast__message p strong, +.theme-dark .toast__message p b { + color: #FFFFFF; } -.tasks-card .icon-container .day { - margin: 0; - background-color: #006CE0; - border-radius: 50%; - width: 26px; - height: 26px; - text-align: center; - line-height: 26px; +.theme-dark .toast__message p strong, +.theme-dark .toast__message p b { color: #FFFFFF; - font-size: 16px; - letter-spacing: -2px; - text-indent: -2px; } -.tasks-card .icon-container .month { - width: 26px; - font-size: 10px; - line-height: 10px; - margin: 6px 0 0 0; - color: #006CE0; - text-transform: uppercase; - text-align: center; +.toast__message button.close { + width: 14px; + width: 0.875rem; + height: auto; + min-width: 14px; + min-width: 0.875rem; + content: ""; + position: absolute; + top: 0; + right: 0; + background-size: contain; + background-position: center; + background-repeat: no-repeat; + transition-property: transform, margin, background; + transition-duration: 300ms; + transition-timing-function: ease; + background-size: 14px; + background-size: 0.875rem; + padding: 0 16px 0 8px; + padding: 0 1rem 0 0.5rem; + background-position: 8px center; + background-position: 0.5rem center; + background-image: url("styles/resources/assets/icons/Close @16.svg"); + background-repeat: no-repeat; + position: static; + box-sizing: content-box; + border: 0 none; } -@media only screen and (min-width: 48em) { - .tasks-card .icon-container { - margin: 0 25px 0 0; - } - .tasks-card .icon-container img { - width: 40px; - } - .tasks-card .icon-container .day { - width: 40px; - height: 40px; - line-height: 40px; - font-size: 23px; - } - .tasks-card .icon-container .month { - width: 40px; - font-size: 13px; - line-height: 1; - } +.toast__message button.close:focus { + outline-color: #000000; } -.tasks-card .content-container { - display: flex; - flex-direction: column; - flex: 1 1 auto; +.toast__message.is-error { + background: #dc3548; } -@media only screen and (min-width: 48em) { - .tasks-card .content-container { - flex-direction: row; - } +.toast__message.is-error .toast__icon { + background-image: url("styles/resources/assets/icons/icon-warning-white.svg"); + background-color: #af2939; } -.tasks-card .content-container .details-container { - display: flex; - flex-direction: column; - justify-content: flex-start; - flex: 1 1 auto; +.toast__message.is-information { + background: #016ce0; } -.tasks-card .content-container .details-container p { - margin: 0; - line-height: 1.15; -} -.tasks-card .content-container .details-container .name { - color: #000000; - text-align: left; - margin: 0 0 3px 0; - font-size: 16px; - font-weight: bold; -} -.tasks-card .content-container .details-container .description { - text-align: left; - margin: 10px 0 0 0; - font-size: 14px; - line-height: 1.25; -} -.tasks-card .content-container .details-container .status-container { - display: flex; - align-items: center; +.toast__message.is-information .toast__icon { + background-image: url("styles/resources/assets/icons/icon-info-white.svg"); + background-color: #0055b3; } -.tasks-card .content-container .details-container .status-container p.status { - font-size: 12px; - font-weight: bold; +.toast__message.is-success { + background: #A7D0B1; } -.tasks-card .content-container .details-container .status-container p.status.due-now { - color: #B36000; +.toast__message.is-success .toast__icon { + background-image: url("styles/resources/assets/icons/icon-check-circle-white.svg"); + background-color: #1A9F50; } -.tasks-card .content-container .details-container .status-container p.status.overdue { - color: #DC3548; + +.toast__icon { + width: 44px; + width: 2.75rem; + height: auto; + min-width: 44px; + min-width: 2.75rem; + content: ""; + position: absolute; + top: 0; + left: 0; + background-size: contain; + background-position: center; + background-repeat: no-repeat; + transition-property: transform, margin; + transition-duration: 300ms; + transition-timing-function: ease; + background-size: 22px; + background-size: 1.375rem; + border-radius: 5px 0 0 5px; + border-radius: 0.3125rem 0 0 0.3125rem; + background-position: center center; + position: static; } -.tasks-card .content-container .details-container .status-container p.status.not-due { - color: #006CE0; + +.top-navigation-bar { + display: none; + align-items: left; + justify-content: center; + background: #FFFFFF; + color: #000000; + width: 100%; + border-bottom: 1px solid #D9D9D6; } -.tasks-card .content-container .details-container .status-container p.status ~ .date:before { - margin: 0 4px 0 4px; - content: "•"; +.top-navigation-bar__list { + width: 100%; + list-style-type: none; + margin: 0; + padding: 0 20px; + display: flex; + flex-wrap: row wrap; } -.tasks-card .content-container .details-container .status-container .date { - font-size: 12px; +@media only screen and (min-width: 64em) { + .top-navigation-bar__list { + width: 1024px; + } } -.tasks-card .content-container .action-container { - flex: 0 1 auto; - display: flex; - justify-content: space-between; - margin: 16px 0 0 0; - padding: 16px 0 0 0; - border-top: 1px solid #DDDDDD; +@media only screen and (min-width: 77.75em) { + .top-navigation-bar__list { + width: 1244px; + } } -@media only screen and (min-width: 48em) { - .tasks-card .content-container .action-container { - margin: 0 0 0 20px; - padding: 0 0 0 20px; - justify-content: center; - border-left: 1px solid #DDDDDD; - border-top: none; - flex-direction: column; +@media only screen and (min-width: 88.125em) { + .top-navigation-bar__list { + width: 1360px; } } -.tasks-card .content-container .action-container .action { +.top-navigation-bar__item { + display: inline-block; white-space: nowrap; - display: flex; - flex-direction: row; -} -.tasks-card .content-container .action-container .action p { - font-size: 14px; - font-weight: 500; - text-align: left; - line-height: 1; - color: #006CE0; - margin: 0 4px 0 0; + background-color: #FFFFFF; + margin-right: 4px; } -.tasks-card .content-container .action-container .action img { - width: 16px; - height: auto; +.top-navigation-bar__item a { position: relative; - top: -2px; + color: #000000; + font-size: 18px; + font-weight: 550; + text-decoration: none; + display: block; + padding: 16px; } -.tasks-card .content-container .action-container .agency-name { - text-align: left; - font-size: 12px; - color: #525252; - line-height: 1; +.top-navigation-bar__item a:hover, .top-navigation-bar__item a:focus { + outline: none; + background-color: #CCF0F9; } -.tasks-card.more-tasks { - align-items: center; +.top-navigation-bar__item a:hover ::after, .top-navigation-bar__item a:focus ::after { + content: ""; + display: block; + position: absolute; + left: 0; + bottom: 0; + height: 4px; + background: #183052; + width: 100%; } -.tasks-card.more-tasks .content-container { - display: flex; - justify-content: space-between; +.top-navigation-bar__item a:focus { + outline: 2px solid #183052; + outline-offset: -2px; } -.tasks-card.more-tasks .content-container p { - margin: 0; +.top-navigation-bar__item-active a ::after { + content: ""; + display: block; + position: absolute; + left: 0; + bottom: 0; + height: 4px; + background: #000000; + width: 100%; } -.tasks-card.more-tasks .content-container .name { - color: #000000; - font-weight: bold; - text-align: left; + +@media only screen and (min-width: 1024px) { + .top-navigation-bar { + display: flex; + } + .top-navigation-bar__list { + padding: 0 40px; + } } -.tasks-card.more-tasks .content-container .action { - display: flex; +.translation-widget-mobile { + width: 100%; + border-top: 1px solid rgba(255, 255, 255, 0.3); + position: sticky; + position: -webkit-sticky; + /* stylelint-disable-line */ + /* Translation Widget Mobile Device Fixes. + classes are added via NavOffscreen.js */ } -.tasks-card.more-tasks .content-container .action p { - color: #006CE0; +.translation-widget-mobile.is-chrome { + bottom: auto; } -.tasks-card.more-tasks .content-container .action img { - padding-left: 10px; +.translation-widget-mobile.is-phone.is-ios { + position: -webkit-sticky; + /* stylelint-disable-line */ + cursor: pointer; } - -.no-tasks-section { - display: flex; - align-items: center; - background-color: transparent; - flex-direction: column; - box-shadow: none; - padding: 0; +.translation-widget-mobile.is-phone.is-ios.is-open { + position: absolute; } -.no-tasks-section.dashboard { - flex-direction: row; - background-color: #FFFFFF; - box-shadow: 0 0 2pt rgba(17, 17, 18, 0.2509803922); - border-radius: 5pt; - padding: 26px; +@media only screen and (-webkit-min-device-pixel-ratio: 1) { + .translation-widget-mobile.is-phone.is-ios { + bottom: 60px; + } } -.no-tasks-section.dashboard img { - margin-right: 20px; +@media only screen and (-webkit-min-device-pixel-ratio: 2) { + .translation-widget-mobile.is-phone.is-ios { + bottom: 80px; + } } -.no-tasks-section.dashboard p { - margin: 0; +@media only screen and (-webkit-min-device-pixel-ratio: 2) and (min-width: 414px) and (max-width: 896px) { + .translation-widget-mobile.is-phone.is-ios { + bottom: 120px; + } } -.no-tasks-section img { - width: 45px; - height: auto; +@media only screen and (-webkit-min-device-pixel-ratio: 3) { + .translation-widget-mobile.is-phone.is-ios { + bottom: 120px; + } } -.no-tasks-section p { - color: #525252; - font-size: 16px; - font-weight: 300px; - margin: 20px 0 0 0; +.translation-widget-mobile.is-phone.is-android { + bottom: 60px; } - -.loading-section { - display: flex; - flex-direction: column; +@media only screen and (min-width: 753px) and (max-width: 1037px) { + .translation-widget-mobile.is-phone.is-android { + bottom: 100px; + } } -.loading-section:not(.dashboard) { - align-items: center; +@media only screen and (min-width: 768px) and (max-width: 1280px) { + .translation-widget-mobile.is-phone.is-android { + bottom: 80px; + } } -.loading-section .loading-spinner { - width: 96px; - width: 6rem; - height: 96px; - height: 6rem; - min-width: 96px; - min-width: 6rem; - display: block; - height: 96px; - width: 96px; - background-size: contain; - background-position: center; - background-repeat: no-repeat; - background-image: url("styles/resources/assets/icons/spinner.svg"); - margin: 13px 28px 0; +.translation-widget-mobile.is-phone.is-samsung { + bottom: 0; } -@media only screen and (min-width: 77.75em) { - .loading-section .loading-spinner { - width: 96px; - width: 6rem; - height: 96px; - height: 6rem; - min-width: 96px; - min-width: 6rem; - display: block; - height: 96px; - width: 96px; - background-size: contain; - background-position: center; - background-repeat: no-repeat; - margin: 17px 35px 0; - } +.translation-widget-mobile.is-ipad { + position: -webkit-sticky; + /* stylelint-disable-line */ + cursor: pointer; + bottom: 40px; } -.loading-section.dashboard { - background-color: #FFFFFF; - border-radius: 5pt; - padding: 18px 14px 18px 14px; +.translation-widget-mobile.is-ipad.is-chrome { + bottom: 0; } -.loading-section.dashboard .skeleton__title { - width: 70%; - font-size: 32px; - padding-bottom: 8px; +.translation-widget-mobile.search-active { + display: none; } -@media only screen and (min-width: 48em) { - .loading-section.dashboard .skeleton__title { - width: 30%; - } +.translation-widget-mobile strong { + font-weight: 400; } -.loading-section.dashboard .skeleton__paragraph { +.translation-widget-mobile.is-open { + display: block; + background: #183052; + z-index: 800; + position: absolute; + top: 0; +} +.translation-widget-mobile.is-open .nav__link strong { + font-weight: 500; +} +.translation-widget-mobile .nav__link { + display: flex !important; + flex-flow: row; + align-items: center; width: 100%; - font-size: 16px; - padding: 8px 0 8px 0; + font-size: 22px; + height: 80px; + position: relative; + background: #183052; + cursor: pointer; } -@media only screen and (min-width: 48em) { - .loading-section.dashboard .skeleton__paragraph { - width: 75%; - } - .loading-section.dashboard .skeleton__paragraph.paragraph-2 { - display: none; - } +.translation-widget-mobile .nav__link:focus { + outline-offset: -7.5px; + outline: 2px #183052 solid; } -.loading-section.dashboard p { - margin: 0; +.translation-widget-mobile .nav__link.is-open { + font-weight: 400 !important; + box-shadow: 5px 0 0 0 #FFFFFF inset !important; } - -.DI-services p { - font-family: "Roboto", sans-serif; - color: #525252; - font-size: 18px; - line-height: 30px; - margin: 20px 0; - color: #101820; - max-width: 770px; - margin-bottom: 15px; - margin-top: 5px; +.translation-widget-mobile .nav__link::before { + background-image: url("styles/resources/assets/icons/chevron-down-white.svg") !important; } -.theme-dark .DI-services p { - color: #FFFFFF; +.translation-widget-mobile .nav__link .globe-icon { + width: 24px; + width: 1.5rem; + height: 24px; + height: 1.5rem; + min-width: 24px; + min-width: 1.5rem; + display: block; + background-size: contain; + background-position: center; + background-repeat: no-repeat; + margin-right: 15px; } -.DI-services p b, -.DI-services p strong { - color: #101820; +.translation-widget-mobile .subnav__link.is-active { + border-left: 5px solid #006CE0; } -.DI-services__list { +.translation-widget-mobile .subnav__link.is-active span { + font-weight: 600; +} +.translation-widget-mobile .subnav__link:focus, .translation-widget-mobile .subnav__link:hover { + cursor: pointer; +} +.translation-widget-mobile .subnav__link:focus span, .translation-widget-mobile .subnav__link:hover span { + font-weight: 600; +} +.translation-widget-mobile .subnav__link:focus { + outline-offset: -7.5px; + outline: 2px #183052 solid; +} + +.translation-widget { display: flex; - flex-flow: column wrap; - padding: 0; + flex-flow: column nowrap; + position: relative; +} +.translation-widget.footer { + padding-top: 0; +} +.translation-widget.footer .translation-widget__button { + max-width: 240px; + width: 100%; + height: 46px; + background: transparent; } @media only screen and (min-width: 48em) { - .DI-services__list { - flex-flow: column wrap; + .translation-widget.footer .translation-widget__button { + width: 80%; } } -.DI-services__list--item { - display: flex; - padding: 7px; +.translation-widget.footer .translation-widget__button .chevron-container { + position: absolute; + right: 12px; +} +.translation-widget.footer .translation-widget__button .globe-icon { + margin: 0 12px 0 6px; +} +.translation-widget.footer .translation-widget__button:focus { + outline-offset: 5px; +} +.translation-widget.footer .language-options { + width: 100%; + max-width: 240px; + right: auto; } @media only screen and (min-width: 48em) { - .DI-services__list--item { - width: 90%; + .translation-widget.footer .language-options { + width: 80%; } } @media only screen and (min-width: 64em) { - .DI-services__list--item { - width: 90%; + .translation-widget.footer .language-options { + width: 100%; + min-width: 240px; } } -@media only screen and (min-width: 77.75em) { - .DI-services__list--item { - width: 33.33%; - } +.translation-widget.footer .language-options li:focus { + outline-offset: -5px; } -@media only screen and (min-width: 88.125em) { - .DI-services__list--item { - width: 25%; +.translation-widget.footer .language-options li:first-of-type { + border-radius: 5px 5px 0 0; +} +.translation-widget.footer .language-options li:last-of-type { + border-radius: 0 0 5px 5px; +} +.translation-widget.header_desktop { + display: none; + right: 12px; + z-index: 700; + margin: 0 0 0 10px; +} +@media only screen and (min-width: 40em) { + .translation-widget.header_desktop { + display: flex; } } -.DI-services__list--item--skeleton { - box-shadow: none; +@media only screen and (min-width: 77.75em) { + .translation-widget.header_desktop { + right: 24px; + } } -.DI-services__list--item .list-link { +.translation-widget.header_desktop .translation-widget__button { display: flex; - padding: 0 30px; - align-items: center; - background: #FFFFFF; - height: 100px; width: 100%; - text-decoration: none; - border-radius: 5px; - box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.25); + border-radius: 0; + border-width: 0; + padding: 0; } -.DI-services__list--item .list-link__wrapper-block { - display: flex; +.translation-widget.header_desktop .translation-widget__button:focus, .translation-widget.header_desktop .translation-widget__button:active { + outline: unset; + outline-offset: unset; } -.DI-services__list--item .list-link__wrapper-block-external { - display: flex; - margin-left: auto; +.translation-widget.header_desktop .translation-widget__button.is-open { + border-radius: 0; + position: relative; } -.DI-services__list--item .list-link:hover .list-link__external { - transform: translate(3px, -3px); +.translation-widget.header_desktop .translation-widget__button span { + display: block; + position: relative; } -.DI-services__list--item .list-link__icon { - height: 40px; - width: 40px; - min-height: 40px; - min-width: 40px; +.translation-widget.header_desktop .translation-widget__button span strong { + font-weight: 500; } -.DI-services__list--item .list-link__title { - font-family: "Roboto", sans-serif; - color: #525252; - font-size: 18px; - line-height: 30px; - margin: 20px 0; - font-weight: 700; - color: #333333; - line-height: 24px; - padding: 0 20px 0 20px; +.translation-widget.header_desktop .language-options { + position: absolute; + top: 45px; + left: 6px; + bottom: 0; + list-style-type: none; + border-radius: 4px; + height: fit-content; + padding: 0; + overflow: hidden; + width: calc(100% + 15px); } -.theme-dark .DI-services__list--item .list-link__title { +.translation-widget.header_desktop .language-options li { + border-radius: 0; +} +.translation-widget.header_desktop .language-options li:focus { + outline-offset: -5px; + outline: 2px #183052 solid; +} +.translation-widget p { + padding: 0; + margin: 0; color: #FFFFFF; + font-weight: bold; } -.DI-services__list--item .list-link__external { - transition: transform 150ms ease-out; - backface-visibility: hidden; - height: 32px; - width: 32px; - min-height: 32px; - min-width: 32px; - background-color: rgba(0, 121, 202, 0.1); +.translation-widget__button { display: flex; + position: relative; + flex-flow: row nowrap; align-items: center; - justify-content: center; - background-repeat: no-repeat; + border: 1px solid #FFFFFF; border-radius: 5px; - margin-left: auto; -} -.DI-services__list--item .list-link__external--cta { - height: 18px; - width: 18px; - min-height: 18px; - min-width: 18px; + background: #183052; + text-align: left; + color: #FFFFFF; + white-space: nowrap; } -.DI-services__list--item .list-link--skeleton { +.translation-widget__button .globe-icon { + width: 20px; + width: 1.25rem; + height: 20px; + height: 1.25rem; + min-width: 20px; + min-width: 1.25rem; display: block; - padding: 30px 20px; - box-shadow: none; -} -.DI-services a { - margin-top: 16px; - margin-right: 16px; -} - -@keyframes ShowToasts { - from { - opacity: 0; - transform: translateY(30px); - } - to { - opacity: 1; - transform: translateY(0); - } -} -@keyframes HideToasts { - from { - opacity: 1; - transform: translateY(0); - } - to { - opacity: 0; - transform: translateY(30px); - } -} -.toast__container { - position: fixed; - bottom: 40px; - left: 20px; - z-index: 1100; - width: fit-content; - max-width: calc(100vw - 40px); - visibility: hidden; - transition: visibility 0s linear 150ms, opacity 150ms linear, transform 150ms ease; - animation: HideToasts 100ms; - animation-fill-mode: forwards; + background-size: contain; + background-position: center; + background-repeat: no-repeat; + margin: 0 12px 0 6px; + padding-bottom: 1px; } -@media only screen and (min-width: 64em) { - .toast__container { - left: 40px; - max-width: 770px; - } +.translation-widget__button .chevron-container { + margin-left: 12px; + transition-property: transform; + transition-duration: 150ms; + transition-timing-function: ease; + will-change: transform; } -.toast__container.is-visible { - transition: visibility 0s linear, opacity 150ms linear, transform 150ms ease; - visibility: visible; - animation: ShowToasts 150ms; - animation-fill-mode: forwards; +.translation-widget__button .chevron-container.up { + transform: rotate(180deg); + transition: transform 150ms ease, opacity 150ms ease, visibility 0s linear 0s; } -.toast__message { - position: relative; - display: flex; - flex-wrap: wrap; - min-height: 60px; - padding: 15px 55px 15px 80px; - background: #006CE0; - color: #FFFFFF; - border-radius: 5px; - box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.25); - transition-property: opacity, transform; - transition-duration: 150ms; +.translation-widget__button.is-open { + border-radius: 0 0 5px 5px; } -@media only screen and (min-width: 64em) { - .toast__message { - padding-top: 20px; - padding-bottom: 20px; - } +.translation-widget__button:focus { + outline-color: #FFFFFF; + z-index: 401; } -.toast__message button.close { - content: ""; +.translation-widget .language-options { position: absolute; - top: 0; + width: 100%; + bottom: 24px; + left: 0; right: 0; - width: 48px; - height: 100%; - background-size: contain; - background-position: center; - background-repeat: no-repeat; - transition-property: transform, margin, background; - transition-duration: 300ms; + z-index: 400; + margin: 10px auto 0; + box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.25); + text-align: left; + background: #FFFFFF; + transition-property: transform, opacity; + transition-duration: 150ms; transition-timing-function: ease; - background: url("styles/resources/assets/icons/icon-close-bold-white.svg") no-repeat; - background-size: 14px; - background-position: right 20px top 23px; + will-change: transform; + display: none; + max-height: 357px; } -.toast__message button.close:focus { - outline-color: #000000; +.translation-widget .language-options.visible { + transform: translateY(-20px); + transition: transform 150ms ease, opacity 150ms ease, visibility 0s linear 0s; + display: block; } -.toast__message p { +.translation-widget .language-options li { font-family: "Roboto", sans-serif; - color: #525252; font-size: 16px; - line-height: 24px; + font-size: 1rem; + line-height: 1.5; font-weight: normal; - color: #FFFFFF; - margin: 0; - align-self: center; + color: #525252; + color: #101820; + display: flex; + align-items: center; + height: 46px; + width: 100%; + padding: 0 0 0 24px; + text-decoration: none; + background-color: #FFFFFF; + transition: background-color 150ms ease; + z-index: 402; + position: relative; } -.theme-dark .toast__message p { +.theme-dark .translation-widget .language-options li { color: #FFFFFF; } -.toast__message p strong, -.toast__message p b { +.translation-widget .language-options li b, +.translation-widget .language-options li strong { font-family: "Roboto", sans-serif; - color: #525252; font-size: 16px; - line-height: 24px; + font-size: 1rem; + line-height: 1.5; font-weight: normal; + color: #525252; color: #101820; font-weight: 700; - color: #FFFFFF; } -.theme-dark .toast__message p strong, -.theme-dark .toast__message p b { +.theme-dark .translation-widget .language-options li b, +.theme-dark .translation-widget .language-options li strong { color: #FFFFFF; } -.theme-dark .toast__message p strong, -.theme-dark .toast__message p b { +.theme-dark .translation-widget .language-options li b, +.theme-dark .translation-widget .language-options li strong { color: #FFFFFF; } -.toast__message.is-error { - background: #DC3548; -} -.toast__message.is-information { - background: #006CE0; +.translation-widget .language-options li.is-active { + background-color: #EDF2F4; } -.toast__message.is-success { - background: #168845; +.translation-widget .language-options li.is-active span { + font-weight: 600; } -.toast__icon { - content: ""; +.translation-widget .language-options li .tick-container { position: absolute; - top: 0; - left: 0; - width: 60px; - height: 100%; + right: 15px; + top: 8px; +} +.translation-widget .language-options li .tick-container .tick-icon { + width: 24px; + width: 1.5rem; + height: 24px; + height: 1.5rem; + min-width: 24px; + min-width: 1.5rem; + display: block; background-size: contain; background-position: center; background-repeat: no-repeat; - transition-property: transform, margin; - transition-duration: 300ms; - transition-timing-function: ease; - background-color: rgba(0, 0, 0, 0.2); - background-size: 24px; - background-position: center top 17px; - border-radius: 5px 0 0 5px; - background-image: url("styles/resources/assets/icons/icon-info-white.svg"); } -.is-error .toast__icon { - background-image: url("styles/resources/assets/icons/icon-warning-white.svg"); +.translation-widget .language-options li:hover { + cursor: pointer; + background-color: #EDF2F4; } -.is-success .toast__icon { - background-image: url("styles/resources/assets/icons/icon-check-circle-white.svg"); +.translation-widget .language-options li:focus span, .translation-widget .language-options li:hover span { + text-decoration: underline; } -.top-navigation-bar { - display: none; - align-items: left; - justify-content: center; - background: #FFFFFF; - color: #000000; - width: 100%; - border-bottom: 1px solid #D9D9D6; +/** Buttons **/ +button:hover, button:focus { + cursor: pointer; } -.top-navigation-bar__list { - width: 100%; - list-style-type: none; - margin: 0; - padding: 0 20px; - display: flex; - flex-wrap: row wrap; +button:hover[disabled], button:hover.disabled, button:focus[disabled], button:focus.disabled { + cursor: not-allowed; + border-color: #A0A0A3; } -@media only screen and (min-width: 64em) { - .top-navigation-bar__list { - width: 1024px; - } + +.btn, +body mygov-dashboard-transition-modal button.btn, +body mygov-tasks-transition-modal button.btn, +.page-mygov-auth-account mygov-dashboard-transition-modal button.btn, +.page-mygov-auth-account mygov-tasks-transition-modal button.btn, +.un_link-confirmation__button { + padding: 16px 17px; + padding: 1rem 1.0625rem; + min-width: 160px; + min-width: 10rem; + border-radius: 5px; + border-radius: 0.3125rem; + border-width: 2px; + border-width: 0.125rem; + display: block; + position: relative; + font-weight: 500; + background: #006CE0; + color: #FFFFFF; + text-decoration: none; + text-align: center; + border-style: solid; + border-color: transparent; + transition-property: background, color, padding, margin; + transition-duration: 150ms; } -@media only screen and (min-width: 77.75em) { - .top-navigation-bar__list { - width: 1244px; +@media only screen and (min-width: 48em) { + .btn, +body mygov-dashboard-transition-modal button.btn, +body mygov-tasks-transition-modal button.btn, +.page-mygov-auth-account mygov-dashboard-transition-modal button.btn, +.page-mygov-auth-account mygov-tasks-transition-modal button.btn, +.un_link-confirmation__button { + display: inline-block; } } -@media only screen and (min-width: 88.125em) { - .top-navigation-bar__list { - width: 1360px; - } +.btn:hover, +.page-mygov-auth-account mygov-dashboard-transition-modal button.btn:hover, +.page-mygov-auth-account mygov-tasks-transition-modal button.btn:hover, +.un_link-confirmation__button:hover { + background: #183052; } -.top-navigation-bar__item { - display: inline-block; - white-space: nowrap; - background-color: #FFFFFF; - margin-right: 4px; +.btn:focus, +.page-mygov-auth-account mygov-dashboard-transition-modal button.btn:focus, +.page-mygov-auth-account mygov-tasks-transition-modal button.btn:focus, +.un_link-confirmation__button:focus { + outline-width: 3px; + outline-width: 0.1875rem; + outline-style: solid; + outline-color: #254A7E; } -.top-navigation-bar__item a { - position: relative; - color: #000000; - font-size: 18px; - font-weight: 550; - text-decoration: none; - display: block; - padding: 16px; +.btn.mygov, +.page-mygov-auth-account mygov-dashboard-transition-modal button.mygov.btn, +.page-mygov-auth-account mygov-tasks-transition-modal button.mygov.btn, +.mygov.un_link-confirmation__button { + background: #026540; } -.top-navigation-bar__item a:hover, .top-navigation-bar__item a:focus { - outline: none; - background-color: #CCF0F9; +.btn.mygov:focus, +.mygov.un_link-confirmation__button:focus { + background: #0061C8; } -.top-navigation-bar__item a:hover ::after, .top-navigation-bar__item a:focus ::after { - content: ""; - display: block; - position: absolute; - left: 0; - bottom: 0; - height: 4px; - background: #183052; - width: 100%; +.btn.is-loading, +.page-mygov-auth-account mygov-dashboard-transition-modal button.is-loading.btn, +.page-mygov-auth-account mygov-tasks-transition-modal button.is-loading.btn, +.is-loading.un_link-confirmation__button { + padding: 16px 17px 16px 45px; + padding: 1rem 1.0625rem 1rem 2.8125rem; + pointer-events: none; } -.top-navigation-bar__item a:focus { - outline: 2px solid #183052; - outline-offset: -2px; +@keyframes rotate { + 0% { + transform: rotate(0); + } + 100% { + transform: rotate(360deg); + } } -.top-navigation-bar__item-active a ::after { +.btn.is-loading::before, +.page-mygov-auth-account mygov-dashboard-transition-modal button.is-loading.btn::before, +.page-mygov-auth-account mygov-tasks-transition-modal button.is-loading.btn::before, +.is-loading.un_link-confirmation__button::before { + width: 26px; + width: 1.625rem; + height: 26px; + height: 1.625rem; + min-width: 26px; + min-width: 1.625rem; content: ""; - display: block; position: absolute; + top: 0; left: 0; - bottom: 0; - height: 4px; - background: #000000; - width: 100%; + background-size: contain; + background-position: center; + background-repeat: no-repeat; + transition-property: transform, margin; + transition-duration: 300ms; + transition-timing-function: ease; + top: calc(50% - 14px); + top: calc(50% - 0.875rem); + left: calc(50% - 55px); + left: calc(50% - 3.4375rem); + background-image: url("styles/resources/assets/icons/spinner-button.svg"); + animation: rotate 1s linear infinite; } - -@media only screen and (min-width: 1024px) { - .top-navigation-bar { - display: flex; - } - .top-navigation-bar__list { - padding: 0 40px; +@media only screen and (min-width: 48em) { + .btn.is-loading::before, +.page-mygov-auth-account mygov-dashboard-transition-modal button.is-loading.btn::before, +.page-mygov-auth-account mygov-tasks-transition-modal button.is-loading.btn::before, +.is-loading.un_link-confirmation__button::before { + left: 25px; + left: 1.5625rem; } } -.translation-widget-mobile { - width: 100%; - border-top: 1px solid rgba(255, 255, 255, 0.3); - position: sticky; - position: -webkit-sticky; - /* stylelint-disable-line */ - /* Translation Widget Mobile Device Fixes. - classes are added via NavOffscreen.js */ -} -.translation-widget-mobile.is-chrome { - bottom: auto; +.btn.mygov-green, +.page-mygov-auth-account mygov-dashboard-transition-modal button.mygov-green.btn, +.page-mygov-auth-account mygov-tasks-transition-modal button.mygov-green.btn, +.mygov-green.un_link-confirmation__button { + background: #026540; } -.translation-widget-mobile.is-phone.is-ios { - position: -webkit-sticky; - /* stylelint-disable-line */ - cursor: pointer; +.btn.mygov-green span::after, +.mygov-green.un_link-confirmation__button span::after { + backface-visibility: none; } -.translation-widget-mobile.is-phone.is-ios.is-open { - position: absolute; +.btn.mygov-green:hover, +.mygov-green.un_link-confirmation__button:hover { + background: #78C433; + color: #101820; } -@media only screen and (-webkit-min-device-pixel-ratio: 1) { - .translation-widget-mobile.is-phone.is-ios { - bottom: 60px; - } +.btn.mygov-green:hover span::after, +.mygov-green.un_link-confirmation__button:hover span::after { + filter: invert(1); } -@media only screen and (-webkit-min-device-pixel-ratio: 2) { - .translation-widget-mobile.is-phone.is-ios { - bottom: 80px; - } +.btn.outline, +.page-mygov-auth-account mygov-dashboard-transition-modal button.outline.btn, +.page-mygov-auth-account mygov-tasks-transition-modal button.outline.btn, +.outline.un_link-confirmation__button { + padding: 15px 16px; + padding: 0.9375rem 1rem; + border-width: 2px; + border-width: 0.125rem; + color: #006CE0; + background: #FFFFFF; + border-style: solid; + border-color: #006CE0; } -@media only screen and (-webkit-min-device-pixel-ratio: 2) and (min-width: 414px) and (max-width: 896px) { - .translation-widget-mobile.is-phone.is-ios { - bottom: 120px; - } +.btn.outline:hover, .btn.outline:focus, +.outline.un_link-confirmation__button:hover, +.outline.un_link-confirmation__button:focus { + text-decoration: underline; + color: #313131; + border-color: #313131; } -@media only screen and (-webkit-min-device-pixel-ratio: 3) { - .translation-widget-mobile.is-phone.is-ios { - bottom: 120px; - } +.btn.outline[disabled], .btn.outline.disabled, +.outline[disabled].un_link-confirmation__button, +.outline.disabled.un_link-confirmation__button { + background: #F5F5F5; + border-color: #A0A0A3; + color: #A0A0A3; + cursor: not-allowed; } -.translation-widget-mobile.is-phone.is-android { - bottom: 60px; +.btn.secondary, .btn.cmp-feature-teaser__action-link, +.page-mygov-auth-account mygov-dashboard-transition-modal button.secondary.btn, +.page-mygov-auth-account mygov-tasks-transition-modal button.secondary.btn, +.secondary.un_link-confirmation__button, +.page-mygov-auth-account mygov-dashboard-transition-modal button.cmp-feature-teaser__action-link.btn, +.page-mygov-auth-account mygov-tasks-transition-modal button.cmp-feature-teaser__action-link.btn, +.cmp-feature-teaser__action-link.un_link-confirmation__button { + padding: 15px 16px; + padding: 0.9375rem 1rem; + border-width: 2px; + border-width: 0.125rem; + color: #006CE0; + background: #FFFFFF; + border-style: solid; + border-color: #006CE0; } -@media only screen and (min-width: 753px) and (max-width: 1037px) { - .translation-widget-mobile.is-phone.is-android { - bottom: 100px; - } +.btn.secondary:hover, .btn.cmp-feature-teaser__action-link:hover, .btn.secondary:focus, .btn.cmp-feature-teaser__action-link:focus, +.secondary.un_link-confirmation__button:hover, +.cmp-feature-teaser__action-link.un_link-confirmation__button:hover, +.secondary.un_link-confirmation__button:focus, +.cmp-feature-teaser__action-link.un_link-confirmation__button:focus { + color: #313131; + text-decoration: underline; + border-color: #313131; } -@media only screen and (min-width: 768px) and (max-width: 1280px) { - .translation-widget-mobile.is-phone.is-android { - bottom: 80px; - } +.btn.secondary[disabled], .btn[disabled].cmp-feature-teaser__action-link, .btn.secondary.disabled, .btn.disabled.cmp-feature-teaser__action-link, +.secondary[disabled].un_link-confirmation__button, +[disabled].cmp-feature-teaser__action-link.un_link-confirmation__button, +.secondary.disabled.un_link-confirmation__button, +.disabled.cmp-feature-teaser__action-link.un_link-confirmation__button { + background: #F5F5F5; + border-color: #A0A0A3; + color: #A0A0A3; + cursor: not-allowed; } -.translation-widget-mobile.is-phone.is-samsung { - bottom: 0; -} -.translation-widget-mobile.is-ipad { - position: -webkit-sticky; - /* stylelint-disable-line */ - cursor: pointer; - bottom: 40px; +.btn.tertiary, +.page-mygov-auth-account mygov-dashboard-transition-modal button.tertiary.btn, +.page-mygov-auth-account mygov-tasks-transition-modal button.tertiary.btn, +.tertiary.un_link-confirmation__button { + padding: 15px 16px; + padding: 0.9375rem 1rem; + border-width: 2px; + border-width: 0.125rem; + color: #006CE0; + background: #FFFFFF; + border-style: solid; + border-color: #D1D2D3; } -.translation-widget-mobile.is-ipad.is-chrome { - bottom: 0; +.btn.tertiary:hover, .btn.tertiary:focus, +.tertiary.un_link-confirmation__button:hover, +.tertiary.un_link-confirmation__button:focus { + background-color: #F5F9FE; } -.translation-widget-mobile.search-active { - display: none; +.btn.tertiary[disabled], .btn.tertiary.disabled, +.tertiary[disabled].un_link-confirmation__button, +.tertiary.disabled.un_link-confirmation__button { + background: #F5F5F5; + border-color: #A0A0A3; + color: #A0A0A3; + cursor: not-allowed; } -.translation-widget-mobile strong { +.btn.icon span, +.page-mygov-auth-account mygov-dashboard-transition-modal button.icon.btn span, +.page-mygov-auth-account mygov-tasks-transition-modal button.icon.btn span, +.icon.un_link-confirmation__button span { + padding-right: 27px; + padding-right: 1.6875rem; + position: relative; font-weight: 400; } -.translation-widget-mobile.is-open { - display: block; - background: #183052; - z-index: 800; +.btn.icon span::after, +.icon.un_link-confirmation__button span::after { + width: 18px; + width: 1.125rem; + height: 18px; + height: 1.125rem; + min-width: 18px; + min-width: 1.125rem; + content: ""; position: absolute; top: 0; + right: 0; + background-size: contain; + background-position: center; + background-repeat: no-repeat; + transition-property: transform, margin, background; + transition-duration: 300ms; + transition-timing-function: ease; + transition: all 150ms; } -.translation-widget-mobile.is-open .nav__link strong { - font-weight: 500; +.btn.icon span.btn-icon-filter::after, +.icon.un_link-confirmation__button span.btn-icon-filter::after { + background-image: url("styles/resources/assets/icons/icon-filter-white.svg"); } -.translation-widget-mobile .nav__link { - display: flex !important; - flex-flow: row; - align-items: center; - width: 100%; - font-size: 22px; - height: 80px; - position: relative; - background: #183052; - cursor: pointer; +.btn.icon span.btn-icon-arrow::after, +.icon.un_link-confirmation__button span.btn-icon-arrow::after { + background-image: url("styles/resources/assets/icons/arrow-right-white.svg"); } -.translation-widget-mobile .nav__link:focus { - outline-offset: -7.5px; - outline: 2px #183052 solid; +.btn.icon span.btn-icon-external-link::after, +.icon.un_link-confirmation__button span.btn-icon-external-link::after { + background-image: url("styles/resources/assets/icons/icon-external-link-white.svg"); } -.translation-widget-mobile .nav__link.is-open { - font-weight: 400 !important; - box-shadow: 5px 0 0 0 #FFFFFF inset !important; +.btn[disabled], .btn.disabled, +.page-mygov-auth-account mygov-dashboard-transition-modal button[disabled].btn, +.page-mygov-auth-account mygov-tasks-transition-modal button[disabled].btn, +[disabled].un_link-confirmation__button, +.page-mygov-auth-account mygov-dashboard-transition-modal button.disabled.btn, +.page-mygov-auth-account mygov-tasks-transition-modal button.disabled.btn, +.disabled.un_link-confirmation__button { + background: var(--grey1c-100); + border-color: var(--grey1c-100); + color: #76797c; + cursor: not-allowed; + pointer-events: none; } -.translation-widget-mobile .nav__link::before { - background-image: url("styles/resources/assets/icons/chevron-down-white.svg") !important; +.btn.loading, +.page-mygov-auth-account mygov-dashboard-transition-modal button.loading.btn, +.page-mygov-auth-account mygov-tasks-transition-modal button.loading.btn, +.loading.un_link-confirmation__button { + text-indent: -9999px; + text-indent: -624.9375rem; + background-size: 30px; + background-size: 1.875rem; + background: url("styles/resources/assets/icons/spinner.svg") no-repeat; + background-position: center; + border-color: #A0A0A3; + pointer-events: none; } -.translation-widget-mobile .nav__link .globe-icon { - width: 24px; - width: 1.5rem; - height: 24px; - height: 1.5rem; - min-width: 24px; - min-width: 1.5rem; +.btn.loading[disabled], .btn.loading.disabled, +.loading[disabled].un_link-confirmation__button, +.loading.disabled.un_link-confirmation__button { + text-indent: -9999px; + text-indent: -624.9375rem; + background-size: 30px; + background-size: 1.875rem; + background: url("styles/resources/assets/icons/spinner.svg") no-repeat; + background-position: center; +} +.btn.close, +.page-mygov-auth-account mygov-dashboard-transition-modal button.close.btn, +.page-mygov-auth-account mygov-tasks-transition-modal button.close.btn, +.close.un_link-confirmation__button { + height: 30px; + height: 1.875rem; + width: 30px; + width: 1.875rem; + margin: 0; + padding: 0; + min-width: auto; + background: transparent; +} +.btn.close i, +.page-mygov-auth-account mygov-dashboard-transition-modal button.close.btn i, +.page-mygov-auth-account mygov-tasks-transition-modal button.close.btn i, +.close.un_link-confirmation__button i { + width: 30px; + width: 1.875rem; + height: 30px; + height: 1.875rem; + min-width: 30px; + min-width: 1.875rem; display: block; - height: 24px; - width: 24px; background-size: contain; background-position: center; background-repeat: no-repeat; - margin-right: 15px; -} -.translation-widget-mobile .subnav__link.is-active { - border-left: 5px solid #006CE0; -} -.translation-widget-mobile .subnav__link.is-active span { - font-weight: 600; + background-image: url("styles/resources/assets/icons/icon-close-black.svg"); } -.translation-widget-mobile .subnav__link:focus, .translation-widget-mobile .subnav__link:hover { - cursor: pointer; +.btn.toggle, +.page-mygov-auth-account mygov-dashboard-transition-modal button.toggle.btn, +.page-mygov-auth-account mygov-tasks-transition-modal button.toggle.btn, +.toggle.un_link-confirmation__button { + padding: 0 25px 0 3px; + padding: 0 1.5625rem 0 0.1875rem; + min-height: 20px; + min-height: 1.25rem; + display: block; + margin: 0; + height: auto; + width: auto; + background: transparent; + color: #006CE0; + min-width: auto; } -.translation-widget-mobile .subnav__link:focus span, .translation-widget-mobile .subnav__link:hover span { - font-weight: 600; +.btn.toggle::after, +.page-mygov-auth-account mygov-dashboard-transition-modal button.toggle.btn::after, +.page-mygov-auth-account mygov-tasks-transition-modal button.toggle.btn::after, +.toggle.un_link-confirmation__button::after { + width: 15px; + width: 0.9375rem; + height: 15px; + height: 0.9375rem; + min-width: 15px; + min-width: 0.9375rem; + content: ""; + position: absolute; + top: 0; + right: 0; + background-size: contain; + background-position: center; + background-repeat: no-repeat; + transition-property: transform, margin, background; + transition-duration: 300ms; + transition-timing-function: ease; + top: 2px; + top: 0.125rem; + background-image: url("styles/resources/assets/icons/chevron-down.svg"); + transition-property: none; } -.translation-widget-mobile .subnav__link:focus { - outline-offset: -7.5px; - outline: 2px #183052 solid; +.btn.toggle.is-expanded::after, +.toggle.is-expanded.un_link-confirmation__button::after { + width: 15px; + width: 0.9375rem; + height: 15px; + height: 0.9375rem; + min-width: 15px; + min-width: 0.9375rem; + content: ""; + position: absolute; + top: 0; + right: 0; + background-size: contain; + background-position: center; + background-repeat: no-repeat; + transition-property: transform, margin, background; + transition-duration: 300ms; + transition-timing-function: ease; + top: 2px; + top: 0.125rem; + background-image: url("styles/resources/assets/icons/chevron-up.svg"); + transition-property: none; } -.translation-widget { - display: flex; - flex-flow: column nowrap; +.link, .linked-services__rightInternalLink { + padding-right: 15px; + padding-right: 0.9375rem; + padding-left: 3px; + padding-left: 0.1875rem; position: relative; -} -.translation-widget.footer { - padding-top: 0; -} -.translation-widget.footer .translation-widget__button { - max-width: 240px; - width: 100%; - height: 46px; + display: inline-block; + text-decoration: none; + font-weight: 500; + color: #101820; background: transparent; + border: none; + transition: color; + transition-duration: 150ms; } -@media only screen and (min-width: 48em) { - .translation-widget.footer .translation-widget__button { - width: 80%; - } -} -.translation-widget.footer .translation-widget__button .chevron-container { - position: absolute; - right: 12px; -} -.translation-widget.footer .translation-widget__button .globe-icon { - margin: 0 12px 0 6px; -} -.translation-widget.footer .translation-widget__button:focus { - outline-offset: 5px; +.link:focus, .linked-services__rightInternalLink:focus { + outline-width: 3px; + outline-width: 0.1875rem; + outline-style: solid; + outline-color: #254A7E; } -.translation-widget.footer .language-options { - width: 100%; - max-width: 240px; - right: auto; +.link.link-btn, .link-btn.linked-services__rightInternalLink { + color: #006CE0; } -@media only screen and (min-width: 48em) { - .translation-widget.footer .language-options { - width: 80%; - } +.link:not(.action)::after, .linked-services__rightInternalLink:not(.action)::after { + right: -10px; + right: -0.625rem; + top: 2px; + top: 0.125rem; + width: 16px; + width: 1rem; + height: 16px; + height: 1rem; + background-size: 16px; + background-size: 1rem; + content: ""; + position: relative; + display: inline-block; + background: url("styles/resources/assets/icons/arrow-right.svg") no-repeat; + background-position: center; + transition-property: all; + transition-duration: 300ms; } -@media only screen and (min-width: 64em) { - .translation-widget.footer .language-options { - width: 100%; - min-width: 240px; - } +.link:not(.action):hover, .linked-services__rightInternalLink:not(.action):hover, .link:not(.action):focus, .linked-services__rightInternalLink:not(.action):focus { + text-decoration: underline; } -.translation-widget.footer .language-options li:focus { - outline-offset: -5px; +.link:not(.action):hover::after, .linked-services__rightInternalLink:not(.action):hover::after, .link:not(.action):focus::after, .linked-services__rightInternalLink:not(.action):focus::after { + right: -15px; + right: -0.9375rem; } -.translation-widget.footer .language-options li:first-of-type { - border-radius: 5px 5px 0 0; +.link[disabled]:hover, [disabled].linked-services__rightInternalLink:hover, .link.disabled:hover, .disabled.linked-services__rightInternalLink:hover { + text-decoration: none; } -.translation-widget.footer .language-options li:last-of-type { - border-radius: 0 0 5px 5px; +.link:not(.action)[disabled], .linked-services__rightInternalLink:not(.action)[disabled], .link:not(.action).disabled, .linked-services__rightInternalLink:not(.action).disabled { + color: #A0A0A3; + cursor: not-allowed; } -.translation-widget.header_desktop { - display: none; - right: 12px; - z-index: 700; - margin: 0 0 0 10px; +.link:not(.action)[disabled]::after, .linked-services__rightInternalLink:not(.action)[disabled]::after, .link:not(.action).disabled::after, .linked-services__rightInternalLink:not(.action).disabled::after { + background: url("styles/resources/assets/icons/arrow-right-grey.svg") no-repeat; } -@media only screen and (min-width: 40em) { - .translation-widget.header_desktop { - display: flex; - } +.link:not(.action)[disabled]:hover::after, .linked-services__rightInternalLink:not(.action)[disabled]:hover::after, .link:not(.action)[disabled]:focus::after, .linked-services__rightInternalLink:not(.action)[disabled]:focus::after, .link:not(.action).disabled:hover::after, .linked-services__rightInternalLink:not(.action).disabled:hover::after, .link:not(.action).disabled:focus::after, .linked-services__rightInternalLink:not(.action).disabled:focus::after { + right: -10px; + right: -0.625rem; } -@media only screen and (min-width: 77.75em) { - .translation-widget.header_desktop { - right: 24px; - } +.link.highlight, .highlight.linked-services__rightInternalLink { + text-decoration: underline; + color: #006CE0; + border: 0; } -.translation-widget.header_desktop .translation-widget__button { - display: flex; - width: 100%; - border-radius: 0; - border-width: 0; - padding: 0; +.link.highlight:hover, .highlight.linked-services__rightInternalLink:hover, .link.highlight:focus, .highlight.linked-services__rightInternalLink:focus { + color: #0061C8; + text-decoration: none; } -.translation-widget.header_desktop .translation-widget__button:focus, .translation-widget.header_desktop .translation-widget__button:active { - outline: unset; - outline-offset: unset; +.link.highlight[disabled], .highlight[disabled].linked-services__rightInternalLink, .link.highlight.disabled, .highlight.disabled.linked-services__rightInternalLink { + text-decoration: underline; + color: #A0A0A3; + cursor: not-allowed; } -.translation-widget.header_desktop .translation-widget__button.is-open { - border-radius: 0; - position: relative; +.link.highlight.back, .highlight.back.linked-services__rightInternalLink { + padding-right: 3px; + padding-right: 0.1875rem; } -.translation-widget.header_desktop .translation-widget__button span { - display: block; +.link.highlight.back::before, .highlight.back.linked-services__rightInternalLink::before { + width: 11px; + width: 0.6875rem; + height: 11px; + height: 0.6875rem; + margin-right: 6px; + margin-right: 0.375rem; + content: ""; position: relative; + display: inline-block; + left: 0; + background-repeat: no-repeat; + background-position: center; + transition-property: all; + transition-duration: 300ms; + background-image: url("styles/resources/assets/icons/icon-left-blue-chevron.svg"); } -.translation-widget.header_desktop .translation-widget__button span strong { - font-weight: 500; +.link.highlight.back::after, .highlight.back.linked-services__rightInternalLink::after { + content: none; } -.translation-widget.header_desktop .language-options { - position: absolute; - top: 45px; - left: 6px; - bottom: 0; - list-style-type: none; - border-radius: 4px; - height: fit-content; - padding: 0; - overflow: hidden; - width: calc(100% + 15px); +.link.action, .action.linked-services__rightInternalLink { + padding-right: 3px; + padding-right: 0.1875rem; + text-decoration: underline; + color: #006CE0; + border: 0; } -.translation-widget.header_desktop .language-options li { - border-radius: 0; +.link.action.external, .action.external.linked-services__rightInternalLink { + display: inline-flex; + align-items: center; } -.translation-widget.header_desktop .language-options li:focus { - outline-offset: -5px; - outline: 2px #183052 solid; +.link.action.external:hover img, .action.external.linked-services__rightInternalLink:hover img { + transform: translate(3px, -3px); } -.translation-widget p { - padding: 0; - margin: 0; - color: #FFFFFF; - font-weight: bold; +.link.action.external img, .action.external.linked-services__rightInternalLink img { + transition: transform 150ms ease-out; + backface-visibility: hidden; + top: -1px; + top: -0.0625rem; + margin-left: 12px; + margin-left: 0.75rem; + height: 16px; + height: 1rem; + width: 16px; + width: 1rem; + position: relative; } -.translation-widget__button { - display: flex; +.link.action:hover, .action.linked-services__rightInternalLink:hover, .link.action:focus, .action.linked-services__rightInternalLink:focus { + color: #0061C8; + text-decoration: none; +} +.link.action[disabled], .action[disabled].linked-services__rightInternalLink, .link.action.disabled, .action.disabled.linked-services__rightInternalLink { + text-decoration: underline; + color: #A0A0A3; + cursor: not-allowed; +} +.link.action.icon, .action.icon.linked-services__rightInternalLink { + padding-left: 27px; + padding-left: 1.6875rem; +} +.link.action.icon span, .action.icon.linked-services__rightInternalLink span { position: relative; - flex-flow: row nowrap; - align-items: center; - border: 1px solid #FFFFFF; - border-radius: 5px; - background: #183052; - text-align: left; - color: #FFFFFF; - white-space: nowrap; } -.translation-widget__button .globe-icon { - width: 20px; - width: 1.25rem; - height: 20px; - height: 1.25rem; - min-width: 20px; - min-width: 1.25rem; - display: block; - height: 20px; - width: 20px; +.link.action.icon span::after, .action.icon.linked-services__rightInternalLink span::after { + width: 18px; + width: 1.125rem; + height: 18px; + height: 1.125rem; + min-width: 18px; + min-width: 1.125rem; + content: ""; + position: absolute; + top: 0; + left: 0; background-size: contain; background-position: center; background-repeat: no-repeat; - margin: 0 12px 0 6px; - padding-bottom: 1px; -} -.translation-widget__button .chevron-container { - margin-left: 12px; - transition-property: transform; - transition-duration: 150ms; + transition-property: transform, margin; + transition-duration: 300ms; transition-timing-function: ease; - will-change: transform; -} -.translation-widget__button .chevron-container.up { - transform: rotate(180deg); - transition: transform 150ms ease, opacity 150ms ease, visibility 0s linear 0s; + left: -25px; + left: -1.5625rem; } -.translation-widget__button.is-open { - border-radius: 0 0 5px 5px; +.link.action.icon span.btn-icon-delete::after, .action.icon.linked-services__rightInternalLink span.btn-icon-delete::after { + background-image: url("styles/resources/assets/icons/authenticated/icon-trash.svg"); } -.translation-widget__button:focus { - outline-color: #FFFFFF; - z-index: 401; +.link.action.icon span.btn-icon-folder-move::after, .action.icon.linked-services__rightInternalLink span.btn-icon-folder-move::after { + background-image: url("styles/resources/assets/icons/authenticated/icon-folder-move.svg"); } -.translation-widget .language-options { - position: absolute; - width: 100%; - bottom: 24px; - left: 0; - right: 0; - z-index: 400; - margin: 10px auto 0; - box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.25); - text-align: left; - background: #FFFFFF; - transition-property: transform, opacity; - transition-duration: 150ms; - transition-timing-function: ease; - will-change: transform; - display: none; - max-height: 357px; + +@media only screen and (min-width: 48em) { + .app-group { + display: flex; + justify-content: center; + } } -.translation-widget .language-options.visible { - transform: translateY(-20px); - transition: transform 150ms ease, opacity 150ms ease, visibility 0s linear 0s; +.app-group .app-download { + width: 200px; + width: 12.5rem; + height: 60px; + height: 3.75rem; + text-indent: -9999px; + text-indent: -624.9375rem; display: block; } -.translation-widget .language-options li { - font-family: "Roboto", sans-serif; - color: #525252; - font-size: 16px; - line-height: 24px; - font-weight: normal; - color: #101820; - display: flex; - align-items: center; - height: 46px; - width: 100%; - padding: 0 0 0 24px; - text-decoration: none; - background-color: #FFFFFF; - transition: background-color 150ms ease; - z-index: 402; - position: relative; -} -.theme-dark .translation-widget .language-options li { - color: #FFFFFF; -} -.translation-widget .language-options li b, -.translation-widget .language-options li strong { - font-family: "Roboto", sans-serif; - color: #525252; - font-size: 16px; - line-height: 24px; - font-weight: normal; - color: #101820; - font-weight: 700; +.app-group .app-download.apple { + background: url("styles/resources/assets/icons/apple-icon.png") no-repeat; + background-size: 100%; } -.theme-dark .translation-widget .language-options li b, -.theme-dark .translation-widget .language-options li strong { - color: #FFFFFF; +.app-group .app-download.google { + background: url("styles/resources/assets/icons/google-icon.png") no-repeat; + background-size: 100%; } -.theme-dark .translation-widget .language-options li b, -.theme-dark .translation-widget .language-options li strong { - color: #FFFFFF; +.app-group .app-download:first-child { + margin-bottom: 10px; + margin-bottom: 0.625rem; } -.translation-widget .language-options li.is-active { - background-color: #EDF2F4; +@media only screen and (min-width: 48em) { + .app-group .app-download:first-child { + margin-right: 20px; + margin-right: 1.25rem; + margin-bottom: 0; + } } -.translation-widget .language-options li.is-active span { - font-weight: 600; +.app-group .app-download:focus { + outline-width: 3px; + outline-width: 0.1875rem; + outline-style: solid; + outline-color: #254A7E; } -.translation-widget .language-options li .tick-container { - position: absolute; - right: 15px; - top: 8px; + +.un_link-confirmation { + display: flex; + flex-direction: column; } -.translation-widget .language-options li .tick-container .tick-icon { - width: 24px; - width: 1.5rem; - height: 24px; - height: 1.5rem; - min-width: 24px; - min-width: 1.5rem; - display: block; - height: 24px; - width: 24px; - background-size: contain; - background-position: center; - background-repeat: no-repeat; +.un_link-confirmation__button { + min-width: 320px; + margin-right: 60px !important; } -.translation-widget .language-options li:hover { - cursor: pointer; - background-color: #EDF2F4; +.un_link-confirmation__button.secondary, .un_link-confirmation__button.cmp-feature-teaser__action-link { + min-width: 320px; } -.translation-widget .language-options li:focus span, .translation-widget .language-options li:hover span { - text-decoration: underline; +.un_link-confirmation__content { + margin: 0 0 1.2em 0; } - -/** Buttons **/ -button:hover, button:focus { - cursor: pointer; +.un_link-confirmation__content--text { + /* common styles for both inner and outer ul and ol */ + /* common styles for outer ul and ol */ + /* styles only for ul */ + /* styles only for ol */ + /* styles for ul and ol with white background */ } -button:hover[disabled], button:hover.disabled, button:focus[disabled], button:focus.disabled { - cursor: not-allowed; - border-color: #A0A0A3; +.un_link-confirmation__content--text ul, +.un_link-confirmation__content--text ol { + position: relative; + margin: 0; + list-style: none; + overflow-wrap: break-word; } - -.btn, -.un_link-confirmation__button { - padding: 16px 17px; - padding: 1rem 1.0625rem; - min-width: 160px; - min-width: 10rem; - border-radius: 5px; - border-radius: 0.3125rem; - border-width: 2px; - border-width: 0.125rem; - display: block; +.un_link-confirmation__content--text ul li, +.un_link-confirmation__content--text ol li { + margin: 0 0 12px 0; position: relative; - font-weight: 500; - background: #006CE0; - color: #FFFFFF; - text-decoration: none; - text-align: center; - border-style: solid; - border-color: transparent; - transition-property: background, color, padding, margin; - transition-duration: 150ms; } -@media only screen and (min-width: 48em) { - .btn, -.un_link-confirmation__button { - display: inline-block; - } +.un_link-confirmation__content--text ul li:last-child, +.un_link-confirmation__content--text ol li:last-child { + margin: 0; } -.btn:hover, -.un_link-confirmation__button:hover { - background: #183052; +.un_link-confirmation__content--text ul li a, +.un_link-confirmation__content--text ol li a { + color: #006CE0; } -.btn:focus, -.un_link-confirmation__button:focus { - outline-width: 3px; - outline-width: 0.1875rem; - outline-style: solid; - outline-color: #254A7E; +.un_link-confirmation__content--text ul li ul, +.un_link-confirmation__content--text ul li ol, +.un_link-confirmation__content--text ol li ul, +.un_link-confirmation__content--text ol li ol { + padding: 15px 0 0 24px; } -.btn.mygov, -.mygov.un_link-confirmation__button { - background: #026540; +.un_link-confirmation__content--text ul li ul li::before, +.un_link-confirmation__content--text ul li ol li::before, +.un_link-confirmation__content--text ol li ul li::before, +.un_link-confirmation__content--text ol li ol li::before { + left: -24px; } -.btn.mygov:focus, -.mygov.un_link-confirmation__button:focus { - background: #0061C8; +.un_link-confirmation__content--text > ul, +.un_link-confirmation__content--text > ol { + margin: 20px 0 40px; } -.btn.is-loading, -.is-loading.un_link-confirmation__button { - padding: 16px 17px 16px 45px; - padding: 1rem 1.0625rem 1rem 2.8125rem; - pointer-events: none; +.un_link-confirmation__content--text ul { + position: relative; } -@keyframes rotate { - 0% { - transform: rotate(0); - } - 100% { - transform: rotate(360deg); - } +.un_link-confirmation__content--text ul li { + /* styling of the blue bullet on the left of outer lis */ } -.btn.is-loading::before, -.is-loading.un_link-confirmation__button::before { +.un_link-confirmation__content--text ul li::before { content: ""; position: absolute; - top: 0; - left: 0; - width: 26px; - height: 26px; - background-size: contain; - background-position: center; - background-repeat: no-repeat; - transition-property: transform, margin; - transition-duration: 300ms; - transition-timing-function: ease; - top: calc(50% - 14px); - top: calc(50% - 0.875rem); - left: calc(50% - 55px); - left: calc(50% - 3.4375rem); - background-image: url("styles/resources/assets/icons/spinner-button.svg"); - animation: rotate 1s linear infinite; + top: 12px; + left: -26px; + width: 4px; + height: 4px; + background-color: #525252; + border-radius: 50%; } -@media only screen and (min-width: 48em) { - .btn.is-loading::before, -.is-loading.un_link-confirmation__button::before { - left: 25px; - left: 1.5625rem; - } +.un_link-confirmation__content--text ol { + counter-reset: step-counter; } -.btn.mygov-green, -.mygov-green.un_link-confirmation__button { - background: #026540; +.un_link-confirmation__content--text ol li { + counter-increment: step-counter; } -.btn.mygov-green span::after, -.mygov-green.un_link-confirmation__button span::after { - backface-visibility: none; +.un_link-confirmation__content--text ol li::before { + content: counter(step-counter); + color: #006CE0; + position: absolute; + left: -30px; } -.btn.mygov-green:hover, -.mygov-green.un_link-confirmation__button:hover { - background: #78C433; - color: #101820; +.un_link-confirmation__content--text.is-bg-white ul, +.un_link-confirmation__content--text.is-bg-white ol { + background: #FFFFFF; } -.btn.mygov-green:hover span::after, -.mygov-green.un_link-confirmation__button:hover span::after { - filter: invert(1); +.un_link-confirmation__content--text.is-bg-white > ul { + padding: 0 30px 0 27px; } -.btn.outline, -.outline.un_link-confirmation__button { - padding: 15px 16px; - padding: 0.9375rem 1rem; - border-width: 2px; - border-width: 0.125rem; - color: #006CE0; - background: #FFFFFF; - border-style: solid; - border-color: #006CE0; +.un_link-confirmation__content--text.is-bg-white > ol { + padding: 0 30px 0 57px; } -.btn.outline:hover, .btn.outline:focus, -.outline.un_link-confirmation__button:hover, -.outline.un_link-confirmation__button:focus { - text-decoration: underline; - color: #313131; - border-color: #313131; +.un_link-confirmation__content--text.is-bg-white > ol > li::before { + width: 26px; + height: 26px; + background: #006CE0; + border-radius: 50%; + color: #FFFFFF; + display: flex; + justify-content: center; + align-items: center; + font-size: 14px; + font-weight: bold; + top: 2px; + left: -57px; } -.btn.outline[disabled], .btn.outline.disabled, -.outline[disabled].un_link-confirmation__button, -.outline.disabled.un_link-confirmation__button { - background: #F5F5F5; - border-color: #A0A0A3; - color: #A0A0A3; - cursor: not-allowed; +.un_link-confirmation a { + margin: 10px 10px 0 0; } -.btn.secondary, -.secondary.un_link-confirmation__button { - padding: 15px 16px; - padding: 0.9375rem 1rem; - border-width: 2px; - border-width: 0.125rem; - color: #006CE0; - background: #FFFFFF; - border-style: solid; - border-color: #006CE0; +.un_link-confirmation h1 { + font-size: 2em; } -.btn.secondary:hover, .btn.secondary:focus, -.secondary.un_link-confirmation__button:hover, -.secondary.un_link-confirmation__button:focus { - color: #313131; - text-decoration: underline; - border-color: #313131; + +.unlinked-services-tile { + display: flex; + flex-direction: column; + background-color: #FFFFFF; + border-bottom: 0.0625rem solid #CCCCCC; + padding: 1.25rem 0.625rem; } -.btn.secondary[disabled], .btn.secondary.disabled, -.secondary[disabled].un_link-confirmation__button, -.secondary.disabled.un_link-confirmation__button { - background: #F5F5F5; - border-color: #A0A0A3; - color: #A0A0A3; - cursor: not-allowed; +.unlinked-services-tile h2 { + color: #000000; } -.btn.tertiary, -.tertiary.un_link-confirmation__button { - padding: 15px 16px; - padding: 0.9375rem 1rem; - border-width: 2px; - border-width: 0.125rem; - color: #006CE0; - background: #FFFFFF; - border-style: solid; - border-color: #D1D2D3; +.unlinked-services-tile__section-heading-border { + border-bottom: 0.125rem solid #525252; } -.btn.tertiary:hover, .btn.tertiary:focus, -.tertiary.un_link-confirmation__button:hover, -.tertiary.un_link-confirmation__button:focus { - background-color: #F5F9FE; +.unlinked-services-tile__block { + display: flex; + flex-flow: row nowrap; + align-items: center; + justify-content: space-between; } -.btn.tertiary[disabled], .btn.tertiary.disabled, -.tertiary[disabled].un_link-confirmation__button, -.tertiary.disabled.un_link-confirmation__button { - background: #F5F5F5; - border-color: #A0A0A3; - color: #A0A0A3; - cursor: not-allowed; +.unlinked-services-tile__block--title { + font-size: var(--font-size-16); } -.btn.icon span, -.icon.un_link-confirmation__button span { - padding-right: 27px; - padding-right: 1.6875rem; - position: relative; - font-weight: 400; +.unlinked-services-tile__block button.btn { + display: block; + min-width: 0rem; + height: 3rem; } -.btn.icon span::after, -.icon.un_link-confirmation__button span::after { - content: ""; - position: absolute; - top: 0; - right: 0; - width: 18px; - height: 18px; - background-size: contain; - background-position: center; - background-repeat: no-repeat; - transition-property: transform, margin, background; - transition-duration: 300ms; - transition-timing-function: ease; - transition: all 150ms; +@media (max-width: 639px) { + .unlinked-services-tile__block button.btn { + display: none; + } } -.btn.icon span.btn-icon-filter::after, -.icon.un_link-confirmation__button span.btn-icon-filter::after { - background-image: url("styles/resources/assets/icons/icon-filter-white.svg"); +.unlinked-services-tile__block--btn-icon { + display: none; } -.btn.icon span.btn-icon-arrow::after, -.icon.un_link-confirmation__button span.btn-icon-arrow::after { - background-image: url("styles/resources/assets/icons/arrow-right-white.svg"); +@media (max-width: 639px) { + .unlinked-services-tile__block--btn-icon { + display: block; + width: 1.2rem; + height: 1.4rem; + background: url("styles/resources/assets/icons/chevron-right-black.svg") no-repeat center; + background-size: 1.5rem; + } } -.btn.icon span.btn-icon-external-link::after, -.icon.un_link-confirmation__button span.btn-icon-external-link::after { - background-image: url("styles/resources/assets/icons/icon-external-link-white.svg"); + +.payments-carousel-container .react-multi-carousel-item { + height: 300px; } -.btn[disabled], .btn.disabled, -[disabled].un_link-confirmation__button, -.disabled.un_link-confirmation__button { - background: #A0A0A3; - border-color: #A0A0A3; + +.payments-carousel-item { + flex-direction: column; + justify-content: space-between; + padding: 20px; +} +.payments-carousel-item:hover .payments-carousel-link-icon { + transform: translate(3px, -3px); +} +.payments-carousel-item img.logo { + height: 24px; + width: 24px; + min-height: 24px; + min-width: 24px; +} +.payments-carousel-item span { + font-family: "Roboto", sans-serif; + font-size: 16px; + font-size: 1rem; + line-height: 1.5; + font-weight: normal; + color: #525252; + color: #101820; + font-weight: 700; + margin-top: 12px; + margin-bottom: 10px; + display: block; +} +.theme-dark .payments-carousel-item span { color: #FFFFFF; - cursor: not-allowed; - pointer-events: none; } -.btn.loading, -.loading.un_link-confirmation__button { - text-indent: -9999px; - text-indent: -624.9375rem; - background-size: 30px; - background-size: 1.875rem; - background: url("styles/resources/assets/icons/spinner.svg") no-repeat; - background-position: center; - border-color: #A0A0A3; - pointer-events: none; +.theme-dark .payments-carousel-item span { + color: #FFFFFF; } -.btn.loading[disabled], .btn.loading.disabled, -.loading[disabled].un_link-confirmation__button, -.loading.disabled.un_link-confirmation__button { - text-indent: -9999px; - text-indent: -624.9375rem; - background-size: 30px; - background-size: 1.875rem; - background: url("styles/resources/assets/icons/spinner.svg") no-repeat; - background-position: center; +.payments-carousel-item p { + font-family: "Roboto", sans-serif; + font-size: 16px; + font-size: 1rem; + line-height: 1.5; + font-weight: normal; + color: #525252; + font-size: 14px; + font-size: 0.875rem; + line-height: 1.3571428571; + margin-top: 0; } -.btn.close, -.close.un_link-confirmation__button { - height: 30px; - height: 1.875rem; - width: 30px; - width: 1.875rem; - margin: 0; - padding: 0; - min-width: auto; - background: transparent; +.theme-dark .payments-carousel-item p { + color: #FFFFFF; } -.btn.close i, -.close.un_link-confirmation__button i { - width: 30px; - width: 1.875rem; - height: 30px; - height: 1.875rem; - min-width: 30px; - min-width: 1.875rem; +.payments-carousel-item .payments-carousel-link { + position: relative; + display: block; + margin-top: 0; + color: #006CE0; + margin-bottom: 0; + font-size: 14px; + font-weight: 500; +} +.payments-carousel-item .carousel-cta { + display: flex; + align-items: center; + justify-content: space-between; +} +.payments-carousel-item .payments-carousel-link-icon { + width: 18px; + width: 1.125rem; + height: 18px; + height: 1.125rem; + min-width: 18px; + min-width: 1.125rem; display: block; - height: 30px; - width: 30px; background-size: contain; background-position: center; background-repeat: no-repeat; - background-image: url("styles/resources/assets/icons/icon-close.svg"); + transition: transform 150ms ease-out; + backface-visibility: hidden; } -.btn.toggle, -.toggle.un_link-confirmation__button { - padding: 0 25px 0 3px; - padding: 0 1.5625rem 0 0.1875rem; - min-height: 20px; - min-height: 1.25rem; - display: block; - margin: 0; - height: auto; - width: auto; - background: transparent; - color: #006CE0; - min-width: auto; + +.update-channel-content h2:first-of-type { + margin-bottom: 0; } -.btn.toggle::after, -.toggle.un_link-confirmation__button::after { - content: ""; - position: absolute; - top: 0; - right: 0; - width: 15px; - height: 15px; - background-size: contain; - background-position: center; - background-repeat: no-repeat; - transition-property: transform, margin, background; - transition-duration: 300ms; - transition-timing-function: ease; - top: 2px; - top: 0.125rem; - background-image: url("styles/resources/assets/icons/chevron-down.svg"); - transition-property: none; +.update-channel-content .container { + max-width: 927px; + max-width: 57.9375rem; } -.btn.toggle.is-expanded::after, -.toggle.is-expanded.un_link-confirmation__button::after { - content: ""; - position: absolute; - top: 0; - right: 0; - width: 15px; - height: 15px; +.update-channel-content__sample-content { + display: flex; + flex-direction: column; + align-content: center; +} +.update-channel-content__content { + display: flex; + flex-wrap: wrap; +} +.update-channel-content__content .subheader { + font-weight: 700; +} +.update-channel-content__content .content-selection { + padding-top: 0; + display: inline !important; +} +.update-channel-content__content .content-area { + display: flex; + flex-flow: row wrap; + flex: 1 1 auto; +} +.update-channel-content__content .content-area legend { + font-weight: 400; + margin: 0; +} +.update-channel-content__content .content-area legend p { + margin-top: 19px; + margin-top: 1.1875rem; + margin-bottom: 20px; + margin-bottom: 1.25rem; +} +@media only screen and (min-width: 48em) { + .update-channel-content__content .content-area legend p { + margin-top: 23px; + margin-top: 1.4375rem; + margin-bottom: 22px; + margin-bottom: 1.375rem; + } +} +.update-channel-content__content .content-area > fieldset { + flex: 1 1 auto; + margin: 0; +} +.update-channel-content__content .content-area > fieldset .input-group:first-child { + margin-top: 0; +} +@media only screen and (min-width: 48em) { + .update-channel-content__content .content-area > fieldset .input-group:first-child { + margin-top: 11.61px; + margin-top: 0.725625rem; + } +} +.update-channel-content__content .content-area .selection-options { + display: flex; + flex-direction: column; +} +.update-channel-content__content .content-area .selection-options legend, +.update-channel-content__content .content-area .selection-options legend p { + margin: 0; + font-weight: 400; + color: #333333; +} +@media only screen and (min-width: 48em) { + .update-channel-content__content .content-area .selection-options fieldset legend { + position: absolute; + } + .update-channel-content__content .content-area .selection-options fieldset .input-group:first-of-type { + margin-top: 56px; + margin-top: 3.5rem; + } +} +.update-channel-content__content .content-area .selection-options label.content-selection { + margin-left: 15px; + margin-left: 0.9375rem; +} +@media only screen and (min-width: 48em) { + .update-channel-content__content .content-area .selection-options { + float: left; + } +} +.update-channel-content__content .content-area .sample-content { + padding: 0 16px 16px 0; + padding: 0 1rem 1rem 0; + margin-top: 20px; + margin-top: 1.25rem; + background-color: #EDEDED; + display: flex; + flex-direction: row; + flex: 1 1 auto; + z-index: 400; +} +.update-channel-content__content .content-area .sample-content b, +.update-channel-content__content .content-area .sample-content strong { + background-color: var(--system-blue-40); +} +.update-channel-content__content .content-area .sample-content .info-icon { + width: 17px; + width: 1.0625rem; + height: 17px; + height: 1.0625rem; + min-width: 17px; + min-width: 1.0625rem; + display: block; background-size: contain; background-position: center; background-repeat: no-repeat; - transition-property: transform, margin, background; - transition-duration: 300ms; - transition-timing-function: ease; - top: 2px; - top: 0.125rem; - background-image: url("styles/resources/assets/icons/chevron-up.svg"); - transition-property: none; + margin: 14px 10px 14px 14px; + margin: 0.875rem 0.625rem 0.875rem 0.875rem; + min-width: 17px; + min-width: 1.0625rem; + background-image: url("styles/resources/assets/icons/icon-info-black.svg"); } - -.link, .linked-services__rightInternalLink { - padding-right: 15px; - padding-right: 0.9375rem; - padding-left: 3px; - padding-left: 0.1875rem; - position: relative; - display: inline-block; - text-decoration: none; +@media only screen and (min-width: 48em) { + .update-channel-content__content .content-area .sample-content .info-icon { + width: 24px; + width: 1.5rem; + height: 24px; + height: 1.5rem; + min-width: 24px; + min-width: 1.5rem; + display: block; + background-size: contain; + background-position: center; + background-repeat: no-repeat; + min-width: 24px; + min-width: 1.5rem; + margin: 18px; + margin: 1.125rem; + } +} +.update-channel-content__content .content-area .sample-content p { + margin: 0; +} +.update-channel-content__content .content-area .sample-content p:first-of-type { + margin-bottom: 16px; + margin-bottom: 1rem; +} +.update-channel-content__content .content-area .sample-content .message-content h3 { + margin: 14px 0; + margin: 0.875rem 0; + font-size: 16px; + font-size: 1rem; + font-family: "Roboto", sans-serif; + font-weight: 700; + line-height: 1.1875; +} +@media only screen and (min-width: 48em) { + .update-channel-content__content .content-area .sample-content .message-content h3 { + font-size: 18px; + font-size: 1.125rem; + margin: 20px 0; + margin: 1.25rem 0; + line-height: 1.2222222222; + } +} +@media only screen and (min-width: 48em) { + .update-channel-content__content .content-area .sample-content { + padding: 0 20px 20px 0; + padding: 0 1.25rem 1.25rem 0; + max-width: 411.18px; + max-width: 25.69875rem; + margin-left: auto; + float: right; + margin-top: 0; + } +} +.update-channel-content__content .content-area .button-container { + margin-top: 20px; + margin-top: 1.25rem; +} +.update-channel-content__content .content-area .button-container .btn-primary { + border-radius: 5px; + border-radius: 0.3125rem; + min-width: 180px; + min-width: 11.25rem; + height: 52px; + height: 3.25rem; + color: #183052; + background-color: #99E1F3; + border: none; font-weight: 500; - color: #101820; - background: transparent; + cursor: pointer; + width: fit-content; +} +.update-channel-content__content .content-area .button-container .btn-primary:hover { + color: #FFFFFF; + background-color: #254A7E; border: none; - transition: color; - transition-duration: 150ms; } -.link:focus, .linked-services__rightInternalLink:focus { - outline-width: 3px; - outline-width: 0.1875rem; - outline-style: solid; - outline-color: #254A7E; +@media only screen and (min-width: 48em) { + .update-channel-content__content .content-area .button-container { + margin-top: 15.61px; + margin-top: 0.975625rem; + float: left; + clear: left; + } +} +@media (max-width: 47.9375em) { + .update-channel-content__content .content-area { + flex-direction: column; + } +} +@media only screen and (min-width: 77.75em) { + .update-channel-content__content .content-area { + max-width: none; + } +} +.update-channel-content .input-group input[type=radio] + .check { + width: 20px; + width: 1.25rem; + height: 20px; + height: 1.25rem; + margin-top: 0; +} +.update-channel-content .input-group input[type=radio] + .check::after { + width: 10px; + width: 0.625rem; + height: 10px; + height: 0.625rem; +} +.update-channel-content .input-group input[type=radio]:checked + .check { + background-color: unset; + border-color: #254A7E; +} +.update-channel-content .input-group input[type=radio]:checked + .check::after { + background-color: #254A7E; +} + +.serviceNameUpdateInfo { + padding: 5px; + padding: 0.3125rem; + border-radius: 5px; + border-radius: 0.3125rem; + border-left: 3px solid #006BDF; + border-left: 0.1875rem solid #006BDF; + background-color: #F0FBFF; + max-width: 75%; + display: flex; + flex-direction: row; +} +.serviceNameUpdateInfo img { + padding: 5px; + padding: 0.3125rem; + max-width: 25px; + max-width: 1.5625rem; + display: flex; + flex-direction: column; + height: fit-content; +} +.serviceNameUpdateInfo p { + display: flex; + flex-direction: column; + margin-top: 0; + margin-bottom: 0; +} + +.radio-input-row { + display: flex; + flex-direction: row; + padding: 0; +} +.radio-input-row input[type=radio]:checked + .check + label { + font-weight: 400; +} + +.updateContactDetails h2 { + font-family: "Roboto", sans-serif; + margin-top: 30px; + margin-top: 1.875rem; + margin-bottom: 20px; + margin-bottom: 1.25rem; + font-size: 22px; + font-size: 1.375rem; + line-height: 1.2727272727; +} +@media only screen and (min-width: 48em) { + .updateContactDetails h2 { + margin-top: 51px; + margin-top: 3.1875rem; + font-size: 24px; + font-size: 1.5rem; + line-height: 1.1666666667; + } +} +.updateContactDetails .updateContactDetails--wrapper > h2:first-of-type { + margin-top: 0; } -.link.link-btn, .link-btn.linked-services__rightInternalLink { - color: #006CE0; + +@media (max-width: 47.9375em) { + .desktop-text { + border: 0; + clip: rect(0, 0, 0, 0); + height: 1px; + margin: -1px; + overflow: hidden; + padding: 0; + position: absolute; + white-space: nowrap; + width: 1px; + } } -.link:not(.action)::after, .linked-services__rightInternalLink:not(.action)::after { - right: -10px; - right: -0.625rem; - top: 2px; - top: 0.125rem; - width: 16px; - width: 1rem; - height: 16px; - height: 1rem; - background-size: 16px; - background-size: 1rem; - content: ""; - position: relative; - display: inline-block; - background: url("styles/resources/assets/icons/arrow-right.svg") no-repeat; - background-position: center; - transition-property: all; - transition-duration: 300ms; + +body .updateContactDetails a[href]:hover, +.page-mygov-auth-account .updateContactDetails a[href]:hover { + text-decoration: none; } -.link:not(.action):hover, .linked-services__rightInternalLink:not(.action):hover, .link:not(.action):focus, .linked-services__rightInternalLink:not(.action):focus { - text-decoration: underline; +body .updateContactDetails button.btn.disabled, body .updateContactDetails button.btn[disabled], +.page-mygov-auth-account .updateContactDetails button.btn.disabled, +.page-mygov-auth-account .updateContactDetails button.btn[disabled] { + color: #76797c; + outline: none; + border-color: transparent; } -.link:not(.action):hover::after, .linked-services__rightInternalLink:not(.action):hover::after, .link:not(.action):focus::after, .linked-services__rightInternalLink:not(.action):focus::after { - right: -15px; - right: -0.9375rem; +body .updateContactDetails .link:focus, body .updateContactDetails .linked-services__rightInternalLink:focus, +.page-mygov-auth-account .updateContactDetails .link:focus, +.page-mygov-auth-account .updateContactDetails .linked-services__rightInternalLink:focus { + outline: 2px solid var(--focus-link-outline-color); + outline: 0.125rem solid var(--focus-link-outline-color); + border-radius: 1px; + border-radius: 0.0625rem; } -.link[disabled]:hover, [disabled].linked-services__rightInternalLink:hover, .link.disabled:hover, .disabled.linked-services__rightInternalLink:hover { - text-decoration: none; +body .updateContactDetails button.link.action.highlight, body .updateContactDetails button.action.highlight.linked-services__rightInternalLink, +.page-mygov-auth-account .updateContactDetails button.link.action.highlight, +.page-mygov-auth-account .updateContactDetails button.action.highlight.linked-services__rightInternalLink { + padding: 0; } -.link:not(.action)[disabled], .linked-services__rightInternalLink:not(.action)[disabled], .link:not(.action).disabled, .linked-services__rightInternalLink:not(.action).disabled { - color: #A0A0A3; - cursor: not-allowed; +body .updateContactDetails .text-dark, +.page-mygov-auth-account .updateContactDetails .text-dark { + font-size: 16px; + font-size: 1rem; + color: var(--dark-grey); + margin-bottom: 0; + line-height: 1.625; } -.link:not(.action)[disabled]::after, .linked-services__rightInternalLink:not(.action)[disabled]::after, .link:not(.action).disabled::after, .linked-services__rightInternalLink:not(.action).disabled::after { - background: url("styles/resources/assets/icons/arrow-right-grey.svg") no-repeat; +body .updateContactDetails .para-link, +.page-mygov-auth-account .updateContactDetails .para-link { + font-family: "Roboto", sans-serif; + font-size: 16px; + line-height: 1.15; + color: #000000; + margin: 0; + align-self: flex-start; } -.link:not(.action)[disabled]:hover::after, .linked-services__rightInternalLink:not(.action)[disabled]:hover::after, .link:not(.action)[disabled]:focus::after, .linked-services__rightInternalLink:not(.action)[disabled]:focus::after, .link:not(.action).disabled:hover::after, .linked-services__rightInternalLink:not(.action).disabled:hover::after, .link:not(.action).disabled:focus::after, .linked-services__rightInternalLink:not(.action).disabled:focus::after { - right: -10px; - right: -0.625rem; +body .updateContactDetails .para-link strong, +.page-mygov-auth-account .updateContactDetails .para-link strong { + font-size: 16px; + line-height: 1.15; + margin: 0; + color: #000000; } -.link.highlight, .highlight.linked-services__rightInternalLink { - text-decoration: underline; - color: #006CE0; - border: 0; +body .updateContactDetails .heading, +.page-mygov-auth-account .updateContactDetails .heading { + font-family: "Roboto", sans-serif; + font-size: 16px; + line-height: 1.15; + color: #000000; + margin: 0; } -.link.highlight:hover, .highlight.linked-services__rightInternalLink:hover, .link.highlight:focus, .highlight.linked-services__rightInternalLink:focus { - color: #0061C8; - text-decoration: none; +body .updateContactDetails .heading strong, +.page-mygov-auth-account .updateContactDetails .heading strong { + font-size: 16px; + line-height: 1.15; + margin: 0; + color: #000000; } -.link.highlight[disabled], .highlight[disabled].linked-services__rightInternalLink, .link.highlight.disabled, .highlight.disabled.linked-services__rightInternalLink { +body .updateContactDetails button.heading, +.page-mygov-auth-account .updateContactDetails button.heading { + background: none; + border: 0 none; + padding: 0; + appearance: none; + margin-bottom: 30px; + margin-bottom: 1.875rem; + outline-width: 2px; + outline-width: 0.125rem; + color: var(--link-color); text-decoration: underline; - color: #A0A0A3; - cursor: not-allowed; -} -.link.highlight.back, .highlight.back.linked-services__rightInternalLink { - padding-right: 3px; - padding-right: 0.1875rem; + font-weight: 500; + display: flex; + align-items: center; + transition: background-color 150ms, color 150ms; + background-color: transparent; } -.link.highlight.back::before, .highlight.back.linked-services__rightInternalLink::before { +body .updateContactDetails button.heading:after, +.page-mygov-auth-account .updateContactDetails button.heading:after { width: 11px; width: 0.6875rem; + min-width: 11px; + min-width: 0.6875rem; height: 11px; height: 0.6875rem; - margin-right: 6px; - margin-right: 0.375rem; + margin: 0 6px; + margin: 0 0.375rem; content: ""; - position: relative; - display: inline-block; - left: 0; - background-repeat: no-repeat; - background-position: center; - transition-property: all; - transition-duration: 300ms; - background-image: url("styles/resources/assets/icons/icon-left-blue-chevron.svg"); + background: no-repeat center; + background-size: contain; + background-image: url(styles/resources/assets/icons/ia/chevron-down.svg); + transition: transform 150ms; } -.link.highlight.back::after, .highlight.back.linked-services__rightInternalLink::after { - content: none; +body .updateContactDetails button.heading + div[aria-labelledby], +.page-mygov-auth-account .updateContactDetails button.heading + div[aria-labelledby] { + margin-top: 0; } -.link.action, .action.linked-services__rightInternalLink { - padding-right: 3px; - padding-right: 0.1875rem; - text-decoration: underline; - color: #006CE0; - border: 0; +body .updateContactDetails button.heading:hover, +.page-mygov-auth-account .updateContactDetails button.heading:hover { + background-color: var(--link-hover-bg); + color: var(--link-hover-color); } -.link.action.external, .action.external.linked-services__rightInternalLink { - display: inline-flex; - align-items: center; +body .updateContactDetails button.heading:hover:after, +.page-mygov-auth-account .updateContactDetails button.heading:hover:after { + background-image: url(styles/resources/assets/icons/ia/chevron-down-white.svg); } -.link.action.external:hover img, .action.external.linked-services__rightInternalLink:hover img { - transform: translate(3px, -3px); +body .updateContactDetails button.heading[aria-expanded=true], +.page-mygov-auth-account .updateContactDetails button.heading[aria-expanded=true] { + margin-bottom: 0; } -.link.action.external img, .action.external.linked-services__rightInternalLink img { - transition: transform 150ms ease-out; - backface-visibility: hidden; - top: -1px; - top: -0.0625rem; - margin-left: 12px; - margin-left: 0.75rem; - height: 16px; - height: 1rem; - width: 16px; - width: 1rem; - position: relative; +body .updateContactDetails button.heading[aria-expanded=true]:after, +.page-mygov-auth-account .updateContactDetails button.heading[aria-expanded=true]:after { + transform: rotate(180deg); } -.link.action:hover, .action.linked-services__rightInternalLink:hover, .link.action:focus, .action.linked-services__rightInternalLink:focus { - color: #0061C8; - text-decoration: none; +body .updateContactDetails .icon-uppercase, +.page-mygov-auth-account .updateContactDetails .icon-uppercase { + text-transform: uppercase; } -.link.action[disabled], .action[disabled].linked-services__rightInternalLink, .link.action.disabled, .action.disabled.linked-services__rightInternalLink { - text-decoration: underline; - color: #A0A0A3; - cursor: not-allowed; +body .updateContactDetails .input-group, +.page-mygov-auth-account .updateContactDetails .input-group { + margin-top: 20px; + margin-top: 1.25rem; + margin-bottom: 20px; + margin-bottom: 1.25rem; } -.link.action.icon, .action.icon.linked-services__rightInternalLink { - padding-left: 27px; - padding-left: 1.6875rem; +body .updateContactDetails .input-group label, +.page-mygov-auth-account .updateContactDetails .input-group label { + font-size: 16px; + font-size: 1rem; + padding: 0; + margin-bottom: 0; + font-weight: 400; } -.link.action.icon span, .action.icon.linked-services__rightInternalLink span { - position: relative; +body .updateContactDetails .input-group > input, +body .updateContactDetails .input-group > select, +body .updateContactDetails .input-group > textarea, +.page-mygov-auth-account .updateContactDetails .input-group > input, +.page-mygov-auth-account .updateContactDetails .input-group > select, +.page-mygov-auth-account .updateContactDetails .input-group > textarea { + margin-top: 12px; + margin-top: 0.75rem; + margin-bottom: 8px; + margin-bottom: 0.5rem; } -.link.action.icon span::after, .action.icon.linked-services__rightInternalLink span::after { - content: ""; - position: absolute; - top: 0; - left: 0; - width: 18px; - height: 18px; - background-size: contain; - background-position: center; - background-repeat: no-repeat; - transition-property: transform, margin; - transition-duration: 300ms; - transition-timing-function: ease; - left: -25px; - left: -1.5625rem; +@media only screen and (min-width: 48em) { + body .updateContactDetails .input-group > input, +body .updateContactDetails .input-group > select, +body .updateContactDetails .input-group > textarea, +.page-mygov-auth-account .updateContactDetails .input-group > input, +.page-mygov-auth-account .updateContactDetails .input-group > select, +.page-mygov-auth-account .updateContactDetails .input-group > textarea { + margin-top: 13px; + margin-top: 0.8125rem; + margin-bottom: 9px; + margin-bottom: 0.5625rem; + } } -.link.action.icon span.btn-icon-delete::after, .action.icon.linked-services__rightInternalLink span.btn-icon-delete::after { - background-image: url("styles/resources/assets/icons/authenticated/icon-trash.svg"); +body .updateContactDetails .input-group input, +.page-mygov-auth-account .updateContactDetails .input-group input { + border-width: 1px; + border-width: 0.0625rem; + border-radius: 2px; + border-radius: 0.125rem; + border-color: #000000; + padding: 0; + width: auto; + height: auto; } -.link.action.icon span.btn-icon-folder-move::after, .action.icon.linked-services__rightInternalLink span.btn-icon-folder-move::after { - background-image: url("styles/resources/assets/icons/authenticated/icon-folder-move.svg"); +body .updateContactDetails .input-group input[name=code], body .updateContactDetails .input-group input[name=mobile], body .updateContactDetails .input-group input[name=email], +.page-mygov-auth-account .updateContactDetails .input-group input[name=code], +.page-mygov-auth-account .updateContactDetails .input-group input[name=mobile], +.page-mygov-auth-account .updateContactDetails .input-group input[name=email] { + max-width: 424px; + max-width: 26.5rem; } - -@media only screen and (min-width: 48em) { - .app-group { - display: flex; - justify-content: center; - } +body .updateContactDetails .input-group input[name=mobile], +.page-mygov-auth-account .updateContactDetails .input-group input[name=mobile] { + width: 100%; } -.app-group .app-download { - width: 200px; - width: 12.5rem; - height: 60px; - height: 3.75rem; - text-indent: -9999px; - text-indent: -624.9375rem; - display: block; +body .updateContactDetails .input-group input:focus, +.page-mygov-auth-account .updateContactDetails .input-group input:focus { + border-width: 2px; + border-width: 0.125rem; + outline-offset: 2px; + outline-offset: 0.125rem; + outline: 2px solid #000000; + outline: 0.125rem solid #000000; } -.app-group .app-download.apple { - background: url("styles/resources/assets/icons/apple-icon.png") no-repeat; - background-size: 100%; +body .updateContactDetails .input-group input, +body .updateContactDetails .input-group select, +body .updateContactDetails .input-group textarea, +.page-mygov-auth-account .updateContactDetails .input-group input, +.page-mygov-auth-account .updateContactDetails .input-group select, +.page-mygov-auth-account .updateContactDetails .input-group textarea { + height: 50px; + height: 3.125rem; + padding: 15px; + padding: 0.9375rem; + width: 100%; +} +body .updateContactDetails .input-group input[type=checkbox], body .updateContactDetails .input-group input[type=radio], +.page-mygov-auth-account .updateContactDetails .input-group input[type=checkbox], +.page-mygov-auth-account .updateContactDetails .input-group input[type=radio] { + width: 16px; + width: 1rem; + height: 16px; + height: 1rem; + opacity: 0; + padding: 0; +} +body .updateContactDetails .input-group .input-row, +.page-mygov-auth-account .updateContactDetails .input-group .input-row { + padding: 0 2.5px; + padding: 0 0.15625rem; + margin-left: 8.5px; + margin-left: 0.53125rem; + margin-right: 8.5px; + margin-right: 0.53125rem; + min-height: 34px; + min-height: 2.125rem; + display: flex; + align-items: flex-start; + max-width: 100%; + max-width: fit-content; } -.app-group .app-download.google { - background: url("styles/resources/assets/icons/google-icon.png") no-repeat; - background-size: 100%; +body .updateContactDetails .input-group .input-row input[type=checkbox] ~ label, +body .updateContactDetails .input-group .input-row input[type=radio] ~ label, +.page-mygov-auth-account .updateContactDetails .input-group .input-row input[type=checkbox] ~ label, +.page-mygov-auth-account .updateContactDetails .input-group .input-row input[type=radio] ~ label { + padding: 0; + margin-bottom: 0; } -.app-group .app-download:first-child { - margin-bottom: 10px; - margin-bottom: 0.625rem; +body .updateContactDetails .input-group .input-row .check + label, +.page-mygov-auth-account .updateContactDetails .input-group .input-row .check + label { + transform: translateY(1px); + font-weight: 400; } @media only screen and (min-width: 48em) { - .app-group .app-download:first-child { - margin-right: 20px; - margin-right: 1.25rem; - margin-bottom: 0; + body .updateContactDetails .input-group .input-row, +.page-mygov-auth-account .updateContactDetails .input-group .input-row { + align-items: center; } } -.app-group .app-download:focus { - outline-width: 3px; - outline-width: 0.1875rem; - outline-style: solid; +body .updateContactDetails .input-group .input-row input[type=checkbox] + .check, +.page-mygov-auth-account .updateContactDetails .input-group .input-row input[type=checkbox] + .check { + border-radius: 2px; + border-radius: 0.125rem; +} +body .updateContactDetails .input-group .input-row:focus-within, +.page-mygov-auth-account .updateContactDetails .input-group .input-row:focus-within { + outline-offset: 6.5px; + outline-offset: 0.40625rem; + outline: 2px inset var(--body-text-color); + outline: 0.125rem inset var(--body-text-color); +} +body .updateContactDetails .input-group .input-row:focus-within.has-selected, +.page-mygov-auth-account .updateContactDetails .input-group .input-row:focus-within.has-selected { outline-color: #254A7E; } - -.un_link-confirmation { +body .updateContactDetails .input-group .input-row > .input-row__wrapper, +.page-mygov-auth-account .updateContactDetails .input-group .input-row > .input-row__wrapper { + margin-right: -5px; + margin-right: -0.3125rem; + margin-left: -5px; + margin-left: -0.3125rem; display: flex; - flex-direction: column; + align-items: center; } -.un_link-confirmation__button { - min-width: 320px; - margin-right: 60px !important; +body .updateContactDetails .input-group .input-row > .input-row__wrapper > *:not([type=checkbox]), +body .updateContactDetails .input-group .input-row > .input-row__wrapper > .check, +.page-mygov-auth-account .updateContactDetails .input-group .input-row > .input-row__wrapper > *:not([type=checkbox]), +.page-mygov-auth-account .updateContactDetails .input-group .input-row > .input-row__wrapper > .check { + margin-right: 5px; + margin-right: 0.3125rem; + margin-left: 5px; + margin-left: 0.3125rem; } -.un_link-confirmation__button.secondary { - min-width: 320px; +body .updateContactDetails .input-group .input-row > .input-row__wrapper > .check, +.page-mygov-auth-account .updateContactDetails .input-group .input-row > .input-row__wrapper > .check { + margin-top: 0; + margin-bottom: 0; } -.un_link-confirmation__content { - margin: 0 0 1.2em 0; +@media only screen and (min-width: 48em) { + body .updateContactDetails .input-group, +.page-mygov-auth-account .updateContactDetails .input-group { + margin-bottom: 23px; + margin-bottom: 1.4375rem; + } } -.un_link-confirmation__content--text { - /* common styles for both inner and outer ul and ol */ - /* common styles for outer ul and ol */ - /* styles only for ul */ - /* styles only for ol */ - /* styles for ul and ol with white background */ +body .updateContactDetails .selection-options .radio-input-row, +.page-mygov-auth-account .updateContactDetails .selection-options .radio-input-row { + min-height: 34px; + min-height: 2.125rem; + align-items: center; } -.un_link-confirmation__content--text ul, -.un_link-confirmation__content--text ol { - position: relative; - margin: 0; - list-style: none; - overflow-wrap: break-word; +body .updateContactDetails .selection-options .input-group, +.page-mygov-auth-account .updateContactDetails .selection-options .input-group { + margin-top: 10px; + margin-top: 0.625rem; + margin-bottom: 10px; + margin-bottom: 0.625rem; } -.un_link-confirmation__content--text ul li, -.un_link-confirmation__content--text ol li { - margin: 0 0 12px 0; - position: relative; +body .updateContactDetails .selection-options .input-group:last-child, +.page-mygov-auth-account .updateContactDetails .selection-options .input-group:last-child { + margin-bottom: 0; } -.un_link-confirmation__content--text ul li:last-child, -.un_link-confirmation__content--text ol li:last-child { +body .updateContactDetails .update-contact-tile input[type=number]::-webkit-inner-spin-button, body .updateContactDetails .update-contact-tile input[type=number]::-webkit-outer-spin-button, +.page-mygov-auth-account .updateContactDetails .update-contact-tile input[type=number]::-webkit-inner-spin-button, +.page-mygov-auth-account .updateContactDetails .update-contact-tile input[type=number]::-webkit-outer-spin-button { + -webkit-appearance: none; margin: 0; } -.un_link-confirmation__content--text ul li a, -.un_link-confirmation__content--text ol li a { - color: #006CE0; +body .updateContactDetails .update-contact-tile .input-group + .inline-error-section, +.page-mygov-auth-account .updateContactDetails .update-contact-tile .input-group + .inline-error-section { + margin-top: -21px; + margin-top: -1.3125rem; + margin-bottom: 31px; + margin-bottom: 1.9375rem; } -.un_link-confirmation__content--text ul li ul, -.un_link-confirmation__content--text ul li ol, -.un_link-confirmation__content--text ol li ul, -.un_link-confirmation__content--text ol li ol { - padding: 15px 0 0 24px; +body .updateContactDetails .switch-btn, +.page-mygov-auth-account .updateContactDetails .switch-btn { + padding: 9px 12px 9px 10px; + padding: 0.5625rem 0.75rem 0.5625rem 0.625rem; + font-size: 15px; + font-size: 0.9375rem; + border-radius: 2px; + border-radius: 0.125rem; + min-width: 214px; + min-width: 13.375rem; + background-color: #FFFFFF; + color: #183052; + border: 1px solid #183052; + border: 0.0625rem solid #183052; + height: unset; + line-height: 1.2; + font-weight: 400; + width: fit-content; } -.un_link-confirmation__content--text ul li ul li::before, -.un_link-confirmation__content--text ul li ol li::before, -.un_link-confirmation__content--text ol li ul li::before, -.un_link-confirmation__content--text ol li ol li::before { - left: -24px; +body .updateContactDetails .switch-btn:hover, +.page-mygov-auth-account .updateContactDetails .switch-btn:hover { + color: #FFFFFF; + background-color: #254A7E; + border-color: #254A7E; } -.un_link-confirmation__content--text > ul, -.un_link-confirmation__content--text > ol { - margin: 20px 0 40px; +body .updateContactDetails .update-contact-tile, +.page-mygov-auth-account .updateContactDetails .update-contact-tile { + max-width: 927px; + max-width: 57.9375rem; + margin-bottom: 20px; + margin-bottom: 1.25rem; + margin-top: 30px; + margin-top: 1.875rem; } -.un_link-confirmation__content--text ul { - position: relative; +body .updateContactDetails .update-contact-tile[aria-label="Enter code"], body .updateContactDetails .update-contact-tile[aria-label="Change the email address we send notifications to"], body .updateContactDetails .update-contact-tile[aria-label="Change the mobile number we send notifications to"], +.page-mygov-auth-account .updateContactDetails .update-contact-tile[aria-label="Enter code"], +.page-mygov-auth-account .updateContactDetails .update-contact-tile[aria-label="Change the email address we send notifications to"], +.page-mygov-auth-account .updateContactDetails .update-contact-tile[aria-label="Change the mobile number we send notifications to"] { + margin-top: 0; } -.un_link-confirmation__content--text ul li { - /* styling of the blue bullet on the left of outer lis */ +body .updateContactDetails .update-contact-tile[aria-label="Enter code"] input, body .updateContactDetails .update-contact-tile[aria-label="Change the email address we send notifications to"] input, body .updateContactDetails .update-contact-tile[aria-label="Change the mobile number we send notifications to"] input, +.page-mygov-auth-account .updateContactDetails .update-contact-tile[aria-label="Enter code"] input, +.page-mygov-auth-account .updateContactDetails .update-contact-tile[aria-label="Change the email address we send notifications to"] input, +.page-mygov-auth-account .updateContactDetails .update-contact-tile[aria-label="Change the mobile number we send notifications to"] input { + margin-bottom: 0; } -.un_link-confirmation__content--text ul li::before { - content: ""; - position: absolute; - top: 12px; - left: -26px; - width: 4px; - height: 4px; - background-color: #525252; - border-radius: 50%; +body .updateContactDetails .update-contact-tile[aria-label="Change the email address we send notifications to"] .input-group, body .updateContactDetails .update-contact-tile[aria-label="Change the mobile number we send notifications to"] .input-group, +.page-mygov-auth-account .updateContactDetails .update-contact-tile[aria-label="Change the email address we send notifications to"] .input-group, +.page-mygov-auth-account .updateContactDetails .update-contact-tile[aria-label="Change the mobile number we send notifications to"] .input-group { + margin-bottom: 31px; + margin-bottom: 1.9375rem; } -.un_link-confirmation__content--text ol { - counter-reset: step-counter; +body .updateContactDetails .update-contact-tile[aria-label="Enter code"], +.page-mygov-auth-account .updateContactDetails .update-contact-tile[aria-label="Enter code"] { + margin-top: 20px; + margin-top: 1.25rem; } -.un_link-confirmation__content--text ol li { - counter-increment: step-counter; +body .updateContactDetails .update-contact-tile[aria-label="Enter code"] .input-group, +.page-mygov-auth-account .updateContactDetails .update-contact-tile[aria-label="Enter code"] .input-group { + margin-bottom: 0; } -.un_link-confirmation__content--text ol li::before { - content: counter(step-counter); - color: #006CE0; - position: absolute; - left: -30px; +@media only screen and (min-width: 48em) { + body .updateContactDetails .update-contact-tile[aria-label="Enter code"], +.page-mygov-auth-account .updateContactDetails .update-contact-tile[aria-label="Enter code"] { + margin-top: 23px; + margin-top: 1.4375rem; + } } -.un_link-confirmation__content--text.is-bg-white ul, -.un_link-confirmation__content--text.is-bg-white ol { - background: #FFFFFF; +body .updateContactDetails .update-contact-tile label, +.page-mygov-auth-account .updateContactDetails .update-contact-tile label { + font-weight: 500; } -.un_link-confirmation__content--text.is-bg-white > ul { - padding: 0 30px 0 27px; +body .updateContactDetails .update-contact-tile .update-contact-head, +.page-mygov-auth-account .updateContactDetails .update-contact-tile .update-contact-head { + overflow-wrap: break-word; + word-wrap: break-word; + -ms-word-break: break-all; + word-break: break-all; + word-break: break-word; + hyphens: auto; + margin-bottom: 30px; + margin-bottom: 1.875rem; } -.un_link-confirmation__content--text.is-bg-white > ol { - padding: 0 30px 0 57px; +body .updateContactDetails .update-contact-tile .update-contact-head div, +.page-mygov-auth-account .updateContactDetails .update-contact-tile .update-contact-head div { + overflow-wrap: break-word; + word-wrap: break-word; + -ms-word-break: break-all; + word-break: break-all; + word-break: break-word; + hyphens: auto; } -.un_link-confirmation__content--text.is-bg-white > ol > li::before { - width: 26px; - height: 26px; - background: #006CE0; - border-radius: 50%; - color: #FFFFFF; - display: flex; - justify-content: center; - align-items: center; - font-size: 14px; - font-weight: bold; - top: 2px; - left: -57px; +body .updateContactDetails .update-contact-tile .update-contact-head span, +.page-mygov-auth-account .updateContactDetails .update-contact-tile .update-contact-head span { + font-weight: 700; + display: inline; + margin-top: 0; } -.un_link-confirmation a { - margin: 10px 10px 0 0; +@media only screen and (min-width: 48em) { + body .updateContactDetails .update-contact-tile .update-contact-head, +.page-mygov-auth-account .updateContactDetails .update-contact-tile .update-contact-head { + margin-bottom: 34px; + margin-bottom: 2.125rem; + } } -.un_link-confirmation h1 { - font-size: 2em; +body .updateContactDetails .update-contact-tile .update-contact-popup p:not(:last-child), +body .updateContactDetails .update-contact-tile .update-contact-popup .p:not(:last-child), +.page-mygov-auth-account .updateContactDetails .update-contact-tile .update-contact-popup p:not(:last-child), +.page-mygov-auth-account .updateContactDetails .update-contact-tile .update-contact-popup .p:not(:last-child) { + margin-bottom: 8px; + margin-bottom: 0.5rem; } - -.unlinked-services-tile { - display: flex; - flex-direction: column; - background-color: #FFFFFF; - border-bottom: 0.0625rem solid #CCCCCC; - padding: 1.25rem 0.625rem; +body .updateContactDetails .update-contact-tile .update-contact-info, +.page-mygov-auth-account .updateContactDetails .update-contact-tile .update-contact-info { + border-radius: 5px; + border-radius: 0.3125rem; + max-width: 927px; + max-width: 57.9375rem; + margin-bottom: 20px; + margin-bottom: 1.25rem; + margin-top: 32px; + margin-top: 2rem; + padding: 15px 20px 15px 25px; + padding: 0.9375rem 1.25rem 0.9375rem 1.5625rem; + background-color: rgba(0, 121, 202, 0.1); + border-left: 6px solid #006CE0; + border-left: 0.375rem solid #006CE0; } -.unlinked-services-tile h2 { +body .updateContactDetails .update-contact-tile .update-contact-info p, +body .updateContactDetails .update-contact-tile .update-contact-info .p, +.page-mygov-auth-account .updateContactDetails .update-contact-tile .update-contact-info p, +.page-mygov-auth-account .updateContactDetails .update-contact-tile .update-contact-info .p { + font-family: "Roboto", sans-serif; + font-size: 16px; + line-height: 1.15; color: #000000; + margin: 0; } -.unlinked-services-tile__section-heading-border { - border-bottom: 0.125rem solid #525252; -} -.unlinked-services-tile__block { - display: flex; - flex-flow: row nowrap; - align-items: center; - justify-content: space-between; -} -.unlinked-services-tile__block--title { - font-size: var(--font-size-16); -} -.unlinked-services-tile__block--btn-label { - padding: 0.3125rem 1.04375rem; - border: 0.125rem solid #BBBCBC; - color: #183052; -} -.unlinked-services-tile__block--btn-label:hover { - cursor: pointer; -} -@media (max-width: 639px) { - .unlinked-services-tile__block--btn-label { - display: none; - } -} -.unlinked-services-tile__block--btn-icon { - display: none; +body .updateContactDetails .update-contact-tile .update-contact-info p strong, +body .updateContactDetails .update-contact-tile .update-contact-info .p strong, +.page-mygov-auth-account .updateContactDetails .update-contact-tile .update-contact-info p strong, +.page-mygov-auth-account .updateContactDetails .update-contact-tile .update-contact-info .p strong { + font-size: 16px; + line-height: 1.15; + margin: 0; + color: #000000; } -@media (max-width: 639px) { - .unlinked-services-tile__block--btn-icon { - display: block; - width: 1.2rem; - height: 1.4rem; - background: white url("styles/resources/assets/icons/chevron-right-black.svg") no-repeat center; - background-size: 1.5rem; - } +body .updateContactDetails .update-contact-tile .update-contact-resend-code, +.page-mygov-auth-account .updateContactDetails .update-contact-tile .update-contact-resend-code { + margin-top: 23px; + margin-top: 1.4375rem; } - -.payments-carousel-container .react-multi-carousel-item { - height: 300px; +body .updateContactDetails .update-contact-tile .update-contact-resend-code, +body .updateContactDetails .update-contact-tile .update-contact-resend-code *:not(.accordion), +.page-mygov-auth-account .updateContactDetails .update-contact-tile .update-contact-resend-code, +.page-mygov-auth-account .updateContactDetails .update-contact-tile .update-contact-resend-code *:not(.accordion) { + font-weight: 400; } - -.payments-carousel-item { - flex-direction: column; - justify-content: space-between; - padding: 20px; +body .updateContactDetails .update-contact-tile .update-contact-resend-code div, +.page-mygov-auth-account .updateContactDetails .update-contact-tile .update-contact-resend-code div { + margin-top: 5px; + margin-top: 0.3125rem; } -.payments-carousel-item:hover .payments-carousel-link-icon { - transform: translate(3px, -3px); +body .updateContactDetails .update-contact-tile .update-contact-resend-code h3, +.page-mygov-auth-account .updateContactDetails .update-contact-tile .update-contact-resend-code h3 { + margin-bottom: 0; } -.payments-carousel-item img.logo { - height: 24px; - width: 24px; - min-height: 24px; - min-width: 24px; +body .updateContactDetails .update-contact-tile .update-contact-resend-code p, +body .updateContactDetails .update-contact-tile .update-contact-resend-code .p, +.page-mygov-auth-account .updateContactDetails .update-contact-tile .update-contact-resend-code p, +.page-mygov-auth-account .updateContactDetails .update-contact-tile .update-contact-resend-code .p { + margin-top: 10px; + margin-top: 0.625rem; + margin-bottom: 30px; + margin-bottom: 1.875rem; } -.payments-carousel-item span { - font-family: "Roboto", sans-serif; - color: #525252; - font-size: 16px; - line-height: 24px; - font-weight: normal; - color: #101820; - font-weight: 700; - margin-top: 12px; - margin-bottom: 10px; - display: block; +body .updateContactDetails .update-contact-tile .update-contact-resend-code p a, +body .updateContactDetails .update-contact-tile .update-contact-resend-code p button, +body .updateContactDetails .update-contact-tile .update-contact-resend-code .p a, +body .updateContactDetails .update-contact-tile .update-contact-resend-code .p button, +.page-mygov-auth-account .updateContactDetails .update-contact-tile .update-contact-resend-code p a, +.page-mygov-auth-account .updateContactDetails .update-contact-tile .update-contact-resend-code p button, +.page-mygov-auth-account .updateContactDetails .update-contact-tile .update-contact-resend-code .p a, +.page-mygov-auth-account .updateContactDetails .update-contact-tile .update-contact-resend-code .p button { + color: var(--system-blue-120); + padding-left: 0; + padding-right: 0; + background-color: transparent; + text-decoration: underline; } -.theme-dark .payments-carousel-item span { - color: #FFFFFF; +body .updateContactDetails .update-contact-tile .update-contact-resend-code p a:after, +body .updateContactDetails .update-contact-tile .update-contact-resend-code p button:after, +body .updateContactDetails .update-contact-tile .update-contact-resend-code .p a:after, +body .updateContactDetails .update-contact-tile .update-contact-resend-code .p button:after, +.page-mygov-auth-account .updateContactDetails .update-contact-tile .update-contact-resend-code p a:after, +.page-mygov-auth-account .updateContactDetails .update-contact-tile .update-contact-resend-code p button:after, +.page-mygov-auth-account .updateContactDetails .update-contact-tile .update-contact-resend-code .p a:after, +.page-mygov-auth-account .updateContactDetails .update-contact-tile .update-contact-resend-code .p button:after { + background: none; + content: ""; + width: auto; + height: auto; } -.theme-dark .payments-carousel-item span { - color: #FFFFFF; +body .updateContactDetails .update-contact-tile .update-contact-resend-code p a:hover, +body .updateContactDetails .update-contact-tile .update-contact-resend-code p button:hover, +body .updateContactDetails .update-contact-tile .update-contact-resend-code .p a:hover, +body .updateContactDetails .update-contact-tile .update-contact-resend-code .p button:hover, +.page-mygov-auth-account .updateContactDetails .update-contact-tile .update-contact-resend-code p a:hover, +.page-mygov-auth-account .updateContactDetails .update-contact-tile .update-contact-resend-code p button:hover, +.page-mygov-auth-account .updateContactDetails .update-contact-tile .update-contact-resend-code .p a:hover, +.page-mygov-auth-account .updateContactDetails .update-contact-tile .update-contact-resend-code .p button:hover { + text-decoration: none; } -.payments-carousel-item p { +body .updateContactDetails .update-contact-tile input.invalid-input, +.page-mygov-auth-account .updateContactDetails .update-contact-tile input.invalid-input { + border: 2px solid var(--system-red-120); + border: 0.125rem solid var(--system-red-120); +} +body .updateContactDetails .update-contact-tile p, +body .updateContactDetails .update-contact-tile .p, +.page-mygov-auth-account .updateContactDetails .update-contact-tile p, +.page-mygov-auth-account .updateContactDetails .update-contact-tile .p { font-family: "Roboto", sans-serif; - color: #525252; font-size: 16px; - line-height: 24px; - font-weight: normal; - font-size: 14px; - line-height: 20px; - margin-top: 0; + line-height: 1.15; + color: #000000; + margin: 0; } -.theme-dark .payments-carousel-item p { - color: #FFFFFF; +body .updateContactDetails .update-contact-tile p strong, +body .updateContactDetails .update-contact-tile .p strong, +.page-mygov-auth-account .updateContactDetails .update-contact-tile p strong, +.page-mygov-auth-account .updateContactDetails .update-contact-tile .p strong { + font-size: 16px; + line-height: 1.15; + margin: 0; + color: #000000; } -.payments-carousel-item .payments-carousel-link { - position: relative; - display: block; - margin-top: 0; - color: #006CE0; - margin-bottom: 0; - font-size: 14px; - font-weight: 500; +body .updateContactDetails .update-contact-tile p.top-content, +.page-mygov-auth-account .updateContactDetails .update-contact-tile p.top-content { + margin-bottom: 12px; + margin-bottom: 0.75rem; } -.payments-carousel-item .carousel-cta { +body .updateContactDetails .update-contact-tile .inline-error-section, +.page-mygov-auth-account .updateContactDetails .update-contact-tile .inline-error-section { + margin-top: 1px; + margin-top: 0.0625rem; + margin-bottom: 9px; + margin-bottom: 0.5625rem; display: flex; + flex-flow: row nowrap; align-items: center; - justify-content: space-between; } -.payments-carousel-item .payments-carousel-link-icon { - width: 18px; - width: 1.125rem; - height: 18px; - height: 1.125rem; - min-width: 18px; - min-width: 1.125rem; - display: block; - height: 18px; - width: 18px; - background-size: contain; - background-position: center; +body .updateContactDetails .update-contact-tile .inline-error-section .error_icon, +.page-mygov-auth-account .updateContactDetails .update-contact-tile .inline-error-section .error_icon { + background-size: 14px; + background-size: 0.875rem; + height: 16px; + height: 1rem; + width: 14px; + width: 0.875rem; + min-width: 14px; + min-width: 0.875rem; + margin-right: 7px; + margin-right: 0.4375rem; + background-position: 0px 1px; + background-position: 0rem 0.0625rem; + background-image: url("styles/resources/assets/icons/API warning @40.svg"); background-repeat: no-repeat; - transition: transform 150ms ease-out; - backface-visibility: hidden; + display: inline-block; } - -.update-channel-content h2:first-of-type { - margin-bottom: 0; +body .updateContactDetails .update-contact-tile .inline-error-section p.invalidMessage, +.page-mygov-auth-account .updateContactDetails .update-contact-tile .inline-error-section p.invalidMessage { + margin: 1px 0 0 0; + margin: 0.0625rem 0 0 0; + font-size: 14px; + font-size: 0.875rem; + display: flex; + align-items: center; + color: var(--system-red-120); + font-weight: 500; + line-height: 1.0714285714; } -.update-channel-content .container { - max-width: 927px; - max-width: 57.9375rem; +body .updateContactDetails .update-contact-tile .btn, +.page-mygov-auth-account .updateContactDetails .update-contact-tile .btn { + margin-bottom: 15px; + margin-bottom: 0.9375rem; + padding: 5px; + padding: 0.3125rem; + width: 160px; + width: 10rem; + height: 50px; + height: 3.125rem; + min-width: 0; + flex: 1; } -.update-channel-content__sample-content { - display: flex; - flex-direction: column; - align-content: center; +body .updateContactDetails .update-contact-tile .btn:hover:not([disabled]):not(.disabled), +.page-mygov-auth-account .updateContactDetails .update-contact-tile .btn:hover:not([disabled]):not(.disabled) { + color: #FFFFFF; + background-color: #254A7E; } -.update-channel-content__content { - display: flex; - flex-wrap: wrap; +body .updateContactDetails .update-contact-tile .btn.is-loading:before, +.page-mygov-auth-account .updateContactDetails .update-contact-tile .btn.is-loading:before { + left: 0; + right: 0; + margin: auto; } -.update-channel-content__content .subheader { - font-weight: 700; +body .updateContactDetails .update-contact-tile .btn-primary:not([disabled]):not(.disabled), +.page-mygov-auth-account .updateContactDetails .update-contact-tile .btn-primary:not([disabled]):not(.disabled) { + color: #183052; + background-color: #99E1F3; } -.update-channel-content__content .content-selection { - padding-top: 0; - display: inline !important; +body .updateContactDetails .update-contact-tile .btn-secondary:not([disabled]):not(.disabled), +.page-mygov-auth-account .updateContactDetails .update-contact-tile .btn-secondary:not([disabled]):not(.disabled) { + color: #183052; + border: 2px solid #183052; + border: 0.125rem solid #183052; + background-color: #FFFFFF; } -.update-channel-content__content .content-area { - display: flex; +body .updateContactDetails .update-contact-tile .btn-group, +.page-mygov-auth-account .updateContactDetails .update-contact-tile .btn-group { + margin-right: -6px; + margin-right: -0.375rem; + margin-left: -6px; + margin-left: -0.375rem; + margin-bottom: -15px; + margin-bottom: -0.9375rem; + display: inline-flex; flex-flow: row wrap; flex: 1 1 auto; + min-width: 100%; + gap: 0; } -.update-channel-content__content .content-area legend { - font-weight: 400; - margin: 0; -} -.update-channel-content__content .content-area legend p { - margin-top: 19px; - margin-top: 1.1875rem; - margin-bottom: 20px; - margin-bottom: 1.25rem; +body .updateContactDetails .update-contact-tile .btn-group > *, +.page-mygov-auth-account .updateContactDetails .update-contact-tile .btn-group > * { + margin-right: 6px; + margin-right: 0.375rem; + margin-left: 6px; + margin-left: 0.375rem; } @media only screen and (min-width: 48em) { - .update-channel-content__content .content-area legend p { - margin-top: 23px; - margin-top: 1.4375rem; - margin-bottom: 22px; - margin-bottom: 1.375rem; + body .updateContactDetails .update-contact-tile .btn-group, +.page-mygov-auth-account .updateContactDetails .update-contact-tile .btn-group { + min-width: 0; } } -.update-channel-content__content .content-area > fieldset { - flex: 1 1 auto; - margin: 0; +body .updateContactDetails .contact-details-tiles .update-details-tile:not(:first-of-type), +.page-mygov-auth-account .updateContactDetails .contact-details-tiles .update-details-tile:not(:first-of-type) { + border-top: 0 none; } -.update-channel-content__content .content-area > fieldset .input-group:first-child { +body .updateContactDetails .update-details-tile, +.page-mygov-auth-account .updateContactDetails .update-details-tile { + padding: 13px 23px 13px 0; + padding: 0.8125rem 1.4375rem 0.8125rem 0; + min-height: 69px; + min-height: 4.3125rem; + background-color: unset; + box-shadow: unset; + border-radius: unset; + margin-bottom: 0; margin-top: 0; + border: 0 none; + border-bottom: 1px solid #CCCCCC; + border-bottom: 0.0625rem solid #CCCCCC; + border-top: 1px solid #CCCCCC; + border-top: 0.0625rem solid #CCCCCC; } -@media only screen and (min-width: 48em) { - .update-channel-content__content .content-area > fieldset .input-group:first-child { - margin-top: 11.61px; - margin-top: 0.725625rem; - } +body .updateContactDetails .update-details-tile .para-link .link.highlight, body .updateContactDetails .update-details-tile .para-link .highlight.linked-services__rightInternalLink, +.page-mygov-auth-account .updateContactDetails .update-details-tile .para-link .link.highlight, +.page-mygov-auth-account .updateContactDetails .update-details-tile .para-link .highlight.linked-services__rightInternalLink { + padding: 10px; + padding: 0.625rem; + border-radius: 2px; + border-radius: 0.125rem; + margin-top: 10px; + margin-top: 0.625rem; + font-size: 15px; + font-size: 0.9375rem; + text-decoration: none; + border: 1px solid #183052; + border: ren(1px) solid #183052; + color: #183052; + line-height: 1.2; } -.update-channel-content__content .content-area .selection-options { - display: flex; - flex-direction: column; +body .updateContactDetails .update-details-tile .para-link .link.highlight::after, body .updateContactDetails .update-details-tile .para-link .highlight.linked-services__rightInternalLink::after, +.page-mygov-auth-account .updateContactDetails .update-details-tile .para-link .link.highlight::after, +.page-mygov-auth-account .updateContactDetails .update-details-tile .para-link .highlight.linked-services__rightInternalLink::after { + display: none; } -.update-channel-content__content .content-area .selection-options legend, -.update-channel-content__content .content-area .selection-options legend p { - margin: 0; - font-weight: 400; - color: #333333; +body .updateContactDetails .update-details-tile .para-link .link.highlight span.linkIcon, body .updateContactDetails .update-details-tile .para-link .highlight.linked-services__rightInternalLink span.linkIcon, +.page-mygov-auth-account .updateContactDetails .update-details-tile .para-link .link.highlight span.linkIcon, +.page-mygov-auth-account .updateContactDetails .update-details-tile .para-link .highlight.linked-services__rightInternalLink span.linkIcon { + margin-right: 9.77px; + margin-right: 0.610625rem; + width: 11.82px; + width: 0.73875rem; + height: 11.82px; + height: 0.73875rem; + display: inline-block; + background: no-repeat; + background-image: url("styles/resources/assets/icons/edit-icon.svg"); + background-size: contain; + background-position: center; } -@media only screen and (min-width: 48em) { - .update-channel-content__content .content-area .selection-options fieldset legend { - position: absolute; - } - .update-channel-content__content .content-area .selection-options fieldset .input-group:first-of-type { - margin-top: 56px; - margin-top: 3.5rem; - } +body .updateContactDetails .update-details-tile .para-link .link.highlight:hover, body .updateContactDetails .update-details-tile .para-link .highlight.linked-services__rightInternalLink:hover, +.page-mygov-auth-account .updateContactDetails .update-details-tile .para-link .link.highlight:hover, +.page-mygov-auth-account .updateContactDetails .update-details-tile .para-link .highlight.linked-services__rightInternalLink:hover { + background-color: #254A7E; + color: #FFFFFF; + border: 1px solid #254A7E; + border: 0.0625rem solid #254A7E; } -.update-channel-content__content .content-area .selection-options label.content-selection { - margin-left: 15px; - margin-left: 0.9375rem; +body .updateContactDetails .update-details-tile .para-link .link.highlight:hover span.linkIcon, body .updateContactDetails .update-details-tile .para-link .highlight.linked-services__rightInternalLink:hover span.linkIcon, +.page-mygov-auth-account .updateContactDetails .update-details-tile .para-link .link.highlight:hover span.linkIcon, +.page-mygov-auth-account .updateContactDetails .update-details-tile .para-link .highlight.linked-services__rightInternalLink:hover span.linkIcon { + background-image: url("styles/resources/assets/icons/edit-icon-white.svg"); } @media only screen and (min-width: 48em) { - .update-channel-content__content .content-area .selection-options { - float: left; + body .updateContactDetails .update-details-tile .para-link .link.highlight, body .updateContactDetails .update-details-tile .para-link .highlight.linked-services__rightInternalLink, +.page-mygov-auth-account .updateContactDetails .update-details-tile .para-link .link.highlight, +.page-mygov-auth-account .updateContactDetails .update-details-tile .para-link .highlight.linked-services__rightInternalLink { + margin-top: 6.95px; + margin-top: 0.434375rem; } } -.update-channel-content__content .content-area .sample-content { - padding: 0 16px 16px 0; - padding: 0 1rem 1rem 0; - margin-top: 20px; - margin-top: 1.25rem; - background-color: #EDEDED; - display: flex; - flex-direction: row; +body .updateContactDetails .update-details-tile, +body .updateContactDetails .update-details-tile > .tile__wrapper, +.page-mygov-auth-account .updateContactDetails .update-details-tile, +.page-mygov-auth-account .updateContactDetails .update-details-tile > .tile__wrapper { + flex-flow: row wrap; + justify-content: space-between; +} +body .updateContactDetails .update-details-tile .tile__header, +body .updateContactDetails .update-details-tile > .tile__wrapper .tile__header, +.page-mygov-auth-account .updateContactDetails .update-details-tile .tile__header, +.page-mygov-auth-account .updateContactDetails .update-details-tile > .tile__wrapper .tile__header { + display: block; flex: 1 1 auto; - z-index: 400; + align-items: center; } -.update-channel-content__content .content-area .sample-content b, -.update-channel-content__content .content-area .sample-content strong { - background-color: var(--system-blue-40); +body .updateContactDetails .update-details-tile .tile__header .skeleton, +body .updateContactDetails .update-details-tile > .tile__wrapper .tile__header .skeleton, +.page-mygov-auth-account .updateContactDetails .update-details-tile .tile__header .skeleton, +.page-mygov-auth-account .updateContactDetails .update-details-tile > .tile__wrapper .tile__header .skeleton { + flex: 1 1 auto; } -.update-channel-content__content .content-area .sample-content .info-icon { - width: 17px; - width: 1.0625rem; - height: 17px; - height: 1.0625rem; - min-width: 17px; - min-width: 1.0625rem; - display: block; - height: 17px; - width: 17px; - background-size: contain; - background-position: center; - background-repeat: no-repeat; - margin: 14px 10px 14px 14px; - margin: 0.875rem 0.625rem 0.875rem 0.875rem; - min-width: 17px; - min-width: 1.0625rem; - background-image: url("styles/resources/assets/icons/icon-info-black.svg"); +body .updateContactDetails .update-details-tile .tile__header .heading, +body .updateContactDetails .update-details-tile > .tile__wrapper .tile__header .heading, +.page-mygov-auth-account .updateContactDetails .update-details-tile .tile__header .heading, +.page-mygov-auth-account .updateContactDetails .update-details-tile > .tile__wrapper .tile__header .heading { + overflow-wrap: break-word; + word-wrap: break-word; + -ms-word-break: break-all; + word-break: break-all; + word-break: break-word; +} +body .updateContactDetails .update-details-tile .tile__header div.heading, +body .updateContactDetails .update-details-tile > .tile__wrapper .tile__header div.heading, +.page-mygov-auth-account .updateContactDetails .update-details-tile .tile__header div.heading, +.page-mygov-auth-account .updateContactDetails .update-details-tile > .tile__wrapper .tile__header div.heading { + margin: 0; +} +body .updateContactDetails .update-details-tile .tile__header div.heading > h3, +body .updateContactDetails .update-details-tile > .tile__wrapper .tile__header div.heading > h3, +.page-mygov-auth-account .updateContactDetails .update-details-tile .tile__header div.heading > h3, +.page-mygov-auth-account .updateContactDetails .update-details-tile > .tile__wrapper .tile__header div.heading > h3 { + overflow-wrap: break-word; + word-wrap: break-word; + -ms-word-break: break-all; + word-break: break-all; + word-break: break-word; + margin-right: 23.57px; + margin-right: 1.473125rem; + width: 114px; + width: 7.125rem; + min-width: 114px; + min-width: 7.125rem; + color: var(--dark-navy); +} +body .updateContactDetails .update-details-tile .tile__header div.heading > p, +body .updateContactDetails .update-details-tile .tile__header div.heading > .p, +body .updateContactDetails .update-details-tile > .tile__wrapper .tile__header div.heading > p, +body .updateContactDetails .update-details-tile > .tile__wrapper .tile__header div.heading > .p, +.page-mygov-auth-account .updateContactDetails .update-details-tile .tile__header div.heading > p, +.page-mygov-auth-account .updateContactDetails .update-details-tile .tile__header div.heading > .p, +.page-mygov-auth-account .updateContactDetails .update-details-tile > .tile__wrapper .tile__header div.heading > p, +.page-mygov-auth-account .updateContactDetails .update-details-tile > .tile__wrapper .tile__header div.heading > .p { + overflow-wrap: break-word; + word-wrap: break-word; + -ms-word-break: break-all; + word-break: break-all; + word-break: break-word; + color: var(--dark-navy); } @media only screen and (min-width: 48em) { - .update-channel-content__content .content-area .sample-content .info-icon { - width: 24px; - width: 1.5rem; - height: 24px; - height: 1.5rem; - min-width: 24px; - min-width: 1.5rem; - display: block; - height: 24px; - width: 24px; - background-size: contain; - background-position: center; - background-repeat: no-repeat; - min-width: 24px; - min-width: 1.5rem; - margin: 18px; - margin: 1.125rem; + body .updateContactDetails .update-details-tile .tile__header, +body .updateContactDetails .update-details-tile > .tile__wrapper .tile__header, +.page-mygov-auth-account .updateContactDetails .update-details-tile .tile__header, +.page-mygov-auth-account .updateContactDetails .update-details-tile > .tile__wrapper .tile__header { + padding-right: 24px; + padding-right: 1.5rem; + display: flex; + align-items: center; } } -.update-channel-content__content .content-area .sample-content p { - margin: 0; +body .updateContactDetails .update-details-tile .update-channel-content__content strong, +body .updateContactDetails .update-details-tile > .tile__wrapper .update-channel-content__content strong, +.page-mygov-auth-account .updateContactDetails .update-details-tile .update-channel-content__content strong, +.page-mygov-auth-account .updateContactDetails .update-details-tile > .tile__wrapper .update-channel-content__content strong { + font-weight: 400; } -.update-channel-content__content .content-area .sample-content p:first-of-type { - margin-bottom: 16px; - margin-bottom: 1rem; +body .updateContactDetails .update-details-tile > .tile__wrapper, +.page-mygov-auth-account .updateContactDetails .update-details-tile > .tile__wrapper { + flex-flow: column wrap; } -.update-channel-content__content .content-area .sample-content .message-content h3 { - margin: 14px 0; - margin: 0.875rem 0; - font-size: 16px; - font-size: 1rem; - font-family: "Roboto", sans-serif; - font-weight: 700; - line-height: 1.1875; +body .updateContactDetails .update-details-tile > .tile__wrapper .tile__header div.heading, +.page-mygov-auth-account .updateContactDetails .update-details-tile > .tile__wrapper .tile__header div.heading { + flex-flow: column wrap; +} +body .updateContactDetails .update-details-tile > .tile__wrapper .tile__header div.heading > p, +.page-mygov-auth-account .updateContactDetails .update-details-tile > .tile__wrapper .tile__header div.heading > p { + margin-top: 10px; + margin-top: 0.625rem; +} +body .updateContactDetails .update-details-tile > .tile__wrapper .para-link, +.page-mygov-auth-account .updateContactDetails .update-details-tile > .tile__wrapper .para-link { + margin-left: 0; } @media only screen and (min-width: 48em) { - .update-channel-content__content .content-area .sample-content .message-content h3 { - font-size: 18px; - font-size: 1.125rem; - margin: 20px 0; - margin: 1.25rem 0; - line-height: 1.2222222222; + body .updateContactDetails .update-details-tile > .tile__wrapper, +.page-mygov-auth-account .updateContactDetails .update-details-tile > .tile__wrapper { + flex-flow: row nowrap; + } + body .updateContactDetails .update-details-tile > .tile__wrapper .tile__header div.heading, +.page-mygov-auth-account .updateContactDetails .update-details-tile > .tile__wrapper .tile__header div.heading { + flex-flow: row nowrap; + align-items: center; + } + body .updateContactDetails .update-details-tile > .tile__wrapper .tile__header div.heading > p, +body .updateContactDetails .update-details-tile > .tile__wrapper .tile__header div.heading > .p, +.page-mygov-auth-account .updateContactDetails .update-details-tile > .tile__wrapper .tile__header div.heading > p, +.page-mygov-auth-account .updateContactDetails .update-details-tile > .tile__wrapper .tile__header div.heading > .p { + margin-top: 0; + } + body .updateContactDetails .update-details-tile > .tile__wrapper .para-link, +.page-mygov-auth-account .updateContactDetails .update-details-tile > .tile__wrapper .para-link { + margin-left: auto; + } + body .updateContactDetails .update-details-tile > .tile__wrapper .para-link .link, body .updateContactDetails .update-details-tile > .tile__wrapper .para-link .linked-services__rightInternalLink, +.page-mygov-auth-account .updateContactDetails .update-details-tile > .tile__wrapper .para-link .link, +.page-mygov-auth-account .updateContactDetails .update-details-tile > .tile__wrapper .para-link .linked-services__rightInternalLink { + display: inline-flex; + align-items: center; } } @media only screen and (min-width: 48em) { - .update-channel-content__content .content-area .sample-content { - padding: 0 20px 20px 0; - padding: 0 1.25rem 1.25rem 0; - max-width: 411.18px; - max-width: 25.69875rem; - margin-left: auto; - float: right; - margin-top: 0; + body .updateContactDetails .update-details-tile, +.page-mygov-auth-account .updateContactDetails .update-details-tile { + padding-top: 9.5px; + padding-top: 0.59375rem; + padding-bottom: 9.5px; + padding-bottom: 0.59375rem; + padding-left: 20px; + padding-left: 1.25rem; } } -.update-channel-content__content .content-area .button-container { +body .updateContactDetails .update-notification-tile, +.page-mygov-auth-account .updateContactDetails .update-notification-tile { + margin-bottom: 20px; + margin-bottom: 1.25rem; margin-top: 20px; margin-top: 1.25rem; } -.update-channel-content__content .content-area .button-container .btn-primary { - border-radius: 5px; - border-radius: 0.3125rem; - min-width: 180px; - min-width: 11.25rem; - width: 180px; - width: 11.25rem; - color: #183052; - background-color: #99E1F3; - border: none; - font-weight: 500; - cursor: pointer; +body .updateContactDetails .update-notification-tile > .tile__wrapper .tile__header div.heading > h3, +.page-mygov-auth-account .updateContactDetails .update-notification-tile > .tile__wrapper .tile__header div.heading > h3 { + min-width: 152px; + min-width: 9.5rem; + width: fit-content; } -.update-channel-content__content .content-area .button-container .btn-primary:hover { - color: #FFFFFF; - background-color: #254A7E; - border: none; +body .updateContactDetails .emergency-status, +.page-mygov-auth-account .updateContactDetails .emergency-status { + max-width: 927px; + max-width: 57.9375rem; + width: inherit; + border: 2px solid #C3362B; + border: 0.125rem solid #C3362B; + flex-direction: column; + margin-top: 0; } -@media only screen and (min-width: 48em) { - .update-channel-content__content .content-area .button-container { - margin-top: 15.61px; - margin-top: 0.975625rem; - float: left; - clear: left; - } +body .updateContactDetails .emergency-status.is-form-error, +.page-mygov-auth-account .updateContactDetails .emergency-status.is-form-error { + margin-top: 0px; + margin-top: 0rem; } -@media (max-width: 47.9375em) { - .update-channel-content__content .content-area { - flex-direction: column; - } +body .updateContactDetails .emergency-status.is-resolved, +.page-mygov-auth-account .updateContactDetails .emergency-status.is-resolved { + border-color: #1A9F50; } -@media only screen and (min-width: 77.75em) { - .update-channel-content__content .content-area { - max-width: none; - } +body .updateContactDetails .emergency-status.is-resolved .icon, +.page-mygov-auth-account .updateContactDetails .emergency-status.is-resolved .icon { + background-color: #1A9F50; } -.update-channel-content .input-group input[type=radio] + .check { - width: 20px; - width: 1.25rem; - height: 20px; - height: 1.25rem; - margin-top: 0; +body .updateContactDetails .emergency-status.is-resolved .icon h2::before, +.page-mygov-auth-account .updateContactDetails .emergency-status.is-resolved .icon h2::before { + background-image: url("styles/resources/assets/icons/Success @24 green.svg"); } -.update-channel-content .input-group input[type=radio] + .check::after { - width: 10px; - width: 0.625rem; - height: 10px; - height: 0.625rem; +@media only screen and (min-width: 40em) { + body .updateContactDetails .emergency-status, +.page-mygov-auth-account .updateContactDetails .emergency-status { + flex-direction: row; + } } -.update-channel-content .input-group input[type=radio]:checked + .check { - background-color: unset; - border-color: #183052; +body .updateContactDetails .emergency-status .icon, +.page-mygov-auth-account .updateContactDetails .emergency-status .icon { + padding: 8px 14px; + padding: 0.5rem 0.875rem; + margin-left: -1px; + margin-left: -0.0625rem; + background-color: #C3362B; + width: 100%; + justify-content: flex-start; } -.update-channel-content .input-group input[type=radio]:checked + .check::after { - background-color: #183052; +@media only screen and (min-width: 40em) { + body .updateContactDetails .emergency-status .icon, +.page-mygov-auth-account .updateContactDetails .emergency-status .icon { + width: 53px; + width: 3.3125rem; + height: auto; + } } - -.serviceNameUpdateInfo { - padding: 5px; - padding: 0.3125rem; - border-radius: 5px; - border-radius: 0.3125rem; - border-left: 3px solid #006BDF; - border-left: 0.1875rem solid #006BDF; - background-color: #F0FBFF; - max-width: 75%; - display: flex; - flex-direction: row; +body .updateContactDetails .emergency-status .icon img, +.page-mygov-auth-account .updateContactDetails .emergency-status .icon img { + display: none; } -.serviceNameUpdateInfo img { - padding: 5px; - padding: 0.3125rem; - max-width: 25px; - max-width: 1.5625rem; - display: flex; - flex-direction: column; - height: fit-content; +@media only screen and (min-width: 40em) { + body .updateContactDetails .emergency-status .icon img, +.page-mygov-auth-account .updateContactDetails .emergency-status .icon img { + width: 53px; + width: 3.3125rem; + display: block; + } } -.serviceNameUpdateInfo p { +body .updateContactDetails .emergency-status .icon h2, +.page-mygov-auth-account .updateContactDetails .emergency-status .icon h2 { + font-size: 15px; + font-size: 0.9375rem; display: flex; - flex-direction: column; - margin-top: 0; - margin-bottom: 0; + color: var(--dark-navy); + font-weight: 700; + color: #FFFFFF; + margin: 0; + line-height: 1.2666666667; } - -.radio-input-row { - display: flex; - flex-direction: row; - padding: 0; +@media only screen and (min-width: 40em) { + body .updateContactDetails .emergency-status .icon h2, +.page-mygov-auth-account .updateContactDetails .emergency-status .icon h2 { + display: none; + } } -.radio-input-row input[type=radio]:checked + .check + label { - font-weight: 400; +body .updateContactDetails .emergency-status .icon h2::before, +.page-mygov-auth-account .updateContactDetails .emergency-status .icon h2::before { + width: 14px; + width: 0.875rem; + height: 14px; + height: 0.875rem; + margin: 2px 8px 0 0; + margin: 0.125rem 0.5rem 0 0; + background-size: contain; + background-position: center; + background-repeat: no-repeat; + background-image: url("styles/resources/assets/icons/API warning @40.svg"); + background-color: #FFFFFF; + border-radius: 50%; + content: ""; } - -.updateContactDetails a[href]:hover { - text-decoration: none; +body .updateContactDetails .emergency-status .content, +.page-mygov-auth-account .updateContactDetails .emergency-status .content { + padding: 8px 14px 14px; + padding: 0.5rem 0.875rem 0.875rem; } -.updateContactDetails button.link.action.highlight, .updateContactDetails button.action.highlight.linked-services__rightInternalLink { - padding: 0; +body .updateContactDetails .emergency-status .content h2, +.page-mygov-auth-account .updateContactDetails .emergency-status .content h2 { + color: var(--dark-navy); + font-weight: 700; + font-size: var(--default-font-size); + display: none; + line-height: 1.25; } -.updateContactDetails .text-dark { - font-size: 16px; - font-size: 1rem; - color: #101820; - margin-bottom: 0; - line-height: 1.625; +body .updateContactDetails .emergency-status .content h2::first-line, +.page-mygov-auth-account .updateContactDetails .emergency-status .content h2::first-line { + line-height: 1.0625; } -@media (max-width: 47.9375em) { - .updateContactDetails .desktop-text { - border: 0; - clip: rect(0, 0, 0, 0); - height: 1px; - margin: -1px; - overflow: hidden; - padding: 0; - position: absolute; - white-space: nowrap; - width: 1px; +@media only screen and (min-width: 40em) { + body .updateContactDetails .emergency-status .content h2, +.page-mygov-auth-account .updateContactDetails .emergency-status .content h2 { + display: block; } } -.updateContactDetails .para-link { - font-family: "Roboto", sans-serif; - font-size: 16px; - line-height: 1.15; - color: #000000; +body .updateContactDetails .emergency-status .content p, +.page-mygov-auth-account .updateContactDetails .emergency-status .content p { + font-size: 14px; + font-size: 0.875rem; margin: 0; - align-self: flex-start; + line-height: 1.4285714286; } -.updateContactDetails .para-link strong { - font-size: 16px; - line-height: 1.15; - margin: 0; - color: #000000; +@media only screen and (min-width: 40em) { + body .updateContactDetails .emergency-status .content p, +.page-mygov-auth-account .updateContactDetails .emergency-status .content p { + margin: 7px 0 0 0; + margin: 0.4375rem 0 0 0; + font-size: var(--default-font-size); + } + body .updateContactDetails .emergency-status .content p::first-line, +.page-mygov-auth-account .updateContactDetails .emergency-status .content p::first-line { + line-height: 1.3125; + } +} +@media only screen and (min-width: 40em) { + body .updateContactDetails .emergency-status .content, +.page-mygov-auth-account .updateContactDetails .emergency-status .content { + padding: 16px 27px; + padding: 1rem 1.6875rem; + } } -.updateContactDetails .heading { +body .update-contact-modal-description p, +body .update-contact-modal-description .p, +.page-mygov-auth-account .update-contact-modal-description p, +.page-mygov-auth-account .update-contact-modal-description .p { font-family: "Roboto", sans-serif; font-size: 16px; line-height: 1.15; color: #000000; margin: 0; } -.updateContactDetails .heading strong { +body .update-contact-modal-description p strong, +body .update-contact-modal-description .p strong, +.page-mygov-auth-account .update-contact-modal-description p strong, +.page-mygov-auth-account .update-contact-modal-description .p strong { font-size: 16px; line-height: 1.15; margin: 0; color: #000000; } -.updateContactDetails h2 { - font-family: "Roboto", sans-serif; - margin-top: 30px; - margin-top: 1.875rem; - margin-bottom: 20px; - margin-bottom: 1.25rem; - line-height: 1.2083333333; -} -@media only screen and (min-width: 48em) { - .updateContactDetails h2 { - margin-top: 51px; - margin-top: 3.1875rem; - } -} -.updateContactDetails > h2:first-of-type { - margin-top: 0; -} -.updateContactDetails .icon-uppercase { - text-transform: uppercase; +body .update-contact-modal-description p:not(:last-child), +.page-mygov-auth-account .update-contact-modal-description p:not(:last-child) { + margin-bottom: 1em; } -.updateContactDetails .input-group { +body .update-contact-popup, +.page-mygov-auth-account .update-contact-popup { + padding: 18px 20px 20px 16px; + padding: 1.125rem 1.25rem 1.25rem 1rem; margin-top: 20px; margin-top: 1.25rem; - margin-bottom: 20px; - margin-bottom: 1.25rem; -} -.updateContactDetails .input-group label { - font-size: 16px; - font-size: 1rem; - padding: 0; - margin-bottom: 0; - font-weight: 400; + background-color: var(--system-yellow-60); + display: inline-flex; } -.updateContactDetails .input-group > input, -.updateContactDetails .input-group > select, -.updateContactDetails .input-group > textarea { - margin-top: 12px; - margin-top: 0.75rem; - margin-bottom: 8px; - margin-bottom: 0.5rem; +body .update-contact-popup .notification-icon, +.page-mygov-auth-account .update-contact-popup .notification-icon { + width: 24px; + width: 1.5rem; + height: 24px; + height: 1.5rem; + min-width: 24px; + min-width: 1.5rem; + display: block; + background-size: contain; + background-position: center; + background-repeat: no-repeat; + margin-right: 22px; + margin-right: 1.375rem; + min-width: 26px; + min-width: 1.625rem; + height: 23px; + height: 1.4375rem; + width: auto; + background-image: url("styles/resources/assets/icons/icon-alert-warning.svg"); } @media only screen and (min-width: 48em) { - .updateContactDetails .input-group > input, -.updateContactDetails .input-group > select, -.updateContactDetails .input-group > textarea { - margin-top: 13px; - margin-top: 0.8125rem; - margin-bottom: 9px; - margin-bottom: 0.5625rem; + body .update-contact-popup, +.page-mygov-auth-account .update-contact-popup { + margin-top: 23px; + margin-top: 1.4375rem; + } + body .update-contact-popup br, +.page-mygov-auth-account .update-contact-popup br { + margin-left: 4px; + margin-left: 0.25rem; + content: ""; } -} -.updateContactDetails .input-group input { - border-width: 1px; - border-width: 0.0625rem; - border-radius: 2px; - border-radius: 0.125rem; - border-color: #000000; - padding: 0; - width: auto; - height: auto; -} -.updateContactDetails .input-group input[name=code], .updateContactDetails .input-group input[name=mobile], .updateContactDetails .input-group input[name=email] { - max-width: 424px; - max-width: 26.5rem; -} -.updateContactDetails .input-group input[name=mobile] { - width: 100%; -} -.updateContactDetails .input-group input:focus { - border-width: 2px; - border-width: 0.125rem; - outline-offset: 2px; - outline-offset: 0.125rem; - outline: 2px solid #000000; - outline: 0.125rem solid #000000; -} -.updateContactDetails .input-group input, -.updateContactDetails .input-group select, -.updateContactDetails .input-group textarea { - height: 50px; - height: 3.125rem; - padding: 15px; - padding: 0.9375rem; - width: 100%; -} -.updateContactDetails .input-group input[type=checkbox], .updateContactDetails .input-group input[type=radio] { - width: 16px; - width: 1rem; - height: 16px; - height: 1rem; - opacity: 0; - padding: 0; -} -.updateContactDetails .input-group .input-row { - padding: 0 2.5px; - padding: 0 0.15625rem; - margin-left: 8.5px; - margin-left: 0.53125rem; - margin-right: 8.5px; - margin-right: 0.53125rem; - min-height: 34px; - min-height: 2.125rem; - display: flex; - align-items: flex-start; - max-width: 100%; - max-width: fit-content; -} -.updateContactDetails .input-group .input-row input[type=checkbox] ~ label, -.updateContactDetails .input-group .input-row input[type=radio] ~ label { - padding: 0; - margin-bottom: 0; } @media only screen and (min-width: 48em) { - .updateContactDetails .input-group .input-row { - align-items: center; + body .updateContactDetails .updateContactDetails--wrapper, +.page-mygov-auth-account .updateContactDetails .updateContactDetails--wrapper { + max-width: 670px; + max-width: 41.875rem; } } -.updateContactDetails .input-group .input-row input[type=checkbox] + .check { - border-radius: 2px; - border-radius: 0.125rem; -} -.updateContactDetails .input-group .input-row input[type=checkbox]:checked + .check + label { - font-weight: 400; + +.cmp-video .section-heading { + margin: 60px 0 20px; } -.updateContactDetails .input-group .input-row:focus-within { - outline-offset: 6.5px; - outline-offset: 0.40625rem; - outline: 2px inset #254A7E; - outline: 0.125rem solid #254A7E; +.cmp-video .sub-title { + font-family: "Roboto", sans-serif; + font-size: 16px; + font-size: 1rem; + line-height: 1.5; + font-weight: normal; + color: #525252; + font-size: 14px; + font-size: 0.875rem; + line-height: 1.3571428571; + display: block; + padding: 20px 0; + border-bottom: 1px solid #DDDDDD; + margin-bottom: 40px; } -.updateContactDetails .input-group .input-row > .input-row__wrapper { - margin-right: -6.5px; - margin-right: -0.40625rem; - margin-left: -6.5px; - margin-left: -0.40625rem; - display: flex; - align-items: center; +.theme-dark .cmp-video .sub-title { + color: #FFFFFF; } -.updateContactDetails .input-group .input-row > .input-row__wrapper > *:not([type=checkbox]), -.updateContactDetails .input-group .input-row > .input-row__wrapper > .check { - margin-right: 6.5px; - margin-right: 0.40625rem; - margin-left: 6.5px; - margin-left: 0.40625rem; +.cmp-video iframe { + display: block; } -.updateContactDetails .input-group .input-row > .input-row__wrapper > .check { - margin-top: 0; - margin-bottom: 0; + +.cmp-embed { + margin: 20px 0 60px; } -@media only screen and (min-width: 48em) { - .updateContactDetails .input-group { - margin-bottom: 23px; - margin-bottom: 1.4375rem; +@media only screen and (min-width: 64em) { + .cmp-embed { + margin-bottom: 80px; } } -.updateContactDetails .selection-options .radio-input-row { - min-height: 34px; - min-height: 2.125rem; - align-items: center; -} -.updateContactDetails .selection-options .input-group { - margin-top: 10px; - margin-top: 0.625rem; - margin-bottom: 10px; - margin-bottom: 0.625rem; + +.video-carousel-container { + width: 100%; } -.updateContactDetails .selection-options .input-group:last-child { - margin-bottom: 0; +.video-carousel-container .react-multi-carousel-item { + height: 444px; } -.updateContactDetails .update-contact-tile .input-group + .inline-error-section { - margin-top: -21px; - margin-top: -1.3125rem; - margin-bottom: 31px; - margin-bottom: 1.9375rem; + +.video-carousel-item { + position: relative; + z-index: 400; } -.updateContactDetails .update-details-tile, -.updateContactDetails .update-notification-tile { - min-height: 69px; - min-height: 4.3125rem; +.video-carousel-item::before { + width: 52px; + width: 3.25rem; + height: 52px; + height: 3.25rem; + min-width: 52px; + min-width: 3.25rem; + content: ""; + position: absolute; + top: 0; + left: 0; + background-size: contain; + background-position: center; + background-repeat: no-repeat; + transition-property: transform, margin; + transition-duration: 300ms; + transition-timing-function: ease; + background-image: url("styles/resources/assets/icons/video-play.svg"); + top: 64px; + left: calc(50% - 26px); + z-index: 401; } -.updateContactDetails .switch-btn { - padding: 9px 13px; - padding: 0.5625rem 0.8125rem; - font-size: 15px; - font-size: 0.9375rem; - border-radius: 2px; - border-radius: 0.125rem; - background-color: #FFFFFF; - color: #183052; - border: 1px solid #183052; - height: unset; - line-height: 1.2; +.video-carousel-item:hover::before, .video-carousel-item:focus::before { + background-image: url("styles/resources/assets/icons/video-hover.svg"); } -.updateContactDetails .switch-btn:hover { - color: #FFFFFF; - background-color: #254A7E; - border-color: #254A7E; +.video-carousel-item img { + position: absolute; + top: 0; + border-radius: 5px 5px 0 0; + height: 180px; + width: 100%; + object-fit: cover; } -@media (max-width: 63.9375em) { - .updateContactDetails .switch-btn { - min-width: 214px; - min-width: 13.375rem; - width: fit-content; +@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) { + .video-carousel-item img { + width: 100%; + height: auto; + transform: translateY(-38%); } } -.updateContactDetails .update-contact-tile { - max-width: 927px; - max-width: 57.9375rem; - margin-bottom: 20px; - margin-bottom: 1.25rem; - margin-top: 30px; - margin-top: 1.875rem; +.video-carousel-item .item-box { + width: 100%; + height: 250px; + padding: 20px; + background: #FFFFFF; + align-self: flex-end; + margin-left: auto; + display: flex; + flex-direction: column; + position: relative; } -.updateContactDetails .update-contact-tile[aria-label="Enter code"], .updateContactDetails .update-contact-tile[aria-label="Change the email address we send notifications to"], .updateContactDetails .update-contact-tile[aria-label="Change the mobile number we send notifications to"] { +.video-carousel-item .item-box .title { + font-family: "Roboto", sans-serif; + font-size: 16px; + font-size: 1rem; + line-height: 1.5; + font-weight: normal; + color: #525252; + color: #101820; + font-weight: 700; margin-top: 0; + margin-bottom: 10px; + display: block; } -.updateContactDetails .update-contact-tile[aria-label="Enter code"] input, .updateContactDetails .update-contact-tile[aria-label="Change the email address we send notifications to"] input, .updateContactDetails .update-contact-tile[aria-label="Change the mobile number we send notifications to"] input { - margin-bottom: 0; -} -.updateContactDetails .update-contact-tile[aria-label="Change the email address we send notifications to"] .input-group, .updateContactDetails .update-contact-tile[aria-label="Change the mobile number we send notifications to"] .input-group { - margin-bottom: 31px; - margin-bottom: 1.9375rem; +.theme-dark .video-carousel-item .item-box .title { + color: #FFFFFF; } -.updateContactDetails .update-contact-tile[aria-label="Enter code"] { - margin-top: 20px; - margin-top: 1.25rem; +.theme-dark .video-carousel-item .item-box .title { + color: #FFFFFF; } -.updateContactDetails .update-contact-tile[aria-label="Enter code"] .input-group { - margin-bottom: 0; +.video-carousel-item .item-box .description { + font-family: "Roboto", sans-serif; + font-size: 16px; + font-size: 1rem; + line-height: 1.5; + font-weight: normal; + color: #525252; } -@media only screen and (min-width: 48em) { - .updateContactDetails .update-contact-tile[aria-label="Enter code"] { - margin-top: 23px; - margin-top: 1.4375rem; - } +.theme-dark .video-carousel-item .item-box .description { + color: #FFFFFF; } -.updateContactDetails .update-contact-tile label { - font-weight: 500; +.video-carousel-item .item-box .video-length { + font-family: "Roboto", sans-serif; + font-size: 16px; + font-size: 1rem; + line-height: 1.5; + font-weight: normal; + color: #525252; + position: relative; + margin: 0 0 20px; + padding-left: 25px; } -.updateContactDetails .update-contact-tile .update-contact-head { - overflow-wrap: break-word; - word-wrap: break-word; - -ms-word-break: break-all; - word-break: break-all; - word-break: break-word; - hyphens: auto; - margin-bottom: 30px; - margin-bottom: 1.875rem; +.theme-dark .video-carousel-item .item-box .video-length { + color: #FFFFFF; } -.updateContactDetails .update-contact-tile .update-contact-head div { - overflow-wrap: break-word; - word-wrap: break-word; - -ms-word-break: break-all; - word-break: break-all; - word-break: break-word; - hyphens: auto; +.video-carousel-item .item-box .video-length::before { + width: 18px; + width: 1.125rem; + height: 18px; + height: 1.125rem; + min-width: 18px; + min-width: 1.125rem; + content: ""; + position: absolute; + top: 0; + left: 0; + background-size: contain; + background-position: center; + background-repeat: no-repeat; + transition-property: transform, margin; + transition-duration: 300ms; + transition-timing-function: ease; + background-image: url("styles/resources/assets/icons/icon-time-grey.svg"); + top: 2px; } -.updateContactDetails .update-contact-tile .update-contact-head span { - font-weight: 700; - display: inline; - margin-top: 0; +.video-carousel-item .item-box .video-date { + font-family: "Roboto", sans-serif; + font-size: 16px; + font-size: 1rem; + line-height: 1.5; + font-weight: normal; + color: #525252; + position: absolute; + bottom: 0; + margin-bottom: 20px; } -@media only screen and (min-width: 48em) { - .updateContactDetails .update-contact-tile .update-contact-head { - margin-bottom: 34px; - margin-bottom: 2.125rem; - } +.theme-dark .video-carousel-item .item-box .video-date { + color: #FFFFFF; } -.updateContactDetails .update-contact-tile .update-contact-popup p:not(:last-child), -.updateContactDetails .update-contact-tile .update-contact-popup .p:not(:last-child) { - margin-bottom: 8px; - margin-bottom: 0.5rem; +.video-carousel-item:hover i, .video-carousel-item:focus i { + margin-left: 5px; } -.updateContactDetails .update-contact-tile .update-contact-info { - border-radius: 5px; - border-radius: 0.3125rem; - max-width: 927px; - max-width: 57.9375rem; - margin-bottom: 20px; - margin-bottom: 1.25rem; - margin-top: 32px; - margin-top: 2rem; - padding: 15px 20px 15px 25px; - padding: 0.9375rem 1.25rem 0.9375rem 1.5625rem; - background-color: rgba(0, 121, 202, 0.1); - border-left: 6px solid #006CE0; - border-left: 0.375rem solid #006CE0; + +.welcome__heading { + margin: 0 0 20px; } -.updateContactDetails .update-contact-tile .update-contact-info p, -.updateContactDetails .update-contact-tile .update-contact-info .p { +.welcome__heading--text { font-family: "Roboto", sans-serif; font-size: 16px; - line-height: 1.15; - color: #000000; - margin: 0; + font-size: 1rem; + line-height: 1.5; + font-weight: normal; + color: #525252; + color: #101820; + display: block; + font-size: 18px !important; } -.updateContactDetails .update-contact-tile .update-contact-info p strong, -.updateContactDetails .update-contact-tile .update-contact-info .p strong { - font-size: 16px; - line-height: 1.15; - margin: 0; - color: #000000; +.theme-dark .welcome__heading--text { + color: #FFFFFF; } -.updateContactDetails .update-contact-tile .update-contact-resend-code { - margin-top: 23px; - margin-top: 1.4375rem; - font-size: medium; +.welcome__heading--text b, +.welcome__heading--text strong { + font-family: "Roboto", sans-serif; + font-size: 16px; + font-size: 1rem; + line-height: 1.5; + font-weight: normal; + color: #525252; + color: #101820; font-weight: 700; } -.updateContactDetails .update-contact-tile .update-contact-resend-code div { - margin-top: 5px; - margin-top: 0.3125rem; +.theme-dark .welcome__heading--text b, +.theme-dark .welcome__heading--text strong { + color: #FFFFFF; } -.updateContactDetails .update-contact-tile .update-contact-resend-code h3 { - margin-bottom: 0; +.theme-dark .welcome__heading--text b, +.theme-dark .welcome__heading--text strong { + color: #FFFFFF; } -.updateContactDetails .update-contact-tile .update-contact-resend-code p, -.updateContactDetails .update-contact-tile .update-contact-resend-code .p { - margin-top: 10px; - margin-top: 0.625rem; - margin-bottom: 30px; - margin-bottom: 1.875rem; +.welcome__personal-detail { + font-family: "Roboto", sans-serif; + font-size: 16px; + font-size: 1rem; + line-height: 1.5; + font-weight: normal; + color: #525252; + color: #101820; + margin-bottom: 6px; } -.updateContactDetails .update-contact-tile .update-contact-resend-code p a, -.updateContactDetails .update-contact-tile .update-contact-resend-code p button, -.updateContactDetails .update-contact-tile .update-contact-resend-code .p a, -.updateContactDetails .update-contact-tile .update-contact-resend-code .p button { - color: var(--system-blue-120); - padding-left: 0; - padding-right: 0; - background-color: transparent; - text-decoration: underline; +.theme-dark .welcome__personal-detail { + color: #FFFFFF; } -.updateContactDetails .update-contact-tile .update-contact-resend-code p a:after, -.updateContactDetails .update-contact-tile .update-contact-resend-code p button:after, -.updateContactDetails .update-contact-tile .update-contact-resend-code .p a:after, -.updateContactDetails .update-contact-tile .update-contact-resend-code .p button:after { - background: none; - content: ""; +.welcome__personal-detail b, +.welcome__personal-detail strong { + font-family: "Roboto", sans-serif; + font-size: 16px; + font-size: 1rem; + line-height: 1.5; + font-weight: normal; + color: #525252; + color: #101820; + font-weight: 700; } -.updateContactDetails .update-contact-tile .update-contact-resend-code p a:hover, -.updateContactDetails .update-contact-tile .update-contact-resend-code p button:hover, -.updateContactDetails .update-contact-tile .update-contact-resend-code .p a:hover, -.updateContactDetails .update-contact-tile .update-contact-resend-code .p button:hover { - text-decoration: none; +.theme-dark .welcome__personal-detail b, +.theme-dark .welcome__personal-detail strong { + color: #FFFFFF; } -.updateContactDetails .update-contact-tile input.invalid-input { - border: 2px solid var(--system-red-120); - border: 0.125rem solid var(--system-red-120); +.theme-dark .welcome__personal-detail b, +.theme-dark .welcome__personal-detail strong { + color: #FFFFFF; } -.updateContactDetails .update-contact-tile p, -.updateContactDetails .update-contact-tile .p { +.welcome__sign-in-detail { font-family: "Roboto", sans-serif; font-size: 16px; - line-height: 1.15; - color: #000000; - margin: 0; -} -.updateContactDetails .update-contact-tile p strong, -.updateContactDetails .update-contact-tile .p strong { - font-size: 16px; - line-height: 1.15; - margin: 0; - color: #000000; + font-size: 1rem; + line-height: 1.5; + font-weight: normal; + color: #525252; + margin: 0 0 40px; } -.updateContactDetails .update-contact-tile p.top-content { - margin-bottom: 12px; - margin-bottom: 0.75rem; +.theme-dark .welcome__sign-in-detail { + color: #FFFFFF; } -.updateContactDetails .update-contact-tile .inline-error-section { - margin-top: 1px; - margin-top: 0.0625rem; - margin-bottom: 9px; - margin-bottom: 0.5625rem; +.welcome__inbox { display: flex; - flex-flow: row nowrap; align-items: center; + margin-top: 40px; + font-family: "Roboto", sans-serif; + font-size: 18px; } -.updateContactDetails .update-contact-tile .inline-error-section .error_icon { - background-size: 14px; - background-size: 0.875rem; - height: 16px; - height: 1rem; - width: 14px; - width: 0.875rem; - min-width: 14px; - min-width: 0.875rem; - margin-right: 7px; - margin-right: 0.4375rem; - background-position: 0px 1px; - background-position: 0rem 0.0625rem; - background-image: url("styles/resources/assets/icons/API warning @40.svg"); +.welcome__inbox--message { + margin-left: 26px; + position: relative; + padding-left: 12px; +} +.welcome__inbox--message::before { + content: ""; + background-image: url("styles/resources/assets/icons/authenticated/icon-inbox.svg"); + width: 26px; + width: 1.625rem; + height: 24px; + height: 1.5rem; + min-width: 26px; + min-width: 1.625rem; + content: ""; + position: absolute; + top: 0; + left: 0; + background-size: contain; + background-position: center; background-repeat: no-repeat; + transition-property: transform, margin; + transition-duration: 300ms; + transition-timing-function: ease; display: inline-block; + left: -26px; + top: 3px; } -.updateContactDetails .update-contact-tile .inline-error-section p.invalidMessage { - margin: 1px 0 0 0; - margin: 0.0625rem 0 0 0; - font-size: 14px; - font-size: 0.875rem; - display: flex; - align-items: center; - color: var(--system-red-120); +.welcome__inbox--link { + color: #006CE0; font-weight: 500; - line-height: 1.0714285714; } -.updateContactDetails .update-contact-tile .btn { - margin-bottom: 15px; - margin-bottom: 0.9375rem; - padding: 5px; - padding: 0.3125rem; - width: 160px; - width: 10rem; - height: 50px; - height: 3.125rem; - min-width: 0; - flex: 1; +.welcome__inbox--link.link, .welcome__inbox--link.linked-services__rightInternalLink { + border-bottom: none; + text-decoration: underline; + padding-left: 5px; } -.updateContactDetails .update-contact-tile .btn:hover:not([disabled]):not(.disabled) { - color: #FFFFFF; - background-color: #254A7E; +.welcome__inbox--link .cta { + margin-left: 7px; } -.updateContactDetails .update-contact-tile .btn.is-loading:before { - left: 0; - right: 0; - margin: auto; +.welcome__next-payment { + display: flex; + align-items: center; + margin-top: 40px; + margin-bottom: 20px; + font-family: "Roboto", sans-serif; + font-size: 18px; + color: #555555; } -.updateContactDetails .update-contact-tile .btn-primary:not([disabled]):not(.disabled) { - color: #183052; - background-color: #99E1F3; +.welcome__next-payment--message { + margin-left: 26px; + position: relative; + padding-left: 12px; + line-height: 25px; } -.updateContactDetails .update-contact-tile .btn-secondary:not([disabled]):not(.disabled) { - color: #183052; - border: 2px solid #183052; - border: 0.125rem solid #183052; - background-color: #FFFFFF; +.welcome__next-payment--message::before { + content: ""; + background-image: url("styles/resources/assets/icons/authenticated/icon-wallet.svg"); + width: 26px; + width: 1.625rem; + height: 24px; + height: 1.5rem; + min-width: 26px; + min-width: 1.625rem; + content: ""; + position: absolute; + top: 0; + left: 0; + background-size: contain; + background-position: center; + background-repeat: no-repeat; + transition-property: transform, margin; + transition-duration: 300ms; + transition-timing-function: ease; + display: inline-block; + left: -26px; + top: 13px; } -.updateContactDetails .update-contact-tile .btn-group { - margin-right: -6px; - margin-right: -0.375rem; - margin-left: -6px; - margin-left: -0.375rem; - margin-bottom: -15px; - margin-bottom: -0.9375rem; - display: inline-flex; - flex-flow: row wrap; - flex: 1 1 auto; - min-width: 100%; - gap: 0; +.welcome__next-payment--message--details { + font-weight: 600; } -.updateContactDetails .update-contact-tile .btn-group > * { - margin-right: 6px; - margin-right: 0.375rem; - margin-left: 6px; - margin-left: 0.375rem; +.welcome__next-payment--link { + color: #006CE0; + font-weight: 500; } -@media only screen and (min-width: 48em) { - .updateContactDetails .update-contact-tile .btn-group { - min-width: 0; - } +.welcome__next-payment--link.link, .welcome__next-payment--link.linked-services__rightInternalLink { + border-bottom: none; + text-decoration: underline; + padding-left: 5px; } -.updateContactDetails .update-notification-tile { - max-width: 927px; - max-width: 57.9375rem; - margin-bottom: 20px; - margin-bottom: 1.25rem; - margin-top: 20px; - margin-top: 1.25rem; - display: flex; - flex-direction: row; - position: relative; +.welcome__next-payment--link .cta { + margin-left: 7px; } -.updateContactDetails .update-notification-tile .header { - overflow-wrap: break-word; - word-wrap: break-word; - -ms-word-break: break-all; - word-break: break-all; - word-break: break-word; - hyphens: auto; - padding-top: 10px; - padding-top: 0.625rem; - padding-bottom: 10px; - padding-bottom: 0.625rem; - padding-left: 16px; - padding-left: 1rem; - display: flex; - flex: 1; - flex-flow: row wrap; - align-items: center; - justify-content: space-between; - border-top: 1px solid #CCCCCC; - border-bottom: 1px solid #CCCCCC; - border-top: 0.0625rem solid #CCCCCC; - border-bottom: 0.0625rem solid #CCCCCC; - height: fit-content; + +.at-a-glance { + font-family: "Roboto", sans-serif; + font-size: 16px; + margin-bottom: 40px; } -.updateContactDetails .update-notification-tile .header .heading { - margin-top: 0; - flex-basis: 70%; +.at-a-glance ul { + list-style: none; + margin: 0; + padding: 0; + display: inline-flex; + align-items: stretch; + flex-direction: column; + color: black; + box-shadow: 0 0 2px rgba(17, 17, 18, 0.2509803922); + width: 100%; } -@media (max-width: 47.9375em) { - .updateContactDetails .update-notification-tile .header div.heading p { - margin-top: 10px; - margin-top: 0.625rem; +@media only screen and (min-width: 77.75em) { + .at-a-glance ul { + flex-direction: row; + } + .at-a-glance ul[data-row-count="1"] { + width: 33.33%; + } + .at-a-glance ul[data-row-count="2"] { + width: 66.66%; } } -.updateContactDetails .update-notification-tile .header div.heading h3 { - width: 152px; - width: 9.5rem; - margin-right: 20px; - margin-right: 1.25rem; -} -.updateContactDetails .update-notification-tile .header .link.highlight, .updateContactDetails .update-notification-tile .header .highlight.linked-services__rightInternalLink { - padding: 10px; - padding: 0.625rem; - border-radius: 2px; - border-radius: 0.125rem; - margin-top: 10px; - margin-top: 0.625rem; - font-size: 15px; - font-size: 0.9375rem; - text-decoration: none; - border: 1px solid #183052; - border: 0.0625rem solid #183052; - color: #183052; - line-height: 1.2; -} -.updateContactDetails .update-notification-tile .header .link.highlight::after, .updateContactDetails .update-notification-tile .header .highlight.linked-services__rightInternalLink::after { - display: none; +.at-a-glance li { + display: flex; + margin: 0; + position: relative; + background-color: #F8F8F8; } -.updateContactDetails .update-notification-tile .header .link.highlight span.linkIcon, .updateContactDetails .update-notification-tile .header .highlight.linked-services__rightInternalLink span.linkIcon { - display: inline-block; - margin-right: 9.77px; - width: 11.82px; - height: 11.82px; - background: no-repeat; - background-image: url("styles/resources/assets/icons/edit-icon.svg"); - background-size: contain; - background-position: center; +.at-a-glance li > * { + display: flex; + align-items: center; + padding: 20px; } -.updateContactDetails .update-notification-tile .header .link.highlight:hover, .updateContactDetails .update-notification-tile .header .highlight.linked-services__rightInternalLink:hover { - background-color: #254A7E; - color: #FFFFFF; - border: 1px solid #254A7E; - border: 0.0625rem solid #254A7E; +.at-a-glance li > a { + color: inherit; + text-decoration: none; + width: 100%; } -.updateContactDetails .update-notification-tile .header .link.highlight:hover span.linkIcon, .updateContactDetails .update-notification-tile .header .highlight.linked-services__rightInternalLink:hover span.linkIcon { - background-image: url("styles/resources/assets/icons/edit-icon-white.svg"); +.at-a-glance li + li::before { + content: ""; + position: absolute; + top: 0; + left: 20px; + height: 1px; + background: #DDDDDD; + width: calc(100% - 40px); } -@media only screen and (min-width: 48em) { - .updateContactDetails .update-notification-tile .header .link.highlight, .updateContactDetails .update-notification-tile .header .highlight.linked-services__rightInternalLink { - margin-top: 6.95px; - margin-top: 0.434375rem; +@media only screen and (min-width: 77.75em) { + .at-a-glance li { + display: inline-flex; + align-items: stretch; + flex: 1; + border-top-width: 1px; + border-bottom-width: 1px; } -} -@media (max-width: 47.9375em) { - .updateContactDetails .update-notification-tile .header { - flex-direction: column; - align-items: start; - padding-left: 0; + .at-a-glance li:first-child { + border-bottom-left-radius: 5px; } - .updateContactDetails .update-notification-tile .header .heading { - flex-direction: column; + .at-a-glance li:last-child { + border-top-right-radius: 5px; + } + .at-a-glance li + li::before { + left: 0; + top: 20px; + width: 1px; + height: calc(100% - 40px); } } -@media only screen and (min-width: 48em) { - .updateContactDetails .update-notification-tile .header { - padding-right: 23px; - padding-right: 1.4375rem; +.at-a-glance__icon { + width: 25px; + height: 25px; + margin-right: 15px; +} +@media only screen and (min-width: 40em) { + .at-a-glance__icon { + width: 44px; + height: 44px; } } -.updateContactDetails .update-notification-tile .header .desc p, -.updateContactDetails .update-notification-tile .header .desc .p { - font-size: 14px; - font-size: 0.875rem; - margin: 0; - line-height: 1.4285714286; +.at-a-glance__emphasised { + text-decoration: underline; + font-style: normal; + color: #006CE0; + font-weight: 500; } -.updateContactDetails .contact-details-tiles .update-details-tile:first-of-type { - border-top: 1px solid #CCCCCC; - border-top: 0.0625rem solid #CCCCCC; +.at-a-glance .wrap-children > * { + display: inline-block; } -.updateContactDetails .update-details-tile { - padding: 13px 23px 13px 0; - padding: 0.8125rem 1.4375rem 0.8125rem 0; - background-color: unset; - box-shadow: unset; - border-radius: unset; - margin-bottom: 0; - margin-top: 0; - border-bottom: 1px solid #CCCCCC; - border-bottom: 0.0625rem solid #CCCCCC; + +.modal__container.page-mygov-auth-account { + border-radius: 5px; + border-radius: 0.3125rem; } -.updateContactDetails .update-details-tile .para-link .link.highlight, .updateContactDetails .update-details-tile .para-link .highlight.linked-services__rightInternalLink { - padding: 10px; - padding: 0.625rem; - border-radius: 2px; - border-radius: 0.125rem; - margin-top: 10px; - margin-top: 0.625rem; - font-size: 15px; - font-size: 0.9375rem; - text-decoration: none; - border: 1px solid #183052; - border: ren(1px) solid #183052; - color: #183052; - line-height: 1.2; +.modal__container.page-mygov-auth-account .modal__content { + border-radius: 5px; + border-radius: 0.3125rem; } -.updateContactDetails .update-details-tile .para-link .link.highlight::after, .updateContactDetails .update-details-tile .para-link .highlight.linked-services__rightInternalLink::after { - display: none; +.modal__container.page-mygov-auth-account .modal__content--common.modal__content .modal-header { + background: transparent; + display: flex; + flex-direction: column; + padding: 2rem 2rem 0 2.5rem; } -.updateContactDetails .update-details-tile .para-link .link.highlight span.linkIcon, .updateContactDetails .update-details-tile .para-link .highlight.linked-services__rightInternalLink span.linkIcon { - margin-right: 9.77px; - margin-right: 0.610625rem; - width: 11.82px; - width: 0.73875rem; - height: 11.82px; - height: 0.73875rem; - display: inline-block; - background: no-repeat; - background-image: url("styles/resources/assets/icons/edit-icon.svg"); +@media (max-width: 639px) { + .modal__container.page-mygov-auth-account .modal__content--common.modal__content .modal-header { + padding: 1.25rem 1rem 0 1.25rem; + } +} +.modal__container.page-mygov-auth-account .modal__content--common.modal__content .modal-header .close { + background: none; + border: none; + position: relative; + top: 0; + right: 0; + width: min-content; + align-self: flex-end; + display: flex; + align-items: baseline; + gap: 0.5rem; + border-radius: 0; + padding: 0; +} +.modal__container.page-mygov-auth-account .modal__content--common.modal__content .modal-header .close i { + width: 14px; + width: 0.875rem; + height: 14px; + height: 0.875rem; + min-width: 14px; + min-width: 0.875rem; + display: block; background-size: contain; background-position: center; + background-repeat: no-repeat; + background-size: auto; + background-image: url("styles/resources/assets/icons/icon-close-black.svg"); +} +.modal__container.page-mygov-auth-account .modal__content--common.modal__content .modal-body { + padding: 0 2.5rem 2.5rem; +} +@media (max-width: 639px) { + .modal__container.page-mygov-auth-account .modal__content--common.modal__content .modal-body { + padding: 0 1rem 1.5rem; + } +} +.modal__container.page-mygov-auth-account .modal__content--common.modal__content .modal-body .cmp-text { + margin: 0.75rem 0 1.5rem; } -.updateContactDetails .update-details-tile .para-link .link.highlight:hover, .updateContactDetails .update-details-tile .para-link .highlight.linked-services__rightInternalLink:hover { + +.assistant-btn { background-color: #254A7E; color: #FFFFFF; - border: 1px solid #254A7E; - border: 0.0625rem solid #254A7E; -} -.updateContactDetails .update-details-tile .para-link .link.highlight:hover span.linkIcon, .updateContactDetails .update-details-tile .para-link .highlight.linked-services__rightInternalLink:hover span.linkIcon { - background-image: url("styles/resources/assets/icons/edit-icon-white.svg"); + width: 100%; + border: none; + padding: 10px 0; + font-size: 16px; } -@media only screen and (min-width: 48em) { - .updateContactDetails .update-details-tile .para-link .link.highlight, .updateContactDetails .update-details-tile .para-link .highlight.linked-services__rightInternalLink { - margin-top: 6.95px; - margin-top: 0.434375rem; +@media only screen and (min-width: 64em) { + .assistant-btn { + display: none; } } -.updateContactDetails .update-details-tile, -.updateContactDetails .update-details-tile > .update-details-tile__wrapper { - flex-flow: row wrap; - justify-content: space-between; + +@media (max-width: 63.9375em) { + .assistant-btn-open { + position: relative; + padding-top: 26px; + } + .assistant-btn-open .assistant-btn-img { + border-radius: 50px; + background-color: #183052; + width: 38px; + height: 38px; + padding: 8px; + position: absolute; + top: -15px; + left: calc(50% - 19px); + } } -.updateContactDetails .update-details-tile .update-details-tile__header, -.updateContactDetails .update-details-tile > .update-details-tile__wrapper .update-details-tile__header { - display: block; - flex: 1 1 auto; - align-items: center; +@media only screen and (min-width: 64em) { + .assistant-btn-open .assistant-up-btn { + transform: rotateZ(90deg); + } } -.updateContactDetails .update-details-tile .update-details-tile__header .skeleton, -.updateContactDetails .update-details-tile > .update-details-tile__wrapper .update-details-tile__header .skeleton { - flex: 1 1 auto; + +.assistant-btn-dsk { + display: none; + background-color: #254A7E; + color: #FFFFFF; + border: none; + font-size: 16px; + width: auto; + padding: 20px; + border-radius: 8px 0 0 8px; } -.updateContactDetails .update-details-tile .update-details-tile__header .heading, -.updateContactDetails .update-details-tile > .update-details-tile__wrapper .update-details-tile__header .heading { - overflow-wrap: break-word; - word-wrap: break-word; - -ms-word-break: break-all; - word-break: break-all; - word-break: break-word; - hyphens: auto; +@media only screen and (min-width: 64em) { + .assistant-btn-dsk { + display: inline-block; + } } -.updateContactDetails .update-details-tile .update-details-tile__header div.heading, -.updateContactDetails .update-details-tile > .update-details-tile__wrapper .update-details-tile__header div.heading { - margin: 0; + +.assistant-btn-img { + vertical-align: middle; } -.updateContactDetails .update-details-tile .update-details-tile__header div.heading > h3, -.updateContactDetails .update-details-tile > .update-details-tile__wrapper .update-details-tile__header div.heading > h3 { - overflow-wrap: break-word; - word-wrap: break-word; - -ms-word-break: break-all; - word-break: break-all; - word-break: break-word; - hyphens: auto; - margin-right: 23.57px; - margin-right: 1.473125rem; - width: 114px; - width: 7.125rem; + +@media only screen and (min-width: 64em) { + .assistant-btn-text { + margin-left: 12px; + display: inline-block; + font-size: 18px; + position: relative; + top: 3px; + } } -.updateContactDetails .update-details-tile .update-details-tile__header div.heading > p, -.updateContactDetails .update-details-tile .update-details-tile__header div.heading > .p, -.updateContactDetails .update-details-tile > .update-details-tile__wrapper .update-details-tile__header div.heading > p, -.updateContactDetails .update-details-tile > .update-details-tile__wrapper .update-details-tile__header div.heading > .p { - overflow-wrap: break-word; - word-wrap: break-word; - -ms-word-break: break-all; - word-break: break-all; - word-break: break-word; - hyphens: auto; + +.assistant-panel { + display: flex; + position: fixed; + bottom: 0px; + height: 0%; + z-index: 30; + right: -400px; } -@media only screen and (min-width: 48em) { - .updateContactDetails .update-details-tile .update-details-tile__header, -.updateContactDetails .update-details-tile > .update-details-tile__wrapper .update-details-tile__header { - display: flex; +@media (max-width: 63.9375em) { + .assistant-panel { + flex-direction: column; + height: 0%; + left: 0px; + width: 100%; + right: unset; } } -.updateContactDetails .update-details-tile .update-channel-content__content strong, -.updateContactDetails .update-details-tile > .update-details-tile__wrapper .update-channel-content__content strong { - font-weight: 400; +@media only screen and (min-width: 64em) { + .assistant-panel { + align-items: center; + height: 100%; + position: fixed; + right: -400px; + top: 0px; + } } -.updateContactDetails .update-details-tile > .update-details-tile__wrapper { - flex-flow: column wrap; + +.assistant-panel-closed { + position: fixed; + z-index: 2; } -.updateContactDetails .update-details-tile > .update-details-tile__wrapper .update-details-tile__header div.heading { - flex-flow: column wrap; +@media (max-width: 63.9375em) { + .assistant-panel-closed { + width: 100%; + bottom: 0px; + } } -.updateContactDetails .update-details-tile > .update-details-tile__wrapper .update-details-tile__header div.heading > p { - margin-top: 10px; - margin-top: 0.625rem; +@media only screen and (min-width: 64em) { + .assistant-panel-closed { + top: 30%; + right: 0px; + } } -.updateContactDetails .update-details-tile > .update-details-tile__wrapper .para-link { - margin-left: 0; + +/*.assistant-panel-open { + @include bp(l) { + right: 0px; + } +}*/ +.assistant-drawer { + background-color: #FFFFFF; + transition: width 0.3s; } -@media only screen and (min-width: 48em) { - .updateContactDetails .update-details-tile > .update-details-tile__wrapper { - flex-flow: row wrap; +@media (max-width: 63.9375em) { + .assistant-drawer { + flex-grow: 1; } - .updateContactDetails .update-details-tile > .update-details-tile__wrapper .update-details-tile__header div.heading { - flex-flow: row wrap; +} +@media only screen and (min-width: 64em) { + .assistant-drawer { + display: inline-block; + border: 1px solid #DAE3E7; + height: 100%; + width: 400px; } - .updateContactDetails .update-details-tile > .update-details-tile__wrapper .update-details-tile__header div.heading > p, -.updateContactDetails .update-details-tile > .update-details-tile__wrapper .update-details-tile__header div.heading > .p { - margin-top: 0; +} + +@media only screen and (min-width: 64em) { + .assistant-drawer-large { + width: 600px; } - .updateContactDetails .update-details-tile > .update-details-tile__wrapper .para-link { - margin-left: auto; +} + +.assistant-drawer-large .assistant-up-btn { + transform: rotateZ(90deg); +} + +.assistant-body { + transition: width 0.4s; + width: 100%; +} + +@media only screen and (min-width: 64em) { + .assistant-open-body { + width: calc(100% - 400px); } } -@media only screen and (min-width: 48em) { - .updateContactDetails .update-details-tile { - padding-top: 9.5px; - padding-top: 0.59375rem; - padding-bottom: 9.5px; - padding-bottom: 0.59375rem; - padding-left: 20px; - padding-left: 1.25rem; + +@media only screen and (min-width: 64em) { + .assistant-open-body-large { + width: calc(100% - 600px); } } -.updateContactDetails .emergency-status { - max-width: 927px; - max-width: 57.9375rem; - width: inherit; - border: 2px solid #C3362B; - border: 0.125rem solid #C3362B; - flex-direction: column; + +.assistant-title { + background-color: #254A7E; + color: #FFFFFF; + width: 100%; + border: none; + padding: 22px 20px 24px 20px; + font-size: 20px; + display: flex; + justify-content: space-between; + align-items: center; } -.updateContactDetails .emergency-status.is-form-error { - margin-top: 0px; - margin-top: 0rem; + +.assistant-iframe { + border: none; + width: 100%; + height: calc(100% - 90px); } -.updateContactDetails .emergency-status.is-resolved { - border-color: #1A9F50; + +.assistant-up-btn { + background-color: transparent; + border: none; + padding: 0; + height: 32px; + width: 32px; + transform: rotateZ(-90deg); + transition: transform 0.3s; } -.updateContactDetails .emergency-status.is-resolved .icon { - background-color: #1A9F50; +@media (max-width: 63.9375em) { + .assistant-up-btn { + display: none; + } } -.updateContactDetails .emergency-status.is-resolved .icon h2::before { - background-image: url("styles/resources/assets/icons/Success @24 green.svg"); + +.assistant-close-btn { + background-color: transparent; + border: none; + padding: 0; + height: 32px; + width: 32px; + margin: 0 0 0 34px; +} + +.last-updated { + font-size: 16px; + color: #000000; + text-align: center; } @media only screen and (min-width: 40em) { - .updateContactDetails .emergency-status { - flex-direction: row; + .last-updated { + text-align: right; } } -.updateContactDetails .emergency-status .icon { - height: 34px; - height: 2.125rem; - padding: 8px 17px; - padding: 0.5rem 1.0625rem; - background-color: #C3362B; - width: 100%; - justify-content: flex-start; +.last-updated div { + top: 12px; + position: relative; + margin: 0 0 40px 0; } @media only screen and (min-width: 40em) { - .updateContactDetails .emergency-status .icon { - width: 53px; - width: 3.3125rem; - height: auto; + .last-updated div { + margin-top: 50px; } } -.updateContactDetails .emergency-status .icon img { - display: none; + +.cmp-last-updated__item-date { + white-space: nowrap; } -@media only screen and (min-width: 40em) { - .updateContactDetails .emergency-status .icon img { - width: 53px; - width: 3.3125rem; - display: block; + +.last-updated:empty { + display: none !important; +} + +.content-list .cmp-image { + margin: 0; +} +@media (min-width: 22.4375em) { + .content-list .cmp-image__image { + width: 124px; + height: 100%; + object-fit: cover; } } -.updateContactDetails .emergency-status .icon h2 { - font-size: 15px; - font-size: 0.9375rem; - display: flex; - color: var(--dark-navy); - font-weight: 700; - color: #FFFFFF; +@media only screen and (min-width: 88.125em) { + .content-list .cmp-image__image { + width: 406px; + height: 218px; + object-fit: cover; + } +} + +.cmp-list { margin: 0; - line-height: 1.2666666667; + padding: 0; } -@media only screen and (min-width: 40em) { - .updateContactDetails .emergency-status .icon h2 { - display: none; +@media only screen and (min-width: 48em) { + .cmp-list { + display: flex; + flex-wrap: wrap; + justify-content: space-between; } } -.updateContactDetails .emergency-status .icon h2::before { - width: 14px; - width: 0.875rem; - height: 14px; - height: 0.875rem; - margin: 2px 8px 0 0; - margin: 0.125rem 0.5rem 0 0; - background-size: contain; - background-position: center; - background-repeat: no-repeat; - background-image: url("styles/resources/assets/icons/API warning @40.svg"); - background-color: #FFFFFF; - border-radius: 50%; - content: ""; + +.cmp-list__item { + margin: 0 0 20px 0; + padding: 0; + list-style-type: none; + border: 2px solid #DDD; + border-radius: 4px; + display: flex; + flex-direction: column; } -.updateContactDetails .emergency-status .content { - padding: 8px 16px; - padding: 0.5rem 1rem; +@media only screen and (min-width: 48em) { + .cmp-list__item { + width: 355px; + } } -.updateContactDetails .emergency-status .content h2 { - color: var(--dark-navy); - font-weight: 700; - font-size: var(--default-font-size); - display: none; - line-height: 1.25; +@media only screen and (min-width: 64em) { + .cmp-list__item { + width: 482px; + } } -.updateContactDetails .emergency-status .content h2::first-line { - line-height: 1.0625; +@media only screen and (min-width: 77.75em) { + .cmp-list__item { + width: 572px; + } } -@media only screen and (min-width: 40em) { - .updateContactDetails .emergency-status .content h2 { - display: block; +@media only screen and (min-width: 88.125em) { + .cmp-list__item { + width: 410px; } } -.updateContactDetails .emergency-status .content p { - font-size: 14px; - font-size: 0.875rem; - margin: 0; - line-height: 1.4285714286; +.cmp-list__item article { + height: 100%; } -@media only screen and (min-width: 40em) { - .updateContactDetails .emergency-status .content p { - margin: 7px 0 0 0; - margin: 0.4375rem 0 0 0; - font-size: var(--default-font-size); + +.cmp-list__item-link { + text-decoration: none; + display: flex; + flex-direction: column; + height: 100%; +} +@media (min-width: 22.4375em) { + .cmp-list__item-link { + flex-direction: row; + justify-content: space-between; } - .updateContactDetails .emergency-status .content p::first-line { - line-height: 1.3125; +} +@media only screen and (min-width: 88.125em) { + .cmp-list__item-link { + flex-direction: column; + justify-content: space-between; } } -@media only screen and (min-width: 40em) { - .updateContactDetails .emergency-status .content { - padding: 16px 27px; - padding: 1rem 1.6875rem; - } +.cmp-list__item-link::after { + content: ""; + background: url(styles/resources/assets/icons/chevron-right-black.svg) no-repeat; + margin: 20px 16px 10px 20px; + width: 32px; + height: 32px; + align-self: end; + min-width: 32px; +} + +.cmp-list__item-text { + margin: 0 0 20px 0; } -.update-contact-modal-description p, -.update-contact-modal-description .p { +.cmp-list__item-title { + margin: 28px 20px 0 20px; + display: block; + font-size: 22px; font-family: "Roboto", sans-serif; - font-size: 16px; - line-height: 1.15; + font-weight: 500; color: #000000; - margin: 0; } -.update-contact-modal-description p strong, -.update-contact-modal-description .p strong { + +.cmp-list__item-description { + margin: 16px 20px 0 20px; + display: block; font-size: 16px; - line-height: 1.15; - margin: 0; + font-family: "Roboto", sans-serif; + font-weight: 300; color: #000000; } -.update-contact-modal-description p:not(:last-child) { - margin-bottom: 1em; -} -.update-contact-popup { - padding: 18px 20px 20px 16px; - padding: 1.125rem 1.25rem 1.25rem 1rem; - margin-top: 20px; - margin-top: 1.25rem; - background-color: var(--system-yellow-60); - display: inline-flex; -} -.update-contact-popup .notification-icon { - width: 24px; - width: 1.5rem; - height: 24px; - height: 1.5rem; - min-width: 24px; - min-width: 1.5rem; - display: block; - height: 24px; - width: 24px; - background-size: contain; - background-position: center; - background-repeat: no-repeat; - margin-right: 22px; - margin-right: 1.375rem; - min-width: 26px; - min-width: 1.625rem; - height: 23px; - height: 1.4375rem; - width: auto; - background-image: url("styles/resources/assets/icons/icon-alert-warning.svg"); +.cmp-global-banners__group { + display: flex; + justify-content: center; + flex-direction: column; } -@media only screen and (min-width: 48em) { - .update-contact-popup { - margin-top: 23px; - margin-top: 1.4375rem; +@media only screen and (min-width: 64em) { + .cmp-global-banners__group { + flex-direction: row; } } - -.updateContactDetails { - padding: 12px; - padding: 0.75rem; +.cmp-global-banners__content { + display: flex; + align-items: flex-start; + width: 100%; + padding: 1.25rem; } -.updateContactDetails.toast__container { - bottom: 40px; - bottom: 2.5rem; - left: 20px; - left: 1.25rem; - position: fixed; - z-index: 1100; - width: fit-content; - max-width: calc(100vw - 40px); - visibility: hidden; - transition: visibility 0s linear 150ms, opacity 150ms linear, transform 150ms ease; - animation: HideToasts 100ms; - animation-fill-mode: forwards; +@media only screen and (min-width: 64em) { + .cmp-global-banners__content { + width: 1024px; + padding: 1.25rem 2.5rem; + } } -.updateContactDetails.toast__container.is-visible { - transition: visibility 0s linear, opacity 150ms linear, transform 150ms ease; - visibility: visible; - animation: ShowToasts 150ms; - animation-fill-mode: forwards; +@media only screen and (min-width: 77.75em) { + .cmp-global-banners__content { + width: 1244px; + } } -@media only screen and (min-width: 64em) { - .updateContactDetails.toast__container { - max-width: 770px; - max-width: 48.125rem; - left: 5vw; +@media only screen and (min-width: 88.125em) { + .cmp-global-banners__content { + width: 1360px; } } -.updateContactDetails .toast__message { - min-height: 43px; - min-height: 2.6875rem; - padding: 0px 46px 0px 60px; - padding: 0rem 2.875rem 0rem 3.75rem; - border-radius: 5px; - border-radius: 0.3125rem; - position: relative; +.cmp-global-banners__header { display: flex; - flex-flow: row nowrap; - background: #006CE0; - color: #101820; - box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.25); - box-shadow: 0 0.125rem 0.375rem 0 rgba(0, 0, 0, 0.25); - transition-property: opacity, transform; - transition-duration: 150ms; - height: auto; align-items: center; - line-height: 1.25; -} -.updateContactDetails .toast__message p { - font-family: "Roboto", sans-serif; - color: #525252; - font-size: 16px; - line-height: 24px; - font-weight: normal; - font-size: 16px; - font-size: 1rem; - margin: 12px 0 12px 0; - margin: 0.75rem 0 0.75rem 0; - color: #101820; - align-self: center; - line-height: 1.25; -} -.theme-dark .updateContactDetails .toast__message p { - color: #FFFFFF; -} -.updateContactDetails .toast__message p strong, -.updateContactDetails .toast__message p b { - font-family: "Roboto", sans-serif; - color: #525252; - font-size: 16px; - line-height: 24px; - font-weight: normal; - color: #101820; - font-weight: 700; - color: #101820; -} -.theme-dark .updateContactDetails .toast__message p strong, -.theme-dark .updateContactDetails .toast__message p b { - color: #FFFFFF; -} -.theme-dark .updateContactDetails .toast__message p strong, -.theme-dark .updateContactDetails .toast__message p b { - color: #FFFFFF; -} -.updateContactDetails .toast__message button.close { - content: ""; - position: absolute; - top: 0; - right: 0; - width: 48px; - height: 100%; - background-size: contain; - background-position: center; - background-repeat: no-repeat; - transition-property: transform, margin, background; - transition-duration: 300ms; - transition-timing-function: ease; - background-size: 14px; - background-size: 0.875rem; - background: url("styles/resources/assets/icons/Close @16.svg") no-repeat; - background-position: center center; -} -.updateContactDetails .toast__message button.close:focus { - outline-color: #000000; + justify-content: space-between; + width: 100%; + padding: 0.625rem 1.25rem; } -.updateContactDetails .toast__message.is-error { - background: #dc3548; +.cmp-global-banners__header.critical::before, .cmp-global-banners__header.warning::before, .cmp-global-banners__header.info::before, .cmp-global-banners__content.critical::before, .cmp-global-banners__content.warning::before, .cmp-global-banners__content.info::before { + width: 1.5em; + height: 1.5em; } -.updateContactDetails .toast__message.is-error .toast__icon { - background-image: url("styles/resources/assets/icons/icon-warning-white.svg"); - background-color: #af2939; +@media only screen and (min-width: 48em) { + .cmp-global-banners__header.critical::before, .cmp-global-banners__header.warning::before, .cmp-global-banners__header.info::before, .cmp-global-banners__content.critical::before, .cmp-global-banners__content.warning::before, .cmp-global-banners__content.info::before { + width: 2.125em; + height: 2.125em; + } } -.updateContactDetails .toast__message.is-information { - background: #016ce0; +.cmp-global-banners__header.critical::before, .cmp-global-banners__content.critical::before { + content: url("styles/resources/assets/icons/report.svg"); } -.updateContactDetails .toast__message.is-information .toast__icon { - background-image: url("styles/resources/assets/icons/icon-info-white.svg"); - background-color: #0055b3; +.cmp-global-banners__header.warning::before, .cmp-global-banners__content.warning::before { + content: url("styles/resources/assets/icons/report-problem.svg"); } -.updateContactDetails .toast__message.is-success { - background: #A7D0B1; +.cmp-global-banners__header.info::before, .cmp-global-banners__content.info::before { + content: url("styles/resources/assets/icons/info.svg"); } -.updateContactDetails .toast__message.is-success .toast__icon { - background-image: url("styles/resources/assets/icons/icon-check-circle-white.svg"); - background-color: #1A9F50; +.cmp-global-banners__message-list { + margin: 0; + padding: 0; + list-style: none; + margin: 0 2.75rem; + flex: 1; } -.updateContactDetails .toast__icon { - content: ""; - position: absolute; - top: 0; - left: 0; - width: 44px; - height: 100%; - background-size: contain; - background-position: center; - background-repeat: no-repeat; - transition-property: transform, margin; - transition-duration: 300ms; - transition-timing-function: ease; - background-size: 22px; - background-size: 1.375rem; - border-radius: 5px 0 0 5px; - border-radius: 0.3125rem 0 0 0.3125rem; - background-position: center center; +.cmp-global-banners__message-list--mobile { + margin: 0; + padding: 0; + list-style: none; + background: #FFFFFF; + padding: 0 1.25rem; + flex: 1; } -@media only screen and (min-width: 48em) { - .updateContactDetails { - max-width: 670px; - max-width: 41.875rem; - padding: 0; - } +.cmp-global-banners__message-list .cmp-global-banners__message { + padding: 0; } - -.cmp-video .section-heading { - margin: 60px 0 20px; +.cmp-global-banners__message { + padding: 1.25rem 0; + border-bottom: 1px solid #000000; } -.cmp-video .sub-title { - font-family: "Roboto", sans-serif; - color: #525252; - font-size: 16px; - line-height: 24px; - font-weight: normal; - font-size: 14px; - line-height: 20px; - display: block; - padding: 20px 0; - border-bottom: 1px solid #DDDDDD; - margin-bottom: 40px; +.cmp-global-banners__message:last-of-type { + border-bottom: none; } -.theme-dark .cmp-video .sub-title { - color: #FFFFFF; +.cmp-global-banners__message:not(:first-of-type) { + padding-top: 1.25rem; } -.cmp-video iframe { - display: block; +.cmp-global-banners__message:not(:last-of-type) { + padding-bottom: 1.25rem; } - -.cmp-embed { - margin: 20px 0 60px; +.cmp-global-banners__message p { + color: #000000; + font-size: 1rem; + font-weight: 300; + line-height: 1.25; + margin: 0 0 0.75rem; } @media only screen and (min-width: 64em) { - .cmp-embed { - margin-bottom: 80px; + .cmp-global-banners__message p { + font-size: 1.125rem; + line-height: 1.875; } } - -.video-carousel-container { - width: 100%; +.cmp-global-banners__message p:only-of-type { + margin: 0; } -.video-carousel-container .react-multi-carousel-item { - height: 444px; +.cmp-global-banners__message p:last-of-type { + margin: 0; } - -.video-carousel-item { - position: relative; - z-index: 400; +.cmp-global-banners__message a { + color: #006d88; + font-weight: 400; } -.video-carousel-item::before { - content: ""; - position: absolute; - top: 0; - left: 0; - width: 52px; - height: 52px; - background-size: contain; - background-position: center; - background-repeat: no-repeat; - transition-property: transform, margin; - transition-duration: 300ms; - transition-timing-function: ease; - background-image: url("styles/resources/assets/icons/video-play.svg"); - top: 64px; - left: calc(50% - 26px); - z-index: 401; +@media only screen and (min-width: 48em) { + .cmp-global-banners__message a { + color: #000000; + } } -.video-carousel-item:hover::before, .video-carousel-item:focus::before { - background-image: url("styles/resources/assets/icons/video-hover.svg"); +.cmp-global-banners__button { + font-size: 1rem; + font-weight: 400; + border: none; + background: none; + padding: 0; + cursor: pointer; + white-space: nowrap; + border-bottom: 1px solid #000000; } -.video-carousel-item img { - position: absolute; - top: 0; - border-radius: 5px 5px 0 0; - height: 180px; - width: 100%; - object-fit: cover; +@media only screen and (min-width: 64em) { + .cmp-global-banners__button { + font-size: 1.125rem; + } } -@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) { - .video-carousel-item img { - width: 100%; - height: auto; - transform: translateY(-38%); +.cmp-global-banners__button::after { + content: url("styles/resources/assets/icons/close.svg"); + display: inline-block; + width: 0.75em; + height: 0.75em; + margin-left: 0.5rem; +} +@media only screen and (min-width: 48em) { + .cmp-global-banners__button::after { + width: 0.875em; + height: 0.875em; } } -.video-carousel-item .item-box { - width: 100%; - height: 250px; - padding: 20px; - background: #FFFFFF; - align-self: flex-end; - margin-left: auto; +.cmp-global-banners .critical { + background: #fbb4af; +} +.cmp-global-banners .warning { + background: #fff389; +} +.cmp-global-banners .info { + background: #a6d5fa; +} + +.cmp-separator__horizontal-rule { + margin: 2.25rem 0; + border-top: 1px solid #d9d9d6; +} + +.cmp-sign-in-teaser { display: flex; flex-direction: column; - position: relative; + padding: 2.25rem 0; } -.video-carousel-item .item-box .title { - font-family: "Roboto", sans-serif; - color: #525252; - font-size: 16px; - line-height: 24px; - font-weight: normal; - color: #101820; - font-weight: 700; - margin-top: 0; - margin-bottom: 10px; - display: block; +@media only screen and (min-width: 64em) { + .cmp-sign-in-teaser { + flex-direction: row; + padding: 3.75rem 0; + } } -.theme-dark .video-carousel-item .item-box .title { - color: #FFFFFF; +.cmp-sign-in-teaser > .cmp-experiencefragment { + width: 100%; + margin-bottom: 24px; } -.theme-dark .video-carousel-item .item-box .title { - color: #FFFFFF; +@media only screen and (min-width: 64em) { + .cmp-sign-in-teaser > .cmp-experiencefragment { + max-width: 340px; + margin-right: 90px; + margin-bottom: 0; + } } -.video-carousel-item .item-box .description { +.cmp-sign-in-teaser > .cmp-experiencefragment h2, +.cmp-sign-in-teaser > .cmp-experiencefragment .h2 { font-family: "Roboto", sans-serif; - color: #525252; - font-size: 16px; - line-height: 24px; - font-weight: normal; -} -.theme-dark .video-carousel-item .item-box .description { - color: #FFFFFF; + color: #000000; + line-height: 1.25; + letter-spacing: 0.001em; + font-weight: 400; + font-size: 2.25rem; + margin: 0; + margin-bottom: 1.125rem; } -.video-carousel-item .item-box .video-length { +.cmp-sign-in-teaser > .cmp-experiencefragment h3, +.cmp-sign-in-teaser > .cmp-experiencefragment .h3 { font-family: "Roboto", sans-serif; - color: #525252; - font-size: 16px; - line-height: 24px; - font-weight: normal; - position: relative; - margin: 0 0 20px; - padding-left: 25px; + color: #000000; + line-height: 1.25; + letter-spacing: 0; + font-weight: 500; + font-size: 1.625rem; + margin: 0; + margin-bottom: 1.125rem; } -.theme-dark .video-carousel-item .item-box .video-length { - color: #FFFFFF; +.cmp-sign-in-teaser > .cmp-experiencefragment p { + font-family: "Roboto", sans-serif; + color: #000000; + line-height: 1.5556; + font-weight: 300; + font-size: 1.125rem; } -.video-carousel-item .item-box .video-length::before { - content: ""; - position: absolute; - top: 0; - left: 0; - width: 18px; - height: 18px; - background-size: contain; - background-position: center; - background-repeat: no-repeat; - transition-property: transform, margin; - transition-duration: 300ms; - transition-timing-function: ease; - background-image: url("styles/resources/assets/icons/icon-time-grey.svg"); - top: 2px; +.cmp-sign-in-teaser > .cmp-experiencefragment .text .cmp-text { + padding: 0; + margin: 0; } -.video-carousel-item .item-box .video-date { - font-family: "Roboto", sans-serif; - color: #525252; - font-size: 16px; - line-height: 24px; - font-weight: normal; - position: absolute; - bottom: 0; - margin-bottom: 20px; +.cmp-sign-in-teaser > .cmp-experiencefragment .text .cmp-text p { + margin-top: 0 !important; + margin-bottom: 1.125rem !important; } -.theme-dark .video-carousel-item .item-box .video-date { - color: #FFFFFF; +@media only screen and (min-width: 64em) { + .cmp-sign-in-teaser > .cmp-experiencefragment #hidden-tablet { + display: none; + } } -.video-carousel-item:hover i, .video-carousel-item:focus i { - margin-left: 5px; +@media only screen and (min-width: 77.75em) { + .cmp-sign-in-teaser > .cmp-experiencefragment #hidden-desktop { + display: none; + } } -.welcome__heading { - margin: 0 0 20px; +/* --- Dashboard --- */ +mygov-tasks-tasks-tiles .section-heading { + position: relative; + width: 100%; + display: flex; + justify-content: space-between; } -.welcome__heading--text { - font-family: "Roboto", sans-serif; - color: #525252; - font-size: 16px; - line-height: 24px; - font-weight: normal; - color: #101820; - display: block; - font-size: 18px !important; +mygov-tasks-tasks-tiles .section-heading, mygov-tasks-tasks-tiles .section-heading:first-child, .authenticated-container__page mygov-tasks-tasks-tiles .section-heading, .authenticated-container__page mygov-tasks-tasks-tiles .section-heading:first-child { + margin: 20px 0 28px; + margin: 1.25rem 0 1.75rem; } -.theme-dark .welcome__heading--text { - color: #FFFFFF; +mygov-tasks-tasks-tiles .section-heading.sr-only, mygov-tasks-tasks-tiles .section-heading:first-child.sr-only, .authenticated-container__page mygov-tasks-tasks-tiles .section-heading.sr-only, .authenticated-container__page mygov-tasks-tasks-tiles .section-heading:first-child.sr-only { + margin: 0; } -.welcome__heading--text b, -.welcome__heading--text strong { - font-family: "Roboto", sans-serif; - color: #525252; - font-size: 16px; - line-height: 24px; - font-weight: normal; - color: #101820; - font-weight: 700; +mygov-tasks-tasks-tiles .section-heading.sr-only { + width: 1px; + width: 0.0625rem; + position: absolute; + margin: 0; + display: inline; +} +mygov-tasks-tasks-tiles .section-heading:after { + height: 1px; + height: 0.0625rem; + content: ""; + position: absolute; + bottom: 0; + background-color: rgba(14, 99, 147, 0.2); + margin: auto; + right: 0; + left: 0; } -.theme-dark .welcome__heading--text b, -.theme-dark .welcome__heading--text strong { - color: #FFFFFF; +mygov-tasks-tasks-tiles .section-heading div > :first-child { + margin-top: 30px; + margin-top: 1.875rem; } -.theme-dark .welcome__heading--text b, -.theme-dark .welcome__heading--text strong { - color: #FFFFFF; +@media only screen and (min-width: 64em) { + mygov-tasks-tasks-tiles .section-heading div > :first-child { + margin-top: 40px; + margin-top: 2.5rem; + } } -.welcome__personal-detail { +mygov-tasks-tasks-tiles .section-heading h2 { font-family: "Roboto", sans-serif; - color: #525252; - font-size: 16px; - line-height: 24px; - font-weight: normal; - color: #101820; - margin-bottom: 6px; + margin-right: 10px; + margin-right: 0.625rem; + margin-bottom: 7px; + margin-bottom: 0.4375rem; + font-size: 18px; + font-size: 1.125rem; + font-weight: 400; + margin-top: 0; + margin-left: 0; + line-height: 1.4444444444; } -.theme-dark .welcome__personal-detail { - color: #FFFFFF; +mygov-tasks-tasks-tiles .section-heading h2::first-line { + line-height: 1.5; } -.welcome__personal-detail b, -.welcome__personal-detail strong { +mygov-tasks-tasks-tiles .section-heading a { font-family: "Roboto", sans-serif; - color: #525252; + line-height: 28px; + line-height: 1.75rem; + margin-bottom: 15px; + margin-bottom: 0.9375rem; font-size: 16px; - line-height: 24px; - font-weight: normal; - color: #101820; - font-weight: 700; + font-size: 1rem; + display: inline-flex; + position: relative; + text-decoration: none; + color: #254A7E; + line-height: 1.1875; + margin-top: auto; + margin-left: auto; + white-space: nowrap; + padding-right: 0; + font-weight: 500; } -.theme-dark .welcome__personal-detail b, -.theme-dark .welcome__personal-detail strong { - color: #FFFFFF; +@media (min-width: 22.4375em) { + mygov-tasks-tasks-tiles .section-heading a { + max-width: 95%; + } } -.theme-dark .welcome__personal-detail b, -.theme-dark .welcome__personal-detail strong { - color: #FFFFFF; +@media only screen and (min-width: 48em) { + mygov-tasks-tasks-tiles .section-heading a { + margin-bottom: 7px; + margin-bottom: 0.4375rem; + max-width: 90%; + } } -.welcome__sign-in-detail { - font-family: "Roboto", sans-serif; - color: #525252; - font-size: 16px; - line-height: 24px; - font-weight: normal; - margin: 0 0 40px; +@media only screen and (min-width: 64em) { + mygov-tasks-tasks-tiles .section-heading a { + max-width: 75%; + } } -.theme-dark .welcome__sign-in-detail { - color: #FFFFFF; +mygov-tasks-tasks-tiles .section-heading a:hover { + text-decoration: underline; } -.welcome__inbox { - display: flex; - align-items: center; - margin-top: 40px; - font-family: "Roboto", sans-serif; +mygov-tasks-tasks-tiles .section-heading a:hover, mygov-tasks-tasks-tiles .section-heading a:focus { + color: #254A7E; +} +mygov-tasks-tasks-tiles .section-heading a:hover:after, mygov-tasks-tasks-tiles .section-heading a:focus:after { + transform: none; +} +mygov-tasks-tasks-tiles .section-heading a:focus { + outline: 2px solid #254A7E; + outline: 0.125rem solid #254A7E; + text-decoration: none; +} +mygov-tasks-tasks-tiles .section-heading a:after { + width: 7px; + width: 0.4375rem; + height: 11px; + height: 0.6875rem; + margin-left: 9px; + margin-left: 0.5625rem; + content: ""; + background: no-repeat bottom center; + background-image: url("resources/assets/icons/chevron-right-dark-blue.svg"); + position: static; + align-self: center; +} +mygov-tasks-tasks-tiles .section-heading .items-count { font-size: 18px; + font-size: 1.125rem; + font-weight: 400; + line-height: 1.625; + align-self: flex-end; } -.welcome__inbox--message { - margin-left: 26px; +mygov-tasks-tasks-tiles .section-heading.is-underlined { position: relative; - padding-left: 12px; + padding-bottom: 20px; + padding-bottom: 1.25rem; } -.welcome__inbox--message::before { - content: ""; - background-image: url("styles/resources/assets/icons/authenticated/icon-inbox.svg"); +mygov-tasks-tasks-tiles .section-heading.is-underlined::before, mygov-tasks-tasks-tiles .section-heading.is-underlined::after { content: ""; position: absolute; - top: 0; + height: 5px; + bottom: 0; +} +mygov-tasks-tasks-tiles .section-heading.is-underlined::before { + width: 50px; left: 0; - width: 26px; - height: 24px; - background-size: contain; - background-position: center; - background-repeat: no-repeat; - transition-property: transform, margin; - transition-duration: 300ms; - transition-timing-function: ease; - display: inline-block; - left: -26px; - top: 3px; + background-color: #006CE0; } -.welcome__inbox--link { - color: #006CE0; - font-weight: 500; +mygov-tasks-tasks-tiles .section-heading.is-underlined::after { + width: calc(100% - 49px); + right: 0; + background-color: #183052; } -.welcome__inbox--link.link, .welcome__inbox--link.linked-services__rightInternalLink { - border-bottom: none; - text-decoration: underline; - padding-left: 5px; +mygov-tasks-tasks-tiles .section-heading.is-underlined + .section-description { + padding-top: 20px; + padding-top: 1.25rem; } -.welcome__inbox--link .cta { - margin-left: 7px; +mygov-tasks-tasks-tiles .section-heading:focus, mygov-tasks-tasks-tiles .section-heading:active { + outline: none; } -.welcome__next-payment { - display: flex; - align-items: center; - margin-top: 40px; - margin-bottom: 20px; - font-family: "Roboto", sans-serif; - font-size: 18px; - color: #555555; +.page-ausgov-home mygov-tasks-tasks-tiles .section-heading a::after, .page-mygov-home mygov-tasks-tasks-tiles .section-heading a::after { + top: 12px; + top: 0.75rem; } -.welcome__next-payment--message { - margin-left: 26px; - position: relative; - padding-left: 12px; - line-height: 25px; +@media (max-width: 47.9375em) { + mygov-tasks-tasks-tiles .section-heading { + flex-direction: column; + } + mygov-tasks-tasks-tiles .section-heading a { + margin-left: 0; + } } -.welcome__next-payment--message::before { - content: ""; - background-image: url("styles/resources/assets/icons/authenticated/icon-wallet.svg"); - content: ""; - position: absolute; - top: 0; - left: 0; - width: 26px; - height: 24px; - background-size: contain; - background-position: center; - background-repeat: no-repeat; - transition-property: transform, margin; - transition-duration: 300ms; - transition-timing-function: ease; - display: inline-block; - left: -26px; - top: 13px; +@media only screen and (min-width: 64em) { + mygov-tasks-tasks-tiles .section-heading.is-padded, +mygov-tasks-tasks-tiles .section-description.is-padded { + margin-left: 40px; + margin-left: 2.5rem; + } } -.welcome__next-payment--message--details { - font-weight: 600; +mygov-tasks-tasks-tiles .section-heading.is-centered, +mygov-tasks-tasks-tiles .section-description.is-centered { + margin-left: auto; + margin-right: auto; + text-align: center; } -.welcome__next-payment--link { - color: #006CE0; - font-weight: 500; +mygov-tasks-tasks-tiles .section-heading.is-centered p, +mygov-tasks-tasks-tiles .section-description.is-centered p { + text-align: center; } -.welcome__next-payment--link.link, .welcome__next-payment--link.linked-services__rightInternalLink { - border-bottom: none; - text-decoration: underline; - padding-left: 5px; +.authenticated-container mygov-tasks-tasks-tiles .section-heading, +.authenticated-container mygov-tasks-tasks-tiles .section-description { + margin-left: 0; } -.welcome__next-payment--link .cta { - margin-left: 7px; +mygov-tasks-tasks-tiles .section-heading.is-centered { + padding-right: 0; +} +mygov-tasks-tasks-tiles .auth-section-heading { + margin: 60px 0 20px 0; + margin: 3.75rem 0 1.25rem 0; +} + +.section-heading-skeleton { + margin-top: 20px; + margin-top: 1.25rem; + margin-bottom: 30px; + margin-bottom: 1.875rem; + display: block; } -.at-a-glance { - font-family: "Roboto", sans-serif; - font-size: 16px; - margin-bottom: 40px; +.tasks-section { + max-width: 1424.75px; + max-width: 89.046875rem; + margin: auto; } -.at-a-glance ul { - list-style: none; +.tasks-section .section-heading, .tasks-section .section-heading:first-child, .authenticated-container__page .tasks-section .section-heading, .authenticated-container__page .tasks-section .section-heading:first-child { + margin-bottom: 30px; + margin-bottom: 1.875rem; +} +.tasks-section .title { + font-family: "Roboto", sans-serif; + font-size: 18px; + font-size: 1.125rem; + letter-spacing: -0.01px; + letter-spacing: -0.000625rem; + color: #333333; + font-weight: 700; + line-height: 1.2222222222; + text-align: left; margin: 0; - padding: 0; - display: inline-flex; - align-items: stretch; - flex-direction: column; - color: black; - box-shadow: 0 0 2px rgba(17, 17, 18, 0.2509803922); - width: 100%; } -@media only screen and (min-width: 77.75em) { - .at-a-glance ul { - flex-direction: row; - } - .at-a-glance ul[data-row-count="1"] { - width: 33.33%; - } - .at-a-glance ul[data-row-count="2"] { - width: 66.66%; - } +.tasks-section .description { + padding: 0 10px 0 0; + padding: 0 0.625rem 0 0; + font-size: 16px; + font-size: 1rem; + max-width: 560px; + max-width: 35rem; + margin-top: 7px; + margin-top: 0.4375rem; + text-align: left; + color: #333333; + font-weight: 400; + line-height: 1.25; + margin-right: 0; + margin-bottom: 0; + margin-left: 0; } -.at-a-glance li { - display: flex; +.tasks-section .description p { + font-size: inherit; margin: 0; - position: relative; - background-color: #F8F8F8; + font-weight: 400; + line-height: 1.25; + color: #333333; } -.at-a-glance li > * { +.tasks-section .tasks-header-section { + margin: 0 0 8px 0; + margin: 0 0 0.5rem 0; display: flex; - align-items: center; - padding: 20px; -} -.at-a-glance li > a { - color: inherit; - text-decoration: none; - width: 100%; -} -.at-a-glance li + li::before { - content: ""; - position: absolute; - top: 0; - left: 20px; - height: 1px; - background: #DDDDDD; - width: calc(100% - 40px); -} -@media only screen and (min-width: 77.75em) { - .at-a-glance li { - display: inline-flex; - align-items: stretch; - flex: 1; - border-top-width: 1px; - border-bottom-width: 1px; - } - .at-a-glance li:first-child { - border-bottom-left-radius: 5px; - } - .at-a-glance li:last-child { - border-top-right-radius: 5px; - } - .at-a-glance li + li::before { - left: 0; - top: 20px; - width: 1px; - height: calc(100% - 40px); - } -} -.at-a-glance__icon { - width: 25px; - height: 25px; - margin-right: 15px; + flex-flow: column nowrap; + justify-content: space-between; } @media only screen and (min-width: 40em) { - .at-a-glance__icon { - width: 44px; - height: 44px; + .tasks-section .tasks-header-section { + flex-flow: row nowrap; } } -.at-a-glance__emphasised { - text-decoration: underline; - font-style: normal; - color: #006CE0; +.tasks-section .tasks-header-section a { + text-decoration: none; +} +.tasks-section .tasks-header-section .tasks-link { + font-size: 16px; + font-size: 1rem; font-weight: 500; + line-height: 1.625; + color: #254A7E; + margin: 0; + cursor: pointer; } -.at-a-glance .wrap-children > * { - display: inline-block; +.tasks-section .tasks-header-section .tasks-link .link-arrow { + margin-left: 8px; + margin-left: 0.5rem; + height: 12px; + height: 0.75rem; + content: url("resources/assets/icons/chevron-right-dark-blue.svg"); } -.modal__container.page-mygov-auth-account { - border-radius: 5px; - border-radius: 0.3125rem; +.page-mygov-auth-account .authenticated-body-container__page .task-tile div, +.page-mygov-auth-account .authenticated-body-container__page .task-tile p { + font-size: inherit; + line-height: inherit; } -.modal__container.page-mygov-auth-account .modal__content { + +.task-tile, +.page-mygov-auth-account .authenticated-body-container__page .task-tile { + font-family: "Roboto", sans-serif; + outline: 1px solid transparent; + outline: 0.0625rem solid transparent; border-radius: 5px; border-radius: 0.3125rem; + min-height: 129px; + min-height: 8.0625rem; + margin-bottom: 18px; + margin-bottom: 1.125rem; + padding: 20px; + padding: 1.25rem; + box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.25); + box-shadow: 0 0.125rem 0.375rem 0 rgba(0, 0, 0, 0.25); + width: 100%; + background-color: #FFFFFF; + border-width: 0; + display: flex; + flex-flow: column nowrap; + justify-content: flex-start; + align-items: stretch; + position: relative; + overflow: hidden; } -.modal__container.page-mygov-auth-account .modal__content--common.modal__content .modal-header { - background: transparent; +.task-tile .icon-content-container, +.page-mygov-auth-account .authenticated-body-container__page .task-tile .icon-content-container { + margin-right: -12.5px; + margin-right: -0.78125rem; + margin-left: -12.5px; + margin-left: -0.78125rem; display: flex; - flex-direction: column; - padding: 2rem 2rem 0 2.5rem; + flex-flow: column nowrap; + align-items: stretch; + flex: 1; } -@media (max-width: 639px) { - .modal__container.page-mygov-auth-account .modal__content--common.modal__content .modal-header { - padding: 1.25rem 1rem 0 1.25rem; - } +.task-tile .icon-content-container > *, +.page-mygov-auth-account .authenticated-body-container__page .task-tile .icon-content-container > * { + margin-right: 12.5px; + margin-right: 0.78125rem; + margin-left: 12.5px; + margin-left: 0.78125rem; } -.modal__container.page-mygov-auth-account .modal__content--common.modal__content .modal-header .close { - background: none; - border: none; - position: relative; - top: 0; - right: 0; - width: min-content; - align-self: flex-end; +.task-tile .icon-content-container .icon-container > .overdue-background img, +.task-tile .icon-content-container .icon-container > .due-today-background img, +.task-tile .icon-content-container .icon-container > .no-overdue-background img, +.page-mygov-auth-account .authenticated-body-container__page .task-tile .icon-content-container .icon-container > .overdue-background img, +.page-mygov-auth-account .authenticated-body-container__page .task-tile .icon-content-container .icon-container > .due-today-background img, +.page-mygov-auth-account .authenticated-body-container__page .task-tile .icon-content-container .icon-container > .no-overdue-background img { + height: 33px; + height: 2.0625rem; + width: 33px; + width: 2.0625rem; + border-radius: 50%; display: flex; - align-items: baseline; - gap: 0.5rem; - border-radius: 0; + justify-content: center; + align-items: center; + object-fit: contain; } -.modal__container.page-mygov-auth-account .modal__content--common.modal__content .modal-header .close i { - width: 14px; - width: 0.875rem; - height: 14px; - height: 0.875rem; - min-width: 14px; - min-width: 0.875rem; - display: block; - height: 0.875rem; - width: 0.875rem; - background-size: contain; - background-position: center; - background-repeat: no-repeat; - background-size: auto; - background-image: url("styles/resources/assets/icons/icon-close-black.svg"); +@media only screen and (min-width: 40em) { + .task-tile .icon-content-container .icon-container > .overdue-background img, +.task-tile .icon-content-container .icon-container > .due-today-background img, +.task-tile .icon-content-container .icon-container > .no-overdue-background img, +.page-mygov-auth-account .authenticated-body-container__page .task-tile .icon-content-container .icon-container > .overdue-background img, +.page-mygov-auth-account .authenticated-body-container__page .task-tile .icon-content-container .icon-container > .due-today-background img, +.page-mygov-auth-account .authenticated-body-container__page .task-tile .icon-content-container .icon-container > .no-overdue-background img { + height: 50px; + height: 3.125rem; + width: 50px; + width: 3.125rem; + } } -.modal__container.page-mygov-auth-account .modal__content--common.modal__content .modal-body { - padding: 0 2.5rem 2.5rem; +.task-tile .icon-content-container .content-container, +.page-mygov-auth-account .authenticated-body-container__page .task-tile .icon-content-container .content-container { + padding-top: 13px; + padding-top: 0.8125rem; + display: flex; + flex-flow: column nowrap; } -@media (max-width: 639px) { - .modal__container.page-mygov-auth-account .modal__content--common.modal__content .modal-body { - padding: 0 1rem 1.5rem; +@media only screen and (min-width: 40em) { + .task-tile .icon-content-container .content-container, +.page-mygov-auth-account .authenticated-body-container__page .task-tile .icon-content-container .content-container { + padding-top: 0; } } -.modal__container.page-mygov-auth-account .modal__content--common.modal__content .modal-body .cmp-text { - margin: 0.75rem 0 1.5rem; +.task-tile .icon-content-container .content-container .date-container, +.page-mygov-auth-account .authenticated-body-container__page .task-tile .icon-content-container .content-container .date-container { + color: #000000; + text-align: left; + display: flex; + flex-flow: row wrap; + margin-bottom: 0; +} +.task-tile .icon-content-container .content-container .date-container .due-status, +.page-mygov-auth-account .authenticated-body-container__page .task-tile .icon-content-container .content-container .date-container .due-status { + font-size: 16px; + font-size: 1rem; + margin: 0; + font-weight: 400; + line-height: 1.25; + color: #676767; +} +.task-tile .icon-content-container .content-container .date-container .due-status.due-today, +.page-mygov-auth-account .authenticated-body-container__page .task-tile .icon-content-container .content-container .date-container .due-status.due-today { + color: #FE5000; + font-weight: 700; } - -.assistant-btn { - background-color: #254A7E; - color: #FFFFFF; - width: 100%; - border: none; - padding: 10px 0; +.task-tile .icon-content-container .content-container .date-container .due-status.overdue, +.page-mygov-auth-account .authenticated-body-container__page .task-tile .icon-content-container .content-container .date-container .due-status.overdue { + color: #C3362B; + font-weight: 700; +} +.task-tile .icon-content-container .content-container .date-container .date, +.page-mygov-auth-account .authenticated-body-container__page .task-tile .icon-content-container .content-container .date-container .date { font-size: 16px; + font-size: 1rem; + font-weight: 400; + line-height: 1.25; + text-align: left; + color: #676767; + margin: 0; } -@media only screen and (min-width: 48em) { - .assistant-btn { - display: none; +@media only screen and (min-width: 40em) { + .task-tile .icon-content-container, +.page-mygov-auth-account .authenticated-body-container__page .task-tile .icon-content-container { + flex-flow: row nowrap; } } - -@media (max-width: 63.9375em) { - .assistant-btn-open { - position: relative; - padding-top: 26px; - } - .assistant-btn-open .assistant-btn-img { - border-radius: 50px; - background-color: #183052; - width: 38px; - height: 38px; - padding: 8px; - position: absolute; - top: -15px; - left: calc(50% - 19px); +@media screen and (min-width: 0\0 ) { + .task-tile .icon-content-container, +.page-mygov-auth-account .authenticated-body-container__page .task-tile .icon-content-container { + flex: 1 1 auto; } } -@media only screen and (min-width: 48em) { - .assistant-btn-open .assistant-up-btn { - transform: rotateZ(90deg); - } +.task-tile .action-container, +.page-mygov-auth-account .authenticated-body-container__page .task-tile .action-container { + margin-top: 10px; + margin-top: 0.625rem; + padding-top: 10px; + padding-top: 0.625rem; + margin-right: -6.5px; + margin-right: -0.40625rem; + margin-left: -6.5px; + margin-left: -0.40625rem; + margin-top: 19px; + margin-top: 1.1875rem; + display: flex; + flex-flow: row nowrap; + border-left: none; + position: relative; + align-items: center; + justify-content: space-between; + width: calc(100% + 6.5px); + width: calc(100% + 0.40625rem); + padding-top: 0; } - -.assistant-btn-dsk { - display: none; - background-color: #254A7E; - color: #FFFFFF; - border: none; +.task-tile .action-container > *, +.page-mygov-auth-account .authenticated-body-container__page .task-tile .action-container > * { + margin-right: 6.5px; + margin-right: 0.40625rem; + margin-left: 6.5px; + margin-left: 0.40625rem; +} +.task-tile .action-container .action-details-container, +.page-mygov-auth-account .authenticated-body-container__page .task-tile .action-container .action-details-container { font-size: 16px; - width: auto; - padding: 20px; - border-radius: 8px 0 0 8px; + font-size: 1rem; + line-height: 1.125; } -@media only screen and (min-width: 48em) { - .assistant-btn-dsk { - display: inline-block; - } +.task-tile .action-container .action-details-container p, +.page-mygov-auth-account .authenticated-body-container__page .task-tile .action-container .action-details-container p { + margin: 0; } - -.assistant-btn-img { - vertical-align: middle; +.task-tile .action-container .action-details-container__wrapper, +.page-mygov-auth-account .authenticated-body-container__page .task-tile .action-container .action-details-container__wrapper { + margin-right: -2px; + margin-right: -0.125rem; + margin-left: -2px; + margin-left: -0.125rem; + display: flex; + flex-flow: row wrap; } - -@media only screen and (min-width: 48em) { - .assistant-btn-text { - margin-left: 12px; - display: inline-block; - font-size: 18px; - position: relative; - top: 3px; +.task-tile .action-container .action-details-container__wrapper > span, +.page-mygov-auth-account .authenticated-body-container__page .task-tile .action-container .action-details-container__wrapper > span { + margin-right: 2px; + margin-right: 0.125rem; + margin-left: 2px; + margin-left: 0.125rem; +} +@media only screen and (min-width: 40em) { + .task-tile .action-container .action-details-container__wrapper, +.page-mygov-auth-account .authenticated-body-container__page .task-tile .action-container .action-details-container__wrapper { + max-width: 200px; + max-width: 12.5rem; + text-align: right; + justify-content: flex-end; } } - -.assistant-panel { +.task-tile .action-container .icon-container .link-icon img, +.page-mygov-auth-account .authenticated-body-container__page .task-tile .action-container .icon-container .link-icon img { + width: 18px; + width: 1.125rem; + height: 18px; + height: 1.125rem; + min-height: 18px; + min-height: 1.125rem; + border-radius: 5px; + border-radius: 0.3125rem; + padding: 4.5px; + padding: 0.28125rem; + background-color: #CCF0F9; + transition-property: margin-left; + transition-duration: 300ms; display: flex; - position: fixed; - top: 0px; - height: 100%; - z-index: 20; + box-sizing: content-box; } -@media (max-width: 63.9375em) { - .assistant-panel { - flex-direction: column; - left: 0px; - width: 100%; +@media only screen and (min-width: 48em) { + .task-tile .action-container .icon-container .link-icon img, +.page-mygov-auth-account .authenticated-body-container__page .task-tile .action-container .icon-container .link-icon img { + width: 17px; + width: 1.0625rem; + height: 17px; + height: 1.0625rem; + min-height: 17px; + min-height: 1.0625rem; + padding: 7.5px; + padding: 0.46875rem; } } -@media only screen and (min-width: 48em) { - .assistant-panel { - align-items: center; - right: 0px; - height: 100%; - position: fixed; +@media only screen and (min-width: 40em) { + .task-tile .action-container, +.page-mygov-auth-account .authenticated-body-container__page .task-tile .action-container { + padding-top: 0; + border-top: none; + margin-top: 0; + margin-left: auto; + align-self: flex-start; + width: auto; + margin-top: 0; + padding-top: 0; } } - -.assistant-panel-closed { - position: fixed; - z-index: 2; +.task-tile a, +.page-mygov-auth-account .authenticated-body-container__page .task-tile a { + color: #333333; + text-decoration: none; } -@media (max-width: 63.9375em) { - .assistant-panel-closed { - width: 100%; - bottom: 0px; - } +.task-tile a:after, +.page-mygov-auth-account .authenticated-body-container__page .task-tile a:after { + border-radius: 5px; + border-radius: 0.3125rem; + content: ""; + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; + z-index: 1; } -@media only screen and (min-width: 48em) { - .assistant-panel-closed { - top: 30%; - right: 0px; - } +.task-tile a:focus, +.page-mygov-auth-account .authenticated-body-container__page .task-tile a:focus { + outline: none; } - -.assistant-drawer { +.task-tile a:hover, .task-tile a:focus, +.page-mygov-auth-account .authenticated-body-container__page .task-tile a:hover, +.page-mygov-auth-account .authenticated-body-container__page .task-tile a:focus { + color: #333333; background-color: #FFFFFF; } -@media (max-width: 63.9375em) { - .assistant-drawer { - flex-grow: 1; - } +.task-tile a:hover:after, .task-tile a:focus:after, +.page-mygov-auth-account .authenticated-body-container__page .task-tile a:hover:after, +.page-mygov-auth-account .authenticated-body-container__page .task-tile a:focus:after { + border: 0.125rem solid #254A7E; } -@media only screen and (min-width: 48em) { - .assistant-drawer { - display: inline-block; - border: 1px solid #DAE3E7; - height: 100%; - width: 400px; +@media only screen and (min-width: 40em) { + .task-tile, +.page-mygov-auth-account .authenticated-body-container__page .task-tile { + padding: 30px 20px 23px; + padding: 1.875rem 1.25rem 1.4375rem; + flex-flow: row nowrap; } } -.assistant-drawer-large { - background-color: #FFFFFF; +.loading-section { + display: flex; + flex-direction: column; + align-items: center; } -@media only screen and (min-width: 48em) { - .assistant-drawer-large { - display: inline-block; - border: 1px solid #DAE3E7; - height: 100%; - width: 600px; +.loading-section .loading-spinner { + width: 96px; + width: 6rem; + height: 96px; + height: 6rem; + min-width: 96px; + min-width: 6rem; + display: block; + background-size: contain; + background-position: center; + background-repeat: no-repeat; + margin: 13px 28px 0; + margin: 0.8125rem 1.75rem 0; + background-image: url("resources/assets/icons/spinner.svg"); +} +@media only screen and (min-width: 77.75em) { + .loading-section .loading-spinner { + width: 96px; + width: 6rem; + height: 96px; + height: 6rem; + min-width: 96px; + min-width: 6rem; + display: block; + background-size: contain; + background-position: center; + background-repeat: no-repeat; + margin: 17px 35px 0; + margin: 1.0625rem 2.1875rem 0; } } -.assistant-drawer-large .assistant-up-btn { - transform: rotateZ(90deg); + +.no-tasks-section, +.tasks-error-section { + max-width: 1424.75px; + max-width: 89.046875rem; + margin: auto; + padding-bottom: 24px; + padding-bottom: 1.5rem; + margin-right: -9px; + margin-right: -0.5625rem; + margin-left: -9px; + margin-left: -0.5625rem; + display: flex; + flex-flow: row nowrap; + justify-content: flex-start; + align-items: stretch; + overflow: hidden; +} +.no-tasks-section > *, +.tasks-error-section > * { + margin-right: 9px; + margin-right: 0.5625rem; + margin-left: 9px; + margin-left: 0.5625rem; +} +.no-tasks-section .icon-container .icon-background, +.tasks-error-section .icon-container .icon-background { + border-radius: 50%; + display: flex; + justify-content: center; + align-items: center; } - -@media only screen and (min-width: 48em) { - .assistant-open-body { - width: calc(100% - 400px); - } +.no-tasks-section .icon-container .icon-background img, +.tasks-error-section .icon-container .icon-background img { + width: 35px; + width: 2.1875rem; + height: 35px; + height: 2.1875rem; + width: auto; + object-fit: contain; } - -@media only screen and (min-width: 48em) { - .assistant-open-body-large { - width: calc(100% - 600px); +@media only screen and (min-width: 40em) { + .no-tasks-section .icon-container .icon-background img, +.tasks-error-section .icon-container .icon-background img { + height: 50px; + height: 3.125rem; + width: 50px; + width: 3.125rem; } } - -.assistant-title { - background-color: #254A7E; - color: #FFFFFF; - width: 100%; - border: none; - padding: 22px 20px 24px 20px; - font-size: 20px; +.no-tasks-section .text-container, +.tasks-error-section .text-container { display: flex; - justify-content: space-between; + flex-flow: column nowrap; align-items: center; } - -.assistant-iframe { - border: none; +.no-tasks-section .text-container .header, +.tasks-error-section .text-container .header { + font-size: 18px; + font-size: 1.125rem; + font-weight: 700; + line-height: 1.2222222222; + color: #333333; + text-align: left; width: 100%; - height: calc(100% - 90px); -} - -.assistant-up-btn { - background-color: transparent; - border: none; - padding: 0; - height: 32px; - width: 32px; - transform: rotateZ(-90deg); - transition: transform 5s; } -@media (max-width: 63.9375em) { - .assistant-up-btn { - display: none; - } +.no-tasks-section .text-container .footer, +.tasks-error-section .text-container .footer { + margin-top: 10px; + margin-top: 0.625rem; + font-size: 16px; + font-size: 1rem; + font-weight: 400; + line-height: 1.125; + text-align: left; + width: 100%; } -.assistant-close-btn { - background-color: transparent; - border: none; - padding: 0; - height: 32px; - width: 32px; - margin: 0 0 0 34px; +.tasks-error-section .icon-container .icon-background { + background-color: #75787B; } -.last-updated { - font-size: 16px; - color: #000000; - text-align: center; -} -@media only screen and (min-width: 40em) { - .last-updated { - text-align: right; - } -} -.last-updated div { - top: 12px; - position: relative; - margin: 0 0 40px 0; +.tasks-screen { + background-color: #FFFFFF; } -@media only screen and (min-width: 40em) { - .last-updated div { - margin-top: 50px; - } +.tasks-screen .no-tasks-section, +.tasks-screen .tasks-error-section { + display: block; + margin-right: 0; + margin-left: 0; } - -.cmp-last-updated__item-date { - white-space: nowrap; +.tasks-screen .no-tasks-section .text-container, +.tasks-screen .tasks-error-section .text-container { + display: block; } - -.last-updated:empty { - display: none !important; +.tasks-screen .no-tasks-section p, +.tasks-screen .tasks-error-section p { + font-size: inherit; } - -.content-list .cmp-image { - margin: 0; +.tasks-screen .no-tasks-section > *, +.tasks-screen .tasks-error-section > * { + margin-right: 0; + margin-left: 0; } -@media (min-width: 22.4375em) { - .content-list .cmp-image__image { - width: 124px; - height: 100%; - object-fit: cover; - } +.tasks-screen .no-tasks-section h2, +.tasks-screen .empty-services h2 { + margin-top: 0px; + margin-top: 0rem; + margin-bottom: 19px; + margin-bottom: 1.1875rem; + font-size: 16px; + font-size: 1rem; + font-weight: 700; + line-height: 1.1875; } -@media only screen and (min-width: 88.125em) { - .content-list .cmp-image__image { - width: 406px; - height: 218px; - object-fit: cover; +@media only screen and (min-width: 40em) { + .tasks-screen .no-tasks-section h2, +.tasks-screen .empty-services h2 { + margin-bottom: 20px; + margin-bottom: 1.25rem; } } - -.cmp-list { - margin: 0; - padding: 0; -} -@media only screen and (min-width: 48em) { - .cmp-list { - display: flex; - flex-wrap: wrap; - justify-content: space-between; - } +.tasks-screen .no-tasks-section .description, +.tasks-screen .empty-services .description, +.tasks-screen .tasks-error-section .description { + margin-top: 0; + padding-right: 0; } - -.cmp-list__item { - margin: 0 0 20px 0; - padding: 0; - list-style-type: none; - border: 2px solid #DDD; - border-radius: 4px; +.tasks-screen .no-tasks-section .btn, +.tasks-screen .empty-services .btn, +.tasks-screen .tasks-error-section .btn { + height: 48px; + height: 3rem; display: flex; - flex-direction: column; + align-items: center; + justify-content: center; } -@media only screen and (min-width: 48em) { - .cmp-list__item { - width: 355px; - } +.tasks-screen .no-tasks-section { + padding-bottom: 109px; + padding-bottom: 6.8125rem; } -@media only screen and (min-width: 64em) { - .cmp-list__item { - width: 482px; +@media only screen and (min-width: 40em) { + .tasks-screen .no-tasks-section { + padding-bottom: 68px; + padding-bottom: 4.25rem; } } -@media only screen and (min-width: 77.75em) { - .cmp-list__item { - width: 572px; - } +.tasks-screen .tasks-error-section { + padding-top: 59px; + padding-top: 3.6875rem; + padding-bottom: 38px; + padding-bottom: 2.375rem; + text-align: center; } -@media only screen and (min-width: 88.125em) { - .cmp-list__item { - width: 410px; - } +.tasks-screen .tasks-error-section .btn { + margin: auto; } -.cmp-list__item article { - height: 100%; +.tasks-screen .tasks-error-section img { + margin: 0 auto 30px; + margin: 0 auto 1.875rem; + display: block; } - -.cmp-list__item-link { - text-decoration: none; - display: flex; - flex-direction: column; - height: 100%; +.tasks-screen .tasks-error-section .text-container { + display: inline-block; + margin: auto; } -@media (min-width: 22.4375em) { - .cmp-list__item-link { - flex-direction: row; - justify-content: space-between; - } +.tasks-screen .tasks-error-section .text-container .title { + font-size: 24px; + font-size: 1.5rem; + margin-bottom: 9px; + margin-bottom: 0.5625rem; } -@media only screen and (min-width: 88.125em) { - .cmp-list__item-link { - flex-direction: column; - justify-content: space-between; - } +.tasks-screen .tasks-error-section .text-container .description { + margin-bottom: 32px; + margin-bottom: 2rem; + text-align: center; } -.cmp-list__item-link::after { - content: ""; - background: url(assets/icons/chevron-right-black.svg) no-repeat; - margin: 20px 16px 10px 20px; - width: 32px; - height: 32px; - align-self: end; - min-width: 32px; +.tasks-screen .tasks-section { + max-width: none; } - -.cmp-list__item-text { - margin: 0 0 20px 0; +.tasks-screen .tasks-section > .description { + margin-bottom: 10px; + margin-bottom: 0.625rem; + line-height: 1.5; + padding-right: 0; } - -.cmp-list__item-title { - margin: 28px 20px 0 20px; - display: block; - font-size: 22px; - font-family: "Roboto", sans-serif; - font-weight: 500; - color: #000000; +.tasks-screen .tasks-section > .description::first-line { + line-height: 1.1875; } - -.cmp-list__item-description { - margin: 16px 20px 0 20px; +@media only screen and (min-width: 40em) { + .tasks-screen .tasks-section > .description { + font-size: 18px; + font-size: 1.125rem; + margin-bottom: 25px; + margin-bottom: 1.5625rem; + line-height: 1.5555555556; + } + .tasks-screen .tasks-section > .description::first-line { + line-height: 1.2222222222; + } +} +.tasks-screen .tasks-section > mygov-tasks-task-tile { display: block; - font-size: 16px; - font-family: "Roboto", sans-serif; - font-weight: 300; - color: #000000; } - -.cmp-global-banners__group { - display: flex; - justify-content: center; - flex-direction: column; +.tasks-screen .tasks-section > mygov-tasks-task-tile:last-child { + margin-bottom: 45px; + margin-bottom: 2.8125rem; } -@media only screen and (min-width: 64em) { - .cmp-global-banners__group { - flex-direction: row; +@media only screen and (min-width: 40em) { + .tasks-screen .tasks-section > mygov-tasks-task-tile:last-child { + margin-bottom: 0; } } -.cmp-global-banners__content { +.tasks-screen .empty-services { display: flex; - align-items: flex-start; - width: 100%; - padding: 1.25rem; + flex-flow: column nowrap; } -@media only screen and (min-width: 64em) { - .cmp-global-banners__content { - width: 1024px; - padding: 1.25rem 2.5rem; +.tasks-screen .empty-services .link-service-image { + display: flex; + flex-flow: row nowrap; + justify-content: flex-start; +} +.tasks-screen .empty-services .link-service-image img { + height: 76px; + height: 4.75rem; + align-self: center; +} +@media only screen and (min-width: 40em) { + .tasks-screen .empty-services .link-service-image img { + height: 117px; + height: 7.3125rem; } } -@media only screen and (min-width: 77.75em) { - .cmp-global-banners__content { - width: 1244px; +.tasks-screen .empty-services .link-service-content { + padding-left: 0px; + padding-left: 0rem; + display: flex; + flex-flow: column nowrap; +} +.tasks-screen .empty-services .link-service-content h2 { + margin-bottom: 22px; + margin-bottom: 1.375rem; +} +.tasks-screen .empty-services .link-service-content p { + margin-top: 0px; + margin-top: 0rem; + margin-bottom: 0px; + margin-bottom: 0rem; + font-weight: 400; + line-height: 1.5; +} +.tasks-screen .empty-services .link-service-content .btn { + margin-top: 22px; + margin-top: 1.375rem; +} +@media only screen and (min-width: 40em) { + .tasks-screen .empty-services .link-service-content { + margin-top: 0px; + margin-top: 0rem; } } -@media only screen and (min-width: 88.125em) { - .cmp-global-banners__content { - width: 1360px; +@media only screen and (min-width: 40em) { + .tasks-screen .empty-services { + margin-left: -18px; + margin-left: -1.125rem; + margin-right: -18px; + margin-right: -1.125rem; + flex-flow: row nowrap; + } + .tasks-screen .empty-services > * { + margin-left: 18px; + margin-left: 1.125rem; + margin-right: 18px; + margin-right: 1.125rem; } } -.cmp-global-banners__header { + +body.fixed { + overflow: hidden; +} + +body mygov-dashboard-transition-modal .modal, +body mygov-tasks-transition-modal .modal, +.page-mygov-auth-account mygov-dashboard-transition-modal .modal, +.page-mygov-auth-account mygov-tasks-transition-modal .modal { + font-size: 16px; + font-size: 1rem; + position: fixed; + top: 0; + right: 0; + bottom: 0; + left: 0; + overflow: hidden auto; display: flex; align-items: center; - justify-content: space-between; - width: 100%; - padding: 0.625rem 1.25rem; + justify-content: center; + cursor: pointer; + z-index: 1050; } -.cmp-global-banners__header.critical::before, .cmp-global-banners__header.warning::before, .cmp-global-banners__header.info::before, .cmp-global-banners__content.critical::before, .cmp-global-banners__content.warning::before, .cmp-global-banners__content.info::before { - width: 1.5em; - height: 1.5em; +body mygov-dashboard-transition-modal .modal__bg, +body mygov-tasks-transition-modal .modal__bg, +.page-mygov-auth-account mygov-dashboard-transition-modal .modal__bg, +.page-mygov-auth-account mygov-tasks-transition-modal .modal__bg { + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; + background-color: rgba(0, 0, 0, 0.5); } -@media only screen and (min-width: 48em) { - .cmp-global-banners__header.critical::before, .cmp-global-banners__header.warning::before, .cmp-global-banners__header.info::before, .cmp-global-banners__content.critical::before, .cmp-global-banners__content.warning::before, .cmp-global-banners__content.info::before { - width: 2.125em; - height: 2.125em; - } +body mygov-dashboard-transition-modal .modal__content .modal-header .close, +body mygov-tasks-transition-modal .modal__content .modal-header .close, +.page-mygov-auth-account mygov-dashboard-transition-modal .modal__content .modal-header .close, +.page-mygov-auth-account mygov-tasks-transition-modal .modal__content .modal-header .close { + z-index: 9999; } -.cmp-global-banners__header.critical::before, .cmp-global-banners__content.critical::before { - content: url("styles/resources/assets/icons/report.svg"); +body mygov-dashboard-transition-modal .modal__content .modal-body .description:first-child, +body mygov-tasks-transition-modal .modal__content .modal-body .description:first-child, +.page-mygov-auth-account mygov-dashboard-transition-modal .modal__content .modal-body .description:first-child, +.page-mygov-auth-account mygov-tasks-transition-modal .modal__content .modal-body .description:first-child { + margin-top: 30px; + margin-top: 1.875rem; } -.cmp-global-banners__header.warning::before, .cmp-global-banners__content.warning::before { - content: url("styles/resources/assets/icons/report-problem.svg"); +body mygov-dashboard-transition-modal .modal__content--transition.modal__content .modal-header .close, +body mygov-tasks-transition-modal .modal__content--transition.modal__content .modal-header .close, +.page-mygov-auth-account mygov-dashboard-transition-modal .modal__content--transition.modal__content .modal-header .close, +.page-mygov-auth-account mygov-tasks-transition-modal .modal__content--transition.modal__content .modal-header .close { + top: 20px; + top: 1.25rem; + right: 20px; + right: 1.25rem; } -.cmp-global-banners__header.info::before, .cmp-global-banners__content.info::before { - content: url("styles/resources/assets/icons/info.svg"); +#modal__dialog, +#react-aria-modal-dialog { + position: relative; + display: inline-block; + text-align: left; + max-width: 100%; + cursor: default; + vertical-align: middle; + max-width: 100vw; + max-height: 100vh; + overflow-y: auto; + overflow-x: hidden; } -.cmp-global-banners__message-list { - margin: 0; + +#react-aria-modal-dialog .modal__content--transition.modal__content .modal-header .close { + top: 20px; + top: 1.25rem; + right: 20px; + right: 1.25rem; + min-width: max-content; + width: auto; padding: 0; - list-style: none; - margin: 0 2.75rem; - flex: 1; } -.cmp-global-banners__message-list--mobile { - margin: 0; - padding: 0; - list-style: none; - background: #FFFFFF; - padding: 0 1.25rem; - flex: 1; + +.modal--guided-content .modal__container, +.modal--guided-content .modal__content { + width: 670px; + width: 41.875rem; } -.cmp-global-banners__message-list .cmp-global-banners__message { - padding: 0; +@media (max-width: 639px) { + .modal--guided-content .modal__container, +.modal--guided-content .modal__content { + width: 100%; + } } -.cmp-global-banners__message { - padding: 1.25rem 0; - border-bottom: 1px solid #000000; +.modal--guided-content .modal__container.page-mygov-auth-account .modal__content.modal__content--common { + margin: 0; } -.cmp-global-banners__message:last-of-type { - border-bottom: none; +.modal--guided-content .modal__container.page-mygov-auth-account .modal__content.modal__content--common .modal-header { + padding: 24px 21px 0 40px; + padding: 1.5rem 1.3125rem 0 2.5rem; } -.cmp-global-banners__message:not(:first-of-type) { - padding-top: 1.25rem; +@media (max-width: 639px) { + .modal--guided-content .modal__container.page-mygov-auth-account .modal__content.modal__content--common .modal-header { + padding: 12px 21px 0; + padding: 0.75rem 1.3125rem 0; + } } -.cmp-global-banners__message:not(:last-of-type) { - padding-bottom: 1.25rem; +.modal--guided-content .modal__container.page-mygov-auth-account .modal__content.modal__content--common .modal-header:after { + display: none; } -.cmp-global-banners__message p { - color: #000000; - font-size: 1rem; - font-weight: 300; - line-height: 1.25; - margin: 0 0 0.75rem; +.modal--guided-content .modal__container.page-mygov-auth-account .modal__content.modal__content--common .modal-body { + padding: 0 40px 40px; + padding: 0 2.5rem 2.5rem; } -@media only screen and (min-width: 64em) { - .cmp-global-banners__message p { - font-size: 1.125rem; - line-height: 1.875; +@media (max-width: 639px) { + .modal--guided-content .modal__container.page-mygov-auth-account .modal__content.modal__content--common .modal-body { + padding: 0 21px 16px; + padding: 0 1.3125rem 1rem; } } -.cmp-global-banners__message p:only-of-type { - margin: 0; +.modal--guided-content .modal__container.page-mygov-auth-account .modal__content.modal__content--common .modal-body .guided-content-screen .guided-content-image { + margin-top: 20px; + margin-top: 1.25rem; + margin-bottom: 16px; + margin-bottom: 1rem; + width: 100%; } -.cmp-global-banners__message p:last-of-type { - margin: 0; +@media (max-width: 639px) { + .modal--guided-content .modal__container.page-mygov-auth-account .modal__content.modal__content--common .modal-body .guided-content-screen .guided-content-image { + margin-left: -20px; + margin-left: -1.25rem; + width: calc(100% + 40px); + } } -.cmp-global-banners__message a { - color: #006d88; - font-weight: 400; +.modal--guided-content .modal__container.page-mygov-auth-account .modal__content.modal__content--common .modal-body .guided-content-screen .guided-content-description { + margin-bottom: 60px; + margin-bottom: 3.75rem; } -@media only screen and (min-width: 48em) { - .cmp-global-banners__message a { - color: #000000; - } +.modal--guided-content .modal__container.page-mygov-auth-account .modal__content.modal__content--common .modal-body .modal-buttons { + display: flex; + align-items: center; + justify-content: space-between; } -.cmp-global-banners__button { - font-size: 1rem; - font-weight: 400; - border: none; +.modal--guided-content .modal__container.page-mygov-auth-account .modal__content.modal__content--common .modal-body .modal-buttons .skip { background: none; - padding: 0; - cursor: pointer; + border: none; + text-align: left; + width: min-content; + font-weight: 700; + color: #666666; +} +.modal--guided-content .modal__container.page-mygov-auth-account .modal__content.modal__content--common .modal-body .modal-buttons p { + color: #666666; +} +.modal--guided-content .modal__container.page-mygov-auth-account .modal__content.modal__content--common .modal-body .modal-buttons p.screen-number { + margin-right: 20px; + margin-right: 1.25rem; white-space: nowrap; - border-bottom: 1px solid #000000; } -@media only screen and (min-width: 64em) { - .cmp-global-banners__button { - font-size: 1.125rem; - } +.modal--guided-content .modal__container.page-mygov-auth-account .modal__content.modal__content--common .modal-body .modal-buttons .modal-navigation { + display: flex; + align-items: center; } -.cmp-global-banners__button::after { - content: url("styles/resources/assets/icons/close.svg"); - display: inline-block; - width: 0.75em; - height: 0.75em; - margin-left: 0.5rem; + +/* --- Payments --- */ +.payments-filter { + display: block; + min-height: 30px; +} +.payments-filter .btn { + color: #183052; + background-color: #FFFFFF; + padding-left: 0; +} +.payments-filter__show-hide-filter { + padding-top: 5px; +} +.payments-filter__show-hide-filter.btn.toggle { + text-decoration: underline; + color: #254A7E; + background-color: transparent; + padding: 0 1.5625rem 0 0; + text-align: left; + height: 0px; + min-width: 1rem; +} +.payments-filter__show-hide-filter.btn.toggle::after { + width: 16px; + width: 1rem; + height: 16px; + height: 1rem; + min-width: 16px; + min-width: 1rem; + content: ""; + position: absolute; + top: 0; + right: 0; + background-size: contain; + background-position: center; + background-repeat: no-repeat; + transition-property: transform, margin, background; + transition-duration: 300ms; + transition-timing-function: ease; + background-image: url("styles/resources/assets/icons/ia/filters.svg"); } -@media only screen and (min-width: 48em) { - .cmp-global-banners__button::after { - width: 0.875em; - height: 0.875em; - } +.payments-filter__show-hide-filter.btn.toggle:hover { + text-decoration: none; } -.cmp-global-banners .critical { - background: #fbb4af; +.payments-filter__show-hide-filter.btn.toggle.is-expanded::after { + width: 16px; + width: 1rem; + height: 16px; + height: 1rem; + min-width: 16px; + min-width: 1rem; + content: ""; + position: absolute; + top: 0; + right: 0; + background-size: contain; + background-position: center; + background-repeat: no-repeat; + transition-property: transform, margin, background; + transition-duration: 300ms; + transition-timing-function: ease; + background-image: url("styles/resources/assets/icons/ia/filters.svg"); } -.cmp-global-banners .warning { - background: #fff389; +.payments-filter__show-hide-filter.btn.toggle.is-expanded:hover { + text-decoration: none; } -.cmp-global-banners .info { - background: #a6d5fa; +.payments-filter__show-hide-clear-filter-container { + display: block; + min-height: 30px; + margin-top: 10px; } - -/* --- Dashboard --- */ -mygov-tasks-tasks-tiles .section-heading { - position: relative; - width: 100%; - display: flex; - justify-content: space-between; +.payments-filter__show-hide-filter-container { + display: block; + float: left; } -mygov-tasks-tasks-tiles .section-heading, mygov-tasks-tasks-tiles .section-heading:first-child, .authenticated-container__page mygov-tasks-tasks-tiles .section-heading, .authenticated-container__page mygov-tasks-tasks-tiles .section-heading:first-child { - margin: 20px 0 28px; - margin: 1.25rem 0 1.75rem; +.payments-filter__clear-filter-container { + display: block; + float: right; } -mygov-tasks-tasks-tiles .section-heading.sr-only, mygov-tasks-tasks-tiles .section-heading:first-child.sr-only, .authenticated-container__page mygov-tasks-tasks-tiles .section-heading.sr-only, .authenticated-container__page mygov-tasks-tasks-tiles .section-heading:first-child.sr-only { - margin: 0; +.payments-filter__clear-filter { + padding: 5px; } -mygov-tasks-tasks-tiles .section-heading.sr-only { - width: 1px; - width: 0.0625rem; - position: absolute; - margin: 0; - display: inline; +.payments-filter__clear-filter.btn.toggle { + text-decoration: underline; + color: #183052; + background-color: transparent; + padding: 0 1.5625rem 0 0; + text-align: left; + height: 0px; + min-width: 1rem; } -mygov-tasks-tasks-tiles .section-heading:after { - height: 1px; - height: 0.0625rem; +.payments-filter__clear-filter.btn.toggle::after { + width: 16px; + width: 1rem; + height: 16px; + height: 1rem; + min-width: 16px; + min-width: 1rem; content: ""; position: absolute; - bottom: 0; - background-color: rgba(14, 99, 147, 0.2); - margin: auto; + top: 0; right: 0; - left: 0; + background-size: contain; + background-position: center; + background-repeat: no-repeat; + transition-property: transform, margin, background; + transition-duration: 300ms; + transition-timing-function: ease; + background-image: url("styles/resources/assets/icons/clear-dark-blue.svg"); } -mygov-tasks-tasks-tiles .section-heading div > :first-child { - margin-top: 30px; - margin-top: 1.875rem; +.payments-filter__clear-filter.btn.toggle:hover { + text-decoration: none; } -@media only screen and (min-width: 64em) { - mygov-tasks-tasks-tiles .section-heading div > :first-child { - margin-top: 40px; - margin-top: 2.5rem; - } +.payments-filter__date-filter-container { + margin-left: 0px; } -mygov-tasks-tasks-tiles .section-heading h2 { - font-family: "Roboto", sans-serif; - margin-right: 10px; - margin-right: 0.625rem; - margin-bottom: 7px; - margin-bottom: 0.4375rem; - font-size: 18px; - font-size: 1.125rem; - font-weight: 400; - margin-top: 0; - margin-left: 0; - line-height: 1.4444444444; +.payments-filter__date-filter-container .custom-datepicker__input::-ms-clear { + display: none; } -mygov-tasks-tasks-tiles .section-heading h2::first-line { - line-height: 1.5; +.payments-filter__date-filter-container .custom-datepicker__calendar-button { + height: 45px; + top: -6px; } -mygov-tasks-tasks-tiles .section-heading a { - font-family: "Roboto", sans-serif; - line-height: 28px; - line-height: 1.75rem; - margin-bottom: 15px; - margin-bottom: 0.9375rem; - font-size: 16px; - font-size: 1rem; - display: inline-flex; - position: relative; - text-decoration: none; - color: #254A7E; - line-height: 1.1875; - margin-top: auto; - margin-left: auto; - white-space: nowrap; - padding-right: 0; - font-weight: 500; +.payments-filter__date-filter-container .input-group input { + margin: 5px 0; + border: 1px solid #333333; + width: 100%; } -@media (min-width: 22.4375em) { - mygov-tasks-tasks-tiles .section-heading a { - max-width: 95%; +@media screen and (max-width: 768px) { + .payments-filter__date-filter-container { + display: block; } -} -@media only screen and (min-width: 48em) { - mygov-tasks-tasks-tiles .section-heading a { - margin-bottom: 7px; - margin-bottom: 0.4375rem; - max-width: 90%; + .payments-filter__date-filter-container .input-group { + margin: 0; } } -@media only screen and (min-width: 64em) { - mygov-tasks-tasks-tiles .section-heading a { - max-width: 75%; +@media screen and (min-width: 768px) { + .payments-filter__date-filter-container { + display: flex; + } + .payments-filter__date-filter-container .input-group { + margin: 0; + padding: 10px 15px 10px 0; + } + .payments-filter__date-filter-container__date-from-filter-container { + width: 187px; + } + .payments-filter__date-filter-container__date-to-filter-container { + width: 187px; } } -mygov-tasks-tasks-tiles .section-heading a:hover { - text-decoration: underline; -} -mygov-tasks-tasks-tiles .section-heading a:hover, mygov-tasks-tasks-tiles .section-heading a:focus { - color: #254A7E; +.payments-filter__date-filter-container label { + color: #183052; } -mygov-tasks-tasks-tiles .section-heading a:hover:after, mygov-tasks-tasks-tiles .section-heading a:focus:after { - transform: none; +.payments-filter__filter-buttons-container { + display: inline-block; + flex-wrap: wrap; + width: 100%; } -mygov-tasks-tasks-tiles .section-heading a:focus { - outline: 2px solid #254A7E; - outline: 0.125rem solid #254A7E; - text-decoration: none; +.payments-filter__payment-system { + border: 2px solid #183052 !important; + background-color: #FFFFFF; + border-radius: 0.3125rem; + font-size: 14px; } -mygov-tasks-tasks-tiles .section-heading a:after { - width: 7px; - width: 0.4375rem; - height: 11px; - height: 0.6875rem; - margin-left: 9px; - margin-left: 0.5625rem; - content: ""; - background: no-repeat bottom center; - background-image: url("resources/assets/icons/chevron-right-dark-blue.svg"); - position: static; - align-self: center; +@media screen and (max-width: 768px) { + .payments-filter__payment-system.btn { + width: 100%; + } } -mygov-tasks-tasks-tiles .section-heading .items-count { - font-size: 18px; - font-size: 1.125rem; - font-weight: 400; - line-height: 1.625; - align-self: flex-end; +@media screen and (min-width: 768px) { + .payments-filter__payment-system.btn:not(:last-child) { + margin: 0 10px 5px 0; + } } -mygov-tasks-tasks-tiles .section-heading.is-underlined { - position: relative; - padding-bottom: 20px; - padding-bottom: 1.25rem; +.payments-filter__payment-system.btn { + padding: 10px 16px 10px 16px; + text-align: center; + margin-bottom: 5px; + min-height: 30px; + min-width: 100px; + flex-grow: 1; + height: 46px; + border: 2px solid #254A7E; } -mygov-tasks-tasks-tiles .section-heading.is-underlined::before, mygov-tasks-tasks-tiles .section-heading.is-underlined::after { - content: ""; - position: absolute; - height: 5px; - bottom: 0; +.payments-filter__payment-system.btn:hover { + color: #FFFFFF; + background-color: #254A7E; } -mygov-tasks-tasks-tiles .section-heading.is-underlined::before { - width: 50px; - left: 0; - background-color: #006CE0; +.payments-filter__payment-system.btn:active { + color: #183052; + background-color: #99E1F3; } -mygov-tasks-tasks-tiles .section-heading.is-underlined::after { - width: calc(100% - 49px); +.payments-filter__payment-system.selected { + color: #FFFFFF; + background-color: #254A7E; + padding: 5px 20px; +} +.payments-filter__payment-system.selected::after { + width: 13px; + width: 0.8125rem; + height: 13px; + height: 0.8125rem; + min-width: 13px; + min-width: 0.8125rem; + content: ""; + position: absolute; + top: 0; right: 0; - background-color: #183052; + background-size: contain; + background-position: center; + background-repeat: no-repeat; + transition-property: transform, margin, background; + transition-duration: 300ms; + transition-timing-function: ease; + background-image: url("styles/resources/assets/icons/clear-white.svg"); + position: absolute; + top: 6px; + right: 2px; } -mygov-tasks-tasks-tiles .section-heading.is-underlined + .section-description { - padding-top: 20px; - padding-top: 1.25rem; +.payments-filter__payment-system.selected:hover { + color: #FFFFFF; + background-color: #254A7E; } -mygov-tasks-tasks-tiles .section-heading:focus, mygov-tasks-tasks-tiles .section-heading:active { - outline: none; +.payments-filter__payment-system.selected:active { + color: #183052; + background-color: #99E1F3; } -.page-ausgov-home mygov-tasks-tasks-tiles .section-heading a::after, .page-mygov-home mygov-tasks-tasks-tiles .section-heading a::after { - top: 12px; - top: 0.75rem; + +img.payments-indicator-icon { + display: inline-block; + width: 30px; + height: 30px; + padding: 5px; + background-color: #FCB80E; + border-radius: 50%; + margin-right: 0.5rem; + text-align: center; + vertical-align: middle; } -@media (max-width: 47.9375em) { - mygov-tasks-tasks-tiles .section-heading { - flex-direction: column; - } - mygov-tasks-tasks-tiles .section-heading a { - margin-left: 0; + +@media screen and (max-width: 480px) { + .modal__content.modal__content--transactions { + min-width: 327px; } } -@media only screen and (min-width: 64em) { - mygov-tasks-tasks-tiles .section-heading.is-padded, -mygov-tasks-tasks-tiles .section-description.is-padded { - margin-left: 40px; - margin-left: 2.5rem; +@media screen and (min-width: 480px) { + .modal__content.modal__content--transactions { + min-width: 550px; } } -mygov-tasks-tasks-tiles .section-heading.is-centered, -mygov-tasks-tasks-tiles .section-description.is-centered { - margin-left: auto; - margin-right: auto; - text-align: center; + +dl.lodgement-components > *.lodgement-components__component.lodgement-components__component--important > dd, dl.lodgement-components > *.lodgement-components__component.lodgement-components__component--important > dt, dl.lodgement-components > *.lodgement-components__component.lodgement-components__component--long > dt, dl.payment-components > *.payment-components__component.payment-components__component--important > dd, dl.payment-components > *.payment-components__component.payment-components__component--important > dt, dl.payment-components > *.payment-components__component.payment-components__component--long > dt, .transaction-details .distinctive { + color: #101820; + font-weight: bold; + font-size: 18px; } -mygov-tasks-tasks-tiles .section-heading.is-centered p, -mygov-tasks-tasks-tiles .section-description.is-centered p { - text-align: center; +dl.lodgement-components > *.lodgement-components__component.lodgement-components__component--important > dd > strong, dl.lodgement-components > *.lodgement-components__component.lodgement-components__component--important > dt > strong, dl.lodgement-components > *.lodgement-components__component.lodgement-components__component--long > dt > strong, dl.payment-components > *.payment-components__component.payment-components__component--important > dd > strong, dl.payment-components > *.payment-components__component.payment-components__component--important > dt > strong, dl.payment-components > *.payment-components__component.payment-components__component--long > dt > strong, .transaction-details .distinctive > strong { + font-weight: bold; } -.authenticated-container mygov-tasks-tasks-tiles .section-heading, -.authenticated-container mygov-tasks-tasks-tiles .section-description { - margin-left: 0; + +.transaction-details { + color: #525252; + font-size: 16px; } -mygov-tasks-tasks-tiles .section-heading.is-centered { - padding-right: 0; +.transaction-details h3, +.transaction-details h4 { + margin: 10px 0 10px 0; } -mygov-tasks-tasks-tiles .auth-section-heading { - margin: 60px 0 20px 0; - margin: 3.75rem 0 1.25rem 0; +.transaction-details__summary { + font-size: 18px; + margin-bottom: 10px; } - -.section-heading-skeleton { - margin-top: 20px; - margin-top: 1.25rem; - margin-bottom: 30px; - margin-bottom: 1.875rem; - display: block; +.transaction-details__summary .payment-date-with-indicator { + display: flex; + flex-flow: row nowrap; + align-items: center; } - -.tasks-section { - max-width: 1424.75px; - max-width: 89.046875rem; - margin: auto; +.transaction-details__summary .row { + display: flex; + justify-content: space-between; + flex-wrap: nowrap; + padding: 0; + align-items: center; } -.tasks-section .section-heading, .tasks-section .section-heading:first-child, .authenticated-container__page .tasks-section .section-heading, .authenticated-container__page .tasks-section .section-heading:first-child { - margin-bottom: 30px; - margin-bottom: 1.875rem; +.transaction-details__summary .row:first-child { + min-height: 40px; } -.tasks-section .title { - font-family: "Roboto", sans-serif; - font-size: 18px; - font-size: 1.125rem; - letter-spacing: -0.01px; - letter-spacing: -0.000625rem; - color: #333333; - font-weight: 700; - line-height: 1.2222222222; - text-align: left; - margin: 0; +.transaction-details__summary .row > * { + margin-top: auto; + margin-bottom: auto; } -.tasks-section .description { - padding: 0 10px 0 0; - padding: 0 0.625rem 0 0; - font-size: 16px; - font-size: 1rem; - max-width: 560px; - max-width: 35rem; - margin-top: 7px; - margin-top: 0.4375rem; - text-align: left; - color: #333333; - font-weight: 400; - line-height: 1.25; - margin-right: 0; - margin-bottom: 0; +@media (max-width: 47.9375em) { + .transaction-details__summary .row { + display: flex !important; + } +} +.transaction-details__summary .row > :first-child { + max-width: 70%; + padding-right: 30px; margin-left: 0; } -.tasks-section .description p { - font-size: 16px; - font-size: 1rem; +.transaction-details__summary .row > :last-child { + max-width: 30%; + margin-right: 0; +} +.transaction-details .hline { + border: 1px solid #EAEAEA; + margin-top: 15px; + margin-bottom: 15px; +} +.transaction-details .payment-breakdown-section { margin: 0; - font-weight: 400; - line-height: 1.25; - color: #333333; } -.tasks-section .tasks-header-section { - margin: 0 0 8px 0; - margin: 0 0 0.5rem 0; - display: flex; - flex-flow: column nowrap; - justify-content: space-between; +@media screen and (max-width: 480px) { + .transaction-details .components .component-type { + max-width: 200px; + } } -@media only screen and (min-width: 40em) { - .tasks-section .tasks-header-section { - flex-flow: row nowrap; +@media screen and (min-width: 480px) { + .transaction-details .components .component-type { + max-width: 260px; } } -.tasks-section .tasks-header-section a { +.transaction-details .net-payment-amount.row { + padding-bottom: 15px; +} +.transaction-details .links a { + padding: 5px 0 5px 0; text-decoration: none; + display: flex; + text-decoration: underline; + text-align: left; + color: #254A7E; } -.tasks-section .tasks-header-section .tasks-link { - font-size: 16px; - font-size: 1rem; - font-weight: 500; - line-height: 1.625; +.transaction-details .links a:hover { color: #254A7E; - margin: 0; - cursor: pointer; + text-decoration: none; } -.tasks-section .tasks-header-section .tasks-link .link-arrow { - margin-left: 8px; - margin-left: 0.5rem; - height: 12px; - height: 0.75rem; - content: url("resources/assets/icons/chevron-right-dark-blue.svg"); +.transaction-details .close-button-container button { + min-width: 100%; + margin-top: 20px; + background-color: #99E1F3; + color: #183052; } - -.task-tile { - font-family: "Roboto", sans-serif; - outline: 1px solid transparent; - outline: 0.0625rem solid transparent; - border-radius: 5px; - border-radius: 0.3125rem; - min-height: 129px; - min-height: 8.0625rem; - margin-bottom: 18px; - margin-bottom: 1.125rem; - padding: 20px; - padding: 1.25rem; - box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.25); - box-shadow: 0 0.125rem 0.375rem 0 rgba(0, 0, 0, 0.25); - width: 100%; - background-color: #FFFFFF; - border-width: 0; - display: flex; - flex-flow: column nowrap; - justify-content: flex-start; - align-items: stretch; - position: relative; - overflow: hidden; +.transaction-details .close-button-container button:hover { + background-color: #254A7E; + color: #FFFFFF; } -.task-tile .icon-content-container { - margin-right: -12.5px; - margin-right: -0.78125rem; - margin-left: -12.5px; - margin-left: -0.78125rem; - display: flex; - flex-flow: column nowrap; - align-items: stretch; - flex: 1; + +ul.lodgements-list { + list-style: none; + margin: 0; + padding: 0; } -.task-tile .icon-content-container > * { - margin-right: 12.5px; - margin-right: 0.78125rem; - margin-left: 12.5px; - margin-left: 0.78125rem; +ul.lodgements-list > li { + margin: 0; + padding: 0; } -.task-tile .icon-content-container .icon-container > .overdue-background img, -.task-tile .icon-content-container .icon-container > .due-today-background img, -.task-tile .icon-content-container .icon-container > .no-overdue-background img { - height: 33px; - height: 2.0625rem; - width: 33px; - width: 2.0625rem; - border-radius: 50%; - display: flex; - justify-content: center; - align-items: center; - object-fit: contain; + +dl.payment-components { + margin: 0; + padding: 0; } -@media only screen and (min-width: 40em) { - .task-tile .icon-content-container .icon-container > .overdue-background img, -.task-tile .icon-content-container .icon-container > .due-today-background img, -.task-tile .icon-content-container .icon-container > .no-overdue-background img { - height: 50px; - height: 3.125rem; - width: 50px; - width: 3.125rem; - } +dl.payment-components > * > dd, dl.payment-components > * > dt { + color: #333333; + font-size: 1em; + margin: 0; + font-weight: normal; } -.task-tile .icon-content-container .content-container { - padding-top: 13px; - padding-top: 0.8125rem; +dl.payment-components > *.payment-components__component { display: flex; + flex-flow: row nowrap; + justify-content: space-between; +} +dl.payment-components > *.payment-components__component > dd, dl.payment-components > *.payment-components__component > dt { + width: 50%; +} +dl.payment-components > *.payment-components__component > dd { + text-align: right; +} +dl.payment-components > *.payment-components__component.payment-components__component--long { flex-flow: column nowrap; + justify-content: initial; } -@media only screen and (min-width: 40em) { - .task-tile .icon-content-container .content-container { - padding-top: 0; - } +dl.payment-components > *.payment-components__component.payment-components__component--long > dd, dl.payment-components > *.payment-components__component.payment-components__component--long > dt { + width: 100%; } -.task-tile .icon-content-container .content-container .date-container { - color: #000000; +dl.payment-components > *.payment-components__component.payment-components__component--long > dd { text-align: left; - display: flex; - flex-flow: row wrap; - margin-bottom: 0; -} -.task-tile .icon-content-container .content-container .date-container .due-status { - font-size: 16px; - font-size: 1rem; - margin: 0; - font-weight: 400; - line-height: 1.25; - color: #676767; + margin-top: 5px; } -.task-tile .icon-content-container .content-container .date-container .due-status.due-today { - color: #FE5000; - font-weight: 700; +dl.payment-components > *.payment-components__component.payment-components__component--long > dt { + font-size: inherit; } -.task-tile .icon-content-container .content-container .date-container .due-status.overdue { - color: #C3362B; - font-weight: 700; +dl.payment-components > div + * { + margin-top: 10px; } -.task-tile .icon-content-container .content-container .date-container .date { - font-size: 16px; - font-size: 1rem; - font-weight: 400; - line-height: 1.25; - text-align: left; - color: #676767; + +dl.lodgement-components { margin: 0; + padding: 0; } -@media only screen and (min-width: 40em) { - .task-tile .icon-content-container { - flex-flow: row nowrap; - } -} -@media screen and (min-width: 0\0 ) { - .task-tile .icon-content-container { - flex: 1 1 auto; - } +dl.lodgement-components > * > dd, dl.lodgement-components > * > dt { + color: #333333; + font-size: 1em; + margin: 0; + font-weight: normal; } -.task-tile .action-container { - margin-top: 10px; - margin-top: 0.625rem; - padding-top: 10px; - padding-top: 0.625rem; - margin-right: -6.5px; - margin-right: -0.40625rem; - margin-left: -6.5px; - margin-left: -0.40625rem; - margin-top: 19px; - margin-top: 1.1875rem; +dl.lodgement-components > *.lodgement-components__component { display: flex; flex-flow: row nowrap; - border-left: none; - position: relative; - align-items: center; justify-content: space-between; - width: calc(100% + 6.5px); - width: calc(100% + 0.40625rem); - padding-top: 0; } -.task-tile .action-container > * { - margin-right: 6.5px; - margin-right: 0.40625rem; - margin-left: 6.5px; - margin-left: 0.40625rem; +dl.lodgement-components > *.lodgement-components__component > dd, dl.lodgement-components > *.lodgement-components__component > dt { + width: 50%; } -.task-tile .action-container .action-details-container { - font-size: 16px; - font-size: 1rem; - line-height: 1.125; +dl.lodgement-components > *.lodgement-components__component > dd { + text-align: right; } -.task-tile .action-container .action-details-container p { - margin: 0; +dl.lodgement-components > *.lodgement-components__component.lodgement-components__component--long { + flex-flow: column nowrap; + justify-content: initial; } -.task-tile .action-container .action-details-container__wrapper { - margin-right: -2px; - margin-right: -0.125rem; - margin-left: -2px; - margin-left: -0.125rem; - display: flex; - flex-flow: row wrap; +dl.lodgement-components > *.lodgement-components__component.lodgement-components__component--long > dd, dl.lodgement-components > *.lodgement-components__component.lodgement-components__component--long > dt { + width: 100%; } -.task-tile .action-container .action-details-container__wrapper > span { - margin-right: 2px; - margin-right: 0.125rem; - margin-left: 2px; - margin-left: 0.125rem; +dl.lodgement-components > *.lodgement-components__component.lodgement-components__component--long > dd { + text-align: left; + margin-top: 5px; } -@media only screen and (min-width: 40em) { - .task-tile .action-container .action-details-container__wrapper { - max-width: 200px; - max-width: 12.5rem; - text-align: right; - justify-content: flex-end; +dl.lodgement-components > *.lodgement-components__component.lodgement-components__component--long > dt { + font-size: inherit; +} +dl.lodgement-components > div + * { + margin-top: 10px; +} + +.payments-table { + max-width: 1072px; + min-width: 280px; +} +.payments-table .cmp-text table tr td, +.payments-table .cmp-text table tr th { + vertical-align: middle; + text-align: left; + border-bottom: #CCCCCC 1px solid; + padding: 30px 30px 30px 0px; +} +@media screen and (max-width: 480px) { + .payments-table .cmp-text table tr td, +.payments-table .cmp-text table tr th { + padding-left: 5px; + padding-right: 5px; } } -.task-tile .action-container .icon-container .link-icon img { - width: 27px; - width: 1.6875rem; - height: 27px; - height: 1.6875rem; - min-height: 27px; - min-height: 1.6875rem; - background-size: 18px; - background-size: 1.125rem; - border-radius: 5px; - border-radius: 0.3125rem; - padding: 6px; - padding: 0.375rem; - background-color: #CCF0F9; - transition-property: margin-left; - transition-duration: 300ms; - display: flex; +.payments-table .cmp-text thead tr { + border-bottom: 2px solid #525252; +} +.payments-table .cmp-text thead th { + padding: 10px 20px 17px 20px; + font-weight: 700; +} +.payments-table .cmp-text caption::before { + width: 0; + left: 0; +} +.payments-table .cmp-text caption::after { + width: 0; + right: 0; +} +.payments-table .cmp-text { + margin: 0 !important; + min-height: 180px; } @media only screen and (min-width: 48em) { - .task-tile .action-container .icon-container .link-icon img { - width: 32px; - width: 2rem; - height: 32px; - height: 2rem; - min-height: 32px; - min-height: 2rem; + .payments-table .cmp-text { + min-height: 210px; } } -@media only screen and (min-width: 40em) { - .task-tile .action-container { - padding-top: 0; - border-top: none; - margin-top: 0; - margin-left: auto; - align-self: flex-start; - width: auto; - margin-top: 0; - padding-top: 0; - } +.payments-table .table-responsive { + margin: 0 !important; } -.task-tile a { - color: #333333; - text-decoration: none; +.payments-table .future-definition-row { + padding: 20px 20px 0 20px; + max-width: 1072px; + min-width: 280px; +} +.payments-table .future-definition-text { + display: inline; + margin-left: 10px; + line-height: 30px !important; + color: #000000; + font-weight: 400; + font-size: 16px; + font-family: "Roboto", sans-serif; +} +.payments-table__view-all-row { + text-align: right; + font-size: 16px; + font-family: "Roboto", sans-serif; + padding: 10px 10px 0 0; +} +.payments-table__view-all-row .link, .payments-table__view-all-row .linked-services__rightInternalLink { + color: #006CE0; +} +.payments-table .future-icon-cell { + vertical-align: top; + padding-left: 30px !important; +} +.payments-table__table { + border-collapse: collapse; + width: 100%; + max-width: 1072px; + min-width: 280px; + background-color: #FFFFFF !important; +} +.payments-table__table th button.ascending::after { + width: 15px; + width: 0.9375rem; + height: 15px; + height: 0.9375rem; + min-width: 15px; + min-width: 0.9375rem; + content: ""; + position: absolute; + top: 0; + right: 0; + background-size: contain; + background-position: center; + background-repeat: no-repeat; + transition-property: transform, margin, background; + transition-duration: 300ms; + transition-timing-function: ease; + margin-left: 0.5em; + position: absolute; + top: auto; + right: auto; + background-image: url("styles/resources/assets/icons/arrow-up-black.svg"); + transition-property: none; } -.task-tile a:after { - border-radius: 5px; - border-radius: 0.3125rem; +.payments-table__table th button.descending::after { + width: 15px; + width: 0.9375rem; + height: 15px; + height: 0.9375rem; + min-width: 15px; + min-width: 0.9375rem; content: ""; position: absolute; top: 0; right: 0; - bottom: 0; - left: 0; - z-index: 1; -} -.task-tile a:focus { - outline: none; -} -.task-tile a:hover, .task-tile a:focus { - color: #333333; - background-color: #FFFFFF; -} -.task-tile a:hover:after, .task-tile a:focus:after { - border: 0.125rem solid #254A7E; -} -@media only screen and (min-width: 40em) { - .task-tile { - padding: 30px 20px 23px; - padding: 1.875rem 1.25rem 1.4375rem; - flex-flow: row nowrap; - } -} - -.loading-section { - display: flex; - flex-direction: column; - align-items: center; -} -.loading-section .loading-spinner { - width: 96px; - width: 6rem; - height: 96px; - height: 6rem; - min-width: 96px; - min-width: 6rem; - display: block; - height: 96px; - width: 96px; background-size: contain; background-position: center; background-repeat: no-repeat; - margin: 13px 28px 0; - margin: 0.8125rem 1.75rem 0; - background-image: url("resources/assets/icons/spinner.svg"); + transition-property: transform, margin, background; + transition-duration: 300ms; + transition-timing-function: ease; + margin-left: 0.5em; + position: absolute; + top: auto; + right: auto; + background-image: url("styles/resources/assets/icons/arrow-down-black.svg"); + transition-property: none; } -@media only screen and (min-width: 77.75em) { - .loading-section .loading-spinner { - width: 96px; - width: 6rem; - height: 96px; - height: 6rem; - min-width: 96px; - min-width: 6rem; - display: block; - height: 96px; - width: 96px; - background-size: contain; - background-position: center; - background-repeat: no-repeat; - margin: 17px 35px 0; - margin: 1.0625rem 2.1875rem 0; - } +.payments-table__table button.payments-table__sort-button { + border: 0; + background-color: #FFFFFF; + font-weight: bold; + color: #183052; + font-size: 16px; + cursor: pointer; + padding: 0; } - -.no-tasks-section, -.tasks-error-section { - max-width: 1424.75px; - max-width: 89.046875rem; - margin: auto; - padding-bottom: 24px; - padding-bottom: 1.5rem; - margin-right: -9px; - margin-right: -0.5625rem; - margin-left: -9px; - margin-left: -0.5625rem; - display: flex; - flex-flow: row nowrap; - justify-content: flex-start; - align-items: stretch; - overflow: hidden; +.payments-table__table button.payments-table__sort-button:focus { + outline: auto; } -.no-tasks-section > *, -.tasks-error-section > * { - margin-right: 9px; - margin-right: 0.5625rem; - margin-left: 9px; - margin-left: 0.5625rem; +.payments-table__table__table-heading { + background-color: #FFFFFF; } -.no-tasks-section .icon-container .icon-background, -.tasks-error-section .icon-container .icon-background { - border-radius: 50%; - display: flex; - justify-content: center; - align-items: center; +.payments-table__table__table-heading__amount { + text-align: center !important; } -.no-tasks-section .icon-container .icon-background img, -.tasks-error-section .icon-container .icon-background img { - width: 35px; - width: 2.1875rem; - height: 35px; - height: 2.1875rem; - width: auto; - object-fit: contain; +.payments-table__table__payment-row { + border-width: 0; + border: none; + cursor: pointer; + background-color: #FFFFFF !important; + transition: background-color 0.5s ease-in; } -@media only screen and (min-width: 40em) { - .no-tasks-section .icon-container .icon-background img, -.tasks-error-section .icon-container .icon-background img { - height: 50px; - height: 3.125rem; - width: 50px; - width: 3.125rem; - } +.payments-table__table__payment-row.new { + background-color: #EAEAEA !important; + transition: background-color 0.5s ease-in; } -.no-tasks-section .text-container, -.tasks-error-section .text-container { - display: flex; - flex-flow: column nowrap; - align-items: center; +.payments-table__table__payment-row .link, .payments-table__table__payment-row .linked-services__rightInternalLink { + font-weight: 400 !important; } -.no-tasks-section .text-container .header, -.tasks-error-section .text-container .header { - font-size: 18px; - font-size: 1.125rem; - font-weight: 700; - line-height: 1.2222222222; - color: #333333; - text-align: left; - width: 100%; +.payments-table__table__payment-row button.view-payment { + border: 0; + background: inherit; } -.no-tasks-section .text-container .footer, -.tasks-error-section .text-container .footer { - margin-top: 10px; - margin-top: 0.625rem; - font-size: 16px; - font-size: 1rem; - font-weight: 400; - line-height: 1.125; - text-align: left; - width: 100%; +.payments-table__table__payment-row button.view-payment.view-payment--wide { + color: #0E6393; + text-decoration: underline; } - -.tasks-error-section .icon-container .icon-background { - background-color: #75787B; +.payments-table__table__payment-row button.view-payment.view-payment--wide:hover { + background-color: #006CE0; + color: #FFFFFF; } - -.tasks-screen { - padding: 0 12px; - padding: 0 0.75rem; - background-color: #FFFFFF; +.payments-table__table__payment-row button.view-payment.view-payment--wide:hover::after { + background: url("styles/resources/assets/icons/arrow-right-white.svg") no-repeat; } -.tasks-screen .no-tasks-section, -.tasks-screen .tasks-error-section { - margin-left: 0px; - margin-left: 0rem; +.payments-table__table__payment-row__payment-desc { + position: relative; + line-height: 25px !important; } -@media only screen and (min-width: 40em) { - .tasks-screen .no-tasks-section, -.tasks-screen .tasks-error-section { - margin-left: -9px; - margin-left: -0.5625rem; - } +.payments-table__table__payment-row__payment-desc__system { + font-weight: 600; + font-size: 18px !important; } -.tasks-screen .tasks-section { - max-width: none; +.payments-table__table__payment-row__payment-desc__amount { + font-weight: 600; + font-size: 18px !important; } -.tasks-screen .empty-services { - margin-left: 0px; - margin-left: 0rem; - display: flex; - flex-flow: column nowrap; +.payments-table__table__payment-row__payment-detail { + line-height: 25px !important; } -.tasks-screen .empty-services .link-service-image { - display: flex; - flex-flow: row nowrap; - justify-content: flex-start; +.payments-table__table__payment-row__payment-detail__amount { + font-weight: 600; } -.tasks-screen .empty-services .link-service-image img { - height: 76px; - height: 4.75rem; - align-self: center; +.payments-table__table__payment-row__payment-detail__amount.negative { + color: #DC3548; } -@media only screen and (min-width: 40em) { - .tasks-screen .empty-services .link-service-image img { - height: 117px; - height: 7.3125rem; - } +.payments-table__table__payment-cell { + color: #525252; } -.tasks-screen .empty-services .link-service-image h3 { - margin-top: 0px; - margin-top: 0rem; - margin-bottom: 13px; - margin-bottom: 0.8125rem; - font-size: 24px; - font-size: 1.5rem; - padding-left: 24px; - padding-left: 1.5rem; - display: block; - font-weight: 700; - line-height: 1.3333333333; +.payments-table__table__payment-cell__payment-system__literal { + font-size: 18px !important; } -@media only screen and (min-width: 40em) { - .tasks-screen .empty-services .link-service-image h3 { - display: none; - flex-flow: column nowrap; - justify-content: center; - } +.payments-table__table__payment-cell__amount { + font-size: 18px !important; + text-align: right !important; + font-weight: 500 !important; } -.tasks-screen .empty-services .link-service-content { - padding-left: 0px; - padding-left: 0rem; - display: flex; - flex-flow: column nowrap; +.payments-table__table__payment-cell__action { + min-width: 110px; } -.tasks-screen .empty-services .link-service-content h3 { - margin-top: 0px; - margin-top: 0rem; - margin-bottom: 13px; - margin-bottom: 0.8125rem; - font-size: 24px; - font-size: 1.5rem; - display: none; - font-weight: 700; - line-height: 1.3333333333; +.payments-table__table__text-message-row { + background-color: #FFFFFF !important; +} +.payments-table__table__text-message-row__text-message-cell { + text-align: center !important; } -@media only screen and (min-width: 40em) { - .tasks-screen .empty-services .link-service-content h3 { - display: block; - } +.payments-table__table--narrow .payments-table__table__payment-row button.view-payment { + text-align: inherit; } -.tasks-screen .empty-services .link-service-content p { - margin-top: 0px; - margin-top: 0rem; - margin-bottom: 0px; - margin-bottom: 0rem; - font-size: 16px; - font-size: 1rem; - font-weight: 400; - line-height: 1.5; +.payments-table__table--narrow .payments-table__table__payment-row button.view-payment:focus { + outline: none; } -.tasks-screen .empty-services .link-service-content .empty-button { - max-width: 181px; - max-width: 11.3125rem; - height: 45px; - height: 2.8125rem; - border-radius: 4px; - border-radius: 0.25rem; - font-size: 16px; - font-size: 1rem; - padding: 12px 32px; - padding: 0.75rem 2rem; - margin-top: 14px; - margin-top: 0.875rem; - background-color: #99E1F3; - color: #183052; - font-weight: 500; - line-height: 1.25; - border: none; +.payments-table__table--narrow .payments-table__table__payment-row:focus-within { + outline: 3px solid #000000; +} +.payments-table__show-more-results-container { + float: left; +} +.payments-table__show-more-results { + margin-top: 10px; + display: inline-block; + border: 2px solid #BBBCBC; + padding: 5px 20px 5px 20px; + height: 46px; + border-radius: 5px; + background-color: #FFFFFF; text-decoration: none; - text-align: center; + color: #183052; } -.tasks-screen .empty-services .link-service-content .empty-button:hover { - background-color: #0E6393; +.payments-table__show-more-results:hover { + background-color: #183052; color: #FFFFFF; + border: none; } -@media only screen and (min-width: 40em) { - .tasks-screen .empty-services .link-service-content { - padding-left: 36px; - padding-left: 2.25rem; - margin-top: 0px; - margin-top: 0rem; - } + +.payments .loading-section { + display: flex; + flex-direction: column; + align-items: flex-start; } -@media only screen and (min-width: 40em) { - .tasks-screen .empty-services { - margin-left: -31px; - margin-left: -1.9375rem; - flex-flow: row nowrap; - } +.payments .loading-section .loading-spinner { + width: 96px; + width: 6rem; + height: 96px; + height: 6rem; + min-width: 96px; + min-width: 6rem; + display: block; + background-size: contain; + background-position: center; + background-repeat: no-repeat; + background-image: url("styles/resources/assets/icons/spinner.svg"); + margin: 13px 28px 0; } -@media only screen and (min-width: 64em) { - .tasks-screen { - padding: 0; +@media only screen and (min-width: 77.75em) { + .payments .loading-section .loading-spinner { + width: 96px; + width: 6rem; + height: 96px; + height: 6rem; + min-width: 96px; + min-width: 6rem; + display: block; + background-size: contain; + background-position: center; + background-repeat: no-repeat; + margin: 17px 35px 0; } } - -body.fixed { - overflow: hidden; +.payments .no-payments { + display: flex; + flex-flow: row nowrap; } - -mygov-dashboard-transition-modal .modal, -mygov-tasks-transition-modal .modal { - font-size: 16px; - font-size: 1rem; - position: fixed; - top: 0; - right: 0; - bottom: 0; - left: 0; - overflow: hidden auto; +.payments .no-payments .no-payments-container { + margin-right: auto; + margin-left: 0; display: flex; + flex-direction: column; align-items: center; - justify-content: center; - cursor: pointer; - z-index: 1050; } -mygov-dashboard-transition-modal .modal__bg, -mygov-tasks-transition-modal .modal__bg { - position: absolute; - top: 0; - right: 0; - bottom: 0; - left: 0; - background-color: rgba(0, 0, 0, 0.5); +.payments .no-payments .no-payments-container .no-payments-icon-container { + flex: 1; + flex-basis: auto; + width: 50px; } -mygov-dashboard-transition-modal .modal__content .modal-header .close, -mygov-tasks-transition-modal .modal__content .modal-header .close { - z-index: 9999; +.payments .no-payments .no-payments-container .no-payments-icon-container .icon { + width: 100%; + height: auto; } -mygov-dashboard-transition-modal .modal__content .modal-body .description:first-child, -mygov-tasks-transition-modal .modal__content .modal-body .description:first-child { - margin-top: 30px; - margin-top: 1.875rem; +.payments .no-payments .no-payments-container .no-payments-text-container { + flex: 1; + flex-basis: auto; + width: 100%; + text-align: center; } -mygov-dashboard-transition-modal .modal__content--transition.modal__content .modal-header .close, -mygov-tasks-transition-modal .modal__content--transition.modal__content .modal-header .close { - top: 20px; - top: 1.25rem; - right: 20px; - right: 1.25rem; +.payments .no-payments .no-payments-container .no-payments-text-container p { + margin: 0 !important; } -#modal__dialog { - position: relative; - display: inline-block; - text-align: left; - max-width: 100%; - cursor: default; - vertical-align: middle; - max-width: 100vw; - max-height: 100vh; - overflow-y: auto; - overflow-x: hidden; +.payments-dashboard { + margin: 60px 0 20px; } - -.modal--guided-content .modal__container, -.modal--guided-content .modal__content { - width: 670px; - width: 41.875rem; +.payments-dashboard .loading-section { + display: flex; + flex-direction: column; + align-items: flex-start; } -@media (max-width: 639px) { - .modal--guided-content .modal__container, -.modal--guided-content .modal__content { - width: 100%; +.payments-dashboard .loading-section .loading-spinner { + width: 96px; + width: 6rem; + height: 96px; + height: 6rem; + min-width: 96px; + min-width: 6rem; + display: block; + background-size: contain; + background-position: center; + background-repeat: no-repeat; + background-image: url("styles/resources/assets/icons/spinner.svg"); + margin: 13px 28px 0; +} +@media only screen and (min-width: 77.75em) { + .payments-dashboard .loading-section .loading-spinner { + width: 96px; + width: 6rem; + height: 96px; + height: 6rem; + min-width: 96px; + min-width: 6rem; + display: block; + background-size: contain; + background-position: center; + background-repeat: no-repeat; + margin: 17px 35px 0; } } -.modal--guided-content .modal__container .modal__content { - margin: 0; +.payments-dashboard .payments-table { + box-shadow: 0 2pt 8pt rgba(0, 0, 0, 0.1254901961); } -.modal--guided-content .modal__container .modal__content .modal-header:after { - display: none; +.payments-dashboard__view-all-row { + text-align: right; + font-size: 16px; + font-family: "Roboto", sans-serif; + padding-top: 10px; } -.modal--guided-content .modal__container .modal__content .modal-body .guided-content-screen .guided-content-image { - margin-top: 20px; - margin-top: 1.25rem; - margin-bottom: 16px; - margin-bottom: 1rem; - width: 100%; +.payments-dashboard .no-payments-container { + background-color: #FFFFFF; + box-shadow: 0 0 2px rgba(17, 17, 18, 0.2509803922); + border-radius: 5px; + opacity: 1; + padding: 20px 20px 20px 20px; + display: flex; + align-items: center; } -@media (max-width: 639px) { - .modal--guided-content .modal__container .modal__content .modal-body .guided-content-screen .guided-content-image { - margin-left: -20px; - margin-left: -1.25rem; - width: calc(100% + 40px); +@media screen and (max-width: 320px) { + .payments-dashboard .no-payments-container { + flex-direction: column; } } -.modal--guided-content .modal__container .modal__content .modal-body .guided-content-screen .guided-content-description { - margin-bottom: 60px; - margin-bottom: 3.75rem; -} -.modal--guided-content .modal__container .modal__content .modal-body .modal-buttons { - display: flex; - align-items: center; - justify-content: space-between; +.payments-dashboard .no-payments-container .no-payments-icon-container { + flex: 1; + flex-basis: auto; + width: 44px; + margin-right: 15px; } -.modal--guided-content .modal__container .modal__content .modal-body .modal-buttons .skip { - background: none; - border: none; - text-align: left; - width: min-content; - font-weight: 700; - color: #666666; +.payments-dashboard .no-payments-container .no-payments-icon-container .icon { + width: 100%; + height: auto; } -.modal--guided-content .modal__container .modal__content .modal-body .modal-buttons p { - color: #666666; +.payments-dashboard .no-payments-container .no-payments-text-container { + flex: 1; + flex-basis: auto; + width: 100%; } -.modal--guided-content .modal__container .modal__content .modal-body .modal-buttons p.screen-number { - margin-right: 20px; - margin-right: 1.25rem; - white-space: nowrap; +@media screen and (max-width: 320px) { + .payments-dashboard .no-payments-container .no-payments-text-container { + text-align: center; + } } -.modal--guided-content .modal__container .modal__content .modal-body .modal-buttons .modal-navigation { - display: flex; - align-items: center; +.payments-dashboard .no-payments-container .no-payments-text-container p { + font-size: 16px; + margin: 0 !important; } html { @@ -26325,6 +27876,9 @@ html { font-size: 100%; overflow-x: hidden; } +html.fixed { + overflow: hidden; +} html body { overflow-x: hidden; } diff --git a/src/css/buttons.css b/src/css/buttons.css index e4e3289..176b226 100644 --- a/src/css/buttons.css +++ b/src/css/buttons.css @@ -70,9 +70,7 @@ color: var(--white); } -/* Buttons fill entire horizontal width on displays below 640px (this number was taken from the original syling) */ - -@media only screen and (max-width: 639px) { +@media only screen and (max-width: 640px) { .page-mygov-auth-account .authenticated-body-container__page .documentlodgementservice .btn { display: block; width: 100%; diff --git a/src/css/buttons_old.css b/src/css/buttons_old.css index 27d5db9..6d51440 100644 --- a/src/css/buttons_old.css +++ b/src/css/buttons_old.css @@ -87,9 +87,7 @@ max-width: calc(50% - 1rem); } -/* Tablet (at least 40em) */ - -@media only screen and (min-width: 40em) { +@media only screen and (min-width: 768px) { .page-mygov-auth-account .authenticated-body-container__page .documentlodgementservice .btn ~ .btn { margin-left: 0.5rem; } diff --git a/src/css/floatingpage.css b/src/css/floatingpage.css index c618ce1..820e6c1 100644 --- a/src/css/floatingpage.css +++ b/src/css/floatingpage.css @@ -1,7 +1,4 @@ - -/* Desktop (at least 64em) */ - -@media only screen and (min-width: 48em) { +@media only screen and (min-width: 640px) { .page-mygov-auth-account .authenticated-body-container__page .documentlodgementservice .floating-page { background-color: var(--white); padding: 3rem; diff --git a/src/css/forms.css b/src/css/forms.css index 3d13910..f090e3b 100644 --- a/src/css/forms.css +++ b/src/css/forms.css @@ -52,11 +52,19 @@ } */ .page-mygov-auth-account .authenticated-body-container__page .documentlodgementservice div.checkbox .error-message { - margin: 0; + margin: 0 0 4px 0; padding: 0; } -.page-mygov-auth-account .authenticated-body-container__page .documentlodgementservice label.checkbox--error:before { +.page-mygov-auth-account .authenticated-body-container__page .documentlodgementservice label.checkbox:not(.checkbox--error) { + top: -8px; +} + +.page-mygov-auth-account .authenticated-body-container__page .documentlodgementservice label.checkbox { + margin-bottom: 40px; +} + +/* .page-mygov-auth-account .authenticated-body-container__page .documentlodgementservice label.checkbox--error:before { content: " "; position: absolute; top: 4px; @@ -65,15 +73,19 @@ bottom: 4px; border-radius: var(--input-border-radius); border: 2px solid var(--error-color); -} +} */ .page-mygov-auth-account .authenticated-body-container__page .documentlodgementservice div.checkbox { display: none; } .page-mygov-auth-account .authenticated-body-container__page .documentlodgementservice label.checkbox--error + div.checkbox { - display: initial; + display: block; } .page-mygov-auth-account .authenticated-body-container__page .documentlodgementservice label.checkbox { width: fit-content; align-items: center; +} + +.fieldset--title__hidden { + padding: 8px 0; } \ No newline at end of file diff --git a/src/css/fullonmobile.css b/src/css/fullonmobile.css index 392ebbb..7f1d784 100644 --- a/src/css/fullonmobile.css +++ b/src/css/fullonmobile.css @@ -1,4 +1,4 @@ -@media only screen and (min-width: 48em) { +@media only screen and (min-width: 640px) { .page-mygov-auth-account .authenticated-body-container__page .documentlodgementservice .full-width-on-mobile { /* background-color: initial; */ @@ -7,7 +7,7 @@ } } -@media only screen and (max-width: 48em) { +@media only screen and (max-width: 640px) { .page-mygov-auth-account .authenticated-body-container__page .documentlodgementservice .full-width-on-mobile > .upload-box { border: none; diff --git a/src/css/pdfpreview.css b/src/css/pdfpreview.css index 075841b..287665c 100644 --- a/src/css/pdfpreview.css +++ b/src/css/pdfpreview.css @@ -23,7 +23,7 @@ margin: 0 auto; } -@media only screen and (min-width: 64em) { +@media only screen and (min-width: 1024px) { .page-mygov-auth-account .authenticated-body-container__page .documentlodgementservice .pdf-preview-loading { min-height: 15rem; } diff --git a/src/css/sidepanel.css b/src/css/sidepanel.css index 8697dd0..b8a654a 100644 --- a/src/css/sidepanel.css +++ b/src/css/sidepanel.css @@ -1,8 +1,6 @@ .page-mygov-auth-account .authenticated-body-container__page .documentlodgementservice .side-panel { background-color: transparent; width: 100%; - max-width: 48rem; - } .page-mygov-auth-account .authenticated-body-container__page .documentlodgementservice .horiz-container { display: flex; @@ -11,13 +9,16 @@ flex-wrap: wrap; } +/* .page-mygov-auth-account .authenticated-body-container__page .documentlodgementservice .side-panel p { + margin: 8px 0 4px 0; +} */ /* Tablet or Desktop (at least 48em) */ -@media only screen and (min-width: 48em) { +@media only screen and (min-width: 768px) { .page-mygov-auth-account .authenticated-body-container__page .documentlodgementservice .side-panel { border: 1px solid var(--grey1c-100); - max-width: 29rem; + max-width: 464px; border-radius: 5px; padding: 16px; margin: 10px 0; diff --git a/src/css/style.css b/src/css/style.css index 21ff879..ef27873 100644 --- a/src/css/style.css +++ b/src/css/style.css @@ -1,6 +1,13 @@ :root { --font-size-20: 1.25rem; --light-grey: #666; + --bp-xxs-min: 359px; + --bp-xs-min: 480px; + --bp-s-min: 640px; /* Mobile */ + --bp-m-min: 768px; /* Tablet */ + --bp-l-min: 1024px; /* Desktop */ + --bp-xl-min: 1244px; + --bp-xxl-min: 1360px; } .authenticated-body-container__page { background-color: #EDF2F4; @@ -41,12 +48,12 @@ } .page-mygov-auth-account .authenticated-body-container__page .documentlodgementservice ul { color: #000; - margin: 1rem 0; + margin: 16px; padding: 0; list-style-position: inside; } -.page-mygov-auth-account .authenticated-body-container__page .documentlodgementservice ul li { - padding: 0.5rem 0; +.page-mygov-auth-account .authenticated-body-container__page .documentlodgementservice p + ul { + margin-top: -1em; } .page-mygov-auth-account .authenticated-body-container__page .documentlodgementservice .file-size { font-size: var(--font-size-14); @@ -56,7 +63,7 @@ /* Desktop (at least 64em) */ -@media only screen and (min-width: 64em) { +@media only screen and (min-width: 1024px) { .page-mygov-auth-account .authenticated-body-container { box-shadow: none; border: none; @@ -82,3 +89,37 @@ font-size: var(--font-size-24); } } + + +/* Element used to test different screen sizes */ + +tester { + display: inline-block; + z-index: 1; + position:fixed; + left: 0; + top: 0; + font-size: 32px; + opacity: 0.75; +} + +@media only screen and (min-width: 1024px) { + tester::after { + content: "Desktop"; + background-color: pink; + } +} + +@media only screen and (max-width: 1024px) { + tester::after { + content: "Tablet"; + background-color: green; + } +} + +@media only screen and (max-width: 640px) { + tester::after { + content: "Phone"; + background-color: lightblue; + } +} diff --git a/src/css/stylegrid.css b/src/css/stylegrid.css new file mode 100644 index 0000000..6203b17 --- /dev/null +++ b/src/css/stylegrid.css @@ -0,0 +1,84 @@ +:root { + --font-size-20: 1.25rem; + --light-grey: #666; +} +.authenticated-body-container__page { + background-color: #EDF2F4; +} +.page-mygov-auth-account .authenticated-body-container__page .documentlodgementservice { + padding: 20px; +} +.page-mygov-auth-account .authenticated-body-container__page .documentlodgementservice .subtitle { + font-size: var(--font-size-16); + color: var(--grey9c-100); + +} +.page-mygov-auth-account .authenticated-body-container__page .documentlodgementservice p { + color: #000; +} +.page-mygov-auth-account .authenticated-body-container__page .documentlodgementservice h1 { + font-size: var(--font-size-24); + font-weight: bold; + color: var(--dark-grey); + margin: 0.5em 0; +} +.page-mygov-auth-account .authenticated-body-container__page .documentlodgementservice h2 { + font-size: var(--font-size-20); + font-weight: bold; + color: #000; + margin: 0.75em 0; +} +.page-mygov-auth-account .authenticated-body-container__page .documentlodgementservice h3 { + font-size: var(--font-size-18); + font-weight: bold; + color: #000; +} +.page-mygov-auth-account .authenticated-body-container__page .documentlodgementservice h4 { + font-size: var(--font-size-16); + font-weight: bold; + color: #000; + margin: 0.5rem 0; +} +.page-mygov-auth-account .authenticated-body-container__page .documentlodgementservice ul { + color: #000; + margin: 1rem 0; + padding: 0; + list-style-position: inside; +} +.page-mygov-auth-account .authenticated-body-container__page .documentlodgementservice ul li { + padding: 0.5rem 0; +} +.page-mygov-auth-account .authenticated-body-container__page .documentlodgementservice .file-size { + font-size: var(--font-size-14); + color: var(--light-grey); + font-weight: bold; +} + +/* Desktop (at least 64em) */ + +@media only screen and (min-width: 1024px) { + .page-mygov-auth-account .authenticated-body-container { + box-shadow: none; + border: none; + } + .page-mygov-auth-account .authenticated-body-container__page .documentlodgementservice h1 { + font-size: 48px; + margin: 0 0 0.5em 0; + } + /* .page-mygov-auth-account .authenticated-body-container__page .documentlodgementservice h1.eat-subtitle { + font-weight: normal; + } + .page-mygov-auth-account .authenticated-body-container__page .documentlodgementservice h1.eat-subtitle::before { + content: "Document upload: "; + font-weight: bold; + } + .page-mygov-auth-account .authenticated-body-container__page .documentlodgementservice h1.eat-subtitle ~ .subtitle { + display: none; + } */ + .page-mygov-auth-account .authenticated-body-container__page .documentlodgementservice .subtitle { + font-size: var(--font-size-24); + } + .page-mygov-auth-account .authenticated-body-container__page .documentlodgementservice h2 { + font-size: var(--font-size-24); + } +} diff --git a/src/css/supportingdocs.css b/src/css/supportingdocs.css index ac94e9d..4c08074 100644 --- a/src/css/supportingdocs.css +++ b/src/css/supportingdocs.css @@ -15,13 +15,6 @@ background: #FFF; padding: 24px; border-radius: 4px; - - - /* span { - display: block; - font-size: 1rem; - padding: 20px 0 0; - } */ } @media (min-width: 640px) { diff --git a/src/css/uploadbox.css b/src/css/uploadbox.css index 7305162..a8563aa 100644 --- a/src/css/uploadbox.css +++ b/src/css/uploadbox.css @@ -8,11 +8,22 @@ border-radius: 5px; padding: 16px; margin: 10px 0; - max-width: 48em; + flex-shrink: 0; + width: 708px; } .page-mygov-auth-account .authenticated-body-container__page .documentlodgementservice .upload-box > :first-child { margin-top: 0; } +.page-mygov-auth-account .authenticated-body-container__page .documentlodgementservice .upload-box .upload-box__close-container { + display: flex; + +} +.page-mygov-auth-account .authenticated-body-container__page .documentlodgementservice .upload-box .upload-box__close-icon { + background-image: url(../img/close.png); + width: 16px; + height: 16px; + +} .page-mygov-auth-account .authenticated-body-container__page .documentlodgementservice .upload-box .upload-box__title { font-weight: bold; font-size: var(--font-size-18); @@ -49,6 +60,8 @@ .page-mygov-auth-account .authenticated-body-container__page .documentlodgementservice .upload-box__file-list .upload-box__file-item-textbox { width: 100%; min-height: 1.25rem; + margin: 0; + padding: 0; } .page-mygov-auth-account .authenticated-body-container__page .documentlodgementservice .upload-box__link-title, @@ -65,6 +78,7 @@ color: var(--light-grey); font-weight: bold; margin: 0.25rem 0; + padding: 0; } .page-mygov-auth-account .authenticated-body-container__page .documentlodgementservice .upload-box hr { @@ -107,7 +121,9 @@ text-decoration: none; } -@media only screen and (min-width: 64em) { + +/* Desktop */ +@media only screen and (min-width: 1024px) { .page-mygov-auth-account .authenticated-body-container__page .documentlodgementservice .upload-box__view-text::before { content: 'View'; @@ -127,6 +143,18 @@ } } -.page-mygov-auth-account .authenticated-body-container__page .documentlodgementservice .horiz-container > .upload-box { - width: 100%; +/* Tablet */ +@media only screen and (max-width: 1024px) { + + .page-mygov-auth-account .authenticated-body-container__page .documentlodgementservice .upload-box { + width: 580px; + } +} + +/* Phone */ +@media only screen and (max-width: 640px) { + + .page-mygov-auth-account .authenticated-body-container__page .documentlodgementservice .upload-box { + width: 100%; + } } \ No newline at end of file diff --git a/src/img/close.png b/src/img/close.png new file mode 100644 index 0000000..2ac7b73 Binary files /dev/null and b/src/img/close.png differ diff --git a/src/img/success.png b/src/img/success.png new file mode 100644 index 0000000..ceab0d9 Binary files /dev/null and b/src/img/success.png differ diff --git a/src/test.html b/src/test.html new file mode 100644 index 0000000..3a58fba --- /dev/null +++ b/src/test.html @@ -0,0 +1,600 @@ + + + + Document Lodgement Service + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

+ + +

+ +

+ + +

+ + + + + + + +

+ +

+ + +

+ + + +

+ + +

+ +

+ + + +

+ + + + + + + +

Document upload service

Medicare Entitlement Statement

You can use myGov to securely upload your documents and send to Medicare.

How it works

To upload the document, you'll need to

add the files or photos
give consent for myGov to send these document to Medicare.

Make sure the documents are accurate and complete. If you need to make changes to any of the documents sent to Medicare, you will need to contact that service.

Your privacy

Your privacy and security of your personal information is important to us. For information about your privacy, read the myGov privacy notice.

+ + + + +

+ + + +

+ + +

+ + + +

+ +

+ + +

+ +

+ + +

+ +

+ + +

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file -- cgit v1.2.3