.required {
    border: 1px solid red !important;
}
.ErrorInput {
    border: 4px solid red !important;
}

input[type=submit]:hover {
   
    background:#009A44; 
    border:0 none;
    cursor:pointer;
}

.RegionTermintextError {
font-size:15px!important;

}
.RegionTerminBeschreibungError {
font-size:15px!important;
color:red !important;
}

input[type=submit]:disabled {
    background: #dddddd;
    border: 0 none;
}

.modalButton {
  font-family: "Roboto", sans-serif;
  text-transform: uppercase;
  outline: 0;
  background: #888447;
  width: 100%;
  border: 0;
  height:30px;
  
  color: #FFFFFF;
  font-size: 14px;
  -webkit-transition: all 0.3 ease;
  transition: all 0.3 ease;
  cursor: pointer;
}
.modalButton:hover,.modalButton:active,.modalButton:focus {
  background: #a49f55;
}
span{
font-size:1.25em;	
}
#TerminEintrag{
	display:none;	
}
#Termintext{
font-size:1.25em;		
	
}
#TerminBeschreibung{
font-size:1.25em;		
	
}
#login-header {
margin: 10px;

	
}
th{
color:#666666;	
}
#inputForm {
  font-family: "Roboto", sans-serif;
  outline: 0;
  background: #f2f2f2 ;
  width: 100%;
  border: 0;
  margin: 0 0 15px;
  padding: 15px;
  box-sizing: border-box;
  font-size: 14px;
  border-color:  #b3b3b3 ;
}
#Tagesliste{
	color:#666666;	
	
}
option,#infotext{
	color:#666666;	
	
}
.ungerade:hover {
	background-color:silver !important;
	cursor:pointer;
}
.gerade:hover {
	background-color:silver !important;
	cursor:pointer;
}
.gerade:hover>.sorting_1 {
	background-color:silver !important;
	cursor:pointer;
}
.ungerade:hover>.sorting_1 {
	background-color:silver !important;
	cursor:pointer;
}

.ungerade {
	background-color:#f2f2f2 !important;
	background-color:#f2f2f2 !important;
	cursor:pointer;
}
.gerade {
	bgcolor:white !important;
	background-color:white !important;
	cursor:pointer;
}

