* {
   box-sizing: border-box;
   -webkit-backface-visibility: hidden;
}

#pageCover {
   background: black;
   position: absolute;
   heighT: 100%;
   width: 100%;
   top: 0;
   left: 0;
   z-index: 15;
}

.aceInputTitle {
   position: relative;
   background: black;
   display: inline-block;
   width: 176px;
   overflow: hidden;
   float: right;
   bottom: -10px;
}

.modulePageAltClose,
.showNavBar {
   /* color: yellow; */
   cursor: pointer;
   right: 27px;
   position: fixed;
   padding: 14px;
   opacity: .5;
   transition: .4s opacity;

}

.altClose {

   display: none;
}

body[data-presmode="on"] .showNavBar {
   display: none;
}

.showNavBar:hover {
   opacity: 1;
}

.groupContainer {

   overflow: hidden;
}

#page[data-modulewidth="normal"] .groupContainer {
   /* border: 1px solid green; */
}

.groupContainer:last-child {
   border: 2px solid #ff00ff29;
   padding-bottoM: 300px;
}



#functionMessageSection {
   width: 95%;
   border: 2px solid #88887e;
   background: black;
   color: rgb(196, 190, 190);
   text-align: center;
   opacity: .4;
   transition: .3s opacity;

}

#findReplaceOverlay {
   z-index: 80;
   positioN: fixed;
   top: 0;
   left: 0;
   width: 70%;
   height: 100%;
   background: #212334e3;
}

#ccFindReplace {
   border: 3px solid blue;
   width: 50%;
   margin-left: 10%;
   margin-top: 10%;
   position: fixed;
   padding-bottom: 18px;
   background: black;
}

.ccFindReplaceLine {
   margin: 12px;
   background: #21493e;
}

.findReplaceLabel {
   background: maroon;
   position: absolute;
   right: 0;
}

#jsInfo {
   position: fixed;
   background: black;
   top: 700px;
   overflow: hidden;
   right: 0;
   width: 34%;
   text-align: center;
   margin-bottom: 20px;
   border: 2px solid #000000;
   overflow-y: auto;
   height: 401px;
   font-size: 20px;
   line-height: 31px;
   bottom: 15px;
   top: unset;
   z-index: 13;
   width: 278px;
   right: 23px;
   /* display: none; */
}

body[data-colorbuttonsshown="yes"] #jsInfo {
   height: 352px;
}



.noselect {
   -webkit-touch-callout: none;
   /* iOS Safari */
   -webkit-user-select: none;
   /* Safari */
   -khtml-user-select: none;
   /* Konqueror HTML */
   -moz-user-select: none;
   /* Firefox */
   -ms-user-select: none;
   /* Internet Explorer/Edge */
   user-select: none;
   /* Non-prefixed version, currently
                               supported by Chrome and Opera */
}

body {
   background: #2a2c30;
   color: white;
}

#functionFactoryPageInner {
   width: 54%;
   border: 4px solid rgb(8, 70, 128);
   height: 100%;
   overflow-y: auto;
}

#codeCreate {
   border: 3px solid pink;
   padding: 7px;
   width: 100%;
}

#modulesDiv {
   border: 1px solid black;
   width: calc(100% - 298px);
   min-height: 70px;
   left: 8px;
   /* position: relative; */
   /* overflow-x: hidden; */

   overflow-y: auto;

   height: 95%;
}

#page[data-navbar="hidden"] #modulesDiv {
   width: 100%;
   padding-right: 14px;
}

#page[data-modulewidth="normal"] #modulesDiv {
   /* border: 2px solid rgb(63, 5, 5); */
}


#page[data-modulewidth="1150"] #modulesDiv {
   width: 1150px;

}


#page[data-modulewidth="1000"] #modulesDiv {
   width: 1000px;

}

#page[data-modulewidth="1000"] #modulesDiv {
   width: 1000px;

}

#page[data-modulewidth="800"] #modulesDiv {
   width: 800px;

}

#page[data-modulewidth="600"] #modulesDiv {
   width: 600px;
}


#info3,
#info2,
#presentationButtons,
#colorButtons,
#buttons,
#info {
   position: fixed;
   bottom: 8px;
   left: 8px;
   padding: 3px;
   background: #4b3d1b;
}

#info3,
#info2 {
   left: unset;
   right: 10px;
   background: darkblue;
   cursor: pointer;
}

#info3 {
   right: 300px;
   background: #152929;
}

#info,
#info2,
#info3 {
   display: none;
}

#presentationButtons {
   left: unset;
   right: 30px;
   width: 431px;
   height: 300px;
   top: 50px;
   background: rgb(22, 22, 59);
   border: 3px solid cyan;
   font-size: 1.3em;
}

.moveForward {
   margin-top: 15px;
   padding: 8px;
   color: lightblue;
   cursor: pointer;
   background: black;
   display: inline-block;
}

.currentLocLine {
   background: black;
   margin-top: 20px;
}

.currentLoc {
   display: inline-block;
   background: rgb(5, 36, 25);
   color: lightblue;
   padding: 9px;
}

#colorButtons {
   position: relative;
   left: 0;
   background: rgb(0 0 0 / 22%);
   /* border: 2px solid rgb(85, 85, 83); */
   width: 300px;
   margin-top: 25px;
}



