/******************************************* ******* GLOBAL OVERRIDES ******************* **** You can reassign these global ********* **** defaults by un-commenting the ********* **** variables below & giving them ********* **** new values. The comments show ********* **** the default values. ********* *******************************************/ /******************************************/ /******************************************* ******* BRAND/GLOBAL COLORS **************** *******************************************/ /* * Standard error/warning/success */ /* * Populate the map below with the brand colors you entered above gray in map for shades * Helper classes are being generated by this sass map in styles/scss/base/_helpers.scss * as well as populating in pug/styleguide.pug * USAGE (scss): div { color: palette(gray,500); background-color: palette(gray,50); border: 1px solid palette(gray,900); } */ /******************************************/ /******************************************/ /******************************************* ******* COMPOSITION BACKGROUNDS ************ **** Any colors included in this ********* **** map will have composition ********* **** fill classes automatically ********* **** generated. ********* **** EX. .composition--fill-blue ********* *******************************************/ /******************************************/ /******************************************* ******* TYPOGRAPHY ************************* *******************************************/ /******************************************/ :root { --breakXs: 0; --breakSm: 576px; --breakMd: 768px; --breakLg: 992px; --breakXl: 1200px; } :root { --xs: 0; --sm: 576px; --md: 768px; --lg: 992px; --xl: 1200px; --sm_dn: 575px; --md_dn: 767px; --lg_dn: 991px; --xl_dn: 1199px; --homeFooter: 1345px; --fill-darkGray: #353535; --fill-lightGray: #e7e7e7; --fill-blue: #0056ac; } /* * Call the color palette modifiers for scss usage * USAGE (scss): div { color: palette(gray,500); background-color: palette(gray,50); border: 1px solid palette(gray,900); } */ /* create a fluid property value that adjusts from $min to $max, based on screen size (default $minWidth and $maxWidth in the _variables.scss) example: h1 { @include fluid(font-size, 2rem, 3rem); @include fluid(margin-bottom, 20px, 30px); @include fluid(padding-left, 0.5rem, 5rem, 900px, 1200px); } */ .hideVisually { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; -webkit-clip-path: inset(50%); clip-path: inset(50%); border: 0; } /******************************************* ******* GLOBAL OVERRIDES ******************* **** You can reassign these global ********* **** defaults by un-commenting the ********* **** variables below & giving them ********* **** new values. The comments show ********* **** the default values. ********* *******************************************/ /******************************************/ /******************************************* ******* BRAND/GLOBAL COLORS **************** *******************************************/ /* * Standard error/warning/success */ /* * Populate the map below with the brand colors you entered above gray in map for shades * Helper classes are being generated by this sass map in styles/scss/base/_helpers.scss * as well as populating in pug/styleguide.pug * USAGE (scss): div { color: palette(gray,500); background-color: palette(gray,50); border: 1px solid palette(gray,900); } */ /******************************************/ /******************************************/ /******************************************* ******* COMPOSITION BACKGROUNDS ************ **** Any colors included in this ********* **** map will have composition ********* **** fill classes automatically ********* **** generated. ********* **** EX. .composition--fill-blue ********* *******************************************/ /******************************************/ /******************************************* ******* TYPOGRAPHY ************************* *******************************************/ /******************************************/ :root { --breakXs: 0; --breakSm: 576px; --breakMd: 768px; --breakLg: 992px; --breakXl: 1200px; } /* FLUID FONT SIZE ========================================================================== */ /* SASS: .card { background-color:$white; @include modifier(--red) { background-color:red; } COMPILED CSS: .card { background-color:#fff; } .p-card--red .card, .card--red { background-color: red; } */ .hideVisually { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; -webkit-clip-path: inset(50%); clip-path: inset(50%); border: 0; } .warning aside > *:last-child { margin-bottom: 0; }/******************************************* ******* GLOBAL OVERRIDES ******************* **** You can reassign these global ********* **** defaults by un-commenting the ********* **** variables below & giving them ********* **** new values. The comments show ********* **** the default values. ********* *******************************************/ /******************************************/ /******************************************* ******* BRAND/GLOBAL COLORS **************** *******************************************/ /* * Standard error/warning/success */ /* * Populate the map below with the brand colors you entered above gray in map for shades * Helper classes are being generated by this sass map in styles/scss/base/_helpers.scss * as well as populating in pug/styleguide.pug * USAGE (scss): div { color: palette(gray,500); background-color: palette(gray,50); border: 1px solid palette(gray,900); } */ /******************************************/ /******************************************/ /******************************************* ******* COMPOSITION BACKGROUNDS ************ **** Any colors included in this ********* **** map will have composition ********* **** fill classes automatically ********* **** generated. ********* **** EX. .composition--fill-blue ********* *******************************************/ /******************************************/ /******************************************* ******* TYPOGRAPHY ************************* *******************************************/ /******************************************/ :root { --breakXs: 0; --breakSm: 576px; --breakMd: 768px; --breakLg: 992px; --breakXl: 1200px; } :root { --xs: 0; --sm: 576px; --md: 768px; --lg: 992px; --xl: 1200px; --sm_dn: 575px; --md_dn: 767px; --lg_dn: 991px; --xl_dn: 1199px; --homeFooter: 1345px; --fill-darkGray: #353535; --fill-lightGray: #e7e7e7; --fill-blue: #0056ac; } /* * Call the color palette modifiers for scss usage * USAGE (scss): div { color: palette(gray,500); background-color: palette(gray,50); border: 1px solid palette(gray,900); } */ /* create a fluid property value that adjusts from $min to $max, based on screen size (default $minWidth and $maxWidth in the _variables.scss) example: h1 { @include fluid(font-size, 2rem, 3rem); @include fluid(margin-bottom, 20px, 30px); @include fluid(padding-left, 0.5rem, 5rem, 900px, 1200px); } */ .hideVisually { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; -webkit-clip-path: inset(50%); clip-path: inset(50%); border: 0; } /******************************************* ******* GLOBAL OVERRIDES ******************* **** You can reassign these global ********* **** defaults by un-commenting the ********* **** variables below & giving them ********* **** new values. The comments show ********* **** the default values. ********* *******************************************/ /******************************************/ /******************************************* ******* BRAND/GLOBAL COLORS **************** *******************************************/ /* * Standard error/warning/success */ /* * Populate the map below with the brand colors you entered above gray in map for shades * Helper classes are being generated by this sass map in styles/scss/base/_helpers.scss * as well as populating in pug/styleguide.pug * USAGE (scss): div { color: palette(gray,500); background-color: palette(gray,50); border: 1px solid palette(gray,900); } */ /******************************************/ /******************************************/ /******************************************* ******* COMPOSITION BACKGROUNDS ************ **** Any colors included in this ********* **** map will have composition ********* **** fill classes automatically ********* **** generated. ********* **** EX. .composition--fill-blue ********* *******************************************/ /******************************************/ /******************************************* ******* TYPOGRAPHY ************************* *******************************************/ /******************************************/ :root { --breakXs: 0; --breakSm: 576px; --breakMd: 768px; --breakLg: 992px; --breakXl: 1200px; } /* FLUID FONT SIZE ========================================================================== */ /* SASS: .card { background-color:$white; @include modifier(--red) { background-color:red; } COMPILED CSS: .card { background-color:#fff; } .p-card--red .card, .card--red { background-color: red; } */ .hideVisually { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; -webkit-clip-path: inset(50%); clip-path: inset(50%); border: 0; } #expirationCalendar { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; margin: 2rem 0; background: #fff; -webkit-box-shadow: 1px 2px 5px rgba(229, 229, 229, 0.5), 1px 2px 15px rgba(229, 229, 229, 0.15); box-shadow: 1px 2px 5px rgba(229, 229, 229, 0.5), 1px 2px 15px rgba(229, 229, 229, 0.15); border: 1px solid #e5e5e5; font-family: "Montserrat", sans-serif; position: relative; z-index: 10; } @media (min-width: 768px) { #expirationCalendar { display: -ms-grid; display: grid; -ms-grid-rows: auto auto; grid-template-rows: auto auto; -ms-grid-columns: 9fr 4fr; grid-template-columns: 9fr 4fr; } } #expirationCalendar.ie { display: block; } #expirationCalendar .header { -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; } .exp_warning { margin: 2rem auto; padding: 2rem; max-width: 700px; } .exp_warning h3 { margin: 0 0 1.5rem; } .exp_warning aside { margin: 0 0 2rem; } .exp_warning .exp_docs { display: -webkit-box; display: -ms-flexbox; display: flex; margin: 0 -0.5rem -1rem; } .exp_warning .exp_docs a { margin: 0 0.5rem 1rem; } .exp_rail { -ms-grid-row: 1; -ms-grid-row-span: 2; -ms-grid-column: 2; -ms-grid-column-span: 1; grid-area: 1/2/3/3; padding: 2rem 1rem 1rem; } @media (min-width: 768px) { .exp_rail { -ms-flex-item-align: start; -ms-grid-row-align: start; align-self: start; top: 0; position: sticky; } } @media (min-width: 991px) { .exp_rail { padding: 2rem 1.75rem 2.5rem; } } .list-animate { position: relative; } .list-animate-enter, .list-animate-leave-to, .list-animate-enter-active, .list-animate-leave-active { -webkit-transition: all 0.5s !important; transition: all 0.5s !important; } .list-animate-enter:nth-child(1), .list-animate-leave-to:nth-child(1), .list-animate-enter-active:nth-child(1), .list-animate-leave-active:nth-child(1) { -webkit-transition-delay: 0.05s !important; transition-delay: 0.05s !important; } .list-animate-enter:nth-child(2), .list-animate-leave-to:nth-child(2), .list-animate-enter-active:nth-child(2), .list-animate-leave-active:nth-child(2) { -webkit-transition-delay: 0.1s !important; transition-delay: 0.1s !important; } .list-animate-enter:nth-child(3), .list-animate-leave-to:nth-child(3), .list-animate-enter-active:nth-child(3), .list-animate-leave-active:nth-child(3) { -webkit-transition-delay: 0.15s !important; transition-delay: 0.15s !important; } .list-animate-enter:nth-child(4), .list-animate-leave-to:nth-child(4), .list-animate-enter-active:nth-child(4), .list-animate-leave-active:nth-child(4) { -webkit-transition-delay: 0.2s !important; transition-delay: 0.2s !important; } .list-animate-enter:nth-child(5), .list-animate-leave-to:nth-child(5), .list-animate-enter-active:nth-child(5), .list-animate-leave-active:nth-child(5) { -webkit-transition-delay: 0.25s !important; transition-delay: 0.25s !important; } .list-animate-enter:nth-child(6), .list-animate-leave-to:nth-child(6), .list-animate-enter-active:nth-child(6), .list-animate-leave-active:nth-child(6) { -webkit-transition-delay: 0.3s !important; transition-delay: 0.3s !important; } .list-animate-enter:nth-child(7), .list-animate-leave-to:nth-child(7), .list-animate-enter-active:nth-child(7), .list-animate-leave-active:nth-child(7) { -webkit-transition-delay: 0.35s !important; transition-delay: 0.35s !important; } .list-animate-enter:nth-child(8), .list-animate-leave-to:nth-child(8), .list-animate-enter-active:nth-child(8), .list-animate-leave-active:nth-child(8) { -webkit-transition-delay: 0.4s !important; transition-delay: 0.4s !important; } .list-animate-enter:nth-child(9), .list-animate-leave-to:nth-child(9), .list-animate-enter-active:nth-child(9), .list-animate-leave-active:nth-child(9) { -webkit-transition-delay: 0.45s !important; transition-delay: 0.45s !important; } .list-animate-enter:nth-child(10), .list-animate-leave-to:nth-child(10), .list-animate-enter-active:nth-child(10), .list-animate-leave-active:nth-child(10) { -webkit-transition-delay: 0.5s !important; transition-delay: 0.5s !important; } .list-animate-enter:nth-child(11), .list-animate-leave-to:nth-child(11), .list-animate-enter-active:nth-child(11), .list-animate-leave-active:nth-child(11) { -webkit-transition-delay: 0.55s !important; transition-delay: 0.55s !important; } .list-animate-enter:nth-child(12), .list-animate-leave-to:nth-child(12), .list-animate-enter-active:nth-child(12), .list-animate-leave-active:nth-child(12) { -webkit-transition-delay: 0.6s !important; transition-delay: 0.6s !important; } .list-animate-enter:nth-child(13), .list-animate-leave-to:nth-child(13), .list-animate-enter-active:nth-child(13), .list-animate-leave-active:nth-child(13) { -webkit-transition-delay: 0.65s !important; transition-delay: 0.65s !important; } .list-animate-enter:nth-child(14), .list-animate-leave-to:nth-child(14), .list-animate-enter-active:nth-child(14), .list-animate-leave-active:nth-child(14) { -webkit-transition-delay: 0.7s !important; transition-delay: 0.7s !important; } .list-animate-enter:nth-child(15), .list-animate-leave-to:nth-child(15), .list-animate-enter-active:nth-child(15), .list-animate-leave-active:nth-child(15) { -webkit-transition-delay: 0.75s !important; transition-delay: 0.75s !important; } .list-animate-enter:nth-child(16), .list-animate-leave-to:nth-child(16), .list-animate-enter-active:nth-child(16), .list-animate-leave-active:nth-child(16) { -webkit-transition-delay: 0.8s !important; transition-delay: 0.8s !important; } .list-animate-enter:nth-child(17), .list-animate-leave-to:nth-child(17), .list-animate-enter-active:nth-child(17), .list-animate-leave-active:nth-child(17) { -webkit-transition-delay: 0.85s !important; transition-delay: 0.85s !important; } .list-animate-enter:nth-child(18), .list-animate-leave-to:nth-child(18), .list-animate-enter-active:nth-child(18), .list-animate-leave-active:nth-child(18) { -webkit-transition-delay: 0.9s !important; transition-delay: 0.9s !important; } .list-animate-enter:nth-child(19), .list-animate-leave-to:nth-child(19), .list-animate-enter-active:nth-child(19), .list-animate-leave-active:nth-child(19) { -webkit-transition-delay: 0.95s !important; transition-delay: 0.95s !important; } .list-animate-enter:nth-child(20), .list-animate-leave-to:nth-child(20), .list-animate-enter-active:nth-child(20), .list-animate-leave-active:nth-child(20) { -webkit-transition-delay: 1s !important; transition-delay: 1s !important; } .list-animate-enter:nth-child(21), .list-animate-leave-to:nth-child(21), .list-animate-enter-active:nth-child(21), .list-animate-leave-active:nth-child(21) { -webkit-transition-delay: 1.05s !important; transition-delay: 1.05s !important; } .list-animate-enter:nth-child(22), .list-animate-leave-to:nth-child(22), .list-animate-enter-active:nth-child(22), .list-animate-leave-active:nth-child(22) { -webkit-transition-delay: 1.1s !important; transition-delay: 1.1s !important; } .list-animate-enter:nth-child(23), .list-animate-leave-to:nth-child(23), .list-animate-enter-active:nth-child(23), .list-animate-leave-active:nth-child(23) { -webkit-transition-delay: 1.15s !important; transition-delay: 1.15s !important; } .list-animate-enter:nth-child(24), .list-animate-leave-to:nth-child(24), .list-animate-enter-active:nth-child(24), .list-animate-leave-active:nth-child(24) { -webkit-transition-delay: 1.2s !important; transition-delay: 1.2s !important; } .list-animate-enter:nth-child(25), .list-animate-leave-to:nth-child(25), .list-animate-enter-active:nth-child(25), .list-animate-leave-active:nth-child(25) { -webkit-transition-delay: 1.25s !important; transition-delay: 1.25s !important; } .list-animate-enter:nth-child(26), .list-animate-leave-to:nth-child(26), .list-animate-enter-active:nth-child(26), .list-animate-leave-active:nth-child(26) { -webkit-transition-delay: 1.3s !important; transition-delay: 1.3s !important; } .list-animate-enter:nth-child(27), .list-animate-leave-to:nth-child(27), .list-animate-enter-active:nth-child(27), .list-animate-leave-active:nth-child(27) { -webkit-transition-delay: 1.35s !important; transition-delay: 1.35s !important; } .list-animate-enter:nth-child(28), .list-animate-leave-to:nth-child(28), .list-animate-enter-active:nth-child(28), .list-animate-leave-active:nth-child(28) { -webkit-transition-delay: 1.4s !important; transition-delay: 1.4s !important; } .list-animate-enter:nth-child(29), .list-animate-leave-to:nth-child(29), .list-animate-enter-active:nth-child(29), .list-animate-leave-active:nth-child(29) { -webkit-transition-delay: 1.45s !important; transition-delay: 1.45s !important; } .list-animate-enter:nth-child(30), .list-animate-leave-to:nth-child(30), .list-animate-enter-active:nth-child(30), .list-animate-leave-active:nth-child(30) { -webkit-transition-delay: 1.5s !important; transition-delay: 1.5s !important; } .list-animate-enter:nth-child(31), .list-animate-leave-to:nth-child(31), .list-animate-enter-active:nth-child(31), .list-animate-leave-active:nth-child(31) { -webkit-transition-delay: 1.55s !important; transition-delay: 1.55s !important; } @media (min-width: 991px) { .list-animate-enter:nth-child(1), .list-animate-leave-to:nth-child(1), .list-animate-enter-active:nth-child(1), .list-animate-leave-active:nth-child(1) { -webkit-transition-delay: 0.01s !important; transition-delay: 0.01s !important; } .list-animate-enter:nth-child(2), .list-animate-leave-to:nth-child(2), .list-animate-enter-active:nth-child(2), .list-animate-leave-active:nth-child(2) { -webkit-transition-delay: 0.02s !important; transition-delay: 0.02s !important; } .list-animate-enter:nth-child(3), .list-animate-leave-to:nth-child(3), .list-animate-enter-active:nth-child(3), .list-animate-leave-active:nth-child(3) { -webkit-transition-delay: 0.03s !important; transition-delay: 0.03s !important; } .list-animate-enter:nth-child(4), .list-animate-leave-to:nth-child(4), .list-animate-enter-active:nth-child(4), .list-animate-leave-active:nth-child(4) { -webkit-transition-delay: 0.04s !important; transition-delay: 0.04s !important; } .list-animate-enter:nth-child(5), .list-animate-leave-to:nth-child(5), .list-animate-enter-active:nth-child(5), .list-animate-leave-active:nth-child(5) { -webkit-transition-delay: 0.05s !important; transition-delay: 0.05s !important; } .list-animate-enter:nth-child(6), .list-animate-leave-to:nth-child(6), .list-animate-enter-active:nth-child(6), .list-animate-leave-active:nth-child(6) { -webkit-transition-delay: 0.06s !important; transition-delay: 0.06s !important; } .list-animate-enter:nth-child(7), .list-animate-leave-to:nth-child(7), .list-animate-enter-active:nth-child(7), .list-animate-leave-active:nth-child(7) { -webkit-transition-delay: 0.07s !important; transition-delay: 0.07s !important; } .list-animate-enter:nth-child(8), .list-animate-leave-to:nth-child(8), .list-animate-enter-active:nth-child(8), .list-animate-leave-active:nth-child(8) { -webkit-transition-delay: 0.08s !important; transition-delay: 0.08s !important; } .list-animate-enter:nth-child(9), .list-animate-leave-to:nth-child(9), .list-animate-enter-active:nth-child(9), .list-animate-leave-active:nth-child(9) { -webkit-transition-delay: 0.09s !important; transition-delay: 0.09s !important; } .list-animate-enter:nth-child(10), .list-animate-leave-to:nth-child(10), .list-animate-enter-active:nth-child(10), .list-animate-leave-active:nth-child(10) { -webkit-transition-delay: 0.1s !important; transition-delay: 0.1s !important; } .list-animate-enter:nth-child(11), .list-animate-leave-to:nth-child(11), .list-animate-enter-active:nth-child(11), .list-animate-leave-active:nth-child(11) { -webkit-transition-delay: 0.11s !important; transition-delay: 0.11s !important; } .list-animate-enter:nth-child(12), .list-animate-leave-to:nth-child(12), .list-animate-enter-active:nth-child(12), .list-animate-leave-active:nth-child(12) { -webkit-transition-delay: 0.12s !important; transition-delay: 0.12s !important; } .list-animate-enter:nth-child(13), .list-animate-leave-to:nth-child(13), .list-animate-enter-active:nth-child(13), .list-animate-leave-active:nth-child(13) { -webkit-transition-delay: 0.13s !important; transition-delay: 0.13s !important; } .list-animate-enter:nth-child(14), .list-animate-leave-to:nth-child(14), .list-animate-enter-active:nth-child(14), .list-animate-leave-active:nth-child(14) { -webkit-transition-delay: 0.14s !important; transition-delay: 0.14s !important; } .list-animate-enter:nth-child(15), .list-animate-leave-to:nth-child(15), .list-animate-enter-active:nth-child(15), .list-animate-leave-active:nth-child(15) { -webkit-transition-delay: 0.15s !important; transition-delay: 0.15s !important; } .list-animate-enter:nth-child(16), .list-animate-leave-to:nth-child(16), .list-animate-enter-active:nth-child(16), .list-animate-leave-active:nth-child(16) { -webkit-transition-delay: 0.16s !important; transition-delay: 0.16s !important; } .list-animate-enter:nth-child(17), .list-animate-leave-to:nth-child(17), .list-animate-enter-active:nth-child(17), .list-animate-leave-active:nth-child(17) { -webkit-transition-delay: 0.17s !important; transition-delay: 0.17s !important; } .list-animate-enter:nth-child(18), .list-animate-leave-to:nth-child(18), .list-animate-enter-active:nth-child(18), .list-animate-leave-active:nth-child(18) { -webkit-transition-delay: 0.18s !important; transition-delay: 0.18s !important; } .list-animate-enter:nth-child(19), .list-animate-leave-to:nth-child(19), .list-animate-enter-active:nth-child(19), .list-animate-leave-active:nth-child(19) { -webkit-transition-delay: 0.19s !important; transition-delay: 0.19s !important; } .list-animate-enter:nth-child(20), .list-animate-leave-to:nth-child(20), .list-animate-enter-active:nth-child(20), .list-animate-leave-active:nth-child(20) { -webkit-transition-delay: 0.2s !important; transition-delay: 0.2s !important; } .list-animate-enter:nth-child(21), .list-animate-leave-to:nth-child(21), .list-animate-enter-active:nth-child(21), .list-animate-leave-active:nth-child(21) { -webkit-transition-delay: 0.21s !important; transition-delay: 0.21s !important; } .list-animate-enter:nth-child(22), .list-animate-leave-to:nth-child(22), .list-animate-enter-active:nth-child(22), .list-animate-leave-active:nth-child(22) { -webkit-transition-delay: 0.22s !important; transition-delay: 0.22s !important; } .list-animate-enter:nth-child(23), .list-animate-leave-to:nth-child(23), .list-animate-enter-active:nth-child(23), .list-animate-leave-active:nth-child(23) { -webkit-transition-delay: 0.23s !important; transition-delay: 0.23s !important; } .list-animate-enter:nth-child(24), .list-animate-leave-to:nth-child(24), .list-animate-enter-active:nth-child(24), .list-animate-leave-active:nth-child(24) { -webkit-transition-delay: 0.24s !important; transition-delay: 0.24s !important; } .list-animate-enter:nth-child(25), .list-animate-leave-to:nth-child(25), .list-animate-enter-active:nth-child(25), .list-animate-leave-active:nth-child(25) { -webkit-transition-delay: 0.25s !important; transition-delay: 0.25s !important; } .list-animate-enter:nth-child(26), .list-animate-leave-to:nth-child(26), .list-animate-enter-active:nth-child(26), .list-animate-leave-active:nth-child(26) { -webkit-transition-delay: 0.26s !important; transition-delay: 0.26s !important; } .list-animate-enter:nth-child(27), .list-animate-leave-to:nth-child(27), .list-animate-enter-active:nth-child(27), .list-animate-leave-active:nth-child(27) { -webkit-transition-delay: 0.27s !important; transition-delay: 0.27s !important; } .list-animate-enter:nth-child(28), .list-animate-leave-to:nth-child(28), .list-animate-enter-active:nth-child(28), .list-animate-leave-active:nth-child(28) { -webkit-transition-delay: 0.28s !important; transition-delay: 0.28s !important; } .list-animate-enter:nth-child(29), .list-animate-leave-to:nth-child(29), .list-animate-enter-active:nth-child(29), .list-animate-leave-active:nth-child(29) { -webkit-transition-delay: 0.29s !important; transition-delay: 0.29s !important; } .list-animate-enter:nth-child(30), .list-animate-leave-to:nth-child(30), .list-animate-enter-active:nth-child(30), .list-animate-leave-active:nth-child(30) { -webkit-transition-delay: 0.3s !important; transition-delay: 0.3s !important; } .list-animate-enter:nth-child(31), .list-animate-leave-to:nth-child(31), .list-animate-enter-active:nth-child(31), .list-animate-leave-active:nth-child(31) { -webkit-transition-delay: 0.31s !important; transition-delay: 0.31s !important; } .list-animate-enter:nth-child(32), .list-animate-leave-to:nth-child(32), .list-animate-enter-active:nth-child(32), .list-animate-leave-active:nth-child(32) { -webkit-transition-delay: 0.32s !important; transition-delay: 0.32s !important; } .list-animate-enter:nth-child(33), .list-animate-leave-to:nth-child(33), .list-animate-enter-active:nth-child(33), .list-animate-leave-active:nth-child(33) { -webkit-transition-delay: 0.33s !important; transition-delay: 0.33s !important; } .list-animate-enter:nth-child(34), .list-animate-leave-to:nth-child(34), .list-animate-enter-active:nth-child(34), .list-animate-leave-active:nth-child(34) { -webkit-transition-delay: 0.34s !important; transition-delay: 0.34s !important; } .list-animate-enter:nth-child(35), .list-animate-leave-to:nth-child(35), .list-animate-enter-active:nth-child(35), .list-animate-leave-active:nth-child(35) { -webkit-transition-delay: 0.35s !important; transition-delay: 0.35s !important; } .list-animate-enter:nth-child(36), .list-animate-leave-to:nth-child(36), .list-animate-enter-active:nth-child(36), .list-animate-leave-active:nth-child(36) { -webkit-transition-delay: 0.36s !important; transition-delay: 0.36s !important; } .list-animate-enter:nth-child(37), .list-animate-leave-to:nth-child(37), .list-animate-enter-active:nth-child(37), .list-animate-leave-active:nth-child(37) { -webkit-transition-delay: 0.37s !important; transition-delay: 0.37s !important; } .list-animate-enter:nth-child(38), .list-animate-leave-to:nth-child(38), .list-animate-enter-active:nth-child(38), .list-animate-leave-active:nth-child(38) { -webkit-transition-delay: 0.38s !important; transition-delay: 0.38s !important; } .list-animate-enter:nth-child(39), .list-animate-leave-to:nth-child(39), .list-animate-enter-active:nth-child(39), .list-animate-leave-active:nth-child(39) { -webkit-transition-delay: 0.39s !important; transition-delay: 0.39s !important; } .list-animate-enter:nth-child(40), .list-animate-leave-to:nth-child(40), .list-animate-enter-active:nth-child(40), .list-animate-leave-active:nth-child(40) { -webkit-transition-delay: 0.4s !important; transition-delay: 0.4s !important; } .list-animate-enter:nth-child(41), .list-animate-leave-to:nth-child(41), .list-animate-enter-active:nth-child(41), .list-animate-leave-active:nth-child(41) { -webkit-transition-delay: 0.41s !important; transition-delay: 0.41s !important; } .list-animate-enter:nth-child(42), .list-animate-leave-to:nth-child(42), .list-animate-enter-active:nth-child(42), .list-animate-leave-active:nth-child(42) { -webkit-transition-delay: 0.42s !important; transition-delay: 0.42s !important; } .list-animate-enter:nth-child(43), .list-animate-leave-to:nth-child(43), .list-animate-enter-active:nth-child(43), .list-animate-leave-active:nth-child(43) { -webkit-transition-delay: 0.43s !important; transition-delay: 0.43s !important; } .list-animate-enter:nth-child(44), .list-animate-leave-to:nth-child(44), .list-animate-enter-active:nth-child(44), .list-animate-leave-active:nth-child(44) { -webkit-transition-delay: 0.44s !important; transition-delay: 0.44s !important; } .list-animate-enter:nth-child(45), .list-animate-leave-to:nth-child(45), .list-animate-enter-active:nth-child(45), .list-animate-leave-active:nth-child(45) { -webkit-transition-delay: 0.45s !important; transition-delay: 0.45s !important; } .list-animate-enter:nth-child(46), .list-animate-leave-to:nth-child(46), .list-animate-enter-active:nth-child(46), .list-animate-leave-active:nth-child(46) { -webkit-transition-delay: 0.46s !important; transition-delay: 0.46s !important; } .list-animate-enter:nth-child(47), .list-animate-leave-to:nth-child(47), .list-animate-enter-active:nth-child(47), .list-animate-leave-active:nth-child(47) { -webkit-transition-delay: 0.47s !important; transition-delay: 0.47s !important; } .list-animate-enter:nth-child(48), .list-animate-leave-to:nth-child(48), .list-animate-enter-active:nth-child(48), .list-animate-leave-active:nth-child(48) { -webkit-transition-delay: 0.48s !important; transition-delay: 0.48s !important; } .list-animate-enter:nth-child(49), .list-animate-leave-to:nth-child(49), .list-animate-enter-active:nth-child(49), .list-animate-leave-active:nth-child(49) { -webkit-transition-delay: 0.49s !important; transition-delay: 0.49s !important; } .list-animate-enter:nth-child(50), .list-animate-leave-to:nth-child(50), .list-animate-enter-active:nth-child(50), .list-animate-leave-active:nth-child(50) { -webkit-transition-delay: 0.5s !important; transition-delay: 0.5s !important; } .list-animate-enter:nth-child(51), .list-animate-leave-to:nth-child(51), .list-animate-enter-active:nth-child(51), .list-animate-leave-active:nth-child(51) { -webkit-transition-delay: 0.51s !important; transition-delay: 0.51s !important; } .list-animate-enter:nth-child(52), .list-animate-leave-to:nth-child(52), .list-animate-enter-active:nth-child(52), .list-animate-leave-active:nth-child(52) { -webkit-transition-delay: 0.52s !important; transition-delay: 0.52s !important; } .list-animate-enter:nth-child(53), .list-animate-leave-to:nth-child(53), .list-animate-enter-active:nth-child(53), .list-animate-leave-active:nth-child(53) { -webkit-transition-delay: 0.53s !important; transition-delay: 0.53s !important; } .list-animate-enter:nth-child(54), .list-animate-leave-to:nth-child(54), .list-animate-enter-active:nth-child(54), .list-animate-leave-active:nth-child(54) { -webkit-transition-delay: 0.54s !important; transition-delay: 0.54s !important; } .list-animate-enter:nth-child(55), .list-animate-leave-to:nth-child(55), .list-animate-enter-active:nth-child(55), .list-animate-leave-active:nth-child(55) { -webkit-transition-delay: 0.55s !important; transition-delay: 0.55s !important; } .list-animate-enter:nth-child(56), .list-animate-leave-to:nth-child(56), .list-animate-enter-active:nth-child(56), .list-animate-leave-active:nth-child(56) { -webkit-transition-delay: 0.56s !important; transition-delay: 0.56s !important; } .list-animate-enter:nth-child(57), .list-animate-leave-to:nth-child(57), .list-animate-enter-active:nth-child(57), .list-animate-leave-active:nth-child(57) { -webkit-transition-delay: 0.57s !important; transition-delay: 0.57s !important; } .list-animate-enter:nth-child(58), .list-animate-leave-to:nth-child(58), .list-animate-enter-active:nth-child(58), .list-animate-leave-active:nth-child(58) { -webkit-transition-delay: 0.58s !important; transition-delay: 0.58s !important; } .list-animate-enter:nth-child(59), .list-animate-leave-to:nth-child(59), .list-animate-enter-active:nth-child(59), .list-animate-leave-active:nth-child(59) { -webkit-transition-delay: 0.59s !important; transition-delay: 0.59s !important; } .list-animate-enter:nth-child(60), .list-animate-leave-to:nth-child(60), .list-animate-enter-active:nth-child(60), .list-animate-leave-active:nth-child(60) { -webkit-transition-delay: 0.6s !important; transition-delay: 0.6s !important; } .list-animate-enter:nth-child(61), .list-animate-leave-to:nth-child(61), .list-animate-enter-active:nth-child(61), .list-animate-leave-active:nth-child(61) { -webkit-transition-delay: 0.61s !important; transition-delay: 0.61s !important; } .list-animate-enter:nth-child(62), .list-animate-leave-to:nth-child(62), .list-animate-enter-active:nth-child(62), .list-animate-leave-active:nth-child(62) { -webkit-transition-delay: 0.62s !important; transition-delay: 0.62s !important; } .list-animate-enter:nth-child(63), .list-animate-leave-to:nth-child(63), .list-animate-enter-active:nth-child(63), .list-animate-leave-active:nth-child(63) { -webkit-transition-delay: 0.63s !important; transition-delay: 0.63s !important; } .list-animate-enter:nth-child(64), .list-animate-leave-to:nth-child(64), .list-animate-enter-active:nth-child(64), .list-animate-leave-active:nth-child(64) { -webkit-transition-delay: 0.64s !important; transition-delay: 0.64s !important; } .list-animate-enter:nth-child(65), .list-animate-leave-to:nth-child(65), .list-animate-enter-active:nth-child(65), .list-animate-leave-active:nth-child(65) { -webkit-transition-delay: 0.65s !important; transition-delay: 0.65s !important; } .list-animate-enter:nth-child(66), .list-animate-leave-to:nth-child(66), .list-animate-enter-active:nth-child(66), .list-animate-leave-active:nth-child(66) { -webkit-transition-delay: 0.66s !important; transition-delay: 0.66s !important; } .list-animate-enter:nth-child(67), .list-animate-leave-to:nth-child(67), .list-animate-enter-active:nth-child(67), .list-animate-leave-active:nth-child(67) { -webkit-transition-delay: 0.67s !important; transition-delay: 0.67s !important; } .list-animate-enter:nth-child(68), .list-animate-leave-to:nth-child(68), .list-animate-enter-active:nth-child(68), .list-animate-leave-active:nth-child(68) { -webkit-transition-delay: 0.68s !important; transition-delay: 0.68s !important; } .list-animate-enter:nth-child(69), .list-animate-leave-to:nth-child(69), .list-animate-enter-active:nth-child(69), .list-animate-leave-active:nth-child(69) { -webkit-transition-delay: 0.69s !important; transition-delay: 0.69s !important; } .list-animate-enter:nth-child(70), .list-animate-leave-to:nth-child(70), .list-animate-enter-active:nth-child(70), .list-animate-leave-active:nth-child(70) { -webkit-transition-delay: 0.7s !important; transition-delay: 0.7s !important; } .list-animate-enter:nth-child(71), .list-animate-leave-to:nth-child(71), .list-animate-enter-active:nth-child(71), .list-animate-leave-active:nth-child(71) { -webkit-transition-delay: 0.71s !important; transition-delay: 0.71s !important; } .list-animate-enter:nth-child(72), .list-animate-leave-to:nth-child(72), .list-animate-enter-active:nth-child(72), .list-animate-leave-active:nth-child(72) { -webkit-transition-delay: 0.72s !important; transition-delay: 0.72s !important; } .list-animate-enter:nth-child(73), .list-animate-leave-to:nth-child(73), .list-animate-enter-active:nth-child(73), .list-animate-leave-active:nth-child(73) { -webkit-transition-delay: 0.73s !important; transition-delay: 0.73s !important; } .list-animate-enter:nth-child(74), .list-animate-leave-to:nth-child(74), .list-animate-enter-active:nth-child(74), .list-animate-leave-active:nth-child(74) { -webkit-transition-delay: 0.74s !important; transition-delay: 0.74s !important; } .list-animate-enter:nth-child(75), .list-animate-leave-to:nth-child(75), .list-animate-enter-active:nth-child(75), .list-animate-leave-active:nth-child(75) { -webkit-transition-delay: 0.75s !important; transition-delay: 0.75s !important; } .list-animate-enter:nth-child(76), .list-animate-leave-to:nth-child(76), .list-animate-enter-active:nth-child(76), .list-animate-leave-active:nth-child(76) { -webkit-transition-delay: 0.76s !important; transition-delay: 0.76s !important; } .list-animate-enter:nth-child(77), .list-animate-leave-to:nth-child(77), .list-animate-enter-active:nth-child(77), .list-animate-leave-active:nth-child(77) { -webkit-transition-delay: 0.77s !important; transition-delay: 0.77s !important; } .list-animate-enter:nth-child(78), .list-animate-leave-to:nth-child(78), .list-animate-enter-active:nth-child(78), .list-animate-leave-active:nth-child(78) { -webkit-transition-delay: 0.78s !important; transition-delay: 0.78s !important; } .list-animate-enter:nth-child(79), .list-animate-leave-to:nth-child(79), .list-animate-enter-active:nth-child(79), .list-animate-leave-active:nth-child(79) { -webkit-transition-delay: 0.79s !important; transition-delay: 0.79s !important; } .list-animate-enter:nth-child(80), .list-animate-leave-to:nth-child(80), .list-animate-enter-active:nth-child(80), .list-animate-leave-active:nth-child(80) { -webkit-transition-delay: 0.8s !important; transition-delay: 0.8s !important; } .list-animate-enter:nth-child(81), .list-animate-leave-to:nth-child(81), .list-animate-enter-active:nth-child(81), .list-animate-leave-active:nth-child(81) { -webkit-transition-delay: 0.81s !important; transition-delay: 0.81s !important; } .list-animate-enter:nth-child(82), .list-animate-leave-to:nth-child(82), .list-animate-enter-active:nth-child(82), .list-animate-leave-active:nth-child(82) { -webkit-transition-delay: 0.82s !important; transition-delay: 0.82s !important; } .list-animate-enter:nth-child(83), .list-animate-leave-to:nth-child(83), .list-animate-enter-active:nth-child(83), .list-animate-leave-active:nth-child(83) { -webkit-transition-delay: 0.83s !important; transition-delay: 0.83s !important; } .list-animate-enter:nth-child(84), .list-animate-leave-to:nth-child(84), .list-animate-enter-active:nth-child(84), .list-animate-leave-active:nth-child(84) { -webkit-transition-delay: 0.84s !important; transition-delay: 0.84s !important; } .list-animate-enter:nth-child(85), .list-animate-leave-to:nth-child(85), .list-animate-enter-active:nth-child(85), .list-animate-leave-active:nth-child(85) { -webkit-transition-delay: 0.85s !important; transition-delay: 0.85s !important; } } .list-animate-enter, .list-animate-leave-to { opacity: 0; -webkit-transform: translateY(-30px); transform: translateY(-30px); } @media (min-width: 991px) { .list-animate-enter, .list-animate-leave-to { -webkit-transform: scale(1.15); transform: scale(1.15); } } .list-animate-enter-active { z-index: 1; } .list-animate-leave-active { position: absolute; z-index: 2; } @media (min-width: 991px) { .list-animate-leave-active { -webkit-transition: all 0.5s !important; transition: all 0.5s !important; } }/******************************************* ******* GLOBAL OVERRIDES ******************* **** You can reassign these global ********* **** defaults by un-commenting the ********* **** variables below & giving them ********* **** new values. The comments show ********* **** the default values. ********* *******************************************/ /******************************************/ /******************************************* ******* BRAND/GLOBAL COLORS **************** *******************************************/ /* * Standard error/warning/success */ /* * Populate the map below with the brand colors you entered above gray in map for shades * Helper classes are being generated by this sass map in styles/scss/base/_helpers.scss * as well as populating in pug/styleguide.pug * USAGE (scss): div { color: palette(gray,500); background-color: palette(gray,50); border: 1px solid palette(gray,900); } */ /******************************************/ /******************************************/ /******************************************* ******* COMPOSITION BACKGROUNDS ************ **** Any colors included in this ********* **** map will have composition ********* **** fill classes automatically ********* **** generated. ********* **** EX. .composition--fill-blue ********* *******************************************/ /******************************************/ /******************************************* ******* TYPOGRAPHY ************************* *******************************************/ /******************************************/ [data-v-3110935a]:root { --breakXs: 0; --breakSm: 576px; --breakMd: 768px; --breakLg: 992px; --breakXl: 1200px; } [data-v-3110935a]:root { --xs: 0; --sm: 576px; --md: 768px; --lg: 992px; --xl: 1200px; --sm_dn: 575px; --md_dn: 767px; --lg_dn: 991px; --xl_dn: 1199px; --homeFooter: 1345px; --fill-darkGray: #353535; --fill-lightGray: #e7e7e7; --fill-blue: #0056ac; } /* * Call the color palette modifiers for scss usage * USAGE (scss): div { color: palette(gray,500); background-color: palette(gray,50); border: 1px solid palette(gray,900); } */ /* create a fluid property value that adjusts from $min to $max, based on screen size (default $minWidth and $maxWidth in the _variables.scss) example: h1 { @include fluid(font-size, 2rem, 3rem); @include fluid(margin-bottom, 20px, 30px); @include fluid(padding-left, 0.5rem, 5rem, 900px, 1200px); } */ .hideVisually[data-v-3110935a] { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; -webkit-clip-path: inset(50%); clip-path: inset(50%); border: 0; } /******************************************* ******* GLOBAL OVERRIDES ******************* **** You can reassign these global ********* **** defaults by un-commenting the ********* **** variables below & giving them ********* **** new values. The comments show ********* **** the default values. ********* *******************************************/ /******************************************/ /******************************************* ******* BRAND/GLOBAL COLORS **************** *******************************************/ /* * Standard error/warning/success */ /* * Populate the map below with the brand colors you entered above gray in map for shades * Helper classes are being generated by this sass map in styles/scss/base/_helpers.scss * as well as populating in pug/styleguide.pug * USAGE (scss): div { color: palette(gray,500); background-color: palette(gray,50); border: 1px solid palette(gray,900); } */ /******************************************/ /******************************************/ /******************************************* ******* COMPOSITION BACKGROUNDS ************ **** Any colors included in this ********* **** map will have composition ********* **** fill classes automatically ********* **** generated. ********* **** EX. .composition--fill-blue ********* *******************************************/ /******************************************/ /******************************************* ******* TYPOGRAPHY ************************* *******************************************/ /******************************************/ [data-v-3110935a]:root { --breakXs: 0; --breakSm: 576px; --breakMd: 768px; --breakLg: 992px; --breakXl: 1200px; } /* FLUID FONT SIZE ========================================================================== */ /* SASS: .card { background-color:$white; @include modifier(--red) { background-color:red; } COMPILED CSS: .card { background-color:#fff; } .p-card--red .card, .card--red { background-color: red; } */ .hideVisually[data-v-3110935a] { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; -webkit-clip-path: inset(50%); clip-path: inset(50%); border: 0; } .exp_calendar[data-v-3110935a] { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -ms-grid-row: 1; -ms-grid-row-span: 1; -ms-grid-column: 1; -ms-grid-column-span: 1; grid-area: 1/1/2/2; } @media (min-width: 768px) { .exp_calendar[data-v-3110935a] { border-right: 1px solid #e5e5e5; } }/******************************************* ******* GLOBAL OVERRIDES ******************* **** You can reassign these global ********* **** defaults by un-commenting the ********* **** variables below & giving them ********* **** new values. The comments show ********* **** the default values. ********* *******************************************/ /******************************************/ /******************************************* ******* BRAND/GLOBAL COLORS **************** *******************************************/ /* * Standard error/warning/success */ /* * Populate the map below with the brand colors you entered above gray in map for shades * Helper classes are being generated by this sass map in styles/scss/base/_helpers.scss * as well as populating in pug/styleguide.pug * USAGE (scss): div { color: palette(gray,500); background-color: palette(gray,50); border: 1px solid palette(gray,900); } */ /******************************************/ /******************************************/ /******************************************* ******* COMPOSITION BACKGROUNDS ************ **** Any colors included in this ********* **** map will have composition ********* **** fill classes automatically ********* **** generated. ********* **** EX. .composition--fill-blue ********* *******************************************/ /******************************************/ /******************************************* ******* TYPOGRAPHY ************************* *******************************************/ /******************************************/ :root { --breakXs: 0; --breakSm: 576px; --breakMd: 768px; --breakLg: 992px; --breakXl: 1200px; } :root { --xs: 0; --sm: 576px; --md: 768px; --lg: 992px; --xl: 1200px; --sm_dn: 575px; --md_dn: 767px; --lg_dn: 991px; --xl_dn: 1199px; --homeFooter: 1345px; --fill-darkGray: #353535; --fill-lightGray: #e7e7e7; --fill-blue: #0056ac; } /* * Call the color palette modifiers for scss usage * USAGE (scss): div { color: palette(gray,500); background-color: palette(gray,50); border: 1px solid palette(gray,900); } */ /* create a fluid property value that adjusts from $min to $max, based on screen size (default $minWidth and $maxWidth in the _variables.scss) example: h1 { @include fluid(font-size, 2rem, 3rem); @include fluid(margin-bottom, 20px, 30px); @include fluid(padding-left, 0.5rem, 5rem, 900px, 1200px); } */ .hideVisually { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; -webkit-clip-path: inset(50%); clip-path: inset(50%); border: 0; } /******************************************* ******* GLOBAL OVERRIDES ******************* **** You can reassign these global ********* **** defaults by un-commenting the ********* **** variables below & giving them ********* **** new values. The comments show ********* **** the default values. ********* *******************************************/ /******************************************/ /******************************************* ******* BRAND/GLOBAL COLORS **************** *******************************************/ /* * Standard error/warning/success */ /* * Populate the map below with the brand colors you entered above gray in map for shades * Helper classes are being generated by this sass map in styles/scss/base/_helpers.scss * as well as populating in pug/styleguide.pug * USAGE (scss): div { color: palette(gray,500); background-color: palette(gray,50); border: 1px solid palette(gray,900); } */ /******************************************/ /******************************************/ /******************************************* ******* COMPOSITION BACKGROUNDS ************ **** Any colors included in this ********* **** map will have composition ********* **** fill classes automatically ********* **** generated. ********* **** EX. .composition--fill-blue ********* *******************************************/ /******************************************/ /******************************************* ******* TYPOGRAPHY ************************* *******************************************/ /******************************************/ :root { --breakXs: 0; --breakSm: 576px; --breakMd: 768px; --breakLg: 992px; --breakXl: 1200px; } /* FLUID FONT SIZE ========================================================================== */ /* SASS: .card { background-color:$white; @include modifier(--red) { background-color:red; } COMPILED CSS: .card { background-color:#fff; } .p-card--red .card, .card--red { background-color: red; } */ .hideVisually { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; -webkit-clip-path: inset(50%); clip-path: inset(50%); border: 0; } .exp_disclaimer > *:last-child { margin-bottom: 0; } .exp_disclaimer * > *:last-child { margin-bottom: 0; }/******************************************* ******* GLOBAL OVERRIDES ******************* **** You can reassign these global ********* **** defaults by un-commenting the ********* **** variables below & giving them ********* **** new values. The comments show ********* **** the default values. ********* *******************************************/ /******************************************/ /******************************************* ******* BRAND/GLOBAL COLORS **************** *******************************************/ /* * Standard error/warning/success */ /* * Populate the map below with the brand colors you entered above gray in map for shades * Helper classes are being generated by this sass map in styles/scss/base/_helpers.scss * as well as populating in pug/styleguide.pug * USAGE (scss): div { color: palette(gray,500); background-color: palette(gray,50); border: 1px solid palette(gray,900); } */ /******************************************/ /******************************************/ /******************************************* ******* COMPOSITION BACKGROUNDS ************ **** Any colors included in this ********* **** map will have composition ********* **** fill classes automatically ********* **** generated. ********* **** EX. .composition--fill-blue ********* *******************************************/ /******************************************/ /******************************************* ******* TYPOGRAPHY ************************* *******************************************/ /******************************************/ [data-v-3af934d4]:root { --breakXs: 0; --breakSm: 576px; --breakMd: 768px; --breakLg: 992px; --breakXl: 1200px; } [data-v-3af934d4]:root { --xs: 0; --sm: 576px; --md: 768px; --lg: 992px; --xl: 1200px; --sm_dn: 575px; --md_dn: 767px; --lg_dn: 991px; --xl_dn: 1199px; --homeFooter: 1345px; --fill-darkGray: #353535; --fill-lightGray: #e7e7e7; --fill-blue: #0056ac; } /* * Call the color palette modifiers for scss usage * USAGE (scss): div { color: palette(gray,500); background-color: palette(gray,50); border: 1px solid palette(gray,900); } */ /* create a fluid property value that adjusts from $min to $max, based on screen size (default $minWidth and $maxWidth in the _variables.scss) example: h1 { @include fluid(font-size, 2rem, 3rem); @include fluid(margin-bottom, 20px, 30px); @include fluid(padding-left, 0.5rem, 5rem, 900px, 1200px); } */ .hideVisually[data-v-3af934d4] { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; -webkit-clip-path: inset(50%); clip-path: inset(50%); border: 0; } /******************************************* ******* GLOBAL OVERRIDES ******************* **** You can reassign these global ********* **** defaults by un-commenting the ********* **** variables below & giving them ********* **** new values. The comments show ********* **** the default values. ********* *******************************************/ /******************************************/ /******************************************* ******* BRAND/GLOBAL COLORS **************** *******************************************/ /* * Standard error/warning/success */ /* * Populate the map below with the brand colors you entered above gray in map for shades * Helper classes are being generated by this sass map in styles/scss/base/_helpers.scss * as well as populating in pug/styleguide.pug * USAGE (scss): div { color: palette(gray,500); background-color: palette(gray,50); border: 1px solid palette(gray,900); } */ /******************************************/ /******************************************/ /******************************************* ******* COMPOSITION BACKGROUNDS ************ **** Any colors included in this ********* **** map will have composition ********* **** fill classes automatically ********* **** generated. ********* **** EX. .composition--fill-blue ********* *******************************************/ /******************************************/ /******************************************* ******* TYPOGRAPHY ************************* *******************************************/ /******************************************/ [data-v-3af934d4]:root { --breakXs: 0; --breakSm: 576px; --breakMd: 768px; --breakLg: 992px; --breakXl: 1200px; } /* FLUID FONT SIZE ========================================================================== */ /* SASS: .card { background-color:$white; @include modifier(--red) { background-color:red; } COMPILED CSS: .card { background-color:#fff; } .p-card--red .card, .card--red { background-color: red; } */ .hideVisually[data-v-3af934d4] { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; -webkit-clip-path: inset(50%); clip-path: inset(50%); border: 0; } .exp_legend[data-v-3af934d4] { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; border-top: 1px solid #e5e5e5; margin: 1.5rem -1rem 1.5rem; padding: 1.5rem 1rem 0; } @media (min-width: 991px) { .exp_legend[data-v-3af934d4] { margin: 2rem -1.75rem 2rem; padding: 2rem 1.75rem 0; } } .exp_legend-list[data-v-3af934d4] { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; list-style: none; padding: 0; margin: 0; } .exp_legend-item[data-v-3af934d4] { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; margin-bottom: 1rem; } .exp_legend-item[data-v-3af934d4]:last-child { margin-bottom: 1.75rem; } @media (min-width: 991px) { .exp_legend-item[data-v-3af934d4] { -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; } } .exp_legend-label[data-v-3af934d4] { -webkit-box-flex: 0; -ms-flex: 0 0 1.25rem; flex: 0 0 1.25rem; max-width: 1.25rem; margin-bottom: 0.25rem; } @media (min-width: 991px) { .exp_legend-label[data-v-3af934d4] { margin-right: 0.75rem; margin-bottom: 0; } } .exp_legend-title[data-v-3af934d4] { font-size: 0.75rem; line-height: 1.25rem; margin: 0; } @media (min-width: 991px) { .exp_legend-title[data-v-3af934d4] { font-size: 0.875rem; } } .exp_disclaimer[data-v-3af934d4] { margin: 0; }/******************************************* ******* GLOBAL OVERRIDES ******************* **** You can reassign these global ********* **** defaults by un-commenting the ********* **** variables below & giving them ********* **** new values. The comments show ********* **** the default values. ********* *******************************************/ /******************************************/ /******************************************* ******* BRAND/GLOBAL COLORS **************** *******************************************/ /* * Standard error/warning/success */ /* * Populate the map below with the brand colors you entered above gray in map for shades * Helper classes are being generated by this sass map in styles/scss/base/_helpers.scss * as well as populating in pug/styleguide.pug * USAGE (scss): div { color: palette(gray,500); background-color: palette(gray,50); border: 1px solid palette(gray,900); } */ /******************************************/ /******************************************/ /******************************************* ******* COMPOSITION BACKGROUNDS ************ **** Any colors included in this ********* **** map will have composition ********* **** fill classes automatically ********* **** generated. ********* **** EX. .composition--fill-blue ********* *******************************************/ /******************************************/ /******************************************* ******* TYPOGRAPHY ************************* *******************************************/ /******************************************/ [data-v-09dbf7dd]:root { --breakXs: 0; --breakSm: 576px; --breakMd: 768px; --breakLg: 992px; --breakXl: 1200px; } [data-v-09dbf7dd]:root { --xs: 0; --sm: 576px; --md: 768px; --lg: 992px; --xl: 1200px; --sm_dn: 575px; --md_dn: 767px; --lg_dn: 991px; --xl_dn: 1199px; --homeFooter: 1345px; --fill-darkGray: #353535; --fill-lightGray: #e7e7e7; --fill-blue: #0056ac; } /* * Call the color palette modifiers for scss usage * USAGE (scss): div { color: palette(gray,500); background-color: palette(gray,50); border: 1px solid palette(gray,900); } */ /* create a fluid property value that adjusts from $min to $max, based on screen size (default $minWidth and $maxWidth in the _variables.scss) example: h1 { @include fluid(font-size, 2rem, 3rem); @include fluid(margin-bottom, 20px, 30px); @include fluid(padding-left, 0.5rem, 5rem, 900px, 1200px); } */ .hideVisually[data-v-09dbf7dd] { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; -webkit-clip-path: inset(50%); clip-path: inset(50%); border: 0; } /******************************************* ******* GLOBAL OVERRIDES ******************* **** You can reassign these global ********* **** defaults by un-commenting the ********* **** variables below & giving them ********* **** new values. The comments show ********* **** the default values. ********* *******************************************/ /******************************************/ /******************************************* ******* BRAND/GLOBAL COLORS **************** *******************************************/ /* * Standard error/warning/success */ /* * Populate the map below with the brand colors you entered above gray in map for shades * Helper classes are being generated by this sass map in styles/scss/base/_helpers.scss * as well as populating in pug/styleguide.pug * USAGE (scss): div { color: palette(gray,500); background-color: palette(gray,50); border: 1px solid palette(gray,900); } */ /******************************************/ /******************************************/ /******************************************* ******* COMPOSITION BACKGROUNDS ************ **** Any colors included in this ********* **** map will have composition ********* **** fill classes automatically ********* **** generated. ********* **** EX. .composition--fill-blue ********* *******************************************/ /******************************************/ /******************************************* ******* TYPOGRAPHY ************************* *******************************************/ /******************************************/ [data-v-09dbf7dd]:root { --breakXs: 0; --breakSm: 576px; --breakMd: 768px; --breakLg: 992px; --breakXl: 1200px; } /* FLUID FONT SIZE ========================================================================== */ /* SASS: .card { background-color:$white; @include modifier(--red) { background-color:red; } COMPILED CSS: .card { background-color:#fff; } .p-card--red .card, .card--red { background-color: red; } */ .hideVisually[data-v-09dbf7dd] { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; -webkit-clip-path: inset(50%); clip-path: inset(50%); border: 0; } .exp_downloads[data-v-09dbf7dd] { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; margin: 0; } .exp_download[data-v-09dbf7dd] { color: #2b8274; font-weight: 700; font-size: 0.875rem; } .exp_download[data-v-09dbf7dd]:not(:last-child) { margin-bottom: 0.5rem; }/******************************************* ******* GLOBAL OVERRIDES ******************* **** You can reassign these global ********* **** defaults by un-commenting the ********* **** variables below & giving them ********* **** new values. The comments show ********* **** the default values. ********* *******************************************/ /******************************************/ /******************************************* ******* BRAND/GLOBAL COLORS **************** *******************************************/ /* * Standard error/warning/success */ /* * Populate the map below with the brand colors you entered above gray in map for shades * Helper classes are being generated by this sass map in styles/scss/base/_helpers.scss * as well as populating in pug/styleguide.pug * USAGE (scss): div { color: palette(gray,500); background-color: palette(gray,50); border: 1px solid palette(gray,900); } */ /******************************************/ /******************************************/ /******************************************* ******* COMPOSITION BACKGROUNDS ************ **** Any colors included in this ********* **** map will have composition ********* **** fill classes automatically ********* **** generated. ********* **** EX. .composition--fill-blue ********* *******************************************/ /******************************************/ /******************************************* ******* TYPOGRAPHY ************************* *******************************************/ /******************************************/ [data-v-5ee6298c]:root { --breakXs: 0; --breakSm: 576px; --breakMd: 768px; --breakLg: 992px; --breakXl: 1200px; } [data-v-5ee6298c]:root { --xs: 0; --sm: 576px; --md: 768px; --lg: 992px; --xl: 1200px; --sm_dn: 575px; --md_dn: 767px; --lg_dn: 991px; --xl_dn: 1199px; --homeFooter: 1345px; --fill-darkGray: #353535; --fill-lightGray: #e7e7e7; --fill-blue: #0056ac; } /* * Call the color palette modifiers for scss usage * USAGE (scss): div { color: palette(gray,500); background-color: palette(gray,50); border: 1px solid palette(gray,900); } */ /* create a fluid property value that adjusts from $min to $max, based on screen size (default $minWidth and $maxWidth in the _variables.scss) example: h1 { @include fluid(font-size, 2rem, 3rem); @include fluid(margin-bottom, 20px, 30px); @include fluid(padding-left, 0.5rem, 5rem, 900px, 1200px); } */ .hideVisually[data-v-5ee6298c] { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; -webkit-clip-path: inset(50%); clip-path: inset(50%); border: 0; } /******************************************* ******* GLOBAL OVERRIDES ******************* **** You can reassign these global ********* **** defaults by un-commenting the ********* **** variables below & giving them ********* **** new values. The comments show ********* **** the default values. ********* *******************************************/ /******************************************/ /******************************************* ******* BRAND/GLOBAL COLORS **************** *******************************************/ /* * Standard error/warning/success */ /* * Populate the map below with the brand colors you entered above gray in map for shades * Helper classes are being generated by this sass map in styles/scss/base/_helpers.scss * as well as populating in pug/styleguide.pug * USAGE (scss): div { color: palette(gray,500); background-color: palette(gray,50); border: 1px solid palette(gray,900); } */ /******************************************/ /******************************************/ /******************************************* ******* COMPOSITION BACKGROUNDS ************ **** Any colors included in this ********* **** map will have composition ********* **** fill classes automatically ********* **** generated. ********* **** EX. .composition--fill-blue ********* *******************************************/ /******************************************/ /******************************************* ******* TYPOGRAPHY ************************* *******************************************/ /******************************************/ [data-v-5ee6298c]:root { --breakXs: 0; --breakSm: 576px; --breakMd: 768px; --breakLg: 992px; --breakXl: 1200px; } /* FLUID FONT SIZE ========================================================================== */ /* SASS: .card { background-color:$white; @include modifier(--red) { background-color:red; } COMPILED CSS: .card { background-color:#fff; } .p-card--red .card, .card--red { background-color: red; } */ .hideVisually[data-v-5ee6298c] { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; -webkit-clip-path: inset(50%); clip-path: inset(50%); border: 0; } .exp_summary[data-v-5ee6298c] { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; margin: 0; z-index: 0; position: relative; padding: 1.5rem; } .exp_summary[data-v-5ee6298c]::after { content: ""; position: absolute; z-index: -1; top: 0; left: 0; bottom: 0; right: 0; background: #fff; border: 1px solid #e5e5e5; } .exp_summary[data-v-5ee6298c]::before { content: ""; position: absolute; z-index: -2; top: -1rem; left: -1rem; right: -1rem; bottom: -1.5rem; background: #f2f2f2; } @media (min-width: 768px) { .exp_summary[data-v-5ee6298c]::before { top: -2rem; left: -1rem; right: -1rem; bottom: -2rem; } } @media (min-width: 991px) { .exp_summary[data-v-5ee6298c]::before { left: -1.75rem; right: -1.75rem; bottom: -2rem; } } .exp_date[data-v-5ee6298c] { font-weight: 700; text-align: center; margin: -1.5rem -1.5rem 1.5rem; padding: 0.75rem; background: #2b8274; color: #fff; } .exp_date[data-v-5ee6298c] { font-size: 18px; } @media screen and (min-width: 768px) { .exp_date[data-v-5ee6298c] { font-size: calc(18px + 8 * ((100vw - 768px) / 332)); } } @media screen and (min-width: 1100px) { .exp_date[data-v-5ee6298c] { font-size: 26px; } } .exp_event-list[data-v-5ee6298c] { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; list-style: none; position: relative; margin: 0; padding: 0; } .exp_event[data-v-5ee6298c] { display: -ms-grid; display: grid; -ms-grid-columns: auto 1fr; grid-template-columns: auto 1fr; -ms-grid-rows: auto auto auto auto; grid-template-rows: auto auto auto auto; } .exp_event:not(:last-child) > *[data-v-5ee6298c]:last-child { padding-bottom: 1rem; } .exp_event-image[data-v-5ee6298c] { -ms-grid-column: 1; -ms-grid-column-span: 1; grid-area: 1/1/-1/2; padding-top: 0.25rem; margin-right: 0.75rem; margin-bottom: 0; } .exp_event-image img[data-v-5ee6298c] { max-width: 1.125rem; } .exp_event-title[data-v-5ee6298c] { -ms-grid-row: 1; -ms-grid-row-span: 1; -ms-grid-column: 2; -ms-grid-column-span: 1; grid-area: 1/2/2/3; margin: 0; font-size: 1rem; -ms-grid-row-align: center; align-self: center; margin-top: 0.25rem; margin-bottom: 0.5rem; } .exp_event-supplement[data-v-5ee6298c] { -ms-grid-row: 2; -ms-grid-row-span: 1; -ms-grid-column: 2; -ms-grid-column-span: 1; grid-area: 2/2/3/3; font-size: 0.75rem; margin-bottom: 0.5rem; } .exp_event-link[data-v-5ee6298c] { color: #00bdb3; font-weight: 700; -ms-grid-row: 3; -ms-grid-row-span: 1; -ms-grid-column: 2; -ms-grid-column-span: 1; grid-area: 3/2/4/3; font-size: 0.75rem; margin-bottom: 0.5rem; } .exp_empty[data-v-5ee6298c] { font-size: 1rem; color: rgba(0, 0, 0, 0.75); }/******************************************* ******* GLOBAL OVERRIDES ******************* **** You can reassign these global ********* **** defaults by un-commenting the ********* **** variables below & giving them ********* **** new values. The comments show ********* **** the default values. ********* *******************************************/ /******************************************/ /******************************************* ******* BRAND/GLOBAL COLORS **************** *******************************************/ /* * Standard error/warning/success */ /* * Populate the map below with the brand colors you entered above gray in map for shades * Helper classes are being generated by this sass map in styles/scss/base/_helpers.scss * as well as populating in pug/styleguide.pug * USAGE (scss): div { color: palette(gray,500); background-color: palette(gray,50); border: 1px solid palette(gray,900); } */ /******************************************/ /******************************************/ /******************************************* ******* COMPOSITION BACKGROUNDS ************ **** Any colors included in this ********* **** map will have composition ********* **** fill classes automatically ********* **** generated. ********* **** EX. .composition--fill-blue ********* *******************************************/ /******************************************/ /******************************************* ******* TYPOGRAPHY ************************* *******************************************/ /******************************************/ [data-v-0c724049]:root { --breakXs: 0; --breakSm: 576px; --breakMd: 768px; --breakLg: 992px; --breakXl: 1200px; } [data-v-0c724049]:root { --xs: 0; --sm: 576px; --md: 768px; --lg: 992px; --xl: 1200px; --sm_dn: 575px; --md_dn: 767px; --lg_dn: 991px; --xl_dn: 1199px; --homeFooter: 1345px; --fill-darkGray: #353535; --fill-lightGray: #e7e7e7; --fill-blue: #0056ac; } /* * Call the color palette modifiers for scss usage * USAGE (scss): div { color: palette(gray,500); background-color: palette(gray,50); border: 1px solid palette(gray,900); } */ /* create a fluid property value that adjusts from $min to $max, based on screen size (default $minWidth and $maxWidth in the _variables.scss) example: h1 { @include fluid(font-size, 2rem, 3rem); @include fluid(margin-bottom, 20px, 30px); @include fluid(padding-left, 0.5rem, 5rem, 900px, 1200px); } */ .hideVisually[data-v-0c724049] { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; -webkit-clip-path: inset(50%); clip-path: inset(50%); border: 0; } /******************************************* ******* GLOBAL OVERRIDES ******************* **** You can reassign these global ********* **** defaults by un-commenting the ********* **** variables below & giving them ********* **** new values. The comments show ********* **** the default values. ********* *******************************************/ /******************************************/ /******************************************* ******* BRAND/GLOBAL COLORS **************** *******************************************/ /* * Standard error/warning/success */ /* * Populate the map below with the brand colors you entered above gray in map for shades * Helper classes are being generated by this sass map in styles/scss/base/_helpers.scss * as well as populating in pug/styleguide.pug * USAGE (scss): div { color: palette(gray,500); background-color: palette(gray,50); border: 1px solid palette(gray,900); } */ /******************************************/ /******************************************/ /******************************************* ******* COMPOSITION BACKGROUNDS ************ **** Any colors included in this ********* **** map will have composition ********* **** fill classes automatically ********* **** generated. ********* **** EX. .composition--fill-blue ********* *******************************************/ /******************************************/ /******************************************* ******* TYPOGRAPHY ************************* *******************************************/ /******************************************/ [data-v-0c724049]:root { --breakXs: 0; --breakSm: 576px; --breakMd: 768px; --breakLg: 992px; --breakXl: 1200px; } /* FLUID FONT SIZE ========================================================================== */ /* SASS: .card { background-color:$white; @include modifier(--red) { background-color:red; } COMPILED CSS: .card { background-color:#fff; } .p-card--red .card, .card--red { background-color: red; } */ .hideVisually[data-v-0c724049] { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; -webkit-clip-path: inset(50%); clip-path: inset(50%); border: 0; } .exp_footnotes[data-v-0c724049] { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -ms-grid-row: 2; -ms-grid-row-span: 1; -ms-grid-column: 1; -ms-grid-column-span: 1; grid-area: 2/1/3/2; padding: 1rem; margin: 0; } @media (min-width: 768px) { .exp_footnotes[data-v-0c724049] { padding: 2.5rem; border-right: 1px solid #e5e5e5; } }/******************************************* ******* GLOBAL OVERRIDES ******************* **** You can reassign these global ********* **** defaults by un-commenting the ********* **** variables below & giving them ********* **** new values. The comments show ********* **** the default values. ********* *******************************************/ /******************************************/ /******************************************* ******* BRAND/GLOBAL COLORS **************** *******************************************/ /* * Standard error/warning/success */ /* * Populate the map below with the brand colors you entered above gray in map for shades * Helper classes are being generated by this sass map in styles/scss/base/_helpers.scss * as well as populating in pug/styleguide.pug * USAGE (scss): div { color: palette(gray,500); background-color: palette(gray,50); border: 1px solid palette(gray,900); } */ /******************************************/ /******************************************/ /******************************************* ******* COMPOSITION BACKGROUNDS ************ **** Any colors included in this ********* **** map will have composition ********* **** fill classes automatically ********* **** generated. ********* **** EX. .composition--fill-blue ********* *******************************************/ /******************************************/ /******************************************* ******* TYPOGRAPHY ************************* *******************************************/ /******************************************/ [data-v-0c8a90a6]:root { --breakXs: 0; --breakSm: 576px; --breakMd: 768px; --breakLg: 992px; --breakXl: 1200px; } [data-v-0c8a90a6]:root { --xs: 0; --sm: 576px; --md: 768px; --lg: 992px; --xl: 1200px; --sm_dn: 575px; --md_dn: 767px; --lg_dn: 991px; --xl_dn: 1199px; --homeFooter: 1345px; --fill-darkGray: #353535; --fill-lightGray: #e7e7e7; --fill-blue: #0056ac; } /* * Call the color palette modifiers for scss usage * USAGE (scss): div { color: palette(gray,500); background-color: palette(gray,50); border: 1px solid palette(gray,900); } */ /* create a fluid property value that adjusts from $min to $max, based on screen size (default $minWidth and $maxWidth in the _variables.scss) example: h1 { @include fluid(font-size, 2rem, 3rem); @include fluid(margin-bottom, 20px, 30px); @include fluid(padding-left, 0.5rem, 5rem, 900px, 1200px); } */ .hideVisually[data-v-0c8a90a6] { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; -webkit-clip-path: inset(50%); clip-path: inset(50%); border: 0; } /******************************************* ******* GLOBAL OVERRIDES ******************* **** You can reassign these global ********* **** defaults by un-commenting the ********* **** variables below & giving them ********* **** new values. The comments show ********* **** the default values. ********* *******************************************/ /******************************************/ /******************************************* ******* BRAND/GLOBAL COLORS **************** *******************************************/ /* * Standard error/warning/success */ /* * Populate the map below with the brand colors you entered above gray in map for shades * Helper classes are being generated by this sass map in styles/scss/base/_helpers.scss * as well as populating in pug/styleguide.pug * USAGE (scss): div { color: palette(gray,500); background-color: palette(gray,50); border: 1px solid palette(gray,900); } */ /******************************************/ /******************************************/ /******************************************* ******* COMPOSITION BACKGROUNDS ************ **** Any colors included in this ********* **** map will have composition ********* **** fill classes automatically ********* **** generated. ********* **** EX. .composition--fill-blue ********* *******************************************/ /******************************************/ /******************************************* ******* TYPOGRAPHY ************************* *******************************************/ /******************************************/ [data-v-0c8a90a6]:root { --breakXs: 0; --breakSm: 576px; --breakMd: 768px; --breakLg: 992px; --breakXl: 1200px; } /* FLUID FONT SIZE ========================================================================== */ /* SASS: .card { background-color:$white; @include modifier(--red) { background-color:red; } COMPILED CSS: .card { background-color:#fff; } .p-card--red .card, .card--red { background-color: red; } */ .hideVisually[data-v-0c8a90a6] { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; -webkit-clip-path: inset(50%); clip-path: inset(50%); border: 0; } .main[data-v-0c8a90a6] { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; padding: 1rem; margin: 0; } @media (min-width: 991px) { .main[data-v-0c8a90a6] { -webkit-box-flex: 1; -ms-flex: 1 1 100%; flex: 1 1 100%; padding: 2.5rem; } } .headings[data-v-0c8a90a6], .dates[data-v-0c8a90a6] { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 0.5rem; } @media (min-width: 991px) { .headings[data-v-0c8a90a6], .dates[data-v-0c8a90a6] { display: -ms-grid; display: grid; -ms-grid-columns: (1fr)[7]; grid-template-columns: repeat(7, 1fr); grid-auto-rows: auto; } } .headings .day[data-v-0c8a90a6] { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; grid-area: span 1/span 1; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; padding: 1.25rem 0.75rem; font-size: 1.25rem; font-weight: 700; text-align: center; text-transform: uppercase; }/******************************************* ******* GLOBAL OVERRIDES ******************* **** You can reassign these global ********* **** defaults by un-commenting the ********* **** variables below & giving them ********* **** new values. The comments show ********* **** the default values. ********* *******************************************/ /******************************************/ /******************************************* ******* BRAND/GLOBAL COLORS **************** *******************************************/ /* * Standard error/warning/success */ /* * Populate the map below with the brand colors you entered above gray in map for shades * Helper classes are being generated by this sass map in styles/scss/base/_helpers.scss * as well as populating in pug/styleguide.pug * USAGE (scss): div { color: palette(gray,500); background-color: palette(gray,50); border: 1px solid palette(gray,900); } */ /******************************************/ /******************************************/ /******************************************* ******* COMPOSITION BACKGROUNDS ************ **** Any colors included in this ********* **** map will have composition ********* **** fill classes automatically ********* **** generated. ********* **** EX. .composition--fill-blue ********* *******************************************/ /******************************************/ /******************************************* ******* TYPOGRAPHY ************************* *******************************************/ /******************************************/ [data-v-d18e021e]:root { --breakXs: 0; --breakSm: 576px; --breakMd: 768px; --breakLg: 992px; --breakXl: 1200px; } [data-v-d18e021e]:root { --xs: 0; --sm: 576px; --md: 768px; --lg: 992px; --xl: 1200px; --sm_dn: 575px; --md_dn: 767px; --lg_dn: 991px; --xl_dn: 1199px; --homeFooter: 1345px; --fill-darkGray: #353535; --fill-lightGray: #e7e7e7; --fill-blue: #0056ac; } /* * Call the color palette modifiers for scss usage * USAGE (scss): div { color: palette(gray,500); background-color: palette(gray,50); border: 1px solid palette(gray,900); } */ /* create a fluid property value that adjusts from $min to $max, based on screen size (default $minWidth and $maxWidth in the _variables.scss) example: h1 { @include fluid(font-size, 2rem, 3rem); @include fluid(margin-bottom, 20px, 30px); @include fluid(padding-left, 0.5rem, 5rem, 900px, 1200px); } */ .hideVisually[data-v-d18e021e] { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; -webkit-clip-path: inset(50%); clip-path: inset(50%); border: 0; } /******************************************* ******* GLOBAL OVERRIDES ******************* **** You can reassign these global ********* **** defaults by un-commenting the ********* **** variables below & giving them ********* **** new values. The comments show ********* **** the default values. ********* *******************************************/ /******************************************/ /******************************************* ******* BRAND/GLOBAL COLORS **************** *******************************************/ /* * Standard error/warning/success */ /* * Populate the map below with the brand colors you entered above gray in map for shades * Helper classes are being generated by this sass map in styles/scss/base/_helpers.scss * as well as populating in pug/styleguide.pug * USAGE (scss): div { color: palette(gray,500); background-color: palette(gray,50); border: 1px solid palette(gray,900); } */ /******************************************/ /******************************************/ /******************************************* ******* COMPOSITION BACKGROUNDS ************ **** Any colors included in this ********* **** map will have composition ********* **** fill classes automatically ********* **** generated. ********* **** EX. .composition--fill-blue ********* *******************************************/ /******************************************/ /******************************************* ******* TYPOGRAPHY ************************* *******************************************/ /******************************************/ [data-v-d18e021e]:root { --breakXs: 0; --breakSm: 576px; --breakMd: 768px; --breakLg: 992px; --breakXl: 1200px; } /* FLUID FONT SIZE ========================================================================== */ /* SASS: .card { background-color:$white; @include modifier(--red) { background-color:red; } COMPILED CSS: .card { background-color:#fff; } .p-card--red .card, .card--red { background-color: red; } */ .hideVisually[data-v-d18e021e] { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; -webkit-clip-path: inset(50%); clip-path: inset(50%); border: 0; } .exp_header[data-v-d18e021e] { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; padding: 2rem 1rem 1rem; -webkit-box-align: end; -ms-flex-align: end; align-items: flex-end; margin: 0; width: 100%; } @media (min-width: 991px) { .exp_header[data-v-d18e021e] { padding: 3rem 2.5rem 0; } } .exp_month[data-v-d18e021e] { display: -webkit-box; display: -ms-flexbox; display: flex; font-weight: 700; margin: 0; margin-right: 1ex; -webkit-box-align: end; -ms-flex-align: end; align-items: flex-end; line-height: 1; } .exp_month[data-v-d18e021e] { font-size: 22px; } @media screen and (min-width: 768px) { .exp_month[data-v-d18e021e] { font-size: calc(22px + 26 * ((100vw - 768px) / 332)); } } @media screen and (min-width: 1100px) { .exp_month[data-v-d18e021e] { font-size: 48px; } } .exp_year[data-v-d18e021e] { font-weight: 300; margin: 0; } .exp_year[data-v-d18e021e] { font-size: 16px; } @media screen and (min-width: 768px) { .exp_year[data-v-d18e021e] { font-size: calc(16px + 12 * ((100vw - 768px) / 332)); } } @media screen and (min-width: 1100px) { .exp_year[data-v-d18e021e] { font-size: 28px; } } .exp_nav[data-v-d18e021e] { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; border-radius: 0; background: none; border: none; outline: none; -webkit-appearance: none; -moz-appearance: none; appearance: none; padding: 0.25rem; margin: 0 auto; font-size: 0; line-height: 1; text-transform: uppercase; color: #2b8274; -webkit-transition: color 0.25s ease; transition: color 0.25s ease; font-weight: 700; } @media (min-width: 768px) { .exp_nav[data-v-d18e021e] { font-size: 0.6875rem; } } @media (min-width: 991px) { .exp_nav[data-v-d18e021e] { font-size: 0.875rem; } } .exp_nav[data-v-d18e021e]:focus, .exp_nav[data-v-d18e021e]:hover { outline: none; color: #8cc53f; } .exp_nav[data-v-d18e021e]::before { content: ""; height: 0.75rem; width: 0.75rem; min-height: 0.75rem; min-width: 0.75rem; border-left: 2px solid currentColor; border-bottom: 2px solid currentColor; -webkit-transform: rotate(45deg); transform: rotate(45deg); -webkit-box-ordinal-group: -1; -ms-flex-order: -2; order: -2; } .exp_nav[data-v-d18e021e]::after { content: ""; -webkit-box-ordinal-group: 0; -ms-flex-order: -1; order: -1; height: 2px; width: 0.75rem; min-height: 2px; min-width: 0.75rem; background: currentColor; margin-left: -0.75rem; margin-right: 0.75rem; } .exp_nav--prev[data-v-d18e021e] { margin-left: 0; } .exp_nav--next[data-v-d18e021e] { margin-right: 0; } .exp_nav--next[data-v-d18e021e]::before { -webkit-transform: rotate(-135deg); transform: rotate(-135deg); -webkit-box-ordinal-group: 3; -ms-flex-order: 2; order: 2; } .exp_nav--next[data-v-d18e021e]::after { -webkit-box-ordinal-group: 2; -ms-flex-order: 1; order: 1; margin-left: 0.75rem; margin-right: -0.75rem; } .exp_nav[disabled][data-v-d18e021e], .exp_nav[data-v-d18e021e] :disabled { visibility: hidden; }/******************************************* ******* GLOBAL OVERRIDES ******************* **** You can reassign these global ********* **** defaults by un-commenting the ********* **** variables below & giving them ********* **** new values. The comments show ********* **** the default values. ********* *******************************************/ /******************************************/ /******************************************* ******* BRAND/GLOBAL COLORS **************** *******************************************/ /* * Standard error/warning/success */ /* * Populate the map below with the brand colors you entered above gray in map for shades * Helper classes are being generated by this sass map in styles/scss/base/_helpers.scss * as well as populating in pug/styleguide.pug * USAGE (scss): div { color: palette(gray,500); background-color: palette(gray,50); border: 1px solid palette(gray,900); } */ /******************************************/ /******************************************/ /******************************************* ******* COMPOSITION BACKGROUNDS ************ **** Any colors included in this ********* **** map will have composition ********* **** fill classes automatically ********* **** generated. ********* **** EX. .composition--fill-blue ********* *******************************************/ /******************************************/ /******************************************* ******* TYPOGRAPHY ************************* *******************************************/ /******************************************/ [data-v-4f3c84fe]:root { --breakXs: 0; --breakSm: 576px; --breakMd: 768px; --breakLg: 992px; --breakXl: 1200px; } [data-v-4f3c84fe]:root { --xs: 0; --sm: 576px; --md: 768px; --lg: 992px; --xl: 1200px; --sm_dn: 575px; --md_dn: 767px; --lg_dn: 991px; --xl_dn: 1199px; --homeFooter: 1345px; --fill-darkGray: #353535; --fill-lightGray: #e7e7e7; --fill-blue: #0056ac; } /* * Call the color palette modifiers for scss usage * USAGE (scss): div { color: palette(gray,500); background-color: palette(gray,50); border: 1px solid palette(gray,900); } */ /* create a fluid property value that adjusts from $min to $max, based on screen size (default $minWidth and $maxWidth in the _variables.scss) example: h1 { @include fluid(font-size, 2rem, 3rem); @include fluid(margin-bottom, 20px, 30px); @include fluid(padding-left, 0.5rem, 5rem, 900px, 1200px); } */ .hideVisually[data-v-4f3c84fe] { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; -webkit-clip-path: inset(50%); clip-path: inset(50%); border: 0; } /******************************************* ******* GLOBAL OVERRIDES ******************* **** You can reassign these global ********* **** defaults by un-commenting the ********* **** variables below & giving them ********* **** new values. The comments show ********* **** the default values. ********* *******************************************/ /******************************************/ /******************************************* ******* BRAND/GLOBAL COLORS **************** *******************************************/ /* * Standard error/warning/success */ /* * Populate the map below with the brand colors you entered above gray in map for shades * Helper classes are being generated by this sass map in styles/scss/base/_helpers.scss * as well as populating in pug/styleguide.pug * USAGE (scss): div { color: palette(gray,500); background-color: palette(gray,50); border: 1px solid palette(gray,900); } */ /******************************************/ /******************************************/ /******************************************* ******* COMPOSITION BACKGROUNDS ************ **** Any colors included in this ********* **** map will have composition ********* **** fill classes automatically ********* **** generated. ********* **** EX. .composition--fill-blue ********* *******************************************/ /******************************************/ /******************************************* ******* TYPOGRAPHY ************************* *******************************************/ /******************************************/ [data-v-4f3c84fe]:root { --breakXs: 0; --breakSm: 576px; --breakMd: 768px; --breakLg: 992px; --breakXl: 1200px; } /* FLUID FONT SIZE ========================================================================== */ /* SASS: .card { background-color:$white; @include modifier(--red) { background-color:red; } COMPILED CSS: .card { background-color:#fff; } .p-card--red .card, .card--red { background-color: red; } */ .hideVisually[data-v-4f3c84fe] { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; -webkit-clip-path: inset(50%); clip-path: inset(50%); border: 0; } .exp_day[data-v-4f3c84fe] { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; grid-area: span 1/span 1; border: 1px solid #f2f2f2; background: #fff; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; padding: 0.5rem; font-size: 0.875rem; -webkit-box-shadow: inset 0 0 0 0.125rem transparent; box-shadow: inset 0 0 0 0.125rem transparent; -webkit-transition: 0.25s ease; transition: 0.25s ease; } .exp_day[data-v-4f3c84fe]:focus, .exp_day.is-active[data-v-4f3c84fe] { -webkit-box-shadow: inset 0 0 0 0.125rem #353535; box-shadow: inset 0 0 0 0.125rem #353535; border-color: #353535; outline: none; } @media (min-width: 991px) { .exp_day[data-v-4f3c84fe] { min-height: 100px; } .exp_day[tabindex][data-v-4f3c84fe] { cursor: pointer; } .exp_day[tabindex][data-v-4f3c84fe]:hover { border-color: #353535; } } .exp_day.is-prev[data-v-4f3c84fe], .exp_day.is-next[data-v-4f3c84fe] { background: #f2f2f2; } .exp_day.is-today .exp_date[data-v-4f3c84fe] { color: #2b8274; } .exp_day.is-holiday.is-hatched[data-v-4f3c84fe] { background-color: #fff; background-image: repeating-linear-gradient(45deg, transparent 0, transparent 0.5rem, #f7f7f7 0, #f7f7f7 1rem); background-size: 100% 100%; background-repeat: no-repeat; } .exp_date[data-v-4f3c84fe] { font-weight: 700; padding: 0.5rem; margin: -0.5rem -0.5rem 0.5rem; } .exp_date[data-v-4f3c84fe]:only-child { margin-bottom: -0.5rem; } @media (min-width: 991px) { .exp_date[data-v-4f3c84fe]:only-child { margin-bottom: 0.5rem; } } .exp_holiday[data-v-4f3c84fe] { margin: 0 0 0.5rem; font-size: 0.75rem; } .exp_labels[data-v-4f3c84fe] { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; margin: auto -0.125rem 0.25rem; } .exp_label[data-v-4f3c84fe] { margin: 0 0.125rem 0.25rem; -webkit-box-flex: 0; -ms-flex: 0 0 25px; flex: 0 0 25px; }