/*
#7E829F - FMF_COLOR_1
#E0E0E0 - FMF_COLOR_2
*/

/*
element selector
id selector
class selector
universal selector
grouping selector
*/

/*
 * pseudo selector
 */
:root {
    --bg_color_01: #E0E0E0; /* FMF_COLOR_1 */
    --bg_color_02: #F9F9F9; /* FMF_COLOR_2 */
    --bg_color_03: #7E829F; /* FMF_COLOR_3 */ /* THIS ONE */
    --bg_color_04: #7B849C; /* FMF_COLOR_4 */
    --base_font: Geneva, Arial, Helvetica, sans-serif;
    --font_01: Verdana,Helvetica,sans-serif;
}

/*
 * id selector
 */
#map_canvas {
    height: 100%;
}

/*
 * element selector
 */
html {
    height: 100%;
}

body {
    height: 100%;
    margin: 0px;
    padding: 0px;
    font-family: var(--base_font);
    font-size: 12pt;
    background-color: var(--bg_color_01);
    color: black; /* text color */
}

td {
    font-size : 14pt;
    font-family : var(--base_font); /*Geneva,Arial,Helvetica,sans-serif; */
}

img.border {
    border-style: none;
}
/*
nav {
    display: flex;
    border-block-end: 0px solid red;
    flex-direction: row;
    justify-content: center;
}

a {
    margin: 0 5px;
    padding: 5px 15px;
    border-radius: 3px 3px 0 0;
    background-color: var(--bg_color_01);
    text-decoration: none;
    color: black;
}

a:hover, a:focus, a:active {
    background-color: var(--bg_color_03);
    color: white;
}
*/
/*
 * class selector
 */
.td_01 {
    background-color: var(--bg_color_03); /* #E0E0E0 */
    width: 90%;
}

.td_02 {
    background-color: var(--bg_color_04); /* #F9F9F9 */
}

.td_03 {
    background-color: var(--bg_color_03); /* #7E829F */
    width: 90%;
}

.table_01 {
    margin-left: auto;   /* center */
    margin-right: auto;  /* center */
    width: 95%;
    padding: 4px;        /* cellpadding */
    border-spacing: 0px; /* cellspacing */
    border: 0px;
}

.table_02 {
    width: 100%;
    padding: 3px;        /* cellpadding */
    border-spacing: 0px; /* cellspacing */
    margin-left: auto;   /* center */
    margin-right: auto;  /* center */
    border: 0px;
}

.inner_td {
    background-color: var(--bg_color_02);
}

.outer_td {
    background-color: var(--bg_color_01);
}

/*
 * Do we use these ?
 */
.table {
    border: solid;
}

.table2 {
    border: solid;
}

.smallheader {
    color: #ccccee;
    background-color: #444466;
    font-family: var(--base_font);
    font-size: 9pt;
}

.title {
    font-size: 20pt;
}
      
.light {
    color: black;
    font-family: var(--base_font);
    font-size: 20pt;
}
      
.item0 { 
    background-color: #ccffff;
}
      
.item1 { 
    background-color: #99ffcc;
}
      
.old_button {
    color : white;
    background-color : #666699;
    border-bottom : thin solid #222244;
    border-right : thin solid #222244;
    border-top : thin solid #9999cc;
    border-left : thin solid #9999cc;
    font-size : 11px;
    font-family : var(--font_01);
    font-weight : normal;
}
      
.header {
    color : #ccccee;
    background-color : #444466;
    font-family : var(--font_01);
    font-weight : bold;
    font-size : 20pt;
    .header: hover {
        color : white;
    };
}

.normal_text {
    font-weight : normal;
    font-size : 12pt;
}

.block_text {
    padding-left:  5%;
    padding-right: 5%;
    font-size:   16px;
    font-family: Arial, Verdana, Sans-seif;
    background-color: var(--bg_color_01);
}
      
.boxitem {
    text-align: center; 
    vertical-align: middle; 
    width: 50%;  
}

.boxitem2 {
    font-size: 12pt;
    text-align: center; 
    vertical-align: middle; 
    width: 20%;  
}

.boxitem3 {
    font-size: 12pt;
    text-align: left; 
    vertical-align: middle; 
    width: 20%;  
}

