:root {
    --border-radius-large: 3px;
    --border-radius-small: 3px;
    --input-element-height: 30px;
    --input-element-scale: 1.875;
    --input-element-scaled-offset: 7px;
    --header-input-element-background-color: #EEEEEE;
    --header-input-element-background-color-readonly: #E0E0E0;
    --input-element-background-color: #FFFFFF;
    --input-element-background-color-readonly: #F0F0F0;
    --input-element-border-color: #12568F;
    
    --font-color-default: #12568F;
    --font-color-body-normal: #000000;
    --box-border-color: #ADD1EA;
    
    --header-button-border-color: #888888;
    --header-button-background-color: #6FA7CF;
    --header-button-font-color: #FFFFFF;
    
    --body-button-border-color: #000000;
    --body-button-background-color: #FDFEDF;
    --body-button-font-color: #000000;
    
    --table-border-color: #787878;
    --table-background-color-normal: #E6E6E6C4;
    --table-background-color-hover: #ADD1EA;
    --table-background-color-header-normal: #969696C4;
    
    --icon-spacing:5px;
    --header-height:91px;
    --zero-height:0px;
}

/*** 1         - Layout elements */ 
body {
    background-image: url(../BIN/LAYOUT4_HEADER_BACKGROUND_CHB_SOFT);
    background-repeat:no-repeat;
    background-color:#DCDCDC;  
    color:var(--font-color-default);
    font-family: Tahoma, Arial, sans-serif;
    font-size:12pt;
    text-align:left;
    line-height:24px;
    /***width:100%;  */
    margin:0px 0px 0px 0px;
    padding:0px 0px 0px 0px;
    overflow:scroll;
    }


/*** 1.1       - Layout elements - Area navigation */
.body_area_nav {
    width:auto;
    overflow:hidden;
    position:absolute;
    left:10px;
    top:10px;
    float:none;  
    z-index:4;
    padding: 3px 20px 7px 20px;
    background-color:var(--header-button-background-color);
    z-index:99;
    height:20px;
    border: 1px solid var(--input-element-border-color);
    color: var(--header-button-font-color);
    border-radius:var(--border-radius-small);
}

.body_area_nav a {
    color: var(--header-button-font-color);
    text-decoration: none;
}

.body_area_nav:before {
    content: "\2630 \00a0 Switch group";
    display:inline-block;
    text-align:left;
    cursor:pointer;
}

.body_area_nav .module {
    visibility:hidden;
    width:0px;
}

.body_area_nav:focus-within {
    pointer-events:auto;
    height:auto;
    z-index:999;
}

.body_area_nav:focus-within .module {
    width:auto;
    visibility:visible;
}

.groupbuttons {
    float:none;
}

.groupbuttons_left, .groupbuttons_right {
    visibility:hidden;
    float:left;
}

.groupbuttons_center {
    float:left;
}

.groupbuttons_list {
    clear: both;
    list-style: none;
    padding: 0px;
}

.groupbutton_selected {
    font-weight: bold;
}

.groupbutton_normal, .groupbutton_selected, .groupbutton_special {
    clear: both;
    list-style: none;
}

.groupbutton_normal_left, .groupbutton_selected_left, .groupbutton_special_left {
    float:left;
    width:16px;
    height:24px;
    text-align:left;
}
    
.groupbutton_normal_right, .groupbutton_selected_right, .groupbutton_special_right {
    float:left;
    width:24px;
    height:24px;
    text-align:right;
}

.groupbutton_selected_left::before {
     content:"\2023";
}

.groupbutton_special_right::before {
     content:"\0021";
}


.groupbutton_normal_center, .groupbutton_selected_center, .groupbutton_special_center {
    float:left;
}



