/* Eerst de pagina componenten aanpassen waar nodig  */

:root {
  
  --farmResultLightBlue:#b3d1df;
  --farmResultYellow:#fdb813;
  --farmResultDarkBlue:#2a436d;  
  --farmResultBlue:#0076a3;  
  
  --farmResultLightGray:#f8f9fa;  
  --farmResultDarkGrey: #767676;
}

.bodyStyle {
  margin: auto;
  font-size: 14px;
  font-family: "TheSans",Verdana,Arial,sans-serif;
  color: var(--farmResultDarkBlue);
}


p {
  font-size: 16px;
}

@media (min-width: 769px){
  .full-header-left{
    background-image: url(/OpsData/javax.faces.resource/img/farmresult-logo.jpg.xhtml);
    background-repeat: no-repeat;
    background-position:10px 10px;
    background-size: 210px auto;
  }
}


.header-left {
  background-image: url(/OpsData/javax.faces.resource/img/farmresult-logo.jpg.xhtml);
  background-repeat: no-repeat;
  background-position:10px 10px;
  background-size: 210px auto;
}


.menu {
  grid-area: menu;
  background-color: var(--farmResultLightGray);
}




/* Used for title <h1> for the webapplication */
@media (min-width: 769px){
  .appTitle{
    color: var(--farmResultDarkBlue);
    font-size: 2rem;
    margin-top: 1.6rem;
    margin-left: 3rem;
  }
}

@media (max-width: 768px){
  .appTitle {
    color: var(--farmResultDarkBlue);
    font-size: 1.3rem;
    margin-top: 1.4rem;
    margin-left: 2.4rem;
  }
}


.header-selectedLoc {
  font-size:150%;;
  color:var(--farmResultDarkBlue);
  font-weight: bold;
  text-align: left;
}


/*Plaatsen menu in facet van table */
.table-menu{
  width: 100%;
  display: inline-block;
}

.table-menu-left{
  text-align:left;
  float: left;
  display: inline-block;
}

.table-menu-right{
  text-align:right;
  float: right;
  display: inline-block;
}






/* Styling en aanpassingen in Primefaces css */

/* aanpassen standaard lettertype voor primefaces componenten */

.rightMenuButtons .ui-commandlink.ui-widget{
  font-size: 0.7rem;
}

body .ui-widget {
  font-family: "TheSans",Verdana,Arial,sans-serif;
}

/* Maak het Primefaces menu component even groot als de linker kolom en zorgt voor dezelfde kleur */
body .ui-menu {
  width: 100%;
  background:transparent;
  border: none;
  /* padding:0; */
}

/* Kop boven menuitems heeft een custom class */
.ui-menuitem-link.ui-corner-all.menu-item-header{
  font-size:120%;
  font-weight: bold;
  color: var(--farmResultDarkBlue);
  opacity: 1;
}

body .ui-menu .ui-menu-list .ui-menuitem .ui-menuitem-link {
  color:var(--farmResultDarkBlue);
  line-height: 25px;
  border-top:0;
  border-left:6px solid transparent;
  border-right:0;
  padding-left: 10px;
  border-radius:0;
}

/* Menu item hover */
body .ui-menu .ui-menu-list .ui-menuitem .ui-menuitem-link.ui-state-hover,
body .ui-menu .ui-menu-list .ui-menuitem .ui-menuitem-link.ui-state-hover .ui-icon ,
body .ui-menu .ui-menu-list .ui-menuitem .ui-menuitem-link.ui-state-hover .ui-menuitem-text{
  background:var(--farmResultYellow);
  color: white;
  -webkit-transition: color 0.5s ease;
  -moz-transition: color 0.5s ease;
  -o-transition: color 0.5s ease;
  transition: color 0.5s ease;
}

/* Geselecteerd menu item */
body .ui-menu .ui-menuitem-link.ui-corner-all.menu-item-select{
  border-left: 6px solid var(--farmResultYellow);
}

/* Betere positonering van het pijltje bij de menuoptie back */
.ui-menuitem-icon .ui-icon pi .pi-arrow-left{
  margin-top: 5px;
  margin-right:5px;
  padding-left: 0px;
}


body .ui-breadcrumb{
  background: none;
  border: none;
  font-size: 13px;
  padding: 1px;
}

body .ui-breadcrumb .ui-breadcrumb-items li:last-child .ui-menuitem-link .ui-menuitem-text {
  color:var(--farmResultYellow);
}

body .ui-breadcrumb .ui-breadcrumb-items li .ui-menuitem-link .ui-menuitem-text:hover{
  color:var(--farmResultYellow);
}


body .ui-button{
  border:0;
  background:var(--farmResultDarkGrey);
}

body .ui-button.ui-state-focus,
.ui-widget.ui-button.ui-state-hover,
.ui-paginator-pages .ui-paginator-page.ui-state-default.ui-corner-all.ui-state-active{
  background:var(--farmResultYellow);
  color:white;
  text-shadow:none;
  box-shadow:none;
  border: 0;
  -webkit-transition: color 0.5s ease;
  -moz-transition: color 0.5s ease;
  -o-transition: color 0.5s ease;
  transition: color 0.5s ease;
}