#page.final #buttons,
#page.final #presentationButtons {
   display: none;
}






.oneColorButton {
   background: black;
   padding: 4px;
   margin: 3px;
   display: inline-block;
   color: lightblue;
   font-size: 1em;
   cursor: pointer;
   width: 76px;
   text-align: center;
}


.oneColorButton[data-active="yes"] {
   text-decoration: underline;
}

.oneColorButton[data-color="yellow"] {

   color: yellow;
}

.oneColorButton[data-color="blue"] {

   color: #346d80;
}

.oneColorButton[data-color="teal"] {
   color: #0fbaba;
}


.oneColorButton[data-color="orange"] {

   color: #ff9b48;
}

.oneColorButton[data-color="green"] {

   color: #338633;
}

.oneColorButton[data-color="cyan"] {

   color: cyan;
}

#buttons {
   bottom: unset;
   top: 700px;
   background: #202447;
   width: 1200px;
   border: 4px solid black;
}

body[data-presmode="on"] #jsInfo,
body[data-presmode="on"] #buttons,
body[data-presmode="on"] #colorButtons,
body[data-presmode="on"] #presentationButtons {
   display: none;

}

body[data-presmode="on"] #buttons {
   display: block;
   font-size: 14px;
   top: unset;
   bottom: 16px;
}

body[data-presmode="on"] .oneGroupButton {

   font-size: 12px;

}

body[data-presmode="on"] #modulesDiv {
   overflow: hidden;
   padding-top: 15px;
}



#groupTheItems,
#normalizeBorders {
   background: #1a3c0b;
   padding: 8px;
   cursor: pointer;
   display: inline-block
}

#groupTheItems {
   background: #535383;
   opacity: .2;
   position: absolute;
   right: 0;
}

.oneGroupButton {
   padding: 5px;
   margin: 8px;
   background: #523350;
   display: inline-block;
   border: 1px solid black;
   cursor: pointer;
   font-size: 19.7px;
   padding: 14px;
}

.oneGroupButton[data-active="yes"] {
   background: black;
   color: cyan;
   border: 1px solid #00ffff42;
}

.divButton {
   background: black;
   color: white;
   margin: 23px;
   padding: 5px;
   display: inline-block;
   cursor: pointer;
}



#modulesDiv .ui-button-icon-only .ui-icon {
   margin-left: -4px;
}

.groupTitle,
#groupTitle {
   font-size: 30px;
   text-align: center;
   margin-bottom: 13px;
   padding-top: 0px;
   color: #859de2;

   padding: 8px 0px;
}

.groupTitle {
   border-bottom: 1px solid;
}

#page[data-modulewidth="normal"] .groupTitle {}

#page[data-navbar="hidden"] .groupTitle {
   width: calc(100% - 14px);
}

body.touch_landscape #page[data-navbar="hidden"] .groupTitle,
body.touch_portrait #page[data-navbar="hidden"] .groupTitle {
   width: calc(100% - 34px);

}


#groupTitle {
   display: none;
}





#modulesDiv::-webkit-scrollbar {
   width: 16px;
   height: 0;
}

#modulesDiv::-webkit-scrollbar-thumb {
   background: #3e718a;
   border-radius: 1px;
}

#modulesDiv::-webkit-scrollbar-track {
   background: #060c1f;
   border-radius: 2px;
}

#page[data-colorscheme="purple"] #modulesDiv::-webkit-scrollbar-thumb {
   background: #3e284e;
}

#page[data-colorscheme="purple"] #modulesDiv::-webkit-scrollbar-track {
   background: #07010d;
}



#page[data-colorscheme="teal"] #modulesDiv::-webkit-scrollbar-thumb {
   background: #184750;
}

#page[data-colorscheme="teal"] #modulesDiv::-webkit-scrollbar-track {
   background: #010d0d;
}



#page[data-colorscheme="yellow"] #modulesDiv::-webkit-scrollbar-thumb {
   background: #3f4a11;
}

#page[data-colorscheme="yellow"] #modulesDiv::-webkit-scrollbar-track {
   background: #0a0701;
}


#page[data-colorscheme="green"] #modulesDiv::-webkit-scrollbar-thumb {
   background: #084b04;
}

#page[data-colorscheme="green"] #modulesDiv::-webkit-scrollbar-track {
   background: #040a01;
}

#page[data-colorscheme="orange"] #modulesDiv::-webkit-scrollbar-thumb {
   background: #41290a;
}

#page[data-colorscheme="orange"] #modulesDiv::-webkit-scrollbar-track {
   background: #0a0701;
}




#aceTheme {
   background: #3e074c;
   color: white;
   padding: 8px;
   border: 2px solid #545454;
   margin: 6px;
   border: 2px solid #61317c;
}






















.functionFactoryInfo {
   border: 2px solid yellow;
   width: 50%;
}






.createFunctionButton {
   background: darkgreen;
}

.functionCreationBody {
   border: 3px solid orange;
   position: relative;

}

.functionCreationBodyInner {
   border: 3px solid cyan;
   background: rgb(63 58 62);
   padding: 7px;
}



