:root {
  /*
  ** Primary
  */
  /* --choral-blue: rgba(31,42,68,1);
  --choral-orange: rgba(242,169,0,1); */
--choral-blue: #101040;
--choral-orange: #ffaa44;
  /*
  ** Secondary
  */

  --choral-cyan: rgba(13,162,188,1);
  --choral-green: rgba(52,182,109,1);
  --choral-red: rgba(220,77,61,1);
  --choral-grey: rgba(114,115,116,1);


  /*
cyan: #0da2bc
orange: #f2a900
green: #34b66d
blue: #1f2a44
red: #dc4d3d
grey : #727374
  */

/*
** Additional derivatives
*/

  /* --choral-blue-selected: rgba(0,102,204,1); */
  --choral-blue-selected: #006699;
  --choral-blue-hover: rgba(128,191,255,1);
  --choral-blue-gray: rgba(132,151,176,1);
  --choral-orange-light: rgba(255,204,128,1);
  --choral-green-dark: rgba(0,179,60,1);
/*
#80BFFF
#F2A900
#00B33C
#1F2A44
#E62E00
#7F7F7F
*/



}

div.choral-bottom-bar {
  position: fixed;
  left: 0px;
  bottom: 0px;
  width: 100vw;
  height: 24pt;
  /*
  background-color: var(--choral-blue);
  color: white;
  */
  border-top: solid .1px var(--line-sep-color);
  z-index: 11;
  background-color: white;
  -webkit-transition-property: bottom width height background-color font-size left top -webkit-transform color;
  -webkit-transition-duration: 1s;
  -webkit-transition-timing-function: ease-in-out;
  transition-property: bottom width height background-color font-size left top transform color;
  transition-duration: 1s;
  transition-timing-function: ease-in-out;
}
div.choral-bottom-bar.hide {
  bottom: -50px;
}



span.choral-mark {
  font-family: Roboto, Arial;
  margin: 4pt;
  font-size: .9em;
  position: absolute;
  right: 10px;
}

span.choral-name {
  font-family: stampbor_cleanregular, Roboto, Arial;
  position: absolute;
  left: 10px;
  letter-spacing: 4px;
  text-align: center;
  /* transform: translate(-50%); */
  margin-top: 2pt;
}