/* open-sans-regular - latin */
@font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 400;
    src: url('../fonts/open-sans-v17-latin-regular.eot');
    /* IE9 Compat Modes */
    src: local('Open Sans Regular'), local('OpenSans-Regular'), url('../fonts/open-sans-v17-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
    url('../fonts/open-sans-v17-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
    url('../fonts/open-sans-v17-latin-regular.woff') format('woff'), /* Modern Browsers */
    url('../fonts/open-sans-v17-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
    url('../fonts/open-sans-v17-latin-regular.svg#OpenSans') format('svg');
    /* Legacy iOS */
}

/* open-sans-700 - latin */
@font-face {
    font-family: 'Open Sans Bold';
    font-style: normal;
    font-weight: 700;
    src: url('../fonts/open-sans-v17-latin-700.eot');
    /* IE9 Compat Modes */
    src: local('Open Sans Bold'), local('OpenSans-Bold'), url('../fonts/open-sans-v17-latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
    url('../fonts/open-sans-v17-latin-700.woff2') format('woff2'), /* Super Modern Browsers */
    url('../fonts/open-sans-v17-latin-700.woff') format('woff'), /* Modern Browsers */
    url('../fonts/open-sans-v17-latin-700.ttf') format('truetype'), /* Safari, Android, iOS */
    url('../fonts/open-sans-v17-latin-700.svg#OpenSans') format('svg');
    /* Legacy iOS */
}

* {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

html {
    font-size: 112.5%;
}

body {
    font-family: 'Open Sans';
    font-weight: 400;
    font-size: 1rem;
    line-height: 1;
}

.select-box{
    margin-bottom: 2rem;
    margin-top: 1rem;
}

.input-error {
    border-bottom: solid 3px red !important;
}

.input-error .checkmark {
    background-color: red !important;
}

.current-position {
    display: inline-block;
    text-align: right
}

.current-position h4 {
    line-height: 130%;
    color: #022169;
    font-size: 0.75rem;
    font-family: 'Open Sans Bold';
    margin: 0;
}

.current-position p {
    line-height: 130%;
    color: #C4C4C4;
    font-size: 0.75rem;
    font-family: 'Open Sans';
    margin: 0;
}

.rect-auto,
.c100.p75 .slice,
.c100.p100 .slice {
    clip: rect(auto, auto, auto, auto);
}

.pie,
.c100 .bar,
.c100.p75 .fill,
.c100.p100 .fill {
    position: absolute;
    border: 0.08em solid #022169;
    width: 0.84em;
    height: 0.84em;
    clip: rect(0em, 0.5em, 1em, 0em);
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
    border-radius: 50%;
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
}

.pie-fill,
.c100.p75 .bar:after,
.c100.p75 .fill,
.c100.p100 .bar:after,
.c100.p100 .fill {
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    transform: rotate(180deg);
}

.c100 {
    position: relative;
    font-size: 60px;
    margin: 0.5rem 0;
    width: 1em;
    height: 1em;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
    border-radius: 50%;
    float: right;
    background-color: #C4C4C4;
}

.c100 *,
.c100 *:before,
.c100 *:after {
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
    box-sizing: content-box;
}

.c100 > span {
    position: absolute;
    width: 100%;
    z-index: 1;
    left: 0;
    top: 0;
    width: 5em;
    line-height: 5em;
    font-size: 0.2em;
    color: #C4C4C4;
    display: block;
    text-align: center;
    white-space: nowrap;
    -webkit-transition-property: all;
    -moz-transition-property: all;
    -o-transition-property: all;
    transition-property: all;
    -webkit-transition-duration: 0.2s;
    -moz-transition-duration: 0.2s;
    -o-transition-duration: 0.2s;
    transition-duration: 0.2s;
    -webkit-transition-timing-function: ease-out;
    -moz-transition-timing-function: ease-out;
    -o-transition-timing-function: ease-out;
    transition-timing-function: ease-out;
}

.c100:after {
    position: absolute;
    top: 0.08em;
    left: 0.08em;
    display: block;
    content: " ";
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
    border-radius: 50%;
    background-color: #ffffff;
    width: 0.84em;
    height: 0.84em;
    -webkit-transition-property: all;
    -moz-transition-property: all;
    -o-transition-property: all;
    transition-property: all;
    -webkit-transition-duration: 0.2s;
    -moz-transition-duration: 0.2s;
    -o-transition-duration: 0.2s;
    transition-duration: 0.2s;
    -webkit-transition-timing-function: ease-in;
    -moz-transition-timing-function: ease-in;
    -o-transition-timing-function: ease-in;
    transition-timing-function: ease-in;
}

.c100 .slice {
    position: absolute;
    width: 1em;
    height: 1em;
    clip: rect(0em, 1em, 1em, 0.5em);
}

#control.back .c100.p0 .bar {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
    -webkit-animation-name: spin-0-b;
    -webkit-animation-duration: 0.2s;
    -webkit-animation-timing-function: linear;
}

@-ms-keyframes spin-0-b {
    from {
        -ms-transform: rotate(90deg);
    }

    to {
        -ms-transform: rotate(0deg);
    }
}

@-moz-keyframes spin-0-b {
    from {
        -moz-transform: rotate(90deg);
    }

    to {
        -moz-transform: rotate(0deg);
    }
}

@-webkit-keyframes spin-0-b {
    from {
        -webkit-transform: rotate(90deg);
    }

    to {
        -webkit-transform: rotate(0deg);
    }
}

@keyframes spin-0-b {
    from {
        transform: rotate(90deg);
    }

    to {
        transform: rotate(0deg);
    }
}

.c100.p25 .bar {
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    transform: rotate(90deg);
    -webkit-animation-name: spin-25;
    -webkit-animation-duration: 0.2s;
    -webkit-animation-timing-function: linear;
}

#control.back .c100.p25 .bar {
    -webkit-animation-name: spin-25-b;
}

@-ms-keyframes spin-25 {
    from {
        -ms-transform: rotate(0deg);
    }

    to {
        -ms-transform: rotate(90deg);
    }
}

@-moz-keyframes spin-25 {
    from {
        -moz-transform: rotate(0deg);
    }

    to {
        -moz-transform: rotate(90deg);
    }
}

@-webkit-keyframes spin-25 {
    from {
        -webkit-transform: rotate(0deg);
    }

    to {
        -webkit-transform: rotate(90deg);
    }
}

@keyframes spin-25 {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(90deg);
    }
}

@-ms-keyframes spin-25-b {
    from {
        -ms-transform: rotate(180deg);
    }

    to {
        -ms-transform: rotate(90deg);
    }
}

@-moz-keyframes spin-25-b {
    from {
        -moz-transform: rotate(180deg);
    }

    to {
        -moz-transform: rotate(90deg);
    }
}

@-webkit-keyframes spin-25-b {
    from {
        -webkit-transform: rotate(180deg);
    }

    to {
        -webkit-transform: rotate(90deg);
    }
}

@keyframes spin-25-b {
    from {
        transform: rotate(180deg);
    }

    to {
        transform: rotate(90deg);
    }
}

.c100.p50 .bar {
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    transform: rotate(180deg);
    -webkit-animation-name: spin-50;
    -webkit-animation-duration: 0.2s;
    -webkit-animation-timing-function: linear;
}

#control.back .c100.p50 .bar {
    -webkit-animation-name: spin-50-b;
}