.functionTypeButtons {
   background: #101527;
   border: 1px solid lightgray;
   position: fixed;
   right: 0;
   bottom: 0;
   width: 45%;
   height: 30%;
}

.functionTypeTitle {
   background: #2c365a;
   height: 28px;
   line-height: 28px;
   text-align: center;
}

.functionTypeTitle.firstArea {
   position: relative;
   /* right: 18px; */
   /* top: 18px; */
   height: 40px;
   line-height: 40px;
   /* width: 230px; */
   background: #5e4e6d;
   font-size: 20px;
   /* widtH: 95%; */
}


.oneFunctionFactoryFeature {
   border: 1px solid green;
   background: rgb(2, 2, 66);
   margin: 6px;
   width: 55%;
}

.functionFactoryFeatureTitle {
   background: black;
   text-align: center;
}

.functionCreationTypeButton {

   background: black;

   padding: 6px;

   margin: 6px;

   cursor: pointer;

   display: inline-block;

   width: 118px;

   text-align: center;

   padding-left: 13px;
}




.functionCreationTypeButton {
   border: 1px solid dimgray;
   text-transform: capitalize;
   position: relative;
}

.functionCreationTypeButton.activeButton {
   background: rgb(10, 83, 32);
   border: 1px solid cyan;
}

.functionButtonShortcut,
.functionButtonPercentage {
   position: absolute;
   right: 2px;
   height: 12px;
   width: 12px;
   text-transform: capitalize;
   font-size: 10px;
   top: 6px;
   background: darkblue;
   border: 1px solid white;
}

.functionButtonPercentage {
   background: #471741;
   left: 2px;
   /* padding: 2px; */
   height: 20px;
   width: 20px;
   opacity: .4;
   padding-top: 3px;
}

.functionConsoleSection {
   border: 2px solid pink;
   padding: 8px;
}

#functionConsole {
   background: black;
   color: lightblue;
   border: 1px solid lightgray;
}

.functionCreationModule {
   background: #040831;
   border: 3px solid #353535;
   padding: 6px;
   /* padding-top: 50px; */
}

.functionInputTitle {
   display: inline-block;
   background: #324044;
   width: 96px;
   text-align: left;
   padding-left: 8px;
   position: absolute;
   right: 0;
   overflow: hidden;
   top: 0;
}

.functionCreationLines[data-type="switch"] .functionInputTitle {
   left: unset;
   right: 120px;
   opacity: 0.9;
}



.functionCreationLines[data-type="if"] .functionInputTitle {
   left: 0;
   right: unset;
   top: unset;
   bottom: 5px;
}

.oneFunctionLineCover {
   background: black;
   opacity: .8;
   position: absolute;
   top: 0;
   left: 0;
   height: 100%;
   width: 100%;
}

.commentEndInnerYes,
.commentEndInnerNo {
   display: inline-block;
}

.functionConsoleSection {
   border: 3px solid teal;
   background: rgb(62 58 64);
   padding: 6px;
}

#functionResult {
   height: 170px;
   width: 200px;
   background: black;
   color: lightgray;
   vertical-align: top;
}

.functionCreationBodyInner input,
.functionCreationBodyInner textarea {
   background: black;
   color: white;
   border: 1px solid #676666;
   width: 300px;
   /* margin-left: 30px; */
}


.oneFunctionCreationLine input {
   width: 200px;
   border: 1px solid purple;
   height: 28px;
   border: 1px solid #a59898;
   padding-left: 5px;
}

.oneFunctionCreationLine input:disabled {

   background: #171616;
   color: #525252;
}

.createFunctionToggle {
   border: 1px solid black;
   background: #176f16;
   display: inline-block;
   margin: 3px;
   padding: 4px;
   cursor: pointer;
   opacity: .7;
}


.createFunctionToggle[data-active="active"] {
   background: rgb(33 155 31);
   border: 3px solid #fdb964;
   opacity: 1;
}

.if_create_function_toggle,
.switch_create_function_toggle {

   background: #2a85a5;
}

.switch_break_function_toggle {
   background: dimgray;
}


.if_create_function_toggle[data-active="active"],
.switch_create_function_toggle[data-active="active"] {

   background: rgb(21 45 176);
   border: 3px solid #3671b9;

}

.switch_break_function_toggle[data-active="active"] {
   background: black;
}




.showCurrentFunctionType {
   background: black;
   border: 2px solid orange;
   padding: 4px;
}




codeCreate.functionCreationTypes[codeCreate.currentFunctionType]['statement'];

.commentLoopEnd .createFunctionToggle[data-active="active"] {
   background: rgb(117, 112, 39);
}




.oneFunctionCreationLine {
   position: relative;
   margin-bottom: 12px;
   border-bottom: 1px solid dimgray;
   padding-bottom: 3px;
   padding-left: 20px;
}

.functionCreationLines[data-type="switch"] .oneFunctionCreationLine {
   padding-bottom: 60px;
}

.oneFunctionCreationLineCover {
   position: absolute;
   top: 0;
   left: 0;
   height: 100%;
   width: 100%;
   background: rgb(53, 52, 52);
   opacity: .7;
   z-index: 4;
}

.phpDollarSign {
   display: inline-block;
   background: maroon;
   padding: 3px;
   color: #ffc254;
}

