body{
    font-family: 'Lato', sans-serif;
}
body, html {
    height: 100%;
  }
  
.bg {
/* The image used */
background-image: url("../food-agri.jpg");


/* Full height */
height: 100%;

/* Center and scale the image nicely */
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}

/*navbar*/
.navbar-brand{
    font-size: 1.4em;
}
.nav-link{
    font-size: 1.2em;
}
.navbar-nav{
    text-align: right;
}
.navbar-collapse{
    justify-content: right;
}

/*container*/
.container{
    height: 90%;
    scrollbar-width: none;
    overflow: auto;

}
.container::-webkit-scrollbar {
    display: none;
  }
.home .col-md{
    margin: auto;
    height: 20%;
    min-height: 63px;
}
.col{
    margin-top: 3%;
    margin-bottom: 3%;
}
p{
    margin: auto;
}
a{
    color: black;
}
a:hover{
    color: black;
    text-decoration: none;
}
.tile{
    background-color: whitesmoke;
    font-size: 1.5em;
    height: 80%;
    width: 80%;
    padding: 3%;
    margin: auto;
    text-align: center;
    border-radius: 3px;
    align-content: center;
    display: flex;
    box-shadow: 0px 0px 22px -1px rgba(0,0,0,0.65);
}
.tile:hover{
    box-shadow: 0px 0px 28px -2px rgba(0,0,0,0.75);
    cursor: pointer;
    width: 83%;
    height: 83%
}
.ui-widget-header{
    background: rgb(165, 222, 255);
    border: 1px solid #ffffff;
}
.ui-state-active a, .ui-state-active a:link, .ui-state-active a:visited{
    color: rgb(87, 87, 87)!important;
}
.ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active{
    border: rgb(211, 211, 211) solid 1px;
}
.ui-state-hover,
.ui-widget-content .ui-state-hover,
.ui-widget-header .ui-state-hover,
.ui-state-focus,
.ui-widget-content .ui-state-focus,
.ui-widget-header .ui-state-focus {
	border: 1px solid #bdbdbd;
	background: #c5e8fd url(images/ui-bg_glass_100_fdf5ce_1x400.png) 50% 50% repeat-x;
    font-weight: bold;
}
.ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active{
    background: #c5e8fd;
}
.ui-state-hover a,
.ui-state-hover a:hover,
.ui-state-hover a:link,
.ui-state-hover a:visited,
.ui-state-focus a,
.ui-state-focus a:hover,
.ui-state-focus a:link,
.ui-state-focus a:visited {
	color: #a0a0a0;
	text-decoration: none;
}
/*weekmenu*/
.ui-widget-header .ui-state-active{
    color: black;
}
.menuitem{
    padding: 10px;
    padding-bottom: 0;
}
.menuitem:hover{
    cursor: pointer;
}
.menuitem .date{
    color: rgb(66, 66, 66);
    font-size: 0.85em;
}
.menuitem hr{
    border-top: rgb(85, 85, 85) solid 1px;
    height: 10px;
    margin: 5px;
    margin-bottom: -10px;
}
#tabs ul li{
    width: 32%;
    text-align: center;
}
#tabs ul li a{
    float: unset;
    display: inline-block;
    height: 40px;
    margin: auto;
}
/*datum*/
h2{
    font-size: 1.4em;
    margin-bottom: 20px;
}
#datepickerP{
    text-align: center;
}
.ui-datepicker-inline, .ui-datepicker, .ui-widget, .ui-widget-content, .ui-helper-clearfix, .ui-corner-all{
    margin: auto;
}
#datemeal{
    text-align: center;
    margin-top: 10%;
    font-size: 1.3em;
}
/*dagmenu*/
#dagmenu{
    background-color: whitesmoke;
    padding: 10px;
    border-radius: 5px;
}
#dagmenu div{
    margin-top: 10px;
}
.ident{
    font-weight: 700;
}
.ingredient{
    background-color: rgb(223, 223, 223);
    padding: 5px;
    display: inline-block;
    margin-right: 10px;
    margin-bottom: 10px;
    border-radius: 3px;
}


/******************** opstellen.html ********************/
.opstellen .row{
    height: 100%;
}
.opstellen .col-3{
    height: 100%;
}
.opstellen .itembox{
    padding: 5px;
    margin-top: 10%;
    height: 90%;
    overflow: auto;
    background-color: whitesmoke;
    border-radius: 3px;
}
.opstellen .col-6{
    padding-bottom: 5%;
}
#datum{
    margin-top: 20px;
}
.nieuw-gerecht{
    background-color: whitesmoke!important;
}
form{
    margin-top: 30px;
    padding: 20px;
    border-radius: 5px;
    background-color: whitesmoke!important;
}
.btn-primary{
    margin: auto;
}
#submit{
    text-align: center;
}
.link{
    float: right;
    font-size: .9em;
}
.col-3 #dagmenu{
    margin-top: 20px;
}
.ui-menu{
    overflow: scroll;
    height: 500px;
}
/****************** gerechten.html *******************/
.gerechten .row{
    height: 100%;
}
.gerechten .col-sm-3{
    background-color: whitesmoke;
    margin-top: 3%;
    margin-bottom: 3%;
    height: 95%;
    border-radius: 5px;
}
.gerechten #categorie{
    width: 50%;
    float: right;
    height: 2em;
}
.gerechten label{
    float: left;
    margin-right: 10px;
}
#search{
    border: rgb(179, 179, 179) solid 1px;
    border-radius: 7px;
    margin-top: 10px;
    width: 100%;
    padding-left: 5px;
}
.gerechten .col-sm-3 h4{
    margin-top: 20px;
}
.gerechten .itembox{
    overflow: auto;
    height: 75%;
}
.huidig-gerecht{
    background-color: whitesmoke;
    padding: 15px;
    margin-top: 30px;
    border-radius: 5px;
}
.ingredienten input{
    width: 20%;
    float: right;
}
.gerechten .ingredienten .ident{
    margin-bottom: 25px;
    margin-top: 10px;
}
.ingr{
    width: 100px;
}
.zoek-ingr{
    width: 45%;
    float: left;
    margin-right: 10px;
}
.ingr-box{
    margin-top: 1rem;
}
#snek{
    width: 50%;
}
#hoeveelheid{
    width: 30%;
    float: left;
    margin-right: 10px;
}
.hvl{
    margin-top: 10px;
}
#boek{
    width: 70%;
}
#pagina{
    width: 20%;
}
.form-group .boek{
    float: left;
}
#duur{
    width: 50%;
}
.alert{
    margin-top: 10px;
}
#eenheid{
    width: 15%;
}
.nieuw-ingrbox .ingredient svg:hover{
    cursor: pointer;
}
.verwijderen{
    margin-top: 10px;
    margin-right: 5px;
    text-align: right;
}
.toevoegen form{
    background-color: whitesmoke;
}

@media screen and (max-width: 1200px){
    .home .col-md{
        height: -moz-fit-content
    }
}

@media screen and (max-width: 576px){
    .col-sm-3{
        height: 80%;
    }
}