/*
Theme Name: Flowzo Divi 5
Theme URI: https://flowzo.nl
Description: Child theme voor Flowzo op Divi 5
Author: Vincent Bouwman
Template: Divi
Version: 1.0
*/

/* =========================================================
   FLOWZO ALGEMENE CSS
   Divi 5
   Versie 1.2
   ========================================================= */


/* =========================================================
   GROENE BULLETS
   Class: flowzo-green-bullets
   ========================================================= */

ul.flowzo-green-bullets,
.flowzo-green-bullets {
  list-style: none !important;
  list-style-type: none !important;
  padding-left: 0 !important;
}

.flowzo-green-bullets li {
  list-style: none !important;
  list-style-type: none !important;
  position: relative;
  padding-left: 26px;
  margin: 0 0 10px;
}

.flowzo-green-bullets li::marker {
  content: "" !important;
}

.flowzo-green-bullets li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.35em;
  width: 14px;
  height: 14px;
  background:
    url("/wp-content/uploads/2020/01/energiecentrum-4.svg")
    no-repeat center / contain;
}


/* =========================================================
   HORIZONTALE LIJN
   ========================================================= */

body:not(.et-dark-mode) hr.lijn {
  border: 0;
  border-top: 1px solid #cfcfcf !important;
}

body.et-dark-mode hr.lijn {
  border: 0;
  border-top: 1px solid #636363 !important;
}


/* =========================================================
   MEMBERPRESS ALGEMEEN
   ========================================================= */

a#mepr-account-subscriptions,
a#mepr-account-payments {
  display: none !important;
}

.button.mp-hide-pw .dashicons {
  margin-top: -4px;
}

.mp_wrapper textarea,
.mp_wrapper select,
.mp_wrapper input[type="text"],
.mp_wrapper input[type="url"],
.mp_wrapper input[type="email"],
.mp_wrapper input[type="tel"],
.mp_wrapper input[type="number"],
.mp_wrapper input[type="password"] {
  padding: 15px !important;
}

.mepr-select-field {
  max-width: 130px;
  margin-right: 5px;
  margin-bottom: 15px;
}

#user_last_name,
.mp-form-row.mepr_last_name {
  display: none;
}

input[type="submit"] {
  border: 1px solid #474747;
  display: block;
  margin: 0 auto;
  max-width: 444px;
}


/* =========================================================
   ALGEMENE STYLING
   ========================================================= */

.dropcap::first-letter {
  float: left;
  margin-right: 8px;
  font-size: 50px;
  font-weight: 500;
  line-height: 1;
}

.menuseparator {
  width: 80%;
  margin: 20px auto -20px !important;
  border-top: 1px solid #fdbd2c;
}

.cli-plugin-button,
.cli-plugin-button:visited,
.medium.cli-plugin-button,
.medium.cli-plugin-button:visited {
  border-radius: 20px !important;
}

.nav-links {
  display: none !important;
}

.wp-block-image figcaption {
  font-size: 12px;
}

.igfw {
  max-width: 375px;
}

.site-logo-img {
  margin-bottom: -10px;
}


/* =========================================================
   OPSOMMINGEN
   ========================================================= */

.rood,
.groen,
.oranje {
  list-style-type: none;
  margin-left: -8px;
  padding-left: 0;
}

ul.oranje {
  list-style-type: none;
  margin-left: -7px;
}

li.rood,
li.oranje,
li.geel,
li.groen,
li.blauw,
li.paars,
li.turquoise,
li.paarsgrijs {
  display: flex;
  align-items: center;
  position: relative;
  padding-left: 1.5em;
  margin-bottom: 0.5em;
}

li.rood::before,
li.oranje::before,
li.geel::before,
li.groen::before,
li.blauw::before,
li.paars::before,
li.turquoise::before,
li.paarsgrijs::before {
  content: "•";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  font-size: 30px;
  color: #f6a017;
}

li.rood::before {
  color: #fe0000;
}

li.oranje::before {
  color: #f6a017;
}

li.groen::before {
  color: #94cf01;
}

li.opsomming {
  padding-left: 2em;
  text-indent: -1em;
}

li.opsomming::before {
  font-family: "flowzo";
  content: "e90A";
  padding-right: 15px;
  font-size: 1em;
  color: #94cf01;
}


/* =========================================================
   BUTTONS
   ========================================================= */

button,
.ast-button,
input#submit,
input[type="button"],
input[type="submit"],
input[type="reset"] {
  font-size: 120%;
  font-weight: 500;
  text-transform: uppercase;
}

.button-primary:hover {
  transform: scale(1.1);
  transition: all 0.3s;
}


/* =========================================================
   DARK MODE
   ========================================================= */


/* Header */

body.et-dark-mode
.et_pb_section.et-dark-mode-capable.headersection {
  background-color: #191919 !important;
}


/* MadMenu */

body.et-dark-mode
.dvmm_menu_inner_container.dvmm-fe
.dvmm_link_text {
  color: #efefef !important;
}

