Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. You can use the CSS from another Pen by using it's URL and the proper URL extention.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                
<holder>
<div id="holder" class="vertical layout" style="height: 10030px; ">
</div>
</holder>
<div id="dropdownMenuGeneral1" style="position: fixed; max-height: 529px; width: 22vw; min-height: 380px; height: 100%; border: 3px solid silver; z-index: 6; overflow-y:scroll; overflow-x:hidden; background: #efefef;" class="vertical layout flex self-stretch" data-prefix="xrq_" hidden>
</div>


              
            
!

CSS

              
                .layout.horizontal,
  .layout.horizontal-reverse,
  .layout.vertical,
  .layout.vertical-reverse {
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
  }
  .layout.inline {
    display: -ms-inline-flexbox;
    display: -webkit-inline-flex;
    display: inline-flex;
  }
  .layout.horizontal {
    -ms-flex-direction: row;
    -webkit-flex-direction: row;
    flex-direction: row;
  }
  .layout.horizontal-reverse {
    -ms-flex-direction: row-reverse;
    -webkit-flex-direction: row-reverse;
    flex-direction: row-reverse;
  }
  .layout.vertical {
    -ms-flex-direction: column;
    -webkit-flex-direction: column;
    flex-direction: column;
  }
  .layout.vertical-reverse {
    -ms-flex-direction: column-reverse;
    -webkit-flex-direction: column-reverse;
    flex-direction: column-reverse;
  }
  .layout.wrap {
    -ms-flex-wrap: wrap;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
  }
  
  .layout.no-wrap {
    -ms-flex-wrap: nowrap;
    -webkit-flex-wrap: nowrap;
    flex-wrap: nowrap;
  }
  .layout.wrap-reverse {
    -ms-flex-wrap: wrap-reverse;
    -webkit-flex-wrap: wrap-reverse;
    flex-wrap: wrap-reverse;
  }
 
  /* alignment in cross axis */
  .layout.start {
    -ms-flex-align: start;
    -webkit-align-items: flex-start;
    align-items: flex-start;
  }
  .layout.center,
  .layout.center-center {
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
  }
  .layout.end {
    -ms-flex-align: end;
    -webkit-align-items: flex-end;
    align-items: flex-end;
  }
  /* alignment in main axis */
  .layout.start-justified {
    -ms-flex-pack: start;
    -webkit-justify-content: flex-start;
    justify-content: flex-start;
  }
  .layout.center-justified,
  .layout.center-center {
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
  }
  .layout.end-justified {
    -ms-flex-pack: end;
    -webkit-justify-content: flex-end;
    justify-content: flex-end;
  }
  .layout.around-justified {
    -ms-flex-pack: around;
    -webkit-justify-content: space-around;
    justify-content: space-around;
  }
  .layout.justified {
    -ms-flex-pack: justify;
    -webkit-justify-content: space-between;
    justify-content: space-between;
  }
  /* self alignment */
  .self-start {
    -ms-align-self: flex-start;
    -webkit-align-self: flex-start;
    align-self: flex-start;
  }
  .self-center {
    -ms-align-self: center;
    -webkit-align-self: center;
    align-self: center;
  }
  .self-end {
    -ms-align-self: flex-end;
    -webkit-align-self: flex-end;
    align-self: flex-end;
  }
  .self-stretch {
    -ms-align-self: stretch;
    -webkit-align-self: stretch;
    align-self: stretch;
  }
  /*******************************
            Other Layout
  *******************************/
  .block {
    display: block;
  }
  /* IE 10 support for HTML5 hidden attr */
  [hidden] {
    display: none !important;
  }
  .invisible {
    visibility: hidden !important;
  }
  .relative {
    position: relative;
  }
  .fit {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
  }
  body.fullbleed {
    margin: 0;
    height: 100vh;
  }
  .scroll {
    -webkit-overflow-scrolling: touch;
    overflow: auto;
  }
  

fc-inputholder{
	border: 1px silver solid; 
	box-shadow: 3px 7px 4px 2px #afafaf;
	width: 89vw;
	height: 800px;
	margin: 10px;
	display: block;
	flex-direction: row;
	padding: 42px;
	overflow-y: scroll;
	background:#fff;
	
	
}
holder{
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0px;
	overflow-y: scroll;
	
	background:#fff;
}

.checkermeout{
background: #fefefe;
}
input:focus + .slider {
  box-shadow: 0 0 1px #005500;
}
input[type=checkbox]:checked +  fc-itemcheckbox.checkermeout:before{
	font-size: 1.8em;
	content: '\2705'
} 
input[type=checkbox]:not(:checked) + fc-itemcheckbox.checkermeout:before{
	font-size: 1.8em;
	content:'\2b1b';
	color: black;
} 
input[type=checkbox] > fc-itemcheckbox.checkermeout{
	
	background: red;
	content: "fijcniken";
}

input:checked + .slider:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);
}

/* Rounded sliders */
.slider.round {
  border-radius: 34px;
}

.slider.round:before {
  border-radius: 50%;
}


label.checkermeout{
   display: inline-block;
  height: 34px;
  margin-top: -4px;

}
fc-valueitem{
  position: relative;
  color: brown;
  display: block;
  white-space: pre-wrap;
  font-weight: 300;
  width: 100%;
  padding: 8px;
	background: white;
  max-width: 420px;
  min-width: 210px;
  max-height: 160px;
  overflow: hidden;
  margin-bottom:8px;
/*   border-top:silver solid 1px; */

  
}

fc-itemcheckbox.checkermeout{
  font-size: 18px;
  color: #00a;
  font-size: 1.5em;
  line-height: .9;
  display: inline-block;
  vertical-align: middle;
  padding-bottom: 6px;

}
fc-itemcheckbox.ddlist{
  font-size: 18px;
  color: #00a;
  font-size: 1.2em;
  line-height: .9;
  display: inline-block;
  vertical-align: top;
  padding:4px 8px;
  border-bottom: 1px solid silver;

}

fc-itemcheckbox.ddlist{
  width: 100%;
 
}
input[type="checkbox"]:placeholder{
  max-width:276px;
  overflow: hidden;
}
label.ddlist{

	padding-bottom: 6px;
}
label.ddlist:after {
 display: block;

  font-size: 1.0em;
  color: brown;
  width: 100%;
  padding-right: 34px;
  overflow-x: hidden;
  overflow: y: scroll;
  max-width: 31vw;
  height: 100%;
    min-width: 220px;
}
fc-valueitem.fullpage, fc-valueitem.fullpage > fc-dropdownlist.ddlist, fc-valueitem.fullpage > label.ddlist:after{
  min-width: 95%!important;
  min-height: 100%!important;
  padding-right: 24px;
}


input[type=checkbox]:checked +  fc-itemcheckbox.checkermeout:before, input[type=checkbox]:checked +  fc-itemcheckbox.ddlist:before{
	  display: inline-block;
  font-size: 1.3em;
	content: '\2705';

} 
input[type=checkbox]:checked +  fc-itemcheckbox.checkbox:before{
  content:attr(data-two);
  
}
input[type=checkbox]:not(:checked) + fc-itemcheckbox.checkbox:before{
  content:attr(data-one);
  
}
.redball:active, .redball:focus{
box-shadow:  0px 0px 0px 0px;
}
.redball{
position: absolute; left:12px; top:12px; width: 16px; height: 16px; border-radius: 50%; z-index: 22; background: red; box-shadow:  1px 3px 7px 4px #afafaf;
	
}
label.redball>input:checked, .blue{
box-shadow:  0px 0px 0px 0px;
  height: 26px; width: 26px; border: 6px blue solid;
}
input[type=checkbox]:not(:checked) + fc-itemcheckbox.checkermeout:before, input[type=checkbox]:not(:checked) + fc-itemcheckbox.ddlist:before{
	  display: inline-block;
    position: relative;
  font-size: 1.3em;
	content:'\2b1b';


} 
.modal-menu{
  position: fixed; resize-both; border-radius: 64px; max-height: 529px;width: 76vw; min-width: 265px;max-width: 380px; min-height: 245px; box-shadow: 1px 3px 7px 4px #afafaf;height: 100%; z-index: 6; padding: 64px 24px 34px 24px;  background: #fefefe; overflow: hidden;    position:  absolute;
	
    left: 0;
    top: 0; /* set these so Chrome doesn't return 'auto' from getComputedStyle */
  
  
}


