@import url("/shared/styles/ett.css?v=20230111");

@font-face {
	font-family: 'cnt_gothic_bd';
	src: url('/shared/fonts/cnt_gothic_bd.TTF') format('truetype');		
}

@font-face {
	font-family: 'anr';
	src: url('/shared/fonts/AvenirNext-Regular.ttf');
}

@font-face {
	font-family: 'anm';
	src: url('/shared/fonts/AvenirNext-Medium.ttf');
}

@font-face {
	font-family: 'anb';
	src: url('/shared/fonts/AvenirNext-Bold.ttf');
}

@font-face {
	font-family: 'myriadpro';
	src: url('/shared/fonts/MyriadPro_regular.otf');
}

@font-face {
	font-family: 'myriadpro_bold';
	src: url('/shared/fonts/MyriadPro_Bold.otf');
}

@font-face {
	font-family: 'veramono';
	src:url('/shared/fonts/Android_VeraMono.woff') format('woff');
}

@font-face {
	font-family: 'caros';
	src: url('/shared/fonts/CarosSoft.otf');
}

@font-face {
	font-family: 'caros_b';
	src: url('/shared/fonts/CarosSoftBold.otf');
}

@font-face {
	font-family: 'caros_eb';
	src: url('/shared/fonts/CarosSoftExtraBold.otf');
}

/* omdat kopjes met arial niet echt bold zijn */
@font-face {
	font-family: 'roboto_b';
	src: url('/shared/fonts/Roboto-Bold.ttf');
}

/* test
7-1-2024 ik denk het lettertype op het vernieuwde Wielerflits forum
*/
@font-face {
	font-family: 'sans';
	src: url('/shared/fonts/open-sans-latin-400-normal.woff2');
}


/* variabelen */
:root {
  --color-default: #454e59;
  --color-forum: #373e47;
}

body {
	background-color: #f3f3f3;
	margin: 0px;	
	font-size: 10pt;
	font-family: Arial, Verdana, Helvetica, sans-serif;	
}

body a {
	color: #000000;
	text-decoration: none;
}

body a:hover {
	/*
body a:not(.nohover):hover {		
body:not(.nohover a) a:hover {	
	color: #006699;
	color:red;
	*/
	color: #006699;	
}

input {
	/* 2024 ivm onbedoeld times new roman bij suggesties popup */
	font-size: 10pt;
	font-family: Arial, Verdana, Helvetica, sans-serif;	
}

input[type=checkbox], input[type=radio] {
    accent-color: #767676;
}

.td_img img, iframe {
	/* ivm HTML5 doc declaratie */
	display:block;
}

img {
	border: 0px;
}

.pointer {
	/* voor elememnten die clickable zijn */
    cursor: pointer;
}

/* kolom 1 */
.content_box {
/* 
Wanneer geen tabel gebruikt wordt, zoals bij het forum
Zorgt voor ruimte tussen de tekst en de rand bij een stenen achtergrond.
*/
	position:relative;
	padding:2px;
}

.content_box a {
	/*
	als dit werkt kan .link_blauw vervallen
	kan niet vanwege forum
	color: #0092F2;		
	*/
}

.content_box .p1 {
	/* In combinatie met titel_klassement	*/
	margin-top:0px;	
}

.content_box p {
	/*
	Ook van invloed op tabelregels (toto), vandaar alleen in p tag
	*/
	line-height:1.25em;	
}

.bg_steen {
	/* tour en toto */
	background-image: url(/shared/tour/gfx/achtergrond_alpha.png);
}

hr.voetlijn {
	height: 0;
	border-top-width: 1px;
	border-right-width: 0;
	border-bottom-width: 0;
	border-left-width: 0;
	border-top-style: solid;
	border-top-color: #dbdde3;	
}

.koplijn {
    margin-top: 4px;
}

/* kolom 2 */
.divider_footer {
	margin-left:6px;
	margin-right:6px;
	color: rgba(69,78,89,.25);	
}

