.portal-color {
  color: var(--portal-main-color) !important;
}

.portal-secondary-color {
  color: var(--portal-dark-color) !important;
}

.portal-background-color {
  background-color: var(--portal-main-color) !important;
}

.portal-background-color * {
  color: var(--portal-main-contrast) !important;
}

.portal-box {
  background-color: var(--portal-main-color) !important;
  color: var(--portal-main-contrast) !important;
  border: 1px solid var(--portal-main-color);
  height: 18px;
}

.portal-box .mat-select-value, .portal-box .mat-select-arrow {
  color: var(--portal-main-contrast) !important;
}

/* Button */
.portal-icon-button, .portal-icon-button:hover {
  background: var(--portal-main-color) !important;
  color: var(--portal-main-contrast) !important;
  border: 1px solid var(--portal-main-color) !important;
}

.portal-button, .portal-button-reverse:hover, .portal-button-reverse:active, .portal-button-reverse:focus {
  background-color: var(--portal-main-color);
  color: var(--portal-main-contrast) !important;
  border: 1px solid var(--portal-main-color);
  background-image: none;
}

.portal-button:hover, .portal-button:active, .portal-button:focus {
  background-color: var(--portal-dark-color);
  color: var(--portal-main-contrast) !important;;
  border: 1px solid var(--portal-dark-color);
  background-image: none;
}

.portal-button-reverse {
  background-color: var(--portal-main-contrast);;
  color: var(--portal-main-color) !important;;
  border: 1px solid var(--portal-main-color);
  background-image: none;
}

/* Link */
.portal-link {
  color: var(--portal-main-color) !important;
}

.portal-link:hover {
  text-decoration: underline !important;
}

/* Icon */
.portal-icon svg > * {
  fill: var(--portal-main-color);
}