/*======================*
   Custom "components"
   A supplement to sytntax styles to expand UI tools
   Applied based on element class or attibute.
 *======================*/
 
 
/*======================*
   css component: list-horiz-scroll
 *======================*/


.list-horiz-scroll {
  list-style-type:none;
  margin: 0;
  display: flex;
  justify-content: left;
  align-items: stretch;
  scroll-behavior:smooth;
  overscroll-behavior: none;
  overflow:hidden;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding:16px;
}
.list-horiz-scroll::-webkit-scrollbar {height: 0px;display: none;}
.list-horiz-scroll::-webkit-scrollbar-thumb {background-color: transparent;}
.list-horiz-scroll {-ms-overflow-style: -ms-autohiding-scrollbar;}
.list-horiz-scroll {-ms-overflow-style: none;}
/*
.list-horiz-scroll:after {
  content:'';
  display:block;
  height:16px;
  flex-basis: auto;
  flex-grow: 0;
  flex-shrink: 0;
  order:1000;
}
*/
.list-horiz-scroll{
  position:relative;
}
.list-horiz-scroll:after,
.list-horiz-scroll:before {
  z-index:1000;
  display:block;
  position:sticky;
  background-color:rgba(0,0,0,0.3);
  top:50%;bottom:0;
  margin:-1.5em 0;
  width: 2.6em;
  height: 2.6em;
  min-width: 2.6em;
  min-height: 2.6em;
  line-height:1.7em;
  border-radius:50%;
  color:white;
  text-align:center;
  font-weight:500;
  border:solid 0.5em transparent;
  background-clip:content-box; 
  cursor:pointer;
  content:'\2190';
  left:0;right:auto;
  font-size:24px;
  /* spread nav to edge */
  position:fixed;
  margin-top:6rem;
  top:auto;
  bottom:auto;
}
.list-horiz-scroll:not(.nonav):before{
  content:'\2190';
}
.list-horiz-scroll:not(.nonav):after{
  content:'\2192';
  left:auto;right:0;
}
.list-horiz-scroll.nav-thm:not(.nonav):after,
.list-horiz-scroll.nav-thm:not(.nonav):before{
  background-color:var(--clr-thm,rgba(0,0,0,0.3));
}
.list-horiz-scroll.even-space > * {
  margin-left:16px;
}
.list-horiz-scroll > :first-child {
  margin-left:0;
}
.list-horiz-scroll > .first {
  order:0;
  margin-left:0;
}
.list-horiz-scroll.tease-three > * {
  flex-basis: 40%;
}
.list-horiz-scroll.tease-none > * {
  flex-basis: 100%;
  max-width:480px;
}
.list-horiz-scroll.tease-one > * {
  flex-basis: 88%;
  max-width:300px;
}
/*
.list-horiz-scroll.tease-one:after {
  flex-basis: 12%;
  margin-left:16px;
}
*/
.list-horiz-scroll > a:nth-child(n),
.list-horiz-scroll > li:nth-child(n) {
  -border: none;
  -border: solid 1px #ddd;
}
  
  
.edge.list-horiz-scroll { 
  padding: 0 calc(50vw - 50%);
  margin: 0 calc(50% - 50vw);
}
.list-horiz-scroll > :first-child {
  margin-left:1.5em;
}
.list-horiz-scroll > :last-child {
  margin-right:1.5em;
}
/*
.edge.list-horiz-scroll:after {
  flex-basis: calc(50vw - 50%);
}
*/
/* 
.edge.list-horiz-scroll .first {margin-right:8px;}
*/

/* 480px max-width card scroll */

/*.edge.list-horiz-scroll     { scroll-padding-left: calc(50vw - 224px); }*/
.edge.list-horiz-scroll > * { scroll-margin-left: 16px; }
@media(max-width:480px){
  edge.list-horiz-scroll    { scroll-padding-left: 0; }
}




.ui-scrollsnapstop > * { display:none; }
.ui-scrollsnapstop > .next,
.ui-scrollsnapstop > .previous,
.ui-scrollsnapstop > .active,
.ui-scrollsnapstop > .active + * { display:block; }


.ui-scrollslider {
  scroll-padding:0;
}
.ui-scrollslider + nav {
  line-height:1;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}
.ui-scrollslider + nav > * {
  padding:4px 4px;
  color:inherit;
  flex-grow: 0;
  flex-shrink: 0;
  min-width: 24px;
  text-align:center;
  border-color: inherit;
}
.ui-scrollslider + nav > :after {
  content:'';
  border-radius:50%;
  display:inline-block;
  border: solid 0.375em;
  border-color: inherit;
  box-sizing: border-box;
}
.ui-scrollslider + nav > .active {border-color:currentColor;}

.ui-scrollslider + nav.nav-lines {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}
.ui-scrollslider + nav.nav-lines > * {
  flex-grow: 1;
  flex-shrink: 1;
  max-width: 3.5rem;
}
.ui-scrollslider + nav.nav-lines > :after {
  border-radius:0;
  height:0;
  width:auto;
  border: solid 0.125em;
  border-radius: 0.125em;
  border-color: inherit;
  display:block;
}


/*==================*
   css component: list tree
 *==================*/
 
/* example: <ul class="list-tree"><li>first of the list today<li>second good</ul> */

