body
{
    margin-top  : 0;
    font-family : 'Open Sans', sans-serif;
    font-size   : 12pt;
    color       : #555555;
}

*
{
    font-family : 'Open Sans', sans-serif;
}

.fade
{
    opacity : 1 !important;
}

.mymodal
{
    position          : fixed;
    xtop              : 10%;
    xbottom           : 10%;
    xleft             : 10%;
    xright            : 10%;
    xwidth            : 400px;
    xheight           : 400px;
    border            : 1px solid gray;
    xbackground-color : #e0e0e0;
    xleft             : 50%;
    xtop              : 50%;
    xmargin-left      : -200px;
    xmargin-top       : -200px;
    box-shadow        : 6px 6px 16px 0px rgba(0, 0, 0, 0.75);
    xpadding          : 4px;
}

.mymodal.panel .footer > button
{
    margin : 0 10px;
}

/*.mymodal > .caption*/
/*{*/
/*border-bottom    : 1px solid #bbbbbb;*/
/*font-size        : 14px;*/
/*background-color : #ebebeb;*/
/*padding          : 4px;*/
/*text-align       : center;*/
/*}*/

/*.mymodal > .footer*/
/*{*/
/*position         : absolute;*/
/*bottom           : 0px;*/
/*height           : 30px;*/
/*left             : 0px;*/
/*right            : 0px;*/
/*border-top       : 1px solid #bbbbbb;*/
/*font-size        : 150%;*/
/*text-align       : right;*/
/*padding-right    : 10px;*/
/*padding-top      : 5px;*/
/*background-color : #ebebeb;*/
/*}*/



table.nowrap td
{
    white-space : nowrap;
}

.filter_table
{
    width           : 100%;
    border-collapse : collapse;

}

.filter_table td
{
    padding        : 2px 6px;
    vertical-align : middle;
    line-height    : 18px;
}

.filter_table td label
{
    margin-bottom : 0;

    position      : relative;
    bottom        : -2px;

}

.filter_table tr:nth-child(odd) td
{
    vertical-align : bottom;
    padding        : 0px 6px;
}

.ausstattung_table
{
    width           : 100%;
    border-collapse : collapse;
    xorder          : 1px solid #ececec;
    table-layout    : fixed;

}

.nowrap
{
    white-space : nowrap;
}

.wheel
{
    background : url('/img/icon_scroll.svg') no-repeat 100% 50%/auto 80%;
}

.smallwheel
{
    background    : url('/img/icon_scroll.svg') no-repeat 100% 50%/auto 60%;
    padding-right : 0px;
}

.bootbox.modal > .modal-dialog
{
    z-index : 999999 !important;
}

.mytable
{
    width           : 100%;
    border-collapse : collapse;
}

.mytable th
{
    background-color : #eaedf7;
    padding          : 2px 10px;
    text-align       : left;
}

.mytable td
{
    padding     : 4px 10px;
    line-height : 12pt;
    xborder-top : 1px solid white;
    height      : 20px;
}

.mytable tr:nth-child(even)
{
    background-color : #f7f7f7;
}

.mytable tr:nth-child(odd)
{

}

.mytable tr:hover td
{
    background-color : #e6e6e6;
    /*border-top       : 1px solid #b4ffc3;*/
}

.mytable tr:not(:first-child).p1 td
{
    border-top   : 1px solid #a1b2ce;
    xborder-left : 4px solid #b0a0f8;
}

.gridfooter
{
    display : flex;
    xborder : 1px solid green;
}

.gridfooter > *
{
    xborder     : 1px solid red;
    margin-left : 5px;
}

.gridfooter #divErgebnisse
{
    margin-right : auto;
    padding-top  : 4px;
}

.gridfooter #divSeite
{
    width          : 200px;
    text-align     : center;
    vertical-align : middle;
    padding-top    : 4px;
}

.link
{
    cursor : pointer;
}

.filter_div
{
    display : flex;
}

.filter_div > .left
{
    flex-grow : 1;
    display   : flex;
    flex-wrap : wrap;
}

