@import url('https://fonts.googleapis.com/css?family=Mr+De+Haviland');
.formclicker{
	position: absolute;
	top:0;left:0;right:0;bottom:0;
	background-color: rgba(255,255,255,.5);
	padding: 20% 20px;
	font-weight:bold;
	font-size: 18pt;
	text-align: center;
	cursor: pointer;
	z-index: 2000;
	transition: background-color 300ms ease;
}
.formclicker:hover{
	background-color: rgba(255,255,255,.7);
}
.formclicker__text{
	background-color: #fff;
	color: #5495a4;
	padding: 1rem;
}
.formpage, .aformpage{
	position: relative;
	background:white;
}
.formpage div.fillthisout{
	background:rgba(255,255,100,.8);
	vertical-align: center;
	box-sizing: content-box;
}
.formpage div.fillthisout.light{
	background:rgba(255,255,100,.5);
}

.formpage div.fillthisout.requiredfield{
	border:  1px solid red;
}
.formpage div.whiteback, .formpage div.whiteback div {
	background:transparent;
}
.formpage div.whiteback .bton{
	background:#eee;
	
}
.formpage div[type="gaggle"]{
	background:transparent;
}
.formpage div[type="signature"]{
	font-family:'Mr De Haviland', cursive;
}
.formpage div.noback{
	background:transparent;
}
.formpage input, .formpage textarea{
	position: absolute;
	top:0;left:0;right:0;bottom:0;
	width:100%;height:100%;
	outline:none;border:none;
	background:transparent;
	z-index: 100;
	box-sizing: content-box;
	padding: 0 2px;
}
.formpage .bton{
	position:relative;
	z-index:100;
}
.formpage textarea{
 font-size: 20px;
 line-height: 26px;
}
.formpage input[type="radio"], .formpage input[type="checkbox"] {opacity:0;}
.formpage label {cursor: pointer;position: absolute;left:0;right:0;top:0;bottom:0; opacity:0; text-align:center; font-weight:bold }
.formpage input[type="radio"]:checked + label, .formpage input[type="checkbox"]:checked + label {opacity: 1;}
.formpage div[type="checkbox"]{text-align: center;}
.formpage div.whiteback .bton:hover{
	background:rgba(237, 237, 104, 0.8);
}
.formpage .value{
	position: absolute;
	left:0;
	right:0; top:0; bottom:0;
}
.instructions{
	display:none;visibility: hidden;
}
.formpage .deficon{
	width:18px;
	height:18px;
	position: absolute;
	right: -7px;
	top:-7px;
	z-index:200;
	background: white;
	border-radius: 50%;
}
.formpage .deficon .fa{
	font-size: 22px;
	line-height:22px;
	cursor: pointer;
}
.formpage .odformfield[type="checkbox"] .deficon{
	width:12px;
	height:12px;
}
.formpage  .odformfield[type="checkbox"] .deficon .fa{
	font-size: 13px;
	line-height:13px;
		position: absolute;
		left:0;right:0;	
}

.instructionhilite{
	border:1px solid #888;
	
}
.instructionhilite .deficon{
	right:-8px;
	top:-8px;	
}

