@font-face {
    font-family: "Free 3 of 9 Regular";
    src: url(/free3of9.woff) format('woff');
}

* {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    

}
.headerbalk {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    text-align: center;
    font-size: 16px;
    min-width: 1000px;
    border:none;
    display: grid;
    grid-template-columns: 15% 10% 25% 25% 10% 15%;
    padding: 0;
    margin: 0;
    width: 100%;
    height: 100%;
}


[data-title]:hover:before {
    opacity: 1;
    transition: all 0.1s ease 0.5s;
    visibility: visible;
}

[data-title]:before {
    content: attr(data-title);
    width: 180px;
  	position: absolute;  	
    z-index: 99999;
    visibility: hidden;
	top: 110%;
    background-color: #fff;
    color: #000;
    font-size: 12px;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    padding: 1px 5px 2px 5px;
    box-shadow: 2px 2px 3px #ddd;
    opacity: 0;
    border: 1px solid #000;
    border-radius: 5px;
}
[data-title] {
    position: relative;
    color: #000;
}

body{
    margin: 0;

}

.dashboard {
    grid-column: 1 / 7;
    grid-row: 2;
    text-align: center;
    font-weight: 500;
    background-color: #fff;
    display: grid;
    grid-template-columns: auto auto auto auto auto;
    border: none;
    width: 98%;
    margin: 0;
    padding: 10px;
    max-width: 2000px;
    margin-left: auto;
    margin-right: auto;
}

footer {
    grid-column: 1 / 7;
    grid-row: 4;
    min-width: 1000px;
    text-align: center;
    color: #000;
    margin: 0;
    padding: 0;
    border-top: 2px #ddd solid;
}

footer p{
    margin-left: center;
    margin-right: center;
    text-align: center;
    color: #000;

}

.planningmenu{
    grid-column: 1 / 7;
    grid-row: 1 / 4;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 100000;
    display: none;
    height: 100%;
    width: 100%;

}


.popupplanning1{
    width: 75%;
    height: 500px;
    background-color: #fff;
    margin: auto;
    margin-top: 30px;
    padding: 5px;
    border-radius: 15px;
    padding-top: 0;
    padding-right: 5px;
    z-index: 1000;
}

.headerbalk .logodiv{
    background-color: #002837;
    text-align: left;
    grid-column: 1;
    grid-row:1;
    color: #e5d043;
    z-index: 1000;
    height: 50px;
    margin: 0;
    
}

.logodiv img{
    width: 30px;
    margin: 5px;
    padding: 5px;
    border-radius: 10px;

}

.headerbalk .logodiv a{
    position: absolute;
    color:#e5d043;
    margin-top: 16px;
    margin-bottom: auto;
    vertical-align: center;
    text-decoration: none;
    font-weight: 600;
}

.header2{
    grid-column: 2 ;
    grid-row: 1;
    background-color: #002837;
    height: 50px;
    padding: 0;
}

.header2 p a{
    background-color:#fff;
    margin: 0;
    font-size: 14px;
    padding: 3px;

    color:#002837;
    border-radius: 7px;
    text-decoration: none;
    font-weight: 500;
    cursor: pointer;
}

.titelh1{
    background-color: #002837;
    grid-column: 3 / 5;
    grid-row: 1;
    align-content: center;
    height: 50px;
}

.titelh1 p{
    color: #fff;
    font-weight: 600;
    margin-left: auto;
    margin-right: auto;
    margin-top: 10px;
    font-size: 25px;

}

.header3{
    background-color: #002837;
    grid-column: 5 ;
    grid-row: 1;
    height: 50px;
}

.header3 p a{
    background-color:#fff;
    margin: 0;
    font-size: 14px;
    padding: 3px;
    color:#002837;
    border-radius: 7px;
    text-decoration: none;
    font-weight: 500;
    cursor: pointer;
}

.gebruikerbalk{
    background-color: #002837;
    grid-column: 6;
    grid-row: 1;
    text-align: right;
    color:#e5d043;
    z-index: 1000;
    padding-right: 10px;
    height: 50px;
    
}

.gebruikermenu a{
    color:#e5d043;
}


.dashboard .loginform {
    grid-column: 3 ;
    grid-row: 1 / 2;
    background-color: #002837;
    color: #fff;
    padding: 20px;
    width: 500px;
    border-color: #e5d043;
    border-radius: 20px;
    box-shadow: 1px 1px 20px 0px rgb(0 0 0 / 10%);
    height: auto;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 25px;
}

