@import url('nav.css');
@import url('ledenpopup.css');
@import url('buttons.css');

.badge{display:inline-block;padding:3px 8px;border-radius:999px;font-size:12px;line-height:1;border:1px solid transparent}
.badge--onbeantwoord{color:#9ecbff;background:rgba(28,84,150,.18);border-color:rgba(28,84,150,.35)}
.badge--beantwoord{color:#b4f5c8;background:rgba(22,111,63,.18);border-color:rgba(22,111,63,.35)}
.badge--afgekeurd{color:#ffb6b6;background:rgba(150,28,28,.18);border-color:rgba(150,28,28,.35)}
.badge--opgelost{color:#b9fff6;background:rgba(15,112,102,.18);border-color:rgba(15,112,102,.35)}
.badge--open{color:#cfe3ff;background:rgba(31,80,148,.18);border-color:rgba(31,80,148,.35)}
.badge--wacht_op_admin{color:#e0d0ff;background:rgba(84,56,150,.18);border-color:rgba(84,56,150,.35)}
.badge--geëscaleerd{color:#ffd9a3;background:rgba(160,96,12,.18);border-color:rgba(160,96,12,.35)}


/* ### general ### */
.captchaS { border:1px solid #ffffff; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; margin-top: 10px; }
.icon{width:20px;height:18px;text-align:center;vertical-align:middle;}
.left{float:right;width:110px;}

strong { color: #4a2500; }

/* ### FORUM ### */
.forum-topic{width:568px;padding:5px;height:auto;margin:10px;}
.forum-user{float:left;width:115px;margin-right:15px;}
.forum-bericht-start{float:left;min-height:170px;line-height:18px;width:366px;padding:10px;background:url('../images/forum/forum-start.png') no-repeat;border:1px solid #ad9174;-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px;margin-bottom:15px;-webkit-box-shadow:0px 0px 3px 3px #ccc09d;box-shadow:0px 0px 3px 3px #ccc09d;word-wrap:break-word;}
.forum-bericht-react{float:left;min-height:170px;width:366px;padding:10px;background:url('../images/forum/forum-react.png') no-repeat;border:1px solid #ad9174;-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px;margin-bottom:15px;word-wrap:break-word;}
.forum-topic .admin{border:1px solid #de0301;-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px;margin-bottom:15px;-webkit-box-shadow:0px 0px 3px 3px #de0301;box-shadow:0px 0px 3px 3px #fe7c7b;color:#de0301;word-wrap:break-word;}
.left{float:left;height:25px;}
.right{float:right;height:25px;}
.forum-topic .forum-bericht{float:left;width:465px;margin-right:15px;border:1px solid #ad9174;padding:5px;text-align:center;border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;-khtml-border-radius:5px;}
.forum-topic .forum-admin{float:right;width:30px;border:1px solid #b2987b;padding:5px;text-align:center;border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;-khtml-border-radius:5px;}
.forum-topic .forum-admin:hover{background-color:#92785d;}
.forum-topic .forum-admin img{padding:5px;}
img.forumavatar{width:105px;height:105px;padding:5px; -moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px;border:1px solid #ccc;}
img.forumavatar:hover{border:1px solid #92785d;}

font.groen 		{color: #008F10;}
font.rood 		{color: #bb0000;}
font.blauw 		{color: #0055AA;}
font.paars 		{color: #AA0088;}
font.grijs 		{color: #6A6A6A;}

.drugs-img {float:left; width: 130px; height: 100px; margin-right: 10px; }
.drugs-tekst {float:left; width: auto; height: 120px;}
.drugs-img .img { width: 100px; height: 100px;border: 1px solid #CCC; padding: 5px; -moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px;}
.drugs-img .img:hover {width: 100px; height: 100px;border: 1px solid #fb9e06; padding: 5px; -moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px;}


.gunTabel { margin:0px;padding:0px;width:100%;border:1px solid #bda78c;	-moz-border-radius-bottomleft:5px;-webkit-border-bottom-left-radius:5px;border-bottom-left-radius:5px;	-moz-border-radius-bottomright:5px;-webkit-border-bottom-right-radius:5px;border-bottom-right-radius:5px;	-moz-border-radius-topright:5px;-webkit-border-top-right-radius:5px;border-top-right-radius:5px;	-moz-border-radius-topleft:5px;-webkit-border-top-left-radius:5px;border-top-left-radius:5px;}
.gunTabel table{border-collapse: collapse; border-spacing: 0;width:100%;height:100%;margin:0px;padding:0px;}
.gunTabel tr:last-child td:last-child {-moz-border-radius-bottomright:5px;-webkit-border-bottom-right-radius:5px;border-bottom-right-radius:5px;}
.gunTabel table tr:first-child td:first-child {-moz-border-radius-topleft:5px;-webkit-border-top-left-radius:5px;border-top-left-radius:5px;}
.gunTabel table tr:first-child td:last-child {-moz-border-radius-topright:5px;-webkit-border-top-right-radius:5px;border-top-right-radius:5px;}
.gunTabel tr:last-child td:first-child{-moz-border-radius-bottomleft:5px;-webkit-border-bottom-left-radius:5px;border-bottom-left-radius:5px;}
.gunTabel tr:hover td{	background-color:#af9477; color: #fff;}
.gunTabel tr:hover td a{background-color:#af9477; color: #fff;}
.gunTabel tr:nth-child(odd){ background-color:#e2dac2; }
.gunTabel tr:nth-child(even){ background-color:#ffffff; }
.gunTabel td{vertical-align:middle;border:1px solid #bda78c;border-width:0px 1px 1px 0px;text-align:left;padding:5px;font-size:11px;color:#000000;}
.gunTabel tr:last-child td{border-width:0px 1px 0px 0px;}
.gunTabel tr td:last-child{border-width:0px 0px 1px 0px;}
.gunTabel tr:last-child td:last-child{	border-width:0px 0px 0px 0px;}
.gunTabel tr:first-child td:last-child{border-width:0px 0px 1px 1px;}
.gunTabel td.icon{ text-align: center;}
.gunTabel .extraMargin { margin-top: 30px;margin-bottom: 15px; }

.credits { width: 100%; margin: 0 auto; }
.cr-box { float: left; border: 1px solid #af9477; width: 172px; min-height: 100px; margin: 5px; padding: 5px;-webkit-border-radius: 5px;-moz-border-radius: 5px;border-radius: 5px;}
.cr-box .cr-titel { font-size: 12px; font-weight: 600; }
.cr-box .button .smalll { font-size: 11px; margin: 0px; margin-top: 10px; width: 26%;}

/* ### NIEUWS ### */
.nieuws { width: 100%; margin:0px; height: auto; clear: both; display: inline-block;}

/* ### PAGINA SYSTEM ### */
.syspagina { width: 100%; margin-top: 25px;}
.syspagina .pagina-tekst { width: 110px; height: 25px; }
.syspagina .pagina-nummer { }


/* ### PROFIEL BEHEER ###*/
div.profiel-blok-left { width: 290px; height: auto; float: left;}
div.profiel-blok-right { width: 290px; height: auto; float: right; }


/* ### POPUP LEDEN ### */
#personPopupContainer { position:absolute; display:none;}
#personPopupContent{background-color: #c1ac91;min-width: 174px;min-height: 50px;-webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px;}
.personPopupPopup .personPopupImage{margin: 5px;margin-right: 15px;}

/* ### NIEUWS ### */
.nieuwsBericht { height: auto; width: 100%; overflow: hidden;}
.nieuwsBericht h1.nieuwsTitel { font-size: 18px; }
.nieuwsBericht .nieuwst { width: 100%; height: 22px;border-bottom: 1px dotted #000; }
.clear{clear:both;height:1px;}

.no-margin { margin:0px; }

/* ### TABEL ### */
.tabelSpeler tr.trInfo { line-height:18px; width: 220px; }
.tabelSpeler tr.trInfo td.icon { width: 20px; height: 20px; }
.tabelSpeler tr.trInfo td { width: 200px; }
.tabelSpeler tr.tdAvatar div.divAvatar { width:105px;height:105px;padding:5px; -moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px;border:1px solid #ccc; }

.tbLinks td { background-color: #bba489; padding: 5px; border:1px solid #92785d; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px;}
.tbLinks td:hover { background-color: #92785d; border:1px solid #92785d;}

.profiel-links { overflow: hidden; float: left; width: 120px;}
.profiel-links ol { list-style: none; width: 100px; margin-bottom: 10px; }
.profiel-links ol li { width: 100px; background-color: #bba489; padding: 5px; margin-bottom: 3px;  border:1px solid #92785d; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; }
.profiel-links ol li:hover { background-color: #92785d; border:1px solid #92785d; }

.profiel { overflow: hidden; float: right; width: 460px; }

.tbLinks { padding-top: 10px; }

/*** INPUT ***/
.reg input { 
    padding: 9px; 
    border: solid 1px #E5E5E5; 
    outline: 0; 
    font: normal 13px/100% Verdana, Tahoma, sans-serif; 
    width: 200px; 
    background: #FFFFFF url('bg_form.png') left top repeat-x; 
    background: -webkit-gradient(linear, left top, left 25, from(#FFFFFF), color-stop(4%, #EEEEEE), to(#FFFFFF)); 
    background: -moz-linear-gradient(top, #FFFFFF, #EEEEEE 1px, #FFFFFF 25px); 
    box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px; 
    -moz-box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px; 
    -webkit-box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px; 
	-webkit-border-radius: 5px 5px 5px 5px;
	border-radius: 5px 5px 5px 5px;
    } 
   
.reg input:hover, .reg input:focus { 
    border-color: #C9C9C9; 
    -webkit-box-shadow: rgba(0, 0, 0, 0.15) 0px 0px 8px; 
    } 
   
.form label { 
    margin-left: 10px; 
    color: #999999; 
    } 
   
.submit input { 
    width: auto; 
    padding: 9px 15px; 
    background: #617798; 
    border: 0; 
    font-size: 14px; 
    color: #FFFFFF; 
    -moz-border-radius: 5px; 
    -webkit-border-radius: 5px; 
    }
	
:-moz-placeholder { color: grey; } 
::-webkit-input-placeholder { color: grey; }
*:focus {outline: none;}

.required_notification {font-size: 11px;}
.reg-form ol { width:580px; list-style: none; list-style-type:none; list-style-position:outside; margin:0px; padding:0px;}
.reg-form li{ padding:6px; position:relative;}
.reg-form label { width:100px; margin-top: 3px; display:inline-block; float:left; padding:3px; }
.reg-form input[type="text"], .reg-form input[type="password"], .reg-form input[type="email"], .reg-form input[type="date"]  { height:20px; width:180px; padding:5px 8px; }
.reg-form textarea {padding:8px; width:300px;}
.reg-form select { width: 197px; padding: 5px 8px; height: 30px;}
.reg-form button {margin-left:106px;}
.reg-form input, .reg-form textarea { border:1px solid #aaa; box-shadow: 0px 0px 3px #ccc, 0 10px 15px #eee inset; border-radius:2px; -webkit-border-radius: 5px 5px 5px 5px;border-radius: 5px 5px 5px 5px;}
.reg-form input:focus { background: #fff; border:1px solid #555; box-shadow: 0 0 3px #aaa;  }
.reg-form input:focus {}
::-webkit-validation-bubble-message { padding: 1em; }

.reg-mail ol { width:580px; list-style: none; list-style-type:none; list-style-position:outside; margin:0px; padding:0px;}
.reg-mail li{ padding:6px; position:relative;}
.reg-mail label { width:100px; margin-top: 3px; display:inline-block; float:left; padding:3px; }
.reg-mail input[type="text"], .reg-form input[type="password"], .reg-form input[type="email"]  { height:20px; width:180px; padding:5px 8px; }
.reg-mail textarea {padding:8px; width:300px;}
.reg-mail select { width: 197px; padding: 5px 8px; height: 30px;}
.reg-mail button {margin-left:0;}
.reg-form input, .reg-form textarea { border:1px solid #aaa; box-shadow: 0px 0px 3px #ccc, 0 10px 15px #eee inset; border-radius:2px; -webkit-border-radius: 5px 5px 5px 5px;border-radius: 5px 5px 5px 5px;}
.reg-form input:focus { background: #fff; border:1px solid #555; box-shadow: 0 0 3px #aaa;  }
.reg-form input:focus {}

.inlog-form ol { width:280px; list-style: none; list-style-type:none; list-style-position:outside; margin:0px; padding:0px;}
.inlog-form li{ padding:3px; position:relative;}
.inlog-form label { width:100px; margin-top: 3px; display:inline-block; float:left; padding:3px; }
.inlog-form input[type="text"], .inlog-form input[type="password"], .inlog-form input[type="email"] { height:20px; width:140px; padding:5px 8px; }
.inlog-form select { width: 197px; padding: 5px 8px; height: 32px;}
.inlog-form button {margin-left:106px;}
.inlog-form input { border:1px solid #aaa; box-shadow: 0px 0px 3px #ccc, 0 10px 15px #eee inset; border-radius:2px; -webkit-border-radius: 5px 5px 5px 5px;border-radius: 5px 5px 5px 5px;}
.inlog-form input:focus { background: #fff; border:1px solid #555; box-shadow: 0 0 3px #aaa;  }
.inlog-form input:focus {}
::-webkit-validation-bubble-message { padding: 1em; }

/* ### ADMIN ICONS ### */
.admin-menu { margin-bottom: 10px; display:block;  }
.admin-menu ul li, .admin-menu ul li a{ display: block; text-align:center; -webkit-border-radius: 5px 5px 5px 5px; border-radius: 5px 5px 5px 5px; color:#454545; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25); background: #ecf0f1; border: 0; border-bottom: 2px solid #dadedf; -webkit-box-shadow: inset 0 -2px #dadedf; box-shadow: inset 0 -2px #dadedf; }
.admin-tile { display:flex; align-items:center; padding:6px 5px; }
.admin-menu ul{ 
  list-style:none; 
  padding:0; 
  margin:0; 
  display:flex; 
  flex-wrap:wrap; 
  gap:10px;          
}
.admin-menu ul li{ margin:0; padding:0; }

/* tegel */
.admin-menu ul li a{
  display:flex; 
  flex-direction:column;            /* icoon boven, tekst onder */
  justify-content:center; 
  align-items:center;
  gap:0px;                          /* ruimte tussen icoon en label */
  width:75px; 
  height:56px;
  text-align:center;
  color:#454545;
  text-decoration:none;
  border-radius:6px;
  background:#ecf0f1;
  border:0;
  border-bottom:2px solid #dadedf;
  box-shadow: inset 0 -2px #dadedf;
  padding:8px 8px;
}
.admin-menu ul li a:hover{
  border-bottom-color:#d03600;
  box-shadow: inset 0 -2px #fa4100;
}

/* Material Symbols (als je Google-icons gebruikt) */
.material-symbols-outlined{
  font-variation-settings:'FILL' 0,'wght' 400,'GRAD' 0,'opsz' 28;
  font-size:28px;
  line-height:1;
  color:#4b2e16; /* bruin zoals je andere tegels */
}
.admin-menu ul li a:hover .material-symbols-outlined{ color:#6a3a15; }


.admin-tile .material-symbols-outlined { font-size:28px; }
.bekijk-titel { width: 100%; height: 25px; display: block; margin-top: 20px; margin-bottom: 5px; font-size: 15px; padding-top: 15px; clear:both; border-bottom: 1px solid #a48768; -moz-box-shadow: inset 0 1px 0 0 #d3b697; -webkit-box-shadow: 0 1px 0 0 #d3b697; box-shadow: 0 1px 0 0 #d3b697;}
.bekijk-titel .right { float: right; margin-top: -25px; }
.bekijk-titel strong {  }

.TabActief		{ background-color: #9b8062; font-weight: bold;}
.Tab			{ border-bottom-style: dotted; border-bottom-width: 1px; border-bottom-color: #333333; height: 25px;}


/* Container */
.crime-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}
@media (max-width: 720px){
  .crime-grid { grid-template-columns: 1fr; }
}
/* Grid met 2 kolommen; 1 kolom op mobiel */
.crime-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:16px;
}
@media (max-width:720px){ .crime-grid{ grid-template-columns:1fr; } }

/* Card als klikbare label (hele card selecteert radio) */

/* Volledige label als afbeelding */
/* Volledige label = achtergrondfoto met opacity */
.crime-card{
  position: relative;
  display: block;
  min-height: 150px;
  border: 1px solid #c9b8a7;
  border-radius: 10px;
  overflow: hidden;
  background: #9b8062;                 /* basiskleur achter de foto */
  cursor: pointer;
}

/* Alleen de AFBEELDING met opacity (tekst blijft 100%) */
.crime-card::before{
  content: "";
  position: absolute; inset: 0;
  background: var(--bg) center/cover no-repeat;  /* foto */
  opacity: var(--img-opacity, .025);              /* pas aan (0–1) */
}

/* Content en radio erboven */
.crime-content{
  position: relative; z-index: 1;
  padding: 12px 44px 14px 12px;
  color: #fff;
}
.crime-title{ font-weight:700; font-size:14px; margin:0 0 6px; color:#fff; }
.crime-stats{
  display:grid; grid-template-columns:20px 1fr max-content;
  column-gap:8px; row-gap:6px; font-size:13px;
}
.crime-stats .val{ font-weight:700; }
.crime-icon{ width:16px; height:16px; filter: drop-shadow(0 0 1px rgba(0,0,0,.6)); }

.crime-radio{ position:absolute; right:10px; bottom:10px; z-index:1; margin:0; }

/* content padding, geen ruimte meer voor radio rechtsonder */
.crime-content{
  position: relative; z-index: 1;
  padding: 12px;                 /* was: 12px 44px 14px 12px */
  color: #fff;
}

/* header met radio + titel naast elkaar */
.crime-header{
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 5px;
  margin-bottom: 12px;
}

/* radio niet meer absoluut positioneren */
.crime-radio{
  position: static;
  margin: 5px 5px;
}

/* (optioneel) highlight als gekozen */
.crime-card:has(.crime-radio:checked){
  box-shadow: 0 0 0 2px rgba(255,255,255,.35) inset;
  border-color: #e6d7c6;
}


/* Tabel */
.table-wrap{padding:0}
.table{width:100%;border-collapse:collapse}
.table th,.table td{padding:9px 10px; border-bottom:1px solid var(--line)}
.table thead th{background:var(--bg-darker); text-align:left; font-weight:700}
.table tbody tr{background:var(--row)}
.table tbody tr:nth-child(2n){background:var(--row-alt)}
.table tbody tr:hover{background:var(--row-hover)}
.owner{display:flex;align-items:center;gap:8px}
.owner .avatar{width:16px;height:16px;border-radius:3px; background:#2e2e2e; display:inline-block}
.star{color:#2b2000;background:var(--badge);border-radius:3px;padding:1px 4px;font-size:11px;line-height:1;margin-left:4px}
.badge-city{display:inline-block;padding:2px 6px;border:1px solid var(--line);border-radius:3px;background:rgba(0,0,0,.1);margin-left:6px;font-size:11px}
.small{font-size:12px}

/* Profiel -> image en text naast elkaar */
.gm-value {
    display: inline-flex;
    align-items: center;
}
.gm-value img {
    vertical-align: middle;
}
.gm-value strong {
    margin-left: 5px;
}

img.IMGrand {
    margin-left: 10px;
    width: 150px;
    height: 150px;
    margin-top: 10px;
    padding: 5px;
    border: 1px solid #e9e9e9;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    -khtml-border-radius: 5px;
}

img.IMGrand:hover {
    width: 150px;
    height: 150px;
    padding: 5px;
    border: 1px solid #2b2000;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    -khtml-border-radius: 5px;
}

.screenblock {
    text-align: center;
    margin: 0 auto;
}

.screenblock a {
    display: inline-block; /* Zorgt ervoor dat de links als blokken naast elkaar staan */
    margin: 0 5px; /* Optionele ruimte tussen de afbeeldingen */
}

.overval-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;            
}

.overval-grid .tabel-50 {
  flex: 1 1 calc(50% - 3px);
  box-sizing: border-box;
}

/* gelijke hoogtes (optioneel) */
.overval-grid .tableF { height: 100%; display: flex; }
.overval-grid table { width: 100%; }


.gm-achievements-row {
    display: flex;
    gap: 8px;
    align-items: flex-end;
}

/* Buitenste wrapper */
.gm-achievement {
    width: 50px;
    height: 90px;
    position: relative;
    cursor: default;
}

/* De "vlag/schild"-vorm */
.gm-achievement-inner {
    width: 100%;
    height: 100%;
    border: 2px solid #d9c38d;
    background: #4b4640;
    clip-path: polygon(0 0, 100% 0, 100% 75%, 50% 100%, 0 75%);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    padding-top: 8px;
    padding-bottom: 4px;
    box-sizing: border-box;
}

/* Kleuren per "tier" */
.gm-achievement-bruin .gm-achievement-inner { background: #4c3b31; }
.gm-achievement-blauw .gm-achievement-inner { background: #395266; }
.gm-achievement-paars .gm-achievement-inner { background: #5b3b64; }
.gm-achievement-goud  .gm-achievement-inner { background: #7a5e1a; }

/* Icon */
.gm-achievement-icon img {
    width: 26px;
    height: 26px;
    filter: drop-shadow(0 0 2px rgba(0,0,0,0.6));
}

/* Nummer onderaan (niveau) */
.gm-achievement-level {
    font-size: 14px;
    font-weight: bold;
    color: #f1e4c5;
}

/* Locked (grijs maken) */
.gm-achievement-locked .gm-achievement-inner {
    filter: grayscale(100%) brightness(0.6);
    border-color: #666;
}