.formpage .formsbubbleenv{
	position: absolute;
	background:transparent;
	bottom:100%;
	left:50%;
	width:0;
	height:0;
	border-style:solid;
	border-width: 15px 10px 0 10px;
	margin-left:-10px;
	border-color: #444 transparent transparent;
	z-index: 300;
	transform-origin: 50% 50%;
}
.formpage .formbsbubble, .formpage div.whiteback div.formbsbubble {
	position:absolute;
	width: 300px;
	background:#444;
	color:white;
	left:-150px;
	bottom: 13px;
	padding:10px;
	border-radius: 10px;
	
}
.formpage .formsbubbleenv.onbottom{
	top:100%;
	left:50%;
	width:0;
	height:0;
	border-style:solid;
	border-width: 0 10px 15px 10px;
	border-color: transparent transparent #444  transparent;
	z-index: 300;
}
.formpage .onbottom .formbsbubble{
	bottom: auto;
	top:13px;
	font-size: 10pt;
}
.formpage .closeit{
	float:right;
	margin:-5px -5px 0 0;
	background:transparent;
	cursor: pointer;
}
div[data-required="1"].fieldpath{
	border: 1px solid red;
}
div[type="checkbox"].fieldpath{
	content:"x";
}
.submitbuttonenv{
	background:white;
	text-align: center;
	margin-top:20px;
}
.submitbuttonenv .bton{
	font-size: 14pt;
	width:auto;
}
.submitbuttonenv .bton.small{
	font-size: 10pt;
	padding:5px;
	width:auto;
}
.formpage div.signaturelock{
    padding: 4px;
    font-size: 10px;
	position: absolute;
	right:-10px; top:50%;
	margin-top:-5px;
    width:10px;height:10px;
    display: inline-block;
    background: #228;
    color: white;
    line-height: 13px;
    text-align: center;
    margin: 0 4px;
    border-radius: 50%;
}
.ovcontent .formpage{
	margin: 30px 0;
}
.ovcontent .pgbreak{
	height:30px;
	background:#545454;
	content:" ";
	display:block;
	margin: 0 -10px;
}
#signatureblock .forminput{
	margin:20px 10px;
}

.formimageenv{
	position:absolute; top:0; left:0; width:100%; height:100%;
}
.formpdfenv{
	position: absolute; left:0;right:0; top:50%;margin-top:-0.5em;
	text-align: center;
}
.required-post-it{
	position: absolute;
	width: 100px;
	height:40px;
	top:50%;
	right: 100%;
	margin: -20px 20px 0 0;
	background:#E17C31;
	text-align: center;
	line-height:40px;
	opacity: 0.6;
}
.required-post-it:after{
	position: absolute;
	width:0;
	height:0;
	border-style:solid;
	border-width: 20px 0 20px 20px;
	border-color: transparent transparent transparent #E17C31;
	content: "";
	left:100%;
	top:0;
}
#admin-takemenow{
	padding:10px; margin:10px; background: #FFFDBF;
}
#admin-takemenow.nextone{
	margin:0;
	position: fixed; text-align: center;
	top:0; left:0; right:0;
	z-index: 10000;
}
#admin-takemenow.nextone .bton{
	margin: 0 30px;
}
#admin-takemenow .fa-times-circle{
	float:right; cursor: pointer;
}
.startform{
	margin: 8px 5px;
	padding: 8px;
	background:white;
	border: 1px solid #aaa;
	box-shadow: 1px 1px 3px 0 rgba(40,40,40,.4);
	transition: all 200ms ease-in-out;
	cursor: pointer;
	text-align:left;
}
.startform:hover{
	background:#eee;
}
.startform.submitted{
	background:#169F5C;
	color:white;
}
.startform.submitted:hover{
	background:#0F8E4F;
}
.startform.started{
	background:#FFCE43;
}
.startform.started:hover{
	background:#FCD979;
}

.formstarted .startform{
	background:#99F799;
}

#ad-db-userlist{
	position: relative;
}
 #ad-db-userlist .thlist tr .fa-chevron-circle-down{
	color:transparent;
	margin-left: 10px;
	cursor: pointer;
	font-size: 13pt;
}
 #ad-db-userlist .thlist tr:hover .fa-chevron-circle-down{
	color:#aaa;
}

.odform-options{
	position: absolute;
	top: 2px;
	background: white;
	border-radius: 2px;
	border:1px solid #999;
	padding: 2px;
	box-shadow: 1px 1px 2px 0 rgba(40,40,40,.2);
    z-index: 100;
	font-size: 9pt;
}
.odform-options h4{
	margin: 0 0 5px 0;
	text-align: center;
	border-bottom: 1px solid #aaa;
}
.odform-options .bbtn{
	padding: 3px 7px;;
	margin: 2px;
	cursor: pointer;
	transition: all 100ms ease-in-out;
	color: #444;
	display:block;
}
.odform-options .bbtn:hover{
	background:#eee;
	cursor: pointer;
}
.odsignaturebutton{
	font-family: "Open Sans", arial;
	margin:0; vertical-align:top;
	background:#FEFF67;
}
.odsignaturebutton:hover{
	background: #EDED68;
}

