/*!
 * Copyright 2023-2024 White Frost B.V.
 */

 @import url("wbocolors.css");
 @import url("wbobase.css");

.mybody  {
  font-weight: 400;
  font-family: "Montserrat", "Helvetica", Arial, sans-serif;
  color: var(--gcDarkred) !important;
  background-color: var(--gcIvory);
}

h1,
.h1,
h2,
.h2,
h3,
.h3,
h4,
.h4,
h5,
.h5,
h6,
.h6,
p,
.navbar,
.brand,
a,
.td-name,
td,
button,
input,
select,
textarea {
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-family: "Montserrat", "Helvetica", Arial, sans-serif;
  font-weight: 500;
}

/* default Button */ 
.wbodefault-button {
  border: 2px solid var(--WBONewColor);
  color: var(--WBOFontColor);
  background-color: var(--WBONewColor);
}

.wbodefault-button::before {
  font-family: FontAwesome;
  content: "\f0e7";
}

.wbodefault-button:hover {
  background-color: var(--WBOFontColor);
  color: var(--WBONewColor);
}

/* Standaard Button */
.wbobasics-button {
    border: 2px solid var(--WBOBeheerColor);
    color: var(--WBOFontColor);
    background-color: var(--WBOBeheerColor);
}

.wbobasics-button::before {
  font-family: FontAwesome;
  content: "\f0e2";
}

.wbobasics-button:hover {
    background-color: var(--WBOFontColor);
    color: var(--WBOBeheerColor);
  }


/* TOP Button */ 
.wbotop-button {
  border: 2px solid var(--WBOArrowColor);
  color: var(--WBOFontColor);
  background-color: var(--WBOArrowColor);
}

.wbotop-button::before {
  font-family: FontAwesome;
  content: "\f102";
}

.wbotop-button:hover {
  background-color: var(--WBOFontColor);
  color: var(--WBOArrowColor);
}

/* UP Button */ 
.wboup-button {
  border: 2px solid var(--WBOArrowColor);
  color: var(--WBOFontColor);
  background-color: var(--WBOArrowColor);
}

.wboup-button::before {
  font-family: FontAwesome;
  content: "\f106";
}

.wboup-button:hover {
  background-color: var(--WBOFontColor);
  color: var(--WBOArrowColor);
}

/* DOWN Button */ 
.wbodown-button {
  border: 2px solid var(--WBOArrowColor);
  color: var(--WBOFontColor);
  background-color: var(--WBOArrowColor);
}

.wbodown-button::before {
  font-family: FontAwesome;
  content: "\f107";
}

.wbodown-button:hover {
  background-color: var(--WBOFontColor);
  color: var(--WBOArrowColor);
}

/* Bottom Button */ 
.wbobottom-button {
  border: 2px solid var(--WBOArrowColor);
  color: var(--WBOFontColor);
  background-color: var(--WBOArrowColor);
}

.wbobottom-button::before {
  font-family: FontAwesome;
  content: "\f103";
}

.wbobottom-button:hover {
  background-color: var(--WBOFontColor);
  color: var(--WBOArrowColor);
}


/* First Button */ 
.wbofirst-button {
  border: 2px solid var(--WBOArrowColor);
  color: var(--WBOFontColor);
  background-color: var(--WBOArrowColor);
}

.wbofirst-button::before {
  font-family: FontAwesome;
  content: "\f100";
}

.wbofirst-button:hover {
  background-color: var(--WBOFontColor);
  color: var(--WBOArrowColor);
}

/* Volgende Button */ 
.wbonext-button {
  border: 2px solid var(--WBOArrowColor);
  color: var(--WBOFontColor);
  background-color: var(--WBOArrowColor);
}

.wbonext-button::after {
  font-family: FontAwesome;
  content: "\f105";
  margin-left: 5px;
}

.wbonext-button:hover {
  background-color: var(--WBOFontColor);
  color: var(--WBOArrowColor);
}

/* Vorige Button */ 
.wboprevious-button {
  border: 2px solid var(--WBOArrowColor);
  color: var(--WBOFontColor);
  background-color: var(--WBOArrowColor);
}

.wboprevious-button::before {
  font-family: FontAwesome;
  content: "\f104";
}

.wboprevious-button:hover {
  background-color: var(--WBOFontColor);
  color: var(--WBOArrowColor);
}

