@import url(../icons/X-close-icon-set.css);
/*_____________________________________________________________________________
-                 Trinix Computer Systems - Fronted Framework Library
-    F O R M   S T Y L I N G   &   V A L I D A T I O N   C S S   M O D U L E
-                       Development Version 0.0.1
-                     (c) Trinix Computer Systems 2018

- Created by: Brandon Reilly on 1/17/2018
- Modified On: Bradon Reilly on 1/17/2018 @ 5:39AM
- Nodified by: Brandon Reilly on 04-06-2022 @ 10:15AM
- Nodified by: Brandon Reilly on 04-07-2022 @ 10:05PM
-
- Description: This module will handle all the form styling, validation options
-   (with the help of JavaScript) and various responsive color input indicators
-       Having visual feedback through the use of colors will allow the user
-       to imediatley see if their input is valid.
- 
-
- Todo: Style Forms, fix Hover, Focus & Active methods
-
- Notes: Use sprite fill created in PSP to add custo mcheck boxes for Task2Do! app
______________________________________________________________________________________*/
:root {
    /*Main form settings that are pretty self explainatory. These will control the overal appearance of the form without
        having to scroll through hundreds of lines of CSS*/

    --TS_C-form--width: 100%;

    --TS_C-form--min-width: 20rem;
    --TS_C-form--max-width: 96vw;
    --TS_C-form--min-height: 10rem;
    --TS_C-form--max-height: 80vh;

    --TS_C-form--pos-units: 1px;
	--TS_C-form--top: calc(50% + 2.0rem);
	--TS_C-form--left: 50%;
    --TS_C-form--rounded-amt: .25rem;

    --TS_C-form__font-size-units: 1rem;
    --TS_C-form__row--height: 1.05;

    --TS_C-form__default--font-size: 1.0;
    --TS_C-form__default--font-weight: 400;
    --TS_C-form__default--font:  var(--TS_U-font-family--Garamond);
   /*
    --TS_C-form__default--font: Garamond, Baskerville, "Baskerville Old Face", "Hoefler Text", "Times New Roman", serif;
    */
    --TS_C-form__body--font-family: var(--TS_U-font-family--LucidaSans); 
    --TS_C-form__body--font-size: calc(var(--TS_C-form__default--font-size) * 1.05);
    --TS_C-form__group--padding: .5rem;
    
    --TS_C-form__label--font-family: var(--TS_U-font-family--Garamond);
    --TS_C-form__label--font-size: calc(var(--TS_C-form__default--font-size) * 0.9);
    --TS_C-form__label--letter-spacing: var(--TS-T-black-glass__form__label--letter-spacing);
    --TS_C-form__label--font-family: var(--TS-T-black-glass__form__label--font-family);

    --TS_C-form--textarea--min-width: 15rem;
    --TS_C-form--textarea--max-width: 95vw;
    --TS_C-form--textarea--min-height: 1.1rem;
    --TS_C-form--textarea--max-height: 8rem;


    /*
    var(--TS_U-font-family--GillSans);
    var(--TS_U-font-family--HelveticaNeue);
    var(--TS_U-font-family--CalibriSans);
    var(--TS_U-font-family--Baskerville);
    var(--TS_U-font-family--PalatinoSerif);
    var(--TS_U-font-family--LucidaBright);

    var(--TS_U-font-family--LucidaSans);
    var(--TS_U-font-family--VerdanaSans);
    var(--TS_U-font-family--ArialSans);

    var(--TS_U-font-family--Garamond);
    var(--TS_U-font-family--CenturyGothicSans);

    "Century Gothic", CenturyGothic, AppleGothic, sans-serif; 
    */
    
    --TS_C-form__header--font-family:  var(--TS_U-font-family--LucidaBright); /*var(--fontBaskerville);*/
    --TS_C-form__header--font-size: calc(var(--TS_C-form__default--font-size) * 1.25);
    --TS_C-form__h2--font-size: calc(var(--TS_C-form__default--font-size) * 1.15);
    --TS_C-form__footer--font-family: var(--TS_U-font-family--Garamond);
    --TS_C-form__footer--font-size: calc(var(--TS_C-form__default--font-size) * 1.1);

 
    /*Base Form Color Settings, All other colors are calculated based

    /*Purple Theme 
    --TS_C-form--Hue: 275;
    --TS_C-form--Sat: 50;
    --TS_C-form--Lit: 35;
    */

    --TS_C-form--Hue: 215;
    --TS_C-form--Sat: 20;
    --TS_C-form--Lit: 35;
    --TS_C-form--InvLit: 85;
    
    /*
    --TS-U-colors-formBaseColor: hsl(var(--TS_C-form--Hue), calc(var(--TS_C-form--Sat) * 1%), calc(var(--TS_C-form--Lit) * 1%));

    hsl(var(--TS_C-form__header-bk--Hue), calc(var(--TS_C-form__header-bk--Sat) * 1%), calc(var(--TS_C-form__header-bk--Lit) * .5%));

    .TS.C-form-container background:  hsla(var(--TS_C-form__container-bk--Hue),calc(var(--TS_C-form__container-bk--Sat) * 1%),calc(var(--TS_C-form__container-bk--Lit) * 1%), .75); 
    */

    --TS_C-form__container--background: hsla(var(--TS_C-form__container-bk--Hue), calc(var(--TS_C-form__container-bk--Sat) * 1%), calc(var(--TS_C-form__container-bk--Lit) * 1%), .75); 
    --TS_C-form__top-edge: var(--TS_T-black-glass__top-div-edge--box-shadow);
    
    --TS_C-form__title-bar--background--color:rgba(25, 90, 160, 0.45);
    --TS_C-form__title-bar--background--color: rgba(10, 10, 5, 0.6);
    --TS_C-form__title-bar--background: var(--TS_T-black-glass-fixed-div__title-bar--backgound);
    --TS_C-form__title-bar--background: var(--TS_C-form__title-bar--background--color);    
    
    /* --TS_C-form__title-bar--background: hsl(var(--TS_C-form__header-bk--Hue), calc(var(--TS_C-form__header-bk--Sat) * 1%), calc(var(--TS_C-form__header-bk--Lit) * 1%)); */
   
    --TS_C-form__title-bar--bottom-border: 1px solid hsl(var(--TS_C-form__border--Hue), calc(var(--TS_C-form__border--Sat) * 1%), calc(var(--TS_C-form__border--Lit) * 1%));
    
    --TS_C-form__title-bar--TL-radius: 12px;
    --TS_C-form__title-bar--TR-radius: 32px;
    --TS_C-form__title-bar--BL-radius: 8px;
    --TS_C-form__title-bar--BR-radius: 8px;

    --TS_C-form__container-bk--Hue: var(--TS_C-form--Hue);
    --TS_C-form__container-bk--Sat: calc(var(--TS_C-form--Sat) * .85);
    --TS_C-form__container-bk--Lit: calc(var(--TS_C-form--Lit) * .5);
    
    --TS_C-form__header-bk--Hue: var(--TS_C-form--Hue);
    --TS_C-form__header-bk--Sat: calc(var(--TS_C-form--Sat) * .90);
    --TS_C-form__header-bk--Lit: calc(var(--TS_C-form--Lit) * .60);
    
    --TS_C-form__body-bk--Hue: var(--TS_C-form--Hue);
    --TS_C-form__body-bk--Sat: calc(var(--TS_C-form--Sat) * .95);
    --TS_C-form__body-bk--Lit: calc(var(--TS_C-form--Lit) * .95);
  
    --TS_C-form__footer-bk--Hue: var(--TS_C-form--Hue);
    --TS_C-form__footer-bk--Sat: calc(var(--TS_C-form--Sat) * .80);
    --TS_C-form__footer-bk--Lit: calc(var(--TS_C-form--Lit) * .80);

    --TS_C-form__border--Hue: calc((var(--TS_C-form--Hue) *.1) + var(--TS_C-form--Hue));
    --TS_C-form__border--Sat: calc(var(--TS_C-form--Sat) * .25); 
    --TS_C-form__border--Lit: calc(var(--TS_C-form--Lit) * .25);


    --TS_C-form__input--Hue: var(--TS_C-form__border--Hue);
    --TS_C-form__input--Sat: calc(var(--TS_C-form__border--Sat) * .5);
    --TS_C-form__input--Lit: 95;
    --TS_C-form__input--Alf: .8;

    --TS_C-form__input_color: rgba(1, 1, 1, 1);
    --TS_C-form__input_background: hsla(var( --TS_C-form__input--Hue), calc(var(--TS_C-form__input--Sat) * 1%), calc(var(--TS_C-form__input--Lit) * 1%), var(--TS_C-form__input--Alf));

    --TS_C-form__lcd_input-background: rgba(210, 215, 220, .65);

    /*
    --TS_formInputLit: calc(var(--TS_formBorder--Lit) * .5);
    */
    
    font-family: var(--TS_C-form__default--font);

}