.od-form-link{
	margin-bottom:10px;
	font-size: 9pt;
}
.od-form-link input{
	outline:none; border:none;
	width: 100%;
	box-sizing: border-box;
}

.sbutton{
	display:inline-block;
	margin: 2px 5px;
	padding: 2px 5px;
	background:#ddd;
	cursor: pointer;
	font-size: 9pt;
	font-weight:bold;
	transition: all 200ms ease-in-out;
}
.sbutton:hover{
	background:white;
}

.odform-dropdown{
  font-size: 13px;
  background: #fff;
  border: 1px solid #ccc;
  border-radius: 6px;
  overflow: hidden;
  position: absolute;
  left:0;top:0;right:0;bottom:0;
 background:rgba(237, 237, 104, 0.8);
}

.odform-dropdown .fa-arrow-circle-down{
	position: absolute;
	right:0;
	top:50%;
	line-height:1em;
	margin-top:-0.5em;
	margin-right: 0.5em;
}

.odform-dropdown .select select{
  background: transparent;
  line-height: 1;
  border: 0;
  padding: 0;
  border-radius: 0;
  width: 120%;
  position: relative;
  z-index: 10;
  font-size: 1em;
  position: absolute;
  left:0;top:0;right:0;bottom:0;
}


@media all and (max-width: 766px){
	.formpage .deficon{
		width:12px;
		height:12px;
	}
	.formpage .deficon .fa{
		font-size: 13px;
		line-height:13px;
			position: absolute;
			left:0;right:0;
	}
	.odsignaturebutton{
		padding: 2px 4px;
		font-size: 10px;
		margin:0;
	}
	.required-post-it{
		width: 70px;
		height:20px;
		margin: -10px 10px 0 0;
	}
	.required-post-it:after{
		border-width: 10px 0 10px 10px;

	}		
}
@media all and (max-width: 500px){

	.formpage .deficon{
		width:10px;
		height:10px;
	}
	.formpage .deficon .fa{
		font-size: 12px;
		line-height:12px;
		position: absolute;
		left:0;right:0;
	}
	.formpage .odformfield[type="checkbox"] .deficon{
		width:10px;
		height:10px;
		display:none;
	}
	.formpage  .odformfield[type="checkbox"] .deficon .fa{
		font-size: 12px;
		line-height:12px;
		display:none;
	}
	.odformfield[type="text"] .deficon{
		transition: all 200ms ease-in-out;	
		transform: scale(0);
		-webkit-transform: scale(0);
	}
	.odformfield[type="text"].onfocused .deficon{
		display:block;
		transform: scale(1);
		-webkit-transform: scale(1);
	}	
	.formsbubble{font-size: 8pt;}
	
	.odsignaturebutton{
		padding: 1px 2px;
		font-size: 8px;
	}
	.required-post-it{
		width: 40px;
		height:10px;
		margin: -5px 5px 0 0;
	}
	.required-post-it:after{
		border-width: 5px 0 5px 5px;

	}	
	.canvas-control {
		-ms-overflow-style: none;  /* IE and Edge */
		scrollbar-width: none; 
	}
	.canvas-control::-webkit-scrollbar {
		display: none;
	}
}


/* Dark mode */
#darkmode-check{padding:10px; margin:10px 0; background:#eee; color:black; display:none}
@media (prefers-color-scheme: dark) {
    #darkmode-check{
		display:block !important;
	}
} 




