/* style-theme v1.0 Created On: 05 January 2022 Last Updated: 09 February 2022 Author: Shriman Sourav Sen Desc: This file containes the major elements/classes responsible to apply the global theme */ @import url("https://use.fontawesome.com/releases/v5.13.0/css/all.css"); html, body { height: 100%; font-family: var(--mawani-font); margin: 0; color: var(--black-high); background-color:var(--system-mawani); --mat-app-background-color: var(--system-mawani); --mat-app-text-color: var(--black-high); --mat-table-header-container-height: 56px; --mat-table-footer-container-height: 48px; --mat-table-row-item-container-height: 48px; /* Applying font family */ --mat-option-label-text-font: var(--mawani-font); --mat-card-title-text-font: var(--mawani-font); --mat-card-subtitle-text-font: var(--mawani-font); --mdc-plain-tooltip-supporting-text-font: var(--mawani-font); --mdc-filled-text-field-label-text-font: var(--mawani-font); --mdc-outlined-text-field-label-text-font: var(--mawani-font); --mat-form-field-container-text-font: var(--mawani-font); --mat-form-field-subscript-text-font: var(--mawani-font); --mat-select-trigger-text-font: var(--mawani-font); --mdc-dialog-subhead-font: var(--mawani-font); --mdc-dialog-supporting-text-font: var(--mawani-font); --mdc-chip-label-text-font: var(--mawani-font); --mdc-form-field-label-text-font: var(--mawani-font); --mdc-form-field-label-text-font: var(--mawani-font); --mdc-slider-label-label-text-font: var(--mawani-font); --mat-menu-item-label-text-font: var(--mawani-font); --mdc-list-list-item-label-text-font: var(--mawani-font); --mdc-list-list-item-supporting-text-font: var(--mawani-font); --mdc-list-list-item-trailing-supporting-text-font: var(--mawani-font); --mat-paginator-container-text-font: var(--mawani-font); --mat-tab-header-label-text-font: var(--mawani-font); --mdc-form-field-label-text-font: var(--mawani-font); --mdc-text-button-label-text-font: var(--mawani-font); --mdc-filled-button-label-text-font: var(--mawani-font); --mdc-outlined-button-label-text-font: var(--mawani-font); --mdc-protected-button-label-text-font: var(--mawani-font); --mdc-extended-fab-label-text-font: var(--mawani-font); --mdc-snackbar-supporting-text-font: var(--mawani-font); --mat-table-header-headline-font: var(--mawani-font); --mat-table-row-item-label-text-font: var(--mawani-font); --mat-table-footer-supporting-text-font: var(--mawani-font); --mat-badge-text-font: var(--mawani-font); --mat-bottom-sheet-container-text-font: var(--mawani-font); --mat-legacy-button-toggle-label-text-font: var(--mawani-font); --mat-standard-button-toggle-label-text-font: var(--mawani-font); --mat-datepicker-calendar-text-font: var(--mawani-font); --mat-expansion-header-text-font: var(--mawani-font); --mat-expansion-container-text-font: var(--mawani-font); --mat-stepper-container-text-font: var(--mawani-font); --mat-stepper-header-label-text-font: var(--mawani-font); --mat-toolbar-title-text-font: var(--mawani-font); --mat-tree-node-text-font: var(--mawani-font); --mat-datepicker-calendar-date-focus-state-background-color: var(--primary-color-30); --mdc-switch-disabled-track-opacity: 1; } /* Typography */ h1, .h1 { font-size: var(--h1-font-size); line-height: var(--h1-line-height); font-weight: var(--h1-font-weight); letter-spacing: var(--h1-letter-spacing); } h2, .h2 { font-size: var(--h2-font-size); line-height: var(--h2-line-height); font-weight: var(--h2-font-weight); letter-spacing: var(--h2-letter-spacing); } h3, .h3 { font-size: var(--h3-font-size); line-height: var(--h3-line-height); font-weight: var(--h3-font-weight); letter-spacing: var(--h3-letter-spacing); } h4, .h4 { font-size: var(--h4-font-size); line-height: var(--h4-line-height); font-weight: var(--h4-font-weight); letter-spacing: var(--h4-letter-spacing); } h5, .h5 { font-size: var(--h5-font-size); line-height: var(--h5-line-height); font-weight: var(--h5-font-weight); letter-spacing: var(--h5-letter-spacing); } h6, .h6 { font-size: var(--h6-font-size); line-height: var(--h6-line-height); font-weight: var(--h6-font-weight); letter-spacing: var(--h6-letter-spacing); } p { font-size: var(--body1-font-size); line-height: var(--body1-line-height); font-weight: var(--body1-font-weight); letter-spacing: var(--body1-letter-spacing); } p.subtitle { font-size: var(--subtitle1-font-size); line-height: var(--subtitle1-line-height); font-weight: var(--subtitle1-font-weight); letter-spacing: var(--subtitle1-letter-spacing); } label { font-size: var(--body2-font-size); line-height: var(--body2-line-height); font-weight: var(--body2-font-weight); letter-spacing: var(--body2-letter-spacing); } label.subtitle { font-size: var(--subtitle2-font-size); line-height: var(--subtitle2-line-height); font-weight: var(--subtitle2-font-weight); letter-spacing: var(--subtitle2-letter-spacing); } label.caption, p.caption { font-size: var(--caption-font-size); line-height: var(--caption-line-height); font-weight: var(--caption-font-weight); letter-spacing: var(--caption-letter-spacing); } p.small-font, label.small-font{ font-size: var(--overline-font-size); line-height: var(--overline-line-height); font-weight: var(--overline-font-weight); letter-spacing: var(--overline-letter-spacing); } a, a:hover{ font-size: var(--link-font-size) !important; line-height: var(--link-line-height); font-weight: var(--link-font-weight); color: var(--accent-dark); text-decoration: none; } /* Text colors */ .text-primary-100 { color: var(--primary-color-100) !important; } .text-primary-90 { color: var(--primary-color-90) !important; } .text-primary-80 { color: var(--primary-color-80) !important; } .text-primary-70 { color: var(--primary-color-70) !important; } .text-primary-60 { color: var(--primary-color-60) !important; } .text-primary-50 { color: var(--primary-color-50) !important; } .text-primary-40 { color: var(--primary-color-40) !important; } .text-primary-30 { color: var(--primary-color-30) !important; } .text-primary-20 { color: var(--primary-color-20) !important; } .text-primary-10 { color: var(--primary-color-10) !important; } .text-secondary-100 { color: var(--secondary-color-100) !important; } .text-secondary-90 { color: var(--secondary-color-90) !important; } .text-secondary-80 { color: var(--secondary-color-80) !important; } .text-secondary-70 { color: var(--secondary-color-70) !important; } .text-secondary-60 { color: var(--secondary-color-60) !important; } .text-secondary-50 { color: var(--secondary-color-50) !important; } .text-secondary-40 { color: var(--secondary-color-40) !important; } .text-secondary-30 { color: var(--secondary-color-30) !important; } .text-secondary-20 { color: var(--secondary-color-20) !important; } .text-secondary-10 { color: var(--secondary-color-10) !important; } .text-tertiary-100 { color: var(--tertiary-color-100) !important; } .text-tertiary-90 { color: var(--tertiary-color-90) !important; } .text-tertiary-80 { color: var(--tertiary-color-80) !important; } .text-tertiary-70 { color: var(--tertiary-color-70) !important; } .text-tertiary-60 { color: var(--tertiary-color-60) !important; } .text-tertiary-50 { color: var(--tertiary-color-50) !important; } .text-tertiary-40 { color: var(--tertiary-color-40) !important; } .text-tertiary-30 { color: var(--tertiary-color-30) !important; } .text-tertiary-20 { color: var(--tertiary-color-20) !important; } .text-tertiary-10 { color: var(--tertiary-color-10) !important; } .text-accent-high { color: var(--accent-dark) !important; } .text-accent-medium { color: var(--accent-medium) !important; } .text-accent-light { color: var(--accent-light) !important; } .text-success-high { color: var(--success-dark) !important; } .text-success-medium { color: var(--success-medium) !important; } .text-success-light { color: var(--success-light) !important; } .text-danger-high { color: var(--error-dark) !important; } .text-danger-medium { color: var(--error-medium) !important; } .text-danger-light { color: var(--error-light) !important; } .text-warning-high { color: var(--warning-dark) !important; } .text-warning-medium { color: var(--warning-medium) !important; } .text-warning-light { color: var(--warning-light) !important; } .text-white { color: var(--white) !important; } .text-black-high{ color: var(--black-high) !important; } .text-black-medium{ color: var(--black-medium) !important; } .text-black-low{ color: var(--black-low) !important; } .text-disabled-high{ color: var(--disabled-high) !important; } .text-disabled-medium{ color: var(--disabled-medium) !important; } .text-disabled-low{ color: var(--disabled-low) !important; } .text-grey-low{ color: var(--grey-low) !important; } .text-grey-medium{ color: var(--grey-medium) !important; } .text-grey-high{ color: var(--grey-high) !important; } /* Background Colors */ .bg-primary-100 { background-color: var(--primary-color-100); } .bg-primary-90 { background-color: var(--primary-color-90); } .bg-primary-80 { background-color: var(--primary-color-80); } .bg-primary-70 { background-color: var(--primary-color-70); } .bg-primary-60 { background-color: var(--primary-color-60); } .bg-primary-50 { background-color: var(--primary-color-50); } .bg-primary-40 { background-color: var(--primary-color-40); } .bg-primary-30 { background-color: var(--primary-color-30); } .bg-primary-20 { background-color: var(--primary-color-20); } .bg-primary-10 { background-color: var(--primary-color-10); } .bg-secondary-100 { background-color: var(--secondary-color-100); } .bg-secondary-90 { background-color: var(--secondary-color-90); } .bg-secondary-80 { background-color: var(--secondary-color-80); } .bg-secondary-70 { background-color: var(--secondary-color-70); } .bg-secondary-60 { background-color: var(--secondary-color-60); } .bg-secondary-50 { background-color: var(--secondary-color-50); } .bg-secondary-40 { background-color: var(--secondary-color-40); } .bg-secondary-30 { background-color: var(--secondary-color-30); } .bg-secondary-20 { background-color: var(--secondary-color-20); } .bg-secondary-10 { background-color: var(--secondary-color-10); } .bg-tertiary-100 { background-color: var(--tertiary-color-100); } .bg-tertiary-90 { background-color: var(--tertiary-color-90); } .bg-tertiary-80 { background-color: var(--tertiary-color-80); } .bg-tertiary-70 { background-color: var(--tertiary-color-70); } .bg-tertiary-60 { background-color: var(--tertiary-color-60); } .bg-tertiary-50 { background-color: var(--tertiary-color-50); } .bg-tertiary-40 { background-color: var(--tertiary-color-40); } .bg-tertiary-30 { background-color: var(--tertiary-color-30); } .bg-tertiary-20 { background-color: var(--tertiary-color-20); } .bg-tertiary-10 { background-color: var(--tertiary-color-10); } .bg-accent-high { background-color: var(--accent-dark); } .bg-accent-medium { background-color: var(--accent-medium); } .bg-accent-light { background-color: var(--accent-light); } .bg-success-high { background-color: var(--success-dark); } .bg-success-medium { background-color: var(--success-medium); } .bg-success-light { background-color: var(--success-light); } .bg-danger-high { background-color: var(--error-dark); } .bg-danger-medium { background-color: var(--error-medium); } .bg-danger-light { background-color: var(--error-light); } .bg-warning-high { background-color: var(--warning-dark); } .bg-warning-medium { background-color: var(--warning-medium); } .bg-warning-light { background-color: var(--warning-light); } .bg-white { background-color: var(--white); } .bg-black-high{ background-color: var(--black-high); } .bg-black-medium{ background-color: var(--black-medium); } .bg-black-low{ background-color: var(--black-low); } .bg-disabled-high{ background-color: var(--disabled-high); } .bg-disabled-medium{ background-color: var(--disabled-medium); } .bg-disabled-low{ background-color: var(--disabled-low); } .bg-grey-low{ background-color: var(--grey-low); } .bg-grey-medium{ background-color: var(--grey-medium); } .bg-grey-high{ background-color: var(--grey-high); } /* Border Colors */ .border-blank{ border: 1px solid transparent; } .border-primary-100 { border-color: var(--primary-color-100); } .border-primary-90 { border-color: var(--primary-color-90); } .border-primary-80 { border-color: var(--primary-color-80); } .border-primary-70 { border-color: var(--primary-color-70); } .border-primary-60 { border-color: var(--primary-color-60); } .border-primary-50 { border-color: var(--primary-color-50); } .border-primary-40 { border-color: var(--primary-color-40); } .border-primary-30 { border-color: var(--primary-color-30); } .border-primary-20 { border-color: var(--primary-color-20); } .border-primary-10 { border-color: var(--primary-color-10); } .border-secondary-100 { border-color: var(--secondary-color-100); } .border-secondary-90 { border-color: var(--secondary-color-90); } .border-secondary-80 { border-color: var(--secondary-color-80); } .border-secondary-70 { border-color: var(--secondary-color-70); } .border-secondary-60 { border-color: var(--secondary-color-60); } .border-secondary-50 { border-color: var(--secondary-color-50); } .border-secondary-40 { border-color: var(--secondary-color-40); } .border-secondary-30 { border-color: var(--secondary-color-30); } .border-secondary-20 { border-color: var(--secondary-color-20); } .border-secondary-10 { border-color: var(--secondary-color-10); } .border-tertiary-100 { border-color: var(--tertiary-color-100); } .border-tertiary-90 { border-color: var(--tertiary-color-90); } .border-tertiary-80 { border-color: var(--tertiary-color-80); } .border-tertiary-70 { border-color: var(--tertiary-color-70); } .border-tertiary-60 { border-color: var(--tertiary-color-60); } .border-tertiary-50 { border-color: var(--tertiary-color-50); } .border-tertiary-40 { border-color: var(--tertiary-color-40); } .border-tertiary-30 { border-color: var(--tertiary-color-30); } .border-tertiary-20 { border-color: var(--tertiary-color-20); } .border-tertiary-10 { border-color: var(--tertiary-color-10); } .border-accent-high { border-color: var(--accent-dark); } .border-accent-medium { border-color: var(--accent-medium); } .border-accent-light { border-color: var(--accent-light); } .border-success-high { border-color: var(--success-dark); } .border-success-medium { border-color: var(--success-medium); } .border-success-light { border-color: var(--success-light); } .border-danger-high { border-color: var(--error-dark); } .border-danger-medium { border-color: var(--error-medium); } .border-danger-light { border-color: var(--error-light); } .border-warning-high { border-color: var(--warning-dark); } .border-warning-medium { border-color: var(--warning-medium); } .border-warning-light { border-color: var(--warning-light); } .border-white { border-color: var(--white); } .border-black-high{ border-color: var(--black-high); } .border-black-medium{ border-color: var(--black-medium); } .border-black-low{ border-color: var(--black-low); } .border-disabled-high{ color: var(--disabled-high); } .border-disabled-medium{ border-color: var(--disabled-medium); } .border-disabled-low{ border-color: var(--disabled-low); } .border-grey-low{ border-color: var(--grey-low); } .border-grey-medium{ border-color: var(--grey-medium); } .border-grey-high{ border-color: var(--grey-high); } /* Border Styles */ .border-solid{ border-style: solid; } .border-dashed{ border-style: dashed; } .border-dotted{ border-style: dotted; } /* Border Width */ .border-1{ border-width: 1px; } .border-2{ border-width: 2px; } .border-3{ border-width: 3px; } .border-4{ border-width: 4px; } .border-5{ border-width: 5px; } .border-left-1{ border-left-width: 1px; } .border-left-2{ border-left-width: 2px; } .border-left-3{ border-left-width: 3px; } .border-left-4{ border-left-width: 4px; } .border-left-5{ border-left-width: 5px; } .border-right-1{ border-right-width: 1px; } .border-right-2{ border-right-width: 2px; } .border-right-3{ border-right-width: 3px; } .border-right-4{ border-right-width: 4px; } .border-right-5{ border-right-width: 5px; } .border-top-1{ border-top-width: 1px; } .border-top-2{ border-top-width: 2px; } .border-top-3{ border-top-width: 3px; } .border-top-4{ border-top-width: 4px; } .border-top-5{ border-top-width: 5px; } .border-bottom-1{ border-bottom-width: 1px; } .border-bottom-2{ border-bottom-width: 2px; } .border-bottom-3{ border-bottom-width: 3px; } .border-bottom-4{ border-bottom-width: 4px; } .border-bottom-5{ border-bottom-width: 5px; } /*Status Borders*/ .status-border-success-1{ border-left: 1px solid var(--success-dark)!important; } .status-border-warning-1{ border-left: 1px solid var(--warning-dark)!important; } .status-border-error-1{ border-left: 1px solid var(--error-dark)!important; } .status-border-secondary-1{ border-left: 1px solid var(--black-high)!important; } .status-border-success-2{ border-left: 2px solid var(--success-dark)!important; } .status-border-warning-2{ border-left: 2px solid var(--warning-dark)!important; } .status-border-error-2{ border-left: 2px solid var(--error-dark)!important; } .status-border-secondary-2{ border-left: 2px solid var(--black-high)!important; } .status-border-success-3{ border-left: 3px solid var(--success-dark)!important; } .status-border-warning-3{ border-left: 3px solid var(--warning-dark)!important; } .status-border-error-3{ border-left: 3px solid var(--error-dark)!important; } .status-border-secondary-3{ border-left: 3px solid var(--black-high)!important; } .status-border-success-4{ border-left: 4px solid var(--success-dark)!important; } .status-border-warning-4{ border-left: 4px solid var(--warning-dark)!important; } .status-border-error-4{ border-left: 4px solid var(--error-dark)!important; } .status-border-secondary-4{ border-left: 4px solid var(--black-high)!important; } /* Text Decoration */ .text-decoration-underline { text-decoration: underline; } .text-decoration-none { text-decoration: none; } /* Position Style */ .top-0{ top: 0; } .bottom-0{ bottom: 0; } .left-0{ left: 0; } .right-0{ right: 0; } /* Font Weights */ .font-weight-100{ font-weight: 100; } .font-weight-200{ font-weight: 200; } .font-weight-300{ font-weight: 300; } .font-weight-400{ font-weight: 400; } .font-weight-500{ font-weight: 500; } .font-weight-600{ font-weight: 600; } .font-weight-700{ font-weight: 700; } .font-weight-800{ font-weight: 800; } .font-weight-900{ font-weight: 900; } .font-weight-bold, .text-bold{ font-weight: bold; } body.dpw-ds-theme{ --mat-table-header-container-height: 40px; --mat-table-footer-container-height: 52px; --mat-table-row-item-container-height: 40px; } .dpw-ds-theme { --mat-table-header-container-height: 40px; --mat-table-footer-container-height: 52px; --mat-table-row-item-container-height: 40px; --default-text-color: #0f0f19; --avatar: linear-gradient(90deg, #1e1343, #312a82, #5154b6); --primary-color-100: #1e1450; --primary-color-90: #3e3c90; --primary-color-80: #5154b6; --primary-color-70: #b8b6eb; --primary-color-60: #ececff; --primary-color-50: #0f0f19; --primary-color-40: #3a3a42; --primary-color-30: #6e6e72; --primary-color-20: #d5d5dd; --primary-color-10: #ebebf0; --dpw-system-white: #f5f3f5; --white: #ffffff; --disabled-color: #B6B6B9; /*Not in Design system*/ --secondary-color-100: #ff3c14; --secondary-color-90: #3230be; --secondary-color-80: #00e68c; --secondary-color-70: #ff2261; --secondary-color-60: #1e1450; --primitive-color: #6a1fde; --success-strong: #417b13; --success-medium: #6fd420; --success-low: #e2f6d2; --warning-strong: #e6b50b; --warning-medium: #ffc90c; --warning-low: #fff4ce; --error-strong: #e70000; --error-medium: #ff5f5f; --error-low: #ffdfdf; --dpw-black-medium: #3a3a42; --h-font-family: "Pilat Wide Heavy"; --h1-font-size: 72px; --h1-font-weight: 900; --h1-line-height: 86px; /*80px*/ --h1-letter-spacing: 0.5px; --h2-font-size: 60px; --h2-font-weight: 900; --h2-line-height: 72px; --h2-letter-spacing: 0.5px; --h3-font-size: 48px; --h3-font-weight: 900; --h3-line-height: 58px;/*64px*/ --h3-letter-spacing: 0.5px; --h4-font-size: 40px; --h4-font-weight: 900; --h4-line-height: 48px;/* 52px */ --h4-letter-spacing: 0.5px; --h5-font-size: 36px; --h5-font-weight: 800; --h5-line-height: 40px; --h5-letter-spacing: 0.5px; --h6-font-size: 32px; --h6-font-weight: 900; --h6-line-height: 38px; --h6-letter-spacing: 0.5px; --body-font: "Pilat Regular"; --body-focus-font: "Pilat Demi"; --body-focus-font-weight: 600; /* --body-xs-font: "Pilat Regular"; */ --body-xs-font-size: 10px; --body-xs-font-weight: 400; --body-xs-line-height: 8px; --body-xs-letter-spacing: 0.5px; /* --body-s-font: "Pilat Regular"; */ --body-s-font-size: 12px; --body-s-font-weight: 400; --body-s-line-height: 10px; --body-s-letter-spacing: 0.5px; /* --body-m-font: "Pilat Regular"; */ --body-m-font-size: 14px; --body-m-font-weight: 400; --body-m-line-height: 18px; --body-m-letter-spacing: 0.5px; /* --body-l-font: "Pilat Regular"; */ --body-l-font-size: 16px; --body-l-font-weight: 400; --body-l-line-height: 14px; --body-l-letter-spacing: 0.5px; /* --body-xl-font: "Pilat Regular"; */ --body-xl-font-size: 20px; --body-xl-font-weight: 400; --body-xl-line-height: 18px; --body-xl-letter-spacing: 0.5px; --title-xs-font: "Pilat Regular"; --title-xs-font-size: 12px; --title-xs-font-weight: 400; --title-xs-line-height: 10px; --title-xs-letter-spacing: 0.5px; --title-s-font: "Pilat Demi"; --title-s-font-size: 12px; --title-s-font-weight: 600; --title-s-line-height: 10px; --title-s-letter-spacing: 0.5px; --title-m-font: "Pilat Regular"; --title-m-font-size: 14px; --title-m-font-weight: 400; --title-m-line-height: 12px; --title-m-letter-spacing: 0.5px; --title-l-font: "Pilat Demi"; --title-l-font-size: 14px; --title-l-font-weight: 600; --title-l-line-height: 12px; --title-l-letter-spacing: 0.5px; --title-xl-font: "Pilat Regular"; --title-xl-font-size: 16px; --title-xl-font-weight: 400; --title-xl-line-height: 14px; --title-xl-letter-spacing: 0.5px; --title-xxl-font: "Pilat Demi"; --title-xxl-font-size: 16px; --title-xxl-font-weight: 600; --title-xxl-line-height: 14px; --title-xxl-letter-spacing: 0.5px; --subheading-s-font: "Pilat Wide Heavy"; --subheading-s-font-size: 16px; --subheading-s-font-weight: 900; --subheading-s-line-height: 19px; --subheading-s-letter-spacing: 0.5px; --subheading-m-font: "Pilat Wide Heavy"; --subheading-m-font-size: 20px; --subheading-m-font-weight: 900; --subheading-m-line-height: 24px; --subheading-m-letter-spacing: 0.5px; --subheading-l-font: "Pilat Wide Heavy"; --subheading-l-font-size: 24px; --subheading-l-font-weight: 900; --subheading-l-line-height: 29px; --subheading-l-letter-spacing: 0.5px; --heading-s-font: "Pilat Wide Heavy"; --heading-s-font-size: 28px; --heading-s-font-weight: 900; --heading-s-line-height: 34px; --heading-s-letter-spacing: 0.5px; --heading-m-font: "Pilat Wide Heavy"; --heading-m-font-size: 32px; --heading-m-font-weight: 900; --heading-m-line-height: 38px; --heading-m-letter-spacing: 0.5px; --heading-l-font: "Pilat Wide Heavy"; --heading-l-font-size: 40px; --heading-l-font-weight: 900; --heading-l-line-height: 48px; --heading-l-letter-spacing: 0.5px; --display-s-font: "Pilat Wide Heavy"; --display-s-font-size: 48px; --display-s-font-weight: 900; --display-s-line-height: 58px; --display-s-letter-spacing: 0.5px; --display-m-font: "Pilat Wide Heavy"; --display-m-font-size: 60px; --display-m-font-weight: 900; --display-m-line-height: 72px; --display-m-letter-spacing: 0.5px; --display-l-font: "Pilat Wide Heavy"; --display-l-font-size: 72px; --display-l-font-weight: 900; --display-l-line-height: 86px; --display-l-letter-spacing: 0.5px; --button-s-font: "Pilat Wide Demi"; --button-s-font-size: 12px; --button-s-font-weight: 600; --button-s-line-height: 14px; --button-s-letter-spacing: 0.5px; --button-l-font: "Pilat Wide Demi"; --button-l-font-size: 14px; --button-l-font-weight: 600; --button-l-line-height: 17px; --button-l-letter-spacing: 0.5px; --inline-link-s-font: "Pilat Regular"; --inline-link-s-font-size: 12px; --inline-link-s-font-weight: 400; --inline-link-s-line-height: 10px; --inline-link-s-letter-spacing: 0.5px; --inline-link-m-font: "Pilat Regular"; --inline-link-m-font-size: 14px; --inline-link-m-font-weight: 400; --inline-link-m-line-height: 12px; --inline-link-m-letter-spacing: 0.5px; --inline-link-l-font: "Pilat Regular"; --inline-link-l-font-size: 16px; --inline-link-l-font-weight: 400; --inline-link-l-line-height: 14px; --inline-link-l-letter-spacing: 0.5px; --link-s-font: "Pilat Demi"; --link-s-font-size: 12px; --link-s-font-weight: 600; --link-s-line-height: 10px; --link-s-letter-spacing: 0.5px; --link-m-font: "Pilat Demi"; --link-m-font-size: 14px; --link-m-font-weight: 600; --link-m-line-height: 12px; --link-m-letter-spacing: 0.5px; --link-l-font: "Pilat Demi"; --link-l-font-size: 16px; --link-l-font-weight: 600; --link-l-line-height: 14px; --link-l-letter-spacing: 0.5px; } /* .text-default{ color: var(--default-text-color); } */ /* DPW theme */ .dpw-ds-theme h1 { font-family: var(--h-font-family); font-size: var(--h1-font-size); font-weight: var(--h1-font-weight); line-height: var(--h1-line-height); letter-spacing: var(--h1-letter-spacing); /*Heading 2*/ } .dpw-ds-theme h2 { font-family: var(--h-font-family); font-size: var(--h2-font-size); font-weight: var(--h2-font-weight); line-height: var(--h2-line-height); letter-spacing: var(--h2-letter-spacing); /*Heading 3*/ } .dpw-ds-theme h3 { font-family: var(--h-font-family); font-size: var(--h3-font-size); font-weight: var(--h3-font-weight); line-height: var(--h3-line-height); letter-spacing: var(--h3-letter-spacing); /*Heading 4*/ } .dpw-ds-theme h4 { font-family: var(--h-font-family); font-size: var(--h4-font-size); font-weight: var(--h4-font-weight); line-height: var(--h4-line-height); letter-spacing: var(--h4-letter-spacing); /*Heading 5*/ } .dpw-ds-theme h5 { font-family: var(--h-font-family); font-size: var(--h5-font-size); font-weight: var(--h5-font-weight); line-height: var(--h5-line-height); letter-spacing: var(--h5-letter-spacing); /*Heading 6*/ } .dpw-ds-theme h6 { font-family: var(--h-font-family); font-size: var(--h6-font-size); font-weight: var(--h6-font-weight); line-height: var(--h6-line-height); letter-spacing: var(--h6-letter-spacing); } .dpw-ds-theme .body-xs { font-family: var(--body-font); font-size: var(--body-xs-font-size); font-weight: var(--body-xs-font-weight); line-height: var(--body-xs-line-height); letter-spacing: var(--body-xs-letter-spacing); } .dpw-ds-theme .body-s { font-family: var(--body-font); font-size: var(--body-s-font-size); font-weight: var(--body-s-font-weight); line-height: var(--body-s-line-height); letter-spacing: var(--body-s-letter-spacing); } .dpw-ds-theme .body-s-multiline { line-height: 18px; } .dpw-ds-theme .body-m { font-family: var(--body-font); font-size: var(--body-m-font-size); font-weight: var(--body-m-font-weight); line-height: var(--body-m-line-height); letter-spacing: var(--body-m-letter-spacing); } .dpw-ds-theme .body-l { font-family: var(--body-font); font-size: var(--body-l-font-size); font-weight: var(--body-l-font-weight); line-height: var(--body-l-line-height); letter-spacing: var(--body-l-letter-spacing); } .dpw-ds-theme .body-xl { font-family: var(--body-font); font-size: var(--body-xl-font-size); font-weight: var(--body-xl-font-weight); line-height: var(--body-xl-line-height); letter-spacing: var(--body-xl-letter-spacing); } .dpw-ds-theme .body-focus { font-family: var(--body-focus-font) !important; font-weight: var(--body-focus-font-weight) !important; } .dpw-ds-theme .title-xs { font-family: var(--title-xs-font); font-size: var(--title-xs-font-size); font-weight: var(--title-xs-font-weight); line-height: var(--title-xs-line-height); letter-spacing: var(--title-xs-letter-spacing); } .dpw-ds-theme .title-s { font-family: var(--title-s-font); font-size: var(--title-s-font-size); font-weight: var(--title-s-font-weight); line-height: var(--title-s-line-height); letter-spacing: var(--title-s-letter-spacing); } .dpw-ds-theme .title-m { font-family: var(--title-m-font); font-size: var(--title-m-font-size); font-weight: var(--title-m-font-weight); line-height: 16px; letter-spacing: var(--title-m-letter-spacing); } .dpw-ds-theme .title-l { font-family: var(--title-l-font); font-size: var(--title-l-font-size); font-weight: var(--title-l-font-weight); line-height: var(--title-l-line-height); letter-spacing: var(--title-l-letter-spacing); } .dpw-ds-theme .title-xl { font-family: var(--title-xl-font); font-size: var(--title-xl-font-size); font-weight: var(--title-xl-font-weight); line-height: var(--title-xl-line-height); letter-spacing: var(--title-xl-letter-spacing); } .dpw-ds-theme .title-xxl { font-family: var(--title-xxl-font); font-size: var(--title-xxl-font-size); font-weight: var(--title-xxl-font-weight); line-height: var(--title-xxl-line-height); letter-spacing: var(--title-xxl-letter-spacing); } .dpw-ds-theme .subheading-s { font-family: var(--subheading-s-font); font-size: var(--subheading-s-font-size); font-weight: var(--subheading-s-font-weight); line-height: var(--subheading-s-line-height); letter-spacing: var(--subheading-s-letter-spacing); } .dpw-ds-theme .subheading-m { font-family: var(--subheading-m-font); font-size: var(--subheading-m-font-size); font-weight: var(--subheading-m-font-weight); line-height: var(--subheading-m-line-height); letter-spacing: var(--subheading-m-letter-spacing); } .dpw-ds-theme .subheading-l { font-family: var(--subheading-l-font); font-size: var(--subheading-l-font-size); font-weight: var(--subheading-l-font-weight); line-height: var(--subheading-l-line-height); letter-spacing: var(--subheading-l-letter-spacing); } .dpw-ds-theme .heading-s { font-family: var(--heading-s-font); font-size: var(--heading-s-font-size); font-weight: var(--heading-s-font-weight); line-height: var(--heading-s-line-height); letter-spacing: var(--heading-s-letter-spacing); } .dpw-ds-theme .heading-m { font-family: var(--heading-m-font); font-size: var(--heading-m-font-size); font-weight: var(--heading-m-font-weight); line-height: var(--heading-m-line-height); letter-spacing: var(--heading-m-letter-spacing); } .dpw-ds-theme .heading-l { font-family: var(--heading-l-font); font-size: var(--heading-l-font-size); font-weight: var(--heading-l-font-weight); line-height: var(--heading-l-line-height); letter-spacing: var(--heading-l-letter-spacing); } .dpw-ds-theme .display-s, .dpw-ds-theme .display-m, .dpw-ds-theme .display-l, .dpw-ds-theme .heading-s, .dpw-ds-theme .heading-m, .dpw-ds-theme .heading-l { text-transform: uppercase; } .dpw-ds-theme .display-s { font-family: var(--display-s-font); font-size: var(--display-s-font-size); font-weight: var(--display-s-font-weight); line-height: var(--display-s-line-height); letter-spacing: var(--display-s-letter-spacing); } .dpw-ds-theme .display-m { font-family: var(--display-m-font); font-size: var(--display-m-font-size); font-weight: var(--display-m-font-weight); line-height: var(--display-m-line-height); letter-spacing: var(--display-m-letter-spacing); } .dpw-ds-theme .display-l { font-family: var(--display-l-font); font-size: var(--display-l-font-size); font-weight: var(--display-l-font-weight); line-height: var(--display-l-line-height); letter-spacing: var(--display-l-letter-spacing); } .dpw-ds-theme .button-s { font-family: var(--button-s-font) !important; font-size: var(--button-s-font-size) !important; font-weight: var(--button-s-font-weight) !important; line-height: var(--button-s-line-height) !important; letter-spacing: var(--button-s-letter-spacing) !important; min-height: 36px; } .dpw-ds-theme .button-l { font-family: var(--button-l-font) !important; font-size: var(--button-l-font-size) !important; font-weight: var(--button-l-font-weight) !important; line-height: var(--button-l-line-height) !important; letter-spacing: var(--button-l-letter-spacing) !important; min-height: 44px; } .dpw-ds-theme .inline-link-s { font-family: var(--inline-link-s-font); font-size: var(--inline-link-s-font-size); font-weight: var(--inline-link-s-font-weight); line-height: var(--inline-link-s-line-height); letter-spacing: var(--inline-link-s-letter-spacing); } .dpw-ds-theme .inline-link-m { font-family: var(--inline-link-m-font); font-size: var(--inline-link-m-font-size); font-weight: var(--inline-link-m-font-weight); line-height: var(--inline-link-m-line-height); letter-spacing: var(--inline-link-m-letter-spacing); } .dpw-ds-theme .inline-link-l { font-family: var(--inline-link-l-font); font-size: var(--inline-link-l-font-size); font-weight: var(--inline-link-l-font-weight); line-height: var(--inline-link-l-line-height); letter-spacing: var(--inline-link-l-letter-spacing); } .dpw-ds-theme .inline-link-s.focus, .dpw-ds-theme .inline-link-m.focus, .dpw-ds-theme .inline-link-l.focus, .dpw-ds-theme .link-s.focus, .dpw-ds-theme .link-m.focus, .dpw-ds-theme .link-l.focus { font-family: "Pilat Demi"; font-weight: 600; text-decoration: underline; } .dpw-ds-theme .link-s { font-family: var(--link-s-font); font-size: var(--link-s-font-size); font-weight: var(--link-s-font-weight); line-height: var(--link-s-line-height); letter-spacing: var(--link-s-letter-spacing); } .dpw-ds-theme .link-m { font-family: var(--link-m-font); font-size: var(--link-m-font-size); font-weight: var(--link-m-font-weight); line-height: var(--link-m-line-height); letter-spacing: var(--link-m-letter-spacing); } .dpw-ds-theme .link-l { font-family: var(--link-l-font); font-size: var(--link-l-font-size); font-weight: var(--link-l-font-weight); line-height: var(--link-l-line-height); letter-spacing: var(--link-l-letter-spacing); } @font-face { font-family: "Pilat Wide"; src: url("/fonts/PilatWide-Regular.ttf") format("truetype"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "Pilat Wide Heavy"; src: url("/fonts/PilatWideHeavy.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "Pilat Wide Regular"; font-style: normal; font-weight: normal; src: url("/fonts/PilatWide-Regular.ttf") format("truetype"); font-display: swap; } @font-face { font-family: "Pilat Light"; font-style: normal; font-weight: 300; src: url("/fonts/PilatWide-Light.ttf") format("truetype"); font-display: swap; } @font-face { font-family: "Pilat Demi"; src: url("/fonts/PilatDemi.otf") format("opentype"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "Pilat Wide Demi"; src: url("/fonts/PilatWideDemi.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "Pilat Wide Thin"; src: url("/fonts/PilatWide-Thin.ttf") format("truetype"); font-weight: 600; font-style: normal; font-display: swap; } @font-face { font-family: "Pilat Regular"; src: url("/fonts/PilatRegular.otf") format("opentype"); font-weight: 400; font-style: normal; font-display: swap; } .dpw-ds-theme-wrapper { background-color: var(--primary-color-10) !important; } ::ng-deep.dpw-ds-theme .toast-title { display: flex; align-items: center; } .offcanvas.offcanvas-start { width: 70%; --bs-offcanvas-width: 70%; } .navbar-height { min-height: 64px; align-items: center; } @media (max-width: 744px) { .navbar-height { min-height: 52px; } .bell-icon-notification-popup-overlay { width: 100vw; right: 0 !important; } .dpw-popup { width: 100vw !important; } } @media (min-width: 744px) { .bell-icon-notification-popup-overlay { width: 35vw; } } .language-menu { margin-top: 15px; } .dpw-ds-theme { --lib-logo-image: 120px; /* Icon Styles */ /* Mat Card */ /* TODO(mdc-migration): The following rule targets internal classes of slide-toggle that may no longer apply for the MDC version. */ /* TODO(mdc-migration): The following rule targets internal classes of slide-toggle that may no longer apply for the MDC version. */ /* TODO(mdc-migration): The following rule targets internal classes of slide-toggle that may no longer apply for the MDC version. */ /* TODO(mdc-migration): The following rule targets internal classes of slide-toggle that may no longer apply for the MDC version. */ /* TODO(mdc-migration): The following rule targets internal classes of slide-toggle that may no longer apply for the MDC version. */ /* TODO(mdc-migration): The following rule targets internal classes of slide-toggle that may no longer apply for the MDC version. */ } .dpw-ds-theme .content-wrapper { padding-left: 33px; padding-right: 33px; } .dpw-ds-theme .mat-divider { --mat-divider-color: var(--primary-color-10, #ebebf0); --mat-divider-width: 1px; } .dpw-ds-theme th.mat-mdc-header-cell, .dpw-ds-theme .mat-mdc-table .mat-mdc-header-row { --mat-table-header-headline-font: var(--body-focus-font); --mat-table-header-headline-weight: var(--body-focus-font-weight); --mat-table-header-headline-color: var(--primary-color-50); --mat-table-header-headline-size: var(--body-m-font-size); --mat-table-header-headline-line-height: var(--body-m-line-height); --mat-table-header-headline-tracking: var(--body-m-letter-spacing); font-family: var(--body-focus-font); font-size: var(--body-m-font-size); font-weight: var(--body-focus-font-weight); line-height: var(--body-m-line-height); letter-spacing: var(--body-m-letter-spacing); border-color: var(--primary-color-30); } .dpw-ds-theme table.header-highlight th.mat-mdc-header-cell, .dpw-ds-theme table.header-highlight.mat-mdc-table .mat-mdc-header-row { border-color: var(--primary-color-20); background-color: var(--dpw-system-white); } .dpw-ds-theme .mat-mdc-row, .dpw-ds-theme table .mat-mdc-cell { --mat-table-row-item-label-text-line-height: var(--body-m-line-height); --mat-table-row-item-label-text-size: var(--body-m-font-size); --mat-table-row-item-label-text-weight: var(--body-m-font-weight); --mat-table-row-item-label-text-tracking: var(--body-m-letter-spacing); --mat-table-row-item-label-text-color: var(--primary-color-50); font-family: var(--body-font); font-size: var(--body-m-font-size); font-weight: var(--body-m-font-weight); line-height: var(--body-m-line-height); letter-spacing: var(--body-m-letter-spacing); border-color: var(--primary-color-20); } .dpw-ds-theme .mdc-data-table__row:last-child .mat-mdc-cell { border-bottom: 1px solid var(--primary-color-20); } .dpw-ds-theme th.mat-mdc-header-cell:first-of-type, .dpw-ds-theme td.mat-mdc-cell:first-of-type, .dpw-ds-theme td.mat-mdc-footer-cell:first-of-type { padding-left: 8px; } .dpw-ds-theme th.mat-mdc-header-cell:last-of-type, .dpw-ds-theme td.mat-mdc-cell:last-of-type, .dpw-ds-theme td.mat-mdc-footer-cell:last-of-type { padding-right: 8px; } .dpw-ds-theme table td.mat-mdc-cell, .dpw-ds-theme table th.mat-mdc-header-cell, .dpw-ds-theme table td.mat-mdc-footer-cell { padding: 8px; } .dpw-ds-theme .table-header { padding: 8px 12px; width: 100%; border-bottom: 1px solid var(--primary-color-20); } .dpw-ds-theme .mat-column-checkbox { width: 20px; } @media (min-width: 744px) { .dpw-ds-theme .mat-mdc-row, .dpw-ds-theme table .mat-mdc-cell { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } } @media (max-width: 745px) { .dpw-ds-theme .table-responsive-card .mat-mdc-row { display: flex; flex-direction: row; } .dpw-ds-theme .table-responsive-card .mat-mdc-row .mat-mdc-cell { display: flex; flex: 1 0 0%; flex-direction: column; width: auto; align-items: flex-start; margin-right: 20px; } .dpw-ds-theme .table-responsive-card .mat-mdc-row .mat-mdc-cell .mobile-label { width: 100%; margin-bottom: 8px; font-family: var(--title-m-font); font-size: var(--title-m-font-size); font-weight: var(--title-m-font-weight); line-height: 16px; letter-spacing: var(--title-m-letter-spacing); } .dpw-ds-theme .table-responsive-card .mat-mdc-row .mat-mdc-cell span:not(.mobile-label) { width: 100%; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; font-family: var(--body-font); font-size: var(--body-m-font-size); font-weight: var(--body-m-font-weight); line-height: 16px; letter-spacing: var(--body-m-letter-spacing); } .dpw-ds-theme .table-responsive-card .mat-mdc-row .mat-mdc-cell span { max-width: 100%; color: var(--primary-color-50); } } .dpw-ds-theme .mat-mdc-paginator { border-radius: 0px 0px 4px 4px; background: var(--white); box-shadow: 0px 8px 16px 1px rgba(0, 0, 0, 0.04); } .dpw-ds-theme .mat-mdc-paginator-page-size-label { display: none; } .dpw-ds-theme .mat-mdc-paginator-range-actions{ position: relative; } .dpw-ds-theme .mat-mdc-paginator-range-label { --mat-paginator-container-text-font: var(--body-focus-font); --mat-paginator-container-text-line-height: var(--body-m-line-height); --mat-paginator-container-text-size: var(--body-m-font-size); --mat-paginator-container-text-weight: var(--body-focus-font-weight); --mat-paginator-container-text-tracking: var(--body-m-letter-spacing); font-family: var(--body-focus-font); font-size: var(--body-m-font-size); font-weight: var(--body-focus-font-weight); line-height: var(--body-m-line-height); letter-spacing: var(--body-m-letter-spacing); color: var(--primary-color-50); margin: 0; } .dpw-ds-theme .mat-mdc-paginator .mat-mdc-form-field { padding-top: 0px !important; width: auto; } .dpw-ds-theme .mat-mdc-paginator-container .mdc-text-field--outlined:not( .mdc-text-field--disabled).mdc-text-field--focused .mdc-notched-outline .mdc-notched-outline__leading, .dpw-ds-theme .mat-mdc-paginator-container .mdc-text-field--outlined:not( .mdc-text-field--disabled).mdc-text-field--focused .mdc-notched-outline .mdc-notched-outline__notch, .dpw-ds-theme .mat-mdc-paginator-container .mdc-text-field--outlined:not( .mdc-text-field--disabled).mdc-text-field--focused .mdc-notched-outline .mdc-notched-outline__trailing { --mdc-outlined-text-field-focus-outline-width: 1px; } .dpw-ds-theme .mat-mdc-paginator-container .mdc-text-field--outlined:not(.mdc-text-field--disabled) .mdc-notched-outline .mdc-notched-outline__leading, .dpw-ds-theme .mat-mdc-paginator-container .mdc-text-field--outlined:not(.mdc-text-field--disabled) .mdc-notched-outline .mdc-notched-outline__notch, .dpw-ds-theme .mat-mdc-paginator-container .mdc-text-field--outlined:not(.mdc-text-field--disabled) .mdc-notched-outline .mdc-notched-outline__trailing { --mdc-outlined-text-field-outline-width: 1px; } .dpw-ds-theme .mat-mdc-paginator .mat-mdc-paginator-page-size .mat-mdc-form-field-infix { width: auto; } .dpw-ds-theme .mat-mdc-form-field { padding-top: 30px; --mdc-outlined-text-field-focus-outline-color: var(--primary-color-90); } .dpw-ds-theme .mdc-text-field--filled:not(.mdc-text-field--disabled) .mdc-line-ripple::before { --mdc-filled-text-field-active-indicator-color: var(--primary-color-30); } .dpw-ds-theme .mdc-text-field--filled:not(.mdc-text-field--disabled) .mdc-line-ripple::after { --mdc-filled-text-field-focus-active-indicator-color: var(--primary-color-90); border-bottom-color: var(--primary-color-90); } .dpw-ds-theme .mat-mdc-form-field:not(.compressed) .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .mat-mdc-floating-label { --mat-form-field-container-height: 40px; } .dpw-ds-theme .mat-mdc-form-field:not(.compressed) .mat-mdc-form-field-infix { /* border-top: 0.554em solid transparent !important; */ --mat-form-field-container-vertical-padding: 5px; --mat-form-field-container-height: 40px; } .dpw-ds-theme .mat-mdc-form-field.compressed .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .mat-mdc-floating-label { --mat-form-field-container-height: 32px; } .dpw-ds-theme .mat-mdc-form-field.compressed .mat-mdc-form-field-infix { /* border-top: 0.554em solid transparent !important; */ --mat-form-field-container-vertical-padding: 5px; --mat-form-field-container-height: 32px; } .dpw-ds-theme .mat-mdc-form-field:not(.mat-form-field-invalid) .mdc-floating-label, .dpw-ds-theme .mat-mdc-input-element:not([readonly="true"]), .dpw-ds-theme .mat-mdc-form-field:not(.mat-form-field-invalid) .mat-mdc-select-value-text, .dpw-ds-theme .mat-mdc-form-field:not(.mat-form-field-invalid) .mat-mdc-select-arrow, .dpw-ds-theme .mat-mdc-form-field:not(.mat-form-field-invalid).mat-mdc-select, .dpw-ds-theme .mat-mdc-form-field:not(.mat-form-field-invalid) .mat-mdc-select-trigger { --mdc-outlined-text-field-label-text-color: var(--primary-color-30) !important; --mdc-filled-text-field-label-text-color: var(--primary-color-30) !important; --mat-select-placeholder-text-color: var(--primary-color-30) !important; --mat-select-enabled-arrow-color: var(--primary-color-30) !important; --mat-select-enabled-trigger-text-color: var(--primary-color-30) !important; --mdc-outlined-text-field-input-text-color: var(--primary-color-30) !important; } .dpw-ds-theme .mat-mdc-form-field.mat-focused:not(.mat-form-field-invalid) .mat-mdc-icon-button, .dpw-ds-theme .mat-mdc-form-field.mat-focused:not(.mat-form-field-invalid) .mat-mdc-form-field-icon-suffix .mat-icon, .dpw-ds-theme .mat-mdc-form-field.mat-focused:not(.mat-form-field-invalid) .mat-mdc-form-field-icon-prefix .mat-icon, .dpw-ds-theme .mat-form-field-appearance-outline.mat-focused:not(.mat-form-field-invalid) .mdc-notched-outline > *, .dpw-ds-theme .mat-mdc-form-field.mat-focused:not(.mat-form-field-invalid) .mdc-floating-label { --mdc-outlined-text-field-focus-label-text-color: var(--primary-color-30) !important; --mdc-outlined-text-field-label-text-color: var(--primary-color-30) !important; --mdc-filled-text-field-focus-label-text-color: var(--primary-color-30) !important; --mdc-filled-text-field-label-text-color: var(--primary-color-30) !important; --mat-select-placeholder-text-color: var(--primary-color-30) !important; --mat-select-enabled-arrow-color: var(--primary-color-30) !important; --mat-select-enabled-trigger-text-color: var(--primary-color-30) !important; --mdc-outlined-text-field-input-text-color: var(--primary-color-30) !important; --mdc-filled-text-field-input-text-color: var(--primary-color-30) !important; --mdc-outlined-text-field-outline-color: var(--primary-color-90); border-color: var(--primary-color-90) !important; } .dpw-ds-theme .mat-mdc-floating-label:not(.mdc-floating-label--float-above) { font-family: var(--body-font); font-size: var(--body-m-font-size); font-weight: var(--body-m-font-weight); line-height: var(--body-m-line-height); letter-spacing: var(--body-m-letter-spacing); } .dpw-ds-theme .mat-mdc-text-field-wrapper.mdc-text-field--outlined .mdc-notched-outline--upgraded .mat-mdc-floating-label:not(.mdc-floating-label--float-above) { --mat-mdc-form-field-label-transform: translateY(-58%) translateX(calc(1 * (36px + var(--mat-mdc-form-field-label-offset-x, 0px)))); } .dpw-ds-theme .mat-form-field-appearance-fill .mdc-floating-label--float-above { font-family: var(--title-xs-font); font-size: var(--title-xs-font-size); font-weight: var(--title-xs-font-weight); line-height: var(--title-xs-line-height); letter-spacing: var(--title-xs-letter-spacing); } .dpw-ds-theme .mat-mdc-form-field .mdc-text-field--outlined .mdc-floating-label.mdc-floating-label--float-above { left: 0px !important; transform: translateY(-22px) !important; top: 0px; font-family: var(--body-font); font-size: var(--body-s-font-size); font-weight: var(--body-s-font-weight); line-height: normal !important; letter-spacing: var(--body-s-letter-spacing); } .dpw-ds-theme .mat-mdc-form-field .mdc-notched-outline__notch { border-top: 1px solid var(--primary-color-90); } .dpw-ds-theme .mdc-text-field--outlined { padding-left: 8px; padding-right: 8px; } .dpw-ds-theme .mat-mdc-form-field:not(.mat-form-field-disabled) .mat-mdc-form-field-required-marker::after, .dpw-ds-theme .no-line .mdc-floating-label ._mandatory::after, .dpw-ds-theme .no-line .mdc-floating-label .mandatory::after, .dpw-ds-theme .no-line .mdc-floating-label mat-label ._required::before, .dpw-ds-theme .no-line .mdc-floating-label mat-label .required::before { color: var(--primary-color-30) !important; --mdc-outlined-text-field-disabled-label-text-color: var(--primary-color-30); --mdc-outlined-text-field-label-text-color: var(--primary-color-30); } .dpw-ds-theme .mdc-text-field--outlined.mdc-text-field--disabled .mdc-floating-label, .dpw-ds-theme .mdc-text-field--outlined.mdc-text-field--disabled .mdc-floating-label--float-above, .dpw-ds-theme .mdc-text-field--outlined.mdc-text-field--disabled .mdc-text-field__input { color: #d5d5dd; } .dpw-ds-theme .mat-mdc-form-field .mat-mdc-input-element, .dpw-ds-theme .mat-mdc-form-field .mat-mdc-select-value-text { font-family: var(--body-font); font-size: var(--body-m-font-size) !important; font-weight: var(--body-m-font-weight) !important; line-height: var(--body-m-line-height) !important; letter-spacing: var(--body-m-letter-spacing) !important; } .dpw-ds-theme .mat-mdc-form-field:not(.mat-form-field-disabled) .mat-mdc-input-element, .dpw-ds-theme .mat-mdc-form-field:not(.mat-form-field-disabled) .mat-mdc-select-value-text { color: var(--primary-color-50) !important; } .dpw-ds-theme .disabledField .mdc-line-ripple::before, .dpw-ds-theme .mat-form-field-disabled .mdc-line-ripple::before, .dpw-ds-theme .disabledField .mdc-notched-outline > *, .dpw-ds-theme .mat-form-field-disabled .mdc-notched-outline > * { background-color: var(--white); } .dpw-ds-theme .mat-form-field-invalid .mdc-notched-outline > * { --mdc-outlined-text-field-error-focus-outline-color: var(--error-strong); --mdc-outlined-text-field-focus-outline-width: 2px; --mdc-outlined-text-field-error-hover-outline-color: var(--error-strong); --mdc-outlined-text-field-hover-outline-width: 2px; --mdc-outlined-text-field-error-active-outline-color: var(--error-strong); --mdc-outlined-text-field-active-outline-width: 2px; --mdc-outlined-text-field-error-outline-color: var(--error-strong); --mdc-outlined-text-field-outline-width: 1px; } .dpw-ds-theme .mat-mdc-form-field-subscript-wrapper { color: var(--primary-color-30); } .dpw-ds-theme .mat-mdc-form-field-hint-wrapper, .dpw-ds-theme .mat-mdc-form-field-error-wrapper { padding: 5px 16px 0 3px !important; } .dpw-ds-theme .mat-mdc-form-field-subscript-wrapper, .dpw-ds-theme .mat-mdc-form-field .mat-mdc-form-field-error { --mat-form-field-error-text-color: var(--error-strong); --mat-form-field-subscript-text-font: var(--body-font); --mat-form-field-subscript-text-line-height: var(--body-s-line-height); --mat-form-field-subscript-text-size: var(--body-s-font-size); --mat-form-field-subscript-text-tracking: var(--body-s-letter-spacing); --mat-form-field-subscript-text-weight: var(--body-s-font-weight); font-family: var(--body-font); font-size: var(--body-s-font-size); font-weight: var(--body-s-font-weight); line-height: var(--body-s-line-height); letter-spacing: var(--body-s-letter-spacing); } .dpw-ds-theme .mat-mdc-form-field-icon-prefix, .dpw-ds-theme .mat-mdc-form-field-icon-suffix, .dpw-ds-theme .mat-form-field-invalid .mat-mdc-form-field-icon-suffix .mat-icon, .dpw-ds-theme .mat-form-field-invalid .mat-mdc-form-field-icon-prefix .mat-icon, .dpw-ds-theme .mat-form-field-invalid .mat-mdc-select-value-text, .dpw-ds-theme .mat-form-field-invalid .mdc-floating-label, .dpw-ds-theme .mat-mdc-form-field.mat-form-field-invalid .mdc-floating-label { color: var(--primary-color-30) !important; --mat-icon-color: var(--primary-color-30); --mdc-filled-text-field-error-label-text-color: var(--primary-color-30); --mat-select-enabled-trigger-text-color: var(--primary-color-30); --mat-form-field-leading-icon-color: var(--primary-color-30); --mat-form-field-error-trailing-icon-color: var(--primary-color-30); } .dpw-ds-theme .mat-mdc-form-field-error { color: var(--error-strong) !important; --mdc-filled-text-field-error-label-text-color: var(--error-strong); --mat-select-enabled-trigger-text-color: var(--error-strong); } .dpw-ds-theme .mat-form-field-invalid .mat-mdc-form-field-infix::after { content: "\f06a"; color: var(--error-strong) !important; display: flex; align-items: center; font-family: "Font Awesome 5 Free"; -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; font-style: normal; font-variant: normal; text-rendering: auto; line-height: 1; font-weight: 900; } .dpw-ds-theme .mat-mdc-form-field-icon-prefix > .mat-icon { padding: 0 10px 0 10px; margin: 0; } .dpw-ds-theme .mat-mdc-form-field-icon-suffix > .mat-icon { padding: 0 10px 0 10px; margin: 0; } .dpw-ds-theme .no-line .mdc-floating-label { margin-bottom: 8px; } .dpw-ds-theme .no-line .mdc-floating-label, .dpw-ds-theme .no-line .mdc-floating-label mat-label { color: var(--primary-color-30) !important; --mdc-outlined-text-field-disabled-label-text-color: var(--primary-color-30); } .dpw-ds-theme .mat-mdc-form-field.no-line .mat-mdc-input-element, .dpw-ds-theme .mat-mdc-form-field.no-line .mat-mdc-select-value-text { color: var(--primary-color-40); } .dpw-ds-theme .mdc-text-field--outlined:not( .mdc-text-field--disabled).mdc-text-field--focused .mdc-notched-outline .mdc-notched-outline__notch { border-left-color: transparent !important; border-left-width: 0px !important; } .dpw-ds-theme .underline .mdc-text-field--filled:not(.mdc-text-field--disabled) { --mdc-filled-text-field-container-color: transparent; background-color: transparent; padding: 0 8px; } .dpw-ds-theme .underline .mat-mdc-form-field-focus-overlay { --mat-form-field-state-layer-color: transparent; background-color: transparent; } .dpw-ds-theme .underline .mat-mdc-form-field-infix { --mat-form-field-container-vertical-padding: 0; --mat-form-field-container-height: 30px; --mat-form-field-filled-with-label-container-padding-top: 12px; } .dpw-ds-theme .mat-mdc-dialog-title { display: flex; align-items: center; margin-bottom: 0 !important; padding: 8px 16px !important; background-color: var(--white); } .dpw-ds-theme .mat-mdc-dialog-title h6 { color: var(--primary-color-50); font-family: var(--subheading-m-font); font-size: var(--subheading-m-font-size); font-weight: var(--subheading-m-font-weight); line-height: var(--subheading-m-line-height); letter-spacing: var(--subheading-m-letter-spacing); } .dpw-ds-theme .mat-mdc-dialog-content { background-color: var(--primary-color-60); border: 1px solid var(--primary-color-70); color: var(--primary-color-80) !important; padding: 16px !important; min-height: 88px; } .dpw-ds-theme .mat-mdc-dialog-content .dialog-content-header { font-size: var(--body-m-font-size); line-height: 21px; letter-spacing: var(--body-m-letter-spacing); font-family: var(--body-focus-font) !important; font-weight: var(--body-focus-font-weight) !important; } .dpw-ds-theme .mat-mdc-dialog-content .dialog-content-message { color: var(--primary-color-80) !important; font-family: var(--body-font); font-size: var(--body-s-font-size); font-weight: var(--body-s-font-weight); line-height: 18px; letter-spacing: var(--body-s-letter-spacing); } .dpw-ds-theme .mat-mdc-dialog-actions { background-color: var(--white); padding: 8px 12px; } .dpw-ds-theme .mat-mdc-dialog-content > * { color: var(--primary-color-80) !important; } .dpw-ds-theme .mat-icon.icon-extra-small { height: 12px !important; width: 12px !important; font-size: 12px !important; margin: 4px; } .dpw-ds-theme .mat-icon.icon-small { height: 16px !important; width: 16px !important; font-size: 16px !important; margin: 4px; } .dpw-ds-theme .mat-icon, .dpw-ds-theme .mat-icon.icon-medium { height: 20px !important; width: 20px !important; font-size: 20px !important; margin: 4px; } .dpw-ds-theme .mat-icon.icon-large { height: 24px !important; width: 24px !important; font-size: 24px !important; margin: 8px; } .dpw-ds-theme .mat-icon.icon-extra-large { height: 40px !important; width: 40px !important; font-size: 40px !important; margin: 8px; } .dpw-ds-theme .mat-mdc-icon-button .mat-icon { margin: 0 !important; width: 24px !important; font-size: 24px !important; } .dpw-ds-theme .mat-mdc-card { box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.12); } .dpw-ds-theme .mat-mdc-card:hover { box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.16); } .dpw-ds-theme .mdc-button:not(.button-l) { font-family: var(--button-s-font) !important; font-size: var(--button-s-font-size); font-weight: var(--button-s-font-weight); line-height: var(--button-s-line-height); letter-spacing: var(--button-s-letter-spacing); } .dpw-ds-theme .mdc-button { border-radius: 100px; --mdc-filled-button-label-text-transform: unset; --mdc-text-button-label-text-transform: unset; --mdc-outlined-button-label-text-transform: unset; } .dpw-ds-theme .mat-mdc-unelevated-button.button-l { padding: 8px 20px; } .dpw-ds-theme .mat-mdc-unelevated-button.button-s, .dpw-ds-theme .mat-mdc-outlined-button.button-s { padding: 10px 16px; } .dpw-ds-theme .mat-mdc-button.button-s.small, .dpw-ds-theme .mat-mdc-unelevated-button.button-s.small, .dpw-ds-theme .mat-mdc-outlined-button.button-s.small { padding: 10px 8px; } .dpw-ds-theme .mat-mdc-outlined-button.button-l { padding: 10px 20px; } .dpw-ds-theme .mat-mdc-button.button-s, .dpw-ds-theme .mat-mdc-button.button-l { padding: 10px 12px; } .dpw-ds-theme .mat-mdc-unelevated-button.button-s.small { min-height: 28px; } .dpw-ds-theme .mat-mdc-unelevated-button { box-shadow: none; } .dpw-ds-theme .mat-mdc-unelevated-button.mat-primary { background-color: var(--primary-color-100); color: var(--white); border: 1px solid var(--primary-color-100); --mdc-filled-button-container-color: var(--primary-color-100); --mdc-filled-button-label-text-color: var(--white); } .dpw-ds-theme .mat-mdc-unelevated-button.mat-primary:hover { background-color: var(--primary-color-80); color: var(--white); border: 1px solid var(--primary-color-80); --mdc-filled-button-container-color: var(--primary-color-80); --mdc-filled-button-label-text-color: var(--white); } .dpw-ds-theme .mat-mdc-unelevated-button .mat-ripple-element { background-color: var(--primary-color-90) !important; --mat-text-button-ripple-color: var(--primary-color-90); } .dpw-ds-theme .mat-mdc-unelevated-button.mat-primary.disabled, .dpw-ds-theme .mat-mdc-unelevated-button.mat-primary[disabled] { box-shadow: none; background-color: var(--disabled-color); border: 1px solid var(--disabled-color); --mdc-filled-button-disabled-container-color: var(--disabled-color); --mdc-filled-button-disabled-label-text-color: var(--white); color: var(--white); pointer-events: none; cursor: auto; } .dpw-ds-theme .mat-mdc-unelevated-button.mat-warn { background-color: var(--error-strong); color: var(--dpw-system-white); border: 1px solid var(--error-strong); --mdc-filled-button-container-color: var(--error-strong); --mdc-filled-button-label-text-color: var(--dpw-system-white); } .dpw-ds-theme .mat-mdc-unelevated-button.mat-warn:hover { background-color: var(--error-low); color: var(--error-strong); border: 1px solid var(--error-low); --mdc-filled-button-container-color: var(--error-low); --mdc-filled-button-label-text-color: var(--error-strong); } .dpw-ds-theme .mat-mdc-unelevated-button.mat-warn .mat-ripple-element { background-color: var(--error-strong) !important; --mat-text-button-ripple-color: var(--error-strong); } .dpw-ds-theme .mat-mdc-unelevated-button.mat-warn.disabled, .dpw-ds-theme .mat-mdc-unelevated-button.mat-warn[disabled] { box-shadow: none; background-color: var(--error-low); border: 1px solid var(--error-low); --mdc-filled-button-disabled-container-color: var(--error-low); --mdc-filled-button-disabled-label-text-color: var(--white); color: var(--white); pointer-events: none; cursor: auto; } .dpw-ds-theme .mat-mdc-button.mat-tertiary { background: transparent; border: none; color: var(--primary-color-100); --mdc-text-button-label-text-color: var(--primary-color-100); } .dpw-ds-theme .mat-mdc-button.mat-tertiary:hover { border: 1px solid var(--primary-color-60); background: var(--primary-color-60); } .dpw-ds-theme .mat-mdc-button.mat-tertiary.mat-mdc-menu-trigger:not([disabled])[aria-haspopup=menu][aria-expanded=true], .dpw-ds-theme .mat-mdc-button.mat-tertiary .mat-ripple-element { background-color: var(--primary-color-70) !important; --mat-text-button-ripple-color: var(--primary-color-70); } .dpw-ds-theme .mat-mdc-button.mat-tertiary.disabled:hover, .dpw-ds-theme .mat-button.mat-tertiary[disabled]:hover, .dpw-ds-theme .mat-button.mat-tertiary.disabled, .dpw-ds-theme .mat-button.mat-tertiary[disabled] { background: transparent; border: none; color: var(--disabled-color); --mdc-filled-button-disabled-label-text-color: var(--disabled-color); pointer-events: none; cursor: auto; } .dpw-ds-theme .mat-mdc-button.mat-warn { background: transparent; border: none; color: var(--error-strong); --mdc-text-button-label-text-color: var(--error-strong); } .dpw-ds-theme .mat-mdc-button.mat-warn:hover { background: var(--error-low); border: 1px solid var(--error-low); color: var(--error-medium); --mdc-text-button-label-text-color: var(--error-medium); } .dpw-ds-theme .mat-mdc-button.mat-warn .mat-ripple-element { background-color: var(--error-low) !important; --mat-text-button-ripple-color: var(--error-low); } .dpw-ds-theme .mat-mdc-button.mat-warn.disabled:hover, .dpw-ds-theme .mat-button.mat-warn[disabled]:hover, .dpw-ds-theme .mat-button.mat-warn.disabled, .dpw-ds-theme .mat-button.mat-warn[disabled] { background: transparent; border: none; color: var(--error-low); --mdc-filled-button-disabled-label-text-color: var(--error-low); pointer-events: none; cursor: auto; } .dpw-ds-theme .mat-mdc-outlined-button { box-shadow: none; } .dpw-ds-theme .mat-mdc-outlined-button.mat-primary { background-color: var(--white); color: var(--primary-color-100); border: 1px solid var(--primary-color-100); --mdc-outlined-button-container-color: var(--white); --mdc-outlined-button-label-text-color: var(--primary-color-100); --mdc-outlined-button-outline-color: var(--primary-color-100); } .dpw-ds-theme .mat-mdc-outlined-button.mat-primary:hover { background-color: var(--primary-color-80); color: var(--primary-color-100); border: 1px solid var(--primary-color-100); --mdc-outlined-button-container-color: var(--primary-color-80); --mdc-outlined-button-label-text-color: var(--primary-color-100); --mdc-outlined-button-outline-color: var(--primary-color-100); } .dpw-ds-theme .mat-mdc-outlined-button .mat-ripple-element { background-color: var(--primary-color-70) !important; --mat-text-button-ripple-color: var(--primary-color-70); } .dpw-ds-theme .mat-mdc-outlined-button.mat-primary.disabled, .dpw-ds-theme .mat-mdc-outlined-button.mat-primary[disabled] { box-shadow: none; background-color: var(--white); border: 1px solid var(--disabled-color); --mdc-outlined-button-disabled-container-color: var(--white); --mdc-outlined-button-disabled-label-text-color: var(--disabled-color); --mdc-outlined-button-disabled-outline-color: var(--disabled-color); color: var(--disabled-color); pointer-events: none; cursor: auto; } .dpw-ds-theme .mat-mdc-outlined-button { box-shadow: none; } .dpw-ds-theme .mat-mdc-outlined-button.mat-warn { background-color: var(--white); color: var(--error-strong); border: 1px solid var(--error-strong); --mdc-outlined-button-container-color: var(--white); --mdc-outlined-button-label-text-color: var(--error-strong); --mdc-outlined-button-outline-color: var(--error-strong); } .dpw-ds-theme .mat-mdc-outlined-button.mat-warn:hover { background-color: var(--error-low); color: var(--error-strong); border: 1px solid var(--error-strong); --mdc-outlined-button-container-color: var(--error-low); --mdc-outlined-button-label-text-color: var(--error-strong); --mdc-outlined-button-outline-color: var(--error-strong); } .dpw-ds-theme .mat-mdc-outlined-button .mat-ripple-element { background-color: var(--error-medium) !important; --mat-text-button-ripple-color: var(--error-medium); } .dpw-ds-theme .mat-mdc-outlined-button.mat-warn.disabled, .dpw-ds-theme .mat-mdc-outlined-button.mat-warn[disabled] { box-shadow: none; background-color: transparent; border: 1px solid var(--error-low); --mdc-outlined-button-disabled-container-color: transparent; --mdc-outlined-button-disabled-label-text-color: var(--error-low); --mdc-outlined-button-disabled-outline-color: var(--error-low); color: var(--error-low); pointer-events: none; cursor: auto; } .dpw-ds-theme .mdc-checkbox__background, .dpw-ds-theme .mdc-checkbox, .dpw-ds-theme .mdc-checkbox .mdc-checkbox__native-control { width: 20px !important; height: 20px !important; --mdc-checkbox-state-layer-size: 20px; } .dpw-ds-theme .mdc-checkbox { padding: 0; flex: 1; } .dpw-ds-theme .mdc-checkbox__background { border: 1px solid currentColor; border-radius: 2px; } .dpw-ds-theme .mat-mdc-checkbox.mat-primary:not(.mat-mdc-checkbox-disabled):hover .mat-mdc-checkbox-ripple .mat-ripple-element, .dpw-ds-theme .mat-mdc-checkbox.mat-primary:not(.mat-mdc-checkbox-disabled):active .mdc-checkbox__native-control ~ .mat-mdc-checkbox-ripple .mat-ripple-element, .dpw-ds-theme .mat-mdc-checkbox.mat-primary:not(.mat-mdc-checkbox-disabled):active .mdc-checkbox__native-control[data-indeterminate="true"]:enabled ~ .mdc-checkbox__background, .dpw-ds-theme .mat-mdc-checkbox.mat-primary:not(.mat-mdc-checkbox-disabled):hover .mdc-checkbox__native-control[data-indeterminate="true"]:enabled ~ .mdc-checkbox__background, .dpw-ds-theme .mat-mdc-checkbox.mat-primary:not(.mat-mdc-checkbox-disabled) .mdc-checkbox__native-control:enabled:indeterminate ~ .mdc-checkbox__background, .dpw-ds-theme .mat-mdc-checkbox-checked.mat-primary:not(.mat-mdc-checkbox-disabled) .mdc-checkbox__background { --mdc-checkbox-selected-icon-color: var(--primary-color-50); --mdc-checkbox-selected-hover-icon-color: var(--primary-color-50); --mdc-checkbox-selected-focus-icon-color: var(--primary-color-50); --mdc-checkbox-selected-pressed-icon-color: var(--primary-color-50); background-color: var(--primary-color-50); border-color: var(--primary-color-50); } .dpw-ds-theme .mat-mdc-checkbox:not(.mat-mdc-checkbox-checked).mat-primary:not( .mat-mdc-checkbox-disabled) .mdc-checkbox__background { border-color: var(--primary-color-50) !important; } .dpw-ds-theme .mat-mdc-checkbox.mat-primary.mat-mdc-checkbox-disabled.mat-mdc-checkbox-checked .mdc-checkbox__background { background-color: var(--disabled-color) !important; border-color: var(--disabled-color) !important; pointer-events: none; } .dpw-ds-theme .mat-mdc-checkbox.mat-primary.mat-mdc-checkbox-disabled:not( .mat-mdc-checkbox-checked) .mdc-checkbox__background { border-color: var(--disabled-color) !important; pointer-events: none; } .dpw-ds-theme .mat-mdc-checkbox:not(.mat-mdc-checkbox-checked).mat-warn:not( .mat-mdc-checkbox-disabled) .mdc-checkbox__background { border-color: var(--error-strong) !important; } .dpw-ds-theme .mat-mdc-checkbox.mat-warn:not(.mat-mdc-checkbox-disabled):hover .mat-mdc-checkbox-ripple .mat-ripple-element, .dpw-ds-theme .mat-mdc-checkbox.mat-warn:not(.mat-mdc-checkbox-disabled):active .mdc-checkbox__native-control ~ .mat-mdc-checkbox-ripple .mat-ripple-element, .dpw-ds-theme .mat-mdc-checkbox.mat-warn:not(.mat-mdc-checkbox-disabled):active .mdc-checkbox__native-control[data-indeterminate="true"]:enabled ~ .mdc-checkbox__background, .dpw-ds-theme .mat-mdc-checkbox.mat-warn:hover .mdc-checkbox__native-control[data-indeterminate="true"]:enabled ~ .mdc-checkbox__background, .dpw-ds-theme .mat-mdc-checkbox.mat-warn:not(.mat-mdc-checkbox-disabled) .mdc-checkbox__native-control:enabled:indeterminate ~ .mdc-checkbox__background, .dpw-ds-theme .mat-mdc-checkbox-checked.mat-warn:not(.mat-mdc-checkbox-disabled) .mdc-checkbox__background { --mdc-checkbox-selected-icon-color: var(--error-strong); --mdc-checkbox-selected-hover-icon-color: var(--error-strong); --mdc-checkbox-selected-focus-icon-color: var(--error-strong); --mdc-checkbox-selected-pressed-icon-color: var(--error-strong); background-color: var(--error-strong); border-color: var(--error-strong); } .dpw-ds-theme .mat-mdc-checkbox.mat-warn.mat-mdc-checkbox-disabled:not( .mat-mdc-checkbox-checked) .mdc-checkbox__background { border-color: var(--error-low) !important; pointer-events: none; } .dpw-ds-theme .mat-mdc-checkbox.mat-warn.mat-mdc-checkbox-disabled.mat-mdc-checkbox-checked .mdc-checkbox__background { background-color: var(--error-low) !important; border-color: var(--error-low) !important; pointer-events: none; } .dpw-ds-theme .mat-mdc-checkbox .mdc-label { font-family: var(--body-font); font-size: var(--body-m-font-size); font-weight: var(--body-m-font-weight); line-height: var(--body-m-line-height) !important; letter-spacing: var(--body-m-letter-spacing); } .dpw-ds-theme .mat-mdc-checkbox.mat-primary:not(.mat-mdc-checkbox-disabled) .mdc-label { color: var(--primary-color-50); } .dpw-ds-theme .mat-mdc-checkbox.mat-warn:not(.mat-mdc-checkbox-disabled) .mdc-label { color: var(--error-strong); } .dpw-ds-theme .mat-mdc-checkbox.mat-primary.mat-mdc-checkbox-disabled .mdc-label { color: var(--disabled-color); } .dpw-ds-theme .mat-mdc-checkbox.mat-warn.mat-mdc-checkbox-disabled .mdc-label { color: var(--error-low); } .dpw-ds-theme .toast-title { display: flex; align-items: center; } .dpw-ds-theme .toast-title-icon-wrapper { width: 26px; height: 25px; border-radius: 48px; border: 1px solid currentColor; background: currentColor; display: flex; align-items: center; justify-content: center; } .dpw-ds-theme.mat-mdc-snack-bar-container .mdc-snackbar__label .toast-title { font-family: var(--title-xxl-font); font-size: var(--title-xxl-font-size); font-weight: var(--title-xxl-font-weight); line-height: var(--title-xxl-line-height); letter-spacing: var(--title-xxl-letter-spacing); } .dpw-ds-theme.mat-mdc-snack-bar-container .mdc-snackbar__label .toast-message { font-family: var(--body-font); font-size: var(--body-m-font-size); font-weight: var(--body-m-font-weight); line-height: var(--body-m-line-height); letter-spacing: var(--body-m-letter-spacing); } .dpw-ds-theme.mat-mdc-snack-bar-container button, .dpw-ds-theme.mat-mdc-snack-bar-container { --mdc-snackbar-supporting-text-color: var(--primary-color-50) !important; } .dpw-ds-theme.mat-mdc-snack-bar-container .mat-icon { width: 14px !important; height: 14px !important; font-size: 14px !important; margin: 0; padding: 0; } .dpw-ds-theme.mat-mdc-snack-bar-container.snackbar-dark-theme .mdc-snackbar__label { color: var(--white); } .dpw-ds-theme.mat-mdc-snack-bar-container.snackbar-warning .toast-title-icon-wrapper { color: var(--warning-medium); } .dpw-ds-theme.mat-mdc-snack-bar-container.snackbar-warning .mat-icon { --mat-icon-color: var(--warning-low); --mdc-snackbar-supporting-text-color: var(--warning-low); } .dpw-ds-theme.mat-mdc-snack-bar-container.snackbar-warning { /* background: var(--warning-light); color: var(--warning-dark); */ --mdc-snackbar-container-color: var(--warning-low); } .dpw-ds-theme.mat-mdc-snack-bar-container.snackbar-success .toast-title-icon-wrapper { color: var(--success-strong); } .dpw-ds-theme.mat-mdc-snack-bar-container.snackbar-success .mat-icon { /* color: var(--success-dark) !important; */ --mat-icon-color: var(--success-low); --mdc-snackbar-supporting-text-color: var(--success-low); } .dpw-ds-theme.mat-mdc-snack-bar-container.snackbar-success { /* background: var(--success-light); color: var(--success-dark); */ --mdc-snackbar-container-color: var(--success-low); } .dpw-ds-theme.mat-mdc-snack-bar-container.snackbar-error .toast-title-icon-wrapper { color: var(--error-medium); } .dpw-ds-theme.mat-mdc-snack-bar-container.snackbar-error .mat-icon { /* color: var(--error-dark) !important; */ --mat-icon-color: var(--error-low); --mdc-snackbar-supporting-text-color: var(--error-low); } .dpw-ds-theme.mat-mdc-snack-bar-container.snackbar-error { /* background: var(--error-light); color: var(--error-dark); */ --mdc-snackbar-container-color: var(--error-low); } .dpw-ds-theme.mat-mdc-snack-bar-container.snackbar-primary .toast-title-icon-wrapper { color: var(--primary-color-90); } .dpw-ds-theme.mat-mdc-snack-bar-container.snackbar-primary .mat-icon { /* color: var(--grey-high) !important; */ --mat-icon-color: var(--primary-color-60); --mdc-snackbar-supporting-text-color: var(--primary-color-60); } .dpw-ds-theme.mat-mdc-snack-bar-container.snackbar-primary { /* background: var(--grey-low); color: var(--grey-high); */ --mdc-snackbar-container-color: var(--primary-color-60); } .dpw-ds-theme .mat-mdc-menu-panel .mat-mdc-menu-content { padding: 0 !important; } .dpw-ds-theme .mat-mdc-menu-item { margin-bottom: 0 !important; padding: 8px; font-family: var(--body-font); font-size: var(--body-m-font-size); font-weight: var(--body-m-font-weight); line-height: var(--body-m-line-height); letter-spacing: var(--body-m-letter-spacing); min-height: 36px; min-width: 200px; color: var(--primary-color-40); } .dpw-ds-theme .mat-mdc-menu-item:not(:first-child) { border-top: 1px solid var(--primary-color-10); } .dpw-ds-theme .mat-mdc-menu-item:not([disabled]):hover, .dpw-ds-theme .mat-mdc-menu-item:not([disabled]).cdk-program-focused, .dpw-ds-theme .mat-mdc-menu-item:not([disabled]).cdk-keyboard-focused, .dpw-ds-theme .mat-mdc-menu-item:not([disabled]).mat-mdc-menu-item-highlighted { background-color: var(--primary-color-10); --mat-menu-item-focus-state-layer-color: var(--primary-color-10); } .dpw-ds-theme .mat-mdc-menu-content, .dpw-ds-theme .mat-mdc-menu-content .mat-mdc-menu-item .mat-mdc-menu-item-text { color: var(--primary-color-40); font-family: var(--body-font); font-size: var(--body-m-font-size); font-weight: var(--body-m-font-weight); line-height: var(--body-m-line-height); letter-spacing: var(--body-m-letter-spacing); } .dpw-ds-theme .mat-mdc-menu-content .mat-mdc-menu-item:not([disabled]):hover, .dpw-ds-theme .mat-mdc-menu-content .mat-mdc-menu-item:not([disabled]).cdk-program-focused, .dpw-ds-theme .mat-mdc-menu-content .mat-mdc-menu-item:not([disabled]).cdk-program-focused, .dpw-ds-theme .mat-mdc-menu-content .mat-mdc-menu-item:not([disabled]).cdk-keyboard-focused, .dpw-ds-theme .mat-mdc-menu-content .mat-mdc-menu-item:not([disabled]).mat-mdc-menu-item-highlighted, .dpw-ds-theme .mat-mdc-menu-content, .dpw-ds-theme .mat-mdc-menu-content .mat-mdc-menu-item.mat-mdc-menu-item-highlighted .mat-mdc-menu-item-text { font-family: var(--body-focus-font) !important; font-weight: var(--body-focus-font-weight) !important; } .dpw-ds-theme .mat-mdc-menu-item .mat-mdc-menu-submenu-icon { visibility: hidden; } .dpw-ds-theme .mat-mdc-menu-item.mat-mdc-menu-trigger.mat-mdc-menu-item-submenu-trigger::after { content: " "; width: 20px; height: 20px; background-image: url('data:image/svg+xml,'); } .dpw-ds-theme .mat-mdc-menu-item-text a { color: inherit; } .dpw-ds-theme .circle { width: 36px; height: 36px; border: 1px solid var(--default-text-color); border-radius: 24px; display: flex; justify-content: center; align-items: center; } .dpw-ds-theme .d-flex .circle:not(:last-of-type) { margin-right: 12px; } .dpw-ds-theme .circle.avatar { background: var(--avatar); box-shadow: 0px 8px 16px 1px rgba(0, 0, 0, 0.04); border-color: transparent !important; color: var(--white); } .dpw-ds-theme .avatar-menu { padding: 12px !important; } .dpw-ds-theme .language-menu-items, .dpw-ds-theme .language-menu .mat-mdc-menu-content .menu-items-wrapper { padding: 12px; max-height: 145px; overflow-y: auto; overflow-x: hidden; } .dpw-ds-theme .language-menu .mat-mdc-menu-item { border-top: none; } @media (min-width: 745px) { .dpw-ds-theme .circle[aria-haspopup="menu"][aria-expanded="true"] { background-color: var(--primary-color-70); } } @media (max-width: 744px) { .dpw-ds-theme .d-flex .circle { margin-right: 0px !important; } .dpw-ds-theme .circle { border: none !important; } .dpw-ds-theme .lang-circle { width: 36px; height: 36px; } } .dpw-ds-theme .mat-mdc-option { margin-bottom: 0 !important; font-family: var(--body-font) !important; font-size: var(--body-m-font-size); font-weight: var(--body-m-font-weight); line-height: var(--body-m-line-height); letter-spacing: var(--body-m-letter-spacing); min-height: 36px; min-width: 200px; color: var(--primary-color-40); } .dpw-ds-theme .mdc-list-item__primary-text { font-family: var(--body-font) !important; font-size: var(--body-m-font-size); font-weight: var(--body-m-font-weight); line-height: var(--body-m-line-height); letter-spacing: var(--body-m-letter-spacing); color: var(--primary-color-40); align-items: center; display: flex; } .dpw-ds-theme .mdc-list-item.mdc-list-item--selected { --mdc-list-list-item-selected-container-color: var(--primary-color-10); background-color: var(--primary-color-10); } .dpw-ds-theme .mdc-list { padding: 12px; } .dpw-ds-theme .mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--selected .mdc-list-item__primary-text, .dpw-ds-theme .mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--activated .mdc-list-item__primary-text { color: var(--primary-color-40); font-family: var(--body-focus-font) !important; font-weight: var(--body-focus-font-weight) !important; } .dpw-ds-theme .mat-mdc-option:not([disabled]):hover, .dpw-ds-theme .mat-mdc-option:not([disabled]).cdk-program-focused, .dpw-ds-theme .mat-mdc-option:not([disabled]).cdk-keyboard-focused, .dpw-ds-theme .mat-mdc-option:not([disabled]).mat-ripple-element { --mat-text-button-ripple-color: var(--dpw-system-white); background-color: var(--dpw-system-white); --mat-menu-item-focus-state-layer-color: var(--dpw-system-white); } .dpw-ds-theme.offcanvas.showing, .dpw-ds-theme.offcanvas.show:not(.hiding) { overflow: auto; top: 65px; } .dpw-ds-theme.offcanvas .mdc-list-item__primary-text { display: flex; align-items: center; color: var(--primary-color-40); font-family: var(--body-font) !important; font-size: var(--body-m-font-size); font-weight: var(--body-m-font-weight); line-height: var(--body-m-line-height); letter-spacing: var(--body-m-letter-spacing); } .dpw-ds-theme.offcanvas .active { background-color: var(--primary-color-10); } .dpw-ds-theme.offcanvas .active .mdc-list-item__primary-text { font-family: var(--body-focus-font) !important; font-weight: var(--body-focus-font-weight) !important; } .dpw-ds-theme.offcanvas .mat-accordion .mat-expansion-panel { margin-bottom: 0 !important; padding: 8px; border: 0px !important; } .dpw-ds-theme.offcanvas .mat-content { overflow: visible; align-items: center; } .dpw-ds-theme.offcanvas .mat-expansion-panel-header { min-height: 36px; height: auto !important; font-family: var(--body-font) !important; font-size: var(--body-m-font-size); font-weight: var(--body-m-font-weight); line-height: var(--body-m-line-height); letter-spacing: var(--body-m-letter-spacing); } .dpw-ds-theme.offcanvas .mat-expansion-panel-header.mat-expanded { padding: 8px; background-color: var(--primary-color-100); color: var(--white); font-family: var(--body-focus-font) !important; font-weight: var(--body-focus-font-weight); border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; } .dpw-ds-theme.offcanvas .mat-expansion-panel-header.mat-expanded .mat-expansion-indicator { transform: rotate(270deg); } .dpw-ds-theme.offcanvas .mat-expansion-panel.mat-expanded .mat-expansion-panel-content { font-family: var(--body-font) !important; font-size: var(--body-m-font-size); font-weight: var(--body-m-font-weight); line-height: var(--body-m-line-height); letter-spacing: var(--body-m-letter-spacing); } .dpw-ds-theme.offcanvas .submenu { padding: 8px 8px 8px 40px; min-height: 36px; display: flex; align-items: center; } .dpw-ds-theme.offcanvas .close-offcanvas-icon { position: fixed; top: -4px; left: -4px; background: #fff; width: 50px !important; height: 69px !important; display: flex; align-items: center; justify-content: center; margin: 0; padding: 15px; color: var(--primary-color-40); } .dpw-ds-theme::-webkit-scrollbar, .dpw-ds-theme ::-webkit-scrollbar { width: 8px; height: 8px; background-color: inherit; } .dpw-ds-theme::-webkit-scrollbar-thumb, .dpw-ds-theme ::-webkit-scrollbar-thumb { background-color: var(--grey-high); border: 1px solid transparent; border-radius: 10px; background-clip: padding-box; outline: none; cursor: pointer; } .dpw-ds-theme .popover { max-width: 100vw; left: 0; } .dpw-ds-theme.language-autocomplete-panel { max-height: 144px; padding: 0; } .dpw-ds-theme .mat-mdc-tab.mdc-tab--active .mdc-tab__text-label { --mat-tab-header-active-label-text-color: var(--primary-color-40); color: var(--primary-color-40) !important; font-family: var(--title-l-font) !important; font-size: var(--title-l-font-size); font-weight: var(--title-l-font-weight); line-height: var(--title-l-line-height); letter-spacing: -0.07px; } .dpw-ds-theme .mdc-tab__text-label { --mat-tab-header-inactive-hover-label-text-color: var(--primary-color-30); color: var(--primary-color-30) !important; text-transform: capitalize; font-family: var(--title-m-font) !important; font-size: var(--title-m-font-size); font-weight: var(--title-m-font-weight); line-height: var(--title-m-line-height); letter-spacing: -0.07px; } .dpw-ds-theme .mat-mdc-tab.mdc-tab--active:hover .mdc-tab-indicator__content--underline { border-color: var(--primary-color-50); --mat-tab-header-active-hover-indicator-color: var(--primary-color-50); } .dpw-ds-theme .mat-mdc-tab:not(.mdc-tab-indicator--active) .mdc-tab-indicator__content { opacity: 0 !important; } .dpw-ds-theme .mat-mdc-tab:not(.mdc-tab--stacked) { height: 36px; --mdc-secondary-navigation-tab-container-height: 36px; padding-left: 8px; padding-right: 8px; justify-content: flex-start; min-width: auto; } .dpw-ds-theme .mat-mdc-focus-indicator { background: transparent; } .dpw-ds-theme .mdc-switch:disabled .mdc-switch__track, .dpw-ds-theme .mat-mdc-slide-toggle.mat-disabled { opacity: 1; --mdc-switch-disabled-track-opacity: 1; } .dpw-ds-theme .mdc-switch .mdc-switch__track { --mdc-switch-track-shape: 999999px; --mdc-switch-track-height: 20px; } .dpw-ds-theme .mat-mdc-slide-toggle .mdc-label { margin-bottom: 0; } .dpw-ds-theme .mdc-switch { --mdc-switch-track-width: 40px; padding: 0px; } .dpw-ds-theme .mat-mdc-slide-toggle.mat-primary .mdc-switch:disabled .mdc-switch__track::before, .dpw-ds-theme .mat-mdc-slide-toggle.mat-primary .mdc-switch:disabled .mdc-switch__track::after, .dpw-ds-theme .mat-mdc-slide-toggle.mat-primary .mdc-switch.mdc-switch--checked:disabled .mdc-switch__track::after, .dpw-ds-theme .mat-mdc-slide-toggle.mat-primary.mat-disabled .mdc-switch__track::after, .dpw-ds-theme .mat-mdc-slide-toggle.mat-primary.mat-mdc-slide-toggle-checked.mat-disabled .mdc-switch__track::after { --mat-switch-disabled-unselected-track-outline-width: 1px; --mat-switch-disabled-unselected-track-outline-color: var(--primary-color-20); --mdc-switch-disabled-selected-track-color: var(--primary-color-20); --mdc-switch-disabled-unselected-track-color: var(--white); } .dpw-ds-theme .mat-mdc-slide-toggle.mat-primary.mat-checked.mat-disabled .mdc-switch__track::after { background-color: var(--primary-color-20); } .dpw-ds-theme .mdc-switch.mdc-switch--selected:disabled .mdc-switch__handle::after { --mdc-switch-disabled-selected-handle-color: var(--primary-color-20); } .dpw-ds-theme .mdc-switch.mdc-switch--unselected:disabled .mdc-switch__handle::after { --mdc-switch-disabled-unselected-handle-color: var(--white); } .dpw-ds-theme .mdc-switch.mdc-switch--unselected:disabled .mdc-switch__handle::after { --mdc-switch-disabled-unselected-handle-color: var(--primary-color-20); box-shadow: none; } .dpw-ds-theme .mat-mdc-slide-toggle .mdc-switch--disabled + label { --mdc-switch-disabled-label-text-color: var(--primary-color-20); } .dpw-ds-theme .mat-mdc-slide-toggle .mdc-switch:enabled + .mdc-label { --mdc-form-field-label-text-color: var(--primary-color-50); } .dpw-ds-theme .mdc-switch__track::after, .dpw-ds-theme .mdc-switch__track::before { --mat-switch-track-outline-width: 2px; --mat-switch-track-outline-color: var(--primary-color-30); } .dpw-ds-theme .mat-mdc-slide-toggle.mat-primary .mdc-switch__track::before { --mdc-switch-unselected-track-color: var(--white) !important; --mdc-switch-unselected-focus-track-color: var(--white) !important; --mdc-switch-unselected-hover-track-color: var(--white) !important; --mdc-switch-unselected-pressed-track-color: var(--white) !important; --mat-switch-track-outline-width: 1px; } .dpw-ds-theme .mat-mdc-slide-toggle.mat-primary.mat-mdc-slide-toggle-checked .mdc-switch__track::after { --mdc-switch-selected-track-color: var(--primary-color-50) !important; --mdc-switch-selected-focus-track-color: var(--primary-color-50) !important; --mdc-switch-selected-hover-track-color: var(--primary-color-50) !important; --mdc-switch-selected-pressed-track-color: var(--primary-color-50) !important; } .dpw-ds-theme .mat-mdc-slide-toggle.mat-primary .mdc-switch__handle::after { --mdc-switch-unselected-handle-color: var(--primary-color-30) !important; --mdc-switch-unselected-hover-handle-color: var(--primary-color-30) !important; --mdc-switch-unselected-focus-handle-color: var(--primary-color-30) !important; --mdc-switch-unselected-pressed-handle-color: var(--primary-color-30) !important; } .dpw-ds-theme .mat-mdc-slide-toggle.mat-primary.mat-mdc-slide-toggle-checked .mdc-switch__handle::after { --mdc-switch-selected-handle-color: var(--white) !important; --mdc-switch-selected-hover-handle-color: var(--white) !important; --mdc-switch-selected-focus-handle-color: var(--white) !important; --mdc-switch-selected-pressed-handle-color: var(--white) !important; } .dpw-ds-theme .mat-mdc-slide-toggle .mdc-switch__handle:has(.mdc-switch__icons) { --mat-switch-unselected-handle-size: 12px; --mat-switch-with-icon-handle-size: 12px; } .dpw-ds-theme .mat-mdc-slide-toggle .mdc-switch__handle { --mat-switch-selected-handle-size: 12px; --mat-switch-pressed-handle-size: 12px; --mat-switch-with-icon-handle-size: 12px; --mat-switch-unselected-handle-size: 12px; } .dpw-ds-theme .mat-mdc-slide-toggle .mdc-switch--unselected .mdc-switch__handle:has(.mdc-switch__icons) { --mat-switch-unselected-with-icon-handle-horizontal-margin: 0 4px; } .dpw-ds-theme .mdc-switch.mdc-switch--unselected .mdc-switch__icon { --mdc-switch-unselected-icon-size: 12px; } .dpw-ds-theme .mdc-switch.mdc-switch--selected .mdc-switch__handle { --mat-switch-selected-handle-size: 16px; --mat-switch-with-icon-handle-size: 16px; } .dpw-ds-theme .mat-mdc-slide-toggle:active .mdc-switch--unselected:not(.mdc-switch--disabled) .mdc-switch__handle { --mat-switch-unselected-pressed-handle-horizontal-margin: 0 0 0 5px; } .dpw-ds-theme .mat-mdc-slide-toggle .mdc-switch--unselected .mdc-switch__handle { margin-left: 5px; } .dpw-ds-theme .mdc-switch__icon--off { display: none; } .dpw-ds-theme .mdc-switch.mdc-switch--selected:enabled .mdc-switch__icon { --mdc-switch-selected-icon-color: var(--primary-color-50); --mdc-switch-selected-icon-size: 16px; } .dpw-ds-theme .mat-mdc-slide-toggle.mat-primary.mat-mdc-slide-toggle-checked.mat-disabled .mdc-switch__handle::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='10' viewBox='0 0 12 10' fill='none'%3E%3Cpath d='M1 4.74026L4.50649 8.24676L11 1.75325' stroke='%23D5D5DD' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E"); } .dpw-ds-theme .mdc-switch.mdc-switch--selected:enabled:active .mdc-switch__handle::after, .dpw-ds-theme .mdc-switch.mdc-switch--selected:enabled:focus:not(:active) .mdc-switch__handle::after, .dpw-ds-theme .mdc-switch.mdc-switch--selected:enabled:hover:not(:focus):not(:active) .mdc-switch__handle::after, .dpw-ds-theme .mat-mdc-slide-toggle.mat-primary.mat-mdc-slide-toggle-checked .mdc-switch__handle::after { content: ""; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='10' viewBox='0 0 12 10' fill='none'%3E%3Cpath d='M1 4.74026L4.50649 8.24676L11 1.75325' stroke='%230F0F19' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E"); display: flex; flex-wrap: wrap; width: 14px; height: 14px; background-position: 2px 2px; background-size: contain; background-repeat: no-repeat; } .table-bordered, .table-bordered th, .table-bordered td { border: 1px solid var(--mat-table-row-item-outline-color, var(--grey-medium)) !important; } .dpw-ds-theme .mat-mdc-unelevated-button.mat-primary.cns, .dpw-ds-theme .mat-mdc-unelevated-button.mat-primary.cns:hover { background-color: #008583; border: 1px solid #008583; --mdc-filled-button-container-color: #008583; } .dpw-ds-theme .mat-mdc-unelevated-button.mat-primary.cns-black, .dpw-ds-theme .mat-mdc-unelevated-button.mat-primary.cns-black:hover { background-color: #303030; } .dpw-ds-theme .cns-label { color: #040404 !important; } .dpw-ds-theme .cns-text-value { color: #555 !important; } .show-dialog-background { background-color: var(--primary-color-60, #ececff); border: 1px solid var(--primary-color-70, #b8b6eb); }