.list-tree {
  list-style-type:none;
  margin-top:4px;
  margin-bottom: 0.125em;
  color:#999;
  font-size:1rem;
  line-height:1em;
}
.list-tree > * {
  position:relative;
  padding-left:1.125em;
  font-size:0.750em;
  margin:0;
  font-weight:500;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  
}
.list-tree > *:before {
  content:'\251c';
  position:absolute;
  top:0;left:0;width:0.8em;
  font-size:1.5em;
  line-height:1;
  margin:-0.125em 0;
  font-family: monospace;
  -webkit-font-smoothing:antialiased;
  
}
.list-tree > *:last-child:before {
  content:'\2514';
}


/*==================*
   css component: range chart
 *==================*/
 
/* example: <div data-chart="range" data-max="10" data-min="0" class="max3 mgna"><hr class="half"></div> */
 
.chart-range {
  position:relative;
  margin:1em 0 1em;
  border:solid 1px #999;
  border-style:none solid dashed;
  overflow:visible;
}
.chart-range hr {
  margin-bottom: -6px;
  height: 11px;
  background: #eee;
  border: solid 1px #999;
}
.chart-range hr.recommended {
  background: #d4f9f9;
  border-color:darkturquoise;
}
.chart-range hr.warning {
  background: #fcc;
  border-color:red;
}
.chart-range[data-min]:before,
.chart-range[data-max]:after {
  font-size:0.625em;
  line-height:1;
  position:absolute;
  top:auto;
  bottom:100%;
  font-weight:400;
  color:#999;
  margin-bottom:4px;
}
.chart-range[data-max]:before {content:attr(data-min);left: 0;margin-left: -2px;}
.chart-range[data-max]:after  {content:attr(data-max);right:0;margin-right:-10px;}





/*======================*
   component: form-interview
 *======================*/


.form-interview {
  overflow:hidden;
  height:100%;
  position:absolute;
  top:0;left:0;right:0;bottom:0;
  min-height:500px; /* iphone SE vertical dimension - header height. Required for form scrolling issues (less top 20px) */
}
.form-interview fieldset {
  left:120%;
  position:absolute;
  top:0;
  height:100%;
  width:100%;
  background:white;
  min-width: 0;
  will-change:transform;
  transform:translateX(0);
  transition:left 0ms linear 700ms;
  
  animation:ui-slideout 700ms 1 none ease-out;
  z-index:1;
  
}
.flex-col > .form-interview {
  position:relative;
  flex-grow: 1;
  flex-shrink: 1;
  min-height:0;
}
.flex-col > .form-interview fieldset {
  overflow-y:auto;
}
.flex-col > .form-interview fieldset[data-scrolled="1"] {
  box-shadow: inset 0px 0px 6px rgba(0,0,0,0.15);
}

.form-interview fieldset.active {
  left:0;
  transition:left 0ms linear 0ms;
  animation:ui-slidein 700ms 1 none ease-out;
  z-index:2;
}
.form-interview fieldset.active:first-child {
  animation:none;
}

.form-interview.reverse fieldset {
  animation:ui-slideout-reverse 700ms 1 none ease-out;
  z-index:1;
}
.form-interview.reverse fieldset.active {
  animation:ui-slidein-reverse 700ms 1 none ease-out;
  z-index:1;
}



.form-interview.fadein fieldset {
  animation:none;
  transition:left 0ms linear 500ms;
  z-index:1;
  transform:translateX(0%);
}
.form-interview.fadein fieldset.active {
  animation:ui-fadein 250ms 1 none ease-out;
  transition:none;
  z-index:2;
  transform:translateX(0%);
}
.form-interview.fadein fieldset.active:first-child {
  animation:none;
}
.form-interview.fadein.reverse fieldset {
  animation:none;
}
.form-interview.fadein.reverse fieldset.active {
  animation:ui-fadein 250ms 1 none ease-out;
}



.form-interview h1 {
  font-size:1.375rem;
  line-height: 1.5rem;
  min-height: 3rem;
}


.form-interview fieldset input {
  caret-color:transparent;
  transition:none;
}
.form-interview fieldset.active input {
  transition:caret-color 0s linear 800ms;
  caret-color:auto;
}

.form-interview input,
.form-interview select {
  padding-left:0;
}
.form-interview input + [data-ui-input-icon] {
  width: 1.0em;
  margin:0 0 0 -1.0em;
}
.form-interview input:not(:valid) + [data-ui-input-icon="show-password"] {
  margin:0 0 0 -1.0em;
}
.form-interview ::-webkit-input-placeholder {font-family:inherit;font-size:inherit;color:#000;}
.form-interview ::-ms-input-placeholder {font-family:inherit;font-size:inherit;color:#000;}
.form-interview ::-moz-placeholder {font-family:inherit;font-size:inherit;color:#000;}

.form-interview button.block {
  margin:0 -4px;
}


@keyframes ui-fadein {
  0%   { opacity: 0.0; }
  100% { opacity: 1.0; }
}
@keyframes ui-slidein {
  0%   { opacity: 1.0;transform:translateX( 100%); }
  100% { opacity: 1.0;transform:translateX(   0%); }
}
@keyframes ui-slideout {
  0%   { opacity: 1.0;transform:translateX(   0%); }
  100% { opacity: 0.0;transform:translateX( -20%); }
}
@keyframes ui-slidein-reverse {
  0%   { opacity: 0.0;transform:translateX( -20%); }
  100% { opacity: 1.0;transform:translateX(   0%); }
}
@keyframes ui-slideout-reverse {
  0%   { opacity: 1.0;transform:translateX(   0%); }
  100% { opacity: 1.0;transform:translateX( 100%); }
}
@keyframes ui-caret-slidein {
  0%   { caret-color:transparent; }
  99%  { caret-color:transparent; }
  100% { caret-color:auto; }
}