body .ui-selectonemenu.ui-state-hover:not(.ui-state-error),
body .ui-selectonemenu.ui-state-focus:not(.ui-state-error),
body .ui-inputfield.ui-state-focus,
body .ui-inputfield.ui-state-hover,
body .ui-chkbox .ui-chkbox-box.ui-state-hover,
body .ui-chkbox .ui-chkbox-box.ui-state-focus,
body .ui-inputswitch .ui-inputswitch-checked .ui-inputswitch-handle.ui-state-focus,
body .ui-inputswitch .ui-inputswitch-checked .ui-inputswitch-handle.ui-state-hover,
body .ui-inputswitch .ui-inputswitch-handle.ui-state-focus,
body .ui-inputswitch .ui-inputswitch-handle.ui-state-default.ui-state-focus,
body .ui-inputswitch .ui-inputswitch-handle.ui-state-default.ui-state-hover,
body .ui-inputswitch-handle.ui-state-hover,
body .ui-chkbox .ui-chkbox-box.ui-state-active.ui-state-hover,
body .ui-widget.ui-selectonemenu.ui-state-hover {
  border-color: var(--farmResultLightBlue);
  box-shadow: none;
}

body .ui-chkbox .ui-chkbox-box.ui-state-active,
body .ui-inputswitch.ui-inputswitch-checked .ui-inputswitch-handle{
  border-color: var(--farmResultDarkGrey);
  background: var(--farmResultDarkGrey);
}

body .ui-chkbox .ui-chkbox-box.ui-state-active.ui-state-hover,
body .ui-inputswitch.ui-inputswitch-checked
{
  background: var(--farmResultDarkGrey);
}


.ui-datatable.ui-widget thead th{
  background:var(--farmResultBlue);
  color:white;
  font-weight:bolder;
  text-shadow:none;
  box-shadow:none;
  border: 0;
}

/* Minder ruimte tussen rijen in tabel */
body .ui-datatable .ui-datatable-data >tr >td, body .ui-datatable .ui-paginator,body .ui-datatable .ui-datatable-header{
  padding: 4px ;
}

/* Andere kleur indien rij in de tabel geselecteerd wordt voor delete*/
.ui-datatable-data.ui-widget-content .highlightRemove{
  background:darkred;
  color:white;
  padding:2px;
}



/* Foutmelding iets kleiner maken anders komt er een schuifbalk */
.ui-messages.ui-widget{
  width: 99%;
}

body .ui-messages .ui-messages-error, body .ui-messages .ui-messages-fatal {
  background: var(--farmResultDarkBlue);
  border: 1px solid var(--farmResultYellow);
  border-width: 0 0 0 6px;
  color: var(--farmResultYellow);
}




body .ui-commandlink,
body .ui-link {
  color:var(--farmResultDarkGrey);
}


body .ui-commandlink:hover{
  color:var(--farmResultYellow);
  -webkit-transition: color 0.5s ease;
  -moz-transition: color 0.5s ease;
  -o-transition: color 0.5s ease;
  transition: color 0.5s ease;
}

/* voorkom streepje onder de iconen voor userinfo en uitloggen */
body .header-right .ui-commandlink:hover{
  text-decoration: none;
}


body .ui-panel {
  padding: 0;
}

body .ui-panel .ui-panel-titlebar{
  border: 1px solid var(--farmResultLightGray);
  background-color: var(--farmResultLightGray);
}



/* Primeface Tabmenu styling */

/* Standaard tabs in licht grijs met 4px witruimte aan rechterkant */
body .ui-tabmenu .ui-tabmenu-nav .ui-tabmenuitem {
  background-color:var(--farmResultLightGray);
  border-bottom:  4px solid var(--farmResultLightGray);
  margin-right:  4px;
}

body .ui-tabmenu .ui-tabmenu-nav .ui-tabmenuitem.ui-state-default.ui-state-hover ,
body .ui-tabmenu .ui-tabmenu-nav .ui-tabmenuitem.ui-state-active:hover {
  background:var(--farmResultYellow);
  border-bottom:  4px solid var(--farmResultYellow);
  margin-right:  4px;

}

body .ui-tabmenu .ui-tabmenu-nav .ui-tabmenuitem.ui-state-default.ui-state-hover a ,
body .ui-tabmenu .ui-tabmenu-nav .ui-tabmenuitem.ui-state-active:hover a{
  color: white;
}

body .ui-tabmenu .ui-tabmenu-nav .ui-tabmenuitem.ui-state-active{
  background-color:var(--farmResultLightGray);
  border-bottom:  4px solid var(--farmResultYellow);
  margin-right:  4px;
}

body .ui-tabmenu .ui-tabmenu-nav .ui-tabmenuitem.ui-state-active a {
  color: var(--farmResultYellow);
}


/* Primefaces selectone   */
body .ui-selectonemenu-panel .ui-selectonemenu-items .ui-selectonemenu-item.ui-state-highlight{
  background: var(--farmResultDarkGrey);
  color: white;
}

body .ui-selectonemenu-panel .ui-selectonemenu-items .ui-selectonemenu-item.ui-state-hover,
body .ui-autocomplete-panel .ui-autocomplete-items .ui-autocomplete-item.ui-state-highlight{
  background:var(--farmResultYellow);
  color: white;
}


/* Primefaces datepicker   */

body .ui-datepicker .ui-datepicker-calendar td a.ui-state-active {
  background: var(--farmResultDarkGrey);
  color: white;
  border: 0 none;

}

/* iconen om tijd te verzetten zijn niet zichtbaar zonder deze */
.ui-datepicker .ui-icon {
  text-indent: inherit;
}

body .ui-growl .ui-growl-item-container.ui-growl-info {
  background: var(--farmResultDarkBlue);
  border: 1px solid var(--farmResultYellow);
  color: var(--farmResultYellow);
}

body .ui-growl .ui-growl-item-container.ui-growl-info .ui-growl-image{
  color: var(--farmResultDarkGrey);
}