@media (hover: hover) {

    .MuiPaper-root .lookup-popup-button {
        visibility: hidden;
    }

    .MuiPaper-root:hover .lookup-popup-button {
        visibility: visible;
    }

    .MuiPaper-root .edit-mode .lookup-popup-button {
        visibility: visible;
    }

}

html p {
    color: black !important;
}


/* Hide the original title */
.login__group--title {
  display: none;
}

/* Display an alternative title */
.login__group--header::after {
  content: 'RI&E Manager';
  font-weight: 500;
  font-size: 1.3125rem;
  font-family: Roboto, Helvetica, Arial, sans-serif;
  color: #1f3765 !important;
  padding-bottom: 9px;
}

.card__login {
    background-color: rgba(255, 255, 255, 0.9) !important;
    color: white !important;
} 

/* Change color of login button */
.card__login .MuiButton-containedPrimary {
    background-color: #009e44;
    color: #ffffff;
}



/* Input textfield background color read-only & editable. This is used when using a form*/
/*[data-active-application="arboned_klant"] .edit-mode .MuiFormControl-root input:not([disabled]),
                                             .edit-mode .MuiFormControl-root textarea:not([disabled]),
                                             .edit-mode .MuiFormControl-root select:not([disabled]) {
    background-color: white !important;
    
}


[data-active-application="arboned_klant"] .edit-mode .MuiFormControl-root input:disabled,
                                             .edit-mode .MuiFormControl-root textarea:disabled,
                                             .edit-mode .MuiFormControl-root select:disabled {
    background-color: #dedede !important;
   
}
*/

/* Set minimum width left and right of vertical splitter */
html[data-active-application="arbo"] [data-type="SplitPane"][data-split="vertical"].screenComponent.Splitter > div:first-child:not(.ToolBar),
html[data-active-application="arbo"] [data-type="SplitPane"][data-split="vertical"].screenComponent.Splitter > div:nth-child(3):not(.ToolBar) {
    min-width: 10% !important;
}
/* Set minimum height top and bottom of horizontal splitter */
html[data-active-application="arbo"] [data-type="SplitPane"][data-split="horizontal"].screenComponent.Splitter > div:nth-child(1):not(.ToolBar),
html[data-active-application="arbo"] [data-type="SplitPane"][data-split="horizontal"].screenComponent.Splitter > div:nth-child(3):not(.ToolBar) {
   /* min-height: 10% !important; /*Uitgecommend omdat de toolbar te hoog werd*/
}

html[data-active-application="hcc"] [data-type="SplitPane"][data-split="vertical"].screenComponent.Splitter > div:first-child:not(.ToolBar),
html[data-active-application="hcc"] [data-type="SplitPane"][data-split="vertical"].screenComponent.Splitter > div:nth-child(3):not(.ToolBar) {
    min-width: 10% !important;
}
/* Set minimum height top and bottom of horizontal splitter */
html[data-active-application="hcc"] [data-type="SplitPane"][data-split="horizontal"].screenComponent.Splitter > div:nth-child(1):not(.ToolBar),
html[data-active-application="hcc"] [data-type="SplitPane"][data-split="horizontal"].screenComponent.Splitter > div:nth-child(3):not(.ToolBar) {
   /* min-height: 10% !important; /*Uitgecommend omdat de toolbar te hoog werd*/
}

html[data-active-application="mensely"] [data-type="SplitPane"][data-split="vertical"].screenComponent.Splitter > div:first-child:not(.ToolBar),
html[data-active-application="mensely"] [data-type="SplitPane"][data-split="vertical"].screenComponent.Splitter > div:nth-child(3):not(.ToolBar) {
    min-width: 10% !important;
}
/* Set minimum height top and bottom of horizontal splitter */
html[data-active-application="mensely"] [data-type="SplitPane"][data-split="horizontal"].screenComponent.Splitter > div:nth-child(1):not(.ToolBar),
html[data-active-application="mensely"] [data-type="SplitPane"][data-split="horizontal"].screenComponent.Splitter > div:nth-child(3):not(.ToolBar) {
   /* min-height: 10% !important; /*Uitgecommend omdat de toolbar te hoog werd*/
}


/* changes the background color of the control type icon in a form field such as a telephone or email control type*/
/*[data-active-application="arboned_klant"] .edit-mode .MuiInputBase-root.MuiFilledInput-root.text-control.MuiFilledInput-underline.MuiInputBase-colorPrimary.MuiInputBase-formControl.MuiInputBase-sizeSmall.MuiInputBase-adornedEnd {
    background-color: white !important;
}
*/