.filter_div > .left > *
{
    align-self : flex-start;
}

.filter_div > .left > button
{
    margin-right : 4px;
    margin-top   : 4px;
}

.filter_div > .right
{
    border-left     : 1px solid #d9d9d9;
    width           : 200px;
    flex-grow       : 0;
    flex-shrink     : 0;
    flex-basis      : 200px;
    flex-wrap       : wrap;
    display         : flex;
    justify-content : space-between;
    padding-left    : 4px;
    padding-right   : 4px;
}

.filter_div > .right > *
{
    xflex-grow   : 0;
    xflex-shrink : 0;
    xalign-self  : flex-end;
    xmargin      : 4px;
}

.myinputblock
{
    padding : 2px;
    width   : 200px;
    xborder : 1px solid red;
    margin  : 2px;

}

.myinputblock > label
{
    width   : 100px;
    xborder : 1px solid blue;
}

.myinputblock > *
{
    width      : 100% !important;
    xborder    : 1px solid yellow;
    box-sizing : border-box;
}

.checkbox
{
    width      : 20px;
    height     : 20px;
    /*border     : 1px solid red;*/
    margin-top : 5px !important;
}

.navbar
{
    display          : flex;
    width            : 100%;
    flex-wrap        : wrap;
    background-color : #f5f5f5;

    border-bottom    : 1px solid #d4d4d4;
    border-left      : 1px solid #d4d4d4;
    border-right     : 1px solid #d4d4d4;
    margin-bottom    : 20px;
    align-items      : center;
}

.navbar > *
{
    xborder         : 1px solid red;
    xalign-self     : center;
    display         : block;
    padding         : 5px 10px;
    color           : #777777;
    text-decoration : none;
}

.navbar *
{
    xcolor          : #777777 !important;
    text-decoration : none;
    white-space     : nowrap;

}

.navbar a, .link
{
    color           : #777777 !important;
    text-decoration : none;
    white-space     : nowrap;

}

.navbar a:hover, .link:hover
{
    text-decoration : underline;
}

.navbar > *.active
{
    /*color            : #555555;*/
    /*background-color : #e7e7e7;*/
    /*border-bottom: 2px solid #333333;*/

    background : rgb(231, 231, 231);
    background : -moz-linear-gradient(top, rgba(231, 231, 231, 1) 0%, rgba(231, 231, 231, 1) 96%, rgba(117, 117, 117, 1) 100%);
    background : -webkit-linear-gradient(top, rgba(231, 231, 231, 1) 0%, rgba(231, 231, 231, 1) 96%, rgba(117, 117, 117, 1) 100%);
    background : linear-gradient(to bottom, rgba(231, 231, 231, 1) 0%, rgba(231, 231, 231, 1) 96%, rgba(117, 117, 117, 1) 100%);
    filter     : progid:DXImageTransform.Microsoft.gradient(startColorstr='#e7e7e7', endColorstr='#757575', GradientType=0);

}

.hint
{
    font-size : 85%;
    color     : #1a802c;
}

.panel
{
    border         : 1px solid #c9c9c9;
    border-radius  : 6px;
    overflow       : hidden;
    display        : flex;
    flex-direction : column;
}

.panel > .header
{
    padding          : 8px;
    background-color : #ebebeb;
    xtext-shadow     : 1px 1px 1px rgba(0, 0, 0, 0.2);
    border-bottom    : 1px solid #c9c9c9;
    font-size        : 14pt;
    flex-grow        : 0;
}

.panel > .body
{
    padding          : 10px;
    xoverflow-x      : auto;
    background-color : #ffffff;
    flex-grow        : 1;
    xborder          : 1px solid red;
    xmargin          : 10px;
}

.panel > .footer
{
    padding          : 8pt;
    background-color : #ebebeb;
    text-shadow      : 1px 1px 1px rgba(0, 0, 0, 0.1);
    border-top       : 1px solid #c9c9c9;
    display          : flex;
    color            : #777777 !important;
    flex-grow        : 0;
    align-items      : center;
}

