html, body {
    font-size: 12px;
    border: 0px;
    margin: 0px;
    padding: 0px;
}

body {
    background: #181818;
    color: #FFFFFF;
    font-family: var(--gc-font, verdana);
    margin: 0px;
    cursor: default;
    scrollbar-face-color: #181818;
    scrollbar-highlight-color: #323232;
    scrollbar-shadow-color: #323232;
    scrollbar-arrow-color: #ffffff;
    scrollbar-track-color: #181818;
    scrollbar-darkshadow-color: #323232;
    scrollbar-base-color: #181818;
}

img {
    max-width: 100%;
    height: auto;
}

td.subTitle {
    border: 0px solid #181818;
    background: #56638A;
    color: #FFFFFF;
    font-family: var(--gc-font, verdana);
    text-align: center;
}

td.profiel {
    font-size: 8pt;
    font-family: var(--gc-font, verdana);
    background-color: #252525;
}

td.menutitleOver {
    background: #56638A;
    color: #DADFF7;
    font-family: var(--gc-font, verdana);
    height: 25px;
    border: 1px solid #181818;
}

td.menutitleOff {
    background: #56638A;
    color: #FFFFFF;
    font-family: var(--gc-font, verdana);
    height: 25px;
    border: 1px solid #181818;
}
.grecaptcha-badge { 
    visibility: hidden !important;
}
.rc-anchor-invisible {
    visibility: hidden !important;
}
a:link {
    font-size: 12px;
    color: #ffffff;
    font-family: var(--gc-font, verdana);
    text-decoration: none;
}
a:visited {
    font-size: 12px;
    color: #ffffff;
    font-family: var(--gc-font, verdana);
    text-decoration: none;
}
a:active {
    font-size: 12px;
    color: #ffffff;
    font-family: var(--gc-font, verdana);
    text-decoration: none;
}
a:hover {
    font-size: 12px;
    color: #ffffff;
    font-family: var(--gc-font, verdana);
    text-decoration: none;
}

textarea {
    border-right: #000000 1px dotted;
    border-top: #000000 1px dotted;
    font-size: 12px;
    background: #464646;
    border-left: #000000 1px dotted;
    color: #ffffff;
    border-bottom: #000000 1px dotted;
}

input {
	padding-left: 5px;
	padding-right: 5px;
	padding-top: 3px;
	padding-bottom: 3px;
    font-family: var(--gc-font, verdana);
    color: #ffffff;
	border: 1px solid #000000;
	background-color: #323232;
    /*background: url(https://www.gangcity.nl/images/style/input.gif) repeat-x;*/

}

button {
    padding-left: 5px;
	padding-right: 5px;
	padding-top: 3px;
	padding-bottom: 3px;
    font-family: var(--gc-font, verdana);
    color: #ffffff;
	border: 1px solid #000000;
	background-color: #323232;
}

input.mobile {
	font-family: var(--gc-font, verdana);
	color: #ffffff;
	background-color: #323232;
	border: 2px solid #000000;
	width: 100%;
	font-size: 16px;
	padding: 4px;
}

.radio {
	margin-top: -1px;
	vertical-align: middle;
	border-radius: 50%;
	width: 20px;
	height: 20px
}

input:focus {
    border-left-color: orange;
    border-bottom-color: orange;
    border-top-color: orange;
    border-right-color: orange;
}

input.normalRadio {
    border-right: medium none;
    border-top: medium none;
    background: none transparent scroll repeat 0% 0%;
    border-left: medium none;
    border-bottom: medium none;
}

select {
	padding-left: 5px;
	padding-right: 5px;
	padding-top: 3px;
	padding-bottom: 3px;
    font-family: var(--gc-font, verdana);
    color: #ffffff;
	border: 1px solid #000000;
	background-color: #323232;
}

table {
    font-size: 12px;
    color: #ffffff;
    font-family: var(--gc-font, verdana);
}

