/*== | Popup CSS | ==================================*/

.popup {
   width: 100%;
   height: 100%;
   position: fixed;
   top: 0px;
   left: 0px;
   background: rgba(0, 0, 0, 0.5);
   z-index: 99999;
   display: none;
   overflow: auto;
}

.popup-flex {
   display: flex;
   display: -webkit-flex;
   flex-direction: row;
   justify-content: center;
   align-items: center;
   align-content: center;
   width: 100%;
   height: auto !important;
   min-height: 100vh !important;
   padding: 15px;
   overflow: auto;
}

.popup-inner {
   display: block;
   position: relative;
   width: 90%;
   padding: 20px;
   background: #fff;
   box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.26);
   -webkit-box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.26);
   /* z-index: 9999; */
   max-width: 700px;
   overflow: hidden;
   border-radius: 10px;
   -webkit-border-radius: 10px;
   -moz-border-radius: 10px;
   -ms-border-radius: 10px;
   -o-border-radius: 10px;
}


.popup-close {
   position: absolute;
   top: 20px;
   right: 20px;
   width: 12px;
   height: 12px;
   z-index: 9999;
   opacity: 1;
}

.popup-close svg {
   display: block;
   width: 100%;
   height: 100%;
   opacity: 0.5;
   -webkit-transition: all 0.5s ease-in-out;
   -moz-transition: all 0.5s ease-in-out;
   -ms-transition: all 0.5s ease-in-out;
   -o-transition: all 0.5s ease-in-out;
   transition: all 0.5s ease-in-out;
}

.popup-close:hover svg {
   opacity: 1;
}

.popup-inner .popup-title,
.popup-full-screen-inner .popup-title,
.modal-header .popup-title {
   display: block;
   font-size: 21px;
   color: #19548c;
   font-style: italic;
   border-bottom: 4px double #5fd7ff;
   padding-bottom: 10px;
   margin-bottom: 15px;
}

/*== | Signature Pad CSS | ==================================*/

.signature-pad {
   position: relative;
   display: block;
   font-size: 10px;
   width: 550px;
   height: 100%;
   max-height: 460px;
   margin: 25px auto 0;
   border: 1px solid #e8e8e8;
   box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 40px rgba(0, 0, 0, 0.08) inset;
   padding: 16px;
   border-radius: 4px;
   background: #00355f;
   -webkit-border-radius: 4px;
   -moz-border-radius: 4px;
   -ms-border-radius: 4px;
   -o-border-radius: 4px;
}

.signature-pad--body {
   position: relative;
   width: 100%;
   height: 300px;
   border-radius: 10px;
   -webkit-border-radius: 10px;
   -moz-border-radius: 10px;
   -ms-border-radius: 10px;
   -o-border-radius: 10px;
}

.signature-pad--body canvas {
   display: block;
   width: 100%;
   height: 100%;
   box-shadow: 0 0 5px rgba(0, 0, 0, 0.02) inset;
   border-radius: 10px;
   -webkit-border-radius: 10px;
   -moz-border-radius: 10px;
   -ms-border-radius: 10px;
   -o-border-radius: 10px;
}

.signature-pad--footer {
   color: #c3c3c3;
   text-align: center;
   font-size: 1.2em;
   margin-top: 8px;
}

.signature-pad--actions {
   display: grid;
	grid-gap: 5px;
	grid-template-columns: 1fr 1fr 1fr 1fr;
   margin-top: 8px;
}

.signature-pad--actions > button {
  font-size: 16px;
  padding: 0 10px;
  width: 100%;
  height: 30px;
  line-height: 30px;
  background: #FFF;
  border: 1px solid #000;
  border-radius: 5px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -ms-border-radius: 5px;
  -o-border-radius: 5px;
}

.signature-pad--actions > button {
   line-height: 25px !important;
	background: #56a2e8 !important;
   color: #FFF;
}

.signature-pad--footer button:hover {
	background-color: #0073de !important;
}

@media screen and (max-width: 770px) {
 
   .signature-pad {
      width: 100%;
   }
   .signature-pad--actions {
      grid-template-columns: 1fr 1fr;
   }
}