.switch {
  position: relative;
  display: inline-block;
  width: 56px;
  height: 34px;
  margin-right: 94px;

}

.checkermeout input,.switch input, .ddlist input {display:none;}

input.switch+ fc-itemcheckbox {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
    border-radius: 34px;
 // background-color: silver;
	
/*     #2196F3; */
  -webkit-transition: .4s;
  transition: .4s;
}


input.switch+fc-itemcheckbox:before {
  position: absolute;
  content: "";
  height: 22px;
  width: 22px;
  left: 4px;
  bottom: 6px;
   border-radius: 50%;
  background-color: white;
	
  -webkit-transition: .4s;
  transition: .4s;
}
input[type=checkbox]:not(:checked).switch+ fc-itemcheckbox:after {
  position: relative;
  cursor: pointer;
  display: inline-block;
  content: " (" attr(data-label) ") Off ";
  white-space: nowrap;
  left: 64px;
  top: 4px;s
  right: 0;
  bottom: 0;
  color: silver;
  padding-right: 24px;
  margin-right: 24px;
  font-size: 20px;
  font-weight: 600;
  -webkit-transition: .4s;
  transition: .4s;
}

input:checked.switch+ fc-itemcheckbox:after{
   position: relative;
  cursor: pointer;
  display: inline-block;
  content:" (" attr(data-label) ") On";
  white-space: nowrap;
  left: 64px;
  top: 4px;s
  right: 0;
  bottom: 0;
  color: green;
  padding-right: 24px;
  margin-right: 24px;
  font-size: 20px;
  font-weight: 600;
  -webkit-transition: .4s;
  transition: .4s;
}
  



input:checked + fc-itemcheckbox.switch {
  background-color:#005500; 
	
/* 		#2196F3; */
}
.checkermeout{
background: #fefefe;
	
}
input:focus + fc-itemcheckbox.switch {
  box-shadow: 0 0 1px #005500;
}
input:checked + .switch:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);
}

/* Rounded sliders */



*{appearance:none;}
textarea{overflow:auto; border-radius: 0; box-shadow:insert 2px 1px 1px 1px rgba(0,0,0,0.21); }
input {border-box;}
::-webkit-input-placeholder{color:tan;opacity:1; position: relative; }
.standard::-webkit-input-placeholder{color:tan;opacity:1; position: relative;}
input,select,textarea{font:inherit; margin:0}
    div#inner-editor{margin-bottom:0px; margin-left: 0px; font-size: 1.5em;}

 input{outline: 0px;
    border: 0px;}
input.standard {
  font-size: 18px;
	font-size: 1.5em;
  font-weight: 500;
  border: none;
  opacity: 1;
  width: 100%;
  transition: padding-top 0.4s ease, margin-top 0.4s ease;
  overflow-x: hidden;
}
textarea.standardtext{
  border:0px;
  padding: 0px;
  width:100%;
  border-bottom: 1px solid green;
  font-size: 18px;
	font-size: 1.5em;
  font-weight: 500;
  display: block;
  opacity: 1;
  transition: padding-top 0.4s ease, margin-top 0.4s ease;
  overflow-x: hidden;
	
}
input.standard + label{
  display: block;
  position: relative;
  white-space: nowrap;
width: 115%;
  border-top: 1px solid green;
/*   -webkit-transition: width 0.4s ease;
  transition: width 0.4s ease; */
}
input.standard:focus + label
{
  width: 115%;
  border-top: 1px solid #005c00;
  -webkit-transition: width 0.3s ease, border-top .3s ease;
  transition: width 0.3s ease, border-top .3s ease; 
	 box-shadow: inset 2px 2px 4px 5px rgba(0,0,0,0.3);
}

input.standard:focus + label > fc-itemcheckbox{
top: -62px;
  z-index:1;
  font-size: 16px;
  font-family: merriweather;
  color: brown;
width: 100%;
  -webkit-transition: color 0.3s ease, top .3s ease;
  transition: color 0.3s ease, top .3s ease;
}


input.standard:valid{
  color: #009;
  opacity: 1;
  font-family: merriweather;
  font-weight: 500;
  width: 100%;
  

}

input.standard:valid + label > fc-itemcheckbox {
  top: 2px;
  z-index:0;
  color: brown;
  font-size: 16px;
  font-family: merriweather;
/*  color: #005cftext00;*/

}
label.standardtext >fc-itemcheckbox{
  margin-bottom: -22px;
   z-index:0;
  color: brown;
  font-size: 16px;
  font-family: merriweather;
  font-weight: 400;
}

input.standard:valid + label{
  border-color: green;
  width: 100%;


}
textarea.standardtext:invalid{
/*   box-shadow: none; */

  color: tan;
  opacity:1;
  font-weight: 500;

}
input.standard:invalid{
  box-shadow: none;
 
  color: red;
	width: 100%;

  font-weight: 500;
}

input.standard + label > fc-itemcheckbox{
  font-weight: 200;
  margin: 0;
  position: absolute;
	 font-size: 18px;
	font-size: 1.5em;
  top: -31px;
  color: tan;
  left: 0px;
  z-index: 0;
  -webkit-transition: top 0.3s ease, font-size 0.3s ease, color 0.3s ease;
  transition: top 0.3s ease, font-size 0.3s ease, color 0.3s ease;
}
input.standard:focus{
	margin-bottom: 0px;
	padding-left: 4px;
	padding-right: 0px; 
	width: 100%;
	 box-shadow: inset 2px 2px 4px 5px rgba(0,0,0,0.3);
}
input.standard{
	margin-bottom: 0px;
	padding-left: 4px;
	padding-right: 0px; 
	width: 100%;
}
input{height: 23px;}

input.standard:valid{
  color: #009;
  opacity: 1;
  font-family: merriweather;
  font-weight: 500;
  width: 100%;
}
textarea:valid+div#innereditor{
  text-indent:8px;
}
textarea:valid{
  
  color: #009;
  opacity: 1;
  font-family: merriweather;
  font-weight: 500;
  width: 100%;
  margin-top:-5px;
}
input.standard:valid+label{

  opacity: 1;
  font-family: merriweather;
  font-weight: 500;
  width: 100%;


}
	
input.standard + label
{
  width: 100%;
  border-top: 1px solid #005c00;
/*    -webkit-transition: width 0.3s ease, border-top .3s ease;
  transition: width 0.3s ease, border-top .3s ease; */
}
input.standard:focus + label
{
  width: 100%;

  border-top: 1.px solid #005c00;
/*    -webkit-transition: width 0.3s ease, border-top .3s ease;
  transition: width 0.3s ease, border-top .3s ease; */
}

*:focus{outline: none; border-radius: 0; background: aliceblue;}
fc-input{
  margin: 48px 32px;
}
.glass{
    position:  absolute;
    left: 0;
    top: 0;
    background: rgba(255,255,255,0.66); 
    border: 2px  solid rgba(0,0,0,0.5); 
    border-radius: 4px; padding: 8px;
}
span.hideinput> >label>input{
  display: none;
    
  
  
}
.dropdownnew{
  max-width: 440px;
  max-height: 520px;
  overflow: hidden;
  width: 100%;
  padding: 0px 4px 6px 4px;
    overflow-y: scroll;
}
.scrolls{
 overflow-y: scroll;
}