.boxitem4 {
    text-align: left; 
    vertical-align: middle; 
    width: 20%;  
}

.mainRepTable {
    text-align: left; 
    width: 60%;
}

.subRepTable {
    text-align: left; 
    width: 100%; 
    height: 100%; 
    margin-left: auto; 
    margin-right: auto;
}

.repEntry {
    text-align: center; 
    vertical-align: middle; 
    height: 50%; 
    width: 100%;
}

.border1 {
    background-color : var(--bg_color_04); /* #7b849c; */
}

.border2 {
    background-color : var(--bg_color_01); /* #e0e0e0; */
}

.name {
    font-size: 110%; 
    color: white; 
    background-color: var(--bg_color_04); /* #7B849C; */ 
    font-weight: bold;
}

.dates {
    font-size: 60%; 
    color: white; 
    background-color: var(--bg_color_04); /* #7B849C; */ 
    font-weight: bold;
}

.indicator {
    font-size: 80%; 
    color: white; 
    background-color: var(--bg_color_04); /* #7B849C; */ 
    font-weight: bold;
}

.small {
    font-size: 80%;
    background-color: var(--bg_color_03); /* #E0E0E0 */
    text-align: right;
}

.smallred {
    font-size: 80%; 
    color: red;
}

.bigred {
    color: red;
}

.white {
    color: white;
}

.smallwhite {
    font-size: 80%; 
    color: white;
}

.smallgray {
    font-size: 80%; 
    color: var(--bg_color_04); /* #7B849C */
}

.verysmall {
    font-size: 80%;
    background-color: var(--bg_color_01); /* #F9F9F9 */
    /* background-color: #F9F9F9; */ /* #F9F9F9 */
}

.footer {
    font-size: 60%; 
    color: var(--bg_color_04); /* #7B849C */
}

.smallpadded {
    font-size: 80%; 
    padding-bottom: 0.5em;
}

.field {
    font-size: 80%; 
    color: black; 
    background-color: var(--bg_color_01); /* #E0E0E0; */ 
    font-weight: bold;
}

.mandatoryfield {
    font-size: 80%; 
    color: red; 
    background-color: var(--bg_color_01); /* #E0E0E0; */ 
    font-weight: bold;
}

.value {
    font-size: 80%; 
    color: black; 
    background-color: white;
}

.heading {
    font-weight: bold;
}

.empty {
    font-size: 80%; 
    background-color: var(--bg_color_01); /* #E0E0E0 */
}

.confirm2 {
    color: #5B647C; 
    font-weight: bold; 
    background-color: #FFFFFF;
}

.alerts {
    font-size: 80%; 
    font-weight: bold; 
    color: red;
}

.blue {
    color: #3B445C;
}

.smallblue {
    font-size: 80%; 
    color: #3B445C;
}

.smallselect {
    font-size: 90%;
}

.error {
    color: red; 
    font-weight: bold; 
    border: solid; 
    border-width: thin;
    padding-left: .2em; 
    padding-right: .2em; 
    padding-top: 0.2em; 
    padding-bottom: 0.2em;
}

.dateheader {
    font-size: 100%;
    background-color: var(--bg_color_04); /* #7b849c; */
}

.warning {
    font-size: 80%; 
    color: red; 
    background-color: #FFFFCC; 
    font-weight: bold; 
    border: solid; 
    border-width: thin;
    padding-left: .2em; 
    padding-right: .2em; 
    padding-top: 0.2em; 
    padding-bottom: 0.2em
}

.confirm {
    color: #5B647C; 
    font-weight: bold; 
    border: solid; 
    border-width: thin;
    padding-left: .2em; 
    padding-right: .2em; 
    padding-top: 0.2em; 
    padding-bottom: 0.2em;
}

.smallconfirm {
    color: #5B647C; 
    font-size: 80%; 
    font-weight: bold; 
    border: solid; 
    border-width: thin;
    padding-left: .2em; 
    padding-right: .2em; 
    padding-top: 0.2em; 
    padding-bottom: 0.2em;
}

.smallbutton {
    padding-left: .0em; 
    padding-right: .0em; 
    padding-top: 0.1em; 
    padding-bottom: 0.0em;
    font-size: 80%; 
    color: white; 
    background-color: var(--bg_color_04); /* #7B849C; */ 
    font-weight: bold;
    border: solid; 
    border-color: var(--bg_color_01); /* #E0E0E0; */ 
    border-width: 4px;
}

