@safeAreaTop: env(safe-area-inset-top);
@safeAreaBottom: env(safe-area-inset-bottom);
@safeAreaLeft: env(safe-area-inset-left);
@safeAreaRight: env(safe-area-inset-right);

// NOTE: dynamic use in js something like this: (not actually working)
///var LESS = ".AvatarDialog.Dialog{background-color:#fcc;}";
///less.Parser().parse(LESS, function(error, result){
///  trace("less.Parser result:"+$m(result) );
///  if(!error) result.toCSS();//?
///})


// DEBUG show focus
///div:focus:after{
///  content: " ";
///  position: absolute;
///  width: 100%; height: 100%;
///  left: 0%; top: 0%; right: 0; bottom:0;
///  opacity: 0.35;
///  background-color:cyan;
///  pointer-events:none;
///}



///@media (color-gamut: srgb) {
///  #viewFrame, body.blurred #viewFrame{
///    border-color:#fff666 !important;
///  }
///}
///@media (color-gamut: p3) {
///  #viewFrame, body.blurred #viewFrame{
///    border-color:#ff4466 !important;
///  }
///}

h4 {
  margin: .75em 0;
}

li {
  list-style: inside;
  display:block;
}
li::marker {
  content: '';
}

//* calc example: calc(~"100%" - ux(11) );

// ~ ~ ~ ~ ~ global


@font-face { // regular
  font-family: 'Bitter';
  src: url('fonts/Bitter-Regular.otf') format('OpenType');
  font-weight: normal;
  font-style: normal;
}
@font-face { // bold
  font-family: 'Bitter';
  src: url('fonts/Bitter-Bold.otf') format('OpenType');
  font-weight: bold;
  font-style: normal;
}
@font-face { // italic
  font-family: 'Bitter';
  src: url('fonts/Bitter-Italic.otf') format('OpenType');
  font-weight: normal;
  font-style: italic;
}
@font-face { // italic bold
  font-family: 'Bitter';
  src: url('fonts/Bitter-Italic-Bold.otf') format('OpenType');
  font-weight: bold;
  font-style: italic;
}


// not quite as good, may handle more char sets
///@font-face { // regular
///  font-family: 'DejaVuSerif';
///  src: url('fonts/DejaVuSerif.ttf') format('TrueType');
///  font-weight: normal;
///  font-style: normal;
///}
///@font-face { // bold
///  font-family: 'DejaVuSerif';
///  src: url('fonts/DejaVuSerif-Bold.ttf') format('TrueType');
///  font-weight: bold;
///  font-style: normal;
///}
///@font-face { // italic
///  font-family: 'DejaVuSerif';
///  src: url('fonts/DejaVuSerif-Italic.ttf') format('TrueType');
///  font-weight: normal;
///  font-style: italic;
///}
///@font-face { // italic bold
///  font-family: 'DejaVuSerif';
///  src: url('fonts/DejaVuSerif-BoldItalic.ttf') format('TrueType');
///  font-weight: bold;
///  font-style: italic;
///}
///@uiFont:DejaVuSerif;


// this font is almost as good, and handles the missing cyrillic chars
@font-face { // regular
  font-family: 'RobotoSlab';
  src: url('fonts/RobotoSlab-Regular.ttf') format('TrueType');
  font-weight: normal;
  font-style: normal;
}
@font-face { // bold
  font-family: 'RobotoSlab';
  src: url('fonts/RobotoSlab-Bold.ttf') format('TrueType');
  font-weight: bold;
  font-style: normal;
}

// japanese

@font-face { // A
  font-family: 'kiwi-maru';
  src: url('fonts/Kiwi_Maru/KiwiMaru-Light.ttf') format('TrueType');
  font-weight: normal;
  font-style: normal;
}
@font-face { // bold
  font-family: 'kiwi-maru';
  src: url('fonts/Kiwi_Maru/KiwiMaru-Medium.ttf') format('TrueType');
  font-weight: bold;
  font-style: normal;
}
@font-face { // B
  font-family: 'zen-kaku-gothic-new';
  src: url('fonts/Zen_Kaku_Gothic_New/ZenKakuGothicNew-Regular.ttf') format('TrueType');
  font-weight: normal;
  font-style: normal;
}
@font-face { // bold
  font-family: 'zen-kaku-gothic-new';
  src: url('fonts/Zen_Kaku_Gothic_New/ZenKakuGothicNew-Bold.ttf') format('TrueType');
  font-weight: bold;
  font-style: normal;
}

// chinese

@font-face {
  font-family: "NotoSansTC";
  font-weight: normal;
  font-style: normal;
  src: url('fonts/Noto_chinese/NotoSansTC-VariableFont_wght.ttf') format('TrueType');
}
@font-face {
  font-family: "NotoSansTC";
  font-weight: bold;
  font-style: normal;
  src: url('fonts/Noto_chinese/NotoSansTC-VariableFont_wght.ttf') format('TrueType');
}
@font-face {
  font-family: "NotoSansSC";
  font-weight: normal;
  font-style: normal;
  src: url('fonts/Noto_chinese/NotoSansSC-VariableFont_wght.ttf') format('TrueType');
}
@font-face {
  font-family: "NotoSansSC";
  font-weight: bold;
  font-style: normal;
  src: url('fonts/Noto_chinese/NotoSansSC-VariableFont_wght.ttf') format('TrueType');
}

// this is modified in text.js to add language-specific fonts
@uiFont:Bitter,RobotoSlab,sans-serif;




// debug ui
@font-face {
  font-family: "DejaVu Sans Mono";
  src: url('fonts/DejaVuSansMono.ttf') format('truetype');
}
//
@MAX_Z_INDEX:2147483647;

@DEBUG_Z_INDEX:2147483647 - 1000;


// SCALE
@scale:~`App.scale+'px'`;
@radius:2px; // fixed size, always barely curved



@almostFullSize:calc(~"100%" - ux(2));

@smallSize:ux(`App.MIN_SIZE`); // 140ux



//_
//_
//*  * * * *  * * * *  *        * * * *  * * * *  * * * *  
//`  *        *     *  *        *     *  *     *  *        
//!  *        *     *  *        *     *  * * * *  * * * *  
//^  *        *     *  *        *     *  *  *           *  
//~  * * * *  * * * *  * * * *  * * * *  *   *    * * * *  
//_
//_ ~colors

// this needs to equal the background-color in vilmonic.html!
@uiBackgroundColor:    #2a2a2d;// #2a2a2a;
@appBackgroundColor:   #2f2a2f;// #2a2a2a;
@viewBackground:       #222;
@light:                #f3ffff;
@lightdk:              #e7f8f3;
@selectYellow:         #fff555;
@buttonGreen:          #0d7;


@water:~`Color.toHTML(App.palette.water[2])`;
@waterSubmerged:~`Color.toHTML(App.palette.submerged[0])`;
iframe{
  border:0;
  margin:0;
  width:100%;
  height:100%;
}

html{
  height:100%;
  background-color:@appBackgroundColor; // shown on start
}

input, textarea{
  font:normal 1em @uiFont;
  outline: none;
}
body{
  margin:0;
  height:100%;
  background-color:@appBackgroundColor; // fine
  color: #333;
  font:normal ux(4.75) @uiFont;
  ///line-height: 1.2em;
  -webkit-tap-highlight-color:rgba(0,0,0,0);
}
body:-webkit-full-screen{
  width:100%;
}

// prevent rubberbanding on scroll
html, body {
  height: 100%;
  overflow: hidden;
}

// remove default button styles
button.Button{
  border:0;
  background-color:transparent;
  display:block;
  padding:0;
  text-indent:0;
}
button.Button:active{
  padding:0;
}
button.Button::-moz-focus-inner{
  padding: 0;
  border: 0
}


// extend touch area out beyond button
body.touch .Button{
  position: relative;
}
body.touch .Button > .touchArea {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  margin: ux(-1);
  padding: ux(1);
  // testing
  ///background-color: #f007;
}

///.Component.Button.mousedown.clickable {
///  background-color: @buttonGreen !important; //@selectYellow
///}



// mousedown effects for all buttons! (
///.Button.mousedown{
///  background-color: @selectYellow; //@buttonGreen
///}

///.StartupScreen > .buttons > .menu > .Button.mousedown {
///  background: #444 !important;
///  color: #ddd;
///}
// mousedown )




div{
  outline:0
}

hr {
  border: 0;
  border-bottom: 1px dotted #bbb;
  margin: 1em 0em;
}

i,b{
  // fix issues in chrome with italic/bold font being larger
  line-height:1em;
}

h2 {
  line-height: 1em;
}

// use to display html as plaintext
script[type="text/plain"] {display:block;}




//((  * * * *  *     *  * * * *  * * * *  * * * *  * * * *  * * * *  
//))  *        *     *  *     *  *        *     *  *     *  *        
//((  *        *     *  * * * *  * * * *  *     *  * * * *  * * * *  
//))  *        *     *  * *            *  *     *  * *            *  
//((  * * * *  * * * *  *   *    * * * *  * * * *  *   *    * * * *  



///@cursorDefault:url("images/cursorArrow70.png") 1 1, default;
///@cursorPointer:url("images/cursorPointer70.png") 4 1, pointer;
///@cursorCircle:url("images/cursorCircle70.png") 12 12, zoom-in;
///@cursorCircleX:url("images/cursorX70.png") 12 12, zoom-out;
///@cursorMove:url("images/cursorHand70.png") 7 1, move;
///@cursorText:text;
//
// linux png cursors seem fuct so this is a work around:
// transparent white outlines need to be opacity 75%
// and color #bdbdbd (#fff -26 lightness using huesat in ps)
// (will show up as #fff)
//
///@cursorDefault:~`System.os=='linux'?
///  'url("images/cursors/cursorArrow70linux.png") 1 1, default' :
///  'url("images/cursors/cursorArrow70.png") 1 1, default'`;
///@cursorPointer:~`System.os=='linux'?
///  'url("images/cursors/cursorPointer70linux.png") 4 1, pointer' :
///  'url("images/cursors/cursorPointer70.png") 4 1, pointer'`;
///@cursorCircle:~`System.os=='linux'?
///  'url("images/cursors/cursorCircle70linux.png") 12 12, zoom-in' :
///  'url("images/cursors/cursorCircle70.png") 12 12, zoom-in'`;
///@cursorCircleX:~`System.os=='linux'?
///  'url("images/cursors/cursorX70linux.png") 12 12, zoom-out' :
///  'url("images/cursors/cursorX70.png") 12 12, zoom-out'`;
///@cursorMove:~`System.os=='linux'?
///  'url("images/cursors/cursorHand70linux.png") 7 1, move' :
///  'url("images/cursors/cursorHand70.png") 7 1, move'`;
///@cursorText:text;

// cursors need to be '.cur' files in IE/Edge
// with NO hotspot listed (only in cur file)
///@cursorDefault:~`System.os=='linux'?
///  'url("images/cursors/cursorArrow70linux.png") 1 1, default' :
///  System.browser=='ie'||System.browser=='edge'?
///  'url("images/cursors/cursorArrow70.cur"), default' :
///  'url("images/cursors/cursorArrow70.png") 1 1, default'`;
///@cursorPointer:~`System.os=='linux'?
///  'url("images/cursors/cursorPointer70linux.png") 4 1, pointer' :
///  System.browser=='ie'||System.browser=='edge'?
///  'url("images/cursors/cursorPointer70.cur"), default' :
///  'url("images/cursors/cursorPointer70.png") 4 1, pointer'`;
///@cursorCircle:~`System.os=='linux'?
///  'url("images/cursors/cursorCircle70linux.png") 12 12, zoom-in' :
///  System.browser=='ie'||System.browser=='edge'?
///  'url("images/cursors/cursorCircle70.cur"), default' :
///  'url("images/cursors/cursorCircle70.png") 12 12, zoom-in'`;
///@cursorCircleX:~`System.os=='linux'?
///  'url("images/cursors/cursorX70linux.png") 12 12, zoom-out' :
///  System.browser=='ie'||System.browser=='edge'?
///  'url("images/cursors/cursorX70.cur"), default' :
///  'url("images/cursors/cursorX70.png") 12 12, zoom-out'`;
///@cursorMove:~`System.os=='linux'?
///  'url("images/cursors/cursorHand70linux.png") 7 1, move' :
///    System.browser=='ie'||System.browser=='edge'?
///  'url("images/cursors/cursorHand70.cur"), default' :
///  'url("images/cursors/cursorHand70.png") 7 1, move'`;
///@cursorText:text;


@cursorText:text;

///@cursorDefault:url("images/cursors/cursorArrow70.png") 1 1, default;
///@cursorPointer:url("images/cursors/cursorPointer70.png") 4 1, pointer;
///@cursorCircle:url("images/cursors/cursorCircle70.png") 12 12, zoom-in;
///@cursorCircleX:url("images/cursors/cursorX70.png") 12 12, zoom-out;
///@cursorMove:url("images/cursors/cursorHand70.png") 7 7, move;

///@cursorDefault:url("images/cursors/yellow/cursorArrow70.png") 1 1, default;
///@cursorPointer:url("images/cursors/yellow/cursorPointer70.png") 4 1, pointer;
///@cursorCircle: url("images/cursors/yellow/cursorCircle70.png") 12 12, zoom-in;
///@cursorCircleX:url("images/cursors/yellow/cursorX70.png") 12 12, zoom-out;
///@cursorMove:   url("images/cursors/yellow/cursorHand70.png") 7 7, move;

//@cursorDefault:url("images/cursors/white/cursorArrow70.png") 1 1, default;
//@cursorPointer:url("images/cursors/white/cursorPointer70.png") 4 1, pointer;
//@cursorCircle: url("images/cursors/white/cursorCircle70.png") 12 12, zoom-in;
//@cursorCircleX:url("images/cursors/white/cursorX70.png") 12 12, zoom-out;
//@cursorMove:   url("images/cursors/white/cursorHand70.png") 7 7, move;  // 7 1

@cursorDefault:url("images/cursors/transparent-90/cursorArrow.png") 1 1, default;
@cursorPointer:url("images/cursors/transparent-90/cursorPointer.png") 4 1, pointer;
@cursorCircle: url("images/cursors/transparent-90/cursorCircle.png") 12 12, zoom-in;
@cursorCircleX:url("images/cursors/transparent-90/cursorX.png") 12 12, zoom-out;
@cursorMove:   url("images/cursors/transparent-90/cursorHand.png") 7 7, move;  // 7 1



body,#main{
  cursor:@cursorDefault;
}

#viewFrame{
  cursor:@cursorDefault;
  //cursor:@cursorPointer
}

#main.Grab > #content > #ui > #viewFrame{
  cursor: @cursorMove;
}
#main.MoveTo > #content > #ui > #viewFrame{
  cursor: @cursorCircleX;
}
#main.Analyze > #content > #ui > #viewFrame{
  cursor: @cursorCircle;
}
// hide cursor while tool using
body.hideCursor > #main > #content > #ui > #viewFrame {
  cursor: none !important;
}
body.startupScreen #viewFrame{ 
  cursor:@cursorDefault !important;
}




// #main.Grab > #content > #ui > #viewFrame,
// #main.MoveTo > #content > #ui > #viewFrame,
// #main.Analyze > #content > #ui > #viewFrame{
//   cursor: none;
// }


/*

(((((((    * * * * *  *  *       *  *  * * *   *  * * * * *  
 )))))))   *   *   *  *    *   *    *  *   *   *  *          
(((((((    *   *   *  *      *      *  *   *   *  * * * * *  
 )))))))   *   *   *  *    *   *    *  *   *   *          *  
(((((((    *   *   *  *  *       *  *  *   * * *  * * * * *   

*/

.pixelated(){
  image-rendering: optimizeSpeed;
  image-rendering: optimize-contrast;
  -ms-interpolation-mode: nearest-neighbor;
  image-rendering: -webkit-optimize-contrast;
  image-rendering: -moz-crisp-edges;
  image-rendering: -o-crisp-edges;
  image-rendering: crisp-edges;
  image-rendering: pixelated;
  image-rendering: -webkit-crisp-edges;
}


// does not work in old ios
// also, blurs pixels!
.centerVertically(@pos:relative){
  position: @pos;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%); 
  transform: translateY(-50%);
}
// @pos absolute required for old ios safari to work
.center(@pos:relative){
  position: @pos;
  left:50%; top: 50%;
  -webkit-transform: translate(-50%,-50%);
  -ms-transform: translate(-50%,-50%);
  transform: translate(-50%,-50%);
}
///
///.centerChildrenVertically(){
///  display: flex;
///  flex-direction: column;
///  justify-content: center;
///}
///


// ANIMATION 
.animation(@args){
  -webkit-animation: @args;
  -moz-animation: @args;
  animation: @args;
}
.keyframes(@name; @arguments) {
  @-moz-keyframes @name { @arguments(); }
  @-webkit-keyframes @name { @arguments(); }
  @keyframes @name { @arguments(); }
}
.animation-delay(@args){
  -webkit-animation-delay: @args;
  animation-delay: @args;
}
// CSS FILTERS 
.filter(@value){
  filter: @value;
  -webkit-filter: @value;
}


#svgfilterContainer{
  position: fixed;
  z-index: -1;
  left: 0; width: 20px; height: 20px;
}


/* transition:
    #somediv {
      .transition(all, 0.5s, ease-in);
    }
    #somediv:hover {
      opacity: 0;
    }
*/
// NOTE: does not work on height, need max-height
.transition (@prop: all, @time: 1s, @ease: linear){
  -webkit-transition: @prop @time @ease;
  -moz-transition: @prop @time @ease;
  -o-transition: @prop @time @ease;
  -ms-transition: @prop @time @ease;
  transition: @prop @time @ease;
}


/* gradient:
    #someDiv {
      .gradient(left, #663333, #333333);
    } 
*/
///.gradient (@origin: to bottom, @start: #ffffff, @stop: #000000){
///  background-color: @start;
///  background-image: -webkit-linear-gradient(@origin, @start, @stop);
///  background-image: -moz-linear-gradient(@origin, @start, @stop);
///  background-image: -o-linear-gradient(@origin, @start, @stop);
///  background-image: -ms-linear-gradient(@origin, @start, @stop);
///  background-image: linear-gradient(@origin, @start, @stop);
///}
// gradient
.gradient (@tofrom @start: #ffffff, @end: #000000){
  background-color: @start;
  background: linear-gradient(@tofrom, @start, @end);
}

// top to bottom
.verticalGradient (@top: #ffffff, @bottom: #000000){
  background-color: @top;
  background: -webkit-linear-gradient(top, @top, @bottom);
  background: -moz-linear-gradient(top, @top, @bottom);
  background: -o-linear-gradient(top, @top, @bottom);
  background: -ms-linear-gradient(top, @top, @bottom);
  background: linear-gradient(to bottom, @top, @bottom);
}
.radialGradient (@shape:ellipse, @w:50%, @h:50%, @left:center, @top:center, @fg:white, @bg:transparent){
  background: radial-gradient(@shape @w @h at @left @top, @fg, @bg);
}

/* shade:
    #somediv {
      background-color: BADA55;
      .shade();
    }
*/
.shade (@alpha: 0.5){
  background: -webkit-linear-gradient(bottom, rgba(0,0,0,@alpha), rgba(0,0,0,0));
  background: -moz-linear-gradient(bottom, rgba(0,0,0,@alpha), rgba(0,0,0,0));
  background: -o-linear-gradient(bottom, rgba(0,0,0,@alpha), rgba(0,0,0,0));
  background: -ms-linear-gradient(bottom, rgba(0,0,0,@alpha), rgba(0,0,0,0));
  background: linear-gradient(to top, rgba(0,0,0,@alpha), rgba(0,0,0,0));
}
 

.box-sizing (@value:border-box){
  box-sizing:@value;
  -moz-box-sizing:@value;
  -webkit-box-sizing:@value;
  -ms-box-sizing:@value;
}

.rotate(@value:90deg){
  -webkit-transform: rotate(@value);
  -moz-transform: rotate(@value);
  -o-transform: rotate(@value);
  -ms-transform: rotate(@value);
  transform: rotate(@value);
}
///.scaleX(@value){
///  -webkit-transform: scaleX(@value);
///  -moz-transform: scaleX(@value);
///  -o-transform: scaleX(@value);
///  -ms-transform: scaleX(@value);
///  transform: scaleX(@value);
///}


.column-width(@value){
  column-width: @value;
  -moz-column-width: @value;
  -webkit-column-width: @value;
}

.column-gap(@value){
  column-gap: @value;
  -moz-column-gap: @value;
  -webkit-column-gap: @value;
}

.column-count(@value){
  column-count: @value;
  -moz-column-count: @value;
  -webkit-column-count: @value;
}

.placeholder(@color: rgba(0,0,0,.1)) {
  &:-webkit-input-placeholder { color: @color; }
  &::-webkit-input-placeholder { color: @color; }
  &:-moz-placeholder { color: @color; }
  &::-moz-placeholder { color: @color; }
  &:-ms-input-placeholder { color: @color; }
}
input{
  .placeholder( rgba(0,0,0,.3) );
}

.user-select(@value){
  -webkit-user-select: @value;
  -khtml-user-select: @value;
  -moz-user-select: @value;
  -ms-user-select: @value;
  -o-user-select: @value;
  user-select: @value;
}




// more here:
// https://gist.github.com/jayj/4012969
//
// flex | inline-flex
.display-flex(@display: flex) {
  display: ~"-webkit-@{display}";
  display: ~"-ms-@{display}box"; // IE10 uses -ms-flexbox
  display: ~"-ms-@{display}"; // IE11
  display: @display;
}
// <positive-number>, initial, auto, or none
.flex(@columns: initial) {
  -webkit-flex: @columns;
      -ms-flex: @columns;
          flex: @columns;
}
// nowrap | wrap | wrap-reverse
.flex-wrap(@wrap: nowrap) {
  -webkit-flex-wrap: @wrap;
      -ms-flex-wrap: @wrap;
          flex-wrap: @wrap;
}
// row | row-reverse | column | column-reverse
.flex-direction(@direction: row) {
  -webkit-flex-direction: @direction;
      -ms-flex-direction: @direction;
          flex-direction: @direction;
}

.flex-shrink(@n){
  -webkit-flex-shrink: @n;
      -ms-flex-shrink: @n;
          flex-shrink: @n;
}

.flex-basis(@val:auto){
  -webkit-flex-basis: @val;
      -ms-flex-basis: @val;
          flex-basis: @val;
}

/* fade use example:  { .fade(1s,0,1); } */
.fade(@rate, @from:0, @to:1) {
  .keyframes(fade-in, {
    0% { opacity: @from; }
    100% { opacity: @to; }
  });
  .animation(fade-in @rate ease-in-out);
}
.animation(@args){
  -webkit-animation: @args;
  -moz-animation: @args;
  animation: @args;
}
.keyframes(@name; @arguments) {
  @-moz-keyframes @name { @arguments(); }
  @-webkit-keyframes @name { @arguments(); }
  @keyframes @name { @arguments(); }
}


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





///.fadeout{
/// opacity: 0 !important;
/// transition: opacity .20s ease-in-out;
/// -moz-transition: opacity .20s ease-in-out;
/// -webkit-transition: opacity .20s ease-in-out;
///}
///.fadein{
/// opacity: 1 !important;
/// transition: opacity .15s ease-in-out;
/// -moz-transition: opacity .15s ease-in-out;
/// -webkit-transition: opacity .15s ease-in-out;
///}

@fadeOutTime: ~`CSS_FADE_TIME+"ms"`; // 500ms
@fadeInTime:  ~`CSS_FADE_TIME+"ms"`; // 250ms

.fadeout{
  pointer-events:none;
  opacity: 0 !important;
  transition: opacity @fadeOutTime ease-in-out;
  -moz-transition: opacity @fadeOutTime ease-in-out;
  -webkit-transition: opacity @fadeOutTime ease-in-out;
}
.fadein{
  opacity: 1 !important;
  transition: opacity @fadeInTime ease-in-out;
  -moz-transition: opacity @fadeInTime ease-in-out;
  -webkit-transition: opacity @fadeInTime ease-in-out;
}


.min-content-width{
  width: -moz-min-content;
  width: -webkit-min-content;
  width: min-content;
}

///.blink {
///  animation: blink 1s steps(5, start) infinite;
///  -webkit-animation: blink 1s steps(5, start) infinite;
///}
///@keyframes blink {
///  to { visibility: hidden; }
///}
///@-webkit-keyframes blink {
///  to { visibility: hidden; }
///}

// fix no scrolling on ios? not working
///.overflow-touch{
///  overflow-y:auto;
///  -webkit-overflow-scrolling: touch;
///  &:before {
///    content:””;
///    width: 1px;
///    float: left;
///    height: calc(100% + 1px);
///    margin-left: -1px;
///    display:block;
///  }
///  &:after{
///    content:””;
///    width: 100%;
///    clear: both;
///    display:block;
///  }
///}

///body.grimy:after{
///  content: "";
///  position: absolute;
///  left:0;
///  right:0;
///  top: 0;
///  bottom: 0;
///  z-index: @MAX_Z_INDEX;
///  pointer-events: none;
///  background: url("images/dirtypaperlight.png") repeat 0 0 transparent;
///}
body.grimy #main>.grime{
  position: fixed;
  left:0;
  right:0;
  top: 0;
  bottom: 0;
  z-index: @MAX_Z_INDEX;
  pointer-events: none;
  background: url("images/grime_paper_lite.png") repeat 0 0 transparent;
  //opacity: .75;
}
body.grimy #main>.grime.alt{
  background: url("images/grime_grid02.png") repeat 0 0 transparent;
}
body.grimy #main>.grime.altalt{
  background: url("images/grime_paper_grid2.png") repeat 0 0 transparent;
  opacity: .55;
}
body.grimy.debug #main > .grime {
  ///width: 75%;
  width: ~"calc(75% + 3px)";
  border-right: 1px dashed rgba(0,0,0,.25);
}

#autosaveSpinner{
  position:absolute;
  right:10px; top:10px;
  width:48px; height:48px;
  display:none;
  z-index:2;
}
body.autosave #autosaveSpinner{
  background:url("images/ui/busySpinner.gif") repeat 0 0 transparent;
  display:block;
}









//   *   *  *   *  * *  *   *  * * *   *  * * *  *    *  ???
//   *   *  *   *  *  *  *  *  *    *  *    *    *    *  
//   * * *  *   *  *  *  *  *  *    *  *    *     * * *  
//   *   *  *   *  *  *  *  *  *    *  *    *        *   
//   *   *   * *   *  *  *  *  * * *   *    *     * *    

// add avisible indicator of possible variable humidity levels?
///#viewOverlay:before {
///  position: absolute;
///  width: 100%;
///  height: 100%;
///  background: #77ddff;
///  z-index: 9999;
///  left: 0;
///  right: 0;
///  top: 0;
///  bottom: 0;
///  pointer-events: none;
///  content: " ";
///  opacity: .22;
///}






//(((((((     *       *  * * * * *  * * * * *  *   *   *  
// )))))))    *       *      *      *          *   *   *  
//(((((((     *       *      *      * * * * *  *   *   *  
// )))))))      *   *        *      *          *   *   *  
//(((((((         *      * * * * *  * * * * *  * * * * *  




#viewFrame{
  background-color: @appBackgroundColor; // fine
  overflow:hidden;

  // (fix for chrome on windows adding 3d bevel to border
  ///border-radius:1px;
  //
  border-radius:0px;
  // fix)
}



//)))    * * * * *  *       *  
//(((    *            *   *    
//)))    * * * * *      *      
//(((    *            *   *    
//)))    *          *       *  

///body.soft{
///  filter: blur(.045em);
///  -webkit-filter: blur(.045em);
///}
///body.firefox.soft{
///  filter: blur(.0125em)
///}

// for testing...1
///body.fx.ex{
///  #viewOverlay{
///    background:url("images/ui/vignetteDark.png") repeat center;
///    background-size: cover; // 100% 100% squishes it
///  }
///}

// disabled due to new App.fx
///body.fx{
///  #viewOverlay{
///    position:absolute;
///    left:0; top:0; right:0; bottom:0; width:100%; height:100%;
///    pointer-events:none;
///    background-position: center center;
///    background:url("images/ui/vignette.png") repeat center;
///    background-size: cover; // 100% 100% squishes it
///
///    // not working
///    ///-webkit-transition: background-image 1s ease-in-out;
///    ///transition: background-image 1s ease-in-out;
///  }
///}



body.backlight{
  #content:after{
    position:absolute;
    left:0; top:0; right:0; bottom:0; width:100%; height:100%;
    content:" ";
    pointer-events:none;

    ///background: linear-gradient(0deg, 
    ///  //rgba(255, 137, 68,.20) 0%, 
    ///  rgba(255, 137,   0, .20) 0%, 
    ///  rgba(255, 137,  68,   0) 40%, 
    ///  rgba(119,  85, 255,   0) 60%, 
    ///  rgba(119,   0, 255, .30) 100%);
    ///  //rgba(119, 85, 255,.20) 100%);
    background: linear-gradient(0deg, 
      rgba(255, 137,   0, .20) 0%,    // bottom
      rgba(255, 137,  68,   0) 40%, 
      rgba(119,  85, 255,   0) 60%, 
      rgba(119,   0, 255, .30) 100%); // top

    background-color: transparent;

    //opacity:.5;

  }
  ///#viewFrame{
  ///  box-shadow:0 0 20px 10px rgba(45, 15, 45, 0.65);
  ///  box-shadow:@viewShadow;
  ///}
}


//)))
//(((
//)))
//(((
//)))


// slow
///#view:after{
///  position:absolute;
///  left:0; top:0; right:0; bottom:0;
///  width:100%; height:100%;
///  background: url("images/ui/vignetteWhite.png") repeat 0 0 transparent;
///  background-size: 100%;
///  content:" ";
///  pointer-events: none;
///}



#main{      
  position:fixed;
  visibility:hidden;

  // old
  height:100%;
  width:100%;
  // new
  top:@safeAreaTop; 
  bottom:@safeAreaBottom; 
  left:@safeAreaLeft;
  right:@safeAreaRight;
  width:auto; height:auto;

  overflow: hidden;
  background-color: @uiBackgroundColor;
  .pixelated();

  >#header{
    text-align:center;
    padding:10px;

    padding:0px;
    height:0;
    // visibility hidden allows images to load in IE
    visibility:hidden;
  }
  >#content{
    .user-select(none);
    text-align:center;
    position:absolute;

    // old
    top:0; bottom:0; left:0;
    width:100%;height:100%;

    // new
    ///top:@safeAreaTop; 
    ///bottom:@safeAreaBottom; 
    ///left:@safeAreaLeft;
    ///right:@safeAreaRight;
    ///width:auto; height:auto;

    display: block;
    margin: auto;
    ///overflow: hidden; in recording mode causes main to scroll

    >#ui{
      position: absolute;
      display: block;
      width: 100%;height: 100%;
      vertical-align: middle;
      cursor:@cursorDefault;
    }
  }
}

#content>.loadingMessage{
  display:none;
}
#content.loading>.loadingMessage{
  background-color: #333;
  color: #555;
  border: 1px solid #393939;
  border-radius: 2px;
  font-size: 1.25em;//12pt;
  padding: 0.5em 1em;
  pointer-events: none;
  z-index: 0;
  box-shadow:0 0 20px 10px rgba(11, 11, 11, 0.1);
  display:block;
  .center(absolute);
  line-height: normal;
}



@viewFrameBorderColor: #d0d6db; // #bebebe; // #d8dcd0; // #cbdcdb;



body.filter #view{
  filter: contrast(1.1) brightness(1.1);
}

// ~ ~ ~ ~ ~ ~ ~ ~ ~ 
#viewFrame{
  display:inline-block;
  

  // fix for chrome on windows adding 3d bevel to border
  ///border-width: 0;
  ///padding: ux(2);
  ///background-color: #bebebe;
  //
  border:ux(2) solid @viewFrameBorderColor;
  // fix)

  box-shadow:@viewShadow;
  z-index:2;
  > #view{
    position:relative;
    overflow:hidden;
    visibility:hidden;
    background-color:@viewBackground;
  }
}
///body.inactive #viewFrame
body.blurred #viewFrame{
  // fix for chrome on windows adding 3d bevel to border
  ///background-color: #666;
  //
  border-color:#666;
  // fix)
}

