.DisplayNone {
    display:none;
}
DisplayAll {
    display:unset;
}

.container {
    width: 80%;
    margin: 0 auto;
    padding: 10px;
    position: relative;
    min-height: 100vh; /* Ensure the container takes at least the full height of the viewport */
    display: flex;
    flex-direction: column;
}

.hoofdmenu, .submenu {
    width: 100%;
    border: 1px solid black;
    border-radius: 10px;
    margin: 0 auto;
    background-color: white;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
}

.submenu {
    height: 25px !important;
    top: 65px;
    justify-content: start;
    align-items: center;
}

.nav_div {
    height: 65px !important;
    top: 1px;
}
.btn_user1 {
    display: flex;
    align-items: center; /* Aligns the button vertically with the nav items */
    margin-left: auto; /* Pushes the button to the right */
}

    .btn_user1 .dropdown-toggle {
        display: flex;
        align-items: center; /* Aligns the arrow vertically with the image */
        padding: 0; /* Removes any extra padding */
    }

.navbar-nav {
    display: flex;
    align-items: center; /* Aligns the nav items vertically */
}

.nav-link {
    left: 10px;
    position: relative;
    margin-right: 10px; /* Adds some space between nav items */
}
.logo {
    display: inline;
    width: 180px;
    position: relative;
    float: left;
    left: -10px !important;
}


.hoofdmenu {
display: flex;
 align-items: center;
 height: 65px;
}


#ImgLogoVE {
    display: flex;
    align-items: center;
    height: 100%;
    border-radius: 10px!important;
}


.ve_logo { 
width: 190px;
height: 65px;
max-width: 190px;
max-height: 65px !important;
object-fit: cover; /* or 'contain' if you want full image visible */
display: block;
margin: 0 !important;
padding: 0 !important;
 vertical-align: middle;
 border-radius:10px!important;
}


.menus {
    position: relative;
    width: calc(100% - 180px);
    float: left;
    left: 10px !important;
}

.divHome, .divOverOns, .divContact {
    text-align: center;
    line-height: 65px;
    display: block;
    width: 100px;
    position: relative;
    float: left;
    margin-left: 5px;
}

.lnkHome, .lnkOverOns, .lnkContact {
    background-color: white;
    width: 100px;
    height: 65px;
    border-style: none;
    text-decoration: none;
    color: black;
}

.divMenuRechts {
    text-align: center;
    line-height: 65px;
    display: block;
    width: 100px;
    position: relative;
    float: right;
    right: 0 !important;
}

.lnkAanmelden, .lnkAfmelden, .lnkUser {
    color: black;
}

.divBedrijfsLogo {
    text-align: center;
    line-height: 65px;
    display: block;
    width: 180px;
    position: relative;
    float: right;
    right: -26%;
}

.lnkBedrijfsLogo {
    max-width: 180px;
    height:65px;
    max-height: 65px;
}

.VE_Menu_Icon {
    margin-left: 10px;
    width: 25px;
    height: 25px;
}

.main_content {
    width: 100%;
    margin:0 auto;
    border: 1px solid black;
    border-radius: 10px;    
    top: 100px !important;
    height: calc(100% - 65px) !important;    
    flex: 1; /* Allow the main content to grow and take available space */
    margin-bottom:1px!important;
}

.kolom3 {
    width: 33%;
    float: left;
}

.kolom3r {
    width: 33%;
    float: right;
    position: relative;
    top: 20px;
}

.divFooter {
    height: 60px;
    width: 100%; /* Set width to 100% of the parent container */
    position: sticky; /* Position relative to the parent container */
    bottom: 0;
    left: 0;
    z-index: 999;
    border: 1px solid black;
    border-radius: 10px;
    background-color: white;
    display: flex;
    justify-content: space-between; /* Distribute space between child elements */
    align-items: center; /* Center items vertically */
    padding: 10px;
}

.bottom-links, .bottom-rechts, .bottom-middel {
    display: flex;
    justify-content: center; /* Center horizontally */
    align-items: center; /* Center vertically */
    padding: 10px;
    width: 100%; /* Ensure it takes full width */
}

    .bottom-links a, .bottom-links p {
        margin: 0 5px;
    }

.LinkedIn_Logo {
    width: 25px;
    height: 25px;
}

