#terminbuchung .btn-lg {
  font-size: 1.25rem;
}

#terminbuchung .col-8-shrink .card {
  min-height: 755px
}

#terminbuchung .col-8-shrink, #terminbuchung .col-4-shrink .shrink-inner {
	padding-left: 15px;
	padding-right: 15px;
}

#terminbuchung .col-8-shrink {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 calc(100% - 370px);
    flex: 0 0 calc(100% - 370px);
    max-width: calc(100% - 370px);
}

#terminbuchung .col-4-shrink {
    -webkit-box-flex: 0;
    -ms-flex: 370px;
    flex: 370px;
    width: 370px;
    opacity: 1;
}

#terminbuchung .col-4-shrink.col-shrink {
	overflow: hidden;
	flex: 0;
	width: 0;
	opacity: 0;
}

#terminbuchung .col-4-shrink .shrink-inner {
	width: 370px;
}


#terminbuchung .badge {
    height: 20px;
    width: 20px;
    margin-right: .5em;
	background: #6c757d;
	border-radius: 1em;
	color: #FFF;
	line-height: 1.25;
}

#terminbuchung .badge.badge-primary {
	background: var(--primary);
}

#terminbuchung #courseGroup > div {
	margin-left: -1em;
	margin-right: -1em;
}

#terminbuchung #courseType .v-s-boxes > div {
	flex: 1 1 calc(50% - 1em);
	max-width: 50%;
	min-width: 75px;
  min-height: 75px;
  margin: 0 !important
}

#terminbuchung #courseType .v-s-boxes > div:first-of-type {
	margin-right: 0;
	border-top-left-radius: .5em;
	border-bottom-left-radius: .5em;
}

#terminbuchung #courseType .v-s-boxes > div + div, #terminbuchung #courseType .v-s-boxes > div:last-of-type {
	margin-left: 3px;
}

#terminbuchung #courseType .v-s-boxes > div:last-of-type {
	border-top-right-radius: .5em;
	border-bottom-right-radius: .5em;	
}

#terminbuchung #courseGroup .v-s-boxes {
    flex: 1 1 calc(50% - 2em);
    max-width: calc(50% - 2em);
    margin-left: 1em;
    margin-right: 1em;
}

#terminbuchung #courseGroup .v-s-boxes > div {
	min-width: 250px;
    min-height: 250px;	
    margin: 0.5em 0;
	border-radius: .5em;
    background-size: cover !important;
}

#terminbuchung #courseGroup .v-s-boxes > div.active + span {
	color: var(--primary);
	font-weight: bold;
}

#terminbuchung #courseGroup .v-s-boxes > span , #terminbuchung .v-s-boxes .v-s-box {
	font-size: 1.25em;
}

#terminbuchung .v-s-boxes .v-s-box.active {
  box-shadow: 0px 0px 0px 3px #6eaca7;
  border-color: #FFF !important;
	background-color: #D8ECEA !important;
	font-weight: bold !important;
  z-index: 1
}

#terminbuchung .v-s-boxes .v-s-box .course-badge {
    top: 1em;
    right: 1em;
    background: rgb(110 172 167);
    padding: 0 0.5em;
    border-radius: 0.25em;
    font-weight: bold;
    color: rgb(255 255 255);
}

#terminbuchung .v-s-boxes .v-s-box.active .course-badge {
    background: rgb(255 255 255);
    color: rgb(110 172 167);
}

#terminbuchung .img-rounded {
	border-radius: .5em;
}

#terminbuchung .transition {
	-moz-transition: all 300ms;
	-webkit-transition: all 300ms;
	transition: all 300ms;
}

#terminbuchung .btn-course { 
  color: #ffffff; 
  background-color: #FF5722; 
  border-color: #FF5722;  
} 

#terminbuchung .btn-course.bg-transparent { 
  color: #FF5722 !important;  
} 
 
#terminbuchung .btn-course.bg-transparent svg * { 
  stroke: #FF5722 !important;  
} 