.required {
    border: 1px solid red !important;
}

	.toggleButton {
                position: relative;
                margin-top:10px;
                float: left;
                margin-left: 2px;
                height: 40px;
                width: 40px;
	
                border:1px solid #009A44;
                -webkit-border-radius: 3px; 
                -moz-border-radius: 3px;
                border-radius: 3px;

                text-decoration:none; 
                display:inline-block;
                text-shadow: -1px -1px 0 rgba(0,0,0,0.3);
                font-weight:bold; color: #FFFFFF;
                /*background-color: #ffd65e; background-image: -webkit-gradient(linear, left top, left bottom, from(#ffd65e), to(#febf04));
                background-image: -webkit-linear-gradient(top, #ffd65e, #febf04);
                background-image: -moz-linear-gradient(top, #ffd65e, #febf04);
                background-image: -ms-linear-gradient(top, #ffd65e, #febf04);
                background-image: -o-linear-gradient(top, #ffd65e, #febf04);
                background-image: linear-gradient(to bottom, #ffd65e, #febf04);filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#ffd65e, endColorstr=#febf04);
                */
                   background-color: #009A44; background-image: -webkit-gradient(linear, left top, left bottom, from(#009A44), to(#009A44));
                background-image: -webkit-linear-gradient(top, #009A44, #009A44);
                background-image: -moz-linear-gradient(top, #009A44, #009A44);
                background-image: -ms-linear-gradient(top, #009A44, #009A44);
                background-image: -o-linear-gradient(top, #009A44, #009A44);
                background-image: linear-gradient(to bottom, #009A44, #009A44);filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#009A44, endColorstr=#009A44);


            }
.toggleButtonG {
	            
                height: 40px;
                width: 40px;
                float:right;
                position:relative;
                margin-top:-3px;
                  border:1px solid #009A44;
                -webkit-border-radius: 3px; 
                -moz-border-radius: 3px;
                border-radius: 3px;

                text-decoration:none; 
                display:inline-block;
                text-shadow: -1px -1px 0 rgba(0,0,0,0.3);
                font-weight:bold; color: #FFFFFF;
                /*background-color: #ffd65e; background-image: -webkit-gradient(linear, left top, left bottom, from(#ffd65e), to(#febf04));
                background-image: -webkit-linear-gradient(top, #ffd65e, #febf04);
                background-image: -moz-linear-gradient(top, #ffd65e, #febf04);
                background-image: -ms-linear-gradient(top, #ffd65e, #febf04);
                background-image: -o-linear-gradient(top, #ffd65e, #febf04);
                background-image: linear-gradient(to bottom, #ffd65e, #febf04);filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#ffd65e, endColorstr=#febf04);
                */
                   background-color: #009A44; background-image: -webkit-gradient(linear, left top, left bottom, from(#009A44), to(#009A44));
                background-image: -webkit-linear-gradient(top, #009A44, #009A44);
                background-image: -moz-linear-gradient(top, #009A44, #009A44);
                background-image: -ms-linear-gradient(top, #009A44, #009A44);
                background-image: -o-linear-gradient(top, #009A44, #009A44);
                background-image: linear-gradient(to bottom, #009A44, #009A44);filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#009A44, endColorstr=#009A44);


            }
            /* The Modal (background) */
.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 10000; /* Sit on top */
    padding-top: 100px; /* Location of the box */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

/* Modal Content */
.modal-content {
    position: relative;
    background-color: #fefefe;
    margin: auto;
    padding: 0;
    border: 1px solid #888;
    width: 80%;
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
    -webkit-animation-name: animatetop;
    -webkit-animation-duration: 0.4s;
    animation-name: animatetop;
    animation-duration: 0.4s
    
}
.modal-content table span {
   color:black;
    
}


/* The Close Button */
.close {
    color: white;
    float: right;
    font-size: 28px;
    font-weight: bold;
}

.close:hover,
.close:focus {
    color: #000;
    text-decoration: none;
    cursor: pointer;
}

.modal-header {
    padding: 2px 16px;
    background-color: #e1e0cb;
    color: #888888;
}


.modal-body {padding: 2px 16px;}

.modal-footer {
    padding: 2px 16px;
    background-color: #5cb85c;
    color: white;
}

table.dataTable>tbody>tr.child span.dtr-title {
    display: block;
    min-width: 75px;
    font-weight: bold;
}

.dataTables_scrollHeadInner
{
  width:100% !Important;  
}
table{
	width:100% !important;	
}

.progressbar-wrapper {
      background: #fff;
      width: 100%;
      padding-top: 10px;
      padding-bottom: 5px;
}

.progressbar li {
      list-style-type: none;
      width: 30%;
      float: left;
      display: inline;
      font-size: 12px;
      position: relative;
      text-align: center;
      text-transform: uppercase;
      color: #81a651;
      
}

.progressbar li:before {
    width: 60px;
    height: 60px;
    content: "";
    line-height: 60px;
    border: 2px solid #81a651;
    display: block;
    text-align: center;
    margin: 0 auto 3px auto;
    border-radius: 50%;
    position: relative;
    z-index: 2;
    background-color: #fff;
}
.progressbar li:after {
     width: 100%;
     height: 2px;
     content: '';
     position: absolute;
     background-color: #81a651;
     top: 30px;
     left: -50%;
     z-index: 0;
}
.progressbar li:first-child:after {
     content: none;
}
.progressbar li.active {
    color: green;
    font-weight: bold;  
}
.progressbar li.active:before {
    border-color: #81a651;
    background: #81a651;
 }
.progressbar li.active + li:after {
    background-color: #81a651;
}
#step1.active:before {
    background: #81a651  url(../images/user.svg) no-repeat center center;
    background-size: 60%;
}

#step1::before {
    background: #fff url(../images/user.svg) no-repeat center center;
    background-size: 60%;
}

#step2.active:before {
    background: #81a651  url(../images/Calendar.svg) no-repeat center center;
    background-size: 60%;
}

#step2::before {
    background: #fff url(../images/Calendar.svg) no-repeat center center;
    background-size: 60%;
}
#step3.active:before {
    background: #81a651  url(../images/List.svg) no-repeat center center;
    background-size: 60%;
}

#step3::before {
    background: #fff url(../images/List.svg) no-repeat center center;
    background-size: 60%;
}
#step4.active:before {
    background: #81a651  url(../images/Check.svg) no-repeat center center;
    background-size: 60%;
}

#step4::before {
    background: #fff url(../images/Check.svg) no-repeat center center;
    background-size: 60%;
}
.progressbar {
    counter-reset: step;
}

#firstpage {
	padding-top:5px;	
	
}
.progressbar {
  display: flex;
  align-items: center;
  justify-content: center;
  
}

#Reservierung{

margin-top:15px;	
margin-left:20px;	
}