#kolom2 ul, .overzicht ul {
	list-style-type:none;
	padding-left:0px;
	margin-top: 0px;
	margin-bottom: 10px;
}

#kolom2 li, .overzicht li {
	padding-top: 2px;
	padding-bottom: 2px;
}

#kolom2 .laatste_reacties li {
	padding-top: 3px;
	padding-bottom: 3px;
}

.laatste_reacties .auteur {
	color:#A4B4C6;
	font-weight:bold;		
}

.titel_2017 {
    font-family: cnt_gothic_bd, Arial;
    font-weight: bold;
    letter-spacing: 0.02em;
    font-size: 15px;
	/*
    color: #adc0d4;
	*/
    color: #adc0d4;
    text-shadow: 2px 2px 2px #ededed;
    margin: 10px 0 7px 2px;
}

/* zoeken */
.fldZoek {
	width:150px;
}

.module-content {
	padding: 0 4px;
}

/* tekst uitlijning */
.txt_l {
	text-align:left !important;
}

.txt_r {
	text-align:right !important;
}

.txt_c {
	text-align:center !important;
}

/* blok uitlijning */
.img_links {
	float:left;
	margin-right:10px;
	margin-bottom:10px;		
}

.img_rechts {
	float:right;
	margin-left:10px;
	margin-bottom:10px;	
}

.element_links {
	float:left;
}

/* gebruikt bij toelichting pictogram forum */
.element_rechts {
	float:right;
}

/* titels  en tekst*/

.titel_klassement {
	/* afgeleid van tour klassement, wanneer in container 'content_box' */
	font-weight: bold;
	font-size:12px;
	letter-spacing:0.2em;
	color:#A4B4C6;
	margin:4px 0 2px 0;
}

.titel_sub {
	/*
	afgeleid van titel_klassement
	vanwege henkteller uit esims_beheer verplaatst
	*/
	font-weight: bold;
	font-size:12px;
	color:#A4B4C6;
	letter-spacing:0.2em;
	margin-top: 10px;
	margin-bottom: 2px;
}

.item_footer {
/* overgenomen van machines, nodig voor toevoegmodusknop */
	display:flex;
	justify-content:flex-end;
	margin-top:10px;
	font-size:12px;
	font-family:arial,tahoma;
	color:#A4B4C6;
	font-weight:bold;
}

.item_footer a {
	color:#A4B4C6;
}


.nowrap {
	white-space:nowrap;
}

.truncate {
	white-space:nowrap;
	overflow:hidden;
	text-overflow:ellipsis;
}

.flex {
	display:flex;
	align-items:center;
}

.flexi {
	display:inline-flex;
}

.flexf {
	/* forum afbeelding onder bericht */
	display:inline-flex;
	/*
	margin-top:8px;
	*/
}

.push {
	/* gezien op mozilla flex */
	margin-left:auto;
}

.push_v {
	margin-top:auto;
}

.line-break {
	/* in flex container */
	width:100%;
}

.kleur_default {
	color:var(--color-default);
}

.kleur_forum {
	color:var(--color-forum);
}

.tekst_verwijderd {
	/* forum tour */
	color:#999999;
}

.zwart_r2 {
	/* radio 2
	color:#454e59;
	 */
	color:#30363e;				
}

.highlight {
	/* wk, tour */
	color: #0092F2 !important;
	font-weight:bold;
}

.link_blauw a {
	color: #0092F2;
}

.link_blauw a:hover {
	color: #0092F2;
}

.myBr {
    vertical-align:-50%;
}

.emoji_18 {
	font-family: 'Noto Color Emoji', 'Apple Color Emoji', 'Segoe UI Emoji', Times, Symbola, Aegyptus, Code2000, Code2001, Code2002, Musica, serif, LastResort;
	font-size:18px;
}

.emoji_20 {
	font-family: 'Noto Color Emoji', 'Apple Color Emoji', 'Segoe UI Emoji', Times, Symbola, Aegyptus, Code2000, Code2001, Code2002, Musica, serif, LastResort;
	font-size:20px;
}

