body {
          font-size:16px;
          font-family:sans-serif;
          color:black;
          margin:0px;
            background-size: cover !important;
}
#Container {
    margin-top:20px;
            margin-left:auto;
              margin-right:auto;
           max-width:800px
}
h1, h2, h3 {
            margin:0px;padding:0px;
}
h1 { font-size:1.2em ;  padding: 15px;  border-bottom:1px solid white}
h2 {}
h3 {}
.link {
    color:blue;
     text-decoration:none;
}
    .link:hover {
    text-decoration:underline;
    }
/* LAYOUT ===================== */
#CompanyLogo {
      padding:10px;
      padding-left:30px;
            text-align: left;
}
    #CompanyLogo img {
    max-height: 120px;
    }  

.Col1 {  
  width: 450px;
  float:left;
  padding-left:10px;
 
}
.Col2 {
    
  width: 310px;
  float:left;
  padding-left:25px;

}

.Col1a {  
  padding:0px;
  float:left;
 margin-right:10px;
}
.Col2a {
    
    padding-left:0px;
  float:left;
 
}

/* AJAX MESSAGE */
#ajaxmessage {   
      width:200px;
     
      padding:15px;
      font-size:17px;
      margin:auto;
        }


 #ErrorMessage { padding:15px; margin-top:10px; color:red; border:2px solid red}

/*==SERVICE LIST =============================*/

#HeaderServices {
cursor:pointer;
}

   #FooterServices {
       cursor:pointer;
            padding:18px;
            font-size:18px;
            background-color:#fafafa;
            font-weight:bold;
        }
.fa-clock-o {
color: #c0c0c0;
}


.selecticon {
    color: #f0f0f0;
    margin-top:-5px;
}
.selecticon i {
    font-size:30px;
}
/* green color: #83d154;*/
.ui-state-active2  .selecticon {
      color: orange;
}
.ui-state-active2 {
 background-color:#fcfcfc !important;
}
#SelectedService {
        padding:15px;
        background-color:#fafafa;
        cursor:pointer;
        font-size:19px;
}
#SelectedService:hover {
    background-color:#fafafa
    }
 #placeholderServicesList {
    max-height:600px;  
    width:100%;
    overflow:auto;
      -webkit-overflow-scrolling: touch;
    }
        .onlineservicelist {
            width:100%;  
        }
        .onlineservicelist dd:hover {
            cursor:pointer;
            }
        .onlineservicelist dd {
          padding:5px;
          position:relative;
          border-bottom:1px solid white;
          background-color: #e9f6fa;
        }
         .onlineservicelist dl {
            margin: 0px;
        }
        .onlineservicelist {
          margin:0px;padding:0px;margin-bottom:1px
        }

        .onlineservicelist dt {
            font-size: 1.2em;
             padding: 15px;
             border:1px solid white;
            background-color: #f0f0f0;
        }
        .onlineservicelist .ServiceName {
            font-size:1.0em;  
            }
        .onlineservicelist dt {
            margin: 0px;
        }
         .onlineservicelistxx dt:hover {
                background-color: #fafafa;
                cursor: pointer;
            }
          .onlineservicelist dd:hover {       
               background-color: #f9f9f9;
                cursor: pointer;
        }

        .onlineservicelist dd {
            background-color: #fff;
            margin: 0px;
            border-top:1px solid white;
            border-bottom:1px solid #e5e5e5;
            padding: 15px;
            padding-left:24px;
            font-size: 1em;
        }
        .durationlabel {
                float:left; 
                font-size:13.5px;
                color:#999;
            }
        .shortdescription, 
        .longdescription {
                    font-size:13.5px;
                    color:#999;
             
        }
           
        .ui-state-active .shortdescription,  .ui-state-active .fa-clock-o ,
        .ui-state-active .longdescription 
             {
                   color: #fff;
            }
            .more {
                    padding-left:5px;
                    color:orange
            }
            .ui-state-active .more {
                   padding-left:5px;
                   color:black;
            }

          .more:hover,
          .more:hover {
                text-decoration:underline;
                }

     
/* CONTAINER DATE TIME */
.container-datetimepickers {
        /* @Background */
        background-color: #ededed;
        padding:5px;
    }

.ui-wide {
         width:100%;
         height:200px;
         background-color:#e9f6fa
}

.FullyBooked {
background-color:#ff958d ;
    padding:20px;

}

/* Select resource*/
#selectresource {
        font-size:17px;
        margin:auto;
     
     
     
}

#selectresource-container select {
       padding:8px;
    width:90%;
}

/* DATEPICKER ====================== */




.ui-datepicker-unselectable {
    height:35px !important;
}


