/* THIS IS IN USE */
/* fixes issue whereby the modal does not show but the backdrop dims to gray*/
.modal {
display: block;
height: 0;
overflow: visible;
}
.modal-body:before,
.modal-body:after {
display: table;
content: " ";
}
.modal-header:before,
.modal-header:after {
display: table;
content: " ";
}

/*fixes issue whereby modal height & width is too big on mobile device rendering save and cancel buttons non accessible*/
/*http://stackoverflow.com/questions/10437151/twitter-bootstrap-modal-on-mobile-devices
    */
.modal {
position: fixed; 
top: 3%; 
right: 3%; 
left: 3%; 
/*bottom: 3%; this may need to be removed to work properly*/  
width: auto; 
margin: 0; 
}
.modal-body { 
/*height: 60%;*/ 
max-height: 350px;
padding: 15px; 
overflow-y: auto; 
-webkit-overflow-scrolling: touch; /*without this modal does not scroll down on mobile devices*/
}