@import url('https://fonts.googleapis.com/css2?family=Ubuntu&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Ubuntu+Mono&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono:ital,wght@0,100..700;1,100..700&display=swap');

:root {
  --backGndBody: linear-gradient(to right, #99A3A3, #e9e9e9);
  --boxShadow: 3px 3px 3px #08154140;
  --boxShadow2: 1px 1px 10px 0px rgba(74, 120, 120, 0.2);
  --boxShadowBtn: 4px 4px 4px #808080;
  --btnColor: #9fa9a6;
  --btnHoverColor: #F5FFFA;
  --codeColor: rgb(165, 165, 165);
  --codeColor2: rgb(165, 165, 165, 0.6);
  --commentColor: #1f613c;
  --dark: #2f4f4f;
  --dashedLineColor: rgb(53, 149, 53, 0.4);
  --displayBackground: rgba(0, 0, 0, 0.902);
  --fontFamily_1: "Ubuntu", sans-serif;
  --fontFamily_2: "Ubuntu+Mono", Courier, monospace;
  --fontFamily_3: "Roboto Mono", monospace;
  --grayColor: gray;
  --grayColorLight: lightgray;
  --grayColorDark: darkgray;
  --inputColor: #64baba;
  --light: #00E1E1;
  --inputStr: #ccd0ce;
  --notesColor: darkmagenta;
  --outputColor: hotpink;
  --titleColor: #A9A9A9;
  --underline: rgba(0, 0, 0, 0.4);
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--fontFamily_1);
  font-size: 14px;
  color: var(--dark);
  background-color: var(--titleColor);
  background-image: var(--backGndBody);
  background-repeat: no-repeat;
  background-size: auto;
}

#mainContainer {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

#displayResult,
#displayResult3,
#displayBox,
#notesContainer {
  max-width: 900px;
}

#inputBox,
#inputBox2 {
  display: flex;
  flex-direction: column;
  width: 900px;
  min-height: 205px;
  padding: 16px 12px 14px 12px;
  margin: 20px 0px 20px 0px;
  border: 1px solid var(--grayColor);
}

#inputBox2 {
  flex-direction: row;
  min-height: auto;
  width: auto;
  border: none;
  margin: 0px;
  padding: 0px 0px 15px 0px;
}

#inputBox2Text {
  padding: 10px 0px 0px 6px;
}

#inputBox:hover {
  box-shadow: var(--boxShadow2);
}

#btns {
  display: flex;
  flex-direction: row;
}

#logo,
#logo2,
#logo3 {
  background-color: var(--dark);
  height: 80px;
  width: inherit;
  letter-spacing: 1.4px;
  padding: 14px 14px 0px 8px;
  margin: 20px 0;
}

#logo2 {
  height: 93px;
  padding: 10px 14px 0px 8px;
}

#logo3 {
  height: 110px;
  padding: 10px 14px 0px 8px;
}

.titleMsg {
  background-color: var(--dark);
  font-size: 14px;
  letter-spacing: 1px;
  padding: 6px 10px 14px 4px;
  margin: 0px 0px 10px 0px;
}

.titleMsg .titleDesc {
  letter-spacing: 1px;
}

span.titleDesc,
span.titleDesc2,
span.titleDesc3 {
  color: var(--grayColorLight);
  font-size: 16px;
  padding-left: 10px;
  text-decoration: underline;
  text-decoration-color: darkgoldenrod;
  text-underline-offset: 9px;
  text-decoration-thickness: 1px;
}

span.titleDesc3 {
  color: #A5A5A5;
}

.subTitle,
.subTitle2 {
  color: var(--codeColor);
  padding-left: 10px;
  margin-top: 12px;
}

.subTitle2 {
  margin-top: 6px;
}

.subTitle3,
.subTitle4,
.subTitle5,
.subTitle6,
.subTitle7,
.subTitle8,
.subTitle9 {
  color: var(--codeColor2);
  font-size: 12px;
  padding-left: 10px;
  margin-top: 6px;
}

.subTitle4 {
  margin-top: 6px;
}

.subTitle5 {
  margin-top: 12px;
}

.subTitle6 {
  font-size: 13px;
  padding-left: 0px;
}

.subTitle7 {
  font-size: 13px;
  padding-left: 0px;
}

.subTitle8,
.subTitle9 {
  color: var(--codeColor);
  font-size: 13px;
  padding-left: 10px;
  margin-top: 12px;
}

.subTitle9 {
  margin-top: 4px;
}