/* from ODforms */
.filedroptitle{font-weight:bold; font-size: 16pt; padding: 0 0 20px 0;}
.filedropdesc p{margin:7px 0 7px 0;}
.filedropbox{box-shadow: 0px 1px 10px rgba(0, 0, 0, 0.35);border: 1px solid #eee;background:#fff;margin:10px 0 10px 0;position:relative;cursor:pointer;overflow: hidden;padding:0px 0 40px 0;max-height: 250px;-webkit-transition: all 200ms ease;-moz-transition: all 200ms ease;-ms-transition: all 200ms ease;-o-transition: all 200ms ease;transition: all 200ms ease;}
.filedropbox:hover{background: #f2f2f2;}
.bignchuncky{outline:none;border:1px solid #444;padding:5px;margin-bottom: 15px; font-size: 16pt;width:100%;-webkit-box-sizing : border-box;-moz-box-sizing : border-box;box-sizing : border-box;}
.smalltxt{font-size: 12pt;}
.bnclabel{margin: 5px 0 5px 0;        font-size: 15pt;}
.empty{color:#aaa;font-style: italic;}
.transback{border: 1px solid #ddd;padding:10px;background: rgba(255,255,255,.4);}
.threadformtitle{padding:10px; font-weight:bold;}

.aform .formtitle{
	font-weight:bold;
}
.aform .formtitle:after{
	clear:both;
}
.aform .formcnt{
	float:right;
	margin: 0 0 10px 10px;
}
.largebutton, .aform{
	margin: 10px auto;
	background:rgba(255,255,255,.5);
	padding:5px;
	transition: all 200ms ease-in-out;
	cursor: pointer;	
}
.largebutton{
	font-size: 16pt;
	font-weight:bold;
	text-align: center;
}
.largebutton:hover, .aform:hover{
	background:rgba(255,255,255,.8);
}
.aformpage{
	background:white;
	margin: 40px 0;
	padding:0;
}
.form-image-controls{
	display:table;
	background: #eee;
	width:100%;
	border-collapse:separate;
	border-spacing: 10px;
}
.form-imrow{
	display:table-cell;
}
.aldel{
	text-align: right;
}
.thepage{
	min-height: 200px;
	position: relative;
}
.noimage{
	text-align:center;
	padding: 150px 0;
}
.theimage img{
	width:100%;
}
.theimage canvas{
	position: absolute;
	left:0; top:0;
	width:100%;
	height:100%;
}
.noshow{
	display:none;
}
.fieldpath{
	position: absolute;
	background:rgba(40,40,40,.4);

}
.fieldpath:after{
	position:absolute;
	background:rgba(40,40,40,.4);
	bottom:100%;
	left:0;
	padding: 2px;
	border-radius: 1px 1px 0 0;
	font-size: 5pt;
	line-height: 5pt;
	max-width: 100%;
	overflow:hidden;
	content: "User";
}
.fieldpath span{
	position:absolute;
	left:0; top:0; width:100%; height:100%;
	font-size: 8pt;
	overflow:hidden;	
}
.fieldpath.activated{
	background:rgba(23,136,203,.8)  !important;
}
.fieldpath[data-admin="1"]{
	background:rgba(253,218,82,.8);
}
.fieldpath[data-admin="2"]{
	background:rgba(105,212,243,.8);
}
.fieldpath[data-admin="5"]{
	background:rgba(101,201,160,.8);
}
.fieldpath[data-admin="1"]:after{
	background:rgba(253,218,82,.8);
	content: "Admin";
}
.fieldpath[data-admin="2"]:after{
	background:rgba(105,212,243,.8);
	content: "Admin Fills for User";
}
.fieldpath[data-admin="5"]:after{
	background:rgba(101,201,160,.8);
	content: "Third Party User"
}
.chwidth{
	position: absolute;
	width: 10px; height:10px;
	background: rgba(40,40,40,.4);
	border-radius: 50%;
	right:-5px;
	bottom:-5px;
	border:1px solid rgba(40,40,40,.4);
}
.fieldpath.activated .chwidth{
	background:rgba(23,136,203,.8);
	border:1px solid rgba(80,80,80,.8);
}
.fieldlist{
	position: absolute;
	background:white;
	top:0;
	right:100%;
	width: 200px;
	border:2px solid #1788CB;
}
.thefieldlist{
    max-height: 600px;
    overflow-y: auto;	
}
.fieldline{
	padding: 3px;
	font-size: 10pt;
	border-top: 1px solid #aaa;
	cursor: pointer;
}
.fieldline.activated{
	background:rgba(23,136,203,.8);
	color:white;
}
.fieldline:hover{
	background:#eee;
}

.fieldadd{
	padding: 3px;
}
.grabber{
	height: 20px;
	background:#1788CB;
	cursor:move;
}
.topping{
	position:absolute;
	top:0;
	left:0; right:0; bottom:0;
}
.twocols{
	display:table;
	width:100%;
	border-collapse: separate;
	border-spacing: 10px;
}
.acol{
	display: table-cell;
	width:50%;
}
#addpages{position: relative;}
#odformfieldproperties{
	position:absolute;
	top:0; right:0;
	max-width: 650px;
	width: 100%;
	background:#fff;
	z-index: 2000;
	border: 2px solid #1788CB;
	display:none;
}
#odformfieldproperties h4{
	margin: 10px 0;
}

#odformfieldproperties .asec{
	display: inline-block;
	vertical-align: top;
	margin: 0 10px;
	padding:10px 0;
}
#odformfieldproperties .asec p{
	margin-bottom:5px;
}
#odformfieldproperties .fa-thumb-tack{
	float:left; cursor:pointer; padding: 0; margin: -20px 0 0 10px; color:rgba(255,255,255,.5);
}
#odformfieldproperties .closer.fa-times-circle{
	float:right; cursor:pointer; padding: 0; margin: -20px 0 0 10px; color:white;
}
#odformfieldproperties.sticky .fa-thumb-tack{
	color:white;
}

	.form-search-env{
		max-width: 300px; margin: 20px auto; padding-right: 60px;
	}
	.form-search{
		width: 100%; padding:5px; outline:none; border:1px solid #ddd;
		margin-left:-10px;
	}
