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

body {

  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  height: 100vh;
  width: 100%;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  margin: 0;
  padding: 10px;
  background:  #900000;
  font-family: Helvetica, Sans-Serif;
}
.signature-and{ position: fixed; width: 50%; height: 50px; right: 0px; text-align: center; font-size: 20px; font-weight: bold; color: #fff; line-height: 30px; padding: 10px; bottom: 0px; border-radius: 5px 0px 5px 0;  background-color: rgba(0, 0, 0, 0.6);}
.signature-pad {
  position:fixed;
  display: -webkit-box;
  display: -ms-flexbox;left:50%; top:50%; 
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  font-size: 10px;
  width: 100%; z-index: 10;
  height: 100%;
  max-width: 700px;
  max-height: 258px;
  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: 10px; z-index: 20;
  transform:translate(-50%,-50%);
		-ms-transform:translate(-50%,-50%); 	/* IE 9 */
		-moz-transform:translate(-50%,-50%);	/* Firefox */ 
		-webkit-transform:translate(-50%,-50%); /* Safari �� Chrome */
		-o-transform:translate(-50%,-50%);	/* Opera */
}

.signature-padbgs{
  width: 100%; height: 100%;position: fixed;z-index: 10; left: 0; top: 0; background-color: rgba(0, 0, 0, 0.3); display: none;
}

/*
.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: 2px dashed #dedede;
}

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

#github img {
  border: 0;
}

#fileupload {
  display: none;
}

form {
  display: table-row;
  margin-right: 5px;
}

span[role=button] {
  display: table-cell;
  font-size: 1.2em;
}

span[role=button],
button {
  cursor: pointer; border-radius:3px;
  background-color: #e1e1e1;
  color: #000000;
  border: none;
  padding: 8px;
  margin-bottom: 8px;
}
.inputTypeLine{
  padding:5px 0px 10px;
}

.loadingBg{
  width: 100%; height: 100%; top:0; left: 0; display: none; background-color: rgba(0, 0, 0, 0.8); z-index: 100000; position: fixed;
}
.loading{
  width: 168px; text-align: center; height: 160px;background-color: #2A2826;  font-weight: bold; font-size: 16px; color: #fff; position:absolute; left: 50%; top: 50%; margin-top: -80px; margin-left: -84px; border-radius: 10px;
}
.loadImg{width: 160px; height: 120px; margin: 0px auto; }
@media (max-width: 940px) {
  #github img {
    width: 90px;
    height: 90px;
  }
}