body.drag_png.blurred #viewFrame,
body.drag_png #viewFrame{
  border-color:@selectYellow;
}





// optimization? force canvas to its own gpu layer
///#onscreen{
///  transform: translateZ(0);
///  will-change: transform;
///}





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


@veryLtShadow: 0 0 15px  0px rgba( 0,  0,  0, 0.45);
@ltShadow:     0 0 20px 5px rgba(35, 25, 35, 0.4);
@midShadow:    0 0 30px  5px rgba(45, 15, 45, 0.50);
@dkShadow:     0 0 20px 10px rgba(45, 15, 45, 0.55);
@veryDkShadow: 0 0 20px 10px rgba(45, 15, 45, 0.65);

@viewShadow:   @veryDkShadow;
@toolbarShadow:@midShadow;
@dialogShadow: @ltShadow;
@tooltipShadow:@veryLtShadow; 
@popupShadow:  @veryLtShadow;




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



@slot : ux(18);



// ~ ~ ~ ~ ~ ~ ~ ~ ~ rightPanel

#rightPanel{
  position:absolute;
  right: 0; top: 0;
  width: ux(20); height: 100%;
  text-align: left;
  opacity:0;
}
#rightToolbar{
  position:absolute;
  border-radius:@radius 0 0 @radius;
  display: inline-block;
  ///background-color:#868686;
  background-color:@rightToolbar; // LIGHTER UI COLORS
  ///background-color: #8f9593;// LIGHTER UI COLORS
  padding:0 ux(1);
  .box-sizing(border-box);
  box-shadow:@toolbarShadow;
  z-index:1;

  >.pauseButton.on{
    background-color:#d04;
    background-color:#f25;
  }
  >.pauseButton{
    ///background-color:#4b6;
    ///background-color:#0c6;
    ///background-color:#0d6;
    background-color:@buttonGreen;
    ///background-color:#00d270;
  }
  >.ImageButton{
    border-radius:@radius;
    padding:ux(1);
    margin: ux(1) ux(1) 0 0;
    vertical-align: top;
  }
}

///body:not(.touch) #rightToolbar > .ImageButton:hover {
///  background-color: #aaaaaa;
///}


.portrait{
  #rightPanel{
    top:0;  white-space: nowrap;
    width: 100%; height: ux(20);
  }
  #rightToolbar{
    border-radius:0 0 @radius @radius;
  }
  .Toolbelt{
    border-radius:@radius @radius 0 0;
  }
}

///body.touch #rightToolbar>.ImageButton:hover{
///  background-color:#868686;
///}
///body.touch #rightToolbar>.pauseButton.ImageButton.on:hover{
///  background-color:#d04;
///  background-color:#f25;
///}

.HeartIcon.SpriteIcon{
  vertical-align:top;
  padding:ux(1);
  margin: ux(1) ux(1) 0 0;
  >.badge{
    display:none;
  }
}


#content > .fullscreenButton{
  position: absolute;
  bottom: 0;
  right: 0;
  z-index: 0;
  ///opacity: 0.4; // 0.15;
  opacity: 0.8;
  mix-blend-mode: luminosity;
}

body.mouse #content > .ImageButton.Button.fullscreenButton:hover {
  background-color: rgba(255,255,255,0);
  ///opacity: .85; // .4;
}



.debugButton{
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 0;
  opacity: 0.15;
}
body.mouse .ImageButton.Button.debugButton:hover {
  background-color: rgba(255,255,255,0);
  opacity: .4;
}


// = = = = = = =





// ~ ~ ~ ~ ~ ~ ~ ~ ~ left Toolbelt

.Toolbelt{
  position:absolute;
  border-radius:0 @radius @radius 0;
  text-align: left;
  overflow:hidden;
  background-color:@toolbarGray;
  box-shadow:@toolbarShadow;
  z-index:1;
  opacity:0;

  >.Button.toggleButton{
    background-color:@toolbarGray;
    transition: background-color 200ms ease;

    &.mousedown > canvas {
      margin-right: ux(-1);
    }
    ///&:hover {
    ///  ///background-color: #aaa;
    ///  background-color: transparent !important;
    ///}
    &.mousedown{
      background-color: #999 !important;
      transition: background-color 200ms ease;
    }
  }
  >.Toolbar{
    position:absolute;
    left:ux(1);top:ux(1);
    z-index:0;
    >.slot{
      position:absolute;
      // swap border width because the other way
      // allows dropping of piles onto hidden columns
      // since 1 ux of their border will be showing
      border-width: 0 ux(1) ux(1) 0;
    }
  }
}

body.mouse .Toolbelt>.Button.toggleButton:hover {
  ///background-color: #aaa;
  background-color: transparent !important;
}




#rightToolbar>.ImageButton.mousedown,
body.mouse #rightToolbar>.ImageButton.mousedown:hover{
  ///background-color: @buttonGreen;
  background-color: #ddd;
}

.Toolbelt.expanded{
  z-index:2;
  box-shadow:@toolbarShadow;

  >.toggleButton > canvas{
    .rotate(180deg);
  }
}
.portrait .Toolbelt>.toggleButton>canvas{
  .rotate(-90deg);
}
.portrait .Toolbelt.expanded>.toggleButton>canvas{
  .rotate(90deg);
}


.Toolbar > .slot > .key {
  position: absolute;
  padding: 0 .3em;
  z-index: 1;
  background-color: @toolbarGray;
  color: @toolbarItem;
  font-weight: normal;
  font-size:.75em;
  border-radius:0 0 @radius 0;
  pointer-events:none;
}

.Toolbelt.merge>.Button.toggleButton,
body.mouse .Toolbelt.merge>.Button.toggleButton:hover{
  background-color: #ddd !important;
}





//   (((((((      *       *  * * * * *       ((((((( 
//    )))))))     *       *      *            )))))))
//   (((((((      *       *      *           ((((((( 
//    )))))))     *       *      *            )))))))
//   (((((((       * * * *   * * * * *       ((((((( 




///#clickToBegin {
///  position: fixed;
///  left: 0; top: 0;
///  right: 0; bottom: 0;
///  text-align: center;
///  vertical-align: middle;
///  font-size: 24pt;
///  font-weight: normal;
///  line-height: 100vh;
///  letter-spacing: 3px;
///  background: #000a;
///  color: #fff;
///  text-shadow: 0px 0px 30px #fff3;
///  .fade(.3s,0,1);
///}
#clickToBegin {
  position: fixed;
  left: 0; top: 0;
  right: 0; bottom: 0;
  text-align: center;
  vertical-align: middle;
  font-size: 24pt;
  font-weight: normal;
  line-height: 100vh;
  letter-spacing: 3px;
  background: #000a;
  color: #fff;
  text-shadow: 0px 0px 30px #fff3;
  z-index: 99999;
  .fade(.3s,0,1);
}
#clickToBegin > b {
  background: url("images/ui/muted.png") no-repeat center transparent;
  width: 100%;
  height: 100%;
  display: block;
  opacity: .6;
}
#clickToBegin >b>i{
  display: none;
}




// ~ ~ ~ ~ ~ Buttons

.Button{
  cursor:@cursorPointer;
  border:ux(1) solid #ccc;
  border-radius:@radius;
  padding:.3em .6em;
  margin:ux(1);
  display:inline-block;
}
.Button.mousedown{
  background-color:#eee;
}
///.Button:hover{
///  background-color:@selectYellow;
///}
///body:not(.touch) .Button:hover{
///  background-color:@selectYellow;
///}
//////body.touch .Button:hover{
//////  // auto is invalid but this seems to override hover
//////  // styles correctly, unset does not work
//////  background-color:unset; 
//////}

/*~* causes some elements to get the incorrect bkg color/
/*~* /
body.touch .Button:hover{
  background-color:initial;
}
/*~* /
body:not(.touch) .Button:hover{
  background-color:@selectYellow;
}
/*~*/

body.touch .Button:active{
  background-color:@selectYellow;
  color:#333;
}
.Button.disabled{
  opacity:.5;
  pointer-events:none;
}


.ImageButton.Button{
  border:0;
  border-radius:0;
  display:inline-block;
  margin:0; padding:0;
  background-color:transparent;
  vertical-align: top;
}
.ImageButton > canvas{
  vertical-align:top;
}
.ImageButton.mousedown:not(.dragging) > canvas{
  margin-top:ux(1);
  margin-left:ux(1);
}


body.touch .ImageButton.Button:active{
  background-color:@selectYellow;
  color:#333;
}




.fogLeft{
  position:absolute;
  height:100%;
  left:0;
  //filter: hue-rotate(180deg);
  filter: hue-rotate(60deg);
}
.fogRight{
  position:absolute;
  height:100%;
  right:0;
}
.fogRight, .fogLeft {
  .pixelated();
}

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

// ~ ~ ~ ~ ~ ~Dialog

@dlgHeaderH:ux(11);
@dlgContentY:ux(11);
@windowBtnAlign: ~` (System.os=='windows') ? 'right':'left' `;


body.touch .Dialog > .header > .ImageButton:hover {
  background-color: #f3f3f3;
}


body.touch .Dialog > .touchArea {
  ///position: absolute;
  ///width: 100%;
  ///height: 100%;
  ///top: 0;
  ///left: 0;
  ///margin: -3px;
  ///padding: 3px;
  ///// testing
  //////background-color: #f007;
  ///margin: ux(-2);
  ///padding: ux(2);
  ///background-color: rgba(0, 0, 0, 0.05);
  ///z-index: -1;
  ///border-radius: ux(2);
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  margin: ux(-1);
  background-color: transparent;
  border: ux(1) solid rgba(0, 0, 0, 0.05);
  z-index: -1;
  border-radius: ux(2);
}
body.touch .Dialog{
  // make visible to allow touchArea
  overflow:visible;
}

.ExportDialog.Dialog{
  display: table;
}




body.mouse .Dialog.headerEmpty > .header:hover{
  background-color:rgba(0,0,0,0);
}

body.mouse .Dialog.header> .ImageButton:hover{
  background-color:#ccc;
}


body.mouse .Dialog > .header > .closeButton:hover {
  background-color: #eaeaea;
}


.Dialog canvas{
  vertical-align: top;
}

.Dialog{
  // body elements with padding require pos: fixed
  ///position:absolute;
  position: fixed;
  z-index:9999;
  left:0; right:0;
  width:25em;
  border-radius:@radius;
  cursor:@cursorDefault;
  box-shadow:@dialogShadow;
  //background-color:transparent;
  background-color:#fff;
  border:1px solid #555;
  border:0;
  overflow:hidden;
  // show/hide switches this to block!
  ///display:inline-table;
  display:block;

  &.headerEmpty > .header{
    background-color:transparent !important;
    width: 100%;
    max-width: 100%;
    z-index: 1;
    position: absolute;
    height:@dlgHeaderH;
    padding:ux(1);
    .box-sizing(border-box);
    ///&:hover{
    ///  background-color:rgba(0,0,0,0);
    ///}
    > .closeButton{
      opacity:.8;
    }
  }
  &.headerEmpty > .content > .message{
    padding-left:~`(App.uiScale*8)+'px'`; 
    padding-right:~`(App.uiScale*6)+'px'`; 
  }

  // header active
  &.active > .header{
    background-color:#f5f5f5;
    color:#555;
  }

  // header default
  >.header{
    background-color:#f5f5f5;
    color:#555;
    height:@dlgHeaderH;

    min-height: @dlgHeaderH; // nwjs 12 fix

    padding:ux(1);
    line-height:ux(9); 
    border-radius:@radius @radius 0 0;
    cursor:@cursorMove;
    text-align:left;
    .box-sizing(border-box);
    > .ImageButton{
      .verticalGradient (rgba(0,0,0,0.12), rgba(0,0,0,0.08));
      border-radius:@radius;
      ///&:hover{
      ///  background-color:#ccc;
      ///}
    }
    > .title{
      margin:0;
      position:relative;
      top:1px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      font-size:ux(7);
    }
  }
  > .content{
    // cannot make this absolute because we auto-fit dialog content
    position:relative;
    left:0; right:0;
    bottom:0;
    padding: .5em 1em 1em 1em;
    overflow-y:auto;
    -webkit-overflow-scrolling: touch;
    .box-sizing(border-box);
    width:100%;

    .message{
      padding: ux(2) ux(3) ux(3) ux(3);
    }
  }

}

.Dialog>.footer {
  padding: .75em 0;
  position: relative;
  border-top: 1px solid rgba(0,0,0,.1);
  text-align: center;
}

// mac
.Dialog > .header{
  > .closeButton{
    float:left;
    margin:0 ux(2) 0 0;
  }
  > .title{
    margin:0;
  }
}
// win
.windows .Dialog > .header{
  padding-left:10px;
  > .closeButton{
    float:right;
    margin:0 0 0 ux(2);
  }
  > .title{
    margin:0;
  }
}


.dismissArea{
  background-color:#222;
  opacity:.4;
  .user-select(none);
}



.Dialog.disabled{
  pointer-events:none;
}



#quitDialog {
  min-width: 22em;
}



.NotepadDialog .wrapper{
  height:100%;
}

// ~ ~ ~ ~ ~ ~ConfirmDialog



.ConfirmDialog.Dialog{
  outline:0;
  background-color:#fff;
  max-width:@smallSize; // 32em;
  max-height: 95%;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;

  // !important on display overrides jQ hide
  ///display: flex !important;

  ///display: flex;
  ///flex-direction: column;
  .display-flex();
  .flex-direction(column);

  &:focus{
    background-color:#fff;
  }
  >.header>.closeButton{
    display:none;
  }
  >.content{
    padding: 0;
    text-align: center;

    ///display: flex;
    ///flex-direction: column;
    .display-flex();
    .flex-direction(column);

    .flex-shrink(10); // nwjs 12 fix

    >.message{
      color: #333;
      font-size: 1em;
      padding: 1.5em 1.5em 1.75em 1.5em; // small, medium
      text-align:center;
      display:block;

      ///flex: 1;
      .flex(1);
      
      .wrapper{
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        vertical-align: top;
        margin: 0;
        background: none;
        border: 0;
        // so that things like genes don't scroll-x
        // may break other design, not important!
        max-width: 100%;
        word-wrap: break-word;
        max-height: ux(150);
        height: 100%;

        ///flex: 1;
        .flex(1);

        display:inline-block;
        ///text-align:center;
      }
    }
  }
  >.footer>.Button{
    border:0;
    vertical-align: middle;
    text-align:left;
    margin:ux(1);
    min-width: 3em;
    text-align: center;

    // russian fix
    max-width: 60%;

    &.yes{
      background-color:@selectYellow;
      // darken edges
      box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.05);
      ///box-shadow: inset 0 0 10px rgba(255, 99, 0, 0.1);

      &.mousedown{
        background-color:#dc3;
      }
    }
    &.no{
      background-color:#e5e5e5;
      &.mousedown{
        background-color:#bbb;
      }
    }
    &.disabled{
      background-color:#ebebeb;
      color:#bbb;
      opacity:1;
    }
  }
}

// large
.ConfirmDialog.Dialog.large > .content > .message{
  ///padding: 1.5em .75em 1.75em 1.5em;
  padding-right: .75em;
  text-align: left;
}



.ok.Dialog > .footer {
  border-top: 0;
  margin-top: -1em;
}


// ~ ~ ~ ~ ~ ~help Dialog

#helpDialog .wrapper{
  height: 100%;
  position: absolute;
  width: 100%;
}

#helpDialog > .content:before {
  background: url("images/checker_spinner.gif") repeat-x scroll 18px 47% transparent;
  content: " ";
  position: absolute;
  width: 50%; height: 70px;
  left: 25%; top: 42%; right: 25%;
  opacity: 0.35;
}
#helpDialog em{
  font-style: normal;
  font-weight: bold;

  line-height: .9em;
  ///line-height: 11pt;
}
#helpDialog{
  width:ux(175); max-width:95%;
  max-height:90%;
  min-height: 85%;
  // needed for ie
  height: 85%;
  .display-flex() !important;
  .flex-direction(column);
  ///display: flex !important;
  ///flex-direction: column;
  ///-webkit-flex-direction: column;
  ///display: -webkit-flex !important;
  > .header{
    .flex(none);
    ///flex:none;
    ///-webkit-flex:none;
  }
  > .content{
    padding:0;
    word-wrap: break-word;
    overflow-wrap: break-word;
    background-color:#fff;

    .flex(auto);
    ///flex:auto;
    ///-webkit-flex:auto;

    // needed for opera flex
    min-height:calc( 100% - ux(9) );

    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    >.container>.wrapper>.scroller{
      ///height: 100%;
      >.output{
        position: relative;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        ///padding: 1em 1em 1.5em 1em;
        padding: 1em 1.25em 3em 2em;
        text-align: left;

        ///> ul{
        ///    padding-left: 0;
        ///}

        li{
          padding-bottom: 0.6em;
          ///text-indent: 1em;
        }
        b{
          background-color: #cbf5ff;
          padding: 0 3px;
        }
        // Xerox lite color scheme
        background-color: #fff;
        color: #333;
        h1{
          font-size: 1.7em;
          color: #444;
          margin: .5em 0 0 0;
          line-height: 1.2em;
        }
        h2{
          color: #444;
          margin: 0;
            line-height: 1.1em;
        ///  background-color: #fff555;
        ///  color: #000;
        ///  padding: ux(1);
        }
        h3{
          font-size: 1.3em;
        }
        h4 {
          font-weight: bold;
          font-size: 1.1em;
        }
        strong,a{
          color: #222;
          background-color: #fff555;
          border: 1px solid #fff555;
          border-width: 0 ux(1);
          font-weight: normal;
        }
        a{
          background-color: #ffcccc;
          border-color: #ffcccc;
        }
        //
      }
      >.markdown{
        display: none;
      }
      &.loading>.output{
        display: none;
      }
    }
  }
}


.ConfirmDialog .scrollable>p:last-child {
  margin-bottom: 0;
}



// attempt to fis touch bug where scrolling on first load makes content disappear
#helpDialog.loading .container {
  opacity: .01;
  pointer-events: none;
}

// (help Dialog EDITABLE
///#helpDialog.editable{
///  padding-bottom: 12px;// to allow for thumb
///  background-color:#fff;
///  ///resize:both;
///  ///>*{ resize:none; }
///  >.content > .container{
///    height:100%;
///    >.output{
///      overflow-y: auto;
///      padding: 1em 1em 3em 1em;
///      text-align: left;
///      height: ~"calc(70% - 4em)"; // minus padding
///    }
///    >.markdown{
///      ///padding: 5px 10px 0;
///      ///width: ~"calc(100% - 20px)";// minus padding
///      ///height: ~"calc(25% - 10px)";// minus padding
///      ///position: fixed;
///      ///left: 0; bottom: 0;
///      ///display: block;
///      ///border-color: #ccc;
///      ///border-width: 2px 0 2px 0;
///      ///font:ux(3.5) "DejaVu Sans Mono";
///      ///z-index: 999;
///      ///resize: none;
///      ///color:#295852;
///      ///background-color: #dff;
///      ///&:focus{
///      ///  background-color:#ffd;
///      ///}
///    }
///  }
///}

#helpDialog > .markdown{
  padding: 5px 10px 0;
  width: 100%;
  box-sizing: border-box;
  height: 25%;
  position: absolute;
  bottom: 0px;
  display: none;
  border-color: #ccc;
  border-width: 2px 0 2px 0;
  font: 9pt "DejaVu Sans Mono";
  resize: vertical;
  color: #295852;
  background-color: #dff;
  &:focus{
    background-color:#ffa;
  }
}
#helpDialog.editable > .markdown{
  display: block;
}
#helpDialog.editable >.content{
  padding-bottom: 30%;
}

// EDITABLE)

ul{
  padding-left: 20px;
}
#helpDialog > .content > .container > .output li:last-child,
#helpDialog > .content > .container > .output .upcoming li {
  padding-bottom: 0;
}




// ~ ~ ~ ~ ~ ~AvatarDialog


.AvatarDialog.Dialog{
  width:ux(140);
  height:ux(133);
  background-color:#b3b3b3;

  // THIS IS A FIX FOR CHROME BUG
  // inline-table causes canvas larger than 
  // 228x288 to not display !!!
  display:inline-block;

  // content
  > .content{
    position:absolute;
    top:@dlgContentY;
    width: auto;
    left:0;right:0;
    overflow: hidden;
    .gradient(to right, #ccc, #dfdfdf);
  }
}

// randomize button
.AvatarDialog > .content > .randomize.Button {
  background-color: transparent;
  z-index: 9999;
  position: absolute;
  bottom: ux(2);
  right: ux(2);
  border-radius: 2px;
}
body.windows .AvatarDialog > .header > .randomize.Button {
  right: ux(11);
}


// choose control

body.mouse .AvatarDialog.Dialog > .content > .choose >.group >.ImageButton:hover{
  background-color:transparent;
}


body.mouse .AvatarDialog.Dialog > .content > .choose > .group > .spinner > .ImageButton:hover{
  background-color:transparent;
}


.AvatarDialog.Dialog > .content > .choose{
  //width:ux(22);
  width: 100%;
    box-sizing: border-box;

  position:absolute;
  top:0; left:0;
  padding:ux(2) ux(2);
  line-height:0;
  .gradient (to right, #aaa, transparent);
  >.background{
    position:absolute;
    left:0;
    top:ux(1);
    width:ux(21);
    height:ux(67);
    background-color:#888;
    display: none;
  }
  >.background.bottom{
    bottom:ux(1);
    top:auto;
    height:ux(50);
    background-color:#888;
    display: none;
  }

  // buttons
  >.group >.spinner{
    position:relative;
    display:block;
    margin-bottom:ux(1);
    width:ux(22);
    ///>.ImageButton:hover{
    ///  background-color:transparent;
    ///}
  }
  >.group >.ImageButton{
    position:relative;
    left:0;
    //display:inline-block;
    display:block;
    z-index:2;
    vertical-align: middle; // removes false margin
    margin-bottom:ux(1);
    ///&:hover{
    ///  background-color:transparent;
    ///}
    &.mousedown{
      z-index:0;
      // these can move the click area out from under the pointer
      /// top:ux(1);
      /// left:ux(1);
      // 
      border-top: ux(1) solid transparent;
      border-left: ux(1) solid transparent;
      margin-right: ux(-1);
      margin-bottom: 0;
    }
    &.p.mousedown{
      left:ux(1);
    }
    &.n.mousedown{
      left:~`-(App.uiScale)+'px'`;
    }
    &.mousedown>canvas{
      margin:0;
    }
    &:last-child{
      margin-bottom:0;
    }
  }
}
// fix ie & o 1px SE active button shift 
body.opera .AvatarDialog.Dialog > .content > .choose >.group > .ImageButton.mousedown:hover>canvas,
body.ie .AvatarDialog.Dialog > .content > .choose >.group > .ImageButton.mousedown:hover>canvas{
  margin:-1px 0 0 -1px;
}

// preview
.AvatarDialog.Dialog > .content > .preview{
  position:absolute;
  top:~`(6 * App.uiScale)+'px'`;
  left:~`(30 * App.uiScale)+'px'`;
  display:block;
  top:~`(10 * App.uiScale)+'px'`; // TEMP
}

// revert
.AvatarDialog.Dialog > .content > .revert{
  position:absolute;
  bottom:~`(5 * App.uiScale)+'px'`;
  left:~`(70 * App.uiScale)+'px'`;
  ///&:hover{
  ///  background-color:transparent;
  ///}
  display:none; // TEMP
}
body.mouse .AvatarDialog.Dialog > .content > .revert:hover{
    background-color:transparent;
  }

body.touch .AvatarDialog .ImageButton.Button:active {
  background-color: transparent;
}






// == == == 0.29 PREVIEW SHADOW
.preview.clickable:after {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  display: block;
  right: 0;
  bottom: 0;
  content: " ";
  background: radial-gradient(ellipse at center, rgba(0,0,0,0) 0%,rgba(0,0,0,0) 40%,rgba(0, 33, 55, 0.10) 100%);
}
#AnalyzerDialog > .content >.wrapper>.scroller> .specimen > .data > .preview {
    background-color: #fff !important;
}
#AnalyzerDialog.xrayable > .content >.wrapper>.scroller> .specimen > .data > .preview{
  cursor:@cursorCircle;
}
// == == ==



// ~ ~ ~ ~ ~ ~ContainerDialog

.ContainerDialog{
  display:inline-block;
  // remove round corner halos:
  background-color: transparent;
}
.ContainerDialog > .content{
  position:relative; top:0;
  background-color:@toolbarGray;
  padding:0;
  text-align:left;
}

.ContainerDialog > .content > .Toolbar{
  display: inline-block;
  overflow: hidden;
  position: relative;
  text-align: left;
  top: 0;
}



//  * * * * *  *       *  *  *          * * * *    
//  *       *  *       *  *  *          *       *  
//  * * * *    *       *  *  *          *       *  
//  *       *  *       *  *  *          *       *  
//  * * * * *  * * * * *  *  * * * * *  * * * *    
//
//  ~build


// padding x2, +1 for toolbar missing btm/right margin
@workspaceHeight:ux(18+8+8+1+1);
@getMoreRecipesHeight:ux(10);
@workspaceAndGetMoreHeight:ux(10+18+8+8+1+1);

#main.missingRecipes .BuildingDialog>.content>.recipes{
///#main.vilmonic_architect_recipes_false .BuildingDialog>.content>.recipes,
///#main.vilmonic_tooluser_recipes_false .BuildingDialog>.content>.recipes{
  height: calc(~"100%" - @workspaceAndGetMoreHeight);
}
.BuildingDialog .getMoreRecipes{
  display: none;
}
#main.missingRecipes .BuildingDialog .getMoreRecipes{
///#main.vilmonic_architect_recipes_false .BuildingDialog .getMoreRecipes,
///#main.vilmonic_tooluser_recipes_false .BuildingDialog .getMoreRecipes{
  display: block;
}


// Steam & Itch until DLC is ready
body.desktop #main.missingRecipes .BuildingDialog .getMoreRecipes{
  display: none;
}



// disable hover highlight
///body.mouse .BuildingDialog .ListComponent > .category.listItem:hover{
///  background-color: #d0d2d4 !important;
///}
///body.mouse .BuildingDialog .listItem:nth-child(even):hover{
///  background-color: #f5f5f5 !important;
///}
///body.mouse .BuildingDialog .listItem:nth-child(odd):hover{
///  background-color:#f5f5f5 !important;
///  background-color:#fff !important;
///}
///body.mouse .BuildingDialog .listItem.selected:hover{
///  background-color:@selectYellow !important;
///}




.BuildingDialog{
  width:ux(124);
  height:80%;
  max-height: ux(250);

  >.content{
    padding:0;
    height: calc(~"100%" - @dlgHeaderH ~"+ 1px");
    overflow: hidden;

    >.recipes {      
      .box-sizing(border-box);
      border-top:ux(1) solid #ddd;
      border-bottom:0;
      background-color: #ddd;
      width: 100%; 
      min-height: ux(18);
      ///max-height: ux(18*8);
      height: calc(~"100%" - @workspaceHeight);
      position: relative;
      overflow-y:auto !important;
      -webkit-overflow-scrolling: touch;

      ///.Button {
      ///  &:hover,&:active,&.mousedown{
      ///    background-color: unset;
      ///    ///background-color: @selectYellow;
      ///  }
      ///  border: 0;
      ///  padding: 0;
      ///}

      .ListComponent>.listItem{
        height: ux(18);
        text-align:left;
        cursor:@cursorDefault;
        ///// disable hover highlight
        ///&:hover{
        ///  background-color:#fff !important;
        ///}
        ///&:nth-child(odd):hover{
        ///  background-color:#f5f5f5 !important;
        ///}
        ///&.selected:hover{
        ///  background-color:@selectYellow !important;
        ///}
        // 
        >.ingredients{
          display:inline-block;
          padding:ux(1) 0 0 ux(9);
          width:ux(90-1);
          >.Icon,>.emptyItem{
            margin: 0 ux(2) 0 ux(1);
            cursor:@cursorDefault;
            width:ux(16);
            height:ux(16);
            display: inline-block;
            vertical-align: top;
          }
        }
        >.product{
          display:inline-block;
          position:absolute;
          left:ux(90);
          right:0; 
          background-color:rgba(0,0,0,.07);
          display: inline-block;
          text-align: center;
          padding:ux(1);
          >.Icon{
            cursor:@cursorDefault;
          }
          padding-left:ux(2);
        }
      }
    } /// recipes
    .workspace{
      height: @workspaceHeight;
      padding:ux(8);
      .box-sizing(border-box);
      white-space:nowrap;
      background-color: @toolbarGray;
      .ingredients {
        display: inline-block;
      }
      .buildButton{
        display: inline-block;
        width: ux(8); height: ux(10);
        padding:ux(4) 0;
        vertical-align: middle;
        &.disabled{
          opacity:1;
          ///&:hover{
          ///  background-color:transparent;
          ///}
        }
      }
      .product{
        display: inline-block;

        // fix to make workspace centered
        margin-right: ux(1);

      }
    } /// workspace
  }
}

body.mouse .BuildingDialog .buildButton.disabled:hover{
  background-color:transparent;
}

.BuildingDialog.blink .buildButton{
  background-color: @workspaceGray;
}



.BuildingDialog > .content > .recipes .ListComponent > .listItem.category {
  height: auto;
  text-align: center;

  ///background-color: #d0d2d4;///#c5c5c5;
  ///color: #808284;///#808080;

  background-color: #444;
  color: #aaa;
}
.BuildingDialog .ListComponent > .listItem.category > .title{
  display: inline-block;
  padding: .2em .5em;
  ///background-color: #555;
  ///color: #eee;
}
.BuildingDialog .ListComponent > .listItem.category.basic {
  display: none;
}



///.Component.Button.clickable.grayed.listItem {
///  filter: grayscale(1);
///  ///filter: grayscale(1) contrast(0.75) sepia(1) hue-rotate(425deg) saturate(1); 
///}




// DEMO
.recipes .listItem.grayed:after {
  content: " ";
  position: absolute;
  width: 100%;
  height: 100%;
  ///background-color: #aeb8c2;
  background-color: #0f5;
  left: 0;
  opacity: .4;
  pointer-events:none;
}
///.recipes .listItem.grayed{
///  cursor:@cursorPointer !important;
///  opacity: .5;
///  filter: brightness(0.75);
///}


// alt of above
///.recipes .listItem.grayed:before {
///  content: " ";
///  position: absolute;
///  width: 100%;
///  height: 100%;
///  ///background-color: #aeb8c2;
///  background-color: #0f5;
///  left: 0;
///  opacity: .4;
///  pointer-events:none;
///}
///.recipes .ListComponent > .listItem.grayed .Icon {
///  opacity: .6;
///}

.BuildingDialog > .content > .recipes{
  overflow-x:hidden;
}



///.BuildingDialog > .content > .recipes .ListComponent > .listItem.grayed > .ingredients > .Icon, 
///.BuildingDialog > .content > .recipes .ListComponent > .listItem.grayed > .ingredients > .emptyItem,
///.BuildingDialog > .content > .recipes .ListComponent > .listItem.grayed > .product > .Icon{
///  cursor:@cursorPointer !important;
///}


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


//^ TestIScroll (
///// DEBUG REMOVE
///.TestIScroll{
///  position: fixed;
///  background: #fa0;
///  z-index: 999;
///  left: 30px;
///  top: 30px;
///  padding:1em;
///  border:2px solid #f50;
///}
///
///.TestIScroll .wrapper {
///  position: relative;
///  background: #0af;
///  height: 150px;
///  overflow:auto;
///  border:2px solid #06a;
///  box-sizing:border-box;
///}
///
///.TestIScroll .list {
///  position: relative;
///  background: #eee;
///  color:#333;
///  padding:1em 2em;
///  border:2px solid #444;
///  box-sizing:border-box;
///}
///.TestIScroll .list:active {
///  background: #ccc;
///}
//^ TestIScroll )


.SaveDialog.loading .content > .wrapper:before {
  background: url("images/checker_spinner.gif") repeat-x scroll 0 0 transparent;
  content: " ";
  position: absolute;
  height: 9px;
  left: 25%;
  top: 50%;
  right: 25%;
  opacity: 0.35;
  filter: contrast(1.5);
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%); 
  transform: translateY(-50%);
}