.timedVariableNameTitle {
   border: 1px solid white;
   display: inline-block;
   width: 200px;

}

.oneFunctionInputLineLabel {
   background: #15668e52;
   display: inline-block;
   width: 151px;
   border: 1px solid #00ffff3d;
}

#timedVariableName {
   /* width: 250px; */
}

.if_comment_end,
.switch_comment_end,
.switch_break {
   position: absolute;
   top: 0;
   border: 3px solid yellow;
   right: 0;
   cursor: pointer;
}

.switch_comment_end,
.switch_break {
   top: unset;
   bottom: 15px;
   border: 3px solid brown;
   padding: 6px;
   background: #32053b;
}

.switch_break {
   right: 200px;
   background: #8a2e67;
}

.switch_last_condition {
   border: 5px solid green;
   background: black;
   position: absolute;
   height: 43px;
   bottom: 0;
   overflow: hidden;
   width: 268px;
}

.lastSwitchConditionSection {
   border: 1px solid pink;
   margin: 3px;
   display: inline-block;
   opacity: .4;
   background: blue;
   padding: 3px;
   cursor: pointer;
}

.lastSwitchConditionSection[data-active="true"] {
   border: 3px solid pink;
   opacity: 1;
}

#sideAceContainer,
#functionInputContainerOne {
   border: 3px solid #5a5a5a;
   background: #2f2e33;
   height: 53%;
   width: 396px;
   display: inline-block;
   position: relative;
}

#functionInputContainerOne {
   height: 100px;
   width: 75%;
   border: 3px solid orange;
}


.functionCreateButtonSection {
   border: 3px solid purple;
   background: #1b1b1b;
   height: 802px;
}

.divTitle {
   position: absolute;
   right: 0;
   bottom: 0;
   background: black;
   opacity: .4;
}


#functionOutputArea,
#aceFunctionInputAreaOne,
.extraAceInnerClass {
   position: absolute;
   top: 0;
   right: 0;
   bottom: 0;
   left: 0;
   width: 100%;
   height: 100%;
   /*this to be set at 100, always */
}

#aceFunctionInputAreaOne {
   border: 4px solid cyan;

}

.withinFunctionPrint {
   border: 3px solid orange;
   background: black;
   padding: 4px;
}

.phpVersion {
   border: 5px solid #00a8ff;
}

.oneFunctionCreationLine .afterInput1,
.oneFunctionCreationLine .beforeInput1,
.oneFunctionCreationLine .afterInput2,
.oneFunctionCreationLine .beforeInput2,
.oneFunctionCreationLine .afterInput3,
.oneFunctionCreationLine .beforeInput3,
.before_input_if {
   display: inline-block;
   /* border: 1px solid green; */
}




.functionCreationLines[data-type="if"] .afterInput1,
.functionCreationLines[data-type="switch"] .afterInput2 {
   display: block;
   margin-top: 10px;
   border: 1px solid cyan;
}



.before_input_if {
   /* border: 3px solid purple; */
   min-width: 135px;
   text-align: right;
}



.beforeInput1 .ifPortion,
.beforeInput1 .elsePortion,
.beforeInput1 .elseIfPortion {
   display: inline-block;
   border: 1px dashed lightblue;
   margin-right: 8px;
   cursor: pointer;
   background: #a51a3f;
   padding: 3px;
   opacity: 0.4;
   width: 50px;
   text-align: center;
}

.elseIfPortion[data-disabled="true"] {
   border: none;
   background: none;
   opacity: 0.8;
   cursor: default;
}

.beforeInput1 .elsePortion[data-active="true"],
.beforeInput1 .elseIfPortion[data-active="true"] {
   opacity: 1;
   border: 1px solid lightblue;

}

.oneFunctionCreationLine .ifPortion {
   display: none;
}

.oneFunctionCreationLine[data-theinput="if1"] .ifPortion {
   display: inline-block;
   border: none;
   background: none;
   cursor: default;
   opacity: .8;
}

.oneFunctionCreationLine[data-theinput="if1"] .elseIfPortion,
.oneFunctionCreationLine[data-theinput="if1"] .elsePortion {
   display: none;
}

.caseManagementArea {
   border: 4px solid purple;
}

.caseManagementInfo {
   border: 3px solid green;
   margin: 5px;
   background: #465012;
   padding: 7px;
}

.caseManagementDropdown {
   border: 2px solid white;
   margin: 5px;
   padding: 8px;
   background: #4e0e0e;
}

.caseManagementButtons {
   border: 2px solid yellow;
   margin: 3px;
   background: #35093e;
   padding: 8px;
}

.caseManagementDropdown select {
   background: black;
   color: lightgray;
}

.caseManagementButton {
   cursor: pointer;
   display: inline-block;
   background: rgb(109 71 21);
   padding: 6px;
   border: 2px solid lightgray;
   width: 72px;
   text-align: center;
}

.caseManagementButton.dropdown {
   border: 2px solid black;
}

.caseManagementButton.add {
   background: rgb(46, 20, 129);

}

.caseManagementButton.remove {
   background: rgb(38 86 60)
}

#moreAceEditors {
   border: 5px solid rgb(0, 255, 128);
   padding: 20px;
   position: relative;
   background: rgb(123 112 130);
   height: 600px;
}