table.main {
    font-size: 12px;
    background: #181818;
    color: #ffffff;
    font-family: var(--gc-font, verdana);
}

table.center {
    width: 90%;
    margin-left: 5%;
    margin-right: 5%;
}

table.half {
    width: 75%;
    margin-left: 12.5%;
    margin-right: 12.5%;
}

td.mainTxt {
    border-right: #181818 0px solid;
    border-top: #181818 0px solid;
    padding-left: 5px;
    
    border-left: #181818 1px solid;
    border-bottom: #181818 1px solid;
    font-family: var(--gc-font, verdana);
    text-align: center;
    background-color: #181818;
}
td.menu {
    background-color: #181818;
}
em {
    border-right: #181818 1px solid;
    padding-right: 2px;
    border-top: #181818 1px solid;
    padding-left: 2px;
    padding-bottom: 2px;
    border-left: #181818 1px solid;
    padding-top: 2px;
    border-bottom: #181818 1px solid;
    font-style: normal;
    background-color: white;
}

table.menu {
    font-size: 12px;
    font-family: var(--gc-font, verdana);
}
td.menuTitle {
    font-size: 12px;
    background: #9b2d2d;
    color: #000000;
    font-family: var(--gc-font, verdana);
    letter-spacing: 5px;
}
td.menuLink {
    font-size: 12px;
    background: #8c1e1e;
    color: #000000;
    font-family: var(--gc-font, verdana);
}
td.menuLink {
    background: #666666;
    color: #000000;
    font-family: var(--gc-font, verdana);
    
}
td.menuOver {
    background: #2b2b2b;
    color: #ffffff;
    font-family: var(--gc-font, verdana);
    border: 1px solid #181818;
}
td.menuOff {
    background: #252525;
    color: #ffffff;
    font-family: var(--gc-font, verdana);
    border: 1px solid #181818;
}

td.statusMenu {
    background: #252525;
    height: 30px;
    font-size: 12px;
    color: #ffffff;
    font-family: var(--gc-font, verdana);
    text-align: center;
    /*border: 1px solid #000000;*/
    border: 1px transparent #181818;
}

td.optieMenu {
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 5px;
    padding-bottom: 5px;
    background: #252525;
    overflow: hidden;
    height: 25px;
    font-size: 12px;
    color: #f7f7f7;
    font-family: var(--gc-font, verdana);
	text-align: left;
	line-height: 1.6;
    vertical-align: middle;
}

td.optieMenuTinted {
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 5px;
    padding-bottom: 5px;
    background: #212121;
    overflow: hidden;
    height: 25px;
    font-size: 12px;
    color: #f7f7f7;
    font-family: var(--gc-font, verdana);
	text-align: left;
	line-height: 1.6;
    vertical-align: middle;
}

td.optieMenuTitle {
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 5px;
    padding-bottom: 5px;
    background: #313131;
    overflow: hidden;
    height: 15px;
    font-size: 12px;
    color: #f7f7f7;
    font-family: var(--gc-font, verdana);
	text-align: left;
	line-height: 1.6;
    vertical-align: middle;
    font-weight: bold;
}

td.optieMenu img {
    vertical-align: middle;
}

td.rewardMenu {
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 5px;
    padding-bottom: 5px;
    background: #252525;
    font-size: 12px;
    color: #f7f7f7;
    font-family: var(--gc-font, verdana);
	text-align: left;
	line-height: 1.6;
}

td.mobileMenu {
	border-spacing: 15px;
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 10px;
    padding-bottom: 10px;
    background: #252525;
    height: 25px;
    font-size: 12px;
    color: #f7f7f7;
    font-family: var(--gc-font, verdana);
    text-align: left;
    -webkit-appearance: none;
    border-radius: 0;
}

td.mobile {
	border-spacing: 15px;
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 10px;
    padding-bottom: 10px;
    background: #252525;
    height: 35px;
    font-size: 35px;
    color: #f7f7f7;
    font-family: var(--gc-font, verdana);
    text-align: left;
    vertical-align: middle;
    -webkit-appearance: none;
    border-radius: 0;
}