/*FORM INPUT FIELDS BACKGROUND COLOR EDIT MODE*/
/*controltype input fields*/
[data-active-application="arbo"] .edit-mode .MuiInputBase-root.MuiFilledInput-root.text-control.MuiFilledInput-underline.MuiInputBase-colorPrimary.MuiInputBase-formControl.MuiInputBase-sizeSmall.MuiInputBase-adornedEnd input:not(.Mui-disabled) :not(disabled) {
    background-color: rgb(255,255,255,0.0) !important;
}
/*drop down field*/
[data-active-application="arbo"] .edit-mode .MuiInputBase-root.MuiFilledInput-root.MuiFilledInput-underline.MuiInputBase-colorPrimary.MuiInputBase-formControl.MuiInputBase-sizeSmall.lookup.domain-control.filled-control.edit-mode,
.MuiInputBase-root.MuiFilledInput-root.MuiFilledInput-underline.MuiInputBase-colorPrimary.MuiInputBase-formControl.MuiInputBase-sizeSmall.lookup.domain-control.filled-control.edit-mode input:not(.Mui-disabled) {
    background-color: rgb(255,255,255,0.0) !important;
}
/*control type icon such as a telephone or email control type*/
[data-active-application="arbo"] .MuiInputBase-root.MuiFilledInput-root.MuiFilledInput-underline.MuiInputBase-colorPrimary.MuiInputBase-formControl.MuiInputBase-sizeSmall.MuiInputBase-adornedEnd.date-time-input:not(.Mui-disabled) {
    background-color: rgb(255,255,255,0.0) !important;
}
[data-active-application="arbo"] .edit-mode .MuiInputBase-root.MuiFilledInput-root.text-control.MuiFilledInput-underline.MuiInputBase-colorPrimary.MuiInputBase-formControl.MuiInputBase-sizeSmall.MuiInputBase-multiline:not(.Mui-disabled) {
    background-color: rgb(255,255,255,0.0) !important;
}
[data-active-application="arbo"] .edit-mode .MuiFormControl-root.filled-control.image-control.edit-mode.filled-style:not(.Mui-disabled) {
    background-color: rgb(255,255,255,0.0) !important;
}
/*text field*/
[data-active-application="arbo"] .edit-mode .MuiInputBase-root.MuiFilledInput-root.text-control.MuiFilledInput-underline.MuiInputBase-colorPrimary.MuiInputBase-formControl.MuiInputBase-sizeSmall:not(.Mui-disabled) {
    background-color: rgb(255,255,255,0.0) !important;
}
[data-active-application="arbo"] .edit-mode .MuiInputBase-root.MuiFilledInput-root.MuiFilledInput-underline.MuiInputBase-colorPrimary.MuiInputBase-formControl.MuiInputBase-sizeSmall:not(.Mui-disabled){
    background-color: rgb(255,255,255,0.0) !important;
}
/*multiline*/
[data-active-application="arbo"] [data-form="control"][data-edit-mode="true"] .edit-mode:not(.Mui-disabled) {
  background-color: rgb(255,255,255,0.0) !important;
}

[data-active-application="arbo"] .MuiFormControl-root.full-height.html.filled-control.filled-style.edit-mode {
 background-color: #fff !important;
}