fc-expander>*{
  cursor:pointer;
  
}
fc-input{
	
	min-width: 270px;
	margin: 36px 48px;
}

.checkermeout, .ddlist{
background: #fefefe;
  padding-right: 12px;

  margin-top: 6px;
}
.ddlist:after{
  content:`...      `;
  
  
}
label.checkermeout{
   display: inline-block;
  height: 34px;
  margin-top: -4px;

}
c-valueitem{
  position: relative;
  color: brown;
  display: block;
  white-space: pre-wrap;
  font-weight: 300;
  width: 100%;
  padding: 8px;
	background: white;
  max-width: 420px;
  min-width: 210px;
  max-height: 160px;
  overflow: hidden;
  margin-bottom:8px;
/*   border-top:silver solid 1px; */

  
}

fc-itemcheckbox.checkermeout{
  font-size: 18px;
  color: #00a;
  font-size: 1.5em;
  line-height: .9;
  display: inline-block;
  vertical-align: middle;
  padding-bottom: 6px;

}
fc-itemcheckbox.ddlist{
  font-size: 18px;
  color: #00a;
  font-size: 1.2em;
  line-height: .9;
  display: inline-block;
  vertical-align: top;
  padding:4px 8px;
  border-bottom: 1px solid silver;

}

fc-itemcheckbox.ddlist{
  width: 100%;
 
}
input[type="checkbox"]:placeholder{
  max-width:276px;
  overflow: hidden;
}
label.ddlist{

	padding-bottom: 6px;
}
label.ddlist:after {
 display: block;

  font-size: 1.0em;
  color: brown;
  width: 100%;
  padding-right: 34px;
  overflow-x: hidden;
  overflow: y: scroll;
  max-width: 31vw;
  height: 100%;
    min-width: 220px;
}
fc-valueitem.fullpage, fc-valueitem.fullpage > fc-dropdownlist.ddlist, fc-valueitem.fullpage > label.ddlist:after{
  min-width: 95%!important;
  min-height: 100%!important;
  padding-right: 24px;
}


input[type=checkbox]:checked +  fc-itemcheckbox.checkermeout:before, input[type=checkbox]:checked +  fc-itemcheckbox.ddlist:before{
	  display: inline-block;
  font-size: 1.3em;
	content: '\2705';

} 
input[type=checkbox]:checked +  fc-itemcheckbox.checkbox:before{
  content:attr(data-two);
  
}
input[type=checkbox]:not(:checked) + fc-itemcheckbox.checkbox:before{
  content:attr(data-one);
  
}
.redball:active, .redball:focus{
box-shadow:  0px 0px 0px 0px;
}
.redball{
position: absolute; left:12px; top:12px; width: 16px; height: 16px; border-radius: 50%; z-index: 22; background: red; box-shadow:  1px 3px 7px 4px #afafaf;
	
}
label.redball>input:checked, .blue{
box-shadow:  0px 0px 0px 0px;
  height: 26px; width: 26px; border: 6px blue solid;
}
input[type=checkbox]:not(:checked) + fc-itemcheckbox.checkermeout:before, input[type=checkbox]:not(:checked) + fc-itemcheckbox.ddlist:before{
	  display: inline-block;
    position: relative;
  font-size: 1.3em;
	content:'\2b1b';


} 
.modal-menu{
  position: fixed; resize-both; border-radius: 64px; max-height: 529px;width: 76vw; min-width: 265px;max-width: 380px; min-height: 245px; box-shadow: 1px 3px 7px 4px #afafaf;height: 100%; z-index: 6; padding: 64px 24px 34px 24px;  background: #fefefe; overflow: hidden;    position:  absolute;
	
    left: 0;
    top: 0; /* set these so Chrome doesn't return 'auto' from getComputedStyle */
  
  
}


.switch {
  position: relative;
  display: inline-block;
  width: 56px;
  height: 34px;
  margin-right: 94px;

}

.checkermeout input,.switch input, .ddlist input {display:none;}

input.switch+ fc-itemcheckbox {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
    border-radius: 34px;
 // background-color: silver;
	
/*     #2196F3; */
  -webkit-transition: .4s;
  transition: .4s;
}


input.switch+fc-itemcheckbox:before {
  position: absolute;
  content: "";
  height: 22px;
  width: 22px;
  left: 4px;
  bottom: 6px;
   border-radius: 50%;
  background-color: white;
	
  -webkit-transition: .4s;
  transition: .4s;
}
input[type=checkbox]:not(:checked).switch+ fc-itemcheckbox:after {
  position: relative;
  cursor: pointer;
  display: inline-block;
  content: " (" attr(data-label) ") Off ";
  white-space: nowrap;
  left: 64px;
  top: 4px;s
  right: 0;
  bottom: 0;
  color: silver;
  padding-right: 24px;
  margin-right: 24px;
  font-size: 20px;
  font-weight: 600;
  -webkit-transition: .4s;
  transition: .4s;
}

input:checked.switch+ fc-itemcheckbox:after{
   position: relative;
  cursor: pointer;
  display: inline-block;
  content:" (" attr(data-label) ") On";
  white-space: nowrap;
  left: 64px;
  top: 4px;s
  right: 0;
  bottom: 0;
  color: green;
  padding-right: 24px;
  margin-right: 24px;
  font-size: 20px;
  font-weight: 600;
  -webkit-transition: .4s;
  transition: .4s;
}
  



input:checked + fc-itemcheckbox.switch {
  background-color:#005500; 
	
/* 		#2196F3; */
}
.checkermeout{
background: #fefefe;
	
}
input:focus + fc-itemcheckbox.switch {
  box-shadow: 0 0 1px #005500;
}
input:checked + .switch:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);
}

/* Rounded sliders */




textarea{overflow:auto}
input {border-box;}
::-webkit-input-placeholder{color:tan;opacity:1; position: relative; }
.standard::-webkit-input-placeholder{color:tan;opacity:1; position: relative;}
input,select,textarea{font:inherit; margin:0}
    div#inner-editor{margin-bottom:0px; margin-left: 0px; font-size: 1.5em;}

 input{outline: 0px;
    border: 0px;}
input.standard {
  font-size: 18px;
	font-size: 1.5em;
  font-weight: 500;
  border: none;
  opacity: 1;
  width: 100%;
  transition: padding-top 0.4s ease, margin-top 0.4s ease;
  overflow-x: hidden;
}
textarea.standardtext{
  border:0px;
  padding: 0px;
  width:100%;
  border-bottom: 1px solid green;
  font-size: 18px;
	font-size: 1.5em;
  font-weight: 500;
  display: block;
  opacity: 1;
  transition: padding-top 0.4s ease, margin-top 0.4s ease;
  overflow-x: hidden;
}
input.standard + label{
  display: block;
  position: relative;
  white-space: nowrap;
width: 115%;
  border-top: 1px solid green;
/*   -webkit-transition: width 0.4s ease;
  transition: width 0.4s ease; */
}
input.standard:focus + label
{
  width: 115%;
  border-top: 1px solid #005c00;
  -webkit-transition: width 0.3s ease, border-top .3s ease;
  transition: width 0.3s ease, border-top .3s ease; 
}

input.standard:focus + label > fc-itemcheckbox{
top: -45px;
  z-index:1;
  font-size: 16px;
  font-family: merriweather;
  color: brown;
width: 100%;
  -webkit-transition: color 0.8s ease, top .8s ease;
  transition: color 0.3s ease, top .3s ease;
}


input.standard:valid{
  color: #009;
  opacity: 1;
  font-family: merriweather;
  font-weight: 500;
  width: 100%;
  

}

input.standard:valid + label > fc-itemcheckbox {
  top: 2px;
  z-index:0;
/*   color: green; */
  font-size: 16px;
  font-family: merriweather;
  color: #005c00;

}
label.standardtext >fc-itemcheckbox{
  margin-bottom: -22px;
   z-index:0;
  color: brown;
  font-size: 16px;
  font-family: merriweather;
  font-weight: 400;
}