/*** 1.2       - Layout elements - Group navigation */  
.body_group_nav {
    width:auto;
    overflow:hidden;
    position:absolute;
    left:10px;
    top:50px;
    float:none;  
    z-index:4;
    padding: 3px 20px 7px 20px;
    background-color:var(--header-button-background-color);
    z-index:99;
    height:20px;
    border: 1px solid var(--input-element-border-color);
    color: var(--header-button-font-color);
    border-radius:var(--border-radius-small);
}

.body_group_nav a {
    color: var(--header-button-font-color);
    text-decoration: none;
}

.body_group_nav:before {
    content: "\2630 \00a0 Switch site";
    display:inline-block;
    text-align:left;
    cursor:pointer;
}

.body_group_nav .module {
    visibility:hidden;
    width:0px;
}

.body_group_nav:focus-within {
    pointer-events:auto;
    height:auto;
    z-index:999;
}

.body_group_nav:focus-within .module {
    width:auto;
    visibility:visible;
}

.sitebuttons {
    float:none;
}

.sitebuttons_left, .sitebuttons_right {
    visibility:hidden;
    float:left;
}

.sitebuttons_center {
    float:left;
}

.sitebuttons_list {
    clear: both;
    list-style: none;
    padding: 0px;
}

.sitebutton_selected{
    font-weight: bold;
}

.sitebutton_normal, .sitebutton_selected, .sitebutton_subgroup, .sitebutton_external {
    clear: both;
    list-style: none;
}

.sitebutton_normal_left, .sitebutton_selected_left, .sitebutton_subgroup_left, .sitebutton_external_left {
    float:left;
    width:16px;
    height:24px;
    text-align:left;
} 

.sitebutton_normal_right, .sitebutton_selected_right, .sitebutton_subgroup_right, .sitebutton_external_right {
    float:left;
    width:24px;
    height:24px;
    text-align:right;
}

.sitebutton_selected_left::before {
     content:"\2023";
}

.sitebutton_subgroup_left::before {
     content:"\002B";
}

.sitebutton_external_right::before {
     content:"\29C9";
}


.sitebutton_normal_center, .sitebutton_selected_center, .sitebutton_subgroup_center, .sitebutton_external_center {
    float:left;
}



/*** 1.3       - Layout elements - Login area */    
.body_login{
    position:relative;
    top:10px;
    float:right;
    padding-right:10px;
    z-index:30;
}

.login_field{
    height:34px;
    overflow:hidden;
    width:auto;
}
.login_field_left {    
    visibility:hidden;
    float:left;
}
.login_field_center {
    float:left;  
    overflow:hidden;
    white-space:nowrap;
    text-align:right;
    padding-top:5px;
    padding-right:15px;
}
.login_field_right {
    float:left;    
    overflow:hidden;
    height:34px;
}

.login_field a.InputButton {
    position: relative;
    top: 5px;
}

/*** 1.4       - Layout elements - Info field (e.g. Alias existence) */    
.body_info{
    position:absolute;
    right:100px;
    top:calc( var(--header-height) + 9px );
    z-index:10;
}

.info_field{
    position:relative;
    right:175px;
    overflow:hidden;  
    text-align:right;  
    vertical-align:middle;
}

/*** 1.5       - Layout elements - Alias area */    
.body_alias{
    position:absolute;
    right:10px;
    top:50px;
    z-index:20;
}

.alias_field{    
    height:34px;
    overflow:hidden;
    width:auto;
}
.alias_field_left {  
    visibility:hidden;
    float:left;
}
.alias_field_center {
    float:left;  
    overflow:hidden;
}
.alias_field_right {
    float:left;
    overflow:hidden;
}

/*** 1.6       - Layout elements - Body header */
.body_normal_header {
    position:absolute;
    right:10px;
    top:calc( var(--header-height) + 9px );
    float:none;
    text-align:right;
    z-index:30;
}

.body_normal_header a {    
    margin-left:var(--icon-spacing);
}