// nwjs 12 fix
// breaks toucharea!
///.SaveDialog{
///  overflow-y: hidden !important;
///}


.SaveDialog{
  ///width:ux(120) !important;
  width:@smallSize !important;
  height: 30.3em;


  >.content{
    text-align: center;
    overflow-x: hidden;

    // nwjs 12 fix
    overflow-y: hidden;

    //flex:10;

    .emptyMessage{
      position: absolute;
      display: block;
      visibility: hidden;
      opacity: 0.35;
      text-align: left;
      //` z-index:1; // causes text to overlay list in ios
      z-index:0;

      padding: 0 1em;
      line-height: 2.5em;
    }
    >.wrapper{
      min-height: 2.5em;
    }
    .message{
      .flex-shrink(0) !important; // nwjs 12 fix
      .flex(unset) !important;    // nwjs 12 fix
    }
    .wrapper{
      position:relative;
      background-color: #e5e5e5;
      margin:0;
      padding: 0;
      ///max-height: ux(65);///15em;
      overflow-y: auto;
      -webkit-overflow-scrolling: touch;
      text-align: left;
      border:ux(1) solid #ddd;
      border-width:ux(1) 0;

      overflow-x: hidden;

      .flex-shrink(100); // nwjs 12 fix

      >.listItem{
        z-index:2;
      }
    }
  }
}

.SaveDialog .listItem > .content > .age {
  position: absolute;
  right: ux(22);
  text-align: right;
  ///opacity: .4;
  padding-left: .2em;
  padding-right: .2em;
  font-family: monospace;
  ///background: #e4e4e4;
  color:#9aa;
  font-size: 0.7em;
}

.SaveDialog.empty .emptyMessage{
  visibility: visible;
}

.SaveDialog > .footer {
  border: 0;
}

.SaveDialog.ConfirmDialog.Dialog > .header > .closeButton {
    display: block;
}

body.mouse .listItem>.content>.delete:hover{
  background-color:#ff435a;
}

// used for lists outside of SaveDialog!
.listItem.selected,
body.mouse .listItem.selected:hover{
  background-color:@selectYellow !important;
  color:#000;
}

body.mouse{
  .SaveDialog .listItem:hover, 
  .SaveDialog .listItem.highlighted{
    background-color: #ddd !important;
  }
}

.listItem{
  position:relative;
  background-color: #eaecee;
  border: 0 none;
  display: block;
  margin: 0;
  padding: 0;
  color:#888;
  border-radius:0;
  ///&.selected,
  ///&.selected:hover{
  ///  background-color:@selectYellow !important;
  ///  color:#000;
  ///}
  &.highlighted{
    background-color:#ddd !important;
  }
  &:nth-child(odd){
    background-color: #f0f4f5;
  }
  >.content{
    overflow: hidden;
    white-space: nowrap;
    height:ux(9);

    text-align: left;

    >span{
      .box-sizing(border-box);
      display:inline-block;
      height:ux(9);
      line-height:ux(9);
      vertical-align: middle;
      overflow: hidden;
    }
    >.delete{
      position: absolute;
      right: 0;
      ///&:hover{
      ///  background-color:#ff435a;
      ///}
    }
    >.name{
      position: absolute;
      left:0;
      ///right:ux(24);
      padding-left:1em;

      right: ux(40);
      text-overflow: ellipsis;
    }
    >.size{
      position: absolute;
      right: ux(9);
      text-align:right;
      ///opacity:.4;
      padding-right:.2em;
      font-family: monospace;
      font-size: 0.7em;
      color:#9aa;
    }
  }
  ///&.selected>.content>.size,
  ///&.selected:hover>.content>.size{
  ///  opacity:.2;
  ///}

}
.SaveDialog > .content > .fileName{
  display: block;
  background-color: #fffaaa; // #ccf6b4;
  border: 0;
  // border-top set from .wrapper
  border-bottom:ux(1) solid #ddd;
  ///width: ~"calc(100% + 2em)";
  height: 2em;
  line-height: 1em;
  margin: 0;
  padding: 0 .5em 0 1em;
  .placeholder( #ddd999 );
  border-radius: 0;
}



.ListDialog input.keyInput {
  position: absolute;
  right: 9999em;
}
.ListDialog > .header {
  background-color: #fff;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}
.ListDialog.headerEmpty > .header{
  border-bottom:0;
}
.ListDialog > .header > .title {
  margin-left: ux(3);
}
.ListDialog .listItem > .content > .name {
  padding-left: ux(4);
}
.ListDialog .listItem:first-child {
  border-top: 1px solid rgba(0, 0, 0, 0.1);
}
.ListDialog .listItem:nth-child(even) {
  background-color: #f3f3f3;
}
.ListDialog .listItem:nth-child(odd) {
  background-color: #fafafa;
}
.ListDialog .list {
  min-height: 3em;
  background: #f3f3f3;
}
.Addons.manage.ListDialog {
  max-width: 340px !important;
}



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

.LoadDialog > .content > .fileName{
  // height must be > 1px for key events
  // in chrome
  height: 1px !important;
  margin-top: -1px;
  border: 0;
  opacity:0;
}






//
//
// * * *  *   *  * * *  * * *  * *    *   * *   *      * * *  * * *   
// *      *   *  *   *  *   *  *  *   *  *   *  *      *   *  *       
// * * *  * * *  *   *  * * *  *   *  *  * * *  *      *   *  *  * *  
//     *  *   *  *   *  *      *  *   *  *   *  *      *   *  *   *   
// * * *  *   *  * * *  *      * *    *  *   *  * * *  * * *  * * *    
//
// ~shop
//

#ShopDialog {
  ///width: 35em;
  width: ux(150);///29em;
  max-width: @almostFullSize !important;
  height: 75%;
  min-height: 20em;
  max-height: @almostFullSize !important;
  ///background-color: @selectYellow;
  ///background-color: #89e6e6;
  ///background-color: #39ff00;
  ///background-color: #00ea32;
}
.vendomonicLogo {
  top: 3px;
}
#ShopDialog .content {
  position: relative;
  height: 100%;
}
#ShopDialog .message {
  ///background: url("images/shop/noiseSlower.gif") 5px 5px repeat;
  background-color: #0ce;

  ///.verticalGradient(#0ce, #6ef); // blue
  .verticalGradient(#00ace0,#33e7ff); // blue dker #00a4f0,#33e7ff
  ///.verticalGradient(#00ea60, #66ee99); // green

  
  box-sizing: border-box;
  padding: 0;
  text-align: center;

  ///display: flex;
  .display-flex();

  outline: 1px solid rgba(255, 255, 255, 0.3);
  outline-offset: -1px;

  // cut off in table8 landscape
  ///height: ux(41);
  ///flex: 1;//NWJSFIX

  max-height: ux(31);

  ///flex-shrink: 0;
  .flex-shrink(0);


}
#ShopDialog .wrapper {
  height: calc(~"100%" - ux(41) );
  overflow-y: scroll;

  border: 3px solid #eeeeee;
  border-width: 3px 0 3px 0;
  /* border-width: 1px 0 1px 0; */
  /* border-top: 1px solid #969696; */
  /* background-color: #62ff00;*/
  border-color: #fff;

  background-color: #b2cadf;

  ///flex: 3; //NWJSFIX
  .flex(3); //NWJSFIX


  background: linear-gradient(to right, #e0e0e0 0%, #fff 50%, #e0e0e0 100%);
}
#ShopDialog .message .scrollable{
  text-align: center;
}
#ShopDialog .message b{
  display: block;
  font-size: 1.3em;
  margin-bottom: .15em;
}
#ShopDialog .list{
  ///background-color: #484a4e;
  ///background-color: #77b0b3;
  background-color: #0066ff;
  background-color: #005eaf;
  background-color: #08f;
}

#ShopDialog .list>.separator>.label{
  text-align: left;
  font-size: 1.2em;
  background-color: #40494e;
  color: #ffffff; 
  letter-spacing: .04em;
  border-left: 1px solid #456;
  border-right: 1px solid #456;
  ///background-color: #20ea5f;
  ///background-color: #9ff;
  ///border-bottom: ux(1) solid #eee;
}
#ShopDialog .list>.separator>div{
  padding: ux(2);
}
#ShopDialog .list > .separator > div.label {
  padding: ux(3);
}
// list items
.shopProduct.listItem {
  background-color: #fff;
  border-bottom: ux(1) solid #eee;
  color: #444;
  ///padding: ux(1) ux(2) ux(1) ux(2); //3px 6px 3px 6px
  padding: ux(1); //3px 6px 3px 6px
  font-size: ux(4.33);
  line-height: ux(4.33);
  text-align: left;
}
.shopProduct.listItem.purchased {
  ///opacity: .6;
  ///background-color: #ddd;
  ///border-top: 3px solid #ddd;

//  opacity: .75;
  ///filter: grayscale(1) contrast(0.7) brightness(0.9);
  //filter: grayscale(1) contrast(0.5) brightness(1.1);
  filter: contrast(0.5) brightness(1.2);
}


// ios fix for purchase disappearing on scroll snapback (
.shopProduct > .content > .icon {
  z-index: 1;
}
.shopProduct > .content > .icon > canvas {
  z-index: -1;
  position: absolute;
}
// )

.shopProduct.listItem.purchased,
.shopProduct.listItem.purchased more {
  color: #bbb !important;
}


.shopProduct.listItem:last-child {
  padding-bottom: 0;
}
.shopProduct.listItem > .content > span{
  display: inline;
}
.shopProduct.listItem:last-child{
  ///border-bottom: 0;
  ///border-bottom: ux(1) solid #f9f4e4;
}
.shopProduct > .content {
  min-height:ux(29);
  height: auto;
  ///display: flex;
  ///flex-direction: row;
  ///align-items: center;
}
.shopProduct > .content > .blurb {
  white-space: normal;
  text-align: left;
  height: auto;
  line-height: normal;

  ///flex: 1;
  .flex(1);

  position: relative;
  top: 1px;
}
.shopProduct .title {
  font-size: ux(5.66);
  margin-bottom: 3px;
  padding-left: ux(30);
}
.shopProduct > .content > .icon {
  margin: ux(1);
  margin-right: ux(2);
  float: left;
}


.shopProduct > .content > .blurb > .description {
  padding-left: ux(1 + 2 + 27);
  padding-right: ux(2);
  padding-left: ux(30);
}


.shopProduct > .content > .buyButton {
  /* width: ux(29); */
  border: 0;
  background-color: #40494e;
  color: #fff;
  ///line-height: normal;
  ///line-height: 140%;
  font-size: 1.2em;
  line-height: 1.1em;
  float: right;
  margin: ux(1) ux(1) ux(2) ux(2);

  z-index: 9;
  position: relative;

  min-width: 4em;
  text-align: center;
    line-height: 1.25em;
}
.shopProduct > .content > .buyButton.disabled {
  opacity: .5;
}
.shopProduct > .content > .buyButton.shopping,
.shopProduct > .content > .buyButton.shopping.disabled {
  opacity: 1;
  animation: shoppingBackground 1.5s infinite;

}
@keyframes shoppingBackground{
  0%     { background-color: #bbb;color: #777;}
  60%    { background-color: #eee;color: #888;}
  100%   { background-color: #bbb;color: #777;}
}





// DEBUG remove ?    consumables are disabled
///.consumables > .shopProduct .buyButton.disabled {
///  ///background-color: #eee !important;
///  ///color: #bbb !important;
///  opacity: .4 !important;
///}





// footer
#ShopDialog > .footer {
  border: 0;
  background-color: #00ea60;

  .verticalGradient(#0ce, #6ef); // blue
  ///.verticalGradient(#00ea60, #66ee99); // green
  ///background-color: #00cc67;

  ///flex-shrink: 0; //NWJSFIX
  .flex-shrink(0); //NWJSFIX

}
#ShopDialog .yes.Button {
  ///background-color: #f5f5f5;
  ///color: #444;
  background-color: rgba(0, 0, 0, 0.3);
  color: #fff;
}
#ShopDialog .yes.Button:active,
#ShopDialog .yes.Button.mousedown{
  background-color: rgba(255, 255, 255, 0.6);
  color: #444;
}


///#ShopDialog more{
///  font-size: .85em;
///  color: #999;
///  font-style: italic;
///}
#ShopDialog more {
  font-size: .85em;
  color: #999;
  font-style: italic;
  line-height: 1.3em;
  display: block;
  padding-left: ux(30);
}

#ShopDialog .vendomonicLogo > canvas {
  max-width: 98%;
}




#ShopDialog .refreshPurchases{
  ///background-color: #fffa;
  background-color: rgba(255, 255, 255, 0.7);
  color: #178;
}
#ShopDialog .refreshPurchases.mousedown,
#ShopDialog .refreshPurchases.disabled{
  background-color: #444;
  color: #ddd;
}



.shopProduct .purchased {
  position: absolute;

  ///background-color: #eeeb;
  ///color: #333;

  color: #40494e;
  background-color: #fff;

  font-weight: bold;
  padding: 0px;
  transform: rotateZ(-45deg);
  line-height: normal;
  display: inline-block;
  margin: auto;
  height: ux(7);
  //* calc example: calc(~"100%" - ux(11) );

  width: ux(27 + 15);
  text-align: center;
  top: calc(~"50%" - ux(3.5) );
  left: calc(~"50%" - ux( (27 + 15)/2 ) );

  display: none;
}

.shopProduct.purchased .purchased{
  display: block;
}


.shopProduct > .content > .buyButton.mousedown{
  background-color: #333 !important;
}













// get more

.BuildingDialog .getMoreRecipes {
  text-align: center !important;
  padding: 0 1em;
  line-height: ux(10);
  ///font-size: ux(5.333);
  font-size: ~`_R(App.uiScale*5.333)+'px'`;
  height: ux(10) !important;
  color: #fff;
  letter-spacing: 0.5px;
  ///background: url("images/shop/purchaseBadgeBW.png") top right no-repeat;
  background-color: #00bd5e;
  ///margin-bottom: 1em;
  margin: 0;
  border: 0;
  border-radius: 0;
  width: 100%;

  box-sizing: border-box;
}

.BuildingDialog .getMoreRecipes>span {
  padding: 0 ux(1);
}
.BuildingDialog .getMoreRecipes>span.purchaseBadge {
  background: url("images/shop/purchaseBadgeBW.png") 0 0 no-repeat;
  display: inline-block;
  width: 14px;
  height: 18px;
  image-rendering: pixelated;
  top: 0;///-10%;
  position: relative;
}
.BuildingDialog .getMoreRecipes:hover {
  background-color: #00bd5e !important;
}
.BuildingDialog .getMoreRecipes.mousedown {
  background-color: #333 !important;
}





//
//
//
//
//    * *    *     *    * *    *     *   *  * * *  * * *  * * *  
//   *   *   * *   *   *   *   *      * *      *   *      *   *  
//  * * * *  *  *  *  * * * *  *       *      *    * * *  * * *  
//  *     *  *   * *  *     *  *       *     *     *      * *      
//  *     *  *     *  *     *  * * *   *    * * *  * * *  *  *     
//
//
//
//
// ~analyzer



// hide gaps between dna bars (nec?)
#AnalyzerDialog > .content.wrapper > .scroller > .dna:before {
  position: absolute;
  top: 0;
  left: ux(4);
  right: ux(4);
  height: ux(3);
  background-color: #444;
  content: "";
}



#AnalyzerDialog.collapsed{
  > .content.wrapper>.scroller{
    >.wiki{
      display:none;
    }
  }
}
#AnalyzerDialog>.content{
  padding: 0;
}
#AnalyzerDialog>.content.wrapper{
  // messes up ios safari
  ///height:100%;

  //background-color: #e5e6e7;
  ///background-color: #fff;
  background-color: #333;
}


// ( allow wiki to extend beyond bottom of scroll area
//   so that over-scrolling reveals the wiki color as background
///#AnalyzerDialog>.content.wrapper{
///  margin-bottom: -500px;
///}
///#AnalyzerDialog > .content.wrapper > .scroller > .wiki{
///  padding-bottom: 500px;
///  margin-bottom: 1em;
///}
// )

#AnalyzerDialog{
  .display-flex();
  .flex-direction(column);
  width:ux(125);
}

@orange:#fd8700;
@green:#3cb878;
@lime:#7ad623;
@blue:#238dda;
@yellow:#fdbb00;
@purple:#c053ff;
@red:lighten(#ee145b, 13%);
@brown:saturate(darken(#b8843c, 8%),10%);
@gray:#999d9f;
@toolbarGray: #707c7f; // was #7c7c7c slight blue?: #7c7f7f or #707c7f
@workspaceGray: #808c8f; // was #8f8f8f
@rightToolbar: #909d9f; // was #91938f
@toolbarItem: #d4d7da; // was #d4d4d4

// DISABLE exportButton in analyzer, must use camera!
#AnalyzerDialog .exportButton{
  display: none !important;
}


#AnalyzerDialog.needCamera .exportButton,
#AnalyzerDialog .exportButton.disabled {
  opacity: .4;
  .filter(grayscale(100%) contrast(150%));
}


#AnalyzerDialog >.header > .viewButton{
  position: absolute;
  top: ux(1);
  right:ux(1);
  ///right:~` (System.os=='windows') ? (App.uiScale*11)+'px':(App.uiScale*1)+'px' `;
  border-radius: 2px;
  background: transparent;
}
body.windows #AnalyzerDialog >.header > .viewButton{
  right:ux(11);
}
body.mouse #AnalyzerDialog >.header > .viewButton.ImageButton:hover {
  background-color: #ddd;
}


#AnalyzerDialog >.content.wrapper > .scroller{
  padding: 0;
  text-align:left;
  min-width:ux(90);
  max-width:ux(140);
  overflow: hidden;
}


#AnalyzerDialog >.content.wrapper > .scroller >.specimen{
  background-color:#fff;
  color:#444;
  padding:ux(2);
  padding: ux(4);
  display: block;
  text-align: right;
  font-size: ~`((App.uiScale*4)+1)+'px'`;
  line-height:~`((App.uiScale*4)+1)+'px'`;

  >div{
    vertical-align: top;
  }
  >.data>.export {
    display: inline-block;
    position: absolute;
    left: ux(32);
    z-index: 1;
  }
  >.data>.preview{
    display:block;
    //background-color: #efefef;
    position: absolute;
    z-index:1;
    box-sizing: border-box;
    height: 100%;
    left:0;
    top:0;
    padding: ux(3) ux(4) ux(5) ux(4);

    border-radius: 4px;
    overflow: hidden;

    // width is required since we are using the ios fix of 
    // absolute pos in .center() below
    // same as min-height specimen>.data below v
    width: ux(32+4+4); // see ui.js _setPreview + padding^
    >canvas{
      .center(absolute);
    }

  }
}

// AnalyzerDialog BRAIN

#AnalyzerDialog >.content.wrapper > .scroller >.specimen >.brain{
  margin-top: .5em; /// ux(4); // ux(1);
  text-align: left;
  > .brain{
    ///border: 1px dotted rgba(0, 0, 0, 0.25);
    ///border-width: 1px 0 1px 0;
    border: 0;

    padding: ux(1) 0;
    > .name{
      float: left;
      margin-right: ux(-11);
      display:none;
    }
    > .value{
      .display-flex();
      ///display: flex;
      justify-content: center;
      margin-bottom: ux(1);
    }
  }
  table{
    ///color: #08f;// V1.02-
    color: #777;   // V1.02+
    border-collapse: collapse;
    td{
      padding-right: ux(3);
      text-align: right;
      padding-top: .25em;
      padding-bottom: .2em;

      ///padding-left: ux(3); // V1.02+
      padding-left: ux(1); // V1.02+
      width: 4em;          // V1.02+

      &.high{
        background-color: #afb;
        color: #009f2f;///#0a3;
      }
      &.very.high{
        ///background-color: #2dec53;
        ///color: #006b20;
        // white on green
        background-color: #0a4;
        color: #dfe;
      }
      &.low{
        color: #f59;
        background-color: #fde;
      }
      &.very.low{
        ///color: #b10026;
        ///background-color: #fd94b5;
        // white on red
        color: #ffe6e8;
        background-color: #f56;//#ff4059;

      }
    }
    tr{
      line-height: ux(3);
    }
    tr:nth-child(even) {
      background-color: #f2f2f2;
    }
    tr:first-child, 
    td:first-child {
      color: #555;
      text-align: left;
    }
    tr:first-child td:first-child {
      color: #ff6060;
      text-align: left;
      // color: #999; 
    }
    ///tr:first-child td {
    ///  text-align: left;
    ///}
    tr td:first-child{
      padding-left: ux(3);
    }
  }
  pre{
    margin: 0;
    //color: #999;
    color: #08f;
    font-weight: bold;
  }
}



// AnalyzerDialog NAME ... UNUSED

#AnalyzerDialog >.content.wrapper > .scroller >.specimen >.name{
  display:none;
  /*display:block;
  >.Button{
    display:block;
    border:0;
    vertical-align: middle;
    text-align:left;
    line-height:1em;
    min-width: 3em;
    text-align: left;
    background-color:#fff555;
    margin:ux(2) 0 0 0;
    color: #666;
    &:hover{
      color: #555;
    }
    &.mousedown{
      background-color:#eee444;
    }
  }*/
}



// AnalyzerDialog WIKI

#AnalyzerDialog >.content.wrapper > .scroller >.wiki{
  padding:1em 1.5em;
  border: 1px solid rgba(255,255,255,.04);
  color:#444;
  background-color:#efefef;
  >.name{
    word-wrap: break-word;
    overflow-wrap: break-word;

    font:bold italic 1.4em @uiFont;
  }
  >.description{
    // nameInTitle (
    ///margin:0.8em 0 0.7em 0; 
    margin: 0.6em 0 0.6em 0;
    // nameInTitle )
      &:empty{
        display:none;
      }
      >i{
        font:italic 1.04em/1em @uiFont;
      }
      >b{
        font-weight:normal;
      }
  }
}




#AnalyzerDialog{
  &.specimen_Fungus > .content.wrapper>.scroller > .dna > .Bar{
    width: ~"calc(100% / 3)";
    &.distro>.level{ background:@orange; border-color:@orange;}
    &.distro>.label{ color:@orange;}
  }
  // ZOMBIES -- --
  &.specimen_Zombie > .content.wrapper>.scroller > .dna > .Bar{
    @gray:#aaa; @dkgray:#777; @ltgray:#ccc;
    width: ~"calc(100% / 6)";
    &.wiggo>.level{ background:#888; border-color:#888;}
    &.wiggo>.label{ color:@dkgray;}
    &.heddo>.level{ background:#b9b9b9; border-color:#b9b9b9;}
    &.heddo>.label{ color:@dkgray;}
    &.boddo>.level{ background:#c3c3c3; border-color:#c3c3c3;}
    &.boddo>.label{ color:@dkgray;}
    &.panto>.level{ background:#888; border-color:#888;}
    &.panto>.label{ color:@dkgray;}
    &.senso>.level{ background:#b9b9b9; border-color:#b9b9b9;}
    &.senso>.label{ color:@dkgray;}
    &.noodo>.level{ background:#9b9b9b; border-color:#9b9b9b;}
    &.noodo>.label{ color:@dkgray;}
  }
  &.specimen_Zombie > .content.wrapper>.scroller > .specimen{
    @gray:#aaa; @dkgray:#777; @ltgray:#ccc;

    > .data > .info > .field > .value{
      color:@gray;
    }> .data > .stats > .stat > .Bar.health > .level,
    > .data > .stats > .stat > .Bar > .level{
      background-color:@gray;
    }
  }
  // -- --
}




#AnalyzerDialog >.content.wrapper>.scroller{
  background-color: #fff;
}

#AnalyzerDialog >.content.wrapper>.scroller>.dna{
///  @orange:#fd8700;@brown:#b8843c;@green:#3cb878;
///  @lime:#4ddf1e;@red:#ee145b;@blue:#238dda;@yellow:#fdbb00;
///  ///@purple:#9e14ee;
///  ///@purple:lighten(#9e14ee, 10%);// ANALYZER_V2 #c560ff
///  @purple:#c053ff;
///  ///@red:lighten(#ee145b, 5%);    // ANALYZER_V2
///  @red:lighten(#ee145b, 13%);    // NEWGENES
///  @brown:saturate(darken(#b8843c, 8%),10%);    // ANALYZER_V2
///  @gray:#999d9f;

  position:relative;
  height: ux(2);
  clear: both;
  margin-bottom:ux(4);
  white-space: nowrap;
  width: 100%;
  .display-flex();
  ///display: flex;
  margin: 0;
  margin-top: ux(-2);
  padding: 0px ux(4) ux(10) ux(4);
  box-sizing: border-box;
  >.Bar:last-child .level{
    border-right-width: 0;
  }

  >.Bar{
    // fungi
    &.metabo>.level{ background:@purple; border-color:@purple;}
    &.hydro>.level{ background:@blue; border-color:@blue;}
    &.metabo>.label{ color:@purple;}
    &.hydro>.label{ color:@blue;} 
    // background color of bar
    &.me>.level{ background:@purple; }
    &.ma>.level{ background:@brown;  }
    &.be>.level{ background:@lime; }
    &.fl>.level{ background:@gray; }
    &.le>.level{ background:@orange; }
    &.se>.level{ background:@yellow; }
    &.mh>.level,
    &.ms>.level,
    &.mt>.level{ background:@red; }
    &.sh>.level,
    &.ss>.level,
    &.st>.level{ background:@green; }
    &.wh>.level,
    &.ws>.level,
    &.wt>.level{ background:@blue; }
    // 1px left border
    &.me>.level{ border-left-color:@purple;}
    &.ma>.level{ border-left-color:@brown; }
    &.be>.level{ border-left-color:@lime; }
    &.fl>.level{ border-left-color:@gray; }
    &.le>.level{ border-left-color:@orange;}
    &.se>.level{ border-left-color:@yellow;}
    &.mh>.level,
    &.ms>.level,
    &.mt>.level{ border-left-color:@red;}
    &.sh>.level,
    &.ss>.level,
    &.st>.level{ border-left-color:@green;}
    &.wh>.level,
    &.ws>.level,
    &.wt>.level{ border-left-color:@blue;}
    // label text
    &.me>.label{ color:@purple;}
    &.ma>.label{ color:@brown;}
    &.be>.label{ color:saturate(darken(@lime,10%),20%); }
    &.fl>.label{ color:darken(@gray,3%); }
    &.le>.label{ color:@orange;}
    &.se>.label{ color:darken(@yellow,5%);}
    &.mh>.label,
    &.ms>.label,
    &.mt>.label{ color:@red; }
    &.sh>.label,
    &.ss>.label,
    &.st>.label{ color:@green; }
    &.wh>.label,
    &.ws>.label,
    &.wt>.label{ color:@blue; }
    //
    border: 0 none;
    height: ux(3);

    // stops component from overriding
    //!background-color:#444 !important;
    background-color:#444;

    vertical-align: top;
    width: ~"calc(100% / 13)";
    .level {
      border-right: 1px solid #444;
      border-left: 1px solid #999; // colorized above^
      background-color: #999;
    }
    ///.label{
    ///  text-transform: capitalize;
    ///  position: relative;
    ///  text-align: left;
    ///  font-size: ux(4.3333334);
    ///  top: ux(3) !important;
    ///}
  }
}

// nameInTitle (
#AnalyzerDialog > .content.wrapper>.scroller> .wiki > .name{
  display: none;
}
#AnalyzerDialog.specimen_Anim > .header > .title,
#AnalyzerDialog.specimen_Fungus > .header > .title{
  font-style: italic;
  top:-1px;// italic font is taller (?) collapsible 
}
#AnalyzerDialog.specimen_Zombie > .header > .title {
  text-transform: capitalize;
}

///// collapsible
///#AnalyzerDialog.specimen_Anim:not(.fossil) > .header > .title,
///#AnalyzerDialog.specimen_Fungus > .header > .title,
///#AnalyzerDialog.specimen_Zombie > .header > .title{
///  // margin - close btn - margin - btn - margin
///  max-width: ux(125 - 1 - 9 - 2 - 9 - 1);
///}
///// NOT collapsible
///#AnalyzerDialog > .header > .title{
///  // margin - close btn - margin - margin
///  max-width: ux(125 - 1 - 9 - 2 - 1);
///}

// collapsible
#AnalyzerDialog > .header > .title{
  // margin - close btn - margin - btn - margin
  max-width: ux(125 - 1 - 9 - 2 - 9 - 1);
}
// NOT collapsible
#AnalyzerDialog.fossil > .header > .title{
  // margin - close btn - margin - margin
  max-width: ux(125 - 1 - 9 - 2 - 1);
}

// nameInTitle )



.Component.exportButton.Button.clickable.ImageButton.mousedown {
  background-color: #f5f5f5;
}


.exportButton.ImageButton.mousedown:not(.dragging) > canvas {
  left: ux(-2);
  position: absolute;
}
body.mouse .exportButton.Button:hover {
  background-color: transparent;
}

#AnalyzerDialog.carrier >.content.wrapper>.scroller,
#AnalyzerDialog.fossil >.content.wrapper>.scroller {
  background: #ddd;
  > .specimen{
    position: absolute;
    background-color: transparent;
    height: 100%;
    padding-bottom: ux(15);
    box-sizing: border-box;
    >.data{
      height: 100%;
    }
  }
  > .specimen > .data > .preview{
    background-color: #cccfcf;
    cursor:@cursorDefault;
  }
  >.dna{
    position: absolute;
    bottom: 0;
    z-index: 1;
    width: 100%;
  }
  > .wiki{
    position: relative;
    top: 0;
    left: 0;
    padding-left: ux(49);
    background-color: transparent !important;
    margin-bottom: 2em;
    >.name{
      line-height: 1.1em;
      -webkit-hyphens: auto;
      -moz-hyphens: auto;
      -ms-hyphens: auto;
      hyphens: auto;
    }
  }
}
#AnalyzerDialog.carrier.collapsed > .content.wrapper>.scroller> .wiki,
#AnalyzerDialog.fossil.collapsed > .content.wrapper>.scroller> .wiki{
  display: block;
}
#AnalyzerDialog.carrier.collapsed > .content.wrapper>.scroller> .specimen > .data > .preview,
#AnalyzerDialog.fossil.collapsed > .content.wrapper>.scroller> .specimen > .data > .preview {
  display: block;
}
#AnalyzerDialog.carrier.collapsed,
#AnalyzerDialog.fossil.collapsed {
  width:ux(125);
}
#AnalyzerDialog.carrier > .header > .viewButton,
#AnalyzerDialog.fossil > .header > .viewButton{
  display: none !important
}
#AnalyzerDialog.carrier > .content.wrapper>.scroller> .specimen > .brain,
#AnalyzerDialog.fossil > .content.wrapper>.scroller> .specimen > .brain {
  display: none !important
}
#AnalyzerDialog.carrier > .content.wrapper>.scroller> .specimen > .data > .export,
#AnalyzerDialog.fossil > .content.wrapper>.scroller> .specimen > .data > .export{
  display: none !important
}
#AnalyzerDialog.carrier > .content.wrapper>.scroller> .specimen > .data > .stats, 
#AnalyzerDialog.fossil > .content.wrapper>.scroller> .specimen > .data > .stats, 
#AnalyzerDialog.carrier > .content.wrapper>.scroller> .specimen > .data > .info , 
#AnalyzerDialog.fossil > .content.wrapper>.scroller> .specimen > .data > .info {
  display: none !important
}


// fixes an issue with translations having unexpected text sizes
#AnalyzerDialog > .content.wrapper>.scroller> .specimen > .data .label{
  min-width: 4em;
  display: inline-block;
}

// fix3
#AnalyzerDialog > .content.wrapper>.scroller> .specimen > .data{
  // removed because it stops .dev from flowing past preview
  ///float: right; 

  // prev +  prev-padding
  min-height: calc( ux(32) + ux(4) + ux(4) );
  position: relative;

  text-transform: lowercase;
}
#AnalyzerDialog.carrier > .content.wrapper>.scroller> .wiki{
  min-height: calc( ux(32) + ux(4) + ux(4) );
}


#AnalyzerDialog.collapsed > .content.wrapper>.scroller> .specimen > .data{
  min-height:ux(32+4+4); // same as preview width above ^
}
//

