.login-box {
    border: 1px solid black;
    color: black;
    font-weight: bold;
    padding-left: 20px !important;
    height: 50px !important;
    margin-left: auto;
    margin-right: auto;
}
.versieDiv  {
    position: relative;

}

    .versieDiv .versieDatum {
        padding-left: 10px;
        visibility: hidden;
        width: 82px;
        background-color: #555;
        color: #fff;
        text-align: left;
        padding: 5px 0;
        padding-left: 10px;
        border-radius: 6px;
        /* Position the tooltip text */
        position: absolute;
        z-index: 1;
        left: 100.5%;
        opacity: 0;
        transition: opacity 0.3s;
        font-size: 12px;
        margin-bottom:-3px;
    }

.versieDiv:hover .versieDatum {
    visibility: visible;
    opacity: 1;
}
@media screen and (min-width: 0px) and (max-width: 400px) {
    .extraRuimte {
        height:2% !important;
        max-height: 2% !important;
        min-height:2%!important;
    }
    .login-panel {
        background-color: white;
        border-radius: 4px;
        width: 95%;
        height: 73%;
        min-height: 450px;
        margin-left: auto;
        margin-right: auto;
        min-height: 425px;
        box-shadow: 0 1.6px 3.6px 0 RGBA(0, 0, 0, 0.13), 0 0.3px 0.9px 0 RGBA(0, 0, 0, 0.11);
        border: 1px solid #dee2e6;
    }

    .copyright-panel {
        background-color: white;
        border-radius: 4px;
        width: 95%;
        overflow: auto;
        margin-left: auto;
        margin-right: auto;
        box-shadow: 0 1.6px 3.6px 0 RGBA(0, 0, 0, 0.13), 0 0.3px 0.9px 0 RGBA(0, 0, 0, 0.11);
        border: 1px solid #dee2e6;
        font-size: 12px;
        overflow-x: hidden;
    }

    .onderhoud-panel {
        background-color: white;
        border-radius: 4px;
        width: 95%;
        overflow: auto;
        margin-left: auto;
        margin-right: auto;
        box-shadow: 0 1.6px 3.6px 0 RGBA(0, 0, 0, 0.13), 0 0.3px 0.9px 0 RGBA(0, 0, 0, 0.11);
        border: 1px solid #dee2e6;
    }

    .kleinExtra {
        margin-top: 45px;
    }
}
@media screen and (min-width: 400px) and (max-width: 800px) {
    .login-panel {
        background-color: white;
        border-radius: 4px;
        width: 95%;
        height: 65%;
        min-height: 450px;
        margin-left: auto;
        margin-right: auto;
        box-shadow: 0 1.6px 3.6px 0 RGBA(0, 0, 0, 0.13), 0 0.3px 0.9px 0 RGBA(0, 0, 0, 0.11);
        border: 1px solid #dee2e6;
    }
    .copyright-panel {
        background-color: white;
        border-radius: 4px;
        width: 95%;
        overflow: auto;
        margin-left: auto;
        margin-right: auto;
        box-shadow: 0 1.6px 3.6px 0 RGBA(0, 0, 0, 0.13), 0 0.3px 0.9px 0 RGBA(0, 0, 0, 0.11);
        border: 1px solid #dee2e6;
        font-size: 12px;
        overflow-x:hidden;
    }

    .onderhoud-panel {
        background-color: white;
        border-radius: 4px;
        width: 95%;
        overflow: auto;
        margin-left: auto;
        margin-right: auto;
        box-shadow: 0 1.6px 3.6px 0 RGBA(0, 0, 0, 0.13), 0 0.3px 0.9px 0 RGBA(0, 0, 0, 0.11);
        border: 1px solid #dee2e6;
    }
    .kleinExtra {
        margin-top: 45px;
    }
}

@media screen and (min-width: 801px) {
    .login-panel {
        background-color: white;
        border-radius: 4px;
        width: 550px;
        height: 430px;
        min-height: 450px;
        margin-left: auto;
        margin-right: auto;
        box-shadow: 0 1.6px 3.6px 0 RGBA(0, 0, 0, 0.13), 0 0.3px 0.9px 0 RGBA(0, 0, 0, 0.11);
        border: 1px solid #dee2e6;
    }
    .copyright-panel {
        background-color: white;
        border-radius: 4px;
        width: 550px;
        height: 82px;
        margin-left: auto;
        margin-right: auto;
        padding-left:10px;
    }
    .onderhoud-panel {
        background-color: white;
        border-radius: 4px;
        width: 550px;
        overflow:auto;
        padding-top:10px;
        margin-left: auto;
        margin-right: auto;
        box-shadow: 0 1.6px 3.6px 0 RGBA(0, 0, 0, 0.13), 0 0.3px 0.9px 0 RGBA(0, 0, 0, 0.11);
        border: 1px solid #dee2e6;
        margin-top:5px;
    }
    .kleinExtra {
        margin-top: -8px;
    }
}