.TS.C-form-container {
	width: 100vw;
	height: 100vh;
 
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background: var(--TS_C-form__container--background);
	position: fixed;
	
	box-sizing: border-box;

	display: block;
	align-items: center;
	justify-content: center;
	opacity:1;
	transform: scale(1);
	/*transition: all .5s  ease-in-out;
	opacity 0.01s 0.01s,
	*/

    /* step 1 */

    /* step 2
        transition: all 0.15s ease-in-out;
        transform  0.04;
        transition: all 0.75s ease-in-out;
    */
    /* transition: all linear .2s; */
    transition: all .33s  ease-in-out,
                opacity .5s linear,
                display .5s linear;

}

.TS.C-form-container.close {
	opacity:0;
    z-index: -1;
    transform: scale(.01);
    /* display: none; */
	
	
	/*
	top:100%;
	transition: all .5s  ease-in-out;
	 transition: 
	
	transition-property: opacity, all;
	transition-duration: 0.1s, 1.5s;
	transition-timing-function: cubic-bezier(0,2,0,1);
		 */
	
	/* transition: all ease .275s; */
    transition: all .33s ease-in-out,
                opacity .375s linear,
                z-index .375s linear,
                transform .375s ease-in-out;
}
/* 
.TS.C-form-container.close > .TS.C-form {
    transform: scale(0.01);
    transition: transform 1.0s ease-in-out;
} */

	
.TS.C-form-container.open {
    opacity:1;
    z-index: 1;
    transform: scale(1);
    display: block;
    transition: all .33s ease-in-out,
                opacity 0.22s linear,
                z-index 0.22s linear,
                transform .22s ease-in-out;
}

/* .TS.C-form-container.open > .TS.C-form {
    transform: scale(1);
    transition: transform .5s ease-in-out;
} */


.TS.C-form .form-field-container {
    display: flex;
    height: 100%;
    position: relative;
    overflow-y: auto;
}


