:root {
   --base-font-size: 20px; 
	
   --bg-color: #ffffff;
   --text-color: #000000;

   --background-exp-body: #ffffff;
   --color-exp-body:  #000000;

   --background-color-exp-inptext: #DBDDF2;	
   --color-exp-inptext: blue; 

   --background-color-exp-fldselect: #DBDDF2;	
   --color-exp-fldselect: #24356D;
	
   --color-exp-jcr_info: #3ecfb9;
	
   --color-exp-capt1: #24356D;
   --color-exp-capt2: #24356D;
   --color-exp-capt3: #24356D;
   
   --color-exp-stdlab: #24356D;
   
	--background-exp-ahover: #24356D;
	--color-exp-ahover: #ffffff;
   
   --background-color-exp-limittxt: AntiqueWhite;   
   --color-exp-limittxt: #24356D;

   --background-color-exp-combtxt: unset;
   --color-exp-combtxt: #24356D;

   --background-color-exp-yearrange: unset;
   --color-exp-yearrange: #24356D;

   --background-color-exp-div_dispmode: unset;
   --color-exp-div_dispmode: #24356D;
   
   --background-color-exp-div_dispmode_table: unset;
   --color-exp-div_dispmode_table: #24356D;
   
   --background-color-exp-div_dispmode_select: #DBDDF2;
   --color-exp-div_dispmode_select: #24356D;
   
   --background-color-exp-txtaccesslimits: unset;
   --color-exp-txtaccesslimits: #24356D;

   --background-color-exp-grantlimits: unset;
   --color-exp-grantlimits: #24356D;

   --background-color-exp6-shrinkcond: unset;
   --color-exp6-shrinkcond: #24356D;
   
   --background-color-exp6-metaaccdiv: unset;
   --color-exp6-metaaccdiv: #24356D;
   
	--background-color-exp6-pktlimitsdiv: unset;
	--color-exp6-pktlimitsdiv: #24356D;
   
   --background-color-exp6-shrinkcond-h3: unset;
   --color-exp6-shrinkcond-h3: #24356D;

   --background-color-exp2-button2: white;
   --color-exp2-button2: #003399;
   
   --background-color-exp2-button3: white;
   --color-exp2-button3: #003399;
   
   --background-color-exp6-div-tabs_area: unset;
   --color-exp6-div-tabs_area: #000000;

	--background-color-exp6-shrinkcond-select: #DBDDF2;
	--color-exp6-shrinkcond-select: #24356D;

	--background-expwww-customTooltip: #ffffcc;

	--background-color-expwww-input: #f0f0f0;
	--color-expwww-input: #333333;

	--background-color-afil-body: #f0f0f0;
	--color-afil-body: #333333;
   
   --background-color-wcag-root: unset;
   --color-wcag-root-root: unset;

   --background-color-wcag-ui-state-active_a_link: unset;       
   --color-wcag-ui-state-active_a_link: unset;
    
   
}


.wcag-mode1 {
   
   --bg-color: #000000;
   --text-color: #ffffff;

   --background-exp-body: #000000;
   --color-exp-body:  #ffffff;

   --background-color-exp-inptext: #000000;
   --color-exp-inptext: #ffffff;

   --background-color-exp-fldselect: #000000;
   --color-exp-fldselect: #ffffff;
	
   --color-exp-jcr_info: #ffffff;
	
   --color-exp-capt1: #ffffff;
   --color-exp-capt2: #ffffff;
   --color-exp-capt3: #ffffff;
   
   --color-exp-stdlab: #ffffff;

	--background-exp-ahover: #ffffff;
	--color-exp-ahover: #000000;

   --background-color-exp-limittxt: #000000;
   --color-exp-limittxt: #ffffff;

   --background-color-exp-combtxt: #000000;   
   --color-exp-combtxt: #ffffff;

   --background-color-exp-yearrange: #000000;
   --color-exp-yearrange: #ffffff;
   
   --background-color-exp-div_dispmode: #000000;
   --color-exp-div_dispmode: #ffffff;
   
   --background-color-exp-div_dispmode_table: #000000;
   --color-exp-div_dispmode_table: #ffffff;
   
   --background-color-exp-div_dispmode_select: #000000;
   --color-exp-div_dispmode_select: #ffffff;
   
   --background-color-exp-txtaccesslimits: #000000;
   --color-exp-txtaccesslimits: #ffffff;

   --background-color-exp-grantlimits: #000000;
   --color-exp-grantlimits: #ffffff;
   
   --background-color-exp6-shrinkcond: #000000;
   --color-exp6-shrinkcond: #ffffff;

   --background-color-exp6-metaaccdiv: #000000;
   --color-exp6-metaaccdiv: #ffffff;

	--background-color-exp6-pktlimitsdiv: #000000;
	--color-exp6-pktlimitsdiv: #ffffff;

   --background-color-exp6-shrinkcond-h3: #000000;
   --color-exp6-shrinkcond-h3: #ffffff;
   
   --background-color-exp2-button2: #000000;
   --color-exp2-button2: #ffffff;
   
   --background-color-exp2-button3: #000000;
   --color-exp2-button3: #ffffff;
   
   --background-color-exp6-div-tabs_area: #000000;
   --color-exp6-div-tabs_area: #ffffff;


	--background-color-exp6-shrinkcond-select: #000000;
	--color-exp6-shrinkcond-select: #ffffff;


	--background-expwww-customTooltip: #000000;

	--background-color-expwww-input: #000000;
	--color-expwww-input: #ffffff;


	--background-color-afil-body: #000000;
	--color-afil-body: #ffffff;

   --background-color-wcag-root: #000000;
   --color-wcag-root: #ffffff;

   --background-color-wcag-ui-state-active_a_link: #ffffff;       
   --color-wcag-ui-state-active_a_link: #000000;
}