.loginform a {
    color: #e5d043;
}

.loginform input[type=submit] {
    padding: 10px ;
    background-color: #e5d043;
    color: #002837;
    font-size: 18px;
    border: none;
    cursor: pointer;
    margin: 5px 5px;
    border-radius: 15px;
}

.loginform input[type=email], input[type=password] {
    width: 100%;
    height: 30px;
    font-size: 16px;
    padding: 5px;
}


.knoppen {
    grid-column: 2 / 5;
    grid-row: 3 / 5;
    display: grid;
    grid-template-columns:  25% 25% 25% 25%;
    grid-auto-rows: auto;

    text-align: center;
    align-content: center;
    border: none;
    min-width: 750px;
    width: 100%;
    margin: 0;
    margin-left: auto;
    margin-right: auto;
}


.planning{
    grid-column: 1 / 6;
    grid-row: 1 / 3;
    overflow: auto;
    height: 400;
    margin-bottom: 20px;
    color:#002837;
    border:1px solid black;
}

.planning .iframeplanning{

    height: 100%;
    width:90%;
    border: none;
    
}

.zieplanning{
    grid-column: 2 / 5;
    grid-row: 1;
    margin-left: auto;
    margin-right: auto;
}
.knoppen a {
    text-decoration: none;
    font-size: 20px;
}



.knoppen img {
    width: 150px;
    height: auto;
    vertical-align: center;
    
    }





.app {
align-content: center;
color: #002837;
text-align: center;
margin-top: 20px;
}

.app h3{
    margin-left: auto;
    margin-right: auto;
}

.app img{
    box-shadow: 1px 1px 20px 0px rgb(0 0 0 / 10%);
    cursor: pointer;
    background-image: linear-gradient(#00394a, #002837);
    padding: 30px;
    border-radius: 30px;
    margin: 25px 25px 5px 25px;
    vertical-align: center;
    width: 150px;
    height: auto;
}


.terug-link {
    color: #000;
    text-decoration: underline;
    text-align: left;
    grid-row: 1;
    grid-column: 1 /2;
    margin-top: 5px;
    font-weight: 700;
    height: 20px;
    font-size: 14px;
}


.terug-link a{
    color: #000;
    font-weight: 500;
    margin: 0;
}


#zoekbalk{
    width: 300px;
    border-radius: 10px;
    border: 1px solid grey;
    font-size: 18px;
    padding-left: 5px;
}

#zoekknop {
    font-size: 18px;
    background-color: #002837;
    color: #e5d043;
    border: none;
    border-radius: 10px;
    margin-left: 5px;
    padding: 2px 10px 2px 10px;

}


#zoekknop:hover {
    background-color: #00394a;
    cursor: pointer;
}

#standaardknop{
    background-color: #002837;
    color: #e5d043; 
    border-radius: 10px; 
    border:none; 
    font-size: 18px;
    padding: 8px;
}

#standaardknop:hover{
    cursor: pointer;
    opacity: 0.9;
}

#standaardopties{
    background-color: #fff;
    color: #000; 
    border-radius: 10px; 
    border:1px solid grey; 
    font-size: 18px;
    padding: 8px;
}

input[type=button] {
    font-size: 16px;
    color: #e5d043;
    background-color: #002837;
    border: none;
    padding: 7px;
    cursor: pointer;
    border-radius: 10px;
}

input[type=button]:hover {
    background-color: #00394a;
    box-shadow: none;
  
}




.bewerkengegevens{
    background-color: #ddd;
    grid-column: 1 / 6;
    grid-row: 2 / 6;
    text-align: left;
    display: grid;
    grid-template-columns: 5% 45% 45% 5%;
    min-height: 600px;
    border-radius: 10px;
}

.nieuwewerkbonlinks input{
    width: 275px;
    font-size: 16px;
    font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    margin: 10px;
    padding: 5px;
    border-radius: 5px;
    border: grey solid 1px;
}

.nieuwewerkbonlinks select{
    width: 275px;
    font-size: 16px;
    font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    margin: 10px;
    padding: 5px;
    border-radius: 5px;
    border: grey solid 1px;
}
.nieuwewerkbonrechts select{
    width: 275px;
    font-size: 16px;
    font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    margin: 10px;
    padding: 5px;
    border-radius: 5px;
    border: grey solid 1px;
}

.nieuwewerkbonrechts input{
    width: 270px;
    font-size: 16px;
    font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    margin: 10px;
    padding: 5px;
    border-radius: 5px;
    border: grey solid 1px;
}