/*** 1.7       - Layout elements - Body */
.body_normal {  
    color:var(--font-color-body-normal);
    background-image:url(../BIN/CHB_SOFT_BACKGROUND);
    overflow:visible;
    position:relative;
    /***width:100%;*/
    clear:both;
    padding-top:40px;
    top:60px;
    border-top: 1px solid var(--box-border-color);
    border-bottom: 1px solid var(--box-border-color);
    margin-top: var(--header-height);
    margin-bottom: 10px;
    min-height:350px;
}

/*** 1.8       - Layout elements - Footer */
.body_footer {
    position:relative;
    width:100%;
    left:0;
    float:none;
    top:60px;
}

/*** 1.9       - Layout elements - Language area */    
.body_language{
    position:relative;
    float:right;
    top:9px;
    z-index:30;
}

.language_field{
    height:34px;
    overflow:visible;
    width:auto;
    padding-right:10px;
}
.language_field_left {    
    visibility:hidden;
    float:left;  
}
.language_field_center {
    height:34px;
    float:left;
    overflow:visible;
    text-align:center;
    vertical-align:middle;
}
.language_field_right {
    visibility:hidden;
    float:left;
}

.language_field a.InputButton {
  position: relative;
  top: 5px;
}


/*** 2.1       - Formatting elements - General */
.pre {
    white-space: pre;
}

.small {
    font-size:10pt;
}

.bold {
    font-weight:bold;
}

.justify {
    text-align:justify;
}

.right {
    text-align:right;
}

.left {
    text-align:left;
}

.center {
    text-align:center;
}

.icon_on_button {
    height:16px;
    width:16px;
}

.icon_next_to_input {
    position:relative;
    padding: 0px 4px 0px 4px;
}

.nobr {
    white-space:nowrap;
}

.unimportant {

}


/*** 2.1       - Formatting elements - General */        
a {
    color:var(--font-color-default);
    text-decoration:underline;
}

a:hover {
    color:var(--font-color-default);
    text-decoration:underline;
}

.body_normal a {
    color:var(--font-color-body-normal);
}

.body_normal a:hover {
    color:var(--font-color-body-normal);
    text-decoration:underline;
}

a img {
    min-width:16px;
    min-height:16px;
    image-rendering:high-quality;
}

a:link {
}

a:visited {
}

a:active {
}

/*** 2.2       - Formatting elements - Text formatting */        
h1 {
    font-size:16pt;
    font-weight:bold;
    text-align:left;
}

h2 {
    font-size:14pt;
    text-align:left;
}

h3 {
    font-size:12pt;
    font-weight:900;
    text-align:center;
}


/*** 2.3       - Formatting elements - Table formatting */        
table, th, td {
    color: inherit;
}

.framed {
    border-style: solid;
    border-color: var(--table-border-color);
    border-width: 1px;
    border-collapse: collapse;
}

tr.framed {
    background-color: var(--table-background-color-normal);
}

tr.framed:hover {
    background-color: var(--table-background-color-hover);
}

th {
    font-weight:bold;
}

th.framed {
    background-color: var(--table-background-color-header-normal);
    padding:5px;
}

td {
    
}

td.framed {
    background-color: var(--table-background-color-normal);
    padding:5px;
}

/*** 2.4       - Formatting elements - Input fields formatting */        
input:focus {
outline: none;
}

.input_field {
    white-space:nowrap;  
    position:relative;
    min-height: var(--input-element-height);
    display:inline-block;
    background-color: var(--header-input-element-background-color);
    border: 1px solid var(--input-element-border-color);
    border-radius: var(--border-radius-small);
    box-sizing: border-box;
    overflow: clip;
}

.input_field.readonly {
  background-color: var(--header-input-element-background-color-readonly);
}

.body_normal .input_field {
    background-color: var(--input-element-background-color);
}

.body_normal .input_field.readonly {
    background-color: var(--input-element-background-color-readonly);
}

.input_field_function {  
    position:relative;
    width:auto;
    display:inherit;
}

.input_field_additional_output {
}

