/* Style the navbar */

/* wordt opgeroepen door stick_func in configuration.js */

/* navbar for all pages */

/* enkel de navbar die wordt getoond op normale schermen (geen smartphone) */
.default_navbar {
    display: block;
}

.default_navbar .navbar_account_dropdown {
    display: none;
}

.default_navbar .navbar_menu_dropdown {
    display: block;
    position: relative;
}


/*.default_navbar .navbar_menu_dropdown button {
    position: relative;
    float: right;
    width: auto;
}*/

/* back button moet links staan */
#back_button_navbar {
    float: left;
}

/* button handling on configuration page bars */
.conf_button_img {
    display: none;
    height: 20px;
}



/* The Modal (background) */
.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 50; /* Sit on top */
    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/Box */
.modal-content {
    background-color: #fefefe;
    margin: 15% auto; /* 15% from the top and centered */
    padding: 20px;
    border: 1px solid #888;
    width: 50%; /* Could be more or less, depending on screen size */
    min-width: 300px;
}

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

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

/* configuration page */
.bar  {
    position: relative;
    width: 100%;
    height: 30px;
    padding: 0px;
    color: white;
    display: inline-block;
    margin-top: 5px;
    background-color: #1FABD5;
    border-color: #1D8DB0;
    border-width: 2px;
    z-index: 0;
}
/* same setting but for reservation */
.table .bar a {
    position: absolute;
    left: 0px;
    align-self: center;
    padding: 5px;
    margin: 0px;
    font-size: unset;
	font-type: bold;
}

.bar a {
    position: absolute;
    left: 0px;
    align-self: center;
    padding: 5px;
	margin: 2px 0px;
	font-weight: bold;
	font-size: 100%;
}

.configurationpage_bar_buttons {
    position: absolute;
    right: 0px;
    height: 30px;
    width: 60%;
    padding: 0px;
}
/* same setting but for reservation */
.table .bar button {
    position: relative;
    width: 40%;
    height: 24px;
    padding: 4px 13px;
    background-color: inherit;
    color: white;
    border-color: white;
    margin: 3px;
    margin-left: 5px;
    margin-bottom: 0px;
    float: right;
    min-width: 50px;
    max-width: 100px;
}

.bar button {
    position: relative;
    width: 40%;
    height: 24px;
    padding: 3px 13px;
    background-color: inherit;
    color: white;
    border-color: white;
    margin: 3px;
    margin-left: 5px;
    margin-bottom: 0px;
    float: right;
    min-width: 50px;
    max-width: 100px;
}
.bar button:hover {
    background-color: white;
    opacity: unset;
    color: black;
}

.bar .image_button {
    display: block;
    border: none;
    width: auto;
    height: auto;
    padding: 5px;
    margin-left: 5px;
    margin-top: 0px;
    -webkit-border-radius: 100%;
    -moz-border-radius: 100%;
    border-radius: 100%;
}

/* same setting but for reservation */
.table .bar .image_button {
    display: block;
    border: none;
    width: auto;
    height: auto;
    padding: 5px;
    margin-left: 5px;
    margin-top: 0px;
    -webkit-border-radius: 100%;
    -moz-border-radius: 100%;
    border-radius: 100%;
}

.bar .image_button:hover {
    background-color: transparent;
}

/* not used
.bar .menubar_button {

}

.bar .menubar_button a {
    padding: 0px;
}*/

.bar .bar_image {
    width: 20px;
    height: 20px;
}

/* knopjes laten zien of niet bij het openen van de pagina */
.bar #down_button_user {
    display: none;
}

.bar #down_button_lab {
    display: none;
}

.bar #down_button_cluster {
    display: none;
}

.bar #down_button_general {
    display: none;
}

.bar #down_button_profilecluster {
    display: none;
}

.bar #down_button_pendingUser {
    display: none;
}

/* event datails page */
.bar #down_button_date_time {
    display: none;
}


/* details later pas tonen, eerst ingeklapt */
.bar #up_button_item_details {
    display: none;
}
#content_item_details {
    display: none;
}

/* configuration page */
.bar #up_button_advanced {
    display: none;
}
#advanced_total_table {
    display: none;
	overflow: hidden;
}

/* profile page */
.bar #up_button_profilepassword {
    display: none;
}
#content_profilepassword {
    display: none;
}

.bar #up_button_profileemail {
    display: none;
}
#content_profileemail {
    display: none;
}

/* detailpage*/
.bar #up_button_documents {
    display: none;
}
#content_documents {
    display: none;
}

.bar #up_button_reservation {
    display: none;
}
#content_reservation {
    display: none;
}

/* add event page*/
.bar #up_button_rec {
    display: none;
}
#content_rec {
    display: none;
}




#float-left {
    float: left;
}

/* Add media queries for responsiveness - when the screen is 500px wide or less, stack the links on top of each other */
@media screen and (max-width: 600px) {

    .default_navbar {
        float: none;
        height: auto;
        padding-right: 0%;
        display: none;
        position: relative;
    }

    .default_navbar .navbar_menu_dropdown .dropdown .dropdown-content {
        display: none;
        position: relative;
        background-color: #52BDEC;
        width: 100%;
        box-shadow: 0px 0px 0px 0px rgba(0,0,0,0.2);
        top: 0px;
    }

    .default_navbar .navbar_menu_dropdown button {
        position: relative;
        float: none;
        width: 100%;
        text-align: center;
        align-self: center;
    }

    .default_navbar .navbar_menu_dropdown .dropdown {
        width: 100%;
    }

    /* als het scherm kleiner wordt, wordt 95% gebruikt en moeten de navigatie bar een andere marge krijgen tov de randen */
    .navbar {
        padding-left: 2.5%;
        padding-right: 2.5%;
    }


    /* modal button moet de volledige breedte spannen wanneer in smartphone mode zit */
    .modalbutton {
        width: 100%;
    }

    /* settings voor knoppen in mobile modus */
    .printbutton {
        display: none;
    }

    /* text on buttons dissapears when user is on mobile device */
    .text_button {
        border: unset;
        padding: 0px !important;
        top: 2px;
		width: 20px !important;
    }
    .tooltip {
        width: 100%;
    }

    .tooltip_icon {
        width: 20px;
    }

    .text_button:active {
        background-color: inherit;
    }

    .conf_button_text {
        display: none;
    }

    .conf_button_img {
        display: block;
		float: right;
    }

    .bar button:hover {
        background-color: inherit;
    }

}


@media screen and (max-width: 850px) {

    .navbar {
        padding-left: 5%;
        padding-right: 5%;
    }
}