// overhydrated?
#AnalyzerDialog.overhydrated .stat.hydration{
  display:none !important;
}
#AnalyzerDialog.overhydrated .stat.overhydration{
  display:block !important;
}
#AnalyzerDialog .stat.overhydration{
  display:none !important;
}

// overnutriated?
#AnalyzerDialog.overnutriated .stat.nutrition{
  display:none !important;
}
#AnalyzerDialog.overnutriated .stat.overnutrition{
  display:block !important;
}
#AnalyzerDialog .stat.overnutrition{
  display:none !important;
}


// RUSSIAN translation fix
body.ru{
  #AnalyzerDialog > .content.wrapper>.scroller> .specimen > .data > .stats > .stat > .label,
  #AnalyzerDialog > .content.wrapper>.scroller> .specimen > .data > .info > .field > .name {

    letter-spacing: -0.04em;
    font-size: .96em;

    margin-right: ux(1);
    z-index: 1;
    position: relative;
  }
  #AnalyzerDialog > .content.wrapper>.scroller> .specimen > .data > .stats > .stat > .Bar,
  #AnalyzerDialog > .content.wrapper>.scroller> .specimen > .data > .info > .field > .value{
    width:ux(38);

  }
  #AnalyzerDialog > .content.wrapper>.scroller> .specimen > .data > .stats > .stat.overhydration > .label{
    letter-spacing: -.06em;
  }
  #AnalyzerDialog > .content.wrapper>.scroller> .wiki > .description{
    line-height: 1.15em;
  }

  #AnalyzerDialog .field.home > .value{
    letter-spacing:-0.05em;
  }
  #AnalyzerDialog .field.mood > .value {
    letter-spacing: -.03em;
  }
}







// FRENCH translation fix
body.fr{
  .StartupScreen > .buttons > .menu{
    width: 11em;
  }
  .StartupScreen > .buttons > .menu > .help.Button {
    ///width: 10.5em;
    letter-spacing: -.02em;
    white-space: nowrap;
    overflow: hidden;
    padding-left: 1px !important;
    padding-right: 1px !important;
  }

  .ConfirmDialog.Dialog > .footer > .Button {
    letter-spacing: -.2px;
  }

  // fixed with .Tooltip.Component > .content{white-space: pre-wrap
  ///.Tooltip.Component > .content {
  ///  max-width: 16em;
  ///}


}
// SPANISH translation fix
body.es{
  .StartupScreen > .buttons > .menu {
    width: 10em;
  }
  #AnalyzerDialog > .content.wrapper>.scroller> .specimen > .data > .stats > .stat > .Bar,
  #AnalyzerDialog > .content.wrapper>.scroller> .specimen > .data > .info > .field > .value{
    width:ux(38);
  }
  #AnalyzerDialog > .content.wrapper>.scroller> .specimen > .data > .stats > .stat.overhydration > .label{
    letter-spacing: -.02em;
  }


  .StartupScreen > .buttons > .menu > .loadGame.Button {
    letter-spacing: -1px;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

}
// RUSSIAN translation fix (
body.ru{
  .StartupScreen > .buttons > .menu{
    width: 11em;
  }

  .SettingsDialog .form > .group > div > .label,
  .SettingsDialog .checkbox > span,
  .SettingsDialog .checkbox > span > p{
    line-height: 1em;
  }

  .SettingsDialog .form > .group > div > .label {
      width: ~"calc(55% - .5em)";
  }
  .SettingsDialog .form input, 
  .SettingsDialog .form > .group > div > .Slider {
      width: ~"calc(45% - .5em)";
  }
  .SettingsDialog .form .group > div > .languageButton{
      width: ~"calc(45% - .5em)";
  }

  .Dialog.BuildingDialog > .header > .title {
    letter-spacing: -.01em;
  }

  ///.NewDialog .form > .sizes > .Button {
  ///  font-size: .95em;
  ///  letter-spacing: -.05em;  
  ///}

}
///@media screen and ( max-width: ux(140) ){
///  body.ru{
///    .NewDialog .form > .sizes > .Button {
///      font-size: .95em;
///      letter-spacing: -.05em;  
///      ///padding-left: ux(1) !important;
///      ///padding-right: ux(1) !important;
///    }
///  }
///}
@media screen and ( max-width: ux(122) ){
  body.ru{
    &.portrait{
      .StartupScreen .foot > .discord {
        text-transform: none;
        max-width: 11em;
        text-align: left;
      }
    }
  }
}

// CHINESE translation fix

body.zh-CN, body.zh-TW{
  .NewDialog .form > .sizes > .Button {
    min-width: 4em;
    text-align: center;
      padding: .3em 0;
  }
  .NewDialog .form > .sizes > .Button > span {
    padding-right: 17px;
    padding-left: 17px;
  }
  #AnalyzerDialog > .content.wrapper > .scroller > .wiki > .description>i {
    margin-right: .3em;
  }
  body {
    letter-spacing: .09em;
    font-size: 15px;
  }


  #firstAttackWarning > .content > .message {
    padding-top: .5em;
  }
  .ConfirmDialog.Dialog > .content > .message h3 {
    font-size: 2em;
    margin: 0 0 .35em 0;
  }


  #AnalyzerDialog > .content.wrapper > .scroller > .specimen > .data > .stats > .stat > .Bar,
  #AnalyzerDialog > .content.wrapper > .scroller > .specimen > .data > .info > .field > .value{
    width:ux(48);
  }
  #AnalyzerDialog > .content.wrapper > .scroller > .specimen > .data > .info > .field.home > .value {
    white-space: normal;
  }

  #AnalyzerDialog > .content.wrapper > .scroller > .specimen > .data > .info > .field > .name,
  #AnalyzerDialog > .content.wrapper > .scroller > .specimen > .data > .stats > .stat > .label {
    letter-spacing: 0.1em;
  }

  #AnalyzerDialog > .content.wrapper > .scroller > .specimen > .data > .info > .field,
  #AnalyzerDialog > .content.wrapper > .scroller > .specimen > .data > .stats > .stat{
    height: unset;
  }
  /// #AnalyzerDialog > .content.wrapper > .scroller > .specimen{
  ///   font-size: 0.9em;
  /// }

}


// JAPANESE translation fix

body.jp{
  #AnalyzerDialog > .content.wrapper > .scroller > .specimen > .data > .info > .field > .name,
  #AnalyzerDialog > .content.wrapper > .scroller > .specimen > .data > .stats > .stat > .label {
    letter-spacing: 0.1em;
  }
  #AnalyzerDialog > .content.wrapper > .scroller > .specimen > .data > .info > .field.home > .value {
    white-space: normal;
  }
  #AnalyzerDialog > .content.wrapper > .scroller > .specimen > .data > .info > .field,
  #AnalyzerDialog > .content.wrapper > .scroller > .specimen > .data > .stats > .stat{
    height: unset;
  }

  .dna > .Bar > .label{
    font-size: .7em !important;
    letter-spacing: -.1em;
  }
}






#AnalyzerDialog > .content.wrapper>.scroller> .specimen > .data > .stats{
  position:relative;
  margin-right:ux(3);
  margin-top: ux(-1);

  // this makes some translations display
  // under preview image
  ///display:inline-block;
  display:block;


  padding:0;
  text-align: right;
  // to fix small iphone quirk
  margin-right:0;
  margin-top:0;
    
  >.stat{
    display:inline-block;
    display:block;
    white-space: nowrap;
    height:ux(4.25);
    >.label{
      vertical-align: middle;
      margin-right: ux(2);
      text-transform: lowercase;
    }
    >.Bar{
      border:0;
      width:ux(41);
      height:ux(3);
      display:inline-block;
      vertical-align: middle;
      background-color:#ebebeb;
      >.level{
        border-right:ux(1) solid #626262;
      }
      &.stage>.level{
        background:#c560ff;
      }
      &.health>.level{
        background-color:#fd6260;
      }
      &.stress>.level,{
        background-color:#f78;
      }
      &.hydration>.level{
        background-color:#1dc2ff;
      }
      &.overhydration{
        background-color:#1dc2ff;
      }
      &.overhydration>.level{
        background-color:#3388bb;
      }

      &.nutrition>.level,
      &.nutrients>.level{
        background-color:#00c100;
      }
      &.overnutrition{
        background-color:#00c100;
      }
      &.overnutrition>.level{
        background-color:#009900;
      }

      &.fertility>.level{
        background-color:#ff9c17;
      }
      &.ripeness>.level{
        background-color:#ff9c17;
      }
      &.development>.level{
        background:#f3da3a;
      }
      &.radiation>.level{
        background-color:#73ff00;
      }


      &.stomach>.level{
        background-color:#c19c76;
      }

    }
  }
}

#AnalyzerDialog > .content.wrapper > .scroller > .specimen > .data > .info{
  position:relative;
  margin-right:ux(3);
  display:inline-block;
  padding:0;
  text-align: right;
  // to fix small iphone quirk
  margin-right:0;

  width: calc(~"100%" - ux(44) ); // preview40 + m10 + m10

  >.field{
    display:block;
    white-space: nowrap;
    height:ux(4);
    >.name{
      vertical-align: middle;
      margin-right: ux(2);
      // russian fix
      display: inline-block;
      white-space: normal;
      max-width: 7.5em;
      // top so that long values can word wrap
      vertical-align: top;
    }
    >.value{
      .box-sizing(border-box);
      color:#08f;
      width:ux(41);
      display:inline-block;
      vertical-align: middle;
      text-align: left;
      >i{
        color:#444;
        font-style: normal;
      }
      // russian fix
      vertical-align: bottom;
    }
  }
}




///.dna > .Bar > .label > i{
///  display:none;
///  line-height: inherit;
///}
///.dna > .Bar > .label{
///  top:ux(2) !important;
///  display: inline-block;
///  // hidden touch/hover area
///  margin: ux(-1);
///  border: ux(1) solid rgba(0,0,0,0);
///  border-width: ux(1) ux(2) ux(1) ux(1);
///}
.dna > .Bar{
  text-align:left;
  line-height: normal;
}

///.dna > .Bar > .label:active,
///.dna > .Bar > .label:hover{
///  color: #333 !important;
///  z-index: 9;
///
///  // hidden touch/hover area
///  ///margin: ux(-3) ux(-3);
///  ///border: ux(3) solid rgba(0,0,0,0);
///  ///border-width: ux(3) ux(1) ux(3) ux(1);
///  ///padding: 0 ux(2);
///
///  :before{
///    z-index: -9;
///    content:" ";
///    left:0; top:0; right:0; bottom:0; width:100%; height:100%;
///    position:absolute;
///    background-color: #fff666;
///  }
///
///
///  >i{
///    display:none;
//////    ///display:inline;
//////    ///font-style:normal;
//////    //////text-transform:none;
//////    ///text-transform:capitalize;
//////    display: inline-block;
//////    position: absolute;
//////    font-style: normal;
//////    text-transform: capitalize;
//////    z-index: 9;
//////    margin: ux(-1) 0 0 -2em;
//////    padding: ux(1) ux(2);
//////    box-shadow: 0px 0px ux(3) 2px rgba(0,0,0,.2);
//////    pointer-events: none;
//////
//////    transform: translateX(-25%);
//////    margin: ux(-10) 0 0 0;
///  }
///}












#content.spying{
  #AnalyzerDialog > .content.wrapper>.scroller> .specimen > .data >.preview{
    background:@selectYellow !important;
    //cursor:zoom-out;
    cursor:@cursorCircleX;
  }
}

#AnalyzerDialog > .content.wrapper>.scroller> .wiki > .description:first-word{
  font-style:italic;
}



// ~ ~ ~ ~ ~ 

.selectionInfoBox{
  box-shadow:0 0 0px @scale rgba(00, 33, 33, 0.15);
  border-radius:2px;
  border:1px solid #9ef;
  padding:2px 4px 4px;
  text-align:left;
  font:ux(3)/.7em "verdana",sans-serif;
  letter-spacing:.25px;
  background:radial-gradient(100% 100% at center, rgba(215,255,255,0.65), rgba(215,255,255,0.05));
  color:#000;
  //pointer-events:none;
  // hr
  tbody > tr > td > hr{
    border-bottom: 1px solid #cef;
    border-width: 0 0 1px 0;
    height: 0;
    margin: 2px -7px 0;
    opacity: 0.5;
  }
  // separator text
  tbody > .separator > td{
    text-align:center;
    color:#fff;

    text-align: center;
    color: #ff17bf;
    text-shadow: 0px 2px 10px rgb(0, 230, 255);

    color: #000000;
    background-color: #fff555;
    text-shadow: none;

  }
  > tbody > .item{
    white-space:nowrap;
    > .key{
      text-align:right;
    }
    > .value{
      color:#233;
    }
  }
}

.separator._separatorDNA > td {
    max-width: 7em;
}
.separator > td {
    text-shadow: 0 2px 30px #245;
    line-height: 1em;
}








// NEW ANALYZER 0.29

.dna > .Bar > .label > b{
  font-weight: normal;
  display: inline-block;
}

.dna > .Bar > .label:active,
body.mouse .dna > .Bar > .label:hover{
  color: #333 !important;
}

.dna > .Bar > .label > i{
  display:none;
}

.dna > .Bar > .label{
  display: inline-block;
  text-transform: capitalize;
  position: relative;
  text-align: left;
  font-size: ux(4.3333334);
  padding-top: ux(3);
  width: 100%;
}
body.mouse .dna > .Bar > .label:hover > b{
  background-color: @selectYellow;
  border: 3px solid #fff555; // ux?
  margin: ux(-1) ux(-1) ux(-1) -1px;
  border-width: 1px ux(1) ux(1) 1px;
}

///#AnalyzerDialog > .content.wrapper>.scroller> .dna > .Bar > .label > b{
///  font-weight: normal;
///  position: absolute;
///  width: calc(100% - 3px);
///}
///#AnalyzerDialog > .content >.wrapper>.scroller> .dna > .Bar > .label:hover > b{
///  /* display: none; */
///  ///visibility: hidden;
///  border: ux(1) solid #fff666;
///  margin: 0 ux(-1);
///  border-width: 0 ux(1) ux(2) ux(1);
///}
///
//////.dna > .Bar > .label:active > i, 
//////.dna > .Bar > .label:hover > i {
//////  display: inline-block;
//////  position: absolute;
//////  font-style: normal;
//////  text-transform: capitalize;
//////  z-index: 9;
//////  margin: -3px 0 0 -2em;
//////  padding: 3px 5px;
//////  box-shadow: 0px 0px 10px 2px rgba(0,0,0,.2);
//////}
///.dna > .Bar > .label:active, 
///.dna > .Bar > .label:hover {
///  color: #333 !important;
///  z-index: 9;
///  /* margin: -9px -9px; */
///  /* border: 9px solid rgba(0, 0, 0, 0); */
///  /* border-width: 9px 3px 9px 3px; */
///  /* padding: 0 6px; */
///}
///.dna > .Bar > .label{
///  position: absolute;
///  display: block;
///}













.Tooltip.Component{
  pointer-events:none;
}
// .content & inline-table allows the div to resize to fit all no-br text
.Tooltip.Component > .content{
  background-color: #ffaf53;
  color: #222;
  font-family: @uiFont;
  padding: .3em .5em .29em .5em;
  border-radius: 1px;
  box-shadow: @tooltipShadow;
  border: 1px solid rgba(255,255,255,.15);
  max-width: 15em;
  text-align: left;
  display: inline-table;

  // some translations break out of box, allow wrapping?
  ///white-space: pre;
  white-space: pre-wrap;
}
.Tooltip.Component p {
    white-space: normal !important;
    margin: .1em 0 .2em 0;
    font-size: .8em;
    line-height: 1.2em;
}
.Tooltip.Component > .content > p:empty {
    display: none;
}

//
//
//  * * * * *  * * * * *  * * * * *  *          * * * * *    * * *    * * * * *  
//      *      *       *  *       *  *          *       *  *       *  *       *  
//      *      *       *  *       *  *          * * * *    * * * * *  * * * * *  
//      *      *       *  *       *  *          *       *  *       *  *   *      
//      *      * * * * *  * * * * *  * * * * *  * * * * *  *       *  *     *    
//
//  toolbar items, icons, buttons



.Toolbar{
  background-color:@toolbarGray;
  padding:0 0 ux(1) 0;
  .user-select(none);
  text-align:left;
  vertical-align: middle;
}
.Toolbar > .slot{
  border:ux(1) solid @toolbarGray;
  border-width: ux(1) 0 0 ux(1);
  width: @slot; height: @slot;

  display:inline-block;
  width:@slot;
  height:@slot;
  background:@workspaceGray;
  vertical-align:top;
  overflow:hidden;
  text-align:center;
}
.Toolbar > .slot.droppingOver{
  ///background:#4b6;
  ///background:#0c6;
  background:@buttonGreen;
}
.Toolbar > .slot.droppingOver > .ItemButton:not(.dragging){
  ///background:#4b6;
  ///background:#0c6;
  background:@buttonGreen;
}



.ItemButton{
  position:relative;
  margin:auto;
  vertical-align:middle;
  background-color:#eee;
  border:0;
  cursor:@cursorPointer;
  display:inline-block;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  -webkit-touch-callout: none; // mobile/touch
  .user-select(none);
  width:@slot;
  height:@slot;
}
.ItemButton.ImageButton.Button{
  padding:ux(1);
}
.ItemButton.mousedown{
  ///background-color:#4b6 !important;
  ///background-color:#0c6 !important;
  ///background-color:@buttonGreen !important;
  background-color:#f9f9f9 !important;
  color:#4a7;
}
.ItemButton.dragging{
  background-color:rgba(255,255,255,.5);
  box-shadow:0 0 5px 2px rgba(0, 0, 0, 0.15);
  color:#066;
  cursor:@cursorMove;
}



///.ItemButton.splitting:after {
///  position: absolute;
///  top: 0;
///  left: 0;
///  width: 100%;
///  height: 50%;
///  content: " ";
///  ///border-bottom: ux(1) dashed #333;
///  ///border-bottom: ux(1) dashed #fff;
///  border-bottom: ux(1) dashed rgba(0, 0, 0, 0.50);
///}
// horizontal
///.ItemButton.splitting:after {
///  position: absolute;
///  top: 50%;
///  left: 0;
///  width: 100%;
///  height: 0px;
///  content: " ";
///  ///border-bottom: ux(.5) dashed #fff;
///  ///border-top: ux(.5) dashed #fff;
///  border-bottom: ux(.5) dashed rgba(0, 0, 0, 0.50);
///  border-top: ux(.5) dashed rgba(0, 0, 0, 0.50);
///}

// vertical
///body:not(.ios) .ItemButton.splitting:after {
///  position: absolute;
///  top: 0;
///  left: 0;
///  width: 50%;
///  height: 100%;
///  content: " ";
///  border-right: ux(1) dashed rgba(0, 0, 0, 0.5);
///}
///body.ios .ItemButton.splitting:after {
///  position: absolute;
///  top: 0;
///  left: 50%;
///  width: 0;
///  height: 100%;
///  content: " ";
///  border-left: 2.5px dashed rgba(0, 0, 0, 0.5);
///  border-right: 2.5px dashed rgba(0, 0, 0, 0.5);
///}
.ItemButton.stackable.splitting:after {
  position: absolute;
  top: 0;
  right:calc(~"50%" - ux(.5));
  width: 0;
  height: 100%;
  content: " ";
  border-left: ux(1) dashed #000;
  background-color: #fff;
  opacity: .7;
}



body.dragging{
  cursor:@cursorMove !important;
}


.Toolbar > .slot > .ItemButton{
  background-color:@toolbarItem;    
}
.Toolbar >.slot.selected > .ItemButton{
  background-color:@selectYellow !important;
}

body.mouse .ImageButton.Button.ItemButton.dragging:hover,
.ImageButton.Button.ItemButton.dragging{
  background-color:rgba(255,255,255,.5) !important;
}

.Toolbar > .slot > .ItemButton.merge{
  background-color:#fff !important;
  background-color:#e5e5e5 !important;
}
.ingredients.Toolbar > .slot > .ItemButton.merge {
  background-color: @toolbarItem !important;
}

.Icon, .SpriteIcon{
  position:relative;
  cursor:@cursorDefault;
  vertical-align:middle;
  display:inline-block;
  margin:auto;
  &.fungalyte>.badge{
    color:darken(#664432, 5%);
  }
  &.mineryte>.badge{
    color:darken(#475149, 5%);
  }
  &.liquidyte>.badge{
    color:darken(#2b5e83, 5%);
  }
}

body.touch .Icon.Button,
.Icon.Button {
  &:hover,&:active,&.mousedown{
    background-color: unset;
  }
  border: 0;
  padding: 0;
}

// badges

.badge{
  position:absolute;
  z-index:1;
  color:#333838;
  background-color:transparent;
  font-weight: normal;
  font-size:.75em;
  display:none;
  ///bottom:-0.25em;
  ///right:.3em;
  // causes numbers to shift when dialog is dragged
  ///bottom: -0.05em; ///bottom: ux(-.33);
  bottom: -1px;
  right:.2em;
}

.ImageButton.stackable > .badge,
.ImageButton.countable > .badge {
  display: block;
}










.Popup{
  padding:0;
  border-radius:@radius;
  box-shadow:@popupShadow;

  background-color:#fff;
  border:1px solid #555;
  overflow:hidden;
  z-index:1000;
}
.popupDismissArea{
  background-color:#222;
  opacity:0;
}


.Menu>.Button{
  padding:.5em 1.5em;
  font-size: 1.1em;
  border: 0;
  display: block;
  border-bottom:1px solid #ddd;
  margin:0;
  border-radius:0;
  font-weight: normal;
  letter-spacing: 0.05em;
  text-align: left;

  .shade(0.05);

  &:last-child{

    border-bottom:0;
  }
  ///&:hover{
  ///  background-color:#fff568;
  ///  color:#333;
  ///}
}
.Menu > .menuItem.Button.mousedown {
  background-color: #333;
  color: #ddd;
}
body.mouse .menuItem.Button:hover{
  background-color:#fff568;
  color:#333;
}


///.Popup.ColorPicker{
///  border:0;
///  width:ux(80);
///  width:ux(80-16);// hide display
///  background-color:transparent;
///  height:ux(16);
///  >.display{
///    position: absolute;
///    right: 0;
///    display:inline-block;
///    width:ux(16); height:ux(16);
///    background-color:#fff;
///
///    display:none; // hide display
///  }
///  >.randomize{
///    position: absolute;
///    right: ux(18); top:ux(2);
///    right: ux(2); // hide display
///    background-color:#fff;
///    outline: ux(2.1) solid #fff;
///    overflow: hidden;
///    &:hover{
///      background-color:#fff568;
///      outline: ux(2) solid #fff568;
///    }
///  }
///  >.sliders{
///    position: absolute;
///    left: 0; width:ux(80-16-16); height:ux(16);
///    background-color:#fff;
///  }
///}
///
///
///
///.ColorPicker > .sliders > .Slider{
///  height:ux(4);
///  position:absolute;
///  left:ux(2); right:0;
///  background-color:#222;
///  .box-sizing(border-box);
///  border-bottom:ux(1) solid #444;
///  //-webkit-transform: translate3d(0,0,0);
///  >.bar{
///    .box-sizing(border-box);
///    border-right:ux(1) solid rgba(255,255,255,.5);
///    width: 50%; height: 100%;
///    //-webkit-transform: translate3d(0,0,0);
///  }
///  &.red{
///    top:ux(2);
///    >.bar{
///      background-color:#f03;
///    }
///  }
///  &.green{
///    top:ux(6);
///    >.bar{
///      background-color:#0b3;
///    }
///  }
///  &.blue{
///    top:ux(10);
///    >.bar{
///      background-color:#0af;
///    }
///  }
///}

.Popup.ColorPicker{
  border: 1px solid #345;
  width:ux(80);
  width:ux(80-16);// hide display
  background-color:#111;
  height: ux(17);
  >.display{
    position: absolute;
    right: 0;
    display:inline-block;
    width:ux(16); height:ux(16);
    background-color:#fff;
    display:none; // hide display
  }
  >.randomize{
    position: absolute;
    right: ux(18); top:ux(2);
    right: ux(2); // hide display
    overflow: hidden;
    ///&:hover{
    ///  background-color:@selectYellow; // #fff568;
    ///  outline: ux(3) solid @selectYellow;
    ///}
  }
  >.sliders{
    position: absolute;
    left: 0; width:ux(80-16-16); 
    height:ux(17);
  }
}

body.mouse .Popup.ColorPicker > .randomize:hover{
  background-color:@selectYellow; // #fff568;
  outline: ux(3) solid @selectYellow;
}

///body.touch .Popup.ColorPicker > .randomize:hover {
///  background-color: unset;
///  outline: unset;
///}

.ColorPicker > .sliders > .Slider{
  height:ux(4);
  position:absolute;
  left:ux(2); right:0;
  background-color:#444;
  .box-sizing(border-box);
  border-bottom:ux(1) solid #444;
  //-webkit-transform: translate3d(0,0,0);
  >.bar{
    .box-sizing(border-box);
    border-right:ux(1) solid rgba(255,255,255,.5);
    width: 50%; height: 100%;
    //-webkit-transform: translate3d(0,0,0);
  }
  &.red{
    top: 0px;
    border-top: ux(2) solid #222;
    border-bottom: 0;
    height: ux(5);
    >.bar{
      background-color:#f03;
    }
  }
  &.green{
    top: ux(5);
    border-top: ux(2) solid #222;
    border-bottom: ux(2) solid #222;
    height: ux(7);
    >.bar{
      background-color:#0b3;
    }
  }
  &.blue{
    top: ux(12);
    border-top: 0;
    border-bottom: ux(2) solid #222;
    height: ux(5);
    >.bar{
      background-color:#0af;
    }
  }
}







.Bar{
  position: relative;
  display:inline-block;
  background-color:#f0f0f0;
  .box-sizing(border-box);
  >.level{
    .box-sizing(border-box);
    background-color:#b3cdce;
    position:absolute;
  }
  &.horizontal{
    width:ux(16); height:ux(4);
    border-bottom:ux(1) solid rgba(0,0,0,.25);
    >.level{
      border-right:ux(1) solid rgba(0,0,0,.25);
      width: 50%; height: 100%;
      left:0,
    }
  }
  &.vertical{
    width:ux(4); height:ux(16);
    border-right:ux(1) solid rgba(0,0,0,.25);
    >.level{
      border-top:ux(1) solid rgba(0,0,0,.25);
      width: 100%; height: 50%;
      bottom:0,
    }
  }
}


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

// do not use ux here, px only
// actually, anything px() needs to be moved to js
// since the px scale can change mid-game

body.mouse .StartupScreen>.twitter:hover{
  background-color: @selectYellow;
}

.StartupScreen{
  background:transparent;
  left: 0;
  position: absolute;
  top: 0;
  overflow: hidden;

  // (fix for chrome on windows adding 3d bevel to border
  ///left:ux(2);
  ///right:ux(2);
  ///bottom:ux(2);
  //
  width: 100%;
  height: 100%;
  // fix)

  >.twitter{
    position: absolute;
    background: url("images/ui/twitterButton.png") repeat 0 0 transparent;
    z-index: 1;
    cursor:@cursorPointer;

    image-rendering: initial;
    ///bottom: ux(7);
    ///left: ux(2);
    ///width:ux(11);
    ///height:ux(11);
    ///background-size: ux(11);
  }

  .foot{
    background: rgba(221, 238, 255, .75);
    box-shadow: 0 0 40px 40px rgba(221, 238, 255, .75);;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    font:bold .55em @uiFont;
    text-shadow: 0 0 5px #def;
    height:1em;
    z-index: 0;

    >.discord{
      text-transform: capitalize;
      opacity: 1;
      position: absolute;
      bottom: 0;
      left: 0;
      cursor:@cursorPointer;
      padding: .2em .5em .2em .5em;
      color: rgba(0, 0, 0, 0.7);
      color: #0065ff;
      text-decoration: underline;
      ///&:hover{
      ///  opacity:1;
      ///  color: #444;
      ///  background-color: @selectYellow;
      ///  text-shadow: none;
      ///}
    }
    >.version{
      ///text-transform: capitalize;
      text-transform: lowercase;
      opacity: 1;
      position: absolute;
      bottom: 0;
      right: 0;
      cursor:@cursorPointer;
      padding: .2em .5em .2em .5em;
      color: rgba(0, 0, 0, 0.7);
      ///&:hover{
      ///  opacity:1;
      ///  color: #444;
      ///  background-color: @selectYellow;
      ///  text-shadow: none;
      ///}
      >b {
        letter-spacing: -.4px;
      }
    }
  }



  >.clouds{
    position: absolute;
    width: 100%;
    height: 100%;

  }
  >.title {
    position: relative;
  }
  >.buttons>.menu{
    position: absolute;

    width: 9em;

    text-align:center;
    .box-sizing(border-box);

    >.Button{
      border:0;
      vertical-align: middle;
      text-align:left;
      line-height:1em;
      min-width: 3em;
      text-align: center;
      display:block;
      ///width: 10em;
      width:100%;
      background-color:#e5e5e5;

      box-shadow: 0 0 16px 4px rgba(0, 88, 99, 0.4); // darkest

      &.mousedown{
        background: #444 !important;
        color: #ddd;
      }
      &.continue:not(.disabled){
        ///background-color:@selectYellow;
        .verticalGradient(@selectYellow, darken(@selectYellow, 19%)); // eedd00
      }
      ///&:hover{
      ///  background-color:@selectYellow;
      ///}
      &.highlighted{
        background-color:@selectYellow;
        ///&:hover{
        ///  background-color:@selectYellow;
        ///}
      }
      &.disabled{
        ///background-color:#aabbbd;
        ///color:#88999b;
        color: #7f9294;
        background-color: #a0b4b6;
        opacity:1;
      }
    }
  }
}

body.mouse{
  .StartupScreen .foot>.discord:hover{
    opacity:1;
    color: #444;
    background-color: @selectYellow;
    text-shadow: none;
  }
  .StartupScreen .foot>.version:hover{
    opacity:1;
    color: #444;
    background-color: @selectYellow;
    text-shadow: none;
  }
  .StartupScreen >.buttons>.menu>.Button:hover{
    background-color:@selectYellow;
  }
  .StartupScreen >.buttons>.menu>.Button.highlighted:hover{
    background-color:@selectYellow;
  }
}






.StartupScreen > .buttons > .menu > .Button.exit{
  display:none;
}
.StartupScreen > .buttons > .menu > .Button.help {
  display: none;
}


// NEW FOR MOBILE
.StartupScreen > .title {
  padding: 0 !important;
}
.StartupScreen > .buttons > .menu {
  //!padding: ux(7) 0 0 0 !important;
  padding: minx(7) 0 0 0 !important;

  // curve the shadow effect
  border-radius: 2px;
}

.StartupScreen > .title {
  padding: 0 !important;
  position: absolute;
  width: 100%;
}
.StartupScreen > .buttons{
  position: absolute;
  width: 100%;
  z-index: 1;
}


///.StartupScreen > .buttons > .menu > .Button.help, 
///.StartupScreen > .buttons > .menu > .Button.shop {
///  margin-bottom: 0px !important;
///}


.StartupScreen > .buttons > .menu > .Button {
  // don't override js ux settings
  ///margin: 0px auto ux(1) auto !important;
  margin-top:0 !important;

  line-height: .65em !important;
  box-shadow: none;
  box-sizing: border-box;
  ///width: 9em;
  width: 100%;
}

body.desktop .StartupScreen > .buttons > .menu > .Button{
  // styles must be done in js since 
  // the px scale can change mid-game
  ///// startup screen uses GAME SCALE!
  //////font-size: ux(8);
  ///font-size: px(8);
  //line-height: .48em !important;
}

///.StartupScreen > .buttons > .menu > .Button:not(:hover):not(.continue){
.StartupScreen > .buttons > .menu > .Button:not(.continue){
  ///.verticalGradient(#e5e5e5, #bfcfcf);
  ///.verticalGradient(#e5e5e5, darken(#e5e5e5, 7%) );
  .verticalGradient(#eee, #ddd );
}
body.mouse .StartupScreen > .buttons > .menu > .Button:hover:not(.continue){
  .verticalGradient(#ddd, #ccc );
}
.StartupScreen > .buttons > .menu > .Button.help {
  display: block;
}
.StartupScreen > .buttons > .menu {
  padding: 0 !important;
  background-color: rgba(0, 88, 99, 0.4); //rgba(0, 0, 0, 0.27);
  margin: 0 !important;
  box-shadow: 0 0 16px 4px rgba(0, 88, 99, 0.4);
  display: inline-block;
  position: relative;
  ///width: auto;

}
//




.Popup.ValueSlider{
  border:0;
  width:ux(64);
  height:ux(10);
  background-color:#fff;
  text-align: left;
  box-shadow: 0 0 15px 2px rgba(0, 0, 0, 0.45);
  > .controls{
    position: absolute;
    left:0; top:0; right:0; bottom:0; width:100%; height:100%;
    .display-flex();
    .flex-wrap(nowrap);
    ///display: flex;
    ///flex-wrap: nowrap;
    align-items: center; 
    > .label {
      margin: ux(2);
      text-transform: capitalize;
    }
    > .Slider{
      height:ux(4);
      background-color:#444;
      .flex(auto);
      ///flex: auto;
      margin-right: ux(3);
      >.bar{
        .box-sizing(border-box);
        border-right:ux(1) solid rgba(255,255,255,.5);
        width: 50%; height: 100%;
      }
    }
  }
}























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

body.demo{
  .StartupScreen > .buttons > .menu > .Button.help {
    width: 100% !important;
  }
}

.StartupScreen >.lite{
  position: relative;
  top: 48px;
  float: right;
  padding-right: 48px;
}

body.mouse #purchase:hover{
  background-color: #f45;
  border-top: 1px solid rgba(255,255,255,.2);
}

#purchase {
  width: 100%;
  text-align: center;
  position: absolute;
  display: block;
  background-color: #333;
  color: #eee;
  bottom: 0;
  border-top: 1px solid rgba(255,255,255,.06);
  cursor:@cursorPointer;
  z-index:9;
  font-size: 14pt;
  ///&:hover{
  ///  background-color: #f45;
  ///  border-top: 1px solid rgba(255,255,255,.2);
  ///}

  padding: .5em;

  box-sizing: border-box;

  color: #fff;

  >h1 {
    font-weight: normal;
    font-size: 1.75em;
    display: inline-block;
    padding: 0 1em 0 .75em;
    vertical-align: middle;
    box-sizing: border-box;

    // makes text wrap on small screens,
    // covering menus buttons
    width: calc(~"50%" - .5em );
    margin:0;
    box-sizing: border-box;
    line-height: 1em;
  }
  >h2 {
    font-weight: normal;
    font-size: .75em;
    display: inline-block;
    text-align: left;
    vertical-align: middle;

    width: calc(~"50%" - .5em );
    margin:0 0 0 10pt;
    box-sizing: border-box;
  }
}

.demo.ConfirmDialog{
  width: 22em !important;
  background-color: #fd4455;
  >.content {
    background-color: #f45;
    //padding: 1em 2em;
    padding: 0;
  }
  >.content > .message {
    color: #fff !important;
    margin: .5em 1em 0 1em;
    padding-right: 1.5em !important;

    >h1{
      color: #333 !important;
    }
    b {
      font-size: 1.2em;
      font-weight: normal;
      line-height: 1.4em;
    }
  }
  a{
    color: #eee;
    text-decoration: none;
    background-color: rgba(255,255,255,.2);
    padding: ux(2) ux(4);
    border-radius:@radius;
    font-size: 1.25em;
    line-height: 1.5em;
    white-space: nowrap;
    display: block;
    text-align: center;
    cursor:@cursorPointer;
  }
  a:hover {
    background-color: #333 !important;
  }
  .Component.Button.clickable {
    background-color: rgba(0,0,0,.15) !important;
    color: #eee !important;
  }
  .content > .message > .wrapper{
    overflow:visible;
    //margin-bottom:1em;
  }
  .footer{
    padding-top: 0;
  }
}





body.demo{

  .NewDialog .form > .sizes > .Button {
    width: 25% !important;
    text-align: center;
  }
  .recipes .listItem.grayed:after {
    background-color: #ff5c6b;
    opacity: .7;
  }

  ///#main.missingRecipes .BuildingDialog>.content>.recipes{
  ///height: calc(~"100%" - @workspaceHeight) !important;
  ///}
  .BuildingDialog .getMoreRecipes,
  #main.missingRecipes .BuildingDialog .getMoreRecipes{
    display: none !important;
  }



  ///.BuildingDialog > .content > .recipes .ListComponent > .listItem.category,
  ///.BuildingDialog > .content > .recipes .ListComponent > .listItem.category:hover {
  ///  background-color: #ff4455;
  ///  color: #923;
  ///}
}







// // // // // // // // // // // // // // // //





//  * * *   *  * * * * *  *   *   *  
//  *   *   *  *          *   *   *  
//  *   *   *  * * * * *  *   *   *  
//  *   *   *  *          *   *   *  
//  *   * * *  * * * * *  * * * * *  ~newdialog


.NewDialog > .content > .message {
  background-color: #f5f5f5;
  padding: 1em !important;
  margin-bottom: .5em;
  font-size: 1.1em !important;
  color:#555 !important;
}
.NewDialog .randomize.Button {
  display: inline-block;
  width: ux(10) !important;
  height: ux(10) !important;
  float: right;
  background-color: transparent !important;
  top: -2px;
  position: relative;
}
.NewDialog .randomize.Button>canvas {
  margin: ux(-1);
}
.NewDialog .form > .worldName > .nameText {
  margin-bottom: .5em;
  width: calc(~"100%" - ux(11) );
}
.NewDialog .randomize.Button.mousedown > canvas{
  margin-top:0;
  margin-left:0;
}



// NewDialog Shop


.NewDialog .form .Button {
  display: inline-flex;
  .display-flex(inline-flex);
  justify-content: center;
  align-items: center;
  height: ux(9.6);
  line-height: 1.5em;
}


.NewDialog .form > .sizes{
  text-align: left !important;
}
.NewDialog .form > .sizes .options{
  height: ux(9.6);
  vertical-align: top;
}
.NewDialog .form > .sizes > .Button {
  ///width:25%;
  margin: 0 0 ux(2) 0;
  display: inline-block;
  ///padding: .4em .6em;
  width: auto !important;
}
.NewDialog .form > .sizes > .Button.large {
  margin-right: ux(2);
}



body:not(.premium){

  #main.vilmonic_large_maps_false .NewDialog>.content>.form>.sizes>.Button.medium>span,
  #main.vilmonic_large_maps_false .NewDialog>.content>.form>.sizes>.Button.large>span{
    padding-right: 15px + ux(.5);
  }
  #main.vilmonic_large_maps_false .NewDialog>.content>.form>.sizes>.Button.medium,
  #main.vilmonic_large_maps_false .NewDialog>.content>.form>.sizes>.Button.large{
    background-image: url("images/shop/purchaseBadge2.png");
    image-rendering: pixelated;
    background-repeat: no-repeat;
    background-position: center right;
    background-position: right top;
    background-position: 100% 15%;
    padding-right: 0;
  }

}