.nieuwewerkbonlinks {
    grid-column: 2;
    padding: 20px;
    text-align: right;
    
}
.nieuwewerkbonrechts {
    grid-column: 3;
    padding: 20px;
    text-align: left;
    
}



.bewerkengegevenslinks {
    grid-column: 2;
    
    padding: 10px;
    text-align: right;
    
}



.bewerkengegevensrechts {
    grid-column: 3;
    padding: 10px;
    text-align: right;
}

.bewerkengegevenslinks input{
    width: 275px;
    font-size: 16px;
    font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    margin: 5px;
    padding: 5px;
    border-radius: 5px;
    border: grey solid 1px;
}
.bewerkengegevenslinks select{
    width: 275px;
    font-size: 16px;
    font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    margin: 5px;
    padding: 5px;
    border-radius: 5px;
    border: grey solid 1px;
}

.bewerkengegevensrechts select{
    width: 275px;
    font-size: 16px;
    font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    margin: 5px;
    padding: 5px;
    border-radius: 5px;
    border: grey solid 1px;
}
.bewerkengegevensrechts input{
    width: 275px;
    font-size: 16px;
    font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    margin: 5px;
    padding: 5px;
    border-radius: 5px;
    border: grey solid 1px;
}
input[type=checkbox]{
    margin: 2px;
    padding: 2px;
    width: 15px;
}

.popup1 {
    grid-column: 1 / 6;
    grid-row: 1 / 7;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 10000;
    display: none;
    height: 100%;
    width: 100%;
}

tr.focus{
    background-color:#0099cc;
    color: #fff;
}
tr:hover{
    cursor:pointer;
}

tr.focus td a{
    color: #fff;
}


.popup1 .popup-content{

    background-color: #fff;
    vertical-align: middle;
    margin-top: 50px;
    margin-left: auto;
    margin-right: auto;
    color: #000;
    box-shadow: 1px 1px 20px 0px rgb(0 0 0 / 10%);
    height: auto;
    width: 40%;
    padding: 30px;
    font-size: 16px;
}

.popup-content button{
    font-size:18px;
    padding: 10px;
    cursor: pointer;
}

.popup-content button:hover{
    opacity: 0.7;
}

.kiesrelatie{
    grid-column: 1 / 5;
    text-align: center;
    align-content: center;
    vertical-align: center;
}

.kiesrelatie input{
    width: 200px;
    font-size: 21px;

}
.kiesrelatie h3{
    font-size: 25px;
}

/*---------------Relatiebeheer------------*/


.zoeken-relatie {
    grid-column: 1 / 6;
    grid-row: 1 / 3;
    align-content: center;
}

.relatietabel {
    grid-column: 1 / 4;
    grid-row: 3 / 6;
    margin-left: 15px;
    min-width: 550px;
    padding-right: 10px;
    overflow: auto;
    height: 800px;
    width: 100%;
}



.relatie {
    grid-column: 4 / 6;
    grid-row: 3 / 6;
    background-color: #eee;
    color: #000;
    border: grey solid 1px;
    border-radius: 15px;
    padding: 10px;
    margin: 3px;
}
.tabelheader th {
    font-size: 15px;
    padding: 5px;
    text-align: left;
    background-color: #002837;
    color: #e5d043;
    width: auto;
 
}


thead .tabelheader {
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
}




.relatietabel table tbody tr {

    border-bottom: 2 solid grey;
    padding: 2px;
}

.tabel-body td {
    padding: 2px;
    width:5px;
    border-left: 1px solid #ccc;
    
}


.relatietabel table td input[type=button]{
    margin-left: 20px;
    margin-right: 20px;
    background-color: #bbb;
    color: #000;
    border-radius: 5px;
    font-size: 14px;
    cursor: pointer;
    border: none;
    box-shadow: 1px 1px 20px 0px rgb(0 0 0 / 10%);
    padding: 5px;
}


.relatie iframe {
    border: none;
    height: 100%;
    width: 100%;
}


#tabe1 {
    width: 97%;
    border: 1px solid grey;
    background-color: lightgrey;
}

.tabelheader th{
    cursor: pointer;
}

.relatietabel table td input[type=button]:focus {
    background-color: rgb(23, 0, 128);
    color: #fff;
}






  /*--------------Artikelbeheer----------*/

  .artikeltabel {
    grid-column: 1 / 6;
    grid-row: 2 / 6;
    align-content: center;
    text-align: center;
    align-items: center;
    min-height: 800px;
    margin: 5px;
  }

 table{
    border-collapse: collapse;
  }