input {
  background-color: var(--lighter);
  color: var(--dark);
  font-family: var(--fontFamily_1);
  font-size: 16px;
  height: 32px;
  letter-spacing: 1px;
  border: 1px solid var(--dark);
  outline: none;
}

input:hover {
  box-shadow: var(--boxShadow);
  transition: 0.4s ease-in-out;
}

input::placeholder {
  font-size: 14px;
  opacity: 0.7;
}

#input1,
#input2,
#input3,
#input6,
#input7,
#input8,
#input9,
#input10,
#input11,
#selected1 {
  background-color: var(--inputStr);
  color: var(--dark);
  width: 520px;
  font-size: 18px;
  text-align: left;
  padding-left: 10px;
  cursor: pointer;
}

#input1,
#input9,
#input10,
#input11 {
  margin-bottom: 20px;
}

#input2,
#input3,
#input4,
#input5,
#input7,
#input8 {
  width: 30px;
  text-align: center;
  padding-left: 0px;
}

#input3,
#input7 {
  width: 60px;
}

#input4 {
  width: 70px;
}

#input5 {
  width: 84px;
}

#input8 {
  width: 100px;
  text-align: left;
  padding-left: 14px;
}

select {
  font-family: inherit;
  font-size: inherit;
  cursor: inherit;
}

#selected1 {
  font-size: 14px;
  padding: 6px 0 6px 8px;
  margin: 6px 0px 20px 0px;
  outline: none;
}

#selected1 option {
  background-color: var(--lighter);
  color: var(--dark);
}

#selected1:hover {
  box-shadow: var(--boxShadow);
  transition: 0.4s ease-in-out;
}

#selected1 option[disabled] {
  background-color: #99a3a3;
  color: black;
}

::selection {
  color: #202020;
  background: darkgoldenrod;
}

a {
  color: #a5a5a5;
  text-decoration: none;
  font-size: 16px;
}

a:hover {
  color: #d0d0d0;
  box-shadow: var(--boxShadow);
  transition: 0.4s ease-in-out;
}

#userInput1,
#userInput2,
#userInput3,
#userInput4,
#userInput5 {
  background-color: var(--inputStr);
  color: var(--dark);
  width: 60px;
  font-size: 18px;
  text-align: left;
  padding-left: 10px;
  cursor: pointer;
}

#userInput4,
#userInput5 {
  width: 160px;
}

.userInput {
  display: flex;
  margin-bottom: 10px;
}

#inputDesc,
#inputDesc1,
#inputDesc2 {
  display: flex;
}

#inputLabel {
  padding: 10px 0px 0px 10px;
}

.inputLabel2 {
  padding: 10px 0px 0px 10px;
  vertical-align: middle;
}

.userInputs {
  display: flex;
  flex-direction: column;
}

#desc {
  overflow-wrap: break-word;
  line-height: 1.6;
  margin: 8px 0px 20px 0px;
}

#displayResult,
#displayResult2,
#displayResult3 {
  font-size: 15px;
  color: var(--codeColor);
  min-height: 430px;
  letter-spacing: 1.4px;
  overflow-wrap: break-word;
  padding: 10px 20px 22px 20px;
  background-color: var(--displayBackground);
  box-shadow: var(--boxShadow2);
}

#displayResult p,
#displayResult3 p {
  line-height: 2;
  overflow-wrap: break-word;
}

#displayResult2 {
  min-height: auto;
  line-height: 1.4;
  padding: 0px 20px 30px 20px;
  box-shadow: none;
}

.centeredBox1 {
  width: 315px;
  margin-left: -16px;
}

.centeredBox2 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.centeredBox3 {
  width: 320px;
}

.nowrap {
  white-space: nowrap;
}

span.spaces {
  padding: 0px 16px;
}

span.spaces2 {
  padding: 0px 4px;
}

span.inputColor {
  color: var(--inputColor);
}

span.resultColor {
  color: var(--outputColor);
}

.chessboard {
  color: var(--dark);
  line-height: 1.1;
  margin: 10px 0px;
}

#chessboard2 {
  font-size: 15px;
  color: var(--outputColor);
  line-height: 1.1;
  letter-spacing: 5px;
}

span.codeColor {
  color: darkgoldenrod;
}

span.title {
  color: var(--titleColor);
  font-size: 20px;
  padding-left: 2px;
  letter-spacing: 1.4px;
}

span.emptyStr {
  padding-left: 2px;
  letter-spacing: 1.4px;
}