input.standard:valid + label{
  border-color: green;
  width: 100%;


}
textarea.standardtext:invalid{
  box-shadow: none;

  color: tan;
  opacity:1;
  font-weight: 500;

}
input.standard:invalid{
  box-shadow: none;
 
  color: red;
	width: 100%;

  font-weight: 500;
}

input.standard + label > fc-itemcheckbox{
  font-weight: 200;
  margin: 0;
  position: absolute;
	 font-size: 18px;
	font-size: 1.5em;
  top: -31px;
  color: tan;
  left: 0px;
  z-index: 0;
  -webkit-transition: top 0.3s ease, font-size 0.3s ease, color 0.3s ease;
  transition: top 0.3s ease, font-size 0.3s ease, color 0.3s ease;
}
input.standard.active::focus{
	margin-bottom: 0px;
	padding-left: 4px;
	padding-right: 0px; 
	width: 100%;
	background: #aecdfe;
}
input.standard{
	margin-bottom: 0px;
	padding-left: 4px;
	padding-right: 0px; 
	width: 100%;
}
input{height: 23px;}

input.standard:valid{
  color: #009;
  opacity: 1;
  font-family: merriweather;
  font-weight: 500;
  width: 100%;
}
textarea:valid+div#innereditor{
  text-indent:0px;
}

textarea:valid{
  
  color: #009;
  opacity: 1;
  font-family: merriweather;
  font-weight: 500;
  width: 100%;
  margin-top:-5px;
}
input.standard:valid+label{

  opacity: 1;
  font-family: merriweather;
  font-weight: 500;
  width: 100%;


}
	
input.standard + label
{
  width: 100%;
  border-top: 1px solid #005c00;
/*    -webkit-transition: width 0.3s ease, border-top .3s ease;
  transition: width 0.3s ease, border-top .3s ease; */
}
input.standard:focus + label
{
  width: 100%;

  border-top: 1.px solid #005c00;
/*    -webkit-transition: width 0.3s ease, border-top .3s ease;
  transition: width 0.3s ease, border-top .3s ease; */
}


html, body{overflow: hidden;}
p{margin: 0px;
	text-indent:44px;}
.divider.leftRight{
	height:100vh; 
	min-width: 19px;
	max-width: 20px; 
	position: relative;
	background: #009; 
/* 	box-shadow: 5px 9px 4px 2px #cfcfcf; */
	cursor:ew-resize;
}
.divider.upDown{
		width:100%;
	min-height: 19px;
	max-height: 20px; 
	position: relative;
	background: #009; 
/* 	box-shadow: 5px 9px 4px 2px #cfcfcf; */
	cursor:ns-resize;
} 
              
            
!

JS

              
                //https://codepen.io/jfrazz/pen/qqZaBY