@-ms-keyframes spin-50 {
    from {
        -ms-transform: rotate(90deg);
    }

    to {
        -ms-transform: rotate(180deg);
    }
}

@-moz-keyframes spin-50 {
    from {
        -moz-transform: rotate(90deg);
    }

    to {
        -moz-transform: rotate(180deg);
    }
}

@-webkit-keyframes spin-50 {
    from {
        -webkit-transform: rotate(90deg);
    }

    to {
        -webkit-transform: rotate(180deg);
    }
}

@keyframes spin-50 {
    from {
        transform: rotate(90deg);
    }

    to {
        transform: rotate(180deg);
    }
}

@-ms-keyframes spin-50-b {
    from {
        -ms-transform: rotate(180deg);
    }

    to {
        -ms-transform: rotate(180deg);
    }
}

@-moz-keyframes spin-50-b {
    from {
        -moz-transform: rotate(180deg);
    }

    to {
        -moz-transform: rotate(180deg);
    }
}

@-webkit-keyframes spin-50-b {
    from {
        -webkit-transform: rotate(180deg);
    }

    to {
        -webkit-transform: rotate(180deg);
    }
}

@keyframes spin-50-b {
    from {
        transform: rotate(180deg);
    }

    to {
        transform: rotate(180deg);
    }
}

