html,
body {
    width: 100%;
    height: 100%;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 12px;
    font-weight: normal;
    overflow: visible;
}

body {
    margin: 0;
    background: black;
}

/* LOGIN */
#bodyfirst {
    content: "";
    background: #663;
    position: absolute;
    top: 0; bottom: 0; right: 0; left: 0;
    z-index: -1;
}

#Login {
    width: 380px;
    height: fit-content;
    position: fixed;
    top: 50%; left: 50%;
    margin-left: -190px;
    margin-top: -120px;
    background: #C2C2C2;
    color: #000;
    font-size: 12px;
    border: 1px solid #000;
    z-index: 1;
}

#Login p {
    margin: 3px;
    padding: 3px;
    text-align: left;
}

#Login .input{
    padding: 8px;
    display: block;
    border: none;
    border-bottom: 1px solid #000;
    width: 350px;
    background: #C2C2C2;
}

.AlertMessageLogin {
    position: absolute;
    top: -10px;
    width: 600px;
    padding: 20px;
    line-height: 20px;
    background: #ff9800;
    color: white;
    opacity: 1;
    transition: opacity 0.6s;
    margin: -80px 0 20px -135px;
    text-align: left;
}

.Alertclosebtn:hover {color: #000;}

#Login i {
    cursor: pointer;
    float: right;
    margin: -25px 7px 0 0;
    font-size: 18px;
}
#Login .submit{
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
}

#footerfirst{
    position: fixed;
    bottom: 0;
    height: 30vh;
    width: 100%;
    background: rgba(51, 51, 51, 0.4);
}

/* */
header {
    font-size: 13px;
    position: fixed;
    top: 0; left: 0; right: 0;
}

#header_bar_1,
#header_bar_2,
#header_bar_3 {
    line-height: 25px;
    overflow: visible;
    white-space: nowrap;
    z-index: 5;
}

#header_bar_1 {
    padding: 0 8px;
    color: #FFF;
    background: #663;
}

#header_bar_2 {
    background: #C2C2C2;
}

#header_bar_3 {
    background: #333;
}

#header_bar_2 a,
#header_bar_3 a {
    padding: 5px 8px;
    text-decoration: none;
}
#header_bar_2 a {
    color: black;
}

#header_bar_3 a,
#header_bar_3 .dropdown-btn {
    color: white;
}

#header_bar_2 a:hover,
#header_bar_2 .dropdown-btn:hover {
    background: #333;
    color: white;
}

#header_bar_3 a:hover,
#header_bar_3 .dropdown-btn:hover {
    background: #C2C2C2;
    color: black;
}

#header_bar_2 a.active {
    font-weight: bold;
    background: #333;
}

#header_bar_3 a.active {
    font-weight: bold;
    background: #C2C2C2;
}

.dropdown {
    position: relative;
    display: inline-block;
    margin:-8px -4px -8px 0;
}

.dropdown-btn {
    border: none;
    cursor: pointer;
    padding: 5px 8px;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 120px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 200;
}

.dropdown-content a,
#header_bar_3 .dropdown-content a {
    color: black;
    padding: 10px 14px;
    text-decoration: none;
    display: block;
}

.dropdown-content a:hover {
    background: #f1f1f1;
}

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

#Boekhouden {width: 900px; margin-left: auto; margin-right: auto; font-family: Tahoma,Verdana; font size: 15px; font-weight:normal; padding:0; color: #FFF;}
#Boekhouden a:link, #Boekhouden a:visited{color: #00F; text-decoration: none;}
#Boekhouden a:hover{color: #000; text-decoration: none;}
#Boekhouden .td1 {height: 20px; background-color: #CCC; font-size: 10px; color: #333; text-align: left; line-height: 20px;}
#Boekhouden .td2 {height: 20px; background-color: #808080; text-align: center; line-height: 20px;}
.excel-link {height:20px;float:right;margin-top:-23px;margin-right:5px;clear:both;}
#Boekhouden #verantwoording {width: 420px; margin-left: 20px; text-align: left; float: left;}
#Boekhouden #laatsteupdate {width: 420px; margin-right: 20px; text-align: right; float: right;}
#Boekhouden .toonaantal{font-size: 15px; font-weight: bold; margin-left: 5px; margin-top: 0px; margin-right: 5px; margin-bottom: 0px;}
#Boekhouden p {margin-left: 5px; margin-top: 0px; margin-right: 5px; margin-bottom: 0px;}
.betaald {color: #008000; font-weight: bold;}
.nietbetaald {color: #F00; font-weight: bold;}

#Boekhouden_klein {width: 900px; text-align: left; margin-left: 15px;font-family: Tahoma,Verdana; font size: 15px; font-weight:normal; margin: 0; padding:0; color: #FFF;}
#Boekhouden_klein td {height: 21px;}

#Boekhouden #div1 {margin-left: 15px;}
#Boekhouden #div2 {margin-left: 35px;}



#Boekhouden .hyperlinkcss{
position:absolute;
margin-left:0px;               /* horizontale positie van het menu t.o.v. de link */
margin-top:0px;                /* verticale positie van het menu t.o.v. de link */
visibility: hidden;
border:4px solid #333333;
border-bottom-width: 0;
font:normal 12px Verdana;
line-height: 18px;
z-index: 100;
width: 210px;
background-color:#808080;
text-align: center;
}

#Boekhouden .hyperlinkcss a{
width: 100%;
display: block;
text-indent: 3px;
border-bottom: 1px solid black;
padding: 1px 0;
text-decoration: none;
font-weight: plain;
color: #000000;
}