.moreAceEditorsTitle {
   position: absolute;
   background: black;
   right: 0;
   bottom: 0;
   padding: 5px;
}

.extraFunctionAceArea {
   border: 1px solid rgb(127 41 41);
   /* margin: 16px; */
   /* padding: 16px; */
   background: #383030;
   height: 140px;
   width: 100%;
   overflow: hidden;
   position: relative;
}

.moreAceEditorsInfo {
   background: black;
   padding: 5px;
}

.oneMultipleAceContainer {
   border: 3px solid #88341c;
   /* padding: 8px; */
   width: 97%;
   background: dimgray;
   display: block;
   height: 140px;
   margin-bottom: 10px;
}













/*entry detail search starts here.............*/
/*entry detail search starts here.............*/
/*entry detail search starts here.............*/
/*entry detail search starts here.............*/
/*entry detail search starts here.............*/
/*entry detail search starts here.............*/
/*entry detail search starts here.............*/
/*entry detail search starts here.............*/




#searchDatabaseContainer {
   position: fixed;
   left: 30px;
   top: 30px;
   border: 3px solid cyan;
   background: black;
   height: 90%;
   width: 800px;
   padding: 15px;
   overflow-y: auto;
}

.searchDatabaseContainerTitle {
   position: absolute;
   bottom: 0;
   right: 0;
   padding: 6px;
   background: indigo;
   color: lightgray;
}

.databaseContainerLine {
   border: 1px solid rgb(28, 146, 79);
   padding: 8px;
   margin-bottom: 10px;
}

.databaseContainerLine:nth-child(odd) {
   color: lightblue;
   background: rgb(33, 33, 33);
}



/*editor themes start here.....*/
/*editor themes start here.....*/
/*editor themes start here.....*/
/*editor themes start here.....*/
/*editor themes start here.....*/
/*editor themes start here.....*/

#points,
#page {
   background: rgb(42 42 55);
   height: 100%;
   width: 100%;
   position: fixed;
   border: 1px solid #5b5d62;
   overflow-y: auto;
   left: 0px;
   padding-left: 11px;
   top: 0;
}

#page {
   background: black;
   overflow: hidden;
}

#nav {
   position: absolute;
   right: 0;
   top: 0;
   width: 295px;
   /* border: 1px solid #0c1b59; */
   height: 100%;
   background: #252c45;
   /* padding: 12px; */
}

#page[data-colorscheme="purple"] #nav {
   background: #232138;
}


#page[data-colorscheme="yellow"] #nav {
   background: #1e1e06;
}


#page[data-colorscheme="orange"] #nav {
   background: #312815;
}


#page[data-colorscheme="teal"] #nav {
   background: #1c2d34;
}


#page[data-colorscheme="green"] #nav {
   background: #0a1d11;
}

#discordLink,
#kickstarterLink,
#mainIndexLink,
.switchColorTheme,
.navTitle {
   background: #020212;
   text-align: center;
   font-size: 18px;
   padding: 8px 0px;
   margin-bottom: 20px;
   border-bottom: 1px solid #add8e6b5;
   color: lightblue;
   position: relative;
}

#page[data-colorscheme="teal"] .otherPageLink,
#page[data-colorscheme="teal"] .navTitle,
#page[data-colorscheme="teal"] .switchColorTheme {
   background: #021112;
   color: #87a5a4;
   border-bottom: 1px solid;
}

#page[data-colorscheme="purple"] .otherPageLink,
#page[data-colorscheme="purple"] .navTitle,
#page[data-colorscheme="purple"] .switchColorTheme {
   background: #110111;
   color: #d4c2c5;
   border-bottom: 1px solid;
}



#page[data-colorscheme="yellow"] .otherPageLink,
#page[data-colorscheme="yellow"] .navTitle,
#page[data-colorscheme="yellow"] .switchColorTheme {
   background: #090c02;
   color: #c1c2a8;
   border-bottom: 1px solid;
}


#page[data-colorscheme="orange"] .otherPageLink,
#page[data-colorscheme="orange"] .navTitle,
#page[data-colorscheme="orange"] .switchColorTheme {
   background: #0c0902;
   color: #c2b9a8;
   border-bottom: 1px solid;
}


#page[data-colorscheme="green"] .otherPageLink,
#page[data-colorscheme="green"] .navTitle,
#page[data-colorscheme="green"] .switchColorTheme {
   background: #060c02;
   color: #84af84;
   border-bottom: 1px solid;
}

.hideNavigationTwo,
.closeModulePage,
.hideNavigation {
   position: absolute;
   top: 9px;
   right: 3px;
   cursor: pointer;
   color: lightblue;
   opacity: .4;
   transition: .3s opacity;

}

.hideNavigationTwo {
   right: unset;
   left: 3px;
}

.closeModulePage,
.hideNavigationTwo {
   display: none;
}


.closeModulePage:hover,
.hideNavigation:hover {
   opacity: 1;
}

#discordLink,
#kickstarterLink,
#mainIndexLink,
#page .switchColorTheme {
   margin-bottom: 0;
   cursor: pointer;
   border-bottom: none !important;
}



