/*
130 landscape default 
2230 portrait default 
4335 landscape large 
6435 misc 
6630 theme Default 
6950 theme Mono Classic 
7215 theme SkyBlue 
7490 theme XMas 
7760 theme PurpleTint
8030 theme CeriseTint
8295 theme LightCyan
8560 theme W311
*/



/*
XXX XXX XXX XXX XXX XXX XXX XXX XXX XXX XXX XXX
NOTE (1) Common XXX XXX XXX XXX XXX XXX XXX XXX XXX XXX XXX XXX XXX
XXX XXX XXX XXX XXX XXX XXX XXX XXX XXX XXX XXX
*/

* {
  padding: 0;
  margin: 0;
  font-size: 16px;
  border: 0;
  -moz-border-radius: 1px;
  -webkit-border-radius: 1px;
  border-radius: 1px;




}

html,
body {
  height: 100%;
  width: 100%;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
  overflow: hidden;
  -moz-border-radius: 1px;
  -webkit-border-radius: 1px;
  border-radius: 1px;

  padding: 0;
  margin: 0;
  font-size: 16px;
  border-color: black;
  border: 0px;
}

body {
  /* position:relative; */
  font-family: sans-serif;
  background-color: black;
  box-sizing: border-box;
}

#introText {
  display: none;
}

#topDiv
{
  background: inherit;
}

#topDivInnerFrame
{
  display:flex;
  justify-content: center;
  align-content: center;  
  height:auto;
  width:auto;
}

.zindexBehind
{
  z-index: -1;
}

#bannerDiv
{
  height: 100%;
  width: 100%;
  text-align: center;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: center; 
  background:inherit;
}

#bannerDisclaimer
{
  font-size: 10px;
  text-align: center;  
  margin-top: 1vmin;
  width:100%;
}

#adHint
{
  font-size: 10px;
  text-align: center;
}

.adHintTurn90Deg
{
  transform: rotate(-90deg) translateX(-100%);
  /* Safari */
  -webkit-transform: rotate(-90deg) translateY(0px) translateX(-110%);
  /* Firefox */
  -moz-transform: rotate(-90deg) translateX(-110%);
  /* IE */
  -ms-transform: rotate(-90deg) translateX(-110%);
  /* Opera */
  -o-transform: rotate(-90deg) translateX(-110%);
  
  transform-origin: top left;
  width: auto;
  height: auto;
  /* left: 0px;
  top: 3px; */
  
  /* position: absolute; */
}

.bannerLink
{
  border-radius: 4vmin;
  font-weight: bolder;
  
  font-family: Arial, Helvetica, sans-serif;
  white-space: nowrap;
  text-decoration: none;
}



.bannerLinkVertical {
padding: 10px 5px;
line-height: calc(.8rem + 2vh);
font-family: monospace;
}
.bannerLinkHorizontal {
  padding: 2px 15px;
  margin-right:15px;
}

/* Ko-fi-Icons im Header (Spende bei Amazon-Fehler) */
#donateH img {
  display: block;
  max-width: calc(6rem + 10vmin);
  max-height: calc(4.5rem + 7vmin);
  width: auto;
  height: auto;
  object-fit: contain;
}
#donateV img {
  display: block;
  max-width: calc(3rem + 4vmin);
  max-height: calc(2.5rem + 3vmin);
  width: auto;
  height: auto;
  object-fit: contain;
}

/* H/V-Schaltung via Media Query (identisch DE & EN) */
/* Default: Banner oben → kofi.gif (horizontal) */
#donateV { display: none; }
/* Narrow landscape: Banner seitlich → music_mug (vertikal) */
@media (orientation: landscape) and (max-height: 599px) {
    #donateH { display: none; }
    #donateV { display: block; }
}

/* DE: JS blendet beide aus wenn Amazon-Banner aktiv */
.donatesHidden #donateH,
.donatesHidden #donateV { display: none !important; }

/* Ko-fi-Icon im Footer */
.kofi-link {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(0.1rem, 0.3vmin, 0.2rem);
  text-decoration: none;
}
.kofi-link img {
  width: clamp(1.6rem, 3vmin, 4rem);
  height: auto;
  animation: kofi-wobble 120s linear infinite;
}

@keyframes kofi-wobble {
  0%       { transform: rotate(0deg);    animation-timing-function: ease-in-out; }
  0.2083%  { transform: rotate(-20deg);  animation-timing-function: ease-in-out; }
  0.625%   { transform: rotate(20deg);   animation-timing-function: ease-in-out; }
  0.8333%  { transform: rotate(0deg); }
  100%     { transform: rotate(0deg); }
}


.noStyle {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.acInputExt {
  -moz-appearance: textfield;
}

select::-ms-expand {
  display: none;
}

option {
  font-size: calc(.6rem + 1.5vmin);
}

.acInputExt::-webkit-outer-spin-button,
.acInputExt::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

#noscript {
  position: absolute;
  bottom: 50%;
  width: 100%;
  font-size: 10vmin;
  text-align: center;
  background-color: red;
  z-index: 10;
}

input::-ms-clear {
  display: none;
}

#donateLinkSV,
#donateLinkSH,
#donateLinkBH,
#joinButtonS,
#joinButtonB {
  display: none;
  text-align: center;
}


.errorContact {
  width: 100%;
  text-align: center;
  margin-top: 10vh;
}

.wrongUrlText {
  color: #eadfbd !important;
}



/*
XXX XXX XXX XXX XXX XXX XXX XXX XXX XXX XXX XXX
NOTE (2) Layout landscape default XXX XXX XXX XXX XXX XXX
XXX XXX XXX XXX XXX XXX XXX XXX XXX XXX XXX XXX
*/