.ui-datepicker { width:100%; font-size:19px ; margin-top:5px;}
.ui-datepicker-header {width:250px;margin:auto;margin-bottom:10px;}
.ui-datepicker-prev {   float:left ; cursor:pointer }
a.ui-datepicker-prev:hover {   cursor:pointer}
.ui-datepicker-next {  float:right ; cursor:pointer }
a.ui-datepicker-prev:hover {   cursor:pointer }
.ui-datepicker-title {     text-align:center}
.ui-datepicker-calendar {clear:both; margin:auto}
.ui-datepicker-calendar th {
 font-size:1em;
 height:35px;
}
.ui-state-disabled { background-color:transparent !important;background-color:#f0f0f0 !important;color:#a0a0a0 }
.ui-datepicker-calendar td {
  border:0px solid black;
  
  text-align:center;
  background-color:white;
}
.ui-datepicker-calendar td a {
  text-decoration:none;
   line-height:35px;
  display:inline-block;
  width:34px;
   color: black;
}
.NoneSlotsFree  {
     /* @Background */
     border: 0px solid #ededed !important;
       background-color: #ededed !important;
           color:#ccc !important;
}
 .NoneSlotsFree a {
      /* @Background */
          color:#ccc !important;
            background-color: #ededed !important;
            border: 0px solid #ededed!important;
           color:grey;
        }
        .OneSlotFree a {
           
        }
        .TwoSlotsFree a {
           
        }

 
/* TIMEPICKER ========================*/
.timeslotscontainer {
  max-height:155px; overflow:auto;  
}

#timepickerheader {
text-align:center;
margin:10px;
font-size:19px;
}
 
.ui-timepicker { font-size:19px; margin:auto }
.ui-timepicker  td  {
     margin:4px;
  text-align:center;
  background-color:white;
}

.ui-timepicker  td a {
   
    text-decoration:none;
    display:inline-block;
    width:62px;
    color: black;
     line-height:35px;
}


/* BUTTONS =================*/

 
  

.nextbutton {
cursor: pointer;
            text-align: center;
            display: inline-block;
            
           background-color: transparent;
            font-size: 16px;
            color: white;
            text-decoration: none;
            font-weight: bold;
            border:1px solid white;
}
 .selectbutton-container {
           text-align:center;margin-top:20px;
           
        }

 .selectbutton {
            cursor: pointer;
            text-align: center;
          width:240px;
          
            display: inline-block;
            padding:15px;
            background-color: #ff9e36;
            font-size: 16px;
            color: white;
            text-decoration: none;
            font-weight: bold;
            
            /*border:1px solid black;*/
        }

 .selectbutton:hover {
         
              opacity: 0.8; 
             background-color: #feb76b;
                
            }
  .selectbutton-disabled {
           display:none !Important;
            color: #f0f0f0;
            background-color: #d0d0d0 !important;
        }

 .selectbutton-disabled:hover {
                cursor: default;
                color: #909090;
                background-color: #d0d0d0;
         }
.selectbutton-small {
width:auto;
padding:5px;
}
.redbutton {
            width:auto;
            padding:5px;
            cursor: pointer;
            text-align: center;
            color:white !important;
            background-color: red !important;
        }

 /* == CUSTOMER DETAILS  ===*/
.orderedservices {
list-style:none;

padding:0px;margin:0px;
}
    .orderedservices li {
    font-size:16px;
    padding: 5px 2px;
    }
.reserveSelectedservice {
   font-size:22px;font-weight:bold
}
 /* CUSTOMER FORM ===================== */

input:read-only { 
    background-color: #f0f0f0;
    color:#a0a0a0;
}
#CustomerDetailsContainer {
    /* @Background */
      
    padding:20px;
  


}
    #CustomerDetailsContainer #Footer {
    font-family:MinionPro;
    }
#CustomerDetailData {
        width:90%;
        }


    #CustomerDetailData input, #CustomerDetailData textarea {
        padding: 15px;
        width: 100%;
        font-size: 14px;
        border: 0px;
        margin: 4px 0px;
        border: 1px solid #aaa;
        max-width: 450px;
    }


    #appointmentdetails .Price {
font-size:20px;
}
 #appointmentdetails {
      /* @Background */
             padding:10px;
            background-color: #ededed;
              color:black;
              min-height:470px;
}

.appointmentdetailsheader { 
    border-top:1px solid #c0c0c0;

}
 

/* Validatie */
#CustomerDetailData label {
              /* width:100%; */ 
              float:left;
                text-align:right;
                vertical-align:top;
                display:inline-block;
               /* margin-top:-5px; */
                
}
#CustomerDetailData label.error  {
                color: #ff6e48;
               
}
 #CustomerDetailData input.error {
             background-image: url(/Images/notvalid.png);
             background-position:center right;
             background-repeat:no-repeat;
         }

 /* Appointmentdetails */
.Appointment {
list-style:none;
}
#appointmentdetails dl {
    margin:0px;padding:0px;
    margin-bottom:20px;
 
}
#appointmentdetails dt {
        font-size:19px;
         
    color: #5f5f5f;
    font-weight: bold;
    padding-left: 15px;
}
#appointmentdetails dd {
      margin:0px;padding: 5px 0px;
      padding-left:10px;
}

