@font-face {
  font-family: 'Material Symbols Rounded';
  font-style: normal;

  /* Can be font-weight: number;   or   font-weight: number number; */
  font-weight: 100 700;

  src: url(../fonts/MaterialSymbolsRounded[FILL,GRAD,opsz,wght].woff2) format('woff2');
}

.material-symbols-rounded {
  font-family: 'Material Symbols Rounded';
  /* Use either "single weight" or "range of weights", don't use both */
  font-weight: normal;
  font-style: normal;
  font-size: 1.5em;  /* Preferred icon size */
  display: inline-block;
  line-height: 1;
  text-transform: none;
  letter-spacing: normal;
  word-wrap: normal;
  white-space: nowrap;
  direction: ltr;
}

.pulse {
    animation: pulse 3s infinite;
}

@keyframes pulse {
    0%   { font-variation-settings: 'wght' 100; }
    50%  { font-variation-settings: 'wght' 700; }
    100% { font-variation-settings: 'wght' 100; }
}

/* Include the padding and border in every element total width and height */
/* Basically, seems to make them all behave like boxes at the width they are specified at */
* {
  box-sizing: border-box;
}

/* Possible way to have the page size constrained to the browser window size */
html {
  height: 100%;
  width: 100%;
  position: fixed;
  margin: 0;
  font-size: 16px;
}

body {
  --thm-m3-baseline-on: 0;
  --thm-m3-indigo-on: 0;
  --thm-m3-blue-on: 0;
  --thm-m3-teal-on: 0;
  --thm-m3-green-on: 0;
  --thm-m3-yellow-on: 0;
  --thm-m3-orange-on: 0;
  --thm-m3-deep-orange-on: 0;
  --thm-m3-pink-on: 0;
  
  --thm-m3-leaves-on: 0;
  --thm-m3-peonies-on: 0;
  --thm-m3-bubbles-on: 0;
  --thm-m3-seaweed-on: 0;
  --thm-m3-sea-grapes-on: 0;
  --thm-m3-petals-on: 0;
  
  --sigma: 1;
  --sigma-shft: calc( 1/(1.0403*pow( var(--sigma), 0.6221 ) ) );  /* Standard cumulative distribution function numbers shifted to 1/exp representation */
  --sigma-exp: calc( 0.642*pow( var(--sigma), 0.2671 ) ); /* Exponential multiplier for curve fitting */
  
  --satur-m-c: 1.017046705815918;
  --satur-m-x: -0.0025002449864380883;
  --satur-m-xx: 0.000028777428978412724;
  --satur-m-xxx: -5.773107271351712e-8;
  --satur-m-xxy: 0.000001670940682416321;
  --satur-m-xy: -0.0017727718862180762;
  --satur-m-xyy: 0.0002674999455034483;
  --satur-m-y: -1.0931290914482517;
  --satur-m-yy: 0.5118116966829107;
  --satur-m-yyy: -0.05912979170832077;
  
  --lghtn-m-c: -0.6793821987837597;
  --lghtn-m-x: 0.00013893772965351773;
  --lghtn-m-xx: -2.777467151818961e-7;
  --lghtn-m-xxx: 6.629177817894643e-9;
  --lghtn-m-xxy: -0.0000028836163801016917;
  --lghtn-m-xy: 0.00041847035703415473;
  --lghtn-m-xyy: 0.00011398178884948646;
  --lghtn-m-y: 1.2787867711868737;
  --lghtn-m-yy: -0.5297481260477579;
  --lghtn-m-yyy: 0.07282014579671127;
  
  --hue: 256;
  --hue-link: calc( ( var( --hue ) + 125 ) / 1.5 );
  --hue-link-visit: calc( var( --hue-link ) + 40 );

  /* Calculations for saturations and lightness using multipliers on the base values rather than direct calculation */
  --hue-pct:  calc( var( --hue ) / 360.0 );
  --hue-pct2: calc( var( --hue-pct ) * var( --hue-pct ) );
  --hue-pct3: calc( var( --hue-pct2 ) * var( --hue-pct ) );
  
  --satur: 75;
  --lghtn: 50;
  
  --y-fnt:  5;
  --y-fnt2: calc( var( --y-fnt ) * var( --y-fnt ) );
  --y-fnt3: calc( var( --y-fnt2 ) * var( --y-fnt ) );
  
  --hue-pct-y-fnt:  calc( var( --hue-pct ) * var( --y-fnt ) );
  --hue-pct-y-fnt2: calc( var( --hue-pct ) * var( --y-fnt2 ) );
  --hue-pct2-y-fnt: calc( var( --hue-pct2 ) * var( --y-fnt ) );
  
  --satur-m-fnt: calc( var( --satur-m-c ) +
                       var( --hue-pct ) * var( --satur-m-x ) + var( --hue-pct2 ) * var( --satur-m-xx ) + var( --hue-pct3 ) * var( --satur-m-xxx ) +
                       var( --y-fnt ) * var( --satur-m-y ) + var( --y-fnt2 ) * var( --satur-m-yy) + var( --y-fnt3 ) * var( --satur-m-yyy ) +
                       var( --hue-pct-y-fnt ) * var( --satur-m-xy ) + var( --hue-pct-y-fnt2 ) * var( --satur-m-xyy) + var( --hue-pct2-y-fnt ) * var( --satur-m-xxy ) );
  
  --satur-fnt-mult: calc( var( --satur ) * var( --satur-m-fnt ) );
  --satur-fnt-norm: calc( ( var( --satur-fnt-mult ) - 50 )/50 );
  --satur-fnt-abs:  calc( max( var(--satur-fnt-norm), -1 * var(--satur-fnt-norm) ) );
  --satur-fnt-sign: calc( clamp( -1, var(--satur-fnt-norm)*10000, 1 ) );
  --satur-fnt-pow: calc( pow( var( --satur-fnt-abs ), var(--sigma-exp) ) );
  --satur-fnt-sigma: calc( 1 - ( 1 / ( exp( var(--sigma-shft) * var( --satur-fnt-pow ) ) ) ) );
  --satur-fnt-pre-pct: calc( round( 50 * ( 1 + ( var( --satur-fnt-sign ) * var( --satur-fnt-sigma ) ) ) ) );
  --satur-fnt: calc( var(--satur-fnt-pre-pct) * 1% );
  
  --lghtn-m-fnt: calc( var( --lghtn-m-c ) +
                       var( --hue-pct ) * var( --lghtn-m-x ) + var( --hue-pct2 ) * var( --lghtn-m-xx ) + var( --hue-pct3 ) * var( --lghtn-m-xxx ) +
                       var( --y-fnt ) * var( --lghtn-m-y ) + var( --y-fnt2 ) * var( --lghtn-m-yy) + var( --y-fnt3 ) * var( --lghtn-m-yyy ) +
                       var( --hue-pct-y-fnt ) * var( --lghtn-m-xy ) + var( --hue-pct-y-fnt2 ) * var( --lghtn-m-xyy) + var( --hue-pct2-y-fnt ) * var( --lghtn-m-xxy ) );
  
  --lghtn-fnt-mult: calc( var( --lghtn ) * var( --lghtn-m-fnt ) );
  --lghtn-fnt-norm: calc( ( var( --lghtn-fnt-mult ) - 50 )/50 );
  --lghtn-fnt-abs:  calc( max( var(--lghtn-fnt-norm), -1 * var(--lghtn-fnt-norm) ) );
  --lghtn-fnt-sign: calc( clamp( -1, var(--lghtn-fnt-norm)*10000, 1 ) );
  --lghtn-fnt-pow: calc( pow( var( --lghtn-fnt-abs ), var(--sigma-exp) ) );
  --lghtn-fnt-sigma: calc( 1 - ( 1 / ( exp( var(--sigma-shft) * var( --lghtn-fnt-pow ) ) ) ) );
  --lghtn-fnt-pre-pct: calc( round( 50 * ( 1 + ( var( --lghtn-fnt-sign ) * var( --lghtn-fnt-sigma ) ) ) ) );
  --lghtn-fnt: calc( var(--lghtn-fnt-pre-pct) * 1% );
  
  --y-prm:  4;
  --y-prm2: calc( var( --y-prm ) * var( --y-prm ) );
  --y-prm3: calc( var( --y-prm2 ) * var( --y-prm ) );
  
  --hue-pct-y-prm:  calc( var( --hue-pct ) * var( --y-prm ) );
  --hue-pct-y-prm2: calc( var( --hue-pct ) * var( --y-prm2 ) );
  --hue-pct2-y-prm: calc( var( --hue-pct2 ) * var( --y-prm ) );
  
  --satur-m-prm: calc( var( --satur-m-c ) +
                       var( --hue-pct ) * var( --satur-m-x ) + var( --hue-pct2 ) * var( --satur-m-xx ) + var( --hue-pct3 ) * var( --satur-m-xxx ) +
                       var( --y-prm ) * var( --satur-m-y ) + var( --y-prm2 ) * var( --satur-m-yy) + var( --y-prm3 ) * var( --satur-m-yyy ) +
                       var( --hue-pct-y-prm ) * var( --satur-m-xy ) + var( --hue-pct-y-prm2 ) * var( --satur-m-xyy) + var( --hue-pct2-y-prm ) * var( --satur-m-xxy ) );
                       
  --satur-prm-mult: calc( var( --satur ) * var( --satur-m-prm ) );
  --satur-prm-norm: calc( ( var( --satur-prm-mult ) - 50 )/50 );
  --satur-prm-abs:  calc( max( var(--satur-prm-norm), -1 * var(--satur-prm-norm) ) );
  --satur-prm-sign: calc( clamp( -1, var(--satur-prm-norm)*10000, 1 ) );
  --satur-prm-pow: calc( pow( var( --satur-prm-abs ), var(--sigma-exp) ) );
  --satur-prm-sigma: calc( 1 - ( 1 / ( exp( var(--sigma-shft) * var( --satur-prm-pow ) ) ) ) );
  --satur-prm-pre-pct: calc( round( 50 * ( 1 + ( var( --satur-prm-sign ) * var( --satur-prm-sigma ) ) ) ) );
  --satur-prm: calc( var(--satur-prm-pre-pct) * 1% );
  
  --lghtn-m-prm: calc( var( --lghtn-m-c ) +
                       var( --hue-pct ) * var( --lghtn-m-x ) + var( --hue-pct2 ) * var( --lghtn-m-xx ) + var( --hue-pct3 ) * var( --lghtn-m-xxx ) +
                       var( --y-prm ) * var( --lghtn-m-y ) + var( --y-prm2 ) * var( --lghtn-m-yy) + var( --y-prm3 ) * var( --lghtn-m-yyy ) +
                       var( --hue-pct-y-prm ) * var( --lghtn-m-xy ) + var( --hue-pct-y-prm2 ) * var( --lghtn-m-xyy) + var( --hue-pct2-y-prm ) * var( --lghtn-m-xxy ) );
                       
  --lghtn-prm-mult: calc( var( --lghtn ) * var( --lghtn-m-prm ) );
  --lghtn-prm-norm: calc( ( var( --lghtn-prm-mult ) - 50 )/50 );
  --lghtn-prm-abs:  calc( max( var(--lghtn-prm-norm), -1 * var(--lghtn-prm-norm) ) );
  --lghtn-prm-sign: calc( clamp( -1, var(--lghtn-prm-norm)*10000, 1 ) );
  --lghtn-prm-pow: calc( pow( var( --lghtn-prm-abs ), var(--sigma-exp) ) );
  --lghtn-prm-sigma: calc( 1 - ( 1 / ( exp( var(--sigma-shft) * var( --lghtn-prm-pow ) ) ) ) );
  --lghtn-prm-pre-pct: calc( round( 50 * ( 1 + ( var( --lghtn-prm-sign ) * var( --lghtn-prm-sigma ) ) ) ) );
  --lghtn-prm: calc( var(--lghtn-prm-pre-pct) * 1% );
  
  --y-hvr:  3;
  --y-hvr2: calc( var( --y-hvr ) * var( --y-hvr ) );
  --y-hvr3: calc( var( --y-hvr2 ) * var( --y-hvr ) );
  
  --hue-pct-y-hvr:  calc( var( --hue-pct ) * var( --y-hvr ) );
  --hue-pct-y-hvr2: calc( var( --hue-pct ) * var( --y-hvr2 ) );
  --hue-pct2-y-hvr: calc( var( --hue-pct2 ) * var( --y-hvr ) );
  
  --satur-m-hvr: calc( var( --satur-m-c ) +
                       var( --hue-pct ) * var( --satur-m-x ) + var( --hue-pct2 ) * var( --satur-m-xx ) + var( --hue-pct3 ) * var( --satur-m-xxx ) +
                       var( --y-hvr ) * var( --satur-m-y ) + var( --y-hvr2 ) * var( --satur-m-yy) + var( --y-hvr3 ) * var( --satur-m-yyy ) +
                       var( --hue-pct-y-hvr ) * var( --satur-m-xy ) + var( --hue-pct-y-hvr2 ) * var( --satur-m-xyy) + var( --hue-pct2-y-hvr ) * var( --satur-m-xxy ) );
  
  --satur-hvr-mult: calc( var( --satur ) * var( --satur-m-hvr ) );
  --satur-hvr-norm: calc( ( var( --satur-hvr-mult ) - 50 )/50 );
  --satur-hvr-abs:  calc( max( var(--satur-hvr-norm), -1 * var(--satur-hvr-norm) ) );
  --satur-hvr-sign: calc( clamp( -1, var(--satur-hvr-norm)*10000, 1 ) );
  --satur-hvr-pow: calc( pow( var( --satur-hvr-abs ), var(--sigma-exp) ) );
  --satur-hvr-sigma: calc( 1 - ( 1 / ( exp( var(--sigma-shft) * var( --satur-hvr-pow ) ) ) ) );
  --satur-hvr-pre-pct: calc( round( 50 * ( 1 + ( var( --satur-hvr-sign ) * var( --satur-hvr-sigma ) ) ) ) );
  --satur-hvr: calc( var(--satur-hvr-pre-pct) * 1% );
  
  --lghtn-m-hvr: calc( var( --lghtn-m-c ) +
                       var( --hue-pct ) * var( --lghtn-m-x ) + var( --hue-pct2 ) * var( --lghtn-m-xx ) + var( --hue-pct3 ) * var( --lghtn-m-xxx ) +
                       var( --y-hvr ) * var( --lghtn-m-y ) + var( --y-hvr2 ) * var( --lghtn-m-yy) + var( --y-hvr3 ) * var( --lghtn-m-yyy ) +
                       var( --hue-pct-y-hvr ) * var( --lghtn-m-xy ) + var( --hue-pct-y-hvr2 ) * var( --lghtn-m-xyy) + var( --hue-pct2-y-hvr ) * var( --lghtn-m-xxy ) );
  
  --lghtn-hvr-mult: calc( var( --lghtn ) * var( --lghtn-m-hvr ) );
  --lghtn-hvr-norm: calc( ( var( --lghtn-hvr-mult ) - 50 )/50 );
  --lghtn-hvr-abs:  calc( max( var(--lghtn-hvr-norm), -1 * var(--lghtn-hvr-norm) ) );
  --lghtn-hvr-sign: calc( clamp( -1, var(--lghtn-hvr-norm)*10000, 1 ) );
  --lghtn-hvr-pow: calc( pow( var( --lghtn-hvr-abs ), var(--sigma-exp) ) );
  --lghtn-hvr-sigma: calc( 1 - ( 1 / ( exp( var(--sigma-shft) * var( --lghtn-hvr-pow ) ) ) ) );
  --lghtn-hvr-pre-pct: calc( round( 50 * ( 1 + ( var( --lghtn-hvr-sign ) * var( --lghtn-hvr-sigma ) ) ) ) );
  --lghtn-hvr: calc( var(--lghtn-hvr-pre-pct) * 1% );
  
  --y-ifc:  2;
  --y-ifc2: calc( var( --y-ifc ) * var( --y-ifc ) );
  --y-ifc3: calc( var( --y-ifc2 ) * var( --y-ifc ) );
  
  --hue-pct-y-ifc:  calc( var( --hue-pct ) * var( --y-ifc ) );
  --hue-pct-y-ifc2: calc( var( --hue-pct ) * var( --y-ifc2 ) );
  --hue-pct2-y-ifc: calc( var( --hue-pct2 ) * var( --y-ifc ) );
  
  --satur-m-ifc: calc( var( --satur-m-c ) +
                       var( --hue-pct ) * var( --satur-m-x ) + var( --hue-pct2 ) * var( --satur-m-xx ) + var( --hue-pct3 ) * var( --satur-m-xxx ) +
                       var( --y-ifc ) * var( --satur-m-y ) + var( --y-ifc2 ) * var( --satur-m-yy) + var( --y-ifc3 ) * var( --satur-m-yyy ) +
                       var( --hue-pct-y-ifc ) * var( --satur-m-xy ) + var( --hue-pct-y-ifc2 ) * var( --satur-m-xyy) + var( --hue-pct2-y-ifc ) * var( --satur-m-xxy ) );
  
  --satur-ifc-mult: calc( var( --satur ) * var( --satur-m-ifc ) );
  --satur-ifc-norm: calc( ( var( --satur-ifc-mult ) - 50 )/50 );
  --satur-ifc-abs:  calc( max( var(--satur-ifc-norm), -1 * var(--satur-ifc-norm) ) );
  --satur-ifc-sign: calc( clamp( -1, var(--satur-ifc-norm)*10000, 1 ) );
  --satur-ifc-pow: calc( pow( var( --satur-ifc-abs ), var(--sigma-exp) ) );
  --satur-ifc-sigma: calc( 1 - ( 1 / ( exp( var(--sigma-shft) * var( --satur-ifc-pow ) ) ) ) );
  --satur-ifc-pre-pct: calc( round( 50 * ( 1 + ( var( --satur-ifc-sign ) * var( --satur-ifc-sigma ) ) ) ) );
  --satur-ifc: calc( var(--satur-ifc-pre-pct) * 1% );
  
  --lghtn-m-ifc: calc( var( --lghtn-m-c ) +
                       var( --hue-pct ) * var( --lghtn-m-x ) + var( --hue-pct2 ) * var( --lghtn-m-xx ) + var( --hue-pct3 ) * var( --lghtn-m-xxx ) +
                       var( --y-ifc ) * var( --lghtn-m-y ) + var( --y-ifc2 ) * var( --lghtn-m-yy) + var( --y-ifc3 ) * var( --lghtn-m-yyy ) +
                       var( --hue-pct-y-ifc ) * var( --lghtn-m-xy ) + var( --hue-pct-y-ifc2 ) * var( --lghtn-m-xyy) + var( --hue-pct2-y-ifc ) * var( --lghtn-m-xxy ) );
  
  --lghtn-ifc-mult: calc( var( --lghtn ) * var( --lghtn-m-ifc ) );
  --lghtn-ifc-norm: calc( ( var( --lghtn-ifc-mult ) - 50 )/50 );
  --lghtn-ifc-abs:  calc( max( var(--lghtn-ifc-norm), -1 * var(--lghtn-ifc-norm) ) );
  --lghtn-ifc-sign: calc( clamp( -1, var(--lghtn-ifc-norm)*10000, 1 ) );
  --lghtn-ifc-pow: calc( pow( var( --lghtn-ifc-abs ), var(--sigma-exp) ) );
  --lghtn-ifc-sigma: calc( 1 - ( 1 / ( exp( var(--sigma-shft) * var( --lghtn-ifc-pow ) ) ) ) );
  --lghtn-ifc-pre-pct: calc( round( 50 * ( 1 + ( var( --lghtn-ifc-sign ) * var( --lghtn-ifc-sigma ) ) ) ) );
  --lghtn-ifc: calc( var(--lghtn-ifc-pre-pct) * 1% );
  
  --y-bg:  1;
  --y-bg2: calc( var( --y-bg ) * var( --y-bg ) );
  --y-bg3: calc( var( --y-bg2 ) * var( --y-bg ) );
  
  --hue-pct-y-bg:  calc( var( --hue-pct ) * var( --y-bg ) );
  --hue-pct-y-bg2: calc( var( --hue-pct ) * var( --y-bg2 ) );
  --hue-pct2-y-bg: calc( var( --hue-pct2 ) * var( --y-bg ) );
  
  --satur-m-bg: calc( var( --satur-m-c ) +
                      var( --hue-pct ) * var( --satur-m-x ) + var( --hue-pct2 ) * var( --satur-m-xx ) + var( --hue-pct3 ) * var( --satur-m-xxx ) +
                      var( --y-bg ) * var( --satur-m-y ) + var( --y-bg2 ) * var( --satur-m-yy) + var( --y-bg3 ) * var( --satur-m-yyy ) +
                      var( --hue-pct-y-bg ) * var( --satur-m-xy ) + var( --hue-pct-y-bg2 ) * var( --satur-m-xyy) + var( --hue-pct2-y-bg ) * var( --satur-m-xxy ) );
  
  --satur-bg-mult: calc( var( --satur ) * var( --satur-m-bg ) );
  --satur-bg-norm: calc( ( var( --satur-bg-mult ) - 50 )/50 );
  --satur-bg-abs:  calc( max( var(--satur-bg-norm), -1 * var(--satur-bg-norm) ) );
  --satur-bg-sign: calc( clamp( -1, var(--satur-bg-norm)*10000, 1 ) );
  --satur-bg-pow: calc( pow( var( --satur-bg-abs ), var(--sigma-exp) ) );
  --satur-bg-sigma: calc( 1 - ( 1 / ( exp( var(--sigma-shft) * var( --satur-bg-pow ) ) ) ) );
  --satur-bg-pre-pct: calc( round( 50 * ( 1 + ( var( --satur-bg-sign ) * var( --satur-bg-sigma ) ) ) ) );
  --satur-bg: calc( var(--satur-bg-pre-pct) * 1% );
  
  --lghtn-m-bg: calc( var( --lghtn-m-c ) +
                      var( --hue-pct ) * var( --lghtn-m-x ) + var( --hue-pct2 ) * var( --lghtn-m-xx ) + var( --hue-pct3 ) * var( --lghtn-m-xxx ) +
                      var( --y-bg ) * var( --lghtn-m-y ) + var( --y-bg2 ) * var( --lghtn-m-yy) + var( --y-bg3 ) * var( --lghtn-m-yyy ) +
                      var( --hue-pct-y-bg ) * var( --lghtn-m-xy ) + var( --hue-pct-y-bg2 ) * var( --lghtn-m-xyy) + var( --hue-pct2-y-bg ) * var( --lghtn-m-xxy ) );
  
  --lghtn-bg-mult: calc( var( --lghtn ) * var( --lghtn-m-bg ) );
  --lghtn-bg-norm: calc( ( var( --lghtn-bg-mult ) - 50 )/50 );
  --lghtn-bg-abs:  calc( max( var(--lghtn-bg-norm), -1 * var(--lghtn-bg-norm) ) );
  --lghtn-bg-sign: calc( clamp( -1, var(--lghtn-bg-norm)*10000, 1 ) );
  --lghtn-bg-pow: calc( pow( var( --lghtn-bg-abs ), var(--sigma-exp) ) );
  --lghtn-bg-sigma: calc( 1 - ( 1 / ( exp( var(--sigma-shft) * var( --lghtn-bg-pow ) ) ) ) );
  --lghtn-bg-pre-pct: calc( round( 50 * ( 1 + ( var( --lghtn-bg-sign ) * var( --lghtn-bg-sigma ) ) ) ) );
  --lghtn-bg: calc( var(--lghtn-bg-pre-pct) * 1% );
  
  --fnt-lgt-color:     hsl( var( --hue ), calc( var( --satur-fnt ) ), calc( var( --lghtn-fnt ) * 1.15 ) );
  --fnt-color:         hsl( var( --hue ), calc( var( --satur-fnt ) ), calc( var( --lghtn-fnt ) ) );
  --prm-lgt-color:     hsl( var( --hue ), calc( var( --satur-prm ) ), calc( var( --lghtn-prm ) * 1.5 ) );
  --prm-color:         hsl( var( --hue ), calc( var( --satur-prm ) ), calc( var( --lghtn-prm ) ) );
  --prm-mid-drk-color: hsl( var( --hue ), calc( var( --satur-prm ) ), calc( var( --lghtn-prm ) * 0.75 ) );
  --prm-drk-color:     hsl( var( --hue ), calc( var( --satur-prm ) ), calc( var( --lghtn-prm ) * 0.4 ) );
  --ifc-lgt-color:     hsl( var( --hue ), calc( var( --satur-ifc ) * 0.5 ), calc( var( --lghtn-ifc ) * 2.0 ) );
  --ifc-color:         hsl( var( --hue ), calc( var( --satur-ifc ) ), calc( var( --lghtn-ifc ) ) );
  --ifc-color-trnsp:   hsl( var( --hue )  calc( var( --satur-ifc ) )  calc( var( --lghtn-ifc ) * 1.5 ) / 25% );
  --ifc-popover-color: hsl( var( --hue ), calc( var( --satur-ifc ) * 0.25 ), calc( var( --lghtn-ifc ) * 0.8 ) );
  --ifc-dsbld-color:   hsl( var( --hue ), calc( var( --satur-ifc ) * 0.5 ), calc( var( --lghtn-ifc ) * 0.725 ) );
  --ifc-artcl-color:   hsl( var( --hue ), calc( var( --satur-ifc ) * 0.5 ), calc( var( --lghtn-ifc ) * 0.5 ) );
  --ifc-app-bar-color: hsl( var( --hue ), calc( var( --satur-ifc ) * 0.5 ), calc( var( --lghtn-ifc ) * 0.75 ) );
  --ifc-pnl-color:     hsl( var( --hue ), calc( var( --satur-ifc ) * 0.5 ), calc( var( --lghtn-ifc ) * 0.4 ) );
  --ifc-drk-color:     hsl( var( --hue ), calc( var( --satur-ifc ) ), calc( var( --lghtn-ifc ) * 0.37 ) );
  --hvr-color:         hsl( var( --hue ), calc( var( --satur-hvr ) ), calc( var( --lghtn-hvr ) ) );
  --hvr-color-trnsp:   hsl( var( --hue )  calc( var( --satur-hvr ) )  calc( var( --lghtn-hvr ) * 1.66 ) / 35% );
  --bg-color:          hsl( var( --hue ), calc( var( --satur-bg ) ),  calc( var( --lghtn-bg ) ) );
  --bg-mid-drk-color:  hsl( var( --hue ), calc( var( --satur-bg ) ),  calc( var( --lghtn-bg ) * 0.7 ) );
  --bg-drk-color:      hsl( var( --hue ), calc( var( --satur-bg ) * 0.5 ),  calc( var( --lghtn-bg ) * 0.4 ) );
  --link-color:        hsl( var( --hue-link ),       calc( var( --satur-prm ) ), 50% );
  --link-visit-color:  hsl( var( --hue-link-visit ), calc( var( --satur-prm ) ), 50% );
  --err-color:         hsl( 4, 94%, 85% );
  
  /* Variables for the current day, month, and year registered by whatever method is used to get the current time */
  --day_of_month_current: 25;
  --month_of_year_current: 1;
  --year_current: 2025;
  
  /* Variables for the selected day, month, and year the user is currently interacting with and displaying */
  --day_of_month: 25;
  --month_of_year: 1;
  --year: 2025;
  --month_subtracted: calc( var( --month_of_year ) - 2 );
  --divided_month: calc( ( var(--month_subtracted) - 1)/11 );
  --rounded_month: calc( round(down, var(--divided_month), 1) );
  --month_shft: calc( mod( ( var( --month_of_year ) + 9 ), 12 ) + 3 );
  --year_shft: calc( var( --year ) + var( --rounded_month ) );
  --century_shft: calc( round(down, var(--year_shft)/100, 1 ) );
  --year_m_century: calc( var(--year_shft) - var(--century_shft) * 100 );
  
  --month_subcalc: calc( round(down, (( 13 * (var(--month_shft) + 1 ) )/5), 1) );
  --year_subcalc: calc( var(--year_m_century) / 4 );
  --century_subcalc: calc( var(--century_shft) / 4 );
  --month_year_century_subcalc: calc( var(--month_subcalc) + var(--year_m_century) + var(--year_subcalc) - 2 * var(--century_shft) + var(--century_subcalc) );
  
  --day_of_week_nmbr: calc( var(--day_of_month) + var(--month_year_century_subcalc) );
  --day_of_week_flr: calc( round( down, var(--day_of_week_nmbr), 1 ) );
  --day_of_week: calc( mod( ( var( --day_of_week_flr ) + 6 ), 7 ) );
  
  --first_of_month_day_of_week_nmbr: calc( 1 + var(--month_year_century_subcalc) );
  --first_of_month_day_of_week_flr:  calc( round( down, var(--first_of_month_day_of_week_nmbr), 1 ) );
  --first_of_month_day_of_week:      calc( mod( ( var( --first_of_month_day_of_week_flr ) + 6 ), 7 ) );
  
  --sun_opacity: calc( round( down, mod( ( var( --day_of_week ) + 7 ), 8 )/7 ) );
  --mon_opacity: calc( round( down, mod( ( var( --day_of_week ) + 6 ), 8 )/7 ) );
  --tue_opacity: calc( round( down, mod( ( var( --day_of_week ) + 5 ), 8 )/7 ) );
  --wed_opacity: calc( round( down, mod( ( var( --day_of_week ) + 4 ), 8 )/7 ) );
  --thu_opacity: calc( round( down, mod( ( var( --day_of_week ) + 3 ), 8 )/7 ) );
  --fri_opacity: calc( round( down, mod( ( var( --day_of_week ) + 2 ), 8 )/7 ) );
  --sat_opacity: calc( round( down, mod( ( var( --day_of_week ) + 1 ), 8 )/7 ) );
  
  --jan_opacity: calc( round( down, mod( ( var( --month_of_year ) + 11 ), 13 )/12 ) );
  --feb_opacity: calc( round( down, mod( ( var( --month_of_year ) + 10 ), 13 )/12 ) );
  --mar_opacity: calc( round( down, mod( ( var( --month_of_year ) +  9 ), 13 )/12 ) );
  --apr_opacity: calc( round( down, mod( ( var( --month_of_year ) +  8 ), 13 )/12 ) );
  --may_opacity: calc( round( down, mod( ( var( --month_of_year ) +  7 ), 13 )/12 ) );
  --jun_opacity: calc( round( down, mod( ( var( --month_of_year ) +  6 ), 13 )/12 ) );
  --jul_opacity: calc( round( down, mod( ( var( --month_of_year ) +  5 ), 13 )/12 ) );
  --aug_opacity: calc( round( down, mod( ( var( --month_of_year ) +  4 ), 13 )/12 ) );
  --sep_opacity: calc( round( down, mod( ( var( --month_of_year ) +  3 ), 13 )/12 ) );
  --oct_opacity: calc( round( down, mod( ( var( --month_of_year ) +  2 ), 13 )/12 ) );
  --nov_opacity: calc( round( down, mod( ( var( --month_of_year ) +  1 ), 13 )/12 ) );
  --dec_opacity: calc( round( down, mod( ( var( --month_of_year ) +  0 ), 13 )/12 ) );
  
  --is_leap_year_fr:      calc( ( 1 - round( up, mod( var( --year ), 4 )/4     ) ) );
  --is_leap_year_hndrd:   calc(       round( up, mod( var( --year ), 100 )/100 ) );
  --is_leap_year_frhndrd: calc( ( 1 - round( up, mod( var( --year ), 400 )/400 ) ) );
  
  --is_leap_year_current_fr:      calc( ( 1 - round( up, mod( var( --year_current ), 4 )/4     ) ) );
  --is_leap_year_current_hndrd:   calc(       round( up, mod( var( --year_current ), 100 )/100 ) );
  --is_leap_year_current_frhndrd: calc( ( 1 - round( up, mod( var( --year_current ), 400 )/400 ) ) );
  
  --is_leap_year_slctd:   calc( var( --is_leap_year_fr ) * var( --is_leap_year_hndrd ) + var( --is_leap_year_frhndrd ) );
  --is_leap_year_current: calc( var( --is_leap_year_current_fr ) * var( --is_leap_year_current_hndrd ) + var( --is_leap_year_current_frhndrd ) );
  
  --is_feb_slctd:   var( --feb_opacity );
  --is_feb_current: calc( round( down, mod( ( var( --month_of_year_current ) + 10 ), 13 )/12 ) );
  
  --days_in_month_slctd:   calc( 31 - mod( mod( ( var( --month_of_year         ) - 1 ), 7 ), 2 ) - var( --is_feb_slctd   ) * ( 2 - var( --is_leap_year_slctd   ) ) );
  --days_in_month_current: calc( 31 - mod( mod( ( var( --month_of_year_current ) - 1 ), 7 ), 2 ) - var( --is_feb_current ) * ( 2 - var( --is_leap_year_current ) ) );
  
  --month_current_slctd_clamp: calc( clamp( -1, ( var( --month_of_year ) - var( --month_of_year_current ) ), 1 ) );
  --is_month_current_slctd:    calc( 1 - max( var(--month_current_slctd_clamp), -1 * var(--month_current_slctd_clamp) ) );

  --year_current_slctd_clamp: calc( clamp( -1, ( var( --year ) - var( --year_current ) ), 1 ) );
  --is_year_current_slctd:    calc( 1 - max( var(--year_current_slctd_clamp), -1 * var(--year_current_slctd_clamp) ) );

  --dimdom: calc( var( --days_in_month_current ) + var( --day_of_month_current ) );
  --dimcpp: calc( var( --days_in_month_current ) + 1 );
  
  --clock_time_hr: 1;
  --clock_time_mnt: 1;
  
  height: 100%;
  width: 100%;
  position: fixed;
  margin: 0;
  color: var( --fnt-lgt-color );
  background-color: var( --bg-drk-color );
}

.display_output::after {
  display: block;
  --whn: round( down, var(--days_in_month_slctd) );
  --dcn: calc( ( var(--days_in_month_slctd) - var( --whn ) ) * 1000 );
  counter-reset: whole-number var(--whn) decimal-number var( --dcn );
  content: "output number is " counter(whole-number) '.' counter(decimal-number);
}

.thm_m3_baseline { color: #6650a4; }
.thm_m3_baseline:hover { background-color: #19181a; /* 25, 24, 26 */ }

.thm_indigo { color: #3f51b5; }
.thm_indigo:hover { background-color: #16181b; /* 22, 24, 27 */ }

.thm_blue { color: #2194f3; }
.thm_blue:hover { background-color: #141e20; /* 20, 30, 32 */ }

.thm_teal { color: #009688; }
.thm_teal:hover { background-color: #111e18; /* 17, 30, 24 */ }

.thm_green { color: #4caf4f; }
.thm_green:hover { background-color: #172013; /* 23, 32, 19 */ }

.thm_yellow { color: #ffeb3b; }
.thm_yellow:hover { background-color: #252412; /* 37, 36, 18 */ }

.thm_orange { color: #ff9900; }
.thm_orange:hover { background-color: #251e0d; /* 37, 30, 13 */ }

.thm_deep_orange { color: #ff5722; }
.thm_deep_orange:hover { background-color: #251910; /* 37, 25, 16 */ }

.thm_pink { color: #e91e62; }
.thm_pink:hover { background-color: #231415; /* 35, 20, 21 */ }

.thm_leaves { color: #E6E0E9; }
.thm_leaves:hover { background-color: #1b1d17; /* 27, 29, 23 */ }

.thm_peonies { color: #E6E0E9; }
.thm_peonies:hover { background-color: #191d20; /* 25, 29, 32 */ }

.thm_bubbles { color: #E6E0E9; }
.thm_bubbles:hover { background-color: #21191c; /* 33, 25, 28 */ }

.thm_seaweed { color: #E6E0E9; }
.thm_seaweed:hover { background-color: #231a18; /* 35, 26, 24 */ }

.thm_sea_grapes { color: #E6E0E9; }
.thm_sea_grapes:hover { background-color: #1c1c21; /* 28, 28, 33 */ }

.thm_petals { color: #E6E0E9; }
.thm_petals:hover { background-color: #211a1e; /* 33, 26, 30 */ }

/* Some of this crazy nonsense with checkboxes might possibly be made easier using tabindex properties */
/* Idea from https://jsfiddle.net/shshaw/ENZQU/4/ */
/* <div checked_result="YES" not_checked_result="NO" id="test1" tabindex="-1"></div>
   div {
     font-size: 3em;
   }
   div:after {
     content: attr(not_checked_result);
   }
   div:focus:after {
     content: attr(checked_result);    
   }
*/

/* Colors from Google's initial Material 3 implementation, basic single tone colors across the RGB spectrum */
body:has( #rd_inpt_m3_baseline:checked ) { --thm-m3-baseline-on: 1; --hue: 256; --satur: 34; --lghtn: 55; }
body:has( #rd_inpt_m3_baseline:checked ) label[ for="rd_inpt_m3_baseline" ]{ font-variation-settings: 'FILL' 1, 'wght' 500, 'GRAD' 0, 'opsz' 48; }
body:has( #rd_inpt_m3_baseline:checked ) label[ for="rd_inpt_m3_baseline" ] > span.icon_cntnr_g { background-color: var( --ifc-color ); }
body:has( #rd_inpt_m3_indigo:checked ) { --thm-m3-indigo-on: 1; --hue: 231; --satur: 48; --lghtn: 48; }
body:has( #rd_inpt_m3_indigo:checked ) label[ for="rd_inpt_m3_indigo" ]{ font-variation-settings: 'FILL' 1, 'wght' 500, 'GRAD' 0, 'opsz' 48; }
body:has( #rd_inpt_m3_indigo:checked ) label[ for="rd_inpt_m3_indigo" ] > span.icon_cntnr_g { background-color: var( --ifc-color ); }
body:has( #rd_inpt_m3_blue:checked ) { --thm-m3-blue-on: 1; --hue: 207; --satur: 90; --lghtn: 54; }
body:has( #rd_inpt_m3_blue:checked ) label[ for="rd_inpt_m3_blue" ]{ font-variation-settings: 'FILL' 1, 'wght' 500, 'GRAD' 0, 'opsz' 48; }
body:has( #rd_inpt_m3_blue:checked ) label[ for="rd_inpt_m3_blue" ] > span.icon_cntnr_g { background-color: var( --ifc-color ); }
body:has( #rd_inpt_m3_teal:checked ) { --thm-m3-teal-on: 1; --hue: 174; --satur: 100; --lghtn: 45; }
body:has( #rd_inpt_m3_teal:checked ) label[ for="rd_inpt_m3_teal" ]{ font-variation-settings: 'FILL' 1, 'wght' 500, 'GRAD' 0, 'opsz' 48; }
body:has( #rd_inpt_m3_teal:checked ) label[ for="rd_inpt_m3_teal" ] > span.icon_cntnr_g { background-color: var( --ifc-color ); }
body:has( #rd_inpt_m3_green:checked ) { --thm-m3-green-on: 1; --hue: 122; --satur: 50; --lghtn: 49; }
body:has( #rd_inpt_m3_green:checked ) label[ for="rd_inpt_m3_green" ]{ font-variation-settings: 'FILL' 1, 'wght' 500, 'GRAD' 0, 'opsz' 48; }
body:has( #rd_inpt_m3_green:checked ) label[ for="rd_inpt_m3_green" ] > span.icon_cntnr_g { background-color: var( --ifc-color ); }
body:has( #rd_inpt_m3_yellow:checked ) { --thm-m3-yellow-on: 1; --hue: 54; --satur: 80; --lghtn: 62; }
body:has( #rd_inpt_m3_yellow:checked ) label[ for="rd_inpt_m3_yellow" ]{ font-variation-settings: 'FILL' 1, 'wght' 500, 'GRAD' 0, 'opsz' 48; }
body:has( #rd_inpt_m3_yellow:checked ) label[ for="rd_inpt_m3_yellow" ] > span.icon_cntnr_g { background-color: var( --ifc-color ); }
body:has( #rd_inpt_m3_orange:checked ) { --thm-m3-orange-on: 1; --hue: 36; --satur: 100; --lghtn: 50; }
body:has( #rd_inpt_m3_orange:checked ) label[ for="rd_inpt_m3_orange" ]{ font-variation-settings: 'FILL' 1, 'wght' 500, 'GRAD' 0, 'opsz' 48; }
body:has( #rd_inpt_m3_orange:checked ) label[ for="rd_inpt_m3_orange" ] > span.icon_cntnr_g { background-color: var( --ifc-color ); }
body:has( #rd_inpt_m3_deep_orange:checked ) { --thm-m3-deep-orange-on: 1; --hue: 14; --satur: 100; --lghtn: 57; }
body:has( #rd_inpt_m3_deep_orange:checked ) label[ for="rd_inpt_m3_deep_orange" ]{ font-variation-settings: 'FILL' 1, 'wght' 500, 'GRAD' 0, 'opsz' 48; }
body:has( #rd_inpt_m3_deep_orange:checked ) label[ for="rd_inpt_m3_deep_orange" ] > span.icon_cntnr_g { background-color: var( --ifc-color ); }
body:has( #rd_inpt_m3_pink:checked ) { --thm-m3-pink-on: 1; --hue: 340; --satur: 82; --lghtn: 52; }
body:has( #rd_inpt_m3_pink:checked ) label[ for="rd_inpt_m3_pink" ]{ font-variation-settings: 'FILL' 1, 'wght' 500, 'GRAD' 0, 'opsz' 48; }
body:has( #rd_inpt_m3_pink:checked ) label[ for="rd_inpt_m3_pink" ] > span.icon_cntnr_g { background-color: var( --ifc-color ); }

/* Colors from Google's initial Material 3 implementation, multi-color themes based on imagery samples */
body:has( #rd_inpt_m3_leaves:checked ) { --thm-m3-leaves-on: 1; --hue: 122; --satur: 50; --lghtn: 49; }
body:has( #rd_inpt_m3_leaves:checked ) label[ for="rd_inpt_m3_leaves" ]{ font-variation-settings: 'FILL' 1, 'wght' 500, 'GRAD' 0, 'opsz' 48; }
body:has( #rd_inpt_m3_leaves:checked ) label[ for="rd_inpt_m3_leaves" ] > span.icon_cntnr_g { background-color: var( --ifc-color ); }
body:has( #rd_inpt_m3_peonies:checked ) { --thm-m3-peonies-on: 1; --hue: 340; --satur: 82; --lghtn: 52; }
body:has( #rd_inpt_m3_peonies:checked ) label[ for="rd_inpt_m3_peonies" ]{ font-variation-settings: 'FILL' 1, 'wght' 500, 'GRAD' 0, 'opsz' 48; }
body:has( #rd_inpt_m3_peonies:checked ) label[ for="rd_inpt_m3_peonies" ] > span.icon_cntnr_g { background-color: var( --ifc-color ); }
body:has( #rd_inpt_m3_bubbles:checked ) { --thm-m3-bubbles-on: 1; --hue: 207; --satur: 90; --lghtn: 54; }
body:has( #rd_inpt_m3_bubbles:checked ) label[ for="rd_inpt_m3_bubbles" ]{ font-variation-settings: 'FILL' 1, 'wght' 500, 'GRAD' 0, 'opsz' 48; }
body:has( #rd_inpt_m3_bubbles:checked ) label[ for="rd_inpt_m3_bubbles" ] > span.icon_cntnr_g { background-color: var( --ifc-color ); }
body:has( #rd_inpt_m3_seaweed:checked ) { --thm-m3-seaweed-on: 1; --hue: 14; --satur: 100; --lghtn: 57; }
body:has( #rd_inpt_m3_seaweed:checked ) label[ for="rd_inpt_m3_seaweed" ]{ font-variation-settings: 'FILL' 1, 'wght' 500, 'GRAD' 0, 'opsz' 48; }
body:has( #rd_inpt_m3_seaweed:checked ) label[ for="rd_inpt_m3_seaweed" ] > span.icon_cntnr_g { background-color: var( --ifc-color ); }
body:has( #rd_inpt_m3_sea_grapes:checked ) { --thm-m3-sea-grapes-on: 1; --hue: 231; --satur: 48; --lghtn: 48; }
body:has( #rd_inpt_m3_sea_grapes:checked ) label[ for="rd_inpt_m3_sea_grapes" ]{ font-variation-settings: 'FILL' 1, 'wght' 500, 'GRAD' 0, 'opsz' 48; }
body:has( #rd_inpt_m3_sea_grapes:checked ) label[ for="rd_inpt_m3_sea_grapes" ] > span.icon_cntnr_g { background-color: var( --ifc-color ); }
body:has( #rd_inpt_m3_petals:checked ) { --thm-m3-petals-on: 1; --hue: 256; --satur: 34; --lghtn: 55; }
body:has( #rd_inpt_m3_petals:checked ) label[ for="rd_inpt_m3_petals" ]{ font-variation-settings: 'FILL' 1, 'wght' 500, 'GRAD' 0, 'opsz' 48; }
body:has( #rd_inpt_m3_petals:checked ) label[ for="rd_inpt_m3_petals" ] > span.icon_cntnr_g { background-color: var( --ifc-color ); }

/* Colors from WWW CSS3 UI Extended colors (named web colors) */
body:has( #rd_inpt_www_indigo:checked ) { --thm-www-indigo-on: 1; --hue: 275; --satur: 100; --lghtn: 40; }
body:has( #rd_inpt_www_indigo:checked ) label[ for="rd_inpt_www_indigo" ]{ font-variation-settings: 'FILL' 1, 'wght' 500, 'GRAD' 0, 'opsz' 48; }
body:has( #rd_inpt_www_indigo:checked ) label[ for="rd_inpt_www_indigo" ] > span.icon_cntnr_g { background-color: var( --ifc-color ); }
body:has( #rd_inpt_www_purple:checked ) { --thm-www-purple-on: 1; --hue: 300; --satur: 100; --lghtn: 39; }
body:has( #rd_inpt_www_purple:checked ) label[ for="rd_inpt_www_purple" ]{ font-variation-settings: 'FILL' 1, 'wght' 500, 'GRAD' 0, 'opsz' 48; }
body:has( #rd_inpt_www_purple:checked ) label[ for="rd_inpt_www_purple" ] > span.icon_cntnr_g { background-color: var( --ifc-color ); }
body:has( #rd_inpt_www_darkmagenta:checked ) { --thm-www-darkmagenta-on: 1; --hue: 300; --satur: 100; --lghtn: 43; }
body:has( #rd_inpt_www_darkmagenta:checked ) label[ for="rd_inpt_www_darkmagenta" ]{ font-variation-settings: 'FILL' 1, 'wght' 500, 'GRAD' 0, 'opsz' 48; }
body:has( #rd_inpt_www_darkmagenta:checked ) label[ for="rd_inpt_www_darkmagenta" ] > span.icon_cntnr_g { background-color: var( --ifc-color ); }
body:has( #rd_inpt_www_darkviolet:checked ) { --thm-www-darkviolet-on: 1; --hue: 282; --satur: 100; --lghtn: 45; }
body:has( #rd_inpt_www_darkviolet:checked ) label[ for="rd_inpt_www_darkviolet:checked" ]{ font-variation-settings: 'FILL' 1, 'wght' 500, 'GRAD' 0, 'opsz' 48; }
body:has( #rd_inpt_www_darkviolet:checked ) label[ for="rd_inpt_www_darkviolet:checked" ] > span.icon_cntnr_g { background-color: var( --ifc-color ); }
body:has( #rd_inpt_www_darkslateblue:checked ) { --thm-www-darkslateblue-on: 1; --hue: 248; --satur: 39; --lghtn: 43; }
body:has( #rd_inpt_www_darkslateblue:checked ) label[ for="rd_inpt_www_darkslateblue" ]{ font-variation-settings: 'FILL' 1, 'wght' 500, 'GRAD' 0, 'opsz' 48; }
body:has( #rd_inpt_www_darkslateblue:checked ) label[ for="rd_inpt_www_darkslateblue" ] > span.icon_cntnr_g { background-color: var( --ifc-color ); }
body:has( #rd_inpt_www_blueviolet:checked ) { --thm-www-blueviolet-on: 1; --hue: 271; --satur: 76; --lghtn: 56; }
body:has( #rd_inpt_www_blueviolet:checked ) label[ for="rd_inpt_www_blueviolet" ]{ font-variation-settings: 'FILL' 1, 'wght' 500, 'GRAD' 0, 'opsz' 48; }
body:has( #rd_inpt_www_blueviolet:checked ) label[ for="rd_inpt_www_blueviolet" ] > span.icon_cntnr_g { background-color: var( --ifc-color ); }
body:has( #rd_inpt_www_darkorchid:checked ) { --thm-www-darkorchid-on: 1; --hue: 280; --satur: 61; --lghtn: 53; }
body:has( #rd_inpt_www_darkorchid:checked ) label[ for="rd_inpt_www_darkorchid" ]{ font-variation-settings: 'FILL' 1, 'wght' 500, 'GRAD' 0, 'opsz' 48; }
body:has( #rd_inpt_www_darkorchid:checked ) label[ for="rd_inpt_www_darkorchid" ] > span.icon_cntnr_g { background-color: var( --ifc-color ); }
body:has( #rd_inpt_www_fuchsia:checked ) { --thm-www-fuchsia-on: 1; --hue: 300; --satur: 100; --lghtn: 63; }
body:has( #rd_inpt_www_fuchsia:checked ) label[ for="rd_inpt_www_fuchsia" ]{ font-variation-settings: 'FILL' 1, 'wght' 500, 'GRAD' 0, 'opsz' 48; }
body:has( #rd_inpt_www_fuchsia:checked ) label[ for="rd_inpt_www_fuchsia" ] > span.icon_cntnr_g { background-color: var( --ifc-color ); }
body:has( #rd_inpt_www_magenta:checked ) { --thm-www-magenta-on: 1; --hue: 295; --satur: 100; --lghtn: 58; }
body:has( #rd_inpt_www_magenta:checked ) label[ for="rd_inpt_www_magenta" ]{ font-variation-settings: 'FILL' 1, 'wght' 500, 'GRAD' 0, 'opsz' 48; }
body:has( #rd_inpt_www_magenta:checked ) label[ for="rd_inpt_www_magenta" ] > span.icon_cntnr_g { background-color: var( --ifc-color ); }
body:has( #rd_inpt_www_slateblue:checked ) { --thm-www-slateblue-on: 1; --hue: 248; --satur: 53; --lghtn: 60; }
body:has( #rd_inpt_www_slateblue:checked ) label[ for="rd_inpt_www_slateblue" ]{ font-variation-settings: 'FILL' 1, 'wght' 500, 'GRAD' 0, 'opsz' 48; }
body:has( #rd_inpt_www_slateblue:checked ) label[ for="rd_inpt_www_slateblue" ] > span.icon_cntnr_g { background-color: var( --ifc-color ); }
body:has( #rd_inpt_www_mediumslateblue:checked ) { --thm-www-mediumslateblue-on: 1; --hue: 249; --satur: 80; --lghtn: 69; }
body:has( #rd_inpt_www_mediumslateblue:checked ) label[ for="rd_inpt_www_mediumslateblue" ]{ font-variation-settings: 'FILL' 1, 'wght' 500, 'GRAD' 0, 'opsz' 48; }
body:has( #rd_inpt_www_mediumslateblue:checked ) label[ for="rd_inpt_www_mediumslateblue" ] > span.icon_cntnr_g { background-color: var( --ifc-color ); }
body:has( #rd_inpt_www_mediumorchid:checked ) { --thm-www-mediumorchid-on: 1; --hue: 288; --satur: 59; --lghtn: 60; }
body:has( #rd_inpt_www_mediumorchid:checked ) label[ for="rd_inpt_www_mediumorchid" ]{ font-variation-settings: 'FILL' 1, 'wght' 500, 'GRAD' 0, 'opsz' 48; }
body:has( #rd_inpt_www_mediumorchid:checked ) label[ for="rd_inpt_www_mediumorchid" ] > span.icon_cntnr_g { background-color: var( --ifc-color ); }
body:has( #rd_inpt_www_mediumpurple:checked ) { --thm-www-mediumpurple-on: 1; --hue: 260; --satur: 60; --lghtn: 67; }
body:has( #rd_inpt_www_mediumpurple:checked ) label[ for="rd_inpt_www_mediumpurple" ]{ font-variation-settings: 'FILL' 1, 'wght' 500, 'GRAD' 0, 'opsz' 48; }
body:has( #rd_inpt_www_mediumpurple:checked ) label[ for="rd_inpt_www_mediumpurple" ] > span.icon_cntnr_g { background-color: var( --ifc-color ); }
body:has( #rd_inpt_www_orchid:checked ) { --thm-www-orchid-on: 1; --hue: 292; --satur: 59; --lghtn: 67; }
body:has( #rd_inpt_www_orchid:checked ) label[ for="rd_inpt_www_orchid" ]{ font-variation-settings: 'FILL' 1, 'wght' 500, 'GRAD' 0, 'opsz' 48; }
body:has( #rd_inpt_www_orchid:checked ) label[ for="rd_inpt_www_orchid" ] > span.icon_cntnr_g { background-color: var( --ifc-color ); }
body:has( #rd_inpt_www_violet:checked ) { --thm-www-violet-on: 1; --hue: 300; --satur: 76; --lghtn: 73; }
body:has( #rd_inpt_www_violet:checked ) label[ for="rd_inpt_www_violet" ]{ font-variation-settings: 'FILL' 1, 'wght' 500, 'GRAD' 0, 'opsz' 48; }
body:has( #rd_inpt_www_violet:checked ) label[ for="rd_inpt_www_violet" ] > span.icon_cntnr_g { background-color: var( --ifc-color ); }
body:has( #rd_inpt_www_plum:checked ) { --thm-www-plum-on: 1; --hue: 300; --satur: 47; --lghtn: 76; }
body:has( #rd_inpt_www_plum:checked ) label[ for="rd_inpt_www_plum" ]{ font-variation-settings: 'FILL' 1, 'wght' 500, 'GRAD' 0, 'opsz' 48; }
body:has( #rd_inpt_www_plum:checked ) label[ for="rd_inpt_www_plum" ] > span.icon_cntnr_g { background-color: var( --ifc-color ); }
body:has( #rd_inpt_www_thistle:checked ) { --thm-www-thistle-on: 1; --hue: 300; --satur: 24; --lghtn: 81; }
body:has( #rd_inpt_www_thistle:checked ) label[ for="rd_inpt_www_thistle" ]{ font-variation-settings: 'FILL' 1, 'wght' 500, 'GRAD' 0, 'opsz' 48; }
body:has( #rd_inpt_www_thistle:checked ) label[ for="rd_inpt_www_thistle" ] > span.icon_cntnr_g { background-color: var( --ifc-color ); }
body:has( #rd_inpt_www_lavender:checked ) { --thm-www-lavender-on: 1; --hue: 240; --satur: 67; --lghtn: 94; }
body:has( #rd_inpt_www_lavender:checked ) label[ for="rd_inpt_www_lavender" ]{ font-variation-settings: 'FILL' 1, 'wght' 500, 'GRAD' 0, 'opsz' 48; }
body:has( #rd_inpt_www_lavender:checked ) label[ for="rd_inpt_www_lavender" ] > span.icon_cntnr_g { background-color: var( --ifc-color ); }

body:has( #rd_inpt_www_midnightblue:checked ) { --thm-www-midnightblue-on: 1; --hue: 250; --satur: 64; --lghtn: 40; }
body:has( #rd_inpt_www_midnightblue:checked ) label[ for="rd_inpt_www_midnightblue" ]{ font-variation-settings: 'FILL' 1, 'wght' 500, 'GRAD' 0, 'opsz' 48; }
body:has( #rd_inpt_www_midnightblue:checked ) label[ for="rd_inpt_www_midnightblue" ] > span.icon_cntnr_g { background-color: var( --ifc-color ); }
body:has( #rd_inpt_www_navy:checked ) { --thm-www-navy-on: 1; --hue: 240; --satur: 100; --lghtn: 39; }
body:has( #rd_inpt_www_navy:checked ) label[ for="rd_inpt_www_navy" ]{ font-variation-settings: 'FILL' 1, 'wght' 500, 'GRAD' 0, 'opsz' 48; }
body:has( #rd_inpt_www_navy:checked ) label[ for="rd_inpt_www_navy" ] > span.icon_cntnr_g { background-color: var( --ifc-color ); }
body:has( #rd_inpt_www_darkblue:checked ) { --thm-www-darkblue-on: 1; --hue: 240; --satur: 100; --lghtn: 41; }
body:has( #rd_inpt_www_darkblue:checked ) label[ for="rd_inpt_www_darkblue" ]{ font-variation-settings: 'FILL' 1, 'wght' 500, 'GRAD' 0, 'opsz' 48; }
body:has( #rd_inpt_www_darkblue:checked ) label[ for="rd_inpt_www_darkblue" ] > span.icon_cntnr_g { background-color: var( --ifc-color ); }
body:has( #rd_inpt_www_mediumblue:checked ) { --thm-www-mediumblue-on: 1; --hue: 240; --satur: 100; --lghtn: 44; }
body:has( #rd_inpt_www_mediumblue:checked ) label[ for="rd_inpt_www_mediumblue" ]{ font-variation-settings: 'FILL' 1, 'wght' 500, 'GRAD' 0, 'opsz' 48; }
body:has( #rd_inpt_www_mediumblue:checked ) label[ for="rd_inpt_www_mediumblue" ] > span.icon_cntnr_g { background-color: var( --ifc-color ); }
body:has( #rd_inpt_www_blue:checked ) { --thm-www-blue-on: 1; --hue: 240; --satur: 100; --lghtn: 53; }
body:has( #rd_inpt_www_blue:checked ) label[ for="rd_inpt_www_blue" ]{ font-variation-settings: 'FILL' 1, 'wght' 500, 'GRAD' 0, 'opsz' 48; }
body:has( #rd_inpt_www_blue:checked ) label[ for="rd_inpt_www_blue" ] > span.icon_cntnr_g { background-color: var( --ifc-color ); }
body:has( #rd_inpt_www_royalblue:checked ) { --thm-www-royalblue-on: 1; --hue: 225; --satur: 73; --lghtn: 59; }
body:has( #rd_inpt_www_royalblue:checked ) label[ for="rd_inpt_www_royalblue" ]{ font-variation-settings: 'FILL' 1, 'wght' 500, 'GRAD' 0, 'opsz' 48; }
body:has( #rd_inpt_www_royalblue:checked ) label[ for="rd_inpt_www_royalblue" ] > span.icon_cntnr_g { background-color: var( --ifc-color ); }
body:has( #rd_inpt_www_steelblue:checked ) { --thm-www-steelblue-on: 1; --hue: 207; --satur: 44; --lghtn: 52; }
body:has( #rd_inpt_www_steelblue:checked ) label[ for="rd_inpt_www_steelblue" ]{ font-variation-settings: 'FILL' 1, 'wght' 500, 'GRAD' 0, 'opsz' 48; }
body:has( #rd_inpt_www_steelblue:checked ) label[ for="rd_inpt_www_steelblue" ] > span.icon_cntnr_g { background-color: var( --ifc-color ); }
body:has( #rd_inpt_www_dodgerblue:checked ) { --thm-www-dodgerblue-on: 1; --hue: 210; --satur: 100; --lghtn: 58; }
body:has( #rd_inpt_www_dodgerblue:checked ) label[ for="rd_inpt_www_dodgerblue" ]{ font-variation-settings: 'FILL' 1, 'wght' 500, 'GRAD' 0, 'opsz' 48; }
body:has( #rd_inpt_www_dodgerblue:checked ) label[ for="rd_inpt_www_dodgerblue" ] > span.icon_cntnr_g { background-color: var( --ifc-color ); }
body:has( #rd_inpt_www_deepskyblue:checked ) { --thm-www-deepskyblue-on: 1; --hue: 195; --satur: 100; --lghtn: 53; }
body:has( #rd_inpt_www_deepskyblue:checked ) label[ for="rd_inpt_www_deepskyblue" ]{ font-variation-settings: 'FILL' 1, 'wght' 500, 'GRAD' 0, 'opsz' 48; }
body:has( #rd_inpt_www_deepskyblue:checked ) label[ for="rd_inpt_www_deepskyblue" ] > span.icon_cntnr_g { background-color: var( --ifc-color ); }
body:has( #rd_inpt_www_cornflowerblue:checked ) { --thm-www-cornflowerblue-on: 1; --hue: 219; --satur: 79; --lghtn: 68; }
body:has( #rd_inpt_www_cornflowerblue:checked ) label[ for="rd_inpt_www_cornflowerblue" ]{ font-variation-settings: 'FILL' 1, 'wght' 500, 'GRAD' 0, 'opsz' 48; }
body:has( #rd_inpt_www_cornflowerblue:checked ) label[ for="rd_inpt_www_cornflowerblue" ] > span.icon_cntnr_g { background-color: var( --ifc-color ); }
body:has( #rd_inpt_www_skyblue:checked ) { --thm-www-skyblue-on: 1; --hue: 197; --satur: 71; --lghtn: 74; }
body:has( #rd_inpt_www_skyblue:checked ) label[ for="rd_inpt_www_skyblue" ]{ font-variation-settings: 'FILL' 1, 'wght' 500, 'GRAD' 0, 'opsz' 48; }
body:has( #rd_inpt_www_skyblue:checked ) label[ for="rd_inpt_www_skyblue" ] > span.icon_cntnr_g { background-color: var( --ifc-color ); }
body:has( #rd_inpt_www_lightskyblue:checked ) { --thm-www-lightskyblue-on: 1; --hue: 203; --satur: 92; --lghtn: 76; }
body:has( #rd_inpt_www_lightskyblue:checked ) label[ for="rd_inpt_www_lightskyblue" ]{ font-variation-settings: 'FILL' 1, 'wght' 500, 'GRAD' 0, 'opsz' 48; }
body:has( #rd_inpt_www_lightskyblue:checked ) label[ for="rd_inpt_www_lightskyblue" ] > span.icon_cntnr_g { background-color: var( --ifc-color ); }
body:has( #rd_inpt_www_lightsteelblue:checked ) { --thm-www-lightsteelblue-on: 1; --hue: 214; --satur: 41; --lghtn: 79; }
body:has( #rd_inpt_www_lightsteelblue:checked ) label[ for="rd_inpt_www_lightsteelblue" ]{ font-variation-settings: 'FILL' 1, 'wght' 500, 'GRAD' 0, 'opsz' 48; }
body:has( #rd_inpt_www_lightsteelblue:checked ) label[ for="rd_inpt_www_lightsteelblue" ] > span.icon_cntnr_g { background-color: var( --ifc-color ); }
body:has( #rd_inpt_www_lightblue:checked ) { --thm-www-lightblue-on: 1; --hue: 195; --satur: 53; --lghtn: 80; }
body:has( #rd_inpt_www_lightblue:checked ) label[ for="rd_inpt_www_lightblue" ]{ font-variation-settings: 'FILL' 1, 'wght' 500, 'GRAD' 0, 'opsz' 48; }
body:has( #rd_inpt_www_lightblue:checked ) label[ for="rd_inpt_www_lightblue" ] > span.icon_cntnr_g { background-color: var( --ifc-color ); }
body:has( #rd_inpt_www_powderblue:checked ) { --thm-www-powderblue-on: 1; --hue: 187; --satur: 52; --lghtn: 81; }
body:has( #rd_inpt_www_powderblue:checked ) label[ for="rd_inpt_www_powderblue" ]{ font-variation-settings: 'FILL' 1, 'wght' 500, 'GRAD' 0, 'opsz' 48; }
body:has( #rd_inpt_www_powderblue:checked ) label[ for="rd_inpt_www_powderblue" ] > span.icon_cntnr_g { background-color: var( --ifc-color ); }

body:has( #rd_inpt_www_teal:checked ) { --thm-www-teal-on: 1; --hue: 180; --satur: 100; --lghtn: 38; }
body:has( #rd_inpt_www_teal:checked ) label[ for="rd_inpt_www_teal" ]{ font-variation-settings: 'FILL' 1, 'wght' 500, 'GRAD' 0, 'opsz' 48; }
body:has( #rd_inpt_www_teal:checked ) label[ for="rd_inpt_www_teal" ] > span.icon_cntnr_g { background-color: var( --ifc-color ); }
body:has( #rd_inpt_www_darkcyan:checked ) { --thm-www-darkcyan-on: 1; --hue: 180; --satur: 100; --lghtn: 41; }
body:has( #rd_inpt_www_darkcyan:checked ) label[ for="rd_inpt_www_darkcyan" ]{ font-variation-settings: 'FILL' 1, 'wght' 500, 'GRAD' 0, 'opsz' 48; }
body:has( #rd_inpt_www_darkcyan:checked ) label[ for="rd_inpt_www_darkcyan" ] > span.icon_cntnr_g { background-color: var( --ifc-color ); }
body:has( #rd_inpt_www_lightseagreen:checked ) { --thm-www-lightseagreen-on: 1; --hue: 173; --satur: 70; --lghtn: 45; }
body:has( #rd_inpt_www_lightseagreen:checked ) label[ for="rd_inpt_www_lightseagreen" ]{ font-variation-settings: 'FILL' 1, 'wght' 500, 'GRAD' 0, 'opsz' 48; }
body:has( #rd_inpt_www_lightseagreen:checked ) label[ for="rd_inpt_www_lightseagreen" ] > span.icon_cntnr_g { background-color: var( --ifc-color ); }
body:has( #rd_inpt_www_cadetblue:checked ) { --thm-www-cadetblue-on: 1; --hue: 182; --satur: 25; --lghtn: 53; }
body:has( #rd_inpt_www_cadetblue:checked ) label[ for="rd_inpt_www_cadetblue" ]{ font-variation-settings: 'FILL' 1, 'wght' 500, 'GRAD' 0, 'opsz' 48; }
body:has( #rd_inpt_www_cadetblue:checked ) label[ for="rd_inpt_www_cadetblue" ] > span.icon_cntnr_g { background-color: var( --ifc-color ); }
body:has( #rd_inpt_www_darkturquoise:checked ) { --thm-www-darkturquoise-on: 1; --hue: 181; --satur: 100; --lghtn: 45; }
body:has( #rd_inpt_www_darkturquoise:checked ) label[ for="rd_inpt_www_darkturquoise" ]{ font-variation-settings: 'FILL' 1, 'wght' 500, 'GRAD' 0, 'opsz' 48; }
body:has( #rd_inpt_www_darkturquoise:checked ) label[ for="rd_inpt_www_darkturquoise" ] > span.icon_cntnr_g { background-color: var( --ifc-color ); }
body:has( #rd_inpt_www_mediumturquoise:checked ) { --thm-www-mediumturquoise-on: 1; --hue: 178; --satur: 60; --lghtn: 57; }
body:has( #rd_inpt_www_mediumturquoise:checked ) label[ for="rd_inpt_www_mediumturquoise" ]{ font-variation-settings: 'FILL' 1, 'wght' 500, 'GRAD' 0, 'opsz' 48; }
body:has( #rd_inpt_www_mediumturquoise:checked ) label[ for="rd_inpt_www_mediumturquoise" ] > span.icon_cntnr_g { background-color: var( --ifc-color ); }
body:has( #rd_inpt_www_turquoise:checked ) { --thm-www-turquoise-on: 1; --hue: 174; --satur: 72; --lghtn: 58; }
body:has( #rd_inpt_www_turquoise:checked ) label[ for="rd_inpt_www_turquoise" ]{ font-variation-settings: 'FILL' 1, 'wght' 500, 'GRAD' 0, 'opsz' 48; }
body:has( #rd_inpt_www_turquoise:checked ) label[ for="rd_inpt_www_turquoise" ] > span.icon_cntnr_g { background-color: var( --ifc-color ); }
body:has( #rd_inpt_www_aqua:checked ) { --thm-www-aqua-on: 1; --hue: 180; --satur: 100; --lghtn: 53; }
body:has( #rd_inpt_www_aqua:checked ) label[ for="rd_inpt_www_aqua" ]{ font-variation-settings: 'FILL' 1, 'wght' 500, 'GRAD' 0, 'opsz' 48; }
body:has( #rd_inpt_www_aqua:checked ) label[ for="rd_inpt_www_aqua" ] > span.icon_cntnr_g { background-color: var( --ifc-color ); }
body:has( #rd_inpt_www_cyan:checked ) { --thm-www-cyan-on: 1; --hue: 180; --satur: 100; --lghtn: 53; }
body:has( #rd_inpt_www_cyan:checked ) label[ for="rd_inpt_www_cyan" ]{ font-variation-settings: 'FILL' 1, 'wght' 500, 'GRAD' 0, 'opsz' 48; }
body:has( #rd_inpt_www_cyan:checked ) label[ for="rd_inpt_www_cyan" ] > span.icon_cntnr_g { background-color: var( --ifc-color ); }
body:has( #rd_inpt_www_aquamarine:checked ) { --thm-www-aquamarine-on: 1; --hue: 160; --satur: 100; --lghtn: 76; }
body:has( #rd_inpt_www_aquamarine:checked ) label[ for="rd_inpt_www_aquamarine" ]{ font-variation-settings: 'FILL' 1, 'wght' 500, 'GRAD' 0, 'opsz' 48; }
body:has( #rd_inpt_www_aquamarine:checked ) label[ for="rd_inpt_www_aquamarine" ] > span.icon_cntnr_g { background-color: var( --ifc-color ); }
body:has( #rd_inpt_www_paleturquoise:checked ) { --thm-www-paleturquoise-on: 1; --hue: 180; --satur: 65; --lghtn: 82; }
body:has( #rd_inpt_www_paleturquoise:checked ) label[ for="rd_inpt_www_paleturquoise" ]{ font-variation-settings: 'FILL' 1, 'wght' 500, 'GRAD' 0, 'opsz' 48; }
body:has( #rd_inpt_www_paleturquoise:checked ) label[ for="rd_inpt_www_paleturquoise" ] > span.icon_cntnr_g { background-color: var( --ifc-color ); }
body:has( #rd_inpt_www_lightcyan:checked ) { --thm-www-lightcyan-on: 1; --hue: 180; --satur: 100; --lghtn: 94; }
body:has( #rd_inpt_www_lightcyan:checked ) label[ for="rd_inpt_www_lightcyan" ]{ font-variation-settings: 'FILL' 1, 'wght' 500, 'GRAD' 0, 'opsz' 48; }
body:has( #rd_inpt_www_lightcyan:checked ) label[ for="rd_inpt_www_lightcyan" ] > span.icon_cntnr_g { background-color: var( --ifc-color ); }

body:has( #rd_inpt_www_darkgreen:checked ) { --thm-www-darkgreen-on: 1; --hue: 120; --satur: 90; --lghtn: 39; }
body:has( #rd_inpt_www_darkgreen:checked ) label[ for="rd_inpt_www_darkgreen" ]{ font-variation-settings: 'FILL' 1, 'wght' 500, 'GRAD' 0, 'opsz' 48; }
body:has( #rd_inpt_www_darkgreen:checked ) label[ for="rd_inpt_www_darkgreen" ] > span.icon_cntnr_g { background-color: var( --ifc-color ); }
body:has( #rd_inpt_www_green:checked ) { --thm-www-green-on: 1; --hue: 120; --satur: 100; --lghtn: 43; }
body:has( #rd_inpt_www_green:checked ) label[ for="rd_inpt_www_green" ]{ font-variation-settings: 'FILL' 1, 'wght' 500, 'GRAD' 0, 'opsz' 48; }
body:has( #rd_inpt_www_green:checked ) label[ for="rd_inpt_www_green" ] > span.icon_cntnr_g { background-color: var( --ifc-color ); }
body:has( #rd_inpt_www_darkolivegreen:checked ) { --thm-www-darkolivegreen-on: 1; --hue: 82; --satur: 39; --lghtn: 45; }
body:has( #rd_inpt_www_darkolivegreen:checked ) label[ for="rd_inpt_www_darkolivegreen" ]{ font-variation-settings: 'FILL' 1, 'wght' 500, 'GRAD' 0, 'opsz' 48; }
body:has( #rd_inpt_www_darkolivegreen:checked ) label[ for="rd_inpt_www_darkolivegreen" ] > span.icon_cntnr_g { background-color: var( --ifc-color ); }
body:has( #rd_inpt_www_forestgreen:checked ) { --thm-www-forestgreen-on: 1; --hue: 120; --satur: 61; --lghtn: 46; }
body:has( #rd_inpt_www_forestgreen:checked ) label[ for="rd_inpt_www_forestgreen" ]{ font-variation-settings: 'FILL' 1, 'wght' 500, 'GRAD' 0, 'opsz' 48; }
body:has( #rd_inpt_www_forestgreen:checked ) label[ for="rd_inpt_www_forestgreen" ] > span.icon_cntnr_g { background-color: var( --ifc-color ); }
body:has( #rd_inpt_www_seagreen:checked ) { --thm-www-seagreen-on: 1; --hue: 146; --satur: 50; --lghtn: 47; }
body:has( #rd_inpt_www_seagreen:checked ) label[ for="rd_inpt_www_seagreen" ]{ font-variation-settings: 'FILL' 1, 'wght' 500, 'GRAD' 0, 'opsz' 48; }
body:has( #rd_inpt_www_seagreen:checked ) label[ for="rd_inpt_www_seagreen" ] > span.icon_cntnr_g { background-color: var( --ifc-color ); }
body:has( #rd_inpt_www_olive:checked ) { --thm-www-olive-on: 1; --hue: 60; --satur: 100; --lghtn: 39; }
body:has( #rd_inpt_www_olive:checked ) label[ for="rd_inpt_www_olive" ]{ font-variation-settings: 'FILL' 1, 'wght' 500, 'GRAD' 0, 'opsz' 48; }
body:has( #rd_inpt_www_olive:checked ) label[ for="rd_inpt_www_olive" ] > span.icon_cntnr_g { background-color: var( --ifc-color ); }
body:has( #rd_inpt_www_olivedrab:checked ) { --thm-www-olivedrab-on: 1; --hue: 80; --satur: 60; --lghtn: 43; }
body:has( #rd_inpt_www_olivedrab:checked ) label[ for="rd_inpt_www_olivedrab" ]{ font-variation-settings: 'FILL' 1, 'wght' 500, 'GRAD' 0, 'opsz' 48; }
body:has( #rd_inpt_www_olivedrab:checked ) label[ for="rd_inpt_www_olivedrab" ] > span.icon_cntnr_g { background-color: var( --ifc-color ); }
body:has( #rd_inpt_www_mediumseagreen:checked ) { --thm-www-mediumseagreen-on: 1; --hue: 147; --satur: 50; --lghtn: 50; }
body:has( #rd_inpt_www_mediumseagreen:checked ) label[ for="rd_inpt_www_mediumseagreen" ]{ font-variation-settings: 'FILL' 1, 'wght' 500, 'GRAD' 0, 'opsz' 48; }
body:has( #rd_inpt_www_mediumseagreen:checked ) label[ for="rd_inpt_www_mediumseagreen" ] > span.icon_cntnr_g { background-color: var( --ifc-color ); }
body:has( #rd_inpt_www_limegreen:checked ) { --thm-www-limegreen-on: 1; --hue: 120; --satur: 61; --lghtn: 53; }
body:has( #rd_inpt_www_limegreen:checked ) label[ for="rd_inpt_www_limegreen" ]{ font-variation-settings: 'FILL' 1, 'wght' 500, 'GRAD' 0, 'opsz' 48; }
body:has( #rd_inpt_www_limegreen:checked ) label[ for="rd_inpt_www_limegreen" ] > span.icon_cntnr_g { background-color: var( --ifc-color ); }
body:has( #rd_inpt_www_lime:checked ) { --thm-www-lime-on: 1; --hue: 120; --satur: 100; --lghtn: 53; }
body:has( #rd_inpt_www_lime:checked ) label[ for="rd_inpt_www_lime" ]{ font-variation-settings: 'FILL' 1, 'wght' 500, 'GRAD' 0, 'opsz' 48; }
body:has( #rd_inpt_www_lime:checked ) label[ for="rd_inpt_www_lime" ] > span.icon_cntnr_g { background-color: var( --ifc-color ); }
body:has( #rd_inpt_www_springgreen:checked ) { --thm-www-springgreen-on: 1; --hue: 150; --satur: 100; --lghtn: 53; }
body:has( #rd_inpt_www_springgreen:checked ) label[ for="rd_inpt_www_springgreen" ]{ font-variation-settings: 'FILL' 1, 'wght' 500, 'GRAD' 0, 'opsz' 48; }
body:has( #rd_inpt_www_springgreen:checked ) label[ for="rd_inpt_www_springgreen" ] > span.icon_cntnr_g { background-color: var( --ifc-color ); }
body:has( #rd_inpt_www_mediumspringgreen:checked ) { --thm-www-mediumspringgreen-on: 1; --hue: 157; --satur: 100; --lghtn: 52; }
body:has( #rd_inpt_www_mediumspringgreen:checked ) label[ for="rd_inpt_www_mediumspringgreen" ]{ font-variation-settings: 'FILL' 1, 'wght' 500, 'GRAD' 0, 'opsz' 48; }
body:has( #rd_inpt_www_mediumspringgreen:checked ) label[ for="rd_inpt_www_mediumspringgreen" ] > span.icon_cntnr_g { background-color: var( --ifc-color ); }
body:has( #rd_inpt_www_darkseagreen:checked ) { --thm-www-darkseagreen-on: 1; --hue: 120; --satur: 25; --lghtn: 67; }
body:has( #rd_inpt_www_darkseagreen:checked ) label[ for="rd_inpt_www_darkseagreen" ]{ font-variation-settings: 'FILL' 1, 'wght' 500, 'GRAD' 0, 'opsz' 48; }
body:has( #rd_inpt_www_darkseagreen:checked ) label[ for="rd_inpt_www_darkseagreen" ] > span.icon_cntnr_g { background-color: var( --ifc-color ); }
body:has( #rd_inpt_www_mediumaquamarine:checked ) { --thm-www-mediumaquamarine-on: 1; --hue: 160; --satur: 51; --lghtn: 62; }
body:has( #rd_inpt_www_mediumaquamarine:checked ) label[ for="rd_inpt_www_mediumaquamarine" ]{ font-variation-settings: 'FILL' 1, 'wght' 500, 'GRAD' 0, 'opsz' 48; }
body:has( #rd_inpt_www_mediumaquamarine:checked ) label[ for="rd_inpt_www_mediumaquamarine" ] > span.icon_cntnr_g { background-color: var( --ifc-color ); }
body:has( #rd_inpt_www_yellowgreen:checked ) { --thm-www-yellowgreen-on: 1; --hue: 80; --satur: 61; --lghtn: 53; }
body:has( #rd_inpt_www_yellowgreen:checked ) label[ for="rd_inpt_www_yellowgreen" ]{ font-variation-settings: 'FILL' 1, 'wght' 500, 'GRAD' 0, 'opsz' 48; }
body:has( #rd_inpt_www_yellowgreen:checked ) label[ for="rd_inpt_www_yellowgreen" ] > span.icon_cntnr_g { background-color: var( --ifc-color ); }
body:has( #rd_inpt_www_lawngreen:checked ) { --thm-www-lawngreen-on: 1; --hue: 90; --satur: 100; --lghtn: 52; }
body:has( #rd_inpt_www_lawngreen:checked ) label[ for="rd_inpt_www_lawngreen" ]{ font-variation-settings: 'FILL' 1, 'wght' 500, 'GRAD' 0, 'opsz' 48; }
body:has( #rd_inpt_www_lawngreen:checked ) label[ for="rd_inpt_www_lawngreen" ] > span.icon_cntnr_g { background-color: var( --ifc-color ); }
body:has( #rd_inpt_www_chartreuse:checked ) { --thm-www-chartreuse-on: 1; --hue: 90; --satur: 100; --lghtn: 53; }
body:has( #rd_inpt_www_chartreuse:checked ) label[ for="rd_inpt_www_chartreuse" ]{ font-variation-settings: 'FILL' 1, 'wght' 500, 'GRAD' 0, 'opsz' 48; }
body:has( #rd_inpt_www_chartreuse:checked ) label[ for="rd_inpt_www_chartreuse" ] > span.icon_cntnr_g { background-color: var( --ifc-color ); }
body:has( #rd_inpt_www_lightgreen:checked ) { --thm-www-lightgreen-on: 1; --hue: 120; --satur: 73; --lghtn: 80; }
body:has( #rd_inpt_www_lightgreen:checked ) label[ for="rd_inpt_www_lightgreen" ]{ font-variation-settings: 'FILL' 1, 'wght' 500, 'GRAD' 0, 'opsz' 48; }
body:has( #rd_inpt_www_lightgreen:checked ) label[ for="rd_inpt_www_lightgreen" ] > span.icon_cntnr_g { background-color: var( --ifc-color ); }
body:has( #rd_inpt_www_greenyellow:checked ) { --thm-www-greenyellow-on: 1; --hue: 84; --satur: 100; --lghtn: 61; }
body:has( #rd_inpt_www_greenyellow:checked ) label[ for="rd_inpt_www_greenyellow" ]{ font-variation-settings: 'FILL' 1, 'wght' 500, 'GRAD' 0, 'opsz' 48; }
body:has( #rd_inpt_www_greenyellow:checked ) label[ for="rd_inpt_www_greenyellow" ] > span.icon_cntnr_g { background-color: var( --ifc-color ); }
body:has( #rd_inpt_www_palegreen:checked ) { --thm-www-palegreen-on: 1; --hue: 120; --satur: 93; --lghtn: 85; }
body:has( #rd_inpt_www_palegreen:checked ) label[ for="rd_inpt_www_palegreen" ]{ font-variation-settings: 'FILL' 1, 'wght' 500, 'GRAD' 0, 'opsz' 48; }
body:has( #rd_inpt_www_palegreen:checked ) label[ for="rd_inpt_www_palegreen" ] > span.icon_cntnr_g { background-color: var( --ifc-color ); }

body:has( #rd_inpt_www_darkkhaki:checked ) { --thm-www-darkkhaki-on: 1; --hue: 56; --satur: 38; --lghtn: 60; }
body:has( #rd_inpt_www_darkkhaki:checked ) label[ for="rd_inpt_www_darkkhaki" ]{ font-variation-settings: 'FILL' 1, 'wght' 500, 'GRAD' 0, 'opsz' 48; }
body:has( #rd_inpt_www_darkkhaki:checked ) label[ for="rd_inpt_www_darkkhaki" ] > span.icon_cntnr_g { background-color: var( --ifc-color ); }
body:has( #rd_inpt_www_gold:checked ) { --thm-www-gold-on: 1; --hue: 49; --satur: 100; --lghtn: 60; }
body:has( #rd_inpt_www_gold:checked ) label[ for="rd_inpt_www_gold" ]{ font-variation-settings: 'FILL' 1, 'wght' 500, 'GRAD' 0, 'opsz' 48; }
body:has( #rd_inpt_www_gold:checked ) label[ for="rd_inpt_www_gold" ] > span.icon_cntnr_g { background-color: var( --ifc-color ); }
body:has( #rd_inpt_www_khaki:checked ) { --thm-www-khaki-on: 1; --hue: 56; --satur: 55; --lghtn: 80; }
body:has( #rd_inpt_www_khaki:checked ) label[ for="rd_inpt_www_khaki" ]{ font-variation-settings: 'FILL' 1, 'wght' 500, 'GRAD' 0, 'opsz' 48; }
body:has( #rd_inpt_www_khaki:checked ) label[ for="rd_inpt_www_khaki" ] > span.icon_cntnr_g { background-color: var( --ifc-color ); }
body:has( #rd_inpt_www_peachpuff:checked ) { --thm-www-peachpuff-on: 1; --hue: 28; --satur: 100; --lghtn: 87; }
body:has( #rd_inpt_www_peachpuff:checked ) label[ for="rd_inpt_www_peachpuff" ]{ font-variation-settings: 'FILL' 1, 'wght' 500, 'GRAD' 0, 'opsz' 48; }
body:has( #rd_inpt_www_peachpuff:checked ) label[ for="rd_inpt_www_peachpuff" ] > span.icon_cntnr_g { background-color: var( --ifc-color ); }
body:has( #rd_inpt_www_yellow:checked ) { --thm-www-yellow-on: 1; --hue: 60; --satur: 100; --lghtn: 73; }
body:has( #rd_inpt_www_yellow:checked ) label[ for="rd_inpt_www_yellow" ]{ font-variation-settings: 'FILL' 1, 'wght' 500, 'GRAD' 0, 'opsz' 48; }
body:has( #rd_inpt_www_yellow:checked ) label[ for="rd_inpt_www_yellow" ] > span.icon_cntnr_g { background-color: var( --ifc-color ); }
body:has( #rd_inpt_www_palegoldenrod:checked ) { --thm-www-palegoldenrod-on: 1; --hue: 55; --satur: 62; --lghtn: 85; }
body:has( #rd_inpt_www_palegoldenrod:checked ) label[ for="rd_inpt_www_palegoldenrod" ]{ font-variation-settings: 'FILL' 1, 'wght' 500, 'GRAD' 0, 'opsz' 48; }
body:has( #rd_inpt_www_palegoldenrod:checked ) label[ for="rd_inpt_www_palegoldenrod" ] > span.icon_cntnr_g { background-color: var( --ifc-color ); }
body:has( #rd_inpt_www_moccasin:checked ) { --thm-www-moccasin-on: 1; --hue: 38; --satur: 100; --lghtn: 86; }
body:has( #rd_inpt_www_moccasin:checked ) label[ for="rd_inpt_www_moccasin" ]{ font-variation-settings: 'FILL' 1, 'wght' 500, 'GRAD' 0, 'opsz' 48; }
body:has( #rd_inpt_www_moccasin:checked ) label[ for="rd_inpt_www_moccasin" ] > span.icon_cntnr_g { background-color: var( --ifc-color ); }
body:has( #rd_inpt_www_papayawhip:checked ) { --thm-www-papayawhip-on: 1; --hue: 37; --satur: 100; --lghtn: 92; }
body:has( #rd_inpt_www_papayawhip:checked ) label[ for="rd_inpt_www_papayawhip" ]{ font-variation-settings: 'FILL' 1, 'wght' 500, 'GRAD' 0, 'opsz' 48; }
body:has( #rd_inpt_www_papayawhip:checked ) label[ for="rd_inpt_www_papayawhip" ] > span.icon_cntnr_g { background-color: var( --ifc-color ); }
body:has( #rd_inpt_www_lightgoldenrodyellow:checked ) { --thm-www-lightgoldenrodyellow-on: 1; --hue: 60; --satur: 80; --lghtn: 90; }
body:has( #rd_inpt_www_lightgoldenrodyellow:checked ) label[ for="rd_inpt_www_lightgoldenrodyellow" ]{ font-variation-settings: 'FILL' 1, 'wght' 500, 'GRAD' 0, 'opsz' 48; }
body:has( #rd_inpt_www_lightgoldenrodyellow:checked ) label[ for="rd_inpt_www_lightgoldenrodyellow" ] > span.icon_cntnr_g { background-color: var( --ifc-color ); }
body:has( #rd_inpt_www_lemonchiffon:checked ) { --thm-www-lemonchiffon-on: 1; --hue: 54; --satur: 100; --lghtn: 90; }
body:has( #rd_inpt_www_lemonchiffon:checked ) label[ for="rd_inpt_www_lemonchiffon" ]{ font-variation-settings: 'FILL' 1, 'wght' 500, 'GRAD' 0, 'opsz' 48; }
body:has( #rd_inpt_www_lemonchiffon:checked ) label[ for="rd_inpt_www_lemonchiffon" ] > span.icon_cntnr_g { background-color: var( --ifc-color ); }
body:has( #rd_inpt_www_lightyellow:checked ) { --thm-www-lightyellow-on: 1; --hue: 60; --satur: 100; --lghtn: 94; }
body:has( #rd_inpt_www_lightyellow:checked ) label[ for="rd_inpt_www_lightyellow" ]{ font-variation-settings: 'FILL' 1, 'wght' 500, 'GRAD' 0, 'opsz' 48; }
body:has( #rd_inpt_www_lightyellow:checked ) label[ for="rd_inpt_www_lightyellow" ] > span.icon_cntnr_g { background-color: var( --ifc-color ); }

body:has( #rd_inpt_www_orangered:checked ) { --thm-www-orangered-on: 1; --hue: 16; --satur: 100; --lghtn: 63; }
body:has( #rd_inpt_www_orangered:checked ) label[ for="rd_inpt_www_orangered" ]{ font-variation-settings: 'FILL' 1, 'wght' 500, 'GRAD' 0, 'opsz' 48; }
body:has( #rd_inpt_www_orangered:checked ) label[ for="rd_inpt_www_orangered" ] > span.icon_cntnr_g { background-color: var( --ifc-color ); }
body:has( #rd_inpt_www_tomato:checked ) { --thm-www-tomato-on: 1; --hue: 9; --satur: 100; --lghtn: 68; }
body:has( #rd_inpt_www_tomato:checked ) label[ for="rd_inpt_www_tomato" ]{ font-variation-settings: 'FILL' 1, 'wght' 500, 'GRAD' 0, 'opsz' 48; }
body:has( #rd_inpt_www_tomato:checked ) label[ for="rd_inpt_www_tomato" ] > span.icon_cntnr_g { background-color: var( --ifc-color ); }
body:has( #rd_inpt_www_darkorange:checked ) { --thm-www-darkorange-on: 1; --hue: 33; --satur: 100; --lghtn: 53; }
body:has( #rd_inpt_www_darkorange:checked ) label[ for="rd_inpt_www_darkorange" ]{ font-variation-settings: 'FILL' 1, 'wght' 500, 'GRAD' 0, 'opsz' 48; }
body:has( #rd_inpt_www_darkorange:checked ) label[ for="rd_inpt_www_darkorange" ] > span.icon_cntnr_g { background-color: var( --ifc-color ); }
body:has( #rd_inpt_www_coral:checked ) { --thm-www-coral-on: 1; --hue: 16; --satur: 100; --lghtn: 68; }
body:has( #rd_inpt_www_coral:checked ) label[ for="rd_inpt_www_coral" ]{ font-variation-settings: 'FILL' 1, 'wght' 500, 'GRAD' 0, 'opsz' 48; }
body:has( #rd_inpt_www_coral:checked ) label[ for="rd_inpt_www_coral" ] > span.icon_cntnr_g { background-color: var( --ifc-color ); }
body:has( #rd_inpt_www_orange:checked ) { --thm-www-orange-on: 1; --hue: 39; --satur: 100; --lghtn: 63; }
body:has( #rd_inpt_www_orange:checked ) label[ for="rd_inpt_www_orange" ]{ font-variation-settings: 'FILL' 1, 'wght' 500, 'GRAD' 0, 'opsz' 48; }
body:has( #rd_inpt_www_orange:checked ) label[ for="rd_inpt_www_orange" ] > span.icon_cntnr_g { background-color: var( --ifc-color ); }

body:has( #rd_inpt_www_maroon:checked ) { --thm-www-maroon-on: 1; --hue: 0; --satur: 90; --lghtn: 41; }
body:has( #rd_inpt_www_maroon:checked ) label[ for="rd_inpt_www_maroon" ]{ font-variation-settings: 'FILL' 1, 'wght' 500, 'GRAD' 0, 'opsz' 48; }
body:has( #rd_inpt_www_maroon:checked ) label[ for="rd_inpt_www_maroon" ] > span.icon_cntnr_g { background-color: var( --ifc-color ); }
body:has( #rd_inpt_www_brown:checked ) { --thm-www-brown-on: 1; --hue: 0; --satur: 59; --lghtn: 45; }
body:has( #rd_inpt_www_brown:checked ) label[ for="rd_inpt_www_brown" ]{ font-variation-settings: 'FILL' 1, 'wght' 500, 'GRAD' 0, 'opsz' 48; }
body:has( #rd_inpt_www_brown:checked ) label[ for="rd_inpt_www_brown" ] > span.icon_cntnr_g { background-color: var( --ifc-color ); }
body:has( #rd_inpt_www_saddlebrown:checked ) { --thm-www-saddlebrown-on: 1; --hue: 25; --satur: 76; --lghtn: 36; }
body:has( #rd_inpt_www_saddlebrown:checked ) label[ for="rd_inpt_www_saddlebrown" ]{ font-variation-settings: 'FILL' 1, 'wght' 500, 'GRAD' 0, 'opsz' 48; }
body:has( #rd_inpt_www_saddlebrown:checked ) label[ for="rd_inpt_www_saddlebrown" ] > span.icon_cntnr_g { background-color: var( --ifc-color ); }
body:has( #rd_inpt_www_sienna:checked ) { --thm-www-sienna-on: 1; --hue: 19; --satur: 56; --lghtn: 44; }
body:has( #rd_inpt_www_sienna:checked ) label[ for="rd_inpt_www_sienna" ]{ font-variation-settings: 'FILL' 1, 'wght' 500, 'GRAD' 0, 'opsz' 48; }
body:has( #rd_inpt_www_sienna:checked ) label[ for="rd_inpt_www_sienna" ] > span.icon_cntnr_g { background-color: var( --ifc-color ); }
body:has( #rd_inpt_www_chocolate:checked ) { --thm-www-chocolate-on: 1; --hue: 25; --satur: 75; --lghtn: 50; }
body:has( #rd_inpt_www_chocolate:checked ) label[ for="rd_inpt_www_chocolate" ]{ font-variation-settings: 'FILL' 1, 'wght' 500, 'GRAD' 0, 'opsz' 48; }
body:has( #rd_inpt_www_chocolate:checked ) label[ for="rd_inpt_www_chocolate" ] > span.icon_cntnr_g { background-color: var( --ifc-color ); }
body:has( #rd_inpt_www_darkgoldenrod:checked ) { --thm-www-darkgoldenrod-on: 1; --hue: 43; --satur: 89; --lghtn: 42; }
body:has( #rd_inpt_www_darkgoldenrod:checked ) label[ for="rd_inpt_www_darkgoldenrod" ]{ font-variation-settings: 'FILL' 1, 'wght' 500, 'GRAD' 0, 'opsz' 48; }
body:has( #rd_inpt_www_darkgoldenrod:checked ) label[ for="rd_inpt_www_darkgoldenrod" ] > span.icon_cntnr_g { background-color: var( --ifc-color ); }
body:has( #rd_inpt_www_peru:checked ) { --thm-www-peru-on: 1; --hue: 30; --satur: 59; --lghtn: 56; }
body:has( #rd_inpt_www_peru:checked ) label[ for="rd_inpt_www_peru" ]{ font-variation-settings: 'FILL' 1, 'wght' 500, 'GRAD' 0, 'opsz' 48; }
body:has( #rd_inpt_www_peru:checked ) label[ for="rd_inpt_www_peru" ] > span.icon_cntnr_g { background-color: var( --ifc-color ); }
body:has( #rd_inpt_www_rosybrown:checked ) { --thm-www-rosybrown-on: 1; --hue: 0; --satur: 25; --lghtn: 67; }
body:has( #rd_inpt_www_rosybrown:checked ) label[ for="rd_inpt_www_rosybrown" ]{ font-variation-settings: 'FILL' 1, 'wght' 500, 'GRAD' 0, 'opsz' 48; }
body:has( #rd_inpt_www_rosybrown:checked ) label[ for="rd_inpt_www_rosybrown" ] > span.icon_cntnr_g { background-color: var( --ifc-color ); }
body:has( #rd_inpt_www_goldenrod:checked ) { --thm-www-goldenrod-on: 1; --hue: 43; --satur: 74; --lghtn: 52; }
body:has( #rd_inpt_www_goldenrod:checked ) label[ for="rd_inpt_www_goldenrod" ]{ font-variation-settings: 'FILL' 1, 'wght' 500, 'GRAD' 0, 'opsz' 48; }
body:has( #rd_inpt_www_goldenrod:checked ) label[ for="rd_inpt_www_goldenrod" ] > span.icon_cntnr_g { background-color: var( --ifc-color ); }
body:has( #rd_inpt_www_sandybrown:checked ) { --thm-www-sandybrown-on: 1; --hue: 28; --satur: 87; --lghtn: 79; }
body:has( #rd_inpt_www_sandybrown:checked ) label[ for="rd_inpt_www_sandybrown" ]{ font-variation-settings: 'FILL' 1, 'wght' 500, 'GRAD' 0, 'opsz' 48; }
body:has( #rd_inpt_www_sandybrown:checked ) label[ for="rd_inpt_www_sandybrown" ] > span.icon_cntnr_g { background-color: var( --ifc-color ); }
body:has( #rd_inpt_www_tan:checked ) { --thm-www-tan-on: 1; --hue: 34; --satur: 44; --lghtn: 70; }
body:has( #rd_inpt_www_tan:checked ) label[ for="rd_inpt_www_tan" ]{ font-variation-settings: 'FILL' 1, 'wght' 500, 'GRAD' 0, 'opsz' 48; }
body:has( #rd_inpt_www_tan:checked ) label[ for="rd_inpt_www_tan" ] > span.icon_cntnr_g { background-color: var( --ifc-color ); }
body:has( #rd_inpt_www_burlywood:checked ) { --thm-www-burlywood-on: 1; --hue: 34; --satur: 57; --lghtn: 71; }
body:has( #rd_inpt_www_burlywood:checked ) label[ for="rd_inpt_www_burlywood" ]{ font-variation-settings: 'FILL' 1, 'wght' 500, 'GRAD' 0, 'opsz' 48; }
body:has( #rd_inpt_www_burlywood:checked ) label[ for="rd_inpt_www_burlywood" ] > span.icon_cntnr_g { background-color: var( --ifc-color ); }
body:has( #rd_inpt_www_wheat:checked ) { --thm-www-wheat-on: 1; --hue: 39; --satur: 77; --lghtn: 84; }
body:has( #rd_inpt_www_wheat:checked ) label[ for="rd_inpt_www_wheat" ]{ font-variation-settings: 'FILL' 1, 'wght' 500, 'GRAD' 0, 'opsz' 48; }
body:has( #rd_inpt_www_wheat:checked ) label[ for="rd_inpt_www_wheat" ] > span.icon_cntnr_g { background-color: var( --ifc-color ); }
body:has( #rd_inpt_www_navajowhite:checked ) { --thm-www-navajowhite-on: 1; --hue: 36; --satur: 100; --lghtn: 85; }
body:has( #rd_inpt_www_navajowhite:checked ) label[ for="rd_inpt_www_navajowhite" ]{ font-variation-settings: 'FILL' 1, 'wght' 500, 'GRAD' 0, 'opsz' 48; }
body:has( #rd_inpt_www_navajowhite:checked ) label[ for="rd_inpt_www_navajowhite" ] > span.icon_cntnr_g { background-color: var( --ifc-color ); }
body:has( #rd_inpt_www_bisque:checked ) { --thm-www-bisque-on: 1; --hue: 33; --satur: 100; --lghtn: 89; }
body:has( #rd_inpt_www_bisque:checked ) label[ for="rd_inpt_www_bisque" ]{ font-variation-settings: 'FILL' 1, 'wght' 500, 'GRAD' 0, 'opsz' 48; }
body:has( #rd_inpt_www_bisque:checked ) label[ for="rd_inpt_www_bisque" ] > span.icon_cntnr_g { background-color: var( --ifc-color ); }
body:has( #rd_inpt_www_blanchedalmond:checked ) { --thm-www-blanchedalmond-on: 1; --hue: 36; --satur: 100; --lghtn: 90; }
body:has( #rd_inpt_www_blanchedalmond:checked ) label[ for="rd_inpt_www_blanchedalmond" ]{ font-variation-settings: 'FILL' 1, 'wght' 500, 'GRAD' 0, 'opsz' 48; }
body:has( #rd_inpt_www_blanchedalmond:checked ) label[ for="rd_inpt_www_blanchedalmond" ] > span.icon_cntnr_g { background-color: var( --ifc-color ); }
body:has( #rd_inpt_www_cornsilk:checked ) { --thm-www-cornsilk-on: 1; --hue: 48; --satur: 100; --lghtn: 93; }
body:has( #rd_inpt_www_cornsilk:checked ) label[ for="rd_inpt_www_cornsilk" ]{ font-variation-settings: 'FILL' 1, 'wght' 500, 'GRAD' 0, 'opsz' 48; }
body:has( #rd_inpt_www_cornsilk:checked ) label[ for="rd_inpt_www_cornsilk" ] > span.icon_cntnr_g { background-color: var( --ifc-color ); }

body:has( #rd_inpt_www_mediumvioletred:checked ) { --thm-www-mediumvioletred-on: 1; --hue: 322; --satur: 81; --lghtn: 52; }
body:has( #rd_inpt_www_mediumvioletred:checked ) label[ for="rd_inpt_www_mediumvioletred" ]{ font-variation-settings: 'FILL' 1, 'wght' 500, 'GRAD' 0, 'opsz' 48; }
body:has( #rd_inpt_www_mediumvioletred:checked ) label[ for="rd_inpt_www_mediumvioletred" ] > span.icon_cntnr_g { background-color: var( --ifc-color ); }
body:has( #rd_inpt_www_deeppink:checked ) { --thm-www-deeppink-on: 1; --hue: 328; --satur: 100; --lghtn: 62; }
body:has( #rd_inpt_www_deeppink:checked ) label[ for="rd_inpt_www_deeppink" ]{ font-variation-settings: 'FILL' 1, 'wght' 500, 'GRAD' 0, 'opsz' 48; }
body:has( #rd_inpt_www_deeppink:checked ) label[ for="rd_inpt_www_deeppink" ] > span.icon_cntnr_g { background-color: var( --ifc-color ); }
body:has( #rd_inpt_www_palevioletred:checked ) { --thm-www-palevioletred-on: 1; --hue: 340; --satur: 60; --lghtn: 67; }
body:has( #rd_inpt_www_palevioletred:checked ) label[ for="rd_inpt_www_palevioletred" ]{ font-variation-settings: 'FILL' 1, 'wght' 500, 'GRAD' 0, 'opsz' 48; }
body:has( #rd_inpt_www_palevioletred:checked ) label[ for="rd_inpt_www_palevioletred" ] > span.icon_cntnr_g { background-color: var( --ifc-color ); }
body:has( #rd_inpt_www_hotpink:checked ) { --thm-www-hotpink-on: 1; --hue: 330; --satur: 100; --lghtn: 72; }
body:has( #rd_inpt_www_hotpink:checked ) label[ for="rd_inpt_www_hotpink" ]{ font-variation-settings: 'FILL' 1, 'wght' 500, 'GRAD' 0, 'opsz' 48; }
body:has( #rd_inpt_www_hotpink:checked ) label[ for="rd_inpt_www_hotpink" ] > span.icon_cntnr_g { background-color: var( --ifc-color ); }
body:has( #rd_inpt_www_lightpink:checked ) { --thm-www-lightpink-on: 1; --hue: 350; --satur: 100; --lghtn: 89; }
body:has( #rd_inpt_www_lightpink:checked ) label[ for="rd_inpt_www_lightpink" ]{ font-variation-settings: 'FILL' 1, 'wght' 500, 'GRAD' 0, 'opsz' 48; }
body:has( #rd_inpt_www_lightpink:checked ) label[ for="rd_inpt_www_lightpink" ] > span.icon_cntnr_g { background-color: var( --ifc-color ); }
body:has( #rd_inpt_www_pink:checked ) { --thm-www-pink-on: 1; --hue: 351; --satur: 100; --lghtn: 87; }
body:has( #rd_inpt_www_pink:checked ) label[ for="rd_inpt_www_pink" ]{ font-variation-settings: 'FILL' 1, 'wght' 500, 'GRAD' 0, 'opsz' 48; }
body:has( #rd_inpt_www_pink:checked ) label[ for="rd_inpt_www_pink" ] > span.icon_cntnr_g { background-color: var( --ifc-color ); }

body:has( #rd_inpt_www_darkred:checked ) { --thm-www-darkred-on: 1; --hue: 0; --satur: 100; --lghtn: 45; }
body:has( #rd_inpt_www_darkred:checked ) label[ for="rd_inpt_www_darkred" ]{ font-variation-settings: 'FILL' 1, 'wght' 500, 'GRAD' 0, 'opsz' 48; }
body:has( #rd_inpt_www_darkred:checked ) label[ for="rd_inpt_www_darkred" ] > span.icon_cntnr_g { background-color: var( --ifc-color ); }
body:has( #rd_inpt_www_red:checked ) { --thm-www-red-on: 1; --hue: 0; --satur: 100; --lghtn: 63; }
body:has( #rd_inpt_www_red:checked ) label[ for="rd_inpt_www_red" ]{ font-variation-settings: 'FILL' 1, 'wght' 500, 'GRAD' 0, 'opsz' 48; }
body:has( #rd_inpt_www_red:checked ) label[ for="rd_inpt_www_red" ] > span.icon_cntnr_g { background-color: var( --ifc-color ); }
body:has( #rd_inpt_www_firebrick:checked ) { --thm-www-firebrick-on: 1; --hue: 0; --satur: 63; --lghtn: 46; }
body:has( #rd_inpt_www_firebrick:checked ) label[ for="rd_inpt_www_firebrick" ]{ font-variation-settings: 'FILL' 1, 'wght' 500, 'GRAD' 0, 'opsz' 48; }
body:has( #rd_inpt_www_firebrick:checked ) label[ for="rd_inpt_www_firebrick" ] > span.icon_cntnr_g { background-color: var( --ifc-color ); }
body:has( #rd_inpt_www_crimson:checked ) { --thm-www-crimson-on: 1; --hue: 348; --satur: 83; --lghtn: 50; }
body:has( #rd_inpt_www_crimson:checked ) label[ for="rd_inpt_www_crimson" ]{ font-variation-settings: 'FILL' 1, 'wght' 500, 'GRAD' 0, 'opsz' 48; }
body:has( #rd_inpt_www_crimson:checked ) label[ for="rd_inpt_www_crimson" ] > span.icon_cntnr_g { background-color: var( --ifc-color ); }
body:has( #rd_inpt_www_indianred:checked ) { --thm-www-indianred-on: 1; --hue: 0; --satur: 43; --lghtn: 70; }
body:has( #rd_inpt_www_indianred:checked ) label[ for="rd_inpt_www_indianred" ]{ font-variation-settings: 'FILL' 1, 'wght' 500, 'GRAD' 0, 'opsz' 48; }
body:has( #rd_inpt_www_indianred:checked ) label[ for="rd_inpt_www_indianred" ] > span.icon_cntnr_g { background-color: var( --ifc-color ); }
body:has( #rd_inpt_www_lightcoral:checked ) { --thm-www-lightcoral-on: 1; --hue: 10; --satur: 84; --lghtn: 78; }
body:has( #rd_inpt_www_lightcoral:checked ) label[ for="rd_inpt_www_lightcoral" ]{ font-variation-settings: 'FILL' 1, 'wght' 500, 'GRAD' 0, 'opsz' 48; }
body:has( #rd_inpt_www_lightcoral:checked ) label[ for="rd_inpt_www_lightcoral" ] > span.icon_cntnr_g { background-color: var( --ifc-color ); }
body:has( #rd_inpt_www_salmon:checked ) { --thm-www-salmon-on: 1; --hue: 6; --satur: 93; --lghtn: 77; }
body:has( #rd_inpt_www_salmon:checked ) label[ for="rd_inpt_www_salmon" ]{ font-variation-settings: 'FILL' 1, 'wght' 500, 'GRAD' 0, 'opsz' 48; }
body:has( #rd_inpt_www_salmon:checked ) label[ for="rd_inpt_www_salmon" ] > span.icon_cntnr_g { background-color: var( --ifc-color ); }
body:has( #rd_inpt_www_darksalmon:checked ) { --thm-www-darksalmon-on: 1; --hue: 15; --satur: 72; --lghtn: 76; }
body:has( #rd_inpt_www_darksalmon:checked ) label[ for="rd_inpt_www_darksalmon" ]{ font-variation-settings: 'FILL' 1, 'wght' 500, 'GRAD' 0, 'opsz' 48; }
body:has( #rd_inpt_www_darksalmon:checked ) label[ for="rd_inpt_www_darksalmon" ] > span.icon_cntnr_g { background-color: var( --ifc-color ); }
body:has( #rd_inpt_www_lightsalmon:checked ) { --thm-www-lightsalmon-on: 1; --hue: 17; --satur: 100; --lghtn: 80; }
body:has( #rd_inpt_www_lightsalmon:checked ) label[ for="rd_inpt_www_lightsalmon" ]{ font-variation-settings: 'FILL' 1, 'wght' 500, 'GRAD' 0, 'opsz' 48; }
body:has( #rd_inpt_www_lightsalmon:checked ) label[ for="rd_inpt_www_lightsalmon" ] > span.icon_cntnr_g { background-color: var( --ifc-color ); }

body:has( #rd_inpt_www_mistyrose:checked ) { --thm-www-mistyrose-on: 1; --hue: 6; --satur: 100; --lghtn: 94; }
body:has( #rd_inpt_www_mistyrose:checked ) label[ for="rd_inpt_www_mistyrose" ]{ font-variation-settings: 'FILL' 1, 'wght' 500, 'GRAD' 0, 'opsz' 48; }
body:has( #rd_inpt_www_mistyrose:checked ) label[ for="rd_inpt_www_mistyrose" ] > span.icon_cntnr_g { background-color: var( --ifc-color ); }
body:has( #rd_inpt_www_antiquewhite:checked ) { --thm-www-antiquewhite-on: 1; --hue: 34; --satur: 78; --lghtn: 93; }
body:has( #rd_inpt_www_antiquewhite:checked ) label[ for="rd_inpt_www_antiquewhite" ]{ font-variation-settings: 'FILL' 1, 'wght' 500, 'GRAD' 0, 'opsz' 48; }
body:has( #rd_inpt_www_antiquewhite:checked ) label[ for="rd_inpt_www_antiquewhite" ] > span.icon_cntnr_g { background-color: var( --ifc-color ); }
body:has( #rd_inpt_www_linen:checked ) { --thm-www-linen-on: 1; --hue: 30; --satur: 67; --lghtn: 94; }
body:has( #rd_inpt_www_linen:checked ) label[ for="rd_inpt_www_linen" ]{ font-variation-settings: 'FILL' 1, 'wght' 500, 'GRAD' 0, 'opsz' 48; }
body:has( #rd_inpt_www_linen:checked ) label[ for="rd_inpt_www_linen" ] > span.icon_cntnr_g { background-color: var( --ifc-color ); }
body:has( #rd_inpt_www_beige:checked ) { --thm-www-beige-on: 1; --hue: 60; --satur: 56; --lghtn: 91; }
body:has( #rd_inpt_www_beige:checked ) label[ for="rd_inpt_www_beige" ]{ font-variation-settings: 'FILL' 1, 'wght' 500, 'GRAD' 0, 'opsz' 48; }
body:has( #rd_inpt_www_beige:checked ) label[ for="rd_inpt_www_beige" ] > span.icon_cntnr_g { background-color: var( --ifc-color ); }
body:has( #rd_inpt_www_whitesmoke:checked ) { --thm-www-whitesmoke-on: 1; --hue: 0; --satur: 0; --lghtn: 96; }
body:has( #rd_inpt_www_whitesmoke:checked ) label[ for="rd_inpt_www_whitesmoke" ]{ font-variation-settings: 'FILL' 1, 'wght' 500, 'GRAD' 0, 'opsz' 48; }
body:has( #rd_inpt_www_whitesmoke:checked ) label[ for="rd_inpt_www_whitesmoke" ] > span.icon_cntnr_g { background-color: var( --ifc-color ); }
body:has( #rd_inpt_www_lavenderblush:checked ) { --thm-www-lavenderblush-on: 1; --hue: 340; --satur: 90; --lghtn: 97; }
body:has( #rd_inpt_www_lavenderblush:checked ) label[ for="rd_inpt_www_lavenderblush" ]{ font-variation-settings: 'FILL' 1, 'wght' 500, 'GRAD' 0, 'opsz' 48; }
body:has( #rd_inpt_www_lavenderblush:checked ) label[ for="rd_inpt_www_lavenderblush" ] > span.icon_cntnr_g { background-color: var( --ifc-color ); }
body:has( #rd_inpt_www_oldlace:checked ) { --thm-www-oldlace-on: 1; --hue: 39; --satur: 85; --lghtn: 95; }
body:has( #rd_inpt_www_oldlace:checked ) label[ for="rd_inpt_www_oldlace" ]{ font-variation-settings: 'FILL' 1, 'wght' 500, 'GRAD' 0, 'opsz' 48; }
body:has( #rd_inpt_www_oldlace:checked ) label[ for="rd_inpt_www_oldlace" ] > span.icon_cntnr_g { background-color: var( --ifc-color ); }
body:has( #rd_inpt_www_aliceblue:checked ) { --thm-www-aliceblue-on: 1; --hue: 208; --satur: 100; --lghtn: 97; }
body:has( #rd_inpt_www_aliceblue:checked ) label[ for="rd_inpt_www_aliceblue" ]{ font-variation-settings: 'FILL' 1, 'wght' 500, 'GRAD' 0, 'opsz' 48; }
body:has( #rd_inpt_www_aliceblue:checked ) label[ for="rd_inpt_www_aliceblue" ] > span.icon_cntnr_g { background-color: var( --ifc-color ); }
body:has( #rd_inpt_www_seashell:checked ) { --thm-www-seashell-on: 1; --hue: 25; --satur: 100; --lghtn: 97; }
body:has( #rd_inpt_www_seashell:checked ) label[ for="rd_inpt_www_seashell" ]{ font-variation-settings: 'FILL' 1, 'wght' 500, 'GRAD' 0, 'opsz' 48; }
body:has( #rd_inpt_www_seashell:checked ) label[ for="rd_inpt_www_seashell" ] > span.icon_cntnr_g { background-color: var( --ifc-color ); }
body:has( #rd_inpt_www_ghostwhite:checked ) { --thm-www-ghostwhite-on: 1; --hue: 240; --satur: 100; --lghtn: 99; }
body:has( #rd_inpt_www_ghostwhite:checked ) label[ for="rd_inpt_www_ghostwhite" ]{ font-variation-settings: 'FILL' 1, 'wght' 500, 'GRAD' 0, 'opsz' 48; }
body:has( #rd_inpt_www_ghostwhite:checked ) label[ for="rd_inpt_www_ghostwhite" ] > span.icon_cntnr_g { background-color: var( --ifc-color ); }
body:has( #rd_inpt_www_honeydew:checked ) { --thm-www-honeydew-on: 1; --hue: 120; --satur: 100; --lghtn: 97; }
body:has( #rd_inpt_www_honeydew:checked ) label[ for="rd_inpt_www_honeydew" ]{ font-variation-settings: 'FILL' 1, 'wght' 500, 'GRAD' 0, 'opsz' 48; }
body:has( #rd_inpt_www_honeydew:checked ) label[ for="rd_inpt_www_honeydew" ] > span.icon_cntnr_g { background-color: var( --ifc-color ); }
body:has( #rd_inpt_www_floralwhite:checked ) { --thm-www-floralwhite-on: 1; --hue: 40; --satur: 100; --lghtn: 97; }
body:has( #rd_inpt_www_floralwhite:checked ) label[ for="rd_inpt_www_floralwhite" ]{ font-variation-settings: 'FILL' 1, 'wght' 500, 'GRAD' 0, 'opsz' 48; }
body:has( #rd_inpt_www_floralwhite:checked ) label[ for="rd_inpt_www_floralwhite" ] > span.icon_cntnr_g { background-color: var( --ifc-color ); }
body:has( #rd_inpt_www_azure:checked ) { --thm-www-azure-on: 1; --hue: 180; --satur: 100; --lghtn: 97; }
body:has( #rd_inpt_www_azure:checked ) label[ for="rd_inpt_www_azure" ]{ font-variation-settings: 'FILL' 1, 'wght' 500, 'GRAD' 0, 'opsz' 48; }
body:has( #rd_inpt_www_azure:checked ) label[ for="rd_inpt_www_azure" ] > span.icon_cntnr_g { background-color: var( --ifc-color ); }
body:has( #rd_inpt_www_mintcream:checked ) { --thm-www-mintcream-on: 1; --hue: 150; --satur: 100; --lghtn: 98; }
body:has( #rd_inpt_www_mintcream:checked ) label[ for="rd_inpt_www_mintcream" ]{ font-variation-settings: 'FILL' 1, 'wght' 500, 'GRAD' 0, 'opsz' 48; }
body:has( #rd_inpt_www_mintcream:checked ) label[ for="rd_inpt_www_mintcream" ] > span.icon_cntnr_g { background-color: var( --ifc-color ); }
body:has( #rd_inpt_www_snow:checked ) { --thm-www-snow-on: 1; --hue: 0; --satur: 50; --lghtn: 99; }
body:has( #rd_inpt_www_snow:checked ) label[ for="rd_inpt_www_snow" ]{ font-variation-settings: 'FILL' 1, 'wght' 500, 'GRAD' 0, 'opsz' 48; }
body:has( #rd_inpt_www_snow:checked ) label[ for="rd_inpt_www_snow" ] > span.icon_cntnr_g { background-color: var( --ifc-color ); }
body:has( #rd_inpt_www_ivory:checked ) { --thm-www-ivory-on: 1; --hue: 60; --satur: 50; --lghtn: 97; }
body:has( #rd_inpt_www_ivory:checked ) label[ for="rd_inpt_www_ivory" ]{ font-variation-settings: 'FILL' 1, 'wght' 500, 'GRAD' 0, 'opsz' 48; }
body:has( #rd_inpt_www_ivory:checked ) label[ for="rd_inpt_www_ivory" ] > span.icon_cntnr_g { background-color: var( --ifc-color ); }
body:has( #rd_inpt_www_white:checked ) { --thm-www-white-on: 1; --hue: 0; --satur: 0; --lghtn: 100; }
body:has( #rd_inpt_www_white:checked ) label[ for="rd_inpt_www_white" ]{ font-variation-settings: 'FILL' 1, 'wght' 500, 'GRAD' 0, 'opsz' 48; }
body:has( #rd_inpt_www_white:checked ) label[ for="rd_inpt_www_white" ] > span.icon_cntnr_g { background-color: var( --ifc-color ); }

body:has( #rd_inpt_www_black:checked ) { --thm-www-black-on: 1; --hue: 0; --satur: 0; --lghtn: 20; }
body:has( #rd_inpt_www_black:checked ) label[ for="rd_inpt_www_black" ]{ font-variation-settings: 'FILL' 1, 'wght' 500, 'GRAD' 0, 'opsz' 48; }
body:has( #rd_inpt_www_black:checked ) label[ for="rd_inpt_www_black" ] > span.icon_cntnr_g { background-color: var( --ifc-color ); }
body:has( #rd_inpt_www_darkslategray:checked ) { --thm-www-darkslategray-on: 1; --hue: 180; --satur: 25; --lghtn: 32; }
body:has( #rd_inpt_www_darkslategray:checked ) label[ for="rd_inpt_www_darkslategray" ]{ font-variation-settings: 'FILL' 1, 'wght' 500, 'GRAD' 0, 'opsz' 48; }
body:has( #rd_inpt_www_darkslategray:checked ) label[ for="rd_inpt_www_darkslategray" ] > span.icon_cntnr_g { background-color: var( --ifc-color ); }
body:has( #rd_inpt_www_dimgray:checked ) { --thm-www-dimgray-on: 1; --hue: 0; --satur: 0; --lghtn: 45; }
body:has( #rd_inpt_www_dimgray:checked ) label[ for="rd_inpt_www_dimgray" ]{ font-variation-settings: 'FILL' 1, 'wght' 500, 'GRAD' 0, 'opsz' 48; }
body:has( #rd_inpt_www_dimgray:checked ) label[ for="rd_inpt_www_dimgray" ] > span.icon_cntnr_g { background-color: var( --ifc-color ); }
body:has( #rd_inpt_www_slategray:checked ) { --thm-www-slategray-on: 1; --hue: 210; --satur: 13; --lghtn: 53; }
body:has( #rd_inpt_www_slategray:checked ) label[ for="rd_inpt_www_slategray" ]{ font-variation-settings: 'FILL' 1, 'wght' 500, 'GRAD' 0, 'opsz' 48; }
body:has( #rd_inpt_www_slategray:checked ) label[ for="rd_inpt_www_slategray" ] > span.icon_cntnr_g { background-color: var( --ifc-color ); }
body:has( #rd_inpt_www_gray:checked ) { --thm-www-gray-on: 1; --hue: 0; --satur: 0; --lghtn: 53; }
body:has( #rd_inpt_www_gray:checked ) label[ for="rd_inpt_www_gray" ]{ font-variation-settings: 'FILL' 1, 'wght' 500, 'GRAD' 0, 'opsz' 48; }
body:has( #rd_inpt_www_gray:checked ) label[ for="rd_inpt_www_gray" ] > span.icon_cntnr_g { background-color: var( --ifc-color ); }
body:has( #rd_inpt_www_lightslategray:checked ) { --thm-www-lightslategray-on: 1; --hue: 210; --satur: 14; --lghtn: 56; }
body:has( #rd_inpt_www_lightslategray:checked ) label[ for="rd_inpt_www_lightslategray" ]{ font-variation-settings: 'FILL' 1, 'wght' 500, 'GRAD' 0, 'opsz' 48; }
body:has( #rd_inpt_www_lightslategray:checked ) label[ for="rd_inpt_www_lightslategray" ] > span.icon_cntnr_g { background-color: var( --ifc-color ); }
body:has( #rd_inpt_www_darkgray:checked ) { --thm-www-darkgray-on: 1; --hue: 0; --satur: 0; --lghtn: 68; }
body:has( #rd_inpt_www_darkgray:checked ) label[ for="rd_inpt_www_darkgray" ]{ font-variation-settings: 'FILL' 1, 'wght' 500, 'GRAD' 0, 'opsz' 48; }
body:has( #rd_inpt_www_darkgray:checked ) label[ for="rd_inpt_www_darkgray" ] > span.icon_cntnr_g { background-color: var( --ifc-color ); }
body:has( #rd_inpt_www_silver:checked ) { --thm-www-silver-on: 1; --hue: 0; --satur: 0; --lghtn: 76; }
body:has( #rd_inpt_www_silver:checked ) label[ for="rd_inpt_www_silver" ]{ font-variation-settings: 'FILL' 1, 'wght' 500, 'GRAD' 0, 'opsz' 48; }
body:has( #rd_inpt_www_silver:checked ) label[ for="rd_inpt_www_silver" ] > span.icon_cntnr_g { background-color: var( --ifc-color ); }
body:has( #rd_inpt_www_lightgray:checked ) { --thm-www-lightgray-on: 1; --hue: 0; --satur: 0; --lghtn: 84; }
body:has( #rd_inpt_www_lightgray:checked ) label[ for="rd_inpt_www_lightgray" ]{ font-variation-settings: 'FILL' 1, 'wght' 500, 'GRAD' 0, 'opsz' 48; }
body:has( #rd_inpt_www_lightgray:checked ) label[ for="rd_inpt_www_lightgray" ] > span.icon_cntnr_g { background-color: var( --ifc-color ); }
body:has( #rd_inpt_www_gainsboro:checked ) { --thm-www-gainsboro-on: 1; --hue: 0; --satur: 0; --lghtn: 87; }
body:has( #rd_inpt_www_gainsboro:checked ) label[ for="rd_inpt_www_gainsboro" ]{ font-variation-settings: 'FILL' 1, 'wght' 500, 'GRAD' 0, 'opsz' 48; }
body:has( #rd_inpt_www_gainsboro:checked ) label[ for="rd_inpt_www_gainsboro" ] > span.icon_cntnr_g { background-color: var( --ifc-color ); }

/* Portion of having multiple swapping labels to enable No Choice radio input behavior */
/* From: https://stackoverflow.com/a/52990834 by StackOverflow user SamGoody */
/* Modified to use distant hidden input selectors */
body:has( #nv_pltt_tgl:checked ) label[ for="nv_pltt_tgl" ]{ display: none }
body:has( #nv_pltt_tgl:not(:checked) ) label[ for="nv_pltt_tgl" ] + label{ display: none }
body:has( #nv_img_tgl:checked ) label[ for="nv_img_tgl" ]{ display: none }
body:has( #nv_img_tgl:not(:checked) ) label[ for="nv_img_tgl" ] + label{ display: none }

/* Portion that causes a dropdown to appear if a certain radio input is selected */
/* Because of only one label being selectable, only one dropdown should appear at a time */
/* With zero (0) visible as an alternative because of the above radio input swapping */
body:has( #nv_pltt_tgl:checked ) label[ for="nv_pltt_tgl" ] + label + .nv_drpdn{ display: flex; }
body:has( #nv_img_tgl:checked  ) label[ for="nv_img_tgl"  ] + label + .nv_drpdn{ display: flex; }

/* Portions to connect labels from different parts of the page together so they trigger the same checkboxes */
.subpage_main_target_link { font-variation-settings: 'FILL' 1, 'wght' 500, 'GRAD' 0, 'opsz' 48; }
.subpage_main_target_link > span.icon_cntnr_g { background-color: var( --ifc-color ); }
body:has(                :target   ) .subpage_main_target_link     { font-variation-settings: 'FILL' 0, 'wght' 500, 'GRAD' 0, 'opsz' 48; }
body:has(                :target   ) .subpage_main_target_link     > span.icon_cntnr_g { background-color: transparent; }
body:has( #section_resume:target,
          #rsm_skills_trg:target,
          #rsm_work_trg:target,
          #rsm_publications_trg:target,
          #rsm_education_trg:target,
          #rsm_prof_awards_trg:target,
          #rsm_academic_awards_trg:target,
          #rsm_languages_trg:target   ) .subpage_resume_target_link   { font-variation-settings: 'FILL' 1, 'wght' 500, 'GRAD' 0, 'opsz' 48; }
body:has( #section_resume:target,
          #rsm_skills_trg:target,
          #rsm_work_trg:target,
          #rsm_publications_trg:target,
          #rsm_education_trg:target,
          #rsm_prof_awards_trg:target,
          #rsm_academic_awards_trg:target,
          #rsm_languages_trg:target   ) .subpage_resume_target_link   > span.icon_cntnr_g { background-color: var( --ifc-color ); }
body:has( #section_projects:target,
          #prj_sftwr_trg:target,
          #prj_math_trg:target,
          #prj_nasa_trg:target,
          #prj_volunteer_trg:target,
          #prj_publications_trg:target,
          #prj_math_mtg_stats_trg:target,
          #prj_math_star_trek_stats_trg:target,
          #prj_math_star_trek_stats_ds9_trg:target,
          #prj_sftwr_opengl_trg:target,
          #prj_sftwr_shadertoy_trg:target,
          #prj_nasa_asmat_trg:target,
          #prj_nasa_water_trg:target,
          #prj_nasa_liftoff_debris_trg:target,
          #prj_volunteer_palestine_trg:target ) .subpage_projects_target_link { font-variation-settings: 'FILL' 1, 'wght' 500, 'GRAD' 0, 'opsz' 48; }
body:has( #section_projects:target,
          #prj_sftwr_trg:target,
          #prj_math_trg:target,
          #prj_nasa_trg:target,
          #prj_volunteer_trg:target,
          #prj_publications_trg:target,
          #prj_math_mtg_stats_trg:target,
          #prj_math_star_trek_stats_trg:target,
          #prj_math_star_trek_stats_ds9_trg:target,
          #prj_sftwr_opengl_trg:target,
          #prj_sftwr_shadertoy_trg:target,
          #prj_nasa_asmat_trg:target,
          #prj_nasa_water_trg:target,
          #prj_nasa_liftoff_debris_trg:target,
          #prj_volunteer_palestine_trg:target ) .subpage_projects_target_link > span.icon_cntnr_g { background-color: var( --ifc-color ); }
body:has( #section_hobby:target    ) .subpage_hobby_target_link    { font-variation-settings: 'FILL' 1, 'wght' 500, 'GRAD' 0, 'opsz' 48; }
body:has( #section_hobby:target    ) .subpage_hobby_target_link    > span.icon_cntnr_g { background-color: var( --ifc-color ); }

body:has( #section_hobby:target       ) .subpage_hobby_target_link > .trg_on{ display: none }
body:has( #section_hobby:not(:target) ) .subpage_hobby_target_link > .trg_off{ display: none }

#section_resume   { display: none }
#section_projects { display: none }
#section_hobby    { display: none }
body:has(                      :target   ) #section_main { display: none }
body:has( #section_resume:target,
          #rsm_skills_trg:target,
          #rsm_work_trg:target,
          #rsm_publications_trg:target,
          #rsm_education_trg:target,
          #rsm_prof_awards_trg:target,
          #rsm_academic_awards_trg:target,
          #rsm_languages_trg:target   ) #section_resume { display: flex; }
body:has( #section_projects:target,
          #prj_sftwr_trg:target,
          #prj_math_trg:target,
          #prj_nasa_trg:target,
          #prj_volunteer_trg:target,
          #prj_publications_trg:target,
          #prj_photos_trg:target,
          #prj_sftwr_opengl_trg:target,
          #prj_sftwr_shadertoy_trg:target,
          #prj_math_mtg_stats_trg:target,
          #prj_math_star_trek_stats_trg:target,
          #prj_math_star_trek_stats_ds9_trg:target,
          #prj_nasa_asmat_trg:target,
          #prj_nasa_water_trg:target,
          #prj_nasa_liftoff_debris_trg:target,
          #prj_volunteer_palestine_trg:target ) #section_projects { display: flex; }
body:has( #section_hobby:target    ) #section_hobby    { display: flex; }

#rsm_skills_drwr          { display: none }
#rsm_work_drwr            { display: none }
#rsm_publications_drwr    { display: none }
#rsm_education_drwr       { display: none }
#rsm_prof_awards_drwr     { display: none }
#rsm_academic_awards_drwr { display: none }
#rsm_languages_drwr       { display: none }

body:has( #rsm_skills_trg:target          ) #rsm_skills_drwr          { display: flex; }
body:has( #rsm_work_trg:target            ) #rsm_work_drwr            { display: flex; }
body:has( #rsm_publications_trg:target    ) #rsm_publications_drwr    { display: flex; }
body:has( #rsm_education_trg:target       ) #rsm_education_drwr       { display: flex; }
body:has( #rsm_prof_awards_trg:target     ) #rsm_prof_awards_drwr     { display: flex; }
body:has( #rsm_academic_awards_trg:target ) #rsm_academic_awards_drwr { display: flex; }
body:has( #rsm_languages_trg:target       ) #rsm_languages_drwr       { display: flex; }

#prj_sftwr_cntnr        { display: none }
#prj_math_cntnr         { display: none }
#prj_nasa_cntnr         { display: none }
#prj_volunteer_cntnr    { display: none }
#prj_publications_cntnr { display: none }

body:has( #prj_sftwr_trg:target,
          #prj_sftwr_opengl_trg:target,
          #prj_sftwr_shadertoy_trg:target ) #prj_sftwr_cntnr         { display: flex; }
body:has( #prj_math_trg:target,
          #prj_math_mtg_stats_trg:target,
          #prj_math_star_trek_stats_trg:target,
          #prj_math_star_trek_stats_ds9_trg:target ) #prj_math_cntnr { display: flex; }
body:has( #prj_nasa_trg:target,
          #prj_nasa_asmat_trg:target,
          #prj_nasa_water_trg:target,
          #prj_nasa_liftoff_debris_trg:target ) #prj_nasa_cntnr         { display: flex; }
body:has( #prj_volunteer_trg:target,
          #prj_volunteer_palestine_trg:target       ) #prj_volunteer_cntnr    { display: flex; }
body:has( #prj_publications_trg:target    ) #prj_publications_cntnr { display: flex; }

body:has( #prj_sftwr_opengl_trg:target,
          #prj_sftwr_shadertoy_trg:target ) #prj_sftwr_trg .bttn_off { display:none; }
body:has( #prj_sftwr_opengl_trg:target,
          #prj_sftwr_shadertoy_trg:target ) #prj_sftwr_trg .bttn_on { display:inline-block; }
body:has( #prj_math_mtg_stats_trg:target,
          #prj_math_star_trek_stats_trg:target,
          #prj_math_star_trek_stats_ds9_trg:target ) #prj_math_trg .bttn_off { display:none; }
body:has( #prj_math_mtg_stats_trg:target,
          #prj_math_star_trek_stats_trg:target,
          #prj_math_star_trek_stats_ds9_trg:target ) #prj_math_trg .bttn_on { display:inline-block; }
body:has( #prj_nasa_asmat_trg:target,
          #prj_nasa_water_trg:target,
          #prj_nasa_liftoff_debris_trg:target ) #prj_nasa_trg .bttn_off { display:none; }
body:has( #prj_nasa_asmat_trg:target,
          #prj_nasa_water_trg:target,
          #prj_nasa_liftoff_debris_trg:target ) #prj_nasa_trg .bttn_on  { display:inline-block; }
body:has( #prj_volunteer_palestine_trg:target ) #prj_volunteer_trg .bttn_off { display:none; }
body:has( #prj_volunteer_palestine_trg:target ) #prj_volunteer_trg .bttn_on  { display:inline-block; }

#prj_sftwr_opengl_drwr             { display: none }
#prj_sftwr_shadertoy_drwr          { display: none }
#prj_math_mtg_stats_drwr           { display: none }
#prj_math_star_trek_stats_drwr     { display: none }
#prj_math_star_trek_stats_ds9_drwr { display: none }
#prj_nasa_asmat_drwr               { display: none }
#prj_nasa_water_drwr               { display: none }
#prj_nasa_liftoff_debris_drwr      { display: none }
#prj_volunteer_palestine_drwr      { display: none }

body:has( #prj_sftwr_opengl_trg:target             ) #prj_sftwr_opengl_drwr             { display: flex; }
body:has( #prj_sftwr_shadertoy_trg:target          ) #prj_sftwr_shadertoy_drwr          { display: flex; }
body:has( #prj_math_mtg_stats_trg:target           ) #prj_math_mtg_stats_drwr           { display: flex; }
body:has( #prj_math_star_trek_stats_trg:target     ) #prj_math_star_trek_stats_drwr     { display: flex; }
body:has( #prj_math_star_trek_stats_ds9_trg:target ) #prj_math_star_trek_stats_ds9_drwr { display: flex; }
body:has( #prj_nasa_asmat_trg:target               ) #prj_nasa_asmat_drwr               { display: flex; }
body:has( #prj_nasa_water_trg:target               ) #prj_nasa_water_drwr               { display: flex; }
body:has( #prj_nasa_liftoff_debris_trg:target      ) #prj_nasa_liftoff_debris_drwr      { display: flex; }
body:has( #prj_volunteer_palestine_trg:target      ) #prj_volunteer_palestine_drwr      { display: flex; }

body:has( #nav_hobby_photos_tgl:not(:checked)      ) #cntnr_hobby_photos      { display: none }
body:has( #nav_hobby_writing_tgl:not(:checked)     ) #cntnr_hobby_writing     { display: none }
body:has( #nav_hobby_roleplaying_tgl:not(:checked) ) #cntnr_hobby_roleplaying { display: none }
body:has( #nav_hobby_files_tgl:not(:checked)       ) #cntnr_hobby_files       { display: none }
body:has( #nav_hobby_videos_tgl:not(:checked)      ) #cntnr_hobby_videos      { display: none }
body:has( #nav_hobby_audio_tgl:not(:checked)       ) #cntnr_hobby_audio       { display: none }

body:has( #hdr_main_img_tgl:not(:checked)   ) #hdr_main_img   { display: none }
body:has( #hdr_email_img_tgl:not(:checked)  ) #hdr_email_img  { display: none }
body:has( #hdr_sc_img_tgl:not(:checked)     ) #hdr_sc_img     { display: none }
body:has( #hdr_wp_img_tgl:not(:checked)     ) #hdr_wp_img     { display: none }
body:has( #hdr_so_img_tgl:not(:checked)     ) #hdr_so_img     { display: none }
body:has( #hdr_hn_img_tgl:not(:checked)     ) #hdr_hn_img     { display: none }
body:has( #hdr_gh_img_tgl:not(:checked)     ) #hdr_gh_img     { display: none }

a:link {
  color: var( --link-color );
}

a:visited {
  color: var( --link-visit-color );
}

  /*
  --prm-lgt-color
  --prm-color
  --prm-mid-drk-color
  --prm-mid-drk-color
  */

.icon_cntnr_g {
  display: inline-block;
  text-align: center;
  width: 58px;
  height: 32px;
  border-radius: 16px;
  padding: 4px 0;
}

.icon_cntnr_g:hover {
  background-color: var( --hvr-color );
}

.img_icon_cntnr_g {
  width: 58px;
  height: 58px;
  text-align: center;
  padding: 9px;
  display: flex;
}

/* Style the header */
header {
  background-color: var( --bg-drk-color );
  padding: 5px;
  margin: 0;
  text-align: left;
  font-size: 15px;
  height: 55px;
  display: flex;
  justify-content: space-between;
}

.nv_hdr {
  position: relative;
  display: none;
}

.nv_drpdn {
  background-color: var( --ifc-artcl-color );
  position: absolute;
  padding-top: 10px;
  padding-bottom: 10px;
  border-radius: 12px;
  display: none;
  box-shadow: 0 0 3px var( --bg-drk-color );
  flex-direction: column;
  wrap: none;
  width: 200px;
  
  z-index: 2;
  
  max-height: 500px;
  overflow-y: scroll;
  scrollbar-width: thin;
}

.nv_drpdn_pltt_lbl {
  height: 48px;
  font-size: 15px;
  padding: 10px 10px;
  display: inline-block;
}

.nv_drpdn_nm {
  margin-left: 20px;
  margin-top: 5px;
}

.nv_drpdn_img_nm {
  margin-left: 20px;
  margin-top: 10px;
  width: 122px;
  min-width: 122px;
  text-align: left;
}

#nv_hdr_drpdn_pltt {
  left: -80px;
  top: 35px;
}

#nv_hdr_drpdn_img {
  left: -80px;
  top: 35px;
}

#nv_side_drpdn_pltt {
  left: 70px;
  bottom: 10px;
}

#nv_side_drpdn_img {
  left: 70px;
  bottom: 10px;
  padding: 0px;
}

/* Rather complicated method of having both hidden checkboxes for CSS toggles of dropdown menus */
/* In addition to having multiple radio buttons that can have a 'not checked' status for the group */
/* That amounts to having none of the dropdowns available actually open */

/* Portion that amounts to the 'somewhat' standard 'Checkbox Hack' of hiding inputs for CSS selectability */
.radio_sngl_chc_hide {
  position: absolute;
  opacity: 0;
  width: 0px;
  height: 0px;
  pointer-events: none;
  visibility:hidden;
  cursor: pointer;
  user-select: none;
}

/* Container for flexboxes */
main {
  display: -webkit-flex;
  display: flex;
  flex-wrap: wrap-reverse;
  height: calc(100% - 55px);
}

.fine { font-size: 0.5em; }
.dmtv { font-size: 0.6em; }
.tny  { font-size: 0.75em; }
.sm   { font-size: 0.89em; }
.md   { font-size: 1em; }
.lg   { font-size: 1.2em; }
.hge  { font-size: 1.5em; }
.ggtn { font-size: 2em; }
.clsl { font-size: 3em; }

/* Style the navigation menu */
.nv_side_cntnt {
  background: var( --bg-drk-color );
  width: 255px;
  min-width: 255px;
  height: 100%;
  
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

/* Style the list inside the menu */
.nv_side_cntnt ul {
  list-style-type: none;
  margin: 0px;
  padding: 0px;
}

.nv_side_cntnt ul li {
  padding: 7px 0px;
}

/* Upper left side container for the entire interface choices (all four of them) */
.intrfc_pnl_cntr {
  padding: 7px 10px 0px 10px;
  height: 190px;
}

.intrfc_pnl_frm {
  display: inline-block;
}

/* Container for individual choices on the interface */
.intrfc_pnl_chc_cntr {
  height: 32px;
  margin: 11px 0px;
}

.intrfc_pnl_chc_cntr a {
  color:var( --fnt-lgt-color );
  text-decoration: none;
}

/* Container for individual choice label names (mostly to shift the text to center) */
.intrfc_pnl_lbl_nm {
  display: inline-block;
  margin: 0px 8px;
  font-size: 14px;
  transform: translateY(-8px);
}

/* Lower left side container for everything that has to do with color choices */
.brtn_mtrl_clr_cntr {
  padding: 0px 28px;
  overflow-x: hidden;
  overflow-y: scroll;
  scrollbar-width: thin;
  scrollbar-color: var( --ifc-lgt-color ) var( --bg-drk-color );
  display: inline-block;
}

.brtn_mtrl_cntr {
  display: flex;
  justify-content: space-between;
  margin-bottom: 8px;
}

.brtn_mtrl_lbl_cntr {
  display: inline-block;
  transform: translateY(5px);
}

.mrgn_tbl {
  margin-left: auto;
  margin-right: auto;
}

/*---------------------------------------------------------------------*/
/* Portion dealing with switches for brightness and material selection */
/* Toggle switch implementation taken from W3Schools at https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_switch */
.switch_w3sch {
  position: relative;
  display: block;
  width: 3.125em;
  height: 1.875em;
}

/* Appears to be the background toggle panel appearance and settings */
.switch_tgl_w3sch {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-style: solid;
  border-color: var( --fnt-color );
  border-width: 0.125em;
  background-color: var( --bg-color );
  -webkit-transition: .4s;
  transition: .4s;
}

/* Appears to be the actual toggle */
.switch_tgl_w3sch:before {
  position: absolute;
  content: "";
  height: 1em;
  width: 1em;
  left: 0.313em;
  bottom: 0.313em;
  background-color: var( --fnt-color );
  -webkit-transition: .4s;
  transition: .4s;
}

/* Rounded sliders */
.switch_tgl_w3sch.round {
  border-radius: 2.125em;
}

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

.rd_btn_hide {
  position: absolute;
  opacity: 0;
  width: 0px;
  height: 0px;
  pointer-events: none;
  visibility:hidden;
}

.radio_button_g {
  width: 58px;
  height: 58px;
  border-radius: 29px;
  text-align: center;
  padding: 17px 0;
  font-variation-settings: 'FILL' 0, 'wght' 500, 'GRAD' 0, 'opsz' 48;
}

hr {
  width: 100%;
  height:1px;
  border-width:1;
  color:var( --ifc-color );
  background-color:var( --ifc-color );
}

.hide_mid_screen {
}

.show_mid_screen {
  display: none;
  pointer-events: none;
}

/* Style the content container */
section {
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  display: flex;
  height: 100%;
  background-color: #141218;
}

/* Style the content articles*/
.artcl_cntnt {
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  background-color: var( --bg-drk-color );
  padding: 0px;
  overflow-y: scroll;
  scrollbar-width: thin;
  scrollbar-color: var( --ifc-lgt-color ) var( --bg-drk-color );
  height: 100%;
}

.artcl {
  padding: 1px 0px 20px 0px; /* T R B L */
  margin: 0px 0px;
  border-radius: 10px;
  background: var( --ifc-artcl-color );
}

.artcl + .artcl {
  margin-top: 10px;
}

.centered { text-align: center; }

h1 { margin-top: 12px; margin-bottom: 8px; }
h2 { margin-top: 12px; margin-bottom: 8px; }
h3 { margin-top: 12px; margin-bottom: 8px; }

h1      { font-size: 1.625em; }
h1.fine { font-size: 0.8125em; }
h1.dmtv { font-size: 0.975em; }
h1.tny  { font-size: 1.219em; }
h1.sm   { font-size: 1.446em; }
h1.md   { font-size: 1.625em; }
h1.lg   { font-size: 1.95em; }
h1.hge  { font-size: 2.438em; }
h1.ggtn { font-size: 3.25em; }
h1.clsl { font-size: 4.875em; }

h2      { font-size: 1.25em; }
h2.fine { font-size: 0.625em; }
h2.dmtv { font-size: 0.75em; }
h2.tny  { font-size: 0.938em; }
h2.sm   { font-size: 1.113em; }
h2.md   { font-size: 1.25em; }
h2.lg   { font-size: 1.5em; }
h2.hge  { font-size: 1.875em; }
h2.ggtn { font-size: 2.5em; }
h2.clsl { font-size: 3.75em; }

h3      { font-size: 1.063em; }
h3.fine { font-size: 0.531em; }
h3.dmtv { font-size: 0.638em; }
h3.tny  { font-size: 0.797em; }
h3.sm   { font-size: 0.946em; }
h3.md   { font-size: 1.063em; }
h3.lg   { font-size: 1.275em; }
h3.hge  { font-size: 1.594em; }
h3.ggtn { font-size: 2.125em; }
h3.clsl { font-size: 3.188em; }

/* Shake taken from w3schools examples */
.shk_hv:hover {
  animation-name: shake_w3schools;
  animation-duration: 1s;
}

@keyframes shake_w3schools {
  0% { transform: translate(1px, 1px) rotate(0deg); }
  10% { transform: translate(-1px, -2px) rotate(-1deg); }
  20% { transform: translate(-3px, 0px) rotate(1deg); }
  30% { transform: translate(3px, 2px) rotate(0deg); }
  40% { transform: translate(1px, -1px) rotate(1deg); }
  50% { transform: translate(-1px, 2px) rotate(-1deg); }
  60% { transform: translate(-3px, 1px) rotate(0deg); }
  70% { transform: translate(3px, 1px) rotate(-1deg); }
  80% { transform: translate(-1px, -1px) rotate(1deg); }
  90% { transform: translate(1px, 2px) rotate(0deg); }
  100% { transform: translate(1px, -2px) rotate(-1deg); }
}

.flpX_hv:hover {
  animation-name: flipX_anim;
  animation-duration: 1s;
}

@keyframes flipX_anim {
  0%   { transform: rotateX(0deg); }
  100% { transform: rotateX(360deg); }
}

.flpY_hv:hover {
  animation-name: flipY_anim;
  animation-duration: 1s;
}

@keyframes flipY_anim {
  0%   { transform: rotateY(0deg); }
  100% { transform: rotateY(360deg); }
}

.flpZ_hv:hover {
  animation-name: flipZ_anim;
  animation-duration: 1s;
}

@keyframes flipZ_anim {
  0%   { transform: rotateZ(0deg); }
  100% { transform: rotateZ(360deg); }
}

.oscX_hv:hover {
  animation-name: oscillateX_anim;
  animation-duration: 1s;
}

@keyframes oscillateX_anim {
  0%   { transform: translateX(0%); }
  33%  { transform: translateX(-33%); }
  66%  { transform: translateX(33%); }
  100% { transform: translateX(0%); }
}

.oscY_hv:hover {
  animation-name: oscillateY_anim;
  animation-duration: 1s;
}

@keyframes oscillateY_anim {
  0%   { transform: translateY(0%); }
  33%  { transform: translateY(-33%); }
  66%  { transform: translateY(33%); }
  100% { transform: translateY(0%); }
}

.oscZ_hv:hover {
  transform-style: preserve-3d;
  animation-name: oscillateZ_anim;
  animation-duration: 1s;
}

@keyframes oscillateZ_anim {
  0%   { transform: translateZ(0em); }
  33%  { transform: perspective(5em) translateZ(-1em); }
  66%  { transform: perspective(5em) translateZ(1em); }
  100% { transform: translateZ(0em); }
}

.sclX_hv:hover {
  animation-name: scaleX_anim;
  animation-duration: 1s;
}

@keyframes scaleX_anim {
  0%   { transform: scaleX(100%); }
  50%  { transform: scaleX(75%); }
  100% { transform: scaleX(100%); }
}

.sclXgr_hv:hover {
  animation-name: scaleX_grow_anim;
  animation-duration: 1s;
}

@keyframes scaleX_grow_anim {
  0%   { transform: scaleX(100%); }
  50%  { transform: scaleX(150%); }
  100% { transform: scaleX(100%); }
}

.sclY_hv:hover {
  animation-name: scaleY_anim;
  animation-duration: 1s;
}

@keyframes scaleY_anim {
  0%   { transform: scaleY(100%); }
  50%  { transform: scaleY(75%); }
  100% { transform: scaleY(100%); }
}

.sclYgr_hv:hover {
  animation-name: scaleY_grow_anim;
  animation-duration: 1s;
}

@keyframes scaleY_grow_anim {
  0%   { transform: scaleY(100%); }
  50%  { transform: scaleY(150%); }
  100% { transform: scaleY(100%); }
}

.sclXY_hv:hover {
  animation-name: scaleXY_anim;
  animation-duration: 1s;
}

@keyframes scaleXY_anim {
  0%   { transform: scaleX(100%) scaleY(100%); }
  50%  { transform: scaleX(75%)  scaleY(75%); }
  100% { transform: scaleX(100%) scaleY(100%); }
}

.sclXYgr_hv:hover {
  animation-name: scaleXY_grow_anim;
  animation-duration: 1s;
}

@keyframes scaleXY_grow_anim {
  0%   { transform: scaleX(100%) scaleY(100%); }
  50%  { transform: scaleX(150%)  scaleY(150%); }
  100% { transform: scaleX(100%) scaleY(100%); }
}

/* Shadow RGB is taken from https://css-tricks.com/advanced-css-animation-using-cubic-bezier/ */
.shdWtBl_hv:hover {
  animation-name: shadow_white_black_anim;
  animation-duration: 1s;
}

@keyframes shadow_white_black_anim {
  0%   { text-shadow:  0em  0em   0em   rgb(255,255,255),  0em    0em   0em rgb(0,0,0); }
  33%  { text-shadow:  1em -0.3em 0.1em rgb(255,255,255), -0.3em  0.6em 0em rgb(0,0,0); }
  66%  { text-shadow: -1em  0.3em 0.1em rgb(255,255,255),  0.3em -0.6em 0em rgb(0,0,0); }
  100% { text-shadow:  0em  0em   0em   rgb(255,255,255),  0em    0em   0em rgb(0,0,0); }
}

/* Shadow RGB is taken from https://css-tricks.com/advanced-css-animation-using-cubic-bezier/ */
.shdRGB_hv:hover {
  animation-name: shadow_RGB_anim;
  animation-duration: 1s;
}

@keyframes shadow_RGB_anim {
  0%   { text-shadow:  0em  0em   0em rgb(255,0,0),    0em    0em   0em rgb(0,255,0),  0em    0em   0em rgb(0,0,255); }
  33%  { text-shadow:  1em -0.3em 0.1em rgb(255,0,0),  0.6em  0.3em 0em rgb(0,255,0), -0.3em  0.6em 0em rgb(0,0,255); }
  66%  { text-shadow: -1em  0.3em 0.1em rgb(255,0,0), -0.6em -0.3em 0em rgb(0,255,0),  0.3em -0.6em 0em rgb(0,0,255); }
  100% { text-shadow:  0em  0em   0em rgb(255,0,0),    0em    0em   0em rgb(0,255,0),  0em    0em   0em rgb(0,0,255); }
}

.shdBOPG_05_hv:hover {
  animation-name: shadow_blue_orange_purple_green_05_anim;
  animation-duration: 1s;
}

.shdBOPG_hv:hover {
  animation-name: shadow_blue_orange_purple_green_anim;
  animation-duration: 1s;
}

@keyframes shadow_blue_orange_purple_green_05_anim {
  0%   { text-shadow:  0em    0em    0em    rgb(0, 13, 255),  0em     0em   0em rgb(255, 166, 0),  0em     0em    0em    rgb(255, 0, 251),  0em    0em    0em rgb(170, 255, 0); }
  33%  { text-shadow:  0.5em -0.15em 0.05em rgb(0, 13, 255), -0.15em  0.3em 0em rgb(255, 166, 0),  0.15em  0.5em  0.05em rgb(255, 0, 251), -0.3em -0.15em 0em rgb(170, 255, 0); }
  66%  { text-shadow: -0.5em  0.15em 0.05em rgb(0, 13, 255),  0.15em -0.3em 0em rgb(255, 166, 0), -0.15em -0.5em  0.05em rgb(255, 0, 251),  0.3em  0.15em 0em rgb(170, 255, 0); }
  100% { text-shadow:  0em    0em    0em    rgb(0, 13, 255),  0em     0em   0em rgb(255, 166, 0),  0em     0em    0em    rgb(255, 0, 251),  0em    0em    0em rgb(170, 255, 0); }
}

@keyframes shadow_blue_orange_purple_green_anim {
  0%   { text-shadow:  0em  0em   0em   rgb(0, 13, 255),  0em    0em   0em rgb(255, 166, 0),  0em    0em  0em   rgb(255, 0, 251),  0em    0em   0em rgb(170, 255, 0); }
  33%  { text-shadow:  1em -0.3em 0.1em rgb(0, 13, 255), -0.3em  0.6em 0em rgb(255, 166, 0),  0.3em  1em  0.1em rgb(255, 0, 251), -0.6em -0.3em 0em rgb(170, 255, 0); }
  66%  { text-shadow: -1em  0.3em 0.1em rgb(0, 13, 255),  0.3em -0.6em 0em rgb(255, 166, 0), -0.3em -1em  0.1em rgb(255, 0, 251),  0.6em  0.3em 0em rgb(170, 255, 0); }
  100% { text-shadow:  0em  0em   0em   rgb(0, 13, 255),  0em    0em   0em rgb(255, 166, 0),  0em    0em  0em   rgb(255, 0, 251),  0em    0em   0em rgb(170, 255, 0); }
}

.shd5clr_05_hv:hover {
  animation-name: shadow_penta_05_anim;
  animation-duration: 1s;
}

.shd5clr_hv:hover {
  animation-name: shadow_pentadic_anim;
  animation-duration: 1s;
}

@keyframes shadow_penta_05_anim {
  0%   { text-shadow:  0em     0em   0em    rgb(0,255,174),  0em    0em    0em rgb(94,255,0),  0em    0em    0em    rgb(255,89,0),  0em     0em    0em rgb(255,0,153),  0em     0em     0em rgb(0,43,255); }
  33%  { text-shadow:  0.15em  0.5em 0.05em rgb(0,255,174),  0.5em  0.15em 0em rgb(94,255,0),  0.1em -0.45em 0.05em rgb(255,89,0), -0.25em -0.25em 0em rgb(255,0,153), -0.41em  0.285em 0em rgb(0,43,255); }
  66%  { text-shadow: -0.25em -0.5em 0.05em rgb(0,255,174), -0.5em -0.05em 0em rgb(94,255,0), -0.1em  0.35em 0.05em rgb(255,89,0),  0.25em  0.35em 0em rgb(255,0,153),  0.31em -0.185em 0em rgb(0,43,255); }
  100% { text-shadow:  0em     0em   0em    rgb(0,255,174),  0em    0em    0em rgb(94,255,0),  0em    0em    0em    rgb(255,89,0),  0em     0em    0em rgb(255,0,153),  0em     0em     0em rgb(0,43,255); }
}

@keyframes shadow_pentadic_anim {
  0%   { text-shadow:  0em    0em 0em   rgb(0,255,174),  0em  0em   0em rgb(94,255,0),  0em    0em   0em   rgb(255,89,0),  0em    0em   0em rgb(255,0,153),  0em     0em    0em rgb(0,43,255); }
  33%  { text-shadow:  0.3em  1em 0.1em rgb(0,255,174),  1em  0.3em 0em rgb(94,255,0),  0.2em -0.9em 0.1em rgb(255,89,0), -0.5em -0.5em 0em rgb(255,0,153), -0.82em  0.57em 0em rgb(0,43,255); }
  66%  { text-shadow: -0.5em -1em 0.1em rgb(0,255,174), -1em -0.1em 0em rgb(94,255,0), -0.2em  0.7em 0.1em rgb(255,89,0),  0.5em  0.7em 0em rgb(255,0,153),  0.62em -0.37em 0em rgb(0,43,255); }
  100% { text-shadow:  0em    0em 0em   rgb(0,255,174),  0em  0em   0em rgb(94,255,0),  0em    0em   0em   rgb(255,89,0),  0em    0em   0em rgb(255,0,153),  0em     0em    0em rgb(0,43,255); }
}

.blr_hv:hover {
  animation-name: blur_anim;
  animation-duration: 1s;
}

@keyframes blur_anim {
  0%   { filter: blur(0em); }
  50%  { filter: blur(0.1em); }
  100% { filter: blur(0em); }
}

.opcty_hv:hover {
  animation-name: opacity_anim;
  animation-duration: 1s;
}

@keyframes opacity_anim {
  0%   { opacity: 1; }
  50%  { opacity: 0.5; }
  100% { opacity: 1; }
}

.grscl_hv:hover {
  animation-name: grayscale_anim;
  animation-duration: 1s;
}

@keyframes grayscale_anim {
  0%   { filter: saturate(100%); }
  50%  { filter: saturate(0%); }
  100% { filter: saturate(100%); }
}

.ovrsat_hv:hover {
  animation-name: oversaturate_anim;
  animation-duration: 1s;
}

@keyframes oversaturate_anim {
  0%   { filter: saturate(100%); }
  50%  { filter: saturate(300%); }
  100% { filter: saturate(100%); }
}

.sepia_hv:hover {
  animation-name: sepia_anim;
  animation-duration: 1s;
}

@keyframes sepia_anim {
  0%   { filter: sepia(0%); }
  50%  { filter: sepia(100%); }
  100% { filter: sepia(0%); }
}

.cntrst_hv:hover {
  animation-name: contrast_anim;
  animation-duration: 1s;
}

@keyframes contrast_anim {
  0%   { filter: contrast(100%); }
  50%  { filter: contrast(150%); }
  100% { filter: contrast(100%); }
}

.brtns_hv:hover {
  animation-name: brightness_anim;
  animation-duration: 1s;
}

@keyframes brightness_anim {
  0%   { filter: brightness(100%); }
  50%  { filter: brightness(150%); }
  100% { filter: brightness(100%); }
}

.huerot_hv:hover {
  animation-name: hue_rotate_anim;
  animation-duration: 1s;
}

@keyframes hue_rotate_anim {
  0%   { filter: hue-rotate(0deg); }
  25%  { filter: hue-rotate(90deg); }
  50%  { filter: hue-rotate(180deg); }
  75%  { filter: hue-rotate(270deg); }
  100% { filter: hue-rotate(360deg); }
}

.invrt_hv:hover {
  animation-name: invert_anim;
  animation-duration: 1s;
}

@keyframes invert_anim {
  0%   { filter: invert(0%); }
  50%  { filter: invert(100%); }
  100% { filter: invert(0%); }
}

.zoom_hv:hover {
  animation-name: zoom_anim;
  animation-duration: 1s;
}

@keyframes zoom_anim {
  0%   { zoom: 100%; }
  50%  { zoom: 150%; }
  100% { zoom: 100%; }
}

.skwX_hv:hover {
  animation-name: skewX_anim;
  animation-duration: 1s;
}

@keyframes skewX_anim {
  0%   { transform: skewX(0deg); }
  33%  { transform: skewX(-33deg); }
  66%  { transform: skewX(33deg); }
  100% { transform: skewX(0deg); }
}

.skwY_hv:hover {
  animation-name: skewY_anim;
  animation-duration: 1s;
}

@keyframes skewY_anim {
  0%   { transform: skewY(0deg); }
  33%  { transform: skewY(-33deg); }
  66%  { transform: skewY(33deg); }
  100% { transform: skewY(0deg); }
}

.skwXY_hv:hover {
  animation-name: skewXY_anim;
  animation-duration: 1s;
}

@keyframes skewXY_anim {
  0%   { transform: skew(0deg); }
  33%  { transform: skew(-15deg, -15deg); }
  66%  { transform: skew(15deg, 15deg); }
  100% { transform: skew(0deg); }
}

.skwXZ_hv:hover {
  transform-style: preserve-3d;
  animation-name: skewXZ_anim;
  animation-duration: 1s;
}

@keyframes skewXZ_anim {
  0%   { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  33%  { transform: perspective(5em) matrix3d(1, 0, 0.65, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  66%  { transform: perspective(5em) matrix3d(1, 0, -0.65, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  100% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
}

.skwYZ_hv:hover {
  transform-style: preserve-3d;
  animation-name: skewYZ_anim;
  animation-duration: 1s;
}

@keyframes skewYZ_anim {
  0%   { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  33%  { transform: perspective(5em) matrix3d(1, 0, 0, 0, 0, 1, 0.65, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  66%  { transform: perspective(5em) matrix3d(1, 0, 0, 0, 0, 1, -0.65, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  100% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
}

.outln_hv:hover {
  animation-name: outline_anim;
  animation-duration: 1s;
}

@keyframes outline_anim {
  0%   { outline: 0.1em solid white; outline-offset: 0em; }
  100% { outline: 0.1em solid white; outline-offset: 0.5em; }
}

.outlnosc_hv:hover {
  animation-name: outline_oscillate_anim;
  animation-duration: 1s;
}

@keyframes outline_oscillate_anim {
  0%   { outline: 0.1em solid white; outline-offset: 0em; }
  50%  { outline: 0.1em solid white; outline-offset: 0.5em; }
  100% { outline: 0.1em solid white; outline-offset: 0em; }
}

.trblnc_hv:hover {
  animation-name: turbulence_anim;
  animation-duration: 1s;
}

@keyframes turbulence_anim {
  0%   { filter: none;  }
  10%  { filter: url('data:image/svg+xml,\
          <svg xmlns="http://www.w3.org/2000/svg">\
            <filter id="turbulence_10" color-interpolation-filters="sRGB" filterUnits="objectBoundingBox" primitiveUnits="userSpaceOnUse">\
              <feTurbulence type="turbulence" baseFrequency="0.05 0.05" numOctaves="2" seed="1" stitchTiles="stitch" x="0%" y="0%" width="100%" height="100%" result="turbulence"/>\
              <feDisplacementMap in="SourceGraphic" in2="turbulence" scale="3" xChannelSelector="R" yChannelSelector="B" x="0%" y="0%" width="100%" height="100%" result="displacementMap"/>\
            </filter>\
          </svg>#turbulence_10'); }
  20%  { filter: url('data:image/svg+xml,\
          <svg xmlns="http://www.w3.org/2000/svg">\
            <filter id="turbulence_20" color-interpolation-filters="sRGB" filterUnits="objectBoundingBox" primitiveUnits="userSpaceOnUse">\
              <feTurbulence type="turbulence" baseFrequency="0.05 0.05" numOctaves="2" seed="2" stitchTiles="stitch" x="0%" y="0%" width="100%" height="100%" result="turbulence"/>\
              <feDisplacementMap in="SourceGraphic" in2="turbulence" scale="5" xChannelSelector="R" yChannelSelector="B" x="0%" y="0%" width="100%" height="100%" result="displacementMap"/>\
            </filter>\
          </svg>#turbulence_20'); }
  30%  { filter: url('data:image/svg+xml,\
          <svg xmlns="http://www.w3.org/2000/svg">\
            <filter id="turbulence_30" color-interpolation-filters="sRGB" filterUnits="objectBoundingBox" primitiveUnits="userSpaceOnUse">\
              <feTurbulence type="turbulence" baseFrequency="0.05 0.05" numOctaves="2" seed="3" stitchTiles="stitch" x="0%" y="0%" width="100%" height="100%" result="turbulence"/>\
              <feDisplacementMap in="SourceGraphic" in2="turbulence" scale="8" xChannelSelector="R" yChannelSelector="B" x="0%" y="0%" width="100%" height="100%" result="displacementMap"/>\
            </filter>\
          </svg>#turbulence_30'); }
  40%  { filter: url('data:image/svg+xml,\
          <svg xmlns="http://www.w3.org/2000/svg">\
            <filter id="turbulence_40" color-interpolation-filters="sRGB" filterUnits="objectBoundingBox" primitiveUnits="userSpaceOnUse">\
              <feTurbulence type="turbulence" baseFrequency="0.05 0.05" numOctaves="2" seed="4" stitchTiles="stitch" x="0%" y="0%" width="100%" height="100%" result="turbulence"/>\
              <feDisplacementMap in="SourceGraphic" in2="turbulence" scale="11" xChannelSelector="R" yChannelSelector="B" x="0%" y="0%" width="100%" height="100%" result="displacementMap"/>\
            </filter>\
          </svg>#turbulence_40'); }
  50%  { filter: url('data:image/svg+xml,\
          <svg xmlns="http://www.w3.org/2000/svg">\
            <filter id="turbulence_50" color-interpolation-filters="sRGB" filterUnits="objectBoundingBox" primitiveUnits="userSpaceOnUse">\
              <feTurbulence type="turbulence" baseFrequency="0.05 0.05" numOctaves="2" seed="5" stitchTiles="stitch" x="0%" y="0%" width="100%" height="100%" result="turbulence"/>\
              <feDisplacementMap in="SourceGraphic" in2="turbulence" scale="14" xChannelSelector="R" yChannelSelector="B" x="0%" y="0%" width="100%" height="100%" result="displacementMap"/>\
            </filter>\
          </svg>#turbulence_50'); }
  60%  { filter: url('data:image/svg+xml,\
          <svg xmlns="http://www.w3.org/2000/svg">\
            <filter id="turbulence_60" color-interpolation-filters="sRGB" filterUnits="objectBoundingBox" primitiveUnits="userSpaceOnUse">\
              <feTurbulence type="turbulence" baseFrequency="0.05 0.05" numOctaves="2" seed="6" stitchTiles="stitch" x="0%" y="0%" width="100%" height="100%" result="turbulence"/>\
              <feDisplacementMap in="SourceGraphic" in2="turbulence" scale="11" xChannelSelector="R" yChannelSelector="B" x="0%" y="0%" width="100%" height="100%" result="displacementMap"/>\
            </filter>\
          </svg>#turbulence_60'); }
  70%  { filter: url('data:image/svg+xml,\
          <svg xmlns="http://www.w3.org/2000/svg">\
            <filter id="turbulence_70" color-interpolation-filters="sRGB" filterUnits="objectBoundingBox" primitiveUnits="userSpaceOnUse">\
              <feTurbulence type="turbulence" baseFrequency="0.05 0.05" numOctaves="2" seed="7" stitchTiles="stitch" x="0%" y="0%" width="100%" height="100%" result="turbulence"/>\
              <feDisplacementMap in="SourceGraphic" in2="turbulence" scale="8" xChannelSelector="R" yChannelSelector="B" x="0%" y="0%" width="100%" height="100%" result="displacementMap"/>\
            </filter>\
          </svg>#turbulence_70'); }
  80%  { filter: url('data:image/svg+xml,\
          <svg xmlns="http://www.w3.org/2000/svg">\
            <filter id="turbulence_80" color-interpolation-filters="sRGB" filterUnits="objectBoundingBox" primitiveUnits="userSpaceOnUse">\
              <feTurbulence type="turbulence" baseFrequency="0.05 0.05" numOctaves="2" seed="8" stitchTiles="stitch" x="0%" y="0%" width="100%" height="100%" result="turbulence"/>\
              <feDisplacementMap in="SourceGraphic" in2="turbulence" scale="5" xChannelSelector="R" yChannelSelector="B" x="0%" y="0%" width="100%" height="100%" result="displacementMap"/>\
            </filter>\
          </svg>#turbulence_80'); }
  90%  { filter: url('data:image/svg+xml,\
          <svg xmlns="http://www.w3.org/2000/svg">\
            <filter id="turbulence_90" color-interpolation-filters="sRGB" filterUnits="objectBoundingBox" primitiveUnits="userSpaceOnUse">\
              <feTurbulence type="turbulence" baseFrequency="0.05 0.05" numOctaves="2" seed="9" stitchTiles="stitch" x="0%" y="0%" width="100%" height="100%" result="turbulence"/>\
              <feDisplacementMap in="SourceGraphic" in2="turbulence" scale="3" xChannelSelector="R" yChannelSelector="B" x="0%" y="0%" width="100%" height="100%" result="displacementMap"/>\
            </filter>\
          </svg>#turbulence_90'); }
  100% { filter: none; }
}

.anm_100ms:hover { animation-duration: 0.1s; }
.anm_200ms:hover { animation-duration: 0.2s; }
.anm_300ms:hover { animation-duration: 0.3s; }
.anm_400ms:hover { animation-duration: 0.4s; }
.anm_500ms:hover { animation-duration: 0.5s; }
.anm_600ms:hover { animation-duration: 0.6s; }
.anm_700ms:hover { animation-duration: 0.7s; }
.anm_800ms:hover { animation-duration: 0.8s; }
.anm_900ms:hover { animation-duration: 0.9s; }
.anm_1000ms:hover { animation-duration: 1s; }
.anm_1100ms:hover { animation-duration: 1.1s; }
.anm_1200ms:hover { animation-duration: 1.2s; }
.anm_1300ms:hover { animation-duration: 1.3s; }
.anm_1400ms:hover { animation-duration: 1.4s; }
.anm_1500ms:hover { animation-duration: 1.5s; }
.anm_1600ms:hover { animation-duration: 1.6s; }
.anm_1700ms:hover { animation-duration: 1.7s; }
.anm_1800ms:hover { animation-duration: 1.8s; }
.anm_1900ms:hover { animation-duration: 1.9s; }
.anm_2000ms:hover { animation-duration: 2s; }
.anm_2100ms:hover { animation-duration: 2.1s; }
.anm_2200ms:hover { animation-duration: 2.2s; }
.anm_2300ms:hover { animation-duration: 2.3s; }
.anm_2400ms:hover { animation-duration: 2.4s; }
.anm_2500ms:hover { animation-duration: 2.5s; }
.anm_2600ms:hover { animation-duration: 2.6s; }
.anm_2700ms:hover { animation-duration: 2.7s; }
.anm_2800ms:hover { animation-duration: 2.8s; }
.anm_2900ms:hover { animation-duration: 2.9s; }
.anm_3000ms:hover { animation-duration: 3s; }
.anm_3100ms:hover { animation-duration: 3.1s; }
.anm_3200ms:hover { animation-duration: 3.2s; }
.anm_3300ms:hover { animation-duration: 3.3s; }
.anm_3400ms:hover { animation-duration: 3.4s; }
.anm_3500ms:hover { animation-duration: 3.5s; }
.anm_3600ms:hover { animation-duration: 3.6s; }
.anm_3700ms:hover { animation-duration: 3.7s; }
.anm_3800ms:hover { animation-duration: 3.8; }
.anm_3900ms:hover { animation-duration: 3.9s; }
.anm_4000ms:hover { animation-duration: 4.0s; }
.anm_4100ms:hover { animation-duration: 4.1s; }
.anm_4200ms:hover { animation-duration: 4.2s; }
.anm_4300ms:hover { animation-duration: 4.3s; }
.anm_4400ms:hover { animation-duration: 4.4s; }
.anm_4500ms:hover { animation-duration: 4.5s; }
.anm_4600ms:hover { animation-duration: 4.6s; }
.anm_4700ms:hover { animation-duration: 4.7s; }
.anm_4800ms:hover { animation-duration: 4.8s; }
.anm_4900ms:hover { animation-duration: 4.9s; }
.anm_5000ms:hover { animation-duration: 5s; }
.anm_5500ms:hover { animation-duration: 5.5s; }
.anm_6000ms:hover { animation-duration: 6s; }
.anm_6500ms:hover { animation-duration: 6.5s; }
.anm_7000ms:hover { animation-duration: 7s; }
.anm_7500ms:hover { animation-duration: 7.5s; }
.anm_8000ms:hover { animation-duration: 8s; }
.anm_8500ms:hover { animation-duration: 8.5s; }
.anm_9000ms:hover { animation-duration: 9s; }
.anm_9500ms:hover { animation-duration: 9.5s; }
.anm_10000ms:hover { animation-duration: 10s; }

.anm_lin    {animation-timing-function: linear;}
.anm_in     {animation-timing-function: ease-in;}
.anm_out    {animation-timing-function: ease-out;}
.anm_in_out {animation-timing-function: ease-in-out;}

.rtn_30 { transform: rotate(30deg); }
.rtn_45 { transform: rotate(45deg); }
.rtn_60 { transform: rotate(60deg); }
.rtn_90 { transform: rotate(90deg); }
.rtn_135 { transform: rotate(135deg); }
.rtn_180 { transform: rotate(180deg); }
.rtn_225 { transform: rotate(225deg); }
.rtn_270 { transform: rotate(270deg); }
.rtn_300 { transform: rotate(300deg); }
.rtn_315 { transform: rotate(315deg); }
.rtn_330 { transform: rotate(330deg); }

table { border-collapse: collapse; }
th    { border-collapse: collapse; }
td    { border-collapse: collapse; }

.panel {
  max-width: 430px;
  min-height: 50px;
  display: flex;
  flex-wrap: wrap;
  /*justify-content: center;*/
  color: var( --fnt-lgt-color );
  border-style: solid;
  border-color: var( --ifc-color );
  border-width: 1px;
  border-radius: 10px;
  background-color: var( --ifc-pnl-color );
  /* background-color: #ffffff; */
  margin-left: auto;
  margin-right: auto;
  padding: 10px 1px;
}

.panel_full_screen {
  width: 98%;
  min-height: 50px;
  display: flex;
  flex-wrap: wrap;
  /*justify-content: center;*/
  color: var( --fnt-lgt-color );
  border-style: solid;
  border-color: var( --ifc-color );
  border-width: 1px;
  border-radius: 10px;
  background-color: var( --ifc-pnl-color );
  /* background-color: #ffffff; */
  margin-left: auto;
  margin-right: auto;
  padding: 10px 1px;
}

.bttn_tbl {
  width: 100%;
}

.bttn_tbl_hd {
  height: 30px;
}

.bttn_tbl_exmpl {
  background: var( --ifc-artcl-color );
}

.bttn {
  border-radius: 1em;
  padding: 0.313em 0.625em;
  text-align: center;
  position: relative;
  margin: 0.188em;
  align-self: center;
  font-variation-settings: 'FILL' 1, 'wght' 500, 'GRAD' 0, 'opsz' 48;
}

.icn_bttn {
  -webkit-transform: translateY(0.25em);
  -ms-transform: translateY(0.25em);
  transform: translateY(0.25em);
  font-size: 1.25em;
  margin-top: -0.25em;
}

.bttn_nm {
}

.bttn_clr_dflts {
  color: inherit;
  border-style: none;
  background-color: inherit;
  font-size: 0.875em;
}

.elvtd_1 {
  box-shadow: 1px 1px 3px var( --bg-drk-color );
}

.elvtd_2 {
  box-shadow: 2px 2px 3px var( --bg-drk-color );
}

.elvtd_3 {
  box-shadow: 3px 3px 3px var( --bg-drk-color );
}

.elvtd_4 {
  box-shadow: 4px 4px 3px var( --bg-drk-color );
}

.elvtd_5 {
  box-shadow: 5px 5px 3px var( --bg-drk-color );
}

.tnl {
  color: var( --prm-lgt-color );
}

.flld {
  color: var( --ifc-color );
  background: var( --fnt-lgt-color );
}

.flld_tnl {
  color: var( --fnt-lgt-color );
  background: var( --ifc-color );
}

.outlnd {
  border-style: solid;
  border-color: var( --fnt-color );
  border-width: 1px;
}

.flld.outlnd {
  border-color: var( --prm-lgt-color );
}

.bttn_off {
  color: var( --fnt-color );
  font-variation-settings: 'FILL' 0, 'wght' 500, 'GRAD' 0, 'opsz' 48;
}

.flld.bttn_off { background: transparent; }
.flld_tnl.bttn_off { background: transparent; }
.outlnd.bttn_off { border-color: var( --ifc-lgt-color ); }

.flld.outlnd.bttn_off { background: transparent; }
.flld_tnl.outlnd.bttn_off { background: transparent; }

.dsbld {
  color: var( --ifc-lgt-color );
  pointer-events: none;
  font-variation-settings: 'FILL' 0, 'wght' 500, 'GRAD' 0, 'opsz' 48;
}

.elvtd_1.dsbld  { background: var( --ifc-dsbld-color ); }
.flld.dsbld     { background: var( --ifc-dsbld-color ); }
.flld_tnl.dsbld { background: var( --ifc-dsbld-color ); }
.outlnd.dsbld   { border-color: var( --ifc-lgt-color ); background: transparent; }

/* Basic idea of :before overlay from Bram Vanroy answer on StackOverflow at https://stackoverflow.com/a/28592586 */
.bttn:hover:before {
  content: "";
  position: absolute;
  left: 0px;
  top: 0px;
  border-radius: inherit;
  width: 100%;
  height: 100%;
  background: var( --ifc-color-trnsp );
  pointer-events: none;
  z-index: 2;
}

.actn_bttn {
  display: inline-flex;
  align-items: center;
  gap: 0.125em;
  font-size: 1em;
  padding: 1em; /* T R B L */
  background: var( --prm-color );
  text-shadow: 1px 1px 3px var( --bg-drk-color );
}

.actn_bttn.flld {
  color: var( --ifc-color );
  background: var( --fnt-lgt-color );
}

.actn_bttn.flld_tnl {
  color: var( --fnt-lgt-color );
  background: var( --ifc-color );
}

.actn_sm {
  font-size: 0.875em;
  padding: 0.6em; /* T R B L */
  border-radius: 0.875em;
}

.actn_sm.fine { font-size: 0.438em; }
.actn_sm.dmtv { font-size: 0.525em; }
.actn_sm.tny  { font-size: 0.656em; }
.actn_sm.sm   { font-size: 0.779em; }
.actn_sm.md   { font-size: 0.875em; }
.actn_sm.lg   { font-size: 1.050em; }
.actn_sm.hge  { font-size: 1.313em; }
.actn_sm.ggtn { font-size: 1.750em; }
.actn_sm.clsl { font-size: 2.625em; }

.actn_lrg {
  font-size: 1.625em;
  border-radius: 1.1em;
  padding: 1.25em; /* T R B L */
}

.actn_lg.fine { font-size: 0.813em; }
.actn_lg.dmtv { font-size: 0.975em; }
.actn_lg.tny  { font-size: 1.219em; }
.actn_lg.sm   { font-size: 1.446em; }
.actn_lg.md   { font-size: 1.625em; }
.actn_lg.lg   { font-size: 1.950em; }
.actn_lg.hge  { font-size: 2.438em; }
.actn_lg.ggtn { font-size: 3.250em; }
.actn_lg.clsl { font-size: 4.875em; }

.icn_actn {
  font-size: 1.5em;
}

.actn_lrg .icn_actn {
  font-size: 1.25em;
  font-variation-settings: 'FILL' 0, 'wght' 700, 'GRAD' 0, 'opsz' 48;
}

.tltp {
  visibility: hidden;
  text-align: center;
  border-radius: 0.375rem;
  padding: 0.375rem;
  
  --tltp-color: var( --fnt-lgt-color );
  --tltp-bg: var( --ifc-pnl-color );
  --tltp-color-brdr: transparent;
  color: var( --tltp-color );
  background: var( --tltp-bg );
  font-size: 1em;
  line-height: 1;
  
  /* Position the tooltip */
  position: absolute;
  z-index: 2;
  top: 95%;
  left: 50%;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
}

.tltp.tnl { --tltp-color: var( --prm-lgt-color ); }
.tltp.flld { --tltp-color: var( --ifc-color ); --tltp-bg: var( --fnt-lgt-color ); }
.tltp.flld_tnl { --tltp-bg: var( --ifc-color ); }
.tltp.outlnd { --tltp-color-brdr: var( --fnt-color ); border-color: var( --tltp-color-brdr ); border-style: solid; border-width: 1px; }
.tltp.flld.outlnd { --tltp-color-brdr: var( --ifc-color ); }

.tltp.tltp_above {
  top: 5%;
  left: 50%;
  -webkit-transform: translateX(-50%) translateY(-100%);
  transform: translateX(-50%) translateY(-100%);
}

.tltp.tltp_left {
  top: 50%;
  left: 5%;
  -webkit-transform: translateX(-100%) translateY(-50%);
  transform: translateX(-100%) translateY(-50%);
}

.tltp.tltp_right {
  top: 50%;
  left: 95%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
}

.tltp.tltp_arrow::after {
  content: " ";
  position: absolute;
  bottom: 100%;  /* At the top of the tooltip */
  left: 50%;
  margin-left: -6px;
  border-width: 6px;
  border-style: solid;
  border-color: transparent transparent var( --tltp-bg ) transparent;
  z-index: 2;
}

.tltp.tltp_above.tltp_arrow::after {
  top: 100%; /* At the bottom of the tooltip */
  left: 50%;
  border-color: var( --tltp-bg ) transparent transparent transparent;
}

.tltp.tltp_left.tltp_arrow::after {
  top: 50%;
  left: 100%; /* To the right of the tooltip */
  margin-left: 0px;
  margin-top: -6px;
  border-color: transparent transparent transparent var( --tltp-bg );
}

.tltp.tltp_right.tltp_arrow::after {
  top: 50%;
  left: 0%; /* To the left of the tooltip */
  margin-left: -11px;
  margin-top: -6px;
  border-color: transparent var( --tltp-bg ) transparent transparent;
}

.tltp.outlnd.tltp_arrow::before {
  content: " ";
  position: absolute;
  bottom: 100%;  /* At the top of the tooltip */
  left: 50%;
  margin-left: -7px;
  border-width: 7px;
  border-style: solid;
  border-color: transparent transparent var( --tltp-color-brdr ) transparent;
  z-index: 2;
}

.tltp.outlnd.tltp_above.tltp_arrow::before {
  top: 100%; /* At the bottom of the tooltip */
  left: 50%;
  border-color: var( --tltp-color-brdr ) transparent transparent transparent;
}

.tltp.outlnd.tltp_left.tltp_arrow::before {
  top: 50%;
  left: 100%; /* To the right of the tooltip */
  margin-left: 0px;
  margin-top: -8px;
  border-color: transparent transparent transparent var( --tltp-color-brdr );
}

.tltp.outlnd.tltp_right.tltp_arrow::before {
  top: 50%;
  left: 0%; /* To the left of the tooltip */
  margin-left: -14px;
  margin-top: -8px;
  border-color: transparent var( --tltp-color-brdr ) transparent transparent;
}

*:has( > .tltp):hover .tltp {
  visibility: visible;
}

.bttn_icn {
  border-radius: 1.25em;
  padding: 0.5em;
  display: block;
}

.bttn_inline {
  border-radius: 1.25em;
  padding: 0.5em;
  display: inline-block;
}

.bttn_left {
  text-align: left;
}

:is( .bttn_icn_cntnr, .bttn_icn_trg_ancr ) {
  align-self: center;
  display: inline-block;
}

:is( .bttn_icn_cntnr, .bttn_icn_trg_ancr ) .rflct {
  transform: rotateX(180deg) translateY(-0.167em);
  --bttn_icn-gradient: linear-gradient( transparent 10%, rgb(255 255 255 / 40%) 60%, white 100% );
  -webkit-mask-image: var( --bttn_icn-gradient );
  mask-image: var( --bttn_icn-gradient );
  pointer-events: none;
}

.bttn_icn:hover:before {
  border-radius: inherit;
}

.bttn_icn_cntnr:has( input:checked       ) .bttn_off { display:none; }
.bttn_icn_cntnr:not(:has( input:checked )) .bttn_on  { display:none; }

.bttn_icn_trg_ancr:target       .bttn_off { display:none; }
.bttn_icn_trg_ancr:not(:target) .bttn_on  { display:none; }

.icn_sng {
  -webkit-transform: translateY(0.167em);
  transform: translateY(0.167em);
  margin-top: -0.25em;
}

.icn_sng.rtn_90 {
  -webkit-transform: translateY(0.167em) rotate(90deg);
  transform: translateY(0.167em) rotate(90deg);
}

.icn_sng.rtn_180 {
  -webkit-transform: translateY(0.167em) rotate(180deg);
  transform: translateY(0.167em) rotate(180deg);
}

.icn_sng.rtn_225 {
  -webkit-transform: translateY(0.167em) rotate(225deg);
  transform: translateY(0.167em) rotate(225deg);
}

.icn_sng.rtn_270 {
  -webkit-transform: translateY(0.167em) rotate(270deg);
  transform: translateY(0.167em) rotate(270deg);
}

.icn_sng.rtn_315 {
  -webkit-transform: translateY(0.167em) rotate(315deg);
  transform: translateY(0.167em) rotate(315deg);
}

.bttn_clndr_cntnr { padding: 0.375em 0.75em; margin: 0.25em; }
.bttn_sz_cntnr    { padding: 0.375em 0.75em; margin: 0.25em; }

.bttn_clndr_cntnr > .sgmntd_item { padding: 0.375em 0.75em; margin: 0em; border-radius: 0px; }
.bttn_sz_cntnr    > .sgmntd_item { padding: 0.375em 0.75em; margin: 0em; border-radius: 0px; }

.bttn_clndr_cntnr .sgmntd_item:first-of-type { border-radius: 1em 0px 0px 1em; }
.bttn_sz_cntnr    .sgmntd_item:first-of-type { border-radius: 1em 0px 0px 1em; }

.bttn_clndr_cntnr .sgmntd_item:last-of-type  { border-radius: 0px 1em 1em 0px; }
.bttn_sz_cntnr    .sgmntd_item:last-of-type  { border-radius: 0px 1em 1em 0px; }

.icn_sh_chkd {
  display: none;
}

.icn_hd_chkd {
  display: inline-block;
}

.sgmntd_item:has( input:checked       ) .bttn_off { display:none; }
.sgmntd_item:has( input:checked       ) { background: var( --ifc-color ); }
.sgmntd_item:not(:has( input:checked )) .bttn_on  { display:none; }

flbr {
  flex-basis: 100%;
  height: 0;
}

/* Below is a really horrible looking regex selector with :has and :not for selecting based on multiple-check marks being selected at the same time */
/* Styles only the rightmost item in a list of checks with  .sgmntd_item:has( input:checked ):not( .sgmntd_item:has( ~ .sgmntd_item > input:checked ) ) */
/* Styles only the leftmost item in a list of checks with   .sgmntd_item:has( input:checked ):not( .sgmntd_item:has( input:checked ) ~ .sgmntd_item:has( input:checked ) ) */

/* Combined together they then only style the specific case where there is neither left or right hand side checks. */
/* This keeps the final check mark from being removed so that at least one check mark is guarenteed in the list */
.sgmntd_item:has( input:checked ):not( .sgmntd_item:has( input:checked ) ~ .sgmntd_item:has( input:checked ) ):not( .sgmntd_item:has( ~ .sgmntd_item > input:checked ) ) { pointer-events: none; }

/* Gets rid of a bunch of complicated stuff with specifically calling out IDs again and again, left below in case it proves necessary or useful */
/* Although it makes a really complicated regex type of selector result instead... Triggers the "this will probably seem 'too clever' later when I forget what I did" */

/*.bttn_sz_cntnr:has( #chk_inpt_sz_xs:checked ) label[ for="chk_inpt_sz_xs" ] > .icn_sh_chkd{ display: inline-block; }
.bttn_sz_cntnr:has( #chk_inpt_sz_xs:checked ) label[ for="chk_inpt_sz_xs" ] { background: var( --ifc-color ); }
.bttn_sz_cntnr:has( #chk_inpt_sz_s:checked  ) label[ for="chk_inpt_sz_s"  ] > .icn_sh_chkd{ display: inline-block; }
.bttn_sz_cntnr:has( #chk_inpt_sz_s:checked  ) label[ for="chk_inpt_sz_s"  ] { background: var( --ifc-color ); }
.bttn_sz_cntnr:has( #chk_inpt_sz_m:checked  ) label[ for="chk_inpt_sz_m"  ] > .icn_sh_chkd{ display: inline-block; }
.bttn_sz_cntnr:has( #chk_inpt_sz_m:checked  ) label[ for="chk_inpt_sz_m"  ] { background: var( --ifc-color ); }
.bttn_sz_cntnr:has( #chk_inpt_sz_l:checked  ) label[ for="chk_inpt_sz_l"  ] > .icn_sh_chkd{ display: inline-block; }
.bttn_sz_cntnr:has( #chk_inpt_sz_l:checked  ) label[ for="chk_inpt_sz_l"  ] { background: var( --ifc-color ); }
.bttn_sz_cntnr:has( #chk_inpt_sz_xl:checked ) label[ for="chk_inpt_sz_xl" ] > .icn_sh_chkd{ display: inline-block; }
.bttn_sz_cntnr:has( #chk_inpt_sz_xl:checked ) label[ for="chk_inpt_sz_xl" ] { background: var( --ifc-color ); }*/

/*.bttn_sz_cntnr:not(:has( .rd_btn_hide:checked ~ .rd_btn_hide:checked )) > #chk_inpt_sz_xs:checked ~ label[ for="chk_inpt_sz_xs" ]{ pointer-events: none; }
.bttn_sz_cntnr:not(:has( .rd_btn_hide:checked ~ .rd_btn_hide:checked )) > #chk_inpt_sz_s:checked  ~ label[ for="chk_inpt_sz_s"  ]{ pointer-events: none; }
.bttn_sz_cntnr:not(:has( .rd_btn_hide:checked ~ .rd_btn_hide:checked )) > #chk_inpt_sz_m:checked  ~ label[ for="chk_inpt_sz_m"  ]{ pointer-events: none; }
.bttn_sz_cntnr:not(:has( .rd_btn_hide:checked ~ .rd_btn_hide:checked )) > #chk_inpt_sz_l:checked  ~ label[ for="chk_inpt_sz_l"  ]{ pointer-events: none; }
.bttn_sz_cntnr:not(:has( .rd_btn_hide:checked ~ .rd_btn_hide:checked )) > #chk_inpt_sz_xl:checked ~ label[ for="chk_inpt_sz_xl" ]{ pointer-events: none; }*/

/*---------------------------------------*/
/* Badges Sub-Section */
/*---------------------------------------*/
.navigation_cntnr {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  color: var( --fnt-lgt-color );
  background: var( --ifc-artcl-color );
  margin: 10px 0px;
  padding: 0px;
}

.navigation_cntnr.flex_start {
  justify-content: flex-start;
}

.bdg_cntnr {
  position: relative;
  text-align: center;
}

.bdg_cntnr .bttn_icn {
  padding: 0.5em 1.125em;
}

.bttn_lbl {
  font-size: 0.813em;
}

.stt_dsply {
  visibility: visible;
  color: var( --ifc-color );
  background: #FFB4AB;
  text-align: center;
  border-radius: 0.625em;
  padding: 0.125em 0.438em;
  font-size: 0.75em;
  
  /* Position the tooltip */
  position: absolute;
  z-index: 1;
  top: 0%;
  left: 75%;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
}

.panel:has( #prgrss_tgl:checked )       label[ for="prgrss_tgl" ] .prgrss_play{ display: none }
.panel:has( #prgrss_tgl:not(:checked) ) label[ for="prgrss_tgl" ] .prgrss_pause{ display: none }

.panel:has( #prgrss_tgl:checked ) .circular_loader        { animation-play-state: running; }
.panel:has( #prgrss_tgl:checked ) .circular_loader:before { animation-play-state: running; }
.panel:has( #prgrss_tgl:checked ) .linear_loader:after    { animation-play-state: running; }

/* Circular loader and linear loader from https://cssloaders.github.io/ */
.circular_loader {
  width: 2.5em;
  height: 2.5em;
  margin: 10px;
  position: relative;
  animation: rotate_loader 1s linear infinite;
  align-self: center;
  animation-play-state: paused;
}
.circular_loader::before {
  content: "";
  box-sizing: border-box;
  position: absolute;
  inset: 0px;
  border-radius: 50%;
  border: 0.313em solid #FFF;
  animation: prixClipFix 2s linear infinite;
  animation-play-state: paused;
}

@keyframes rotate_loader {
  100%   {transform: rotate(360deg)}
}

@keyframes prixClipFix {
  0%   {clip-path:polygon(50% 50%,0 0,0 0,0 0,0 0,0 0)}
  25%  {clip-path:polygon(50% 50%,0 0,100% 0,100% 0,100% 0,100% 0)}
  50%  {clip-path:polygon(50% 50%,0 0,100% 0,100% 100%,100% 100%,100% 100%)}
  75%  {clip-path:polygon(50% 50%,0 0,100% 0,100% 100%,0 100%,0 100%)}
  100% {clip-path:polygon(50% 50%,0 0,100% 0,100% 100%,0 100%,0 0)}
}

.linear_loader_cntnr {
  width: calc( 400px - 5.5em );
  align-self: center;
}

.linear_loader {
  width: calc( 100% - 20px );
  height: 0.125em;
  margin: 10px;
  display: inline-block;
  position: relative;
  background: rgba(255, 255, 255, 0.15);
  overflow: hidden;
  align-self: center;
}
.linear_loader::after {
  content: '';
  width: 65%;
  height: 0.125em;
  background: #FFF;
  position: absolute;
  top: 0;
  left: 0;
  box-sizing: border-box;
  animation: animloader 1.2s linear infinite;
  animation-play-state: paused;
}

@keyframes animloader {
  0% {
    left: 0;
    transform: translateX(-100%);
  }
  100% {
    left: 100%;
    transform: translateX(0%);
  }
}

.bttn_sh_ppvr {
  color: inherit;
  border-style: none;
  background-color: inherit;
  font-size: 0.875em;
}

/* Portion based on using the popover-open trait from https://www.w3schools.com/cssref/sel_popover-open.php */
.snckbr:popover-open {
  width: 400px;
  position: absolute;
  inset: unset;
  bottom: 25px;
  left: 50%;
  margin: 0px 0px -15px -80px;
  color: #000;
  background-color: #FFFFFF;
  display: flex;
  justify-content: space-between;
  align-self: center;
  opacity: 1;
  border-radius: 10px;
  
  animation: 5s time_delay_snackbar;
  animation-fill-mode: forwards;
}

/* Animation portion of fading out the element from https://stackoverflow.com/a/30856455 */
@keyframes time_delay_snackbar {
  75%  { opacity: 0.75 }
  99%  { visibility: visible;  }
  100% { visibility: hidden; opacity: 0; }
}

.bttm_sht_rsz_cntnr:popover-open {
  position: fixed;
  inset: unset;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  padding: 0px;
  overflow: hidden;
  display: flex;
  justify-content: center;
  pointer-events: none;
  background-color: transparent;
}

.bttm_sht_rsz_cntnr::backdrop {
  background-color: transparent;
}

.bttm_sht_close_bttm_sht {
  width: 100%;
  height: 75px;
}

.bttm_sht_rsz_column {
  position: relative;
  width: 15px;
  height: 100%;
}

.bttm_sht_rsz_uppr {
  position: relative;
  /*--bttm-sht-rsz-cntnr-delta: 112px;
  --bttm-sht-rsz-cntnr-ht: calc( 100% - var( --bttm-sht-rsz-cntnr-delta ) );*/
  height: calc( 100% - 112px );
  top: 0px;
  width: 100%;
  overflow: hidden;
  resize: vertical;
  pointer-events: initial;
}

/* Possibilities, use :hover */
/* use a slider with a range and :in-range, :out-of-range */
/* Maybe an href and a :target to activate another element on drag */
/* Use a container query (possibly with cqw units 1% is 1 cqw */
/* https://stackoverflow.com/questions/50224939/css-can-i-use-an-objects-width-in-calc */
.bttm_sht_rsz_cntnr::selection {
  background-color: white;
}

.bttm_sht_rsz_lwr {
  position: relative;
  height: 100%;
  width: 430px;
}

.bttm_sht_g {
  max-width: 430px;
  min-height: 100%;
  color: var( --fnt-lgt-color );
  border-style: solid;
  border-color: var( --ifc-color );
  border-width: 1px;
  border-radius: 10px;
  background-color: var( --ifc-pnl-color );
  padding: 10px 1px;
  
  position: relative;
  bottom: 50px;
  left: 15px;
  margin: 0px 0px 0px -223px;
  
  border-bottom: none;
  border-radius: 10px 10px 0px 0px;
  overflow: hidden;
  z-index: -1;
  pointer-events: initial;
}

.bttn_bttm_sht_drg_hndl {
  padding: 10px;
  margin: 0px 0px 10px 0px;
}

.bttm_sht_icn_cntnr {
  margin: 10px 0px;
  border: none;
  display: flex;
  justify-content: space-around;
}

.card_g {
  position: relative;
  min-width: 100px;
  min-height: 90px;
  border-radius: 12px;
  padding: 0px;
  margin: 4px;
  overflow: hidden;
  
  /* Flex alignment of items within the card */
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  
  /* Card alignment within the panel*/
  align-self: flex-start;
}

.card_qtr {
  width: 100px;
  max-width:100px;
}

.card_hlf {
  width: 200px;
  max-width:200px;
}

.card_img {
  position: relative;
  top: 0px;
  left: 0px;
  margin: 0px;
}

.card_vid {
  max-width: 410px;
  margin-left: auto;
  margin-right: auto;
  display: inline-block;
}

.card_crn_actn {
  position: absolute;
  top: 0px;
  right: 0px;
  
  border-radius: 1.125em;
  padding: 0.375em;
  margin: 0.188em;
  transform: translateY( 0px );
}

.card_crn_actn:hover:before {
  content: "";
  position: absolute;
  left: 0px;
  top: 0px;
  border-radius: inherit;
  width: 100%;
  height: 100%;
  background: var( --ifc-color-trnsp );
  z-index: 1;
}

.card_g h1      { font-size: 0.938em; margin: 4px; padding: 0px; width: 100%; }
.card_g h1.fine { font-size: 0.469 em; }
.card_g h1.dmtv { font-size: 0.563 em; }
.card_g h1.tny  { font-size: 0.703 em; }
.card_g h1.sm   { font-size: 0.834 em; }
.card_g h1.md   { font-size: 0.938 em; }
.card_g h1.lg   { font-size: 1.125 em; }
.card_g h1.hge  { font-size: 1.406 em; }
.card_g h1.ggtn { font-size: 1.875 em; }
.card_g h1.clsl { font-size: 2.813 em; }

.card_g h2      { font-size: 0.875em; margin: 4px; padding: 0px; width: 100%; }
.card_g h2.fine { font-size: 0.438 em; }
.card_g h2.dmtv { font-size: 0.525 em; }
.card_g h2.tny  { font-size: 0.656 em; }
.card_g h2.sm   { font-size: 0.779 em; }
.card_g h2.md   { font-size: 0.875 em; }
.card_g h2.lg   { font-size: 1.050 em; }
.card_g h2.hge  { font-size: 1.313 em; }
.card_g h2.ggtn { font-size: 1.750 em; }
.card_g h2.clsl { font-size: 2.625 em; }

.card_g h3      { font-size: 0.813em; margin: 4px; padding: 0px; width: 100%; }
.card_g h3.fine { font-size: 0.406 em; }
.card_g h3.dmtv { font-size: 0.488 em; }
.card_g h3.tny  { font-size: 0.609 em; }
.card_g h3.sm   { font-size: 0.723 em; }
.card_g h3.md   { font-size: 0.813 em; }
.card_g h3.lg   { font-size: 0.975 em; }
.card_g h3.hge  { font-size: 1.219 em; }
.card_g h3.ggtn { font-size: 1.625 em; }
.card_g h3.clsl { font-size: 2.438 em; }

.card_g > span      { font-size: 0.75em; margin: 4px; padding: 0px; }
.card_g > span.fine { font-size: 0.375 em; }
.card_g > span.dmtv { font-size: 0.450 em; }
.card_g > span.tny  { font-size: 0.563 em; }
.card_g > span.sm   { font-size: 0.668 em; }
.card_g > span.md   { font-size: 0.750 em; }
.card_g > span.lg   { font-size: 0.900 em; }
.card_g > span.hge  { font-size: 1.125 em; }
.card_g > span.ggtn { font-size: 1.500 em; }
.card_g > span.clsl { font-size: 2.250 em; }

.card_bttn_actn { display: inline-block; }

.carousel_cntnr {
  position: relative;
  
  width: 100%;
  height: 115px;
  display: inline-block;
  
  overflow-x: scroll;
  scrollbar-width: thin;
  scrollbar-color: var( --ifc-lgt-color ) var( --bg-drk-color );
}

.crsl_snap {
  scroll-snap-type: x mandatory;
  scroll-snap-stop: always;
}

.crsl_item {
  position: relative;
  padding: 0px;
  width: 136px;
  min-width: 136px;
  height: 100px;
  background: var( --bg-drk-color );
  display: inline-block;
  scroll-snap-align: center;
  pointer-events: initial;
}

.crsl_item_cntnr {
  position: absolute;
  display: flex;
  height: 100px;
  pointer-events: none;
}

.crsl_covering_cntnr {
  position: absolute;
  display: flex;
  height: 100px;
  pointer-events: none;
}

.crsl_cntnr_sm_lt {
  left: 3px;
  top: 0px;
  width: 991px;
}

.crsl_item_sm_lt {
  position: sticky;
  left: 3px;
  width: 52px;
  min-width: 52px;
  margin-right: 87px;
}

.crsl_covering_cntnr_sm_lt {
  left: 61px;
  top: 0px;
  width: 933px;
}

.crsl_covering_sm_lt {
  position: sticky;
  left: 61px;
  top: 0px;
  width: 368px;
  min-width: 368px;
  height: 100px;
  background-color: var( --ifc-pnl-color );
}

.crsl_cntnr_md_lt {
  left: 61px;
  top: 0px;
  width: 933px;
}

.crsl_item_md_lt {
  position: sticky;
  left: 61px;
  width: 78px;
  min-width: 78px;
  margin-right: 61px;
}

.crsl_covering_cntnr_md_lt {
  left: 145px;
  top: 0px;
  width: 849px;
}

.crsl_covering_md_lt {
  position: sticky;
  left: 145px;
  top: 0px;
  width: 284px;
  min-width: 284px;
  height: 100px;
  background-color: var( --ifc-pnl-color );
}

.crsl_cntnr_lg {
  left: 145px;
  top: 0px;
  width: 849px;
}

.crsl_item_lg {
  position: sticky;
  left: 145px;
  width: 136px;
  min-width: 136px;
}

.crsl_covering_cntnr_lg {
  left: 287px;
  top: 0px;
  width: 707px;
}

.crsl_covering_lg {
  position: sticky;
  left: 287px;
  top: 0px;
  width: 142px;
  min-width: 142px;
  height: 100px;
  background-color: var( --ifc-pnl-color );
}

.crsl_cntnr_md_rt {
  left: 287px;
  top: 0px;
  width: 707px;
}

.crsl_item_md_rt {
  position: sticky;
  left: 287px;
  width: 78px;
  min-width: 78px;
  margin-right: 61px;
}

.crsl_covering_cntnr_md_rt {
  left: 371px;
  top: 0px;
  width: 623px;
}

.crsl_covering_md_rt {
  position: sticky;
  left: 371px;
  top: 0px;
  width: 58px;
  min-width: 58px;
  height: 100px;
  background-color: var( --ifc-pnl-color );
}

.crsl_cntnr_sm_rt {
  left: 371px;
  top: 0px;
  width: 623px;
}

.crsl_item_sm_rt {
  position: sticky;
  left: 371px;
  width: 52px;
  min-width: 52px;
  margin-right: 87px;
}

.outlnd_cvrng {
  border-style: solid;
  border-color: var( --ifc-pnl-color );
  border-width: 1px;
  pointer-events: none;
  background: var( --ifc-pnl-color );
}

.outlnd_cvrng.crsl_item_lg {
  width: 144px;
  margin-left: 2px;
}

.outlnd_cvrng.crsl_item_md_rt {
  width: 80px;
  margin-left: 2px;
}

.outlnd_cvrng.crsl_item_sm_rt {
  width: 54px;
  margin-left: 2px;
}

.crsl_item_st {
  margin-left: 0px;
}

.crsl_item_last {
  margin-right: 3px;
}

.dialog_window_g:popover-open {
  position: relative;
  width: calc( 100%-80px );
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
  padding: 10px;
  background: var( --ifc-color );
  color: var( --fnt-lgt-color );
  border-radius: 25px;
  border-style: none;
}

.dialog_window_g::backdrop {
  background: #111;
  opacity: 0.5;
  pointer-events: none;
}

.dlg_bttns_cntnr {
  float: right;
}

.bttn_acpt_dlg {
  border-style: none;
  font-size: 0.875em;
}

.dialog_fullscreen_g:popover-open {
  position: fixed;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  background: var( --ifc-pnl-color );
  color: var( --fnt-lgt-color );
  border-style: none;
  display: flex;
  justify-content: space-between;
}

.dialog_publications:popover-open {
  position: relative;
  padding: 0px;
  max-height: 90%;
  max-width: 90%;
  background: var( --ifc-color );
  color: var( --fnt-lgt-color );
  display: flex;
}

.dlg_cls_full {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  padding: 0px;
  margin: 0px;
  background-color: transparent;
  border: none;
  justify-content: center;
  align-items: center;
}

.dlg_img {
  max-width: 100%;
}

.dlg_img_caption_cntnr {
  display:table;
}

.dlg_img_caption {
  display:table-caption;
  caption-side:bottom;
}

.navigation_cntnr.nav_bttm_app_bar {
  justify-content: space-between;
  padding: 10px 0px;
}

.dropdown {
  position: relative;
}

.dropdown-content {
  display: none;
  position: absolute;
  color: var( --fnt-lgt-color );
  background: var( --ifc-pnl-color );
  min-width: 120px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

.dropdown_item {
  padding: 12px 16px;
  background: var( --ifc-pnl-color );
  position: relative;
}

.dropdown-content .dropdown_item:hover:before {
  content: "";
  position: absolute;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
  background: var( --ifc-color-trnsp );
  z-index: 2;
  pointer-events: none;
}

.dropdown:focus > .dropdown-content {display: block;}

.dropdown-content .dropdown:hover > .dropdown-content {display: block;}
.dropdown-content .dropdown > .dropdown-content:hover {display: block;}

.dropdown-content .dropdown-content {
  left: 100%;
  top: 0px;
}

.navigation_icn_cntnr {
  display: flex;
  justify-content: space-around;
}

.nav_bar {
  padding: 10px;
  margin: 0px;
}

.navigation_cntnr.nav_drwr {
   flex-direction: column;
   padding: 10px 0px 10px 20px;
}

.nav_cntnr_drwr_cntnr {
  display: flex;
  flex-direction: column;
  justify-content: initial;
  align-items: flex-start;
}

.nav_cntnr_drwr_cntnr .bdg_cntnr {
  margin-left: -15px;
  margin-right: 0px;
  align-self: initial;
}

.nav_cntnr_drwr_cntnr .bttn {
  text-align: left;
  border-radius: 25px;
  padding: 15px;
}

.nav_cntnr_drwr_cntnr .bttn_no_pad {
  color: inherit;
  padding: 0px;
  margin: 0em;
  background-color: inherit;
}

.nav_cntnr_drwr_cntnr .bttn:hover:before {
  border-radius: inherit;
}

.nav_cntnr_drwr_cntnr .bttn_lbl {
  font-size: 1em;
  padding-left: 10px;
}

.drwr_item_cntnr {
  display: flex;
  align-items: center;
}

.drwr_item_cntnr.flex_spc_btwn {
  width: 100%;
  justify-content: space-between;
}

.drwr_item_label {
  flex-shrink: 0;
}

.drwr_item_label  > label > .bttn_lbl {
  -webkit-transform: translateY(-10%);
  transform: translateY(-10%);
  display: inline-block;
}

.drwr_item_blurb {
  padding-left: 20px;
  margin: 10px 0px;
  text-align: right;
}

.drwr_item_summary {
  display: none;
}

.drwr_item_summary > ul {
  list-style-type: none;
}

.drwr_item_summary > ul > li {
  margin-bottom: 0.375em;
}

.drwr_item_summary > ul > li > .icn_sng {
  color: var( --ifc-lgt-color );
}

.drwr_item_cntnr:has( .rd_btn_hide:checked ) ~ .drwr_item_summary{ display: inline-block; }
.drwr_item_cntnr:has( .rd_btn_hide:checked ) ~ .drwr_item_summary ~ .drwr_item_summary{ display: none; }

.modal_navigation_drawer_g:popover-open {
  display: flex;
  flex-direction: column;
  
  position: absolute;
  inset: unset;
  top: 0px;
  right: 0px;

  height: 100%;
  padding: 10px 20px;
  color: var( --fnt-lgt-color );
  background: var( --ifc-artcl-color );
  
  border-style: none;
  border-radius: 25px 0px 0px 25px;
  
  overflow-x: visible;
  overflow-y: scroll;
  scrollbar-width: thin;
}

.modal_navigation_drawer_g::backdrop {
  background: #111;
  opacity: 0.5;
  pointer-events: none;
}

.navigation_cntnr.nav_rl {
  width: fit-content;
  flex-direction: column;
  flex-wrap: nowrap;
  padding: 5px;
  background: var( --bg-drk-color );
  min-width: 85px;
  min-height: 450px;
  align-items: center;
  margin: 0px;
}

.nav_rl .navigation_icn_cntnr {
  flex-direction: column;
  justify-content: initial;
}

.nav_rl_content_cntnr {
  width: calc( 100% - 90px );
}

.nav_rl .bttn_lbl { display: none; }
.nav_rl .bttn_lbl.always_vsbl { display: inline; }
.nav_rl .bttn_icn_cntnr:has( input:checked ) .bttn_lbl { display: inline; }
.nav_rl .bttn_icn_trg_ancr:target .bttn_lbl { display: inline; }


.nav_tabs {
  background: var( --bg-drk-color );
  text-align: center;
  padding: 0px;
}

.nav_tabs .bttn_icn_cntnr {
  flex-grow: 1;
}

.nav_tabs .bttn {
  position: relative;
  margin: 0px;
  padding: 15px 15px 2em 15px;
  
  border-style: none;
  border-color: var( --fnt-lgt-color );
  border-width: 3px;
  
  border-radius: initial;
}

.nv_tab:hover:before {
  border-radius: initial;
}

.nav_tabs .bttn_lbl {
  position: absolute;
  font-size: 1em;
  margin-left: auto;
  margin-right: auto;
  bottom: 0.75em;
  left: 0px;
  right: 0px;
  text-align: center;
  pointer-events: none;
}

.nav_tabs .bttn_icn_cntnr:has( input:checked ) .nv_tab { border-bottom-style: solid; }

.text_input {
  width: 100%;
  color: var( --ifc-fnt-color );
  text-align: left;
  font-size: 1em;
  padding: 18px 30px 18px 40px;
  margin: 0px;
  border-style: none;
  border-radius: 5px 5px 0px 0px;
  background-color: var( --ifc-popover-color );
}

.search_input {
  border-radius: 1.5em;
  background-repeat: no-repeat;
  background-image: image-set('data:image/svg+xml;utf-8,<svg xmlns="http://www.w3.org/2000/svg"><svg x="10" y="15"><svg height="24" viewBox="0 -960 960 960" width="24" fill="rgba(225,225,225,1.0)" ><path d="M784-120 532-372q-30 24-69 38t-83 14q-109 0-184.5-75.5T120-580q0-109 75.5-184.5T380-840q109 0 184.5 75.5T640-580q0 44-14 83t-38 69l252 252-56 56ZM380-400q75 0 127.5-52.5T560-580q0-75-52.5-127.5T380-760q-75 0-127.5 52.5T200-580q0 75 52.5 127.5T380-400Z"></path></svg></svg></svg>');
}

.select_color {
  display: block;
  border-style: none;
  padding: 1px;
  margin: 10px;
  background-color: var( --ifc-dsbld-color );
}

.select_color_dropdown_cntnr{
  display: block;
  position: relative;
}

.select_color_dropdown {
  width: 220px;
}

.select_color_dropdown_selections_cntnr { 
  position: absolute;
  display: none;
  background: var( --ifc-artcl-color );
  
  max-height: 300px;
  overflow-y: scroll;
  scrollbar-width: thin;
  z-index: 2;
}

.slct_clr_drpdn_lbl{
  display: block;
  padding: 4px 20px 4px 10px;
}

.slct_clr_drpdn_lbl .material-symbols-rounded {
  font-size: 1em;
  padding-right: 10px;
}

.slct_clr_img { padding-right: 10px; }

.select_color_dropdown_cntnr:has( .select_color_dropdown:focus ) .select_color_dropdown_selections_cntnr {
  display: block;
}

.select_color_dropdown_cntnr:has( .slct_clr_drpdn_lbl:hover ) .select_color_dropdown_selections_cntnr {
  display: block;
}

.navigation_cntnr.nav_top_app_bar {
  justify-content: space-between;
  background: var( --ifc-app-bar-color );
  max-height: 3em;
  margin: 0.3em 0px;
  padding: 0.3em;
}

.nav_top_app_bar h1 {
  margin: 0.3em 10px;
}

/* Possible idea to get the scroll region to change color the way Google's example does */
/* Use multiple layers of colored backdrops that hide each other and then scroll off screen */
/* While the sticky layers attach to the top of the screen after the coverings leave */
/* Has issues with multiple sticky elements acting like display: block and setting each other back from the edge */
/* May require some other container or position shifting */
.navigation_top_app_bar_scroll_cntnr {
  position: relative;
  width: 100%;
  display: flex;
  padding: 0xp;
  flex-direction: column;
  overflow-y: scroll;
  scrollbar-width: thin;
  max-height: 6em;
  height: 6em;
}

.nav_top_app_bar.nav_top_fixed {
  position: sticky;
  left: 0px;
  top:  0.3em;
}

.navigation_cntnr_scroll_collapse {
  position: absolute;
  left: 0px;
  top: 3em;
  width: 100%;
  height: 6em;
  z-index: 1;
  pointer-events: none;
}

.navigation_cntnr_scroll_title {
  margin: 0.3em 10px 0.3em calc( 2em + 10px );
  left: 0px;
  top: 0.5em;
  position: sticky;
}

.navigation_top_app_bar_scroll_cntnr.top_app_bar_scroll_cntnr_lg {
  max-height: 9em;
  height: 9em;
}

.navigation_cntnr_scroll_collapse.scroll_collapse_lg {
  top: 6em;
  height: 9em;
}

.sngl_ln_clstr_w_hl {
  position: relative;
  width: 100%;
  padding: 10px;
}

.chkbx_triple_state_panel {
  display: none;
  justify-content: space-between;
  font-variation-settings: 'FILL' 1;
}

.sngl_ln_clstr_w_hl:hover:before {
  content: "";
  position: absolute;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
  background: var( --ifc-color-trnsp );
  z-index: 1;
}

.chkbx_triple_state_panel:has( input:checked ){ display: flex; }

.bttn.chip {  border-radius: 5px; }

.icn_sh_mdl_pckr {
  font-variation-settings: 'FILL' 0;
}

.modal_calendar_g:popover-open {
  width: 31.25em;
  height: 21.875em;
  border-style: none;
  border-radius: 1.563em;
  color: var( --ifc-fnt-color );
  background: var( --ifc-popover-color );
  padding: 0px;
  display: flex;
}

.modal_calendar_g::backdrop {
  background: #111;
  opacity: 0.5;
  pointer-events: none;
}

.clndr_cntnr_date {
  width: 9.375em;
  height: 100%;
  border-right-style: solid;
  border-color: var( --ifc-lgt-color );
  border-width: 1px;
  padding: 0.938em 1.25em 0.625em 0.625em;
}

.clndr_date_dsply {
  position: relative;
  font-size: 2.188em;
}

.days_of_week_dsply {
  position: absolute;
  opacity: 0;
  font-family: "Monaco", monospace;
}

#day_of_week_0 { opacity: var(--sun_opacity); }
#day_of_week_1 { opacity: var(--mon_opacity); }
#day_of_week_2 { opacity: var(--tue_opacity); }
#day_of_week_3 { opacity: var(--wed_opacity); }
#day_of_week_4 { opacity: var(--thu_opacity); }
#day_of_week_5 { opacity: var(--fri_opacity); }
#day_of_week_6 { opacity: var(--sat_opacity); }

.month_dsply {
  position: absolute;
  opacity: 0;
  top: 1.14em;
  left: 0px;
  font-family: "Monaco", monospace;
}

#month_01 { opacity: var(--jan_opacity); }
#month_02 { opacity: var(--feb_opacity); }
#month_03 { opacity: var(--mar_opacity); }
#month_04 { opacity: var(--apr_opacity); }
#month_05 { opacity: var(--may_opacity); }
#month_06 { opacity: var(--jun_opacity); }
#month_07 { opacity: var(--jul_opacity); }
#month_08 { opacity: var(--aug_opacity); }
#month_09 { opacity: var(--sep_opacity); }
#month_10 { opacity: var(--oct_opacity); }
#month_11 { opacity: var(--nov_opacity); }
#month_12 { opacity: var(--dec_opacity); }

#clndr_day_dsply {
  position: absolute;
  top: 1.14em;
  left: 2em;
  font-family: "Monaco", monospace;
}

#clndr_day_dsply:before {
  counter-reset: day-of-month var(--day_of_month);
  content: counter(day-of-month);
}

.clndr_cntnr_date_slct {
  width: 21.875em;
  height: 100%;
  overflow-x: hidden;
  overflow-y: hidden;
}

.clndr_cntnr_top {
  position: relative;
  width: 100%;
  height: 3.125em;
  
  display: flex;
  justify-content: space-between;
}

.clndr_cntnr_year, .clndr_slct_month { position: relative; }
.clndr_cntnr_year { padding: 0.938em 0.25em 0.938em 1.25em; }
.clndr_slct_month { padding: 0.938em 0.25em 0.938em 0.25em; }

.clndr_cntnr_year:hover:before {
  content: "";
  position: absolute;
  left: 0px;
  top: 0px;
  border-radius: inherit;
  width: 100%;
  height: 100%;
  background: var( --ifc-color-trnsp );
  z-index: 1;
}

.month_lbl { display: none; }

.clndr_cntnr_top:has( #month_01_jan:checked ) .month_01_lbl { display: inline; }
.clndr_cntnr_top:has( #month_02_feb:checked ) .month_02_lbl { display: inline; }
.clndr_cntnr_top:has( #month_03_mar:checked ) .month_03_lbl { display: inline; }
.clndr_cntnr_top:has( #month_04_apr:checked ) .month_04_lbl { display: inline; }
.clndr_cntnr_top:has( #month_05_may:checked ) .month_05_lbl { display: inline; }
.clndr_cntnr_top:has( #month_06_jun:checked ) .month_06_lbl { display: inline; }
.clndr_cntnr_top:has( #month_07_jul:checked ) .month_07_lbl { display: inline; }
.clndr_cntnr_top:has( #month_08_aug:checked ) .month_08_lbl { display: inline; }
.clndr_cntnr_top:has( #month_09_sep:checked ) .month_09_lbl { display: inline; }
.clndr_cntnr_top:has( #month_10_oct:checked ) .month_10_lbl { display: inline; }
.clndr_cntnr_top:has( #month_11_nov:checked ) .month_11_lbl { display: inline; }
.clndr_cntnr_top:has( #month_12_dec:checked ) .month_12_lbl { display: inline; }

body:has( #month_01_jan:checked ) { --month_of_year: 1; }
body:has( #month_02_feb:checked ) { --month_of_year: 2; }
body:has( #month_03_mar:checked ) { --month_of_year: 3; }
body:has( #month_04_apr:checked ) { --month_of_year: 4; }
body:has( #month_05_may:checked ) { --month_of_year: 5; }
body:has( #month_06_jun:checked ) { --month_of_year: 6; }
body:has( #month_07_jul:checked ) { --month_of_year: 7; }
body:has( #month_08_aug:checked ) { --month_of_year: 8; }
body:has( #month_09_sep:checked ) { --month_of_year: 9; }
body:has( #month_10_oct:checked ) { --month_of_year: 10; }
body:has( #month_11_nov:checked ) { --month_of_year: 11; }
body:has( #month_12_dec:checked ) { --month_of_year: 12; }

.clndr_top_month_dsply { display: none; }
#clndr_year_slct_close { display: none; }

body:has( #month_01_jan:checked ) #clndr_top_month_01 { display: inline; }
body:has( #month_02_feb:checked ) #clndr_top_month_02 { display: inline; }
body:has( #month_03_mar:checked ) #clndr_top_month_03 { display: inline; }
body:has( #month_04_apr:checked ) #clndr_top_month_04 { display: inline; }
body:has( #month_05_may:checked ) #clndr_top_month_05 { display: inline; }
body:has( #month_06_jun:checked ) #clndr_top_month_06 { display: inline; }
body:has( #month_07_jul:checked ) #clndr_top_month_07 { display: inline; }
body:has( #month_08_aug:checked ) #clndr_top_month_08 { display: inline; }
body:has( #month_09_sep:checked ) #clndr_top_month_09 { display: inline; }
body:has( #month_10_oct:checked ) #clndr_top_month_10 { display: inline; }
body:has( #month_11_nov:checked ) #clndr_top_month_11 { display: inline; }
body:has( #month_12_dec:checked ) #clndr_top_month_12 { display: inline; }

#clndr_top_year:after {
  counter-reset: clndr-top-year var(--year);
  content: counter(clndr-top-year);
}

.clndr_cntnr_mid {
  width: 100%;
  height: 15.625em;
}

.clndr_slct_year         { display: none;    }
.clndr_slct_day_of_month { display: initial; }

body:has( #clndr_slct_year_tgl:checked ) .clndr_slct_year         { display: initial; }
body:has( #clndr_slct_year_tgl:checked ) .clndr_slct_day_of_month { display: none;    }

body:has( #clndr_slct_year_tgl:checked ) #clndr_year_slct_open  { display: none;    }
body:has( #clndr_slct_year_tgl:checked ) #clndr_year_slct_close { display: initial; }

.clndr_year_nmbrs {
  display: flex;
  flex-wrap: wrap;
  padding: 0.313em 0.813em;
  
  border-top-style: solid;
  border-bottom-style: solid;
  border-color: var( --ifc-lgt-color );
  border-width: 1px;
}

.year_slct_lbl {
  position: relative;
  font-size: 1.125em;
  width: 5.938em;
  height: 3em;
  padding: 0.313em;
  
  display: flex;
  justify-content: center;
}

.year_slct_lbl:hover:before {
  content: "";
  position: absolute;
  left: 0px;
  top: 0px;
  border-radius: inherit;
  width: 100%;
  height: 100%;
  background: var( --ifc-color-trnsp );
  z-index: 1;
}

.year_nmbr {
  position: relative;
  font-size: 1.125em;
  width: 100%;
  height: 100%;
  text-align: center;
  border-radius: 1.063em;
  top: 0px;
  left: 0px;
  padding: 0.5em 0px;
}

.year_active {
  border-style: solid;
  border-color: var( --ifc-fnt-color );
  
  --year_current_val_clamp: calc( clamp( -1, ( var( --year_val ) - var( --year_current ) ), 1 ) );
  border-width: calc( ( 1 - max( var(--year_current_val_clamp), -1 * var(--year_current_val_clamp) ) ) * 1px );
}

.clndr_year_nmbrs:has( #year_2023:checked ) label[ for="year_2023" ] > .year_nmbr{ color: var( --ifc-color ); background: var( --fnt-lgt-color ); }
.clndr_year_nmbrs:has( #year_2024:checked ) label[ for="year_2024" ] > .year_nmbr{ color: var( --ifc-color ); background: var( --fnt-lgt-color ); }
.clndr_year_nmbrs:has( #year_2025:checked ) label[ for="year_2025" ] > .year_nmbr{ color: var( --ifc-color ); background: var( --fnt-lgt-color ); }
.clndr_year_nmbrs:has( #year_2026:checked ) label[ for="year_2026" ] > .year_nmbr{ color: var( --ifc-color ); background: var( --fnt-lgt-color ); }

body:has( #year_2023:checked ) { --year: 2023; }
body:has( #year_2024:checked ) { --year: 2024; }
body:has( #year_2025:checked ) { --year: 2025; }
body:has( #year_2026:checked ) { --year: 2026; }

.clndr_hdr {
  display: flex;
}

.clndr_hdr span {
  font-size: 1.125em;
  width: 2.777em;
  height: 1.875em;
  text-align: center;
  padding: 0.25em 0px;
}

.clndr_day_nmbrs {
  display: flex;
  flex-wrap: wrap;
}

.days_of_month_spcr {
  font-size: 1.125em;
  width: 2.777em;
  height: 1.875em;
  padding: 0px 0px;
  
  --first_day_m_day_of_week: calc( var(--first_of_month_day_of_week) - var(--day_of_week_val) + 1 );
  width: calc( clamp( 0, var(--first_day_m_day_of_week)*10000, 1 ) * 2.777em );
}

.days_of_month_cntnr {
  position: relative;
  font-size: 1.125em;
  width: 2.777em;
  height: 1.875em;
  padding: 0px 0px;
  
  display: flex;
  justify-content: center;
}

.days_of_month_cndtnl {
  --dommdvpp: calc( var(--days_in_month_slctd) - var(--day_val) + 1 );
  --wh_mlt: calc( clamp( 0, var(--dommdvpp)*10000, 1 ) );
  width: calc( var( --wh_mlt ) * 2.777em );
  height: calc( var( --wh_mlt ) * 1.875em );
  opacity: calc( var( --wh_mlt ) );
}

.day_nmbr {
  position: relative;
  font-size: 1.125em;
  width: 1.625em;
  height: 1.625em;
  text-align: center;
  padding: 0.25em 0px;
  border-radius: 1.063em;
  top: 0px;
  left: 0px;
  border-style: solid;
  border-color: var( --ifc-fnt-color );
  
  /* --dommdv is offset from current day, --dimcpp is --days_in_month + 1 calculated earlier to reduce calculations */
  /* Equates to 1 when --day_of_month_current == --day_val because they cancel and then --days_in_month_current / --days_in_month_current = 1 */
  /* Otherwise, a number larger or smaller is modulo to result in a smaller number that gets rounded down to 0 */
  --dimdommdv:              calc( var( --dimdom ) - var( --day_val ) );
  --inv_days_in_month_dist: calc( mod( var( --dimdommdv ), ( var( --dimcpp ) ) ) );
  --is_year_month_slctd: calc( var( --is_year_current_slctd ) * var( --is_month_current_slctd ) );
  border-width: calc( ( var( --is_year_month_slctd ) * round( down, var( --inv_days_in_month_dist )/var( --days_in_month_current ) ) ) * 1px );
}

.days_of_month_cndtnl .day_nmbr {
  --dommdvpp: calc( var(--days_in_month_slctd) - var(--day_val) + 1 );
  --wh_mlt:   calc( clamp( 0, var(--dommdvpp)*10000, 1 ) );
  width:   calc( var( --wh_mlt ) * 1.625em );
  height:  calc( var( --wh_mlt ) * 1.625em );
  padding: calc( var( --wh_mlt ) * 0.25em ) 0px;
}

.day_nmbr:hover:before {
  content: "";
  position: absolute;
  left: 0px;
  top: 0px;
  border-radius: inherit;
  width: 100%;
  height: 100%;
  background: var( --ifc-color-trnsp );
  z-index: 1;
}

.clndr_day_nmbrs:has( #day_of_month_01:checked ) label[ for="day_of_month_01" ] > .day_nmbr{ color: var( --ifc-color ); background: var( --fnt-lgt-color ); }
.clndr_day_nmbrs:has( #day_of_month_02:checked ) label[ for="day_of_month_02" ] > .day_nmbr{ color: var( --ifc-color ); background: var( --fnt-lgt-color ); }
.clndr_day_nmbrs:has( #day_of_month_03:checked ) label[ for="day_of_month_03" ] > .day_nmbr{ color: var( --ifc-color ); background: var( --fnt-lgt-color ); }
.clndr_day_nmbrs:has( #day_of_month_04:checked ) label[ for="day_of_month_04" ] > .day_nmbr{ color: var( --ifc-color ); background: var( --fnt-lgt-color ); }
.clndr_day_nmbrs:has( #day_of_month_05:checked ) label[ for="day_of_month_05" ] > .day_nmbr{ color: var( --ifc-color ); background: var( --fnt-lgt-color ); }
.clndr_day_nmbrs:has( #day_of_month_06:checked ) label[ for="day_of_month_06" ] > .day_nmbr{ color: var( --ifc-color ); background: var( --fnt-lgt-color ); }
.clndr_day_nmbrs:has( #day_of_month_07:checked ) label[ for="day_of_month_07" ] > .day_nmbr{ color: var( --ifc-color ); background: var( --fnt-lgt-color ); }
.clndr_day_nmbrs:has( #day_of_month_08:checked ) label[ for="day_of_month_08" ] > .day_nmbr{ color: var( --ifc-color ); background: var( --fnt-lgt-color ); }
.clndr_day_nmbrs:has( #day_of_month_09:checked ) label[ for="day_of_month_09" ] > .day_nmbr{ color: var( --ifc-color ); background: var( --fnt-lgt-color ); }
.clndr_day_nmbrs:has( #day_of_month_10:checked ) label[ for="day_of_month_10" ] > .day_nmbr{ color: var( --ifc-color ); background: var( --fnt-lgt-color ); }
.clndr_day_nmbrs:has( #day_of_month_11:checked ) label[ for="day_of_month_11" ] > .day_nmbr{ color: var( --ifc-color ); background: var( --fnt-lgt-color ); }
.clndr_day_nmbrs:has( #day_of_month_12:checked ) label[ for="day_of_month_12" ] > .day_nmbr{ color: var( --ifc-color ); background: var( --fnt-lgt-color ); }
.clndr_day_nmbrs:has( #day_of_month_13:checked ) label[ for="day_of_month_13" ] > .day_nmbr{ color: var( --ifc-color ); background: var( --fnt-lgt-color ); }
.clndr_day_nmbrs:has( #day_of_month_14:checked ) label[ for="day_of_month_14" ] > .day_nmbr{ color: var( --ifc-color ); background: var( --fnt-lgt-color ); }
.clndr_day_nmbrs:has( #day_of_month_15:checked ) label[ for="day_of_month_15" ] > .day_nmbr{ color: var( --ifc-color ); background: var( --fnt-lgt-color ); }
.clndr_day_nmbrs:has( #day_of_month_16:checked ) label[ for="day_of_month_16" ] > .day_nmbr{ color: var( --ifc-color ); background: var( --fnt-lgt-color ); }
.clndr_day_nmbrs:has( #day_of_month_17:checked ) label[ for="day_of_month_17" ] > .day_nmbr{ color: var( --ifc-color ); background: var( --fnt-lgt-color ); }
.clndr_day_nmbrs:has( #day_of_month_18:checked ) label[ for="day_of_month_18" ] > .day_nmbr{ color: var( --ifc-color ); background: var( --fnt-lgt-color ); }
.clndr_day_nmbrs:has( #day_of_month_19:checked ) label[ for="day_of_month_19" ] > .day_nmbr{ color: var( --ifc-color ); background: var( --fnt-lgt-color ); }
.clndr_day_nmbrs:has( #day_of_month_20:checked ) label[ for="day_of_month_20" ] > .day_nmbr{ color: var( --ifc-color ); background: var( --fnt-lgt-color ); }
.clndr_day_nmbrs:has( #day_of_month_21:checked ) label[ for="day_of_month_21" ] > .day_nmbr{ color: var( --ifc-color ); background: var( --fnt-lgt-color ); }
.clndr_day_nmbrs:has( #day_of_month_22:checked ) label[ for="day_of_month_22" ] > .day_nmbr{ color: var( --ifc-color ); background: var( --fnt-lgt-color ); }
.clndr_day_nmbrs:has( #day_of_month_23:checked ) label[ for="day_of_month_23" ] > .day_nmbr{ color: var( --ifc-color ); background: var( --fnt-lgt-color ); }
.clndr_day_nmbrs:has( #day_of_month_24:checked ) label[ for="day_of_month_24" ] > .day_nmbr{ color: var( --ifc-color ); background: var( --fnt-lgt-color ); }
.clndr_day_nmbrs:has( #day_of_month_25:checked ) label[ for="day_of_month_25" ] > .day_nmbr{ color: var( --ifc-color ); background: var( --fnt-lgt-color ); }
.clndr_day_nmbrs:has( #day_of_month_26:checked ) label[ for="day_of_month_26" ] > .day_nmbr{ color: var( --ifc-color ); background: var( --fnt-lgt-color ); }
.clndr_day_nmbrs:has( #day_of_month_27:checked ) label[ for="day_of_month_27" ] > .day_nmbr{ color: var( --ifc-color ); background: var( --fnt-lgt-color ); }
.clndr_day_nmbrs:has( #day_of_month_28:checked ) label[ for="day_of_month_28" ] > .day_nmbr{ color: var( --ifc-color ); background: var( --fnt-lgt-color ); }
.clndr_day_nmbrs:has( #day_of_month_29:checked ) label[ for="day_of_month_29" ] > .day_nmbr{ color: var( --ifc-color ); background: var( --fnt-lgt-color ); }
.clndr_day_nmbrs:has( #day_of_month_30:checked ) label[ for="day_of_month_30" ] > .day_nmbr{ color: var( --ifc-color ); background: var( --fnt-lgt-color ); }
.clndr_day_nmbrs:has( #day_of_month_31:checked ) label[ for="day_of_month_31" ] > .day_nmbr{ color: var( --ifc-color ); background: var( --fnt-lgt-color ); }

body:has( #day_of_month_01:checked ) { --day_of_month: 1; }
body:has( #day_of_month_02:checked ) { --day_of_month: 2; }
body:has( #day_of_month_03:checked ) { --day_of_month: 3; }
body:has( #day_of_month_04:checked ) { --day_of_month: 4; }
body:has( #day_of_month_05:checked ) { --day_of_month: 5; }
body:has( #day_of_month_06:checked ) { --day_of_month: 6; }
body:has( #day_of_month_07:checked ) { --day_of_month: 7; }
body:has( #day_of_month_08:checked ) { --day_of_month: 8; }
body:has( #day_of_month_09:checked ) { --day_of_month: 9; }
body:has( #day_of_month_10:checked ) { --day_of_month: 10; }
body:has( #day_of_month_11:checked ) { --day_of_month: 11; }
body:has( #day_of_month_12:checked ) { --day_of_month: 12; }
body:has( #day_of_month_13:checked ) { --day_of_month: 13; }
body:has( #day_of_month_14:checked ) { --day_of_month: 14; }
body:has( #day_of_month_15:checked ) { --day_of_month: 15; }
body:has( #day_of_month_16:checked ) { --day_of_month: 16; }
body:has( #day_of_month_17:checked ) { --day_of_month: 17; }
body:has( #day_of_month_18:checked ) { --day_of_month: 18; }
body:has( #day_of_month_19:checked ) { --day_of_month: 19; }
body:has( #day_of_month_20:checked ) { --day_of_month: 20; }
body:has( #day_of_month_21:checked ) { --day_of_month: 21; }
body:has( #day_of_month_22:checked ) { --day_of_month: 22; }
body:has( #day_of_month_23:checked ) { --day_of_month: 23; }
body:has( #day_of_month_24:checked ) { --day_of_month: 24; }
body:has( #day_of_month_25:checked ) { --day_of_month: 25; }
body:has( #day_of_month_26:checked ) { --day_of_month: 26; }
body:has( #day_of_month_27:checked ) { --day_of_month: 27; }
body:has( #day_of_month_28:checked ) { --day_of_month: 28; }
body:has( #day_of_month_29:checked ) { --day_of_month: 29; }
body:has( #day_of_month_30:checked ) { --day_of_month: 30; }
body:has( #day_of_month_31:checked ) { --day_of_month: 31; }

.clndr_cntnr_btm {
  width: 100%;
  height: 3.125em;
  padding: 0.625em 1.25em;
}

.modal_time_picker_g:popover-open {
  position: relative;
  width: 35.938em;
  height: 23.438em;
  border-style: none;
  border-radius: 1.563em;
  color: var( --fnt-lgt-color );
  background: var( --ifc-artcl-color );
  padding: 0px;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
  overflow-y: hidden;
}

.modal_time_picker_g::backdrop {
  background: #111;
  opacity: 0.5;
  pointer-events: none;
}

.clock_hdr {
  width: 100%;
  height: 3.125em;
  padding: 1.25em;
  
  
  display: flex;
  justify-content: space-between;
}

.clock_mid {
  position: relative;
  width: 100%;
  height: 15.625em;
  left: 0px;
  top: 0px;
  display: flex;
  justify-content: space-between;
  padding: 0px 1.563em;
}

.clock_dsply_time {
  position: relative;
  font-size: 4.063em;
  font-family: "Monaco", monospace;
  top: calc( 50% - 0.615em );
}

.clock_dsply_hr_mnt {
  display: inline-block;
  height: 1.23em;
  width: 1.385em;
  text-align: center;
  border-radius: 0.154em;
  background: var( --ifc-popover-color );
}

#clock_dsply_hr:after {
  counter-reset: dsply-hr var(--clock_time_hr);
  content: counter(dsply-hr, decimal-leading-zero);
}

#clock_dsply_mnt:after {
  counter-reset: dsply-mnt var(--clock_time_mnt);
  content: counter(dsply-mnt, decimal-leading-zero);
}

.clock_cntnr {
  position: relative;
  width: 15.625em;
  height: 15.625em;
  left: 0px;
  top: 0px;
  display: none;
}

#modal_time_picker_g:has( #hr_mnt_tgl:checked     ) .clock_slct_hr  { display: initial; }
#modal_time_picker_g:has( #hr_mnt_tgl:not(:checked) ) .clock_slct_mnt { display: initial; }

.clock_time_arc {
  --a: 30deg; /* control the progression */
  
  position: absolute;
  width: 15.625em;
  height: 15.625em;
  padding: 2.5em; /* the border thickness */
  box-sizing: border-box;
  border-radius: 50%;
  color: var( --fnt-lgt-color );
  background: var( --ifc-popover-color );
  mask:
    linear-gradient(#0000 0 0) content-box intersect,
    conic-gradient(#000 var(--a),#0000 0);
}

#clock_time_hr_01 { transform: rotate(15deg); }
#clock_time_hr_02 { transform: rotate(45deg); }
#clock_time_hr_03 { transform: rotate(75deg); }
#clock_time_hr_04 { transform: rotate(105deg); }
#clock_time_hr_05 { transform: rotate(135deg); }
#clock_time_hr_06 { transform: rotate(165deg); }
#clock_time_hr_07 { transform: rotate(195deg); }
#clock_time_hr_08 { transform: rotate(225deg); }
#clock_time_hr_09 { transform: rotate(255deg); }
#clock_time_hr_10 { transform: rotate(285deg); }
#clock_time_hr_11 { transform: rotate(315deg); }
#clock_time_hr_12 { transform: rotate(345deg); }

.clock_time_sector {
  --s: 0deg;  /* starting angle */
  --p: 30deg; /* filling angle */

  position: absolute;
  top: 2.5em;
  left: 2.5em;
  width: 10.625em;
  height: 10.625em;
  border-radius: 50%;
  background: var( --ifc-popover-color );
  /* switch #0000 and #000 to get the opposite shape */
  mask: conic-gradient(from var(--s),#0000,#000 1deg var(--p),#0000 calc(var(--p) + 1deg));
}

#clock_time_hr_13 { transform: rotate(15deg); }
#clock_time_hr_14 { transform: rotate(45deg); }
#clock_time_hr_15 { transform: rotate(75deg); }
#clock_time_hr_16 { transform: rotate(105deg); }
#clock_time_hr_17 { transform: rotate(135deg); }
#clock_time_hr_18 { transform: rotate(165deg); }
#clock_time_hr_19 { transform: rotate(195deg); }
#clock_time_hr_20 { transform: rotate(225deg); }
#clock_time_hr_21 { transform: rotate(255deg); }
#clock_time_hr_22 { transform: rotate(285deg); }
#clock_time_hr_23 { transform: rotate(315deg); }
#clock_time_hr_24 { transform: rotate(345deg); }

.clock_time_nmbr {
  position: absolute;
  font-size: 1.25em;
  width: 2em;
  height: 2em;
  border-radius: 50%;
  text-align: center;
  padding: 0.5em;
  z-index: 1;
}

#clock_nmbr_hr_01 { left: 63%; top: 5%; }
#clock_nmbr_hr_02 { left: 78%; top: 20%; }
#clock_nmbr_hr_03 { left: 84%; top: 41%; }
#clock_nmbr_hr_04 { left: 78%; top: 62%; }
#clock_nmbr_hr_05 { left: 63%; top: 77%; }
#clock_nmbr_hr_06 { left: 42%; top: 83%; }
#clock_nmbr_hr_07 { left: 21%; top: 77%; }
#clock_nmbr_hr_08 { left:  6%; top: 62%; }
#clock_nmbr_hr_09 { left:  1%; top: 41%; }
#clock_nmbr_hr_10 { left: 6%;  top: 19%; }
#clock_nmbr_hr_11 { left: 22%; top:  4%; }
#clock_nmbr_hr_12 { left: 42%; top: -1%; }
#clock_nmbr_hr_13 { left: 56%; top: 16%; }
#clock_nmbr_hr_14 { left: 65%; top: 28%; }
#clock_nmbr_hr_15 { left: 69%; top: 41%; }
#clock_nmbr_hr_16 { left: 65%; top: 54%; }
#clock_nmbr_hr_17 { left: 56%; top: 64%; }
#clock_nmbr_hr_18 { left: 42%; top: 69%; }
#clock_nmbr_hr_19 { left: 28%; top: 64%; }
#clock_nmbr_hr_20 { left: 20%; top: 54%; }
#clock_nmbr_hr_21 { left: 16%; top: 41%; }
#clock_nmbr_hr_22 { left: 20%; top: 28%; }
#clock_nmbr_hr_23 { left: 29%; top: 17%; }
#clock_nmbr_hr_24 { left: 43%; top: 12%; }

body:has( #time_hr_01:checked ) label[ for="time_hr_01" ] { color: var( --ifc-popover-color ); background: var( --fnt-lgt-color ); }
body:has( #time_hr_02:checked ) label[ for="time_hr_02" ] { color: var( --ifc-popover-color ); background: var( --fnt-lgt-color ); }
body:has( #time_hr_03:checked ) label[ for="time_hr_03" ] { color: var( --ifc-popover-color ); background: var( --fnt-lgt-color ); }
body:has( #time_hr_04:checked ) label[ for="time_hr_04" ] { color: var( --ifc-popover-color ); background: var( --fnt-lgt-color ); }
body:has( #time_hr_05:checked ) label[ for="time_hr_05" ] { color: var( --ifc-popover-color ); background: var( --fnt-lgt-color ); }
body:has( #time_hr_06:checked ) label[ for="time_hr_06" ] { color: var( --ifc-popover-color ); background: var( --fnt-lgt-color ); }
body:has( #time_hr_07:checked ) label[ for="time_hr_07" ] { color: var( --ifc-popover-color ); background: var( --fnt-lgt-color ); }
body:has( #time_hr_08:checked ) label[ for="time_hr_08" ] { color: var( --ifc-popover-color ); background: var( --fnt-lgt-color ); }
body:has( #time_hr_09:checked ) label[ for="time_hr_09" ] { color: var( --ifc-popover-color ); background: var( --fnt-lgt-color ); }
body:has( #time_hr_10:checked ) label[ for="time_hr_10" ] { color: var( --ifc-popover-color ); background: var( --fnt-lgt-color ); }
body:has( #time_hr_11:checked ) label[ for="time_hr_11" ] { color: var( --ifc-popover-color ); background: var( --fnt-lgt-color ); }
body:has( #time_hr_12:checked ) label[ for="time_hr_12" ] { color: var( --ifc-popover-color ); background: var( --fnt-lgt-color ); }
body:has( #time_hr_13:checked ) label[ for="time_hr_13" ] { color: var( --ifc-popover-color ); background: var( --fnt-lgt-color ); }
body:has( #time_hr_14:checked ) label[ for="time_hr_14" ] { color: var( --ifc-popover-color ); background: var( --fnt-lgt-color ); }
body:has( #time_hr_15:checked ) label[ for="time_hr_15" ] { color: var( --ifc-popover-color ); background: var( --fnt-lgt-color ); }
body:has( #time_hr_16:checked ) label[ for="time_hr_16" ] { color: var( --ifc-popover-color ); background: var( --fnt-lgt-color ); }
body:has( #time_hr_17:checked ) label[ for="time_hr_17" ] { color: var( --ifc-popover-color ); background: var( --fnt-lgt-color ); }
body:has( #time_hr_18:checked ) label[ for="time_hr_18" ] { color: var( --ifc-popover-color ); background: var( --fnt-lgt-color ); }
body:has( #time_hr_19:checked ) label[ for="time_hr_19" ] { color: var( --ifc-popover-color ); background: var( --fnt-lgt-color ); }
body:has( #time_hr_20:checked ) label[ for="time_hr_20" ] { color: var( --ifc-popover-color ); background: var( --fnt-lgt-color ); }
body:has( #time_hr_21:checked ) label[ for="time_hr_21" ] { color: var( --ifc-popover-color ); background: var( --fnt-lgt-color ); }
body:has( #time_hr_22:checked ) label[ for="time_hr_22" ] { color: var( --ifc-popover-color ); background: var( --fnt-lgt-color ); }
body:has( #time_hr_23:checked ) label[ for="time_hr_23" ] { color: var( --ifc-popover-color ); background: var( --fnt-lgt-color ); }
body:has( #time_hr_24:checked ) label[ for="time_hr_24" ] { color: var( --ifc-popover-color ); background: var( --fnt-lgt-color ); }

body:has( #time_hr_01:checked ) { --clock_time_hr: 01; }
body:has( #time_hr_02:checked ) { --clock_time_hr: 02; }
body:has( #time_hr_03:checked ) { --clock_time_hr: 03; }
body:has( #time_hr_04:checked ) { --clock_time_hr: 04; }
body:has( #time_hr_05:checked ) { --clock_time_hr: 05; }
body:has( #time_hr_06:checked ) { --clock_time_hr: 06; }
body:has( #time_hr_07:checked ) { --clock_time_hr: 07; }
body:has( #time_hr_08:checked ) { --clock_time_hr: 08; }
body:has( #time_hr_09:checked ) { --clock_time_hr: 09; }
body:has( #time_hr_10:checked ) { --clock_time_hr: 10; }
body:has( #time_hr_11:checked ) { --clock_time_hr: 11; }
body:has( #time_hr_12:checked ) { --clock_time_hr: 12; }
body:has( #time_hr_13:checked ) { --clock_time_hr: 13; }
body:has( #time_hr_14:checked ) { --clock_time_hr: 14; }
body:has( #time_hr_15:checked ) { --clock_time_hr: 15; }
body:has( #time_hr_16:checked ) { --clock_time_hr: 16; }
body:has( #time_hr_17:checked ) { --clock_time_hr: 17; }
body:has( #time_hr_18:checked ) { --clock_time_hr: 18; }
body:has( #time_hr_19:checked ) { --clock_time_hr: 19; }
body:has( #time_hr_20:checked ) { --clock_time_hr: 20; }
body:has( #time_hr_21:checked ) { --clock_time_hr: 21; }
body:has( #time_hr_22:checked ) { --clock_time_hr: 22; }
body:has( #time_hr_23:checked ) { --clock_time_hr: 23; }
body:has( #time_hr_24:checked ) { --clock_time_hr: 24; }


.clock_time_sector_mnt {
  --s: 0deg;  /* starting angle */
  --p: 6deg; /* filling angle */

  position: absolute;
  width: 15.625em;
  height: 15.625em;
  border-radius: 50%;
  background: var( --ifc-popover-color );
  /*background: conic-gradient( #0000 var(--s), var( --ifc-popover-color ) var(--s) var(--p), #0000 var(--s) );*/
  /* switch #0000 and #000 to get the opposite shape */
  mask: conic-gradient(from var(--s),#0000,#000 1deg var(--p),#0000 calc(var(--p) + 1deg));
  transform: rotate( calc( var(--mnt) * 6deg - 3deg ) );
}

.clock_time_nmbr {
  left: calc( ( sin( var(--mnt) * 0.104719755 ) * 41 + 42 ) * 1% );
  top:  calc( ( 40.5 - cos( var(--mnt) * 0.104719755 ) * 41 ) * 1% );
}

body:has( #time_mnt_01:checked ) label[ for="time_mnt_01" ] { color: var( --ifc-popover-color ); background: var( --fnt-lgt-color ); }
body:has( #time_mnt_02:checked ) label[ for="time_mnt_02" ] { color: var( --ifc-popover-color ); background: var( --fnt-lgt-color ); }
body:has( #time_mnt_03:checked ) label[ for="time_mnt_03" ] { color: var( --ifc-popover-color ); background: var( --fnt-lgt-color ); }
body:has( #time_mnt_04:checked ) label[ for="time_mnt_04" ] { color: var( --ifc-popover-color ); background: var( --fnt-lgt-color ); }
body:has( #time_mnt_05:checked ) label[ for="time_mnt_05" ] { color: var( --ifc-popover-color ); background: var( --fnt-lgt-color ); }
body:has( #time_mnt_06:checked ) label[ for="time_mnt_06" ] { color: var( --ifc-popover-color ); background: var( --fnt-lgt-color ); }
body:has( #time_mnt_07:checked ) label[ for="time_mnt_07" ] { color: var( --ifc-popover-color ); background: var( --fnt-lgt-color ); }
body:has( #time_mnt_08:checked ) label[ for="time_mnt_08" ] { color: var( --ifc-popover-color ); background: var( --fnt-lgt-color ); }
body:has( #time_mnt_09:checked ) label[ for="time_mnt_09" ] { color: var( --ifc-popover-color ); background: var( --fnt-lgt-color ); }
body:has( #time_mnt_10:checked ) label[ for="time_mnt_10" ] { color: var( --ifc-popover-color ); background: var( --fnt-lgt-color ); }
body:has( #time_mnt_11:checked ) label[ for="time_mnt_11" ] { color: var( --ifc-popover-color ); background: var( --fnt-lgt-color ); }
body:has( #time_mnt_12:checked ) label[ for="time_mnt_12" ] { color: var( --ifc-popover-color ); background: var( --fnt-lgt-color ); }
body:has( #time_mnt_13:checked ) label[ for="time_mnt_13" ] { color: var( --ifc-popover-color ); background: var( --fnt-lgt-color ); }
body:has( #time_mnt_14:checked ) label[ for="time_mnt_14" ] { color: var( --ifc-popover-color ); background: var( --fnt-lgt-color ); }
body:has( #time_mnt_15:checked ) label[ for="time_mnt_15" ] { color: var( --ifc-popover-color ); background: var( --fnt-lgt-color ); }
body:has( #time_mnt_16:checked ) label[ for="time_mnt_16" ] { color: var( --ifc-popover-color ); background: var( --fnt-lgt-color ); }
body:has( #time_mnt_17:checked ) label[ for="time_mnt_17" ] { color: var( --ifc-popover-color ); background: var( --fnt-lgt-color ); }
body:has( #time_mnt_18:checked ) label[ for="time_mnt_18" ] { color: var( --ifc-popover-color ); background: var( --fnt-lgt-color ); }
body:has( #time_mnt_19:checked ) label[ for="time_mnt_19" ] { color: var( --ifc-popover-color ); background: var( --fnt-lgt-color ); }
body:has( #time_mnt_20:checked ) label[ for="time_mnt_20" ] { color: var( --ifc-popover-color ); background: var( --fnt-lgt-color ); }
body:has( #time_mnt_21:checked ) label[ for="time_mnt_21" ] { color: var( --ifc-popover-color ); background: var( --fnt-lgt-color ); }
body:has( #time_mnt_22:checked ) label[ for="time_mnt_22" ] { color: var( --ifc-popover-color ); background: var( --fnt-lgt-color ); }
body:has( #time_mnt_23:checked ) label[ for="time_mnt_23" ] { color: var( --ifc-popover-color ); background: var( --fnt-lgt-color ); }
body:has( #time_mnt_24:checked ) label[ for="time_mnt_24" ] { color: var( --ifc-popover-color ); background: var( --fnt-lgt-color ); }
body:has( #time_mnt_25:checked ) label[ for="time_mnt_25" ] { color: var( --ifc-popover-color ); background: var( --fnt-lgt-color ); }
body:has( #time_mnt_26:checked ) label[ for="time_mnt_26" ] { color: var( --ifc-popover-color ); background: var( --fnt-lgt-color ); }
body:has( #time_mnt_27:checked ) label[ for="time_mnt_27" ] { color: var( --ifc-popover-color ); background: var( --fnt-lgt-color ); }
body:has( #time_mnt_28:checked ) label[ for="time_mnt_28" ] { color: var( --ifc-popover-color ); background: var( --fnt-lgt-color ); }
body:has( #time_mnt_29:checked ) label[ for="time_mnt_29" ] { color: var( --ifc-popover-color ); background: var( --fnt-lgt-color ); }
body:has( #time_mnt_30:checked ) label[ for="time_mnt_30" ] { color: var( --ifc-popover-color ); background: var( --fnt-lgt-color ); }
body:has( #time_mnt_31:checked ) label[ for="time_mnt_31" ] { color: var( --ifc-popover-color ); background: var( --fnt-lgt-color ); }
body:has( #time_mnt_32:checked ) label[ for="time_mnt_32" ] { color: var( --ifc-popover-color ); background: var( --fnt-lgt-color ); }
body:has( #time_mnt_33:checked ) label[ for="time_mnt_33" ] { color: var( --ifc-popover-color ); background: var( --fnt-lgt-color ); }
body:has( #time_mnt_34:checked ) label[ for="time_mnt_34" ] { color: var( --ifc-popover-color ); background: var( --fnt-lgt-color ); }
body:has( #time_mnt_35:checked ) label[ for="time_mnt_35" ] { color: var( --ifc-popover-color ); background: var( --fnt-lgt-color ); }
body:has( #time_mnt_36:checked ) label[ for="time_mnt_36" ] { color: var( --ifc-popover-color ); background: var( --fnt-lgt-color ); }
body:has( #time_mnt_37:checked ) label[ for="time_mnt_37" ] { color: var( --ifc-popover-color ); background: var( --fnt-lgt-color ); }
body:has( #time_mnt_38:checked ) label[ for="time_mnt_38" ] { color: var( --ifc-popover-color ); background: var( --fnt-lgt-color ); }
body:has( #time_mnt_39:checked ) label[ for="time_mnt_39" ] { color: var( --ifc-popover-color ); background: var( --fnt-lgt-color ); }
body:has( #time_mnt_40:checked ) label[ for="time_mnt_40" ] { color: var( --ifc-popover-color ); background: var( --fnt-lgt-color ); }
body:has( #time_mnt_41:checked ) label[ for="time_mnt_41" ] { color: var( --ifc-popover-color ); background: var( --fnt-lgt-color ); }
body:has( #time_mnt_42:checked ) label[ for="time_mnt_42" ] { color: var( --ifc-popover-color ); background: var( --fnt-lgt-color ); }
body:has( #time_mnt_43:checked ) label[ for="time_mnt_43" ] { color: var( --ifc-popover-color ); background: var( --fnt-lgt-color ); }
body:has( #time_mnt_44:checked ) label[ for="time_mnt_44" ] { color: var( --ifc-popover-color ); background: var( --fnt-lgt-color ); }
body:has( #time_mnt_45:checked ) label[ for="time_mnt_45" ] { color: var( --ifc-popover-color ); background: var( --fnt-lgt-color ); }
body:has( #time_mnt_46:checked ) label[ for="time_mnt_46" ] { color: var( --ifc-popover-color ); background: var( --fnt-lgt-color ); }
body:has( #time_mnt_47:checked ) label[ for="time_mnt_47" ] { color: var( --ifc-popover-color ); background: var( --fnt-lgt-color ); }
body:has( #time_mnt_48:checked ) label[ for="time_mnt_48" ] { color: var( --ifc-popover-color ); background: var( --fnt-lgt-color ); }
body:has( #time_mnt_49:checked ) label[ for="time_mnt_49" ] { color: var( --ifc-popover-color ); background: var( --fnt-lgt-color ); }
body:has( #time_mnt_50:checked ) label[ for="time_mnt_50" ] { color: var( --ifc-popover-color ); background: var( --fnt-lgt-color ); }
body:has( #time_mnt_51:checked ) label[ for="time_mnt_51" ] { color: var( --ifc-popover-color ); background: var( --fnt-lgt-color ); }
body:has( #time_mnt_52:checked ) label[ for="time_mnt_52" ] { color: var( --ifc-popover-color ); background: var( --fnt-lgt-color ); }
body:has( #time_mnt_53:checked ) label[ for="time_mnt_53" ] { color: var( --ifc-popover-color ); background: var( --fnt-lgt-color ); }
body:has( #time_mnt_54:checked ) label[ for="time_mnt_54" ] { color: var( --ifc-popover-color ); background: var( --fnt-lgt-color ); }
body:has( #time_mnt_55:checked ) label[ for="time_mnt_55" ] { color: var( --ifc-popover-color ); background: var( --fnt-lgt-color ); }
body:has( #time_mnt_56:checked ) label[ for="time_mnt_56" ] { color: var( --ifc-popover-color ); background: var( --fnt-lgt-color ); }
body:has( #time_mnt_57:checked ) label[ for="time_mnt_57" ] { color: var( --ifc-popover-color ); background: var( --fnt-lgt-color ); }
body:has( #time_mnt_58:checked ) label[ for="time_mnt_58" ] { color: var( --ifc-popover-color ); background: var( --fnt-lgt-color ); }
body:has( #time_mnt_59:checked ) label[ for="time_mnt_59" ] { color: var( --ifc-popover-color ); background: var( --fnt-lgt-color ); }
body:has( #time_mnt_00:checked ) label[ for="time_mnt_00" ] { color: var( --ifc-popover-color ); background: var( --fnt-lgt-color ); }

body:has( #time_mnt_01:checked ) { --clock_time_mnt: 01; }
body:has( #time_mnt_02:checked ) { --clock_time_mnt: 02; }
body:has( #time_mnt_03:checked ) { --clock_time_mnt: 03; }
body:has( #time_mnt_04:checked ) { --clock_time_mnt: 04; }
body:has( #time_mnt_05:checked ) { --clock_time_mnt: 05; }
body:has( #time_mnt_06:checked ) { --clock_time_mnt: 06; }
body:has( #time_mnt_07:checked ) { --clock_time_mnt: 07; }
body:has( #time_mnt_08:checked ) { --clock_time_mnt: 08; }
body:has( #time_mnt_09:checked ) { --clock_time_mnt: 09; }
body:has( #time_mnt_10:checked ) { --clock_time_mnt: 10; }
body:has( #time_mnt_11:checked ) { --clock_time_mnt: 11; }
body:has( #time_mnt_12:checked ) { --clock_time_mnt: 12; }
body:has( #time_mnt_13:checked ) { --clock_time_mnt: 13; }
body:has( #time_mnt_14:checked ) { --clock_time_mnt: 14; }
body:has( #time_mnt_15:checked ) { --clock_time_mnt: 15; }
body:has( #time_mnt_16:checked ) { --clock_time_mnt: 16; }
body:has( #time_mnt_17:checked ) { --clock_time_mnt: 17; }
body:has( #time_mnt_18:checked ) { --clock_time_mnt: 18; }
body:has( #time_mnt_19:checked ) { --clock_time_mnt: 19; }
body:has( #time_mnt_20:checked ) { --clock_time_mnt: 20; }
body:has( #time_mnt_21:checked ) { --clock_time_mnt: 21; }
body:has( #time_mnt_22:checked ) { --clock_time_mnt: 22; }
body:has( #time_mnt_23:checked ) { --clock_time_mnt: 23; }
body:has( #time_mnt_24:checked ) { --clock_time_mnt: 24; }
body:has( #time_mnt_25:checked ) { --clock_time_mnt: 25; }
body:has( #time_mnt_26:checked ) { --clock_time_mnt: 26; }
body:has( #time_mnt_27:checked ) { --clock_time_mnt: 27; }
body:has( #time_mnt_28:checked ) { --clock_time_mnt: 28; }
body:has( #time_mnt_29:checked ) { --clock_time_mnt: 29; }
body:has( #time_mnt_30:checked ) { --clock_time_mnt: 30; }
body:has( #time_mnt_31:checked ) { --clock_time_mnt: 31; }
body:has( #time_mnt_32:checked ) { --clock_time_mnt: 32; }
body:has( #time_mnt_33:checked ) { --clock_time_mnt: 33; }
body:has( #time_mnt_34:checked ) { --clock_time_mnt: 34; }
body:has( #time_mnt_35:checked ) { --clock_time_mnt: 35; }
body:has( #time_mnt_36:checked ) { --clock_time_mnt: 36; }
body:has( #time_mnt_37:checked ) { --clock_time_mnt: 37; }
body:has( #time_mnt_38:checked ) { --clock_time_mnt: 38; }
body:has( #time_mnt_39:checked ) { --clock_time_mnt: 39; }
body:has( #time_mnt_40:checked ) { --clock_time_mnt: 40; }
body:has( #time_mnt_41:checked ) { --clock_time_mnt: 41; }
body:has( #time_mnt_42:checked ) { --clock_time_mnt: 42; }
body:has( #time_mnt_43:checked ) { --clock_time_mnt: 43; }
body:has( #time_mnt_44:checked ) { --clock_time_mnt: 44; }
body:has( #time_mnt_45:checked ) { --clock_time_mnt: 45; }
body:has( #time_mnt_46:checked ) { --clock_time_mnt: 46; }
body:has( #time_mnt_47:checked ) { --clock_time_mnt: 47; }
body:has( #time_mnt_48:checked ) { --clock_time_mnt: 48; }
body:has( #time_mnt_49:checked ) { --clock_time_mnt: 49; }
body:has( #time_mnt_50:checked ) { --clock_time_mnt: 50; }
body:has( #time_mnt_51:checked ) { --clock_time_mnt: 51; }
body:has( #time_mnt_52:checked ) { --clock_time_mnt: 52; }
body:has( #time_mnt_53:checked ) { --clock_time_mnt: 53; }
body:has( #time_mnt_54:checked ) { --clock_time_mnt: 54; }
body:has( #time_mnt_55:checked ) { --clock_time_mnt: 55; }
body:has( #time_mnt_56:checked ) { --clock_time_mnt: 56; }
body:has( #time_mnt_57:checked ) { --clock_time_mnt: 57; }
body:has( #time_mnt_58:checked ) { --clock_time_mnt: 58; }
body:has( #time_mnt_59:checked ) { --clock_time_mnt: 59; }
body:has( #time_mnt_00:checked ) { --clock_time_mnt: 00; }


.clock_ftr {
  width: 100%;
  font-size: 1em;
  height: 4.688em;
  
  padding: 1.563em;
  display: flex;
  justify-content: space-between;
}

.clock_ftr button {
  font-size: 1em;
}

.clock_bttn_cntnr { display: none }

.clock_bttn {
  padding: 0.5em;
}

.clock_bttn_cntnr .bttn {
  display: inline;
}

#modal_time_picker_g:has( #hr_mnt_tgl:checked       ) #clock_bttn_hr  { display: initial; }
#modal_time_picker_g:has( #hr_mnt_tgl:not(:checked) ) #clock_bttn_mnt { display: initial; }

#modal_time_picker_g:has( #clock_enter_time:checked )              { width: 18.75em; height: 15.625em; }
#modal_time_picker_g:has( #clock_enter_time:checked ) .clock_cntnr { display: none }

#modal_time_picker_g:has( #clock_enter_time:checked ) #clock_bttn_hr             { display: none }
#modal_time_picker_g:has( #clock_enter_time:checked ) #clock_bttn_mnt            { display: none }
#modal_time_picker_g:has( #clock_enter_time:checked ) #clock_bttn_slct_time_text { display: initial }

#mx_clr_blue   { color: blue;   font-variation-settings: 'FILL' 1; }
#mx_clr_pink   { color: pink;   font-variation-settings: 'FILL' 1; }
#mx_clr_green  { color: green;  font-variation-settings: 'FILL' 1; }
#mx_clr_yellow { color: yellow; font-variation-settings: 'FILL' 1; }
#mx_clr_grey   { color: grey; }

.symbol_colored { color: inherit; display: none; }

.navigation_cntnr:has( #menu_exmpl_clr_blue:checked   ) #menu_example_symbol_colored { color: blue;   }
.navigation_cntnr:has( #menu_exmpl_clr_pink:checked   ) #menu_example_symbol_colored { color: pink;   }
.navigation_cntnr:has( #menu_exmpl_clr_green:checked  ) #menu_example_symbol_colored { color: green;  }
.navigation_cntnr:has( #menu_exmpl_clr_yellow:checked ) #menu_example_symbol_colored { color: yellow; }
.navigation_cntnr:has( #menu_exmpl_clr_grey:checked   ) #menu_example_symbol_colored { color: grey;   }

.navigation_cntnr:has( #menu_example_symbol_smile:checked ) #sc_smile { display: initial; }
.navigation_cntnr:has( #menu_example_symbol_cloud:checked ) #sc_cloud { display: initial; }
.navigation_cntnr:has( #menu_example_symbol_brush:checked ) #sc_brush { display: initial; }
.navigation_cntnr:has( #menu_example_symbol_heart:checked ) #sc_heart { display: initial; }

.sngl_ln_clstr_w_hl:has( input:checked       ) .bttn_off { display:none; }
.sngl_ln_clstr_w_hl:not(:has( input:checked )) .bttn_on  { display:none; }

.slidecontainer_w3schools {
  font-size: 1em;
  width: 100%;
  height: 1.25em;
  margin: 0.5em 0px;
}

.slider_w3schools {
  font-size: 1em;
  -webkit-appearance: none;
  width: 100%;
  height: 0.313em;
  background: var( --ifc-popover-color );
  outline: none;
}

.slider_w3schools::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 1.25em;
  height: 1.25em;
  background: var( --fnt-color );
  border-radius: 50%;
  border: none;
  cursor: pointer;
}

.slider_w3schools::-moz-range-thumb {
  width: 1.25em;
  height: 1.25em;
  background: var( --fnt-color );
  border-radius: 50%;
  border: none;
  cursor: pointer;
}

.slider_w3schools::-moz-range-progress {
  height: 0.375em;
  background: var( --fnt-color );
}

.slider_ana_tudor {
  font-size: 1em;
  --range: calc(var(--max) - var(--min));
  --ratio: calc((var(--val) - var(--min))/var(--range));
  padding: 0px;
  width: 100%;
  height: 1.25em;
  background: transparent;
  margin: 0.5em 0px;
}
.slider_ana_tudor, .slider_ana_tudor::-webkit-slider-thumb {
  -webkit-appearance: none;
}
.slider_ana_tudor::-webkit-slider-runnable-track {
  box-sizing: border-box;
  border: none;
  width: 100%;
  height: 0.313em;
  background: var( --ifc-popover-color );
}

.slider_ana_tudor::-moz-range-track {
  box-sizing: border-box;
  border: none;
  width: 100%;
  height: 0.313em;
  background: var( --ifc-popover-color );
}

.slider_ana_tudor::-moz-range-progress {
  height: 0.375em;
  background: var( --fnt-color );
}

.slider_ana_tudor::-webkit-slider-thumb {
  margin-top: -0.5em;
  box-sizing: border-box;
  border: none;
  width: 1.25em;
  height: 1.25em;
  border-radius: 50%;
  background: var( --fnt-color );
}

.slider_ana_tudor::-moz-range-thumb {
  box-sizing: border-box;
  border: none;
  width: 1.25em;
  height: 1.25em;
  border-radius: 50%;
  background: var( --fnt-color );
}

.slider_rd_clickable {
  display: flex;
  flex-direction: row;
  margin: 0.375em 0px;
  flex-wrap: nowrap;
  width: 100%;
}

.slider_rd_clickable .sldr_lbl {
  position: relative;
  padding: 0.25em;
  border-radius: 0px;
  margin: 0px;
  flex: 1;
}

.slider_rd_clickable .sldr_plain:first-of-type { border-radius: 0.313em 0px 0px 0.313em; flex: 0.2; }
.slider_rd_clickable .sldr_plain:last-of-type  { border-radius: 0px 0.313em 0.313em 0px; }

.sldr_lbl .bttn_off {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0px;
  left: 0px;
}

.sldr_lbl .bttn_on {
  position: absolute;
  display: none;
  width: 100%;
  height: 100%;
  top: 0px;
  left: 0px;
  background: hsl( var( --hue ), var( --satur-fnt ), calc( var( --lghtn-fnt ) * ( 0.5 + var( --sldr_nmbr ) * 0.05 ) ) );
}

.slider_rd_clickable .sldr_plain:first-of-type .bttn_on { border-radius: 0.313em 0px 0px 0.313em; }
.slider_rd_clickable .sldr_plain:last-of-type .bttn_on  { border-radius: 0px 0.313em 0.313em 0px; }

.slider_rd_clickable:has( .sld_rd_00:checked ) :where(.sld_00) .bttn_on { display: initial; }
.slider_rd_clickable:has( .sld_rd_01:checked ) :where(.sld_00,.sld_01) .bttn_on { display: initial; }
.slider_rd_clickable:has( .sld_rd_02:checked ) :where(.sld_00,.sld_01,.sld_02) .bttn_on { display: initial; }
.slider_rd_clickable:has( .sld_rd_03:checked ) :where(.sld_00,.sld_01,.sld_02,.sld_03) .bttn_on { display: initial; }
.slider_rd_clickable:has( .sld_rd_04:checked ) :where(.sld_00,.sld_01,.sld_02,.sld_03,.sld_04) .bttn_on { display: initial; }
.slider_rd_clickable:has( .sld_rd_05:checked ) :where(.sld_00,.sld_01,.sld_02,.sld_03,.sld_04,.sld_05) .bttn_on { display: initial; }
.slider_rd_clickable:has( .sld_rd_06:checked ) :where(.sld_00,.sld_01,.sld_02,.sld_03,.sld_04,.sld_05,.sld_06) .bttn_on { display: initial; }
.slider_rd_clickable:has( .sld_rd_07:checked ) :where(.sld_00,.sld_01,.sld_02,.sld_03,.sld_04,.sld_05,.sld_06,.sld_07) .bttn_on { display: initial; }
.slider_rd_clickable:has( .sld_rd_08:checked ) :where(.sld_00,.sld_01,.sld_02,.sld_03,.sld_04,.sld_05,.sld_06,.sld_07,.sld_08) .bttn_on { display: initial; }
.slider_rd_clickable:has( .sld_rd_09:checked ) :where(.sld_00,.sld_01,.sld_02,.sld_03,.sld_04,.sld_05,.sld_06,.sld_07,.sld_08,.sld_09) .bttn_on { display: initial; }
.slider_rd_clickable:has( .sld_rd_10:checked ) :where(.sld_00,.sld_01,.sld_02,.sld_03,.sld_04,.sld_05,.sld_06,.sld_07,.sld_08,.sld_09,.sld_10) .bttn_on { display: initial; }

.rating_rd_clickable {
  position: relative;
  display: flex;
  flex-direction: row;
  margin: 0.375em 0px;
  flex-wrap: nowrap;
}

.rtng_lbl {
  --lbl-font-size: 1.625em;
  position: relative;
  padding: 0px;
  width: var(--lbl-font-size);
  height: var(--lbl-font-size);
  display: inline-block;
  margin: 0px;
}

.rtng_lbl .icn_bttn {
  font-size: var(--lbl-font-size);
  font-variation-settings: 'wght' 100;
}

.rtng_lbl .bttn_off {
  position: absolute;
  top: 0px;
  left: 0px;
}

.rtng_lbl .bttn_on {
  position: absolute;
  top: 0px;
  left: 0px;
  display: none;
}

.crcl_bkdrp {
  position: absolute;
  border-radius: 50%;
  display: inline-block;
}

.rtng_lbl .crcl_bkdrp {
  height: 0.808em;
  width: 0.808em;
  transform: translate(0.08em, 0.35em);
}

.rtng_star .icn_bttn { color: orange; }
.rtng_star .bttn_on  { font-variation-settings: 'FILL' 1; }

.rtng_star_inv .bttn_off { color: yellow; }
.rtng_star_inv .bttn_on  { color: var( --ifc-pnl-color ); background: yellow; font-variation-settings: 'FILL' 1; }

.rtng_recommend .bttn_off { color: white; }
.rtng_recommend .bttn_on  { color: blue; font-variation-settings: 'FILL' 1; }

.rtng_food .bttn_off { color: limegreen; font-variation-settings: 'wght' 400; }
.rtng_food .bttn_on  { color: green; font-variation-settings: 'FILL' 1; }

.rtng_eco .bttn_off { color: lawngreen; font-variation-settings: 'wght' 400; }
.rtng_eco .bttn_on  { color: forestgreen; opacity: 0.5; font-variation-settings: 'FILL' 1; }

.rtng_recycle .bttn_off { color: slategray; font-variation-settings: 'wght' 400; }
.rtng_recycle .bttn_on  { font-variation-settings: 'FILL' 1; }
.rtng_recycle .rcycl_back_sm { color: gainsboro; }
.rtng_recycle .rcycl_back_lg { color: gainsboro; }
.rtng_recycle .rcycl_frnt  { color: forestgreen; font-variation-settings: 'wght' 200; }

.rtng_science .bttn_off { color: lightblue; }
.rtng_science .bttn_on  { color: slateblue; font-variation-settings: 'FILL' 0; }

.rtng_security .bttn_off { color: gold; font-variation-settings: 'wght' 200;  }
.rtng_security .bttn_on  { color: darkgoldenrod; font-variation-settings: 'FILL' 1; }

.rtng_security_lock .bttn_off { color: silver; font-variation-settings: 'wght' 300; }
.rtng_security_lock .bttn_on  { color: darkslategray; font-variation-settings: 'FILL' 1; }

.rtng_ref .bttn_off { color: royalblue; }
.rtng_ref .bttn_on  { color: lightgray; font-variation-settings: 'FILL' 1; }

.rtng_lndscp .bttn_off { color: limegreen; font-variation-settings: 'wght' 300; }
.rtng_lndscp .bttn_on  { color: forestgreen; font-variation-settings: 'FILL' 1; }

.rtng_flood .bttn_off { color: #1b9891; font-variation-settings: 'wght' 200; }
.rtng_flood .bttn_on  { color: #676c86; font-variation-settings: 'FILL' 1, 'wght' 400; }

.rtng_fire .bttn_off { color: #cd552d; font-variation-settings: 'FILL' 1; }
.rtng_fire .bttn_on  { color: #ffcd73; font-variation-settings: 'wght' 200; }

.rtng_wind .bttn_off { color: #dbdbdb; }
.rtng_wind .bttn_on  { color: #fffadc; font-variation-settings: 'FILL' 1, 'wght' 300; }

.rtng_air_qlty .bttn_off { color: darkgray; font-variation-settings: 'wght' 300; }
.rtng_air_qlty .bttn_on  { color: palegreen; font-variation-settings: 'FILL' 1; }

.rtng_heat .bttn_off { color: #dbdbdb; transform: scaleX(1.3); }
.rtng_heat .bttn_on.heat_therm { color: firebrick; font-variation-settings: 'FILL' 1, 'wght' 200; transform: scaleX(1.3); }
.rtng_heat .bttn_on.heat_waves { color: #ffc88c; font-variation-settings: 'wght' 100; transform: scale(1.1, 0.75) translateY(-0.12em); }

.rtng_light .bttn_off.light_off_window { color: #dbdbdb; transform: scale(0.9, 0.9) translate(-0.12em, 0px); }
.rtng_light .bttn_off.light_off_lamp { color: #dbdbdb; transform: scale(0.8, 0.8) translate(0.12em, 0.31em);  }
.rtng_light .bttn_on.light_window { color: burlywood; font-variation-settings: 'wght' 300; transform: scale(0.9, 0.9) translate(-0.12em, 0px); }
.rtng_light .bttn_on.light_rays { color: palegoldenrod; font-variation-settings: 'wght' 100; transform: scale(1.0, 1.5) translateY(0.12em); }

.rtng_luxury .bttn_off { color: CornflowerBlue; font-variation-settings: 'wght' 100; }
.rtng_luxury .bttn_on  { color: LightBlue; opacity: 0.85; transform: scale(0.9, 0.85) translate(0px, 0.25em); font-variation-settings: 'FILL' 1; }
.rtng_luxury .lxry_bcklght  { color: LightBlue; opacity: 0.85; transform: scale(0.5, 0.6) translate(0.58em, -0.15em); }

.rtng_appliances .bttn_off { color: silver; font-variation-settings: 'wght' 300; }
.rtng_appliances .bttn_on.applnc_surf  { color: #1b3fab; font-variation-settings: 'FILL' 1; }
.rtng_appliances .bttn_on.applnc_frame { color: gainsboro; font-variation-settings: 'wght' 300; }

.rtng_location .bttn_off { color: #f53205; font-variation-settings: 'wght' 300; transform: scale(0.8, 0.8) translateY(0.18em); }
.rtng_location .bttn_on.lctn_surf  { color: firebrick; font-variation-settings: 'FILL' 1; }
.rtng_location .bttn_on.lctn_frame { color: gainsboro; font-variation-settings: 'wght' 300; }

.rtng_walk .material-symbols-rounded {
  transform: scale(0.8, 0.8) translate(-0.038em, 0.23em);
}

.rtng_walk .bttn_off { color: silver; font-variation-settings: 'wght' 300; }
.rtng_walk .bttn_on  { color: gainsboro; font-variation-settings: 'FILL' 1; }
.rtng_walk .crcl_bkdrp {
  background-color: mediumvioletred;
  box-shadow: 0px 0px 0.038em 0.077em gainsboro;
}

.rtng_bike .material-symbols-rounded {
  transform: scale(0.7, 0.8) translate(-0.038em, 0.23em);
}

.rtng_bike .bttn_off { color: silver; font-variation-settings: 'wght' 300; }
.rtng_bike .bttn_on  { color: gainsboro; font-variation-settings: 'FILL' 1; }
.rtng_bike .crcl_bkdrp {
  background-color: #27a013;
  box-shadow: -0.038em 0px 0.038em 0.077em gainsboro;
}

.rtng_sports .bttn_off { color: silver; font-variation-settings: 'wght' 300; }
.rtng_sports .bttn_on  { color: black; font-variation-settings: 'FILL' 1; }
.rtng_sports .crcl_bkdrp {
  background-color: #ffffff;
}

.rtng_land .bttn_off { color: burlywood; }
.rtng_land .bttn_on.land_fence { color: blanchedalmond; font-variation-settings: 'FILL' 1; }
.rtng_land .bttn_on.land_yard_lt { color: limegreen; transform: scale(0.5, 0.25) translate(-0.31em, 1.92em); }
.rtng_land .bttn_on.land_yard_rt { color: limegreen; transform: scale(0.5, 0.25) translate(0.31em, 1.92em); }

.rtng_music .bttn_off { color: orchid; font-variation-settings: 'wght' 400; }
.rtng_music .bttn_on  { color: purple; font-variation-settings: 'FILL' 1; }

.rtng_theater .bttn_off { color: darkmagenta; font-variation-settings: 'wght' 400; }
.rtng_theater .bttn_on  { color: orchid; font-variation-settings: 'FILL' 1; }

.rtng_nightlife .bttn_off.nghtlf_base { color: CornflowerBlue; font-variation-settings: 'wght' 700; transform: scale(0.3, 0.3) translate(-0.6em, 1.5em); }
.rtng_nightlife .bttn_off.nghtlf_cup { color: CornflowerBlue; font-variation-settings: 'wght' 300; transform: scale(0.75, -0.75) translate(-0.21em, -0.26em); }
.rtng_nightlife .bttn_on { color: MediumOrchid; font-variation-settings: 'FILL' 1; }

.rtng_coin .bttn_on { font-variation-settings: 'FILL' 1; }
.rtng_coin .coin_edge { color: #6b572e; }
.rtng_coin .coin_cntr { color: silver; font-size: calc( var(--lbl-font-size) - 0.15em ); top: 0.077em; left: 0.077em; }

.rtng_health_shld .bttn_off { color: lightsteelblue; font-variation-settings: 'wght' 300; }
.rtng_health_shld .bttn_on  { color: mediumblue; font-variation-settings: 'FILL' 1; }

.rtng_health_pls .bttn_off { color: #DEC4B0; font-variation-settings: 'wght' 300; }
.rtng_health_pls .bttn_on  { color: #CD0000; font-variation-settings: 'FILL' 1; }

.rtng_electricity .bttn_off { color: gold; font-variation-settings: 'wght' 300; }
.rtng_electricity .bttn_on  { color: lemonchiffon; font-variation-settings: 'FILL' 1; }

.rtng_difficulty .bttn_off { color: steelblue; font-variation-settings: 'wght' 300; }
.rtng_difficulty .bttn_on  { color: gainsboro; font-variation-settings: 'FILL' 1; }

.rtng_hearts .bttn_off { color: #EFC4B0; font-variation-settings: 'wght' 300; }
.rtng_hearts .bttn_on  { color: #CD0000; font-variation-settings: 'FILL' 1; }

.rtng_crime_police .bttn_off { color: #f53205; transform: translateY( 0.3em ); }
.rtng_crime_police .police_back  { color: silver; font-variation-settings: 'FILL' 0; }
.rtng_crime_police .police_frnt  { color: #283250; font-size: calc( var(--lbl-font-size) - 0.15em ); top: 0.077em; left: 0.077em; font-variation-settings: 'FILL' 1; }

.rtng_human_group.rtng_00 .bttn_off {
  transform: scaleX(-1);
}

.rtng_human_group .bttn_off { color: Lavender; font-variation-settings: 'wght' 300; }
.rtng_human_group .crcl_bkdrp {
  background-color: Blue;
  box-shadow: 0px 0px 0.038em 0.077em Lavender;
}

.rating_rd_clickable:has( .rtng_rd_01:checked ) :where(.rtng_01) .bttn_on { display: initial; }
.rating_rd_clickable:has( .rtng_rd_02:checked ) :where(.rtng_01,.rtng_02) .bttn_on { display: initial; }
.rating_rd_clickable:has( .rtng_rd_03:checked ) :where(.rtng_01,.rtng_02,.rtng_03) .bttn_on { display: initial; }
.rating_rd_clickable:has( .rtng_rd_04:checked ) :where(.rtng_01,.rtng_02,.rtng_03,.rtng_04) .bttn_on { display: initial; }
.rating_rd_clickable:has( .rtng_rd_05:checked ) :where(.rtng_01,.rtng_02,.rtng_03,.rtng_04,.rtng_05) .bttn_on { display: initial; }

.knob_rd_clickable {
  position: relative;
  font-size: 1em;
  --knb_w: 10em;
  --knb_h: 10em;
  --knb_wd2: calc( var(--knb_w) / 2 );
  --knb_hd2: calc( var(--knb_h) / 2 );
  --knb_wd2m86: calc( var(--knb_wd2) * 0.86 );
  --knb_hd2m86: calc( var(--knb_hd2) * 0.86 );
  width: var(--knb_w);
  height: var(--knb_h);
}

.knb_arc {
  --seg: 10;
  --a: calc( 300 / var(--seg) );
  
  position: absolute;
  top: 22.5%;
  left: 22.5%;
  width: 55%;
  height: 55%;
  padding: 0.5em; /* the border thickness */
  box-sizing: border-box;
  border-radius: 50%;
  background: var( --ifc-popover-color );
  /*background: hsl( calc( var( --knb ) * 30 + 30 ), 94%, 50% );*/
  /*background: transparent;*/
  mask:
    linear-gradient(#0000 0 0) content-box intersect,
    conic-gradient(#000 calc( var(--a) * 1deg ),#0000 0);
    
  --rotation: calc( ( ( var( --knb ) - 1 ) * var( --a ) + 210 ) * 1deg );
  transform: rotate( var( --rotation ) );
}

.knb_arc_init {
  --seg_init: 5;
  --a: calc( 60 / var(--seg_init) );
}

.knb_dial_arc {
  --seg: 10;
  --a: calc( 360 / ( var(--seg) + 2 ) );
  --w: 2;
  
  position: absolute;
  top: 12.5%;
  left: 12.5%;
  width: 75%;
  height: 75%;
  padding: 0.75em; /* the border thickness */
  box-sizing: border-box;
  border-radius: 50%;
  background: var( --fnt-color );
  /*background: transparent;*/
  mask:
    linear-gradient(#0000 0 0) content-box intersect,
    conic-gradient(#000 calc( var(--w) * 1deg ),#0000 0);
  
  --wd2: calc( var(--w) / 2 );
  --rotation: calc( ( var( --knb ) * 30 + 210 - var(--wd2) ) * 1deg );
  transform: rotate( var( --rotation ) );
}

.knb_nmbr {
  position: absolute;
  --nmbr_w: 1.875em;
  --nmbr_h: 1.875em;
  --nmbr_wd2: calc( var(--nmbr_w) / 2 );
  --nmbr_hd2: calc( var(--nmbr_h) / 2 );
  width: var(--nmbr_w);
  height: var(--nmbr_h);
  margin: 0px;
  --seg: 10;
  --a: calc( -300 / var(--seg) );
  --rotation: calc( ( var( --knb ) * var( --a ) + 240 ) * 3.14159 / 180 );
  left:   calc( ( cos( var(--rotation) ) * var(--knb_wd2m86) + var(--knb_wd2) ) - var(--nmbr_wd2) );
  bottom: calc( ( sin( var(--rotation) ) * var(--knb_hd2m86) + var(--knb_hd2) ) - var(--nmbr_hd2) );
}

.knob_rd_clickable:has( #knb_rd_00:checked ) :where(#knb_00) { background: hsl( var( --hue ), var( --satur-fnt ), calc( var( --lghtn-fnt ) * 0.5 ) ); }
.knob_rd_clickable:has( #knb_rd_01:checked ) :where(#knb_00,#knb_01) { background: hsl( var( --hue ), var( --satur-fnt ), calc( var( --lghtn-fnt ) * 0.55 ) ); }
.knob_rd_clickable:has( #knb_rd_02:checked ) :where(#knb_00,#knb_01,#knb_02) { background: hsl( var( --hue ), var( --satur-fnt ), calc( var( --lghtn-fnt ) * 0.6 ) ); }
.knob_rd_clickable:has( #knb_rd_03:checked ) :where(#knb_00,#knb_01,#knb_02,#knb_03) { background: hsl( var( --hue ), var( --satur-fnt ), calc( var( --lghtn-fnt ) * 0.65 ) ); }
.knob_rd_clickable:has( #knb_rd_04:checked ) :where(#knb_00,#knb_01,#knb_02,#knb_03,#knb_04) { background: hsl( var( --hue ), var( --satur-fnt ), calc( var( --lghtn-fnt ) * 0.7 ) ); }
.knob_rd_clickable:has( #knb_rd_05:checked ) :where(#knb_00,#knb_01,#knb_02,#knb_03,#knb_04,#knb_05) { background: hsl( var( --hue ), var( --satur-fnt ), calc( var( --lghtn-fnt ) * 0.75 ) ); }
.knob_rd_clickable:has( #knb_rd_06:checked ) :where(#knb_00,#knb_01,#knb_02,#knb_03,#knb_04,#knb_05,#knb_06) { background: hsl( var( --hue ), var( --satur-fnt ), calc( var( --lghtn-fnt ) * 0.8 ) ); }
.knob_rd_clickable:has( #knb_rd_07:checked ) :where(#knb_00,#knb_01,#knb_02,#knb_03,#knb_04,#knb_05,#knb_06,#knb_07) { background: hsl( var( --hue ), var( --satur-fnt ), calc( var( --lghtn-fnt ) * 0.85 ) ); }
.knob_rd_clickable:has( #knb_rd_08:checked ) :where(#knb_00,#knb_01,#knb_02,#knb_03,#knb_04,#knb_05,#knb_06,#knb_07,#knb_08) { background: hsl( var( --hue ), var( --satur-fnt ), calc( var( --lghtn-fnt ) * 0.9 ) ); }
.knob_rd_clickable:has( #knb_rd_09:checked ) :where(#knb_00,#knb_01,#knb_02,#knb_03,#knb_04,#knb_05,#knb_06,#knb_07,#knb_08,#knb_09) { background: hsl( var( --hue ), var( --satur-fnt ), calc( var( --lghtn-fnt ) * 0.95 ) ); }
.knob_rd_clickable:has( #knb_rd_10:checked ) :where(#knb_00,#knb_01,#knb_02,#knb_03,#knb_04,#knb_05,#knb_06,#knb_07,#knb_08,#knb_09,#knb_10) { background: hsl( var( --hue ), var( --satur-fnt ), calc( var( --lghtn-fnt ) * 1.0 ) ); }

.swtch_tgl_icn:before {
  background-image: image-set('data:image/svg+xml;utf-8,<svg xmlns="http://www.w3.org/2000/svg"><svg x="0" y="0"><svg width="16" height="16" viewBox="0 -960 960 960" fill="rgba(64,64,64,1.0)" ><path d="m256-200-56-56 224-224-224-224 56-56 224 224 224-224 56 56-224 224 224 224-56 56-224-224-224 224Z"/></svg></svg></svg>');
}

.panel:has( #exmpl_tgl_st_off:checked ) label[ for="exmpl_tgl_st_off" ] > .switch_tgl_w3sch{ background-color: var( --fnt-color ); }
.panel:has( #exmpl_tgl_st_off:checked ) label[ for="exmpl_tgl_st_off" ] > .switch_tgl_w3sch:before {
  -webkit-transform: translateX(1.125em);
  transform: translateX(1.125em);
  height: 1.375em;
  width: 1.375em;
  bottom: 0.125em;
  background-color: var( --prm-drk-color );
}

.panel:has( #exmpl_tgl_st_on:checked ) label[ for="exmpl_tgl_st_on" ] > .switch_tgl_w3sch{ background-color: var( --fnt-color ); }
.panel:has( #exmpl_tgl_st_on:checked ) label[ for="exmpl_tgl_st_on" ] > .switch_tgl_w3sch:before {
  -webkit-transform: translateX(1.125em);
  transform: translateX(1.125em);
  height: 1.375em;
  width: 1.375em;
  bottom: 0.125em;
  background-color: var( --prm-drk-color );
  background-image: image-set('data:image/svg+xml;utf-8,<svg xmlns="http://www.w3.org/2000/svg"><svg x="0" y="0"><svg width="21" height="24" viewBox="0 -960 960 960" fill="rgba(225,225,225,1.0)" ><path d="M382-240 154-468l57-57 171 171 367-367 57 57-424 424Z"/></svg></svg></svg>');
}

.frm_cntnr {
  position: relative;
  width: calc( 100% - 20px );
  margin: 10px;
}

.frm_cntnr_hlf {
  width: 45%;
  margin: 10px;
}

.frm_txt_inpt {
  position: relative;
}

.txt_inpt_g {
  padding: 15px 30px 15px 45px;
  outline: none;
  border-style: none none solid none;
  border-color: var( --fnt-color );
  border-width: 1px;
  background-repeat: no-repeat;
  background-image: image-set('data:image/svg+xml;utf-8,<svg xmlns="http://www.w3.org/2000/svg"><svg x="10" y="10"><svg height="24" viewBox="0 -960 960 960" width="24" fill="rgba(200,200,200,1.0)" ><path d="M160-200q-33 0-56.5-23.5T80-280v-400q0-33 23.5-56.5T160-760h640q33 0 56.5 23.5T880-680v400q0 33-23.5 56.5T800-200H160Zm0-80h640v-400H160v400Zm160-40h320v-80H320v80ZM200-440h80v-80h-80v80Zm120 0h80v-80h-80v80Zm120 0h80v-80h-80v80Zm120 0h80v-80h-80v80Zm120 0h80v-80h-80v80ZM200-560h80v-80h-80v80Zm120 0h80v-80h-80v80Zm120 0h80v-80h-80v80Zm120 0h80v-80h-80v80Zm120 0h80v-80h-80v80ZM160-280v-400 400Z"/></svg></svg></svg>');
}

.txt_inpt_g:focus {
  border-width: 2px;
  border-color: var( --fnt-lgt-color );
}

.inpt_reset_cntnr {
  position: absolute;
  left: calc( 100% - 2.5em );
  top: calc( 50% - 1.25em );
}

.bttn_clr_form {
  color: inherit;
  background-color: inherit;
  border-style: none;
  font-size: 1.25em;
  font-family: "Monaco", monospace;
}

.frm_lbl {
  position: absolute;
  font-size: 1.125em;
  padding: 10px 0.625em;
  left: 40px;
  top: calc( 50% - 0.625em - 10px );
  pointer-events: none;
  background-color: var( --ifc-popover-color );
  transition: 0.1s;
}

.frm_cntnr:has( .txt_inpt_g:focus ) .frm_lbl {
  font-size: 0.625em;
  padding: 5px;
  left: 35px;
  top: -5px;
  background-color: inherit;
}

.frm_error .txt_inpt_g {
  color: var( --fnt-color );
  border-color: var( --err-color );
  background-image: image-set('data:image/svg+xml;utf-8,<svg xmlns="http://www.w3.org/2000/svg"><svg x="10" y="10"><svg height="24" viewBox="0 -960 960 960" width="24" fill="rgba(255,180,171,1.0)" ><path d="M160-200q-33 0-56.5-23.5T80-280v-400q0-33 23.5-56.5T160-760h640q33 0 56.5 23.5T880-680v400q0 33-23.5 56.5T800-200H160Zm0-80h640v-400H160v400Zm160-40h320v-80H320v80ZM200-440h80v-80h-80v80Zm120 0h80v-80h-80v80Zm120 0h80v-80h-80v80Zm120 0h80v-80h-80v80Zm120 0h80v-80h-80v80ZM200-560h80v-80h-80v80Zm120 0h80v-80h-80v80Zm120 0h80v-80h-80v80Zm120 0h80v-80h-80v80Zm120 0h80v-80h-80v80ZM160-280v-400 400Z"/></svg></svg></svg>');
}

.frm_error .txt_inpt_g::placeholder { color: var( --err-color ); }
.frm_error .inpt_reset_cntnr        { color: var( --err-color ); }
.frm_error .frm_lbl                 { color: var( --err-color ); }

.dsbld .txt_inpt_g {
  background-image: image-set('data:image/svg+xml;utf-8,<svg xmlns="http://www.w3.org/2000/svg"><svg x="10" y="10"><svg height="24" viewBox="0 -960 960 960" width="24" fill="rgba(100,100,100,1.0)" ><path d="M160-200q-33 0-56.5-23.5T80-280v-400q0-33 23.5-56.5T160-760h640q33 0 56.5 23.5T880-680v400q0 33-23.5 56.5T800-200H160Zm0-80h640v-400H160v400Zm160-40h320v-80H320v80ZM200-440h80v-80h-80v80Zm120 0h80v-80h-80v80Zm120 0h80v-80h-80v80Zm120 0h80v-80h-80v80Zm120 0h80v-80h-80v80ZM200-560h80v-80h-80v80Zm120 0h80v-80h-80v80Zm120 0h80v-80h-80v80Zm120 0h80v-80h-80v80Zm120 0h80v-80h-80v80ZM160-280v-400 400Z"/></svg></svg></svg>');
}

.frm_cntnr.outlnd {
  border-radius: 5px;
}

.frm_cntnr.outlnd .txt_inpt_g {
  border-style: solid;
}

.process_steps .bttn {
  -webkit-flex: 1;
  flex: 1;
  align-self: initial;
  padding: 10px 5px;
  text-shadow: 1px 1px 2px var( --bg-drk-color );
  background: var( --ifc-artcl-color );
}

.process_steps:has( #stps_ord_hrz_01:checked ) #stps_hrz_01 { background: var( --ifc-color ); }
.process_steps:has( #stps_ord_hrz_02:checked ) #stps_hrz_02 { background: var( --ifc-color ); }
.process_steps:has( #stps_ord_hrz_03:checked ) #stps_hrz_03 { background: var( --ifc-color ); }
.process_steps:has( #stps_ord_hrz_04:checked ) #stps_hrz_04 { background: var( --ifc-color ); }

.process_steps:has( #stps_ord_hrz_02:checked ) #stps_hrz_01 { background: var( --prm-mid-drk-color ); }
.process_steps:has( #stps_ord_hrz_03:checked ) #stps_hrz_01 { background: var( --prm-mid-drk-color ); }
.process_steps:has( #stps_ord_hrz_03:checked ) #stps_hrz_02 { background: var( --prm-mid-drk-color ); }
.process_steps:has( #stps_ord_hrz_04:checked ) #stps_hrz_01 { background: var( --prm-mid-drk-color ); }
.process_steps:has( #stps_ord_hrz_04:checked ) #stps_hrz_02 { background: var( --prm-mid-drk-color ); }
.process_steps:has( #stps_ord_hrz_04:checked ) #stps_hrz_03 { background: var( --prm-mid-drk-color ); }

.process_steps .bttn:first-of-type {
  flex: 1;
}

.process_steps .bttn:not( :last-of-type )::after {
  content: " ";
  width: 10px;
  height: 10px;
  position: absolute;
  top: 50%;
  right: 0;
  z-index: 1;
  background: inherit;
  border-style: none solid solid none;
  transform: translateY(-50%) translateX(50%) rotate(-45deg);
}

.process_steps .icn_bttn {
  font-size: 1.5em;
}

.process_steps .bttn_lbl {
  font-size: 1em;
  display: inline-block;
}

.bttn_dsc {
  font-size: 0.75em;
  margin: 10px 5px 5px 5px;
}

.process_vert {
  flex-direction: column;
}

.process_vert .bttn:not( :last-of-type )::after {
  inset: unset;
  bottom: 0;
  right: 50%;
  transform: translateY(50%) translateX(50%) rotate(45deg);
}

.process_steps:has( #stps_ord_vrt_01:checked ) #stps_vrt_01 { background: var( --ifc-color ); }
.process_steps:has( #stps_ord_vrt_02:checked ) #stps_vrt_02 { background: var( --ifc-color ); }
.process_steps:has( #stps_ord_vrt_03:checked ) #stps_vrt_03 { background: var( --ifc-color ); }
.process_steps:has( #stps_ord_vrt_04:checked ) #stps_vrt_04 { background: var( --ifc-color ); }

.process_steps:has( #stps_ord_vrt_02:checked ) #stps_vrt_01 { background: var( --prm-mid-drk-color ); }
.process_steps:has( #stps_ord_vrt_03:checked ) #stps_vrt_01 { background: var( --prm-mid-drk-color ); }
.process_steps:has( #stps_ord_vrt_03:checked ) #stps_vrt_02 { background: var( --prm-mid-drk-color ); }
.process_steps:has( #stps_ord_vrt_04:checked ) #stps_vrt_01 { background: var( --prm-mid-drk-color ); }
.process_steps:has( #stps_ord_vrt_04:checked ) #stps_vrt_02 { background: var( --prm-mid-drk-color ); }
.process_steps:has( #stps_ord_vrt_04:checked ) #stps_vrt_03 { background: var( --prm-mid-drk-color ); }

.process_line .bttn {
  margin: 30px 0px 0px 0px;
}

.process_line .bttn:not( :first-of-type )::before {
  content: " ";
  position: absolute;
  width: 100%;
  height: 7px;
  position: absolute;
  inset: unset;
  top: 0%;
  left: 0%;
  z-index: 1;
  background: inherit;
  border-width: 1px;
  border-style: solid;
  transform: translateY(-25px) translateX(-50%);
}

.process_steps.process_line .bttn::after {
  content: " ";
  position: absolute;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  inset: unset;
  top: 0%;
  left: 50%;
  z-index: 2;
  background: inherit;
  border-width: 1px;
  border-style: solid;
  transform: translateY(-29px) translateX(-50%);
}

.process_steps:has( #stps_ord_hrz_ln_01:checked ) #stps_hrz_ln_01 { background: var( --ifc-color ); }
.process_steps:has( #stps_ord_hrz_ln_02:checked ) #stps_hrz_ln_02 { background: var( --ifc-color ); }
.process_steps:has( #stps_ord_hrz_ln_03:checked ) #stps_hrz_ln_03 { background: var( --ifc-color ); }
.process_steps:has( #stps_ord_hrz_ln_04:checked ) #stps_hrz_ln_04 { background: var( --ifc-color ); }

.process_steps:has( #stps_ord_hrz_ln_02:checked ) #stps_hrz_ln_01 { background: var( --prm-mid-drk-color ); }
.process_steps:has( #stps_ord_hrz_ln_03:checked ) #stps_hrz_ln_01 { background: var( --prm-mid-drk-color ); }
.process_steps:has( #stps_ord_hrz_ln_03:checked ) #stps_hrz_ln_02 { background: var( --prm-mid-drk-color ); }
.process_steps:has( #stps_ord_hrz_ln_04:checked ) #stps_hrz_ln_01 { background: var( --prm-mid-drk-color ); }
.process_steps:has( #stps_ord_hrz_ln_04:checked ) #stps_hrz_ln_02 { background: var( --prm-mid-drk-color ); }
.process_steps:has( #stps_ord_hrz_ln_04:checked ) #stps_hrz_ln_03 { background: var( --prm-mid-drk-color ); }

.process_vert.process_line .bttn {
  margin: 0px 0px 0px 40px;
}

.process_vert.process_line .bttn:not( :first-of-type )::before {
  content: " ";
  position: absolute;
  width: 7px;
  height: 100%;
  position: absolute;
  inset: unset;
  top: 0%;
  left: 0%;
  z-index: 1;
  background: inherit;
  border-width: 1px;
  border-style: solid;
  transform: translateX(-25px) translateY(-50%);
}

.process_vert.process_line .bttn::after {
  content: " ";
  position: absolute;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  inset: unset;
  top: 50%;
  left: 0%;
  z-index: 2;
  background: inherit;
  border-width: 1px;
  border-style: solid;
  transform: translateX(-29px) translateY(-50%);
}

.process_steps:has( #stps_ord_vrt_ln_01:checked ) #stps_vrt_ln_01 { background: var( --ifc-color ); }
.process_steps:has( #stps_ord_vrt_ln_02:checked ) #stps_vrt_ln_02 { background: var( --ifc-color ); }
.process_steps:has( #stps_ord_vrt_ln_03:checked ) #stps_vrt_ln_03 { background: var( --ifc-color ); }
.process_steps:has( #stps_ord_vrt_ln_04:checked ) #stps_vrt_ln_04 { background: var( --ifc-color ); }

.process_steps:has( #stps_ord_vrt_ln_02:checked ) #stps_vrt_ln_01 { background: var( --prm-mid-drk-color ); }
.process_steps:has( #stps_ord_vrt_ln_03:checked ) #stps_vrt_ln_01 { background: var( --prm-mid-drk-color ); }
.process_steps:has( #stps_ord_vrt_ln_03:checked ) #stps_vrt_ln_02 { background: var( --prm-mid-drk-color ); }
.process_steps:has( #stps_ord_vrt_ln_04:checked ) #stps_vrt_ln_01 { background: var( --prm-mid-drk-color ); }
.process_steps:has( #stps_ord_vrt_ln_04:checked ) #stps_vrt_ln_02 { background: var( --prm-mid-drk-color ); }
.process_steps:has( #stps_ord_vrt_ln_04:checked ) #stps_vrt_ln_03 { background: var( --prm-mid-drk-color ); }

.breadcrumbs_clickable {
  display: flex;
  flex-direction: row;
  margin: 6px 0px;
  flex-wrap: nowrap;
}

.brdcrms_lbl {
  position: relative;
  padding: 4px 0px;
  margin: 0px;
  width: 0;
  visibility: hidden;
  display: inline-flex;
}

.brdcrms_lbl .icn_bttn::after {
  content: var(--crumb_sep_icn);
}

.breadcrumbs_clickable:has( .brdcrms_00:checked ) :where(.bcrm_00) { display: inline; width: fit-content; visibility: visible; }
.breadcrumbs_clickable:has( .brdcrms_0p:checked ) :where(.bcrm_00,.bcrm_0p) { display: inline; width: fit-content; visibility: visible; }
.breadcrumbs_clickable:has( .brdcrms_0v:checked ) :where(.bcrm_00,.bcrm_0v) { display: inline; width: fit-content; visibility: visible; }
.breadcrumbs_clickable:has( .brdcrms_0a:checked ) :where(.bcrm_00,.bcrm_0a) { display: inline; width: fit-content; visibility: visible; }
.breadcrumbs_clickable:has( .brdcrms_pp:checked ) :where(.bcrm_00,.bcrm_0p,.bcrm_pp) { display: inline; width: fit-content; visibility: visible; }
.breadcrumbs_clickable:has( .brdcrms_ap:checked ) :where(.bcrm_00,.bcrm_0p,.bcrm_ap) { display: inline; width: fit-content; visibility: visible; }
.breadcrumbs_clickable:has( .brdcrms_mv:checked ) :where(.bcrm_00,.bcrm_0v,.bcrm_mv) { display: inline; width: fit-content; visibility: visible; }
.breadcrumbs_clickable:has( .brdcrms_tv:checked ) :where(.bcrm_00,.bcrm_0v,.bcrm_tv) { display: inline; width: fit-content; visibility: visible; }
.breadcrumbs_clickable:has( .brdcrms_aa:checked ) :where(.bcrm_00,.bcrm_0a,.bcrm_aa) { display: inline; width: fit-content; visibility: visible; }
.breadcrumbs_clickable:has( .brdcrms_sa:checked ) :where(.bcrm_00,.bcrm_0a,.bcrm_sa) { display: inline; width: fit-content; visibility: visible; }

.breadcrumb_menu {
  display: none;
  flex-wrap: wrap;
}

.panel:has( .brdcrms_00:checked ) .bcrm_mnu_00 { display: flex; }
.panel:has( .brdcrms_0p:checked ) .bcrm_mnu_0p { display: flex; }
.panel:has( .brdcrms_0v:checked ) .bcrm_mnu_0v { display: flex; }
.panel:has( .brdcrms_0a:checked ) .bcrm_mnu_0a { display: flex; }
.panel:has( .brdcrms_pp:checked ) .bcrm_mnu_exmpl_p { display: flex; }
.panel:has( .brdcrms_ap:checked ) .bcrm_mnu_exmpl_p { display: flex; }
.panel:has( .brdcrms_mv:checked ) .bcrm_mnu_exmpl_v { display: flex; }
.panel:has( .brdcrms_tv:checked ) .bcrm_mnu_exmpl_v { display: flex; }
.panel:has( .brdcrms_aa:checked ) .bcrm_mnu_exmpl_a { display: flex; }
.panel:has( .brdcrms_sa:checked ) .bcrm_mnu_exmpl_a { display: flex; }

.pagination_clickable {
  display: flex;
  flex-direction: row;
  margin: 6px 0px;
  flex-wrap: nowrap;
}

.pagination_clickable .pgntn_lbl {
  position: relative;
  padding: 4px 0px;
  margin: 0px;
  text-align: center;
  width: 1.875em;
  display: none;
}

.pagination_clickable:has( .pgntn_01:checked ) :where(.pgn_01,.pgn_02,.pgn_03,.pgn_04,.pgn_05,.pgn_rt,.pgn_10) { display: inline; }
.pagination_clickable:has( .pgntn_02:checked ) :where(.pgn_01,.pgn_02,.pgn_03,.pgn_04,.pgn_05,.pgn_rt,.pgn_10) { display: inline; }
.pagination_clickable:has( .pgntn_03:checked ) :where(.pgn_01,.pgn_02,.pgn_03,.pgn_04,.pgn_05,.pgn_rt,.pgn_10) { display: inline; }
.pagination_clickable:has( .pgntn_04:checked ) :where(.pgn_01,.pgn_02,.pgn_03,.pgn_04,.pgn_05,.pgn_rt,.pgn_10) { display: inline; }
.pagination_clickable:has( .pgntn_05:checked ) :where(.pgn_01,.pgn_lt,.pgn_04,.pgn_05,.pgn_06,.pgn_rt,.pgn_10) { display: inline; }
.pagination_clickable:has( .pgntn_06:checked ) :where(.pgn_01,.pgn_lt,.pgn_05,.pgn_06,.pgn_07,.pgn_rt,.pgn_10) { display: inline; }
.pagination_clickable:has( .pgntn_07:checked ) :where(.pgn_01,.pgn_lt,.pgn_06,.pgn_07,.pgn_08,.pgn_09,.pgn_10) { display: inline; }
.pagination_clickable:has( .pgntn_08:checked ) :where(.pgn_01,.pgn_lt,.pgn_06,.pgn_07,.pgn_08,.pgn_09,.pgn_10) { display: inline; }
.pagination_clickable:has( .pgntn_09:checked ) :where(.pgn_01,.pgn_lt,.pgn_06,.pgn_07,.pgn_08,.pgn_09,.pgn_10) { display: inline; }
.pagination_clickable:has( .pgntn_10:checked ) :where(.pgn_01,.pgn_lt,.pgn_06,.pgn_07,.pgn_08,.pgn_09,.pgn_10) { display: inline; }

.pagination_clickable:has( .pgntn_01:checked ) .pgn_01 { color: var( --ifc-color ); background: var( --fnt-lgt-color ); }
.pagination_clickable:has( .pgntn_02:checked ) .pgn_02 { color: var( --ifc-color ); background: var( --fnt-lgt-color ); }
.pagination_clickable:has( .pgntn_03:checked ) .pgn_03 { color: var( --ifc-color ); background: var( --fnt-lgt-color ); }
.pagination_clickable:has( .pgntn_04:checked ) .pgn_04 { color: var( --ifc-color ); background: var( --fnt-lgt-color ); }
.pagination_clickable:has( .pgntn_05:checked ) .pgn_05 { color: var( --ifc-color ); background: var( --fnt-lgt-color ); }
.pagination_clickable:has( .pgntn_06:checked ) .pgn_06 { color: var( --ifc-color ); background: var( --fnt-lgt-color ); }
.pagination_clickable:has( .pgntn_07:checked ) .pgn_07 { color: var( --ifc-color ); background: var( --fnt-lgt-color ); }
.pagination_clickable:has( .pgntn_08:checked ) .pgn_08 { color: var( --ifc-color ); background: var( --fnt-lgt-color ); }
.pagination_clickable:has( .pgntn_09:checked ) .pgn_09 { color: var( --ifc-color ); background: var( --fnt-lgt-color ); }
.pagination_clickable:has( .pgntn_10:checked ) .pgn_10 { color: var( --ifc-color ); background: var( --fnt-lgt-color ); }

/* Container for placing on a website to hold an entire comment thread */
.comment_cntnr {
  width: 100%;
  display: flex;
  flex-direction: column;
}

.comment {
  width: 100%;
  height: fit-content;
  display: flex;
  flex-direction: row;
}

.comment .column_resp_depth_spcr {
  width: calc( var( --depth ) * 10px );
  flex-shrink: 0;
}

.column_comment_icons {
  font-size: 16px;
  text-align: center;
  margin: 4px;
  width: 24px;
  flex-shrink: 0;
}

.column_comment_icons .user_icon {
  display: none;
}

.column_comment_icons .ownpost_mark {
  display: none;
}

.comment.ownpost .column_comment_icons .ownpost_mark {
  display: initial;
}

.comment_cntnr.user_icons .column_comment_icons {
  width: 32px;
}

.column_comment_icons .ownpost_mark {
  font-size: 12px;
}

.comment_cntnr.user_icons .column_comment_icons .user_icon {
  width: 32px;
  height: 32px;
  display: initial;
}

.column_comment_icons .fold_cmt_lbl {
  display: none;
}

.comment_cntnr.side_fold_lbl .column_comment_icons .fold_cmt_lbl {
  display: initial;
}

.comment_cntnr.ftr_vote .column_comment_icons .upvote   { display: none; }
.comment_cntnr.ftr_vote .column_comment_icons .rating   { display: none; }
.comment_cntnr.ftr_vote .column_comment_icons .downvote { display: none; }

.comment_header {
  margin: 8px 0px;
}

.comment_header a {
  color: var( --prm-lgt-color );
}

.comment_cntnr.side_fold_lbl .fold_cmt_lbl {
  display: none;
}

.comment_body p {
  margin: 8px 0px;
}

.comment_footer {
  margin: 8px 0px;
}

.comment_footer .upvote   { display: none; }
.comment_footer .rating   { display: none; }
.comment_footer .downvote { display: none; }

.comment_cntnr.ftr_vote .comment:not(.ownpost) .comment_footer {
  margin: -8px 0px 8px 0px;
}

.comment_cntnr.ftr_vote .comment:not(.ownpost) .comment_footer .upvote   { display: inline-block; }
.comment_cntnr.ftr_vote .comment:not(.ownpost) .comment_footer .rating   { display: inline-block; }
.comment_cntnr.ftr_vote .comment:not(.ownpost) .comment_footer .downvote { display: inline-block; }

.comment_footer .upvote   { -webkit-transform: translateY(6px); transform: translateY(6px); }
.comment_footer .downvote { -webkit-transform: translateY(6px); transform: translateY(6px); }

.comment .comment_footer a {
  color: var( --prm-lgt-color );
}

.comment .fold_cmt_lbl .bttn_on { display: none; }

.comment:has( .fold_cmt:checked ) .fold_cmt_lbl .bttn_off { display: none; }
.comment:has( .fold_cmt:checked ) .fold_cmt_lbl .bttn_on { display: initial; }

.comment_cntnr:has( .cl_1:checked ) #comment_1 .comment_body   { display: none; }
.comment_cntnr:has( .cl_1:checked ) #comment_1 .comment_footer { display: none; }
.comment_cntnr:has( .cl_2:checked ) #comment_2 .comment_body   { display: none; }
.comment_cntnr:has( .cl_2:checked ) #comment_2 .comment_footer { display: none; }
.comment_cntnr:has( .cl_3:checked ) #comment_3 .comment_body   { display: none; }
.comment_cntnr:has( .cl_3:checked ) #comment_3 .comment_footer { display: none; }
.comment_cntnr:has( .cl_4:checked ) #comment_4 .comment_body   { display: none; }
.comment_cntnr:has( .cl_4:checked ) #comment_4 .comment_footer { display: none; }
.comment_cntnr:has( .cl_5:checked ) #comment_5 .comment_body   { display: none; }
.comment_cntnr:has( .cl_5:checked ) #comment_5 .comment_footer { display: none; }
.comment_cntnr:has( .cl_6:checked ) #comment_6 .comment_body   { display: none; }
.comment_cntnr:has( .cl_6:checked ) #comment_6 .comment_footer { display: none; }

.comment_cntnr:has( .hd_1:checked ) #comment_1 { display: none; }
.comment_cntnr:has( .hd_2:checked ) #comment_2 { display: none; }
.comment_cntnr:has( .hd_3:checked ) #comment_3 { display: none; }
.comment_cntnr:has( .hd_4:checked ) #comment_4 { display: none; }
.comment_cntnr:has( .hd_5:checked ) #comment_5 { display: none; }
.comment_cntnr:has( .hd_6:checked ) #comment_6 { display: none; }

.notification_cntnr {
  width: 100%;
  display: flex;
  flex-direction: column;
}

.notification {
  width: 100%;
  height: fit-content;
  display: flex;
  flex-direction: row;
}

.column_ntfctn_icons {
  font-size: 16px;
  text-align: center;
  margin: 4px;
  width: 24px;
  flex-shrink: 0;
}

.column_ntfctn_icons .user_icon {
  display: none;
}

.column_ntfctn_icons .ownpost_mark {
  display: none;
}

.notification.ownpost .column_ntfctn_icons .ownpost_mark {
  display: initial;
}

.notification_cntnr.user_icons .column_ntfctn_icons {
  width: 32px;
}

.column_ntfctn_icons .ownpost_mark {
  font-size: 12px;
}

.notification_cntnr.user_icons .column_ntfctn_icons .user_icon {
  width: 32px;
  height: 32px;
  display: initial;
}

.ntfctn_header {
  margin: 8px 0px;
}

.ntfctn_header a {
  color: var( --prm-lgt-color );
}

.ntfctn_body p {
  margin: 8px 0px;
}

.ntfctn_footer {
  margin: 8px 0px;
}

.ntfctn_footer .ratings   { --lbl-font-size: 20px; margin: 0px 15px 0px 0px; }
.ntfctn_footer .shares    { --lbl-font-size: 20px; margin: 0px 15px 0px 0px; }
.ntfctn_footer .awards    { --lbl-font-size: 20px; margin: 0px 15px 0px 0px; }
.ntfctn_footer .replies   { --lbl-font-size: 20px; margin: 0px 15px 0px 0px; }
.ntfctn_footer .saves     { --lbl-font-size: 20px; margin: 0px 15px 0px 0px; }
.ntfctn_footer .favorites { --lbl-font-size: 20px; margin: 0px 15px 0px 0px; }

.ntfctn_rtng_count  { font-size: var(--lbl-font-size); }
.ntfctn_share_count { font-size: var(--lbl-font-size); }
.ntfctn_award_count { font-size: var(--lbl-font-size); }
.ntfctn_reply_count { font-size: var(--lbl-font-size); }
.ntfctn_save_count  { font-size: var(--lbl-font-size); }
.ntfctn_fave_count  { font-size: var(--lbl-font-size); }

.ntfctn_icn {
  position: relative;
  padding: 0px;
  width: var(--lbl-font-size);
  height: var(--lbl-font-size);
  display: inline-block;
  margin: 0px -12px 0px 0px;
}

.ntfctn_icn .crcl_bkdrp {
  height: 18px;
  width: 18px;
  transform: translate(0px, 3px);
}

.ntfctn_icn .icn_bttn {
  font-size: var(--lbl-font-size);
}

.ntfctn_icn .bttn_off {
  position: absolute;
  top: 4px;
  left: 0px;
}

.ntfctn_icn .bttn_on {
  position: absolute;
  top: 4px;
  left: 0px;
}

.shares .ntfctn_icn {
  --lbl-font-size: 16px;
  margin: 0px -6px 0px 0px;
}

.ntfctn_icn .crcl_bkdrp {
  height: calc( var(--lbl-font-size) - 1px );
  width:  calc( var(--lbl-font-size) - 1px );
  transform: translate(-1px, 2px);
}
  
.share_arrow .bttn_off { background: blue; outline: 2px solid white; }
.share_arrow .bttn_on  { color: white; transform: scale(-1.0, 1.0) translate(1px, 1px); }

.share_graph .bttn_off { background: blue; outline: 2px solid white; }
.share_graph .bttn_on  { color: white; font-variation-settings: 'FILL' 1; transform: translate(-1px, 2px); }

.share_send .bttn_off { background: blue; outline: 2px solid white; }
.share_send .bttn_on  { color: white; font-variation-settings: 'FILL' 1; transform: translate(-1px, 2px); }

.share_groups .bttn_off { background: blue; outline: 2px solid white; }
.share_groups .bttn_on  { color: white; font-variation-settings: 'FILL' 1; transform: translate(-1px, 2px); }

.share_connect .bttn_off { background: blue; outline: 2px solid white; }
.share_connect .bttn_on  { color: white; transform: translate(-1px, 2px); }

.ntfctn_footer .awards .ntfctn_icn .bttn_off { color: palegoldenrod;  font-variation-settings: 'wght' 200; transform: scale(1.1, 1.1) translate(0px, 3px); }
.ntfctn_footer .awards .ntfctn_icn .bttn_on  {
  background-image:
    -webkit-repeating-linear-gradient(left, hsla(0,0%,100%,0) 0%, hsla(0,0%,100%,0)   6%, hsla(0,0%,100%, .1) 7.5%),
    -webkit-repeating-linear-gradient(left, hsla(0,0%,  0%,0) 0%, hsla(0,0%,  0%,0)   4%, hsla(0,0%,  0%,.03) 4.5%),
    -webkit-repeating-linear-gradient(left, hsla(0,0%,100%,0) 0%, hsla(0,0%,100%,0) 1.2%, hsla(0,0%,100%,.15) 2.2%),
    linear-gradient( 90deg,
      hsl(35,30%,80%)  0%, 
      hsl(40,35%,40%)  5%, 
      hsl(40,45%,55%) 10%, 
      hsl(45,60%,55%) 45%,
      hsl(40,55%,35%) 60%,
      hsl(40,40%,50%) 65%,
      hsl(35,40%,40%) 80%,
      hsl(30,55%,40%) 85%,
      hsl(40,30%,55%) 90%
    );
    
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-variation-settings: 'FILL' 1;
}

.reply_text .bttn_off { color: white; }
.reply_text .bttn_on  { color: dimgrey; font-variation-settings: 'FILL' 1; }

.reply_audio .bttn_off { color: white; }
.reply_audio .bttn_on  { color: blueviolet; font-variation-settings: 'FILL' 1; }

.reply_image .bttn_off { color: forestgreen; }
.reply_image .bttn_on  { color: skyblue; font-variation-settings: 'FILL' 1; }

.reply_video .bttn_off { color: white; }
.reply_video .bttn_on  { color: lawngreen; font-variation-settings: 'FILL' 1; }

.reply_rtng .bttn_off { color: orangered; }
.reply_rtng .bttn_on  { color: white; font-variation-settings: 'FILL' 1; }

.ntfctn_footer .saves .ntfctn_icn .bttn_off { color: white; font-variation-settings: 'wght' 200; transform: scale(1.1, 1.1) translate(0px, 3px); }
.ntfctn_footer .saves .ntfctn_icn .bttn_on  {
  background-image:
    linear-gradient( 180deg,
      royalblue  40%, 
      darkmagenta 100%
    );
    
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent; font-variation-settings: 'FILL' 1; }

.ntfctn_footer .saves .save_download .bttn_off { font-variation-settings: 'wght' 200; transform: scale(1.0,-1.1) translate(-1px, -4px); }
.ntfctn_footer .saves .save_download .bttn_on  { transform: scale(1.0,-1) translate(-1px, -4px); }

.ntfctn_footer .favorites .ntfctn_icn .bttn_off { color: white; }
.ntfctn_footer .favorites .ntfctn_icn .bttn_on  { color: crimson; font-variation-settings: 'FILL' 1;  }

.external_youtube {
  width: 100%;
  max-width: 100%;
}

.external_vimeo {
  width: 100%;
  max-width: 100%;
}

.external_soundcloud {
  width: 100%;
  height: 110px;
}

/* Indenting scheme for details and summary taken from https://stackoverflow.com/a/69980277 answer by user 'recursive' */
details {
  margin-left: 1em;
}

summary {
  margin-left: -1em;
}

/* Style the footer */
footer {
  background-color: var( --bg-drk-color );
  margin: 0;
  text-align: left;
  font-size: 12px;
  color: white;
  width: 100%;
  height: 10px;
  display: none;
}

.footer_pnl_lbls {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
}

@media screen and (max-width: 1500px){
  /* Note - Media queries need to be AFTER normal css defintions to properly overwrite the normal properties */
  .nv_side_cntnt {
    width: 78px;
    min-width: 78px;
  }
  
  .brtn_mtrl_clr_cntr {
    padding: 0px 10px;
  }
  
  .hide_mid_screen {
    display: none;
  }
  
  .show_mid_screen {
    display: inline-block;
    pointer-events: auto;
  }
  
  .snckbr:popover-open {
    margin: 0px 0px -15px -170px;
  }
  
  .bttm_sht_g:popover-open {
    margin: 0px 0px 0px -195px;
  }
}

@media screen and (max-width: 1000px){
  /* Note - Media queries need to be AFTER normal css defintions to properly overwrite the normal properties */
  .nv_hdr {
    display: flex;
    flex-direction: row;
  }
  
  main {
    height: calc(100% - 135px);
  }
  
  .nv_side_cntnt {
    display: none;
  }
  
  main section {
    display: block;
    overflow-y: scroll;
    scrollbar-width: thin;
    scrollbar-color: var( --ifc-lgt-color ) var( --bg-drk-color );
  }
  
  .artcl_cntnt {
    display: block;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var( --ifc-lgt-color ) var( --bg-drk-color );
    height: auto;
  }
  
  .snckbr:popover-open {
    margin: 0px 0px 65px -200px;
  }
  
  .bttm_sht_g:popover-open {
    margin: 0px 0px 80px -195px;
  }
  
  footer {
    display: inline-block;
  }
}

/* Responsive layout - makes the menu and the content (inside the section) sit on top of each other instead of next to each other */
/* @media (max-width: 600px) { */
/*   section { */
/*     -webkit-flex-direction: column; */
/*     flex-direction: column; */
/*   } */
/* } */