.c100.p75 .bar {
    -webkit-transform: rotate(270deg);
    -moz-transform: rotate(270deg);
    -ms-transform: rotate(270deg);
    -o-transform: rotate(270deg);
    transform: rotate(270deg);
    -webkit-animation-name: spin-75;
    -webkit-animation-duration: 0.2s;
    -webkit-animation-timing-function: linear;
}

#control.back .c100.p75 .bar {
    -webkit-animation-name: spin-75-b;
}

@-ms-keyframes spin-75 {
    from {
        -ms-transform: rotate(180deg);
    }

    to {
        -ms-transform: rotate(270deg);
    }
}

@-moz-keyframes spin-75 {
    from {
        -moz-transform: rotate(180deg);
    }

    to {
        -moz-transform: rotate(270deg);
    }
}

@-webkit-keyframes spin-75 {
    from {
        -webkit-transform: rotate(180deg);
    }

    to {
        -webkit-transform: rotate(270deg);
    }
}

@keyframes spin-75 {
    from {
        transform: rotate(180deg);
    }

    to {
        transform: rotate(270deg);
    }
}

@-ms-keyframes spin-75-b {
    from {
        -ms-transform: rotate(360deg);
    }

    to {
        -ms-transform: rotate(270deg);
    }
}

@-moz-keyframes spin-75-b {
    from {
        -moz-transform: rotate(360deg);
    }

    to {
        -moz-transform: rotate(270deg);
    }
}

@-webkit-keyframes spin-75-b {
    from {
        -webkit-transform: rotate(360deg);
    }

    to {
        -webkit-transform: rotate(270deg);
    }
}

@keyframes spin-75-b {
    from {
        transform: rotate(360deg);
    }

    to {
        transform: rotate(270deg);
    }
}

.c100.p100 .bar {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
    -webkit-animation-name: spin-100;
    -webkit-animation-duration: 0.2s;
    -webkit-animation-timing-function: linear;
}

@-ms-keyframes spin-100 {
    from {
        -ms-transform: rotate(270deg);
    }

    to {
        -ms-transform: rotate(360deg);
    }
}

@-moz-keyframes spin-100 {
    from {
        -moz-transform: rotate(270deg);
    }

    to {
        -moz-transform: rotate(360deg);
    }
}

@-webkit-keyframes spin-100 {
    from {
        -webkit-transform: rotate(270deg);
    }

    to {
        -webkit-transform: rotate(360deg);
    }
}

@keyframes spin-100 {
    from {
        transform: rotate(270deg);
    }

    to {
        transform: rotate(360deg);
    }
}

.icon-bar {
    width: 40px;
    height: 3px;
    background-color: #C4C4C4;
    display: block;
    transition: all 0.2s;
    margin-top: 8px
}

.navbar-toggler:hover .icon-bar {
    background-color: #e9e9e9;
}

.navbar-toggler {
    border: none;
    background: transparent !important;
}

.navbar-toggler .top-bar {
    transform: rotate(45deg);
    transform-origin: 10% 10%;
}

.navbar-toggler .middle-bar {
    opacity: 0;
}

.navbar-toggler .bottom-bar {
    transform: rotate(-45deg);
    transform-origin: 10% 90%;
}

.navbar-toggler.collapsed .top-bar {
    transform: rotate(0);
}

.navbar-toggler.collapsed .middle-bar {
    opacity: 1;
}

.navbar-toggler.collapsed .bottom-bar {
    transform: rotate(0);
}