//https://s3-us-west-2.amazonaws.com/s.cdpn.io/301628/fc-dashboard.css
//https://s3-us-west-2.amazonaws.com/s.cdpn.io/301628/fc-dashboard.css
//https://codepen.io/jfrazz/pen/fd6cf1776303246fef911422a5ce8ba9
var inputBinderModule = (function(objectToMap) {
	function textresizer() {}

	const simpletoggle = (one, two) =>
	`<label><input hidden type="checkbox"><fc-itemcheckbox data-one="${one}" data-two="${two}" class="checkbox"></fc-itemcheckbox></label>`;

	const expander = `<fc-expander class="ddlist" style="position: absolute; background: #fefefe; color: green; font-size: 28px; right: 16px; top: 12px; font-size; 1.2em; font-weight: 600; cursor: pointer;">${simpletoggle(
		`\u2FFB`,
		`\u2FFB`
	)}</fc-expander>`;

	const input = (item, index, value) => `<input id="${
	item.issClass === "ddlist" ? "checkbox_" + index : item.id
	}" 
data-value="${item.value}" 
data-btn="${item.btn}" name="${item.property}" 
data-object="${item.objectName}" 
data-inputindex="${index}" 
data-group="${item.group}"  type="${item.type}" class="${
	item.issClass
	} active"                            ${
	item.issClass !== "standard" || item.noAnimation === true ? "" : "required"
	} label="${item.inputLabel}" for="checkbox_${index}" placeholder="${
	item.placeholder != undefined ? item.placeholder : ""
	}" value='${item.value}' 
data-value="${item.value}" ${
	value === item.value ? "checked" : ""
	} data-issvalue="${item.inputValue}" data-dropdownitems="${
	item.dropdownItems
	}">`;

	const textarea = (item, index) => `<textarea 
rows="1" 
cols="22" 
data-btn="${item.btn}"  name="${item.property}" 
data-object="${item.objectName}" id="${item.id}" 
type="${item.type}" class="${item.issClass} active" 
data-inputindex="${index}" 
data-group="${item.group}" placeholder="${item.inputLabel}"   value='${
	item.value
	}' 
data-inputvalue="${item.inputValue}"
data-dropdownitems="${item.dropdownItems}"
>
</textarea>`;

	const dropdowndetails = (item, index) => `<fc-dropdownlist 
class="${item.issClass}"
contenteditable="true" 
data-btn="dropdownexpand">
${expander.concat(`${item.linetwo}`)}</fc-dropdownlist>`;

	var horizontal = "horizontal layout flex wrap";

	var vertical = "vertical layout flex nowrap dropdownnew";

	const labeledinput = (items, direction, value) =>
	`<div class="${direction} ${
	direction == "vertical" ? "scrolls scroller block" : ""
	}">  ${items
	.map(
		(item, index) =>
		`<${item.issClass !== "ddlist" ? "fc-input" : "fc-valueitem"} data-id="${
		item.id
		}" data-value="${item.value}" class="vertical layout block">${
		item.type === "checkbox"
		? ""
		: `${
		item.issClass !== "standardtext"
		? `${input(item, index)}`
		: `${textarea(item, index)}`
		}`
		} <label class="${item.issClass}${
		item.type === "checkbox" ? " horizontal layout flex " : ""
		}" data-value="${item.value}" for='${
		item.issClass == "ddlist" ? "checkbox_" + index : item.id
		}''>${
		item.type !== "checkbox" ? "" : `${input(item, index, value)}`
		} <fc-itemcheckbox data-label="${item.inputLabel}" data-group="${
		item.group
		}" class="${item.issClass} "> ${
		item.issClass !== "switch" && item.type === "checkbox"
		? item.value
		: item.issClass !== "switch" ? item.inputLabel : " "
		}${item.issClass === "ddlist" ? "" : ""}</fc-itemcheckbox></label>${
		item.issClass !== "ddlist" ? "" : `${dropdowndetails(item, index)}`
		}</${item.issClass !== "ddlist" ? "fc-input" : "fc-valueitem"}> `
	)
	.join("")}</div>`;
	function labelToPropertyName(label) {
		var propertyName = label;
		var regex = new RegExp(" ", "g");
		propertyName = propertyName.replace(regex, "");
		var ketter = propertyName[0].toLowerCase();
		propertyName = propertyName.slice(1);
		propertyName = ketter.concat(propertyName);
		propertyName = propertyName.replace("one", "1");
		propertyName = propertyName.replace("One", "1");
		propertyName = propertyName.replace("two", "2");
		propertyName = propertyName.replace("Two", "2");
		return propertyName;
	}
	function propertyNameToLabel(propertyName) {
		var label = propertyName;
		(label = label.replace(/([A-Z])/g, " $1")),
			(label = label.replace(/^./, function(label) {
			return label.toUpperCase();
		})),
			(label = label.replace("1", " One")),
			(label = label.replace("2", " Two"));
		return label;
	}
	function _startDrag(e, context) {
		context.dragging = true;
		context.offsetX = e.offsetX;
		var Xoff = (context.offsetX = e.offsetX);
		var Yoff = (context.offsetY = e.offsetY);
		document.captureEvents(Event.MOUSEMOVE);
		document.onmousemove = dragmeplease;
		function dragmeplease(mp) {
			var _x = mp.clientX.toString() + "px";
			var _y = mp.clientY.toString() + "px";
			document.querySelector("#holder").style.top = _y;
			document.querySelector("#holder").style.left = _x;
			document.captureEvents(Event.MOUSEUP);
			document.onmouseup = endThisPlease;
			function endThisPlease(omu) {
				if (context.target) {
					context.target.classList.remove("blue");
				}
				document.onmousemove = null;
				document.onmouseup = null;

				if (context.target && context.target.firstElementChild) {
					context.target.firstElementChild.classList.remove("blue");
				}
				console.log(omu.detail);
			}
		}
	}
	function htmlEscape(str) {
		if (str != undefined) {
			return str
				.replace(/&/g, "&amp;") // first!
				.replace(/>/g, "&gt;")
				.replace(/</g, "&lt;")
				.replace(/"/g, "&quot;")
				.replace(/'/g, "&#39;")
				.replace(/`/g, "&#96;");
		}
	}

	function regex(tmplObj, ...substs) {
		// Static text: verbatim
		let regexText = tmplObj.raw[0];
		for ([i, subst] of substs.entries()) {
			if (subst instanceof RegExp) {
				// Dynamic regular expressions: verbatim
				regexText += String(subst);
			} else {
				// Other dynamic data: escaped
				regexText += quoteText(String(subst));
			}
			// Static text: verbatim
			regexText += tmplObj.raw[i + 1];
		}
		return new RegExp(regexText);
	}
	function quoteText(text) {
		return text.replace(/[\\^$.*+?()[\]{}|=!<>:-]/g, "\\$&");
	}
	function html(templateObject, ...substs) {
		// Use raw template strings: we don’t want
		// backslashes (\n etc.) to be interpreted
		const raw = templateObject.raw;

		let result = "";

		substs.forEach((subst, i) => {
			// Retrieve the template string preceding
			// the current substitution
			let lit = raw[i];

			// In the example, map() returns an Array:
			// If substitution is an Array (and not a string),
			// we turn it into a string
			if (Array.isArray(subst)) {
				subst = subst.join("");
			}

			// If the substitution is preceded by a dollar sign,
			// we escape special characters in it
			if (lit.endsWith("$")) {
				subst = htmlEscape(subst);
				lit = lit.slice(0, -1);
			}
			result += lit;
			result += subst;
		});
		// Take care of last template string
		// (Never fails, because an empty tagged template
		// produces one template string, an empty string)
		result += raw[raw.length - 1]; // (A)

		return result;
	}
	function PassageObject(object) {
		(this.section = 0),
			(this.passageObjectHolder = {}),
			(this.passageString = ""),
			(this.sentenceArray = []),
			(this.questionsString = ""),
			(this.numberOfQuestions = "");

		(this.questionsObjectArray = []),
			(this.blurb = ""),
			(this.title = ""),
			(this.author1 = ""),
			(this.author2 = ""),
			(this.menuItem = ""),
			(this.chartObject = ""),
			(this.graphsObject = "");

		(this.isDoublePassage = `${propertyNameToLabel("isDoublePassage")}`),
			(this.hasChartsAndGraphs = `${propertyNameToLabel("hasChartsAndGraphs")}`),
			(this.testNumber = 1),
			(this.passageType = ""),
			(this.passageSubType = ""),
			(this.vocabularyTested = []),
			(this.citationArray = []),
			(this.passageFirebaseReference = ""),
			(this.questionsFirebaseReference = ""),
			(this.localStorageRef = ""),
			(this.idbRef = ""),
			(this.symbolKey = "");
	}

	var dats = [
		{
			name: "regularExp",
			name1: "plainLanguage",
			symbol: "⛔",
			checkedWord: "checked",
			checked: false,
			symbol1: "",
			value: "false",
			class: "toggleButton",
			type: "button"
		},
		{
			name: "filterText",
			name1: "sortText",
			symbol: "⛔",
			checked: false,

			checkedWord: "checked",
			value: "false",
			class: "toggleButton",
			type: "button"
		},
		{
			name: "deleteValues",
			name1: "enterValues",
			symbol: "⛔",
			checkedWord: "",
			checked: false,
			value: "false",
			class: "toggleButton",
			type: "button"
		},
		{
			name: "multiSelect",
			name1: "normalSelection",
			symbol: "⛔",
			checkedWord: "checked",
			checked: false,
			symbol1: "",
			value: "false",
			class: "toggleButton",
			type: "button"
		}
	];

	function MyLittleDropdown(inputValue, bool, d, local, group) {
		var holderNew = document.getElementById(local);
		holderNew.hidden = true;
		holderNew.innerHTML = labeledinput(d, vertical, inputValue);
		return holderNew;
	}

	function MyLittleInputs(inputs, tabs, inputsmap, ddmid) {
		this.controlsMap = new Map();
		this.controlsLaunched = false;
		this.groups = Object.keys(inputs);
		var map = new Map();
		this.inputMap = map;
		this.arrayForMap = [];
		this.passageObject = {};
		this.dataControlsSet = dats;
		this.filterOn = false;
		this.inputIndex = "";
		this.addToDropdowns = true;
		this.multiSelect = this.multiselect = false;
		this.autoSaveOn = false;
		this.regexOn = false;
		// this.group=group;
		this.ddmId = ddmid != undefined ? ddmid : "ddmHolder_0_";
		this.activeNode = -1;
		this.target;
		this.settings = "sort";
		this.lilholder = document.getElementById("holder");
		this.generateHolder = function() {
			var holder2 = document.createElement("fc-inputholder");
			this.lilholder.appendChild(holder2);
			var holders = this.lilholder.querySelectorAll("fc-inputholder");
			var myholder = holders.length - 1;
			return holders[myholder];
		}.bind(this);
		this.regexOn = false;
		this.tabClick = false;
		this.ddmIndex = 0;
		this.xInt;
		this.yInt;
		Object.defineProperties(this, {
			input: {
				readable: true,
				enumerable: true,
				get: function() {
					var theId = this.inputId;

					return document.getElementById(theId);
				},
				set: function(value) {
					this.input = value;
				}
			},
			ddm: {
				readable: true,
				enumerable: true,
				get: function() {
					return document.getElementById(this.ddmId);
				},
				set: function(value) {}
			}
		});
		var mapps = this.groups.map((group, index) => {
			this.holder = this.generateHolder();
			var inp = inputs[group];
			this.arrayForMap = inp.map((set, index) => {
				var j = {
					dropdownitems: set.dropdownItems,
					id: set.id,
					value: set.issValue,
					name: set.name,
					inputval: set.value,
					inputindex: index,
					group: set.group,
					property: set.name
				};
				this.inputMap.set(j.id, j);
				return j;
			});
			var ice = labeledinput(inp, "horizontal layout flex wrap");
			this.holder.innerHTML = ice;

			var j = 0,
				 i = 0,
				 nodeList = [...this.holder.querySelectorAll("input.active")].concat([...this.holder.querySelectorAll("label.active")]),
				 arr = [];
			var count = nodeList.length;
			for (i = 0; i < count; i++) {
				arr[i] = nodeList[i];
				arr[i].onfocus = e => {
					if (this.tabClick === true) {
						var index = e.target.dataset.inputindex;
						var theId = `dropdowntoggle_${index}_${this.group}_`;
						this.resetDropdownDisplay(index, e);
						var inid = `issInput_${index}_${this.group}_${this.objectName}_${
						this.property
						}`;
						var ipt = document.getElementById(inid);
						ipt!=undefined?ipt.click():console.log(ipt);
						this.tabClick = false;
					}
				};
			}
			if (Array.isArray(arr)) {
				for (j = 0; j < arr.length; j++) {
					arr[j].onkeydown = e => {
						switch (e.key) {
							case "Enter":
								e.preventDefault();
								var list = [];
								list = this.dropdownFilter(this.input.value, true);
								var j = this.listchildren.indexOf(this.input.value);
								console.log(j, this.listchildren);
								if (list != undefined && Array.isArray(list)) {
									var matches = list.length;
								}
								if (this.input.value != "" && this.input.value != " ") {
									if (
										this.listchildren.length == 0 ||
										(this.listchildren === 0 &&
										 this.listchildren[0] &&
										 this.listchildren[0].dataset.value != this.input.value)
									) {
										var key = this.input.attributes.id.value;
										var obj = this.inputMap.get(key);
										obj.dropdownitems.unshift({
											value: this.input.value,
											dataValue: this.input.value,
											linetwo: `this input value: ${
											this.input.value
										}, was just added to this list;`,
											issSymbol: `&#x2705;`,
											name: "newvalue"
										});
										this.inputMap.set(key, obj);
										this.resetDropdownDisplay();

										this.listchildren[this.ddmIndex].focus();
									}
								}
							case "ArrowDown":
							case "ArrowUp":
								e.preventDefault();
								this.listchildren[this.ddmIndex].focus();
								break;
							case "Tab":
								this.tabClick = true;
								break;
							case "Backspace":
								this.resetDropdownDisplay();
								break;
							case "Escape":
								this.input.blur();
								this.ddm.hidden = true;
								this.activeNode = -1;
								break;
						}
					};
				}
			}
			return [ice, nodeList];
		});
		window.addEventListener("resize", this, true);
		this.lilholder.addEventListener("input", this, true);
		window.addEventListener("click", this, true);
		this.ddm.addEventListener("keydown", this, false);
		this.mapps = mapps;
		console.log(mapps, "ma[p[sps]]");
	}
	function ValueObjectSetter(
	inputData,
	 objecToConsumeInCurrentState,
	 groupNamesArrayObject,
	 objectName,
	 lastStamp
	) {
		this.dropdownMap = new Map();
		this.inputs = {};
		this.inputsValuesMap = new Map();
		var map = new Map();
		this.inputsMap = map;
		this.arrayForMap = [];
		this.menupages = {
			menuData:
			"title, author1, author2, blurb, passageType, passageSubType, numberOfQuestions, isDoublePassage, hasChartsAndGraphs,testNumber, menuItem, section",
			saveData:
			"passageSaveReference,questionSaveReference, lastSave, whoSaved, changesMade, passageFirebaseReference,questionsFirebaseReference,idbRef,symbolKey, archive, localStorageRef",
			questionData:
			"questionsObjectArrays, questionsString, citationArray, questionPatterns, anotherStorageReference",
			passageData:
			"passageString, sentenceArray, citationPassageReferences, passageObjectHolder, numberOfSentetces, vocabularyTested, numberOfParagraphs, paragraphArray, detailsObject",
			chartsGraphs: "chartObject, graphsObject"
		};
		this.otc = objecToConsumeInCurrentState;
		this.objectName = objectName;
		this.objectInputsMenus = this.createInputSetFromObject(this.otc, this);
		this.mapObjectMenus(this.objectInputsMenus);
		this.menuTabs = Object.keys(this.objectInputsMenus);
		this.inputSet = new MyLittleInputs(
			this.objectInputsMenus,
			this.menuTabs,
			this.inputsMap,
			"dropdownMenuGeneral1"
		);
		this.dropdownMap;
		var archive = [];
		this.archive = []; //worked double check
		this.menuInputBinder();
	}
	ValueObjectSetter.prototype.createInputSetFromObject = function(obj, context) {
		if (this == undefined) {
			context = context;
		} else {
			context = this;
		}
		var keys = Object.keys(obj);
		var otc = context.otc,
			 obj0 = {};
		var data = keys
		.map((property, ind) => {
			var second = "",
				 pitem,
				 label = propertyNameToLabel(property),
				 labelArray = label.split(" "),
				 typer = labelArray[0].toLowerCase();
			var typestring = this.typeAndClassGetter(typer, property);
			var ddi =
				 /array/gi.test(typer) === true && Array.isArray(otc[property]) === true
			? otc[property]
			: null;
			let menus = Object.keys(this.menupages),
				 mgroup;
			for (var zz = 0; zz < menus.length; zz++) {
				obj0[menus[zz]] = [];
				this.menupages[menus[zz]].includes(property)
					? ((mgroup = menus[zz]),
						(asarray = this.menupages[menus[zz]].split(",")),
						(zz = 8))
				: "";
			}
			var dropitems =
				 property.includes("Array") ||
				 (property.includes("array") && otc[property].length) ||
				 (Array.isArray(otc[property]) &&
				  otc[property].length > 0 &&
				  typeof otc[property][0] === "string")
			? otc[property]
			: [];
			dropitems == [] && ddi != null
				? (dropitems = ddi)
			: property == "passageType" && ddi == null
				? (dropitems = [
				"Fiction",
				"Social Science-Economics",
				"Science Narrative One",
				"Science Narrative Two",
				"Rights Narrative"
			])
			: property == "passageSubType" && ddi == null
				? (dropitems = [
				"Womens Rts Sufferage 18-1900s",
				"Racial Conflicts 1800s",
				"Rights Discourse 1800s",
				"Founding Docs 1700s"
			])
			: "";
			return {
				issValue: property.includes("questionsObjectArray")
				? html`$${JSON.stringify(context[property])}`
				: context[property] != undefined ? context[property] : "",
				type: typestring[0],
				issClass: typestring[1],
				value: otc[property] == undefined ? "" : otc[property],
				name: property,
				property: property,
				linetwo: "",
				issSymbol: "&#x2202;",
				index: "",
				group: mgroup,
				inputLabel: label,
				objectName: this.objectName,
				dropdownItems:
				dropitems != undefined
				? dropitems.map(item => {
					return {
						value: item,
						type: "checkbox",
						linetwo: "second",
						issSymbol: `\u2b1b;`,
						inputLabel: `${item}`,
						name: property,
						issClass: "ddlist"
					};
				})
				: []
			};
		})
		.sort((a, b) => {
			var groupA = a.group;
			var groupB = b.group;
			if (groupA < groupB) {
				return -1;
			}
			if (groupA > groupB) {
				return 1;
			}
			return 0;
		});
		for (var _i = 0; _i < data.length; _i++) {
			if (_i === 0) {
				obj0[data[0].group].push(data[0]);
			} else {
				var last = data[_i - 1].group;
				var current = data[_i].group;

				if (_i !== data.length - 1) {
					if (current === last) {
						obj0[last].push(data[_i]);
					} else {
						obj0[current].push(data[_i]);
					}
				} else {
					obj0[current].push(data[_i]);
				}
			}
		}
		return obj0;
	};
	// item=typeof item==="string" &&item.length<50?item:typeof item ==="string"? (second=item.slice(45),item.slice(0,45)):""
	ValueObjectSetter.prototype.typeAndClassGetter = function(typer, property) {
		return typer == "is" || typer == "has"
			? ["checkbox", "checkeredbox checkermeout"]
		: /get|set|close|open|save|clear|delete|import|swap|switch|load|unload|query|parse|handle|create|destroy|launch|activate|deactivate/gi.test(
			typer
		) === true
			? ["button", "button"]
		: /type|reference/gi.test(property) === true
			? ["text", "standard"]
		: /blurb|string|object|passage|holder|array|sentence|paragraph|tested/gi.test(
			property
		) === true
			? ["textarea", "standardtext"]
		: ["text", "standard"];
	};
	ValueObjectSetter.prototype.mapObjectMenus = function(objArr) {
		var keys = Object.keys(objArr);
		for (var i = 0; i < keys.length; i++) {
			var inputarray = objArr[keys[i]];
			this.inputs[keys[i]] = [];
			this.inputs[keys[i]] = inputarray.map((o, index) => {
				o.id = `issInput_${index}_${o.group}_${o.objectName}_${o.property}`;
				o.index = index;
				this.inputsMap.set(o.id, o);
				this.arrayForMap.push([o.id, o]);
				this.dropdownMap.set(o.id, o.dropdownItems);

				return o;
			});
		}
	};
	ValueObjectSetter.prototype.menuInputBinder = function() {
		var elz = document.getElementById("holder");
		console.log(elz);
		var inputNodes = elz.querySelectorAll("input"); //bind should handle it;
		// console.log(inputNodes);
		var counterOne = inputNodes.length;
		this.inputArray = []; //check
		this.propertyArray = []; //check add?
		for (var i = 1; i < counterOne; i++) {
			var newPropId = inputNodes[i].attributes.id.value;
			var newProp = inputNodes[i].attributes.name.value;
			var elem = document.getElementById(newPropId);
			// console.log(elem);
			this.propertyArray.push(newProp);
			this.inputArray.push(elem);
		}
		var taNodes = elz.querySelectorAll("textarea");
		var counterTwo = taNodes.length;
		for (var i = 0; i < counterTwo; i++) {
			var newProp2Id = taNodes[i].attributes.id.value;
			var newProp2 = taNodes[i].attributes.name.value;
			var ta = document.getElementById(newProp2Id);
			// console.log(ta);
			this.propertyArray.push(newProp2);
			this.inputArray.push(ta);
		}

		this.propertyArray.forEach((prop, index) => {
			var elem = this.inputArray[index];
			if (elem.nodeName === "TEXTAREA") {
				elem.value = elem.innerHTML;
				console.log(elem.innerHTML);
			}

			var val = elem.value;
			Object.defineProperty(this, prop, {
				enumerable: true,
				configurable: true,
				get: function() {
					if (elem.type == "checkbox" || elem.type == "radio") {
						this.archive.push({ name: prop, value: elem.checked });
						return elem.checked;
					} else {
						if (elem.nodeName === "TEXTAREA" || elem.type === "text") {
							var val = elem.value;
						}
						this.archive.push({ name: prop, value: val });
						return val;
					}
				},
				set: function() {
					if (elem.type == "checkbox" || elem.type == "radio") {
						prop = elem.checked;
					} else {
						prop = val;
					}
				}
			});
			if (elem.type != "button") {
				elem.addEventListener(
					"change",
					() => {
						var keys = Object.keys(this);
						// console.log(keys);
						keys.forEach(key => {
							// console.log(key, this[key]);
						});

						console.log(this[prop], elem.value, "newprop values here");
					},
					false
				);
			}
		}, this);
	};

	// var pills=new MyLittleInputs("onea","dropdownMenuGeneral1", 0);
	var stampUser = "Jason C.Frazzano, Esq.",
		 lastStamp = new Date().getTime - 50000,
		 viewgroups = {
			 one:
			 "title, author1, author2, blurb, passageType, passageSubType, numberOfQuestions, isDoublePassage, hasChartsAndGraphs,testNumber, menuItem, section",
			 two:
			 "passageSaveReference,questionSaveReference, lastSave, whoSaved, changesMade, passageFirebaseReference,questionsFirebaseReference,idbRef,symbolKey, archive",
			 three:
			 "questionObjectArrays, questionsString, citationArray, questionPatterns, anotherStorageReference",
			 four: ""
		 };

	// var thomas = new ValueObjectSetter(
	// 	[],
	// 	new PassageObject(),
	// 	viewgroups,
	// 	"Passage1A",
	// 	[lastStamp, stampUser]
	// );
	// return thomas;
	//Nothing After Here?
	MyLittleInputs.prototype.handleEvent = function(e) {
		switch (e.type) {
			case "click":
				this.test(e);
				break;
			case "input":
				this.inputHandler(e);
				break;
			case "resize":
				this.resizeHandler(e);
				break;
			case "keydown":
				this.navigateDropdown(e);
			default:
				break;
		}
	};
	MyLittleInputs.prototype.test = function(e) {
		var parent = e.target.parentElement;
		var target = e.target,
			 parent = target.parentElement;
		if (
			(target.parentElement!=undefined&&target.parentElement.nodeName === "FC-EXPANDER") ||
			(target.parentElement.parentElement!=undefined&&target.parentElement.parentElement.nodeName === "FC-EXPANDER") ||
			(target.parentElement.parentElement.parentElement!=undefined&&target.parentElement.parentElement.parentElement.nodeName === "FC-EXPANDER")
		) {
			this.openWaterfall(e);
		} else if (e.target.dataset.group != undefined) {
			while (
				parent.nodeName != "FC-VALUEITEM" &&
				parent.nodeName != "FC-INPUTHOLDER" &&
				parent.nodeName != "FC-INPUT" &&
				parent.nodeName !== "BODY"
			) {
				parent = parent.parentElement;
			}
			// console.log(parent);
			if (parent.nodeName == "FC-INPUT") {
				this.inputId = parent.dataset.id;
				this.clickhandler(e);
			} else if (parent.nodeName == "FC-VALUEITEM") {
				this.dropdownHandler(e);
			} else {
				console.log("useless click");
			}
		} else {
			console.log("iseless clicks");
		}
	};

	MyLittleInputs.prototype.openWaterfall = function(e) {
		var target = e.target,
			 parent = target.parentElement;
		var parent = target.parentElement;
		while (parent.nodeName !== "FC-VALUEITEM") {
			parent = parent.parentElement;
		}
		if (
			parent.nodeName == "FC-VALUEITEM" &&
			parent.classList.contains("fullpage") === false
		) {
			parent.classList.remove("fc-animate-neg-opacity");
			parent.classList.add("fullpage", "w3-animate-opacity");
		} else if (
			parent.nodeName == "FC-VALUEITEM" &&
			parent.classList.contains("fullpage") === true
		) {
			// parent.classList.add("fc-animate-neg-opacity");
			//window.setTimeout(function(){parent.classList.remove("fullpage", "w3-animate-opacity");},1750);
		}
	};

	MyLittleInputs.prototype.inputHandler = function(e) {
		switch (this.settings) {
			default:
				//some save functionality
			case "filter":
				this.dropdownFilter(this.input.value, true);
				break;
			case "sort":
				this.dropdownSort(this.input.value);
				break;
			case "multiselect":
				//do something
				break;
		}
	};
	MyLittleInputs.prototype.dropdownFilter = function(val, bool) {
		this.listchildren = [];
		var list2 = [],
			 dropdowns = this.ddm.querySelectorAll("fc-valueitem"),
			 count = dropdowns.length;
		for (var i = 0; i < count; i++) {
			var item = dropdowns[i],
				 regex = new RegExp("(.*?)" + val + "(.*?s*?|s*?.*?)", "gi");
			var retval =
				 item.dataset.value.match(this.regexOn === true ? val : regex) === null
			? ((item.hidden = true), item)
			: ((item.hidden = false), this.listchildren.push(item), item);
			if (!bool) {
				this.ddm.appendChild(retval);
			} else {
				if (item.hidden === false) {
					var trew = [],
						 reg2 = new RegExp(val, "gi");
					if (item.dataset.value !== val) {
						list2.push(val);
					}
				}
				if (i == count - 1) {
					return list2;
				}
			}
		}
	};
	MyLittleInputs.prototype.dropdownSort = function(val) {
		this.listchildren = [];
		var dropdowns = this.ddm.querySelectorAll("fc-valueitem");
		var count = dropdowns.length;
		this.barrier = document.createElement("section");
		this.barrier.style.width = this.ddm.width;
		this.barrier.style.height = "24px";
		this.barrier.style.background = "#009";
		this.barrier.style.color = "white";
		this.barrier.innerHTML = "Match Line";
		this.sortholder = document.createElement("section");
		this.ddm.innerHTML = "";
		for (var i = 0; i < count; i++) {
			var item = dropdowns[i];
			var regex = new RegExp("(.*?)" + val + "(.*?s*?|s*?.*?)", "gi");
			var retval =
				 item.value != undefined &&
				 item.value.match(this.regexOn === true ? val : regex) === null
			? ((item.hidden = true), item)
			: ((item.hidden = false), item);
			if (retval.hidden === false) {
				this.ddm.appendChild(retval);
			} else {
				retval.hidden = false;
				this.sortholder.appendChild(retval);
			}
		}
		this.sortholder.insertBefore(this.barrier, this.sortholder.children[0]);
		this.ddm.appendChild(this.sortholder);
		this.listchildren = this.ddm.querySelectorAll("fc-valueitem");
	};

	MyLittleInputs.prototype.resizeHandler = function(e) {
		this.resetDropdownDisplay();
	};
	MyLittleInputs.prototype.clickhandler = function(e) {
		this.target = e.target;
		var d = this.target.dataset;

		var iid =
			 d.inputindex != undefined && d.group != undefined
		? d.inputindex + "_" + d.group + "_"
		: null;
		this.inputIndex = iid != null ? iid : this.inputIndex;
		var activeNode = iid;
		if (d.group == undefined) {
			this.ddm.hidden = true;
		}

		if (this.target != undefined && d != undefined && d.inputindex) {
			if (d.trigger == true && this.inputIndex == this.activeNode) {
				this.ddm.hidden = true;
				this.activeNode = -1;
			} else if (this.target != undefined && d != undefined && d.inputindex) {
				this.resetDropdownDisplay("", e);
				this.activeNode = this.inputIndex;
			}
		} else {
			this.input.blur();
			this.ddm.hidden = true;
			this.activeNode = -1;
		}
	};

	MyLittleInputs.prototype.dropdownHandler = function(e) {
		var elem = e.target,
			 d = e.target.dataset,
			 ip = d.inputgroup;
		var dropdownMenuItems = this.ddm.querySelectorAll("input");
		if (elem.nodeName === "INPUT" && e.target.type === "checkbox") {
			var count = dropdownMenuItems.length,
				 i = 0,
				 selval =
				 elem.nodeName === "INPUT" && elem.value != this.input.value
			? ((this.input.value = elem.value), elem.value)
			: elem.nodeName === "INPUT" ? ((this.input.value = ""), "") : "";
		}
		e.stopPropagation();
		this.resetDropdownDisplay();
	};

	MyLittleInputs.prototype.navigateDropdown = function(e) {
		if (e.target.dataset.group == this.group) {
			switch (e.key) {
				default:

				case "ArrowDown":
					e.preventDefault();
					this.listchildren.length - 1 !== this.ddmIndex
						? ((this.ddmIndex = this.ddmIndex + 1),
							this.listchildren[this.ddmIndex].focus())
					: ((this.ddmIndex = 0), this.listchildren[this.ddmIndex].focus());
					break;
				case "ArrowUp":
					e.preventDefault();
					this.ddmIndex == 0
						? ((this.ddmIndex = this.listchildren.length),
							this.listchildren[this.ddmIndex])
					: ((this.ddmIndex = this.ddmIndex - 1),
						this.listchildren[this.ddmIndex].focus());
					break;
				case "Enter":
					if (this.input.value == this.listchildren[this.ddmIndex].dataset.value) {
					} else {
						var box = this.listchildren[this.ddmIndex].querySelector("input");
						this.input.value = box.value;
					}
					this.resetDropdownDisplay();
					break;
				case "Backspace":
					this.input.value = "";
					this.resetDropdownDisplay();
					break;
				case "Escape":
					this.input.blur();
					this.ddm.hidden = true;
					this.activeNode = -1;
					break;
			}
		}
	};
	MyLittleInputs.prototype.resetDropdownDisplay = function() {
		if (this.input != null) {
			var key =
				 this.input != undefined &&
				 this.input.attributes != undefined &&
				 this.input.attributes.id != undefined
			? this.input.attributes.id.value
			: "";
			console.log(key);
			var io = this.inputMap.get(key);
			console.log(io, key, io, key, io);

			var val = this.input.value != undefined ? this.input.value : "";
			var inpRects = this.input.getBoundingClientRect();
			var one = document.querySelectorAll("BODY");
			this.xInt = inpRects.left + one[0].scrollLeft;
			this.yInt = inpRects.bottom + one[0].scrollTop;

			if (io != undefined) {
				this.data = io.dropdownitems;
			} else {
				this.data = "";
			}
			if (this.data == "" || this.data == undefined) {
				this.list = new MyLittleDropdown(val, false, [], this.ddmId, this.group);
				this.ddm.hidden = true;
			} else {
				this.list = new MyLittleDropdown(
					val,
					false,
					this.data,
					this.ddmId,
					this.group
				);
				this.ddm = document.getElementById(this.ddmId);

				this.ddm.style.width =
					(inpRects.width + 72 < 309 ? 309 : inpRects.width + 64).toString() + "px";
				this.ddm.style.left = (this.xInt - 44).toString() + "px";
				this.ddm.style.top = (this.yInt + 8).toString() + "px";
				if (this.multiSelect !== true) {
					this.dropdownSort(this.input.value);
				}

				this.ddm.hidden = false;
				this.ddm.scrollTop = 0;
				this.ddmIndex = 0;
			}
			this.activeNode = this.inputIndex;
			this.input.focus();
		}
	};
	