#notesContainer {
  padding: 10px 8px 14px 10px;
  border: 1px solid var(--grayColor);
  text-wrap: wrap;
  line-height: 2;
  overflow-wrap: break-word;
}

span.notesColor,
span.originalStr,
span.originalStr2,
span.originalStr3,
span.originalStr4,
span.originalStr5,
span.reversedStr,
span.superScriptBase,
span.strResult,
span.strResult2,
span.strResult3 {
  background-color: var(--displayBackground);
  color: var(--outputColor);
  font-size: 16px;
  letter-spacing: 1.4px;
  padding: 5px 8px 6px 10px;
  font-weight: normal;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

span.originalStr {
  color: var(--inputColor);
  margin-bottom: 24px;
  overflow-wrap: anywhere;
}

span.originalStr2 {
  color: var(--grayColor);
  padding: 5px 0px 6px 0px;
}

span.originalStr3 {
  color: var(--inputColor);
  padding: 5px 2px 6px 8px;
}

span.originalStr4 {
  color: var(--inputColor);
  padding: 5px 8px 6px 2px;
}

span.originalStr5,
span.originalStr6 {
  background-color: transparent;
  color: var(--dark);
  letter-spacing: 0.4px;
  font-size: 14px;
  padding: 0px;
  line-height: 1.55;
}

span.originalStr6 {
  background-color: transparent;
  color: var(--commentColor);
  letter-spacing: 1px;
  padding: 0px;
}

span.superScriptBase {
  color: var(--inputColor);
  padding: 5px 10px 6px 10px;
}

span.reversedStr,
span.strResult,
span.strResult2 {
  color: var(--outputColor);
  overflow-wrap: anywhere;
}

span.strResult2 {
  color: var(--grayColor);
  font-size: 14px;
}

span.strResult3 {
  font-size: 14px;
  background-color: rgb(114, 135, 132);
  color: #203030;
  padding: 4px 6px 4px 8px;
}

span.strText,
span.strText2 {
  display: inline-block;
  vertical-align: middle;
  padding-left: 2px;
  line-height: 2;
  letter-spacing: 0.6px;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

span.strText2 {
  vertical-align: baseline;
}

p.strText3 {
  padding-top: 10px;
}

span.sumResult {
  background-color: rgb(114, 135, 132);
  color: rgb(114, 135, 132);
  color: #203030;
  font-size: 16px;
  letter-spacing: 1.4px;
  line-height: 1.4;
  padding: 5px 8px 6px 10px;
}

span.root {
  color: #203030;
  font-weight: 500;
}

.preStr {
  white-space: pre-wrap;
}

pre {
  font-family: var(--fontFamily_1);
  font-size: 14px;
  line-height: 1.6;
  padding-left: 8px;
  margin: 0;
}

.scrollBox,
.scrollBox2 {
  padding: 0px 10px 0px 0px;
  margin-right: 6px;
  overflow-x: auto;
  scrollbar-color: gray transparent;
  scrollbar-width: thin;
}

.scrollBox2 {
  text-wrap: nowrap;
  padding-bottom: 10px;
}

.endPointBox {
  padding: 6px 10px 12px 0px;
  overflow-x: auto;
  scrollbar-color: gray transparent;
  scrollbar-width: thin;
}

span.notesColor1,
span.notesColor2,
span.notesColor3,
span.notesColor4,
span.notesColor5,
span.notesColor6,
span.notesColor7,
span.notesColor8,
span.notesColor9,
span.notesColor10,
span.notesColor11,
span.notesColor12,
span.notesColor13,
span.notesColor14,
span.notesColor15,
span.notesColor16,
span.notesColor17,
span.notesColor18,
span.notesColor19,
span.notesColor20,
span.notesColor21,
span.notesColor22,
span.notesColor23,
span.notesColor24,
span.notesColor25,
span.notesColor26,
span.notesColor27,
span.notesColor28,
span.notesColor29,
span.notesColor30,
span.notesColor31,
span.notesColor32,
span.notesColor33,
span.notesColor34,
span.notesColor35,
span.notesColor36,
span.notesColor37,
span.notesColor38,
span.notesColor39,
span.notesColor40,
span.notesColor41,
span.notesColor42,
span.notesColor43,
span.notesColor44,
span.notesColor45,
span.notesColor46,
span.notesColor47,
span.notesColor48,
span.notesColor49,
span.notesColor50,
span.notesColor51,
span.notesColor52,
span.descColor {
  background-color: var(--dark);
  color: var(--grayColorLight);
  letter-spacing: 1.4px;
  padding: 3px 1px 4px 1px;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

span.notesColor1 {
  color: #c3c3c3;
}

span.notesColor2 {
  color: var(--grayColorDark);
  padding: 3px 6px 4px 8px;
  line-height: 0;
}

span.notesColor3 {
  color: var(--grayColorLight);
  padding: 3px 6px 4px 8px;
}

span.notesColor4 {
  color: var(--grayColorDark);
  padding: 3px 6px 4px 0px;
}

span.notesColor5 {
  color: var(--grayColorLight);
  padding: 3px 0px 4px 8px;
}

span.notesColor6 {
  color: var(--grayColorDark);
  padding: 6px 8px 6px 8px;
  line-height: 0;
}

span.notesColor7 {
  color: var(--grayColorDark);
  padding: 6px 8px 6px 18px;
  line-height: 0;
}

span.notesColor8 {
  color: var(--grayColorLight);
  padding: 6px 8px 6px 8px;
  line-height: 0;
}

span.notesColor9 {
  color: var(--grayColorDark);
  padding: 6px 8px 6px 26px;
  line-height: 0;
}

span.notesColor10,
span.notesColor11 {
  color: var(--grayColorDark);
  padding: 4px 6px 5px 6px;
  letter-spacing: 1.2px;
}

span.notesColor11 {
  letter-spacing: 1.4px;
}

span.notesColor12 {
  color: darkgoldenrod;
}

span.notesColor13 {
  color: gray;
  padding: 6px 8px 6px 26px;
  line-height: 0;
}

span.notesColor14 {
  color: var(--grayColorDark);
  padding: 6px 8px 6px 32px;
  line-height: 0;
}

span.notesColor15 {
  color: rgb(128, 128, 128);
  padding: 3px 6px 4px 8px;
  line-height: 0;
}

span.notesColor16 {
  color: var(--grayColorDark);
  padding: 6px 8px 6px 40px;
  line-height: 0;
}

span.notesColor17 {
  color: darkgoldenrod;
  padding: 3px 0px 4px 0px;
  line-height: 0;
}

span.notesColor18 {
  color: rgb(198, 154, 121);
  padding: 3px 0px 4px 0px;
  line-height: 0;
}

span.notesColor19 {
  color: darkgoldenrod;
  padding: 6px;
  line-height: 0;
}

span.notesColor20 {
  color: darkseagreen;
  padding: 3px 4px 4px 6px;
  line-height: 0;
}

span.notesColor21 {
  color: var(--grayColorDark);
  padding: 6px 0px 6px 8px;
  line-height: 0;
}

span.notesColor22,
span.notesColor26,
span.notesColor37 {
  color: var(--grayColorDark);
  padding: 6px 6px 6px 0px;
  line-height: 0;
}

span.notesColor23,
span.notesColor24,
span.notesColor27,
span.notesColor30,
span.notesColor32 {
  background-color: rgb(84, 122, 116);
  color: #bbb;
  padding: 1px 4px 2px 6px;
}

span.notesColor24 {
  padding: 3px 6px 5px 8px;
}

span.notesColor25,
span.notesColor29,
span.notesColor31,
span.notesColor34,
span.notesColor36,
span.notesColor45 {
  background-color: rgb(114, 135, 132);
  color: #203030;
  padding: 4px 4px 4px 4px;
}

span.notesColor26 {
  padding: 6px 0px 6px 0px;
}

span.notesColor27 {
  padding: 3px 4px 3px 8px;
}

span.notesColor28 {
  background-color: rgb(114, 135, 132);
  color: rgb(114, 135, 132);
  padding: 6px 8px 6px 8px;
}

span.notesColor29,
span.notesColor34 {
  padding: 3px 6px 5px 8px;
}

span.notesColor30 {
  padding: 6px 6px 6px 6px;
}

span.notesColor31 {
  padding: 6px 6px 6px 6px;
}

span.notesColor32 {
  line-height: 6px;
  padding: 6px 8px 6px 8px;
}

span.notesColor33 {
  color: var(--grayColorDark);
  padding: 5px 6px 4px 8px;
  line-height: 0;
}

span.notesColor34 {
  font-weight: 500;
  padding: 6px 6px 6px 6px;
}

span.notesColor35 {
  color: #888B90;
  padding: 6px 8px 6px 18px;
}

span.notesColor36 {
  color: rgb(114, 135, 132);
  padding: 7px 9px
}

span.notesColor37 {
  color: var(--grayColorDark);
  padding: 6px 0px 6px 0px;
}

span.notesColor38 {
  color: var(--grayColorDark);
  padding: 6px 0px 6px 18px;
}

span.notesColor39 {
  color: var(--grayColorDark);
  padding: 6px 6px 6px 0px;
}

span.notesColor40 {
  color: var(--grayColorDark);
  padding: 6px 0px 6px 26px;
}

span.notesColor41 {
  color: var(--grayColorDark);
  padding: 6px 6px 6px 0px;
}

span.notesColor42 {
  color: var(--grayColorDark);
  padding: 6px 0px 6px 0px;
}

span.notesColor43 {
  color: var(--grayColorDark);
  padding: 6px 0px 6px 0px;
}

span.notesColor44,
span.notesColor46,
span.notesColor49 {
  background-color: rgb(114, 135, 132);
  color: #203030;
  padding: 6px 8px 6px 8px;
}

span.notesColor45 {
  font-family: var(--fontFamily_2);
  font-size: 15px;
  letter-spacing: 7px;
  padding: 2px 2px 8px 8px;
}

span.notesColor46 {
  line-height: 2;
}

span.notesColor47 {
  background-color: rgb(114, 135, 132);
  color: #203030;
  line-height: 1.6;
  padding: 4px 4px 4px 4px;
}

span.notesColor48 {
  background-color: rgb(84, 122, 116);
  font-family: var(--fontFamily_2);
  color: #bbb;
  padding: 6px 8px 6px 8px;
}

span.notesColor49 {
  font-family: var(--fontFamily_2);
  font-size: 16px;
  font-weight: 700;
}

span.notesColor50 {
  background-color: rgb(114, 135, 132);
  color: #203030;
  font-family: var(--fontFamily_2);
  padding: 6px 4px 6px 4px;
  font-weight: 600;
}

span.notesColor51,
span.notesColor52 {
  font-family: var(--fontFamily_2);
  background-color: rgb(114, 135, 132);
  color: #203030;
  padding: 6px 8px 6px 8px;
}

span.notesColor52 {
  background-color: rgb(84, 122, 116);
  color: #bbb;
}

span.descColor {
  font-size: 16px;
  color: var(--grayColorDark);
  padding: 8px;
  line-height: 1.8;
}

span.normalTxt {
  font-size: 14px;
}

span.font_sm {
  color: gray;
  font-size: 14px;
}

span.sm {
  font-family: var(--fontFamily_1);
  font-size: 13px;
}

.syntaxColor {
  color: goldenrod;
}

span.syntaxColor2 {
  color: #40aeda;
}

span.syntaxColor3 {
  color: rgb(57, 148, 131);
}

span.syntaxColor4 {
  color: #e6e8e7;
  font-weight: 550;
}

span.syntaxColor5 {
  color: #a43e3e;
}

span.syntaxColor6,
span.syntaxColor7,
span.syntaxColor13 {
  color: #024015;
  font-size: 14px;
  padding-left: 2px;
}

span.syntaxColor7 {
  color: #9e2c2c;
}

span.syntaxColor8,
span.syntaxColor11 {
  color: #8f6cbd;
}

span.syntaxColor9 {
  color: #aa8b30;
}

/* ARRAY ERROR MSG */
span.syntaxColor10 {
  color: gray;
}

span.syntaxColor11 {
  padding: 0px 1px;
}

span.syntaxColor12 {
  color: #6bb6ae;
}

span.syntaxColor13 {
  font-size: 9px;
}

span.syntaxColor14 {
  color: darkred;
}

span.syntaxColor15 {
  color: rgb(114, 135, 132);
  font-size: 13px;
}

span.syntaxColor16 {
  color: #565051;
}

span.syntaxColor17 {
  color: #829F82;
}

span.syntaxColor18 {
  background-color: rgb(114, 135, 132);
  color: #adb7b0;
  padding: 6px 4px;
}

span.syntaxColor19 {
  background-color: #2f4f4f;
  color: #a5a5a5;
  font-size: 16px;
  padding: 5px 10px 6px 10px;
}

span.paramColor {
  color: steelblue;
}

span.paramColor2 {
  color: steelblue;
}

span.paramColor3 {
  color: #c16abe;
}

span.commentColor,
span.commentColor2,
span.commentColor3,
span.commentColor4,
span.commentColor5 {
  color: var(--commentColor);
  font-size: 14px;
  padding-left: 8px;
  letter-spacing: 1.2px;
  display: inline;
}

.lineH {
  line-height: 2.2;
}

.lineH2 {
  line-height: 2;
}

.underline {
  text-decoration: underline;
}

.underline2 {
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: gray;
}

.underline3 {
  border: 0;
  border-bottom: 1px dotted darkgoldenrod;
  padding-bottom: 2px;
}

.pad6 {
  padding-left: 3px !important
}

.pad7 {
  padding: 0 2px;
}

.pad8 {
  padding: 0 4px;
}

.pad9 {
  padding: 0 66px;
}

.pad10 {
  padding: 0 107px;
}

.pad12 {
  padding: 0 8px;
}

.hide {
  display: inline;
}

.hide2 {
  display: none;
}

span.commentColor2 {
  padding-left: 10px;
}

span.commentColor3,
span.commentColor4 {
  padding-left: 0px;
}

span.code {
  font-family: monospace;
  font-size: 12px;
}

.btn {
  font-family: var(--fontFamily_1);
  background-color: var(--btnColor);
  width: 110px;
  height: 28px;
  font-size: 14px;
  letter-spacing: 1.5px;
  cursor: pointer;
}

.btn:hover {
  background-color: var(--dark);
  color: var(--btnHoverColor);
  box-shadow: var(--boxShadowBtn);
  transition: 0.4s ease-in-out;
}

#inputBtn {
  width: 134px;
}

#inputBtn2 {
  width: 176px;
}

#inputBtn3,
#inputBtn4 {
  width: 200px;
}