#step-0,
#step-1,
#step-2,
#step-3,
#step-4,
#step-5,
#step-6 {
    -webkit-animation: slide-down 0.3s ease-out;
    -moz-animation: slide-down 0.3s ease-out;
}

@-webkit-keyframes slide-down {
    0% {
        opacity: 0
    }

    100% {
        opacity: 1
    }
}

@-moz-keyframes slide-down {
    0% {
        opacity: 0
    }

    100% {
        opacity: 1
    }
}

#step-0,
#step-1,
#step-2,
#step-3,
#step-4,
#step-5,
#step-6 {
    display: none;
    opacity: 0;
}

#step-0.show,
#step-1.show,
#step-2.show,
#step-3.show,
#step-4.show,
#step-5.show,
#step-6.show {
    display: flex;
    opacity: 1;
}

header {
    background-color: #fff;
}

.content {
    padding-top: 40px;
    padding-bottom: 150px;
}

@media only screen and(max-width: 768px) {
    .content {
        padding-top: 50px;
        padding-bottom: 150px;
    }
}

footer {
    background-color: #fff;
    height: 50px;
}

#control {
    position: fixed;
    bottom: 0;
    height: 80px;
    background: #fff;
    width: 100%;
}

.nav-tabs .nav-link:focus,
.nav-tabs .nav-link:hover {
    border-color: transparent;
}

nav {
    margin-top: 25px;
    margin-bottom: 25px;
}

.navbar-nav {
    margin-top: 25px;
}

.row {
    display: flex;
}

button.navbar-toggler {
    border: solid 1px #fff;
    float: right;
    transition: 1s;
}

.navbar-toggler:hover .icon-bar {
    background-color: #000;
}

button.navbar-toggler:hover {
    background-color: #fff;
    border: solid 1px transparent;
}

button {
    border: 0;
    border-radius: 5px;
    background-color: #fff;
    cursor: pointer;
    transition: 0.2s;
}

button:hover,
button.active {
    background-color: #022169;
    color: #fff;
}

#step-back:hover {
    cursor: pointer;
}

#step-back.no-display {
    display: none;
}

#step-back {
    font-size: 1rem;
    font-family: 'Open Sans Bold';
}

.firmen-logo {
    height: 50px;
    max-width: 300px;
}

#buchung h2,#buchung h3 {
    font-size: 0.75rem;
    text-transform: uppercase;
    color: #7A7A7A;
    font-family: 'Open Sans Bold';
    line-height: 160%;
    letter-spacing: 0.05em;
}
#buchung h3 {
    text-align: right;
    text-transform: none; 
}

#buchung h3.termintyp-choice,#buchung h3.terminkategorie-direktbuchung-choice {
    margin-top: -1.70rem;  
}

@media (max-width: 800px) {
    #buchung h3.termintyp-choice,#buchung h3.terminkategorie-direktbuchung-choice {
        margin-top: 0!important;  
    }
}

#buchung p {
    font-size: 1.5rem;
    color: #022169;
    margin-bottom: 25px;
    font-family: 'Open Sans Bold';
    line-height: 130%;
    letter-spacing: -0.01em;
}

button.img {
    width: 100%;
    margin-top: 25px;
    margin-bottom: 10px;
    font-style: normal;
    text-align: left;
    padding-left: 1rem;
    padding-top: 1rem;
}

#step-2 button.img {
    padding-top: 0;
}

.mitarbeiter-btn,.terminkategorie-btn {
    min-height: 50px;
    padding: 0;
}

button.img img {
    height: 80px;
    width: 80px;
    object-fit: cover;
    object-position: top center;
    border-radius: 80px;
    margin: -27px 15px 10px 10px;
    position: relative;
}

button.img.mitarbeiter-btn img {
    margin: -15px 15px 10px 10px;
}

button.img.with-extras img {
    margin-top: -15px;
}

button.img.mitarbeiter-btn img,button.img.terminkategorie-btn img {
    margin-left: 0;
}

#mitarbeiter-0 {
    line-height: 1rem;
    font-size: 1rem;
    margin-bottom: 20px;
}

