.fade
{
    opacity : 1 !important;
}

.mymodal
{
    position          : fixed;
    top               : 10%;
    bottom            : 10%;
    left              : 10%;
    right             : 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 > .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;
}

.red_caption
{
    font-family    : sans-serif;
    line-height    : normal;
    font-size      : 20px;
    text-transform : uppercase;
    color          : #ff0000;
    font-weight    : 300;
}

.lookup_table
{
    xborder : 1px solid red;
    width   : 100%;
}

.lookup_table thead td
{
    font-size     : larger;
    border-bottom : 1px solid #cccccc;
}

.lookup_table tbody td
{
    padding : 4px 2px;
}

.lookup_table tbody tr:nth-child(even)
{
}

.lookup_table tbody tr:nth-child(odd)
{
    background-color : #eef9ff;
}

.lookup_table tbody tr:hover
{
    background-color : #faffd1;
}

/* Nur für Auto-Nummerierung */
.lookup_table tbody
{
    counter-reset : rowNumber;
}

.lookup_table tbody tr
{
    counter-increment : rowNumber;
}

.lookup_table tbody tr td.rownumber::before
{
    content : counter(rowNumber);
}

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

.nowrap
{
    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;

}

.ausstattung_table th
{
    text-align : center;
    padding    : 4px;
    border     : 1px solid #d6d6d6;
    width      : 16%;
}

.ausstattung_table td
{
    xwidth     : 16.66666%;
    width      : auto;
    font-size  : 22px;
    text-align : center;
    padding    : 2px;
    border     : 1px solid #d6d6d6;
}

.ausstattung_table td input
{
    width : 100%;
}

.status
{
    padding       : 0px 8px;
    font-size     : 10pt;
    border-radius : 2px;
    border        : 1px solid rgba(0, 0, 0, 0.2);
    xbox-shadow   : 0px 0px 1px 1px rgba(0, 0, 0, 0.45);
}

.status::after
{
    content : 'unbekannt';
}

.status.offen
{
    background-color : #ffffc0;
    color            : #000000;
    border-color     : #c9da00;
}

.status.offen::after
{
    content : 'OFFEN';
}

.status.erledigt
{
    background-color : #9fffa9;
    color            : #000000;
}

.status.erledigt::after
{
    content : 'ERLEDIGT';
}

.status.empfangen
{
    background-color : #d3e4ff;
    color            : #000000;
}

.status.faulty::after
{
    content : 'MANGELHAFT';
}

.status.faulty
{
    background-color : #ff97f9;
    color            : #000000;
}

.status.error
{
    background-color : #ff0012;
    color            : #ffffff;
}

.status.error::after
{
    content : '! FEHLER !';
}

.status.empfangen::after
{
    content : 'EMPFANGEN';
}

.status.sonderfall
{
    background-color : #ff1300;
    color            : #ffffff;
    border-color     : #cc0000;
}

.status.sonderfall::after
{
    content : 'SONDERFALL';
}

.status.storniert
{
    background-color : rgba(0, 0, 0, 0);
    color            : #000000;
}

.status.storniert::after
{
    content : 'STORNIERT';
}

.status.kein_zutritt
{
    background-color : rgba(0, 0, 0, 1);
    color            : #f2f2f2;
}

.status.kein_zutritt::after
{
    content     : 'VERWEIGERT';
    white-space : nowrap;
}

.status.nicht_angetroffen
{
    background-color : rgb(255, 177, 0);
    color            : #4a3c13;
}

.status.nicht_angetroffen::after
{
    content     : 'NICHT ANGETROFFEN';
    white-space : nowrap;
}

.status.abgesagt
{
    background-color : rgb(255, 177, 0);
    color            : #4a3c13;
}

.status.abgesagt::after
{
    content     : 'ABGESAGT';
    white-space : nowrap;
}

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

.log_table th
{
    font-weight      : normal;
    text-align       : center;
    padding          : 4px;
    border           : 1px solid #d6d6d6;
    background-color : #eeeeee;

}

.log_table td
{
    xwidth      : 16.66666%;
    xfont-size  : 22px;
    xtext-align : center;
    padding     : 3px 10px;
    border      : 1px solid #d6d6d6;
}

.nowrap
{
    white-space : nowrap;
}

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

.smallwheel
{
    background    : white 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 : #f5f5f5;
    padding          : 2px 10px;

}

.mytable td
{
    padding     : 0px 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;
}

