.switch {
  position: relative;
  height: 34px;
  display: inline-block;
}

.switch span {
  position: absolute;
  background-color: #b30038;
  border-radius: 17px;
  cursor: pointer;
  top: 5px;
  left: 0;
  right: 0;
  bottom: 0;
  transition: background-color 0.4s;
}

.switch span::before {
  background-color: white;
  border-radius: 50%;
  content: "";
  position: absolute;
  left: 4px;
  bottom: 4px;
  height: 16px;
  width: 16px;
}

input:checked + span {
  background-color: #055b8c;
}

input:checked + span::before {
  transform: translateX(30px);
}

.switch {
  position: relative;
  display: grid;
  grid-template-columns: 110px 64px;
  grid-template-rows: 34px;
  grid-template-areas: "settings switch";
}

.switch input {
  display: none;
}

.switch span {
  background-color: #b30038;
  transition: 0.4s;
  grid-area: switch;
  width: 54px;
  height: 25px;
}

input:checked + p::before {
  content: "";
}

input:checked ~ p::after {
  content: "";
}

.list {
  margin-bottom: 0px;
}

#loader {
  border: 8px solid #6fa0be;
  border-radius: 50%;
  border-top: 8px solid #c10001;
  border-bottom: 8px solid #c10001;
  width: 25px;
  height: 25px;
  -webkit-animation: spin 2s linear infinite;
  animation: spin 2s linear infinite;
}

.error {
  border: 2px solid red !important;
}

.success {
  border: 2px solid green !important;
}

@-webkit-keyframes spin {
  0% {
    -webkit-transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
  }
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.test::before {
  content: attr(placeholder) !important;
  color: #aaa;
  width: 100%;
}

.test:focus::before,
.test::before {
  content: "";
  width: 0%;
}

.inno #multicheckbox-1 {
  flex-direction: column;
  display: flex;
}

.inno #multicheckbox-1 > div {
  margin-bottom: 10px;
}

.inno #f3 > div:nth-child(6) .form-check,
.inno #f4 > div:nth-child(3) .form-check,
.inno #f4 > div:nth-child(5) .form-check,
.inno #f4 > div:nth-child(7) .form-check {
  align-items: center;
  display: flex;
  margin-bottom: 10px;
}

.inno #f3 > div:nth-child(6) .form-check .form-check-label,
.inno #f4 > div:nth-child(3) .form-check .form-check-label,
.inno #f4 > div:nth-child(5) .form-check .form-check-label,
.inno #f4 > div:nth-child(7) .form-check .form-check-label {
  margin-left: 9px;
}

.inno .errorfild {
  flex-direction: column;
  border: 2px solid #b30038;
  padding: 20px;
}

.inno .errorfild button {
  background: transparent;
  border: 0;
  color: #b30038;
}

.inno #form .btn-group {
  margin-bottom: 20px;
}

a:before {
  content: "";
  width: 32px;
  min-height: 25px;
  height: 100%;
  background-position: center;
  background-repeat: no-repeat;
  position: absolute;
  left: 0;
  top: 0;
}