.Knoppen_Default {
    width: 200px !important;
    padding-left: 5px;
    padding-right: 5px;
    text-align: left;
    border-radius: 10px;
    border: 2px solid #64B76F;
}

    @media screen and (max-width: 1050px) {
        .container {
            width: 100%;
            margin: 0 auto;
            padding: 10px;
            position: relative;
            min-height: 100vh; /* Ensure the container takes at least the full height of the viewport */
            display: flex;
            flex-direction: column;
        }

        .ve_logo {
width: 180px;
max-width: 180px;
height: 65px;
max-height: 65px !important;
border-radius: 15px;
margin: 0;
padding: 0;
display: block;
vertical-align: middle;
object-fit: contain; /* Optional: ensures image scales nicely */
        }


        .hoofdmenu {
            width: 100% !important;
            height: 65px !important; /* Adjust height to 65px */
            max-height: 65px !important; /* Ensure max height is 65px */
            border: 1px solid black;
            border-radius: 10px;
            top: 0 !important;
            display: flex;
            align-items: center; /* Center items vertically */
            justify-content: center; /* Center items horizontally */
            background-color: white;
            margin-top: 0;
            margin-bottom: 0;
            padding: 0; /* Remove padding */
        }

        .navbar-toggler {
            background-color: white;
            z-index: 1001; /* Ensure the toggler stays on top */
            height: 50px; /* Adjust height to center within logo */
            width: 50px; /* Adjust width if needed */
            max-height: 65px; /* Ensure max height is 65px */
            margin-top: 0;
            margin-bottom: 0;
            margin-right: 10px;
            position: relative;
            padding: 0;
            float: left;
        }

        .navbar-toggler-icon {
            position: relative;
            left: 0;
            float: left;
        }

        .nav-link {
            padding: 5px;
            font-size: 22px;
            color: black;
            position: relative;
        }

        .nav-item {
            background-color: white;
            top: 55px;
            position: relative;
        }

        .btn-group {
            background-color: white;
            top: 55px;
            position: relative;
        }

        .submenu {
            display: none;
        }

        .main_content {
            width: 100% !important;
            border: 1px solid black;
            border-radius: 10px;
            position: relative;
            top: 10px !important;
            height: calc(100% - 220px) !important;
            margin-bottom: 11px !important;
        }

        .divContainer {
            width: 100%;
            margin: 0 auto; /* Center the container */
            position: relative; /* Ensure it has a positioning context */
        }

        .divFooter {
            flex-direction: column; /* Stack items vertically */
            height: 60px; /* Ensure height remains 60px */
            overflow-y: auto; /* Allow vertical scrolling if content overflows */
        }

        .bottom-links, .bottom-middel, .bottom-rechts {
            width: 100%; /* Ensure each div takes full width */
            justify-content: center; /* Center content horizontally */
            padding: 5px; /* Adjust padding to fit within 60px height */
        }

        .VE_Menu_Icon {
            margin-left: 0px;
            top: 4px;
            width: 25px;
            height: 25px;
        }

        .btn_toggler {
            width: 50px; /* Adjust width to match navbar-toggler */
            height: 50px; /* Adjust height to match navbar-toggler */
        }

        /* New styles for the toggler menu */
        .navbar-collapse {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            background-color: white;
            z-index: 1000;
            display: none; /* Initially hide the menu */
        }
    }

    @media screen and (max-width: 770px) {
        .hoofdmenu {
            width: 100% !important;
            height: 65px !important; /* Adjust height to 65px */
            max-height: 65px !important; /* Ensure max height is 65px */
            border: 1px solid black;
            border-radius: 10px;
            top: 0 !important;
            display: flex;
            align-items: center; /* Center items vertically */
            justify-content: space-between; /* Space items horizontally */
            background-color: white;
            margin-top: 0;
            margin-bottom: 0;
            padding: 0; /* Remove padding */
        }

        .submenu {
            display: none;
        }

        .navbar-toggler {
            background-color: white;
            z-index: 1001; /* Ensure the toggler stays on top */
            height: 50px; /* Adjust height to center within logo */
            width: 50px; /* Adjust width if needed */
            max-height: 65px; /* Ensure max height is 65px */
            margin-top: 0;
            margin-bottom: 0;
            margin-right: 10px;
            position: relative;
            padding: 0;
            right: 10px;
        }

        .main_content {
            width: 100% !important;
            border: 1px solid black;
            border-radius: 10px;
            top: 11px !important;
            height: calc(100% - 220px) !important;
            margin-bottom: 65px !important;
        }

        /* New styles for the toggler menu */
        .navbar-collapse {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            background-color: white;
            z-index: 1000;
            display: none; /* Initially hide the menu */
        }

        .divContainer {
            width: 100%;
            margin: 0 auto; /* Center the container */
            position: relative; /* Ensure it has a positioning context */
        }

        .divFooter {
            flex-direction: column; /* Stack items vertically */
            height: 60px; /* Ensure height remains 60px */
            overflow-y: auto; /* Allow vertical scrolling if content overflows */
            position: fixed;
            width: calc(100% - 20px) !important; /* Ensure width is 100% minus padding */
            left: 50%; /* Center horizontally */
            transform: translateX(-50%); /* Center horizontally */
            margin: 0 auto;
        }

        .bottom-links, .bottom-middel, .bottom-rechts {
            width: 100%; /* Ensure each div takes full width */
            justify-content: center; /* Center content horizontally */
            padding: 5px; /* Adjust padding to fit within 60px height */
        }
    }