/* Volgende Button */ 
.wbolast-button {
  border: 2px solid var(--WBOArrowColor);
  color: var(--WBOFontColor);
  background-color: var(--WBOArrowColor);
}

.wbolast-button::after {
  font-family: FontAwesome;
  content: "\f101";
  margin-left: 5px;
}

.wbolast-button:hover {
  background-color: var(--WBOFontColor);
  color: var(--WBOArrowColor);
}

/* SMS Button */ 
.wbosms-button {
  border: 2px solid var(--WBOSMSColor);
  color: var(--WBOFontColor);
  background-color: var(--WBOSMSColor);
}

.wbosms-button::before {
  font-family: FontAwesome;
  content: "\f3cf";
}

.wbosms-button:hover {
  background-color: var(--WBOFontColor);
  color: var(--WBOSMSColor);
}

/* Call Button */ 
.wbocall-button {
  border: 2px solid var(--WBOCallColor);
  color: var(--WBOFontColor);
  background-color: var(--WBOCallColor);
}

.wbocall-button::before {
  font-family: FontAwesome;
  content: "\f095";
}

.wbocall-button:hover {
  background-color: var(--WBOFontColor);
  color: var(--WBOCallColor);
}


/* File Button */ 
.wbofile-button {
  border: 2px solid var(--WBOExportColor);
  color: var(--WBOFontColor);
  background-color: var(--WBOExportColor);
}

.wbofile-button::before {
  font-family: FontAwesome;
  content: "\f56e";
}

.wbofile-button:hover {
  background-color: var(--WBOFontColor);
  color: var(--WBOExportColor);
}

/* Export Button */ 
.wboexport-button {
  border: 2px solid var(--WBOExportColor);
  color: var(--WBOFontColor);
  background-color: var(--WBOExportColor);
}

.wboexport-button::before {
  font-family: FontAwesome;
  content: "\f019";
}

.wboexport-button:hover {
  background-color: var(--WBOFontColor);
  color: var(--WBOExportColor);
}

/* Import Button */ 
.wboimport-button {
  border: 2px solid var(--WBOImportColor);
  color: var(--WBOFontColor);
  background-color: var(--WBOImportColor);
}

.wboimport-button::before {
  font-family: FontAwesome;
  content: "\f093";
}

.wboimport-button:hover {
  background-color: var(--WBOFontColor);
  color: var(--WBOImportColor);
}

/* Wizard Button */
.wbowizard-button {
  border: 2px solid var(--gcRosybrown);
  color: var(--WBOFontColor);
  background-color: var(--gcRosybrown);
}

.wbowizard-button::before {
font-family: FontAwesome;
content: "\f6e8";
}

.wbowizard-button:hover {
  background-color: var(--WBOFontColor);
  color: var(--gcRosybrown);
}

/* Change Button */
.wbochange-button {
    border: 2px solid var(--WBOEditColor);
    color: var(--WBOFontColor);
    background-color: var(--WBOEditColor);
}

.wbochange-button::before {
  font-family: FontAwesome;
  content: "\f044";
}

.wbochange-button:hover {
    background-color: var(--WBOFontColor);
    color: var(--WBOEditColor);
  }


/* Cycle Button */
.wbocycle-button {
    border: 2px solid var(--WBOEditColor);
    color: var(--WBOFontColor);
    background-color: var(--WBOEditColor);
}

.wbocycle-button::before {
  font-family: FontAwesome;
  content: "\f044";
}

.wbocycle-button:hover {
    background-color: var(--WBOFontColor);
    color: var(--WBOEditColor);
  }


/* Overzicht Button */ 
.wbooverview-button {
  border: 2px solid var(--WBOOverviewColor);
  color: var(--WBOFontColor);
  background-color: var(--WBOOverviewColor);
}

.wbooverview-button::before {
  font-family: FontAwesome;
  content: "\f03a";
}

.wbooverview-button:hover {
  background-color: var(--WBOFontColor);
  color: var(--WBOOverviewColor);
}

/* Task Button */ 
.wbotask-button {
  border: 2px solid var(--WBOTaskColor);
  color: var(--WBOFontColor);
  background-color: var(--WBOTaskColor);
}

.wbotask-button::before {
  font-family: FontAwesome;
  content: "\f0ae";
}