#tabel-artikel{
    margin-left: auto;
    margin-right: auto;
    width: 100%;
}

.tabelframeartikel{
    overflow: auto;
    max-height: 500px;
    border: 1px lightgrey solid;
    padding: 5px;
    border-radius: 5px;
}

.artikeltabel.totaalomzet {
    grid-row: 1;
}

#tabel-artikel tbody .tabel-body{
    background-color: #ddd;
    overflow: scroll;
    
}

.tr {
      border-bottom-width: 2px;
      margin:3px;
      font-weight: 500;
      font-size: 18px;
  }

#artikelpaginaknop{
    background-color: #002837;
    color: #e5d043;
    font-size: 16px;
    border: none;
    box-shadow: 1px 1px 20px 0px rgb(0 0 0 / 10%);
    border-radius: 4px;
    padding: 2px;
}

#artikelpaginaknop:hover{
    opacity: 0.9;
    box-shadow: none;
    cursor: pointer;
}

#tabel-artikel td a {
    font-size: 15px;
    color: #007399;
}

#tabel-artikel td {
    font-size: 16px;
}
/*------------Werkbon---------*/

.werkbontabel {
    grid-column: 2 / 5;
    grid-row: 5 / 6;
    height: 300px;
    overflow: auto;
    align-content: center;
  }



  .nieuwewerkbon {
    grid-column: 2 / 5;
    grid-row: 4 / 5;
    background-color: #ccc;
    padding: 50px;

  }

  .werkbontabel table.tabel-werkbon {
    border-collapse: collapse;
  }

.tabel-werkbon tbody .tabel-body{
    background-color: #ddd;
    overflow: scroll;

    
}

.werkbontabel th{
    min-width: 30px;
}

tr{
    border-bottom: 2px solid grey;
    padding: 10px;
}

.nieuwewerkbon input {
    margin: 10px;
    padding: 4px;
    font-size:16px;
    border-radius: 4px;
    border: none;
    box-shadow: 1px 1px 20px 0px rgb(0 0 0 / 10%);
}

.nieuwewerkbon #opdracht {
    margin: 10px;
    padding: 4px;
    font-size:16px;
    border-radius: 4px;
    border: none;
    box-shadow: 1px 1px 20px 0px rgb(0 0 0 / 10%);
    width: 300px;
    height: 100px;
}

.nieuwewerkbon #werknemer{
    margin: 10px;
    padding: 4px;
    font-size:16px;
    border-radius: 4px;
    border: none;
    box-shadow: 1px 1px 20px 0px rgb(0 0 0 / 10%);

}



/*---------Werknemerbeheer -----------*/

.dashboard .werknemerpagina{
    grid-column: 1 / 7;
    grid-row: 2;
    display: grid;
    grid-template-columns: 30% 70%;
    grid-gap: 5px;
    padding-bottom: 15px;
}

.werknemerpagina .werknemerpagina1{
    grid-column: 1;
    grid-row: 2;
    background-color: #ddd;
    padding: 15px;
    border-radius: 10px;
}

.werknemerpagina .werknemerpagina2{
    grid-column: 2;
    grid-row: 2;
    background-color: #fff;
    border-radius: 10px;
}

/*----------------Autovoorraad--------------*/

.autovoorraadwerknemerselecteer{
    grid-column: 1 / 3;
    grid-row: 2;
    padding-left: 5%;
    padding-right: 5%;
    
}

p.selecteerwr{
    background-color: #ddd;
    color: #000;
    margin: 10px;
    padding: 10px;
    box-shadow: 3px 3px 3px rgb(0,0,0,0.2);
    border-radius: 5px;
    cursor: pointer;
}
.autovoorraadperwerknemer{
    grid-column: 3 / 7;
    grid-row: 2;
    border: 1px #000 solid;
    box-shadow: 1px 1px 20px 0px rgb(0 0 0 / 10%);
    height: 600px;
    overflow:auto;

}
.iframeautovoorraad {
    width: 100%;
    border: none;
    height: 100%;
}



/*-------Admin------*/

.adminpagina{
    grid-column: 1 / 6;
    grid-row: 2;
    border-radius: 10px;
    border: 2px solid #aaa;
    background-color: #fff;
    display: grid;
    grid-template-columns: 25% 75%;
    padding: 0;
}

.adminmenu{
    grid-column: 1;
    padding: 0;
    height: 100%;
}