#Auswahl:hover{
	cursor: hand;
}
ul {
  list-style: none;
}
#wrapper {

	width:80%;
   	margin:auto;
   	
}
div {
    display: block;
}
#Views {
margin-left: auto;
	margin-right: auto;	
	width:100%;
	margin-right: -15px;
    margin-left: -15px;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin-right: -15px;
    margin-left: -15px;
    }
#RegionViews {
margin-left: auto;
	margin-right: auto;	
	width:100%;
	margin-right: -15px;
    margin-left: -15px;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin-right: -15px;
    margin-left: -15px;
    }    
#TimeSlot {
margin-left: auto;
	margin-right: auto;	
	width:100%;
	margin-right: -15px;
    margin-left: -15px;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin-right: -15px;
    margin-left: -15px;


}
.hiddenButton{
	display:none;	
}

.View {
	font-weight:bold;
	text-align:center;
	
	position: relative;
    width: 150px;
    min-height: 1px;
    height:50px !important;
    padding-right: 5px;
    padding-left: 5px;
    padding-top: 5px;
}
.RegionView {
	font-weight:bold;
	text-align:center;
	
	position: relative;
    width: 250px;
    min-height: 1px;
    height:50px !important;
    padding-right: 5px;
    padding-left: 5px;
    padding-top: 5px;
}

.Modality {
	width:100%;
	height:35px;
	float:left;
	font-weight:bold;
	text-align:center;
	
    display:table;	
    border:1px solid #e1e1e1;
}

.Modality:hover{
	 border-color: #81a651;
            background: #81a651;
            color: #fff;
            cursor:hand;
}

#Schritt2{
	
	
display:none;
}

#bodyRegion{
display:none;	
}

.buttons {
width:100%;
height:50px;
border:1px solid red;
display:table;	
}
.buttons:hover{
	 border-color: #009A44;
            background: #009A44;
            color: #fff;
            cursor:hand;
}

.buttonsList {
width:100%;
height:50px;
border:1px solid red;
display:table;
color: #666666;
border-color: #dddddd;
background: #dddddd;	
}
.buttonsList:hover{
	 border-color: #009A44;
            background: #009A44;
            color: #fff;
            cursor:hand;
}


.selectedTime {
	
	border-color: #009A44;
    background: #009A44;
    color: #fff;
}
.selectedItem {
	
	border-color: #009A44;
    background: #009A44;
    color: #fff;
}
span{
display:table-cell;
    vertical-align: middle;
}
.Bez{
    padding: 1.25em;
    margin-left:0px;	
  
    color:white;
    height:20px;
    margin-top:85px;
    position:absolute;
    width:100%;
    
    text-align: left;
} 
.Anzahl{
	float:right;
	margin-right:30px;
	padding-top:45px;
	font-size:140%;	
	color:white;
}

#left{
float:left;
width:50%;	
}

#right{
float:right;
width:50%;	
}
#leftfifth{
float:left;
width:30%;	
}

#rightfifth{
float:left;
width:70%;	
}

.Modality {
    width: 100%;
    height: 35px;
    float: left;
    font-weight: bold;
    text-align: center;
    display: table;
    border: 1px solid #e1e1e1;
}

@media only screen and (max-width: 576px)
{
    #leftfifth {
        float: left;
        width: 70%;
    }

    #rightfifth {
        float: left;
        width: 70%;
    }
.progressbar li {
      list-style-type: none;
      width: 25%;
      float: left;
      display: inline;
      font-size: 10px;
      position: relative;
      text-align: center;
      text-transform: uppercase;
      color: #7d7d7d;
      
}
.progressbar li:before {
    width: 30px;
    height: 30px;
    content: "";
    line-height: 30px;
    border: 2px solid #7d7d7d;
    display: block;
    text-align: center;
    margin: 0 auto 3px auto;
    border-radius: 50%;
    position: relative;
    z-index: 2;
    background-color: #fff;
}
    .Modality {
        width: 100%;
        height: 35px;
        float: left;
        font-weight: bold;
        text-align: center;
        display: table;
        border: 1px solid #e1e1e1;
    }
}
.progressbar li:before {
    width: 60px;
    height: 60px;
}
@media only screen and (min-width: 280px)
{

	.Modality {
	width:100%;	
}
	.progressbar li:before {
    width: 60px;
    height: 60px;
 
	}
.View {
   -ms-flex: 0 0 40%;
    flex: 0 0 40%;
    max-width: 40%;
    width: 140px;
	}
\
@media only screen and (min-width: 576px)
{

	.Modality {
	width:100%;	
}
	.progressbar li:before {
    width: 60px;
    height: 60px;
 
	}
.View {
   -ms-flex: 0 0 40%;
    flex: 0 0 40%;
    max-width: 40%;
    width: 140px;
	}
	
.Bez{
    
} 
#left{
float:left;
width:100%;	
}

#right{
float:right;
width:100%;	
}
	
}



