/*
Theme Name: oria-child
Version: 1.0
Description: A child theme of Oria
Template: oria
Author: Marcel Lier
*/

/* Your awesome customization starts here */

/* KITA Anmeldeformular */

/* Main Container */
#nf-form-2-cont {
	max-width:800px;
	margin:40px auto 20px;
	padding: 40px 20px;
	border-top:1px solid #e3000f;
	border-bottom: 1px solid #e3000f;
	-webkit-box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.2);
	box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.2);
	color:#141414;

}

#nf-form-2-cont h3 {
	padding-bottom:10px;
	border-bottom: 1px solid #e3000f33
}

#nf-form-2-cont input[type="checkbox"] ~ label {
	font-weight:400
}

#nf-form-2-cont select,
#nf-form-2-cont input[type="tel"]{
	padding: 15px 10px;
    border: 1px solid #e0e0e0;
    border-radius: 3px;
    color: #666;
    font-size: 18px;
}

#nf-form-2-cont .form-control {
	font-size:18px
}

#nf-form-2-cont .nf-field-label .nf-label-span, 
#nf-form-2-cont .nf-field-label label {
	color:#333
}


#nf-form-2-cont select:focus,
#nf-select-2-cont input[type="tel"]:focus {
	color:#000
}
/* Form Wrapper */
#nf-form-2-cont .nf-form-wrap.ninja-forms-form-wrap.nf-multi-cell {}

/* Form Sections */
#nf-form-2-cont .nf-response-msg {}
#nf-form-2-cont .nf-debug-msg {}
#nf-form-2-cont .nf-before-form {}
#nf-form-2-cont .nf-form-layout {}
#nf-form-2-cont .nf-before-form-content {
	padding: 0px 5px 5px;
}
#nf-form-2-cont .nf-form-fields-required {
	display: flex;
    justify-content: end;
    font-size: 12px;
    opacity: .5;
}
}
#nf-form-2-cont .nf-form-content {}
#nf-form-2-cont .nf-mp-header {
	background-color:#e3000f0a;
	border-bottom: 1px solid #e3000f33; 
	border-top: 1px solid #e3000f33 !important;
	margin: 0 -20px;
    padding: 0 25px;
   
}

/* Progress Bar */
#nf-form-2-cont .nf-progress-container {
	margin-top:0;
	height:7px;
	border: none;
}
#nf-form-2-cont .nf-progress {
	height: 5px;
    margin-top: -3px;
    background-color: #e3000f;
    border-radius: 3px;
	min-width:20px
}

/* Navigation */
#nf-form-2-cont .nf-breadcrumbs {
	display: flex;
    justify-content: space-between;
	margin: 0 !important; 
    padding: 20px 0 25px !important;
}

#nf-form-2-cont .nf-breadcrumbs li a {
	color: #e3000f99;
}
#nf-form-2-cont .nf-breadcrumbs li.active a {
	color: #e3000fff;
}
#nf-form-2-cont .nf-breadcrumbs li.active .nf-breadcrumb {
	margin:0;
	float:none;
}

#nf-form-2-cont  .nf-breadcrumbs::after {
	display:none;
}

/* Form Body */
#nf-form-2-cont .nf-mp-body {
	padding-top:40px;
}
#nf-form-2-cont .nf-mp-body .nf-row {}
#nf-form-2-cont .nf-mp-body .nf-cell {}

/* HTML Container Fields */
#nf-form-2-cont .nf-field-container.html-container.label-above {}
#nf-form-2-cont .nf-field-container.html-container.label-above .nf-before-field {}
#nf-form-2-cont .nf-field-container.html-container.label-above .field-wrap.html-wrap {}
#nf-form-2-cont .nf-field-container.html-container.label-above .nf-field-label {}
#nf-form-2-cont .nf-field-container.html-container.label-above .nf-field-element {}
#nf-form-2-cont .nf-field-container.html-container.label-above .nf-after-field {}
#nf-form-2-cont .nf-field-container.html-container.label-above .nf-input-limit {}
#nf-form-2-cont .nf-error-wrap.nf-error {
	font-size:14px;
	font-weight:400;
	
}