.admintab{
    grid-column: 2;
    background-color: #ddd;
    padding: 0;
    height: 100%;
}

.adminmenuknop{
    padding-top: 10px;
    padding-bottom: 10px;
    padding-left: 5px;
    font-size: 20px;
    font-weight: 600;
    color: #000;
    cursor: pointer;
    border-right: 1px solid #000;
    margin: 0;
}

.selecteer{
    border-right: none;
    background-color: #ddd;
}
/*-----------Nieuw project------*/

.dashboard .nieuwartikellinks{
    grid-column: 2 / 4;
    grid-row: 3;
    background-color:#ddd;
    text-align: right;
    padding: 10px;
}

.dashboard .nieuwartikelrechts{
    grid-column: 4 / 5;
    grid-row: 3;
    background-color:#ddd;
    text-align: left;
    border-left: #000 solid 1px;
    padding: 10px;
}


.nieuwartikellinks input{
    font-size: 16px;
    border-radius: 5px;
    border: none;
    box-shadow: 1px 1px 20px 0px rgb(0 0 0 / 10%);

}

.projectenknoppenbalk{
    grid-column: 1 / 6;
    grid-row: 1;
}

.projectenoverzicht{
    grid-column: 1 / 6;
    grid-row: 2 / 5;
    min-height: 700px;
}

.projecttegel{
    background-color: transparent;
    width: 200px;
    height: 160px;
    margin: 25px;
    float: left;
    perspective: 1000px;
}

.projecttegel:hover .projecttegelflip{
    transform: rotatey(180deg);
}

.projecttegelflip{
    position: relative;
    width: 100%;
    height: 100%;
    transition: transform 0.9s;
    transform-style: preserve-3d;
}

.projecttegelfront, .projecttegelback{
position: absolute;
width: 100%;
height: 100%;
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
}

.projecttegelfront1{
    background-color: #002837;
    color: #fff;
    width: 100%;
    padding: 0px 3px 0px 3px;
    height: 130px;
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
}

.projecttegelfront2{
    background-color: #ccc;
    color: #000;
    width: 100%;
    padding: 3px;
    height: 30px;
    border-bottom-left-radius: 15px;
    border-bottom-right-radius: 15px;
}


.projecttegelfront{
    background-color: transparent;
    border-radius: 10px;
}

.projecttegelback{
    background-color:#ddd;
    color: #000;
    border-radius: 15px;
    border: 3px #002837 solid;
    transform: rotateY(180deg);
}


.werknemer1{
    border:#000 1px solid;
    border-radius: 5px;
    margin: 5px;
    padding: 5px;
}

.bewerkengegevens .nieuwproject {
    grid-column: 1 / 5;
    min-height: 900px;
}

.nieuwproject iframe{
    background-color: #ddd;
    width: 100%;
    height: 900px;
    border: none;
    overflow:auto;
}

.projectgegevens{
    grid-column: 1 / 6;
    grid-row: 2;
    display: grid;
    grid-template-columns: auto auto auto auto auto auto;
    border-radius: 15px;
    border: 2px #000 solid;
    background-color: #ddd;
    margin-bottom: 15px;
}
.projectdata{
    grid-column: 1 / 7;
    grid-row: 1;

}

.projectdata p{
margin: 2px;
margin-top: 10px;
color: #999;
font-size: 12px;
}

.projectgegevens1{
    grid-column: 1;
    grid-row: 2;

}



.projectgegevens2{
    grid-column: 2;
    grid-row: 2;

}

.projectgegevens3{
    grid-column: 3;
    grid-row: 2;
}

.projectgegevens4{
    grid-column: 4;
    grid-row: 2;

}

.projectgegevens5{
    grid-column: 5;
    grid-row: 2;

}

.projectgegevens6{
    grid-column: 6;
    grid-row: 2;

}




.projectgegevens h2{
    font-size: 22px;
    font-weight: 750;

}

.projectinhoud{
    grid-column: 1 / 6;
    grid-row: 3;
}

.projectinhoud #tabe1{
    width: 100%;
    border: 2px #000 solid;
    border-collapse: collapse;
    font-size: 15px;
    background-color: #fff;
}

.projectinhoud #tabe1 th{
    background-color: #002837;
    color: #e5d043;
    font-weight: 600;
    font-size: 15px;
    text-align: left;
}

.projectwerkbonnen{
    grid-column: 1 / 6;
    grid-row: 4;
}