#terminbuchung .btn-course:hover, 
#terminbuchung .btn-course:focus, 
#terminbuchung .btn-course:active, 
#terminbuchung .btn-course.active, 
.open .dropdown-toggle.btn-course { 
  color: #ffffff; 
  background-color: #FF3C00; 
  border-color: #FF5722; 
}

#terminbuchung .btn-course:focus, 
#terminbuchung .btn-course.active { 
  box-shadow: 0 0 0 0.2rem rgb(255 87 34 / 25%);
} 
 
 
#terminbuchung .btn-course:active, 
#terminbuchung .btn-course.active, 
.open .dropdown-toggle.btn-course { 
  background-image: none; 
} 
 
#terminbuchung .btn-course.disabled, 
#terminbuchung .btn-course[disabled], 
fieldset[disabled] .btn-course, 
#terminbuchung .btn-course.disabled:hover, 
#terminbuchung .btn-course[disabled]:hover, 
fieldset[disabled] .btn-course:hover, 
#terminbuchung .btn-course.disabled:focus, 
#terminbuchung .btn-course[disabled]:focus, 
fieldset[disabled] .btn-course:focus, 
#terminbuchung .btn-course.disabled:active, 
#terminbuchung .btn-course[disabled]:active, 
fieldset[disabled] .btn-course:active, 
#terminbuchung .btn-course.disabled.active, 
#terminbuchung .btn-course[disabled].active, 
fieldset[disabled] .btn-course.active { 
  background-color: #FF5722; 
  border-color: #FF5722; 
} 
 
#terminbuchung .btn-course .badge { 
  color: #FF5722; 
  background-color: #ffffff; 
}

#terminbuchung .totals {
	float: left;
	width: 100%;
}

#terminbuchung .totals > dt, #terminbuchung .totals > dd {
	float: left;
}

#terminbuchung .totals > dt {
	width: 70%;
}

#terminbuchung .totals > dd {
	width: 30%;
}

#terminbuchung .input-unit {
	border-width: 2px;
    border-radius: .2rem;
}

#terminbuchung input, #terminbuchung select {
	height: 50px;
	font-size: 1.25em;
}


#terminbuchung select {
	width: 100%;
	padding: .5em 1em;
	border-width: 2px;
	border-radius: .2rem;
	border-color: #dee2e6;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='25' height='25' viewBox='0 0 24 24' fill='none' stroke='%236c757d' stroke-width='2' stroke-linecap='square' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: calc(100% - .5em) center;
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
}
#terminbuchung select::-ms-expand {
   display: none;
}

#terminbuchung .course-cart + .hide, #terminbuchung .totals + .hide, #terminbuchung .course-cart + .course-cart, #terminbuchung .addDate + .addDate {
	display: none !important;
}


#terminbuchung #changeDate {
    position: relative;
    top: 10px;
    margin-top: -3rem;
}

#terminbuchung .participant-group {
	margin-left: -7.5px;
	margin-right: -7.5px;
	margin-bottom: -15px;
}

#terminbuchung .participant-group > div[class^=col] {
	padding-left: 7.5px;
	padding-right: 7.5px;
}

#terminbuchung .participant-group input[id^=participant].d-none + label {
	display: none !important;
}

#terminbuchung .participant-group input[id^=participant] {
    display: block;
	height: calc(50px + 4px);
    width: 100%;
	margin-bottom: 15px;
    padding: 1.3rem 1rem 0.3rem;
    overflow: hidden;
    font-size: 1.25em;
    line-height: 1.2em !important;
    color: rgb(73 80 87);
    text-overflow: ellipsis;
    white-space: nowrap;
    background-color: rgb(255 255 255);
    border: 2px solid rgb(222 226 230);
	border-radius: 0.2rem;
    -webkit-box-shadow: none;
    box-shadow: none;
    -webkit-transition: all .2s;
    transition: all .2s;
}

#terminbuchung .participant-group input:disabled, #terminbuchung select:disabled {
	cursor: not-allowed;
    background-color: rgb(248 249 250);
}