#inputBtn4 {
  font-size: 13px;
  letter-spacing: 1.2px;
}

#clearBtn {
  width: 66px;
  margin-left: 10px;
}

#btnReset {
  width: 66px;
}

#howTo {
  font-size: 18px;
  padding-top: 28px;
  margin-top: 20px 0;
  letter-spacing: 1.4px;
}

#howTo a {
  color: var(--dark);
  text-decoration: none;
}

#howTo a:hover {
  text-decoration: underline;
  text-decoration-color: var(--dark);
  text-underline-offset: 10px;
  text-decoration-thickness: 3px;
}

#resetPage {
  display: flex;
  justify-content: space-between;
  align-items: end;
}

.flag-img {
  display: block;
  width: 75%;
  min-width: 7.5em;
  margin: 40px auto;
}


/* LOTTERY NUMBERS */
.circle {
  display: inline-block;
  background-color: rgb(254, 125, 190);
  color: #000;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  text-align: center;
  line-height: 40px;
  margin: 5px;
}

/* PAGE EXPAND/COLLAPSE */
.content {
  display: none;
  margin: 6px 0;
}

#collapse,
#expandCollapse {
  font-family: var(--fontFamily_3);
  background-color: transparent;
  color: #7e8d8d;
  font-size: 13px;
  padding: 4px 0px 4px 4px;
  border: none;
  cursor: pointer;
}