@media screen and (max-width: @smallSize){
  body.ru{
    .NewDialog .form > .sizes > .Button{
      ///font-size: .95em;
      ///letter-spacing: -.05em;
      font-size: .98em;
      letter-spacing: -0.02em;
      line-height: 1.6em;
      padding-left: .3em;
      padding-right: .3em;
    }
  }

  body.es{
    .NewDialog .form > .sizes > .Button{
      font-size: .98em;
      line-height: 1.6em;
      ///letter-spacing: -.02em;  
      padding-left: .3em;
      padding-right: .3em;
    }
  }

  .NewDialog {
    width: @almostFullSize;
    max-width: @almostFullSize;
    min-width: @almostFullSize;
  }
}


#mapWarning {
  ///background-color: #fa5;
  background-color: #f67;
}
#mapWarning > .footer > .Button.yes{
  background-color: #444;
  color: #eee;
}






///@media screen and (max-width: ux(114) ){
///
///  #main.vilmonic_large_maps_false .NewDialog .form > .sizes > .Button {
///    width: auto !important;
///    padding-left: ux(2) !important;
///    padding-right: ux(2) !important;
///  }
///
///}

.NewDialog .form > .sizes > .Button.mousedown,
body.mouse .NewDialog .form > .sizes > .Button.mousedown:hover{
  background-color: #333 !important;
  color: #eee !important;
}

body.mouse .NewDialog .form>.sizes>.Button:hover{
  background-color:@selectYellow !important;
}

.NewDialog{
  width:30em;
  .form{
    //padding: 0 2em;
    padding: 0 .5em;

    text-align: left;

    // ios bug fix
    // same bug fixed elsewhere with
    // position: relative; top: 0;
    z-index: 999;
    >.worldName{
      >.label{
        color: #999;
        ///margin-top: 1.5em;
        //margin-bottom: 2px;
        margin-bottom: 0;
      }
      ///>.nameText{
      ///  margin-bottom: .5em;
      ///}
    }
    .Button{
      border: 0;
      border: 0 none;
      background-color:#eee;
      .box-sizing(border-box);
      ///margin: 0 0 .5em 0;
      margin: 0;
    }
    .easy.Button{
      border-radius:@radius 0 0 @radius;
    }
    .hard.Button{
      border-radius:0 @radius @radius 0;
    }
    .easy.Button, .hard.Button{
      text-align: center;
    }
    >.sizes{
      width: 100%;
      text-align: center;
      ///white-space:nowrap;s
      >.Button{
        ///&:hover{
        ///  background-color:@selectYellow !important;
        ///}
        &.small{
          border-radius:@radius 0 0 @radius;
          // ios fix
          ///vertical-align: baseline;
        }
        &.medium{
          border-radius:0;
          background-color: #ddd;

          // avoid gaps btwn buttons
          margin-right: -1px;
          border-right: 1px solid #ddd;

          // ios fix
          ///vertical-align: bottom;
        }
        &.large{
          border-radius:0 @radius @radius 0;

          // snap button size to px integer so
          // $ button is not stretched
          border-right: 1px solid #eee;

          // ios fix
          ///vertical-align: bottom;
        }
      }
      .options{
        ///width:23%;
        ///margin-left:2%;
        width: 5.5em;
        text-align: center;
        padding-left:1px;
        padding-right:2px;
        margin-bottom: ux(2);
        &.warning{
          background-color: #ffddb2;
          color: #ff5600;
        }
      }
    }
    .difficulty {
      display: inline-block;
      margin-right: .5em;
    }
    >.tutorial.Button{
        border: 0;
        border: 0 none;
        margin: 0 0 .5em 0;
        background-color:#eee;
        .box-sizing(border-box);
        &.on{
          background-color:@selectYellow;
        }
    }
  }
}

.NewDialog.easy .Button.easy,
.NewDialog.hard .Button.hard{
  background-color:@selectYellow !important;
}

.NewDialog.small:not(.notvalid) .sizes>.Button.small:not(.mousedown),
.NewDialog.medium:not(.notvalid) .sizes>.Button.medium:not(.mousedown){
  background-color:@selectYellow !important;
}

//^ LARGE
.NewDialog.large:not(.notvalid) .sizes > .Button.large:not(.mousedown){
  background-color:#fb7 !important;
}
.NewDialog.large .sizes > .options{
  background-color: #ffddb2;
  color: #ff5600;
}
//~ GIANT
.NewDialog.giant:not(.notvalid) .sizes > .Button.large:not(.mousedown){
  background-color:#ff9995 !important;
}
.NewDialog.giant .sizes > .options.warning{
  background-color: #fbd3d2;
  color: #f94050;
}
//_ NOTVALID
///.NewDialog.notvalid .sizes > .Button.small,
///.NewDialog.notvalid .sizes > .Button.medium,
///.NewDialog.notvalid .sizes > .Button.large{
///  background-color: #dcdcdc !important;
///  color: #9e9e9e !important;
///}
.NewDialog.notvalid  .sizes > input[type=text].options.notvalid {
  background-color: #dcdcdc !important;
  color: #9e9e9e !important;
}

















//   * * * * *  * * * * *  * * * * *  * * * * *             
//   *          *              *          *                 
//   * * * * *  * * * * *      *          *       * * * *   
//           *  *              *          *                 
//   * * * * *  * * * * *      *          *                 
//
//   * * * * *  * * *   *  * * * * *  * * * * *  
//       *      *   *   *  *          *          
//       *      *   *   *  *   * * *  * * * * *  
//       *      *   *   *  *       *          *  
//   * * * * *  *   * * *  * * * * *  * * * * *  
// ~settings
// making new scrollable styles



.SettingsDialog .form .group > div > .languageButton {
  display: inline-block;
  vertical-align: middle;
  margin-left: 0;
  margin-right: 0;
  width: ~"calc(50% - .3em)";
  border: 0;
  background-color: #e5e5e5; ///#fff666;
  box-sizing: border-box;
  height: 2em;
  line-height: 2em;
  padding: 0;
}
.SettingsDialog .languageButton.mousedown,
.SettingsDialog .languageButton.mousedown:hover {
  ///background-color: @buttonGreen;
  background: #444 !important;
  color: #ddd;
}
body.desktop .SettingsDialog .languageButton:hover {
  background-color: @selectYellow;
}


.SettingsDialog > .header{
  height:auto;
  background-color: #eaeaea;
}
.SettingsDialog > .content > .message{
  display:none !important;
}
.SettingsDialog > .header > .title {
  font-size: 1.1em;
  white-space: normal;
  height: auto;
  line-height: normal;
  padding: .5em 1em .7em 1em;
  text-align: center;
}


.SettingsDialog .form > .group > div > .Slider{
  height:ux(7);
  border:ux(1) solid #fff;
  border-right:0;
  border-left:0;
  margin-top:ux(-1);
  margin-bottom:ux(-1);
  background-color:#eee;
  .box-sizing(border-box);
  cursor:@cursorPointer;
  >.bar{
    .box-sizing(border-box);
    border-right:ux(1) solid #555;
    width: 50%; height: 100%;
  }
}
.SettingsDialog .form > .group > div > .fxVolume{
  >.bar{
    background-color:#2b6;
  }
}
.SettingsDialog .form > .group > div > .musicVolume{
  >.bar{
    background-color:#2b6;
  }
}
.SettingsDialog.ConfirmDialog.Dialog{
  max-height: calc(~"100%" - ux(2));
}

// // // NEW v1.02


///.SettingsDialog > .form > .group > div {
///  text-align: left;
///}
///.SettingsDialog > .form .label {
///  display: inline-block;
///  margin-right: .5em;
///  ///min-width: 46%;
///}
.SettingsDialog .form > .group > div > .label{
  color:#333 !important;
  text-align: right;
  ///margin-left: -1em;
  display: inline-block;
  margin-right: .5em;
  ///min-width: 46%;
  ///width: calc(50% - 2.5em); 
  ///width: 52%;
  vertical-align: middle;

  width: ~"calc(50% - .5em)";
}

.SettingsDialog .form input,
.SettingsDialog .form > .group > div > .Slider{
  display: inline-block;
  vertical-align: middle;
  margin-left: 0;
  margin-right: 0;
  width: ~"calc(50% - .3em)";
}

.SettingsDialog > .content > .message{
  background-color: #ebebeb;
}
///.SettingsDialog .message {
///  background-color: #ebebeb;
///  padding:.75em 1.1em !important;
///  margin: -1.1em !important;
///  font-size: 1.05em !important;
///}
///.SettingsDialog .message>.wrapper {
///   width: 100%; 
///}
///.SettingsDialog .message>.wrapper>.scroller>.scrollable {
///  text-align: center;
///  ///font-size: 1.2em;
///  font-size: 1.05em;
///  margin-top: 2pt;
///}

.SettingsDialog .group {
  ///padding: 0 1em 0 2em;
  padding: 0 1em;
  border-bottom: 1px dotted #bbb;
}
.SettingsDialog .form > .group > div > .label > b {
  font-weight: normal;
  white-space: nowrap;
}
.SettingsDialog .group:last-child {
  border: 0;
}

// // //

.SettingsDialog > .content{
  overflow-x: hidden;
  flex:1;
  flex-basis:auto;

  .flex(1);
  .flex-basis(auto);
}
.SettingsDialog > .content > .wrapper{
  min-height: 100%;
}

///
///.SettingsDialog.ConfirmDialog.Dialog{
///  max-height: 100%;
///}
///.SettingsDialog.ConfirmDialog.Dialog > .content > .message{
///  margin-bottom: .5em;
///}
.SettingsDialog{
  width: 90%;
  max-width: 32em !important;

  display: flex !important;
  flex-direction: column;

  .display-flex() !important;
  .flex-direction(column);


  ///.wrapper{
  ///  padding: .5em 1em .6em 1em;
  ///  max-height: 65vh;
  ///  overflow-y: auto;
  ///  -webkit-overflow-scrolling: touch;
  ///  overflow-x: hidden;
  ///  margin: 0 ~"calc(-1em + 0px)";
  ///  ///margin-bottom: .5em;
  ///  padding-bottom: 0em;
  ///  box-sizing: border-box;
  ///  border: 1px solid #eaeaea;
  ///  border-width: 1px 0;
  ///  margin-top: 1.1em;
  ///  margin-bottom: .9em;
  ///  ///border-image: repeating-linear-gradient(90deg, #ccc 25%, #ccc 75%, #fff0 75%, #fff0 100% 20%) 27 / 1px / 0px round;
  ///  ///border-image: ~"repeating-linear-gradient(90deg, #ccc 25%, #ccc 75%, #fff0 75%, #fff0 100% 20%) 33 / 1px round";
  ///}
  .form{
    // ios fix, removes weird .5em gap at top (
    padding-top: .01em;
    // )
    padding-bottom: .25em;
    hr{
      margin-top: .6em;
      margin-bottom: .6em;
    }
    .group > div{
      margin:.5em 0;
      >.label{
        color:#aaa;
        text-align:left;
      }
    }
  }
}


.SettingsDialog .checkbox{
  text-align: left;
  white-space: nowrap;
}
.SettingsDialog .checkbox > div{
  background-color: #e5e5e5;
  border-radius:@radius;
  padding: 0 1px 2px 1px;
  height:ux(7);
  vertical-align: top;
}
.SettingsDialog .checkbox > span{
  white-space: normal;
  position: relative;
  margin-left: ux(1);
  height: ux(7);
  display: inline-block;
  padding: 1px;
  padding-right:ux(7);
  top: ux(1);
}
.SettingsDialog .checkbox > span > p {
  margin: 0;
  font-size: .8em;
  line-height: 1.25em;
}


// disabled due to new App.fx
.SettingsDialog .graphics.checkbox {
  display: none;
}



// DISABLED subpixel on mobile, too much ram
body.mobile .SettingsDialog .subpixel.checkbox {
  display: none;
}








// ios bug fix,
// mouse/key imput causes textfield and ok button to disappear 
// sam bug fixed elsewhere with z-index:999
.SaveDialog > .content > .fileName {
  position: relative;
  top: 0;
}




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

input[type=text]{
  width: 100%;
  color:#333;
  background-color: #eee;
  border:ux(1) solid rgba(0,0,0,.1);
  border-width: ux(1) 0 0 ux(1);
  padding: .2em .3em;
  .box-sizing(border-box);

  border-radius: 2px;

  //.user-select(all); messes up on mobile

  &:focus{
    background-color: #fcffab;
  }

  &.notvalid{
    background-color: #fdd;

    color: #e35;
  }

}

// org
///input[type=text]::-moz-selection{
///  color:#222; background:#5ad461;
///}
///input[type=text]::selection{
///  color:#222; background:#5ad461;
///}
// green
///// these need to be separate!
///input[type=text]::-moz-selection{
///  color:#222; background:@buttonGreen;
///}
///// ^ separate!
///input[type=text]::selection{
///  color:#222; background:@buttonGreen;
///}
// B/W
// these need to be separate!
input[type=text]::-moz-selection{
  color:#dfdfdf; background:#3a3a3a;
}
// ^ separate!
input[type=text]::selection{
  color:#dfdfdf; background:#3a3a3a;
}






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

#notepad{
  min-width:ux(156); // ru fix for history expanded

  // this needs to be in sync with NotepadDialog.MAX_HEIGHT
  // try going back to 80% if there are problems!
  // max-height:80% stops notepad scrolled 
  // from flickering on updates!
  ///max-height:80%;
  max-height:90%;
  //

  ///background-color: #666;
  background-color: #ecece9;
}
#notepad > .header {
  border-bottom: 1px solid #EcEce9;
}



// == == == == SCROLLING

#notepad >.content>.wrapper{
  width: 100%;
  height: 100%;
  overflow: hidden;
}
// for horizontal scroll (of population)
// messes up centered text in other tabs!
#notepad.selected_population >.content>.wrapper>.scroller{
  display: inline-block;
}
#notepadContent{
  display: inline-block;
}



// == == == == notepad TABS

#notepadTabs{
  .verticalGradient(#c5c5c5, #b8b8b8);
  text-align: left;
  padding-left: ux(3);
  padding-top: ux(1);
  margin-bottom: -1px; //fixes a ui4x windows 10 gap
}



// #bug: on ipad there is a gap with this
///#notepad > #notepadTabs:after{
///  z-index: 100;
///  content: " ";
///  display: block;
///  position: absolute;
///  width: 100%;
///  background: #eee;
///  height: ux(1);
///  left: 0;
///  border: 0;
///  margin-top: -1px;
///}
///#notepad.selected_photos > #notepadTabs:after{
///  .verticalGradient(rgba(68, 68, 68, 0.6),rgba(68, 68, 68, 0) );
///  height: ux(4);
///  ///border-top:ux(1) solid #444;
///}
///
///
//////#notepad.selected_photos > #notepadTabs:after{
//////  background: #444;
//////}
#notepad > #notepadTabs{
  border-bottom:ux(1) solid #eee;
  overflow: hidden;
}
#notepad.selected_photos > #notepadTabs{
  border-bottom:ux(1) solid #444;
  overflow: hidden;
}




#notepadTabs>.Button.mousedown {
  background: #444 !important;
  color: #ddd !important;
}




#notepadTabs > .Button{
  .verticalGradient(#e5e5e5, #d0d0d0);
  box-shadow: 0px 0px 7px 0px rgba(0,0,0,.1);
  color: #888;
  margin-bottom: 0;
  border: 0;
  border-radius:@radius @radius 0 0;
}
#notepad.selected_population #notepadTabs > .populationButton,
#notepad.selected_tasks #notepadTabs > .tasksButton,
#notepad.selected_badges #notepadTabs > .badgesButton,
#notepad.selected_photos #notepadTabs > .photosButton{
  .verticalGradient(#fff, #ecece9);
  color:#444;
}

// == == == == notepad CONTENT

@notepadContentBkg:#EcEce9;

#notepad>.content{
  height:calc(~"100%" - ux(21));
  background-color:@notepadContentBkg;
  color:#494949;
  ///padding:0 ux(8) ux(8) ux(8);
  text-align:left;

  padding: ux(8);
  box-sizing: border-box;

  
  max-height: ux(500);
  ///h2{
  ///  margin-top:0;
  ///}

  >h2{
    font-size: 1.75em;
    white-space: nowrap;
  }
}
#notepad:not(.selected_population)>.content{
  overflow-x: hidden;
}

#notepadContent{
  width:ux(138);
}

#notepad.selected_tasks #taskList > h2:first-child, 
#notepad.selected_population #populationHistory > report > h2:first-child{
  margin-top: 0;
  line-height: 1.2em;
}


#notepad #populationHistory,
#notepad #taskList,
#notepad #badgeList,
#notepad #photoList{
  display:none;
  ///padding-bottom: 2em;
}
#notepad.selected_population #populationHistory{
  display:block;
}
#notepad.selected_tasks #taskList{
  display:block;
}
#notepad.selected_badges #badgeList{
  display:block;
}
#notepad.selected_photos #photoList{
  display:block;
}
#notepad .noTasks,
#notepad .noBadges,
#notepad .noPhotos{
  text-align: center;
  padding: 2em 1em;
}

#notepad .noBadges{
  // " - ux(-3) " is to fix a less bug
  // calc(~"2em" + ux(3)); throws exception
  padding-top: calc(~"2em" - ux(-3));
  padding-bottom: calc(~"2em" - ux(-3));
}

// == == == == populationHistory

#populationHistory > report{
  line-height: 1.2em;
  >items{
    display: block;
    padding:0 1em;
    >item{
      display: block;
      text-transform: capitalize;
      padding-left:ux(5);

      &.score{
        padding-left:0;
      }
    }
    >.score{
      font-size: 1.5em;
      font-weight: normal;
      margin: 0.1em 0 0.5em;
    }
  }
  >history{
    display: block;
    padding:0 1em;
    margin: 1em 0;

    // iScroll tweak
    ///padding-bottom:2em;
    margin-bottom:0;

    >h3{
      margin: 0.1em 0 0.5em;
      font-size: 1.5em;
      font-weight: normal;
    }
    >tree{
      display: block;
      white-space: pre;
      padding-left:ux(5);
      padding-bottom: 2em;
      margin:0;
      i{
        font-style: italic;
        cursor:@cursorPointer;
      }
      u{
        font-style: italic;
        text-decoration: none;
        cursor:@cursorPointer;
      }
      a{
        cursor:@cursorPointer;
        color: #09f;
        >b{
          font-style:italic;
          font-weight:bold;
        }
        >i{
          font-style:normal;
          letter-spacing: 2px;
          &:before{
            content:"(";

          }
          &:after{
            content:")";
          }
        }
      }
    }
  }
}

tree > .species {
    padding-left: 0 !important;
    border-left: 0 !important;
}
tree .species {
    padding-left: 1em;
    border-left: 1px dashed #bbb;
    color: #aaa;
}
tree .species.live {
    display: block !important;
    color: #494949;
}

history.collapsed > tree .species {
    display: none;
}
#populationHistory > report > history > tree {
    clear: both;
}
#populationHistory > report > history > h3 {
    display:inline;
}

.moreButton {
  margin: ux(-2) 0 0 ux(1) !important;
}
.moreButton.Button.disabled {
  opacity: .25;
}


#populationHistory > report > items > item > i {
  white-space: nowrap;
  font-style: normal;
}



// == == == == taskList

#taskList > .currentTask > .task,
#taskList > .oldTasks > .task{
   h3 {
    margin: .1em 0 .5em 0;
    ///font-size: 1.5em;
    font-weight: normal;
  }
  background-color: #fff777;
  border-radius: 2px;
  margin: 0 -.1em;
  padding:1em;
  margin-bottom: 1em;
}
#taskList > .oldTasks > .task{//  gray        blue    green y  -y
  background-color: #88ff77;  //#d9d9d9 #ddd #b3e3f7, #88ff77 8dfd87
}
#taskList .task:last-child {
  margin-bottom: 0;
}

.task h2 {
  margin-top: 0;
}




// == == == == badgeList


#badgeList{
  ///margin:1em -1.25em 0 -1.25em;
  ///margin: ux(5) ux(-2) 0 ux(-2);
  margin: ux(-3) 0;
}
#badgeList > .badges{
  ///padding: 0px 0px 0px 1em;
  padding: 0;

  //display: flex;
  //flex-wrap: wrap;
  .display-flex();
  .flex-wrap(wrap);
}
///#badgeList > .badges > .row > .cell > .badgeItem{
#badgeList > .badges > .badgeItem{
  >img{
    vertical-align: middle;
    display: block;
    margin: auto;
  }
  >h3 {
    margin: .1em 0 .5em 0;
    font-size: 1em;
    font-weight: normal;
    vertical-align: middle;
    display: inline;
    hyphens: auto;
  }
  >em{
    margin: 0;
    font-size: .8em;
    display: block;
    opacity: .7;
  }
  background-color: #333;
  border-radius: 2px;
  ///margin: .5em;
  ///margin-bottom:ux(2);
  margin: ux(3);
  padding: ux(3) ux(4) ux(2) ux(4);
  display: inline-block;
  width: calc(~"50%" - ux(6));
  box-sizing: border-box;
  text-align: center;
}
///#badgeList .badgeItem:last-child {
///  margin-bottom: 0;
///}



// == == == == photoList

#photoList{
  ///margin:1.5em -1.25em 0 -1.25em;
}
#photoList > .photos{
  padding: 0px 0px 0px 1em;
}
#photoList > .photos > .photoItem{
  >img{
    vertical-align: middle;
    display: block;
    margin: auto;
  }
  >h3 {
    margin: .1em 0 .5em 0;
    font-size: 1em;
    font-weight: normal;
    vertical-align: middle;
    display: inline;
  }
  >em{
    margin: 0;
    font-size: .8em;
    display: block;
    opacity: .6;
  }
  background-color: #333;
  border-radius: 2px;
  margin: .5em;
  padding: ux(3) ux(4) ux(2) ux(4);
  margin-bottom:ux(2);
  display: inline-block;
  width: ~"calc(50% - 1.5em)";
  box-sizing: border-box;
  text-align: center;
}
#photoList .photoItem:last-child {
  margin-bottom: 0;
}

















#versionNotes{
  max-width: 35em;
  height:50%;
  overflow: hidden;
  line-height: 1.2em;
  // fix issue with nwjs 12.1 (used in 32bit only) 
  ///min-height: ux(88);
}
#versionNotes>.content{
  margin: 2em 0 0 0;
  padding: 0;
  height: calc(~"100%" - ux(8)); // @dlgHeaderH==11
  overflow:hidden;

  // fix issue with nwjs 12.1 (used in 32bit only) 
  min-height: 7em;
}
#versionNotes > .content > .message{
  padding: 0;
  margin: 0;
  margin-bottom: ux(5);
  height: calc(~"100%" - ux(22));
}
#versionNotes>.content>.message>.wrapper {
  padding: 0 3em;
  box-sizing: border-box;
  height: 100%;
  text-align: left;
  >.scroller>.scrollable{
    padding-bottom: 3em;
    >h3{
      font-size: ux(9);
      margin-top: ux(3);
      margin-bottom: ux(5);
    }
    >h4{
      font-size: 22px; // ux?
      margin-bottom: 6px;
      margin-top: 0;
    }
    >.version{
      font-weight:bold;
      display:block;
      margin:1em 0 0 0;
    }
    >p{
      margin: 0px;
      padding: .4em 0 0 0;
    }
  }
}
#versionNotes > .footer {
  border-top: 1px solid rgba(0,0,0,.1);
  background: #fff;
}

#versionNotes .credits{
  border:0px solid red;
  >.btn{
    background-color: #ddd;
    color: #444;
    padding: .5em 1em;
    display: inline-block;
    margin: .5em 0;
    border-radius: @radius;
    cursor:@cursorPointer;
  }
  >iframe{
    display:none;
  }
}
#versionNotes .credits.open > iframe{
    display:block;
    border:1px solid blue;
}


.credits.Dialog > .content>.main>.help>div {
  margin-top: .75em;
}


#ErrorMessage pre {

  .user-select(text);
  color: #e35;
  background-color: #fee;
  font-size: ux(4);
  padding: ux(1) ux(3);
  margin-right: ux(2);
  cursor:@cursorText;
}

.sadface{
  text-align:center;
  margin-bottom: 16pt;
  margin-top: 0;
}
.Dialog.large .sadface{
  text-align: left;
}



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


.Dialog.credits{
  width:ux(200); height:ux(300); max-height:90%;
  background: #fff;
  >.wrapper{
    background-color:#ddd;
  }
  >.wrapper>.scroller>.content{
    position:absolute;
    top:@dlgHeaderH;
    bottom:0;
    width:100%;
    text-align: left;
    padding: .5em 3em 2em 3em;
    background-color: #fff;
    border-top: 1px solid #f1f3f3;
    >.me{
      font-size: 14pt;
      line-height: 18pt;
    }
    .more>pre{
      border-top: 1px dotted #999;
      display:block;
      margin: 1.5em 0em;
      font-size: .73em;
      font-family: "DejaVu Sans Mono",monospace;
      line-height: 1.2em;
    }
    >button{
      background-color: #bbb;
      padding: 0.5em 1em;
      font-size: 1em;
      line-height: 1em;
      margin: .5em 0;
      &active{
        background-color: #999;
      }
    }
    a{
      color:#333;
      cursor:@cursorPointer;
      text-decoration: underline;
    }
  }
}
.Dialog.credits h2, .Dialog.credits h3 {
  margin-bottom: .5em;
  margin-top: 1.5em;
  font-weight: normal;
  font-size: 1.5em;
}