.button {
    padding-left: .6em; 
    padding-right: .6em; 
    padding-top: 0.2em; 
    padding-bottom: 0.2em;
    font-size: 80%; 
    color: white; 
    background-color: var(--bg_color_04); /* #7B849C; */ 
    font-weight: bold;
    border: solid; 
    border-color: var(--bg_color_01); /* #E0E0E0 */
}

.hibutton { 
    padding-left: .6em; 
    padding-right: .6em; 
    padding-top: 0.2em; 
    padding-bottom: 0.2em;
    font-size: 80%; 
    color: white; 
    background-color: #FF2000; 
    font-weight: bold;
    border: solid; 
    border-color: #FFB0B0;
}

.fadedbutton {
    padding-left: .6em; 
    padding-right: .6em; 
    padding-top: 0.2em; 
    padding-bottom: 0.2em;
    font-size: 80%; 
    color: white; 
    background-color: #ABB4CC; 
    font-weight: bold;
    border: solid; 
    border-color: var(--bg_color_01); /* #E0E0E0 */
}

a.plain { 
    text-decoration: none; 
    color: white; 
}

a.fadedplain { 
    text-decoration: none; 
    color: var(--bg_color_01); /* #E0E0E0 */ 
}

a.smallwhite { 
    color: white; 
    font-size: 80%; 
    font-weight: bold;
}

a.toolbar { 
    text-decoration: none; 
    color: black; 
    font-size: 80%; 
    font-weight: bold;
}

a.toollink { 
    text-decoration: none; 
    color: #5B647C; 
    font-weight: bold;
}

a.toollink:hover {
    text-decoration: underline; 
    color: #2B344C; 
    font-weight: bold;
}

a.hitoollink { 
    text-decoration: none; 
    color: #FF2000; 
    font-weight: bold;
}

a.hitoollink:hover { 
    text-decoration: underline; 
    color: #CF0000; 
    font-weight: bold;
}

a.toollinkfaded { 
    text-decoration: none; 
    color: var(--bg_color_04); /* #7B849C; */ 
    font-weight: bold;
}

a.toollinkfaded:hover {
    text-decoration: underline; 
    color: #4B546C; 
    font-weight: bold;
}

a.link { 
    font-size: 80%; 
    color: blue; 
    font-weight: bold;
}

/*
a:link { text-decoration: none; } 
a:visited { text-decoration: none; }
*/

a:hover {
    color: green;
} 

a:link, a:visited {
    text-decoration: none;
} 
 
:link:hover, :visited:hover {
    text-decoration: underline;
} 

a.blacklink { 
    color: black;
}

a.fadedlink { 
    font-size: 10pt;
    color: var(--bg_color_04); /* #7B849C */
}

a.smallfadedlink { 
    font-size: 80%; 
    color: var(--bg_color_04); /* #7B849C */
}

a.smallbluelink {
    font-size: 80%; 
    color: #3B445C;
}

a.biglink { 
    color: black; 
    font-weight: bold;
}

a.redlink { 
    color: #FF2000; 
    font-weight: bold;
}

a.smallredlink { 
    font-size: 80%; 
    color: #FF2000; 
    font-weight: bold;
}

a.linkbar { 
    color: black; 
    font-weight: bold;
}

a.linkbar:hover {
    color: #A0A0A0; 
    font-weight: bold;
}

a.friend { 
    color: #3B445C; 
    font-weight: bold;
}

a.smallfriend { 
    font-size: 80%; 
    color: #3B445C; 
    font-weight: bold;
}

a.plainfriend { 
    color: #3B445C;
}

.adHeadline { 
    color: #3B445C; 
    font-size: 10pt; 
    font-weight: bold; 
    text-decoration: underline; 
}

.adText { 
    color: black; 
    font-size: 8pt; 
    font-weight: normal; 
    text-decoration: none; 
}

a.visitlink:link { 
      font-size: 80%; 
      color: red; 
      font-weight: bold;
}

a.visitlink:visited { 
      font-size: 80%; 
      color: black; 
      font-weight: bold;
}