.TS.C-form {
    position: fixed;
    box-sizing: border-box;
    display: inline-block;
    overflow: hidden;

    top: var(--TS_C-form--top);
    left: var(--TS_C-form--left);

    min-width: var(--TS_C-form--min-width);
    max-width: var(--TS_C-form--max-width);

    min-height: var(--TS_C-form--min-height);
    max-height: 100%;   /* var(--TS_C-form--max-height); */

    width: min-content; /*alc(var(--TS_C-form--width) * var(--TS_C-form--pos-units));*/
    height: auto;
   
    margin: .5rem auto;
    padding: 0;

    transform: translate3d(-50%, -50%, 0);
    
    line-height: calc(calc(var(--TS_C-form__default--font-size) * 1.05) * var(--TS_C-form__font-size-units));
    font-size: calc(var(--TS_C-form__default--font-size) * var(--TS_C-form__font-size-units));

    color: hsl(var(--TS_C-form--Hue),calc(var(--TS_C-form--Sat) * 1%),calc(var(--TS_C-form--InvLit) * 1%));     

    border: 2px solid  hsla(var(--TS_C-form__border--Hue), calc(var(--TS_C-form__border--Sat) * 1%), calc(var(--TS_C-form__border--Lit) * 1%), .75);
    border-radius: var(--TS_C-form--rounded-amt);

    /*
    border-top-left-radius:var(--TS_C-form__title-bar--TL-radius);
    border-top-right-radius: calc(var(--TS_C-form__title-bar--TR-radius) + 2px);
    border-bottom-left-radius: var(--TS_C-form__title-bar--BL-radius);
    border-bottom-right-radius: var(--TS_C-form__title-bar--BR-radius);
    */

    /*
    border: hsl(var(--TS_formBorderHue), calc(var(--TS_formBorderSaturation) * 1%), 5%) 1px 2px ;
    */

    /*
    background: hsl(var(--TS_C-form--Hue),calc(var(--TS_C-form--Sat) * 1%),calc(var(--TS_C-form--Lit) * 1%)); 
    */

    /*
    background: linear-gradient(to bottom,rgba(96, 94, 128, 0.975) 0%,rgba(54, 52, 50, 0.975) 7.5%,rgba(20, 18, 19, 0.95) 20%,rgba(6, 5, 3, 0.975) 35%,rgba(13, 11, 12, .975) 80%,rgba(32, 31, 30, .975) 100%);
    
    background: linear-gradient(to bottom,rgb(26, 26, 26) 1.25%,rgba(90, 96, 98, 0.985) 35%,rgba(150, 148, 145, 0.975) 45%,rgba(48, 46, 46, .985) 55%,rgba(22, 24, 26, .975) 80%,rgba(13, 13, 13, .975) 100%);
   
    background: linear-gradient(to bottom,rgb(26, 26, 26) 1.25%,rgba(40, 46, 48, 0.985) 5%, rgba(25, 26, 28, 0.985) 25%,rgba(35, 36, 36, .985) 40%,rgba(22, 24, 26, .975) 75%,rgba(13, 13, 13, .975) 100%);

    background: linear-gradient(to bottom,rgba(96, 94, 128, 0.975) 0%,rgba(54, 52, 50, 0.975) 7.5%,rgba(20, 18, 19, 0.95) 20%,rgba(6, 5, 3, 0.975) 35%,rgba(13, 11, 12, .975) 80%,rgba(32, 31, 30, .975) 100%);

    background: linear-gradient(to bottom,rgb(26, 26, 26) 1.25%,rgba(90, 96, 98, 0.985) 3.5%,rgba(150, 148, 145, 0.975) 4.5%,rgba(48, 46, 46, .985) 5.5%,rgba(22, 24, 26, .975) 55%,rgba(13, 13, 13, .975) 100%);

    background: linear-gradient(to bottom,rgb(26, 26, 26) 1.25%,rgba(90, 96, 98, 0.985) 30%,rgba(150, 148, 145, 0.975) 45%,rgba(48, 46, 46, .985) 55%,rgba(22, 24, 26, .975) 85%,rgba(13, 13, 13, .975) 100%);
    */

    /* background: linear-gradient(rgb(0, 0, 0) 0%,rgba(200, 200, 206, 0.985) 6.25%,rgba(128, 128, 128, 0.985) 6.75%,rgba(20, 20, 26, 0.985) 17%,rgba(13, 13, 13, .985) 85%,rgba(6, 6, 6, .985) 100%); */

    /* background: linear-gradient(to bottom,rgb(0, 0, 0) 0.8%,rgba(128, 128, 128, 0.985) 5%,rgba(255, 255, 255, 0.985) 6%,rgba(98, 98, 98, 0.985) 7%,rgba(51, 51, 51, .985) 20%,rgba(0, 0, 0, .985) 100%); */

    /*********************************************************************************************
    *                                     Non-Alpha Gradients
    *********************************************************************************************/
    background: linear-gradient(rgb(0, 0, 0) 0%,rgb(200, 200, 206) 6.25%,rgb(128, 128, 128) 6.75%,rgb(20, 20, 26) 17%,rgb(13, 13, 13) 85%,rgb(6, 6, 6) 100%);

    background: linear-gradient(to bottom,rgb(0, 0, 0) 0.8%,rgb(128, 128, 128) 5%,rgb(255, 255, 255) 6%,rgb(98, 98, 98) 7%,rgb(51, 51, 51) 20%,rgb(0, 0, 0) 100%);
    
}

.TS.C-form2 {
    box-sizing: border-box;
    flex-basis: auto;
    flex-grow: 0;

    min-width: var(--TS_C-form--min-width);
    max-width: var(--TS_C-form--max-width);
    min-height: var(--TS_C-form--min-height);
    max-height: var(--TS_C-form--max-height);
   /* width: calc(var(--TS_C-form--width) * var(--TS_C-form--pos-units)); */
   /* position: absolute; */

   margin: 0 auto;
   
   line-height: calc(calc(var(--TS_C-form__default--font-size) * 1.05) * var(--TS_C-form__font-size-units));
   font-size: calc(var(--TS_C-form__default--font-size) * var(--TS_C-form__font-size-units));

}

.TS .C-form__field-row label, .TS .C-form__field-row input {
    margin: .125rem 0;
    display: inline-block;

}

.TS.U-left-aligned {
    display: inline-block;
    width: auto;
    text-align: left;
    /*! margin: .25rem 0; */
      
}

.TS.U-left-aligned input[type=text] {
    width: 15rem;
    max-width: 25rem;
    display: inline-block;

}

.TS.C-form.close {
	opacity:0;
	 transform: scale(0.2);
	transition: all .33s  ease-in-out,
                opacity .5s linear;
}
	
.TS.C-form.open {
	opacity:1;
    transform: scale(1);
    transition: all .33s  ease-in-out,
    opacity .5s linear;
}

/*
.TS_form input, textarea, select, option {
  
    width: 75%;
    display: inline-block;
    line-height: 1.5em;
    padding: 12px 20px;
    margin: 8px 0;
    margin-left: 25px;
    margin-right: 25px;
    /*background: none;*/
/*
    background: hsl(var(--TS_formBackGroundHue),calc(var(--TS_formBackGroundSat) * 1%),calc((90 - var(--TS_formBackGroundLit) * 1%))); 
    border-color:  hsl(var(--TS_formBorderHue), calc(var(--TS_formBorderSat) * 1%), 10%);
    border-top: 1px solid;
    border-left: 1px solid;
    border-bottom: 2px solid;
    border-right: 2px solid;
    /*border-left:  hsl(var(--formBorderHue), calc(var(--formBorderSaturation) * 1%), 50%) 2px solid;
    /*
    border: hsl(var(--formBorderHue), calc(var(--formBorderSaturation) * 1%), 50%) 1px 2px 2px 1px solid;
    */
/*
    border-radius: 2px;
    color: rgb(18, 79, 104);
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
    font-size: 20px;
    color: rgb(15, 37, 46)
    
}
*/

/*.TS_form span {
    background:#CDD; 
    font-size:1.5em;
     vertical-align:top;
    width: 500px;
    margin: 0 auto;
    height: 600px;
  
}
*/