.InputAdditionalOutput {
    background-color: transparent;
    font-size:inherit;
    padding: 0px 0px 0px 0px;
    border: 0px;
    height: var(--input-element-height);
}

.InputField, .InputFieldWithSearchHelp, .InputList, .InputCheckbox, .InputList2 {
    font-size:inherit;
    background-color: var(--input-element-background-color);
    border: 1px solid var(--input-element-border-color);
    border-radius: var(--border-radius-small);
    box-sizing: content-box;
}

.input_field .InputField, .input_field .InputFieldWithSearchHelp, .input_field .InputList, .input_field .InputCheckbox, .input_field .InputList2 {
    background-color: inherit;
    border: 1px solid transparent;
    box-sizing: border-box;
}

.InputField, .InputFieldWithSearchHelp {
    height: var(--input-element-height);
    padding: 0px 4px 0px 4px;
    line-height: var(--input-element-height);
}

td .InputField, th .InputField, td .InputList, th .InputList {
/***  width: calc(100% - 10px); */
}

.input_field_separator {
    height: var(--input-element-height);
    line-height: var(--input-element-height);
}

.InputCheckbox {
    height: var(--input-element-height);
    padding: 0px 0px 0px 0px;
    margin: 0px 8px 0px 1px;
    transform: scale( var(--input-element-scale) );
    position: relative;
    left: var(--input-element-scaled-offset);
}

.InputRadio {
    height: var(--input-element-height);
    font-size:inherit;
    padding: 0px;
    margin: 0px 4px 0px 1px;
    transform: scale( var(--input-element-scale) );
    position: relative;
    left: var(--input-element-scaled-offset);
}

.InputList {
    height: var(--input-element-height);
}

.InputList2 {
    padding: 5px;
}

.InputButton {
    color:var(--header-button-font-color);
    font-size:inherit;
    background-color: var(--header-button-background-color);
    padding: 0px 10px 0px 10px;
    border: 1px solid var(--input-element-border-color);
    height: var(--input-element-height);
    text-align:center;
    border-radius: var(--border-radius-small);
    cursor: pointer;
    box-sizing: content-box;
}

.input_field .InputButton {
    box-sizing: border-box;
}

.body_normal .InputButton {
    background-color: var(--body-button-background-color);
    color: var(--body-button-font-color);
    border: 1px solid transparent;
}