#terminbuchung .participant-group input[id^=participant] + label {
    position: absolute;
    top: 2px;
    left: 0;
    width: 100%;
    padding: 0.35rem 1rem 0;
    margin-bottom: 0;
    overflow: hidden;
    font-size: .65em;
    font-weight: 600;
    line-height: 1em !important;
    color: rgb(173 181 189);
    text-overflow: ellipsis;
    text-transform: uppercase;
    letter-spacing: .1px;
    white-space: nowrap;
    cursor: pointer;
    -webkit-transition: color .15s;
    transition: color .15s;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    pointer-events: none;
}

#terminbuchung .list-comma + .list-comma:before, .basket-list-item .list-comma + .list-comma:before  {
	content: ', ';
}

#terminbuchung #courseDates > option.d-none + option {
  display: none
}

.alert-success {
    color: rgb(110 172 167);
    background-color: #E9F2F2;
    border-color: #E9F2F2;
}

p.sload.stxtblock, span.sload.stxtblock {
  display: block;
}


.sload:after, .sloadInitial:after {
  content: 'Einen Augenblick...';
  display: flex !important;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: 0;
  left: 15px;
  display: block;
  height: 100%;
  width: calc(100% - 30px);
  padding-top: 5em;
  background: #eee;
  background: linear-gradient(110deg, #ececec 8%, #f5f5f5 18%, #ececec 33%);
  border-radius: 5px;
  background-size: 200% 100%;
  opacity: 1;
  -webkit-animation: 1.5s shine linear infinite, 2s hide linear forwards;
          animation: 1.5s shine linear infinite, 2s hide linear forwards;
  z-index: 1;
  font-size: 20px;
  pointer-events: none;
  color: #6eaca7;
}


.sload:before, .sloadInitial:before {
   content: '';
   position: absolute;
   top: 50%;
   left: 50%;
   width: 50.4px;
   height: 67.2px;
   --c: linear-gradient(#6eaca7 0 0);
   background: var(--c) 0%   100%,
        var(--c) 50%  100%,
        var(--c) 100% 100%;
   background-size: 10.1px 65%;
   background-repeat: no-repeat;
   -webkit-animation: bars-1hcj36 0.8s infinite linear, 2s hide linear forwards;
           animation: bars-1hcj36 0.8s infinite linear, 2s hide linear forwards;
   -webkit-transform: translate(-50%, -50px);
          transform: translate(-50%, -50px);
    z-index: 10;
}

.arrow_box {
	position: relative;
	background: #FFFFFF;
	border: 1px solid #dfdfdf;
  border-radius: 0.25em;
}
.arrow_box:after, .arrow_box:before {
	top: 100%;
	left: calc(100% - 1.85em);
	border: solid transparent;
	content: "";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
}

.arrow_box:after {
	border-color: rgba(255, 255, 255, 0);
	border-top-color: #FFFFFF;
	border-width: 7px;
	margin-left: -7px;
}
.arrow_box:before {
	border-color: rgba(223, 223, 223, 0);
	border-top-color: #dfdfdf;
	border-width: 8px;
	margin-left: -8px;
}

.custom-select-tb { 
  padding: 0; 
  overflow: hidden;
  height: 100%;
  max-height: 50px;
  width: 100%;
  border: 2px solid #dee2e6;
  border-radius: 0.2rem;
  font-size: 1.25em;
          appearance: none;
  -webkit-appearance: none;
     -moz-appearance: none;
  cursor: pointer;
    -webkit-transition: height 300ms;
       -moz-transition: height 300ms;
            transition: height 300ms;

}

.custom-select-tb * {
  -webkit-touch-callout: none;
    -webkit-user-select: none;
     -khtml-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;
}

.custom-select-tb.open-cs {
  height: 100%;
  max-height: 275px;
  overflow-y: auto;
  border-color: #000
}

.custom-select-tb.disabled {
  pointer-events: none;
  touch-action: none;
  opacity: .75;
}

.custom-select-tb > div {
    display: flex;
    align-items: center;
    height: 50px;
    width: 100%;
}

.custom-select-tb > div > label {
    display: flex;
    align-items: center;
    margin: 0;
    padding: 0 1em; 
    width: 100%;
    height: 100%;
    -webkit-transition: background 300ms;
       -moz-transition: background 300ms;
            transition: background 300ms;
    cursor: pointer
}

.custom-select-tb > div > label {
  display: flex;
  justify-content: space-between
}

.custom-select-tb > div > input:checked + label {
  font-weight: bold
}

.custom-select-tb > div.ph {
    position: sticky;
    top: 0;
    z-index: 1;
    background-color: rgb(255 255 255);
 	  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='25' height='25' viewBox='0 0 24 24' fill='none' stroke='%236c757d' stroke-width='2' stroke-linecap='square' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: calc(100% - 0.5em) 12.5px;
    box-shadow: 0px 5px 20px -15px rgb(0 0 0 / 50%);
}

.custom-select-tb > div:not(.ph) > label {
  display: flex
}

.custom-select-tb > div:not(.ph) > label:hover,
.custom-select-tb > div:not(.ph) > input:checked + label {
  background: #EEE
}

.custom-select-tb > div:not(.ph) > label > .signal {
  display: block;
  min-width: 120px;
  padding: .125em .5em;
  border-radius: .2rem;
  background: #DDD;
  text-align: center;
  font-weight: normal;
  line-height: 1.125;
  color: #FFF
}

.custom-select-tb > div:not(.ph) > label > .signal.s1 {
  background: #317f43;
}

.custom-select-tb > div:not(.ph) > label > .signal.s2 {
  background: #a02128;
}

.custom-select-tb > div > input {
  display: none
}


@keyframes bars-1hcj36 {
  20% {
     background-position: 0% 50% ,50% 100%,100% 100%;
  }

  40% {
     background-position: 0% 0%  ,50% 50% ,100% 100%;
  }

  60% {
     background-position: 0% 100%,50% 0%  ,100% 50%;
  }

  80% {
     background-position: 0% 100%,50% 100%,100% 0%;
  }
}

@-webkit-keyframes shine {
    to {
      background-position-x: -200%;
    }
  }
  
  @keyframes shine {
    to {
      background-position-x: -200%;
    }
  }

  @-webkit-keyframes hide {
    99% {
      opacity: 1;
    }
    to {
      opacity: 0;
    }
  }
  
  @keyframes hide {
    99% {
      opacity: 1;
    }
    100% {
      opacity: 0;
    }
  }


  @media(max-width: 991px) {
    #terminbuchung .col-4-shrink, #terminbuchung .col-8-shrink  {
      -webkit-box-flex: 0;
      -ms-flex: 0 0 100%;
      flex: 0 0 100%;
      max-width: 100%;    
    }
    #terminbuchung .col-4-shrink .shrink-inner {
      width: 100%;
    }
  }

  @media(min-width: 676px) {
    #terminbuchung #courseType .v-s-boxes {
    	flex-wrap: nowrap !important
    }
  }

  @media(max-width: 675px) {
    #terminbuchung #courseType .v-s-boxes > div {
      flex: 1 1 calc(100% - 1em);
      max-width: 100%;     
      margin: 0 !important
    }
    #terminbuchung #courseType .v-s-boxes > div:first-of-type {
      border-radius: 0.5em 0.5em .1rem .1rem;
    }
    #terminbuchung #courseType .v-s-boxes > div:last-of-type {
      border-radius: .1rem .1rem 0.5em 0.5em;
    }
    #terminbuchung #courseGroup .v-s-boxes {
      flex: 1 1 calc(100% - 2em);
      max-width: calc(100% - 2em);
      margin-left: 1em;
      margin-right: 1em;
    }
  }
  @media(max-width: 575px) {
    #terminbuchung .custom-select-tb > div {
      font-size: 16px;
    }
    .custom-select-tb > div:not(.ph) > label > .signal {
      min-width: 55px;
      width: 100%;
      max-width: 55px;
    }
  }