/********** FONT EMBEDS */ @font-face{ font-family: "Barlow"; src: url('https://www.rockwellautomation.com/resources/assets/styles/meteor/Assets/Fonts/barlow_400-webfont.woff2') format('woff2'), url('https://www.rockwellautomation.com/resources/assets/styles/meteor/Assets/Fonts/barlow_400-webfont.woff') format('woff'); font-weight:400; font-style: normal; } @font-face{ font-family: "Barlow"; src: url('https://www.rockwellautomation.com/resources/assets/styles/meteor/Assets/Fonts/barlow_500-webfont.woff2') format('woff2'), url('https://www.rockwellautomation.com/resources/assets/styles/meteor/Assets/Fonts/barlow_500-webfont.woff') format('woff'); font-weight:500; font-style: normal; } @font-face{ font-family: "Barlow"; src: url('https://www.rockwellautomation.com/resources/assets/styles/meteor/Assets/Fonts/barlow_700-webfont.woff2') format('woff2'), url('https://www.rockwellautomation.com/resources/assets/styles/meteor/Assets/Fonts/barlow_700-webfont.woff') format('woff'); font-weight:700; font-style: normal; } @font-face{ font-family: "Barlow"; src: url('https://www.rockwellautomation.com/resources/assets/styles/meteor/Assets/Fonts/barlow_400italic-webfont.woff2') format('woff2'), url('https://www.rockwellautomation.com/resources/assets/styles/meteor/Assets/Fonts/barlow_400italic-webfont.woff') format('woff'); font-weight:400; font-style: italic; } @font-face{ font-family: "Barlow"; src: url('https://www.rockwellautomation.com/resources/assets/styles/meteor/Assets/Fonts/barlow_500italic-webfont.woff2') format('woff2'), url('https://www.rockwellautomation.com/resources/assets/styles/meteor/Assets/Fonts/barlow_500italic-webfont.woff') format('woff'); font-weight:500; font-style: italic; } @font-face{ font-family: "Barlow"; src: url('https://www.rockwellautomation.com/resources/assets/styles/meteor/Assets/Fonts/barlow_700italic-webfont.woff2') format('woff2'), url('https://www.rockwellautomation.com/resources/assets/styles/meteor/Assets/Fonts/barlow_700italic-webfont.woff') format('woff'); font-weight:700; font-style: italic; } /********** BREAKPOINT INFORMATION */ /* Extra Small screens (phones) */ @media only screen and (max-width: 767px){ ... } /* Small screens (tablets) */ @media only screen and (min-width: 768px) and (max-width: 1023px){ ... } /* Medium screens (large tablets) */ @media only screen and (min-width: 1024px) and (max-width: 1279px){ ... } /* Large screens (desktops) */ @media only screen and (min-width: 1280px) and (max-width: 1535px){ ... } /* Extra Large screens (Wide Monitors) */ @media only screen and (min-width: 1536px){ ... } /********** OTHER LANGUAGES */ html[lang=cs-CZ] *, html[lang=cs] *, html[lang=ja-JP] *, html[lang=ja] *, html[lang=ko-KR] *, html[lang=ko] *, html[lang=pl-PL] *, html[lang=pl] *, html[lang=ru-RU] *, html[lang=ru] *, html[lang=tr-TR] *, html[lang=tr] *, html[lang=zh-CN] *, html[lang=zh-TW] *, html[lang=zh] *{font-family: Helvetica Neue,Helvetica,sans-serif;} /********** VARIABLES */ :root{ /* Color Variables */ --raRed: #CD163F; --raBlue: #2a79c4; --raBlue2: #005DB4; /* Hover State */ --raBlue3: #003E7E; /* Pressed State */ --raBlue4: #00AEEF; --raGold: #F9C20A; --raOrange: #F58025; --raGarnet: #8D0034; --raPurple: #770056; --raGreen: #77C14C; --raGrey: #E1EBF4; --raGrey2: #2D2D2D; --raGrey3: #43434D; --raGrey4: #6D6E71; --raGrey5: #E5E6E9; --raGrey6: #848484; --raGrey7: #CCCCCC; --raGrey8: #EFEFEF; --white: #FFFFFF; --success: #008700; --warning: #FDB81E; --error: #DF3704; /* Spacing Variables */ --spacing-1: 0.5rem; /* 8px */ --spacing-2: 1rem; /* 16px */ --spacing-3: 1.5rem; /* 24px */ --spacing-4: 2.25rem; /* 32px */ --spacing-5: 2.5rem; /* 40px */ --spacing-6: 3rem; /* 48px */ --spacing-7: 3.5rem; /* 56px */ --spacing-8: 4rem; /* 64px */ --spacing-9: 4.5rem; /* 72px */ --spacing-10: 5rem; /* 80px */ @media only screen and (min-width: 1536px){ --spacing-1: 0.75rem; /* 12px */ --spacing-2: 1.5rem; /* 24px */ --spacing-3: 2.25rem; /* 36px */ --spacing-4: 3rem; /* 48px */ --spacing-5: 3.75rem; /* 60px */ --spacing-6: 4.5rem; /* 72px */ --spacing-7: 5.25rem; /* 84px */ --spacing-8: 6rem; /* 96px */ --spacing-9: 6.75rem; /* 108px */ --spacing-10: 7.5rem; /* 120px */ } } /********** RESETS */ html{-webkit-text-size-adjust: 100%;display:block;overflow-x:hidden;} *,*:before,*:after{box-sizing:border-box;padding:0;font-family:barlow, sans-serif;color:var(--raGrey2);} body{font-size:1rem;line-height:1.375;margin:0;overflow-x:hidden;} img{max-width:100%;} /********** BASIC HTML ELEMENTS */ a, a:visited{color:var(--raBlue);} a:hover{color:var(--raGrey2);} /********** LAYOUT */ #main-content{position:relative;} section.section{display:block;position:relative;z-index:1;} .container{padding:50px 0px;max-width:90%;width:100em;margin:auto;} .grid{display:grid;grid-template-columns:repeat(12, 1fr);gap:50px 10px;grid-auto-rows:minmax(0px, auto);} .-width2{grid-column:span 2;} .-width4{grid-column:span 4;} .-width6{grid-column:span 6;} .-width8{grid-column:span 8;} .-width10{grid-column:span 10;} .-width12{grid-column:span 12;} @media (max-width: 1279px){ .grid{gap:50px 10px;} .-width2, .-width4, .-width6, .-width8, .-width10, .-width12{grid-column:span 12;} } /********** ALIGNMENT */ .-center{justify-content:center;text-align:center;} /********** WIDTHS FOR COLUMNS */ .-width100{width:100%;} .-width50{width:48.5%;} @media (max-width: 767px){ .-width50{width:100%;} } /********** FONT AWESOME */ .fa, .fa::before, .fa::after{display: inline-block;font: normal normal normal 14px/1 FontAwesome;font-size:inherit;text-rendering: auto;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;} /********** TABLES */ table{width:100%;} /********** UNORDERED LISTS */ ul{margin-left:30px;} /********** TYPE STYLES */ .a-typeTitle1{font-size:3.5rem;font-weight:500;line-height:1;margin: 0px 0 16px 0;} .a-typeTitle2{font-size:2.5rem;font-weight:500;line-height:1.2;margin: 0px 0 16px 0;} .a-typeTitle3{font-size:2.25rem;font-weight:500;line-height:1.2;margin: 0px 0 16px 0;} .a-typeTitle4{font-size:1.75rem;font-weight:500;line-height:1.2;margin: 0px 0 16px 0;} .a-typeTitle5{font-size:1.5rem;font-weight:500;line-height:1.2;margin: 0px 0 16px 0;} .a-typeSubTitle1{font-size:1.5rem;line-height:1.2;margin: 0px 0 16px 0;} .a-typeSubTitle2{font-size:1.25rem;font-weight:500;line-height:1.2;margin: 0px 0 16px 0;} .a-typeSubTitle3{font-size:1.125rem;font-weight:500;line-height:1.2;margin: 0px 0 16px 0;} .a-typeBody{font-size:1rem;line-height:1.375;margin: 0px 0 16px 0;} .a-typeBody.-secondary{font-size:1.25rem;line-height:1.375;margin: 0px 0 16px 0;} .a-typeOverline{font-size:0.875rem;font-weight:500;letter-spacing:0.5px;line-height:1.57;text-transform: uppercase;margin: 0px 0 16px 0;} .a-typeCaption{font-size:0.875rem;line-height:1.2;margin: 0px 0 16px 0;} .a-typeLegal{font-size:0.75rem;line-height:1.5;margin: 0px 0 16px 0;} /* Type Styles - Mobile */ @media (max-width: 767px){ .a-typeTitle1{font-size:2.5rem;} .a-typeTitle2{font-size:2.25rem;} .a-typeTitle3{font-size:2rem;} .a-typeTitle4{font-size:1.75rem;} .a-typeTitle5{font-size:1.5rem;} .a-typeSubTitle1{font-size:1.5rem;} .a-typeSubTitle2{font-size:1.25rem;} .a-typeSubTitle3{font-size:1.125rem;} .a-typeBody{font-size:1rem;} .a-typeBody.-secondary{font-size:1.125rem;} .a-typeOverline{font-size:0.875rem;} .a-typeCaption{font-size:0.875rem;} .a-typeLegal{font-size:0.75rem;} } /* BUTTONS - Groups */ .m-buttonGroup{align-items:center;display:flex;flex-wrap:wrap;/*margin: 40px 0;*/} .m-buttonGroup > *{margin-right: 20px;} .m-buttonGroup > *:last-child{margin-right: 0;} /*@media (max-width: 767px){ .m-buttonGroup{flex-direction: column;} .m-buttonGroup .a-button{margin-bottom: 20px;} }*/ /* BUTTONS - General */ .a-button{font-weight:500;align-items: center;border-radius: 4px;border-style: solid;cursor: pointer;display: inline-flex;justify-content: center;padding: 6px 25px;transition: 0.3s ease-out all;border: 2px solid transparent;line-height:1;font-size:16px !important;box-shadow:none !important;text-transform:uppercase;text-decoration:none;font-family:inherit;} /* BUTTONS - Sizes */ .a-button.-large{padding:8px 24px;min-height:48px;} .a-button.-medium{padding:7px 20px;min-height:36px;} .a-button.-small{font-size:12px;padding:8px 16px;min-height:24px;} /* BUTTONS - Misc Options */ .a-button.-text{background: transparent;border: 0 none;} .a-button.-fullWidth{width: 100%;} .a-button.-disabled{cursor: default;opacity: 0.4;pointer-events: none;} /* BUTTONS - Style Primary */ .a-button.-primary{background-color: var(--raBlue);border-color: var(--raBlue);color: #fff;fill: #fff;} .a-button.-primary *{color: #fff;fill: #fff;} .a-button.-primary:active, .a-button.-primary.-active, .a-button.-primary:hover, .a-button.-primary.-hover{background-color: var(--raBlue2);border-color: var(--raBlue2);} .a-button.-primary:focus, .a-button.-primary.-focus{border-color: #fff;} .a-button.-primary:disabled, .a-button.-primary[disabled]{background-color: var(--raGrey7);border-color: var(--raGrey7);color: var(--raGrey6);fill: var(--raGrey7);} /* BUTTONS - Style Primary Inverted */ .a-button.-inverted{background-color: var(--white);border-color: transparent;color: var(--raBlue2);fill: var(--raBlue2);} .a-button.-inverted *{color: var(--raBlue2);fill: var(--raBlue2);} .a-button.-inverted:active, .a-button.-inverted.-active, .a-button.-inverted:hover, .a-button.-inverted.-hover{background-color:var(--raGrey8);border-color:var(--raGrey8);} .a-button.-inverted:focus, .a-button.-inverted.-focus{border-color:var(--raGrey8);} .a-button.-inverted:disabled, .a-button.-inverted[disabled]{background-color: var(--raGrey7);border-color: var(--raGrey7);color: var(--raGrey6);fill: var(--raGrey7);} /* BUTTONS - Style Secondary */ .a-button.-secondary{background-color: #fff;border-color: var(--raBlue);color: var(--raBlue) !important;border: 2px solid var(--raBlue);} .a-button.-secondary *{color: var(--raBlue);} .a-button.-secondary:active, .a-button.-secondary.-active, .a-button.-secondary:hover, .a-button.-secondary.-hover{border-color: var(--raGrey3);} .a-button.-secondary:focus, .a-button.-secondary.-focus{border-color: #fff;box-shadow: 0 0 0 2px var(--raOrange);} /* BUTTONS - With Icon */ .a-button.-icon svg{height: 24px;width: 24px;} .a-button.-icon svg + .a-type__button{margin-left: 8px;} .a-button .a-type__button svg{fill: #fff;height: 22px;margin-right: 10px;width: 22px;} /* FORM STYLES */ .o-form{display:flex;flex-wrap:wrap;justify-content:space-between;} .m-formGroup{margin:20px 0 0 0;position:relative;display:flex;align-items:center;} /* FORM STYLES - General */ .a-inputEmail, .a-inputText, .a-inputPassword, .a-inputSelect{border:1px solid var(--raGrey5);border-radius:6px;padding:13px;min-height:52px;font-size:16px;transition:all ease .2s;background-color:transparent;width:100%;} .a-inputEmail:hover, .a-inputText:hover, .a-inputPassword:hover, .a-inputSelect:hover{border:1px solid var(--raGrey2);} .a-inputEmail::placeholder, .a-inputText::placeholder, .a-inputPassword::placeholder, .a-inputSelect::placeholder{opacity:0;} /* FORM STYLES - Labels */ .a-formLabel{padding:1px 5px;cursor:text;position:absolute;z-index:5;left:13px;top:14px;transition:all ease .2s;font-size:16px;background:#fff;pointer-events:none;} .a-inputEmail:focus + label, .a-inputText:focus + label, .a-inputPassword:focus + label, .a-inputEmail:not(:placeholder-shown) + label, .a-inputText:not(:placeholder-shown) + label, .a-inputPassword:not(:placeholder-shown) + label, .a-inputEmail:-webkit-autofill ~ label, .a-inputText:-webkit-autofill ~ label, .a-inputPassword:-webkit-autofill ~ label{top:-11px;font-size:12px;} /* FORM STYLES - Input Has Value */ .a-inputEmail:not(:placeholder-shown), .a-inputText:not(:placeholder-shown), .a-inputPassword:not(:placeholder-shown){border:2px solid var(--raGrey4) !important;} .a-inputEmail:not(:placeholder-shown) + label font, .a-inputText:not(:placeholder-shown) + label font, .a-inputPassword:not(:placeholder-shown) + label font{color: var(--raGrey2);} /* FORM STYLES - FOCUS STATE */ .a-inputEmail:focus, .a-inputText:focus, .a-inputPassword:focus{border:2px solid var(--raBlue) !important;} .a-inputEmail:focus + label font, .a-inputText:focus + label font, .a-inputPassword:focus + label font{color:var(--raBlue) !important;} /* FORM STYLES - FOCUS STATE LABEL */ .a-inputEmail:not(:placeholder-shown) + label font, .a-inputText:not(:placeholder-shown) + label font, .a-inputPassword:not(:placeholder-shown) + label font{color:var(--raGrey2) !important;} /* FORM STYLES - Error Handeling */ .-error .a-inputEmail, .-error .a-inputText, .-error .a-inputPassword{border:2px solid var(--error);} .-error .a-inputSelect{border:2px solid var(--error);} .-error .a-inputSelect:valid{border:2px solid var(--raGrey2);} .a-inputSelect:valid + label font{color: var(--raGrey2);} /* FORM STYLES - Select Dropdown */ .a-inputSelect{background-image:url("https://www.rockwellautomation.com/resources/assets/styles/meteor/Assets/Images/icon-caret-down-grey.svg");background-repeat: no-repeat;background-size:14px;background-position:calc(100% - 13px) 23px;-webkit-appearance:none;} .a-inputSelect:focus{} .a-inputSelect:focus+label{top:-11px;font-size:12px;} .a-inputSelect::placeholder{} .a-inputSelect:valid{border:2px solid var(--raGrey4);} .a-inputSelect:valid + label font{color: var(--raGrey2);} .a-inputSelect:invalid{color:#fff;} .a-inputSelect:valid ~ label{top:-11px;font-size:12px;} .a-inputSelect:valid + label font{color: var(--raGrey2);} /* FORM STYLES - CHECKBOXES */ .a-inputCheckbox{-webkit-appearance:none ;appearance:none;min-height:0px ;margin:0px 5px 0px 0px ;width:18px ;height:18px ;border:1px solid var(--raGrey4) ;border-radius:4px ;display:inline-flex ;justify-content:center ;align-items:center ;flex-grow:0;flex-shrink:0;padding:0px ;} .a-inputCheckbox::before{content:"";width:0.65em;height:0.65em;background-image:url('https://www.rockwellautomation.com/resources/assets/styles/meteor/Assets/Images/icon-checkmark.svg');background-size:100%;} .a-inputCheckbox:hover{border:2px solid var(--raBlue) ;} .a-inputCheckbox:focus{border:2px solid var(--raBlue3) ;outline:none ;} .a-inputCheckbox:checked:focus{border:2px solid var(--raBlue);} .a-inputCheckbox:checked{background:var(--raBlue) ;border:none ;} .a-inputCheckbox:checked:hover{background:var(--raBlue2) ;} /* FORM STYLES - RADIO BUTTONS */ .a-inputRadio{-webkit-appearance:none;appearance:none;margin:0 ;margin-right:4px ;top:1px;position:relative;width:18px;min-height:0px;height:18px;border:1px solid var(--raGrey4) ;border-radius:50% ;display:inline-flex ;justify-content:center ;align-items:center ;flex-grow:0;flex-shrink:0;padding:0px ;} .a-inputRadio::before{content:"";width:6px;height:6px;background:#fff;border:4px solid #fff;border-radius:50%;background-size:100%;} .a-inputRadio:checked{border:2px solid var(--raBlue) ;background-color:var(--raBlue) ;} .a-inputRadio:checked::before{background:var(--raBlue) ;border:4px solid #fff ;} .a-inputRadio:hover{border:2px solid var(--raBlue) ;} .a-inputRadio:focus{border:2px solid var(--raBlue3) ;outline:none ;} .a-inputRadio:checked:focus{border:2px solid var(--raBlue) ;} .a-inputRadio:hover:checked{background:var(--raBlue2) ;border:none ;} /* clean this up */ .m-radioGroup{display:flex;margin-top:10px;margin-bottom:10px;} .-radioGroup{flex-direction:column;align-items:flex-start;} .-radioGroup tbody{display:flex;flex-direction:column;} /*.-radioGroup #reg_ans_field09 tbody{flex-direction:row;}*/ @media (max-width: 767px){ .-radioGroup tbody{flex-direction:column !important;} .-radioGroup tbody tr{margin-bottom:10px;} } /* FORM STYLES - SWITCH */ .-switch{align-items:flex-start;} .m-switcher{position:relative;display:inline-block;width:54px;height:28px;margin-right:8px;min-width:54px;} .m-switcher input{opacity:0;width:0;height:0;} .a-slider{position:absolute;cursor:pointer;top:0;left:0;right:0;bottom:0;background-color:var(--raGrey7);transition:.4s;border-radius:34px;} .a-slider:before{position:absolute;content:"";height:20px;width:20px;left:4px;bottom:4px;background-color:white;transition: .4s;border-radius: 50%;} .a-inputSwitch:checked + .a-slider{background-color: var(--raBlue);} .a-inputSwitch:focus + .a-slider{box-shadow: 0 0 1px var(--raBlue);} .a-inputSwitch:checked + .a-slider:before{transform:translateX(26px);} /* FORM STYLES - MISC. */ input:-webkit-autofill, input:-webkit-autofill:focus{transition: background-color 600000s 0s, color 600000s 0s;} /********** ACCORDION */ .m-accordionItem{display:flex;flex-direction:column;border-bottom:1px solid var(--raGrey5);} .a-accordionButton{background:transparent;border:none;font-size:20px;font-weight:700;display:flex;width:100%;cursor:pointer;margin:0;padding:20px 0px;} .a-accordionButton .a-label{margin-right:6px;} .a-accordionButton .a-values{display:flex;flex-direction:column;align-items:flex-start;} .a-accordionButton .a-values span, .a-accordionButton .a-values div{font-weight:400;font-size:20px;} .-open .m-accordionBody{border-bottom:2px solid var(--raOrange);} .m-accordionContent{padding-left:22px;padding-bottom:24px;} /* Accordion - Arrow */ .a-accordionButton svg{width:30px;height:30px;transform:rotate(0deg);transition: all .3s ease;margin-left:auto;} .m-accordionItem.-open .a-accordionButton svg{transform:rotate(180deg);} /* Accordion - Disabled State */ .m-accordionItem.-disabled{opacity:.4;pointer-events:none;} /* Accordion - Closed State */ .-closed .m-accordionBody{display:none;} /********** LOADER */ .o-Loader{position:relative;top:0;left:0;right:0;bottom:0;width:171px;height:171px;margin:auto;} .a-LoaderDot{position:absolute;top:0;left:0;right:0;bottom:0;width:85.5px;height:100%;margin:auto;} .a-LoaderDot:before{content: '';position: absolute;top: 0;left: 0;right: 0;width: 85.5px;height: 85.5px;background-size: 100% 100%;transform: scale(0);} .a-LoaderDot:nth-child(7n+1){transform: rotate(45deg);} .a-LoaderDot:nth-child(7n+1):before{background-image: url('https://www.rockwellautomation.com/resources/assets/images/octagon_gold.svg');animation: cssload-load 1.52s linear 0.19s infinite;} .a-LoaderDot:nth-child(7n+2){transform: rotate(90deg);} .a-LoaderDot:nth-child(7n+2):before{background-image: url('https://www.rockwellautomation.com/resources/assets/images/octagon_orange.svg');animation: cssload-load 1.52s linear 0.38s infinite;} .a-LoaderDot:nth-child(7n+3){transform: rotate(135deg);} .a-LoaderDot:nth-child(7n+3):before{background-image: url('https://www.rockwellautomation.com/resources/assets/images/octagon_ra-red.svg');animation: cssload-load 1.52s linear 0.57s infinite;} .a-LoaderDot:nth-child(7n+4){transform: rotate(180deg);} .a-LoaderDot:nth-child(7n+4):before{background-image: url('https://www.rockwellautomation.com/resources/assets/images/octagon_garnet.svg');animation: cssload-load 1.52s linear 0.76s infinite;} .a-LoaderDot:nth-child(7n+5){transform: rotate(225deg);} .a-LoaderDot:nth-child(7n+5):before{background-image: url('https://www.rockwellautomation.com/resources/assets/images/octagon_purple.svg');animation: cssload-load 1.52s linear 0.95s infinite;} .a-LoaderDot:nth-child(7n+6){transform: rotate(270deg);} .a-LoaderDot:nth-child(7n+6):before{background-image: url('https://www.rockwellautomation.com/resources/assets/images/octagon_ab-blue.svg');animation: cssload-load 1.52s linear 1.14s infinite;} .a-LoaderDot:nth-child(7n+7){transform: rotate(315deg);} .a-LoaderDot:nth-child(7n+7):before{background-image: url('https://www.rockwellautomation.com/resources/assets/images/octagon_ft-blue.svg');animation: cssload-load 1.52s linear 1.33s infinite;} .a-LoaderDot:nth-child(7n+8){transform: rotate(360deg);} .a-LoaderDot:nth-child(7n+8):before{background-image: url('https://www.rockwellautomation.com/resources/assets/images/octagon_green.svg');animation: cssload-load 1.52s linear 1.52s infinite;} @keyframes cssload-load{100%{opacity: 0;transform: scale(1);}} @-webkit-keyframes cssload-load{100%{opacity: 0;transform: scale(1);}} /********** INFO PANEL */ .o-infoPanel{display:flex;flex-direction:column;width:100%;border-radius:4px;padding:16px 16px 16px 52px !important /* certain override */;position: relative;margin-bottom:16px;box-shadow: 0px 1px 5px rgba(0, 0, 0, 0.25);background-repeat:no-repeat;background-position: 16px 16px;text-align:left;} .o-infoPanel *, .o-infoPanel *:visited{color:var(--raGrey2);} /* Info Panel - Close Option Varation */ .o-infoPanel.-close::after{content:'';width:20px;height:20px;background:red;position:absolute;right:16px;top:16px;padding-right:52px;} /* Info Panel - Color Varations */ .o-infoPanel.-default, .o-infoPanel.-blue{border: 1px solid var(--raBlue);background-color: rgba(42, 121, 196, 0.24);background-image: url('https://www.rockwellautomation.com/resources/assets/icons/info.svg');} .o-infoPanel.-success, .o-infoPanel.-green{border: 1px solid var(--success);background-color: rgba(0, 135, 0, 0.24);background-image: url('https://www.rockwellautomation.com/resources/assets/icons/check.svg');} .o-infoPanel.-warning, .o-infoPanel.-yellow{border: 1px solid var(--warning);background-color: rgba(253, 184, 30, 0.24);background-image: url('https://www.rockwellautomation.com/resources/assets/icons/alert-triangle.svg');} .o-infoPanel.-error, .o-infoPanel.-red{border: 1px solid var(--error);background-color: rgba(223, 55, 4, 0.24);background-image: url('https://www.rockwellautomation.com/resources/assets/icons/x-circle.svg');} .o-infoPanel.-loading, .o-infoPanel.-white{border: 1px solid var(--raGrey2);background-color:white;background-image: url('https://www.rockwellautomation.com/resources/assets/icons/loading.svg');} /********** TAGS */ .m-tagBar{display:flex;margin-top:12px;margin-bottom:12px;} .m-tagBar > *{margin-right:10px;} .m-tagBar > *:last-child{margin-right: 0;} .a-tag{display:flex;padding:5px 8px;justify-content:center;align-items:center;border-radius:4px;border:1px solid #CCC;background:#F4F4F4;} /* Size - Small */ .a-tag.-small{font-size:12px;padding:5px;} .a-tag.-green{background:#77C14C;border:1px solid #77C14C;color:#fff;} /********** MISC STYLES */ .-bold{font-weight:bold;} .-error{color:var(--error);} .-hidden{display:none !important;} .m-formGroup.-file{flex-direction:column;align-items:flex-start;} .m-formGroup.-file label{order:1;position:relative;font-weight:bold;top:0px;left:0px;padding:0px;margin-bottom:10px;} .m-formGroup.-file input{order:2;} /* NOTES - 1. Use LESS embedding 2. Use color variables - Okay 3. Install Fonts - Okay 4. AEM Mixins / Custom / Bootstrap or Other? 4. Create Variables for Breakpoints - SASS? 5. Global Rems */