/* intranet.css - Immo Verhaegen - laatste wijziging 14/02/2012 */
body{margin:0;padding:12px 0;background:#d4d4d4;font-family:Verdana,Tahoma,Geneva,sans-serif;font-size:12px;color:#222}
a{color:#003399}
a:visited{color:#551a8b}
a:hover{color:#cc0000}
h1{font-family:Tahoma,Verdana,sans-serif;font-size:17px;color:#7a1f2b;margin:0 0 10px;padding-bottom:4px;border-bottom:1px solid #ccc}
h2{font-family:Tahoma,Verdana,sans-serif;font-size:14px;margin:0 0 8px}
h3{font-size:12px;margin:0 0 6px}
#page{width:960px;margin:0 auto;background:#fff;border:1px solid #999}
#kop{background:#efefef;border-bottom:1px solid #bbb}
.koptbl{width:100%;border-collapse:collapse}
.koptbl td{padding:12px 14px;vertical-align:middle}
.logo a{text-decoration:none}
.logo .l1{font-family:Tahoma,sans-serif;font-weight:bold;font-size:22px;color:#7a1f2b}
.logo .l2{font-family:Tahoma,sans-serif;font-size:22px;color:#999}
.koprechts{text-align:right;font-weight:bold;color:#555;font-size:11px}
.koprechts span{font-weight:normal;color:#888}
#menu{width:100%;border-collapse:collapse;background:#666;border-bottom:3px solid #7a1f2b}
#menu td{padding:0;border-right:1px solid #888}
#menu td.rest{width:100%;border:0}
#menu a{display:block;padding:6px 16px;color:#fff;font-weight:bold;font-size:11px;text-decoration:none;white-space:nowrap}
#menu a:hover{background:#7d7d7d;text-decoration:underline}
#menu a.on{background:#7a1f2b}
#lay{width:100%;border-collapse:collapse}
#links{width:190px;vertical-align:top;background:#f4f4f4;border-right:1px solid #ccc;padding:10px}
#midden{vertical-align:top;padding:14px 18px 24px}
.box{border:1px solid #aaa;background:#fff}
.boxkop{background:#ddd;border-bottom:1px solid #aaa;font-weight:bold;padding:4px 6px;font-size:11px}
.snel{list-style:square;margin:6px 0;padding:0 6px 0 22px}
.snel li{margin:5px 0}
.snel span{display:block;color:#777;font-size:10px}
.melding{background:#ffffcc;border:1px solid #e0d080;padding:6px 8px;margin:10px 0 14px}
.kader{border:1px solid #ccc;padding:8px 12px;margin-bottom:10px;background:#fafafa}
.kader ul{margin:0;padding-left:18px}
.kader li{margin:4px 0}
.kader p{margin:0}
.grijs{color:#777;font-size:11px}
.nieuws{width:100%;border-collapse:collapse;border:1px solid #bbb}
.nieuws th{text-align:left;background:#e4e4e4;border:1px solid #bbb;padding:4px 8px;font-size:12px}
.nieuws td{border:1px solid #bbb;padding:6px 8px 12px}
#voet{border-top:1px solid #bbb;background:#efefef;color:#777;font-size:10px;text-align:center;padding:8px;line-height:1.6}
#voet a{color:#555}

/* aanmelden */
fieldset{border:1px solid #999;padding:8px 12px 12px;margin:0 0 8px;max-width:520px}
legend{font-weight:bold;color:#7a1f2b;padding:0 4px}
.lead{margin:2px 0 10px;color:#444}
.frm{border-collapse:collapse}
.frm td{padding:3px 6px 3px 0;vertical-align:middle}
.frm label{font-weight:bold}
.frm input{font-family:Verdana,sans-serif;font-size:12px;width:200px;padding:2px 3px;border:1px solid #7f9db9}
.frm input.code{width:110px;font-family:"Courier New",monospace;font-size:14px;letter-spacing:2px}
button{font-family:Tahoma,Verdana,sans-serif;font-size:11px;padding:2px 10px;cursor:pointer}
.pt-btn.busy{opacity:.6}
.pt-btn.busy::after{content:" ..."}
.pt-link{background:none;border:0;color:#003399;text-decoration:underline;padding:0 4px}
.pt-err{background:#ffe0e0;border:1px solid #cc0000;color:#cc0000;padding:4px 8px;margin-bottom:8px;font-weight:bold}
.pt-hint{background:#ffffcc;border:1px solid #e0d080;padding:5px 8px;margin-bottom:8px}
.pt-secure{font-size:11px;color:#666}
[hidden]{display:none!important}
body.signed-in .side{display:none}

/* na aanmelden */
.pt-bar{width:100%;border-collapse:collapse;background:#f4f4f4;border:1px solid #ccc;margin-bottom:10px}
.pt-bar td{padding:4px 8px}
.pt-bar .r{text-align:right}
.pt-tabs{border-bottom:1px solid #999;padding-left:4px;overflow-x:auto;white-space:nowrap}
.pt-tabs button{font-family:Verdana,sans-serif;font-size:11px;background:#e4e4e4;border:1px solid #999;border-bottom:0;margin-right:2px;padding:4px 10px;position:relative;top:1px;color:#333}
.pt-tabs button:hover{background:#f0f0f0}
.pt-tabs button.on{background:#fff;font-weight:bold;border-bottom:1px solid #fff}
.pt-panel{border:1px solid #999;border-top:0;padding:10px 12px}
.pt-title{color:#7a1f2b}
.oh-s{margin-bottom:14px}
.oh-s h3{background:#eee;border:1px solid #ccc;padding:3px 6px;margin-bottom:6px}
.oh-s p{margin:0 0 8px}
.oh-s ul{margin:0 0 8px;padding-left:18px}
.oh-tw{overflow-x:auto}
.oh-t{border-collapse:collapse!important;width:100%;font-size:11px!important;border:1px solid #999}
.oh-t th{background:#d8d8d8!important;border:1px solid #999!important;padding:3px 6px!important;font-weight:bold;text-align:left;white-space:nowrap}
.oh-t td{border:1px solid #bbb!important;padding:3px 6px!important}
.oh-t tbody tr:nth-child(even){background:#f3f3f3}
.oh-t tbody tr:hover{background:#ffffcc}
.oh-kv{display:grid;grid-template-columns:max-content 1fr;gap:3px 14px!important;border:1px solid #ccc;padding:6px 8px;background:#fafafa}
.oh-kv dt{font-weight:bold;color:#333!important}
.oh-kv dd{font-weight:normal!important}
.oh-noot{font-size:11px!important;color:#777!important}
.oh-msg{border-left:3px solid #7a1f2b!important}
.oh-links small{color:#777}
.oh-t.log td:nth-child(2){font-family:"Courier New",monospace;font-weight:bold}
.oh-t.log tr.newday td{border-top:2px solid #666!important}
.oh-t.log .dot{display:inline-block;width:7px;height:7px;margin-right:6px;background:#999;border:1px solid #555}
.oh-t.log tr.ev-open .dot{background:#2e9d2e}
.oh-t.log tr.ev-lock .dot{background:#666}
.oh-t.log tr.ev-bell .dot{background:#e0a000}
.oh-t.log tr.ev-code .dot{background:#3355cc}
.oh-t.log tr.ev-mode .dot{background:#8844aa}
.cctv-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.cctv{margin:0;border:1px solid #666;background:#000}
.cctv svg{display:block;width:100%;height:auto}
.cctv figcaption{color:#ccc;font-size:10px;padding:3px 6px;background:#222}

/* kleine schermen (toegevoegd 2019) */
@media (max-width:980px){
  body{padding:0}
  #page{width:auto;border:0}
  #lay,#lay>tbody,#lay>tbody>tr>td{display:block;width:auto}
  #lay>tbody>tr{display:flex;flex-direction:column}
  #links{order:2;border-right:0;border-top:1px solid #ccc}
  .koprechts{display:none}
  #menu,#menu tbody,#menu tr{display:block}
  #menu td{display:inline-block;border-right:1px solid #888}
  #menu td.rest{display:none}
  .frm,.frm tbody,.frm tr,.frm td{display:block}
  .frm input{width:100%;max-width:280px;font-size:16px}
  .cctv-grid{grid-template-columns:1fr}
  .oh-t.cards thead{display:none}
  .oh-t.cards,.oh-t.cards tbody,.oh-t.cards tr,.oh-t.cards td{display:block;width:auto}
  .oh-t.cards tr{border-bottom:1px solid #999;padding:3px 0}
  .oh-t.cards td{border:0!important;padding:1px 6px!important}
  .oh-t.cards td::before{content:attr(data-label) ": ";font-weight:bold;color:#555}
  .oh-t.cards td.empty{display:none}
  .oh-kv{grid-template-columns:1fr}
}
.nd{font-weight:normal;color:#777;margin-right:6px}
.lijsttbl{width:100%;border-collapse:collapse;border:1px solid #bbb;margin-bottom:8px}
.lijsttbl th{text-align:left;background:#e4e4e4;border:1px solid #bbb;padding:3px 6px;font-size:11px}
.lijsttbl td{border:1px solid #ccc;padding:3px 6px}
.lijsttbl tr:nth-child(odd) td{background:#f7f7f7}
.link-off{color:#666;text-decoration:underline dotted;cursor:not-allowed}