:root { --white: #FFFFFF; --black: hsl(0, 0%, 0%); --orange: #CC7000; --orange-10: #E67A00; --orange-20: #FF8C00; --orange-30: #FF9C1A; --orange-40: #FFAD33; --orange-50: #FFBE4D; --orange-60: #FFCE66; --orange-70: #FFDF80; --orange-80: #FFE699; --orange-90: #FFF0CC; --orange-100: #FFF9E6; --neutral-10: #01031E; --neutral-20: #0B0733; --neutral-30: #515151; --neutral-40: #5F5F82; --neutral-50: #767676; --neutral-60: #A1A1A1; --neutral-70: #5F5F82; --neutral-80: #8B8AAF; --neutral-90: #F4F4F4; --neutral-100: #E2E3FC; --seq-1: #6736FF; --seq-2: #C05FFF; --seq-3: #C79BF2; --seq-4: #DABCF7; --seq-5: #EAD9FA; --seq-6: #F5F0FA; --div-1: #FFB500; --div-2: #7D3CBD; --div-3: #9656D6; --div-4: #AE74E8; --div-5: #C79BF2; --div-6: #DABCF7; --div-7: #EAD9FA; --div-8: #D2829F; --div-9: #D2829F; --div-10: #83F2EB; --div-11: #43DED3; --div-12: #21C2B7; --div-13: #0EA197; --div-14: #08827A; --div-15: #086962; --div-16: #8000FF; --qual-1: #F4BA4E; --qual-2: #81F9B8; --qual-3: #67DBFA; --qual-4: #FF005C; --qual-5: #F55353; --qual-6: #FAF0F0; --qual-7: #46E385; --qual-8: #5691F0; --qual-9: #ED5393; --qual-10: #E89C3F; --containerRoot: var(--neutral-10); --container: var(--neutral-20); --containerNested: var(--neutral-40); --input: var(--seq-1); --input--disabled: var(--neutral-20); --input--hover: var(--seq-1); --input--hover--focus: var(--orange-20); --icon: var(--neutral-80); --icon--hover: var(--neutral-60); --icon--disabled: var(--neutral-40); --icon--selected: var(--neutral-100); --label: var(--neutral-100); --label--disabled: var(--neutral-80); --pc-bg: #39376CCC; --border: var(--neutral-50); --border--disabled: var(--neutral-50); --containerBorder: 1px solid var(--border); --boxShadow1: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24); --boxShadow2: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23); --boxShadow3: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23); --boxShadow4: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22); --boxShadow5: 0 19px 38px rgba(0, 0, 0, 0.30), 0 15px 12px rgba(0, 0, 0, 0.22); --boxShadow--inset: inset 0 0 4px 2px rgba(34, 34, 34, 0.4); --callToAction: #01031E; --callToActionHighlight: #A273FF; --callToAction--hover: #A273FF; --callToAction--active: #6936FF; --callToAction--disabled: var(--neutral-40); --error: #FF1D43; --info: #6736FFCC; --infoSecondary: #C05FFF; --warning: #F4BA4E; --warningSecondary: #693D07; --success: #81F9B8; --borderRadius: 10px; --borderRadiusInput: 10px; --opacity-25: rgba(0, 0, 0, 0.25); --opacity-50: rgba(0, 0, 0, 0.50); --opacity-85: rgba(0, 0, 0, 0.85); --font-NotoSans: 'Noto Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; --font-MontserratAlternates: 'MontserratAlternates', -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; --indicator: #1EC963; --indicatorOff: #0A2E18; --checkbox--checked: var(--callToAction); --checkbox--unchecked: var(--border); --checkbox--indeterminate: var(--callToAction); --checkbox--disabled: var(--input--disabled); --progressLinearTrack--determinate: var(--neutral-10); --progressLinearTrack--indeterminate: var(--neutral-10); --progressLinearBar--determinate: var(--infoSecondary); --progressLinearBar--indeterminate: var(--border); --toggleSwitch--selected: var(--info); --toggleSwitch--unselected: var(--neutral-100); --radio--selected: var(--callToAction); --radio--unselected: var(--border); --radio--disabled: var(--input--disabled); --symbolFill--default: var(--neutral-20); --symbolStroke--default: var(--neutral-70); --symbolFillAnimation--default: var(--neutral-80); --symbolFill--running: var(--neutral-50); --symbolFillAnimation--running: var(--neutral-80); --symbolStroke--running: var(--neutral-70); --symbolFill--stopped: var(--black); --symbolStroke--stopped: var(--neutral-70); --symbolFill--faulted: #8F0E0E; --symbolStroke--faulted: #FA8E8E; } .psc-puffIn { -webkit-animation-name: puffIn; animation-name: puffIn; } @-webkit-keyframes puffIn { 0% { opacity: 0; transform-origin: 50% 50%; transform: scale(2, 2); filter: blur(2px); } 100% { opacity: 1; transform-origin: 50% 50%; transform: scale(1, 1); filter: blur(0px); } } @keyframes puffIn { 0% { opacity: 0; transform-origin: 50% 50%; transform: scale(2, 2); filter: blur(2px); } 100% { opacity: 1; transform-origin: 50% 50%; transform: scale(1, 1); filter: blur(0px); } } .psc-puffOut { -webkit-animation-name: puffOut; animation-name: puffOut; } @-webkit-keyframes puffOut { 0% { opacity: 1; transform-origin: 50% 50%; transform: scale(1, 1); filter: blur(0px); } 100% { opacity: 0; transform-origin: 50% 50%; transform: scale(2, 2); filter: blur(2px); } } @keyframes puffOut { 0% { opacity: 1; transform-origin: 50% 50%; transform: scale(1, 1); filter: blur(0px); } 100% { opacity: 0; transform-origin: 50% 50%; transform: scale(2, 2); filter: blur(2px); } } .psc-vanishIn { -webkit-animation-name: vanishIn; animation-name: vanishIn; } @-webkit-keyframes vanishIn { 0% { opacity: 0; transform-origin: 50% 50%; transform: scale(2, 2); filter: blur(90px); } 100% { opacity: 1; transform-origin: 50% 50%; transform: scale(1, 1); filter: blur(0px); } } @keyframes vanishIn { 0% { opacity: 0; transform-origin: 50% 50%; transform: scale(2, 2); filter: blur(90px); } 100% { opacity: 1; transform-origin: 50% 50%; transform: scale(1, 1); filter: blur(0px); } } .psc-vanishOut { -webkit-animation-name: vanishOut; animation-name: vanishOut; } @-webkit-keyframes vanishOut { 0% { opacity: 1; transform-origin: 50% 50%; transform: scale(1, 1); filter: blur(0px); } 100% { opacity: 0; transform-origin: 50% 50%; transform: scale(2, 2); filter: blur(20px); } } @keyframes vanishOut { 0% { opacity: 1; transform-origin: 50% 50%; transform: scale(1, 1); filter: blur(0px); } 100% { opacity: 0; transform-origin: 50% 50%; transform: scale(2, 2); filter: blur(20px); } } .psc-boingInUp { -webkit-animation-name: boingInUp; animation-name: boingInUp; } @-webkit-keyframes boingInUp { 0% { opacity: 0; transform-origin: 50% 0%; transform: perspective(800px) rotateX(-90deg); } 50% { opacity: 1; transform-origin: 50% 0%; transform: perspective(800px) rotateX(50deg); } 100% { opacity: 1; transform-origin: 50% 0%; transform: perspective(800px) rotateX(0deg); } } @keyframes boingInUp { 0% { opacity: 0; transform-origin: 50% 0%; transform: perspective(800px) rotateX(-90deg); } 50% { opacity: 1; transform-origin: 50% 0%; transform: perspective(800px) rotateX(50deg); } 100% { opacity: 1; transform-origin: 50% 0%; transform: perspective(800px) rotateX(0deg); } } .psc-boingOutDown { -webkit-animation-name: boingOutDown; animation-name: boingOutDown; } @-webkit-keyframes boingOutDown { 0% { opacity: 1; transform-origin: 100% 100%; transform: perspective(800px) rotateX(0deg) rotateY(0deg); } 20% { opacity: 1; transform-origin: 100% 100%; transform: perspective(800px) rotateX(0deg) rotateY(10deg); } 30% { opacity: 1; transform-origin: 0% 100%; transform: perspective(800px) rotateX(0deg) rotateY(0deg); } 40% { opacity: 1; transform-origin: 0% 100%; transform: perspective(800px) rotateX(10deg) rotateY(10deg); } 100% { opacity: 0; transform-origin: 100% 100%; transform: perspective(800px) rotateX(90deg) rotateY(0deg); } } @keyframes boingOutDown { 0% { opacity: 1; transform-origin: 100% 100%; transform: perspective(800px) rotateX(0deg) rotateY(0deg); } 20% { opacity: 1; transform-origin: 100% 100%; transform: perspective(800px) rotateX(0deg) rotateY(10deg); } 30% { opacity: 1; transform-origin: 0% 100%; transform: perspective(800px) rotateX(0deg) rotateY(0deg); } 40% { opacity: 1; transform-origin: 0% 100%; transform: perspective(800px) rotateX(10deg) rotateY(10deg); } 100% { opacity: 0; transform-origin: 100% 100%; transform: perspective(800px) rotateX(90deg) rotateY(0deg); } } .psc-bombLeftOut { -webkit-animation-name: bombLeftOut; animation-name: bombLeftOut; } @-webkit-keyframes bombLeftOut { 0% { opacity: 1; transform-origin: 50% 50%; transform: rotate(0deg); filter: blur(0px); } 50% { opacity: 1; transform-origin: -100% 50%; transform: rotate(-160deg); filter: blur(0px); } 100% { opacity: 0; transform-origin: -100% 50%; transform: rotate(-160deg); filter: blur(20px); } } @keyframes bombLeftOut { 0% { opacity: 1; transform-origin: 50% 50%; transform: rotate(0deg); filter: blur(0px); } 50% { opacity: 1; transform-origin: -100% 50%; transform: rotate(-160deg); filter: blur(0px); } 100% { opacity: 0; transform-origin: -100% 50%; transform: rotate(-160deg); filter: blur(20px); } } .psc-bombRightOut { -webkit-animation-name: bombRightOut; animation-name: bombRightOut; } @-webkit-keyframes bombRightOut { 0% { opacity: 1; transform-origin: 50% 50%; transform: rotate(0deg); filter: blur(0px); } 50% { opacity: 1; transform-origin: 200% 50%; transform: rotate(160deg); filter: blur(0px); } 100% { opacity: 0; transform-origin: 200% 50%; transform: rotate(160deg); filter: blur(20px); } } @keyframes bombRightOut { 0% { opacity: 1; transform-origin: 50% 50%; transform: rotate(0deg); filter: blur(0px); } 50% { opacity: 1; transform-origin: 200% 50%; transform: rotate(160deg); filter: blur(0px); } 100% { opacity: 0; transform-origin: 200% 50%; transform: rotate(160deg); filter: blur(20px); } } .psc-magic { -webkit-animation-name: magic; animation-name: magic; } @-webkit-keyframes magic { 0% { opacity: 1; transform-origin: 100% 200%; transform: scale(1, 1) rotate(0deg); } 100% { opacity: 0; transform-origin: 200% 500%; transform: scale(0, 0) rotate(270deg); } } @keyframes magic { 0% { opacity: 1; transform-origin: 100% 200%; transform: scale(1, 1) rotate(0deg); } 100% { opacity: 0; transform-origin: 200% 500%; transform: scale(0, 0) rotate(270deg); } } .psc-swap { -webkit-animation-name: swap; animation-name: swap; } @-webkit-keyframes swap { 0% { opacity: 0; transform-origin: 0 100%; transform: scale(0, 0) translate(-700px, 0px); } 100% { opacity: 1; transform-origin: 100% 100%; transform: scale(1, 1) translate(0px, 0px); } } @keyframes swap { 0% { opacity: 0; transform-origin: 0 100%; transform: scale(0, 0) translate(-700px, 0px); } 100% { opacity: 1; transform-origin: 100% 100%; transform: scale(1, 1) translate(0px, 0px); } } .psc-twisterInDown { -webkit-animation-name: twisterInDown; animation-name: twisterInDown; } @-webkit-keyframes twisterInDown { 0% { opacity: 0; transform-origin: 0 100%; transform: scale(0, 0) rotate(360deg) translateY(-100%); } 30% { transform-origin: 0 100%; transform: scale(0, 0) rotate(360deg) translateY(-100%); } 100% { opacity: 1; transform-origin: 100% 100%; transform: scale(1, 1) rotate(0deg) translateY(0%); } } @keyframes twisterInDown { 0% { opacity: 0; transform-origin: 0 100%; transform: scale(0, 0) rotate(360deg) translateY(-100%); } 30% { transform-origin: 0 100%; transform: scale(0, 0) rotate(360deg) translateY(-100%); } 100% { opacity: 1; transform-origin: 100% 100%; transform: scale(1, 1) rotate(0deg) translateY(0%); } } .psc-twisterInUp { -webkit-animation-name: twisterInUp; animation-name: twisterInUp; } @-webkit-keyframes twisterInUp { 0% { opacity: 0; transform-origin: 100% 0; transform: scale(0, 0) rotate(360deg) translateY(100%); } 30% { transform-origin: 100% 0; transform: scale(0, 0) rotate(360deg) translateY(100%); } 100% { opacity: 1; transform-origin: 0 0; transform: scale(1, 1) rotate(0deg) translateY(0); } } @keyframes twisterInUp { 0% { opacity: 0; transform-origin: 100% 0; transform: scale(0, 0) rotate(360deg) translateY(100%); } 30% { transform-origin: 100% 0; transform: scale(0, 0) rotate(360deg) translateY(100%); } 100% { opacity: 1; transform-origin: 0 0; transform: scale(1, 1) rotate(0deg) translateY(0); } } .psc-foolishIn { -webkit-animation-name: foolishIn; animation-name: foolishIn; } @-webkit-keyframes foolishIn { 0% { opacity: 0; transform-origin: 50% 50%; transform: scale(0, 0) rotate(360deg); } 20% { opacity: 1; transform-origin: 0% 100%; transform: scale(0.5, 0.5) rotate(0deg); } 40% { opacity: 1; transform-origin: 100% 100%; transform: scale(0.5, 0.5) rotate(0deg); } 60% { opacity: 1; transform-origin: 0%; transform: scale(0.5, 0.5) rotate(0deg); } 80% { opacity: 1; transform-origin: 0% 0%; transform: scale(0.5, 0.5) rotate(0deg); } 100% { opacity: 1; transform-origin: 50% 50%; transform: scale(1, 1) rotate(0deg); } } @keyframes foolishIn { 0% { opacity: 0; transform-origin: 50% 50%; transform: scale(0, 0) rotate(360deg); } 20% { opacity: 1; transform-origin: 0% 100%; transform: scale(0.5, 0.5) rotate(0deg); } 40% { opacity: 1; transform-origin: 100% 100%; transform: scale(0.5, 0.5) rotate(0deg); } 60% { opacity: 1; transform-origin: 0%; transform: scale(0.5, 0.5) rotate(0deg); } 80% { opacity: 1; transform-origin: 0% 0%; transform: scale(0.5, 0.5) rotate(0deg); } 100% { opacity: 1; transform-origin: 50% 50%; transform: scale(1, 1) rotate(0deg); } } .psc-foolishOut { -webkit-animation-name: foolishOut; animation-name: foolishOut; } @-webkit-keyframes foolishOut { 0% { opacity: 1; transform-origin: 50% 50%; transform: scale(1, 1) rotate(360deg); } 20% { opacity: 1; transform-origin: 0% 0%; transform: scale(0.5, 0.5) rotate(0deg); } 40% { opacity: 1; transform-origin: 100% 0%; transform: scale(0.5, 0.5) rotate(0deg); } 60% { opacity: 1; transform-origin: 0%; transform: scale(0.5, 0.5) rotate(0deg); } 80% { opacity: 1; transform-origin: 0% 100%; transform: scale(0.5, 0.5) rotate(0deg); } 100% { opacity: 0; transform-origin: 50% 50%; transform: scale(0, 0) rotate(0deg); } } @keyframes foolishOut { 0% { opacity: 1; transform-origin: 50% 50%; transform: scale(1, 1) rotate(360deg); } 20% { opacity: 1; transform-origin: 0% 0%; transform: scale(0.5, 0.5) rotate(0deg); } 40% { opacity: 1; transform-origin: 100% 0%; transform: scale(0.5, 0.5) rotate(0deg); } 60% { opacity: 1; transform-origin: 0%; transform: scale(0.5, 0.5) rotate(0deg); } 80% { opacity: 1; transform-origin: 0% 100%; transform: scale(0.5, 0.5) rotate(0deg); } 100% { opacity: 0; transform-origin: 50% 50%; transform: scale(0, 0) rotate(0deg); } } .psc-holeOut { -webkit-animation-name: holeOut; animation-name: holeOut; } @-webkit-keyframes holeOut { 0% { opacity: 1; transform-origin: 50% 50%; transform: scale(1, 1) rotateY(0deg); } 100% { opacity: 0; transform-origin: 50% 50%; transform: scale(0, 0) rotateY(180deg); } } @keyframes holeOut { 0% { opacity: 1; transform-origin: 50% 50%; transform: scale(1, 1) rotateY(0deg); } 100% { opacity: 0; transform-origin: 50% 50%; transform: scale(0, 0) rotateY(180deg); } } .psc-swashIn { -webkit-animation-name: swashIn; animation-name: swashIn; } @-webkit-keyframes swashIn { 0% { opacity: 0; transform-origin: 50% 50%; transform: scale(0, 0); } 90% { opacity: 1; transform-origin: 50% 50%; transform: scale(0.9, 0.9); } 100% { opacity: 1; transform-origin: 50% 50%; transform: scale(1, 1); } } @keyframes swashIn { 0% { opacity: 0; transform-origin: 50% 50%; transform: scale(0, 0); } 90% { opacity: 1; transform-origin: 50% 50%; transform: scale(0.9, 0.9); } 100% { opacity: 1; transform-origin: 50% 50%; transform: scale(1, 1); } } .psc-swashOut { -webkit-animation-name: swashOut; animation-name: swashOut; } @-webkit-keyframes swashOut { 0% { opacity: 1; transform-origin: 50% 50%; transform: scale(1, 1); } 80% { opacity: 1; transform-origin: 50% 50%; transform: scale(0.9, 0.9); } 100% { opacity: 0; transform-origin: 50% 50%; transform: scale(0, 0); } } @keyframes swashOut { 0% { opacity: 1; transform-origin: 50% 50%; transform: scale(1, 1); } 80% { opacity: 1; transform-origin: 50% 50%; transform: scale(0.9, 0.9); } 100% { opacity: 0; transform-origin: 50% 50%; transform: scale(0, 0); } } .psc-spaceInDown { -webkit-animation-name: spaceInDown; animation-name: spaceInDown; } @-webkit-keyframes spaceInDown { 0% { opacity: 0; transform-origin: 50% 100%; transform: scale(0.2) translate(0%, 200%); } 100% { opacity: 1; transform-origin: 50% 100%; transform: scale(1) translate(0%, 0%); } } @keyframes spaceInDown { 0% { opacity: 0; transform-origin: 50% 100%; transform: scale(0.2) translate(0%, 200%); } 100% { opacity: 1; transform-origin: 50% 100%; transform: scale(1) translate(0%, 0%); } } .psc-spaceInLeft { -webkit-animation-name: spaceInLeft; animation-name: spaceInLeft; } @-webkit-keyframes spaceInLeft { 0% { opacity: 0; transform-origin: 0% 50%; transform: scale(0.2) translate(-200%, 0%); } 100% { opacity: 1; transform-origin: 0% 50%; transform: scale(1) translate(0%, 0%); } } @keyframes spaceInLeft { 0% { opacity: 0; transform-origin: 0% 50%; transform: scale(0.2) translate(-200%, 0%); } 100% { opacity: 1; transform-origin: 0% 50%; transform: scale(1) translate(0%, 0%); } } .psc-spaceInRight { -webkit-animation-name: spaceInRight; animation-name: spaceInRight; } @-webkit-keyframes spaceInRight { 0% { opacity: 0; transform-origin: 100% 50%; transform: scale(0.2) translate(200%, 0%); } 100% { opacity: 1; transform-origin: 100% 50%; transform: scale(1) translate(0%, 0%); } } @keyframes spaceInRight { 0% { opacity: 0; transform-origin: 100% 50%; transform: scale(0.2) translate(200%, 0%); } 100% { opacity: 1; transform-origin: 100% 50%; transform: scale(1) translate(0%, 0%); } } .psc-spaceInUp { -webkit-animation-name: spaceInUp; animation-name: spaceInUp; } @-webkit-keyframes spaceInUp { 0% { opacity: 0; transform-origin: 50% 0%; transform: scale(0.2) translate(0%, -200%); } 100% { opacity: 1; transform-origin: 50% 0%; transform: scale(1) translate(0%, 0%); } } @keyframes spaceInUp { 0% { opacity: 0; transform-origin: 50% 0%; transform: scale(0.2) translate(0%, -200%); } 100% { opacity: 1; transform-origin: 50% 0%; transform: scale(1) translate(0%, 0%); } } .psc-spaceOutDown { -webkit-animation-name: spaceOutDown; animation-name: spaceOutDown; } @-webkit-keyframes spaceOutDown { 0% { opacity: 1; transform-origin: 50% 100%; transform: scale(1) translate(0%, 0%); } 100% { opacity: 0; transform-origin: 50% 100%; transform: scale(0.2) translate(0%, 200%); } } @keyframes spaceOutDown { 0% { opacity: 1; transform-origin: 50% 100%; transform: scale(1) translate(0%, 0%); } 100% { opacity: 0; transform-origin: 50% 100%; transform: scale(0.2) translate(0%, 200%); } } .psc-spaceOutLeft { -webkit-animation-name: spaceOutLeft; animation-name: spaceOutLeft; } @-webkit-keyframes spaceOutLeft { 0% { opacity: 1; transform-origin: 0% 50%; transform: scale(1) translate(0%, 0%); } 100% { opacity: 0; transform-origin: 0% 50%; transform: scale(0.2) translate(-200%, 0%); } } @keyframes spaceOutLeft { 0% { opacity: 1; transform-origin: 0% 50%; transform: scale(1) translate(0%, 0%); } 100% { opacity: 0; transform-origin: 0% 50%; transform: scale(0.2) translate(-200%, 0%); } } .psc-spaceOutRight { -webkit-animation-name: spaceOutRight; animation-name: spaceOutRight; } @-webkit-keyframes spaceOutRight { 0% { opacity: 1; transform-origin: 100% 50%; transform: scale(1) translate(0%, 0%); } 100% { opacity: 0; transform-origin: 100% 50%; transform: scale(0.2) translate(200%, 0%); } } @keyframes spaceOutRight { 0% { opacity: 1; transform-origin: 100% 50%; transform: scale(1) translate(0%, 0%); } 100% { opacity: 0; transform-origin: 100% 50%; transform: scale(0.2) translate(200%, 0%); } } .psc-spaceOutUp { -webkit-animation-name: spaceOutUp; animation-name: spaceOutUp; } @-webkit-keyframes spaceOutUp { 0% { opacity: 1; transform-origin: 50% 0%; transform: scale(1) translate(0%, 0%); } 100% { opacity: 0; transform-origin: 50% 0%; transform: scale(0.2) translate(0%, -200%); } } @keyframes spaceOutUp { 0% { opacity: 1; transform-origin: 50% 0%; transform: scale(1) translate(0%, 0%); } 100% { opacity: 0; transform-origin: 50% 0%; transform: scale(0.2) translate(0%, -200%); } } .psc-perspectiveDown { -webkit-animation-name: perspectiveDown; animation-name: perspectiveDown; } @-webkit-keyframes perspectiveDown { 0% { transform-origin: 0 100%; transform: perspective(800px) rotateX(0deg); } 100% { transform-origin: 0 100%; transform: perspective(800px) rotateX(-180deg); } } @keyframes perspectiveDown { 0% { transform-origin: 0 100%; transform: perspective(800px) rotateX(0deg); } 100% { transform-origin: 0 100%; transform: perspective(800px) rotateX(-180deg); } } .psc-perspectiveDownReturn { -webkit-animation-name: perspectiveDownReturn; animation-name: perspectiveDownReturn; } @-webkit-keyframes perspectiveDownReturn { 0% { transform-origin: 0 100%; transform: perspective(800px) rotateX(-180deg); } 100% { transform-origin: 0 100%; transform: perspective(800px) rotateX(0deg); } } @keyframes perspectiveDownReturn { 0% { transform-origin: 0 100%; transform: perspective(800px) rotateX(-180deg); } 100% { transform-origin: 0 100%; transform: perspective(800px) rotateX(0deg); } } .psc-perspectiveLeft { -webkit-animation-name: perspectiveLeft; animation-name: perspectiveLeft; } @-webkit-keyframes perspectiveLeft { 0% { transform-origin: 0 0; transform: perspective(800px) rotateY(0deg); } 100% { transform-origin: 0 0; transform: perspective(800px) rotateY(-180deg); } } @keyframes perspectiveLeft { 0% { transform-origin: 0 0; transform: perspective(800px) rotateY(0deg); } 100% { transform-origin: 0 0; transform: perspective(800px) rotateY(-180deg); } } .psc-perspectiveLeftReturn { -webkit-animation-name: perspectiveLeftReturn; animation-name: perspectiveLeftReturn; } @-webkit-keyframes perspectiveLeftReturn { 0% { transform-origin: 0 0; transform: perspective(800px) rotateY(-180deg); } 100% { transform-origin: 0 0; transform: perspective(800px) rotateY(0deg); } } @keyframes perspectiveLeftReturn { 0% { transform-origin: 0 0; transform: perspective(800px) rotateY(-180deg); } 100% { transform-origin: 0 0; transform: perspective(800px) rotateY(0deg); } } .psc-perspectiveRight { -webkit-animation-name: perspectiveRight; animation-name: perspectiveRight; } @-webkit-keyframes perspectiveRight { 0% { transform-origin: 100% 0; transform: perspective(800px) rotateY(0deg); } 100% { transform-origin: 100% 0; transform: perspective(800px) rotateY(180deg); } } @keyframes perspectiveRight { 0% { transform-origin: 100% 0; transform: perspective(800px) rotateY(0deg); } 100% { transform-origin: 100% 0; transform: perspective(800px) rotateY(180deg); } } .psc-perspectiveRightReturn { -webkit-animation-name: perspectiveRightReturn; animation-name: perspectiveRightReturn; } @-webkit-keyframes perspectiveRightReturn { 0% { transform-origin: 100% 0; transform: perspective(800px) rotateY(180deg); } 100% { transform-origin: 100% 0; transform: perspective(800px) rotateY(0deg); } } @keyframes perspectiveRightReturn { 0% { transform-origin: 100% 0; transform: perspective(800px) rotateY(180deg); } 100% { transform-origin: 100% 0; transform: perspective(800px) rotateY(0deg); } } .psc-perspectiveUp { -webkit-animation-name: perspectiveUp; animation-name: perspectiveUp; } @-webkit-keyframes perspectiveUp { 0% { transform-origin: 0 0; transform: perspective(800px) rotateX(0deg); } 100% { transform-origin: 0 0; transform: perspective(800px) rotateX(180deg); } } @keyframes perspectiveUp { 0% { transform-origin: 0 0; transform: perspective(800px) rotateX(0deg); } 100% { transform-origin: 0 0; transform: perspective(800px) rotateX(180deg); } } .psc-perspectiveUpReturn { -webkit-animation-name: perspectiveUpReturn; animation-name: perspectiveUpReturn; } @-webkit-keyframes perspectiveUpReturn { 0% { transform-origin: 0 0; transform: perspective(800px) rotateX(180deg); } 100% { transform-origin: 0 0; transform: perspective(800px) rotateX(0deg); } } @keyframes perspectiveUpReturn { 0% { transform-origin: 0 0; transform: perspective(800px) rotateX(180deg); } 100% { transform-origin: 0 0; transform: perspective(800px) rotateX(0deg); } } .psc-rotateDown { -webkit-animation-name: rotateDown; animation-name: rotateDown; } @-webkit-keyframes rotateDown { 0% { opacity: 1; transform-origin: 0 0; transform: perspective(800px) rotateX(0deg) translateZ(0px); } 100% { opacity: 0; transform-origin: 50% 100%; transform: perspective(800px) rotateX(-180deg) translateZ(300px); } } @keyframes rotateDown { 0% { opacity: 1; transform-origin: 0 0; transform: perspective(800px) rotateX(0deg) translateZ(0px); } 100% { opacity: 0; transform-origin: 50% 100%; transform: perspective(800px) rotateX(-180deg) translateZ(300px); } } .psc-rotateLeft { -webkit-animation-name: rotateLeft; animation-name: rotateLeft; } @-webkit-keyframes rotateLeft { 0% { opacity: 1; transform-origin: 0 0; transform: perspective(800px) rotateY(0deg) translateZ(0px); } 100% { opacity: 0; transform-origin: 50% 0; transform: perspective(800px) rotateY(-180deg) translateZ(300px); } } @keyframes rotateLeft { 0% { opacity: 1; transform-origin: 0 0; transform: perspective(800px) rotateY(0deg) translateZ(0px); } 100% { opacity: 0; transform-origin: 50% 0; transform: perspective(800px) rotateY(-180deg) translateZ(300px); } } .psc-rotateRight { -webkit-animation-name: rotateRight; animation-name: rotateRight; } @-webkit-keyframes rotateRight { 0% { opacity: 1; transform-origin: 0 0; transform: perspective(800px) rotateY(0deg) translate3d(0px); } 100% { opacity: 0; transform-origin: 50% 0; transform: perspective(800px) rotateY(180deg) translateZ(150px); } } @keyframes rotateRight { 0% { opacity: 1; transform-origin: 0 0; transform: perspective(800px) rotateY(0deg) translate3d(0px); } 100% { opacity: 0; transform-origin: 50% 0; transform: perspective(800px) rotateY(180deg) translateZ(150px); } } .psc-rotateUp { -webkit-animation-name: rotateUp; animation-name: rotateUp; } @-webkit-keyframes rotateUp { 0% { opacity: 1; transform-origin: 0 0; transform: perspective(800px) rotateX(0deg) translateZ(0px); } 100% { opacity: 0; transform-origin: 50% 0; transform: perspective(800px) rotateX(180deg) translateZ(100px); } } @keyframes rotateUp { 0% { opacity: 1; transform-origin: 0 0; transform: perspective(800px) rotateX(0deg) translateZ(0px); } 100% { opacity: 0; transform-origin: 50% 0; transform: perspective(800px) rotateX(180deg) translateZ(100px); } } .psc-slideDown { -webkit-animation-name: slideDown; animation-name: slideDown; } @-webkit-keyframes slideDown { 0% { transform-origin: 0 0; transform: translateY(0%); } 100% { transform-origin: 0 0; transform: translateY(100%); } } @keyframes slideDown { 0% { transform-origin: 0 0; transform: translateY(0%); } 100% { transform-origin: 0 0; transform: translateY(100%); } } .psc-bounceUp { -webkit-animation-name: bounceUp; animation-name: bounceUp; } @-webkit-keyframes bounceUp { 0% { transform-origin: 100% 100%; transform: scaleY(0%); } 50% { transform-origin: 100% 100%; transform: scaleY(110%); } 100% { transform-origin: 100% 100%; transform: scaleY(100%); } } @keyframes bounceUp { 0% { transform-origin: 100% 100%; transform: scaleY(0%); } 50% { transform-origin: 100% 100%; transform: scaleY(110%); } 100% { transform-origin: 100% 100%; transform: scaleY(100%); } } .psc-bounceRight { -webkit-animation-name: bounceRight; animation-name: bounceRight; } @-webkit-keyframes bounceRight { 0% { transform-origin: 0 0; transform: scaleX(0%); } 50% { transform-origin: 0 0; transform: scaleX(110%); } 100% { transform-origin: 0 0; transform: scaleX(100%); } } @keyframes bounceRight { 0% { transform-origin: 0 0; transform: scaleX(0%); } 50% { transform-origin: 0 0; transform: scaleX(110%); } 100% { transform-origin: 0 0; transform: scaleX(100%); } } .psc-slideDownReturn { -webkit-animation-name: slideDownReturn; animation-name: slideDownReturn; } @-webkit-keyframes slideDownReturn { 0% { transform-origin: 0 0; transform: translateY(100%); } 100% { transform-origin: 0 0; transform: translateY(0%); } } @keyframes slideDownReturn { 0% { transform-origin: 0 0; transform: translateY(100%); } 100% { transform-origin: 0 0; transform: translateY(0%); } } .psc-slideLeft { -webkit-animation-name: slideLeft; animation-name: slideLeft; } @-webkit-keyframes slideLeft { 0% { transform-origin: 0 0; transform: translateX(0%); } 100% { transform-origin: 0 0; transform: translateX(-100%); } } @keyframes slideLeft { 0% { transform-origin: 0 0; transform: translateX(0%); } 100% { transform-origin: 0 0; transform: translateX(-100%); } } .psc-slideLeftReturn { -webkit-animation-name: slideLeftReturn; animation-name: slideLeftReturn; } @-webkit-keyframes slideLeftReturn { 0% { transform-origin: 0 0; transform: translateX(-100%); } 100% { transform-origin: 0 0; transform: translateX(0%); } } @keyframes slideLeftReturn { 0% { transform-origin: 0 0; transform: translateX(-100%); } 100% { transform-origin: 0 0; transform: translateX(0%); } } .psc-slideRight { -webkit-animation-name: slideRight; animation-name: slideRight; } @-webkit-keyframes slideRight { 0% { transform-origin: 0 0; transform: translateX(0%); } 100% { transform-origin: 0 0; transform: translateX(100%); } } @keyframes slideRight { 0% { transform-origin: 0 0; transform: translateX(0%); } 100% { transform-origin: 0 0; transform: translateX(100%); } } .psc-slideRightReturn { -webkit-animation-name: slideRightReturn; animation-name: slideRightReturn; } @-webkit-keyframes slideRightReturn { 0% { transform-origin: 0 0; transform: translateX(100%); } 100% { transform-origin: 0 0; transform: translateX(0%); } } @keyframes slideRightReturn { 0% { transform-origin: 0 0; transform: translateX(100%); } 100% { transform-origin: 0 0; transform: translateX(0%); } } .psc-slideUp { -webkit-animation-name: slideUp; animation-name: slideUp; } @-webkit-keyframes slideUp { 0% { opacity: 0; transform-origin: 0 0; transform: translateY(0%); } 100% { opacity: 1; transform-origin: 0 0; transform: translateY(-100%); } } @keyframes slideUp { 0% { opacity: 0; transform-origin: 0 0; transform: translateY(100%); } 100% { opacity: 1; transform-origin: 0 0; transform: translateY(0%); } } .psc-slideUpReturn { -webkit-animation-name: slideUpReturn; animation-name: slideUpReturn; } @-webkit-keyframes slideUpReturn { 0% { transform-origin: 0 0; transform: translateY(-100%); } 100% { transform-origin: 0 0; transform: translateY(0%); } } @keyframes slideUpReturn { 0% { transform-origin: 0 0; transform: translateY(-100%); } 100% { transform-origin: 0 0; transform: translateY(0%); } } .psc-openDownLeft { -webkit-animation-name: openDownLeft; animation-name: openDownLeft; } @-webkit-keyframes openDownLeft { 0% { transform-origin: bottom left; transform: rotate(0deg); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 100% { transform-origin: bottom left; transform: rotate(-110deg); -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } } @keyframes openDownLeft { 0% { transform-origin: bottom left; transform: rotate(0deg); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 100% { transform-origin: bottom left; transform: rotate(-110deg); -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } } .psc-openDownLeftReturn { -webkit-animation-name: openDownLeftReturn; animation-name: openDownLeftReturn; } @-webkit-keyframes openDownLeftReturn { 0% { transform-origin: bottom left; transform: rotate(-110deg); -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } 100% { transform-origin: bottom left; transform: rotate(0deg); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } } @keyframes openDownLeftReturn { 0% { transform-origin: bottom left; transform: rotate(-110deg); -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } 100% { transform-origin: bottom left; transform: rotate(0deg); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } } .psc-openDownRight { -webkit-animation-name: openDownRight; animation-name: openDownRight; } @-webkit-keyframes openDownRight { 0% { transform-origin: bottom right; transform: rotate(0deg); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 100% { transform-origin: bottom right; transform: rotate(110deg); -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } } @keyframes openDownRight { 0% { transform-origin: bottom right; transform: rotate(0deg); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 100% { transform-origin: bottom right; transform: rotate(110deg); -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } } .psc-openDownRightReturn { -webkit-animation-name: openDownRightReturn; animation-name: openDownRightReturn; } @-webkit-keyframes openDownRightReturn { 0% { transform-origin: bottom right; transform: rotate(110deg); -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } 100% { transform-origin: bottom right; transform: rotate(0deg); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } } @keyframes openDownRightReturn { 0% { transform-origin: bottom right; transform: rotate(110deg); -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } 100% { transform-origin: bottom right; transform: rotate(0deg); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } } .psc-openUpLeft { -webkit-animation-name: openUpLeft; animation-name: openUpLeft; } @-webkit-keyframes openUpLeft { 0% { transform-origin: top left; transform: rotate(0deg); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 100% { transform-origin: top left; transform: rotate(110deg); -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } } @keyframes openUpLeft { 0% { transform-origin: top left; transform: rotate(0deg); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 100% { transform-origin: top left; transform: rotate(110deg); -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } } .psc-openUpLeftReturn { -webkit-animation-name: openUpLeftReturn; animation-name: openUpLeftReturn; } @-webkit-keyframes openUpLeftReturn { 0% { transform-origin: top left; transform: rotate(110deg); -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } 100% { transform-origin: top left; transform: rotate(0deg); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } } @keyframes openUpLeftReturn { 0% { transform-origin: top left; transform: rotate(110deg); -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } 100% { transform-origin: top left; transform: rotate(0deg); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } } .psc-openUpRight { -webkit-animation-name: openUpRight; animation-name: openUpRight; } @-webkit-keyframes openUpRight { 0% { transform-origin: top right; transform: rotate(0deg); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 100% { transform-origin: top right; transform: rotate(-110deg); -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } } @keyframes openUpRight { 0% { transform-origin: top right; transform: rotate(0deg); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 100% { transform-origin: top right; transform: rotate(-110deg); -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } } .psc-openUpRightReturn { -webkit-animation-name: openUpRightReturn; animation-name: openUpRightReturn; } @-webkit-keyframes openUpRightReturn { 0% { transform-origin: top right; transform: rotate(-110deg); -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } 100% { transform-origin: top right; transform: rotate(0deg); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } } @keyframes openUpRightReturn { 0% { transform-origin: top right; transform: rotate(-110deg); -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } 100% { transform-origin: top right; transform: rotate(0deg); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } } .psc-openDownLeftOut { -webkit-animation-name: openDownLeftOut; animation-name: openDownLeftOut; } @-webkit-keyframes openDownLeftOut { 0% { opacity: 1; transform-origin: bottom left; transform: rotate(0deg); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 100% { opacity: 0; transform-origin: bottom left; transform: rotate(-110deg); -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } } @keyframes openDownLeftOut { 0% { opacity: 1; transform-origin: bottom left; transform: rotate(0deg); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 100% { opacity: 0; transform-origin: bottom left; transform: rotate(-110deg); -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } } .psc-openDownRightOut { -webkit-animation-name: openDownRightOut; animation-name: openDownRightOut; } @-webkit-keyframes openDownRightOut { 0% { opacity: 1; transform-origin: bottom right; transform: rotate(0deg); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 100% { opacity: 0; transform-origin: bottom right; transform: rotate(110deg); -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } } @keyframes openDownRightOut { 0% { opacity: 1; transform-origin: bottom right; transform: rotate(0deg); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 100% { opacity: 0; transform-origin: bottom right; transform: rotate(110deg); -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } } .psc-openUpLeftOut { -webkit-animation-name: openUpLeftOut; animation-name: openUpLeftOut; } @-webkit-keyframes openUpLeftOut { 0% { opacity: 1; transform-origin: top left; transform: rotate(0deg); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 100% { opacity: 0; transform-origin: top left; transform: rotate(110deg); -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } } @keyframes openUpLeftOut { 0% { opacity: 1; transform-origin: top left; transform: rotate(0deg); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 100% { opacity: 0; transform-origin: top left; transform: rotate(110deg); -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } } .psc-openUpRightOut { -webkit-animation-name: openUpRightOut; animation-name: openUpRightOut; } @-webkit-keyframes openUpRightOut { 0% { opacity: 1; transform-origin: top right; transform: rotate(0deg); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 100% { opacity: 0; transform-origin: top right; transform: rotate(-110deg); -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } } @keyframes openUpRightOut { 0% { opacity: 1; transform-origin: top right; transform: rotate(0deg); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 100% { opacity: 0; transform-origin: top right; transform: rotate(-110deg); -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } } .psc-tinDownIn { -webkit-animation-name: tinDownIn; animation-name: tinDownIn; } @-webkit-keyframes tinDownIn { 0% { opacity: 0; transform: scale(1, 1) translateY(900%); } 50%, 70%, 90% { opacity: 1; transform: scale(1.1, 1.1) translateY(0); } 60%, 80%, 100% { opacity: 1; transform: scale(1, 1) translateY(0); } } @keyframes tinDownIn { 0% { opacity: 0; transform: scale(1, 1) translateY(900%); } 50%, 70%, 90% { opacity: 1; transform: scale(1.1, 1.1) translateY(0); } 60%, 80%, 100% { opacity: 1; transform: scale(1, 1) translateY(0); } } .psc-tinDownOut { -webkit-animation-name: tinDownOut; animation-name: tinDownOut; } @-webkit-keyframes tinDownOut { 0%, 20%, 40%, 50% { opacity: 1; transform: scale(1, 1) translateY(0); } 10%, 30% { opacity: 1; transform: scale(1.1, 1.1) translateY(0); } 100% { opacity: 0; transform: scale(1, 1) translateY(900%); } } @keyframes tinDownOut { 0%, 20%, 40%, 50% { opacity: 1; transform: scale(1, 1) translateY(0); } 10%, 30% { opacity: 1; transform: scale(1.1, 1.1) translateY(0); } 100% { opacity: 0; transform: scale(1, 1) translateY(900%); } } .psc-tinLeftIn { -webkit-animation-name: tinLeftIn; animation-name: tinLeftIn; } @-webkit-keyframes tinLeftIn { 0% { opacity: 0; transform: scale(1, 1) translateX(-900%); } 50%, 70%, 90% { opacity: 1; transform: scale(1.1, 1.1) translateX(0); } 60%, 80%, 100% { opacity: 1; transform: scale(1, 1) translateX(0); } } @keyframes tinLeftIn { 0% { opacity: 0; transform: scale(1, 1) translateX(-900%); } 50%, 70%, 90% { opacity: 1; transform: scale(1.1, 1.1) translateX(0); } 60%, 80%, 100% { opacity: 1; transform: scale(1, 1) translateX(0); } } .psc-tinLeftOut { -webkit-animation-name: tinLeftOut; animation-name: tinLeftOut; } @-webkit-keyframes tinLeftOut { 0%, 20%, 40%, 50% { opacity: 1; transform: scale(1, 1) translateX(0); } 10%, 30% { opacity: 1; transform: scale(1.1, 1.1) translateX(0); } 100% { opacity: 0; transform: scale(1, 1) translateX(-900%); } } @keyframes tinLeftOut { 0%, 20%, 40%, 50% { opacity: 1; transform: scale(1, 1) translateX(0); } 10%, 30% { opacity: 1; transform: scale(1.1, 1.1) translateX(0); } 100% { opacity: 0; transform: scale(1, 1) translateX(-900%); } } .psc-tinRightIn { -webkit-animation-name: tinRightIn; animation-name: tinRightIn; } @-webkit-keyframes tinRightIn { 0% { opacity: 0; transform: scale(1, 1) translateX(900%); } 50%, 70%, 90% { opacity: 1; transform: scale(1.1, 1.1) translateX(0); } 60%, 80%, 100% { opacity: 1; transform: scale(1, 1) translateX(0); } } @keyframes tinRightIn { 0% { opacity: 0; transform: scale(1, 1) translateX(900%); } 50%, 70%, 90% { opacity: 1; transform: scale(1.1, 1.1) translateX(0); } 60%, 80%, 100% { opacity: 1; transform: scale(1, 1) translateX(0); } } .psc-tinRightOut { -webkit-animation-name: tinRightOut; animation-name: tinRightOut; } @-webkit-keyframes tinRightOut { 0%, 20%, 40%, 50% { opacity: 1; transform: scale(1, 1) translateX(0); } 10%, 30% { opacity: 1; transform: scale(1.1, 1.1) translateX(0); } 100% { opacity: 0; transform: scale(1, 1) translateX(900%); } } @keyframes tinRightOut { 0%, 20%, 40%, 50% { opacity: 1; transform: scale(1, 1) translateX(0); } 10%, 30% { opacity: 1; transform: scale(1.1, 1.1) translateX(0); } 100% { opacity: 0; transform: scale(1, 1) translateX(900%); } } .psc-tinUpIn { -webkit-animation-name: tinUpIn; animation-name: tinUpIn; } @-webkit-keyframes tinUpIn { 0% { opacity: 0; transform: scale(1, 1) translateY(-900%); } 50%, 70%, 90% { opacity: 1; transform: scale(1.1, 1.1) translateY(0); } 60%, 80%, 100% { opacity: 1; transform: scale(1, 1) translateY(0); } } @keyframes tinUpIn { 0% { opacity: 0; transform: scale(1, 1) translateY(-900%); } 50%, 70%, 90% { opacity: 1; transform: scale(1.1, 1.1) translateY(0); } 60%, 80%, 100% { opacity: 1; transform: scale(1, 1) translateY(0); } } .psc-tinUpOut { -webkit-animation-name: tinUpOut; animation-name: tinUpOut; } @-webkit-keyframes tinUpOut { 0%, 20%, 40%, 50% { opacity: 1; transform: scale(1, 1) translateY(0); } 10%, 30% { opacity: 1; transform: scale(1.1, 1.1) translateY(0); } 100% { opacity: 0; transform: scale(1, 1) translateY(-900%); } } @keyframes tinUpOut { 0%, 20%, 40%, 50% { opacity: 1; transform: scale(1, 1) translateY(0); } 10%, 30% { opacity: 1; transform: scale(1.1, 1.1) translateY(0); } 100% { opacity: 0; transform: scale(1, 1) translateY(-900%); } } .psc-magictime { -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both; } @media (print), (prefers-reduced-motion) { .psc-magictime { -webkit-animation: unset !important; animation: unset !important; transition: none !important; } } @font-face { font-family: "Noto Sans"; font-style: normal; font-weight: 400; src: local('Noto Sans'), local('NotoSans'), url('/data/perspective/fonts/noto-sans-v8-latin-regular.ttf') format('truetype'); } @font-face { font-family: "Noto Sans"; font-style: normal; font-weight: 500; src: local('Noto Sans Medium'), local('NotoSans-Medium'), url('/data/perspective/fonts/noto-sans-v8-latin-medium.ttf') format('truetype'); } @font-face { font-family: "Noto Sans"; font-style: normal; font-weight: 700; src: local('Noto Sans Bold'), local('NotoSans-Bold'), url('/data/perspective/fonts/noto-sans-v8-latin-700.ttf') format('truetype'); } @font-face { font-family: "Roboto"; src: url("/data/perspective/fonts/Roboto-Regular.woff"); } @font-face { font-family: "Roboto"; font-weight: 500; src: url("/data/perspective/fonts/Roboto-Medium.woff"); } @font-face { font-family: "Roboto"; font-weight: 300; src: url("/data/perspective/fonts/Roboto-Light.woff"); } @font-face { font-family: "Roboto"; font-weight: 700; src: url("/data/perspective/fonts/Roboto-Bold.woff"); } @font-face { font-family: "Roboto-italic"; font-style: italic; src: url("/data/perspective/fonts/Roboto-Italic.woff"); } @font-face { font-family: "Roboto-mono"; src: url("/data/perspective/fonts/RobotoMono-Regular.woff"); } @font-face { font-family: "Roboto-condensed"; src: url("/data/perspective/fonts/RobotoCondensed-Regular.woff"); } @font-face { font-family: "MontserratAlternates"; font-weight: 400; src: url("/data/perspective/fonts/MontserratAlternates-Regular.ttf"); } @font-face { font-family: "MontserratAlternates"; font-weight: 400; font-style: italic; src: url("/data/perspective/fonts/MontserratAlternates-Italic.ttf"); } @font-face { font-family: "MontserratAlternates"; font-weight: 100; src: url("/data/perspective/fonts/MontserratAlternates-Thin.ttf"); } @font-face { font-family: "MontserratAlternates"; font-weight: 100; font-style: italic; src: url("/data/perspective/fonts/MontserratAlternates-ThinItalic.ttf"); } @font-face { font-family: "MontserratAlternates"; font-weight: 200; src: url("/data/perspective/fonts/MontserratAlternates-ExtraLight.ttf"); } @font-face { font-family: "MontserratAlternates"; font-weight: 200; font-style: italic; src: url("/data/perspective/fonts/MontserratAlternates-ExtraLightItalic.ttf"); } @font-face { font-family: "MontserratAlternates"; font-weight: 300; src: url("/data/perspective/fonts/MontserratAlternates-Light.ttf"); } @font-face { font-family: "MontserratAlternates"; font-weight: 300; font-style: italic; src: url("/data/perspective/fonts/MontserratAlternates-LightItalic.ttf"); } @font-face { font-family: "MontserratAlternates"; font-weight: 500; src: url("/data/perspective/fonts/MontserratAlternates-Medium.ttf"); } @font-face { font-family: "MontserratAlternates"; font-weight: 500; font-style: italic; src: url("/data/perspective/fonts/MontserratAlternates-MediumItalic.ttf"); } @font-face { font-family: "MontserratAlternates"; font-weight: 600; src: url("/data/perspective/fonts/MontserratAlternates-SemiBold.ttf"); } @font-face { font-family: "MontserratAlternates"; font-weight: 600; font-style: italic; src: url("/data/perspective/fonts/MontserratAlternates-SemiBoldItalic.ttf"); } @font-face { font-family: "MontserratAlternates"; font-weight: 700; src: url("/data/perspective/fonts/MontserratAlternates-Bold.ttf"); } @font-face { font-family: "MontserratAlternates"; font-weight: 700; font-style: italic; src: url("/data/perspective/fonts/MontserratAlternates-BoldItalic.ttf"); } @font-face { font-family: "MontserratAlternates"; font-weight: 800; src: url("/data/perspective/fonts/MontserratAlternates-ExtraBold.ttf"); } @font-face { font-family: "MontserratAlternates"; font-weight: 800; font-style: italic; src: url("/data/perspective/fonts/MontserratAlternates-ExtraBoldItalic.ttf"); } @font-face { font-family: "MontserratAlternates"; font-weight: 900; src: url("/data/perspective/fonts/MontserratAlternates-Black.ttf"); } @font-face { font-family: "MontserratAlternates"; font-weight: 900; font-style: italic; src: url("/data/perspective/fonts/MontserratAlternates-BlackItalic.ttf"); } @font-face { font-family: "Montserrat"; font-weight: 400; src: url("/data/perspective/fonts/Montserrat-Regular.ttf"); } @font-face { font-family: "Montserrat"; font-weight: 400; font-style: italic; src: url("/data/perspective/fonts/Montserrat-Italic.ttf"); } @font-face { font-family: "Montserrat"; font-weight: 100; src: url("/data/perspective/fonts/Montserrat-Thin.ttf"); } @font-face { font-family: "Montserrat"; font-weight: 100; font-style: italic; src: url("/data/perspective/fonts/Montserrat-ThinItalic.ttf"); } @font-face { font-family: "Montserrat"; font-weight: 200; src: url("/data/perspective/fonts/Montserrat-ExtraLight.ttf"); } @font-face { font-family: "Montserrat"; font-weight: 200; font-style: italic; src: url("/data/perspective/fonts/Montserrat-ExtraLightItalic.ttf"); } @font-face { font-family: "Montserrat"; font-weight: 300; src: url("/data/perspective/fonts/Montserrat-Light.ttf"); } @font-face { font-family: "Montserrat"; font-weight: 300; font-style: italic; src: url("/data/perspective/fonts/Montserrat-LightItalic.ttf"); } @font-face { font-family: "Montserrat"; font-weight: 500; src: url("/data/perspective/fonts/Montserrat-Medium.ttf"); } @font-face { font-family: "Montserrat"; font-weight: 500; font-style: italic; src: url("/data/perspective/fonts/Montserrat-MediumItalic.ttf"); } @font-face { font-family: "Montserrat"; font-weight: 600; src: url("/data/perspective/fonts/Montserrat-SemiBold.ttf"); } @font-face { font-family: "Montserrat"; font-weight: 600; font-style: italic; src: url("/data/perspective/fonts/Montserrat-SemiBoldItalic.ttf"); } @font-face { font-family: "Montserrat"; font-weight: 700; src: url("/data/perspective/fonts/Montserrat-Bold.ttf"); } @font-face { font-family: "Montserrat"; font-weight: 700; font-style: italic; src: url("/data/perspective/fonts/Montserrat-BoldItalic.ttf"); } @font-face { font-family: "Montserrat"; font-weight: 800; src: url("/data/perspective/fonts/Montserrat-ExtraBold.ttf"); } @font-face { font-family: "Montserrat"; font-weight: 800; font-style: italic; src: url("/data/perspective/fonts/Montserrat-ExtraBoldItalic.ttf"); } @font-face { font-family: "Montserrat"; font-weight: 900; src: url("/data/perspective/fonts/Montserrat-Black.ttf"); } @font-face { font-family: "Montserrat"; font-weight: 900; font-style: italic; src: url("/data/perspective/fonts/Montserrat-BlackItalic.ttf"); } body { font-family: var(--font-NotoSans); font-weight: 400; font-size: 1rem; color: var(--label); background-color: var(--containerRoot); font-size: 100%; } input, textarea, keygen, select, button { font-family: var(--font-NotoSans); font-weight: 400; } :focus { outline: 1px solid var(--callToAction--hover); } ::selection { background: var(--callToActionHighlight); color: var(--label); } body { font-family: var(--font-MontserratAlternates); font-weight: 400; font-size: 1rem; color: var(--label); background-color: var(--containerRoot); font-size: 100%; } input, textarea, keygen, select, button { font-family: var(--font-MontserratAlternates); font-weight: 400; } input:focus, textarea:focus, select:focus { outline: none; } ::selection { background: rgba(12, 41, 61, 0.99); color: var(--label); } .docked-view.docked-view-left .toggle-wrapper { z-index: 22000; } .docked-view.docked-view-right .toggle-wrapper { z-index: 22000; } .docked-view.docked-view-left .toggle-wrapper .view-toggle { margin-left: -16px; height: 32px; width: 32px; display: none; } .docked-view.docked-view-right .toggle-wrapper .view-toggle { margin-left: 10px; height: 32px; width: 32px; display: none; } .docked-view.docked-view-left.dock-cover-shadow-right .toggle-wrapper .view-toggle { margin-left: -16px; height: 32px; width: 32px; display: unset; } .docked-view.docked-view-right.dock-cover-shadow-right .toggle-wrapper .view-toggle { margin-left: 10px; height: 32px; width: 32px; display: unset; } .docked-view .toggle-wrapper .view-toggle .toggle-icon.icon-left, .docked-view .toggle-wrapper .view-toggle .toggle-icon.icon-right { margin-left: 7px; margin-top: 6px; height: 20px; width: 20px; } .docked-view .toggle-wrapper .view-toggle { box-shadow: unset; -webkit-box-shadow: unset; -moz-box-shadow: unset; opacity: 1; } .ia_dockedView__handle { color: var(--neutral-20); background-color: unset; background-image: linear-gradient(90deg, #8e00ff 0%, #ffb200 100%); border-radius: 32px; } .docked-view .toggle-wrapper .view-toggle .toggle-icon { fill: var(--neutral-20); } .ia_dockedView__handle { color: var(--neutral-10); background-color: var(--neutral-90); } .ia_popup { background-color: var(--container); box-shadow: var(--boxShadow5); border: var(--containerBorder); } .ia_popup__header { background-color: var(--containerNested); color: var(--neutral-90); border-bottom: var(--containerBorder); font-size: 0.875rem; } .ia_qualityOverlay { border-width: 1.5px; } .ia_qualityOverlay--error { border-color: var(--error); border-style: solid; border-bottom: none; } .ia_qualityOverlay--error.micro { border-bottom: 1.5px solid var(--error); } .ia_qualityOverlay--unknown { border-color: var(--neutral-100); border-style: dotted; border-bottom: none; } .ia_qualityOverlay--unknown.micro { border-bottom: 1.5px dotted var(--neutral-100); } .ia_qualityOverlay--pending { border-color: var(--indicator); border-style: dashed; border-bottom: none; } .ia_qualityOverlay--pending.micro { border-bottom: 1.5px dashed var(--indicator); } .ia_qualityOverlay__footer { color: var(--neutral-10); } .ia_qualityOverlay__footer--error { background-color: var(--error); } .ia_qualityOverlay__footer--unknown { background-color: var(--neutral-100); color: var(--neutral-10); } .ia_qualityOverlay__footer--pending { background-color: var(--indicator); } .ia_qualityOverlay__icon__outline { fill: var(--containerRoot); } .ia_qualityOverlay__icon--error { color: var(--neutral-10); fill: var(--error); } .ia_qualityOverlay__icon--pending { color: var(--neutral-10); fill: var(--indicator); } .ia_qualityOverlay__icon--unknown { color: var(--neutral-10); fill: var(--neutral-100); } .ia_qualityOverlay__icon--micro--error, .ia_qualityOverlay__icon--micro--pending, .ia_qualityOverlay__icon--micro--unknown { border: white solid 1px; } .ia_qualityOverlay__icon--micro--error { background-color: var(--error); } .ia_qualityOverlay__icon--micro--pending { background-color: var(--indicator); } .ia_qualityOverlay__icon--micro--unknown { background-color: var(--neutral-100); } .ia_alarmTableComponent__toolbar { background-color: var(--containerNested); border-bottom: var(--containerBorder); } .ia_alarmTableComponent__toolbar__tab { color: var(--neutral-50); font-weight: 400; font-size: 0.875rem; line-height: 1.125rem; border-bottom: 3px solid transparent; } .ia_alarmTableComponent__toolbar__tab:hover:not(.ia_alarmTableComponent__toolbar__tab--active), .ia_alarmTableComponent__toolbar__tab:hover:not(.ia_alarmTableComponent__toolbar__tab--active) .ia_alarmTableComponent__toolbar__tab__icon { color: var(--neutral-60); } .ia_alarmTableComponent__toolbar__tab--active { color: var(--neutral-90); font-weight: 500; border-bottom: 3px solid var(--neutral-50); } .ia_alarmTableComponent__toolbar__tab__icon { color: var(--neutral-50); } .ia_alarmTableComponent__toolbar__controlIcon, .ia_alarmTableComponent__toolbar__tab__icon--active { color: var(--neutral-70); } .ia_alarmTableComponent__toolbar__controlIcon--active { color: var(--callToAction); } .ia_alarmTableComponent__toolbar__filter__preFilterButton { outline: none; border-top-right-radius: 0; border-bottom-right-radius: 0; } .ia_alarmTableComponent__toolbar__filter__preFilterButton--active { background-color: var(--callToActionHighlight); } .ia_alarmTableComponent__toolbar__activeFilterInput { background-color: var(--input); border-left: none; height: 2rem; outline: none; } .ia_alarmTableComponent__toolbar__filterResults { font-size: 0.75rem; background-color: var(--container); border-top: 1px solid var(--border); } .ia_alarmTableComponent__toolbar__preFilterCount { font-size: 0.625rem; color: var(--neutral-90); background-color: var(--containerNested); } .ia_alarmTableComponent__toolbar__preFilter__removeAll { border-left: var(--containerBorder); background-color: var(--containerNested); } .ia_alarmTableComponent__toolbar__filter__preFilterContainer { background-color: var(--container); border-top: var(--containerBorder); } .ia_alarmTableComponent__preFilterPill { border: var(--containerBorder); background-color: var(--neutral-20); } .ia_alarmTableComponent__preFilterPill__title { color: var(--neutral-90); font-size: 0.75rem; line-height: 0.875rem; } .ia_alarmTableComponent__preFilters__filter__pager { background-color: var(--neutral-50); color: var(--white); border-left: var(--containerBorder); } .ia_alarmTableComponent__preFilters__filter__pager:hover { background-color: var(--neutral-40); } .ia_alarmTableComponent__preFilters__filter__pager:active { background-color: var(--neutral-60); } .ia_alarmTableComponent__preFilters__filter__pager--disabled { background-color: var(--neutral-60); box-shadow: none; } .ia_alarmTableComponent__preFilters__filter__pager--left { box-shadow: 5px 0px 10px 0px rgba(0, 0, 0, 0.2); border-left: var(--containerBorder); } .ia_alarmTableComponent__preFilters__filter__pager--right { box-shadow: -5px 0px 10px 0px rgba(0, 0, 0, 0.2); } .ia_alarmTableComponent__filter__searchPlaceholder, .ia_alarmTableComponent__filter__closeToggle { background-color: var(--input); border: var(--containerBorder); } .ia_alarmTableComponent__modalMenuHeader { font-size: 0.875rem; font-weight: 500; color: var(--neutral-90); background-color: var(--containerNested); } .ia_alarmTableComponent__modalMenuTitle { font-size: 0.75rem; border-bottom: var(--containerBorder); color: var(--neutral-90); } .ia_alarmTableComponent__modalMenuItem { color: var(--neutral-90); line-height: 2rem; font-size: 0.875rem; } .ia_alarmTableComponent__modalMenuItem:hover { color: var(--neutral-90); background-color: var(--callToActionHighlight); } .ia_alarmTableComponent__modalMenuCategory { background-color: var(--container); font-weight: 500; font-size: 0.75rem; color: var(--neutral-60); border-top: var(--containerBorder); border-bottom: var(--containerBorder); } .ia_alarmTableComponent__body__row { color: var(--neutral-90); border-bottom: var(--containerBorder); } .ia_alarmTableComponent__foot { border: 0px solid var(--border); background-color: var(--containerNested); color: var(--neutral-90); } .ia_alarmTableComponent__foot--show { border: var(--containerBorder); } .ia_alarmTableComponent__alarmDetails__titleBar { background-color: var(--neutral-30); font-size: 0.875rem; line-height: 1rem; color: var(--neutral-90); box-shadow: 0px 13px 15px -1px rgba(0, 0, 0, 0.15); border-bottom: var(--containerBorder); } .ia_alarmTableComponent__alarmDetails__category { background-color: var(--neutral-10); } .ia_alarmTableComponent__alarmDetails__category__item { color: var(--neutral-90); font-size: 0.875rem; line-height: 1rem; border-top: var(--containerBorder); } .ia_alarmTableComponent__alarmDetails__category__item__label { border-right: var(--containerBorder); } .ia_alarmTableComponent__alarmDetails__category__titleBar { background-color: var(--neutral-10); border-top: var(--containerBorder); color: var(--neutral-90); font-weight: 600; font-size: 0.75rem; line-height: 0.875rem; } .ia_alarmTableComponent__alarmDetails__notesContainer { background-color: var(--neutral-10); } .ia_alarmTableComponent__alarmNotesModal__titleBar { background-color: var(--neutral-30); box-shadow: 0px 13px 15px -1px rgba(0, 0, 0, 0.15); font-size: 0.875rem; line-height: 1rem; color: var(--neutral-90); } .ia_alarmPropertiesTable { border-bottom: var(--containerBorder); background-color: var(--container); } .ia_alarmPropertiesTable__category__titleBar { border-top: var(--containerBorder); background-color: var(--neutral-10); color: var(--border); font-weight: 600; font-size: 0.75rem; line-height: 0.875em; } .ia_alarmPropertiesTable__categoryTable__row { color: var(--neutral-90); border-top: var(--containerBorder); font-size: 0.75rem; line-height: 0.875em; } .ia_alarmPropertiesTable__categoryTable__row__label { border-right: var(--containerBorder); } .ia_button--primary, .ia_button--secondary { font-size: 0.875rem; font-weight: 700; border-radius: var(--borderRadius); -webkit-border-radius: var(--borderRadius); cursor: pointer; -webkit-transition-duration: 0.1s; transition-duration: 0.1s; transition-property: box-shadow, background-color; border-width: 3px; } .ia_button--primary:enabled:hover, .ia_button--secondary:enabled:hover { box-shadow: var(--boxShadow2); background-color: var(--callToAction--hover); } .ia_button--primary { background-color: var(--callToAction); border: var(--containerBorder); color: var(--neutral-100); border-color: var(--callToAction--hover); } .ia_button--primary svg, .ia_button--secondary svg { fill: currentColor; } .ia_button--primary:enabled:active { box-shadow: var(--boxShadow--inset); border: none; background-color: var(--callToAction--active); } .ia_button--primary--disabled { background-color: var(--callToAction--disabled); border: var(--border--disabled); color: var(--neutral-30); cursor: not-allowed; } .ia_button--secondary { background-color: var(--neutral-10); border: var(--containerBorder); color: var(--neutral-100); } .ia_button--secondary:enabled:active { box-shadow: var(--boxShadow--inset); } .ia_button--secondary--disabled { background-color: var(--border--disabled); border: 1px solid var(--border--disabled); color: var(--neutral-30); cursor: not-allowed; } .ia_checkbox__checkedIcon, .ia_checkbox__uncheckedIcon, .ia_checkbox__indeterminateIcon { transition: fill 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; } .ia_checkbox__icon--useColor { fill: currentColor; } .ia_checkbox .ia_checkbox__checkedIcon, .ia_checkbox .ia_checkbox__indeterminateIcon { color: var(--orange); } .ia_checkbox .ia_checkbox__uncheckedIcon { color: var(--checkbox--unchecked); } .ia_checkbox .ia_checkbox__checkedIcon--disabled, .ia_checkbox .ia_checkbox__uncheckedIcon--disabled, .ia_checkbox .ia_checkbox__indeterminateIcon--disabled { color: var(--checkbox--disabled); } .ia_checkbox:hover input:enabled~.ia_checkbox__checkedIcon, .ia_checkbox:hover input:enabled~.ia_checkbox__indeterminateIcon { filter: brightness(1.2); } .ia_checkbox:hover input:enabled~.ia_checkbox__uncheckedIcon { filter: brightness(0.5); } .ia_checkbox input:enabled:active~.ia_checkbox__checkedIcon, .ia_checkbox input:enabled:active~.ia_checkbox__uncheckedIcon, .ia_checkbox input:enabled:active~.ia_checkbox__indeterminateIcon { filter: brightness(0.7); } .ia_componentModal { color: var(--containerRoot); background-color: var(--containerRoot); border: var(--containerBorder); } .ia_componentModal--fullViewOverlay { background-color: var(--opacity-85); } .ia_container--root { background-color: var(--containerRoot); } .ia_container--secondary { background-color: var(--container); } .ia_contextMenu { background: var(--container); color: var(--neutral-90); } .ia_dashboardComponent__widget.dashboard-widget { border: none; } .ia_dashboardComponent__widget__body.dashboard-widget-body { background-color: var(--containerRoot); } .ia_dashboardComponent__widget--editing.dashboard-widget { border-width: 4px; border-style: dashed; border-color: var(--info); border-image: none !important; } .ia_dashboardComponent__widget--configuring.dashboard-widget { border-width: 4px; border-style: solid; border-color: var(--info); border-image: none !important; } .ia_dashboardComponent__widget__resizeHandle__handle { border: 2px solid var(--info) !important; background: var(--info) !important; } .ia_dashboardComponent__widget__resizeHandle__handle--configuring.ia_dashboardComponent__widget__resizeHandle__handle { border: none !important; background: none !important; background-color: transparent !important; } .widget-resize-handle { position: absolute; width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; z-index: 99999; background-color: transparent; } .ia_dashboardComponent__cell { background-color: var(--neutral-10) !important; } .ia_dateRangePicker { color: var(--label); } .ia_dateRangePicker--disabled { color: var(--label--disabled); } .ia_dateRangePicker__calendarBar__dayOfWeekTile { color: var(--neutral-90); font-size: 0.875rem; line-height: 1rem; font-weight: 500; } .ia_dateRangePicker__calendar__dayTile { font-size: 0.875rem; line-height: 1rem; color: inherit; border: 2px solid transparent; } .ia_dateRangePicker__calendar__dayTile--fillerTile { color: var(--neutral-70); } .ia_dateRangePicker__calendar__dayTile--node { border: 2px solid var(--callToAction); font-weight: 500; border-radius: var(--borderRadius); } .ia_dateRangePicker__calendar__dayTile--node--disabled { border-color: var(--callToAction--disabled); } .ia_dateRangePicker__calendar__dayTile--rangeNode { background-color: var(--callToAction); color: var(--neutral-90); font-weight: 500; border-radius: var(--borderRadius); } .ia_dateRangePicker__calendar__dayTile--range { background-color: var(--callToActionHighlight); border-radius: 0; } .ia_dateRangePicker__calendar__dayTile--outOfRange { color: var(--neutral-70); } .ia_dateRangePicker__calendar__dayTile:hover:not(.ia_dateRangePicker__calendar__dayTile--fillerTile):not(.ia_dateRangePicker__calendar__dayTile--node):not(.ia_dateRangePicker__calendar__dayTile--rangeNode):not(.hasTouch) { background-color: rgba(71, 169, 229, 0.3); } .ia_dateRangeTimePicker { color: var(--neutral-90); } .ia_dateRangeTimePicker__rangeInfo { line-height: 1.125rem; font-size: 0.875rem; } .ia_dateRangeTimePicker__clearRange { color: var(--callToAction); font-weight: 500; font-size: 0.75rem; text-decoration: underline; } .ia_dateRangeTimePicker__timeInfo { font-weight: 500; line-height: 1.125rem; font-size: 0.875rem; } .ia_dropdown { background-color: #00000000; border-left: var(--containerBorder); border-left-width: 3px; border-radius: 0px 0px 0px 20px; color: var(--label); font-size: 0.875rem; border-bottom: var(--containerBorder); border-bottom-width: 3px; border-color: var(--callToAction--active); } .ia_dropdown__secondary { background-color: #00000000; border-radius: 0px 0px 0px 0px; color: var(--label); font-size: 0.875rem; border-bottom: var(--containerBorder); border-bottom-width: 3px; border-color: var(--div-1); } .ia_dropdown__placeholder { color: var(--label--disabled); } .ia_dropdown__placeholderIcon { fill: var(--icon); } .ia_dropdown__valuePill__value { color: var(--neutral-80); } .ia_dropdown__valuePill { border-radius: var(--borderRadius); background-color: var(--containerNested); overflow: hidden; } .ia_dropdown__removeValueIcon { fill: currentColor; } .ia_dropdown__search { color: var(--label); font-size: 0.875rem; } .ia_dropdown--active { border-color: var(--callToAction--active); } .ia_dropdown--disabled { color: var(--label--disabled); background-color: var(--input--disabled); cursor: not-allowed; } .ia_dropdown--disabled:focus, .ia_dropdown__search:focus { outline: none; } .ia_dropdown--error:not(.ia_dropdown--disabled) { color: var(--error); } .ia_dropdown__optionsModal { background-color: var(--input); border-radius: var(--borderRadiusInput); font-size: 0.875rem; } .ia_dropdown__option { color: var(--label); } .ia_dropdown__option--selected { background-color: var(--callToActionHighlight); color: var(--neutral-10) } .ia_dropdown__option:not(.ia_dropdown__option--disabled):not(.ia_dropdown__option--selected):hover, .ia_dropdown__option:not(.ia_dropdown__option--disabled):focus, .ia_dropdown__option--keyboardSelected { background-color: var(--callToActionHighlight); color: var(--label); } .ia_dropdown__option--disabled { color: var(--label--disabled); cursor: not-allowed; } .ia_dropdown__option__noResults { color: var(--input--disabled); pointer-events: none; } .ia_dropdown__clearValueIcon { fill: var(--icon); } .ia_dropdown__clearValueIcon:hover { fill: var(--icon--disabled); } .ia_dropdown__expandIcon { fill: var(--icon); } .ia_dropdown--disabled svg { fill: var(--label--disabled); } .ia_dropdown--disabled .ia_dropdown__valuePill__value { color: var(--label--disabled); } .ia_inputField { font-size: 0.875rem; color: var(--neutral-100); border: none; border-radius: 5px 5px 5px 5px; background-color: var(--info); padding: 0px 0.1ch; border-bottom: solid 3px var(--neutral-80); padding-top: 1ex; } .ia_inputField::placeholder { color: var(--neutral-50); } .ia_inputField:active { border-bottom: solid 3px var(--div-1); } .ia_inputField:disabled { color: var(--label--disabled); border-bottom: solid 3px var(--neutral-80); background-color: var(--input--disabled); cursor: not-allowed; } .ia_inputField:focus-within { background-color: var(--orange); border-bottom: solid 3px var(--div-1); } .ia_inputField:hover:not(:focus-within) { background-color: var(--input--hover); } .ia_inputField:focus-within:hover { background-color: var(--input--hover--focus); }.ia_pager { background-color: var(--neutral-30); color: var(--neutral-90); box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.1); line-height: 0.875rem; font-size: 0.75rem; } .ia_pager__jumpFirstLast { line-height: 0.875rem; font-size: 1rem; color: var(--neutral-90); } .ia_pager__jumpFirstLast--disabled { color: var(--label--disabled); } .ia_pager__prevNext { color: var(--neutral-90); } .ia_pager__prevNext--disabled { color: var(--neutral-70); } .ia_pager__page { border-radius: 50%; width: 1.25rem; height: 1.25rem; color: var(--neutral-90); } .ia_pager__page--active { background: var(--callToAction); color: var(--neutral-10); } .ia_pager__jump { width: 3.125rem; text-align: center; border-radius: var(--borderRadius); } .ia_pager__jump:focus { outline: none; } .ia_progressBar__track { border: var(--containerBorder); border-radius: 24px; } .ia_progressBar__track--determinate { background-color: var(--progressLinearTrack--determinate); } .ia_progressBar__track--indeterminate { background-color: var(--progressLinearTrack--indeterminate); } .ia_progressBar__bar { background-color: var(--progressLinearBar--determinate); transition: transform 0.2s linear; } .ia_progressBar__bar--determinate { transition: transform 0.2s linear; } .ia_progressBar__bar--indeterminate { animation: ia_progressBar_bar--indeterminateAnimation 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite; animation-name: ia_progressBar_bar--indeterminateAnimation; } .ia_progressBar .ia_progressBar__display .ia_progressBar__displayValue { color: var(--neutral-90); } @keyframes ia_progressBar_bar--indeterminateAnimation { 0% { left: -35%; right: 100%; } 100% { left: 100%; right: -90%; } } .ia_radio__selectedIcon, .ia_radio__unselectedIcon { transition: fill 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; height: 21.65px; width: 21.65px; } .ia_radio__icon--useColor { fill: currentColor; } .ia_radio .ia_radio__selectedIcon { color: var(--radio--selected); } .ia_radio .ia_radio__unselectedIcon { color: var(--radio--unselected); } .ia_radio .ia_radio__unselectedIcon--disabled, .ia_radio .ia_radio__selectedIcon--disabled { color: var(--radio--disabled); } .ia_radio:hover input:enabled~.ia_radio__selectedIcon { filter: brightness(1.2); } .ia_radio:hover input:enabled~.ia_radio__unselectedIcon { filter: brightness(0.5); } .ia_radio input:enabled:active~.ia_radio__selectedIcon, .ia_radio input:enabled:active~.ia_radio__unselectedIcon { filter: brightness(0.7); } .ia_realtimeOrHistoricalRange { background-color: var(--containerRoot); } .ia_realtimeOrHistoricalRangeSelector__calendarIcon { color: var(--neutral-70); } .ia_realtimeOrHistoricalRangeSelector__calendarIcon--active { color: var(--callToAction); } .ia_realtimeOrHistoricalRangeSelector__message { color: var(--neutral-90); font-size: 0.675rem; font-weight: 700; } .ia_realtimeOrHistoricalRangeSelector__modal { background-color: var(--container); } .ia_realtimeOrHistoricalRangeSelector__modal__header { color: var(--neutral-80); background-color: var(--containerNested); border-bottom: var(--containerBorder); font-weight: 500; } .ia_realtimeOrHistoricalRange__tabContainer__tab { font-size: 0.875rem; line-height: 1.125rem; font-weight: 400; border-bottom: 3px solid transparent; color: var(--neutral-60); background-color: var(--container); } .ia_realtimeOrHistoricalRange__tabContainer__tab:hover:not(.ia_realtimeOrHistoricalRange__tabContainer__tab--active) { color: var(--neutral-70); } .ia_realtimeOrHistoricalRange__tabContainer__tab--active { color: var(--neutral-90); font-weight: 500; border-bottom: 3px solid var(--callToAction); } .ia_realtimeOrHistoricalRange__footer { border-top: var(--containerBorder); background-color: var(--container); } .ia_realtimeOrHistoricalRange__realtimeContent { color: var(--neutral-90); font-size: 0.875rem; } .ia_select { border-radius: var(--borderRadius); border: var(--containerBorder); background-color: var(--input); font-size: 0.875rem; color: var(--label); cursor: pointer; } .ia_select--disabled { background-color: var(--input--disabled); border: 1px solid var(--border--disabled); color: var(--label--disabled); cursor: not-allowed; } .ia_select__select { background-color: var(--input); font-size: inherit; color: inherit; } .ia_select__select:disabled { background-color: var(--input--disabled); } .ia_slider { border-radius: 6px; } .ia_slider__rail { background-color: var(--neutral-40); } .ia_slider__track { border-radius: var(--borderRadius); background-color: var(--neutral-100); } .ia_slider__track--disabled { background-color: var(--border--disabled); } .ia_slider__step__dot { border: 2px solid var(--border); background-color: var(--container); border-radius: 50%; } .ia_slider__step__dot--active { border-color: var(--callToAction); } .ia_slider__handle { border-radius: 50%; border: solid 1px var(--neutral-100); background-color: var(--neutral-100); } .ia_slider__handle:hover { background-color: var(--callToActionHighlight); border-color: var(--callToActionHighlight); } .ia_slider__handle:active { border-color: var(--neutral-100); background-color: var(--callToActionHighlight); box-shadow: 0 0 5px rgba(78, 188, 252, 0.2); } .ia_slider__handle:focus { border-color: var(--callToAction--active); box-shadow: 0 0 0 5px rgba(78, 188, 252, 0.5); } .ia_slider__handle--disabled { border-color: var(--border--disabled); background-color: var(--border--disabled); } .ia_slider__mark__text { color: var(--neutral-60); } .ia_slider__mark__text--active { color: var(--neutral-90); } .ia_slider__mark__text--disabled { color: var(--label--disabled); } .ia_table { color: var(--neutral-90); } .ia_table__headContainer, .ia_table__footContainer { background-color: var(--container); box-shadow: 0 2px 15px 0 rgba(0, 0, 0, 0.3); } .ia_table__foot, .ia_table__head { font-weight: 500; font-size: 0.875rem; } .ia_table__head__header__sort { color: var(--neutral-50); } .ia_table__head__header__sort--active { color: var(--callToAction--active); } .ia_table__body { background-color: var(--container); font-size: 0.875rem; } .ia_table__body__row--even { background-color: var(--neutral-10); } .ia_table__body__row--odd { background-color: var(--neutral-20); } .ia_table__body__emptyMessage { color: var(--neutral-60); } .ia_table__resizeGuide { background-color: var(--callToAction); opacity: 0.5; } .ia_tagBrowser__noResultsDisplay, .ia_tagBrowser__loadingDisplay { background: var(--neutral-10); border: 1px solid var(--border); } .ia_tagBrowser__noResultsDisplay__message { color: var(--input--disabled); } .ia_textArea { font-size: 0.875rem; color: var(--neutral-90); border: none; background-color: var(--info); padding: 0px 0.1ch; padding: 0px 0.1ch; border-radius: 0; border-bottom: solid 2px var(--div-1); padding-top: 1ex; } .ia_textArea::placeholder { color: var(--neutral-50); } .ia_textArea:disabled { color: var(--label--disabled); border-bottom: solid 2px var(--neutral-80); background-color: var(--input--disabled); cursor: not-allowed; } .ia_timeInput__separator { background-color: var(--input); border-top: var(--containerBorder); border-bottom: var(--containerBorder); } .ia_timeInput__separator--disabled { color: var(--label--disabled); background-color: var(--input--disabled); } .ia_timeInput--buttonMode { color: var(--label); } .ia_timeInput--buttonMode--disabled { color: var(--label--disabled); } .ia_toggleSwitch__track { background-color: var(--toggleSwitch--unselected); filter: invert(25%); border-radius: 8px; border-style: solid; border-color: var(--neutral-80); transition: opacity 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, color 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; } .ia_toggleSwitch__track--selected { background-color: var(--toggleSwitch--selected); border-color: var(--div-1); opacity: 0.25; filter: none; } .ia_toggleSwitch__track--disabled { background-color: var(--input--disabled) !important; opacity: 0.5; } .ia_toggleSwitch__thumb { border-radius: 50%; background-color: var(--toggleSwitch--unselected); border: var(--containerBorder); box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 2px 1px -1px rgba(0, 0, 0, 0.12); transition: left 200ms cubic-bezier(0.4, 0, 0.2, 1), left 150ms cubic-bezier(0.4, 0, 0.2, 1); } .ia_toggleSwitch__thumb--selected { background-color: var(--toggleSwitch--selected); border: none; } .ia_toggleSwitch__thumb:hover { border: 1px solid var(--callToAction); } .ia_toggleSwitch__thumb--selected:hover { filter: brightness(1.2); } .ia_toggleSwitch__thumb--disabled { background-color: var(--input--disabled) !important; border: none; } .ia_toggleSwitch__thumb--disabled:hover { filter: none; border: none; } .ia_viewStateDisplay { border: dashed 1px var(--border--disabled); } .ia_viewStateDisplay__icon { color: var(--neutral-70); } .ia_viewStateDisplay__primaryMessage { color: var(--neutral-90); } .ia_viewStateDisplay__secondaryMessage { color: var(--neutral-70); } .ia_designing__container__addChild { color: var(--neutral-70); } .ia_accordionComponent { border: var(--containerBorder); background-color: var(--container); } .ia_accordionComponent--disabled { color: var(--label--disabled); background-color: var(--input--disabled); cursor: not-allowed; } .ia_accordionComponent__body { border-bottom: var(--containerBorder); } .ia_accordionComponent__header { background-color: var(--container); cursor: pointer; } .ia_accordionComponent__header:hover { filter: brightness(0.9); } .ia_accordionComponent__header__text { font-size: 14px; } .ia_accordionComponent__header__text--expanded { font-weight: 500; } .ia_accordionComponent__emptyRow { background-color: var(--containerNested); }.ia_alarmJournalTableComponent { border: var(--containerBorder); } .ia_alarmJournalTableComponent__selection { background-color: rgba(12, 123, 179, 0.2); } .ia_alarmJournalTableComponent__alarmDetails__tabContainer { background-color: var(--neutral-30); color: var(--neutral-70); font-size: 0.875rem; } .ia_alarmJournalTableComponent__alarmDetails__tabContainer__tab__propertiesTab { border-bottom: var(--containerBorder); } .ia_alarmJournalTableComponent__alarmDetails__tabContainer__tab__notesTab { border-left: var(--containerBorder); border-right: var(--containerBorder); } .ia_alarmJournalTableComponent__alarmDetails__tabContainer__tab--active { background-color: var(--neutral-10); font-weight: 700; border-bottom: none; color: var(--neutral-90); } .ia_alarmJournalTableComponent__alarmDetails__tabContainer__remainingSpace { border-bottom: var(--containerBorder); } .ia_alarmStatusTableComponent { border: var(--containerBorder); } .ia_alarmStatusTableComponent__selection { background-color: rgba(12, 123, 179, 0.2); } .ia_alarmStatusTableComponent__foot__message { color: var(--neutral-90); line-height: 1rem; font-weight: 400; font-size: 0.875rem; } .ia_alarmStatusTableComponent__foot__message--success { color: var(--success); } .ia_alarmStatusTableComponent__foot__message--error { color: var(--error); } .ia_alarmStatusTableComponent__alarmNotesRequiredModal__foot { background-color: var(--neutral-30); border: var(--containerBorder); } .ia_checkboxComponent { color: var(--neutral-90); } .ia_checkboxComponent--disabled { color: var(--label--disabled); } .ia_columnContainerComponent--designing__columnGuide { background-color: var(--containerNested); } .ia_columnContainerComponent--designing__row { outline: dashed var(--border) 1px; } .ia_cylindricalTankComponent__tank { stroke: var(--border); fill: var(--containerRoot); stroke-width: 2px; } .ia_cylindricalTankComponent__tank--warning { fill: var(--error); fill-opacity: 0.2; } .ia_cylindricalTankComponent__liquid { fill: var(--info); fill-opacity: 0.7; stroke: var(--border); stroke-width: 2px; } .ia_cylindricalTankComponent__liquid--warning { fill: var(--error); } .ia_cylindricalTankComponent__valueDisplay { font-size: 2rem; font-weight: 500; } .ia_grid__cell { background-color: var(--container); } .ia_dashboardComponent { background-color: var(--containerRoot); border: var(--containerBorder); } .ia_dashboardComponent__control { background-color: var(--opacity-25); color: var(--neutral-20); } .ia_dashboardComponent__control:hover { background-color: var(--opacity-50); color: var(--neutral-10); } .ia_dashboardComponent__cell__addWidget { color: var(--callToAction); } .ia_dashboardComponent__cell__addWidget:hover { color: var(--callToAction--hover); } .ia_dashboardComponent__addWidgetOverlay { background-color: var(--neutral-90); opacity: 0.2; } .ia_dashboardComponent__cell { background-color: var(--containerNested); } .ia_dashboardComponent__cell--active { background-color: var(--neutral-40); } .ia_dashboardComponent__movingWidgetPlaceholder { border: 2px dashed var(--border); border-radius: var(--borderRadius); } .ia_dashboardComponent__widget { border: var(--containerBorder); border-radius: var(--borderRadius); } .ia_dashboardComponent__widget--editing { border: 2px dashed var(--callToAction); } .ia_dashboardComponent__widget--configuring { border: 2px dashed var(--warning); } .ia_dashboardComponent__widget--moving { box-shadow: var(--boxShadow5); } .ia_dashboardComponent__widget__resizeHandle__handle { border-radius: 50%; border: 2px solid var(--callToAction); background-color: var(--neutral-10); } .ia_dashboardComponent__widget__resizeHandle__handle--configuring { border: 2px solid var(--warning); } .ia_dashboardComponent__widget__controlBar { color: var(--icon); } .ia_dashboardComponent__widget__controlBar__control--active { color: var(--warning); } .ia_dashboardComponent__widget__controlBar__control:hover { color: var(--icon--hover); } .ia_dashboardComponent__widget__head { background-color: var(--containerNested); border-bottom: var(--containerBorder); font-size: 0.875rem; } .ia_dashboardComponent__widget__head__title { text-align: left; padding: 0px 0.625rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ia_dashboardComponent__widget__body { background-color: var(--container); } .ia_dashboardComponent__addWidgetModal__head, .ia_dashboardComponent__removeWidgetModal__head { font-size: 1.125rem; font-weight: 400; line-height: 0.875rem; background-color: var(--neutral-30); border-bottom: var(--containerBorder); color: var(--neutral-90); } .ia_dashboardComponent__addWidgetModal__searchContainer { background-color: var(--neutral-10); border-bottom: var(--containerBorder); } .ia_dashboardComponent__addWidgetModal__menu__category__titleBar { background-color: var(--neutral-30); border-bottom: var(--containerBorder); color: var(--neutral-90); font-size: 0.75rem; } .ia_dashboardComponent__addWidgetModal__body, .ia_dashboardComponent__removeWidgetModal__body { background-color: var(--neutral-10); color: var(--neutral-90); font-size: 0.875rem; line-height: 0.875rem; font-weight: 400; } .ia_dashboardComponent__addWidgetModal__menu__category__item { color: var(--neutral-90); border-bottom: var(--containerBorder); font-size: 0.875rem; line-height: 1rem; font-weight: 400; } .ia_dashboardComponent__addWidgetModal__menu__category__item:hover:not(.ia_dashboardComponent__addWidgetModal__menu__category__item--selected) { background-color: var(--callToActionHighlight); } .ia_dashboardComponent__addWidgetModal__menu__category__item--selected { background-color: var(--callToAction--active); color: var(--neutral-10); } .ia_dashboardComponent__addWidgetModal__foot { background-color: var(--neutral-30); border-top: var(--containerBorder); } .ia_dateTimePickerComponent { border: var(--containerBorder); } .ia_dateTimePickerComponent--disabled { color: var(--label--disabled); border-color: var(--border--disabled); background-color: var(--input--disabled); } .ia_dateTimeInputComponent { color: var(--label); } .ia_dateTimeInputComponent--disabled { color: var(--label--disabled); } .ia_equipmentScheduleComponent { border: var(--containerBorder); font-size: 0.75rem; color: var(--neutral-90); } .ia_equipmentScheduleComponent__actionBar, .ia_equipmentScheduleComponent__spacer, .ia_equipmentScheduleComponent__groupingCell__backdrop, .ia_equipmentScheduleComponent__headerCell__backdrop, .ia_equipmentScheduleComponent__itemList, .ia_equipmentScheduleComponent__itemList__item, .ia_equipmentScheduleComponent__groupingHeader { background: var(--neutral-30); } .ia_equipmentScheduleComponent__actionBar, .ia_equipmentScheduleComponent__spacer, .ia_equipmentScheduleComponent__headerCell, .ia_equipmentScheduleComponent__groupingCell, .ia_equipmentScheduleComponent__itemList__item, .ia_equipmentScheduleComponent__itemList__item, .ia_equipmentScheduleComponent__gridSpace__gridCell, .ia_equipmentScheduleComponent__gridSpace__gridCell--hover { border-bottom: var(--containerBorder); } .ia_equipmentScheduleComponent__spacer, .ia_equipmentScheduleComponent__groupingCell, .ia_equipmentScheduleComponent__headerCell, .ia_equipmentScheduleComponent__itemList, .ia_equipmentScheduleComponent__gridSpace__gridCell, .ia_equipmentScheduleComponent__gridSpace__gridCell--hover { border-right: var(--containerBorder); } .ia_equipmentScheduleComponent__gridSpace__gridCell { background: var(--container); } .ia_equipmentScheduleComponent__gridSpace__gridCell--hover { background: var(--neutral-30); } .ia_equipmentScheduleComponent__actionBar, .ia_equipmentScheduleComponent__groupingCell, .ia_equipmentScheduleComponent__itemList__item { font-weight: 700; } .ia_equipmentScheduleComponent__headerCell:hover, .ia_equipmentScheduleComponent__actionButton { background: var(--neutral-10); } .ia_equipmentScheduleComponent__actionButton { border: var(--neutral-50); border-radius: var(--borderRadius); } .ia_equipmentScheduleComponent__actionBar__dropdown { font-size: 0.75rem; width: 7rem; } .ia_equipmentScheduleComponent__actionButton__icon { fill: var(--neutral-90); } .ia_equipmentScheduleComponent__add__icon { fill: var(--qual-2); } .ia_equipmentScheduleComponent__overlappingEvent__backdrop { background: var(--neutral-40); opacity: 0.5; } .ia_equipmentScheduleComponent__overlappingEvent__dropdown { color: var(--white); background: var(--black); font-size: 0.625rem; font-weight: 700; } .ia_equipmentScheduleComponent__overlappingEvent__dropdown__icon { fill: var(--white); } .ia_equipmentScheduleComponent__scheduleEvent__progressBar__bar__color { background-color: #0C7BB3; } .ia_equipmentScheduleComponent__scheduleEvent__progressBar__track__color { background-color: #FFFFFF; } .ia_equipmentScheduleComponent__tooltip { background-color: #000000; font-size: 0.625rem; color: #FFFFFF; } .ia_equipmentScheduleComponent__scheduleEvent { background: #7D3CBD; color: #FFFFFF; font-size: 0.75rem; font-weight: normal; border-radius: var(--borderRadius); } .ia_equipmentScheduleComponent__scheduleEvent__leadTime { background-color: #FAD8AF; } .ia_equipmentScheduleComponent__resizePlaceHolder, .ia_equipmentScheduleComponent__movePlaceHolder, .ia_equipmentScheduleComponent__selectedPlaceHolder { border-radius: var(--borderRadius); } .ia_equipmentScheduleComponent__resizePlaceHolder { border: 2px solid var(--black); } .ia_equipmentScheduleComponent__movePlaceHolder { border: 2px dashed rgba(0,0,0,0.4); } .ia_equipmentScheduleComponent__selectedPlaceHolder { border: 2px solid #47A9E5; } .ia_equipmentScheduleComponent__downtimeEvent { background-color: rgba(222,27,27,0.3); } .ia_equipmentScheduleComponent__breakEvent { background-color: rgba(10,166,72,0.3); } .ia_fileUploadComponent { border: 1px dashed var(--border); border-radius: var(--borderRadius); font-size: 0.875rem; color: var(--neutral-70); } .ia_fileUploadComponent--uploading, .ia_fileUploadComponent--error, .ia_fileUploadComponent--dragTarget { border: var(--containerBorder); background-color: var(--callToActionHighlight); } .ia_fileUploadComponent__displayMessage { color: var(--neutral-70); } .ia_fileUploadComponent--error__displayMessage { color: var(--error); } .ia_fileUploadComponent__supportedFileTypes { font-size: 0.75rem; color: var(--neutral-70); } .ia_fileUploadComponent__supportedFileTypes--error { color: var(--error); } .ia_fileUploadComponent__supportedFileTypes__primaryMessage { font-weight: 700; } .ia_fileUploadComponent__supportedFileTypes__icon { fill: var(--icon); } .ia_fileUploadComponent__filesList { border-top: var(--containerBorder); } .ia_fileUploadComponent__filesList__file { color: var(--neutral-70); } .ia_fileUploadComponent__filesList__fileName { color: var(--info); } .ia_fileUploadComponent__filesList__okayIcon { fill: var(--success); } .ia_fileUploadComponent__filesList__loadingIcon { fill: var(--neutral-70); } .ia_fileUploadComponent__filesList--error__loadingIcon { fill: var(--error); } .ia_fileUploadComponent__fileSummary__completeIcon { fill: var(--success); } .ia_fileUploadComponent__fileSummary__clearIcon { fill: var(--icon); cursor: pointer; } .ia_fileUploadComponent__fileSummary__clearIcon__message { font-size: 0.75rem; } .ia_fileUploadComponent__fileSummary__message--success { font-size: 0.875rem; } .ia_fileUploadComponent__pagination { background-color: var(--container); border-top: 1px solid var(--border); } .ia_fileUploadComponent__pagination__fileCount { font-size: 0.75rem; color: var(--neutral-70); } .ia_fileUploadComponent__pagination__nextPrevIcon { fill: var(--neutral-90); } .ia_fileUploadComponent__pagination__nextPrevIcon--disabled { fill: var(--neutral-50); } .ia_fileUploadComponent__pagination_callToAction:hover:not(.disabled) .ia_fileUploadComponent__pagination__nextPrevIcon { fill: var(--callToAction); } .ia_fileUploadComponent--tablet { border: 1px dashed var(--border); border-radius: var(--borderRadius); font-size: 0.75rem; color: var(--neutral-70); } .ia_fileUploadComponent--tablet__fileSummary__message--success { font-size: 0.75rem; } .ia_fileUploadComponent--tablet__progress__uploadProgressAnimation { border: var(--containerBorder); background: var(--neutral-10); } .ia_fileUploadComponent--tablet__progress__uploadProgressAnimation__innerPath { fill: var(--callToAction); } .ia_fileUploadComponent--mobile { border: 1px dashed var(--neutral-40); border-radius: var(--borderRadius); font-size: 0.75rem; color: var(--neutral-70); } .ia_fileUploadComponent--mobile--invalid { border-color: var(--callToAction); } .ia_fileUploadComponent--mobile--popupDisplayed { border-color: var(--callToAction); } .ia_fileUploadComponent--mobile--uploading, .ia_fileUploadComponent--mobile--error, .ia_fileUploadComponent--mobile--complete { border: 1px solid var(--callToAction); } .ia_fileUploadComponent--mobile--complete__icon { fill: var(--success); } .ia_fileUploadComponent--mobile--error__icon { fill: var(--error); } .ia_fileUploadComponent--mobile__popup { color: var(--neutral-70); } .ia_fileUploadComponent--mobile__filesList { border-top: var(--containerBorder); } .ia_fileUploadComponent--mobile__uploadIcon { fill: var(--callToAction); } .ia_fileUploadComponent__supportedFileTypes__icon { fill: var(--icon); } .ia_fileUploadComponent--mobile__progress__activeFileText { fill: var(--neutral-90); } .ia_fileUploadComponent--mobile__progress__uploadProgressAnimation { border: var(--containerBorder); background: var(--neutral-10); } .ia_fileUploadComponent--mobile__progress__uploadProgressAnimation__innerPath { fill: var(--callToAction); } .ia_horizontalMenuComponent { border-top: var(--containerBorder); border-bottom: var(--containerBorder); } .ia_horizontalMenuComponent__item { color: var(--neutral-70); background-color: var(--container); } .ia_horizontalMenuComponent__item__icon { fill: currentColor; } .ia_horizontalMenuComponent__item--disabled { color: var(--neutral-50); } .ia_horizontalMenuComponent__item__expandIcon { fill: var(--neutral-70); } .ia_horizontalMenuComponent__item:not(.ia_horizontalMenuComponent__item--active):not(.ia_horizontalMenuComponent__item--disabled):hover { filter: brightness(0.9); } .ia_horizontalMenuComponent__item--active { color: var(--neutral-90); } .ia_horizontalMenuComponent__sideNav__iconContainer { background-color: var(--neutral-50); } .ia_horizontalMenuComponent__modal { border: none; border-top: var(--containerBorder); box-shadow: none; background-color: transparent; } .ia_horizontalMenuComponent__modal .ia_horizontalMenuComponent__item { border-bottom: var(--containerBorder); } .ia_horizontalMenuComponent__item__leftItem { border-left: 3px solid transparent; } .ia_horizontalMenuComponent__item__leftItem--active { border-left: 3px solid var(--callToAction); } .ia_horizontalMenuComponent__item__rightItem { border-right: 3px solid transparent; } .ia_horizontalMenuComponent__item__rightItem--active { border-right: 3px solid var(--callToAction); } .ia_horizontalMenuComponent__sideNavContainerLeft { background: linear-gradient(to right, var(--container), 50%, transparent 100%); } .ia_horizontalMenuComponent__sideNavContainerRight { background: linear-gradient(to right, transparent, var(--container) 50%, var(--container) 100%); } .ia_ledComponent__diode--on { fill: var(--indicator); } .ia_ledComponent__diode--off { fill: var(--indicatorOff); } .ia_ledComponent__background { fill: var(--neutral-100); } .ia_linearScaleComponent__majorTick, .ia_linearScaleComponent__minorTick, .ia_linearScaleComponent__fineTick { stroke: var(--neutral-60); } .ia_linearScaleComponent__tick__label, .ia_linearScaleComponent__indicator__label { fill: var(--neutral-90); } .ia_linearScaleComponent__lineIndicator { stroke: var(--seq-2); } .ia_linearScaleComponent__wedgeIndicator { opacity: 1; fill: var(--indicator); } .ia_linearScaleComponent__rangeIndicator { fill: var(--seq-5); fill-opacity: 0.4; } .ia_menuTreeComponent__item { border-bottom: solid var(--border) 1px; background-color: inherit; color: var(--neutral-90); } .ia_menuTreeComponent__item:not(.ia_menuTreeComponent__header):hover { filter: brightness(0.9); } .ia_menuTreeComponent__item__icon, .ia_menuTreeComponent__header__icon { fill: var(--icon); } .ia_menuTreeComponent__item__navIcon { fill: var(--icon); } .ia_menuTreeComponent__backAction { background-color: var(--neutral-30); color: var(--icon); border-bottom: solid var(--border) 1px; text-transform: uppercase; font-size: 0.875rem; line-height: 2rem; font-weight: 500; } .ia_menuTreeComponent__backAction:hover { background-color: var(--neutral-20); } .ia_menuTreeComponent__backAction:active { background-color: var(--neutral-40); } .ia_movingAnalogIndicatorComponent { font-size: 1rem; } .ia_movingAnalogIndicatorComponent__scale { fill: var(--container); stroke: var(--border); } .ia_movingAnalogIndicatorComponent__desiredRange { fill: var(--infoSecondary); stroke: var(--border); } .ia_movingAnalogIndicatorComponent__interlockRange { fill: var(--neutral-100); stroke: var(--border); } .ia_movingAnalogIndicatorComponent__level1AlarmRange, .ia_movingAnalogIndicatorComponent__level2AlarmRange { fill: var(--neutral-60); stroke: var(--border); } .ia_movingAnalogIndicatorComponent__level1AlarmRange--active { fill: var(--error); stroke: var(--border); } .ia_movingAnalogIndicatorComponent__level2AlarmRange--active { fill: var(--warningSecondary); stroke: var(--border); } .ia_movingAnalogIndicatorComponent__wedgeIndicator { fill: var(--neutral-60); } .ia_movingAnalogIndicatorComponent__setpointIndicator { fill: var(--neutral-10); stroke: var(--info); } .ia_multiStateButton__button--primary--selected, .ia_multiStateButton__button--secondary--selected { font-weight: 500; } .ia_multiStateButton__button--primary--unselected, .ia_multiStateButton__button--secondary--unselected { font-weight: 400; } .ia_numericEntryFieldComponent__modal { border: var(--containerBorder); } .ia_numericEntryFieldComponent__editIcon { fill: var(--callToAction); } .ia_numericEntryFieldComponent__editLink:hover .ia_numericEntryFieldComponent__editIcon { filter: brightness(1.2); } .ia_numericEntryFieldComponent__editLink--active:hover .ia_numericEntryFieldComponent__editIcon, .ia_numericEntryFieldComponent__editLink--disabled:hover .ia_numericEntryFieldComponent__editIcon { filter: none; } .ia_numericEntryFieldComponent__editIcon--active { fill: var(--callToAction--active); } .ia_numericEntryFieldComponent__editIcon--disabled { fill: var(--callToAction--disabled); } .ia_oneShotButtonComponent__confirmModal__message { color: var(--neutral-90); margin: 0.5rem 0; font-size: 0.875rem; line-height: 1rem; } .ia_passwordFieldComponent__visibilityIcon { fill: var(--callToAction); } .ia_passwordFieldComponent__visibilityLink:hover .ia_passwordFieldComponent__visibilityIcon { filter: brightness(1.2); } .ia_passwordFieldComponent__visibilityLink--disabled:hover .ia_passwordFieldComponent__visibilityIcon, .ia_passwordFieldComponent__visibilityLink--active:hover .ia_passwordFieldComponent__visibilityIcon { filter: none; } .ia_passwordFieldComponent__visibilityIcon--disabled { fill: var(--callToAction--disabled); } .ia_powerChartComponent { font-size: 12px; color: var(--neutral-100); border: 1px solid var(--border); } .ia_powerChartComponent__title, .ia_powerChartComponent__tagBrowserContainer__title { font-weight: bold; } .ia_powerChartComponent__eventMarker__box__timeLabel, .ia_powerChartComponent__labelText { font-size: 11px; text-anchor: start; fill: var(--neutral-50); pointer-events: none; } .ia_powerChartComponent__labelText--centered { font-size: 11px; text-anchor: middle; fill: var(--neutral-50); pointer-events: none; } .ia_powerChartComponent__tagBrowserContainer { border-right: 1px solid var(--border); background-color: var(--neutral-20); } .ia_powerChartComponent__tagBrowserContainer__tree { background-color: var(--neutral-10); border: 1px solid var(--border); } .ia_powerChartComponent__xTrace__line { stroke: var(--neutral-60); stroke-width: 1; stroke-opacity: 0.5; stroke-dasharray: 0; cursor: crosshair; pointer-events: none; } .ia_powerChartComponent__xTrace__box { width: 100px; fill: var(--neutral-10); opacity: 0.9; stroke: var(--neutral-60); stroke-width: 1; stroke-opacity: 0.5; stroke-dasharray: 0; pointer-events: none; } .ia_powerChartComponent__xTrace__box__timeMarker { text-anchor: start; fill: var(--neutral-40); } .ia_powerChartComponent__xTrace__dot { fill: var(--neutral-60); } .ia_powerChartComponent__baseline__line { stroke: var(--neutral-60); stroke-width: 1; stroke-opacity: 0.5; stroke-dasharray: 0; pointer-events: none; } .ia_powerChartComponent__baseline__label { fill: var(--neutral-50); font-size: 10px; font-weight: 100; pointerEvents: none; } .ia_powerChartComponent__band__body { fill: var(--neutral-60); fill-opacity: 0.5; stroke-width: 0; stroke-dasharray: 0; pointer-events: none; } .ia_powerChartComponent__band__label { fill: var(--neutral-50); font-size: 10px; font-weight: 100; pointerEvents: none; } .ia_powerChartComponent__timeAxis__values, .ia_powerChartComponent__yAxis__label, .ia_powerChartComponent__yAxis__values { stroke: none; fill: var(--neutral-50); font-size: 10px; font-weight: 100; } .ia_powerChartComponent__timeAxis__ticks, .ia_powerChartComponent__yAxis__ticks { fill: none; stroke: var(--neutral-50); } .ia_powerChartComponent__timeAxis__axis, .ia_powerChartComponent__yAxis__axis { fill: none; stroke: var(--neutral-50); } .ia_powerChartComponent__dateTimeSelection { color: var(--callToAction); font-weight: bold; } .ia_powerChartComponent__noDataDisplay { background-color: var(--neutral-20); border-top: 1px solid var(--border); } .ia_powerChartComponent__chart__popupMenu { font-size: 12px; color: var(--neutral-100); background-color: var(--neutral-20); } .ia_powerChartComponent__chart__popupMenu button { font-size: 14px; } .ia_powerChartComponent__chart__rangeSelector > svg { border: 1px solid var(--border); } .ia_powerChartComponent__chart__rangeSelector__popupMenu { font-size: 12px; color: var(--neutral-100); background-color: var(--neutral-10); } .ia_powerChartComponent__chart__rangeSelector__popupMenu__menuItem {} .ia_powerChartComponent__chart__rangeSelector__popupMenu__menuItem--hover { color: var(--neutral-10); font-weight: bold; background-color: var(--callToAction); } .ia_powerChartComponent__dateTimeSelection__popupMenu__header { font-size: 14px; background-color: var(--neutral-60); border-bottom: 1px solid var(--border); } .ia_powerChartComponent__dateTimeSelection__popupMenu__header__icon { color: var(--neutral-70); } .ia_powerChartComponent__icon { color: var(--neutral-70); border: 1px solid var(--border); } .ia_powerChartComponent__icon--active { background-color: var(--neutral-40); } .ia_powerChartComponent__chartOptionBar--mobile { border-top: 1px solid var(--border); } .ia_powerChartComponent__chartOptionBar__popupMenu { font-size: 12px; color: var(--neutral-100); background-color: var(--neutral-10); } .ia_powerChartComponent__chartOptionBar__popupMenu__menuItem {} .ia_powerChartComponent__chartOptionBar__popupMenu__menuItem--hover { color: var(--neutral-10); font-weight: bold; background-color: var(--callToAction); } .ia_powerChartComponent__settings { background-color: var(--neutral-20); border-left: 1px solid var(--border); } .ia_powerChartComponent__settings__header { background-color: var(--neutral-10); font-weight: bold; } .ia_powerChartComponent__settings__iconHeader { background-color: var(--neutral-10); border: 1px solid var(--border); font-weight: bold; } .ia_powerChartComponent__settings__header__link { font-weight: normal; color: var(--callToAction); } .ia_powerChartComponent__settings__tab { border-color: var(--border); background-color: var(--neutral-20); } .ia_powerChartComponent__settings__tab--active { background-color: var(--neutral-10); } .ia_powerChartComponent__settings__tab__content, .ia_powerChartComponent__settings__tab__content .ia_table__headContainer { background-color: var(--neutral-10); } .ia_powerChartComponent__settings__tab__addLink { font-weight: bold; text-decoration: underline; color: var(--callToAction); } .ia_powerChartComponent__settings__tab__content__table__headerCell {} .ia_powerChartComponent__penDataDisplay__table__headerCell { background-color: var(--neutral-30); } .ia_powerChartComponent__penDataDisplay__brushRangeGroupLabel { background-color: var(--div-9); } .ia_powerChartComponent__penDataDisplay__table__headerCell, .ia_powerChartComponent__penDataDisplay__table__bodyCell, .ia_powerChartComponent__penDataDisplay--mobile__pagination, .ia_powerChartComponent__penDataDisplay--mobile__penTable, .ia_powerChartComponent__penDataDisplay__brushRangeGroupLabel { border-top: 1px solid var(--border); } .ia_powerChartComponent__penDataDisplay__table__separatorCell { border-right: 1px solid var(--border); } .ia_powerChartComponent__settings__tab__content__table__bodyRowOdd, .ia_powerChartComponent__penDataDisplay__table__bodyRowOdd { background-color: var(--neutral-20); } .ia_powerChartComponent__settings__tab__content__table__bodyRowEven, .ia_powerChartComponent__penDataDisplay__table__bodyRowEven { background-color: var(--neutral-10); } .ia_powerChartComponent__penDataDisplay__table__bodyRowOdd.overlay-shown, .ia_powerChartComponent__penDataDisplay__table__bodyRowEven.overlay-shown, .ia_powerChartComponent__penDataDisplay__table__rowOverlay { background-color: var(--red-20) !important; } .ia_powerChartComponent__penDataDisplay__table__rowOverlay__icon { color: var(--red-60) !important; } .ia_powerChartComponent__settings__tab__content__table__bodyCell, .ia_powerChartComponent__penDataDisplay__table__bodyCell {} .ia_powerChartComponent__settings__tab__content__table__bodyCell__icon, .ia_powerChartComponent__penDataDisplay__table__bodyCell__icon, .ia_powerChartComponent__penDataDisplay__table__icon, .ia_powerChartComponent__penDataDisplay--mobile__icon, .ia_powerChartComponent__tagBrowserContainer__icon { color: var(--neutral-70); } .ia_powerChartComponent__settings__tab__content__table__emptyMessage { color: var(--neutral-70); } .ia_powerChartComponent__settings__tab__content__popupMenu { font-size: 12px; color: var(--neutral-100); } .ia_powerChartComponent__settings__tab__content__buttonContainer { border: 1px solid var(--border); background-color: var(--neutral-10); } .ia_powerChartComponent__settings__tab__content__chartExample { border: 1px solid var(--border); } .ia_powerChartComponent__penLegend { border: 1px solid var(--border); } .ia_powerChartComponent__penLegend__navArrow { background-color: var(--neutral-30); } .ia_powerChartComponent__resize-handle.dragging::after { border: 2px solid var(--border); } .ia_piping { fill: var(--pipePrimaryFill); stroke: var(--pipeStroke); } .pipe_point__handle--selected { border-color: var(--callToAction); } .ia_pipeSegment { fill: var(--pipePrimaryFill); stroke: var(--pipeStroke); pointer-events: fill; } .ia_pipeSegment--selected { stroke: var(--pipeSelectStroke); } .ia_pipeSegmentNode--pid { fill: var(--pipeStroke); stroke: none; } .ia_pipeSegmentNode--pid--selected { fill: var(--pipeSelectStroke); } .ia_pipeSegmentOverlay { stroke: none; } .ia_pipeSegmentNode--selected { stroke: var(--pipeSelectStroke); stroke-dasharray: 5, 1; } .ia_pipeSegmentPrimaryStopColor { stop-color: var(--pipePrimaryFill); } .ia_pipeSegmentSecondaryStopColor { stop-color: var(--pipeSecondaryFill); } .ia_radioGroupComponent--disabled { color: var(--label--disabled); } .ia_reportViewerComponent { background-color: var(--neutral-30); border: var(--containerBorder); font-size: 0.875rem; color: var(--neutral-90); } .ia_reportViewerComponent__pdfDocument { border: var(--containerBorder); box-shadow: 5px 5px 0px var(--neutral-90); } .ia_reportViewerComponent__actionBar { border-top: var(--containerBorder); background-color: var(--container); } .ia_signaturePadComponent { background-color: var(--input); border: var(--containerBorder); } .ia_signaturePadComponent__actionBar { background-color: var(--containerNested); } .ia_sparklineComponent__line { stroke: var(--neutral-90); stroke-width: 0.75; } .ia_sparklineComponent__desiredHigh, .ia_sparklineComponent__desiredLow { stroke: var(--error); stroke-dasharray: 4; stroke-width: 0.5; } .ia_sparklineComponent__desiredFill { fill: var(--error); fill-opacity: 0.2; } .ia_sparklineComponent__firstMarker, .ia_sparklineComponent__lowMarker, .ia_sparklineComponent__highMarker, .ia_sparklineComponent__lastMarker { stroke-width: 0.5; } .ia_sparklineComponent__firstMarker { fill: var(--success); } .ia_sparklineComponent__lastMarker { fill: var(--error); } .ia_sparklineComponent__lowMarker { fill: var(--seq-2); } .ia_sparklineComponent__highMarker { fill: var(--seq-5); } .ia_splitContainerComponent--split__handle { border: 1px var(--neutral-50) solid; background-color: var(--neutral-10); } .ia_splitContainerComponent--split__handle__designer { border: 1px var(--neutral-50) solid; background-color: var(--neutral-10); } .ia_splitContainerComponent--split__handle__draggable:active { background-color: var(--callToAction--activeAlt); } .split-handle-invis:hover { background-color: var(--callToAction--hover); } .split-handle-invis:active { background-color: var(--callToAction--activeAltInvis); } .ia_splitContainerComponent--split__handle .ia_splitContainerComponent--handle__icon { fill: var(--neutral-70); } .ia_splitContainerComponent--split__handle:hover .ia_splitContainerComponent--handle__icon { fill: var(--callToAction--hover); } .ia_symbolComponent__liquid { fill: var(--info); fill-opacity: 0.7; stroke-width: 2px; } .ia_symbolComponent__liquid--warning { fill: var(--error); } @keyframes ia_symbolComponent__animate--alternateFill { 0% { fill: var(--symbolFill--default); } 50% { fill: var(--symbolFillAnimation--default); } 100% { fill: var(--symbolFill--default); } } @keyframes ia_symbolComponent__animate--alternateFillAlt { 0% { fill: var(--symbolFillAnimation--default); } 50% { fill: var(--symbolFill--default); } 100% { fill: var(--symbolFillAnimation--default); } } @keyframes ia_symbolComponent__animate--alternateFill--running { 0% { fill: var(--symbolFill--running); } 50% { fill: var(--symbolFillAnimation--running); } 100% { fill: var(--symbolFill--running); } } @keyframes ia_symbolComponent__animate--alternateFillAlt--running { 0% { fill: var(--symbolFillAnimation--running); } 50% { fill: var(--symbolFill--running); } 100% { fill: var(--symbolFillAnimation--running); } } @keyframes ia_symbolComponent__animate--rotate { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } @keyframes ia_symbolComponent__animate--rotate3dYAxis { 0% { transform: rotate3d(0, 1, 0, 0deg); } 100% { transform: rotate3d(0, 1, 0, 360deg); } } @keyframes ia_symbolComponent__animate--faulted { 0% { fill: var(--symbolFill--running); } 50% { fill: var(--symbolFill--faulted); } 100% { fill: var(--symbolFill--running); } } @keyframes ia_symbolComponent__animate--failedToOpen { 0% { fill: var(--symbolFill--running); } 50% { fill: var(--symbolFill--faulted); } 100% { fill: var(--symbolFill--running); } } @keyframes ia_symbolComponent__animate--failedToClose { 0% { fill: var(--symbolFill--stopped); } 50% { fill: var(--symbolFill--faulted); } 100% { fill: var(--symbolFill--stopped); } } .ia_symbolComponent { fill: var(--symbolFill--default); stroke: var(--symbolStroke--default); } .ia_symbolComponent__altFill { fill: var(--symbolStroke--default); } .ia_symbolComponent__inside { fill: var(--symbolFill--stopped); } .ia_symbolComponent__animate--alternateFill { animation: none; } .ia_symbolComponent__animate--alternateFillAlt { animation: none } .ia_symbolComponent__animate--rotate { animation: none; } .ia_symbolComponent__animate--rotate3dYAxis { animation: none; } .ia_symbolComponent--running { fill: var(--symbolFill--running); stroke: var(--symbolStroke--running); } .ia_symbolComponent__altFill--running { fill: var(--symbolStroke--running); } .ia_symbolComponent__animate--alternateFill--running { animation: ia_symbolComponent__animate--alternateFill--running linear infinite; } .ia_symbolComponent__animate--alternateFillAlt--running { animation: ia_symbolComponent__animate--alternateFillAlt--running linear infinite; } .ia_symbolComponent__animate--rotate--running { animation: ia_symbolComponent__animate--rotate linear infinite; } .ia_symbolComponent__animate--rotate3dYAxis--running { animation: ia_symbolComponent__animate--rotate3dYAxis linear infinite; } .ia_symbolComponent--stopped { fill: var(--symbolFill--stopped); stroke: var(--symbolStroke--stopped); } .ia_symbolComponent__altFill--stopped { fill: var(--symbolStroke--stopped); } .ia_symbolComponent--faulted { fill: var(--symbolFill--faulted); stroke: var(--symbolStroke--faulted); animation: ia_symbolComponent__animate--faulted linear infinite; } .ia_symbolComponent__altFill--faulted { fill: var(--symbolStroke--faulted); } .ia_symbolComponent--open { fill: var(--symbolFill--running); stroke: var(--symbolStroke--running); } .ia_symbolComponent__altFill--open { fill: var(--symbolStroke--running); } .ia_symbolComponent--failedToOpen { fill: var(--symbolFill--default); stroke: var(--symbolStroke--faulted); animation: ia_symbolComponent__animate--failedToOpen linear infinite; } .ia_symbolComponent__altFill--failedToOpen { fill: var(--symbolStroke--faulted); } .ia_symbolComponent--partiallyClosed { fill: var(--symbolFill--stopped); stroke: var(--symbolStroke--running); } .ia_symbolComponent__altFill--partiallyClosed { fill: var(--symbolStroke--running); } .ia_symbolComponent__defaultFill--partiallyClosed { fill: var(--symbolFill--running); } .ia_symbolComponent__defaultFill--reverseFlow--partiallyClosed { fill: var(--symbolFill--stopped); } .ia_symbolComponent__defaultFillAlt--partiallyClosed { fill: var(--symbolFill--stopped); } .ia_symbolComponent__defaultFillAlt--reverseFlow--partiallyClosed { fill: var(--symbolFill--running); } .ia_symbolComponent--closed { fill: var(--symbolFill--stopped); stroke: var(--symbolStroke--stopped); } .ia_symbolComponent__altFill--closed { fill: var(--symbolStroke--stopped); } .ia_symbolComponent--failedToClose { fill: var(--symbolFill--stopped); stroke: var(--symbolStroke--faulted); animation: ia_symbolComponent__animate--failedToClose linear infinite; } .ia_symbolComponent__altFill--failedToClose { fill: var(--symbolStroke--faulted); } .ia_tabContainerComponent__content { border-left: var(--containerBorder); border-right: var(--containerBorder); border-bottom: var(--containerBorder); } .ia_tabContainerComponent__tab--classic { color: var(--neutral-60); border-top: var(--containerBorder); border-right: var(--containerBorder); border-bottom: var(--containerBorder); font-size: 0.875rem; } .ia_tabContainerComponent__tabMenuRight--classic { border-bottom: var(--containerBorder); } .ia_tabContainerComponent__tab--classic:first-child { border-left: var(--containerBorder); } .ia_tabContainerComponent__tab--classic:not(.ia_tabContainerComponent__tab--classic--active, .ia_tabContainerComponent__tab--classic--disabled):hover { filter: brightness(0.9); } .ia_tabContainerComponent__tab--classic--active { background-color: var(--container); font-weight: 500; color: var(--neutral-90); border-top: var(--containerBorder); border-bottom: none; } .ia_tabContainerComponent__tab--classic--disabled { background-color: var(--neutral-40); color: var(--neutral-60); opacity: 0.6 } .ia_tabContainerComponent__tab--modern { color: var(--neutral-70); border-bottom: var(--containerBorder); box-shadow: none; transition: box-shadow 0.2s linear; font-size: 0.875rem; } .ia_tabContainerComponent__tabMenuRight--modern { border-bottom: var(--containerBorder); } .ia_tabContainerComponent__tab--modern--active { font-weight: 500; color: var(--neutral-90); box-shadow: inset 0 -3px var(--border); } .ia_tabContainerComponent__tab--modern--disabled { color: var(--neutral-60); opacity: 0.6 } .ia_tabContainerComponent__tab--modern:not(.ia_tabContainerComponent__tab--modern--active, .ia_tabContainerComponent__tab--modern--disabled):hover { filter: brightness(0.8); } .ia_tabContainerComponent--designing__deleteConfirmation { color: var(--label); background-color: var(--containerNested); border: var(--containerBorder); } .ia_tabContainerComponent--designing__deleteConfirmation__delete { font-size: 0.75rem; background-color: var(--error); } .ia_tabContainerComponent--designing__deleteConfirmation__cancel { font-size: 0.75rem; } .ia_tabContainerComponent--designing__tab--pendingDelete { border: var(--containerBorder); border-color: var(--error); } .ia_tableComponent { border: var(--containerBorder); } .ia_tableComponent__filterContainer { background-color: var(--neutral-30); } .ia_tableComponent__body__row--hovered { color: var(--neutral-90); background-color: rgba(12, 123, 179, 0.10); } .ia_tableComponent__selection { background-color: rgba(12, 123, 179, 0.25); } .ia_tableComponent__selection--root { border: 1px var(--callToAction) solid; } .ia_tableComponent__editableCell { border: 1px var(--callToAction) solid; box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.3); background-color: var(--container); } .ia_tagBrowseTreeComponent { font-size: 0.75rem; color: var(--neutral-100); border: 1px solid var(--border); background-color: var(--neutral-20); } .ia_tagBrowseTreeComponent__title { font-weight: bold; } .ia_tagBrowseTreeComponent__icon { color: var(--neutral-70); cursor: pointer; } .ia_tagBrowseTreeComponent__tree { background-color: var(--neutral-10); border: 1px solid var(--border); } .ia_tagBrowseTreeComponent.mobile { font-size: 1.5rem; } .ia_thermometerComponent__glass, .ia_thermometerComponent__tick, .ia_thermometerComponent__meniscus { stroke: var(--neutral-90); } .ia_thermometerComponent__unit, .ia_thermometerComponent__tickLabel, .ia_thermometerComponent__valueDisplay { font-size: 1.5rem; fill: var(--neutral-90); } .ia_thermometerComponent__liquid { fill: var(--seq-2); } .ia_toggleSwitchComponent { color: var(--label); } .ia_toggleSwitchComponent--disabled { color: var(--label--disabled); } .ia_componentTooltip { background-color: var(--neutral-100); color: var(--neutral-10); } .ia_treeComponent__node { font-size: 0.75rem; line-height: 1rem; } .ia_treeComponent__node:hover:not(.ia_treeComponent__node--selected) { background-color: var(--callToActionHighlight); } .ia_treeComponent__node--selected { background-color: var(--callToAction); color: var(--neutral-10); font-weight: 700; } .ia_treeComponent__node__icon { fill: var(--icon); } .ia_treeComponent__expandIcon, .ia_treeComponent__terminalExpandIcon, .ia_treeComponent__node__icon--expanded { fill: var(--icon); } .ia_treeComponent__node__icon--selected, .ia_treeComponent__expandIcon--selected { fill: var(--icon--selected); } .ia_treeComponent__alignmentGuide { color: var(--border); } .ia_treeComponent__alignmentGuide--selected { color: var(--neutral-10); } .ia_treeComponent__node.mobile { font-size: 1.5rem; } .ia_videoPlayerComponent { background-color: var(--container); } .ia_videoPlayerComponent__controlContainer { background-color: var(--container); border: var(--containerBorder); color: var(--neutral-70); } .ia_videoPlayerComponent__controlContainer__playControl, .ia_videoPlayerComponent__controlContainer__volumeControl, .ia_videoPlayerComponent__controlContainer__playRateControl, .ia_videoPlayerComponent__controlContainer__fullscreenControl { fill: currentColor; } .ia_videoPlayerComponent__controlContainer__playControl:hover:not(.disabled), .ia_videoPlayerComponent__controlContainer__volumeControl:hover:not(.disabled), .ia_videoPlayerComponent__controlContainer__playRateControl:hover:not(.disabled), .ia_videoPlayerComponent__controlContainer__fullscreenControl:hover:not(.disabled) { color: var(--icon--hover); } .ia_videoPlayerComponent__controlContainer__timeDurationDisplay { color: var(--label); } .ia_videoPlayerComponent__controlPopupContainer, .ia_videoPlayerComponent__contextMenuPopupContainer { background-color: rgba(0, 0, 0, 1); color: var(--callToAction); } .ia_videoPlayerComponent__videoOverlay { background-color: transparent; color: var(--white); } .ia_videoPlayerComponent__videoOverlay--paused { background-color: var(--opacity-50); } .ia_videoPlayerComponent__videoOverlay_centralContainer { background-color: var(--opacity-85); } .ia_alarmJournalTableComponent__selection { background-color: rgba(34, 154, 214, 0.2); } .ia_alarmStatusTableComponent__selection { background-color: rgba(34, 154, 214, 0.2); } .ia_horizontalMenuComponent__item:not(.ia_horizontalMenuComponent__item--active):not(.ia_horizontalMenuComponent__item--disabled):hover { filter: brightness(1.2); } .ia_horizontalMenuComponent__modal .ia_horizontalMenuComponent__item:not(.ia_horizontalMenuComponent__item--active):not(.ia_horizontalMenuComponent__item--disabled):hover { filter: brightness(1.2); } .ia_ledComponent__background { fill: var(--black); } .ia_menuTreeComponent__item:not(.ia_menuTreeComponent__header):hover { filter: brightness(1.2); } .ia_powerChartComponent__penDataDisplay__brushRangeGroupLabel { color: var(--neutral-50); } .power-chart-component.ia_powerChartComponent .ia_chartRow__background { fill: var(--neutral-10) !important; } .ia_powerChartComponent__xTrace__box { fill: transparent; stroke: transparent !important; } .ia_powerChartComponent__labelText { fill: var(--neutral-100)!important; } .power-chart-component.ia_powerChartComponent { background-color: var(--pc-bg) !important; } .ia_tableComponent__body__row--hovered { color: var(--neutral-90); background-color: rgba(34, 154, 214, 0.10); } .ia_tableComponent__selection { background-color: rgba(34, 154, 214, 0.25); } .ia_treeComponent__node { font-size: 0.75rem; line-height: 1rem; } .ia_treeComponent__node:hover:not(.ia_treeComponent__node--selected) { background-color: var(--callToActionHighlight); } .ia_treeComponent__node--selected { background-color: var(--info); color: var(--div-1); font-weight: 700; } .ia_treeComponent__node__icon { fill: var(--icon); } .ia_treeComponent__expandIcon, .ia_treeComponent__node__icon--expanded { fill: var(--icon); } .ia_treeComponent__node__icon--selected, .ia_treeComponent__expandIcon--selected { fill: var(--icon--selected); } .ia_treeComponent__alignmentGuide { color: var(--border); } .ia_treeComponent__alignmentGuide--selected { color: var(--neutral-10); }