#mitarbeiter-0 span {
    font-size: 0.8rem;
    margin-left: 103px;
    margin-top: -2rem;
    margin-bottom: 2rem;
    display: block;
}

@media only screen and(max-width: 600px) {
    button.img {
        margin-top: 15px;
    }

    #mitarbeiter-0 span {
        margin-left: 83px;
    }

    button.img img {
        height: 65px;
        margin-right: 10px;
        margin-left: 7px;
        margin-top: -15px;
    }

    button.img.mitarbeiter-btn img,button.img.terminkategorie-btn img {
        margin-left: 0;
    }
}

.carousel-control-next,
.carousel-control-prev {
    width: auto;
}

.carousel-control-prev-icon,
.carousel-control-next-icon {
    height: 30px;
    width: 30px;
}

.carousel-control-prev-icon {
    background-image: url("../../resources/img/arrow_left.svg");
}

.carousel-control-next-icon {
    background-image: url("../../resources/img/arrow_right.svg");
}

.carousel-control-prev-icon:hover {
    background-image: url("../../resources/img/arrow_left_hover.svg");
}

.carousel-control-next-icon:hover {
    background-image: url("../../resources/img/arrow_right_hover.svg");
}

.carousel-control-prev-icon.icon-small {
    background-image: url("../../resources/img/arrow_small_left.svg");
}

.carousel-control-next-icon.icon-small {
    background-image: url("../../resources/img/arrow_small_right.svg");
}

.carousel-control-prev-icon.icon-small:hover {
    background-image: url("../../resources/img/arrow_small_left_hover.svg");
}

.carousel-control-next-icon.icon-small:hover {
    background-image: url("../../resources/img/arrow_small_right_hover.svg");
}

#month h3 {
    text-align: center;
    color: #000;
    font-size: 1rem;
    line-height: 1.1rem;
    font-family: 'Open Sans Bold';
}

#day {
    overflow-x: scroll;
    overflow-y: hidden;
    white-space: nowrap;
    background-color: #fff;
    margin-top: 1rem;
    padding: 0.5rem 0 1rem;
    list-style: none;
}

#day .day-btn {
    display: inline-block;
    cursor: pointer;
    margin: 0 1rem;
}

#day .day-btn.not-available {
    opacity: 0.3;
    cursor: not-allowed;
}

#day {
    margin-bottom: 20px;
    width: 100%;
    -webkit-overflow-scrolling: touch;
}

#day::-webkit-scrollbar {
    display: none;
}

#day .day-n {
    display: inline-block;
    padding: 0.5rem 0.6rem;
    border-radius: 50%;
}

#day .day-btn:hover .day-n,
#day .day-btn.active .day-n {
    background: #022169;
    color: #fff !important;
}

#day p {
    margin: 0;
    color: #000 !important;
    font-size: 1.2rem;
    font-family: 'Open Sans';
}

#day .day-m {
    font-size: 0.8rem;
}


#time {
    margin-top: 1.5rem;
}

#time .time-btn p {
    color: #000;
    font-family: 'Open Sans';
    font-size: 0.8rem;
    border: solid 1px #000;
    border-radius: 20px;
    display: inline-block;
    padding: 0.5rem 1rem;
    background-color: #fff;
    cursor: pointer;
    margin: 0 0 0.5rem;
}


#time .time-btn p:hover,
#time .time-btn.active p {
    background: #022169;
    color: #fff;
}

.not-available {
    display: none;
}

.day-btn.not-available:hover .day-n,
.time-btn.not-available p:hover {
    background: none;
    color: none;
}

#edit {
    background: #fff;
    border-radius: 5px;
    padding: 1rem;
}

#edit h4 {
    color: #7A7A7A;
    font-size: 0.75rem;
    font-family: 'Open Sans Bold';
    line-height: 160%;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.edit-btn {
    cursor: pointer;
}

.edit-btn i {
    background-image: url("../../resources/img/edit.svg");
    content: "";
    display: inline-block;
    height: 20px;
    width: 20px;
    margin-top: 5px;
    float: right;
    background-repeat: no-repeat;
    transition: 0.2s;
}