@media only screen and (orientation:landscape) {

  .body {
    padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
    display: -ms-grid;
    display: grid;
    -ms-grid-rows: auto minmax(0, 1fr) 8vh;
    grid-template-rows: auto minmax(0, 1fr) 8vh;
    /* -ms-grid-columns: 1px minmax(0, 1fr);
    grid-template-columns: 1px minmax(0, 1fr); */
    -ms-grid-columns: minmax(60px, 7vw) minmax(0, 1fr);
    grid-template-columns: minmax(60px, 7vw) minmax(0, 1fr);
    border: 0;
  }

  #bannerDiv {
    flex-direction: column;
  }

  .fontXLarge {
    font-size: calc(1rem + 2vmin);
  }

  .fontLarge {
    font-size: calc(.8rem + 2vmin);
  }

  .fontMedium {
    font-size: calc(.6rem + 2vmin);
  }

  .fontSmall {
    font-size: 10px;
  }


  /* XXX Greeting start XXX*/
  #greeting {
    display: none;
    height: 100%;
    width: 100%;
    text-align: center;
    text-align: -webkit-center;
    -ms-grid-column: 2;
    grid-column: 2;
    -ms-grid-row: 2;
    grid-row: 2;
    z-index: 2;
  }

  #innerGreet {
    display: grid;
    -ms-grid-rows: auto minmax(0, 1fr) auto;
    grid-template-rows: auto minmax(0, 1fr) auto;
    -ms-grid-columns: minmax(0, 1fr);
    grid-template-columns: minmax(0, 1fr);
    height: 50vh;
    width: 80vw;
    margin-top: 5vh;

  }

  #greetH {
    padding-top: 2vh;
    padding-bottom: 2vh;
    text-align: center;
    -ms-grid-row: 1;
    grid-row: 1;
    -ms-grid-column: 1;
    grid-column: 1;
  }

  #greetText {
    text-align: center;
    overflow-y: auto;
    -ms-grid-row: 2;
    grid-row: 2;
    -ms-grid-column: 1;
    grid-column: 1;
    padding-left: 2vw;
    padding-right: 2vw;
  }

  #greetButton {
    -ms-grid-row: 3;
    grid-row: 3;
    -ms-grid-column: 1;
    grid-column: 1;
    margin-top: 3vh;
    margin-bottom: 1vh;
  }

  /* XXX Greeting end XXX*/



  #topDiv {
    width: 100%;
    height: 100%;
    -ms-grid-column: 1;
    grid-column: 1;
    -ms-grid-row: 1;
    -ms-grid-row-span: 3;
    grid-row: 1/4;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
  .responsiveAd {
    width: 100%;
    height: 100%;
  }

  #donateLinkSV {
    display: block;
    max-height: 300px;
    height: 50vh;
    width: auto;
    align-self: center;
  }

  .donateImgV {
    max-width: 100%;
    max-height: 100%;
  }

  .donateImgH,
  #joinButtonS {
    max-width: 100%;
    height: auto;
  }

  .donateImgBV {
    max-height: 100%;
    width: auto;
  }

  #title {
    width: 100%;
    text-align: center;
    -ms-grid-row: 1;
    grid-row: 1;
    -ms-grid-column: 2;
    grid-column: 2;
  }

  #titleadds {
    float: right;
    margin-right: 5vw;
  }

  #loading {
    display: none;
    -ms-grid-row: 2;
    grid-row: 2;
    -ms-grid-column: 2;
    grid-column: 2;
    z-index: 2;
    align-self: center;
    justify-self: center;
    text-align: center;
    -ms-grid-column-align: center;
    -ms-grid-row-align: center;
  }

  /*
    XXX XXX XXX XXX XXX
    NOTE default    XXX
    NOTE calcMain   XXX
    XXX XXX XXX XXX XXX
    */

  #acScaleOuterDiv {
    -ms-grid-column: 2;
    grid-column: 2;
    -ms-grid-row: 2;
    grid-row: 2;
  }

  #arcCalc {
    display: none;
    -ms-grid-column: 2;
    grid-column: 2;
    -ms-grid-row: 2;
    grid-row: 2;
    width: 100%;
    height: 100%;
    -ms-grid-columns: 1fr;
    grid-template-columns: 1fr;
    -ms-grid-rows: 1.5fr auto 1fr;
    grid-template-rows: 1.5fr auto 1fr;
    -ms-grid-row-align: center;
    -ms-grid-column-align: center;
    align-self: center;
    justify-self: center;
  }

  #acUpperSettings {
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: auto 1fr;
    grid-template-columns: auto 1fr;
    -ms-grid-rows: auto 1fr;
    grid-template-rows: auto 1fr;
    text-align: center;
    align-items: center;
    padding: 0 3vw 0 3vw;
    -ms-grid-row: 1;
    grid-row: 1;
    -ms-grid-column: 1;
    grid-column: 1;
    -ms-grid-row-align: center;
    -ms-grid-column-align: center;
    align-self: center;
    justify-self: center;
  }

  .buttonExtended {
    border: 0;
    padding: 0 2vw;
  }

  #acDivGBselect {
    -ms-grid-row: 1;
    -ms-grid-column: 1;
    grid-row: 1;
    grid-column: 1;
    -ms-grid-row-align: center;
    display: flex;
    flex-direction: row;
    align-content: space-between;
  }

  .acGbSelect {
    width: 20vw;
    height: 100%;
    border: 0;
    padding-left: 1vw;
    margin-left: 1vw;
  }

  #acGbLevelDiv {
    -ms-grid-row: 1;
    -ms-grid-column: 2;
    grid-row: 1;
    grid-column: 2;
    -ms-grid-row-align: center;
    white-space: nowrap;
  }

  #acGbLevelInput {
    width: 8ch;
    text-align: center;
    border: 0;
  }

  #acDivPreset {
    -ms-grid-row: 2;
    -ms-grid-column: 1;
    grid-row: 2;
    grid-column: 1;
    -ms-grid-row-align: center;
    margin-bottom: 1vh;
    margin-top: 1vh;
  }

  #acFavExtSelect,
  #acFavBaseSelect {
    height: 100%;
    border: 0;
    padding-left: 1vw;
    padding-right: 1vw;
    max-width: 18vw;
  }

  #acFavBaseSelect,
  #favDash {
    display: none;
  }


  .acDivInfo {
    white-space: nowrap;
    margin-right: 1vw;
    margin-left: 1vw;
  }

  #acDivTotal {
    -ms-grid-row: 2;
    -ms-grid-column: 2;
    grid-row: 2;
    grid-column: 2;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 1vh;
  }

  #acTable {
    display: grid;
    display: -ms-grid;
    grid-template-columns: 85% 15%;
    -ms-grid-columns: 85% 15%;
    /* padding: 0 3vw 0 3vw; */
    -ms-grid-row: 2;
    grid-row: 2;
    -ms-grid-column: 1;
    grid-column: 1;
    -ms-grid-row-align: center;
    -ms-grid-column-align: center;
    align-self: center;
    justify-self: center;
  }

  #acCoreTable {
    grid-column: 1;
    -ms-grid-column: 1;
    grid-row: 1;
    -ms-grid-row: 1;
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: 7fr 6fr 7fr 8fr 8fr 8fr;
    grid-template-columns: 7fr 6fr 7fr 8fr 8fr 8fr;
    -ms-grid-rows: auto 1fr 1fr 1fr 1fr 1fr;
    grid-template-rows: auto 1fr 1fr 1fr 1fr 1fr;
    width: 100%;
  }

  .acTableCell {
    display: block;
    text-align: center;
    padding: 0;
    height: 100%;
    /* border: 1px solid black; */
    border-top: 1px solid black;
    border-left: 0;
    border-bottom: 0;
    border-right: 1px solid black;
    /* vertical-align:baseline; */

  }

  .acTableCell input {
    text-align: center;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    border: none;
    outline: none;
  }

  .acTableCellDescription {
    height: auto;
    text-align: center;
    font-weight: bold;
  }

  .acHeaderDiv {
    border-top: 1px solid black;
    border-left: 0;
    border-bottom: 0;
    border-right: 1px solid black;
    height: 100%;
    width:100%;
    overflow: hidden;
  }

  .acHeaderButton {
    display: block;
    height: 100%;
    width: 100%;
    text-align: center;
    font-weight: bold;
    padding: 0 1vw 0 1vw;
    border: none;
  }


  .acInputExt {
    -moz-appearance: textfield;
  }

  #acDivPlace {
    grid-column: 1;
    grid-row: 1;
    -ms-grid-column: 1;
    -ms-grid-row: 1;
  }

  #acDivFactor {
    grid-column: 2;
    grid-row: 1;
    -ms-grid-column: 2;
    -ms-grid-row: 1;
  }

  #acDivBaseCost {
    grid-column: 3;
    grid-row: 1;
    -ms-grid-column: 3;
    -ms-grid-row: 1;
  }

  #acDivCost {
    grid-column: 4;
    grid-row: 1;
    -ms-grid-column: 4;
    -ms-grid-row: 1;
  }

  #acDivSecure {
    grid-column: 5;
    grid-row: 1;
    -ms-grid-column: 5;
    -ms-grid-row: 1;
  }

  #acDivSecureExtended {
    grid-column: 6;
    grid-row: 1;
    -ms-grid-column: 6;
    -ms-grid-row: 1;
  }


  #acDivP1 {
    grid-column: 1;
    grid-row: 2;
    -ms-grid-column: 1;
    -ms-grid-row: 2;
  }

  #acDivP2 {
    grid-column: 1;
    grid-row: 3;
    -ms-grid-column: 1;
    -ms-grid-row: 3;
  }

  #acDivP3 {
    grid-column: 1;
    grid-row: 4;
    -ms-grid-column: 1;
    -ms-grid-row: 4;
  }

  #acDivP4 {
    grid-column: 1;
    grid-row: 5;
    -ms-grid-column: 1;
    -ms-grid-row: 5;
  }

  #acDivP5 {
    grid-column: 1;
    grid-row: 6;
    -ms-grid-column: 1;
    -ms-grid-row: 6;
  }

  #acDivFactorP1 {
    grid-column: 2;
    grid-row: 2;
    -ms-grid-column: 2;
    -ms-grid-row: 2;
  }

  #acDivFactorP2 {
    grid-column: 2;
    grid-row: 3;
    -ms-grid-column: 2;
    -ms-grid-row: 3;
  }

  #acDivFactorP3 {
    grid-column: 2;
    grid-row: 4;
    -ms-grid-column: 2;
    -ms-grid-row: 4;
  }

  #acDivFactorP4 {
    grid-column: 2;
    grid-row: 5;
    -ms-grid-column: 2;
    -ms-grid-row: 5;
  }

  #acDivFactorP5 {
    grid-column: 2;
    grid-row: 6;
    -ms-grid-column: 2;
    -ms-grid-row: 6;
  }


  #acDivBaseP1 {
    grid-column: 3;
    grid-row: 2;
    -ms-grid-column: 3;
    -ms-grid-row: 2;
  }

  #acDivBaseP2 {
    grid-column: 3;
    grid-row: 3;
    -ms-grid-column: 3;
    -ms-grid-row: 3;
  }

  #acDivBaseP3 {
    grid-column: 3;
    grid-row: 4;
    -ms-grid-column: 3;
    -ms-grid-row: 4;
  }

  #acDivBaseP4 {
    grid-column: 3;
    grid-row: 5;
    -ms-grid-column: 3;
    -ms-grid-row: 5;
  }

  #acDivBaseP5 {
    grid-column: 3;
    grid-row: 6;
    -ms-grid-column: 3;
    -ms-grid-row: 6;
  }

  #acDivCostP1 {
    grid-column: 4;
    grid-row: 2;
    -ms-grid-column: 4;
    -ms-grid-row: 2;
  }

  #acDivCostP2 {
    grid-column: 4;
    grid-row: 3;
    -ms-grid-column: 4;
    -ms-grid-row: 3;
  }

  #acDivCostP3 {
    grid-column: 4;
    grid-row: 4;
    -ms-grid-column: 4;
    -ms-grid-row: 4;
  }

  #acDivCostP4 {
    grid-column: 4;
    grid-row: 5;
    -ms-grid-column: 4;
    -ms-grid-row: 5;
  }

  #acDivCostP5 {
    grid-column: 4;
    grid-row: 6;
    -ms-grid-column: 4;
    -ms-grid-row: 6;
  }

  #acDivSecureP1 {
    grid-column: 5;
    grid-row: 2;
    -ms-grid-column: 5;
    -ms-grid-row: 2;
  }

  #acDivSecureP2 {
    grid-column: 5;
    grid-row: 3;
    -ms-grid-column: 5;
    -ms-grid-row: 3;
  }

  #acDivSecureP3 {
    grid-column: 5;
    grid-row: 4;
    -ms-grid-column: 5;
    -ms-grid-row: 4;
  }

  #acDivSecureP4 {
    grid-column: 5;
    grid-row: 5;
    -ms-grid-column: 5;
    -ms-grid-row: 5;
  }

  #acDivSecureP5 {
    grid-column: 5;
    grid-row: 6;
    -ms-grid-column: 5;
    -ms-grid-row: 6;
  }

  #acDivSecureSumP1 {
    grid-column: 6;
    grid-row: 2;
    -ms-grid-column: 6;
    -ms-grid-row: 2;
  }

  #acDivSecureSumP2 {
    grid-column: 6;
    grid-row: 3;
    -ms-grid-column: 6;
    -ms-grid-row: 3;
  }

  #acDivSecureSumP3 {
    grid-column: 6;
    grid-row: 4;
    -ms-grid-column: 6;
    -ms-grid-row: 4;
  }

  #acDivSecureSumP4 {
    grid-column: 6;
    grid-row: 5;
    -ms-grid-column: 6;
    -ms-grid-row: 5;
  }

  #acDivSecureSumP5 {
    grid-column: 6;
    grid-row: 6;
    -ms-grid-column: 6;
    -ms-grid-row: 6;
  }

  .acExternals {
    grid-column: 2;
    -ms-grid-column: 2;
    grid-row: 1;
    -ms-grid-row: 1;
    display: grid;
    display: -ms-grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr 1fr 1fr 1fr 1fr;
    -ms-grid-columns: 1fr;
    padding-left: .5vw;
    /* align-items: center;
      width: 100%;
      height: 100%; */
  }

  #acDivExternButton {
    grid-column: 1;
    grid-row: 1;
    -ms-grid-column: 1;
    -ms-grid-row: 1;
  }

  #acDivExtern1 {
    grid-column: 1;
    grid-row: 2;
    -ms-grid-column: 1;
    -ms-grid-row: 2;
  }

  #acDivExtern2 {
    grid-column: 1;
    grid-row: 3;
    -ms-grid-column: 1;
    -ms-grid-row: 3;
  }

  #acDivExtern3 {
    grid-column: 1;
    grid-row: 4;
    -ms-grid-column: 1;
    -ms-grid-row: 4;
  }

  #acDivExtern4 {
    grid-column: 1;
    grid-row: 5;
    -ms-grid-column: 1;
    -ms-grid-row: 5;
  }

  #acDivExtern5 {
    grid-column: 1;
    grid-row: 6;
    -ms-grid-column: 1;
    -ms-grid-row: 6;
  }

  #acDivCD {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-around;
    padding: 0 3vw 0 3vw;
    -ms-grid-row: 3;
    grid-row: 3;
    -ms-grid-column: 1;
    grid-column: 1;
    -ms-grid-row-align: center;
    -ms-grid-column-align: center;
    align-self: center;
    justify-self: center;
  }

  #acDivCDButtonCopy {
    -ms-grid-row: 1;
    grid-row: 1;
    -ms-grid-column: 4;
    grid-column: 4;
  }

  #acCDButtonCopy {
    display: block;
    width: 100%;
    /* padding: 0 1vw 0 1vw !important;       */
    overflow-x: hidden;
    width: auto;
  }

  #acCDText {
    -ms-grid-row: 1;
    grid-row: 1;
    -ms-grid-column: 3;
    grid-column: 3;
    width: 50%;
    text-align: center;
  }

  #acCDStyle {
    -ms-grid-row: 1;
    grid-row: 1;
    -ms-grid-column: 2;
    grid-column: 2;
    width: 20%;
    border: 0;
  }


  .helpPopup {
    border-radius: 20px;
    position: absolute;
    top: 0px;
    left: 0px;
    padding: 4px;
  }

  /*NOTE arcCalc end XXX */

  /* acPresetConfig start */

  #acPresetConfig {
    display: none;
    -ms-grid-column: 2;
    grid-column: 2;
    -ms-grid-row: 2;
    grid-row: 2;

    -ms-grid-rows: minmax(0, 1fr) auto;
    grid-template-rows: minmax(0, 1fr) auto;
    -ms-grid-columns: minmax(50%, 1fr) minmax(40%, 1fr);
    grid-template-columns: minmax(50%, 1fr) minmax(40%, 1fr);
    height: 100%;
    width: 100%;
    text-align: center;
    text-align: -webkit-center;
    z-index: 2;
  }

  /* #acGbBasePresetsDiv {
    -ms-grid-column: 1;
    grid-column: 1;
    -ms-grid-row: 1;
    grid-row: 1;
  }

  #acGbExtendedPresetsDiv {
    -ms-grid-column: 2;
    grid-column: 2;
    -ms-grid-row: 1;
    grid-row: 1;
  } */

  #acGbPresetsBtnDiv {
    -ms-grid-column: 1;
    -ms-grid-column-span: 2;
    grid-column: 1/3;
    -ms-grid-row: 2;
    grid-row: 2;
    padding-top: 1.5vh;
    padding-bottom: 1.5vh;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-around;
    width: 75%;
    justify-self: center;
    -ms-grid-column-align: center;
  }


  #acGbBasePresetsDiv,
  #acGbExtendedPresetsDiv {
    -ms-grid-rows: auto minmax(0, 1fr) auto;
    grid-template-rows: auto minmax(0, 1fr) auto;
    -ms-grid-columns: minmax(0, 1fr);
    grid-template-columns: minmax(0, 1fr);
    padding-bottom: 2vh;
    padding-top: 2vh;
  }

  #acGbBasePresetsTitleDiv,
  #acGbExtendedPresetsTitleDiv {
    -ms-grid-row: 1;
    grid-row: 1;
    -ms-grid-column: 1;
    grid-column: 1;
    text-align: center
  }

  #acGbBasePresetsTableDiv,
  #acGbExtendedPresetsTableDiv {
    -ms-grid-row: 2;
    grid-row: 2;
    -ms-grid-column: 1;
    grid-column: 1;
    overflow-y: auto;
    -ms-grid-column-align: center;
    justify-self: center;
  }


  #acGbBasePresetsBtnDiv,
  #acGbExtendedPresetsBtnDiv {
    padding-top: 1.5vh;
    -ms-grid-row: 3;
    grid-row: 3;
    -ms-grid-column: 1;
    grid-column: 1;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-around;
  }

  #acGbBasePresetsTable,
  #acGbExtendedPresetsTable {
    border-collapse: separate;
    border-spacing: 1vw 1vh;
    padding: 0 2vw 0 2vw;
  }

  .AddBtn {
    text-align: center;
    border-radius: .2rem;
    width: auto;
    height: auto;
    padding: 0 3vw 0 3vw;
  }

  .delBtn {
    text-align: center;
    border-radius: .2rem;
    width: auto;
    height: auto;
    padding: 0 2vw 0 2vw;
  }

  .acFavConfigBtnInactive,
  .acFavConfigBtnActive {
    text-align: center;
    border-radius: .2rem;
    width: auto;
    height: auto;
    padding: 0 1vw 0 1vw;
  }

  .acFavBaseInput,
  .acFavExtendedInput {
    max-width: 25vw;
  }



  /* acPresetConfig end */

  /*NOTE chart start XXX */

  #chart {
    display: none;
    -ms-grid-column: 2;
    grid-column: 2;
    -ms-grid-row: 2;
    grid-row: 2;
    -ms-grid-columns: minmax(0, 1fr) auto;
    grid-template-columns: minmax(0, 1fr) auto;
    -ms-grid-rows: minmax(0, 1fr) auto auto auto;
    grid-template-rows: minmax(0, 1fr) auto auto auto;
    width: 100%;
    height: 100%;
    -ms-grid-row-align: center;
    -ms-grid-column-align: center;
    align-self: center;
    justify-self: center;
  }

  #chartDivCanvas {
    -ms-grid-row: 1;
    -ms-grid-row-span: 3;
    grid-row: 1/4;
    -ms-grid-column: 1;
    grid-column: 1;
    text-align: center;
  }

  #chartDivSettings {
    -ms-grid-row: 1;
    grid-row: 1;
    -ms-grid-column: 2;
    grid-column: 2;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    padding-right: 1vw;
  }

  #chartGbSelectDiv,
  #chartDivZoom {
    width: 100%;
    text-align: center;

  }

  .chartGbSelect,
  #chartZoomBtn {
    width: 70%;
  }

  #chartDivLevelBegin {

    text-align: center;
  }

  #chartDivLevelEnd {

    text-align: center;
  }

  #chartOverview {
    -ms-grid-row: 2;
    -ms-grid-row-span: 2;
    grid-row: 2/4;
    -ms-grid-column: 2;
    grid-column: 2;
    padding-right: 1vw;
    padding-bottom: 2vh;
    display: flex;
    flex-direction: column;

  }

  #chartDivSumTotal,
  #chartDivSumOwn {
    width: 100%;
    text-align: center;
    display: flex;
    flex-direction: column;
    padding-top: 1vh;
  }

  .chartInput {
    text-align: center;
    width: 4vw;
    height: auto;
    box-sizing: border-box;
    border: none;
    outline: none;
  }

  #chartDivFPInvest {
    -ms-grid-row: 4;
    grid-row: 4;
    -ms-grid-column: 1;
    -ms-grid-column-span: 2;
    grid-column: 1;
    text-align: center;
    padding-bottom: 2vw;
  }

  #chartFPInvest {
    width: 7ch;
  }

  /*NOTE chart end XXX */

  /*
    XXX XXX XXX XXX XXX XXX XXX
    NOTE settlement start XXX
    XXX XXX XXX XXX XXX XXX XXX
    */

  #setDiv {
    display: none;
    -ms-grid-column: 2;
    grid-column: 2;
    -ms-grid-row: 2;
    grid-row: 2;
    -ms-grid-rows: auto minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr);
    -ms-grid-columns: minmax(0, 1fr);
    grid-template-columns: minmax(0, 1fr);
    -ms-grid-row-align: center;
    -ms-grid-column-align: center;
    align-self: center;
    justify-self: center;
    height: 100%;
    width: 100%;
  }

  #setTopMenuDiv {
    -ms-grid-row: 1;
    grid-row: 1;
    -ms-grid-column: 1;
    grid-column: 1;
    text-align: center;
    padding-top: 2vh;
  }

  #setPresetSelect {
    margin-right: 2vw;
    /* margin: 0 2vw 0 2vw; */
    text-align: center;
    width: auto;
    max-width: 30vw;
    height: auto;
    box-sizing: border-box;
    border: none;
    outline: none;
  }

  #setToggleDiv {
    display: inline-block;
  }

  #setMainContent,
  #setAgeSelectDiv,
  #setGoodsSetupDiv {
    -ms-grid-row: 2;
    grid-row: 2;
    -ms-grid-column: 1;
    grid-column: 1;
    padding-top: 4vh;
    padding-bottom: 3vh;
    height: 90%;
    width: 100%;
  }

  #setAgeSelectDiv {
    display: none;
    justify-items: center;
    align-items: center;
    -ms-grid-column-align: center;
    -ms-grid-row-align: center;
    -ms-grid-rows: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
    -ms-grid-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }

  .settleFrame {
    display: -ms-grid;
    display: grid;
    -ms-grid-rows: auto auto minmax(0, 1fr);
    grid-template-rows: auto auto minmax(0, 1fr);
    -ms-grid-columns: minmax(0, 1fr);
    grid-template-columns: minmax(0, 1fr);
    height: 100%;
    overflow-y: hidden;
  }

  .setChoiceButton {
    width: 25vw;
    height: 10vh;
    margin: 2vh;
    -ms-grid-column-align: center;
    -ms-grid-row-align: center;
  }

  #setButtonCViking {
    -ms-grid-row: 1;
    grid-row: 1;
    -ms-grid-column: 1;
    grid-column: 1;
  }

  #setButtonCJapan {
    -ms-grid-row: 1;
    grid-row: 1;
    -ms-grid-column: 2;
    grid-column: 2;
  }

  #setButtonCEgypt {
    -ms-grid-row: 2;
    grid-row: 2;
    -ms-grid-column: 1;
    grid-column: 1;
  }

  #setButtonCAztec {
    -ms-grid-row: 2;
    grid-row: 2;
    -ms-grid-column: 2;
    grid-column: 2;
  }

  #setButtonCMughal {
    -ms-grid-row: 3;
    grid-row: 3;
    -ms-grid-column: 1;
    grid-column: 1;
  }

  #setGoodsSetupDiv {
    -ms-grid-rows: auto minmax(0, 1fr) auto;
    grid-template-rows: auto minmax(0, 1fr) auto;
    -ms-grid-columns: minmax(0, 1fr);
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
  }

  .setTableText,
  .setTDValues,
  .setTDProgress,
  .setTDAmount,
  .setTDRadio {
    word-break: break-all;
    overflow-wrap: anywhere;
  }

  #settleGoodsSetupTableHeadDiv {
    -ms-grid-row: 1;
    grid-row: 1;
    -ms-grid-column: 1;
    grid-column: 1;
    width: 90%;
    -ms-grid-column-align: center;
  }

  #setGoodsSetupTableBodyDiv {
    -ms-grid-row: 2;
    grid-row: 2;
    -ms-grid-column: 1;
    grid-column: 1;
    width: 90%;
    -ms-grid-column-align: center;
  }

  #setGoodsSetupButtonDoneDiv {
    -ms-grid-row: 3;
    grid-row: 3;
    -ms-grid-column: 1;
    grid-column: 1;
    text-align: center;
    padding-top: 2vh;
  }

  #setGoodsSetupButtonDone {
    width: 30vw;
  }

  .setInput {
    width: 100%;
    height: 100%;
    text-align: center;
  }

  .setGoodsTableNumber {
    width: 12%;
    text-align: center;
    height: 4vh;
  }

  .setGoodsTableText {
    padding-left: 1vw;
    padding-right: 1vw;
  }

  .setGoodsInput {
    width: 100%;
    height: 100% !important;
    text-align: center;
  }

  .tableHead {

    height: auto;
    padding-right: 1vw;
    padding-left: 1vw;
  }

  .setResearchHead {
    height: 100%;
    width: 100%;
    border-collapse: collapse;
  }

  .setGoodPic {
    width: 50%;
  }

  #settleResearchTableHeadADiv {
    -ms-grid-row: 1;
    grid-row: 1;
    -ms-grid-column: 1;
    grid-column: 1;
  }

  #settleResearchTableHeadBDiv {
    -ms-grid-row: 2;
    grid-row: 2;
    -ms-grid-column: 1;
    grid-column: 1;
  }

  #setResearchTableBodyDiv {
    -ms-grid-row: 3;
    grid-row: 3;
    -ms-grid-column: 1;
    grid-column: 1;
  }

  .tableBody {

    height: auto;
    padding-right: 1vw;
    padding-left: 1vw;
    overflow-y: scroll;
    scrollbar-width: none;
    /* Firefox */
    -ms-overflow-style: none;
    /* Internet Explorer 10+ */
  }

  .tableBody::-webkit-scrollbar {
    /* WebKit */
    width: 0;
    height: 0;
  }

  .setResearchTableBody {
    height: 100%;
    width: 100%;
    border-collapse: collapse;
  }

  .setTDRadio {
    width: 9%;
    text-align: center;
  }

  .setTDProgress {
    text-align: center;
  }

  .setTDAmount {
    width: 12%;
    text-align: center;
  }

  .setTDValues {
    width: 12%;
    text-align: center;
    padding-right: 5px;
  }

  .settleRadioLabel {
    display: block;
    /* width: 100%;
      height: 100%; */
  }

  .settleRadio {
    vertical-align: middle;
    border: 0px;
    width: 100%;
    height: calc(.3rem + 1vw);
    /* filter: grayscale(1);

      appearance: radio !important;
      -webkit-appearance: radio !important;
      -moz-appearance: radio !important; */
  }

  .setTableText {
    padding-left: 5px;
    padding-right: 5px;
  }

  #setQuestHeadDiv {
    -ms-grid-row: 1;
    grid-row: 1;
    -ms-grid-column: 1;
    grid-column: 1;
    width: auto;
    padding-right: 1vw;
    padding-left: 1vw;
  }

  #setQuestHeadTable {
    width: 100%;
  }



  #setQuestBodyDiv {
    -ms-grid-row: 2;
    -ms-grid-row-span: 2;
    grid-row: 2/4;
    -ms-grid-column: 1;
    grid-column: 1;
    width: auto;
    padding-right: 1vw;
    padding-left: 1vw;
  }

  #setQuestTableBody {
    width: 100%;
  }

  /*NOTE settlement end XXX */

  /*
    XXX XXX XXX XXX XXX XXX XXX
    NOTE settle Preset start XXX
    XXX XXX XXX XXX XXX XXX XXX
    */


  /* acPresetConfig start */

  #settlePresetConfig {
    display: none;
    -ms-grid-column: 2;
    grid-column: 2;
    -ms-grid-row: 2;
    grid-row: 2;

    -ms-grid-rows: minmax(0, 1fr) auto;
    grid-template-rows: minmax(0, 1fr) auto;
    -ms-grid-columns: minmax(0, 1fr);
    grid-template-columns: minmax(0, 1fr);

    height: 100%;
    width: 100%;
    text-align: center;
    text-align: -webkit-center;
    z-index: 2;
  }

  #settlePresetsDiv {
    -ms-grid-column: 1;
    grid-column: 1;
    -ms-grid-row: 1;
    grid-row: 1;
  }

  #settlePresetsBtnDiv {
    -ms-grid-column: 1;
    grid-column: 1;
    -ms-grid-row: 2;
    grid-row: 2;
    padding-top: 1.5vh;
    padding-bottom: 1.5vh;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-around;
    width: 75%;
    justify-self: center;
  }



  #settlePresetsDiv {
    display: grid;
    display: -ms-grid;
    -ms-grid-rows: auto minmax(0, 1fr) auto;
    grid-template-rows: auto minmax(0, 1fr) auto;
    -ms-grid-columns: minmax(0, 1fr);
    grid-template-columns: minmax(0, 1fr);
    padding-bottom: 2vh;
    padding-top: 2vh;
  }

  #settlePresetsTitleDiv {
    -ms-grid-row: 1;
    grid-row: 1;
    -ms-grid-column: 1;
    grid-column: 1;
    text-align: center
  }

  #settlePresetsTableDiv {
    -ms-grid-row: 2;
    grid-row: 2;
    -ms-grid-column: 1;
    grid-column: 1;
    overflow-y: auto;
    -ms-grid-column-align: center;
    justify-self: center;
  }


  #settlePresetsBtnDiv {
    padding-top: 1.5vh;
    -ms-grid-row: 3;
    grid-row: 3;
    -ms-grid-column: 1;
    grid-column: 1;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-around;
  }

  #settlePresetsTable {
    border-collapse: separate;
    border-spacing: 1vw 1vh;
    padding: 0 2vw 0 2vw;
  }

  .settleFavInput {
    max-width: 25vw;
  }



  /* acPresetConfig end */



  /*NOTE settle Preset end XXX */





  /*
    XXX XXX XXX XXX XXX XXX XXX
    NOTE snipeandbattle start XXX
    XXX XXX XXX XXX XXX XXX XXX
    */

  #snipeAndBattle {
    display: none;
    -ms-grid-column: 2;
    grid-column: 2;
    -ms-grid-row: 2;
    grid-row: 2;
    margin-top: 2vh;
    -ms-grid-rows: minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr);
    -ms-grid-columns: minmax(0, 4fr) minmax(0, 3fr);
    ;
    grid-template-columns: minmax(0, 4fr) minmax(0, 3fr);
    -ms-grid-row-align: center;
    -ms-grid-column-align: center;
    align-self: center;
    justify-self: center;
    height: 90%;
    width: 90%;
  }



  /*NOTE outbid start XXX */
  #obDiv {
    -ms-grid-row: 1;
    grid-row: 1;
    -ms-grid-column: 1;
    -ms-grid-column-span: 2;
    grid-column: 1/3;
    display: grid;
    grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr;
    -ms-grid-rows: 1fr 1fr 1fr 1fr 1fr 1fr;
    grid-template-columns: minmax(0, 1fr) auto auto minmax(0, 1fr);
    -ms-grid-columns: minmax(0, 1fr) auto auto minmax(0, 1fr);
  }

  .obInput {
    text-align: center;
    width: 9vw;
    height: auto;
    margin-left: 1vw;
  }

  #obTitleL {
    text-align: center;
    -ms-grid-row: 1;
    grid-row: 1;
    -ms-grid-column: 1;
    -ms-grid-column-span: 4;
    grid-column: 1/5;
  }

  #obGBTotalL {
    -ms-grid-row: 2;
    grid-row: 2;
    -ms-grid-column: 1;
    grid-column: 1;
    text-align: right;
  }

  #obGBTotalDiv {
    -ms-grid-row: 2;
    grid-row: 2;
    -ms-grid-column: 2;
    grid-column: 2;
  }

  #obGBCurFPL {
    -ms-grid-row: 2;
    grid-row: 2;
    -ms-grid-column: 3;
    grid-column: 3;
    text-align: right;
  }

  #obGBCurFPDiv {
    -ms-grid-row: 2;
    grid-row: 2;
    -ms-grid-column: 4;
    grid-column: 4;
  }

  #obOwnCurFPL {
    -ms-grid-row: 3;
    grid-row: 3;
    -ms-grid-column: 1;
    grid-column: 1;
    text-align: right;
  }

  #obOwnCurFPDiv {
    -ms-grid-row: 3;
    grid-row: 3;
    -ms-grid-column: 2;
    grid-column: 2;
  }

  #obTarFPL {
    -ms-grid-row: 3;
    grid-row: 3;
    -ms-grid-column: 3;
    grid-column: 3;
    text-align: right;
  }

  #obTarFPDiv {
    -ms-grid-row: 3;
    grid-row: 3;
    -ms-grid-column: 4;
    grid-column: 4;
  }

  #obTarRewL {
    -ms-grid-row: 4;
    grid-row: 4;
    -ms-grid-column: 1;
    grid-column: 1;
    text-align: right;
  }

  #obTarRewDiv {
    -ms-grid-row: 4;
    grid-row: 4;
    -ms-grid-column: 2;
    grid-column: 2;
  }

  #obOwnArcL {
    -ms-grid-row: 4;
    grid-row: 4;
    -ms-grid-column: 3;
    grid-column: 3;
    text-align: right;
  }

  #obOwnArcDiv {
    -ms-grid-row: 4;
    grid-row: 4;
    -ms-grid-column: 4;
    grid-column: 4;
  }

  #obNeedFPDiv {
    -ms-grid-row: 5;
    grid-row: 5;
    -ms-grid-column: 1;
    grid-column: 1/5;
    -ms-grid-column-span: 4;
    text-align: center;
  }

  #obNeedRewardDiv {
    -ms-grid-row: 6;
    grid-row: 6;
    -ms-grid-column: 1;
    -ms-grid-column-span: 4;
    grid-column: 1/5;
    text-align: center;
  }

  #obGBCurFPL,
  #obTarFPL,
  #obOwnArcL {
    padding-left: 3vw;
  }

  /*NOTE outbid end XXX */

  /*NOTE battleground start XXX */

  #bgCalc {
    -ms-grid-row: 1;
    grid-row: 1;
    -ms-grid-column: 1;
    grid-column: 1;
    padding: 0 1vw 0 1vw;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
  }

  .bgDiv {
    margin: .5vh;
    text-align: center;
  }

  .bgInput,
  .fpBuyInput {
    /* color: black; */
    text-align: center;
    margin-left: 1vw;
    width: 12vw;
    height: auto;
    box-sizing: border-box;
    border: none;
    outline: none;
  }

  #fpCalcResult,
  #fpCalcInvestInput,
  #fpCalcInvest,
  #fpCalcCurCostDiv {
    margin: 1vh;
  }

  /*NOTE battleground end XXX */

  /*NOTE fpCalc start XXX */

  #fpCalcDiv {
    -ms-grid-row: 1;
    grid-row: 1;
    -ms-grid-column: 2;
    grid-column: 2;
    padding-top: 2vh;
    padding-bottom: 2vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
  }

  .fpBuyRadio {
    display: inline;
    width: 5%;
    vertical-align: center;
    border: 0px;
    height: calc(.3rem + 1vw);
    /* appearance: radio !important;
        -webkit-appearance: radio !important;
        -moz-appearance: radio !important; */
  }

  /*NOTE snipeandbattle end XXX */



  /*
    XXX XXX XXX XXX XXX XXX
    NOTE setup start XXX
    XXX XXX XXX XXX XXX XXX
    */

  #globalConfig {
    -ms-grid-column: 2;
    grid-column: 2;
    -ms-grid-row: 2;
    grid-row: 2;

    display: none;
    height: 100%;
    -ms-grid-rows: minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr);
    -ms-grid-columns: minmax(0, 1fr);
    grid-template-columns: minmax(0, 1fr);
    -webkit-user-select: element;
    -ms-user-select: element;
    user-select: element;
    align-items: center;
    justify-items: center;
    -ms-grid-column-align: center;
    -ms-grid-row-align: center;
  }

  #gcCommon {
    display: grid;
    display: -ms-grid;
    -ms-grid-row: 1;
    grid-row: 1;
    -ms-grid-column: 1;
    grid-column: 1;
    padding-left: 5vw;
    padding-right: 5vw;
    overflow-y: auto;
    -ms-grid-rows: auto auto auto auto auto auto;
    grid-template-rows: auto auto auto auto auto auto;
    -ms-grid-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    height: 100%;
    width: 100%;
    justify-items: center;
    -ms-grid-column-align: center;
  }

  #gcNameL {
    -ms-grid-row: 1;
    grid-row: 1;
    -ms-grid-column: 1;
    grid-column: 1;
  }

  #gcFactorL {
    -ms-grid-row: 2;
    grid-row: 2;
    -ms-grid-column: 1;
    grid-column: 1;
  }

  #gcLowInvestL {
    -ms-grid-row: 3;
    grid-row: 3;
    -ms-grid-column: 1;
    grid-column: 1;
  }

  #gbNameSetupBtnOpen {
    -ms-grid-row: 4;
    grid-row: 4;
    -ms-grid-column: 1;
    grid-column: 1;
    -ms-grid-column-align: center;
  }

    
  #gcMarkExternalL {
    -ms-grid-row: 5;
    grid-row: 5;
    -ms-grid-column: 1;
    grid-column: 1;
  }

  #gcUiScaleButton {
    -ms-grid-row: 4;
    grid-row: 4;
    -ms-grid-column: 2;
    grid-column: 2;
    -ms-grid-column-align: center;
  }

  #gcColorThemeL {
    -ms-grid-row: 5;
    grid-row: 5;
    -ms-grid-column: 2;
    grid-column: 2;
  }
  
  #gcTooltipL {
    -ms-grid-row: 1;
    grid-row: 1;
    -ms-grid-column: 2;
    grid-column: 2;
  }

  #gcExtendedFavModeL {
    -ms-grid-row: 2;
    grid-row: 2;
    -ms-grid-column: 2;
    grid-column: 2;
  }

  #gcAddinPresetL {
    -ms-grid-row: 3;
    grid-row: 3;
    -ms-grid-column: 2;
    grid-column: 2;
  }

  #gcBackupBtnOpen {
    -ms-grid-row: 6;
    grid-row: 6;
    -ms-grid-column: 1;
    grid-column: 1;
    margin-bottom: 5vh;
  }
  /* #debugWidth
  {
    display:none;
    -ms-grid-row: 5;
    grid-row: 5;
    -ms-grid-column: 1;
    grid-column: 1;
  }
  #debugHeight
  {
    display:none;
    -ms-grid-row: 5;
    grid-row: 5;
    -ms-grid-column: 2;
    grid-column: 2;
  } */

  /* #gcAdvanced {
    display: inline-block;
    -ms-grid-row: 1;
    grid-row: 1;
    -ms-grid-column: 2;
    grid-column: 2;
    padding-left: 2vw;
    overflow-y: auto;
    height: 90%;
  } */


  #gcPresetsSettleDiv {
    -ms-grid-row: 1;
    grid-row: 1;
    -ms-grid-column: 3;
    grid-column: 3;
    margin-right: 2vw;
    display: grid;
    display: -ms-grid;
    -ms-grid-rows: auto minmax(0, 1fr) auto;
    grid-template-rows: auto minmax(0, 1fr) auto;
    -ms-grid-columns: minmax(0, 1fr);
    grid-template-columns: minmax(0, 1fr);
    padding-top: 2vh;
    padding-bottom: 2vh;

  }

  .gcLabels {
    display: block;
    margin-top: 1vh;
    text-align: center;
    /* font-size: 16px; */
  }

  .gcPresetInput {
    /* font-size: 16px; */
    width: 20vw;
    text-align: center;
  }

  .gcCheckBox {
    width: calc(.6rem + 1.5vmin);
    height: calc(.6rem + 1.5vmin) !important;
    margin-top: 2vh;
    /* filter: grayscale(1);
      -webkit-appearance: checkbox;
      -moz-appearance: checkbox;
      appearance: checkbox; */
  }

  #gcFpAbrL {
    display: none;
  }

  .configBtn {
    margin-top: 2vh;
    padding: 1vw;
    width: 20vw;
    /* font-size: 16px; */
    height: auto;
    height: fit-content;
    -ms-grid-column-align: center;
  }



  #gbNameSetupDiv,
  #gcBackupDiv {
    -ms-grid-row: 1;
    grid-row: 1;
    -ms-grid-column: 1;
    grid-column: 1;
    display: none;
    height: 100%;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
    text-align: center;
    z-index: 2;
    height: 100%;
    width: 100%;
  }



  #gbNameSetupTableDiv {
    overflow-y: scroll;
    height: 90%;
    margin-top: 5vh;
    margin-bottom: 5vh;
    text-align: center;
    border-radius: 1rem;
    padding-left: 1rem;
    padding-right: 1rem;
  }

  #gbNameSetupTable {
    /* margin-top: 20%;
      margin-left: 20%; */
    margin-top: 1rem;
    margin-bottom: 2rem;

  }

  #gbNameSetupButtonsDiv {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    padding-top: 3vh;
    padding-bottom: 3vh;

  }

  #gbNameSetupBtnOk {
    /* font-size: 16px; */
    /* width: 20vw; */
    /* height: calc(2rem + 1vw); */
    border-radius: .5rem;
    padding: .5rem;
  }

  #gbNameSetupBtnCancel {
    margin-top: 30%;
    /* font-size: 16px; */
    /* width: 20vw; */
    /* height: calc(2rem + 1vw); */
    border-radius: .5rem;
    padding: .5rem;
  }

  #gbNameSetupBtnReset {
    margin-top: 30%;
    /* font-size: 16px; */
    /* width: 20vw; */
    /* height: calc(2rem + 1vw); */
    border-radius: .5rem;
    padding: .5rem;
  }


  /*NOTE setup end XXX */

  /*
    XXX XXX XXX XXX XXX XXX
    NOTE footer start XXX
    XXX XXX XXX XXX XXX XXX
    */

  #footer {
    -ms-grid-row: 3;
    grid-row: 3;
    -ms-grid-column: 2;
    grid-column: 2;
    display: grid;
    display: -ms-grid;
    -ms-grid-rows: minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr);
    -ms-grid-columns: auto 1fr 1fr auto;
    grid-template-columns: auto auto auto auto auto;
    /* margin-right: 14.5vw; */
    height: auto;
  }


  .footerText {
    width: auto;
    height: 100%;
    display: flex;
    align-items: center;
    text-decoration: none;
    padding: 0 2vw 0 2vw;
    justify-self: center;
  }

  #versionLabel {
    height: 100%;
    display: flex;
    align-items: center;
    grid-row: 1;
    grid-column: 1;
    -ms-grid-row: 1;
    -ms-grid-column: 1;
  }

  #impData {
    grid-row: 1;
    grid-column: 2;
    -ms-grid-row: 1;
    -ms-grid-column: 2;
  }

  #conAnb {
    grid-row: 1;
    grid-column: 3;
    -ms-grid-row: 1;
    -ms-grid-column: 3;
    padding-left: 1vw;
  }

  .footerPack {
    height: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    -ms-grid-column-align: center;
  }

  #openHelp {
    grid-row: 1;
    grid-column: 4;
    -ms-grid-row: 1;
    -ms-grid-column: 4;
  }

  #Menu {
    grid-row: 1;
    grid-column: 5;
    -ms-grid-row: 1;
    -ms-grid-column: 5;
    display: block;
    /* place-items: center; */
    position: relative;
    bottom: 0px;
    /* bottom: env(safe-area-inset-bottom); */
    right: 0px;
    /* right: env(safe-area-inset-right); */
    width: calc(5*(0.6rem + 2vmin));
    height: 8vh;
    z-index: 3;
    justify-self: right;

  }

  .MenuButton {
    width: 100%;
    height: 100% !important;
    border-radius: 4px 0 0 4px;
    display: block;
    font-weight: bold;
    border: 0;
  }



  #menuContent {
    display: none;
    position: absolute;
    width: 100%;
    border-radius: 4px;
    width: auto;
    min-width: 100px;
    bottom: 6.5vh;
    width: calc(7*(0.6rem + 2vmin));
    /* bottom: calc(nv(safe-area-inset-bottom) +6.5vh); */
    right: 1vw;
    /* right: calc(env(safe-area-inset-right) + 1vw); */
    z-index: 4;
  }

  #menuContent label {
    text-align: center;
    padding: 2vh 16px;
    text-decoration: none;
    border-radius: 4px;
  }


  #toggleSnipeGGFPCalcMenu {
    display: none;
  }

}

/* end media landscape default */




/*
XXX XXX XXX XXX XXX XXX XXX XXX XXX XXX XXX XXX
NOTE (3) Layout portrait default XXX XXX XXX XXX XXX XXX
XXX XXX XXX XXX XXX XXX XXX XXX XXX XXX XXX XXX
*/