/*HCC*/
[data-active-application="hcc"] .edit-mode .MuiInputBase-root.MuiFilledInput-root.text-control.MuiFilledInput-underline.MuiInputBase-colorPrimary.MuiInputBase-formControl.MuiInputBase-sizeSmall.MuiInputBase-adornedEnd input:not(.Mui-disabled) :not(disabled) {
    background-color: rgb(255,255,255,0.0) !important;
}
/*drop down field*/
[data-active-application="hcc"] .edit-mode .MuiInputBase-root.MuiFilledInput-root.MuiFilledInput-underline.MuiInputBase-colorPrimary.MuiInputBase-formControl.MuiInputBase-sizeSmall.lookup.domain-control.filled-control.edit-mode,
.MuiInputBase-root.MuiFilledInput-root.MuiFilledInput-underline.MuiInputBase-colorPrimary.MuiInputBase-formControl.MuiInputBase-sizeSmall.lookup.domain-control.filled-control.edit-mode input:not(.Mui-disabled) {
    background-color: rgb(255,255,255,0.0) !important;
}
/*control type icon such as a telephone or email control type*/
[data-active-application="hcc"] .MuiInputBase-root.MuiFilledInput-root.MuiFilledInput-underline.MuiInputBase-colorPrimary.MuiInputBase-formControl.MuiInputBase-sizeSmall.MuiInputBase-adornedEnd.date-time-input:not(.Mui-disabled) {
    background-color: rgb(255,255,255,0.0) !important;
}
[data-active-application="hcc"] .edit-mode .MuiInputBase-root.MuiFilledInput-root.text-control.MuiFilledInput-underline.MuiInputBase-colorPrimary.MuiInputBase-formControl.MuiInputBase-sizeSmall.MuiInputBase-multiline:not(.Mui-disabled) {
    background-color: rgb(255,255,255,0.0) !important;
}
[data-active-application="hcc"] .edit-mode .MuiFormControl-root.filled-control.image-control.edit-mode.filled-style:not(.Mui-disabled) {
    background-color: rgb(255,255,255,0.0) !important;
}
/*text field*/
[data-active-application="hcc"] .edit-mode .MuiInputBase-root.MuiFilledInput-root.text-control.MuiFilledInput-underline.MuiInputBase-colorPrimary.MuiInputBase-formControl.MuiInputBase-sizeSmall:not(.Mui-disabled) {
    background-color: rgb(255,255,255,0.0) !important;
}
[data-active-application="hcc"] .edit-mode .MuiInputBase-root.MuiFilledInput-root.MuiFilledInput-underline.MuiInputBase-colorPrimary.MuiInputBase-formControl.MuiInputBase-sizeSmall:not(.Mui-disabled){
    background-color: rgb(255,255,255,0.0) !important;
}
/*multiline*/
[data-active-application="hcc"] [data-form="control"][data-edit-mode="true"] .edit-mode:not(.Mui-disabled) {
  background-color: rgb(255,255,255,0.0) !important;
}

[data-active-application="hcc"] .MuiFormControl-root.full-height.html.filled-control.filled-style.edit-mode {
 background-color: #fff !important;
}

/*MENSELY*/
[data-active-application="mensely"] .edit-mode .MuiInputBase-root.MuiFilledInput-root.text-control.MuiFilledInput-underline.MuiInputBase-colorPrimary.MuiInputBase-formControl.MuiInputBase-sizeSmall.MuiInputBase-adornedEnd input:not(.Mui-disabled) :not(disabled) {
    background-color: rgb(255,255,255,0.0) !important;
}
/*drop down field*/
[data-active-application="mensely"] .edit-mode .MuiInputBase-root.MuiFilledInput-root.MuiFilledInput-underline.MuiInputBase-colorPrimary.MuiInputBase-formControl.MuiInputBase-sizeSmall.lookup.domain-control.filled-control.edit-mode,
.MuiInputBase-root.MuiFilledInput-root.MuiFilledInput-underline.MuiInputBase-colorPrimary.MuiInputBase-formControl.MuiInputBase-sizeSmall.lookup.domain-control.filled-control.edit-mode input:not(.Mui-disabled) {
    background-color: rgb(255,255,255,0.0) !important;
}
/*control type icon such as a telephone or email control type*/
[data-active-application="mensely"] .MuiInputBase-root.MuiFilledInput-root.MuiFilledInput-underline.MuiInputBase-colorPrimary.MuiInputBase-formControl.MuiInputBase-sizeSmall.MuiInputBase-adornedEnd.date-time-input:not(.Mui-disabled) {
    background-color: rgb(255,255,255,0.0) !important;
}
[data-active-application="mensely"] .edit-mode .MuiInputBase-root.MuiFilledInput-root.text-control.MuiFilledInput-underline.MuiInputBase-colorPrimary.MuiInputBase-formControl.MuiInputBase-sizeSmall.MuiInputBase-multiline:not(.Mui-disabled) {
    background-color: rgb(255,255,255,0.0) !important;
}
[data-active-application="mensely"] .edit-mode .MuiFormControl-root.filled-control.image-control.edit-mode.filled-style:not(.Mui-disabled) {
    background-color: rgb(255,255,255,0.0) !important;
}
/*text field*/
[data-active-application="mensely"] .edit-mode .MuiInputBase-root.MuiFilledInput-root.text-control.MuiFilledInput-underline.MuiInputBase-colorPrimary.MuiInputBase-formControl.MuiInputBase-sizeSmall:not(.Mui-disabled) {
    background-color: rgb(255,255,255,0.0) !important;
}
[data-active-application="mensely"] .edit-mode .MuiInputBase-root.MuiFilledInput-root.MuiFilledInput-underline.MuiInputBase-colorPrimary.MuiInputBase-formControl.MuiInputBase-sizeSmall:not(.Mui-disabled){
    background-color: rgb(255,255,255,0.0) !important;
}
/*multiline*/
[data-active-application="mensely"] [data-form="control"][data-edit-mode="true"] .edit-mode:not(.Mui-disabled) {
  background-color: rgb(255,255,255,0.0) !important;
}