.edit-btn:hover i {
    background-image: url("../../resources/img/edit_hover.svg");
}

#edit p {
    font-size: 1rem;
    font-family: 'Open Sans';
    color: #000 !important;
    margin: 0;
    display: inline-block;
}

#send-btn i {
    background-image: url("../../resources/img/send.svg");
    content: "";
    display: inline-block;
    height: 30px;
    width: 30px;
    margin-left: 1rem;
    background-repeat: no-repeat;
    margin-bottom: -9px;
}

#send-btn {
    background-color: #022169;
    padding: 0.5rem 0 1rem;
}

#send-btn:hover {
    background-color: #00A925;
    padding: 0.5rem 0 1rem;
}

#send-btn:hover i {
    background-size: contain;
    background-image: url("../../resources/img/haken.svg");
}

#send-btn p {
    display: inline-block;
    color: #fff;
    font-size: 1rem;
    line-height: 20px;
    margin: 0;
    color: #fff !important;
}

#step-6 .text {
    font-family: 'Open Sans';
    color: #000;
    font-size: 1rem;
    line-height: 140%;
    padding: 0 2rem;
}

#step-6 head-text {
    line-height: 130%;
    letter-spacing: -0.01em;
}

.icon-check {
    padding: 2rem;
    border-radius: 50%;
    background-color: #00A925;
    margin: auto;
}

.form-control {
    border: 0;
    padding: 1rem;
    height: auto;
}

form .form-control::-webkit-input-placeholder {
    color: #C4C4C4;
}

form .form-control::-moz-placeholder {
    color: #C4C4C4;
}

form .form-control:-ms-input-placeholder {
    color: #C4C4C4;
}

form .form-control:placeholder {
    color: #C4C4C4;
}

label.dsvgo,label.marketing {
    font-size: 0.8rem;
    line-height: 20px;
    margin-top: -5px;
}

.form-check {
    display: block;
    position: relative;
    padding-left: 35px;
    margin-bottom: 12px;
    cursor: pointer;
    font-size: 22px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.form-check input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}

.checkmark {
    border-radius: 3px;
    position: absolute;
    top: 0;
    left: 0;
    height: 25px;
    width: 25px;
    background-color: #fff;
}

.form-check:hover input ~ .checkmark {
    background-color: #fff;
}

.form-check input:checked ~ .checkmark {
    background-color: #fff;
}

.checkmark:after {
    content: "";
    position: absolute;
    display: none;
}

.form-check input:checked ~ .checkmark:after {
    display: block;
}

.form-check .checkmark:after {
    left: 10px;
    top: 5px;
    width: 7px;
    height: 12px;
    border: solid #000;
    border-width: 0 2px 2px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}

.delete-site .content,
.delete-site .middle {
    padding-top: 1rem;
    padding-bottom: 1rem;
}

.delete-site .content .button:hover {
    text-decoration: none;
    background: #fff;
    color:#23c3dd;
}

.delete-site .content .button {
    background: #23c3dd;
    color:#fff;
    padding: 0.5rem;
    border: solid 1px;
    display: inline-block;
    width: 100px !important;
}

#loader-wrapper {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1000;
}
#loader {
    display: block;
    position: relative;
    left: 50%;
    top: 50%;
    width: 150px;
    height: 150px;
    margin: -75px 0 0 -75px;
    border-radius: 50%;
    border: 3px solid transparent;
    border-top-color: #2B383E;

    -webkit-animation: spin 1s linear infinite; /* Chrome, Opera 15+, Safari 5+ */
    animation: spin 1s linear infinite; /* Chrome, Firefox 16+, IE 10+, Opera */
}

#loader:before {
    content: "";
    position: absolute;
    top: 5px;
    left: 5px;
    right: 5px;
    bottom: 5px;
    border-radius: 50%;
    border: 3px solid transparent;
    border-top-color: #E1A09E;

    -webkit-animation: spin 4s linear infinite; /* Chrome, Opera 15+, Safari 5+ */
    animation: spin 4s linear infinite; /* Chrome, Firefox 16+, IE 10+, Opera */
}