.TS.C-form.hslDisplays {
    background: rgba(220, 220, 220, .9);
    border: 1px solid rgba(96, 96, 96, .7);
    width:11em;
}
.TS.C-form__title-bar {
/*******************************Sizing & Positioning Properties******************************/

    width: calc(100% - .5rem);
    height: 1.5rem;
    margin: 0rem auto;
    padding: .5rem 0px 0px .5rem;
    
    line-height: calc(calc(var(--TS_C-form__header--font-size) * 1.05)) * var(--TS_C-form__font-size-units);
	display: inline-flex;
    justify-content: space-between;
    padding: 4px 0;
    padding: 0.05rem 0 0.35rem 0;
    margin: 0 auto;
	cursor: move;
    z-index: 1700;
   
/**********************************Visual Styling Properties************************************/
    
    cursor: move;
    background: rgba(25, 90, 160, 0.45);
    font-size: 1rem;

    background-color: var(--TS_C-form__title-bar--background--color);
    color: var(--TS_C-form__title-bar--foreground--color);    
    background: var(--TS_C-form__title-bar--background);     
    border-bottom: var(--TS_C-form__title-bar--background);
    border-top-left-radius:  var(--TS_C-form__title-bar--TL-radius);
    border-top-right-radius:  var(--TS_C-form__title-bar--TR-radius);
    box-shadow: var(--TS_C-form__top-edge);


    /*
    border-bottom: 1px solid  hsl(var(--TS_C-form__border--Hue), calc(var(--TS_C-form__border--Sat) * 1%), calc(var(--TS_C-form__border--Lit) * 1%));
    
    border-bottom: 1px solid rgba(13, 13, 13, .8); */
    /*
    box-shadow: inset 0px 2px 2px 2px rgba(240, 249, 250, 0.2);
    box-shadow: inset 0px 4px 4px -4px rgba(240, 250, 250, 0.9);
    */
       
    /*
    background: hsl(var(--TS_C-form__header-bk--Hue), calc(var(--TS_C-form__header-bk--Sat) * 1%), calc(var(--TS_C-form__header-bk--Lit) * .5%));
    border-bottom: 1px solid rgba(13, 13, 13, .8);*/
    /*box-shadow: 0 2px 2px  rgba(13, 13, 13, .7);
    
     box-shadow:  inset 0px 7px 11px -5px rgba(213, 210, 243, 0.7);
     
    
    border-bottom: 1px solid hsl(var(--TS_C-form__border--Hue), calc(var(--TS_C-form__border--Sat) * 1%), calc(var(--TS_C-form__border--Lit) * 1%));
    box-shadow: inset 0px 6px 6px -6px rgba(240, 250, 250, 0.8);
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
    padding: 4px 0;
    margin: 0 auto;
    cursor: move;
    background: rgba(25, 90, 160, 0.45);
	*/

}

.TS.C-form__title-bar {
    width: calc(100% - 0rem);
    height: 1.75rem;
    display: inline-block;
    padding: 0.125rem 0 0.25rem .25rem;
    margin: 0 auto;
    z-index: 1700;
    cursor: move;
    background: rgba(25, 90, 160, 0.45);
    font-size: 1.1rem;
    color: var(--TS_C-form__title-bar--foreground--color);
    background: var(--TS_C-form__title-bar--background);
    border-bottom: var(--TS_C-form__title-bar--background);
    border-bottom-right-radius:  var(--TS_C-form__title-bar--BL-radius);
    box-shadow: var(--TS_C-form__top-edge);
    line-height: 1.75;
    text-align: center;
    vertical-align: middle;
}


.TS.C-form__title-bar > h1 {
/*******************************Sizing & Positioning Properties**********************************/
  
    margin: .125rem;
    margin: .25rem 1rem 0px 1rem;
	display:inline-flex;
    
/**********************************Visual Styling Properties*************************************/
    
    font-family: var(--TS_C-form__header--font-family);
    font-size: calc(var(--TS_C-form__header--font-size) * var(--TS_C-form__font-size-units));
    font-weight: var(--TS_C-form__default--font-weight);
    color:  hsl(var(--TS_C-form__header-bk--Hue), calc(var(--TS_C-form__header-bk--Sat) * 1%), calc(var(--TS_C-form--InvLit) * 1%));

}
/***********************************************************************************************/

.TS.C-form__title-bar > .C-close-icon {
	
	display: flex;
    padding-right: 0.5rem;
    margin-top: -10px;
	justify-content: flex-end;
}

.TS.C-form__header {
/*******************************Sizing & Positioning Properties**********************************/
    display:inline-flex;
    padding: 2px 1rem 4px 1rem;;
   
    line-height: calc(calc(var(--TS_C-form__header--font-size) * 1.05) * var(--TS_C-form__font-size-units));
   
/**********************************Visual Styling Properties*************************************/
    text-align: left;
    background:  hsl(var(--TS_C-form__header-bk--Hue), calc(var(--TS_C-form__header-bk--Sat) * 1%), calc(var(--TS_C-form__header-bk--Lit) * .5%));
    /*border-bottom: 1px solid rgba(13, 13, 13, .8);*/
    border-bottom: 1px solid  hsl(var(--TS_C-form__border--Hue), calc(var(--TS_C-form__border--Sat) * 1%), calc(var(--TS_C-form__border--Lit) * 1%));
    /*box-shadow: 0 2px 2px  rgba(13, 13, 13, .7);
    
	 box-shadow:  inset 0px 7px 11px -5px rgba(213, 210, 243, 0.7);
	*/
	box-shadow: inset 0px 4px 4px -4px rgba(240, 250, 250, 0.9);
    border-top-left-radius: var(--TS_C-form__title-bar--TL-radius);
    border-top-right-radius: var(--TS_C-form__title-bar--TL-radius);
  
}

.TS.C-form__header h1 {
/*******************************Sizing & Positioning Properties**********************************/
    margin: .125em;
	display:inline-flex;
/**********************************Visual Styling Properties*************************************/	
    font-family: var(--TS_C-form__header--font-family);
    font-size: calc(var(--TS_C-form__header--font-size) * var(--TS_C-form__font-size-units));
    font-weight: var(--TS_C-form__default--font-weight);
    color:  hsl(var(--TS_C-form__header-bk--Hue), calc(var(--TS_C-form__header-bk--Sat) * 1%), calc(var(--TS_C-form--InvLit) * 1%));
   
}

.TS.C-form__body > h2 {
/**********************************Visual Styling Properties*************************************/	
    line-height: calc(calc(var(--TS_C-form__h2--font-size) * 1.05)) * var(--TS_C-form__font-size-units);
    font-size: calc(var(--TS_C-form__h2--font-size) * var(--TS_C-form__font-size-units));
    text-decoration: none;
    
}

.TS.C-form__body {
/*******************************Sizing & Positioning Properties**********************************/
    display: block;
    
    position: relative;
    max-width: 100%;
    width: auto;
    
    /*! overflow-y: auto !important; */
    flex: 1;
    height:calc(100% - 2.8rem);
    /* height: auto; */

/**********************************Visual Styling Properties*************************************/	
    
    font-family: var(--TS_C-form__body--font-family);
    font-size: calc(var(--TS_C-form__body--font-size) * (var(--TS_C-form__font-size-units)));
    font-weight: var(--TS_C-form__default--font-weight);
  
    color:  hsl(var(--TS_C-form__body-bk--Hue), calc(var(--TS_C-form__body-bk--Sat) * 1%), calc(var(--TS_C-form--InvLit) * 1%));
       
    padding: 0;
    overflow-x: hidden;
    /* bottom: 1.8rem;     */
    height: auto;
}

