/* -------------------------------------------------------------------------------- */
/* GENERAL PAGE LAYOUT                                                              */
/* -------------------------------------------------------------------------------- */

body {
    margin:             0;
    padding:            0;
}

div.global {
    width:              964px;
    margin:             0;
    padding:            0;
    margin-left:        17px;
    overflow:           hidden;
}

/* -------------------------------------------------------------------------------- */
/* GENERAL ELEMENT STYLE SETTINGS (CLASS INDEPENDENT)                               */
/* -------------------------------------------------------------------------------- */

form {
    margin:             0;
}

label.greyed, p.greyed, span.greyed {
    color:              #bebebe;
}

label.fold_button {
    font:               bold 12px monospace;
    color:              white;
}

label.fold_button:hover {
    font:               bold 12px monospace;
    color:              #6EC800;
}

label.reload_button {

  background:           url(images/reload_white.svg) no-repeat left;
  background-size:      contain;
  display:              inline-block;
  width:                10px;
  height:               10px;
}

label.reload_button:hover {

  background:           url(images/reload_green.svg) no-repeat left;
  background-size:      contain;
}

label.reload_button:active {

  background:           url(images/reload_white.svg) no-repeat left;
  background-size:      contain;
}

/* -------------------------------------------------------------------------------- */
/* HEADER AREA                                                                      */
/* -------------------------------------------------------------------------------- */

header {
    height:             78px;
    border-bottom:      2px solid #6EC800;
    margin:             0;
    padding:            0;
    margin-top:         12px;
    margin-bottom:      40px;

    clear:              left;
    overflow:           hidden;
}

div.logo_area {
    background:         url(images/wago_logo.svg) no-repeat right top;
    background-size:    140px;
    float:              left;
    width:              202px;
    height:             100%;
    margin:             0;
    padding:            0;
}

div.title_area {
    float:              left;
    height:             100%;
    margin:             0;
    padding:            0;
    margin-left:        18px;
}

header h1 {
    display:            block;
    font:               bold 18px Verdana, sans-serif;
    color:              #231F20;
    margin:             0;
    padding:            0;
    margin-top:         6px;
    white-space:        nowrap;
}

header p {
    color:              #5E5E5E;
    font:               12px Arial, sans-serif;
    margin:             0;
    padding:            0;
    margin-top:         5px;
}

/* -------------------------------------------------------------------------------- */
/* FOOTER AREA                                                                      */
/* -------------------------------------------------------------------------------- */

footer {
    border-top:         1px solid #6EC800;
    margin:             0;
    padding:            0;
    margin-top:         40px;
    margin-bottom:      20px;
    clear:              left;
}

footer p {
    font:               10px Verdana, sans-serif;
    color:              #6EC800;
    margin:             0;
    text-align:         center;
    width:              964px;
}

footer a {
    font-size:          10px;
    text-decoration:    underline;
}

footer a:hover {
    color:              #000000;
    text-decoration:    none;
}

/* -------------------------------------------------------------------------------- */
/* NAVIGATION AREA                                                                  */
/* -------------------------------------------------------------------------------- */

nav {
    background:         url(images/navigation_rahmen_oben.svg) no-repeat left top;
    float:              left;
    margin:             0;
    padding:            0;
    width:              202px;
}

nav:after {
    content:            url(images/navigation_rahmen_unten.svg);
}

nav h3 {
    color:              white;
    font:               bold 11px Verdana, sans-serif;
    margin-top:         0px;
    padding-top:        5px;
    padding-bottom:     5px;
    text-align:         center;
}

nav ul {
    list-style-type:    none;
    margin:             0;
    padding:            0;
}
   
nav ul a {
    text-decoration:    none;
    color:              #90B630;
    font:               12px Arial, sans-serif;
    text-decoration:    underline;
}

nav ul li a {
    display:            block;
    background:         url(images/bullet_green.svg) no-repeat left;
    color:              #000000;
    font:               bold 11px Verdana, sans-serif;
    text-decoration:    none;
    min-height:         18px;
    margin:             0;
    padding:            0;
    padding-top:        3px;
    padding-left:       25px;
}

nav ul li.group {
    display:            block;
    color:              #6EC800;
    text-align:         center;
    font:               bold 11px Verdana, sans-serif;
    text-decoration:    none;
    min-height:         18px;
    margin:             0px;
    margin-top:         10px;
    padding:            0;
    padding-top:        5px;
    border-top:         1px solid #6EC800; 
}

nav ul li a:hover {
    background:         #6EC800 url(images/bullet_white.svg) no-repeat left;
    color:              #ffffff;
}

nav ul li a.selected {
    background:         #6EC800 url(images/bullet_white.svg) no-repeat left;
    color:              #000000;
}

nav ul li a.selected:hover {
    color:              #000000;
}

nav ul li a.forbidden {
    color:              #bebebe;
    color:              grey;
    cursor:             not-allowed;
    cursor:             no-drop;
}

/* -------------------------------------------------------------------------------- */
/* ARTICLE AREA                                                                     */
/* -------------------------------------------------------------------------------- */