.formviewitem{
	margin: 10px 0;
	background:white;
	box-shadow: 1px 1px 3px 0 rgba(40,40,40,.4);
	display:table;
	width: 100%;
}
.formviewitem .frmsec{
	display: table-cell;
	padding:5px;
}
.fieldpath.small:after{
content:"";
background:transparent;
color:transparent;
}
    .thlist{border:none; outline:none;display:table; border-spacing:0;border-collapse: collapse;
         margin-right:auto;
         margin-left:auto;
         width:100%; }
    .thlist .td1{width: auto;}
    .thlist .td2, .thlist .td3, .thlist .td4{width: 100px; text-align: center;}
    .thlist th{background: rgba(0,0,0,.6); text-align: left; padding: 5px; color:white;}
    .thlist td{padding: 5px;font-size: 9pt; }
	.thlist td{border-left:1px solid #888; border-bottom:1px solid #888; border-right: 1px solid #888;}
	.thlist tr{background:#fff; }
	.thlist tr:hover{background:#eee;cursor:pointer; }
	.thlist tr.nohover:hover{cursor:default; background:#fff;}
	.acenter{text-align:center;}
	.submitbutton{ margin:-3px -65px 0 10px; font-size: 10pt; background:#FCC851; border:none; outline:none; padding:5px; cursor:pointer; float:right;}
	.submitbutton:hover{background:#E5A645; }
	.db-controls{margin: 30px 0; text-align: center;}
	.db-button{margin: 4px;padding:2px;width:16px; height:16px;text-align: center;	cursor:pointer	}
	.db-b1, .db-b2{float:left;}
	.db-b3, .db-b4{float:right;}
	.db-b5{display:inline-block;}
#autofillbox{margin: 10px 0;border-radius: 8px;padding:0;font-size: 10pt;position: relative;}
#autofillbox h5{font-weight:normal; padding: 2px; margin: 0; text-align:center; background: #238AC9; color:white; border-radius: 8px 8px 0 0;}
#autofillbox p{padding: 2px;margin:0;background:#eee;border-radius: 0 0 8px 8px;}
.groupclassadd{position:absolute;z-index:30000;background:#fff;padding:10px;border:1px solid #aaa;box-shadow:1px 1px 3px 0 rgba(40,40,40,.4);border-radius:5px;top:50%;left:-50px;width:210px;}
.groupclassadd .fa{font-size: 25px;vertical-align: middle;}

	.groupname{margin: 3px 0;padding: 2px;border-radius: 5px;background: #fff;cursor:pointer;border: 1px solid #F2A929;font-size: 12pt;}
	
	.groupname .fa-check-circle{color:transparent;font-size: 10pt;padding: 5px 2px; float:left}
	.groupname div{margin-left: 17px;}	
	.groupname .fa-times-circle{color: inherit;float:right;}
	.groupname.thisone{background: #F2A929;color:white;}
	.groupname.thisone .fa{color:white;}
	.groupname:hover{background:#eee;}
	.groupname.thisone:hover{background: #F2A929;}
	#addgrouptolist{margin: 10px 0;padding:10px 0;border-top: 1px solid #aaa;border-bottom: 1px solid #aaa; max-height: 500px; overflow-y: auto;}

	.btn-round {-webkit-border-radius: 20px;-moz-border-radius: 20px;-o-border-radius: 20px;border-radius: 20px;font-weight:bold;color:#53682b;background:transparent;border:2px solid #f4aa00;padding-right:30px;padding-left:30px;display:inline-block;margin: 10px 0;}
	.font-bold {font-weight:bold;}

	#submit, #submit:active, #submit:focus,.btn-yellow, .btn-yellow:active, .btn-yellow:focus, .btn-yellow:link, .btn-yellow:visited {background:#f4aa00;border:2px solid #f4aa00;color:#fff;}
	.btn-yellow-2, .btn-yellow-2:active, .btn-yellow-2:focus, .btn-yellow-2:link, .btn-yellow-2:visited {background:#f4aa00;border:2px solid #fff;color:#53682b;}
	#submit:hover,.btn-yellow:hover, .btn-white:hover {background:#53682b;border:2px solid #53682b;color:#fff;cursor:pointer;}
	#submit, #submit:active, #submit:focus,
	.btn-yellow, .btn-yellow:active, .btn-yellow:focus, .btn-yellow:link, .btn-yellow:visited {background:#f4aa00;border:2px solid #f4aa00;color:#fff;}
	.btn-yellow-2, .btn-yellow-2:active, .btn-yellow-2:focus, .btn-yellow-2:link, .btn-yellow-2:visited {background:#f4aa00;border:2px solid #fff;color:#53682b;	}
	#submit:hover,
	.btn-yellow:hover, .btn-white:hover {background:#53682b;border:2px solid #53682b;color:#fff;cursor:pointer;}

.groupname{margin: 3px 0;padding: 2px;border-radius: 5px;background: #fff;cursor:pointer;border: 1px solid #F2A929;font-size: 12pt;}
.groupname .fa{color:transparent;font-size: 10pt;padding: 5px 2px;float:left;}
.groupname div{margin-left: 17px;}
.groupname .fa-times-circle{color: inherit;float:right;}
.groupname.thisone{background: #F2A929;color:white;}
.groupname.thisone .fa{color:white;}
.groupname:hover{background:#eee;}
.groupname.thisone:hover{background: #F2A929;}
#addgrouptolist{margin: 10px 0;padding:10px 0;border-top: 1px solid #aaa;border-bottom: 1px solid #aaa; max-height: 500px; overflow-y: auto;}
.permselect{margin: 5px;padding:5px;background:#eee;cursor:pointer;}
.permselect:hover{background:#ddd;}
.frm-permission-box{position:absolute; padding:10px; background:white; border: 1px solid #aaa; box-shadow: 1px 1px 3px 0 rgba(40,40,40,.4);}

.formrow{background:white; cursor:pointer;}
.formrow:hover{background:#eee;}