*,
*::before,
*::after {
  box-sizing: border-box;
}

.signature-pad {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  font-size: 10px;
  width: 100%;
  height: 100%;
  max-width: 700px;
  max-height: 460px;
  border: 1px solid #e8e8e8;
  background-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: 4px;
  padding: 16px;
}

.signature-pad::before,
.signature-pad::after {
  position: absolute;
  z-index: -1;
  content: "";
  width: 40%;
  height: 10px;
  bottom: 10px;
  background: transparent;
  box-shadow: 0 8px 12px rgba(0, 0, 0, 0.4);
}

.signature-pad::before {
  left: 20px;
  -webkit-transform: skew(-3deg) rotate(-3deg);
  transform: skew(-3deg) rotate(-3deg);
}

.signature-pad::after {
  right: 20px;
  -webkit-transform: skew(3deg) rotate(3deg);
  transform: skew(3deg) rotate(3deg);
}

.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;
}

.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;
}
/*! ========================================================================
 * Bootstrap Toggle: bootstrap-toggle.css v2.2.0
 * http://www.bootstraptoggle.com
 * ========================================================================
 * Copyright 2014 Min Hur, The New York Times Company
 * Licensed under MIT
 * ======================================================================== */
.checkbox label .toggle,.checkbox-inline .toggle{margin-left:-20px;margin-right:5px}
.toggle{position:relative;overflow:hidden}
.toggle input[type=checkbox]{display:none}
.toggle-group{position:absolute;width:200%;top:0;bottom:0;left:0;transition:left .35s;-webkit-transition:left .35s;-moz-user-select:none;-webkit-user-select:none}
.toggle.off .toggle-group{left:-100%}
.toggle-on{position:absolute;top:0;bottom:0;left:0;right:50%;margin:0;border:0;border-radius:0}
.toggle-off{position:absolute;top:0;bottom:0;left:50%;right:0;margin:0;border:0;border-radius:0}
.toggle-handle{position:relative;margin:0 auto;padding-top:0;padding-bottom:0;height:100%;width:0;border-width:0 1px}
.toggle.btn{min-width:59px;min-height:34px}
.toggle-on.btn{padding-right:24px}
.toggle-off.btn{padding-left:24px}
.toggle.btn-lg{min-width:79px;min-height:45px}
.toggle-on.btn-lg{padding-right:31px}
.toggle-off.btn-lg{padding-left:31px}
.toggle-handle.btn-lg{width:40px}
.toggle.btn-sm{min-width:50px;min-height:30px}
.toggle-on.btn-sm{padding-right:20px}
.toggle-off.btn-sm{padding-left:20px}
.toggle.btn-xs{min-width:35px;min-height:22px}
.toggle-on.btn-xs{padding-right:12px}
.toggle-off.btn-xs{padding-left:12px}
/* === card component ====== 
 * Variation of the panel component
 * version 2018.10.30
 * https://codepen.io/jstneg/pen/EVKYZj
 */
 .card{ background-color: #fff; border: 1px solid transparent; border-radius: 6px; }
 .card > .card-link{ color: #333; }
 .card > .card-link:hover{  text-decoration: none; }
 .card > .card-link .card-img img{ border-radius: 6px 6px 0 0; }
 .card .card-img{ position: relative; padding: 0; display: table; }
 .card .card-img .card-caption{
   position: absolute;
   right: 0;
   bottom: 16px;
   left: 0;
 }
 .card .card-body{ display: table; width: 100%; padding: 12px; }
 .card .card-header{ border-radius: 6px 6px 0 0; padding: 8px; }
 .card .card-footer{ border-radius: 0 0 6px 6px; padding: 8px; }
 .card .card-left{ position: relative; float: left; padding: 0 0 8px 0; }
 .card .card-right{ position: relative; float: left; padding: 8px 0 0 0; }
 .card .card-body h1:first-child,
 .card .card-body h2:first-child,
 .card .card-body h3:first-child, 
 .card .card-body h4:first-child,
 .card .card-body .h1,
 .card .card-body .h2,
 .card .card-body .h3, 
 .card .card-body .h4{ margin-top: 0; }
 .card .card-body .heading{ display: block;  }
 .card .card-body .heading:last-child{ margin-bottom: 0; }
 
 .card .card-body .lead{ text-align: center; }
 
 @media( min-width: 768px ){
   .card .card-left{ float: left; padding: 0 8px 0 0; }
   .card .card-right{ float: left; padding: 0 0 0 8px; }
     
   .card .card-4-8 .card-left{ width: 33.33333333%; }
   .card .card-4-8 .card-right{ width: 66.66666667%; }
 
   .card .card-5-7 .card-left{ width: 41.66666667%; }
   .card .card-5-7 .card-right{ width: 58.33333333%; }
   
   .card .card-6-6 .card-left{ width: 50%; }
   .card .card-6-6 .card-right{ width: 50%; }
   
   .card .card-7-5 .card-left{ width: 58.33333333%; }
   .card .card-7-5 .card-right{ width: 41.66666667%; }
   
   .card .card-8-4 .card-left{ width: 66.66666667%; }
   .card .card-8-4 .card-right{ width: 33.33333333%; }
 }
 
 /* -- default theme ------ */
 .card-default{ 
   border-color: #ddd;
   background-color: #fff;
   margin-bottom: 24px;
 }
 .card-default > .card-header,
 .card-default > .card-footer{ color: #333; background-color: #ddd; }
 .card-default > .card-header{ border-bottom: 1px solid #ddd; padding: 8px; }
 .card-default > .card-footer{ border-top: 1px solid #ddd; padding: 8px; }
 .card-default > .card-body{  }
 .card-default > .card-img:first-child img{ border-radius: 6px 6px 0 0; }
 .card-default > .card-left{ padding-right: 4px; }
 .card-default > .card-right{ padding-left: 4px; }
 .card-default p:last-child{ margin-bottom: 0; }
 .card-default .card-caption { color: #fff; text-align: center; text-transform: uppercase; }
 
 
 /* -- price theme ------ */
 .card-price{ border-color: #999; background-color: #ededed; margin-bottom: 24px; }
 .card-price > .card-heading,
 .card-price > .card-footer{ color: #333; background-color: #fdfdfd; }
 .card-price > .card-heading{ border-bottom: 1px solid #ddd; padding: 8px; }
 .card-price > .card-footer{ border-top: 1px solid #ddd; padding: 8px; }
 .card-price > .card-img:first-child img{ border-radius: 6px 6px 0 0; }
 .card-price > .card-left{ padding-right: 4px; }
 .card-price > .card-right{ padding-left: 4px; }
 .card-price .card-caption { color: #fff; text-align: center; text-transform: uppercase; }
 .card-price p:last-child{ margin-bottom: 0; }
 
 .card-price .price{ 
   text-align: center; 
   color: #337ab7; 
   font-size: 3em; 
   text-transform: uppercase;
   line-height: 0.7em; 
   margin: 24px 0 16px;
 }
 .card-price .price small{ font-size: 0.4em; color: #66a5da; }
 .card-price .details{ list-style: none; margin-bottom: 24px; padding: 0 18px; }
 .card-price .details li{ text-align: center; margin-bottom: 8px; }
 .card-price .buy-now{ text-transform: uppercase; }
 .card-price table .price{ font-size: 1.2em; font-weight: 700; text-align: left; }
 .card-price table .note{ color: #666; font-size: 0.8em; }