#discordLink,
#kickstarterLink,
#mainIndexLink {
   margin-bottom: 8px;
   padding: 3px 0px;
   width: 80%;
   margin-left: 10%;
   margin-bottom: 20px;
   color: #b4b4b4 !important;







}

#page .otherPageLink {
   text-decoration: none;
   display: block;
}

#page .otherPageLink:hover {
   text-decoration: underline;
}

#colorButtonsInner {
   display: none;
   margin-top: 10px;

}

#mainIndexLink {
   margin-top: 30px;
}

#modulesWidth {
   background: #13394a;
   padding: 9px;
   color: lightgray;
   display: none !important;

}

#navButtons {
   /* border: 1px solid yellow; */
   /* max-height: 50px; */
   overflow: hidden;
}

.moduleWidthButton {
   padding: 4px;
   margin: 4px;
   cursor: pointer;
   background: black;
   display: inline-block;
   border: 1px solid black;
}

.moduleWidthButton[data-active="true"] {
   border: 1px solid;
   color: #c98dd5;
}

.oneNavButton {
   margin-bottom: 12px;
   background: #000000;
   cursor: pointer;
   padding: 6px;
   margin-left: 6%;
   width: 88%;
   border: 1px solid #add8e600;
   color: #a2c5c4;
   color: #bebebe;
}

.oneNavButton[data-active="true"] {
   color: #26c2c2;
   border: 1px solid;
}

#page[data-colorscheme="purple"] .oneNavButton[data-active="true"] {
   color: #b18ab1;
   border: 1px solid;
}


#page[data-colorscheme="yellow"] .oneNavButton[data-active="true"] {
   color: #a8b18a;
   border: 1px solid;
}


#page[data-colorscheme="orange"] .oneNavButton[data-active="true"] {
   color: #af8f3d;
   border: 1px solid;
}


#page[data-colorscheme="teal"] .oneNavButton[data-active="true"] {
   color: #1fa0a0;
   border: 1px solid;
}


#page[data-colorscheme="green"] .oneNavButton[data-active="true"] {
   color: #53a96f;
   border: 1px solid;
}

#stopPres,
#startPres {
   position: fixed;
   bottom: 5%;
   background: #0f3b15;
   padding: 12px;
   cursor: pointer;
}

#stopPres {
   left: 200px;
   background: #441818;
}

#points {
   background: black;
   top: 38%;
   padding: 15px;
   height: 50%;
}

.editorThemeOverlayTitle {
   position: absolute;
   right: 0;
   bottom: 0;
   padding: 14px;
   background: rgb(10, 7, 80);
}

#editorThemeOptionsContainer,
#placeholderEditors {
   display: inline-block;
   width: 57%;
   height: 89%;
   margin-right: 20px;
   background: #373734;
   margin-left: 20px;
   position: relative;
   border: 1px solid black;
   margin-top: 5%;
   vertical-align: top;
   overflow-y: auto;
}

#placeholderEditors {
   width: 34%;
}

#editorThemeOptionsContainer {
   background: #410c36;
   border: 3px solid purple;
}

.editorThemeOptionsInner {
   border: 2px solid yellow;
   background: #060a31;
   padding-bottom: 50px;
}

.editorThemeOptionLine {
   background: rgb(8, 74, 72);
   color: lightblue;
   border: 2px solid green;
   margin: 12px;
   padding-left: 8px;

}

.editorThemeOptionLine[data-type="languageAccent"] {
   background: #144207;
   color: #efefef;
}

.editorThemeOptionLine.explanation {
   background: darkblue;
   color: pink;
   text-align: center;
}

.editorThemeOptionsHeading {
   height: 40px;
   line-height: 40px;
   background: black;
   color: lightgray;
   border-bottom: 2px solid gray;
   text-align: center;
   margin-bottom: 30px;
}

.languageAccentLineTitle {
   border: 1px solid white;
   margin-right: 8px;
   display: inline-block;
   width: 150px;
}

.languageAccentLineLabel {
   border: 1px solid cyan;
   display: inline-block;
   margin-right: 5px;
}

#editorThemeOverlay .editorThemeOptionLine input {
   background: black;
   border: 1px solid lightgray;
   width: 70px;
   display: inline-block;
   color: lightgray;
}

#themeSelectorPlaceholder {
   background: darkblue;
   width: 300px;
   padding: 0px 8px;
   color: lightblue;
}

#sampleOuterLanguageButtonsRow,
#placeholderEditorsTitle {
   background: black;
   text-align: center;
   height: 26px;
   line-height: 26px;
   /* border: 1px solid yellow; */
}

#sampleOuterLanguageButtonsRow {
   background: black;
   /* border: 1px solid cyan; */
   font-size: 0;
}

.oneSampleOuterLanguageButton {
   width: 25%;
   display: inline-block;
   margin: 0;
   text-align: center;
   height: 26px;
   line-height: 26px;
   /* border: 1px solid white; */
   font-size: 13px;
}

.sampleLeftRightGutter {
   background: rgb(80, 80, 91);
   height: 20px;
   line-height: 20px;
   /* border: 1px solid gray; */
   text-align: right;
}

.oneSampleInnerLanguageButton,
.languageSampleSizeButton {
   display: inline-block;
   background: black;
   margin: 0px;
   /* border: 1px solid lightgreen; */
}