.panel > .footer > span, .panel > .footer > a
{
    color : #777777;
}

.red_caption
{
    font-size   : 20pt;

    color       : #6b6b6b;
    font-weight : 300;
}

.center
{
    text-align : center;
}

input[type="text"], input[type="password"]
{
    padding   : 4px;
    font-size : 12pt;
    border    : 1px solid #d1d1d1;
}

input[type="text"][readonly]
{
    background-color : #e8e8e8;
    color            : #808080;
}

select
{
    padding   : 4px;
    font-size : 12pt;
    border    : 1px solid #d1d1d1;
}

select[disabled]
{
    background-color : #e8e8e8;
    color            : #808080;
}

input[type="button"], button
{
    padding          : 6px 12px;
    font-size        : 12pt;
    xborder          : 1px solid #d1d1d1;
    border           : none;
    color            : #505050;
    xline-height     : 0pt;
    xheight          : 50px !important;
    transition       : all 0.3s ease;
    background-color : #cecece;
}

input[type="button"].blue, button.blue
{
    background-color : #5c98ff;
    color            : white;
}

input[type="button"].yellow, button.yellow
{
    background-color : #e2c43d;
    color            : white;
}

input[type="button"].red, button.red
{
    background-color : #ff5b5b;
    color            : white;
}

input[type="button"].green, button.green
{
    background-color : #27a724;
    color            : white;
}

input[type="button"]:hover, button:hover
{
    xbox-shadow   : 1px 1px 1px #223322;
    xborder-color : black;
    opacity       : 0.8;
    transition    : all 0.1s ease;
}

input[type="button"][disabled], button[disabled]
{
    opacity : 0.5 !important;
    cursor  : not-allowed;
}

#infobox
{
    z-index         : 9999;
    text-align      : center;
    box-shadow      : rgba(0, 0, 0, 0.2) 3px 3px 3px 0;
    bottom          : 20px;
    position        : fixed;
    padding         : 4px;
    border-radius   : 2px;
    left            : 30%;
    right           : 30%;
    font-weight     : 300;
    min-height      : 30px;
    line-height     : 2;
    font-size       : 16pt;
    display         : block;
    cursor          : pointer;
    xpointer-events : none;
    animation       : fadeout 1200ms ease-in-out both;
}

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

@keyframes fadeout
{
    from
    {
        opacity    : 1;
        visibility : visible;
    }
    to
    {
        opacity    : 0;
        visibility : hidden;
    }
}

#infobox.visible
{
    animation : fadein 200ms ease-in-out both;
}

#infobox.good
{
    color            : #ffffff;
    background-color : #4ba04b;
    border           : 1px solid #86a57b;
}

#infobox.bad
{
    background-color : #d64949;
    border           : 1px solid #daa6a6;
    color            : #ffffff;
}

#infobox.bad
{
    background-color : #d64949;
    border           : 1px solid #daa6a6;
    color            : #ffffff;
}

.detail_table
{
    xborder         : 1px solid red;
    border-collapse : collapse;
    width           : 100%;
}

.detail_table td
{
    padding : 4px;
}

.detail_table > tbody > tr > td:first-child
{
    min-width : 200px;
}

.detail_table input[type="text"], .detail_table select
{
    width      : 300px;
    box-sizing : border-box;
}

.ajax_loader
{
    background-image : url('/img/ajax_loader.svg');
    width            : 24px;
    height           : 24px;
    background-size  : contain;
}

#div_search
{
    margin-bottom : 20px;
}

.right
{
    text-align : right;
}

.left
{
    text-align : left;
}

.center
{
    text-align : center;
}

.blinking
{
    animation : blink 2s linear 0s infinite normal;
}

@keyframes blink
{
    0%
    {
        opacity : 1;
    }
    25%
    {
        opacity : 0;
    }
    50%
    {
        opacity : 1;
    }
    75%
    {
        opacity : 0;
    }
    100%
    {
        opacity : 1;
    }
}