.contract-container {; 
width:98%;
margin:1%;
}
#signature img{
margin: 20px auto;
display:block;
width: 80%;
}
.signature-pad {
position: relative;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
font-size: 10px;
width: 100%;
height: 400px;
border: 1px solid #e8e8e8;
background-color: #fff;
cursor: url(//lucy-webster.co.uk/wp-content/plugins/onlinecontract/img/contract-icon-large.png), auto;
}
.signature-pad--body {
position: relative;
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
border: 1px solid #f4f4f4;
}
.signature-pad--body
canvas {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
border-radius: 4px;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.02) inset;
}
.signature-pad--footer {
color: #C3C3C3;
text-align: center;
font-size: 1.2em;
margin-top: 8px;
min-height: 46px;
}
.signature-pad--actions {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
margin-top: 8px;
}
@keyframes spinner {
to {transform: rotate(360deg);}
}
.spinner_fdg,
.spinner_fdg:before {
width: 20px;
height: 20px;
box-sizing: border-box;
margin: 0 auto;
display:none;
position: absolute;
right: 5px;
bottom: 5px;
}
.spinner_fdg:before {
content: '';
display: block;
border-radius: 50%;
border: 2px solid #ccc;
border-top-color: #333;
animation: spinner .6s linear infinite;
}
.spinner_fdg-absolute {
position: absolute;
top: 50%;
left: 50%;
margin-top: -10px;
margin-left: -10px;
} .spinner_fdg-add,
.spinner_fdg-remove {
animation-fill-mode: both;
animation-duration: .4s;
}
.spinner_fdg-add {
animation-name: spinner-add;
}
@keyframes spinner-add {
from {transform: scale(0);}
to {transform: scale(1);}
}
.spinner_fdg-remove {
animation-name: spinner-remove;
}
@keyframes spinner-remove {
to {transform: scale(0);}
}
.printnamebox { 
box-sizing: border-box;
width: 100%;
padding: 6px;
margin: 0; 
}
@media (max-width: 767px) {
.printnamebox { 
width:100%; 
}
}