.oneSampleInnerLanguageButton {
   width: 90px;
   text-align: center;
}

.oneSampleInnerLanguageButton[data-type="html"],
.oneSampleOuterLanguageButton[data-type="html"] {
   background: #77127e;
   color: white;
}

.oneSampleInnerLanguageButton[data-type="javascript"],
.oneSampleOuterLanguageButton[data-type="javascript"] {
   background: #094410;
   color: white;
}

.oneSampleInnerLanguageButton[data-type="css"],
.oneSampleOuterLanguageButton[data-type="css"] {
   background: #606612;
   color: white;
}

.oneSampleInnerLanguageButton[data-type="text"],
.oneSampleOuterLanguageButton[data-type="text"] {
   background: #2b0e6d;
   color: white;
}

.languageSampleSizeButton {
   height: 18px;
   width: 18px;
   text-align: center;
   line-height: 18px;
   color: #a3a1a1;
   font-size: 13px;


}

.sampleAceEditorContainer {
   /* background: #171616; */
   height: 14%;
   /* border: 1px solid rgb(126, 126, 174); */
   padding: 6px;
   font-size: 18px;
   /* color: lightblue; */
}

#htmlOne {
   height: 60%;
}

#nextThemeTasks {
   background: black;
   min-height: 81px;
   position: relative;
   width: 85%;
   margin-left: 7.5%;
   margin-top: 10px;
}

/*language selector starts here */

.languageSelectorTitle {
   height: 40px;
   line-height: 40px;
   background: rgb(11, 63, 131);
   color: white;
   font-size: 18px;
   text-align: center;
}

.editorThemeLanguageSelector {
   border: 2px solid yellow;
   color: darkgray;
   margin-bottom: 50px;
   margin-top: 50px;
}

.themeLanguageSelectorLine {
   background: rgb(59, 59, 84);
   padding: 6px;
   color: lightblue;
   margin: 13px;
}

.themeSelectorNiceTitle {
   background: black;
   width: 180px;
   padding-left: 10px;
   text-align: left;
   display: inline-block;
}

#sampleLangOne_dropdown,
#sampleLangTwo_dropdown,
#sampleLangThree_dropdown,
#sampleLangFour_dropdown {
   background: darkblue;
   color: lightblue;
   font-size: 16px;
}

.sampleLanguageSelectionButtonsRow {
   border: 2px solid cyan;
   background: darkgreen;
   padding-left: 18px;
}

.sampleLanguageApplyChanges,
.sampleLanguageSetDefaults {
   cursor: pointer;
   background: black;
   color: lightblue;
   display: inline-block;
   margin: 8px;
   font-size: 18px;
   padding: 6px;
}

.sampleLanguageSetDefaults {
   background: indigo;
}

.sampleLanguageSelectionButtonsRow {
   color: lightgray;
   padding: 12px;
   background: #000000;
   line-height: 50px;
}


#cursorOpacity,
#cursorAnimation,
#cursorBackground,
#cursorBorder,
#cursorWidth,
#cursorColor {
   background: black;
   color: lightblue;
   padding: 4px;
   width: 140px;
}



.cursorEditRow {
   display: block;
   margin: 6px;
   border: 2px solid #7e8686;
   background: #505050;
   margin-bottom: 14px;
}

.cursorEditTitle,
.cursorEditMeta {
   display: inline-block;
   background: #070e36;
   width: 135px;
   line-height: 28px;
}

.cursorEditMeta {
   background: #1c2609;
   color: white;
   border: 1px solid #535050;
   color: lightblue;
}

/*anim styles start here....*/
/*anim styles start here....*/
/*anim styles start here....*/
/*anim styles start here....*/
/*anim styles start here....*/
/*anim styles start here....*/





.animTextBox,
#typeTest1 {
   background: #04252d;
   position: fixed;
   left: 50px;
   top: 50px;
   height: 300px;
   width: 600px;
   z-index: 500;
   border: 4px solid #406d6e;
   display: inline-block;
}

.animTextbox[data-number="2"] {
   top: 150px;
   background: black;
   height: 34.86px;
}

.animTextBox {
   left: 15px;
}

.animTextBoxInner,
#typeTestInner {
   display: inline-block;
}


.animTextBox {
   top: 80px;
   height: unset;
   width: unset;
   border: none;
   padding: 8px;
   background: #193a6f;
}

.animTextBoxMeasure {
   top: -500px;
   background: #064623;
   /* padding-right: 4px; */
   /* right: 8000px; */
   /* left: unset; */
}

.typeTestTitle {
   background: black;
   position: absolute;
   bottom: 0;
   right: 0;
   padding: 15px;
   font-size: 18px;
}

.t1 {
   margin-left: 30px;
   color: orange;
}

.t2 {
   color: yellow;
   margin-left: 80px;

}

.t3 {
   color: cyan;
   margin-left: 120px;
}

.oneExplanationLine {
   background: #171717;
   padding: 6px;
   margin: 8px;
   line-height: 22.6px;
   color: lightblue;
   font-size: 15.5px;
   margin-bottom: 6px;
}

#meta_settings2 .oneExplanationLine,
#meta_organizational .oneExplanationLine {
   font-size: 14px;

}