@media only screen and (orientation:portrait) {

  .body {
    padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
    display: -ms-grid;
    display: grid;
    -ms-grid-rows: minmax(88px, auto) auto minmax(0, 1fr) 7vh;
    grid-template-rows: minmax(88px, auto) auto minmax(0, 1fr) 7vh;
    /* -ms-grid-columns: 1px minmax(0, 1fr);
    grid-template-columns: 1px minmax(0, 1fr); */
    -ms-grid-columns: minmax(0, 1fr);
    grid-template-columns: minmax(0, 1fr);
    border: 0;
  }

  #bannerDiv {
    flex-direction: row;
  }
  
  .fontXLarge {
    font-size: calc(1rem + 1vmin);
  }

  .fontLarge {
    font-size: calc(.8rem + 1vmin);
  }

  .fontMedium {
    font-size: calc(.6rem + 2vmin);
  }

  .fontSmall {
    font-size: calc(.5rem + 1vmin);
  }


  /* XXX Greeting start XXX*/

  #greeting {
    display: none;
    height: 100%;
    width: 100%;
    text-align: center;
    text-align: -webkit-center;
    -ms-grid-column: 1;
    grid-column: 1;
    -ms-grid-row: 3;
    grid-row: 3;
    z-index: 2;
  }

  #innerGreet {
    display: grid;
    -ms-grid-rows: auto minmax(0, 1fr) auto;
    grid-template-rows: auto minmax(0, 1fr) auto;
    -ms-grid-columns: minmax(0, 1fr);
    grid-template-columns: minmax(0, 1fr);
    height: 50vh;
    width: 80vw;
    margin-top: 5vh;

  }

  #greetH {
    padding-top: 2vh;
    padding-bottom: 2vh;
    text-align: center;
    -ms-grid-row: 1;
    grid-row: 1;
    -ms-grid-column: 1;
    grid-column: 1;
  }

  #greetText {
    text-align: center;
    overflow-y: auto;
    -ms-grid-row: 2;
    grid-row: 2;
    -ms-grid-column: 1;
    grid-column: 1;
    padding-left: 2vw;
    padding-right: 2vw;
  }


  #greetButton {
    -ms-grid-row: 3;
    grid-row: 3;
    -ms-grid-column: 1;
    grid-column: 1;
    margin-top: 3vh;
    margin-bottom: 3vh;
  }

  /* XXX Greeting end XXX*/

  #topDiv {
    width: 100%;
    height: 100%;
    -ms-grid-column: 1;
    grid-column: 1;
    -ms-grid-row: 1;
    grid-row: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
  }

  .responsiveAd {
    width: 100%;
    height: 100%;    
  }

  #donateLinkSH {
    display: block;
    height: auto;
    width: 100vw;
    align-self: center;
  }

  .donateImgV {
    max-width: 100%;
    max-height: 100%;
  }

  .donateImgH,
  #joinButtonS {
    max-width: 100%;
    height: auto;
  }

  .donateImgBV {
    max-height: 100%;
    width: auto;
  }

  #title {
    width: 100%;
    text-align: center;
    -ms-grid-row: 2;
    grid-row: 2;
    -ms-grid-column: 1;
    grid-column: 1;
  }

  #titleadds {
    float: right;
    margin-right: 5vw;
  }

  #loading {
    display: none;
    -ms-grid-row: 3;
    grid-row: 3;
    -ms-grid-column: 1;
    grid-column: 1;
    z-index: 2;
    align-self: center;
    justify-self: center;
    text-align: center;
    -ms-grid-column-align: center;
    -ms-grid-row-align: center;
    text-align: center;
  }

  /*
    XXX XXX XXX XXX XXX
    NOTE port small XXX
    NOTE calc       XXX
    XXX XXX XXX XXX XXX
    */

  #acScaleOuterDiv {
    -ms-grid-column: 1;
    grid-column: 1;
    -ms-grid-row: 3;
    grid-row: 3;
  }

  #arcCalc {
    display: none;
    -ms-grid-column: 1;
    grid-column: 1;
    -ms-grid-row: 3;
    grid-row: 3;
    width: 100%;
    height: 100%;
    -ms-grid-columns: 1fr;
    grid-template-columns: 1fr;
    -ms-grid-rows: 1.5fr auto 1fr;
    grid-template-rows: 1.5fr auto 1fr;
    -ms-grid-row-align: center;
    -ms-grid-column-align: center;
    align-self: center;
    justify-self: center;
  }

  #acUpperSettings {
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: 1fr;
    grid-template-columns: 1fr;
    -ms-grid-rows: auto auto auto auto;
    grid-template-rows: auto auto auto auto;
    text-align: center;
    align-items: center;
    padding: 0 3vw 0 3vw;
    -ms-grid-row: 1;
    grid-row: 1;
    -ms-grid-column: 1;
    grid-column: 1;
    -ms-grid-row-align: center;
    -ms-grid-column-align: center;
    align-self: center;
    justify-self: center;
    height:100%;
    width:100%
  }

  .buttonExtended {
    border: 0;
    padding: 0 2vw;
  }

  #acDivGBselect {
    -ms-grid-row: 2;
    -ms-grid-column: 1;
    grid-row: 2;
    grid-column: 1;
    -ms-grid-row-align: center;
    display: flex;
    flex-direction: row;
    align-content: space-between;
    justify-content: center;
    margin-top: 1vh;
  }

  .acGbSelect {
    width: 50vw;
    height: 100%;
    border: 0;
    padding-left: 1vw;
    margin-left: 1vw;
  }

  #acGbLevelDiv {
    -ms-grid-row: 3;
    -ms-grid-column: 1;
    grid-row: 3;
    grid-column: 1;
    -ms-grid-row-align: center;
    margin-top: 1vh;
    white-space: nowrap;
  }

  #acGbLevelInput {
    width: 8ch;
    text-align: center;
    border: 0;
  }

  #acDivPreset {
    -ms-grid-row: 1;
    -ms-grid-column: 1;
    grid-row: 1;
    grid-column: 1;
    -ms-grid-row-align: center;
    margin-top: 1vh;
  }

  #acFavExtSelect,
  #acFavBaseSelect {
    height: 100%;
    border: 0;
    padding-left: 1vw;
    padding-right: 1vw;
    max-width: 35vw;
  }

  #acFavBaseSelect,
  #favDash {
    display: none;
  }


  .acDivInfo {
    white-space: nowrap;
    margin-right: 1vw;
    margin-left: 1vw;
  }

  #acDivTotal {
    -ms-grid-row: 4;
    -ms-grid-column: 1;
    grid-row: 4;
    grid-column: 1;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 1vh;
  }

  #acTable {
    display: grid;
    display: -ms-grid;
    grid-template-columns: 1fr;
    -ms-grid-columns: 1fr;
    grid-template-rows: 1fr auto;
    -ms-grid-rows: 1fr auto;
    /* padding: 0 3vw 0 3vw; */
    -ms-grid-row: 2;
    grid-row: 2;
    -ms-grid-column: 1;
    grid-column: 1;
    -ms-grid-row-align: center;
    -ms-grid-column-align: center;
    align-self: center;
    justify-self: center;
  }

  #acCoreTable {
    grid-column: 1;
    -ms-grid-column: 1;
    grid-row: 1;
    -ms-grid-row: 1;
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: 7fr 6fr 7fr 8fr 8fr 8fr;
    grid-template-columns: 7fr 6fr 7fr 8fr 8fr 8fr;
    -ms-grid-rows: auto 1fr 1fr 1fr 1fr 1fr;
    grid-template-rows: auto 1fr 1fr 1fr 1fr 1fr;
    width: 100%;
  }

  .acTableCell {
    display: block;
    text-align: center;
    padding: 0;
    height: 100%;
    /* border: 1px solid black; */
    border-top: 1px solid black;
    border-left: 0;
    border-bottom: 0;
    border-right: 1px solid black;
    /* vertical-align:baseline; */

  }

  .acTableCell input {
    text-align: center;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    border: none;
    outline: none;
  }

  .acTableCellDescription {
    height: auto;
    text-align: center;
    font-weight: bold;
  }

  .acHeaderDiv {
    border-top: 1px solid black;
    border-left: 0;
    border-bottom: 0;
    border-right: 1px solid black;
    height: 100%;
    width: 100%;
    overflow: hidden;
  }

  .acHeaderButton {
    display: block;
    height: 100%;
    width: 100%;
    text-align: center;
    font-weight: bold;
    padding: 0 1vw 0 1vw;
    border: none;
  }


  .acInputExt {
    -moz-appearance: textfield;
  }

  #acDivPlace {
    grid-column: 1;
    grid-row: 1;
    -ms-grid-column: 1;
    -ms-grid-row: 1;
  }

  #acDivFactor {
    grid-column: 2;
    grid-row: 1;
    -ms-grid-column: 2;
    -ms-grid-row: 1;
  }

  #acDivBaseCost {
    grid-column: 3;
    grid-row: 1;
    -ms-grid-column: 3;
    -ms-grid-row: 1;
  }

  #acDivCost {
    grid-column: 4;
    grid-row: 1;
    -ms-grid-column: 4;
    -ms-grid-row: 1;
  }

  #acDivSecure {
    grid-column: 5;
    grid-row: 1;
    -ms-grid-column: 5;
    -ms-grid-row: 1;
  }

  #acDivSecureExtended {
    grid-column: 6;
    grid-row: 1;
    -ms-grid-column: 6;
    -ms-grid-row: 1;
  }


  #acDivP1 {
    grid-column: 1;
    grid-row: 2;
    -ms-grid-column: 1;
    -ms-grid-row: 2;
  }

  #acDivP2 {
    grid-column: 1;
    grid-row: 3;
    -ms-grid-column: 1;
    -ms-grid-row: 3;
  }

  #acDivP3 {
    grid-column: 1;
    grid-row: 4;
    -ms-grid-column: 1;
    -ms-grid-row: 4;
  }

  #acDivP4 {
    grid-column: 1;
    grid-row: 5;
    -ms-grid-column: 1;
    -ms-grid-row: 5;
  }

  #acDivP5 {
    grid-column: 1;
    grid-row: 6;
    -ms-grid-column: 1;
    -ms-grid-row: 6;
  }

  #acDivFactorP1 {
    grid-column: 2;
    grid-row: 2;
    -ms-grid-column: 2;
    -ms-grid-row: 2;
  }

  #acDivFactorP2 {
    grid-column: 2;
    grid-row: 3;
    -ms-grid-column: 2;
    -ms-grid-row: 3;
  }

  #acDivFactorP3 {
    grid-column: 2;
    grid-row: 4;
    -ms-grid-column: 2;
    -ms-grid-row: 4;
  }

  #acDivFactorP4 {
    grid-column: 2;
    grid-row: 5;
    -ms-grid-column: 2;
    -ms-grid-row: 5;
  }

  #acDivFactorP5 {
    grid-column: 2;
    grid-row: 6;
    -ms-grid-column: 2;
    -ms-grid-row: 6;
  }


  #acDivBaseP1 {
    grid-column: 3;
    grid-row: 2;
    -ms-grid-column: 3;
    -ms-grid-row: 2;
  }

  #acDivBaseP2 {
    grid-column: 3;
    grid-row: 3;
    -ms-grid-column: 3;
    -ms-grid-row: 3;
  }

  #acDivBaseP3 {
    grid-column: 3;
    grid-row: 4;
    -ms-grid-column: 3;
    -ms-grid-row: 4;
  }

  #acDivBaseP4 {
    grid-column: 3;
    grid-row: 5;
    -ms-grid-column: 3;
    -ms-grid-row: 5;
  }

  #acDivBaseP5 {
    grid-column: 3;
    grid-row: 6;
    -ms-grid-column: 3;
    -ms-grid-row: 6;
  }

  #acDivCostP1 {
    grid-column: 4;
    grid-row: 2;
    -ms-grid-column: 4;
    -ms-grid-row: 2;
  }

  #acDivCostP2 {
    grid-column: 4;
    grid-row: 3;
    -ms-grid-column: 4;
    -ms-grid-row: 3;
  }

  #acDivCostP3 {
    grid-column: 4;
    grid-row: 4;
    -ms-grid-column: 4;
    -ms-grid-row: 4;
  }

  #acDivCostP4 {
    grid-column: 4;
    grid-row: 5;
    -ms-grid-column: 4;
    -ms-grid-row: 5;
  }

  #acDivCostP5 {
    grid-column: 4;
    grid-row: 6;
    -ms-grid-column: 4;
    -ms-grid-row: 6;
  }

  #acDivSecureP1 {
    grid-column: 5;
    grid-row: 2;
    -ms-grid-column: 5;
    -ms-grid-row: 2;
  }

  #acDivSecureP2 {
    grid-column: 5;
    grid-row: 3;
    -ms-grid-column: 5;
    -ms-grid-row: 3;
  }

  #acDivSecureP3 {
    grid-column: 5;
    grid-row: 4;
    -ms-grid-column: 5;
    -ms-grid-row: 4;
  }

  #acDivSecureP4 {
    grid-column: 5;
    grid-row: 5;
    -ms-grid-column: 5;
    -ms-grid-row: 5;
  }

  #acDivSecureP5 {
    grid-column: 5;
    grid-row: 6;
    -ms-grid-column: 5;
    -ms-grid-row: 6;
  }

  #acDivSecureSumP1 {
    grid-column: 6;
    grid-row: 2;
    -ms-grid-column: 6;
    -ms-grid-row: 2;
  }

  #acDivSecureSumP2 {
    grid-column: 6;
    grid-row: 3;
    -ms-grid-column: 6;
    -ms-grid-row: 3;
  }

  #acDivSecureSumP3 {
    grid-column: 6;
    grid-row: 4;
    -ms-grid-column: 6;
    -ms-grid-row: 4;
  }

  #acDivSecureSumP4 {
    grid-column: 6;
    grid-row: 5;
    -ms-grid-column: 6;
    -ms-grid-row: 5;
  }

  #acDivSecureSumP5 {
    grid-column: 6;
    grid-row: 6;
    -ms-grid-column: 6;
    -ms-grid-row: 6;
  }

  .acExternals {
    grid-column: 1;
    -ms-grid-column: 1;
    grid-row: 2;
    -ms-grid-row: 2;
    display: grid;
    display: -ms-grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
    grid-template-rows: auto 1fr;
    -ms-grid-columns: 1fr 1fr 1fr 1fr 1fr;
    -ms-grid-rows: auto 1fr;
    padding-top: 2vh;
    /* align-items: center;
      width: 100%;
      height: 100%; */
  }

  #acDivExternButton {
    grid-column: 1/6;
    grid-row: 1;
    -ms-grid-column: 1;
    -ms-grid-row: 1;
    -ms-grid-column-span: 5;
  }

  #acDivExtern1 {
    grid-column: 1;
    grid-row: 2;
    -ms-grid-column: 1;
    -ms-grid-row: 2;
  }

  #acDivExtern2 {
    grid-column: 2;
    grid-row: 2;
    -ms-grid-column: 2;
    -ms-grid-row: 2;
  }

  #acDivExtern3 {
    grid-column: 3;
    grid-row: 2;
    -ms-grid-column: 3;
    -ms-grid-row: 2;
  }

  #acDivExtern4 {
    grid-column: 4;
    grid-row: 2;
    -ms-grid-column: 4;
    -ms-grid-row: 2;
  }

  #acDivExtern5 {
    grid-column: 5;
    grid-row: 2;
    -ms-grid-column: 5;
    -ms-grid-row: 2;
  }

  #acDivCD {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-around;
    padding: 0 3vw 0 3vw;
    -ms-grid-row: 3;
    grid-row: 3;
    -ms-grid-column: 1;
    grid-column: 1;
    -ms-grid-row-align: center;
    -ms-grid-column-align: center;
    align-self: center;
    justify-self: center;
  }

  #acDivCDButtonCopy {
    -ms-grid-row: 1;
    grid-row: 1;
    -ms-grid-column: 4;
    grid-column: 4;
  }

  #acCDButtonCopy {
    display: block;
    width: 100%;
    /* padding: 0 1vw 0 1vw !important;       */
    overflow-x: hidden;
    width: auto;
  }

  #acCDText {
    -ms-grid-row: 1;
    grid-row: 1;
    -ms-grid-column: 3;
    grid-column: 3;
    width: 50%;
    text-align: center;
  }

  #acCDStyle {
    -ms-grid-row: 1;
    grid-row: 1;
    -ms-grid-column: 2;
    grid-column: 2;
    width: 20%;
    border: 0;
  }


  .helpPopup {
    /* font-size: 16px; */
    border-radius: 20px;
    position: absolute;
    top: 0px;
    left: 0px;
    padding: 4px;
  }

  /*NOTE arcCalc end XXX */

  /* acPresetConfig start */

  #acPresetConfig {
    display: none;
    -ms-grid-column: 1;
    grid-column: 1;
    -ms-grid-row: 3;
    grid-row: 3;

    -ms-grid-rows: minmax(0, 1fr) auto;
    grid-template-rows: minmax(0, 1fr) auto;
    -ms-grid-columns: minmax(50%, 1fr) minmax(40%, 1fr);
    grid-template-columns: minmax(50%, 1fr) minmax(40%, 1fr);

    height: 100%;
    width: 100%;
    text-align: center;
    text-align: -webkit-center;
    z-index: 2;
  }

  #acGbPresetsBtnDiv {
    -ms-grid-column: 1;
    -ms-grid-column-span: 2;
    grid-column: 1/3;
    -ms-grid-row: 2;
    grid-row: 2;
    padding-top: 1.5vh;
    padding-bottom: 1.5vh;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-around;
    width: 75%;
    justify-self: center;
    -ms-grid-column-align: center;
  }


  #acGbBasePresetsDiv,
  #acGbExtendedPresetsDiv {
    -ms-grid-rows: auto minmax(0, 1fr) auto;
    grid-template-rows: auto minmax(0, 1fr) auto;
    -ms-grid-columns: minmax(0, 1fr);
    grid-template-columns: minmax(0, 1fr);
    padding-bottom: 2vh;
    padding-top: 2vh;
  }

  #acGbBasePresetsTitleDiv,
  #acGbExtendedPresetsTitleDiv {
    -ms-grid-row: 1;
    grid-row: 1;
    -ms-grid-column: 1;
    grid-column: 1;
    text-align: center
  }

  #acGbBasePresetsTableDiv,
  #acGbExtendedPresetsTableDiv {
    -ms-grid-row: 2;
    grid-row: 2;
    -ms-grid-column: 1;
    grid-column: 1;
    overflow-y: auto;
    -ms-grid-column-align: center;
    justify-self: center;
  }


  #acGbBasePresetsBtnDiv,
  #acGbExtendedPresetsBtnDiv {
    padding-top: 1.5vh;
    -ms-grid-row: 3;
    grid-row: 3;
    -ms-grid-column: 1;
    grid-column: 1;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-around;
  }

  #acGbBasePresetsTable,
  #acGbExtendedPresetsTable {
    border-collapse: separate;
    border-spacing: 1vw 1vh;
    padding: 0 2vw 0 2vw;
  }

  .AddBtn {
    /* font-size: 16px; */
    text-align: center;
    border-radius: .2rem;
    width: auto;
    height: auto;
    padding: 0 3vw 0 3vw;
  }

  .delBtn {
    /* font-size: 16px; */
    text-align: center;
    border-radius: .2rem;
    width: auto;
    height: auto;
    padding: 0 2vw 0 2vw;
  }

  .acFavConfigBtnInactive,
  .acFavConfigBtnActive {
    text-align: center;
    border-radius: .2rem;
    width: auto;
    height: auto;
    padding: 0 1vw 0 1vw;
  }

  .acFavBaseInput,
  .acFavExtendedInput {
    max-width: 25vw;
  }



  /* acPresetConfig end */

  /*NOTE chart start XXX */

  #chart {
    display: none;
    -ms-grid-column: 1;
    grid-column: 1;
    -ms-grid-row: 3;
    grid-row: 3;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    -ms-grid-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr) auto auto auto;
    -ms-grid-rows: minmax(0, 1fr) auto auto auto;
    width: 95%;
    height: 100%;
    -ms-grid-row-align: center;
    -ms-grid-column-align: center;
    align-self: center;
    justify-self: center;
  }

  #chartDivCanvas {
    -ms-grid-row: 1;
    grid-row: 1;
    -ms-grid-column: 1;
    -ms-grid-column-span: 2;
    grid-column: 1/3;
    text-align: center;
  }

  #chartDivSettings {
    -ms-grid-row: 2;
    grid-row: 2;
    -ms-grid-column: 1;
    -ms-grid-column-span: 2;
    grid-column: 1/3;

    display: grid;
    display: -ms-grid;
    grid-template-columns: 1fr 1fr;
    -ms-grid-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    -ms-grid-rows: 1fr 1fr;
    -ms-grid-column-align: center;
    justify-content: center;
  }

  #chartGbSelectDiv {
    margin-top: 2vh;
    text-align: center;
    -ms-grid-row: 1;
    grid-row: 1;
    -ms-grid-column: 1;
    grid-column: 1;
  }

  #chartDivZoom {
    margin-top: 2vh;
    text-align: center;
    -ms-grid-row: 1;
    grid-row: 1;
    -ms-grid-column: 2;
    grid-column: 2;
  }

  .chartGbSelect,
  #chartZoomBtn {
    width: 70%;
  }

  #chartDivLevelBegin {
    margin-top: 2vh;
    -ms-grid-row: 2;
    grid-row: 2;
    -ms-grid-column: 1;
    grid-column: 1;
    text-align: center;
  }

  #chartDivLevelEnd {
    margin-top: 2vh;
    -ms-grid-row: 2;
    grid-row: 2;
    -ms-grid-column: 2;
    grid-column: 2;
    text-align: center;
  }

  #chartOverview {
    -ms-grid-row: 3;
    grid-row: 3;
    -ms-grid-column: 1;
    -ms-grid-column-span: 2;
    grid-column: 1/3;
    padding-right: 1vw;
    padding-bottom: 2vh;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
  }

  #chartDivSumTotal {
    margin-top: 2vh;
    /* -ms-grid-row: 3;
      grid-row: 3;
      -ms-grid-column: 1;
      grid-column: 1; */
    text-align: center;
    display: flex;
    flex-direction: column;
  }

  #chartDivSumOwn {
    margin-top: 2vh;
    /* -ms-grid-row: 3;
      grid-row: 3;
      -ms-grid-column: 2;
      grid-column: 2; */
    text-align: center;
    display: flex;
    flex-direction: column;
  }

  .chartInput {
    text-align: center;
    width: 15vw;
    height: auto;
    box-sizing: border-box;
    /* font-size: 16px; */
    border: none;
    outline: none;
  }

  #chartDivFPInvest {
    margin-bottom: 2vh;
    -ms-grid-row: 4;
    grid-row: 4;
    -ms-grid-column: 1;
    -ms-grid-column-span: 2;
    grid-column: 1/3;
    text-align: center;
  }

  #chartFPInvest {
    width: 7ch;
  }

  /*NOTE chart end XXX */

  /*
    XXX XXX XXX XXX XXX XXX XXX
    NOTE settlement start XXX
    XXX XXX XXX XXX XXX XXX XXX
    */

  #setDiv {
    display: none;
    -ms-grid-column: 1;
    grid-column: 1;
    -ms-grid-row: 3;
    grid-row: 3;
    -ms-grid-rows: auto minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr);
    -ms-grid-columns: minmax(0, 1fr);
    grid-template-columns: minmax(0, 1fr);
    -ms-grid-row-align: center;
    -ms-grid-column-align: center;
    align-self: center;
    justify-self: center;
    height: 100%;
    width: 100%;
  }

  #setTopMenuDiv {
    padding-top: 2vh;
    ;
    -ms-grid-row: 1;
    grid-row: 1;
    -ms-grid-column: 1;
    grid-column: 1;
    text-align: center;
    padding-top: 2vh;
  }

  #setPresetSelect {
    margin-right: 2vw;
    /* margin: 0 2vw 0 2vw; */
    text-align: center;
    width: auto;
    max-width: 30vw;
    height: auto;
    box-sizing: border-box;
    border: none;
    outline: none;
  }

  #setToggleDiv {
    display: inline-block;
    margin-top: 2vh;
  }

  #setMainContent,
  #setAgeSelectDiv,
  #setGoodsSetupDiv {
    -ms-grid-row: 2;
    grid-row: 2;
    -ms-grid-column: 1;
    grid-column: 1;
    padding-top: 4vh;
    padding-bottom: 3vh;
    height: 90%;
    width: 100%;
  }

  #setAgeSelectDiv {
    display: none;
    justify-items: center;
    align-items: center;
    -ms-grid-column-align: center;
    -ms-grid-row-align: center;
  }

  .settleFrame {
    display: -ms-grid;
    display: grid;
    -ms-grid-rows: auto auto minmax(0, 1fr);
    grid-template-rows: auto auto minmax(0, 1fr);
    -ms-grid-columns: minmax(0, 1fr);
    grid-template-columns: minmax(0, 1fr);
    height: 100%;
    overflow-y: hidden;
  }

  .setChoiceButton {
    width: 25vw;
    height: 10vh;
    margin: 2vh;
  }

  #setButtonCViking {
    -ms-grid-row: 1;
    grid-row: 1;
    -ms-grid-column: 1;
    grid-column: 1;
  }

  #setButtonCJapan {
    -ms-grid-row: 1;
    grid-row: 1;
    -ms-grid-column: 2;
    grid-column: 2;
  }

  #setButtonCEgypt {
    -ms-grid-row: 2;
    grid-row: 2;
    -ms-grid-column: 1;
    grid-column: 1;
  }

  #setButtonCAztec {
    -ms-grid-row: 2;
    grid-row: 2;
    -ms-grid-column: 2;
    grid-column: 2;
  }

  #setButtonCMughal {
    -ms-grid-row: 3;
    grid-row: 3;
    -ms-grid-column: 1;
    grid-column: 1;
  }

  #setGoodsSetupDiv {
    -ms-grid-rows: auto minmax(0, 1fr) auto;
    grid-template-rows: auto minmax(0, 1fr) auto;
    -ms-grid-columns: minmax(0, 1fr);
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
  }

  .setTableText,
  .setTDValues,
  .setTDProgress,
  .setTDAmount,
  .setTDRadio {
    word-break: break-all;
    overflow-wrap: anywhere;
  }

  #settleGoodsSetupTableHeadDiv {
    -ms-grid-row: 1;
    grid-row: 1;
    -ms-grid-column: 1;
    grid-column: 1;
    width: 90%;
    -ms-grid-column-align: center;
  }

  #setGoodsSetupTableBodyDiv {
    -ms-grid-row: 2;
    grid-row: 2;
    -ms-grid-column: 1;
    grid-column: 1;
    width: 90%;
    -ms-grid-column-align: center;
  }

  #setGoodsSetupButtonDoneDiv {
    -ms-grid-row: 3;
    grid-row: 3;
    -ms-grid-column: 1;
    grid-column: 1;
    text-align: center;
    padding-top: 2vh;
  }

  #setGoodsSetupButtonDone {
    width: 30vw;
  }

  .setInput {
    width: 100%;
    height: 100%;
    text-align: center;
  }

  .setGoodsTableNumber {
    width: 12%;
    text-align: center;
    height: 4vh;
  }

  .setGoodsTableText {
    padding-left: 1vw;
    padding-right: 1vw;
  }

  .setGoodsInput {
    width: 100%;
    height: 100% !important;
    text-align: center;
  }

  .tableHead {

    height: auto;
    padding-right: 1vw;
    padding-left: 1vw;
  }

  .setResearchHead {
    height: 100%;
    width: 100%;
    border-collapse: collapse;
  }

  .setGoodPic {
    width: 50%;
  }

  #settleResearchTableHeadADiv {
    -ms-grid-row: 1;
    grid-row: 1;
    -ms-grid-column: 1;
    grid-column: 1;
  }

  #settleResearchTableHeadBDiv {
    -ms-grid-row: 2;
    grid-row: 2;
    -ms-grid-column: 1;
    grid-column: 1;
  }

  #setResearchTableBodyDiv {
    -ms-grid-row: 3;
    grid-row: 3;
    -ms-grid-column: 1;
    grid-column: 1;
  }

  .tableBody {

    height: auto;
    padding-right: 1vw;
    padding-left: 1vw;
    overflow-y: scroll;
    scrollbar-width: none;
    /* Firefox */
    -ms-overflow-style: none;
    /* Internet Explorer 10+ */
  }

  .tableBody::-webkit-scrollbar {
    /* WebKit */
    width: 0;
    height: 0;
  }

  .setResearchTableBody {
    height: 100%;
    width: 100%;
    border-collapse: collapse;
  }

  .setTDRadio {
    width: 9%;
    text-align: center;
  }

  .setTDProgress {
    text-align: center;
  }

  .setTDAmount {
    width: 12%;
    text-align: center;
  }

  .setTDValues {
    width: 12%;
    text-align: center;
    padding-right: 5px;
  }

  .settleRadioLabel {
    display: block;
    /* width: 100%;
      height: 100%; */
  }

  .settleRadio {
    vertical-align: middle;
    border: 0px;
    width: 100%;
    height: calc(.3rem + 1vh);
    /* filter: grayscale(1);

      appearance: radio !important;
      -webkit-appearance: radio !important;
      -moz-appearance: radio !important; */
  }

  .setTableText {
    padding-top: 1vh;
    padding-left: 5px;
    padding-right: 5px;
  }

  #setQuestHeadDiv {
    -ms-grid-row: 1;
    grid-row: 1;
    -ms-grid-column: 1;
    grid-column: 1;
    width: auto;
    padding-right: 1vw;
    padding-left: 1vw;
  }

  #setQuestHeadTable {
    width: 100%;
  }



  #setQuestBodyDiv {
    -ms-grid-row: 2;
    -ms-grid-row-span: 2;
    grid-row: 2/4;
    -ms-grid-column: 1;
    grid-column: 1;
    width: auto;
    padding-right: 1vw;
    padding-left: 1vw;
  }

  #setQuestTableBody {
    width: 100%;
  }

  /*NOTE settlement end XXX */

  /*
    XXX XXX XXX XXX XXX XXX XXX
    NOTE settle Preset start XXX
    XXX XXX XXX XXX XXX XXX XXX
    */


  /* acPresetConfig start */

  #settlePresetConfig {
    display: none;
    -ms-grid-column: 1;
    grid-column: 1;
    -ms-grid-row: 3;
    grid-row: 3;

    -ms-grid-rows: minmax(0, 1fr) auto;
    grid-template-rows: minmax(0, 1fr) auto;
    -ms-grid-columns: minmax(0, 1fr);
    grid-template-columns: minmax(0, 1fr);

    height: 100%;
    width: 100%;
    text-align: center;
    text-align: -webkit-center;
    z-index: 2;
  }

  #settlePresetsDiv {
    -ms-grid-column: 1;
    grid-column: 1;
    -ms-grid-row: 1;
    grid-row: 1;
  }

  #settlePresetsBtnDiv {
    -ms-grid-column: 1;
    grid-column: 1;
    -ms-grid-row: 2;
    grid-row: 2;
    padding-top: 1.5vh;
    padding-bottom: 1.5vh;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-around;
    width: 75%;
    justify-self: center;
  }



  #settlePresetsDiv {
    display: grid;
    display: -ms-grid;
    -ms-grid-rows: auto minmax(0, 1fr) auto;
    grid-template-rows: auto minmax(0, 1fr) auto;
    -ms-grid-columns: minmax(0, 1fr);
    grid-template-columns: minmax(0, 1fr);
    padding-bottom: 2vh;
    padding-top: 2vh;
  }

  #settlePresetsTitleDiv {
    -ms-grid-row: 1;
    grid-row: 1;
    -ms-grid-column: 1;
    grid-column: 1;
    text-align: center
  }

  #settlePresetsTableDiv {
    -ms-grid-row: 2;
    grid-row: 2;
    -ms-grid-column: 1;
    grid-column: 1;
    overflow-y: auto;
    -ms-grid-column-align: center;
    justify-self: center;
  }


  #settlePresetsBtnDiv {
    padding-top: 1.5vh;
    -ms-grid-row: 3;
    grid-row: 3;
    -ms-grid-column: 1;
    grid-column: 1;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-around;
  }

  #settlePresetsTable {
    border-collapse: separate;
    border-spacing: 1vw 1vh;
    padding: 0 2vw 0 2vw;
  }

  .settleFavInput {
    max-width: 25vw;
  }



  /* acPresetConfig end */



  /*NOTE settle Preset end XXX */





  /*
  XXX XXX XXX XXX XXX XXX XXX
  NOTE snipeandbattle start XXX
  XXX XXX XXX XXX XXX XXX XXX
  */

  #snipeAndBattle {
    display: none;
    -ms-grid-column: 1;
    grid-column: 1;
    -ms-grid-row: 3;
    grid-row: 3;
    margin-top: 2vh;
    -ms-grid-rows: minmax(0, 4fr) minmax(0, 3fr);
    grid-template-rows: minmax(0, 4fr) minmax(0, 3fr);
    -ms-grid-columns: minmax(0, 1fr);
    grid-template-columns: minmax(0, 1fr);
    -ms-grid-row-align: center;
    -ms-grid-column-align: center;
    align-self: center;
    justify-self: center;
    height: 90%;

  }



  /*NOTE outbid start XXX */
  #obDiv {
    -ms-grid-row: 1;
    -ms-grid-row-span: 2;
    grid-row: 1/3;
    -ms-grid-column: 1;
    grid-column: 1;
    display: grid;
    grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr;
    -ms-grid-rows: 1fr 1fr 1fr 1fr 1fr 1fr;
    grid-template-columns: auto auto auto auto;
    -ms-grid-columns: auto auto auto auto;
  }

  .obInput {
    text-align: center;
    width: 9vw;
    height: auto;
    margin-left: 1vw;
  }

  #obTitleL {
    text-align: center;
    -ms-grid-row: 1;
    grid-row: 1;
    -ms-grid-column: 1;
    -ms-grid-column-span: 4;
    grid-column: 1/5;
  }

  #obGBTotalL {
    -ms-grid-row: 2;
    grid-row: 2;
    -ms-grid-column: 1;
    grid-column: 1;
    text-align: right;
  }

  #obGBTotalDiv {
    -ms-grid-row: 2;
    grid-row: 2;
    -ms-grid-column: 2;
    grid-column: 2;
  }

  #obGBCurFPL {
    -ms-grid-row: 2;
    grid-row: 2;
    -ms-grid-column: 3;
    grid-column: 3;
    text-align: right;
  }

  #obGBCurFPDiv {
    -ms-grid-row: 2;
    grid-row: 2;
    -ms-grid-column: 4;
    grid-column: 4;
  }

  #obOwnCurFPL {
    -ms-grid-row: 3;
    grid-row: 3;
    -ms-grid-column: 1;
    grid-column: 1;
    text-align: right;
  }

  #obOwnCurFPDiv {
    -ms-grid-row: 3;
    grid-row: 3;
    -ms-grid-column: 2;
    grid-column: 2;
  }

  #obTarFPL {
    -ms-grid-row: 3;
    grid-row: 3;
    -ms-grid-column: 3;
    grid-column: 3;
    text-align: right;
  }

  #obTarFPDiv {
    -ms-grid-row: 3;
    grid-row: 3;
    -ms-grid-column: 4;
    grid-column: 4;
  }

  #obTarRewL {
    -ms-grid-row: 4;
    grid-row: 4;
    -ms-grid-column: 1;
    grid-column: 1;
    text-align: right;
  }

  #obTarRewDiv {
    -ms-grid-row: 4;
    grid-row: 4;
    -ms-grid-column: 2;
    grid-column: 2;
  }

  #obOwnArcL {
    -ms-grid-row: 4;
    grid-row: 4;
    -ms-grid-column: 3;
    grid-column: 3;
    text-align: right;
  }

  #obOwnArcDiv {
    -ms-grid-row: 4;
    grid-row: 4;
    -ms-grid-column: 4;
    grid-column: 4;
  }

  #obNeedFPDiv {
    -ms-grid-row: 5;
    grid-row: 5;
    -ms-grid-column: 1;
    grid-column: 1/5;
    -ms-grid-column-span: 4;
    text-align: center;
  }

  #obNeedRewardDiv {
    -ms-grid-row: 6;
    grid-row: 6;
    -ms-grid-column: 1;
    -ms-grid-column-span: 4;
    grid-column: 1/5;
    text-align: center;
  }

  #obGBCurFPL,
  #obTarFPL,
  #obOwnArcL {
    padding-left: 3vw;
  }

  /*NOTE outbid end XXX */

  /*NOTE battleground start XXX */

  #bgCalc {
    -ms-grid-row: 1;
    grid-row: 1;
    -ms-grid-column: 1;
    grid-column: 1;
    padding: 0 1vw 0 1vw;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
  }

  .bgDiv {
    margin: .5vh;
    text-align: center;
  }

  .bgInput,
  .fpBuyInput {
    /* color: black; */
    text-align: center;
    margin-left: 1vw;
    width: 12vw;
    height: auto;
    box-sizing: border-box;
    border: none;
    outline: none;
  }

  #fpCalcResult,
  #fpCalcInvestInput,
  #fpCalcInvest,
  #fpCalcCurCostDiv {
    margin: 1vh;
  }

  /*NOTE battleground end XXX */

  /*NOTE fpCalc start XXX */

  #fpCalcDiv {
    -ms-grid-row: 2;
    grid-row: 2;
    -ms-grid-column: 1;
    grid-column: 1;
    padding-top: 2vh;
    padding-bottom: 2vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
  }

  .fpBuyRadio {
    display: inline;
    width: 5%;
    vertical-align: center;
    border: 0px;
    height: calc(.3rem + 1vh);
    /* appearance: radio !important;
    -webkit-appearance: radio !important;
    -moz-appearance: radio !important; */
  }

  #bgHours,
  #bgDays {
    width: 10vw;
  }

  /*NOTE snipeandbattle end XXX */



  /*
  XXX XXX XXX XXX XXX XXX
  NOTE setup start XXX
  XXX XXX XXX XXX XXX XXX
  */

  #globalConfig {
    -ms-grid-column: 1;
    grid-column: 1;
    -ms-grid-row: 3;
    grid-row: 3;

    display: none;
    height: 100%;
    -ms-grid-rows: minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr);
    -ms-grid-columns: minmax(0, 1fr);
    grid-template-columns: minmax(0, 1fr);
    -webkit-user-select: element;
    -ms-user-select: element;
    user-select: element;
    align-items: center;
    justify-items: center;
    -ms-grid-column-align: center;
    -ms-grid-row-align: center;

  }

  #gcCommon {
    display: grid;
    display: -ms-grid;
    -ms-grid-row: 1;
    grid-row: 1;
    -ms-grid-column: 1;
    grid-column: 1;
    padding-left: 5vw;
    padding-right: 5vw;
    overflow-y: auto;
    -ms-grid-rows: auto auto auto auto auto auto auto auto auto auto auto;
    grid-template-rows: auto auto auto auto auto auto auto auto auto auto auto;
    -ms-grid-columns: minmax(0, 1fr);
    grid-template-columns: minmax(0, 1fr);
    height: 100%;
    width: 100%;
    justify-items: center;
    -ms-grid-column-align: center;
  }

  #gcNameL {
    -ms-grid-row: 1;
    grid-row: 1;
    -ms-grid-column: 1;
    grid-column: 1;
  }

  #gcFactorL {
    -ms-grid-row: 2;
    grid-row: 2;
    -ms-grid-column: 1;
    grid-column: 1;
  }

  #gcLowInvestL {
    -ms-grid-row: 3;
    grid-row: 3;
    -ms-grid-column: 1;
    grid-column: 1;
  }

  #gbNameSetupBtnOpen {
    -ms-grid-row: 4;
    grid-row: 4;
    -ms-grid-column: 1;
    grid-column: 1;
    -ms-grid-column-align: center;
  }

  #gcMarkExternalL {
    -ms-grid-row: 5;
    grid-row: 5;
    -ms-grid-column: 1;
    grid-column: 1;
  }

  #gcTooltipL {
    -ms-grid-row: 6;
    grid-row: 6;
    -ms-grid-column: 1;
    grid-column: 1;
    -ms-grid-column-align: center;
  }

  #gcExtendedFavModeL {
    -ms-grid-row: 7;
    grid-row: 7;
    -ms-grid-column: 1;
    grid-column: 1;
  }

  #gcAddinPresetL {
    -ms-grid-row: 8;
    grid-row: 8;
    -ms-grid-column: 1;
    grid-column: 1;
  }

  #gcUiScaleButton {
    -ms-grid-row: 9;
    grid-row: 9;
    -ms-grid-column: 1;
    grid-column: 1;
  }

  #gcColorThemeL {
    -ms-grid-row: 10;
    grid-row: 10;
    -ms-grid-column: 1;
    grid-column: 1;
  }

  #gcBackupBtnOpen {
    -ms-grid-row: 11;
    grid-row: 11;
    -ms-grid-column: 1;
    grid-column: 1;
    margin-bottom: 5vh;
  }

  /* #gcAdvanced 
  {
    display:block;
    -ms-grid-row: 2;
    grid-row: 2;
    -ms-grid-column: 1;
    grid-column: 1;
    padding-left: 2vw;
    overflow-y: hidden;
    width: 90%;
    text-align: center;
  } */




  .gcLabels {
    display: block;
    margin-top: 1vh;
    text-align: center;
    /* font-size: 16px; */
  }

  .gcPresetInput {
    /* font-size: 16px; */
    width: 45vw;
    text-align: center;
  }

  .gcCheckBox {
    width: calc(.6rem + 1.5vmin);
    height: calc(.6rem + 1.5vmin) !important;
    margin-top: 2vh;
    /* filter: grayscale(1);
    -webkit-appearance: checkbox;
    -moz-appearance: checkbox;
    appearance: checkbox; */
  }

  #gcFpAbrL {
    display: none;
  }

  .configBtn {
    margin-top: 2vh;
    padding: 1vw;
    width: 40vw;
    /* font-size: 16px; */
    height: auto;
    height: fit-content;
    -ms-grid-column-align: center;
  }



  #gbNameSetupDiv,
  #gcBackupDiv {
    -ms-grid-row: 1;
    grid-row: 1;
    -ms-grid-column: 1;
    grid-column: 1;
    display: none;
    height: 100%;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
    text-align: center;
    z-index: 2;
    height: 100%;
    width: 100%;
  }

  #gbNameSetupTableDiv {
    overflow-y: scroll;
    height: 90%;
    margin-top: 5vh;
    margin-bottom: 5vh;
    margin-right: 2vw;
    text-align: center;
    border-radius: 1rem;
    padding-left: 1rem;
    padding-right: 1rem;
  }

  #gbNameSetupTable {
    /* margin-top: 20%;
    margin-left: 20%; */
    margin-top: 1rem;
    margin-bottom: 2rem;

  }

  #gbNameSetupButtonsDiv {
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  #gbNameSetupBtnOk {
    /* font-size: 16px; */
    /* width: 20vw; */
    height: calc(2rem + 1vh);
    border-radius: .5rem;
    padding: .5rem;
  }

  #gbNameSetupBtnCancel {
    margin-top: 30%;
    /* font-size: 16px; */
    /* width: 20vw; */
    height: calc(2rem + 1vh);
    border-radius: .5rem;
    padding: .5rem;
  }

  #gbNameSetupBtnReset {
    margin-top: 30%;
    /* font-size: 16px; */
    /* width: 20vw; */
    height: calc(2rem + 1vh);
    border-radius: .5rem;
    padding: .5rem;
  }


  /*NOTE setup end XXX */

  /*
  XXX XXX XXX XXX XXX XXX
  NOTE footer start XXX
  XXX XXX XXX XXX XXX XXX
  */

  #footer {
    -ms-grid-column: 1;
    grid-column: 1;
    -ms-grid-row: 4;
    grid-row: 4;
    display: grid;
    display: -ms-grid;
    -ms-grid-rows: minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr);
    -ms-grid-columns: auto 1fr 1fr auto;
    grid-template-columns: auto auto auto auto auto;
    /* margin-right: 14.5vw; */
    height: auto;
  }


  .footerText {
    width: auto;
    height: 100%;
    display: flex;
    align-items: center;
    text-decoration: none;
    padding: 0 2vw 0 2vw;
    justify-self: center;
  }

  #versionLabel {
    height: 100%;
    display: flex;
    align-items: center;
    grid-row: 1;
    grid-column: 1;
    -ms-grid-row: 1;
    -ms-grid-column: 1;
  }

  #impData {
    grid-row: 1;
    grid-column: 2;
    -ms-grid-row: 1;
    -ms-grid-column: 2;
  }

  #conAnb {
    grid-row: 1;
    grid-column: 3;
    -ms-grid-row: 1;
    -ms-grid-column: 3;
    padding-left: 1vw;
  }

  .footerPack {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    -ms-grid-column-align: center;
    align-items: center;
  }

  #openHelp {
    grid-row: 1;
    grid-column: 4;
    -ms-grid-row: 1;
    -ms-grid-column: 4;
  }

  #Menu {
    grid-row: 1;
    grid-column: 5;
    -ms-grid-row: 1;
    -ms-grid-column: 5;
    display: block;
    /* place-items: center; */
    position: relative;
    bottom: 0px;
    /* bottom: env(safe-area-inset-bottom); */
    right: 0px;
    /* right: env(safe-area-inset-right); */
    width: calc(5*(0.6rem + 2vmin));
    height: 7vh;
    z-index: 3;
    justify-self: right;

  }

  .MenuButton {
    width: 100%;
    height: 100% !important;
    border-radius: 4px 0 0 4px;
    display: block;
    font-weight: bold;
    border: 0;
  }



  #menuContent {
    display: none;
    position: absolute;
    width: 100%;
    border-radius: 4px;
    /* width: calc(90px + 2vw); */
    min-width: 100px;
    bottom: 6.5vh;
    width: calc(7*(0.6rem + 2vmin));
    /* bottom: calc(nv(safe-area-inset-bottom) +6.5vh); */
    right: 1vw;
    /* right: calc(env(safe-area-inset-right) + 1vw); */
    z-index: 4;
  }

  #menuContent label {
    text-align: center;
    padding: 2vh 16px;
    text-decoration: none;
    border-radius: 4px;
  }


  #toggleSnipeGGFPCalcMenu {
    display: none;
  }

}

