.info-XS {
    display: inline-block;
    background-color: #3481B8; color: white;
    width: 1.25em; font-size: 75%; 
    text-align: center; border-radius: 0.5em;
    vertical-align: top;
}




.help-small {font-size: 80%;}


div.opc-fatal { background-color: red;    color: white; font-weight: bold; padding: 0.5em 1em; display: inline-block;}
div.opc-error { background-color: orange; color: black; font-weight: bold; padding: 0.5em 1em; display: inline-block;}


input.opc-input-err { background-color: #FFB6C1; }

div.opc-form-closing { margin: 0.25em;}
div.opc-form-closing > div.opc-input-err { display: block; margin: 0.5em 0;}
div.opc-form-closing > div.opc-input-err > div {
    border-top: solid 1px black;
    margin-top: 0.1em;
    padding-top: 0.1em;
    font-weight: normal;
}
div.opc-input-err { background-color: #FFB6C1; padding: 0.25em 0.5em; text-align: center; font-weight: bold; }



a.goto { text-decoration: none; color: black;}
a.goto:after  { content: ' ⇗';}

a.permalink { text-decoration: none; color: #782235;}
a.permalink:after  { content: ' ⬈';}

p.tip { font-size: 75%; color: #888;}






/* --------------------------------------------------------------------------------
   help overlay
   -------------------------------------------------------------------------------- */

.help-overlay {
    display: none;
    max-width: 40em;
    padding: 0.5em 2em 0.5em 1em;
    border: solid 4px darkblue;
    background-color: rgba(245,245,255,0.95);
    animation-name: help-border-in;
    animation-duration: 0.3s;
    z-index: 1;
}

@keyframes help-border-in {
    from { background-color: rgba( 25, 25, 25,1.00); }
    to   { background-color: rgba(245,245,255,0.95); }
}


.help-overlay ul { list-style-type: none; }

.help-overlay .help-close {
    cursor: pointer;
    display: block;
    text-align: right;
    float: right;
    margin-right: -1.5em;
}

div.help-overlay-background {
    display: none;
    background-color: rgba(255,255,255,0.25);
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}



div.inline-title div, div.inline-title h1, div.inline-title h2, div.inline-title h3, div.inline-title h4, div.inline-title h5, div.inline-title h6 { display: inline-block; margin-left: 0.25em; margin-right: 0.25em;}



.info-mark {
    color: blue;
    background-color: #FFFFFF;
    font-size: 67%;
    vertical-align: top;
    display: inline-block;
    border: solid 1px black;
    min-width: 1em;
    border-radius: 0.75em;
}

span.info-mark { cursor: default;}
a.info-mark { cursor: pointer;}



/* ============================================================
   Fusszeile
============================================================ */

#footer {
    width: 100%;
    border-top: 3px solid #8B4513;
    font-size: 75%;
    color: #B8860B;
    display: flex;
    flex-direction: row;
    justify-content: center;
}

#footer > div { margin: 0 2em; }
#footer a { color: #B8860B; text-decoration: none;}




@media screen and (min-width: 800px){

    body.footer-yes { padding-bottom: 100px;}
    
    #footer {
	position: fixed;
	background-color: white;
	bottom: 0px;
	left: 0px;
	height: 41px;
	padding: 0 1em;
    }
}


@media screen and (max-width: 799px){
    #footer { margin-top: 1em; }
}





span.h5-dbg { display: inline-block; padding: 0 1em;}
span.h5-dbg-msg { border: solid 1px blue; border-left-width: 20px;}
span.h5-dbg-err { border: solid 1px red; border-left-width: 20px;}


hr.spacer { border: none;}
hr.large { height: 1em; }
hr.x-large { height: 2em; }


table.velo-calc {font-size: 90%; margin: 1em; padding: 0.5em; background-color: #eee; }
table.velo-calc td { padding: 0 0.5em;}
table.velo-calc th { padding: 0.25em 0.5em 0.5em 0.5em; text-align: left;}