/* ========================================================================== 
   ALGEMENE DIV
   ========================================================================== */

div {
    #box-shadow: inset 0 0 0 1px #f58220;
}
header,
footer,
.header,
.footer
{
    display: flow-root;
    width: 100%;
    height: auto;
    box-sizing: border-box;
}
a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
	text-decoration: none;
}
a:hover {
    text-decoration: underline;
}
a i {
    color:red;
	flex-shrink: 0;
}
/* ==========================================================================
   BLOKKEN
   ========================================================================== */

.blok100,
.blok90,
.blok80,
.blok70,
.blok60,
.blok50,
.blok40,
.blok33,
.blok30,
.blok25,
.blok20,
.blok10,
.blok5 {
    box-sizing: border-box;
    height: auto;
    #float: left;
}

.blok100 {
    flex: 0 0 calc(100% - 10px);
}

.blok90 {
    flex: 0 0 calc(90% - 10px);
}

.blok80 {
    flex: 0 0 calc(80% - 10px);
}

.blok70 {
    flex: 0 0 calc(70% - 10px);
}

.blok60 {
    flex: 0 0 calc(60% - 10px);
}

.blok50 {
    flex: 0 0 calc(50% - 20px);
}

.blok40 {
    flex: 0 0 calc(40% - 10px);
}

.blok33 {
    flex: 0 0 calc((100% - 40px) / 3);
}

.blok30 {
    flex: 0 0 calc(30% - 10px);
}

.blok25 {
    flex: 0 0 calc(25% - 10px);
}

.blok20 {
    flex: 0 0 calc(20% - 10px);
}

.blok10 {
    flex: 0 0 calc(10% - 10px);
}

.blok5 {
    flex: 0 0 calc(5% - 10px);
}


/* ==========================================================================
   UITGEBREIDE AFBEELDINGSBESCHRIJVING
   ========================================================================== */

.alt_uitgebreid {
    position: absolute !important;

    width: 1px !important;
    height: 1px !important;

    padding: 0 !important;
    margin: -1px !important;

    overflow: hidden !important;

    clip: rect(0, 0, 0, 0) !important;
    clip-path: inset(50%) !important;

    white-space: nowrap !important;

    border: 0 !important;
    box-shadow: none !important;

    font-size: 1px !important;
    line-height: 1px !important;
}


/* ==========================================================================
   DATA
   ========================================================================== */

.data {
    background-color: var(--kleur-10);
    padding: 20px;
    border-radius: 10px;
}

.dataregelkop {
    display: flex;
    flex-wrap: wrap;
    background-color: var(--kleur-85);
    color: var(--kleur-10);
    width: 100%;
    box-sizing: border-box;
}

.dataregel {
    display: flex;
    flex-wrap: wrap;
    padding: 5px 0;
    border-top: solid 1px var(--kleur-0);
    border-bottom: solid 1px var(--kleur-30);
    width: 100%;
    box-sizing: border-box;
}

.dataregel:nth-child(odd) {
    background-color: var(--kleur-10);
}

.dataregel:nth-child(even) {
    background-color: var(--kleur-15);
}

.dataregel:hover {
    background-color: var(--kleur-5);
}


/* ==========================================================================
   DATAREGEL BLOKKEN
   ========================================================================== */

.dataregelblok100,
.dataregelblok90,
.dataregelblok80,
.dataregelblok70,
.dataregelblok60,
.dataregelblok50,
.dataregelblok40,
.dataregelblok33,
.dataregelblok30,
.dataregelblok25,
.dataregelblok20,
.dataregelblok10,
.dataregelblok5 {
    float: left;
    padding: 0 10px;
}

.dataregelblok100 {
    flex: 0 0 100%;
}

.dataregelblok90 {
    flex: 0 0 90%;
}

.dataregelblok80 {
    flex: 0 0 80%;
}

.dataregelblok70 {
    flex: 0 0 70%;
}

.dataregelblok60 {
    flex: 0 0 60%;
}

.dataregelblok50 {
    flex: 0 0 50%;
}

.dataregelblok40 {
    flex: 0 0 40%;
}

.dataregelblok33 {
    flex: 0 0 33.3333%;
}

.dataregelblok30 {
    flex: 0 0 30%;
}

.dataregelblok25 {
    flex: 0 0 25%;
}

.dataregelblok20 {
    flex: 0 0 20%;
}

.dataregelblok10 {
    flex: 0 0 10%;
}

.dataregelblok5 {
    flex: 0 0 5%;
}