:root {
  --f7-theme-color: #2ab19a;
  --f7-theme-color-rgb: 219, 62, 47;
  --f7-theme-color-shade: #267672;
  --f7-theme-color-tint: #009A88;
  --logo-light: url(logo.png);
  --logo-dark: url(logo.png);
  
  --green-primary: #11A24AFF;
  --green-secondary: #11A24A80;
  --orange-primary: #ff9600FF;
  --orange-secondary: #ff960080;
  --red-primary: #FF0000FF;
  --red-secondary: #FF000080;
  --gray-primary: #a9a9a9FF;
  --gray-secondary: #a9a9a980;
  --purple-primary: #800080FF;
  --purple-secondary: #80008080;
  --pink-primary: #FFC0CBFF;
  --pink-secondary: #FFC0CB80;

  --default-scrollToPulse-time: 2s;

  --fa-default-color: #848484ba; /*niet zwart of wit want dan werkt dark-mode niet meer*/
  --fa-default-primary-color: var(--f7-theme-color-shade);
  --fa-default-secondary-color: var(--f7-theme-color);

  /*f7 zelf overruled*/
  --f7-login-screen-content-bg-color: #00000031;

  /*zX styling*/
  --zXListRow-height: 50px;
  --zXTotalRow-height: 30px;
  --zXTotalCell-background-color: #eaeaea80;
}

/*iOS pakt deze style in combinatie met een meta tag*/
/*body { background-color: var(--f7-theme-color); }*/

/*font-awesome start*/
.fa-9knots {
  color: #493087FF;
}
.main-color { --fa-primary-color: var(--fa-default-primary-color);/*from logo*/ }
.main-color-gray { --fa-primary-color: var(--gray-primary); }
.main-color-red { --fa-primary-color: var(--red-primary); }
.main-color-orange { --fa-primary-color: var(--orange-primary); }
.main-color-green { --fa-primary-color: var(--green-primary); }
.main-color-purple { --fa-primary-color: var(--purple-primary); }
.main-color-pink { --fa-primary-color: var(--pink-primary); }

.secondary-color { --fa-secondary-color: var(--fa-default-secondary-color);/*from logo*/ }
.secondary-color-gray { --fa-secondary-color: var(--gray-secondary); }
.secondary-color-red { --fa-secondary-color: var(--red-secondary); }
.secondary-color-orange { --fa-secondary-color: var(--orange-secondary); }
.secondary-color-green { --fa-secondary-color: var(--green-secondary); }
.secondary-color-purple { --fa-secondary-color: var(--purple-secondary); }
.secondary-color-pink { --fa-secondary-color: var(--pink-secondary); }

/*voor 1 icoontje, de usecase-list wordt alleen gebruikt op de startpagina*/
/*.usecase-list .fa-island-tropical { --fa-primary-color: #2cdd08; --fa-secondary-color: #a36700; }*/

.fa-layers-counter:empty {
  display: none;
}
/*font-awesome end*/


/*eigen css start*/
@media screen and (orientation:landscape) {
  ul.landscape {
    display: grid;
    place-content: space-around;
    grid-template-columns: repeat(2, 1fr);
  }
}

#navbarLogo { 
  max-height: 48px;
  max-width: 50%;
  content: var(--logo-dark);
}
html.dark #navbarLogo {
  content: var(--logo-light);
}
/*@media (prefers-color-scheme: light){ #navbarLogo { content: var(--logo-dark); } }
@media (prefers-color-scheme: dark){ #navbarLogo { content: var(--logo-light); } }*/
/*eigen css end*/

#versionContainer.bottom {
  position: absolute;
  left: 0;
  bottom: 0;
}

input[type="time"]::-webkit-calendar-picker-indicator {
  background: none;
  display:none;
}

.holiday {
  background-color:#ddf85f!important;
}

.verplichteVrijeDag {
  background-color:#ddf85f!important;
}

/*start: elementen lekker opvallend maken*/
.color-to-orange {
  background-color: var(--orange-primary); /*stiekem snel op oranje zetten, zodat ie na de transition oranje is.*/
  animation: color-to-orange 1s ease-out;
}
  
@keyframes color-to-orange {
  0% {
    background-color: var(--f7-button-fill-bg-color, var(--f7-theme-color));
  }
  100% {
    background-color: var(--orange-primary);
  }
}
/*end: elementen lekker opvallend maken*/

/*width voor inputs.*/
input[type=checkbox] input[type=date], input[type=datetime-local], input[type=email], input[type=month], input[type=number], input[type=password], input[type=search], input[type=tel], input[type=text], input[type=time], input[type=url] {
  height: 4vh;
  /*background-color: red;*/
}
select {
  /*width: 100%;*/
  /*background-color: red;*/
}
textarea {
  /*background-color: red;*/
}

/*duidelijker tonen, f7 heeft geen randjes om input velden, f7 prefereert inline label+input*/
.clearerInputField {
  border: solid 1px var(--gray-secondary);
}

/*settings onderaan zetten*/
#leftMenu .settings-list {
  bottom: 0;
  width: 100%;
  position: fixed;
}

/*hoort bij andere casemaster.css styling*/
.Even, .Odd {
  height: var(--zXListRow-height);
}
/*hoort bij andere casemaster.css styling*/
.zxTotalRow {
  height: var(--zXTotalRow-height);
  font-weight: bold; 
}
.zxTotalCell{
  background-color: var(--zXTotalCell-background-color);
}
/*.zxTotalCell::before {
  content: 'totaal: ';
}*/

/*dit is lelijke styling. hekwerken B.V. was not here*/
/*dit is voor ONDER ANDERE 1 element die onder aan een lijst komt, 1 of 20 rows displayed*/
.zxSoftMsg {
  background-color: red;
  display: none;
}
/*dit haalt borders weg.. waarom willen we dit? weet ik niet.*/
table:has(td) {
  border-collapse: collapse;
}

/*om gewon een stukje tekst achter het invoerveld te zetten, balen dat het zo moet*/
/*[name=ctrLdprsnnlldExtnd]:after {
  content: 'aanklikken indien het een uitbreiding van uren van een bestaande opdracht betreft'
}*/

/*v6.2*/
.zXRowClass:has(input,select,textarea):focus-within {
  border-bottom: 1px solid var(--fa-default-primary-color);
  transition: border 0.3s linear;
}

.zXRowClass:has(input,select,textarea) { /*ook transition voor terugzetten naar normaal*/
  transition: border 0.3s linear;
}

.zXRowClass {
  min-height: 55px;
}

/*firework start*/
.firework-backdrop.backdrop-in {
  visibility: visible;
  opacity: 1;
}
.firework-backdrop {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,.4);
  z-index: 13000;
  visibility: hidden;
  opacity: 0;
  transition-duration: .4s;
}
/*firework end*/

/*page-scroll-progress bar start*/
.page-scroll-progress[value] {
  -webkit-appearance: none;
  appearance: none;
  position: fixed;
  width: 100vw;
  height: 3px;
  top: 0px;
  left: 0px;
}
.page-scroll-progress::-webkit-progress-bar {
  background-color: var(--gray-secondary);
}
.page-scroll-progress::-webkit-progress-value {
  background-color: var(--f7-theme-color);
}
/*page-scroll-progress bar end*/