.emoji_40 {
	font-family: 'Noto Color Emoji', 'Apple Color Emoji', 'Segoe UI Emoji', Times, Symbola, Aegyptus, Code2000, Code2001, Code2002, Musica, serif, LastResort;
	font-size:40px;
}


.display_period::after {
	/* gebruikt bij tourdeelname, om te voorkomen dat er een spatie tussen een label en een punt ontstaat door 'apply source formatting' */
    content: ".";
}

.label_textbox {
	color:#38485A;
	white-space:nowrap;
	padding-right:15px;
	vertical-align:top;
}

.tagcloud_match {
	/* 
	Stackoverflow beginpagina, counter
	Ook gebruikt op het Tourforum, vandaar hier.
	*/	
	color:#FFFFFF;
	background-color:#0077dd;
	display:inline-block;
	height:14px;	
	line-height:14px;		
	border-radius:9px;	
	padding-top: 1px;
	padding-right: 4px;
	padding-bottom: 1px;
	padding-left: 4px;
}

/* einde titels en tekst */

/* pager */
.pager {
	margin-top:10px;
	margin-bottom:10px;
	font-size:11px;	
}

.pageritem {
	margin-right:1px;
	color:#006dbd;
	border: 1px solid #e7e7e7;
	padding: 3px 6px;
}

.pageritem_selected {
	margin-right:1px;
	color:#ffffff;
	border: 1px solid #c6c7c6;
	background-color:#c6c7c6;
	padding: 3px 6px;	
}

.pageritem_label {
/* voor de hellip */
	margin-right:1px;
	color:#006dbd;
	padding: 3px 6px;	
}

/* section bar */
.sectionbar {
	display:inline-flex;
	margin-top:6px;
	background-image:url(/shared/gfx/sectionbar/sectionBar.jpg);
	background-repeat: repeat-x;
	padding-bottom:5px;
}

.sectionbar .tab {
	height:17px;
	font-weight: bold;
	font-size: 11px;
	color: #676767;
	font-family: Arial, Helvetica, sans-serif;
	padding: 4px 10px 2px 10px;
	border-left: solid 1px transparent;
	border-right: solid 1px transparent;
}

.sectionbar .tab a {
/* nodig bij sectionbars met tooltips (zoals dagwinnaars) */
	color: #676767;
}

.sectionbar .tab_toelichting {
	height:17px;
	padding-top: 3px;
	padding-right: 10px;
	padding-bottom: 0px;
	padding-left: 10px;
	border-left: solid 1px transparent;
	border-right: solid 1px transparent;
}

.sectionbar .tab_divider {
	background-image:url(/shared/gfx/sectionbar/divider.gif);
	background-repeat: no-repeat;
	background-position: right;	
	height:17px;
	font-weight: bold;
	font-size: 11px;
	color: #676767;
	font-family: Arial, Helvetica, sans-serif;
	padding-top: 4px;
	padding-right: 10px;
	padding-bottom: 2px;
	padding-left: 10px;
	border-left: solid 1px transparent;
	border-right: solid 1px transparent;
}

.sectionbar .tab_divider a {
	color: #676767;
}

.sectionbar .tab_selected {
	background-color: #FFFFFF;
	height:17px;
	font-weight: bold;
	font-size: 11px;
	color: #00002b;
	font-family: Arial, Helvetica, sans-serif;
	padding-top: 4px;
	padding-right: 10px;
	padding-bottom: 2px;
	padding-left: 10px;
	border-left-width: 1px;
	border-left-style: solid;
	border-left-color: transparent;				
	border-right-width: 1px;
	border-right-style: solid;
	border-right-color: #d5d5d5;	
}

.sectionbar .tab_selected a {
	color: #00004d;
}

/* dotbar */
.dotbar {
	display:flex;
	align-items: flex-start;	
	flex-direction: column;	
}