#Boekhouden .hyperlinkcss a:hover{
background-color: #D8D8D8;
color: #000000;
}
}


.hyperlinkcss{
position:absolute;
margin-left:-40px;             /* horizontale positie van het menu t.o.v. de link */
margin-top:0px;                /* verticale positie van het menu t.o.v. de link */
visibility: hidden;
border:2px solid #333333;
font:normal 12px Palatino Linotype;
line-height: 18px;
z-index: 100;
width: 138px;
}

.hyperlinkcss a{
width: 100%;
display: block;
text-indent: 3px;
border-bottom: 1px solid black;
padding: 1px 0;
text-decoration: none;
font-weight: plain;
color: #808080;
}

.hyperlinkcss a:hover{
color: #666633;
}








#content {padding: 83px 8px 33px 8px; overflow: visible; z-index: 5;}

#content a:link, #content a:visited {text-decoration: none;}
#content a:hover {text-decoration: underline;}

#error_script_text {
    width: calc(100% - 10px);
    background: orange;
    color: #FFF;
    text-align: center;
    margin-bottom: 8px;
    padding: 5px;
    clear: both;
}

.tileSt {
    width: 80px;
    height: 80px;
    border-radius: 14px;
    font-size: 13px;
    color: #FFF;
    background: #000;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    cursor: pointer;
    float:left;
    margin: 8px;
}

#foppersaanvragen tr:hover {background: #FFF;}
.cube {
    width: 15px;
    height: 15px;
    margin: auto;
    z-index: 1;
}

.link {color: blue; cursor: pointer;}
.link:hover {text-decoration: underline;}
.pointer {cursor: pointer;}

.BGblack {background: #000;}
.BGdarkgray {background: #333;}
.BGdarkred {background:  #933;}
.BGgray {background: #C2C2C2;}
.BGgreen {background: #008000;}
.BGlightblue {background: #09F;}
.BGorange {background: #F90;}
.BGred {background: #F00;}

.TxTblack {color: #000;}
.TxTblue {color: blue;}
.TxTgray {color: #C0C0C0;}
.TxTgreen {color: #008000;}
.TxTpurple {color:purple}
.TxTred {color: #F00;}
.TxTwhite {color: #FFF;}

.TxT15 {font-size: 15px;}
.TxT18 {font-size: 18px;}
.TxT20 {font-size: 20px;}
.TxT25 {font-size: 25px;}

.TxTbold {font-weight: bold;}

.TxTcenter {text-align: center;}

select {padding: 0 4px 0 1px;}

.tileLY, .tileLN {border-radius:14px;width: 125px; height: 125px; margin: 15px; float: left; color: #FFF; font-size: 32px; text-align: center; display: table;}

.tileLY span,.tileLN span {vertical-align: middle; display: table-cell;}

.AlertMessage {width:100%;max-width:860px;padding: 20px;background: #04AA6D;color: white;opacity: 1;transition: opacity 0.6s;margin-bottom: 15px;text-align:left;}
.AlertMessage.warning {background: #f44336;}
.AlertMessage.info {background: #2196F3;}
.AlertMessage.notification {background: #ff9800;}
.Alertclosebtn {margin-left: 15px;color: #FFF;font-weight: bold;float: right;font-size: 22px;line-height: 12px;cursor: pointer;transition: 0.3s;}
.Alertclosebtn:hover {color: #000;}

footer {width:100%;position:fixed;bottom:0;left:0;background:#663;line-height:25px;padding: 0 10px;color:#FFF;}

/* The Modal (background) */
.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    padding-top: 100px; /* Location of the box */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

/* Modal Content */
.modal-content {
    position: relative;
    background-color: #fefefe;
    margin: auto;
    padding: 0;
    border: 1px solid #888;
    width: 80%;
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
    -webkit-animation-name: animatetop;
    -webkit-animation-duration: 0.4s;
    animation-name: animatetop;
    animation-duration: 0.4s
}

/* Add Animation */
@-webkit-keyframes animatetop {
    from {top:-300px; opacity:0}
    to {top:0; opacity:1}
}

@keyframes animatetop {
    from {top:-300px; opacity:0}
    to {top:0; opacity:1}
}

/* The Close Button */
.close {
    color: white;
    float: right;
    font-size: 28px;
    font-weight: bold;
}

.close:hover,
.close:focus {
    color: #000;
    text-decoration: none;
    cursor: pointer;
}

.modal-header {
    padding: 2px 16px;
    background-color: #933;
    color: white;
}

.modal-body {padding: 2px 16px;max-height:65vh;overflow:auto;}

.modal-footer {
    padding: 2px 16px;
    background-color: #333;
    color: white;
}