#expandCollapse {
  display: flex;
  justify-content: right;
  background-image: linear-gradient(to right, #99a3a3, #7e8d8d, #637878, #496363, #2f4f4f);
  outline: none;
  padding: 4px 12px 5px 4px;
  margin-right: 4px;
  cursor: pointer;
}

#expandCollapse:hover,
#collapse:hover {
  color: #99a3a3;
}

/* display random color */
.boxColorContainer {
  min-height: auto;
  min-width: auto;
}

.displayResult2Color {
  background-color: var(--displayBackground);
  padding: 0 20px 20px 20px;
}

#colorBox {
  height: 28px;
  width: 28px;
  margin: 0px;
}

#colorBox1,
#colorBox2,
#colorBox3 {
  background-color: #ab4351;
  color: #ab4351;
  padding: 2px;
  border: 1px solid #2f4f4f;
}

#colorBox2 {
  background-color: #b48a2e;
  color: #b48a2e;
}

#colorBox3 {
  background-color: #769e96;
  color: #769e96;
}

#result,
#result2 {
  margin-top: 16px;
}

#up {
  display: flex;
  justify-content: center;
  align-items: end;
  width: 30px;
  height: 48px;
  font-size: 16px;
}

#up a {
  color: var(--grayColor);
  text-decoration: none;
  transition: 0.4s ease-in-out;
}