#loader:after {
    content: "";
    position: absolute;
    top: 15px;
    left: 15px;
    right: 15px;
    bottom: 15px;
    border-radius: 50%;
    border: 3px solid transparent;
    border-top-color: #2AC8B5;

    -webkit-animation: spin 2.5s linear infinite; /* Chrome, Opera 15+, Safari 5+ */
    animation: spin 2.5s linear infinite; /* Chrome, Firefox 16+, IE 10+, Opera */
}
@-webkit-keyframes spin {
    0% {
        -webkit-transform: rotate(0deg); /* Chrome, Opera 15+, Safari 3.1+ */
        -ms-transform: rotate(0deg); /* IE 9 */
        transform: rotate(0deg); /* Firefox 16+, IE 10+, Opera */
    }
    100% {
        -webkit-transform: rotate(360deg); /* Chrome, Opera 15+, Safari 3.1+ */
        -ms-transform: rotate(360deg); /* IE 9 */
        transform: rotate(360deg); /* Firefox 16+, IE 10+, Opera */
    }
}
@keyframes spin {
    0% {
        -webkit-transform: rotate(0deg); /* Chrome, Opera 15+, Safari 3.1+ */
        -ms-transform: rotate(0deg); /* IE 9 */
        transform: rotate(0deg); /* Firefox 16+, IE 10+, Opera */
    }
    100% {
        -webkit-transform: rotate(360deg); /* Chrome, Opera 15+, Safari 3.1+ */
        -ms-transform: rotate(360deg); /* IE 9 */
        transform: rotate(360deg); /* Firefox 16+, IE 10+, Opera */
    }
}

@media only screen and (max-width: 600px) {
    button.icon i {
        font-size: 0.9rem;
        margin-left: 10px;
        padding-left: 70px;
        padding-top: 5px;
        /* background-size: 12%; */
        margin: 10px 10px 10px 15px;
    }
    
}

#buchung .termin-preis,#buchung .termin-preis-2,#buchung .termin-info,#buchung .terminkategorie-info,#buchung .terminkategorie-zusatzinfo-direktbuchung ,#buchung .mitarbeiter-zusatz,#buchung .mitarbeiter-name,#buchung .termintyp-btn-txt,#buchung .terminkategorie-zusatz,#buchung .terminkategorie-name{
    color: rgba(0, 0, 0, 0.847);
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
    transition: 0.2s;
}

#buchung .mitarbeiter-name{
    margin-top:1rem;
    margin-bottom: 1.1rem;
}

#buchung .mitarbeiter-name.with-img,#buchung .mitarbeiter-zusatz.with-img,#buchung .mitarbeiter-btn.with-img .mitarbeiter-name,#buchung .terminkategorie-name.with-img,#buchung .terminkategorie-zusatz.with-img,#buchung .terminkategorie-btn.with-img .terminkategorie-name{
    margin-left: 95px;
}

button.img.mitarbeiter-btn img,button.img.terminkategorie-btn img{
    position: absolute;
}

#buchung .termin-info,#buchung .terminkategorie-info,#buchung .terminkategorie-zusatzinfo-direktbuchung{
    line-height: 1.5;
}

button.icon:hover .termin-zeitbedarf,button.icon:hover .termin-preis-2,button.icon:hover .termin-preis,button.icon:hover .termin-info,button.icon:hover .terminkategorie-info,button.active .termin-zeitbedarf,button.active .termin-preis-2,button.active .termin-preis, button.active .termin-info,button.active p.mitarbeiter-zusatz,button:hover p.mitarbeiter-zusatz,button:hover p.mitarbeiter-name,button.active p.mitarbeiter-name,button:hover .termintyp-btn-txt,button.active .termintyp-btn-txt{
    color: #fff!important;
}

#buchung .terminkategorie-zusatzinfo-direktbuchung{
    padding: 2px 4px;
    margin-bottom: 40px;
    margin-top: 10px;
}


