@font-face {
  font-family: 'Signerica';
  src: url('Signerica_Fat/Signerica_Fat.eot');
  src: url('Signerica_Fat/Signerica_Fat.eot?#iefix') format('embedded-opentype'),
       url('Signerica_Fat/Signerica_Fat.woff2') format('woff2'),
       url('Signerica_Fat/Signerica_Fat.woff') format('woff'),
       url('Signerica_Fat/Signerica_Fat.ttf') format('truetype'),
       url('Signerica_Fat/Signerica_Fat.svg#Signerica') format('svg');
  font-weight: normal;
  font-style: normal;
}

html, body {height: 100%}
* {outline:none}
body {font-family: 'Open Sans', sans-serif; color:#4b4b4b; font-weight:400; min-width:310px}

button, button:focus, button*:focus {outline:none}
.container-full {margin:0 auto; width: 100%}
.padding-gutter-none {padding-left:0; padding-right:0}
.fbold {font-weight:bold}
.fwhite {color:white!important}
.H2defaultClass {font-size:32px; color:#303030; text-align:center; margin:30px 0; line-height:37px}

.topNav{background:#fff; padding:8px 10px 12px 10px; width:100%}
.topNav .row {margin-left:0; margin-right:0}
.top-Nav-box {font-size:14px; float: left;}
.top-Nav-box img {/*width:200px;*/ height:auto}
.top-Nav-box li {display:inline; padding-right:20px; line-height:22px}
.top-Nav-box li a, .top-Nav-box li a:hover {color:white}

.userInfo {float:right; padding-top:10px}
.userInfo .btntoggleCustom {color:#fff; cursor:pointer; padding-top:3px}
.userInfo .btntoggleCustom, .userInfo .btntoggleCustom:hover, .userInfo .btntoggleCustom:active, .userInfo .btntoggleCustom:focus {background:transparent!important; border:0}
.userInfo .dropdown-menu {background:#2e3033; border-radius:0!important; left:-52px!important; top:35px; border:0!important; width:auto}
.userInfo .dropdown-menu>li>a {color:#fff}
.userInfo .dropdown-menu>li>a:hover {background:#444}

.userImage {float:right; padding:4px 10px 0 0}
.userImage img {width:80%; height:auto}
.dropdown-menu.custom li .glyphicon {margin-top:-10px}
.dropdown-menu.custom span {position:relative;  top:3px; left:10px}
.bottomMenu {width:100%; background:#2e3033; min-height:30px; }
span.caret {margin-left:10px; float:right; margin-top:7px}

.customCol {display: inline-block; vertical-align: top;}
.clientName {width:80px; overflow:hidden; white-space:nowrap; text-overflow: ellipsis; display:block; float:left}

input::-webkit-input-placeholder {color:#808080!important}
input:-moz-placeholder { /* Firefox 18- */ color:#808080!important}
input::-moz-placeholder {  /* Firefox 19+ */color:#808080!important}
input:-ms-input-placeholder {color:#808080!important}

/* BUTTON */
.btn {font-size:12px}
.default-btn {background:#01b27e; padding:14px 13%; margin-top:30px; font-size:18px; border-radius:4px}
.default-btn:hover, .default-btn:visited, .default-btn:focus, .default-btn:active {background:#07d897; color:white}
.btn-select, .btn-default {border:none; background:transparent; color:#fff}
.btn-select, .btn-default:hover {color:#fff!important}
.btn-save:visited, .btn-save:focus, .btn-save:active, .btn-done:visited, .btn-done:focus, .btn-done:active
{color:#fff}

.btn-print {background:#525254; color:#fff; padding:6px 38px; border-radius:0; float:left; line-height:32px}
.btn-print:hover {background:#595959; color:#fff}
.btn-save {background:#1B426D; color:#fff; padding:6px 38px; border-radius:0; float:left; line-height:32px; font-size: 18px; margin-top: 25%; }
.btn-done {background:#474747; color:#fff; padding:6px 38px; border-radius:0; float:left; line-height:32px}
.btn-save:hover {background:#286090; color:#fff}
.btn-done:hover {background:#515151; color:#fff}

button.btn.btn-print i.glyphicon, button.btn.btn-save i.glyphicon, button.btn.btn-done i.glyphicon {margin-right:8px!important}
.mainContainer {background:#e6e7e8; padding:40px 0 80px 0}

.pdf-section {text-align:center; position:relative}
.pdf-section img {width:75%; height:auto;-webkit-box-shadow: -2px 0px 21px 0px rgba(0,0,0,0.48);
-moz-box-shadow: -2px 0px 21px 0px rgba(0,0,0,0.48); box-shadow: -2px 0px 21px 0px rgba(0,0,0,0.48)}

.box-editorA {min-height:40px; background:#2e3033}
.box-editor-section-A {padding:10px 0; float:right; margin-top:-8px}
.box-editor-section-A li {display:inline; margin:0 10px; padding-top:6px}
.box-editor-section-A li a {padding:2px 0}
.box-editor-section-A li:hover {border-top:2px solid #d50613}
ul.box-editor-section-A.custom {margin-left:-15px; float:left; margin-top:-1px}
.box-editor-section-B {float:right}
.box-editor-section-B i.glyphicon {position:relative; top:-2px}
.box-editorB {min-height:45px; background:#1B426D; padding:8px 10px; color:#fff}

.select-box-view {float:right; padding-right:8px}
.select-box-view select {background:#1B426D!important; color:#fff; border:1px solid #fff; border-radius:0; -webkit-appearance: none;-moz-appearance: none;appearance: none;     height: 30px;}
.select-box-view option:not(:checked) {background-color:#1B426D}
.select-box { position: relative;}
.select-box:after {
  content: '';
  width: 0;
  position: absolute;
  right: 15px;
  top: 50%;
  margin-top: -3px;
  border-width: 6px 4px;
  border-style: solid;
  pointer-events: none;
  border-color: #fff transparent transparent transparent;
}
select::-ms-expand {
    display: none;
}
#scaleSelect { width: 130px; height: 30px;}
.tooltip-inner {background-color:#373c44}
[data-placement="top"] + .tooltip > .tooltip-arrow {border-top-color: #373c44}

.nav-btn {position:fixed; z-index:99999; bottom:0; right:0}
.nav-btn.drag {display:none}
.nav-btn.drag:hover {cursor:pointer}
.nav-btn.drag img {width:90px; height:auto}

#pagination {text-align:center; margin:0 auto; position:fixed; bottom:0; left:0; right:0; z-index: 10; transform: translateY(-50%); width: 236px;}
.pagination {background:url(../images/pagination-bg.png) repeat; padding:8px 10px 10px 10px;  display:inline-block; color:#fff; font-size:16px; font-weight:700; text-align:center; width:auto; margin:0 auto; border-top-left-radius: 2em; border-bottom-left-radius: 2em; border-top-right-radius: 2em; border-bottom-right-radius: 2em; }

.pagination span {padding:10px 30px ; display:block; float:left; line-height: 1;    font-size: 16px;}
.pagination .glyphicon.prev {float:left}
.pagination .glyphicon.next {float:right}
.pagination .glyphicon img {box-shadow:none!important}

.col-md-6.colB {padding-right:0!important}

/*CUSTOM CSS*/
#signatureModal .modal-content { height: 330px; }
#signatureModal .modal-header { background: #F0F0F0;     padding: 10px 15px;}
  #signatureModal .modal-header ul {  display: block; margin: 0 auto; width: 130px; border: none; text-align: center;}
    #signatureModal .nav li { float: none; width: 55px; display: inline-block; display: -moz-inline-stack;  *display: inline; vertical-align: top;}
    #signatureModal .nav li.active a { border-bottom: 3px solid #1973CB; color: #1973CB; background: #F0F0F0;  }
    #signatureModal .nav li a{ text-align: center; padding: 8px 0px; font-size: 11px; text-transform: uppercase; border: none; color:#505050; border: none;}
      #signatureModal i  {width: 100%; text-align: center; font-size: 24px; }
      #signatureModal i.icon { font-size: 22px!important; }
      #signature canvas {background-color: #fff; border: 1px solid lightgrey !important; }
#signatureModal .tab-content { width: 100%; padding: 0 15px 15px; }
  #text input { margin: 0 auto; display: block; width: 250px; font-size: 18px; height: auto; }
  #signature_text {     float: left; width: 100%;  padding: 10px; }
    input#preview_text {border: 1px solid lightgrey; width: 100%; height: 120px; font-size: 20px; float: left; text-align: center; padding: 35px; font-family: Signerica; white-space: nowrap; overflow-x: scroll; overflow-y: hidden; margin-bottom: 20px;}
    .signature-btn button {float: right !important; margin-right: 8px; }
.text_display {font-family: "Signerica"; font-size: 25px; white-space: nowrap; line-height: 2; min-width: 15px;}
select.fillable_field {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    -o-appearance: none;
    -ms-appearance: none;
}
@-moz-document url-prefix() {
    select {
       text-indent: -2px;
    }
}
/* Media Style */
@media ( max-width:1359px ){
  .box-editorA .col-md-6.colA {width:60%!important}
  .box-editorA .col-md-6.colB  {width:40%!important}
}


@media ( max-width:1130px ){
  .nav-btn.drag {display:block}
/*.bottomMenu {display:none}*/
}

@media ( max-width:1085px ){
  .editor-top-section .col-md-6, .button-box-container .col-md-6 {width:100%; text-align:center}
  .txt-Editor-section {text-align:center; padding:10px 0}
  nav#nav-main ul, .editor-top-section ul.box, .button-box-2 {text-align:center}
  .button-box-container{padding:10px 0}
  .button-box-2 {padding-top:10px}
}

@media ( max-width: 991px){
  .col-md-7 {float: left;}
  .col-md-5 {float: right;}

}


@media ( max-width:801px ){
  #nav-trigger {display:block}
  nav#nav-main {display:none}
  nav#nav-mobile {display:block}
  nav#nav-mobile li {display:inline-block; border-bottom:0}
  .txt-Editor-section {text-align:center}
  .button-box-2 {text-align:center}

  .text-editor-box i.glyphicon, li.pipeLine-b {display:none!important}
  select.btn.btn-select {height:31px; /*line-height:27px*/}
  nav#nav-mobile a {padding:14px}
}


@media ( max-width:756px ){
  .box-editor-section-A, #text_tool .text_toolbar, .ng-scope{display: none !important;}
}

@media ( max-width: 480px ){
  ul.box li {width:100%}
  nav#nav-mobile li {margin:3px 0}
  nav#nav-mobile li:hover {background-color:#dfdfdf; color:#4b4b4b; border-radius:4px; text-decoration:none}
  select.btn.btn-select {border-radius:4px!important; width:100%!important; display:block; margin-left:-1px!important}
  button.btn.btn-default, button.btn.btn-save, button.btn.btn-done {border-radius:4px!important; /* margin-top:5px; height:40px */}
  .button-box-container .btn-group {width:100%; margin:3px 0; maring-top:5px}
  .top-Nav-box img { width: 150px;}
  .select-box-view {padding-right:1px;}
  nav#nav-mobile a {background:#fff; border:1px solid #ccc; border-radius:4px}
  nav#nav-mobile li {padding:0 0}
  .editor-top-section {background:#fff}
  #text_size {width: 30px;}
}

@media ( max-width: 360px ){
  .top-Nav-box img {width:130px; height:auto; padding-top:5px}
  .userImage img {width:64%; padding-top:3px}
  .userImage {padding:4px 0px 0 0}
  .col-md-5 {width:11rem; padding-right: 1px !important; padding-left: 1px !important;}
  .col-md-7 {padding-right: 1px !important; padding-left: 1px !important;}
  #text_size {width:30px;}
  .btn {font-size: 12px; padding: 6px 5px;}
  .select-box:after {display: none;}
  .btn.btn-save {font-size: 13px; padding: 6px 19px;}
  #mainContainer{ margin-top: 173px !important; }
}

/*Loader CSS*/
.loader-pencil-content {
    align-items: center;
    position: fixed;
    height: 100%;
    width: 100%;
    text-align: center;
    top: 0;
    z-index: 99;
    -webkit-transition: opacity 3s ease-in-out;
    -moz-transition: opacity 3s ease-in-out;
    -ms-transition: opacity 3s ease-in-out;
    -o-transition: opacity 3s ease-in-out;
     opacity: 1;
}
.loader-pencil-content:before {
  content: '';
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: white;
  opacity: 0.8;
}

.pencil {
    border-radius: 4px;
    display: block;
    left: 50%;
    margin: 0 auto;
    padding: 1rem;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
}

svg#loader-pencil {
  fill: #C92127;
  width: 80px;
}

#line {
  animation: linePencil .8s infinite linear;
}

@keyframes linePencil {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(-150px);
  }
}