body:after {
    font-family: Verdana, Helvetica, Arial;
    font-size: 12px;
    content: "";
    position: fixed; /* stretch a fixed position to the whole screen */
    top: 0;
    height: 100vh; /* fix for mobile browser address bar appearing disappearing */
    left: 0;
    right: 0;
    z-index: -1; /* needed to keep in the background */
    background: url(images/radiobackground.jpg) center center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='.myBackground.jpg', sizingMethod='scale');
    -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='myBackground.jpg', sizingMethod='scale')";
    margin: 0;
    scroll-behavior: smooth;
}

.tbBasic {
    width: 100%;
    border-collapse: collapse;
}

.tdUser {
    vertical-align: top;
    padding-left: 10px;
    padding-right: 10px;
    padding-bottom: 5px;
    padding-top: 5px;
}

.celLeft {
    width: 10%;
    vertical-align: top;
}

.celMid {
    width: auto;
    vertical-align: top;
}

.celRight {
    width: 10%;
    vertical-align: top;
}

.celMnd {
    vertical-align: top;
    padding-right: 5px;
    width: 50px
}

.celMndDag {
    vertical-align: top;
    padding-right: 15px;
    width: 50px;
}

.celMndBedrag {
    vertical-align: top;
}

.celMndSep {
    vertical-align: top;
    padding-left: 15px;
    padding-right: 15px;
    width: 100px;
}



.menu {
    margin-left: 500px;
    font-size: Large;
    Color: White;
    background-color: #666666;
}


/*------------------------------------------------- menu inclusief dropdown menu*/
#divnavbar .NavBar {
    position: fixed;
    top: 0px;
    right: 40px;
    z-index: 9999;
}

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: rgba(50,50,50,0.5);
    z-index: 9999;
}

li {
    float: left;
}

    li a, .dropbtn {
        font-size: 12px;
        display: inline-block;
        color: white;
        text-align: center;
        padding: 14px 16px;
        text-decoration: none;
    }

        li a:hover, .dropdown:hover .dropbtn {
            background-color: rgba(5,50,100,0.7);
        }

    li.dropdown {
        display: inline-block;
    }

.dropdown-content {
    display: none;
    position: absolute;
    background-color: rgba(100,50,100,0.5);
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
}

    .dropdown-content a {
        color: white;
        padding: 12px 16px;
        text-decoration: none;
        display: block;
        text-align: left;
    }

        .dropdown-content a:hover {
            background-color: rgba(50,50,100,0.5);
        }

.dropdown:hover .dropdown-content {
    display: block;
}

.tooltip {
    position: relative;
    display: inline-block;
    border-bottom: 1px dotted black;
}

    .tooltip .tooltiptext {
        visibility: hidden;
        width: 120px;
        background-color: white;
        color: #fff;
        text-align: center;
        border-radius: 6px;
        padding: 5px 0;
        /* Position the tooltip */
        position: absolute;
        left: 500px;
        top: 400px;
        z-index: 1;
    }

    .tooltip:hover .tooltiptext {
        visibility: visible;
    }

.panel {
    width: 400px;
    height: 400px;
}

.difTabel {
    width: 97%;
    height: 450px;
    overflow: scroll;
    float: unset;
    background-color: #EEEEFF;
    position: absolute;
    top: 100px;
    left: 20px;
}

.divLabel {
    /*    width: 90%;
    height: 450px;
    float: right;
    margin-right: 20px;  
    overflow: hidden;*/
    width: 90%;
    float: right;
    margin-right: 20px;
    height: auto;
    OVERFLOW: auto;
}

.divLabel2 {
    width: 90%;
    float: right;
    margin-right: 20px;
    height: auto;
    OVERFLOW: auto;
}

.enMoney::before {
    content: "€";
}

.wisselknopKlein {
    position: unset;
    top: unset;
    left: unset;
    margin-left: 30px;
}

.wisselknopGroot {
    position: absolute;
    top: 675px;
    left: 800px;
    margin-left: 30px;
}

.alert {
    position: absolute;
    top: 50px;
    left: 50%;
    margin-left: -100px;
}
/*@@@@@@@@@@@@@@@@@@@@@  Uit de DragJava - oefening 
    # verwijst naar het id
*/
#container {
    width: 1000px;
    height: 1000px;
    background-color: rgba(50,50,50,0.1);
    display: flex;
    overflow: hidden;
    position: absolute;
    top: 00px;
    left: 00px;
}


img {
    width: 100px;
    height: 100px;
}

img:hover {
    opacity: 0.5;
}

.item {
    width: 100px;
    height: 100px;
}
    /* : verwijst naar het actieve iten, (bijvoorbeeld een opkleurende link)*/
    .item:active {
        width: 100px;
        height: 100px;
    }

    .item:hover {
        cursor: move;
    }