.wbotask-button:hover {
  background-color: var(--WBOFontColor);
  color: var(--WBOTaskColor);
}

 /* Search Button */ 
.wbosearch-button {
    border: 2px solid var(--WBOSearchColor);
    color: var(--WBOFontColor);
    background-color: var(--WBOSearchColor);
}

.wbosearch-button::before {
  font-family: FontAwesome;
  content: "\f002";
}

.wbosearch-button:hover {
    background-color: var(--WBOFontColor);
    color: var(--WBOSearchColor);
  }

 /* refresh Button */

.wborefresh-button {
    border: 2px solid var(--WBORefreshColor);
    color: var(--WBOFontColor);
    background-color: var(--WBORefreshColor);
}

.wborefresh-button::before {
  font-family: FontAwesome;
  content: "\f021";
}

.wborefresh-button:hover {
    background-color: var(--WBOFontColor);
    color: var(--WBORefreshColor);
  }

 /* clear Button */

.wboclear-button {
  border: 2px solid var(--WBOClearColor);
  color: var(--WBOFontColor);
  background-color: var(--WBOClearColor);
}

.wboclear-button::before {
font-family: FontAwesome;
content: "\e17b";
}

.wboclear-button:hover {
  background-color: var(--WBOFontColor);
  color: var(--WBOClearColor);
}  

/* Register Button */
.wboregister-button {
  border: 2px solid var(--gcForestgreen);
  color: var(--WBOFontColor);
  background-color: var(--gcForestgreen);
}

.wboregister-button::before {
  font-family: FontAwesome;
  content: "\f2c2";
}

.wboregister-button:hover {
  background-color: var(--WBOFontColor);
  color: var(--gcForestgreen);
}

/* Login Button */
.wbologin-button {
  border: 2px solid var(--gcMediumblue);
  color: var(--WBOFontColor);
  background-color: var(--gcMediumblue);
}

.wbologin-button::before {
  font-family: FontAwesome;
  content: "\f090";
}

.wbologin-button:hover {
  background-color: var(--WBOFontColor);
  color: var(--gcMediumblue);
}

/* Add Button */
.wboadd-button {
  border: 2px solid var(--WBOAddColor);
  color: var(--WBOFontColor);
  background-color: var(--WBOAddColor);
}

.wboadd-button::before {
font-family: FontAwesome;
content: "\002b";
}

.wboadd-button:hover {
  background-color: var(--WBOFontColor);
  color: var(--WBOAddColor);
}

/* New Button */
.wbonew-button {
    border: 2px solid var(--WBONewColor);
    color: var(--WBOFontColor);
    background-color: var(--WBONewColor);
}

.wbonew-button::before {
  font-family: FontAwesome;
  content: "\002b";
}

.wbonew-button:hover {
    background-color: var(--WBOFontColor);
    color: var(--WBONewColor);
  }

/* Edit Button */
.wboedit-button {
    border: 2px solid var(--WBOEditColor);
    color: var(--WBOFontColor);
    background-color: var(--WBOEditColor);
}

.wboedit-button::before {
  font-family: FontAwesome;
  content: "\f044";
}

.wboedit-button:hover {
    background-color: var(--WBOFontColor);
    color: var(--WBOEditColor);
  }
  

  /* Save Button */
.wbosave-button {
    border: 2px solid var(--WBOSaveColor);
    color: var(--WBOFontColor);
    background-color: var(--WBOSaveColor);
}

.wbosave-button::before {
  font-family: FontAwesome;
  content: "\f0c7";
}

.wbosave-button:hover {
    background-color: var(--WBOFontColor);
    color: var(--WBOSaveColor);
  }

/* Cancel Button */
.wbocancel-button {
    border: 2px solid var(--WBOCancelColor);
    color: var(--WBOFontColor);
    background-color: var(--WBOCancelColor);
}

.wbocancel-button::before {
  font-family: FontAwesome;
  content: "\f00d";
}

.wbocancel-button:hover {
    background-color: var(--WBOFontColor);
    color: var(--WBOCancelColor);
  }

  /* Close Button */
.wboclose-button {
  border: 2px solid var(--WBOCloseColor);
  color: var(--WBOFontColor);
  background-color: var(--WBOCloseColor);
}

.wboclose-button::before {
  font-family: FontAwesome;
  content: "\f08b";
}