/* Checkbox Lists */
#nf-form-2-cont .nf-field-container.listcheckbox-container.label-above.list-container {}
#nf-form-2-cont .nf-field-container.listcheckbox-container.label-above.list-container .field-wrap.listcheckbox-wrap.list-wrap.list-checkbox-wrap {}
#nf-form-2-cont .nf-field-container.listcheckbox-container.label-above.list-container ul {}
#nf-form-2-cont .nf-field-container.listcheckbox-container.label-above.list-container ul li {}
#nf-form-2-cont .nf-field-container.listcheckbox-container.label-above.list-container ul li .ninja-forms-field.nf-element {}
#nf-form-2-cont .nf-field-container.listcheckbox-container.label-above.list-container ul li label {}

/* Datepicker */
#nf-form-2-cont .nf-field-container.date-container.label-above {}
#nf-form-2-cont .nf-field-container.date-container.label-above .field-wrap.date-wrap {}
#nf-form-2-cont .nf-field-container.date-container.label-above .pikaday__container {}
#nf-form-2-cont .nf-field-container.date-container.label-above .ninja-forms-field.nf-element.datepicker.pikaday__display.pikaday__display--pikaday.flatpickr-input {}
#nf-form-2-cont .nf-field-container.date-container.label-above .ninja-forms-field.nf-element.datepicker.pikaday__display.pikaday__display--pikaday.form-control.input {}
.flatpickr-calendar {
	width:327.875px !important;
	padding:10px !important;
}
.flatpickr-day.selected, .flatpickr-day.startRange, .flatpickr-day.endRange, .flatpickr-day.selected.inRange, .flatpickr-day.startRange.inRange, .flatpickr-day.endRange.inRange, .flatpickr-day.selected:focus, .flatpickr-day.startRange:focus, .flatpickr-day.endRange:focus, .flatpickr-day.selected:hover, .flatpickr-day.startRange:hover, .flatpickr-day.endRange:hover, .flatpickr-day.selected.prevMonthDay, .flatpickr-day.startRange.prevMonthDay, .flatpickr-day.endRange.prevMonthDay, .flatpickr-day.selected.nextMonthDay, .flatpickr-day.startRange.nextMonthDay, .flatpickr-day.endRange.nextMonthDay {
	background: #e3000f !important;
    -webkit-box-shadow: none;
    box-shadow: none;
    color: #fff;
    border-color: #e3000f !important;
}

.flatpickr-next-month {
	    margin-top: 9px;
    margin-right: 10px;
}

.flatpickr-prev-month {
	    margin-top: 9px;
    margin-left: 10px;
}

.flatpickr-months {
	margin-bottom:10px;
	padding-bottom: 5px;
    border-bottom: 1px solid #e3000f33;
}
/* Footer Navigation */
#nf-form-2-cont .nf-mp-footer {
	padding-top: 20px;
	margin:20px 5px;
    border-top: 1px solid #e3000f33;
}
#nf-form-2-cont .nf-mp-footer .nf-next-previous {}
#nf-form-2-cont .nf-mp-footer .nf-next-previous .nf-next-item {}
#nf-form-2-cont .nf-mp-footer .nf-next-previous .nf-next-item .nf-next,
#nf-form-2-cont .nf-mp-footer .nf-next-previous .nf-previous-item .nf-previous {
	border-radius: 3px;
    padding: 8px 25px;
}

#nf-form-2-cont input[type="submit"] {
	border-radius: 3px;
    padding: 15px 25px;
}

#nf-form-2-cont .nf-mp-footer .nf-next-previous .nf-previous-item .nf-previous {
	border: 1px solid #666;
   	color: #666;
	background-color:#fff;
}

#nf-form-2-cont .nf-mp-footer .nf-next-previous .nf-previous-item .nf-previous:hover,
#nf-form-2-cont .nf-mp-footer .nf-next-previous .nf-previous-item .nf-previous:focus {
	border: 1px solid rgb(226, 0, 26);
   	color: rgb(226, 0, 26);
	background-color:#fff;
}

/* Privacy Container */ 

#nf-field-35-wrap.field-wrap {
	display: flex;
	flex-wrap: wrap;
	gap: 10px; 
	border: 1px solid #ddd;
    padding: 20px;
    border-radius: 5px;
    background: #fafafa;
}


