/* Firefox: Get rid of the inner focus border 
    
*/
.inline{
    display:inline-block;
    margin-inline-start:1em;
}
.relative{
    position:relative
}
div.red {
    border: 1px solid red;
}

.max .text-area {
    max-height: 8em;
}
.text-area {
    max-height: 5em;
}
div.labeled-elem > div:first-child {
    width: 5em;
    float: left;
}
div.labeled-elem{
    border-bottom:1px solid #aaa;
}
div.labeled-elem > div:last-child {
    width: calc(100% - 5em - 4px);
    float: right;
}
div.sub-divisions div.sub-divisions {
    font-size: 0.9em;
}
.width200{
    width:calc(100% - 2px);
    margin: 0 1px;
}
.relative{
    position:relative;
}
.upper-right{
    position:absolute;
    right:1px;
    top:0.5em;
}
.float-right{
    float:right;
}
.index{
    font-size:0.8em;
    color:#555;
}
code{
      font-family: monospace;
    white-space: pre;
}
div.entity-filter{
    border: 1px solid #aaa;
}
html, body {
   width: 100%!important;
   max-width: 100%!important;
   box-sizing:border-box;
   margin:0;
   padding:0!important;
   position:relative;
   overflow-wrap: break-word;
}
html{
    width: calc(100% - 4px);
}
.float-right{
    float:right;
    margin-right:1px;
}
.bold{
    font-weight:bold;
}
select.filter {
    max-width:9em;
}
.bg-red{
    background:red;
}
.bg-yellow{
    background: yellow;
}
.weak-color {
    opacity:.5;
}
a:hover {
        background:#aaa;
    }
a.inactive {
    pointer-events:none;
    cursor:none!important;
    font-size:0.8em;
    opacity:0.6;
}
a[target="_blank"]:after, a[target="nwin"]:after {
    font-family: 'FontAwesome';
    content: " \f08e";
}
a label {
    cursor:pointer;
}
div.preformat{
    max-width:100%;
    overflow:auto!important;
    font-family: monospace;
    white-space: pre;
    text-transform:none;
    border:1px solid #eee;
    padding:3px;
}

@keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Firefox < 16 */
@-moz-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

img {
        -moz-animation: fadein 3s; /* Firefox < 16 */
        -ms-animation: fadein 3s; /* Internet Explorer */
         -o-animation: fadein 3s; /* Opera < 12.1 */
            animation: fadein 3s;
    }

/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Internet Explorer */
@-ms-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Opera < 12.1 */
@-o-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}


input.datalist {
    margin:5px;
}
span.search {
    float:right;
    margin-right:1.5em;
}
span.search input[type=text] {
        border-radius: 1em;
        -webkit-border-radius: 1em;
    -moz-border-radius: 1em;
    -ms-border-radius: 1em;
    -o-border-radius: 1em;
        border:red;
        background:#eee;
        padding:2px;
    }


input[type=text],input[type=password], div.edit-board{
    height: calc(1em + 10px);
    padding: 5px 0;
}
input[type=text], textarea {
    width: calc(100% -4px);
    margin:0 1px;
}

.button::-moz-focus-inner {
    padding: 0;
    border: 0;
}
.small {
    font-size:0.7em;
}
.hide{
    display:none !important;
    }

a {
    text-decoration:none;
}
a.del:hover {
    background: red;
    color: #fff;
}
.button {
    display: inline-block;
    vertical-align: middle;
    text-align: center;
    cursor: pointer;
    margin:0 2px;
    padding: 2px;
    vertical-align:middle;
    color: #444;
    min-width: 1em;
    background: #ddd;
    text-decoration: none;
    line-height:1em;
    border-radius: 0.5em;
    
    -webkit-border-radius: 0.5em;
    -moz-border-radius: 0.5em;
    -ms-border-radius: 0.5em;
    -o-border-radius: 0.5em;
    
    border:1px solid #666;
    -webkit-box-shadow: -1px 4px 20px -1px rgba(0,0,0,0.75);
-moz-box-shadow: -1px 4px 20px -1px rgba(0,0,0,0.75);
box-shadow: -1px 4px 20px -1px rgba(0,0,0,0.75);

}
.top-right{
    position:absolute;
    right:1px;
    top:1px;
}
.bottom-right{
    position: absolute;
    right: 1px;
    bottom: 1px;
}
.right {
    position: absolute;
    right: 1px;
 }
.small{
    font-size:small;
}
.button:hover,
.button:focus {
    background:#fff;
    opacity:1!important;
    color:green!important;
}
.button:focus {
    outline: 0;
}

.button:disabled {
    pointer-events:none;
    cursor: default;
    opacity:0.7;
}

    button.button:disabled:hover {
        background: #ddd;
    }
.disabled{
    pointer-events:none;
}
.button:active {
    -webkit-box-shadow: 0 0 0 1px rgba(0,0,0, 0.15) inset, 0 0 6px rgba(0,0,0, 0.20) inset;
-moz-box-shadow:0 0 0 1px rgba(0,0,0, 0.15) inset, 0 0 6px rgba(0,0,0, 0.20) inset;
    box-shadow: 0 0 0 1px rgba(0,0,0, 0.15) inset, 0 0 6px rgba(0,0,0, 0.20) inset;
}

.msg, .error, .warning {
    text-transform: capitalize;
    background: #aaa;
}

.msg{
    color:green;
}
.warning{
    color:yellow;
}
.error{
    color:red;
}
div#dimm {
    display: none;
    z-index: 8;
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    background: #aaa;
    opacity: 0.7;
}
div.show.hide#dimm {
    display: none;
}

div.show#dimm {
    display: block;
    background: #aaa;
    opacity: 0.7;
}

div.cell-msg {
    position:absolute;
    top:calc(-1em + 1px);
    left:-1em;
    text-align:center;
    width:110%;
    background:#000;
    color:#fff;
    margin:1px;
    max-height:1em; 
    -webkit-transition: top 3s;
    -moz-transition: top 3s;
    -o-transition: top 3s;
    transition: top 3s;    
}
    div.cell-msg:hover, div.cell-msg.show, div.cell-msg.msg, div.cell-msg.error, div.cell-msg.warning{
        top:0;
    }

    div.cell-msg.error{
        color:red;
    }
    div.cell-msg.warning{
        color:yellow;
    }

div div.label{
    width:8em;
    display:inline-block;
    vertical-align:top;
    font-size:0.8em;
    opacity:0.8;
}
div a.label{
    display:inline-block;
    width:8em;
    
}

div div.content, div div.value,div span.value, div div.label+span,
div a.content, div a.value
{
    display:inline-block;
    border-bottom:1px dashed #aaa;
    width:calc(100% - 8em);
    overflow-wrap:break-word;
}
div.content input[type=text] {
    width:calc(100% - 1em);
}
div.fullrow{
    display:block;
    width:100%;
}

div.footer{
    position:absolute;
    right:0;
    bottom:0;
}

a.unread::before{
    content: "*";
    color:red;
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
    top: -0.5em;
}