@media only screen and (min-width: 320px)
{
    #leftfifth {
        float: left;
        width: 70%;
    }

    #rightfifth {
        float: left;
        width: 70%;
    }

.Modality {
	width:100%;	
}
#left{
float:left;
width:100%;	
}
#thirdpagewrapper{
	padding-left:5%;
	width:280px;	
}

#right{
float:right;
width:100%;	
}
#date{
	margin:0 auto;
	}
}



@media only screen and (min-width: 768px)
{
    #leftfifth {
        float: left;
        width: 30%;
    }

    #rightfifth {
        float: left;
        width: 70%;
    }
	#thirdpagewrapper{
	padding-left:5%;
	width:700px;	
}
	.progressbar li:before {
    width: 60px;
    height: 60px;
 
	}
.View {
   -ms-flex: 0 0 40%;
    flex: 0 0 40%;
    max-width: 40%;
    
	}
	
.Bez{
    
} 
#left{
float:left;
width:50%;	
}

#right{
float:right;
width:50%;	
}

.Modality {
	width:100%;	
}
	
}

@media only screen and (min-width: 992px)

{
	
	#thirdpagewrapper{
	padding-left:0px;	
}
.tel {
	width:200px;	
}
#date{
	width:50%;	
	margin:0 auto;
	}
	#left{
float:left;
width:50%;	
}

#right{
float:right;
width:50%;	
}
.View {

    
    -ms-flex: 0 0 25%;
    flex: 0 0 25%;
    max-width: 25%;
	}
	.Bez{
   
}
	
}
#fifthpagewrapper{
	
	
}
#HumanbodyFirst{
	height:600px;
		
}
#HumanbodyStandard{
	height:600px;	
	display:none;
}
#HumanbodyGefaesse{
	height:600px;	
	display:none;
}
@media only screen and  (min-width: 1368px)

{
	.Modality {
	width:100%;	
}
.View {

    
    -ms-flex: 0 0 25%;
    flex: 0 0 25%;
    max-width: 25%;
	}
	.Bez{
   
}

#fifthpagewrapper{
	
	
}
#HumanbodyFirst{
	height:600px;
		
}
#HumanbodyStandard{
	height:600px;	
	display:none;
}
#HumanbodyGefaesse{
	height:600px;	
	display:none;
}
}
@media only screen 
    and (device-width : 375px) 
    and (device-height : 812px) 
    and (-webkit-device-pixel-ratio : 3) { 
    
#left{
float:left;
width:100%;
	
}
#left > div{
width:100% !important;
margin:0 auto !important;	
}
#right{
float:right;
width:100%;	
}
#wrapper{
width:100% !important;
margin:0 auto !important;		
} 
 .flatpickr-calendar  {
	margin:0 auto !important; 
 } 
   
 #TimeSlot {
	 margin:0 auto !important;
	 
 }  
  #Views {
	 margin:0 auto !important;
	 
 }
 }
 
@media only screen 
    and (device-width : 375px) 
    and (device-height : 667px) { 
    
#left{
float:left;
width:100%;
	
}
#left > div{
width:100% !important;
margin:0 auto !important;	
}
#right{
float:right;
width:100%;	
}
#wrapper{
width:100% !important;
margin:0 auto !important;		
} 
 .flatpickr-calendar  {
	margin:0 auto !important; 
 } 
   
 #TimeSlot {
	 margin:0 auto !important;
	 
 }  
  #Views {
	 margin:0 auto !important;
	 
 }
 }   
@media only screen 
    and (device-width : 411px)  { 
    
#left{
float:left;
width:100%;
	
}
#left > div{
width:100% !important;
margin:0 auto !important;	
}
#right{
float:right;
width:100%;	
}
#wrapper{
width:100% !important;
margin:0 auto !important;		
} 
 .flatpickr-calendar  {
	margin:0 auto !important; 
 } 
   
 #TimeSlot {
	 margin:0 auto !important;
	 
 }  
  #Views {
	 margin:0 auto !important;
	 
 }
 }   

@media only screen 
    and (device-width : 414px)  { 
    
#left{
float:left;
width:100%;
	
}
#left > div{
width:100% !important;
margin:0 auto !important;	
}
#right{
float:right;
width:100%;	
}
#wrapper{
width:100% !important;
margin:0 auto !important;		
} 
 .flatpickr-calendar  {
	margin:0 auto !important; 
 } 
   
 #TimeSlot {
	 margin:0 auto !important;
	 
 }  
  #Views {
	 margin:0 auto !important;
	 
 }
 }   
