CNERC-SD-010\kyu
2065 lines
76 KiB
CSS
2065 lines
76 KiB
CSS
:root {
|
|
/* PRIMITIVE */
|
|
--wb-color-light-primary-5: #ecf2fe;
|
|
--wb-color-light-primary-10: #d8e5fd;
|
|
--wb-color-light-primary-20: #b1cefb;
|
|
--wb-color-light-primary-30: #86aff9;
|
|
--wb-color-light-primary-40: #4c87f6;
|
|
--wb-color-light-primary-50: #256ef4;
|
|
--wb-color-light-primary-60: #0b50d0;
|
|
--wb-color-light-primary-70: #083891;
|
|
--wb-color-light-primary-80: #052561;
|
|
--wb-color-light-primary-90: #03163a;
|
|
--wb-color-light-primary-95: #020f27;
|
|
--wb-color-light-secondary-5: #eef2f7;
|
|
--wb-color-light-secondary-10: #d6e0eb;
|
|
--wb-color-light-secondary-20: #bacbde;
|
|
--wb-color-light-secondary-30: #90b0d5;
|
|
--wb-color-light-secondary-40: #6b96c7;
|
|
--wb-color-light-secondary-50: #346fb2;
|
|
--wb-color-light-secondary-60: #1c589c;
|
|
--wb-color-light-secondary-70: #063a74;
|
|
--wb-color-light-secondary-80: #052b57;
|
|
--wb-color-light-secondary-90: #031f3f;
|
|
--wb-color-light-secondary-95: #02162c;
|
|
--wb-color-light-gray-0: #ffffff;
|
|
--wb-color-light-gray-5: #f4f5f6;
|
|
--wb-color-light-gray-10: #e6e8ea;
|
|
--wb-color-light-gray-20: #cdd1d5;
|
|
--wb-color-light-gray-30: #b1b8be;
|
|
--wb-color-light-gray-40: #8a949e;
|
|
--wb-color-light-gray-50: #6d7882;
|
|
--wb-color-light-gray-60: #58616a;
|
|
--wb-color-light-gray-70: #464c53;
|
|
--wb-color-light-gray-80: #33363d;
|
|
--wb-color-light-gray-90: #1e2124;
|
|
--wb-color-light-gray-95: #131416;
|
|
--wb-color-light-gray-100: #000000;
|
|
--wb-color-light-alpha-black100: #000000;
|
|
--wb-color-light-alpha-black75: #000000bf;
|
|
--wb-color-light-alpha-black50: #00000080;
|
|
--wb-color-light-alpha-black25: #00000040;
|
|
--wb-color-light-alpha-black10: #0000001a;
|
|
--wb-color-light-alpha-black0: #00000000;
|
|
--wb-color-light-alpha-white100: #ffffff;
|
|
--wb-color-light-alpha-white75: #ffffffbf;
|
|
--wb-color-light-alpha-white50: #ffffff80;
|
|
--wb-color-light-alpha-white25: #ffffff40;
|
|
--wb-color-light-alpha-white10: #ffffff1a;
|
|
--wb-color-light-alpha-white0: #ffffff00;
|
|
--wb-color-light-danger-5: #fdefec;
|
|
--wb-color-light-danger-10: #fcdfd9;
|
|
--wb-color-light-danger-20: #f7afa1;
|
|
--wb-color-light-danger-30: #f48771;
|
|
--wb-color-light-danger-40: #f05f42;
|
|
--wb-color-light-danger-50: #de3412;
|
|
--wb-color-light-danger-60: #bd2c0f;
|
|
--wb-color-light-danger-70: #8a240f;
|
|
--wb-color-light-danger-80: #5c180a;
|
|
--wb-color-light-danger-90: #390d05;
|
|
--wb-color-light-danger-95: #260903;
|
|
--wb-color-light-information-5: #e7f4fe;
|
|
--wb-color-light-information-10: #d3ebfd;
|
|
--wb-color-light-information-20: #9ed2fa;
|
|
--wb-color-light-information-30: #5fb5f7;
|
|
--wb-color-light-information-40: #2098f3;
|
|
--wb-color-light-information-50: #0b78cb;
|
|
--wb-color-light-information-60: #096ab3;
|
|
--wb-color-light-information-70: #085691;
|
|
--wb-color-light-information-80: #053961;
|
|
--wb-color-light-information-90: #03253f;
|
|
--wb-color-light-information-95: #021a2c;
|
|
--wb-color-light-warning-5: #fff3db;
|
|
--wb-color-light-warning-10: #ffe0a3;
|
|
--wb-color-light-warning-20: #ffc95c;
|
|
--wb-color-light-warning-30: #ffb114;
|
|
--wb-color-light-warning-40: #c78500;
|
|
--wb-color-light-warning-50: #9e6a00;
|
|
--wb-color-light-warning-60: #8a5c00;
|
|
--wb-color-light-warning-70: #614100;
|
|
--wb-color-light-warning-80: #422c00;
|
|
--wb-color-light-warning-90: #2e1f00;
|
|
--wb-color-light-warning-95: #241800;
|
|
--wb-color-light-success-5: #eaf6ec;
|
|
--wb-color-light-success-10: #d8eedd;
|
|
--wb-color-light-success-20: #a9dab4;
|
|
--wb-color-light-success-30: #7ec88e;
|
|
--wb-color-light-success-40: #3fa654;
|
|
--wb-color-light-success-50: #228738;
|
|
--wb-color-light-success-60: #267337;
|
|
--wb-color-light-success-70: #285d33;
|
|
--wb-color-light-success-80: #1f4727;
|
|
--wb-color-light-success-90: #122b18;
|
|
--wb-color-light-success-95: #0e2012;
|
|
--wb-color-light-point-5: #fbeff0;
|
|
--wb-color-light-point-10: #f5d6d9;
|
|
--wb-color-light-point-20: #ebadb2;
|
|
--wb-color-light-point-30: #e0858c;
|
|
--wb-color-light-point-40: #d65c66;
|
|
--wb-color-light-point-50: #d63d4a;
|
|
--wb-color-light-point-60: #ab2b36;
|
|
--wb-color-light-point-70: #7a1f26;
|
|
--wb-color-light-point-80: #521419;
|
|
--wb-color-light-point-90: #310c0f;
|
|
--wb-color-light-point-95: #21080a;
|
|
--wb-color-light-graphic-10: #e5ecf9;
|
|
--wb-color-light-graphic-30: #98acc5;
|
|
--wb-color-light-graphic-50: #61758f;
|
|
--wb-color-light-graphic-70: #39506c;
|
|
--wb-color-light-graphic-90: #223a58;
|
|
--wb-color-high-contrast-gray-0: #ffffff;
|
|
--wb-color-high-contrast-gray-5: #f4f5f6;
|
|
--wb-color-high-contrast-gray-10: #e6e8ea;
|
|
--wb-color-high-contrast-gray-20: #cdd1d5;
|
|
--wb-color-high-contrast-gray-30: #b1b8be;
|
|
--wb-color-high-contrast-gray-40: #8a949e;
|
|
--wb-color-high-contrast-gray-50: #6d7882;
|
|
--wb-color-high-contrast-gray-60: #58616a;
|
|
--wb-color-high-contrast-gray-70: #464c53;
|
|
--wb-color-high-contrast-gray-80: #33363d;
|
|
--wb-color-high-contrast-gray-90: #1e2124;
|
|
--wb-color-high-contrast-gray-95: #131416;
|
|
--wb-color-high-contrast-gray-100: #000000;
|
|
--wb-color-high-contrast-primary-5: #ecf2fe;
|
|
--wb-color-high-contrast-primary-10: #d8e5fd;
|
|
--wb-color-high-contrast-primary-20: #b1cefb;
|
|
--wb-color-high-contrast-primary-30: #86aff9;
|
|
--wb-color-high-contrast-primary-40: #4c87f6;
|
|
--wb-color-high-contrast-primary-50: #256ef4;
|
|
--wb-color-high-contrast-primary-60: #0b50d0;
|
|
--wb-color-high-contrast-primary-70: #083891;
|
|
--wb-color-high-contrast-primary-80: #052561;
|
|
--wb-color-high-contrast-primary-90: #03163a;
|
|
--wb-color-high-contrast-primary-95: #020f27;
|
|
--wb-color-high-contrast-secondary-5: #edf6f8;
|
|
--wb-color-high-contrast-secondary-10: #d5ebf1;
|
|
--wb-color-high-contrast-secondary-20: #abd8e3;
|
|
--wb-color-high-contrast-secondary-30: #75c0d1;
|
|
--wb-color-high-contrast-secondary-40: #3d9fb8;
|
|
--wb-color-high-contrast-secondary-50: #268097;
|
|
--wb-color-high-contrast-secondary-60: #1f687a;
|
|
--wb-color-high-contrast-secondary-70: #17505e;
|
|
--wb-color-high-contrast-secondary-80: #113b45;
|
|
--wb-color-high-contrast-secondary-90: #0e3139;
|
|
--wb-color-high-contrast-secondary-95: #091f25;
|
|
--wb-color-high-contrast-point-5: #fbeff0;
|
|
--wb-color-high-contrast-point-10: #f5d6d9;
|
|
--wb-color-high-contrast-point-20: #ebadb2;
|
|
--wb-color-high-contrast-point-30: #e0858c;
|
|
--wb-color-high-contrast-point-40: #d65c66;
|
|
--wb-color-high-contrast-point-50: #d63d4a;
|
|
--wb-color-high-contrast-point-60: #ab2b36;
|
|
--wb-color-high-contrast-point-70: #7a1f26;
|
|
--wb-color-high-contrast-point-80: #521419;
|
|
--wb-color-high-contrast-point-90: #310c0f;
|
|
--wb-color-high-contrast-point-95: #21080a;
|
|
--wb-color-high-contrast-danger-5: #fdefec;
|
|
--wb-color-high-contrast-danger-10: #fcdfd9;
|
|
--wb-color-high-contrast-danger-20: #f7afa1;
|
|
--wb-color-high-contrast-danger-30: #f48771;
|
|
--wb-color-high-contrast-danger-40: #f05f42;
|
|
--wb-color-high-contrast-danger-50: #de3412;
|
|
--wb-color-high-contrast-danger-60: #bd2c0f;
|
|
--wb-color-high-contrast-danger-70: #8a240f;
|
|
--wb-color-high-contrast-danger-80: #5c180a;
|
|
--wb-color-high-contrast-danger-90: #390d05;
|
|
--wb-color-high-contrast-danger-95: #260903;
|
|
--wb-color-high-contrast-warning-5: #fff3db;
|
|
--wb-color-high-contrast-warning-10: #ffe0a3;
|
|
--wb-color-high-contrast-warning-20: #ffc95c;
|
|
--wb-color-high-contrast-warning-30: #ffb114;
|
|
--wb-color-high-contrast-warning-40: #c78500;
|
|
--wb-color-high-contrast-warning-50: #9e6a00;
|
|
--wb-color-high-contrast-warning-60: #8a5c00;
|
|
--wb-color-high-contrast-warning-70: #614100;
|
|
--wb-color-high-contrast-warning-80: #422c00;
|
|
--wb-color-high-contrast-warning-90: #2e1f00;
|
|
--wb-color-high-contrast-warning-95: #241800;
|
|
--wb-color-high-contrast-success-5: #eaf6ec;
|
|
--wb-color-high-contrast-success-10: #d8eedd;
|
|
--wb-color-high-contrast-success-20: #a9dab4;
|
|
--wb-color-high-contrast-success-30: #7ec88e;
|
|
--wb-color-high-contrast-success-40: #3fa654;
|
|
--wb-color-high-contrast-success-50: #228738;
|
|
--wb-color-high-contrast-success-60: #267337;
|
|
--wb-color-high-contrast-success-70: #285d33;
|
|
--wb-color-high-contrast-success-80: #1f4727;
|
|
--wb-color-high-contrast-success-90: #122b18;
|
|
--wb-color-high-contrast-success-95: #0e2012;
|
|
--wb-color-high-contrast-information-5: #e7f4fe;
|
|
--wb-color-high-contrast-information-10: #d3ebfd;
|
|
--wb-color-high-contrast-information-20: #9ed2fa;
|
|
--wb-color-high-contrast-information-30: #5fb5f7;
|
|
--wb-color-high-contrast-information-40: #2098f3;
|
|
--wb-color-high-contrast-information-50: #0b78cb;
|
|
--wb-color-high-contrast-information-60: #096ab3;
|
|
--wb-color-high-contrast-information-70: #085691;
|
|
--wb-color-high-contrast-information-80: #053961;
|
|
--wb-color-high-contrast-information-90: #03253f;
|
|
--wb-color-high-contrast-information-95: #021a2c;
|
|
--wb-color-high-contrast-alpha-black100: #000000;
|
|
--wb-color-high-contrast-alpha-black75: #000000bf;
|
|
--wb-color-high-contrast-alpha-black50: #00000080;
|
|
--wb-color-high-contrast-alpha-black25: #00000040;
|
|
--wb-color-high-contrast-alpha-black10: #0000001a;
|
|
--wb-color-high-contrast-alpha-black0: #00000000;
|
|
--wb-color-high-contrast-alpha-white100: #ffffff;
|
|
--wb-color-high-contrast-alpha-white75: #ffffffbf;
|
|
--wb-color-high-contrast-alpha-white50: #ffffff80;
|
|
--wb-color-high-contrast-alpha-white25: #ffffff40;
|
|
--wb-color-high-contrast-alpha-white10: #ffffff1a;
|
|
--wb-color-high-contrast-alpha-white0: #ffffff00;
|
|
--wb-color-high-contrast-graphic-10: #e5ecf9;
|
|
--wb-color-high-contrast-graphic-30: #98acc5;
|
|
--wb-color-high-contrast-graphic-50: #61758f;
|
|
--wb-color-high-contrast-graphic-70: #39506c;
|
|
--wb-color-high-contrast-graphic-90: #223a58;
|
|
--wb-typo-font-type: Pretendard GOV;
|
|
--wb-typo-font-weight-regular: Regular;
|
|
--wb-typo-font-weight-bold: Bold;
|
|
--wb-typo-letter-spacing-0: 0rem;
|
|
--wb-typo-letter-spacing-1: 0.1rem;
|
|
--wb-number-0: 0rem;
|
|
--wb-number-1: 0.1rem;
|
|
--wb-number-2: 0.2rem;
|
|
--wb-number-3: 0.4rem;
|
|
--wb-number-4: 0.6rem;
|
|
--wb-number-5: 0.8rem;
|
|
--wb-number-6: 1rem;
|
|
--wb-number-7: 1.2rem;
|
|
--wb-number-8: 1.6rem;
|
|
--wb-number-9: 2rem;
|
|
--wb-number-10: 2.4rem;
|
|
--wb-number-11: 2.8rem;
|
|
--wb-number-12: 3.2rem;
|
|
--wb-number-13: 3.6rem;
|
|
--wb-number-14: 4rem;
|
|
--wb-number-15: 4.4rem;
|
|
--wb-number-16: 4.8rem;
|
|
--wb-number-17: 5.6rem;
|
|
--wb-number-18: 6.4rem;
|
|
--wb-number-19: 7.2rem;
|
|
--wb-number-20: 8rem;
|
|
--wb-number-21: 9.6rem;
|
|
--wb-number-max: 100rem;
|
|
/* MODE-LIGHT */
|
|
--wb-light-color-surface-gray-subtler: var(--wb-color-light-gray-5);
|
|
--wb-light-color-surface-gray-subtle: var(--wb-color-light-gray-10);
|
|
--wb-light-color-surface-disabled: var(--wb-color-light-gray-20);
|
|
--wb-light-color-surface-primary-subtler: var(--wb-color-light-primary-5);
|
|
--wb-light-color-surface-secondary-subtler: var(--wb-color-light-secondary-5);
|
|
--wb-light-color-surface-danger-subtler: var(--wb-color-light-danger-5);
|
|
--wb-light-color-surface-warning-subtler: var(--wb-color-light-warning-5);
|
|
--wb-light-color-surface-success-subtler: var(--wb-color-light-success-5);
|
|
--wb-light-color-surface-information-subtler: var(--wb-color-light-information-5);
|
|
--wb-light-color-surface-point-subtler: var(--wb-color-light-point-5);
|
|
--wb-light-color-surface-white: var(--wb-color-light-gray-0);
|
|
--wb-light-color-surface-inverse: var(--wb-color-light-gray-90);
|
|
--wb-light-color-surface-white-static: var(--wb-color-light-gray-0);
|
|
--wb-light-color-surface-inverse-static: var(--wb-color-light-gray-90);
|
|
--wb-light-color-surface-white-subtle: var(--wb-color-light-gray-0);
|
|
--wb-light-color-surface-white-subtler: var(--wb-color-light-gray-0);
|
|
--wb-light-color-border-gray-light: var(--wb-color-light-gray-20);
|
|
--wb-light-color-border-gray: var(--wb-color-light-gray-30);
|
|
--wb-light-color-border-secondary-light: var(--wb-color-light-secondary-10);
|
|
--wb-light-color-border-danger-light: var(--wb-color-light-danger-10);
|
|
--wb-light-color-border-danger: var(--wb-color-light-danger-50);
|
|
--wb-light-color-border-warning-light: var(--wb-color-light-warning-10);
|
|
--wb-light-color-border-warning: var(--wb-color-light-warning-50);
|
|
--wb-light-color-border-success-light: var(--wb-color-light-success-10);
|
|
--wb-light-color-border-success: var(--wb-color-light-success-50);
|
|
--wb-light-color-border-information-light: var(--wb-color-light-information-10);
|
|
--wb-light-color-border-information: var(--wb-color-light-information-50);
|
|
--wb-light-color-border-gray-dark: var(--wb-color-light-gray-60);
|
|
--wb-light-color-border-primary: var(--wb-color-light-primary-50);
|
|
--wb-light-color-border-disabled: var(--wb-color-light-gray-30);
|
|
--wb-light-color-border-gray-darker: var(--wb-color-light-gray-90);
|
|
--wb-light-color-border-secondary: var(--wb-color-light-secondary-70);
|
|
--wb-light-color-border-inverse: var(--wb-color-light-gray-0);
|
|
--wb-light-color-border-transparency: var(--wb-color-light-alpha-black0);
|
|
--wb-light-color-border-primary-light: var(--wb-color-light-primary-10);
|
|
--wb-light-color-border-point: var(--wb-color-light-point-50);
|
|
--wb-light-color-border-point-light: var(--wb-color-light-point-10);
|
|
--wb-light-color-divider-gray-light: var(--wb-color-light-gray-20);
|
|
--wb-light-color-divider-gray: var(--wb-color-light-gray-40);
|
|
--wb-light-color-divider-gray-dark: var(--wb-color-light-gray-50);
|
|
--wb-light-color-divider-primary: var(--wb-color-light-primary-50);
|
|
--wb-light-color-divider-secondary-light: var(--wb-color-light-secondary-10);
|
|
--wb-light-color-divider-secondary: var(--wb-color-light-secondary-70);
|
|
--wb-light-color-divider-error: var(--wb-color-light-danger-50);
|
|
--wb-light-color-divider-primary-light: var(--wb-color-light-primary-10);
|
|
--wb-light-color-divider-inverse: var(--wb-color-light-gray-0);
|
|
--wb-light-color-divider-gray-darker: var(--wb-color-light-gray-90);
|
|
--wb-light-color-divider-point: var(--wb-color-light-point-50);
|
|
--wb-light-color-text-bolder: var(--wb-color-light-gray-95);
|
|
--wb-light-color-text-subtle: var(--wb-color-light-gray-70);
|
|
--wb-light-color-text-disabled: var(--wb-color-light-gray-40);
|
|
--wb-light-color-text-disabled-on: var(--wb-color-light-gray-50);
|
|
--wb-light-color-text-primary: var(--wb-color-light-primary-60);
|
|
--wb-light-color-text-secondary: var(--wb-color-light-secondary-80);
|
|
--wb-light-color-text-danger: var(--wb-color-light-danger-60);
|
|
--wb-light-color-text-warning: var(--wb-color-light-warning-60);
|
|
--wb-light-color-text-success: var(--wb-color-light-success-60);
|
|
--wb-light-color-text-information: var(--wb-color-light-information-60);
|
|
--wb-light-color-text-basic: var(--wb-color-light-gray-90);
|
|
--wb-light-color-text-point: var(--wb-color-light-point-60);
|
|
--wb-light-color-text-bolder-inverse: var(--wb-color-light-gray-0);
|
|
--wb-light-color-text-basic-inverse: var(--wb-color-light-gray-0);
|
|
--wb-light-color-text-subtle-inverse: var(--wb-color-light-gray-30);
|
|
--wb-light-color-text-inverse-static: var(--wb-color-light-gray-0);
|
|
--wb-light-color-text-static: var(--wb-color-light-gray-90);
|
|
--wb-light-color-icon-gray: var(--wb-color-light-gray-80);
|
|
--wb-light-color-icon-gray-fill: var(--wb-color-light-gray-20);
|
|
--wb-light-color-icon-inverse: var(--wb-color-light-gray-0);
|
|
--wb-light-color-icon-primary: var(--wb-color-light-primary-50);
|
|
--wb-light-color-icon-secondary: var(--wb-color-light-secondary-80);
|
|
--wb-light-color-icon-point: var(--wb-color-light-point-50);
|
|
--wb-light-color-icon-danger: var(--wb-color-light-danger-50);
|
|
--wb-light-color-icon-warning: var(--wb-color-light-warning-50);
|
|
--wb-light-color-icon-success: var(--wb-color-light-success-50);
|
|
--wb-light-color-icon-information: var(--wb-color-light-information-50);
|
|
--wb-light-color-icon-gray-light: var(--wb-color-light-gray-70);
|
|
--wb-light-color-icon-disabled: var(--wb-color-light-gray-40);
|
|
--wb-light-color-icon-disabled-on: var(--wb-color-light-gray-50);
|
|
--wb-light-color-icon-inverse-static: var(--wb-color-light-gray-0);
|
|
--wb-light-color-icon-primary-static: var(--wb-color-light-primary-50);
|
|
--wb-light-color-icon-secondary-static: var(--wb-color-light-secondary-80);
|
|
--wb-light-color-icon-point-static: var(--wb-color-light-point-50);
|
|
--wb-light-color-icon-danger-static: var(--wb-color-light-danger-50);
|
|
--wb-light-color-icon-warning-static: var(--wb-color-light-warning-50);
|
|
--wb-light-color-icon-success-static: var(--wb-color-light-success-50);
|
|
--wb-light-color-icon-information-static: var(--wb-color-light-information-50);
|
|
--wb-light-color-icon-gray-static: var(--wb-color-light-gray-80);
|
|
--wb-light-color-link-default: var(--wb-color-light-primary-50);
|
|
--wb-light-color-link-hover: var(--wb-color-light-primary-60);
|
|
--wb-light-color-link-pressed: var(--wb-color-light-primary-70);
|
|
--wb-light-color-link-visited: #5917b8;
|
|
--wb-light-color-button-primary-fill: var(--wb-color-light-primary-50);
|
|
--wb-light-color-button-primary-fill-hover: var(--wb-color-light-primary-60);
|
|
--wb-light-color-button-primary-fill-pressed: var(--wb-color-light-primary-70);
|
|
--wb-light-color-button-secondary-fill: var(--wb-color-light-primary-5);
|
|
--wb-light-color-button-secondary-fill-hover: var(--wb-color-light-primary-10);
|
|
--wb-light-color-button-secondary-fill-pressed: var(--wb-color-light-primary-20);
|
|
--wb-light-color-button-secondary-border: var(--wb-color-light-primary-50);
|
|
--wb-light-color-button-tertiary-fill: var(--wb-color-light-alpha-white0);
|
|
--wb-light-color-button-tertiary-fill-hover: var(--wb-color-light-gray-5);
|
|
--wb-light-color-button-tertiary-fill-pressed: var(--wb-color-light-gray-10);
|
|
--wb-light-color-button-tertiary-border: var(--wb-color-light-gray-60);
|
|
--wb-light-color-button-disabled-fill: var(--wb-color-light-gray-20);
|
|
--wb-light-color-button-text-fill-hover: var(--wb-color-light-secondary-5);
|
|
--wb-light-color-button-text-fill-pressed: var(--wb-color-light-secondary-10);
|
|
--wb-light-color-button-text-fill: var(--wb-color-light-alpha-white0);
|
|
--wb-light-color-button-text-border: var(--wb-color-light-alpha-black0);
|
|
--wb-light-color-button-disabled-border: var(--wb-color-light-gray-30);
|
|
--wb-light-color-background-white: var(--wb-color-light-gray-0);
|
|
--wb-light-color-background-inverse: var(--wb-color-light-gray-90);
|
|
--wb-light-color-background-gray-subtler: var(--wb-color-light-gray-5);
|
|
--wb-light-color-background-gray-subtle: var(--wb-color-light-gray-10);
|
|
--wb-light-color-background-dim: var(--wb-color-light-alpha-black75);
|
|
--wb-light-color-element-disabled-light: var(--wb-color-light-gray-20);
|
|
--wb-light-color-element-disabled-dark: var(--wb-color-light-gray-40);
|
|
--wb-light-color-element-gray-lighter: var(--wb-color-light-gray-5);
|
|
--wb-light-color-element-gray-light: var(--wb-color-light-gray-10);
|
|
--wb-light-color-element-gray: var(--wb-color-light-gray-50);
|
|
--wb-light-color-element-primary-lighter: var(--wb-color-light-primary-5);
|
|
--wb-light-color-element-primary-light: var(--wb-color-light-primary-10);
|
|
--wb-light-color-element-primary: var(--wb-color-light-primary-50);
|
|
--wb-light-color-element-secondary-lighter: var(--wb-color-light-secondary-5);
|
|
--wb-light-color-element-secondary-light: var(--wb-color-light-secondary-10);
|
|
--wb-light-color-element-secondary: var(--wb-color-light-secondary-70);
|
|
--wb-light-color-element-point-lighter: var(--wb-color-light-point-5);
|
|
--wb-light-color-element-point-light: var(--wb-color-light-point-10);
|
|
--wb-light-color-element-point: var(--wb-color-light-point-50);
|
|
--wb-light-color-element-danger-lighter: var(--wb-color-light-danger-5);
|
|
--wb-light-color-element-danger: var(--wb-color-light-danger-50);
|
|
--wb-light-color-element-warning-lighter: var(--wb-color-light-warning-5);
|
|
--wb-light-color-element-warning: var(--wb-color-light-warning-30);
|
|
--wb-light-color-element-success-lighter: var(--wb-color-light-success-5);
|
|
--wb-light-color-element-success: var(--wb-color-light-success-50);
|
|
--wb-light-color-element-information-lighter: var(--wb-color-light-information-5);
|
|
--wb-light-color-element-information: var(--wb-color-light-information-50);
|
|
--wb-light-color-element-inverse: var(--wb-color-light-gray-0);
|
|
--wb-light-color-element-gray-dark: var(--wb-color-light-gray-60);
|
|
--wb-light-color-element-inverse-static: var(--wb-color-light-gray-0);
|
|
--wb-light-color-action-white: var(--wb-color-light-gray-0);
|
|
--wb-light-color-action-primary: var(--wb-color-light-alpha-white0);
|
|
--wb-light-color-action-primary-hover: var(--wb-color-light-primary-5);
|
|
--wb-light-color-action-primary-pressed: var(--wb-color-light-primary-10);
|
|
--wb-light-color-action-secondary: var(--wb-color-light-alpha-white0);
|
|
--wb-light-color-action-secondary-hover: var(--wb-color-light-secondary-5);
|
|
--wb-light-color-action-secondary-pressed: var(--wb-color-light-secondary-10);
|
|
--wb-light-color-action-secondary-selected: var(--wb-color-light-secondary-5);
|
|
--wb-light-color-action-secondary-on: var(--wb-color-light-alpha-white0);
|
|
--wb-light-color-action-secondary-on-hover: var(--wb-color-light-gray-0);
|
|
--wb-light-color-action-secondary-on-pressed: var(--wb-color-light-secondary-10);
|
|
--wb-light-color-action-secondary-on-selected: var(--wb-color-light-gray-0);
|
|
--wb-light-color-action-secondary-active: var(--wb-color-light-secondary-70);
|
|
--wb-light-color-action-primary-active: var(--wb-color-light-primary-50);
|
|
--wb-light-color-action-disabled: var(--wb-color-light-gray-20);
|
|
--wb-light-color-action-primary-selected: var(--wb-color-light-primary-5);
|
|
--wb-light-color-input-border: var(--wb-color-light-gray-60);
|
|
--wb-light-color-input-border-disabled: var(--wb-color-light-gray-30);
|
|
--wb-light-color-input-border-active: var(--wb-color-light-primary-50);
|
|
--wb-light-color-input-border-error: var(--wb-color-light-danger-50);
|
|
--wb-light-color-input-surface: var(--wb-color-light-gray-0);
|
|
--wb-light-color-input-surface-disabled: var(--wb-color-light-gray-20);
|
|
--wb-light-color-graphic-blue-subtler: var(--wb-color-light-graphic-10);
|
|
--wb-light-color-graphic-blue-subtle: var(--wb-color-light-graphic-30);
|
|
--wb-light-color-graphic-blue: var(--wb-color-light-graphic-50);
|
|
--wb-light-color-graphic-blue-dark: var(--wb-color-light-graphic-70);
|
|
--wb-light-color-graphic-blue-darker: var(--wb-color-light-graphic-90);
|
|
--wb-light-color-graphic-red-subtler: var(--wb-color-light-point-5);
|
|
--wb-light-color-graphic-red-subtle: var(--wb-color-light-point-10);
|
|
--wb-light-color-graphic-red: var(--wb-color-high-contrast-point-20);
|
|
--wb-light-color-graphic-red-dark: var(--wb-color-high-contrast-point-40);
|
|
--wb-light-color-graphic-red-darker: var(--wb-color-high-contrast-point-70);
|
|
--wb-light-color-graphic-brand: var(--wb-color-light-primary-50);
|
|
--wb-light-color-alpha-base100: var(--wb-color-light-alpha-white100);
|
|
--wb-light-color-alpha-base50: var(--wb-color-light-alpha-white50);
|
|
--wb-light-color-alpha-base25: var(--wb-color-high-contrast-alpha-white25);
|
|
--wb-light-color-alpha-base0: var(--wb-color-light-alpha-white0);
|
|
--wb-light-color-alpha-inverse100: var(--wb-color-light-alpha-black100);
|
|
--wb-light-color-alpha-inverse50: var(--wb-color-light-alpha-black50);
|
|
--wb-light-color-alpha-inverse25: var(--wb-color-light-alpha-black25);
|
|
--wb-light-color-alpha-inverse0: var(--wb-color-light-alpha-black0);
|
|
--wb-light-color-alpha-base75: var(--wb-color-light-alpha-white75);
|
|
--wb-light-color-alpha-inverse75: var(--wb-color-light-alpha-black75);
|
|
--wb-light-color-alpha-inverse10: var(--wb-color-light-alpha-black10);
|
|
--wb-light-color-alpha-base10: var(--wb-color-high-contrast-alpha-white10);
|
|
--wb-light-color-alpha-shadow1: #0000000d;
|
|
--wb-light-color-alpha-shadow2: #00000014;
|
|
--wb-light-color-alpha-shadow3: #0000001f;
|
|
--wb-light-border-width-variable-regular: 0.1rem;
|
|
--wb-light-border-width-variable-medium: 0.2rem;
|
|
--wb-light-border-width-static-regular: 0.1rem;
|
|
--wb-light-border-width-static-medium: 0.2rem;
|
|
/* MODE-HIGH-CONTRAST */
|
|
--wb-high-contrast-color-surface-gray-subtler: var(--wb-color-high-contrast-gray-95);
|
|
--wb-high-contrast-color-surface-gray-subtle: var(--wb-color-high-contrast-gray-90);
|
|
--wb-high-contrast-color-surface-disabled: var(--wb-color-high-contrast-gray-70);
|
|
--wb-high-contrast-color-surface-primary-subtler: var(--wb-color-high-contrast-primary-95);
|
|
--wb-high-contrast-color-surface-secondary-subtler: var(--wb-color-high-contrast-secondary-95);
|
|
--wb-high-contrast-color-surface-danger-subtler: var(--wb-color-high-contrast-danger-95);
|
|
--wb-high-contrast-color-surface-warning-subtler: var(--wb-color-high-contrast-warning-95);
|
|
--wb-high-contrast-color-surface-success-subtler: var(--wb-color-high-contrast-success-95);
|
|
--wb-high-contrast-color-surface-information-subtler: var(--wb-color-high-contrast-information-95);
|
|
--wb-high-contrast-color-surface-point-subtler: var(--wb-color-high-contrast-point-95);
|
|
--wb-high-contrast-color-surface-white: var(--wb-color-high-contrast-gray-100);
|
|
--wb-high-contrast-color-surface-inverse: var(--wb-color-high-contrast-gray-10);
|
|
--wb-high-contrast-color-surface-white-static: var(--wb-color-high-contrast-gray-0);
|
|
--wb-high-contrast-color-surface-inverse-static: var(--wb-color-high-contrast-gray-90);
|
|
--wb-high-contrast-color-surface-white-subtle: var(--wb-color-high-contrast-gray-95);
|
|
--wb-high-contrast-color-surface-white-subtler: var(--wb-color-high-contrast-gray-90);
|
|
--wb-high-contrast-color-border-gray-light: var(--wb-color-high-contrast-gray-80);
|
|
--wb-high-contrast-color-border-gray: var(--wb-color-high-contrast-gray-70);
|
|
--wb-high-contrast-color-border-secondary-light: var(--wb-color-high-contrast-secondary-90);
|
|
--wb-high-contrast-color-border-danger-light: var(--wb-color-high-contrast-danger-90);
|
|
--wb-high-contrast-color-border-danger: var(--wb-color-high-contrast-danger-50);
|
|
--wb-high-contrast-color-border-warning-light: var(--wb-color-high-contrast-warning-90);
|
|
--wb-high-contrast-color-border-warning: var(--wb-color-high-contrast-warning-50);
|
|
--wb-high-contrast-color-border-success-light: var(--wb-color-high-contrast-success-90);
|
|
--wb-high-contrast-color-border-success: var(--wb-color-high-contrast-success-50);
|
|
--wb-high-contrast-color-border-information-light: var(--wb-color-high-contrast-information-90);
|
|
--wb-high-contrast-color-border-information: var(--wb-color-high-contrast-information-50);
|
|
--wb-high-contrast-color-border-gray-dark: var(--wb-color-high-contrast-gray-40);
|
|
--wb-high-contrast-color-border-primary: var(--wb-color-high-contrast-primary-50);
|
|
--wb-high-contrast-color-border-disabled: var(--wb-color-high-contrast-gray-70);
|
|
--wb-high-contrast-color-border-gray-darker: var(--wb-color-high-contrast-gray-10);
|
|
--wb-high-contrast-color-border-secondary: var(--wb-color-high-contrast-secondary-60);
|
|
--wb-high-contrast-color-border-inverse: var(--wb-color-high-contrast-gray-100);
|
|
--wb-high-contrast-color-border-transparency: var(--wb-color-high-contrast-alpha-white25);
|
|
--wb-high-contrast-color-border-primary-light: var(--wb-color-high-contrast-primary-90);
|
|
--wb-high-contrast-color-border-point: var(--wb-color-high-contrast-point-50);
|
|
--wb-high-contrast-color-border-point-light: var(--wb-color-high-contrast-point-90);
|
|
--wb-high-contrast-color-divider-gray-light: var(--wb-color-high-contrast-gray-80);
|
|
--wb-high-contrast-color-divider-gray: var(--wb-color-high-contrast-gray-70);
|
|
--wb-high-contrast-color-divider-gray-dark: var(--wb-color-high-contrast-gray-50);
|
|
--wb-high-contrast-color-divider-primary: var(--wb-color-high-contrast-primary-50);
|
|
--wb-high-contrast-color-divider-secondary-light: var(--wb-color-high-contrast-secondary-90);
|
|
--wb-high-contrast-color-divider-secondary: var(--wb-color-high-contrast-secondary-60);
|
|
--wb-high-contrast-color-divider-error: var(--wb-color-high-contrast-danger-50);
|
|
--wb-high-contrast-color-divider-primary-light: var(--wb-color-high-contrast-primary-90);
|
|
--wb-high-contrast-color-divider-inverse: var(--wb-color-high-contrast-gray-100);
|
|
--wb-high-contrast-color-divider-gray-darker: var(--wb-color-high-contrast-gray-10);
|
|
--wb-high-contrast-color-divider-point: var(--wb-color-high-contrast-point-50);
|
|
--wb-high-contrast-color-text-bolder: var(--wb-color-high-contrast-gray-10);
|
|
--wb-high-contrast-color-text-subtle: var(--wb-color-high-contrast-gray-20);
|
|
--wb-high-contrast-color-text-disabled: var(--wb-color-high-contrast-gray-60);
|
|
--wb-high-contrast-color-text-disabled-on: var(--wb-color-high-contrast-gray-50);
|
|
--wb-high-contrast-color-text-primary: var(--wb-color-high-contrast-primary-20);
|
|
--wb-high-contrast-color-text-secondary: var(--wb-color-high-contrast-secondary-20);
|
|
--wb-high-contrast-color-text-danger: var(--wb-color-high-contrast-danger-20);
|
|
--wb-high-contrast-color-text-warning: var(--wb-color-high-contrast-warning-20);
|
|
--wb-high-contrast-color-text-success: var(--wb-color-high-contrast-success-20);
|
|
--wb-high-contrast-color-text-information: var(--wb-color-high-contrast-information-20);
|
|
--wb-high-contrast-color-text-basic: var(--wb-color-high-contrast-gray-5);
|
|
--wb-high-contrast-color-text-point: var(--wb-color-high-contrast-point-20);
|
|
--wb-high-contrast-color-text-bolder-inverse: var(--wb-color-high-contrast-gray-95);
|
|
--wb-high-contrast-color-text-basic-inverse: var(--wb-color-high-contrast-gray-90);
|
|
--wb-high-contrast-color-text-subtle-inverse: var(--wb-color-high-contrast-gray-70);
|
|
--wb-high-contrast-color-text-inverse-static: var(--wb-color-high-contrast-gray-0);
|
|
--wb-high-contrast-color-text-static: var(--wb-color-high-contrast-gray-90);
|
|
--wb-high-contrast-color-icon-gray: var(--wb-color-high-contrast-gray-5);
|
|
--wb-high-contrast-color-icon-gray-fill: var(--wb-color-high-contrast-gray-70);
|
|
--wb-high-contrast-color-icon-inverse: var(--wb-color-high-contrast-gray-90);
|
|
--wb-high-contrast-color-icon-primary: var(--wb-color-high-contrast-primary-20);
|
|
--wb-high-contrast-color-icon-secondary: var(--wb-color-high-contrast-secondary-20);
|
|
--wb-high-contrast-color-icon-point: var(--wb-color-high-contrast-point-20);
|
|
--wb-high-contrast-color-icon-danger: var(--wb-color-high-contrast-danger-20);
|
|
--wb-high-contrast-color-icon-warning: var(--wb-color-high-contrast-warning-20);
|
|
--wb-high-contrast-color-icon-success: var(--wb-color-high-contrast-success-20);
|
|
--wb-high-contrast-color-icon-information: var(--wb-color-high-contrast-information-20);
|
|
--wb-high-contrast-color-icon-gray-light: var(--wb-color-high-contrast-gray-20);
|
|
--wb-high-contrast-color-icon-disabled: var(--wb-color-high-contrast-gray-60);
|
|
--wb-high-contrast-color-icon-disabled-on: var(--wb-color-high-contrast-gray-50);
|
|
--wb-high-contrast-color-icon-inverse-static: var(--wb-color-high-contrast-gray-0);
|
|
--wb-high-contrast-color-icon-primary-static: var(--wb-color-high-contrast-primary-50);
|
|
--wb-high-contrast-color-icon-secondary-static: var(--wb-color-high-contrast-secondary-80);
|
|
--wb-high-contrast-color-icon-point-static: var(--wb-color-high-contrast-point-50);
|
|
--wb-high-contrast-color-icon-danger-static: var(--wb-color-high-contrast-danger-50);
|
|
--wb-high-contrast-color-icon-warning-static: var(--wb-color-high-contrast-warning-50);
|
|
--wb-high-contrast-color-icon-success-static: var(--wb-color-high-contrast-success-50);
|
|
--wb-high-contrast-color-icon-information-static: var(--wb-color-high-contrast-information-50);
|
|
--wb-high-contrast-color-icon-gray-static: var(--wb-color-high-contrast-gray-80);
|
|
--wb-high-contrast-color-link-default: var(--wb-color-high-contrast-primary-30);
|
|
--wb-high-contrast-color-link-hover: var(--wb-color-high-contrast-primary-20);
|
|
--wb-high-contrast-color-link-pressed: var(--wb-color-high-contrast-primary-10);
|
|
--wb-high-contrast-color-link-visited: #c49ff9;
|
|
--wb-high-contrast-color-button-primary-fill: var(--wb-color-high-contrast-primary-50);
|
|
--wb-high-contrast-color-button-primary-fill-hover: var(--wb-color-high-contrast-primary-60);
|
|
--wb-high-contrast-color-button-primary-fill-pressed: var(--wb-color-high-contrast-primary-70);
|
|
--wb-high-contrast-color-button-secondary-fill: var(--wb-color-high-contrast-primary-95);
|
|
--wb-high-contrast-color-button-secondary-fill-hover: var(--wb-color-high-contrast-primary-90);
|
|
--wb-high-contrast-color-button-secondary-fill-pressed: var(--wb-color-high-contrast-primary-80);
|
|
--wb-high-contrast-color-button-secondary-border: var(--wb-color-high-contrast-primary-50);
|
|
--wb-high-contrast-color-button-tertiary-fill: var(--wb-color-high-contrast-alpha-black0);
|
|
--wb-high-contrast-color-button-tertiary-fill-hover: var(--wb-color-high-contrast-gray-95);
|
|
--wb-high-contrast-color-button-tertiary-fill-pressed: var(--wb-color-high-contrast-gray-80);
|
|
--wb-high-contrast-color-button-tertiary-border: var(--wb-color-high-contrast-gray-40);
|
|
--wb-high-contrast-color-button-disabled-fill: var(--wb-color-high-contrast-gray-80);
|
|
--wb-high-contrast-color-button-text-fill-hover: var(--wb-color-high-contrast-secondary-95);
|
|
--wb-high-contrast-color-button-text-fill-pressed: var(--wb-color-high-contrast-secondary-90);
|
|
--wb-high-contrast-color-button-text-fill: var(--wb-color-high-contrast-alpha-black0);
|
|
--wb-high-contrast-color-button-text-border: var(--wb-color-high-contrast-alpha-white50);
|
|
--wb-high-contrast-color-button-disabled-border: var(--wb-color-high-contrast-gray-70);
|
|
--wb-high-contrast-color-background-white: var(--wb-color-high-contrast-gray-100);
|
|
--wb-high-contrast-color-background-inverse: var(--wb-color-high-contrast-gray-10);
|
|
--wb-high-contrast-color-background-gray-subtler: var(--wb-color-high-contrast-gray-95);
|
|
--wb-high-contrast-color-background-gray-subtle: var(--wb-color-high-contrast-gray-90);
|
|
--wb-high-contrast-color-background-dim: var(--wb-color-high-contrast-alpha-black75);
|
|
--wb-high-contrast-color-element-disabled-light: var(--wb-color-high-contrast-gray-80);
|
|
--wb-high-contrast-color-element-disabled-dark: var(--wb-color-high-contrast-gray-60);
|
|
--wb-high-contrast-color-element-gray-lighter: var(--wb-color-high-contrast-gray-95);
|
|
--wb-high-contrast-color-element-gray-light: var(--wb-color-high-contrast-gray-90);
|
|
--wb-high-contrast-color-element-gray: var(--wb-color-high-contrast-gray-50);
|
|
--wb-high-contrast-color-element-primary-lighter: var(--wb-color-high-contrast-primary-95);
|
|
--wb-high-contrast-color-element-primary-light: var(--wb-color-high-contrast-primary-90);
|
|
--wb-high-contrast-color-element-primary: var(--wb-color-high-contrast-primary-50);
|
|
--wb-high-contrast-color-element-secondary-lighter: var(--wb-color-high-contrast-secondary-95);
|
|
--wb-high-contrast-color-element-secondary-light: var(--wb-color-high-contrast-secondary-90);
|
|
--wb-high-contrast-color-element-secondary: var(--wb-color-high-contrast-secondary-60);
|
|
--wb-high-contrast-color-element-point-lighter: var(--wb-color-high-contrast-point-95);
|
|
--wb-high-contrast-color-element-point-light: var(--wb-color-high-contrast-point-90);
|
|
--wb-high-contrast-color-element-point: var(--wb-color-high-contrast-point-50);
|
|
--wb-high-contrast-color-element-danger-lighter: var(--wb-color-high-contrast-danger-95);
|
|
--wb-high-contrast-color-element-danger: var(--wb-color-high-contrast-danger-50);
|
|
--wb-high-contrast-color-element-warning-lighter: var(--wb-color-high-contrast-warning-95);
|
|
--wb-high-contrast-color-element-warning: var(--wb-color-high-contrast-warning-30);
|
|
--wb-high-contrast-color-element-success-lighter: var(--wb-color-high-contrast-success-95);
|
|
--wb-high-contrast-color-element-success: var(--wb-color-high-contrast-success-50);
|
|
--wb-high-contrast-color-element-information-lighter: var(--wb-color-high-contrast-information-95);
|
|
--wb-high-contrast-color-element-information: var(--wb-color-high-contrast-information-50);
|
|
--wb-high-contrast-color-element-inverse: var(--wb-color-high-contrast-gray-95);
|
|
--wb-high-contrast-color-element-gray-dark: var(--wb-color-high-contrast-gray-40);
|
|
--wb-high-contrast-color-element-inverse-static: var(--wb-color-high-contrast-gray-0);
|
|
--wb-high-contrast-color-action-white: var(--wb-color-light-gray-100);
|
|
--wb-high-contrast-color-action-primary: var(--wb-color-high-contrast-alpha-black0);
|
|
--wb-high-contrast-color-action-primary-hover: var(--wb-color-high-contrast-primary-95);
|
|
--wb-high-contrast-color-action-primary-pressed: var(--wb-color-high-contrast-primary-90);
|
|
--wb-high-contrast-color-action-secondary: var(--wb-color-light-alpha-black0);
|
|
--wb-high-contrast-color-action-secondary-hover: var(--wb-color-high-contrast-secondary-95);
|
|
--wb-high-contrast-color-action-secondary-pressed: var(--wb-color-high-contrast-secondary-90);
|
|
--wb-high-contrast-color-action-secondary-selected: var(--wb-color-high-contrast-secondary-95);
|
|
--wb-high-contrast-color-action-secondary-on: var(--wb-color-high-contrast-alpha-black0);
|
|
--wb-high-contrast-color-action-secondary-on-hover: var(--wb-color-high-contrast-gray-100);
|
|
--wb-high-contrast-color-action-secondary-on-pressed: var(--wb-color-high-contrast-secondary-90);
|
|
--wb-high-contrast-color-action-secondary-on-selected: var(--wb-color-high-contrast-gray-95);
|
|
--wb-high-contrast-color-action-secondary-active: var(--wb-color-high-contrast-secondary-60);
|
|
--wb-high-contrast-color-action-primary-active: var(--wb-color-high-contrast-primary-50);
|
|
--wb-high-contrast-color-action-disabled: var(--wb-color-high-contrast-gray-80);
|
|
--wb-high-contrast-color-action-primary-selected: var(--wb-color-high-contrast-primary-95);
|
|
--wb-high-contrast-color-input-border: var(--wb-color-high-contrast-gray-40);
|
|
--wb-high-contrast-color-input-border-disabled: var(--wb-color-high-contrast-gray-70);
|
|
--wb-high-contrast-color-input-border-active: var(--wb-color-high-contrast-primary-50);
|
|
--wb-high-contrast-color-input-border-error: var(--wb-color-high-contrast-danger-50);
|
|
--wb-high-contrast-color-input-surface: var(--wb-color-high-contrast-gray-90);
|
|
--wb-high-contrast-color-input-surface-disabled: var(--wb-color-high-contrast-gray-95);
|
|
--wb-high-contrast-color-graphic-blue-subtler: var(--wb-color-high-contrast-graphic-10);
|
|
--wb-high-contrast-color-graphic-blue-subtle: var(--wb-color-high-contrast-graphic-30);
|
|
--wb-high-contrast-color-graphic-blue: var(--wb-color-high-contrast-graphic-50);
|
|
--wb-high-contrast-color-graphic-blue-dark: var(--wb-color-high-contrast-graphic-70);
|
|
--wb-high-contrast-color-graphic-blue-darker: var(--wb-color-high-contrast-graphic-90);
|
|
--wb-high-contrast-color-graphic-red-subtler: var(--wb-color-high-contrast-point-5);
|
|
--wb-high-contrast-color-graphic-red-subtle: var(--wb-color-high-contrast-point-10);
|
|
--wb-high-contrast-color-graphic-red: var(--wb-color-high-contrast-point-20);
|
|
--wb-high-contrast-color-graphic-red-dark: var(--wb-color-high-contrast-point-40);
|
|
--wb-high-contrast-color-graphic-red-darker: var(--wb-color-high-contrast-point-70);
|
|
--wb-high-contrast-color-graphic-brand: var(--wb-color-high-contrast-primary-50);
|
|
--wb-high-contrast-color-alpha-base100: var(--wb-color-high-contrast-alpha-black100);
|
|
--wb-high-contrast-color-alpha-base50: var(--wb-color-high-contrast-alpha-black50);
|
|
--wb-high-contrast-color-alpha-base25: var(--wb-color-high-contrast-alpha-black25);
|
|
--wb-high-contrast-color-alpha-base0: var(--wb-color-light-alpha-black0);
|
|
--wb-high-contrast-color-alpha-inverse100: var(--wb-color-high-contrast-alpha-white100);
|
|
--wb-high-contrast-color-alpha-inverse50: var(--wb-color-high-contrast-alpha-white50);
|
|
--wb-high-contrast-color-alpha-inverse25: var(--wb-color-high-contrast-alpha-white25);
|
|
--wb-high-contrast-color-alpha-inverse0: var(--wb-color-high-contrast-alpha-white0);
|
|
--wb-high-contrast-color-alpha-base75: var(--wb-color-high-contrast-alpha-black75);
|
|
--wb-high-contrast-color-alpha-inverse75: var(--wb-color-high-contrast-alpha-white75);
|
|
--wb-high-contrast-color-alpha-inverse10: var(--wb-color-high-contrast-alpha-black25);
|
|
--wb-high-contrast-color-alpha-base10: var(--wb-color-high-contrast-alpha-black10);
|
|
--wb-high-contrast-color-alpha-shadow1: #0000001f;
|
|
--wb-high-contrast-color-alpha-shadow2: #00000033;
|
|
--wb-high-contrast-color-alpha-shadow3: #00000066;
|
|
--wb-high-contrast-border-width-variable-regular: 0.2rem;
|
|
--wb-high-contrast-border-width-variable-medium: 0.3rem;
|
|
--wb-high-contrast-border-width-static-regular: 0.1rem;
|
|
--wb-high-contrast-border-width-static-medium: 0.2rem;
|
|
/* RESPONSIVE-PC */
|
|
--wb-pc-font-size-display-large: 6rem;
|
|
--wb-pc-font-size-display-medium: 4.4rem;
|
|
--wb-pc-font-size-display-small: 3.6rem;
|
|
--wb-pc-font-size-body-large: 1.9rem;
|
|
--wb-pc-font-size-body-medium: 1.7rem;
|
|
--wb-pc-font-size-body-small: 1.5rem;
|
|
--wb-pc-font-size-body-xsmall: 1.3rem;
|
|
--wb-pc-font-size-label-large: 1.9rem;
|
|
--wb-pc-font-size-label-medium: 1.7rem;
|
|
--wb-pc-font-size-label-small: 1.5rem;
|
|
--wb-pc-font-size-label-xsmall: 1.3rem;
|
|
--wb-pc-font-size-heading-large: 3.2rem;
|
|
--wb-pc-font-size-heading-medium: 2.4rem;
|
|
--wb-pc-font-size-heading-small: 1.9rem;
|
|
--wb-pc-font-size-heading-xsmall: 1.7rem;
|
|
--wb-pc-font-size-heading-xxsmall: 1.5rem;
|
|
--wb-pc-font-size-heading-xlarge: 4rem;
|
|
--wb-pc-font-size-navigation-title-medium: 2.4rem;
|
|
--wb-pc-font-size-navigation-title-small: 1.9rem;
|
|
--wb-pc-font-size-navigation-depth-medium-bold: 1.7rem;
|
|
--wb-pc-font-size-navigation-depth-medium: 1.7rem;
|
|
--wb-pc-font-size-navigation-depth-small-bold: 1.5rem;
|
|
--wb-pc-font-size-navigation-depth-small: 1.5rem;
|
|
--wb-pc-gap-layout-header-breadcrumb: var(--wb-number-10);
|
|
--wb-pc-gap-layout-left-contents: var(--wb-number-18);
|
|
--wb-pc-gap-layout-contents-right: var(--wb-number-14);
|
|
--wb-pc-gap-layout-h1-h2: var(--wb-number-16);
|
|
--wb-pc-gap-layout-h2-h2: var(--wb-number-20);
|
|
--wb-pc-gap-layout-h2-h3: var(--wb-number-14);
|
|
--wb-pc-gap-layout-h3-h3: var(--wb-number-18);
|
|
--wb-pc-gap-layout-h3-h4: var(--wb-number-10);
|
|
--wb-pc-gap-layout-h4-h4: var(--wb-number-14);
|
|
--wb-pc-gap-layout-h4-h5: var(--wb-number-8);
|
|
--wb-pc-gap-layout-h5-h5: var(--wb-number-12);
|
|
--wb-pc-gap-layout-title-body-small: var(--wb-number-8);
|
|
--wb-pc-gap-layout-title-body-medium: var(--wb-number-9);
|
|
--wb-pc-gap-layout-title-body-large: var(--wb-number-10);
|
|
--wb-pc-gap-layout-breadcrumb-h1: var(--wb-number-14);
|
|
--wb-pc-gap-layout-contents-footer: var(--wb-number-18);
|
|
--wb-pc-gap-layout-text-text-large: var(--wb-number-9);
|
|
--wb-pc-gap-layout-text-text-medium: var(--wb-number-8);
|
|
--wb-pc-gap-layout-text-text-small: var(--wb-number-7);
|
|
--wb-pc-gap-layout-image-text-small: var(--wb-number-9);
|
|
--wb-pc-gap-layout-image-text-medium: var(--wb-number-10);
|
|
--wb-pc-gap-layout-image-text-large: var(--wb-number-12);
|
|
--wb-pc-padding-card-large: var(--wb-number-14);
|
|
--wb-pc-padding-card-medium: var(--wb-number-12);
|
|
--wb-pc-padding-card-small: var(--wb-number-10);
|
|
--wb-pc-padding-card-xsmall: var(--wb-number-8);
|
|
/* RESPONSIVE-MOBILE */
|
|
--wb-mobile-font-size-display-large: 4.4rem;
|
|
--wb-mobile-font-size-display-medium: 3.2rem;
|
|
--wb-mobile-font-size-display-small: 2.8rem;
|
|
--wb-mobile-font-size-body-large: 1.9rem;
|
|
--wb-mobile-font-size-body-medium: 1.7rem;
|
|
--wb-mobile-font-size-body-small: 1.5rem;
|
|
--wb-mobile-font-size-body-xsmall: 1.3rem;
|
|
--wb-mobile-font-size-label-large: 1.9rem;
|
|
--wb-mobile-font-size-label-medium: 1.7rem;
|
|
--wb-mobile-font-size-label-small: 1.5rem;
|
|
--wb-mobile-font-size-label-xsmall: 1.3rem;
|
|
--wb-mobile-font-size-heading-large: 2.4rem;
|
|
--wb-mobile-font-size-heading-medium: 2.2rem;
|
|
--wb-mobile-font-size-heading-small: 1.9rem;
|
|
--wb-mobile-font-size-heading-xsmall: 1.7rem;
|
|
--wb-mobile-font-size-heading-xxsmall: 1.5rem;
|
|
--wb-mobile-font-size-heading-xlarge: 2.8rem;
|
|
--wb-mobile-font-size-navigation-title-medium: 2.2rem;
|
|
--wb-mobile-font-size-navigation-title-small: 1.9rem;
|
|
--wb-mobile-font-size-navigation-depth-medium-bold: 1.7rem;
|
|
--wb-mobile-font-size-navigation-depth-medium: 1.7rem;
|
|
--wb-mobile-font-size-navigation-depth-small-bold: 1.5rem;
|
|
--wb-mobile-font-size-navigation-depth-small: 1.5rem;
|
|
--wb-mobile-gap-layout-header-breadcrumb: var(--wb-number-8);
|
|
--wb-mobile-gap-layout-left-contents: 0rem;
|
|
--wb-mobile-gap-layout-contents-right: 0rem;
|
|
--wb-mobile-gap-layout-h1-h2: var(--wb-number-12);
|
|
--wb-mobile-gap-layout-h2-h2: var(--wb-number-14);
|
|
--wb-mobile-gap-layout-h2-h3: var(--wb-number-10);
|
|
--wb-mobile-gap-layout-h3-h3: var(--wb-number-12);
|
|
--wb-mobile-gap-layout-h3-h4: var(--wb-number-8);
|
|
--wb-mobile-gap-layout-h4-h4: var(--wb-number-10);
|
|
--wb-mobile-gap-layout-h4-h5: var(--wb-number-7);
|
|
--wb-mobile-gap-layout-h5-h5: var(--wb-number-8);
|
|
--wb-mobile-gap-layout-title-body-small: var(--wb-number-5);
|
|
--wb-mobile-gap-layout-title-body-medium: var(--wb-number-7);
|
|
--wb-mobile-gap-layout-title-body-large: var(--wb-number-9);
|
|
--wb-mobile-gap-layout-breadcrumb-h1: var(--wb-number-12);
|
|
--wb-mobile-gap-layout-contents-footer: var(--wb-number-14);
|
|
--wb-mobile-gap-layout-text-text-large: var(--wb-number-8);
|
|
--wb-mobile-gap-layout-text-text-medium: var(--wb-number-7);
|
|
--wb-mobile-gap-layout-text-text-small: var(--wb-number-6);
|
|
--wb-mobile-gap-layout-image-text-small: var(--wb-number-8);
|
|
--wb-mobile-gap-layout-image-text-medium: var(--wb-number-9);
|
|
--wb-mobile-gap-layout-image-text-large: var(--wb-number-10);
|
|
--wb-mobile-padding-card-large: var(--wb-number-10);
|
|
--wb-mobile-padding-card-medium: var(--wb-number-10);
|
|
--wb-mobile-padding-card-small: var(--wb-number-9);
|
|
--wb-mobile-padding-card-xsmall: var(--wb-number-7);
|
|
/* SEMANTIC */
|
|
--wb-gap-1: var(--wb-number-2);
|
|
--wb-gap-2: var(--wb-number-3);
|
|
--wb-gap-3: var(--wb-number-5);
|
|
--wb-gap-4: var(--wb-number-7);
|
|
--wb-gap-5: var(--wb-number-8);
|
|
--wb-gap-6: var(--wb-number-9);
|
|
--wb-gap-7: var(--wb-number-10);
|
|
--wb-gap-8: var(--wb-number-12);
|
|
--wb-gap-9: var(--wb-number-14);
|
|
--wb-gap-10: var(--wb-number-16);
|
|
--wb-gap-11: var(--wb-number-18);
|
|
--wb-gap-12: var(--wb-number-20);
|
|
--wb-padding-1: var(--wb-number-2);
|
|
--wb-padding-2: var(--wb-number-3);
|
|
--wb-padding-3: var(--wb-number-5);
|
|
--wb-padding-4: var(--wb-number-6);
|
|
--wb-padding-5: var(--wb-number-7);
|
|
--wb-padding-6: var(--wb-number-8);
|
|
--wb-padding-7: var(--wb-number-9);
|
|
--wb-padding-8: var(--wb-number-10);
|
|
--wb-padding-9: var(--wb-number-12);
|
|
--wb-padding-10: var(--wb-number-14);
|
|
--wb-size-height-1: var(--wb-number-5);
|
|
--wb-size-height-2: var(--wb-number-8);
|
|
--wb-size-height-3: var(--wb-number-9);
|
|
--wb-size-height-4: var(--wb-number-10);
|
|
--wb-size-height-5: var(--wb-number-12);
|
|
--wb-size-height-6: var(--wb-number-14);
|
|
--wb-size-height-7: var(--wb-number-16);
|
|
--wb-size-height-8: var(--wb-number-17);
|
|
--wb-size-height-9: var(--wb-number-18);
|
|
--wb-size-height-10: var(--wb-number-19);
|
|
--wb-size-height-11: var(--wb-number-20);
|
|
--wb-radius-xsmall1: var(--wb-number-2);
|
|
--wb-radius-xsmall2: var(--wb-number-2);
|
|
--wb-radius-xsmall3: var(--wb-number-2);
|
|
--wb-radius-small1: var(--wb-number-3);
|
|
--wb-radius-small2: var(--wb-number-3);
|
|
--wb-radius-small3: var(--wb-number-3);
|
|
--wb-radius-medium1: var(--wb-number-4);
|
|
--wb-radius-medium2: var(--wb-number-4);
|
|
--wb-radius-medium3: var(--wb-number-5);
|
|
--wb-radius-medium4: var(--wb-number-5);
|
|
--wb-radius-large1: var(--wb-number-6);
|
|
--wb-radius-large2: var(--wb-number-6);
|
|
--wb-radius-xlarge1: var(--wb-number-7);
|
|
--wb-radius-xlarge2: var(--wb-number-7);
|
|
--wb-radius-max: var(--wb-number-max);
|
|
}
|
|
|
|
.row {
|
|
--grid-gutter-x: 1rem;
|
|
--grid-gutter-y: 0;
|
|
display: -webkit-box;
|
|
display: -ms-flexbox;
|
|
display: flex;
|
|
-ms-flex-wrap: wrap;
|
|
flex-wrap: wrap;
|
|
margin-left: calc(-0.5 * var(--grid-gutter-x));
|
|
margin-right: calc(-0.5 * var(--grid-gutter-x));
|
|
margin-top: calc(-1 * var(--grid-gutter-y));
|
|
}
|
|
|
|
.row > * {
|
|
-webkit-box-sizing: border-box;
|
|
box-sizing: border-box;
|
|
-ms-flex-negative: 0;
|
|
flex-shrink: 0;
|
|
width: 100%;
|
|
max-width: 100%;
|
|
padding-left: calc(var(--grid-gutter-x) / 2);
|
|
padding-right: calc(var(--grid-gutter-x) / 2);
|
|
margin-top: var(--grid-gutter-y);
|
|
}
|
|
|
|
@media (min-width: 1200px) {
|
|
.col-1 {
|
|
-webkit-box-flex: 0;
|
|
-ms-flex: 0 0 8.33333%;
|
|
flex: 0 0 8.33333%;
|
|
max-width: 8.33333%;
|
|
}
|
|
.col-2 {
|
|
-webkit-box-flex: 0;
|
|
-ms-flex: 0 0 16.66667%;
|
|
flex: 0 0 16.66667%;
|
|
max-width: 16.66667%;
|
|
}
|
|
.col-3 {
|
|
-webkit-box-flex: 0;
|
|
-ms-flex: 0 0 25%;
|
|
flex: 0 0 25%;
|
|
max-width: 25%;
|
|
}
|
|
.col-4 {
|
|
-webkit-box-flex: 0;
|
|
-ms-flex: 0 0 33.33333%;
|
|
flex: 0 0 33.33333%;
|
|
max-width: 33.33333%;
|
|
}
|
|
.col-5 {
|
|
-webkit-box-flex: 0;
|
|
-ms-flex: 0 0 41.66667%;
|
|
flex: 0 0 41.66667%;
|
|
max-width: 41.66667%;
|
|
}
|
|
.col-6 {
|
|
-webkit-box-flex: 0;
|
|
-ms-flex: 0 0 50%;
|
|
flex: 0 0 50%;
|
|
max-width: 50%;
|
|
}
|
|
.col-7 {
|
|
-webkit-box-flex: 0;
|
|
-ms-flex: 0 0 58.33333%;
|
|
flex: 0 0 58.33333%;
|
|
max-width: 58.33333%;
|
|
}
|
|
.col-8 {
|
|
-webkit-box-flex: 0;
|
|
-ms-flex: 0 0 66.66667%;
|
|
flex: 0 0 66.66667%;
|
|
max-width: 66.66667%;
|
|
}
|
|
.col-9 {
|
|
-webkit-box-flex: 0;
|
|
-ms-flex: 0 0 75%;
|
|
flex: 0 0 75%;
|
|
max-width: 75%;
|
|
}
|
|
.col-10 {
|
|
-webkit-box-flex: 0;
|
|
-ms-flex: 0 0 83.33333%;
|
|
flex: 0 0 83.33333%;
|
|
max-width: 83.33333%;
|
|
}
|
|
.col-11 {
|
|
-webkit-box-flex: 0;
|
|
-ms-flex: 0 0 91.66667%;
|
|
flex: 0 0 91.66667%;
|
|
max-width: 91.66667%;
|
|
}
|
|
.col-12 {
|
|
-webkit-box-flex: 0;
|
|
-ms-flex: 0 0 100%;
|
|
flex: 0 0 100%;
|
|
max-width: 100%;
|
|
}
|
|
.g-col-1 {
|
|
grid-column: span 1;
|
|
}
|
|
.g-col-2 {
|
|
grid-column: span 2;
|
|
}
|
|
.g-col-3 {
|
|
grid-column: span 3;
|
|
}
|
|
.g-col-4 {
|
|
grid-column: span 4;
|
|
}
|
|
.g-col-5 {
|
|
grid-column: span 5;
|
|
}
|
|
.g-col-6 {
|
|
grid-column: span 6;
|
|
}
|
|
.g-col-7 {
|
|
grid-column: span 7;
|
|
}
|
|
.g-col-8 {
|
|
grid-column: span 8;
|
|
}
|
|
.g-col-9 {
|
|
grid-column: span 9;
|
|
}
|
|
.g-col-10 {
|
|
grid-column: span 10;
|
|
}
|
|
.g-col-11 {
|
|
grid-column: span 11;
|
|
}
|
|
.g-col-12 {
|
|
grid-column: span 12;
|
|
}
|
|
.g-sm {
|
|
--grid-gutter-x: 0.5rem;
|
|
--grid-gutter-y: 0.5rem;
|
|
}
|
|
.g-md {
|
|
--grid-gutter-x: 1rem;
|
|
--grid-gutter-y: 1rem;
|
|
}
|
|
.g-lg {
|
|
--grid-gutter-x: 2rem;
|
|
--grid-gutter-y: 2rem;
|
|
}
|
|
}
|
|
|
|
.grid {
|
|
display: -ms-grid;
|
|
display: grid;
|
|
-ms-grid-columns: (1fr)[12];
|
|
grid-template-columns: repeat(12, 1fr);
|
|
gap: var(--grid-gutter-x) var(--grid-gutter-y);
|
|
}
|
|
|
|
.filter {
|
|
display: -webkit-box;
|
|
display: -ms-flexbox;
|
|
display: flex;
|
|
-webkit-box-orient: vertical;
|
|
-webkit-box-direction: normal;
|
|
-ms-flex-direction: column;
|
|
flex-direction: column;
|
|
gap: 2rem;
|
|
width: 100%;
|
|
}
|
|
|
|
.filter .sec-input {
|
|
display: -webkit-box;
|
|
display: -ms-flexbox;
|
|
display: flex;
|
|
-webkit-box-orient: horizontal;
|
|
-webkit-box-direction: normal;
|
|
-ms-flex-direction: row;
|
|
flex-direction: row;
|
|
-ms-flex-wrap: center;
|
|
flex-wrap: center;
|
|
-webkit-box-pack: start;
|
|
-ms-flex-pack: start;
|
|
justify-content: start;
|
|
-webkit-box-align: center;
|
|
-ms-flex-align: center;
|
|
align-items: center;
|
|
gap: 1.25rem;
|
|
}
|
|
|
|
.filter .sec-input .input-label {
|
|
display: -webkit-box;
|
|
display: -ms-flexbox;
|
|
display: flex;
|
|
-webkit-box-orient: horizontal;
|
|
-webkit-box-direction: normal;
|
|
-ms-flex-direction: row;
|
|
flex-direction: row;
|
|
-ms-flex-wrap: center;
|
|
flex-wrap: center;
|
|
-webkit-box-pack: start;
|
|
-ms-flex-pack: start;
|
|
justify-content: start;
|
|
-webkit-box-align: center;
|
|
-ms-flex-align: center;
|
|
align-items: center;
|
|
font-size: var(--wb-pc-font-size-body-xsmall);
|
|
color: var(--wb-color-light-gray-70);
|
|
font-weight: var(--wb-typo-font-weight-bold);
|
|
text-align: left;
|
|
}
|
|
|
|
.filter .sec-input .input-label.w-lg {
|
|
-webkit-box-flex: 100px;
|
|
-ms-flex: 100px 0 0px;
|
|
flex: 100px 0 0;
|
|
}
|
|
|
|
.filter .sec-input .input-label.w-m {
|
|
-webkit-box-flex: 70px;
|
|
-ms-flex: 70px 0 0px;
|
|
flex: 70px 0 0;
|
|
}
|
|
|
|
.filter .sec-input .input-label.w-auto {
|
|
-webkit-box-flex: 0;
|
|
-ms-flex: 0;
|
|
flex: 0;
|
|
}
|
|
|
|
.filter .sec-input .input-group {
|
|
display: -webkit-box;
|
|
display: -ms-flexbox;
|
|
display: flex;
|
|
-webkit-box-align: center;
|
|
-ms-flex-align: center;
|
|
align-items: center;
|
|
gap: .75rem;
|
|
height: 100%;
|
|
-webkit-box-flex: 1;
|
|
-ms-flex: 1;
|
|
flex: 1;
|
|
}
|
|
|
|
.filter .sec-input .input-group .input {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
.filter .sec-input .input-group .input input {
|
|
font-size: var(--wb-pc-font-size-body-small);
|
|
height: 100%;
|
|
}
|
|
|
|
.filter .sec-input .input-group .input span {
|
|
display: -webkit-box;
|
|
display: -ms-flexbox;
|
|
display: flex;
|
|
-webkit-box-orient: horizontal;
|
|
-webkit-box-direction: normal;
|
|
-ms-flex-direction: row;
|
|
flex-direction: row;
|
|
-ms-flex-wrap: center;
|
|
flex-wrap: center;
|
|
-webkit-box-pack: start;
|
|
-ms-flex-pack: start;
|
|
justify-content: start;
|
|
-webkit-box-align: center;
|
|
-ms-flex-align: center;
|
|
align-items: center;
|
|
height: 100%;
|
|
font-size: var(--wb-pc-font-size-body-small);
|
|
color: var(--wb-color-light-gray-70);
|
|
border-right: none;
|
|
border-left: none;
|
|
}
|
|
|
|
.filter .btn-wrap {
|
|
display: -webkit-box;
|
|
display: -ms-flexbox;
|
|
display: flex;
|
|
-webkit-box-pack: end;
|
|
-ms-flex-pack: end;
|
|
justify-content: flex-end;
|
|
gap: 0.5rem;
|
|
height: 100%;
|
|
}
|
|
|
|
.filter .btn-wrap button {
|
|
-ms-flex-negative: 0;
|
|
flex-shrink: 0;
|
|
-webkit-box-flex: 1;
|
|
-ms-flex: 1;
|
|
flex: 1;
|
|
}
|
|
|
|
.k-list-md .k-list-item, .k-list-md .k-list-optionlabel {
|
|
font-size: var(--wb-pc-font-size-body-small);
|
|
}
|
|
|
|
table th, table td {
|
|
font-size: 1.25rem !important;
|
|
}
|
|
|
|
:root {
|
|
--wb-font-family-base: var(--wb-typo-font-type);
|
|
--wb-font-size-base: 62.5%;
|
|
--wb-line-height-none: 1;
|
|
--wb-line-height-base: 1.5;
|
|
--wb-letter-spacing-none: var(--wb-typo-letter-spacing-0);
|
|
--wb-letter-spacing-wide: var(--wb-typo-letter-spacing-1);
|
|
--wb-font-weight-regular: 400;
|
|
--wb-font-weight-bold: 700;
|
|
--wb-transition-base: 0.4s ease-in-out;
|
|
--wb-transition-fade: opacity 0.4s linear;
|
|
--wb-transition-collapse: max-height 0.4s ease;
|
|
--wb-transition-collapse-width: width 0.4s ease;
|
|
--wb-contents-size: 1200px;
|
|
--wb-contents-padding-x: 28px;
|
|
--wb-contents-wrap-size: 1256px;
|
|
--wb-box-shadow-outline: 0 0 0 0.4rem var(--wb-light-color-border-primary);
|
|
--wb-box-shadow-outline-inset: inset 0 0 0 0.2rem var(--wb-light-color-border-primary);
|
|
--wb-zoom-small: 0.9;
|
|
--wb-zoom-medium: 1;
|
|
--wb-zoom-large: 1.1;
|
|
--wb-zoom-xlarge: 1.3;
|
|
--wb-zoom-xxlarge: 1.5;
|
|
--wb-font-underline-offset: 0.3rem;
|
|
--wb-icon--size-xsmall: var(--wb-size-height-2);
|
|
--wb-icon--size-small: var(--wb-size-height-2);
|
|
--wb-icon--size-medium: var(--wb-size-height-3);
|
|
--wb-icon--size-large: var(--wb-size-height-4);
|
|
--wb-icon--size-xlarge: var(--wb-size-height-4);
|
|
}
|
|
|
|
[data-wb-mode="high-contrast"] :root {
|
|
--wb-box-shadow-outline: 0 0 0 0.4rem var(--wb-high-contrast-color-border-primary);
|
|
--wb-box-shadow-outline-inset: inset 0 0 0 0.2rem var(--wb-high-contrast-color-border-primary);
|
|
}
|
|
|
|
.svg-icon.ico-angle {
|
|
-webkit-mask-repeat: no-repeat;
|
|
-webkit-mask-position: center center;
|
|
-webkit-mask-size: contain;
|
|
mask-repeat: no-repeat;
|
|
mask-position: center center;
|
|
mask-size: contain;
|
|
-webkit-mask-image: url(../../dist/images/ico-angle.svg);
|
|
mask-image: url(../../dist/images/ico-angle.svg);
|
|
-webkit-mask-image: none;
|
|
mask-image: none;
|
|
background-image: url(../../dist/images/ico-angle.svg);
|
|
background-color: transparent !important;
|
|
background-size: contain;
|
|
background-position: center;
|
|
background-repeat: no-repeat;
|
|
-webkit-mask: none;
|
|
mask: none;
|
|
}
|
|
|
|
.svg-icon.ico-angle.disabled {
|
|
-webkit-mask-repeat: no-repeat;
|
|
-webkit-mask-position: center center;
|
|
-webkit-mask-size: contain;
|
|
mask-repeat: no-repeat;
|
|
mask-position: center center;
|
|
mask-size: contain;
|
|
-webkit-mask-image: url(../../dist/images/ico_angle_disabled.svg);
|
|
mask-image: url(../../dist/images/ico_angle_disabled.svg);
|
|
-webkit-mask-image: none;
|
|
mask-image: none;
|
|
background-image: url(../../dist/images/ico_angle_disabled.svg);
|
|
background-color: transparent !important;
|
|
background-size: contain;
|
|
background-position: center;
|
|
background-repeat: no-repeat;
|
|
-webkit-mask: none;
|
|
mask: none;
|
|
}
|
|
|
|
.svg-icon.ico-angle.up {
|
|
-webkit-transform: rotate(180deg);
|
|
transform: rotate(180deg);
|
|
}
|
|
|
|
.svg-icon.ico-angle.left {
|
|
-webkit-transform: rotate(90deg);
|
|
transform: rotate(90deg);
|
|
}
|
|
|
|
.svg-icon.ico-angle.right {
|
|
-webkit-transform: rotate(-90deg);
|
|
transform: rotate(-90deg);
|
|
}
|
|
|
|
.svg-icon.ico-user {
|
|
-webkit-mask-repeat: no-repeat;
|
|
-webkit-mask-position: center center;
|
|
-webkit-mask-size: contain;
|
|
mask-repeat: no-repeat;
|
|
mask-position: center center;
|
|
mask-size: contain;
|
|
-webkit-mask-image: url(../../dist/images/ico-user.svg);
|
|
mask-image: url(../../dist/images/ico-user.svg);
|
|
-webkit-mask-image: none;
|
|
mask-image: none;
|
|
background-image: url(../../dist/images/ico-user.svg);
|
|
background-color: transparent !important;
|
|
background-size: contain;
|
|
background-position: center;
|
|
background-repeat: no-repeat;
|
|
-webkit-mask: none;
|
|
mask: none;
|
|
}
|
|
|
|
.svg-icon.ico-mark {
|
|
-webkit-mask-repeat: no-repeat;
|
|
-webkit-mask-position: center center;
|
|
-webkit-mask-size: contain;
|
|
mask-repeat: no-repeat;
|
|
mask-position: center center;
|
|
mask-size: contain;
|
|
-webkit-mask-image: url(../../dist/images/ico-mark.svg);
|
|
mask-image: url(../../dist/images/ico-mark.svg);
|
|
-webkit-mask-image: none;
|
|
mask-image: none;
|
|
background-image: url(../../dist/images/ico-mark.svg);
|
|
background-color: transparent !important;
|
|
background-size: contain;
|
|
background-position: center;
|
|
background-repeat: no-repeat;
|
|
-webkit-mask: none;
|
|
mask: none;
|
|
}
|
|
|
|
.svg-icon.ico-title-be {
|
|
-webkit-mask-repeat: no-repeat;
|
|
-webkit-mask-position: center center;
|
|
-webkit-mask-size: contain;
|
|
mask-repeat: no-repeat;
|
|
mask-position: center center;
|
|
mask-size: contain;
|
|
-webkit-mask-image: url(../../dist/images/ico-title-be.svg);
|
|
mask-image: url(../../dist/images/ico-title-be.svg);
|
|
-webkit-mask-image: none;
|
|
mask-image: none;
|
|
background-image: url(../../dist/images/ico-title-be.svg);
|
|
background-color: transparent !important;
|
|
background-size: contain;
|
|
background-position: center;
|
|
background-repeat: no-repeat;
|
|
-webkit-mask: none;
|
|
mask: none;
|
|
}
|
|
|
|
.svg-icon.ico-menu01 {
|
|
-webkit-mask-repeat: no-repeat;
|
|
-webkit-mask-position: center center;
|
|
-webkit-mask-size: contain;
|
|
mask-repeat: no-repeat;
|
|
mask-position: center center;
|
|
mask-size: contain;
|
|
-webkit-mask-image: url(../../dist/images/ico-menu01.svg);
|
|
mask-image: url(../../dist/images/ico-menu01.svg);
|
|
-webkit-mask-image: none;
|
|
mask-image: none;
|
|
background-image: url(../../dist/images/ico-menu01.svg);
|
|
background-color: transparent !important;
|
|
background-size: contain;
|
|
background-position: center;
|
|
background-repeat: no-repeat;
|
|
-webkit-mask: none;
|
|
mask: none;
|
|
}
|
|
|
|
.svg-icon.ico-menu02 {
|
|
-webkit-mask-repeat: no-repeat;
|
|
-webkit-mask-position: center center;
|
|
-webkit-mask-size: contain;
|
|
mask-repeat: no-repeat;
|
|
mask-position: center center;
|
|
mask-size: contain;
|
|
-webkit-mask-image: url(../../dist/images/ico-menu02.svg);
|
|
mask-image: url(../../dist/images/ico-menu02.svg);
|
|
-webkit-mask-image: none;
|
|
mask-image: none;
|
|
background-image: url(../../dist/images/ico-menu02.svg);
|
|
background-color: transparent !important;
|
|
background-size: contain;
|
|
background-position: center;
|
|
background-repeat: no-repeat;
|
|
-webkit-mask: none;
|
|
mask: none;
|
|
}
|
|
|
|
.svg-icon.ico-menu03 {
|
|
-webkit-mask-repeat: no-repeat;
|
|
-webkit-mask-position: center center;
|
|
-webkit-mask-size: contain;
|
|
mask-repeat: no-repeat;
|
|
mask-position: center center;
|
|
mask-size: contain;
|
|
-webkit-mask-image: url(../../dist/images/ico-menu03.svg);
|
|
mask-image: url(../../dist/images/ico-menu03.svg);
|
|
-webkit-mask-image: none;
|
|
mask-image: none;
|
|
background-image: url(../../dist/images/ico-menu03.svg);
|
|
background-color: transparent !important;
|
|
background-size: contain;
|
|
background-position: center;
|
|
background-repeat: no-repeat;
|
|
-webkit-mask: none;
|
|
mask: none;
|
|
}
|
|
|
|
.svg-icon.ico-menu04 {
|
|
-webkit-mask-repeat: no-repeat;
|
|
-webkit-mask-position: center center;
|
|
-webkit-mask-size: contain;
|
|
mask-repeat: no-repeat;
|
|
mask-position: center center;
|
|
mask-size: contain;
|
|
-webkit-mask-image: url(../../dist/images/ico-menu04.svg);
|
|
mask-image: url(../../dist/images/ico-menu04.svg);
|
|
-webkit-mask-image: none;
|
|
mask-image: none;
|
|
background-image: url(../../dist/images/ico-menu04.svg);
|
|
background-color: transparent !important;
|
|
background-size: contain;
|
|
background-position: center;
|
|
background-repeat: no-repeat;
|
|
-webkit-mask: none;
|
|
mask: none;
|
|
}
|
|
|
|
.svg-icon.ico-menu05 {
|
|
-webkit-mask-repeat: no-repeat;
|
|
-webkit-mask-position: center center;
|
|
-webkit-mask-size: contain;
|
|
mask-repeat: no-repeat;
|
|
mask-position: center center;
|
|
mask-size: contain;
|
|
-webkit-mask-image: url(../../dist/images/ico-menu05.svg);
|
|
mask-image: url(../../dist/images/ico-menu05.svg);
|
|
-webkit-mask-image: none;
|
|
mask-image: none;
|
|
background-image: url(../../dist/images/ico-menu05.svg);
|
|
background-color: transparent !important;
|
|
background-size: contain;
|
|
background-position: center;
|
|
background-repeat: no-repeat;
|
|
-webkit-mask: none;
|
|
mask: none;
|
|
}
|
|
|
|
.svg-icon.ico-menu06 {
|
|
-webkit-mask-repeat: no-repeat;
|
|
-webkit-mask-position: center center;
|
|
-webkit-mask-size: contain;
|
|
mask-repeat: no-repeat;
|
|
mask-position: center center;
|
|
mask-size: contain;
|
|
-webkit-mask-image: url(../../dist/images/ico-menu06.svg);
|
|
mask-image: url(../../dist/images/ico-menu06.svg);
|
|
-webkit-mask-image: none;
|
|
mask-image: none;
|
|
background-image: url(../../dist/images/ico-menu06.svg);
|
|
background-color: transparent !important;
|
|
background-size: contain;
|
|
background-position: center;
|
|
background-repeat: no-repeat;
|
|
-webkit-mask: none;
|
|
mask: none;
|
|
}
|
|
|
|
.svg-icon.ico-menu07 {
|
|
-webkit-mask-repeat: no-repeat;
|
|
-webkit-mask-position: center center;
|
|
-webkit-mask-size: contain;
|
|
mask-repeat: no-repeat;
|
|
mask-position: center center;
|
|
mask-size: contain;
|
|
-webkit-mask-image: url(../../dist/images/ico-menu07.svg);
|
|
mask-image: url(../../dist/images/ico-menu07.svg);
|
|
-webkit-mask-image: none;
|
|
mask-image: none;
|
|
background-image: url(../../dist/images/ico-menu07.svg);
|
|
background-color: transparent !important;
|
|
background-size: contain;
|
|
background-position: center;
|
|
background-repeat: no-repeat;
|
|
-webkit-mask: none;
|
|
mask: none;
|
|
}
|
|
|
|
/* wb-drop-wrap */
|
|
.wb-drop-wrap {
|
|
--wb-dropdown--menu-radius: var(--wb-radius-medium4);
|
|
--wb-dropdown--menu-padding: var(--wb-padding-3);
|
|
--wb-dropdown--menu-margin-top: var(--wb-padding-6);
|
|
--wb-dropdown--menu-gap: var(--wb-gap-3);
|
|
--wb-dropdown--list-item-radius: var(--wb-radius-medium2);
|
|
--wb-dropdown--list-item-height: var(--wb-size-height-7);
|
|
--wb-dropdown--list-item-pc-font-size: var(--wb-pc-font-size-navigation-depth-medium);
|
|
--wb-dropdown--list-item-mobile-font-size: var(--wb-mobile-font-size-navigation-depth-medium);
|
|
--wb-dropdown--menu-color-border: var(--wb-light-color-border-gray-light);
|
|
--wb-dropdown--menu-color-surface: var(--wb-light-color-surface-white-subtler);
|
|
--wb-dropdown--menu-color-alpha-shadow: 0 0 0.2rem 0 var(--wb-light-color-alpha-shadow1), 0 0.4rem 0.8rem 0 var(--wb-light-color-alpha-shadow2);
|
|
--wb-dropdown--list-item-color-action-hover: var(--wb-light-color-action-secondary-hover);
|
|
--wb-dropdown--list-item-color-action-pressed: var(--wb-light-color-action-secondary-pressed);
|
|
--wb-dropdown--list-item-color-action-selected: var(--wb-light-color-action-secondary-selected);
|
|
--wb-dropdown--list-item-color-text-selected: var(--wb-light-color-text-secondary);
|
|
display: -webkit-inline-box;
|
|
display: -ms-inline-flexbox;
|
|
display: inline-flex;
|
|
position: relative;
|
|
}
|
|
|
|
.wb-drop-wrap .drop-menu {
|
|
position: absolute;
|
|
top: 100%;
|
|
left: 50%;
|
|
display: none;
|
|
z-index: 6;
|
|
min-width: 13rem;
|
|
border-radius: var(--wb-dropdown--menu-radius);
|
|
padding: var(--wb-dropdown--menu-padding);
|
|
margin-top: var(--wb-dropdown--menu-margin-top);
|
|
background-color: var(--wb-dropdown--menu-color-surface);
|
|
border: 0.1rem solid var(--wb-dropdown--menu-color-border);
|
|
-webkit-box-shadow: var(--wb-dropdown--menu-color-alpha-shadow);
|
|
box-shadow: var(--wb-dropdown--menu-color-alpha-shadow);
|
|
-webkit-transform: translateX(-50%);
|
|
transform: translateX(-50%);
|
|
}
|
|
|
|
.wb-drop-wrap .drop-menu::before {
|
|
content: "";
|
|
width: 1.2rem;
|
|
height: 1.2rem;
|
|
position: absolute;
|
|
bottom: 100%;
|
|
left: 50%;
|
|
display: block;
|
|
margin-bottom: -0.5rem;
|
|
margin-left: -0.6rem;
|
|
-webkit-transform: rotate(-135deg);
|
|
transform: rotate(-135deg);
|
|
background-color: var(--wb-dropdown--menu-color-surface);
|
|
border: 0.1rem solid var(--wb-dropdown--menu-color-border);
|
|
border-top-color: transparent;
|
|
border-left-color: transparent;
|
|
}
|
|
|
|
.wb-drop-wrap .drop-menu .drop-in {
|
|
gap: var(--wb-dropdown--menu-gap);
|
|
position: relative;
|
|
z-index: 1;
|
|
}
|
|
|
|
.wb-drop-wrap .drop-menu .drop-top {
|
|
width: 100%;
|
|
padding: var(--wb-padding-3) var(--wb-padding-6);
|
|
border-bottom: 0.1rem solid var(--wb-dropdown--menu-color-border);
|
|
}
|
|
|
|
.wb-drop-wrap .drop-menu .drop-bottom {
|
|
width: 100%;
|
|
padding: var(--wb-padding-3) 0;
|
|
border-top: 0.1rem solid var(--wb-dropdown--menu-color-border);
|
|
}
|
|
|
|
.wb-drop-wrap .drop-menu .drop-list {
|
|
width: 100%;
|
|
}
|
|
|
|
.wb-drop-wrap .drop-menu .drop-list .item-link {
|
|
width: 100%;
|
|
gap: var(--wb-gap-3);
|
|
padding: 0 var(--wb-padding-6);
|
|
font-size: var(--wb-dropdown--list-item-pc-font-size);
|
|
border-radius: var(--wb-dropdown--list-item-radius);
|
|
height: var(--wb-dropdown--list-item-height);
|
|
background-color: var(--wb-dropdown--menu-color-surface);
|
|
}
|
|
|
|
.wb-drop-wrap .drop-menu .drop-list .item-link .ico-go {
|
|
display: -webkit-inline-box;
|
|
display: -ms-inline-flexbox;
|
|
display: inline-flex;
|
|
width: var(--wb-icon--size-medium);
|
|
height: var(--wb-icon--size-medium);
|
|
background-color: var(--wb-light-color-text-basic);
|
|
forced-color-adjust: none;
|
|
}
|
|
|
|
.wb-drop-wrap .drop-menu .drop-list .item-link:hover {
|
|
background-color: var(--wb-dropdown--list-item-color-action-hover);
|
|
}
|
|
|
|
.wb-drop-wrap .drop-menu .drop-list .item-link:active {
|
|
background-color: var(--wb-dropdown--list-item-color-action-pressed);
|
|
}
|
|
|
|
.wb-drop-wrap .drop-menu .drop-list .item-link.active {
|
|
font-weight: var(--wb-font-weight-bold);
|
|
color: var(--wb-dropdown--list-item-color-text-selected);
|
|
background-color: var(--wb-dropdown--list-item-color-action-selected);
|
|
}
|
|
|
|
.wb-drop-wrap.drop-left .drop-menu {
|
|
left: 0;
|
|
right: unset;
|
|
-webkit-transform: none;
|
|
transform: none;
|
|
}
|
|
|
|
.wb-drop-wrap.drop-left .drop-menu::before {
|
|
left: 2.4rem;
|
|
margin-left: 0;
|
|
}
|
|
|
|
.wb-drop-wrap.drop-right .drop-menu {
|
|
left: unset;
|
|
right: 0;
|
|
-webkit-transform: none;
|
|
transform: none;
|
|
}
|
|
|
|
.wb-drop-wrap.drop-right .drop-menu::before {
|
|
left: unset;
|
|
right: 2.4rem;
|
|
}
|
|
|
|
[data-wb-mode="high-contrast"] {
|
|
/* wb-drop-wrap */
|
|
}
|
|
|
|
[data-wb-mode="high-contrast"] .wb-drop-wrap {
|
|
--wb-dropdown--menu-color-border: var(--wb-high-contrast-color-border-gray-light);
|
|
--wb-dropdown--menu-color-surface: var(--wb-high-contrast-color-surface-white-subtler);
|
|
--wb-dropdown--menu-color-alpha-shadow: 0 0 0.2rem 0 var(--wb-high-contrast-color-alpha-shadow1), 0 0.4rem 0.8rem 0 var(--wb-high-contrast-color-alpha-shadow2);
|
|
--wb-dropdown--list-item-color-action-hover: var(--wb-high-contrast-color-action-secondary-hover);
|
|
--wb-dropdown--list-item-color-action-pressed: var(--wb-high-contrast-color-action-secondary-pressed);
|
|
--wb-dropdown--list-item-color-action-selected: var(--wb-high-contrast-color-action-secondary-selected);
|
|
--wb-dropdown--list-item-color-text-selected: var(--wb-high-contrast-color-text-secondary);
|
|
}
|
|
|
|
[data-wb-mode="high-contrast"] .wb-drop-wrap .drop-list .item-link .ico-go {
|
|
display: -webkit-inline-box;
|
|
display: -ms-inline-flexbox;
|
|
display: inline-flex;
|
|
width: var(--wb-icon--size-medium);
|
|
height: var(--wb-icon--size-medium);
|
|
background-color: var(--wb-high-contrast-color-text-basic);
|
|
forced-color-adjust: none;
|
|
}
|
|
|
|
.menu {
|
|
height: 100%;
|
|
background-color: #052b57;
|
|
}
|
|
|
|
.menu .menu-container {
|
|
-webkit-box-align: start;
|
|
-ms-flex-align: start;
|
|
align-items: flex-start;
|
|
-ms-flex-item-align: stretch;
|
|
align-self: stretch;
|
|
background-image: none;
|
|
-webkit-column-gap: 10px;
|
|
column-gap: 10px;
|
|
display: -webkit-box;
|
|
display: -ms-flexbox;
|
|
display: flex;
|
|
-webkit-box-align: center;
|
|
-ms-flex-align: center;
|
|
align-items: center;
|
|
background-image: none;
|
|
-webkit-box-sizing: border-box;
|
|
box-sizing: border-box;
|
|
-webkit-box-orient: vertical;
|
|
-webkit-box-direction: normal;
|
|
-ms-flex-direction: column;
|
|
flex-direction: column;
|
|
padding-bottom: 32px;
|
|
padding-top: 32px;
|
|
row-gap: 24px;
|
|
}
|
|
|
|
.group {
|
|
left: 15.58px;
|
|
position: absolute;
|
|
top: 15.58px;
|
|
}
|
|
|
|
.menu-item-container {
|
|
position: relative;
|
|
-webkit-box-align: center;
|
|
-ms-flex-align: center;
|
|
align-items: center;
|
|
border-bottom-left-radius: 8px;
|
|
border-bottom-right-radius: 8px;
|
|
border-top-left-radius: 8px;
|
|
border-top-right-radius: 8px;
|
|
-webkit-box-sizing: border-box;
|
|
box-sizing: border-box;
|
|
display: -webkit-box;
|
|
display: -ms-flexbox;
|
|
display: flex;
|
|
-webkit-box-orient: vertical;
|
|
-webkit-box-direction: normal;
|
|
-ms-flex-direction: column;
|
|
flex-direction: column;
|
|
-webkit-box-pack: center;
|
|
-ms-flex-pack: center;
|
|
justify-content: center;
|
|
padding-bottom: 12px;
|
|
padding-left: 4px;
|
|
padding-right: 4px;
|
|
padding-top: 12px;
|
|
row-gap: 0px;
|
|
}
|
|
|
|
.menu-item-container.active .menu-sub {
|
|
display: block;
|
|
opacity: 1;
|
|
}
|
|
|
|
.menu-item-container:hover {
|
|
background-color: rgba(255, 255, 255, 0.1);
|
|
}
|
|
|
|
.menu-item-container:focus {
|
|
background-color: rgba(255, 255, 255, 0.25);
|
|
}
|
|
|
|
.menu-item-container .menu-sub {
|
|
position: absolute;
|
|
top: 0;
|
|
right: -234px;
|
|
background: #fff;
|
|
-webkit-box-shadow: 0px 8px 16px 0 rgba(0, 0, 0, 0.12), 0px 0px 2px 0 rgba(0, 0, 0, 0.08);
|
|
box-shadow: 0px 8px 16px 0 rgba(0, 0, 0, 0.12), 0px 0px 2px 0 rgba(0, 0, 0, 0.08);
|
|
border-radius: 0 4px 4px 0;
|
|
padding: 24px;
|
|
z-index: 9;
|
|
width: 21.875rem;
|
|
display: none;
|
|
-webkit-transition: max-height 0.3s ease, opacity 0.3s ease;
|
|
transition: max-height 0.3s ease, opacity 0.3s ease;
|
|
opacity: 0;
|
|
}
|
|
|
|
.menu-item-container .menu-sub .container {
|
|
display: -ms-grid;
|
|
display: grid;
|
|
-ms-grid-columns: (minmax(45%, auto))[auto-fill];
|
|
grid-template-columns: repeat(auto-fill, minmax(45%, auto));
|
|
gap: 12px;
|
|
}
|
|
|
|
.menu-item-container .menu-sub .container li {
|
|
display: -webkit-box;
|
|
display: -ms-flexbox;
|
|
display: flex;
|
|
-webkit-box-orient: vertical;
|
|
-webkit-box-direction: normal;
|
|
-ms-flex-direction: column;
|
|
flex-direction: column;
|
|
gap: 8px;
|
|
-webkit-box-flex: 1;
|
|
-ms-flex: 1 1 50%;
|
|
flex: 1 1 50%;
|
|
}
|
|
|
|
.menu-item-container .menu-sub .container li .element-2-depth {
|
|
border: 1px solid #86aff9;
|
|
border-radius: 4px;
|
|
text-align: center;
|
|
padding: 4px;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.menu-item-container .menu-sub .container li ul li a {
|
|
text-align: center;
|
|
}
|
|
|
|
.menu-item-container .menu-sub .container li ul li a:hover {
|
|
color: #0b50d0;
|
|
}
|
|
|
|
.menu-item-container .menu-sub .container li ul li a:focus {
|
|
color: #052561;
|
|
}
|
|
|
|
.menu-item-container .menu-sub .container li ul li ~ li {
|
|
margin-top: 8px;
|
|
}
|
|
|
|
.wrap .element-1-depth {
|
|
-webkit-box-align: center;
|
|
-ms-flex-align: center;
|
|
align-items: center;
|
|
display: -webkit-box;
|
|
display: -ms-flexbox;
|
|
display: flex;
|
|
-webkit-box-orient: vertical;
|
|
-webkit-box-direction: normal;
|
|
-ms-flex-direction: column;
|
|
flex-direction: column;
|
|
row-gap: 8px;
|
|
}
|
|
|
|
.wrap .menu-item-text {
|
|
color: #b1b8be;
|
|
font-size: 15px;
|
|
font-weight: 700;
|
|
line-height: 150%;
|
|
text-align: center;
|
|
}
|
|
|
|
/* reset */
|
|
html, body {
|
|
position: relative;
|
|
width: 100%;
|
|
height: 100%;
|
|
font-family: var(--wb-font-family-base);
|
|
color: var(--wb-light-color-text-basic);
|
|
font-weight: var(--wb-font-weight-regular);
|
|
line-height: var(--wb-line-height-base);
|
|
word-break: keep-all;
|
|
word-wrap: break-word;
|
|
-webkit-tap-highlight-color: transparent;
|
|
scroll-behavior: smooth;
|
|
}
|
|
|
|
html {
|
|
font-size: var(--wb-font-size-base);
|
|
}
|
|
|
|
body {
|
|
background-color: var(--wb-light-color-background-white);
|
|
font-size: var(--wb-pc-font-size-body-xsmall);
|
|
overflow-x: hidden;
|
|
}
|
|
|
|
[data-wb-mode="high-contrast"] html, [data-wb-mode="high-contrast"] body {
|
|
color: var(--wb-high-contrast-color-text-basic);
|
|
}
|
|
|
|
[data-wb-mode="high-contrast"] body {
|
|
background-color: var(--wb-high-contrast-color-background-white);
|
|
}
|
|
|
|
*:focus {
|
|
outline: 0.2rem solid var(--wb-light-color-border-inverse);
|
|
outline-offset: 0;
|
|
-webkit-box-shadow: var(--wb-box-shadow-outline);
|
|
box-shadow: var(--wb-box-shadow-outline);
|
|
-webkit-transition: outline 0s, -webkit-box-shadow 0s !important;
|
|
transition: outline 0s, -webkit-box-shadow 0s !important;
|
|
transition: outline 0s, box-shadow 0s !important;
|
|
transition: outline 0s, box-shadow 0s, -webkit-box-shadow 0s !important;
|
|
}
|
|
|
|
::-moz-selection {
|
|
background: var(--wb-color-light-secondary-50);
|
|
color: var(--wb-color-light-gray-0);
|
|
}
|
|
|
|
::selection {
|
|
background: var(--wb-color-light-secondary-50);
|
|
color: var(--wb-color-light-gray-0);
|
|
}
|
|
|
|
body,
|
|
div,
|
|
p,
|
|
h1,
|
|
h2,
|
|
h3,
|
|
h4,
|
|
h5,
|
|
h6,
|
|
ul,
|
|
ol,
|
|
li,
|
|
dl,
|
|
dt,
|
|
dd,
|
|
table,
|
|
th,
|
|
td,
|
|
form,
|
|
fieldset,
|
|
legend,
|
|
input,
|
|
textarea,
|
|
a,
|
|
button,
|
|
select,
|
|
ul,
|
|
li,
|
|
span,
|
|
em,
|
|
label,
|
|
:before,
|
|
:after {
|
|
margin: 0;
|
|
padding: 0;
|
|
-webkit-box-sizing: border-box;
|
|
box-sizing: border-box;
|
|
-webkit-text-size-adjust: none;
|
|
font-family: inherit;
|
|
line-height: var(--wb-line-height-base);
|
|
letter-spacing: inherit;
|
|
}
|
|
|
|
pre {
|
|
font-family: inherit;
|
|
}
|
|
|
|
input,
|
|
textarea,
|
|
a,
|
|
button,
|
|
select,
|
|
span,
|
|
label,
|
|
:before,
|
|
:after {
|
|
font-size: inherit;
|
|
font-weight: inherit;
|
|
}
|
|
|
|
h1,
|
|
h2,
|
|
h3,
|
|
h4,
|
|
h5,
|
|
h6,
|
|
strong {
|
|
font-weight: var(--wb-font-weight-bold);
|
|
}
|
|
|
|
article,
|
|
aside,
|
|
details,
|
|
figcaption,
|
|
figure,
|
|
footer,
|
|
header,
|
|
hgroup,
|
|
main,
|
|
menu,
|
|
nav,
|
|
section {
|
|
display: block;
|
|
margin: 0;
|
|
padding: 0;
|
|
-webkit-box-sizing: border-box;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
img,
|
|
fieldset {
|
|
border: 0;
|
|
}
|
|
|
|
fieldset {
|
|
min-width: 100%;
|
|
}
|
|
|
|
img {
|
|
max-width: 100%;
|
|
vertical-align: top;
|
|
}
|
|
|
|
ul,
|
|
ol {
|
|
list-style: none;
|
|
}
|
|
|
|
em,
|
|
address,
|
|
i {
|
|
font-style: normal;
|
|
}
|
|
|
|
a,
|
|
button {
|
|
-webkit-transition: var(--wb-transition-base);
|
|
transition: var(--wb-transition-base);
|
|
}
|
|
|
|
a,
|
|
a:hover,
|
|
a:active,
|
|
a:focus {
|
|
color: inherit;
|
|
text-decoration: none;
|
|
}
|
|
|
|
button,
|
|
input[type="submit"],
|
|
input[type="button"] {
|
|
overflow: visible;
|
|
margin: 0;
|
|
background-color: transparent;
|
|
border: none;
|
|
-webkit-appearance: button;
|
|
cursor: pointer;
|
|
font: inherit;
|
|
color: inherit;
|
|
}
|
|
|
|
button::-moz-focus-inner,
|
|
input::-moz-focus-inner {
|
|
padding: 0;
|
|
border: 0;
|
|
}
|
|
|
|
textarea {
|
|
resize: none;
|
|
}
|
|
|
|
label {
|
|
cursor: pointer;
|
|
}
|
|
|
|
select {
|
|
appearance: none;
|
|
-webkit-appearance: none;
|
|
-moz-appearance: none;
|
|
}
|
|
|
|
input[type="text"],
|
|
input[type="tel"],
|
|
input[type="password"],
|
|
input[type="file"],
|
|
input[type="number"],
|
|
input[type="email"],
|
|
input[type="date"],
|
|
input[type="search"],
|
|
textarea {
|
|
-webkit-box-shadow: none;
|
|
box-shadow: none;
|
|
appearance: none;
|
|
-webkit-appearance: none;
|
|
-moz-appearance: none;
|
|
-webkit-tap-highlight-color: transparent;
|
|
}
|
|
|
|
input[type="number"] {
|
|
-moz-appearance: textfield;
|
|
margin: 0;
|
|
}
|
|
|
|
input[type=number]::-webkit-inner-spin-button,
|
|
input[type=number]::-webkit-outer-spin-button {
|
|
-webkit-appearance: none;
|
|
margin: 0;
|
|
}
|
|
|
|
input[type='text']::-ms-clear {
|
|
display: none;
|
|
}
|
|
|
|
caption {
|
|
position: static !important;
|
|
margin: 0 !important;
|
|
}
|
|
|
|
table {
|
|
table-layout: fixed;
|
|
max-width: none;
|
|
width: auto;
|
|
min-width: 100%;
|
|
border-collapse: collapse;
|
|
}
|
|
|
|
[role="button"] {
|
|
cursor: pointer;
|
|
}
|
|
|
|
.img img {
|
|
min-width: 100%;
|
|
max-width: 100%;
|
|
}
|
|
|
|
.img.bg-img {
|
|
background-size: cover;
|
|
}
|
|
|
|
.blind,
|
|
hr,
|
|
.sr-only,
|
|
legend,
|
|
caption {
|
|
position: absolute !important;
|
|
width: 1px !important;
|
|
height: 1px !important;
|
|
padding: 0 !important;
|
|
margin: -1px !important;
|
|
overflow: hidden !important;
|
|
clip: rect(0, 0, 0, 0) !important;
|
|
white-space: nowrap !important;
|
|
border: 0 !important;
|
|
}
|
|
|
|
.hide {
|
|
display: none !important;
|
|
}
|
|
|
|
.show {
|
|
display: block !important;
|
|
}
|
|
|
|
.al {
|
|
text-align: left !important;
|
|
}
|
|
|
|
.ac {
|
|
text-align: center !important;
|
|
}
|
|
|
|
.ar {
|
|
text-align: right !important;
|
|
}
|
|
|
|
.underline {
|
|
text-decoration: underline;
|
|
text-underline-offset: var(--wb-font-underline-offset);
|
|
}
|
|
|
|
.break-all {
|
|
word-break: break-all;
|
|
}
|
|
|
|
.svg-icon {
|
|
display: -webkit-inline-box;
|
|
display: -ms-inline-flexbox;
|
|
display: inline-flex;
|
|
width: var(--wb-icon--size-large);
|
|
height: var(--wb-icon--size-large);
|
|
background-color: var(--wb-light-color-text-basic);
|
|
forced-color-adjust: none;
|
|
}
|
|
|
|
.svg-icon.pure {
|
|
display: -webkit-inline-box;
|
|
display: -ms-inline-flexbox;
|
|
display: inline-flex;
|
|
width: var(--wb-icon--size-large);
|
|
height: var(--wb-icon--size-large);
|
|
background-color: var(--wb-light-color-text-basic);
|
|
background-color: transparent !important;
|
|
forced-color-adjust: none;
|
|
}
|
|
|
|
.inner {
|
|
max-width: var(--wb-contents-wrap-size);
|
|
padding-left: var(--wb-contents-padding-x);
|
|
padding-right: var(--wb-contents-padding-x);
|
|
}
|
|
|
|
@media (max-width: 767px) {
|
|
body {
|
|
font-size: var(--wb-mobile-font-size-body-medium);
|
|
}
|
|
.pc-only {
|
|
display: none !important;
|
|
}
|
|
.pc-only.read {
|
|
position: absolute !important;
|
|
width: 1px !important;
|
|
height: 1px !important;
|
|
padding: 0 !important;
|
|
margin: -1px !important;
|
|
overflow: hidden !important;
|
|
clip: rect(0, 0, 0, 0) !important;
|
|
white-space: nowrap !important;
|
|
border: 0 !important;
|
|
}
|
|
.mob-line {
|
|
display: block;
|
|
line-height: inherit;
|
|
}
|
|
}
|
|
/*# sourceMappingURL=common.css.map */ |