#nf-field-35-wrap.field-wrap .nf-field-label {
  flex: 1; /* Erlaubt dem Label zu wachsen */
  min-width: 200px; /* Optional: Minimale Breite für besseres Layout */
}
#nf-field-35-wrap.field-wrap .nf-field-element {
  flex: 0 0 auto; /* Verhindert das Wachsen, behält die natürliche Größe */
}
#nf-field-35-wrap.field-wrap .nf-field-description {
  flex-basis: 100%; /* Erzwingt volle Breite */
  /* Optional: Zusätzliche Styling für bessere Lesbarkeit */
  margin-top: 10px;
}

.label-right #nf-field-35-wrap .nf-field-description {
	margin-right:0;
	margin-top:20px;
	padding-left: 30px;
    font-size: 16px;
    line-height: 1.2;
    color: #333;
}

.label-right #nf-field-35-wrap .nf-field-label {
	padding-left:0
}

/* Submit Container */
#nf-form-2-cont .submit-container{
	justify-content: center;
    display: flex;
    margin-block-end: 60px;
	padding-top:20px;
}

/* Form Errors & Honeypot */
#nf-form-2-cont .nf-form-errors {
	display:none;
	    padding: 15px;
    background-color: #e3000f11;
    border: 1px solid #e3000f22;
    text-align: center;
    font-size: 14px;
}
#nf-form-2-cont .nf-form-hp {}

#nf-field-37-wrap {
	margin: 0 0 40px;
}

.label-right .nf-field-label,
.checkbox-container .nf-field-label {
	padding-left:0 !important;
	z-index:1;
}

.label-right .nf-field-label label,
.checkbox-container .nf-field-label label {
	padding-left:10px !important
}



/* Checkboxen */

/* Basis-Styling für die Checkbox-Liste */
.nf-field-element ul {
  list-style: none;
  padding: 0;
}

.nf-field-element li {
  display: flex;
  align-items: center;
  margin-bottom: 8px;
}

/* Verstecke die ursprüngliche Checkbox */
.nf-field-element input[type="checkbox"]{
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}


/* Label-Styling */
.nf-field-element label,
.checkbox-container label{
  display: flex;
  align-items: center;
  cursor: pointer;
  padding-left: 10px;
  position: relative;
}

/* SVG Container */
.nf-field-element label::before,
.checkbox-container label::before {
  content: "";
  position: absolute;
  left: -20px;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  border: 2px solid #aaa;
  border-radius: 4px;
  background-color: white;
  transition: all 0.2s ease;
}

/* SVG Checkmark */
.nf-field-element label::after,
.checkbox-container label::after{
  content: "";
  position: absolute;
  left: -19px;
  top: 50%;
  transform: translateY(-50%) scale(0);
  width: 18px;
  height: 18px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41L9 16.17z'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  transition: all 0.2s ease;
}

/* Hover-Effekt */
.nf-field-element label:hover::before,
.checkbox-container label:hover::before {
  border-color: #e3000f;
}

/* Checked-Zustand */
.nf-field-element input[type="checkbox"]:checked + label::before,
.checkbox-container label.nf-checked-label::before{
  background-color: #e3000f;
  border-color: #e3000f;
}

.nf-field-element input[type="checkbox"]:checked + label::after,
.checkbox-container label.nf-checked-label::after{
  transform: translateY(-50%) scale(1);
}

/* Focus-Zustand für Accessibility */
.nf-field-element input[type="checkbox"]:focus + label::before,
.checkbox-container label.nf-checked-label::before {
  box-shadow: 0 0 0 3px #e300f33;
}

/* Disabled-Zustand */
.nf-field-element input[type="checkbox"]:disabled + label {
  opacity: 0.6;
  cursor: not-allowed;
}

/* Sonderfälle */

#nf-label-field-35 {
	margin-left:-10px;
	align-items:flex-start
}

#nf-label-field-35::before,
#nf-label-field-35::after {
	top:30%
}

.nf-breadcrumbs li a {
	font-size:14px !important;
	margin:0 !important;
}