/*@@@@@@@@@@@@@@@@@@@@@  Einde Uit de DragJava - oefening met vervolg  voor de more-variant */


.n00 {
    width: 100px;
    height: 100px;
    position: absolute;
    top: 0px;
    left: 0px;
}
.n01 {
    width: 100px;
    height: 100px;
    position: absolute;
    top: 0px;
    left: 100px;
}
.n02 {
    width: 100px;
    height: 100px;
    position: absolute;
    top: 0px;
    left: 200px;
}
.n03 {
    width: 100px;
    height: 100px;
    position: absolute;
    top: 0px;
    left: 300px;
}
.n04 {
    width: 100px;
    height: 100px;
    position: absolute;
    top: 0px;
    left: 400px;
}
.n05 {
    width: 100px;
    height: 100px;
    position: absolute;
    top: 0px;
    left: 500px;
}
.n06 {
    width: 100px;
    height: 100px;
    position: absolute;
    top: 0px;
    left: 600px;
}
.n07 {
    width: 100px;
    height: 100px;
    position: absolute;
    top: 0px;
    left: 700px;
}
.n08 {
    width: 100px;
    height: 100px;
    position: absolute;
    top: 0px;
    left: 800px;
}
.n09 {
    width: 100px;
    height: 100px;
    position: absolute;
    top: 0px;
    left: 900px;
}

.n10 {
    width: 100px;
    height: 100px;
    position: absolute;
    top: 100px;
    left: 0px;
}

.n11 {
    width: 100px;
    height: 100px;
    position: absolute;
    top: 100px;
    left: 100px;
}

.n12 {
    width: 100px;
    height: 100px;
    position: absolute;
    top: 100px;
    left: 200px;
}

.n13 {
    width: 100px;
    height: 100px;
    position: absolute;
    top: 100px;
    left: 300px;
}

.n14 {
    width: 100px;
    height: 100px;
    position: absolute;
    top: 100px;
    left: 400px;
}

.n15 {
    width: 100px;
    height: 100px;
    position: absolute;
    top: 100px;
    left: 500px;
}

.n16 {
    width: 100px;
    height: 100px;
    position: absolute;
    top: 100px;
    left: 600px;
}

.n17 {
    width: 100px;
    height: 100px;
    position: absolute;
    top: 100px;
    left: 700px;
}

.n18 {
    width: 100px;
    height: 100px;
    position: absolute;
    top: 100px;
    left: 800px;
}

.n19 {
    width: 100px;
    height: 100px;
    position: absolute;
    top: 100px;
    left: 900px;
}

.n20 {
    width: 100px;
    height: 100px;
    position: absolute;
    top: 200px;
    left: 0px;
}

.n21 {
    width: 100px;
    height: 100px;
    position: absolute;
    top: 200px;
    left: 100px;
}

.n22 {
    width: 100px;
    height: 100px;
    position: absolute;
    top: 200px;
    left: 200px;
}

.n23 {
    width: 100px;
    height: 100px;
    position: absolute;
    top: 200px;
    left: 300px;
}

.n24 {
    width: 100px;
    height: 100px;
    position: absolute;
    top: 200px;
    left: 400px;
}

.n25 {
    width: 100px;
    height: 100px;
    position: absolute;
    top: 200px;
    left: 500px;
}

.n26 {
    width: 100px;
    height: 100px;
    position: absolute;
    top: 200px;
    left: 600px;
}

.n27 {
    width: 100px;
    height: 100px;
    position: absolute;
    top: 200px;
    left: 700px;
}

.n28 {
    width: 100px;
    height: 100px;
    position: absolute;
    top: 200px;
    left: 800px;
}

.n29 {
    width: 100px;
    height: 100px;
    position: absolute;
    top: 200px;
    left: 900px;
}

.n30 {
    width: 100px;
    height: 100px;
    position: absolute;
    top: 300px;
    left: 0px;
}
.n31 {
    width: 100px;
    height: 100px;
    position: absolute;
    top: 300px;
    left: 100px;
}
.n32 {
    width: 100px;
    height: 100px;
    position: absolute;
    top: 300px;
    left: 200px;
}

.n33 {
    width: 100px;
    height: 100px;
    position: absolute;
    top: 300px;
    left: 300px;
}

.n34 {
    width: 100px;
    height: 100px;
    position: absolute;
    top: 300px;
    left: 400px;
}

.n35 {
    width: 100px;
    height: 300px;
    position: absolute;
    top: 300px;
    left: 500px;
}