/* end media portrait default */


/*
XXX XXX XXX XXX XXX XXX XXX XXX XXX XXX XXX XXX
NOTE Layout portrait large XXX XXX XXX XXX XXX XXX
XXX XXX XXX XXX XXX XXX XXX XXX XXX XXX XXX XXX
*/


@media only screen and (orientation:portrait) and (min-height:650px) {

  .body {
    padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
    display: -ms-grid;
    display: grid;
    -ms-grid-rows: 104px auto minmax(0, 1fr) 7vh;
    grid-template-rows: 104px auto minmax(0, 1fr) 7vh;
    /* -ms-grid-columns: 1px minmax(0, 1fr);
    grid-template-columns: 1px minmax(0, 1fr); */
    -ms-grid-columns: minmax(0, 1fr);
    grid-template-columns: minmax(0, 1fr);
    border: 0;
  }


}



/*

XXX XXX XXX XXX XXX XXX XXX XXX XXX XXX XXX XXX
NOTE (3) Layout landscape large XXX XXX 
XXX XXX XXX XXX XXX XXX XXX XXX XXX XXX XXX XXX
*/

@media only screen and (orientation:landscape) and (min-height:600px){

  .body {
    padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
    display: -ms-grid;
    display: grid;
    -ms-grid-rows: 104px auto minmax(0, 1fr) 7vh;
    grid-template-rows: 104px auto minmax(0, 1fr) 7vh;
    /* -ms-grid-columns: 1px minmax(0, 1fr);
      grid-template-columns: 1px minmax(0, 1fr); */
    -ms-grid-columns: minmax(0, 1fr);
    grid-template-columns: minmax(0, 1fr);
    border: 0;
  }

    #bannerDiv {
      flex-direction: row;
    }

  .fontXLarge {
    font-size: calc(1rem + 2vmin);
  }

  .fontLarge {
    font-size: calc(.8rem + 2vmin);
  }

  .fontMedium {
    font-size: calc(.6rem + 2vmin);
  }

  .fontSmall {
    font-size: calc(.6rem + 1vmin);
  }


  /* XXX Greeting start XXX*/
  #greeting {
    display: none;
    height: 100%;
    width: 100%;
    text-align: center;
    text-align: -webkit-center;
    -ms-grid-column: 1;
    grid-column: 1;
    -ms-grid-row: 3;
    grid-row: 3;
    z-index: 2;
  }

  #innerGreet {
    display: grid;
    -ms-grid-rows: auto minmax(0, 1fr) auto;
    grid-template-rows: auto minmax(0, 1fr) auto;
    -ms-grid-columns: minmax(0, 1fr);
    grid-template-columns: minmax(0, 1fr);
    height: 50vh;
    width: 80vw;
    margin-top: 5vh;

  }

  #greetH {
    padding-top: 2vh;
    padding-bottom: 2vh;
    text-align: center;
    -ms-grid-row: 1;
    grid-row: 1;
    -ms-grid-column: 1;
    grid-column: 1;
  }

  #greetText {
    text-align: center;
    overflow-y: auto;
    -ms-grid-row: 2;
    grid-row: 2;
    -ms-grid-column: 1;
    grid-column: 1;
    padding-left: 2vw;
    padding-right: 2vw;
  }

  #greetButton {
    -ms-grid-row: 3;
    grid-row: 3;
    -ms-grid-column: 1;
    grid-column: 1;
    margin-top: 3vh;
    margin-bottom: 1vh;
  }

  /* XXX Greeting end XXX*/



  #topDiv {
    width: 100%;
    height: 100%;
    -ms-grid-column: 1;
    grid-column: 1;
    -ms-grid-row: 1;
    -ms-grid-row-span: 1;
    grid-row: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
  }

    .responsiveAd {
      width: 100%;
      height: 100% ;
    }

  #donateLinkSH {
    display: block;
    height: auto;
    width: 100vw;
    align-self: center;
  }

  #donateLinkSV {
    display: none;
  }

  .donateImgV {
    display: none;
  }

  .donateImgH,
  #joinButtonS {
    max-width: 100%;
    height: auto;
  }

  .donateImgBV {
    max-height: 100%;
    width: auto;
  }

  #title {
    width: 100%;
    text-align: center;
    -ms-grid-row: 2;
    grid-row: 2;
    -ms-grid-column: 1;
    grid-column: 1;
  }

  #titleadds {
    float: right;
    margin-right: 5vw;
  }

  #loading {
    display: none;
    -ms-grid-column: 1;
    grid-column: 1;
    -ms-grid-row: 3;
    grid-row: 3;
    z-index: 2;
    align-self: center;
    justify-self: center;
    text-align: center;
    -ms-grid-column-align: center;
    -ms-grid-row-align: center;
  }

  /*
    XXX XXX XXX XXX XXX
    NOTE default    XXX
    NOTE calcMain   XXX
    XXX XXX XXX XXX XXX
    */

  #acScaleOuterDiv {
    -ms-grid-column: 1;
    grid-column: 1;
    -ms-grid-row: 3;
    grid-row: 3;
  }

  #arcCalc {
    display: none;
    -ms-grid-column: 1;
    grid-column: 1;
    -ms-grid-row: 3;
    grid-row: 3;
    width: 100%;
    height: 100%;
    -ms-grid-columns: 1fr;
    grid-template-columns: 1fr;
    -ms-grid-rows: 1fr auto 1fr;
    grid-template-rows: 1fr auto 1fr;
    -ms-grid-row-align: center;
    -ms-grid-column-align: center;
    align-self: center;
    justify-self: center;
  }

  #acUpperSettings {
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: auto 1fr;
    grid-template-columns: auto 1fr;
    -ms-grid-rows: auto 1fr;
    grid-template-rows: auto 1fr;
    text-align: center;
    align-items: center;
    padding: 0 3vw 0 3vw;
    -ms-grid-row: 1;
    grid-row: 1;
    -ms-grid-column: 1;
    grid-column: 1;
    -ms-grid-row-align: center;
    -ms-grid-column-align: center;
    align-self: center;
    justify-self: center;
  }

  .buttonExtended {
    border: 0;
    padding: 0 2vw;
  }

  #acDivGBselect {
    -ms-grid-row: 1;
    -ms-grid-column: 1;
    grid-row: 1;
    grid-column: 1;
    -ms-grid-row-align: center;
    display: flex;
    flex-direction: row;
    align-content: space-between;
  }

  .acGbSelect {
    width: 20vw;
    height: 100%;
    border: 0;
    padding-left: 1vw;
    margin-left: 1vw;
  }

  #acGbLevelDiv {
    -ms-grid-row: 1;
    -ms-grid-column: 2;
    grid-row: 1;
    grid-column: 2;
    -ms-grid-row-align: center;
    white-space: nowrap;
  }

  #acGbLevelInput {
    width: 8ch;
    text-align: center;
    border: 0;
  }

  #acDivPreset {
    -ms-grid-row: 2;
    -ms-grid-column: 1;
    grid-row: 2;
    grid-column: 1;
    -ms-grid-row-align: center;
    margin-bottom: 1vh;
    margin-top: 1vh;
  }

  #acFavExtSelect,
  #acFavBaseSelect {
    height: 100%;
    border: 0;
    padding-left: 1vw;
    padding-right: 1vw;
    max-width: 18vw;
  }

  #acFavBaseSelect,
  #favDash {
    display: none;
  }


  .acDivInfo {
    white-space: nowrap;
    margin-right: 1vw;
    margin-left: 1vw;
  }

  #acDivTotal {
    -ms-grid-row: 2;
    -ms-grid-column: 2;
    grid-row: 2;
    grid-column: 2;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 1vh;
  }

  #acTable {
    display: grid;
    display: -ms-grid;
    grid-template-columns: 85% 15%;
    -ms-grid-columns: 85% 15%;
    /* padding: 0 3vw 0 3vw; */
    -ms-grid-row: 2;
    grid-row: 2;
    -ms-grid-column: 1;
    grid-column: 1;
    -ms-grid-row-align: center;
    -ms-grid-column-align: center;
    align-self: center;
    justify-self: center;
  }

  #acCoreTable {
    grid-column: 1;
    -ms-grid-column: 1;
    grid-row: 1;
    -ms-grid-row: 1;
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: 7fr 6fr 7fr 8fr 8fr 8fr;
    grid-template-columns: 7fr 6fr 7fr 8fr 8fr 8fr;
    -ms-grid-rows: auto 1fr 1fr 1fr 1fr 1fr;
    grid-template-rows: auto 1fr 1fr 1fr 1fr 1fr; 
    width: 100%;
  }

  .acTableCell {
    display: block;
    text-align: center;
    padding: 0;
    height: 100%;
    /* border: 1px solid black; */
    border-top: 1px solid black;
    border-left: 0;
    border-bottom: 0;
    border-right: 1px solid black;
    /* vertical-align:baseline; */

  }

  .acTableCell input {
    text-align: center;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    border: none;
    outline: none;
  }

  .acTableCellDescription {
    height: auto;
    text-align: center;
    font-weight: bold;
  }

  .acHeaderDiv {
    border-top: 1px solid black;
    border-left: 0;
    border-bottom: 0;
    border-right: 1px solid black;
    height: 100%;
    width: 100%;
    overflow: hidden;
  }

  .acHeaderButton {
    display: block;
    height: 100%;
    width: 100%;
    text-align: center;
    font-weight: bold;
    padding: 0 1vw 0 1vw;
    border: none;
  }


  .acInputExt {
    -moz-appearance: textfield;
  }

  #acDivPlace {
    grid-column: 1;
    grid-row: 1;
    -ms-grid-column: 1;
    -ms-grid-row: 1;
  }

  #acDivFactor {
    grid-column: 2;
    grid-row: 1;
    -ms-grid-column: 2;
    -ms-grid-row: 1;
  }

  #acDivBaseCost {
    grid-column: 3;
    grid-row: 1;
    -ms-grid-column: 3;
    -ms-grid-row: 1;
  }

  #acDivCost {
    grid-column: 4;
    grid-row: 1;
    -ms-grid-column: 4;
    -ms-grid-row: 1;
  }

  #acDivSecure {
    grid-column: 5;
    grid-row: 1;
    -ms-grid-column: 5;
    -ms-grid-row: 1;
  }

  #acDivSecureExtended {
    grid-column: 6;
    grid-row: 1;
    -ms-grid-column: 6;
    -ms-grid-row: 1;
  }


  #acDivP1 {
    grid-column: 1;
    grid-row: 2;
    -ms-grid-column: 1;
    -ms-grid-row: 2;
  }

  #acDivP2 {
    grid-column: 1;
    grid-row: 3;
    -ms-grid-column: 1;
    -ms-grid-row: 3;
  }

  #acDivP3 {
    grid-column: 1;
    grid-row: 4;
    -ms-grid-column: 1;
    -ms-grid-row: 4;
  }

  #acDivP4 {
    grid-column: 1;
    grid-row: 5;
    -ms-grid-column: 1;
    -ms-grid-row: 5;
  }

  #acDivP5 {
    grid-column: 1;
    grid-row: 6;
    -ms-grid-column: 1;
    -ms-grid-row: 6;
  }

  #acDivFactorP1 {
    grid-column: 2;
    grid-row: 2;
    -ms-grid-column: 2;
    -ms-grid-row: 2;
  }

  #acDivFactorP2 {
    grid-column: 2;
    grid-row: 3;
    -ms-grid-column: 2;
    -ms-grid-row: 3;
  }

  #acDivFactorP3 {
    grid-column: 2;
    grid-row: 4;
    -ms-grid-column: 2;
    -ms-grid-row: 4;
  }

  #acDivFactorP4 {
    grid-column: 2;
    grid-row: 5;
    -ms-grid-column: 2;
    -ms-grid-row: 5;
  }

  #acDivFactorP5 {
    grid-column: 2;
    grid-row: 6;
    -ms-grid-column: 2;
    -ms-grid-row: 6;
  }


  #acDivBaseP1 {
    grid-column: 3;
    grid-row: 2;
    -ms-grid-column: 3;
    -ms-grid-row: 2;
  }

  #acDivBaseP2 {
    grid-column: 3;
    grid-row: 3;
    -ms-grid-column: 3;
    -ms-grid-row: 3;
  }

  #acDivBaseP3 {
    grid-column: 3;
    grid-row: 4;
    -ms-grid-column: 3;
    -ms-grid-row: 4;
  }

  #acDivBaseP4 {
    grid-column: 3;
    grid-row: 5;
    -ms-grid-column: 3;
    -ms-grid-row: 5;
  }

  #acDivBaseP5 {
    grid-column: 3;
    grid-row: 6;
    -ms-grid-column: 3;
    -ms-grid-row: 6;
  }

  #acDivCostP1 {
    grid-column: 4;
    grid-row: 2;
    -ms-grid-column: 4;
    -ms-grid-row: 2;
  }

  #acDivCostP2 {
    grid-column: 4;
    grid-row: 3;
    -ms-grid-column: 4;
    -ms-grid-row: 3;
  }

  #acDivCostP3 {
    grid-column: 4;
    grid-row: 4;
    -ms-grid-column: 4;
    -ms-grid-row: 4;
  }

  #acDivCostP4 {
    grid-column: 4;
    grid-row: 5;
    -ms-grid-column: 4;
    -ms-grid-row: 5;
  }

  #acDivCostP5 {
    grid-column: 4;
    grid-row: 6;
    -ms-grid-column: 4;
    -ms-grid-row: 6;
  }

  #acDivSecureP1 {
    grid-column: 5;
    grid-row: 2;
    -ms-grid-column: 5;
    -ms-grid-row: 2;
  }

  #acDivSecureP2 {
    grid-column: 5;
    grid-row: 3;
    -ms-grid-column: 5;
    -ms-grid-row: 3;
  }

  #acDivSecureP3 {
    grid-column: 5;
    grid-row: 4;
    -ms-grid-column: 5;
    -ms-grid-row: 4;
  }

  #acDivSecureP4 {
    grid-column: 5;
    grid-row: 5;
    -ms-grid-column: 5;
    -ms-grid-row: 5;
  }

  #acDivSecureP5 {
    grid-column: 5;
    grid-row: 6;
    -ms-grid-column: 5;
    -ms-grid-row: 6;
  }

  #acDivSecureSumP1 {
    grid-column: 6;
    grid-row: 2;
    -ms-grid-column: 6;
    -ms-grid-row: 2;
  }

  #acDivSecureSumP2 {
    grid-column: 6;
    grid-row: 3;
    -ms-grid-column: 6;
    -ms-grid-row: 3;
  }

  #acDivSecureSumP3 {
    grid-column: 6;
    grid-row: 4;
    -ms-grid-column: 6;
    -ms-grid-row: 4;
  }

  #acDivSecureSumP4 {
    grid-column: 6;
    grid-row: 5;
    -ms-grid-column: 6;
    -ms-grid-row: 5;
  }

  #acDivSecureSumP5 {
    grid-column: 6;
    grid-row: 6;
    -ms-grid-column: 6;
    -ms-grid-row: 6;
  }

  .acExternals {
    grid-column: 2;
    -ms-grid-column: 2;
    grid-row: 1;
    -ms-grid-row: 1;
    display: grid;
    display: -ms-grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr 1fr 1fr 1fr 1fr;
    -ms-grid-columns: 1fr;
    padding-left: .5vw;
    /* align-items: center;
      width: 100%;
      height: 100%; */
  }

  #acDivExternButton {
    grid-column: 1;
    grid-row: 1;
    -ms-grid-column: 1;
    -ms-grid-row: 1;
  }

  #acDivExtern1 {
    grid-column: 1;
    grid-row: 2;
    -ms-grid-column: 1;
    -ms-grid-row: 2;
  }

  #acDivExtern2 {
    grid-column: 1;
    grid-row: 3;
    -ms-grid-column: 1;
    -ms-grid-row: 3;
  }

  #acDivExtern3 {
    grid-column: 1;
    grid-row: 4;
    -ms-grid-column: 1;
    -ms-grid-row: 4;
  }

  #acDivExtern4 {
    grid-column: 1;
    grid-row: 5;
    -ms-grid-column: 1;
    -ms-grid-row: 5;
  }

  #acDivExtern5 {
    grid-column: 1;
    grid-row: 6;
    -ms-grid-column: 1;
    -ms-grid-row: 6;
  }

  #acDivCD {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-around;
    padding: 0 3vw 0 3vw;
    -ms-grid-row: 3;
    grid-row: 3;
    -ms-grid-column: 1;
    grid-column: 1;
    -ms-grid-row-align: center;
    -ms-grid-column-align: center;
    align-self: center;
    justify-self: center;
  }

  #acDivCDButtonCopy {
    -ms-grid-row: 1;
    grid-row: 1;
    -ms-grid-column: 4;
    grid-column: 4;
  }

  #acCDButtonCopy {
    display: block;
    width: 100%;
    /* padding: 0 1vw 0 1vw !important;       */
    overflow-x: hidden;
    width: auto;
  }

  #acCDText {
    -ms-grid-row: 1;
    grid-row: 1;
    -ms-grid-column: 3;
    grid-column: 3;
    width: 50%;
    text-align: center;
  }

  #acCDStyle {
    -ms-grid-row: 1;
    grid-row: 1;
    -ms-grid-column: 2;
    grid-column: 2;
    width: 20%;
    border: 0;
  }


  .helpPopup {
    border-radius: 20px;
    position: absolute;
    top: 0px;
    left: 0px;
    padding: 4px;
  }

  /*NOTE arcCalc end XXX */

  /* acPresetConfig start */

  #acPresetConfig {
    display: none;
    -ms-grid-column: 1;
    grid-column: 1;
    -ms-grid-row: 3;
    grid-row: 3;

    -ms-grid-rows: minmax(0, 1fr) auto;
    grid-template-rows: minmax(0, 1fr) auto;
    -ms-grid-columns: minmax(50%, 1fr) minmax(40%, 1fr);
    grid-template-columns: minmax(50%, 1fr) minmax(40%, 1fr);
    height: 100%;
    width: 100%;
    text-align: center;
    text-align: -webkit-center;
    z-index: 2;
  }

  /* #acGbBasePresetsDiv {
    -ms-grid-column: 1;
    grid-column: 1;
    -ms-grid-row: 1;
    grid-row: 1;
  }

  #acGbExtendedPresetsDiv {
    -ms-grid-column: 2;
    grid-column: 2;
    -ms-grid-row: 1;
    grid-row: 1;
  } */

  #acGbPresetsBtnDiv {
    -ms-grid-column: 1;
    -ms-grid-column-span: 2;
    grid-column: 1/3;
    -ms-grid-row: 2;
    grid-row: 2;
    padding-top: 1.5vh;
    padding-bottom: 1.5vh;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-around;
    width: 75%;
    justify-self: center;
    -ms-grid-column-align: center;
  }


  #acGbBasePresetsDiv,
  #acGbExtendedPresetsDiv {
    -ms-grid-rows: auto minmax(0, 1fr) auto;
    grid-template-rows: auto minmax(0, 1fr) auto;
    -ms-grid-columns: minmax(0, 1fr);
    grid-template-columns: minmax(0, 1fr);
    padding-bottom: 2vh;
    padding-top: 2vh;
  }

  #acGbBasePresetsTitleDiv,
  #acGbExtendedPresetsTitleDiv {
    -ms-grid-row: 1;
    grid-row: 1;
    -ms-grid-column: 1;
    grid-column: 1;
    text-align: center
  }

  #acGbBasePresetsTableDiv,
  #acGbExtendedPresetsTableDiv {
    -ms-grid-row: 2;
    grid-row: 2;
    -ms-grid-column: 1;
    grid-column: 1;
    overflow-y: auto;
    -ms-grid-column-align: center;
    justify-self: center;
  }


  #acGbBasePresetsBtnDiv,
  #acGbExtendedPresetsBtnDiv {
    padding-top: 1.5vh;
    -ms-grid-row: 3;
    grid-row: 3;
    -ms-grid-column: 1;
    grid-column: 1;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-around;
  }

  #acGbBasePresetsTable,
  #acGbExtendedPresetsTable {
    border-collapse: separate;
    border-spacing: 1vw 1vh;
    padding: 0 2vw 0 2vw;
  }

  .AddBtn {
    text-align: center;
    border-radius: .2rem;
    width: auto;
    height: auto;
    padding: 0 3vw 0 3vw;
  }

  .delBtn {
    text-align: center;
    border-radius: .2rem;
    width: auto;
    height: auto;
    padding: 0 2vw 0 2vw;
  }

  .acFavConfigBtnInactive,
  .acFavConfigBtnActive {
    text-align: center;
    border-radius: .2rem;
    width: auto;
    height: auto;
    padding: 0 1vw 0 1vw;
  }

  .acFavBaseInput,
  .acFavExtendedInput {
    max-width: 25vw;
  }



  /* acPresetConfig end */

  /*NOTE chart start XXX */

  #chart {
    display: none;
    -ms-grid-column: 1;
    grid-column: 1;
    -ms-grid-row: 3;
    grid-row: 3;
    -ms-grid-columns: minmax(0, 1fr) auto;
    grid-template-columns: minmax(0, 1fr) auto;
    -ms-grid-rows: minmax(0, 1fr) auto auto auto;
    grid-template-rows: minmax(0, 1fr) auto auto auto;
    width: 100%;
    height: 100%;
    -ms-grid-row-align: center;
    -ms-grid-column-align: center;
    align-self: center;
    justify-self: center;
  }

  #chartDivCanvas {
    -ms-grid-row: 1;
    -ms-grid-row-span: 3;
    grid-row: 1/4;
    -ms-grid-column: 1;
    grid-column: 1;
    text-align: center;
  }

  #chartDivSettings {
    -ms-grid-row: 1;
    grid-row: 1;
    -ms-grid-column: 2;
    grid-column: 2;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    padding-right: 1vw;
  }

  #chartGbSelectDiv,
  #chartDivZoom {
    width: 100%;
    text-align: center;

  }

  .chartGbSelect,
  #chartZoomBtn {
    width: 70%;
  }

  #chartDivLevelBegin {

    text-align: center;
  }

  #chartDivLevelEnd {

    text-align: center;
  }

  #chartOverview {
    -ms-grid-row: 2;
    -ms-grid-row-span: 2;
    grid-row: 2/4;
    -ms-grid-column: 2;
    grid-column: 2;
    padding-right: 1vw;
    padding-bottom: 2vh;
    display: flex;
    flex-direction: column;

  }

  #chartDivSumTotal,
  #chartDivSumOwn {
    width: 100%;
    text-align: center;
    display: flex;
    flex-direction: column;
    padding-top: 1vh;
  }

  .chartInput {
    text-align: center;
    width: 4vw;
    height: auto;
    box-sizing: border-box;
    border: none;
    outline: none;
  }

  #chartDivFPInvest {
    -ms-grid-row: 4;
    grid-row: 4;
    -ms-grid-column: 1;
    -ms-grid-column-span: 2;
    grid-column: 1;
    text-align: center;
    padding-bottom: 2vw;
  }

  #chartFPInvest {
    width: 7ch;
  }

  /*NOTE chart end XXX */

  /*
    XXX XXX XXX XXX XXX XXX XXX
    NOTE settlement start XXX
    XXX XXX XXX XXX XXX XXX XXX
    */

  #setDiv {
    display: none;
    -ms-grid-column: 1;
    grid-column: 1;
    -ms-grid-row: 3;
    grid-row: 3;
    -ms-grid-rows: auto minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr);
    -ms-grid-columns: minmax(0, 1fr);
    grid-template-columns: minmax(0, 1fr);
    -ms-grid-row-align: center;
    -ms-grid-column-align: center;
    align-self: center;
    justify-self: center;
    height: 100%;
    width: 100%;
  }

  #setTopMenuDiv {
    -ms-grid-row: 1;
    grid-row: 1;
    -ms-grid-column: 1;
    grid-column: 1;
    text-align: center;
    padding-top: 2vh;
  }

  #setPresetSelect {
    margin-right: 2vw;
    /* margin: 0 2vw 0 2vw; */
    text-align: center;
    width: auto;
    max-width: 30vw;
    height: auto;
    box-sizing: border-box;
    border: none;
    outline: none;
  }

  #setToggleDiv {
    display: inline-block;
  }

  #setMainContent,
  #setAgeSelectDiv,
  #setGoodsSetupDiv {
    -ms-grid-row: 2;
    grid-row: 2;
    -ms-grid-column: 1;
    grid-column: 1;
    padding-top: 4vh;
    padding-bottom: 3vh;
    height: 90%;
    width: 100%;
  }

  #setAgeSelectDiv {
    display: none;
    justify-items: center;
    align-items: center;
    -ms-grid-column-align: center;
    -ms-grid-row-align: center;
    -ms-grid-rows: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
    -ms-grid-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }

  .settleFrame {
    display: -ms-grid;
    display: grid;
    -ms-grid-rows: auto auto minmax(0, 1fr);
    grid-template-rows: auto auto minmax(0, 1fr);
    -ms-grid-columns: minmax(0, 1fr);
    grid-template-columns: minmax(0, 1fr);
    height: 100%;
    overflow-y: hidden;
  }

  .setChoiceButton {
    width: 25vw;
    height: 10vh;
    margin: 2vh;
    -ms-grid-column-align: center;
    -ms-grid-row-align: center;
  }

  #setButtonCViking {
    -ms-grid-row: 1;
    grid-row: 1;
    -ms-grid-column: 1;
    grid-column: 1;
  }

  #setButtonCJapan {
    -ms-grid-row: 1;
    grid-row: 1;
    -ms-grid-column: 2;
    grid-column: 2;
  }

  #setButtonCEgypt {
    -ms-grid-row: 2;
    grid-row: 2;
    -ms-grid-column: 1;
    grid-column: 1;
  }

  #setButtonCAztec {
    -ms-grid-row: 2;
    grid-row: 2;
    -ms-grid-column: 2;
    grid-column: 2;
  }

  #setButtonCMughal {
    -ms-grid-row: 3;
    grid-row: 3;
    -ms-grid-column: 1;
    grid-column: 1;
  }

  #setGoodsSetupDiv {
    -ms-grid-rows: auto minmax(0, 1fr) auto;
    grid-template-rows: auto minmax(0, 1fr) auto;
    -ms-grid-columns: minmax(0, 1fr);
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
  }

  .setTableText,
  .setTDValues,
  .setTDProgress,
  .setTDAmount,
  .setTDRadio {
    word-break: break-all;
    overflow-wrap: anywhere;
  }

  #settleGoodsSetupTableHeadDiv {
    -ms-grid-row: 1;
    grid-row: 1;
    -ms-grid-column: 1;
    grid-column: 1;
    width: 90%;
    -ms-grid-column-align: center;
  }

  #setGoodsSetupTableBodyDiv {
    -ms-grid-row: 2;
    grid-row: 2;
    -ms-grid-column: 1;
    grid-column: 1;
    width: 90%;
    -ms-grid-column-align: center;
  }

  #setGoodsSetupButtonDoneDiv {
    -ms-grid-row: 3;
    grid-row: 3;
    -ms-grid-column: 1;
    grid-column: 1;
    text-align: center;
    padding-top: 2vh;
  }

  #setGoodsSetupButtonDone {
    width: 30vw;
  }

  .setInput {
    width: 100%;
    height: 100%;
    text-align: center;
  }

  .setGoodsTableNumber {
    width: 12%;
    text-align: center;
    height: 4vh;
  }

  .setGoodsTableText {
    padding-left: 1vw;
    padding-right: 1vw;
  }

  .setGoodsInput {
    width: 100%;
    height: 100% !important;
    text-align: center;
  }

  .tableHead {

    height: auto;
    padding-right: 1vw;
    padding-left: 1vw;
  }

  .setResearchHead {
    height: 100%;
    width: 100%;
    border-collapse: collapse;
  }

  .setGoodPic {
    width: 50%;
  }

  #settleResearchTableHeadADiv {
    -ms-grid-row: 1;
    grid-row: 1;
    -ms-grid-column: 1;
    grid-column: 1;
  }

  #settleResearchTableHeadBDiv {
    -ms-grid-row: 2;
    grid-row: 2;
    -ms-grid-column: 1;
    grid-column: 1;
  }

  #setResearchTableBodyDiv {
    -ms-grid-row: 3;
    grid-row: 3;
    -ms-grid-column: 1;
    grid-column: 1;
  }

  .tableBody {

    height: auto;
    padding-right: 1vw;
    padding-left: 1vw;
    overflow-y: scroll;
    scrollbar-width: none;
    /* Firefox */
    -ms-overflow-style: none;
    /* Internet Explorer 10+ */
  }

  .tableBody::-webkit-scrollbar {
    /* WebKit */
    width: 0;
    height: 0;
  }

  .setResearchTableBody {
    height: 100%;
    width: 100%;
    border-collapse: collapse;
  }

  .setTDRadio {
    width: 9%;
    text-align: center;
  }

  .setTDProgress {
    text-align: center;
  }

  .setTDAmount {
    width: 12%;
    text-align: center;
  }

  .setTDValues {
    width: 12%;
    text-align: center;
    padding-right: 5px;
  }

  .settleRadioLabel {
    display: block;
    /* width: 100%;
      height: 100%; */
  }

  .settleRadio {
    vertical-align: middle;
    border: 0px;
    width: 100%;
    height: calc(.3rem + 1vw);
    /* filter: grayscale(1);

      appearance: radio !important;
      -webkit-appearance: radio !important;
      -moz-appearance: radio !important; */
  }

  .setTableText {
    padding-left: 5px;
    padding-right: 5px;
  }

  #setQuestHeadDiv {
    -ms-grid-row: 1;
    grid-row: 1;
    -ms-grid-column: 1;
    grid-column: 1;
    width: auto;
    padding-right: 1vw;
    padding-left: 1vw;
  }

  #setQuestHeadTable {
    width: 100%;
  }



  #setQuestBodyDiv {
    -ms-grid-row: 2;
    -ms-grid-row-span: 2;
    grid-row: 2/4;
    -ms-grid-column: 1;
    grid-column: 1;
    width: auto;
    padding-right: 1vw;
    padding-left: 1vw;
  }

  #setQuestTableBody {
    width: 100%;
  }

  /*NOTE settlement end XXX */

  /*
    XXX XXX XXX XXX XXX XXX XXX
    NOTE settle Preset start XXX
    XXX XXX XXX XXX XXX XXX XXX
    */


  /* acPresetConfig start */

  #settlePresetConfig {
    display: none;
    -ms-grid-column: 1;
    grid-column: 1;
    -ms-grid-row: 3;
    grid-row: 3;

    -ms-grid-rows: minmax(0, 1fr) auto;
    grid-template-rows: minmax(0, 1fr) auto;
    -ms-grid-columns: minmax(0, 1fr);
    grid-template-columns: minmax(0, 1fr);

    height: 100%;
    width: 100%;
    text-align: center;
    text-align: -webkit-center;
    z-index: 2;
  }

  #settlePresetsDiv {
    -ms-grid-column: 1;
    grid-column: 1;
    -ms-grid-row: 1;
    grid-row: 1;
  }

  #settlePresetsBtnDiv {
    -ms-grid-column: 1;
    grid-column: 1;
    -ms-grid-row: 2;
    grid-row: 2;
    padding-top: 1.5vh;
    padding-bottom: 1.5vh;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-around;
    width: 75%;
    justify-self: center;
  }



  #settlePresetsDiv {
    display: grid;
    display: -ms-grid;
    -ms-grid-rows: auto minmax(0, 1fr) auto;
    grid-template-rows: auto minmax(0, 1fr) auto;
    -ms-grid-columns: minmax(0, 1fr);
    grid-template-columns: minmax(0, 1fr);
    padding-bottom: 2vh;
    padding-top: 2vh;
  }

  #settlePresetsTitleDiv {
    -ms-grid-row: 1;
    grid-row: 1;
    -ms-grid-column: 1;
    grid-column: 1;
    text-align: center
  }

  #settlePresetsTableDiv {
    -ms-grid-row: 2;
    grid-row: 2;
    -ms-grid-column: 1;
    grid-column: 1;
    overflow-y: auto;
    -ms-grid-column-align: center;
    justify-self: center;
  }


  #settlePresetsBtnDiv {
    padding-top: 1.5vh;
    -ms-grid-row: 3;
    grid-row: 3;
    -ms-grid-column: 1;
    grid-column: 1;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-around;
  }

  #settlePresetsTable {
    border-collapse: separate;
    border-spacing: 1vw 1vh;
    padding: 0 2vw 0 2vw;
  }

  .settleFavInput {
    max-width: 25vw;
  }



  /* acPresetConfig end */



  /*NOTE settle Preset end XXX */





  /*
    XXX XXX XXX XXX XXX XXX XXX
    NOTE snipeandbattle start XXX
    XXX XXX XXX XXX XXX XXX XXX
    */

  #snipeAndBattle {
    display: none;
    -ms-grid-column: 1;
    grid-column: 1;
    -ms-grid-row: 3;
    grid-row: 3;
    margin-top: 2vh;
    -ms-grid-rows: minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr);
    -ms-grid-columns: minmax(0, 4fr) minmax(0, 3fr);
    ;
    grid-template-columns: minmax(0, 4fr) minmax(0, 3fr);
    -ms-grid-row-align: center;
    -ms-grid-column-align: center;
    align-self: center;
    justify-self: center;
    height: 90%;
    width: 90%;
  }



  /*NOTE outbid start XXX */
  #obDiv {
    -ms-grid-row: 1;
    grid-row: 1;
    -ms-grid-column: 1;
    -ms-grid-column-span: 2;
    grid-column: 1/3;
    display: grid;
    grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr;
    -ms-grid-rows: 1fr 1fr 1fr 1fr 1fr 1fr;
    grid-template-columns: minmax(0, 1fr) auto auto minmax(0, 1fr);
    -ms-grid-columns: minmax(0, 1fr) auto auto minmax(0, 1fr);
  }

  .obInput {
    text-align: center;
    width: 9vw;
    height: auto;
    margin-left: 1vw;
  }

  #obTitleL {
    text-align: center;
    -ms-grid-row: 1;
    grid-row: 1;
    -ms-grid-column: 1;
    -ms-grid-column-span: 4;
    grid-column: 1/5;
  }

  #obGBTotalL {
    -ms-grid-row: 2;
    grid-row: 2;
    -ms-grid-column: 1;
    grid-column: 1;
    text-align: right;
  }

  #obGBTotalDiv {
    -ms-grid-row: 2;
    grid-row: 2;
    -ms-grid-column: 2;
    grid-column: 2;
  }

  #obGBCurFPL {
    -ms-grid-row: 2;
    grid-row: 2;
    -ms-grid-column: 3;
    grid-column: 3;
    text-align: right;
  }

  #obGBCurFPDiv {
    -ms-grid-row: 2;
    grid-row: 2;
    -ms-grid-column: 4;
    grid-column: 4;
  }

  #obOwnCurFPL {
    -ms-grid-row: 3;
    grid-row: 3;
    -ms-grid-column: 1;
    grid-column: 1;
    text-align: right;
  }

  #obOwnCurFPDiv {
    -ms-grid-row: 3;
    grid-row: 3;
    -ms-grid-column: 2;
    grid-column: 2;
  }

  #obTarFPL {
    -ms-grid-row: 3;
    grid-row: 3;
    -ms-grid-column: 3;
    grid-column: 3;
    text-align: right;
  }

  #obTarFPDiv {
    -ms-grid-row: 3;
    grid-row: 3;
    -ms-grid-column: 4;
    grid-column: 4;
  }

  #obTarRewL {
    -ms-grid-row: 4;
    grid-row: 4;
    -ms-grid-column: 1;
    grid-column: 1;
    text-align: right;
  }

  #obTarRewDiv {
    -ms-grid-row: 4;
    grid-row: 4;
    -ms-grid-column: 2;
    grid-column: 2;
  }

  #obOwnArcL {
    -ms-grid-row: 4;
    grid-row: 4;
    -ms-grid-column: 3;
    grid-column: 3;
    text-align: right;
  }

  #obOwnArcDiv {
    -ms-grid-row: 4;
    grid-row: 4;
    -ms-grid-column: 4;
    grid-column: 4;
  }

  #obNeedFPDiv {
    -ms-grid-row: 5;
    grid-row: 5;
    -ms-grid-column: 1;
    grid-column: 1/5;
    -ms-grid-column-span: 4;
    text-align: center;
  }

  #obNeedRewardDiv {
    -ms-grid-row: 6;
    grid-row: 6;
    -ms-grid-column: 1;
    -ms-grid-column-span: 4;
    grid-column: 1/5;
    text-align: center;
  }

  #obGBCurFPL,
  #obTarFPL,
  #obOwnArcL {
    padding-left: 3vw;
  }

  /*NOTE outbid end XXX */

  /*NOTE battleground start XXX */

  #bgCalc {
    -ms-grid-row: 1;
    grid-row: 1;
    -ms-grid-column: 1;
    grid-column: 1;
    padding: 0 1vw 0 1vw;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
  }

  .bgDiv {
    margin: .5vh;
    text-align: center;
  }

  .bgInput,
  .fpBuyInput {
    /* color: black; */
    text-align: center;
    margin-left: 1vw;
    width: 12vw;
    height: auto;
    box-sizing: border-box;
    border: none;
    outline: none;
  }

  #fpCalcResult,
  #fpCalcInvestInput,
  #fpCalcInvest,
  #fpCalcCurCostDiv {
    margin: 1vh;
  }

  /*NOTE battleground end XXX */

  /*NOTE fpCalc start XXX */

  #fpCalcDiv {
    -ms-grid-row: 1;
    grid-row: 1;
    -ms-grid-column: 2;
    grid-column: 2;
    padding-top: 2vh;
    padding-bottom: 2vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
  }

  .fpBuyRadio {
    display: inline;
    width: 5%;
    vertical-align: center;
    border: 0px;
    height: calc(.3rem + 1vw);
    /* appearance: radio !important;
        -webkit-appearance: radio !important;
        -moz-appearance: radio !important; */
  }

  /*NOTE snipeandbattle end XXX */



  /*
    XXX XXX XXX XXX XXX XXX
    NOTE setup start XXX
    XXX XXX XXX XXX XXX XXX
    */

  #globalConfig {
    -ms-grid-column: 1;
    grid-column: 1;
    -ms-grid-row: 3;
    grid-row: 3;

    display: none;
    height: 100%;
    -ms-grid-rows: minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr);
    -ms-grid-columns: minmax(0, 1fr);
    grid-template-columns: minmax(0, 1fr);
    -webkit-user-select: element;
    -ms-user-select: element;
    user-select: element;
    align-items: center;
    justify-items: center;
    -ms-grid-column-align: center;
    -ms-grid-row-align: center;
  }

  #gcCommon {
    display: grid;
    display: -ms-grid;
    -ms-grid-row: 1;
    grid-row: 1;
    -ms-grid-column: 1;
    grid-column: 1;
    padding-left: 5vw;
    padding-right: 5vw;
    overflow-y: auto;
    -ms-grid-rows: auto auto auto auto auto auto;
    grid-template-rows: auto auto auto auto auto auto;
    -ms-grid-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    height: 100%;
    width: 100%;
    justify-items: center;
    -ms-grid-column-align: center;
  }

  #gcNameL {
    -ms-grid-row: 1;
    grid-row: 1;
    -ms-grid-column: 1;
    grid-column: 1;
  }

  #gcFactorL {
    -ms-grid-row: 2;
    grid-row: 2;
    -ms-grid-column: 1;
    grid-column: 1;
  }

  #gcLowInvestL {
    -ms-grid-row: 3;
    grid-row: 3;
    -ms-grid-column: 1;
    grid-column: 1;
  }

  #gbNameSetupBtnOpen {
    -ms-grid-row: 4;
    grid-row: 4;
    -ms-grid-column: 1;
    grid-column: 1;
    -ms-grid-column-align: center;
  }

  #gcMarkExternalL {
    -ms-grid-row: 5;
    grid-row: 5;
    -ms-grid-column: 1;
    grid-column: 1;
  }

  #gcUiScaleButton {
    -ms-grid-row: 4;
    grid-row: 4;
    -ms-grid-column: 2;
    grid-column: 2;
    -ms-grid-column-align: center;
  }

  #gcColorThemeL {
    -ms-grid-row: 5;
    grid-row: 5;
    -ms-grid-column: 2;
    grid-column: 2;
  }

  #gcTooltipL {
    -ms-grid-row: 1;
    grid-row: 1;
    -ms-grid-column: 2;
    grid-column: 2;
  }

  #gcExtendedFavModeL {
    -ms-grid-row: 2;
    grid-row: 2;
    -ms-grid-column: 2;
    grid-column: 2;
  }

  #gcAddinPresetL {
    -ms-grid-row: 3;
    grid-row: 3;
    -ms-grid-column: 2;
    grid-column: 2;
  }
  #gcBackupBtnOpen {
    -ms-grid-row: 6;
    grid-row: 6;
    -ms-grid-column: 1;
    grid-column: 1;
    margin-bottom: 5vh;
  }

  /* #debugWidth
  {
    display:none;
    -ms-grid-row: 5;
    grid-row: 5;
    -ms-grid-column: 1;
    grid-column: 1;
  }
  #debugHeight
  {
    display:none;
    -ms-grid-row: 5;
    grid-row: 5;
    -ms-grid-column: 2;
    grid-column: 2;
  } */

  /* #gcAdvanced {
    display: inline-block;
    -ms-grid-row: 1;
    grid-row: 1;
    -ms-grid-column: 2;
    grid-column: 2;
    padding-left: 2vw;
    overflow-y: auto;
    height: 90%;
  } */


  #gcPresetsSettleDiv {
    -ms-grid-row: 1;
    grid-row: 1;
    -ms-grid-column: 3;
    grid-column: 3;
    margin-right: 2vw;
    display: grid;
    display: -ms-grid;
    -ms-grid-rows: auto minmax(0, 1fr) auto;
    grid-template-rows: auto minmax(0, 1fr) auto;
    -ms-grid-columns: minmax(0, 1fr);
    grid-template-columns: minmax(0, 1fr);
    padding-top: 2vh;
    padding-bottom: 2vh;

  }

  .gcLabels {
    display: block;
    margin-top: 1vh;
    text-align: center;
    /* font-size: 16px; */
  }

  .gcPresetInput {
    /* font-size: 16px; */
    width: 20vw;
    text-align: center;
  }

  .gcCheckBox {
    width: calc(.6rem + 1.5vmin);
    height: calc(.6rem + 1.5vmin) !important;
    margin-top: 2vh;
    /* filter: grayscale(1);
      -webkit-appearance: checkbox;
      -moz-appearance: checkbox;
      appearance: checkbox; */
  }

  #gcFpAbrL {
    display: none;
  }

  .configBtn {
    margin-top: 2vh;
    padding: 1vw;
    width: 20vw;
    /* font-size: 16px; */
    height: auto;
    height: fit-content;
    -ms-grid-column-align: center;
  }



  #gbNameSetupDiv,
  #gcBackupDiv {
    -ms-grid-row: 1;
    grid-row: 1;
    -ms-grid-column: 1;
    grid-column: 1;
    display: none;
    height: 100%;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
    text-align: center;
    z-index: 2;
    height: 100%;
    width: 100%;
  }

  #gbNameSetupTableDiv {
    overflow-y: scroll;
    height: 90%;
    margin-top: 5vh;
    margin-bottom: 5vh;
    text-align: center;
    border-radius: 1rem;
    padding-left: 1rem;
    padding-right: 1rem;
  }

  #gbNameSetupTable {
    /* margin-top: 20%;
      margin-left: 20%; */
    margin-top: 1rem;
    margin-bottom: 2rem;

  }

  #gbNameSetupButtonsDiv {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    padding-top: 3vh;
    padding-bottom: 3vh;

  }

  #gbNameSetupBtnOk {
    /* font-size: 16px; */
    /* width: 20vw; */
    /* height: calc(2rem + 1vw); */
    border-radius: .5rem;
    padding: .5rem;
  }

  #gbNameSetupBtnCancel {
    margin-top: 30%;
    /* font-size: 16px; */
    /* width: 20vw; */
    /* height: calc(2rem + 1vw); */
    border-radius: .5rem;
    padding: .5rem;
  }

  #gbNameSetupBtnReset {
    margin-top: 30%;
    /* font-size: 16px; */
    /* width: 20vw; */
    /* height: calc(2rem + 1vw); */
    border-radius: .5rem;
    padding: .5rem;
  }


  /*NOTE setup end XXX */

  /*
    XXX XXX XXX XXX XXX XXX
    NOTE footer start XXX
    XXX XXX XXX XXX XXX XXX
    */

  #footer {
    -ms-grid-row: 4;
    grid-row: 4;
    -ms-grid-column: 1;
    grid-column: 1;
    display: grid;
    display: -ms-grid;
    -ms-grid-rows: minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr);
    -ms-grid-columns: auto 1fr 1fr auto;
    grid-template-columns: auto auto auto auto auto;
    /* margin-right: 14.5vw; */
    height: auto;
  }


  .footerText {
    width: auto;
    height: 100%;
    display: flex;
    align-items: center;
    text-decoration: none;
    padding: 0 2vw 0 2vw;
    justify-self: center;
  }

  #versionLabel {
    height: 100%;
    display: flex;
    align-items: center;
    grid-row: 1;
    grid-column: 1;
    -ms-grid-row: 1;
    -ms-grid-column: 1;
  }

  #impData {
    grid-row: 1;
    grid-column: 2;
    -ms-grid-row: 1;
    -ms-grid-column: 2;
  }

  #conAnb {
    grid-row: 1;
    grid-column: 3;
    -ms-grid-row: 1;
    -ms-grid-column: 3;
    padding-left: 1vw;
  }

  .footerPack {
    height: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    -ms-grid-column-align: center;
  }

  #openHelp {
    grid-row: 1;
    grid-column: 4;
    -ms-grid-row: 1;
    -ms-grid-column: 4;
  }

  #Menu {
    grid-row: 1;
    grid-column: 5;
    -ms-grid-row: 1;
    -ms-grid-column: 5;
    display: block;
    /* place-items: center; */
    position: relative;
    bottom: 0px;
    /* bottom: env(safe-area-inset-bottom); */
    right: 0px;
    /* right: env(safe-area-inset-right); */
    width: calc(5*(0.6rem + 2vmin));
    height: 7vh;
    z-index: 3;
    justify-self: right;

  }

  .MenuButton {
    width: 100%;
    height: 100% !important;
    border-radius: 4px 0 0 4px;
    display: block;
    font-weight: bold;
    border: 0;
  }



  #menuContent {
    display: none;
    position: absolute;
    width: 100%;
    border-radius: 4px;
    min-width: 100px;
    bottom: 6.5vh;
    width: calc(7*(0.6rem + 2vmin));
    /* bottom: calc(nv(safe-area-inset-bottom) +6.5vh); */
    right: 1vw;
    /* right: calc(env(safe-area-inset-right) + 1vw); */
    z-index: 4;
  }

  #menuContent label {
    text-align: center;
    padding: 2vh 16px;
    text-decoration: none;
    border-radius: 4px;
  }


  #toggleSnipeGGFPCalcMenu {
    display: none;
  }

}


