@font-face {
  font-family: "UniversNext";
  src: url('UniversNextforHSBCW29-UltLt.eot');
  src: url('UniversNextforHSBCW29-UltLt.eot') format("eot"), url('UniversNextforHSBCW29-UltLt.woff') format("woff"), url('UniversNextforHSBCW29-UltLt.ttf') format("truetype");
  font-weight: 100;
}
@font-face {
  font-family: "UniversNext";
  src: url('UniversNextforHSBCW29-Thin.eot');
  src: url('UniversNextforHSBCW29-Thin.eot') format("eot"), url('UniversNextforHSBCW29-Thin.woff') format("woff"), url('UniversNextforHSBCW29-Thin.ttf') format("truetype");
  font-weight: 200;
}
@font-face {
  font-family: "UniversNext";
  src: url('UniversNextforHSBCW29-ThIt.eot');
  src: url('UniversNextforHSBCW29-ThIt.eot') format("eot"), url('UniversNextforHSBCW29-ThIt.woff') format("woff"), url('UniversNextforHSBCW29-ThIt.ttf') format("truetype");
  font-weight: 200;
  font-style: italic;
}
@font-face {
  font-family: "UniversNext";
  src: url('UniversNextforHSBCW29-Light.eot');
  src: url('UniversNextforHSBCW29-Light.eot') format("eot"), url('UniversNextforHSBCW29-Light.woff') format("woff"), url('UniversNextforHSBCW29-Light.ttf') format("truetype");
  font-weight: 300;
}
@font-face {
  font-family: "UniversNext";
  src: url('UniversNextforHSBCW29-LtIt.eot');
  src: url('UniversNextforHSBCW29-LtIt.eot') format("eot"), url('UniversNextforHSBCW29-LtIt.woff') format("woff"), url('UniversNextforHSBCW29-LtIt.ttf') format("truetype");
  font-weight: 300;
  font-style: italic;
}
@font-face {
  font-family: "UniversNext";
  src: url('UniversNextforHSBCW29-Rg.eot');
  src: url('UniversNextforHSBCW29-Rg.eot') format("eot"), url('UniversNextforHSBCW29-Rg.woff') format("woff"), url('UniversNextforHSBCW29-Rg.ttf') format("truetype");
  font-weight: 400;
}
@font-face {
  font-family: "UniversNext";
  src: url('UniversNextforHSBCW29-Md.eot');
  src: url('UniversNextforHSBCW29-Md.eot') format("eot"), url('UniversNextforHSBCW29-Md.woff') format("woff"), url('UniversNextforHSBCW29-Md.ttf') format("truetype");
  font-weight: 600;
}
@font-face {
  font-family: "UniversNext";
  src: url('UniversNextforHSBCW29-Bold.eot');
  src: url('UniversNextforHSBCW29-Bold.eot') format("eot"), url('UniversNextforHSBCW29-Bold.woff') format("woff"), url('UniversNextforHSBCW29-Bold.ttf') format("truetype");
  font-weight: 700;
}
* {
  box-sizing: border-box;
}
/* TScale: 1 */
:root {
  --primary-color: #db0011;
  --light-gray: #d7d8d6;
  --error-bg-color: #f9f2f3;
  --error-border-color: #a8000b;
  --warning-border-color: #FFBB33;
  --success-border-color: #00847F;
  --text-gray-color: #333333;
  --black-color: #000000;
  --white-color: #ffffff;
  --btn-hover-bg: #F1F3F4;
  --btn-press-bg: #C9D0D5;
  --btn-primary-hover-bg: #AF000D;
  --btn-primary-press-bg: #83000A;
  --f4: 0.25rem;
  --f8: 0.5rem;
  --f9: 0.5625rem;
  --f11: 0.6875rem;
  --f12: 0.75rem;
  --f13: 0.8125rem;
  --f15: 0.9375rem;
  --f16: 1rem;
  --f20: 1.25rem;
  --f44: 2.75rem;
  --f60: 3.75rem;
  --s1: 2.063rem;
  --s2: 1.750rem;
  --s3: 1.438rem;
  --s4: 1.188rem;
  --s5: 1rem;
  --s6: 0.875rem;
  --r3: 0.75rem;
  --r4: 1rem;
  --r5: 1.25rem;
  --font-family: "UniversNext";
  --logo-width: 110px;
  --table-header-bg: #E4E8EA;
  --table-cell-v-border-color: #F1F3F4;
  --table-cell-h-border-color: #C9D0D5;
  --common-transition: all 0.3s;
  --border-radius: 0.5rem;
}
html, body {
  margin: 0;
  padding: 0;
  font-family: var(--font-family);
  font-weight: normal;
}
h1 {
  font-size: var(--s2);
  font-weight: normal;
  border-left: 3px solid var(--primary-color);
  padding-left: var(--f20);
}
button {
  min-height: var(--f44);
  font-family: var(--font-family);
  font-size: var(--s5);
  padding: var(--f9) var(--f20) var(--f11) var(--f20);
  border: 1px solid var(--black-color);
  color: var(--black-color);
  background-color: var(--white-color);
  margin: var(--f15) var(--f8);
}
button:hover:not(:disabled) {
  background-color: var(--btn-hover-bg);
}
button:active:not(:disabled) {
  background-color: var(--btn-press-bg);
}
button.primary:not(:disabled) {
  color: var(--white-color);
  background-color: var(--primary-color);
  border: none;
}
button.primary:not(:disabled):hover {
  background-color: var(--btn-primary-hover-bg);
}
button.primary:not(:disabled):active {
  background-color: var(--btn-primary-press-bg);
}
button:disabled {
  color: var(--text-gray-color) !important;
  background-color: none !important;
  border: 1px solid var(--text-gray-color) !important;
  opacity: 0.3 !important;
}
.container {
  max-width: 1450px;
  margin-left: auto;
  margin-right: auto;
}
.form-container {
  margin-left: calc(-1 * var(--f15));
}
table {
  width: 100%;
}
table th, table td {
  padding: var(--f9) var(--f16) var(--f11) var(--f16);
}
table th {
  text-align: left;
  background: var(--table-header-bg);
}
table tr {
  border-bottom: 1px solid var(--table-cell-h-border-color);
  display: flex;
  justify-content: space-between;
}
table td {
  border-left: 1px solid var(--table-cell-v-border-color);
  border-right: 1px solid var(--table-cell-v-border-color);
}
table td button {
  margin: 2px;
  min-height: 22px;
}
table td.Active {
  color: var(--success-border-color);
}
table td.Inactive {
  color: var(--warning-border-color);
}
table td.Deleted {
  color: var(--error-border-color);
}
section.text-input, section.role-input, .modify-tsp-list-container, section.select {
  display: flex;
  flex-direction: column;
  margin: var(--f15);
}
section.text-input label, section.role-input label, .modify-tsp-list-container label, section.select label {
  font-size: var(--s5);
  margin-bottom: var(--f8);
}
section.text-input label .asterisk, section.role-input label .asterisk, .modify-tsp-list-container label .asterisk, section.select label .asterisk {
  color: var(--error-border-color);
}
section.text-input input[type=text], section.text-input select, section.role-input input[type=text], section.role-input select, .modify-tsp-list-container input[type=text], .modify-tsp-list-container select, section.select input[type=text], section.select select {
  min-height: var(--f44);
  padding: var(--f9) var(--f12) var(--f11) var(--f12);
  font-size: var(--s5);
  font-family: var(--font-family);
}
section.text-input .error, section.role-input .error, .modify-tsp-list-container .error, section.select .error {
  display: none;
  font-size: var(--s6);
  margin-top: var(--f8);
}
section.text-input .error i.error-icon, section.role-input .error i.error-icon, .modify-tsp-list-container .error i.error-icon, section.select .error i.error-icon {
  margin-right: var(--f4);
  display: inline-block;
  width: var(--s6);
  background-image: url(/assets/images/status_error_onlight.svg);
  background-repeat: no-repeat;
  background-position: center;
}
.d-none {
  display: none !important;
}
.action-area {
  text-align: right;
  margin: 0 var(--f8);
}
.stop-scroll {
  overflow-y: hidden;
}
app-text-input.ng-invalid.ng-touched .form-control > input, app-text-input.ng-invalid.ng-touched .form-control > select, app-select.ng-invalid.ng-touched .form-control > input, app-select.ng-invalid.ng-touched .form-control > select {
  border: 1px solid var(--error-border-color);
  background-color: var(--error-bg-color);
}
app-text-input.ng-invalid.ng-touched .form-control > input option, app-text-input.ng-invalid.ng-touched .form-control > select option, app-select.ng-invalid.ng-touched .form-control > input option, app-select.ng-invalid.ng-touched .form-control > select option {
  white-space: pre-wrap;
}
app-text-input.ng-invalid.ng-touched .error, app-select.ng-invalid.ng-touched .error {
  display: flex;
}
app-psp-role-input.ng-invalid.ng-touched table {
  border: 1px solid var(--error-border-color);
}
app-psp-role-input.ng-invalid.ng-touched .error {
  display: flex;
}
.form-container {
  display: flex;
  flex-wrap: wrap;
}
.form-container app-text-input, .form-container app-select {
  flex: 0 1 50%;
}
.form-container app-psp-role-input {
  flex: 1 1 100%;
}

/*# sourceMappingURL=styles.css.map*/