diff options
Diffstat (limited to 'src/css/bigstyle.css')
| -rw-r--r-- | src/css/bigstyle.css | 7122 |
1 files changed, 4338 insertions, 2784 deletions
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 { + 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,748 +18356,6 @@ body.is-open { transition: color 150ms ease; } -.payments .loading-section { - display: flex; - flex-direction: column; - align-items: flex-start; -} -.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; -} -@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; - } -} -.payments .no-payments { - display: flex; - flex-flow: row nowrap; -} -.payments .no-payments .no-payments-container { - margin-right: auto; - margin-left: 0; - 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; -} -.payments .no-payments .no-payments-container .no-payments-icon-container .icon { - width: 100%; - height: auto; -} -.payments .no-payments .no-payments-container .no-payments-text-container { - flex: 1; - flex-basis: auto; - width: 100%; - text-align: center; -} -.payments .no-payments .no-payments-container .no-payments-text-container p { - margin: 0 !important; -} - -.payments-dashboard { - margin: 60px 0 20px; -} -.payments-dashboard .loading-section { - display: flex; - flex-direction: column; - align-items: flex-start; -} -.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; -} -@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; - } -} -.payments-dashboard .payments-table { - box-shadow: 0 2pt 8pt rgba(0, 0, 0, 0.1254901961); -} -.payments-dashboard__view-all-row { - text-align: right; - font-size: 16px; - font-family: "Roboto", sans-serif; - padding-top: 10px; -} -.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 screen and (max-width: 320px) { - .payments-dashboard .no-payments-container { - flex-direction: column; - } -} -.payments-dashboard .no-payments-container .no-payments-icon-container { - flex: 1; - flex-basis: auto; - width: 44px; - margin-right: 15px; -} -.payments-dashboard .no-payments-container .no-payments-icon-container .icon { - width: 100%; - height: auto; -} -.payments-dashboard .no-payments-container .no-payments-text-container { - flex: 1; - flex-basis: auto; - width: 100%; -} -@media screen and (max-width: 320px) { - .payments-dashboard .no-payments-container .no-payments-text-container { - text-align: center; - } -} -.payments-dashboard .no-payments-container .no-payments-text-container p { - font-size: 16px; - margin: 0 !important; -} - -.payments-filter { - display: block; - min-height: 30px; -} -.payments-filter .btn { - color: #183052; - padding-left: 0; - margin: 5px 0; -} -.payments-filter__show-hide-filter-container { - display: block; -} -.payments-filter__show-hide-filter { - padding-top: 5px; -} -.payments-filter__show-hide-clear-filter-container { - display: block; - min-height: 30px; - margin-top: 10px; -} -.payments-filter__show-hide-filter-container { - float: left; -} -.payments-filter__clear-filter-container { - float: right; -} -.payments-filter__clear-filter { - height: auto; - width: auto; - background: transparent; - min-width: auto; - padding: 5px; -} -.payments-filter__clear-filter.btn { - padding: 0 15px 0 0; - color: #006CE0; -} -.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; -} -.payments-filter__clear-filter.btn:hover { - background-color: transparent; -} -.payments-filter__date-filter-container .custom-datepicker__input::-ms-clear { - display: none; -} -.payments-filter__date-filter-container .custom-datepicker__calendar-button { - height: 45px; - top: -6px; -} -.payments-filter__date-filter-container .input-group input { - margin: 5px 0; - border-color: #183052; -} -@media screen and (max-width: 768px) { - .payments-filter__date-filter-container { - display: block; - } - .payments-filter__date-filter-container .input-group { - margin: 0; - padding: 5px; - } -} -@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%; - } -} -.payments-filter__date-filter-container label { - color: #183052; -} -.payments-filter__filter-buttons-container { - display: flex; - flex-wrap: wrap; -} -.payments-filter__payment-system { - border: 2px solid #183052; - background-color: #FFFFFF; - border-radius: 15px; - font-size: 14px; -} -.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; -} -.payments-filter__payment-system.btn:hover { - color: #FFFFFF; - background-color: #006CE0; - border-color: #006CE0; -} -.payments-filter__payment-system.btn:active { - color: #FFFFFF; - background-color: #183052; -} -.payments-filter__payment-system.selected { - color: #FFFFFF; - background-color: #183052; - padding: 5px 20px; -} -.payments-filter__payment-system.selected::after { - content: ""; - position: absolute; - top: 0; - 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; -} -.payments-filter__payment-system.selected:hover { - background-color: #808080; - border-color: #808080; - color: #FFFFFF; -} -.payments-filter__payment-system.selected:active { - color: #183052; - background-color: #FFFFFF; -} - -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 screen and (max-width: 480px) { - .modal__content.modal__content--transactions { - min-width: 327px; - } -} -@media screen and (min-width: 480px) { - .modal__content.modal__content--transactions { - min-width: 550px; - } -} - -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: 1.15em; -} -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; -} - -.transaction-details { - color: #525252; - font-size: 16px; -} -.transaction-details h3, -.transaction-details h4 { - margin: 10px 0 10px 0; -} -.transaction-details__summary { - font-size: 18px; - margin-bottom: 10px; -} -.transaction-details__summary .payment-date-with-indicator { - display: flex; - flex-flow: row nowrap; - align-items: center; -} -.transaction-details__summary .row { - display: flex; - justify-content: space-between; - flex-wrap: nowrap; - padding: 0; - align-items: center; -} -.transaction-details__summary .row:first-child { - min-height: 40px; -} -.transaction-details__summary .row > * { - margin-top: auto; - margin-bottom: auto; -} -@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; -} -.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; -} -@media screen and (max-width: 480px) { - .transaction-details .components .component-type { - max-width: 200px; - } -} -@media screen and (min-width: 480px) { - .transaction-details .components .component-type { - max-width: 260px; - } -} -.transaction-details .net-payment-amount.row { - padding-bottom: 15px; -} -.transaction-details .links a { - padding: 5px 25px 5px 0; - text-decoration: none; - display: flex; - justify-content: flex-end; -} -.transaction-details .links a::after { - content: ""; - position: absolute; - top: 0; - right: 0; - width: 20px; - height: 20px; - 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; -} -ul.lodgements-list > li { - margin: 0; - padding: 0; -} - -dl.payment-components { - margin: 0; - padding: 0; -} -dl.payment-components > * > dd, dl.payment-components > * > dt { - color: #525252; - font-size: 1em; - margin: 0; - font-weight: normal; -} -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; -} -dl.payment-components > *.payment-components__component.payment-components__component--long > dd, dl.payment-components > *.payment-components__component.payment-components__component--long > dt { - width: 100%; -} -dl.payment-components > *.payment-components__component.payment-components__component--long > dd { - text-align: left; - margin-top: 5px; -} -dl.payment-components > *.payment-components__component.payment-components__component--long > dt { - font-size: inherit; -} -dl.payment-components > div + * { - margin-top: 10px; -} - -dl.lodgement-components { - margin: 0; - padding: 0; -} -dl.lodgement-components > * > dd, dl.lodgement-components > * > dt { - color: #525252; - font-size: 1em; - margin: 0; - font-weight: normal; -} -dl.lodgement-components > *.lodgement-components__component { - display: flex; - flex-flow: row nowrap; - justify-content: space-between; -} -dl.lodgement-components > *.lodgement-components__component > dd, dl.lodgement-components > *.lodgement-components__component > dt { - width: 50%; -} -dl.lodgement-components > *.lodgement-components__component > dd { - text-align: right; -} -dl.lodgement-components > *.lodgement-components__component.lodgement-components__component--long { - flex-flow: column nowrap; - justify-content: initial; -} -dl.lodgement-components > *.lodgement-components__component.lodgement-components__component--long > dd, dl.lodgement-components > *.lodgement-components__component.lodgement-components__component--long > dt { - width: 100%; -} -dl.lodgement-components > *.lodgement-components__component.lodgement-components__component--long > dd { - text-align: left; - margin-top: 5px; -} -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 { - border-bottom: #F5F5F5 2px solid; -} -@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; - } -} -.payments-table .cmp-text { - margin: 0 !important; - min-height: 180px; -} -@media only screen and (min-width: 48em) { - .payments-table .cmp-text { - min-height: 210px; - } -} -.payments-table .table-responsive { - margin: 0 !important; -} -.payments-table .future-definition-row { - background: #EAEAEA !important; - padding: 20px 20px 20px 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: 500; - 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; -} -.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 { - 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; -} -.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; -} -.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; -} -.payments-table__table button.payments-table__sort-button:focus { - outline: auto; -} -.payments-table__table__table-heading { - background-color: #FFFFFF; -} -.payments-table__table__table-heading__amount { - text-align: right !important; -} -.payments-table__table__payment-row { - border-width: 0; - border: none; - cursor: pointer; - background-color: #FFFFFF !important; - transition: background-color 0.5s ease-in; -} -.payments-table__table__payment-row.new { - background-color: #EAEAEA !important; - transition: background-color 0.5s ease-in; -} -.payments-table__table__payment-row .link, .payments-table__table__payment-row .linked-services__rightInternalLink { - font-weight: 600 !important; -} -.payments-table__table__payment-row button.view-payment { - border: 0; - background: inherit; -} -.payments-table__table__payment-row button.view-payment.view-payment--wide { - color: #006CE0; -} -.payments-table__table__payment-row__payment-desc { - position: relative; - line-height: 25px !important; -} -.payments-table__table__payment-row__payment-desc__system { - font-weight: 600; - font-size: 18px !important; -} -.payments-table__table__payment-row__payment-desc__amount { - font-weight: 600; - font-size: 18px !important; -} -.payments-table__table__payment-row__payment-detail { - line-height: 25px !important; -} -.payments-table__table__payment-row__payment-detail__amount { - font-weight: 600; -} -.payments-table__table__payment-row__payment-detail__amount.negative { - color: #DC3548; -} -.payments-table__table__payment-cell { - color: #525252; -} -.payments-table__table__payment-cell__payment-system__literal { - font-size: 18px !important; - font-weight: 500 !important; -} -.payments-table__table__payment-cell__amount { - font-size: 18px !important; - text-align: right !important; - font-weight: 500 !important; -} -.payments-table__table__payment-cell__action { - min-width: 110px; -} -.payments-table__table__text-message-row { - background-color: #FFFFFF !important; -} -.payments-table__table__text-message-row__text-message-cell { - text-align: center !important; -} -.payments-table__table--narrow .payments-table__table__payment-row button.view-payment { - text-align: inherit; -} -.payments-table__table--narrow .payments-table__table__payment-row button.view-payment:focus { - outline: none; -} -.payments-table__table--narrow .payments-table__table__payment-row:focus-within { - outline: 3px solid #000000; -} -.payments-table__show-more-results { - margin-top: 10px; - display: inline-block; -} -.payments-table__show-more-results .link, .payments-table__show-more-results .linked-services__rightInternalLink { - font-weight: normal; - color: #183052; - cursor: pointer; - text-decoration: underline; -} -.payments-table__show-more-results .link:hover, .payments-table__show-more-results .linked-services__rightInternalLink:hover { - text-decoration: none; -} -.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; -} -.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; -} - .error-container { height: calc(100vh - 488px); min-height: 200px; @@ -18441,6 +18386,7 @@ dl.lodgement-components > div + * { margin-bottom: 8px; margin-bottom: 0.5rem; margin-top: 0; + word-break: break-word; } .conflicting-profile-details { @@ -18662,6 +18608,10 @@ dl.lodgement-components > div + * { font-size: 1.375rem; } +.enhanced-polling:empty { + display: none !important; +} + .profile { max-width: 770px; } @@ -18673,10 +18623,11 @@ dl.lodgement-components > div + * { } .profile__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 0 8px; @@ -18716,10 +18667,12 @@ dl.lodgement-components > div + * { } .profile__info { 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 0 20px; } @@ -18745,10 +18698,11 @@ dl.lodgement-components > div + * { } .profile__data { 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 0 6px; } @@ -18758,10 +18712,11 @@ dl.lodgement-components > div + * { .profile__data b, .profile__data 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; } @@ -18784,116 +18739,96 @@ dl.lodgement-components > div + * { } /* Detail View Styles */ -.progress-tracker-details { - 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; -} -.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; -} -.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; -} -.page-ausgov-home .progress-tracker-details__header h2, .page-mygov-home .progress-tracker-details__header h2 { - font-size: 50px; - line-height: 56px; -} -@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; - } +.page-mygov-auth-account .authenticated-body-container .auth-section-heading { + margin-top: 0 !important; } -.page-mygov-auth-home .progress-tracker-details__header h2 { - font-size: 50px; - line-height: 56px; + +body, +.page-mygov-auth-account { + /* Dashboard Component Styles */ } -.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; +body .progress-tracker h2.auth-section-heading, +.page-mygov-auth-account .progress-tracker h2.auth-section-heading { + margin-bottom: 21px; + margin-bottom: 1.3125rem; } -.theme-dark .progress-tracker-details__header p { - color: #FFFFFF; +body .progress-tracker-container ul, +.page-mygov-auth-account .progress-tracker-container ul { + flex-direction: column; + list-style: none; + padding: 0; } -.progress-tracker-details__header h3 { - margin-top: 40px; +body .progress-tracker-details, +.page-mygov-auth-account .progress-tracker-details { + position: relative; + flex-direction: column; + justify-content: space-between; + height: auto; } -.progress-tracker-details > ul { +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; - 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; } @media only screen and (min-width: 48em) { - .progress-tracker-details > ul { + body .progress-tracker-details > ul, +.page-mygov-auth-account .progress-tracker-details > ul { + border-radius: 4px; + border-radius: 0.25rem; width: 100%; - max-width: 520px; right: 0; - border-radius: 4px; - padding: 0 20px; } } -.progress-tracker-details > ul li { +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; - min-height: 70px; align-items: center; - padding: 13px 10px; padding-left: 0; width: 100%; } @media only screen and (min-width: 48em) { - .progress-tracker-details > ul li { - padding-left: 13px; + body .progress-tracker-details > ul li, +.page-mygov-auth-account .progress-tracker-details > ul li { + padding-left: 0; } } -.progress-tracker-details > ul li::before { +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: " "; + content: ""; display: block; - height: 1px; background-color: #DDDDDD; - width: calc(100% + 40px); - right: -20px; + width: 100%; +} +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; } -.progress-tracker-details > ul li:last-child::before { +@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; } -.progress-tracker-details > ul li div { +body .progress-tracker-details > ul li div, +.page-mygov-auth-account .progress-tracker-details > ul li div { display: flex; width: 100%; padding: 0; @@ -18902,285 +18837,534 @@ dl.lodgement-components > div + * { justify-content: space-around; position: relative; } -.progress-tracker-details > ul li div > img { - width: 19px; - width: 1.1875rem; - height: 19px; - height: 1.1875rem; - min-width: 19px; - min-width: 1.1875rem; +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; - height: 19px; - width: 19px; background-size: contain; background-position: center; background-repeat: no-repeat; position: relative; - margin-top: 6px; } -.progress-tracker-details > ul li span { +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%; } -.progress-tracker-details > ul li span p { +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; - margin-left: 15px; } -.progress-tracker-details > ul li span p.date, .progress-tracker-details > ul li span p.body { +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; - 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; - color: #666666; - font-weight: normal; + font-size: 0.875rem; + line-height: 1.3571428571; + color: #333333; + font-weight: 400; } -.theme-dark .progress-tracker-details > ul li span p.date, .theme-dark .progress-tracker-details > ul li span p.body { +.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; } -.progress-tracker-details > ul li span p.date a, .progress-tracker-details > ul li span p.body a { +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; } -.progress-tracker-details > ul li span p.body { - margin: 10px 15px 0 15px; -} -.progress-tracker-details > ul li span p.body b, -.progress-tracker-details > ul li span p.body strong { - font-weight: 700; +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; } -.progress-tracker-details > ul li span .claim-status-link { +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-size: 14px; - font-weight: normal; + font-weight: 400; position: relative; - margin: 13px 15px 6px 15px; text-decoration: none; } -.progress-tracker-details > ul li span .claim-status-link:hover { +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; - margin-right: 15px; text-decoration: underline; } -.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; +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; - height: 22px; - width: 22px; 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; - margin-right: 10px; - margin-top: -2px; } -.progress-tracker-details > ul li span .claim-status-link.external:hover img { - transform: translate(3px, -3px); +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; } -.progress-tracker-details > ul li span .claim-status-link.external img { - transition: transform 150ms ease-out; - backface-visibility: hidden; +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; } - -/* Dashboard Component Styles */ -.progress-tracker-carousel-item { +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; +} +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: 20px; padding-bottom: 0; height: auto; + display: flex; + height: 100%; + background: #FFFFFF; + text-decoration: none; + overflow: hidden; + color: #333333; } -.progress-tracker-carousel-item .claim-info p { - margin: 0; +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; } -.progress-tracker-carousel-item .claim-info span { +@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; + } +} +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; +} +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; +} +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; +} +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; +} +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; +} +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; +} +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; } -.progress-tracker-carousel-item .claim-info span strong { +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; - 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; font-weight: 700; } -.theme-dark .progress-tracker-carousel-item .claim-info span strong { +.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; } -.progress-tracker-carousel-item .claim-info .service { +body .progress-tracker-claim-item .claim-info .service, +.page-mygov-auth-account .progress-tracker-claim-item .claim-info .service { 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; + color: #525252; font-size: 14px; + font-size: 0.875rem; + max-height: 40px; + max-height: 2.5rem; + color: #101820; display: flex; align-items: center; - max-height: 40px; text-transform: capitalize; } -.theme-dark .progress-tracker-carousel-item .claim-info .service { +.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; } -.progress-tracker-carousel-item .claim-info .service img { +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; } -.progress-tracker-carousel-item .claim-info .title { +body .progress-tracker-claim-item .claim-info .title, +.page-mygov-auth-account .progress-tracker-claim-item .claim-info .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; - color: #101820; - margin-top: 20px; - margin-bottom: 10px; + margin-bottom: 1px; + margin-bottom: 0.0625rem; + font-size: 14px; + font-size: 0.875rem; + line-height: 1.2857142857; + color: #333333; + margin-top: 0; } -.theme-dark .progress-tracker-carousel-item .claim-info .title { +.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; } -.theme-dark .progress-tracker-carousel-item .claim-info .title { +.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; } -.progress-tracker-carousel-item .claim-info .status { +@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; + } +} +body .progress-tracker-claim-item .claim-info .status, +.page-mygov-auth-account .progress-tracker-claim-item .claim-info .status { 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; + 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; - max-height: 30px; - padding: 5px 0 10px 0; } -.theme-dark .progress-tracker-carousel-item .claim-info .status { +.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; } -.progress-tracker-carousel-item .claim-info .status img { - margin-right: 10px; +.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; } -.progress-tracker-carousel-item .claim-info .info { +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; +} +@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; + } +} +body .progress-tracker-claim-item .claim-info .info, +.page-mygov-auth-account .progress-tracker-claim-item .claim-info .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; font-size: 14px; - line-height: 20px; + 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; - margin: 10px 0 20px 0; + line-height: 1.2142857143; } -.theme-dark .progress-tracker-carousel-item .claim-info .info { +.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; } -.progress-tracker-carousel-item .claim-info .info b, -.progress-tracker-carousel-item .claim-info .info strong { - font-weight: 700; +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; } -.progress-tracker-carousel-item .claim-info .icon { +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: left; + align-self: start; +} +@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; + } } -.progress-tracker-carousel-item .claim-links { +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; } -.progress-tracker-carousel-item .claim-links p { +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; } -.progress-tracker-carousel-item .claim-links p .claim-status-link { +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; +} +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; - color: #525252; font-size: 16px; - line-height: 24px; + 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: #006CE0; - height: 50px; - padding: 3px 0; + color: #254A7E; text-decoration: none; - border-top: 1px solid #DDDDDD; - width: calc(40px + 100%); - right: 20px; - padding-left: 20px; + cursor: pointer; } -.theme-dark .progress-tracker-carousel-item .claim-links p .claim-status-link { +.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; } -.progress-tracker-carousel-item .claim-links p .claim-status-link:focus { +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); +} +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; - transition-property: margin-right; + outline-offset: -0.5rem; margin-right: 15px; -} -.progress-tracker-carousel-item .claim-links p .claim-status-link:hover { + margin-right: 0.9375rem; 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; +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; +} +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; - height: 19px; - width: 19px; 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; - margin-right: 10px; } -.progress-tracker-carousel-item .claim-links p .claim-status-link.external:hover img { - transform: translate(3px, -3px); +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; } -.progress-tracker-carousel-item .claim-links p .claim-status-link.external img { - transition: transform 150ms ease-out; - backface-visibility: hidden; +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); } -.progress-tracker-carousel-item .claim-links p .claim-status-link.internal { - background-color: #F5F5F5; +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; +} +@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; + } +} +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; +} +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; +} +@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; + } +} +body .claims-error-section, +.page-mygov-auth-account .claims-error-section { + text-align: center; +} +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; +} +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; } .quick-exit { @@ -19209,10 +19393,11 @@ dl.lodgement-components > div + * { } .quick-exit__body { 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; } @@ -19222,10 +19407,11 @@ dl.lodgement-components > div + * { .quick-exit__body b, .quick-exit__body 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; } @@ -19239,10 +19425,11 @@ dl.lodgement-components > div + * { } .quick-exit 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; margin: 0; @@ -19286,16 +19473,19 @@ dl.lodgement-components > div + * { .resources-carousel-item .item-box span { 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; margin: 0; display: block; } .page-ausgov-home .resources-carousel-item .item-box span, .page-mygov-home .resources-carousel-item .item-box span { 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 .resources-carousel-item .item-box span, .page-mygov-auth-content .resources-carousel-item .item-box span { font-weight: 400; @@ -19305,10 +19495,11 @@ dl.lodgement-components > div + * { } .resources-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; margin: 15px 0 0; } .theme-dark .resources-carousel-item .item-box .description { @@ -19325,10 +19516,11 @@ dl.lodgement-components > div + * { .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-size: 1rem; + line-height: 1.5; font-weight: normal; + color: #525252; } .theme-dark .resources-carousel-item .item-bar__meta .file-format, .theme-dark .resources-carousel-item .item-bar__meta .file-size, @@ -19347,12 +19539,16 @@ dl.lodgement-components > div + * { padding-left: 24px; } .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; - width: 16px; - height: 16px; background-size: contain; background-position: center; background-repeat: no-repeat; @@ -19620,10 +19816,11 @@ dl.lodgement-components > div + * { } .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: #525252; color: #FFFFFF; margin: 0; align-self: center; @@ -19640,10 +19837,11 @@ dl.lodgement-components > div + * { .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; color: #FFFFFF; @@ -19822,12 +20020,16 @@ dl.lodgement-components > div + * { .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; - width: 24px; - height: 24px; background-size: contain; background-position: center; background-repeat: no-repeat; @@ -19869,10 +20071,11 @@ dl.lodgement-components > div + * { .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; + color: #525252; color: #101820; font-weight: 700; font-size: 18px; @@ -19898,10 +20101,12 @@ dl.lodgement-components > div + * { .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; + font-size: 1.125rem; margin: 20px 0; + margin: 1.25rem 0; + line-height: 1.6666666667; + color: #525252; font-weight: 700; display: block; text-decoration: underline; @@ -20023,8 +20228,6 @@ dl.lodgement-components > div + * { min-width: 24px; min-width: 1.5rem; display: block; - height: 24px; - width: 24px; background-size: contain; background-position: center; background-repeat: no-repeat; @@ -20048,8 +20251,6 @@ dl.lodgement-components > div + * { min-width: 30px; min-width: 1.875rem; display: block; - height: 30px; - width: 30px; background-size: contain; background-position: center; background-repeat: no-repeat; @@ -20095,8 +20296,6 @@ dl.lodgement-components > div + * { min-width: 24px; min-width: 1.5rem; display: block; - height: 24px; - width: 24px; background-size: contain; background-position: center; background-repeat: no-repeat; @@ -20114,8 +20313,6 @@ dl.lodgement-components > div + * { min-width: 24px; min-width: 1.5rem; display: block; - height: 24px; - width: 24px; background-size: contain; background-position: center; background-repeat: no-repeat; @@ -20133,8 +20330,6 @@ dl.lodgement-components > div + * { min-width: 30px; min-width: 1.875rem; display: block; - height: 30px; - width: 30px; background-size: contain; background-position: center; background-repeat: no-repeat; @@ -20152,8 +20347,6 @@ dl.lodgement-components > div + * { min-width: 24px; min-width: 1.5rem; display: block; - height: 24px; - width: 24px; background-size: contain; background-position: center; background-repeat: no-repeat; @@ -20370,10 +20563,12 @@ dl.lodgement-components > div + * { .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; - 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; position: relative; padding-left: 28px; @@ -20392,12 +20587,16 @@ dl.lodgement-components > div + * { .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: 18px; - height: 18px; background-size: contain; background-position: center; background-repeat: no-repeat; @@ -20455,10 +20654,11 @@ dl.lodgement-components > div + * { .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-size: 1rem; + line-height: 1.5; font-weight: normal; + color: #525252; margin: 0; position: relative; text-align: left; @@ -20678,10 +20878,12 @@ dl.lodgement-components > div + * { .styled-list ul li, .styled-list ol li { 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 0 12px 0; position: relative; } @@ -20857,10 +21059,12 @@ dl.lodgement-components > div + * { } .styled-list > 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-top: 20px; margin-bottom: 20px; } @@ -21026,9 +21230,10 @@ dl.lodgement-components > div + * { .cmp-text table caption { 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; text-align: left; padding-bottom: 20px; /* mixin for table border - false denotes it is not a topBorder */ @@ -21037,12 +21242,13 @@ dl.lodgement-components > div + * { } @media only screen and (min-width: 64em) { .cmp-text table caption { - line-height: 28px; + line-height: 1.4; } } .page-ausgov-home .cmp-text table caption, .page-mygov-home .cmp-text table caption { font-size: 24px; - line-height: 30px; + font-size: 1.5rem; + line-height: 1.25; } .cmp-text table caption::before, .cmp-text table caption::after { content: ""; @@ -21072,10 +21278,11 @@ dl.lodgement-components > div + * { vertical-align: top; text-align: left; 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: 14px 20px 16px; line-height: 1.25; } @@ -21097,10 +21304,12 @@ dl.lodgement-components > div + * { } .cmp-text table .total-cell { 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; color: #101820; @@ -21149,10 +21358,12 @@ dl.lodgement-components > div + * { .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; @@ -21431,8 +21642,6 @@ dl.lodgement-components > div + * { min-width: 96px; min-width: 6rem; display: block; - height: 96px; - width: 96px; background-size: contain; background-position: center; background-repeat: no-repeat; @@ -21448,8 +21657,6 @@ dl.lodgement-components > div + * { min-width: 96px; min-width: 6rem; display: block; - height: 96px; - width: 96px; background-size: contain; background-position: center; background-repeat: no-repeat; @@ -21490,10 +21697,12 @@ dl.lodgement-components > div + * { .DI-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; margin-bottom: 15px; @@ -21572,10 +21781,12 @@ dl.lodgement-components > div + * { } .DI-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; @@ -21679,12 +21890,14 @@ dl.lodgement-components > div + * { } } .toast__message button.close { + width: 48px; + width: 3rem; + min-width: 48px; + min-width: 3rem; content: ""; position: absolute; top: 0; right: 0; - width: 48px; - height: 100%; background-size: contain; background-position: center; background-repeat: no-repeat; @@ -21700,10 +21913,11 @@ dl.lodgement-components > div + * { } .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; + color: #525252; color: #FFFFFF; margin: 0; align-self: center; @@ -21714,10 +21928,11 @@ dl.lodgement-components > div + * { .toast__message p strong, .toast__message 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: #FFFFFF; @@ -21740,12 +21955,14 @@ dl.lodgement-components > div + * { background: #168845; } .toast__icon { + width: 60px; + width: 3.75rem; + min-width: 60px; + min-width: 3.75rem; content: ""; position: absolute; top: 0; left: 0; - width: 60px; - height: 100%; background-size: contain; background-position: center; background-repeat: no-repeat; @@ -21765,6 +21982,176 @@ dl.lodgement-components > div + * { background-image: url("styles/resources/assets/icons/icon-check-circle-white.svg"); } +.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; +} +.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: 64em) { + .toast__container { + max-width: 770px; + max-width: 48.125rem; + left: 5vw; + } +} + +.toast__message { + min-height: 43px; + min-height: 2.6875rem; + border-radius: 5px; + border-radius: 0.3125rem; + position: relative; + 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: stretch; + line-height: 1.25; + padding: 0; +} +.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; +} +.theme-dark .toast__message p { + color: #FFFFFF; +} +.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; +} +.theme-dark .toast__message p strong, +.theme-dark .toast__message p b { + color: #FFFFFF; +} +.theme-dark .toast__message p strong, +.theme-dark .toast__message p b { + color: #FFFFFF; +} +.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; +} +.toast__message button.close:focus { + outline-color: #000000; +} +.toast__message.is-error { + background: #dc3548; +} +.toast__message.is-error .toast__icon { + background-image: url("styles/resources/assets/icons/icon-warning-white.svg"); + background-color: #af2939; +} +.toast__message.is-information { + background: #016ce0; +} +.toast__message.is-information .toast__icon { + background-image: url("styles/resources/assets/icons/icon-info-white.svg"); + background-color: #0055b3; +} +.toast__message.is-success { + background: #A7D0B1; +} +.toast__message.is-success .toast__icon { + background-image: url("styles/resources/assets/icons/icon-check-circle-white.svg"); + background-color: #1A9F50; +} + +.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; +} + .top-navigation-bar { display: none; align-items: left; @@ -21960,8 +22347,6 @@ dl.lodgement-components > div + * { min-width: 24px; min-width: 1.5rem; display: block; - height: 24px; - width: 24px; background-size: contain; background-position: center; background-repeat: no-repeat; @@ -22121,8 +22506,6 @@ dl.lodgement-components > div + * { min-width: 20px; min-width: 1.25rem; display: block; - height: 20px; - width: 20px; background-size: contain; background-position: center; background-repeat: no-repeat; @@ -22172,10 +22555,11 @@ dl.lodgement-components > div + * { } .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: #525252; color: #101820; display: flex; align-items: center; @@ -22194,10 +22578,11 @@ dl.lodgement-components > div + * { .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; } @@ -22228,8 +22613,6 @@ dl.lodgement-components > div + * { min-width: 24px; min-width: 1.5rem; display: block; - height: 24px; - width: 24px; background-size: contain; background-position: center; background-repeat: no-repeat; @@ -22252,6 +22635,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; @@ -22275,15 +22662,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; @@ -22291,6 +22686,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; } @@ -22299,6 +22696,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; @@ -22313,13 +22712,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; @@ -22335,12 +22740,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; } @@ -22358,6 +22767,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; @@ -22383,8 +22794,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; @@ -22394,22 +22810,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; @@ -22434,6 +22856,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; @@ -22442,12 +22866,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; @@ -22469,15 +22897,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; @@ -22499,6 +22933,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; @@ -22510,6 +22946,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; @@ -22518,14 +22956,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; @@ -22540,13 +22978,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; @@ -22560,12 +23004,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; @@ -22724,12 +23172,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; @@ -22795,7 +23247,7 @@ button:hover[disabled], button:hover.disabled, button:focus[disabled], button:fo min-width: 320px; margin-right: 60px !important; } -.un_link-confirmation__button.secondary { +.un_link-confirmation__button.secondary, .un_link-confirmation__button.cmp-feature-teaser__action-link { min-width: 320px; } .un_link-confirmation__content { @@ -22925,16 +23377,13 @@ button:hover[disabled], button:hover.disabled, button:focus[disabled], button:fo .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; +.unlinked-services-tile__block button.btn { + display: block; + min-width: 0rem; + height: 3rem; } @media (max-width: 639px) { - .unlinked-services-tile__block--btn-label { + .unlinked-services-tile__block button.btn { display: none; } } @@ -22946,7 +23395,7 @@ button:hover[disabled], button:hover.disabled, button:focus[disabled], button:fo display: block; width: 1.2rem; height: 1.4rem; - background: white url("styles/resources/assets/icons/chevron-right-black.svg") no-repeat center; + background: url("styles/resources/assets/icons/chevron-right-black.svg") no-repeat center; background-size: 1.5rem; } } @@ -22971,10 +23420,11 @@ button:hover[disabled], button:hover.disabled, button:focus[disabled], button:fo } .payments-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; @@ -22989,12 +23439,14 @@ button:hover[disabled], button:hover.disabled, button:focus[disabled], button:fo } .payments-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 .payments-carousel-item p { @@ -23022,8 +23474,6 @@ button:hover[disabled], button:hover.disabled, button:focus[disabled], button:fo min-width: 18px; min-width: 1.125rem; display: block; - height: 18px; - width: 18px; background-size: contain; background-position: center; background-repeat: no-repeat; @@ -23141,8 +23591,6 @@ button:hover[disabled], button:hover.disabled, button:focus[disabled], button:fo min-width: 17px; min-width: 1.0625rem; display: block; - height: 17px; - width: 17px; background-size: contain; background-position: center; background-repeat: no-repeat; @@ -23161,8 +23609,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; @@ -23217,13 +23663,14 @@ button:hover[disabled], button:hover.disabled, button:focus[disabled], button:fo border-radius: 0.3125rem; min-width: 180px; min-width: 11.25rem; - width: 180px; - width: 11.25rem; + height: 52px; + height: 3.25rem; color: #183052; background-color: #99E1F3; border: none; font-weight: 500; cursor: pointer; + width: fit-content; } .update-channel-content__content .content-area .button-container .btn-primary:hover { color: #FFFFFF; @@ -23263,10 +23710,10 @@ button:hover[disabled], button:hover.disabled, button:focus[disabled], button:fo } .update-channel-content .input-group input[type=radio]:checked + .check { background-color: unset; - border-color: #183052; + border-color: #254A7E; } .update-channel-content .input-group input[type=radio]:checked + .check::after { - background-color: #183052; + background-color: #254A7E; } .serviceNameUpdateInfo { @@ -23306,21 +23753,31 @@ button:hover[disabled], button:hover.disabled, button:focus[disabled], button:fo font-weight: 400; } -.updateContactDetails a[href]:hover { - text-decoration: none; +.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; } -.updateContactDetails button.link.action.highlight, .updateContactDetails button.action.highlight.linked-services__rightInternalLink { - padding: 0; +@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 .text-dark { - font-size: 16px; - font-size: 1rem; - color: #101820; - margin-bottom: 0; - line-height: 1.625; +.updateContactDetails .updateContactDetails--wrapper > h2:first-of-type { + margin-top: 0; } + @media (max-width: 47.9375em) { - .updateContactDetails .desktop-text { + .desktop-text { border: 0; clip: rect(0, 0, 0, 0); height: 1px; @@ -23332,7 +23789,41 @@ button:hover[disabled], button:hover.disabled, button:focus[disabled], button:fo width: 1px; } } -.updateContactDetails .para-link { + +body .updateContactDetails a[href]:hover, +.page-mygov-auth-account .updateContactDetails a[href]:hover { + text-decoration: none; +} +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; +} +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; +} +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; +} +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; +} +body .updateContactDetails .para-link, +.page-mygov-auth-account .updateContactDetails .para-link { font-family: "Roboto", sans-serif; font-size: 16px; line-height: 1.15; @@ -23340,77 +23831,128 @@ button:hover[disabled], button:hover.disabled, button:focus[disabled], button:fo margin: 0; align-self: flex-start; } -.updateContactDetails .para-link strong { +body .updateContactDetails .para-link strong, +.page-mygov-auth-account .updateContactDetails .para-link strong { font-size: 16px; line-height: 1.15; margin: 0; color: #000000; } -.updateContactDetails .heading { +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; } -.updateContactDetails .heading strong { +body .updateContactDetails .heading strong, +.page-mygov-auth-account .updateContactDetails .heading 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; +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; + font-weight: 500; + display: flex; + align-items: center; + transition: background-color 150ms, color 150ms; + background-color: transparent; } -@media only screen and (min-width: 48em) { - .updateContactDetails h2 { - margin-top: 51px; - margin-top: 3.1875rem; - } +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: 0 6px; + margin: 0 0.375rem; + content: ""; + background: no-repeat center; + background-size: contain; + background-image: url(styles/resources/assets/icons/ia/chevron-down.svg); + transition: transform 150ms; } -.updateContactDetails > h2:first-of-type { +body .updateContactDetails button.heading + div[aria-labelledby], +.page-mygov-auth-account .updateContactDetails button.heading + div[aria-labelledby] { margin-top: 0; } -.updateContactDetails .icon-uppercase { +body .updateContactDetails button.heading:hover, +.page-mygov-auth-account .updateContactDetails button.heading:hover { + background-color: var(--link-hover-bg); + color: var(--link-hover-color); +} +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); +} +body .updateContactDetails button.heading[aria-expanded=true], +.page-mygov-auth-account .updateContactDetails button.heading[aria-expanded=true] { + margin-bottom: 0; +} +body .updateContactDetails button.heading[aria-expanded=true]:after, +.page-mygov-auth-account .updateContactDetails button.heading[aria-expanded=true]:after { + transform: rotate(180deg); +} +body .updateContactDetails .icon-uppercase, +.page-mygov-auth-account .updateContactDetails .icon-uppercase { text-transform: uppercase; } -.updateContactDetails .input-group { +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; } -.updateContactDetails .input-group label { +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; } -.updateContactDetails .input-group > input, -.updateContactDetails .input-group > select, -.updateContactDetails .input-group > textarea { +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; } @media only screen and (min-width: 48em) { - .updateContactDetails .input-group > input, -.updateContactDetails .input-group > select, -.updateContactDetails .input-group > textarea { + 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; } } -.updateContactDetails .input-group input { +body .updateContactDetails .input-group input, +.page-mygov-auth-account .updateContactDetails .input-group input { border-width: 1px; border-width: 0.0625rem; border-radius: 2px; @@ -23420,14 +23962,19 @@ button:hover[disabled], button:hover.disabled, button:focus[disabled], button:fo width: auto; height: auto; } -.updateContactDetails .input-group input[name=code], .updateContactDetails .input-group input[name=mobile], .updateContactDetails .input-group input[name=email] { +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; } -.updateContactDetails .input-group input[name=mobile] { +body .updateContactDetails .input-group input[name=mobile], +.page-mygov-auth-account .updateContactDetails .input-group input[name=mobile] { width: 100%; } -.updateContactDetails .input-group input:focus { +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; @@ -23435,16 +23982,21 @@ button:hover[disabled], button:hover.disabled, button:focus[disabled], button:fo outline: 2px solid #000000; outline: 0.125rem solid #000000; } -.updateContactDetails .input-group input, -.updateContactDetails .input-group select, -.updateContactDetails .input-group textarea { +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%; } -.updateContactDetails .input-group input[type=checkbox], .updateContactDetails .input-group input[type=radio] { +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; @@ -23452,7 +24004,8 @@ button:hover[disabled], button:hover.disabled, button:focus[disabled], button:fo opacity: 0; padding: 0; } -.updateContactDetails .input-group .input-row { +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; @@ -23466,105 +24019,127 @@ button:hover[disabled], button:hover.disabled, button:focus[disabled], button:fo 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 { +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; } +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) { - .updateContactDetails .input-group .input-row { + body .updateContactDetails .input-group .input-row, +.page-mygov-auth-account .updateContactDetails .input-group .input-row { align-items: center; } } -.updateContactDetails .input-group .input-row input[type=checkbox] + .check { +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; } -.updateContactDetails .input-group .input-row input[type=checkbox]:checked + .check + label { - font-weight: 400; -} -.updateContactDetails .input-group .input-row:focus-within { +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 #254A7E; - outline: 0.125rem solid #254A7E; + outline: 2px inset var(--body-text-color); + outline: 0.125rem inset var(--body-text-color); } -.updateContactDetails .input-group .input-row > .input-row__wrapper { - margin-right: -6.5px; - margin-right: -0.40625rem; - margin-left: -6.5px; - margin-left: -0.40625rem; +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; +} +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; align-items: center; } -.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; +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; } -.updateContactDetails .input-group .input-row > .input-row__wrapper > .check { +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; } @media only screen and (min-width: 48em) { - .updateContactDetails .input-group { + body .updateContactDetails .input-group, +.page-mygov-auth-account .updateContactDetails .input-group { margin-bottom: 23px; margin-bottom: 1.4375rem; } } -.updateContactDetails .selection-options .radio-input-row { +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; } -.updateContactDetails .selection-options .input-group { +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; } -.updateContactDetails .selection-options .input-group:last-child { +body .updateContactDetails .selection-options .input-group:last-child, +.page-mygov-auth-account .updateContactDetails .selection-options .input-group:last-child { margin-bottom: 0; } -.updateContactDetails .update-contact-tile .input-group + .inline-error-section { +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; +} +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; } -.updateContactDetails .update-details-tile, -.updateContactDetails .update-notification-tile { - min-height: 69px; - min-height: 4.3125rem; -} -.updateContactDetails .switch-btn { - padding: 9px 13px; - padding: 0.5625rem 0.8125rem; +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; } -.updateContactDetails .switch-btn:hover { +body .updateContactDetails .switch-btn:hover, +.page-mygov-auth-account .updateContactDetails .switch-btn:hover { color: #FFFFFF; background-color: #254A7E; border-color: #254A7E; } -@media (max-width: 63.9375em) { - .updateContactDetails .switch-btn { - min-width: 214px; - min-width: 13.375rem; - width: fit-content; - } -} -.updateContactDetails .update-contact-tile { +body .updateContactDetails .update-contact-tile, +.page-mygov-auth-account .updateContactDetails .update-contact-tile { max-width: 927px; max-width: 57.9375rem; margin-bottom: 20px; @@ -23572,33 +24147,46 @@ button:hover[disabled], button:hover.disabled, button:focus[disabled], button:fo margin-top: 30px; margin-top: 1.875rem; } -.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"] { +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; } -.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 { +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; } -.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 { +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; } -.updateContactDetails .update-contact-tile[aria-label="Enter code"] { +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; } -.updateContactDetails .update-contact-tile[aria-label="Enter code"] .input-group { +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; } @media only screen and (min-width: 48em) { - .updateContactDetails .update-contact-tile[aria-label="Enter code"] { + 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; } } -.updateContactDetails .update-contact-tile label { +body .updateContactDetails .update-contact-tile label, +.page-mygov-auth-account .updateContactDetails .update-contact-tile label { font-weight: 500; } -.updateContactDetails .update-contact-tile .update-contact-head { +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; @@ -23608,7 +24196,8 @@ button:hover[disabled], button:hover.disabled, button:focus[disabled], button:fo margin-bottom: 30px; margin-bottom: 1.875rem; } -.updateContactDetails .update-contact-tile .update-contact-head div { +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; @@ -23616,23 +24205,28 @@ button:hover[disabled], button:hover.disabled, button:focus[disabled], button:fo word-break: break-word; hyphens: auto; } -.updateContactDetails .update-contact-tile .update-contact-head span { +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; } @media only screen and (min-width: 48em) { - .updateContactDetails .update-contact-tile .update-contact-head { + 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; } } -.updateContactDetails .update-contact-tile .update-contact-popup p:not(:last-child), -.updateContactDetails .update-contact-tile .update-contact-popup .p:not(:last-child) { +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; } -.updateContactDetails .update-contact-tile .update-contact-info { +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; @@ -23647,88 +24241,122 @@ button:hover[disabled], button:hover.disabled, button:focus[disabled], button:fo border-left: 6px solid #006CE0; border-left: 0.375rem solid #006CE0; } -.updateContactDetails .update-contact-tile .update-contact-info p, -.updateContactDetails .update-contact-tile .update-contact-info .p { +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; } -.updateContactDetails .update-contact-tile .update-contact-info p strong, -.updateContactDetails .update-contact-tile .update-contact-info .p strong { +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; } -.updateContactDetails .update-contact-tile .update-contact-resend-code { +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; - font-size: medium; - font-weight: 700; } -.updateContactDetails .update-contact-tile .update-contact-resend-code div { +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; +} +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; } -.updateContactDetails .update-contact-tile .update-contact-resend-code h3 { +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; } -.updateContactDetails .update-contact-tile .update-contact-resend-code p, -.updateContactDetails .update-contact-tile .update-contact-resend-code .p { +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; } -.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 { +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; } -.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 { +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; } -.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 { +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; } -.updateContactDetails .update-contact-tile input.invalid-input { +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); } -.updateContactDetails .update-contact-tile p, -.updateContactDetails .update-contact-tile .p { +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; font-size: 16px; line-height: 1.15; color: #000000; margin: 0; } -.updateContactDetails .update-contact-tile p strong, -.updateContactDetails .update-contact-tile .p strong { +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; } -.updateContactDetails .update-contact-tile p.top-content { +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; } -.updateContactDetails .update-contact-tile .inline-error-section { +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; @@ -23737,7 +24365,8 @@ button:hover[disabled], button:hover.disabled, button:focus[disabled], button:fo flex-flow: row nowrap; align-items: center; } -.updateContactDetails .update-contact-tile .inline-error-section .error_icon { +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; @@ -23754,7 +24383,8 @@ button:hover[disabled], button:hover.disabled, button:focus[disabled], button:fo background-repeat: no-repeat; display: inline-block; } -.updateContactDetails .update-contact-tile .inline-error-section p.invalidMessage { +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; @@ -23765,7 +24395,8 @@ button:hover[disabled], button:hover.disabled, button:focus[disabled], button:fo font-weight: 500; line-height: 1.0714285714; } -.updateContactDetails .update-contact-tile .btn { +body .updateContactDetails .update-contact-tile .btn, +.page-mygov-auth-account .updateContactDetails .update-contact-tile .btn { margin-bottom: 15px; margin-bottom: 0.9375rem; padding: 5px; @@ -23777,26 +24408,31 @@ button:hover[disabled], button:hover.disabled, button:focus[disabled], button:fo min-width: 0; flex: 1; } -.updateContactDetails .update-contact-tile .btn:hover:not([disabled]):not(.disabled) { +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; } -.updateContactDetails .update-contact-tile .btn.is-loading:before { +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; } -.updateContactDetails .update-contact-tile .btn-primary:not([disabled]):not(.disabled) { +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; } -.updateContactDetails .update-contact-tile .btn-secondary:not([disabled]):not(.disabled) { +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; } -.updateContactDetails .update-contact-tile .btn-group { +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; @@ -23809,150 +24445,43 @@ button:hover[disabled], button:hover.disabled, button:focus[disabled], button:fo min-width: 100%; gap: 0; } -.updateContactDetails .update-contact-tile .btn-group > * { +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) { - .updateContactDetails .update-contact-tile .btn-group { + body .updateContactDetails .update-contact-tile .btn-group, +.page-mygov-auth-account .updateContactDetails .update-contact-tile .btn-group { min-width: 0; } } -.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; -} -.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; -} -.updateContactDetails .update-notification-tile .header .heading { - margin-top: 0; - flex-basis: 70%; +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; } -@media (max-width: 47.9375em) { - .updateContactDetails .update-notification-tile .header div.heading p { - margin-top: 10px; - margin-top: 0.625rem; - } -} -.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; -} -.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; -} -.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; -} -.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"); -} -@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 (max-width: 47.9375em) { - .updateContactDetails .update-notification-tile .header { - flex-direction: column; - align-items: start; - padding-left: 0; - } - .updateContactDetails .update-notification-tile .header .heading { - flex-direction: column; - } -} -@media only screen and (min-width: 48em) { - .updateContactDetails .update-notification-tile .header { - padding-right: 23px; - padding-right: 1.4375rem; - } -} -.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; -} -.updateContactDetails .contact-details-tiles .update-details-tile:first-of-type { - border-top: 1px solid #CCCCCC; - border-top: 0.0625rem solid #CCCCCC; -} -.updateContactDetails .update-details-tile { +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; } -.updateContactDetails .update-details-tile .para-link .link.highlight, .updateContactDetails .update-details-tile .para-link .highlight.linked-services__rightInternalLink { +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; @@ -23967,10 +24496,14 @@ button:hover[disabled], button:hover.disabled, button:focus[disabled], button:fo color: #183052; line-height: 1.2; } -.updateContactDetails .update-details-tile .para-link .link.highlight::after, .updateContactDetails .update-details-tile .para-link .highlight.linked-services__rightInternalLink::after { +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; } -.updateContactDetails .update-details-tile .para-link .link.highlight span.linkIcon, .updateContactDetails .update-details-tile .para-link .highlight.linked-services__rightInternalLink span.linkIcon { +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; @@ -23983,113 +24516,160 @@ button:hover[disabled], button:hover.disabled, button:focus[disabled], button:fo background-size: contain; background-position: center; } -.updateContactDetails .update-details-tile .para-link .link.highlight:hover, .updateContactDetails .update-details-tile .para-link .highlight.linked-services__rightInternalLink:hover { +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; } -.updateContactDetails .update-details-tile .para-link .link.highlight:hover span.linkIcon, .updateContactDetails .update-details-tile .para-link .highlight.linked-services__rightInternalLink:hover span.linkIcon { +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) { - .updateContactDetails .update-details-tile .para-link .link.highlight, .updateContactDetails .update-details-tile .para-link .highlight.linked-services__rightInternalLink { + 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; } } -.updateContactDetails .update-details-tile, -.updateContactDetails .update-details-tile > .update-details-tile__wrapper { +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; } -.updateContactDetails .update-details-tile .update-details-tile__header, -.updateContactDetails .update-details-tile > .update-details-tile__wrapper .update-details-tile__header { +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; align-items: center; } -.updateContactDetails .update-details-tile .update-details-tile__header .skeleton, -.updateContactDetails .update-details-tile > .update-details-tile__wrapper .update-details-tile__header .skeleton { +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; } -.updateContactDetails .update-details-tile .update-details-tile__header .heading, -.updateContactDetails .update-details-tile > .update-details-tile__wrapper .update-details-tile__header .heading { +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; - hyphens: auto; } -.updateContactDetails .update-details-tile .update-details-tile__header div.heading, -.updateContactDetails .update-details-tile > .update-details-tile__wrapper .update-details-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 { margin: 0; } -.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 { +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; - hyphens: auto; margin-right: 23.57px; margin-right: 1.473125rem; width: 114px; width: 7.125rem; + min-width: 114px; + min-width: 7.125rem; + color: var(--dark-navy); } -.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 { +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; - hyphens: auto; + color: var(--dark-navy); } @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 { + 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; } } -.updateContactDetails .update-details-tile .update-channel-content__content strong, -.updateContactDetails .update-details-tile > .update-details-tile__wrapper .update-channel-content__content strong { +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; } -.updateContactDetails .update-details-tile > .update-details-tile__wrapper { +body .updateContactDetails .update-details-tile > .tile__wrapper, +.page-mygov-auth-account .updateContactDetails .update-details-tile > .tile__wrapper { flex-flow: column wrap; } -.updateContactDetails .update-details-tile > .update-details-tile__wrapper .update-details-tile__header div.heading { +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; } -.updateContactDetails .update-details-tile > .update-details-tile__wrapper .update-details-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 { margin-top: 10px; margin-top: 0.625rem; } -.updateContactDetails .update-details-tile > .update-details-tile__wrapper .para-link { +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) { - .updateContactDetails .update-details-tile > .update-details-tile__wrapper { - flex-flow: row wrap; + body .updateContactDetails .update-details-tile > .tile__wrapper, +.page-mygov-auth-account .updateContactDetails .update-details-tile > .tile__wrapper { + flex-flow: row nowrap; } - .updateContactDetails .update-details-tile > .update-details-tile__wrapper .update-details-tile__header div.heading { - flex-flow: row wrap; + 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; } - .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 { + 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; } - .updateContactDetails .update-details-tile > .update-details-tile__wrapper .para-link { + 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) { - .updateContactDetails .update-details-tile { + 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; @@ -24098,59 +24678,84 @@ button:hover[disabled], button:hover.disabled, button:focus[disabled], button:fo padding-left: 1.25rem; } } -.updateContactDetails .emergency-status { +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; +} +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; +} +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; } -.updateContactDetails .emergency-status.is-form-error { +body .updateContactDetails .emergency-status.is-form-error, +.page-mygov-auth-account .updateContactDetails .emergency-status.is-form-error { margin-top: 0px; margin-top: 0rem; } -.updateContactDetails .emergency-status.is-resolved { +body .updateContactDetails .emergency-status.is-resolved, +.page-mygov-auth-account .updateContactDetails .emergency-status.is-resolved { border-color: #1A9F50; } -.updateContactDetails .emergency-status.is-resolved .icon { +body .updateContactDetails .emergency-status.is-resolved .icon, +.page-mygov-auth-account .updateContactDetails .emergency-status.is-resolved .icon { background-color: #1A9F50; } -.updateContactDetails .emergency-status.is-resolved .icon h2::before { +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"); } @media only screen and (min-width: 40em) { - .updateContactDetails .emergency-status { + body .updateContactDetails .emergency-status, +.page-mygov-auth-account .updateContactDetails .emergency-status { flex-direction: row; } } -.updateContactDetails .emergency-status .icon { - height: 34px; - height: 2.125rem; - padding: 8px 17px; - padding: 0.5rem 1.0625rem; +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; } @media only screen and (min-width: 40em) { - .updateContactDetails .emergency-status .icon { + body .updateContactDetails .emergency-status .icon, +.page-mygov-auth-account .updateContactDetails .emergency-status .icon { width: 53px; width: 3.3125rem; height: auto; } } -.updateContactDetails .emergency-status .icon img { +body .updateContactDetails .emergency-status .icon img, +.page-mygov-auth-account .updateContactDetails .emergency-status .icon img { display: none; } @media only screen and (min-width: 40em) { - .updateContactDetails .emergency-status .icon img { + body .updateContactDetails .emergency-status .icon img, +.page-mygov-auth-account .updateContactDetails .emergency-status .icon img { width: 53px; width: 3.3125rem; display: block; } } -.updateContactDetails .emergency-status .icon h2 { +body .updateContactDetails .emergency-status .icon h2, +.page-mygov-auth-account .updateContactDetails .emergency-status .icon h2 { font-size: 15px; font-size: 0.9375rem; display: flex; @@ -24161,11 +24766,13 @@ button:hover[disabled], button:hover.disabled, button:focus[disabled], button:fo line-height: 1.2666666667; } @media only screen and (min-width: 40em) { - .updateContactDetails .emergency-status .icon h2 { + body .updateContactDetails .emergency-status .icon h2, +.page-mygov-auth-account .updateContactDetails .emergency-status .icon h2 { display: none; } } -.updateContactDetails .emergency-status .icon h2::before { +body .updateContactDetails .emergency-status .icon h2::before, +.page-mygov-auth-account .updateContactDetails .emergency-status .icon h2::before { width: 14px; width: 0.875rem; height: 14px; @@ -24180,68 +24787,80 @@ button:hover[disabled], button:hover.disabled, button:focus[disabled], button:fo border-radius: 50%; content: ""; } -.updateContactDetails .emergency-status .content { - padding: 8px 16px; - padding: 0.5rem 1rem; +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 .emergency-status .content h2 { +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 .emergency-status .content h2::first-line { +body .updateContactDetails .emergency-status .content h2::first-line, +.page-mygov-auth-account .updateContactDetails .emergency-status .content h2::first-line { line-height: 1.0625; } @media only screen and (min-width: 40em) { - .updateContactDetails .emergency-status .content h2 { + body .updateContactDetails .emergency-status .content h2, +.page-mygov-auth-account .updateContactDetails .emergency-status .content h2 { display: block; } } -.updateContactDetails .emergency-status .content p { +body .updateContactDetails .emergency-status .content p, +.page-mygov-auth-account .updateContactDetails .emergency-status .content p { font-size: 14px; font-size: 0.875rem; margin: 0; line-height: 1.4285714286; } @media only screen and (min-width: 40em) { - .updateContactDetails .emergency-status .content p { + 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); } - .updateContactDetails .emergency-status .content p::first-line { + 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) { - .updateContactDetails .emergency-status .content { + body .updateContactDetails .emergency-status .content, +.page-mygov-auth-account .updateContactDetails .emergency-status .content { padding: 16px 27px; padding: 1rem 1.6875rem; } } - -.update-contact-modal-description p, -.update-contact-modal-description .p { +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; } -.update-contact-modal-description p strong, -.update-contact-modal-description .p 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; } -.update-contact-modal-description p:not(:last-child) { +body .update-contact-modal-description p:not(:last-child), +.page-mygov-auth-account .update-contact-modal-description p:not(:last-child) { margin-bottom: 1em; } - -.update-contact-popup { +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; @@ -24249,7 +24868,8 @@ button:hover[disabled], button:hover.disabled, button:focus[disabled], button:fo background-color: var(--system-yellow-60); display: inline-flex; } -.update-contact-popup .notification-icon { +body .update-contact-popup .notification-icon, +.page-mygov-auth-account .update-contact-popup .notification-icon { width: 24px; width: 1.5rem; height: 24px; @@ -24257,8 +24877,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; @@ -24272,165 +24890,23 @@ button:hover[disabled], button:hover.disabled, button:focus[disabled], button:fo background-image: url("styles/resources/assets/icons/icon-alert-warning.svg"); } @media only screen and (min-width: 48em) { - .update-contact-popup { + body .update-contact-popup, +.page-mygov-auth-account .update-contact-popup { margin-top: 23px; margin-top: 1.4375rem; } -} - -.updateContactDetails { - padding: 12px; - padding: 0.75rem; -} -.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; -} -.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: 64em) { - .updateContactDetails.toast__container { - max-width: 770px; - max-width: 48.125rem; - left: 5vw; + body .update-contact-popup br, +.page-mygov-auth-account .update-contact-popup br { + margin-left: 4px; + margin-left: 0.25rem; + content: ""; } } -.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; - 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; -} -.updateContactDetails .toast__message.is-error { - background: #dc3548; -} -.updateContactDetails .toast__message.is-error .toast__icon { - background-image: url("styles/resources/assets/icons/icon-warning-white.svg"); - background-color: #af2939; -} -.updateContactDetails .toast__message.is-information { - background: #016ce0; -} -.updateContactDetails .toast__message.is-information .toast__icon { - background-image: url("styles/resources/assets/icons/icon-info-white.svg"); - background-color: #0055b3; -} -.updateContactDetails .toast__message.is-success { - background: #A7D0B1; -} -.updateContactDetails .toast__message.is-success .toast__icon { - background-image: url("styles/resources/assets/icons/icon-check-circle-white.svg"); - background-color: #1A9F50; -} -.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; -} @media only screen and (min-width: 48em) { - .updateContactDetails { + body .updateContactDetails .updateContactDetails--wrapper, +.page-mygov-auth-account .updateContactDetails .updateContactDetails--wrapper { max-width: 670px; max-width: 41.875rem; - padding: 0; } } @@ -24439,12 +24915,14 @@ button:hover[disabled], button:hover.disabled, button:focus[disabled], button:fo } .cmp-video .sub-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; @@ -24478,12 +24956,16 @@ button:hover[disabled], button:hover.disabled, button:focus[disabled], button:fo z-index: 400; } .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; - width: 52px; - height: 52px; background-size: contain; background-position: center; background-repeat: no-repeat; @@ -24526,10 +25008,11 @@ button:hover[disabled], button:hover.disabled, button:focus[disabled], button:fo } .video-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; @@ -24544,20 +25027,22 @@ button:hover[disabled], button:hover.disabled, button:focus[disabled], button:fo } .video-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 .video-carousel-item .item-box .description { color: #FFFFFF; } .video-carousel-item .item-box .video-length { 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; position: relative; margin: 0 0 20px; padding-left: 25px; @@ -24566,12 +25051,16 @@ button:hover[disabled], button:hover.disabled, button:focus[disabled], button:fo color: #FFFFFF; } .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; - width: 18px; - height: 18px; background-size: contain; background-position: center; background-repeat: no-repeat; @@ -24583,10 +25072,11 @@ button:hover[disabled], button:hover.disabled, button:focus[disabled], button:fo } .video-carousel-item .item-box .video-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; position: absolute; bottom: 0; margin-bottom: 20px; @@ -24603,10 +25093,11 @@ button:hover[disabled], button:hover.disabled, button:focus[disabled], button:fo } .welcome__heading--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; display: block; font-size: 18px !important; @@ -24617,10 +25108,11 @@ button:hover[disabled], button:hover.disabled, button:focus[disabled], button:fo .welcome__heading--text b, .welcome__heading--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; } @@ -24634,10 +25126,11 @@ button:hover[disabled], button:hover.disabled, button:focus[disabled], button:fo } .welcome__personal-detail { 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: 6px; } @@ -24647,10 +25140,11 @@ button:hover[disabled], button:hover.disabled, button:focus[disabled], button:fo .welcome__personal-detail b, .welcome__personal-detail 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; } @@ -24664,10 +25158,11 @@ button:hover[disabled], button:hover.disabled, button:focus[disabled], button:fo } .welcome__sign-in-detail { 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 40px; } .theme-dark .welcome__sign-in-detail { @@ -24688,12 +25183,16 @@ button:hover[disabled], button:hover.disabled, button:focus[disabled], button:fo .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; - width: 26px; - height: 24px; background-size: contain; background-position: center; background-repeat: no-repeat; @@ -24734,12 +25233,16 @@ button:hover[disabled], button:hover.disabled, button:focus[disabled], button:fo .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; - width: 26px; - height: 24px; background-size: contain; background-position: center; background-repeat: no-repeat; @@ -24891,6 +25394,7 @@ button:hover[disabled], button:hover.disabled, button:focus[disabled], button:fo 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; @@ -24900,8 +25404,6 @@ button:hover[disabled], button:hover.disabled, button:focus[disabled], button:fo 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; @@ -24928,7 +25430,7 @@ button:hover[disabled], button:hover.disabled, button:focus[disabled], button:fo padding: 10px 0; font-size: 16px; } -@media only screen and (min-width: 48em) { +@media only screen and (min-width: 64em) { .assistant-btn { display: none; } @@ -24950,7 +25452,7 @@ button:hover[disabled], button:hover.disabled, button:focus[disabled], button:fo left: calc(50% - 19px); } } -@media only screen and (min-width: 48em) { +@media only screen and (min-width: 64em) { .assistant-btn-open .assistant-up-btn { transform: rotateZ(90deg); } @@ -24966,7 +25468,7 @@ button:hover[disabled], button:hover.disabled, button:focus[disabled], button:fo padding: 20px; border-radius: 8px 0 0 8px; } -@media only screen and (min-width: 48em) { +@media only screen and (min-width: 64em) { .assistant-btn-dsk { display: inline-block; } @@ -24976,7 +25478,7 @@ button:hover[disabled], button:hover.disabled, button:focus[disabled], button:fo vertical-align: middle; } -@media only screen and (min-width: 48em) { +@media only screen and (min-width: 64em) { .assistant-btn-text { margin-left: 12px; display: inline-block; @@ -24989,23 +25491,27 @@ button:hover[disabled], button:hover.disabled, button:focus[disabled], button:fo .assistant-panel { display: flex; position: fixed; - top: 0px; - height: 100%; - z-index: 20; + bottom: 0px; + height: 0%; + z-index: 30; + right: -400px; } @media (max-width: 63.9375em) { .assistant-panel { flex-direction: column; + height: 0%; left: 0px; width: 100%; + right: unset; } } -@media only screen and (min-width: 48em) { +@media only screen and (min-width: 64em) { .assistant-panel { align-items: center; - right: 0px; height: 100%; position: fixed; + right: -400px; + top: 0px; } } @@ -25019,22 +25525,28 @@ button:hover[disabled], button:hover.disabled, button:focus[disabled], button:fo bottom: 0px; } } -@media only screen and (min-width: 48em) { +@media only screen and (min-width: 64em) { .assistant-panel-closed { top: 30%; right: 0px; } } +/*.assistant-panel-open { + @include bp(l) { + right: 0px; + } +}*/ .assistant-drawer { background-color: #FFFFFF; + transition: width 0.3s; } @media (max-width: 63.9375em) { .assistant-drawer { flex-grow: 1; } } -@media only screen and (min-width: 48em) { +@media only screen and (min-width: 64em) { .assistant-drawer { display: inline-block; border: 1px solid #DAE3E7; @@ -25043,28 +25555,28 @@ button:hover[disabled], button:hover.disabled, button:focus[disabled], button:fo } } -.assistant-drawer-large { - background-color: #FFFFFF; -} -@media only screen and (min-width: 48em) { +@media only screen and (min-width: 64em) { .assistant-drawer-large { - display: inline-block; - border: 1px solid #DAE3E7; - height: 100%; width: 600px; } } + .assistant-drawer-large .assistant-up-btn { transform: rotateZ(90deg); } -@media only screen and (min-width: 48em) { +.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) { +@media only screen and (min-width: 64em) { .assistant-open-body-large { width: calc(100% - 600px); } @@ -25095,7 +25607,7 @@ button:hover[disabled], button:hover.disabled, button:focus[disabled], button:fo height: 32px; width: 32px; transform: rotateZ(-90deg); - transition: transform 5s; + transition: transform 0.3s; } @media (max-width: 63.9375em) { .assistant-up-btn { @@ -25224,7 +25736,7 @@ button:hover[disabled], button:hover.disabled, button:focus[disabled], button:fo } .cmp-list__item-link::after { content: ""; - background: url(assets/icons/chevron-right-black.svg) no-repeat; + background: url(styles/resources/assets/icons/chevron-right-black.svg) no-repeat; margin: 20px 16px 10px 20px; width: 32px; height: 32px; @@ -25409,6 +25921,81 @@ button:hover[disabled], button:hover.disabled, button:focus[disabled], button:fo background: #a6d5fa; } +.cmp-separator__horizontal-rule { + margin: 2.25rem 0; + border-top: 1px solid #d9d9d6; +} + +.cmp-sign-in-teaser { + display: flex; + flex-direction: column; + padding: 2.25rem 0; +} +@media only screen and (min-width: 64em) { + .cmp-sign-in-teaser { + flex-direction: row; + padding: 3.75rem 0; + } +} +.cmp-sign-in-teaser > .cmp-experiencefragment { + width: 100%; + margin-bottom: 24px; +} +@media only screen and (min-width: 64em) { + .cmp-sign-in-teaser > .cmp-experiencefragment { + max-width: 340px; + margin-right: 90px; + margin-bottom: 0; + } +} +.cmp-sign-in-teaser > .cmp-experiencefragment h2, +.cmp-sign-in-teaser > .cmp-experiencefragment .h2 { + font-family: "Roboto", sans-serif; + color: #000000; + line-height: 1.25; + letter-spacing: 0.001em; + font-weight: 400; + font-size: 2.25rem; + margin: 0; + margin-bottom: 1.125rem; +} +.cmp-sign-in-teaser > .cmp-experiencefragment h3, +.cmp-sign-in-teaser > .cmp-experiencefragment .h3 { + font-family: "Roboto", sans-serif; + color: #000000; + line-height: 1.25; + letter-spacing: 0; + font-weight: 500; + font-size: 1.625rem; + margin: 0; + margin-bottom: 1.125rem; +} +.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; +} +.cmp-sign-in-teaser > .cmp-experiencefragment .text .cmp-text { + padding: 0; + margin: 0; +} +.cmp-sign-in-teaser > .cmp-experiencefragment .text .cmp-text p { + margin-top: 0 !important; + margin-bottom: 1.125rem !important; +} +@media only screen and (min-width: 64em) { + .cmp-sign-in-teaser > .cmp-experiencefragment #hidden-tablet { + display: none; + } +} +@media only screen and (min-width: 77.75em) { + .cmp-sign-in-teaser > .cmp-experiencefragment #hidden-desktop { + display: none; + } +} + /* --- Dashboard --- */ mygov-tasks-tasks-tiles .section-heading { position: relative; @@ -25653,8 +26240,7 @@ mygov-tasks-tasks-tiles .auth-section-heading { margin-left: 0; } .tasks-section .description p { - font-size: 16px; - font-size: 1rem; + font-size: inherit; margin: 0; font-weight: 400; line-height: 1.25; @@ -25692,7 +26278,14 @@ mygov-tasks-tasks-tiles .auth-section-heading { content: url("resources/assets/icons/chevron-right-dark-blue.svg"); } -.task-tile { +.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; +} + +.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; @@ -25716,7 +26309,8 @@ mygov-tasks-tasks-tiles .auth-section-heading { position: relative; overflow: hidden; } -.task-tile .icon-content-container { +.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; @@ -25726,7 +26320,8 @@ mygov-tasks-tasks-tiles .auth-section-heading { align-items: stretch; flex: 1; } -.task-tile .icon-content-container > * { +.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; @@ -25734,7 +26329,10 @@ mygov-tasks-tasks-tiles .auth-section-heading { } .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 { +.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; @@ -25748,32 +26346,39 @@ mygov-tasks-tasks-tiles .auth-section-heading { @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 { +.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; } } -.task-tile .icon-content-container .content-container { +.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 only screen and (min-width: 40em) { - .task-tile .icon-content-container .content-container { + .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; } } -.task-tile .icon-content-container .content-container .date-container { +.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 { +.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; @@ -25781,15 +26386,18 @@ mygov-tasks-tasks-tiles .auth-section-heading { line-height: 1.25; color: #676767; } -.task-tile .icon-content-container .content-container .date-container .due-status.due-today { +.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; } -.task-tile .icon-content-container .content-container .date-container .due-status.overdue { +.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 { +.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; @@ -25799,16 +26407,19 @@ mygov-tasks-tasks-tiles .auth-section-heading { margin: 0; } @media only screen and (min-width: 40em) { - .task-tile .icon-content-container { + .task-tile .icon-content-container, +.page-mygov-auth-account .authenticated-body-container__page .task-tile .icon-content-container { flex-flow: row nowrap; } } @media screen and (min-width: 0\0 ) { - .task-tile .icon-content-container { + .task-tile .icon-content-container, +.page-mygov-auth-account .authenticated-body-container__page .task-tile .icon-content-container { flex: 1 1 auto; } } -.task-tile .action-container { +.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; @@ -25829,21 +26440,25 @@ mygov-tasks-tasks-tiles .auth-section-heading { width: calc(100% + 0.40625rem); padding-top: 0; } -.task-tile .action-container > * { +.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 { +.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; font-size: 1rem; line-height: 1.125; } -.task-tile .action-container .action-details-container p { +.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; } -.task-tile .action-container .action-details-container__wrapper { +.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; @@ -25851,50 +26466,56 @@ mygov-tasks-tasks-tiles .auth-section-heading { display: flex; flex-flow: row wrap; } -.task-tile .action-container .action-details-container__wrapper > span { +.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 { + .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; } } -.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; +.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: 6px; - padding: 0.375rem; + padding: 4.5px; + padding: 0.28125rem; background-color: #CCF0F9; transition-property: margin-left; transition-duration: 300ms; display: flex; + box-sizing: content-box; } @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; + .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: 40em) { - .task-tile .action-container { + .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; @@ -25905,11 +26526,13 @@ mygov-tasks-tasks-tiles .auth-section-heading { padding-top: 0; } } -.task-tile a { +.task-tile a, +.page-mygov-auth-account .authenticated-body-container__page .task-tile a { color: #333333; text-decoration: none; } -.task-tile a:after { +.task-tile a:after, +.page-mygov-auth-account .authenticated-body-container__page .task-tile a:after { border-radius: 5px; border-radius: 0.3125rem; content: ""; @@ -25920,18 +26543,24 @@ mygov-tasks-tasks-tiles .auth-section-heading { left: 0; z-index: 1; } -.task-tile a:focus { +.task-tile a:focus, +.page-mygov-auth-account .authenticated-body-container__page .task-tile a:focus { outline: none; } -.task-tile a:hover, .task-tile a:focus { +.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; } -.task-tile a:hover:after, .task-tile a:focus:after { +.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: 40em) { - .task-tile { + .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; @@ -25951,8 +26580,6 @@ mygov-tasks-tasks-tiles .auth-section-heading { min-width: 96px; min-width: 6rem; display: block; - height: 96px; - width: 96px; background-size: contain; background-position: center; background-repeat: no-repeat; @@ -25969,8 +26596,6 @@ mygov-tasks-tasks-tiles .auth-section-heading { min-width: 96px; min-width: 6rem; display: block; - height: 96px; - width: 96px; background-size: contain; background-position: center; background-repeat: no-repeat; @@ -26061,28 +26686,137 @@ mygov-tasks-tasks-tiles .auth-section-heading { } .tasks-screen { - padding: 0 12px; - padding: 0 0.75rem; background-color: #FFFFFF; } .tasks-screen .no-tasks-section, .tasks-screen .tasks-error-section { - margin-left: 0px; - margin-left: 0rem; + display: block; + margin-right: 0; + margin-left: 0; +} +.tasks-screen .no-tasks-section .text-container, +.tasks-screen .tasks-error-section .text-container { + display: block; +} +.tasks-screen .no-tasks-section p, +.tasks-screen .tasks-error-section p { + font-size: inherit; +} +.tasks-screen .no-tasks-section > *, +.tasks-screen .tasks-error-section > * { + margin-right: 0; + margin-left: 0; +} +.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: 40em) { - .tasks-screen .no-tasks-section, -.tasks-screen .tasks-error-section { - margin-left: -9px; - margin-left: -0.5625rem; + .tasks-screen .no-tasks-section h2, +.tasks-screen .empty-services h2 { + margin-bottom: 20px; + margin-bottom: 1.25rem; + } +} +.tasks-screen .no-tasks-section .description, +.tasks-screen .empty-services .description, +.tasks-screen .tasks-error-section .description { + margin-top: 0; + padding-right: 0; +} +.tasks-screen .no-tasks-section .btn, +.tasks-screen .empty-services .btn, +.tasks-screen .tasks-error-section .btn { + height: 48px; + height: 3rem; + display: flex; + align-items: center; + justify-content: center; +} +.tasks-screen .no-tasks-section { + padding-bottom: 109px; + padding-bottom: 6.8125rem; +} +@media only screen and (min-width: 40em) { + .tasks-screen .no-tasks-section { + padding-bottom: 68px; + padding-bottom: 4.25rem; } } +.tasks-screen .tasks-error-section { + padding-top: 59px; + padding-top: 3.6875rem; + padding-bottom: 38px; + padding-bottom: 2.375rem; + text-align: center; +} +.tasks-screen .tasks-error-section .btn { + margin: auto; +} +.tasks-screen .tasks-error-section img { + margin: 0 auto 30px; + margin: 0 auto 1.875rem; + display: block; +} +.tasks-screen .tasks-error-section .text-container { + display: inline-block; + margin: auto; +} +.tasks-screen .tasks-error-section .text-container .title { + font-size: 24px; + font-size: 1.5rem; + margin-bottom: 9px; + margin-bottom: 0.5625rem; +} +.tasks-screen .tasks-error-section .text-container .description { + margin-bottom: 32px; + margin-bottom: 2rem; + text-align: center; +} .tasks-screen .tasks-section { max-width: none; } +.tasks-screen .tasks-section > .description { + margin-bottom: 10px; + margin-bottom: 0.625rem; + line-height: 1.5; + padding-right: 0; +} +.tasks-screen .tasks-section > .description::first-line { + line-height: 1.1875; +} +@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; +} +.tasks-screen .tasks-section > mygov-tasks-task-tile:last-child { + margin-bottom: 45px; + margin-bottom: 2.8125rem; +} +@media only screen and (min-width: 40em) { + .tasks-screen .tasks-section > mygov-tasks-task-tile:last-child { + margin-bottom: 0; + } +} .tasks-screen .empty-services { - margin-left: 0px; - margin-left: 0rem; display: flex; flex-flow: column nowrap; } @@ -26102,101 +26836,47 @@ mygov-tasks-tasks-tiles .auth-section-heading { height: 7.3125rem; } } -.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; -} -@media only screen and (min-width: 40em) { - .tasks-screen .empty-services .link-service-image h3 { - display: none; - flex-flow: column nowrap; - justify-content: center; - } -} .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 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; -} -@media only screen and (min-width: 40em) { - .tasks-screen .empty-services .link-service-content h3 { - display: block; - } +.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-size: 16px; - font-size: 1rem; font-weight: 400; line-height: 1.5; } -.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; - text-decoration: none; - text-align: center; -} -.tasks-screen .empty-services .link-service-content .empty-button:hover { - background-color: #0E6393; - color: #FFFFFF; +.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 { - padding-left: 36px; - padding-left: 2.25rem; margin-top: 0px; margin-top: 0rem; } } @media only screen and (min-width: 40em) { .tasks-screen .empty-services { - margin-left: -31px; - margin-left: -1.9375rem; + margin-left: -18px; + margin-left: -1.125rem; + margin-right: -18px; + margin-right: -1.125rem; flex-flow: row nowrap; } -} -@media only screen and (min-width: 64em) { - .tasks-screen { - padding: 0; + .tasks-screen .empty-services > * { + margin-left: 18px; + margin-left: 1.125rem; + margin-right: 18px; + margin-right: 1.125rem; } } @@ -26204,8 +26884,10 @@ body.fixed { overflow: hidden; } -mygov-dashboard-transition-modal .modal, -mygov-tasks-transition-modal .modal { +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; @@ -26220,8 +26902,10 @@ mygov-tasks-transition-modal .modal { cursor: pointer; z-index: 1050; } -mygov-dashboard-transition-modal .modal__bg, -mygov-tasks-transition-modal .modal__bg { +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; @@ -26229,24 +26913,30 @@ mygov-tasks-transition-modal .modal__bg { left: 0; background-color: rgba(0, 0, 0, 0.5); } -mygov-dashboard-transition-modal .modal__content .modal-header .close, -mygov-tasks-transition-modal .modal__content .modal-header .close { +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; } -mygov-dashboard-transition-modal .modal__content .modal-body .description:first-child, -mygov-tasks-transition-modal .modal__content .modal-body .description:first-child { +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; } -mygov-dashboard-transition-modal .modal__content--transition.modal__content .modal-header .close, -mygov-tasks-transition-modal .modal__content--transition.modal__content .modal-header .close { +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; } - -#modal__dialog { +#modal__dialog, +#react-aria-modal-dialog { position: relative; display: inline-block; text-align: left; @@ -26259,6 +26949,16 @@ mygov-tasks-transition-modal .modal__content--transition.modal__content .modal-h overflow-x: hidden; } +#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; +} + .modal--guided-content .modal__container, .modal--guided-content .modal__content { width: 670px; @@ -26270,13 +26970,33 @@ mygov-tasks-transition-modal .modal__content--transition.modal__content .modal-h width: 100%; } } -.modal--guided-content .modal__container .modal__content { +.modal--guided-content .modal__container.page-mygov-auth-account .modal__content.modal__content--common { margin: 0; } -.modal--guided-content .modal__container .modal__content .modal-header:after { +.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; +} +@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; + } +} +.modal--guided-content .modal__container.page-mygov-auth-account .modal__content.modal__content--common .modal-header:after { display: none; } -.modal--guided-content .modal__container .modal__content .modal-body .guided-content-screen .guided-content-image { +.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 (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; + } +} +.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; @@ -26284,22 +27004,22 @@ mygov-tasks-transition-modal .modal__content--transition.modal__content .modal-h width: 100%; } @media (max-width: 639px) { - .modal--guided-content .modal__container .modal__content .modal-body .guided-content-screen .guided-content-image { + .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); } } -.modal--guided-content .modal__container .modal__content .modal-body .guided-content-screen .guided-content-description { +.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; } -.modal--guided-content .modal__container .modal__content .modal-body .modal-buttons { +.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; } -.modal--guided-content .modal__container .modal__content .modal-body .modal-buttons .skip { +.modal--guided-content .modal__container.page-mygov-auth-account .modal__content.modal__content--common .modal-body .modal-buttons .skip { background: none; border: none; text-align: left; @@ -26307,24 +27027,858 @@ mygov-tasks-transition-modal .modal__content--transition.modal__content .modal-h font-weight: 700; color: #666666; } -.modal--guided-content .modal__container .modal__content .modal-body .modal-buttons p { +.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 .modal__content .modal-body .modal-buttons p.screen-number { +.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; } -.modal--guided-content .modal__container .modal__content .modal-body .modal-buttons .modal-navigation { +.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; } +/* --- 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"); +} +.payments-filter__show-hide-filter.btn.toggle:hover { + text-decoration: none; +} +.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"); +} +.payments-filter__show-hide-filter.btn.toggle.is-expanded:hover { + text-decoration: none; +} +.payments-filter__show-hide-clear-filter-container { + display: block; + min-height: 30px; + margin-top: 10px; +} +.payments-filter__show-hide-filter-container { + display: block; + float: left; +} +.payments-filter__clear-filter-container { + display: block; + float: right; +} +.payments-filter__clear-filter { + padding: 5px; +} +.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; +} +.payments-filter__clear-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/clear-dark-blue.svg"); +} +.payments-filter__clear-filter.btn.toggle:hover { + text-decoration: none; +} +.payments-filter__date-filter-container { + margin-left: 0px; +} +.payments-filter__date-filter-container .custom-datepicker__input::-ms-clear { + display: none; +} +.payments-filter__date-filter-container .custom-datepicker__calendar-button { + height: 45px; + top: -6px; +} +.payments-filter__date-filter-container .input-group input { + margin: 5px 0; + border: 1px solid #333333; + width: 100%; +} +@media screen and (max-width: 768px) { + .payments-filter__date-filter-container { + display: block; + } + .payments-filter__date-filter-container .input-group { + margin: 0; + } +} +@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; + } +} +.payments-filter__date-filter-container label { + color: #183052; +} +.payments-filter__filter-buttons-container { + display: inline-block; + flex-wrap: wrap; + width: 100%; +} +.payments-filter__payment-system { + border: 2px solid #183052 !important; + background-color: #FFFFFF; + border-radius: 0.3125rem; + font-size: 14px; +} +@media screen and (max-width: 768px) { + .payments-filter__payment-system.btn { + width: 100%; + } +} +@media screen and (min-width: 768px) { + .payments-filter__payment-system.btn:not(:last-child) { + margin: 0 10px 5px 0; + } +} +.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; +} +.payments-filter__payment-system.btn:hover { + color: #FFFFFF; + background-color: #254A7E; +} +.payments-filter__payment-system.btn:active { + color: #183052; + background-color: #99E1F3; +} +.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-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; +} +.payments-filter__payment-system.selected:hover { + color: #FFFFFF; + background-color: #254A7E; +} +.payments-filter__payment-system.selected:active { + color: #183052; + background-color: #99E1F3; +} + +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 screen and (max-width: 480px) { + .modal__content.modal__content--transactions { + min-width: 327px; + } +} +@media screen and (min-width: 480px) { + .modal__content.modal__content--transactions { + min-width: 550px; + } +} + +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; +} +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; +} + +.transaction-details { + color: #525252; + font-size: 16px; +} +.transaction-details h3, +.transaction-details h4 { + margin: 10px 0 10px 0; +} +.transaction-details__summary { + font-size: 18px; + margin-bottom: 10px; +} +.transaction-details__summary .payment-date-with-indicator { + display: flex; + flex-flow: row nowrap; + align-items: center; +} +.transaction-details__summary .row { + display: flex; + justify-content: space-between; + flex-wrap: nowrap; + padding: 0; + align-items: center; +} +.transaction-details__summary .row:first-child { + min-height: 40px; +} +.transaction-details__summary .row > * { + margin-top: auto; + margin-bottom: auto; +} +@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; +} +.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; +} +@media screen and (max-width: 480px) { + .transaction-details .components .component-type { + max-width: 200px; + } +} +@media screen and (min-width: 480px) { + .transaction-details .components .component-type { + max-width: 260px; + } +} +.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; +} +.transaction-details .links a:hover { + color: #254A7E; + text-decoration: none; +} +.transaction-details .close-button-container button { + min-width: 100%; + margin-top: 20px; + background-color: #99E1F3; + color: #183052; +} +.transaction-details .close-button-container button:hover { + background-color: #254A7E; + color: #FFFFFF; +} + +ul.lodgements-list { + list-style: none; + margin: 0; + padding: 0; +} +ul.lodgements-list > li { + margin: 0; + padding: 0; +} + +dl.payment-components { + margin: 0; + padding: 0; +} +dl.payment-components > * > dd, dl.payment-components > * > dt { + color: #333333; + font-size: 1em; + margin: 0; + font-weight: normal; +} +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; +} +dl.payment-components > *.payment-components__component.payment-components__component--long > dd, dl.payment-components > *.payment-components__component.payment-components__component--long > dt { + width: 100%; +} +dl.payment-components > *.payment-components__component.payment-components__component--long > dd { + text-align: left; + margin-top: 5px; +} +dl.payment-components > *.payment-components__component.payment-components__component--long > dt { + font-size: inherit; +} +dl.payment-components > div + * { + margin-top: 10px; +} + +dl.lodgement-components { + margin: 0; + padding: 0; +} +dl.lodgement-components > * > dd, dl.lodgement-components > * > dt { + color: #333333; + font-size: 1em; + margin: 0; + font-weight: normal; +} +dl.lodgement-components > *.lodgement-components__component { + display: flex; + flex-flow: row nowrap; + justify-content: space-between; +} +dl.lodgement-components > *.lodgement-components__component > dd, dl.lodgement-components > *.lodgement-components__component > dt { + width: 50%; +} +dl.lodgement-components > *.lodgement-components__component > dd { + text-align: right; +} +dl.lodgement-components > *.lodgement-components__component.lodgement-components__component--long { + flex-flow: column nowrap; + justify-content: initial; +} +dl.lodgement-components > *.lodgement-components__component.lodgement-components__component--long > dd, dl.lodgement-components > *.lodgement-components__component.lodgement-components__component--long > dt { + width: 100%; +} +dl.lodgement-components > *.lodgement-components__component.lodgement-components__component--long > dd { + text-align: left; + margin-top: 5px; +} +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; + } +} +.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) { + .payments-table .cmp-text { + min-height: 210px; + } +} +.payments-table .table-responsive { + margin: 0 !important; +} +.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; +} +.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; + 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; +} +.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; +} +.payments-table__table button.payments-table__sort-button:focus { + outline: auto; +} +.payments-table__table__table-heading { + background-color: #FFFFFF; +} +.payments-table__table__table-heading__amount { + text-align: center !important; +} +.payments-table__table__payment-row { + border-width: 0; + border: none; + cursor: pointer; + background-color: #FFFFFF !important; + transition: background-color 0.5s ease-in; +} +.payments-table__table__payment-row.new { + background-color: #EAEAEA !important; + transition: background-color 0.5s ease-in; +} +.payments-table__table__payment-row .link, .payments-table__table__payment-row .linked-services__rightInternalLink { + font-weight: 400 !important; +} +.payments-table__table__payment-row button.view-payment { + border: 0; + background: inherit; +} +.payments-table__table__payment-row button.view-payment.view-payment--wide { + color: #0E6393; + text-decoration: underline; +} +.payments-table__table__payment-row button.view-payment.view-payment--wide:hover { + background-color: #006CE0; + 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; +} +.payments-table__table__payment-row__payment-desc { + position: relative; + line-height: 25px !important; +} +.payments-table__table__payment-row__payment-desc__system { + font-weight: 600; + font-size: 18px !important; +} +.payments-table__table__payment-row__payment-desc__amount { + font-weight: 600; + font-size: 18px !important; +} +.payments-table__table__payment-row__payment-detail { + line-height: 25px !important; +} +.payments-table__table__payment-row__payment-detail__amount { + font-weight: 600; +} +.payments-table__table__payment-row__payment-detail__amount.negative { + color: #DC3548; +} +.payments-table__table__payment-cell { + color: #525252; +} +.payments-table__table__payment-cell__payment-system__literal { + font-size: 18px !important; +} +.payments-table__table__payment-cell__amount { + font-size: 18px !important; + text-align: right !important; + font-weight: 500 !important; +} +.payments-table__table__payment-cell__action { + min-width: 110px; +} +.payments-table__table__text-message-row { + background-color: #FFFFFF !important; +} +.payments-table__table__text-message-row__text-message-cell { + text-align: center !important; +} +.payments-table__table--narrow .payments-table__table__payment-row button.view-payment { + text-align: inherit; +} +.payments-table__table--narrow .payments-table__table__payment-row button.view-payment:focus { + outline: 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; + color: #183052; +} +.payments-table__show-more-results:hover { + background-color: #183052; + color: #FFFFFF; + border: none; +} + +.payments .loading-section { + display: flex; + flex-direction: column; + align-items: flex-start; +} +.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: 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; + } +} +.payments .no-payments { + display: flex; + flex-flow: row nowrap; +} +.payments .no-payments .no-payments-container { + margin-right: auto; + margin-left: 0; + 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; +} +.payments .no-payments .no-payments-container .no-payments-icon-container .icon { + width: 100%; + height: auto; +} +.payments .no-payments .no-payments-container .no-payments-text-container { + flex: 1; + flex-basis: auto; + width: 100%; + text-align: center; +} +.payments .no-payments .no-payments-container .no-payments-text-container p { + margin: 0 !important; +} + +.payments-dashboard { + margin: 60px 0 20px; +} +.payments-dashboard .loading-section { + display: flex; + flex-direction: column; + align-items: flex-start; +} +.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; + } +} +.payments-dashboard .payments-table { + box-shadow: 0 2pt 8pt rgba(0, 0, 0, 0.1254901961); +} +.payments-dashboard__view-all-row { + text-align: right; + font-size: 16px; + font-family: "Roboto", sans-serif; + padding-top: 10px; +} +.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 screen and (max-width: 320px) { + .payments-dashboard .no-payments-container { + flex-direction: column; + } +} +.payments-dashboard .no-payments-container .no-payments-icon-container { + flex: 1; + flex-basis: auto; + width: 44px; + margin-right: 15px; +} +.payments-dashboard .no-payments-container .no-payments-icon-container .icon { + width: 100%; + height: auto; +} +.payments-dashboard .no-payments-container .no-payments-text-container { + flex: 1; + flex-basis: auto; + width: 100%; +} +@media screen and (max-width: 320px) { + .payments-dashboard .no-payments-container .no-payments-text-container { + text-align: center; + } +} +.payments-dashboard .no-payments-container .no-payments-text-container p { + font-size: 16px; + margin: 0 !important; +} + html { box-sizing: border-box; font-size: 100%; overflow-x: hidden; } +html.fixed { + overflow: hidden; +} html body { overflow-x: hidden; } |