// mobile+desktop parity fix (
// fix issue with nwjs 12.1 (used in 32bit only) 
#credits > .content{
  overflow: hidden;
}
.Dialog.credits.ConfirmDialog > .content > .message > .wrapper {
  padding: 0 1em 3em 1em;
  box-sizing: border-box;
}
.Dialog.credits.ConfirmDialog > .content > .message {
  padding: 0 !important;
  height: 100% !important;
}
// fix )




#errorNotification{
    position: absolute;
    top: ux(4);
    right: 0px;
    width: ux(12); height: ux(12); line-height: ux(12);
    font-size: ux(14);
    color:#fff;
    background-color: rgba(255,255,255,.2);
    z-index: 9999;
    border-radius: @radius 0 0 @radius;
    text-align: center;
    cursor:@cursorPointer;
    display:none;
}
#errorNotification.error{
  display:block;
}




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



.task.ConfirmDialog.Dialog{
  background-color:#fff777;
}


.task.ConfirmDialog.Dialog > .footer > .yes.Button{
  background-color:rgba(0, 0, 0, 0.1); //looks like #dd6
}
.task.ConfirmDialog.Dialog > .footer > .yes.Button.mousedown {
  background-color: #333;
  color: #ddd;
}
.task.ConfirmDialog.Dialog > .content{
  padding:1em 0 0 0;
}
.task.ConfirmDialog.Dialog > .content > .message{
  margin:ux(4) ux(6) 1em ux(7);
  padding: 0 1em;
  // this causes left-aligned text for short messages
  ///>.wrapper{ width: 100%; }
}
.task.Dialog > .header,
.task.Dialog.active > .header{
  background: none repeat scroll 0 0 transparent;
  color: #333;
  padding: ux(5) ux(6) 0 ux(7);
  font-size: 1em;
}

tip {
  background-color: #f7f7f7;
  color: #666;
  display: block;
  font-size: 0.95em;
  font-style: italic;
  line-height: 1.15em;
  margin: 1em 0 0 0;
  padding: 1em ux(5) 1.25em ux(7);
  border-radius:@radius;
  text-align:left;
}
tip > b {
  color: #222;
}
.task h3{
  display: block;
  font-size: 1.4em;
  font-weight: normal;
  line-height: normal;
  margin: 0.1em 0 0.5em;
}
// russian fix
body.ru {
  .task h3{
    line-height: 1.0;
  }
  .ConfirmDialog.Dialog > .content > .message > .wrapper {
    line-height: 1.1em;
    font-size: .95em;
    // fix to hide scrollbar that shows up unneeded
    // thanks to line-height adj above
    padding-bottom: .2em;
  }
}



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


.achievements.ConfirmDialog.Dialog>.content>.message {
  text-align: center;
}

.achievements.ConfirmDialog.Dialog{
  background-color:#333;
  width: 20em;
  max-width: 20em !important;
}
.achievements.Dialog > .content > .message{
  ///padding: 1em .5em 0em .5em;
  padding: 1em .5em;
}
.achievements.ConfirmDialog.Dialog > .footer > .yes.Button{
  background-color: rgba(255, 255, 255, 0.1);
  color: #fff666;
}
.achievements.ConfirmDialog.Dialog > .footer > .yes.Button.mousedown {
  opacity:.5;
}
.achievements .scrollable{
  text-align: center;
}
.achievements h3{
  font-size: 1.4em;
  line-height: normal;
  font-weight: normal;
  // pre iscrolfix
  ///margin: .4em 0 .8em 0;
  margin: 0;
}
.achievements em{
  margin: 0;
  font-size: .8em;
  display: block;
  opacity: .6;
  // pre iscrolfix
  ///margin: -1em 0 1em;
  margin: 0;
}
.achievements img{
  vertical-align: bottom;
}
.achievements tip{
  opacity:.9;
  font-size: .9em;
  padding: .75em .5em 1em 1.25em;
}
.achievements p {
  margin-bottom: .7em;
}



// RU fix
body.ru{
  ///#taskList .achievement[data-id="Zombiton Summoner"] > h2 {
  #taskList .achievement > h2 {
    letter-spacing: -.7px;
  }
}




#firstAttackWarning {
  background-color: #e6e6e6;
}
#firstAttackWarning > .content > .message {
  color: #ff3737;
  padding-right: 1.5em;
  padding-bottom: 1em;
}
#firstAttackWarning > .footer > .Button.yes {
  ///background-color: rgba(255, 255, 255, 0.49);
  background-color: #f44;
  color: #fff;
}
#firstAttackWarning > .footer > .Button.yes.mousedown {
  background-color: #444;
}
#firstAttackWarning h3 {
  margin-top: .25em;
}
///#firstAttackWarning tip {
///  margin-bottom: 0;
///}


///.Component.ConfirmDialog.Dialog.lastAnim {
///  ///background-color: #f24;
///  ///background-color: #f35;
///  background-color: #f45;
///  width: ux(120) !important;
///}
///.ConfirmDialog.Dialog.lastAnim > .content > .Button.yes {
///  background-color: #eee;
///  background-color: #ddd;
///  /* background-color: #33333354; */
///  /* color: #e5e5e5; */
///  margin-top: 1.25em;
///  background-color: rgba(0, 0, 0, 0.15);
///  color: #eee;
///  /* background-color: rgba(255, 255, 255, 0.2); */
///}
///.ConfirmDialog.Dialog.lastAnim > .content > .message {
///  color: #f5f5f5;
///  padding: 0 2em;
///}
.Component.ConfirmDialog.Dialog.lastAnim {
  background-color: #333;
  width: ux(120) !important;
}
.ConfirmDialog.Dialog.lastAnim > .footer > .Button.yes {
  background-color: #eee;
  color: #333;
  margin-top: 1.25em;
  &.mousedown{
    background-color:#888;
  }
}
.ConfirmDialog.Dialog.lastAnim > .content > .message {
  color: #f5f5f5;
  padding: 0 2em;
}
.ConfirmDialog.Dialog.lastAnim > .content > .message img {
  float: left;
  margin-right: 1.5em;
  margin-bottom: .25em;
  margin-top: .5em;
}
// russian fix
body.ru{
  .ConfirmDialog.Dialog.lastAnim > .content > .message img {
    margin-top: 1.1em;
  }
}



///.achievements.ConfirmDialog.Dialog{
///  background-color:#333;//B/Y
///}
///.achievements.ConfirmDialog.Dialog > .content > .yes.Button{
///  background-color: rgba(255, 255, 127, 0.1);//B/Y
///  color: #fff666;//B/Y
///}
///.achievements.ConfirmDialog.Dialog > .content > .yes.Button.mousedown {
///  background-color: #333;
///  color: #ddd;
///  background-color: #000;//B/Y
///}
///.achievements.ConfirmDialog.Dialog > .content{
///  padding:1em 0;
///}
///.achievements.ConfirmDialog.Dialog > .content > .message{
///  margin:0 ux(6) 1em ux(7);
///  margin-top: -0.7em;
///  margin-left: 6px;
///  ///>.wrapper{ // this causes left-aligned text for short messages
///  ///  width: 100%; }
///}
///.achievements.Dialog > .header,
///.achievements.Dialog.active > .header{
///  background: none repeat scroll 0 0 transparent;
///  color: #fff666;
///  padding: ux(5) ux(6) 0 ux(7);
///  font-size: 1em;
///}
///.achievements .scrollable{
///  color: #fff666;
///}
///.achievements h3{
///  display: block;
///  font-size: 1.4em;
///  font-weight: normal;
///  line-height: normal;
///  margin: 0;
///}
///.achievements img{
///  vertical-align: bottom;
///}







.BookDialog {
  width:ux(150); max-width:95%;
  max-height: 70%;
  display: block;
  height: 100%;
}

.BookDialog > .content {
  background-color: #fffaaa;
  text-align:left;
  color: rgba(51, 51, 51,.8);
  background-color: #fffaaa;
  text-align: left;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  height: ~`'calc(100% - ' + (App.uiScale*11)+'px)'`;
  position: absolute;
  top: @dlgHeaderH;
  padding: 1em 3em 3em 3.5em;
  border-top: ux(1) solid #ddd;
  word-wrap: break-word;
  overflow-wrap: break-word;
}






// EXPORT



// copy button
.ExportDialog.ConfirmDialog.Dialog > .content > .message {
  padding-bottom: 1em;
}
.ExportDialog .copyButton,
.ExportDialog .copyButton:active,
.ExportDialog .copyButton:hover{
  border: 0;
  background-color: #444;
  color: #f5f5f5;
}
.ExportDialog .copyButton.mousedown {
  background-color: @buttonGreen;
  color: #333;
}
// still doesn't work on old ios, new? just hide
body.ios .ExportDialog .copyButton{
  display: none;
}



.ExportDialog{
  .content>.message>.wrapper>.scroller>.scrollable>.label{
    margin: .5em 0px 1em 0px;
    font-size: ux(5.5);
  }
  // FF fix
  .content>.message>.wrapper{
    width: 100%;
    box-sizing:border-box;
    overflow-x: hidden;
  }

  .dataString{
    width: ux(101);
    height: ux(44);
    font: ux(3.5) monospace;
    //font-size: ux(3.5);
    background-color: #eee;
    color: #888;
    ///overflow: hidden;
    padding: 1em;

    background-color: #fff;
    border:1px dashed #bbb;
    resize: none;
    outline: none;

    // fox for content div having less right padding
    margin-right: ux(2);

    // FF fix
    max-width: 100%;
    box-sizing: border-box;
    
    // make it easier for users to edit
    overflow-y: auto;
  }
}
.ExportDialog .dataString::-moz-selection{
  color:#222; background:#5ad461; background:@selectYellow;
}
.ExportDialog .dataString::selection{
  color:#222; background:#000; background:@selectYellow;
}
// export ALL
.ExportDialog.all .dataString::-moz-selection{
  background: #0f1;
}
.ExportDialog.all .dataString::selection{
  background: #0f1;
}
///.ExportDialog.ConfirmDialog.Dialog > .content > .message .wrapper {
///    overflow-x: hidden;
///}










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



@keyframes shake{
  0% { transform: translate(0px, ux(-1)) rotate(0.1deg); }
  25% { transform: translate(0px, ux(1)) rotate(-0.1deg); }
  50% { transform: translate(ux(-1), ux(-1)) rotate(-0.1deg); }
  100% { transform: translate(ux(1), ux(1)) rotate(-0.1deg); }
}
.shake,.quake,.QUAKE{
  animation-name: shake;
  animation-duration: 0.1s;
  transform-origin:50% 50%;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}
.quake{
  animation-duration: 0.15s;
}
.QUAKE{
  animation-duration: 0.2s;
}
// ( webkit version needed for nwjs 12.1
  @-webkit-keyframes shake{
    0% { -webkit-transform: translate(0px, ux(-1)) rotate(0.1deg); }
    25% { -webkit-transform: translate(0px, ux(1)) rotate(-0.1deg); }
    50% { -webkit-transform: translate(ux(-1), ux(-1)) rotate(-0.1deg); }
    100% { -webkit-transform: translate(ux(1), ux(1)) rotate(-0.1deg); }
  }
  .shake,.quake,.QUAKE{
    -webkit-animation-name: shake;
    -webkit-animation-duration: 0.1s;
    -webkit-transform-origin:50% 50%;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
  }
  .quake{
    -webkit-animation-duration: 0.15s;
  }
  .QUAKE{
    -webkit-animation-duration: 0.2s;
  }
// webkit )








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

// ~photo


// ( white top
body.whitetop #notepad.selected_photos{
  >.content {
    border-top: 9px solid #eee; // ux?
  }
  >#notepadTabs>.photosButton{
    color:#333 !important;
    .verticalGradient(#f9f9f9, #eee) !important;
  }
}
// )

#notepad.selected_photos{
  >#notepadTabs > .photosButton{
    background-color:#444;
    color:#ddd;
    .verticalGradient(#555, #444);
  }
  >.content{
    background-color:#444;
    color: #ddd;
  }
}
.pics{
  text-align:center;
  .header{
    height:ux(11);
    position: relative;
    padding: ux(1);
    box-sizing: border-box;
    line-height: ux(12);
    letter-spacing: ux(.125);
  }
}

.pics .header > .title > i {
  margin-right: ux(2);
}
.pics .header > .title > b {
  font-style: normal;
  font-weight: normal;
  letter-spacing: ux(-.120);
}


.pic {
  display: inline-block;
  text-align: left;
}

.pics>.pic {
  margin-bottom: 2em;

  // this pushes pics off-center in single column 
  ///margin-left: .5em;
  ///margin-right: .5em;
}
.pic > .Photo{
  position: relative;
  display: inline-block;
  box-shadow: 0px 0px 10px 0px rgba(0,0,0,.3);
  border-radius: 2px;
}
///.pic > .info{
///  margin: 3px 0 2em;
///  color:#727b7f;
///}
///.pic > .info > .subject {
///  margin-left: .5em;
///  /* float: right; */
///}
.Photo.Dialog .exportButton,
.pics>.pic .exportButton {
  position: absolute;
  top: 1px;
  right: 1px;
}


.Dialog.Photo,
.pic > .Photo{
  background: #f5f5f5;
  width:auto;
  >.header>.closeButton{
    display:none;
  }
  > .header > .title{
    text-align: center;
    font-style: italic;
    color: #aaa;
    top: 1px;
    position: relative;
    >i{
      margin-right: ux(2);
    }
    >b{
      font-style: normal;
      font-weight: normal;
      letter-spacing: ux(-.120);
      ///margin-left: ux(2);
    }
    //////// #AnalyzerDialog > .content >.wrapper>.scroller> .specimen
    //////font-size:~`((App.uiScale*4)+1)+'px'`;
    ///font-size: ux(4.25);
    font-size: ux(4.5);

    line-height: ux(12);
    letter-spacing: ux(.125);
  }
  >.content{
    position: relative;
    padding:ux(4); // must match App.photos.viewPic!
  }
}
.Photo > .content > .cover{
  position: relative;
  >.vignette{
    width:100%;
    height:100%;
    position: absolute;
    top:0;
    left:0;
  }
  img{
    vertical-align: top;
  }
  >.pic{
  }
}

.Photo > .header > .MenuBtn{
  position: absolute;
  // no closebutton
  top: ux(3);
  left: ux(3);
  background:transparent;
}
// conflicts with exportButton
///.windows .Photo > .header > .MenuBtn{
///  left: auto;
///  right: ux(3);
///}
// alt
.Photo.alt > .header > .closeButton{
  visibility: hidden;
}
.Photo.alt > .header > .MenuBtn{
  position: absolute;
  top: ux(3);
  left: ux(3);

  background:transparent;
}
.windows .Photo.alt > .header > .MenuBtn{
  right: auto;
  right: ux(3);
}

.Photo.develop > .content > .cover > .pic{
  opacity: 1 !important;
  -webkit-transition: opacity 10s ease-in-out;
  -moz-transition: opacity 10s ease-in-out;
  transition: opacity 8s cubic-bezier(0.2, 0.1, 0.5, 1);
}

.Photo.developing > .content > .cover > .pic{
  opacity: 0;
}
.Photo.developing > .content > .cover{
  background-color: #eab;
}












#SteamConnectingDlg{
  background: url("images/ui/steamLogo.png") no-repeat center 45% @uiBackgroundColor;
  position: fixed;
  left:0; top:0; right:0; bottom:0; width:100%; height:100%;
  z-index: 9999;
  >.msg{
    text-align: center;
    color: #ccc;
    line-height: .8em;
    .centerVertically();
    padding-top: 7em;
    padding-right: .3em;
  }
  opacity: 1;
}















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

input#commandBox {
  // purple
  ///background-color: #615;
  ///color: #f0b;
  ///position: fixed;
  ///font: normal 14px/15px "DejaVu Sans Mono";
  ///.placeholder( lighten(#615, 18%) );
  // transp
  ///background-color: rgba(0,0,0,.4);
  ///color: #eee;
  position: fixed;
  font: normal 14px/15px "DejaVu Sans Mono";
  .placeholder( rgba(255,255,255,.4) );
  border:0;
  padding: 6px 10px;

  color: #fcc;
  background-color: rgba(255, 85, 85, 0.6);
}

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


//== == == == == == == == == == == == invert colors
body.debug #debug.invert {
  /* filter: invert(85%) hue-rotate(-165deg) saturate(2.75); */
  /* filter: invert(69%) contrast(2) hue-rotate(170deg) saturate(4) brightness(1.15); */
  /* filter: grayscale(1) invert(.85); */
  /* filter: invert(1) contrast(.7) hue-rotate(180deg) saturate(1) brightness(.8); */

  .filter( invert(69%) contrast(2) hue-rotate(170deg) saturate(4) brightness(1.15) grayscale(.4) ); 
  border-left-color:#f9f9f9;
}
body.debug #debug.invert button.on {
  .filter( invert(1) hue-rotate(180deg) contrast(1) saturate(1) brightness(0.70) );
}
//== == == == == == == == == == == == invert colors




#debug.shift #actions > a:hover, #debug.shift button:hover {
  text-transform: uppercase;
  /* text-decoration: underline; */
  /* background: #5b5165;
  color: #ff3c64;
  color: #ddd; */
}

body.debug .dismissArea{
  width:75%;
}


@tiny:normal ~"10px/10px" "DejaVu Sans Mono";
@small:normal ~"10px/11px" "DejaVu Sans Mono";
@wide:bold ~"11px/9px" "DejaVu Sans Mono";
@slim:normal ~"11px/9px" "DejaVu Sans Mono";
@large:normal ~"12px/13px" "DejaVu Sans Mono";

@med:#7f8; 
@dark:#333;
@darker:rgba(0,0,0,.3);

#debug{
  position:fixed;
  left:75%;
  width:25%; height:100%;
  font:@tiny;
  color:lighten(@dark, 15%);
  background:@light;
  display:none;
  font:@tiny;
  ///z-index: 99;

  z-index: @DEBUG_Z_INDEX;

  ///outline:1px solid rgba(99,99,99,.4);
  top: 0px;
  cursor: auto !important;
  background:#ddd;
  overflow: hidden;

  border-left: 4px solid #333;
  box-sizing: border-box;
}
body.debug #debug{
  display:block;
}
body.debug #content{
  width:75% !important;
  right: unset !important;
}

#debug button#action_grimy {
  background-color: #ccc;
  &.on{
    background-color: #8eb;
  }
}

button#action_repulsive.clickable {
  background-color: #fff999;
  color: #666;
}

button#action_fast.clickable {
  background-color: #b0f5b9;
}
#debug button#action_fast.on {
  color: #7f8;
}
#debug button#action_give {
  color: #f73;
  color: #ae734c;
}
#debug button#action_put {
  color: #859900;
}

#debug button#action_easy.on {
  color: #fff;
  background-color: #4c0;
}

#debug button#action_clear {
  position: absolute;
  right: 0; bottom:-2px; width: 20px; height: 20px;
  background: url("images/ui/debug_clear_button.png") no-repeat scroll 0 0 #b4f2ff;
  padding: 0; z-index:1;
  >b{
    display:none;
  }
  right: -4px; 

  // COLORV2
  border:2px solid #fff;
}
#debug button#action_cmd {
  position: absolute;
  right: 18px; bottom:-2px; width: 20px; height: 20px;
  background: url("images/ui/debug_enter_button.png") no-repeat scroll 0 0 #fff888;
  padding: 0; z-index:1;
  >b{
    display:none;
  }
  right: -4px; 

  // COLORV2
  border:2px solid #fff;
}


#debug > .content {
  position: absolute;
  bottom: 70px;
  top: 0;
  width: 100%;
}
#debug > .footer {
  border-top: 3px solid #fff;
  background-color:#ced4d4;/// #e9ecec #88e5ff;
  color:#444;
  bottom: 0;
  width:100%;
  ///height: 70px;
  position: absolute;
  .box-sizing(border-box);
}
#debug.footerClosed > .content {
  bottom: 5px;
}

#debug.footerClosed > .footer {
  height: 5px;
  border-top: 5px solid #ced4d4;/// #7ce0ff;
  >#watch{
    display:none;
  }
  >#closeFooter{
    background-image:url("images/ui/debug_arrowUp.png");
    opacity: 1;
    background-color:#c4c9c9///#f3ffff;
  }
}
#closeFooter{
  position: absolute;
  bottom:0; 
  width: 18px; height: 11px;
  background:rgba(0,0,0,.2) url("images/ui/debug_arrowDown.png") no-repeat scroll center center;
  cursor:pointer;
  z-index: 1;
  opacity: 0.7;
  border-radius: 0 2px 0 0;
}


// ~ ~ ~ ~ ~ watch

#watch{
  position:relative;
  top:3px; left:0; width:100%;
  padding:2px 2px 3px 5px;
  .box-sizing(border-box);
  line-height:1em;
  > span{
    display:inline-block;
    width: 50%;
    float: left;
    padding:0;
    .box-sizing(border-box);

    overflow: hidden;
    border-right: 3px solid transparent;

    > .key{
      opacity:.5;
    }
  }
  :last-child{
    margin-bottom:5px;
  }
}
///body.inactive #debug > .footer {
///  background-color: #b0baba;//#ccd3d3;
///}




// ~ ~ ~ ~ ~ actions

#actions{
  position:relative;
  width:100%;
  padding:2px;
  clear:both;
  .box-sizing(border-box);
  .user-select(none);

  // COLORV2
  background-color: #fff;
}
#actions.hidden{
  height:0 !important;
  overflow:hidden;
}

// mobile/touch
#debug button#debugCompact{
  position: absolute;
  top: 0; left: -25px;
  width: 25px; height: 25px;
  z-index: 9;
  border-right: 0;
  border-radius: 12px 0 0 12px;
  outline: 0;
}
#debug button#debugCompact_cmd{
  position: absolute;
  top: 28px; left: -25px;
  width: 25px; height: 25px;
  z-index: 9;
  border-right: 0;
  border-radius: 12px 0 0 12px;
  outline: 0;
  background: url("images/ui/debug_enter_button.png") no-repeat scroll center #fff888;
  border-color:#95dad2;
  text-indent: 100%;
  overflow: hidden;
}



// ... actionGroup
.actionGroup {
    display: inline;
    margin: 0;
    ///line-height: 8px;
}
.actionGroup.open {
    margin-top: 2px;
    margin-right: 6px;
    padding-bottom: 0;
    padding-top: 9px;
    background-color: #eaeeef;
    border-left: 2px solid rgba(0, 0, 0, 0.05);

    padding: 0;
    display: block;
}
#actions button, #actions span, #actions div {
    vertical-align: bottom;
}
.actionGroup button, .actionGroup span {
    vertical-align: middle;
}
.actionGroup > .name::after {
    content: "…";
}
.actionGroup.open > .name::after {
  content: ">";
  margin-left: 3px;
  margin-right: -3px;
}
.actionGroup > .name {
  display: inline-block;
  margin: 2px;
  padding: 3px 4px;
  cursor:pointer;
}
.actionGroup.open > .name {
  padding-left: 2px;
}
#actions .actionGroup > button, #actions .actionGroup > span {
    display: none;
}
#actions .actionGroup.open > button, #actions .actionGroup.open > span {
    display: inline-block;
}
.actionGroup.fungs>.name {
  color: #0088dd;
}
.actionGroup.fungs.open {
  background-color: #c5f2ff;
}

.actionGroup.anims>.name {
  color: #ff7700;
}
.actionGroup.anims.open {
  background-color: #ffd7a6;
  background-color: #fdb;
}
#debug .actionGroup.anims button.on {
  color: #fb9;
}

.actionGroup.view>.name {
  color: #94b;
}
.actionGroup.view.open {
  background-color: #f6edff;
}
#debug .actionGroup.view button.on {
  color: #dcf;
}


.actionGroup.music.open {
  background: #bfa;
}
.actionGroup.music>.name {
  color: #1b0;
}

.actionGroup.misc.open {
  background-color: #cff;
}


.actionGroup.sprites>.name {
  color: #adb300;
}
.actionGroup.sprites.open {
  background-color: #fbffc6;
}


.actionGroup.addons.open{
  background-color: #9f9;
}
.actionGroup.addons>.name {
  color: #0c0;
}

// ...

#actions span{
  display:inline-block;
  > input{
    border-width:2px;
    //box-shadow: inset 0px 0 10px 0 #fff;
    box-shadow: inset 0px 0 50px 0 rgba(255, 255, 255, .5);
    border-radius:0 3px 3px 0;
    padding:0 0 0 1px;
    margin:1px 2px 0 -4px;
    font:normal 9px "DejaVu Sans Mono";
    line-height:11pt;
    width:3em;
    vertical-align: top;
    height: 18px;
  }
  &.hot{
    background: none repeat scroll 0% 0% #FFF555;
    line-height: 20px;
    border:solid #fff555;
    border-width: 0px 0;
    outline: 2px solid rgba(255, 245, 85,.5);
    >button,>input{
      opacity:.5;
    }
  }
}
#group_render_preemptiveSkip>input {
  width: 6em !important;
}

#group_addons_bitmap > input {
  width: 6em !important;
  text-align: left;
}
#group_bugs_gene > input {
  width: 6em !important;
  text-align: center;
}
#group_give > input {
  width: 4.5em !important;
}
#group_filter > input {
  width: 4em !important;
}
#group_put > input {
  width: 3.5em !important;
}
#actions > a{
  display: inline-block;
  box-sizing: border-box;
  >b{
    display: inline-block;
    vertical-align: bottom;
  }
}
#actions > a,
#debug button{
  vertical-align: top;  
  border:0;
  background:#dfe3e5;
  background: rgba(0,25,35,.12);
  color:#333;
  padding:2px 3px;
  border-radius:3px;
  cursor:pointer;
  margin:1px 2px 0 0;
  font:@slim;
  line-height: 12px;
  height:18px;
  >b{
    position: relative;
    font-weight:normal;
  }
  &:active:hover{
    opacity: .5;
  }
  &.on{
    background-color:#8eb;
    color:#084;
    background-color: #5f6568;
    color: #fff999;  
  }
}

#debug #action_DEV{
  background-color:#f00;
  color:#fff;
  border-color:#f00;
}
#debug #action_DEV.on{
  color:#333;
  background-color:#8df
}

#debug button#action_pause{
  width:4.5em; display:inline-block;
  background:#f9a;
  ///color:#d38;
}
#debug button#action_pause.on{
  background: #2ee73b;
  background:#4ae155;
  background:#55df5f;
  ///color: #084;
  color: #444;
}

#debug button#action_show{
  border:0;
  position:absolute;
  top:0px; right:0px;
  width:16px; height:16px;
  margin:0;
  line-height:12pt;
  background:transparent url("images/ui/debug_close_button.png") no-repeat scroll center center;
  >b{
    display:none;
  }
}
#debug button#action_show:hover{
  background-color: #fff777;
}

#debug button#action_shellTools{
  overflow:hidden;
  width:16px;
  background:#fff url("images/ui/bug.png") no-repeat scroll center center;
  >b{
    display:none;
  }

}

// ~ ~ ~ ~ ~ cmdLine

#cmdLine{
  position:relative;
  height:24px; width:100%;
  overflow:hidden;
  > #cmdText{
    position:absolute;
    left:0; top:0; right:0; bottom:0;
    width:100%;
    padding:2px;
    overflow-y:auto;
    -webkit-overflow-scrolling: touch;
    line-height:12px;
    .box-sizing(border-box);
    resize:none;
    margin:0;
    font:@small;
    border-width:0; 
    .placeholder( rgba(111, 111, 111, .5) );
    border-top-width:2px;
  }
}
#debug textarea:focus{
  background:#fffbbb;
  border-color: rgba(0, 0, 0, 0.1);
  box-shadow: none;
}
#debug input,
#debug textarea{
  border-style:solid;
  color:#666;
  // yellow
  ///background:#fffccc;
  ///border-color:#eeebbb;
  // green
  ///background: #d6ffd8;
  ///border-color: #a5f3ae;
  // blue
  ///background:#d6f4ff;
  ///border-color:#b2e9ff;
  // white
  background:#f2f2f2;
  border-color:#e5e5e5;

  border-color: #d5d8da;


  border-color: rgba(0,0,0,.13);
  border-left-color: transparent;
  background: transparent;


  &:focus{
    ///// blue
    //////background:#d6f4ff;
    //////border-color:#b2e9ff;
    /////////color:#09e;
    ///// yellow
    ///background:#fffbbb;
    //////border-color:#eee999;//#eeebbb;
    ///border-color: rgba(0, 0, 0, 0.1);
    ///// red
    //////background:#ffe9eb;
    //////border-color:#fcd;
    //////color:#f04;

    box-shadow: inset 0px 0 50px 0 #fff999;
  }
}



#cmdThumb{
  // mobile/touch gets a bigger thumb
  @thumbH:~`( System.touch?(12 * System.pxRatio):8 )+'px'`;
  position:relative;
  left:0; bottom:0; right:0;
  width:100%; height:@thumbH;
  cursor:row-resize;
  background-color:#fff;
  z-index:10;
  &:after{
    content: " ";
    position: relative;
    display: block;
    top:49.5%;
    height:100%;
    box-sizing:border-box;
    top: ~"calc(50% - 1px)";
    width:100%; height:0;
    border-top: 2px dotted #999;
    margin: auto;
  }
  &:active,
  &.dragging{
    background-color:#ffa;
  }
}




/*

(((((((   * * * * *  * * * * *    * * *    * * * * *  * * * * *
 )))))))      *      *       *  *       *  *          *        
(((((((       *      * * * * *  * * * * *  *          * * * * *
 )))))))      *      *   *      *       *  *          *        
(((((((       *      *     *    *       *  * * * * *  * * * * *

~trace 
*/

  
  


/* BEFORE APP LOAD */

///body.ready > #trace{
///  z-index: -1;
///  display: none;
///}

body > #trace{
  position: fixed;
  background: @uiBackgroundColor;
  margin: 0;
  top: 0px; right: 0px;
  left: 0px; bottom: 0px;
  padding:10px;
  .box-sizing(border-box);
  width: auto;
  overflow: hidden;
  overflow-y: auto;
}
body > #trace > .item{
  line-height: normal !important;
  background: transparent;
  background-color: transparent !important;
  color:#4d7 !important;
  border:0;
  padding-left:2em;
  .box-sizing(border-box);
  font:9pt monospace;
  >.comment {
    display:inline;
  }
  >.info {
    position: relative !important;
    top: auto;
    text-align: right;
    margin-right:10px;
    &:hover{
      background: transparent !important;
    }
    >.type,
    >.time{
      cursor: default;
    }
  }
  >.count {
    float: left;
    //margin-right:10px;
    margin-left:-2em;
  }
}
body > #trace > .item.warning {
    background: #443 !important;
    color: #aa0 !important;
}
body > #trace > .item.error {
    color: #f46 !important;
    background: #433 !important;
}
body > #trace > .item * :hover,
body > #trace > .item * {
  background: transparent !important;
  padding: 0 .5em 0 0 !important;
}






/* AFTER APP LOAD */