/* end media landscape large */





/* Misc settings start */

#greeting {
  display: none;
}

#gcBackupDiv{
  flex-direction: column;
}

#gcBackupBtnUpload, #gcBackupBtnDownload, #gcBackupBtnClose
{
  color: #FFFFFF;
    background-color: #1D3B75;
    box-shadow: inset -2px 2px 7px #3E7BF5, inset 2px -2px 7px #0D1B36;
  margin-top: 3vh;
  padding: 1vh 3vw;
  width:auto
}

::file-selector-button
{
  color: #FFFFFF;
    background-color: #1D3B75;
    box-shadow: inset -2px 2px 7px #3E7BF5, inset 2px -2px 7px #0D1B36;

}
input[type="file"]::-webkit-file-upload-button
{
  color: #FFFFFF;
    background-color: #1D3B75;
    box-shadow: inset -2px 2px 7px #3E7BF5, inset 2px -2px 7px #0D1B36;
}
input[type="file"]::-ms-browse
{
  color: #FFFFFF;
    background-color: #1D3B75;
    box-shadow: inset -2px 2px 7px #3E7BF5, inset 2px -2px 7px #0D1B36;
}
input[type="file"]::file-selector-button
{
  color: #FFFFFF;
    background-color: #1D3B75;
    box-shadow: inset -2px 2px 7px #3E7BF5, inset 2px -2px 7px #0D1B36;
}


