/*

Farben ================================================================================
Logo blau: #173954 beige #ad9d79
Hintergrund weiss, Beige:  #d3c7aa #e1d9c6 #f0ece3
Schrift schwarz: #333333 blau: #0c3750 rot: #9a2619
Linie grau: #999999
Bulletpoints: beige #d4c7a8
Button weiss grau #aaaaaa

*/



body {
    overflow-x: hidden; 
    font-family: sans-serif;
    color: #333333;
}



span.empty { display: inline-block; color: #9a2619; background-color: #f0ece3; padding: 0 0.4em; border-radius: 0.75em;}
span.hint { display: inline-block; color: #0c3750; background-color: #f0ece3; padding: 0.2em 0.5em; border-radius: 0.4em;}

span.admin-hint { display: inline-block; color: #888; background-color: white; font-size: 80%; padding: 0.2em 0.5em; margin-left: 1em;}

button.checkbox { font-weight: bold; text-align: center; border: solid 1px black; background-color: #f0ece3; width: 2.5em; padding: 0.2em 0em;}
button.checkbox.state-Y {background-color: #92d050 !important; color: black !important;}
button.checkbox.state-N {background-color: #FF7F50 !important; color: white !important;}
button.checkbox.state-M {background-color: #0000ff !important; color: white !important;}
button.checkbox.state-F {background-color: #F7BAFF !important; color: black !important;}

div.h3plus { padding: 0.5em 0 0 0.5em; margin: 2em 0 1em 0; border-top: solid 2px #0c3750;}
div.h3plus h3 { display: inline-block; padding: 0; margin: 0 3em 0 0 ;}
h4  { border-top: solid 1px #0c3750; padding-top: 0.25em; margin-top: 2.5em;}

/* add some space for the second h3 and all after in a div  */
h3:nth-of-type(1n+2) { margin-top: 3em; }



/* Top title row ============================================================ */
div#aap-claim { font-size: 125%; text-align: right;}
div#aap-logo { text-align: center; }
div#aap-logo img { height: 65px; }
div#aap-title { text-align: center; }




/* Left and right element of  the top row below the title ==================================== */
div#top-date { text-align: center; }
div#top-user { text-align: right; }
div#top-user a { text-decoration: none; color: #333333;}




/* Top menu (placed below tilte row in the center ============================================ */
div#top-menu { text-align: center; }
div#top-menu ul.top-menu { margin: 0; padding: 0; font-size: 120%; }
div#top-menu ul.top-menu li {display: inline-block; padding: 0.4em 0.5em; }
div#top-menu ul.top-menu li a { text-decoration: none; color: #333333; font-weight: bold; }



/* navigation for bid status, left side  ================================================== */
div#bid-nav { text-align: center;  max-width: 13em; margin: auto;}
div#bid-nav a { display: block; padding: 0.1em 0.2em; color: #333333; text-decoration: none;}
div#bid-nav > a { border: solid 1px black; margin-top: 1em;}
div#bid-nav > div { display: none; padding-top: 0.5em;}




/* Bid status colors ====================================================================== */

.bid-intrst  { background-color: #c6e0b4 !important; color: black !important;}
.bid-review  { background-color: #FF7F50 !important; color: white !important;}
.bid-bid     { background-color: #92d050 !important; color: black !important;}
.bid-win     { background-color: #8ea9db !important; color: black !important;}
.bid-closed  { background-color: #0000ff !important; color: white !important;}
.bid-closing { background-color: #203764 !important; color: white !important;}
.bid-buy     { background-color: #98FB98 !important; color: black !important;}
.bid-denied  { background-color: #FFD700 !important; color: black !important;}
.bid-decl    { background-color: #FF0000 !important; color: white !important;}
.bid-lost    { background-color: white !important;   color: #FF0000 !important;}





/* ================================================================================
   Grid
   ================================================================================ 
   Vierte Spalte is für den Anker gedacht, so kann er pro Breite anders platziert werden
*/

div#grid > div { padding: 0.2em 1em;}

div#main-anchor { visibility: hidden;}


@media screen and (min-width: 1000px){
    /* body { max-width: 1500px; margin: 0 auto; }*/

    div#nav > ul.itm-nav { margin: 4em 0 0 0; }

    div#grid { display: grid; grid-template-columns: 13em 1fr 17em;}

    div#aap-logo  { grid-area: 1/1/2/2;}
    div#aap-title { grid-area: 1/2/2/3; font-size: 300%; }
    div#aap-claim { grid-area: 1/3/2/4;}
    
    div#top-date { grid-area: 2/1/3/2; background-color: #f0ece3; }
    div#top-user { grid-area: 2/3/3/4; background-color: #f0ece3; }
    div#top-menu { grid-area: 2/2/3/3; background-color: #f0ece3; }

    div#main { grid-area: 3/1/4/4; }

    div#main-anchor { grid-area: 1/4/2/5;}    
}




@media screen and (min-width: 700px) and (max-width: 1000px){
    body { margin: 0; }

    div#nav > ul.itm-nav { margin: 4em 0 0 0; }

    div#grid { display: grid; grid-template-columns: 13em auto 17em 0em; }

    div#aap-logo  { grid-area: 1/1/2/2;}
    div#aap-title { grid-area: 1/2/2/4; font-size: 250%; }
    div#aap-claim { display: none;;}
    
    div#top-date { grid-area: 2/1/3/2; background-color: #f0ece3; }
    div#top-user { grid-area: 2/3/3/4; background-color: #f0ece3; }
    div#top-menu { grid-area: 2/2/3/3; background-color: #f0ece3; }

    div#main { grid-area: 3/2/4/4; }
    div#nav  { grid-area: 3/1/4/2; }

    div#main-anchor { grid-area: 1/4/2/5;}
}





@media screen and (max-width: 700px){
    body {text-align: center; margin: 0; }
    table { margin: auto;}
    dl.reports-short { max-width: 25em; margin: auto;}

    div#nav > ul.itm-nav > li.bid { max-width: 8em; margin: 0 auto;}
    
    div#grid { display: grid; grid-template-columns: auto auto 0em; }

    div#aap-logo  { display: none;}
    div#aap-title { grid-area: 1/1/2/3; font-size: 200%; }
    div#aap-claim { display: none;;}
    
    div#top-date { grid-area: 2/1/3/2; font-size: 75%; }
    div#top-user { grid-area: 2/2/3/3; font-size: 75%; }
    div#top-menu { grid-area: 3/1/4/3; background-color: #f0ece3; }

    div#main { grid-area: 5/1/6/3; }
    div#nav  { grid-area: 4/1/5/3; }

    div#main-anchor { grid-area: 5/3/6/4;}

}

/* --------------------------------------------------------------------------------
   Sub grid offers
   -------------------------------------------------------------------------------- */


@media screen and (min-width: 1200px){
    div#pol-grid { display: grid; grid-template-columns: auto auto auto;  }
    div#pol-var { grid-area: 1/1/2/2;}
    div#pol-lis { grid-area: 1/2/2/3;}
    div#pol-prm { grid-area: 1/3/2/4;}
}


@media screen and (min-width: 950px) and (max-width: 1200px){
    div#pol-grid { display: grid; grid-template-columns: auto auto;  }
    div#pol-var { grid-area: 1/1/2/2;}
    div#pol-lis { grid-area: 1/2/2/3;}
    div#pol-prm { grid-area: 2/1/3/3;}
}


@media screen and (max-width: 950px){
    div#pol-grid { display: grid; grid-template-columns: auto;  }
    div#pol-var { grid-area: 1/1/2/2;}
    div#pol-lis { grid-area: 2/1/3/2;}
    div#pol-prm { grid-area: 3/1/4/2;}

}




/* ================================================================================
   single elements
================================================================================ */



div.hscroll { width: 95vw; overflow-x: scroll; }



/* Show/Hide Buttons with triangel as front marker ...  ============================== */
a.btn-snh { padding: 0 1em; color: #9a2619; cursor: pointer; }
a.btn-snh::before{ content: "\25BA";} /* default: triangle right */
a.btn-snh.fold-closed::before{ conten:t "\25BA";} /* triangle right */
a.btn-snh.fold-open::before{ content: "\25BC";}   /* triangle down */




table.sessions { border-collapse: collapse;}
table.sessions td { padding: 0.2em 1em;}
table.sessions tr:nth-child(1) th { border-bottom: solid 1px black;}


form.login > p > span { display: inline-block; min-width: 8em;}


/* List of reports, by default hidden, using snh */
dl.reports-short > dt { margin-top: 1em; text-align: left;}
dl.reports-short > dd > table { display: none; text-align: left;}



div.rep-files > div > a { text-decoration: none; color: #0c3750;}



tr.hr { background-color: #eee; line-height: 0.2em;}

tr.hr td:empty:after { content: "\2002";}

table.val-sublist { border-collapse: collapse;}
table.val-sublist th { text-align: left; vertical-align: top; padding-right: 1em; color: #333333;}
table.val-sublist td { color: black; padding: 0.2em 0;}
table.val-sublist-M td { max-width: 10em; text-align: right;}
table.val-sublist-W td { max-width: 20em;}




table.pol-sub { border-collapse: collapse; border: solid 1px #333333;}
table.pol-sub td { padding: 0.1em 0.2em; text-align: center;}
table.pol-sub th { padding: 0.2em 0.4em; border-bottom: solid 1px #aaaaaa;}



table.pol-prm th { padding: 0.2em 0.4em; border-bottom: none;}
table.pol-prm tr:nth-child(1n+6) td { text-align: right; padding-right: 0.5em;} /* Money values */
table.pol-prm tr:nth-child(1n+7) th { font-weight: normal;}



.nothing { color: #666666; font-style: italic; font-size: 85%;}



ul.um-not { border-left: solid 23px red;}






#user-table { border-collapse: collapse;}
#user-table td { padding: 0.25em 0.5em; }
#user-table th { padding: 0.5em 0.5em; text-align: left; background-color:#f0ece3;}


#user-new > span { display: inline-block; margin: 0 0.25em 0 0.5em;}



/* ================================================================================
   New job /matching
   ================================================================================ */	


div.new-job { display: grid; grid-template-columns: 30em auto 200px; }
#mtc-head    { grid-area: 1 / 1 / span 1 / span 2; }
#mtc-per     { grid-area: 2 / 1 / span 1 / span 1; }
#mtc-res     { grid-area: 3 / 1 / span 1 / span 1; align-self: end;}
#mtc-list    { grid-area: 2 / 2 / span 2 / span 1; }
#mtc-thumb   { grid-area: 1 / 3 / span 4 / span 1; }
#mtc-preview { grid-area: 4 / 1 / span 1 / span 2; }

button.mtc-img { border: solid 1px #eee; width: 15em; background-color: transparent; text-align: left; }

div.new-job h2 { margin: 0.5em 0 0 0;}

#mtc-per table th { text-align: left; padding: 0.2em 1em 0.2em 0.5em;}
#mtc-res div.mtcr { margin: 2em 0;}
#mtc-res div.mtcr button {font-size: 125%;}

#mtc-thumb {position: relative; margin-top: 5px;}
#mtc-img { max-width: 200px; max-height: 800px; }
#mtc-sld { position: absolute; width: 10%; height: 10px; background-color: rgba(0,0,0,0.25); left: 0; top: 30px;  pointer-events: none; }
#mtc-preview { width: 95%; max-width: 1900px; height: 500px; border: solid 1px #173954;}

#mtc-table { border-collapse: collapse;}
#mtc-table td { font-size: 90%; padding: 0.1em 0.2em;}
#mtc-table td button { font-size: 90%; padding: 0.1em 0.25em;}
#mtc-table tr.sel td { background-color: #444; color: white;}
#mtc-table tr.sel td a { color: white;}
#mtc-table tr.sel button.mtc-img { color: white; }

#mtc-table button.mtct { border: solid 1px black; background-color: white; color: #444; margin: 0 0.2em;}
#mtc-table button.mtct.sel.mtct-nomatch { background-color: #F54C00; color: white;}
#mtc-table button.mtct.sel.mtct-match   { background-color: #74F200; color: black;}
#mtc-table button.mtct.sel.mtct-maybe   { background-color: #FFE359; color: black;}
#mtc-table button.mtct.sel.mtct-dupl    { background-color: #B5E0FF; color: black;}
#mtc-table button.mtct.sel.mtct-nopict  { background-color: #FFB8ED; color: black;}




/* ================================================================================
   Digitalization
   ================================================================================ */	

div.digit { display: grid; grid-template-columns: 15em auto 150px; }
#dig-head    { grid-area: 1 / 1 / span 1 / span 1; }
#dig-file    { grid-area: 1 / 2 / span 1 / span 1; padding-top: 1em;}
#dig-thumb   { grid-area: 1 / 3 / span 5 / span 1; }
#dig-exc     { grid-area: 2 / 1 / span 1 / span 2; padding: 0.5em 0;}
#dig-form    { grid-area: 3 / 1 / span 1 / span 2; padding: 0.5em 0 0 0;}
#dig-save    { grid-area: 4 / 1 / span 1 / span 2; padding: 0.5em 0;}
#dig-preview { grid-area: 5 / 1 / span 1 / span 2; }

#dig-head  h2 { margin: 0.25em 0 0 0;}
#dig-file > div { display: inline-block; margin: 0 3em 0 0; }

#dig-thumb {position: relative; }
#dig-img { max-width: 200px; max-height: 800px; }
#dig-sld { position: absolute; width: 10%; height: 10px; background-color: rgba(0,0,0,0.25); left: 0; top: 30px;  pointer-events: none; }
#dig-preview { width: 98%; max-width: 1900px; height: 500px; border: solid 1px #173954; margin: 0 auto;}


#dig-diag select { border: solid 1px black; width: 5em;}

#dig-status > span { display: inline-block; margin-right: 1em;}

div#zoom { display: inline-block; margin-left: 4em;}



#dig-exc { margin-bottom: 1em;}
#dig-exc > div { display: inline-block; margin: 0 1em; padding: 0.1em 0.5em; border: solid 1px #173954;}
#dig-exc > div > b {display: inline-block; margin: 0 0.2em 0 0.5em; }
#dig-exc > div > b:after { content: ':';}
#dig-exc > div > span { display: inline-block; padding: 0.1em 0.2em;  }
#dig-exc > div.le > button { margin-left: 1em;}

#dig-div { min-height: 16em; }
#dig-data td { vertical-align: top;}
#dig-data td:nth-child(3){ text-align: left; }
#dig-data th:nth-child(11){ text-align: left; }
#dig-data td:nth-child(11){ text-align: left; max-width: 40em; }

#pdf-result td { padding: 0.1em 0.5em; text-align: center;}
#done-result td { padding: 0.1em 0.5em; text-align: center;}
#exc-result td { padding: 0.1em 0.5em; text-align: center; vertical-align: top;}
#exc-result td > pre { margin: 0;}
#exc-result td:nth-child(7)>a { display: block;}



/* ================================================================================
   pdf sata show
   ================================================================================ */	

div.pdf { display: grid; grid-template-columns: 15em auto 200px; }
#pdf-head    { grid-area: 1 / 1 / span 1 / span 1; }
#pdf-file    { grid-area: 1 / 2 / span 1 / span 1; padding-top: 1em;}
#pdf-thumb   { grid-area: 1 / 3 / span 4 / span 1; }
#pdf-form    { grid-area: 2 / 1 / span 1 / span 2; padding: 0.5em 0;}
#pdf-status  { grid-area: 3 / 1 / span 1 / span 2; padding: 0.5em 0;}
#pdf-preview { grid-area: 4 / 1 / span 1 / span 2; }



#pdf-head  h2 { margin: 0.25em 0 0 0;}

#pdf-thumb {position: relative; }
#pdf-img { max-width: 200px; max-height: 800px; }
#pdf-sld { position: absolute; width: 10%; height: 10px; background-color: rgba(0,0,0,0.25); left: 0; top: 30px;  pointer-events: none; }
#pdf-preview { width: 98%; max-width: 1900px; height: 500px; border: solid 1px #173954;}


#pdf-status div.pdf-usr { display: inline-block;}
#pdf-status > div { display: inline-block;margin-right: 2em;}
#pdf-status > div > b { display: inline-block;margin-right: 1em;}
#pdf-status div.pdf-usr > span { display: inline-block; margin-left: 1em;}