:root { --font-size-base: 16px; --font-size-h1: 28px; --font-size-h2: 24px; --font-size-h3: 20px; --font-size-h4: 16px; --font-size-h5: 14px; --primary-color: #FF6200; } /* Document * ========================================================================== */ /** * 1. Correct the line height in all browsers. * 2. Prevent adjustments of font size after orientation changes in * IE on Windows Phone and in iOS. */ html { line-height: 1.15; /* 1 */ -ms-text-size-adjust: 100%; /* 2 */ -webkit-text-size-adjust: 100%; /* 2 */ } /* Sections * ========================================================================== */ /** * Correct the font size and margin on `h1` elements within `section` and * `article` contexts in Chrome, Edge, Firefox, and Safari. */ h1 { font-size: 2em; margin: 0.67em 0; } /* Grouping content * ========================================================================== */ /** * Remove the margin on nested lists in Chrome, Edge, IE, and Safari. */ dl dl, dl ol, dl ul, ol dl, ul dl { margin: 0; } /** * Remove the margin on nested lists in Edge 18- and IE. */ ol ol, ol ul, ul ol, ul ul { margin: 0; } /** * 1. Add the correct box sizing in Firefox. * 2. Show the overflow in Edge 18- and IE. */ hr { box-sizing: content-box; /* 1 */ height: 0; /* 1 */ overflow: visible; /* 2 */ } /** * Add the correct display in IE. */ main { display: block; } /** * 1. Correct the inheritance and scaling of font size in all browsers. * 2. Correct the odd `em` font sizing in all browsers. */ pre { font-family: monospace, monospace; /* 1 */ font-size: 1em; /* 2 */ } /* Text-level semantics * ========================================================================== */ /** * Add the correct text decoration in Edge 18-, IE, and Safari. */ abbr[title] { text-decoration: underline; text-decoration: underline dotted; } /** * Add the correct font weight in Chrome, Edge, and Safari. */ b, strong { font-weight: bolder; } /** * 1. Correct the inheritance and scaling of font size in all browsers. * 2. Correct the odd `em` font sizing in all browsers. */ code, kbd, samp { font-family: monospace, monospace; /* 1 */ font-size: 1em; /* 2 */ } /** * Add the correct font size in all browsers. */ small { font-size: 80%; } /* Embedded content * ========================================================================== */ /** * Hide the overflow in IE. */ svg:not(:root) { overflow: hidden; } /* Forms * ========================================================================== */ /** * Remove the margin on controls in Safari. */ button, input, select { margin: 0; } /** * 1. Show the overflow in IE. * 2. Remove the inheritance of text transform in Edge 18-, Firefox, and IE. */ button { overflow: visible; /* 1 */ text-transform: none; /* 2 */ } /** * Correct the inability to style buttons in iOS and Safari. */ button, [type="button"], [type="reset"], [type="submit"] { -webkit-appearance: button; } /** * Correct the padding in Firefox. */ fieldset { padding: 0.35em 0.75em 0.625em; } /** * Show the overflow in Edge 18- and IE. */ input { overflow: visible; } /** * 1. Correct the text wrapping in Edge 18- and IE. * 2. Correct the color inheritance from `fieldset` elements in IE. */ legend { box-sizing: border-box; /* 1 */ color: inherit; /* 2 */ display: table; /* 1 */ max-width: 100%; /* 1 */ white-space: normal; /* 1 */ } /** * 1. Add the correct display in Edge 18- and IE. * 2. Add the correct vertical alignment in Chrome, Edge, and Firefox. */ progress { display: inline-block; /* 1 */ vertical-align: baseline; /* 2 */ } /** * Remove the inheritance of text transform in Firefox. */ select { text-transform: none; } /** * 1. Remove the margin in Firefox and Safari. * 2. Remove the default vertical scrollbar in IE. */ textarea { margin: 0; /* 1 */ overflow: auto; /* 2 */ } /** * 1. Correct the odd appearance in Chrome, Edge, and Safari. * 2. Correct the outline style in Safari. */ [type="search"] { -webkit-appearance: textfield; /* 1 */ outline-offset: -2px; /* 2 */ } /** * Correct the cursor style of increment and decrement buttons in Safari. */ ::-webkit-inner-spin-button, ::-webkit-outer-spin-button { height: auto; } /** * Correct the text style of placeholders in Chrome, Edge, and Safari. */ ::-webkit-input-placeholder { color: inherit; opacity: 0.54; } /** * Remove the inner padding in Chrome, Edge, and Safari on macOS. */ ::-webkit-search-decoration { -webkit-appearance: none; } /** * 1. Correct the inability to style upload buttons in iOS and Safari. * 2. Change font properties to `inherit` in Safari. */ ::-webkit-file-upload-button { -webkit-appearance: button; /* 1 */ font: inherit; /* 2 */ } /** * Remove the inner border and padding of focus outlines in Firefox. */ ::-moz-focus-inner { border-style: none; padding: 0; } /** * Restore the focus outline styles unset by the previous rule in Firefox. */ :-moz-focusring { outline: 1px dotted ButtonText; } /** * Remove the additional :invalid styles in Firefox. */ :-moz-ui-invalid { box-shadow: none; } /* Interactive * ========================================================================== */ /* * Add the correct display in Edge 18- and IE. */ details { display: block; } /* * Add the correct styles in Edge 18-, IE, and Safari. */ dialog { background-color: white; border: solid; color: black; display: block; height: -moz-fit-content; height: -webkit-fit-content; height: fit-content; left: 0; margin: auto; padding: 1em; position: absolute; right: 0; width: -moz-fit-content; width: -webkit-fit-content; width: fit-content; } dialog:not([open]) { display: none; } /* * Add the correct display in all browsers. */ summary { display: list-item; } /* Scripting * ========================================================================== */ /** * Add the correct display in IE. */ template { display: none; } /* User interaction * ========================================================================== */ @font-face { font-family: 'INGMe'; src: url('/static/assets/fonts/Regular/INGMeWeb-Regular.eot?#iefix') format('embedded-opentype'), url('/static/assets/fonts/Regular/INGMeWeb-Regular.woff') format('woff'), url('/static/assets/fonts/Regular/INGMeWeb-Regular.woff2') format('woff2'), url('/static/assets/fonts/Regular/INGMeWeb-Regular.ttf') format('truetype'), url('/static/assets/fonts/Regular/INGMeWeb-Regular.svg#svgFontName') format('svg'); } @font-face { font-family: 'INGMe'; font-weight: bold; src: url('/static/assets/fonts/Bold/INGMeWeb-Bold.eot?#iefix') format('embedded-opentype'), url('/static/assets/fonts/Bold/INGMeWeb-Bold.woff') format('woff'), url('/static/assets/fonts/Bold/INGMeWeb-Bold.woff2') format('woff2'), url('/static/assets/fonts/Bold/INGMeWeb-Bold.ttf') format('truetype'), url('/static/assets/fonts/Bold/INGMeWeb-Bold.svg#svgFontName') format('svg'); } @font-face { font-family: 'INGMe'; font-style: italic; src: url('/static/assets/fonts/Italic/INGMeWeb-Italic.eot?#iefix') format('embedded-opentype'), url('/static/assets/fonts/Italic/INGMeWeb-Italic.woff') format('woff'), url('/static/assets/fonts/Italic/INGMeWeb-Italic.woff2') format('woff2'), url('/static/assets/fonts/Italic/INGMeWeb-Italic.ttf') format('truetype'), url('/static/assets/fonts/Italic/INGMeWeb-Italic.svg#svgFontName') format('svg'); } @font-face { font-family: 'INGMe'; font-weight: bold; font-style: italic; src: url('/static/assets/fonts/BoldItalic/INGMeWeb-BoldItalic.eot?#iefix') format('embedded-opentype'), url('/static/assets/fonts/BoldItalic/INGMeWeb-BoldItalic.woff') format('woff'), url('/static/assets/fonts/BoldItalic/INGMeWeb-BoldItalic.woff2') format('woff2'), url('/static/assets/fonts/BoldItalic/INGMeWeb-BoldItalic.ttf') format('truetype'), url('/static/assets/fonts/BoldItalic/INGMeWeb-BoldItalic.svg#svgFontName') format('svg'); } @font-face { font-family: 'XLINQ_Icons'; src: url('/static/assets/fonts/xlinq/XLINQ_Icons.eot'); src: url('/static/assets/fonts/xlinq/XLINQ_Icons.eot?#iefix') format('embedded-opentype'), url('/static/assets/fonts/xlinq/XLINQ_Icons.woff') format('woff'), url('/static/assets/fonts/xlinq/XLINQ_Icons.ttf') format('truetype'), url('/static/assets/fonts/xlinq/XLINQ_Icons.svg#XLINQ_Icons') format('svg'); font-weight: normal; font-style: normal; } body { font-family: 'INGMe', 'Helvetica', 'Calibri', 'XLINQ_Icons', sans-serif; font-size: 16px; font-size: 16px; font-size: var(--font-size-base); -webkit-font-smoothing: antialiased; background-color: #F7F7F7; overflow-x: hidden; margin: 0px; } .darkMode { background-color: #1F3752; color: #CBD4DD; } .login__wrapper--3rYcr { background-color: #F7F7F7; } .icon-xlinq-arrow_right:before {content:'\0041';} .icon-xlinq-audit_trail:before {content:'\0042';} .icon-xlinq-cancelled:before {content:'\0043';} .icon-xlinq-check:before {content:'\0044';} .icon-xlinq-collapse_arrow_left-1:before {content:'\0045';} .icon-xlinq-collapse_arrow_left:before {content:'\0046';} .icon-xlinq-edit:before {content:'\0047';} .icon-xlinq-notifications:before {content:'\0048';} .icon-xlinq-trash:before {content:'\0049';} .icon-xlinq-user:before {content:'\004a';} .icon-xlinq-filter:before {content:'\004b';} .icon-xlinq-deactivate:before {content:'\004c';} .icon-xlinq-download:before {content:'\004d';} .icon-xlinq-inbox:before {content:'\004e';} .icon-xlinq-pending:before {content:'\004f';} .loader, .loader:after { border-radius: 50%; width: 10em; height: 10em; } .loader { margin: 60px auto; font-size: 10px; position: relative; text-indent: -9999em; border-top: 1.1em solid rgba(255, 255, 255, 0.2); border-right: 1.1em solid rgba(255, 255, 255, 0.2); border-bottom: 1.1em solid rgba(255, 255, 255, 0.2); border-left: 1.1em solid #ffffff; -webkit-transform: translateZ(0); transform: translateZ(0); -webkit-animation: login__load8--3VPl4 1.1s infinite linear; animation: login__load8--3VPl4 1.1s infinite linear; } @-webkit-keyframes login__load8--3VPl4 { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes login__load8--3VPl4 { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } /*** * Global css forms integrated ***/ .md-form.aluminium fieldset > div > div:first-child > label { top: -5px; } .md-form.aluminium fieldset > div > div > div:not(.material-form-select) { margin-top: 10px; align-items: start; border: solid 1px #0A2E5930; padding: 5px; border-radius: 3px; } .md-form.aluminium fieldset > div > div > div:not(.material-form-select)::before { border-bottom: none; } .md-form.aluminium fieldset > div > div > div:not(.material-form-select) input { padding: 5px; } .md-form.aluminium fieldset > div:not(.draggableUploadField) label { top: -5px; font-weight: bold; color: #081D35; } .md-form.aluminium fieldset > div > div .material-form-select label + div { border: solid 1px #0A2E5930; margin-top: 35px; border-radius: 3px; } .md-form.aluminium fieldset > div > div .material-form-select label + div::before { border-bottom: none; } .md-form.aluminium .material-form-select div > label + div > div > div p { padding: 10px; } .md-form.aluminium-dark fieldset > div > div:first-child > label { top: -5px; } .md-form.aluminium-dark fieldset > div > div > div:not(.material-form-select, .draggableUploadField) { margin-top: 10px; align-items: start; border: solid 1px #c1cad324; padding: 5px; border-radius: 3px; } .md-form.aluminium-dark fieldset > div > div > div:not(.material-form-select, .draggableUploadField)::before { border-bottom: none; } .md-form.aluminium-dark fieldset > div > div > div:not(.material-form-select, .draggableUploadField) input { padding: 5px; } .md-form.aluminium-dark fieldset > div:not(.draggableUploadField) label { top: -5px; font-weight: bold; color: #cbd4dd; } .md-form.aluminium-dark fieldset > div > div .material-form-select label + div { border: solid 1px #c1cad324; margin-top: 35px; border-radius: 3px; } .md-form.aluminium-dark fieldset > div > div .material-form-select label + div::before { border-bottom: none; } .md-form.aluminium-dark .material-form-select div > label + div > div > div p { padding: 10px; } /** Upload Button **/ .md-form.xlinq div > label input + span, .md-form.aluminium div > label input + span, .md-form.cobalt div > label input + span { color: #4c93f0; border: 1px solid #4c93f0; } .md-form.xlinq div > label input + span .material-icons, .md-form.aluminium div > label input + span .material-icons, .md-form.cobalt div > label input + span .material-icons { color: #4c93f0; } .md-form.xlinq div > label input + span:hover, .md-form.aluminium div > label input + span:hover, .md-form.cobalt div > label input + span:hover { background-color: #4c93f012; } .md-form.xlinq .MuiFormLabel-root.Mui-focused, .md-form.aluminium .MuiFormLabel-root.Mui-focused, .md-form.cobalt .MuiFormLabel-root.Mui-focused { color: rgb(53, 102, 168) !important; } .md-form.xlinq .MuiInput-underline:after, .md-form.aluminium .MuiInput-underline:after, .md-form.cobalt .MuiInput-underline:after { border-bottom: 2px solid rgb(53, 102, 168) !important; } .md-form.xlinq fieldset > label + div > div > div:last-child > button, .md-form.aluminium fieldset > label + div > div > div:last-child > button, .md-form.cobalt fieldset > label + div > div > div:last-child > button { background: #4c93f0; } .md-form.xlinq div > div[role='button'], .md-form.aluminium div > div[role='button'], .md-form.cobalt div > div[role='button'] { background-color: #f7fbfd; border: solid 1px #4c93f0; } .md-form.xlinq div > div[role='button'] > span + svg, .md-form.aluminium div > div[role='button'] > span + svg, .md-form.cobalt div > div[role='button'] > span + svg { color: #4c93f0 !important; } .md-form.xlinq fieldset div > button:not[title='Open']:hover, .md-form.aluminium fieldset div > button:not[title='Open']:hover, .md-form.cobalt fieldset div > button:not[title='Open']:hover { background-color: #3480dd!important; } .md-form.xlinq fieldset div > div > div + div > button:hover, .md-form.aluminium fieldset div > div > div + div > button:hover, .md-form.cobalt fieldset div > div > div + div > button:hover { background-color: #3480dd!important; } .md-form.xlinq div fieldset + div button, .md-form.aluminium div fieldset + div button, .md-form.cobalt div fieldset + div button { background-color: #4c93f0; } .md-form.xlinq .material-form-datepicker button:hover, .md-form.aluminium .material-form-datepicker button:hover, .md-form.cobalt .material-form-datepicker button:hover { background-color: rgba(0, 0, 0, 0.08) !important; -webkit-filter: none !important; filter: none !important; } .md-form.xlinq .MuiCheckbox-colorSecondary.Mui-checked, .md-form.aluminium .MuiCheckbox-colorSecondary.Mui-checked, .md-form.cobalt .MuiCheckbox-colorSecondary.Mui-checked { color: #4c93f0 !important; } .md-form.xlinq .MuiCheckbox-colorSecondary.Mui-disabled, .md-form.aluminium .MuiCheckbox-colorSecondary.Mui-disabled, .md-form.cobalt .MuiCheckbox-colorSecondary.Mui-disabled { color: rgba(0, 0, 0, 0.26)!important; } .md-form.xlinq .MuiIconButton-colorSecondary:hover, .md-form.aluminium .MuiIconButton-colorSecondary:hover, .md-form.cobalt .MuiIconButton-colorSecondary:hover { background-color: rgba(33, 150, 243, 0.03); } .inlineSearchForm.xlinq .MuiFormLabel-root.Mui-focused, .inlineSearchForm.aluminium .MuiFormLabel-root.Mui-focused, .inlineSearchForm.cobalt .MuiFormLabel-root.Mui-focused, .md-form.cobalt .MuiFormLabel-root.Mui-focused { color: rgb(53, 102, 168) !important; } .inlineSearchForm.xlinq .MuiInput-underline:after, .inlineSearchForm.aluminium .MuiInput-underline:after, .inlineSearchForm.cobalt .MuiInput-underline:after, .md-form.cobalt .MuiInput-underline:after { border-bottom: 2px solid rgb(53, 102, 168) !important; } .inlineSearchForm.xlinq div[role='button'] > span + svg, .inlineSearchForm.aluminium div[role='button'] > span + svg, .inlineSearchForm.cobalt div[role='button'] > span + svg, .md-form.cobalt div[role='button'] > span + svg { color: #4c93f0 !important; } .inlineSearchForm.xlinq .stateSelection__option--is-selected, .inlineSearchForm.xlinq .stateSelection__option--is-focused, .inlineSearchForm.aluminium .stateSelection__option--is-selected, .inlineSearchForm.aluminium .stateSelection__option--is-focused, .inlineSearchForm.cobalt .stateSelection__option--is-selected, .inlineSearchForm.cobalt .stateSelection__option--is-focused, .md-form.cobalt .stateSelection__option--is-selected, .md-form.cobalt .stateSelection__option--is-focused{ background-color: rgba(67, 148, 247, 0.1); color: black; } .inlineSearchForm.xlinq .stateSelection__multi-value, .inlineSearchForm.aluminium .stateSelection__multi-value, .inlineSearchForm.cobalt .stateSelection__multi-value, .md-form.cobalt .stateSelection__multi-value { color: #4394F7; background: rgba(67, 148, 247, 0.1); font-weight: bold; } .inlineSearchForm.xlinq .stateSelection__multi-value .stateSelection__multi-value__label, .inlineSearchForm.aluminium .stateSelection__multi-value .stateSelection__multi-value__label, .inlineSearchForm.cobalt .stateSelection__multi-value .stateSelection__multi-value__label, .md-form.cobalt .stateSelection__multi-value .stateSelection__multi-value__label { color: #4394F7; } /** Upload Button **/ .md-form.emerald div > label input + span { color: #2CC987; border: 1px solid #2CC987; } .md-form.emerald div > label input + span .material-icons { color: #2CC987; } .md-form.emerald div > label input + span:hover { background-color: #4c93f012; } .md-form.emerald .MuiFormLabel-root.Mui-focused { color: rgba(72, 188, 146, 0.1) !important; } .md-form.emerald .MuiInput-underline:after { border-bottom: 2px solid rgba(72, 188, 146, 0.1) !important; } .md-form.emerald fieldset > label + div > div > div:last-child > button { background: #2CC987; } .md-form.emerald div > div[role='button'] { background-color: #f7fbfd; border: solid 1px #2CC987; } .md-form.emerald div > div[role='button'] > span + svg { color: #2CC987 !important; } .md-form.emerald fieldset div > button:not[title='Open']:hover { background-color: #2CC987!important; } .md-form.emerald fieldset div > div > div + div > button:hover { background-color: #2CC987!important; } .md-form.emerald div fieldset + div button { background-color: #2CC987; } .md-form.emerald .material-form-datepicker button:hover { background-color: rgba(0, 0, 0, 0.08) !important; -webkit-filter: none !important; filter: none !important; } .md-form.emerald .MuiCheckbox-colorSecondary.Mui-checked { color: #4c93f0 !important; } .md-form.emerald .MuiCheckbox-colorSecondary.Mui-disabled { color: rgba(0, 0, 0, 0.26)!important; } .md-form.emerald .MuiIconButton-colorSecondary:hover { background-color: rgba(33, 150, 243, 0.03); } .inlineSearchForm.emerald .MuiFormLabel-root.Mui-focused, .md-form.emerald .MuiFormLabel-root.Mui-focused { color: rgb(53, 168, 118) !important; } .inlineSearchForm.emerald .MuiInput-underline:after, .md-form.emerald .MuiInput-underline:after { border-bottom: 2px solid rgb(53, 168, 105) !important; } .inlineSearchForm.emerald div[role='button'] > span + svg, .md-form.emerald div[role='button'] > span + svg { color: #2CC987 !important; } .inlineSearchForm.emerald .stateSelection__option--is-selected, .inlineSearchForm.emerald .stateSelection__option--is-focused, .md-form.emerald .stateSelection__option--is-selected, .md-form.emerald .stateSelection__option--is-focused{ background-color: rgba(67, 148, 247, 0.1); color: black; } .inlineSearchForm.emerald .stateSelection__multi-value, .md-form.emerald .stateSelection__multi-value { color: #40A7F1; background: rgba(67, 148, 247, 0.1); font-weight: bold; } .inlineSearchForm.emerald .stateSelection__multi-value .stateSelection__multi-value__label, .md-form.emerald .stateSelection__multi-value .stateSelection__multi-value__label { color: #40A7F1; } .drawerForm.emerald { width: 100%; } .drawerForm.emerald > div > fieldset + div > button { background: #40A7F1 !important; } /** Upload Button **/ .md-form.indigo div > label input + span { color: #3A37E3; border: 1px solid #3A37E3; } .md-form.indigo div > label input + span .material-icons { color: #3A37E3; } .md-form.indigo div > label input + span:hover { background-color: #4c93f012; } .md-form.indigo .MuiFormLabel-root.Mui-focused { color: rgb(53, 102, 168) !important; } .md-form.indigo .MuiInput-underline:after { border-bottom: 2px solid rgb(53, 102, 168) !important; } .md-form.indigo fieldset > label + div > div > div:last-child > button { background: #3A37E3; } .md-form.indigo div > div[role='button'] { background-color: #f7fbfd; border: solid 1px #3A37E3; } .md-form.indigo div > div[role='button'] > span + svg { color: #3A37E3 !important; } .md-form.indigo fieldset div > button:not[title='Open']:hover { background-color: #3A37E3!important; } .md-form.indigo fieldset div > div > div + div > button:hover { background-color: #3A37E3!important; } .md-form.indigo div fieldset + div button { background-color: #3A37E3; } .md-form.indigo .material-form-datepicker button:hover { background-color: rgba(0, 0, 0, 0.08) !important; -webkit-filter: none !important; filter: none !important; } .md-form.indigo .MuiCheckbox-colorSecondary.Mui-checked { color: #3A37E3 !important; } .md-form.indigo .MuiCheckbox-colorSecondary.Mui-disabled { color: rgba(0, 0, 0, 0.26)!important; } .md-form.indigo .MuiIconButton-colorSecondary:hover { background-color: rgba(33, 150, 243, 0.03); } .inlineSearchForm.indigo .MuiFormLabel-root.Mui-focused, .md-form.indigo .MuiFormLabel-root.Mui-focused { color: rgb(72, 53, 168) !important; } .inlineSearchForm.indigo .MuiInput-underline:after, .md-form.indigo .MuiInput-underline:after { border-bottom: 2px solid rgb(53, 53, 168) !important; } .inlineSearchForm.indigo div[role='button'] > span + svg, .md-form.indigo div[role='button'] > span + svg { color: #3A37E3 !important; } .inlineSearchForm.indigo .stateSelection__option--is-selected, .inlineSearchForm.indigo .stateSelection__option--is-focused, .md-form.indigo .stateSelection__option--is-selected, .md-form.indigo .stateSelection__option--is-focused{ background-color: rgba(67, 148, 247, 0.1); color: black; } .inlineSearchForm.indigo .stateSelection__multi-value, .md-form.indigo .stateSelection__multi-value { color: #EE9C3B; background: #fdf5eb; font-weight: bold; } .inlineSearchForm.indigo .stateSelection__multi-value .stateSelection__multi-value__label, .md-form.indigo .stateSelection__multi-value .stateSelection__multi-value__label { color: #EE9C3B; } .drawerForm.indigo { width: 100%; } .drawerForm.indigo > div > fieldset + div > button { background: #EE9C3B !important; } /** Upload Button **/ .md-form.ing div > label input + span, .md-form.magnesium div > label input + span { color: #ff6102; border: 1px solid #ff6102; } .md-form.ing div > label input + span .material-icons, .md-form.magnesium div > label input + span .material-icons { color: #ff6102; } .md-form.ing div > label input + span:hover, .md-form.magnesium div > label input + span:hover { background-color: #ff62000d; } .md-form.ing .MuiFormLabel-root.Mui-focused, .md-form.magnesium .MuiFormLabel-root.Mui-focused { color: rgb(178, 68, 0) !important; } .md-form.ing .MuiInput-underline:after, .md-form.magnesium .MuiInput-underline:after { border-bottom: 2px solid rgb(178, 68, 0) !important; } .md-form.ing fieldset > label + div > div > div:last-child > button, .md-form.magnesium fieldset > label + div > div > div:last-child > button { background: #ff6102; } .md-form.ing div > div[role='button'], .md-form.magnesium div > div[role='button'] { background-color: #ff620033; border: solid 1px #ff6102; } .md-form.ing div > div[role='button'] > span + svg, .md-form.magnesium div > div[role='button'] > span + svg { color: #ff6102 !important; } .md-form.ing fieldset div > button:not[title='Open']:hover, .md-form.magnesium fieldset div > button:not[title='Open']:hover { background-color: rgb(178, 68, 0); -webkit-filter: brightness(1.5); filter: brightness(1.5); } .md-form.ing fieldset div > div > div + div > button:hover, .md-form.magnesium fieldset div > div > div + div > button:hover { background-color: #c44d28d6; -webkit-filter: brightness(1.5); filter: brightness(1.5); } .md-form.ing div fieldset + div:not(.material-form-datepicker) button:not(.Mui-disabled), .md-form.magnesium div fieldset + div:not(.material-form-datepicker) button:not(.Mui-disabled) { background-color: #ff6102; } .md-form.ing .material-form-datepicker button:hover, .md-form.magnesium .material-form-datepicker button:hover { background-color: rgba(0, 0, 0, 0.08) !important; -webkit-filter: none !important; filter: none !important; } .md-form.ing .MuiCheckbox-colorSecondary.Mui-checked, .md-form.magnesium .MuiCheckbox-colorSecondary.Mui-checked { color: #ff6102 !important; } .md-form.ing .MuiCheckbox-colorSecondary.Mui-disabled, .md-form.magnesium .MuiCheckbox-colorSecondary.Mui-disabled { color: rgba(0, 0, 0, 0.26)!important; } .md-form.ing .MuiIconButton-colorSecondary:hover, .md-form.magnesium .MuiIconButton-colorSecondary:hover { background-color: rgba(255, 97, 0, 0.08); } .inlineSearchForm.ing .MuiFormLabel-root.Mui-focused, .inlineSearchForm.magnesium .MuiFormLabel-root.Mui-focused, .md-form.magnesium .MuiFormLabel-root.Mui-focused { color: rgb(178, 68, 0) !important; } .inlineSearchForm.ing .MuiInput-underline:after, .inlineSearchForm.magnesium .MuiInput-underline:after, .md-form.magnesium .MuiInput-underline:after { border-bottom: 2px solid rgb(178, 68, 0) !important; } .inlineSearchForm.ing div[role='button'] > span + svg, .inlineSearchForm.magnesium div[role='button'] > span + svg, .md-form.magnesium div[role='button'] > span + svg { color: #ff6102 !important; } .inlineSearchForm.ing .stateSelection__option--is-selected, .inlineSearchForm.ing .stateSelection__option--is-focused, .inlineSearchForm.magnesium .stateSelection__option--is-selected, .inlineSearchForm.magnesium .stateSelection__option--is-focused, .md-form.magnesium .stateSelection__option--is-selected, .md-form.magnesium .stateSelection__option--is-focused{ background-color: rgba(82, 81, 153, 0.1); color: black; } .inlineSearchForm.ing .stateSelection__multi-value, .inlineSearchForm.magnesium .stateSelection__multi-value, .md-form.magnesium .stateSelection__multi-value { color: #525199; background: rgba(82, 81, 153, 0.1); font-weight: bold; } .inlineSearchForm.ing .stateSelection__multi-value .stateSelection__multi-value__label, .inlineSearchForm.magnesium .stateSelection__multi-value .stateSelection__multi-value__label, .md-form.magnesium .stateSelection__multi-value .stateSelection__multi-value__label { color: #525199; } .drawerForm.magnesium { width: 100%; } .drawerForm.magnesium > div > fieldset + div > button:not(.Mui-disabled) { background: #525199 !important; } /** Upload Button **/ .md-form.ruby div > label input + span { color: #FF3D3D; border: 1px solid #FF3D3D; } .md-form.ruby div > label input + span .material-icons { color: #FF3D3D; } .md-form.ruby div > label input + span:hover { background-color: #f04c4c12; } .md-form.ruby .MuiFormLabel-root.Mui-focused { color: rgba(188, 72, 72, 0.1) !important; } .md-form.ruby .MuiInput-underline:after { border-bottom: 2px solid rgba(188, 72, 72, 0.1) !important; } .md-form.ruby fieldset > label + div > div > div:last-child > button { background: #FF3D3D; } .md-form.ruby div > div[role='button'] { background-color: #f7fbfd; border: solid 1px #FF3D3D; } .md-form.ruby div > div[role='button'] > span + svg { color: #FF3D3D !important; } .md-form.ruby fieldset div > button:not[title='Open']:hover { background-color: #FF3D3D!important; } .md-form.ruby fieldset div > div > div + div > button:hover { background-color: #FF3D3D!important; } .md-form.ruby div fieldset + div button { background-color: #FF3D3D; } .md-form.ruby .material-form-datepicker button:hover { background-color: rgba(0, 0, 0, 0.08) !important; -webkit-filter: none !important; filter: none !important; } .md-form.ruby .MuiCheckbox-colorSecondary.Mui-checked { color: #FF3D3D !important; } .md-form.ruby .MuiCheckbox-colorSecondary.Mui-disabled { color: rgba(0, 0, 0, 0.26)!important; } .md-form.ruby .MuiIconButton-colorSecondary:hover { background-color: rgba(243, 33, 33, 0.03); } .inlineSearchForm.ruby .MuiFormLabel-root.Mui-focused, .md-form.ruby .MuiFormLabel-root.Mui-focused { color: rgb(168, 53, 53) !important; } .inlineSearchForm.ruby .MuiInput-underline:after, .md-form.ruby .MuiInput-underline:after { border-bottom: 2px solid rgb(168, 53, 53) !important; } .inlineSearchForm.ruby div[role='button'] > span + svg, .md-form.ruby div[role='button'] > span + svg { color: #FF3D3D !important; } .inlineSearchForm.ruby .stateSelection__option--is-selected, .inlineSearchForm.ruby .stateSelection__option--is-focused, .md-form.ruby .stateSelection__option--is-selected, .md-form.ruby .stateSelection__option--is-focused{ background-color: rgba(247, 67, 67, 0.1); color: #FF3D3D; } .inlineSearchForm.ruby .stateSelection__multi-value, .md-form.ruby .stateSelection__multi-value { color: #FF3D3D; background: rgba(247, 67, 67, 0.1); font-weight: bold; } .inlineSearchForm.ruby .stateSelection__multi-value .stateSelection__multi-value__label, .md-form.ruby .stateSelection__multi-value .stateSelection__multi-value__label { color: #FF3D3D; } .drawerForm.ruby { width: 100%; } .drawerForm.ruby > div > fieldset + div > button { background: #FF3D3D !important; } /** * Variants **/ .inlineSearchForm { width: calc(100% - 65px); margin-right: calc(2% - 30px); margin-left: 10px; height: 75px; flex: 80 1; } .inlineSearchForm div { box-shadow: none !important; } .inlineSearchForm div fieldset + div button { display: none; } .inlineSearchForm div[type='text'] > div { bottom: 5px; } .inlineSearchForm > div { padding: 0px; margin: 0px; margin-top: 10px; max-height: 100px; } .inlineSearchForm fieldset { border: none; padding-top: 0px; } .inlineSearchForm fieldset > div:first-child { height: 150px; align-items: self-start; } .inlineSearchForm fieldset > div > div { margin-right: 15px; } .inlineSearchForm fieldset div:not(.stateSelection):not(.stateSelection__menu):not(.stateSelection__control):not(.stateSelection__value-container):not(.stateSelection__placeholder):not(.stateSelection__indicators):not(.stateSelection__multi-value):not(.stateSelection__multi-value__label):not(.stateSelection__multi-value__remove) { margin-top: 0px !important; flex-flow: row wrap; flex-basis: 100%; flex-grow: 0; } .inlineSearchForm fieldset div:not(.stateSelection):not(.stateSelection__menu):not(.stateSelection__control):not(.stateSelection__value-container):not(.stateSelection__placeholder):not(.stateSelection__indicators):not(.stateSelection__multi-value):not(.stateSelection__multi-value__label):not(.stateSelection__multi-value__remove) > div { display: grid; flex-flow: row wrap; flex-basis: 29.6%; } .inlineSearchForm fieldset div:not(.stateSelection):not(.stateSelection__menu):not(.stateSelection__control):not(.stateSelection__value-container):not(.stateSelection__placeholder):not(.stateSelection__indicators):not(.stateSelection__multi-value):not(.stateSelection__multi-value__label):not(.stateSelection__multi-value__remove) label { left: 13px!important; top: -4px; font-weight: normal; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; width: 93%; font-size: 0.9rem; } .inlineSearchForm fieldset div:not(.stateSelection):not(.stateSelection__menu):not(.stateSelection__control):not(.stateSelection__value-container):not(.stateSelection__placeholder):not(.stateSelection__indicators):not(.stateSelection__multi-value):not(.stateSelection__multi-value__label):not(.stateSelection__multi-value__remove) label + div { place-items: flex-end; } .inlineSearchForm fieldset div:not(.stateSelection):not(.stateSelection__menu):not(.stateSelection__control):not(.stateSelection__value-container):not(.stateSelection__placeholder):not(.stateSelection__indicators):not(.stateSelection__multi-value):not(.stateSelection__multi-value__label):not(.stateSelection__multi-value__remove) label + div:hover:before { border: none!important; } .inlineSearchForm fieldset div:not(.stateSelection):not(.stateSelection__menu):not(.stateSelection__control):not(.stateSelection__value-container):not(.stateSelection__placeholder):not(.stateSelection__indicators):not(.stateSelection__multi-value):not(.stateSelection__multi-value__label):not(.stateSelection__multi-value__remove) label + div:before { width: 90%; border: none; } .inlineSearchForm fieldset div:not(.stateSelection):not(.stateSelection__menu):not(.stateSelection__control):not(.stateSelection__value-container):not(.stateSelection__placeholder):not(.stateSelection__indicators):not(.stateSelection__multi-value):not(.stateSelection__multi-value__label):not(.stateSelection__multi-value__remove) label + div:after { border: none; } .inlineSearchForm fieldset div:not(.stateSelection):not(.stateSelection__menu):not(.stateSelection__control):not(.stateSelection__value-container):not(.stateSelection__placeholder):not(.stateSelection__indicators):not(.stateSelection__multi-value):not(.stateSelection__multi-value__label):not(.stateSelection__multi-value__remove) label + div:after:hover { border: none!important; } .inlineSearchForm fieldset div:not(.stateSelection):not(.stateSelection__menu):not(.stateSelection__control):not(.stateSelection__value-container):not(.stateSelection__placeholder):not(.stateSelection__indicators):not(.stateSelection__multi-value):not(.stateSelection__multi-value__label):not(.stateSelection__multi-value__remove) label + div input { border: solid 1px #DDDDDD; border-radius: 20px; min-width: 100%; min-height: 22px; padding-left: 15px; border-bottom: solid 2px #DDDDDD; } .inlineSearchForm fieldset div:not(.stateSelection):not(.stateSelection__menu):not(.stateSelection__control):not(.stateSelection__value-container):not(.stateSelection__placeholder):not(.stateSelection__indicators):not(.stateSelection__multi-value):not(.stateSelection__multi-value__label):not(.stateSelection__multi-value__remove) label + div input + div > button { right: 57px; } .inlineSearchForm fieldset div:not(.stateSelection):not(.stateSelection__menu):not(.stateSelection__control):not(.stateSelection__value-container):not(.stateSelection__placeholder):not(.stateSelection__indicators):not(.stateSelection__multi-value):not(.stateSelection__multi-value__label):not(.stateSelection__multi-value__remove) .maverickDateRange label { top: -12px; left: 4px!important; } .inlineSearchForm fieldset div:not(.stateSelection):not(.stateSelection__menu):not(.stateSelection__control):not(.stateSelection__value-container):not(.stateSelection__placeholder):not(.stateSelection__indicators):not(.stateSelection__multi-value):not(.stateSelection__multi-value__label):not(.stateSelection__multi-value__remove) .material-form-select { margin-left: -3px; } .inlineSearchForm fieldset div:not(.stateSelection):not(.stateSelection__menu):not(.stateSelection__control):not(.stateSelection__value-container):not(.stateSelection__placeholder):not(.stateSelection__indicators):not(.stateSelection__multi-value):not(.stateSelection__multi-value__label):not(.stateSelection__multi-value__remove) .material-form-select > div { display: inline-block; margin-right: 10px; } .inlineSearchForm fieldset div:not(.stateSelection):not(.stateSelection__menu):not(.stateSelection__control):not(.stateSelection__value-container):not(.stateSelection__placeholder):not(.stateSelection__indicators):not(.stateSelection__multi-value):not(.stateSelection__multi-value__label):not(.stateSelection__multi-value__remove) .material-form-select > div > div:first-child { height: 51px; } .inlineSearchForm fieldset div:not(.stateSelection):not(.stateSelection__menu):not(.stateSelection__control):not(.stateSelection__value-container):not(.stateSelection__placeholder):not(.stateSelection__indicators):not(.stateSelection__multi-value):not(.stateSelection__multi-value__label):not(.stateSelection__multi-value__remove) .material-form-select > div > div { width: 100%; min-width: 150px; } .inlineSearchForm fieldset div:not(.stateSelection):not(.stateSelection__menu):not(.stateSelection__control):not(.stateSelection__value-container):not(.stateSelection__placeholder):not(.stateSelection__indicators):not(.stateSelection__multi-value):not(.stateSelection__multi-value__label):not(.stateSelection__multi-value__remove) .material-form-select > div > div label { left: 0px!important; top: -18px; } .inlineSearchForm fieldset div:not(.stateSelection):not(.stateSelection__menu):not(.stateSelection__control):not(.stateSelection__value-container):not(.stateSelection__placeholder):not(.stateSelection__indicators):not(.stateSelection__multi-value):not(.stateSelection__multi-value__label):not(.stateSelection__multi-value__remove) .material-form-select > div > div label +div > div > div { max-width: 100px; } .inlineSearchForm fieldset div:not(.stateSelection):not(.stateSelection__menu):not(.stateSelection__control):not(.stateSelection__value-container):not(.stateSelection__placeholder):not(.stateSelection__indicators):not(.stateSelection__multi-value):not(.stateSelection__multi-value__label):not(.stateSelection__multi-value__remove) .material-form-select > div > div label +div input { min-width: -webkit-max-content; min-width: -moz-max-content; min-width: max-content; } .inlineSearchForm fieldset div:not(.stateSelection):not(.stateSelection__menu):not(.stateSelection__control):not(.stateSelection__value-container):not(.stateSelection__placeholder):not(.stateSelection__indicators):not(.stateSelection__multi-value):not(.stateSelection__multi-value__label):not(.stateSelection__multi-value__remove) .material-form-select > div > div label + div::before { border: solid 1px #DDDDDD!important; height: 32px; border-radius: 40px!important; padding: 1px; position: absolute; top: 1px; left: -8px; width: auto; min-width: 150px; } .inlineSearchForm fieldset div:not(.stateSelection):not(.stateSelection__menu):not(.stateSelection__control):not(.stateSelection__value-container):not(.stateSelection__placeholder):not(.stateSelection__indicators):not(.stateSelection__multi-value):not(.stateSelection__multi-value__label):not(.stateSelection__multi-value__remove) .material-form-select > div > div label + div::before:hover { border: solid 1px #DDDDDD!important; height: 32px; border-radius: 40px!important; padding: 1px; position: absolute; top: 1px; left: -8px; width: auto; min-width: 150px; } /*indicatorSeparator*/ .inlineSearchForm fieldset div:not(.stateSelection):not(.stateSelection__menu):not(.stateSelection__control):not(.stateSelection__value-container):not(.stateSelection__placeholder):not(.stateSelection__indicators):not(.stateSelection__multi-value):not(.stateSelection__multi-value__label):not(.stateSelection__multi-value__remove) .material-form-select > div > div > div > div > div > div > div + div > span { flex-basis: 3%; } .inlineSearchForm fieldset div:not(.stateSelection):not(.stateSelection__menu):not(.stateSelection__control):not(.stateSelection__value-container):not(.stateSelection__placeholder):not(.stateSelection__indicators):not(.stateSelection__multi-value):not(.stateSelection__multi-value__label):not(.stateSelection__multi-value__remove) .material-form-select > div > div > div > div > div { height: 30px; margin-top: 7px; } .inlineSearchForm fieldset div:not(.stateSelection):not(.stateSelection__menu):not(.stateSelection__control):not(.stateSelection__value-container):not(.stateSelection__placeholder):not(.stateSelection__indicators):not(.stateSelection__multi-value):not(.stateSelection__multi-value__label):not(.stateSelection__multi-value__remove) .material-form-select > div > div > div > div > div:first-child { min-width: calc(100% - 49px); height: 52px; overflow-y: hidden; } /* This is for search state */ .inlineSearchForm fieldset div:not(.stateSelection):not(.stateSelection__menu):not(.stateSelection__control):not(.stateSelection__value-container):not(.stateSelection__placeholder):not(.stateSelection__indicators):not(.stateSelection__multi-value):not(.stateSelection__multi-value__label):not(.stateSelection__multi-value__remove) .material-form-select > div > div > div > div > div:first-child::-webkit-scrollbar { width: 0px; height: 0px; } .inlineSearchForm fieldset div:not(.stateSelection):not(.stateSelection__menu):not(.stateSelection__control):not(.stateSelection__value-container):not(.stateSelection__placeholder):not(.stateSelection__indicators):not(.stateSelection__multi-value):not(.stateSelection__multi-value__label):not(.stateSelection__multi-value__remove) .material-form-select > div > div > div > div > div:first-child +div > div:first-child { position: absolute; right: 50px; display: none; /* Hide the cross */ } .inlineSearchForm fieldset div:not(.stateSelection):not(.stateSelection__menu):not(.stateSelection__control):not(.stateSelection__value-container):not(.stateSelection__placeholder):not(.stateSelection__indicators):not(.stateSelection__multi-value):not(.stateSelection__multi-value__label):not(.stateSelection__multi-value__remove) .material-form-select > div > div > div:nth-child(1) { border: solid 1px rgb(233, 233, 233); } .inlineSearchForm fieldset div:not(.stateSelection):not(.stateSelection__menu):not(.stateSelection__control):not(.stateSelection__value-container):not(.stateSelection__placeholder):not(.stateSelection__indicators):not(.stateSelection__multi-value):not(.stateSelection__multi-value__label):not(.stateSelection__multi-value__remove) .material-form-select > div > div p { position: relative; bottom: 6px; text-overflow: ellipsis; overflow: hidden; max-width: 250px; white-space: nowrap; min-width: auto; left: 10px; } .inlineSearchForm fieldset div:not(.stateSelection):not(.stateSelection__menu):not(.stateSelection__control):not(.stateSelection__value-container):not(.stateSelection__placeholder):not(.stateSelection__indicators):not(.stateSelection__multi-value):not(.stateSelection__multi-value__label):not(.stateSelection__multi-value__remove) .material-form-select > div > div p + div { height: 0px; position: absolute; } .inlineSearchForm fieldset div:not(.stateSelection):not(.stateSelection__menu):not(.stateSelection__control):not(.stateSelection__value-container):not(.stateSelection__placeholder):not(.stateSelection__indicators):not(.stateSelection__multi-value):not(.stateSelection__multi-value__label):not(.stateSelection__multi-value__remove) .material-form-select > div div:nth-child(1) > div, .inlineSearchForm fieldset div:not(.stateSelection):not(.stateSelection__menu):not(.stateSelection__control):not(.stateSelection__value-container):not(.stateSelection__placeholder):not(.stateSelection__indicators):not(.stateSelection__multi-value):not(.stateSelection__multi-value__label):not(.stateSelection__multi-value__remove) .material-form-select > div div:nth-child(2) > div { display: inline-flex; flex-grow: 1; flex-flow: row; min-height: 42px; } .inlineSearchForm fieldset div:not(.stateSelection):not(.stateSelection__menu):not(.stateSelection__control):not(.stateSelection__value-container):not(.stateSelection__placeholder):not(.stateSelection__indicators):not(.stateSelection__multi-value):not(.stateSelection__multi-value__label):not(.stateSelection__multi-value__remove) .material-form-select > div div:nth-child(1) > div>svg, .inlineSearchForm fieldset div:not(.stateSelection):not(.stateSelection__menu):not(.stateSelection__control):not(.stateSelection__value-container):not(.stateSelection__placeholder):not(.stateSelection__indicators):not(.stateSelection__multi-value):not(.stateSelection__multi-value__label):not(.stateSelection__multi-value__remove) .material-form-select > div div:nth-child(2) > div>svg { position: relative; top: 4px; } /* dynamic selectbox */ .inlineSearchForm fieldset div:not(.stateSelection):not(.stateSelection__menu):not(.stateSelection__control):not(.stateSelection__value-container):not(.stateSelection__placeholder):not(.stateSelection__indicators):not(.stateSelection__multi-value):not(.stateSelection__multi-value__label):not(.stateSelection__multi-value__remove) .material-form-select > div > div + div { min-width: calc(100% + 49px); } .inlineSearchForm fieldset div:not(.stateSelection):not(.stateSelection__menu):not(.stateSelection__control):not(.stateSelection__value-container):not(.stateSelection__placeholder):not(.stateSelection__indicators):not(.stateSelection__multi-value):not(.stateSelection__multi-value__label):not(.stateSelection__multi-value__remove) .material-form-datepicker { display: grid!important; } .inlineSearchForm fieldset div:not(.stateSelection):not(.stateSelection__menu):not(.stateSelection__control):not(.stateSelection__value-container):not(.stateSelection__placeholder):not(.stateSelection__indicators):not(.stateSelection__multi-value):not(.stateSelection__multi-value__label):not(.stateSelection__multi-value__remove) .material-form-datepicker label { top: -12px; left: 12px!important; font-size: 0.9rem; white-space: nowrap; overflow: hidden; max-width: calc(100% - 50px); } .inlineSearchForm fieldset div:not(.stateSelection):not(.stateSelection__menu):not(.stateSelection__control):not(.stateSelection__value-container):not(.stateSelection__placeholder):not(.stateSelection__indicators):not(.stateSelection__multi-value):not(.stateSelection__multi-value__label):not(.stateSelection__multi-value__remove) .material-form-datepicker label + div { flex-basis: 100%; align-items: center; } .inlineSearchForm fieldset div:not(.stateSelection):not(.stateSelection__menu):not(.stateSelection__control):not(.stateSelection__value-container):not(.stateSelection__placeholder):not(.stateSelection__indicators):not(.stateSelection__multi-value):not(.stateSelection__multi-value__label):not(.stateSelection__multi-value__remove) .material-form-datepicker input { min-width: calc(100%); } .inlineSearchForm fieldset div:not(.stateSelection):not(.stateSelection__menu):not(.stateSelection__control):not(.stateSelection__value-container):not(.stateSelection__placeholder):not(.stateSelection__indicators):not(.stateSelection__multi-value):not(.stateSelection__multi-value__label):not(.stateSelection__multi-value__remove) .material-form-datepicker button svg { font-size: 1.2rem; } .inlineSearchForm fieldset div:not(.stateSelection):not(.stateSelection__menu):not(.stateSelection__control):not(.stateSelection__value-container):not(.stateSelection__placeholder):not(.stateSelection__indicators):not(.stateSelection__multi-value):not(.stateSelection__multi-value__label):not(.stateSelection__multi-value__remove) .material-form-datepicker div { right: 10px; flex-flow: nowrap !important; display: flex; } .inlineSearchForm fieldset div:not(.stateSelection):not(.stateSelection__menu):not(.stateSelection__control):not(.stateSelection__value-container):not(.stateSelection__placeholder):not(.stateSelection__indicators):not(.stateSelection__multi-value):not(.stateSelection__multi-value__label):not(.stateSelection__multi-value__remove) .autocomplete-xlinq-search label { top: -12px; } .inlineSearchForm fieldset div:not(.stateSelection):not(.stateSelection__menu):not(.stateSelection__control):not(.stateSelection__value-container):not(.stateSelection__placeholder):not(.stateSelection__indicators):not(.stateSelection__multi-value):not(.stateSelection__multi-value__label):not(.stateSelection__multi-value__remove) .autocomplete-xlinq-search svg { bottom: 34px; } .inlineSearchForm fieldset div:not(.stateSelection):not(.stateSelection__menu):not(.stateSelection__control):not(.stateSelection__value-container):not(.stateSelection__placeholder):not(.stateSelection__indicators):not(.stateSelection__multi-value):not(.stateSelection__multi-value__label):not(.stateSelection__multi-value__remove) .phoneNumberSelection { margin-left: -8px; } /** CountryCode **/ .inlineSearchForm fieldset div:not(.stateSelection):not(.stateSelection__menu):not(.stateSelection__control):not(.stateSelection__value-container):not(.stateSelection__placeholder):not(.stateSelection__indicators):not(.stateSelection__multi-value):not(.stateSelection__multi-value__label):not(.stateSelection__multi-value__remove) .phoneNumberSelection div > div { flex-basis: 32%; } /** NationalNumber **/ .inlineSearchForm fieldset div:not(.stateSelection):not(.stateSelection__menu):not(.stateSelection__control):not(.stateSelection__value-container):not(.stateSelection__placeholder):not(.stateSelection__indicators):not(.stateSelection__multi-value):not(.stateSelection__multi-value__label):not(.stateSelection__multi-value__remove) .phoneNumberSelection div > div + div { position: relative; flex-basis: 51%; } .inlineSearchForm fieldset div:not(.stateSelection):not(.stateSelection__menu):not(.stateSelection__control):not(.stateSelection__value-container):not(.stateSelection__placeholder):not(.stateSelection__indicators):not(.stateSelection__multi-value):not(.stateSelection__multi-value__label):not(.stateSelection__multi-value__remove) .phoneNumberSelection label { top: -14px; left: 10px!important; } .inlineSearchForm fieldset div:not(.stateSelection):not(.stateSelection__menu):not(.stateSelection__control):not(.stateSelection__value-container):not(.stateSelection__placeholder):not(.stateSelection__indicators):not(.stateSelection__multi-value):not(.stateSelection__multi-value__label):not(.stateSelection__multi-value__remove) .phoneNumberSelection label + div { place-items: unset; } .inlineSearchForm fieldset div:not(.stateSelection):not(.stateSelection__menu):not(.stateSelection__control):not(.stateSelection__value-container):not(.stateSelection__placeholder):not(.stateSelection__indicators):not(.stateSelection__multi-value):not(.stateSelection__multi-value__label):not(.stateSelection__multi-value__remove) .phoneNumberSelection label + div > input { width: 85%; } .inlineSearchForm fieldset div:not(.stateSelection):not(.stateSelection__menu):not(.stateSelection__control):not(.stateSelection__value-container):not(.stateSelection__placeholder):not(.stateSelection__indicators):not(.stateSelection__multi-value):not(.stateSelection__multi-value__label):not(.stateSelection__multi-value__remove) .phoneNumberSelection label + div .phoneExtension { position: relative; top: 6px; left: 10px; } .inlineSearchForm fieldset div:not(.stateSelection):not(.stateSelection__menu):not(.stateSelection__control):not(.stateSelection__value-container):not(.stateSelection__placeholder):not(.stateSelection__indicators):not(.stateSelection__multi-value):not(.stateSelection__multi-value__label):not(.stateSelection__multi-value__remove) .phoneNumberSelection label + div > input[data-mvk-type='phoneNumber0'], .inlineSearchForm fieldset div:not(.stateSelection):not(.stateSelection__menu):not(.stateSelection__control):not(.stateSelection__value-container):not(.stateSelection__placeholder):not(.stateSelection__indicators):not(.stateSelection__multi-value):not(.stateSelection__multi-value__label):not(.stateSelection__multi-value__remove) .phoneNumberSelection label + div input[data-mvk-type='phoneNumber2'] { position: relative; padding-left: 40px; } .inlineSearchForm fieldset div:not(.stateSelection):not(.stateSelection__menu):not(.stateSelection__control):not(.stateSelection__value-container):not(.stateSelection__placeholder):not(.stateSelection__indicators):not(.stateSelection__multi-value):not(.stateSelection__multi-value__label):not(.stateSelection__multi-value__remove) .phoneNumberSelection label + div > input[data-mvk-type='phoneNumber3'] { position: relative; padding-left: 49px; } .inlineSearchForm fieldset div:not(.stateSelection):not(.stateSelection__menu):not(.stateSelection__control):not(.stateSelection__value-container):not(.stateSelection__placeholder):not(.stateSelection__indicators):not(.stateSelection__multi-value):not(.stateSelection__multi-value__label):not(.stateSelection__multi-value__remove) .phoneNumberSelection label + div > input[data-mvk-type='phoneNumber5'], .inlineSearchForm fieldset div:not(.stateSelection):not(.stateSelection__menu):not(.stateSelection__control):not(.stateSelection__value-container):not(.stateSelection__placeholder):not(.stateSelection__indicators):not(.stateSelection__multi-value):not(.stateSelection__multi-value__label):not(.stateSelection__multi-value__remove) .phoneNumberSelection label + div input[data-mvk-type='phoneNumber4'] { position: relative; padding-left: 63px; } .inlineSearchForm fieldset div:not(.stateSelection):not(.stateSelection__menu):not(.stateSelection__control):not(.stateSelection__value-container):not(.stateSelection__placeholder):not(.stateSelection__indicators):not(.stateSelection__multi-value):not(.stateSelection__multi-value__label):not(.stateSelection__multi-value__remove) .phoneNumberSelection label + div button { right: 25px; } .inlineSearchForm fieldset + div { margin: 0px; } /*** * Svg color comp set to display none ***/ .inlineSearchForm div[style='flex-direction: row;'] > svg[role='presentation'] { display: none; } .drawerForm fieldset > div > div:first-child { margin-bottom: 0px; } .drawerForm fieldset > div > div { margin-top: 10px !important; } .drawerForm fieldset div label { left: 20px !important; top: -4px; } .drawerForm fieldset div label +div:hover:before { border: none!important; } .drawerForm fieldset div label +div:before { width: 90%; border: none; } .drawerForm fieldset div label +div:after { border: none; } .drawerForm fieldset div label +div:after:hover { border: none!important; } .drawerForm fieldset div label +div input { border: solid 1px #DDDDDD; border-radius: 20px; padding-right: 10px; padding-left: 10px; } .drawerForm fieldset .phoneNumberSelection label { left: 11px !important; } .drawerForm fieldset .phoneNumberSelection label + div { padding: 0px; } .drawerForm fieldset .phoneNumberSelection label + div > input { padding-left: 8px !important; width: 100%; } .drawerForm fieldset .material-form-datepicker > div > label { left: 10px !important; } .drawerForm fieldset .material-form-select { margin-top: 5px; margin-left: 0px; } .drawerForm fieldset .material-form-select label { left: 2px; top: -6px; } .drawerForm fieldset .material-form-select label +div { border: solid 1px #DDDDDD; border-radius: 20px; } .drawerForm fieldset .material-form-select p { position: relative; left: 15px; } .drawerForm fieldset .autocomplete-xlinq-search div > div { border: solid 1px #DDDDDD; border-radius: 20px; } .drawerForm fieldset .autocomplete-xlinq-search label { left: 8px !important; } .drawerForm fieldset .autocomplete-xlinq-search input { border: none; padding-left: 10px !important; padding-right: 10px !important; } .drawerForm fieldset .autocomplete-xlinq-search svg { top: 0 } .drawerForm > div > fieldset + div > button { position: absolute; bottom: 55px; left: 23px; width: 90%; } /*** * Font Based Styles ***/ .inlineFullWidthSearch.ing fieldset div:not(.stateSelection):not(.stateSelection__menu):not(.stateSelection__control):not(.stateSelection__value-container):not(.stateSelection__placeholder):not(.stateSelection__indicators):not(.stateSelection__multi-value):not(.stateSelection__multi-value__label):not(.stateSelection__multi-value__remove) > div label, .inlineFullWidthSearch.ing fieldset div:not(.stateSelection):not(.stateSelection__menu):not(.stateSelection__control):not(.stateSelection__value-container):not(.stateSelection__placeholder):not(.stateSelection__indicators):not(.stateSelection__multi-value):not(.stateSelection__multi-value__label):not(.stateSelection__multi-value__remove) > div .material-form-datepicker > div > label, .inlineFullWidthSearch.emerald fieldset div:not(.stateSelection):not(.stateSelection__menu):not(.stateSelection__control):not(.stateSelection__value-container):not(.stateSelection__placeholder):not(.stateSelection__indicators):not(.stateSelection__multi-value):not(.stateSelection__multi-value__label):not(.stateSelection__multi-value__remove) > div label, .inlineFullWidthSearch.emerald fieldset div:not(.stateSelection):not(.stateSelection__menu):not(.stateSelection__control):not(.stateSelection__value-container):not(.stateSelection__placeholder):not(.stateSelection__indicators):not(.stateSelection__multi-value):not(.stateSelection__multi-value__label):not(.stateSelection__multi-value__remove) > div .material-form-datepicker > div > label, .inlineFullWidthSearch.indigo fieldset div:not(.stateSelection):not(.stateSelection__menu):not(.stateSelection__control):not(.stateSelection__value-container):not(.stateSelection__placeholder):not(.stateSelection__indicators):not(.stateSelection__multi-value):not(.stateSelection__multi-value__label):not(.stateSelection__multi-value__remove) > div label, .inlineFullWidthSearch.indigo fieldset div:not(.stateSelection):not(.stateSelection__menu):not(.stateSelection__control):not(.stateSelection__value-container):not(.stateSelection__placeholder):not(.stateSelection__indicators):not(.stateSelection__multi-value):not(.stateSelection__multi-value__label):not(.stateSelection__multi-value__remove) > div .material-form-datepicker > div > label, .inlineFullWidthSearch.ruby fieldset div:not(.stateSelection):not(.stateSelection__menu):not(.stateSelection__control):not(.stateSelection__value-container):not(.stateSelection__placeholder):not(.stateSelection__indicators):not(.stateSelection__multi-value):not(.stateSelection__multi-value__label):not(.stateSelection__multi-value__remove) > div label, .inlineFullWidthSearch.ruby fieldset div:not(.stateSelection):not(.stateSelection__menu):not(.stateSelection__control):not(.stateSelection__value-container):not(.stateSelection__placeholder):not(.stateSelection__indicators):not(.stateSelection__multi-value):not(.stateSelection__multi-value__label):not(.stateSelection__multi-value__remove) > div .material-form-datepicker > div > label, .inlineFullWidthSearch.aluminium fieldset div:not(.stateSelection):not(.stateSelection__menu):not(.stateSelection__control):not(.stateSelection__value-container):not(.stateSelection__placeholder):not(.stateSelection__indicators):not(.stateSelection__multi-value):not(.stateSelection__multi-value__label):not(.stateSelection__multi-value__remove) > div label, .inlineFullWidthSearch.aluminium fieldset div:not(.stateSelection):not(.stateSelection__menu):not(.stateSelection__control):not(.stateSelection__value-container):not(.stateSelection__placeholder):not(.stateSelection__indicators):not(.stateSelection__multi-value):not(.stateSelection__multi-value__label):not(.stateSelection__multi-value__remove) > div .material-form-datepicker > div > label, .inlineFullWidthSearch.magnesium fieldset div:not(.stateSelection):not(.stateSelection__menu):not(.stateSelection__control):not(.stateSelection__value-container):not(.stateSelection__placeholder):not(.stateSelection__indicators):not(.stateSelection__multi-value):not(.stateSelection__multi-value__label):not(.stateSelection__multi-value__remove) > div label, .inlineFullWidthSearch.magnesium fieldset div:not(.stateSelection):not(.stateSelection__menu):not(.stateSelection__control):not(.stateSelection__value-container):not(.stateSelection__placeholder):not(.stateSelection__indicators):not(.stateSelection__multi-value):not(.stateSelection__multi-value__label):not(.stateSelection__multi-value__remove) > div .material-form-datepicker > div > label { top: -22px !important; } .inlineFullWidthSearch.xlinq fieldset div:not(.stateSelection):not(.stateSelection__menu):not(.stateSelection__control):not(.stateSelection__value-container):not(.stateSelection__placeholder):not(.stateSelection__indicators):not(.stateSelection__multi-value):not(.stateSelection__multi-value__label):not(.stateSelection__multi-value__remove) > div label, .inlineFullWidthSearch.xlinq fieldset div:not(.stateSelection):not(.stateSelection__menu):not(.stateSelection__control):not(.stateSelection__value-container):not(.stateSelection__placeholder):not(.stateSelection__indicators):not(.stateSelection__multi-value):not(.stateSelection__multi-value__label):not(.stateSelection__multi-value__remove) > div .material-form-datepicker > div > label, .inlineFullWidthSearch.cobalt fieldset div:not(.stateSelection):not(.stateSelection__menu):not(.stateSelection__control):not(.stateSelection__value-container):not(.stateSelection__placeholder):not(.stateSelection__indicators):not(.stateSelection__multi-value):not(.stateSelection__multi-value__label):not(.stateSelection__multi-value__remove) > div label, .inlineFullWidthSearch.cobalt fieldset div:not(.stateSelection):not(.stateSelection__menu):not(.stateSelection__control):not(.stateSelection__value-container):not(.stateSelection__placeholder):not(.stateSelection__indicators):not(.stateSelection__multi-value):not(.stateSelection__multi-value__label):not(.stateSelection__multi-value__remove) > div .material-form-datepicker > div > label { top: -15px !important; } .md-form { padding-top: 5px; } /** * Fieldset of first child removes border and aligns the parent element **/ .md-form fieldset { border: none; margin-top: -10px; margin-left: -10px; } .md-form fieldset > label { display: none; } .md-form fieldset > div { flex-grow: 1; } .md-form fieldset fieldset > div > div > div > fieldset > label { display: none; /* Hiding title from the form */ } /** * div of first child removes not needed box-shadow **/ .md-form > div:first-child { box-shadow: none; padding-left: 0px; padding-right: 0px; } /** ** Aligning the label in every fieldset **/ .md-form div:not(.draggableUploadField) > label { -webkit-transform: translate(0, 1.5px) scale(0.75); transform: translate(0, 1.5px) scale(0.75); -webkit-transform-origin: top left; transform-origin: top left; left: 8px; } .md-form div:not(.draggableUploadField) > label span { max-width: 75vh; overflow: hidden; text-overflow: ellipsis; } /** Upload Button **/ .md-form div:not(.draggableUploadField) > label input + span { margin-left: 16px; font-size: 1.3rem; padding: 10px; padding-right: 20px; padding-left: 20px; } .md-form div:not(.draggableUploadField) > label input + span .material-icons { margin-right: 13px!important; } .md-form div:not(.draggableUploadField) > label input + span > span { height: 35px; width: 100px; } /*** * Svg color comp set to display none ***/ .md-form > div > fieldset > div > div > svg { display: none; } /** * Disabled selectbox **/ .md-form > div > fieldset > div > div > svg + .material-form-select > div > div > div > div p { color: #b5b5b5; } .md-form > div > fieldset > div > div > svg + .material-form-select > div > div > div > div > div + div { display: none; } .md-form .material-form-select > div > div + div > div > div:first-child::before { padding-right: 8px; font-size: 1.4em; padding-bottom: 3px; } .md-form .material-form-select div > label { left: 0px; } .md-form .material-form-select div > label + div > div > div:first-child +div > div:first-child { position: absolute; right: 40px; } .md-form .material-form-select div > label + div > div > div { max-width: calc(100% - 35px); } .md-form .material-form-select div > label + div > div > div p { white-space: nowrap; width: calc(100% - 40px); text-overflow: ellipsis; display: inline-block; overflow: hidden; } .md-form .material-form-select span { max-width: 150px; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; display: inline-block; } .md-form .material-form-datepicker div > label { left: 0px; } .md-form .material-form-datepicker button svg { font-size: 1.2rem; } /** ** Aligning the rich text editor */ .md-form #xlinq_bio > div { margin-left: 0px; } /** ** Aligning the svg yes or no icon **/ .md-form fieldset > div > div > svg { flex-basis: 2% !important; } /** ** Set fieldset div margin-top **/ .md-form fieldset > div > div:first-child { margin-top: 5px !important; margin-bottom: 10px; } /** * Styling the footer which has save button ***/ .md-form div > div + fieldset + div { display: flex; margin-right: 7%; } .md-form div > div + fieldset + div > button { border-radius: 4px; } .md-form div > div[role='button'] > span + svg { width: 25px !important; background: none !important; box-shadow: none !important; } /** Checkbox styling start **/ .md-form fieldset div > label > span > span > svg { font-size: 1.4em; } .md-form fieldset div > label > span + span { font-size: 1.3em; } /** Checkbox styling end **/ .md-form div fieldset + div button { text-transform: none; } /** array type start **/ .md-form fieldset > label + div > div > div:first-child > button { position: relative; right: 9px !important; } .md-form fieldset > label + div > div > div:last-child > button { position: relative; right: 50px; min-width: 80px; height: 35px; } .md-form fieldset > label + div > div > div:last-child > button span svg { position: relative; bottom: 0px !important; } .md-form fieldset > label + div > div > div:last-child > button span + span { display: none; } .md-form fieldset > label + div fieldset > label { display: block !important; margin-left: 5px; margin-top: 15px; } .md-form fieldset > label + div fieldset > label + div { padding-bottom: 2px; margin-top: 10px; margin-bottom: 10px; border: solid 1px #9e9e9e7d; border-radius: 10px; margin-left: 4px; } .md-form fieldset > label + div fieldset > label + div fieldset > label { display: none !important; } .md-form fieldset > label + div fieldset > label + div fieldset > label + div { border: none; margin-bottom: -10px; } .md-form fieldset > label + div > div > div > fieldset > div { border: none; margin-bottom: -10px; flex-direction: row; } .md-form fieldset > label + div > div > div > fieldset > div div { flex-grow: 1; } .md-form fieldset > label + div > div > div > fieldset > div div p { margin: 0; padding: 0; left: 15px; position: relative; top: 0px; max-width: 300px; overflow: hidden; text-overflow: ellipsis; height: 18px; margin-top: -15px; color: #333333; } .md-form fieldset > label + div > div > div > fieldset > div div p + div > div > div > div > div > div:first-child { flex-basis: 100%; } .md-form fieldset > label + div > div > div > fieldset > div div p + div > div > div > div > div > div:first-child p { top: 6px; left: 1px; min-height: 22px; min-width: 98%; } .md-form fieldset > label + div > div > div { margin-right: 10px; margin-top: 7px; margin-left: 2px; } .md-form fieldset > label + div > div > div > fieldset { border: solid 1px #9e9e9e7d; border-radius: 10px; padding: 20px; margin-top: 10px; margin-left: 20px; } .md-form fieldset > label + div > div > div > fieldset + div { margin-right: 5px; position: relative; top: 15px; } .md-form fieldset div > div > div + div > button > span > svg { position: relative; bottom: 0px; } .md-form fieldset fieldset fieldset > div > div:first-child { margin-bottom: 0px; } /** array type end **/ .md-form .material-form-datepicker button { background: transparent!important; } .md-form .material-form-datepicker button > span > svg { bottom: 0px !important; } .md-form .material-form-datepicker button:hover { background-color: rgba(0, 0, 0, 0.08) !important; -webkit-filter: none !important; filter: none !important; } .md-form .moneyParentField { display: inline-flex; } .md-form .moneyParentField > div:first-child { flex-basis: 25%; margin-right: 0px; } .md-form .moneyParentField > div:last-child { flex-basis: 70%; margin-top: 11px; } .md-form .moneyParentField > div:last-child label { top: 8px; } .md-form.md-form-overflow { overflow: auto; } .inlineSearchForm div[type='text'] > div, .inlineSearchForm.ing div[type='text'] > div, .md-form.magnesium div[type='text'] > div, .inlineSearchForm.xlinq div[type='text'] > div, .inlineSearchForm.emerald div[type='text'] > div, .inlineSearchForm.indigo div[type='text'] > div, .md-form.emerald div[type='text'] > div, .md-form.indigo div[type='text'] > div, .md-form.cobalt div[type='text'] > div { position: relative; bottom: 0px; overflow: auto; } /** Styles for state selction component start here **/ .inlineSearchForm .stateSelection, .inlineSearchForm.ing .stateSelection, .md-form.magnesium .stateSelection, .inlineSearchForm.xlinq .stateSelection, .inlineSearchForm.emerald .stateSelection, .inlineSearchForm.indigo .stateSelection, .md-form.emerald .stateSelection, .md-form.indigo .stateSelection, .md-form.cobalt .stateSelection { position: relative; bottom: 1px; right: 20px; max-height: 40px; } .inlineSearchForm .stateSelection .stateSelection__menu, .inlineSearchForm.ing .stateSelection .stateSelection__menu, .md-form.magnesium .stateSelection .stateSelection__menu, .inlineSearchForm.xlinq .stateSelection .stateSelection__menu, .inlineSearchForm.emerald .stateSelection .stateSelection__menu, .inlineSearchForm.indigo .stateSelection .stateSelection__menu, .md-form.emerald .stateSelection .stateSelection__menu, .md-form.indigo .stateSelection .stateSelection__menu, .md-form.cobalt .stateSelection .stateSelection__menu { border: solid 1px #dddddd; margin-top: 8px!important; } .inlineSearchForm .stateSelection .stateSelection__menu .stateSelection__option, .inlineSearchForm.ing .stateSelection .stateSelection__menu .stateSelection__option, .md-form.magnesium .stateSelection .stateSelection__menu .stateSelection__option, .inlineSearchForm.xlinq .stateSelection .stateSelection__menu .stateSelection__option, .inlineSearchForm.emerald .stateSelection .stateSelection__menu .stateSelection__option, .inlineSearchForm.indigo .stateSelection .stateSelection__menu .stateSelection__option, .md-form.emerald .stateSelection .stateSelection__menu .stateSelection__option, .md-form.indigo .stateSelection .stateSelection__menu .stateSelection__option, .md-form.cobalt .stateSelection .stateSelection__menu .stateSelection__option { padding: 1px; } .inlineSearchForm .stateSelection .stateSelection__control, .inlineSearchForm .stateSelection .stateSelection__control--is-focused, .inlineSearchForm.ing .stateSelection .stateSelection__control, .inlineSearchForm.ing .stateSelection .stateSelection__control--is-focused, .md-form.magnesium .stateSelection .stateSelection__control, .md-form.magnesium .stateSelection .stateSelection__control--is-focused, .inlineSearchForm.xlinq .stateSelection .stateSelection__control, .inlineSearchForm.xlinq .stateSelection .stateSelection__control--is-focused, .inlineSearchForm.emerald .stateSelection .stateSelection__control, .inlineSearchForm.emerald .stateSelection .stateSelection__control--is-focused, .inlineSearchForm.indigo .stateSelection .stateSelection__control, .inlineSearchForm.indigo .stateSelection .stateSelection__control--is-focused, .md-form.emerald .stateSelection .stateSelection__control, .md-form.emerald .stateSelection .stateSelection__control--is-focused, .md-form.indigo .stateSelection .stateSelection__control, .md-form.indigo .stateSelection .stateSelection__control--is-focused, .md-form.cobalt .stateSelection .stateSelection__control, .md-form.cobalt .stateSelection .stateSelection__control--is-focused { border-radius: 20px!important; border-color: #DDDDDD !important; max-width: 100vh; overflow: scroll; } .inlineSearchForm .stateSelection .stateSelection__control::-webkit-scrollbar, .inlineSearchForm .stateSelection .stateSelection__control--is-focused::-webkit-scrollbar, .inlineSearchForm.ing .stateSelection .stateSelection__control::-webkit-scrollbar, .inlineSearchForm.ing .stateSelection .stateSelection__control--is-focused::-webkit-scrollbar, .md-form.magnesium .stateSelection .stateSelection__control::-webkit-scrollbar, .md-form.magnesium .stateSelection .stateSelection__control--is-focused::-webkit-scrollbar, .inlineSearchForm.xlinq .stateSelection .stateSelection__control::-webkit-scrollbar, .inlineSearchForm.xlinq .stateSelection .stateSelection__control--is-focused::-webkit-scrollbar, .inlineSearchForm.emerald .stateSelection .stateSelection__control::-webkit-scrollbar, .inlineSearchForm.emerald .stateSelection .stateSelection__control--is-focused::-webkit-scrollbar, .inlineSearchForm.indigo .stateSelection .stateSelection__control::-webkit-scrollbar, .inlineSearchForm.indigo .stateSelection .stateSelection__control--is-focused::-webkit-scrollbar, .md-form.emerald .stateSelection .stateSelection__control::-webkit-scrollbar, .md-form.emerald .stateSelection .stateSelection__control--is-focused::-webkit-scrollbar, .md-form.indigo .stateSelection .stateSelection__control::-webkit-scrollbar, .md-form.indigo .stateSelection .stateSelection__control--is-focused::-webkit-scrollbar, .md-form.cobalt .stateSelection .stateSelection__control::-webkit-scrollbar, .md-form.cobalt .stateSelection .stateSelection__control--is-focused::-webkit-scrollbar { width: 0px; height: 0px; } .inlineSearchForm .stateSelection .stateSelection__multi-value__remove:hover, .inlineSearchForm.ing .stateSelection .stateSelection__multi-value__remove:hover, .md-form.magnesium .stateSelection .stateSelection__multi-value__remove:hover, .inlineSearchForm.xlinq .stateSelection .stateSelection__multi-value__remove:hover, .inlineSearchForm.emerald .stateSelection .stateSelection__multi-value__remove:hover, .inlineSearchForm.indigo .stateSelection .stateSelection__multi-value__remove:hover, .md-form.emerald .stateSelection .stateSelection__multi-value__remove:hover, .md-form.indigo .stateSelection .stateSelection__multi-value__remove:hover, .md-form.cobalt .stateSelection .stateSelection__multi-value__remove:hover { color: #535198; background: none; background-color: none; } .inlineSearchForm .stateSelection .stateSelection__value-container, .inlineSearchForm.ing .stateSelection .stateSelection__value-container, .md-form.magnesium .stateSelection .stateSelection__value-container, .inlineSearchForm.xlinq .stateSelection .stateSelection__value-container, .inlineSearchForm.emerald .stateSelection .stateSelection__value-container, .inlineSearchForm.indigo .stateSelection .stateSelection__value-container, .md-form.emerald .stateSelection .stateSelection__value-container, .md-form.indigo .stateSelection .stateSelection__value-container, .md-form.cobalt .stateSelection .stateSelection__value-container { flex-wrap: nowrap; overflow-x: scroll; } .inlineSearchForm .stateSelection .stateSelection__value-container::-webkit-scrollbar, .inlineSearchForm.ing .stateSelection .stateSelection__value-container::-webkit-scrollbar, .md-form.magnesium .stateSelection .stateSelection__value-container::-webkit-scrollbar, .inlineSearchForm.xlinq .stateSelection .stateSelection__value-container::-webkit-scrollbar, .inlineSearchForm.emerald .stateSelection .stateSelection__value-container::-webkit-scrollbar, .inlineSearchForm.indigo .stateSelection .stateSelection__value-container::-webkit-scrollbar, .md-form.emerald .stateSelection .stateSelection__value-container::-webkit-scrollbar, .md-form.indigo .stateSelection .stateSelection__value-container::-webkit-scrollbar, .md-form.cobalt .stateSelection .stateSelection__value-container::-webkit-scrollbar { width: 0px; height: 0px; } .inlineSearchForm .stateSelection .stateSelection__value-container .stateSelection__placeholder, .inlineSearchForm.ing .stateSelection .stateSelection__value-container .stateSelection__placeholder, .md-form.magnesium .stateSelection .stateSelection__value-container .stateSelection__placeholder, .inlineSearchForm.xlinq .stateSelection .stateSelection__value-container .stateSelection__placeholder, .inlineSearchForm.emerald .stateSelection .stateSelection__value-container .stateSelection__placeholder, .inlineSearchForm.indigo .stateSelection .stateSelection__value-container .stateSelection__placeholder, .md-form.emerald .stateSelection .stateSelection__value-container .stateSelection__placeholder, .md-form.indigo .stateSelection .stateSelection__value-container .stateSelection__placeholder, .md-form.cobalt .stateSelection .stateSelection__value-container .stateSelection__placeholder { padding-left: 12px; color: #333333; } .inlineSearchForm .stateSelection .stateSelection__value-container .stateSelection__multi-value, .inlineSearchForm.ing .stateSelection .stateSelection__value-container .stateSelection__multi-value, .md-form.magnesium .stateSelection .stateSelection__value-container .stateSelection__multi-value, .inlineSearchForm.xlinq .stateSelection .stateSelection__value-container .stateSelection__multi-value, .inlineSearchForm.emerald .stateSelection .stateSelection__value-container .stateSelection__multi-value, .inlineSearchForm.indigo .stateSelection .stateSelection__value-container .stateSelection__multi-value, .md-form.emerald .stateSelection .stateSelection__value-container .stateSelection__multi-value, .md-form.indigo .stateSelection .stateSelection__value-container .stateSelection__multi-value, .md-form.cobalt .stateSelection .stateSelection__value-container .stateSelection__multi-value { min-width: auto; border: none; border-radius: 10px; margin-left: 4px; } /** Styles for state selction component ends here **/ .inlineSearchForm.drawerForm div[type='text'] > div, .inlineSearchForm.ing.drawerForm div[type='text'] > div, .md-form.magnesium.drawerForm div[type='text'] > div, .inlineSearchForm.xlinq.drawerForm div[type='text'] > div, .inlineSearchForm.emerald.drawerForm div[type='text'] > div, .inlineSearchForm.indigo.drawerForm div[type='text'] > div, .md-form.emerald.drawerForm div[type='text'] > div, .md-form.indigo.drawerForm div[type='text'] > div, .md-form.cobalt.drawerForm div[type='text'] > div { top: 0px; } .inlineSearchForm.drawerForm .stateSelection, .inlineSearchForm.ing.drawerForm .stateSelection, .md-form.magnesium.drawerForm .stateSelection, .inlineSearchForm.xlinq.drawerForm .stateSelection, .inlineSearchForm.emerald.drawerForm .stateSelection, .inlineSearchForm.indigo.drawerForm .stateSelection, .md-form.emerald.drawerForm .stateSelection, .md-form.indigo.drawerForm .stateSelection, .md-form.cobalt.drawerForm .stateSelection { position: relative; bottom: 0px; right: 0px; } .inlineSearchForm.drawerForm .stateSelection .stateSelection__value-container, .inlineSearchForm.ing.drawerForm .stateSelection .stateSelection__value-container, .md-form.magnesium.drawerForm .stateSelection .stateSelection__value-container, .inlineSearchForm.xlinq.drawerForm .stateSelection .stateSelection__value-container, .inlineSearchForm.emerald.drawerForm .stateSelection .stateSelection__value-container, .inlineSearchForm.indigo.drawerForm .stateSelection .stateSelection__value-container, .md-form.emerald.drawerForm .stateSelection .stateSelection__value-container, .md-form.indigo.drawerForm .stateSelection .stateSelection__value-container, .md-form.cobalt.drawerForm .stateSelection .stateSelection__value-container { flex-wrap: wrap; } .inlineSearchForm div > div[role='button'], .inlineSearchForm.ing div > div[role='button'], .md-form.magnesium div > div[role='button'], .inlineSearchForm.xlinq div > div[role='button'], .inlineSearchForm.emerald div > div[role='button'], .inlineSearchForm.indigo div > div[role='button'], .md-form.emerald div > div[role='button'], .md-form.indigo div > div[role='button'], .md-form.cobalt div > div[role='button'] { max-width: 100px; background-color: #ffffff; border: solid 1px #dddddd; } .inlineSearchForm.fields2lines fieldset > div:first-child { height: 12vh; align-items: baseline; } .inlineSearchForm.fields3lines fieldset > div:first-child { height: 18vh; align-items: baseline; } .inlineFullWidthSearch { width: calc(100%) !important; } .inlineFullWidthSearch fieldset div:not(.stateSelection):not(.stateSelection__menu):not(.stateSelection__control):not(.stateSelection__value-container):not(.stateSelection__placeholder):not(.stateSelection__indicators):not(.stateSelection__multi-value):not(.stateSelection__multi-value__label):not(.stateSelection__multi-value__remove) > div { flex-basis: 40.6% !important; } .inlineFullWidthSearch fieldset div:not(.stateSelection):not(.stateSelection__menu):not(.stateSelection__control):not(.stateSelection__value-container):not(.stateSelection__placeholder):not(.stateSelection__indicators):not(.stateSelection__multi-value):not(.stateSelection__multi-value__label):not(.stateSelection__multi-value__remove) > div label, .inlineFullWidthSearch fieldset div:not(.stateSelection):not(.stateSelection__menu):not(.stateSelection__control):not(.stateSelection__value-container):not(.stateSelection__placeholder):not(.stateSelection__indicators):not(.stateSelection__multi-value):not(.stateSelection__multi-value__label):not(.stateSelection__multi-value__remove) > div .material-form-datepicker > div > label { font-size: 0.9rem !important; left: -3px !important; font-weight: bold !important; color: #081D35 !important; -webkit-transform: none !important; transform: none !important; height: 16px; } .inlineFullWidthSearch fieldset div:not(.stateSelection):not(.stateSelection__menu):not(.stateSelection__control):not(.stateSelection__value-container):not(.stateSelection__placeholder):not(.stateSelection__indicators):not(.stateSelection__multi-value):not(.stateSelection__multi-value__label):not(.stateSelection__multi-value__remove) > div .material-form-datepicker > div { flex-direction: column!important; } .inlineFullWidthSearch fieldset div:not(.stateSelection):not(.stateSelection__menu):not(.stateSelection__control):not(.stateSelection__value-container):not(.stateSelection__placeholder):not(.stateSelection__indicators):not(.stateSelection__multi-value):not(.stateSelection__multi-value__label):not(.stateSelection__multi-value__remove) > div input { height: 29px; border-radius: 10px !important; } .inlineFullWidthSearch fieldset div:not(.stateSelection):not(.stateSelection__menu):not(.stateSelection__control):not(.stateSelection__value-container):not(.stateSelection__placeholder):not(.stateSelection__indicators):not(.stateSelection__multi-value):not(.stateSelection__multi-value__label):not(.stateSelection__multi-value__remove) > div:only-child { flex-basis: 100% !important; } .modal-form { margin-top: 0px; } .modal-form fieldset > div > div:first-child { margin-top: 0px !important; } .composableModal fieldset > div { flex-flow: wrap; } .composableModal fieldset > div > div:first-child { margin-bottom: 0px!important; justify-content: flex-end; flex-basis: 100%; } .composableModal fieldset > div > div:first-child >div:not(.material-form-select, .draggableUploadField) { margin-top: 10px; align-items: start; } .composableModal fieldset > div > div:first-child > label { top: 0px; } .composableModal fieldset > div > div { flex-basis: calc(50% - 100px); align-self: flex-end; flex-grow: 1; } .composableModal fieldset > div > div .material-form-select label { top: 10px; max-width: calc(100%); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .composableModal fieldset > div > div .material-form-select label + div { margin-top: 24px; } .composableModal fieldset > div > div .material-form-datepicker > div > label { top: 3px; } .composableModal fieldset > div label { top: -5px; } .composableModal fieldset > label + div > div > div { margin-top: auto; } .composableModal fieldset > label + div > div > div[role="radiogroup"] { flex-direction: row; overflow-y: auto; max-height: 300px; padding-left: 3px; } .composableModal fieldset > label + div > div > div[role="radiogroup"] > label { flex-wrap: wrap; width: 32%; } .composableModal fieldset > label + div > div > div[role="radiogroup"] > label > span + span { width: 80%; } .composableModal fieldset fieldset { flex-basis: 100%; display: flex; flex-direction: column; } .composableModal fieldset fieldset > label + div > div:first-child { flex-basis: 100%; margin-bottom: 12px!important; margin-top: 10px!important; } /** second and other dynamic map values **/ .composableModal fieldset fieldset > div > div + div { margin-bottom: 15px!important; margin-top: 20px!important; } /** First row of selected map values */ .composableModal fieldset fieldset > label + div > div { margin-bottom: 12px!important; margin-top: 10px!important; } /** For maps in nested set **/ .composableModal fieldset fieldset > label + div > div .material-form-select > div > div > div> div > div:first-child { flex: 100% 1; } /*** cross browser support for firefox and safari button texts **/ .composableModal fieldset fieldset button > span { position: absolute; align-items: center; } .composableModal > div > fieldset + div > button { display: none; } body > div[role="dialog"] div[role="none presentation"] > div > div > div > div > button:hover, body > div[role="dialog"] div[role="none presentation"] > div > div > div > div >button + button:hover { background-color: #ffffff1f; } body > div[role="presentation"] + div[role="dialog"] div[role="none presentation"] > div > div > div > div > div > div + div button:hover { background-color: transparent; } body > div[role="presentation"] + div[role="dialog"] div[role="none presentation"] > div > div > div > div > div > div > div > button:hover { background-color: transparent; } body > div[role="presentation"] + div[role="dialog"] div[role="none presentation"] > div > div > div > div > div > div > div + div > button:hover { background-color: transparent; } /* Generated by Glyphter (http://www.glyphter.com) on Wed May 20 2020*/ @font-face { font-family: 'XLINQ_Icons'; src: url('assets/fonts/xlinq/XLINQ_Icons.eot'); src: url('assets/fonts/xlinq/XLINQ_Icons.eot?#iefix') format('embedded-opentype'), url('assets/fonts/xlinq/XLINQ_Icons.woff') format('woff'), url('assets/fonts/xlinq/XLINQ_Icons.ttf') format('truetype'), url('assets/fonts/xlinq/XLINQ_Icons.svg#XLINQ_Icons') format('svg'); font-weight: normal; font-style: normal; } [class*='icon-']:before{ display: inline-block; font-family: 'XLINQ_Icons'; font-style: normal; font-weight: normal; line-height: 1; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale } .XLINQ_Icons__icon-xlinq-arrow_right--CjmfR:before{content:'\0041';} .XLINQ_Icons__icon-xlinq-audit_trail--J7Kfw:before{content:'\0042';} .XLINQ_Icons__icon-xlinq-cancelled--_1XC5:before{content:'\0043';} .XLINQ_Icons__icon-xlinq-check--37xHE:before{content:'\0044';} .XLINQ_Icons__icon-xlinq-collapse_arrow_left-1--jRp09:before{content:'\0045';} .XLINQ_Icons__icon-xlinq-collapse_arrow_left--2-jnZ:before{content:'\0046';} .XLINQ_Icons__icon-xlinq-edit--1qH8a:before{content:'\0047';} .XLINQ_Icons__icon-xlinq-notifications--2BdTe:before{content:'\0048';} .XLINQ_Icons__icon-xlinq-trash--252jN:before{content:'\0049';} .XLINQ_Icons__icon-xlinq-user--3_qe4:before{content:'\004a';} .XLINQ_Icons__icon-xlinq-filter--6XMGp:before{content:'\004b';} .XLINQ_Icons__icon-xlinq-deactivate--3by_p:before{content:'\004c';} .XLINQ_Icons__icon-xlinq-download--cbXvK:before{content:'\004d';} .XLINQ_Icons__icon-xlinq-inbox--1MHRV:before{content:'\004e';} .XLINQ_Icons__icon-xlinq-pending--QDHvq:before{content:'\004f';} /** * Global css forms integrated **/ .stepper-form { padding-top: 5px; } /** * Fieldset of first child removes border and aligns the parent element **/ .stepper-form fieldset { border: none; margin-top: -25px; margin-left: -10px; } .stepper-form fieldset > div { flex-grow: 1; } .stepper-form fieldset > label:first-child { display: none; /* Hiding title from the form */ } /** * div of first child removes not needed box-shadow **/ .stepper-form > div:first-child { box-shadow: none; padding-left: 0px; padding-right: 0px; } /** ** Aligning the label in every fieldset **/ .stepper-form div > label { -webkit-transform: translate(0, 1.5px) scale(0.75); transform: translate(0, 1.5px) scale(0.75); -webkit-transform-origin: top left; transform-origin: top left; left: 8px; } /*** * Svg color comp set to display none ***/ .stepper-form div[style='flex-direction: row;'] > svg[role='presentation'] { display: none; } /** * Disabled selectbox **/ .stepper-form div[style='flex-direction: row;'] > svg[role='presentation'] + .material-form-select > div > div > div > div p { color: #b5b5b5; } .stepper-form div[style='flex-direction: row;'] > svg[role='presentation'] + .material-form-select > div > div > div > div > div + div { display: none; } .stepper-form .material-form-select div > label { left: 0px; } .stepper-form .material-form-select span { max-width: 150px; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; display: inline-block; } .stepper-form .material-form-datepicker div > label { left: 0px; } /** ** Aligning the rich text editor */ .stepper-form #xlinq_bio > div { margin-left: 0px; } /** ** Aligning the svg yes or no icon **/ .stepper-form fieldset > div > div > svg { flex-basis: 2% !important; } /** ** Set fieldset div margin-top **/ .stepper-form fieldset > div > div:first-child { margin-top: 10px !important; } /** * Styling the footer which has save button ***/ .stepper-form div > div + fieldset + div { margin-left: auto; display: flex; margin-right: 20px; } .stepper-form div > div + fieldset + div > button { border-radius: 4px; } .stepper-form div > div[role='button'] > span + svg { width: 25px !important; background: none !important; box-shadow: none !important; } .stepper-form.ing { margin-top: -25px; } .stepper-form.ing div > div[role='button'] { background-color: #ff620033; border: solid 1px #ff6102; } .stepper-form.ing div > div[role='button'] > span + svg { color: #ff6102 !important; } .stepper-form.ing fieldset > label + div > div > div:last-child > button { background: #ff6102; } .stepper-form.ing .MuiCheckbox-colorSecondary.Mui-checked { color: #ff6102 !important; } .stepper-form.ing .MuiCheckbox-colorSecondary.Mui-disabled { color: rgba(0, 0, 0, 0.26)!important; } .stepper-form.ing .MuiIconButton-colorSecondary:hover { background-color: rgba(255, 97, 0, 0.08); } .stepper-form.xlinq { margin-top: -25px; } .stepper-form.xlinq div > div[role='button'] { background-color: #f7fbfd; border: solid 1px #4c93f0; } .stepper-form.xlinq div > div[role='button'] > span + svg { color: #4c93f0 !important; } .stepper-form.xlinq fieldset > label + div > div > div:last-child > button { background: #4c93f0; } .stepper-form.xlinq .MuiCheckbox-colorSecondary.Mui-checked { color: #4c93f0 !important; } .stepper-form.xlinq .MuiCheckbox-colorSecondary.Mui-disabled { color: rgba(0, 0, 0, 0.26)!important; } .stepper-form.xlinq .MuiIconButton-colorSecondary:hover { background-color: rgba(33, 150, 243, 0.03); } .stepper-form.xlinq .material-form-datepicker button { background: transparent!important; } .stepperForm.inlineSearchForm { width: 100%; } .stepperForm.inlineSearchForm div { box-shadow: none !important; } .stepperForm.inlineSearchForm > div { padding: 0px; margin: 0px; margin-top: 10px; } .stepperForm.inlineSearchForm fieldset { border: none; } .stepperForm.inlineSearchForm fieldset div { margin-top: 0px !important; flex-flow: row wrap; flex-basis: 100%; } .stepperForm.inlineSearchForm fieldset div div { display: grid; flex-flow: row wrap; flex-basis: 100%; flex-basis: 23%; } .stepperForm.inlineSearchForm fieldset div label { left: 10px; top: -8px; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; width: 93%; } .stepperForm.inlineSearchForm fieldset div .material-form-datepicker label { top: -15px; left: 1px; } .stepperForm.inlineSearchForm fieldset div .material-form-datepicker label + div { flex-basis: 100%; } .stepperForm.inlineSearchForm fieldset div .material-form-datepicker div { flex-flow: nowrap !important; display: flex; } .stepperForm.inlineSearchForm fieldset + div { margin: 0px; } .stepperForm.inlineSearchForm div fieldset + div button { display: none; } .modal-form { margin-top: 0px; } .modal-form fieldset > div > div:first-child { margin-top: 0px !important; } .stepper-form div > div + fieldset + div > button { display: none; } :root { --font-size-base: 16px; --font-size-h1: 28px; --font-size-h2: 24px; --font-size-h3: 20px; --font-size-h4: 16px; --font-size-h5: 14px; --primary-color: #FF6200; } /* Document * ========================================================================== */ /** * 1. Correct the line height in all browsers. * 2. Prevent adjustments of font size after orientation changes in * IE on Windows Phone and in iOS. */ html { line-height: 1.15; /* 1 */ -ms-text-size-adjust: 100%; /* 2 */ -webkit-text-size-adjust: 100%; /* 2 */ } /* Sections * ========================================================================== */ /** * Correct the font size and margin on `h1` elements within `section` and * `article` contexts in Chrome, Edge, Firefox, and Safari. */ h1 { font-size: 2em; margin: 0.67em 0; } /* Grouping content * ========================================================================== */ /** * Remove the margin on nested lists in Chrome, Edge, IE, and Safari. */ dl dl, dl ol, dl ul, ol dl, ul dl { margin: 0; } /** * Remove the margin on nested lists in Edge 18- and IE. */ ol ol, ol ul, ul ol, ul ul { margin: 0; } /** * 1. Add the correct box sizing in Firefox. * 2. Show the overflow in Edge 18- and IE. */ hr { box-sizing: content-box; /* 1 */ height: 0; /* 1 */ overflow: visible; /* 2 */ } /** * Add the correct display in IE. */ main { display: block; } /** * 1. Correct the inheritance and scaling of font size in all browsers. * 2. Correct the odd `em` font sizing in all browsers. */ pre { font-family: monospace, monospace; /* 1 */ font-size: 1em; /* 2 */ } /* Text-level semantics * ========================================================================== */ /** * Add the correct text decoration in Edge 18-, IE, and Safari. */ abbr[title] { text-decoration: underline; text-decoration: underline dotted; } /** * Add the correct font weight in Chrome, Edge, and Safari. */ b, strong { font-weight: bolder; } /** * 1. Correct the inheritance and scaling of font size in all browsers. * 2. Correct the odd `em` font sizing in all browsers. */ code, kbd, samp { font-family: monospace, monospace; /* 1 */ font-size: 1em; /* 2 */ } /** * Add the correct font size in all browsers. */ small { font-size: 80%; } /* Embedded content * ========================================================================== */ /** * Hide the overflow in IE. */ svg:not(:root) { overflow: hidden; } /* Forms * ========================================================================== */ /** * Remove the margin on controls in Safari. */ button, input, select { margin: 0; } /** * 1. Show the overflow in IE. * 2. Remove the inheritance of text transform in Edge 18-, Firefox, and IE. */ button { overflow: visible; /* 1 */ text-transform: none; /* 2 */ } /** * Correct the inability to style buttons in iOS and Safari. */ button, [type="button"], [type="reset"], [type="submit"] { -webkit-appearance: button; } /** * Correct the padding in Firefox. */ fieldset { padding: 0.35em 0.75em 0.625em; } /** * Show the overflow in Edge 18- and IE. */ input { overflow: visible; } /** * 1. Correct the text wrapping in Edge 18- and IE. * 2. Correct the color inheritance from `fieldset` elements in IE. */ legend { box-sizing: border-box; /* 1 */ color: inherit; /* 2 */ display: table; /* 1 */ max-width: 100%; /* 1 */ white-space: normal; /* 1 */ } /** * 1. Add the correct display in Edge 18- and IE. * 2. Add the correct vertical alignment in Chrome, Edge, and Firefox. */ progress { display: inline-block; /* 1 */ vertical-align: baseline; /* 2 */ } /** * Remove the inheritance of text transform in Firefox. */ select { text-transform: none; } /** * 1. Remove the margin in Firefox and Safari. * 2. Remove the default vertical scrollbar in IE. */ textarea { margin: 0; /* 1 */ overflow: auto; /* 2 */ } /** * 1. Correct the odd appearance in Chrome, Edge, and Safari. * 2. Correct the outline style in Safari. */ [type="search"] { -webkit-appearance: textfield; /* 1 */ outline-offset: -2px; /* 2 */ } /** * Correct the cursor style of increment and decrement buttons in Safari. */ ::-webkit-inner-spin-button, ::-webkit-outer-spin-button { height: auto; } /** * Correct the text style of placeholders in Chrome, Edge, and Safari. */ ::-webkit-input-placeholder { color: inherit; opacity: 0.54; } /** * Remove the inner padding in Chrome, Edge, and Safari on macOS. */ ::-webkit-search-decoration { -webkit-appearance: none; } /** * 1. Correct the inability to style upload buttons in iOS and Safari. * 2. Change font properties to `inherit` in Safari. */ ::-webkit-file-upload-button { -webkit-appearance: button; /* 1 */ font: inherit; /* 2 */ } /** * Remove the inner border and padding of focus outlines in Firefox. */ ::-moz-focus-inner { border-style: none; padding: 0; } /** * Restore the focus outline styles unset by the previous rule in Firefox. */ :-moz-focusring { outline: 1px dotted ButtonText; } /** * Remove the additional :invalid styles in Firefox. */ :-moz-ui-invalid { box-shadow: none; } /* Interactive * ========================================================================== */ /* * Add the correct display in Edge 18- and IE. */ details { display: block; } /* * Add the correct styles in Edge 18-, IE, and Safari. */ dialog { background-color: white; border: solid; color: black; display: block; height: -moz-fit-content; height: -webkit-fit-content; height: fit-content; left: 0; margin: auto; padding: 1em; position: absolute; right: 0; width: -moz-fit-content; width: -webkit-fit-content; width: fit-content; } dialog:not([open]) { display: none; } /* * Add the correct display in all browsers. */ summary { display: list-item; } /* Scripting * ========================================================================== */ /** * Add the correct display in IE. */ template { display: none; } /* User interaction * ========================================================================== */ @font-face { font-family: 'INGMe'; src: url('/static/assets/fonts/Regular/INGMeWeb-Regular.eot?#iefix') format('embedded-opentype'), url('/static/assets/fonts/Regular/INGMeWeb-Regular.woff') format('woff'), url('/static/assets/fonts/Regular/INGMeWeb-Regular.woff2') format('woff2'), url('/static/assets/fonts/Regular/INGMeWeb-Regular.ttf') format('truetype'), url('/static/assets/fonts/Regular/INGMeWeb-Regular.svg#svgFontName') format('svg'); } @font-face { font-family: 'INGMe'; font-weight: bold; src: url('/static/assets/fonts/Bold/INGMeWeb-Bold.eot?#iefix') format('embedded-opentype'), url('/static/assets/fonts/Bold/INGMeWeb-Bold.woff') format('woff'), url('/static/assets/fonts/Bold/INGMeWeb-Bold.woff2') format('woff2'), url('/static/assets/fonts/Bold/INGMeWeb-Bold.ttf') format('truetype'), url('/static/assets/fonts/Bold/INGMeWeb-Bold.svg#svgFontName') format('svg'); } @font-face { font-family: 'INGMe'; font-style: italic; src: url('/static/assets/fonts/Italic/INGMeWeb-Italic.eot?#iefix') format('embedded-opentype'), url('/static/assets/fonts/Italic/INGMeWeb-Italic.woff') format('woff'), url('/static/assets/fonts/Italic/INGMeWeb-Italic.woff2') format('woff2'), url('/static/assets/fonts/Italic/INGMeWeb-Italic.ttf') format('truetype'), url('/static/assets/fonts/Italic/INGMeWeb-Italic.svg#svgFontName') format('svg'); } @font-face { font-family: 'INGMe'; font-weight: bold; font-style: italic; src: url('/static/assets/fonts/BoldItalic/INGMeWeb-BoldItalic.eot?#iefix') format('embedded-opentype'), url('/static/assets/fonts/BoldItalic/INGMeWeb-BoldItalic.woff') format('woff'), url('/static/assets/fonts/BoldItalic/INGMeWeb-BoldItalic.woff2') format('woff2'), url('/static/assets/fonts/BoldItalic/INGMeWeb-BoldItalic.ttf') format('truetype'), url('/static/assets/fonts/BoldItalic/INGMeWeb-BoldItalic.svg#svgFontName') format('svg'); } @font-face { font-family: 'XLINQ_Icons'; src: url('/static/assets/fonts/xlinq/XLINQ_Icons.eot'); src: url('/static/assets/fonts/xlinq/XLINQ_Icons.eot?#iefix') format('embedded-opentype'), url('/static/assets/fonts/xlinq/XLINQ_Icons.woff') format('woff'), url('/static/assets/fonts/xlinq/XLINQ_Icons.ttf') format('truetype'), url('/static/assets/fonts/xlinq/XLINQ_Icons.svg#XLINQ_Icons') format('svg'); font-weight: normal; font-style: normal; } body { font-family: 'INGMe', 'Helvetica', 'Calibri', 'XLINQ_Icons', sans-serif; font-size: 16px; font-size: 16px; font-size: var(--font-size-base); -webkit-font-smoothing: antialiased; background-color: #F7F7F7; overflow-x: hidden; margin: 0px; } .darkMode { background-color: #1F3752; color: #CBD4DD; } .overview__wrapper--3Ktol { background-color: #F7F7F7; } .icon-xlinq-arrow_right:before {content:'\0041';} .icon-xlinq-audit_trail:before {content:'\0042';} .icon-xlinq-cancelled:before {content:'\0043';} .icon-xlinq-check:before {content:'\0044';} .icon-xlinq-collapse_arrow_left-1:before {content:'\0045';} .icon-xlinq-collapse_arrow_left:before {content:'\0046';} .icon-xlinq-edit:before {content:'\0047';} .icon-xlinq-notifications:before {content:'\0048';} .icon-xlinq-trash:before {content:'\0049';} .icon-xlinq-user:before {content:'\004a';} .icon-xlinq-filter:before {content:'\004b';} .icon-xlinq-deactivate:before {content:'\004c';} .icon-xlinq-download:before {content:'\004d';} .icon-xlinq-inbox:before {content:'\004e';} .icon-xlinq-pending:before {content:'\004f';} .loader, .loader:after { border-radius: 50%; width: 10em; height: 10em; } .loader { margin: 60px auto; font-size: 10px; position: relative; text-indent: -9999em; border-top: 1.1em solid rgba(255, 255, 255, 0.2); border-right: 1.1em solid rgba(255, 255, 255, 0.2); border-bottom: 1.1em solid rgba(255, 255, 255, 0.2); border-left: 1.1em solid #ffffff; -webkit-transform: translateZ(0); transform: translateZ(0); -webkit-animation: overview__load8--pBU_X 1.1s infinite linear; animation: overview__load8--pBU_X 1.1s infinite linear; } @-webkit-keyframes overview__load8--pBU_X { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes overview__load8--pBU_X { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } .topRightGrid { background: white!important; }