#trace{
  border-top:0px solid white;
  z-index:0;
  position:absolute;
  top:8em; bottom:0;
  width:100%;
  overflow:auto;
  -webkit-overflow-scrolling: touch;
  .box-sizing(border-box);
    background-color: #fff;
  &.error{
    background-color:#fdd;
    color:#c03;
  }
  &.warning{
    background-color:#ffd;
    color:#c60;
  }
  &.info{
    background-color:#fff;
    color:#777;
  }
  // item
  >.item{
    position:relative;
    background-color: #eee; /// #ebf3f5;
    border-bottom:.2em solid #fff;
    padding:3px 10px 3px 5px;
    clear:both;
    .comment>a{
      text-decoration:underline;
      cursor:pointer !important;
      color: #06f;
    }
    >.count{
      opacity:.35;
      display:inline-block;
      min-width:1.5em;
      padding:0 2pt 0 0;
      margin-right:-3px;
      text-align:right;
      vertical-align: top;
    }
    &.error{
      background-color:#fdd;
      color:#c03;
    }
    &.warning{
      background-color: #fd0;
      color: #f60;
    }
    &.cmd,&.code{
      background-color:#bbb;
      color:#222;
      >.comment>.cmd{
        color:#fff;
      }
    }
    &.load{
      background-color:#333;
      color:#fff;
    }
    &.Steam{ // -- -- -- -- -- Steam
      color: #53f;
    }
    &.SteamErr{ // -- -- -- -- SteamErr
      color: #f30;
    }

    &.Shell{
      color: #444;
      background-color: #acf;//#d3ddff;
    }
    &.main{
      color: #444;
      background-color:#c0ccff;
    }

    &.Save{
      color: #444;
      background-color: #1d5;
    }
    &.addon{
      background-color: #fa4;
    }

    &.Mouse{
      color: #333;
      background-color: #fff;
    }
    &.Guide{
      background-color: #fd9;
    }
    &.Analytics{
      background-color: #ccc;
      color: #999;
    }
    &.DEV{
      color: #ffffff;
      background: repeating-linear-gradient(
        -45deg, #e15 0px, #e15 10px, #f46 10px, #f46 20px
      );
    }

    &.cordova{
      background: #39f;
      color: #222;
    }
    &.Shop{
      background-color: #0bf;
      color: #fff;
    }
    &.MusicPlayer{
      ///background: #bfa;
      ///color: #1a0;
      background: #333;
      color: #2e0;
    }
    &.patch{
      background: #fff888;
      color: #555;
    }

    .palette{
      .user-select(none);
      display: inline-block;
      height: 10px;
      vertical-align: middle;
      background-color:black;
      >span{
        display:inline-block;
        width:10px;
        height:10px;
      }
    }
    b{
      color:darken(@dark, 10%);
    }
    &:last-child{
      margin-bottom:10px;
    }
  }
}

.item.cmdresult {
  background-color: #dde3e7 !important;
}
.cmdresult >span >.cmd {
  background-color: #0f9;
  padding: 1px 3px;
}

// info
#trace>.item>.info{
  padding:0 2px 0 3px; //0 2px;
  opacity:.40;
  position:absolute;
  top:0; right:0px;
  > .type{
    display:inline;
  }
  > .time{
    display:none;
  }
}
#debug > #trace>.item>.info:hover{
  ///box-shadow: -1px 1px 2px 0px rgba(0,0,0,.25);
    border: 2px solid #fff;
    top: -1px;

  opacity:1;
  background-color: #555;
  color: #eee;
  >.type{
    background-color: #f15580;
    display: inline-block;
    margin: -6px -2px -6px -6px;
    padding: 2px 3px;
  }
  > .time{
    display:inline;
    >.elapsed{
      background-color: #ccc;
      padding: 2px 3px;
      margin-left: 3px;
      display: inline-block;
      color: #666;
    }
  }
}
// comment
#trace>.item>.comment{
  display: inline;
  width: 100%;
  white-space: pre-wrap;
  word-wrap: break-word;
  overflow-wrap: break-word;

  >pre,>plaintext{
    //max-height: 200px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    margin: 5px -10px 5px -5px;
    padding: 5px 10px;
    border: 1px dashed;
    border-right: 0;
    border-left: 0;
    max-width: 100%;
    word-break: break-word;
    white-space: pre-wrap;
  }
}

#trace > .item > .trusted > script[type="text/plain"] {
  display: block;
  max-height: 35em;
  overflow: scroll;
  padding: .75em .3em;
  background-color: #fffaaa;
  color: #595959;
  margin-left: 1em;
}

.item.graph{
  border-top: 1px dashed #8d9;
}
.item.graph > .comment > img {
  max-width: 100%;
  max-height: 65px;
  margin-bottom: -5px;
  image-rendering: auto;
}
.item.graph > .comment > img:active {
  max-height: 400px;
  max-width: 1000px;
}
.item.graph > .comment > .msg {
  margin-top: 5px;
  display: inline-block;
  width: 8em;
}


span.comment.trusted:after {
  content: "HTML";
  position: absolute;
  right: 0;
  padding: 1px 1px 0 3px;
  background-color: #FFF68C;
  color: #8E8E8E;
  font-size: 8px;
  line-height: 7px;
  bottom: -2px;
}


#trace>.item>.comment>input[type=text]{
  border:0;
  background-color:#eee;
  color:#999;
  display: block;
  width: 100%;
  &:focus{
    color:#333;
  }
}





#trace > .item textarea {
  display: block;
  width: 100%;
  margin: 2px 0;
  border: 0px solid #0000005e;
  background: #ffc;
  height: 1.1em;
  overflow: hidden;
}





body.error #trace{
  border-top-color:#f57;
}
pre{
  white-space: pre-wrap;
  word-wrap: break-word;
  overflow-wrap: break-word;
}


// 
// replaces imageSmoothingEnabled?
// 
// this needs to go last now
//img,
canvas{
  .pixelated();
}











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

button#action_nosave {
  background-color: #fde;
}
button#action_nosave.on {
  background-color: #f18;
  border-color: transparent;
  color: #eee;
}

@recordWidth: 1102px - 4px; // -4 to allow a 2px 
@recordHeight:620px - 4px;  // recording border

body.recording #main {
  width:@recordWidth !important;
  height:@recordHeight !important;
  border: 20px solid black;
  margin: 0px !important;
}
body.recording #content,
body.recording.debug #content {
  width:@recordWidth !important;
  height:@recordHeight !important;
  margin: 0!important;
}





.fpsCounter{
  color: #eff;
  font: normal .9em "DejaVu Sans Mono";
  z-index:9;
  position: fixed;
  display:none;
  padding: 1px 2px;
  &.visible{
    display:block;
  }
}

#songTitle {
  font: normal 8pt "DejaVu Sans Mono";
  z-index: 9;
  position: absolute;
  display: block;
  padding: 2px 2px;
  left: 0;
  bottom: 0;
  background-color: rgba(238, 238, 238, 0.5);
  color: #333;
}







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

body.desktop{
  .StartupScreen > .buttons > .menu > .Button {
    line-height: 0.8em;
  }
  .StartupScreen > .buttons > .menu > .Button.exit{
    display:block;
    ///width: calc(~"4.5em" - ux(.5) ) !important;
    //!width: calc(~"50%" - ux(.5) ) !important;
    width: calc(~"50%" - minx(.5) ) !important;
    float: right;
  }
  ///.StartupScreen > .buttons > .menu > .Button.help {
  ///  float: left;
  ///}
  .StartupScreen > .buttons > .menu > .Button {
    ///width:9em;
    width:100%;
  }
}








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

.PromptDialog .wrapper {
  width: 100%;
}
.PromptDialog textarea.value {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid rgba(0,0,0,.20);
}
.PromptDialog > .header > .title {
  margin: 0 .5em;
}
.PromptDialog.Dialog > .content {
  ///padding: 1em 0;
  ///padding: .5em 0 0 0;
  padding: 0;
}
.PromptDialog.Dialog > .content > .message {
  ///margin: 0 1em .75em;
  margin: 0;
  padding: .75em;
}
.PromptDialog.Dialog > .content > .message textarea{
  resize: vertical;
  height: ux(40);
  font: normal 12px "DejaVu Sans Mono";
  padding: .5em .25em;

  ///background-color: rgba(0,0,0,.07);
  ///border: 1px solid rgba(0,0,0,.07);

  ///border: 1px dashed #bbb;
  ///background-color: #fff;

  border: 1px dashed rgba(0,0,0,.25);
  background-color: rgba(0,0,0,.06);
  color: #444;
}
.PromptDialog.noLabel .label {
  display: none;
}
.PromptDialog .label {
  margin: 0 0 .5em;
  font-size: 1.15em;
}
.PromptDialog .wrapper>.scroller>.scrollable>.value::-moz-selection{
  color:#222; background:#5ad461; background:@selectYellow;
}
.PromptDialog .wrapper>.scroller>.scrollable>.value::selection{
  color:#222; background:#000; background:@selectYellow;
}
.PromptDialog .wrapper>.scroller>.scrollable{
  font-size: 0;
}

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


.ConstantsDialog{
  background-color: #fff;
  font-size: .8em;
  line-height: 1.2em; // matches input.value height v
  width: 29em;
}
.ConstantsDialog .content{
  text-align: left;
  font-family: "DejaVu Sans Mono";
}
.ConstantsDialog .group>.name {
  font-weight: bold;
  color: #222;
  margin-top: .5em;
  font-size: 1.15em;
  line-height: 1.25em;
}
.ConstantsDialog .item > .name {
  display: inline;
  color: rgba(0, 0, 0, 0.3);
}
.ConstantsDialog .group .item {
  color: #fff;
  padding:1px 0px 1px 10px;
  margin: 0px 10px;
}
.ConstantsDialog input.value {
  width: 7em;
  margin-left: .5em;
  border: 0;
  background: #eee;
  padding: 1px 3px 0px 3px;
  float: right;
  color: rgba(0,0,0,.20);
  border-left: 1px solid rgba(0,0,0,.07);
  margin-top: -1px;
  height: 1.2em;// matches .ConstantsDialog line-height ^
  font-family: "DejaVu Sans Mono";
  letter-spacing: -.5px;
}
.ConstantsDialog .header>.closeButton>canvas {
    vertical-align: top;
}
.ConstantsDialog .item.diff .name {
  color: #000;
}
.ConstantsDialog .group .item.diff {
  background: #ebebeb;
}
.ConstantsDialog .group .item.diff:nth-child(odd) {
  background: #dedede;
}
.ConstantsDialog .item>.default {
  display: inline;
  float: right;
  margin-left: 3px;
}
.ConstantsDialog .item.diff>.default {
  color: rgba(0,0,0,.25);
}
.ConstantsDialog .item.diff input.value {
  background-color: rgba(0,0,0,.14);
  color: #444;
}
.ConstantsDialog .item.dirty input.value {
  background-color: #faced5;
  color: #444;
}
.ConstantsDialog .settings {
  border-bottom: 1px dotted #ddd;
  padding-bottom: 1em;
}
.ConstantsDialog .Button {
  margin: 1em 0 0;
  border: 0;
  background-color: #e5e5e5;
}
.ConstantsDialog .active.Button {
  background-color: #ffd1da;
  float: right;
  width: 5em;
  text-align: center;
}
.ConstantsDialog.isActive .active.Button {
  color: #333;
  background-color: #2e5;
}
.ConstantsDialog .save.Button {
  background: #fff666;
  float: left;
  margin-right: .5em;
}
.ConstantsDialog.dirty .save.Button {
  background: #fcd;
  color: #f06;
  float: left;
  margin-right: .5em;
}
.ConstantsDialog .import.Button {
  float: left;
}
button#action_override.on {
  background-color: #2e5 !important;
  color: #333 !important;
}
#action_override > b:after {
  content: "…";
}




body.videoCapture{
  margin:0 !important;
  left:0, !important;
  right:0 !important;
  top:0, !important;
  bottom:0 !important;
  width:100% !important;
  height:100% !important;
  border-radius:0 !important;
  border:4px solid #000 !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
}



// window chrome

///body.frameless:not(.fullscreen){
///
///  #debug{
///    top:20px;
///
///    border-right: 3px solid #333;
///    border-bottom: 3px solid #333;
///    border-left: 0;
///    box-sizing: border-box;
///    height: inherit;
///  }
///  #trace{
///    top:20px;
///  }
///  #autosaveSpinner{
///    position:fixed;
///    top:30px;
///  }
///  #main{
///    margin:0;
///    position:fixed;
///    left:0; right:0;
///    top:20px;
///    width:100%; height:~"calc(100% - 20px)";
///    border-radius: 0;
///
///    border: 3px solid #333;
///    border-top: 0;
///    box-sizing: border-box;
///    overflow: hidden;
///  }
///
///  #main:after{
///    position: fixed;
///    display: block;
///    left: 0; top: 0;
///    width: 100%; height: 100%;
///    right: 0; bottom: 0;
///    content: " ";
///    background: transparent;
///    border: 3px solid #333;
///    border-top: 0;
///    ///z-index: @MAX_Z_INDEX;
///    z-index: @DEBUG_Z_INDEX;
///    pointer-events: none;
///    box-sizing: border-box;
///  }
///
///
///  #titlebar{
///    -webkit-app-region:drag;
///    position:fixed;
///    left:0; right:0;
///    width:100%; height:20px;
///    z-index:100;
///    background-color:#333;
///    cursor:default;
///    ///cursor:@cursorDefault;
///    -webkit-user-select:none;
///    user-select:none;
///    text-align:center;
///    visibility: visible;
///  }
///  &.fullscreen #main{
///    top:0;
///    height:100%;
///  }
///  &.fullscreen #titlebar{
///    display:none;
///  }
///  //@windowBtnAlign: ~` (System.os=='windows') ? 'right':'left' `;
///
///  #titlebarCloseButton{
///    -webkit-app-region:no-drag;
///    ///position:absolute;
///    ///left:4px; top:0;
///    float: @windowBtnAlign;
///    margin: 0 4px;
///    //
///    width:20px; height:20px;
///    opacity:.4;
///    background:url("images/ui/titlebarCloseButton.png") no-repeat 0 0 transparent;
///    cursor:default;
///    ///cursor:@cursorPointer;
///    ///display: none;
///  }
///  #titlebarCloseButton:hover{
///    opacity:1;
///  }
///  #titlebarCloseButton:active{
///    ///left:2px; top:2px;
///    background:url("images/ui/titlebarCloseButton.png") no-repeat 2px 2px transparent;
///    opacity:.5;
///  }
///  #windowTitle{
///    position: absolute;
///    font:normal 14px/21px Bitter;
///    color:#888;
///    height:20px;
///    overflow:hidden;
///    text-overflow: ellipsis;
///    letter-spacing: .25pt;
///    white-space: nowrap;
///    right: 24px;
///    left: 24px;
///  }
///
///  input#commandBox {
///    top:20px;
///  }
///
///}
///
///
///body.frameless.fullscreen input#commandBox,
///body input#commandBox{
///  top:0px;
///}












// ~task

#taskList .achievement {
  margin-bottom: 1em;
  border-radius: 2px;
  padding: 1em;
  min-height: ux(32);
  /* box-sizing: border-box; */
  position: relative;
  /* width: 100%; */
  //background-color: #fff777;
  background-color: #d9d9d9;
  cursor:@cursorPointer;
}
#taskList .achievement.selected {
  ///background-color: #85ff85; // G
  background-color: @selectYellow;
}
#taskList .achievement:active {
  background-color: @selectYellow;
}
#taskList .achievement:first-child:active {
  ///background-color: #85ff85; // G
  background-color: #d9d9d9;
}
#taskList .achievement:first-child{
  ///background-color: #85ff85; // G
  background-color: @selectYellow;
}


.tasks>.task>.cornerFold {
  position: absolute;
  top: 0;
  right: 0;
  ///background-color:@notepadContentBkg;
}

///#taskList .achievement:hover {
///  ///background-color: #85ff85; // G
///  ///background-color: #ffffff;
///  background-color: #cccccc;
///}


//  gray        blue    green y  -y
//#d9d9d9 #ddd #b3e3f7, #88ff77 8dfd87
///#taskList.focused .achievement:not(.selected) {
///  background-color: #d9d9d9;
///}

#taskList .achievement>img {
  display: inline-block;
  float: left;
  margin-right: 1em;
}
#taskList .achievement>h2 {
  margin:0;
  ///font-size: 1.4em;
  font-size: 1.5em;
  font-weight: normal;
  margin-top: .15em;

  hyphens: auto;
}
#taskList .achievement>h3 {
  display: inline-block;
  vertical-align: top;
  font-size: 1.0em;
  width: calc(~"100% - 1.5em" - ux(32));
  left: calc(ux(32) ~"+ 1em");
  margin: 0;
}

#taskList .achievement>.Bar {
  display: block;
  width: calc(~"100% - 1.5em" - ux(32));
  left: calc(ux(32) ~"+ 1em");
  border: 0;
  height: ux(8);
  margin: .5em 0;
  ///background-color: #e6de82;///#dbd47e;
  background-color: rgba(0, 0, 0, 0.1);
}


#taskList .achievement>.Bar>.level {
  ///background-color: #444;
  ///border-right-color: #444;
  background-color: #fff;
  border-right-color: #fff;
}
#taskList .achievement>.Bar> .label {
  font-size: ux(7);
  position: absolute;
  height: ux(8);
  line-height: ux(8);
  width: 100%;
  box-sizing: border-box;
  padding-left: .5em;
  text-align: center;
}
#taskList > .oldTasks.collapsed {
  display: none;
}
#taskList>.moreButton {
  vertical-align: middle;
  margin-bottom: 3px !important;
}
#taskList>h2.oldTasksHeader {
  display: inline-block;
    margin-right: .2em;
}









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

// ALL
// prevent text size adjustment on orientation change.
html { -webkit-text-size-adjust: 100%; }
.Button{
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  -webkit-touch-callout: none;
  .user-select(none);
}

// TOUCH
body.touch{
  -webkit-touch-callout: none;
}
body.touch .ItemButton.dragging{
  box-shadow:0 0 0 0 #000;
}

.showDebugButton{
  position: absolute !important;
  right: 0;
  z-index: @DEBUG_Z_INDEX+10;
  top: 0;
  background-color: #444 !important;
}
.showDebugButton:active {
  background-color: #111 !important;
}
body.debug .showDebugButton {
  filter: invert(1) brightness(2);
  right: -4px;
}




// == == == == == == == == == == == == == == tinySize

///@tinySize:ux(106);
///@media 
///  screen and (max-width: @tinySize) and (orientation:portrait), 
///  screen and (max-height: @tinySize) and (orientation:landscape){
///
///  #notepadTabs{
///    padding-left: ux(1) !important;
///    white-space: nowrap;
///  }
///  #notepadTabs > .Button{
///    margin: 0 !important;
///    margin-right: ux(1) !important;
///  }
///}
///@tinySize:ux(106);
@media screen and (max-width: @smallSize){
  body.ru{
    #notepadTabs{
      padding-left: ux(1) !important;
    }
    #notepadTabs > .Button{
      margin: 0 !important;
      margin-right: ux(1) !important;
      padding: .5em;
    }
  }
}


@tinySize:ux(115);

@media screen and (max-width: @tinySize){ 
  #notepadTabs{
    padding-left: ux(1) !important;
  }
  #notepadTabs > .Button{
    margin: 0 !important;
    margin-right: ux(1) !important;
    padding: .5em;
  }
  .Menu > .Button{
    padding:.5em;
    letter-spacing: 0.02em;
  }
}

///@media screen and (max-height: @tinySize){ 
///  .landscape{
///    #notepadTabs{
///      padding-left: ux(1) !important;
///      white-space: nowrap;
///    }
///    #notepadTabs > .Button{
///      margin: 0 !important;
///      margin-right: ux(1) !important;
///    }
///  }
///}


// == == == == == == == == == == == == == == smallSize

///@smallSize:ux(`App.MIN_SIZE`); // 140ux
///@media 
///  screen and (max-width: @smallSize) and (orientation:portrait), 
///  screen and (max-height: @smallSize) and (orientation:landscape){
///
///  #purchase > h2 {
///    width: 90%;
///    margin: -4px 0 9px 0;
///  }
///  #content.loading:before{
///    left: 10px; right:10px; 
///    top: 43%;
///    transform: translateY(-50%);
///    transform: translateX(-50%);
///  }
///}
@media screen and (max-width: @smallSize){
  // #purchase > h2 {
  //   //width: 90%;
  //   margin: -4px 0 9px 0;
  // }
  #content.loading:before{
    left: 10px; right:10px; 
    top: 43%;
    transform: translateY(-50%);
    transform: translateX(-50%);
  }
}


@demoSmallHeight:ux(170);
@media screen and (max-height: @demoSmallHeight){
  #purchase {
    opacity: .85;
    background-color: #222;
  }
}


//* == == == == == == == == == == == SMALL screens LANDSCAPE only (
//@media screen and (max-height: @smallSize){
  .landscape{
    .Toolbelt > .toggleButton {
      display: flex;
      flex-direction: row-reverse;
      align-items: center;
    }
    .Toolbelt.expanded > .toggleButton {
      display: flex;
      flex-direction: row;
      align-items: center;
    }
  }
//}
//` == == == == == == == == == == == SMALL screens PORTRAIT only (
///@media screen and (max-width: @smallSize){
.portrait{
  .Toolbelt > .toggleButton {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .Toolbelt.expanded > .toggleButton {
    flex-direction: column-reverse;
  }
}
///}


// == == == == == == == == == == == == == == SMALL SCREENS DEBUG

@smallDebugSize:35em;
///@media 
///  screen and (max-width: @smallDebugSize) and (orientation:portrait), 
///  screen and (max-height: @smallDebugSize) and (orientation:landscape){
@media screen and (max-width: @smallDebugSize){
  #debug {
    width: calc(~"100%" - ux(10) - 4px) !important;
    left: calc(ux(10) - 4px) !important;
  }
  body.debug .dismissArea,
  body.grimy.debug #main > .grime {
    width: calc(ux(10) - 1px) !important;
  }
  #debug {
    ///width: calc(~"100%" - ux(10)) !important;
    ///left: 10%;
  }
  body.debug #content {
    width: 100% !important;
  }
  .showDebugButton{
    box-shadow: -2px 0px 6px 1px rgba(0, 0, 0, 0.3);
  }
  body.debug .showDebugButton{
    left: 0;
  }
}

// == == == == == == == == == == == == == == 






























//~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~
//~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~
//~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~
//~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~
//~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~
//~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~
//~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~
//~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~
//~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~











//~
//~
//~
//~
//~
//~    * * *  * * *  * * * *  * * *    * * *  *     *    * *    
//~    *      *   *  *     *  *    *   *   *  *     *   *   *   
//~    *      *   *  * * * *  *     *  *   *   *   *   * * * *  
//~    *      *   *  *  *     *    *   *   *    * *    *     *  
//~    * * *  * * *  *   *    * * *    * * *     *     *     *  
//~
//~
//~
//~
//~cordova


/*

(((((((    * * * * *  *  *       *  *  * * *   *  * * * * *  
 )))))))   *   *   *  *    *   *    *  *   *   *  *          
(((((((    *   *   *  *      *      *  *   *   *  * * * * *  
 )))))))   *   *   *  *    *   *    *  *   *   *          *  
(((((((    *   *   *  *  *       *  *  *   * * *  * * * * *   

*/
///.pixelated(){
///  image-rendering: optimizeSpeed;
///  image-rendering: -webkit-optimize-contrast;
///  image-rendering: optimize-contrast;
///  -ms-interpolation-mode: nearest-neighbor;
///  image-rendering: -moz-crisp-edges;
///  image-rendering: -o-crisp-edges;
///  image-rendering: -webkit-crisp-edges;
///  image-rendering: crisp-edges;
///  image-rendering: pixelated;
///}
///.verticalGradient (@top: #ffffff, @bottom: #000000){
///  background-color: @top;
///  background: -webkit-linear-gradient(top, @top, @bottom);
///  background: -moz-linear-gradient(top, @top, @bottom);
///  background: -o-linear-gradient(top, @top, @bottom);
///  background: -ms-linear-gradient(top, @top, @bottom);
///  background: linear-gradient(to bottom, @top, @bottom);
///}
///
///@radius:2px; // fixed size, always barely curved
///
///@selectYellow:#fff555;
///
///@ltShadow:     0 0px 10px 5px rgba(35, 25, 35, 0.4);
///@dkShadow:     0 0px 8px 6px rgba(35, 25, 35, 0.4);
///
///@almostFullSize:calc(~"100%" - ux(2));
///
///
////*~
///
///(((((((    
/// )))))))   
///(((((((    
/// )))))))   
///(((((((    
///
///*/
///
///@smallSize:ux(`App.MIN_SIZE`); // 140ux
///



body.mobile #content > .fullscreenButton{
  display: none !important;
}

///#onscreen {
///  -webkit-transform: translate3d(0, 0, 0);
///  -moz-transform: translate3d(0, 0, 0);
///  -ms-transform: translate3d(0, 0, 0);
///  transform: translate3d(0, 0, 0);
///}


html{
  touch-action: manipulation;
}


// this drastically speeds up dragging dialogs!
///body.mobile:not(.mac) * { // v1
body.mobile.ios *,
body.mobile.android * {
  cursor: none !important;
}






//# (((((((    * * *    * * * *  * * * *   *     *  * * * *  
//*  )))))))   *    *   *        *      *  *     *  *        
//* (((((((    *     *  * * * *  * * * *   *     *  *   * *  
//`  )))))))   *    *   *        *      *  *     *  *     *  
//` (((((((    * * *    * * * *  * * * *   * * * *  * * * *  ~debug





///#vilmonicore {
///  filter: invert(.8) hue-rotate(270deg) saturate(1.5);
///  background-color: #fffc;
///}
///#vilmonicore.PromptDialog .label {
///  font-size: ux(4);
///  text-align: left;
///  padding: 0 .5em 0 1em;
///}
///#vilmonicore.PromptDialog.Dialog > .content > .message textarea{
///  height:5em;
///}



@mediumDebugSize: ux(200);
//^ = = = = = = = = = = = = = = = = = = = = = = = = = =
@media screen and (max-width: @mediumDebugSize){



body.grimy.debug #main > .grime {
  ///width: 40%;
  ///width:calc(~"40%" + 4px);
  width:~"calc(40% + 3px)";
}
body.debug .dismissArea {
  width: 40%;
}
#actions {
  line-height: .5em !important;
}
#actions > a, #debug button {
  margin: .1em .2em 0 0;
  height: 1.45em;
  line-height: normal;
  font-size: 12pt;
}
#actions span > input {
  border-width: .2em;
  padding: 0 0 0 .1em;
  margin: 0.1em .2em 0 -0.2em;
  font-size: 12pt;
  height: 1.45em;
  border-left-color: rgba(0, 0, 0, 0.13);
}
#actions > a, #debug span > button {
  border-radius: 3px 0 0 3px;
}
.actionGroup > .name {
  margin: .2em;
  padding: .3em .4em;
  font-size: 12pt;
}
.actionGroup.open {
  padding-top: .8em;
  padding-bottom: .5em;
}
#debug {
  width: 60%;
  right: 0;
  left: auto;
  box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.66);
  font-size: 9pt;
  line-height: 10pt;
}

body.debug #content {
  width: 100% !important;
}
body.debug .showDebugButton {
  ///right:60%;
  right:calc(~"60%" - 4px);
}

#debug button#action_show {
  transform: scale(2);
  transform-origin: top left;
  .pixelated();
  ///image-rendering: pixelated;
  right: auto;
  left: 0px;
  top: -2px;
  float: right;
  position: relative;
  margin-right: 17px;
}
#cmdThumb:after {
  border-top: 2px dashed #999;
}
#cmdThumb {
  height: 16px;
  width: 100% !important;
}

#cmdLine > #cmdText {
  font-size: 9pt;
  line-height: 10pt;
}
#actions button, #actions span, #actions div,
#actions button, #actions span, #actions div {
  vertical-align: unset;
}
#debug button#action_cmd {
  transform: scale(2);
  transform-origin: bottom right;
  .pixelated();
  ///image-rendering: pixelated;
  right: -7px;
  margin-top: -4px;
}
#debug button#action_clear {
  transform: scale(2);
  transform-origin: top right;
  .pixelated();
  ///image-rendering: pixelated;
  right: -7px;
}
#closeFooter {
  border-radius: 2px 0 0 0;
  transform: scale(2);
  transform-origin: bottom right;
  .pixelated();
  ///image-rendering: pixelated;
  right: 0;
  background-color: rgba(0, 0, 0, 0.1);
}

///#trace > .item {
///  line-height: 10pt;
///}


}



@media screen and (max-width: 360px){

  .actionGroup.open {
    padding: 0;
    ///padding-bottom: 2px;
    ///padding-top: 3px;
    display: block;
  }
  #actions {
    line-height: .5em !important;

    letter-spacing: -.5px;
  }
  #actions > a, #debug button {
    margin: 1px 2px 0 0;
    ///height: 16px;
    ///font-size: 11px;
  }
  #actions span > input {
    padding: 0 0 0 .1em;
    margin: 0.1em .2em 0 -0.2em;
    ///font-size: 9pt;
    height: 1.45em;
    vertical-align: bottom;
  }
  .actionGroup > .name {
    ///font-size: 11px;
  }
  #actions span > input{
    ///font-size: 11px;
  }
  #actions button, #actions span, #actions div {
    vertical-align: middle;
  }

}

#debug button.active {
  background-color: #444 !important;
  color:#ddd !important;
}


//_//*//*//*//*//*//*//*//*//*//*//*//*//*//*//*//*//*//*//*//*//*//*//
//_ == == == == == == == == == == == == == == SMALL screens DEBUG (
@smallDebugSize:35em;

@media screen and (max-width: @smallDebugSize){

  #debug {
    width: calc(~"100%" - ux(10) - 4px) !important;
  }
  .showDebugButton{
    box-shadow: -2px 0px 6px 1px rgba(0, 0, 0, 0.3);
  }
  body.debug .showDebugButton{
    left: 0;
  }
  ///body.debug .dismissArea,
  ///body.grimy.debug #main > .grime {
  ///  width: 100% !important;
  ///}
}
//_ == == == == == == == == == == == == == == SMALL SCREENS DEBUG )





// optimized shadow(?)
div.Component.Dialog{
  box-shadow: @ltShadow;
}


.ConfirmDialog.Dialog > .footer > .Button {
  font-size: 1.1em;
}


body.mobile .StartupScreen > .buttons > .menu > .Button.exit,
body.browser .StartupScreen > .buttons > .menu > .Button.exit{
  display:none !important;
}
body.mobile .StartupScreen > .buttons > .menu > .Button.help,
body.browser .StartupScreen > .buttons > .menu > .Button.help {
  float: unset;
  width: unset !important;
}

.StartupScreen > .buttons > .menu > .Button.shop, 
.StartupScreen > .buttons > .menu > .Button.help {
  width: calc(~"50%" - minx(.5) ) !important;
  float: right;
}
.StartupScreen > .buttons > .menu > .Button.help {
  float: left;
}


body.premium .StartupScreen > .buttons > .menu > .Button.shop{
  display:none !important;
}
///body.premium .StartupScreen > .buttons > .menu > .Button.help {
///  width: 100% !important;
///  float: none;
///}

body.premium .Menu > .Button.Shop{
  display:none;
}




.imageDialog{
  min-width: ~`App.photos.PREVIEW_SIZE+"px"`;
  max-width: 80%;
}
.imageDialog > .content{
  padding: 0;
  background-color: #444;
}
.imageDialog > .content > img{
  max-width: 100%;
  max-height: 80vh;
  vertical-align: top;
}



//! (((((((    * * * *  *   *  * * *  * * *  * * * *  * * * *  
//!  )))))))   *         * *   *   *  *   *  *     *     *     
//^ (((((((    * * * *    *    * * *  *   *  * * * *     *     
//^  )))))))   *         * *   *      *   *  *  *        *     
//~ (((((((    * * * *  *   *  *      * * *  *   *       *     

.LoadCreatureCards.Button{
  position: relative;
}
.LoadCreatureCards.Button.activating{
  background-color: @buttonGreen;
  color:#333;
}
.LoadCreatureCards.Button > input[type="file"]{
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  background-color: #f00;
  opacity: .0001;
  overflow: hidden;
  cursor:@cursorPointer !important;
  z-index: 99999;
}
///input[type="file"]{
///  cursor:@cursorPointer !important;
///}


#CreatureCard.ConfirmDialog.Dialog > .content > .message {
  ///margin: -1em;
  ///margin-bottom: .75em;
  margin: 0;
  padding: 0;
  ///background-color: #462d00;
}
#CreatureCard > .content > .message > canvas{
  vertical-align: top;
  ///opacity: .90;
}
#CreatureCard .header.draggable {
  background: white;
}
#CreatureCard > .content > .message:after{
  left:0; top:0; right:0; bottom:0; width:100%; height:100%;
  position: absolute;
  content:" ";
  background-color: #66440044;
  z-index: 99999;
  box-shadow: inset 0 0 40px #aa6600;
  opacity: .2;
}



#CreatureCard {
//  width: ~`App.photos.PREVIEW_SIZE+"px"` !important;
width: unset !important;
  ///background-color: #333;
  padding: 0 ux(1);
}
#CreatureCard .no.Button {
  ///background-color: #222;
  ///color: #eee;
  ///border: 1px solid #222;
  display: none !important;
}
#CreatureCard .header.draggable {
  ///color: #eeeedd;
  ///background: transparent;
}
#CreatureCard .title {
  text-align: center;
  position: absolute;
  top: 4px;
  left: ux(11);
  right: ux(11);
}
#CreatureCard .closeButton {
  ///background-color: #484848;
  margin-left: ux(-1);
  display: block !important;
}
#CreatureCard.Dialog > .footer {
  border-top: 0;
}





