body {
  font-family: Helvetica, Sans-Serif;

  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
}

.m-signature-pad {
  position:relative;
  font-size: 10px;
  width: 700px;
  height: 400px;
  top:0px; left:5px;
  margin-left:5px;
  margin-top:0px;
  border: 1px solid #e8e8e8;  background-color: #003;  color:#FFF;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 40px rgba(0, 0, 0, 0.08) inset;
  border-radius: 20px;
  border:1px solid #09F;
}

.m-signature-pad:before, .m-signature-pad:after {
	position: absolute;
	border:0px solid #F00;
  z-index: -1;
  content: "";
	width:710;
	height: 10px;
	left: 20px;
	top:5px;
	background: transparent;
	-webkit-transform: skew(-3deg) rotate(-3deg);
	-moz-transform: skew(-3deg) rotate(-3deg);
	-ms-transform: skew(-3deg) rotate(-3deg);
	-o-transform: skew(-3deg) rotate(-3deg);
	transform: skew(-3deg) rotate(-3deg);
	box-shadow: 0 8px 12px rgba(0, 0, 0, 0.4);
}

.m-signature-pad:after {
	left: auto;
	right: 20px;
	-webkit-transform: skew(3deg) rotate(3deg);
	-moz-transform: skew(3deg) rotate(3deg);
	-ms-transform: skew(3deg) rotate(3deg);
	-o-transform: skew(3deg) rotate(3deg);
	transform: skew(3deg) rotate(3deg);
}

.m-signature-pad--body {
  position: absolute;
  left: 30px;  right: 30px;  top: 30px;  bottom: 80px;
  border-radius: 10px;
   border:1px solid #FFF;
}

.m-signature-pad--body canvas {
	position: absolute; left: 0; top: 0; width:100%; height: 100%; 
	border-radius: 10px; border:1px solid #FFF;
	background:#FFF;}

.m-signature-pad--footer {position: absolute; left: 10px; right: 10px; bottom: 20px; height: 60px;}

.m-signature-pad--footer .description {color: #C3C3C3; text-align: center; font-size: 1.4em; font-wieght:bold; margin-top: 1.8em;}

.m-signature-pad--footer .button {position: absolute; bottom:5px; color:#FFF;
	-webkit-border-radius: 6px 6px 6px 6px !important; border-radius: 6px 6px 6px 6px !important;	
	font-family: Verdana; margin:3px; font-size:1.2em; padding:5px !important; border:none;
	line-height:1.0em  !important; background:#0095E5 url('https://www.dentoamerica.com/images/bg_menu15.png') !important;
	background-position: 0px -160px !important; padding:9px !important; 
	
	}

.m-signature-pad--footer .button.clear {left:450px;}

.m-signature-pad--footer .button.save {right: 0;}
.m-signature-pad--footer .button.patientAccept, .m-signature-pad--footer .button.patientNotAccept {right:15px; display:block;	}
.m-signature-pad--footer .button.patientNotAccept {background:#F11 !important;}

.m-signature-pad--footer .button.cancel {left:15px;}

@media screen and (max-width: 1024px) {
	.m-signature-pad {top: 0;    left: 0;    right: 0;    bottom: 0;    width: auto;    height:400px;
		 width: 700px;    height: 350px;    margin: 10% auto;
  }
  #github {display: none;}
}

@media screen and (min-device-width: 768px) and (max-device-width: 1024px) {
  .m-signature-pad {margin: 10%;}
}

@media screen and (max-height: 350px) {
  .m-signature-pad--body {left: 0;    right: 0;    top: 0;    bottom: 32px;  }
  .m-signature-pad--footer {    left: 20px;    right: 20px;    bottom: 4px;    height: 28px;  }
  .m-signature-pad--footer   .description {      font-size: 1em;      margin-top: 1em;    }
}