.input_field_function .InputButton {
  border-left: 1px solid var(--input-element-border-color);
  border-top: 1px solid transparent;
  border-right: 1px solid transparent;
  border-bottom: 1px solid transparent;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

a.InputButton {
    padding: 6px 10px 5px 10px;
    text-decoration: none;
    color: var(--header-button-font-color);
}

a.InputButton:hover {
    text-decoration: none;
    color: var(--header-button-font-color);
}

.body_normal a.InputButton {
    text-decoration: none;
    color: var(--body-button-font-color);
}

.body_normal a.InputButton:hover {
    text-decoration: none;
    color: var(--body-button-font-color);
}

.InputButton .icon_on_button {
    vertical-align:middle;
    top:0px;
    height:16px;
    width:16px;
}

.InvisibleButton {
    background-image:url(../BIN/EMPTY);
    background-color: transparent;
    padding: 0px;
    border: 0px;
    margin: 0px;
}

.error {
    border-color:#FF0000;
    background-color:#FFDDDD;
}

.readonly {
    background-color:#DDDDDD;
}


/*** 2.5       - Formatting elements - Special navigation*/      



/*** 2.6       - Formatting elements - Module */        
.module {
    clear: both;
}

.body_normal .module {
   margin-bottom: 25px;
   /***width: 100%;*/
}

.module .module_header {
    text-align: right;
    vertical-align: top;
    padding-right: 10px;
}

.module .module_header .module_header_toolbar {    
    display: inline-block;
    vertical-align: middle;
}

.module .module_header .module_header_toolbar a {    
    margin-left:var(--icon-spacing);
}

.module .module_header .module_header_config {    
    display: inline-block;
    vertical-align: middle;
}

.module .module_header .module_header_config a {    
    margin-left:var(--icon-spacing);
}

.module .module_header .DataSharing {
    display: inline-block;
}

.module .module_header .DataSharing::after {
    clear: both;
    content: "";
    display: table;
}

.module .module_header .DataSharing ul li::before {
    position:absolute;
    right:0px;
    content: "\22c1";
}

.module .module_header .DataSharing ul li li::before {
    content: "";
}


.module .module_header .DataSharing ul li {
    background-color: var(--header-button-background-color);
    color: var(--header-button-font-color);
    display: inline-block;
    position: relative;
    text-align: left;
    vertical-align: bottom;
    line-height:32px;
    height:32px;
    width: 150px;
    border: 1px solid var(--input-element-border-color);
    border-radius: var(--border-radius-small);
}

.module .module_header .DataSharing a {
    display: block;
    text-decoration: none;
    color: var(--header-button-font-color);
    padding: 0px;
    height:30px;
    line-height:30px;
}

.module .module_header .DataSharing ul ul {
    display: none;
    position: absolute;
    left: -9999px;
    top: 32px;
}

.module .module_header .DataSharing ul {
    list-style: none outside none;
    margin: 0;
    padding: 0;
    position: relative;
    left:0px;
    width:150px;
}

.module .module_header .DataSharing ul ul li {
    display: list-item;
    float: none;
    overflow: hidden;
    position: relative;
    left:-1px;
    line-height:32px;
    height:32px;
    width:150px;
    text-align: left;
    white-space: nowrap;
    background-image: none;
}

.module .module_header .DataSharing img {
    vertical-align:middle;
    max-width:30px;
    max-height:30px;
}

.module .module_header .DataSharing ul li:hover > ul {
   /* display: inherit; */
}

.module .module_header .DataSharing ul li a:active + ul {
    left: 0px;
    display: block;
}

.module .module_header .DataSharing ul li ul:hover {
    left: 0px;
    display: block;
}

.module .module_header .DataSharing ul li a:focus + ul {
    left: 0px;
    display: block;
}


.module .module_body {
    overflow: auto;
    padding-left:10px;
    padding-right:10px;
}

.module .module_body .module_body {
    overflow: hidden;
}

.module .module_sidebar {
    float: left;    
    margin-right: 5px;    
    position: sticky;
    top: 0px;
    border-top: 1px solid var(--box-border-color);
    border-bottom: 1px solid var(--box-border-color);
    border-right: 1px solid var(--box-border-color);
    padding: 5px;
    border-radius: var(--border-radius-large);
}

.module .module_sidebar .module_sidebar_header {
    text-align: right;    
    position:relative;
    right:-5px;
    top:-5px;
}

.module .module_sidebar .module_sidebar_body {
   width: 350px;
   max-height: 500px;
   min-height: 75px;
   overflow-y: scroll;
}

.module .module_footer {
    clear: both;
}

:root {
    --table-background-color-zebra: #D7D5D5C4;
    --table-background-color-header-zebra: #868585C4;
}

.unimportant {
  display:none !important;
}

.framed, table.framed > thead, table.framed > tbody, table.framed > tfoot {
	display: block;
	width: auto;
}

table.framed {
	border: none;
}

tr.framed + tr.framed {
  border-top: none;
}

th.framed {
	border: none;
}

td.framed {
	border: none;
}

th.framed:nth-of-type(even) {
	background-color: var(--table-background-color-header-zebra);
}

td.framed:nth-of-type(even) {
	background-color: var(--table-background-color-zebra);
}

th .InputField, th .InputFieldWithSearchHelp, th .InputList, th .InputCheckbox, th .InputList2, th .input_field {
  //border: none;
  //outline: none;
  //border-radius: 0;
  background-color: transparent !important;
}