/* CONFIRMMESSAGE -------------*/
.confirm {padding:10px} 
.confirm h2 {padding:0px;margin:0px;}  
.btnReserveNext {color:black !important; display:inline-block; padding:30px ; border:2px solid #909090 ; margin: 5px 0px 10px 0px;  } 
.btnReserveNext:hover { background-color:#f0f0f0;  color:black !important; text-decoration:underline } 


   .resourceslist {
            width:100%;  
        }
        .resourceslist dd:hover {
            cursor:pointer;
            }
        .resourceslist dd {
          padding:5px;
          position:relative;
           margin:0px;
           text-align:left;
          background: #f0f0f0;
           border-bottom: 1px solid #d0d0d0;
        }
         .resourceslist dl {
            margin: 0px;
        }
        .resourceslist {
          margin:0px;padding:0px;margin-bottom:1px
        }

        .resourceslist dt {
            font-size: 1.2em;
             padding: 15px;
             border:1px solid white;
            background-color: #f0f0f0;
        }
        .resourceslist .ServiceName {
            font-size:1.0em;  
            }
        .resourceslist dt {
            margin: 0px;
        }
         .resourceslist dt:hover {
                background-color: #fafafa;
                cursor: pointer;
            }
          .resourceslist dd:hover {       
               background-color: #f9f9f9;
                cursor: pointer;
        }

        .onlineservicelist dd  {
            background-color: #fff;
            margin: 0px;
            border-top:1px solid white;
            border-bottom:1px solid #e5e5e5;
            padding: 15px;
            padding-left:24px;
            font-size: 1em;
        }
      #nextbutton1, #nextprevious1, #NextArrow1,.previousstep {
    
        display:none;
        }      
      
 /* style radio button */

.payment div {
  
  margin-top:20px !important;
  margin-bottom:20px;
}

.payment input[type="radio"] {
    display:none;
}
.payment input[type="radio"] + label {
    color: #292321;
    font-family:sans-serif;
    font-size:14px;
    padding:10px;
}
.payment input[type="radio"] + label span {
    display:inline-block;
    width:14px;
    height:14px;
    margin:-1px 4px 0 0;
    vertical-align:middle;
    cursor:pointer;
    -moz-border-radius:  50%;
    border-radius:  50%;
    border:4px solid #d0d0d0;
}

 .paymentinput[type="radio"] + label span {
     background-color:#292321;
    
}

.payment input[type="radio"]:checked + label span{
     background-color:#5f5f5f;
   
}

.payment input[type="radio"] + label span,
input[type="radio"]:checked + label span {
  -webkit-transition:background-color 0.4s linear;
  -o-transition:background-color 0.4s linear;
  -moz-transition:background-color 0.4s linear;
  transition:background-color 0.4s linear;
}

#appointmentdetails h1 {
 color:#5f5f5f;
 border-color:#d0d0d0;
 padding:0px;
}

#btnNextButton, #btnBackButton {
 display:none !important;
}
/*
#totalprice {
 float:right;
}*/
 

.flag {
    display: inline-block;
    width: 25px;
    height: 15px;
    background: url(../../Images/flags1.png) no-repeat;
}

.profileimageitem {
background-position: top center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
width:48px;
height:48px;
border-radius:50%;
overflow:hidden;
float: left;
margin-right:5px;
border:1px solid #d0d0d0;
}
#next-step-animation {
    width: 20px;
    height: 20px;
    position: relative;
}

     

    #next-step-animation.myease-in-out {
        -webkit-animation: mymove 1.3s infinite;
        -webkit-animation-timing-function: ease-in-out;
        animation: mymove 1.3s infinite;
    }

 

@-webkit-keyframes mymove /* Safari and Chrome */
{
    from {
        left: 0px;
    }

    to {
        left: 5px;
    }

    0% {
        -webkit-transform: translate(0);
        transform: translate(0);
        opacity: 0;
    }

    70% {
        -webkit-transform: translate(7px);
        transform: translate(7px);
        opacity: 1;
    }

    100% {
        -webkit-transform: translate(10px);
        transform: translate(10px);
        opacity: 0;
    }
}

@keyframes mymove {
    from {
        left: 0px;
    }

    to {
        left: 5px;
    }

    0% {
        -webkit-transform: translate(0);
        transform: translate(0);
        opacity: 0;
    }

    70% {
        -webkit-transform: translate(7px);
        transform: translate(7px);
        opacity: 1;
    }

    100% {
        -webkit-transform: translate(10px);
        transform: translate(10px);
        opacity: 0;
    }
}


@media screen and (max-width: 500px) {

 

    #CustomerDetailData input, #CustomerDetailData textarea {
        
        max-width: 250px;
    }
}