#file, .backupText {
  color: white;
}
.backupText {
  width: 100%;
  height:100%;
  justify-content: space-around;
  display:flex;
  flex-direction: column;
  align-items: center;
  overflow-y: auto;
}

#gcBackupForm
{
  width:100%;
}


/*
XXX XXX XXX XXX XXX XXX XXX
NOTE AC Fav Screen start XXX 
XXX XXX XXX XXX XXX XXX XXX
*/


/* Fav Base Mode */
.acFavBaseDivBaseMode {
  display: none;
}

.acFavExtendedDivBaseMode {
  display: grid;
  display: -ms-grid;
  -ms-grid-column: 1;
  -ms-grid-column-span: 2;
  grid-column: 1/3;
  -ms-grid-row: 1;
  grid-row: 1;
}

/* Fav Extended Mode */
.acFavBaseDivExtMode {
  display: grid;
  display: -ms-grid;
  -ms-grid-column: 1;
  grid-column: 1;
  -ms-grid-row: 1;
  grid-row: 1;
}

.acFavExtendedDivExtMode {
  display: grid;
  display: -ms-grid;
  -ms-grid-column: 2;
  grid-column: 2;
  -ms-grid-row: 1;
  grid-row: 1;
}

/* end AC FAV Screen */

/* XXX Scale Settings start XXX*/
#acScaleOuterDiv {
  display: none;
  height: 100%;
  width: 100%;
  text-align: center;
  text-align: -webkit-center;
  z-index: 2;
}

#acScaleDivUI {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 30%;
  margin: auto;
  /* background-color: #eadfbd;
  box-shadow: inset 2px -2px 7px #6B6657 , inset -2px 2px 7px #F7ECC8; */
  width: auto;
}


.scaleButtons {
  font-size: 6vmin;
  padding: 1vmin;
}


#acScaleButtonFontDec,
#acScaleButtonFontInc {
  padding-left: 2vmax;
  padding-right: 2vmax;
}




.scaleH50 {
  height: 50%;
}

.scaleH55 {
  height: 55%;
}

.scaleH60 {
  height: 60%;
}

.scaleH65 {
  height: 65%;
}

.scaleH70 {
  height: 70%;
}

.scaleH75 {
  height: 75%;
}

.scaleH80 {
  height: 80%;
}

.scaleH85 {
  height: 85%;
}

.scaleH90 {
  height: 90%;
}

.scaleH95 {
  height: 95%;
}

.scaleH100 {
  height: 100%;
}

.scaleW50 {
  width: 50%;
}

.scaleW55 {
  width: 55%;
}

.scaleW60 {
  width: 60%;
}

.scaleW65 {
  width: 65%;
}

.scaleW70 {
  width: 70%;
}

.scaleW75 {
  width: 75%;
}

.scaleW80 {
  width: 80%;
}

.scaleW85 {
  width: 85%;
}

.scaleW90 {
  width: 90%;
}

.scaleW95 {
  width: 95%;
}

.scaleW100 {
  width: 100%;
}

/* XXX Scale Settings end XXX*/




/*
XXX XXX XXX XXX XXX XXX XXX XXX XXX XXX XXX XXX
NOTE Themes XXX XXX XXX XXX XXX XXX XXX XXX XXX XXX XXX XXX XXX
XXX XXX XXX XXX XXX XXX XXX XXX XXX XXX XXX XXX
*/




/*
XXX XXX XXX XXX XXX XXX XXX XXX XXX XXX XXX XXX
NOTE Theme default XXX XXX XXX XXX XXX XXX XXX 
XXX XXX XXX XXX XXX XXX XXX XXX XXX XXX XXX XXX
*/
body,
.default body {
  background: black;
}

#greeting,
#gbNameSetupDiv,
#gcBackupDiv,
#acPresetConfig,
#settlePresetConfig,
.default #greeting,
.default #gbNameSetupDiv,
.default #gcBackupDiv,
.default #acPresetConfig,
.default #settlePresetConfig {
  background: rgba(0, 0, 0, 0.95);
}

#innerGreet,
.default #innerGreet {
  color: #402410;
  background-color: #eadfbd;
  box-shadow: inset 2px -2px 7px #6B6657, inset -2px 2px 7px #F7ECC8;
}


#noLocalError,
.default #noLocalError {
  background-color: red;
  color: black;
}

#languageSelect,
.default #languageSelect {
  color: #402410;
  background: #E3770B;
  font-weight: bold;
  border: 0;
}

#acScaleOuterDiv,
.default #acScaleOuterDiv {
  background: rgba(0, 0, 0, 0.5);
}

.scaleButtons,
.default .scaleButtons {
  color: #FFFFFF;
  background-color: #1D3B75;
  box-shadow: inset -2px 2px 7px #3E7BF5, inset 2px -2px 7px #0D1B36;
}

.scaleButtons:active,
.default .scaleButtons:active {
  background-color: #936F57;
}

.buttonShadeDefault,
.default .buttonShadeDefault {

  color: #d2bd91;
  background-color: #632F17;
  box-shadow: inset -2px 2px 7px #B05328, inset 2px -2px 7px #291309;
}


.acButtonShadeMarked,
.default .acButtonShadeMarked {
  color: #402410;
  background-color: #a29123;
  box-shadow: inset -2px 2px 7px #ccb944, inset 2px -2px 7px #796c16;
  
}

.inputShadeDefault,
.helpPopup,
.default .inputShadeDefault,
.default .helpPopup {
  color: #402410;
  background-color: #eadfbd;
  box-shadow: inset 2px -2px 7px #F7ECC8, inset -2px 2px 7px #6B6657;
}

.helpPopup,
.default .helpPopup {
  z-index: 5;
  border: 1px solid black;
}

.acInputShadeMarked,
.default .acInputShadeMarked {
  background-color: #FAE458;
  box-shadow: inset 2px -2px 7px #FBEFA3, inset -2px 2px 7px #7A702B;
}

.acPlaceExternal,
.default .acPlaceExternal {
  background-color: rgba(234, 123, 89, 1);
}

.buttonShadeDefault:focus,
.inputShadeDefault:focus,
.default .buttonShadeDefault:focus,
.default .inputShadeDefault:focus {
  outline: none;
}

.buttonShadeDefault:active,
.default .buttonShadeDefault:active {
  background: #3D2003;
}

input::placeholder,
.default input::placeholder {
  color: #f00 !important;
}

input:-ms-input-placeholder,
.default input:-ms-input-placeholder {
  color: #f00 !important;
}

a:link,
.default a:link {
  color: #402410;
}

a:visited,
.default a:visited {
  color: #5f2216;
}

a:hover,
.default a:hover {
  color: #AB3D27;
}

.obWarning,
.default .obWarning {
  color: #DD4040;
}

.defaultText,
.default .defaultText {
  color: #eadfbd;
}

#loading,
.default #loading {
  font-size: 4rem;
  color: #E3770B;
}

.darkText,
.default.darkText {
  color: #402410
}

.hintText,
.default .hintText {
  color: #DB7360;
}

.errorText,
.default .errorText {
  color: red;
}

.passedText,
.default .passedText {
  color: green;
}

#footer,
.default #footer {
  background-color: #d2bd91;
  z-index: 2;
}

.subMenuButton,
.default .subMenuButton {
  color: #eadfbd;
  background-color: #964f08;
  display: block;
  box-shadow: inset -2px 2px 7px #E3770B, inset 2px -2px 7px #572E04;
}

.settleStockCheckText,
.default .settleStockCheckText {
  background: #00dd00;
}


/* XXX Colors Settlement start XXX*/

#setButtonCViking,
.default #setButtonCViking {
  color: black;
  background: #296399;
  box-shadow: inset -5px 5px 7px #577999, inset 5px -5px 7px #15324D;
}

#setButtonCJapan,
.default #setButtonCJapan {
  color: black;
  background: #5C8F51;
  box-shadow: inset -5px 5px 7px #5EC248, inset 5px -5px 7px #39752B;
}

#setButtonCEgypt,
.default #setButtonCEgypt {
  color: black;
  background: #ab6133;
  box-shadow: inset -5px 5px 7px #DE8852, inset 5px -5px 7px #915936;
}

#setButtonCAztec,
.default #setButtonCAztec {
  color: black;
  background: #A22720;
  box-shadow: inset -5px 5px 7px #DB433B, inset 5px -5px 7px #5C1C19;
}

#setButtonCMughal,
.default #setButtonCMughal {
  color: black;
  background: #8600b3;
  box-shadow: inset -5px 5px 7px #df80ff, inset 5px -5px 7px #730099;
}

.setResearchTableBody tr:nth-child(odd),
#setQuestTableBody tr:nth-child(odd),
.default .setResearchTableBody tr:nth-child(odd),
.default #setQuestTableBody tr:nth-child(odd) {
  background: #d2bd91;
}

.setResearchTableBody th,
.setResearchHead td,
.setResearchHead th,
.default .setResearchTableBody th,
.default .setResearchHead td,
.default .setResearchHead th {
  border: 1px solid black;
  background: #eadfbd;
}

.setTDProgress,
#setQuestHeadTable,
#setQuestTableBody tr,
.setResearchTableBody tr,
.default .setTDProgress,
.default #setQuestHeadTable,
.default #setQuestTableBody tr,
.default .setResearchTableBody tr {
  background: #eadfbd;
}

.setResearchTableBody td,
.default .setResearchTableBody td {
  border: 1px solid #402410;
}


.delText,
.default .delText {
  text-decoration: line-through;
  color: #555;
}

/* XXX Colors Settlement end XXX*/

/* XXX Colors Setup start XXX*/

.AddBtn,
#gbNameSetupBtnOk,
.acFavConfigBtnActive,
.default.AddBtn,
.default #gbNameSetupBtnOk,
.default .acFavConfigBtnActive {
  color: black;
  background-color: #40DD40;
  box-shadow: inset -2px 2px 7px #a0ffa0, inset 2px -2px 7px #206020;
}

.delBtn,
.presetBtnGB,
#gbNameSetupBtnCancel,
.default .delBtn,
.default .presetBtnGB,
.default #gbNameSetupBtnCancel {
  color: black;
  background-color: #DD4040;
  box-shadow: inset -2px 2px 7px #ffa0a0, inset 2px -2px 7px #602020;
}

#gbNameSetupBtnReset,
.acFavConfigBtnInactive,
.default #gbNameSetupBtnReset,
.default .acFavConfigBtnInactive {
  color: black;
  background-color: #FFBF00;
  color: black;
  box-shadow: inset -2px 2px 7px #FFD24D, inset 2px -2px 7px #806000;
}

#gbNameSetupTableDiv,
.default #gbNameSetupTableDiv {
  background-color: #d2bd91;
  box-shadow: inset -2px 2px 7px #DEC899, inset 2px -2px 7px #524A38;
}

/* XXX Colors Setup end XXX*/







/*
XXX XXX XXX XXX XXX XXX XXX XXX XXX XXX XXX XXX
NOTE Theme Mono Classic XXX XXX XXX XXX XXX XXX 
XXX XXX XXX XXX XXX XXX XXX XXX XXX XXX XXX XXX
*/

.classicMono body {
  background: black;
}

