/* cooltip container */	
.cooltip, .cooltipicon {
  position: relative;
  display: inline-block;
}
.cooltip {
  border-bottom: 1px dotted black;
}

.cooltip .cooltiptext, .cooltipicon .cooltiptext {
	visibility: hidden;
	width:240px;
	font-size:11px;font-weight:300;
	line-height:1.3em;
	border: 2px solid #b3c8e0;
	background-color: #fff;
	color: #333333;
	text-align: justify;
	border-radius: 6px;
	padding: 4px;
	position: absolute;
	z-index: 1;
	top: 150%;
	left: 50%;
	margin-left: -60px;
}

.cooltip .cooltiptexttoolbar, .cooltipicon .cooltiptexttoolbar {
	opacity: 0;
	transition: opacity 1s; 
	width:100px;
	font-size: 16px;
    font-weight: 600;
    line-height: 24px;
	text-align:center;
	color: #333333;
	color: var(--color-blue-100);
  background-color: var(--color-blue-light);
  border: 1px solid #dee2e6 !important;	
	border-radius: 30px;
	padding: 1em;
	position: absolute;
	z-index: 1;
  top: -427%;
  right: -63%;
  margin-left: -130px;
}

.cooltip .cooltiptext::after,.cooltipicon .cooltiptext::after {
  content: "";
  position: absolute;
  bottom: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: transparent transparent transparent transparent;
}


.cooltip .cooltiptexttoolbar::after,.cooltipicon .cooltiptexttoolbar::after {
  content: "";
  position: absolute;
  bottom: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: transparent transparent transparent transparent;
}

.cooltip:hover .cooltiptext, .cooltipicon:hover .cooltiptext {
  visibility: visible;

}	


.cooltip:hover .cooltiptexttoolbar, .cooltipicon:hover .cooltiptexttoolbar {
  opacity: 1.0;

}	
.cooltipicon img{padding-left:5px;width:20px;height:20px;}


div.tool .cooltipicon img{padding-left:5px;width:28px;height:28px;}


