.create-signature {background-image: repeating-linear-gradient(45deg, #f8ecbe, #f8ecbe 30px, #e3e3e3 30px, #e3e3e3 60px);}
.modal-create-signature .signature-btns {margin:-2vw 7.75vw 0}
.modal-create-signature.fullscreen .signature-btns {margin: 1vw 29vw 0;}
.signature-btns button {width: 100%;}
canvas.signature-pad {background-color: #FFF;box-shadow: 0 0 0 0.25vw #000;}
canvas.signature-pad.has-error {box-shadow: 0 0 0 1vw var(--color_error);}
.signature-area label {padding: 1vw 0 .5vw 0 !important;}
.signature-area #signature_file {position: absolute;top: 0;right: 0;font-size: 200px;direction: ltr;cursor: inherit;opacity: 0;}
#settings #user_settings_signature .up-btn  {margin-top: 1vw;}
#settings #user_settings_signature .up-btn .form-group {margin: 0;}
#user_settings_signature .textonly:hover {color: inherit;cursor: default;box-shadow: none;}
#user_settings_signature .signature_message {padding: 1vw;height: 10vw;resize: none;}
.signature_file {text-align: center;margin-top: 1vw;padding: 0.5vw;}
.signature_file > img {height: 4.5vw;}
#user_settings_signature label[for="signature_message"] {padding-top: 0 !important;}
#user_settings_signature {padding: 0.5vw 0;}
.signature-user-settings {display: flex;flex-direction: column;align-items: center;font-size:var(--fontlarge);	background: #FFF;}
table#pdf_signatures .signature_file {text-align: center;margin-top: 0;	padding: 0 0.5vw;}
.signature-preview {padding: 0.5vw;}
table#pdf_signatures div {font-size: var(--fontnorm);padding: 0.125vw;} 
table#pdf_signatures .signature_name {padding-top: 0.25vw;border-top: 1px solid #000;margin-top: -0.5vw;}
.previewheadline {width: 100%;background-color: #e3e3e3;padding-bottom: 1vw;}
.modal-create-signature {z-index: 1101;	padding: 0 !important;overflow-y: hidden !important;}
.modal-create-signature.fullscreen .modal-dialog {top: 0;width: 100%;height: 100vh;}
.modal-create-signature.fullscreen .modal-body, .modal-create-signature.fullscreen .modal-body > div {height: calc(100vh - 3vw);height: calc(var(--realheight) - 3vw);padding: 0;}
.modal-create-signature.fullscreen i.signarea-add.fa, .modal-create-signature.fullscreen .signarea-add.sign_img {margin:0 6vw;}
.modal-create-signature.fullscreen .flexgroup {justify-content: center;	padding: 1vw;}
.modal-create-signature .help_pad i {float: right;font-size: var(--fontlarge);padding-top: 0.1vw;}
.flexgroup {display: flex;align-content: center;justify-content: space-between;flex-direction: row;flex-wrap: nowrap;align-items: center;}
.signarea-add {width: 6vw;}
.signarea-add.sign_img {margin: -2vw -1vw -2vw 0;}
i.signarea-add.fa {font-size: 6vw;}
i.signarea-add.fa {font-size: 6vw;margin: -0.5vw;}
#modal-create-form-signature .modal-body {padding-bottom:1vw}
#modal-create-form-signature.fullscreen .modal-body {padding-bottom:0}
/* Response */
.create-signature .signature-response .course-completed {display: block;font-size:var(--fontlarge);}
.create-signature .signature-response .course-completed:before {font-family: 'FontAwesome';font-size:var(--fontlarge);padding-right:.5vw;margin-right: 0;}
.create-signature .signature-response .course-completed a {display: block;width: 50%;padding: 1vw 0 !important;margin: 1vw auto 0;line-height: inherit !important;height: auto;}

/* Signature Help */
#modal-signature_help {z-index: 1102;top: -3.5vw;left: -1vw;}
#modal-signature_help video {width:100%}
#modal-signature_help .helptext {background-color: #f6f5f7;color: #000;}
#modal-signature_help .headline, #modal-signature_help b {font-weight: 600;}
#modal-signature_help .modalclose {width: calc(100% - 2vw);margin: 0 1vw 1vw;}
#modal-signature_help .how .tile {background-color:var(--color_btn_succ);color:var(--color_text_btn_succ);display: flex;flex-direction: column;flex-wrap: nowrap;align-content: center;justify-content: center;align-items: center;height: 7vw;	font-size: var(--fontnorm);}
#modal-signature_help .how .tile .helpnr {color: var(--color_btn_succ);background-color: var(--color_text_btn_succ);border-radius: 100%;font-size: 2vw;padding: 0 0.8vw;margin-bottom: 0.5vw;font-weight: 800;}
#modal-signature_help .how.mobile-only {display:none}
#modal-signature_help .how.desktop-only {display:block}
.mobile #modal-signature_help .how.desktop-only {display:none}
.mobile #modal-signature_help .how.mobile-only {display:block}

/* Signature in Onboarding */
.onboarding .fullscreen .modal-header {height: 3vw;}
.onboarding .modal-fullscreen-toggle {display:none} 
.onboarding .hasfullscreen .modal-header .modal-title, .onboarding .hasfullscreen .modal-header .close {padding-top: 0.2vw;}
.onboarding .fullscreen .modal-body > div {display: flex;flex-direction: column;justify-content: center;overflow: hidden;}
.onboarding .bold {font-weight: calc(600 + var(--fontweight_correction));}
.onboarding .signature-btns .paddingr, .onboarding #modal-signature_help .how .col-xs-4.paddingr {padding-right: 1vw;}
.onboarding .margint {margin-top: 1vw;}
.onboarding .modal-create-signature .help_pad i {padding: 0.75vw 1vw 0 0;}
.onboarding #modal-signature_help .how {margin-bottom:1vw}
.onboarding #modal-signature_help {line-height: normal;}
.onboarding #modal-signature_help .modal-footer {padding:1vw 0 0 0;border-top:none}
.onboarding #modal-signature_help .helptext {padding: 1vw;}
.onboarding #modal-signature_help .tile {padding: 0 1vw;}
 
@media only screen and (max-width: 767px) {
	.modal-create-signature {z-index: 10000;padding: 0 !important;}
	.signarea-add {display:none !important}
	.sign_img.visible-xs {padding: 2rem;margin: auto;width: 80%;}
	.modal-create-signature.fullscreen .signature-btns, .modal-create-signature .signature-btns {margin: 1rem;}
	.modal-create-signature.fullscreen .modal-body, .modal-create-signature.fullscreen .modal-body > div {height: calc(100vh - 4rem);height: calc(var(--realheight) - 4rem);}
	.modal-create-signature .help_pad i {padding-top: .3rem;padding-right:.5rem}
	canvas.signature-pad {max-width: calc(100vw - 2rem);}
	.signature-area label {padding: 1rem 0 .5rem 0 !important;}
	.signature-area .btn, .open-signature-area {height:3rem;line-height:2.8rem; padding:0 1rem}
	#settings #user_settings_signature .up-btn  {margin-top: 1.5rem;}
	.create-signature .distanceall {padding: 1rem 0;margin: 0 -1rem;justify-content: center;}
	
	.signature-btns {margin: 0rem 1rem 0;}
	.create-signature .font-large.bold {padding: 0 1rem;}
	.signature-btns button {width: 100%;}
	.signature-btns button + button {margin-left: 0;margin-top: 1rem;}
	#user_settings_signature .signature_message {height: 10rem;	min-height: inherit;}
	#settings #user_settings_signature .up-btn.textonly {display: none;}
	.signature_file {margin-top: 1rem;padding: 0.5rem;}
	.signature_file > img {height: 4.5rem;}
	table#pdf_signatures .signature_file {padding: 0 0.5rem;}
	.signature-preview {padding: 0.5rem;}
	table#pdf_signatures div {padding: 0.125rem;}
	table#pdf_signatures .signature_name {padding-top: 0.25rem;margin-top: -0.5rem;}
	.previewheadline {padding-bottom: 1rem;}
	
	/* Response */
	.create-signature .signature-response .course-completed a {width: 20rem;margin: 1rem auto 0;padding: 1rem 0 !important;}
	
	/* Signature Help */
	#modal-signature_help {top: -4.5rem;z-index: 10001;padding: 0 !important;left: -1rem;width: calc(100% + 2rem);}
	#modal-signature_help .modalclose {width: calc(100% - 2rem);margin: 0 1rem;}
	#modal-signature_help .how .tile .helpnr {font-size: 2rem;padding: 0 0.75rem;margin-bottom: 0.5rem;}
	#modal-signature_help .how .tile {height: 8rem;padding: 0.5rem;}	
	
	/* Signature in Onboarding */
	.onboarding .fullscreen .modal-header {	height: 4rem;padding: 1.1rem;line-height: normal;}
	.onboarding .hasfullscreen .modal-header .modal-title, .onboarding .hasfullscreen .modal-header .close {padding-top: 0;}
	.onboarding .signature-btns .paddingr, .onboarding #modal-signature_help .how .col-xs-4.paddingr {padding-right: 1rem;}
	.onboarding .margint {margin-top: 1rem;}
	.onboarding .modal-create-signature .help_pad i {padding: 0.75rem 1rem 0 0;}
	.onboarding #modal-signature_help .how {margin-bottom:1rem}

	.onboarding #modal-signature_help .modal-footer {padding:1rem 0;}
	.onboarding #modal-signature_help .helptext {padding: 1rem;}
	.onboarding #modal-signature_help .tile {padding: 0 1rem;}
}

@media only screen and (orientation: landscape) and (max-width: 767px) {
	.sign_img.visible-xs {display:none !important}
	.signature-btns button + button {margin-left: 1rem;margin-top: 0;}
	canvas.signature-pad {max-width: calc(100vw - 20rem);}
	.modal-create-signature.fullscreen .flexgroup {padding: 3rem 10rem}
	.modal-create-signature.fullscreen .signature-btns, .modal-create-signature .signature-btns {margin:0}
	.signature-btns {width: calc(100vw - 10rem);padding-left: 10rem;}
	.signature-btns button {width: 100%;}
	.help_pad {display:none}
}

@media (min-aspect-ratio: 16/9) and (min-width: 1680px) {

	#modal-signature_help {top: -5.5vw;}
	.modal-create-signature.fullscreen .modal-body, .modal-create-signature.fullscreen .modal-body > div {height: calc(100vh - 2.6vw);height: calc(var(--realheight) - 2.6vw);}
	
	/* Signature in Onboarding */
	.onboarding .fullscreen .modal-header {height: 2.6vw;}
	.onboarding .hasfullscreen .modal-header .modal-title, .onboarding .hasfullscreen .modal-header .close {padding-top: 0.1vw;}
	.signature-btns {margin: 1vw 11.5vw 1vw;}
	.settingsblock.morepadding {padding:1vw}
}