.classicMono #greeting,
.classicMono #gbNameSetupDiv,
.classicMono #gcBackupDiv,
.classicMono #acPresetConfig,
.classicMono #settlePresetConfig {
  background: rgba(0, 0, 0, 0.95);
}

.classicMono #innerGreet {
  color: black;
  background-color: AntiqueWhite;
  box-shadow: none;
}



.classicMono #noLocalError {
  background-color: red;
  color: black;
}

.classicMono #languageSelect {
  color: black;
  background: AntiqueWhite;
  font-weight: bold;
  border: 1px solid black;
}

.classicMono #acScaleOuterDiv {
  background: rgba(0, 0, 0, 0.5);
}

.classicMono .scaleButtons {
  color: #FFFFFF;
  background-color: #1D3B75;
  box-shadow: none;
}

.classicMono .scaleButtons:active {
  background-color: #936F57;
}

.classicMono .buttonShadeDefault{
  color: black;
  background-color: AntiqueWhite;
  border: 1px solid black;
  box-shadow: none;
}

.classicMono .acButtonShadeMarked {
  color: black;
  background-color: #FAE458;
  box-shadow: none;
}

.classicMono .inputShadeDefault,
.classicMono .helpPopup {
  color: black;
  background-color: AntiqueWhite;
  box-shadow: none;
}

.classicMono .helpPopup {
  z-index: 5;
  border: 1px solid black;
}

.classicMono .acInputShadeMarked {
  background-color: #FAE458;
  box-shadow: none;
}

.classicMono .acPlaceExternal {
  background-color: rgba(234, 123, 89, 1);
}

.classicMono .buttonShadeDefault:focus,
.classicMono .inputShadeDefault:focus {
  outline: none;
}

.classicMono .buttonShadeDefault:active {
  background: antiquewhite;
}

.classicMono input::placeholder {
  color: #f00 !important;
}

.classicMono input:-ms-input-placeholder {
  color: #f00 !important;
}

.classicMono a:link {
  color: black;
}

.classicMono a:visited {
  color: black;
}

.classicMono a:hover {
  color: #AB3D27;
}


.classicMono .obWarning {
  color: #DD4040;
}

.classicMono .defaultText {
  color: AntiqueWhite;
}

.classicMono #loading {
  font-size: 4rem;
  color: AntiqueWhite;
}

.classicMono .darkText {
  color: black
}

.classicMono .hintText {
  color: #e55f00;
}

.classicMono .errorText {
  color: red;
}

.classicMono .passedText {
  color: green;
}


.classicMono #footer {
  background-color: AntiqueWhite;
  z-index: 2;
}

.classicMono .subMenuButton {
  color: black;
  background-color: AntiqueWhite;
  display: block;
  border: 1px solid black;
  box-shadow: none;
}

.classicMono .settleStockCheckText {
  background: #00dd00;
}


/* XXX Colors Settlement start XXX*/

.classicMono #setButtonCViking {
  color: black;
  background: #296399;
  box-shadow: none;
}

.classicMono #setButtonCJapan {
  color: black;
  background: #5C8F51;
  box-shadow: none;
}

.classicMono #setButtonCEgypt {
  color: black;
  background: #ab6133;
  box-shadow: none;
}

.classicMono #setButtonCAztec {
  color: black;
  background: #A22720;
  box-shadow: none;
}

.classicMono #setButtonCMughal {
  color: black;
  background: #8600b3;
  box-shadow: none;
}


.classicMono .setResearchTableBody tr:nth-child(odd),
.classicMono #setQuestTableBody tr:nth-child(odd) {
  background: AntiqueWhite;
}

.classicMono .setResearchTableBody th,
.classicMono .setResearchHead td,
.classicMono .setResearchHead th {
  border: 1px solid black;
  background: AntiqueWhite;
}

.classicMono .setTDProgress,
.classicMono #setQuestHeadTable,
.classicMono #setQuestTableBody tr,
.classicMono .setResearchTableBody tr {
  background: AntiqueWhite;
}

.classicMono .setResearchTableBody td {
  border: 1px solid black;
}



.classicMono .delText {
  text-decoration: line-through;
  color: #555;
}

/* XXX Colors Settlement end XXX*/

/* XXX Colors Setup start XXX*/

.classicMono .AddBtn,
.classicMono #gbNameSetupBtnOk,
.classicMono .acFavConfigBtnActive {
  color: black;
  background-color: #40DD40;
  box-shadow: none;
}

.classicMono .delBtn,
.classicMono .presetBtnGB,
.classicMono #gbNameSetupBtnCancel {
  color: black;
  background-color: #DD4040;
  box-shadow: none;
}

.classicMono #gbNameSetupBtnReset,
.classicMono .acFavConfigBtnInactive {
  color: black;
  background-color: #FFBF00;
  box-shadow: none;
}

.classicMono #gbNameSetupTableDiv {
  background-color: #d2bd91;
  box-shadow: none;
}

/* XXX Colors Setup end XXX*/






/*
XXX XXX XXX XXX XXX XXX XXX XXX XXX XXX XXX XXX
NOTE Theme skyBlue XXX XXX XXX XXX XXX XXX XXX 
XXX XXX XXX XXX XXX XXX XXX XXX XXX XXX XXX XXX
*/

.skyBlue body {
  background: black;
}

.skyBlue #greeting,
.skyBlue #gbNameSetupDiv,
.skyBlue #gcBackupDiv,
.skyBlue #acPresetConfig,
.skyBlue #settlePresetConfig {
  background: rgba(0, 0, 0, 0.95);
}

.skyBlue #innerGreet {
  /* color: #031f2c;
  background-color: #217196;
  box-shadow: inset 2px -2px 7px #042636, inset -2px 2px 7px #5ca6c9; */
  color: #031f2c;
  background-color: #6fb7d8;
  box-shadow: inset 2px -2px 7px #98a4aa, inset -2px 2px 7px #0f5779;
}



.skyBlue #noLocalError {
  background-color: red;
  color: black;
}

.skyBlue #languageSelect {
  color: #031f2c;
  background: #5ca6c9;
  font-weight: bold;
  border: 0;
}

.skyBlue #acScaleOuterDiv {
  background: rgba(0, 0, 0, 0.5);
}

.skyBlue .scaleButtons {
  color: #FFFFFF;
  background-color: #1D3B75;
  box-shadow: inset -2px 2px 7px #3E7BF5, inset 2px -2px 7px #0D1B36;
}

.skyBlue .scaleButtons:active {
  background-color: #936F57;
}

.skyBlue .buttonShadeDefault {
  color: #031f2c;
  background: #217196;
  box-shadow: inset -2px 2px 7px #5ca6c9, inset 2px -2px 7px #042636;
}

.skyBlue .acButtonShadeMarked {
  color: #402410;
  background-color: #9e9246;
  box-shadow: inset -2px 2px 7px #e7db88, inset 2px -2px 7px #443e15;
}

.skyBlue .inputShadeDefault,
.skyBlue .helpPopup {
  /* color: #031f2c;
  background-color: #217196;
  box-shadow: inset 2px -2px 7px #5ca6c9, inset -2px 2px 7px #042636; */
  color: #031f2c;
  background-color: #6fb7d8;
  box-shadow: inset 2px -2px 7px #86c0dd,
    inset -2px 2px 7px #0f5779;
}

.skyBlue .helpPopup {
  z-index: 5;
  border: 1px solid black;
}

.skyBlue .acInputShadeMarked {
  /* background-color: #9e9246;
  box-shadow: inset 2px -2px 7px #e7db88, inset -2px 2px 7px #443e15; */
  background-color: #dfd69c;
  box-shadow: inset 2px -2px 7px #ded7aa, inset -2px 2px 7px #57512d;
}

.skyBlue .acPlaceExternal {
  background-color: rgba(234, 123, 89, 1);
}

.skyBlue .buttonShadeDefault:focus,
.skyBlue .inputShadeDefault:focus {
  outline: none;
}

.skyBlue .buttonShadeDefault:active {
  background: #7694a1;
}

.skyBlue input::placeholder {
  color: #f00 !important;
}

.skyBlue input:-ms-input-placeholder {
  color: #f00 !important;
}

.skyBlue a:link {
  color: #031f2c;
}

.skyBlue a:visited {
  color: #063449;
}

.skyBlue a:hover {
  color: #5ca6c9;
}


.skyBlue .obWarning {
  color: #DD4040;
}

.skyBlue .defaultText {
  color: #6fb7d8;
}

.skyBlue #loading {
  font-size: 4rem;
  color: #217196;
}

.skyBlue.darkText {
  color: #031f2c
}

.skyBlue .hintText {
  color: #904900;
}

.skyBlue .errorText {
  color: rgb(188, 0, 0);
}

.skyBlue .passedText {
  color: green;
}


.skyBlue #footer {
  background-color: #6fb7d8;
  z-index: 2;
}

.skyBlue .subMenuButton {
  color: #031f2c;
  background: #2786b3;
  box-shadow: inset -2px 2px 7px #5ca6c9, inset 2px -2px 7px #042636;
  display: block;
}


.skyBlue .settleStockCheckText {
  background: green;
}


/* XXX Colors Settlement start XXX*/

.skyBlue #setButtonCViking {
  color: black;
  background: #296399;
  box-shadow: inset -5px 5px 7px #577999, inset 5px -5px 7px #15324D;
}

.skyBlue #setButtonCJapan {
  color: black;
  background: #5C8F51;
  box-shadow: inset -5px 5px 7px #5EC248, inset 5px -5px 7px #39752B;
}

.skyBlue #setButtonCEgypt {
  color: black;
  background: #ab6133;
  box-shadow: inset -5px 5px 7px #DE8852, inset 5px -5px 7px #915936;
}

.skyBlue #setButtonCAztec {
  color: black;
  background: #A22720;
  box-shadow: inset -5px 5px 7px #DB433B, inset 5px -5px 7px #5C1C19;
}

.skyBlue #setButtonCMughal {
  color: black;
  background: #8600b3;
  box-shadow: inset -5px 5px 7px #df80ff, inset 5px -5px 7px #730099;
}


.skyBlue .setResearchTableBody tr:nth-child(odd),
.skyBlue #setQuestTableBody tr:nth-child(odd) {
  background: #2786b3;
  ;
}

.skyBlue .setResearchTableBody th,
.skyBlue .setResearchHead td,
.skyBlue .setResearchHead th {
  border: 1px solid black;
  background: #217196;
}

.skyBlue .setTDProgress,
.skyBlue #setQuestHeadTable,
.skyBlue #setQuestTableBody tr,
.skyBlue .setResearchTableBody tr {
  background: #217196;
}

.skyBlue .setResearchTableBody td {
  border: 1px solid #402410;
}



.skyBlue .delText {
  text-decoration: line-through;
  color: #555;
}

/* XXX Colors Settlement end XXX*/

/* XXX Colors Setup start XXX*/

.skyBlue.AddBtn,
.skyBlue #gbNameSetupBtnOk,
.skyBlue .acFavConfigBtnActive {
  color: black;
  background-color: #40DD40;
  box-shadow: inset -2px 2px 7px #a0ffa0, inset 2px -2px 7px #206020;
}

.skyBlue .delBtn,
.skyBlue .presetBtnGB,
.skyBlue #gbNameSetupBtnCancel {
  color: black;
  background-color: #DD4040;
  box-shadow: inset -2px 2px 7px #ffa0a0, inset 2px -2px 7px #602020;
}

.skyBlue #gbNameSetupBtnReset,
.skyBlue .acFavConfigBtnInactive {
  color: black;
  background-color: #FFBF00;
  color: black;
  box-shadow: inset -2px 2px 7px #FFD24D, inset 2px -2px 7px #806000;
}

.skyBlue #gbNameSetupTableDiv {
  color: #031f2c;
  background: #2786b3;
  box-shadow: inset -2px 2px 7px #5ca6c9, inset 2px -2px 7px #042636;
}

/* XXX Colors Setup end XXX*/





/*
XXX XXX XXX XXX XXX XXX XXX XXX XXX XXX XXX XXX
NOTE Theme XmasHoHoHo XXX XXX XXX XXX XXX XXX XXX 
XXX XXX XXX XXX XXX XXX XXX XXX XXX XXX XXX XXX
*/

.XmasHoHoHo body {
  background: black;
}

.XmasHoHoHo #greeting,
.XmasHoHoHo #gbNameSetupDiv,
.XmasHoHoHo #gcBackupDiv,
.XmasHoHoHo #acPresetConfig,
.XmasHoHoHo #settlePresetConfig {
  background: rgba(0, 0, 0, 0.95);
}

.XmasHoHoHo #innerGreet {
  /* color: #031f2c;
  background-color: #217196;
  box-shadow: inset 2px -2px 7px #042636, inset -2px 2px 7px #5ca6c9; */
  color: #000000;
  background-color: #ff3e3e;
  box-shadow: inset 2px -2px 7px #ff5252, inset -2px 2px 7px #410c0c;
}

.XmasHoHoHo #noLocalError {
  background-color: black;
  color: red;
}

.XmasHoHoHo #languageSelect {
  color: #000000;
  background: #105816;
  font-weight: bold;
  border: 0;
}

.XmasHoHoHo #acScaleOuterDiv {
  background: rgba(0, 0, 0, 0.5);
}

.XmasHoHoHo .scaleButtons {
  color: #FFFFFF;
  background-color: #1D3B75;
  box-shadow: inset -2px 2px 7px #3E7BF5, inset 2px -2px 7px #0D1B36;
}

.XmasHoHoHo .scaleButtons:active {
  background-color: #936F57;
}

.XmasHoHoHo .buttonShadeDefault{
  color: #000000;
  background-color: #3aa83c;
  box-shadow: inset -2px 2px 7px #20da23, inset 2px -2px 7px #004701;
}

.XmasHoHoHo .acButtonShadeMarked {
  color: #ffffff;
  background-color: #005001;
  box-shadow: inset -2px 2px 7px #007802, inset 2px -2px 7px #002a01;
}

.XmasHoHoHo .inputShadeDefault,
.XmasHoHoHo .helpPopup {
  /* color: #031f2c;
  background-color: #217196;
  box-shadow: inset 2px -2px 7px #5ca6c9, inset -2px 2px 7px #042636; */
  color: #000000;
  background-color: #ff3e3e;
  box-shadow: inset 2px -2px 7px #ff5252, inset -2px 2px 7px #410c0c;
}

.XmasHoHoHo .helpPopup {
  z-index: 5;
  border: 1px solid black;
}

.XmasHoHoHo .acInputShadeMarked {
  /* background-color: #9e9246;
  box-shadow: inset 2px -2px 7px #e7db88, inset -2px 2px 7px #443e15; */
  color: white;
  background-color: #810000;
  box-shadow: inset 2px -2px 7px #af0000, inset -2px 2px 7px #2e0000;
}

.XmasHoHoHo .acPlaceExternal {
  background-color: rgb(3 85 163);
}

.XmasHoHoHo .buttonShadeDefault:focus,
.XmasHoHoHo .inputShadeDefault:focus {
  outline: none;
}

.XmasHoHoHo .buttonShadeDefault:active {
  background: #57ac58;
}

.XmasHoHoHo input::placeholder {
  color: black !important;
}

.XmasHoHoHo input:-ms-input-placeholder {
  color: black !important;
}

.XmasHoHoHo a:link {
  color: white;
}

.XmasHoHoHo a:visited {
  color: white;
}

.XmasHoHoHo a:hover {
  color: white;
}


.XmasHoHoHo .obWarning {
  color: #DD4040;
}

.XmasHoHoHo .defaultText {
  color: #3aa83c;
}

.XmasHoHoHo #loading {
  font-size: 4rem;
  color: #ff3e3e;
}

.XmasHoHoHo.darkText {
  color: #000000
}

.XmasHoHoHo .hintText {
  color: white;
}

.XmasHoHoHo .errorText {
  color: white;
}

.XmasHoHoHo .passedText {
  color: green;
}


.XmasHoHoHo #footer {
  background-color: #015f03;
  z-index: 2;
}

.XmasHoHoHo .subMenuButton {
  color: #000000;
  background-color: #00ce03;
  box-shadow: inset -2px 2px 7px #2ad62d, inset 2px -2px 7px #006102;
  display: block;
}


.XmasHoHoHo .settleStockCheckText {
  background: green;
}


/* XXX Colors Settlement start XXX*/

.XmasHoHoHo #setButtonCViking {
  color: black;
  background: #296399;
  box-shadow: inset -5px 5px 7px #577999, inset 5px -5px 7px #15324D;
}

.XmasHoHoHo #setButtonCJapan {
  color: black;
  background: #5C8F51;
  box-shadow: inset -5px 5px 7px #5EC248, inset 5px -5px 7px #39752B;
}

.XmasHoHoHo #setButtonCEgypt {
  color: black;
  background: #ab6133;
  box-shadow: inset -5px 5px 7px #DE8852, inset 5px -5px 7px #915936;
}

.XmasHoHoHo #setButtonCAztec {
  color: black;
  background: #A22720;
  box-shadow: inset -5px 5px 7px #DB433B, inset 5px -5px 7px #5C1C19;
}

.XmasHoHoHo #setButtonCMughal {
  color: black;
  background: #8600b3;
  box-shadow: inset -5px 5px 7px #df80ff, inset 5px -5px 7px #730099;
}


.XmasHoHoHo .setResearchTableBody tr:nth-child(odd),
.XmasHoHoHo #setQuestTableBody tr:nth-child(odd) {
  background: #ca3131;
  ;
}

.XmasHoHoHo .setResearchTableBody th,
.XmasHoHoHo .setResearchHead td,
.XmasHoHoHo .setResearchHead th {
  border: 1px solid black;
  background: #ff3e3e;
}

.XmasHoHoHo .setTDProgress,
.XmasHoHoHo #setQuestHeadTable,
.XmasHoHoHo #setQuestTableBody tr,
.XmasHoHoHo .setResearchTableBody tr {
  background: #ff3e3e;
}

.XmasHoHoHo .setResearchTableBody td {
  border: 1px solid #402410;
}



.XmasHoHoHo .delText {
  text-decoration: line-through;
  color: rgb(190, 190, 190);
}

/* XXX Colors Settlement end XXX*/

/* XXX Colors Setup start XXX*/

.XmasHoHoHo.AddBtn,
.XmasHoHoHo #gbNameSetupBtnOk,
.XmasHoHoHo .acFavConfigBtnActive {
  color: black;
  background-color: #40DD40;
  box-shadow: inset -2px 2px 7px #a0ffa0, inset 2px -2px 7px #206020;
}

.XmasHoHoHo .delBtn,
.XmasHoHoHo .presetBtnGB,
.XmasHoHoHo #gbNameSetupBtnCancel {
  color: black;
  background-color: #DD4040;
  box-shadow: inset -2px 2px 7px #ffa0a0, inset 2px -2px 7px #602020;
}

.XmasHoHoHo #gbNameSetupBtnReset,
.XmasHoHoHo .acFavConfigBtnInactive {
  color: black;
  background-color: #FFBF00;
  color: black;
  box-shadow: inset -2px 2px 7px #FFD24D, inset 2px -2px 7px #806000;
}

.XmasHoHoHo #gbNameSetupTableDiv {
  color: #000000;
  background-color: #9c1f1f;
  box-shadow: inset 2px -2px 7px #b73a3a, inset -2px 2px 7px #510808;
}

/* XXX Colors Setup end XXX*/


/*
XXX XXX XXX XXX XXX XXX XXX XXX XXX XXX XXX XXX
NOTE Theme PurpleTint XXX XXX XXX XXX XXX XXX XXX 
XXX XXX XXX XXX XXX XXX XXX XXX XXX XXX XXX XXX
*/

.PurpleTint body {
  background: #2E1114;
}

.PurpleTint #greeting,
.PurpleTint #gbNameSetupDiv,
.PurpleTint #gcBackupDiv,
.PurpleTint #acPresetConfig,
.PurpleTint #settlePresetConfig {
  background: rgba(0, 0, 0, 0.95);
}

.PurpleTint #innerGreet {
  /* color: #031f2c;
  background-color: #217196;
  box-shadow: inset 2px -2px 7px #042636, inset -2px 2px 7px #5ca6c9; */
  color: #2E1114;
  background-color: #ADADAD;
  box-shadow: inset 2px -2px 7px #c6c6c6, inset -2px 2px 7px #6c6c6c;
}

.PurpleTint #noLocalError {
  background-color: black;
  color: red;
}

.PurpleTint #languageSelect {
  color: #adadad;
  background: #64485c;
  font-weight: bold;
  border: 0;
}

.PurpleTint #acScaleOuterDiv {
  background: rgba(0, 0, 0, 0.5);
}

.PurpleTint .scaleButtons {
  color: #FFFFFF;
  background-color: #1D3B75;
  box-shadow: inset -2px 2px 7px #3E7BF5, inset 2px -2px 7px #0D1B36;
}

.PurpleTint .scaleButtons:active {
  background-color: #936F57;
}

.PurpleTint .buttonShadeDefault {
  color: #2E1114;
  background-color: #64485C;
  box-shadow: inset -2px 2px 7px #87637d, inset 2px -2px 7px #3c2b37;
}

.PurpleTint .acButtonShadeMarked {
  color: #2E1114;
  background-color: #83677B;
  box-shadow: inset -2px 2px 7px #b58fab, inset 2px -2px 7px #5c4756;
}

.PurpleTint .inputShadeDefault,
.PurpleTint .helpPopup {
  /* color: #031f2c;
  background-color: #217196;
  box-shadow: inset 2px -2px 7px #5ca6c9, inset -2px 2px 7px #042636; */
  color: #2E1114;
  background-color: #ADADAD;
  box-shadow: inset 2px -2px 7px #c6c6c6, inset -2px 2px 7px #6c6c6c;
}

.PurpleTint .helpPopup {
  z-index: 5;
  border: 1px solid black;
}

.PurpleTint .acInputShadeMarked {
  /* background-color: #9e9246;
  box-shadow: inset 2px -2px 7px #e7db88, inset -2px 2px 7px #443e15; */
  color: #2E1114;
  background-color: #cfcfcf;
  box-shadow: inset 2px -2px 7px #e7e7e7, inset -2px 2px 7px #8a8a8a;
}

.PurpleTint .acPlaceExternal {
  background-color: #ca508a;
}

.PurpleTint .buttonShadeDefault:focus,
.PurpleTint .inputShadeDefault:focus {
  outline: none;
}

.PurpleTint .buttonShadeDefault:active {
  background: #ADADAD;
}

.PurpleTint input::placeholder {
  color: black !important;
}

.PurpleTint input:-ms-input-placeholder {
  color: black !important;
}

.PurpleTint a:link {
  color: #2E1114;
}

.PurpleTint a:visited {
  color: #501B1D;
}

.PurpleTint a:hover {
  color: #64485C;
}


.PurpleTint .obWarning {
  color: #ee0000;
}

.PurpleTint .defaultText {
  color: #ADADAD;
}

.PurpleTint #loading {
  font-size: 4rem;
  color: #ADADAD;
}

.PurpleTint.darkText {
  color: #2E1114
}

.PurpleTint .hintText {
  color: #ffd400;
}

.PurpleTint .errorText {
  color: #ee0000;
}

.PurpleTint .passedText {
  color: green;
}


.PurpleTint #footer {
  background-color: #ADADAD;
  z-index: 2;
}

.PurpleTint .subMenuButton {
  color: #2E1114;
  background-color: #83677B;
  box-shadow: inset -2px 2px 7px #ae8da5, inset 2px -2px 7px #513f4c;
  display: block;
}


.PurpleTint .settleStockCheckText {
  background: #61a861;
}


/* XXX Colors Settlement start XXX*/

.PurpleTint #setButtonCViking {
  color: black;
  background: #296399;
  box-shadow: inset -5px 5px 7px #577999, inset 5px -5px 7px #15324D;
}

.PurpleTint #setButtonCJapan {
  color: black;
  background: #5C8F51;
  box-shadow: inset -5px 5px 7px #5EC248, inset 5px -5px 7px #39752B;
}

.PurpleTint #setButtonCEgypt {
  color: black;
  background: #ab6133;
  box-shadow: inset -5px 5px 7px #DE8852, inset 5px -5px 7px #915936;
}

.PurpleTint #setButtonCAztec {
  color: black;
  background: #A22720;
  box-shadow: inset -5px 5px 7px #DB433B, inset 5px -5px 7px #5C1C19;
}

.PurpleTint #setButtonCMughal {
  color: black;
  background: #8600b3;
  box-shadow: inset -5px 5px 7px #df80ff, inset 5px -5px 7px #730099;
}


.PurpleTint .setResearchTableBody tr:nth-child(odd),
.PurpleTint #setQuestTableBody tr:nth-child(odd) {
  background: #919191;
  ;
}

.PurpleTint .setResearchTableBody th,
.PurpleTint .setResearchHead td,
.PurpleTint .setResearchHead th {
  border: 1px solid black;
  background: #ADADAD;
}

.PurpleTint .setTDProgress,
.PurpleTint #setQuestHeadTable,
.PurpleTint #setQuestTableBody tr,
.PurpleTint .setResearchTableBody tr {
  background: #ADADAD;
}

.PurpleTint .setResearchTableBody td {
  border: 1px solid #2E1114;
}



.PurpleTint .delText {
  text-decoration: line-through;
  color: #501B1D;
}

/* XXX Colors Settlement end XXX*/

/* XXX Colors Setup start XXX*/

.PurpleTint.AddBtn,
.PurpleTint #gbNameSetupBtnOk,
.PurpleTint .acFavConfigBtnActive {
  color: black;
  background-color: #40DD40;
  box-shadow: inset -2px 2px 7px #a0ffa0, inset 2px -2px 7px #206020;
}

.PurpleTint .delBtn,
.PurpleTint .presetBtnGB,
.PurpleTint #gbNameSetupBtnCancel {
  color: black;
  background-color: #DD4040;
  box-shadow: inset -2px 2px 7px #ffa0a0, inset 2px -2px 7px #602020;
}

.PurpleTint #gbNameSetupBtnReset,
.PurpleTint .acFavConfigBtnInactive {
  color: black;
  background-color: #FFBF00;
  color: black;
  box-shadow: inset -2px 2px 7px #FFD24D, inset 2px -2px 7px #806000;
}

.PurpleTint #gbNameSetupTableDiv {
  color: #2E1114;
  background-color: #64485C;
  box-shadow: inset -2px 2px 7px #87637d, inset 2px -2px 7px #3c2b37;

}

