header('Content-type: text/css');
/* 
 * CSS Document 
  transition: max-height 0.3s, padding 0.3s;
  transition: all .35s;
 * https://www.w3schools.com/cssref/index.php
 * https://jqueryui.com/demos/
 * https://www.w3schools.com/cssref/css_selectors.php
 * https://www.w3schools.com/cssref/tryit.php?filename=trycss_cursor
 * https://www.w3.org/WAI/standards-guidelines/aria/
 */
html, body {
  }
html {
  font-size: 16px; /* overrides browser default */
  }
/* 
 * **************
 * SIZE VARIABLES 
 */
:root {
  }
 
/* 
 * *******
 * GENERIC
 */
.c_B ,
.clear_Both ,
.clear {
  clear: both !important;
  }

/* text */
.t-a_L ,
.text-align_Left {
  text-align: left;
  }
.t-a_C ,
.text-align_Center {
  text-align: center;
  }
.t-a_R ,
.text-align_Right {
  text-align: right;
  }
.t-d_N ,
.text-decoration_None {
  text-decoration: none;
  }
.t-d_U ,
.text-decoration_Underline ,
.underline {
  text-decoration: underline;
  }

/* font */
.f-w_B ,
.font-weight_Bold {
  font-weight: bold;
  }

/* position */
.p_A ,
.position_Absolute ,
.absolute {
  position: absolute;
  }
.p_R ,
.position_Relative ,
.relative {
  position: relative;
  }
.p_F ,
.position_Fixed ,
.fixed {
  position: fixed;
  }
.p_S ,
.position_Sticky ,
.sticky {
  position: -webkit-sticky;
  position: sticky;
  left: 0em;
  }
.l_1e ,
.left_1e {
  left: 1em;
  }
.l_2e ,
.left_2e {
  left: 2em;
  }
.l_3e ,
.left_3e {
  left: 3em;
  }
.l_4e ,
.left_4e {
  left: 4em;
  }
.f_R ,
.float_Right {
  float: right;
  }
.f_L ,
.float_Left {
  float: left;
  }
/* z-index */
.z_0 ,
.z-i_105 ,
.z-index_105 {
  z-index: 105;
  }
.z_1 ,
.z-i_100 ,
.z-index_100 {
  z-index: 100;
  }
.z_2 ,
.z-i_095 ,
.z-index_095 {
  z-index: 95;
  }
.z_3 ,
.z-i_090 ,
.z-index_090 {
  z-index: 90;
  }
.z_4 ,
.z-i_085 ,
.z-index_085 {
  z-index: 85;
  }
.z_5 ,
.z-i_080 ,
.z-index_080 {
  z-index: 80;
  }
.z_6 ,
.z-i_075 ,
.z-index_075 {
  z-index: 75;
  }
.z_7 ,
.z-i_070 ,
.z-index_070 {
  z-index: 70;
  }

/* vertical-align */
.v-a_Base ,
.vertical-align_Baseline {
  vertical-align: baseline;
  }
.v-a_Sub ,
.vertical-align_Sub {
  vertical-align: sub;
  }
.v-a_Sup ,
.vertical-align_Super {
  vertical-align: super;
  }
.v-a_T ,
.vertical-align_Top {
  vertical-align: top;
  }
.v-a_TT ,
.vertical-align_TextTop {
  vertical-align: text-top;
  }
.v-a_M ,
.vertical-align_Middle {
  vertical-align: middle;
  }
.v-a_Bot ,
.vertical-align_Bottom {
  vertical-align: bottom;
  }
.v-a_TB ,
.vertical-align_TextBottom {
  vertical-align: text-bottom;
  }

/* cursor */
.c_P ,
.cursor_Pointer {
  cursor: pointer;
  }
.c_G ,
.cursor_Grab {
  cursor: grab;
  }

/* display */
.d_T ,
.display_Table {
  display: table;
  transition: all .35s;
  }
.d_THG ,
.display_TableHeaderGroup {
  display: table-header-group;
  transition: all .35s;
  }
.d_TRG ,
.display_TableRowGroup {
  display: table-row-group;
  transition: all .35s;
  }
.d_TFG ,
.display_TableFooterGroup {
  display: table-footer-group;
  transition: all .35s;
  }
.d_TR ,
.display_TableRow {
  display: table-row;
  transition: all .35s;
  }
.d_TC ,
.display_TableCell {
  display: table-cell;
  transition: all .35s;
  }