.TS.C-form__body {
   
    position: relative;
    height: auto;
    font-family: var(--TS_C-form__body--font-family);
    font-size: calc(var(--TS_C-form__body--font-size) * (var(--TS_C-form__font-size-units)));
    font-weight: var(--TS_C-form__default--font-weight);

    /* background:  hsl(var(--TS_C-form__body-bk--Hue), calc(var(--TS_C-form__body-bk--Sat) * 1%), calc(var(--TS_C-form__body-bk--Lit) * 1%)); */

    /* background: hsl(var(--TS_C-form__body-bk--Hue), calc(var(--TS_C-form__body-bk--Sat) * 1%), calc(var(--TS_C-form__body-bk--Lit) * 1%));
    background: linear-gradient(to bottom,hsla(0,0%,0%,1) 0.8%,hsla(0,0%,50%,0.3) 5%,hsla(0,0%,100%,0.5) 6%,hsla(0,0%,50%,0.2) 7%,hsla(0,0%,20%,1) 20%,hsla(0,0%,0%,1) 100%);
    background: linear-gradient(to bottom,rgb(0, 0, 0) 0.8%,rgba(128, 128, 128, 0.3) 1.5%,rgba(255, 255, 255, 0.5) 4%,rgba(128, 128, 128, 0.2) 6%,rgb(13, 16, 26) 10%,rgb(0, 0, 0) 100%);

    background: linear-gradient(to bottom,rgba(0, 0, 0, .5) 0.0%,rgba(88, 88, 88, 0.975) .25%,rgba(200, 200, 200, 0.975) 1.5%,rgba(28, 28, 28, 0.985) 2.25%,rgb(23, 26, 26) 50%,rgb(0, 0, 0) 100%);

    background: linear-gradient(to bottom,rgba(0, 0, 0, 0) 0%,rgba(128, 128, 128, 0.3) .25%,rgba(200, 200, 200, 0.975) 1.0%,rgba(28, 28, 28, 0.985) 1.75%,rgb(23, 26, 26) 50%,rgb(0, 0, 0) 100%); */

    color: hsl(var(--TS_C-form__body-bk--Hue), calc(var(--TS_C-form__body-bk--Sat) * 1%), calc(var(--TS_C-form--InvLit) * 1%));
    
    
    margin: .125rem 0 .75rem;
    padding: 0;

}

.TS.C-form__body label {
    font-family: var(--TS_C-form__label--font-family);
    font-size: 1rem; /* calc(var(--TS_C-form__label--font-size) * var(--TS_C-form__font-size-units));*/

}

.TS.C-dialog__body {
/*******************************Sizing & Positioning Properties**********************************/
    flex: 1;
    height: auto;
    padding: 0.25rem;

/**********************************Visual Styling Properties*************************************/	
 
    /*
    background: hsl(var(--TS_C-form__body-bk--Hue), calc(var(--TS_C-form__body-bk--Sat) * 1%), calc(var(--TS_C-form__body-bk--Lit) * 1%));
    */
    font-family: var(--TS_C-form__body--font-family);
    font-size: calc(var(--TS_C-form__body--font-size) * (var(--TS_C-form__font-size-units)));
    font-weight: var(--TS_C-form__default--font-weight);
    color: hsl(var(--TS_C-form__body-bk--Hue), calc(var(--TS_C-form__body-bk--Sat) * 1%), calc(var(--TS_C-form--InvLit) * 1%));
    border-bottom-left-radius:  var(--TS_C-form__title-bar--BL-radius);
    border-bottom-right-radius:  var(--TS_C-form__title-bar--BL-radius);

}

.TS.C-form__footer {
/*******************************Sizing & Positioning Properties**********************************/
    width:100%;
    height:100%;
    margin: 0 auto;
    /*
    padding: 2px;
    */

/**********************************Visual Styling Properties*************************************/

/**********************************Visual Styling Properties*************************************/
    text-align: center;
    font-family: var(--TS_C-form__footer--font-family);
    font-size: calc(var(--TS_C-form__footer--font-size) * (var(--TS_C-form__font-size-units)));
    font-weight: var(--TS_C-form__default--font-weight);
    background:  hsl(var(--TS_C-form__footer-bk--Hue), calc(var(--TS_C-form__footer-bk--Sat) * 1%), calc(var(--TS_C-form__footer-bk--Lit) * .5%));
    background: hsla(var(--TS_C-form__footer-bk--Hue), calc(var(--TS_C-form__footer-bk--Sat) * 1%), calc(var(--TS_C-form__footer-bk--Lit) * .5%), .25);
   
    /*
    border-radius: var(--TS_C-form--rounded-amt);
    box-shadow: inset 0 -3px 9px rgba(13, 13, 13, .7);
    box-shadow: inset 0px -5px 5px rgba(30, 30, 40, 0.5);
    */
    
    box-shadow: inset 0px -6px 6px -3px rgba(13, 10, 43, 0.7);
    
    border-top: 1px solid  hsl(var(--TS_C-form__border--Hue), calc(var(--TS_C-form__border--Sat) * 1%), calc(var(--TS_C-form__border--Lit) * 1%));
    border-top-left-radius: 1px;
    border-top-right-radius: 1px;
    
    border-bottom-left-radius: calc(var(--TS_C-form--rounded-amt) * .5);
    border-bottom-right-radius: calc(var(--TS_C-form--rounded-amt) * .5);
    
    border-bottom-left-radius:  var(--TS_C-form__title-bar--BL-radius);
    border-bottom-right-radius:  var(--TS_C-form__title-bar--BL-radius);

}

.TS.C-form__footer > p {
/*******************************Sizing & Positioning Properties**********************************/
    width: 100%;
    margin: .25em auto;
   
/**********************************Visual Styling Properties*************************************/


/**********************************Visual Styling Properties*************************************/	        
    font-size: calc(var(--TS_C-form__footer--font-size) * var(--TS_C-form__font-size-units));
    color: hsl(var(--TS_C-form__footer-bk--Hue), calc(var(--TS_C-form__footer-bk--Sat) * 1%), calc(var(--TS_C-form--InvLit) * 1%));

}