.dotbar .tab {
	display:block;
	height:12px;
	width: 12px;
    border           : 0.0625em solid rgb(192,192,192);
    border-radius    : 50%;
    background: linear-gradient(#ffffff, #cdd3da);
	margin-bottom:10px;
}

.dotbar .tab_selected {
	display:block;
	height:12px;
	width: 12px;
    border           : 0.0625em solid rgba(16,121,190,.4);
    border-radius    : 50%;
    background : linear-gradient(#3eb2ff,#22a7ff);
	margin-bottom:10px;
}

.dotbar_h {
	display:flex;
	justify-content:flex-end;
}

.dotbar_h .tab {
	display:block;
	height:12px;
	width: 12px;
    border           : 0.0625em solid rgb(192,192,192);
    border-radius    : 50%;
    background: linear-gradient(#ffffff, #cdd3da);
	margin-left:10px;
}
.dotbar_h .tab_selected {
	display:block;
	height:12px;
	width: 12px;
    border           : 0.0625em solid rgba(16,121,190,.4);
    border-radius    : 50%;
    background : linear-gradient(#3eb2ff,#22a7ff);
	margin-left:10px;
}

/* tabellen */
.rij {
	/*
	border-top: solid 1px #eaeaea;
	*/
	border-bottom: solid 1px #eaeaea;
}

/* magnify (pictogram boven afbeelding) */
.magnify {
	position:relative;
}

.magnify a span {
	display: block;
	position: absolute;
	top: 0px;
	left: 0px;
	bottom: 0px;
	right: 0px;
	z-index: 1;
	background-image:url(/Shared/gfx/magnify.png);
	background-repeat: no-repeat;
	background-position: -200px -200px;
}

.magnify a:hover span {
	background-position: center center;
}

/* fancybox lightbox style (tip 7) */
#tip7-title {
    text-align: left;
}

#tip7-title b {
    display: block;
    margin-right: 80px;
}

#tip7-title span {
    float: right;
}

/* formulier */
.hide {
	/*verbergen (onderhoud, meterstanden) */
	display:none;			
}

.hide_tp {
	/* verbergen maar niet inklappen */
	visibility:hidden;
}

/* misc (leeg na verwijderen) */

/* zoekvak devbridge autocomplete */
.tb_zoek_ac {
	width:250px;
	height: 20px;
}
.autocomplete-suggestions { border: 1px solid #999; background: #fff; cursor: default; overflow: auto; }
.autocomplete-suggestion { padding: 6px 5px; font-size: 1em; white-space: nowrap; overflow: hidden; }
.autocomplete-selected { background: #f0f0f0; }
.autocomplete-suggestions strong { font-weight: normal; color: #3399ff; }

/* blokbar top2000 live 
verplaatst n.a.v. bvr top 10
*/
.blok {
	display:inline-block;
	width:9px;
	height:10px;
	margin-right:1px;	
}

.blok_blauw {
	background-color:#0099FF;
}

.blok_dblauw {
	background-color:#0065a9;
}


.blok_grijs {
	background-color:#dfe1e3;
}

.blok_rood {
	background-color:#b2152b;
}

/* divider dropdownmenu hoofdmenu */
.divider_label_dd {
	margin-left:10px;
	margin-right:-6px;
	font-size:10px;
	color:rgba(69,78,89,1);
	white-space: nowrap;
}

/* icon kleuren */
.icon_blauw {
	/* 0092f2 link_blauw */
	filter: invert(38%) sepia(67%) saturate(2674%) hue-rotate(181deg) brightness(100%) contrast(104%);
}

.icon_wit {
	filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(62deg) brightness(103%) contrast(103%);
}

.icon_grijs {
	opacity:.2;
	filter: saturate(0%);
}

.lnk_update {
    font-weight: normal;
    font-size: 12px;
    color: #ffffff !important;
    background-color: #0099ffd0;
    border-radius: 16px;
    padding: 4px 8px;
    display: inline-block;
    user-select: none;
}

.lnk_cancel {
    font-weight: normal;
    font-size: 12px;
    color: #ffffff !important;
    background-color: #c0c0c0d0;
    border-radius: 16px;
    padding: 4px 8px;
    display: inline-block;
    user-select: none;
}

.aspNetDisabled {
    opacity: 0.5;
}