.projectwerkbonnen #tabe1{
    width: 100%;
    border: 2px #000 solid;
    border-collapse: collapse;
    font-size: 15px;
    background-color: #fff;
}

.projectwerkbonnen #tabe1 th{
    background-color: #002837;
    color: #e5d043;
    font-weight: 600;
    font-size: 15px;
    text-align: left;
}

/*------Overzicht werkbonnen-----*/

.projectenoverzicht .werkbonnen summary{
    width: 75%;
    background-color:#002837;
    color: #fff;
    padding: 10px;
    text-align: left;
    margin-left: auto;
    margin-right: auto;
    font-size: 18px;
    box-shadow: 1px 1px 20px 0px rgb(0 0 0 / 10%);
    cursor:pointer;
    margin-bottom: 10px;
}

.projectenoverzicht .info-werkbon{
    background-color: #ddd;
    color: #000;
    width: 75%;
    margin-left: auto;
    margin-right: auto;
    margin-top: 0;
    margin-bottom: 10px;
    padding: 10px 10px 20px 10px;
    display: grid;
    grid-template-columns: auto auto;
    text-align: left;
    border-bottom-left-radius: 15px;
    border-bottom-right-radius: 15px;
    box-shadow: 1px 1px 20px 0px rgb(0 0 0 / 10%);
}

.info-werkbon1{
    grid-column: 1;
    grid-row: 1;
}

.info-werkbon2{
    grid-column: 2;
    grid-row: 1;
}
.info-werkbon3{
    grid-column: 1;
    grid-row: 2;
    border-top: 1px #aaa solid;
}

.info-werkbon4{
    grid-column: 2;
    grid-row: 2;
    border-top: 1px #aaa solid;
}

.werkbonnen .werknemer1{
    background-color: orangered;
    color: #fff;
    border: none;
    padding: 2px;
}

/*---------Open relatie----------*/



.gegevensrelatie1{
    grid-column: 1;
    grid-row: 2;
    background-color: #ddd;
    border-top-left-radius: 15px;
    border-bottom-left-radius: 15px;
    text-align: left;
    padding: 20px;
    border-left: 1px solid #000;
    border-bottom: 2px solid #000;
    border-top: 2px solid #000;
}

.gegevensrelatie2{
    grid-column: 2;
    grid-row: 2;
    background-color: #ddd;
    text-align: left;
    padding: 20px;
    border-left: 2px solid #ccc;
    border-bottom: 2px solid #000;
    border-top: 2px solid #000;
}

.gegevensrelatie3{
    grid-column: 3;
    grid-row: 2;
    background-color: #ddd;
    text-align: left;
    padding: 20px;
    border-left: 2px solid #ccc;
    border-bottom: 2px solid #000;
    border-top: 2px solid #000;
}
.gegevensrelatie4{
    grid-column: 4;
    grid-row: 2;
    background-color: #ddd;
    text-align: right;
    padding: 20px;
    border-left: 2px solid #ccc;
    border-bottom: 2px solid #000;
    border-top: 2px solid #000;
}

.gegevensrelatie5{
    grid-column: 5;
    grid-row: 2;
    background-color: #ddd;
    border-top-right-radius: 15px;
    border-bottom-right-radius: 15px;
    text-align: left;
    padding: 20px;
    border-left: 2px solid #ccc;
    border-bottom: 2px solid #000;
    border-right: 1px solid #000;
    border-top: 2px solid #000;
}

.huidigeprojecten{
    grid-column: 1 / 6;
    grid-row: 3;
    border-bottom: 2px #ddd solid;
}


.relatiehistorie{
    grid-column: 1 / 6;
    grid-row: 4;
}

.tabelhistorie{
    width: 100%;

}

.tabelhistorie th{
    background-color: #ccc;
    color:#000;
    border-bottom: 2px solid black;
    text-align: left;
}


/*--------Artikel---------*/

.artikelgegevens{
    grid-column: 1 / 7;
    grid-row: 2;
    display: grid;
    grid-template-columns: auto auto auto auto;
    background-color: #ddd;
    border-radius: 15px;
    border: #000 solid 2px;
}

.artikeltitel{
    grid-column: 1 / 5;
    grid-row: 1;
    border-bottom: 1px solid #bbb;
    padding: 10px;
}

.artikelgegevens1{
    grid-column: 1;
    grid-row: 2;
    text-align: left;
    padding: 20px;
}

.artikelgegevens2{
    grid-column: 2;
    grid-row: 2;

    text-align: left;
    padding: 20px;
    border-left: 1px solid #bbb;
}