.d_TCap ,
.display_TableCaption {
  display: table-caption;
  transition: all .35s;
  }
.d_TCapT ,
.display_TableCaptionTop {
  display: table-caption;
  caption-side: top;
  transition: all .35s;
  }
.d_TCapB ,
.display_TableCaptionBottom {
  display: table-caption;
  caption-side: bottom;
  transition: all .35s;
  }
.c-S_T ,
.caption-side_Top {
  caption-side: top;
  }
.c-S_B ,
.caption-side_Bottom {
  caption-side: bottom;
  }
.d_B ,
.display_Block ,
.block { 
  display: block;
  transition: all .35s;
  }
.d_I ,
.display_Inline ,
.inline { 
  display: inline;
  transition: all .35s;
  }
.d_IB ,
.display_Inline-Block ,
.iblock { 
  display: inline-block;
  transition: all .35s;
  }
.d_F ,
.display_Flex ,
.flex { 
  display: flex; /* -webkit-flex; */
  transition: all .35s;
  }
.d_N ,
.display_None ,
.hidden { 
  display: none;
  transition: all .35s;
  }

/* visibility */
.v_H ,
.visibility_Hidden { 
  visibility: hidden;
  transition: all .35s;
  }
.v_V ,
.visibility_Visible { 
  visibility: visible;
  transition: all .35s;
  }
.flex-1
{
  flex: 1;
  }
/* overflow */
.o_A ,
.overflow_Auto {
  overflow: auto;
  }

/* transform */
.t_R180 ,
.transform_Rotate180 ,
.upsidedown {
  -webkit-transform: rotateX( 180deg );
  transform: rotateX( 180deg );
  }
.t_FG1000 ,
.transition_FlexGrow1000 {
  transition: flex-grow 1000ms linear;
  }

/* backgroud */
.b_T ,
.background_Transparent {
  background: transparent;
  }

/* shadows */
.bx-s_N ,
.box-shadow_None {
  box-shadow: none;
  }
/* shadows
 * box-shadow: none|h-offset v-offset blur spread color |inset|initial|inherit;
 * https://codersblock.com/blog/creating-glow-effects-with-css/
 */
.bx-s_OG ,
.box-shadow_OuterGlow {
  box-shadow: 
  	0em 0em 0.3em 0.3em var(--selected) ,
	0em 0em 0.3em 0.3em var(--black) ;
  }
.bx-s_IG ,
.box-shadow_InnerGlow {
  box-shadow: 0em 0em 0.3em 0.3em var(--selected) inset;
  }
.bx-s_OIG ,
.box-shadow_OuterInnerGlow {
  box-shadow: 
	0em 0em 0.3em 0.3em var(--selected) ,
	0em 0em 0.3em 0.3em var(--selected) inset;
  }
.bx-s_MG ,
.box-shadow_MagentaGlow {
  box-shadow: 
	inset 0 0 3.125em #fff,      /* inner white */
	inset 1.25em 0 5em #f0f,   /* inner left magenta short */
	inset -1.25em 0 5em #0ff,  /* inner right cyan short */
	inset 1.25em 0 18.75em #f0f,  /* inner left magenta broad */
	inset -1.25em 0 18.75em #0ff, /* inner right cyan broad */
	0 0 3.125em #fff,            /* outer white */
	-0.625em 0 5em #f0f,        /* outer left magenta */
	0.625em 0 5em #0ff;         /* outer right cyan */
  }

/* max-height */
.m-h_100vh ,
.max-height_100vh {
  max-height: 100vh;
  }
.m-h_95vh ,
.max-height_95vh {
  max-height: 95vh;
  }
.m-h_90vh ,
.max-height_90vh {
  max-height: 90vh;
  }
.m-h_85vh ,
.max-height_85vh {
  max-height: 85vh;
  }
.m-h_80vh ,
.max-height_80vh {
  max-height: 80vh;
  }

/* width */
.w_99 ,
.width_99 ,
.full {
  width: 99%;
  }
.w_66 ,
.w_2/3 ,
.width_66 ,
.sixty {
  width: 66%;
  }
.w_49 ,
.w_1/2 ,
.width_49 ,
.fifty {
  width: 49%;
  }
.w_33 ,
.w_1/3 ,
.width_33 ,
.thirty {
  width: 33%;
  }
.w_A ,
.width_auto ,
.auto {
  width: auto;
  }
.w_20e ,
.width_20e {
  width: 20em;
  }