.oneExplanationContainer {
   background: black;
   padding: 8px;
   margin-bottom: 11px;
   margin-left: 4px;
   margin-right: 7px;
   width: 30%;
   display: inline-block;
   vertical-align: top;
   border: 1px solid #9bbaf945;
}

#page[data-modulewidth="normal"] .oneExplanationContainer {
   width: 32%;
}

#meta_styling2 .oneExplanationLine {
   font-size: 14.6px;
}

.oneExplanationTitle {
   text-aligN: center;
   font-size: 22px;
   color: #9bbaf9;
}







#page[data-colorscheme="teal"] .oneExplanationContainer {
   border-color: #102b2b;
}

#page[data-colorscheme="purple"] .oneExplanationContainer {
   border-color: #2c2030;
}





#page[data-colorscheme="yellow"] .showNavBar,
#page[data-colorscheme="yellow"] .groupTitle,
#page[data-colorscheme="yellow"] #groupTitle {
   color: #acac80;
}

#page[data-colorscheme="green"] .showNavBar,
#page[data-colorscheme="green"] .groupTitle,
#page[data-colorscheme="green"] #groupTitle {
   color: #4ccd4c;
}

#page[data-colorscheme="blue"] .showNavBar,
#page[data-colorscheme="blue"] .groupTitle,
#page[data-colorscheme="blue"] #groupTitle {
   color: #859de2;
}

.theCog.inFrameCog {
   top: 36px;
}

body.touch_portrait #page .theCog,
body.touch_portrait #page .showNavBar.altClose {
   font-size: 27px;

}

body.touch_portrait .inFrameCog {
   top: 44px;
}



#page[data-colorscheme="teal"] .showNavBar,
#page[data-colorscheme="teal"] .groupTitle,
#page[data-colorscheme="teal"] #groupTitle {
   color: #91c3c3;
}

#page[data-colorscheme="orange"] .showNavBar,
#page[data-colorscheme="orange"] .groupTitle,
#page[data-colorscheme="orange"] #groupTitle {
   color: #b38021;
}


#page[data-colorscheme="purple"] .showNavBar,
#page[data-colorscheme="purple"] .groupTitle,
#page[data-colorscheme="purple"] #groupTitle {
   color: #d59ad5;
}



#page[data-colorscheme="yellow"] .oneExplanationTitle {
   color: #b0b054;
}

#page[data-colorscheme="green"] .oneExplanationTitle {
   color: #63b663;
}

#page[data-colorscheme="blue"] .oneExplanationTitle {
   color: #9bbaf9;
}

#page[data-colorscheme="orange"] .oneExplanationTitle {
   color: #d2ae6ccf;
}

#page[data-colorscheme="teal"] .oneExplanationTitle {
   color: #3ec5c5;
}


#page[data-colorscheme="cyan"] .oneExplanationTitle {
   color: #bd6fbd;
}




#page[data-colorscheme="yellow"] .oneExplanationLine {
   color: #caca99;
}

#page[data-colorscheme="green"] .oneExplanationLine {
   color: #8fb58f !important;

}

#page[data-colorscheme="blue"] .oneExplanationLine {
   color: lightblue;
}

#meta_styling.groupContainer .oneExplanationLine {
   font-size: 15px;
}

#page[data-colorscheme="orange"] .oneExplanationLine {
   color: #c2a570;
}

#meta_styling.groupContainer .oneExplanationLine {
   /* font-size: 14px; */
}

#meta_styling.groupContainer .oneExplanationContainer {
   padding: 6px;
   margin-bottom: 6px;
}

#page[data-colorscheme="teal"] .oneExplanationLine {
   color: #0fbaba;
}


#page[data-colorscheme="cyan"] .oneExplanationLine {
   color: #11aaaa;
}





















#page[data-colorscheme="yellow"] .oneExplanationContainer {
   border-color: #caca994d;
}

#page[data-colorscheme="green"] .oneExplanationContainer {
   border-color: #8fb58f42;
}

#page[data-colorscheme="blue"] .oneExplanationContainer {}

#page[data-colorscheme="orange"] .oneExplanationContainer {
   border-color: #c2a57040;
}

#page[data-colorscheme="purple"] .oneExplanationContainer {
   color: #c8abc869;
}




#page::-webkit-scrollbar-thumb {
   background: rgb(78 99 110);

}

#page::-webkit-scrollbar {
   background: black;
}

.toggleOthers {
   cursor: pointer;
   padding: 2px;
   background: black;
   display: inline-block;
}

@media only screen and (max-width:1200px) {
   #modulesDiv {}

   #page[data-modulewidth="normal"] .oneExplanationContainer {
      width: 47%;
      margin-bottom: 24px;
   }



}

@media only screen and (max-width:1000px) and (min-height: 500px) {
   #page .oneExplanationLine {
      font-size: 29px !important;
      line-height: 39px !important;
   }

   #page[data-modulewidth="normal"] .oneExplanationContainer {
      margin-bottom: 30px;
   }

   .oneExplanationTitle {
      font-size: 33px;
   }

   .groupTitle {
      font-size: 40px;
   }

}

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







   #jsInfo {
      display: none;
   }


}