#sport:not(.switch):after,
#musik:not(.switch):after,
#kirchen:not(.switch):after,
#umwelt:not(.switch):after,
#migranten:not(.switch):after,
#soziales:not(.switch):after,
#feuerwehr:not(.switch):after {
  width: 5px;
  height: 9px;
  border: 2px solid var(--active-inner);
  border-top: 0;
  border-left: 0;
  transform: rotate(var(--r, 20deg));
}

    .disabled {
        color: red !IMPORTANT;
    }

    .nice-select.form-control.wide {
        height: max-content !IMPORTANT;
        padding: 10px 15px !IMPORTANT;
    }

    .select2.select2-container.select2-container--default,
    .select2.select2-container.select2-container--default.select2-container--below.select2-container--focus {
        width: 100% !important;
    }

    .select2-selection.select2-selection--single {
        height: max-content !IMPORTANT;
        padding: 10px 15px !IMPORTANT;
    }

    .select2-selection__arrow {
        position: relative !IMPORTANT;
        top: -14px !IMPORTANT;
        right: -100% !IMPORTANT;
    }

    .nice-select.form-control.wide .current {
        text-wrap: balance;
    }

    .nice-select .option:nth-child(odd) {
        background-color: light-grey;
    }

    .nice-select .option {
        height: max-content;
        width: 100%;
        text-wrap: balance;
        padding-top: 10px;
        padding-bottom: 10px;
        line-height: 20px;
    }

    summary {
        padding: 0.25rem 1rem;
        font: bold 1.25rem/2 sans-serif;
        border: 1px solid #000;
        border-radius: 3px;
        cursor: pointer;
        list-style: none;
    }

    details:not(:first-child) {
        margin-top: 18px;
    }

    summary::-webkit-details-marker {
        display: none;
    }

    summary::before {
        padding-right: .25rem;
        content: '+ ';
    }

    details[open] summary::before {
        padding-right: .25rem;
        font-style: italic;
        content: '- ';
    }

    input::file-selector-button {
        color: #fff;
        background-color: #044367;
        border: 0;
        width: 150px;
    }

    summary {
        padding: 0.25rem 1rem;
        font: bold 1rem/2 sans-serif;
        border: 1px solid #000;
        border-radius: 3px;
        cursor: pointer;
        background-color: #055B8C;
        border-color: #055B8C;
        color: #fff;
    }

    details:not(:first-child) {
        margin-top: 18px;
    }

    summary::-webkit-details-marker {
        display: none;
    }

    summary::before {
        padding-right: .25rem;
    }

    details fieldset {
        padding: 0 2%;
    }

    details[open] summary::before {
        padding-right: .25rem;
    }

    input::file-selector-button {
        color: #fff;
        background-color: #044367;
        border: 0;
        width: 150px;
    }

    #normal::after {
        top: 15px !important;
        left: 8px !important;
    }
    #juleica::after{
        top: 5px !important;
        left: 8px !important;
    }
    #Zivilschutzorganisationen::after {
        top: 47px !important;
        left: 8px !important;
    }



    @media screen and (min-width: 612px) {
        #normal::after {
            top: 5px !important;
            left: 8px !important;
        }

        #juleica::after {
            top: 5px !important;
            left: 8px !important;
        }
    }

    @media screen and (min-width: 421px) {
        #Zivilschutzorganisationen::after {
            top: 36px !important;
            left: 8px !important;
        }
    }

    @media screen and (min-width: 546px) {
        #Zivilschutzorganisationen::after {
            top: 26px !important;
            left: 8px !important;
        }
    }


    @media screen and (min-width: 733px) {
        #Zivilschutzorganisationen::after {
            top: 15px !important;
            left: 8px !important;
        }
    }

    @media screen and (min-width: 759px) {
        #Zivilschutzorganisationen::after {
            top: 25px !important;
            left: 8px !important;
        }
    }

    @media screen and (min-width: 823px) {
        #Zivilschutzorganisationen::after {
            top: 15px !important;
            left: 8px !important;
        }
    }

    #single_orga::after {
        top: 14px !important;
        left: 8px !important;
    }
    #multi_orga::after {
        top: 15px !important;
        left: 8px !important;
    }
    @media screen and (min-width: 451px) {
        #single_orga::after,
        #multi_orga::after {
            top: 5px !important;
            left: 8px !important;
        }
    }

    #HatKeinVerein::after{
        top: 36px !important;
        left: 8px !important;
    }
    
    @media screen and (min-width: 451px) {
        #HatKeinVerein::after{
            top: 30px !important;
            left: 8px !important;
        }
    }
    @media screen and (min-width: 598px){
        #HatKeinVerein::after{
            top: 21px !important;
            left: 8px !important;
        }
    }

    @media screen and (max-width: 454px) {
         #HEOIN::after{
            top: 16px !important;
        }
    }


    #send_orga_mail::after {
	    top: 36px !important;
		left: 8px !important; 
	}
    #noMail::after {
		top: 15px !important;
        left: 8px !important; 
    }
    #sendManuall::after {
		top: 26px !important;;
        left: 8px !important; 
    }
    


    @media screen and (min-width: 461px)  {
        #send_orga_mail::after,
         #sendManuall::after {
	        top: 26px !important;
			left: 8px !important; 
		}
        #noMail::after {
			top: 16px !important;
            left: 8px !important; 
        }
    }
    

    @media screen and (min-width: 522px)  {
        #send_orga_mail::after {
	        top: 26px !important;
			left: 8px !important; 
		}
        #noMail::after {
			top: 16px !important;
            left: 8px !important; 
        }
        #sendManuall::after {
	        top: 15px !important;
			left: 8px !important; 
		}
    }

    @media screen and (min-width: 557px)  {
        #send_orga_mail::after {
	        top: 26px !important;
			left: 8px !important; 
		}
        #noMail::after {
			top: 6px !important;
            left: 8px !important; 
        } 
         #sendManuall::after {
	        top: 15px !important;
			left: 8px !important; 
		}
    }


    @media screen and (min-width: 610px) {
        #send_orga_mail::after {
	        top: 16px !important;
			left: 8px !important; 
		}
        #noMail::after {
			top: 5px !important;
            left: 8px !important; 
        }
        #sendManuall::after {
			top: 15px !important;;
            left: 8px !important; 
        }
    }