@charset "UTF-8";
.colorset-myWhiteColor-pure {
  padding: 4px 4px 4px 4px;
  background-color: white;
  color: #010101; }

.colorset-myWhiteColor-light {
  padding: 4px 4px 4px 4px;
  background-color: white;
  color: #010101; }

.colorset-myWhiteColor-lighter {
  padding: 4px 4px 4px 4px;
  background-color: white;
  color: #010101; }

.colorset-myWhiteColor-normal {
  padding: 4px 4px 4px 4px;
  background-color: #fefefe;
  color: #010101; }

.colorset-myWhiteColor-darker {
  padding: 4px 4px 4px 4px;
  background-color: #fbfbfb;
  color: #010101; }

.colorset-myWhiteColor-dark {
  padding: 4px 4px 4px 4px;
  background-color: #f9f9f9;
  color: #010101; }

.colorset-myWhiteColor-button {
  padding: 4px 4px 4px 4px;
  background-color: #fefefe;
  color: #010101; }

.colorset-myBlackColor-normal {
  padding: 4px 4px 4px 4px;
  background-color: #010101;
  color: #fefefe; }

.colorset-myBlackColor-button {
  padding: 4px 4px 4px 4px;
  background-color: #010101;
  color: #fefefe; }

.color-myGreyColor-XXL {
  color: #f7f7f7; }

.color-myGreyColor-lightest {
  color: #f2f2f2; }

.color-myGreyColor-light {
  color: #e6e6e6; }

.color-myGreyColor-lighter {
  color: #bfbfbf; }

.color-myGreyColor-normal {
  color: #999999; }

.color-myGreyColor-darker {
  color: #737373; }

.color-myGreyColor-dark {
  color: #4d4d4d; }

.color-myGreyColor-darkest {
  color: #333333; }

.colorset-myGreyColor-XXL {
  padding: 4px 4px 4px 4px;
  background-color: #f7f7f7;
  color: #4d4d4d; }

.colorset-myGreyColor-lightest {
  padding: 4px 4px 4px 4px;
  background-color: #f2f2f2;
  color: #4d4d4d; }

.colorset-myGreyColor-light {
  padding: 4px 4px 4px 4px;
  background-color: #e6e6e6;
  color: #4d4d4d; }

.colorset-myGreyColor-lighter {
  padding: 4px 4px 4px 4px;
  background-color: #bfbfbf;
  color: #4d4d4d; }

.colorset-myGreyColor-normal {
  padding: 4px 4px 4px 4px;
  background-color: #999999;
  color: #e6e6e6; }

.colorset-myGreyColor-darker {
  padding: 4px 4px 4px 4px;
  background-color: #737373;
  color: #e6e6e6; }

.colorset-myGreyColor-dark {
  padding: 4px 4px 4px 4px;
  background-color: #4d4d4d;
  color: #e6e6e6; }

.color-stdRedColor-lightest {
  color: #ff9999; }

.color-stdRedColor-light {
  color: #ff6666; }

.color-stdRedColor-lighter {
  color: #ff3333; }

.color-stdRedColor-normal {
  color: red; }

.color-stdRedColor-darker {
  color: #cc0000; }

.color-stdRedColor-dark {
  color: #990000; }

.color-stdRedColor-darkest {
  color: #660000; }

.colorset-stdRedColor-lightest {
  padding: 4px 4px 4px 4px;
  background-color: #ff9999;
  color: #660000; }

.colorset-stdRedColor-light {
  padding: 4px 4px 4px 4px;
  background-color: #ff6666;
  color: #660000; }

.colorset-stdRedColor-lighter {
  padding: 4px 4px 4px 4px;
  background-color: #ff3333;
  color: #660000; }

.colorset-stdRedColor-normal {
  padding: 4px 4px 4px 4px;
  background-color: red;
  color: #660000; }

.colorset-stdRedColor-darker {
  padding: 4px 4px 4px 4px;
  background-color: #cc0000;
  color: #ff9999; }

.colorset-stdRedColor-dark {
  padding: 4px 4px 4px 4px;
  background-color: #990000;
  color: #ff9999; }

.colorset-stdRedColor-darkest {
  padding: 4px 4px 4px 4px;
  background-color: #660000;
  color: #ff3333; }

.color-stdYellowColor-XXL {
  color: ivory; }

.color-stdYellowColor-XL {
  color: #ffffdb; }

.color-stdYellowColor-lightest {
  color: #ffff99; }

.color-stdYellowColor-light {
  color: #ffff66; }

.color-stdYellowColor-lighter {
  color: #ffff33; }

.color-stdYellowColor-normal {
  color: yellow; }

.color-stdYellowColor-darker {
  color: #cccc00; }

.color-stdYellowColor-dark {
  color: #999900; }

.color-stdYellowColor-darkest {
  color: #666600; }

.colorset-stdYellowColor-XXL {
  padding: 4px 4px 4px 4px;
  background-color: ivory;
  color: #666600; }

.colorset-stdYellowColor-XL {
  padding: 4px 4px 4px 4px;
  background-color: #ffffdb;
  color: #666600; }

.colorset-stdYellowColor-lightest {
  padding: 4px 4px 4px 4px;
  background-color: #ffff99;
  color: #666600; }

.colorset-stdYellowColor-light {
  padding: 4px 4px 4px 4px;
  background-color: #ffff66;
  color: #666600; }

.colorset-stdYellowColor-lighter {
  padding: 4px 4px 4px 4px;
  background-color: #ffff33;
  color: #666600; }

.colorset-stdYellowColor-normal {
  padding: 4px 4px 4px 4px;
  background-color: yellow;
  color: #666600; }

.colorset-stdYellowColor-darker {
  padding: 4px 4px 4px 4px;
  background-color: #cccc00;
  color: #666600; }

.colorset-stdYellowColor-dark {
  padding: 4px 4px 4px 4px;
  background-color: #999900;
  color: #ffff66; }

.colorset-stdYellowColor-darkest {
  padding: 4px 4px 4px 4px;
  background-color: #666600;
  color: #ffff66; }

.color-stdPurpleColor-lightest {
  color: #ebcff2; }

.color-stdPurpleColor-light {
  color: #dba6e8; }

.color-stdPurpleColor-lighter {
  color: #ca7edd; }

.color-stdPurpleColor-normal {
  color: mediumorchid; }

.color-stdPurpleColor-darker {
  color: #a632c3; }

.color-stdPurpleColor-dark {
  color: #83289a; }

.color-stdPurpleColor-darkest {
  color: #611d72; }

.colorset-stdPurpleColor-lightest {
  padding: 4px 4px 4px 4px;
  background-color: #ebcff2;
  color: #83289a; }

.colorset-stdPurpleColor-light {
  padding: 4px 4px 4px 4px;
  background-color: #dba6e8;
  color: #611d72; }

.colorset-stdPurpleColor-lighter {
  padding: 4px 4px 4px 4px;
  background-color: #ca7edd;
  color: #611d72; }

.colorset-stdPurpleColor-normal {
  padding: 4px 4px 4px 4px;
  background-color: mediumorchid;
  color: #ebcff2; }

.colorset-stdPurpleColor-darker {
  padding: 4px 4px 4px 4px;
  background-color: #a632c3;
  color: #ebcff2; }

.colorset-stdPurpleColor-dark {
  padding: 4px 4px 4px 4px;
  background-color: #83289a;
  color: #ebcff2; }

.colorset-stdPurpleColor-darkest {
  padding: 4px 4px 4px 4px;
  background-color: #611d72;
  color: #ebcff2; }

.color-stdBrownColor-lightest {
  color: #f1dba2; }

.color-stdBrownColor-light {
  color: #ebc975; }

.color-stdBrownColor-lighter {
  color: #e4b849; }

.color-stdBrownColor-normal {
  color: goldenrod; }

.color-stdBrownColor-darker {
  color: #ae8319; }

.color-stdBrownColor-dark {
  color: #816213; }

.color-stdBrownColor-darkest {
  color: #55400c; }

.colorset-stdBrownColor-lightest {
  padding: 4px 4px 4px 4px;
  background-color: #f1dba2;
  color: #55400c; }

.colorset-stdBrownColor-light {
  padding: 4px 4px 4px 4px;
  background-color: #ebc975;
  color: #55400c; }

.colorset-stdBrownColor-lighter {
  padding: 4px 4px 4px 4px;
  background-color: #e4b849;
  color: #55400c; }

.colorset-stdBrownColor-normal {
  padding: 4px 4px 4px 4px;
  background-color: goldenrod;
  color: #55400c; }

.colorset-stdBrownColor-darker {
  padding: 4px 4px 4px 4px;
  background-color: #ae8319;
  color: #f1dba2; }

.colorset-stdBrownColor-dark {
  padding: 4px 4px 4px 4px;
  background-color: #816213;
  color: #ebc975; }

.colorset-stdBrownColor-darkest {
  padding: 4px 4px 4px 4px;
  background-color: #55400c;
  color: #ebc975; }

.color-myRedColor-lightest {
  color: #ffcccc; }

.color-myRedColor-light {
  color: #ff9999; }

.color-myRedColor-lighter {
  color: #ff3333; }

.color-myRedColor-normal {
  color: #cc0000; }

.color-myRedColor-darker {
  color: #990000; }

.color-myRedColor-dark {
  color: #660000; }

.color-myRedColor-darkest {
  color: #330000; }

.colorset-myRedColor-lightest {
  padding: 4px 4px 4px 4px;
  background-color: #ffcccc;
  color: #990000; }

.colorset-myRedColor-light {
  padding: 4px 4px 4px 4px;
  background-color: #ff9999;
  color: #660000; }

.colorset-myRedColor-lighter {
  padding: 4px 4px 4px 4px;
  background-color: #ff3333;
  color: #330000; }

.colorset-myRedColor-normal {
  padding: 4px 4px 4px 4px;
  background-color: #cc0000;
  color: #ffcccc; }

.colorset-myRedColor-darker {
  padding: 4px 4px 4px 4px;
  background-color: #990000;
  color: #ffcccc; }

.colorset-myRedColor-dark {
  padding: 4px 4px 4px 4px;
  background-color: #660000;
  color: #ffcccc; }

.colorset-myRedColor-darkest {
  padding: 4px 4px 4px 4px;
  background-color: #330000;
  color: #ff9999; }

.color-myGreenColor-lightest {
  color: #e6ffe6; }

.color-myGreenColor-light {
  color: #ccffcc; }

.color-myGreenColor-lighter {
  color: #66ff66; }

.color-myGreenColor-normal {
  color: lime; }

.color-myGreenColor-darker {
  color: #00cc00; }

.color-myGreenColor-dark {
  color: #009900; }

.color-myGreenColor-darkest {
  color: #006600; }

.colorset-myGreenColor-lightest {
  padding: 4px 4px 4px 4px;
  background-color: #e6ffe6;
  color: #006600; }

.colorset-myGreenColor-light {
  padding: 4px 4px 4px 4px;
  background-color: #ccffcc;
  color: #006600; }

.colorset-myGreenColor-lighter {
  padding: 4px 4px 4px 4px;
  background-color: #66ff66;
  color: #006600; }

.colorset-myGreenColor-normal {
  padding: 4px 4px 4px 4px;
  background-color: lime;
  color: #006600; }

.colorset-myGreenColor-darker {
  padding: 4px 4px 4px 4px;
  background-color: #00cc00;
  color: #e6ffe6; }

.colorset-myGreenColor-dark {
  padding: 4px 4px 4px 4px;
  background-color: #009900;
  color: #ccffcc; }

.colorset-myGreenColor-darkest {
  padding: 4px 4px 4px 4px;
  background-color: #006600;
  color: #66ff66; }

.color-myBlueColor-XXXL {
  color: #f5f8ff; }

.color-myBlueColor-XXL {
  color: #ebf1ff; }

.color-myBlueColor-lightest {
  color: #e0ebff; }

.color-myBlueColor-light {
  color: #ccddff; }

.color-myBlueColor-lighter {
  color: #99bbff; }

.color-myBlueColor-normal {
  color: #6699ff; }

.color-myBlueColor-darker {
  color: #3377ff; }

.color-myBlueColor-dark {
  color: #0055ff; }

.color-myBlueColor-darkest {
  color: #0044cc; }

.colorset-myBlueColor-XXXL {
  padding: 4px 4px 4px 4px;
  background-color: #f5f8ff;
  color: #3377ff; }

.colorset-myBlueColor-XXL {
  padding: 4px 4px 4px 4px;
  background-color: #ebf1ff;
  color: #3377ff; }

.colorset-myBlueColor-lightest {
  padding: 4px 4px 4px 4px;
  background-color: #e0ebff;
  color: #3377ff; }

.colorset-myBlueColor-light {
  padding: 4px 4px 4px 4px;
  background-color: #ccddff;
  color: #0055ff; }

.colorset-myBlueColor-lighter {
  padding: 4px 4px 4px 4px;
  background-color: #99bbff;
  color: #0044cc; }

.colorset-myBlueColor-normal {
  padding: 4px 4px 4px 4px;
  background-color: #6699ff;
  color: #e0ebff; }

.colorset-myBlueColor-darker {
  padding: 4px 4px 4px 4px;
  background-color: #3377ff;
  color: #e0ebff; }

.colorset-myBlueColor-dark {
  padding: 4px 4px 4px 4px;
  background-color: #0055ff;
  color: #ccddff; }

.colorset-myBlueColor-darkest {
  padding: 4px 4px 4px 4px;
  background-color: #0044cc;
  color: #ccddff; }

.color-my1Color-XXXL {
  color: #f7fafa; }

.color-my1Color-XXL {
  color: #eff5f6; }

.color-my1Color-lightest {
  color: #dfecec; }

.color-my1Color-light {
  color: #bfd9d9; }

.color-my1Color-lighter {
  color: #8fbcbd; }

.color-my1Color-normal {
  color: #5f9fa0; }

.color-my1Color-darker {
  color: #436f70; }

.color-my1Color-dark {
  color: #264040; }

.color-my1Color-darkest {
  color: #132020; }

.colorset-my1Color-XXXL {
  padding: 4px 4px 4px 4px;
  background-color: #f7fafa;
  color: #436f70; }

.colorset-my1Color-XXL {
  padding: 4px 4px 4px 4px;
  background-color: #eff5f6;
  color: #436f70; }

.colorset-my1Color-lightest {
  padding: 4px 4px 4px 4px;
  background-color: #dfecec;
  color: #264040; }

.colorset-my1Color-light {
  padding: 4px 4px 4px 4px;
  background-color: #bfd9d9;
  color: #264040; }

.colorset-my1Color-lighter {
  padding: 4px 4px 4px 4px;
  background-color: #8fbcbd;
  color: #264040; }

.colorset-my1Color-normal {
  padding: 4px 4px 4px 4px;
  background-color: #5f9fa0;
  color: #dfecec; }

.colorset-my1Color-darker {
  padding: 4px 4px 4px 4px;
  background-color: #436f70;
  color: #bfd9d9; }

.colorset-my1Color-dark {
  padding: 4px 4px 4px 4px;
  background-color: #264040;
  color: #bfd9d9; }

.colorset-my1Color-darkest {
  padding: 4px 4px 4px 4px;
  background-color: #132020;
  color: #bfd9d9; }

.colorset-my1Color-button {
  padding: 4px 4px 4px 4px;
  background-color: #5f9fa0;
  color: #bfd9d9; }

.color-my2Color-XXXL {
  color: #f5eff1; }

.color-my2Color-lightest {
  color: #ecdfe3; }

.color-my2Color-light {
  color: #d9bfc8; }

.color-my2Color-lighter {
  color: #bc8f9e; }

.color-my2Color-normal {
  color: #9f6075; }

.color-my2Color-darker {
  color: #704352; }

.color-my2Color-dark {
  color: #40262f; }

.color-my2Color-darkest {
  color: #201317; }

.colorset-my2Color-XXXL {
  padding: 4px 4px 4px 4px;
  background-color: #f5eff1;
  color: #40262f; }

.colorset-my2Color-lightest {
  padding: 4px 4px 4px 4px;
  background-color: #ecdfe3;
  color: #40262f; }

.colorset-my2Color-light {
  padding: 4px 4px 4px 4px;
  background-color: #d9bfc8;
  color: #40262f; }

.colorset-my2Color-lighter {
  padding: 4px 4px 4px 4px;
  background-color: #bc8f9e;
  color: #40262f; }

.colorset-my2Color-normal {
  padding: 4px 4px 4px 4px;
  background-color: #9f6075;
  color: #ecdfe3; }

.colorset-my2Color-darker {
  padding: 4px 4px 4px 4px;
  background-color: #704352;
  color: #d9bfc8; }

.colorset-my2Color-dark {
  padding: 4px 4px 4px 4px;
  background-color: #40262f;
  color: #d9bfc8; }

.colorset-my2Color-darkest {
  padding: 4px 4px 4px 4px;
  background-color: #201317;
  color: #d9bfc8; }

.colorset-my2Color-button {
  padding: 4px 4px 4px 4px;
  background-color: #9f6075;
  color: #d9bfc8; }

.color-my3Color-XXXL {
  color: #faf7f0; }

.color-my3Color-lightest {
  color: #f2ead9; }

.color-my3Color-light {
  color: #e6d5b3; }

.color-my3Color-lighter {
  color: #d2b579; }

.color-my3Color-normal {
  color: #bf9540; }

.color-my3Color-darker {
  color: #86682d; }

.color-my3Color-dark {
  color: #4d3c1a; }

.color-my3Color-darkest {
  color: #261e0d; }

.colorset-my3Color-XXXL {
  padding: 4px 4px 4px 4px;
  background-color: #faf7f0;
  color: #4d3c1a; }

.colorset-my3Color-lightest {
  padding: 4px 4px 4px 4px;
  background-color: #f2ead9;
  color: #4d3c1a; }

.colorset-my3Color-light {
  padding: 4px 4px 4px 4px;
  background-color: #e6d5b3;
  color: #4d3c1a; }

.colorset-my3Color-lighter {
  padding: 4px 4px 4px 4px;
  background-color: #d2b579;
  color: #4d3c1a; }

.colorset-my3Color-normal {
  padding: 4px 4px 4px 4px;
  background-color: #bf9540;
  color: #f2ead9; }

.colorset-my3Color-darker {
  padding: 4px 4px 4px 4px;
  background-color: #86682d;
  color: #e6d5b3; }

.colorset-my3Color-dark {
  padding: 4px 4px 4px 4px;
  background-color: #4d3c1a;
  color: #e6d5b3; }

.colorset-my3Color-darkest {
  padding: 4px 4px 4px 4px;
  background-color: #261e0d;
  color: #e6d5b3; }

.colorset-my3Color-button {
  padding: 4px 4px 4px 4px;
  background-color: #bf9540;
  color: #e6d5b3; }

.color-my4Color-XXXL {
  color: #f7f8fa; }

.color-my4Color-lightest {
  color: #dfe3ec; }

.color-my4Color-light {
  color: #cfd6e2; }

.color-my4Color-lighter {
  color: #9facc6; }

.color-my4Color-normal {
  color: #60759f; }

.color-my4Color-darker {
  color: #435270; }

.color-my4Color-dark {
  color: #262f40; }

.color-my4Color-darkest {
  color: #131720; }

.colorset-my4Color-XXXL {
  padding: 4px 4px 4px 4px;
  background-color: #f7f8fa;
  color: #262f40; }

.colorset-my4Color-lightest {
  padding: 4px 4px 4px 4px;
  background-color: #dfe3ec;
  color: #262f40; }

.colorset-my4Color-light {
  padding: 4px 4px 4px 4px;
  background-color: #cfd6e2;
  color: #262f40; }

.colorset-my4Color-lighter {
  padding: 4px 4px 4px 4px;
  background-color: #9facc6;
  color: #262f40; }

.colorset-my4Color-normal {
  padding: 4px 4px 4px 4px;
  background-color: #60759f;
  color: #dfe3ec; }

.colorset-my4Color-darker {
  padding: 4px 4px 4px 4px;
  background-color: #435270;
  color: #cfd6e2; }

.colorset-my4Color-dark {
  padding: 4px 4px 4px 4px;
  background-color: #262f40;
  color: #cfd6e2; }

.colorset-my4Color-darkest {
  padding: 4px 4px 4px 4px;
  background-color: #131720;
  color: #cfd6e2; }

.colorset-my4Color-button {
  padding: 4px 4px 4px 4px;
  background-color: #60759f;
  color: #cfd6e2; }

.color-my5Color-XXXL {
  color: #fcfcf8; }

.color-my5Color-lightest {
  color: #f4f4e7; }

.color-my5Color-light {
  color: #ececd5; }

.color-my5Color-lighter {
  color: #dcdcb2; }

.color-my5Color-normal {
  color: #c4c47e; }

.color-my5Color-darker {
  color: #a8a84d; }

.color-my5Color-dark {
  color: #737335; }

.color-my5Color-darkest {
  color: #505025; }

.colorset-my5Color-XXXL {
  padding: 4px 4px 4px 4px;
  background-color: #fcfcf8;
  color: #505025; }

.colorset-my5Color-lightest {
  padding: 4px 4px 4px 4px;
  background-color: #f4f4e7;
  color: #505025; }

.colorset-my5Color-light {
  padding: 4px 4px 4px 4px;
  background-color: #ececd5;
  color: #505025; }

.colorset-my5Color-lighter {
  padding: 4px 4px 4px 4px;
  background-color: #dcdcb2;
  color: #737335; }

.colorset-my5Color-normal {
  padding: 4px 4px 4px 4px;
  background-color: #c4c47e;
  color: #505025; }

.colorset-my5Color-darker {
  padding: 4px 4px 4px 4px;
  background-color: #a8a84d;
  color: #f4f4e7; }

.colorset-my5Color-dark {
  padding: 4px 4px 4px 4px;
  background-color: #737335;
  color: #ececd5; }

.colorset-my5Color-darkest {
  padding: 4px 4px 4px 4px;
  background-color: #505025;
  color: #ececd5; }

.colorset-my5Color-button {
  padding: 4px 4px 4px 4px;
  background-color: #c4c47e;
  color: #ececd5; }

.color-my6Color-XXXL {
  color: #eae4f6; }

.color-my6Color-lightest {
  color: #e1d9f2; }

.color-my6Color-light {
  color: #c4b3e6; }

.color-my6Color-lighter {
  color: #9779d2; }

.color-my6Color-normal {
  color: #6a40bf; }

.color-my6Color-darker {
  color: #4a2d86; }

.color-my6Color-dark {
  color: #2b1a4d; }

.color-my6Color-darkest {
  color: #150d26; }

.colorset-my6Color-XXXL {
  padding: 4px 4px 4px 4px;
  background-color: #eae4f6;
  color: #150d26; }

.colorset-my6Color-lightest {
  padding: 4px 4px 4px 4px;
  background-color: #e1d9f2;
  color: #150d26; }

.colorset-my6Color-light {
  padding: 4px 4px 4px 4px;
  background-color: #c4b3e6;
  color: #150d26; }

.colorset-my6Color-lighter {
  padding: 4px 4px 4px 4px;
  background-color: #9779d2;
  color: #e1d9f2; }

.colorset-my6Color-normal {
  padding: 4px 4px 4px 4px;
  background-color: #6a40bf;
  color: #e1d9f2; }

.colorset-my6Color-darker {
  padding: 4px 4px 4px 4px;
  background-color: #4a2d86;
  color: #e1d9f2; }

.colorset-my6Color-dark {
  padding: 4px 4px 4px 4px;
  background-color: #2b1a4d;
  color: #e1d9f2; }

.colorset-my6Color-darkest {
  padding: 4px 4px 4px 4px;
  background-color: #150d26;
  color: #e1d9f2; }

.colorset-my6Color-button {
  padding: 4px 4px 4px 4px;
  background-color: #6a40bf;
  color: #e1d9f2; }

.color-my7Color-lightest {
  color: #dfecec; }

.color-my7Color-light {
  color: #bfd9d9; }

.color-my7Color-lighter {
  color: #8fbcbd; }

.color-my7Color-normal {
  color: #5f9fa0; }

.color-my7Color-darker {
  color: #436f70; }

.color-my7Color-dark {
  color: #264040; }

.color-my7Color-darkest {
  color: #132020; }

.colorset-my7Color-lightest {
  padding: 4px 4px 4px 4px;
  background-color: #dfecec;
  color: #132020; }

.colorset-my7Color-light {
  padding: 4px 4px 4px 4px;
  background-color: #bfd9d9;
  color: #132020; }

.colorset-my7Color-lighter {
  padding: 4px 4px 4px 4px;
  background-color: #8fbcbd;
  color: #132020; }

.colorset-my7Color-normal {
  padding: 4px 4px 4px 4px;
  background-color: #5f9fa0;
  color: #dfecec; }

.colorset-my7Color-darker {
  padding: 4px 4px 4px 4px;
  background-color: #436f70;
  color: #dfecec; }

.colorset-my7Color-dark {
  padding: 4px 4px 4px 4px;
  background-color: #264040;
  color: #dfecec; }

.colorset-my7Color-darkest {
  padding: 4px 4px 4px 4px;
  background-color: #132020;
  color: #dfecec; }

.colorset-my7Color-button {
  padding: 4px 4px 4px 4px;
  background-color: #5f9fa0;
  color: #bfd9d9; }

.color-my8Color-lightest {
  color: #ecdfe3; }

.color-my8Color-light {
  color: #d9bfc8; }

.color-my8Color-lighter {
  color: #bc8f9e; }

.color-my8Color-normal {
  color: #9f6075; }

.color-my8Color-darker {
  color: #704352; }

.color-my8Color-dark {
  color: #40262f; }

.color-my8Color-darkest {
  color: #201317; }

.colorset-my8Color-lightest {
  padding: 4px 4px 4px 4px;
  background-color: #ecdfe3;
  color: #201317; }

.colorset-my8Color-light {
  padding: 4px 4px 4px 4px;
  background-color: #d9bfc8;
  color: #201317; }

.colorset-my8Color-lighter {
  padding: 4px 4px 4px 4px;
  background-color: #bc8f9e;
  color: #201317; }

.colorset-my8Color-normal {
  padding: 4px 4px 4px 4px;
  background-color: #9f6075;
  color: #ecdfe3; }

.colorset-my8Color-darker {
  padding: 4px 4px 4px 4px;
  background-color: #704352;
  color: #ecdfe3; }

.colorset-my8Color-dark {
  padding: 4px 4px 4px 4px;
  background-color: #40262f;
  color: #ecdfe3; }

.colorset-my8Color-darkest {
  padding: 4px 4px 4px 4px;
  background-color: #201317;
  color: #ecdfe3; }

.colorset-my8Color-button {
  padding: 4px 4px 4px 4px;
  background-color: #9f6075;
  color: #ecdfe3; }

.color-my9Color-lightest {
  color: #f2ead9; }

.color-my9Color-light {
  color: #e6d5b3; }

.color-my9Color-lighter {
  color: #d2b579; }

.color-my9Color-normal {
  color: #bf9540; }

.color-my9Color-darker {
  color: #86682d; }

.color-my9Color-dark {
  color: #4d3c1a; }

.color-my9Color-darkest {
  color: #261e0d; }

.colorset-my9Color-lightest {
  padding: 4px 4px 4px 4px;
  background-color: #f2ead9;
  color: #261e0d; }

.colorset-my9Color-light {
  padding: 4px 4px 4px 4px;
  background-color: #e6d5b3;
  color: #261e0d; }

.colorset-my9Color-lighter {
  padding: 4px 4px 4px 4px;
  background-color: #d2b579;
  color: #261e0d; }

.colorset-my9Color-normal {
  padding: 4px 4px 4px 4px;
  background-color: #bf9540;
  color: #f2ead9; }

.colorset-my9Color-darker {
  padding: 4px 4px 4px 4px;
  background-color: #86682d;
  color: #f2ead9; }

.colorset-my9Color-dark {
  padding: 4px 4px 4px 4px;
  background-color: #4d3c1a;
  color: #f2ead9; }

.colorset-my9Color-darkest {
  padding: 4px 4px 4px 4px;
  background-color: #261e0d;
  color: #f2ead9; }

.colorset-my9Color-button {
  padding: 4px 4px 4px 4px;
  background-color: #bf9540;
  color: #f2ead9; }

.colorset-myAColor-lightest {
  padding: 4px 4px 4px 4px;
  background-color: #f9f9d2;
  color: #59590d; }

.colorset-myAColor-light {
  padding: 4px 4px 4px 4px;
  background-color: #f2f2a6;
  color: #2d2d06; }

.colorset-myAColor-lighter {
  padding: 4px 4px 4px 4px;
  background-color: #e9e963;
  color: #2d2d06; }

.colorset-myAColor-normal {
  padding: 4px 4px 4px 4px;
  background-color: #dfdf20;
  color: #2d2d06; }

.colorset-myAColor-darker {
  padding: 4px 4px 4px 4px;
  background-color: #9c9c16;
  color: #f9f9d2; }

.colorset-myAColor-dark {
  padding: 4px 4px 4px 4px;
  background-color: #59590d;
  color: #f9f9d2; }

.colorset-myAColor-darkest {
  padding: 4px 4px 4px 4px;
  background-color: #2d2d06;
  color: #f9f9d2; }

.colorset-bootstrap-alert-primary {
  color: #084298;
  background-color: #cfe2ff;
  border-color: #b6d4fe; }

.colorset-bootstrap-alert-secondary {
  color: #41464b;
  background-color: #e2e3e5;
  border-color: #d3d6d8; }

.colorset-bootstrap-alert-success {
  color: #0f5132;
  background-color: #d1e7dd;
  border-color: #badbcc; }

.colorset-bootstrap-alert-danger {
  color: #842029;
  background-color: #f8d7da;
  border-color: #f5c2c7; }

.colorset-bootstrap-alert-warning {
  color: #664d03;
  background-color: #fff3cd;
  border-color: #ffecb5; }

.colorset-bootstrap-alert-info {
  color: #055160;
  background-color: #cff4fc;
  border-color: #b6effb; }

.colorset-bootstrap-alert-light {
  color: #636464;
  background-color: #fefefe;
  border-color: #fdfdfe; }

.colorset-bootstrap-alert-dark {
  color: #141619;
  background-color: #d3d3d4;
  border-color: #bcbebf; }

.btn-primary {
  color: #084298;
  background-color: #cfe2ff;
  border-color: #b6d4fe; }

.btn-primary:hover,
.btn-primary:focus {
  color: #cfe2ff;
  background-color: #084298;
  border-color: #b6d4fe; }

.btn-secondary {
  color: #41464b;
  background-color: #e2e3e5;
  border-color: #d3d6d8; }

.btn-secondary:hover,
.btn-secondary:focus {
  color: #e2e3e5;
  background-color: #41464b;
  border-color: #d3d6d8; }

.btn-success {
  color: #0f5132;
  background-color: #d1e7dd;
  border-color: #badbcc; }

.btn-success:hover,
.btn-success:focus {
  color: #d1e7dd;
  background-color: #0f5132;
  border-color: #badbcc; }

.btn-danger {
  color: #842029;
  background-color: #f8d7da;
  border-color: #f5c2c7; }

.btn-danger:hover,
.btn-danger:focus {
  color: #f8d7da;
  background-color: #842029;
  border-color: #f5c2c7; }

.btn-warning {
  color: #664d03;
  background-color: #fff3cd;
  border-color: #ffecb5; }

.btn-warning:hover,
.btn-warning:focus {
  color: #fff3cd;
  background-color: #664d03;
  border-color: #ffecb5; }

.btn-info {
  color: #055160;
  background-color: #cff4fc;
  border-color: #b6effb; }

.btn-info:hover,
.btn-info:focus {
  color: #cff4fc;
  background-color: #055160;
  border-color: #b6effb; }

.form-input-valid {
  padding: 4px 4px 4px 4px;
  color: #0f5132;
  background-color: #d1e7dd;
  border-color: #badbcc; }

.form-input-error {
  color: #842029;
  background-color: #f8d7da;
  border-color: #f5c2c7;
  padding: 4px 4px 4px 4px; }

.form-input-warning {
  color: #664d03;
  background-color: #fff3cd;
  border-color: #ffecb5;
  padding: 4px 4px 4px 4px; }

.form-input-hide {
  color: #41464b;
  background-color: #e2e3e5;
  border-color: #d3d6d8;
  padding: 4px 4px 4px 4px; }

.form-input-show {
  color: #842029;
  background-color: #f8d7da;
  border-color: #f5c2c7;
  padding: 4px 4px 4px 4px; }

.colorset-highlight {
  padding: 4px 4px 4px 4px;
  background-color: #e6e6e6;
  color: #bfbfbf; }

.colorset-selected {
  padding: 4px 4px 4px 4px;
  background-color: #9f6075;
  color: #d9bfc8;
  font-weight: "300"; }

.colorset-dim {
  padding: 4px 4px 4px 4px;
  background-color: #e6e6e6;
  color: #bfbfbf; }

body {
  background-color: white;
  position: relative;
  font-family: Montserrat, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, "sans-serif";
  font-weight: 400; }

div,
p {
  font-family: Montserrat, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, "sans-serif";
  font-weight: 400; }

#iMainContainer > div {
  padding: 4px; }

.mycontainer {
  margin: 4 auto;
  padding-left: 4px;
  padding-right: 4px; }

.mycontainer-wide {
  margin: 4 auto;
  padding-left: 4px;
  padding-right: 4px; }

.mycontainer-form {
  margin: 4 auto;
  padding-left: 4px;
  padding-right: 4px; }

.mycontainer-info {
  margin: 4 auto;
  padding-left: 4px;
  padding-right: 4px; }

.mycontainer-info-outer {
  margin: 4 auto;
  padding: 8px;
  border: 0px solid lightgray; }

.info-color {
  background-color: #f7f7f7;
  border-radius: 16px;
  padding: 10px;
  margin-left: 0px;
  margin-right: 0px;
  box-shadow: 0px 0px 10px 10px grey; }

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: "Montserrat Alternates", "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, "sans-serif";
  font-weight: 500; }

h4 {
  color: #60759f; }

.row {
  margin-left: 0px;
  margin-right: 0px; }

.list-group {
  position: sticky; }

.list-group-item-action {
  background-color: white; }

.list-group-item.active {
  color: #704352;
  background-color: #d9bfc8; }

.clearfix::after {
  content: "";
  clear: both;
  display: table; }

.accordion-help {
  color: #60759f; }

.accordion-page {
  border-radius: 8px;
  border: none;
  margin: 0px;
  padding: 8px 8px 8px 8px;
  color: #436f70;
  background-color: #bfd9d9;
  font-size: 85%;
  text-align: left; }

.accordion-panel {
  display: none; }

.accordion-info-icon {
  color: #ff8800;
  /* orange */
  transition: color 0.2s; }

.accordion-info-icon:hover {
  color: #aa6d00;
  /* darker */ }

.text-align-hor {
  text-align: center; }

.horizontal-center {
  /* requires optional height spec and mandatory position: relative in parent element */
  margin: 0;
  position: absolute;
  left: 50%;
  -ms-transform: translateX(-50%);
  transform: translateX(-50%); }

.nav-icon-center {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 24px; }

a {
  color: #60759f;
  font-weight: 600;
  font-size: 75%;
  letter-spacing: 0.5px;
  text-decoration: none;
  text-transform: uppercase; }

a:hover {
  color: #9facc6;
  text-decoration: none; }

a:active {
  color: #9f6075;
  text-decoration: none; }

a.thumbnail:hover,
a.thumbnail:focus {
  border-color: #436f70; }

a p {
  margin-top: 10px; }

a.disabled {
  /* Make the disabled links greyish*/
  color: #999999;
  /* And disable the pointer events */
  pointer-events: none; }

.topbar {
  height: 16px;
  background-color: #9f6075; }

.footbar {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 24px;
  color: yellow;
  background-color: #9f6075; }

.btn-general {
  border-radius: 16px;
  font-size: 20px;
  width: 140px;
  padding: 1px 1px 1px 1px; }

.btn-modal-disabled {
  background-color: white;
  color: white;
  border: 0px; }

.btn-modal {
  border-radius: 16px;
  padding: 1px 1px 1px 1px;
  font-size: 12px;
  width: 120px;
  height: 24px; }

.btn-submit {
  font-size: 24px;
  width: 160px; }

.nav-flags {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 6px 0; }

.nav-flags .nav-link {
  padding: 0 !important;
  margin: 0 !important;
  line-height: 1; }

.flag-icon {
  display: block;
  height: 22px;
  transition: filter .2s ease, opacity .2s ease; }

.flag-icon:hover {
  filter: grayscale(100%);
  opacity: .6; }

.cFormsGen {
  margin: auto;
  max-width: 480px; }

.form-color {
  background-color: #f7f7f7;
  border-radius: 10px;
  padding: 10px;
  margin-left: 0px;
  margin-right: 0px;
  box-shadow: 0px 0px 10px 10px grey; }

.form-textblock {
  padding: 4px 4px 10px 4px;
  color: #fefefe;
  background-color: #5f9fa0; }

.form-left-inner-addon {
  position: relative; }

.form-left-inner-addon input,
.left-inner-addon textarea {
  padding-left: 30px; }

.form-left-inner-addon span {
  position: absolute;
  padding: 8px 12px; }

.form-move-right {
  padding-left: 27px; }

.form-left-margin {
  margin-left: 30px; }

.form-checkbox-div {
  padding: 1px;
  border: 1px #dee2e6 solid; }

.form-radio-div {
  padding: 1px;
  border: 1px #dee2e6 solid; }

.form-select {
  font-family: Montserrat, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, "sans-serif";
  font-size: 100%;
  font-weight: 400;
  border-radius: 0px; }

.form-idn {
  font-family: Consolas, "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", Monaco, "Courier New", "monospace";
  font-size: 200%;
  font-weight: 400;
  color: #bf9540;
  text-align: center; }

input[type="text"]:hover,
input[type="password"]:hover {
  background-color: #f5f8ff; }

input[type="text"]:focus,
input[type="password"]:focus {
  background-color: white; }

input[type="checkbox"] {
  background-color: white;
  border-color: #6699ff; }

input[type="checkbox"]:hover {
  background-color: #ccddff; }

input[type="checkbox"]:focus {
  background-color: white; }

input[type="radio"] {
  background-color: white;
  border-color: #6699ff; }

input[type="radio"]:hover {
  background-color: #ccddff; }

input[type="radio"]:focus {
  background-color: white; }

input[readonly],
input[readonly]:hover,
input[readonly]:focus {
  background-color: ivory;
  box-sizing: none; }

input[type="text"]:disabled {
  background-color: ivory; }

input[type="tel"]:disabled {
  background-color: #dfe3ec; }

input[type="radio"]:disabled + label {
  background-color: ivory; }

.auto-resizable-iframe {
  max-width: 420px;
  margin: 0px auto; }

.auto-resizable-iframe {
  position: relative;
  padding-bottom: 75%;
  height: 0px; }

.auto-resizable-iframe iframe {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%; }

.modals {
  border-radius: 16px;
  padding: 1px 1px 1px 1px;
  background-color: white; }

.fade-in {
  -webkit-animation: fade-in 0.5s cubic-bezier(0.39, 0.575, 0.565, 1) both;
  animation: fade-in 0.5s cubic-bezier(0.39, 0.575, 0.565, 1) both; }

@-webkit-keyframes fade-in {
  0% {
    opacity: 0; }
  100% {
    opacity: 1; } }
@keyframes fade-in {
  0% {
    opacity: 0; }
  100% {
    opacity: 1; } }
.fade-out {
  -webkit-animation: fade-out 0.5s ease-out both;
  animation: fade-out 0.5s ease-out both; }

@-webkit-keyframes fade-out {
  0% {
    opacity: 1; }
  100% {
    opacity: 0; } }
@keyframes fade-out {
  0% {
    opacity: 1; }
  100% {
    opacity: 0; } }
#snackbar {
  visibility: hidden;
  min-width: 250px;
  margin-left: -125px;
  background-color: #333;
  color: #fff;
  text-align: center;
  border-radius: 16px;
  padding: 16px;
  position: fixed;
  z-index: 1;
  left: 128px;
  right: 4px;
  bottom: 30px;
  font-size: 17px; }

#snackbar.show {
  visibility: visible;
  /* Show the snackbar */
  /* Add animation: Take 0.5 seconds to fade in and out the snackbar.
  However, delay the fade out process for 29.5 seconds */
  -webkit-animation: fadein 0.5s, fadeout 0.5s 29.5s;
  animation: fadein 0.5s, fadeout 0.5s 29.5s; }

/* Animations to fade the snackbar in and out */
@-webkit-keyframes fadein {
  from {
    bottom: 0;
    opacity: 0; }
  to {
    bottom: 30px;
    opacity: 1; } }
@keyframes fadein {
  from {
    bottom: 0;
    opacity: 0; }
  to {
    bottom: 30px;
    opacity: 1; } }
@-webkit-keyframes fadeout {
  from {
    bottom: 30px;
    opacity: 1; }
  to {
    bottom: 0;
    opacity: 0; } }
@keyframes fadeout {
  from {
    bottom: 30px;
    opacity: 1; }
  to {
    bottom: 0;
    opacity: 0; } }
.tablehead {
  padding: 15px;
  text-align: left;
  border: solid;
  border-color: #bfbfbf;
  font-family: Montserrat, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, "sans-serif";
  font-weight: 600;
  font-size: 90%;
  color: #60759f;
  background-color: #cfd6e2; }

th {
  padding: 5px;
  text-align: left;
  border: solid;
  border-color: #bfbfbf;
  font-family: Montserrat, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, "sans-serif";
  font-weight: 600;
  font-size: 90%;
  color: #60759f;
  background-color: #cfd6e2;
  vertical-align: middle; }

.tablebody {
  padding: 5px;
  text-align: left;
  border: solid;
  border-color: #bfbfbf;
  font-family: "Roboto Mono", "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, monospace, "sans-serif";
  font-weight: 400;
  font-size: 90%; }

.table-cell {
  padding: 5px;
  text-align: left;
  border: solid;
  border-color: #bfbfbf;
  vertical-align: middle; }

.scale-embbeded-video {
  max-width: 420px;
  margin: 0px auto; }

.scale-embbeded-video div {
  position: relative;
  padding-bottom: 75%;
  height: 0px; }

.scale-embbeded-video iframe {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%; }

em {
  font-weight: 400; }

strong {
  font-weight: 400; }

iframe,
object,
embed {
  width: 100%;
  border: none;
  margin-left: auto;
  margin-right: auto;
  position: relative;
  margin-bottom: 5px; }

.bordered {
  border: 1px solid black; }

.hidden {
  display: none; }

.img-fade {
  /* fade by JS */ }

.logo {
  width: 150px; }

.half-mute {
  color: #737373; }

.mute {
  color: #999999; }

.very-mute {
  color: #bfbfbf; }

.pagelink {
  padding: 2px 4px 2px 4px;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.7px;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.25);
  font-weight: 600;
  text-decoration: none;
  transition: color .2s ease; }

.pagelink:hover {
  background-color: black;
  color: #dfecec; }

::placeholder {
  font-size: 0.7rem;
  font-style: italic;
  opacity: 1;
  /* Firefox */
  color: red; }

:-ms-input-placeholder {
  /* Internet Explorer 10-11 */
  font-size: 0.7rem;
  font-style: italic;
  color: red; }

::-ms-input-placeholder {
  /* Microsoft Edge */
  font-size: 0.7rem;
  font-style: italic;
  color: red; }

.amount {
  display: inline-block;
  width: 44px;
  font-variant-numeric: tabular-nums; }

.red {
  color: red; }

.green {
  color: green; }

.blue {
  color: blue; }

.yellow {
  color: yellow; }

.grey {
  color: grey; }

.white {
  color: white; }

.black {
  color: black; }

/*
https://www.stechies.com/make-text-blink-javascript/#4
*/
.blink_red {
  background-color: yellow;
  -webkit-animation: blink_red 800ms linear;
  -moz-animation: blink_red 800ms linear;
  -ms-animation: blink_red 800ms linear;
  -o-animation: blink_red 800ms linear;
  animation: blink_red 800ms linear;
  animation-iteration-count: 2;
  animation-fill-mode: backwards; }

@-webkit-keyframes blink_red {
  0% {
    opacity: 1; }
  50% {
    opacity: 1; }
  50.01% {
    opacity: 0; }
  100% {
    opacity: 0; } }
@-moz-keyframes blink_red {
  0% {
    opacity: 1; }
  50% {
    opacity: 1; }
  50.01% {
    opacity: 0; }
  100% {
    opacity: 0; } }
@-o-keyframes blink_red {
  0% {
    opacity: 1; }
  50% {
    opacity: 1; }
  50.01% {
    opacity: 0; }
  100% {
    opacity: 0; } }
@keyframes blink-text {
  0% {
    opacity: 1; }
  50% {
    opacity: 1; }
  50.01% {
    opacity: 0; }
  100% {
    opacity: 0; } }
@-webkit-keyframes change_background_color_pink {
  to {
    background-color: rgba(255, 192, 203, 0.5); } }
@-moz-keyframes change_background_color_pink {
  to {
    background-color: pink; } }
@keyframes change_background_color_pink {
  to {
    background-color: pink; } }
.pulsate-pink {
  -webkit-animation-name: change_background_color_pink;
  -moz-animation-name: change_background_color_pink;
  -ms-animation-name: change_background_color_pink;
  animation-name: change_background_color_pink;
  -webkit-animation-duration: 0.5s;
  -moz-animation-duration: 0.5s;
  -ms-animation-duration: 0.5s;
  animation-duration: 0.5s;
  -webkit-animation-iteration-count: 9999;
  -moz-animation-iteration-count: 9999;
  -ms-animation-iteration-count: 9999;
  animation-iteration-count: 9999;
  -webkit-animation-direction: alternate;
  -moz-animation-direction: alternate;
  -ms-animation-direction: alternate;
  animation-direction: alternate;
  -webkit-animation-timing-function: ease-in-out;
  -moz-animation-timing-function: ease-in-out;
  -ms-animation-timing-function: ease-in-out;
  animation-timing-function: ease-in-out; }

#iDebuggerHeader {
  font-family: Consolas, "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", Monaco, "Courier New", "monospace";
  display: flex;
  justify-content: center;
  align-items: center; }

#iDebuggerLevel,
#iDebuggerList,
#iDebuggerFileSize,
#iDebuggerScreenSize,
#iDebuggerClock,
#iDebuggerToggles {
  font-family: Consolas, "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", Monaco, "Courier New", "monospace";
  display: flex;
  justify-content: center;
  align-items: center; }

#iDebuggerData {
  font-family: "Roboto Mono", "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, monospace, "sans-serif";
  font-size: 120%; }

#iDebuggerData td {
  font-family: "Roboto Mono", "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, monospace, "sans-serif";
  font-size: 80%; }

#iDebuggerData td strong {
  font-family: "Roboto Mono", "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, monospace, "sans-serif";
  font-size: 120%;
  font-weight: 700; }

/*
    .col- (extra small devices - screen width less than 576px)
    .col-sm- (small devices - screen width equal to or greater than 576px)
    .col-md- (medium devices - screen width equal to or greater than 768px)
    .col-lg- (large devices - screen width equal to or greater than 992px)
    .col-xl- (xlarge devices - screen width equal to or greater than 1200px)
*/
@media only screen {
  .img-fit {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 100%; }

  #iDebuggerData {
    font-family: "Roboto Mono", "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, monospace, "sans-serif";
    font-size: 100%; }

  #iDebuggerData td {
    font-family: "Roboto Mono", "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, monospace, "sans-serif";
    font-size: 60%; }

  #iDebuggerData td strong {
    font-family: "Roboto Mono", "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, monospace, "sans-serif";
    font-size: 120%;
    font-weight: 700; }

  #iDebuggerClock,
  #iDebuggerScreenSize,
  #iDebuggerFileSize {
    font-size: 58%; } }
@media only screen and (min-width: 200px) and (max-width: 300px) {
  body,
  div,
  p {
    font-size: 97%; }

  legend {
    font-size: 84%; }

  .title {
    font-size: 80%; }

  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    font-size: 110%; }

  .mycontainer {
    margin: auto;
    max-width: 200px; }

  .mycontainer-wide {
    margin: auto;
    max-width: 200px; }

  .mycontainer-form {
    margin: auto;
    max-width: 200px; }

  .mycontainer-info {
    margin: auto;
    max-width: 200px; }

  .mycontainer-info-outer {
    margin: auto;
    max-width: 210px; }

  .btn-general {
    font-size: 95%;
    width: 60%; }

  .btn-navbar {
    font-size: 100%;
    height: 28px; }

  .dropdown-item {
    font-size: 55%; }

  .form-color {
    padding: 0px; }

  .logo {
    width: 90px; }

  .footbar {
    font-size: 70%; }

  .snackbar {
    font-size: 70%;
    margin-left: 28px; }

  #snackbar {
    padding: 2px;
    left: 100px;
    right: 0px;
    bottom: 20px;
    font-size: 16px; }

  #iDebuggerClock,
  #iDebuggerScreenSize,
  #iDebuggerFileSize {
    font-size: 62%; } }
@media only screen and (min-width: 301px) and (max-width: 400px) {
  body,
  div,
  p {
    font-size: 100%; }

  legend {
    font-size: 96%; }

  .title {
    font-size: 96%; }

  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    font-size: 125%; }

  .mycontainer {
    margin: auto;
    max-width: 300px; }

  .mycontainer-wide {
    margin: auto;
    max-width: 300px; }

  .mycontainer-form {
    margin: auto;
    max-width: 300px; }

  .mycontainer-info {
    margin: auto;
    max-width: 300px; }

  .mycontainer-info-outer {
    margin: auto;
    max-width: 310px; }

  .btn-general {
    font-size: 85%;
    width: 60%; }

  .btn-navbar {
    font-size: 120%;
    height: 28px; }

  #iDebuggerClock,
  #iDebuggerScreenSize,
  #iDebuggerFileSize {
    font-size: 70%; } }
@media only screen and (min-width: 401px) and (max-width: 600px) {
  body,
  div,
  p {
    font-size: 100%; }

  .title {
    font-size: 96%; }

  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    font-size: 120%; }

  .mycontainer {
    margin: auto;
    max-width: 400px; }

  .mycontainer-wide {
    margin: auto;
    max-width: 400px; }

  .mycontainer-form {
    margin: auto;
    max-width: 400px; }

  .mycontainer-info {
    margin: auto;
    max-width: 400px; }

  .mycontainer-info-outer {
    margin: auto;
    max-width: 410px; }

  .btn-navbar {
    font-size: 80%; }

  #iDebuggerClock,
  #iDebuggerScreenSize,
  #iDebuggerFileSize {
    font-size: 86%; } }
@media only screen and (min-width: 601px) and (max-width: 768px) {
  body,
  div,
  p {
    font-size: 100%; }

  .title {
    font-size: 105%; }

  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    font-size: 140%; }

  .mycontainer {
    margin: auto;
    max-width: 540px; }

  .mycontainer-wide {
    margin: auto;
    max-width: 600px; }

  .mycontainer-form {
    margin: auto;
    max-width: 480px; }

  .mycontainer-info {
    margin: auto;
    max-width: 540px; }

  .mycontainer-info-outer {
    margin: auto;
    max-width: 550px; }

  .btn-navbar {
    font-size: 100%;
    font-weight: 500; }

  #iDebuggerClock,
  #iDebuggerScreenSize,
  #iDebuggerFileSize {
    font-size: 110%; } }
@media only screen and (min-width: 769px) and (max-width: 992px) {
  body,
  div,
  p {
    font-size: 100%; }

  .title {
    font-size: 110%; }

  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    font-size: 140%; }

  .mycontainer {
    margin: auto;
    max-width: 540px; }

  .mycontainer-wide {
    margin: auto;
    max-width: 600px; }

  .mycontainer-form {
    margin: auto;
    max-width: 480px; }

  .mycontainer-info {
    margin: auto;
    max-width: 540px; }

  .mycontainer-info-outer {
    margin: auto;
    max-width: 550px; }

  .btn-navbar {
    font-size: 100%;
    font-weight: 500; }

  #iDebuggerClock,
  #iDebuggerScreenSize,
  #iDebuggerFileSize {
    font-size: 110%; } }
@media only screen and (min-width: 993px) and (max-width: 1260px) {
  .title {
    font-size: 130%; }

  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    font-size: 140%; }

  .mycontainer {
    margin: auto;
    max-width: 800px; }

  .mycontainer-wide {
    margin: auto;
    max-width: 990px; }

  .mycontainer-form {
    margin: auto;
    max-width: 480px; }

  .mycontainer-info {
    margin: auto;
    max-width: 600px; }

  .mycontainer-info-outer {
    margin: auto;
    max-width: 610px; }

  .nav-flags {
    gap: 6px;
    /* desktop može manji spacing */ }

  #iDebuggerClock,
  #iDebuggerScreenSize,
  #iDebuggerFileSize {
    font-size: 130%; } }
@media only screen and (min-width: 1261px) {
  .title {
    font-size: 130%; }

  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    font-size: 140%; }

  .mycontainer {
    margin: auto;
    max-width: 800px; }

  .mycontainer-wide {
    margin: auto;
    max-width: 1200px; }

  .mycontainer-form {
    margin: auto;
    max-width: 480px; }

  .mycontainer-info {
    margin: auto;
    max-width: 600px; }

  .mycontainer-info-outer {
    margin: auto;
    max-width: 610px; }

  .nav-flags {
    gap: 6px;
    /* desktop može manji spacing */ }

  #iDebuggerClock,
  #iDebuggerScreenSize,
  #iDebuggerFileSize {
    font-size: 150%; } }