[data-active-application="mensely"] .MuiFormControl-root.full-height.html.filled-control.filled-style.edit-mode {
 background-color: #fff !important;
}


/*CRUD ICON COLORS*/
/*ARBONED*/
[data-active-application="arbo"] [data-testid="crud-toolbar__add"] svg{
    fill: green !important;
}
[data-active-application="arbo"] [data-testid="crud-toolbar__edit"] svg{
    fill: #ff9000 !important; /*ArboNed orange*/
}
[data-active-application="arbo"] [data-testid="crud-toolbar__delete"] svg{
    fill: red !important;
}
[data-active-application="arbo"] [data-testid="crud-toolbar__save"] svg{
    fill: #34b6e4 !important; /*ArboNed blue*/
}
/*HUMAN CAPITAL CARE*/
[data-active-application="hcc"] [data-testid="crud-toolbar__add"] svg{
    fill: #b4d250 !important; /*HCC 'appelgroen'*/
}
[data-active-application="hcc"] [data-testid="crud-toolbar__delete"] svg{
    fill: red !important;
}
[data-active-application="hcc"] [data-testid="crud-toolbar__save"] svg{
    fill: #004587 !important; /*HCC blue*/
}
/*MENSELY*/
[data-active-application="mensely"] [data-testid="crud-toolbar__add"] svg{
    fill: #5CBAA9 !important; /*Specific Requested color*/
}
[data-active-application="mensely"] [data-testid="crud-toolbar__delete"] svg{
    fill: red !important;
}
[data-active-application="mensely"] [data-testid="crud-toolbar__save"] svg{
    fill: #468095 !important; /*Specific Requested color*/
}

/*
[data-active-application="arboned_klant"] [data-testid="crud-toolbar__copy"] svg{
    fill:ligtblue !important;
}
[data-active-application="arboned_klant"] [data-testid="crud-toolbar__refresh"] svg{
    fill:blue !important;
}
*/

/*Active prefilter*/
/*ARBONED*/
[data-active-application="arbo"] .prefilter-button[active="true"]::after {
  border-bottom-style: none; /*removes default*/
}
[data-active-application="arbo"] .prefilter-button[active="true"] svg {
  fill: white !important;
  position: relative;
  top: 40%;
  left: 50%;
  transform: translate(-50%, -50%);
}
[data-active-application="arbo"] .prefilter-button[active="true"] span>div>span {
  background-color:#22aee2;
  border-radius: 50%; /* Make the SVG circular */
  width: 24px;
  height: 24px;
}
/*HUMAN CAPITAL CARE*/
[data-active-application="hcc"] .prefilter-button[active="true"]::after {
  border-bottom-style: none; /*removes default*/
}
[data-active-application="hcc"] .prefilter-button[active="true"] svg {
  fill: white !important;
  position: relative;
  top: 40%;
  left: 50%;
  transform: translate(-50%, -50%);
}
[data-active-application="hcc"] .prefilter-button[active="true"] span>div>span {
  background-color:#008295;
  border-radius: 50%; /* Make the SVG circular */
  width: 24px;
  height: 24px;
}
/*MENSELY*/
[data-active-application="mensely"] .prefilter-button[active="true"]::after {
  border-bottom-style: none; /*removes default*/
}
[data-active-application="mensely"] .prefilter-button[active="true"] svg {
  fill: white !important;
  position: relative; /* Add this line */
  top: 40%;
  left: 50%;
  transform: translate(-50%, -50%);
}
[data-active-application="mensely"] .prefilter-button[active="true"] span>div>span {
  background-color:#4eb4a1;
  border-radius: 50%; /* Make the SVG circular */
  width: 24px;
  height: 24px;
}