td.tableMenuLeft {
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 5px;
    padding-bottom: 5px;
    background: #252525;
    height: 25px;
    font-size: 12px;
    color: #f7f7f7;
    font-family: var(--gc-font, verdana);
    text-align: left;
}

td.tableMenuRight {
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 5px;
    padding-bottom: 5px;
    background: #252525;
    height: 25px;
    font-size: 12px;
    color: #f7f7f7;
    font-family: var(--gc-font, verdana);
    text-align: right;
}

td.tableMenuCenter {
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 5px;
    padding-bottom: 5px;
    background: #252525;
    height: 25px;
    font-size: 12px;
    color: #f7f7f7;
    font-family: var(--gc-font, verdana);
    text-align: center;
}

td.captchaMenu {
    padding-top: 5px;
    padding-bottom: 5px;
    padding-left: 10px;
    padding-right: 5px;
    background: #252525;
    height: 25px;
    font-size: 12px;
    color: #f7f7f7;
    font-family: var(--gc-font, verdana);
    text-align: left;
}

a.menu:link {
    font-size: 12px;
    width: 120px;
    cursor: default;
    color: #000000;
    font-family: var(--gc-font, verdana);
    text-decoration: none;
}

a.menu:visited {
    font-size: 12px;
    width: 120px;
    cursor: default;
    color: #000000;
    font-family: var(--gc-font, verdana);
    text-decoration: none;
}
a.menu:active {
    font-size: 12px;
    width: 120px;
    cursor: default;
    color: #000000;
    font-family: var(--gc-font, verdana);
    text-decoration: none;
}
a.menu:hover {
    font-size: 12px;
    width: 120px;
    cursor: default;
    color: #e15d5d;
    font-family: var(--gc-font, verdana);
    text-decoration: underline;
}

.menuLeft {
    float: left;
    width: 12.5%;
    height: 100%;
    display: block;
}
.menuRight {
    float: right;
    width: 12.5%;
    height: 100%;
    display: block;
}
.mainContent {
    float: left;
    width: 75%;
    height: 100%;
    display: block;
}
@media (hover: none) and (pointer: coarse) {
    ::-webkit-scrollbar {
        display: none;
    }
}

p.message {
    color: #000000;
    border: 1px solid #dada0f;
    background-color: #ffffcc;
    padding: 5px;
    line-height: 15px;
    margin-bottom: 10px;
}
ul.message {
    border: 1px solid yellow;
    background-color: #ffffcc;
    padding: 5px;
    line-height: 15px;
    margin-bottom: 10px;
}
p.success {
    color: #000000;
    border: 1px solid green;
    background-color: #ccffcc;
}
p.error {
    color: #000000;
    border: 1px solid red;
    background-color: #ffcccc;
}
p.message a,
p.message a:visited {
    font-weight: bold;
    color: #006db9;
}

::-webkit-scrollbar {
    height: 11px;
    width: 11px;
    background: #181818;
}
::-webkit-scrollbar-thumb {
    background: #303030;
    -webkit-border-radius: 1ex;
    -webkit-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.75);
}
::-webkit-scrollbar-corner {
    background: #202020;
}

/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
input[type=number] {
  -moz-appearance:textfield;
}

input[type=mobile_text] {
    width: 100%;
    padding: 12px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
    resize: vertical;
    font-size: 25px;
    -webkit-appearance: none;
    border-radius: 0;
}

input[type=password_mobile] {
    width: 100%;
    padding: 12px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
    resize: vertical;
    font-size: 25px;
    -webkit-text-security: disc;
    -webkit-appearance: none;
    border-radius: 0;
}