b {
	
font-weight:bold;	
}

#TerminDownload {
  margin-top: 5px;
  margin-bottom: 5px;
  display: inline-block;
  padding: 6px 12px;
  margin-bottom: 0;
  font-size: 14px;
  font-weight: normal;
  line-height: 1.428571429;
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
  cursor: pointer;
  border: 1px solid transparent;
  border-radius: 4px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  -o-user-select: none;
  cursor: pointer;
  color: #ffffff;
  text-decoration: none;
  font-weight: bold;
  border-color: #009A44;
  background: #009A44;
  font-family: sans-serif;
  width: 150px;
}

/* #iPhone 10 
================================================== */
/* Note: Design for a width of 480px */
@media only screen and (device-width : 375px) and (device-height : 812px) and (-webkit-device-pixel-ratio : 3) {

    #leftfifth {
        float: left;
        width: 50%;
    }

    #rightfifth {
        float: left;
        width: 70%;
    }
}
/* # iPad Pro */

================================================== */
/* Note: Design for a width of 480px */
@media only screen
and (min-width: 1024px)
and (max-height: 1366px)
and (-webkit-min-device-pixel-ratio: 1.5) {
}

/* Portrait */
@media only screen and (min-width: 1024px) and (max-height: 1366px) and (orientation: portrait) and (-webkit-min-device-pixel-ratio: 1.5) {
}

/* Landscape */
@media only screen and (min-width: 1024px) and (max-height: 1366px) and (orientation: landscape) and (-webkit-min-device-pixel-ratio: 1.5) {
}
/* Add Animation */
@-webkit-keyframes animatetop {
    from {top:-300px; opacity:0} 
    to {top:0; opacity:1}
}

@keyframes animatetop {
    from {top:-300px; opacity:0}
    to {top:0; opacity:1}
}

input[type=submit] {
    
    margin: 15 0 15px;
    
}
label,
input[type="radio"] + span,
input[type="radio"] + span::before,
label,
input[type="checkbox"] + span,
input[type="checkbox"] + span::before
{
    display: inline-block;
    vertical-align: middle;
}
 
label *,
label *
{
    cursor: pointer;
}
 

 
input[type="checkbox"] + span
{
    font: normal 11px/14px Arial, Sans-serif;
    color: #333;
}
 
label:hover span::before,
label:hover span::before
{
    -moz-box-shadow: 0 0 2px #ccc;
    -webkit-box-shadow: 0 0 2px #ccc;
    box-shadow: 0 0 2px #ccc;
}
 
label:hover span,
label:hover span
{
    color: #000;
}
 
input[type="checkbox"] + span::before
{
    content: "";
    width: 12px;
    height: 12px;
    margin: 0 4px 0 0;
    border: solid 1px #a8a8a8;
    line-height: 14px;
    text-align: center;
     
    -moz-border-radius: 100%;
    -webkit-border-radius: 100%;
    border-radius: 100%;
     
    background: #f6f6f6;
    background: -moz-radial-gradient(#f6f6f6, #dfdfdf);
    background: -webkit-radial-gradient(#f6f6f6, #dfdfdf);
    background: -ms-radial-gradient(#f6f6f6, #dfdfdf);
    background: -o-radial-gradient(#f6f6f6, #dfdfdf);
    background: radial-gradient(#f6f6f6, #dfdfdf);
}
 

input[type="checkbox"]:checked + span::before
{
    color: #666;
}
 

input[type="checkbox"] + span::before
{
    -moz-border-radius: 2px;
    -webkit-border-radius: 2px;
    border-radius: 2px;
}
 
input[type="checkbox"]:checked + span::before
{
    content: "\2714";
    font-size: 12px;
}
.portfolio-hoverLeft,.portfolio-hoverRight {
     width: 360px;
    height: 320px;
    border: 1px solid #6493e8;
    position: absolute;
    /*background: rgba(204,0,0, 0.8);*/
    -webkit-transition: all ease .5s;
    -moz-transition: all ease .5s;
    transition: all ease .5s;
    	border-radius: clamp(clamp(0.5rem,0.5rem + 3*(min(100vw,200vh) - 32rem)/710,0.8rem),min(100vw,200vh)/1440*8,1.0666666667rem);
}
.fa-3 {
    font-size: 2.5em !important;
}
.portfolio-hover-content {
    position: absolute;
    top: 50%;
    width: 360px;
    height: 20px;
    margin-top: -12px;
    text-align: center;
    font-size: 20px;
    color: #81a651;
}
.PortfolioItem {
    width: 360px;
    height:320px;
    padding: 2% 0 0;
    margin: auto;
}