#buchung .termin-preis,#buchung .termin-zeitbedarf{
    font-family: 'Open Sans Bold';
    color: #022169;
    position: absolute;
    bottom: -10px;
    right: 25px;
    font-size: 0.8rem;
}

#buchung .termin-preis-2{
    font-family: 'Open Sans Bold';
    color: #022169;
    position: absolute;
    top: 10px;
    right: 25px;
    font-size: 0.8rem;
}

#buchung .mitarbeiter-zusatz,#buchung .terminkategorie-zusatz {
    right: 25px;
    padding-right: 15px;
    font-size: 0.8rem;
    margin-bottom: 1rem;
    margin-top: -0.5rem;
}

#buchung .termin-info,#buchung .terminkategorie-info{
    display: none;
    padding: 2px 4px;
}


  .highlight-container, .highlight {
    position: relative;
  }
  
  .highlight-container {
    display: inline-block;
  }
  .highlight-container:before {
    content: " ";
    display: block;
    height: 160%;
    width: 101%;
    margin-left: 0px;
    margin-right: 0px;
    position: absolute;
    background: #f5ff00;
    transform: rotate(-1deg);
    top: -25px;
    left: -20px;
    border-radius: 20% 25% 20% 24%;
    padding: 10px 3px 3px 10px;
  }

@media (max-width: 768px) {
  .highlight-container:before {
            left: -5px;

    }
}

#buchung .termin-info.active,#buchung .terminkategorie-info.active{
    display: block;
}

#termintyp-info-row,#termintyp-terminkategorie-info-row{
    display: none;
    margin-bottom: 30px;
    margin-top: 40px;
}

#termintyp-info-row.active,#termintyp-terminkategorie-info-row.active{
    display: flex;
    padding-bottom:15px;
}

.sub-text-termin{
    font-size: 1.2rem!important;
    font-family: 'Open Sans'!important;
    margin-bottom: 25px !important;
}
#termintyp-info-row .termin-info,#termintyp-terminkategorie-info-row .terminkategorie-info{
    margin: 0;
    margin-top: -5px;
}

.disable-hover  {
    pointer-events: none!important;
  }

  .with-ma.dont-show{
    display: none;
  }


  #kategorie-bild-img{
    height: 80px;
    width: 80px;
    object-fit: cover;
    object-position: top center;
    border-radius: 80px;
    margin: 0 15px 20px 0px;
    position: relative;
/*    border: solid #000 2px;*/
}

#kategorie-bild.hide{
display: none;
}

button.termintyp-terminkategorie-btn  {
    padding: 0;
    margin: 0;
}

button.termintyp-terminkategorie-btn img{
    margin: 0;
    margin: 5px 0px 5px 15px;
    height: 60px;
    width: 60px;
    border: solid #23c3dd 2px;
}

button.termintyp-terminkategorie-btn p{
    display: inline-block;
    padding: 0;
    margin: 0;
}

button.termintyp-terminkategorie-btn{
    margin-bottom: 10px;
}

#step-1 button.termintyp-terminkategorie-btn .terminkategorie-name{
    margin-left: 10px;
}

#step-0 button.img.terminkategorie-btn img{
    border: solid #23c3dd 2px;
}

.email-tag {
    display: inline-block;
    padding: 6px 10px;
    border-radius: 15px;
    background-color: #23c3dd;
    margin: 2px 4px;
    font-size: 1rem;
    white-space: nowrap;
}

.email-preview {
    background-color: #fff;
    border: 1px dashed #23c3dd;
    font-style: italic;
    padding: 6px 10px;
    border-radius: 15px;
    margin: 2px 4px;
    font-size: 1rem;
    display: inline-block;
}

.add-tag {
    margin-left: 5px;
    font-weight: bold;
    font-size: 1.1em;
    cursor: pointer;
}

.tag-input-wrapper:focus-within {
    border-color: #23c3dd;
    box-shadow: 0 0 0 0.2rem rgba(0,123,255,.25);
}

.email-input {
    outline: none;
    border: none;
    padding: 6px 0;
    min-height: 32px;
    font-size: 1rem;
    flex-grow: 1;
}