/* Menu badge indicators */
.gc-badge {
    display: inline-block;
    background: #FF0000;
    color: #fff;
    border-radius: 8px;
    padding: 1px 5px;
    font-size: 10px;
    line-height: 1;
    margin-left: 4px;
    vertical-align: middle;
    position: relative;
    top: -1px;
}
.gc-badge:empty { display: none; }
.gc-badge-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    display: inline-block;
    padding: 0;
    background: #FF0000;
    margin-left: 4px;
    vertical-align: middle;
}

/* ── Checkbox group (matching .radio-group) ── */
.checkbox-group                                    { display:flex; gap:8px; flex-wrap:wrap; margin-top:8px; }
.checkbox-group input[type="checkbox"]             { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.checkbox-group label                              { display:inline-flex; align-items:center; gap:6px; padding:5px 12px 5px 10px; background:transparent; border:1.5px solid #444; border-radius:4px; cursor:pointer; color:#aaa; font-size:13px; transition:border-color .15s,color .15s; user-select:none; }
.checkbox-group label::before                      { content:''; display:inline-block; width:12px; height:12px; border:2px solid #555; border-radius:4px; transition:background .15s,border-color .15s; flex-shrink:0; }
.checkbox-group label:hover                        { border-color:#777; color:#ccc; }
.checkbox-group label:hover::before                { border-color:#777; }
.checkbox-group input[type="checkbox"]:checked + label          { border-color:#A9D2D5; color:#A9D2D5; }
.checkbox-group input[type="checkbox"]:checked + label::before  { background:#A9D2D5; border-color:#A9D2D5; }
.checkbox-group input[type="checkbox"]:focus-visible + label    { outline:2px solid #A9D2D5; outline-offset:2px; }

@media (max-width: 500px) {
    /**
    img {
        display: none;
    }
	img.captcha,
	img.icon,
	img.sym-sm {
		display: inline;
	}
    .gc-img-blend {
        display: none;
    }
    **/
    table.center {
        width: 100%;
        margin-left: 0;
        margin-right: 0;
    }
    table.half {
        width: 100%;
        margin-left: 0;
        margin-right: 0;
    }
    td.optieMenu,
    td.optieMenuTinted,
    td.optieMenuTitle {
        height: auto;
    }
}

/* ── Styled images (images/styled/*.webp) ──
   Wrapper met radial-overlay die blendt naar td.optieMenu-bg (#252525).
   Geen mask/cutout — pure kleur-blend, dus geen zichtbare randvorm.
   Gebruik: <span class="gc-img-blend"><img src="..." alt=".."></span> */
.gc-img-blend {
    display: block;
    position: relative;
    margin: 0 auto;
    max-width: 300px;
    line-height: 0;
    border-radius: 3px;
    overflow: hidden;
}
.gc-img-blend img {
    display: block;
    width: 100%;
    height: auto;
    filter: brightness(0.92) saturate(0.9) contrast(1.05);
}
.gc-img-blend::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(
        ellipse closest-side at center,
        transparent 60%,
        rgba(37,37,37,0.25) 85%,
        #252525 100%
    );
}
/* Wide variant voor horizontale (16:9) plaatjes — rechthoekige fade ipv ovaal */
.gc-img-blend.wide { max-width: clamp(450px, 37vw, 700px); }
.gc-img-blend.wide::after {
    background:
        linear-gradient(to right,  #252525 0%, transparent 20%, transparent 80%, #252525 100%),
        linear-gradient(to bottom, #252525 0%, transparent 20%, transparent 80%, #252525 100%);
}

/* Variant voor portret-plaatjes (stadscontacten): fade alleen boven/onder */
.gc-img-fade-v {
    display: block;
    margin: 0 auto;
    max-width: 300px;
    width: 100%;
    height: auto;
    border-radius: 3px;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 15%, #000 85%, transparent 100%);
            mask-image: linear-gradient(to bottom, transparent 0%, #000 15%, #000 85%, transparent 100%);
    filter: brightness(0.92) saturate(0.9) contrast(1.05);
}