#up a:hover {
  color: #000;
  box-shadow: none;
}

hr.dashedLine {
  border: 0;
  border-top: 1px dashed var(--dashedLineColor);
  margin: 15px 5px 15px 0px;
}

hr.line {
  border: 0;
  border-top: 1px dotted var(--grayColor);
  margin: 15px 5px 15px 0px;
}

.spacer1 {
  margin: 20px 0px
}

.spacer2 {
  margin-top: 20px;
}

.spacer3 {
  margin-bottom: 4px;
}

.spacer4 {
  padding: 2px 0px 0px 6px;
}

.spacer5 {
  margin-bottom: 6px;
}

.spacer6 {
  line-height: 1.8;
  margin-bottom: 16px;
}

.spacer7 {
  line-height: 2;
}

.spacer8 {
  margin: 0px;
  line-height: 1.8;
}

.spacer9 {
  margin-top: 6px;
}

.spacer10 {
  margin-top: 2px;
}

.spacer11 {
  margin-top: 12px;
}

.spacer12 {
  font-size: 12px;
}

.spacer13 {
  margin-top: 3px;
}

.spacer15 {
  margin-top: 6px;
}

.spacer16 {
  line-height: 1.8;
  margin-bottom: 16px;
}

.spacer17 {
  padding: 6px 0px 0px 6px;
}