body.mobile .fullscreen.checkbox,
body.system-mobile .fullscreen.checkbox{
  display: none !important;
}





.Tooltip.Component > .content {
  font-size: 1.2em;
}






// == == == == == == == == == == == == == == == == notepad
#notepad{
  max-width: @almostFullSize;
  display: flex;
  flex-direction: column;
  height: 90% !important;
}
#notepad > .content {
  max-width: none !important;
  padding:ux(1);
}
#notepadContent {
  width: 100%;
}
#notepad .noBadges{
  ///// " - ux(-3) " is to fix a less bug
  ///// calc(~"2em" + ux(3)); throws exception
  ///padding: calc(~"2em" - ux(-3)) 3em;
  padding: 2em 1em;
}
#notepad h2,
#notepad.selected_tasks #taskList > h2:first-child,
#notepad.selected_population #populationHistory > report > h2:first-child
{
  margin: .7em;
}
#taskList > .currentTask > .task, #taskList > .oldTasks > .task {
  margin:0;
  margin-bottom: 1em;
}

// fix intermittant bug where lists get cut off at bottom
#notepad > .content {
  padding-bottom: 2em;
}

#notepad.selected_badges{
  background-color: #ecece9;
}
#notepad.selected_photos{
  background-color: #444;
}
#badgeList {
  margin:0;
}
#badgeList > .badges {
  padding-bottom: 1em;
}

#taskList {
  padding: 0 .75em;
}

#taskList .achievement > h3{
  font-size:.9em;
  line-height: 1.2em;
  width: calc(~"100% - 1em" - ux(32));
  ///left: calc(ux(32) ~"+ 1em");
}
#taskList .achievement {
  padding: .75em .5em;
  padding-right: .25em;
}
#taskList .achievement > img {
  margin-right: .5em;
}
#taskList .achievement>.Bar {
  display: block;
  width: calc(~"100% - 1em" - ux(32));
  left: calc(ux(32) ~"+ .5em");
}
#taskList .achievement > h2 {
  margin-top: .05em;
}
.achievements.Dialog > .footer {
  border: 0;
}

#notepadTabs{
  white-space: nowrap;
}

#notepadTabs > .Button{
  padding-top: .6em;
  padding-bottom: .6em;
}


@media screen and (max-width: @smallSize){

  .task.ConfirmDialog.Dialog > .content > .message{
    margin:0;
    padding: 0 1em;
  }

} 



.task.ConfirmDialog.Dialog > .content > .message{
  margin-bottom: 0;
  margin-top: 0;
  ///margin:0;
  ///padding: 0 1em;

  // this causes left-aligned text for short messages
  ///>.wrapper{ width: 100%; }
  display: flex;
  flex-direction: column;
}
.tasks {
  padding-top: .75em;
  padding-bottom: 1em;
}
.task.Dialog > .footer {
  padding-top: .5em;
  margin-top: 0;
}

#photoList {
  padding: 1.5em 0;
  padding-bottom: 0;
}
// allow touch area of export button to extend beyond dlg
// since taps near screen edge get lost
#notepad > .content > .wrapper {
  overflow: visible;
}

///// on ipad there is a gap with the shadow,
///// (see #notepad > #notepadTabs:after in styles)
///// adding this border fixes it, and looks ok
///#notepad.selected_photos > .content{
///  border-top: ux(1) solid #444;
///}

#notepadTabs{
  margin-bottom: 0;
}

#notepad .noPhotos {
  padding-top: .5em !important;
}

// fix ios bug where dlg edge is not on pixel (
.pic > .Photo {
  border: 0.0001px solid #444;
}
.Dialog.Photo{
  border:0;
}
// fix )


// == == == == == == == == == == == == == == == == settings
body.mobile .SettingsDialog .group.keyoverride {
  display: none;
}
body.mobile .SettingsDialog .group.graphics {
  border: 0;
}


.SaveDialog{
  height: auto;
}
// this causes dlg to go beyond screen with lots of saves
///.SaveDialog {
///  max-height: 45em;
///}



// remove ios input border shadow
input[type=text] {   
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}





/////* == == == == == == == == == == == SMALL screens LANDSCAPE only (
///@media 
///  screen and (orientation:landscape){
///  .Toolbelt > .toggleButton {
///    display: flex;
///    flex-direction: row-reverse;
///    align-items: center;
///  }
///  .Toolbelt.expanded > .toggleButton {
///    display: flex;
///    flex-direction: row;
///    align-items: center;
///  }
///}
/////` == == == == == == == == == == == SMALL screens PORTRAIT only (
///@media 
///  screen and (orientation:portrait){
///  .Toolbelt > .toggleButton {
///    display: flex;
///    flex-direction: column;
///    align-items: center;
///  }
///  .Toolbelt.expanded > .toggleButton {
///    flex-direction: column-reverse;
///  }
///}






  .AvatarDialog{
    width: @almostFullSize !important;
    min-width: @almostFullSize !important;
    max-width: @almostFullSize !important;
    max-height: @almostFullSize !important;
    height: ux(80) !important;
  }
  .AvatarDialog.Dialog > .content > .preview {
    top: ux(7);
    ///top: ux(2);
    ///left: ux(25);
    left:auto;
    position: relative;
    margin: auto;
  }
  .AvatarDialog.Dialog > .content > .choose{
    width: 100%;
    height: 100%;
    ///background: linear-gradient(to right, #bbb, transparent 25%);
    background: linear-gradient(to right, #a6b2ab, #d3ddd6);
  }
  ///.AvatarDialog > .content > .choose > .skin.ImageButton{
  ///  background-color: #fff;
  ///}
  ///.AvatarDialog > .content > .choose > .shirt.ImageButton{
  ///  background-color: #fff;
  ///}
  ///.AvatarDialog > .content > .choose > .pants.ImageButton{
  ///  background-color: #fff;
  ///}
  .AvatarDialog > .content > .choose > .parts.group {
    position: absolute;
    top: ux(1);
    left: ux(1);
  }
  .AvatarDialog > .content > .choose > .colors.group {
    position: absolute;
    top: ux(10);
    right: ux(1);
  }

  .AvatarDialog {
    left: !important;
    min-width: ux(100) !important;
    max-width: ux(100) !important;
  }

.AvatarDialog > .content > .randomize.Button {
  right: ux(47);
}
.AvatarDialog>.header>.randomize.Button {
  position: absolute;
  top: -1px;
  right: 0;
  background: transparent;
}

  .Dialog.Photo > .content, 
  .pic > .Photo > .content {
    padding: ux(3) !important;
  }

  body.touch .exportButton.Button > .touchArea {
    margin: ux(-3);
    padding: ux(3);
    ///background: rgba(255, 255, 0, 0.4); // DEBUG
  }
  .Photo.Dialog .exportButton,
  .pics>.pic .exportButton {
    top: ux(1) !important;
    right: ux(1) !important;
  }


body.mobile .Toolbar > .slot > .key {
  display:none;
}
tip {
  margin-bottom: .75em;
}













  // making this css available for all screensizes fixes iscroll
  // on bigger screens, don't know why
  ///.BuildingDialog>.content .recipes{
  ///  overflow-y: scroll !important;
  ///  -webkit-overflow-scrolling: touch;
  ///}
  @workspaceHeightSmall: ux(18+1+1);
  @getMoreRecipesHeight: ux(10);
  @workspaceSmallAndGetMoreHeight: @workspaceHeightSmall + @getMoreRecipesHeight;

  #main.missingRecipes .BuildingDialog>.content>.recipes{
  ///#main.vilmonic_architect_recipes_false .BuildingDialog>.content>.recipes,
  ///#main.vilmonic_tooluser_recipes_false .BuildingDialog>.content>.recipes{
    height: calc(~"100%" - @workspaceSmallAndGetMoreHeight) !important;
  }
  .BuildingDialog{
    ///width: @almostFullSize !important;
    max-width: @almostFullSize !important;
    width: ux(105) !important;
    ///min-width: ux(105) !important;
  }
  ///div.Component.Dialog.BuildingDialog{
  ///  ///box-shadow: 0 0 13px 7px rgba(35, 25, 35, 0.4);
  ///  box-shadow: @dkShadow;
  ///}
  .BuildingDialog > .content > .recipes .ListComponent > .listItem > .ingredients {
    padding-left: ux(2);
    width: ux(79);
  }
  .BuildingDialog > .content > .recipes .ListComponent > .listItem > .product{
    left: ux(80);
  }
  .BuildingDialog > .content .workspace {
    padding: 0px;
    height: @workspaceHeightSmall;
  }
  .BuildingDialog > .content .workspace .buildButton {
    margin: 0 ux(-1);
  }
  .BuildingDialog > .content {
    height: calc(~"100% +1px" - ux(11));
  }
  .BuildingDialog > .content > .recipes {
    height: calc(~"100%" - ux(20));
    ///height: calc(~"100%" - ux(30));
  }
  .BuildingDialog > .content > .recipes>.wrapper {
    height: 100%;
  }







#versionNotes{
  width:auto;
  ///max-width: @almostFullSize !important;
  max-width: 80% !important;
  max-height: @almostFullSize !important;
  height:auto !important;
  min-height:auto !important;
}
#versionNotes > .content > .message > .wrapper > .scroller > .scrollable {
  padding-bottom: 0 !important;
  text-align: left;
}
body.mobile #versionNotes > .content > .message > .wrapper > .scroller > .scrollable {
  padding-bottom: 0 !important;
  text-align: center;
}
body.mobile #versionNotes > .content > .message,
body.mobile #versionNotes > .content > .message > .wrapper{
  text-align: center !important;
}
#versionNotes > .content > .message > .wrapper{
  padding: 0 1em;
  text-align: left;
  min-height: 100%;
}
#versionNotes > .content > .message{
  height: 100%;
}
#versionNotes > .content{
  margin-top: 1em;
}

.Dialog.credits .help > div, 
.Dialog.credits .help>.translations>div{
  margin-top: .75em;
}

///.Dialog.credits{
///  max-width: @almostFullSize !important;
///  max-height: @almostFullSize !important;
///}
.Dialog.credits.ConfirmDialog > .content > .message{
  ///padding: 0 1em 1em 1em;
  padding: 0 ux(5) ux(5) ux(5);
}
.Dialog.credits .scrollable > .main{
  margin-top: -1em;
}
.ok.Dialog.credits > .footer {
  border-top: 1px solid rgba(0,0,0,.1);
  margin-top: 0;
  background: #fff;
}
///.Dialog.credits .translations{
///  display: none;
///}
.Dialog.credits pre.licenses{
  padding: 0 1em 1em 1em;
  background: #eee;
  font-size: .9em;
}
.Dialog.credits .main a {
  color: #09f;
  text-decoration: underline;
  cursor: pointer;
}
.Dialog.credits .main a:active {
  color: #333;
  background: @selectYellow;
}
.Dialog.credits > .header > .title {
  margin-left: ux(4);
}

// ios wrong scroll size fix (
#credits .scrollable > .more {
  padding-bottom: 3em;
}
.Dialog.credits.ConfirmDialog > .content > .message > .wrapper {
  padding-bottom: 0;
}
// fix )

.SaveDialog.ConfirmDialog.Dialog > .header > .closeButton {
  display: none;
}
.SaveDialog > .header > .title {
  margin-left: .8em;
}




// use always?
///@media 
///  screen and (max-height: ux(150) ),
///  screen and (max-width: ux(150) ) 
///{
///
///  #AnalyzerDialog > .content.wrapper > .scroller > .specimen > .data > .info{
///    width: calc(~"100%" - ux(38) );
///  }
///
///  #AnalyzerDialog{
///    width: ux(105) !important;
///    min-width: ux(105) !important;
///    max-width: @almostFullSize !important;
///    max-height: @almostFullSize !important;
///  }
///  #AnalyzerDialog > .content.wrapper > .scroller > .specimen > .data > .preview {
///    width: ux(36) !important;
///    padding: 0 !important;
///  }
///  #AnalyzerDialog > .content.wrapper > .scroller > .specimen {
///    padding: ux(2);
///  }
///  #AnalyzerDialog .stat > .Bar,
///  #AnalyzerDialog .info > .field > .value{
///    width: ux(32) !important;
///  }
///  #AnalyzerDialog > .content.wrapper > .scroller > .specimen > .brain > .brain {
///    border: 0 !important;
///    margin-bottom: ux(1);
///  }
///  #AnalyzerDialog > .content.wrapper > .scroller > .specimen > .brain {
///    margin-top: ux(1) !important;
///  }
///  #AnalyzerDialog > .content.wrapper > .scroller > .wiki > .description {
///    margin: 0;
///  }
///  #AnalyzerDialog > .content.wrapper > .scroller > .wiki {
///    padding: .75em .25em .75em 1em;
///    font-size: .95em;
///    line-height: 1.2em;
///    /* text-align: justify; */
///    /* padding: 1em 1em; */
///  }
///  #AnalyzerDialog.carrier > .content.wrapper > .scroller > .wiki,
///  #AnalyzerDialog.fossil > .content.wrapper > .scroller > .wiki {
///    padding-top: ux(2) !important;
///    padding-left: ux(41) !important;
///  }
///
///  #AnalyzerDialog > .content.wrapper > .scroller > .dna {
///    margin: 0;
///    padding: 0 ux(2) ux(9) ux(2);
///  }
///  #AnalyzerDialog > .content.wrapper > .scroller > .specimen > .brain > .brain > .value {
///    margin: 0 !important;
///  }
///
///  #AnalyzerDialog > .header > .viewButton{
///    display: none !important;
///  }
///
///
///}

  #AnalyzerDialog > .content.wrapper > .scroller > .specimen > .data > .info{
    width: calc(~"100%" - ux(38) );
  }

  #AnalyzerDialog{
    width: ux(105) !important;
    min-width: ux(105) !important;
    max-width: @almostFullSize !important;
    max-height: @almostFullSize !important;
  }
  #AnalyzerDialog > .content.wrapper > .scroller > .specimen > .data > .preview {
    width: ux(36) !important;
    padding: 0 !important;
  }
  #AnalyzerDialog > .content.wrapper > .scroller > .specimen {
    padding: ux(2);
  }
  #AnalyzerDialog .stat > .Bar,
  #AnalyzerDialog .info > .field > .value{
    width: ux(32) !important;
  }
  #AnalyzerDialog > .content.wrapper > .scroller > .specimen > .brain > .brain {
    border: 0 !important;
    margin-bottom: ux(1);
  }
  #AnalyzerDialog > .content.wrapper > .scroller > .specimen > .brain {
    margin-top: ux(1) !important;
  }
  #AnalyzerDialog > .content.wrapper > .scroller > .wiki > .description {
    margin: 0;
  }
  #AnalyzerDialog > .content.wrapper > .scroller > .wiki {
    padding: .75em .75em .75em 1em;
    font-size: .95em;
    line-height: 1.2em;
    letter-spacing: -0.2px;
    /* text-align: justify; */
    /* padding: 1em 1em; */
  }
  #AnalyzerDialog.carrier > .content.wrapper > .scroller > .wiki,
  #AnalyzerDialog.fossil > .content.wrapper > .scroller > .wiki {
    padding-top: ux(2) !important;
    padding-left: ux(41) !important;
  }

  #AnalyzerDialog > .content.wrapper > .scroller > .dna {
    margin: 0;
    padding: 0 ux(2) ux(9) ux(2);
  }
  #AnalyzerDialog > .content.wrapper > .scroller > .specimen > .brain > .brain > .value {
    margin: 0 !important;
  }

  #AnalyzerDialog > .header > .viewButton{
    display: none !important;
  }




///@media screen and (max-width: @smallSize){
///  #notepad{
///    width: @almostFullSize     ;// !important;
///    min-width: @almostFullSize ;// !important;
///    max-width: @almostFullSize ;// !important;
///  }
///}
///@media screen and (max-height: @smallSize){
///  #notepad{
///    height: @almostFullSize !important;
///    // makes dlg too tall on ios
///    ///min-height: @almostFullSize !important;
///    max-height: @almostFullSize !important;
///  }
///}

@media 
  screen and (max-width: @smallSize) and (orientation:portrait){

  .ConfirmDialog{
    max-width: @almostFullSize !important;
  }
}


// * * * *  * * * *    * *    *        * small width
@media screen and (max-width: @smallSize){
  #notepad{
    width: @almostFullSize     ;// !important;
    min-width: @almostFullSize ;// !important;
    max-width: @almostFullSize ;// !important;
  }
  .SaveDialog{
    width: @almostFullSize !important;
    min-width: @almostFullSize !important;
    max-width: @almostFullSize !important;
  }
  .SaveDialog > .content > .Button{
    margin:0 3px !important;
  }
  .SettingsDialog {
    width: @almostFullSize !important;
    min-width: @almostFullSize !important;
    max-width: @almostFullSize !important;
  }

}
// * * * *  * * * *    * *    *        * small height
@media screen and (max-height: @smallSize){
  #notepad{
    height: @almostFullSize !important;
    // makes dlg too tall on ios
    ///min-height: @almostFullSize !important;
    max-height: @almostFullSize !important;
  }
  .SaveDialog{
    height: auto;
    max-height: @almostFullSize !important;
  }
  .SaveDialog > .content > .Button{
    margin:0 3px !important;
  }
  .SettingsDialog {
    max-height: @almostFullSize !important;
  }

}



//^
//^  * * * *  * * * *    * *    *        *        
//^  *        *  *  *   *   *   *        *        
//^  * * * *  *  *  *  * * * *  *        *        
//^        *  *  *  *  *     *  *        *        
//^  * * * *  *     *  *     *  * * * *  * * * *  
//^
//^  * * * *  * * * *  * * * *  * * * *  * * * *  * *   *  * * * *  
//^  *        *        *     *  *        *        *  *  *  *        
//^  * * * *  *        * * * *  * * * *  * * * *  *  *  *  * * * *  
//^        *  *        *  *     *        *        *  *  *        *  
//^  * * * *  * * * *  *   *    * * * *  * * * *  *   * *  * * * *  
//^
//^ == == == == == == == == == == == SMALL screens PORTRAIT + LANDSCAPE (

// @smallSize = 140ux

@media 
  screen and (max-width: @smallSize) and (orientation:portrait), 
  screen and (max-height: @smallSize) and (orientation:landscape){


  body.ru #AnalyzerDialog > .content.wrapper > .scroller > .specimen > .data > .stats > .stat.hydration > .label {
    letter-spacing: -0.06em;
  }


  .task h3 {
    font-size: 1.35em;
  }


  .Dialog.credits{
    width: @almostFullSize !important;
    min-width: @almostFullSize !important;
    max-width: @almostFullSize !important;
    height: @almostFullSize !important;
  }
  .Dialog.credits.ConfirmDialog > .content > .message{
    padding: 0 1em 1em 1em;
  }
  .Dialog.credits .scrollable > .main{
    margin-top: -1em;
  }
  .ok.Dialog.credits > .footer {
    border-top: 1px solid rgba(0,0,0,.1);
    margin-top: 0;
    background: #fff;
  }
  ///.Dialog.credits .translations{
  ///  display: none;
  ///}
  .Dialog.credits pre.licenses{
    padding: 0 1em 1em 1em;
    background: #eee;
    font-size: .9em;
  }
  .Dialog.credits .main a {
    color: #09f;
    text-decoration: underline;
    cursor: pointer;
  }
  .Dialog.credits .main a:active {
    color: #333;
    background: @selectYellow;
  }






  #viewFrame {
    box-shadow: 0 5px 15px 2px rgba(45, 15, 45, 0.5);
  }

  
  #helpDialog > .content > .container > .wrapper > .scroller > .output {
    padding: 0 .7em 1.5em 1em;
  }


  #rightToolbar>.helpButton{
    display: none;
  }
  #rightToolbar{
    display: flex;
    justify-content: space-between;
  }
  #rightToolbar>.helpButton{
    display: none;
  }
  #rightToolbar > .Component {
    margin: 0;
    margin-top: ux(1);
    padding: 0;
  }



  .NewDialog .form {
    ///font-size: 1.1em;
    padding: 0 .5em;
  }
  .NewDialog .form > .worldName > .label {
    color: #999;
    margin-top:0;
  }
  // ios fix
  ///.NewDialog .form > .sizes > .Button.small{
  ///  vertical-align: baseline;
  ///}
  ///.NewDialog .form > .sizes > .Button.medium{
  ///  vertical-align: bottom;
  ///}
  ///.NewDialog .form > .sizes > .Button.large{
  ///  vertical-align: bottom;
  ///}
  //////.NewDialog input[type=text] {
  //////  //border: 0 !important;
  //////  padding: .3em .1em !important;
  //////  border-width: .001px 0 0 4px;
  //////}

  // ios fix again
  .NewDialog .form > .sizes .options,
  .NewDialog .form > .sizes > .Button.small,
  .NewDialog .form > .sizes > .Button.medium,
  .NewDialog .form > .sizes > .Button.large{
    vertical-align: top;
  }






  .ConfirmDialog > .content > .Button{
    margin: 1em 3px !important;
  }



  ///.SaveDialog{
  ///  width: @almostFullSize !important;
  ///  min-width: @almostFullSize !important;
  ///  max-width: @almostFullSize !important;
  ///  height: auto;
  ///  max-height: @almostFullSize !important;
  ///}
  ///.SaveDialog > .content > .Button{
  ///  margin:0 3px !important;
  ///}


  // stretch always full
  #helpDialog{
    ///left: ux(1) !important;
    ///top: ux(1) !important;
    width: @almostFullSize !important;
    min-width: @almostFullSize !important;
    max-width: @almostFullSize !important;
    min-height: @almostFullSize !important;
    max-height: @almostFullSize !important;
    height: @almostFullSize !important;
  }



  // stretch except height
  ///.SettingsDialog {
  ///  ///left: ux(1) !important;
  ///  ///top: ux(1) !important;
  ///  width: @almostFullSize !important;
  ///  min-width: @almostFullSize !important;
  ///  max-width: @almostFullSize !important;
  ///  max-height: @almostFullSize !important;
  ///}
  .SettingsDialog .group.keyoverride {
    padding-left: 0;
    padding-right: 0;
    margin: 0 -.5em;
  }

  .KeyOverride {
    margin-bottom: 0 !important;
  }




  // was AvatarDialog






  #taskList {
    padding: 0;
  }



  .ConfirmDialog.Dialog.lastAnim > .content > .message {
    padding: .5em .5em .5em 1em;
  }
  .ConfirmDialog.Dialog > .footer > .Button {
    max-width: 80%;
  }




  .ExportDialog .message {
    padding: 0 .5em !important;
  }
  .ExportDialog .content > .message > .wrapper > .scroller > .scrollable > .label {
    margin: .5em 0 .5em 0;
  }
  .ExportDialog .dataString{
    width: 100%;
    border: 0;
    outline: 1px dashed #ddd;
    margin: 0;
    background: #f5f5f5;
    color: #444;
  }
  .ExportDialog > .content{
    padding: 0 0.5em 0.5em 0.5em !important;
  }





  // enlarge touch area, now in .Button
  ///.Dialog > .header > .closeButton {
  ///  padding: ux(1);
  ///  top: ux(-1);
  ///  position: relative;
  ///  left: ux(-1);
  ///  margin-right: 0;
  ///  margin-bottom: ux(-1);
  ///  background: transparent;
  ///}
  ///.Dialog > .header > .closeButton > canvas{
  ///  .verticalGradient (rgba(0,0,0,0.12), rgba(0,0,0,0.08));
  ///  border-radius:@radius;
  ///}


  #ShopDialog{
    ///left: ux(1) !important;
    ///top: ux(1) !important;
    ///width:      @almostFullSize !important;
    ///min-width:  @almostFullSize !important;
    ///max-width:  @almostFullSize !important;
    ///min-height: @almostFullSize !important;
    ///max-height: @almostFullSize !important;
    ///height:     @almostFullSize !important;
    ///left: 0 !important;
    ///top: 0 !important;
    width:      100% !important;
    min-width:  100% !important;
    max-width:  100% !important;
    min-height: 100% !important;
    max-height: 100% !important;
    height:     100% !important;
  }
  #ShopDialog .message {
    // for noiseSlower.gif
    ///background-position: 4px 4px;

    height: auto;//ux(17);
    .pixelated();

    // flex-grow:0 makes this disappear on lof android
    ///flex-grow: 0;
    flex-shrink: 0;
  }

  .ios #ShopDialog .message {
    flex: 2.2;
    flex-shrink: 0;
  }

  #ShopDialog .wrapper {
    ///height: calc(~"100%" - ux(38) ); // 35?
    height: auto; //calc(~"100%" - ux(29) );
    
    // too tall if .message uses flex:1
    ///flex: 1;
    //
    flex: 5;
  }

}




//^  *     *    * *    * * * *  *    * *    * * * *   *        * * * *  
//^  *     *   *   *   *     *  *   *   *   *      *  *        *        
//^   *   *   * * * *  * * * *  *  * * * *  * * * *   *        * * * *  
//^    * *    *     *  *  *     *  *     *  *      *  *        *        
//^     *     *     *  *   *    *  *     *  * * * *   * * * *  * * * *  
//^
//^  * * * *  * * * *  * * * *  * * * *  * * * *  
//^  *           *          *   *        *        
//^  * * * *     *       * *    * * * *  * * * *  
//^        *     *      *       *              *  
//^  * * * *  * * * *  * * * *  * * * *  * * * *  


@media screen and (max-height: ux(275)){
  .BuildingDialog{
    max-height: 70% !important;
  }
}
@media screen and (min-height: ux(275) ){
  .BuildingDialog{
    max-height: ux( 275 * .7 ) !important; // 193
  }
}
@media screen and (min-height: ux(275) ){
  .NotepadDialog{
    max-height: ux( 275 * .90 ) !important;
  }
}
@media screen and (min-height: ux(200) ){
  .ConfirmDialog.Dialog{
    max-height: ux( 200 * .95 ) !important;
  }
}

@media screen and (max-width: ux(156) ){
  #notepad{
    min-width: @almostFullSize !important;
  }
}

@media screen and (max-height: ux(275)){
  #ShopDialog{
    min-height: @almostFullSize !important;
    ///max-height: 100% !important;
    ///height:     100% !important;
  }
}




//^ == == == == == == stop from stretching weirdly 100%
@media 
  screen and (orientation:landscape) and (min-width: ux(200) ){

  body.mobile .Dialog:not(.AvatarDialog):not(.achievements):not(#notepad){
    min-width: auto !important;
    max-width: ux(150) !important; //150
  }

  #ShopDialog{
    min-width:  auto !important;
    max-width:  ux(150) !important;
  }

  #helpDialog, #credits{
    min-width:  auto !important;
    max-width:  ux(180) !important;
  }

  #versionNotes{
    min-width:  auto !important;
    max-width:  ux(130) !important;
  }

}




@media 
  screen and (orientation:landscape){
  body.mobile #main {
    bottom: 0 !important;
    right: ux(10) !important;
  }
}




//`
//`  * * * *  * * * *  * * * *  * * * *  * * * *    * *    *  * * * *  
//`  *     *  *     *  *     *     *     *     *   *   *   *     *     
//`  * * * *  *     *  * * * *     *     * * * *  * * * *  *     *     
//`  *        *     *  *  *        *     *  *     *     *  *     *     
//`  *        * * * *  *   *       *     *   *    *     *  *     *     
//`
//` == == == == == == == == == == == SMALL screens PORTRAIT only (

// @smallSize = 140ux

@media screen and (max-width: @smallSize) and (orientation:portrait){

  .BuildingDialog{
    ///max-height: ux(113) !important;
    max-height: 70% !important;
  }

  #viewFrame{
    border-width:0;
    ///border-top-width: 6px;
    ///border-bottom-width: 6px;
  }
  #rightToolbar {
    width: 100% !important;
    left: 0 !important;
    padding-top: ux(1);
  }
  ///#rightToolbar > .Component{
  ///  margin-top: ux(2);
  ///}
  #rightToolbar > .Component:first-child {
    margin-left: ux(1);
  }
  .showDebugButton {
    top: ux(20);
  }



}

//*
//*  *       * *    *  *  * *    * * *  * * *   * *   * * *  * * *  
//*  *      *   *  * * *  *  *   *      *      *   *  *   *  *      
//*  *      * * *  * * *  *   *  * * *  *      * * *  * * *  * * *  
//*  *      *   *  * * *  *  *       *  *      *   *  *      *      
//*  * * *  *   *  *  *   * *    * * *  * * *  *   *  *      * * *  
//*
//* == == == == == == == == == == == SMALL screens LANDSCAPE only (

// @smallSize = 140ux

@media screen and (max-height: @smallSize) and (orientation:landscape){




  .BuildingDialog{
    //top: ux(1) !important;
    //right: ux(1) !important;

    height: @almostFullSize !important;
    min-height: @almostFullSize !important;
    max-height: @almostFullSize !important;
  }


  #viewFrame{
    border-width: 0;
    ///border-left-width: 6px;
    ///border-right-width: 6px;
  }
  #rightToolbar {
    height: 100% !important;
    top: 0 !important;
    padding-top: ux(1);
    padding-left: ux(2);
    flex-direction: column;
  }
  ///#rightToolbar > .Component{
  ///  margin-right: ux(2);
  ///}
  #rightToolbar > .Component:first-child {
    margin-top: ux(1);
  }
  .showDebugButton {
    right: ux(20);
  }
  .SaveDialog > .content > .message {
    padding: .8em .75em 1.1em 1.5em !important;
  }
  .SaveDialog > .footer {
    padding: .3em 0 !important;
  }

  ///.AvatarDialog {
  ///  left: !important;
  ///  min-width: ux(100) !important;
  ///  max-width: ux(100) !important;
  ///}

}










///canvas#onscreen {
///  outline: 1px solid rgba(255, 255, 255, 0.2);
///  outline-offset: -1px;
///}

// @smallSize = 140ux

@media screen and (orientation:portrait) and (max-width: @smallSize){
  #view:after {
    position: absolute;
    left:0; top:0; right:0; bottom:0; width:100%; height:100%;
    content: " ";
    box-sizing: border-box;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-width: 1px 0;
  }
}
@media screen and (orientation:landscape) and (max-height: @smallSize){
  #view:after {
    position: absolute;
    left:0; top:0; right:0; bottom:0; width:100%; height:100%;
    content: " ";
    box-sizing: border-box;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-width: 0 1px;
  }
}





// == == ==  1080 x 2340  540x1170
// FIX for rounded device corners ??

///@smallSize: ux(`App.MIN_SIZE`);
  ///#main { // DEBUG REMOVE
  ///  border-radius: 45px;
  ///}
@media screen and (max-width:@smallSize) and (orientation: portrait){

  #rightToolbar > .Component:first-child {
    margin-left: 6vw !important;
  }
  #rightToolbar > .Component:last-child {
    margin-right: 5vw !important;
  }
  #rightToolbar > div.Component.ImageButton.clickable,
  #rightToolbar > div.Component.HeartIcon {
    margin: auto;
  }

  #rightToolbar {
    padding: 0 !important;
  }

}
@media screen and (max-height:@smallSize) and (orientation: landscape){

  #rightToolbar > .Component:first-child {
    margin-top: 6vh !important;
  }
  #rightToolbar > .Component:last-child {
    margin-bottom: 5vh !important;
  }
  #rightToolbar > div.Component.ImageButton.clickable,
  #rightToolbar > div.Component.HeartIcon {
    margin: auto ;
  }

  #rightToolbar {
    padding: 0 !important;
  }

}
// == == ==   == == ==   == == ==   == == ==   == == ==   == == ==






.Dialog.worldMapDialog {
  width: auto;
}
.Dialog.worldMapDialog > .header{
  position: relative;
}
.Dialog.worldMapDialog > .content {
  padding:0;
  background-color: #333;
  min-width: ux(22);
  min-height: ux(22);
  // center vertically
  display: flex;
  align-items: center;
  justify-content: center;
  //
  max-height: 90vh;
  max-width: 90vw;
}

// bug fix for dialog scroll areas disappearing on macos
// when the scroll area has overflow
.startupScreenDismissArea {
  z-index: 1;
}