.bodyStyle {
  height: 100%;
  margin: 0;
  font-size: 14px;
  font-family: Arial, "Arial CE", "Lucida Grande CE", lucida, "Helvetica CE", sans-serif;
}

* {
  scrollbar-width: auto;          /* "auto" or "thin"  */
  scrollbar-color: #b3d1df whitesmoke ;   /* scroll thumb & track */
}


*::-webkit-scrollbar {
  width: 12px;               /* width of the entire scrollbar */
}
*::-webkit-scrollbar-track {
  background: whitesmoke;        /* color of the tracking area */
}
*::-webkit-scrollbar-thumb {
  background-color: #b3d1df;    /* color of the scroll thumb */
  border-radius: 20px;       /* roundness of the scroll thumb */
}


a{
  color: #0c2a44;
}

a:hover{
  color:#b3d1df;
  -webkit-transition: color 0.5s ease;
  -moz-transition: color 0.5s ease;
  -o-transition: color 0.5s ease;
  transition: color 0.5s ease;
  font-weight:bolder;
}

/* Pagina indeling zonder menu en header */


.full-container{
  position: absolute;
  display: grid;
  grid-template-columns: 200px minmax(200px,auto) 200px;
  grid-template-rows: 80px 1fr;
  grid-template-areas: 
    "full-header-left full-header-center full-header-right"
    "full-main full-main full-main";
  width: 100%;
}

.full-header-left{
  grid-area: full-header-left;
  background-image: url(../resources/img/farmresult-logo.jpg);
  background-repeat: no-repeat;    
  background-size:contain;
} 

@media (max-width: 768px){
  .full-container{
    grid-template-columns: minmax(60px,auto) minmax(200px,auto) minmax(60px,auto);
  }
  .full-header-left{
    background-size: 50px;
  }  
}

.full-header-center{
  margin-top: 20px;
  grid-area: full-header-center;
} 

.full-header-right{
  grid-area: full-header-right;
  margin-top: 5px;
  margin-right: 5px;

}

.full-main{
  margin: 0 auto;
  grid-area: full-main;
  width: 50%;
  margin-bottom: 30px;
}

/* einde paginaindeling */



/*Pagina indeling in een header menu aan linker kant, naast de main area en een footer */

@media (min-width: 769px){
  .header-left {
    grid-area: header-left;    
    margin-top: 5px;
    margin-left: 15px;
    background-position:top left;
    background-image: url(../resources/img/farmresult-logo.jpg);
    background-repeat: no-repeat;    
    background-size:contain;
  }
  .header-hamburger-button{
    display: none;
  }
}

@media (max-width: 768px){
  .header-left {
    grid-area: header-left;
  }
  .header-hamburger-button{
    display: block;
  }
}

.header-hamburger-button{
  margin: 8px;
}



.header-center {
  grid-area: header-center;
  margin: 10px;
}

@media (max-width: 768px){
  .menu {  
    display: none;
    position: absolute;
    top: 60px;
    left: 0;
    width: 250px;
    z-index: 1000;
    border: #a8a8a8;
    border-width: 1px;
    border-style: solid;
  }
}  

@media (min-width: 769px){
  .menu {
    display: block!important;
  }
}  

.menu {
  grid-area: menu;
  background-color: whitesmoke;
}

.main {
  grid-area: main;
  padding-left:  10px;
  padding-right: 10px;
  overflow-y: auto;
}

.footer {
  grid-area: footer;
  margin: 15px;
}

.container {
  position: absolute;
  display: grid;
  grid-template-columns: 250px auto 150px;
  grid-template-rows: 70px  /*hoogte header */
    1fr              /*hoogte middenstuk */
    40px;           /*hoogte footer */
  grid-template-areas: 
    "header-left header-center header-right"
    "menu main main"
    "footer footer footer";
  width: 100%;
  height: 100%;
}

@media (max-width: 768px){
  .container {
    position: absolute;
    display: grid;
    grid-template-columns: 50px auto 150px;
    grid-template-rows: 70px  /*hoogte header */
      1fr              /*hoogte middenstuk */
      40px;           /*hoogte footer */
    grid-template-areas: 
      "header-left header-center header-right"
      "main main main"
      "footer footer footer";
    width: 100%;
  }
  .footer {
    margin: 5px;
  }  
}

.header-right{
  border-right: 15px solid #fdb813;
  margin-top: 15px;
  margin-bottom: 5px;
}  

/* Einde pagina indeling */

.menu .ui-menu {
  width: 95%;
  background:transparent;
  border: none;
}  

/* Kop boven menuitems*/
.menu-item-header.ui-state-disabled {
  font-size:150%;
  font-weight: bolder;
  opacity: 1;
}  

/* Menu item */
.menu .ui-menu .ui-menuitem-link {
  color:#2b3a40;
  line-height: 25px;
  border-top:0;
  border-left:6px solid transparent;
  border-right:0;
  padding-left: 10px;
  border-radius:0;
}