.artikelgegevens3{
    grid-column: 3;
    grid-row: 2;
    text-align: left;
    padding: 20px;
    border-left: 1px solid #bbb;
}


.artikelgegevens4{
    grid-column: 4;
    grid-row: 2;
    text-align: left;
    padding: 20px;
    border-left: 1px solid #bbb;
}

.dashboard .historieartikeltabel {
    grid-column: 1 / 7;
    grid-row: 3;
    min-height: 400px;
}


/*---------Berichten---------*/

.berichten{
    display: grid;
    grid-template-columns: 30% 70%;
}

.berichten a{
    text-decoration: none;
}

.personen{
    grid-column: 1;
    grid-row: 1;
    overflow-y: auto;
    overflow-x: hidden;
    height: 400px;
}

.bericht{
    grid-column: 2;
    grid-row: 1;
    background-color: #ddd;

}

.bericht1{
    padding: 10px;
    overflow: auto;
    height: 250px;
}


/*---------Bestelling ---------*/

.bestellingtabel {
    grid-column: 1 / 6;
    grid-row: 2 / 6;
    align-content: center;
    text-align: center;
    align-items: center;
    min-height: 800px;
  }

  .bestellinginfo{
    grid-column: 1 / 6;
    grid-row: 2;
    align-content: center;
    text-align: center;

    padding: 10px;
    margin: 5px;
    display: grid;
    grid-template-columns: 33% 34% 33%;
    background-color: #ddd;
    border: 2px #000 solid;
    border-radius: 10px;
  }

.bestellinginfo input{
    background-color: #ddd;
    font-size: 16px;
}

  .bestellingsinfolinks{
    grid-column: 1;
    grid-row: 1;
    align-content: center;
    text-align: center;

  }

  .bestellingsinforechts{

    grid-column: 3;
    grid-row: 1;
    align-content: center;
    text-align: center;
    align-items: center;
    padding-top: 20px;
    padding-bottom: 20px;
  }

  .bestellingsinfomidden{
    grid-column: 2;
    grid-row: 1;
    align-content: center;
    text-align: center;

  }



  /*------Apparaten-----*/

  .apparaatbalk {
    background-color: #ddd;
    box-shadow: 5px 5px 5px rgb(0, 0, 0, 0.1);
    width: 100%;
    padding: 6px;
    margin: 5px;
  }

  .apparaatbalk h1{
    font-size: 24px;
  }

  
  .apparaatinfo{
    grid-column: 1 / 6;
    grid-row: 2;
    align-content: center;
    text-align: center;

    padding: 10px;
    margin: 5px;
    display: grid;
    grid-template-columns: 25% 25% 25%;
    background-color: #ddd;
    border: 2px #000 solid;
    border-radius: 10px;
  }



  .apparaatinfolinks{
    grid-column: 1;
    grid-row: 1;
    align-content: center;
    text-align: center;

  }

  .apparaatinforechts{

    grid-column: 4;
    grid-row: 1;
    align-content: center;
    text-align: center;
    align-items: center;

  }

  .apparaatinfomidden1{
    grid-column: 2;
    grid-row: 1;
    align-content: center;
    text-align: center;

  }
  .apparaatinfomidden2{
    grid-column: 3;
    grid-row: 1;
    align-content: center;
    text-align: center;

  }

  .apparaatgebeurtenissen{
    grid-column: 1 / 6;
    grid-row: 3;
  }

  .apparaatgeb{
    background-color: rgb(0,40,55,0.05);
    box-shadow: 5px 5px 5px rgb(0,0,0,0.2);
    border-radius: 0 0px 5px 5px;
    border-top: 2px solid #002837;
    padding: 5px;
    margin-bottom: 15px;
}


/*------Tabs-----*/

.tabs{
    width: 100%;
    border: 2px solid #000;
    box-shadow: 5px 5px 5px rgb(0,0,0,0.1);

    border-radius: 5px;
}

.tabsmenu{
    background-color: #002837;
    color: #e5d043;
    font-weight: 600;
    font-size: 16px;
    width: auto;
    margin-top: 0px;
    margin-bottom: 5px;
    padding: 5px;
    border-top: 5px #002837 solid;
}

.tabsmenu .tabsmenuknop{
    background-color: #002837;
    color: #e5d043;
    padding-top: 2px;
    padding-left: 5px;
    padding-right: 5px;
    padding-bottom: 5px;

}
.tabsmenu .tabsmenuknop:hover{
    background-color: #00394a;
    cursor: pointer;


}