body.et-dark-mode
.dvmm_menu_inner_container.dvmm-fe
.dvmm_link_text:hover {
  color: #ffbe00 !important;
}

body.et-dark-mode .dvmm_logo_img {
  content:
    url("/wp-content/uploads/2021/10/flowzo-volg-je-natuurlijke-flow-zwart-3-1.svg");
}

body.et-dark-mode .thuisje > a::before,
body.et-dark-mode .homealt > a::before,
body.et-dark-mode.login > a::before,
body.et-dark-mode .logout > a::before,
body.et-dark-mode .blog > a::before,
body.et-dark-mode .blauwdrukje > a::before {
  color: #efefef;
}

body.et-dark-mode .settings > a::before,
body.et-dark-mode .mail > a::before {
  color: #efefef !important;
}

body.et-dark-mode .et_pb_button {
  color: #efefef;
  border: 0 solid #efefef !important;
}

body.et-dark-mode .sub-menu {
  background-color: #000 !important;
}

body.et-dark-mode .dvmm_submenu_toggle,
body.et-dark-mode .dvmm_toggle_text,
body.et-dark-mode .dvmm_mobile_menu_toggle_icon::before {
  color: #efefef !important;
}

body.et-dark-mode
.section_has_divider
.et_pb_bottom_divider {
  color: #000;
}


/* =========================================================
   DARK MODE TOGGLE
   ========================================================= */

.et-dark-mode {
  transition: all 0.5s;
}

.et-dark-toggle {
  cursor: pointer;
  transition: all 0.5s;
}

body.et-dark-mode .et-dark-toggle {
  border-color: #666666;
}

body.et-dark-mode .et-dark-toggle::after {
  content: "donker";
  color: #efefef;
  left: 54px;
}

body.et-dark-mode
.et-dark-toggle
.et_pb_blurb_content {
  text-align: right;
}

body.et-dark-mode
.et-dark-toggle
.et-pb-icon {
  color: #666666;
}


/* =========================================================
   BODY DARK MODE
   ========================================================= */

body.et-dark-mode {
  background-color: rgba(0, 0, 0, 0.5) !important;
}


/* =========================================================
   DARK MODE CAPABLE ELEMENTEN
   ========================================================= */


/* Section */

body.et-dark-mode
.et_pb_section.et-dark-mode-capable {
  background-color: #191919 !important;
  background-blend-mode: overlay;
  color: #efefef !important;
  transition: opacity 0.5s ease-in-out;
}


/* Frontpage */

body.et-dark-mode
.et_pb_section.et-dark-mode-capable.frontpage {
  background-color: #191919 !important;
  background-blend-mode: normal !important;
  color: #efefef !important;
}


/* Row */

body.et-dark-mode
.et_pb_row.et-dark-mode-capable {
  background-color: #2b2b2b !important;
  color: #efefef !important;
}


/* Author row */

body.et-dark-mode
.et_pb_row.et-dark-mode-capable.author {
  background-color: #4d4d4d !important;
  color: #efefef !important;
}


/* Column */

body.et-dark-mode
.et_pb_column.et-dark-mode-capable {
  background-color: rgba(0, 0, 0, 0.5) !important;
  color: #efefef !important;
}


/* Module */

body.et-dark-mode
.et_pb_module.et-dark-mode-capable {
  background-color: transparent !important;
  color: #efefef !important;
}


/* Headings */

body.et-dark-mode
.et_pb_module.et-dark-mode-capable.et_pb_module_header,
body.et-dark-mode
.et_pb_module.et-dark-mode-capable h1,
body.et-dark-mode
.et_pb_module.et-dark-mode-capable h2,
body.et-dark-mode
.et_pb_module.et-dark-mode-capable h3,
body.et-dark-mode
.et_pb_module.et-dark-mode-capable h4,
body.et-dark-mode
.et_pb_module.et-dark-mode-capable h5,
body.et-dark-mode
.et_pb_module.et-dark-mode-capable h6 {
  color: #efefef !important;
}


/* MadMenu item */

body.et-dark-mode
.et-dark-mode-capable.dvmm_link_text {
  color: #efefef !important;
}


/* Meer lezen */

body.et-dark-mode
.et_pb_row.et-dark-mode-capable.meer-lezen {
  border: 1px solid #3d3d3d;
}


/* =========================================================
   BLOGGRID
   ========================================================= */

body.et-dark-mode
.et_blog_grid_equal_height article {
  background-color: #474747;
  color: #efefef;
  border: 0 solid #333333;
  transition:
    background-color 0.3s ease,
    color 0.3s ease;
}

body.et-dark-mode
.et_pb_blog_0
.et_pb_post
.entry-title h2 {
  color: #efefef !important;
}

body.et-dark-mode
.et_pb_blog_0
.post-meta,
body.et-dark-mode
.et_pb_title_meta_container,
body.et-dark-mode
.et_pb_title_meta_container a,
body.et-dark-mode
.et_pb_bg_layout_light
.et_pb_post p {
  color: #efefef !important;
}