.wboclose-button:hover {
  background-color: var(--WBOFontColor);
  color: var(--WBOCloseColor);
}

 /* PDF Button */
.wbopdf-button {
    border: 2px solid var(--WBOPDFColor);
    color: var(--WBOFontColor);
    background-color: var(--WBOPDFColor);
}

.wbopdf-button::before {
  font-family: FontAwesome;
  content: "\f1c1";
}

.wbopdf-button:hover {
    background-color: var(--WBOFontColor);
    color: var(--WBOPDFColor);
  } 

  /* E-Mail Button */
.wboemail-button {
    border: 2px solid var(--WBOEmailColor);
    color: var(--WBOFontColor);
    background-color: var(--WBOEmailColor);
}

.wboemail-button::before {
  font-family: FontAwesome;
  content: "\f0e0";
}

.wboemail-button:hover {
    background-color: var(--WBOFontColor);
    color: var(--WBOEmailColor);
  } 

/* E-Mail check Button */
.wboemailcheck-button {
  border: 2px solid var(--WBOEmailcheckColor);
  color: var(--WBOFontColor);
  background-color: var(--WBOEmailcheckColor);
}

.wboemailcheck-button::before {
font-family: FontAwesome;
content: "\e4e8";
}

.wboemailcheck-button:hover {
  background-color: var(--WBOFontColor);
  color: var(--WBOEmailcheckColor);
}   

 /* Select Button */
 .wboselect-button {
    border: 2px solid var(--WBOSelectColor);
    color: var(--WBOFontColor);
    background-color: var(--WBOSelectColor);
}

.wboselect-button::before {
  font-family: FontAwesome;
  content: "\f00c";
}

.wboselect-button:hover {
    background-color: var(--WBOFontColor);
    color: var(--WBOSelectColor);
  } 

  /* Invoice Button */
 .wboinvoice-button {
    border: 2px solid var(--WBOFactuurColor);
    color: var(--WBOFontColor);
    background-color: var(--WBOFactuurColor);
}

.wboinvoice-button::before {
  font-family: FontAwesome;
  content: "\f15c";
}

.wboinvoice-button:hover {
    background-color: var(--WBOFontColor);
    color: var(--WBOFactuurColor);
  }

/* Quotation Button */
.wboquotation-button {
    border: 2px solid var(--WBOOfferteColor);
    color: var(--WBOFontColor);
    background-color: var(--WBOOfferteColor);
}

.wboquotation-button::before {
  font-family: FontAwesome;
  content: "\f15c";
}

.wboquotation-button:hover {
    background-color: var(--WBOFontColor);
    color: var(--WBOOfferteColor);
  }

/* Rental Button */
.wborental-button {
    border: 2px solid var(--WBOVerhuurColor);
    color: var(--WBOFontColor);
    background-color: var(--WBOVerhuurColor);
}

.wborental-button::before {
  font-family: FontAwesome;
  content: "\f15c";
}

.wborental-button:hover {
    background-color: var(--WBOFontColor);
    color: var(--WBOVerhuurColor);
  }

/* Service Button */
.wboservice-button {
    border: 2px solid var(--WBOServiceColor);
    color: var(--WBOFontColor);
    background-color: var(--WBOServiceColor);
}

.wboservice-button::before {
  font-family: FontAwesome;
  content: "\f15c";
}

.wboservice-button:hover {
    background-color: var(--WBOFontColor);
    color: var(--WBOServiceColor);
  }

/* Settings Button */
.wbosettings-button {
    border: 2px solid var(--WBOBeheerColor);
    color: var(--WBOFontColor);
    background-color: var(--WBOBeheerColor);
}

.wbosettings-button::before {
  font-family: FontAwesome;
  content: "\f085";
}

.wbosettings-button:hover {
    background-color: var(--WBOFontColor);
    color: var(--WBOBeheerColor);
  }

  /* Permission Button */
.wbopermission-button {
  border: 2px solid var(--WBOPermissionColor);
  color: var(--WBOFontColor);
  background-color: var(--WBOPermissionColor);
}

.wbopermission-button::before {
font-family: FontAwesome;
content: "\f502";
}

.wbopermission-button:hover {
  background-color: var(--WBOFontColor);
  color: var(--WBOPermissionColor);
}