.spacer18 {
  margin: 10px 0px;
  line-height: 2;
}

.spacer19 {
  margin-top: 6px;
  line-height: 1.6;
}

.spacer20 {
  margin-top: 20px;
}

.spacer21 {
  margin-top: 32px;
}

.spacer22 {
  margin-top: 14px;
}

.padCode1 {
  padding-left: 10px;
}

.padCode2 {
  padding-left: 24px;
}

.padCode3 {
  padding-left: 38px;
}

.padCode4 {
  padding-left: 52px;
}

.pad2 {
  padding-left: 16px !important
}

.pad3 {
  padding-left: 16px
}

.pad4 {
  padding-left: 34px !important
}

.pad5 {
  padding-left: 34px !important
}

.formatMsg {
  color: gray;
}

.nocopy {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* SCROLL BAR */
::-webkit-scrollbar {
  width: 10px;
}

/* Track */
::-webkit-scrollbar-track {
  background: transparent;
}

/* Handle */
::-webkit-scrollbar-thumb {
  background: #888;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #555;
}


/* toggle switch */
.switch {
  position: relative;
  display: inline-block;
  width: 56px;
  height: 26px;
}

.toggleInput,
.toggleInput2 {
  display: flex;
  flex-direction: row;
  align-items: center;
  width: 350px;
  margin-top: 16px;
}

.toggleInput2 {
  margin: 0px;
}

#status,
#status1,
#status2 {
  font-family: var(--fontFamily_1);
  font-size: 14px;
  letter-spacing: 1.2px;
  color: darkslategray;
  text-align: left;
  padding: 4px 4px;
  margin: 4px;
}

.switch input {
  opacity: 0;
  width: 0px;
  height: 0px;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: darkslategray;
  -webkit-transition: 0.4s;
  transition: 0.4s ease-in-out;
}

.slider:before {
  position: absolute;
  content: "";
  height: 14px;
  width: 14px;
  left: 8px;
  bottom: 6px;
  background-color: #AFB6B6;
  -webkit-transition: 0.4s;
  transition: 0.4s ease-in-out;
}

.slider:hover {
  background-color: var(--dark);
  color: var(--btnHoverColor);
  box-shadow: var(--boxShadowBtn);
  transition: 0.4s ease-in-out;
}

input:checked+.slider {
  background-color: darkslategray;
}

input:focus+.slider {
  box-shadow: darkslategray;
}

input:checked+.slider:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);
}

sub {
  font-size: calc(0.6em + 5px);
  top: calc(0.25 * 0.83 * 2 * (1em - 4px));
}

.super {
  color: var(--inputColor);
  font-size: 14px;
  vertical-align: baseline;
  position: relative;
  top: -5px;
  letter-spacing: 1.4px;
  padding-left: 1px;
}

/* copyright statement */
#copy {
  background-color: var(--dark);
  color: var(--grayColorLight);
  text-align: left;
  padding: 10px;
  margin: 20px 0px 20px 0px;
}

#copy a {
  color: var(--grayColorLight);
  text-decoration: none;
}

#copy a:hover {
  color: var(--grayColorLight);
  text-decoration: underline;
}

/* *********** media queries ******************* */
@media only screen and (max-width: 1024px) {


  #notesContainer,
  #displayResult,
  #displayResult3,
  #displayBox,
  #inputBox,
  .indexPage {
    max-width: 700px;
  }

  #displayResult,
  #displayResult3 {
    font-size: 14px;
  }

  .lineDrop10 {
    white-space: nowrap;
  }

}

