body    {
    margin: 0;
    font-family: Raleway;
    color: #004C99;
    background-color: #ffffff;
}
.border-boven   {
    width: 100%;
    height: 30px;
    border-bottom: 1px solid #004C99;
}
.boven-midden   {
    width: 80%;
    margin: 4px auto;
    font-size: 13px;
}
.boven-tabel    {
    color: #520000;
    font-size: 16px;
    margin: 6px 0px 0px 25px;
    width: 100%;
}
.main-midden    {
    z-index: -10;
    width: 90%;
    min-height: 1080px;
    margin: 0px auto 0px auto;
    padding: 20px;
    font-size: 14px;
    background-color: #ffffff;
}
.titel  {
    font-size: 20px;
    color: #004C99;
    font-weight: bold;
}
.kaart  {
    width: 900px;
    border-bottom: 1px solid #520000;
    margin: 20px;
    padding: 0px;
}
.gesprekken {
    width: 900px;
    margin: 20px;
    padding: 0px;
}

.projecttd  {
    color: #520000;
    padding: 6px;
}
.relatietd  {
    color: #004C99;
    font-size: 14px;
    vertical-align: top;
    padding: 0px;
}
.todo   {
    margin-top: 40px;
}

input   {
    font-family: Raleway;
    color: #1E90FF;
}

th   {
    text-align: left;
    font-size: 14px;
    color: #004C99;
    border-bottom: 1px solid #004C99;
}
td  {
    font-size: 14px;
    color: #444444;
}

a   {
    color: #004C99;
    text-decoration:    none;
}
a:hover   {
    color: #004C99;
    text-decoration:   underline;
}
a:visited   {
    color: #004C99;
    text-decoration:    none;
}
.container  {
    width: 100%;
    border: 0px solid #004C99;
    margin-top: 20px;
}
.contents   {
    background-color: #ffffff;
    border: 0px solid #004C99;
}

.slide-up, .slide-down {
    overflow:hidden;
}
.slide-up > div, .slide-down > div {
    transform: translateY(-100%);
    transition: .8s ease-in-out;
}
.slide-down > div {
    transform: translateY(0);
    background-color: #ffffff;
}
.bgwhite   {
    background-color: #ffffff;
}

.kolommen   {
    width: 100%;
    border-radius: 5px;
    background-color: #fafafa;
    border: 2px solid #d3d3d3;
}
option  {
    font-family: Raleway;
    color: #004C99;
}

.kolom {
    width: 16%;
    background-color: #fafafa;
    border: 1px solid #d3d3d3;
    border-radius: 5px;
    vertical-align: top;
    font-weight: bold;
}
.taakkolom    {
    width: 33%;
    background-color: #fafafa;
    border: 2px solid #d3d3d3;
    border-radius: 5px;
    vertical-align: top;
    font-weight: bold;
}
.kolom-menu {
    width: 3%;
    background-color: #fafafa;
    border: 2px solid #d3d3d3;
    border-radius: 5px;
    text-align: center;
    vertical-align: top;
    font-weight: bold;
}
.kolom-item {
    position: relative;
    width: 96%;
    background-color: #ffffff;
    border: 1px solid #ADD6FF;
    border-radius: 5px;
    margin: 2px;
    padding: 2px;
    font-family: Raleway;
    font-weight: bold;
    text-align: left;
    font-weight: normal;
}
.ikoon  {
    width: 100%;
    border-radius: 4px;
}
.invoer {
    width: 400px;
    border: 2px solid #d3d3d3;
    border-radius: 5px;
    font-size: 16px;
}
.masonry { /* Masonry container */
    column-count: 5;
    column-gap: 5px;
}

.item { /* Masonry bricks or child elements */
    background-color: #000;
    display: inline-block;
    margin: 0 0 5px 0;
    width: 98%;


}

.material-symbols-outlined {
    font-variation-settings:
    'FILL' 0,
    'wght' 100,
    'GRAD' 0,
    'opsz' 24;
    font-size:  30px;
    line-height:    1;
    color: #ADD6FF;
}
.klant-style    {
    width: 98%;
    border: 2px solid #add6ff;
    border-radius: 5px;
    vertical-align: top;
    padding: 6px;
    background-color: #ffffff;
}