.w_30e ,
.width_30e {
  width: 30em;
  }
.w_40e ,
.width_40e {
  width: 40em;
  }
.w_50e ,
.width_50e {
  width: 50em;
  }
/* margin */
.m-l_1e ,
.margin-left_1e {
  margin-left: 1em;
  }
.m-l_2e ,
.margin-left_2e {
  margin-left: 2em;
  }
.m-l_3e ,
.margin-left_3e {
  margin-left: 3em;
  }

/* border */
.b-s_Dot ,
.border-style_Dotted ,
.dotted {
  border-style: dotted;
  }
.b-s_Dah ,
.border-style_Dashed ,
.dashed {
  border-style: dashed;
  }
.b-s_Sol ,
.border-style_Solid ,
.solid {
  border-style: solid;
  }
.b-s_Dob ,
.border-style_Double ,
.double {
  border-style: double;
  }
.b-s_Gro ,
.border-style_Groove ,
.groove {
  border-style: groove;
  }
.b-s_Rid ,
.border-style_Ridge ,
.ridge {
  border-style: ridge;
  }
.b-s_Ins ,
.border-style_Inset ,
.inset {
  border-style: inset;
  }
.b-s_Out ,
.border-style_Outset ,
.outset {
  border-style: outset;
  }
.b-s_N ,
.border-style_None ,
.none {
  border-style: none;
  }
.b-s_Hid ,
.border-style_Hidden {
  border-style: hidden;
  }
.b-w_01 ,
.b-w_01/10 ,
.border-width_01em {
  border-width: 0.1em;
  }
.b-w_02 ,
.b-w_02/10 ,
.border-width_02em {
  border-width: 0.2em;
  }
.b-w_03 ,
.b-w_03/10 ,
.border-width_03em {
  border-width: 0.3em;
  }
.b-w_04 ,
.b-w_04/10 ,
.border-width_04em {
  border-width: 0.4em;
  }

/*font*/
.f-s_16 ,
.f-s_16/10 ,
.font-size_16em ,
.font_16 {
  font-size: 1.6em;
  line-height: 2.0em;
  }
.f-s_14 ,
.f-s_14/10 ,
.font-size_14em ,
.font_14 {
  font-size: 1.4em;
  line-height: 1.75em;/* 1.8 */
  }
.f-s_12 ,
.f-s_12/10 ,
.font-size_12em ,
.font_12 {
  font-size: 1.2em;
  line-height: 1.5em;/* 1.6 */
  }
.f-s_10 ,
.f-s_10/10 ,
.font-size_10em ,
.font_10 {
  font-size: 1.0em;
  line-height: 1.25em;/* 1.3 */
  }
.f-s_09 ,
.f-s_09/10 ,
.font-size_09em ,
.font-09 {
  font-size: 0.9em;
  line-height: 1.125em; /* 1.3 */
  }
.f-s_08 ,
.f-s_08/10 ,
.font-size_08em ,
.font_08 {
  font-size: 0.8em;
  line-height: 1.0em; /* 1.2 */
  }
.f-s_07 ,
.f-s_07/10 ,
.font-size_07em ,
.font_07 {
  font-size: 0.7em;
  line-height: 0.875em; /* 1.1 */
  }

/*dashboard*/
.dashboard {
    margin: 0.5em;
    display: flex;
    flex-direction: column; /* stack label on top of form */
    align-items: center;    /* center horizontally */
    background: none;       /* no background */
    border: none;           /* no border */
}

.dashboard label {
    font-size: 1em;
    font-weight: 700;
    text-transform: uppercase;
    margin-bottom: 0.25em; /* spacing above input */
    text-align: center;
	line-height: 1;               /* prevent line-height expansion */
	
}

.dashboard form {
    margin: 0;
    background: none;
    border: none;
}

.dashboard input[type="submit"] {
    height: 3em;
    width: 3em;
    font-size: 3em;
    font-weight: 700;
    line-height: 2em;               /* prevent line-height expansion */
    text-transform: uppercase;

    border: var(--buttonDarker) solid 0.125em;
    border-radius: 0.25em;
    background-color: var(--selectedLight);
    cursor: pointer;

    padding: 0;                   /* remove default input padding */
    box-sizing: border-box;        /* include border/padding in height/width */
    vertical-align: middle;        /* enforce vertical alignment */
    text-align: center;            /* center text horizontally */

    /* fallback centering for browsers ignoring flex on input */
    display: inline-block;
}