input[type=text] { 
   
    width: 47.7%; 
    padding:  10px 15px 10px 15px;
    margin:0 5px 15px 5px;  
    display: inline-block;
    border: 1px solid #D8D8D8; 
    box-sizing:border-box;
    border-radius:4px;
    font-size:16px;
    color: #9B9B9C;
    box-shadow: 0px 0px 15px 0px rgba(0,0,0,0.15);

} 
  
  
.container-modal-appointment textarea {              /*the text-comment aerea of the modal form*/
    background:#ffffff;
    border: 1px solid #D8D8D8;
    width: 97%;
    display: block;
    height: 110px;
    outline: none;
    font-size: 16px;
    color: #9B9B9C;
    font-weight: 500;
    margin:  0 5px 15px 5px;
    padding:  10px 15px 10px 15px ;
    box-shadow: 0px 0px 15px 0px rgba(0,0,0,0.15);  
    border-radius:4px;
   

}

.modal-appointment-title h3 {
	text-align:center; color:#f44336; font-weight:bold;
	padding-top:25px; font-size:25px;
}

.modal-appointment-title p {
	color:#000000; font-size:15px;  font-weight:normal;
	padding-top:25px; padding-bottom:15px;  padding-left:20px;
	text-align:left;
}
	
 
 
.modal-content-book button[type=submit] {
  
    color: #f44336;  font-weight:700;                            /* format of submit button*/
    padding: 14px 24px;
    letter-spacing: 1px;
    font-size: 15px;
    background: transparent;
    display: inline-block;
    border: 0px solid rgba(255, 255, 255, 0.56);
    box-shadow: 0px 0px 15px 0px rgba(255, 255, 255, 0.15);
    background-color:#000000;
    width:18%;
    margin-top:8px;
    margin-left:5px; margin-right:5px; 
}


 .modal-content-book button:hover { 
    opacity: 1;  background-color: #000000; color:#ffffff;
} 
  
  
.cancelbtn { 
    width: auto; 
    padding: 10px 18px; 
    background-color: #f44336; 
} 
  
  
.imgcontainer { 
    text-align: center; 
    margin: 24px 0 12px 0; 
    position: relative; 
    
} 
  
img.avatar { 
    width: 40%; 
    border-radius: 50%; 
} 
  
.container-modal-appointment { 
    padding: 16px;
     
}


span.psw { 
    float: right; 
    padding-top: 16px; 
} 
  
  
.modalbook { 
    display: none;  
    position: fixed;
    z-index: 1;  
    left: 0; 
    top: 0; 
    width: 100%; 
    height:100%; 
    overflow:hidden;  
    background-color: rgb(0,0,0); 
    background-color: rgba(0,0,0,0.4); 
    padding-top: 60px; 
} 
  
  
.modal-content-book { 
    background-color:#fafafa; 
    margin: 4% auto 0% auto;  
    border: 2px solid #fafafa; 
    width: 50%;  
    height:88%;
    border-radius:10px;
    box-shadow: 0px 0px 15px 0px rgba(0,0,0,0.15); 
    
    
} 
  
.close { 
    position: absolute; 
    right: 25px; 
    top: -15px; 
    color: #000; 
    font-size: 2rem; 
    font-weight: bold; 
} 
  
.close:hover, 
.close:focus { 
    color: red; 
    cursor: pointer; 
} 
  
.animate { 
    -webkit-animation: animatezoom 0.3s; 
    animation: animatezoom 0.3s 
} 
  
@-webkit-keyframes animatezoom { 
    from {-webkit-transform: scale(0)}  
    to {-webkit-transform: scale(1)} 
} 
    @keyframes animatezoom { 
    from {transform: scale(0)}  
    to {transform: scale(1)} 
} 
@media screen and (max-width: 300px) { 
    span.psw { 
       display: block; 
       float: none; 
    } 
    .cancelbtn { 
       width: 100%; 
    } 
}