#whosignspopup { display: none; }
#cboxLoadedContent #whosignspopup { display: block;overflow: hidden; }

#cboxLoadedContent #whosignspopup .col-md-4 { padding: 0; }
.signing-options { margin-bottom: 20px; display: block; width: 200px; height: 200px; border: 1px solid #E6E6E6; background: white; color: #4E4E4E; text-transform: uppercase; cursor: pointer; padding: 20px; font-size: 15px; font-weight: 600; text-align: center; margin-right: auto; margin-left: auto; width: 200px; }
.signing-options:hover { background-color: #F7F8F9; text-decoration: none; }
.signing-options-icon { display: block; height: 80px; margin: 20px auto; text-align: center; }
.email-group:after { content: ' '; clear: both; }
.email-container .fa.fa-trash { margin: 8px; cursor: pointer; }

@media only screen and (max-width : 767px) {
	.row-fluid.sortable.ui-sortable {
	    margin-top: 0px !important;
	}
}

.cancel-btn { padding: 5px 25px 0px 10px; }
.chzn-drop { border:none !important; }
.error-msg { margin:0px; padding:0px; }
.box-content { overflow: visible; }
.controls { position: static; }
/* #sketchpadapp { display: none; } */
#cboxLoadedContent #sketchpadapp { display: block; }
#resizeDiv,#dateResizeDiv,#canvasImg { padding: 0; background-color: #ffffff; position: absolute; top: 150px; left: 170px; /*display: none;*/ }
#resizeDiv label, #dateResizeDiv label {font-family: Helvetica;color: #333;background-color: #fff;font-style: normal;font-weight: normal;padding: 0;text-shadow: none;margin: 0;line-height: 1;}
.img_thumb { float: left; height: 160px; margin-bottom: 5px; margin-left: 9px; position: relative; width: 80%; /*background-color: rgba(0, 0, 0, 0.5);*/ border-radius: 3px; border: 1px solid black; line-height:120px; text-align:center; background-color: white; cursor: pointer; }
.img_thumb img { margin: 0 auto; }
#original_image{ background-color: white; border: 1px solid black; }
.processingDiv { display: none; width: 100%; height: 100%; margin: 0; padding: 0; }
.process { position:absolute; left:0; right:0; top:0; bottom:0; margin:auto; overflow:auto; }
.pdfPreview { display: none; }
#sketchpadapp { /* Prevent nearby text being highlighted when accidentally dragging mouse outside confines of the canvas */ -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }
#sketchpad { float: left; border: 1px solid #CCC; border-radius: 0; position: relative; z-index: 9999; width: calc( 100% - 2px ); height: 143px; background-image: url(<?php echo base_url('img/signaturebg.png') ?>); background-size: 100%; }
.leftside {float: left;width: 30%;height: 300px;border-radius: 0;padding: 30px 10px 0 0;border-right: 1px solid #ccc;}
.rightside {float: left;text-align: center;margin-left:10px;width: calc( 67% - 10px );}

div.uploader_container { border: 1px solid #CECECE; background: #F2F2F2; padding: 15px 35px; overflow: hidden; display: inline-block; }
div.uploader_container > * { display: inline-block; vertical-align: top; }
div.uploader_container .upload_files_button { position: relative; padding: 5px 0; overflow: hidden; display: inline-block; }
div.uploader_container .m-button { margin: 5px; }
div.uploader_container a.m-button { line-height: 100%; margin-top: 16px; }
div.uploader_container .draganddrop { line-height: 36px !important; padding: 20px 20px 20px 66px !important; color: #A0A0A0 !important; border-style: none !important; border-left: 1px solid #E6E6E6 !important; background-image: url(<?php echo base_url('img/draganddrop_icon_@2x.png') ?>) !important; background-repeat: no-repeat !important; background-position: 30px center !important; background-size: 20px !important; background-color: transparent !important; height: auto !important; width: auto !important; font-size: inherit !important; }

#sketchpadapp .m-button { text-align: center; padding: 12px 20px 10px 20px; letter-spacing: .05em; margin: 1px; font-size: 12px; font-weight: 600; text-transform: uppercase; border: none; border-radius: 0; display: inline-block; transition: .8s; outline: none; width: 100%; }
input[data-no-uniform="true"] {position: absolute;height: 23px;top: 15px;right: 0;margin: 0;border: 50px solid black;cursor: pointer;z-index: 2;opacity: 0;-ms-filter: 'alpha(opacity=0)';filter: alpha(opacity=0);-o-transform: translate(-50px, -50px) scale(10);-moz-transform: translate(-50px, 0) scale(10);font-size: 30px;}

.meter { display: none; height: 12px;  /* Can be anything */ position: relative; background: #555; -moz-border-radius: 25px; -webkit-border-radius: 25px; border-radius: 25px; padding: 0; box-shadow: inset 0 -1px 1px rgba(255,255,255,0.3); width: 68%; margin-top: 10px; color: gray; font-size: 12px; }
.meter > span { display: block; height: 100%; border-top-right-radius: 8px; border-bottom-right-radius: 8px; border-top-left-radius: 20px; border-bottom-left-radius: 20px; background-color: rgb(43,194,83); background-image: linear-gradient( center bottom, rgb(43,194,83) 37%, rgb(84,240,84) 69% ); box-shadow: inset 0 2px 9px  rgba(255,255,255,0.3), inset 0 -2px 6px rgba(0,0,0,0.4); position: relative; overflow: hidden; transition: 1s all; }
.orange > span { background-color: #f1a165; background-image: linear-gradient(to bottom, #f1a165, #f36d0a); }
.red > span { background-color: #f0a3a3; background-image: linear-gradient(to bottom, #f0a3a3, #f42323); }
.meter > span:after, .animate > span > span { content: ""; position: absolute; top: 0; left: 0; bottom: 0; right: 0; background-image: linear-gradient( -45deg, rgba(255, 255, 255, .2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%, transparent 75%, transparent ); z-index: 1; background-size: 50px 50px; animation: move 2s linear infinite; border-top-right-radius: 8px; border-bottom-right-radius: 8px; border-top-left-radius: 20px; border-bottom-left-radius: 20px; overflow: hidden; }
.animate > span:after { display: none; }
@keyframes move { 0% { background-position: 0 0; } 100% { background-position: 50px 50px; } }
.meter > span:after, .animate > span > span { animation: move 2s linear infinite; }
@keyframes expandWidth { 0% { width: 0; } 100% { width: auto; } }
/* div.editPdf { display: none; color: gray; font-size: 14px; } */

.big-image { width:70%; margin-left: 20%; position: relative; }
.thumb-container { width: 15%; position: absolute; height: 850px; overflow-y: auto; }
.resizer { width: 5px; height: 100%; background: red; cursor: e-resize; position: absolute; top: 0; right: 0; }
.ui-resizable { border: 2px solid transparent; }
.ui-resizable:hover, .ui-resizable-helper { border: 2px dotted #00F; }
hr { display: block; width: 100%; margin: 40px 0; border: 1px solid #D8D8D8 !important; }
.add_signer_link { cursor: pointer; position: relative; text-decoration: none; background: url(https://s3.amazonaws.com/cdn.hellosign.com/1.44.0/images/v2/modules/home/addrecipient_plus_@2x.png) 9px center no-repeat; background-size: 16px; border: 1px dashed #CECECE; color: #A0A0A0; display: block; font-size: 13px; font-weight: 300; margin-bottom: 10px; padding: 5px 12px 5px 32px; text-align: left; width: 277px; outline: none; }
.add_signer_link.mo { width: 557px; }
.email-group { margin-bottom: 10px; }
.upload_files_button button { margin-top: 15px; }
.slide { text-align: center; padding: 20px 0; }

.leftside button.btn.btn-sm.btn-primary { width: 100%; padding: 12px 0; margin-bottom: 5px; }
#canvasImg img {width: calc( 100% - 22px );height: 100%;}