/* Algemeen2 */
* {box-sizing: border-box;}
:root {
  --rood: #b92223;
  --groen: #4cda63;
  --oranje: #FFA500;
  --blauw: #0395ee;
  --licht-blauw: #cdebfe;
}

body {
    -webkit-text-size-adjust: none;
    margin: 0;
    line-height: 1.75em;
    color: #333;
    font-family: "proxima-nova", sans-serif;
    font-size: 13px;
    background: #f1f1f1;
    font-variant-numeric: tabular-nums;
}

.noselect {
  -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Old versions of Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome, Edge, Opera and Firefox */
}


a img    {border: 0;}
hr {background-color: #ccc; border: 0 none; clear: both; height: 1px; margin: 40px 0;}

::selection			{color:#fff; background: var(--blauw);}
::-moz-selection	{color:#fff; background: var(--blauw);}

/* Links */
a               {text-decoration: underline; color: var(--blauw);}
a:hover         {text-decoration: none; color: var(--blauw);}
a i   {font-size: inherit;}

/* Input elementen */
input[type="text"], input[type="password"], input[type="tel"], input[type="number"], input[type="email"], input[type*="date"] {
  width: 100%;
  background-color: #fff;
  outline: none;
  border: 1px solid #cccccc;
  padding: 7px 9px;
  
  margin: 0 0 10px;
  border-radius: 3px;
  font-size: 14px;
  transition: all .3s ease;
  font-family: inherit;
  box-shadow: 0 0 0px rgba(0,0,0,0);
  line-height: normal;
  font-variant-numeric: tabular-nums;
}

input:-webkit-autofill {-webkit-box-shadow: 0 0 0 30px #eee inset;}
textarea {font-family:inherit; width: 100%; height: 210px; background: #fff; outline: none; border: 1px solid #cccccc; padding: 10px;  margin: 0 0 10px; border-radius: 3px; font-size: 14px; line-height: 1.5em;}

input.verplicht, textarea.verplicht {background: #fff no-repeat scroll right 6px top 6px; background-size: 6px; background-image: url('data:image/svg+xml;utf8,<svg height="512" viewBox="0 0 512 512" width="512" xmlns="http://www.w3.org/2000/svg"><path fill="%23444444" d="m302.357254 15v181.100094l177.187854-61.720211 32.511533 90.143993-177.187854 57.659671 109.726423 152.676313-80.466043 57.659671-106.47527-158.361069-107.288058 158.361069-82.9044086-57.659671 111.3519996-152.676313-178.81343-57.659671 32.5115327-90.143993 175.5622773 63.344427v-182.72431z"/></svg>'); }

input[type="checkbox"], input[type="radio"] {border: none !important; box-shadow: none; background: none; height: auto;}
input[type="checkbox"] {appearance: none; -webkit-appearance: none; -o-appearance: none; margin: 0 4px 0 0; outline: none; cursor: pointer; background: none; box-sizing: border-box;}
input[type="checkbox"]::before {content: "\f0c8"; font-family: "Font Awesome 5 Pro"; font-size: 15px; position: relative; display: block; color: #ccc; transition: all .3s ease;}
input[type="checkbox"]:checked::before {content: "\f14a"; color: var(--blauw); font-weight: bold;}

label input[type="checkbox"] {vertical-align: top; top: 5px; position: relative;}

.labelHouder {position: relative; padding-left: 20px; line-height: 1.5em; margin: 0 0 0.35em 0; display: block;}
.labelHouder input[type="checkbox"] {position: absolute; left: 0; top: 2px;}
.labelBovenInput {display: block; text-transform: uppercase; font-size: 10px; font-weight: bold; color: #6f6f6f;}

.label {text-transform: uppercase; display: inline-block; padding: 5px 7px 4px; line-height: normal; border-radius: 3px; margin: 2px; margin-left: 8px; background-color: #f1f1f1; color: #6b6b6b; font-size: 10px; font-weight: bold; letter-spacing: .4px; white-space: nowrap; }
.label.blauw {background: var(--licht-blauw); color:var(--blauw);}
.label.groen {background: rgba(60, 188, 60, 0.15); color: #3CBC3C;}
.label.volgroen {background: #3CBC3C; color: #FFF;}
.label.oranje {background:rgba(255, 165, 0, .15); color:var(--oranje);}
.label.rood  {background: var(--licht-rood); color:var(--rood);}
.label.donkerrood {background: var(--rood); color:#fff;}

select {
    font-family: inherit;
    border-radius: 3px;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border: 1px solid #cccccc;
    font-size: 14px;
    padding: 7px 25px 7px 9px;
    line-height: normal;
    background: no-repeat right center;
    vertical-align: top;
    box-sizing:border-box;
    background-image: url('data:image/svg+xml;utf8,<svg fill="%23999999" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M7 10l5 5 5-5z"/><path d="M0 0h24v24H0z" fill="none"/></svg>');
    background-color: #fff;
    margin:0;
    outline: none;
    transition: all .3s ease;
    box-shadow: 0 0 0px rgba(0,0,0,0);
}

/* Verschillende styles resetten */
h1, h2, h3, h4, h5, h6, h1 a, h2 a, h3 a, h4 a, h5 a, h6 a,
h1 a:hover, h2 a:hover, h3 a:hover, h4 a:hover, h5 a:hover, h6 a:hover,
h1 a:visited, h2 a:visited, h3 a:visited, h4 a:visited, h5 a:visited, h6 a:visited {
    font-weight: normal; font-style: normal; text-decoration: none; margin: 0 0 .25em 0; line-height: 1.35em;}

/* Start Content headings Fonts & Colors  */
h1, h1 a, h1 a:link, h1 a:visited, h1 a:hover {
  color: var(--blauw);
  font-family: "proxima-nova", sans-serif;
  font-size: 22px;
  font-style: normal;
  font-weight: bold;}

h2, h2 a, h2 a:link, h2 a:visited, h2 a:hover {
  color: var(--blauw);
  font-family: "proxima-nova", sans-serif;
  font-size: 16px;
  font-style: normal;
  font-weight: bold;
  padding: 0;
  margin: 0 0 10px;}

h3, h3 a, h3 a:link, h3 a:visited, h3 a:hover {
    color: #000;
    font-family: "proxima-nova", sans-serif;
    font-size: 14px;
    font-weight: bold;
    margin: 0 0 10px;}

h4, h4 a, h4 a:link, h4 a:visited, h4 a:hover {
    color: #000;
    font-family: "proxima-nova", sans-serif;
    font-size: 14px;
    font-weight:bold;}

h5, h5 a, h5 a:link, h5 a:visited, h5 a:hover {
    color: #999;
    font-family: "proxima-nova", sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: normal;}

h6, h6 a, h6 a:link, h6 a:visited, h6 a:hover {
    color: #333333;
    font-family: "proxima-nova", sans-serif;
    font-size: 16px;}

/* Koppen margins */
p + h1, p + h2, p + h3, p + h4, p + h5, p + h6,
ul + h2, ul + h3, ul + h4, ul + h5, ul + h6,
ol + h2, ol + h3, ol + h4, ol + h5, ol + h6 {margin-top:1.5em;}
h1 + h5 {margin-top: -0.25em;}

p       {margin:0 0 .5em 0;}


/* begin PostBullets */
ol, ul              {color: inherit; font-family: inherit; font-size: inherit; line-height: inherit;}
li ol, li ul        {margin:0.5em 0 0.5em 2em; padding:0;}
li                  {padding:0;}
ul                  {list-style-position:outside;}
ol                  {list-style-position:outside;}

/* Tabellen */
table   {border-collapse: collapse;}
td, th  {padding:0; vertical-align: top;}

/* Knoppen */
a.button {background: #f1f1f1; padding: 7px 8px; display: inline-block; line-height: normal; border-radius: 4px; font-size: 13px; text-decoration: none; color: #000; cursor: pointer; border: 1px solid #eee;}
a.knop {background-color: var(--blauw); background: linear-gradient(135deg, #0072e7 0%, #00b7f3 100%); padding: 10px 12px; display: inline-block; line-height: normal; border-radius: 3px; font-size: 14px; text-decoration: none; color: #fff; cursor: pointer; opacity: 1; transition: .3s all ease; box-shadow: 0 2px 2px rgba(0,0,0,.15); white-space: nowrap;}

a.knop::after {vertical-align: middle; margin: 0 0 0 6px; font-family: "Font Awesome 5 Pro"; position: relative; top: -1px;}
a.knop::before {vertical-align: middle; margin: 0 10px 0 0; font-family: "Font Awesome 5 Pro";}

a.knop.opslaan::after, a.knop.opslaannep::after {content: "\f0c7"; font-weight: bold;}

@keyframes fadeInUp {
  0% {
      opacity: 0;
      transform: translate3D(0,20px,0);
  }
  100% {
      opacity: 1;
      transform: transform3D(0,0,0);
   }
}
@keyframes rotating {
    from    {transform: rotate(0deg);}
    to      {transform: rotate(360deg);}
}

/* Einde Knoppen */


/* Inlogscherm */
.loginscherm {background:linear-gradient(17deg,#003EDE 0%,#00E4F8 100%); height:100vh;}
.login {display:flex; height:100vh;}
.login .loginHouder {margin: auto 0 auto 20%; top:20%; border-radius: 3px; padding: 35px; max-width: 360px; width: 100%;  background: #fff; box-shadow: 0 22px 90px -19px rgba(0,0,0,0.4); animation: fadeInUp ease .3s; transition: .3s transform3D ease;}
.login .loginHouder .loginMelding {background: #ffd5d5; padding: 10px; border-radius: 3px; margin: 25px 0 0; color: #ff4c4c; text-align: center; line-height: 1.25em;}
.login .loginHouder input[type="text"],
.login .loginHouder input[type="password"] {padding: 10px;}
.login .loginHouder .wwVergeten {margin: 0 0 10px; text-align: right;}
.login .loginHouder .wwVergeten a {text-decoration: none;}

.login .links {width: 30%; height: 100%; *background: linear-gradient(135deg,#003EDE 0%,#00E4F8 100%); top: 0; position: absolute; z-index: -1;}
.login .rechts {width: 70%; height: 100%; background: #fff; top: 0; position: absolute; z-index: -1; right: 0;}
.login .melding {background-color: rgba(255, 0, 0, .1); color: #F00; margin-top: 20px; padding: 20px; border-radius: 5px; line-height: 1.5em;}
.login .melding:empty {display: none;}

.cmspecialist {position: absolute; bottom: 0; width: 100%; text-align: center; padding: 5px;  color: #999;}
.cmspecialist a {text-decoration: none; color: inherit;}
.cmspecialist a:hover {text-decoration: underline;}
/* Einde inlogscherm */

/* Basis Layout */
.cms {display: flex; min-height:100vh; transition: .3s all ease;}
.cms.uitloggen {filter: grayscale(100%);}
.cms.alert {
-webkit-filter: blur(1px);
-moz-filter: blur(1px);
-o-filter: blur(1px);
-ms-filter: blur(1px);
filter: blur(1px);
}

a.logoHouder        {display: flex; width: 100%; height: 67px;  background: var(--blauw); transition: .3s all ease; background: linear-gradient(135deg, #0072e7 0%, #00b7f3 100%);}
a.logoHouder .logo        {position: relative; margin: auto; line-height: 0; height:18px; overflow: hidden; transition: all .3s ease;}
a.logoHouder .logo img    {width: 56px; height:auto;}
a.logoHouder:hover .logo  {height:30px;}

.loginLogo        {position: absolute; left:20px; bottom:20px; line-height: 0;}
.loginLogo img    {width: 55px; height:auto;}

.navigatie {background: #262c30; width: 290px; min-width: 290px; display: flex; flex-direction: column;}
.navigatie a {color: #fff; font-family: "Poppins", "proxima-nova", sans-serif;}

.navigatie .menus {display: flex; flex: 1;}

.navigatie .hoofdmenu {z-index: 1; background: rgba(0,0,0,.25); display: flex; flex-direction: column; width: 70px;}
.navigatie .hoofdmenu ul 		{list-style: none; text-align: center; user-select: none; padding: 0; font-size: 12px; margin: 0; top: 0; position: -webkit-sticky; position: sticky;}
.navigatie .hoofdmenu ul::-webkit-scrollbar {display: none;}
.navigatie .hoofdmenu ul li {position: relative; flex: 1;}
.navigatie .hoofdmenu ul li a {display: block; text-decoration: none; padding: 15px 3px; line-height: 1; margin: 0; transition: all .3s ease; width: 100%; }
.navigatie .hoofdmenu ul li a i {display: block; font-size: 18px; font-weight: normal; opacity: .5;}
.navigatie .hoofdmenu ul li.actief a i {opacity: 1; color: var(--blauw);}
.navigatie .hoofdmenu ul li a:hover,
.navigatie .hoofdmenu ul li.actief a {background: #262c30;}
.navigatie .hoofdmenu ul > li > a > .titel {text-transform: uppercase; font-size:10px; display:block; margin-top:10px;}
.navigatie .hoofdmenu ul > li > a > .titel::before {content: ""; width: 8px; height: 8px; background: inherit; position: absolute; right: 13px; margin: 0 auto; bottom: -3px; transform: rotate(45deg); z-index: -1;}
.navigatie .hoofdmenu ul > li > a:hover > .titel {opacity: 1; box-shadow: 0 0 20px 0px rgba(0,0,0,.15);}
.navigatie .hoofdmenu ul li a:hover, .navigatie .hoofdmenu ul li.actief a {background: #262c30;}

.navigatie .submenu {flex: 1; display: flex; flex-direction: column;}
.navigatie .submenu .submenu_items > ul {user-select: none; margin: 0; padding: 10px; list-style: none;}
.navigatie .submenu .submenu_items > ul li {margin-bottom: 2px;}
.navigatie .submenu .submenu_items > ul li a {display: flex; padding: 5px; text-decoration: none; font-weight: normal; position: relative; color: rgba(255,255,255,.6); border-radius: 3px; line-height: normal;}
.navigatie .submenu .submenu_items > ul li:hover a {background: rgba(255,255,255,.05);}
.navigatie .submenu .submenu_items > ul li a i {margin-right: 6px; font-size: 14px; color: inherit; width: 24px; text-align: center; padding-top: 0px; line-height: 19px; height: 19px;}
.navigatie .submenu .submenu_items > ul li.actief a {background: rgba(255,255,255,.1); color: #fff;}

.navigatie .onderkant {margin-top: auto; padding: 10px; line-height: normal; font-size: 11px; color: #fff;}

.navigatie .onderkant a.versie           {text-decoration: none; text-align: center; display: block; font-family: inherit;  opacity: .3;}
.navigatie .onderkant a.versie .titel    {margin-right:.35em; display: none;}


/* Bovenkant */
.bovenkant {background: #fff; position: relative; min-height: 68px; border-bottom: 1px solid #ebebeb; display: flex; align-items: center; user-select: none; z-index: 12; white-space: nowrap; font-size: 14px;}

/* Breadcrumbs */
.breadcrumbs                        {position: relative; margin: auto 0; line-height: normal; white-space: nowrap; padding: 12px 20px;}
.breadcrumbs ul                     {padding: 0; margin:0;}
.breadcrumbs ul li                  {display: inline-block;}
.breadcrumbs ul li a                {text-decoration: none; color:#444; transition: all .3s ease;}
.breadcrumbs ul li a:hover          {color:#000;}
.breadcrumbs ul li:last-of-type a   {color:#009bff;}
.breadcrumbs ul li:after            {content:"\f105"; font-family:"Font Awesome 5 Pro"; padding:0 8px; *font-size:13px; color: #bbb; position:relative; top:1px;}
.breadcrumbs ul li:first-of-type:after,
.breadcrumbs ul li:last-of-type:after {display: none;}

.breadcrumbs .icoon {color: #009bff; margin-right: 10px;}

.knoppenBovenkant {padding-left: 20px; display: flex;}
.knoppenBovenkant:empty {display: none;}
.knoppenBovenkant a.knop {margin: auto 20px auto; margin-left: 0; transition: .3s all ease; vertical-align: top;}

.bovenkant .titel {padding: 0 20px; font-size: 18px; font-weight: bold;}
.bovenkant .titel h2 {margin: 0;}

/* Ingelogde gebruiker */
.gebruiker        {position: relative; margin-left: auto; display: inline-flex; padding: 12px 20px; box-sizing: border-box; cursor: pointer; z-index: 15; background: #fff;}
.gebruiker .avatar     {width: 43px; height: 43px; display: flex; background: #f1f1f1; background-image: url('../images/avatar.png'); background-size: cover; border-radius: 30px; overflow: hidden;}
.gebruiker .avatar img {max-width: 100%; margin: auto;}
.gebruiker .avatar .melding {position: absolute; background: #238fff; line-height: 15px; padding: 3px 7px 2px; color: #fff; font-weight: normal; font-size: 12px; box-sizing: border-box; border-radius: 93px; display: inline-block; text-align: center; min-width: 22px; border: 1px solid #fff; top:5px; right:5px;}

.gebruiker .gebruikersInfo  {padding: 0 10px; white-space: nowrap; line-height: normal; text-overflow: ellipsis; margin: auto 0;}
.gebruiker .persoon {color: #000; font-weight: bold; font-size: 14px}
.gebruiker .bedrijfsnaam {font-size: 13px}


.content {background: #f1f1f1; transition: all .3s ease; position: relative; width: 100%;}
.wrapper {position: relative; max-width: 1400px; padding: 10px 10px 0; margin: auto;}

.blok {background: #fff; position: relative; padding: 0; margin: 0 0 10px 0; border-radius: 3px; box-shadow: 0px 1px 0px 1px rgb(0 0 0 / 5%); box-sizing: border-box;}
.blok .blok-inhoud {padding: 15px; border-top: 1px solid rgba(0,0,0,.05);}
.blok .blok-titel {position: relative; padding: 15px; display: flex; flex-wrap: wrap;}
.blok .blok-titel h2 {margin: auto 0; line-height: 1; font-weight: bold;}
.blok .blok-titel h2 i {margin-right: 10px; background: #f1f1f1; padding: 7px 3px 7px; width: 28px; font-size: 14px; text-align: center; line-height: 1; height: 28px; border-radius: 3px; color: #333; box-sizing: border-box; box-shadow: 0px 1px 0px 1px rgb(0 0 0 / 3%) inset;}
.blok .blok-titel .knoppen {display: flex; margin: 0 0 0 auto;}
.blok .blok-titel .knoppen > * {position: relative; margin: 0 0 0 10px !important; white-space: nowrap;}

/* Support */
table.lijst {width: 100%; border-spacing: 0; table-layout: auto; margin: 0 0 20px; line-height: normal;}
.lijst tr {position: relative;}

.lijst tr th {text-align: left; border-bottom: 1px solid #eee; padding: 4px 6px; text-transform: uppercase; font-size: 12px; font-weight: bold; color: #333; background: #fff; position: sticky; top: 0; z-index: 2; white-space: nowrap;}
.lijst tr td               {border-bottom: 1px solid #eee; padding: 4px 6px; transition: all .3 ease; vertical-align: middle; font-size: 13px;}
.lijst tr td:first-child {padding-left: 0;}
.lijst tr:last-child td {border-bottom: 0;}
.lijst tr:first-child th:first-child {text-align: left; padding-left: 0;}

.lijst.orders                    {line-height: 1.5em;}
.lijst.orders td       {padding: 10px;}
.lijst.orders td.uren div {padding: 10px; border: 1px solid #eeee; border-radius: 3px; background: #fafafa; text-align: center; font-weight: bold;}
.lijst.orders td.uren.rood div {border-color: var(--rood); background-color: rgba(249, 77, 78, .15); color: var(--rood);}
.lijst.orders td.uren.oranje div {border-color: var(--oranje); background-color: rgb(255 165 0 / 15%); color: var(--oranje);}
.lijst.orders td.uren.groen div {border-color: var(--groen); background-color: rgb(76 218 99 / 15%); color: var(--groen);}

.lijst.orders td .label.open {background: var(--groen); color: #FFF;}

.lijst.orders td.notitie div {padding: 10px; border: 1px solid #eeee; border-radius: 3px; background: #fafafa;}
/* Einde Support */

/* AVG */
.blok-inhoud.avg {display: grid; grid-template-columns: 1fr 2fr; gap: 30px;}

.infoHouder .blokInfo {padding: 15px; border: 1px solid #eeee; border-radius: 3px; background: #fafafa; margin-bottom: 15px;}
.infoHouder .blokInfo .meerInfo {display: flex;}
.infoHouder .blokInfo .meerInfo span:first-child {font-size: 11px; font-weight: bold; text-transform: uppercase; }
.infoHouder .blokInfo .meerInfo span:last-child {margin-left: auto; padding-left: 10px;}

.infoHouder.nietGeaccepteerd {grid-template-columns: 1fr;}
.infoHouder .blokInfo.ondertekenen #resultaat {color: var(--rood); margin: 0 0 0.35em 0;}

.infoHouder {position: sticky; top: 15px; margin-bottom: auto;}
.infoHouder .ondertekend {padding: 5px; border: 1px solid #eeee; border-radius: 3px; background: #fafafa; margin-bottom: 15px; text-align: center; color: var(--blauw); font-family: "proxima-nova", sans-serif; font-size: 14px; font-style: normal; font-weight: bold;}
/* Einde AVG */

table.instellingen {width: 100%; border: 0; border-spacing: 0; table-layout: fixed;}
table.instellingen tr td {padding: 10px; border-bottom: 1px solid #eee; background: #fff; transition: all .3s ease; vertical-align: top;}
table.instellingen .beschrijving {width: 240px; font-size: 14px; font-weight: normal; color: #000;}
table.instellingen tr:first-child > td {padding-top: 0;}
table.instellingen tr > td:first-child {padding-left: 0;}
table.instellingen .toelichting {font-style: italic; font-size: 12px; line-height: 1.5em; color: #999; font-weight: normal;}

.kolommenInhoud {display: flex;}
.kolommenInhoud > div {display: flex; flex-direction: column; margin-right: 10px;}
.kolommenInhoud > div > select, .kolommenInhoud > div > input, .kolommenInhoud > div > .tegenElkaar, .kolommenInhoud > div > .kolommen {margin-top: auto;}
table.instellingen td input[type="text"], table.instellingen td input[type="password"], table.instellingen td input[type="tel"], table.instellingen td input[type="number"], table.instellingen td input[type="email"] {margin-bottom: 0;}

.blok .blok-inhoud .niksGevonden {display: block; text-align: center; padding: 20px 0; color: #aaa; font-size: 13px;}

.avgMelding {padding: 15px; border: 1px solid var(--rood); border-radius: 3px; background: rgba(249, 77, 78, .15); margin-bottom: 15px;}

.navigatie .submenu .submenu_items > ul li.avgAlert a {background: rgba(249, 77, 78, .15);}
.navigatie .submenu .submenu_items > ul li.avgAlert a::after {content: "\f06a"; font-family: "Font Awesome 5 Pro"; color: var(--oranje); font-weight: bold; position: absolute; right: 10px; top: 9px;}

.supportMelding {padding: 15px; border: 1px solid var(--rood); border-radius: 3px; background: rgba(249, 77, 78, .15); margin-bottom: 15px;}
.navigatie .submenu .submenu_items > ul li.supportAlert a {background: rgba(249, 77, 78, .15);}
.navigatie .submenu .submenu_items > ul li.supportAlert a::after {content: "\f06a"; font-family: "Font Awesome 5 Pro"; color: var(--oranje); font-weight: bold; position: absolute; right: 10px; top: 9px;}

.factuurNietBetaald {padding: 5px; border: 1px solid var(--rood); border-radius: 3px; background: rgba(249, 77, 78, .15); margin-bottom: 15px;}

.inActief {padding:20px; text-align: left; background-color:#ff000011; color:#f00; font-weight: normal;}