.doc-intro {position: fixed; top: 0; z-index: 111; height: 100%; width: 100%; background: rgba(255,255,255,0.95); }
.doc-intro-body { position: absolute; top: 40%; left: 50%; transform: translate(-50%, -40%); background: #fff; max-width: 300px;  border-radius: 6px; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);}
.doc-intro-copy {padding: 50px;  font-size: 14px; color: #888; text-align: center;}
.doc-intro-copy h2 {font-size: 20px; color: #4183D7;}
.doc-intro-copy h3 {font-size: 20px;  color: #333; font-weight: bold;}
.doc-intro-copy p { margin: 20px 0 40px 0;}
.doc-intro-copy .btn {box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2); max-width: 150px; margin: 0 auto; text-transform: uppercase; font-size: 12px; padding: 10px 12px; letter-spacing: .3px; display: block; width: 100%; transition: all 0.3s;}

.doc-intro-continue {background: rgba( 137, 196, 244,0.4); padding: 8px 50px;}

.doc-flow {display: flex; flex-direction: column; flex-wrap: wrap; margin: 10px auto 100px auto; }

.doc-legend{ width: 100%;}
.doc-legend-details { display: flex;  border-bottom: 1px solid #eee; padding: 10px 20px 40px 20px; font-size: 10px;  letter-spacing: 1px;}
.doc-legend-details .details { flex-grow: 1; }
.doc-legend-details .details > div { text-align: center;}
.doc-legend-details .details .title {font-size: 16px; padding: 15px;}
.doc-legend-details .details .title b { text-transform: uppercase; padding-right: 12px;}
.doc-legend-details .status {  }

h1, h2, h3, h4, h5, h6 {font-weight: 500;}

.preview-bar {position: fixed; top: 0; left: 0; right: 0; z-index: 99999;}
.preview-bar > div { position: relative; width: 90%;  max-width: 700px; margin: 0 auto; padding: 12px 20px; background: #00b16a; color: #fff; font-size: 12px; text-transform: uppercase; letter-spacing: 1px; text-align: center;
                     border-bottom-left-radius: 20px; border-bottom-right-radius: 20px; box-shadow: 0 0 8px rgba(0, 0, 0, 0.2);
}
.preview-bar a {position: absolute; top: 10px; right: 20px; color: rgba(255,255,255,.5); font-size: 20px;}
.preview-bar a:hover {color: rgba(255,255,255,.8);}

.doc-preview {position: fixed; z-index: 100; bottom: 5%; left: 0; right: 0; text-align: center;}
.doc-preview > a { display: block;  margin: 0 auto; width: 80px; height: 80px; text-align: center; border-radius: 50%; background: #00b16a; 
                    text-decoration: none;
                    color: #fff; text-transform: uppercase;
                    font-size: 11px;
                    letter-spacing: .5px;
                    padding-top: 20px;
                    box-shadow: 0 0 8px rgba(0, 0, 0, 0.2);
                    transition: all 0.3s;
                    }
.doc-preview .glyphicon {display: block; font-size: 42px;  padding-bottom: 5px; }
.doc-preview a:hover  { background: #2ecc71; }

.doc-legend-details { width: 100%; margin: 0 auto; }
/*.doc-legend-details > div:first-child {border-left: 1px solid #777;}
.doc-legend-details > div:last-child {flex-grow: 1; text-align: right;}*/
/*.doc-legend-details > div {padding: 10px 20px; text-align: left; border-right: 1px solid #777;}*/
.doc-legend-details h3 {font-size: 16px; text-transform: unset;}

.credit { color: #ccc; margin-top: 40px; text-align: center; }
.credit a {color: #aaa; text-decoration: none; transition: all 0.3s;}
.credit a:hover {color: #555;}

.progressbar {
    counter-reset: step;
}
.progressbar li {
    list-style-type: none;
    width: 20%;
    /*float: left;*/
    display: inline-block;
    font-size: 10px;
    position: relative;
    text-align: center;
    color: #aaa;
}
.progressbar li:before {
    width: 22px;
    height: 22px;
    content: counter(step);
    counter-increment: step;
    line-height: 20px;
    border: 2px solid #aaa;
    display: block;
    text-align: center;
    margin: 0 auto 5px auto;
    border-radius: 50%;
    background: #fff;
}
.progressbar li:after {
    width: 100%;
    height: 2px;
    content: '';
    position: absolute;
    background-color: #aaa;
    top: 11px;
    left: -50%;
    z-index: -1;
}
.progressbar li:first-child:after {
    content: none;
}
.progressbar li.completed a {
    color: #aaa; text-decoration: none;
}
.progressbar li.active {color: #00b16a;}
.progressbar li.active:before {
    border-color: #00b16a;
    background-color: #00b16a;
    color: #fff;
}
.progressbar li.active + li:after {
    /*background-color: #55b776;*/
    
}
.progressbar li.active:after{
    background-color: #00b16a;
}
.progressbar li.completed:before{
    /*content: '\f26b';
    font: normal normal normal 14px/1 'Material-Design-Iconic-Font';
    line-height: 24px;*/
    color: #fff;
    background-color: #00b16a;
}
.progressbar li.completed:after {
    background-color: #00b16a;
}
.progressbar li.completed:before {border-color: #00b16a;}


.doc-legend-participant{  }
.doc-legend-participant > div {display: inline-block; vertical-align: top; margin-right: 10px;}
.doc-legend-status{color: #aaa; }

.doc-wrapper{ position: relative; margin: 0 auto; width: 100%;  }
.doc-footer{position: fixed; display: none; bottom: 0; z-index: 90; width: 100%; background: rgba( 30, 130, 76, .8); padding: 30px 0; color: #fff; text-align: center; height: 90px;}
.bound-by-terms {margin-left: 20px;}
.doc-alert{position: fixed; bottom: 0; z-index: 101; width: 100%; background: rgba(207, 0, 15,.8); padding: 20px 0; color: #fff; text-align: center; height: 90px;}
.doc-document{ position: relative; overflow-x: auto; box-shadow: 0 0 5px rgba(0, 0, 0, 0.1); margin-bottom: 30px; }  


.doc-page{display: block; position: relative; min-height: 400px; font-size: 14px; font-family: Roboto, sans-serif;} /*background: #fff; new*/
.doc-page > img {max-width: 816px;}
.doc-page ol li {list-style: decimal;}
.doc-page ol, .doc-page ul {/*margin-left: 18px;*/ list-style: initial; padding: 0;}
.doc-page-wrapper{ }
.doc-page-footer{height: 20px; font-size: 12px; color: #555;}
.page-break-before {page-break-before:always;}
.page-block.align-center {text-align: center;}
.page-block.align-center .direct-edit {text-align: center;}
.page-block.align-center .ql-editor {text-align: center;}
.page-block.align-right {text-align: right;}
.page-block.align-right .direct-edit {text-align: right;}
.page-block.align-right .ql-editor {text-align: right;}

.doc-html{ /*padding: 70px;*/ }
.doc-html > li { box-shadow: 0 0 5px rgba(0, 0, 0, 0.1); margin-bottom: 30px; }

.contract-data {width: 100%;}
.contract-data th {font-weight: normal; padding: 0 5px 0 0;}
.contract-data td{border-top: 1px solid #ddd; padding: 2px 5px 2px 0;}

/*override quill*/
.document-builder ul {padding-left: 0 !important; margin-left: 0 !important; list-style: none;}
.page-block::before {content:unset !important; } 
/*override quill*/

.document-builder {list-style: none; margin: 0; padding: 0; font-size: 13px;}
.section-contens p {font-size: 13px;}
.page-block {margin: 0 auto; padding: 5px 50px 20px 50px; position: relative; }
.page-block.splash-page { padding: 0 !important; display: flex; flex-direction: column;}
.page-block table {text-align: left; width: 100%;}
.page-block table input { font-size: inherit !important;}
.page-section { background: #fff;}
.page-section.primary {padding: 50px 0;}

.document-builder > li:first-child {padding-top: 20px; text-align: center;}
.align-left {text-align: left !important;}

.page-block[data-type="header"] .direct-edit { border: 1px solid transparent; }
.header-document-title {display: block; font-size: 36px; color: #333; width: 100%;}
.header-company-name {display: block; font-weight: bold; font-size: 14px;  color: #aaa; width: 100%; margin-bottom: 10px; }

.splash-page {min-height: 400px;  }
.splash-page .section-background { position: absolute; width: 100%; height: 100%;  background: #222;}
.splash-page .section-image { position: absolute; width: 100%; height: 100%;  z-index: 2; background-size: cover; background-position: center center; opacity: 0.7;}
.splash-page .section-overlay {position: absolute; width: 100%; height: 100%; z-index: 3; background: rgba(0,0,0,.3);}
.splash-page .section-contents-wrapper { position: absolute; top: 0; left: 0; bottom: 0; right: 0; z-index: 5; }
.splash-page .section-contents {z-index: 3; padding: 50px; /*position: absolute; top: 0; left: 0; bottom: 0; right: 0;*/ height: 100%; display: flex; flex-direction: column; justify-content: center; }
.section-splash { position: absolute; top: 0; left: 0; bottom: 0; right: 0; }
.splash-border-line .section-contents-wrapper { position: absolute; top: 50px; left: 50px; bottom: 50px; right: 50px; border: 1px solid rgba(255,255,255,.5); z-index: 3; }
.no-image.splash-border-line .section-contents-wrapper {border-color: rgba(0,0,0,.3);}
.no-image.splash-border-thick, .no-image.splash-border-top {background: #f5f5f5;}
.no-image.splash-border-thick .section-contents-wrapper, .no-image.splash-border-top .section-contents-wrapper {background: #fff;}
.splash-border-line .section-contents {padding: 50px;}
/*.splash-border-thick .section-splash, .splash-border-thick .section-contents-wrapper, .splash-border-thick.splash-page .section-overlay, .splash-border-thick.splash-page .section-background { position: absolute; top: 50px; left: 50px; bottom: 50px; right: 50px; }*/
.splash-border-thick .section-splash { position: absolute; top: 50px; left: 50px; bottom: 50px; right: 50px; }
.splash-border-thick .section-contents-wrapper { margin: 50px;}
.splash-border-top .section-splash { position: relative; top: auto; left: auto; bottom: auto; right: auto; flex: 1 0 70%; order: 2}
.splash-border-top .section-contents-wrapper { position: relative; top: auto; left: auto; bottom: auto; right: auto; flex: 0 0 30%; order: 1}
.splash-border-bottom .section-splash { bottom: 30%;}
.splash-border-bottom .section-contents-wrapper { top: 70%; }
.splash-border-top .splash-text, .splash-border-bottom .splash-text { color: #222;}

.splash-page.valign-top .section-contents {  justify-content: flex-start;}
.splash-page.valign-bottom .section-contents { justify-content: flex-end;}
.splash-page.valign-bottom-split .splash-logo { flex: 1 1 auto; }
.splash-page.no-image .section-splash { display: none;}

.logo-hidden .splash-logo, .logo-hidden .header .company img { display: none;}
.splash-logo img, .header .company img { max-width: 16%;}
.logo-size-small .splash-logo img, .logo-size-small .header .company img {max-width: 11%;}
.logo-size-large .splash-logo img, .logo-size-large .header .company img {max-width: 20%;}
.logo-size-xlarge .splash-logo img, .logo-size-xlarge .header .company img {max-width: 28%;}
.logo-opacity-35 .splash-logo img, .logo-opacity-35 .header .company img {opacity: .35;}
.logo-opacity-70 .splash-logo img, .logo-opacity-70 .header .company img {opacity: .70;}

.section-image-spinner {position: absolute; top: 0; left: 0; bottom: 0; right: 0; z-index: 10; background: #fff; opacity: 0.8;}
.section-image-spinner > div {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center;}

.splash-page .direct-edit {background: transparent; border: 1px solid transparent; resize: none; width: 100%; font-size: 36px; color: #fff; }
.splash-page .direct-edit:hover {border-color: #aaa;}
.splash-page .direct-edit:focus {border-color: #fff;}
.splash-page+.page-block {padding-top: 50px;}
.splash-text { /*position: absolute; top: 50%; left: 5%; right: 5%;  transform: translateY(-50%);*/ color: #fff; height: auto !important; /*override quill*/}
.splash-text .ql-editor {overflow: hidden;}
.splash-text .ql-editor {overflow: hidden;}
.font-abrilfatface .splash-text {font-family: 'Abril Fatface';}
.font-playfairdisplay .splash-text {font-family: 'Playfair Display';}
.splash-text h1, .splash-text h2, .splash-text h3, .splash-text h4, .splash-text p {
    color: inherit; font-family: inherit; /* DEFAULT COLOR !*/
}
.splash-text p { font-family: Roboto;}
.no-image .splash-text {
    color: #222; /* DEFAULT COLOR !*/
}

/*.splash-page {min-height: 400px;  height: calc(100vh - 60px); }
.splash-page .section-background { position: absolute; top: 0; left: 0; bottom: 0; right: 0; background: #222;}
.splash-page .section-contents-wrapper { }
.splash-border-line .section-contents-wrapper { position: absolute; top: 50px; left: 50px; bottom: 50px; right: 50px; border: 1px solid rgba(255,255,255,.5); z-index: 3; }
.splash-border-thick .section-splash, .splash-border-thick .section-contents-wrapper, .splash-border-thick.splash-page .section-overlay, .splash-border-thick.splash-page .section-background { position: absolute; top: 50px; left: 50px; bottom: 50px; right: 50px; }
.splash-page .section-contents {z-index: 3; position: absolute; top: 50%; left: 5%; right: 5%;  transform: translateY(-50%); }
.splash-page.valign-top .section-contents {top: 10%; transform: translateY(-10%);}
.splash-page.valign-bottom .section-contents {top: auto; bottom: 10%; transform: translateY(-10%);}


.splash-page .section-overlay {position: absolute; top: 0; left: 0; bottom: 0; right: 0; z-index: 2; background: rgba(0,0,0,.3);}
.splash-page.no-image {background: none;}
.splash-page.no-image .section-overlay {background: none;}
.section-splash {position: absolute; top: 0; left: 0; bottom: 0; right: 0; background-size: cover; background-position: center center; opacity: 0.7;}
.section-splash-spinner {position: absolute; top: 0; left: 0; bottom: 0; right: 0; z-index: 5; background: #fff; opacity: 0.8;}
.section-splash-spinner > div {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center;}
.splash-page .direct-edit {background: transparent; border: 1px solid transparent; resize: none; width: 100%; font-size: 36px; color: #fff; }
.splash-page .direct-edit:hover {border-color: #aaa;}
.splash-page .direct-edit:focus {border-color: #fff;}
.splash-page+.page-block {padding-top: 50px;}
.splash-text .ql-editor {overflow: hidden;}
.splash-text .ql-editor {overflow: hidden;}
.splash-text h1, .splash-text h2, .splash-text h3, .splash-text p {
    color: #fff !important; 
}
.no-image .splash-text h1, .no-image .splash-text h2, .no-image .splash-text h3, .no-image .splash-text p {
    color: #222 !important; 
}*/
.page-block[data-type="header"] .section-contents h1, .splash-text h1 {font-size: 72px !important; line-height: 1.2;}
.page-block[data-type="header"] .section-contents h2, .splash-text h2 {font-size: 72px !important; line-height: 1.2;}
.page-block[data-type="header"] .section-contents h3, .splash-text h3 {font-size: 48px !important;}
.page-block[data-type="header"] .section-contents h4, .splash-text h4 {font-size: 20px !important;}
.page-block[data-type="header"] .section-contents p, .splash-text p {font-size: 16px !important;}


.page-block .ql-container h2 { font-size: 2em; }
.page-block .ql-container h3 { font-size: 1.5em; }
.page-block .ql-container h4 { font-size: 1.17em; }
.page-block .ql-container p { font-size: 1em; }

.document-participants, .document-events { min-height: 50px; display: flex; flex-wrap: wrap; }
.document-participants li, .document-events li { display: flex; list-style: none; flex: 0 0 50%; padding-right: 10px; margin-bottom: 20px; }
.document-participants .icon, .document-events .icon  { flex: 0 0 35px; font-size: 22px; padding-top: 2px; }
.document-participants .details, .document-events .details { flex: 1 1 auto; }
.align-center .document-participants li, .align-center .document-events li {  padding: 0 50px;}
.align-center .document-participants .details, .align-center .document-events .details { text-align: left; flex: 0 0 auto; width: calc(100% - 35px); }
.align-right .document-participants, .align-right .document-events { justify-content: right; }
.align-right .document-participants li {  }
.align-right .document-participants .icon, .align-right .document-events .icon  { /*flex: 1 0 auto;*/ padding-right: 10px; }
.align-right .document-participants .details, .align-right .document-events .details { flex: 1 1 auto; }
.align-right .document-events .notes { width: 100%;}
/*legacy support:*/
.document-participants li > .description, .document-participants li > .name, .document-participants li > .email,
.document-events li > .event, .document-events li > .date, .document-events li > .notes {
    flex: 0 0 100%;
}

.document-participants .description {font-weight: bold;}
.document-participants .title {font-weight: bold; margin-bottom: 5px;}
.document-participants .email {word-wrap: break-word;}

.document-events {/*display: flex;*/}
.document-events li {/*ist-style: none;  padding-bottom: 10px;*/}
.document-events li:nth-child(odd) {}
.document-events li:nth-child(even) { }
.document-events .event {font-weight: bold;}
.document-events .notes {color: #aaa; width: calc(100% - 35px);}
.align-center .document-events {justify-content: center;}

.document-name {color: #555; font-weight: bold; font-size: 24px;}
.section-header .direct-edit {font-weight: bold; font-size: 14px; text-transform: uppercase; letter-spacing: 1px; color: #333; margin-bottom: 10px; padding: 0; border: 1px solid transparent; }
.direct-edit {font-family: Roboto, sans-serif;}
.ql-container p { font-family: Roboto, sans-serif; font-size: 13px; margin-bottom: 0;}

.participant-signatures {list-style: none !important; margin: 0; padding: 0; display: flex;  flex-wrap: wrap;} 
.participant-signatures li {width: 50%;  margin-bottom: 20px; list-style: none; text-align: left; box-sizing: border-box; } 
.participant-signatures li:nth-child(odd) {padding-right: 10px;}
.participant-signatures li:nth-child(even) {padding-left: 10px;}
/*.participant-signatures li:nth-child(odd) {padding-right: 10px;}
.participant-signatures li:nth-child(even) {padding-left: 10px;}
.participant-signatures li:nth-child(n+3) {margin-top: 20px;}*/
.align-center .participant-signatures {justify-content: center;}
.align-center .participant-items {justify-content: center;}

.participant-initials { list-style: none !important; margin: 0; padding: 0; display: flex;  flex-wrap: wrap;} 
.participant-initials li {min-width: 80px; margin-right: 20px;  text-align: left;}
.participant-initials li:last-child {margin-right: 0;}
.align-center .participant-initials {justify-content: center;}

.product-lines td {border-bottom: 1px solid #eee; padding: 4px 2px; position: relative; }
.product-lines td input, .product-lines td textarea { padding: 4px 4px; border: 1px solid transparent !important; width: 100%;}
.product-lines td textarea {  resize: none;}
.product-lines td input:hover {border-color: #eee;}
.product-lines td input:focus {border-color: #aaa;}
.right, .right input { text-align: right; }
.product-lines td input:read-only, .product-lines td textarea:read-only, .product-lines td input.readonly, .product-lines td input.readonly:hover {border-color: transparent !important; padding: 0;}
/*.rowlines tbody td:first-child::before{content: '(';}
.rowlines tbody td:first-child::after{content: ')';}*/
.product-lines tbody td {}
.product-lines tbody td:first-child {}
.product-lines tbody td:nth-child(2) {}
.product-lines .add-ctrl {opacity: 0; position: absolute; bottom: -10px; height: 20px; left: -20px; width: 20px; font-size: 20px;}
.product-lines tr:hover .add-ctrl {}
.product-lines .ctrl {opacity: 0; position: absolute; top: 6px; right: -70px; width: 70px;}
.product-lines tr:hover .ctrl {opacity: 1;}

.product-lines .Quantity { text-align: right; }
.product-lines .Description {}
.product-lines .Price {text-align: right; }
.product-lines .LineTotal {text-align: right;}

.product-lines tfoot tr td {border-bottom: none;}
.content-options {list-style: none; margin: 0; padding: 0;}
.content-options li {padding: 10px 0;}
.content-options li > div {display: inline-block; padding-right: 20px;}
.content-options li > div:first-child {width: 200px;}
.content-options li > div:last-child {padding-right: 0;}
.content-options li:hover {background: #f5f5f5;}

.payment-items {list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; } /*display: flex; flex-wrap: wrap;*/
.payment-items li {width: 50%; } /*display: flex;*/
.payment-items .wrapper {border: 1px solid #ddd; border-radius: 4px; margin-bottom: 10px;}
.payment-items li:nth-child(odd) .wrapper {margin-right: 5px;}
.payment-items li:nth-child(event) .wrapper {margin-left: 5px;}
.payment-items .wrapper > div {display: inline-block; vertical-align: top; width: 50%; padding: 5px;}
.payment-items .wrapper > div:last-child {text-align: right;}
.payment-items li.odd {padding-right: 10px;}
.payment-items li.even {padding-left: 10px;}
/*.payment-items li:nth-child(odd) {padding-right: 10px;}
.payment-items li:nth-child(even) {padding-left: 10px;}
.payment-items li:nth-child(n+3) {margin-top: 10px;}
*/
.payment-items .notes {display: inline-block; padding-left: 5px; color: #aaa;}
.payment-items .notes::before {content: '(';}
.payment-items .notes::after {content: ')';}
.payment-items .date::before {content: 'Due: ';}

.html-signature.docfield{ background: none;} /*display: inline-block;*/
.preview .html-signature-box { background: #f5f5f5;}

.html-signature.docfield {cursor: pointer; border: none;}
.html-signature.docfield-focus{border-bottom: none;}
.html-signature-box{border-bottom: 2px solid #777; flex: 0 0 100%; height: 40px; position: relative;}
.html-signature-box span { display: block; padding: 6px 24px; margin: 0 4px; border-radius: 20px; background: #f5f5f5; color: #555; text-align: center;}
.docfield .html-signature-box span  { display: block; background: #3fc380; color: #fff; transition: all 0.3s; }
.docfield .html-signature-box span:hover { background: #00b16a; }
.docfield-signed .html-signature-box {background: none;}
.html-signature-box i, .html-initials-box i {padding-right: 4px;}
.html-initials-box span { display: none; padding: 6px; margin: 0 4px; border-radius: 20px; background: #f5f5f5; color: #555; text-align: center;}
.html-signature-box img {height: 40px;}
.html-signature-name { flex: 0 0 100%; color: #777; position: relative; padding: 4px; text-transform: uppercase; font-size: 11px; letter-spacing: 1px;}
.html-signature-date{position: absolute; right: 4px; top: 4px;}
.html-initials.docfield{ background: none;} 
.html-initials.docfield {cursor: pointer; border: none;}
.preview .html-initials-box { background: #eee; }
.docfield .html-initials-box span { display: block; background: #3fc380; color: #fff; transition: all 0.3s;}
.docfield .html-initials-box span:hover { background: #00b16a;}
.html-initials-box{border-bottom: 2px solid #777; height: 40px; position: relative;}
.docfield-signed .html-initials-box {background: none;}
.html-initials-box img {height: 40px;  }
.html-initials-name{padding: 4px; color: #777; text-transform: uppercase; font-size: 11px; letter-spacing: 1px;}
/*.html-signature{width: 300px; display: block; border-radius: 2px; margin-right: 20px;} 
.html-signature.docfield {cursor: pointer; border: none;}
.html-signature.docfield-focus{border-bottom: none;}
.html-signature-box{border-bottom: 2px solid #777; height: 40px;}
.html-signature-box span {padding-top: 8px; padding-left: 10px; display: inline-block; color: #F9690E;}
.html-initials-box span {padding-top: 8px; padding-left: 10px; display: inline-block; color: #F9690E;}
.html-signature-box img {height: 40px;}
.html-signature-name {background: #fff; color: #777; position: relative;}
.html-signature-date{position: absolute; right: 0; top: 0;}
.html-initials{display: block; border-radius: 2px; width: 60px; margin-right: 10px;} 
.html-initials.docfield {cursor: pointer; border: none;}
.html-initials-box{border-bottom: 2px solid #777; height: 40px;}
.html-initials-box img {height: 40px; }
.html-initials-name{text-align: center; background: #fff; color: #777;}*/
img.data-initials, img.data-signature {margin-left: 0 !important; margin-right: 0 !important;}

.docflow-venues tbody td{padding: 0 10px 10px 0;}

.docfield{z-index: 80; background: rgba(228,241,254,0.8);  border-radius: 2px; position: absolute;} /*border: 1px solid #E4F1FE;*/
.doc-html .docfield{position: relative;}
.docfield p {padding: 2px 4px; color: #4B77BE;}
.docfield-sign{cursor: pointer; }
.docfield-text{font-size: 12px; line-height: normal;}
.docfield-text input, .docfield-text textarea{ box-shadow: none; border: none; background: transparent; padding: 0 1px; font-size: 16px; line-height: normal; }
.docfield-text textarea{resize: none;}
.docfield-checkbox{cursor: pointer; }
.docfield-checkbox .glyphicon {display: block; padding-left: 2px; padding-bottom: 2px; margin: 0; font-size: 16px; color: #fff;}
body .docfield-checkbox a{line-height: 1 !important;}
.delete-docfield{display: none; position: absolute; right: -20px;}
.docfield-new {opacity: 0.5; display: none;}
.docfield-signed .docfield-instruct{display: none;}
.docfield.docfield-signed {background: none; border: none !important;}
.docfield-sign.docfield-signed{cursor: default;}

.docfield-tooltip {position: absolute; bottom: 20px; left: 0; background: #F4D03F; color: #555; padding: 1px 3px;}

.docfield-active {}
.docfield-active .delete-docfield{display: normal;}
.docfield-focus { background: rgba( 34, 167, 240, 0.4); } /*border-bottom-color: #4B77BE;*/
.docfield-signed .doc-field-required{display: none;}
.doc-field-required{position: absolute; right: -6px; top: -6px; width: 12px; height: 12px;}
.docfield-readonly {background: none !important; border-color: transparent !important;}
.docfield-readonly img.doc-field-required {display: none !important;}

.docfield-deleted{display: none;}
.docfield-instruct{color: #4B77BE; padding-left: 4px; height: 17px; vertical-align: middle; font-size: 14px; } /*background: #E4F1FE; */

.docfield-instruct span{}
.doc-container{}
.doc-left{position: absolute; left: 0; width: 180px; height: 100%; background: pink;}
.doc-right{position: absolute; right: 0; width: 180px; height: 100%; background: pink;}
.doc-center{position: absolute; left: 180px; right: 180px; height: 800px; overflow: scroll;}

.docfield .label{ z-index: 10;}
.docfield .signature{z-index: 20; position: absolute; bottom: -23px; left: 0;}

.docfield-pointer{position: absolute; z-index: 101; display: none; left: -120px; }
.docfield-pointer a,.docfield-pointer-up a, .docfield-pointer-down a {color: #000; font-weight: bold;}
.docfield-pointer a, .docfield-pointer a:active, .docfield-pointer a:focus {outline: none !important; border: none !important; text-decoration: none;}
.docfield-pointer a:active, .docfield-pointer a:focus {outline: 0 none !important;}
.docfield-pointer:hover a{text-decoration: none; color: #fff;}
.docfield-pointer-box{display: inline-block; background: #F7CA18; border-top-left-radius: 4px; border-bottom-left-radius: 4px; height: 39px; width: 120px; padding: 10px 0 0 10px; vertical-align: top; }
.docfield-pointer-box .fa {padding-right: 4px;}
.docfield-pointer .glyphicon, .docfield-pointer-up .glyphicon, .docfield-pointer-down .glyphicon {color: #F7CA18; font-size: 40px; top: 0; margin-left: -14px; }

.docfield-pointer-up {display: none; position: fixed; top: 140px;  z-index: 101; transform: rotate(-90deg);	transform-origin: left top 0;}
.docfield-pointer-down {display: none; position: fixed; bottom: 35px;  z-index: 101; transform: rotate(90deg);	transform-origin: left top 0;}
.docfield-pointer-up .docfield-pointer-box{ width: 60px;}
.docfield-pointer-down .docfield-pointer-box{width: 60px;}

.sigWrapper canvas {margin: 0 auto;}

#divSpinner > div { position: absolute; top: 250px; right: 45%; z-index: 999;}



@media screen and (max-width: 1200px) {
    .truncate {display: none;}
    .docfield-pointer-box {width: 60px;}
    .docfield-pointer {left: -60px;}
}

@media screen and (max-width: 600px) {
    #divSpinner > div { position: absolute; top: 100px; right: 25%; z-index: 999;}
    .preview-bar > div { font-size: 9px;}
    .preview-bar a { top: 8px; right: 10px; font-size: 16px;}

    .doc-html{ margin: 20px; }

    .doc-wrapper{margin-top: 10px;}
    .doc-legend-title{display: none;}     
    .doc-legend-details { padding: 0 20px 5px 20px;}
    .doc-legend-details > div {width: 50%; padding-bottom: 0; padding-top: 5px;}
    .doc-legend-details > div:last-child {}
    .doc-legend-details h3 {margin-bottom: 0; font-size: 12px;}
    .doc-legend-details .details .title {padding: 0 0 5px 0; font-size: 14px;}
    .doc-legend-document {display: none !important;}
    .doc-legend-document span, .doc-legend-participant span {}    
    .doc-legend-participant-photo{display: none !important;}
    .doc-legend-fields {display: block !important;}
    .doc-legend-fields h3 span{display: inline-block !important;}

    .docfield-pointer {}
    .docfield-pointer .docfield-pointer-box { color: #F7CA18;}
    
    .participant-signatures li {width: 100%; padding-right: 0 !important; padding-left: 0 !important;}
    .doc-footer {font-size: 10px; padding: 10px 15px; }
    .doc-footer a {vertical-align: top; margin-bottom: 5px;}
    .bound-by-terms {display: block; margin: 0 10px 0 10px;}

    .doc-intro-body {background: #fff; max-width: 600px; margin: 0 0; position: absolute; top: 20px; left: 20px; bottom: 20px; right: 20px; transform: none;}
    .doc-intro-copy {padding: 20px; min-height: inherit; line-height: 20px; font-size: 12px; color: #888;}
    .doc-intro-copy h3 {font-size: 16px;}

    .page-block {padding: 15px 15px;}
    .page-block:first-of-type {padding-top: 15px;}
    .page-section.primary { padding:  0;}
    .page-section.cover {/*margin-top: -20px; margin-left: -20px; margin-right: -20px;*/ }
    .splash-page {min-height: 200px; }
    .splash-page + .page-block {padding-top: 20px;}
    .splash-page .direct-edit {font-size: 24px;}
    /*.splash-page .section-contents { position: relative; left: auto; top: auto; transform: none; padding: 15% 20px; margin: 0 auto;}*/
    .header-document-title {font-size: 20px;}
    .splash-page .section-contents { padding: 20px;}
    .splash-border-line .section-contents-wrapper { top: 15px; left: 15px; bottom: 15px; right: 15px;  }
    .splash-border-thick .section-splash {  top: 30px; left: 30px; bottom: 30px; right: 30px; }
    .splash-border-thick .section-contents-wrapper { margin: 0;}
    .splash-border-thick .section-contents { padding: 35px;}
    .splash-border-top { display: flex; flex-direction: column; padding: 0;}
    .splash-border-top .section-splash {  }
    .splash-border-top .section-contents-wrapper {  }
    .splash-border-top .section-contents-wrapper .section-contents { position: relative;}
    
    .doc-page { font-size: 12px; }
    .section-contents p {font-size: 12px; margin-bottom: 0;}

    .document-participants, .document-events {display: block;}
    .document-participants li, .document-events li { width: 100%; border-left: none !important; padding: 0 !important; }
    .participant-signatures {flex-wrap: wrap;}

    .page-block[data-type="header"] .section-contents h1, .splash-text h1 {font-size: 42px !important; margin-bottom: 0;}
    .page-block[data-type="header"] .section-contents h2, .splash-text h2 {font-size: 42px !important; margin-bottom: 0;}
    .page-block[data-type="header"] .section-contents h3, .splash-text h3 {font-size: 32px !important;}
    .page-block[data-type="header"] .section-contents h4, .splash-text h4 {font-size: 24px !important;}
    .page-block[data-type="header"] .section-contents p, .splash-text p {font-size: 14px !important;}

    .product-lines { font-size: 12px;}
    .product-lines .Quantity {/*width: 30px;*/}
    .product-lines .Description {/*width: auto;*/}
    .product-lines .Price {width: 60px;}
    .product-lines .LineTotal {width: 60px;}
    .product-lines thead td { width: auto !important;}
    
    .aAgree {padding: 12px 24px;}    
}


    .modalcontent.is-mobile {padding: 0 0;}
    .modal.is-mobile {
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        overflow: hidden;
    }

    .is-mobile .modal-dialog {
        position: fixed;
        margin: 0;
        width: 100%;
        height: 100%;
        padding: 0;
    }

    .is-mobile .modal-content {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        border-radius: 0;
        box-shadow: none;
    }

    .is-mobile .modal-header {
        position: absolute;
        top: 0;
        right: 0;
        left: 0;
        height: 50px;
        padding: 10px;
        background: #6598d9;
        border: 0;

        display: none;
    }

    .is-mobile .modal-title {
        font-weight: 300;
        font-size: 1.5em;
        color: #fff;
        line-height: 30px;
    }

    .is-mobile .modal-body {
        position: absolute;
        top: 0;
        bottom: 70px;
        width: 100%;
        font-weight: 300;
        overflow: auto;
    }

    .is-mobile .modal-footer {
        position: absolute;
        right: 0;
        bottom: 0;
        left: 0;
        height: 100px;
        padding: 10px;
        background: #f1f3f5;
    }
    .is-mobile .mobile-sign-padding {padding: 0 10px;}


.fullscreen .doc-legend {display: none;}
.fullscreen .doc-preview {display: none;}
.fullscreen .credit {display: none;}
.fullscreen .preview-bar {display: none;}
.fullscreen .doc-flow { margin: 0 auto;}
.fullscreen .splash-page { height: 100vh;}
.fullscreen .doc-wrapper { margin-top: 0;}