/* colors: ['0D0D0D', 'E60000'] */

/* Primary: #0D0D0D */
/* Secondary: #E60000 */

/* --- If using fonts that are not google fonts, you will need to set the font-face for each font/weight. --- */
@font-face {
  font-family: EngelVoelkersHead_Rg;
  src: url("/themes/default/fonts/EngelVoelkersHead_Rg.ttf");
  font-source: normal;
  font-weight: 700;
}

@font-face {
  font-family: EngelVoelkersText_Rg;
  src: url("/themes/default/fonts/EngelVoelkersText_Rg.ttf");
  font-source: normal;
  font-weight: 400;
}

:root {
  --primary-color: #0D0D0D;
  --secondary-color: #E60000;
  --primary-font: "EngelVoelkersHead_Rg";
  --secondary-font: "EngelVoelkersText_Rg";
  --white: #fff;
}

body {
  color: var(--primary-color) !important;
  font-family: var(--secondary-font) !important;
}

p,
li {
  color: var(--primary-color) !important;
}

h3 {
  color: var(--primary-color) !important;
  font-family: var(--secondary-font) !important;
}

.font-primary {
  font-family: var(--primary-font) !important;
  font-feature-settings: "pnum", on, "lnum" on, "smcp" on !important;
  font-variant-ligatures: common-ligatures, contextual !important;
  text-rendering: optimizeLegibility !important;
  -webkit-font-smoothing: subpixel-antialiased !important;
}

/* --- SVG Icons --- */
.fill-primary {
  fill: var(--secondary-color) !important;
}

.fill-secondary {
  fill: var(--primary-color) !important;
}

.stroke-primary {
  stroke: var(--primary-color) !important;
}

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

/* --- Loading Screen --- */
.loading .logo {
  background: url("/themes/modern_engel_and_volkers/images/broker_logo.png") no-repeat !important;
  background-size: contain !important;
  height: 6rem !important;
  width: 15rem !important;
}

.loading .logo img,
.loading .logo svg {
  display: none !important;
}

.loading-complete .loading-icon svg {
  fill: var(--secondary-color) !important;
}

.loading-complete .loading-text {
  color: var(--primary-color) !important;
}

.loading-invisible .loading-text {
  color: var(--secondary-color) !important;
}

/* --- Header --- */
.header-title {
  color: var(--primary-color) !important;
}

.header.header-is-splash .logo img,
.headerheader-is-splash .logo svg,
.header .logo img,
.header .logo svg {
  display: none !important;
}

.header .logo {
  background: url("/themes/modern_engel_and_volkers/images/broker_logo.png") no-repeat !important;
  background-size: contain !important;
  height: 2.5rem !important;
  width: 18rem !important;
}

.menu-button svg {
  color: var(--primary-color) !important;
}

.menu-button svg:hover {
  color: var(--secondary-color) !important;
}

/* --- Hero --- */
.header.header-is-splash .logo {
  background: url("/themes/modern_engel_and_volkers/images/broker_logo.png")
    no-repeat !important;
  background-size: contain !important;
  height: 1.8rem !important;
  width: 14rem !important;
}

.hero-title,
.hero-client {
  color: var(--primary-color) !important;
}

.hero-title {
  font-family: var(--primary-font) !important;
}

.hero-address,
.hero-city-state-zip {
  color: var(--secondary-color) !important;
  font-family: var(--secondary-font) !important;
}

/* --- Agent ---*/
.agent-name,
.agent-company {
  color: var(--primary-color) !important;
}

.agent-avatar-container {
  border-color: var(--primary-color) !important;
}

.agent-menu-contact {
  background-color: var(--secondary-color) !important;
  color: var(--white) !important;
}

/* --- Page Title and Sub-title --- */
.page-title {
  color: var(--primary-color) !important;
}

.page-sub-title {
  color: var(--primary-color) !important;
}

/* --- Tile Title --- */
.preview-title {
  color: var(--primary-color) !important;
}

/* --- Tile Sub-Title --- */
/* .preview-sub-title {
  color: var(--secondary-color) !important;
} */

/* --- Custom Tile Icon Override  */
.preview.preview-custom-page .preview-illustration {
  background: url("/themes/modern_engel_and_volkers/images/broker_logo.png") center
    center / contain no-repeat;
  height: 9.6rem;
  width: 19.6rem;
}

.preview.preview-custom-page .preview-illustration svg {
  display: none;
}

/* --- Additional Page Details --- */
.page-description {
  color: var(--secondary-color) !important;
}

.page-description-value {
  color: var(--secondary-color) !important;
}

.switch-active,
.switch-active .switch-pill {
  background-color: var(--secondary-color) !important;
}

.group-listing-address {
  color: var(--primary-color) !important;
}

.group-listing-data {
  color: var(--secondary-color) !important;
}

.group-listing-bullet {
  color: var(--secondary-color) !important;
}

.estimated-market-value-stat-value {
  color: var(--primary-color) !important;
}

.comparable-group-header {
  font-family: var(--primary-font) !important;
}

.page-title-price-range {
  font-family: var(--primary-font) !important;
}

.group-title-avg-price {
  color: var(--primary-color) !important;
}

.group-title-online-valuations {
  color: var(--primary-color) !important;
}

.group-title-live-listings {
  color: var(--primary-color) !important;
}

.table-heading-avg-price {
  color: var(--primary-color) !important;
}

.table-heading-list-view {
  color: var(--primary-color) !important;
}

.table-heading-online-valuations {
  color: var(--primary-color) !important;
}

#live .money-distribution-chart.text-primary,
#live .importance-of-intelligent-pricing-chart.text-primary {
  color: var(--primary-color) !important;
}

/* --- Footer --- */
.footer-title {
  color: var(--primary-color) !important;
}

.footer-title svg {
  fill: var(--primary-color) !important;
}

.footer-telestrator {
  background-color: var(--secondary-color) !important;
}

.footer-telestrator svg path {
  fill: var(--white) !important;
}

.footer-border {
  background-color: var(--secondary-color) !important;
}