var thomas = new ValueObjectSetter(
		[],
		new PassageObject(),
		viewgroups,
		"Passage1A",
		[lastStamp, stampUser]
	);
	

// <label class="switch" style="">

// 	<input data-btn="hideit" type="checkbox">

// 		<div class="slider round"></div>

// </label>

	const dropdown = items => `<section class="vertical layout flex theDropdownmenu">${items.map((item, index)=>`<fc-valueitem data-group="${group}" data-index="${index}" style="max-width: 100%; background: #fefefe; min-height: 89px; border:silver 1px solid;" class="horizontal layout flex nowrap'  data-index="${index}" data-value="${item.value}" tabindex='0' data-foundation="${item.linetwo}">

 <label for="checkered${index}_${group}" style='font-size:1.03em; cursor: pointer;' data-group="${group}" data-index="${index}" class="theDropdownmenu  checkermeout">

 <input style="opacity: 0; width: 1px" data-inputgroup="${group}" value="${item.value}" data-group="${group}" name="checkered${index}_${group}" id="checkered${index}_${group}" type="checkbox" class="checkermeout theDropdownmenu" ${inputValue===item.value?"checked":""}>

 <fc-itemcheckbox class="checkermeout theDropdownmenu layout vertical flex center" name="xrq_dropdown"data-inputgroup="${group}" data-group="${group}" data-value='${item.value}' id='dropdownbutton_${index}' data-index="${index}">

 </fc-itemcheckbox>

 </label>
 <div style="line-height:1.15; overflow-y: scroll; overflow-x: hidden;" class='theDropdownmenu vertical layout dropdown inputcontainer'><span style="color:#009; background: white; line-height: 1.2; padding: 5px;font-weight: 600; font-size: 24px; background: #fefefe;" class="theDropdownmenu layout block">${item.value}</span><span style="color: ebony; background: #fdfdfd; font-size: 16px; border-top: 1px solid black;" class="layout block theDropdownmenu">${item.linetwo}</span></div></fc-valueitem>`).join('')}</section>`;

// <label class="switch" style="position: absolute; right: 10px; top: 53px; margin-top: 12px;"><span style="position: absolute; font-size: 19px; left: -70px;">Controls</span><input data-btn="fromTop" type="checkbox"><div class="slider round"></div></label>
return thomas;	
})();
              
            
!
999px

Console