.TS.C-form__field-group {
/*******************************Sizing & Positioning Properties**********************************/
    display: inline-block;
    min-width: calc(var(--TS_C-form--min-width) * .95);
    max-width: calc(var(--TS_C-form--max-width) * .95);
    max-width: 98%;
    min-width: 95%;
    width: auto;
    height: auto;
    position: relative;
    padding: var(--TS_C-form__group--padding);
    margin: .25rem .5rem;
/**********************************Visual Styling Properties*************************************/
    border: .12rem inset rgba(150, 160, 170, .9);
    border-radius: .175rem;

/**********************************Visual Styling Properties*************************************/	        

}

.TS.C-form__field-group {
    position: relative;
    display: block;
    max-width: 100%;
    min-width: 15rem;
    width: 95.5%;
    height: auto;
    margin: .075rem 1.5% .125rem;
    padding: .075rem 0.5%;
    border: .12rem inset rgba(150, 160, 170, .75);
    border-radius: .25rem;
      
}

.TS.C-form__field-group.recessed {
	border-top: 1px solid  hsla(var(--TS_C-form__border--Hue), calc(var(--TS_C-form__border--Sat) * 1%), calc(var(--TS_C-form__border--Lit) * 1%), .7);
	border-left: 1px solid  hsla(var(--TS_C-form__border--Hue), calc(var(--TS_C-form__border--Sat) * 1%), calc(var(--TS_C-form__border--Lit) * 1%), .7);
	border-bottom: 1px inset rgba(220, 220, 220, .7);
	border-right: 1px inset rgba(220, 220, 220, .7);
	min-height:3rem;
}

.TS.C-form__field-group.outlined {
	border: 1px solid  hsla(var(--TS_C-form__border--Hue), calc(var(--TS_C-form__border--Sat) * 1%), calc(var(--TS_C-form__border--Lit) * 1%), .7);
}

.TS.C-form__field-group.underlined {
    padding-bottom: 4px;
    border-bottom: 2px solid hsla(var(--TS_C-form__border--Hue), calc(var(--TS_C-form__border--Sat) * 1%), calc(var(--TS_C-form__border--Lit) * 1%), .95);
    box-shadow: 0px 4px 4px -4px rgba(13, 13, 13, 0.8);
}

.TS.C-form__field-row {
    position: relative;
    display: flex;
    min-width: 98%;
    max-width: 100%;
    max-height: 100%;
    min-height: .9rem;
    width: auto;
    height: auto;
    margin: 0.125rem auto;
    /*! padding:  1px 0px 10px 0.5rem; */

    /*    calc(var(--TS_C-form__row--height) * var(--TS_C-form__font-size-units));*/
    /* line-height: calc(calc(var(--TS_C-form__row--height) * var(--TS_C-form__font-size-units)) * .8); */ /*1.75em;*/
    /* margin: .25em .75em .25em 1em; */
	/* margin: 0px; */
   
    padding: 0.0875rem;
    white-space: nowrap;
    line-height: 1.75;
}

.TS.C-form__field-row.recessed {
    border-top: 1px solid  hsla(var(--TS_C-form__border--Hue), calc(var(--TS_C-form__border--Sat) * 1%), calc(var(--TS_C-form__border--Lit) * 1%), .7);
    border-left: 1px solid  hsla(var(--TS_C-form__border--Hue), calc(var(--TS_C-form__border--Sat) * 1%), calc(var(--TS_C-form__border--Lit) * 1%), .7);
    border-bottom: 1px inset rgba(220, 220, 220, .7);
    border-right: 1px inset rgba(220, 220, 220, .7);
    min-height:3rem;
}

.TS.C-form__field-row.outlined {
    border: 1px solid  hsla(var(--TS_C-form__border--Hue), calc(var(--TS_C-form__border--Sat) * 1%), calc(var(--TS_C-form__border--Lit) * 1%), .7);
}


.TS.C-form__field-row.underlined {
    padding-bottom: 3px;
    border-bottom: 2px solid hsla(var(--TS_C-form__border--Hue), calc(var(--TS_C-form__border--Sat) * 1%), calc(var(--TS_C-form__border--Lit) * 1%), .95);
    box-shadow: 0px 4px 4px -4px rgba(13, 13, 13, 0.8);
}

/****************************************************************************************************
*   THIS WAS WREECKING HAVOC ON THE BODY WIDTH..P ELEMENTS WERE GOING OUTSIDE THERE 
*   DIVS..WHY WAS THIS SET LIKE THIS!
*

.TS.C-form__field-row > span, p {

	display: inline-block;
	margin: 4px;
    width: 98%;
    
    font-size:1rem;

}

******************************************************************************************************/

.TS.C-form__field-row > label {
/*******************************Sizing & Positioning Properties**********************************/
    display: inline;
    width: auto;
    max-width: 100%;
    min-width: 14rem;
    margin: .075rem 0 .125rem;
    padding: 0 .25rem 0 .25rem;
    
/**********************************Visual Styling Properties*************************************/	

    font-family: var(--TS_C-form__label--font-family);
    font-size: 1rem; /* var(--TS_C-form__label--font-size);*/
    letter-spacing: .025rem; /*var(--TS_C-form__label--letter-spacing);*/
    /* align-items: center;*/
    text-shadow: .125rem .075rem .015rem rgba(13, 13, 13, .95);

    /* justify-content: end; */
    height: 1.15rem;
    vertical-align: middle;
    /* display: inline; */
}

.TS.C-form__label--full-width > label {
/*******************************Sizing & Positioning Properties**********************************/
    display: inline-block;
    width: 96%;
    margin: .125rem auto;
    padding: .0875rem .5rem .0875rem .5rem;

/**********************************Visual Styling Properties*************************************/	

    font-family: var(--TS_C-form__label--font-family);
    font-size: var(--TS_C-form__label--font-size);
    letter-spacing: var(--TS_C-form__label--letter-spacing);
    align-items: center;

}

.TS.C-form__field-row > .C-form__textarea {
    min-width: var(--TS_C-form--textarea--min-width);
    max-width: var(--TS_C-form--textarea--max-width);
    width: auto;
    min-height: var(--TS_C-form--textarea--min-height);
    max-height: var(--TS_C-form--textarea--max-height);
    height: auto;
    margin: .25rem 1.5rem .25rem .25rem;
    background: rgba(230, 220, 220, 0.7);
    background: var(--TS_C-form__lcd_input-background);
    padding: 0 0.5rem 0 0.5rem;
}

.TS.C-form__field-row > .C-form__textarea--no-resize {
    width: calc(100% - 1rem);
    margin: .1rem;
    resize:none;

}