img.icon_fragen, img.icon_hinweis, img.icon_versnehmer, img.icon_postanschrift, img.icon_verspers, img.icon_verspers_b,img.icon_krankenversicherung, img.icon_krankenversicherung_b, img.icon_ausland, img.icon_ausland_b, img.icon_unfallversicherung, img.icon_zahlung, img.icon_berechnung, img.icon_kontakt, img.icon_tippgeber, img.icon_bedingungen {
  border-radius: 13px;
  width: 30px;
  height: 30px;
  padding: 2px;
  background-color: #f6faff;
  margin-right: .5em;
  vertical-align: bottom;
}
img.icon_hinweis, img.icon_postanschrift, img.icon_krankenversicherung, img.icon_krankenversicherung_b,img.icon_ausland, img.icon_ausland_b, img.icon_unfallversicherung, img.icon_kontakt 	{ padding: 2px 2px 2px 0;}
.infobild_r2025r {position:relative; top: 10px;right: -15px;}
.infobild_r2025r {width:2em;height:2em;background-color:#f59b00; border:1px solid #fff;border-radius:50%;margin-top:.2em;margin-right:1em;float:right; }
.infobild_r2025r a:link, .infobild_r2025r a:hover, .infobild_r2025r a:visited, .infobild_r2025r a:active{font-size:1.2em;color:#ffffff;margin: 0.3em;text-align:center;padding-left:.3em;text-decoration:none; }

.infobild{position:absolute; top:-35px; right:0;}
/*anfang popup neu */
.overlay2, .overlay3 {
  position: absolute;
  top: 8em;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.7);
  transition: opacity 500ms;
  visibility: hidden;
  opacity: 0;
  z-index:141;
}
.overlay2:target, .overlay3:target {
  visibility: visible;
  opacity: 1;
}

.popup2 {
  margin: 230px auto;
  padding: 20px 5px 5px 5px;
  background: #fff;
  border-radius: 5px;
  width: 80%;
  position: relative;
  transition: all 5s ease-in-out;
}

.popup2 .close {
  position: absolute;
  top: 10px;
  right: 20px;
  transition: all 200ms;
  font-size: 30px;
  font-weight: bold;
  text-decoration: none;
  color: orange;
}
.popup2 .close:hover {
  color: #626262;
}
.popup2 .content2 {
  max-height: 30%;
  overflow: auto;
}

.infobild {width:2em;height:2em;background-color:#f59b00; border:1px solid #fff;border-radius:50%;margin-top:.2em;margin-right:2em;float:right; }
.infobild a:link, .infobild a:hover, .infobild a:visited, .infobild a:active{font-size:1.2em;color:#ffffff;margin: 0.3em;text-align:center;padding-left:.3em;text-decoration:none; }
.korrbild {width:3em;height:1.6em; margin-top:-.55em;float:right;margin-left:1em; font-size:2em;color:#004799; }
.korrbild a:link, .korrbild a:hover, .korrbild a:visited, .korrbild a:active{text-align:center;font-size:1.3em;color:#004799;text-decoration:none; }

fieldset.linksfield{padding:2em;}

fieldset.linksfield legend{margin-top:1em;margin-bottom:1em;font-size:18px;line-height:26px;font-weight:600;color:#333333;}

.form_span_left{font-size:16px;line-height:24px;font-weight:400;color:#333333;margin-bottom:1.7em;}
.form_span_right{font-size:16px;line-height:24px;font-weight:400;color:#333333;margin-bottom:1.7em;}
/*.form-label {margin-left:.6em;margin-right:.6em;font-size:16px;line-height:24px;font-weight:400;color:#333333;}*/
.form-label {margin-left:0em;margin-right:.6em;font-size:16px;line-height:24px;font-weight:400;color:#333333;}
.form-check-input{margin-right:.6em;margin-left:.6em;}


fieldset.grau{
	border: 0px none #c8c8c8;
	display: block;
	background-color:#ededed;
	float: none;
	padding:1em;
 }
fieldset.grau table.index tr td, fieldset.grau table.index tr,fieldset.grau table.index, fieldset.grau table.index caption {background-color:#ededed;}
fieldset.grau legend{
	font-size: 16px;
	background-color:#b7b7b7;
	color:#fff;
	padding:1em;

}


input.normal, input.nuranzeige {
  -webkit-appearance: none;
  appearance: none;
  background-color: #f6faff;
  border: 1px solid #f6faff;
}
input.normal, input.nuranzeige {
  -webkit-appearance: none;
  appearance: none;
  background-color: #f6faff;
  border: 1px solid #f6faff;
  color: #333333;
  font-size: 16px;
}
.normal, .nuranzeige {
  color: #333333;
  text-decoration: none;
  cursor: default;
  background-color: #f6faff;
  border: 0px none #f6faff;
}



.link .icon.verlink {
  width: 24px;
  min-width: 24px;
  height: 24px;
  background-image: url("/bilder/r2025r/link.svg");
  background-repeat: no-repeat;
  background-size: 22px;
  background-position: center; margin-right:1em;}
.link .label.verlink {font-weight:normal;}
.form-select.jsfehlermeldung, .jsfehlermeldung {border:1px solid #c1121c; color:#c1121c;}
fieldset.phpfehlermeldungrot{color:#c1121c; font-size:14px; border:1px solid #c1121c; line-height:1.5em;margin-bottom:2em;padding:1em;border-radius:.25rem;}

fieldset.phpfehlermeldungrot a.orange_link{color:#c1121c; font-size:14px; margin:2em;}


.jsfehlermeldung_box, .phpfehlermeldungrot legend {display:inline-block; background-color:#ffffff;
	margin:1em;
	border:1px solid #c1121c; 
	color:#c1121c;
	border-radius:.25rem; 
	width: 80%; 
	padding: .375rem 2.25rem .375rem .75rem;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
}
.phpfehlermeldungrot legend{background-color:#c1121c;color:#ffffff;}

table.index tr td.zwischenseite_links_frage, table.index tr td.zwischenseite_links{width:50%;}
.overlay2 {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.7);
  transition: opacity 500ms;
  visibility: hidden;
  opacity: 0;
  z-index: 141;
}


.overlay2:target {
  visibility: visible;
  opacity: 1;
}

.popup {
  margin: 280px auto;
  padding: 20px 5px 5px 5px;
  background: #fff;
  border-radius: 5px;
  width: 80%;
  position: relative;
  transition: all 5s ease-in-out;
}

.popup .close {
  position: absolute;
  top: 10px;
  right: 20px;
  transition: all 200ms;
  font-size: 30px;
  font-weight: bold;
  text-decoration: none;
  color: orange;
}
.popup .close:hover {
  color: #626262;
}
.popup .content {
  max-height: 30%;
  overflow: auto;
}


/* Form Progress */
.progress2 {
  
  margin: 20px auto;
  text-align: center;
}
.progress2 .circle,
.progress2 .bar {
  display: inline-block;
  background: #fff;
  width: 40px; height: 40px;
  border-radius: 40px;
  border: 1px solid #d5d5da;
}
.progress2 .bar {
  position: relative;
	top:-1em;
  width: 80px;
  height: 6px;
  margin: 0 -5px 17px -5px;
  border-left: none;
  border-right: none;
  border-radius: 0;
}
.progress2 .circle .label {
  display: inline-block;
  width: 32px;
  height: 32px;
  line-height: 32px;
  border-radius: 32px;
  margin-top: 3px;
  color: #b5b5ba;
  font-size: 17px;
}
.progress2 .circle .title {
  white-space:nowrap;
	width:110px;
	color: #b5b5ba;
  font-size: 10px;
  line-height: 30px;
  margin-left: -5px;
}

/* Done / Active */
.progress2 .bar.done,
.progress2 .circle.done {
  background: #eee;
}
.progress2 .bar.active {
  background: linear-gradient(to right, #EEE 40%, #FFF 60%);
}
.progress2 .circle.done .label {
  color: #FFF;
  background: #626262;
  box-shadow: inset 0 0 2px rgba(0,0,0,.2);
}
.progress2 .circle.done .title {
  color: #444;
}
.progress2 .circle.active .label {
  color: #FFF;
  background: #467819;
  box-shadow: inset 0 0 2px rgba(0,0,0,.2);
}
.progress2 .circle.active .title {
  color: #467819;
}

div#sperrkontowerbung{margin-left:auto;margin-right:auto; padding:2em;}
h1.sperrkonto_kv_empfehlung{color: #ffffff; font-family: Noto Sans;font-size: 2em;line-height: 1.3em;text-align:center;}


img.antragsdruckknopf{background-color:#f59b00;border-radius: 4px; margin:5px 5px 5px -10px;width:120px; border:0; vertical-align:bottom;}

/*kwk nach kv*/
#kwkwerbung, #sperrkontowerbung{border:1px solid #f8f9fd; background-color:#004799; width:55%;margin-left:auto;margin-right:auto;margin-top:2em;margin-bottom:2em;padding-top:1.3em;}
#kwkwerbung p.emailversendeknopf, #sperrkontowerbung p.emailversendeknopf{width:85%;font-size:.8em;border-radius: .3em; background-color:#f59b00;margin-left:auto;margin-right:auto;padding:.5em;text-align:center;}	

.ui-datepicker-trigger{width:2em; position:relative; left:5px; top:0em;}

.antrag_h3{font-size:18px; font-weight: 600;margin-bottom:1.5em;}
@media all and (max-width: 767px) {
    .form_span_right  {width:100%;}
	.progress2 {  margin: 40px 0;}
}

@media all and (min-width: 768px) {
    .form_span_right  {width:768px;}
}

@media all and (min-width: 1201px) {
}

@media all and (max-width: 1224px) {

}








	
@media (max-width: 600px) {
.progress {  margin: 20px auto;  text-align: center;}
.progress .circle,.progress .bar {  display: inline-block;  background: #fff;  width: 40px; height: 40px;  border-radius: 40px;  border: 1px solid #d5d5da;}
.progress .bar {  position: relative;	top:-1em;  width: 80px;  height: 6px;  margin: 0 -5px 17px -5px;  border-left: none;  border-right: none;  border-radius: 0;}
.progress .circle .label  {  display: inline-block;  width: 32px;  height: 32px;  line-height: 32px;  border-radius: 32px;  margin-top: 3px;  color: #b5b5ba;  font-size: 17px;}
.progress .circle .title {  white-space:nowrap;	width:110px;	color: #b5b5ba;  font-size: 10px;  line-height: 30px;  margin-left: -5px;}
.progress .bar.done,.progress .circle.done {  background: #eee;}
.progress .bar.active {  background: linear-gradient(to right, #EEE 40%, #FFF 60%);}
.progress .circle.done .label {  color: #FFF;  background: #626262;  box-shadow: inset 0 0 2px rgba(0,0,0,.2);}
.progress .circle.done .title {  color: #444;}
.progress .circle.active .label {  color: #FFF;  background: #6caf17;  box-shadow: inset 0 0 2px rgba(0,0,0,.2);}
.progress .circle.active .title {  color: #6caf17;}
;}