.wcag-mode2 {
   
   --bg-color: #000000;
   --text-color: yellow;

   --background-exp-body: #000000;
   --color-exp-body: yellow;

   --background-color-exp-inptext: #000000;
   --color-exp-inptext: yellow;

   --background-color-exp-fldselect: #000000;
   --color-exp-fldselect: yellow;
	
   --color-exp-jcr_info: yellow;
	
   --color-exp-capt1: yellow;
   --color-exp-capt2: yellow;
   --color-exp-capt3: yellow;
   
   --color-exp-stdlab: yellow;

	--background-exp-ahover: yellow;
	--color-exp-ahover: #000000;

   --background-color-exp-limittxt: #000000;
   --color-exp-limittxt: yellow;

   --background-color-exp-combtxt: #000000;
   --color-exp-combtxt: yellow;

   --background-color-exp-yearrange: #000000;
   --color-exp-yearrange: yellow;
   
   --background-color-exp-div_dispmode: #000000;
   --color-exp-div_dispmode: yellow;
   
   --background-color-exp-div_dispmode_table: #000000;
   --color-exp-div_dispmode_table: yellow;
   
   --background-color-exp-div_dispmode_select: #000000;
   --color-exp-div_dispmode_select: yellow;
   
   --background-color-exp-txtaccesslimits: #000000;
   --color-exp-txtaccesslimits: yellow;

   --background-color-exp-grantlimits: #000000;
   --color-exp-grantlimits: yellow;

   --background-color-exp6-shrinkcond: #000000;
   --color-exp6-shrinkcond: yellow;
   
   --background-color-exp6-metaaccdiv: #000000;
   --color-exp6-metaaccdiv: yellow;

	--background-color-exp6-pktlimitsdiv: #000000;
	--color-exp6-pktlimitsdiv: yellow;
   
   --background-color-exp6-shrinkcond-h3: #000000;
   --color-exp6-shrinkcond-h3: yellow;
   
   --background-color-exp2-button2: #000000;
   --color-exp2-button2: yellow;
   
   --background-color-exp2-button3: #000000;
   --color-exp2-button3: yellow;
   
   --background-color-exp6-div-tabs_area: #000000;
   --color-exp6-div-tabs_area: yellow;

	--background-color-exp6-shrinkcond-select: #000000;
	--color-exp6-shrinkcond-select: yellow;
	
	--background-expwww-customTooltip: #000000;

	--background-color-expwww-input: #000000;
	--color-expwww-input: yellow;

	--background-color-afil-body: #000000;
	--color-afil-body: yellow;

   --background-color-wcag-root: #000000;
   --color-wcag-root: yellow;

   --background-color-wcag-ui-state-active_a_link: yellow;
   --color-wcag-ui-state-active_a_link: #000000;
}