.TS.C-form__field-row > .C-form__textarea:focus {
    background: rgba(240, 230, 230, 0.85);
}

.TS.C-form input:focus {
    /*background:none;*/
   
    border-color:  hsl(var(--TS_C-form__border--Hue), calc(var(--TS_C-form__border--Sat) * 1%), 5%);
	/*
    border-top: 1px solid;
    border-left: 1px solid;
    border-bottom: 1px solid;
    border-right: 1px solid;
	border-right: 2px solid rgba(0, 120, 220, 0.8);
    border-left: 2px solid rgba(0, 120, 220, 0.8);
    border-width: 1px, 1px, 1px, 1px;
    border: 1px solid rgba(0, 150, 250, .8);
	*/
	
    /*
    border: hsl(var(--formBorderHue), calc(var(--formBorderSaturation) * 1%), 30%) 2px 3px 3px 2px solid;

    --tempVar: hsl(var(--TS_C-form__input--Hue), calc(var(--TS_C-form__input--Sat) * 1%), calc(var(--TS_C-form__input--Lit) * 1%));
    */

    font-size:1.1rem;
    color: rgba(13, 13, 13, 1);
    /*
    color: hsl(var(--formInputHue), calc(var(--formInputSaturation) * 1%), calc(var(--formInputLightness) * 1%));
    */

}

.TS.C-form input.highlight:focus {	
	box-shadow: 0px 0px 2px 2px rgba(0, 150, 250, 0.8);
}

.TS.C-form input.highlight:focus {
	box-shadow: 0px 0px 1px 1px rgba(0, 150, 250, 0.8);
}

.TS.C-form input.insetHighlight:focus {
    background: rgba(240, 230, 235, 0.75);
    box-shadow: 0px 0px 2px 2px rgba(0, 120, 220, 0.7) inset;
}

.TS.C-form input.sidesHighlight:focus {
	border-right: 3px solid rgba(0, 120, 220, 1); 
	border-left: 3px solid rgba(0, 120, 220, 1); 
}


	/*
	background: rgba(64, 64, 96, .5);
	border: 1px solid rgba(13, 13, 13, .5);
	background: rgba(190, 250, 200, 0.1);
	background: rgba(200, 200, 245, 0.75);
	*/

/*
.TS.C-form__field-row  input[type=text],
.TS.C-form__field-row input[type=password]  {
    background: rgba(190, 210, 250, 0.5);
    border: 1px solid rgba(13, 13, 13, 0.4);
    color: rgba(13, 13, 13, 1);
    font-family: var(--TS_C-form__input-label--font-family);
    line-height:1rem;

    font-size: 0.9rem;
    font-weight: 500;
    margin: 2px 0 0px 0;
    padding: .7rem 0.0rem 0.1rem .7rem;
    outline: none;
    max-width: 60%;
    width: 30rem;
    min-width: 11rem;


    box-shadow: 1px 1px 2px 0px rgba(13, 13, 13, 0.7) inset;
}
*/


.TS.C-form__field-row > input[type=text],
.TS.C-form__field-row > input[type=password] {

    background: rgba(240, 230, 235, 0.5);
    background: rgba(240, 240, 240, 0.2);
    border: 1px solid rgba(13, 13, 13, 0.4);
    color: rgba(13, 13, 13, 1);
    font-family: "Trebuchet MS";
    height: 1.0rem;
    font-family: "Lucida Sans Unicode";
    font-family: Candara;
    /* font-family: calibri; */
    /* font-family: "Segoe UI"; */
    letter-spacing: .025rem;
    font-size: 1.1rem;
    font-weight: 600;
    margin: 2px 0 0px 0;
    padding: 0.25rem 0.0rem 0.4rem .25rem;
    outline: none;
    max-width: 61%;
    width: 30.5rem;
    min-width: 9rem;
    /* max-width: 5; */
    box-shadow: 1px 1px 2px 0px rgba(13, 13, 13, 0.7) inset;

}

/* .TS.C-form__field-row > input[type="text"],
.TS.C-form__field-row > input[type="password"],
.TS.C-form__field-row > input[type="date"],
.TS.C-form__field-row > input[type="number"]  {
    background: rgba(240, 230, 235, 0.5);
    background: rgba(240, 240, 240, 0.2);
    border: .05rem solid rgba(13, 13, 13, 0.4);
    border-bottom-color: rgba(13, 13, 13, 0.4);
    border-bottom-style: solid;
    border-bottom-width: 0.05rem;
    color: rgb(13, 13, 13);
    font-family: "Trebuchet MS";
    height: 1.25rem;
    font-family: "Lucida Sans Unicode";
    font-family: Candara;
    font-family: calibri;
    font-family: "Segoe UI";
    letter-spacing: .025rem;
    font-size: 1.25rem;
    font-weight: 500;
    margin: .25rem .25rem;
    padding: 0.25rem 0.25rem 0.125rem .25rem;
    outline: none;
    max-width: 90%;
    width: calc(67% - .05rem);
    min-width: 9rem;
    box-shadow: .05rem .05rem .125rem .05rem rgba(13, 13, 13, 0.7) inset;
    border-radius: .1rem;
    font-family: Prompt;
    width: auto;

} */

.TS.C-form__field-row > input[type="text"],
.TS.C-form__field-row > input[type="password"],
.TS.C-form__field-row > input[type="date"],
.TS.C-form__field-row > input[type="number"]  {
    background: rgba(240, 230, 235, 0.5);
    background: rgba(240, 240, 240, 0.2);
    border: .05rem solid rgba(13, 13, 13, 0.4);
    border-bottom-color: rgba(13, 13, 13, 0.4);
    border-bottom-style: solid;
    border-bottom-width: 0.05rem;

    color: rgb(13, 13, 13);
    font-family: "Trebuchet MS";
    height: 1.5rem;
    font-family: "Lucida Sans Unicode";
    font-family: Candara;
    font-family: calibri;
    font-family: "Segoe UI";
    letter-spacing: .025rem;
    font-size: 1.1rem;
    font-weight: 500;
    margin: 0.125rem .25rem 0.15rem .25rem;
    padding: 0 0.125rem 0 .125rem;
    outline: none;
    max-width: 90%;
    width: calc(67% - .05rem);
    min-width: 7rem;
    box-shadow: .05rem .05rem .125rem .05rem rgba(13, 13, 13, 0.7) inset;
    border-radius: .1rem;
    font-family: Prompt;
    width: auto;
    background: var(--TS_C-form__lcd_input-background);
    vertical-align: middle;
    width: 10rem;
    line-height: 1.75;
}