.fehlversuch
{
    display          : inline-block;
    width            : 16px;
    height           : 16px;
    background-color : red;
    color            : white;
    text-align       : center;
    border-radius    : 3px;
    font-size        : 16px;
    cursor           : pointer;
}

.link
{
    cursor : pointer;
    color  : #13508d;
}

.link:hover
{
    text-decoration : underline;

}

.filter_div
{
    display : flex;
}

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

.filter_div > .left > *
{
    align-self   : flex-start;
    margin-right : 4px;
    margin-top   : 4px;

}

.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;
}

.myinputblock > label
{
    width       : 100%;
    white-space : nowrap;
}

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

.navbar
{
    display     : flex;
    width       : 100%;
    flex-wrap   : wrap;
    align-items : center;
}

.navbar > *
{
    xborder         : 1px solid red;
    xalign-self     : center;
    display         : block;
    xpadding        : 13px 15px;
    color           : #777777;
    text-decoration : none;
    margin-left     : 10px;
    xvertical-align : middle;

}

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

}

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

}

.navbar a: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;
}

.planer_info
{
    color            : #fff895;
    background-color : #74c374;
    padding          : 0px 4px;
    xfont-size       : 90%;
}

.mieter_info
{
    color            : #f9fdff;
    background-color : #3dbbde;
    padding          : 0px 4px;
    xfont-size       : 90%;
}

.ampel
{
    background-color : #e8e8e8;

    height           : 12px;
    padding          : 3px;
    display          : inline-flex;
    xwidth           : 30px;
    justify-content  : space-around;
    align-items      : center;
    border-radius    : 2px;
}

.ampel.hide_background
{
    background-color : inherit ;
}

.bulb
{
    font-size    : 10px !important;
    margin-right : 1px;
}

.bulb.grey
{
    color : #c5c0c0;
}

.bulb.green
{
    color : #00ad0b;
}

.bulb.yellow
{
    color : #ffc14b;
}

.bulb.red
{
    color : #ff4448;
}

.bulb.white
{
    color : #ffffff;
}

th.sortable
{
    cursor : pointer;
}

th.sortable.sorted:after
{
    content      : "\f15d";
    font-family  : FontAwesome, serif;
    padding-left : 10px;
}

th.sortable.sorted.desc:after
{
    font-family  : FontAwesome, serif;
    content      : "\f15e";
    padding-left : 10px;
}

/*.status::after*/
/*{*/
/*content : 'unbekannt';*/
/*}*/

.icon_auftragsart
{
    padding     : 0px;
    font-size   : 10pt;
    font-weight : 800;
    line-height : 0;
    color       : #13508d;
    cursor      : help;
}

.icon_auftragsart.neumontage:after
{
    content : "M";
    color   : orange;
}

.icon_auftragsart.wartung:after
{
    content : "W";
}

.icon_auftragsart.sonder:after
{
    content : "S";
    color   : red;
}

.icon_auftragsart.service:after
{
    content : "SA";
    color   : #ef00ff;
}

.icon_auftragsart.fernwartung:after
{
    content : "F";
    color   : #ef00ff;
}

.icon_auftragsart.adhoc:after
{
    content : "A";
    color   : #00abff;
}

.multichoice
{
    xborder     : 1px solid red;
    display     : flex;
    user-select : none;
}

.multichoice > div
{
    border           : 1px solid #d4d4d4;
    padding          : 5px;
    min-height       : 50px;
    cursor           : pointer;
    margin           : 5px;
    background-color : #f9f9f9;
    border-radius    : 3px;
    min-width        : 120px;
}

.multichoice > div div.big
{
    text-align  : center;
    font-size   : 20pt;
    font-weight : 800;

}

.multichoice > div div.small
{
    text-align  : center;
    font-size   : 12pt;
    font-weight : 300;
}

.multichoice > div.selected
{
    border           : 1px solid #56b560;
    animation        : blink 2s linear 0s infinite normal;
    background-color : #139e00;
    color            : white;
}

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

#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;

    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.success
{
    color            : #ffffff;
    background-color : #4ba04b;
    border           : 1px solid #86a57b;
}

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


.w100
{
    width : 100px;
}

.w150
{
    width : 150px;
}

.w200
{
    width : 200px;
}

.w250
{
    width : 250px;
}

.w300
{
    width : 300px;
}

.footnote
{
    color     : #767676;
    font-size : 12px;
}