/* =========================================================
   MEMBER INSTELLINGEN FORMULIER
   ========================================================= */

body.et-dark-mode
.mp_wrapper
.mp-form-row label,
body.et-dark-mode
.mp_wrapper label {
  color: #474747 !important;
}


/* =========================================================
   FLOWZO CUSTOM MENU ICONS
   ========================================================= */

@font-face {
  font-family: "flowzo";
  src:
    url("/wp-content/uploads/2020/01/flowzo.woff") format("woff"),
    url("/wp-content/uploads/2020/01/flowzo.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
}


/* Algemene icon styling */

nav li a::before {
  text-align: center;
  vertical-align: middle;
  margin-right: 10px;
  margin-left: -10px;
  color: #fff;
  font-size: 1em;
  transition: all 0.3s ease;
}


/* Kleurenspiraal */

.kleurenspiraal > a::before {
  content: "";
  display: inline-block;
  width: 30px;
  height: 30px;
  margin-right: 10px;
  margin-left: -10px;
  border-radius: 15px;
  background-image:
    url("/wp-content/uploads/2024/12/cirkel-zonder-getallen.png");
  background-size: cover;
  background-position: center;
}


/* Menu icons */

.thuisje > a::before,
.homealt > a::before,
.login > a::before {
  font-family: "flowzo";
  content: "\e905";
  margin-right: 11px;
  font-size: 1.4em;
  color: #474747;
}

.blauwdrukje > a::before {
  font-family: "flowzo";
  content: "\e800";
  margin-left: -12px;
  margin-right: 13px;
  vertical-align: top;
  font-size: 1.8em;
  color: #efefef;
}

.blog > a::before {
  font-family: "flowzo";
  content: "\e900";
  margin-right: 11px;
  font-size: 1.8em;
  color: #efefef;
}

.logout > a::before {
  font-family: "flowzo";
  content: "\e908";
  margin-right: 11px;
  font-size: 1.8em;
  color: #efefef;
}

.mail > a::before {
  font-family: "flowzo";
  content: "\e901";
  margin-right: 19px;
  font-size: 1em;
  color: #474747;
}

.settings > a::before {
  font-family: "flowzo";
  content: "\e803";
  margin-right: 20px;
  font-size: 1.3em;
  color: #474747;
}

.expert > a::before {
  font-family: "flowzo";
  content: "\e813";
  margin-right: 20px;
  font-size: 1.3em;
  color: #474747;
}


/* Icon positioning */

.thuisje::before,
.homealt::before,
.login::before {
  display: inline-block;
  margin-right: -14px;
}

.settings::before,
.mail::before,
.expert::before,
.logout::before {
  margin-right: 8px;
}

.blauwdrukje::before {
  margin-left: 5px;
  margin-right: 5px;
}

.blog::before {
  margin-right: -14px;
}


/* Responsive icon colors */

@media only screen and (max-width: 1160px) {

  .thuisje > a::before,
  .homealt > a::before,
  .login > a::before,
  .mail > a::before,
  .settings > a::before,
  .expert > a::before {
    color: #efefef;
  }
}


/* =========================================================
   NUMBER ICONS
   ========================================================= */

.number-0 > a::before,
.number-1 > a::before,
.number-2 > a::before,
.number-3 > a::before,
.number-4 > a::before,
.number-5 > a::before,
.number-6 > a::before,
.number-7 > a::before,
.number-8 > a::before,
.number-9 > a::before {
  font-family: "flowzo";
  width: 30px;
  height: 30px;
  margin-right: 10px;
  margin-left: -10px;
  border-radius: 15px;
  line-height: 1.1em;
  font-size: 26px;
  color: #fff;
}

.number-0 > a::before {
  content: "\e804";
  background-color: #000;
}

.number-1 > a::before {
  content: "\e805";
  background-color: #fb0d1b;
}

.number-2 > a::before {
  content: "\e816";
  background-color: #fda028;
}

.number-3 > a::before {
  content: "\e807";
  background-color: #fdbd2c;
}

.number-4 > a::before {
  content: "\e808";
  background-color: #95cd28;
}

.number-5 > a::before {
  content: "\e809";
  background-color: #2ea1fb;
}

.number-6 > a::before {
  content: "\e80a";
  background-color: #6749e3;
}

.number-7 > a::before {
  content: "\e80b";
  background-color: #e0a3fc;
}

.number-8 > a::before {
  content: "\e80c";
  background-color: #9191c1;
}

.number-9 > a::before {
  content: "\e80d";
  background-color: #d0c49c;
}


/* =========================================================
   MENU TEXT
   ========================================================= */

.menu.numbercircle.number,
.menu {
  margin-right: 15px !important;
  font-size: 1.4em !important;
}


/* =========================================================
   DISPLAY USER
   ========================================================= */

.rmp_displayuser a {
  color: #febd2c !important;
}


/* =========================================================
   FLOWBLURB
   ========================================================= */

body:not(.et-dark-mode) .flowblurb {
  color: #474747;
}

body.et-dark-mode .flowblurb {
  color: #f5f5f5;
}