/* ############### HIER ONDER template.css ############### */
/* Voorbeeld: Verander de primaire kleur van de site */

  
/* ############### HIER BOVEN template.css ############### */

/*####################### CUSTOM CLASSES ###############################*/

/* CONTACT FORM INVOERVELDEN */
.formContainer .control-group {
    padding-right: 0px !important;
}
/* CAPTRCHA GROOTTE */
img, svg {
  vertical-align: top;
  width: 10%;
  height:auto;
}

body {
/* Zelde kleur (diep donker blauw) */
color: #010156;
color: rgb(34, 51, 104)
color: hsl(225.43deg 50.72% 27.06%)
font-size: 18px;
border-left: 30px;
}

.fixed-home-img {
 display: inline-block;     /*Allows width and height */
 /* border: 1px solid #ddd; */
  height: auto;
  width: 300px;
  object-fit: cover; /* of contain */
  margin-right:20px;
  margin-left:50px;
  margin-top:10px;
  margin-bottom:10px;
  vertical-align: top; 
  float: right;
  border-radius: 20px;
}

.fixed-img {
 display: inline-block;     /*Allows width and height */
 /* border: 1px solid #ddd; */
  height: auto;
  width: 250px;
  object-fit: cover; /* of contain */
  margin-right:20px;
  margin-left:50px;
  margin-top:10px;
  margin-bottom:10px;
  vertical-align: top; 
  float: right;
  border-radius: 20px;
}
}

/* CSS custom-contact-btn class */
.custom-contact-btn {
    background-color: #007bff; /* Button background color */
    color: white;              /* Text color */
    font-family: helvetica;
    font-weight: normal;
    border-style: solid;

    margin-top:20px;
    padding-left:   10px;       /* Padding */
    padding-top:    5px;       /* Padding */
    padding-right:  10px;       /* Padding */
    padding-bottom: 5px;       /* Padding */
    
    border-width: 3px;
    border-color: rgb(34, 51, 104);
    border-radius: 5px;      /* Rounded corners */
    font-size: 16px;          /* Font size */
    text-align: center;       /* Center text */
    text-decoration: none;    /* Remove underline */
    display: inline-block;    /* Allows width and height */
    transition: background-color 0.3s; /* Transition effect */
}

.custom-contact-btn:hover {
    background-color: #ff00ff;
}

/* CSS custom-glasbewassing-btn class */
.custom-glasbewassing-btn {
    background-color: #0fd3ff3b; /* Button background color */
    /* color: white; */              /* Text color */
    font-family: helvetica;
    font-weight: bold;
    border-style: solid;
    margin-top:20px;
    padding-left:   10px;       /* Padding */
    padding-top:    5px;       /* Padding */
    padding-right:  10px;       /* Padding */
    padding-bottom: 5px;       /* Padding */
    border-width: 3px;
    border-color: rgb(34, 51, 104);
    border-radius: 5px;      /* Rounded corners */
    font-size: 16px;          /* Font size */
    text-align: center;       /* Center text */
    text-decoration: none;    /* Remove underline */
    display: inline-block;    /* Allows width and height */
    transition: background-color 0.3s; /* Transition effect */
}

.custom-glasbewassing-btn:hover {
    background-color: #00ecff;
  
}

.line_divider_blue {
  /*flex:1;*/
  /*background-color: rgb(34, 51, 104);*/
  /*margin: 5px;*/
  font-size: 1px;
  align-items: center;
}
  
.line_dvider_blue::after {
/*.line_diivider_blue::before, .line_dvider_blue::after {
  flex: 1;
  content: '';
  padding: 1px;
  background-color: rgb(34, 51, 104);
  margin: 5px;
}

/* header-kop tabel*/
  thead, tbody, tfoot, tr, td, th {
  border-color: rgb(34, 51, 104);
  border-style: none;
  background-color: #f1f1f1;
 
    margin-top:20px;
    padding-left:   20px;       /* Padding */
    padding-top:    10px;       /* Padding */
    padding-right:  20px;       /* Padding */
    padding-bottom: 10px;       /* Padding */
    
    border-width: 3px;
    border-color: rgb(34, 51, 104);
    border-radius: 5px;      /* Rounded corners */
    font-size: 16px;          /* Font size */
    text-align: center;       /* Center text */
    text-decoration: none;    /* Remove underline */
    display: inline-block;    /* Allows width and height */
    transition: background-color 0.3s; /* Transition effect */
}

.custom-contact-btn:hover {
    background-color: #ff00ff;
}

/* VERWIJDERT ALLE UNDERLINES VAN MENU-ITEMS */
.mod-menu a,
.mod-menu a:hover,
.mod-menu a:active,
.mod-menu a:focus,
.mod-menu .current,
.mod-menu .active > a,
.mod-menu .item.active > a,
.mod-menu .current > a {
    text-decoration: none !important;
    border-bottom: none !important;
}

/* VERWIJDERT ALLE UNDERLINES VAN SUB MENU-ITEMS */
/* Voor submenu-items */
.mod-menu .nav-child a,
.mod-menu .nav-child a:hover,
.mod-menu .nav-child .current a,
.mod-menu .nav-child .active > a {
    text-decoration: none !important;
    border-bottom: none !important;
}

/* ------------------------------------
   BASIS: Styling algemene menu-items 
-------------------------------------*/
.mod-menu a,
.mod-menu button.mod-menu__heading {
    color: #222;
    text-decoration: none;
    transition: all 0.25s ease;
}

/* Hover kleur bovenmenu */
.mod-menu > .mod-list > li.level-1 > a:hover,
.mod-menu > .mod-list > li.level-1 > button:hover,
.mod-menu > .mod-list > li.level-1:hover > a,
.mod-menu > .mod-list > li.level-1:hover > button {
    color: #0066cc;
    background-color: #f0f0f0;
}

/* Active kleur */
.mod-menu .current > a,
.mod-menu .current > .mod-menu__heading {
    color: #fff;
    background-color: #0066cc;
}

/* ------------------------------------
   ▼ DROPDOWN ON HOVER
-------------------------------------*/
.mod-menu li.parent:hover > ul.mm-collapse {
    display: block !important;
    height: auto !important;
    visibility: visible !important;
    opacity: 1;
}

/* Verberg standaard (anders klapt hij altijd uit) */
.mod-menu ul.mm-collapse {
    display: none !important;
    height: 0 !important;
    opacity: 0;
    transition: all 0.25s ease;
    background: #fff;
    border-left: 1px solid #ddd;
}


/* ------------------------------------
   ▼ SUBMENU ITEMS
------------------------------------ */
.mod-menu ul.mm-collapse li a {
    padding: 10px 15px;
    display: block;
    color: #333;
    background: #fff;
    transition: all 0.2s ease;
}

.mod-menu ul.mm-collapse li a:hover {
    background: #eaf3ff;
    color: #0066cc;
}

/*####################### HIERBOVEN CUSTOM CLASSES ###############################*/
/*####################### HIERBOVEN CUSTOM CLASSES ###############################*/