:root{ /** FONT FAMILY **********************************************/ --font-family-1:'Noto Sans',Arial,sans-serif; --font-family-2:Arial,sans-serif; --font-family-3:Arial,sans-serif; /** FONT SIZES **********************************************/ --font-size-1:.667rem; /* 12px */ --font-size-2:.778rem; /* 14px */ --font-size-3:.889rem; /* 16px */ --font-size-4:1rem; /* 18px */ --font-size-5:1.167rem; /* 21px */ --font-size-6:1.333rem; /* 24px */ --font-size-7:1.611rem; /* 29px */ --font-size-8:2.111rem; /* 38px */ --font-size-9:2.667rem; /* 48px */ --font-size-10:3.333rem; /* 60px */ --font-size-base:16px; /* dont list in "Style buliding blocks", used on element to set base */ /** FONT WEIGHT **********************************************/ --font-weight-1:300; --font-weight-2:400; --font-weight-3:600; --font-weight-4:700; --font-weight-5:800; /** LINE HEIGHT **********************************************/ --line-height-1:.667rem; /* 12px */ --line-height-2:.778rem; /* 14px */ --line-height-3:.889rem; /* 16px */ --line-height-4:1rem; /* 18px */ --line-height-5:1.167rem; /* 21px */ --line-height-6:1.333rem; /* 24px */ --line-height-7:1.611rem; /* 29px */ --line-height-8:2.111rem; /* 38px */ --line-height-9:2.667rem; /* 48px */ --line-height-10:3.333rem; /* 60px */ /** LETTER SPACING **********************************************/ --letter-spacing-1:0.5px; --letter-spacing-2:0.6px; --letter-spacing-3:0.7px; --letter-spacing-4:0.8px; --letter-spacing-5:0.9px; --letter-spacing-6:1.0px; --letter-spacing-7:1.1px; --letter-spacing-8:1.2px; --letter-spacing-9:1.3px; --letter-spacing-10:1.4px; --letter-spacing-11:1.5px; /** ABSOLUTE POSITION SIZE *******************************************/ --absolute-position-size-1:-40px; --absolute-position-size-2:-25px; --absolute-position-size-3:-10px; --absolute-position-size-4:-5px; --absolute-position-size-5:0; --absolute-position-size-6:5px; --absolute-position-size-7:10px; --absolute-position-size-8:15px; --absolute-position-size-9:25px; --absolute-position-size-10:40px; /** SIZES: Padding/Margin/Gaps ***********************************/ --size-1: 10px; /* .7rem */ --size-2: 15px; /* .8rem */ --size-3: 20px; /* 1rem */ --size-4: 25px; /* 1.2rem */ --size-5: 30px; /* 1.5rem */ --size-6: 40px; /* 2rem */ --size-7: 60px; /* 3rem */ --size-8: 80px; /* 4rem */ --button-padding: var(--size-2) var(--size-5); /** BORDER RADIUS *******************************************/ --radius-size-1:5px; --radius-size-2:20px; --radius-size-3:27px; --radius-size-4:36px; --radius-size-5:45px; /** BORDER SIZE ************************************/ --border-size-1:1px; --border-size-2:2px; --border-size-3:3px; --border-size-4:5px; --border-size-5:8px; /** SITE WIDTH - Min/Max-Width ***********************************/ /* YUI compressor bug minifies "..2) + 50.." down to "..2)+50.." which breaks browser calc, use double negatives as temp fix */ --site-width-gutter:15px; --site-width-size-1:calc((var(--site-width-gutter) * 2) - -500px); --site-width-size-2:calc((var(--site-width-gutter) * 2) - -700px); --site-width-size-3:calc((var(--site-width-gutter) * 2) - -900px); --site-width-size-4:calc((var(--site-width-gutter) * 2) - -1100px); --site-width-size-5:calc((var(--site-width-gutter) * 2) - -1400px); /** COLUMN LAYOUT **********************************************/ --container-col-count:12; --item-col-count:var(--container-col-count); --gap-size:var(--size-5); /** COLORS **************************************************/ /** Brand Colors - Semantic Tokens **/ --color-brand-primary: var(--color-blue-4); /* Main brand color for high emphasis elements */ --color-brand-secondary: var(--color-blue-3); /* Secondary brand color for less prominent elements */ --color-brand-accent: var(--color-teal-3); /* Highlights, CTAs, badges */ --color-brand-surface: var(--color-blue-1); /* Background surfaces, cards, panels */ --color-brand-border: var(--color-blue-6); /* Default border color */ /** Color Palettes - Primitive Tokens **/ /** Cyan **/ --color-cyan-1: #F0FAFC;/** Lagoon (10%) **/ --color-cyan-2: #B2E5F0;/** Lagoon (50%) **/ --color-cyan-3: #66CBE1;/** Lagoon **/ --color-cyan-4: #387A89;/** Lagoon (AA) **/ --color-cyan-5: #1C4A54;/** Lagoon (AAA) **/ /** Blue **/ --color-blue-1: #F1F6FB;/** Glacier Blue (50%) **/ --color-blue-2: #9CC7E6;/** Snowmelt Blue **/ --color-blue-3: #2167AE;/** Zurich Blue **/ --color-blue-4: #003D6E;/** Travel Guard Navy **/ --color-blue-5: #302261;/** Night Sky **/ --color-blue-6: #E4EDF8;/** Glacier Blue **/ --color-blue-7: #0E4E88;/** Zurich Blue (Dark) **/ /** Yellow **/ --color-yellow-1: #F8F6C1;/** Morning Yellow **/ --color-yellow-2: #F3E862;/** Sunflare **/ --color-yellow-3: #FFC709;/** Amber **/ --color-yellow-4: #FBA819;/** Amber (AA) **/ --color-yellow-5: #B2641D;/** Amber (AAA) **/ /** Orange **/ --color-orange-1: #FAECE9;/** Terracotta (10%) **/ --color-orange-2: #E69E93;/** Terracotta (50%) **/ --color-orange-3: #CE3D27;/** Terracotta **/ --color-orange-4: #9F2F1E;/** Terracotta (AA) **/ --color-orange-5: #852819;/** Terracotta (AAA) **/ /** Green **/ --color-green-1: #F9FCF5;/** Jungle (25%) **/ --color-green-2: #D2E7B4;/** Jungle (50%) **/ --color-green-3: #A5D069;/** Jungle **/ --color-green-4: #437A1F;/** Jungle (AA) **/ --color-green-5: #2B640C;/** Jungle (AAA) **/ /** Red **/ --color-red-1: #FBEEF3;/** Watermelon (10%) **/ --color-red-2: #EDACC4;/** Watermelon (50%) **/ --color-red-3: #DB5989;/** Watermelon **/ --color-red-4: #C53058;/** Watermelon (AA) **/ --color-red-5: #AF0827;/** Watermelon (AAA) **/ /** Purple **/ --color-purple-1: #F5F0F7;/** Lavender Mist (50%) **/ --color-purple-2: #F3EDF5;/** Soft Lavender **/ --color-purple-3: #D6C4E0;/** Lavender Mist **/ --color-purple-4: #726394;/** Lavender Mist (Dark) **/ --color-purple-5: #302261;/** Night Sky **/ /** Teal **/ --color-teal-1: #E8F6F5;/** Seafoam (50%) **/ --color-teal-2: #D6E6E2;/** Morning Dew **/ --color-teal-3: #64C5B9;/** Seafoam **/ --color-teal-4: #32928E;/** Seafoam (Dark) **/ --color-teal-5: #005F62;/** Deep Sea Green **/ /** gray-Neutral **/ --color-gray-1: #E8E9EA;/** Midnight (10%) **/ --color-gray-2: #C6C8CB;/** Midnight (25%) **/ --color-gray-3: #A4A8AB;/** Midnight (40%) **/ --color-gray-4: #8D9296;/** Midnight (50%) **/ --color-gray-5: #555B62;/** Midnight (75%) **/ --color-gray-6: #333B43;/** Midnight (90%) **/ --color-gray-7: #1C252E;/** Midnight **/ /** gray-Warm **/ --color-gray-warm-1: #FAF9F7;/** Sand **/ --color-gray-warm-2: #FAF9F7;/** Sand **/ --color-gray-warm-3: #FAF9F7;/** Sand **/ --color-gray-warm-4: #EDE8DE;/** Warm Gray 75% **/ --color-gray-warm-5: #EDE8DE;/** Warm Gray **/ --color-grey-warm-6: #B6A99B;/** Stone **/ --color-gray-warm-7: #B6A99B;/** Stone **/ /** gray-Blue **/ --color-gray-blue-1: #F1F6FB;/** Light Steel 15% **/ --color-gray-blue-2: #F1F6FB;/** Lightest Steel **/ --color-gray-blue-3: #F1F6FB;/** Light Steel 50% **/ --color-gray-blue-4: #F1F6FB;/** Light Steel **/ --color-gray-blue-5: #F1F6FB;/** Steel **/ --color-gray-blue-6: #809EB6;/** Dark Steel **/ --color-gray-blue-7: #809EB6;/** Midnight **/ /** informational colors **/ --color-error-1: #FFEAEE; --color-error-2: #F39897; --color-error-3: #F54C4A; --color-error-4: #EB2D2D; --color-error-5: #BE0012; --color-warning-1: #FFFAEB; --color-warning-2: #FEDF89; --color-warning-3: #F79009; --color-warning-4: #DC6803; --color-warning-5: #7A2E0E; --color-success-1: #ECFDF3; --color-success-2: #A6F4C5; --color-success-3: #32D583; --color-success-4: #039855; --color-success-5: #054F31; /** Misc **/ --color-black-5: #000;/** pure black **/ --color-white-1: #fff;/** pure white **/ --color-transparent: transparent;/** Transparent **/ /** DROP SHADOW COLORS **************************************************/ --color-drop-shadow-gray-1: #7F7F7F1A;/* Gray @10% */ --color-drop-shadow-gray-2: #7F7F7F4D;/* Gray @30% */ --color-drop-shadow-gray-3: #7F7F7FCC;/* Gray @80% */ --color-drop-shadow-black-1: #0000001A;/* Black @10% */ --color-drop-shadow-black-2: #0000004D;/* Black @30% */ --color-drop-shadow-black-3: #000000CC;/* Black @80% */ --color-drop-shadow-white-1: #ffffff80;/* White @50% */ --color-drop-shadow-white-2: #ffffffB3;/* White @70% */ --color-drop-shadow-white-3: #ffffffE6;/* White @90% */ --color-drop-shadow-brand1-1: #1352de1A;/* Blue-3 @10% */ --color-drop-shadow-brand1-2: #1352de4D;/* Blue-3 @30% */ --color-drop-shadow-brand1-3: #1352deCC;/* Blue-3 @80% */ --color-drop-shadow-brand2-1: #0018711A;/* Blue-4 @10% */ --color-drop-shadow-brand2-2: #0018714D;/* Blue-4 @30% */ --color-drop-shadow-brand2-3: #001871CC;/* Blue-4 @80% */ /** TEXT SHADOW COLORS **************************************************/ --color-text-shadow-black-1: #0000004D;/* Black @30% */ --color-text-shadow-black-2: #000000CC;/* Black @80% */ --color-text-shadow-white-1: #ffffffCC;/* White @80% */ --color-text-shadow-brand1-1: #1352de4D;/* Blue-3 @30% */ --color-text-shadow-brand1-2: #1352de80;/* Blue-3 @50% */ --color-text-shadow-brand2-1: #0018714D;/* Blue-4 @30% */ --color-text-shadow-brand2-2: #001871CC;/* Blue-4 @80% */ /** TEXT GRADIENT COLORS **************************************************/ --color-gradient-black-1: linear-gradient(to right, rgba(0,0,0,0.8) 0%,rgba(0,0,0,0) 100%);/* 80% Black to Transparent, L to R */ --color-gradient-black-2: linear-gradient(to right, rgba(0,0,0,0.4) 0%,rgba(0,0,0,0) 100%);/* 40% Black to Transparent, L to R */ --color-gradient-black-3: linear-gradient(to bottom, rgba(0,0,0,0.8) 0%,rgba(0,0,0,0) 100%);/* 80% Black to Transparent, T to B */ --color-gradient-black-4: linear-gradient(to bottom, rgba(20,0,0,0.4) 0%,rgba(0,0,0,0) 100%);/* 40% Black to Transparent, T to B */ --color-gradient-white-1: linear-gradient(to right, rgba(255,255,255,0.8) 0%,rgba(255,255,255,0) 100%);/* 80% White to Transparent, L to R */ --color-gradient-white-2: linear-gradient(to right, rgba(255,255,255,0.4) 0%,rgba(255,255,255,0) 100%);/* 40% White to Transparent, L to R */ --color-gradient-white-3: linear-gradient(to bottom, rgba(255,255,255,0.8) 0%,rgba(255,255,255,0) 100%);/* 80% White to Transparent, T to B */ --color-gradient-white-4: linear-gradient(to bottom, rgba(255,255,255,0.4) 0%,rgba(255,255,255,0) 100%);/* 40% White to Transparent, T to B */ --color-gradient-brand-1: linear-gradient(180deg, #003D6E 0%, #0076BE 100%);/* Deep Sky */ --color-gradient-brand-2: linear-gradient(180deg, #66CBE1 0%, #64C5B9 100%);/* Tropics */ --color-gradient-brand-3: linear-gradient(180deg, #F15F40 0%, #FFC709 100%);/* Golden Hour */ --color-gradient-brand-4: linear-gradient(180deg, #003D6E 0%, #DB5989 100%);/* Dusk */ --color-gradient-brand-5: linear-gradient(180deg, #005F62 0%, #A5D069 100%);/* Woodland */ --color-gradient-brand-6: linear-gradient(to right, rgba(99,219,244,0.4) 0%,rgba(250,251,255,0) 100%);/* 40% Blue-1 to Transparent, L to R */ --color-gradient-brand-7: linear-gradient(to bottom, rgba(99,219,244,1) 0%,rgba(250,251,255,0) 100%);/* 100% Blue-1 to Transparent, T to B */ --color-gradient-brand-8: linear-gradient(to bottom, rgba(99,219,244,0.4) 0%,rgba(250,251,255,0) 100%);/* 40% Blue-1 to Transparent, T to B */ /** CSS filter COLORS **************************************************/ --color-filter-cyan-4: brightness(0) saturate(100%) invert(45%) sepia(26%) saturate(6384%) hue-rotate(169deg) brightness(103%) contrast(101%);/** Cyan **/ --color-filter-blue-1: brightness(0) saturate(100%) invert(83%) sepia(20%) saturate(299%) hue-rotate(177deg) brightness(102%) contrast(91%);/** Pale Blue **/ --color-filter-blue-2: brightness(0) saturate(100%) invert(71%) sepia(15%) saturate(916%) hue-rotate(186deg) brightness(102%) contrast(90%);/** Pale Cobalt (Custom 60%) **/ --color-filter-blue-3: brightness(0) saturate(100%) invert(40%) sepia(93%) saturate(5637%) hue-rotate(218deg) brightness(85%) contrast(104%);/** Cobalt **/ --color-filter-blue-4: brightness(0) saturate(100%) invert(10%) sepia(62%) saturate(4768%) hue-rotate(225deg) brightness(85%) contrast(113%);/** Core **/ --color-filter-blue-5: brightness(0) saturate(100%) invert(9%) sepia(82%) saturate(2658%) hue-rotate(219deg) brightness(84%) contrast(114%);/** Dark Blue (Custom 30%) **/ --color-filter-red-4: brightness(0) saturate(100%) invert(28%) sepia(88%) saturate(7445%) hue-rotate(340deg) brightness(95%) contrast(91%);/** Red **/ --color-filter-yellow-4: brightness(0) saturate(100%) invert(96%) sepia(10%) saturate(6184%) hue-rotate(324deg) brightness(101%) contrast(101%);/** Yellow **/ --color-filter-orange-4: brightness(0) saturate(100%) invert(60%) sepia(57%) saturate(3934%) hue-rotate(359deg) brightness(101%) contrast(105%);/** Orange **/ --color-filter-green-4: brightness(0) saturate(100%) invert(59%) sepia(26%) saturate(6862%) hue-rotate(119deg) brightness(95%) contrast(101%);/** Green **/ --color-filter-purple-4: brightness(0) saturate(100%) invert(68%) sepia(84%) saturate(6813%) hue-rotate(248deg) brightness(90%) contrast(87%);/** Purple **/ --color-filter-teal-4: brightness(0) saturate(100%) invert(47%) sepia(96%) saturate(585%) hue-rotate(133deg) brightness(98%) contrast(101%);/** Teal **/ --color-filter-gray-7: brightness(0) saturate(100%) invert(19%) sepia(12%) saturate(709%) hue-rotate(188deg) brightness(96%) contrast(89%);/** Dark Gray**/ --color-filter-white-1: brightness(0) saturate(100%) invert(100%) sepia(7%) saturate(28%) hue-rotate(342deg) brightness(109%) contrast(108%);/** pure white **/ --color-filter-black-5: brightness(0) saturate(100%) invert(0%) sepia(89%) saturate(45%) hue-rotate(126deg) brightness(90%) contrast(100%);/** pure black **/ /** Progress Navigation Step Size **************************************************/ --step-size: 36px; } /** VARIABLE FONTS **********************************************/ @font-face { font-family: 'Noto Sans'; font-style: normal; font-weight: 100 900; src: url(/content/dam/config/branding-stylesheets/travelguard-branding/fonts/noto-sans/NotoSans-VariableFont_wdth,wght.ttf) format('truetype-variations'); } @font-face { font-family: 'Noto Sans'; font-style: italic; font-weight: 100 900; src: url(/content/dam/config/branding-stylesheets/travelguard-branding/fonts/noto-sans/NotoSans-Italic-VariableFont_wdth,wght.ttf) format('truetype-variations'); } /** BASE STYLES **********************************************/ html{ font-size:var(--font-size-base); font-family:var(--font-family-1); color:var(--color-gray-6); line-height:1.4; font-weight:var(--font-weight-2); letter-spacing:normal; height:100%;/* full site height fix */ scroll-behavior:smooth; } body{ font-size:inherit; font-family:inherit; color:var(--color-gray-7); line-height:1.4; font-weight:var(--font-weight-2); letter-spacing:normal; height:100%; } /** **********************************************/ h1,h2,h3,h4,h5,h6{ color:var(--color-blue-4); font-weight:var(--font-weight-3); margin:0 0 var(--size-4) 0; padding:0; line-height:1.3; } h1{ font-size:var(--font-size-8); line-height:1.25; text-align:center; } h2{ font-size:var(--font-size-7); line-height:1.25; } @media screen and (min-width:576px){ h1{font-size:var(--font-size-9);} h2{font-size:var(--font-size-8);} } h3{ font-size:var(--font-size-7); line-height:1.25; } h4{font-size:var(--font-size-6);} h5{font-size:var(--font-size-5);} h6{font-size:var(--font-size-3);} /** **********************************************/ sup,sub{ font-size:.7em; } h1 sup,h2 sup,h3 sup,h4 sup,h5 sup,h6 sup,h1 sub,h2 sub,h3 sub,h4 sub,h5 sub,h6 sub{ font-size:.55em; } /** **********************************************/ a{ color:var(--color-blue-7); text-decoration:underline; word-break:break-word; } a:hover{ color:var(--color-blue-3); text-decoration:none; } a:focus,button:focus{ color:var(--color-blue-3); text-decoration:none; outline:2px solid var(--color-purple-4); outline-offset:2px; border-radius:var(--radius-size-1); } button{ cursor:pointer; font-family:inherit/* fixes odd bug w being overwritten by browser agentstylesheet */; } a,button{ transition:background-color .3s ease-in; } /* Base Button Styles - Normal */ .btn-primary button, .btn-primary > a{ background-color: var(--color-brand-primary); display: inline-block; text-decoration: none; color: var(--color-white-1); font-size: var(--font-size-3); font-weight: var(--font-weight-3); padding: var(--button-padding); border-radius: var(--radius-size-3); border: none; cursor: pointer; &:hover { background-color: var(--color-brand-secondary); } } .btn-secondary button, .btn-secondary > a{ background-color: var(--color-teal-3); display: inline-block; text-decoration: none; font-weight: var(--font-weight-3); color: var(--color-blue-4); font-size: var(--font-size-3); padding: var(--button-padding); border-radius: var(--radius-size-3); border: none; cursor: pointer; &:hover { background-color: var(--color-cyan-2); } } .btn-tertiary button, .btn-tertiary > a{ background-color: var(--color-white-1); display: inline-block; color: var(--color-brand-primary); font-size: var(--font-size-3); text-decoration: none; font-weight: var(--font-weight-3); padding: var(--button-padding); border: 1px solid var(--color-brand-primary); border-radius: var(--radius-size-3); cursor: pointer; &:hover { color: var(--color-brand-secondary); border-color: var(--color-brand-secondary); } } /* Base Button Styles - Inverse */ .btn-primary-inverse button, .btn-primary-inverse > a{ background-color: var(--color-white-1); display: inline-block; text-decoration: none; color: var(--color-brand-primary); font-size: var(--font-size-3); font-weight: var(--font-weight-3); padding: var(--button-padding); border-radius: var(--radius-size-3); border: none; cursor: pointer; &:hover { background-color: var(--color-blue-2); } } .btn-secondary-inverse button, .btn-secondary-inverse > a{ background-color: var(--color-teal-3); display: inline-block; text-decoration: none; font-weight: var(--font-weight-3); color: var(--color-blue-4); font-size: var(--font-size-3); padding: var(--button-padding); border-radius: var(--radius-size-3); border: none; cursor: pointer; &:hover { background-color: var(--color-teal-1); } } .btn-tertiary-inverse button, .btn-tertiary-inverse > a{ background-color: var(--color-transparent); display: inline-block; color: var(--color-white-1); font-size: var(--font-size-3); text-decoration: none; font-weight: var(--font-weight-3); padding: var(--button-padding); border: 1px solid var(--color-white-1); border-radius: var(--radius-size-3); cursor: pointer; &:hover { color: var(--color-blue-2); border-color: var(--color-blue-2); } } .btn-disabled button, .btn-disabled > a { background-color: var(--color-gray-1); display: inline-block; text-decoration: none; color: var(--color-gray-4); font-size: var(--font-size-3); font-weight: var(--font-weight-3); padding: var(--button-padding); border-radius: var(--radius-size-3); border: none; cursor: pointer; &:hover { cursor: not-allowed; } } /** **********************************************/ /** note: use custom px for left/right declarations to keep list-item bullets consistent and not impacted by variable changes **/ p{ padding:0 0 var(--size-2) 0; margin:0; } ul,ol{ margin:0; padding:0; } ol{ padding:0 0 0 40px; } ul{ list-style:none; line-height:1.33; position:relative;/* bullet alignment */ } ol>li{ padding:0 0 var(--size-2) 9px; list-style:decimal;/* iOS fix */ } ol>li ol>li{ list-style:lower-alpha; } ul>li{ padding:0 0 var(--size-2) 50px; } ul>li:before{ content:'\2022';/* default circle icon */ color:var(--color-black-5); font-size:18px; font-weight:1000; display:inline-block; line-height:1; position:absolute; left:0; width:50px;/*set to get hinge bible 50px width*/ text-align:center; padding-left:13px;/*push to right to get hinge bible 15px right gutter space*/ } hr{ margin:var(--size-3) 0; border:0; border-top:1px solid var(--color-gray-1); } /** **********************************************/ blockquote{ padding:var(--size-1) var(--size-2) var(--size-1) var(--size-5); margin:0 0 var(--size-3); font-size:var(--font-size-8); border-left:var(--border-size-3) solid var(--color-blue-1); font-style:italic; font-weight:var(--font-weight-1); color:var(--color-blue-4); } byline{ padding:var(--size-2) 0 0 0; margin:0; font-size:var(--font-size-2); font-style:normal; font-weight:var(--font-weight-4); } /** **********************************************/ .ui-widget input,.ui-widget select,.ui-widget textarea,.ui-widget button,.ui-widget{ font-family:inherit; } input,select,textarea{ padding:var(--size-1) var(--size-2); margin:0; font-family:inherit;/* fixes odd bug w being overwritten by browser agentstylesheet */ font-size:var(--font-size-4); background-color:var(--color-white-1); border:1px solid var(--color-gray-6); color:var(--color-gray-7); line-height:1.6; border-radius:var(--radius-size-1); width:100%; } textarea{ min-height:200px; } select{ /* YUI compressor bug minifies spaces in inline svg call, use url_encode value of %20 as placeholder for space to fix */ -webkit-appearance: none; -moz-appearance: none; appearance:none; background:#fff url(/content/dam/config/branding-stylesheets/master/icons/down-angle.svg) no-repeat; background-size:15px; background-position:calc(100% - 20px) center; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; padding-right:37px; cursor:pointer; } input[type=submit], input[type=reset], input[type=checkbox], input[type=radio], input[type=file], input[type=image] {width:auto;} input::placeholder, select::placeholder, textarea::placeholder, select:invalid {color: color-mix(in srgb, var(--color-gray-4), black 20%); /* 20% darker */} input:-moz-placeholder, input::-moz-placeholder {opacity: 1;}/* fix for odd FF opacity setting */ input[type=number]::-webkit-outer-spin-button, input[type=number]::-webkit-inner-spin-button {/* hide up/down arrows in type=number inputs */ -webkit-appearance: none; margin: 0; } input[readonly],input[disabled]{color:var(--color-gray-7);} select[readonly],select[disabled]{color:var(--color-black-5);} .inputField{ width:-moz-available; width:-webkit-fill-available; width:fill-available; position:absolute; border:0; } .inputField:focus{border:0;} input[type=number]{-moz-appearance: textfield;}/* hide up/down arrows in type=number inputs */ select:focus option{ background:#fff; color:var(--color-gray-7); } input:focus,select:focus,textarea:focus{ border:1px solid var(--color-blue-3); background-color:var(--color-white-1); color:var(--color-gray-7); } label,.Tokenize .cmp-tokenize-frame label{ font-weight:var(--font-weight-4); font-size:var(--font-size-4); line-height:1.6; margin:0; color:var(--color-gray-7); display:inline-block; cursor:pointer; margin-bottom: 5px; } label p,legend p{ padding-bottom:0; } legend {width: 100%;}/*fix for display:block not default, float:right of content inside can't go far right otherwise */ /** TOKENIZE COMPONENT *****/ /** **********************************************/ /* customize tokenization component and base.less on per-brand basis */ .Tokenize .fldErr .iframe-element{ outline:1px solid var(--color-red-4); outline-offset:-1px; max-height:51px; background-color:var(--color-red-1); } .Tokenize .iframe-element,.Tokenize .fldErr .iframe-element{/* customize iframe height of tokenization component on per-brand basis */ max-height:48px; border-radius:var(--radius-size-1); } .Tokenize .iframe-element iframe{/* customize iframe height of tokenization component on per-brand basis */ max-height:51px; } .fldErr .customErr,.Tokenize .cmp-tokenize-frame .tokenErr,.fldErr .not_valid, .customErr{ padding: var(--size-1); font-size:var(--font-size-3); color: var(--color-error-5); margin-top: 10px; align-items: center; background: var(--color-error-1); border-radius: var(--radius-size-1); gap: var(--size-1); display: grid; grid-template-columns: 1.5rem 12fr; } .fldErr .customErr:before, .fldErr .not_valid:before, .customErr:before { width: 1.5rem; height: 1.5rem; background-size: contain; margin: 0; } .cmp-tokenize-frame .tokenErr:before{/* tokenize error msg */ content:''; width:22px; height:22px; margin-right: 5px; display:inline-block; background: transparent url('/content/dam/config/branding-stylesheets/master/icons/error-icon.svg') no-repeat; background-position:left 0 top; background-size: 22px; } .Tokenize .cmp-tokenize-frame .tokenErr p { margin: 0; padding: 0; } /** ****************************/ input[type=checkbox]{ margin:0 10px 0 0; -webkit-appearance:none; background-color:var(--color-white-1); border:1px solid var(--color-gray-6); padding:9px; border-radius:var(--radius-size-1); display:inline-block; position:relative; vertical-align:middle; cursor:pointer; } input[type=checkbox]:checked{ background-color:var(--color-blue-3); border:1px solid var(--color-blue-3); color:var(--color-white-1); } input[type=checkbox]:checked:after{ content:"\2714\fe0e";/* iOS does color properly '\2714' */ font-size:14px; position:absolute; top:-2px; left:3px; color:var(--color-white-1); } input[type=checkbox]:focus{ outline:1px solid var(--color-blue-3); outline-offset:2px; } .inputIsDisabled input[type=checkbox]:checked{ background:var(--color-gray-5); border-color:var(--color-gray-6); } .inputIsDisabled input[type=checkbox]:checked:after{ color:var(--color-white-1); } /** ****************************/ input[type=radio]{ margin:0 10px 0 0; -webkit-appearance:none; background-color:var(--color-white-1); border:1px solid var(--color-gray-6); padding:9px; border-radius:10px; display:inline-block; position:relative; vertical-align:middle; cursor:pointer; } input[type=radio]:checked{ background-color:var(--color-blue-3); border:1px solid var(--color-blue-3); color:var(--color-white-1); } input[type=radio]:checked:after{ content:' '; font-size:14px; position:absolute; top:0; left:0; border:2px solid #fff; border-radius:10px; height:100%; width:100%; } input[type=radio]:focus{ outline:1px solid var(--color-blue-3); outline-offset:2px; } .inputIsDisabled input[type=radio]:checked{ background:var(--color-gray-5); border-color:var(--color-gray-6); } .inputIsDisabled input[type=radio]:checked:after{ color:var(--color-white-1); } /** ****************************/ .inputIsDisabled label{ cursor:not-allowed; } input[readonly],input[disabled],select[readonly],select[disabled],input[readonly]:focus,input[disabled]:focus,select[readonly]:focus,select[disabled]:focus,input[readonly].datePickerIcon,input[disabled].datePickerIcon{ background-color:var(--color-gray-1); border-color:var(--color-gray-6); color:var(--color-gray-6); cursor:not-allowed !important; } /** ****************************/ .cmp-form-options.cmp-form-options--checkbox>legend,.cmp-form-options.cmp-form-options--radio>legend{ font-weight:var(--font-weight-4); font-size:var(--font-size-4); line-height:1.6; margin:0; padding:0 0 calc(var(--size-1) - 6px) 0; color:var(--color-gray-7); } .cmp-form-options.cmp-form-options--checkbox>label,.cmp-form-options.cmp-form-options--radio>label{ padding-left:36px;/* left alignment offset*/ font-weight:var(--font-weight-2); line-height:1; margin:0 var(--size-6) 0 0; } .cmp-form-options.cmp-form-options--checkbox>label>input,.cmp-form-options.cmp-form-options--radio>label>input{ margin-left: -36px;/* left alignment offset correction */ float: left;/* fix for random

in RTE of radio/checkboxes */ } /** **********************************************/ .text .cmp-form-text .rte-wrap{ display:inline-block; } /** **********************************************/ img{ max-width:100%; margin-bottom:-4px; } svg{ max-width:100%; } /** TEXT COMPONENT > RTE **********************************************/ .font-orange, .font-orange a{color: var(--color-orange-5);} .font-purple, .font-purple a{color: var(--color-purple-4);} .font-red, .font-red a{color: var(--color-red-4);} .font-green, .font-green a{color: var(--color-green-5);} .font-blue-medium, .font-blue-medium a{color: var(--color-blue-3);} .font-blue-dark, .font-blue-dark a{color: var(--color-blue-4);} .font-blue-darker, .font-blue-darker a{color: var(--color-blue-5);} .font-blue-op-cover, .font-blue-op-cover a{} /* ******** */ .font-white, .font-white a{color: var(--color-white-1);} .font-white a:focus{outline-color: var(--color-white-1);} .font-gray-light, .font-gray-light a{color: var(--color-gray-5);} .font-gray-medium, .font-gray-medium a{color: var(--color-gray-6);} .font-gray-dark, .font-gray-dark a{color: var(--color-gray-7);} .font-blue-cyan-medium, .font-blue-cyan-medium a{} /* ******** */ .font-blue-cyan-dark, .font-blue-cyan-dark a{color: var(--color-cyan-5);} .font-size-x-small, .font-size-x-small a{font-size: var(--font-size-2);} .font-size-small, .font-size-small a{font-size: var(--font-size-3);} .font-size-normal, .font-size-normal a{font-size: var(--font-size-4);} .font-size-large, .font-size-large a{font-size: var(--font-size-6);} .font-size-x-large, .font-size-x-large a{font-size: var(--font-size-7);} .font-size-xx-large, .font-size-xx-large a{font-size: var(--font-size-8);} .font-size-xxx-large, .font-size-xxx-large a{font-size: var(--font-size-9);} .font-weight-narrow{font-weight: var(--font-weight-1);} .font-weight-regular{font-weight: var(--font-weight-2);} .font-weight-semi-bold{font-weight: var(--font-weight-3);} .font-weight-bold{font-weight: var(--font-weight-4);} .font-float-right{float:right;} .font-float-left{float:left;} .doc_pdf{} .doc_excel{} .printer{} .envelope{} .link{} .word_doc{} .x-small{} .small{} .large{} .x-large{} .xx-large{} .xxx-large{} .xxxx-large{} .icon-dismiss{} .icon-dismiss:before{ border:1px solid var(--color-red-4); color:var(--color-red-4); font-weight: var(--font-weight-3); font-size: var(--font-size-2); } .icon-dismiss:hover:before{ background: var(--color-red-4); border-color: var(--color-red-4); } /** *ACCORDION STYLES *********************************************/ .cmp-accordion{ border-top:1px solid var(--color-blue-1); } .cmp-accordion__item{ padding:var(--size-5) 0; border-bottom:1px solid var(--color-blue-1); } .cmp-accordion .cmp-accordion__button{ font-size:var(--font-size-6); color:var(--color-blue-3); font-weight:var(--font-weight-3); } .accordion .cmp-accordion__button::before{ color:var(--color-blue-3); } /** *CUSTOM ACCORDION STYLES (old styles? managed services) *********************************************/ .cmp-customAccordion-panel .cmp-customAccordion-button{ background-color:var(--color-white-1); color:var(--color-black-1); font-weight:var(--font-weight-3); cursor:pointer; padding:var(--size-2) var(--size-3) var(--size-2) var(--size-3); width:100%; text-align:left; border:0; outline:0; transition:.4s; /*margin-top:var(--size-1);*/ border-bottom:1px solid var(--color-blue-1); } .cmp-customAccordion-panel .cmp-customAccordion-item{ padding:var(--size-3); background-color:var(--color-white-1); overflow:hidden; margin-top:2px; } .cmp-customAccordion-panel .cmp-customAccordion-button .circle{ border-radius:var(--radius-size-5); display:inline-block; margin-right:var(--size-2); width:34px; height:34px; padding:2px; background-color:var(--color-white-1); border:var(--border-size-2) solid var(--color-blue-4); color:var(--color-black-1); text-align:center; font-family:var(--font-family-3); font-size:var(--font-size-4); font-weight:var(--font-weight-3); } .cmp-customAccordion-panel .cmp-customAccordion-button .checkmark{ display:none; border-radius:var(--radius-size-5); margin-right:var(--size-2); width:34px; height:34px; padding:var(--absolute-position-size-6); background-color:var(--color-blue-4); color:var(--color-white-1); text-align:center; font-family:var(--font-family-3); font-size:var(--font-size-4); } .cmp-customAccordion-panel{ border:1px solid; border-color:var(--color-blue-1); margin-top:var(--size-1); border-radius:5px; } .cmp-customAccordion-panel .cmp-customAccordion-button label{ font-weight:var(--font-weight-3); font-size:var(--font-size-6); color:var(--color-blue-4); } /** *UTILITY NAV COMPONENT FIXES *********************************************/ div.utilityprimarynav.site-width-large .utilitybar,div.utilityprimarynav.site-width-large .logo-Nav .row,div.utilityprimarynav.site-width-large .primary_navigation{ max-width:var(--site-width-size-5) !important; margin:0 auto; padding:0 var(--site-width-gutter); width:100%;/* flex breaks this otherwise */ } /* Hamburger Menu */ div.logo-Nav div.menu_right button#nav-collapse-button { padding: 6px 10px; border: 0 !important; outline-color:var(--color-blue-3); } .logo-Nav .icon-bar {background-color: var(--color-blue-3) !important;} div.logo-Nav div.menu_right button#nav-collapse-button:focus {background-color:var(--color-blue-3);} div.logo-Nav div.menu_right button#nav-collapse-button:focus .icon-bar {background-color: #fff !important;} .navbar-toggle {margin: 8px 0;} /* Utility Nav */ .utility_nav {padding-bottom:4px;font-size: var(--font-size-1);} ul.leftnav-list li a, ul.rightnav-list li a{padding: 2px 3px 3px 3px;} div.utilityprimarynav .utilitybar .rightnav-list, div.utilityprimarynav .utilitybar .leftnav-list{overflow: initial;}/* fix outline cutoff */ .utility_nav img{vertical-align:middle;} .utilityprimarynav.utility-width-50 .utilitybar .left_Navbar{width:auto;flex-grow:0;}/* make sure right column grows */ .utilityprimarynav.utility-width-50 .utilitybar .right_Navbar{width:auto;flex-grow:1;} .utilityprimarynav.utility-width-50 .utilitybar a:focus{outline-color:var(--color-blue-3);} .navbar_logo-Nav .logo_left a:focus {outline: 2px solid var(--color-purple-4);}/* give tg logo purple outline on focus */ /* Primary Nav */ @media (min-width: 767px){ ul.nav.navbar-nav {display: flex; flex-wrap:wrap; justify-content:center;}/* center nav on 767-1184 */ .dropdown.primaryNavLinks {background: transparent !important;border-bottom:0 !important;text-align:center !important;} } @media (min-width: 1184px){ul.nav.navbar-nav {justify-content:normal;}}/* left align nav on 1184+ */ .dropdown.primaryNavLinks > a:focus { background-color: var(--color-blue-3) !important; outline-color:transparent !important; color:#fff !important; border-radius:0; text-decoration-color:#fff !important; } .dropdown.primaryNavLinks .dropdown-menu > li > a:focus {background: var(--color-blue-4) !important;} /* Secondary Nav */ .dropdown-menu li {border: none !important;} .primary_navigation .dropdown.primaryNavLinks > a:hover, .primary_navigation .dropdown.primaryNavLinks > a:focus, .primary_navigation .dropdown.primaryNavLinks.open > a{background-color: var(--color-blue-4) !important;color:#fff !important; border-radius: 0;} .dropdown.primaryNavLinks ul.dropdown-menu li {border-bottom:1px solid #fff !important;} .dropdown.primaryNavLinks ul.dropdown-menu li:last-of-type {border-bottom:none !important;} .dropdown.primaryNavLinks ul.dropdown-menu li > a:focus { outline-color:transparent !important; border-radius:0; } /* ************************************************** */ /* MAIN CTA - prevent CLShift */ #CTA_CLShift{min-height:285px;} /* ************************************************** */ /* NON US RESIDENT - country flag alignments */ #non_us_resident_links a img{margin-right:5px} /* ************************************************** */ /* CLAIMS - DOCUMENT UPLOAD COMPONENT */ .drop{ position:relative; -webkit-user-select:none; -moz-user-select:none; -ms-user-select:none; user-select:none; &:has(+.customErr) { border: 1px solid var(--color-error-4); } } .drop.open{ z-index:100; border:1px solid var(--color-blue-3); } .drop.open .inputField{ border:0; } .drop.open .drop-screen{ z-index:100; display:block; } .drop.open .drop-options{ border: 1px solid var(--color-gray-4); z-index:200; max-height:200px; border-radius: 0 0 var(--radius-size-1) var(--radius-size-1); box-shadow: 0 0 6px #d8d8d8; } .drop.open .drop-display{ z-index:200; } .drop select{ display:none; } .drop .drop-screen{ position:fixed; width:100%; height:100%; background:var(--color-black-1); top:0; left:0; opacity:0; display:none; z-index:1; } .drop{ border: 1px solid var(--color-gray-6); color: var(--color-gray-7); line-height: 1.6; border-radius: var(--radius-size-1); } .drop .drop-display{ position:relative; padding:0 20px 5px 5px; width:100%; background:var(--color-white-1); z-index:1; margin:0; font-size:var(--font-size-3); min-height:46px; display:flex; overflow:hidden; border-radius: var(--radius-size-1); } .drop .drop-display:hover:after{ opacity:.75; } .drop .drop-display:after{ position:absolute; right:var(--size-4); top:var(--size-4); font-size:var(--font-size-6); color:var(--color-black-1); } .drop .drop-display .item{ position:relative; display:inline-block; border:1px solid var(--color-blue-3); margin:5px 5px -5px 0; background-color:var(--color-blue-1); padding:0 var(--size-4) 0 var(--size-1); overflow:hidden; height:34px; line-height:32px; border-radius: var(--radius-size-1); } .drop .drop-display .item .btnclose{ color:var(--color-black-1); position:absolute; font-size:var(--font-size-1); right:9px; top:0; cursor:pointer; font-style:normal; font-weight:var(--font-weight-4); } .drop .drop-display .item .btnclose:hover{ opacity:.75; } .drop .drop-display .item.remove{ -webkit-animation:removeSelected .2s,hide 1s infinite; animation:removeSelected .2s,hide 1s infinite; -webkit-animation-delay:0,0.2s; animation-delay:0,0.2s; display:none; } .drop .drop-display .item.add{ -webkit-animation:addSelected .2s; animation:addSelected .2s; } .drop .drop-display .item.hide{ display:none; } .drop .drop-options{ background: var(--color-white-1); position:absolute; width:100%; max-height:0; overflow-y:auto; transition:all .25s linear; z-index:1; } .drop .drop-options a{ display:block; line-height:40px; padding:0 var(--size-3); color:#000; position:relative; max-height:50px; transition:all 1s; overflow:hidden; text-decoration:none; border-bottom:1px solid var(--color-gray-3); } .drop .drop-options a:hover{ background: var(--color-gray-1); cursor:pointer; } .drop .drop-options a:focus{ outline-offset:0; border:2px solid; outline:0; } .drop .drop-options a.remove{ -webkit-animation:removeOption .2s; animation:removeOption .2s; max-height:0; display:none; } .drop .drop-options a.add{ -webkit-animation:addOption .2s; animation:addOption .2s; } .drop .drop-options a.hide{ display:none; } #opt:focus{ border:2px solid deepskyblue; background-color:lightblue; } #optadd:focus{ border:2px solid deepskyblue; background-color:lightblue; } @-webkit-keyframes pop{ from{ -webkit-transform:scale(0); transform:scale(0); }to{ -webkit-transform:scale(1); transform:scale(1); } } @keyframes pop{ from{ -webkit-transform:scale(0); transform:scale(0); }to{ -webkit-transform:scale(1); transform:scale(1); } } @-webkit-keyframes removeOption{ from{ max-height:40px; }to{ max-height:0; } } @keyframes removeOption{ from{ max-height:40px; }to{ max-height:0; } } @-webkit-keyframes addOption{ from{ max-height:0; }to{ max-height:40px; } } @keyframes addOption{ from{ max-height:0; }to{ max-height:40px; } } @-webkit-keyframes removeSelected{ from{ -webkit-transform:scale(1); transform:scale(1); }to{ -webkit-transform:scale(0); transform:scale(0); } } @keyframes removeSelected{ from{ -webkit-transform:scale(1); transform:scale(1); }to{ -webkit-transform:scale(0); transform:scale(0); } } @-webkit-keyframes addSelected{ from{ -webkit-transform:scale(0); transform:scale(0); }to{ -webkit-transform:scale(1); transform:scale(1); } } @keyframes addSelected{ from{ -webkit-transform:scale(0); transform:scale(0); }to{ -webkit-transform:scale(1); transform:scale(1); } } @-webkit-keyframes hide{ from,to{ max-height:0; max-width:0; padding:0; margin:0; border-width:0; } } @keyframes hide{ from,to{ max-height:0; max-width:0; padding:0; margin:0; border-width:0; } } /* ************************************************** */ /* SCROLL TO TOP COMPONENT */ .cmp-scrollToTop .cmp-scroll-btn{ position:fixed; display:none; bottom:20px; right:30px; height:auto; width:auto; text-align:center; opacity:1; padding:18px 8px 6px 8px; } .cmp-scrollToTop .cmp-scroll-btn:focus{ outline:0; border-radius:0; } .cmp-scrollToTop .cmp-scroll-btn img{ vertical-align:middle; width:20px; height:10px; color:#fff; position:absolute; top:6px; left:50%; transform:translate(-50%,0); } /* ************************************************** */ /* SEARCH CUSTOM COMPONENT */ .searchFormContainer #searchForm{ display:flex; justify-content:center; position:relative; } .searchFormContainer #searchForm .selectIcon{ position:absolute; font-size:40px; color:#2255d6; top:30%; right:2%; width:15px; height:15px; } .customsearch #searchForm{ padding-bottom:3px; } .customsearch #title p{ padding-bottom:5px; } .cmp-image--fixed-right img.cmp-image__image{ max-width:100%; position:fixed; right:2px; top:1px; } .search-results-pagination{ letter-spacing:-0.2px; font-size:21px; line-height:26px; color:inherit; } .searchFormContainer #search-results .pagination-results .result-each-set .search-desc{ margin-top:20px; padding:5px 0; font-size:1.125em; } .searchFormContainer #search-results .pagination-results .result-each-set .search-title{ text-decoration:none; font-size:1.375em; display:block; } .searchFormContainer #search-results .pagination-results .result-each-set .search-link{ margin-top:6px; display:block; } .searchFormContainer .pagination-container .hidden{ display:none; } .searchFormContainer #search-results .pagination-results hr{ border-color:var(--color-blue-2); border-width:var(--border-size-1); } .searchFormContainer .pagination-container{ width:calc(100% - 2rem); display:flex; align-items:center; padding:1rem 0; } .searchFormContainer .pagination-container .pagination-number,.searchFormContainer .pagination-container .pagination-button{ font-size:1.1rem; background-color:#fcfcfc; border:#f2f2f2; margin:.25rem .25rem; cursor:pointer; height:2.5rem; width:2.5rem; border-radius:.2rem; } .searchFormContainer .pagination-container .pagination-number:hover,.searchFormContainer .pagination-container .pagination-button:not(.disabled):hover{ background:#fff; } .searchFormContainer .pagination-container .pagination-number.active{ color:#fff; background:var(--color-blue-3); } .searchFormContainer #search-results .filterContainer #page-num{ float:right; } .searchFormContainer #search-results .filterContainer{ margin-top:16px; } .searchFormContainer .pagination-container #prev-button,.searchFormContainer .pagination-container #next-button,.searchFormContainer .pagination-container #prev-btn,.searchFormContainer .pagination-container #next-btn{ display:none; background-color:#fcfcfc; border:#f2f2f2; } #searchForm .inputSearchContainer .positioning-search{ position:relative; right:6%; margin:5px; height:43px; padding:6px 12px; font-size:var(--font-size-2); line-height:1.42857143; color:#555; background-color:#fff; background-image:none; border:1px solid #ccc; border-radius:0; } #searchForm .inputSearchContainer .positioning-search-icon{ width:15px; height:15px; z-index:1; position:absolute; right:10%; top:36%; } .searchFormContainer .form-control{ height:43px; } ul.nav.navbar-nav .inputSearchContainer{ position:relative; display:inline; float:right; } @media screen and (max-width:760px){ #searchForm .inputSearchContainer{ float:none; } #searchForm .inputSearchContainer .positioning-search{ width:97%; right:0; } #searchForm .inputSearchContainer .positioning-search-icon{ right:3%; top:15%; } } /** *TOOLTIP STYLES *********************************************/ a.cmp-form-options__help-message:before,a.cmp-form-text__help-block:before{ line-height:.9; background: var(--color-blue-3); } span.customTooltip{ display:none; position:absolute; border:1px solid #ccc; background:#fff; padding:20px; border-radius:8px; width:300px; font-size:var(--font-size-2); font-weight:400; z-index:2; color:#343741; box-shadow:2px 2px 5px 0 var(--color-drop-shadow-gray-2); left:50%; top:40px; transform:translateX(calc(-50%)); } @media screen and (max-width:767px){ a.cmp-form-options__help-message,a.cmp-form-text__help-block{ position:initial; } .cmp-form-options,.cmp-form-text,.product-display .cmp-text{ position:relative; } span.customTooltip{ left:0; right:0; top:100%; transform:none; width:100%; } } a.cmp-form-options__help-message, a.cmp-form-text__help-block { margin: 0 0 0 5px; } /** *PURCHASE PATH STYLES *********************************************/ #policyDocumentation .cmp-repeatable-container-buttons{ justify-content:flex-start; } input.hasDatepicker{ background:#fff url(/content/dam/config/branding-stylesheets/master/icons/calendar-datepicker.svg) no-repeat; background-position:right 20px center; } .fldErr input,.fldErr select,.fldErr textarea,.fldErr input[type=checkbox],.fldErr input[type=radio]{ background-color:white !important; } .cmp-form-options__help-message.pct-tooltip{ color:transparent; } .cmp-form-text__help-block:before{ width:21px; line-height:1; } .cmp-repeatable-container-buttons { margin: var(--size-1) 0; } /* Admin sidebar for showing disclaimers on far right */ #sidebar-parent-wrap {overflow: hidden !important} .responsivegrid:has(#sidebar-left) {overflow: auto !important;height: 100vh !important} .responsivegrid:has(#sidebar-right) {overflow: auto !important;height: 100vh !important} /* Repeatable Add/Remove Buttons */ .container .cmp-container .cmp-repeatable-container-buttons .cmp-repeatable-container--removeButton:before { border-radius: 20px; content: '\EA45'; font-family: 'Hinge Icons'; font-size: 1rem; background: var(--color-blue-4); color: white; display: flex; justify-content: center; align-items: center; font-weight: bold; } .container .cmp-container .cmp-repeatable-container-buttons .cmp-repeatable-container--addButton:before { border-radius: 20px; content: '\EA24'; font-family: 'Hinge Icons'; font-size: 1rem; background: var(--color-blue-4); color: white; display: flex; justify-content: center; align-items: center; font-weight: bold; } .container .cmp-container .cmp-repeatable-container-buttons button { color: var(--color-blue-4); align-items: center; } /* ALERT LIST COMPONENT - Two Column Table -------------------------------------------------- */ /*.carrier-action_table{ ??? */ .cmp-carrier-action{ width:90%; max-width:600px; margin:auto; } .cmp-carrier-action-header,.cmp-carrier-action-table{ display:flex; flex-flow:row wrap; } .cmp-carrier-action-header{ font-family:@font-family-ssp-bold; font-size:var(--font-size-4); font-weight:var(--font-weight-3); } .cmp-carrier-action-table{ font-family:@font-family-ssp-regular; font-size:var(--font-size-4); } .cmp-carrier-action-row{ width:calc(100% / 2); text-align:left; padding:.3em .5em; } @media(max-width:768px){ .cmp-carrier-action-header .cmp-carrier-action-row:first-of-type{ padding-bottom:0; } .cmp-carrier-action-table .cmp-carrier-action-row:first-of-type{ font-family:@font-family-ssp-semibold; } .cmp-carrier-action-header-separator{ width:100%; max-width:200px; margin:auto; border-bottom:solid 1px; } .cmp-carrier-action-row{ width:100%; } } /* API Error Message -------------------------------------------------- */ #api-error { display: block; padding: var(--size-3); border: 1px solid var(--color-error-4); border-radius: var(--radius-size-1); margin: var(--size-3) 0; background: var(--color-error-1); color: var(--color-error-4); } /* Tabs COMPONENT -------------------------------------------------- */ .cmp-tabs__tab { color: var(--color-blue-3); } .cmp-tabs__tab:hover { border-color: var(--color-blue-3); } .cmp-tabs__tab.cmp-tabs__tab--active { border-color: var(--color-blue-4); color: var(--color-blue-4); } /* Datepicker -------------------------------------------------- */ .ui-datepicker .ui-datepicker-header .ui-datepicker-prev .ui-icon:before,.ui-datepicker .ui-datepicker-header .ui-datepicker-next .ui-icon:before { color: var(--color-blue-3); } .ui-datepicker .ui-datepicker-header .ui-datepicker-title { color: var(--color-blue-4); } .ui-datepicker .ui-datepicker-calendar .ui-state-default { color: var(--color-blue-4); } .ui-datepicker .ui-datepicker-calendar .ui-state-default.ui-state-hover { background-color: var(--color-blue-4); } .ui-datepicker .ui-datepicker-calendar .ui-state-default.ui-state-active { background-color: var(--color-blue-3); } .ui-datepicker .ui-datepicker-calendar .ui-state-default.ui-state-highlight { background-color: var(--color-blue-2) } .ui-datepicker .ui-datepicker-calendar thead span { color: var(--color-blue-3); } /* Document Upload Componenet -------------------------------------------------- */ .docUploadArea { border: 1px dashed var(--color-blue-2); border-radius: 5px; padding: 2rem } .docUploadArea .uploadTitle { color: var(--color-blue-3); text-decoration: underline; display: block; text-align: center; padding-bottom: 1rem } .docUploadArea .uploadTitle:before { content: ''; background: transparent url(/content/dam/config/branding-stylesheets/master/icons/Cloud_-_Upload.svg) no-repeat; display: block; margin: 0 auto; width: 50px; height: 50px } .docUploadArea .files { width: 100%; display: block } .docUploadArea .files .file { display: flex; border: 1px solid var(--color-blue-2); border-radius: var(--radius-size-1); padding: .5rem 1rem; margin: 5px 0; background-color: var(--color-white-1) } .docUploadArea .files .file .documentSection { width: 100%; padding-right: .5rem } .docUploadArea .files .file .documentSection .documentInfo { display: flex } .docUploadArea .files .file .documentSection .documentInfo .name { cursor: pointer; color: var(--color-blue-4); font-weight: var(--font-weight-3); flex-grow: 1; word-break: break-all } .docUploadArea .files .file .documentSection .documentInfo .size { color: #343741 } .docUploadArea .files .file .documentSection .successBar { height: 7px; background-color: var(--color-success-4); width: 100%; display: block } .docUploadArea .files .file .removeDocument { color: var(--color-blue-3); cursor: pointer; display: block; position: relative; height: 10px; width: 10px; margin-top: 5px } .docUploadArea .files .file .removeDocument:before { content: ''; background: transparent url(/content/dam/config/branding-stylesheets/master/icons/Trash-icon.svg) no-repeat; display: block; padding: .6rem; position: absolute; background-size: contain } .docUploadErr { color: var(--color-error-5); padding: 10px 0; font-size: .889rem } .docUploadErr:before { content: ''; width: 20px; height: 20px; margin-top: 3px; float: left; display: inline-block; background: transparent url(/content/dam/config/branding-stylesheets/master/icons/error-icon.svg) no-repeat; background-position: left 0 top; background-size: contain; margin-right: 5px } .docUploadAreaErr { border-color: var(--color-error-5); background-color: var(--color-error-2) } /* Progress Navigation -------------------------------------------------- */ #progressNav ol { display: flex; justify-content: space-between; padding: 0; margin: 0; list-style: none; counter-reset: step; } #progressNav li { flex: 1; text-align: center; position: relative; counter-increment: step; font-weight: 600; list-style: none; padding: 0; } #progressNav li a { text-decoration: none; } /* Step circles */ #progressNav li::before { content: counter(step); display: flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; margin: 0 auto .5rem; border-radius: 50%; background: var(--color-gray-1); color: var(--color-gray-3); font-weight: bold; position: relative; z-index: 1; } /* Connecting line */ #progressNav li::after { content: ""; position: absolute; top: 1.25rem; left: 50%; width: 100%; height: 4px; background: var(--color-gray-1); } #progressNav li:last-child::after { display: none; } /* Current step */ @keyframes pulse-shadow { 0% { box-shadow: 0 0 0 4px rgba(0,119,204,.2); } 50% { box-shadow: 0 0 0 8px rgba(0,119,204,0); } 100% { box-shadow: 0 0 0 4px rgba(0,119,204,.2); } } #progressNav li.current::before { background: var(--color-blue-3); color: #fff; animation: pulse-shadow 2s infinite; } /* Completed steps (auto via :has) */ #progressNav li:not(.current):has(~ .current)::before { background: var(--color-blue-3); color: #fff; content: '\ea54'; font-family: 'Hinge Icons'; } #progressNav li:not(.current):has(~ .current)::after { background: var(--color-blue-3); }