/* Geselecteerd menu item */
.menu .ui-menu .ui-menuitem-link.menu-item-select {
  border-left: 6px solid #fdb813;
  background: #b3d1df; 
}

.ui-breadcrumb{
  background: none;
  border: none;
}


/* Toestand bij hover en focus */
.ui-progressbar .ui-widget-header,
.ui-menuitem.ui-state-hover,
.ui-tabs-nav.ui-widget-header .ui-state-default.ui-state-hover,
.ui-button.ui-state-default.ui-state-hover,
.ui-button.ui-state-focus,
.ui-widget .ui-selectonemenu .ui-state-default,
.ui-selectonemenu.ui-state-default.ui-state-focus,
.ui-selectonemenu.ui-state-default.ui-state-hover,
.ui-tabmenu a:hover,
.ui-state-active,
.ui-chkbox-box.ui-state-default.ui-state-active,
.ui-chkbox-box.ui-state-default.ui-state-hover,
.ui-radiobutton-box.ui-state-default.ui-state-active,
.ui-radiobutton-box.ui-state-default.ui-state-hover,
.ui-menuitem .ui-menuitem-link.ui-state-hover,
.ui-widget-content .ui-paginator-page.ui-state-active,
.ui-paginator .ui-paginator-page.ui-state-active,
.ui-paginator .ui-paginator-page.ui-state-hover,
.ui-tabmenu-nav .ui-tabmenuitem.ui-state-hover,
.ui-datatable.ui-widget thead th,
.ui-datatable.ui-widget tfoot td {
  background:#b3d1df;
  color:white;
  font-weight:bolder;
  text-shadow:none;
  box-shadow:none;
  -webkit-transition: color 0.5s ease;
  -moz-transition: color 0.5s ease;
  -o-transition: color 0.5s ease;
  transition: color 0.5s ease;
  outline: none;
}

.ui-selectonemenu-item.ui-selectonemenu-list-item.ui-state-highlight,
.ui-selectonemenu-item.ui-selectonemenu-list-item.ui-state-hover{
  background-color: #b3d1df;
}  

.ui-button.ui-state-default,
.ui-paginator .ui-paginator-page,
.ui-paginator .ui-state-default,
.ui-chkbox-box.ui-state-default,
.ui-radiobutton-box.ui-state-default,
.ui-dialog-titlebar.ui-widget-header,
.ui-fileupload-buttonbar.ui-widget-header,
.ui-tabs-nav.ui-widget-header,
.ui-menu.ui-menu-dynamic,
.ui-tabs-nav.ui-widget-header .ui-state-default,
.ui-messages-info
{
  background:whitesmoke;
}

.ui-datatable-odd{
  background: white;
}

.ui-tabmenu.ui-widget{
  border:none
}

.ui-tabmenu .ui-widget-header{
  background-color:white;
}

.ui-tabmenu-nav .ui-tabmenuitem.ui-state-default{
  background-color: whitesmoke;
}  

.ui-tabmenu-nav .ui-tabmenuitem.ui-state-active{
  background:#b3d1df;
} 


.ui-button.ui-corner-all,
.ui-tabmenu.ui-corner-all{
  border-radius: 0px;
  -moz-border-radius: 0px;
  -webkit-border-radius: 0px;
}

.ui-datatable .ui-widget-header,
.ui-tabs-nav.ui-widget-header .ui-state-default.ui-state-active{
  background-color: white;
}

/* Table header facet voor buttons linkt en rechts */
.table-header-left-right{
  display: flex;
  justify-content: space-between;
}  


.ui-widget-header .ui-inputfield,
.ui-widget-header .ui-inputfield.ui-state-focus,
.ui-widget-content .ui-inputfield,
.ui-widget-content .ui-inputfield.ui-state-focus{
  -webkit-box-shadow:none;
  box-shadow: none;
}

.ui-panel,.ui-tabs {
  padding: 0px;
  -moz-border-radius: 0;
  -webkit-border-radius: 0;
  border-radius: 0;
}

.ui-panel .ui-panel-titlebar{
  border: none;
  border-bottom: solid;
  border-bottom-width: medium;
  border-bottom-width: 1px;
  background-color: whitesmoke;
  -moz-border-radius: 0;
  -webkit-border-radius: 0;
  border-radius: 0;

}

.highlightRemove{
  background-color:#85b2cb;
  color:white;  
}

.horizontalButtons{
  text-align: right;
  margin-top:10px;
}

.header-selectedLoc {
  font-size: 20px;
  color:#003680;
  font-weight: bold;
  text-align: left;
}

/* Geen randen om een image  */
img
{  border-style: none;
}

#ui-datepicker-div{
  z-index: 1000;
}

.gridPrompt{
  margin-left: 10px;
  margin-right: 5px;
}

.hgridColumns{
  border-style: none!important;
}

.warningIndicator{
  background-color: lightcoral;
  font-weight: bold;
}



/* Fout in Aristo theme waardoor tab inhoud onder elkaar wordt geplaatst
.ui-helper-hidden {
  display: none!important;
}

 */