.wcag-mode-black-white {
   
   --bg-color: #ffffff;
   --text-color: #000000;

   --background-exp-body: #ffffff;
   --color-exp-body:  #000000;

   --background-color-exp-inptext: #ffffff;
   --color-exp-inptext: #000000;

   --background-color-exp-fldselect: #ffffff;
   --color-exp-fldselect: #000000;
	
   --color-exp-jcr_info: #000000;
	
   --color-exp-capt1: #000000;
   --color-exp-capt2: #000000;
   --color-exp-capt3: #000000;
   
   --color-exp-stdlab: #000000;
   
   	--background-exp-ahover: #000000;
	--color-exp-ahover: #ffffff;

   --background-color-exp-limittxt: #ffffff;
   --color-exp-limittxt: #000000;

   --background-color-exp-combtxt: #ffffff;   
   --color-exp-combtxt: #000000;

   --background-color-exp-yearrange: #ffffff;
   --color-exp-yearrange: #000000;
   
   --background-color-exp-div_dispmode: #ffffff;
   --color-exp-div_dispmode: #000000;
   
   --background-color-exp-div_dispmode_table: #ffffff;
   --color-exp-div_dispmode_table: #000000;
   
   --background-color-exp-div_dispmode_select: #ffffff;
   --color-exp-div_dispmode_select: #000000;
   
   --background-color-exp-txtaccesslimits: #ffffff;
   --color-exp-txtaccesslimits: #000000;

   --background-color-exp-grantlimits: #ffffff;
   --color-exp-grantlimits: #000000;

   --background-color-exp6-shrinkcond: #ffffff;
   --color-exp6-shrinkcond: #000000;

   --background-color-exp6-metaaccdiv: #ffffff;
   --color-exp6-metaaccdiv: #000000;
   
   	--background-color-exp6-pktlimitsdiv: #ffffff;
	--color-exp6-pktlimitsdiv: #000000;
   
   --background-color-exp6-shrinkcond-h3: #ffffff;
   --color-exp6-shrinkcond-h3: #000000;
   
   --background-color-exp2-button2: #ffffff;
   --color-exp2-button2: #000000;
   
   --background-color-exp2-button3: #ffffff;
   --color-exp2-button3: #000000;
   
   --background-color-exp6-div-tabs_area: #ffffff;
   --color-exp6-div-tabs_area: #000000;

	--background-color-exp6-shrinkcond-select: #ffffff;
	--color-exp6-shrinkcond-select: #000000;

	--background-expwww-customTooltip: #ffffff;
	
	--background-color-expwww-input: #ffffff;
	--color-expwww-input: #000000;

	--background-color-afil-body: #ffffff;
	--color-afil-body: #000000;

   --background-color-wcag-root: #ffffff;
   --color-wcag-root: #000000;

   --background-color-wcag-ui-state-active_a_link: #000000;       
   --color-wcag-ui-state-active_a_link: #ffffff;
}


body {
	background-color: var(--bg-color);
	color: var(--text-color);
	font-size: var(--base-font-size);
	transition: background-color 0.3s, color 0.3s, font-size 0.3s;
	font-family: Arial, sans-serif;
	padding: 20px;
}


.controls {
	position: fixed;
	top: 20px;
	right: 20px;
	display: flex;
	gap: 10px;
}


button.wcag-mode {

	cursor: pointer;
	border: none;
	
	background-color: #007BFF;
	color: white;
	font-size: 14px;
	transition: background-color 0.3s;
}


button:hover {
	background-color: #0056b3;
}


body.wcag-mode * {
	background-color: var(--background-color-wcag-root) !important;
    color: var(--color-wcag-root) !important;
}


body.wcag-mode-font * {
	font-size: inherit;
}


.ui-state-active a,
.ui-state-active a:link{
	background-color: var(--background-color-wcag-ui-state-active_a_link);	
    color: var(--color-wcag-ui-state-active_a_link);
}


.wcag1-0-icon {
	background-image: url('/expertus/bib/img/wcag1_0_ico.png');
}


.wcag1-1-icon {
	background-image: url('/expertus/bib/img/wcag1_1_ico.png');
}


#wcag-theme1-id {
    width: 25px;
    height: 25px;
    background-size: cover;
	background-repeat: no-repeat;
    background-position: center;
	border: none;
    cursor: pointer;
}


.wcag2-0-icon {
	background-image: url('/expertus/bib/img/wcag2_0_ico.png');
}


.wcag2-1-icon {
	background-image: url('/expertus/bib/img/wcag2_1_ico.png');
}


#wcag-theme2-id {
    width: 25px;
    height: 25px;
    background-size: cover;
	background-repeat: no-repeat;
    background-position: center;
	border: none;
    cursor: pointer;
}


.wcag3-0-icon {
	background-image: url('/expertus/bib/img/wcag3_0_ico.png');
}


.wcag3-1-icon {
	background-image: url('/expertus/bib/img/wcag3_1_ico.png');
}


.wcag3-2-icon {
	background-image: url('/expertus/bib/img/wcag3_2_ico.png');
}


.wcag3-3-icon {
	background-image: url('/expertus/bib/img/wcag3_3_ico.png');
}


#wcag-theme3-id {
    width: 25px;
    height: 25px;
    background-size: cover;
	background-repeat: no-repeat;
    background-position: center;
	border: none;
    cursor: pointer;
}