/* XXX Colors Setup end XXX*/

/*
XXX XXX XXX XXX XXX XXX XXX XXX XXX XXX XXX XXX
NOTE Theme CeriseTint XXX XXX XXX XXX XXX XXX XXX 
XXX XXX XXX XXX XXX XXX XXX XXX XXX XXX XXX XXX
*/

.CeriseTint body {
  background: #1a0e28;
}

.CeriseTint #greeting,
.CeriseTint #gbNameSetupDiv,
.CeriseTint #gcBackupDiv,
.CeriseTint #acPresetConfig,
.CeriseTint #settlePresetConfig {
  background: rgba(0, 0, 0, 0.95);
}

.CeriseTint #innerGreet {
  color: #1A0E28;
  background-color: #8265A7;
  box-shadow: inset 2px -2px 7px #af8dda, inset -2px 2px 7px #553978;
}

.CeriseTint #noLocalError {
  background-color: black;
  color: red;
}

.CeriseTint #languageSelect {
  color: #2e1114;
  background: #d83f87;
  font-weight: bold;
  border: 0;
}

.CeriseTint #acScaleOuterDiv {
  background: rgba(0, 0, 0, 0.5);
}

.CeriseTint .scaleButtons {
  color: #FFFFFF;
  background-color: #1D3B75;
  box-shadow: inset -2px 2px 7px #3E7BF5, inset 2px -2px 7px #0D1B36;
}

.CeriseTint .scaleButtons:active {
  background-color: #936F57;
}

.CeriseTint .buttonShadeDefault {
  color: #2E1114;
  background-color: #D83F87;
  box-shadow: inset -2px 2px 7px #e55599, inset 2px -2px 7px #891a4e;
}

.CeriseTint .acButtonShadeMarked {
  color: #1A0E28;
  background-color: #8d3184;
  box-shadow: inset -2px 2px 7px #a94da0, inset 2px -2px 7px #681a60;
}

.CeriseTint .inputShadeDefault,
.CeriseTint .helpPopup {
  color: #1A0E28;
  background-color: #8265A7;
  box-shadow: inset 2px -2px 7px #af8dda, inset -2px 2px 7px #553978;
}

.CeriseTint .helpPopup {
  z-index: 5;
  border: 1px solid black;
}

.CeriseTint .acInputShadeMarked {
  color: #1A0E28;
  background-color: #A4B3B6;
  box-shadow: inset 2px -2px 7px #c6d7da, inset -2px 2px 7px #76898d;
}

.CeriseTint .acPlaceExternal {
  background-color: #ca508a;
}

.CeriseTint .buttonShadeDefault:focus,
.CeriseTint .inputShadeDefault:focus {
  outline: none;
}

.CeriseTint .buttonShadeDefault:active {
  background: #A4B3B6;
}

.CeriseTint input::placeholder {
  color: black !important;
}

.CeriseTint input:-ms-input-placeholder {
  color: black !important;
}

.CeriseTint a:link {
  color: #1A0E28;
}

.CeriseTint a:visited {
  color: #000000;
}

.CeriseTint a:hover {
  color: #1A0E28;
}


.CeriseTint .obWarning {
  color: #DD4040;
}

.CeriseTint .defaultText {
  color: #D83F87;
}

.CeriseTint #loading {
  font-size: 4rem;
  color: #D83F87;
}

.CeriseTint.darkText {
  color: #1A0E28
}

.CeriseTint .hintText {
  color: #ffd400;
}

.CeriseTint .errorText {
  color: #4a0000;
}

.CeriseTint .passedText {
  color: green;
}


.CeriseTint #footer {
  background-color: #8265A7;
  z-index: 2;
}

.CeriseTint .subMenuButton {
  color: #2E1114;
  background-color: #D83F87;
  box-shadow: inset -2px 2px 7px #e55599, inset 2px -2px 7px #891a4e;
  display: block;
}


.CeriseTint .settleStockCheckText {
  background: #357f35;
}


/* XXX Colors Settlement start XXX*/

.CeriseTint #setButtonCViking {
  color: black;
  background: #296399;
  box-shadow: inset -5px 5px 7px #577999, inset 5px -5px 7px #15324D;
}

.CeriseTint #setButtonCJapan {
  color: black;
  background: #5C8F51;
  box-shadow: inset -5px 5px 7px #5EC248, inset 5px -5px 7px #39752B;
}

.CeriseTint #setButtonCEgypt {
  color: black;
  background: #ab6133;
  box-shadow: inset -5px 5px 7px #DE8852, inset 5px -5px 7px #915936;
}

.CeriseTint #setButtonCAztec {
  color: black;
  background: #A22720;
  box-shadow: inset -5px 5px 7px #DB433B, inset 5px -5px 7px #5C1C19;
}

.CeriseTint #setButtonCMughal {
  color: black;
  background: #8600b3;
  box-shadow: inset -5px 5px 7px #df80ff, inset 5px -5px 7px #730099;
}


.CeriseTint .setResearchTableBody tr:nth-child(odd),
.CeriseTint #setQuestTableBody tr:nth-child(odd) {
  background: #8265A7;
  ;
}

.CeriseTint .setResearchTableBody th,
.CeriseTint .setResearchHead td,
.CeriseTint .setResearchHead th {
  border: 1px solid black;
  background: #D83F87;
}

.CeriseTint .setTDProgress,
.CeriseTint #setQuestHeadTable,
.CeriseTint #setQuestTableBody tr,
.CeriseTint .setResearchTableBody tr {
  background: #D83F87;
}

.CeriseTint .setResearchTableBody td {
  border: 1px solid #1A0E28;
}



.CeriseTint .delText {
  text-decoration: line-through;
  color: #A4B3B6;
}

/* XXX Colors Settlement end XXX*/

/* XXX Colors Setup start XXX*/

.CeriseTint.AddBtn,
.CeriseTint #gbNameSetupBtnOk,
.CeriseTint .acFavConfigBtnActive {
  color: black;
  background-color: #40DD40;
  box-shadow: inset -2px 2px 7px #a0ffa0, inset 2px -2px 7px #206020;
}

.CeriseTint .delBtn,
.CeriseTint .presetBtnGB,
.CeriseTint #gbNameSetupBtnCancel {
  color: black;
  background-color: #DD4040;
  box-shadow: inset -2px 2px 7px #ffa0a0, inset 2px -2px 7px #602020;
}

.CeriseTint #gbNameSetupBtnReset,
.CeriseTint .acFavConfigBtnInactive {
  color: black;
  background-color: #FFBF00;
  color: black;
  box-shadow: inset -2px 2px 7px #FFD24D, inset 2px -2px 7px #806000;
}

.CeriseTint #gbNameSetupTableDiv {
  color: #1A0E28;
  background-color: #A4B3B6;
  box-shadow: inset 2px -2px 7px #c6d7da, inset -2px 2px 7px #76898d;

}

/* XXX Colors Setup end XXX*/




/*
XXX XXX XXX XXX XXX XXX XXX XXX XXX XXX XXX XXX
NOTE Theme LightCyan XXX XXX XXX XXX XXX XXX XXX 
XXX XXX XXX XXX XXX XXX XXX XXX XXX XXX XXX XXX
*/

.LightCyan body {
  background: #D1E8E2;
}

.LightCyan #greeting,
.LightCyan #gbNameSetupDiv,
.LightCyan #gcBackupDiv,
.LightCyan #acPresetConfig,
.LightCyan #settlePresetConfig {
  background: rgba(0, 0, 0, 0.95);
}

.LightCyan #innerGreet {
  color: #2C3531;
  background-color: #D9B08C;
  box-shadow: inset 2px -2px 7px #f6d3b4, inset -2px 2px 7px #987353;
}

.LightCyan #noLocalError {
  background-color: black;
  color: red;
}

.LightCyan #languageSelect {
  color: #D1E8E2;
  background: #222f29;
  font-weight: bold;
  border: 0;
}

.LightCyan #acScaleOuterDiv {
  background: rgba(0, 0, 0, 0.5);
}

.LightCyan .scaleButtons {
  color: #FFFFFF;
  background-color: #1D3B75;
  box-shadow: inset -2px 2px 7px #3E7BF5, inset 2px -2px 7px #0D1B36;
}

.LightCyan .scaleButtons:active {
  background-color: #936F57;
}

.LightCyan .buttonShadeDefault {
  color: #D1E8E2;
  background-color: #222f29;
  box-shadow: inset -2px 2px 7px #5e786d, inset 2px -2px 7px #291309;
}

.LightCyan .acButtonShadeMarked {
  color: #D1E8E2;
  background-color: #116466;
  box-shadow: inset -2px 2px 7px #218b8d, inset 2px -2px 7px #073c3e;
}

.LightCyan .inputShadeDefault,
.LightCyan .helpPopup {
  color: #2C3531;
  background-color: #D9B08C;
  box-shadow: inset 2px -2px 7px #f6d3b4, inset -2px 2px 7px #987353;
}

.LightCyan .helpPopup {
  z-index: 5;
  border: 1px solid black;
}

.LightCyan .acInputShadeMarked {
  color: #2C3531;
  background-color: #fed7b2;
  box-shadow: inset 2px -2px 7px #ffe7d1, inset -2px 2px 7px #ffb977;
}

.LightCyan .acPlaceExternal {
  background-color: #10ce9c;
}

.LightCyan .buttonShadeDefault:focus,
.LightCyan .inputShadeDefault:focus {
  outline: none;
}

.LightCyan .buttonShadeDefault:active {
  background: #D9B08C;
}

.LightCyan input::placeholder {
  color: black !important;
}

.LightCyan input:-ms-input-placeholder {
  color: black !important;
}

.LightCyan a:link {
  color: #2C3531;
}

.LightCyan a:visited {
  color: #116466;
}

.LightCyan a:hover {
  color: #116466;
}


.LightCyan .obWarning {
  color: #DD4040;
}

.LightCyan .defaultText {
  color: #116466;
}

.LightCyan #loading {
  font-size: 4rem;
  color: #2C3531;
}

.LightCyan.darkText {
  color: #2C3531
}

.LightCyan .hintText {
  color: #076b51;
}

.LightCyan .errorText {
  color: #ff0000;
}

.LightCyan .passedText {
  color: green;
}


.LightCyan #footer {
  background-color: #D9B08C;
  z-index: 2;
}

.LightCyan .subMenuButton {
  color: #D1E8E2;
  background-color: #116466;
  display: block;
  box-shadow: inset -2px 2px 7px #2ca4a7, inset 2px -2px 7px #084041;
  display: block;
}



/* XXX Colors Settlement start XXX*/

.LightCyan #setButtonCViking {
  color: black;
  background: #296399;
  box-shadow: inset -5px 5px 7px #577999, inset 5px -5px 7px #15324D;
}

.LightCyan #setButtonCJapan {
  color: black;
  background: #5C8F51;
  box-shadow: inset -5px 5px 7px #5EC248, inset 5px -5px 7px #39752B;
}

.LightCyan #setButtonCEgypt {
  color: black;
  background: #ab6133;
  box-shadow: inset -5px 5px 7px #DE8852, inset 5px -5px 7px #915936;
}

.LightCyan #setButtonCAztec {
  color: black;
  background: #A22720;
  box-shadow: inset -5px 5px 7px #DB433B, inset 5px -5px 7px #5C1C19;
}

.LightCyan #setButtonCMughal {
  color: black;
  background: #8600b3;
  box-shadow: inset -5px 5px 7px #df80ff, inset 5px -5px 7px #730099;
}


.LightCyan .settleStockCheckText {
  background: #357f35;
}

.LightCyan .setResearchTableBody tr:nth-child(odd),
.LightCyan #setQuestTableBody tr:nth-child(odd) {
  background: #FFCB9A;
  ;
}

.LightCyan .setResearchTableBody th,
.LightCyan .setResearchHead td,
.LightCyan .setResearchHead th {
  border: 1px solid black;
  background: #D9B08C;
}

.LightCyan .setTDProgress,
.LightCyan #setQuestHeadTable,
.LightCyan #setQuestTableBody tr,
.LightCyan .setResearchTableBody tr {
  background: #D9B08C;
}

.LightCyan .setResearchTableBody td {
  border: 1px solid #1A0E28;
}



.LightCyan .delText {
  text-decoration: line-through;
  color: #209375;
}

/* XXX Colors Settlement end XXX*/

/* XXX Colors Setup start XXX*/

.LightCyan.AddBtn,
.LightCyan #gbNameSetupBtnOk,
.LightCyan .acFavConfigBtnActive {
  color: black;
  background-color: #40DD40;
  box-shadow: inset -2px 2px 7px #a0ffa0, inset 2px -2px 7px #206020;
}

.LightCyan .delBtn,
.LightCyan .presetBtnGB,
.LightCyan #gbNameSetupBtnCancel {
  color: black;
  background-color: #DD4040;
  box-shadow: inset -2px 2px 7px #ffa0a0, inset 2px -2px 7px #602020;
}

.LightCyan #gbNameSetupBtnReset,
.LightCyan .acFavConfigBtnInactive {
  color: black;
  background-color: #FFBF00;
  color: black;
  box-shadow: inset -2px 2px 7px #FFD24D, inset 2px -2px 7px #806000;
}

.LightCyan #gbNameSetupTableDiv {
  color: #2C3531;
  background-color: #D1E8E2;
  box-shadow: inset 2px -2px 7px #e7f5f1, inset -2px 2px 7px #a2cdc2;

}

/* XXX Colors Setup end XXX*/



/*
XXX XXX XXX XXX XXX XXX XXX XXX XXX XXX XXX XXX
NOTE Theme W311 XXX XXX XXX XXX XXX XXX XXX 
XXX XXX XXX XXX XXX XXX XXX XXX XXX XXX XXX XXX
*/

.W311 body {
  background: #008080;
}

.W311 #greeting,
.W311 #gbNameSetupDiv,
.W311 #gcBackupDiv,
.W311 #acPresetConfig,
.W311 #settlePresetConfig {
  background: rgba(0, 0, 0, 0.95);
}

.W311 #innerGreet {
  color: #000000;
  background-color: #D3D0C7;
  box-shadow: inset 2px -2px 7px #edeae1, inset -2px 2px 7px #938f82;
}

.W311 #noLocalError {
  background-color: black;
  color: red;
}

.W311 #languageSelect {
  color: #ffffff;
  background: #000082;
  font-weight: bold;
  border: 0;
}

.W311 #acScaleOuterDiv {
  background: rgba(0, 0, 0, 0.5);
}

.W311 .scaleButtons {
  color: #FFFFFF;
  background-color: #1D3B75;
  box-shadow: inset -2px 2px 7px #3E7BF5, inset 2px -2px 7px #0D1B36;
}

.W311 .scaleButtons:active {
  background-color: #936F57;
}

.W311 .buttonShadeDefault {
  color: #ffffff;
  background-color: #000082;
  box-shadow: inset -2px 2px 7px #0000be, inset 2px -2px 7px #000030;
}

.W311 .acButtonShadeMarked {
  color: #000000;
  background-color: #E8E887;
  box-shadow: inset 2px -2px 7px #f4f49d, inset -2px 2px 7px #bcbc30;
}

.W311 .inputShadeDefault,
.W311 .helpPopup {
  color: #000000;
  background-color: #D3D0C7;
  box-shadow: inset 2px -2px 7px #edeae1, inset -2px 2px 7px #938f82;
}

.W311 .helpPopup {
  z-index: 5;
  border: 1px solid black;
}

.W311 .acInputShadeMarked {
  color: #000000;
  background-color: #E8E887;
  box-shadow: inset 2px -2px 7px #f4f49d, inset -2px 2px 7px #bcbc30;
}

.W311 .acPlaceExternal {
  background-color: #e88787;
}

.W311 .buttonShadeDefault:focus,
.W311 .inputShadeDefault:focus {
  outline: none;
}

.W311 .buttonShadeDefault:active {
  background: #E8E887;
}

.W311 input::placeholder {
  color: rgb(255, 0, 0) !important;
}

.W311 input:-ms-input-placeholder {
  color: rgb(255, 0, 0) !important;
}

.W311 a:link {
  color: #000000;
}

.W311 a:visited {
  color: #000082;
}

.W311 a:hover {
  color: #000082;
}


.W311 .obWarning {
  color: #ff9999;
}

.W311 .defaultText {
  color: #000000;
}

.W311 #loading {
  font-size: 4rem;
  color: #000000;
}

.W311.darkText {
  color: #000000
}

.W311 .hintText {
  color: #583500;
}

.W311 .errorText {
  color: #7c0000;
}

.W311 .passedText {
  color: #0006cc;
}


.W311 #footer {
  background-color: #D3D0C7;
  z-index: 2;
}

.W311 .subMenuButton {
  color: #000000;
  background-color: #D3D0C7;
  display: block;
  box-shadow: inset -2px 2px 7px #edeae1, inset 2px -2px 7px #938f82;
  display: block;
}



/* XXX Colors Settlement start XXX*/

.W311 #setButtonCViking {
  color: black;
  background: #296399;
  box-shadow: inset -5px 5px 7px #577999, inset 5px -5px 7px #15324D;
}

.W311 #setButtonCJapan {
  color: black;
  background: #5C8F51;
  box-shadow: inset -5px 5px 7px #5EC248, inset 5px -5px 7px #39752B;
}

.W311 #setButtonCEgypt {
  color: black;
  background: #ab6133;
  box-shadow: inset -5px 5px 7px #DE8852, inset 5px -5px 7px #915936;
}

.W311 #setButtonCAztec {
  color: black;
  background: #A22720;
  box-shadow: inset -5px 5px 7px #DB433B, inset 5px -5px 7px #5C1C19;
}

.W311 #setButtonCMughal {
  color: black;
  background: #8600b3;
  box-shadow: inset -5px 5px 7px #df80ff, inset 5px -5px 7px #730099;
}


.W311 .settleStockCheckText {
  background: #007a00;
}

.W311 .setResearchTableBody tr:nth-child(odd),
.W311 #setQuestTableBody tr:nth-child(odd) {
  background: #D3D0C7;
  ;
}

.W311 .setResearchTableBody th,
.W311 .setResearchHead td,
.W311 .setResearchHead th {
  border: 1px solid black;
  background: #9c9a93;
}

.W311 .setTDProgress,
.W311 #setQuestHeadTable,
.W311 #setQuestTableBody tr,
.W311 .setResearchTableBody tr {
  background: #9c9a93;
}

.W311 .setResearchTableBody td {
  border: 1px solid #1A0E28;
}



.W311 .delText {
  text-decoration: line-through;
  color: #000082;
}

/* XXX Colors Settlement end XXX*/

/* XXX Colors Setup start XXX*/

.W311.AddBtn,
.W311 #gbNameSetupBtnOk,
.W311 .acFavConfigBtnActive {
  color: black;
  background-color: #40DD40;
  box-shadow: inset -2px 2px 7px #a0ffa0, inset 2px -2px 7px #206020;
}

.W311 .delBtn,
.W311 .presetBtnGB,
.W311 #gbNameSetupBtnCancel {
  color: black;
  background-color: #DD4040;
  box-shadow: inset -2px 2px 7px #ffa0a0, inset 2px -2px 7px #602020;
}

.W311 #gbNameSetupBtnReset,
.W311 .acFavConfigBtnInactive {
  color: black;
  background-color: #FFBF00;
  color: black;
  box-shadow: inset -2px 2px 7px #FFD24D, inset 2px -2px 7px #806000;
}

.W311 #gbNameSetupTableDiv {
  color: #000000;
  background-color: #9c9a93;
  box-shadow: inset 2px -2px 7px #c9c6be, inset -2px 2px 7px #555450;

}

/* XXX Colors Setup end XXX*/










/* Banner Colors*/

a.bannerLinkAmazon:link {
  background: #ff9a00;
  color: #232f3d;
  border: 3px #232f3d solid;
}

a.bannerLinkAmazon:hover {  
  color: #364658;
}
a.bannerLinkAmazon:visited {
  color: #232f3d;
}


a.bannerGradBYL:link {
  background: linear-gradient(to right, #2BC0E4 0%, #EAECC6 51%, #2BC0E4 100%);
  text-align: center;
  transition: 0.5s;
  background-size: 200% auto;
  color: black;
  box-shadow: 0 0 5px #eee;
  display: block;
}
a.bannerGradBYL:visited {
  color: black;
}
a.bannerGradBYL:hover {
  background-position: right center;
  /* change the direction of the change here */
  color: #fff;
  text-decoration: none;
}


a.bannerGradSteel:link {
  background-image: linear-gradient(to right, #4B79A1 0%, #283E51 51%, #4B79A1 100%);
  text-align: center;
  transition: 0.5s;
  background-size: 200% auto;
  color: white;
  box-shadow: 0 0 5px #eee;
  display: block;
}

a.bannerGradSteel:hover {
  background-position: right center;
  /* change the direction of the change here */
  color: #fff;
  text-decoration: none;
}

a.bannerGradSteel:visited {
  color: white;
}

a.bannerGradSunny:link {
  background-image: linear-gradient(to right, #F7971E 0%, #FFD200 51%, #F7971E 100%);
  text-align: center;
  transition: 0.5s;
  background-size: 200% auto;
  color: black;
  box-shadow: 0 0 5px #eee;
  display: block;
}

a.bannerGradSunny:hover {
  background-position: right center;
  /* change the direction of the change here */
  color: #fff;
  text-decoration: none;
}

a.bannerGradSunny:visited {
  color: black;
}


a.bannerGradLeaf:link {
  background-image: linear-gradient(to right, #56ab2f 0%, #a8e063 51%, #56ab2f 100%);
  text-align: center;
  transition: 0.5s;
  background-size: 200% auto;
  color: white;
  box-shadow: 0 0 5px #eee;
  display: block;
}

a.bannerGradLeaf:hover {
  background-position: right center;
  /* change the direction of the change here */
  color: #fff;
  text-decoration: none;
}

a.bannerGradLeaf:visited {
  color: white;
}


a.bannerGradPBL:link {
  background-image: linear-gradient(to right, #ef32d9 0%, #89fffd 51%, #ef32d9 100%);
  text-align: center;
  transition: 0.5s;
  background-size: 200% auto;
  color: white;
  box-shadow: 0 0 5px #eee;
  display: block;
}

a.bannerGradPBL:hover {
  background-position: right center;
  /* change the direction of the change here */
  color: #fff;
  text-decoration: none;
}

a.bannerGradPBL:visited {
  color: white;
}


a.bannerGradRed:link {
  background-image: linear-gradient(to right, #FF512F 0%, #DD2476 51%, #FF512F 100%);
  text-align: center;
  transition: 0.5s;
  background-size: 200% auto;
  color: white;
  box-shadow: 0 0 5px #eee;
  display: block;
}

a.bannerGradRed:hover {
  background-position: right center;
  /* change the direction of the change here */
  color: #fff;
  text-decoration: none;
}

a.bannerGradRed:visited {
  color: white;
}


a.bannerGradPurple:link {
  background-image: linear-gradient(to right, #9D50BB 0%, #6E48AA 51%, #9D50BB 100%);
  text-align: center;
  transition: 0.5s;
  background-size: 200% auto;
  color: white;
  box-shadow: 0 0 5px #eee;
  display: block;
}

a.bannerGradPurple:hover {
  background-position: right center;
  /* change the direction of the change here */
  color: #fff;
  text-decoration: none;
}

a.bannerGradPurple:visited {
  color: white;
}

.hidden {
  display: none;
}

a.hidden:link {
  display: none;
}

.margin2 {
  margin: 1vmin;
}

/* Big Horizontal Ad */

.adBigH
{
  display: inline-block;
  border: 1px solid black;
  height: 75px;
  width: 260px;
  margin-right: 10px;
}
.adSectionBigH
{
    display: flex;
    flex-direction: row;
    position: relative;
    align-items: center;
    background-color: white;
    height: 75px;
    width: auto;
  }
.adImageBigH
{
  width: auto;
  height: 75px;
  margin-right: 20px;
}

.adSavingBigH
{
  position:absolute;
  top:1px;
  width: 32px;
  height: 23px;
  font-size:12px;
  text-align:center;
  padding-top:8px;
  color:#fff;
  background-color:#a50200;
  border-radius:50%;
  border: 1px solid grey;
}
.adTextBigH
{
  font-size: 16px;
  display: inline;
  max-height: 75px;
  width: auto;
  overflow-wrap: break-word;
  overflow: hidden;
  padding-right: 3px;
  color: black;
}

/* Small Horizontal Ad */

.adSmallH {
  display: inline-block;
  border: 1px solid black;
  width: 180px;
  margin-right: 10px;
}

.adSectionSmallH
{
  display: flex;
  flex-direction: row;
  position: relative;
  align-items: center;
  background-color: white;
  width: auto;
}
.adImageSmallH 
{
  width: auto;
  margin-right: 20px
}

.adSavingSmallH
{
  position: absolute;
  top: 1px;
  width: 26px;
  height: 20px;
  font-size: 11px;
  text-align: center;
  padding-top: 6px;
  color: #fff;
  background-color: #a50200;
  border-radius: 50%;
  border: 1px solid grey;
}
.adTextSmallH
{
  font-size: 12px;
  display: inline;
  max-height: 32px;
  width: auto;
  overflow-wrap: break-word;
  overflow: hidden;
  padding-right: 3px;
  color: black;
}

/* Small Vertical Ad */

.adSmallV {
  display: inline-block;
  border: 1px solid black;
  width: 60px;
}

.adSectionSmallV {
  display: flex;
  flex-direction: column;
  position: relative;
  align-items: center;
  background-color: white;
  width: auto;
  max-width: 60px;
  max-height: 170px;
}

.adImageSmallV 
{
  width: auto;
}

.AdImageSmallVSaving
{
  padding-top: 5px;
}
.adSavingSmallV
{
  position: absolute;
  top: 1px;
  right: 1px;
  width: 32px;
  height: 23px;
  font-size: 12px;
  text-align: center;
  padding-top: 8px;
  color: #fff;
  background-color: #a50200;
  border-radius: 50%;
  border: 1px solid grey;
}

.adTextSmallV
{
  font-size: 12px;
  display: inline;
  max-width: 60px;
  overflow-wrap: break-word;
  overflow: hidden;
  padding-bottom: 1px;
  color: black;
}

/* Ad Link Shared */

.adLinkSmallV,
.adLinkSmallH,
.adLinkBihH
{
  position: relative;
  text-decoration: none;
}