.tabsmenu .tabsmenuknop.active{
    background-color: #fff;
    color: #002837;
    border-radius: 5px 5px 0 0;
}

.tabcontent{
    margin-top: 5px;
    padding: 5px;
}

.tabcontent a{
    color: rgb(0, 116, 184);
    text-decoration: underline;
    cursor: pointer;
}



/*------Artikelcategorie-----*/


summary.categorienaam{
    width: 80%;
    padding: 10px;
    color: #000;
    font-size: 20px;
    font-weight: 500;
    background-color: #ddd;
    box-shadow: 3px 3px 3px rgb(0, 0, 0, 0.1);
    margin: 10px;
    margin-left: auto;
    margin-right: auto;
    text-align: left;
    border-radius: 5px;
    border: 1px #000 solid;
}

.categorie{
    margin-left: 20px;
}

a.categorieknop{
    font-size: 16px;
    font-weight: 400;
    text-decoration: underline;
    float: right;
    color: rgb(0, 116, 184);
}



/*-------Artikelimport-----*/

.levbalk {
    width: 80%;
    background-color: #ddd;
    color: #000;
    box-shadow: 2px 2px 2px rgb(0,0,0,0.1);
    cursor: pointer;
    font-size: 20px;
    margin-left: auto;
    margin-right: auto;
    border-radius: 10px;
    text-align: left;

}
.levbalk p{
    padding: 10px;
}
.levbalk #pijl {
    color: #000;
    font-size: 20px;
    text-align: right;
    margin-right: 10px;
    float: right;

}

.levbalk #relatienr {
    color: #000;
    font-size: 14px;
    text-align: left;
    margin-right: 10px;
    display: inline-block;
    font-weight: 400;
    
}

.levbalk #aantal {
    color: #000;
    font-size: 18px;
    text-align: center;
    display: inline-block;
    font-style: italic;
}

.levbalk #naam {
    color: #000;
    font-size: 25px;
    text-align: center;
    display: inline-block;
    font-weight: 600;
    margin-left: 10px;
    margin-right: 10px;
}





.formulier{
    width: 80%;
    height: auto;
    background-color: #ddd;
    border-radius: 10px;
    margin: 0 auto;
    min-height: 100px;
    padding: 10px;
}

/*---Admin -------*/

.rechten{
    display: grid;
    grid-template-columns: 50% 50%;

}

.rechten1{
    grid-column: 1;
    grid-row: 1;
}

.rechten2{
    grid-column: 2;
    grid-row: 1;
}



/*-----2BA----*/

.resultaten{
    background-color: #ddd;
    border-radius: 15px;
    display: grid;
    grid-template-columns: 20% 20% 20% 20% 20%;
    margin: 20px;
    text-align: left;
    padding: 10px;
    box-shadow:5px 5px 5px rgb(0, 0, 0, 0.2);
    cursor: pointer;

}

.resultaten h3{
    margin-top: 0;
    font-weight: 600;
}

div.resultaten .afbeelding{
    grid-column: 1;
    grid-row: 1 / 3;
    padding: 10px;
    border-radius: 10px;
    background-color: #fff;
    text-align: center;
    vertical-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
}

div.resultaten .titel{
    grid-column: 2 / 5;
    grid-row: 1;
    padding: 10px;
}

div.resultaten .titel h1{
    font-size: 28px;
    font-weight: 800;
    margin: 2px;

}
div.resultaten .titel p{
    font-size: 15px;
    font-weight: 400;

}


div.resultaten .omschrijving{
    grid-column: 2;
    grid-row: 2;
    padding: 10px;
    border-radius: 10px;
    background-color: #ccc;
    margin-left: 10px;
}
div.resultaten .functies{
    grid-column: 3;
    grid-row: 2;
    padding: 10px;
    border-radius: 10px;
    background-color: #ccc;
    margin-left: 10px;
}

div.resultaten .afbeeldingen img{
    height: 150px;
    vertical-align: center;
}

div.resultaten .prijzen{
    grid-column: 4 / 6;
    grid-row: 2;
    padding: 10px;
    border-radius: 10px;
    background-color: #ccc;
    margin-left: 10px;
}


div.resultaten .knop{
    grid-column: 5;
    grid-row: 1;
    padding: 10px;
    text-align: center;
    display: flex;
    justify-content: center;
}

div.resultaten .knop button{
    margin: 10px;
}