.n36 {
    width: 100px;
    height: 100px;
    position: absolute;
    top: 300px;
    left: 600px;
}

.n37 {
    width: 100px;
    height: 100px;
    position: absolute;
    top: 300px;
    left: 700px;
}

.n38 {
    width: 100px;
    height: 100px;
    position: absolute;
    top: 300px;
    left: 800px;
}

.n39 {
    width: 100px;
    height: 100px;
    position: absolute;
    top: 300px;
    left: 900px;
}

.n40 {
    width: 100px;
    height: 100px;
    position: absolute;
    top: 400px;
    left: 0px;
}

.n41 {
    width: 100px;
    height: 100px;
    position: absolute;
    top: 400px;
    left: 100px;
}

.n42 {
    width: 100px;
    height: 100px;
    position: absolute;
    top: 400px;
    left: 200px;
}

.n43 {
    width: 100px;
    height: 100px;
    position: absolute;
    top: 400px;
    left: 300px;
}

.n44 {
    width: 100px;
    height: 100px;
    position: absolute;
    top: 400px;
    left: 400px;
}

.n45 {
    width: 100px;
    height: 100px;
    position: absolute;
    top: 400px;
    left: 500px;
}

.n46 {
    width: 100px;
    height: 100px;
    position: absolute;
    top: 400px;
    left: 600px;
}

.n47 {
    width: 100px;
    height: 100px;
    position: absolute;
    top: 400px;
    left: 700px;
}

.n48 {
    width: 100px;
    height: 100px;
    position: absolute;
    top: 400px;
    left: 800px;
}

.n49 {
    width: 100px;
    height: 100px;
    position: absolute;
    top: 400px;
    left: 900px;
}


.n50 {
    width: 100px;
    height: 100px;
    position: absolute;
    top: 500px;
    left: 0px;
}

.n51 {
    width: 100px;
    height: 100px;
    position: absolute;
    top: 500px;
    left: 100px;
}

.n52 {
    width: 100px;
    height: 100px;
    position: absolute;
    top: 500px;
    left: 200px;
}



.n53 {
    width: 100px;
    height: 100px;
    position: absolute;
    top: 500px;
    left: 300px;
}

.n54 {
    width: 100px;
    height: 100px;
    position: absolute;
    top: 500px;
    left: 400px;
}

.n55 {
    width: 100px;
    height: 100px;
    position: absolute;
    top: 500px;
    left: 500px;
}

.n56 {
    width: 100px;
    height: 100px;
    position: absolute;
    top: 500px;
    left: 600px;
}


.n57 {
    width: 100px;
    height: 100px;
    position: absolute;
    top: 500px;
    left: 700px;
}

.n58 {
    width: 100px;
    height: 100px;
    position: absolute;
    top: 500px;
    left: 800px;
}

.n59 {
    width: 100px;
    height: 100px;
    position: absolute;
    top: 500px;
    left: 900px;
}


.n60 {
    width: 100px;
    height: 100px;
    position: absolute;
    top: 600px;
    left: 0px;
}

.n61 {
    width: 100px;
    height: 100px;
    position: absolute;
    top: 600px;
    left: 100px;
}

.n62 {
    width: 100px;
    height: 100px;
    position: absolute;
    top: 600px;
    left: 200px;
}

.n63 {
    width: 100px;
    height: 100px;
    position: absolute;
    top: 600px;
    left: 300px;
}

.n64 {
    width: 100px;
    height: 100px;
    position: absolute;
    top: 600px;
    left: 400px;
}

.n65 {
    width: 100px;
    height: 100px;
    position: absolute;
    top: 600px;
    left: 500px;
}

.n66 {
    width: 100px;
    height: 100px;
    position: absolute;
    top: 600px;
    left: 600px;
}


.n67 {
    width: 100px;
    height: 100px;
    position: absolute;
    top: 600px;
    left: 700px;
}

.n68 {
    width: 100px;
    height: 100px;
    position: absolute;
    top: 600px;
    left: 800px;
}

.n69 {
    width: 100px;
    height: 100px;
    position: absolute;
    top: 600px;
    left: 900px;
}


.n70 {
    width: 100px;
    height: 100px;
    position: absolute;
    top: 700px;
    left: 0px;
}

.n71 {
    width: 100px;
    height: 100px;
    position: absolute;
    top: 700px;
    left: 100px;
}

.n72 {
    width: 100px;
    height: 100px;
    position: absolute;
    top: 700px;
    left: 200px;
}

.n73 {
    width: 100px;
    height: 100px;
    position: absolute;
    top: 700px;
    left: 300px;
}

.n74 {
    width: 100px;
    height: 100px;
    position: absolute;
    top: 700px;
    left: 400px;
}