/* *************** 834px *************** */
@media only screen and (max-width: 834px) {

  body {
    font-size: 13px;
  }

  #notesContainer,
  #displayResult,
  #displayResult3,
  #displayBox,
  #inputBox,
  .indexPage {
    max-width: 550px;
  }

  span.originalStr5 {
    font-size: 13px;
  }

  span.lineDrop2 {
    display: block;
  }

  span.font_sm {
    font-size: 13px;
  }

  .hide3 {
    display: none;
  }
}

/* *************** 640px *************** */
@media only screen and (max-width: 640px) {

  #notesContainer,
  #displayResult,
  #displayResult3,
  #displayBox,
  #inputBox,
  .indexPage {
    max-width: 310px;
    padding: 14px 4px 20px 16px;
  }

  #displayBox {
    padding: 0px;
  }

  #inputBox {
    padding: 18px 4px 20px 16px;
  }

  #expandCollapse {
    margin-right: 8px;
  }

  span.titleDesc2 {
    font-size: 14px;
    letter-spacing: 1px;
  }

  span.notesColor6 {
    padding: 6px 6px 6px 8px;
  }

  span.notesColor7 {
    padding: 6px 10px 6px 12px;
  }

  span.notesColor9,
  span.notesColor13 {
    padding: 6px 10px 6px 16px;
  }

  span.notesColor10 {
    padding: 4px 4px 5px 4px;
    letter-spacing: normal;
  }

  span.notesColor11 {
    padding: 4px 4px 5px 4px;
    letter-spacing: 0.6px;
  }

  span.notesColor14 {
    padding: 6px 10px 6px 20px;
  }

  span.notesColor16 {
    padding: 6px 10px 6px 28px;
  }

  span.notesColor2,
  span.notesColor21,
  span.notesColor22,
  span.notesColor37 {
    padding: 6px 8px 6px 8px;
  }

  span.notesColor29,
  span.notesColor30 {
    font-size: 13px;
  }

  span.notesColor33 {
    font-size: 12px;
  }

  span.notesColor34,
  span.notesColor48 {
    padding: 6px 5px 6px 6px;
  }

  span.notesColor38,
  span.notesColor39,
  span.notesColor41,
  span.notesColor42 {
    padding: 6px 6px 6px 12px;
  }

  span.notesColor40,
  span.notesColor41,
  span.notesColor43 {
    padding: 6px 6px 6px 16px;
  }

  span.notesColor49 {
    font-size: 14px;
  }

  span.descColor {
    font-size: 14px;
  }

  span.normalTxt {
    font-size: 13px
  }

  span.font_sm {
    font-size: 13px;
  }

  .centeredBox3 {
    margin-left: -18px;
  }

  #input1,
  #input6,
  #input9,
  #input10,
  #input11,
  #selected1 {
    width: 276px;
  }

  .linePad {
    padding-bottom: 4px;
    line-height: 2.3;
  }

  .code2 {
    font-size: 12px;
    text-wrap: nowrap;
  }

  #chessboard2 {
    font-size: 13px;
  }

  span.sm {
    font-size: 12px;
  }

  span.lineDrop {
    display: block;
  }

  span.lineDrop3 {
    display: block;
    padding: 6px 0px 6px 16px;
  }

  span.lineDrop4 {
    display: block;
    background-color: var(--dark);
    color: var(--grayColorDark);
    padding: 12px 8px 14px 8px;
  }

  span.lineDrop5 {
    display: block;
    background-color: var(--dark);
    color: var(--grayColorDark);
    padding: 12px 8px 14px 16px;
  }

  span.lineDrop6 {
    display: block;
    padding: 3px 0px 0px 28px;
  }

  span.lineDrop7 {
    display: block;
    padding: 0px 0px 0px 28px;
    margin: 3px 0px;
  }

  span.lineDrop8 {
    display: block;
    margin-top: 14px;
  }

  .lineDrop9 {
    line-height: 2.2;
  }

  .pad,
  .pad4 {
    padding-left: 16px !important
  }

  .pad5 {
    padding-left: 24px !important
  }

  .pad11 {
    padding-left: 24px !important
  }

  .spacer14 {
    margin-top: 2px;
  }

  .spacer15 {
    margin-top: 0px;
  }

  .titleMsg {
    margin: 0px 12px 14px 0px;
  }

  span.commentColor,
  span.commentColor4,
  span.hide {
    display: none;
  }

  span.hide2 {
    display: inline;
  }

  #copy {
    font-size: 12px;
  }
}