#transaction-category-select-element-id,
#transaction-account-select-element-id {
    border: .05rem solid rgba(13, 13, 13, 0.4);
    border-bottom-color: rgba(13, 13, 13, 0.4);
    border-bottom-style: solid;
    border-bottom-width: 0.05rem;
    border-bottom-color: rgba(13, 13, 13, 0.4);
    border-bottom-style: solid;
    border-bottom-width: 0.05rem;
    border-bottom-color: rgba(13, 13, 13, 0.4);
    border-bottom-style: solid;
    border-bottom-width: 0.05rem;
    color: rgb(13, 13, 13);
    font-family: "Trebuchet MS";
    height: 1.5rem;
    font-family: "Lucida Sans Unicode";
    font-family: Candara;
    font-family: calibri;
    font-family: "Segoe UI";
    letter-spacing: .025rem;
    font-size: 1.125rem;
    font-weight: 500;
    /* margin: 0.25rem .25rem 0.15rem .125rem; */
    margin: 0.5rem .25rem 0.35rem .125rem;
    padding: 0 0.125rem 0 .125rem;
    outline: none;
    max-width: 90%;
    width: calc(67% - .05rem);
    min-width: 9rem;
    box-shadow: .05rem .05rem .125rem .05rem rgba(13, 13, 13, 0.7) inset;
    border-radius: .1rem;
    font-family: Prompt;
    width: auto;
    background: var(--TS_C-form__lcd_input-background);
    vertical-align: middle;
    width: 20rem;
}

.TS.C-form__field-row > input[type=text]:focus ,
.TS.C-form__field-row > input[type=password]:focus  {
    
    background: rgba(240, 230, 235, 0.75);
    box-shadow: 0px 0px 1px 1px rgba(0, 120, 220, 0.9) inset;

}

/*
.TS.C-form__field-row label {
	display: inline-block;
	width: 25%;
	text-align: right;
	margin 0 .5rem .125rem .25rem;
}
*/
/*
.row-of-checkboxes
{ 
    display:inline-table;
}
*/
/*
input label .half-width
{
	width: 50%;
	border-right: 1px solid #777777;

}
*/
.TC.C-form .C-form__body input:focus {
    border: .075rem inset rgba(50, 125, 225, .85);
}

.TS.C-form input:disabled {
    color: rgba(100,100, 100,1);
    background: rgba(50,50,50,.9);
}

/*************************************************************************************************
 *  Why was this a style? it's stupid...whats more 'stupid is me not
 *  deleting it & wasting time commenting...maybe someday I'll care enough to 
 *  track down where this stupid call came from...hopefully I have better things todo
*************************************************************************************************

.TS.C-form input:enabled::after {  
    color: var(--TS_C-form__input_color);
    background: var(--TS_C-form__input_background);
    border: 1px solid rgba(0, 220, 0, .75);
    content: "\2731";
} 
 *************************************************************************************************/


.TS.C-form input:optional {
    color: rgba(13, 13, 13, 1);
    background: rgba(185, 190, 195, .7);
}

/*
.TS.C-form__field-row > input[type=text]:valid::after ,
.TS.C-form__field-row > input[type=password]:valid::after,
.TS.C-form input:valid::after {
    font-size: 1.1rem;
    color:rgba(0, 100, 200, .8);
    content: "\2714" " ";

    
  }
*/


.TS.C-form input:empty {
    border-bottom: 1px solid rgba(13, 13, 13, .7);
}

.TS.C-form input:checked {
    border: 1px solid blue;
}
/*
input:valid::after {
   
  
    color: var(--TS_C-form__input_color);
   /* background: var(--TS_C-form__input_background);*/
/*
    border: 1px solid rgba(0, 220, 0, .75);
      content: "\2731";
}
*/

/* Selects any <input>, but only when it has a range
   specified, and its value is inside that range */
.TS.C-form input:in-range {
    border: .0875rem inset rgba(0, 200, 0, 0.15);
    background: rgba(0, 200, 0, 0.15);
}

.TS.C-form input:out-of-range { 
    border: .0875rem inset rgba(225, 0, 0, .35);
    background: rgba(200, 0, 0, .5);
}

.TS.C-form input:required {
    /*
    background: var(--TS_C-form__input_background);
    border: 1px solid rgba(225, 0, 0, .55);
    */
    background:rgba(200, 215, 230, .7);
   
}

  /* Selects any invalid <input> */
.TS.C-form input:invalid {
    border: .075rem inset rgba(200, 0, 0, .8);
}


@media (max-width: 768px) {
  
    .TS.C-form {
        --TS_C-form--min-width: 20rem;
        --TS_C-form--max-width: 96vw;
        --TS_C-form--min-height: 15rem;
        --TS_C-form--max-height: 80vh;
    }
        
    .TS.C-form__field-row > .C-form__textarea {
        --TS_C-form--textarea--min-width: 10rem;
        --TS_C-form--textarea--max-width: 24rem;
        --TS_C-form--textarea--min-height: 1.1rem;
        --TS_C-form--textarea--max-height: 6rem;
    
        /*     min-width: var(--TS_C-form--textarea--min-width); */
        /*     max-width: var(--TS_C-form--textarea--max-width); */
        /*     min-height: var(--TS_C-form--textarea--min-height); */
        /*     max-height: var(--TS_C-form--textarea--max-height); */
    
        margin: .125rem 0.25rem .125rem .125rem;
    } 
        
    .TS.C-form__title-bar {
        height: 1.25rem;
        font-size: .95rem;
        line-height: 1.5;
    }
        
    .TS.C-form__field-row {
        white-space: wrap;
    }
    .TS.C-form__body {
        margin: .075rem; 
        overflow-y: auto;
    }

    .TS.C-form__field-row > label {
        display: inline-block;
        width: auto;
        font-size: .75rem;
        line-height: 1.25;
        min-width: 6rem;
        margin: .25rem 0 .05rem;
        padding: 0 .25rem 0 .25rem;  
        white-space: pre-wrap;
    }
  
}
  

/* Don't use single HTML tag selectors
input:focus {
	/*
	color: #003200;
	background:rgba(100, 125, 110, 0.75);
	box-shadow: 0px 1px 2px 2px rgba(10, 25, 10, 0.75) inset;
	*/

    /*
	background: rgba(200, 200, 245, 0.75);
	box-shadow: 2px 2px 4px 0px rgba(13, 13, 13, 0.7) inset;
}
*/

/**
*                       Left Over Styles
*/

/* .columns {
  column-width: 200px;
  max-width: 800px;
  margin: 0 auto;
}
.grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: 2em;

  grid-gap: .5em;
}
 */