.n75 {
    width: 100px;
    height: 100px;
    position: absolute;
    top: 700px;
    left: 500px;
}

.n76 {
    width: 100px;
    height: 100px;
    position: absolute;
    top: 700px;
    left: 600px;
}

.n77 {
    width: 100px;
    height: 100px;
    position: absolute;
    top: 700px;
    left: 700px;
}

.n78 {
    width: 100px;
    height: 00px;
    position: absolute;
    top: 700px;
    left: 800px;
}

.n79 {
    width: 100px;
    height: 100px;
    position: absolute;
    top: 700px;
    left: 900px;
}

.n80 {
    width: 100px;
    height: 100px;
    position: absolute;
    top: 800px;
    left: 0px;
}

.n81 {
    width: 100px;
    height: 100px;
    position: absolute;
    top: 800px;
    left: 100px;
}

.n82 {
    width: 100px;
    height: 100px;
    position: absolute;
    top: 800px;
    left: 200px;
}

.n83 {
    width: 100px;
    height: 100px;
    position: absolute;
    top: 800px;
    left: 300px;
}

.n84 {
    width: 100px;
    height: 100px;
    position: absolute;
    top: 800px;
    left: 400px;
}

.n85 {
    width: 100px;
    height: 100px;
    position: absolute;
    top: 800px;
    left: 500px;
}

.n86 {
    width: 100px;
    height: 100px;
    position: absolute;
    top: 800px;
    left: 600px;
}

.n87 {
    width: 100px;
    height: 100px;
    position: absolute;
    top: 800px;
    left: 700px;
}

.n88 {
    width: 100px;
    height: 100px;
    position: absolute;
    top: 800px;
    left: 800px;
}

.n89 {
    width: 100px;
    height: 100px;
    position: absolute;
    top: 800px;
    left: 900px;
}

.n90 {
    width: 100px;
    height: 100px;
    position: absolute;
    top: 900px;
    left: 0px;
}

.n91 {
    width: 100px;
    height: 100px;
    position: absolute;
    top: 900px;
    left: 100px;
}

.n92 {
    width: 100px;
    height: 100px;
    position: absolute;
    top: 900px;
    left: 200px;
}

.n93 {
    width: 100px;
    height: 100px;
    position: absolute;
    top: 900px;
    left: 300px;
}

.n94 {
    width: 100px;
    height: 100px;
    position: absolute;
    top: 900px;
    left: 400px;
}

.n95 {
    width: 100px;
    height: 100px;
    position: absolute;
    top: 900px;
    left: 500px;
}

.n96 {
    width: 100px;
    height: 100px;
    position: absolute;
    top: 900px;
    left: 600px;
}

.n97 {
    width: 100px;
    height: 100px;
    position: absolute;
    top: 900px;
    left: 700px;
}

.n98 {
    width: 100px;
    height: 100px;
    position: absolute;
    top: 900px;
    left: 800px;
}

.n99 {
    width: 100px;
    height: 100px;
    position: absolute;
    top: 900px;
    left: 900px;
}

#plaatje.combi {
    width: 100px;
    height: 100px;
    background-color: rgba(0, 0, 0, 0.00);
    top: -10%;
    left: 5%;
}

#plaatje:active {
    opacity: .75;
}

#plaatje:hover {
    cursor: pointer;
}


#bovenbalk {
    width: 1000px;
    height: 300px;
    background-color: aqua;
    position: absolute;
    top: 0px;
    left: 0px;
    z-index: 1; 
}

#linksbalk {
    width: 300px;
    height: 1000px;
    background-color: aqua;
    position: absolute;
    top: 0px;
    left: 0px;
    z-index: 1;
}

#rechtsbalk {
    width: 300px;
    height: 1000px;
    background-color: aqua;
    position: absolute;
    top: 0px;
    left: 700px;
    z-index: 1;
}

#onderbalk {
    width: 1000px;
    height: 300px;
    background-color: aqua;
    position: absolute;
    top: 700px;
    left: 0px;
    z-index: 1;
}


/*@@@@@@@@@@@@@@@@@@@@@  Start Uit de MovingImageJava - oefening */
#myContainer {
    width: 400px;
    height: 400px;
    position: relative;
    background: yellow;
}

#myAnimation {
    width: 50px;
    height: 50px;
    position: absolute;
    background-color: red;
}
/*@@@@@@@@@@@@@@@@@@@@@  Einde Uit de DragJava - oefening */

.absoluteP {
    position: absolute;
    left: 10px;
    top: 0px;
}

.Kontainer {
    height: 400px;
    padding: 5px;
    width: 500px;
    border: 1px solid #888;
    position: absolute;
    left: 900px;
    top: 50px;
}