article {
    height:             75%;
    width:              764px;
    margin:             0;
    padding:            0;
    margin-left:        220px;
}

article iframe {
    height:             100%;
    width:              744px;
    overflow:           scroll;
}

div.headline {
    width:              720px;
    display:            block;
    font:               bold 13px Verdana, sans-serif;
    color:              #231F20;
    margin:             0;
    padding:            0;
}

div.description {
    width:              720px;
    display:            block;
    font:               12px Verdana, sans-serif;
    text-align:         justify;
    color:              #231F20;
    margin:             0;
    padding:            0;
    margin-top:         1em;
    margin-bottom:      1em;
}

div.warning {
    width:              720px;
    display:            block;
    font:               12px Verdana, sans-serif;
    text-align:         justify;
    color:              red;
    margin:             0;
    padding:            0;
    margin-top:         1em;
    margin-bottom:      1em;
}

p.warning {
    display:            block;
    font:               12px Verdana, sans-serif;
    text-align:         justify;
    border:             red solid thick;
    margin:             0;
    margin-top:         2em;
    margin-bottom:      2em;
    margin-left:        20%;
    margin-right:       20%;
    padding:            1em;
}

/* -------------------------------------------------------------------------------- */
/* ARTICLE CONTENTS                                                                 */
/* -------------------------------------------------------------------------------- */

table.cfgtable, 
table.listtable {

    width:              720px;
    border-collapse:    collapse;
    table-layout:       fixed;
    background-color:   #efefef;
}

.cfgtable caption, 
.listtable caption {

    font:               bold 11px Verdana, sans-serif;
    text-align:         left;
    color:              #231F20;
    background:         #bebebe;
    margin:             0;
    padding:            0;
    margin-top:         1em;
    padding-left:       5px;
    padding-right:      5px;
    padding-top:        4px;
    padding-bottom:     4px;
    user-select:        none;
    -ms-user-select:    none;
    -moz-user-select:   none;
}

.cfgtable tr {

    text-align:         left;
}

.listtable tr {

    text-align:         left;
    vertical-align:     top;   
    background-color:   white;
}

.listtable tr:nth-child(even) {

    background-color:   #efefef;
}

.cfgtable th,
.listtable th {

    font:               bold 11px Verdana, sans-serif;
    text-align:         left;
    color:              #231F20;
    margin:             0;
    padding:            0;
    margin-top:         1em;
    padding-left:       5px;
    padding-right:      5px;
    padding-top:        4px;
    padding-bottom:     4px;
}

.cfgtable td,
.listtable td {

    font:               11px Verdana, sans-serif;
    text-align:         left;
    color:              #231F20;
    margin:             0;
    padding:            0;
    margin-top:         1em;
    margin-bottom:      1em;
    padding:            5px;
    padding-right:      5px;
    padding-top:        5px;
    padding-bottom:     5px;
}

div.anytable_hscroll {

    display:            block;
    width:              720px;
    max-height:         25vh;
    overflow-y:         auto;
    overflow-x:         hidden;
}

.listtable td label {

    display:            inline-block;
    width:              95%;
}

p.conform {
    font:               bold 11px Verdana, sans-serif;
    text-align:         center;
    margin:             0;
    padding:            0;
    margin-top:         1em;
    margin-bottom:      1em;
    margin-left:        1px;
    margin-right:       20px;
}

input[type=radio] {
    margin:             0;
    padding:            0;
    vertical-align:     text-bottom;
}

input[type=checkbox] {
    margin:             0;
    padding:            0;
    vertical-align:     text-bottom;
}

input[type=text] {
    height:             17px;
    margin:             0;
    padding:            0;
    font:               11px Verdana, sans-serif;
}

input[type=file] {
    height:             17px;
    margin:             0;
    padding:            0;
    font:               11px Verdana, sans-serif;
}

input[type=password] {
    height:             17px;
    margin:             0;
    padding:            0;
    font:               11px Verdana, sans-serif;
}

select {
    height:             17px;
    margin:             0;
    padding:            0;
    font:               11px Verdana, sans-serif;
}

.conform input {
    background:         white;
    border:             1px solid #bebebe;
    box-shadow:         1px 1px 0px gray;
    font:               11px Verdana, sans-serif;
    width:              120px;
    height:             17px;
    margin:             0;
    padding:            0;
    margin-left:        1em;
}

input.conform,
button.conform {

    background:         white;
    border:             1px solid #bebebe;
    box-shadow:         1px 1px 0px gray;
    font:               11px Verdana, sans-serif;
    width:              120px;
    height:             17px;
    margin:             0;
    padding:            0;
}

input.conform_table,
button.conform_table {

    background:         white;
    border:             1px solid #bebebe;
    box-shadow:         1px 1px 0px gray;
    font:               11px Verdana, sans-serif;
    height:             17px;
    margin:             0;
    padding:            0;
    padding-left:       1em;
    padding-right:      1em;
}

iframe.io_mapping {

    width:              720px;
    height:             55%;
    overflow-x:         hide;
    overflow-y:         scroll;
    border:             0;
    background-color:   #efefef;
}


/* -------------------------------------------------------------------------------- */