* {
   box-sizing: border-box;
}


#marketing    {display: none;
}


body[data-page="marketing"] #marketing {
   display: block;
}

      body[data-page="marketing"] .reportsAdminButton[data-type="marketing"],
      body[data-page="errors"] .reportsAdminButton[data-type="errors"] {
         background: black;
         color: cyan;
         border: 1px solid;
      }


    #presentationController body {
            font-family: Arial, sans-serif;
            padding: 20px;
            background-color: #000000;
            color: #ffffff;
        }

        #presentationController .title {
            font-size: 24px;
            font-weight: bold;
            margin-bottom: 20px;
            color: lightblue;
        }

        #presentationController .setup-rows-container {
            /* border: 2px solid lightblue; */
            /* padding: 8px; */
            /* height: 197px; */ /* Show exactly 2 rows */
            /* overflow-y: hidden; */
            /* width: 78%; */
            padding-bottom: 0;
            width: 82%;
        }

        #presentationController .setup-row-container {
            background-color: #111111;
            padding: 6px 10px;
            border-radius: 8px;
            margin-bottom: 6px; /* tighter spacing */
            width: 100%;
        }

.animBoxButton {
   display: block;
   width: 103px;
   margin-bottom: 5px;
   background: #292940;
   text-align: center;
   padding: 5px;
   cursor: pointer;
}

.morePresentationControllerButtons,
.presentationControllerButtons,
.setup-rows-container {
   display: inline-block;
   vertical-align:top;
}

.presentationControllerButtons {
   padding: 5px;
}
        #presentationController .setup-row {
            display: flex;
            align-items: center;
            gap: 10px;
        }

        #presentationController .setup-row input[type="text"] {
            width: 64%;
            padding: 5px;
            background-color: #000033;
            color: lightblue;
            border: 1px solid #5555555c;
        }

.animChangeColorButton {
   display: inline-block;
   padding: 6px 12px;
   margin: 0px 6px;
   background: #53538e;
   cursor: pointer;
}

        #presentationController .setup-row button {
            width: 30px;
            height: 30px;
            font-size: 16px;
            cursor: pointer;
            background-color: #222222;
            color: lightblue;
            border: 1px solid #555;
        }

        #presentationController .setup-row button:hover {
            background-color: #333333;
        }

        #presentationController .setup-row label {
            margin-left: 10px;
            font-weight: bold;
        }

        #presentationController .setup-row input[type="number"] {
            padding: 2px 3px;
            background-color: #000033;
            color: lightblue;
            border: 1px solid #55555538;
            width: 74px;
        }

#timeoutInput1 {
   background: black !important;
   color: #221e1e !important;
}

        #presentationController .t-input {
            width: 6ch;
        }

        #presentationController .xy-input {
            width: 6ch;
        }

        #presentationController .toggle-switch {
            margin-left: auto;
            display: flex;
            align-items: center;
            cursor: pointer;
        }

        #presentationController .toggle-switch input {
            display: none;
        }

        #presentationController .presentationControllerSlider {
            width: 40px;
            height: 20px;
            background-color: #555;
            border-radius: 10px;
            position: relative;
            transition: background-color 0.3s;
        }

        #presentationController .presentationControllerSlider::before {
            content: "";
            position: absolute;
            width: 18px;
            height: 18px;
            border-radius: 50%;
            background-color: lightblue;
            top: 1px;
            left: 1px;
            transition: transform 0.3s;
        }

        #presentationController .toggle-switch input:checked + .presentationControllerSlider {
            background-color: #0a84ff;
        }

        #presentationController .toggle-switch input:checked + .presentationControllerSlider::before {
            transform: translateX(20px);
        }

        #presentationController .disabled {
            opacity: 0.5;
        }


#divStructure #divStructureInputWrapper {
   display: flex;
   gap: 10px;
   margin-bottom: 20px;
 }

 #divStructure input[type="text"], #divStructure textarea {
   padding: 10px;
   background-color: #1e1e1e;
   color: white;
   border: 1px solid #333;
   border-radius: 4px;
   background: #050912 !important;
   border-radius: 0;
   border: 1px solid black !important;
   background: #04092c !important;
   height: 25px;
   line-height: 25px;
 }

#divStructure #divStructureTextInput {
   height: 35px;
   line-height: 35px;
   background: #183357 !important;
   border: none !important;
   width: 206px;
}

#entire_item_creation[data-widthsub700="true"] #divStructureTextInput {
   width: 164px;
}

.divStructureAddValueButton {
   background: #43435d;
   height: 35px;
   line-height: 35px;
   color: #adc2c8;
   padding: 0px 20px;
   border: none !important;
   cursor: pointer;
}


      .structureMoveDuplicateArea {
    
      }

      .structureNewLocStart,
      .structureMoveDuplicateAreaTitle {
         display: inline-block;
         border: 1px solid #00ffff0f;
         
      }

      #structureNewLoc,
      .structureNewLocStart,
      .structureMoveDuplicateAreaTitle {
         height: 35px;
         line-height: 35px;
         vertical-align:top;
      }

 .structureMoveDuplicateAreaTitle {
    background: #0e1c2d;
    padding: 0px 4px;
    border: 1px solid black;
 }

.structureMoveDuplicateAreaTitle.oneCheckbox {
   padding: 0px 5px;
   margin-left: 8px;
   cursor: pointer;
}


.structureMoveDuplicateAreaTitle.oneCheckbox[data-includechildren="true"] .fa-square,
.structureMoveDuplicateAreaTitle.oneCheckbox .fa-check-square {
   display: none;
}



.structureMoveDuplicateAreaTitle.oneCheckbox[data-includechildren="true"] .fa-check-square{
   display: inline-block;
}


#entire_item_creation[data-widthsub700="true"] .creationDuplicateFullWidth,
.creationDuplicatePartial {
   display: none;
}

 #entire_item_creation[data-widthsub700="true"] .creationDuplicatePartial {
   display: inline-block;
}


.structureNewLocStart {
   background: #2b2b47;
   cursor: pointer;
   padding: 0px 8px;
}


#structureNewLoc {
   background: black;
   border: 1px solid #6969694f;
   color: #bbb7b7;
   width: 60px;
   padding-left: 10px;
}

#divStructureTextInput::placeholder  {
    color: #aeb6bd73 !important;
 }

 #divStructure textarea {
   width: 100%;
   height: 100px;
   margin-top: 10px;
   display: block;
 }

 #divStructure .divStructureParseSection {
   border-top: 1px solid gray;
   margin-top: 80px;
   padding-top: 10px;
   display: none;
 }

    .previewHTMLTwo [data_my_level="0"] {
      border: 2px solid green;
    }

    .previewHTMLTwo [data_my_level="1"] {
      color: yellow;
      margin-left: 30px;
    }

    .previewHTMLTwo [data_my_level="2"] {
      color: magenta;
      margin-left: 50px;
    }

#divStructureHTMLSection,
#divStructureJavascriptSection,
#divStructureCSSSection,
.divStructureAceSection {
   border: 1px solid green;
   padding-bottom:  40px;
   background: #2f2f39;
   color:  yellow;
   padding:  8px;
   display: none;
}

#divStructureHTMLSection,
#divStructureJavascriptSection,
#divStructureCSSSection {
    border: 1px solid #00000047;
    min-height: 80px;
    display: block;
    margin-bottom: 20px;
    background: #212f438a;
    display: none;
}

#divStructureCSSSection {
   
   
}


#divStructureHTMLEditor,
#divStructureCSSEditor,
#divStructureJavascriptEditor,
#divStructureAceEditor {
   height: 208px;
   border: 1px solid #000000;
   
}

#itemCreationCompiledArea,
#itemCreationCompiledArea *,
#itemCreationContentEditor,
#itemCreationContentEditor *,
#callbackSectionAce, 
#callbackSectionAce *,
#divStructureHTMLEditor,
#divStructureHTMLEditor *,
#divStructureCSSEditor,
#divStructureCSSEditor *,
#divStructureJavascriptEditor,
#divStructureJavascriptEditor * {
   font-size: 14px !important;
}

{
   font-size: 14px !important;
}
 #divStructure .divStructureParseRow {
   display: flex;
   align-items: flex-start;
   gap: 10px;
 }

 #divStructure .divStructureParseSectionTitle {
   margin-bottom: 6px;
   color: gray;
   font-weight: bold;
 }

 #divStructure button {
   background-color: #2a2f3be0;
   color: lightblue;
   border: none;
   /* border-radius: 4px; */
   cursor: pointer;
   font-size: 16px;
   height: 25px;
   overflow: hidden;
   line-height: 25px;
   display: inline-block;
 }



.structureRightButton, 
.structureLeftButton {
   font-size: 19px !important;
}
#divStructure {
   background: #1b1b243b;
   padding: 10px;
}

.structureMyCover {
   background: #0a0a16;
   position: absolute;
   width: 100%;
   top:0;
   left: 0;
   height: 100%;
   display: none;
   line-height: 33px;
   padding-left: 8px;
   color: #6f7375;
}

 #entire_item_creation[data-widthsub700="true"] .structureMyCover {
   display: block;
}


#entire_item_creation[data-widthsub700="true"]  .item.divStructureRow.level0  .structureMyCover,
#entire_item_creation[data-widthsub700="true"]  .item.divStructureRow.level1  .structureMyCover,
#entire_item_creation[data-widthsub700="true"]  .item.divStructureRow.level2  .structureMyCover,
#entire_item_creation[data-widthsub700="true"]  .item.divStructureRow.level3  .structureMyCover{
   display:none;
}



.structureMyNumber {
   margin-right: 6px;
   /* border-left: 2px solid green; */
   background: #3d414969;
   padding: 0px 8px;
   color: lightblue;
   height: 25px;
   line-height: 25px;
   width: 36px;
}

 #divStructure button:hover {
   background-color: #444;
 }

.structureToggleSwitch {
   background: #484a505c;
   cursor: pointer;
   position: absolute;
   right: 1px;
   bottom: 0px;
   padding: 1px 8px;
   color: lightblue;
   opacity: .6;
}

.structureToggleSwitch.showCreationElements {
   right: 140px;
}

#createItemsInner[data-showextratoggles="no"] .divStructureViewButtons,
#createItemsInner[data-showextratoggles="no"] .structureToggleHide,
.structureToggleShow {
    display: none;  
}

#createItemsInner[data-showextratoggles="no"] .structureToggleShow {
   display: block;
}




 #divStructure #divStructureContainer {
   background-color: #181c32;
   border: 1px solid #000000;
   padding: 10px;
   width: 98%;
   border-radius: 4px;
    position: relative;
 }

#entire_item_creation[data-width="large"] #divStructureContainer {
   /* border: 1px solid #ffff005c; */
}



 #divStructure .item {
   display: flex;
   align-items: center;
   margin: 5px 0;
   margin-bottom:  18px;
   padding: 1px 4px;
   position: relative;
   overflow: hidden;
   border: 1px solid #00800000;
 }

#divStructure .item:nth-child(even) {
   background: #181c32;
   background: #1b2247;
   
}

#divStructure .item.divStructureRow[data-active="yes"],
#divStructure .item.moreClasses[data-active="yes"] {
   background: #11294b;
   border: 1px solid #507e85;
}

#divStructure .item.divStructureRow[data-currentlyhidden="yes"] .edit-toggle {
   background: #3f2727;
}
 #divStructure .indent-controls {
   display: flex;
   flex-direction: row;
   gap: 2px;
   margin-right: 10px;
 }

 #divStructure .edit-toggle {
   margin-right: 5px;
   height: 40px;
   height: 25px;
   line-height: 25px;
   width: 42px;
 }

#divStructure .edit-toggle.inactiveButton {
   /* background: #261a1a; */
   color: #35454b;
   cursor: default;
}

#divStructure .edit-toggle.inactiveButton:hover {
   background: #2a2f3be0 !important;
}



 #divStructure .arrows {
   /* display: flex; */
   /* flex-direction: column; */
   /* justify-content: center; */
   margin-left: 5px;
   height: 25px;
 }

 #divStructure .arrows button {
   /* padding: 4px 6px; */
   /* height: 50%; */
   /* border: 1px solid green; */
   display: inline-block;
   /* height: 15px; */
   overflow: hidden;
   /* line-height: 15px; */
   /* display: block; */
   margin-right: 6px;
 }

 #divStructure .action-buttons {
   /* display: flex; */
   flex-direction: column;
   justify-content: center;
   margin-left: 5px;
   height: 25px;
 }

 #divStructure .action-buttons button {
   height: 100%;
   padding: 0 10px;
 }

#divStructure .structureDuplicateButton {
   /* height: 15px !important; */
   /* width: 15px !important; */
   /* display: inline-block; */
   margin-left: 6px;
}

.structureAddButton {
   margin-right: 6px;
}

 #divStructure .round-buttons {
   display: flex;
   gap: 4px;
   margin-left: 10px;
 }

#divStructure .round-buttons {
   /* display: none; */
}
#entire_item_creation data-width="huge"]  .round-buttons {
   display: inline-block;
}

 #divStructure .round-buttons div {
   border-radius: 50%;
   opacity: 0.5;
   width: 30px;
   height: 30px;
   text-align: center;
   font-size: 10px;
   padding: 0;
   background: #28293d;
   line-height: 30px;
   cursor: default;
   /* cursor: pointer; */
 }

.divStructureRow[data-hasHTML="yes"] .htm_roundButton,
.divStructureRow[data-hasCSS="yes"] .css_roundButton,
.divStructureRow[data-hasJavascript="yes"] .js_roundButton,
.divStructureRow[data-hasContent="yes"] .con_roundButton {
      opacity: 1 !important;
    

}

.divStructureRow[data-hasJavascript="yes"] .js_roundButton {
   background: #531c5c !important;
   color: #d0bebe !important;
   cursor: pointer !important;
}

.divStructureRow[data-hasCSS="yes"] .css_roundButton {
   background: #0b370b !important;
   cursor: pointer !important;
}

.divStructureRow[data-hasHTML="yes"] .htm_roundButton {
     background: #1c5359 !important;
     color: #97adb4 !important;
     cursor: pointer !important;
}

.divStructureRow[data-hasContent="yes"] .con_roundButton {
   background: #2a5e2e !important;
   color: lightgray !important;
   cursor: pointer !important;
}

 #divStructure #divStructureObjectView, #divStructure #divStructureJSONView {
   margin-top: 20px;
   background-color: #222;
   border: 1px solid #444;
   padding: 10px;
   white-space: pre-wrap;
   font-family: monospace;
   color: #aaffaa;
 }

 #divStructure #divStructureJSONView {
   display: none;
 }

 #divStructure #divStructureObjectView {
   display: none;
 }

 #divStructure #divStructureMessage {
   margin-top: 10px;
   color: #ffaaaa;
   font-style: italic;
   display: none;
 }

 #divStructure .divStructureViewButtons {
   display: block;
   gap: 10px;
   margin-top: 10px;
   margin-bottom: 10px;
   /* border: 1px solid green; */
   white-space: unset;
 }

.structureToggleAdditionalLanguage {
   min-width: 196px;
}

#entire_item_creation[data-widthsub700="true"] .structureToggleAdditionalLanguage {
   min-width: unset;
}

#entire_item_creation[data-widthsub700="true"] .structureToggleCreationButtons,
#entire_item_creation[data-widthsub700="true"] .toggleAdditionalLanguageFull {
   font-size: 13px !important;
}

#entire_item_creation .structureToggleCreationButtons {
   display: inline-block;
   margin-top: 10px;
   min-width: 196px;
   background: #363648;
   color: #74b8d6;
}

#entire_item_creation[data-above1150="yes"]  .structureToggleCreationButtons {
   display: inline-block;
   min-width: unset;
   margin-top: 13px;
}

.toggleAdditionalLanguagePartial {
   display: none;
}

/*#entire_item_creation[data-widthsub700="true"] .toggleAdditionalLanguageFull,
.toggleAdditionalLanguagePartial {
   display: none;
}

#entire_item_creation[data-widthsub700="true"] .toggleAdditionalLanguagePartial {
   display: block;
}*/

.structureAdditionalEditorTitle {
   background: black;
   line-height: 30px;
   text-align: center;
   font-size: 15px;
   color: lightblue;
   position: relative;
}

.creationAdditionalEditorClose {
   position: absolute;
   top: 0;
   right: 8px;
   opacity: .7;
   cursor: pointer;
   
}
















.cssRulesetsOptionsToggle {
   position: absolute;
   top: 0px;
   left: 8px;
   cursor: pointer;
}



#cssRulesetModule {
      position:fixed;
      height: unset;
      width: 800px;
      z-index: 44;
      background: #0f0c2d;
      top: 101px;
      left: 30px;
      border: 1px solid #000000;
      overflow-y: auto;
      /* max-height: 917px; */
      padding-bottom:  30px;
      display: none;
}

.cssRulesSaveAndLoadTitle {
      background: black;
      height: 30px;
      line-height: 30px;
      text-align: center;
      color: #9f9b9b;
}
#cssRulesetInner {
   
height: unset;
   
overflow-y:auto;
}

.saveAndLoadCSSRulesetsHide {
   position: absolute;
   top: 0;
   right: 8px;
   cursor: pointer;
   font-size: 18px;
}

.cssRulesetSaveButton {
   display: inline-block;
   background: #05200a;
   padding: 8px;
   cursor: pointer;
   color: lightgray;
   height: 38px;
   line-height: 38px;
   padding-top: 0;
   padding-bottom: 0;
   vertical-align: top;
}



#cssRulesetRuleInput,
#cssRulesetSaveInput,
#cssRulesetDescription,
#placeholder_input {
   background: black;
   color: lightblue;
   border: 1px solid #454141;
}

#page #cssRulesetSaveInput {
   border: 1px solid #1d1d1d;
}

#creationCSSRuleSelector {
   background: none;
   color: rgb(199, 198, 198);
   border: 1px solid #0080004d;
   cursor: pointer;
}

#cssRulesetRuleInput {
   padding: 5px;
   
}

#cssRulesetDropdown {
   border: 1px solid #000000;
   padding: 7px;
   height: unset;
   vertical-align: top;
}

.cssRulesetSelectorExportRow,
.cssRulesetSelectorsArea,
.cssRulesSaveAndLoadInputLine {
      margin: 8px;
      padding: 8px;
      background: #252534;
      color: lightblue;
      text-align: left;
}


#entire_item_creation .cssRulesetSelectorExportRow,
#entire_item_creation .cssRulesetSelectorsArea,
#entire_item_creation .cssRulesSaveAndLoadInputLine {
      margin: 3px;
      /* border: 1px solid #ffff005c; */
      margin-left: 7px;
      margin-right: 8px;
      /* margin-bottom: 6px; */
}


.cssRulesetNotes,
#cssRulesetPreviewArea {
   /* height: 80px; */
   opacity: 1;
   overflow: Hidden;
   border: 1px solid green;
   background: black;
}

.cssRulesetNotes {
   background: #0f3247;
   margin-top: 100px;
   padding: 10px;
   margin: 15px;
   margin-top: 70px;
   font-size: 16px;
   line-height: 27px;
   display: none;
}

#cssRulesetPreviewArea {
   border: 1px solid #b3b9b9;
   min-height: 100px;
   min-width: 100px;
   background: black;
   padding: 7px;
}

#cssRulesetPreviewOptions {
   position: absolute;
   top: 35px;
   background: black;
   z-index: 33;
   border: 2px solid #0000008f;
   left: 6px;
   display: none;
}


.cssRulesetPreviewOptions {/* border: 2px solid #040404; */background: teal;/* padding:  15px; */background: #15172d;}

#cssRulesetPreviewArea input,
#cssRulesetPreviewArea select {

background: #31313f;

color: #b1bfc3;

max-width: 140px;

outline: none;

border: none;

padding: 2px;

bordeR: 1px solid #52505030;
}

.rulesetCreationOptionsSave {
   background: #112551;
   display: inline-block;
   cursor: pointer;
   padding: 8px;
   border: 1px solid black;
   color: lightblue;
}

#cssRulesetPreviewArea input[type="number"] {
   width: 70px;
}
.cssRulesetPreviewOptionsArea {/* border: 1px solid #59595936; */margin-bottom: 9px;padding: 4px;background: black;/* margin-left: 30px; */}


.cssRulesetPreviewOptionsArea[data-type="showHTMLComments"],
.cssRulesetPreviewOptionsArea[data-type="showJavascriptComments"] {
   
   display: inline-block;
}


.cssRulesetPreviewOptionsMainTitle {
   padding: 3px;
   background: #0a1042;
   text-align: center;
   font-size: 18px;
   color: #afafaf;
   position: relative;
}

.cssRulesetPreviewOptionsMainTitle i {
   position: absolute;
   right: 14px;
   cursor: pointer;
}

.cssRulesetPreviewOptionsInner {
   padding: 19px;
   /* bordeR: 1px solid yellow; */
   background: #000000;
   overflow-y: auto;
   height: calc(100% - 37px);
   padding-bottom: 0;
}

.previewAreaDefaultRenderButton,
.previewAreaShowDefaultButton {
   background: #2a71a5;
   display: inline-block;
   margin-right: 10px;
   cursor: pointer;
   opacity: .5;
   border: 1px solid #2a71a5;
   min-width: 50px;
   text-align: center;
   height: 26px;
   line-height: 26px;
}

.previewAreaDefaultRenderButton[data-active="yes"],
.previewAreaShowDefaultButton[data-active="yes"] {
   opacity: 1;
}



.cssRulesetPreviewOptionsAreaContent,
.cssRulesetPreviewOptionsAreaTitle {
   /* border: 1px solid green; */
   /* background: dimgray; */
   display: inline-block;
   /* padding: 4px; */
   }

.cssRulesetPreviewOptionsAreaTitle {
   padding: 2px;
   background: #242b56;
   width:112px;
   padding-left: 3px;
   font-size: 13px;
   height: 26px;
   line-height: 26px;
   vertical-align: top;
   padding-top: 0;
   padding-bottom: 0;
}

#itemCreationPreviewOptions .cssRulesetPreviewOptionsAreaTitle {
   width: 138px;
}


.rulesetPreviewCustomSection {
      display: inline-block;
      /* border: 3px solid #00ff56; */
      position: relative;
}

.rulesPreviewCustomCover {
   /* display: none; */
   background: black;
   opacity: .6;
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
}


.rulesetPreviewModifiedArea {
      background: #0c360c;
      display: inline-block;
      padding: 6px;
      display: none;
}

.rulesetPreviewModifiedArea[data-type="modified"] {
   background: #3f0c0c;
}

#itemCreationPreviewOptions select,
#itemCreationPreviewOptions input,
#cssRulesetPreviewOptions select,
#cssRulesetPreviewOptions input {
   background: #14405e;
   color: lightgray;
   border: none;
   display: inline-block;
   width: 140px;
   height: 26px;
   line-height: 26px;
   padding-left: 5px;
   }

#cssRulesetPreviewOptions input[type="number"] {
   /* width: 100px; */
}
#cssRulesetPreviewDisplay {height: 200px;width: 218px;border: 1px solid #4b4c4d;background: #4f495c;margin: 5px;margin-top: 50px;padding: 4px;overflow: hidden;margin-left: 12px;position: relative;}

.cssRulesetSelectorExportRowTitle,
.cssRulesetInputLineTitle {
   background: #050a36;
   display: inline-block;
   padding: 5px;
   border: 2px solid #32322d75;
}

.cssRulesetExportButton {
   padding: 5px;
   background: #203961;
   display: inline-block;
   cursor: pointer;
   border: 1px solid #0909099e;
   margin-left: 6px;
}

#previewPage .cssRulesetExportButton[data-type="editors"] {
      display: none;
}

.rulesetSpecialOptions {
   display: inline-block;
   margin-top: 12px;
}

.toggleRulesetNotes,
.toggleRulesetPreviewArea,
.toggleRulesetPreviewOptions {
   background: #552560;
   margin: 3px;
   padding: 3px;
   display: inline-block;
   cursor: pointer;
   bordeR: 1px solid black;
}

.cssRulesetsModifiedArea {
      background: #093209;
      padding: 6px;
      display: inline-block;
      cursor: pointer;
   width: 230px;
   text-align: center;
}

.cssRulesetsModifiedArea[data-state="modified"] {
   background: #450808;
}

.cssRulesetExportButton.rules {
   opacity: .4;
   background: #0b2824;
   color: lightgray;
   /* margin-left: 6px; */
}
.cssRulesetExportButton.rules[data-active="yes"] {
   opacity: 1;
}


.setRulesetExportDefault {
   display: inline-block;
   padding: 5px;
   cursor: pointer;
   color: lightgray;
   opacity: .6;
}

.toggleRulesetPreview {
      position: absolute;
      top: 1px;
      left: 43px;
      cursor: pointer;
      opacity: 0.4;
}


.cssRulesetLoad,
.cssRulesetInputAddButton {
   display: inline-block;
   padding: 5px;
   background: #18385f;
   cursor: pointer;
}

.cssRulesetLoad.setAsDefault {
   background: #2e3b5f;
   margin-left: 30px;
}

.renderCSSRuleset {
   background: #3c0946;
   padding: 3px;
   display: inline-block;
   margin-left: 8px;
   cursor: pointer;
   display: none;
}

.cssRulesetLoad.delete {
   background: #3b1e1e;
   color: lightgray;
}

#cssRulesetDescription {
   
   width: 500px;
   height: 100px;
   
}



.sharingCopyButton,
.sharingRandomizebutton {
   background: black;
   display: inline-block;
   padding: 8px;
   margin: 8px;
   cursor: pointer;
   color: lightblue;
}

.sharingCopyButton {
   width: 70px;
   padding: 8px 0px;
   text-align: center;
}

.oneSharingCheckbox {
   display: inline-block;
   background: black;
   padding: 5px;
   margin: 5px;
   width: 43%;
   text-align: center;
   cursor: pointer;
}

.oneSharingCheckbox[data-active="no"] {
   opacity: 0.6;
}

.oneSharingCheckbox[data-active="yes"] {
   color: cyan;
   opacity: 1;
}

#sharingSectionInner {
   padding: 15px;
}



#sharingSection {
   border: 3px solid #000000;
   width: 77%;
   position: fixed;
   background: #252428;
   z-index: 333;
   top: 85px;
   left: 34px;
   height: 91%;
   overflow: hidden;
   border: 1px solid #000000;
   /* display: none; */
}

#page[data-pagename="mainindex"] #sharingSection {
   display: block;
   width: 90%;
   left: 5%;
}

#sharingWindowOverlay {
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background: #121111cf;
   position: fixed;
   z-index: 333;
   display: none;
}

#page[data-navshown="no"] #sharingSection {
   width: 91.5%;
}

body[data-glossaryfullwidthstatus="off"] #sharingSection {
   width: 70%;
}

.sharingSectionCloseButton {
   position: absolute;
   top: 16px;
   right: 16px;
   color: lightblue;
   cursor: pointer;
}

#sharingSectionTitle {
   background: black;
   text-align: center;
   padding: 8px 0px;
   font-size: 22px;
   color: lightblue;
}

.oneSharePreset,
.oneShareSection {
   background: #0e0e30;
   padding: 10px;
   margin-bottom: 10px;
   border: 2px solid black;
}

.oneSharePreset {
   background: #181717;
   opacity: .7;
   color: black;
   display: none;
}

.sharingTextArea {
   background: #1e232d;
   width: 100%;
   color: lightblue;
   outline: none;
   font-size: 19px;
   height: unset;
   height: 140px;
   font-family: arial;
   line-height: 30px;
   resize: none;
}



#sharingAdjectivesDropdown,
#sharingStartDropdown,
#sharingDescriptionDropdown {
   background: black;
   color: lightblue;
   min-width: 90px;
   padding: 5px;
   bordeR: 1px solid #353535 !important;
   border-radius: 2px;
   outline: none !important;
   height: 35px;
   width: 220px;
}

.oneShareSectionTitle {
   display: inline-block;
   width: 216px;
   background: black;
   padding: 4px;
   bordeR: 1px solid #ffffff26;
   color: lightblue;
   height: 35px;
   line-height: 35px;
   padding: 0px 4px;
   vertical-align: top;
}

.oneSharingCheckboxtopSharebutton {
   line-height: 16px;
}

#sharingNameCheckboxes,
#sharingFeaturesCheckboxes,
#sharingAdjectivesCheckboxes {
   background: #1c1e1c;
   display: inline-block;
   padding: 6px;
   width: calc(100% - 255px);
   vertical-align: top;
}

#sharingAdjectivesCheckboxes {
   display: none;
}



#surveyPage {
   /* background: black; */
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   /* border: 3px solid green; */
}

#surveyHeader {
   background: black;
   color: lightblue;
   position: relative;
   height: 70px;
   text-align: right;
   font-size: 18px;
   /* border: 3px solid #800076; */
}

.surveyLogo {
   position: absolute;
   right: 37px;
   top: 27px;
   font-size: 36px;
   /* border: 1px solid cyan; */
   /* display: inline-block; */
   /* padding: 14px; */
   color: rgb(172, 172, 191);
   font-family: "Lobster Two", cursive;
   /* text-shadow: rgb(70, 73, 82) 3px 2px; */
}

.surveyBodyInner {
   background: #2c3851;
   padding: 20px 40px;
   /* margin: 70px; */
   /* min-height: 700px; */
   border: 3px solid #000000;
   font-size: 12px;
   padding-bottom: 20px;
   width: 92%;
   margin-left: 4%;
   height: calc(100% - 55px);
   overflow: hidden;
}

.actualSurveyForm {
   height: calc(100% - 112.7px);
   overflow-y: auto;
   border: 1px solid #45444480;
   overflow-x: hidden;
   padding: 19px;
   background: #000000;
   /* border: 3px solid yellow; */
   padding-top: 25px;
}


.actualSurveyForm::-webkit-scrollbar {
   width: 13px;
   height: 0;
   /*Entire scrollbar container*/
}

.actualSurveyForm::-webkit-scrollbar-track {
   background: #141721;
   border-radius: 2px;
   /*Track, within container*/
}

.actualSurveyForm::-webkit-scrollbar-thumb {
   background: #53637e;
   border-radius: 0px;
   /*Draggable scrollbar handle*/
}



.surveyHeading {
   padding: 8px;
   text-align: center;
   font-size: 29px;
   background: black;
   margin-bottom: 30px;
   color: lightblue;
}

.surveyHeadingInstructions {
   font-size: 18px;
   margin-bottom: 8px;
   background: #13131385;
   padding: 6px;
   padding-left: 25px;
   border: 1px solid black;
   color: #aec5cc;
   padding-right: 25px;
}


.forminator-ui#forminator-module-340.forminator-design--default .forminator-label .forminator-required {
   color: #8dabce !important;
}

.forminator-ui#forminator-module-340.forminator-design--default .forminator-button-submit {
   background: #32324f !important;
   color: lightblue;
}

.forminator-ui#forminator-module-340.forminator-design--default .forminator-label {
   font-size: 16px !important;
   color: #9eb9c1;
   background: #222e44;
   /* max-width: 249px; */
   padding-left: 14px;
   margin-bottom: 5px;
   /* height: 24px !important; */
   line-height: 24px;
   font-weight: 600 !important;
   !i;
   !;
}

.forminator-ui#forminator-module-340.forminator-design--default .forminator-error-message {}

.forminator-ui#forminator-module-340.forminator-design--default .forminator-label,
.forminator-row input,
.forminator-ui#forminator-module-340.forminator-design--default .forminator-error-message {
   width: 99% !important;
}

.forminator-ui#forminator-module-340.forminator-design--default .forminator-error-message {
   background-color: #0d1a2e4a !important;
   color: #c1d3d3 !important;
   font-size: 16px !Important;
   padding: 4px !important;
   font-size: 14px !important;
   color: #75aabc !important;
}

.forminator-row textarea,
.forminator-row input {
   background: #1e1f21;
   color: lightblue;
   border: 1px solid #64636308;
   height: 30px !important;

}

#surveyBody {
   background: #070734;
   /* border: 3px solid purple; */
   height: calc(100% - 70px);
   /* border: 2px solid yellow; */
   /* padding: 25px; */
   padding-top: 38px;
}


@media only screen and (max-width: 1100px) {
   .surveyHeadingInstructions {
      font-size: 15px;
   }


   #page .forminator-ui#forminator-module-340.forminator-design--default .forminator-label {
      font-size: 15px !important;
   }
}

@media only screen and (max-width: 500px) {
   body.touchscreen .surveyBodyInner {

      margin-left: 9px;
      width: calc(100% - 18px);
      padding-left: 8px;
      padding-right: 8px;
   }

   body.touchscreen #surveyBody {
      padding-top: 10px;
   }

   body.touchscreen .surveyHeading {
      font-size: 19px;
      margin-bottom: 10px;
   }

   body.touchscreen .surveyHeadingInstructions {
      font-size: 13px;
   }
}


@media only screen and (max-height: 500px) {
   body.touchscreen .surveyBodyInner {
      margin-left: 9px;
      width: calc(100% - 18px);
      padding: 10px 8px;
      /* padding-right:8px; */
      height: calc(100% - 9px);
   }

   body.touchscreen #surveyBody {
      padding-top: 10px;
   }

   body.touchscreen .surveyHeading {
      font-size: 17px;
      margin-bottom: 10px;
      padding: 4px;
   }

   body.touchscreen .surveyHeadingInstructions {
      font-size: 13px;
      padding: 4px;
      padding-left: 25px;
   }

   body.touchscreen .actualSurveyForm {
      padding: 10px;
      height: calc(100% - 90px);
   }

   #surveyHeader {
      height: 45px;
   }

   #surveyBody {

      height: calc(100% - 45px);
   }

   .surveyLogo {
      position: absolute;
      right: 37px;
      top: 13px;
      font-size: 27px;
   }
}

.oneLogBoxElapsedArea {
   background: #101930;
   padding: 6px;
   width: 97%;
   margin-top: 30px;
   margin-bottoM: 50px;
   font-size: 20px;
}

.logBoxElapsedLine {
   border-bottom: 1px solid #00ffff47;
   margin-bottom: 15px;
}

.logBoxElapsedLine[data-type="functions"] .logBoxElapsedLineTitle {
   text-align: center;
   display: block;
   background: black;
   color: lightblue;
}

.logBoxElapsedLineTitle,
.logBoxElapsedNumber,
.logBoxElapsedTime,
.logBoxElapsedFunctions {
   display: inline-block;
}

.logBoxElapsedFunctions {
   max-height: 400px;
   overflow-y: auto;
}

.oneElapsedVal {
   display: inline-block;
   background: #16131a;
   padding: 5px;
   font-size: 15px;
   margin: 3px;
   margin-bottom: 8px;
   border: 1px solid #00000085;
   color: lightblue;

}

.oneElapsedVal:nth-child(odd) {
   color: #63b0da;
}

.logBoxElapsedAreaTitle {
   text-align: center;
   background: black;
   bordeR: 1px solid #008bff78;
   margin-bottom: 20px;
}

.fade-enter-active,
.fade-leave-active {
   transition: opacity 0.8s ease 0s;
}

.centeringDimensionsSection {
   margin-top: 18px;
}

#margin0AutoExplanation {
   display: none;
}

.centeringToolNotes {
   background: #1b1a2c;
   margin-top: 50px;
   padding: 9px;
   font-size: 19px;
}

.optionalProperty {
   display: inline-block;
}

.requiredProperty {
   display: none;
}

.centeringMessageArea {
   color: transparent;
   transition: .5s color;
   font-size: 15px;
   padding: 8px;
   /* border: 1px solid lightblue; */
}

#toolOutputArea[data-showmessage="yes"] .centeringMessageArea {
   color: lightblue;

}



.centeringOptions {
   /* border: 1px solid yellow; */
   display: none;
   display: block;
   overflow: hidden;
   position: absolute;
   background: #09090c;
   width: 100%;
   top: 32px;
   left: 0;
   height: calc(100% - 160px);
   display: none;
   z-index: 55;
   font-size: 20px;
}

.childCenteringWidthHeight {
   background: darkblue;
   border: 1px solid lightblue;
   width: 85px;
   outline: none;
   color: lightblue;
}

.centeringToggleButton {
   display: inline-block;
   opacity: .4;
   background: #353564;
   padding: 0px 4px;
   font-size: 14px;
}

.centeringToggleButton[data-active="yes"] {
   opacity: 1;
   border: 1px solid #474b4d;
}

.centeringTips,
.centeringToolOptionsButton,
.includeParent,
.includeDimensions,
.centeringSaveDefaults {
   background: #3e1d4f;
   margin: 4px;
   padding: 4px;
   display: inline-block;
   cursor: pointer;
}

#page .centeringToolOptionsButton {
   position: absolute;
   right: 5px;
}

.centeringSaveDefaults {
   font-size: 16px;
}

.includeDimensionsTitle {
   display: inline-block;
   font-size: 14px;
   width: 192px;
}

.centeringTips {
   display: none;
}

.includeParent,
.includeDimensions {
   background: none;
   display: block;
}

#sampleRowColorOutput,
#rowColorOutput,
#selectorToolOutput,
#sampleScrollerOutput,
#CSSToolOutput,
#scrollbarOutput,
#centeringOutput,
#page .toolOutput {
   /* background: #291154; */
   border: 1px solid #2f3333;
   width: 90%;
   min-height: 400px;
   color: lightblue;
   outline: none;
   margin: 15px;
   padding: 8px;
   width: 94%;
}

#rowColorOutput,
#centeringOutput,
#scrollbarOutput {
   display: none;
}

#rowColorOutput {
   min-height: 600px;
   min-height: unset;
   height: 486px;
}

#toolOverlay[data-type="centering"] #centeringOutput,
#toolOverlay[data-type="scrollbars"] #scrollbarOutput,
#toolOverlay[data-type="rowColors"] #rowColorOutput {
   display: block;
}


#selectorToolOutput {
   width: 90%;
   border: 1px solid black;
}

.exportToolboxToEditors,
.cssToolCopyButton {
   margin: 6px;
   padding: 6px;
   background: #273b65;
   display: inline-block;
   cursor: pointer;
}

.cssToolCopyButton {
   display: none;
}



#toolOverlay[data-type="centering"] .cssToolCopyButton[data-type="centering"],
#toolOverlay[data-type="scrollbars"] .cssToolCopyButton[data-type="scrollbars"],
#toolOverlay[data-type="rowColors"] .cssToolCopyButton[data-type="rowColors"] {
   display: inline-block;
}


#previewPage .exportToolboxToEditors {
   display: none;
}

.cssToolCopyButton[data-type="selectors"] {
   background: #0d1c48;
   padding: 6px 22px;
   border: 1px solid black;
}


#toolOverlay[data-type="scrollbars"] .cssToolCopyButton[data-type="centering"],
#toolOverlay[data-type="centering"] .cssToolCopyButton[data-type="scrollbars"] {
   display: none;
}


#selectorOutputSection {
   /* position: absolute; */
   /* bottom: 125px; */
   /* right: 5px; */
   min-height: unset;
   background: #1d1d2a;
   border: 2px solid black;
   padding: 6px;
   margin: 0px 8px;
}

.selectorGenerateRow {
   padding: 8px;
}

.recentAndSavedSelectors {
   background: #21202b;
   padding: 8px;
   margin: 8px;
   margin-bottom: 18px;
}

.updateStored {
   padding: 4px;
   display: inline-block;
   background: #101e3e;
   margin-top: 13px;
   cursor: pointer;
}

.recentSavedButton {
   background: #2a475e;
   cursor: pointer;
   display: inline-block;
   height: 35px;
   line-height: 35px;
   width: 60px;
   text-align: center;
   cursor: pointer;
   vertical-align: top;
}

#toolOutputArea .recentSavedButton.copy,
#toolOutputArea .recentSavedButton.copy {
   display: none;
}

.recentSavedButton.copy {
   background: #0e1d43;
}

.recentSavedButton.load {
   background: #214542;
}

.recentSavedButton.delete {
   background: #452132;
}

.cssRowColorToolHelp {
   position: absolute;
   display: none;
   min-height: 80px;
   width: 100%;
   color: lightblue;
   z-index: 12;
   top: 0;
   /* padding: 15px; */
   border: 1px solid #0000008c;
   height: 100%;
   overflow: hidden;
   /* border: 3px solid yellow; */
   background: black;
}

.cssRowColorToolHelpTitle {
   background: black;
   text-align: center;
   padding: 6px 0px;
   border-bottom: 1px solid #bdc3c55c;
   color: lightgray;
}

.cssRowColorToolHelpTitle i {
   position: absolute;
   right: 8px;
   cursor: pointer;
}

.cssRowColorToolHelpInner {
   padding: 8px;
   /* padding-bottom: 40px; */
   background: #040419;
   width: 5;
   height: calc(100% - 35px);

   overflow-y: auto;
}

.cssRowColorHelpLine {
   margin: 6px;
   padding: 13px;
   /* border: 1px solid #ffffff24; */
   background: black;
   margin-bottom: 20px;
   background: #000000;
   line-height: 26px;
}

.cssRowColorHelpLine:nth-child(even) {
   background: #0a0909;


}

.cssRowColorHelpLineThird {
   margin-top: 12px;
   padding-left: 39px;

}

.cssRowColorHelpLineThird i {
   font-size: 10px;
   margin-right: 9px;
}

.cssRowColorHelpLineThird:nth-child(even) {
   color: #92afc8;
}

#selectorOutputSectionTitle {
   background: black;
   /* width: 440px; */
   padding: 10px;
   font-size: 17px;
   text-align: center;
   display: none;
}



.randomSelector,
.selectorCombinationTitle,
.generateNewSelector {
   background: #1f2d43;
   color: white;
   padding: 5px;
   cursor: pointer;
   display: inline-block;
   /* display: none; */
}

.randomSelector {
   background: #36164d;
   display: none;
}

.randomSelector.pack {
   opacity: .2;
}

.lastFiveSelectors {
   background: #223059;
   padding: 9px;
   padding-bottom: 12px;
   margin-bottom: 15px;
}

.oneOfLatestSelectors {
   background: black;
   margin: 4px;
   padding: 6px;
   display: inline-block;
}

.additionalSelectors {
   border: 1px solid black;
   padding: 12px;
   background: #3a3f3e;
   margin-top: 8px;
   max-height: 233px;
   overflow-y: auto;
}

.currentFullSelector {
   padding: 8px;
   border: 1px solid green;
   background: darkblue;
   min-height: 30px;
   display: none;
}

.oneAdditionalSelector {
   background: black;
   display: inline-block;
   padding: 4px;
   margin-left: 9px;
   cursor: default;
   margin-bottom: 9px;
   font-size: 15px;
}

.removeThisSelector {
   background: #3f2d2d;
   display: inline-block;

   cursor: pointer;
   margin-left: 12px;
   color: white;
   height: 28px;
   line-height: 28px;
   width: 28px;
   text-align: center;
}

.removeThisSelector i {
   color: #cbb9b9;
}

selected {
   font-size: 33px;
}

#selectorToolOutput {
   min-height: unset;
   height: 130px;
}

.recentSavedSectionTitle {
   display: inline-block;
   /* border: 1px solid #ffff003b; */
   height: 35px;
   vertical-align: top;
   line-height: 35px;
   margin-right: -1px;
   padding: 0px 8px;
   width: 87px;
}

.recentAndSavedSelectors .recentSection {
   margin-bottom: 11px;
}

#sampleRowColorOutput,
#sampleScrollerOutput {
   min-height: unset;
   height: 62px;
   display: none;
}

#sampleRowColorOutput {
   /* display: block; */
   height: 550px;
}

.packedScrollbarVals {
   border: 1px solid #888886;
   margin-top: 30px;
   background: #091530;
   display: none;
}

.packedScrollbarValsInner {
   min-height: 30px;
   min-width: 30px;
   background: #2b2430;
   margin: 6px;
   max-height: 65px;
   overflow: hidden;
}

.oneScrollbarPackedItem {
   border-bottom: 1px solid black;
   margin-bottom: 3px;
   padding-left: 8px;
}

.oneScrollbarPackedItem:nth-child(even) {
   background: black;
}

#page .toolOutput {
   height: 70px;
   min-height: unset;
   background: #454e4b;
   display: none;
}

#toolOverlay[data-type="selectors"] .toolOverlayTitleButton[data-type="selectors"],
#toolOverlay[data-type="scrollbars"] .toolOverlayTitleButton[data-type="scrollbars"],
#toolOverlay[data-type="rowColors"] .toolOverlayTitleButton[data-type="rowColors"],
#toolOverlay[data-type="centering"] .toolOverlayTitleButton[data-type="centering"] {
   background: #132145;
   opacity: 1;
   border: 1px solid #939ea147;
}

.closeSelectorTool,
.closeCSSTools {
   position: absolute;
   cursor: pointer;
   top: 1px;
   right: 12px;
   color: lightgray;
   font-size: 14px;
}

#toolOverlay[data-type="rowColors"] #rowColorTool,
#toolOverlay[data-type="selectors"] #selectorTool,
#toolOverlay[data-type="scrollbars"] #scrollbarTool,
#toolOverlay[data-type="centering"] #centeringTool {
   display: inline-block;
}

.toggleCenteringNotes {
   background: #081e2a;
   position: absolute;
   cursor: pointer;
   bottom: 3px;
   padding: 12px;
   font-size: 13px;
   display: none;
}

.oneButton[data-type="scroll"],
.oneButton[data-type="ks"],
.oneButton[data-type="centering"] {
   opacity: .4;
}

body[data-section="scroll"] .oneButton[data-type="scroll"],
body[data-section="ks"] .oneButton[data-type="ks"],
body[data-section="centering"] .oneButton[data-type="centering"] {
   background: #03051f;
   opacity: 1;

}

#toolOverlay,
#ks_page_main {
   min-height: 300px;
   border: 2px solid #0f2228;
   border: 7px solid #0090ff;
   position: fixed;
   height: calc(100% - 61px);
   overflow-y: auto;
   display: none;
}


body[data-section="scroll"] #toolOverlay,
body[data-section="centering"] #toolOverlay,
body[data-section="ks"] #ks_page_main {
   display: block;
}



.selectorElementTreeTitle {
   position: absolute;
   bottom: 12px;
   width: 100%;
   background: black;
}

.selectorElementTreeSection,
.selectorTagSection,
.selectorAttributeSection,
.selectorPseudoSection,
.selectorCombinationSection {
   /* border: 1px solid #8d97964a; */
   margin: 8px;
   padding: 8px;
   background: #1d1d2a;
}

.selectorElementTreeSection {
   position: relative;
   padding-bottom: 59px;
}

.grabbingSelectorStatus {
   background: #5a2e2e;
   color: white;
   margin-top: 12px;
   padding: 12px;
   display: block;
   width: 242px;
   font-size: 13px;
}

.grabbingSelectorStatus[data-state="yes"] {
   background: #053a05;
}

#selectorGenerateSection,
.selectorElementTreeSection {
   display: none;
}

#selectorOverlay[data-type="acquire"] .selectorElementTreeSection,
#selectorOverlay[data-type="generate"] #selectorGenerateSection {
   display: block;
   /* height: 700px; */
   overflow-y: auto;
}

#selectorGenerateSection {
   height: calc(100% - 40px);
   /* border: 1px solid yellow; */
   position: relative;
}

#elementTreeForSelectors {
   background: #1f3045;
   padding: 8px;
}

.toggleSelectorGrabber {
   display: inline-block;
   background: black;
   padding: 8px;
   cursor: pointer;

}

.selectorPseudoInner {
   height: 36px;
}

.selectorTagTitle {
   /* border: 1px solid #ffffff54; */
   display: inline-block;
   vertical-align: top;
   height: 36px;
   line-height: 36px;
}

.valuesNotEmptyMessage {
   opacity: 0;
   transition: .3s opacity;
   color: #7ec6e2;
   text-align: center;
   margin-top: 12px;
   font-size: 15.2px;
}

.selectorAreaAddAttribute {
   display: inline-block;
   background: #404061;
   padding: 3px;
   border: 1px solid black;
   cursor: pointer;
   height: 36px;
   line-height: 36px;
   padding: 0px 11px;
}

#selectorTool,
#scrollbarTool,
#centeringTool {
   display: none;
   vertical-align: top;
}

#selectorTool {
   display: block;
}

#centeringTool {
   /* display: none; */
}

body[data-section="scroll"] #scrollbarTool {
   display: block;

}

body[data-section="centering"] #centeringTool {
   display: block;
}


#toolOverlay {
   min-width: 500px;
}


.centeringToolNotes {
   background: #170c21;
   font-size: 18px;
   padding: 14px;
   border: 1px solid #5a5a5a;
   margin-top: 60px;
   margin-bottom: 60px;
}

.parentCenteringSection,
.childCenteringSection,
.centeringToolOperationRow,
.centeringToolPositionSection,
.centeringToolTypeSection,
.elementCount {
   padding: 6px;
   /* border: 1px solid #6868686e; */
   margin-bottom: 15px;
   position: relative;
}

.centeringToolOperationRow {
   height: 53px;
}

.parentCenteringSection {
   position: relative;
}

.parentCenteringSection .parentCover {
   background: #000000;
   position: absolute;
   height: 50px;
   z-index: 5;
   top: 33px;
   width: 100%;
   height: calc(100% - 37px);
   opacity: 0.7;
   font-size: 0;
}

.toggleParentSection {
   text-align: right;
   font-size: 14px;
   /* border: 1px solid lightblue; */
   color: gray;
   cursor: pointer;
   position: absolute;
   top: 3px;
   right: 11px;
   opacity: 0.9;
   font-size: 12px;
}

.centeringToolTypeSection i {
   font-size: 14px;
}

#centeringMethod,
#centeringDefault {
   background: #1c2038;
   color: lightblue;
   outline: none;
   border: 1px solid #2b2d2d;
}

#centeringDefault {
   font-size: 14px;
}

#centeringMethod {
   height: 22px;
   line-height: 22px;
   font-size: 13px;
}


#page #rowColorTool input,
#scroll_selector,
#page .scrollbarOperationSection input,
#childCenteringPosition,
#parentCenteringPosition,
#parentCenteringSelector,
#childCenteringSelector {
   background: #1c2038;
   color: lightblue;
   outline: none;
   border: 1px solid #1515156e;
   height: 22px;
   line-height: 22px;
   font-size: 14px;
   vertical-align: top;
   width: 140px;
   padding-left: 5px;
}

#page #rowColorTool input {
   width: 100%;
}

#page .scrollbarOperationSection input,
#parentCenteringSelector,
#childCenteringSelector {
   width: 140px;
   height: 22px;
}

#page .scrollbarOperationSection input {
   width: 97px;
}

#childCenteringWidth,
#childCenteringHeight,
#parentCenteringWidth,
#parentCenteringHeight {
   background: #212b38;
   color: lightblue;
   outline: none;
   border: 1px solid #494b4c;
   width: 120px;
   height: 22px;
   vertical-align: top;
   width: 140px;
   border: 1px solid black;
   padding-left: 8px;
}

.centeringPositionTitle,
.centeringPosition {
   display: inline-block;
   border: 1px solid #d3d3d30a;
   width: 370px;
   margin-bottom: 2px;
}

.rowOperationTitle,
.scrollbarOperationTitle,
.centeringPositionTitle {
   background: #112030;
   padding: 0px 4px;
   width: 183px;
   height: 22px;
   line-height: 22px;
   border: 1px solid black;
   font-size: 16px;
   padding-left: 14px;
}

.rowOperationTitle,
.scrollbarOperationTitle {
   display: inline-block;
   vertical-align: top;
   width: 126px;
   font-size: 14px;
   text-align: left;
   position: relative;
}

.scrollbarOperationTitle {
   cursor: default;
}

.scrollbarOperationTitle[data-type="background"],
.rowOperationTitle {
   cursor: pointer;
}

.rowOperationTitle[data-type="selector"] {
   cursor: default;
}

.rowInputSection {
   display: inline-block;
   /* border: 1px solid #d3d3d36b; */
   width: calc(100% - 136px);
   position: relative;
}

.rowOperationSection {
   display: inline-block;
   /* border: 1px solid #00ffff3d; */
   width: 48%;
   margin-bottom: 12px;
   position: relative;
}

.rowBackgroundForInactive {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background: #222222;
   color: #222222;
   opacity: .9;
   display: none;
}

.rowOperationSection[data-active="no"] .rowBackgroundForInactive {
   display: block;
}

.scrollBackgroundInputSection {
   position: relative;
   display: inline-block;

}

.scrollBackgroundForInactive {
   position: absolute;
   top: 0;
   left: 0;
   height: 100%;
   width: 100%;
   opacity: .9;
   background: #202020;
   font-size: 0;
   display: none;
}

.scrollbarOperationLine[data-backgroundactive="no"] .scrollBackgroundForInactive {
   display: block;
}

.rowBackgroundToggleSection>i,
.scrollBackgroundToggleSection>i {
   color: #5c8baa;
   position: absolute;
   top: 0;
   right: 0;
   cursor: pointer;
   font-size: 19px;
   opacity: .8;

}

.rowBackgroundToggleSection>i {
   display: none;
}

.rowOperationSection[data-active="yes"] .fa-toggle-on {
   display: inline-block;
}

.rowOperationSection[data-active="no"] .fa-toggle-off {
   display: inline-block;
}



.scrollbarOperationLine[data-backgroundactive="no"] .fa-toggle-on,
.scrollBackgroundToggleSection .fa-toggle-off {
   opacity: 0;
}

.scrollbarOperationLine[data-backgroundactive="no"] .fa-toggle-off {
   opacity: .4;
   color: #b6b3b3;
}

.scrollBackgroundToggleSection[data-type="corner"] i,
.scrollBackgroundToggleSection[data-type="scrollHandle"] i {
   display: none;
}

#page .centeringPositionTitle.required {
   color: #ad7d78;
}

.centeringPositionTitle.required .optionalProperty {
   display: none;
}

.centeringPositionTitle.required .requiredProperty {
   display: inline-block;
   color: #bfb73d;
}

.centeringMakeDefault,
.randomizeProps,
.getScrollbarPops,
.centeringToolStart {
   background: #0c2653;
   padding: 6px;
   cursor: pointer;
   display: inline-block;
}

.getScrollbarPops {
   background: #06330c;
}


.textWithinChildButton,
.centeringToolPosition,
.centeringToolTypeButton,
.centeringElementCountButton {
   display: inline-block;
   background: #041730;
   padding: 4px;
   border: 1px solid #3e3e3e70;
   cursor: pointer;
   padding: 0px 8px;
   height: 22px;
   line-height: 22px;
}

.textWithinChildTitle {
   font-size: 13px;
   margin-top: 10px;
   display: inline-block;
   margin-left: 14px;
}

.textWithinChildButton {
   font-size: 13px;
   opacity: .4;
}

.textWithinChildSection i {
   font-size: 13px;

   vertical-align: top;
   height: 39px;
   line-height: 39px;
}

.centeringToolTypeButton,
.centeringElementCountButton {
   opacity: 0.3;
}

.textWithinChildButton[data-active="yes"],
.centeringElementCountButton[data-active="yes"],
.centeringToolTypeButton[data-active="yes"] {
   opacity: 1;
   font-weight: 600;
}

.textWithinChildButton[data-active="yes"] {
   color: lightblue;
}

.centeringToolBody {
   background: black;
   /* border: 2px solid #848989; */
   padding: 7px;
}

.cssToolHeading {
   background: #20364a;
   text-align: center;
   height: 30px;
   line-height: 30px;
   margin-bottom: 22px;
}

.rowColorTolHelpClick {
   position: absolute;
   right: 8px;
   top: 3px;
   font-size: 14px;
}

#scrollbarTool .cssToolHeading {
   background: #182348;
   position: absolute;
   top: 0;
   height: 30px;
   line-height: 30px;
   width: 100%;
}

.toggleScrollbarComments {
   position: absolute;
   top: 0;
   right: 10px;
   ;
   font-size: 10px;
   opacity: .4;
   cursor: pointer;
   transition: .2s opacity;
}

.toggleScrollbarComments:hover {
   opacity: .8;
}

#rowColorTool .cssToolHeading {
   background: #053d6b;
}

#selectorTool .cssToolHeading {
   background: #18254d;
   color: lightgray;
   padding-left: 32px;
   height: 40px;
   line-height: 40px;
}

.selectorToolMove {
   /* background: black; */
   position: absolute;
   right: 61px;
   /* border: 1px solid #ffff004d; */
   font-size: 30px;
   top: 0px;
}

.selectorToolMoveCover {
   display: none;
}

.selectorToolMove i {
   cursor: pointer;
}

#toolOutputArea .cssToolHeading {
   background: #1a2f5c;
}

.centeringToolTitle {
   background: black;
   padding: 14px;
   position: absolute;
   right: 0;
   bottom: 0;
   font-size: 18px;
   display: none;
}


.rowOperationLineTitle,
.scrollbarOperationLineTitle,
.centeringToolBodyTitle {
   display: inline-block;
   background: #141a24;
   padding: 2px;
   margin-right: 5px;
   min-width: 141px;
   text-align: center;
   line-height: unset;
   display: block;
   margin-bottom: 17px;
   position: relative;
}

#selectorOverlayDebugTitle {
   background: black;
   positioN: absolute;
   bottom: 3px;
   right: 3px;
   padding: 8px;
   color: lightblue;
   font-size: 16px;
   display: none;
}

#selectorOverlay,
#toolOverlay {
   background: #471a5d;
   border: 1px solid #000000;
   padding: 9px;
   color: #b8c6cb;
   font-size: 23px;
   width: 100%;
   position: fixed;
   z-index: 44;
   display: block;
   background: #0f2228;
   top: 42px;
   left: 6px;
   height: 1165px;
   overflow: hidden;
   display: none;
}


#page[data-width="showingConsoles"] #toolOverlay {
   width: 66%;
}

#codeCreate #toolOverlay,
#codeCreate #selectorOverlay {
   top: 100px;
   left: 0;
   z-index: 105;
}


#codeCreate.condensedView #toolOverlay,
#codeCreate.condensedView #selectorOverlay {
   top: 48px;
}

#page #codeCreate[data-top-bar="hidden"] #toolOverlay,
#page #codeCreate[data-top-bar="hidden"] #selectorOverlay {
   top: 0;
}

#selectorOverlay {
   background: #19191b;
   height: 1022px;
   width: 606px;
   padding: 0;
   width: 560px;
   height: unset;
   border: 2px solid #424242;
   left: 25%;
}




#selectorOverlay[data-location="left"] {
   left: 5%;

}

#selectorOverlay[data-location="right"] {
   left: 55%;
}

#selectorOverlay[data-location="right"] .selectorPositionButton[data-buttonposition="right"],
#selectorOverlay[data-location="left"] .selectorPositionButton[data-buttonposition="left"] {
   opacity: 0.5;
}

#rowColorNotes {
   position: absolute;
   right: 0;
   width: 440px;
   font-size: 17px;
   background: #080621;
   padding: 12px;
   line-height: 28px;
   color: lightblue;
   z-index: 4;
   bottom: 0;
}

#rowColorTool,
#selectorOverlayNotes,
#toolOutputArea,
#scrollbarTool,
#selectorTool,
#centeringTool {
   border: 2px solid black;
   font-size: 18px;
   width: 382px;
   background: #000000;
   margin-bottom: 40px;
   overflow: hidden;
   padding-bottom: 60px;
   margin-right: 17px;
   position: relative;
}

#selectorTool {
   width: 539px;
   height: 980px;
   width: 100%;
   margin-bottom: 0;
   height: unset;
}

#selectorToolHelp {
   position: absolute;
   background: #000000;
   border: 1px solid #add8e64f;
   padding: 14px;
   z-index: 14;
   /* padding-top: 27px; */
   padding-right: 30px;
   padding: 0;
   padding-bottom: 30px;
   top: 0;
   height: 100%;
   display: none;
}

.selectorToolHelpTitle {
   background: #000000;
   border-bottom: 1px solid #add8e645;
   position: relative;
   margin-bottom: 30px;
   text-align: center;
   height: 30px;
   line-height: 30px;
}

.selectorToolHelpClose {
   cursor: pointer;
   position: absolute;
   top: -1px;
   right: 8px;
}

.selectorToolHelpLine {
   margin: 17px;
   padding: 6px;
   background: #0d1832;
   border: 1px solid #d3d3d300;
   margin-bottom: 32px;
   line-height: 27px;
}

.selectorToolHelpLine:nth-child(even) {
   background: #1f242c;
}

#tagHelpButton {
   position: absolute;
   font-size: 13px;
   right: 40px;
   cursor: pointer;
   top: 8px;
   opacity: 0.8;
}

#selectorOverlayNotes {
   positioN: absolute;
   /* right: 0; */
   padding: 12px;
   /* width: 309px; */
   border: 1px solid cyan;
   bottom: -27px;
   display: none;
}



.selectorNotes {
   border: 2px solid #6f6f6b;
   margin: 4px;
   padding: 0px;
   background: #171720;
   display: inline-block;
}

#toolOutputArea {
   display: inline-block;
   vertical-align: top;
   width: 508px;
   height: calc(100% - 30px);
}

#toolOverlayTitle {
   background: black;
   font-size: 19px;
   margin-bottom: 10px;
   text-align: center;
   padding-left: 44px;
}

.toolOverlayTitleButton {
   display: inline-block;
   background: #4f4f54;
   border: 1px solid #4f56588c;
   padding: 3px;
   margin-right: 4px;
   cursor: pointer;
   position: absolute;
   right: 17px;
   height: 20px;
   font-size: 14px;
   line-height: 20px;
   padding: 0px 3px;
   opacity: .6;
   width: 81px;
}

#page .toolOverlayTitleButton[data-type="scrollbars"],
#page .toolOverlayTitleButton[data-type="scrollbars"] {
   right: unset;
   left: 100px;
}

#page .toolOverlayTitleButton[data-type="rowColors"] {
   left: 200px;
}

#selectorTool .toolOverlayTitleButton {
   top: 11px;
   right: unset;
   left: 100px;
}

#selectorOverlay[data-type="acquire"] .toolOverlayTitleButton[data-type="acquire"],
#selectorOverlay[data-type="generate"] .toolOverlayTitleButton[data-type="generate"] {
   background: black;
   opacity: 1;
}

#page .toolOverlayTitleButton[data-type="generate"],
#page .toolOverlayTitleButton[data-type="centering"] {
   left: 8px;
}


#scrollbarTool .cssToolBody {
   /* height: 500px; */
   top: 30px;
   position: relative;
   /* padding: 14px; */
   background: #34393e;
   overflow: hidden;
   height: calc(100% - 42px);
   background: black;
   /* border: 1px solid yellow; */
}




#scrollbarTool .scrollbarSampleArea::-webkit-scrollbar {
   background: #000000;
   width: 30px;
   height: 30px;


}

#scrollbarTool .scrollbarSampleArea::-webkit-scrollbar-thumb {
   background: #404142;
   border-radius: 12px;
   border-radius: 20px;


}

#scrollbarTool .scrollbarSampleArea::-webkit-scrollbar-track {
   background: lightblue;
   border-radius: 20px;


}

#scrollbarTool .scrollbarSampleArea::-webkit-scrollbar-corner {}

.scrollSampleInner,
.scrollbarToolInnerArea {
   background: #32384b;
   /* border: 2px solid #272727; */
   position: relative;
   height: 120px;
   margin-bottom: 19px;
   overflow: hidden;
   /* padding: 15px; */
   background: black;
}

.scrollbarToolInnerArea {
   height: calc(100% - 18px);
   overflow-y: auto;
}

.scrollbarToolButtons {
   margin-bottom: 10px;
}


.scrollSampleInner {
   border: none;
}

.whichOperations {
   border: 1px solid yellow;
   background: black;
   padding: 4px;
}

.scrollbarAreaToggleActive {
   position: absolute;
   top: 4px;
   left: 12px;
   font-size: 10px;
   cursor: pointer;
   height: 25px;
   line-heighT: 25;
   line-height: 27px;
}

.scrollbarOperations {
   /* border: 1px solid #7e7e78; */
   position: relative;
}

.scrollbarOperationLine {
   position: relative;
}

.scrollbarOperations .inactiveOverlay {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background: #040421d6;
   font-size: 0px;
   display: none;
   z-index: 14;
}

#scrollbarTool[data-entirescrollbar_active="no"] .scrollbarOperationLine[data-meta="entireScrollbar"] .inactiveOverlay,
#scrollbarTool[data-scrollhandle_active="no"] .scrollbarOperationLine[data-meta="scrollHandle"] .inactiveOverlay,
#scrollbarTool[data-track_active="no"] .scrollbarOperationLine[data-meta="track"] .inactiveOverlay,
#scrollbarTool[data-corner_active="no"] .scrollbarOperationLine[data-meta="corner"] .inactiveOverlay {
   display: block;
}


.scrollbarOperationLine {
   /* border: 1px solid #151515; */
   background: #000000;
   /* padding: 6px; */
   margin: 11px;
   position: relative;
   padding: 4px;
}


.scrollbarOperationLine>i {
   position: absolute;
   top: 4px;
   right: 20px;
   font-size: 14px;
}


.scrollbarOperationSection {
   margin-bottom: 8px;
   border: 1px solid #ffff000d;
   display: inline-block;
}




.scrollbarSampleArea {
   overflow-y: auto;
   overflow-x: auto;
   height: 140px;
   width: 200px;
   /* border: 1px solid #585857; */
   margin-left: 15px;
}

.packOneScrollbar {
   background: #4b4b6c;
   display: inline-block;
   padding: 4px;
   margin: 4px;
   cursor: pointer;
}

.scrollSampleInner {
   height: 1000px;
   width: 1400px;
   background: #161616;
}

#rowColorTool,
#scrollbarTool {
   height: calc(100% - 30px);
   overflow-y: auto;
   position: relative;
   padding-bottom: 0;
   width: 534px;
}

.rowColorSampleArea {
   border: 1px solid #3e3f3f;
   width: 300px;
}

/*.rowColorSampleAreaRow {
   padding: 4px;
   margin: 4px;
   background: #161658;
}

.rowColorSampleAreaRow:nth-child(even) {
   background: #172635;
   color: lightblue;
}*/

#rowColorTool {
   /* border: 3px solid cyan; */
   display: none;
   width: 534px;
   background: black;
}

#rowColorTool .cssToolBody {
   font-size: 15px;
}

.rowColorToolButtons {
   margin-bottom: 15px;
}

.rowColorOperationLine {
   background: black;
   /* border: 1px solid #ffff001f; */
   margin-bottom: 12px;
}


.pxVersion,
.inPercentage {
   color: #bfb73d;

   display: none;
}

#ks_page_main[data-picsdisplay="off"] img {
   display: none;
}

.oneToCenter,
.twoToCenter {
   display: none;
}

#centeringTool[data-count="one"] .oneToCenter,
#centeringTool[data-count="two"] .twoToCenter {
   display: inline-block;
}



#ks_page_main[data-picsdisplay="off"] .picArea {
   height: 30px !important;
   min-height: unset;
}


#toolOverlay {
   /* display: none; */
   height: 1142px;
   padding-top: 0;
   width: 1107px;
   background: #121215;
   padding-right: 0;
}

#codeCreate[data-top-bar="shown"][data-cc_bottom_bar="shown"] #toolOverlay {
   height: calc(100% - 139px);

}

#codeCreate[data-top-bar="hidden"][data-cc_bottom_bar="shown"] #toolOverlay {
   height: calc(100% - 41px);

}

#codeCreate[data-top-bar="shown"][data-cc_bottom_bar="hidden"] #toolOverlay {


   height: calc(100% - 100px);
}

#codeCreate[data-top-bar="hidden"][data-cc_bottom_bar="hidden"] #toolOverlay {

   height: 100%;
}


#previewPage #toolOverlay {
   height: calc(100% - 89px);
}

#page[data-footershown="false"] #previewPage #toolOverlay {
   height: calc(100% - 45px);
}



.recentAndSavedSelectors[data-type="scrollbars"],
.recentAndSavedSelectors[data-type="rowColors"] {
   display: none;
}

#toolOverlay[data-type="rowColors"] .recentAndSavedSelectors[data-type="rowColors"],
#toolOverlay[data-type="scrollbars"] .recentAndSavedSelectors[data-type="scrollbars"] {
   display: block;
}







#smallModuleLightbox {
   position: fixed;
   background: black;
   top: 0;
   left: 0;
   height: 78%;
   width: 100%;
   z-index: 4;
}

.fade-enter,
.fade-leave-to {
   opacity: 0;
}

.fade_shrink-enter-active,
.fade_shrink-leave-active {
   transition: opacity 0.8s ease 0s;
}

.fade_shrink-enter,
.fade_shrink-leave-to {
   opacity: 0;
   height: 32px;
}

.fade-move {}

.slide5-enter-active,
.slide5-leave-active {
   height: 28.4px;
   transition: all 0.18s linear 0s;
}

.slide5-enter,
.slide5-leave-to {
   height: 0px;
}

.slide-enter-to,
.slide-leave {
   height: 0px;
   opacity: 0;
}

.ace-merbivore-soft .ace_gutter {
   background: rgb(29, 29, 42);
   color: rgb(230, 225, 220);
}

.ace-merbivore-soft .ace_print-margin {
   width: 1px;
   background: rgb(38, 36, 36);
}

.ace-merbivore-soft {
   background-color: rgb(36, 36, 53);
   color: rgb(230, 225, 220);
}

.ace-merbivore-soft .ace_cursor {
   color: rgb(255, 255, 255);
}

.ace-merbivore-soft .ace_marker-layer .ace_selection {
   background: rgb(71, 71, 83);
}

.ace-merbivore-soft.ace_multiselect .ace_selection.ace_start {
   box-shadow: rgb(28, 28, 28) 0px 0px 3px 0px;
}

.ace-merbivore-soft .ace_marker-layer .ace_step {
   background: rgb(102, 82, 0);
}

.ace-merbivore-soft .ace_marker-layer .ace_bracket {
   margin: -1px 0px 0px -1px;
   border: 1px solid rgb(64, 64, 64);
}

.ace-merbivore-soft .ace_marker-layer .ace_active-line {
   background: rgb(81, 81, 100);
}

.ace-merbivore-soft .ace_gutter-active-line {
   background-color: rgb(81, 81, 100);
}

.ace-merbivore-soft .ace_marker-layer .ace_selected-word {
   border: 1px solid rgb(73, 73, 73);
}

.ace-merbivore-soft .ace_invisible {
   color: rgb(64, 64, 64);
}

.ace-merbivore-soft .ace_entity.ace_name.ace_tag,
.ace-merbivore-soft .ace_keyword,
.ace-merbivore-soft .ace_meta,
.ace-merbivore-soft .ace_meta.ace_tag,
.ace-merbivore-soft .ace_storage {
   color: rgb(210, 201, 197);
   font-style: normal;
}

.ace-merbivore-soft .ace_constant,
.ace-merbivore-soft .ace_constant.ace_character,
.ace-merbivore-soft .ace_constant.ace_character.ace_escape,
.ace-merbivore-soft .ace_constant.ace_other,
.ace-merbivore-soft .ace_support.ace_type {
   color: rgb(104, 193, 216);
}

.ace-merbivore-soft .ace_constant.ace_character.ace_escape {
   color: rgb(179, 229, 180);
}

.ace-merbivore-soft .ace_constant.ace_language {
   color: rgb(225, 197, 130);
}

.ace-merbivore-soft .ace_constant.ace_library,
.ace-merbivore-soft .ace_string,
.ace-merbivore-soft .ace_support.ace_constant {
   color: rgb(209, 223, 216);
}

.ace-merbivore-soft .ace_constant.ace_numeric {
   color: rgb(127, 197, 120);
}

.ace-merbivore-soft .ace_invalid,
.ace-merbivore-soft .ace_invalid.ace_deprecated {
   color: rgb(255, 255, 255);
   background-color: rgb(254, 56, 56);
}

.ace-merbivore-soft .ace_fold {
   background-color: rgb(252, 128, 58);
   border-color: rgb(230, 225, 220);
}

.ace-merbivore-soft .ace_comment,
.ace-merbivore-soft .ace_meta {
   font-style: italic;
   color: rgb(207, 180, 210);
}

.ace-merbivore-soft .ace_entity.ace_other.ace_attribute-name {
   color: rgb(234, 241, 163);
}

.ace-merbivore-soft .ace_indent-guide {
   background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAACCAYAAACZgbYnAAAAEklEQVQImWOQkpLyZfD09PwPAAfYAnaStpHRAAAAAElFTkSuQmCC") right center repeat-y;
}

.fa,
.fab,
.fal,
.far,
.fas {
   line-height: unset;
}

#cssRulesetModule .tinyCover i {
      top :0;
      right: 0;
   position: absolute;
}


#toolOverlay .tinyCover .fa-window-close {
   position: absolute;
   top: 0;
   right: 15px;
   font-size: 16px;
   cursor: pointer;
}

#toolOverlay .tinyCoverInnerText {
   font-size: 19px;
   padding: 34px;
}

#page .sampleAceEditorContainer .editorHoverButtons i {
   font-size: 13px !important;
}

.languageSelectorTitle i {
   position: absolute;
   right: 8px;
   cursor: pointer;
}

.itemCreationSettingsToggle {
   position: absolute;
   top: 0;
   right: 10px;
   color: dimgray;
   cursor: pointer;
}

.oneHelpButton,
.extraHelpButton {
   margin-left: 4px;
   height: 36px;
   vertical-align: top;
   line-height: 37px;
   /* top: 5px; */
}

.parseListHelp i {
  color: lightblue;
   font-size: 18px;
   line-height: 26px;
}

.cssRulesetPreviewOptionsAreaTitle .oneHelpButton {
   height: 27px;
   line-height: 27px;
   color: gray;
   
}

.rowOperationLineTitle i {
   font-size: 13px;
   position: absolute;
   right: 8px;
   bottom: 0px;
}

.cursorPresetLine .oneHelpButton {
   line-height: 22px;
   height: 20px;
}


.caretEditorHelp .oneHelpButton {

   line-height: 22px;
}

#taskListContainer .oneHelpButton {

   line-height: 31px;
   font-size: 12px;
}

.cursorEditorTitle .oneHelpButton {

   height: 34px;
   line-height: 41px;
   overflow: hidden;
   color: #7d7c7c;
}

#outlineCreator .oneHelpButton {
   line-height: 29px;
}

#previewPage #taskListContainer .oneHelpButton,
#previewPage #outlineCreator .oneHelpButton {
   font-size: 13px;
}

#elementInspectorTitle .oneHelpButton {
   opacity: 0.7;
   margin-left: 10px;
}

.languageAccentBox[data-meta="elementTreeButtonLevelTextColor"] i {
   line-height: 22px;
   font-size: 12px;
}

.parseRecordingHelp i {
   cursor: pointer;
   height: 40px;
   line-height: 40px;
}

.parseRecordingHelp {
   display: inline-block;
   vertical-align: top;
   position: relative;
}

.javascriptCodeConversionHelp .oneHelpButton {
   line-height: 25px;
}

#userSettingsContainer .oneHelpButton {
   color: rgb(159, 177, 185);
}

.hoverPreferenceContainer .oneHelpButton {
   line-height: 34px;
}

#actualGlossaryOptions .glossaryOptionsHelpContainer {
   display: inline-block;
   width: 21px;
}

#actualGlossaryOptions i {
   height: 21px;
   line-height: 20px;
   font-size: 11px;
   opacity: 0.5;
   cursor: default;
}

.glossaryPageHideHelpButtons .buttonsAreOn,
.glossaryPageHideHelpButtons .buttonsAreOff {
   display: none;
}

#glossaryOptionsSection[data-helpbuttons="off"] .buttonsAreOff,
#glossaryOptionsSection[data-helpbuttons="on"] .buttonsAreOn {
   display: inline-block;
}

#glossaryOptionsSection[data-helpbuttons="off"] .buttonsAreOff {
   opacity: 0.7;
}

#glossaryOptionsSection[data-helpbuttons="off"] .oneHelpButton {
   display: none;
}

.modifiedIndicatorHelp .oneHelpButton {
   height: unset;
   line-height: unset;
}

#page .hideOtherDialogsTitle .oneHelpButton {
   cursor: pointer;
}

#topBarSettings .oneHelpButton,
#topBarSettings .extraHelpButton {
   color: rgb(167, 180, 183);
}

.functionConsoleSettingsLineTitle .oneHelpButton {
   font-size: 10px;
}

.chainGraphicLayoutSection i.oneHelpButton {
   color: lightgray;
}

.keyboardShortcutsInfo {
   display: inline-block;
   position: relative;
   color: gray;
   line-height: 15px;
   height: 15px;
}

.keyboardShortcutsInfo i {
   line-height: 15px;
}

.functionConsoleSection .oneHelpButton {
   opacity: 0.2;
   font-size: 11px;
}

.plotPointDialogTitle i.extraHelpButton {
   cursor: pointer;
   position: relative;
   top: 2px;
}

#pageLoad {
   background: rgb(0, 3, 10);
   color: white;
   padding: 12px;
   z-index: 100;
   border: 1px solid rgba(255, 255, 255, 0);
   height: 100%;
   position: relative;
   overflow-y: auto;
}



body[data-infocardstatus="on"] #previewPage {
   z-index: 4444;
   transform: scale(0.63);
   position: absolute;
   top: -33px;
   left: -164px;
   border: 1px solid black ! Important;
   position: fixed;
   /* border: 3px solid yellow !important; */
   overflow: hidden;
   width: 1251px;
   height: 838px;
}



#infoCardsToggleButton,
#infoCards {
   background: #000000;
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   z-index: 33;
   padding: 18px;
}

#infoCards {
   display: none;
}

body[data-infocardstatus="on"] #infoCards {
   display: block;
}

body[data-infocardstatus="on"] #outputConsoles {
   top: 0 !important;
}

#infoCardsToggleButton {
   top: unset;
   left: unset;
   right: 30px;
   bottom: 50px;
   background: #4b4b69;
   z-index: 333;
   width: 200px;
   height: 60px;
   cursor: pointer;
   display: none;
}

.infoCardsDebugTitle {
   background: #2c2c2d;
   padding: 16px;
   position: absolute;
   bottom: 20px;
   color: lightblue;
   font-size: 26px;
   right: 0;
   width: 549px;
}

#infoCardsButtonsRow {
   background: #342b3b;
   position: absolute;
   width: 32%;
   bottom: 111px;
   right: 5px;
   bottom: 167px;
   padding: 6px;
}

.infoCardSelectButton,
.infoCardButton {
   background: #424d65;
   display: inline-block;
   cursor: pointer;
   padding: 6px;
   border: 1px solid #000000;
}

.infoCardSelectButton {
   background: #4f4f6e;
}

#infoCardSelect {
   border: 1px solid #515252 !important;
   outline: none !important;
   padding: 5px;
}

#infoCardsInner {
   background: #38383a6e;
   width: 64%;
   height: 100%;
   border: 5px solid #5c7084;
   /* overflow-y: auto; */
   overflow: hidden;
   padding-top: 34px;
}

#infoCardsInnerTitle {
   background: black;
   height: 45px;
   line-height: 45px;
   text-align: center;
   color: lightblue;
   display: none;
}

.ksCardLine {
   border-bottom: 1px solid #80808057;
   margin-bottom: 8px;
}

.ksCardLine i {
   margin-right: 12px;
   font-size: 12px;
}

.ks_card {
   background: #293e4b;
   /* padding: 12px; */
   margin: 12px;
   border: 2px solid black;
   display: none;
}

.ksCardTitle {
   background: #07174a;
   color: lightblue;
   text-align: center;
   padding: 8px;
   font-size: 20px;
}

.ksCardExplanation,
.ksCardPicture {
   background: #464674;
   height: 120px;
   width: 91%;
   /* bordeR: 2px solid cyan; */
   display: inline-block;
   vertical-align: top;
   margin-left: 2%;
   margin-bottom: 23px;
   margin-top: 12px;
   height: 520px;
}

.ksCardPicture {
   font-size: 0;
   background: black;
}

.ksCardExplanation {
   background: #16052b;
   color: lightblue;
   padding: 8px;
   height: unset;
   background: none;
}

.ks_card[data-active="true"] {
   border: 3px solid #3368848c;
   color: #ffffff94;
   background: black;
   display: block;
   width: 88%;
   background: #000000;
}



.allKSCards {
   height: 98%;
   border-bottom: 4px solid cyan;
   overflow-y: auto;
}

#jsLeft {
   position: relative;
   left: 0px;
   padding: 12px 12px 6px;
   height: 80%;
}

#pageLoadContainer {
   padding: 8px;
   left: 1px;
   position: relative;
   height: 160px;
   vertical-align: top;
   border: 1px solid rgb(3, 91, 106);
   bottom: unset;
}

#page #numericEntrySpace {
   top: 1300px;
}

#page #imageCreationContainer #groupContents {
   background: rgb(0, 0, 0);
   min-height: 80px;
   min-width: 80px;
}

#outputConsoles::after {
   content: "#outputConsoles";
   position: absolute;
   left: 0px;
   color: rgba(255, 255, 255, 0.35);
   bottom: 0px;
   font-size: 10px;
}

#myConsole {
   border: 1px solid rgb(17, 82, 53);
   background: none;
   width: 100%;
   color: rgb(41, 138, 39);
   font-size: 1.2em;
}

#codeCreate {
   background: rgb(68, 68, 68);
   position: fixed;
   width: 100%;
   left: 0px;
   z-index: 11;
   top: 100px;
   height: calc(100% - 100px);
   padding-top: 0px;
   display: inline-flex;
   overflow: hidden;
}

#page[data-recordingbar="show"] #codeCreate {
   border: none !important;
   height: calc(100% - 249px) !important;
}

#page[data-recordingbar="show"] #buttonsBar {
   bottom: 60px;
   height: 41px;
   display: none;
}

#codeCreate.condensedView {
   top: 50px;
   height: 93%;
}

#codeCreate.condensedView #vueVarBox,
#codeCreate.condensedView #dbcToggle,
#codeCreate.condensedView #vueVarBox {
   display: none;
}

#codeCreate.condensedView #twoMainContainers {
   height: 100%;
}

.findReplaceResultsDiv {
   display: inline-block;
   color: lightblue;
   font-size: 11px;
   width: 81px;
}

.noselect,
.noselect * {
   user-select: none;
   cursor: initial;
}

.noselect-pointer-default,
.noselect-d * {
   user-select: none;
}

.randomizeRowBackground {
   position: absolute;
   top: 3px;
   font-size: 10px;
   left: 14px;
   cursor: pointer;
   opacity: .6;
}

#codeCreate.hide_cc_top_bar {
   top: 0px;
   height: 100%;
}

#cc_top_bar.hide_cc_top_bar,
.ccTopBarCopy.hide_cc_top_bar {
   overflow: hidden;
}

.linkParsePractice {
   border: 4px solid seagreen;
   padding: 0px 8px 8px;
}

.linkParsePractice .divButton {
   background: rgb(33, 88, 136);
}

#parseLink {
   background: rgb(7, 40, 41);
   color: lightgray;
}

#page {
   height: 0px;
   overflow: hidden;
}

#page .nomargin,
#page .noMargin {
   margin: 0px;
}

#page .toggleCleanMenu {
   background: rgb(13, 41, 29);
   padding: 1px 4px;
   color: rgb(226, 226, 195);
   position: absolute;
   left: -21px;
   bottom: 20px;
   width: 80px;
}

::-webkit-scrollbar {
   width: 12px;
}

.saveUserChangesButton {
   margin: 13px;
   background: rgb(12, 29, 3);
   padding: 8px;
   display: inline-block;
   border: 1px solid black;
   cursor: pointer;
   color: rgb(171, 171, 171);
}

.t_old_button {
   background: rgb(24, 100, 114);
}

::-webkit-scrollbar-track {
   /*box-shadow: rgb(52, 55, 97) 0px 0px 2px inset;*/
   border-radius: 10px;
}

::-webkit-scrollbar-thumb {
   background: rgb(112, 128, 153);
   border-radius: 0px;
}

#page .commonCoverClass::-webkit-scrollbar {
   width: 22px;
}

#page .commonCoverClass::-webkit-scrollbar-track {
   box-shadow: rgb(128, 94, 29) 0px 0px 2px inset;
   border-radius: 10px;
   width: 30px;
}

#page .commonCoverClass::-webkit-scrollbar-thumb {
   background: rgb(186, 188, 28);
   border-radius: 0px;
   width: 30px;
}

#mainSettingsSection::-webkit-scrollbar-thumb {
   border-radius: 3px;
   background: rgb(73, 70, 90) !important;
}

#mainSettingsSection::-webkit-scrollbar-track {
   box-shadow: rgb(122, 124, 155) 0px 0px 2px inset;
   border-radius: 0px;
}

#layoutOverlay ::-webkit-scrollbar-thumb {
   background: rgb(30, 65, 93);
   border-radius: 0px;
}

#keyboard_shortcuts ::-webkit-scrollbar-thumb {
   background: rgba(59, 59, 60, 0.66);
   border-radius: 0px;
}

l {
   display: inline-block;
   padding: 5px;
   margin-right: 10px;
   background: rgb(16, 10, 47);
   color: white;
   border: 1px solid black;
   border-radius: 5%;
   cursor: pointer;
}

.extraFetchButton {
   border: 1px solid black;
   position: absolute;
   left: 220px;
   margin: 0px !important;
   background: darkblue !important;
}

.latestSessionsButton {
   left: 300px;
   color: lightgray;
   background: rgb(44, 11, 47) !important;
}

.saveFormatsPerLanguageButton {
   background: rgb(17, 52, 63);
   padding: 6px;
   border: 1px solid black;
   cursor: pointer;
   display: inline-block;
   margin-left: 10px;
}

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

.divButton.recordingBarToggleButton {
   background: rgb(39, 39, 139);
}

.deleteCSSNewButton {
   background: rgb(60, 9, 41);
}

.setCSSNew {
   background: rgb(42, 128, 134);
}

.shareMessageArea {
   text-align: center;
   transition: opacity 0.3s ease 0s;
   position: absolute;
   top: 0px;
   width: 100%;
   font-size: 10px;
   display: none;
}

.groupContentsIcon {
   display: inline-block;
   position: absolute;
   left: 11px;
}

.groupContentsIcon .fa-minus-square {
   display: none;
}

.oneGlossaryGroup[data-contents="shown"] .groupContentsTitle .fa-minus-square {
   display: inline-block;
}

.oneGlossaryGroup[data-contents="shown"] .groupContentsTitle .fa-plus-square {
   display: none;
}

#gifCuratorBody {
   background: rgb(55, 54, 54);
   color: lightgray;
}

#gifCuratorOverlay {
   position: fixed;
   top: 20px;
   left: 20px;
   background: rgb(8, 13, 32);
   height: 96%;
   width: 70%;
   border: 4px solid rgb(86, 96, 96);
   z-index: 3333;
   color: lightgray;
}

#page #gifCuratorOverlay {
   top: 0px;
   left: 0px;
   height: 100%;
   width: 100%;
   border: 3px solid rgb(0, 123, 255);
   display: none;
}

#page[data-width="showingConsoles"] #gifCuratorOverlay {
   width: 62%;
}

#page[data-recordingbar="show"] #gifCuratorOverlay {
   height: 85%;
}

#gifCuratorOverlay,
#gifCuratorBody #jsInfo {
   top: 12px;
   height: 96%;
   border: 1px solid rgb(17, 56, 143);
}

.gifCuratorBodyTitle {
   position: fixed;
   background: rgb(60, 38, 60);
   bottom: 0px;
   right: 116px;
   padding: 3px;
}

#gifCuratorInner,
#gifCuratorTasks {
   top: 55px;
   left: 33px;
   border: 2px solid rgb(0, 0, 0);
   position: relative;
   height: 92%;
   width: 93%;
   background: rgb(36, 36, 51);
   overflow: hidden;
   padding-bottom: 60px;
}

.redAlert {
   display: block;
   text-align: center;
   background: rgb(81, 7, 7);
   padding: 8px;
   color: rgb(195, 184, 184);
   border: 3px solid black;
   font-size: 22px;
}

#gifCuratorTasks {
   background: rgb(33, 33, 71);
   margin-top: 30px;
   padding: 15px;
   font-size: 18px;
   height: 12%;
   display: none;
}

.allCurationLines {
   border: 1px solid cyan;
   height: 88%;
   overflow: hidden auto;
   padding-top: 15px;
}

.glossaryGroupContainer {
   border: 2px solid black;
   background: rgb(57, 58, 69);
   width: 90%;
   margin-left: 5%;
   margin-bottom: 18px;
}

.glossaryGroupLabel {
   background: rgb(9, 34, 57);
   padding: 8px;
   text-align: center;
   font-size: 20px;
   cursor: pointer;
   position: relative;
}

.glossaryGroupContainer[data-groupname="Does not need group"],
.glossaryGroupContainer[data-groupname="NOT NEEDED"] {
   display: none !important;
}

.groupedGifEntries {
   display: none;
   margin-top: 17px;
}

.groupedGifEntries[data-groupname="Shortcuts"] {}

.curationCell,
.curationCellOld {
   border: 2px solid rgb(133, 127, 127);
   margin: 8px;
   display: inline-block;
   padding: 12px;
   background: rgb(13, 13, 65);
   max-width: 95%;
   overflow: hidden;
}

.curationCell {
   background: rgb(14, 18, 31);
   border: 1px solid rgb(48, 75, 75);
}

.curationCell[data-type="number"],
.curationCell[data-type="curation"] {
   background: darkblue;
   position: absolute;
   right: 0px;
   top: 0px;
   height: 37px;
   line-height: 32px;
   overflow: hidden;
   margin: 0px;
   padding: 6px;
}

.curationCell[data-type="curation"] {
   right: 0px;
   background: black;
   bottom: 0px;
   top: unset;
   padding-top: 1px;
   opacity: 0.2;
}

.curationCellOld {
   background: maroon;
   max-width: 130px;
   max-height: 130px;
   overflow: hidden;
   display: none;
}

.curationCell {
   background: rgb(49, 53, 86);
   padding: 8px;
   margin-left: 8px;
   border: 1px solid black;
   display: block;
   margin-bottom: 4px;
   font-size: 19px;
   line-height: 28px;
}

.curationCell[data-type="number"] {
   background: rgb(60, 60, 115);
   position: absolute;
   right: 8px;
   width: 47px;
   height: 34px;
   padding: 0px;
   text-align: center;
   line-height: 34px;
   border: 1px solid rgba(133, 130, 130, 0.22);
   top: 13px;
}

.curationCell[data-type="name"] {}

.curationCell[data-type="examples"] {
   background: rgb(59, 32, 50);
}

.gifCuratorInnerButton {
   background: rgb(78, 64, 109);
   position: absolute;
   cursor: pointer;
   bottom: 5px;
   padding: 4px;
   left: 2%;
   border: 2px solid black;
}

.countCuratedNumber {
   left: 292px;
   background: rgb(73, 73, 163);
}

.newCurations {
   left: 500px;
}

#page .newCurations {
   display: none;
}

.saveCurations {
   left: 167px;
   background: rgb(35, 75, 61);
}

.curationCell[data-type="curation"],
.curationCell[data-type="group"] {
   position: absolute;
   top: 138px;
   background: rgb(59, 65, 96);
   border: 1px solid rgb(0, 0, 0);
   right: 3px;
}

.curationQuickSelectBox {
   position: absolute;
   line-height: 22px;
   text-align: center;
   top: 198px;
   right: 15px;
   overflow: hidden;
   border: 4px solid black;
   width: 117px;
   background: black;
   cursor: default;
}

.quickSelectBoxOuter,
.quickSelectBoxEditor {
   bottom: 45px;
   top: unset;
   width: 450px;
   left: 15px;
}

.quickSelectBoxEditor {
   background: rgba(52, 38, 38, 0.54);
   width: 25px;
   overflow: hidden;
   bottom: unset;
   left: 0px;
   right: unset;
   top: 52px;
   color: white;
   opacity: 1;
}

.quickSelectBoxEditor .curationQuickSelect {
   width: 14px;
   height: 23px;
   line-height: 21px;
   margin-bottom: 17px;
   opacity: 0.4;
}

.quickSelectBoxEditor .curationQuickSelect.quickActive {
   opacity: 0.7;
}

.curationQuickSelect {
   display: inline-block;
   width: 29%;
   margin: 2px;
   border: 1px solid dimgray;
   cursor: pointer;
}

.curationQuickSelect[data-thenumber="C"],
.curationQuickSelect[data-thenumber="U"] {
   background: rgb(81, 61, 99);
}

.quickSelectBoxOuter .curationQuickSelect {
   width: 30px;
}

.curationQuickSelect.quickActive {
   color: cyan;
   border: 1px solid cyan;
   font-weight: 600;
}

.curationQuickSelect[data-thenumber="U"].quickActive {
   font-weight: 500;
   color: lightblue;
   border: 1px solid lightblue;
}

.quickSelectBoxOuter .curationQuickSelect.quickActive {
   background: rgb(36, 90, 120);
}

.curationQuickSelect[data-thenumber="1"],
.curationQuickSelect[data-thenumber="2"],
.curationQuickSelect[data-thenumber="3"] {
   background: rgb(2, 43, 2);
}

.curationQuickSelect[data-thenumber="4"],
.curationQuickSelect[data-thenumber="5"],
.curationQuickSelect[data-thenumber="6"] {
   background: rgb(10, 39, 78);
}

.curationQuickSelect[data-thenumber="7"],
.curationQuickSelect[data-thenumber="8"],
.curationQuickSelect[data-thenumber="9"] {
   background: rgb(74, 10, 78);
}

.curationCell[data-type="group"] {
   top: 60px;
   bottom: unset;
   max-width: 122px;
   white-space: nowrap;
}

.curationCell[data-type="curation"] input {
   background: black;
   border: none;
   width: 42px;
   color: rgb(154, 194, 207);
   text-align: center;
   padding-left: 13px;
   font-size: 18px;
}

.gifCuratorInnerTitleRow {
   background: black;
   text-align: center;
   height: 50px;
   line-height: 50px;
}

.gifCuratorInnerLabel,
#gifCuratorBody .jsInfoTitle,
.gifCuratorOverlayTitle {
   background: rgb(14, 58, 65);
   position: absolute;
   bottom: 2px;
   right: 2px;
   padding: 8px;
   font-size: 16px;
}

.curatorOneEntryLine {
   border: 2px solid black;
   margin-bottom: 30px;
   width: 90%;
   margin-left: 5%;
   overflow-y: auto;
   position: relative;
   min-height: 331px;
   padding-right: 125px;
   background: linear-gradient(111deg, rgb(91, 88, 88) 0%, rgb(12, 12, 12) 100%);
}

.curatedCounts {
   position: absolute;
   background: rgb(75, 84, 91);
   top: 0px;
   padding: 8px;
   right: 14px;
   width: 70px;
   text-align: center;
}

.curatorOneEntryLine.curated {
   background: rgb(38, 83, 97);
}

.curatorOneEntryLine[data-curatedvalue="1"] {
   background: rgb(2, 39, 2);
}

.curatorOneEntryLine[data-curatedvalue="2"],
.curatorOneEntryLine[data-curatedvalue="3"] {
   background: rgb(29, 8, 49);
}

.curatorOneEntryLine[data-curatedvalue="4"],
.curatorOneEntryLine[data-curatedvalue="5"] {
   background: rgb(38, 43, 12);
}

.curatorOneEntryLine[data-curatedvalue="6"],
.curatorOneEntryLine[data-curatedvalue="7"],
.curatorOneEntryLine[data-curatedvalue="8"] {
   background: rgb(55, 15, 55);
}

.curatorOneEntryLine[data-curatedvalue="9"] {
   background: rgb(78, 15, 15);
}

#gifCuratorOverlay .curatorOneEntryLine.curated input[type="number"] {
   background: rgb(1, 25, 25);
}

.curatorOneEntryLine input[type="number"] {
   background: rgb(12, 12, 47);
   border: 1px solid rgba(173, 216, 230, 0.41);
   box-shadow: none;
   height: 24px;
   width: 50px;
   color: lightblue;
   text-align: center;
   padding: 2px 0px 0px;
   font-size: 16px;
}

 #parseListArea {
    background: #10101e;
    position:  absolute;
    top: 89px;
    z-index: 444;
    /* padding:  18px; */
    right: 35px;
    width: unset;
    color: white;
    border: 4px solid black;
    display: none;
}

    .parseListAreaTitle {
        border-bottom: 1px solid #000000;
        padding: 8px;
        background: #133764;
        width: 100%;
        text-align: center;
        margin-bottom: 1px;
        font-size: 16px;
        color: lightblue;
       position:relative;
    }

.parseListAreaTitle i {
   position: absolute;
   right: 8px;
   top :8px;
   cursor: pointer;
}
.parseListAreaContainer {
   border: 1px solid #00ffff00;
   padding: 9px;
}

.parseListAreaGo {
   background: #133764;
   display: inline-block;
   padding: 10px 16px;
   margin: 5px;
   cursor: pointer;
   font-size: 16px;
   color: lightblue;
}

.parseListHelp  {
   display: inline-block;
}
  
 .parseListAreaInputTitle,
#parseListIndividualClass,
    #parseListContainerTitle {
        border: 1px solid yellow;
        padding: 4px;
        margin: 4px;
        background: #344377;
        color: lightblue;
        border: 1px solid #3d3d0317;
        padding: 4px;
        width: 118px;
        display: inline-block;
        height: 40px;
        line-height: 40px;
        vertical-align: top;
        padding:  0px 4px;
    }

 .parseListAreaInputTitle {
    font-size: 16px;
    width:153px;
 }
#parseListIndividualClass,
    #parseListContainerTitle {
       background: #405285;
       color: lightgray;
    }

  #parseListContainerTitle::placeholder,
#parseListIndividualClass::placeholder {
  
  color: #acb2b1;
   opacity:.7;
}

#parseListExplanation {
   position: fixed;
   z-index: 4444444;
   background: black;
   font-size: 22px;
   width: 60%;
   border: 3px solid #000000;
   left: 54px;
   display: none;
}

.parseListExplanationPoints {
   /* border: 1px solid #00ffff73; */
   padding: 30px;
   background: #1f1f27;
}

.parseListExplanationTitle {
   padding: 8px 0px;
   text-align:center;
   position: relative;
}

.parseListExplanationTitle i {
   position: absolute;
   cursor: pointer;
   right: 5px;
}

.parseListExplanationPoint {
   border: 1px solid #ffff0033;
   padding: 12px;
   margin: 8px;
   color: #acc3c3;
   background: black;
   margin-bottom: 18px;
   line-height: 28px;
}

.parseExplanationMatchOne .parseExplanationItalic {
   color: #3aa4c4;
    font-style:oblique 
}

#parseListExplanation .parseExplanationMatchTwo  .parseExplanationItalic {
   color: #66b57e;
   font-style:oblique;
}

.parseListRecommendation {
   color: #d2a258;
   /* font-style:oblique; */
}

.parseChildrenSiblingFlag {
   color: #b88bbb;
   /* font-style: oblique; */
}
.parseExplanationItalic {
   font-style: oblique;
}

.parseListExplanationPoint.smallList {
   padding-left: 38px;
   font-style: oblique;
}

.parseListExplanationPoint:nth-child(even) {
   color: lightblue;
}
#gifCuratorBody .jsInfoTitle {
   bottom: 30px;
   right: 15px;
   z-index: 20;
   background: rgb(39, 36, 36);
   color: green;
}

.oneTwoThreeExplanation {
   color: #9891c7;
}

.gifCuratorOverlayTitle {
   background: rgb(54, 62, 78);
   bottom: unset;
}

.oneGlossaryGroup {
   border-top: 1px solid;
   border-right: 1px solid;
   border-left: 1px solid;
   border-image: initial;
   border-bottom: none;
   line-height: 18px;
   position: relative;
   min-height: 48px;
   cursor: pointer;
   transition: background 0.3s ease 0s;
   padding: 0px;
   background: rgb(15, 13, 34);
   color: rgb(191, 202, 212);
   margin: 12px;
}

#page .oneGlossaryGroup[data-name="Console"] {}

.newGlossaryGroup {
   background: rgb(5, 4, 14);
}

.toggleGifCuratorButton {
   cursor: pointer;
   display: inline-block;
}

.foundBubble {
   background: rgb(82, 185, 164);
   height: 31px;
   width: 37px;
   position: absolute;
   top: 0px;
   right: 170px;
}

.oneGroupContentLine .foundBubble {
   background: rgb(33, 64, 68);
   border: 1px solid rgb(43, 43, 43);
   right: 100px;
   height: 30px;
   width: 30px;
}

.glossaryEvenRow .foundBubble {
   background: rgb(72, 43, 72);
   border: 1px solid rgb(26, 26, 26);
}

.oneGlossaryGroup:nth-child(2n+1) {
   background: rgb(13, 11, 29);
   color: rgb(145, 170, 177);
}

.oneGlossaryGroup:hover,
.oneGlossaryGroupActive {
   background: rgb(28, 33, 64);
}

.oneGlossaryGroup[data-contents="shown"] {
   background: rgb(7, 18, 49);
}

.oneGlossaryGroup:last-child {
   border-bottom: 1px solid;
}

.oneGlossaryGroup,
.oneGlossaryGroup:last-child {
   border-color: rgba(188, 195, 195, 0.12);
}

.thisCurrentGroupCount {
   border: 1px solid rgb(107, 107, 107);
   position: absolute;
   right: 10px;
   top: 5px;
   background: rgb(45, 105, 141);
   width: 59px;
   height: 30px;
   line-height: 30px;
   text-align: center;
   font-size: 18px;
   display: none;
}

.glossaryGroupOverlay {
   position: absolute;
   z-index: 5;
   background: none;
   height: 100%;
   width: 100%;
   top: 0px;
   opacity: 0.2;
   text-align: right;
   color: white;
   font-size: 8px;
   padding-right: 30px;
   padding-top: 10px;
   right: 75px;
   left: unset;
}

.groupContentsDebug {
   position: absolute;
   top: 12px;
   right: 30px;
   opacity: 0.7;
}

#glossaryNoResults {
   padding: 10px;
   display: none;
   font-size: 16px;
   color: rgb(188, 215, 223);
   border-top: 1px solid rgb(188, 215, 223);
   border-bottom: 1px solid rgb(188, 215, 223);
   border-image: initial;
   border-left: none;
   border-right: none;
   margin-top: 15px;
   width: 96%;
   margin-left: 2%;
   opacity: 0.8;
}

#glossaryResultsQueryDisplay {
   display: inline-block;
   font-style: italic;
}

#glossaryPage[data-overlaybutton="partial"] .glossaryGroupOverlay {
   background: rgba(165, 72, 28, 0.15);
   opacity: 0.8;
   width: 40%;
   right: 90px;
   left: unset;
   font-size: 16px;
}

#glossaryPage[data-overlaybutton="final"] .glossaryGroupOverlay {
   opacity: 0;
}

.oneAppendedGlossaryPage[data-meta='css_toolbox'] .relatedFeaturesSection,
.oneAppendedGlossaryPage[data-meta='css_selector_gui'] .relatedFeaturesSection {
   display: none;
}

.thisTestDiv {
   background: rgb(161, 186, 65);
   padding: 100px;
   font-size: 30px;
   max-height: 130px;
   position: absolute;
   display: none;
}

#glossaryPage[data-overlaybutton="off"] .glossaryGroupOverlay {
   display: none;
}

.makeYoutubePlayable,
.addTestTitle {
   background: rgb(16, 16, 74);
   padding: 8px;
   cursor: pointer;
   display: inline-block;
   font-size: 16px;
   margin: 6px;
}

.toggleContents {
   border: 2px solid rgb(43, 49, 43);
   position: absolute;
   color: lightblue;
   padding: 4px;
   background: black;
   right: 0px;
   top: 0px;
   cursor: pointer;
}

.groupContents,
.filteredContents {
   line-height: 25px;
   display: none;
   position: relative;
   z-index: 6;
   padding: 9px;
}

.moreVideosDiv {
   background: black;
   padding: 15px;
   font-size: 16px;
   overflow: hidden;
   display: none;
}

#initialGrabMoreVideosLine,
#grabModuleVideosLine {
   border: 1px solid pink;
   background: rgb(24, 24, 43);
   margin: 6px;
   padding: 18px;
   display: none;
}

#initialGrabMoreVideosLine {
   margin-bottom: 50px;
   background: rgb(11, 54, 7);
}

.grabMoreVideos,
.grabModuleVideos {
   background: rgb(0, 56, 139);
   padding: 6px;
   display: inline-block;
   cursor: pointer;
   width: 200px;
   text-align: center;
   border: 1px solid rgb(106, 47, 47);
}

.grabModuleVideos {
   background: rgb(99, 63, 120);
}

.moreVideosDropdownTitle {
   border: 2px solid rgb(122, 115, 115);
   display: inline-block;
   width: 230px;
   text-align: center;
   background: black;
   color: lightblue;
}

.grabMoreVideos,
.moreVideosDropdownTitle,
#moreVideosDropdown,
#moduleVideosDropdown,
.grabModuleVideos {
   height: 30px;
   line-height: 30px;
   vertical-align: top;
   padding-top: 0px;
   padding-bottom: 0px;
   overflow: hidden;
}

#moreVideosDropdown,
#moduleVideosDropdown {
   background: rgb(7, 36, 50);
   border: 1px solid dimgray;
}

.newVideoGrabData {
   background: rgb(74, 46, 20);
   padding: 15px;
   margin: 6px;
   display: none;
}

.thirdCombinedLoc,
.newVideoLoc,
.thirdModuleLoc,
.thirdSummaryLoc,
.thirdGlossaryLoc {
   border: 2px solid black;
   background: rgba(19, 19, 19, 0.56);
   padding: 1px;
   margin-bottom: 10px;
   overflow-y: auto;
}

#glossaryGroupsSidebar,
.newVideoLoc,
.thirdCombinedLoc,
.thirdModuleLoc,
.thirdSummaryLoc,
.thirdGlossaryLoc {
   height: 98%;
   overflow-y: auto;
}

.thirdCombinedLoc,
.thirdGlossaryLoc,
.thirdCombinedLoc,
.thirdModuleLoc,
.thirdSummaryLoc {
   width: calc(100% - 360px);
   transition: width 0.3s ease 0s;
   display: inline-block;
}

.thirdCombinedLoc,
.thirdModuleLoc,
.thirdSummaryLoc {
   background: rgb(26, 26, 26);
   vertical-align: top;
}

.combinedItemContainer {
   border: 3px solid yellow;
   margin-bottom: 50px;
   min-height: 140px;
   background: rgb(44, 44, 69);
   font-size: 30px;
   padding: 15px;
}

#theGlossary[data-sidebar="off"] .thirdCombinedLoc,
#theGlossary[data-sidebar="off"] .thirdGlossaryLoc,
#theGlossary[data-sidebar="off"] .thirdModuleLoc,
#theGlossary[data-sidebar="off"] .thirdSummaryLoc {
   width: 100%;
}

#page[data-recordingready="yes"] #theGlossary {
   height: 58%;
}

.toggleRecordingReady[data-recordingready="yes"] {
   background: rgb(8, 31, 8);
}

.toggleRecordingReady[data-recordingready="no"] {
   background: rgb(46, 6, 6);
}

.thirdCombinedMessage {
   font-size: 9px;
   padding: 25px;
}

.loadedModulePages,
.loadedSummaryPages {
   background: rgb(8, 45, 6);
   padding: 8px;
   font-size: 16px;
}

.newVideoLoc {
   display: none;
}

.gifCounts {
   background: rgb(8, 65, 65);
   position: absolute;
   right: 0px;
   top: 13px;
   padding: 5px;
   font-size: 18px;
   width: 90px;
   text-align: center;
}

.hasGif {
   position: absolute;
   top: 6px;
   right: 0px;
   font-size: 20px;
   background: darkslateblue;
}

.filteredContents {
   border: 3px solid rgb(142, 142, 124);
   display: none;
}

#glossaryPage[data-debug="on"] .groupContents {
   overflow: hidden;
   max-height: 150px;
   border: 3px solid rgb(0, 243, 255);
}

.groupContentsTitle {
   font-size: 19px;
   line-height: 46px;
   padding-left: 40px;
}

.oneGroupContentLine {
   padding-left: 2px;
   border: none;
   outline: none;
   position: relative;
}

.singleGroupContentEntry,
.groupContentName {
   padding: 4px;
   font-size: 16px;
}

.singleGroupContentEntry {
   font-size: 16px;
}

.singleGroupContentEntry {
   border-top: 1px solid;
   border-right: 1px solid;
   border-left: 1px solid;
   border-image: initial;
   position: relative;
   margin-left: 50px;
   cursor: default;
   border-bottom: none;
   padding: 10px;
}

.singleGroupContentEntry:last-child {
   border-bottom: 1px solid;
}

.singleGroupContentEntry,
.singleGroupContentEntry:last-child {
   border-color: rgb(27, 27, 27);
}

.singleGroupContentEntry:nth-child(2n+1) {
   color: rgb(208, 206, 206);
}

.extraGroupContentInfo {
   display: none;
   position: relative;
   cursor: default;
   overflow-y: auto;
   background: rgb(16, 16, 24);
   padding-bottom: 18px;
   padding-top: 18px;
   border: none;
}

#theGlossary[data-fullwidthpicture="true"] .extraGroupContentInfo {
   overflow: hidden;
   height: unset !important;
}

.individualEntryIcon {
   position: absolute;
   left: 35px;
   display: inline-block;
}

.individualEntryIcon .fa-minus-square {
   display: none;
}

.oneGroupContentLine[data-contents="shown"] .fa-minus-square {
   display: inline-block;
}

.oneGroupContentLine[data-contents="shown"] .fa-plus-square {
   display: none;
}

#allGlossaryGroups[data-shownumbers="true"] .oneGlossaryGroup .individualEntryIcon {
   display: none;
}

#allGlossaryGroups[data-shownumbers="true"] .oneGlossaryGroup .glossaryNumberOnDrive {
   display: block;
}

.groupContentName {
   background: rgb(5, 5, 5);
   color: rgb(116, 166, 203);
   display: block;
   transition: background 0.3s ease 0s, color 0.3s ease 0s;
   padding: 8px 8px 8px 65px;
   border: none;
}

.oneGroupContentLine:nth-child(2n+1) .groupContentName {
   background: rgb(0, 0, 0);
   color: rgb(158, 184, 203);
}

.oneGroupContentLine.glossaryOddRow .groupContentName {
   background: rgb(0, 0, 0);
   color: rgb(158, 184, 203);
}

.oneGroupContentLine.glossaryEvenRow .groupContentName {
   background: rgb(5, 5, 5);
   color: rgb(116, 166, 203);
}

.glossaryFormattingCheckbox {
   background: rgba(74, 86, 100, 0.44);
   position: absolute;
   top: 8px;
   left: unset;
   right: 0px;
   font-size: 22px;
   cursor: pointer;
   width: 50px;
   min-width: 20px;
   min-height: 20px;
   opacity: 0.4;
   display: none;
}

.glossaryFormattingCheckbox[data-status="complete"] {
   background: rgba(0, 128, 0, 0.34);
   opacity: 0.2;
}

.blackWhiteOnly,
.blackWhiteOnly * {
   background: white !important;
   color: black !important;
   border-color: black !important;
}

.glossaryFormattingCheckbox[data-status="needsWork"] {
   background: rgba(255, 0, 0, 0.5);
   opacity: 0.2;
}

#glossaryPage[data-debug="final"] .glossaryFormattingCheckbox {
   display: none;
}

.oneGroupContentLine:last-child .groupContentName {}

#glossaryPage .groupContentName:hover,
#glossaryPage .oneGroupContentLine[data-contents="shown"] .groupContentName {
   background: rgb(20, 20, 20);
   color: lightgray;
}

.glossaryNumberOnDrive {
   position: absolute;
   left: 10px;
   top: 10px;
   background: rgb(4, 33, 53);
   color: rgb(199, 199, 199);
   font-size: 14px;
   width: 30px;
   height: 24px;
   text-align: center;
   line-height: 20px;
   opacity: 0.5;
   display: none;
}

.toggleContentsWithinGroup {
   position: absolute;
   bottom: 0px;
   right: 0px;
   background: darkblue;
   color: white;
   cursor: pointer;
}

.toggleCoverOverflow {
   background: rgb(70, 65, 101);
}

.bottomBarButtonToggle {
   background: blue;
}

.newDefaultTemplateOneExtraButton {
   background: rgb(9, 48, 79);
   padding: 5px;
   margin: 7px;
}

.newDefaultTemplateOneExtraButton[data-active="true"] {
   background: rgb(20, 91, 20);
   border: 4px solid rgb(136, 165, 73);
}

#previewPage .previewPagePickerButton,
#previewPage .previewPageFork {
   right: 79px;
   position: absolute;
   top: 2px;
   margin: 0px;
   padding: 0px;
   color: rgb(161, 170, 171);
   background: rgb(26, 26, 34);
   line-height: 30px;
   text-align: center;
   height: 30px;
   width: 30px;
}

#persistentColorGrabber {
   border: 1px solid rgba(132, 132, 106, 0.05);
   position: fixed;
   z-index: 15;
}

.persistentColorGrabberTitle {
   background: darkblue;
   color: lightgray;
}

.persistentColorGrabberCopy,
.persistentColorGrabberValue,
.persistentColorGrabberLineTitle {
   display: inline-block;
}

.persistentColorGrabberLineTitle {
   width: 31px;
   font-size: 9px;
}

.persistentColorGrabberValue {
   background: black;
   width: 109px;
   overflow: hidden;
   vertical-align: top;
}

.persistentColorGrabberValueInner {
   font-size: 11px;
}

.persistentColorGrabberLine {
   padding: 4px 0px;
   font-size: 11px;
}

.persistentGrabberImport {
   display: inline-block;
   margin: 0px 6px;
   transform: rotate(90deg);
   cursor: pointer;
   transition: color 0.4s ease 0s;
}

.persistentGrabberImport.importing {
   color: darkgreen;
}

.persistentColorGrabberCopy {
   cursor: pointer;
   transition: color 0.4s ease 0s;
}

.persistentColorGrabberCopy.currentlyCopying {
   color: rgb(41, 201, 241);
}

#previewCodeClones .previewPagePickerButton {
   display: inline-block;
   left: unset;
   top: unset;
   position: relative;
   right: unset;
}

.completeLanguage {
   background: rgb(13, 11, 47);
   color: lightgray;
   margin: 12px 5px 4px;
   padding: 2px 20px;
}

#page .divButton>div,
#page .divButton>i {
   cursor: pointer;
}

.cc_session_info[data-adjustingcolors="true"] .buttonContainerSave .topBarButtonFullText,
.cc_session_info[data-adjustingcolors="true"] .buttonContainerFork .topBarButtonFullText {
   display: block !important;
}

.cc_session_info[data-adjustingcolors="true"] .buttonContainerSave .topBarButtonIcon,
.cc_session_info[data-adjustingcolors="true"] .buttonContainerFork .topBarButtonIcon {
   display: none !important;
}

.cc_session_info[data-adjustingcolors="true"] .showAllSessions .topBarButtonIcon,
.cc_session_info[data-adjustingcolors="true"] .buttonContainerNew .topBarButtonIcon {
   display: block !important;
}

.cc_session_info[data-adjustingcolors="true"] .buttonContainerNew .topBarButtonFullText,
.cc_session_info[data-adjustingcolors="true"] .showAllSessions .topBarButtonFullText {
   display: none !important;
}

#outputStatusButton {
   position: relative;
   padding: 0px;
   height: 35px;
}

#outputStatusButton .theButtonOverlay {
   position: absolute;
   top: 0px;
   left: 0px;
   height: 35px;
   width: 100%;
   background: none;
   line-height: 35px;
}

#outputConsolesInformation {
   position: absolute;
   z-index: 5;
   top: 56px;
   background: rgb(30, 30, 30);
   right: 4px;
   padding: 26px;
   color: rgb(229, 236, 236);
   display: none;
}

.jsiHeading:hover {
   color: rgb(238, 238, 238);
}

.jsiHeading:hover+#outputConsolesInformation {
   display: block;
}

#outputConsolesInformation[data-status="keepopen"] {
   display: block;
}

.loadBackupsButton {
   margin: 0px;
   padding: 0px;
   background: rgb(55, 53, 69);
   height: 28px;
   line-height: 28px;
   width: 120px;
   text-align: center;
   color: rgb(182, 183, 185);
   position: relative;
   white-space: nowrap;
   overflow: hidden;
   font-size: 0.85em;
}

.submitName {
   display: inline-block;
   background: rgb(16, 8, 53);
   padding: 6px;
   border: 1px solid rgb(73, 79, 87);
   cursor: pointer;
   color: rgb(186, 191, 197);
}

.setupText {
   color: rgb(177, 175, 175);
   height: 36px;
   line-height: 37px;
   display: inline-block;
}

#nameToSetup {
   background: black;
   border: 1px solid gray;
   color: gray;
}

#setupDiv {
   width: 100%;
   margin-top: 30px;
   background: rgb(7, 7, 7);
   text-align: center;
   padding: 8px;
   color: rgb(107, 126, 138);
}

#setupDiv .theCheckSection {
   background: rgba(20, 23, 56, 0.11);
   color: rgb(134, 134, 134);
   line-height: 32px;
   border: 1px solid rgba(105, 105, 105, 0.15);
   padding: 2px;
}

.code_copy {
   background: rgb(34, 34, 38);
   color: rgb(183, 181, 181);
   border: 1px solid rgba(18, 18, 19, 0.45);
   cursor: pointer;
   position: absolute;
   top: 10px;
   left: -46px;
   padding: 3px;
   transition: background 0.4s ease 0s;
}

.code_copy:hover {
   background: rgb(52, 59, 60);
}

.code_copy:active {
   background: rgb(148, 141, 192);
}

#page #content .content-area {
   background-color: rgb(20, 23, 51);
}

#primary {}

.theNavBar {
   background: black;
   position: fixed;
   top: 0px;
   height: 68px;
   width: 100%;
   left: 0px;
}

.theLogo {
   position: fixed;
   top: 29px;
   left: 46px;
   font-family: Gruppo, cursive;
   color: rgb(111, 146, 211);
   font-size: 2.7em;
}

.setupOptions {
   display: inline-block;
   cursor: pointer;
}

.lineTitle {
   display: block;
   cursor: default;
   border-bottom: 1px solid rgba(255, 255, 255, 0.6);
   margin-top: 25px;
}

#setupDiv .checkedStatusCheckbox,
#setupDiv .checkedBox {
   background: rgb(72, 75, 86);
   margin-left: 6px;
}

#entire_shortcuts {
   background: rgb(31, 59, 74);
   position: relative;
   width: 100%;
   padding: 0px;
   overflow: hidden;
   height: 100%;
}

.theShortcutsDiv,
.theColorDiv {
   height: calc(100% - 150px);
   overflow-y: hidden;
   color: rgb(170, 175, 183);
   border: 1px solid rgba(28, 26, 26, 0.36);
   background: rgb(60, 63, 82);
   padding: 0px;
}

#persistentColorPicker {
   font-size: 0px;
   width: 150%;
   height: 100%;
   cursor: pointer;
   z-index: 4;
   position: absolute;
   opacity: 1;
   border: none;
   top: 0px;
   left: 0px;
}

.colorPickerCheckbox,
.colorPickerOptionLabel {
   display: inline-block;
}

.colorPickerOptionLabel {
   width: 150px;
}

.pickerOptionSmall {
   width: unset;
   display: inline-block;
}

.colorPickerOpeningPreference {
   background: rgb(10, 11, 12);
   border: 1px solid rgb(58, 58, 58);
   display: inline-block;
   opacity: 0.33;
   cursor: pointer;
   width: 41px;
   text-align: center;
   font-size: 9px;
   height: 16px;
   line-height: 13px;
   color: rgb(136, 136, 136);
   margin-left: 3px;
}

.colorPickerOpeningPreferenceActive {
   opacity: 1;
   background: rgb(34, 34, 34);
}

.colorPickerOptionsSave,
.setDefautltPickerColor {
   cursor: pointer;
   background: rgb(62, 62, 69);
   text-align: center;
   border: 1px solid rgb(16, 16, 16);
   width: 164px;
   height: 17px;
   line-height: 16px;
   font-size: 9px;
}

.setDefautltPickerColor {
   background: rgb(51, 51, 66);
   width: 42%;
   margin-right: 0px;
   display: inline-block;
   overflow: hidden;
   vertical-align: top;
   position: relative;
   top: 2px;
}

.pickerDefaultPositionTitle {
   font-size: 8px;
   display: inline-block;
}

.colorPickerOptionRow select,
#page .cc_select[data-var="colorPickerDefaultPosition"] {
   font-size: 8px;
   width: 28%;
   text-align: left;
   padding: 0px;
   border: 1px solid rgb(62, 62, 62);
   background: rgb(28, 33, 46);
   color: rgb(161, 160, 160);
}

#page .cc_select[data-var="colorPickerDefaultPosition"],
#page .cc_select[data-var="colorPickerDefaultPosition"] .activeSelectOption,
#page .cc_select[data-var="colorPickerDefaultPosition"] .caretDown {
   height: 16px;
   line-height: 16px;
}

#page .cc_select[data-var="colorPickerDefaultPosition"] {
   padding-left: 2px;
   font-size: 9px;
}

.persistentPickerButton {
   width: 24px;
   overflow: hidden;
}

.persistentPickerButton,
#persistentVisualButton,
#persistentFormattedPicker {
   display: inline-block;
   vertical-align: top;
   background: rgb(56, 59, 70);
   height: 24px;
   line-height: 24px;
   color: rgb(179, 179, 179);
   border: none;
   position: relative;
}

.persistentPickerButton {
   position: absolute;
   left: -1px;
   bottom: 0px;
   width: 30px;
   height: 0px;
}

#page .persistentPickerButton {
   position: absolute;
   width: 10px;
   height: 10px;
   bottom: 0px;
}

#persistentVisualButton {
   width: 24px;
   overflow: hidden;
   position: relative;
   cursor: pointer;
   margin-left: 3px;
}

.visualButtonSquare {
   position: absolute;
   z-index: 5;
   width: 100%;
   height: 100%;
   left: 0px;
   top: 0px;
}

.colorPickerButtonsRow {
   margin-top: 3px;
}

.colorPickerCopy,
.showInsertionOptions {
   display: inline-block;
   cursor: pointer;
   color: rgb(164, 162, 162);
}

.colorPickerCopy {
   width: 40px;
}

.insertButton,
.showNormalOptions {
   display: inline-block;
   cursor: pointer;
   background: rgba(0, 0, 0, 0.44);
   margin-top: 7px;
   font-size: 10px;
   padding: 0px 3px;
   border: 1px solid black;
   border-radius: 4%;
}

.showNormalOptions {
   margin-left: 6px;
}

.colorPickerCodeToClipboardButton {
   width: 103px;
   text-align: center;
}

#pickerBorderWidth {
   width: 41px;
   text-align: center;
   margin-left: 6px;
   margin-right: 6px;
   font-size: 12px;
}

#pickerBorderWidth:disabled {
   opacity: 0.2;
}

.showInsertionOptions {
   margin-left: 0px;
   margin-right: 6px;
   background: rgba(192, 188, 188, 0.07);
   padding: 0px 3px;
   height: 20px;
   line-height: 20px;
   min-width: 50px;
   text-align: center;
   font-size: 9px;
}

.showInsertionOptionsTitle {
   cursor: default;
   opacity: 0.7;
   background: none;
   padding: 0px;
}

#persistentFormattedPicker {
   padding-left: 6px;
   margin-left: 10px;
   width: 175px;
   font-size: 13px;
}

select {
   background: black;
   color: lightgray;
}

#styleEditorCSSDropdown {
   /* color: #b7b767; */
   border: 1px solid black;
}

#itemCreationCSSDropdown {
   
color: #7b909e;
   
border: 1px solid;
}

#creationShowRulesetByDefault,
#defaultCreationCSSRuleset,
#itemCreationInactiveOpacitySelect,
#itemCreationActiveOpacitySelect {
   border: 1px solid black;
   background: #180530;
   width: 148px;
}

#creationShowRulesetByDefault,
.itemCreationShowCheckbox, 
#defaultCreationCSSRuleset,
#itemCreationInactiveOpacitySelect,
#itemCreationActiveOpacitySelect {
       background: #41394b;
       color: #acbbc0;
}

#recent_rowColors_dropdown,
#saved_rowColors_dropdown,
#recent_scrollbars_dropdown,
#saved_scrollbars_dropdown,
#selectorOverlay input,
#selectorOverlay select {
   outline: none;
   border: 1px solid #171818;
   color: #94a9af;
   vertical-align: top;
   background: black;
   border: none;
}

#recent_rowColors_dropdown,
#saved_rowColors_dropdown,
#recent_scrollbars_dropdown,
#saved_scrollbars_dropdown {
   width: 180px;
}

#saved_rowColors_dropdown option:disabled {
   background: #040435;
   color: lightblue;
}

#saved_selectors_dropdown,
#recent_selectors_dropdown {
   width: 180px;
}

.selectorAttributeLineNumber,
.selectorAttributeLineTitle {
   display: inline-block;
   height: 36px;
   line-height: 36px;
   border: 1px solid #2f2f2e40;
   vertical-align: top;
   /* border: 1px solid yellow; */
}

.selectorAttributeLine {
   padding: 7px 0px;
   /* border-top: 1px solid white; */
   /* padding-top: 7px; */
   /* padding-bottom: 15px; */
}

.selectorAttributeLine.sample {
   border: 3px solid cyan;
   background: #4d405a;
   display: none;
}

.selectorAttributeLineTitle {
   display: none;
}

#selectorOverlay input {
   max-width: 145px;
   display: inline-block;
   height: 36px;
   vertical-align: top;
   border: none;
   color: lightblue;
}

#selectorOverlay #selectorCustomTag {
   display: none;
}


.selectorPseudoIndividualHelp {
   display: inline-block;
   /* border: 1px solid #c7c7bacf; */
   /* min-width: 40px; */
   height: 36px;
   line-height: 36px;
   width: 40px;
}

.selectorPseudoIndividualHelp i {
   display: none;
}

.selectorPseudoIndividualHelp i[data-meta="none"] {
   display: none !important;
}

#taskListLayoutDropdown,
#taskListColorDropdown,
#outlineCreatorLayoutDropdown,
#outlineCreatorColorDropdown {
   background: rgb(31, 34, 48);
   border: 1px solid rgba(105, 105, 105, 0.46);
}

.outlineColorsSetAllButton,
.taskColorsListSetAllButton {
   display: inline-block;
   background: black;
   height: 23.79px;
   line-height: 23.79px;
   width: 80px;
   cursor: pointer;
   border: 1px solid rgb(32, 32, 32);
   vertical-align: top;
}

#taskListSettings[data-type="layout"] .taskColorsListSetAllButton,
#taskListSettings[data-type="layout"] .taskOutlineColorHelp,
#outlineCreatorSettings[data-type="layout"] .outlineColorsSetAllButton,
#outlineCreatorSettings[data-type="layout"] .taskOutlineColorHelp {
   display: none;
}

.oneTaskSettingSlotDelete,
.oneOutlineSettingsSlotDelete {
   display: inline-block;
   cursor: pointer;
   opacity: 0.6;
   padding: 0px 4px;
}

.oneTaskSettingSlotDelete:hover,
.oneOutlineSettingsSlotDelete:hover {
   opacity: 0.8;
   color: rgb(198, 130, 130);
   background: rgb(50, 3, 3);
}

#page .oneTaskSettingSlotDelete.disabled,
#page .oneOutlineSettingsSlotDelete.disabled {
   cursor: default;
   color: rgb(68, 69, 69);
   background: none;
   opacity: 0.6;
   transition: all 0s ease 0s;
}

#switchActiveShortcutsDropdown {
   background: rgba(5, 0, 22, 0.22);
   border: 1px solid rgba(90, 105, 110, 0.44);
   color: rgb(152, 169, 174);
   font-size: 0.76em;
   position: relative;
   margin-left: 15px;
   top: -1px;
}

#switchActiveButton {
   display: inline-block;
   border: 1px solid rgba(100, 115, 117, 0.42);
   cursor: pointer;
   font-size: 0.8em;
   height: 36px;
   line-height: 35px;
   width: 31%;
   border-radius: 2%;
   top: 7px;
   padding-left: 5px;
   position: relative;
   background: rgb(14, 14, 14);
   vertical-align: top;
   text-align: left;
}

#entire_shortcuts[data-width="small"] #switchActiveButton {
   height: 28px;
   line-height: 25px;
   top: 12px;
   position: relative;
}

.switchActiveButtonTitle {
   width: calc(100% - 18px);
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
}

#switchActiveShortcutsDropdown:hover+.keyboardSwitchMessage {
   opacity: 0;
   z-index: 1;
}

#switchActiveShortcutsDropdown option {
   background: rgb(0, 0, 0);
}

#switchActiveButton .activeArrow {
   position: absolute;
   top: 0px;
   right: 8px;
}

#colorSet {
   background: black;
   color: lightgray;
   border: 1px solid gray;
}

.searchShortcutsHelp {
   position: absolute;
   right: 5px;
   top: 23px;
   padding: 8px;
   font-size: 14px;
}

#current_shortcuts {
   background: black;
   text-align: center;
   font-size: 1.27em;
   padding-bottom: 0px;
   color: rgb(153, 175, 179);
   height: 50px;
}

#entire_shortcuts[data-width="small"] #current_shortcuts {
   font-size: 0.9em;
}

.outputShortcuts {
   display: inline-block;
   margin: 0px 10px;
   padding: 3px;
   border: 1px solid rgba(56, 56, 56, 0.41);
   font-size: 1.15em;
   color: rgb(197, 197, 197);
}

.languageSwitcher {
   text-align: center;
   background: black;
   padding: 12px;
}

.toggleRulesetNotes {
   display: none;
}

.cssRulesetsModifiedArea {
   display: none;
}


#jsInfo {
   background: black;
   color: rgb(186, 230, 186);
   text-align: left;
   overflow-y: scroll;
   height: 94%;
   margin-bottom: 4px;
   padding-right: 9px;
   font-size: 1.1em;
}



#jsInfo {
   border-bottom: 1px solid rgb(17, 82, 53);
   font-size: 13px;
   line-height: 24px;
   padding-top: 12px;
   overflow-y: auto;
   height: 87%;
   text-align: left !important;
}

#colorPackingReminders {
   z-index: 33333333;
   position: fixed;
   bottom: 65px;
   left: 100px;
   background: rgb(41, 52, 61);
   padding: 8px;
   color: white;
   border: 3px solid black;
   display: none;
}

.packingInstructions {
   color: yellow;
}

.unpackingInstructions {
   color: rgb(0, 218, 255);
}

.toggleBarSettingsNew {
   display: inline-block;
   cursor: pointer;
   background: black;
   padding: 6px;
}

.justExportWord {
   font-size: 10px;
}

#gifCuratorBody #jsInfo {
   position: fixed;
   z-index: 15;
   width: 27%;
   background: rgb(7, 6, 6);
   right: 9px;
   padding: 16px;
   font-size: 20px;
   line-height: 31px;
}

#touchDebug {
   position: fixed;
   color: white;
   z-index: 700;
   bottom: 80px;
   width: 436px;
   height: 200px;
   padding: 12px;
   background: rgb(46, 46, 70);
   border: 2px solid dimgray;
}

.touchDebugTitle,
.touchInfo {
   width: 45%;
   display: inline-block;
   margin-right: 8px;
}

.touchDebugContainerTitle {
   position: absolute;
   bottom: 0px;
   background: black;
}

#jsInfo div {
   padding-left: 4px;
}

#extensionPicker {
   background: rgb(22, 25, 43);
   position: fixed;
   left: 130px;
   top: 200px;
   border: 2px solid rgb(0, 0, 0);
   font-size: 13px;
   z-index: 555;
   color: rgb(169, 188, 194);
   padding: 25px 8px 8px;
   display: none;
}

.extensionPickerTitle {
   background: black;
   text-align: center;
   position: absolute;
   top: 0px;
   left: 0px;
   width: 100%;
}

.extensionPickerText,
#commonExtensions,
.extensionPickerButton,
#extensionOther {
   display: inline-block;
   background: rgb(24, 24, 38);
   margin: 6px;
   color: white;
   height: 28px;
   line-height: 28px;
   padding: 0px 6px;
   vertical-align: top;
}

#commonExtensions,
#extensionOther,
#newFileName,
#commonExtensions,
#newFileExtension {
   border: 1px solid rgb(0, 0, 0);
   background: rgb(7, 2, 11);
}

.extensionPickerText,
#commonExtensions,
.extensionPickerButton,
#extensionOther,
#commonExtensions,
#extensionOther,
#newFileName,
#commonExtensions,
#newFileExtension {
   height: 28px;
   line-height: 28px;
   vertical-align: top;
   margin-top: 0px;
   margin-bottom: 0px;
   color: inherit;
   outline: none !important;
}

#newFileName,
#newFileExtension {
   width: 160px;
}

.extensionPickerButton {
   background: black;
}

.extensionPickerButton,
#commonExtensions,
#newFileName,
#newFileExtension {
   border: 1px solid rgba(46, 63, 68, 0.5);
}

#newFileExtension {
   width: 80px;
}

.extensionPickerText {
   color: lightblue;
}

.extensionPickerButton {
   cursor: pointer;
}

.extensionPickerText,
#newFileExtension {
   transition: opacity 0.3s ease 0s;
}

.extensionPickerText[data-disabled="true"] {
   opacity: 0.3;
}

#newFileExtension:disabled {
   opacity: 0.3;
}

.extensionPickerButton {
   cursor: pointer;
}

.closeExtensionPicker {
   display: inline-block;
   cursor: pointer;
   position: absolute;
   color: inherit;
   right: 5px;
   top: 0px;
}

#imageCreationContainer {
   position: fixed;
   top: 0px;
   left: 0px;
   height: 90%;
   width: 100%;
   overflow: hidden auto;
   background: rgb(30, 38, 67);
   z-index: 3333;
   display: none;
}

#page[data-width="showingConsoles"] #imageCreationContainer {
   width: 68%;
}

.imageCreationContainerTitle {
   background: rgb(48, 10, 54);
   padding: 15px;
   position: absolute;
   top: 0px;
   font-size: 20px;
}

.imageCreationContainerTitle i {
   cursor: pointer;
}

.pageConsoleStateArea {
   background: rgb(42, 63, 104);
   color: white;
   top: 0px;
   z-index: 13;
   width: 160px;
   border: 2px solid rgb(0, 0, 0);
   display: inline-block;
   padding-left: 8px;
   vertical-align: top;
   font-size: 14px;
   cursor: pointer;
}

#glossaryPage .pageConsoleStateArea {
   opacity: 0.4;
}

#previewPage.styleEditorView .pageConsoleStateArea {
   display: none;
}

.page-id-23 .pageConsoleStateArea {
   background: rgb(112, 77, 137);
   position: fixed;
   z-index: 3333;
   height: 30px;
   width: 200px;
   top: unset;
   bottom: 15px;
   left: 300px;
}

.pageConsoleStateArea[data-currentstate="show"] {
   background: rgb(8, 64, 33);
}

#page[data-grabbingselectorstatus="yes"] #previewCodeOverlay,
#page[data-grabbingselectorstatus="yes"] #codeCreate,
#page[data-grabbingselectorstatus="yes"] #cc_top_bar,
#page[data-grabview="yes"] #previewCodeOverlay,
#page[data-grabview="yes"] #codeCreate,
#page[data-grabview="yes"] #cc_top_bar {
   /* border: 9px solid rgb(58, 111, 172); */
}

#page[data-grabview="yes"] #codeCreate {
   border-top: none;
}

#page[data-grabview="yes"] #cc_top_bar {
   left: 0px;
   border-bottom: none;
}

#elementInspector {
   display: none;
}

#page #elementInspector {
   background: rgb(4, 23, 49);
}

#page[data-grabview="yes"] #elementInspector {
   position: fixed;
   display: block;
   z-index: 333;
   width: 500px;
   top: 100px;
   left: 300px;
   height: 1073px;
   overflow: hidden;
}

#elementInspector[data-location="left"] {
   left: 50px !important;
}

#elementInspector[data-location="right"] {
   right: 50px !important;
   left: unset !important;
}

#page[data-width="showingConsoles"] #elementInspector {
   left: 25px;
}

#elementInspectorTitle {
   background: black;
   border-bottom: 1px solid rgb(55, 55, 55);
   height: 30px;
   line-height: 30px;
   text-align: center;
   padding-right: 31px;
}

.elementInspectorClose,
.elementGrabOptionsToggle {
   position: absolute;
   top: 0px;
   right: 10px;
   cursor: pointer;
   color: rgb(101, 100, 100);
}

.elementGrabOptionsToggle {
   right: 40px;
}

.inspectorElementTreeToggle {
   position: absolute;
   top: 0px;
   left: 8px;
   color: rgb(93, 93, 93);
   font-size: 11px;
   cursor: pointer;
}

.inspectorColorFormat,
.currentItemInspected,
#inspectorElementTree {
   background: rgb(31, 48, 69);
   padding: 12px;
   border: 1px solid black;
}

#inspectorElementTree {
   height: 17%;
   overflow-y: auto;
}

.elementTreeTitle {
   border: 1px solid black;
   background: rgb(14, 14, 39);
   color: rgb(201, 215, 219);
   text-align: center;
}

.inspectorColorFormat,
.currentItemInspected {
   background: rgb(15, 16, 18);
   display: inline-block;
   width: 100%;
   height: 46px;
}

#selectorOverlay .currentItemInspected {
   position: relative;
}

.currentItemInspected {
   color: orange;
   display: block;
   width: 100%;
}

.inspectingWord {
   display: inline-block;
   color: rgb(192, 172, 82);
   width: 80px;
   vertical-align: top;
}

#elementTreeForSelectors .inspectingWord {
   font-size: 14px;
}

.inspectingItem {
   white-space: nowrap;
   display: inline-block;
   width: calc(100% - 140px);
   overflow: hidden;
   vertical-align: top;
   text-overflow: ellipsis;
}

#selectorOverlay .inspectingItem {
   width: calc(100% - 165px);
   /* border: 1px solid yellow; */
}

.inspectorColorFormat {
   background: rgb(10, 10, 50);
}

.currentItemInspectedCopy {
   display: inline-block;
   cursor: pointer;
}

#selectorOverlay .currentItemInspectedCopy {
   position: absolute;
   right: 15px;
}

.inspectorColorFormatTitle,
#inspectorColorFormat {
   height: 27px;
   line-height: 27px;
   vertical-align: top;
}

.inspectorColorFormatTitle {
   display: inline-block;
}

#inspectorColorFormat {
   border: 1px solid black;
   background: rgb(17, 59, 88);
   border-radius: 0px;
   height: 23px;
}

#inspectorColorFormat {
   border: none !important;
   outline: none !important;
}

#allInspectorLines {
   border: 1px solid rgb(0, 0, 0);
   padding: 12px;
   height: calc(83% - 121px);
   position: relative;
   overflow-y: auto;
}

#elementInspector[data-tree="hidden"] #allInspectorLines {
   height: calc(100% - 121px);
}

.inspectorLineColorBox {
   height: 20px;
   min-width: 20px;
   display: inline-block;
   border: 1px solid rgba(110, 110, 110, 0.19);
}

#entire_persistent_picker .inspectorLineColorBox {
   height: 14px;
   width: 14px;
   vertical-align: top;
   min-width: unset;
   position: relative;
   top: 3px;
   border: 1px solid rgba(0, 0, 0, 0.58);
}

.itemInspectorLineTitle,
.itemInspectorLineValue {
   display: inline-block;
   border: 1px solid rgba(0, 0, 0, 0.43);
   width: 140px;
   padding-left: 8px;
   margin-right: 9px;
   vertical-align: top;
}

.itemInspectorLineTitle {
   background: black;
}

.itemInspectorLineValue {
   background: rgb(31, 31, 51);
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
}

.itemInspectorLine {
   padding: 10px 0px;
   border-bottom: 1px solid rgba(60, 146, 213, 0.17);
   position: relative;
}

#page[data-grabbingselectorstatus="yes"] #theRenderedFrameContainer *,
#page[data-grabbingselectorstatus="yes"] #codeCreate :not(#entire_persistent_picker *, #elementTreeForSelectors *),
#page[data-grabbingselectorstatus="yes"] #previewPage :not(#entire_persistent_picker *, #elementTreeForSelectors *, #selectorTool *),
#page[data-grabview="yes"] #codeCreate :not(#entire_persistent_picker *, #elementTreeForSelectors *),
{
cursor: crosshair !important;
}

#page[data-grabview="yes"] #entire_persistent_picker #colorPickerContainer,
#page[data-grabview="yes"] #entire_persistent_picker #persistentColorGrabber {
   cursor: default;
}

.itemInspectorCopyArea {
   position: absolute;
   right: 0px;
   top: 9px;
}

.itemInspectorCopyTitle,
.itemInspectorCopyItem {
   display: inline-block;
   opacity: 0.2;
}

.itemInspectorCopyTitle {
   opacity: 0.4;
}

.itemInspectorCopyItem {
   cursor: pointer;
   width: 46px;
   text-align: center;
}

.itemInspectorCopyItem[data-type="ruleOnly"],
.itemInspectorCopyItem[data-type="valueOnly"] {
   width: unset;
}

.itemInspectorCopyItem .copyingWord,
.itemInspectorCopyItem.currentlyCopying .actualText {
   display: none;
}

.itemInspectorCopyItem.currentlyCopying .copyingWord {
   display: inline-block;
}

.itemInspectorCopyItem.currentlyCopying {
   border-radius: 8px;
   vertical-align: top;
   opacity: 0.5;
}

.itemInspectorCopyItem:hover {
   opacity: 0.7;
}

.inspectorID {
   color: rgb(0, 195, 255);
   cursor: pointer;
   display: inline-block;
}

.itemInspectorLine:nth-child(2n+1) .itemInspectorLineTitle,
.itemInspectorLine:nth-child(2n+1) .itemInspectorLineValue {
   color: rgb(154, 175, 188);
}

.itemInspectorLine:nth-child(2n+1) .itemInspectorLineTitle {
   background: rgb(1, 1, 17);
}

#page[data-recordingbar="show"] .pageConsoleStateArea {
   display: none;
}

#page[data-recordingbar="show"] .pageConsoleStateArea {
   display: none;
}

#page[data-recordingbar="show"] #recordingBar>.pageConsoleStateArea {
   display: inline-block;
   height: 33px;
   line-height: 33px;
   opacity: 0.4;
}

.currentConsoleStateInfo {
   display: inline-block;
   color: cyan;
}

.pageConsoleStateArea[data-currentstate="hide"] {
   background: rgb(46, 5, 5);
}

.pageConsoleStateArea[data-currentstate="hide"] .currentConsoleStateInfo {
   color: orange;
}

#jsInfo div:nth-child(2n+1) {
   background: rgb(26, 26, 26);
   border: 1px solid rgba(68, 68, 68, 0.51);
   color: rgb(200, 212, 223);
}

#mainGlossarySearchContainer {
   position: absolute;
   width: 100%;
   background: rgba(0, 0, 0, 0.63);
   height: 70%;
   display: none;
   z-index: 100;
   top: 38px;
}

#elementInspectorOptions {
   background: rgb(13, 4, 32);
   padding: 12px;
   display: none;
}

#mainGlossarySearchSection {
   background: rgb(25, 25, 25);
   border: 3px solid rgb(52, 96, 108);
   width: 90%;
   margin-left: 5%;
   margin-top: 15px;
   height: 80%;
   overflow: hidden;
}

.mainGlossarySearchTitle {
   background: black;
   height: 40px;
   line-height: 40px;
   text-align: center;
   font-size: 19px;
   border-bottom: 2px solid rgb(47, 47, 47);
   position: relative;
}

.mainGlossarySearchTitle i {
   position: absolute;
   cursor: pointer;
   right: 30px;
   color: gray;
}

.mainGlossarySearchInner {
   background: rgb(18, 19, 27);
   padding: 15px;
   font-size: 14px;
   height: calc(100% - 40px);
   overflow: hidden auto;
}

#mainGlossarySearchNoResults {
   font-size: 18px;
   padding-left: 15px;
   padding-top: 15px;
   display: none;
}

.mainGlossaryNoResultsQuery {
   font-style: italic;
   display: inline-block;
}

.mainGlossarySearchTasks {
   background: rgb(8, 20, 55);
   color: rgb(144, 235, 238);
   border: 3px solid rgb(123, 125, 123);
   padding: 8px 8px 40px;
   z-index: 888888;
   position: fixed;
   right: 18px;
   bottom: 15px;
   min-height: 130px;
   width: 300px;
   overflow: hidden;
   display: none;
}

.glossarySearchTasksTitle {
   position: absolute;
   bottom: 0px;
   background: black;
   padding: 4px;
   right: 0px;
}

.page-id-20 #page[data-width="showingConsoles"] .glossaryLogo {
   display: none;
}

.page-id-20 #page[data-width="showingConsoles"] #outputConsoles {
   top: 0px;
   bottom: unset;
}

#mainGlossarySearchInput {
   width: 200px;
   background: rgb(9, 9, 9);
   color: lightblue;
   padding-left: 8px;
   border: 1px solid rgba(106, 127, 134, 0.27);
}

#page .mainGlossarySearchQuery,
#page #mainGlossarySearchInput,
#page .mainGlossarySearchStart {
   vertical-align: top;
   display: inline-block;
   height: 28px;
   line-height: 28px;
}

.mainGlossarySearchPartial {
   display: none;
}

.mainGlossarySearchStart {
   background: rgb(5, 23, 52);
   border: 1px solid black;
   margin-left: 10px;
   display: inline-block;
   cursor: pointer;
   padding: 0px 5px;
}

.mainGlossarySearchStart.clear {
   background: rgb(35, 34, 34);
}

#hideOtherDialogs {
   position: fixed;
   background: rgb(3, 3, 32);
   height: 70%;
   border: 1px solid rgb(87, 93, 149);
   left: 19px;
   top: 103px;
   width: 89%;
   z-index: 1;
   overflow-y: hidden;
   max-width: 850px;
   display: none;
   min-width: 750px;
}

#codeCreate #hideOtherDialogs {
   z-index: 15;
}

#allModulesOptions {
   border: 2px solid rgb(66, 54, 56);
   background: rgb(7, 3, 33);
   display: none;
}

.hideOtherDialogsInner {
   height: calc(100% - 39px);
   overflow-y: hidden;
   background: rgba(35, 36, 35, 0.42);
}

#hideOtherDialogs .hideOtherDialogsInnerTitle,
.hideOtherDialogsTitle {
   height: 40px;
   line-height: 40px;
   text-align: center;
   color: white;
   background: rgb(4, 37, 10);
}

#autoHideModulesExplanation {
   background: rgb(12, 23, 42);
   line-height: 25px;
   position: absolute;
   z-index: 13;
   width: 86%;
   border: 2px solid rgb(0, 0, 0);
   margin-left: 7%;
   margin-top: 4%;
   font-size: 14px;
   display: none;
   overflow-x: hidden;
}

.autoHideModulesExplanationTitle {
   background: black;
   height: 30px;
   line-height: 30px;
   text-align: center;
}

.closeAutoHideModulesExplanation {
   position: absolute;
   top: 0px;
   right: 8px;
   cursor: pointer;
}

.autoHideModulesExplanationInner {
   padding: 15px;
}

.autoHideModulesExplanationRow {
   margin-bottom: 15px;
   padding: 4px;
   color: rgb(183, 195, 200);
}

.autoHideModulesExplanationRow:nth-child(2n) {
   background: rgba(1, 1, 16, 0.22);
   color: rgb(165, 199, 242);
}

.hideOtherDialogsTitle {
   background: black;
}

.hideOtherDialogsTitleText,
.hideOtherDialogsTitle i {
   display: inline-block;
   vertical-align: top;
   line-height: 40px;
   height: 40px;
}

.closeHideOtherDialogs {
   position: absolute;
   top: 0px;
   right: 10px;
   cursor: pointer;
   color: lightgray;
}

#allModulesList,
#simpleModuleList {
   position: relative;
   height: calc(100% - 81px);
   overflow: hidden auto;
   border: 2px solid rgb(0, 0, 0);
   margin: 14px;
   background: rgb(0, 0, 0);
}

.theModulesToChange::-webkit-scrollbar-thumb {
   background: rgb(69, 69, 102);
}

.hideOtherDialogsButtonsRow {
   background: rgba(73, 80, 151, 0.18);
   height: 50px;
   padding-top: 5px;
}

#autoHideModuleSave,
#autoHideLoadDefaults {
   cursor: pointer;
   display: inline-block;
   height: 40px;
   line-height: 40px;
   margin-left: 30px;
   width: 120px;
   text-align: center;
   background: rgb(7, 7, 56);
   color: rgb(207, 214, 216);
}

#autoHideLoadDefaults {
   background: rgb(57, 55, 76);
}

.oneModuleCell {
   display: inline-block;
   margin-right: 2px;
   padding: 0px 5px;
}

.oneModuleCell.hideOthers {
   background: black;
   width: 190px;
}

.theModulesToChange .oneModuleCell.hideOthers,
.theModulesToChange .oneModuleCell.isHidden {}

.oneModuleCell.isHidden {}

.oneModuleCell.isHidden,
.oneModuleCell.hideOthers {
   cursor: pointer;
   text-align: center;
   padding: 0px;
}

.theModulesToChange .oneModuleCell.hideOthers,
.theModulesToChange .oneModuleCell.isHidden {
   text-align: left;
   padding-left: 25px;
}

.oneModuleCell.isHidden {
   text-align: left;
}

.oneModuleCell.hideOthers[data-state="no"] .hideOthersInnerText,
.oneModuleCell.isHidden[data-state="no"] .hideOthersInnerText {
   background: rgba(42, 4, 4, 0.58);
   color: rgb(186, 182, 182);
}

.oneModuleCell.hideOthers[data-state="yes"] .hideOthersInnerText,
.oneModuleCell.isHidden[data-state="yes"] .hideOthersInnerText {
   background: rgba(7, 45, 7, 0.46);
   color: lightblue;
}

.willHideOthersNote {
   display: none;
}

.oneModuleCell.hideOthers {
   position: relative;
}

.oneModuleName[data-modulename="javascriptCodeConversion"] .oneModuleCell.hideOthers[data-state="yes"] .willHideOthersNote,
.oneModuleName[data-modulename="persistentColorPicker"] .oneModuleCell.hideOthers[data-state="yes"] .willHideOthersNote {
   display: block;
   position: absolute;
   top: 0px;
   opacity: 0.3;
   left: 126px;
   cursor: default;
}

.oneModuleCell .hideOthersInnerText {
   display: inline-block;
   width: 117px;
   color: white;
   text-align: center;
}

.modulesTitleRow {
   background: rgb(0, 0, 0);
   margin-bottom: 0px;
   border-bottom: 1px solid rgba(78, 78, 78, 0.54);
}

.oneModuleCell.theName {
   width: 250px;
   background: rgb(27, 28, 31);
}

.theModulesToChange .oneModuleCell.theName {
   width: 241px;
}

.modulesTitleRow .oneModuleCell {
   background: rgb(16, 18, 71);
   text-align: center;
   height: 28px;
   line-height: 28px;
   cursor: default;
   white-space: nowrap;
}

.hideOtherDialogs_halfTitle {
   display: none;
}

.hideOtherDialogs_fullTitle {
   display: inline-block;
}

#simpleModuleList {
   display: none;
}

.allModulesListInfo {
   background: rgb(14, 14, 105);
   color: lightblue;
   padding: 9px;
}

.allModulesListTitle {
   background: darkblue;
   position: absolute;
   right: 0px;
   color: cyan;
   bottom: 0px;
   padding: 8px;
}

.theModulesToChange,
.simpleModulesToChange {
   background: rgb(0, 0, 0);
   height: calc(100% - 39px);
   overflow: hidden auto;
   padding-top: 5px;
   padding-left: 3px;
}

.theModulesToChange {}

.oneModuleName {
   padding: 6px 5px 6px 3px;
   display: block;
   width: 98%;
   margin: 0px 11px 0px 0px;
   position: relative;
   height: unset;
}

.oneModuleName[data-modulename="javascriptCodeConversion"],
.oneModuleName[data-modulename="persistentColorPicker"] {}

#page .oneModuleName:nth-child(2n+1) .theName {
   background: rgb(32, 32, 60);
   color: lightblue;
}

.oneModuleName .theCloseFunction,
.oneModuleName .moduleHasBoth {
   border: 1px solid rgb(0, 64, 255);
   padding: 6px;
   min-width: 74px;
   background: rgb(21, 29, 26);
   display: none;
}

.oneModuleName .theCloseFunction {
   min-width: 180px;
   cursor: pointer;
}

.oneModuleName .moduleHasBoth {
   background: rgb(43, 40, 4);
}

#page .previewFunctionName {}

.theModulesToChange .previewDivName,
.theModulesToChange .mainDivName {
   background: rgb(83, 32, 90);
   margin: 3px;
   padding: 4px;
   opacity: 1;
   display: none;
}

.theModulesToChange .previewDivName {
   background: rgb(48, 97, 126);
}

.theModulesToChange .previewDivName[data-previewdivname="not_used"],
.theModulesToChange .mainDivName[data-maindivname="not_used"] {
   opacity: 1;
}

.theModulesToChange .mainDivName[data-maindivname="SPECIAL_startRec_ops"],
.theModulesToChange .mainDivName[data-maindivname="SPECIAL_startRec_temps"] {
   background: rgb(93, 84, 42);
   color: white;
}

.theModulesToChange .mainDivName[data-maindivname="SPECIAL_startRec_ops"] {
   background: rgb(92, 92, 147);
   opacity: 1;
}

.oneModuleName .moduleHasBoth.previewFunctionName {
   background: rgb(110, 89, 75);
}

.oneModuleName .moduleHasBoth.previewFunctionName[data-value="same"] {
   background: rgb(86, 110, 75);
}

.thisModuleMeta {
   position: absolute;
   background: black;
   color: lightblue;
   top: 0px;
   right: 0px;
   padding: 3px;
   font-size: 11px;
   opacity: 0.8;
   cursor: pointer;
   display: none;
}

.thisModuleMeta[data-funcsetup="true"] {
   color: lightgreen;
}

.simpleModulesToChange .oneModuleName {
   display: inline-block;
}

.jbrFunctionHighlight {
   background: darkblue;
   color: cyan;
   display: inline-block;
}

#commandInput {
   background: rgb(15, 17, 15);
   border: 1px solid rgb(87, 88, 88);
   color: rgb(9, 113, 9);
   width: 100%;
}

#vueInfo {
   position: absolute;
   background: rgba(11, 31, 61, 0.18);
   bottom: 0px;
   width: 78%;
   text-align: left;
   height: unset;
   border: 1px solid rgba(99, 98, 98, 0.35);
   color: rgb(230, 230, 230);
   padding-left: 8px;
   opacity: 0.3;
}

#glossaryPage {
   position: fixed;
   top: 0px;
   left: 0px;
   padding: 0px;
   background: rgb(83, 83, 103);
   z-index: 50;
   width: 60%;
   height: 100%;
   color: white;
}

#glossaryPage.modulePage {}

.otherModuleToggleFuncDisplay {
   cursor: pointer;
   background: rgb(7, 53, 65);
   display: inline-block;
   padding: 9px;
   opacity: 0.3;
}

#page[data-width="normalWidth"] #glossaryPage {
   width: 100%;
}

#adminOrNormalMessage {
   position: absolute;
   z-index: 333333333;
   font-size: 12px;
   color: rgb(181, 159, 133);
   right: 300px;
   top: 20px;
}

#glossaryPage.modulePage #adminOrNormalMessage {
   display: none;
}

.consoleTextLine {
   line-height: 17px;
   font-size: 13px;
}

#consoleText {
   background: black;
   height: calc(100% - 32px);
   overflow-y: auto;
   padding: 8px;
   color: lightgreen;
   position: relative;
   border: none;
   text-align: left;
   font-size: 11px;
   line-height: 12px;
}

.snippetEndingLocation,
.emptyConsoleText {
   position: absolute;
   color: white;
   right: 5px;
   opacity: 0.2;
   transition: opacity 0.3s ease 0s;
   z-index: 5;
   font-size: 10px;
}

.emptyConsoleText {
   background: rgba(32, 75, 94, 0.21);
   right: 18px;
   opacity: 0.4;
   cursor: pointer;
   top: unset;
   bottom: 38px;
}

.emptyConsoleText:hover {
   opacity: 1;
}

#colorPickerOptions .snippetEndingLocation {
   top: 0px;
   height: 26px;
}

.consoleSizeMenu .snippetEndingLocation {
   position: relative;
   display: inline-block;
}

.snippetEndingLocation:hover {
   opacity: 0.5;
}

.snippetEndingLocation[data-buttoncount="1"]:hover {
   opacity: 0.2;
}

.snippetEndingLocation[data-buttoncount="1"] .snippetLocationButton {
   cursor: default;
}

.consoleSizeMenu {
   position: absolute;
   left: 7px;
   top: 2px;
   background: rgba(19, 25, 56, 0.31);
   color: rgb(201, 201, 201);
   border: 1px solid gray;
   height: 26px;
   line-height: 26px;
   font-size: 13px;
   width: 67%;
   text-align: center;
   display: none;
}

#entire_shortcuts[data-width="medium"] .consoleSizeMenu,
#entire_shortcuts[data-width="small"] .consoleSizeMenu {
   width: 100%;
   z-index: 8;
   opacity: 1;
   background: black;
   left: 0px;
}

.consoleSizeTitleHalf {
   display: none;
}

#entire_shortcuts[data-width="small"] .consoleSizeTitleFull {
   display: none;
}

#entire_shortcuts[data-width="small"] .consoleSizeTitleHalf {
   display: inline-block;
}

#entire_shortcuts[data-width="small"] .consoleSizeMenu {
   font-size: 10px;
}

.consoleSizeClose {
   position: absolute;
   left: 4px;
   display: none;
   top: 0px;
   cursor: pointer;
}

#entire_shortcuts[data-width="medium"] .consoleSizeClose,
#entire_shortcuts[data-width="small"] .consoleSizeClose {
   display: block;
}

.consoleHeightButton {
   display: inline-block;
   background: rgb(47, 47, 47);
   color: rgb(122, 121, 121);
   cursor: pointer;
   height: 24px;
   line-height: 24px;
   width: 24px;
   opacity: 0.5;
   text-align: center;
   position: relative;
   top: 3px;
   transition: opacity 0.2s ease 0s;
}

.consoleHeightButton:hover {
   opacity: 0.7;
}

.consoleSizeMenuButton {
   display: inline-block;
   cursor: pointer;
   margin: 0px 1%;
   text-transform: capitalize;
}

.consoleSizeMenuButtonActive {
   text-decoration: underline;
   color: rgb(157, 213, 234);
}

.snippetLocationButton {
   display: inline-block;
   margin: 3px;
   padding: 3px 5px;
   background: rgba(88, 89, 105, 0.73);
   color: rgb(197, 195, 195);
   cursor: pointer;
   transition: all 0.1s ease 0s;
   border: 1px solid black;
   z-index: 8;
   font-size: 10px;
   line-height: 12px;
}

#colorPickerOptions .snippetLocationButton {
   font-size: 9px;
   padding: 1px 4px;
   margin: 2px;
}

#previewPage .snippetEndingLocation {
   display: none;
}

.activeSnippetLocationButton {
   color: rgb(152, 232, 232);
}

.activeSnippetLocationButton {
   background: rgb(32, 37, 47);
}

.consoleInputContainer {
   position: relative;
   border: 1px solid rgb(40, 41, 41);
   background: black;
   height: 32px;
}

.consoleInputSpecialContainer {
   color: white;
   position: absolute;
   opacity: 0.6;
   top: 0px;
   height: 30px;
   font-size: 0.7em;
   cursor: pointer;
   right: 0px;
   background: rgb(44, 47, 60);
}

.addCSSRulesRow .consoleInputSpecialContainer {
   background: rgb(48, 50, 56);
   border: 1px solid rgb(19, 19, 19);
}

.consoleInputSpecial {
   width: 32px;
   text-align: center;
   display: inline-block;
   height: 30px;
   line-height: 30px;
}

.cssImportant {
   font-size: 1.8em;
}

.specialInputActive {
   background: rgb(12, 42, 66);
   border-bottom: 1px solid rgb(217, 217, 217);
}

#consoleInput {
   height: 30px;
   bottom: 0px;
   width: 81%;
   left: 0%;
   background: rgb(18, 19, 19);
   color: rgb(128, 138, 128);
   padding-left: 7px;
   border: none;
}

#consoleText,
#consoleInput {}

#consoleInput {}

#app::after {
   content: "#app";
   position: absolute;
   top: 0px;
   right: 0px;
   background: dimgray;
   color: white;
   opacity: 0.8;
   padding: 6px;
}

.vue-typer {
   font-family: monospace;
}

.vue-typer::before {
   content: "root@atkafasi ~#";
   color: rgb(0, 255, 51);
}

.vue-typer .custom.char {
   color: rgb(0, 255, 51);
   background-color: rgb(0, 0, 0);
}

.vue-typer .custom.char.selected {
   background-color: rgb(0, 0, 0);
}

.vue-typer .custom.caret {
   width: 10px;
   margin-left: 5px;
   background-color: rgb(0, 255, 51);
}

#vueTyperDiv {
   background: black;
   padding: 30px;
   margin-bottom: 30px;
}

.outputs {
   color: rgb(158, 153, 153);
   width: 100%;
   padding-top: 0px;
   position: relative;
   z-index: 15;
   height: 110px;
}

.outputs {
   z-index: 5;
   overflow: visible;
   box-shadow: none;
}

.placeholderGutter {
   position: absolute;
   width: 44px;
   height: 100%;
   background: green;
}

#page .aceEditor *,
#page .aceEditor {
   backface-visibility: visible;
}

.ace_mobile-menu {
   display: none !important;
}

#editorlanguageOne,
#editorlanguageTwo,
#editorlanguageThree,
#editorlanguageFour {
   height: 100% !important;
}

.aceEditor {
   position: absolute;
   width: 100%;
   height: 100%;
   top: 0px;
   left: 0px;
   z-index: 1;
}

.compile_editor_container {
   position: relative;
}

#compile_editor {
   position: relative;
   height: calc(100% - 97px);
   border: none;
}

#previewPage #compile_editor {
   height: calc(100% - 140px);
}

#entire_outputs[data-backgroundactive="enabled"] .outputLabel[data-buttonactive="active"],
#entire_outputs[data-backgroundactive="enabled"] .languageButton[data-buttonactive="active"],
#placeholderEditors[data-backgroundactive="enabled"] .oneSampleOuterLanguageButton[data-active="true"],
#placeholderEditors[data-backgroundactive="enabled"] .oneSampleInnerLanguageButton[data-active="true"] {
   background: rgb(1, 5, 6);
}

#entire_outputs[data-textactive="enabled"] .outputLabel[data-buttonactive="active"],
#entire_outputs[data-textactive="enabled"] .languageButton[data-buttonactive="active"],
#placeholderEditors[data-textactive="enabled"] .oneSampleOuterLanguageButton[data-active="true"],
#placeholderEditors[data-textactive="enabled"] .oneSampleInnerLanguageButton[data-active="true"] {
   color: rgb(43, 199, 224);
}

#entire_outputs[data-borderactive="enabled"] .outputLabel[data-buttonactive="active"],
#entire_outputs[data-borderactive="enabled"] .languageButton[data-buttonactive="active"],
#placeholderEditors[data-borderactive="enabled"] .oneSampleInnerLanguageButton[data-active="true"],
#placeholderEditors[data-borderactive="enabled"] .oneSampleOuterLanguageButton[data-active="true"] {
   border-right: 2px solid rgba(61, 152, 173, 0.85);
   border-bottom: 2px solid rgba(61, 152, 173, 0.85);
   border-image: initial;
   border-top: none;
   border-left: none;
   z-index: 16;
}

#entire_outputs[data-activelanguagescount="1"] .languageButton[data-buttonactive="active"] {
   border-left: 2px solid rgba(61, 152, 173, 0.85);
}

#entire_outputs[data-activelanguagescount="3"] .topLanguageButton {
   width: 33.33%;
}

#entire_outputs[data-activelanguagescount="2"] .topLanguageButton {
   width: 50%;
}

#codeCreate #entire_outputs[data-activelanguagescount="1"] .topLanguageButton {
   width: 100%;
   margin-left: 0%;
   border: 1px solid rgba(61, 152, 173, 0.85);
}

.outputLabel {
   background: gray;
   color: black;
   position: absolute;
   top: -26px;
   width: 73px;
   z-index: 8;
   right: 0px;
   padding: 0px;
   font-size: 0.85em;
   text-align: center;
   opacity: 0.85;
}

#languageFour .minimize,
#languageFour .maximize,
#languageFour .outputLabel {
   display: none;
}

#entire_outputs.fourMaximized #languageFour .minimize,
#entire_outputs.fourMaximized #languageFour .maximize,
#entire_outputs.fourMaximized #languageFour .outputLabel {
   top: -26px;
}

.languageButton {
   display: inline-block;
   padding: 4px;
   position: relative;
   font-size: 0.9em;
   width: 25%;
   float: left;
   border-bottom: 2px solid rgba(102, 100, 100, 0.3);
   cursor: pointer;
}

.sessionsShowLanguage {
   padding: 4px;
   cursor: default;
   min-width: 36px;
   position: relative;
   display: inline-block;
   text-align: center;
   height: 30px;
   vertical-align: top;
   line-height: 30px;
}

.oneSearchResultCell .sessionsShowLanguage {
   height: inherit;
   line-height: inherit;
   padding: 0px 7px;
}

#searchSessionsContainer[data-shrinkboxes="yes"] .oneSearchResultCell .sessionsShowLanguage {
   min-width: unset;
   max-width: unset;
   width: 36px;
   padding: 0px;
   text-align: center;
}

.infoContainerCellContent .sessionsShowLanguage {
   padding: 0px;
}

.showLanguageAbbreviated {
   display: none;
}

.languageOneColor {
   background: rgb(35, 68, 19);
   color: white;
}

.languageTwoColor {
   background: rgb(29, 35, 51);
   color: white;
}

.languageThreeColor {
   background: rgb(13, 36, 53);
   color: white;
}

.languageFourColor {
   background: rgb(70, 6, 61);
   color: white;
}

#renderAreaClone {
   position: fixed;
   bottom: 67px;
   height: 1093px;
   width: 930px;
   background: rgb(10, 28, 59);
   z-index: 44;
   border: 4px solid rgb(106, 47, 123);
   padding: 22px;
   display: none;
}

.startRenderSnapshots,
.renderAreaCloneTitle {
   padding: 6px;
   background: black;
   color: lightblue;
   position: absolute;
   bottom: 0px;
   right: 0px;
}

.startRenderSnapshots {
   background: rgb(17, 54, 11);
   right: unset;
   left: 0px;
   cursor: pointer;
   font-size: 18px;
   padding: 8px;
   color: rgb(196, 237, 238);
   border: 2px solid black;
}

#clonedRenderArea {
   position: relative;
   display: block;
   width: 80%;
   height: 40%;
   border: 4px solid rgb(161, 161, 146);
   background: rgb(40, 48, 8);
   z-index: 3;
   margin-bottom: 19px;
}

.renderAreaCloneInner {
   width: 93%;
   height: 40%;
   position: relative;
   border: 2px solid rgb(132, 161, 212);
   background: rgba(92, 24, 109, 0.28);
   padding: 16px;
   font-size: 18px;
}

.renderAreaCloneInner .canvasArea {
   border: 3px solid rgb(129, 188, 170);
   height: 80%;
   background: rgb(14, 93, 23);
   width: unset;
   display: inline-block;
   padding-right: 50px;
}

#titleClone .canvasArea {
   min-height: 70px;
   height: 635px !important;
}

#twoMainContainers {
   z-index: 12;
   width: 60%;
   height: 96%;
   position: relative;
   background: rgb(0, 0, 0);
   top: 0px;
   border: 1px solid black;
}

#keyboardShortcutTesting {
   display: none;
   position: fixed;
   z-index: 3333;
   background: rgb(16, 28, 44);
   height: 700px;
   width: 550px;
   border: 4px solid pink;
   left: 10px;
   top: 120px;
   padding: 15px;
   font-size: 17px;
}

#keyboardShortcutTesting .oneKeyType {
   border: 1px solid rgb(137, 133, 133);
   margin-bottom: 28px;
   margin-top: 15px;
   padding: 13px;
}

#keyboardShortcutTesting select {
   border: 1px solid lightblue;
   color: lightblue;
}

#keyboardShortcutTesting select {
   display: inline-block !important;
}

#page[data-recordingbar="show"] #twoMainContainers {
   border: 1px solid rgb(57, 57, 57) !important;
}

#page[data-recordingbar="show"] #twoMainContainers,
#page[data-recordingbar="show"] #cc_top_bar,
#page[data-recordingbar="show"] #condensedPageContainer {
   left: 22px;
   border: 1px solid rgb(0, 0, 0) !important;
   width: 96% !important;
}

#page[data-recordingbar="show"] .highlightSmallSelect {
   display: none !important;
}

#page[data-width="showingConsoles"][data-recordingbar="show"] #twoMainContainers {
   width: 65% !important;
}

#page[data-recordingbar="show"] .cc_logo #codeCreateNavButton {
   right: 45px;
}

#page[data-recordingbar="show"] #cc_column_1 {
   display: none;
}

.cc_div {
   background: rgba(25, 25, 28, 0.79);
   position: relative;
   width: 33.3%;
   display: inline-block;
   vertical-align: top;
   z-index: 4;
   margin: 0px;
   height: 99%;
   overflow: hidden;
   transition: height 0.5s ease 0s;
   font-size: 14px;
}

#codeCreate.hide_cc_top_bar .cc_div {
   height: 97%;
   top: 15px;
}

.cc_div_title {
   position: absolute;
   top: 0px;
   right: 0px;
   background: gray;
   color: white;
   opacity: 0.7;
   z-index: 111;
}

.column2Title {
   bottom: 0%;
   top: unset;
   left: 0px;
   background: black;
   right: unset;
   opacity: 0;
   display: none;
}

.shortcuts_div_title {
   bottom: 0px;
   top: unset;
   background: rgb(144, 141, 141);
   color: white;
}

#focusTopBarCover {
   position: fixed;
   top: 0px;
   left: 0px;
   background: rgb(14, 16, 19);
   width: 100%;
   height: 100%;
   z-index: 12;
   display: none;
   color: white;
}

.focusTopBarCoverText {
   top: 600px;
   left: 200px;
}

#page.focusTopBar #focusTopBarCover {
   display: block;
   z-index: 500;
}

.allPreferenceLinesCover {
   position: absolute;
   top: 0px;
   left: 0px;
   background: rgb(14, 16, 19);
   width: 100%;
   height: 100%;
   z-index: 12;
   display: none;
   font-size: 0px;
}

.focusTopBarCover {
   position: fixed;
   top: 0px;
   left: 0px;
   background: rgb(14, 16, 19);
   width: 100%;
   height: 100%;
   z-index: 12;
   overflow: hidden;
   display: none;
   padding: 30px;
   color: rgb(209, 205, 205);
}

#page.focusTopBar .focusTopBarCover {
   display: block;
}

#outputsContainerCover {
   position: absolute;
   top: 0px;
   left: 0px;
   background: rgb(14, 16, 19);
   width: 100%;
   height: 100%;
   overflow: hidden;
   z-index: 8;
}

.cc_cover,
.extra_cc_cover,
.cc_cover_two,
#featureGroupOverlay {
   position: fixed;
   top: 0px;
   left: 0px;
   background: rgba(74, 82, 99, 0.57);
   width: 100%;
   height: 100%;
   z-index: 291;
   display: none;
   overflow: hidden;
}

.keyboardShortcutCountCover {
   position: absolute;
   z-index:444;
   width: 100%;
   background: #000000d9;
   height: 100%;
   padding-left:300px;
   padding-top: 53px;
}

#searchResultsTestWindows {
   position: absolute;
   background: black;
   height: 930px;
   width: 414px;
   overflow: hidden;
   z-index: 3333;
   top: 100px;
   left: 20px;
   padding-top: 50px;
   border: 4px solid cyan;
   display: none;
}

#searchResultsTestWindowOne,
#searchResultsTestWindowTwo {
   background: rgb(73, 66, 66);
   position: absolute;
   z-index: 111;
   height: 800px;
   border: 2px solid rgb(86, 92, 92);
   left: 10px;
   width: 175px;
   font-size: 16px;
   color: lightblue;
   overflow: hidden;
}

.searchResultsTestWindowTitle {
   position: absolute;
   bottom: 0px;
   color: rgb(219, 239, 240);
}

.toggleSearchSessionIDs {
   position: absolute;
   right: 0px;
   cursor: pointer;
   background: rgb(12, 36, 60);
   padding: 8px;
   color: lightblue;
   opacity: 0.3;
   transition: opacity 0.3s ease 0s;
}

.toggleSearchSessionIDs:hover {
   opacity: 0.9;
}

#searchResultsTestWindowOne .testWindowInner,
#searchResultsTestWindowTwo .testWindowInner {
   background: rgba(1, 2, 21, 0.78);
   margin: 10px;
   min-height: 500px;
   border: 2px solid rgb(11, 103, 103);
   max-height: 700px;
   overflow-y: auto;
}

.testWindowInner .testRowOne[data-index="10"],
.testWindowInner .testRowOne[data-index="20"],
.testWindowInner .testRowOne[data-index="30"],
.testWindowInner .testRowOne[data-index="40"],
.testWindowInner .testRowOne[data-index="50"],
.testWindowInner .testRowOne[data-index="60"] {
   background: black;
   color: orange;
}

#searchResultsTestWindowTwo .testWindowInner {
   background: rgba(5, 32, 39, 0.87);
}

#searchResultsTestWindowTwo {
   background: rgb(5, 21, 5);
   left: 201px;
}

.searchResultsWindowTitle {
   position: absolute;
   background: black;
   bottom: 0px;
}

.cc_cover .cleanupThisSessionArea {
   cursor: pointer;
   position: absolute;
   opacity: 0.4;
   display: none;
}

#userSettingsCover {
   position: absolute;
   background: rgba(0, 3, 8, 0.57);
   display: none;
}

#page .extraSettingsWindowDialog,
#autoSwitchInfo {
   background: rgb(11, 11, 14);
   position: fixed;
   z-index: 15;
   padding-bottom: 8px;
   top: 149px;
   border: 2px solid rgb(28, 30, 30);
   display: none;
   left: 117px;
   font-size: 14px;
}

#modifiedButtonCover {
   position: fixed;
   z-index: 333;
   background: rgba(2, 9, 27, 0.74);
   width: 100%;
   height: 100%;
   display: none;
}

#previewPage #modifiedButtonCover {
   top: 34px;
   left: 0px;
}

#trackableItemsInformation {
   position: absolute;
   height: unset;
   width: 600px;
   overflow-y: auto;
   border: 1px solid rgb(46, 46, 46);
   background: black;
   z-index: 1500;
   right: 80px;
   top: 180px;
   display: none;
}

#trackableItemsInformation .tinyCover .fa-window-close {
   position: absolute;
   top: 0px;
   right: 8px;
}

#codeCreate #trackableItemsInformation {
   top: 80px;
   font-size: 13px;
}

.trackableItemsInformationTitle {
   background: rgb(0, 0, 0);
   padding: 6px;
   color: lightblue;
   border-bottom: 1px solid rgb(40, 40, 40);
   text-align: center;
}

.trackableItemsInformationTitle i {
   color: rgb(175, 173, 173);
   position: absolute;
   right: 12px;
   cursor: pointer;
}

#trackableItemsInformationInner {}

.trackableItemsLine {
   border-bottom: 1px solid rgba(78, 80, 78, 0.34);
   padding: 15px 8px;
   background: rgb(0, 0, 0);
}

.trackableItemsLine:nth-child(2n) {
   background: rgba(3, 12, 20, 0.41);
   color: rgb(198, 241, 255);
}

.trackableItemsLineTitle {
   text-transform: capitalize;
   border: 1px solid rgba(50, 117, 128, 0.31);
   width: 100px;
   text-align: center;
   background: rgb(3, 3, 37);
}

.trackableItemsLineInformation {
   margin-left: 8px;
   width: calc(100% - 140px);
}

.trackableItemsLineTitle,
.trackableItemsLineInformation {
   display: inline-block;
   vertical-align: top;
}

#page .extraSettingsWindowDialog {
   width: 386px;
}

#page #modifiedButtonDialog {
   display: block;
   left: 30px;
   width: unset;
   min-width: 660px;
   max-width: 740px;
}

.thisAreaModifiedStatus {
   background: darkgreen;
   position: absolute;
   color: white;
   padding: 4px;
   font-size: 16px;
   bottom: 250px;
   left: 80px;
   cursor: pointer;
}

#page[data-width="normalWidth"] .extraSettingsWindowDialog {
   right: 233px;
}

.toFinalizeRules {
   width: 271px;
}

#page .extraSettingsWindowDialog,
#autoSwitchInfo,
#page .extraSettingsWindowDialog input {
   color: rgb(197, 196, 196);
}

.autoSwitchValuesTitle {
   background: black;
   height: 25px;
   line-height: 25px;
   text-align: center;
   top: 0px;
   left: 0px;
   width: 100%;
   border-bottom: 1px solid rgba(105, 105, 105, 0.44);
}

.mbsoExplanation {
   padding: 10px 36px 15px;
   white-space: nowrap;
}

.modifiedIndicatorHelp {
   display: inline-block;
   font-size: 13px;
   vertical-align: top;
   line-height: 18px;
   height: 16px;
   overflow: hidden;
   color: rgb(128, 135, 137);
}

.autoSwitchCloseButton {
   position: absolute;
   top: 0px;
   right: 11px;
   color: rgb(138, 138, 138);
   z-index: 5;
   cursor: pointer;
}

.modifiedChangesStatus {
   border: 1px solid black;
   display: inline-block;
   cursor: pointer;
   width: 99px;
   text-align: center;
   color: rgb(176, 173, 173);
   margin-right: 17px;
}

.modifiedChangesStatus .currentlyModified {
   background: rgb(48, 4, 4);
   display: none;
}

.modifiedChangesStatus .currentlyClean {
   background: rgb(3, 40, 3);
}

.modifiedChangesStatus[data-status="modified"] .currentlyModified {
   display: block;
}

.modifiedChangesStatus[data-status="modified"] .currentlyClean {
   display: none;
}

#autoSwitchInfo {
   left: 655px;
   background: rgb(43, 62, 98);
   width: 421px;
   line-height: 40px;
   padding: 0px 0px 61px;
}

#page .getAutoSwitchValues {
   padding: 5px;
   display: inline-block;
   background: black !important;
}

#autoSwitchInfo>div {
   border-bottom: 1px solid white;
   padding: 6px;
}

#autoSwitchInfo>div:nth-child(2n+1) {
   background: rgb(16, 40, 86);
}

.mbsoLineCover {
   display: none;
   position: absolute;
   top: 0px;
   left: 0px;
   height: 100%;
   width: 100%;
   z-index: 15;
   background: rgb(5, 41, 13);
   opacity: 0.6;
}

#previewPage .autoSwitchLine {
   padding: 9px 16px;
}

#previewPage .autoSwitchLine {
   display: none;
}

#previewPage .autoSwitchLine.displayLine,
#previewPage .autoSwitchLine.opacityLine {
   display: block;
}

#previewPage .autoSwitchLine[data-line="chains"],
#previewPage .autoSwitchLine[data-line="styles"],
#previewPage .autoSwitchLine[data-line="tasks"],
#previewPage .autoSwitchLine[data-line="outlines"] {
   display: block;
}

.mbsoLines .autoSwitchLine {
   position: relative;
   margin: 13px;
}

.autoSwitchLine {
   border-bottom: 1px solid rgba(105, 105, 105, 0.62);
   margin: 13px;
   padding-bottom: 8px;
}

.mbso_title {
   text-transform: capitalize;
}

.autoSwitchLine[data-state="active"] .mbso_button.inactive,
.autoSwitchLine[data-state="inactive"] .mbso_button.active {
   opacity: 0.4;
   background: rgb(36, 35, 35);
}

.mbso_button,
.mbso_title {
   display: inline-block;
   width: 110px;
   margin-right: 3px;
}

.mbso_button {
   cursor: pointer;
   border: 1px solid rgba(89, 84, 84, 0.42);
   background: rgb(14, 14, 54);
   text-align: center;
}

#mbsoSetting {
   width: 224px;
   color: lightgray;
   border: 1px solid rgba(105, 105, 105, 0.4);
}

.autoSwitchRevertLine {
   padding: 3px;
}

.autoSwitchCloseRow {
   text-align: center;
   padding: 15px 0px;
}

.autoSwitchLineTitle {
   display: inline-block;
   width: 107px;
   vertical-align: top;
}

#page .extraSettingsWindowDialog input {
   background: black;
   border: 1px solid rgb(74, 74, 74);
   vertical-align: top;
   height: 24px;
   padding-left: 9px;
   width: 75px;
   text-align: center;
}

#page #mbsoOpacity {
   border: 1px solid rgba(74, 74, 74, 0.47);
}

.autoSwitchCheckbox,
.autoSwitchCheckbox * {
   cursor: pointer;
}

.autoSwitchCheckbox {
   display: inline-block;
   height: 24px;
   line-height: 24px;
   vertical-align: top;
   margin-left: 5px;
}

.autoSwitchBothLine .autoSwitchCheckbox {
   margin-left: 0px;
}

.autoSwitchFunctionButton {
   background: black;
   display: inline-block;
   border: 1px solid rgb(86, 84, 84);
   cursor: pointer;
   margin: 8px;
   padding: 3px 5px;
}

.autoSwitchRevert {
   width: 140px;
   font-size: 11px;
   margin: 0px 0px 0px 10px;
   border: none;
   background: rgb(12, 33, 88);
   opacity: 0.6;
   transition: opacity 0.4s ease 0s;
   height: 24px;
   line-height: 24px;
   padding: 0px;
   text-align: center;
}

.autoSwitchRevert:hover {
   opacity: 1;
}

.autoBothMustApplyText {
   display: inline-block;
}

.autoSwitchValuesButton {
   background: rgb(50, 49, 71);
   display: inline-block;
   cursor: pointer;
   padding: 7px;
   margin-right: 16px;
   width: 126px;
}

.autoSwitchCancel {
   background: rgb(41, 37, 37);
}

.settingsAutosaveMessage {
   position: absolute;
   background: rgb(0, 0, 0);
   padding: 9px;
   font-size: 15px;
   top: 90px;
   width: 100%;
   text-align: center;
}

.featureDetailContainerCover {
   top: 0px;
   left: 0px;
   width: 100%;
   height: 100%;
   background: rgb(27, 46, 57);
   opacity: 0.7;
   position: absolute;
   z-index: 5;
   display: none;
}

.topMenuCover,
.optionsWindowCover {
   position: absolute;
   top: 34px;
   left: 0px;
   background: rgba(0, 0, 0, 0.46);
   width: 100%;
   height: calc(100% - 34px);
   z-index: 113;
   overflow: hidden;
   text-align: right;
   color: rgba(255, 255, 255, 0.12);
}

.topMenuCover {
   top: 0px;
   height: 100px;
}

.topMenuCover {}

.optionsWindowCover {
   display: none;
}

.twoContainers {
   position: relative;
}

.overlayContainerCover,
.twoMainContainersCover,
.twoMainContainersCoverTwo,
#resizeCover {
   position: absolute;
   top: 0px;
   left: 0px;
   background: rgb(15, 15, 16);
   width: 100%;
   height: 100%;
   z-index: 350;
   overflow: hidden;
   display: none;
   padding: 15px;
   color: rgb(132, 132, 132);
   font-size: 19px;
}

#resizeCover {
   display: block;
   background: rgba(0, 0, 0, 0.74);
   color: white;
   opacity: 1;
}

.resizeCoverOverlay {
   position: absolute;
   top: 0px;
   left: 0px;
   height: 100%;
   width: 100%;
   background: rgb(128, 95, 0);
   z-index: 4;
   opacity: 0.05;
}

#resizeCover .cancelResize {
   border: 2px solid rgb(60, 60, 60);
   background: rgb(32, 5, 3);
   color: rgb(143, 143, 143);
   position: absolute;
   right: 43%;
   top: 10px;
   width: 68px;
   height: 29px;
   font-size: 12px;
   padding: 0px;
   text-align: center;
   cursor: pointer;
   z-index: 10;
   line-height: 25px;
   opacity: 1;
}

.resizeCoverText {
   background: black;
   width: 90%;
   left: 5%;
   text-align: left;
   position: absolute;
   top: 50px;
   padding: 10px;
   color: lightblue;
   border: 2px solid rgb(55, 98, 112);
}

.resizeCoverText.resizeCoverSizes {
   top: 200px;
   border: 2px solid rgb(15, 81, 107);
}

.resizeCoverLocationOne,
.resizeCoverLocationTwo,
.resizeCoverSizeOne,
.resizeCoverSizeTwo,
.resizeCoverRatio {
   display: inline-block;
}

.resizeCoverSizeLine {
   margin-bottom: 18px;
}

.twoMainContainersCoverTwo {
   background: rgb(2, 7, 21);
}

#autoSwitchInfo {
   display: none;
}

.overlaySectionCover {
   display: block;
   position: absolute;
   top: 0px;
   left: 0px;
   background: rgba(41, 39, 39, 0.51);
   width: 100%;
   height: 100%;
   z-index: 15;
   overflow: hidden;
}

.twoMainContainersCover {
   display: none;
}

.ace_line {
   z-index: 15;
   font-size: 12px !important;
}

.ace_editor.ace_autocomplete {
   background: rgb(24, 42, 51);
   margin-top: 83px !important;
}

.outputCopy {
   background: rgba(76, 76, 76, 0.9);
   color: rgb(255, 255, 255);
   position: absolute;
   top: 2px;
   right: 7px;
   z-index: 5;
   cursor: pointer;
   opacity: 0;
   font-size: 1.1em;
   width: 41px;
   text-align: center;
}

.outputs:hover .outputCopy {
   opacity: 0.3;
}

.outputs:hover .outputCopy:hover {
   opacity: 0.7;
}

.outputs[data-status="minimized"] .outputCopy {
   display: none;
}

.outputs .outputs .clipboardCopied {
   top: -24px;
   position: absolute;
   background: rgba(0, 0, 0, 0.32);
   left: 3px;
   color: rgb(187, 187, 187);
}

.outputs .clipboardCopied {
   z-index: 6;
}

.outputs .clipboardCopied,
.outputs .cc_copy {
   font-size: 0.8em;
}

.opacityTransition,
.opacityTransition * {
   transition: opacity 0.3s ease 0s;
}

.outputCopy[data-focus="focus"] {
   opacity: 0.3;
}

.outputCopy:hover {
   opacity: 0.7;
}

.clipboardCopied[data-focus="focus"] {
   opacity: 1;
}

#selectTheme,
#page .cc_select[data-var="editorTheme"],
#page .cc_select[data-var="secondaryEditorTheme"] {
   background: rgb(4, 9, 44);
   color: rgb(168, 174, 175);
   border: 1px solid rgba(54, 54, 54, 0.62);
   margin-left: -6px;
   vertical-align: top;
   padding-left: 6px;
   min-width: 297px;
   font-size: 18px !important;
}

.secondaryThemeSetAll {
   background: black;
   display: inline-block;
   height: 28px;
   line-height: 28px;
   padding: 0px 12px;
   cursor: pointer;
}

.selectEditorThemeText,
#selectTheme,
#page .cc_select[data-var="editorTheme"],
.saveEditorThemeButton {
   height: 32px;
   line-height: 32px;
   position: relative;
   font-size: 16px;
}

#page #cc_top_bar.condensedView .selectEditorThemeText {
   line-height: 27px;
   height: 31px;
}

.selectEditorThemeText {
   border: 1px solid rgba(255, 255, 255, 0);
   vertical-align: top;
   display: inline-block;
   margin-right: 5px;
   color: rgb(206, 205, 205);
}

.editorThemeSection {
   display: inline-block;
   height: 40px;
}

#clipboard-content {
   position: absolute;
   left: -9999px;
   top: -9999px;
}

.consoleLine {
   display: block;
}

#page .consoleTextLine:nth-child(2n+1),
#page .consoleTextLine:nth-child(2n+1) * {
   background: rgb(43, 54, 68);
   color: rgb(218, 218, 218);
}

.vue-typer::before {
   content: "root@cc.cc ~#";
   color: rgb(62, 188, 210);
   margin-right: 2px;
}

.vue-typer .custom.char {
   color: rgb(0, 255, 51);
   background-color: rgb(0, 0, 0);
}

.vue-typer .custom.char.selected {
   background-color: rgb(0, 0, 0);
}

.shortcutRow {
   position: relative;
   background: rgb(21, 23, 35);
   padding: 4px 0px;
   height: 44px;
   overflow: hidden;
}

.fadingWrapper {
   overflow: hidden;
   border: none;
}

.shortcutRow .theCode {
   position: absolute;
   width: 138px;
   background: rgb(3, 22, 43);
   font-size: 1.2em;
   padding: 4px;
   display: inline-block;
   color: white;
   text-align: center;
}

.theShortcutRowsContainer {
   border: 2px solid rgb(6, 6, 6);
   background: rgb(21, 23, 35);
   position: relative;
}

.shortcutRowHeading {
   background: rgba(2, 2, 2, 0.88);
   line-height: 26px;
   height: 34px;
   padding-bottom: 4px;
}

.shortcutRowHeading div {
   vertical-align: top;
}

.allShortcutRows,
.allColorRows {
   overflow-y: auto;
   background: rgb(45, 48, 64);
   transition: height 0.2s linear 0s;
   height: calc(100% - 32.4px);
}

.allColorRows {}

.reAddStyleRow {
   text-align: center;
   cursor: default;
   overflow: hidden;
   height: 34px;
   padding-top: 7px;
   padding-bottom: 30px;
   background: rgb(16, 33, 49);
}

#entire_shortcuts[data-width="small"] .reAddStyleRow {
   display: none;
}

.reAddInnerRow {
   vertical-align: top;
}

.reAddStyleRow {
   vertical-align: top;
}

.reAddStyleButton,
#reAddStyleType,
.reAddTitle,
#page .cc_select[data-var="reAddStyleType"] {
   display: inline-block;
   position: relative;
   font-size: 13px;
   height: 20px;
   line-height: 20px;
   vertical-align: top;
   border-radius: 0px;
}

#page .cc_select[data-var="reAddStyleType"] {
   border: 1px solid rgb(66, 66, 66);
   width: 140px;
}

#page .cc_select[data-var="reAddStyleType"] .activeSelectOption,
#page .cc_select[data-var="reAddStyleType"] .caretDown {
   line-height: 20px;
   height: 20px;
}

.reAddStyleButton {
   cursor: pointer;
   background: rgb(28, 44, 82);
   border: 1px solid rgba(128, 128, 128, 0.36);
   padding: 0px 3px;
   width: 52px;
}

#entire_shortcuts .shortcutRowHeading .shortcut_input,
#entire_shortcuts .shortcutRowHeading .snippet_input {
   background: rgb(15, 20, 41);
   color: rgb(206, 206, 206);
   line-height: 25px;
   height: 25px;
   font-size: 0.85em;
   display: inline-block;
   cursor: default;
   margin-bottom: 0px;
   text-align: center;
}

.modifiersHelp {
   position: absolute;
   top: 5px;
   right: 51px;
   z-index: 13;
}

#entire_shortcuts[data-width="small"] .modifiersHelp .oneHelpButton {
   display: none;
}

.shorcutRowHeading {
   margin-bottom: 0px;
}

#outputCover,
#outputCoverFading,
#darkOutputCover {
   position: absolute;
   top: 0px;
   left: 0px;
   width: 100%;
   height: 100%;
   background: rgba(0, 0, 0, 0.85);
   color: white;
   z-index: 17;
}

#darkOutputCover {
   background: black;
   display: none;
}

.cc_show_sizes {
   position: absolute;
   z-index: 94;
   bottom: 0px;
   background: rgb(10, 10, 10);
   color: rgb(146, 143, 143);
   width: 100%;
   text-align: center;
   font-size: 12px;
   line-height: 20px;
   border-top: 1px solid rgba(105, 105, 105, 0.55);
   opacity: 1;
}

#entire_shortcuts .cc_show_sizes {
   height: 10px;
   line-height: 10px;
   font-size: 10px;
}

.copyDivHeight,
.copyDivWidth {
   color: rgb(120, 182, 182);
   cursor: pointer;
}

.copyDivHeight:hover,
.copyDivWidth:hover {
   text-decoration: underline;
}

#outputCoverFading {
   background: black;
}

.languageButton .buttonText,
.outputs .buttonText {
   cursor: pointer !important;
}

#entire_outputs[data-languagebuttondisplaysetting="lowercase"] .normalLanguageButtonLabel,
#entire_outputs[data-languagebuttondisplaysetting="lowercase"] .abbreviatedLanguageButtonLabel {
   text-transform: lowercase;
   cursor: pointer;
}

.abbreviatedLanguageButtonLabel {
   display: none;
}

.buttonText[data-abbreviated="true"] .abbreviatedLanguageButtonLabel {
   display: inline-block;
}

.buttonText[data-abbreviated="true"] .normalLanguageButtonLabel[data-hasabbreviation="true"] {
   display: none;
}

.sideLanguageButtonText {
   text-transform: capitalize;
}

.shortcutType {
   width: 27%;
   padding-bottom: 4px;
   text-align: center;
   text-transform: capitalize;
   cursor: pointer;
   border-bottom: 1px solid rgba(165, 165, 165, 0.39);
   transition: color 0.1s ease 0s;
   display: none;
}

.shortcutType:hover {
   color: rgb(226, 226, 226);
}

.currentShortcutsTitle {
   font-size: 1.2em;
   position: relative;
   height: 50px;
   line-height: 50px;
   text-align: left;
   padding-left: 20px;
}

#appended_frame {
   position: fixed;
   height: 69%;
   width: 100%;
   z-index: 5000;
   top: 0;
   left: 0;
}

.shortcutType[data-active="active"] {
   text-decoration: underline;
   color: rgb(211, 208, 210);
}

.shortcutType[data-type="margin-padding"] {
   font-size: 0.87em;
}

.sessionNameContainer {
   display: inline-block;
   width: 20%;
   min-width: 115px;
   position: relative;
   vertical-align: top;
}

#sessionName,
#page .session_name_copy,
#page .cc_select[data-var="selectSession"] {
   background: black;
   width: 100%;
   color: rgb(156, 156, 156);
   margin-right: 0%;
}

#sessionName {
   height: 42px;
}

#sessionName:hover+.cc_description {
   opacity: 0.6;
}

.cc_session_info[data-adjustingcolors="true"] .cc_description {
   opacity: 1;
}

.cc_description {
   display: inline-block;
   background: rgba(105, 94, 94, 0);
   font-size: 1.65em;
   width: 30px;
   height: 40px;
   text-align: center;
   color: lightgray;
   vertical-align: top;
   line-height: 40px;
   position: absolute;
   right: 5px;
   opacity: 0;
   cursor: pointer;
   top: 0px;
   transition: opacity 0.2s ease 0s;
}

#page #cc_top_bar.condensedView .cc_description {
   height: 27px;
   line-height: 27px;
   overflow: hidden;
   font-size: 15px;
   top: unset;
   bottom: 3px;
}

.cc_description:hover {
   opacity: 1;
}

#cc_column_1 {
   margin-left: 3px;
   display: none;
}

#cc_column_1 select {
   background: black;
   width: 200px;
   border: 1px solid dimgray;
   color: gray;
}

.savedSessions {
   background: black;
   color: white;
}

.divTitle {
   text-align: center;
   padding: 6px;
}

#page .darkSlateBlue {
   background: darkslateblue;
}

#outputsContainer {
   width: 100%;
   margin-left: 0%;
   height: calc(100% - 30px);
   position: relative;
   padding-top: 26px;
}

#entire_outputs[data-languageone="inactive"] #languageOne,
#entire_outputs[data-languageone="inactive"] #languageOneTopButton {
   display: none !important;
}

#entire_outputs[data-languagetwo="inactive"] #languageTwo,
#entire_outputs[data-languagetwo="inactive"] #languageTwoTopButton {
   display: none !important;
}

#entire_outputs[data-languagethree="inactive"] #languageThree,
#entire_outputs[data-languagethree="inactive"] #languageThreeTopButton {
   display: none !important;
}

#entire_outputs[data-languagefour="inactive"] #languageFour,
#entire_outputs[data-languagefour="inactive"] #languageFourTopButton {
   display: none !important;
}

#outputsContainer.noGutters .gutter,
#outputsContainer.noGutters .languageSizeButton,
#outputsContainer.noGutters .sideLanguageButton,
#entire_outputs[data-activesplitterlanguages="1"] .gutter,
#entire_outputs[data-activesplitterlanguages="1"] .languageSizeButton,
#entire_outputs[data-activesplitterlanguages="1"] .sideLanguageButton {
   display: none !important;
}

#outputsContainer.noGutters .outputs[data-active-status="active"],
#outputsContainer.noGutters .outputs[data-active-status="inactive"],
#entire_outputs[data-activesplitterlanguages="1"] .outputs[data-active-status="active"] {
   height: 100% !important;
   width: 100% !important;
}

#outputsContainer.noGutters .outputs[data-active-status="inactive"] {
   z-index: -1;
   position: absolute;
}

#outputsContainer.horizontalSplit {
   padding-top: 0px;
   width: calc(100% - 26px);
   left: 26px;
}

#outputsContainer.noGutters,
#entire_outputs[data-activesplitterlanguages="1"] #outputsContainer {
   width: 100%;
   left: 0px;
   padding-top: 0px;
}

#twoMainContainers.noOuterButtons #outputsContainer {
   height: 100%;
}

#twoMainContainers.noOuterButtons .outerLanguageButtons {
   display: none;
}

#outputsContainer.noInnerButtons .sideLanguageButton {
   display: none;
}

#outputsContainer.noInnerButtons .maximize {
   right: 6px;
}

#page #outputsContainer.noInnerButtons .minimize {
   right: 32px;
}

#outputsContainer.showLanguageFour {
   padding-top: 3px;
   left: 0px;
   width: 100%;
}

#page .showLanguageFour .gutter {
   display: none;
}

#outputsContainer::after {
   content: "";
   position: absolute;
   height: 5px;
   background: rgba(175, 157, 157, 0.78);
   width: 110%;
   left: -26px;
   z-index: 10;
   display: none;
}

#threeEditors {
   border: 2px solid cyan;
}

.split {
   box-sizing: border-box;
}

.splitContent {}

#outputsContainer.horizontalSplit .splitContent {
   height: 100%;
   float: left;
}

.splitContent[data-status="minimized"],
.splitContent[data-status="minimized"] * {
   cursor: default;
}

.splitContentInner {
   height: 100%;
   overflow: hidden;
   position: relative;
   border-bottom: none;
}

#languageFour {
   height: 100%;
   display: none;
}

.splitContentInner {
   z-index: 1;
}

#outputsContainer.noGutters .splitContentInner {
   width: 100%;
}

.splitContentInner.ace-textmate {
   background: rgb(255, 255, 255);
}

#outputsContainer .gutter,
#entire_outputs .gutter {
   background: rgb(80, 80, 91);
   color: white;
   text-align: center;
   position: relative;
}

#outputsContainer .gutter-horizontal {
   background-color: rgb(38, 80, 96);
}

.gutter.gutter-horizontal {
   cursor: col-resize;
}

.theGutter-vertical {
   cursor: row-resize;
}

.theGutter-horizontal {
   cursor: col-resize;
}

.theGutter {
   background: rgb(39, 41, 53);
   border: 1px solid rgb(14, 14, 14);
   color: rgba(255, 255, 255, 0);
   overflow: hidden;
   position: relative;
   z-index: 250;
}

#twoMainContainers[data-cc_leftcontainer="100"]>.theGutter {
   opacity: 0.7;
   transition: opacity 0.4s ease 0s;
}

#twoMainContainers[data-cc_leftcontainer="100"]>.theGutter:hover {
   opacity: 1;
   /* visibility: hidden; */
}

#twoMainContainers[data-leftcontainer="empty"] #G-left_right_main,
#twoMainContainers[data-rightcontainer="empty"] #G-left_right_main {
   display: none !important;
}

#twoMainContainers[data-rightcontainer="empty"] #cc_leftContainer {
   width: 100% !important;
}

#twoMainContainers[data-rightcontainer="empty"] #cc_rightContainer {
   display: none !important;
}

#twoMainContainers[data-leftcontainer="empty"] #cc_leftContainer {
   display: none !important;
}

#twoMainContainers[data-leftcontainer="empty"] #cc_rightContainer {
   width: 100% !important;
}

#twoMainContainers[data-overlaycontainer="empty"] #consoleOverlay {
   display: none !important;
}

#twoMainContainers[data-rightcontainer="empty"] #G-left_right_main {
   display: none !important;
}

#twoMainContainers[data-leftcontainerbottom="empty"] #G-left_section_vertical,
#twoMainContainers[data-leftcontainertop="empty"] #G-left_section_vertical {
   display: none !important;
}

#twoMainContainers[data-leftcontainertop="empty"] #cc_leftContainerBottom {
   height: 100% !important;
}

#twoMainContainers[data-leftcontainertop="empty"] #cc_leftContainerTop {
   display: none !important;
}

#twoMainContainers[data-leftcontainerbottom="empty"] #cc_leftContainerBottom {
   display: none !important;
}

#twoMainContainers[data-leftcontainerbottom="empty"] #cc_leftContainerTop {
   height: 100% !important;
}

#twoMainContainers[data-rightcontainerbottom="empty"] #G-right_section_vertical,
#twoMainContainers[data-rightcontainertop="empty"] #G-right_section_vertical {
   display: none !important;
}

#twoMainContainers[data-rightcontainertop="empty"] #cc_rightContainerBottom {
   height: 100% !important;
}

#twoMainContainers[data-rightcontainertop="empty"] #cc_rightContainerTop {
   display: none !important;
}

#twoMainContainers[data-rightcontainerbottom="empty"] #cc_rightContainerBottom {
   display: none !important;
}

#twoMainContainers[data-rightcontainerbottom="empty"] #cc_rightContainerTop {
   height: 100% !important;
}

#twoMainContainers[data-overlaycontainerbottom="empty"] #G-overlay_splitter,
#twoMainContainers[data-overlaycontainertop="empty"] #G-overlay_splitter {
   display: none !important;
}

#twoMainContainers[data-overlaycontainerbottom="empty"] #cc_bottomOverlay {
   display: none !important;
}

#twoMainContainers[data-overlaycontainerbottom="empty"] #cc_topOverlay {
   height: 100% !important;
}

#twoMainContainers[data-overlaycontainertop="empty"] #cc_topOverlay {
   display: none !important;
}

#twoMainContainers[data-overlaycontainertop="empty"] #cc_bottomOverlay {
   height: 100% !important;
}

.cc_div .theGutter {
   background: rgb(11, 14, 28);
   opacity: 1;
   width: 100%;
}

.gutter.gutter-vertical {
   cursor: row-resize;
   width: 100%;
}

.gutter.gutter-vertical[data-index="3"],
.gutter.gutter-vertical [data-index="0"],
#page .noDrag {
   cursor: default;
}

#outputsContainer .gutter.gutter-vertical[data-index="0"] {
   position: absolute;
   top: 0px;
}

#outputsContainer.horizontalSplit .gutter[data-index="0"] {
   left: -26px;
   background: rgb(38, 80, 96);
   width: 26px;
   height: 100% !important;
}

.gutter.gutter-vertical[data-index="3"] {
   display: none;
}

.split.split-horizontal,
.gutter.gutter-horizontal {
   float: left;
   display: inline-block;
   height: 100% !important;
}

#codeCreate .cc_gutter {
   background: rgb(54, 53, 53);
   border: 1px solid rgba(59, 76, 81, 0.64);
   z-index: 7;
   position: relative;
   width: 12px;
   height: 99% !important;
}

.sizeLeft,
.sizeRight {
   color: white;
   position: absolute;
   top: 50%;
   display: none;
}

.sizeLeft {
   left: -100px;
}

.sizeRight {
   left: 100px;
}

#outputsContainer .maximize,
#outputsContainer .minimize {
   background: rgb(8, 9, 9);
   color: rgba(251, 251, 251, 0.7);
   position: absolute;
   top: -22px;
   right: 87px;
   z-index: 3;
   padding: 0px 3px;
   width: 22px;
   height: 20px;
   cursor: pointer !important;
}

#outputsContainer .maximize {
   padding-top: 0px;
}

#outputsContainer .minimize {
   padding-top: 0px;
}

#outputsContainer.noSizeButtons .minimize,
#outputsContainer.noSizeButtons .maximize {
   display: none;
}

#outputsContainer .maximize i,
#outputsContainer .minimize i {
   cursor: pointer !important;
}

#outputsContainer .maximize i {
   line-height: 17px;
}

#outputsContainer .minimize i {
   line-height: 2px;
}

#outputsContainer .minimize {
   right: 113px;
}

.outputs[data-status="minimized"] .minimize {
   opacity: 0.85;
   background: rgb(47, 46, 46);
}

.outputs[data-status="maximized"] .maximize {
   opacity: 0.6;
   background: gray;
}

.outputs .maximize.isDragging,
.outputs .minimize.isDragging {
   background: rgb(8, 9, 9);
   opacity: 0.6;
}

.sampleAceEditorContainer .ccHoverButton,
.splitContent .cc_restore,
.splitContent .cc_organize,
.splitContent .cc_copy,
.splitContent .cc_find_replace {
   position: relative;
   opacity: 0;
   transition: opacity 0.2s ease 0s;
   cursor: pointer;
   z-index: 20;
   background: rgba(76, 76, 76, 0.9);
   color: rgb(255, 255, 255);
   width: 41px;
   text-align: center;
   margin-top: 4px;
}

.sampleAceEditorContainer .ccHoverButton {
   opacity: 0.2;
}

#placeholderEditors[data-hoverbuttons="shown"] .ccHoverButton {
   opacity: 1;
}

#placeholderEditors[data-hoverbuttons="off"] .ccHoverButton {
   display: none;
}

#placeholderEditors[data-hoverbuttons="default"] .ccHoverButton {
   opacity: 0;
}

#placeholderEditors[data-hoverbuttons="default"] .sampleAceEditorContainer:hover .ccHoverButton {
   opacity: 0.2;
}

#placeholderEditors[data-hoverbuttons="default"] .sampleAceEditorContainer:hover .ccHoverButton:hover {
   opacity: 1;
}

#entire_outputs[data-activesplitterlanguages="1"] .cc_restore {
   display: none;
}

#languageFour .cc_restore {
   display: none;
}

.outputs:hover .editorHoverButtons>div {
   opacity: 0.3;
}

#page .editorHoverButtons>div:hover {
   opacity: 0.9;
}

#secondConsole {
   background: black;
   color: white;
   position: relative;
   height: 100px;
}

#page .outputCopy,
.page .cc_restore {
   transition: opacity 0.3s ease 0s;
}

#page .adminPreviewToggleButtons {
   height: 40px;
   display: none;
   top: unset;
   line-height: 40px !important;
}

#page .adminPreviewToggleButtons.extraToggleCCAdmin {
   background: rgb(67, 60, 96);
   width: 126px;
   position: absolute;
   z-index: 5;
   top: 0px;
   left: 389px;
   cursor: pointer;
}

.languageOptionsCleanup,
.adminInfoButton {
   position: fixed;
   right: 115px;
   bottom: 0px;
   background: rgb(5, 70, 28);
   color: white;
   padding: 6px;
   cursor: pointer;
   z-index: 7;
}

#rightOptions .adminInfoButton {
   bottom: 28px;
   right: 236px;
   border: 2px solid rgb(0, 0, 0);
   color: rgb(160, 160, 160);
   opacity: 0.5;
   height: 25px;
   line-height: 25px;
   padding: 0px 4px;
   z-index: 100;
}

.languageOptionsCleanup[data-languageadmininfo="off"],
.adminInfoButton[data-admininfo="off"] {
   background: rgb(25, 1, 1);
}

.languageOptionsCleanup {}

#languageSelection {
   position: relative;
   height: 100%;
   width: 100%;
   top: 0px;
   left: 0px;
   display: none;
   overflow: hidden;
}

#mainLanguageSectionContainer.consoleShown {
   width: 30%;
   left: 36%;
}

#page[data-width="showingConsoles"] #mainLanguageSectionContainer {
   right: unset;
   left: 24%;
}

#sampleChangedSettings,
#sampleChangedSettings2,
#hideMenuItemsDiv,
.changedSettingsClass {
   position: fixed;
   height: 700px;
   width: 98px;
   left: 0px;
   background: rgb(33, 33, 40);
   z-index: 3;
   padding: 2px;
   border: 2px solid rgb(139, 139, 139);
   top: 130px;
   opacity: 0.7;
}

#sampleChangedSettings2 {
   opacity: 1;
   width: 700px;
   height: 70px;
   top: 844px;
   overflow-y: auto;
   font-size: 12px;
   color: white;
   left: 0px;
   display: none;
}

#previewPage #sampleChangedSettings2 {
   top: 882px;
   left: 555px;
   width: 180px;
   display: none;
}

.placeholder_for_accents {
   position: absolute;
   bottom: 80px;
   left: 80px;
}

#newButtonsArea .changedSettingsClass {
   left: 688px;
   width: 220px;
   display: none;
}

#page[data-recordingbar="show"] .changedSettingsClass {
   display: none;
}

#newButtonsArea #sampleChangedSettings .cc_debug_title {
   top: unset;
   bottom: 0px;
   left: unset;
   right: 0px;
   opacity: 1;
   background: black !important;
}

#hideMenuItemsDiv {
   background: rgb(19, 19, 56);
   z-index: 4;
   top: 121px;
   height: 536px;
}

#mainLanguageSectionContainer {
   position: absolute;
   top: 3%;
   left: 40%;
   background: rgb(29, 44, 71);
   color: white;
   z-index: 15;
   width: 44%;
   border: 1px solid rgb(0, 0, 0);
   text-align: center;
   padding-bottom: 30px;
   overflow: hidden;
   height: 75%;
}

.thisDivTitle {
   background: black;
   position: absolute;
   color: white;
   opacity: 0.7;
   top: 0px;
   right: 0px;
}

#glossarySearchResults .thisDivTitle {
   right: 18px;
   opacity: 0.2;
   background: none;
   bottom: 35px;
   top: unset;
   display: none;
}

#featureGroupOverlay #glossarySearchResults .thisDivTitle {
   top: 2px;
   bottom: unset;
   left: unset;
   right: 5px;
}

#glossaryPage[data-searchstatus="closed"] .thisDivTitle {
   display: none;
}

#languageSelection .thisDivTitle {
   bottom: 0px;
   top: unset;
}

#cc_cover[data-languageadmininfo="off"] .languageAdminInfo {
   display: none;
}

.languageSelectionTitle {
   background: black;
   text-align: center;
   padding: 7px 0px;
   border-bottom: 1px solid rgb(84, 84, 84);
   color: rgb(206, 203, 203);
}

.languageSelectionTitleText {
   margin-left: 20px;
   display: inline-block;
}

.selectionTitleText {
   display: inline-block;
   padding-top: 2px;
   vertical-align: top;
   height: 21px;
   line-height: 21px;
}

#toggleCursorNoneText {
   background: rgb(8, 19, 28);
   color: lightblue;
   width: 190px;
   border: 1px solid darkslateblue;
   display: none;
}

.toggleCursorNoneButton,
.grabSelectorButton {
   background: black;
   cursor: pointer;
   padding: 5px;
   display: none;
}

#languageToChange {
   margin-bottom: 1px;
   margin-left: 2px;
}

#page .cc_select[data-var="languageToChange"],
#page .cc_select[data-var="languageToChange"] .activeSelectOption,
#page .cc_select[data-var="languageToChange"] .caretDown {
   height: 21px;
   line-height: 21px;
}

#page .cc_select[data-var="languageToChange"] {
   border: 1px solid rgb(60, 60, 60);
   font-size: 10px;
   background: black;
   color: rgb(199, 199, 199);
   vertical-align: top;
}

.languageSelectionTitle select {
   border: 1px solid rgba(95, 93, 93, 0.63);
   color: rgb(206, 203, 203);
}

.allShortcutCheckboxes {
   text-align: left;
   min-height: 80px;
   max-height: 67%;
   height: calc(100% - 347px);
   overflow-y: auto;
   padding: 5px 5px 2px 4%;
}

.shortcutGroupsSection {
   display: inline-block;
   border: 1px solid rgba(35, 35, 35, 0);
   margin: 3px 7px 4px 3px;
   background: rgb(6, 8, 8);
   text-align: center;
   position: relative;
   text-transform: capitalize;
   width: 46%;
   color: rgb(224, 223, 223);
   font-size: 11px;
}

.shortcutGroupsSection[data-iscustom="true"] {
   text-transform: unset;
}

.shortcutGroupsSection .theCheckSection {
   background: rgb(4, 6, 23);
   width: 100%;
}

.shortcutGroupsSectionText {
   display: inline-block;
   width: calc(100% - 51px);
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
   vertical-align: top;
   font-size: 13px;
}

#languageDropdown {
   background: rgb(8, 25, 53);
   color: white;
   border: 1px solid gray;
}

.smallLanguageSelectionTitle {
   display: none;
}

.languageActivityButton {
   background: rgb(41, 32, 41);
   display: inline-block;
   padding: 2px 1px;
   border-radius: 1%;
   cursor: pointer;
   width: 27%;
   height: 21px;
   line-height: 14px;
   border: 1px solid rgb(30, 29, 29);
   transition: all 0.5s ease 0s;
   position: absolute;
   left: 5px;
   font-size: 10px;
   opacity: 0.5;
   top: 6px;
   overflow: hidden;
}

.languageActivityButton:hover {
   opacity: 1;
}

.languageActivityButton[data-active="active"] {}

.languageActivityButton.tempState {
   color: gray;
}

.languageActivityButton[data-active="inactive"] {
   background: rgb(25, 53, 52);
   opacity: 0.8;
}

.changeLanguageButton {
   background: rgba(143, 143, 143, 0.24);
   padding: 11px 5px;
   position: absolute;
   top: 0px;
   right: 0px;
   font-size: 0.8em;
   cursor: alias;
   height: 100%;
   line-height: 100%;
}

.oneSampleOuterLanguageButton .changeLanguageButton {
   line-height: 26px;
   padding: 0px 4px;
   cursor: default;
}

.changeLanguageButton i {
   cursor: alias;
}

.oneSampleOuterLanguageButton .changeLanguageButton,
.oneSampleOuterLanguageButton .changeLanguageButton i {
   cursor: default;
}

#defaultGroup,
#page .cc_select[data-var="currentLanguageDefault"] {
   background: rgb(4, 5, 37);
   color: rgb(206, 206, 206);
   border: 1px solid rgb(0, 0, 0);
   vertical-align: top;
   width: 165px;
}

#page .cc_select[data-var="currentLanguageDefault"] .activeSelectOption {
   text-transform: capitalize;
}

#page .cc_select[data-var="currentLanguageDefault"] .activeSelectOption[data-leavecaps="true"] {
   text-transform: unset;
}

#page .cc_select[data-var="currentLanguageDefault"],
#page .cc_select[data-var="currentLanguageDefault"] .activeSelectOption,
#page .cc_select[data-var="currentLanguageDefault"] .caretDown {
   height: 21px;
   line-height: 20px;
}

#defaultGroupLine {
   margin-top: 13px;
   color: lightgray;
   border-top: 1px solid rgba(82, 82, 82, 0.52);
   padding-top: 8px;
}

.selectTheLanguage {
   margin: 8px 0px;
   height: 23px;
   line-height: 21px;
   position: relative;
}

.activeSession {
   padding: 4px;
   text-align: center;
   background: rgb(25, 26, 27);
   margin-top: 10px;
}

#optionsWindow {
   position: relative;
   top: 82px;
   height: 81%;
   overflow: hidden;
   margin-left: 9%;
   width: 50%;
   background: rgb(38, 45, 63);
   border: 2px solid rgb(0, 0, 0);
   z-index: 35;
   color: white;
   display: none;
   transition: width 0.3s ease 0s;
}

#optionsWindow[data-currentoptions="savedSessions"] {
   background: rgb(33, 33, 36);
   border: 2px solid black;
}

#optionsWindow[data-currentoptions="savedSessions"] #filterSearchSection {
   background: rgb(21, 21, 21);
}

#optionsWindow[data-currentoptions="savedSessions"] .toggleDeleteMultipleButton,
#optionsWindow[data-currentoptions="savedSessions"] .optionsWindowClose {
   background: rgb(25, 33, 61);
}

#optionsWindow[data-currentoptions="savedSessions"] .sessionsContainerTitle {
   background: black;
}

#affectedShortcuts {
   position: fixed;
   top: 0px;
   width: 900px;
   background: rgb(3, 3, 37);
   height: 98px;
   border: 2px solid rgb(6, 67, 67);
   z-index: 700;
   left: 70px;
   color: white;
   padding: 8px;
   display: none;
}

.colorsAffected,
.shortcutsAffected,
.userChangeCounterSection {
   display: inline-block;
   border: 1px solid rgba(255, 255, 255, 0.43);
   margin: 4px;
   width: 34%;
   height: 70px;
   background: rgb(50, 41, 62);
   vertical-align: top;
   overflow: hidden;
}

.userChangeCounterSection {
   width: 220px;
   background: rgb(28, 24, 2);
}

@media only screen and (max-height: 850px) {
   #optionsWindow {
      top: 10px;
   }

   #optionsWindow #userSettingsContainer {
      overflow: hidden;
   }

   .logoutTextLink {}
}

.sessionsContainerTitle {
   background: rgb(24, 24, 29);
   text-align: center;
   padding: 3px;
   color: lightgray;
   position: relative;
}

#previewPageOptionsBackground .sessionsContainerTitle {
   font-size: 12px;
   padding: 0px;
   height: 26px;
   line-height: 26px;
}

#userSettingsContainer,
#savedSessionsContainer {
   height: calc(100% - 120px);
   position: relative;
}

#previewPage #savedSessionsContainer {}

.sessionRow,
#savedSessionsContainer .noSearchResults {
   background: rgb(17, 17, 24);
   border-top: none;
   overflow: hidden;
   border-bottom: 1px solid rgb(56, 55, 55);
   color: rgb(144, 206, 220);
   position: relative;
   min-height: 55px;
}

#savedSessionsContainer .sessionRow {
   width: 48%;
   display: inline-block;
   margin: 9px 1% 0px;
   color: rgb(197, 197, 197);
   font-size: 0px;
   border: 2px solid black;
}

#page[data-width="showingConsoles"] #savedSessionsContainer .sessionRow {
   width: 85%;
}

.newSessionRowArea {
   position: relative;
   left: 0px;
   border: 1px solid rgba(0, 220, 255, 0.3);
   height: 55px;
   width: 193px;
   overflow: hidden;
   display: none;
}

.sessionSnapshot {
   position: relative;
   width: 230px;
   display: inline-block;
   height: 170px;
   vertical-align: top;
   background: rgb(25, 26, 26);
   border: 1px solid black;
}

.sessionRowInfoContainer {
   border: none;
   display: inline-block;
   vertical-align: top;
   width: calc(100% - 231px);
   background: rgba(25, 25, 31, 0.88);
}

.infoContainerCell {
   height: 35px;
   white-space: nowrap;
   overflow: hidden;
   position: relative;
}

.newSessionDeleteMultiple {
   position: absolute;
   top: 0px;
   right: 0px;
   font-size: 11px;
   opacity: 0.2;
   transition: all 0.2s ease 0s;
   border: 1px solid green;
}

.sessionRow:hover .newSessionDeleteButton {}

.sessionRow:hover .newSessionDeleteButton:hover {
   opacity: 0.6;
   cursor: pointer;
   color: rgb(242, 178, 178);
}

.sessionRowInfoContainer,
.sessionSnapshot {
   height: 137px;
   border-bottom: none;
   border-top: none;
}

.snapTime {
   display: none;
}

.getSessionPicture {
   background: rgb(8, 43, 15);
   padding: 4px 8px;
   text-align: center;
   cursor: pointer;
   border: 1px solid gray;
   display: inline-block;
}

.infoContainerCellTitle,
.infoContainerCellContent {
   display: inline-block;
   font-size: 13px;
   line-height: 33px;
   height: 33px;
   overflow: hidden;
   vertical-align: top;
}

.infoContainerCellContent {
   padding-left: 8px;
}

.infoContainerCell[data-type="name"] .infoContainerCellContent {
   overflow: hidden;
   max-width: calc(100% - 135px);
   text-overflow: ellipsis;
}

.infoContainerCell[data-type="name"] .infoContainerCellContent:hover {
   text-decoration: underline;
   cursor: pointer;
}

.infoContainerCellTitle {
   width: 88px;
   padding-left: 8px;
   background: rgb(10, 17, 32);
   border-bottom: 1px solid rgb(41, 40, 40);
   height: 100%;
}

.infoContainerCell[data-type="description"] .infoContainerCellTitle {
   border-bottom: none;
}

#savedSessionsContainer .noSearchResults {
   padding: 0px 0px 0px 25px;
   line-height: 55px;
   color: lightgray;
}

.searchResultsContainerInner .sessionRow {
   overflow: hidden;
   height: unset;
}

.searchResultRow {
   display: none !important;
}

.sessionRow:nth-child(2n+1) {
   background: rgba(25, 25, 31, 0.88);
}

.sessionWindowSessionName {
   cursor: pointer;
   text-decoration: underline;
}

.newSessionDeleteButton,
.sessionCellCopySection {
   position: absolute;
   top: 6px;
   display: inline-block;
   height: 18px;
   width: 18px;
   text-align: center;
   line-height: 22px;
   cursor: pointer;
   font-size: 12px;
   transition: opacity 0.2s ease 0s;
   opacity: 0.2;
   right: 0px;
}

#previewPage .newSessionDeleteButton {
   display: none;
}

.sessionRow:hover .sessionCellCopySection:hover {
   opacity: 0.6;
}

.sessionRow:nth-child(2n+1) {
   background: rgba(25, 25, 31, 0.88);
   color: rgb(197, 197, 197);
}

.oneSearchResult {
   border: 1px solid rgba(4, 49, 101, 0.58);
   width: 46%;
   background: rgb(21, 23, 35);
   height: unset;
   display: inline-block;
   max-width: 520px;
   margin: 15px 19px 15px auto;
   text-align: left;
}

@media only screen and (min-width: 1500px) {

   #previewPage .functionCreationLines[data-type="jquery"] input,
   #previewPage .functionCreationLines[data-type="wordpress"] input,
   #previewPage .functionCreationLines[data-type="php"] input,
   #previewPage .functionCreationLines[data-type="javascript"] input {
      width: 131px;
      max-width: unset !important;
      /* border: 1px solid #00ffffad; */
   }

   .oneSearchResult {
      width: 530px;
      max-width: 530px;
      margin-top: 10px;
      margin-bottom: 10px;
   }

   .searchResultsContainerInner {
      text-align: center;
   }

   .oneSearchResult {
      text-align: left;
   }
}

.oneSearchResultCell {
   border-bottom: 1px solid rgba(0, 119, 255, 0.14);
   height: 27px;
   width: 100%;
   line-height: 27px;
   overflow: hidden;
   font-size: 11px;
   white-space: nowrap;
}

#searchSessionsContainer[data-shrinkboxes="yes"] .oneSearchResultCell {
   height: 22.3px;
}

.oneSearchResultCell.languages {
   border: none;
}

.oneSearchResultCell .searchResultKey {
   display: none;
}

.oneSearchResultCellTitle {
   background: black;
   display: inline-block;
   width: 109px;
   text-align: center;
   color: lightblue;
}

#searchSessionsContainer[data-shrinkboxes="yes"] .oneSearchResultCellTitle {
   width: 89px;
   font-size: 10px;
   text-align: left;
   padding-left: 8px;
}

#page[data-width="showingConsoles"] .oneSearchResultCell.nameAndCreator .oneSearchResultCellTitle {
   display: none;
}

#page[data-width="showingConsoles"] .searchResultCreator {
   background: black;
   color: orange;
}

.oneSearchResultCellContent {
   display: inline-block;
   color: rgb(191, 218, 227);
   padding-left: 6px;
   height: inherit;
}

.oneSearchResultCell .searchResultName,
.oneSearchResultCell .searchResultByWord,
.oneSearchResultCell .searchResultCreator {
   display: inline-block;
   height: 27px;
   line-height: 27px;
}

.oneSearchResultCell .searchResultName {
   color: cyan;
   padding-left: 8px;
}

.oneSearchResultCell .searchResultName:hover {
   cursor: pointer;
   text-decoration: underline;
}

.oneSearchResultCell .searchResultCreator {
   background: black;
   color: orange;
   vertical-align: top;
}

.searchResultCells,
.searchResultImage {
   display: inline-block;
   height: 110px;
   vertical-align: top;
   overflow: hidden;
}

.searchResultImage {
   width: 150px;
   border: 1px solid rgb(0, 0, 0);
   background: rgb(22, 40, 65);
}

.searchResultCells {
   width: calc(100% - 155px);
}

.moreResultsInfo,
.searchMessageAreaOldText {
   display: none;
}

#searchSessionsContainer[data-type="debug"] .moreResultsInfo,
#searchSessionsContainer[data-type="debug]"] .searchMessageAreaText {
   display: block;
}

.sessionRow[data-sessiontime="templates"] {
   display: none !important;
}

.searchResultsFalse {
   transition: color 0.5s ease 0s;
}

.sessionCell {
   border-top: none;
   display: inline-block;
   border-bottom: none;
   width: 20%;
   vertical-align: top;
   font-size: 13px;
   color: inherit;
   overflow: hidden;
   padding-top: 11px;
   height: 55px;
   white-space: nowrap;
   padding-left: 25px;
   text-align: left;
}

.searchResultsContainer .sessionCell {
   display: none;
}

#previewPage .sessionCell[data-title="Delete"] {
   display: none;
}

#previewPage .sessionCell {
   width: 14%;
   text-align: center;
   font-size: 1.1em;
}

.sessionCellDescription {
   overflow: hidden;
   text-overflow: ellipsis;
}

#previewPage .sessionCell[data-title="Session_Name"] {
   text-align: left;
}

.sessionCell[data-title="Time_Saved"] {}

.allSessionRows .sessionCell {
   padding-top: 17px;
}

.sessionCell[data-title="Session_Name"]:hover .sessionCellCopySection {
   opacity: 0.2;
}

.sessionCell[data-title="Session_Name"]:hover .sessionCellCopySection:hover {
   opacity: 0.7;
}

.sessionCell[data-celltype="heading"] {
   cursor: default;
   line-height: 16px;
}

#previewPage .sessionCell[data-celltype="heading"] {}

#savedSessionsContainer[data-descriptionoption="disable"] .sessionCell[data-title="Description"] {
   display: none;
}

#savedSessionsContainer[data-descriptionoption="disable"] .sessionCell {
   width: 25%;
}

.searchResultsContainerInner {
   height: calc(100% - 42px);
   background: rgb(17, 18, 18);
   overflow: hidden auto;
   text-align: center;
}

#searchSessionsContainer[data-shrinkboxes="yes"] {}

#searchSessionsContainer[data-shrinkboxes="yes"] .oneSearchResult {
   max-width: unset;
   width: 385px;
   margin-right: 10px;
}

#searchSessionsContainer[data-shrinkboxes="yes"] .searchResultsContainerInner {}

#searchSessionsContainer[data-shrinkboxes="yes"] .searchResultImage {
   width: 130px;
}

#searchSessionsContainer[data-shrinkboxes="yes"] .searchResultCells {
   width: calc(100% - 134px);
}

#searchSessionsContainer[data-shrinkboxes="yes"] .searchResultCells,
#searchSessionsContainer[data-shrinkboxes="yes"] .searchResultImage {
   height: 90px;
}

#searchSessionsContainer[data-makebigger="yes"] .oneSearchResultCell {
   height: 35px;
   line-height: 35px;
}

#searchSessionsContainer[data-makebigger="yes"] {
   background: rgba(3, 25, 1, 0.37);
}

#searchSessionsContainer[data-makebigger="yes"] .searchResultImage {
   width: 187px;
}

#searchSessionsContainer[data-makebigger="yes"] .searchResultCells {
   width: calc(100% - 195px);
}

#searchSessionsContainer[data-makebigger="yes"] .searchResultCells,
#searchSessionsContainer[data-makebigger="yes"] .searchResultImage {
   height: 140px;
}

#searchSessionsContainer[data-makebigger="yes"] .oneSearchResult {
   max-width: unset;
   width: 580px;
}

#searchSessionsContainer[data-makebigger="yes"] .oneSearchResultCell {
   height: 35px;
   line-height: 35px;
}

.searchResultsContainer {
   border: 1px solid rgb(39, 38, 38);
   height: calc(100% - 40px);
   background: rgb(6, 6, 6);
   overflow: hidden;
}

.searchResultsMessageArea {
   background: rgb(0, 0, 0);
   border-bottom: 2px solid rgb(87, 100, 119);
   padding: 9px;
   font-size: 14px;
   color: rgb(160, 180, 212);
}

.searchResultsMessageArea .showingResultsMessage {
   display: inline-block;
}

.searchResultsWord,
.globalSearchCountMessage,
.searchCountOfWord,
.searchAreaMessageString,
.searchCountOfWord,
.numbersThroughMessage {
   display: inline-block;
   padding: 0px 8px;
}

.globalSearchCountMessage {
   background: rgb(15, 56, 96);
   color: rgb(185, 233, 243);
}

.currentlySearchingTextOuter {
   display: inline-block;
}

.currentlySearchingTextInner,
.searchAreaMessageString {
   background: rgb(17, 29, 57);
   color: rgb(169, 209, 222);
   display: inline-block;
   padding: 0px 18px;
   margin-right: 26px;
}

.currentlySearchingTextInner {
   margin-right: 5px;
}

.numbersThroughMessage {
   background: rgb(8, 36, 5);
   color: rgb(186, 232, 246);
   padding: 0px 14px;
}

.searchCellTitle {
   background: black;
   height: 40px;
   line-height: 25px;
   border-bottom: 1px solid rgb(87, 85, 85);
}

.sessionCell:last-child {
   border-right: none;
}

.sessionDeleteContainer {
   position: absolute;
   left: 180px;
   bottom: 0px;
   width: 123px;
   background: rgb(59, 59, 66);
   overflow: hidden;
   height: 77px;
   opacity: 0.4;
   display: none;
}

.sessionsContainerHeading {
   background: rgb(4, 10, 13);
   color: white;
   position: relative;
   border-bottom: 1px solid rgb(132, 132, 132);
   height: 30px;
   overflow-y: hidden;
}

.newSearchPreferenceInfo {
   position: absolute;
   bottom: 80px;
   height: 300px;
   width: 60%;
   left: 0px;
   background: black;
   color: lightblue;
   z-index: 3;
   border: 3px solid cyan;
   padding: 8px;
   font-size: 18px;
}

.currentSearchPreferenceBox {
   display: inline-block;
}

.currentSearchPreferenceTitle {
   display: inline-block;
   vertical-align: top;
   padding-top: 3px;
}

#currentSearchPreference {
   border: 1px solid rgb(53, 53, 53);
   position: relative;
   top: 2px;
}

.toggleImageTestingArea {
   color: gray;
   opacity: 0.3;
   position: absolute;
   right: 8px;
   top: -4px;
   cursor: pointer;
   display: none;
}

#previewPage .sessionsContainerHeading {
   padding-bottom: 5px;
   height: 35px;
   background: black;
   color: lightgray;
   border: none;
}

.allSessionRows {
   height: calc(100% - 30px);
   overflow-y: auto;
   position: relative;
}

.newSessionDeleteMultiple {
   display: none;
   opacity: 1;
   cursor: pointer;
   height: 31px;
}

#optionsWindow[data-deletemultiple="yes"] .allSessionRows {
   border: 1px solid rgb(110, 57, 13);
   background: rgb(46, 33, 33);
   padding: 8px;
}

#optionsWindow[data-deletemultiple="yes"] .newSessionDeleteMultiple.altLocation {
   display: block;
   border: 1px solid black;
   z-index: 4;
   background: rgb(52, 27, 27);
   left: 15px;
   right: unset;
   bottom: 15px;
   top: unset;
   width: 130px;
   text-align: center;
}

.newSessionDeleteMultiple .canDelete {
   cursor: pointer;
}

#optionsWindow .newSessionDeleteMultiple.altLocation[data-deletedisabled="true"] {
   background: rgb(47, 47, 47);
}

.newSessionDeleteMultiple .deleteDisabled,
.deleteMultipleText {
   display: inline-block;
   background: inherit;
   height: 28px;
   line-height: 28px;
}

.newSessionDeleteMultiple .deleteDisabled {
   display: none;
   cursor: default;
}

#optionsWindow .newSessionDeleteMultiple.altLocation[data-deletedisabled="true"] .deleteDisabled {
   display: block;
}

#optionsWindow .newSessionDeleteMultiple.altLocation[data-deletedisabled="true"] .canDelete {
   display: none;
}

.multipleDeleteCheckboxes {
   display: inline-block;
}

#optionsWindow[data-deletemultiple="yes"] .newSessionDeleteButton {
   display: none;
}

#previewPage .allSessionRows {
   background: rgb(35, 35, 40);
}

.sessionCloseButton {
   position: absolute;
   right: 9px;
   top: 8px;
   font-size: 1.7em;
   cursor: pointer;
   color: rgb(134, 144, 148);
}

.sessionCloseButton.closeOptionsWindowOne {}

.sessionCloseButton.closeOptionsWindowOne {}

#previewPageOptionsBackground .sessionCloseButton {
   top: 0px;
   font-size: 13px;
   color: rgb(134, 134, 134);
}

#previewPageOptionsBackground.commonCoverClass[data-type="previewKeyboardShortcuts"] .sessionCloseButton {
   top: 2px;
}

.descriptionTitle .sessionCloseButton {
   top: 5px;
   color: rgb(164, 163, 163);
}

.languageCloseButton {
   position: absolute;
   right: 7px;
   top: 3px;
   font-size: 1.3em;
   cursor: pointer;
   color: rgb(133, 135, 136);
}

#mainLanguageSectionContainer .languageCloseButton {
   top: 8px;
}

.cc_example_box {
   background: black;
   position: fixed;
   height: 62px;
   overflow: hidden scroll;
   padding: 7px;
   z-index: 140000;
   width: 90%;
   bottom: 0px;
}

.cc_example_box::before {
   color: white;
   content: ".cc_example_box";
   position: absolute;
   right: 0px;
   bottom: 0px;
   background: rgba(128, 128, 128, 0.34);
}

.cleanMenu .cc_example_box {
   display: none;
}

.exampleVars {
   position: absolute;
   right: 35px;
   top: 0px;
   border: 1px solid gray;
}

.preferenceLine {
   padding: 8px 4px 8px 15px;
   background: rgb(8, 4, 23);
   border-top: 1px solid rgb(38, 38, 38);
   border-right: 1px solid rgb(38, 38, 38);
   border-left: 1px solid rgb(38, 38, 38);
   border-image: initial;
   position: relative;
   display: none;
   border-bottom: none;
}

.editorThemeOptionLine .preferenceLine {
   background: none;
   padding: 0px;
   border: none;
}

#previewColorSettings .preferenceLine,
#bottomPreviewColorSettings .preferenceLine {
   background: rgb(50, 59, 80);
}

#allPreviewSettingSections .preferenceLine {
   display: block;
   padding: 12px 6px 6px;
   white-space: nowrap;
   overflow: hidden;
}

#previewBarSettingsButtonsRow {
   background: rgb(16, 51, 73);
   padding: 8px;
}

.previewBarSettingsSaveButton {
   background: rgb(2, 9, 33);
   margin: 6px;
   display: inline-block;
   padding: 8px;
   cursor: pointer;
}

.previewSettingChoicesArea,
.onePreviewSettingChoice {
   display: inline-block;
   border: 1px solid lightgray;
   margin-right: 4px;
   height: 25px;
   vertical-align: top;
   overflow: hidden;
   color: lightgray;
}

.OLDpreviewPreferenceLineTitle {
   width: 200px;
   background: rgb(15, 55, 61);
   padding-left: 5px;
}

.onePreviewSettingChoice {
   cursor: pointer;
   background: black;
   padding: 0px 4px;
}

.previewSettingChoicesArea {
   padding: 0px 10px;
   background: rgb(11, 76, 69);
}

.preferenceLineMetaTitle {
   display: none;
   position: absolute;
   right: 0px;
   top: 11px;
   background: rgb(5, 60, 70);
   padding: 5px;
}

.deleteDescriptionsButton {
   background: rgb(21, 21, 22);
   display: inline-block;
   z-index: 4;
   margin-left: 10px;
   padding: 0px 6px;
   height: 26px;
   line-height: 26px;
   color: lightblue;
   cursor: pointer;
}

.preferenceLine:nth-child(2n+1) .preferenceLineMetaTitle {
   background: rgb(89, 53, 124);
}

.cleanMenu .preferenceLine {
   background: rgb(8, 4, 23) !important;
}

.preferenceLine.preferenceLineHidden {}

.preferenceLineHidden {}

.preferenceLine[data-thekey="languageOneDefault"] select,
.preferenceLine[data-thekey="languageTwoDefault"] select,
.preferenceLine[data-thekey="languageThreeDefault"] select,
.preferenceLine[data-thekey="languageFourDefault"] select {}

.preferenceLine[data-group="alpha_pg"] {
   display: block;
}

.preferenceLine select,
#page .isPreferenceArray {
   background: rgb(44, 42, 55);
   color: rgb(167, 166, 166);
   border: 1px solid rgb(0, 0, 0);
   min-width: 215px;
   height: 28px;
   vertical-align: top;
}

#codeCreate>.preferenceLine {
   display: none;
}

.cc_select[data-var="populateDefaultTemplatePreference"] {
   width: 265px;
}

#page .cc_select[data-var="importantButtonDisplay"],
#page .cc_select[data-var="snippetCopyButtons"],
#page .cc_select[data-var="styleEditorRenderMessage"] {
   width: 265px;
}

#page .cc_select[data-var="shiftFKey"],
#page .cc_select[data-var="altShiftFKey"],
#page .cc_select[data-var="altAndAlphaNumeric"],
#page .cc_select[data-var="altShiftAlphaNumeric"],
#page .cc_select[data-var="altAndNumpad"],
#page .cc_select[data-var="altShiftNumpad"] {
   width: 270px;
}

#page .cc_select[data-var="sessionBackupSelect"],
#page .cc_select[data-var="scratchBackupSelect"],
#page .cc_select[data-var="shortcutBackupSelect"] {
   width: 46%;
}

#page .isPreferenceArray {
   padding-left: 6px;
}

#selectRegion {
   width: 100px;
   margin-right: 5px;
}

.preferenceLine option {
   background: rgb(41, 39, 53);
   color: rgb(179, 179, 179);
}

.preferenceLineVar {
   position: absolute;
   right: 0px;
   top: 3px;
   opacity: 0.2;
}

.preferenceLineTitle,
.previewPreferenceLineTitle {
   width: 32%;
   cursor: default;
   display: inline-block;
   opacity: 0.8;
   border: 1px solid rgba(255, 255, 255, 0.27);
   white-space: nowrap;
   overflow: hidden;
   height: 28px;
   line-height: 28px;
   vertical-align: top;
   text-overflow: ellipsis;
}

.editorThemeOptionLine .preferenceLineTitle {
   display: none;
}

#allTopBarSettings .preferenceLineTitle,
.previewPreferenceLineTitle {
   width: 257px;
   font-size: 12px;
}

.cleanMenu .preferenceLineTitle,
.previewPreferenceLineTitle {
   border: none;
}

.logoTextEntryToggleIcon {
   display: inline-block;
   font-size: 20px;
   color: lightblue;
   cursor: pointer;
   margin-left: 15px;
   opacity: .6;
   transition: .3s opacity;
}

.logoTextEntryToggleIcon:hover {
   opacity: 1;
}

.preferenceLine[data-meta="preview_fullLogoText"][data-shown="yes"] .logoTextEntryToggleIcon,
.preferenceLine[data-meta="preview_partialLogoText"][data-shown="yes"] .logoTextEntryToggleIcon,
.preferenceLine[data-thekey="logoAreaPartialTextOption"][data-shown="yes"] .logoTextEntryToggleIcon,
.preferenceLine[data-thekey="logoAreaFullTextOption"][data-shown="yes"] .logoTextEntryToggleIcon {
   transform: rotate(180deg);
}

.logoCustomTextArea {
   border: 1px solid #c1c1a300;
   width: 100%;
   overflow: hidden;
   text-align: right;
   padding: 6px;
}

#custom_preview_partialLogoText,
#custom_preview_fullLogoText,
#custom_logoAreaFullTextOption,
#custom_logoAreaPartialTextOption {
   background: black;
   border: none;
   outline: none;
   height: 29px;
   color: lightblue;
   width: 200px;
   margin-right: 27px;
   border: 1px solid #d3d3d33d;
}

.logoCustomTextGo {
   display: inline-block;
   background: #29293b;
   padding: 0px 8px;
   cursor: pointer;
}

#page .previewPreferenceLineTitle {
   width: 190px;
   text-overflow: ellipsis;
}

.preferenceLineCustomSettings {
   position: relative;
   top: 3px;
   display: inline-block;
   margin-left: 10px;
   color: lightblue;
   cursor: pointer;
}

.cleanMenu .halfHide,
.cleanMenu .preferenceLineVar,
.cleanMenu .dropdownCount {
   display: none;
}

.reorganizationArrows {
   display: inline-block;
   position: absolute;
   right: 8px;
}

.reorganizeTopButonUp,
.reorganizeTopButonDown {
   display: inline-block;
   cursor: pointer;
   font-size: 17px;
   color: rgb(182, 182, 182);
}

.reorganizeTopButonUp {
   margin-right: 8px;
}

.maximizeCheckboxes {
   display: inline-block;
   width: 60%;
   min-height: 80px;
   border: 1px solid green;
}

.optionsPerLanguageContainer {
   width: 64%;
}

.languageAccentBoxCover {
   display: none;
}

.optionsPerLanguageContainer[data-active="inactive"] .languageAccentBoxCover {
   display: block;
}

.cleanMenu .maximizeCheckboxes {
   border: none;
}

.maximizeCheckboxContainer {
   display: inline-block;
   width: 47%;
   margin: 2px;
}

.maximizeCheckSectionLabel {
   width: calc(100% - 28px);
   text-align: center;
   position: relative;
   display: inline-block;
   white-space: nowrap;
}

.normalMaximizeContainer .maximizeCheckSectionLabel {
   overflow: hidden;
   text-overflow: ellipsis;
   top: 3px;
}

.maximizeCheckLabelAbbreviation {
   display: none;
}

.hideGroupButton {
   position: absolute;
   top: 0px;
   right: 8px;
   cursor: pointer;
   font-size: 0.7em;
   color: rgb(177, 175, 175);
   display: block;
   transition: opacity 0.1s ease 0s;
}

#page .newCheckInput+.hideGroupButton {
   background: green;
   color: white;
}

#page .newCheckInput[value="true"]+.hideGroupButton {
   background: red;
}

.shortcutGroupsSection:hover .hideGroupButton {
   display: block;
}

#languageSelection .languageAdminInfo.ltc {
   position: absolute;
   bottom: 22px;
   background: rgb(81, 55, 69);
   padding: 8px;
}

.toggleActiveButton {
   cursor: pointer;
   background: rgb(25, 29, 59);
   width: 40%;
   margin-left: 2%;
   display: inline-block;
   border: 1px solid rgba(0, 0, 0, 0.43);
}

.unhideGroupIndividual,
.hideGroupIndividual {
   background: rgb(19, 20, 23);
   border: 1px solid black;
   margin: 4px 0px;
   cursor: pointer;
   font-size: 12px;
   padding: 2px 0px;
   overflow: hidden;
   width: 100%;
}

.changeLanguageOptionWindow {
   text-align: center;
   background: rgb(10, 39, 62);
   min-height: 280px;
   width: 32%;
   position: absolute;
   left: 2%;
   top: 3%;
   display: none;
   border: 1px solid black;
   color: rgb(236, 236, 236);
   height: 75%;
}

#extraLanguageOptionContainer[data-currentlanguageoptionsection="customGroups"] {
   background: rgba(2, 2, 2, 0.56);
   min-height: unset;
   height: 304px;
}

#page[data-width="showingConsoles"] #extraLanguageOptionContainer[data-currentlanguageoptionsection="customGroups"] {
   width: 20%;
}

.customGroupSection {
   height: 251px;
   margin-top: 24px;
   background: rgb(39, 57, 91);
   z-index: 30;
   position: relative;
   width: 82%;
   border: 1px solid black;
   left: 10%;
   font-size: 1.3em;
}

.customGroupsSectionTitle {
   background: black;
   height: 28px;
   line-height: 28px;
   color: lightgray;
   position: relative;
   cursor: default;
   margin-bottom: 17px;
}

#languageShortcutInput {
   background: black;
   color: rgb(219, 216, 216);
   border: 1px solid rgb(3, 3, 3);
   max-width: 95%;
   margin-bottom: 7px;
}

.addCustomGroupButton {
   background: rgb(52, 52, 74);
   color: lightgray;
   border: 1px solid rgb(24, 24, 24);
   margin-left: 10px;
   margin-top: 6px;
   margin-bottom: 6px;
   padding: 3px 24px;
}

.divButton.addCustomGroupButton {}

.customGroupsCloseButton {
   position: absolute;
   top: 1px;
   right: 8px;
   font-size: 12px;
   color: rgb(132, 134, 135);
   cursor: pointer;
}

.groupDisplaySection {}

.customGroupDeleteSection {}

#customGroupToDelete,
#page .cc_select[data-var="customGroupToDelete"] {
   background: rgb(28, 28, 28);
}

#page #customGroupDeleteButton {
   background: rgb(59, 1, 1);
   margin-left: 15px;
}

#page #customGroupToDelete,
#page #customGroupDeleteButton,
#page .cc_select[data-var="customGroupToDelete"] {
   line-height: 25px;
   height: 25px;
   vertical-align: top;
   padding: 0px 9px;
   border: 1px solid black;
   color: lightgray;
   position: relative;
   min-width: 80px;
}

.cc_select[data-var="customGroupToDelete"] {
   min-width: 50% !important;
}

#page .cc_select[data-var="customGroupToDelete"] .activeSelectOption,
#page .cc_select[data-var="customGroupToDelete"] .caretDown {
   line-height: 25px;
   height: 25px;
}

.hiddenShownSectionTitle {
   text-decoration: underline;
   background: rgb(9, 20, 39);
   font-size: 13px;
   color: rgb(181, 179, 179);
   border-bottom: 1px solid rgb(47, 46, 46);
   cursor: default;
}

.hiddenGroupColumn {
   background: rgb(44, 56, 84);
   border-right: 1px solid rgb(0, 0, 0);
}

.shownGroupColumn {
   background: rgb(44, 56, 84);
}

.hideUnhideGroupColumn {
   width: 50%;
   display: inline-block;
   height: 100%;
   overflow: hidden;
   vertical-align: top;
}

#shortcutGroupDisplaySection {
   height: 100%;
   font-size: 0px;
}

.toggleActiveCustom {
   margin-top: 10px;
   background: rgb(50, 54, 71);
}

.currentLanguageOptionSection {
   background: rgb(107, 87, 21);
   padding: 8px;
   font-size: 15px;
   display: none;
}

.hiddenAndShownSections {
   width: 96%;
   display: inline-block;
   color: white;
   vertical-align: top;
   overflow-y: auto;
}

.optionsWindowClose,
#page .viewPrintableList {
   background: rgb(10, 18, 50);
   margin-top: 20px;
   margin-left: 50%;
   padding: 3px 9px;
   border: 1px solid rgba(0, 0, 0, 0.7);
   left: 50%;
   color: rgb(230, 230, 230);
   vertical-align: top;
   height: 30px;
}

.keyboardShortcutsLocation {
   position: absolute;
   opacity: 0.2;
   top: 62px;
   height: 31px;
   bottom: 0px;
   left: 300px;
   font-size: 9px;
}

#page .viewPrintableList {
   margin: 0px 0px 0px 6px;
   height: 30px;
   line-height: 23px;
   display: inline-block;
   vertical-align: top;
}

#previewPageOptionsBackground .optionsWindowClose {
   margin: 1px auto 0px;
   position: relative;
   font-size: 11px;
   border: 1px solid black;
   color: rgb(195, 195, 195);
}

.toggleDeleteMultipleButton,
.finalizeDeleteMultipleButton {
   display: inline-block;
   background: rgba(31, 5, 5, 0.83);
   position: absolute;
   right: 15px;
   cursor: pointer;
   padding: 4px 12px;
   color: lightgray;
   border: 1px solid rgb(0, 0, 0);
   border-radius: 0px;
   height: 30px;
   vertical-align: top;
}

.finalizeDeleteMultipleButton {
   display: none;
}

#optionsWindow[data-deletemultiple="yes"] .finalizeDeleteMultipleButton {
   display: inline-block;
}

.invisibleButtonOverlayDeletion {
   background: rgb(30, 30, 30);
   height: 100%;
   width: 100%;
   position: absolute;
   top: 0px;
   left: 0px;
}

.finalizeDeleteMultipleButton[data-disabled="yes"] {
   color: gray;
   cursor: default;
}

.invisibleButtonOverlayDeletion {
   display: none;
}

.finalizeDeleteMultipleButton[data-disabled="yes"] .invisibleButtonOverlayDeletion {
   display: block;
   opacity: 0.7;
}

.toggleDeleteMultipleButton {
   background: rgb(9, 20, 55);
   right: 110px;
   border: 1px solid black;
}

.hideShowMenuItems {
   background: rgb(4, 14, 23);
   border: 1px solid rgb(90, 89, 89);
   position: absolute;
   color: gray;
   left: 10px;
   height: 22px;
   line-height: 22px;
   padding: 0px 6px;
   top: 7px;
   opacity: 0.65;
   transition: opacity 0.2s ease 0s;
}

.hideShowMenuItems.customizeBarItems,
.hideShowMenuItems.showKeyboardShortcuts,
.hideShowMenuItems.showShortcutManager {
   left: 15px;
   top: 54px;
}

.hideShowMenuItems.showKeyboardShortcuts {
   top: 27px;
}

.hideShowMenuItems.showShortcutManager {
   top: 0px;
}

.titleHideShow {
   background: rgb(91, 91, 87);
   color: white;
}

.hideShowMenuItems:hover {
   opacity: 1;
}

.logoutTextLink {
   left: unset;
   right: 10px;
   line-height: 2px;
   color: white;
   transition: opacity 0.4s ease 0s;
}

a.logoutTextLink {
   color: rgb(139, 139, 139);
   font-size: 13px;
   height: 20px;
   opacity: 0.2;
   line-height: 20px;
   padding: 0px 19px;
}

.logoutTextLink:hover {
   opacity: 0.6;
}

#description {
   background: black;
   color: rgb(197, 196, 196);
   border: none;
   resize: none;
   height: 100%;
}

#jsc_box {
   background: rgb(31, 31, 31);
   height: 143px !important;
}

.addNewShortcutPlus {
   line-height: 25px;
}

.transparentDropdownOverlay {
   position: absolute;
   top: 0px;
   left: 0px;
   width: 100%;
   height: 100%;
   z-index: 3;
   background: rgba(220, 29, 192, 0);
   opacity: 1;
   cursor: pointer;
}

.transparentDropdownOverlay[data-status="hideAndActive"] {
   opacity: 0 !important;
}

#page .finishedDropdownOverlay {
   width: 100%;
   background: rgb(105, 255, 22);
   opacity: 0.2;
}

.cc_select[data-var="newSessionPrivacySetting"],
.cc_select[data-var="newSessionTemplate"] {
   border: 1px solid dimgray;
}

.cc_select[data-var="condensedModuleOne"],
.cc_select[data-var="condensedModuleTwo"],
.cc_select[data-var="currentCondensedProportions"] {
   background: black;
   border: 1px solid rgb(23, 23, 23);
   width: 150px;
   text-align: center;
}

.condensedModuleOptionsTitle {
   width: 95px;
   display: inline-block;
   height: 30px;
   line-height: 30px;
   vertical-align: top;
}

.condensedOrientationSelectButton {
   background: black;
   display: inline-block;
   height: 30px;
   line-height: 30px;
   width: 73px;
   text-align: center;
   cursor: pointer;
   opacity: 0.35;
   font-size: 10.5px;
}

.condensedOrientationSelectButton[data-active="true"] {
   background: rgb(2, 2, 25);
   color: rgb(135, 162, 184);
   border: 1px solid rgba(135, 162, 184, 0.77);
   opacity: 1;
   font-weight: 600;
}

#condensedPresetName {
   background: black;
   color: rgb(193, 193, 193);
   border: none;
   width: 150px;
   font-size: 11px;
}

.cc_select[data-var="newSessionPrivacySetting"],
.cc_select[data-var="newSessionTemplate"],
.cc_select[data-var="newSessionVanityLinkSetting"] {
   border: 1px solid rgb(50, 50, 50);
   background: rgb(27, 29, 33);
   color: lightgray;
   width: 45%;
   position: relative;
}

.cc_select[data-var="newSessionVanityLinkSetting"] {
   text-transform: capitalize;
}

#page .transparentDropdownOverlay.inactive {
   opacity: 0.8;
   background: rgb(53, 5, 5);
}

#customGroupDeleteButton .transparentDropdownOverlay.inactive {
   background: rgb(0, 0, 0);
   opacity: 0.6;
   cursor: default;
}

#transparencySlider,
#sliderTransparent {
   position: absolute;
   bottom: 3px;
   height: 12px;
   width: 93%;
   left: 3%;
   cursor: default;
   z-index: 2;
}

#sliderTransparent {
   border: 1px solid rgba(0, 0, 0, 0.26);
   border-radius: 5px;
}

#transparencySlider {
   background: linear-gradient(to right, rgba(152, 107, 107, 0), rgb(90, 50, 15)) transparent;
   border: none;
}

#transparencySlider .ui-slider-handle {
   top: -2px;
   background: rgb(45, 44, 44);
   height: 15px;
   width: 11px;
   border: 1px solid rgb(153, 153, 153) !important;
}

#sldParent {
   border: 1px solid black !important;
}

.sldSibling {}

.sldSibling>div {}

#sliderTransparent {
   z-index: 1;
   overflow: hidden;
}

#sliderTransparent img {
   opacity: 0.2;
}

#transparentBackground {
   position: absolute;
   opacity: 0.2;
   z-index: 1;
   overflow: hidden;
   background: blue;
}

#transparentBackground img {
   display: block;
}

#jsc_padB {
   opacity: 0.4;
   z-index: 2;
   border: 1px solid black !important;
}

#jsc_padM {
   z-index: 5;
}

#jsc_section {
   border-radius: 0px !important;
   background: none !important;
   border: 1px solid black !important;
}

#page .colorRow {
   background: rgb(4, 4, 85);
   padding: 8px;
   color: rgb(233, 233, 233);
   margin-bottom: 8px;
   border: 1px solid gray;
   width: 100%;
   height: unset;
   line-height: unset;
   font-size: unset;
}

#colorRows {
   background: rgb(45, 67, 81);
   right: 0px;
   overflow: hidden;
}

#colorInputButton,
#colorInputButton2,
.colorInputButton {
   height: calc(100% + 6px);
   width: calc(100% + 10px);
   position: relative;
   z-index: 2;
   border: none;
   top: 0px;
   left: -5px;
}

.colorDiv {
   display: inline-block;
   border: 1px solid gray;
   width: 180px;
}

.colorDivTitle {
   width: 90px;
   border: 1px solid white;
   display: inline-block;
   padding: 4px;
}

#slider {
   width: 70%;
   margin-left: 5%;
   margin-top: 5%;
   margin-bottom: 5%;
   background: darkslateblue;
}

#theColorsDiv {
   margin-top: 40px;
   background: rgb(39, 41, 43);
   color: white;
   border: 1px solid gray;
   padding: 10px;
}

#theColorsDiv #colorFormat,
#colorFormat,
#page .cc_select[data-var="colorFormat"],
#page .cc_select[data-var="persistentPickerFormat"] {
   background: rgb(44, 45, 52);
   border: 1px solid rgb(50, 50, 50);
   color: lightgray;
   margin-bottom: 3px;
}

#page .cc_select[data-var="colorFormat"],
#page .cc_select[data-var="colorFormat"] .activeSelectOption,
#page .cc_select[data-var="colorFormat"] .caretDown {
   height: 28px;
   line-height: 28px;
}

#page .cc_select[data-var="colorFormat"] {
   text-align: center;
}

.cc_select[data-var="colorFormat"] {
   width: 90px;
}

#formattedVar {
   background: rgb(30, 45, 67);
   padding: 2px;
   color: white;
   width: 200px;
}

.colorDivRow {
   background: rgb(27, 30, 53);
   text-align: center;
   border-bottom: 1px solid rgba(156, 156, 156, 0.1);
   height: 60px;
   padding-top: 5px;
   position: relative;
}

.colorInputSection {
   display: inline-block;
   position: relative;
   max-width: calc(100% - 60px);
   overflow: hidden;
   vertical-align: top;
}

#entire_shortcuts[data-width="small"] .colorInputSection {
   max-width: calc(100% - 40px);
}

.colorRowDivInputs {
   display: inline-block;
   width: calc(100% - 168px);
   vertical-align: top;
   height: 50px;
   line-height: 50px;
   max-width: 300px;
}

#entire_shortcuts[data-width="medium"] .colorRowDivInputs {
   font-size: 0.8em;
}

#entire_shortcuts[data-width="small"] .colorRowDivInputs {
   font-size: 0.7em;
   width: calc(100% - 132px);
}

.colorRowDivInputs .fas {
   color: rgb(186, 188, 208);
   margin-right: 3px;
   top: 3px;
   position: relative;
}

#allColorRows .colorDivRow input,
.nameFormatColorOverlay {
   height: 33px;
   background: rgb(33, 32, 32);
   color: rgb(172, 175, 177);
   border: 1px solid rgba(88, 87, 87, 0.36);
   padding: 3px 14px;
   border-radius: 3%;
   display: inline-block;
}

#allColorRows .colorDivRow input {
   width: 100%;
}

.nameFormatColorOverlay {
   position: absolute;
   background: rgb(30, 37, 50);
   height: 36px;
   top: 8px;
   line-height: 34px;
   left: 0px;
   overflow: hidden;
   opacity: 1;
   border: 1px solid rgba(0, 0, 0, 0.84);
}

.colorInputSection .nameFormatColorOverlay {
   width: 100%;
}

.halfColorFormatText {
   display: none;
}

#entire_shortcuts[data-width="small"] .halfColorFormatText {
   display: inline-block;
}

#entire_shortcuts[data-width="small"] .fullColorFormatText {
   display: none;
}

.colorDivRowOption {
   background: black;
   height: 48px;
   line-height: 40px;
   color: rgb(173, 173, 173);
   overflow: hidden;
}

#page #entire_shortcuts[data-width="small"] .colorDivRowOption {
   text-align: left;
   padding-left: 9px;
}

.buttonBackground img,
.persistentPickerButton img,
#persistentVisualButton img {
   position: absolute;
   top: 0px;
   left: 0px;
   max-width: unset;
   z-index: 0;
}

.persistentPickerButton img,
#persistentVisualButton img {
   z-index: 0;
   width: 240px;
   height: 240px;
   transform: unset !important;
}

.buttonBackground {
   overflow: hidden;
   position: relative;
   display: inline-block;
   width: 50px;
   height: 50px;
}

#page #entire_shortcuts[data-width="small"] .buttonBackground {
   width: 26px;
   height: 26px;
   margin-top: 7px;
}

.colorRowsTitle {
   text-align: center;
   padding: 6px 0px;
   color: white;
   background: black;
   position: relative;
   height: 34px;
}

.colorRowsToggle {
   color: white;
   position: absolute;
   right: 5px;
   top: 3px;
   cursor: pointer;
   opacity: 0.4;
}

.sliderValueDiv {
   background: gray;
   opacity: 0.7;
   display: inline-block;
   padding: 15px;
   vertical-align: top;
}

.extraColorInfo {
   display: none;
}

.colorDivRowTitle {
   line-height: 51px;
   display: inline-block;
   vertical-align: top;
   width: 60%;
}

#codeCreate .colorDivRow .colorShortcutKey {
   width: 12%;
   background: rgb(45, 47, 68);
   font-size: 1.3em;
   border: 1px solid rgba(57, 57, 57, 0.65);
   color: rgb(202, 199, 199);
   text-align: center;
   padding: 0px;
   border-radius: 5%;
   margin-left: 2%;
   margin-right: 1%;
   height: 33px;
}

#codeCreate .newSetName {
   background: black;
   color: gray;
   border: 1px solid rgb(60, 60, 60);
}

.createNewSetButton {
   background: rgb(40, 62, 90);
   margin: 0px 4px;
}

.cancelNewSetButton {
   background: rgb(35, 12, 18);
   margin: 0px;
}

#shortcutSet {
   background: black;
   color: gray;
   display: none;
}

#entire_shortcuts .shortcut_input,
#entire_shortcuts .snippet_input {
   width: 55px;
   background: black;
   border: 1px solid rgba(105, 105, 105, 0.05);
   color: rgb(171, 171, 171);
   text-align: center;
}

#entire_shortcuts .shortcut_input {}

#entire_shortcuts .snippet_input {
   width: calc(100% - 187px);
   margin-left: 3px;
   text-align: left;
}

#entire_shortcuts[data-width="small"] .snippet_input,
#entire_shortcuts[data-width="small"] .shortcut_input {
   font-size: 0.85em;
}

#entire_shortcuts[data-width="small"] .snippet_input {
   width: calc(100% - 137px);
}

#entire_shortcuts .temporaryValues {
   background: rgb(5, 13, 23);
   border: 1px dashed rgba(223, 223, 223, 0.21);
   cursor: pointer;
}

.shortcutRowTitle {
   width: 20px;
   display: inline-block;
}

.select_shortcut_title,
.select_snippet_title {
   border: 1px solid dimgray;
   background: rgb(10, 45, 68);
   color: rgb(234, 234, 234);
   display: inline-block;
   margin-left: 51px;
   width: 38px;
   text-align: center;
}

.select_snippet_title {
   margin-left: 0px;
   width: 120px;
}

.multiplier {
   display: inline-block;
   background: rgb(44, 63, 128);
   padding: 5px;
   width: 130px;
   margin: 3px 0px;
   position: relative;
}

.multiplier .multiplierDisabled {
   background: black;
   opacity: 0.8;
   cursor: default;
   position: absolute;
   top: 0px;
   left: 0px;
   height: 100%;
   width: 100%;
   z-index: 3;
}

.currentUnit {
   background: rgb(29, 76, 107);
   display: inline-block;
   padding: 5px;
   width: 122px;
   margin: 3px 0px;
}

.measurementChangeSection,
.measurementChangeSection * {
   cursor: pointer;
}

.measurementChangeSection {
   position: relative;
   width: 25px;
   height: 23px;
   display: inline-block;
   vertical-align: top;
}

.measurementChangeIcon {
   position: absolute;
   top: -2px;
   line-height: 0px;
   left: 8px;
   font-size: 20px;
}

.measurementChangeIconComma {
   top: -3px;
}

.measurementChangeArrow {
   font-size: 9px;
   width: 100%;
   position: absolute;
   bottom: 2px;
   line-height: 11px;
   height: 11px;
   z-index: 5;
   overflow: hidden;
   opacity: 0.3;
   color: rgb(49, 192, 238);
   cursor: pointer;
}

.currentUnit.hidden {
   width: 0px;
   overflow: hidden;
   padding: 0px;
}

.currentUnit.hidden * {
   display: none;
}

.locationDiv {
   display: inline-block;
   position: relative;
   padding: 4px 4px 7px;
   width: 25%;
   background: rgb(31, 35, 57);
   text-align: center;
   border: 1px solid rgb(31, 31, 31);
   font-size: 10.5px;
}

#entire_shortcuts[data-width="small"] .locationContainer .directionName {
   top: 7px;
   position: relative;
}

.locationContainer {
   height: unset !important;
}

.font0 {
   font-size: 0px;
}

.locationActiveDiv {
   background: rgb(20, 62, 93);
   border: 1px solid rgb(35, 35, 35);
}

.locationSubActiveDiv {
   background: rgb(20, 62, 93);
   border: 1px dashed white;
   opacity: 0.3;
}

.letterIndicator {
   position: absolute;
   right: 2px;
   top: 1px;
   background: rgba(0, 0, 0, 0.2);
   border: 1px solid black;
   padding: 0px 6px;
}

.shortcutButtonsRow .letterIndicator {
   height: 16px;
   width: 16px;
   top: 3px;
   overflow: hidden;
   font-size: 10px;
   padding: 0px;
   line-height: 16px;
   right: 3px;
}

.theShortcutsDiv .letterIndicator {
   height: 14px;
   line-height: 14px;
   width: 14px;
   text-align: center;
   right: 3px;
   padding: 0px;
   top: 2px;
   background: rgb(66, 75, 117);
   font-size: 0.8em;
}

.arrowIndicator {
   position: absolute;
   left: 12px;
   top: 5px;
   display: none;
}

.locationSubActiveDiv .arrowIndicator {
   display: block;
   cursor: alias;
}

.directionName {
   text-transform: capitalize;
   display: inline-block;
}

.invalidShortcut {
   background: black;
   color: rgb(255, 90, 70);
   display: inline-block;
}

.clearLocationSelection {
   text-align: center;
   background: rgb(3, 12, 21);
   padding: 2px;
   font-size: 10.5px;
}

.heightWidthDiv {}

.marginOrPadding,
.borderOrOutline {
   display: inline-block;
}

.marginContainer,
.paddingContainer,
.borderContainer,
.outlineContainer,
.minContainer,
.maxContainer,
.clearMinMax,
.defaultSizeContainer,
.heightContainer,
.widthContainer {
   background: rgb(24, 29, 58);
   position: relative;
   display: inline-block;
   margin-left: 3px;
   padding: 0px 34px 0px 4px;
   border: 1px dashed gray;
   cursor: pointer;
   width: 130px;
   opacity: 0.5;
   height: 20px;
   line-height: 20px;
   font-size: 0.9em;
   margin-bottom: 3px;
}

.stylesActiveSwitch {
   background: rgb(30, 37, 101);
   opacity: 1;
   border: 1px solid rgb(76, 76, 76);
}

.enterCustomValue {
   background: rgb(30, 30, 43);
   text-align: center;
   cursor: pointer;
   color: white;
   padding: 5px;
   white-space: nowrap;
   overflow: hidden;
   position: relative;
}

#entire_shortcuts[data-activeshortcuts="border-outline"] .enterCustomValue {
   cursor: default;
}

#entire_shortcuts[data-width="medium"] .enterCustomValue,
#entire_shortcuts[data-width="small"] .enterCustomValue {
   font-size: 10px;
}

#entire_shortcuts[data-width="medium"] .CSSColorList,
#entire_shortcuts[data-width="small"] .CSSColorList,
#entire_shortcuts[data-width="tiny"] .CSSColorList,
#entire_shortcuts[data-width="medium"] .currentBasicColors,
#entire_shortcuts[data-width="small"] .currentBasicColors,
#entire_shortcuts[data-width="tiny"] .currentBasicColors {
   border: 1px solid rgb(64, 64, 63);
   width: 80%;
   height: 37%;
   margin-bottom: 18px;
}

#entire_shortcuts[data-width="medium"] .css_color_rows,
#entire_shortcuts[data-width="small"] .css_color_rows,
#entire_shortcuts[data-width="tiny"] .css_color_rows {
   height: calc(100% - 85px);
}

#entire_shortcuts[data-width="small"] .shortcutsWord,
#entire_shortcuts[data-width="small"] .shortcutsWord,
#entire_shortcuts[data-width="veryTiny"] .shortcutsWord,
#entire_shortcuts[data-width="small"] #switchActiveKeyboardKey,
#entire_shortcuts[data-width="tiny"] #switchActiveKeyboardKey,
#entire_shortcuts[data-width="veryTiny"] #switchActiveKeyboardKey,
#entire_shortcuts[data-width="small"] .languageDisplayName,
#entire_shortcuts[data-width="tiny"] .languageDisplayName,
#entire_shortcuts[data-width="veryTiny"] .languageDisplayName {
   display: none;
}

#entire_shortcuts[data-width="small"] .languageDisplayNameAbbreviated,
#entire_shortcuts[data-width="tiny"] .languageDisplayNameAbbreviated,
#entire_shortcuts[data-width="veryTiny"] .languageDisplayNameAbbreviated {
   display: inline-block;
}

#editBasicColorsDialog,
#allUserShortcutDialog {
   background: rgb(32, 37, 75);
   position: absolute;
   top: 0px;
   left: 0px;
   border: 1px solid rgb(69, 69, 69);
   width: 100%;
   height: 100%;
   opacity: 1;
   z-index: 8;
   display: none;
}

#allUserShortcutDialog {
   display: none;
   position: fixed;
   right: 0px;
   background: rgba(25, 25, 26, 0.9);
   overflow: hidden;
   top: 0px;
   height: 100%;
   border: 3px solid rgb(13, 37, 94);
   width: 100%;
   color: lightgray;
   z-index: 570;
}

.allUserShortcutInner {
   border: 1px solid rgba(94, 94, 94, 0.54);
   height: calc(100% - 100px);
   overflow: hidden;
   position: relative;
   width: 80%;
   margin-left: 10%;
   background: rgb(6, 29, 50);
}

.shortcutManagerClose {
   position: absolute;
   right: 34px;
   top: 5px;
   cursor: pointer;
   background: rgba(128, 0, 0, 0.37);
   height: 33px;
   overflow: hidden;
   line-height: 33px;
   font-size: 15px;
   padding: 0px 8px;
}

.allUserShortcutTitle {
   background: rgb(0, 0, 0);
   position: relative;
   margin-top: 30px;
   text-align: center;
   height: 42px;
   font-size: 20px;
   line-height: 42px;
   width: 80%;
   margin-left: 10%;
}

.allUserShortcutTitle i {
   cursor: pointer;
}

#page[data-width="showingConsoles"] #allUserShortcutDialog {
   width: calc(100% - 444px);
}

.editBasicColorsTitle {
   background: black;
   text-align: center;
   margin-bottom: 20px;
}

.editBasicColorsCover {
   background: rgb(32, 36, 45);
   position: absolute;
   top: 0px;
   left: 0px;
   width: 100%;
   height: 100%;
   z-index: 15;
   padding: 20px;
   display: none;
}

#allSessionRowsCover {
   background: rgba(0, 0, 0, 0.85);
   position: absolute;
   top: 0px;
   left: 0px;
   width: 100%;
   z-index: 50;
   text-align: center;
   padding: 20px;
   display: none;
   height: 100%;
}

#entire_shortcuts[data-width="small"] .editBasicColorsCover {
   display: block;
}

.editBasicColorCloseButton {
   position: absolute;
   right: 5px;
   top: 1px;
   font-size: 11px;
   cursor: pointer;
}

.CSSColorList,
.currentBasicColors {
   background: rgb(19, 22, 47);
   border: 1px solid rgb(39, 39, 39);
   height: 77%;
   width: 42%;
   position: relative;
   margin-left: 6%;
   display: inline-block;
   vertical-align: top;
   overflow: hidden;
}

#userShortcutContainer {
   position: relative;
   height: calc(100% - 145px);
   overflow: hidden;
   width: 92%;
   margin-left: 4%;
   border: 2px solid black;
}

.loadSomeSnippets {
   background: blue;
   padding: 8px;
   position: absolute;
   right: 0px;
   top: -29px;
   opacity: 0.1;
}

.mySharingSettingsButton {
   position: absolute;
   top: 5px;
   right: 8px;
   opacity: 0.4;
   transition: opacity 0.3s ease 0s;
   cursor: pointer;
   z-index: 12;
}

#myPasscode {
   background: black;
   color: lightgray;
   border: 1px solid rgb(38, 40, 41);
   padding-left: 8px;
   max-width: 120px;
   vertical-align: top;
}

.passcodeSaveButton {
   display: inline-block;
   background: rgb(7, 33, 3);
   height: 24px;
   line-height: 24px;
   cursor: pointer;
   vertical-align: top;
   width: 101px;
   text-align: center;
}

.passcodeHelp {
   display: inline-block;
   bottom: 3px;
   position: relative;
   margin-left: 7px;
   color: orange;
   opacity: 0.2;
   transition: opacity 0.3s ease 0s;
}

.mySharingSettings {
   background: rgb(51, 52, 69);
   padding: 29px 7px 7px;
   position: absolute;
   width: 100%;
   height: 100%;
   top: 0px;
   left: 0px;
   line-height: 20px;
   display: none;
   z-index: 10;
}

.otherUserInputSection[data-debugview="debugView"] .mySharingSettings {
   display: block;
   height: 300px;
   top: 218px;
   border: 3px solid cyan;
}

.otherUserInputTitle {
   background: black;
   text-align: center;
   height: 34px;
   line-height: 34px;
}

.otherUserAdminToggle {
   position: absolute;
   left: 40px;
   bottom: 0px;
   opacity: 0.15;
   font-size: 10px;
   transition: opacity 0.3s ease 0s;
   cursor: pointer;
}

.otherUserAdminToggle:hover {
   opacity: 0.8;
}

.myPasscodeTitle {
   display: inline-block;
   margin-left: 10px;
   color: rgb(193, 205, 209);
   height: 24px;
   line-height: 24px;
   vertical-align: text-bottom;
}

.passcodeExplanation {
   color: lightgray;
   background: rgba(28, 31, 123, 0.26);
   border: 1px solid black;
   margin: 12px 6px 8px;
   padding-left: 12px;
   max-width: 532px;
}

.shareSettingsTitle {
   margin-left: 8px;
   margin-bottom: 4px;
   color: rgb(193, 205, 209);
}

.highlightPasswordMessage {
   color: rgb(238, 133, 133);
}

.sharingPublicSettings {}

.sharingPublicSettings .cc_select {
   background: black;
   border: 1px solid rgb(41, 41, 70);
   padding: 3px;
}

.sharingSettingSave {
   background: rgb(9, 35, 73);
   text-align: center;
   cursor: pointer;
   display: inline-block;
   border: 1px solid black;
   height: 30px;
   line-height: 30px;
   width: 140px;
   vertical-align: text-bottom;
}

.shortcutSharingHelpButtons {
   display: inline-block;
   position: relative;
   top: 2px;
   vertical-align: top;
   color: lightgray;
   font-size: 12px;
}

.mySharingSettingsButton:hover {
   opacity: 0.8;
}

.hideMySharingSettings {
   display: none;
}

.otherUserInputSection[data-sharingstatus="show"] .hideMySharingSettings {
   display: inline-block;
}

.otherUserInputSection[data-sharingstatus="show"] .showMySharingSettings {
   display: none;
}

#otherUserShortcutsSection {
   color: white;
   font-size: 13px;
   height: 100%;
   position: absolute;
   width: 100%;
   background: rgb(11, 13, 32);
   overflow-y: auto;
   display: none;
}

.otherUserInputSection {
   border: 1px solid black;
   background: rgba(44, 45, 49, 0.5);
   height: 204px;
}

.addOthersLoginTitle {
   display: inline-block;
   margin: 2px;
   width: 136px;
   color: lightgray;
}

#addOthersLogin,
#addOthersCode {
   background: rgb(6, 20, 50);
   border: 1px solid black;
   margin: 12px;
   color: lightblue;
}

#searchUserShortcuts {
   background: black;
   padding: 1px;
   display: inline-block;
   cursor: pointer;
   width: 80px;
   text-align: center;
}

#loadedOtherShortcuts {
   height: calc(100% - 288px);
   overflow: hidden;
   min-height: 415px;
}

#loadedOtherShortcuts,
.otherUserInputSection {
   width: 90%;
   margin-left: 5%;
   margin-top: 30px;
}

.userCurrentlyViewing {
   background: black;
   padding: 6px;
   margin: 0px 17px;
   position: relative;
}

.shareServerMessage {
   position: absolute;
   background: black;
   width: 97%;
   color: rgb(255, 118, 0);
   display: none;
}

.currentlyViewingTitle,
.currentlyViewingName {
   display: inline-block;
}

.otherUserInputSection {
   margin-top: 10px;
   position: relative;
   overflow: hidden;
}

.otherUserInputSection[data-debugview="debugView"] {
   height: 453px;
   border: 3px solid orange;
}

.otherUserInputOneLine {
   white-space: nowrap;
   padding-left: 18px;
}

.otherUserInputLine {
   line-height: 16px;
}

.loadedOtherColors,
.loadedOtherSnippets {
   height: calc(50% - 30px);
   background: rgb(15, 40, 60);
   overflow-y: auto;
   font-size: 14px;
   min-height: 189px;
}

.loadedOtherTitle {
   background: black;
   position: relative;
   height: 28px;
   line-height: 28px;
   text-align: center;
}

.loadedOtherTitle .adminTitle {
   position: absolute;
   right: 12px;
   top: 0px;
   opacity: 0.3;
   font-size: 11px;
}

.loadedOtherSnippets {
   background: rgb(40, 40, 68);
   margin-top: 30px;
}

.shortcutRowAdded {
   background: rgb(2, 13, 35);
   position: absolute;
   top: 0px;
   left: 0px;
   height: 100%;
   width: 100%;
   display: none;
}

.sharedShortcutRow,
.sharedShortcutNoResults {
   border-top: 1px solid black;
   border-right: 1px solid black;
   border-left: 1px solid black;
   border-image: initial;
   border-bottom: none;
   padding-left: 20px;
   position: relative;
   height: 38px;
   line-height: 38px;
}

#loadedOtherShortcuts .sharedInnerRows .sharedShortcutRow[data-theid="Basic colors"] .sharedShortcutPreview,
#loadedOtherShortcuts .sharedInnerRows .sharedShortcutRow[data-theid="Basic colors"] .sharedShortcutAdd {
   display: none;
}

#loadedOtherShortcuts .sharedInnerRows .sharedShortcutRow[data-theid="Basic colors"] {
   display: none !important;
}

.sharedShortcutRow:last-child {
   border-bottom: 1px solid black;
}

.sharedShortcutNoResults {
   border: none !important;
}

.sharedShortcutRow .setName {
   display: inline-block;
}

.sharedShortcutPreview,
.sharedShortcutAdd {
   position: absolute;
   right: 0px;
   bottom: 4px;
   background: rgb(2, 13, 35);
   cursor: pointer;
   width: 70px;
   text-align: center;
   line-height: 24px;
   height: 24px;
   top: 8px;
}

.sharedShortcutAdd {
   right: 8px;
}

.sharedShortcutPreview {
   right: 88px;
}

.sharedInnerRows {
   border: 1px solid rgb(0, 0, 0);
   height: calc(100% - 28px);
   overflow-y: auto;
}

.entireUserColors {
   width: 100%;
   display: block;
   margin-left: 0px;
   position: absolute;
   top: 0px;
   height: 100%;
   border: none;
   background: rgb(28, 28, 51);
}

.userShortcutCover {
   position: absolute;
   height: 100%;
   width: 100%;
   top: 0px;
   left: 0px;
   z-index: 10;
   background: rgb(11, 13, 32);
   padding: 20px;
   display: none;
   font-size: 0px;
}

.entireUserSnippets {
   margin-bottom: 40px;
   display: none;
}

.entireUserCover {
   background: black;
   top: 0px;
   left: 0px;
   position: absolute;
   height: 100%;
   width: 100%;
   opacity: 0.95;
   text-align: center;
   padding-top: 50px;
   display: none;
   z-index: 20;
}

.snippetManagerSelection {
   background: rgb(11, 13, 32);
   padding: 16px 16px 17px;
   width: 92%;
   margin-left: 4%;
   position: relative;
   border: 1px solid rgb(11, 13, 32);
}

.snippetManagerShowingLabel {
   display: inline-block;
}

.snippetManagerOneSelection {
   cursor: pointer;
   display: inline-block;
}

.theSnippetManagerSelection {
   margin-left: 90px;
   display: block;
   position: absolute;
   top: 0px;
   right: 0px;
   opacity: 0.8;
   border: none;
   font-size: 13px;
   width: 50%;
}

#sharedObjectPreview {
   position: absolute;
   z-index: 8;
   height: 72%;
   width: 76%;
   top: 34px;
   background: rgb(40, 40, 59);
   border: 1px solid black;
   left: 12%;
}

.sharedObjectPreviewTitle {
   background: black;
   color: lightgray;
   height: 48px;
   line-height: 48px;
   position: relative;
   font-size: 20px;
   padding-left: 20px;
}

.sharedObjectPreviewClose {
   position: absolute;
   cursor: pointer;
   right: 5px;
   font-size: 16px;
}

#sharedObjectPreviewCover {
   position: absolute;
   top: 0px;
   background: rgba(30, 31, 31, 0.89);
   left: 0px;
   height: 100%;
   width: 100%;
   z-index: 15;
   display: none;
}

.sharedObjectPreviewLines {
   height: calc(100% - 121px);
   width: 100%;
   position: relative;
   margin-top: -1px;
   background: rgb(6, 6, 39);
   overflow-y: auto;
}

.sharedObjectPreviewLines .moveShortcutDown,
.sharedObjectPreviewLines .moveShortcutUp {
   display: none;
}

.entireUserCoverClose {
   position: absolute;
   top: 15px;
   right: 15px;
   cursor: pointer;
   opacity: 0.4;
   font-size: 1.2em;
}

.css_color_rows,
.user_snippet_rows {
   border: 1px solid rgb(37, 36, 36);
   height: 63%;
   overflow-y: auto;
   width: 96%;
   margin-left: 2%;
   margin-top: 12px;
}

.userBasicMessageArea {
   text-align: center;
   padding-top: 5px;
   transition: opacity 0.3s ease 0s;
}

.changeBasicColorsButton {
   background: rgb(4, 11, 64);
   display: inline-block;
   padding: 5px 0px;
   border: 1px solid rgba(51, 51, 51, 0.49);
   margin-right: 15px;
   cursor: pointer;
   width: 109px;
}

.basicColorsButtonRow {
   text-align: center;
   margin-top: 10px;
}

#entire_shortcuts[data-width="medium"] .basicColorsButtonRow {
   position: relative;
   margin-top: 0px;
   bottom: 3px;
}

.filterBasicColors,
.userShortcutSearchSection {
   text-align: center;
   padding: 25px 0px 10px;
}

.userShortcutSearchSection {
   padding-bottom: 15px;
   position: relative;
}

.addOtherUserShortcuts,
.userShortcutSearchSection {
   background: rgb(11, 13, 32);
   width: 92%;
   margin-left: 4%;
}

.addOtherUserShortcuts {
   border: 2px solid green;
}

.listAllUserColors,
.grabAllUserSnippets {
   background: rgb(2, 38, 31);
   cursor: pointer;
   color: white;
   max-width: 300px;
   text-align: center;
   padding: 8px;
   display: none;
}

.basicColorInnerTitle {
   text-align: center;
   border-bottom: 1px solid rgba(43, 43, 43, 0.5);
   background: rgb(0, 0, 0);
   height: 26px;
   line-height: 26px;
}

.entireUserColors .basicColorInnerTitle {
   height: 38px;
   line-height: 38px;
   font-size: 15px;
   overflow: hidden;
   position: relative;
}

.basicColorRow,
.savedShortcutSetLine {
   background: rgb(46, 63, 86);
   border-top: 1px solid black;
   border-right: 1px solid black;
   border-left: 1px solid black;
   border-image: initial;
   padding-left: 10px;
   height: 34px;
   padding-top: 6px;
   color: rgb(208, 206, 206);
   position: relative;
   border-bottom: none;
   transition: opacity 0.25s ease 0s;
}

.userAllColorRow.basicColorRow:nth-child(2n) {
   background: rgb(35, 57, 73);
}

.userAllColorRow.basicColorRow:last-child {}

.userAllColorRow.basicColorRow:last-child .moveShortcutDown {
   display: none;
}

.userAllColorRow.basicColorRow:first-child .moveShortcutUp {
   display: none;
}

.userAllColorRow.basicColorRow:first-child {}

.oneColorRowContainer {
   border: 1px solid black;
   overflow: hidden;
   width: 100px;
   position: relative;
   display: inline-block;
   height: 20px;
}

.oneColorRowContainer img {
   position: absolute;
   z-index: 2;
   top: 0px;
   left: 0px;
}

.basicColorRowColorBox {
   height: 20px;
   width: 20px;
}

#allUserShortcutDialog .basicColorRowColorBox {
   width: 100px;
   margin-right: 10px;
   z-index: 5;
   position: absolute;
   top: 0px;
   left: 0px;
}

.userShowShortcutLine:last-child .moveShortcutDown {
   display: none;
}

.userShowShortcutLine:first-child .moveShortcutUp {
   display: none;
}

.userShowShortcutLine:first-child {}

.userShowShortcutLine:last-child {}

.showShortcutLineItemTitle {
   display: inline-block;
}

.lineItemPartialWord {
   display: none;
}

.userAllColorRow .copyThisColor,
.copyUserSnippet {
   background: rgba(0, 0, 0, 0.64);
   width: 63px;
   position: absolute;
   text-align: center;
   right: 5px;
   cursor: pointer;
}

.userShowShortcutLine .copyUserSnippet {
   height: 20px;
   line-height: 20px;
   top: 6px;
   border: 1px solid rgba(211, 211, 211, 0.11);
   font-size: 15px;
   color: rgb(211, 211, 211);
}

.userAllColorRow .basicColorRowBox {
   border: 1px solid rgb(183, 81, 81);
   display: inline-block;
   min-width: 40px;
   min-height: 10px;
}

.basicColorRow.colorSetLine,
.savedShortcutSetLine,
.colorSetTopIndex.noResults {
   background: rgb(24, 33, 64);
   text-align: center;
   font-size: 15px;
}

.colorSetTopIndex.noResults {
   padding: 4px 0px;
}

.userSetLocks {
   border: 1px solid rgb(7, 45, 63);
   position: absolute;
   right: 10px;
   background: rgba(68, 87, 101, 0.64);
   top: 0px;
   width: 32px;
   cursor: pointer;
   height: 32px;
   text-align: center;
   line-height: 33px;
   display: none;
}

#allUserShortcutInner[data-showlocksetting="true"] .userSetLocks {
   display: inline-block;
}

#allUserShortcutInner .viewUserColorShortcuts .all_basic_color_row[data-colorset="Basic colors"] .userSetLocks {
   display: none;
}

.colorSetContainer {}

.all_basic_color_row[data-colorset="Basic colors"],
.colorSetContainer[data-colorset="Basic colors"] {}

.savedShortcutSetGroup {}

.sharedObjectAdd {
   background: rgb(10, 10, 65);
   display: inline-block;
   text-align: center;
   height: 35px;
   line-height: 35px;
   width: 100px;
   margin: 12px;
   cursor: pointer;
   position: relative;
}

.sharedObjectAdd_added {
   position: absolute;
   top: 0px;
   background: inherit;
   width: 100%;
   height: 100%;
   text-align: center;
   display: none;
   left: 0px;
}

.basicColorRow.shortcutSetLine,
.savedShortcutSetLine {
   background: rgb(38, 38, 50);
   text-align: left;
   padding-left: 130px;
}

#allUserShortcutDialog .basicColorRow.shortcutSetLine,
#allUserShortcutDialog .savedShortcutSetLine {
   background: rgb(54, 29, 65);
}

.shortcutSetTopIndex[data-status="private"] .fa-lock,
.colorSetTopIndex[data-status="private"] .fa-lock {
   display: inline-block;
}

.shortcutSetTopIndex[data-status="private"] .fa-lock-open,
.colorSetTopIndex[data-status="private"] .fa-lock-open {
   display: none;
}

.shortcutSetTopIndex[data-status="public"] .fa-lock,
.colorSetTopIndex[data-status="public"] .fa-lock {
   display: none;
}

.shortcutSetTopIndex[data-status="public"] .fa-lock-open,
.colorSetTopIndex[data-status="public"] .fa-lock-open {
   display: inline-block;
}

#allUserShortcutDialog.miniClass .savedShortcutSetLine {
   padding-left: 10px;
}

#allUserShortcutDialog.miniClass .grabAllUserSnippets,
#allUserShortcutDialog.miniClass .listAllUserColors {
   display: block;
}

.snippetParentName {
   position: absolute;
   top: 5px;
   background: rgba(112, 120, 120, 0.17);
   opacity: 0.3;
   right: 15px;
}

.sharedObjectPreviewLines .snippetParentName {
   display: none;
}

.userShowShortcutLine {
   padding-left: 177px;
   border-bottom: 1px solid rgba(0, 0, 0, 0.57);
   height: 36px;
   line-height: 36px;
   font-size: 15px;
   position: relative;
}

.lineTitleFullWord {
   display: inline-block;
}

.userShowShortcutLine.noResults {
   padding: 0px;
   text-align: center;
}

.userShowShortcutLine:nth-child(2n) {
   background: rgb(15, 18, 46);
}

.userShowShortcutLine:nth-child(2n+1) {
   background: rgb(30, 33, 70);
}

.userShowShortcut {
   background: black;
   width: 20px;
   text-align: center;
   position: relative;
   display: inline-block;
   text-transform: capitalize;
   height: 28px;
   line-height: 28px;
}

.userShowSnippet {
   background: rgb(45, 50, 50);
   padding: 4px;
   height: 19px;
   line-height: 13px;
   min-width: 130px;
   display: inline-block;
   white-space: nowrap;
   max-width: 48%;
   overflow: hidden;
   text-overflow: ellipsis;
}

#page .entireUserSnippets .shortcutSetTopIndex {
   text-align: left;
   padding-left: 18px;
   background: rgb(24, 33, 64);
}

#page #allUserShortcutDialog .entireUserSnippets .shortcutSetTopIndex {
   background: rgb(11, 13, 32);
   font-weight: 600;
   color: rgb(136, 216, 216);
}

#allUserShortcutDialog.miniClass .userShowShortcutLine {
   padding-left: 50px;
}

#allUserShortcutDialog.miniClass .userShowShortcutLine .moveUserShortcut {
   left: 2px;
}

#allUserShortcutDialog.miniClass .userShowShortcutLine .moveShortcutUp {
   left: 20px;
}

.removeBasicColorRow,
.basicColorRowName,
.basicColorRowColorBox {
   display: inline-block;
   vertical-align: top;
}

.basicColorRowName {}

.basicColorRowName {
   width: 65%;
   overflow: hidden;
   text-transform: lowercase;
}

.userAllColorRow .basicColorRowName {
   width: unset;
   white-space: nowrap;
   text-transform: initial;
}

.moveUserShortcut {
   height: 15px;
   width: 15px;
   cursor: pointer;
   font-size: 15px;
   position: absolute;
   right: 80px;
   top: 6px;
}

.moveShortcutDown {
   right: 100px;
}

.userShowShortcutLine .moveUserShortcut {
   right: unset;
   left: 135px;
}

.userShowShortcutLine .moveShortcutDown {
   right: unset;
   left: 115px;
}

.addToUserColorList {
   display: inline-block;
   cursor: pointer;
   margin-right: 20px;
   float: right;
}

.sharedObjectPreviewLines .savedShortcutSetLine {
   padding-left: 15px;
}

.sharedObjectPreviewLines .userShowShortcutLine {
   padding-left: 55px;
}

.removeBasicColorRow {
   height: 20px;
   width: 20px;
   line-height: 20px;
   text-align: center;
   cursor: pointer;
   color: rgb(179, 185, 190);
}

#filterBasicColorsUserInput,
#filterBasicColorsAllInput,
#userShortcutSearch,
#userColorSearch {
   background: rgb(26, 30, 54);
   width: 68%;
   border: 1px solid rgba(0, 0, 0, 0.37);
   color: rgb(227, 225, 225);
}

#filterBasicColorsUserInput,
#filterBasicColorsAllInput {
   background: black;
}

#userShortcutSearch,
#userColorSearch {
   color: rgb(170, 170, 170);
}

.cancelFilterBasic {
   display: inline-block;
   color: rgba(137, 137, 165, 0.52);
   font-size: 17px;
   cursor: pointer;
   position: relative;
   top: 5px;
}

.filterBasicColorsButton,
.userSearchFilterButton {
   display: inline-block;
   background: rgb(50, 50, 135);
   color: white;
   padding: 5px;
   cursor: pointer;
}

.entireUserColors .userSearchFilterButton,
.entireUserSnippets .userSearchFilterButton {
   background: rgb(55, 57, 106);
   margin-left: 8px;
   margin-right: 8px;
   border: 1px solid rgb(39, 38, 38);
   font-size: 12px;
   color: rgb(192, 199, 201);
}

.userSearchFilterButton {}

#quickShortcutSwitch {
   background: rgb(26, 31, 46);
   color: rgb(204, 203, 203);
   position: absolute;
   width: 96%;
   margin-left: 2%;
   z-index: 35;
   top: 50px;
   text-align: center;
   font-size: 1.2em;
   display: none;
   user-select: none;
   height: 63%;
   overflow: hidden;
   opacity: 0.97;
}

#entire_shortcuts[data-width="small"] #quickShortcutSwitch {
   font-size: 0.7em;
}

.quickShortcutSwitchTitle {
   background: black;
   height: 28px;
   text-align: center;
   line-height: 28px;
   border: 1px solid rgb(65, 65, 65);
   position: relative;
}

.divMetaName {
   position: absolute;
   font-size: 0.6em;
   left: 0px;
   top: 0px;
   color: rgb(156, 154, 154);
   display: none;
}

#listCopy2 .divMetaName {
   right: unset;
   font-size: 0.85em;
   top: 4px;
   opacity: 0.9;
}

.allQuickSwitchSections {
   height: calc(100% - 30px);
   overflow-y: auto;
   position: relative;
}

.quickSwitchSection {
   border-top: 1px dashed rgba(150, 150, 150, 0.47);
   border-right: 1px dashed rgba(150, 150, 150, 0.47);
   border-left: 1px dashed rgba(150, 150, 150, 0.47);
   border-image: initial;
   cursor: pointer;
   border-bottom: none;
   height: 41px;
   line-height: 41px;
   overflow: hidden;
   position: relative;
}

.quickSwitchSection:first-child {
   border-top: none;
}

.quickSwitchEntry {
   position: relative;
   width: 50%;
   margin: 0px auto;
   height: 41px;
}

.quickSwitchSection:last-child {
   border-bottom: 1px dashed rgba(150, 150, 150, 0.67);
}

.quickSwitchIndex,
.quickSwitchType {
   display: inline-block;
   position: relative;
}

.quickSwitchIndex {
   text-align: left;
   vertical-align: top;
   height: 30px;
   overflow: hidden;
   line-height: 30px;
   top: 5.5px;
}

.quickSwitchType {
   width: 64%;
   text-align: left;
   white-space: nowrap;
   text-overflow: ellipsis;
   overflow: hidden;
   margin-left: 4px;
}

.mySlide-enter-active {
   transition: opacity 0.5s ease 0s;
}

.mySlide-enter {
   opacity: 0;
}

.mySlideToggle-enter {
   opacity: 0;
   transform: scale3d(2, 0.5, 1) translate3d(400px, 0px, 0px);
}

.vueSlide-enter-active {
   transition-duration: 0.3s;
   transition-timing-function: ease-in;
}

.vueSlide-leave-active {
   transition-duration: 0.3s;
   transition-timing-function: cubic-bezier(0, 1, 0.5, 1);
}

.vueSlide-enter-to,
.slide-leave {
   max-height: 100px;
   overflow: hidden;
}

.vueSlide-enter,
.slide-leave-to {
   overflow: hidden;
   max-height: 0px;
}

.mySlideToggle-enter-to {
   transform: scale3d(1, 1, 1);
}

.mySlideToggle-enter-active,
.mySlideToggle-leave-active {
   transition: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55) 0s;
}

.mySlideToggle-leave {
   transform: scale3d(1, 1, 1);
}

.mySlideToggle-leave-to {
   opacity: 0;
   transform: scale3d(2, 0.5, 1) translate3d(-400px, 0px, 0px);
}

.noClick {
   position: absolute;
   opacity: 1;
   top: 0px;
   height: 100%;
   left: 0px;
   width: 100%;
   cursor: not-allowed;
   z-index: 8;
}

.logo {
   display: none;
}

#page .topLevel {}

#page .removeShortcutButton {
   vertical-align: top;
   background: rgb(62, 57, 57);
   padding: 4px 8px;
   color: rgb(133, 134, 134);
   font-size: 0.7em;
   border: 1px solid rgba(72, 72, 72, 0.52);
   margin-top: 3px;
   margin-right: 9px;
   width: 24.75px;
   height: 29px;
}

#page .theShortcutRowsContainer .removeShortcutButton {
   margin-right: 0px;
}

#page .theColorDiv .removeShortcutButton {
   margin-top: 10px;
   margin-left: 3px;
}

.clonedLogo,
.cc_logo,
#genericLogo,
.smallCoverLogo {
   position: absolute;
   color: rgb(136, 136, 156);
   font-size: 3.7em;
   font-family: "Lobster Two", cursive;
   right: 36px;
   top: 18px;
   text-shadow: rgb(70, 73, 82) 3px 2px;
   height: 60px;
   padding-right: 33px;
}

.clonedLogo {
   color: rgb(122, 139, 160);
   text-shadow: rgb(56, 76, 130) 3px 2px;
   top: 80px;
   right: 80px;
   transition: opacity 1.2s ease 0s;
}

.cc_logo {}

#page .smallCoverLogo {
   position: relative;
   right: unset;
   text-shadow: rgba(70, 73, 82, 0.64) 3px 2px;
   height: unset;
}

#genericLogo {
   position: fixed;
   border: none;
   font-size: 2.7em;
   top: 5px;
   width: unset;
   padding: 8px;
}

.page-id-1584 #genericLogo {
   top: 28px;
}

#genericLogo:hover #codeCreateNavButton {
   opacity: 0.36;
}

#codeCreateNavButton:hover,
#codeCreateNavButton.navMenuActive {
   opacity: 1 !important;
}

.genericLogoFull,
.genericLogoPartial {
   display: inline-block;
   cursor: default;
}

.page-id-1584 #codeCreateNavButton {
   display: inline-block;
}

#codeCreateNavMenu {
   position: fixed;
   z-index: 5000;
   top: 85px;
   min-width: unset;
   min-height: unset;
   width: unset;
   height: unset;
   color: white;
   padding: 8px 8px 17px;
   left: 70px;
   border: 2px solid rgb(2, 19, 19);
   background: rgb(2, 2, 23);
   display: none;
}

.navMenuInner {
   border: 1px solid rgba(21, 34, 41, 0.55);
   width: 202px;
}

.oneNavObject {
   padding: 4px;
   background: rgb(20, 34, 56);
   display: block;
   width: 200px;
   border-bottom: 1px solid black;
   cursor: pointer;
   text-align: center;
   color: rgb(179, 221, 235);
}

a.oneNavObject {
   color: rgb(179, 221, 235);
}

.oneNavObject:first-child {
   border-top: none;
}

.oneNavObject:last-child {
   border-bottom: none;
}

.ccNavTitle {
   background: black;
   color: rgb(184, 184, 199);
   text-align: center;
   width: 200px;
   border-bottom: 1px solid rgb(36, 36, 36);
   height: 30px;
   line-height: 30px;
}

.oneNavObject:hover {
   text-decoration: underline;
}

.oneNavObject.thisNavActive {
   background: rgb(58, 62, 90);
   color: rgb(216, 230, 239);
   cursor: default;
}

.oneNavObject.thisNavActive:hover {
   text-decoration: unset;
}

#codeCreateNavButton {
   font-size: 23px;
   text-shadow: rgba(70, 73, 82, 0.25) 3px 2px;
   cursor: pointer;
   transition: opacity 0.4s ease 0s;
   opacity: 0.25;
   display: inline-block;
}

.cc_logo #codeCreateNavButton {
   opacity: 0.4;
   padding-top: 20px;
   vertical-align: top;
   position: fixed;
   right: 5px;
   top: 54px;
   font-size: 15px;
}

#codeCreate.condensedView .cc_logo #codeCreateNavButton {
   top: 4px;
}

#previewCodeClones {
   background: inherit;
   position: absolute;
   right: 0px;
   z-index: 390000;
   opacity: 1;
   height: 32px;
   top: 0px;
   display: none;
   padding-top: 4px;
   min-width: 292px;
}

#page[data-previewcolorsbar="shown"] .renderLightsContainer {
   display: none;
}

#page[data-previewcolorsbar="shown"] #previewCodeClones,
#page[data-previewcolorsbar="shown"] .renderLightsClone {
   display: inline-block;
}

#previewCodeClones>div,
#previewCodeClones>span {
   display: inline-block;
   vertical-align: top;
   margin-right: 8px;
}

.codeCreateNavButtonClone,
.codeCreateNavButtonCloneActive {
   line-height: 20px;
   font-size: 20px;
   margin-top: 3px;
}

#previewCodeClones .previewPageLogoContainer,
#previewCodeClones .previewPageOptionsButtonContainer {
   line-height: 23px;
   cursor: default;
}

.previewOptionsCloneInactive,
.previewOptionsCloneActive {
   color: rgb(162, 162, 165);
   height: 26px;
   overflow: hidden;
   font-size: 17px;
   margin: 0px;
   vertical-align: top;
   line-height: 24px;
}

.codeCreateNavButtonClone {
   opacity: 0.15;
}

#previewCodeClones .unmodifiedSection,
#previewCodeClones .modifiedSection {
   background: rgb(6, 51, 10);
   display: inline-block;
   width: 26px;
   height: 26px;
   text-shadow: none;
   font-size: 12px;
   padding: 2px;
   overflow: hidden;
   text-align: center;
   line-height: 21px;
   border-radius: 50%;
   border: 1px solid rgb(18, 18, 18);
   cursor: default;
   z-index: 8;
   position: relative;
}

#previewCodeClones .modifiedSection {
   background: rgb(65, 33, 33);
}

#previewPageNavContainer #codeCreateNavButton {
   font-size: 18px;
   position: fixed;
   right: 3px;
   left: unset;
}

#glossaryPage #codeCreateNavButton {
   font-size: 25px;
}

.glossaryLogo {
   font-family: "Lobster Two", cursive;
   color: rgb(172, 172, 191);
   font-size: 36px;
   position: fixed;
   right: 30px;
   top: 25px;
   min-width: 221px;
   cursor: default;
}

.glossaryLogoFull {
   display: inline-block;
}

.glossaryLogoPartial {
   display: none;
}

.lobsterText {
   font-family: "Lobster Two", cursive;
}

#cc_error_page .cc_logo {
   font-size: 2.9em;
}

.anOldButton {
   border: 1px dashed gray;
   background: black;
}

#cc_top_menu,
.cc_top_menu_copy {
   background: rgb(42, 45, 49);
   position: relative;
   width: 74%;
   margin-top: 17px;
   left: 12px;
   opacity: 0;
   transition: opacity 0.3s ease 0s;
   padding: 9px 20px;
   height: 58px;
   border: 1px solid rgb(107, 108, 109);
   z-index: 8;
}

#featureDetailContainer::-webkit-scrollbar-thumb {
   background: rgb(16, 65, 92);
   border: 1px solid rgb(186, 205, 207);
}

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

#cc_top_menu::-webkit-scrollbar,
.cc_top_menu_copy::-webkit-scrollbar {
   border-color: rgb(230, 215, 215);
   background: rgb(18, 18, 19);
   width: 7px;
}

#cc_top_menu::-webkit-scrollbar-thumb,
#cc_top_menu::-webkit-scrollbar-thumb {
   background: rgb(206, 113, 54);
}

.saved_files_container::-webkit-scrollbar-track,
.saved_files_heading::-webkit-scrollbar-track {
   border-color: rgb(232, 232, 232);
   border-radius: 0px;
}

.cc_top_menu_copy {
   overflow: hidden;
   white-space: nowrap;
}

#cc_error_page .cc_top_menu_copy,
#cc_error_page .cc_logo,
#cc_error_page .cc_logo * {
   opacity: 1;
}

#cc_error_page .condensedLayoutButton {
   display: none;
}

.theDivTitle {
   position: absolute;
   background: gray;
   color: white;
   opacity: 0.7;
   bottom: 0px;
   right: 0px;
}

#wpadminbar {
   display: none;
   z-index: 5;
}

#main {
   overflow: hidden;
}

.ss_top_menu {
   height: 100px;
   border-bottom: 1px solid rgb(82, 82, 82);
   display: none;
   z-index: 5;
}

.ss_top_menu * {
   opacity: 0;
}

.theDeleteButton {
   background: rgb(45, 58, 72);
   cursor: pointer;
   color: rgb(215, 212, 212);
   padding: 4px;
   display: inline-block;
   vertical-align: top;
   bottom: 6px;
   position: relative;
}

.deleteMultipleButton {
   display: inline-block;
   width: 35px;
   cursor: pointer;
}

#previewPage .allSessionRows .sessionCell[data-title="Delete"] {
   display: none;
}

.skipDeleteMultiple {
   cursor: default;
}

#codeCreate .ace_invalid {
   color: rgb(206, 210, 207);
   background-color: rgb(106, 66, 66);
   opacity: 0;
}

.moreLogoButtons {
   vertical-align: top;
   display: inline-block;
}

.modified_indicator_button {
   position: absolute;
   right: 0px;
   top: 0px;
   width: 22px;
   height: 22px;
   display: block;
   font-size: 12px;
   text-shadow: none;
   font-family: arial;
   color: rgba(151, 146, 146, 0.64);
   padding: 2px;
   overflow: hidden;
   text-align: center;
   opacity: 0;
   line-height: 20px;
   border-radius: 50%;
   border: 1px solid rgb(18, 18, 18);
   z-index: 33333;
   cursor: pointer;
}

#cc_top_bar.condensedView .modified_indicator_button {
   transform: scale(0.9);
}

#previewCodeHeader .modified_indicator_button {
   right: 40px;
   top: 6px;
}

.modifiedCloneTwo {
   right: 0px;
   top: 27px;
}

.modified_indicator_button .unmodifiedSection,
.modified_indicator_button .modifiedSection {
   background: rgb(6, 51, 10);
   width: 34px;
   height: 27px;
   position: relative;
   left: -9px;
   top: -2px;
   padding-top: 1px;
   padding-right: 2px;
}

.tinyCover[data-type="editorThemes"] i {
   position: absolute;
   top: 3px;
   right: 50px;
   cursor: pointer;
}

.modified_indicator_button .modifiedSection {
   display: none;
   background: rgb(65, 33, 33);
}

.modifiedCloneTwo .modifiedSection {
   display: block;
}

#previewPage .modified_indicator_button[data-previewsetting="never"] {
   display: none;
}

.modified_indicator_button[data-modified="true"] .unmodifiedSection {
   display: none;
}

#page .modified_indicator_button[data-setting="onlyUnmodified"] .modifiedSection {
   display: none;
}

#page .modified_indicator_button[data-setting="onlyModified"] .unmodifiedSection {
   display: none;
}

.modified_indicator_button[data-modified="true"] .modifiedSection {
   display: inline-block;
}

#cc_top_bar.condensedView .moreLogoButtons {
   bottom: 8px;
   position: relative;
}

#cc_top_bar.condensedView .moreLogoButtons[data-logoarealayoutdisplay="hide"],
#cc_top_bar.condensedView .moreLogoButtons[data-logoareaoptionsbuttondisplay="hide"] {
   bottom: unset;
}

#previewPage .modified_indicator_button[data-previewsetting="chainsActive"] {
   display: none;
}

#previewPage .modified_indicator_button.previewShown[data-previewsetting="chainsActive"],
#previewPage.styleEditorView .modified_indicator_button[data-previewsetting="chainsActive"] {
   display: block;
}

.cc_logo .logoText,
.logoText.smallCover {
   opacity: 0;
   transition: opacity 0.4s ease 0s;
   display: inline-block;
   cursor: default;
   top: 15px;
   position: relative;
   vertical-align: top;
}

.cc_logo .logoText {
   cursor: pointer;
}

.logoText.smallCover {
   opacity: 1;
   transition: unset;
   font-size: 36px;
   padding: 12px;
   top: unset;
}

#editorThemeOverlay {
   background: rgb(19, 20, 20);
   height: 85%;
   width: 100%;
   position: fixed;
   border: 1px solid rgb(68, 68, 68);
   z-index: 33;
   overflow: hidden auto;
   display: none;
}

#editorThemeOverlay.showActual {
   background: none;
}

#editorThemeOverlay.showActual #placeholderEditors {
   display: none;
}

#editorThemeOverlay.showActual #editorThemeOptionsContainer {
   width: 48%;
}

#editorThemeOverlay #editorThemeOptionsArea {
   position: absolute;
   bottom: 18px;
   left: 3px;
   border: 2px solid cyan;
   background: black;
   min-width: 500px;
   color: lightblue;
   font-size: 18px;
   padding: 8px;
   z-index: 4444;
   transform: scale(0.9);
}

.toggleActualEditors,
.altSaveEditorThemes {
   display: inline-block;
   border: 1px solid rgb(97, 44, 104);
   background: rgb(28, 3, 28);
   padding: 6px;
   cursor: pointer;
}

.toggleActualEditors {
   background: rgb(22, 22, 69);
   margin-left: 20px;
   border: 1px solid rgba(173, 216, 230, 0.32);
}

#secondaryThemeChooser {
   border: 1px solid rgb(95, 116, 177);
   color: lightblue;
   display: none;
}

#secondaryThemeChooser.moveOffscreen {
   position: absolute;
   left: -9999px;
   top: 30px;
}

.changeSecondaryThemeButton {
   display: inline-block;
}

.exportCurrentThemeInfo {
   font-size: 15px;
   margin-top: 18px;
   color: yellow;
}

.oneEditorThemeName {
   color: rgb(154, 175, 200);
}

#editorThemeOverlay[data-narrow="on"] #editorThemeOptionsContainer,
#editorThemeOverlay[data-narrow="on"] #nextThemeTasks {
   display: none;
}

#editorThemeOverlay[data-narrow="on"] {
   width: 50%;
   right: 0px;
}

#editorThemeOverlay[data-narrow="on"] #placeholderEditors {
   width: 80%;
   top: 30px;
}

#placeholderEditors[data-orientation="horizontal"] {}

#placeholderEditors[data-restorebuttondisplay="hide"] .editorHoverButtons .cc_restore,
#placeholderEditors[data-copybuttondisplay="hide"] .editorHoverButtons .cc_copy,
#placeholderEditors[data-searchreplacebuttondisplay="hide"] .editorHoverButtons .cc_find_replace,
#placeholderEditors[data-organizebuttondisplay="hide"] .editorHoverButtons .cc_organize {
   display: none;
}

#placeholderEditors[data-orientation="vertical"] {
   font-size: 0px;
}

#placeholderEditors[data-orientation="vertical"] .sampleEditorGutter {
   width: 24px;
   height: 100%;
   display: inline-block;
   vertical-align: top;
   overflow: hidden;
   font-size: 10.5px;
}

#placeholderEditors[data-orientation="vertical"] #sampleAceOne,
#placeholderEditors[data-orientation="vertical"] #sampleAceTwo,
#placeholderEditors[data-orientation="vertical"] #sampleAceThree {
   font-size: 12px;
}

#placeholderEditors[data-orientation="vertical"] .oneSampleInnerLanguageButton {
   transform: rotate(270deg);
   position: absolute;
   left: -40px;
   top: 37px;
   font-size: 13px;
   width: 100px !important;
   height: 25px !important;
}

#placeholderEditors[data-orientation="vertical"] .languageSampleSizeButton.minimize,
#placeholderEditors[data-orientation="vertical"] .languageSampleSizeButton.maximize {
   position: absolute;
   top: 133px;
   left: 0px;
   width: 22px;
   height: 22px;
   line-height: 22px;
}

#placeholderEditors[data-orientation="vertical"] .languageSampleSizeButton.maximize {
   top: 103px;
}

#placeholderEditors[data-orientation="vertical"] #sampleAceOne,
#placeholderEditors[data-orientation="vertical"] #sampleAceTwo,
#placeholderEditors[data-orientation="vertical"] #sampleAceThree {
   display: inline-block;
   width: calc(33% - 22.9px);
   height: calc(100% - 52px);
}

#page[data-width="showingConsoles"] #editorThemeOverlay {
   width: 60%;
}

.themeOptionsOutsideTitle,
.editorThemeOverlayTitle {
   position: absolute;
   right: 0px;
   bottom: 0px;
   padding: 14px;
   background: rgb(10, 7, 80);
   z-index: 8;
   display: none;
}

.sampleEditorOrientationToggle {
   background: rgb(21, 66, 34);
   padding: 4px;
   display: inline-block;
   color: white;
   cursor: pointer;
   margin-left: 18px;
}

.themeOptionsOutsideTitle {
   bottom: unset;
   top: 0px;
   left: 30px;
   right: unset;
   padding: 1px;
}

.toggleNarrowThemeDisplay {
   background: rgb(6, 49, 37);
   display: inline-block;
   padding: 0px 6px;
   color: white;
   cursor: pointer;
}

#editorThemeOptionsContainer,
#placeholderEditors {
   display: inline-block;
   width: 55%;
   height: 75%;
   margin-right: 20px;
   background: rgb(55, 55, 52);
   margin-left: 20px;
   position: relative;
   border: 1px solid black;
   margin-top: 80px;
   vertical-align: top;
   overflow: hidden;
}

#page[data-recordingbar="show"] #editorThemeOptionsContainer,
#page[data-recordingbar="show"] #placeholderEditors {
   margin-top: 15px;
   height: 62%;
}

#page[data-width="showingConsoles"] #editorThemeOptionsContainer {
   width: 87%;
   height: 40%;
}

#page[data-recordingbar="show"] #editorThemeOptionsContainer {
   left: 16px;
}

#placeholderEditors {
   width: 37%;
   position: relative;
   overflow-y: hidden;
   min-width: 479px;
}

#page[data-width="showingConsoles"] #placeholderEditors {
   width: 70%;
}

#page[data-width="showingConsoles"] #editorThemeOverlay {
   overflow-y: auto;
}

#editorThemeOptionsContainer {
   background: rgb(6, 9, 41);
   border: 1px solid rgb(0 0 0);
   min-width: 685px;
}

.editorThemeOptionsInner {
   padding-bottom: 50px;
   height: calc(100% - 44px);
   overflow-y: auto;
}

.cursorActiveDiv,
.cursorEditRow,
.editorThemeOptionLine {
   background: rgb(24, 28, 50);
   color: lightblue;
   border: 2px solid black;
   margin: 0px 12px 20px;
   padding: 8px;
   vertical-align: top;
   position: relative;
}

.editorThemeOptionLine[data-meta="editorScrollbar"] {
   /* border: 2px solid rgb(106, 171, 69); */
}

.placeholderHoverOptions {
   min-width: 50px;
   position: absolute;
   right: 10px;
   top: 13px;
   width: 241px;
   padding: 8px 8px 20px;
   opacity: 0.3;
   transition: opacity 0.2s ease 0s;
}

#page .placeholderHoverOptions i {
   margin-top: 8px;
   position: relative;
}

.placeholderHoverExplanation {
   position: absolute;
   right: 100px;
   top: 100px;
   width: 400px;
   background: rgb(0, 0, 0);
   padding-bottom: 12px;
   border: 2px solid rgb(62, 61, 61);
   color: rgb(196, 193, 196);
   font-size: 13px;
   display: none;
   z-index: 30;
}

.placeholderShownExplanation {
   color: orange;
}

.placeholderOffExplanation {
   color: cyan;
}

.placeholderHoverExplanationLine[data-type="defaultFunctionality"] {
   color: rgb(65, 207, 65);
}

.placeholderHoverExplanationLine[data-type="partiallyVisible"] {
   color: rgb(189, 146, 229);
}

.placeholderHoverExplanationTitle {
   background: rgb(46, 46, 54);
   text-align: center;
   margin-bottom: 15px;
   color: lightgray;
   border-bottom: 1px solid rgb(73, 72, 72);
}

.doesNotAffectMain {
   color: rgb(201, 144, 201);
}

.placeholderHoverExplanationTitle i {
   cursor: pointer;
}

.placeholderHoverOptions i {
   margin: 0px;
}

.placeholderHoverOptions:hover {
   opacity: 0.8;
}

.placeholderHoverExplanationLine {
   margin: 0px 10px 13px;
}

.placeholderHoverExplanationLine[data-number="ten"] {
   color: rgb(216, 216, 45);
}

#placeholderHoverStatus {
   border: 1px solid black;
   background: rgb(5, 5, 46);
   margin-top: 8px;
   position: relative;
   right: 3px;
}

.cursorEditRow[data-type="blinkingCursor"] {
   margin-top: 20px;
}

.cursorLayoutPresetsTitle {
   background: black;
   padding: 0px 8px;
   margin-right: 4px;
}

.cursorLayoutPresetsTitle,
.cursorPresetButton {
   display: inline-block;
}

.cursorPresetLine {
   padding: 6px;
   padding: 6px 30px;
   display: inline-block;
   /* padding-top: 8px; */
   /* line-height: 40px; */
}

.cursorSelectMeta {
   margin-left: 30px;
   background: rgb(3, 43, 41);
   color: lightgray;
   padding: 0px 8px;
   display: none;
}

#cursorLayoutPresets,
#cursorColorPresets_oneTone,
#cursorColorPresets_twoTone {
   background: rgb(37, 46, 116);
   color: lightblue;
   border: 1px solid black;
   height: 21px;
   line-height: 21px;
   vertical-align: top;
   margin-right: 5px;
}

#cursorColorPresets_oneTone option {
   text-transform: capitalize;
}

.cursorPresetButton {
   background: rgb(7, 37, 51);
   cursor: pointer;
   border: 1px solid black;
   padding: 0px 5px;
   height: 21px;
   line-height: 21px;
   vertical-align: top;
}


.cursorPresetLine[data-type="oneToneColors"] {
   border: 25px solid #040d23;
   border-top: none;
   border-bottom: none;
   padding: 6px 30px;
   background: #212b43;
}

.cursorPresetLine[data-type="oneToneColors"] .cursorLayoutPresetsTitle {
   background: #040b21;
   color: #94afb6;
}

#cursorColorPresets_oneTone {
   background: rgb(54 62 122);
}


.cursorPresetLine[data-type="oneToneColors"] .cursorPresetButton {
   background: #0d2247;
}


.cursorEditRow.cursorLocation[data-active="no"] {
   opacity: 0.4;
}

#cursorEditor .cursorEditRow.cursorLocation {
   margin-bottom: 0px;
}

.cursorActiveDiv {
   background: rgb(39, 52, 84);
   font-size: 14px;
   margin-top: 20px;
   color: lightgray;
   margin-bottom: 3px;
}

.cursorBottomBorder {
   font-size: 0px;
   height: 15px;
   background: rgb(51, 51, 51);
   margin: 34px 14px 30px;
}

.hideAdditionalLanguageAccents.pythonLoc,
.hideAdditionalLanguageAccents.phpLoc {
   position: absolute;
   top: 13px;
   right: 8px;
   opacity: 0.4;
   cursor: pointer;
}

.hideAdditionalLanguageAccents.pythonLoc {}

#editorThemeOverlay[data-additionalaccents="yes"] .showBackendAccentsDefault,
.hideBackendAccentsDefault {
   display: inline-block;
}

#editorThemeOverlay[data-additionalaccents="yes"] .hideBackendAccentsDefault,
.showBackendAccentsDefault {
   display: none;
}

.hoverButtonsInner {
   display: inline-block;
   height: unset;
   position: relative;
   vertical-align: top;
   width: calc(100% - 200px);
}

.oneHoverButtonLine {
   border: 1px solid rgb(19, 48, 64);
   margin-bottom: 18px;
   background: black;
   width: 250px;
}

.hoverButtonTitle {
   background: rgb(8, 8, 51);
   display: inline-block;
   width: 100px;
   text-align: left;
   padding: 0px 4px;
   cursor: default;
   vertical-align: top;
   height: 28px;
   line-height: 35px;
   font-size: 12px;
}

.hoverPreferenceContainer {
   display: inline-block;
   min-width: 40px;
   min-height: 20px;
   vertical-align: top;
}

.hoverPreferenceContainer .preferenceLine {
   background: black;
   display: block !important;
}

.hoverButtonsInner .cc_select {
   display: none;
}

.activeVueVarDisplay {
   display: none;
}

.editorThemeOptionLine[data-type="languageButtonDisplaySetting"] {}

.editorThemeOptionLine[data-type="languageButtonDisplaySetting"] .cc_select,
.editorThemeOptionLine[data-type="languageButtonDisplaySetting"] .dropdownCount,
.editorThemeOptionLine[data-type="languageButtonDisplaySetting"] .preferenceLineVar {
   display: none;
}

.showRemainingAccentButton {
   background: rgb(11, 51, 69);
   padding: 4px 12px;
   display: inline-block;
   cursor: pointer;
   color: rgb(205, 221, 229);
}

.caretEditorHelp {
   display: inline-block;
   margin-left: 5px;
}

.editorThemeOptionLine[data-type="languageAccent"] {
   background: rgb(24, 28, 50);
   color: rgb(239, 239, 239);
}

.editorThemeOptionLine.anyHighlight {
   /* border: 2px solid cyan; */
}

.editorThemeOptionLine[data-default_background="yes"] .line_background .languageAccentBox {
   display: none;
}

.editorThemeBasicDefaultButton {
   color: lightblue;
   cursor: pointer;
   display: none;
}

.editorThemeOptionLine[data-default_background="yes"] .line_background .editorThemeBasicDefaultButton,
.editorThemeOptionLine[data-default_text="yes"] .line_text .editorThemeBasicDefaultButton {
   display: inline-block;
}

.editorThemeOptionLine[data-default_text="yes"] .line_text .languageAccentBox {
   display: none;
}

.editorThemeOptionLine[data-meta="phpAccent"],
.editorThemeOptionLine[data-meta="pythonAccent"],
.editorThemeOptionLine[data-meta="javaAccent"],
.editorThemeOptionLine[data-meta="luaAccent"] {
   display: none;
}

.editorThemeOptionLine[data-meta="editorsActiveLineBackground"] .languageAccentLineLabel[data-type="text"] {
   display: none;
}

#editorThemeOptionsContainer[data-backendshown="yes"] .editorThemeOptionLine[data-meta="phpAccent"],
#editorThemeOptionsContainer[data-backendshown="yes"] .editorThemeOptionLine[data-meta="pythonAccent"],
#editorThemeOptionsContainer[data-backendshown="yes"] .editorThemeOptionLine[data-meta="javaAccent"],
#editorThemeOptionsContainer[data-backendshown="yes"] .editorThemeOptionLine[data-meta="luaAccent"] {}

#page[data-width="showingConsoles"] .editorThemeOptionLine[data-meta="pythonAccent"] {
   border: 1px solid magenta;
   height: 80px;
}

#page[data-width="showingConsoles"] .hideAdditionalLanguageAccents.pythonLoc {
   top: 40px;
   opacity: 0.6;
}

.editorThemeOptionLine[data-type="sizeAccent"] {}

.editorThemeOptionLine[data-type="gutterAccent"] {}

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

.editorThemeOptionsHeading {
   height: 40px;
   line-height: 40px;
   background: black;
   color: lightgray;
   border-bottom: 2px solid rgb(63, 63, 63);
   text-align: center;
   font-size: 14px;
   position: relative;
   margin-bottom: 10px;
}

.editorThemeOptionsHeading i {
   position: absolute;
   right: 15px;
   cursor: pointer;
}

.languageAccentLineTitle {
   border: 1px solid rgba(35, 35, 35, 0.44);
   margin-right: 8px;
   display: inline-block;
   width: 181px;
   background: black;
   padding: 0px 5px;
   height: 32px;
   line-height: 32px;
   color: lightblue;
   font-size: 12px;
   position: relative;
   vertical-align: top;
}

.editorThemeOptionLine[data-type="languageButtonDisplaySetting"] .languageAccentLineTitle {
   font-size: 11px;
}

.languageAccentFKeyCheckbox {
   border: 1px solid rgb(0, 0, 0);
   background: rgb(18, 36, 74);
   padding: 6px;
   font-size: 14px;
   display: inline-block;
   cursor: pointer;
   margin-right: 10px;
}

.languageAccentLineTitle i {
   position: absolute;
   right: 4px;
   top: 2px;
   font-size: 10px;
}

.languageAccentLineMakeDefault {
   position: absolute;
   right: 8px;
   top: 0px;
   opacity: 0;
   transition: opacity 0.4s ease 0s;
   cursor: pointer;
}

.languageAccentLineLabel:hover .languageAccentLineMakeDefault {
   opacity: 0.4;
}

.languageAccentLineLabel {
   display: inline-block;
   margin-right: 5px;
   position: relative;
   height: 32px;
   vertical-align: top;
   line-height: 32px;
   background: rgb(9, 30, 76);
   border: 1px solid black;
   width: 83px;
   text-align: center;
   color: lightgray;
   font-size: 11px;
}

.languageAccentLineLabel[data-icon="yes"] {
   width: 103px;
}

.languageAccentLineLabel[data-type="color"],
.languageAccentLineLabel[data-type="background"] {
   width: 110px;
   padding-right: 10px;
}

.editorThemeOptionLine[data-meta="mainEditorColors"] .languageAccentLineLabel,
.editorThemeOptionLine[data-meta="editorsActiveLineBackground"] .languageAccentLineLabel,
.editorThemeOptionLine[data-meta="gutterActiveColors"] .languageAccentLineLabel,
.editorThemeOptionLine[data-meta="editorGutterColors"] .languageAccentLineLabel {
   padding-left: 4px;
   padding-right: 2px;
   text-align: left;
}

.editorThemeOptionLine[data-meta="mainEditorColors"] .languageAccentLineMakeDefault,
.editorThemeOptionLine[data-meta="editorsActiveLineBackground"] .languageAccentLineMakeDefault,
.editorThemeOptionLine[data-meta="gutterActiveColors"] .languageAccentLineMakeDefault,
.editorThemeOptionLine[data-meta="editorGutterColors"] .languageAccentLineMakeDefault {}

.editorThemeOptionLine[data-meta="mainEditorColors"] .languageAccentLineMakeDefault:hover,
.editorThemeOptionLine[data-meta="editorsActiveLineBackground"] .languageAccentLineMakeDefault:hover,
.editorThemeOptionLine[data-meta="gutterActiveColors"] .languageAccentLineMakeDefault:hover,
.editorThemeOptionLine[data-meta="editorGutterColors"] .languageAccentLineMakeDefault:hover {
   opacity: 1;
}

.editorThemeOptionLine[data-meta="mainEditorColors"] .languageAccentLineMakeDefault.primary,
.editorThemeOptionLine[data-meta="editorsActiveLineBackground"] .languageAccentLineMakeDefault.primary,
.editorThemeOptionLine[data-meta="gutterActiveColors"] .languageAccentLineMakeDefault.primary,
.editorThemeOptionLine[data-meta="editorGutterColors"] .languageAccentLineMakeDefault.primary {
   right: 22px;
}

.editorThemeOptionLine[data-meta="mainEditorColors"] .languageAccentLineMakeDefault.secondary,
.editorThemeOptionLine[data-meta="editorsActiveLineBackground"] .languageAccentLineMakeDefault.secondary,
.editorThemeOptionLine[data-meta="gutterActiveColors"] .languageAccentLineMakeDefault.secondary,
.editorThemeOptionLine[data-meta="editorGutterColors"] .languageAccentLineMakeDefault.secondary {
   right: 7px;
}

.editorThemeOptionLine[data-meta="themeDropdown"] .languageAccentLineLabel {
   width: 140px;
}

.languageAccentLineInputContainer {
   min-width: 20px;
   display: inline-block;
   height: 30px;
   vertical-align: top;
   line-height: 30px;
}

#page .editorThemeOptionLine .languageAccentLineTitle,
#page .editorThemeOptionLine .languageAccentLineLabel,
#page .editorThemeOptionLine .languageAccentLineInputContainer,
#page .editorThemeOptionLine .languageAccentLineInputContainer input {
   vertical-align: top;
   height: 32px;
   line-height: 32px;
   overflow: hidden;
}

.oneHelpExclam {
   display: inline-block;
   margin-left: 15px;
}

#page .editorThemeOptionLine .oneHelpExclam {
   height: 30px;
   font-size: 26px;
   line-height: 30px;
   color: rgba(171, 196, 203, 0.41);
   font-weight: 600;
   cursor: pointer;
}

.editorThemeOptionLine[data-meta="gutterActiveColors"] .languageAccentLineInputContainer.line_background,
.editorThemeOptionLine[data-meta="editorGutterColors"] .languageAccentLineInputContainer.line_background,
.editorThemeOptionLine[data-meta="mainEditorColors"] .languageAccentLineInputContainer.line_background {
   min-width: 190px;
}

.editorThemeOptionLine[data-meta="mainEditorColors"] .languageAccentLineInputContainer.line_background {
   min-width: 90px;
}

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

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

#sampleOuterLanguageButtonsRow,
#placeholderEditorsTitle {
   background: black;
   text-align: center;
   height: 26px;
   line-height: 26px;
}

#placeholderEditorsTitle {
   font-size: 10.5px;
   position: relative;
}

.toggleSampleEditorSettings {
   position: absolute;
   right: 6px;
   color: rgb(139, 209, 242);
   top: 0px;
   font-size: 11px;
   cursor: pointer;
}

#sampleOuterLanguageButtonsRow {
   background: black;
   font-size: 0px;
}

.oneSampleOuterLanguageButton {
   width: 25%;
   display: inline-block;
   margin: 0px;
   text-align: center;
   height: 26px;
   line-height: 26px;
   font-size: 13px;
   border-right: 2px solid rgba(0, 0, 255, 0);
   border-bottom: 2px solid rgba(0, 0, 255, 0);
   border-image: initial;
   border-top: none;
   border-left: none;
}

.sampleEditorGutter {
   background: rgb(80, 80, 91);
   height: 20px;
   line-height: 20px;
   text-align: right;
   position: relative;
}

.oneSampleInnerLanguageButton,
.languageSampleSizeButton {
   display: inline-block;
   background: black;
   margin: 0px;
   border-right: 2px solid rgba(144, 238, 144, 0);
   border-bottom: 2px solid rgba(144, 238, 144, 0);
   border-image: initial;
   border-top: none;
   border-left: none;
}

.oneSampleInnerLanguageButton {
   width: 90px;
   text-align: center;
   height: 19px;
   overflow: hidden;
   vertical-align: top;
}

.oneSampleInnerLanguageButton[data-type="html"],
.oneSampleOuterLanguageButton[data-type="html"] {
   background: rgb(119, 18, 126);
   color: white;
}

#placeholderEditors[data-languagebuttondisplaysetting="lowercase"] .sampleLanguageButtonName {
   text-transform: lowercase;
}

#page #entire_outputs[data-backgroundactive="enabled"] .oneSampleInnerLanguageButton[data-active="true"],
#page #entire_outputs[data-backgroundactive="enabled"] .oneSampleOuterLanguageButton[data-active="true"] {
   background: black;
}

#page #entire_outputs[data-textactive="enabled"] .oneSampleInnerLanguageButton[data-active="true"],
#page #entire_outputs[data-textactive="enabled"] .oneSampleOuterLanguageButton[data-active="true"] {
   color: rgb(157, 237, 237);
}

.activeAccentEnabledArea {
   margin-left: 8px;
}

.activeAccentEnabledArea,
.activeAccentEnabledTitle {
   display: inline-block;
   vertical-align: top;
   height: 30px;
   line-height: 30px;
   cursor: pointer;
}

.activeAccentEnabledTitle {
   border: 1px solid rgb(20, 21, 21);
   background: rgb(3, 3, 57);
   padding: 0px 6px;
   vertical-align: top;
}

.activeAccentEnabledArea i {
   font-size: 18px;
   margin-left: 5px;
}

.editorFKeyDisplay {
   display: inline-block;
}

.sampleLanguageButtonName {
   display: inline-block;
}

.oneSampleInnerLanguageButton[data-type="javascript"],
.oneSampleOuterLanguageButton[data-type="javascript"] {
   background: rgb(9, 68, 16);
   color: white;
}

.oneSampleInnerLanguageButton[data-type="css"],
.oneSampleOuterLanguageButton[data-type="css"] {
   background: rgb(96, 102, 18);
   color: white;
}

.oneSampleInnerLanguageButton[data-type="text"],
.oneSampleOuterLanguageButton[data-type="text"] {
   background: rgb(43, 14, 109);
   color: white;
}

.oneSampleInnerLanguageButton,
.oneSampleOuterLanguageButton {
   cursor: pointer;
   position: relative;
}

.languageSampleSizeButton {
   height: 18px;
   width: 18px;
   text-align: center;
   line-height: 18px;
   color: rgb(163, 161, 161);
   font-size: 13px;
}

.sampleAceEditorContainer {
   height: calc(32% - 27px);
   padding: 6px;
   width: 100%;
   overflow: hidden;
   border: 0px solid black;
}

#sampleAceFour {
   position: absolute;
   top: 50px;
   height: calc(100% - 50px);
   width: 100%;
   z-index: 55;
   display: none;
}

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

#sampleEditorsLanguageSelectorInner {
   border: 2px solid yellow;
   background: black;
}

.sampleLanguageControlRow {
   background: rgb(59, 59, 84);
   color: lightblue;
}

.sampleLanguageControlRowTitle,
.controlRowInputArea {
   border: 1px solid rgb(77, 134, 44);
   margin-right: 5px;
   display: inline-block;
   padding: 0px 5px;
}

.controlRowInputArea {
   background: rgb(12, 12, 55);
   border: 1px solid black;
   cursor: pointer;
   width: 347px;
   font-size: 16px;
}

.sampleLanguageControlRowTitle {
   background: black;
   border: 1px solid rgb(127, 104, 144);
}

.languageSelectorTitle {
   height: 40px;
   line-height: 40px;
   background: rgb(38, 43, 83);
   color: lightblue;
   font-size: 18px;
   text-align: center;
   border-bottom: 1px solid rgb(116, 141, 150);
   position: relative;
}

.editorThemeLanguageSelector {
   border: 2px solid rgb(53, 63, 67);
   color: darkgray;
   margin-bottom: 50px;
   margin-top: 20px;
   width: 94%;
   margin-left: 3%;
   position: relative;
   z-index: 12;
   background: black;
   display: none;
}

.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: rgb(5, 5, 42);
   color: lightblue;
   font-size: 16px;
   border: 1px solid black;
   height: 22px;
   line-height: 22px;
}

.sampleLanguageSelectionButtonsRow {
   border: 2px solid black;
   background: rgb(0, 0, 0);
   padding: 10px 18px;
}

.sampleLanguageApplyChanges,
.sampleLanguageSetDefaults {
   cursor: pointer;
   background: rgb(9, 35, 26);
   color: lightgray;
   display: inline-block;
   margin: 3px 10px 3px 3px;
   font-size: 12px;
   padding: 6px;
}

.sampleLanguageSetDefaults {
   background: rgb(72, 67, 75);
}

.sampleLanguageSelectionRow {
   border: 2px solid black;
   margin: 8px;
   background: rgb(48, 42, 52);
   padding: 8px;
}

.sampleLanguageSelectionRowTitle {
   background: rgb(7, 5, 44);
   display: inline-block;
   width: 130px;
   padding: 5px;
   text-align: center;
   color: lightblue;
   border: 1px solid rgba(173, 216, 230, 0.29);
}

#sampleEditorsLanguageSelectorInner select {
   background: black;
   color: white;
   padding: 6px;
   width: 100px;
}

.sampleLanguageButtonsRow {
   background: black;
   border: 1px solid yellow;
   padding-left: 15px;
}

.sampleLanguageSelectionTitle {
   background: black;
   text-align: center;
   height: 30px;
   line-height: 30px;
}

.editorThemeDefaultButton,
.editorThemeSaveButton,
.sampleLanguageMakeDefault {
   background: rgb(4, 39, 17);
   display: inline-block;
   padding: 5px;
   margin: 6px;
   cursor: pointer;
   color: rgb(189, 189, 189);
   border: 1px solid black;
}

.editorThemeDefaultButton {
   background: rgba(52, 37, 53, 0.94);
}

#cc_top_bar.condensedView .logoText {
   top: 0px;
}

.smallCoverLogo .fullLogoText {
   display: none;
}

.fullLogoText,
.partialLogoText {
   display: inline-block;
}

.logoShowSession {
   display: none;
}

.cc_logo[data-usingsession="true"] .fullLogoText,
.cc_logo[data-fullcustom="true"] .fullLogoText {
   display: none;
}

.cc_logo[data-usingsession="true"] .logoShowSession,
.cc_logo[data-fullcustom="true"] .customLogoFull {
   display: inline-block;
}



.customLogoFull,
.customLogoPartial {
   display: none;
}

.cc_logo .cc_page_options_icon,
.cc_logo .condensedLayoutButton {
   transition: color 0.35s ease 0s, opacity 0.5s ease 0s;
   display: block;
   font-size: 19px;
   bottom: 3px;
   position: relative;
   opacity: 1;
}

.cc_logo .cc_page_options_icon {
   font-size: 22px;
}

.cc_page_options_icon {
   font-size: 23px;
}

#firstLoginBar .cc_page_options_icon,
#firstLoginBar .condensedLayoutButton,
#top_page_copver .cc_page_options_icon,
#top_page_cover .condensedLayoutButton {
   display: none;
}

#firstLoginBar .cc_logo,
#top_page_cover .cc_logo {
   font-size: 40px;
}

#page .cc_logo .condensedLayoutButton {}

.typedAnim {
   display: inline;
}

#firstLoginBar .typedAnimContainer,
#top_page_cover .typedAnimContainer {
   max-width: 80%;
   border: 1px solid rgb(0, 98, 128);
   max-height: 80px;
   background: rgba(5, 70, 80, 0.25);
   position: relative;
   display: inline-block;
   padding: 7px;
}

#page #cc_top_bar.condensedView .condensedLayoutButton {
   opacity: 1;
   display: inline-block;
}

#page #cc_top_bar.condensedView .cc_logo {
   top: 0px;
   height: 49px;
   overflow: hidden;
   right: 4px;
   text-shadow: rgba(70, 73, 82, 0.22) 3px 2px;
   padding-top: 6px;
   width: 22px;
}

#page #cc_top_bar.condensedView .condensedLayoutButton {
   font-size: 16px;
   line-height: 16px;
   cursor: pointer;
}

#page #cc_top_bar.condensedView .cc_page_options_icon {
   font-size: 18px;
}

.cc_settings_bar {
   display: none;
}

.cc_settings_bar div {
   vertical-align: top;
}

#page .topButtonLaunchCode {
   position: absolute;
   bottom: 0px;
   right: -1px;
   padding: 0px 2px;
   font-size: 9px;
   height: 20px;
   line-height: 20px;
   color: rgb(0, 182, 255);
   font-weight: unset !important;
}

#privacyButtonContainer .topButtonLaunchCode,
#languageSettingButtonContainer .topButtonLaunchCode {
   bottom: 4px;
}

#page .topButtonLaunchCode[data-aboveten="yes"] {
   color: rgb(208, 195, 208);
   opacity: 0.7;
   background: rgba(63, 35, 54, 0.58);
   display: none !important;
}

#previewPage .topButtonLaunchCode[data-aboveten="yes"] {
   background: rgb(7, 22, 62);
}

.topMenuButtonsInner {}

#cc_top_bar.condensedView .topMenuButtonsInner {
   line-height: 32px;
}

#content,
#codeCreate {
   z-index: 300;
}

#cc_top_bar,
.ccTopBarCopy {
   background: rgb(20, 22, 25);
   height: 100px;
   position: fixed;
   top: 0px;
   width: 100%;
   border-bottom: 1px solid rgb(60, 59, 59);
   z-index: 120;
}

#firstLoginBar,
#top_page_cover {
   z-index: 2000;
   border-bottom: 1px solid rgb(60, 59, 59);
   left: 0px;
   color: rgb(175, 175, 179);
   padding: 18px;
   font-family: times;
   font-size: 22px;
}

#firstLoginBar {
   display: none;
}

#top_page_cover {
   color: white;
   position: fixed;
   background: black;
   top: 0px;
   height: 100px;
   width: 100%;
}

#codeCreate[data-top-bar="hidden"] #cc_top_bar {
   z-index: 0;
}

#page.focusTopBar #cc_top_bar {
   top: 200px;
   z-index: 600;
}

#page.focusTopBar #presetNameDisplay {
   top: 266px;
}

#page.focusTopBar #codeCreate.condensedView #presetNameDisplay {
   top: 232px;
}

#cc_top_bar {}

.modulePageScreenshotCaption {
   border: 3px solid rgb(0 0 0 / 78%);
   color: rgb(187 188 193);
   font-size: 20px;
   background: #0c0f24;
   background: #111217;
   top: unset;
   bottom: 73px;
   width: 490px;
   right: 179px;
   bottom: 115px;
   box-shadow: rgb(121 117 164) 10px 6px 13px;
   border: 1px solid rgb(187 188 193 / 48%);
   padding: 9px;
   position:fixed;
   z-index: 444444;
   
}

.topBarButtonIcon {
   display: none;
}

#page #cc_top_bar.condensedView .topBarButtonFullText {
   display: none;
   height: 32px;
   line-height: 32px;
}

#page #cc_top_bar.condensedView #sessionName {
   font-size: 12px;
   height: 32px;
   padding-left: 5px;
}

#page #cc_top_bar.condensedView .topRowButtonContainer {
   width: 32px;
   height: 32px;
   padding: 0px;
   vertical-align: text-bottom;
}

#page #cc_top_bar.condensedView .topBarButtonIcon {
   display: block;
   line-height: 33px;
}

#page .cc_session_info[data-usericonsdisplay="preferIcons"] .topBarButtonFullText {
   display: none;
}

#page .cc_session_info[data-usericonsdisplay="preferIcons"] .topBarButtonIcon {
   display: block;
}

#page #cc_top_bar.condensedView {
   height: 51px;
   padding: 0px;
}

#cc_top_bar.condensedView #cc_top_menu {
   height: 47px;
   margin-top: 0px;
   margin-left: 0px;
   white-space: nowrap;
   border: 1px solid black;
}

#cc_error_page .ccTopBarCopy {
   left: 0px;
   opacity: 1;
}

.cc_todo {
   opacity: 0.15;
   height: 155px;
   overflow: hidden;
}

.cc_todo,
.cc_todo_button {
   display: none;
}

#outputConsoles {
   opacity: 1;
   left: 72%;
   z-index: 18000;
   top: 99px;
   height: 84%;
}

#jsLeft {
   height: 66%;
}

.normalSaveSet {
   background: rgb(8, 15, 29);
   border: 1px solid rgb(60, 72, 79);
}

#page .pointerCursor,
#page .cursorPointer {
   cursor: pointer;
}

#page .recordingTitleAndSwitch {
   display: inline-block;
   vertical-align: top;
   border: none !important;
}

.recordingLineNumber,
.recordingShownWord,
.recordingMenuTitleElement[data-type="number"] {
   display: inline-block;
   border: 1px solid black;
   width: 33px;
   text-align: center;
   background: rgba(0, 0, 0, 0.47);
   vertical-align: top;
   height: 32px;
   overflow: hidden;
}

.cc_on_off_switch {
   display: inline-block;
   border: 1px solid yellow;
   text-align: left;
   cursor: pointer;
   color: lightblue;
   font-size: 20px;
}

.recordingLocationsMenuLine .cc_on_off_switch,
.recordingMenuTitleElement[data-type="shown"] {
   width: 58px;
   text-align: center;
   margin-left: 7px;
   border: none;
}

.cc_on_off_switch .fas {
   display: none;
}

.recordingLocationsMenuLine .cc_on_off_switch {
   background: rgba(19, 21, 22, 0.57);
   color: rgb(168, 168, 186);
   font-size: 17px;
}

.recordingLocationsMenuLine[data-shown="on"] .fa-check-circle,
.recordingLocationsMenuLine[data-shown="off"] .fa-circle,
.recordingLocationsMenuLine[data-shown="on"] .fa-check-square,
.recordingLocationsMenuLine[data-shown="off"] .fa-square {
   display: inline-block;
}

.shortcutSlotArrow {
   height: 46px;
   line-height: 46px;
}

#entire_shortcuts[data-width="small"] .fa-arrow-left,
#entire_shortcuts[data-width="small"] .fa-arrow-right {
   border: 1px solid rgba(255, 255, 255, 0);
   height: 46px;
   line-height: 46px;
}

.addAPicker {
   background: rgb(43, 55, 75);
   display: inline-block;
   color: rgb(193, 193, 193);
   cursor: pointer;
   font-size: 14px;
   line-height: 28px;
   padding: 0px 4px;
   border: 1px solid rgb(56, 55, 55);
   border-radius: 6%;
   margin-left: 10px;
}

.addAPicker[data-colorformat="name"],
.addAPicker[data-colorformat="name"] .addPickerText {
   background: dimgray;
   cursor: default !important;
}

.onePreferenceRadioGroup {
   display: inline-block;
   margin-right: 6px;
}

#previewPage .onePreferenceRadioGroup {
   border: 1px solid rgb(31, 31, 31);
   margin-right: 19px;
   background: rgb(23, 23, 77);
   padding: 0px 5px;
   min-width: 90px;
}

.onePreferenceRadioGroup[data-active="yes"] {
   color: rgb(128, 176, 191);
}

#previewPage .onePreferenceRadioGroup[data-active="yes"] {
   color: rgb(63, 177, 177);
}

#dropdown_preview_fullLogoText,
#dropdown_preview_partialLogoText {
   width: 230px;
   background: #1a1a37;
   color: #98b6c6;
}

.makeDefaultSet {
   background: rgb(21, 21, 40);
   margin: 0px 10px 0px 0px;
   font-size: 0.85em;
}

.newSetButton {
   background: rgb(15, 15, 22);
   margin: 0px;
}

.deleteSetButton {
   background: rgb(24, 11, 16);
}

.newShortcutButton,
.toggleImportantShortcuts {
   background: rgb(36, 47, 68);
   padding: 0px;
   font-size: 10px;
   width: 25px;
   height: 25px;
   text-align: center;
   position: absolute;
   right: 12px;
   margin: 0px;
   top: 4px;
}

#entire_shortcuts[data-activeshortcuts="styles"] .newShortcutButton {
   display: none;
}

.newPickerPlus {
   top: 8px;
   line-height: 25px;
   color: lightgray;
}

.toggleImportantShortcuts {
   left: 8px;
   width: 17px;
   background: rgba(36, 47, 68, 0.53);
   opacity: 0.3;
   cursor: pointer;
}

.shortcutButtonsRow {
   text-align: center;
   background: rgb(19, 20, 29);
   position: relative;
}

#entire_shortcuts[data-width="medium"] .shortcutButtonsRow,
#entire_shortcuts[data-width="small"] .shortcutButtonsRow {
   padding-right: 20px;
}

.saveStylesObjectButton {
   background: rgb(2, 8, 22);
   text-align: center;
   width: 30%;
   display: inline-block;
   border: 1px solid rgba(128, 128, 128, 0.26);
   cursor: pointer;
   margin: 4px 0px;
}

.stylesToDefaults {
   width: 30px;
   opacity: 0.4;
   position: absolute;
   right: 39px;
}

.cc_user_settings_button {
   background: rgb(29, 35, 53);
   height: 40px;
   line-height: 40px;
   padding: 0px 5px;
   top: 0px;
   vertical-align: top;
   box-shadow: rgba(16, 16, 16, 0.77) 2px 2px;
   position: relative;
}

#cc_top_bar.condensedView .cc_user_settings_button {
   height: 30px;
   width: 30px;
   overflow: hidden;
   font-size: 0.9em;
   line-height: 20px;
}

#cc_top_bar .cc_user_settings_button .iconOnly {
   display: none;
}

#cc_top_bar.condensedView .cc_user_settings_button .fullText {
   display: none;
}

#cc_top_bar.condensedView .cc_user_settings_button .iconOnly {
   display: block;
   color: rgb(186, 189, 198);
   line-height: 30px;
   text-align: center;
}

.shortcutsRevertButton {
   position: absolute;
   right: 8px;
   top: 0px;
   opacity: 0.5;
   transition: opacity 0.2s ease 0s;
   cursor: pointer;
   height: 43px;
   line-height: 43px;
}

.shortcutButtonsRow .shortcutsRevertButton {
   height: 32px;
   line-height: 32px;
}

.shortcutsRevertButton:hover {
   opacity: 0.8;
}

.shortcutsRevertButton.noRevert,
.shortcutsRevertButton.noRevert:hover {
   opacity: 0.2;
   cursor: default;
}

#entire_shortcuts[data-width="small"] .shortcutsRevertButton {
   top: 15px;
   height: 15px;
   line-height: 15px;
   font-size: 0.8em;
}

#select_theme_bar {
   padding-left: 10px;
   padding-right: 20px;
   color: rgb(224, 224, 224);
   font-size: 18px;
   display: none;
}

#page .sessionSave {
   background: rgb(28, 34, 45);
   height: inherit;
}

.saveButtonOverlay {
   position: absolute;
   top: 0px;
   left: 0px;
   height: 100%;
   width: 100%;
   background: none;
   z-index: 5;
   color: rgba(255, 255, 255, 0.01);
   cursor: pointer;
}

.saveButtonOverlay.temporarilyDisabled {
   background: black;
   opacity: 0.6;
   cursor: pointer;
}

.sessionFork {
   background: rgb(36, 40, 49);
}

#page .newSession {
   background: rgb(21, 30, 43);
   height: inherit;
}

.showAllSessions {
   background: rgb(36, 40, 49);
}

.selectSetRow {
   background: rgb(19, 20, 29);
   text-align: center;
   height: 46px;
   border-bottom: 1px solid rgba(86, 86, 86, 0.44);
   position: relative;
}

#entire_shortcuts[data-width="medium"] .colorSetArrow {
   height: 46px;
   line-height: 46px;
}

.selectSetButtonsRow {
   height: 51px;
   padding-top: 9px;
}

#codeCreate .selectSetRow select,
#page .cc_select[data-var="shortcutSet"],
#page .cc_select[data-var="colorSet"] {
   border: 1px solid rgb(45, 45, 45);
   color: rgb(147, 144, 144);
   margin-top: -4px;
   background: black;
   position: relative;
   vertical-align: top;
   top: 11px;
   margin-left: 5px;
   margin-right: 5px;
   width: 160px;
   text-align: left;
   padding-left: 6px;
}

#page .glowingBox {
   box-shadow: rgb(81, 203, 238) 0px 0px 5px;
   border: 1px solid rgba(81, 203, 238, 0.31);
}

#page .cc_select[data-var="shortcutSet"] .activeSelectOption,
#page .cc_select[data-var="colorSet"] .activeSelectOption {
   max-width: calc(100% - 20px);
}

#entire_shortcuts[data-width="medium"] .makeDefaultSet,
#entire_shortcuts[data-width="small"] .makeDefaultSet {
   font-size: 0.6em;
   white-space: nowrap;
}

.makeDefaultHalfWidth {
   display: none;
}

#entire_shortcuts[data-width="small"] .makeDefaultHalfWidth,
#entire_shortcuts[data-width="small"] .newForkHalfWidth {
   display: inline-block;
}

#page .newForkFullWidth {
   font-size: 10px;
}

#page #entire_shortcuts[data-width="large"] .newForkFullWidth {
   font-size: 13px;
}

#page .newForkHalfWidth {
   font-size: 8px;
}

#entire_shortcuts[data-width="small"] .makeDefaultFullWidth,
#entire_shortcuts[data-width="small"] .newForkFullWidth {
   display: none;
}

.selectSetRow .divButton {
   margin: 0px 1% 0px 0px;
   border: 1px solid rgb(39, 41, 42);
   width: 22%;
   font-size: 0.9em;
   color: rgb(197, 212, 216);
   height: 34px;
   overflow: hidden;
}

.editBasicColorsButton {
   background: rgb(35, 36, 38);
   padding: 5px;
   cursor: pointer;
}

.defaultBasic .divButton {
   height: 18px;
   line-height: 15px;
   font-size: 13px;
   padding: 3px;
   overflow: hidden;
   width: 45%;
   color: white !important;
}

.setDropdownLine {
   color: rgb(157, 156, 156);
   cursor: default;
   font-size: 1.05em;
}

.cc_session_info .divButton {
   line-height: 40px;
   padding: 0px 5px;
   position: relative;
   margin: 0px 0.3% 0px 0px;
   width: 9%;
   vertical-align: top;
   text-align: center;
   color: rgb(208, 223, 228);
   display: inline-block;
}

#page .toggleCondensedPage[data-buttondisplay="never"] {
   display: none;
}

#page .toggleCondensedPage[data-buttondisplay="widthOrHeight"] {
   display: none;
}

@media only screen and (max-width: 800px),
(max-height: 800px) {
   #page .toggleCondensedPage[data-buttondisplay="widthOrHeight"] {
      display: inline-block;
   }
}

.sessionButtonContainer {
   display: inline-block;
   width: 9%;
   vertical-align: top;
   height: 42.22px;
}

.sessionButtonContainer.buttonContainerSave {
   position: relative;
}

.topRowButtonContainer {
   box-shadow: rgba(16, 16, 16, 0.5) 2px 2px;
   overflow: hidden;
}

.sessionButtonContainer .subMenu,
.subMenu {
   background: rgba(20, 22, 25, 0.94);
   border-right: 1px solid rgba(96, 96, 96, 0.58);
   border-bottom: 1px solid rgba(96, 96, 96, 0.58);
   border-left: 1px solid rgba(96, 96, 96, 0.58);
   border-image: initial;
   border-top: none;
   position: absolute;
   top: 49px;
   width: 160px;
   padding: 4px;
   text-align: center;
   display: none;
}

.sessionButtonContainer .subMenuButton,
.subMenuButton {
   font-size: 0.8em;
   height: 27px;
   line-height: 27px;
   background: rgb(41, 43, 49);
   margin-bottom: 4px;
   color: rgb(208, 223, 228);
   cursor: pointer;
   border: 1px solid rgba(105, 105, 105, 0.06) !important;
}

.sessionButtonContainer .divButton {
   width: 100%;
}

#page #codeCreate .stayVisibleTouch {
   display: inline-block !important;
}

.cc_session_info .cc_run,
.cc_session_info .cc_colorPickerButton,
#page .toggleCondensedPage {
   width: 40px;
   background: rgb(19, 35, 51);
   color: rgb(136, 136, 156);
   margin-right: 0px;
   box-shadow: rgba(16, 16, 16, 0.5) 2px 2px;
}

#cc_top_bar.condensedView .toggleCondensedPage {
   color: rgb(157, 157, 186);
   background: rgb(19, 55, 86);
}

.noClickFunk {
   height: 20px;
   overflow: hidden;
   border: 2px solid rgba(0, 255, 255, 0.27) !important;
   line-height: 18px !important;
   display: none !important;
}

#page .topBarButtonIcon,
#page #codeCreate .mainTopMenuIcon {
   color: rgb(136, 136, 156);
}

#codeCreate .cc_open_preview,
.autosaveButtonContainer {
   position: absolute;
   top: 5px;
   right: 6px;
   height: 20px;
   width: 20px;
   line-height: 20px;
   text-align: center;
   padding: 0px;
   margin: 0px;
   background: rgb(19, 35, 51);
   color: rgb(136, 136, 156);
   cursor: pointer;
   z-index: 30;
   box-shadow: rgba(16, 16, 16, 0.5) 2px 2px;
}

#codeCreate .cc_open_preview {
   border: 1px solid rgb(30, 32, 35);
}

.autosaveButtonContainer {
   top: 30px;
   background: none;
   font-size: 12px;
   color: rgb(165, 164, 164);
}

.autoSaveButton {
   transition: background 0.1s ease 0s;
}

#page #cc_top_bar.condensedView .cc_open_preview,
#page #cc_top_bar.condensedView .autosaveButtonContainer {
   height: 15px;
   width: 15px;
   font-size: 7px;
   overflow: hidden;
}

#page #cc_top_bar.condensedView .cc_open_preview i,
#page #cc_top_bar.condensedView .autosaveButtonContainer i {
   overflow: hidden;
   height: 15px;
   line-height: 15px;
}

#page #cc_top_bar.condensedView .autosaveButtonContainer {
   top: 25px;
}

#page .top100 {
   top: 100px;
}

.notAutosaving {
   background: rgb(63, 34, 37);
}

.isAutosaving {
   background: rgba(11, 68, 11, 0.68);
}

.cc_session_info .divButton,
.cc_session_info select,
.cc_session_info #sessionName,
#page .session_name_copy {
   border: 1px solid rgb(30, 32, 35);
}

#sessionName {
   border: none !important;
}

#page[data-recordingbar="show"] .cc_session_info input,
.cc_session_info select {
   vertical-align: top;
}

#selectSession,
#page .select_session_copy,
#page .cc_select[data-var="selectSession"] {
   height: 40px;
   color: rgb(156, 156, 156);
   margin-bottom: 2px;
   padding: 0px 6px;
   border: none;
}

#selectSession {
   display: none;
}

#page .cc_select[data-var="selectSession"],
#page .cc_select[data-var="selectSession"] .activeSelectOption,
#page .cc_select[data-var="selectSession"] .caretDown {
   height: 42px;
   line-height: 42px;
}

#page #cc_top_bar.condensedView .fullLogoText {
   display: none;
}

#page #cc_top_bar.condensedView .partialLogoText {
   display: inline-block;
   font-size: 36px;
   /* margin-top: 6px; */
}

#page #cc_top_bar.condensedView .cc_select[data-var="selectSession"],
#page #cc_top_bar.condensedView .cc_select[data-var="selectSession"] .activeSelectOption,
#page #cc_top_bar.condensedView .cc_select[data-var="selectSession"] .caretDown {
   height: 33px;
   line-height: 33px;
}

#codeCreate .cc_page_options_icon.optionsActive {
   color: white;
}

@media only screen and (min-width: 500px) {
   #page #cc_top_bar.condensedView #cc_top_menu .renderLight {
      height: 14px;
      width: 14px;
      top: unset;
      border: 1px solid rgba(20, 20, 20, 0.85);
      bottom: 3px;
      position: absolute;
      left: 3px;
   }

   #page #cc_top_bar.condensedView #cc_top_menu .smallTopMenuButtons {
      width: 150px;
      vertical-align: top;
      height: 34px;
      bottom: 2px;
      padding-top: 3px;
   }

   #page #cc_top_bar.condensedView #cc_top_menu .oneSmallTopMenuButton {
      width: 32px;
      height: 32px;
      font-size: 12px;
      line-height: 32px;
      vertical-align: top;
   }

   #page #cc_top_bar.condensedView .cc_logo {
      right: 0px;
      width: 135px;
      padding-right: 0px;
   }

   #cc_top_bar.condensedView .cc_logo .cc_page_options_icon,
   .cc_logo .condensedLayoutButton {
      right: 0px;
      position: relative;
      display: block;
   }

   #cc_top_bar .condensedLayoutButton {
      display: block;
      cursor: pointer;
   }

   #cc_top_bar.condensedView .condensedLayoutButton {}

   .cc_logo .cc_page_options_icon {
      bottom: unset;
      top: 0px;
   }
}

#editedCount,
#allEditedItems,
#showTextFile,
#allModuleCheckboxes {
   height: 80px;
   width: 30%;
   background: rgb(26, 26, 68);
   position: fixed;
   top: 51%;
   right: 0px;
   border: 3px solid yellow;
}

#allModuleCheckboxes {
   height: 81%;
   background: rgb(0, 0, 0);
   z-index: 33;
   border: 3px solid rgba(62, 124, 202, 0.49);
   padding: 30px 9px 9px;
   right: unset;
   left: 27%;
   width: 67%;
   top: 55px;
   overflow-y: auto;
   position: absolute;
}

#oneModuleGifEntryText {
   background: rgb(28, 2, 25);
   position: absolute;
   bottom: 5px;
   border: 3px solid rgb(49, 91, 141);
   height: 122px;
   width: 96%;
   display: none;
}

.moduleGifEntryInner {
   border: 1px solid cyan;
   padding: 4px;
   height: 89px;
   overflow: hidden;
   font-size: 12px;
}

.oneModuleGifEntryTextTitle {
   background: black;
   position: absolute;
   right: 0px;
   padding: 2px;
   bottom: 0px;
}

.allModuleCheckboxesTitle {
   background: rgb(51, 47, 54);
   padding: 6px;
   width: unset;
   opacity: 0.7;
   position: absolute;
   top: 0px;
   right: 0px;
}

.pnvTitle {
   background: rgb(58, 56, 59);
   padding: 5px;
   color: rgb(204, 209, 211);
   position: relative;
   margin-left: 8px;
   width: 97%;
   margin-bottom: 13px;
   font-size: 13px;
   display: none;
}

.pnvTitle.matches {
   background: rgb(49, 30, 52);
}

#allModuleCheckboxes[data-debugstatus="yes"] {
   border: 2px solid pink;
   background: rgb(1, 1, 0);
}

#allModuleCheckboxes[data-debugstatus="yes"] .pnvTitle {
   display: block;
}

#allModuleCheckboxes[data-debugstatus="yes"] .moduleAreaGlossaryNumber,
#allModuleCheckboxes[data-debugstatus="yes"] .moduleAreaLineItem {
   display: block;
}

.moduleCheckboxAreaTitle {
   position: absolute;
   background: rgb(77, 19, 64);
   right: 0px;
   bottom: 0px;
   padding: 8px;
}

.glossaryLineItem,
.glossaryNiceName {
   display: inline-block;
}

.moduleAreaGlossaryNumber,
.moduleAreaLineItem,
.moduleAreaNiceName {
   padding: 2px;
   border: 1px solid black;
   background: rgb(55, 62, 77);
   margin: 8px;
   color: white;
   font-size: 12px;
   white-space: nowrap;
   overflow: hidden;
   display: none;
}

.moduleAreaNiceName {
   display: block;
}

#actualCheckBoxes {
   position: relative;
   background: rgb(26, 49, 76);
   height: calc(100% - 230px);
   padding-top: 14px;
   overflow-y: auto;
}

.moduleCheckboxLine {
   background: rgb(52, 54, 77);
   cursor: pointer;
   margin: 4px;
   border: 1px solid rgb(42, 40, 42);
   padding: 5px;
   position: relative;
   display: inline-block;
   width: 30%;
   white-space: nowrap;
   overflow: hidden;
}

#page .moduleCheckboxLine[data-key="user_settings"] {
   background: rgb(44, 44, 11);
}

#page .moduleCheckboxLine[data-key="main_render"],
#page .moduleCheckboxLine[data-key="scratchpad_editor"],
#page .moduleCheckboxLine[data-key="item_creation"],
#page .moduleCheckboxLine[data-key="style_editor"] {
   background: rgb(89, 54, 104);
}

#page .moduleCheckboxLine[data-key="main_editors"],
#page .moduleCheckboxLine[data-key="shortcuts_section"] {
   background: rgb(35, 76, 74);
}

#page .moduleCheckboxLine[data-key="persistent_color_picker"] {
   background: rgb(57, 112, 135);
}

.myModuleTitle {
   width: calc(100% - 40px);
   overflow: hidden;
}

.moduleCheckboxLine[data-key="measurements_ruler"] .myModuleTitle,
.moduleCheckboxLine[data-key="measurements_ruler"] .myModuleTitle,
.moduleCheckboxLine[data-key="show_all_sessions"] .myModuleTitle,
.moduleCheckboxLine[data-key="measurements_ruler"] .myModuleTitle,
.moduleCheckboxLine[data-key="preview_top_bottom"] .myModuleTitle,
.moduleCheckboxLine[data-key="dimensions_indicator"] .myModuleTitle {
   font-size: 13px;
}

.moduleCheckboxLine[data-key="preview_top_bottom"] .myModuleTitle {
   font-size: 12px;
}

.moduleCheckboxLine:nth-child(2n+1) {
   background: rgb(9, 10, 46);
   color: rgb(203, 201, 209);
}

.moduleCheckboxLine .moduleCheckboxArea {
   position: absolute;
   right: 8px;
   top: 1px;
   background: rgb(51, 24, 45);
   padding: 4px 10px;
}

.moduleCheckboxArea .fa-check-square {
   color: rgb(58, 177, 58);
   font-size: 23px;
}

.myModuleKey {
   opacity: 0.2;
   display: none;
}

.condensedOrientationArea {
   position: absolute;
   height: 12px;
   width: 9px;
   left: 0px;
   z-index: 333;
   cursor: pointer;
   bottom: 6px;
}

.condensedOrientationArea[data-orientation="landscapeMode"] {
   transform: rotate(-90deg);
}

#cc_top_bar.condensedView #cc_top_menu .condensedOrientationArea {
   position: relative;
   height: 34px;
   width: 34px;
   margin: 9px 0px 0px;
   display: inline-block;
   vertical-align: top;
   opacity: 1;
   border: none;
   bottom: 9px;
   cursor: default;
}

#styleEditorDynamicPicker {
   position: fixed;
   height: 80px;
   width: 181px;
   z-index: 333;
   border: 4px solid rgb(0, 255, 227);
   top: 700px;
   opacity: 0.3;
   left: -1000px;
}

.condensedOrientationArea[data-orientationbuttons="hide"] .orientationSquare {
   display: none;
}

#cc_top_bar.condensedView #cc_top_menu .condensedOrientationArea[data-orientationbuttons="hide"] {
   width: 15px;
}

.condensedOrientationArea[data-arrows="hide"] .condensedSizeArrow {
   display: none;
}

.smallOrientationArea .condensedSizeArrow {
   display: none;
}

.orientationSquare {
   background: rgb(92, 92, 105);
   border: 1px solid rgb(25, 25, 25);
   height: 50%;
   width: 80%;
   cursor: pointer;
}

#cc_top_menu .orientationSquare {
   width: 67%;
}

.condensedSizeArrow {
   position: absolute;
   right: 0px;
   background: rgba(23, 22, 22, 0.33);
   height: 17px;
   line-height: 17px;
   overflow: hidden;
   color: rgb(136, 136, 156);
   width: 10px;
   cursor: pointer;
   text-align: center;
}

.condensedSizeUp {
   bottom: 0px;
}

.condensedSizeDown {
   top: 0px;
}

.condensedSizeUp[data-proportions="hundredZero"],
.condensedSizeDown[data-proportions="zeroHundred"] {
   background: rgba(77, 108, 114, 0.33);
}

.condensedSizeDown[data-proportions="hundredZero"] {
   display: none;
}

.condensedSizeUp[data-proportions="zeroHundred"] {
   display: none;
}

#page .cc_select[data-var="selectSession"] {
   padding-left: 15px;
   max-width: 182px;
   min-width: 130px;
}

.partialLogoText {
   display: none;
}

.smallCoverLogo .partialLogoText {
   display: inline-block;
}

.currentStyleDisplay {
   font-size: 13px;
   background: rgb(21, 21, 21);
   text-align: center;
   padding: 3px 0px;
   cursor: default;
   margin-top: 2px;
}

.newSetEntry {
   border: 1px solid rgb(43, 43, 43);
   padding: 8px;
   background: rgb(42, 49, 73);
   text-align: center;
}

.showCCInfoButton {
   display: none;
   width: 136px !important;
   background: rgb(111, 74, 81) !important;
}

.languageButtons {
   text-align: center;
   height: 31px;
}

.buttonText .fKeyNumber {
   cursor: pointer;
}

#entire_outputs[data-width="small"] .buttonText .fKeyNumber,
#entire_outputs[data-width="tiny"] .buttonText .fKeyNumber {
   display: none;
}

.descriptionTitle {
   background: rgb(37, 37, 37);
   text-align: center;
   padding: 5px 49px 5px 0px;
   cursor: default;
   color: white;
}

.descriptionTitle span {
   font-size: 1.1em;
}

.descriptionSection {
   border: 1px solid rgba(128, 128, 128, 0.21);
   z-index: 5;
   width: 53%;
   min-width: 400px;
   position: absolute;
   height: 30%;
   overflow: hidden;
   opacity: 0;
   display: none;
   top: 4px;
   left: 2%;
}

.descriptionContainer {
   transition: max-height 0.4s linear 0s;
   overflow: hidden;
   position: relative;
   border-right: none;
   border-bottom: none;
   border-left: none;
   border-image: initial;
   border-top: 1px solid rgba(218, 218, 218, 0.48);
   height: calc(100% - 32px);
}

.cc_set_title {
   margin-right: 13px;
   position: relative;
   height: 46px;
   line-height: 46px;
   display: inline-block;
}

#entire_shortcuts[data-width="medium"] .cc_set_title,
#entire_shortcuts[data-width="small"] .cc_set_title {
   width: 26px;
   overflow: hidden;
   border: 1px solid green;
   margin: 0px;
   display: none;
}

#allModuleMatches,
#actualCheckboxes {
   border: 1px solid rgba(71, 163, 33, 0.88);
   height: calc(100% - 114px);
   overflow-y: auto;
   padding-top: 28px;
   position: relative;
   margin-top: 30px;
   padding-left: 12px;
}

#allModuleMatches {
   border: 2px solid rgb(123, 123, 105);
   display: none;
   padding-top: 39px;
}

#allModuleMatchesInner {
   border: 1px solid green;
   padding: 15px;
   height: 97%;
   overflow-y: auto;
}

.oneModuleMatchContainer {
   border: 1px solid rgb(55, 54, 54);
   margin-bottom: 25px;
   padding: 8px;
   background: rgb(38, 43, 51);
}

.matchContainerTitle {
   background: rgb(21, 47, 80);
   padding: 18px;
   color: rgb(203, 224, 219);
   font-size: 15px;
}

.matchContainerTitle {
   position: relative;
}

.moduleMatchKey {
   float: right;
   opacity: 0.6;
   color: rgb(213, 170, 219);
}

.oneModuleMatchContainer:nth-child(2n+1) {
   background: rgb(2, 2, 27);
}

#allModuleMatches .oneIndividualMatch {
   background: rgb(55, 17, 63);
   margin: 12px;
   padding: 12px;
   border: 3px solid black;
   position: relative;
   font-size: 16px;
}

#allModuleMatches .oneIndividualMatch:nth-child(2n+1) {
   background: rgb(40, 98, 120);
}

.oneIndividualMatchMeta {
   float: right;
   opacity: 0.4;
   max-width: 60%;
   white-space: nowrap;
   overflow: hidden;
   font-size: 15px;
}

.oneIndividualMatchNumber {
   display: block;
   right: 0px;
   position: relative;
   text-align: right;
   opacity: 0.6;
   color: lightblue;
   font-size: 13px;
}

#saveModuleMatchChanges,
#toggleModuleDebug,
#switchCheckboxesMatches {
   background: rgb(38, 42, 57);
   padding: 5px;
   cursor: pointer;
   display: inline-block;
   margin: 6px;
}

#toggleModuleDebug {
   background: darkblue;
}

.allModuleMatchesTitle,
.actualCheckboxesAreaTitle {
   background: rgb(59, 42, 42);
   padding: 4px;
   opacity: 0.6;
   width: 200px;
   position: absolute;
   right: 0px;
   top: 0px;
}

.allModuleMatchesTitle {
   background: rgb(1, 31, 23);
   width: unset;
}

.newButtonSetRow {
   padding-top: 6px;
}

.newButtonSetRow .divButton {
   margin: 0px 14px;
   width: 110px;
   color: lightgray;
}

.forkSetButton {
   background: rgba(33, 33, 51, 0.98);
}

.cc_div_cover {
   position: absolute;
   background: rgba(24, 24, 24, 0.97);
   left: 0px;
   top: 0px;
   width: 100%;
   height: 100%;
   z-index: 8;
   padding-top: 70px;
   text-align: center;
   color: white;
}

#templatesAndSessionsCover,
#customizeCover,
#deleteTemplateCover {
   opacity: 1;
   background: rgb(0, 0, 0);
   display: none;
   z-index: 35;
   color: rgb(255, 255, 255);
   position: absolute;
   height: 100%;
}

#deleteTemplateCover {
   width: 100%;
   height: calc(100% - 30px);
   top: 30px;
   opacity: 0.8;
}

#customizeCover .coverTitle {
   display: none;
}

.colorPickerTooSmall,
#layoutOverlayTooSmall,
.languageSelectionTooSmall {
   position: absolute;
   top: 20px;
   left: 0px;
   width: 100%;
   height: 100%;
   z-index: 9;
   background: black;
   color: rgb(212, 212, 212);
   border-top: 1px solid dimgray;
   padding: 10px;
   display: none;
   font-family: consolas;
}

#page .colorPickerTooSmall,
#page .languageSelectionTooSmall {
   background: black;
   height: calc(100% - 20px);
   padding: 5px;
   border: 1px solid rgba(83, 101, 117, 0.53);
}

#page .languageSelectionTooSmall {
   border: 1px solid rgba(83, 101, 117, 0.53);
   padding: 15px;
}

.languageSelectionTooSmall {
   top: 37px;
   border: none;
}

#layoutOverlayTooSmall {
   font-family: consolas;
   top: 0px;
   padding: 0px;
   border-top: none;
   z-index: 100;
}

.layoutOverlayTooSmallTitle {
   background: rgb(17, 16, 51);
   border-bottom: 1px solid rgb(126, 144, 186);
   height: 35px;
   font-family: arial;
   line-height: 35px;
   text-align: center;
}

.layoutOverlayTooSmallText {
   padding: 8px;
   color: rgb(152, 172, 219);
}

.templatesWindowTooSmall,
#layoutOverlayTooSmall {}

.opacity0 {
   opacity: 0;
}

.copyTheShortcut {
   color: rgb(153, 156, 187);
   position: absolute;
   top: 30%;
   right: 10px;
   transition: color 0.1s linear 0s;
}

#page .theShortcutRowsContainer .copyTheShortcut {
   top: 0px;
   vertical-align: top;
   position: relative;
   display: inline-block;
   height: 44px;
   line-height: 38px;
   font-size: 12px;
   width: 51px;
   right: 0px;
   text-transform: capitalize;
}

#page #allColorRows .copyTheShortcut {
   height: 60px;
   line-height: 50px;
   text-transform: capitalize;
}

#page #allColorRows .copyTheShortcut {}

#entire_shortcuts[data-snippetcopybuttons="hide"] .copyTheShortcut,
#entire_shortcuts[data-snippetcopybuttons="hideText"] #allShortcutRows .copyTheShortcut,
#entire_shortcuts[data-snippetcopybuttons="hideColors"] #allColorRows .copyTheShortcut {
   display: none;
}

.copyTheShortcut:hover,
.copyTheShortcut.copied {
   color: white;
}

.colorDivRow .copied {
   color: white !important;
}

#entire_shortcuts[data-activeshortcuts="styles"] #allShortcutRows .copyTheShortcut {
   display: none;
}

.snippet_input::selection {
   background: rgb(153, 172, 198);
   color: rgb(229, 229, 229);
}

#fetchLink::selection {
   background: rgb(173, 174, 177);
   color: rgb(220, 220, 220);
}

.languageDisplayName {
   text-transform: capitalize;
}

.languageDisplayNameAbbreviated {
   display: none;
}

.languageDisplayName[data-languagename="css"],
.languageDisplayName[data-languagename="html"],
.languageDisplayName[data-languagename="php"] {
   text-transform: uppercase;
}

.languageDisplayName[data-languagename="python"] {
   text-transform: capitalize;
}

.currentLanguageName .languageDisplayName[data-languagename="python"] {
   text-transform: unset;
}

#outputsContainer.horizontalSplit .sideLanguageButton {
   left: -49px;
   top: 25px;
   transform: rotate(-90deg);
}

#outputsContainer.horizontalSplit .minimize,
#outputsContainer.horizontalSplit .maximize {
   left: -24px;
   top: 80px;
}

#outputsContainer.horizontalSplit .minimize {
   top: 107px;
}

.keyboardKey {
   border: 1px solid gray;
   padding: 2px 6px;
   display: inline-block;
}

.quickSwitchIndex .keyboardKey {
   padding: 2px 10px;
   display: inline-block;
   background: rgba(0, 0, 0, 0.29);
   border: 1px solid rgb(97, 97, 97);
   line-height: 26px;
   height: 30px;
}

.keyHintRow .keyboardKey {
   border: 1px solid rgba(47, 61, 68, 0.53);
   color: rgb(169, 169, 169);
   background: rgb(16, 16, 16);
   width: 41px;
   text-align: center;
   font-size: 10.5px;
   height: 31.6px;
   cursor: default;
   text-transform: capitalize;
   padding: 0px;
   box-shadow: rgba(47, 61, 68, 0.55) 1.5px 1.5px 0px 0px;
   overflow: hidden;
   font-family: tahoma;
}

.keyHintRow .keyboardKey.makeBigger {
   height: 38px;
}

.keyHintRow[data-actualkey="Shift+F8"] .keyboardKey {
   font-size: 10px;
}

.keyboardKey .oneSpecialLine {
   height: 14px;
   font-size: 9px;
   line-height: 14px;
}

.oneSpecialLineShift,
.oneSpecialLineKey {
   display: inline-block;
   vertical-align: top;
}

#optionsWindow .altShiftNumber .oneSpecialLine {
   font-size: 7.5px;
   white-space: nowrap;
}

.languageNotFoundMessage {
   transition: opacity 0.4s ease 0s;
   text-align: center;
   min-height: 26px;
   opacity: 0;
   width: 92%;
   margin-left: 4%;
   background: rgba(0, 0, 0, 0.35);
   margin-top: 4px;
   position: relative;
}

.createItemsInputArea .languageNotFoundMessage {
   width: 88%;
   margin-left: 6%;
   display: none;
}

.keyboardKey .oneSpecialLineAlt {
   font-size: 9px;
}

.keyboardKey .oneSpecialLineNumber {}

.keyboardKey .oneSpecialLineText {
   vertical-align: top;
}

.keyboardKey.makeBigger .oneSpecialLineText {
   line-height: 12px;
   white-space: normal;
}

.keyboardKey.makeBigger .oneSpecialLineShift .oneSpecialLineText {
   margin-top: 9px;
}

.keyHintRow[data-actualkey="Alt+Shift+M"] .oneSpecialLineText {
   font-size: 8px;
}

.keyHintRow .longKey {
   font-size: 10px;
   line-height: 12px;
   padding-top: 2px;
}

.presetListButton {
   color: rgb(101, 111, 113);
   position: absolute;
   right: 37px;
   font-size: 15px;
   top: 5px;
}

#page[data-width="showingConsoles"] #presetList {
   right: unset;
   left: 40px;
}

#presetList .keyboardKey {
   color: rgb(169, 169, 169);
   background: rgb(16, 16, 16);
   width: 51px;
   height: 30px;
   line-height: 30px;
   font-size: 12px;
   border: 1px solid rgba(85, 87, 88, 0.45);
   text-align: center;
   cursor: default;
   text-transform: capitalize;
   padding: 0px 2px;
   float: right;
   margin-top: 9.5px;
}

.switchActiveKeyboardKey {
   font-size: 0.7em;
   border: 1px solid rgb(94, 102, 105);
   opacity: 0.5;
   position: relative;
   top: 7px;
   transition: opacity 0.3s ease 0s;
   cursor: default;
   height: 36px;
   vertical-align: top;
   width: 36px;
   line-height: 32px;
   text-align: center;
}

#entire_shortcuts[data-width="medium"] .switchActiveKeyboardKey {
   display: none;
}

.keyboardSwitchMessage {
   display: inline-block;
   font-size: 12.5px;
   margin-top: 3px;
   position: absolute;
   right: 101px;
   background: black;
   opacity: 0.2;
   top: 49px;
   padding: 6px;
   z-index: -1;
}

.currentLanguageName {
   position: relative;
   display: inline-block;
   vertical-align: top;
   height: 50px;
}

.hideShowShortcutManager,
.hideShowFunctionFactory {
   position: absolute;
   right: 15px;
   top: 3px;
   cursor: pointer;
}

.hideShowFunctionFactory {
   right: 60px;
   display: none;
}

#entire_shortcuts[data-width="medium"] .hideShowFunctionFactory,
#entire_shortcuts[data-width="large"] .hideShowFunctionFactory,
#entire_shortcuts[data-width="huge"] .hideShowFunctionFactory {
   display: block;
}

#entire_shortcuts[data-width="small"] .currentLanguageName {}

.opacityRow[data-theshortcut="f"] .removeShortcutButton,
.opacityRow[data-theshortcut="0"] .removeShortcutButton,
.opacityRow[data-theshortcut="1"] .removeShortcutButton,
.opacityRow[data-theshortcut="2"] .removeShortcutButton,
.opacityRow[data-theshortcut="3"] .removeShortcutButton,
.opacityRow[data-theshortcut="4"] .removeShortcutButton,
.opacityRow[data-theshortcut="5"] .removeShortcutButton,
.opacityRow[data-theshortcut="6"] .removeShortcutButton,
.opacityRow[data-theshortcut="7"] .removeShortcutButton,
.opacityRow[data-theshortcut="8"] .removeShortcutButton,
.opacityRow[data-theshortcut="9"] .removeShortcutButton {
   display: none;
}

.opacityRow[data-theshortcut="f"] .temporaryValues {
   display: none;
}

.shortcutModifiers {
   text-align: center;
   padding: 0px;
   background: rgb(21, 31, 43);
}

.ad1 {
   text-align: center;
   background: rgb(0, 62, 0);
   color: white;
}

.cc_tooltip {
   z-index: 20000;
}

.tooltip.show {
   opacity: 1;
}

.cc_tooltip .tooltip-inner {
   padding: 5px 10px;
   color: white;
   border: 1px solid rgba(209, 206, 206, 0.32);
   background: rgb(19, 29, 62);
   max-width: 240px;
}

.tooltip.show {
   z-index: 1111;
}

#scratchExportSuccess {
   padding: 5px 10px;
   color: rgb(4, 18, 40);
   background: rgb(163, 165, 171);
   position: absolute;
   top: 40px;
   z-index: 111;
   border: 1px solid rgb(163, 165, 171);
   border-radius: 4px;
   display: none;
   left: calc(55% - 65px);
}

.cc_tooltip .tooltip-inner {
   padding: 5px 10px;
   color: rgb(4, 18, 40);
   background: rgb(163, 165, 171);
   max-width: 269px;
   text-align: left;
   box-shadow: rgba(8, 8, 8, 0.52) 2px 5px 6px;
}

.cc_tooltip .arrow,
.cc_tooltip .arrow::before {
   border-bottom-color: rgb(163, 164, 167);
   z-index: 100000;
}

.optionsWindowCloseBar {
   text-align: center;
   position: relative;
}

#editorLanguagesLayout {
   background: rgb(19, 27, 37);
   color: white;
   z-index: 200;
   width: 30%;
   border: 2px solid black;
   padding-bottom: 27px;
   margin: 0px auto;
   position: relative;
   top: 12%;
}

.reAddStyleRow select {
   border: 1px solid rgba(60, 59, 59, 0.65);
   background: rgb(9, 13, 35);
}

#entire_shortcuts[data-width="medium"] .reAddTitle {
   font-size: 0.6em;
}

.halfReAddTitle {
   display: none;
}

#reAddStyleType {
   display: none;
}

#aceCopyContainer {
   background: rgb(20, 57, 69);
   color: lightgray;
   position: fixed;
   top: 135px;
   left: 327px;
   z-index: 15;
   height: 400px;
   width: 586px;
}

#aceCopyEditor {
   padding: 5px;
   height: 400px;
}

.currentSessionVanitySetting {
   position: absolute;
   left: 12px;
   color: rgb(214, 211, 211);
   top: 0px;
   cursor: pointer;
   padding: 3px;
}

@media only screen and (min-width: 1850px) {
   #outputConsoles {
      top: 10%;
   }
}

#cc_render {
   background: rgb(117, 117, 147);
   color: white;
   height: 76%;
   position: relative;
   border: 3px solid rgb(80, 80, 165);
   overflow: hidden;
}

.theRenderedFrame {
   height: 100%;
   background: rgb(5 5 5);
   position: relative;
}

#page[data-recordingbar="show"] .theRenderedFrame {
   border: none;
   height: 100%;
}

#if1 {}

.aceEditor * {
   font-family: monospace !important;
   font-size: 15px !important;
   direction: ltr !important;
   text-align: left !important;
}

.ace_gutter-cell.ace_warning {
   background-image: none !important;
}

.cc_settings_button {
   margin: 0px 1px 6px;
   background: rgb(59, 74, 94);
   height: 40px;
   line-height: 35px;
   text-align: center;
   font-size: 1.3em;
   width: 40px;
   color: rgb(186, 189, 198);
   transition: color 0.1s ease 0s;
   position: relative;
   box-shadow: rgba(16, 16, 16, 0.77) 2px 2px;
}

#cc_top_bar .cc_settings_button {
   transition: color 0s ease 0s;
}

#page .recordingReminderTopMenu {
   font-size: 20px;
}

.topMenuButtonsInner.addTopThree .cc_settings_button {
   top: 3px;
}

.topMenuButtonsInner.addTopFive .cc_settings_button {
   top: 5px;
}

.condensedOrientationArea {
   display: none;
}

#cc_top_bar.condensedView .condensedOrientationArea {
   display: block;
}

.cc_settings_button .fa-cog {
   line-height: 25px;
}

#cc_top_bar.condensedView .cc_settings_button {
   height: 30px;
   width: 30px;
   overflow: hidden;
   font-size: 0.9em;
   line-height: 20px;
   vertical-align: top;
}

#page #cc_top_bar .cc_submenu_show_more {
   position: absolute;
   right: 1px;
   height: 26px;
   width: 24px;
   top: 6px;
   background: rgb(31, 44, 61);
   line-height: 22px;
}

#page #cc_top_bar .cc_submenu_show_more.invertedIcon {
   top: 57px;
}

#page #cc_top_bar.condensedView .cc_submenu_show_more {
   height: 26px;
   top: 2px;
   right: 4px;
}

.cc_submenu_show_more.invertedIcon i {
   transform: rotate(180deg);
   top: -3px;
   position: relative;
}

.cc_sub_buttons_scroll_up i {
   transform: rotate(180deg);
}

.has_submenu_button {
   background: rgb(22, 101, 5);
}

a.cc_settings_button {
   color: rgb(186, 189, 198);
}

.cc_settings_button_active {
   background: rgb(5, 5, 38);
}

.cc_share_button:active {
   background: rgb(35, 44, 57);
}

#fetchCodeSection,
#copyLinkSection {
   width: 548px;
}

#page .optionBarLinksInput {
   position: relative;
   width: 71%;
   margin-right: 4px;
   border: 1px solid black;
   background: rgb(30, 31, 47);
   color: rgb(197, 197, 197);
}

.fetchCodeButton {
   margin: 0px;
   line-height: 19px;
   background: rgb(21, 21, 33);
   color: rgb(197, 197, 197);
   overflow: hidden;
}

#fetchInfoOverlay {
   background: rgba(49, 48, 48, 0.76);
   z-index: 1100;
   position: fixed;
   top: 0px;
   left: 0px;
   width: 100%;
   height: 100%;
   display: none;
}

#fetchInfo {
   border: 1px solid rgb(86, 86, 84);
   position: absolute;
   z-index: 33333;
   background: rgb(12, 17, 21);
   top: 130px;
   width: 50%;
   left: 25%;
   color: lightgray;
   margin: 0px auto;
}

#page[data-width="showingConsoles"] #fetchInfo {
   left: 32px;
}

#chainSettingsOverlay {
   z-index: 33333;
   position: fixed;
   left: 0px;
   width: 100%;
   background: rgba(0, 0, 0, 0.81);
   display: none;
   top: 0px;
   height: calc(100% - 69px);
   overflow: hidden;
}

#previewPage #chainSettingsOverlay {
   top: 36px;
   border: 1px solid rgb(0, 90, 255);
   height: calc(100% - 74px);
   left: 4px;
   width: calc(100% - 4px);
}

#chainSettingsInfo {
   background: rgb(3, 32, 7);
   color: white;
   width: 80%;
   position: absolute;
   top: 50px;
   left: 100px;
   border: 2px solid magenta;
   opacity: 0.3;
}

#page[data-chaindebug="normal"] .chainInfoTwo,
#page[data-chaindebug="normal"] .someCGInfo,
#page[data-chaindebug="normal"] .previousChainsArea.pci,
#page[data-chaindebug="normal"] #chainSettingsInfo {
   display: none;
}

#page[data-width="showingConsoles"] #chainSettingsOverlay {
   width: 61%;
}

#page[data-width="showingConsoles"] #codeCreate #chainSettingsOverlay {
   width: 62%;
}

#page[data-rulerstatus="shown"] #chainSettingsOverlay,
#page[data-rulerstatus="shown"] #chainSettings {
   left: 35px;
}

#page[data-width="showingConsoles"] #chainSettings {
   width: 96%;
   margin-left: 2%;
   overflow-y: auto;
}

#chainSettings {
   border: 1px solid rgb(69, 70, 70);
   position: relative;
   background: rgb(42, 10, 43);
   top: 19px;
   left: 0px;
   color: white;
   width: 86%;
   margin-left: 7%;
   height: 91%;
   overflow: hidden;
   max-width: 1100px;
}

#chainSettingsGraphicContainer {
   position: relative;
}

#chainSettingsGraphicContainer[data-imagetype="image"] {}

.chainTogglePreview {
   border: 1px solid black;
   display: inline-block;
   background: rgb(44, 47, 76);
   cursor: pointer;
   height: 23px;
   line-height: 23px;
   width: 80px;
   text-align: center;
}

.chainSettingsInfoBar {
   background: rgb(13, 13, 18);
   color: lightgray;
   padding: 8px;
   margin-bottom: 10px;
}

.chainImageType {
   width: 68px;
   display: inline-block;
   text-align: center;
   cursor: default;
}

.imageSaveHelp {
   display: block;
   opacity: 0.2;
}

.chainSettingsInfoBar[data-imagetype="image"] .imageSaveHelp {
   opacity: 1;
   color: rgb(206, 171, 177);
}

.chainSettingsInfoBar[data-imagetype="image"] .chainImageType {
   opacity: 1;
   color: lightgray;
   background: rgb(11, 42, 52);
}

.chainSettingsInfoBar[data-imagetype="html"] .chainImageType,
.chainSettingsInfoBar[data-imagetype="unset"] .chainImageType {
   opacity: 1;
   color: lightgray;
   background: rgb(52, 11, 40);
}

.chainResizeHelp {
   color: lightgray;
   opacity: 0.4;
   cursor: default;
   display: inline-block;
}

.chainSettingsInformation {
   border: 1px solid rgb(80, 80, 77);
   padding: 12px 12px 8px;
   background: rgb(20, 22, 49);
   color: lightgray;
   display: none;
   font-size: 17px;
}

.chainGraphicButtonsRow {
   position: relative;
}

.previewModifiedIndicatorSettingsRow {
   top: 0px;
   left: 0px;
   background: rgba(26, 27, 38, 0.69);
   height: 100%;
   width: 100%;
   padding: 7px 7px 7px 46px;
   display: none;
   z-index: 333;
}

#previewPage .previewModifiedIndicatorSettingsRow {
   display: block;
}

#previewModifiedIndicatorSetting,
.modifiedInidcatorSettingsTitle,
.previewModifiedSettingsSave {
   border: 1px solid rgba(0, 255, 255, 0);
   height: 25px;
   display: inline-block;
   vertical-align: top;
   color: lightblue;
}

.previewModifiedSettingsSave {
   background: rgb(13, 22, 65);
   cursor: pointer;
   padding: 0px 14px;
   color: lightgray;
   border: 1px solid black;
}

.chainSettingsInformation .chainSampleSet {
   border: 1px solid rgb(21, 92, 92);
   height: 22px;
   font-size: 13px;
   vertical-align: top;
}

.chainGraphicRow {
   border: 2px solid rgb(61, 118, 66);
   background: dimgray;
   padding: 4px;
   margin-bottom: 16px;
}

.toggleChainViewOptions {
   height: 30px;
   line-height: 28px;
   cursor: pointer;
   width: 218px;
   text-align: center;
   background: rgb(32, 40, 84);
   border: 2px solid black;
}

.toggleChainViewOptions.disabled {
   background: rgb(12, 17, 41);
   color: rgb(76, 76, 76);
   cursor: not-allowed;
}

.orangeHighlight {
   background: black;
   color: orange;
}

.premadeRowTitle,
#chainLayoutSet,
#chainColorSet,
.premadeRow .chainSampleSet {
   display: inline-block;
   height: 20px;
   line-height: 20px;
   vertical-align: top;
   margin-right: 3px;
   border-radius: 0px;
}

#page .premadeRow select {
   border: 1px solid black;
   font-size: 0.8em;
}

.removeThisChainSetting {
   display: inline-block;
   color: rgb(134, 147, 149);
   cursor: pointer;
   margin-right: 10px;
   position: relative;
   bottom: 1px;
}

.premadeRowTitle {
   padding: 0px 4px;
}

.chainPremadeSection {
   display: inline-block;
   position: relative;
}

.chainPremadeOverlay {
   z-index: 3;
   background: rgba(23, 23, 22, 0.72);
   position: absolute;
   top: 0px;
   left: 0px;
   height: 100%;
   width: 100%;
}

.chainPremadeOverlay[data-type="colors"] {
   display: none;
}

.premadeRowTitle.load {
   padding: 0px;
}

.loadChainGraphicButton {
   padding: 6px;
   background: rgb(26, 23, 78);
   cursor: pointer;
   display: inline-block;
   margin-bottom: 6px;
   border: 1px solid black;
   margin-right: 10px;
   color: lightgray;
}

#previewPage .loadChainGraphicButton.viewOptions,
#previewPage .recordingLocationsTypeButton[data-type="colors"] {}

.imageGenerationHelp {
   display: none;
}

.imageGenerationHelp {}

.chainImageContainerToggle {
   display: inline-block;
   cursor: pointer;
   color: lightgray;
}

#chainGraphic,
#chainGraphicFullScale {
   height: unset;
   position: relative;
   border: 1px solid black;
   background: rgb(15, 17, 35);
   display: none;
}

#chainGraphicFullScale {
   border: 2px solid rgb(43, 157, 52);
   min-height: 20px;
   display: none;
   transform: scale(1) !important;
}

#chainPreview {
   min-height: 30px;
   min-width: 30px;
   display: none;
   position: fixed;
   top: 0px;
   left: 0px;
   border: 4px solid rgb(160, 169, 203);
   z-index: 1000000;
}

#chainPreview .showThisTitleDropdown {}

#chainPreview[data-moverowstatus="shown"] .showThisTitleDropdown {
   left: 358px;
   position: absolute;
}

.openWorkflowChainsButton {
   border: 1px solid rgb(65, 64, 64);
   background: rgb(24, 24, 69);
   display: inline-block;
   padding: 0px 3px;
   cursor: pointer;
}

#chainPreview.chainPreviewInit {
   background: black;
   padding: 34px 18px 18px;
   top: 80px;
   left: 80px;
   color: rgb(228, 225, 225);
   max-width: 615px;
}

.languageAccentBox .thisVueVar {
   border: 1px solid rgb(87, 86, 86);
   position: absolute;
   bottom: 0px;
   background: black;
   font-size: 10px;
   left: 30px;
   color: lightgray;
   height: 14px;
   line-height: 14px;
   display: none;
}

.someCGInfo {
   background: rgb(39, 39, 60);
   padding: 4px;
}

#chainImageContainer {
   overflow: hidden;
   position: absolute;
   z-index: 3;
   width: 100%;
   height: 100%;
   top: 0px;
   left: 0px;
   display: none;
}

#page[data-chaindebug="normal"] #chainImageContainer {
   min-width: 0px;
   min-height: 0px;
   background: black;
}

.chainImageContainerTitle {
   background: rgb(25, 25, 26);
}

.chainInfoTwo {
   opacity: 0.3;
   color: lightgray;
   background: black;
}

.graphicRowNumber {
   display: inline-block;
   border: 1px solid lightgray;
   width: 20px;
   margin-right: 10px;
   text-align: center;
}

.chainGraphicInner {
   height: 100%;
}

.chainGraphicTitle {
   background: black;
   height: 30px;
   line-height: 30px;
   font-size: 17px;
   text-align: center;
   color: rgb(211, 211, 211);
   margin-left: 0px;
   padding-left: 12px;
}

.chainGraphicTitle.thisIsOriginal {
   height: 29px;
   position: relative;
}

#page .currentChainGraphicPreview {
   border: 1px solid black;
   height: 27px;
   vertical-align: top;
   font-size: 15px;
   background: rgb(16, 17, 40);
   padding: 0px 12px;
}

#chainPreview[data-titlestatus="show"] .chainGraphicTitle {
   display: block !important;
}

.closeChainPreview,
.openMainChainWindow {
   float: right;
   color: inherit;
   font-size: 14px;
   position: absolute;
   right: 8px;
   cursor: pointer;
   opacity: 0.5;
   top: 0px;
}

.openMainChainWindow {
   right: 35px;
}

.chainPreviewInit .closeChainPreview {
   top: 7px;
   font-size: 1.2em;
}

#chainGraphicViewOptions {
   padding: 6px;
   background: rgb(44, 43, 63);
   text-align: center;
   display: none;
   position: relative;
}

.chainGraphicLayoutSection,
.chainColorChangerSection,
.chainGraphicButtonRow {}

.premadeRow {
   background: rgb(7, 20, 51);
   padding-top: 10px;
   color: lightblue;
   font-size: 13px;
   height: 38.39px;
   padding-bottom: 6px;
}

.saveChainSettingsToDatabaseInner,
.premadeRowInner {
   width: 86%;
   margin-left: 7%;
   text-align: left;
}

#page[data-width="showingConsoles"] .premadeRowInner {
   width: 100%;
   margin-left: 0px;
}

.chainGraphicSaveButton {
   background: rgb(8, 8, 51);
   display: inline-block;
   padding: 6px 20px;
   cursor: pointer;
}

.chainGraphicSaveButton.reconcile {
   background: rgb(117, 83, 127);
   display: none;
}

.chainLayoutOptionsTitle,
.chainLayoutOptionsInput {
   display: inline-block;
   min-width: 80px;
   white-space: nowrap;
   overflow: hidden;
}

.chainLayoutOptionsInput {
   height: 27px;
   overflow: hidden;
}

.chainLayoutCheckSection {
   display: inline-block;
   background: rgba(0, 0, 0, 0.6);
   margin-right: 2px;
   cursor: pointer;
   height: 27px;
   padding: 0px 5px;
   color: lightblue;
   line-height: 27px;
}

.chainLayoutCheckboxTitle {
   display: inline-block;
}

.chainLayoutOptionsTitle {
   width: 93px;
   margin-right: 5px;
   height: 27px;
   padding-left: 8px;
   line-height: 30px;
   font-size: 13.5px;
}

.glossaryFindMyNumber {
   display: none;
}

.chainGraphicLayoutSection .languageAccentBox {
   text-align: left;
}

.chainGraphicRows {
   border: 2px solid rgb(56, 57, 58);
   height: calc(100% - 40px);
   background: rgb(13, 13, 36);
   overflow-y: auto;
}

#chainGraphicClone {
   transform: scale(1) !important;
   opacity: 1 !important;
}

.oneChainGraphicRow {
   border: 1px solid rgba(135, 138, 138, 0.12);
   padding: 2px 2px 2px 8px;
   white-space: nowrap;
   margin-bottom: 9px;
   width: 100%;
   background: rgb(45, 48, 76);
}

.oneChainGraphicRow:nth-child(2n+1) {
   background: rgb(50, 51, 62);
}

#chainPreview[data-titlestatus="hide"] .chainGraphicTitle {
   display: none;
}

#chainPreview[data-titlestatus="hide"] {
   height: unset !important;
}

.oneChainGraphicRow .chainRowElement {
   display: inline-block;
}

#page .chainRowElement {
   height: 25px;
   line-height: 25px;
   overflow: hidden;
   vertical-align: top;
   font-size: 13px;
}

#page .chainGraphicRowNumber {
   line-height: 25px;
}

.chainOperatorOne,
.chainOperatorTwo,
#page .chainGraphicRowNumber {
   width: 40px;
   text-align: center;
   color: lightblue;
   border: none;
}

.chainPreviewMoveRow,
.toggleChainPreviewMoveButton,
.chainPreviewMoveTitle,
#page .chainMoveX,
#page .chainMoveY {
   border: 1px solid rgb(118, 102, 102);
   display: inline-block;
   width: 15px;
   overflow: hidden;
   height: 30px;
   vertical-align: top;
}

#page .chainPreviewMoveTitle {
   font-size: 14px;
   vertical-align: top;
   line-height: 30px;
   width: 21px;
   text-align: center;
   border: none;
   color: rgb(188, 210, 217);
}

#chainPreviewMoveHTML {
   vertical-align: top;
   top: 0px;
   height: 31px;
   z-index: 15;
   display: inline-block;
   position: absolute;
   left: 0px;
   text-align: left;
   width: 319px;
}

#page .chainPreviewMoveRow {
   height: 32px;
   left: 0px;
   text-align: left;
   border: none;
   display: inline-block;
   opacity: 1;
   width: 316px;
}

#page #chainPreview[data-moverowstatus="hidden"] #chainPreviewMoveHTML {
   width: 33px;
   overflow: hidden;
}

.chainMoveInner {
   height: 28px;
   vertical-align: top;
   font-size: 9px;
   overflow: hidden;
   display: none;
}

.moveChainPreviewToggleButton {
   cursor: pointer;
   display: inline-block;
   border: 1px solid rgba(191, 118, 118, 0.14);
   height: 28px;
   line-height: 27px;
   background: rgb(50, 49, 49);
   padding: 0px 3px;
   opacity: 0.4;
   transition: opacity 0.3s ease 0s;
}

.moveChainPreviewToggleButton:hover {
   opacity: 0.8;
}

#page .chainMoveX,
#page .chainMoveY,
#page #chainNewScale,
#chainNewOpacity {
   background: rgb(36, 36, 37);
   height: 21px;
   margin-top: 3px;
   border: 1px solid rgba(173, 216, 230, 0.17);
   color: lightblue;
   font-size: 12px;
   padding: 2px 0px 0px 3px;
   width: 40px;
   vertical-align: top;
}

.chainPreviewNewPercentage {
   display: inline-block;
   font-size: 12px;
}

.oneChainGraphicRow .chainGraphicRowNumber {
   background: rgba(35, 31, 38, 0);
   text-align: center;
   width: 25px;
   border: none;
}

#chainGraphic.noRowNumbers .chainGraphicRowNumber,
#chainPreview.noRowNumbers .chainGraphicRowNumber {
   display: none;
}

.oneChainGraphicRow .chainTitle,
.oneChainGraphicRow .chainTransition,
.oneChainGraphicRow .chainResult {
   background: rgb(12, 12, 12);
   text-align: center;
   color: rgb(205, 219, 224);
   width: calc(33% - 47px);
   overflow: hidden;
   vertical-align: top;
   text-overflow: ellipsis;
   line-height: 25px;
}

#chainGraphic.noRowNumbers .chainEntryView,
#chainPreview.noRowNumbers .chainEntryView {
   width: calc(33% - 30px);
}

.oneChainGraphicRow .chainTitle {
   color: rgb(142, 163, 189);
}

.oneChainGraphicRow .chainResult {
   color: rgb(46, 177, 227);
}

.chainSettingsInner {
   background: rgb(45, 47, 65);
   padding: 13px;
   border: none;
   height: calc(100% - 34px);
   overflow: hidden scroll;
   position: relative;
}

.chainSettingsInnerCover {
   position: absolute;
   top: 0px;
   left: 0px;
   height: 100%;
   width: 100%;
   z-index: 5;
   background: rgba(0, 0, 0, 0.84);
   text-align: center;
   padding-top: 70px;
   font-size: 20px;
   display: none;
}

.copyPractice {
   background: navy;
   padding: 7px;
   color: white;
   display: none;
}

.copyPracticeRow {
   border: 2px solid dimgray;
   margin: 6px;
   background: black;
   padding: 4px;
}

.copyPracticeRow:nth-child(2n+1) {
   background: rgb(49, 10, 22);
}

.fetchInfoInner {
   padding: 19px 19px 32px;
   color: rgb(225, 225, 225);
}

.fetchInfoExplanationLine {
   background: black;
   text-align: center;
   color: cyan;
   margin-top: 27px;
}

.fetchInfoExampleLine {
   padding-left: 18px;
   color: rgb(209, 166, 161);
}

.fetchInfoExampleLine:nth-child(2n+1) {
   background: rgb(23, 30, 35);
}

#chainSettings .helpButton {
   display: inline-block;
   background: rgba(38, 77, 92, 0.31);
   cursor: pointer;
   color: rgba(173, 216, 230, 0.52);
   position: absolute;
   right: 38px;
   height: 20px;
   line-height: 20px;
   top: 9px;
}

#chainSettings .helpButton.modifiedIndicatorSettingsButton {
   right: unset;
   left: 10px;
   background: rgb(1, 7, 14);
   display: none;
}

#codeCreate .modifiedIndicatorSettingsButton {
   display: none;
}

.addSampleChainsButton {
   background: black;
   color: white;
   padding: 5px 8px;
   cursor: pointer;
   display: inline-block;
   border: 1px solid white;
}

.close_this_dialog {
   cursor: pointer;
   position: absolute;
   color: rgb(165, 163, 163);
   right: 8px;
   top: 2px;
}

#chainSettings input {
   background: black;
   margin: 3px;
   vertical-align: top;
}

#page #chainsSearchAreaInput {
   margin-top: 0px;
}

#chainSettings #chainTitle {
   margin: 0px 10px 0px 0px;
   width: 200px;
   color: lightgray;
}

#findReplaceOverlay {
   z-index: 80;
   position: fixed;
   top: 0px;
   left: 0px;
   width: 70%;
   height: 100%;
   background: rgba(33, 35, 52, 0.89);
}

#ccFindReplace {
   border: 1px solid black;
   width: 50%;
   position: fixed;
   padding-bottom: 5px;
   background: rgb(42, 42, 48);
   z-index: 333333;
   color: white;
   min-width: 400px;
   max-width: 600px;
   display: none;
}

#ccFindReplace[data-location="topLeft"],
#ccFindReplace[data-location="top"],
#ccFindReplace[data-location="topRight"] {
   top: 25px;
}

#ccFindReplace[data-location="topLeft"],
#ccFindReplace[data-location="bottomLeft"] {
   left: 2%;
}

#ccFindReplace[data-location="topRight"],
#ccFindReplace[data-location="bottomRight"] {
   right: 2%;
}

#ccFindReplace[data-location="top"],
#ccFindReplace[data-location="bottom"] {
   left: 20%;
}

#ccFindReplace[data-location="bottom"],
#ccFindReplace[data-location="bottomLeft"],
#ccFindReplace[data-location="bottomRight"] {
   top: unset;
   bottom: 9%;
}

#ccFindReplace input,
#ccFindReplace select {
   background: black;
}

#ccFindReplace input,
#ccFindReplace select,
#ccFindReplace .findReplaceButton,
#ccFindReplace .findReplaceSelectTitle {
   height: 24px;
   line-height: 24px;
   vertical-align: top;
   border: 1px solid rgb(24, 41, 59);
}

#ccFindReplace .findReplaceSelectTitle {
   color: lightblue;
   border: 1px solid rgba(0, 0, 139, 0);
}

#ccFindReplace input {
   width: calc(100% - 217px);
   color: lightgray;
   border: 1px solid black;
}

#ccFindReplace select {
   width: unset;
   display: inline-block;
   color: rgb(198, 217, 222);
}

#page #findAndReplaceMove {
   border: 1px solid rgba(30, 29, 29, 0.27);
   background: rgb(22, 19, 36);
}

#page #findAndReplaceMove[disabled="disabled"] {
   opacity: 0;
}

.findReplaceTitle {
   background: black;
   text-align: center;
   position: relative;
   height: 35px;
   line-height: 35px;
   border-bottom: 1px solid rgba(128, 128, 128, 0.33);
   font-size: 14px;
   color: rgb(177, 175, 175);
   padding-left: 48px;
}

.findAndReplaceMoveContainer {
   position: absolute;
   left: 55px;
   height: 30px;
   width: 169px;
   top: 0px;
   line-height: 30px;
   padding-top: 5px;
}

.findReplaceMoveLabel,
.findReplaceDropdownChange {
   display: inline-block;
   line-height: 20px;
   vertical-align: top;
   padding-top: 3px;
}

.findReplaceMoveLabel {
   opacity: 0.5;
   cursor: pointer;
   font-size: 15px;
}

.toggleFindSelect {
   position: absolute;
   background: rgb(49, 47, 47);
   cursor: pointer;
   border: 1px solid black;
   top: 7px;
   left: 4px;
   height: 18px;
   width: 18px;
   line-height: 18px;
   color: rgb(198, 198, 198);
   font-size: 13px;
   opacity: 0.2;
   transition: opacity 0.4s ease 0s;
}

.toggleFindSelect.active {
   opacity: 0.8;
   background: rgb(40, 63, 104);
}

.findReplaceTitle[data-countshown="1"] .toggleFindSelect.active {
   cursor: default;
}

.findReplaceTitle[data-countshown="1"] .toggleFindSelect.active:hover {}

.findSelectContainer {
   display: inline-block;
   margin-top: 8px;
}

.findSelectContainer.primary {}

.toggleFindSelect.factory {
   left: 25px;
}

.toggleFindSelect:hover {
   opacity: 0.8;
}

.findReplaceTitle .fa-window-close {
   position: absolute;
   right: 8px;
   cursor: pointer;
}

.ccFindReplaceLine {
   margin: 8px;
   background: rgb(18, 29, 46);
   font-size: 14px;
   padding: 5px 0px 5px 10px;
   border: 1px solid black;
   white-space: nowrap;
   overflow: hidden;
}

.ccFindReplaceLine.dropdownRow {
   padding-top: 0px;
}

.findReplaceSelectTitle {
   border: 1px solid dimgray;
   display: inline-block;
}

#page .findReplaceButton {
   display: inline-block;
   margin-right: 4px;
   cursor: pointer;
   background: rgb(1, 1, 17);
   padding-top: 1px;
   line-height: unset;
   border: 1px solid black;
   color: lightblue;
   padding-right: 2px;
   padding-left: 2px;
}

#page .findReplaceButton.case {
   width: 26px;
}

#page .findReplaceButton[data-caseactive="on"] {
   background: rgb(7, 50, 81);
   font-weight: 600;
   border: 1px solid rgba(173, 216, 230, 0.31);
}

.findReplaceLabel {
   background: rgb(41, 8, 46);
   position: absolute;
   right: 0px;
   opacity: 0.1;
   font-size: 15px;
   display: none;
}

.saveCurrentChainButton,
.clearCurrentChainButton {
   background: black;
   cursor: pointer;
   display: inline-block;
   height: 24px;
   line-height: 24px;
   padding: 0px 3px;
   vertical-align: top;
   width: 120px;
   text-align: center;
   font-size: 15px;
}

.saveCurrentChainButton {
   background: rgb(7, 40, 7);
}

.clearCurrentChainButton {
   background: rgb(81, 30, 30);
}

.fetchInfoTitle,
.chainSettingsTitle {
   background: black;
   text-align: center;
   height: 34px;
   line-height: 34px;
   cursor: default;
}

.chainModifiedAdminSection {
   position: absolute;
   right: unset;
   padding: 4px;
   background: rgb(12, 62, 17);
   color: white;
   bottom: 23px;
   font-size: 16px;
   left: 10px;
   opacity: 0.2;
}

.chainModifiedAdminSection.saveObject,
.chainModifiedAdminSection.randomChainInfo {
   left: 400px;
   background: darkblue;
   padding: 4px;
   cursor: pointer;
}

.chainModifiedAdminSection.randomChainInfo {
   left: 600px;
   background: rgb(38, 9, 37);
}

.chainModifiedAdminSection[data-status="dirty"] {
   background: maroon;
}

.chainSettingsTitle {
   font-size: 15px;
   color: lightgray;
}

.previousChainsArea {
   border: 1px solid rgb(0, 0, 0);
   background: rgb(22, 25, 52);
}

.previousChainsArea .confirmLoad,
.previousChainsArea .loadChainButton,
.previousChainsTitle,
#previousChains {
   display: inline-block;
   border: 1px solid white;
   vertical-align: top;
   height: 24px;
   line-height: 24px;
}

#page .loadChainButton.debug {
   background: maroon;
}

#page .loadChainButton.debug[data-chaindebug="normal"] {
   background: rgb(15, 87, 47);
}

.previousChainsTitle {
   border: 1px solid rgba(255, 255, 255, 0);
   width: 160px;
   vertical-align: top;
}

#previousChains {
   border: 1px solid gray;
}

#chainSettings .loadChainButton {
   background: rgb(15, 26, 80);
   cursor: pointer;
   padding: 0px 8px;
   border: 1px solid rgb(0, 0, 0);
   margin-left: 15px;
   color: rgb(187, 190, 192);
}

.chainAmountRow,
.currentChainSettings,
#chainSettings .previousChainsArea {
   border-top: 1px solid rgb(40, 87, 106);
   border-right: 1px solid rgb(40, 87, 106);
   border-left: 1px solid rgb(40, 87, 106);
   border-image: initial;
   background: rgb(22, 25, 52);
   border-bottom: none;
   height: 40px;
   line-height: 40px;
   padding-left: 15px;
   color: lightgray;
}

.exportChainButton {
   position: absolute;
   right: 18px;
   border: 2px solid black;
   background: black;
   color: lightblue;
   top: 8px;
   height: 23px;
   line-height: 23px;
   padding: 0px 8px;
   opacity: 0.9;
   cursor: pointer;
}

.exportChainButton .originalText {
   cursor: pointer;
}

.exportChainButton[data-type="html"] {
   right: 151px;
}

.previousChainsArea {
   overflow: hidden;
}

#page .previousChainsArea.pci {
   height: 40px;
   background: rgb(3, 37, 3);
   overflow-y: auto;
   display: none;
}

.previousChainsArea,
.chainAmountRow,
.currentChainSettings {
   padding-top: 8px;
   font-size: 16px;
   overflow: hidden;
   position: relative;
}

.currentChainSettings {
   border: 1px solid rgb(40, 87, 106);
}

.cc_ruler {
   width: 20000px;
   height: 30px;
   background: rgb(91, 127, 138);
   position: fixed;
   z-index: 33333333;
   top: 0px;
   opacity: 1;
}

.cc_ruler.vertical {
   top: 0px;
   left: 0px;
   width: 30px;
   z-index: 33333334;
   overflow: visible;
}

.rulerMeasurementNumber {
   position: absolute;
   bottom: 0px;
   font-size: 12px;
   color: black;
   height: 17px;
   z-index: 15;
}

.cc_ruler .showSettingsButton {
   top: 11px;
   left: 19px;
   position: absolute;
   cursor: pointer;
   font-size: 11px;
   color: black;
   opacity: 0.4;
   transition: opacity 0.3s ease 0s;
}

.cc_ruler .showSettingsButton.vertical {
   z-index: 4;
}

.cc_ruler .showSettingsButton:hover {
   opacity: 0.8;
}

.cc_ruler.vertical .rulerMeasurementNumber {
   width: 30px;
   height: 17px;
   transform: rotate(270deg);
   left: 6px;
   cursor: default;
}

.rulerReposition {
   background: rgba(3, 3, 60, 0.45);
   display: inline-block;
   width: unset;
   overflow: hidden;
   vertical-align: top;
   padding: 0px;
   line-height: 17px;
   margin-left: 30px;
   border: 2px solid rgb(11, 11, 11);
}

#codeCreate .rulerReposition {
   font-size: 13px;
}

.moveRulerTitle,
.repositionButton,
.moveRulerWords,
#page .rulerReposition input {
   border: none;
   display: inline-block;
   vertical-align: top;
   height: 19px;
   line-height: 19px;
}


.errorPageCover {
   position: fixed;
   top: 0px;
   left: 0px;
   height: 100%;
   width: 100%;
   background: black;
   z-index: 80;
   padding: 40px;
   font-size: 20px;
   color: cyan;
   display: none;
}

.rulerReposition .repositionButton {
   width: 40px;
   text-align: center;
   background: black;
   border: 1px solid dimgray;
   cursor: pointer;
   height: 18px;
   font-size: 12px;
   line-height: 16px;
}

#page .rulerReposition input {
   width: 39px;
   background: rgb(8, 8, 84);
   border: 1px solid rgb(61, 61, 61);
   padding: 0px;
   text-align: center;
   height: 18px;
   font-size: 13px;
}

#page input.noSpinner::-webkit-outer-spin-button,
#page input.noSpinner::-webkit-inner-spin-button {
   appearance: none;
   margin: 0px;
}

#page input.noSpinner {}

.rulerBigTick,
.rulerMediumTick,
.rulerLittleTick,
.horizontalTick {
   position: absolute;
   background: black;
   height: 30px;
   width: 4px;
   bottom: 0px;
   z-index: 5;
}

.rulerMediumTick {
   width: 2px;
   z-index: 3;
   height: 23px;
   bottom: 7px;
}

.rulerLittleTick,
.horizontalTick {
   width: 2px;
   height: 11px;
   bottom: 19px;
}

.cc_ruler.vertical .rulerBigTick,
.cc_ruler.vertical .rulerMediumTick,
.cc_ruler.vertical .rulerLittleTick {
   height: 4px;
   width: 30px;
   bottom: unset;
   top: unset;
   right: 0px;
}

.cc_ruler.vertical .rulerMediumTick {
   width: 23px;
   z-index: 3;
   height: 2px;
   right: 7px;
}

.cc_ruler.vertical .rulerLittleTick {
   width: 12px;
   height: 2px;
   right: 18px;
}

.cc_ruler.vertical .horizontalTick {
   top: 0px;
}

.chainAmountRow input,
#chainSettings .currentChainSettings input,
#chainSettings .previousChainsArea input,
.chainAmountRow select,
.currentChainSettings select,
#chainSettings .previousChainsArea select {
   border: 1px solid rgba(40, 40, 39, 0.77);
   height: 24px;
   line-height: 24px;
   vertical-align: top;
}

.showCurrentChainDefault {
   display: inline-block;
   vertical-align: top;
   background: rgb(51, 51, 70);
   height: 24px;
   line-height: 24px;
   width: 24px;
   text-align: center;
   opacity: 0.3;
   cursor: default;
}

.showCurrentChainDefault[data-active="true"] {
   opacity: 0.7;
}

.allChainSettingLines {
   border-right: 1px solid rgb(40, 87, 106);
   border-bottom: 1px solid rgb(40, 87, 106);
   border-left: 1px solid rgb(40, 87, 106);
   border-image: initial;
   border-top: none;
   max-height: calc(100% - 158px);
   overflow-y: auto;
   position: relative;
   margin-top: 20px;
}

.chainMessageSection {
   background: black;
   padding: 6px;
   text-align: center;
   color: rgb(216, 178, 185);
   transition: opacity 0.4s ease 0s;
   opacity: 0;
}

.allChainSettingsLineCover {
   position: absolute;
   display: none;
   background: rgba(0, 0, 0, 0.82);
   height: 100%;
   width: 100%;
   left: 0px;
   top: 0px;
   padding: 40px;
   font-size: 16px;
   color: rgb(189, 220, 223);
}

.allChainSettingLines.showCover .allChainSettingsLineCover {
   display: block;
}

.chainSettingsButtonSet {
   display: inline-block;
   background: blue;
   cursor: pointer;
}

.chainAmountRowButton {
   background: rgb(25, 63, 86);
   display: inline-block;
   border: 1px solid black;
   padding: 3px;
   cursor: pointer;
   width: 72px;
   text-align: center;
   height: 24px;
   line-height: 16px;
   vertical-align: top;
}

.chainSettingsRowNumber,
.chainSettingsInputLabel {
   display: inline-block;
}

.chainSettingsInputLabel {
   width: 62px;
   text-align: center;
}

.chainSettingsInputLabel.transition {
   width: 95px;
}

.chainSettingsRowNumber {
   width: 35px;
   text-align: center;
}

.chainSettingsLine {
   border-top: 1px solid rgba(125, 130, 133, 0.5);
   border-right: 1px solid rgba(125, 130, 133, 0.5);
   border-left: 1px solid rgba(125, 130, 133, 0.5);
   border-image: initial;
   height: 44px;
   padding-top: 10px;
   padding-left: 8px;
   background: rgb(16, 24, 42);
   border-bottom: none;
   font-size: 15px;
   color: lightgray;
}

.chainSettingsLine:nth-child(2n+1) {
   background: rgb(15, 17, 35);
   color: rgb(179, 201, 208);
}

#page .chainSettingsLine input {
   width: calc(33% - 134px);
   display: inline-block;
   border: 1px solid rgba(60, 59, 60, 0.6);
   color: lightgray;
}

.chainSettingsRowNumber,
.chainSettingsInputLabel,
.chainTitle,
#page .chainSettingsLine input {
   vertical-align: top;
   height: 24px;
   margin-top: 0px;
}

.chainButtonsArea {
   display: inline-block;
   padding: 2px;
}

.cbaButton {
   border: 1px solid rgba(143, 150, 143, 0);
   margin: 2px;
   display: inline-block;
   width: 15px;
   text-align: center;
   font-size: 14px;
   cursor: pointer;
   opacity: 0.6;
   transition: opacity 0.3s ease 0s;
}

.cbaButton:hover {
   opacity: 1;
}

#fetchCodeSection .fetchCodeButton {
   width: 96px;
   text-align: center;
   font-size: 12px;
}

.fetchInfoButton {
   display: inline-block;
   font-size: 11px;
   cursor: pointer;
   color: lightgray;
   line-height: 35px;
   margin-left: 8px;
}

.previewOptionsSection .fetchInfoButton {
   line-height: 32px;
   vertical-align: top;
   color: gray;
}

#fetchLink,
.fetchCodeButton,
#page .optionBarLinksInput {
   height: 30px;
   top: 4px;
   position: relative;
   vertical-align: top;
}

.linksHelpButton {
   display: inline-block;
   cursor: default;
   height: 20px;
   overflow: hidden;
   vertical-align: top;
   font-size: 12px;
   color: dimgray;
}

.linksHelpButton i {
   vertical-align: top;
   position: relative;
   line-height: 22px;
}

#page #showLink {
   width: 80%;
   overflow: hidden;
   display: inline-block;
   line-height: 30px;
}

#showLinkText {
   height: 20px;
   line-height: 20px;
   overflow: hidden;
   top: 5px;
   position: absolute;
   padding: 0px 3px;
   background: rgb(66, 63, 63);
   text-align: left;
   left: 4px;
   font-size: 0.9em;
   white-space: nowrap;
   max-width: 97%;
}

#page .allowSelect,
#page .allowSelect * {
   user-select: all;
}

#fontSizeInput,
.ss_slider_container {
   padding: 0px 16px;
   font-size: 0px;
   border: 1px solid black;
   background: rgb(68, 75, 90);
   display: inline-block;
   height: 40px;
}

#page #cc_top_bar.condensedView .optionBarSection {}

#page #cc_top_bar.condensedView #select_theme_bar {
   width: 350px;
   height: 40px;
}

#layoutOverlay[data-consolestatus="shown"] .ss_slider_container,
#layoutOverlay[data-consolestatus="shown"] .rightOptionsContainer select {
   padding-right: 0px;
   border: 1px solid rgba(173, 122, 28, 0.92);
   width: 45%;
}

.ss_slider_container * {
   user-select: none;
}

.ss_slider_container div {
   vertical-align: top;
}

#page .optionBarSection {
   background: rgb(68, 75, 90);
   height: 40px;
   padding: 0px 16px;
   text-align: center;
   display: none;
   border: 1px solid black;
}

.saveEditorThemeButton {
   display: inline-block;
   width: 100px;
   background: rgb(15, 16, 27);
   margin-left: 4px;
   cursor: pointer;
}

.previewPageOptionTitle {
   display: inline-block;
   vertical-align: top;
   height: 30px;
   line-height: 30px;
   background: none;
   padding: 0px 4px;
   font-size: 12px;
   color: rgb(195, 195, 195);
   position: relative;
   top: 1px;
}

#previewPage .optionBarSection {
   display: inline-block;
   margin-top: 0px;
   top: 0px;
   height: 30px;
   overflow: hidden;
}

.previewOptionsSection {
   background: none;
   display: inline-block;
   padding: 0px 5px;
   width: 100%;
   color: rgb(195, 195, 195);
}

#reloadOptionsSection {
   width: unset;
}

#previewPage .loadNewLink input,
#previewPage .previewDifferentLinkButton {
   background: rgb(18, 18, 18);
   color: rgb(182, 182, 182);
   border: 1px solid rgb(68, 68, 68);
   height: 20px;
   vertical-align: top;
   top: 4px;
   font-size: 15px;
   position: relative;
   display: inline-block;
}

#previewPage .loadNewLink input {
   width: calc(100% - 235px);
}

#previewPage .previewDifferentLinkButton {
   display: inline-block;
   margin-left: 5px;
   line-height: 20px;
   padding: 0px 5px;
   font-size: 12px;
   cursor: pointer;
}

.plotPointRandomize {
   background: rgba(62, 59, 77, 0.59);
   display: inline-block;
   padding: 2px;
   cursor: pointer;
   height: 24px;
   line-height: 21px;
   position: relative;
   vertical-align: top;
   margin-left: 5px;
   font-size: 14px;
}

.plotPointDialogLine .setNewSize {
   display: none;
}

.plotPointRandomize[data-hide="true"] {
   opacity: 0;
}

.syncWithPointColor {
   position: absolute;
   top: 4px;
   right: 10px;
   background: rgb(7, 7, 31);
   padding: 2px 4px;
   opacity: 0.3;
   cursor: pointer;
   border: 1px dashed dimgray;
   font-size: 14px;
   width: 58px;
   text-align: center;
   height: 26px;
}

.syncWithPointColor[data-syncpointcolor="yes"] {
   opacity: 1;
   border: 1px solid rgba(0, 128, 0, 0);
}

.syncWithPointColor .unsyncWord {
   font-size: 12px;
}

.syncWithPointColor[data-syncpointcolor="no"] .unsyncWord {
   display: none;
}

.syncWithPointColor[data-syncpointcolor="yes"] .syncWord {
   display: none;
}

#previewPage .changeFontSizeButton,
#previewPage .ss_slider_input,
#plotPointOverlay .ss_slider_input,
#plotPointOverlay .changeFontSizeButton,
#page .plotPointDialogLine .ss_slider_input,
#page .plotPointDialogLine .changeFontSizeButton {
   height: 21px;
   line-height: 21px;
   vertical-align: top;
   top: 5px;
   background: rgb(29, 31, 37);
   border: 1px solid rgb(76, 76, 76);
   color: rgb(165, 165, 165);
}

#page #ruler_draw_width .ss_slider_input,
#page #ruler_draw_width .changeFontSizeButton {
   top: 0px;
}

#rulerSettingsDialog .changeFontSizeButton,
#rulerSettingsDialog .ss_slider_input {
   top: 0px;
}

#plotPointOverlay .ss_slider_input {
   background: rgb(42, 44, 50);
}

#plotPointOverlay .plotPointDialogLine .changeFontSizeButton,
#plotPointOverlay .plotPointDialogLine .ss_slider_container input {
   top: 0px;
   height: 24px;
   border-radius: 0px;
}

#plotPointOverlay .plotPointDialogLine .changeFontSizeButton {
   line-height: 24px;
}

#previewPage .ss_slider_input {
   background: rgb(42, 44, 50);
}

#previewPage .ss_slider_input:focus {
   border-color: rgba(130, 143, 147, 0.5);
}

#previewPage .ss_slider_container {
   width: unset;
   border: none;
   background: none;
}

#rulerSettingsDialog .ss_slider_container {
   padding: 0px;
   top: 0px;
   vertical-align: top;
}

#page #ruler_draw_width {
   border: none;
   background: none;
}

#page #ruler_draw_width .ss_slider_input {
   background: rgb(42, 44, 50);
}

#page #ruler_draw_width .changeFontSizeButton {
   background: rgb(29, 31, 37);
}

#plotPointOverlay .plotPointDialogLine .ss_slider_container {
   padding: 0px;
   vertical-align: top;
   height: 24px;
   background: none;
   border: none;
}

#copyLinkSection {}

#textCopied {
   line-height: 25px;
   position: absolute;
   left: 228px;
   display: block;
   height: 25px;
}

.setNewSize {
   padding: 0px 6px;
   border-radius: 0px;
   margin: 0px 0px 0px 6px;
   display: inline-block;
   font-size: 12.55px;
   position: relative;
   background: rgb(30, 31, 47);
   color: rgb(197, 197, 197);
}

.ss_slider_input {
   width: 60px;
   text-align: center;
   font-size: 19px;
   position: relative;
   border-top: 1px solid rgba(0, 0, 0, 0.74);
   border-bottom: 1px solid rgba(0, 0, 0, 0.74);
   border-image: initial;
   border-right: none;
   border-left: none;
   display: inline-block;
   margin: 0px;
   background: rgb(30, 31, 47);
   color: rgb(197, 197, 197);
   height: 32px;
}

#rightOptions .ss_slider_input {
   font-size: 13px;
}

.setNewSize,
.newFontSize,
.changeFontSizeButton,
.ss_slider_container div,
.ss_slider_container input {
   position: relative;
   height: 32px;
   top: 3px;
}

#caseManagementContainerswitch .setNewSize {
   display: none;
}

#previewPage .setNewSize {
   height: 20px;
   line-height: 20px;
   overflow: hidden;
   width: 45px;
   text-align: center;
   background: rgb(35, 40, 66);
   color: rgb(195, 193, 193);
   top: 5px;
}

#points_x_coordinates .setNewSize,
#points_y_coordinates .setNewSize,
#points_line_width .setNewSize,
#points_line_height .setNewSize {
   display: none;
}

#rightOptions .ss_slider_container div,
#rightOptions .ss_slider_container input {
   height: 26px;
   line-height: 26px;
   top: 2px;
   vertical-align: top;
   border: 1px solid rgba(0, 0, 0, 0.43);
   font-size: 12px;
   color: rgb(161, 161, 161);
   width: 37px;
   text-align: center;
}

#editorResizeHeightContainer .changeFontSizeButton.plus {
   width: 35px;
}

#rightOptions .ss_slider_container input {
   background: rgb(41, 55, 68);
   border-top: 1px solid black;
   border-bottom: 1px solid black;
   border-image: initial;
   border-right: none;
   border-left: none;
   margin: 0px;
   padding: 0px;
   width: 71px;
}

#rightOptions .ss_number_slider_button {
   background: rgb(29, 32, 34);
   color: rgb(203, 203, 203);
   border: none;
}

.textSelectContainer {}

.changeFontSizeButton,
.setNewSize {
   line-height: 32px;
}

.changeFontSizeButton,
.ss_number_slider_button {
   width: 32px;
   background: rgb(49, 49, 66);
   border: 1px solid rgba(0, 0, 0, 0.73);
   font-size: 10.5px;
   color: lightgray;
   display: inline-block;
   height: 32px;
   text-align: center;
   line-height: 32px;
   cursor: pointer;
}

#layoutEditor .ss_number_slider_button {
   background: rgb(21, 26, 39);
   overflow: hidden;
}

#layoutEditor .ss_slider_input {
   background: rgb(6, 11, 17);
   color: rgb(168, 171, 181);
}

.cc_settings_bar input[type="number"]::-webkit-inner-spin-button,
.cc_settings_bar input[type="number"]::-webkit-outer-spin-button,
.ss_slider_container input[type="number"]::-webkit-inner-spin-button,
.ss_slider_container input[type="number"]::-webkit-outer-spin-button {
   appearance: none;
   margin: 0px;
}

#allUserShortcutInner input::-webkit-outer-spin-button,
#allUserShortcutInner input::-webkit-inner-spin-button {
   appearance: none;
   margin: 0px;
}

#allUserShortcutInner input[type="number"] {}

.newFontSize:focus {
   border: 1px solid rgb(75, 141, 142);
}

.outputs[data-status="minimized"] .aceEditor {
   opacity: 0;
}

.cc_bottom_cover,
.cc_description_cover {
   background: rgba(29, 28, 34, 0.97);
   position: fixed;
   top: 98px;
   height: 92%;
   z-index: 6;
   width: 100%;
   text-align: right;
   display: none;
}

#forcedCondensedDisplay,
#optionalCondensedDisplay,
#userRequestCondensedDisplay,
#customCondensedProportionsDisplay {
   position: fixed;
   top: 200px;
   padding: 12px;
   background: rgb(86, 19, 19);
   z-index: 1000000;
   color: white;
   width: 264px;
   font-size: 15px;
   left: 30px;
   display: none;
}

.closeCoverTwo {
   border: 1px solid gray;
   background: rgb(21, 22, 23);
   color: rgb(148, 147, 147);
   display: block;
   cursor: pointer;
   font-size: 8px;
   width: 100px;
}

#customCondensedProportionsDisplay {
   left: 330px;
   background: darkslateblue;
}

#forcedCondensedDisplay[data-forcedcondensed="true"],
#optionalCondensedDisplay[data-optionalcondensed="true"],
#userRequestCondensedDisplay[data-userrequestcondensed="true"] {
   background: rgb(7, 84, 42);
}

#optionalCondensedDisplay {
   top: 280px;
}

#userRequestCondensedDisplay {
   top: 340px;
}

.cc_description_cover {
   background: rgba(22, 23, 24, 0.88);
   opacity: 1;
   z-index: 100;
}

#outputToggle {
   position: absolute;
   right: 5px;
   top: 0px;
}

.snippet_arrow {
   width: 33px;
   padding-left: 10px;
   padding-right: 5px;
   position: relative;
   top: 5px;
}

#mySideDiv {
   display: none;
}

.outputConsoleButtonsRow {
   text-align: center;
   vertical-align: top;
   overflow: hidden;
   border: 1px solid rgb(63, 72, 69);
   position: relative;
   top: 0px;
}

#thisPageInfo {
   color: rgba(211, 211, 211, 0.28);
   font-size: 12px;
}

#errorViewOverlay {
   position: fixed;
   background: rgb(11, 33, 47);
   top: 100px;
   left: 0px;
   width: 60%;
   height: calc(100% - 160px);
   padding: 60px;
   border: 4px solid rgb(113, 66, 35);
   overflow-y: auto;
}

.oneErrorLogLine {
   border: 2px solid rgb(122, 173, 187);
   margin: 12px;
   padding: 16px;
   background: black;
   color: lightgray;
   font-size: 20px;
   line-height: 40px;
}

.oneErrorLogLine:nth-child(2n+1) {
   background: rgb(17, 17, 43);
   color: rgb(160, 203, 203);
}

#thisPageInfo div {
   display: inline-block;
}

#simpleCountSection {
   background: rgb(40, 40, 94);
   color: white;
   position: absolute;
   bottom: 5%;
   height: 27px;
   width: 52%;
   z-index: 8;
   text-align: center;
   left: unset;
   right: 0px;
   display: none;
}

.outputConsoleButtonsRow>div {
   background: rgb(46, 51, 69);
   width: 12%;
   margin: 0px 7px;
   border: 2px solid rgb(0, 0, 0);
   position: relative;
   font-size: 8px;
   display: inline-block;
   vertical-align: top;
   height: 34px;
}

#page .theDatabaseMerge {
   width: unset;
   font-size: 10px;
   padding-top: 5px;
   cursor: pointer;
}

.toggleKeyboardShortcutTesting {
   cursor: pointer;
}

#outputConsoles .consoleButtonsLocation {
   display: none;
}

#outputConsoles .userDefaultOutputButton {
   width: unset;
}

#outputStatusButton {
   background: rgb(24, 37, 28);
   width: 54px;
   height: 35px;
   overflow: hidden;
   position: absolute;
   left: 0px;
   padding: 4px;
}

#outputStatusButton[data-status="off"] {
   background: rgb(48, 25, 31);
}

#jsiContainer {
   padding: 11px 8px 15px 15px;
}

#cc_rightContainer {
   color: white;
}

#cssPad {
   display: none;
}

.opacityRow .snippet_temp_val_1 {}

.top_menu_message,
.ccTopMessage {
   position: absolute;
   bottom: 0px;
   left: 2.4%;
   color: rgba(176, 177, 177, 0.88);
   font-size: 0.9em;
   opacity: 0;
   transition: opacity 0.2s ease 0s;
}

.activeShortcutsActive {
   position: absolute;
   opacity: 0.4;
   left: 20px;
   top: 0px;
   font-size: 0.7em;
   cursor: pointer;
}

#matchesEntryContainer .checkedStatusCheckbox .fa-check,
#page .theCheckSection .checkedBox .fa-check {
   opacity: 1;
}

.matchesEntryContainer .matchStatusDiv .checkedStatusCheckbox,
.theCheckSection .checkedBox {
   background: rgb(118, 123, 144);
}

.matchesEntryContainer .statusCheckboxSection:hover .statusCheckbox,
.theCheckSection:hover .newCheckbox {
   background: rgb(118, 123, 144);
}

.matchesEntryContainer .statusCheckboxSection:hover .fa-check,
#page .theCheckSection:hover .fa-check {
   opacity: 0.2;
}

.statusCheckboxText,
.theCheckSection .text {
   vertical-align: top;
   display: inline-block;
   height: 28px;
   line-height: 28px;
}

.statusCheckboxSection {
   display: inline-block;
   cursor: pointer;
}

.statusCheckbox .fa-check,
.theCheckSection .newCheckbox .fa-check {
   opacity: 0;
   position: absolute;
   left: 4px;
   font-size: 12px;
   top: 4px;
   color: rgb(9, 25, 49);
   transition: opacity 0.1s ease 0s;
}

.matchesEntryContainer .statusCheckbox,
.theCheckSection .newCheckbox {
   width: 19px;
   height: 19px;
   border-radius: 3px;
   display: inline-block;
   vertical-align: top;
   margin-top: 5px;
   position: relative;
   background: rgb(156, 162, 187);
   transition: background 0.2s linear 0s;
}

.shortcutGroupsSection .newCheckbox {
   position: absolute;
   right: 5px;
   bottom: 1px;
}

.allLayoutLines .newCheckbox {
   background: rgb(143, 152, 159);
   margin-left: 2px;
}

.maximizeCheckboxContainer .newCheckbox {
   margin-top: 2px;
   background: rgb(85, 87, 94);
   transition: background 0s ease 0s;
}

.matchesEntryContainer .statusCheckboxSection:hover .statusCheckbox,
.theCheckSection:hover .newCheckbox {
   background: rgb(118, 123, 144);
}

.matchesEntryContainer .statusCheckboxSection:hover .fa-check,
#page .theCheckSection:hover .fa-check {
   opacity: 0.2;
}

.statusCheckboxText,
.theCheckSection .text {
   vertical-align: top;
   display: inline-block;
   height: 28px;
   line-height: 28px;
}

.statusCheckboxSection {
   display: inline-block;
   cursor: pointer;
}

.statusCheckbox .fa-check,
.theCheckSection .newCheckbox .fa-check {
   opacity: 0;
   position: absolute;
   left: 4px;
   font-size: 12px;
   top: 0px;
   color: rgb(9, 25, 49);
   transition: opacity 0.1s ease 0s;
}

.allLayoutLines .checkedBox .fa-check {
   height: 19px;
   line-height: 18px;
   top: 2px;
}

.theCheckSection {
   cursor: pointer;
   background: rgb(44, 42, 55);
   display: inline-block;
}

.maximizeCheckboxContainer .theCheckSection {
   width: 100%;
}

.accentTitle {
   display: inline-block;
   width: 77px;
   white-space: nowrap;
   overflow: hidden;
   vertical-align: top;
   height: 28px;
   padding-top: 3px;
   background: rgba(45, 59, 134, 0.41);
   padding-left: 6px;
   position: relative;
}

.editorThemeOptionLine .accentTitle {
   display: none;
}

#divider_admin_overlay .accentTitle {
   width: 216px;
   background: rgb(2, 9, 25);
   color: rgb(205, 234, 244);
}

#previewPage .accentTitle {
   width: 200px;
   margin-bottom: 15px;
   background: rgb(28, 28, 50);
   border: none;
}

#previewPage #previewPageSettings .accentTitle {
   width: 300px;
}

.cc_sync {
   cursor: pointer;
}

.preferenceLine .cc_sync,
.preferenceLine .cc_new_toggle {
   position: absolute;
   right: 0px;
   top: 15px;
   opacity: 0.6;
   font-size: 14px;
   cursor: pointer;
   color: gray;
}

.preferenceLine .cc_new_toggle {
   color: lightblue;
   background: rgb(18, 38, 58);
}

#elementInspectorSelector {
   position: absolute;
   top: 170px;
   background: rgb(8, 13, 62);
   padding: 12px;
   right: 0px;
   opacity: 1;
   display: none;
}

#taskListSettings .accentTitle,
#outlineCreatorSettings .accentTitle,
#elementInspectorSettings .accentTitle {
   width: 245px;
   background: black;
   border: none;
}

#elementInspectorSettings .accentTitle {
   width: 300px;
}

#previewPage .recordingColorContainer .accentTitle {
   width: 70px;
   overflow: hidden;
   background: none;
   font-size: 11px;
   margin-right: 3px;
   border: none;
}

.recordingColorContainer .accentTitle {
   width: unset;
   margin-right: 12px;
}

#page .recordingColorContainer .accentInput {
   margin: 0px;
   width: 70px;
}

#page .recordingColorContainer .accentInput,
.recordingColorContainer .accentTitle {
   height: 24px;
   line-height: 19px;
   vertical-align: top;
   margin-top: 3px;
   background: none;
}

#chainGraphicViewOptions .accentTitle,
#chainGraphicViewOptions .chainLayoutOptionsTitle {
   background: rgb(12, 12, 12);
   width: 147px;
   color: lightblue;
}

#chainGraphicViewOptionsTitle {
   background: black;
   position: relative;
   text-align: center;
   height: 35px;
   line-height: 35px;
   color: lightgray;
}

#chainGraphicViewOptionsTitle .oneHelpButton {
   line-height: 35px;
}

#chainGraphicViewOptionsTitle .colorChangerButton,
#chainGraphicViewOptionsTitle .layoutOptionsButton {
   background: red;
   position: absolute;
   right: 0px;
   width: 50px;
   top: 0px;
   cursor: pointer;
}

.chainGraphicLayoutSection {
   display: none;
}

.chainGraphicLayoutSection,
#chainGraphicViewOptionsTitle .layoutOptionsButton {
   background: rgb(39, 58, 70);
}

.saveChainSettingsToDatabase {
   height: 38.39px;
   padding-top: 6px;
   padding-bottom: 6px;
   font-size: 14.8px;
}

.saveChainSettingsToDatabase,
.premadeRow {
   background: rgb(41, 46, 80);
}

.chainToDatabaseTitle,
.chainToDatabaseName {
   display: inline-block;
   color: rgb(173, 216, 230);
   position: relative;
   top: 1px;
}

#chainSettingsToDatabase,
.chainToDatabaseButton {
   display: inline-block;
   background: black;
   vertical-align: top;
   height: 24px;
}

.chainToDatabaseButton,
.chainToDatabaseDefault {
   background: rgb(21, 25, 68);
   padding: 0px 8px;
   cursor: pointer;
   color: lightgray;
   height: 24px;
}

.chainToDatabaseDefault {
   display: inline-block;
   margin-left: 5px;
}

.chainToDatabaseHelp {
   display: inline-block;
   height: 24px;
   line-height: 24px;
   padding: 0px;
   vertical-align: top;
   margin-right: 8px;
   color: lightblue;
}

.chainToDatabaseHelp i {
   line-height: 22px;
}

#chainIconRow {
   background: black;
   border: 3px solid seagreen;
   padding: 6px;
   display: none;
}

.icon_container {
   display: inline-block;
}

.chainColorChangerSection,
#chainGraphicViewOptionsTitle .colorChangerButton {
   background: rgb(32, 38, 70);
}

#chainGraphicViewOptionsTitle .colorChangerButton {
   right: 50px;
}

#bottomBarColorsArea .accentTitle,
#topBarColorsArea .accentTitle {
   width: 280px;
   text-align: left;
   background: rgb(28, 28, 50);
}

.color_separator {
   background: black;
   height: 30px;
   width: 100%;
   color: gray;
}

.bottomBarAccentBoxes,
#allTopBarSettings,
.topBarColorsContainer,
.bottomBarIconsContainer {
   display: none;
}

#previewPage .bottomBarAccentBoxes {
   width: 31%;
   left: 40px;
   z-index: 33;
   position: fixed;
   color: white;
   border: 1px solid red;
   overflow-y: auto;
   background: rgb(25, 42, 44);
   height: 100px;
   top: unset;
   bottom: 40px;
}

.topBarColorSeparator {
   background: black;
   color: rgb(82, 140, 189);
   text-align: center;
   border-bottom: 1px solid rgb(82, 140, 189);
   height: 30px;
   line-height: 32px;
   position: relative;
}

#topGeneralDefaultSets {
   position: absolute;
   right: 35px;
   height: 24px;
   min-width: 200px;
   top: 3px;
   opacity: 0.4;
   display: none;
}

#topGeneralDefaultSets:hover {}

#topGeneralDefaultSets i {
   color: lightblue;
   font-size: 12px;
   bottom: 2px;
   position: relative;
}

#changeAccentColorSchemeTop {
   cursor: pointer;
}

#changeAccentColorScheme,
#changeAccentColorSchemeTop,
#topGeneralColorDropdown {
   border: 1px solid black;
   display: inline-block;
   background: rgb(43, 43, 102);
   vertical-align: top;
   height: 22px;
   line-height: 22px;
   font-size: 11px;
   padding: 0px 4px;
   color: lightblue;
}

.bottomBarIconsContainer {
   background: rgb(46, 57, 83);
   position: relative;
}

#changeAccentColorTheme {
   cursor: pointer;
}

.topBarColorsContainer {}

#allTopBarSettings .preferenceLine {
   display: block;
}

#topMenuSettingsMainContainer .preferenceLine[data-state="off"] .previewPreferenceLineTitle,
#topMenuSettingsMainContainer .preferenceLine[data-state="off"] .preferenceRadioButtons,
#topBarSubmenuContainer .preferenceLine[data-state="hide"] .preferenceLineTitle,
#topBarSubmenuContainer .preferenceLine[data-state="hide"] .preferenceRadioButtons,
#topBarSubmenuContainer .preferenceLine[data-state="hide"] .oneHelpButton {
   opacity: 0.3;
}

#topMenuSettingsMainContainer .preferenceLine[data-state="off"] .reorganizationArrows,
#topBarSubmenuContainer .preferenceLine[data-state="hide"] .reorganizationArrows {
   display: none;
}

.preferenceLine[data-thekey="subMenuScrollDisplay"] .reorganizationArrows,
.preferenceLine[data-thekey="userSettingsButtonDisplay"] .reorganizationArrows {
   display: none;
}

.accentSetDefault {
   opacity: 0;
   position: absolute;
   right: 4px;
   top: 5px;
   height: 18px;
   width: 18px;
   line-height: 18px;
   text-align: center;
   background: rgb(70, 109, 155);
   transition: opacity 0.2s ease 0s;
   cursor: pointer;
}

.taskScrollBarToggle,
.outlineScrollBarToggle {
   cursor: pointer;
}

.accentSetDefaultPositionTwo {
   display: none;
}

.accentTitle:hover .accentSetDefault {
   opacity: 0.3;
}

.accentTitle:hover .accentSetDefault:hover {
   opacity: 0.7;
}

.languageAccentBox {
   display: inline-block;
   padding-right: 45px;
   position: relative;
   vertical-align: top;
   width: 100%;
   white-space: nowrap;
}

#page .languageAccentBox[data-meta="mainEditorBackgroundColor"] {
   padding-right: 0px;
   /*border: 1px solid yellow;*/
}

.languageAccentBox[data-meta="preview_mainButtonShadow"],
.languageAccentBox[data-meta="preview_mainButtonShadowActive"],
.languageAccentBox[data-meta="preview_submenuButtonActiveShadow"],
.languageAccentBox[data-meta="preview_submenuButtonShadow"] {}

#previewPage .languageAccentBox {
   width: 89%;
   height: 34px;
}

#previewPage #taskListSettings .languageAccentBox,
#previewPage #outlineCreatorSettings .languageAccentBox,
#previewPage #elementInspectorSettings .languageAccentBox {
   height: 32px;
   width: 67%;
}

.outlineButtonSync {
   position: absolute;
   top: 0px;
   right: 0px;
   cursor: pointer;
   background: rgba(37, 65, 135, 0.47);
   padding: 3px 8px;
}

#previewPage .recordingLocationsInputContainer .languageAccentBox {
   width: 29%;
   border: none;
}

.recordingColorContainer .languageAccentBox {
   width: unset;
   overflow: hidden;
   height: 30px;
   padding: 0px;
   margin-right: 21px;
}

#topBarSettings {}

.topBarSettingsTitle {
   background: black;
   height: 23px;
   line-height: 23px;
   border-bottom: 1px solid gray;
}

#bottomBarColorsArea .languageAccentBox,
#topBarColorsArea .languageAccentBox,
#chainGraphicViewOptions .languageAccentBox {
   border-bottom: 1px solid black;
   height: 47px;
   padding-top: 9px;
   padding-left: 19px;
}

#chainGraphicViewOptions .languageAccentBox {
   font-size: 12px;
   width: 315px;
}

.languageAccentBox[data-meta="separator-separator"] {
   background: black;
}

.languageAccentBox[data-meta="separator-separator"] .accentTitle,
.languageAccentBox[data-meta="separator-separator"] .accentInput {
   display: none !important;
}

.cc_bar_settings_title {
   background: rgb(6, 6, 31);
   color: lightgray;
   text-align: center;
   height: 28px;
   line-height: 28px;
   position: relative;
   cursor: pointer;
}

#allPreviewBarSettings,
#allPreviewColorSettings,
#allBottomPreviewColorSettings,
#allPreviewBottomBarSettings {
   min-height: 130px;
   display: none;
}

#allPreviewBarSettings {}

#allPreviewColorSettings,
#allBottomPreviewColorSettings {
   background: inherit;
   width: 76%;
   margin-left: 12%;
   margin-top: 10px;
}

#page[data-width="showingConsoles"] #allPreviewColorSettings,
#page[data-width="showingConsoles"] #allBottomPreviewColorSettings {
   margin-left: 7%;
}

.previewColorSettingsButtonsRow {
   background: rgba(14, 60, 88, 0.62);
   padding: 10px 6px;
}

#allPreviewBottomBarSettings {
   padding-top: 16px;
   background: rgb(46, 57, 83);
}

.savePreviewColorChanges {
   background: rgb(7, 7, 52);
   display: inline-block;
   padding: 8px;
   margin: 4px;
   cursor: pointer;
}

#previewSettingsContainer .cc_bar_settings_title {
   width: 100%;
}

.barMenuSeparator {
   background: rgb(29, 38, 72);
   height: 23px;
   border: 1px solid rgb(29, 29, 29);
   text-align: center;
   color: lightgray;
   position: relative;
}

.reorganizePreviewPageArea {
   position: absolute;
   top: 0px;
}

.reorganizePreviewTitle,
.reorganizePreviewButton {
   display: inline-block;
   margin-left: 6px;
   cursor: pointer;
   font-size: 12px;
   color: rgba(168, 177, 180, 0.93);
}

#topBarSubmenuContainer {}

.topMenuReorganizeReset,
.resetTopBarOrder {
   position: absolute;
   cursor: pointer;
   right: 8px;
   top: 0px;
   font-size: 12px;
}

.barMenuSeparator .idealCounts {
   color: rgb(223, 136, 45);
}

.toggle_bar_chevron {
   position: absolute;
   right: 5px;
   top: 1px;
   cursor: pointer;
}

.languageAccentBoxCover {
   background: rgb(28, 28, 28);
   z-index: 5;
   position: absolute;
   height: 100%;
   width: 100%;
   top: 0px;
   left: 0px;
   opacity: 0.8;
}

#page .languageAccentBox input {
   width: 98px;
   display: inline-block;
   background: rgb(35, 49, 93);
   border: 1px solid rgb(43, 43, 43);
   height: 28px;
   color: white;
}

#page #divider_admin_overlay .languageAccentBox input {
   border: 1px solid black;
}

#chainGraphicViewOptions input {
   vertical-align: top;
   margin: 0px 0px 0px 10px;
}

#page #chainSettingsToDatabaseInput {
   border: 1px solid rgb(54, 53, 53);
   margin-right: 10px;
   color: lightgray;
   width: calc(100% - 383px);
   height: 24px;
   vertical-align: top;
}

#page #chainGraphicViewOptions .chainGraphicLayoutSection input {
   margin-left: 0px;
   height: 27px;
   color: lightblue;
}

#page #chainGraphicViewOptions .chainGraphicLayoutSection select {
   color: lightblue;
}

.chainSettingToDatabaseNotAvailable {
   display: inline-block;
   opacity: 0;
   transition: opacity 0.3s ease 0s;
}

.languageAccentBox .accentButton {
   background: blue;
   position: absolute;
   height: 26px;
   width: 26px;
   right: 4px;
   top: 1px;
   cursor: pointer;
   display: none;
}

.activeAndAccent {
   display: inline-block;
   width: calc(100% - 76px);
}

.preferenceLine[data-thekey="showLanguageTypes"] .theCheckSection {
   width: 80px;
   border: 1px solid rgb(40, 40, 40);
   background: rgba(31, 41, 98, 0.59);
   margin-bottom: 3px;
}

@media only screen and (min-width: 1650px) {
   .preferenceLine[data-thekey="showLanguageTypes"] .theCheckSection {
      width: 120px;
   }
}

.preferenceLine[data-thekey="showLanguageTypes"] .maximizeCheckSectionLabel {
   width: 71%;
}

#page .syntaxCheckSection {
   margin-left: 30px;
   width: 160px;
}

.optionsPerLanguageContainer {
   border: 1px solid rgb(53, 51, 54);
   background: rgb(44, 42, 55);
   width: 49%;
}

#page .optionsPerLanguageContainer[data-language="mainEditors"],
#page .optionsPerLanguageContainer[data-language="functionFactory"],
.optionsPerLanguageContainer[data-language="compile"],
.optionsPerLanguageContainer[data-language="scratchpad"] {
   background: rgb(46, 52, 71);
   border: 1px solid black;
}

#page .optionsPerLanguageContainer[data-language="mainEditors"] .theCheckSection,
#page .optionsPerLanguageContainer[data-language="functionFactory"] .theCheckSection,
.optionsPerLanguageContainer[data-language="compile"] .theCheckSection,
.optionsPerLanguageContainer[data-language="scratchpad"] .theCheckSection {
   background: inherit;
}

#page .optionsPerLanguageContainer[data-language="mainEditors"] .maximizeCheckSectionLabel,
#page .optionsPerLanguageContainer[data-language="functionFactory"] .maximizeCheckSectionLabel,
.optionsPerLanguageContainer[data-language="compile"] .maximizeCheckSectionLabel,
.optionsPerLanguageContainer[data-language="scratchpad"] .maximizeCheckSectionLabel {
   color: rgb(199, 210, 222);
}

.activeHighlightCustomizeContainer {
   background: rgb(44, 42, 55);
   min-height: 200px;
   width: 500px;
   display: block;
   position: relative;
   border: 2px solid green;
   overflow: hidden;
   margin-left: 2px;
   margin-top: 15px;
}

.activeHighlightCustomizeContainer .activeInfoDiv {
   background: rgb(25, 1, 24);
   font-size: 14px;
   padding: 18px;
}

.activeHighlightSetDefault,
.activeHighlightEnableSection,
.activeHighlightInputArea,
.activeHighlightSectionTitle {
   border: 1px solid gray;
   display: inline-block;
   vertical-align: top;
}

.activeHighlightSetDefault {
   width: 30px;
   text-align: center;
   background: black;
   cursor: pointer;
}

.activeHighlightEnableSection {
   background: black;
   color: lightblue;
   padding: 0px 5px;
   cursor: pointer;
}

.activeHighlightEnableSection[data-status="enabled"] .fa-square {
   display: none;
}

.activeHighlightEnableSection[data-status="disabled"] .fa-check-square {
   display: none;
}

.gutterModifyContainer {
   background: indigo;
   border: 2px solid cyan;
}

.gutterModifyContainer .activeHighlightSectionTitle,
.gutterModifyContainer .gutterHorizontalInputArea,
.gutterModifyContainer .gutterVerticalInputArea,
.gutterModifyContainer .activeHighlightSetDefault {
   border: 1px solid white;
   background: black;
   display: inline-block;
   margin-right: 8px;
   padding: 0px 5px;
}

.gutterHorizontalInputArea,
.gutterVerticalInputArea,
.minimizeMaximizeIconInputArea,
.minimizeMaximizeBackgroundInputArea {
   width: 190px;
   overflow: hidden;
   display: inline-block;
}

.activeHighlightSectionTitle {
   width: 100px;
   overflow: hidden;
}

.activeHighlightInputArea {
   display: inline-block;
   margin-left: 10px;
   width: 120px;
   border: 2px solid yellow;
   overflow: hidden;
   margin-right: 10px;
}

.activeHighlightModifyContainer {
   height: 45px;
   border: 2px solid cyan;
   background: rgb(7, 45, 56);
   margin-bottom: 15px;
   font-size: 15px;
   line-height: 30px;
}

.activeHighlightTitle {
   background: black;
   height: 40px;
   line-height: 40px;
   text-align: center;
   color: lightblue;
   font-size: 14px;
}

#page[data-width="showingConsoles"] .optionsPerLanguageContainer {
   width: 88%;
}

.optionsPerLanguageContainer[data-active="inactive"] {
   background: rgb(28, 28, 28);
}

.preferenceLine[data-thekey="beautifyOnPaste"] .optionsPerLanguageContainer[data-active="inactive"] {
   background: rgb(44, 42, 55);
}

.allLayoutLines .theCheckSection {
   background: rgb(34, 38, 50);
   overflow: hidden;
   vertical-align: text-bottom;
   height: 34px;
   cursor: pointer;
   float: right;
   padding: 0px 7px;
   color: rgb(179, 180, 183);
   position: relative;
   z-index: 5;
}

.allLayoutLines .theCheckSection * {
   cursor: pointer;
}

.allLayoutLines .checkSectionTitle {
   display: inline-block;
   height: 34px;
}

.allLayoutLines .newCheckbox {
   margin-top: 7px;
}

.theCheckSection .checkedBox {
   background: rgb(118, 123, 144);
}

.maximizeCheckboxContainer .checkedBox {
   background: rgb(63, 66, 80);
}

.maximizeCheckboxContainer .newCheckbox {
   margin-top: 2px;
}

.normalMaximizeContainer .newCheckbox {
   margin-top: 5px;
   margin-right: 2px;
}

.theCheckSection:hover .newCheckbox {
   background: rgb(142, 148, 170);
}

.maximizeCheckboxContainer .theCheckSection:hover .newCheckbox {
   background: rgb(85, 87, 94);
}

.maximizeCheckboxContainer .theCheckSection:hover .checkedBox {
   background: rgb(63, 66, 80);
}

.theCheckSection:hover .checkedBox {
   background: rgb(118, 123, 144);
}

#page .theCheckSection:hover .fa-check {
   opacity: 0.28;
}

#page .allLayoutLines .theCheckSection .fa-check {
   height: 19px;
   line-height: 18px;
   top: 2px;
}

#matchesEntryContainer .checkedStatusCheckbox .fa-check,
#page .theCheckSection .checkedBox .fa-check {
   opacity: 1;
}

#privacyButtonContainer,
#languageSettingButtonContainer {
   display: inline-block;
   position: relative;
}

#languageSettingButtonContainer .invalidateButton {
   display: block;
}

#languageSettingButtonContainer .cc_settings_button {
   padding-top: 10px;
}

#languageSettingButtonContainer div {
   font-size: 9px;
   line-height: 11px;
   font-weight: 700;
}

#cc_top_bar.condensedView #languageSettingButtonContainer {
   padding: 1px;
}

#cc_top_bar.condensedView #languageSettingButtonContainer div {
   font-size: 8px;
   line-height: 9px;
   font-weight: 700;
   padding: 1px;
}

#cc_private {
   font-size: 17px;
   text-align: center;
   padding: 10px 10px 19px;
}

#pageLoadStatus {
   background: rgb(8, 47, 66);
   color: white;
}

#keyboard_shortcuts {
   height: calc(100% - 112px);
   overflow: hidden;
}

#info3 {
   position: fixed;
   bottom: 20px;
   right: 66%;
   width: 18%;
   height: 593px;
   background: rgb(51, 2, 43);
   color: white;
   text-align: center;
   z-index: 100;
   display: none;
}

#measurements {
   position: fixed;
   background: rgb(29, 28, 31);
   color: white;
   width: 221px;
   bottom: 32px;
   left: 535px;
   z-index: 222222;
   display: none;
   padding-bottom: 38px;
}

#measurements div {
   display: inline-block;
}

#buttonsDiv {
   position: fixed;
   background: rgb(2, 2, 24);
   bottom: 30%;
   left: 39%;
   color: white;
   width: 500px;
   z-index: 50;
   opacity: 1;
   transition: opacity 0.3s ease 0s;
   height: unset;
   display: none !important;
}

.buttonsContainer {
   display: inline-block;
   width: 200px;
   overflow: hidden;
}

#buttonsDiv .pageLoadStatus2 {
   display: inline-block;
   width: 296px;
   background: rgba(22, 21, 21, 0.63);
   color: white;
   float: right;
   padding: 11px;
   min-height: 245px;
}

#buttonsDiv:hover {
   opacity: 1;
}

.pageLoadStatus2Title {
   position: absolute;
   background: rgb(0, 0, 0);
   color: rgb(255, 255, 255);
   top: 8px;
   right: 6px;
   opacity: 0.2;
}

.buttonsContainer div {
   background: rgb(3, 23, 32);
   cursor: pointer;
   padding: 5px;
   text-align: center;
   color: lightgray;
   border-top: 1px solid rgba(161, 161, 161, 0.27);
   border-right: 1px solid rgba(161, 161, 161, 0.27);
   border-left: 1px solid rgba(161, 161, 161, 0.27);
   border-image: initial;
   position: relative;
   margin: 0px 5px;
   border-bottom: none;
   width: 200px;
}

.buttonsContainer div:last-child {
   border-bottom: 1px solid rgba(161, 161, 161, 0.27);
}

#buttonsDiv .titleRow {
   background: rgba(0, 128, 0, 0);
   cursor: default;
   border-top: none;
   border-right: none;
   border-left: none;
   border-image: initial;
   border-bottom: 1px solid rgb(42, 51, 55);
   margin-bottom: 8px;
   position: relative;
   height: 35px;
   line-height: 30px;
}

#buttonsDiv .titleRow i {
   position: absolute;
   right: 5px;
   top: 11px;
   font-size: 1.1em;
   cursor: pointer;
   color: rgb(126, 159, 155);
}

#page .buttonOverlay {
   position: absolute;
   top: 0px;
   left: 0px;
   width: 100%;
   height: 100%;
   opacity: 0;
}

.opacity05 {
   opacity: 0.05;
}

.theMeasurementUnit {
   display: inline-block;
   min-width: 50px;
}

.renderCover {
   position: absolute;
   height: 100%;
   width: 100%;
   background: rgb(24, 29, 36);
   opacity: 1;
   top: 83%;
   padding-top: 20px;
   text-align: center;
}

#bothCondensedSections .renderCover {
   top: 84px;
   z-index: 8;
   height: 40px;
   width: 70px;
   overflow: hidden;
   background: rgb(47, 54, 54);
   color: white;
}

#colorChanger {
   display: none !important;
}

.hideTopBarArrow,
.hideBottomBarArrow,
.barSettingsGUIToggle {
   position: absolute;
   padding: 6px;
   color: rgb(103, 104, 109);
   right: 18px;
   z-index: 1300;
   cursor: pointer;
   transition: opacity 0.2s ease 0s;
}

#page[data-recordingbar="show"] .hideTopBarArrow {
   right: 55px;
}

.hideBottomBarArrow,
.barSettingsGUIToggle {
   opacity: 1;
   padding: 0px;
   right: 8px;
   top: 8px;
}

#moduleSizesToShow {
   background: rgb(134, 82, 115);
   margin-right: 12px;
   font-size: 11px;
   color: rgb(230, 230, 197);
   padding: 0px 5px;
   display: none;
}

#moduleSizesToShow>div {
   display: inline-block;
   margin-right: 7px;
}

#moduleSizesToShow .labelTwo,
#moduleSizesToShow .sizeTwo {
   color: rgb(164, 237, 237);
}

.barSettingsGUIToggle {
   right: 30px;
}

.hideTopBarArrow:hover {
   opacity: 0.4;
}

.hideTopBarArrowActive {
   opacity: 0.4;
}

.transitionCover {
   position: fixed;
   top: 0px;
   left: 0px;
   background: rgba(38, 76, 85, 0.37);
   height: 100%;
   width: 100%;
   z-index: 333;
   display: none;
}

.lineBreakExplanation {
   background: rgb(4, 10, 23);
   position: fixed;
   width: 446px;
   padding: 20px;
   top: 30%;
   border: 1px solid black;
   color: darkgrey;
   cursor: default;
   display: none;
   right: 20px;
   z-index: 30;
   font-size: 16px;
   line-height: 28px;
}

.closeLineBreakExplanation {
   position: absolute;
   cursor: pointer;
   padding: 6px;
   right: 0px;
   top: 0px;
   font-size: 21px;
}

.lineBreakExplanation .indentedRow {
   position: relative;
   margin-left: 20px;
   margin-top: 5px;
}

.lineBreakExplanation .ruleContainer {
   background: rgb(13, 12, 19);
   width: 245px;
   border: 1px solid rgb(47, 46, 46);
   margin-top: 10px;
   padding-bottom: 10px;
}

.lineBreakRule {
   position: relative;
   margin-left: 14px;
   width: 205px;
   margin-top: 15px;
}

.lineBreakRuleInline {
   margin-top: 20px;
}

#lineBreakHTML {
   display: none;
}

.renderLightsContainer {
   position: relative;
   display: inline-block;
   left: 2px;
}

#previewPage .renderLightsContainer {
   height: 24px;
   width: 24px;
   margin-top: 4px;
   line-height: 24px;
   text-align: center;
   padding: 3px 2px 2px 3px;
   vertical-align: top;
}

.renderLightsContainer {
   height: 43.75px;
   min-width: 16px;
}

#codeCreate .renderLightsContainer.renderLightsClone {
   line-height: 42px;
   height: 40px;
}

#previewPage .renderLightsClone {
   background: inherit;
   width: 100px;
   display: none;
}

#previewPage .renderLight {
   height: 20px;
   width: 20px;
   border: none;
}

.creationRenderLight,
.renderLight {
   height: 15px;
   width: 15px;
   left: -2px;
   position: relative;
   background-color: rgb(70, 13, 16);
   border-radius: 50%;
   border: 1px solid black;
   cursor: pointer;
   box-shadow: rgba(123, 123, 123, 0.48) 5px 3px 4px 0px inset;
}
.creationRenderLight {
   top: 1px;
   height: 18px;
   width: 18px;
}

.creationRenderLight {
   display: none;
}

.creationPreviewRenderLight[data-status="auto"] .creationRenderLight.renderLightGreen,
.creationPreviewRenderLight[data-status="manual"] .creationRenderLight.renderLightRed {
   display: inline-block;
}




.renderLightsContainer .renderLight {
   position: absolute;
   bottom: 0px;
}

.renderLightGreen {
   background-color: rgb(2, 38, 2);
}

#codeCreate .renderLightOrange {
   background: rgb(98, 67, 10);
}

.renderLightsClone .renderLight {
   display: inline-block;
   position: relative;
   vertical-align: bottom;
}

#previewPage .renderLightBlue,
#codeCreate .renderLightBlue {
   background: rgb(23, 109, 160);
}

#previewPage .renderLightsClone .renderLight,
#codeCreate .renderLightsClone .renderLight {
   cursor: default;
   bottom: 4px;
}

#cc_error_page .ccTopBarCopy .renderLightGreen,
#cc_error_page .ccTopBarCopy .theDivTitle,
#cc_error_page .anOldButton {
   display: none;
}

.ace__search.right {
   right: 60px;
}

.ace_search.right {
   right: 60px;
   width: 78%;
   height: 48px;
   min-height: 74px;
   border-radius: 0px 0px 5px 5px;
}

.splitContentInner .editorCover {
   background: rgb(29, 31, 33);
   opacity: 0.76;
   z-index: 5;
   display: none;
   position: absolute;
   top: 0px;
   left: 0px;
   width: 100%;
   height: 100%;
   text-align: center;
}

.dragCover {
   position: absolute;
   top: 0px;
   left: 0px;
   width: 100%;
   height: 100%;
   background: rgb(39, 39, 39);
   opacity: 0.86;
   color: white;
   z-index: 102;
   display: none;
}

.dragCover .theSize {
   position: relative;
   top: 5%;
   font-size: 22px;
   color: rgb(222, 221, 221);
}

#twoMainContainers[data-showsizes="hide"] .dragCover .theSize {
   opacity: 0;
}

.dragCover-vertical .theSize {
   text-align: center;
}

.dragCover-horizontal .size1 {
   margin-left: 28px;
}

.dragCover-horizontal .size2 {
   text-align: right;
   margin-right: 28px;
}

.cc_main_container .dragCover {
   background: rgb(40, 43, 53);
   opacity: 0.9;
}

    #entire_item_creation[data-showhelp="no"] .itemCreationMainHelp {
      display: none;
   }

 
   #entire_item_creation[data-showhelp="yes"] .currentlyHidden,
   #entire_item_creation[data-showhelp="no"] .currentlyShown {
      
      background: #360404;
      display: none;
   }

 
  
#oneDragCover {
   display: none;
}

#oneGutter {
   position: absolute;
   top: 70%;
   color: white;
   width: 240px;
   background: blue;
   display: none;
}

.absoluteFull,
.absoluteContainer {
   position: absolute;
   top: 0px;
   left: 0px;
   width: 100%;
   height: 100%;
}

.ace-tomorrow-night .ace_gutter {
   background: rgb(29, 31, 33);
   color: rgb(197, 200, 198);
}

#consoleOverlay {
   top: 0px;
   left: 0px;
   width: 100%;
   height: 100%;
   z-index: 105;
   border: 2px solid rgba(117, 117, 117, 0.59);
   background: rgb(24, 29, 29);
   overflow: hidden;
   display: none;
}

#consoleOverlay .consoleOverlayTitle {
   position: absolute;
   bottom: 0px;
   background: rgb(0, 0, 0);
   color: rgb(77, 145, 140);
   z-index: 100;
   padding: 0px;
   right: 0px;
   opacity: 0.2;
}

#entire_console {
   border: none;
   height: 100%;
   overflow: hidden;
}

#entire_outputs {
   padding: 0px;
   height: 100%;
   width: 100%;
   background: rgb(29, 31, 33);
}

#entire_render {
   top: 0px;
   height: 100%;
   background: rgb(63, 61, 72);
}

#styleEditorReminder {
   position: absolute;
   opacity: 0.5;
   top: 4px;
   z-index: 33333;
   right: 5px;
   background: rgba(105, 105, 105, 0.23);
   color: lightgray;
   cursor: default;
   font-size: 9.1px;
}

#styleEditorReminder[data-zerostatus="zero"] {
   display: none;
}

.compileTitle {
   background: rgba(15, 16, 34, 0.72);
   text-align: center;
   position: relative;
   height: 38px;
   line-height: 38px;
   border-bottom: 1px solid rgba(90, 90, 90, 0.56);
}

#previewPage .compileTitle {
   font-size: 0.9em;
   color: lightgray;
}

#theme_selection_compile {
   border: 1px solid rgba(129, 138, 141, 0.28);
   text-align: center;
   background: rgb(4, 4, 27);
   height: unset;
   line-height: 32px;
   color: lightblue;
   display: none;
}

.compileThemeTitleText,
.compileThemeSave {
   display: inline-block;
}

#compileThemeSelectionDropdown {
   background: rgb(1, 14, 60);
   border: 1px solid rgba(105, 105, 105, 0.54);
   margin-left: 10px;
   color: lightblue;
}

.compileThemeTitleText,
.compileThemeSave {
   display: inline-block;
}

.compileThemeTitleText,
#compileThemeSelectionDropdown,
.compileThemeSave {
   height: 28px;
   line-height: 28px;
   margin-left: 8px;
   vertical-align: top;
   margin-top: 3px;
}

.compileEditorTagCleanup,
#compileEditorFontSizeArea,
#compileEditorThemeSelectionBox,
#compileFontSizeInput {
   display: inline-block;
   vertical-align: top;
}

.compileEditorTagCleanup .oneHelpButton {
   line-height: 32px;
}

.compileEditorTagCleanup {}

.compileEditorTagCleanup .invalidTagsOption {
   display: inline-block;
   width: 40px;
   text-align: center;
   cursor: pointer;
}

#compileFontSizeInput {
   background: rgb(28, 29, 36);
   width: 56px;
   border: 1px solid rgb(34, 48, 48);
   height: 28px;
   margin-top: 3px;
   text-align: center;
   color: lightblue;
}

.compileThemeSave {
   border: 1px solid rgba(77, 84, 84, 0.38);
   padding: 0px 6px;
   border-radius: 8%;
   background: rgb(1, 14, 60);
   cursor: pointer;
}

.compileButton,
.CSSButtonCopy {
   position: absolute;
   right: 15px;
   color: lightgray;
   background: rgb(47, 47, 61);
   border: 1px solid rgba(218, 216, 216, 0.32);
   padding: 0px 5px;
   font-size: 0.9em;
   height: 28px;
   width: 32px;
   text-align: center;
   line-height: 28px;
   top: 4px;
   opacity: 0.6;
   cursor: pointer;
   transition: opacity 0.3s ease 0s;
}

.compileButtonTheme {
   right: unset;
   left: 70px;
}

.compileButtonCopy,
.CSSButtonCopy {
   right: 60px;
}

.compileButtonSearch {
   right: unset;
   left: 15px;
}

.compileButton:hover {
   opacity: 0.9;
}

.CSSButtonCopy:hover {
   opacity: 0.7;
}

.compileCopiedMessage {
   position: absolute;
   background: rgba(100, 103, 187, 0);
   top: 0px;
   right: 107px;
   color: rgb(175, 175, 175);
   display: none;
   cursor: default;
}

#previewPage .compileCopiedMessage {
   font-size: 0.85em;
}

.compileButtonCopy:active {
   color: rgb(255, 255, 255);
   border-color: rgba(255, 255, 255, 0.58);
}

#compileContainer {
   color: rgb(255, 255, 255);
   position: relative;
   z-index: 1000;
   height: 84%;
   width: 90%;
   margin-left: 5%;
   margin-top: 2%;
   margin-bottom: 2%;
}

.searchInputContainer {
   padding: 6px 4px;
   max-height: 40px;
   text-align: center;
   overflow: hidden;
   white-space: nowrap;
}

#searchSessionsContainer {
   height: 90%;
   margin-bottom: 8px;
   overflow-y: auto;
}

.searchTitle {
   background: rgba(0, 0, 0, 0);
   display: inline-block;
   height: 28px;
   line-height: 28px;
   color: rgb(179, 177, 177);
   white-space: nowrap;
}

#searchSessionInput,
.searchButton {
   height: 28px;
   line-height: 28px;
}

#searchSessionInput {
   background: rgb(22, 22, 22);
   margin-right: 5px;
   border: 1px solid rgba(61, 60, 60, 0.72);
   color: rgb(166, 159, 159);
   width: 24%;
}

.searchButton {
   display: inline-block;
   background: rgb(4, 8, 31);
   color: rgb(135, 131, 131);
   width: 28px;
   text-align: center;
   vertical-align: top;
   border: 1px solid rgba(61, 60, 60, 0.72);
   cursor: pointer;
   font-size: 11px;
}

.searchMoreButton {
   cursor: default;
   opacity: 0.4;
   width: unset;
   padding: 0px 5px;
}

.searchMoreButton[data-status="active"] {
   opacity: 1;
   cursor: pointer;
}

.searchForwards[data-moreresultsexist="no"],
.searchBackwards[data-firstsearchset="true"],
.searchBackwards[data-currentsearchnumber="0"] {
   opacity: 0.4;
   cursor: default;
}

#searchSessionInput {}

.currentSearchPreferenceBox,
.mySessionsOnly {
   display: inline-block;
   background: rgba(0, 0, 0, 0.38);
   opacity: 0.8;
   transition: opacity 0.2s ease 0s;
   padding: 2px 3px 0px;
   color: lightgray;
   font-size: 11px;
   position: relative;
   vertical-align: top;
}

.mySessionsOnly {
   display: none;
   cursor: pointer;
}

.mySessionsOnlyFullTitle {
   display: inline-block;
}

.mySessionsOnlyPartialTitle {
   display: none;
}

.searchHelp {
   display: inline-block;
   opacity: 0.5;
   vertical-align: top;
}

.searchInputContainer .searchHelp {
   position: relative;
   top: 2px;
   display: none;
}

.mySessionsOnly .fa-check-circle,
.mySessionsOnly .fa-circle {
   display: none;
}

.mySessionsOnly[data-status="active"] .fa-check-circle {
   display: inline-block;
}

.mySessionsOnly[data-status="inactive"] .fa-circle {
   display: inline-block;
}

#c_editor {
   height: 100%;
}

#hasError {
   background: rgb(37, 59, 134);
   color: rgb(184, 105, 105);
   text-align: center;
   padding: 6px;
   position: fixed;
   bottom: 2%;
   z-index: 33333333;
   display: none;
}

#kb_print #keyboard_shortcuts {
   height: 96%;
   border: 1px solid rgb(47, 47, 47);
   max-width: 1200px;
   margin: 0px auto;
   overflow: hidden;
   background: rgb(15, 15, 15);
}

#kb_print[data-caller="glossaryPage"] #keyboard_shortcuts {
   height: 90%;
}

#keyHintContainer {
   background: rgb(15, 15, 15);
   overflow-y: auto;
   height: calc(100% - 90px);
   width: 92%;
   margin-left: 4%;
   margin-bottom: 20px;
}

.getDivCount {
   width: 30px;
   background: rgb(48, 6, 54);
   color: rgb(202, 189, 242);
   height: 30px;
   line-height: 30px;
   text-align: center;
   position: absolute;
   top: 0px;
   right: 0px;
   font-size: 14px;
}

#searchSectionContainer {
   position: relative;
   height: 40px;
}

#searchSectionContainer #filterSearchSection {
   border-top: 1px solid rgb(35, 34, 34);
   border-left: 1px solid rgb(35, 34, 34);
   border-image: initial;
   border-bottom: none;
   border-right: none;
}

#previewPageOptionsBackground #keyHintContainer {
   width: 96%;
   margin-left: 2%;
}

.keyHintContainerTitle {
   background: rgb(13, 5, 31);
   color: white;
   text-align: center;
   margin-top: 15px;
   margin-bottom: 8px;
   padding: 4px 0px;
}

.keyHintRow,
#keyHintContainer .borderOnly {
   text-align: left;
   font-size: 0px;
   background: rgb(17, 22, 32);
   width: 100%;
   border-top: 1px solid rgba(58, 58, 58, 0.55);
   border-right: 1px solid rgba(58, 58, 58, 0.55);
   border-left: 1px solid rgba(58, 58, 58, 0.55);
   border-bottom: none;
   height: 44px;
   color: rgb(239, 238, 238);
   position: relative;
}

#clonedFKey {
   display: none !important;
}

.keyHintLabel {
   display: inline-block;
}

.keyHintLabel::first-letter {
   text-transform: uppercase;
}

.customizableCurrentSetting {
   display: inline-block;
   color: rgb(183, 168, 198);
   margin-left: 30px;
}

.theCurrentCustomized {
   display: inline-block;
   color: rgb(110, 194, 194);
   background: rgba(0, 0, 0, 0.5);
   margin-left: 5px;
   padding: 0px 5px;
}

#keyHintContainer[data-group="functionKeys"] #clonedFKey {
   display: block !important;
}

#keyHintContainer[data-subtype="editors"] .keyHintRow,
#keyHintContainer[data-subtype="main"] .keyHintRow,
#keyHintContainer[data-subtype="preview"] .keyHintRow {
   display: none !important;
}

#keyHintContainer[data-subtype="editors"] .keyHintRow[data-withineditors="yes"] {
   display: block !important;
}

#keyHintContainer[data-subtype="preview"] .keyHintRow[data-previewpage="yes"] {
   display: block !important;
}

#keyHintContainer[data-subtype="main"] .keyHintRow[data-previewpage="no"] {
   display: block !important;
}

.noSearchResults {
   display: none;
   font-size: 1.2em;
   padding: 8px;
   color: lightgray;
}

#mainSettingsSection .noSearchResults {
   padding: 8px;
   cursor: default;
}

.firstKeyHintRow {
   height: 29px;
   width: 92%;
   margin-left: 4%;
   border-bottom: 1px solid rgba(128, 128, 128, 0.15);
   margin-top: 10px;
   display: block !important;
}

#previewPageOptionsBackground .firstKeyHintRow {
   width: 96%;
   margin-left: 2%;
}

#keyHintContainer .borderOnly {
   height: 1px;
   overflow: hidden;
}

.keyHintRow .key,
.keyHintRow .shortcut {
   display: inline-block;
   font-size: 15px;
   height: 100%;
   line-height: 30px;
   vertical-align: top;
}

.key[data-mykey="Shift+F9"] .keyboardKey{
      font-size: 9px;
}

.keyHintRow:last-child div {}

.keyHintRow .shortcut::first-letter {
   text-transform: uppercase;
}

.keyHintRow .key {
   width: 150px;
   text-align: center;
   position: relative;
   padding: 4px;
}

.keyHintRow .shortcut {
   border-left: 1px solid rgba(58, 58, 58, 0.38);
   padding: 4px 4px 4px 8%;
   font-size: 11px;
   overflow: hidden;
   width: calc(100% - 150px);
   text-overflow: ellipsis;
   white-space: nowrap;
}

.kbPrintTitle {
   display: none;
}

.firstKeyHintRow .key,
.firstKeyHintRow .shortcut {
   background: black;
   font-size: 13px;
   line-height: 23px;
   color: rgb(170, 189, 193);
   position: relative;
}

.currentFilterCategory {
   display: none;
}

.editorHoverButtons {
   position: absolute;
   right: 3px;
   top: 5px;
   z-index: 13;
   width: 49px;
   height: unset;
}

#editorThemeOverlay>.editorHoverButtons {
   display: none;
}

.sampleAceEditorContainer .editorHoverButtons {
   padding: 12px 20px;
   width: unset;
   max-width: unset;
}

#page[data-width="showingConsoles"] #editorThemeOverlay>.editorHoverButtons {
   padding: 12px;
   border: 1px solid cyan;
   top: 1000px;
}

#outputsContainer.horizontalSplit .editorHoverButtons {
   right: 0px;
}

.outputs[data-status="minimized"] .editorHoverButtons {
   display: none;
}

.cursorDefault,
.defaultCursor {
   cursor: default;
}

#moreOutputs {
   position: fixed;
   background: rgb(55, 50, 74);
   top: 34%;
   left: 51%;
   min-height: 200px;
   width: 300px;
   color: white;
   padding: 8px;
   border: 2px solid gray;
   z-index: 333333;
   display: none;
}

#missingPixel {
   position: fixed;
   background: rgb(32, 29, 45);
   top: 34%;
   left: 53%;
   min-height: 200px;
   width: 300px;
   color: white;
   padding: 8px;
   border: 2px solid gray;
   z-index: 333333;
   display: none;
}

#moreOutputs div {
   display: inline-block;
}

.defaultBasic {
   position: absolute;
   width: 39%;
   height: 100%;
   background: rgba(13, 65, 14, 0);
   font-size: 14px;
   overflow: hidden;
   left: 8px;
   top: 0px;
   padding-top: 5px;
}

.defaultBasicSave {
   background: rgb(69, 79, 101);
   width: 80%;
   margin-left: 10%;
   cursor: pointer;
   border-top: 1px solid rgb(81, 80, 80);
   border-right: 1px solid rgb(81, 80, 80);
   border-left: 1px solid rgb(81, 80, 80);
   border-image: initial;
   height: 20px;
   line-height: 20px;
   border-bottom: none;
   color: rgb(194, 193, 193) !important;
}

.defaultBasicLoadButton {
   background: rgb(40, 47, 62);
   border-bottom: 1px solid rgb(81, 80, 80);
}

#layoutOverlay {
   background: rgb(4, 13, 21);
   position: fixed;
   top: 0px;
   left: 0px;
   width: 73%;
   height: calc(100% - 30px);
   line-height: normal;
   z-index: 700;
   border: 2px solid rgb(0, 0, 0);
   display: none;
}

#page[data-recordingbar="show"] #layoutOverlay {
   height: 66%;
   left: 24px;
   width: calc(100% - 54px) !important;
}

#layoutOverlay[data-consolestatus="shown"] {
   width: 63% !important;
}

.forkCoverControl {
   position: absolute;
   bottom: 300px;
   padding: 17px;
   left: 50px;
   background: rgb(6, 63, 59);
   cursor: pointer;
   font-size: 30px;
   width: 950px;
   text-align: center;
}

#sessionOptionsOverlay {
   background: rgba(43, 42, 42, 0.57);
   position: fixed;
   top: 0px;
   left: 0px;
   width: 100%;
   height: 100%;
   line-height: normal;
   z-index: 200;
   /* border: 2px solid rgb(75, 32, 12); */
   display: none;
   text-align: center;
}

#codeCreate.condensedView #sessionOptionsOverlay {
   top: 51px;
   height: calc(100% - 51px);
}

#templatesAndSessions {
   background: rgb(42, 42, 48);
   width: 500px;
   top: 35px;
   margin: 0px auto;
   position: relative;
   border: 2px solid rgb(14, 14, 14);
   right: 280px;
}

#templatesAndSessions .templatesWindowCoverInner {
   padding: 9px;
   color: rgb(155, 152, 152);
}

#page[data-width="showingConsoles"] #templatesAndSessions {
   margin: unset;
   left: 30px;
   border: 1px solid rgb(0, 109, 128);
}

#templatesAndSessions .closeSessionOverlay {
   position: absolute;
   top: 6px;
   right: 24px;
   background: black;
   color: white;
   font-size: 14px;
   cursor: pointer;
   z-index: 80;
}

#templatesAndSessions .closeSessionOverlay i {
   color: rgb(153, 153, 153);
}

#allTemplatesInput {}

#templatesAndSessions select,
#templatesAndSessions input,
.cc_select[data-var="allTemplatesInput"] {
   color: lightgray;
   border: 1px solid rgb(50, 50, 50);
   width: 20%;
   height: 28px;
   background: rgb(21, 21, 21);
   position: relative;
   opacity: 1;
}

.cc_select[data-var="allTemplatesInput"] {
   min-width: 120px;
}

.cc_select[data-var="newSessionLanguageSetting"],
.cc_select[data-var="new_session_languageOne"],
.cc_select[data-var="new_session_languageTwo"],
.cc_select[data-var="new_session_languageThree"],
.cc_select[data-var="new_session_languageFour"] {
   color: lightgray;
   border: 1px solid rgb(50, 50, 50);
   height: 28px;
   background: rgb(21, 21, 21);
   position: relative;
   width: 45%;
}

#templatesAndSessions[data-templatessessionstype="sessions"] {}

#templatesAndSessions[data-templatessessionstype="templates"] {}

#templatesAndSessions[data-templatessessionstype="templates"] #customizeCover {
   display: none !important;
}

#templatesAndSessions[data-templatessessionstype="sessions"] #templatesAndSessionsCover {
   display: none !important;
}

#templatesAndSessions select,
#templatesAndSessions input {
   width: 45%;
}

#templatesAndSessions input {
   padding-left: 8px;
   background: rgb(44, 51, 57);
   color: rgb(194, 194, 194);
}

#newTemplateName {
   min-width: 120px;
}

.fourNumberButtonsRow {
   background: rgba(0, 0, 0, 0.58);
   text-align: center;
   padding: 6px 4px;
   position: relative;
}

.turnOffDefaultLanguges {
   margin-top: 30px;
}

.changeExtraDefaultTemplate {
   position: absolute;
   left: 4px;
   border: 1px solid rgb(189, 189, 189);
   padding: 0px 5px;
   cursor: pointer;
   opacity: 0.4;
}

.changeExtraDefaultTemplateTwo {
   left: 28px;
}

.changeExtraDefaultTemplateHyperlink {
   left: 56px;
}

.changeExtraDefaultTemplate[data-active="true"] {
   background: rgb(5, 5, 88);
   opacity: 1;
}

.setToOffButton {
   width: 30px;
   height: 30px;
   text-align: center;
   line-height: 30px;
   cursor: pointer;
   display: inline-block;
   margin: 0px 10px;
   background: rgb(28, 41, 97);
   font-size: 15px;
}

.toggleFourNumberButtonsItem {
   position: absolute;
   right: 8px;
   top: 6px;
   cursor: pointer;
}

.templatesAndSessionsTitle {
   background: black;
   border-bottom: 1px solid rgb(61, 61, 61);
   text-align: center;
   height: 30px;
   line-height: 30px;
   color: rgb(163, 163, 163);
   font-size: 15px;
}

#newSessionSection,
#allTemplates {
   padding: 2% 4% 0px;
   position: relative;
   text-align: left;
   color: lightgray;
}

#waitForForkCover {
   position: absolute;
   background: rgba(21, 25, 39, 0.84);
   z-index: 13;
   height: 100%;
   top: 0px;
   left: 0px;
   width: 100%;
   padding-top: 30px;
   font-size: 14px;
   color: lightblue;
   padding-left: 12px;
}

#page[data-forkcover="off"] #waitForForkCover {
   display: none !important;
}

.waitForForkLineOne,
.waitForForkLineTwo {
   text-align: left;
   margin-bottom: 15px;
}

.adminForkHide {
   border: 3px solid cyan;
   padding: 8px;
   text-align: center;
   background: rgb(40, 5, 65);
   cursor: pointer;
}

.forkCoverWaitMessage {
   display: inline-block;
   color: rgb(183, 203, 205);
   margin-left: 26px;
   opacity: 0;
}

.forkBeforeChangingLanguages {
   display: inline-block;
   background: black;
   padding: 6px;
   color: rgb(51, 162, 170);
   cursor: pointer;
}

.waitForForkLineThree {}

.languageOptionRow {
   text-align: center;
   margin: 2px 0px;
   position: relative;
}

.oldLanguageOptionRow {
   display: none !important;
}

.templateSave {
   position: absolute;
   right: 7px;
   padding: 4px 5px;
   top: 2px;
   background: black;
   font-size: 11px;
}

.languageOptionsTitle {
   background: rgb(27, 27, 27);
   color: rgb(197, 194, 194);
   text-align: center;
   height: 25px;
   line-height: 25px;
   margin-top: 8px;
   border: 1px solid rgba(61, 61, 61, 0.3);
   cursor: default;
   position: relative;
}

.editingTemplatesInfo {
   position: absolute;
   right: 5px;
   color: rgb(143, 139, 139);
   top: 0px;
   font-size: 10px;
}

.newSessionLanguageOptions {
   background: rgb(34, 40, 50);
   padding: 5px 0px 10px;
   overflow: hidden;
}

.templateLanguagesSection {
   background: rgb(34, 40, 50);
   padding: 6px 0px 10px;
}

#allTemplates {}

.theTemplatesSection {
   background: rgb(34, 40, 50);
}

.createCancelRow {
   text-align: center;
   margin-top: 12px;
   padding: 9px 0px;
   position: relative;
}

#templatesAndSessions .createCancelRow>div {
   vertical-align: top;
   width: 63px;
   height: 30px;
   line-height: 30px;
   color: rgb(201, 209, 215);
   padding: 0px;
   border: none;
}

.createCancelRow .divButton {
   margin: 0px 9px;
}

#templatesAndSessions .createCancelRow .deleteTemplate {
   background: rgb(40, 34, 39);
   border: 1px solid black;
}

.newSessionRowTitle {
   width: 32%;
   display: inline-block;
   height: 28px;
   line-height: 28px;
   vertical-align: top;
}

.newSessionRowTemplateName {
   margin-bottom: 6px;
}

#allTemplates {}

#codeCreate #layoutOverlay {
   height: 75px;
   margin-top: 700px;
   opacity: 0.4;
}

#sampleTopBar {
   position: absolute;
   background: rgb(12, 12, 12);
   width: 100%;
   border-top: 2px solid rgb(0, 0, 0);
   border-right: 2px solid rgb(0, 0, 0);
   border-left: 2px solid rgb(0, 0, 0);
   border-image: initial;
   top: 0px;
   height: 30px;
   color: lightgray;
   padding: 5px;
   cursor: default;
   opacity: 0.85;
   transition: opacity 0.7s ease 0s;
   border-bottom: none;
}

#toggleRightOptions {
   background: rgb(18, 18, 18);
   text-align: right;
   bottom: 3px;
   position: absolute;
   z-index: 55;
   color: white;
   height: 30px;
   line-height: 30px;
   right: 0px;
   padding: 0px 9px;
   cursor: pointer;
   border: 1px dashed rgb(122, 163, 192);
}

#sampleTopBar>div {
   display: inline-block;
   font-size: 13px;
   border: 1px solid rgba(105, 105, 105, 0.31);
   overflow: hidden;
   position: relative;
}

#sampleTopBar .layoutEditorTitle {
   position: absolute;
}

#sampleTopBar .sampleSessionName {
   background: rgb(23, 23, 23);
   color: rgb(172, 172, 172);
}

#sampleTopBar .sampleRecentSessions {
   margin-left: 8px;
   background: rgb(23, 23, 23);
   color: rgb(172, 172, 172);
}

.sampleTopBarButton {
   width: 87px;
   text-align: center;
}

#sampleTopBar .sampleButtonOne {
   margin-left: 8px;
   background: rgba(1, 1, 32, 0.39);
}

#sampleTopBar .sampleButtonTwo {
   margin-left: 8px;
   background: rgba(36, 3, 3, 0.62);
}

#sampleTopBar .sampleRenderButton {
   margin-left: 8px;
   width: 17px;
   text-align: center;
   font-size: 8px;
   height: 17.2px;
   line-height: 17.2px;
   background: rgba(36, 43, 50, 0.82);
   color: rgb(136, 136, 156);
}

#sampleTopBar .sampleLogo {
   font-size: 20px;
   margin-left: 8px;
   right: 35px;
   top: 2px;
   position: absolute;
   color: rgba(172, 176, 180, 0.75);
   font-family: "Lobster Two", cursive;
   border: none;
}

#layoutEditor {
   background: rgb(2, 14, 31);
   position: absolute;
   height: 91.3%;
   font-size: 0px;
   border: 2px solid rgb(0, 0, 0);
   z-index: 1;
   padding-top: 30px;
}

.width100 {
   width: 100%;
}

#layoutEditor,
#sampleTopBar {
   width: 100%;
}

#layoutEditor {
   width: 68%;
}

#layoutEditor.consoleShown {
   width: 70%;
}

#layoutEditor #toggleHiddenModules,
#layoutEditor #twoContainers,
#layoutEditor .inactive-overlay,
#layoutEditor .optionsContainer {
   display: inline-block;
   width: 22%;
   font-size: 14px;
   position: relative;
   vertical-align: top;
   height: 75%;
   overflow: auto;
   float: left;
   margin: 0px;
   background: rgb(25, 28, 32);
}

#layoutEditor #toggleHiddenModules {
   position: absolute;
   left: 13px;
   top: 43%;
   z-index: 25;
   width: 35%;
   height: unset;
   border: 3px solid rgb(0, 0, 0);
   padding-bottom: 7px;
   display: none;
}

.toggleHiddenModulesTitle {
   background: rgb(0, 0, 0);
   text-align: center;
   padding: 6px;
   color: rgb(169, 165, 165);
   cursor: default;
}

.saveHiddenModulesRow {
   text-align: center;
   position: relative;
}

.saveHiddenModulesButton {
   padding: 5px 8px;
   color: rgb(187, 186, 186);
   border: 1px solid rgb(21, 21, 21);
   background: rgb(50, 50, 56);
   cursor: pointer;
   display: inline-block;
}

.hiddenModulesSaved {
   color: rgb(139, 139, 139);
   position: absolute;
   right: 21px;
   top: 9px;
   display: none;
}

.hiddenModulesCloseButton {
   position: absolute;
   right: 4px;
   top: 7px;
   color: gray;
   cursor: pointer;
}

.moduleShown,
.moduleHidden {
   width: 55px;
   text-align: center;
}

.moduleShown {
   background: rgb(28, 63, 33);
}

.moduleHidden {
   background: rgb(30, 20, 21);
}

.module_status_row {
   margin-bottom: 5px;
   background: rgba(61, 63, 65, 0.48);
   color: lightgray;
   padding: 2px;
}

.moduleTitle,
.moduleStatus {
   display: inline-block;
   color: rgb(191, 191, 191);
}

.moduleTitle {
   width: 60%;
   text-align: center;
   cursor: pointer;
}

.moduleStatus {
   cursor: pointer;
}

#layoutEditor>#twoContainers {
   width: 78%;
   position: relative;
}

#layoutEditor .leftOptions {
   width: 28%;
   background: rgb(39, 39, 45);
   color: white;
}

#layoutOverlay {
   font-family: Times;
}

#layoutOverlay #rightOptions {
   background: rgba(2, 24, 38, 0.99);
   border: 2px solid rgb(0, 0, 0);
   position: absolute;
   left: 71%;
   color: rgb(224, 226, 230);
   padding: 2.5% 13px 13px;
   width: 29%;
   height: calc(91.3% + 30px);
   line-height: 25px;
   overflow-y: auto;
   font-size: 14px;
   opacity: 1;
}

#layoutOverlay #rightOptions,
#layoutOverlay #layoutEditor {
   height: 95%;
}

.newModulesTutorial {
   position: absolute;
   bottom: 5px;
   font-size: 10px;
   color: gray;
}

#layoutOverlay[data-admininfo="off"] .newModulesTutorial {
   display: none;
}

#layoutOverlay #inactiveContainer,
#layoutOverlay #hiddenContainer {
   height: 46%;
   position: relative;
   width: 100%;
   left: 0px;
   padding-top: 50px;
   overflow: hidden;
   border-width: 2px 2px 1px 1px;
   border-style: solid;
   border-color: rgb(19, 18, 18);
   border-image: initial;
}

.cc_section_container .smallHeight,
.cc_section_container .smallWidth {
   position: absolute;
   bottom: 0px;
   opacity: 1;
   border: 1px solid rgb(74, 36, 78);
   right: 0px;
   background: black;
   z-index: 30;
   color: lightgreen;
   width: 90px;
   text-align: center;
}

.cc_section_container .smallHeight {
   border: 1px solid rgb(113, 120, 20);
   bottom: 0px;
   color: rgb(213, 201, 137);
   right: 76px;
}

.cc_section_container[data-width="normal"] .smallWidth,
.cc_section_container[data-height="normal"] .smallHeight {
   display: none;
}

#layoutOverlay #hiddenContainer {
   background: rgb(79, 69, 14);
   color: rgb(227, 221, 221);
   padding-top: 5px;
}

#layoutEditor .leftContainer,
#layoutEditor .rightContainer {
   width: 50%;
   height: 100%;
   display: inline-block;
   float: left;
}

#layoutEditor .leftContainer {
   border-right: 2px solid rgba(19, 18, 18, 0.55);
}

#inactiveContainer,
#overlayContainer {
   padding: 9px 5px 5px;
   background: rgb(5, 24, 40);
}

#overlayContainer {
   padding: 0px;
}

#overlayContainer {
   position: relative;
   background: rgb(17, 21, 37);
   width: 100%;
   height: 54%;
   float: left;
   overflow: hidden;
}

#layoutEditor .optionsContainer {
   width: 100%;
   background: rgb(23, 29, 38);
   color: white;
   padding: 0px 4px 4px 0px;
   overflow: hidden;
   border-top: 2px solid black;
   height: 25%;
}

.optionsContainerTitle {
   text-align: center;
   font-size: 16px;
   background: rgb(0, 0, 0);
   cursor: default;
   color: rgb(161, 202, 206);
}

.newTextSelectLine .optionsContainerTitle {}

#page .newTextSelectLine[data-meta="titleDiv"],
#page .newTextSelectLine[data-meta="titleDiv2"] {
   background: black;
   height: 25px;
}

.rightOptionsContainer {
   background: rgba(10, 14, 45, 0.64);
   color: rgb(176, 175, 175);
   padding: 0px;
   border-top: 1px solid rgb(0, 0, 0);
   border-right: 1px solid rgb(0, 0, 0);
   border-left: 1px solid rgb(0, 0, 0);
   border-image: initial;
   text-align: center;
   border-bottom: none;
   vertical-align: top;
}

.rightOptionsContainer:last-child {
   border-bottom: 1px solid black;
}

.rightOptionsContainer select,
#page .oneLayoutOption {
   width: 144px;
   height: 26px;
   background: rgb(35, 37, 43);
   border: 1px solid rgb(8, 8, 8);
   margin-top: 5px;
   text-align: center;
}

.rightOptionsContainer option {
   background: rgb(30, 39, 53);
}

.containerSizes>div {}

#layoutOverlay[data-consolestatus="shown"] .containerSizeTitle {
   width: 48%;
}

[data-meta="overlayStatus"] .containerSizeTitle {}

.inactive-overlay .layoutEditorTitle {
   left: 0px;
   right: unset;
   display: none;
}

.layoutEditorTitle,
.cc_container_label {
   position: absolute;
   bottom: 0px;
   right: 0px;
   color: rgb(191, 191, 191);
   opacity: 0.3;
   cursor: default;
   padding: 3px;
   z-index: 10;
   display: none;
}

.editorContainer .layoutEditorTitle,
#inactiveContainer .layoutEditorTitle,
.cc_container_label {
   top: 0px;
   bottom: unset;
   font-size: 102%;
   background: rgba(24, 24, 26, 0.95);
   opacity: 0.5;
   color: white;
   text-align: center;
   border: 1px solid rgba(142, 140, 140, 0.22);
   display: none;
}

.cc_container_label {
   opacity: 1;
   display: block;
   color: rgb(197, 197, 197);
   padding: 0px;
   text-align: center;
   width: 100%;
   height: 23px;
   line-height: 15px;
}

.cc_container_label[data-populated="empty"] {
   background: rgba(0, 0, 0, 0.84);
   color: rgb(165, 165, 165);
}

.cc_container_label[data-populated="populated"] {
   background: rgb(8, 13, 32);
}

.cc_container_label .labelText {
   display: inline-block;
   height: 27px;
   line-height: 27px;
   vertical-align: top;
   padding-left: 3px;
}

.inactive-overlay .labelText {
   line-height: 20px;
}

.cc_section_container[data-width="smallWidth"] .labelText {
   line-height: 20px;
}

.cc_section_container[data-tiny="isTiny"] .cc_container_label {
   overflow: hidden;
}

#overlayContainerBottom .cc_container_label,
#overlayContainerTop .cc_container_label,
#inactiveContainer .cc_container_label {
   max-width: unset;
   text-align: center;
   font-size: 11px;
   overflow: hidden;
   top: 0px;
   left: 0px;
   height: 20px;
   line-height: 20px;
   width: 100% !important;
}

#inactiveContainer .cc_container_label {
   border: 1px solid black;
}

.inactive-overlay .smallWidth,
.inactive-overlay .smallHeight {
   display: none;
}

.containerIsEmpty {
   background: rgb(15, 25, 57);
   display: inline-block;
   border: 1px solid rgb(73, 73, 73);
   color: rgb(167, 164, 164);
   height: 14px;
   line-height: 14px;
   width: 14px;
   border-radius: 50%;
   font-size: 10px;
   opacity: 0.6;
   text-align: center;
   margin-top: 6px;
}

.inactive-overlay .containerIsEmpty {
   margin-top: 2px;
}

.cc_section_container[data-width="smallWidth"] .containerIsEmpty {
   height: 14px;
   line-height: 14px;
   width: 14px;
   font-size: 10px;
   margin-top: 3px;
}

.cc_debug_title {
   bottom: 0px;
   opacity: 0.8;
   color: white;
   right: 0px;
   left: unset;
   text-align: center;
   border: 1px solid rgba(211, 211, 211, 0.22);
   position: absolute;
   padding: 6px;
   cursor: default;
   background: rgba(35, 35, 37, 0.95) !important;
}

#twoMainContainers .cc_debug_title {
   display: none;
}

#language_admin_menu .cc_debug_title {
   display: none;
}

#page .extraSettingsWindowDialog .cc_debug_title {
   border: 2px solid purple;
   top: 250px;
   bottom: unset;
}

#chainGraphicViewOptions .cc_debug_title {
   right: unset;
   left: 0px;
   bottom: 8px;
}

.functionFactoryMoreDetails {
   border: 4px solid rgb(33, 204, 69);
   min-height: 40px;
}

#page[data-functionfactorydebug="off"] .functionFactoryMoreDetails {
   display: none;
}

#functionFactoryOverlay .cc_debug_title {
   position: absolute;
   top: 0px;
   bottom: unset;
   left: 0px;
   right: unset;
   display: none;
}

#page[data-functionfactorydebug="on"] #functionFactoryOverlay .cc_debug_title {
   display: block;
}

#outerFrameContainer .cc_debug_title {
   padding: 5px;
   bottom: 200px;
   display: none;
}

#page[data-recordingbar="show"] .cc_debug_title {
   display: none;
}

#outerFrameContainer #theRenderedFrameContainer .cc_debug_title {
   right: unset;
   left: 80px;
   background: rgb(4, 66, 56) !important;
}

#outerFrameContainer #innerFrameContainer>.cc_debug_title {
   right: 45px;
   bottom: 600px;
   display: none;
   background: rgb(24, 21, 1) !important;
}

#allUserShortcutDialog .cc_debug_title {
   bottom: unset;
   top: 0px;
   right: unset;
}

#currentPublicSets {
   position: fixed;
   bottom: 0px;
   right: 5px;
   border: 2px solid green;
   background: rgb(14, 19, 33);
   height: 122px;
   width: 495px;
   z-index: 1500;
   color: white;
   font-size: 18px;
}

.adminShortcutButton {
   border: 3px solid green;
   position: absolute;
   bottom: 0px;
}

.snippetAdminShortcut {
   left: 200px;
}

.privacyAdminShortcutButton {
   border: 2px solid purple;
   left: 450px;
}

.toggleMiniClass,
.reloadColorSet {
   display: inline-block;
   background: rgb(73, 15, 5);
   padding: 8px;
   cursor: pointer;
   position: absolute;
   right: 0px;
   top: unset;
   opacity: 0.2;
}

.reloadColorSet {
   background: rgb(102, 13, 85);
}

#allUserShortcutDialog.miniClass .toggleMiniClass {
   background: rgb(2, 41, 2);
}

#allUserShortcutDialog.miniClass {
   left: 600px;
   background: rgb(40, 33, 33) !important;
   width: 600px !important;
}

#userReports .cc_debug_title {
   z-index: 30;
}

.userReportingContainer[data-type="features"] .cc_debug_title,
.userReportingContainer[data-type="bugs"] .cc_debug_title,
.reportingInputs .cc_debug_title {
   bottom: unset;
   top: 0px;
   padding: 2px;
   opacity: 0.6;
}

.showSpecificPageButton,
#userReportsDebugButton {
   position: fixed;
   top: 0px;
   left: 400px;
   opacity: 0.5;
   background: rgb(30, 30, 30);
   padding: 5px;
   color: white;
   cursor: pointer;
   transition: opacity 0.3s ease 0s;
}

#userReportsDebugButton,
#userReportsAdminButton {
   background: rgb(4, 32, 5);
   position: fixed;
   cursor: pointer;
   z-index: 50;
   padding: 0px;
   height: 28px;
   line-height: 28px;
   width: 184px;
   text-align: center;
   top: unset;
   right: unset;
   bottom: 13px;
   left: 543px;
   opacity: 1;
}

#userReportsAdminButton {
   left: 900px;
   opacity: 0.9;
   text-align: left;
   padding-left: 5px;
   width: 200px;
   cursor: pointer;
   bottom: 8px;
}

#userReportsAdminButton .adminView,
#userReportsAdminButton .nonAdminView {
   display: inline-block;
   cursor: pointer;
}

#userReportsAdminButton[data-status="admin"] {
   background: rgb(77, 23, 79);
}

#userReportsAdminButton[data-status="normal"] {
   background: rgb(78, 24, 25);
}

#userReportsAdminButton[data-status="admin"] .nonAdminView {
   display: none;
}

#userReportsAdminButton[data-status="normal"] .adminView {
   display: none;
}

#userReports .adminStatusName {
   display: inline-block;
   cursor: pointer;
}

#userReportsDebugButton[data-status="normal"] {
   background: rgb(62, 6, 6);
}

#userReportsDebugButton[data-status="clean"] {
   background: rgba(74, 74, 194, 0.36);
   border: 1px solid rgba(211, 211, 211, 0.26);
}

#page[data-specificpage="reports"] #userReportsDebugButton {
   display: block;
}

.userReportsStatus {
   cursor: pointer;
}

#consoleStatusButton {
   left: unset;
   right: 20px;
   color: white;
   opacity: 0.7;
}

.page-id-1584 #consoleStatusButton,
.page-id-1584 .pageConsoleStateArea {
   position: fixed;
   padding: 8px;
   z-index: 150;
   border: 1px solid black;
   color: gainsboro;
   width: 184px;
   text-align: center;
   top: unset;
   right: unset;
   bottom: 0px;
   left: 400px;
   opacity: 1;
}

#consoleStatusButton[data-state="shown"] {
   background: darkgreen;
}

#consoleStatusButton[data-state="hidden"] {
   background: rgb(46, 6, 6);
}

#consoleStatusButton[data-state="shown"] .consoleStatusHidden {
   display: none;
}

#consoleStatusButton[data-state="hidden"] .consoleStatusShown {
   display: none;
}

.showSpecificPageButton:hover {
   opacity: 0.7;
}

.showSpecificPageButton.active {
   cursor: default;
   border: 1px solid rgb(77, 78, 77);
   opacity: 1;
}

#showPreviewPageButton {
   left: 500px;
}

#glossaryPageInfo .cc_debug_title {
   right: 290px;
}

#theGlossary .cc_debug_title {
   z-index: 20;
   display: none;
}

#newButtonsArea .cc_debug_title {
   bottom: unset;
   right: 50px;
   top: 0px;
   position: absolute;
}

#measuringRectangle .cc_debug_title {
   bottom: unset;
   top: 0px;
   right: 28px;
}

#glossarySearchResults .cc_debug_title {
   top: 25px;
   bottom: unset;
}

#glossarySearchResults .cc_debug_title {
   font-size: 10px !important;
}

#featureDetailContainer .cc_debug_title {
   top: 0px;
   bottom: unset;
}

#previewPageStyleEditorContainer .cc_debug_title {
   font-size: 10px;
   padding: 0px;
   opacity: 0.7;
}

#colorPickerContainer .cc_debug_title,
#entire_persistent_picker .cc_debug_title,
#colorPickerOptions .cc_debug_title {
   top: 0px;
   bottom: unset;
   padding: 0px;
   border: none;
   font-size: 9px;
   color: rgb(191, 191, 191);
   right: unset;
   left: auto;
}

#colorPickerOptions .cc_debug_title {
   left: unset;
   right: 0px;
}

#currentlySelectedLanguages .cc_debug_title {
   padding: 0px;
   font-size: 8px;
}

#createItems .cc_debug_title {
   bottom: unset;
   top: 0px;
   font-size: 10px;
   padding: 2px;
   opacity: 0.5;
   display: none;
}

#recentlyCreatedElements {
   display: none;
}

#userResetSection .cc_debug_title {
   right: unset;
   left: 0px;
   padding: 3px;
}

#menuEditContainer>.cc_debug_title {
   bottom: unset;
   top: 30px;
   opacity: 0.7;
}

#languagesToUpdate .cc_debug_title {
   padding: 0px;
   font-size: 0.8em;
   opacity: 0.6;
}

#templatesAndSessions .cc_debug_title {
   right: unset;
   top: 500px;
   left: -180px;
   bottom: unset;
   background: rgb(48, 63, 77) !important;
}

#cc_languages_info .cc_debug_title {
   bottom: unset;
   top: 9px;
   padding: 2px;
   right: 38px;
   background: none !important;
}

#cc_languages_info .extraInfo {
   position: absolute;
   bottom: 0px;
   left: 8px;
   width: 100%;
   font-size: 11px;
   color: rgb(214, 213, 213);
}

#cc_languages_info .info_title,
#cc_languages_info .info_value {
   display: inline-block;
   border: 1px solid rgba(255, 255, 255, 0.24);
   width: 48%;
   overflow: hidden;
   font-size: 13px;
   height: 22px;
   background: rgba(124, 124, 169, 0.39);
}

#overlayContainer>.layoutEditorTitle {
   top: 0px;
   bottom: unset;
   left: 0px;
   right: unset;
   display: none;
}

#overlayContainerTop,
#overlayContainerBottom {
   position: relative;
   height: 50%;
   background: rgb(55, 57, 63);
   border: 1px solid black;
   padding: 0px;
   overflow: hidden;
}

#overlayContainer #overlaySection {
   display: none;
}

#overlayContainerTop {}

#overlayContainerTop .layoutEditorTitle,
#overlayContainerBottom .layoutEditorTitle {
   top: 21px;
   left: unset;
   right: 0px;
   bottom: unset;
   opacity: 0.8;
   font-size: 12px;
   background: black;
   display: none;
}

#overlayContainerTop .layoutEditorTitle {
   background: rgb(14, 14, 14);
   color: rgb(158, 196, 205);
}

.editorContainer {
   background: rgb(55, 57, 63);
   width: 100%;
   height: 50%;
   position: relative;
   border-top: 2px solid rgba(19, 18, 18, 0.55);
   border-image: initial;
   border-left: none;
   border-right: none;
   padding: 0px;
   overflow: hidden;
   border-bottom: none;
}

.editorContainer[data-populated="empty"],
#overlayContainerTop[data-populated="empty"],
#overlayContainerBottom[data-populated="empty"] {
   background: rgb(50, 53, 60);
}

#leftContainerTop,
#rightContainerTop {}

.cc_container_label[data-populated="populated"] .containerIsEmpty {
   display: none;
}

.cc_container_labelOLD {
   position: absolute;
   color: rgb(246, 246, 246);
   z-index: 155;
   width: 100%;
   opacity: 1;
   height: 30px;
   line-height: 3;
   padding: 0px;
   text-align: center;
   border-bottom: 1px solid rgb(79, 79, 79);
   overflow: hidden;
   top: 0px;
   left: 0px;
   background: rgb(5, 52, 64);
}

.editorContainer .cc_section,
body .cc_section {
   color: white;
   border: 1px solid rgb(0, 0, 0);
   width: 88%;
   margin-left: 8%;
   height: calc(100% - 66px);
   margin-top: 33px;
   background: rgb(19, 25, 36);
   display: inline-block;
   padding-top: 7px;
   font-size: 22px;
   text-align: center;
   position: relative;
   overflow: hidden;
}

.editorContainer[data-height="smallHeight"] .cc_section {
   height: calc(100% - 40px);
}

#editorSection .sampleSectionImage {
   height: 160px;
}

.editorContainer::after {
   position: absolute;
   top: 35px;
   left: 25px;
}

.gu-transit::after {
   content: "gu-transit";
   position: absolute;
   top: 35px;
   left: 25px;
}

.gu-mirror::after {
   content: "gu-mirror";
   position: absolute;
   top: 115px;
   left: 25px;
   font-size: 12px;
}

.cc_section .containerInfo {
   position: absolute;
   bottom: 2px;
   right: 2px;
   font-size: 13px;
   background: rgba(128, 128, 128, 0.4);
   padding: 3px 4px;
   display: none;
   opacity: 0.8;
}

.inactive-overlay {
   position: relative;
}

.inactive-overlay .containerInfo {
   display: none;
}

#inactiveContainer .cc_section,
#overlayContainer .cc_section {
   background: rgb(24, 25, 35);
   color: rgb(204, 203, 203);
   width: 90%;
   margin-left: 5%;
   text-align: center;
   font-size: 12px;
   margin-bottom: 5px;
   margin-top: 0px;
   height: 30px;
   overflow: hidden;
   position: relative;
   padding: 0px;
}

#inactiveContainer [data-hiddenstatus="hidden"] {
   display: none !important;
}

#inactiveContainer.showAll [data-hiddenstatus="hidden"] {
   display: block !important;
}

#overlayContainer .cc_section {
   top: 49px;
}

#layoutOverlay #jsInfo,
#layoutOverlay #pageLoad {
   background: rgba(7, 14, 23, 0.59);
   position: fixed;
   left: 9px;
   color: rgb(209, 214, 226);
   padding: 13px;
   top: 33px;
   line-height: 21px;
   overflow-y: auto;
   font-size: 16px;
   border-bottom: none;
   width: 380px;
   height: 70% !important;
}

#layoutOverlay #pageLoad {
   top: 74%;
   left: 9px;
   background: rgb(6, 22, 32);
   overflow-y: auto;
   height: 23% !important;
}

#pageLoad div {}

#pageLoad div:nth-child(2n+1) {
   background: rgb(25, 27, 32);
   color: rgb(192, 192, 197);
   border: 1px solid rgba(255, 255, 255, 0.26);
}

#currentChain {
   position: absolute;
   bottom: 0px;
   padding: 2px;
   border: 2px solid rgb(54, 105, 135);
   background: black;
   height: 147px;
   z-index: 18;
   width: 100%;
   display: none;
}

.currentChainTitle {
   background: black;
   height: 20px;
   line-height: 20px;
   border: 1px solid rgb(202, 203, 203);
   color: rgb(172, 166, 166);
   text-align: center;
}

.factoryAdminVueName {
   color: cyan;
   display: none;
}

#page[data-functionfactorydebug="on"] .factoryAdminVueName {
   display: block;
   position: absolute;
   right: 0px;
   top: 0px;
   background: rgb(46, 22, 84);
   padding: 4px;
}

.currentChainInner {
   border: 1px solid lightgray;
   height: 97px;
   color: rgb(119, 174, 206);
   padding: 6px;
   font-size: 13px;
}

.chainFuncName,
.chainFuncInfo {
   display: inline-block;
}

.chainFuncName {
   color: cyan;
}

.chainFuncInfo {
   color: orange;
}

.toggleCurrentChain {
   position: absolute;
   bottom: 0px;
   color: rgb(98, 163, 231);
   opacity: 0.5;
   z-index: 20;
   cursor: pointer;
   right: 15px;
   display: none;
}

.gu-mirror {
   z-index: 111;
}

.gu-mirror .overlaySection {
   display: none;
}

#buttonsBar {
   width: 99%;
   background: rgb(20, 19, 29);
   height: 24px;
   font-size: 11px;
   opacity: 0.9;
   bottom: 3px;
   z-index: 500;
   top: unset;
   position: fixed;
}

#buttonsBar[data-buttondisplay="hide"] {
   background: rgba(20, 19, 29, 0.16);
}

#buttonsBar[data-buttondisplay="hide"]>div {
   opacity: 0.05;
}

#codeCreate.condensedView #buttonsBar[data-buttondisplay="hide"] {
   opacity: 0.5;
   background: rgb(36, 36, 189);
   left: unset;
   right: 0px;
   width: 50px;
}

#buttonsBar>.toggleButtonsBar {
   opacity: 0.7 !important;
}

.toggleButtonsBar,
.toggleFeaturesOverlay {
   position: absolute;
   right: 0px;
   top: 0px;
   background: black;
   width: 40px;
   text-align: center;
   color: lightgray;
   cursor: pointer;
}

#page .condensedPageStatus {
   background: maroon;
}

#page .condensedPageStatus[data-iscondensed="true"] {
   background: rgb(7, 74, 33);
}

.toggleFeaturesOverlay {
   right: 45px;
}

.glossaryPageFeaturesOverlayButton {
   background: black;
   color: cyan;
   position: absolute;
   bottom: 0px;
   padding: 9px;
   cursor: pointer;
   left: 400px;
}

#page .glossaryLink {
   right: 105px;
   color: cyan;
   width: 100px;
}

#buttonsBar .divButton {
   margin: 0px 5px 0px 2px;
   height: 24px;
   padding: 0px;
   vertical-align: top;
}

#page .ajaxDisableButton {
   background: rgb(5, 62, 30);
   width: 130px;
   text-align: center;
   cursor: pointer;
}

#page .ajaxDisableButton.previewPageLocation {
   margin: 0px 0px 0px 12px;
   vertical-align: top;
}

#page .previewPageLocation.imageCreationContainer {
   width: 200px;
   background: rgb(31, 9, 31);
   margin: 0px;
}

.ccAjaxState {
   display: inline-block;
}

.ccAjaxState.off {
   display: none;
}

#page .ajaxDisableButton[data-state="off"] {
   background: rgb(81, 14, 14);
}

#page .ajaxDisableButton[data-state="off"] .ccAjaxState.on {
   display: none;
}

#page .ajaxDisableButton[data-state="off"] .ccAjaxState.off {
   display: inline-block;
}

.toPreviewOnlyButton {
   display: inline-block;
   background: rgb(78, 6, 10);
   cursor: pointer;
   color: white;
   vertical-align: top;
   text-align: center;
}

.communication_cc_status {
   background: rgb(36, 37, 131);
   padding: 0px 7px;
}

.communication_cc_status[data-status="pending"] {
   background: rgb(65, 8, 108);
}

.communication_cc_status[data-status="terminated"] {
   background: rgb(137, 66, 11);
}

.communication_cc_status[data-status="transmitting"] {
   background: rgb(18, 68, 12);
}

.toPreviewOnlyButton[data-status="active"] {
   background: rgba(0, 128, 0, 0.44);
}

.extra_button_menu {
   background: rgb(39, 39, 37);
}

.commonCoverStatusButton[data-status="default"] {
   background: rgb(115, 115, 219);
}

.commonCoverStatusButton[data-status="show"] {
   background: rgb(6, 47, 6);
}

.commonCoverStatusButton[data-status="hide"] {
   background: rgb(49, 5, 5);
}

#page .cc_extra_button,
#page .extra_button_menu {
   padding: 0px 3px;
   margin: 0px 8px 0px 0px;
   display: inline-block;
}

#extraButton1 {
   background: rgb(118, 84, 22);
}

#extraButton2 {
   background: rgba(24, 65, 39, 0.53);
}

#extraButton3 {
   background: rgba(62, 68, 92, 0.46);
}

#extraButton4 {
   background: rgba(92, 71, 62, 0.74);
}

#extraButton6 {
   background: rgba(26, 74, 100, 0.89);
}

.optionsContainer .setNewSize {
   display: none;
}

#rightOptions .ss_slider_container {
   background: none;
   border: none;
   height: 100%;
   padding-left: 0px;
   vertical-align: top;
   overflow: hidden;
}

.rightOptionsContainer select,
#rightOptions .ss_slider_container {
   width: 48%;
   min-width: 167px;
}

#editorResizeHeightContainer {}

#rightOptions .ss_number_slider_button i {}

.optionsContainer .ss_number_slider_button .fa-plus {
   top: 10.5px;
   color: rgb(209, 212, 222);
}

#layoutEditor .buttonOverlay {
   background: rgba(0, 128, 0, 0);
   z-index: 5;
   height: 100%;
}

.cc_section.gu-mirror {
   width: 175px !important;
   height: 175px !important;
}

#layoutEditor .gu-transit {
   opacity: 0.4;
}

#layoutOverlay .buttonOverlay {
   background: rgba(43, 8, 52, 0.12);
   z-index: 3;
   top: 0px;
   height: 78%;
}

#overlaySection {
   position: absolute;
   top: 32%;
   left: 0%;
   width: 92%;
   height: 68%;
   background: rgb(55, 77, 121);
   opacity: 0.3;
   color: white;
   padding-top: 5px;
   border: 1px solid lightgray;
   font-size: 15px;
}

.gu-transit #overlaySection,
.gu-mirror .overlaySection,
.gu-mirror .sampleSectionImage,
#inactiveContainer .sampleSectionImage,
#overlayContainer .sampleSectionImage {
   display: none !important;
}

.cc_drag_title {
   display: none;
}

.gu-mirror .cc_drag_title,
#inactiveContainer .cc_drag_title,
#overlayContainer .cc_drag_title {
   display: block !important;
}

#inactiveContainer .theMoveButton,
#overlayContainer .theMoveButton {
   width: 24px;
   height: 24px;
   position: absolute;
   display: inline-block;
   vertical-align: top;
   padding: 0px;
   line-height: 24px;
   bottom: unset;
   top: 2px;
   left: 4px;
}

#inactiveContainer .theMoveButton i,
#overlayContainer .theMoveButton i {
   line-height: 5px;
}

#inactiveContainer .cc_drag_title,
#overlayContainer .cc_drag_title {
   width: 70%;
   overflow: hidden;
   white-space: nowrap;
   text-align: left;
   height: 30px;
   line-height: 30px;
   display: inline-block;
   vertical-align: top;
   position: absolute;
   left: 35px;
   color: rgb(189, 185, 185);
}

.oneLineCover {
   position: absolute;
   top: 0px;
   left: 0px;
   background: rgba(35, 36, 41, 0.66);
   width: 100%;
   height: 100%;
   z-index: 8;
}

.overlayContainerBlocker {
   position: absolute;
   top: 0px;
   left: 0px;
   background: rgba(10, 11, 13, 0.94);
   width: 100%;
   height: 100%;
   z-index: 48;
   padding: 27px;
   color: rgba(255, 255, 255, 0.58);
   display: none;
}

.textSelectLine,
.oneNumberSelect {
   position: relative;
   border-top: 1px solid rgba(69, 69, 69, 0.24);
   border-bottom: none;
   height: 36px;
   text-align: left;
   padding-left: 20px;
   background: rgba(25, 29, 38, 0.31);
   overflow: hidden;
}

.textSelectLine:nth-child(2n+1),
.oneNumberSelect:nth-child(2n+1) {
   background: rgba(26, 32, 46, 0.39);
}

.containerSizeTitle {
   width: 50%;
   display: inline-block;
   border-top: 1px solid rgba(255, 255, 255, 0);
   border-right: 1px solid rgba(255, 255, 255, 0);
   border-left: 1px solid rgba(255, 255, 255, 0);
   border-image: initial;
   border-bottom: none;
   vertical-align: top;
   height: 36px;
   line-height: 36px;
   font-size: inherit;
   color: rgb(199, 199, 199);
}

.textSelectContainer .extraSliderContainer {
   text-align: left;
   padding-left: 5px;
   white-space: nowrap;
}

.textSelectContainer .extraSliderContainer .setNewSize {
   display: none;
}

.textSelectLine:nth-child(2n+1) .containerSizeTitle,
.oneNumberSelect:nth-child(2n+1) .containerSizeTitle {}

.newTextSelectLine {}

[title="outerButtonsLocation"] {}

.oldTextSelectLine {
   background: rgb(48, 36, 5);
}

#presetsContainer {
   color: rgb(159, 159, 159);
   padding: 6px;
   position: relative;
   font-size: 13px;
   cursor: default;
}

#presetsContainer input {
   background: black;
   color: rgb(142, 142, 142);
   height: 35px;
   border: 1px solid rgb(39, 39, 39);
   padding-left: 4px;
   width: 199px;
}

#presetsContainer select,
#presetsContainer .cc_select {
   padding: 5px;
   border: 1px solid rgb(43, 43, 43);
   color: rgb(147, 147, 147);
   border-radius: 5%;
   width: 100px;
   height: 28px;
   line-height: 28px;
   vertical-align: top;
}

#presetsContainer .cc_select {
   padding: 0px 0px 0px 3px;
   text-transform: capitalize;
}

#presetsContainer .cc_select,
#presetsContainer .cc_select .activeSelectOption,
#presetsContainer .cc_select .caretDown {
   height: 28px;
   line-height: 28px;
}

.entireColorListFormat {
   display: inline-block;
   position: absolute;
   background: rgba(44, 39, 44, 0.62);
   height: 28px;
   font-size: 11px;
   top: 4px;
   overflow: hidden;
   width: unset;
   padding: 0px 5px;
   right: 30px;
}

.sharedObjectPreviewTitle .entireColorListFormat {
   top: 9px;
}

.colorListFormatText .partialText {
   display: none;
}

.colorListFormatText {
   display: inline-block;
   vertical-align: top;
   line-height: 20px;
   padding-top: 5px;
}

.inactiveSelectOptions .inactiveSelectOption {
   text-transform: capitalize;
   transition: background 0.2s ease 0s;
}

#secondaryEditorThemenewSelect .inactiveSelectOption {
   text-transform: unset;
}

#selectSessionnewSelect,
.inactiveSelectOption[data-var="selectSession"] {
   min-width: 140px;
}

.inactiveSelectOption[data-var="selectSession"] {
   min-width: 130px;
}

#userColorFormatnewSelect .inactiveSelectOption {
   text-transform: lowercase;
}

.inactiveSelectOption[data-var="selectSession"] {
   text-transform: unset;
}

.inactiveSelectOption.hiddenBottomOption {
   display: none;
}

.customDropdown.isPreferenceArray .inactiveSelectOption {
   text-transform: unset;
}

.inactiveSelectOptions.normalCaps .inactiveSelectOption {
   text-transform: unset;
}

#presetsContainer .cc_select {
   background: black;
}

#presetsContainer option {
   background: rgb(24, 24, 27);
}

.layoutNamePreferences {
   border: 2px solid rgba(0, 0, 0, 0.9);
   margin-top: 9px;
   color: rgb(159, 159, 159);
   background: rgba(29, 29, 29, 0.65);
   padding: 6px;
   text-align: left;
}

.layoutNamePreferenceLine {
   font-size: 14px;
   line-height: 32px;
   display: inline-block;
   width: 100%;
   text-align: left;
}

@media only screen and (min-width: 1258px) {
   .layoutNamePreferenceLine {
      width: 45%;
   }
}

.layoutNameTitle {
   width: 211px;
   position: relative;
   display: inline-block;
   color: rgb(171, 166, 166);
   height: 28px;
   line-height: 28px;
   vertical-align: top;
   margin-top: 3px;
}

.layoutNameTitleAbbreviated {
   display: none;
}

.presetButtonsContainer {
   text-align: center;
   margin-bottom: 8px;
}

.initialPreset,
.presetListInitialPresetButtonContainer {
   position: absolute;
   overflow: hidden;
   background: rgb(110, 153, 195);
   color: rgb(110, 153, 195);
   height: 5px;
   width: 5px;
   bottom: 2px;
   right: 2px;
   border-radius: 50%;
}

.oneCondensedPreset .initialPreset {
   transition: opacity 0.3s ease 0s;
   opacity: 0;
}

.presetListInitialPresetButtonContainer {
   position: absolute;
   height: 10px;
   width: 10px;
   display: inline-block;
   top: 20px;
   right: 70px;
   cursor: alias;
   transition: opacity 0.1s ease 0s;
}

.presetListInitialPresetButtonContainer {
   background: rgba(138, 54, 17, 0);
   top: 5px;
   height: 33px;
   border-radius: 0px;
   width: 20px;
}

.theInitialPresetActualButton {
   background: rgb(110, 153, 195);
   height: 10px;
   width: 10px;
   top: 16px;
   position: relative;
   left: 4px;
   border-radius: 50%;
}

.presetListInitialPresetButtonContainer[data-activestatus="active"] {
   opacity: 0.7;
   cursor: default;
}

.presetListInitialPresetButtonContainer[data-activestatus="inactive"] {
   cursor: alias;
   opacity: 0;
}

.presetListItem:hover .presetListInitialPresetButtonContainer[data-activestatus="inactive"] {
   opacity: 0.15;
}

.presetListItem:hover .presetListInitialPresetButtonContainer[data-activestatus="inactive"]:hover {
   opacity: 0.5;
}

.presetButton,
.oneCondensedPreset {
   display: inline-block;
   width: 30px;
   height: 30px;
   background: rgb(23, 30, 60);
   box-shadow: rgba(10, 10, 10, 0.55) 4px 2px;
   margin: 4px 6px;
   color: rgb(197, 197, 197);
   line-height: 30px;
   text-align: center;
   cursor: pointer;
   transition: all 0.3s ease 0s;
   position: relative;
   border: 1px solid rgba(0, 0, 0, 0.64);
}

.togglePresetListButton,
.finishedMovingSectionsButton {
   position: absolute;
   right: 12px;
   width: unset;
   padding: 0px 8px;
   background: rgb(23, 35, 53);
   border: 1px solid black;
}

#rightOptions .overlaySectionCover .presetButton {
   bottom: 44px;
   top: unset;
   border: 2px solid rgba(0, 0, 0, 0.28);
   font-size: 1.2em;
}

.finishedMovingSectionsButton {
   opacity: 0.9;
   left: 3%;
   right: unset;
   top: 6px;
}

.unsetPresetButton,
.oneCondensedPreset[data-empty="yes"] {
   background: rgb(25, 22, 22);
}

.presetButtonActive,
.presetButton:hover,
.oneCondensedPresetActive,
.oneCondensedPreset:hover {
   background: rgb(64, 20, 20);
}

.presetButtonActive:hover,
.oneCondensedPresetActive:hover {
   cursor: default;
}

.togglePresetListButton:hover {
   background: rgb(31, 40, 58);
}

.presetButtonActive.unsetPresetButton,
#page .oneCondensedPresetActive[data-empty="yes"] {
   background: rgb(70, 54, 54);
}

.presetOptionButton,
.loadPreset {
   background: rgb(36, 40, 53);
   color: rgb(177, 177, 177);
   padding: 8px;
   display: inline-block;
   cursor: pointer;
   border: 1px solid rgba(13, 13, 13, 0.52);
   box-shadow: rgba(15, 15, 16, 0.81) 4px 4px;
   transition: background 0.3s ease 0s, color 0.3s ease 0s;
}

.editorLayoutButton {
   background: rgb(25, 29, 45);
}

.presetOptionButton:hover {
   background: rgb(51, 56, 72);
}

.disabledPresetButton,
.disabledPresetButton:hover {
   color: rgb(77, 77, 77);
   background: rgb(36, 40, 53);
   cursor: default;
}

#presetsContainer[data-currentpreset="D"] .savePreset,
#presetsContainer[data-currentpreset="D"] .deletePreset {
   color: rgb(77, 77, 77);
   cursor: default;
}

#presetsContainer[data-currentpreset="D"] .savePreset:hover,
#presetsContainer[data-currentpreset="D"] .deletePreset:hover {
   background: rgb(36, 40, 53);
}

.loadPreset {
   background: rgb(31, 43, 82);
}

.gu-transit .containerInfo,
.gu-mirror .containerInfo,
.inactive-overlay .containerInfo {
   display: none !important;
}

.currentPresetDisplay {
   color: white;
}

#nameDisplay {
   position: absolute;
   right: 6px;
   background: rgb(18, 18, 21);
   z-index: 5;
   bottom: 4px;
   padding: 4px;
   color: rgb(179, 179, 179);
   cursor: default;
   transition: opacity 0.4s ease 0s;
   white-space: nowrap;
   overflow: hidden;
}

.sampleEditorContainer {
   background: rgba(47, 47, 51, 0.17);
   width: 66%;
   position: relative;
   border: 1px solid rgba(75, 73, 73, 0.73);
   margin-left: 17%;
   text-align: center;
   padding: 3px 0px 10px;
   height: 97%;
   overflow: hidden;
}

.sampleOuterLanguageButtons {
   position: relative;
   height: 17px;
   margin-bottom: 8px;
}

.sampleOuterLanguageButtons[data-position="bottom"] {
   margin-bottom: 0px;
   margin-top: 5px;
}

.sampleEditorBox {
   width: 100%;
   color: dimgray;
   margin: 0px auto;
   border-bottom: none;
   padding-bottom: 8px;
   height: calc(100% - 10px);
   font-size: 15px;
}

.sampleBox1 {}

.sampleBoxClass {}

.noGutters .sampleBox1 {
   height: 100%;
}

.horizontalEditors .sampleBoxClass {
   height: unset;
}

.horizontalEditors .noGutters .sampleBox1 {
   height: 100%;
   overflow: auto;
}

.sampleEditorBox:last-child {}

.horizontalEditors .sampleEditorBox,
.horizontalEditors .sampleEditorSeparator {
   display: inline-block;
   width: calc(33.33% - 8px);
   border: 1px solid rgba(211, 211, 211, 0.22);
   float: left;
   height: 105px;
}

.horizontalEditors .noGutters .sampleEditorBox {
   width: 100%;
}

.horizontalEditors .sampleEditorSeparator {
   width: 8px;
   margin: 0px;
}

.sampleEditorBoxes {
   width: 80%;
   margin-left: 10%;
   border: 1px solid rgba(73, 70, 70, 0.98);
   height: 108px;
   overflow: hidden;
   background: rgb(28, 28, 35);
}

.horizontalEditors .sampleEditorBoxes {
   overflow: auto;
   width: 80%;
   margin-left: 10%;
}

.noGutters .sampleBox2,
.noGutters .sampleBox3,
.noGutters .sampleEditorSeparator {
   display: none;
}

.noGutters .sampleEditorBox {
   height: 100%;
}

.sampleOuterLanguageButtons .sampleButton {
   display: inline-block;
   width: 21%;
   height: 10px;
   margin: 0px 2%;
   background: rgba(71, 70, 71, 0.91);
   top: 3px;
   position: relative;
   left: 1%;
   vertical-align: top;
}

.sampleConsole,
.sampleScratchpad {
   background: black;
   position: relative;
   width: 60%;
   margin-left: 20%;
   border: 1px solid rgb(53, 52, 52);
}

.sampleScratchpad {
   border: 1px solid rgb(75, 73, 73);
   height: 60%;
   background: rgb(27, 29, 32);
}

.sampleScratchArea {
   border: 1px solid black;
   width: 86%;
   margin-left: 7%;
   height: calc(80% - 15px);
   margin-top: 6%;
}

.sampleScratchFirstRow {
   overflow: hidden;
   text-align: left;
   background: black;
   height: 10px;
}

.sampleScratchInput {
   display: inline-block;
   width: 35%;
   background: rgb(86, 83, 83);
   vertical-align: top;
   height: 100%;
}

.sampleScratchCog,
.sampleScratchButton {
   display: inline-block;
   height: 100%;
   vertical-align: top;
   font-size: 8px;
   line-height: 100%;
   opacity: 0.4;
}

.sampleScratchButton {
   opacity: 1;
   width: 10%;
   height: 70%;
   margin-top: 1px;
   background: rgb(60, 60, 69);
}

.sampleScratchButtonTwo {
   background: rgb(33, 33, 76);
}

.sampleScratchEditorContainer {
   background: rgb(14, 13, 13);
   height: calc(100% - 10px);
}

.sampleConsoleLines {
   height: 44px;
   font-size: 10px;
   background: rgb(39, 39, 39);
   color: rgb(41, 129, 41);
   padding: 6px;
   text-align: left;
}

.sampleScratchGutter,
.sampleScratchTextArea {
   height: 100%;
   width: 88%;
   display: inline-block;
   float: left;
}

.sampleScratchTextArea {
   font-size: 6px;
   padding: 4px 4px 4px 6px;
   color: rgba(193, 192, 192, 0.3);
   text-align: left;
}

.sampleScratchGutter {
   width: 12%;
   background: rgba(42, 65, 165, 0.12);
   border-right: 1px solid rgba(96, 80, 80, 0.32);
}

.sampleConsoleInputBox {
   background: rgb(14, 14, 14);
   color: rgb(75, 100, 75);
   font-size: 15px;
   border: 1px solid rgba(0, 128, 0, 0.31);
   height: 20px;
}

.spaceForNotes {
   background: white;
}

.spaceForNotes .singleLine {
   height: 20px;
   border-bottom: 1px solid black;
}

.sampleConsoleTitle {
   background: rgb(14, 19, 23);
   padding-left: 10px;
   font-size: 13px;
   color: lightgray;
}

.consoleCaret {
   width: 1%;
   background: rgb(22, 39, 22);
   height: 13px;
   top: 1px;
   left: 5px;
   position: relative;
}

.sampleRender {
   width: 60%;
   height: 68%;
   background: rgba(128, 128, 128, 0.46);
   border: 1px solid rgb(75, 73, 73);
   position: relative;
   font-size: 12px;
   margin-left: 20%;
   overflow: hidden;
}

.sampleSectionImage {
   opacity: 0.75;
   width: 69%;
   margin-left: 15%;
   border: 2px solid black;
   min-height: 70%;
}

.itemCreationSampleImage,
.styleEditorSampleImage {
   background: rgb(32, 33, 35);
   height: 72%;
   overflow: hidden;
}

.styleEditorSampleImage {
   height: 83%;
   padding-bottom: 8px;
}

.sampleImageTitle {
   background: rgb(14, 19, 23);
   color: lightgray;
   height: 15px;
   font-size: 12px;
   overflow: hidden;
}

.sampleCodeRow {
   font-size: 5px;
   opacity: 0.5;
}

.sampleCodeRowIndented {
   padding-left: 9px;
}

.sampleCreationPart {
   border: 1px solid rgb(0, 0, 0);
   height: calc(20% + 7px);
   overflow: hidden;
   font-size: 8px;
   width: 76%;
   padding-bottom: 7px;
   background: rgba(142, 196, 216, 0.03);
   opacity: 0.7;
   max-width: 210px;
   margin: 2% auto 0px;
}

.CSSRulesSamplePart {
   text-align: left;
}

.sampleAddedStyles {
   background: rgba(45, 62, 86, 0.35);
   width: 76%;
   margin-left: 12%;
   text-align: left;
   padding-left: 4%;
   padding-top: 1%;
   padding-bottom: 1%;
   margin-top: 6px;
}

.sampleCreationTitle {
   height: 9px;
   background: black;
   color: rgb(108, 104, 104);
   font-size: 6px;
   text-align: center;
}

.sampleNameInput,
.elementTreeSampleButton {
   width: 40%;
   background: rgba(89, 90, 92, 0.47);
   display: inline-block;
   height: 12px;
   margin-top: 3px;
}

.CSSRulesSamplePart .sampleNameInput {
   margin-left: 12%;
}

.elementTreeSampleButton {
   width: 21%;
   left: 6%;
   position: relative;
   margin-left: 3%;
   border: 1px solid rgba(0, 0, 0, 0.31);
}

.elementTreeSampleButtonTwo {
   background: rgb(27, 38, 53);
}

.elementTreeSampleSection {
   text-align: left;
}

.notUsedButton {
   border: 1px solid rgba(4, 4, 4, 0.05);
   height: 12px;
   width: 15px;
   background: rgba(69, 69, 78, 0.42);
   display: inline-block;
}

.languageSampleButton {
   display: inline-block;
   width: 27%;
   height: 40%;
   background: rgb(73, 72, 72);
   margin-top: 2%;
}

.sampleTagButton {
   border: 1px solid green;
}

.sampleRenderBox {
   display: inline-block;
}

.sampleRenderBoxes>div {
   float: left;
   height: 100%;
   text-align: left;
   padding-left: 3px;
   overflow: hidden;
}

.boxText {
   background: rgb(147, 147, 147);
   color: rgb(131, 131, 131);
   font-size: 4px;
   display: inline-block;
}

.bottomSection .boxText {
   color: rgb(94, 98, 100);
   background: rgb(94, 98, 100);
}

.sampleRenderBoxes {
   overflow: auto;
   height: 42%;
}

.sampleRender .box1 {
   width: 20%;
   background: rgb(24, 31, 43);
}

.sampleRender .box2 {
   width: 58%;
   background: rgb(51, 49, 57);
}

.sampleRender .box3 {
   width: 22%;
   background: rgba(58, 70, 75, 0.83);
}

.sampleRender .bottomContainer {
   background: lightgray;
}

.bottomSection {
   overflow: hidden;
   padding-left: 10%;
   height: 45%;
   color: gray;
}

.bottomSection>div {
   border-top: 1px solid rgba(211, 211, 211, 0.13);
   border-left: 1px solid rgba(211, 211, 211, 0.13);
   border-image: initial;
   width: 30%;
   height: 101%;
   float: left;
   position: relative;
   text-align: left;
   border-right: none;
   border-bottom: 1px solid rgba(211, 211, 211, 0.34);
   color: black;
}

.bottomSection .box6 {
   border-right: 1px solid rgba(211, 211, 211, 0.13);
}

.shortcutsBox {
   background: rgb(40, 38, 38);
   width: 60%;
   margin-left: 20%;
}

.shortcutsBox .titleBox {
   background: rgb(14, 19, 23);
   color: lightgray;
   height: 15%;
   font-size: 12px;
}

.boxWithEmptySpace {
   background: green;
}

.boxContainingShortcuts {
   font-size: 13px;
   color: rgb(145, 143, 143);
}

.sampleShortcutKey,
.sampleSnippetDisplay {
   display: inline-block;
   background: rgb(11, 11, 11);
   color: transparent;
}

.sampleShortcutKey {
   width: 10%;
}

.sampleSnippetDisplay {
   width: 65%;
   max-width: 169px;
}

.sampleShortcutLine {
   margin-top: 3px;
}

.sampleShortcutLine:first-child {
   margin-top: 7px;
}

.sampleShortcutLine:last-child {
   margin-bottom: 7px;
}

.sampleEditorSeparator {
   background: rgb(70, 70, 70);
   height: 10px;
   width: 100%;
   font-size: 5px;
   text-align: right;
   position: relative;
   border-radius: 0px;
}

.sampleSizeButton,
.sampleInnerButton {
   display: inline-block;
   background: rgba(34, 37, 43, 0.8);
   color: rgba(255, 255, 255, 0);
   width: 20px;
   position: relative;
   top: 2px;
   height: 6px;
   border: 1px solid rgb(55, 56, 59);
}

.noGutterLanguageButtons .sampleInnerButton {
   display: none;
}

.noGutterLanguageButtons .sampleSizeButton {
   right: 4px;
}

.horizontalEditors .sampleInnerButton {
   width: 6px;
   height: 30px;
   background: rgb(141, 141, 141);
   position: absolute;
   top: 0px;
   left: 0px;
}

.horizontalEditors .sampleSizeButton {
   top: 32px;
}

.horizontalEditors .noGutterLanguageButtons .sampleSizeButton {
   right: 0px;
   top: 4px;
}

.sampleSizeButton {
   width: 6px;
   background: black;
   border: 1px solid rgba(128, 128, 128, 0.49);
}

.streamsPageLabel {
   position: absolute;
   color: rgb(185, 199, 218);
   top: 0px;
   left: 32px;
}

#cc_inactiveContainer {
   display: none;
}

.cc_main_container {
   background: rgb(24, 29, 29);
   color: gray;
   position: relative;
   overflow: hidden;
}

#entire_scratchpad {
   height: 100%;
}

#entire_scratchpad[data-editingthemes="yes"] {}

.scratchNameButton {
   background: rgb(69, 15, 9);
   height: 20px;
   width: 20px;
   text-align: center;
   line-height: 20px;
   font-size: 11px;
   margin-left: 2px;
   opacity: 0.4;
   cursor: default;
   position: absolute;
   left: 194px;
   top: 5px;
   display: none;
}

.noScratchFileSlots {
   background: rgb(21, 69, 82);
}

#scratchFileAndTidy {
   display: inline-block;
   width: calc(55% - 60px);
   overflow: hidden;
   vertical-align: top;
}

#scratch_file_title {
   background: rgb(25, 25, 25);
   border: 1px solid rgb(14, 14, 14);
   color: rgb(110, 110, 110);
   padding: 1px;
   height: 30px;
   line-height: 26px;
   position: relative;
   width: 100%;
}

#entire_scratchpad .scratchOptionsToggleButton,
.scratchFileSearch,
.scratchFileExport {
   top: 2px;
   color: rgb(158, 157, 157);
   cursor: pointer;
   position: relative;
   opacity: 0.4;
   transition: opacity 0.2s ease 0s;
   margin-left: 8px;
   margin-right: 4px;
   display: inline-block;
}

body {
   background: dimgray;
}

#presentationController {
   position: fixed;
   bottom: 0;
   z-index: 15;
   width: 100%;
   background: #000000;
   bottom: 29px;
   height: 168px;
   overflow: hidden;
   /* border: 3px solid green; */
   padding-bottom: 0;
   display: none;
}

.specificLBDisplay {

   margin-bottom: 18px;
   padding-left: 15px;

}

.specificLBDisplayButton {
   background: #2a2a58;
   padding: 6px;
   cursor: pointer;
   display: inline-block;
   margin-right: 8px;
   opacity: .4;
}

#specialLogBox[data-specificstate="cleanOnly"] .specificLBDisplayButton[data-type="cleanOnly"],
#specialLogBox[data-specificstate="highlightOnly"] .specificLBDisplayButton[data-type="highlightOnly"],
#specialLogBox[data-specificstate="whitelistOnly"] .specificLBDisplayButton[data-type="whitelistOnly"] {
   opacity: 1;
}


#editorForGutterSize {
   top: 200px;
   left: 200px;
   min-width: 400px;
   position: fixed;
   z-index: 333333;
   min-height: 200px;
   background: darkgreen;
}

.animTextBox {
   background: rgba(40, 34, 46, 0.17);
   position: fixed;
   left: 50px;
   top: unset;
   width: 720px;
   z-index: 5100;
   border: 4px solid rgb(64, 109, 110);
   display: inline-block;
   height: unset;
}

#typeTest1 {
   position: fixed;
   z-index: 500;
   bottom: 26px;
   width: 97%;
   background: rgb(10, 12, 17);
   left: 30px;
   padding-bottom: 160px;
   border: 2px solid yellow;
   height: 150px;
   display: none;
}

#glossaryPage #typeTest1 {
   bottom: 190px;
}

#page[data-width="showingConsoles"] #typeTest1 {
   width: 59%;
   overflow: hidden;
}

#thirdPresPart,
#secondPresPart,
#runPresObject,
#pres_for_transitions,
#oneModulePres,
#blackToggleWithMain,
#pres_third_line,
#pres_second_line,
#removeLastAnim,
#justWriteFirstPart,
#presPartTwo,
#moveBottomBarUp,
#blackBackgroundToggle,
#oneAnim,
#stopPres,
#startPres,
#hideTypeTest1,
#presPartThree,
#pres_module_transition {
   background: rgb(15, 53, 59);
   padding: 12px;
   cursor: pointer;
   display: inline-block;
   margin: 6px;
   bottom: 8px;
   left: 15px;
   right: unset;
   border: 1px solid rgb(27, 34, 36);
}

#thirdPresPart,
#secondPresPart {
   margin-left: 20px;
   background: #3c3c64;
}

#startPres {
   visibility: hidden;
}

#thirdPresPart {
   background: #2d4246;
}

.arrToDisplay {
   display: inline-block;
   font-size: 16px;
   color: lightblue;
   bordeR: 1px solid;
   padding: 11.3px;
   vertical-align: top;
   position: relative;
   top: 9px;
}

#presPartThree {
   visibility: hidden;
   display: none;
}

#pres_for_transitions,
#runPresObject {
   background: rgb(61, 46, 17);
   font-size: 18px;
   border: 2px solid rgb(173, 208, 230);
   color: rgb(163, 197, 211);
   margin-right: 80px;
}

#runPresObject {
   visibility:hidden;
}

#pres_for_transitions {
   background: #000000;
   opacity: .3;
   /* margin-left: 193px; */
}

#pres_module_transition {
   background: rgb(63, 63, 103);
   margin-right: 50px;
   opacity: 0.4;
}

#glossaryPage #presColorChooser,
#glossaryPage #moveBottomBarUp {
   display: none;
}

#page #presColorChooserSection {
   border: 1px solid rgb(34, 34, 34);
   color: rgb(166, 193, 193);
   position: absolute;
   bottom: 8px;
   font-size: 14px;
   left: 15px;
}

#glossaryPage #presColorChooserSection {
   display: none;
}

#page #editorThemeOverlay #presColorChooserSection {
   top: 0px;
   left: 0px;
   right: unset;
   border: 1px solid yellow;
   height: 40px;
}

#presColorChooser {
   border: 1px solid rgb(60, 76, 78);
   color: lightblue;
}

#oneModulePres,
#pres_third_line,
#pres_second_line {
   left: 600px;
   background: black;
   bottom: unset;
   /* visibility: hidden; */
}

#pres_second_line {
   visibility: hidden;
}

#pres_third_line {
   left: 740px;
   background: rgb(45, 5, 49);
   visibility: hidden;
}

#oneModulePres {
   background: rgb(10, 54, 18);
}

#justWriteFirstPart {
   display: none;
   left: 500px;
   visibility: hidden;
}

#moveBottomBarUp {
   left: 250px;
   background: rgb(37, 37, 51);
}

#presPartTwo {
   left: 400px;
   background: rgb(41, 22, 42);
   visibility: hidden;
   display: none;
}

#stopPres {
   background: rgb(68, 24, 24);
   left: 115px;
}

#removeLastAnim,
#blackBackgroundToggle,
#oneAnim {
   background: rgb(27, 27, 85);
   bottom: 70px;
   opacity: 0.05;
}

#oneAnim {
   visibility: hidden;
}

#removeLastAnim {
   opacity: 1;
   left: 380px;
}

#blackBackgroundToggle {
   opacity: 1;
}

#page #blackToggleWithMain {
   background: rgb(92, 26, 92);
   visibility: hidden;
}

#blackBackgroundToggle {
   left: 200px;
   background: rgb(45, 68, 99);
}

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

#typeTest1 #points {
   background: black;
   font-size: 14px;
   line-height: 22px;
   position: relative;
   width: 100%;
   display: none;
}

.t1 {
   margin-left: 30px;
   color: rgb(232, 170, 52);
}

.t2 {
   color: rgb(191, 190, 25);
   margin-left: 80px;
}

.t3 {
   color: rgb(230, 230, 230);
   margin-left: 120px;
}

#typeTestInner {
   height: 300px;
   width: 100%;
   display: none !important;
}

#dark_gray_pres_back,
#pres_background {
   background: #00000078;
   top: 0px;
   left: 0px;
   width: 100%;
   height: 910px;
   z-index: 499;
   position: fixed;
}

#dark_gray_pres_back {
   display: block;
   opacity: 0.35;
}

.typed-cursor {
   color: rgba(118, 112, 136, 0);
   background: rgb(202, 206, 221);
   width: 12px;
}

.animTextBox {
   top: 100px;
   height: unset;
   width: unset;
   border: none;
   left: 130px;
   background: rgb(7, 26, 57);
   bottom: unset;
   font-size: 18.2px;
   padding: 11px;
}

.animTextBox[data-number="9"] {
   top: 200px;
   left: 37.4px;
   background: rgb(33, 38, 55);
   color: rgb(177, 204, 212);
}

.animTextBox[data-number="11"] {
   background: rgb(29, 10, 39);
   color: rgb(178, 188, 198);
}

.animTextBox[data-number="12"] {
   background: rgb(30, 38, 64);
   color: lightblue;
}

.animTextBox[data-number="4"] {
   color: rgb(148, 191, 214);
   background: rgb(26, 34, 80);
   left: 37.4px;
   top: 200px;
   left: 734px;
}

.animTextBox[data-number="5"],
.animTextBox[data-number="6"] {
   color: rgb(151, 186, 231);
   left: 37.4px;
   top: 280px;
   font-size: 18.2px;
   background: #214644;
   color: lightblue;
}

.animTextBox[data-number="5"] {
   top: 27px;
   left: 33px;
}

.animTextBox[data-number="6"] {
   background: rgb(46 73 80);
   color: rgb(202, 206, 221);
   top: 89px;
   left: 33px;
}

.animTextBox[data-number="7"] {
   left: 33px;
   top: 163px;
   background: rgb(17 65 88);
   color: rgb(214, 222, 228);
}

#page.moveMessagesRight .animTextBox[data-number="6"] {
   top: 224px;
}

#page.moveMessagesRight .animTextBox[data-number="4"],
#page.moveMessagesRight .animTextBox[data-number="5"],
#page.moveMessagesRight .animTextBox[data-number="6"] {
   left: 679px;
}

.animTextBox[data-number="5"] .typed-cursor {
   color: rgba(0, 0, 255, 0);
   background: rgb(65, 106, 158);
}

.animTextBox[data-number="6"] .typed-cursor {
   color: rgba(0, 0, 255, 0);
   background: rgb(145, 149, 163);
}

.animTextBox[data-number="4"] .typed-cursor {
   color: rgba(0, 0, 255, 0);
   background: rgb(145, 170, 184);
}

.animTextBox[data-number="8"],
.animTextBox[data-number="1"] {
   background: rgb(65 37 82);
   color: rgb(176 182 198);
   border: 1px solid rgba(149, 166, 213, 0.04);
   transform: scale(1);
   font-size: 18.2px;
   padding: 0px 11px 11px 10px;
   width: unset;
   left: 33px;
   height: 44.86px;
   line-height: 44.86px;
   top: 30px;
   color: #90bcee;
}

.animTextBox[data-number="1"] {
   top: 50px;
}

.animTextBox[data-number="2"] {
   top: 140px;
   left: 734px;
}

.animTextBox[data-number="8"] {
   top: 28px;
   left: 442px;
}

.animTextBox[data-number="3"] {
   border: 2px solid rgba(149, 166, 213, 0.05);
   top: 773px;
   left: 26.4px;
   z-index: 500;
   background: rgb(22 43 49);
   color: lightblue;
   left: 734px;
   top: 260px;
}

.animTextBox[data-number="3"] .typed-cursor {
   color: rgba(0, 0, 255, 0);
   background: rgb(113, 117, 148);
}

.animTextBox[data-number="1"] .typed-cursor {
   color: rgba(0, 0, 255, 0);
   background: rgb(150, 162, 194);
}

.animTextBox[data-number="10"] {
   color: rgb(106, 164, 184);
   transform: scale(2.1);
   left: 254px;
   font-family: consolas;
   min-width: 400px;
   top: 81px;
   background: none;
   transition: opacity 1.2s ease 0s;
}

.animTextBox[data-number="10"] .typed-cursor {
   color: rgba(106, 164, 184, 0);
   background: rgb(72, 116, 131);
}

.animTextBox[data-number="2"] {


   background: rgb(52, 84, 130);
   color: white;
   line-height: 44.86px;
   height: 44.86px;
   padding-top: 0px;
   padding-bottom: 0px;
}

.animTextBoxMeasure {
   top: -500px;
   bottom: unset;
   background: rgb(6, 70, 35);
}

.typeTestTitle {
   background: rgb(53, 59, 66);
   position: absolute;
   bottom: 0px;
   right: 0px;
   padding: 15px;
   font-size: 18px;
}

#bodyContainer {
   position: relative;
   height: 700px;
   width: 700px;
   color: white;
}

#scratchpadSearchOverlay {
   position: absolute;
   top: 30px;
   left: 0px;
   width: 100%;
   height: calc(100% - 30px);
   background: rgb(13, 33, 53);
   z-index: 8;
   display: none;
}

.scratchpadSearchOverlayTitle {
   background: rgb(3, 19, 40);
   border-bottom: 2px solid rgb(19, 19, 19);
   height: 30px;
   line-height: 30px;
   text-align: center;
   color: rgb(197, 211, 216);
}

#scratchpadSearchEntryBox,
.scratchpadSearchEntryTitle,
.scratchpadSearchEntryButton,
.scratchpadSearchMatchCase {
   display: inline-block;
   height: 25px;
   line-height: 25px;
   vertical-align: top;
}

.scratchpadSearchEntryTitle,
.scratchpadSearchEntryButton,
.scratchpadSearchMatchCase {
   padding: 0px 6px;
}

.scratchpadSearchEntryButton,
.scratchpadSearchMatchCase {
   cursor: pointer;
   background: rgb(44, 43, 72);
   border: 1px solid rgb(0, 0, 0);
}

.scratchpadSearchMatchCase {
   padding: 0px;
   width: 34px;
   text-align: center;
}

.scratchpadSearchMatchCase[data-active="on"] {
   border: 1px solid rgb(53, 68, 68);
   color: rgb(96, 139, 139);
   background: rgb(13, 13, 25);
   font-weight: 600;
}

.scratchpadSearchEntryLine {
   background: rgb(7, 7, 24);
   height: 40px;
   line-height: 40px;
   padding: 8px 0px 0px;
}

#scratchpadSearchEntryBox {
   border: 1px solid rgb(0, 0, 0);
   background: rgb(40, 38, 40);
   color: rgb(179, 183, 184);
   height: 25px;
}

.scratchpadSearchResultsArea {
   border: 1px solid rgb(0, 0, 0);
   width: 97%;
   height: 74%;
   background: rgb(2, 2, 22);
   margin: 8px;
}

.scratchpadSearchResultsTitle {
   background: black;
}

.oneScratchSearchLine,
.scratchpadSearchResultsTitle {
   padding-left: 30px;
   padding-top: 5px;
   padding-bottom: 5px;
}

.oneScratchSearchLine {
   background: rgb(40, 39, 39);
   color: rgb(178, 177, 177);
}

.oneScratchSearchLine:nth-child(2n+1) {
   background: rgb(12, 12, 12);
   color: rgb(175, 172, 172);
}

.scratchSearchResultsColumn {
   display: inline-block;
   margin-right: 5px;
}

.scratchSearchResultsColumn[data-type="time"],
.scratchSearchResultsColumn[data-type="language"],
.scratchSearchResultsColumn[data-type="name"] {
   width: 29%;
   text-align: left;
   padding-left: 10px;
}

.oneScratchSearchLine .scratchSearchResultsColumn[data-type="name"]:hover {
   cursor: pointer;
   text-decoration: underline;
}

#entire_scratchpad .scratchOptionsToggleButton[data-status="active"] {
   opacity: 1;
}

.scratchpad_button {
   background: rgba(15, 11, 40, 0.66);
   color: rgb(157, 153, 153);
   display: inline-block;
   margin: 5px 1px 1px;
   height: 20px;
   line-height: 20px;
   font-size: 12px;
   width: 8%;
   white-space: nowrap;
   text-align: center;
   cursor: pointer;
   position: relative;
}

.scratchpad_button.fork {
   background: rgb(24, 27, 33);
}

.scratchpad_button.new {
   background: rgb(13, 20, 34);
}

.scratchpad_button.load {
   background: rgba(13, 28, 34, 0.71);
}

.scratchTidyButton {
   position: absolute;
   z-index: 15;
   top: 4px;
   left: calc(55% - 85px);
   opacity: 0;
   cursor: pointer;
   transition: opacity 0.2s ease 0s;
}

.scratchTidyButton[data-inactive="true"] {
   cursor: default;
}

.scratchFileAndTidy:hover .scratchTidyButton {
   opacity: 0.4;
}

.scratchTidyButton:hover {
   opacity: 0.9;
}

.scratchpad_button.save {}

.scratchpad_title_bar {
   padding-right: 0px;
   background: black;
   color: lightgray;
   position: relative;
   height: 30px;
   white-space: nowrap;
}

.switchToTinyButtons {
   display: none;
}

#entire_scratchpad[data-width="tiny"] .switchToTinyButtons {
   position: absolute;
   z-index: 7;
   display: block;
   cursor: pointer;
   right: 8px;
   top: 3px;
   color: dimgray;
}

.tinyScratchpadButtons {
   display: none;
}

#entire_scratchpad[data-width="tiny"] .tinyScratchpadButtons {
   display: block;
   position: absolute;
   left: 0px;
   top: 0px;
   width: 100%;
   background: rgb(0, 0, 0);
   color: white;
   cursor: pointer;
   height: 100%;
}

#entire_scratchpad[data-width="small"] .scratchpad_button {
   width: 7%;
   font-size: 8px;
}

#entire_scratchpad[data-width="tiny"] .scratchpad_button {
   width: 18%;
   display: none;
}

#entire_scratchpad .tinyScratchpadButtons .scratchpad_button {
   display: inline-block;
}

.scratchpad_overlay {
   background: rgb(13, 33, 53);
   position: absolute;
   border: 1px solid rgba(0, 0, 0, 0.74);
   top: 30px;
   width: 100%;
   left: 0%;
   z-index: 50;
   color: rgb(181, 178, 178);
   font-size: 12px;
   height: calc(100% - 30px);
   padding-top: 0px;
   display: none;
}

#entire_scratchpad[data-editingthemes="yes"] .scratchpad_overlay {
   height: 64px;
   overflow: hidden;
}

#entire_scratchpad[data-width="tiny"][data-editingthemes="yes"] .scratchpad_overlay,
#entire_scratchpad[data-width="small"][data-editingthemes="yes"] .scratchpad_overlay,
#entire_scratchpad[data-width="medium"][data-editingthemes="yes"] .scratchpad_overlay {
   height: 101px;
}

.scratch_theme_line,
.scratchLanguagesLine,
.scratch_language_defaults {
   margin-bottom: 1px;
   background: rgb(25, 27, 46);
   height: 30px;
   line-height: 30px;
   padding-left: 41px;
}

.scratchLanguagesLine {
   text-align: left;
}

#entire_scratchpad[data-width="tiny"] .scratchLanguagesLine,
#entire_scratchpad[data-width="small"] .scratchLanguagesLine,
#entire_scratchpad[data-width="medium"] .scratchLanguagesLine {
   height: 67px;
   padding-left: 6px;
}

#entire_scratchpad[data-width="tiny"] .scratch_theme_line,
#entire_scratchpad[data-width="small"] .scratch_theme_line,
#entire_scratchpad[data-width="medium"] .scratch_theme_line {
   padding-left: 7px;
}

#entire_scratchpad[data-width="small"] .scratchLanguagesLine {
   height: 44px;
   line-height: 20px;
}

#entire_scratchpad[data-width="small"] .this_scratch_language_title {
   display: block;
}

.scratch_theme_line,
.scratch_language_defaults {
   background: rgb(34, 46, 77);
}

.scratch_theme_line {
   text-align: left;
   white-space: nowrap;
}

.this_scratch_language_title {
   display: inline-block;
   margin-right: 6px;
   line-height: 32px;
   height: 31px;
   vertical-align: top;
}

.scratchpad_options_bar {
   text-align: center;
   padding-bottom: 6px;
}

.scratch_info_section {
   position: absolute;
   z-index: 4;
   bottom: 10px;
   background: rgb(2, 49, 44);
   color: white;
   width: 80%;
   display: none;
   opacity: 0.5;
   right: 50px;
}

.scratchpad_saved_files {
   border: 1px solid black;
   margin-top: 8px;
   height: calc(100% - 120px);
   width: 96%;
   margin-left: 2%;
   background: black;
}

#entire_scratchpad[data-editingthemes="yes"] .scratchpad_saved_files {
   border: 1px solid yellow;
}

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

.saved_files_container {
   height: calc(92% - 6px);
   border-right: 2px solid rgba(0, 0, 0, 0.81);
   border-bottom: 2px solid rgba(0, 0, 0, 0.81);
   border-image: initial;
   overflow-y: auto;
   border-top: none;
   border-left: none;
}

#allFactoryToggles::-webkit-scrollbar-thumb {
   background: rgb(81, 82, 114);
   border-radius: 0px;
}

.inactiveSelectOptions::-webkit-scrollbar-thumb {
   background: rgb(72, 72, 72);
   border-radius: 0px;
}

.inactiveSelectOptions::-webkit-scrollbar {
   background: rgb(31, 31, 31);
   width: 15px;
}

#previewPage .allSessionRows::-webkit-scrollbar-thumb {
   background: rgb(139, 143, 145);
   border-radius: 10px;
}

#previewPage .allSessionRows::-webkit-scrollbar {
   background: rgb(24, 24, 24);
   width: 15px;
}

#featureGroupColumnContainer::-webkit-scrollbar-track {}

#featureGroupColumnContainer::-webkit-scrollbar-thumb {
   background: rgb(58, 137, 168);
   border-radius: 0px;
}

#featureGroupColumnContainer::-webkit-scrollbar {
   background: rgb(0, 0, 0);
   width: 15px;
}

.saved_files_container::-webkit-scrollbar,
.saved_files_heading::-webkit-scrollbar {
   background: rgb(4, 4, 4);
   border-color: rgb(230, 215, 215);
   width: 7px;
}

.saved_files_container::-webkit-scrollbar-thumb,
.saved_files_heading::-webkit-scrollbar-thumb {
   background: rgb(86, 95, 95);
}

.saved_files_container::-webkit-scrollbar-track,
.saved_files_heading::-webkit-scrollbar-track {
   border-color: rgb(232, 232, 232);
   border-radius: 0px;
}

.saved_files_heading::-webkit-scrollbar-track,
.saved_files_heading::-webkit-scrollbar-thumb {
   background: rgb(11, 29, 70);
}

.saved_file_cell {
   display: inline-block;
   width: 25%;
   text-align: center;
   font-size: 12px;
   cursor: default;
}

.saved_file_cell_name:hover,
.saved_file_row .saved_file_cell[data-type="delete"]:hover {
   cursor: pointer;
   text-decoration: underline;
}

.saved_files_heading .saved_file_cell {
   height: 20px;
   overflow: hidden;
}

#entire_scratchpad[data-width="tiny"] .saved_file_cell[data-type="language"],
#entire_scratchpad[data-width="small"] .saved_file_cell[data-type="language"],
#entire_scratchpad[data-width="medium"] .saved_file_cell[data-type="language"] {
   display: none;
}

#entire_scratchpad[data-width="tiny"] .saved_file_cell,
#entire_scratchpad[data-width="small"] .saved_file_cell,
#entire_scratchpad[data-width="medium"] .saved_file_cell {
   width: 32%;
   font-size: 8px;
   vertical-align: top;
}

#entire_scratchpad[data-width="tiny"] .saved_file_cell[data-type="time"],
#entire_scratchpad[data-width="tiny"] .saved_file_cell[data-type="delete"] {
   display: none;
}

#entire_scratchpad[data-width="tiny"] .saved_file_cell {
   width: 100%;
}

#entire_scratchpad[data-width="tiny"] .saved_file_cell[data-type="name"],
#entire_scratchpad[data-width="small"] .saved_file_cell[data-type="name"],
#entire_scratchpad[data-width="medium"] .saved_file_cell[data-type="name"] {
   font-size: 12px;
}

.saved_files_heading {
   background: rgb(11, 29, 70);
   height: 24px;
   font-size: 0px;
   line-height: 22px;
   border-bottom: 2px solid rgb(0, 0, 0);
   width: 100%;
}

.saved_file_row {
   border-bottom: 1px solid black;
   height: 28px;
   line-height: 28px;
   background: rgb(35, 39, 47);
   font-size: 0px;
}

.saved_file_row.inactive {
   cursor: default;
}

.saved_file_row:nth-child(2n+1) {
   background: rgb(22, 25, 30);
}

.scratchpad_option_title_language,
.scratchpad_option_title_theme {
   cursor: default;
   margin-right: 5px;
}

.scratchOptionsSaveButton {
   height: 20px;
   line-height: 20px;
   vertical-align: top;
   position: absolute;
   color: inherit;
   display: inline-block;
   margin-left: 7px;
   margin-top: 5px;
   cursor: pointer;
   font-size: 15px;
   opacity: 0.4;
   transition: opacity 0.3s ease 0s;
   right: 8px;
}

.scratchOptionsSaveButton.positionTwo {
   display: none;
}

#entire_scratchpad[data-width="tiny"] .scratchOptionsSaveButton.positionTwo,
#entire_scratchpad[data-width="small"] .scratchOptionsSaveButton.positionTwo,
#entire_scratchpad[data-width="medium"] .scratchOptionsSaveButton.positionTwo {
   display: block;
}

#entire_scratchpad[data-width="tiny"] .scratchOptionsSaveButton.positionOne,
#entire_scratchpad[data-width="small"] .scratchOptionsSaveButton.positionOne,
#entire_scratchpad[data-width="medium"] .scratchOptionsSaveButton.positionOne {
   display: none;
}

.hide_scratch_options_button {
   position: absolute;
   right: 15px;
   top: 1px;
   color: gray;
   font-size: 14px;
   cursor: pointer;
}

.scratchOptionsSaveButton:hover {
   opacity: 0.8;
}

#this_scratch_language,
#default_scratch_language,
#scratchTheme,
#page .cc_select[data-var="default_scratch_language"],
#page .cc_select[data-var="this_scratch_language"],
#page .cc_select[data-var="scratchTheme"] {
   background: rgb(17, 17, 19);
   border: 1px solid rgb(10, 10, 10);
   position: relative;
   height: 20px;
   margin-top: 5px;
}

#page .cc_select[data-var="this_scratch_language"] .activeSelectOption,
#page .cc_select[data-var="this_scratch_language"] .caretDown,
#page .cc_select[data-var="default_scratch_language"] .activeSelectOption,
#page .cc_select[data-var="default_scratch_language"] .caretDown,
#page .cc_select[data-var="scratchTheme"] .activeSelectOption,
#page .cc_select[data-var="scratchTheme"] .caretDown {
   height: 20px;
   line-height: 20px;
}

#default_scratch_language {
   margin-right: 10px;
}

.scratchpad_option_section {
   vertical-align: top;
   display: inline-block;
   width: unset;
   height: 30px;
}

.scratchpad_option_section.sectionLanguage {
   margin-left: 15px;
}

.toggleModifyScratchTheme {
   background: rgba(2, 10, 24, 0.92);
   display: inline-block;
   margin-right: 30px;
   padding: 0px 8px;
   vertical-align: top;
   cursor: pointer;
   border: 1px solid black;
   height: 26px;
   color: lightblue;
}

#entire_scratchpad[data-width="tiny"] .toggleModifyScratchTheme,
#entire_scratchpad[data-width="small"] .toggleModifyScratchTheme,
#entire_scratchpad[data-width="medium"] .toggleModifyScratchTheme {
   margin-left: 0px;
   margin-right: 8px;
}

.scratchActualThemeArea {
   height: 30px;
   overflow: hidden;
   display: none;
}

#entire_scratchpad[data-editingthemes="yes"] .scratchActualThemeArea {
   display: inline-block;
}

#entire_scratchpad[data-width="tiny"] .scratchpad_option_section,
#entire_scratchpad[data-width="small"] .scratchpad_option_section,
#entire_scratchpad[data-width="medium"] .scratchpad_option_section {
   display: inline-block;
   text-align: left;
   margin-left: 0px;
}

#entire_scratchpad[data-width="tiny"] .scratchpad_option_section.sectionLanguage,
#entire_scratchpad[data-width="small"] .scratchpad_option_section.sectionLanguage,
#entire_scratchpad[data-width="medium"] .scratchpad_option_section.sectionLanguage {
   width: 208px;
   display: block;
   margin-left: 0px;
}

#entire_scratchpad[data-width="small"] .scratch_language_defaults,
#entire_scratchpad[data-width="medium"] .scratch_language_defaults {
   height: 60px;
   text-align: left;
   overflow: hidden;
}

#entire_scratchpad[data-width="tiny"] .scratch_language_defaults,
#entire_scratchpad[data-width="tiny"] .scratchLanguagesLine {
   display: none;
}

.scratchpad_option_title_language,
#this_scratch_language,
#default_scratch_language,
.scratchpad_option_title_theme,
#scratchTheme {
   vertical-align: top;
   display: inline-block;
}

.scratchpad_editor {
   border: 2px solid rgb(16, 11, 44);
   color: rgb(168, 168, 168);
   height: calc(100% - 30px) !important;
}

#entire_scratchpad[data-editingthemes="yes"] .scratchpad_editor {
   top: 64px;
   height: calc(100% - 94px) !important;
}

#entire_scratchpad[data-width="tiny"][data-editingthemes="yes"] .scratchpad_editor,
#entire_scratchpad[data-width="small"][data-editingthemes="yes"] .scratchpad_editor,
#entire_scratchpad[data-width="medium"][data-editingthemes="yes"] .scratchpad_editor {
   top: 107px;
   height: calc(100% - 131px) !important;
}

.scratchpad_editor .ace_scrollbar-h {
   overflow: hidden;
}

.toggleOverlayVisibility {
   cursor: pointer;
   position: absolute;
   font-size: 9px;
   right: 17px;
   opacity: 0.8;
}

#presetStatus {
   display: inline-block;
}

#consoleOverlay>div {}

#consoleOverlay .consoleOverlayTitle {
   display: block;
}

#cc_bottomOverlay,
#cc_topOverlay {
   display: block;
   background: rgb(6, 45, 6);
}

#cc_bottomOverlay,
#cc_topOverlay {
   display: block;
   background: rgba(44, 51, 61, 0.62);
   position: relative;
}

#cc_topOverlay {}

.notes {
   background: rgb(8, 9, 9);
   width: 50%;
   position: fixed;
   border: 4px solid dimgray;
   left: 86px;
   top: 164px;
   z-index: 15;
   font-size: 1.2em;
   line-height: 30px;
   color: rgb(173, 220, 194);
   padding: 12px;
}

#presetNameDisplay,
#presetNameDisplay2,
#vueVarBox {
   padding: 0px;
   font-size: 1.17em;
   top: 75px;
   position: fixed;
   right: 53px;
   cursor: default;
   transition: opacity 0.9s ease 0s, background 0.9s ease 0s, color 0.9s ease 0s;
   z-index: 11;
   opacity: 0;
   color: rgb(211, 211, 211);
}

#page[data-recordingbar="show"] #presetNameDisplay {
   right: 68px;
}

.normalViewNameDisplay {
   display: inline-block;
}

.condensedViewNameDisplay {
   display: none;
}

#codeCreate.condensedView .normalViewNameDisplay {
   display: none;
}

#presetNameDisplay2,
#vueVarBox {
   opacity: 0.5;
   left: 0px;
   width: 18%;
   border: 1px solid rgba(175, 168, 168, 0.52);
   height: 15px;
   line-height: 15px;
   padding-top: 0px;
   top: 0px;
   z-index: 11;
   overflow: hidden;
}

#presetNameDisplay2 {
   display: none;
}

#vueVarBox {
   top: 0px;
   background: rgba(57, 57, 195, 0.47);
   z-index: 155;
   left: 0px;
   transition: none 0s ease 0s;
   opacity: 0.6;
   width: unset;
   cursor: pointer;
}

#presetNameDisplay[data-opacity="A-0"] .nameDisplayButtons {}

.a-100 {
   opacity: 1;
}

.a-90 {
   opacity: 0.9;
}

.a-80 {
   opacity: 0.8;
}

.a-70 {
   opacity: 0.7;
}

.a-60 {
   opacity: 0.6;
}

.a-50 {
   opacity: 0.5;
}

.a-25 {
   opacity: 0.25;
}

#codeCreate.condensedView #presetNameDisplay {
   top: 33px;
   left: unset;
   right: 80px;
   font-size: 10px;
}

.active_languages_name_display[data-opacity="A-100"],
#presetNameDisplay[data-opacity="A-100"] {
   opacity: 1;
}

.active_languages_name_display[data-opacity="A-80"],
#presetNameDisplay[data-opacity="A-80"] {
   opacity: 0.8;
}

.active_languages_name_display[data-opacity="A-50"],
#presetNameDisplay[data-opacity="A-50"] {
   opacity: 0.5;
}

.active_languages_name_display[data-opacity="A-25"],
#presetNameDisplay[data-opacity="A-25"] {
   opacity: 0.25;
}

.active_languages_name_display[data-opacity="A-10"],
#presetNameDisplay[data-opacity="A-10"] {
   opacity: 0.1;
}

.active_languages_name_display[data-opacity="A-0"],
#presetNameDisplay[data-opacity="A-0"] {
   opacity: 0;
}

#presetNameDisplay.showNameTemp {
   color: rgba(211, 211, 211, 0.9);
   opacity: 1;
}

#page[data-languageadminmenu="shown"] #presetNameDisplay {
   display: none;
}

.condensedViewNameDisplay {
   display: none;
}

#codeCreate.condensedView .condensedViewNameDisplay {
   display: inline-block;
}

#codeCreate.condensedView .normalViewNameDisplay {
   display: none;
}

#presetNameDisplay .nameDisplayButtons {
   display: inline-block;
   color: white;
   opacity: 0;
   transition: opacity 0.2s ease 0s;
}

.nameDisplayButtons i {
   cursor: pointer;
   transition: all 0.2s ease 0s;
   opacity: 0.3;
}

#presetNameDisplay:hover .nameDisplayButtons,
#presetNameDisplay[data-adjustingcolors="true"] .nameDisplayButtons {
   opacity: 1;
}

#presetNameDisplay .nameDisplayButtons i:hover,
#presetNameDisplay[data-adjustingcolors="true"] .nameDisplayButtons i {
   opacity: 1;
}

.showPresetListButton {
   cursor: pointer;
   display: inline-block;
   padding: 5px;
   background: dimgray;
   transition: background 0.3s ease 0s;
}

.showPresetListButton:hover {
   background: darkslateblue;
}

.presetListTitle {
   background: black;
   padding: 4px;
   text-align: center;
}

.presetLayoutName {
   overflow: hidden;
   width: 71%;
   position: relative;
   display: inline-block;
   white-space: nowrap;
   text-overflow: ellipsis;
}

.presetListContainerTitle {
   position: absolute;
   font-size: 10px;
   top: 0px;
   left: 0px;
   opacity: 0.4;
}

#presetList {
   width: 324px;
   background: rgb(86, 83, 83);
   position: fixed;
   border: 2px solid rgba(31, 60, 69, 0.38);
   opacity: 1;
   z-index: 101;
   left: 8%;
   color: lightgray;
   display: none;
   bottom: 100px;
}

#page[data-recordingbar="show"] #presetList {
   bottom: 500px;
}

.presetListItem {
   text-align: left;
   padding-left: 20px;
   padding-right: 11px;
   background: rgb(18, 34, 64);
   border-bottom: 1px dashed rgba(164, 164, 164, 0.53);
   cursor: pointer;
   transition: background 0.5s ease 0s;
   position: relative;
   height: 50px;
   line-height: 49px;
   width: 100%;
}

@media only screen and (max-height: 700px) {

   body.touch_landscape .sharingTextArea {
      padding: 2px;
      font-size: 13px;
      height: 59px;
      line-height: 20px;
      padding-left: 6px;
      padding-top: 6px;
      margin-bottom: 4px;
   }

   body.touch_landscape #sharingAdjectivesDropdown,
   body.touch_landscape #sharingStartDropdown,
   body.touch_landscape #sharingDescriptionDropdown {
      height: 30px;
      font-size: 13px;
   }

   body.touch_landscape #page #sharingSection {
      top: 8px;
      /* border: 1px solid cyan; */
      width: 96%;
      left: 3%;
   }

   body.touch_landscape #sharingSectionTitle {
      padding: 2px 0px;
      font-size: 14px;
   }

   body.touch_landscape .nameNowOrLater,
   body.touch_landscape .sharingDescriptionArr,
   body.touch_landscape .sharingStartSection,
   body.touch_landscape .sharingAdjectivesSection {
      width: 49.75%;
      display: inline-block;
      vertical-align: top;
      padding: 3px;
      margin-bottom: 5px;
   }

   body.touch_landscape .sharingDescriptionArr,
   body.touch_landscape .sharingStartSection {
      /*margin-right:1%;*/
   }

   body.touch_landscape .oneShareSectionTitle {
      width: 126px;
      overflow: hidden;
      font-size: 14px;
      height: 30px;
      line-height: 30px;
   }

   body.touch_landscape .oneSharingCheckbox {
      padding: 2px;
      font-size: 12px;
   }

   body.touch_landscape #sharingNameCheckboxes,
   body.touch_landscape #sharingFeaturesCheckboxes,
   body.touch_landscape #sharingAdjectivesCheckboxes {
      padding: 2px;
   }

   body.touch_landscape #sharingNameCheckboxes {
      width: 272px;
      height: 30px;
      padding: 0;
   }

   body.touch_landscape .oneSharingCheckbox[data-type="features"] {
      width: 48%;
   }

   body.touch_landscape .sharingCopyButton,
   body.touch_landscape .sharingRandomizebutton {
      margin: 3px;
      padding: 3px;
      font-size: 13px;
   }

   body.touch_landscape .sharingSectionCloseButton {
      top: 7px;
   }


   #presetList {
      border-width: 1px;
   }

   .presetListItem {
      line-height: 28px;
      height: 28px;
      font-size: 9px;
   }

   .presetListInitialPresetButtonContainer {
      height: 18px;
      line-height: 22px;
      vertical-align: top;
      top: 0px;
   }

   .theInitialPresetActualButton {
      top: 7px;
   }

   #presetList .keyboardKey {
      height: 15px;
      overflow: hidden;
      line-height: 15px;
      margin-top: 5px;
      font-size: 11px;
   }
}

@media only screen and (max-height: 500px) {
   #userShortcutContainer {
      height: calc(100% - 109px);
   }

   .entireUserColors .basicColorInnerTitle {
      height: 20px;
      line-height: 20px;
      font-size: 11px;
   }

   .snippetManagerSelection {
      padding: 5px;
   }

   .allUserShortcutTitle {
      margin-top: 5px;
   }

   #presetList {
      border-width: 1px;
      bottom: 13px;
      z-index: 3000;
   }

   .presetListItem {
      line-height: 28px;
      height: 28px;
      font-size: 9px;
   }

   .presetListInitialPresetButtonContainer {
      height: 18px;
      line-height: 22px;
      vertical-align: top;
      top: 0px;
   }

   .theInitialPresetActualButton {
      top: 7px;
   }

   #presetList .keyboardKey {
      height: 15px;
      overflow: hidden;
      line-height: 15px;
      margin-top: 5px;
      font-size: 11px;
   }
}

.presetListItemActive {
   background: rgb(37, 46, 57);
}

.presetListItem:last-child,
.presetListItemD {
   border-bottom: none;
}

.presetListItem:hover {
   background: rgb(48, 66, 102);
}

.presetListItemLoad {
   cursor: pointer;
   opacity: 0.7;
   display: inline-block;
   transition: opacity 0.3s ease 0s;
}

.presetListItemLoad:hover {
   opacity: 1;
}

#page .chainGraphicLayoutSection .languageAccentBox input,
#page .chainGraphicLayoutSection .languageAccentBox select {
   background: rgb(8, 10, 24);
   color: lightgray;
   border: 1px solid black;
}

#page .chainGraphicLayoutSection .languageAccentBox select {
   height: 27px;
   padding-top: 3px;
}

#presetListCopy {
   position: fixed;
   top: 0px;
   z-index: 111;
   padding: 30px;
   background: rgb(37, 66, 101);
   display: none;
   color: white;
   width: 100%;
}

.listCopyItem {
   border-top: 1px solid rgb(118, 116, 116);
   border-right: 1px solid rgb(118, 116, 116);
   border-left: 1px solid rgb(118, 116, 116);
   border-image: initial;
   border-bottom: none;
   padding: 6px;
   display: inline-block;
   background: rgb(37, 46, 66);
   color: silver;
   text-align: center;
   width: 8%;
}

.listCopyItem:last-child {
   border-bottom: 1px solid rgb(118, 116, 116);
}

.listCopyItem2 {
   display: block;
   width: 100%;
   background: rgb(20, 27, 40);
   border-top: 1px solid rgba(118, 116, 116, 0.43);
   border-right: 1px solid rgba(118, 116, 116, 0.43);
   border-left: 1px solid rgba(118, 116, 116, 0.43);
   border-image: initial;
   border-bottom: none;
   color: rgb(161, 162, 166);
   transition: background 0.3s ease 0s;
   cursor: pointer;
}

.listCopyItem2:hover {
   background: rgb(6, 11, 21);
}

#page .listCopyItem2Active {
   background: rgb(41, 13, 13);
   cursor: default;
}

.listCopyItem2:last-child {
   border-bottom: 1px solid rgba(118, 116, 116, 0.43);
}

#listCopy2 {
   z-index: 3333;
   position: absolute;
   width: 313px;
   left: 62%;
   top: 44%;
   border: 1px solid black;
   background: black;
   padding: 0px 10px 10px;
   display: none;
}

#listCopy2 .hide_parent_button {
   top: 1px;
   background: unset;
   color: rgb(134, 130, 130);
}

.listCopy2Title {
   background: black;
   color: rgb(191, 190, 190);
   text-align: center;
   height: 28px;
   line-height: 28px;
}

.hide_parent_button {
   position: absolute;
   right: 5px;
   top: 11px;
   font-size: 1.2em;
   color: rgb(152, 158, 158);
   padding: 3px 8px;
   cursor: pointer !important;
}

#newButtonsArea .hide_parent_button {
   right: 50px;
}

#newButtonsArea .cc_debug_title {
   right: 200px;
   opacity: 0.7;
}

#vueVarBox .hide_parent_button {
   top: 0px;
   font-size: 12px;
   margin: 0px;
   padding: 0px;
}

#languagesToUpdate .hide_parent_button {
   padding: 0px;
   top: 0px;
}

#quickShortcutSwitch .hide_parent_button {
   top: 1px;
   font-size: 0.95em;
   color: rgb(137, 144, 148);
}

#presetList .hide_parent_button {
   top: 2px;
   background: unset;
   color: rgb(101, 111, 113);
   font-size: 15px;
}

#presetList .commonCoverClass[data-type="presetList"] .hide_parent_button {
   position: absolute;
   right: 10px;
   top: 1px;
   padding: 0px;
}

#moveMenu .hide_parent_button {
   background: unset;
   right: 15px;
   top: 4px;
}

.p_input_title {
   width: 76px;
   display: inline-block;
   text-align: center;
   margin-bottom: 13px;
}

.pageLoadStatus2 input {
   background: black;
   border: 1px solid gray;
   color: gray;
   padding: 3px;
}

#blackPageBackground {
   background: black;
   position: fixed;
   top: 0px;
   height: 100px;
   width: 100%;
}

#modifyBarAreasGUI,
#previewPageSettings {
   border: 1px solid rgb(0, 0, 0);
   width: 651px;
   background: rgb(29, 44, 78);
   text-align: center;
   max-height: 88%;
   overflow: hidden;
   padding-bottom: 48px;
   position: relative;
   height: 35%;
   min-height: 278px;
   max-width: 840px;
}

#modifyBarAreasGUI.presMode {
   height: 64% !important;
}

#previewPageSettings {
   width: 95%;
   height: 92%;
   max-height: unset;
}

#previewSettingsInformation {
   z-index: 9;
   position: fixed;
   background: rgb(37, 37, 78);
   left: 41%;
   width: 21%;
   padding: 18px 18px 40px;
   top: 53px;
   font-size: 16px;
   line-height: 31px;
   display: none;
}

.previewSettingsInfoDiv {
   background: black;
   margin: 6px 6px 12px;
   padding: 6px;
}

#modifyBarAreasGUI[data-oneshown="yes"] {
   height: 94%;
}

.barFilterSearchButton {
   display: inline-block;
   background: black;
   cursor: pointer;
   width: 28px;
   text-align: center;
   color: rgb(211, 211, 211);
}

.bottomButtonSelectNumber {
   display: inline-block;
   vertical-align: top;
   height: 32px;
   line-height: 32px;
   color: rgb(177, 211, 223);
   margin-right: 9px;
}

.modifyBottomButtonsTitle,
.previewPageSettingsTitle {
   background: black;
   color: lightgray;
   position: relative;
   text-align: center;
   height: 30px;
   line-height: 30px;
}

.modifyBottomButtonsTitle {
   line-height: 29px;
}

.allGUISections {
   overflow-y: auto;
   position: relative;
   border-bottom: 1px solid rgba(105, 105, 105, 0.26);
}

#allPreviewSettingSections {
   border: 1px solid rgb(0, 0, 0);
   background: rgba(1, 6, 38, 0.47);
   min-height: 80px;
   overflow: hidden auto;
   max-height: 90%;
}

#modifyBarAreasGUI[data-oneshown="yes"] .allGUISections {
   height: 95%;
}

#previewBarSettings,
#previewColorSettings,
#bottomPreviewColorSettings,
#previewBottomBarSettings {
   border: 1px solid rgb(0, 0, 0);
   min-height: 28px;
   margin-bottom: 40px;
   width: 93%;
}

.closeBarSettingsGUI,
.closePreviewSettings {
   position: absolute;
   right: 14px;
   cursor: pointer;
   top: 2px;
   color: rgb(167, 166, 166);
}

.anySearchArea,
.countTopAndSubmenuButtons {
   background: rgb(37, 39, 74);
   position: absolute;
   bottom: 0px;
   right: 0px;
   color: rgb(165, 144, 176);
   padding: 9px;
   border: 2px solid rgba(0, 255, 255, 0.44);
}

.countTopAndSubmenuButtons {
   right: 200px;
   cursor: pointer;
   background: rgb(2, 44, 21);
   color: white;
   opacity: 0.1;
}

.makeAllBoth {
   right: 480px;
   background: blue;
}

.someHashTitle {
   color: dimgray;
   cursor: default;
   position: absolute;
   top: 0px;
   right: 30px;
   left: 0px;
   text-align: left;
   font-size: 10px;
}

.saveBottomButtonLayout {
   border: 1px solid rgba(56, 55, 55, 0.61);
   background: rgb(25, 30, 74);
   padding: 6px;
   display: inline-block;
   margin: 9px;
   cursor: pointer;
}

.saveBottomButtonLayout.revertChanges {
   background: rgb(62, 47, 57);
}

.saveBottomButtonLayout.filter {
   background: rgb(46, 47, 76);
}

.saveBottomButtonLayout.getCurrentStatus {
   background: rgb(117, 76, 76);
}

#sampleNewBottomBar {
   border: 1px solid black;
   margin: 8px;
   min-height: 50px;
   background: rgb(1, 2, 16);
   position: relative;
}

#inactiveBottomBarContainer {
   border: 3px solid blue;
   margin: 8px;
   min-height: 50px;
   background: rgb(117, 103, 103);
   position: relative;
   max-height: 80px;
   overflow-y: auto;
   max-width: 461px;
   display: none;
}

#previewPage #inactiveBottomBarContainer,
#inactiveBottomBarContainer.pageChild {
   min-width: unset;
   min-height: unset;
   width: 93px;
   height: 120px;
   max-height: unset;
   max-width: unset;
   text-align: left;
   padding-top: 30px;
   background: rgb(76, 93, 104);
   display: none;
}

#inactiveBottomBarContainer .divButton {
   display: none;
}

#inactiveBottomBarContainer.pageChild {
   position: fixed;
   bottom: 0px;
   right: 0px;
   z-index: 150000;
   width: 35%;
   background: black;
}

#inactiveBottomBarContainer.pageChild .bottomBarButton {
   background: rgb(43, 59, 131);
   min-width: 200px;
}

.bottomBarButton[data-thisbutton="windowMeasurement"] {
   padding-top: 0px;
}

#page #inactiveBottomBarContainer .bottomBarButton.buttonComplete {
   background: rgb(5, 48, 5);
}

.bottomButtonSelectLine,
.bar_settings_area {
   border: 1px solid rgb(57, 60, 57);
   margin: 16px;
   padding-left: 8px;
   background: rgb(8, 16, 45);
   width: 596px;
   text-align: left;
}

.bottomButtonSelectLine {
   padding: 8px 8px 6px;
   background: rgb(22, 34, 55);
   border: 1px solid black;
}

#buttonLayoutFilter input,
.buttonLayoutFilterButton,
.buttonLayoutFilterTitle,
.buttonLayoutFilterList {
   background: rgb(10, 65, 80);
   border: 1px solid cyan;
   width: 100px;
   display: inline-block;
   color: white;
   height: 30px;
   line-height: 30px;
   vertical-align: top;
}

.buttonLayoutFilterList {
   width: calc(100% - 200px);
   background: rgb(21, 21, 39);
   border: 1px solid black;
   display: none;
   padding-left: 10px;
   color: lightblue;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
   font-size: 11.6px;
}

#buttonFilterOverflow .buttonLayoutFilterList {
   display: block;
   width: unset;
}

#buttonLayoutFilter input {
   background: rgb(44, 41, 41);
   border: 1px solid black;
   color: lightgray;
}

.buttonLayoutFilterTitle {
   width: 50px;
   text-align: center;
   border: none;
   background: none;
   color: lightblue;
}

.buttonLayoutFilterButton {
   background: rgb(6, 6, 36);
   display: inline-block;
   width: 30px;
   text-align: center;
   border: none;
   cursor: pointer;
}

#buttonLayoutFilter {
   display: none;
}

.bottomButtonSelectLine {
   width: 426px;
}

#buttonFilterOverflow {
   display: none;
}

.bar_settings_area {
   background: rgb(46, 57, 83);
   padding: 0px;
   border: 1px solid rgb(0, 0, 0);
}

#previewPage .bar_settings_area {
   background: rgb(4, 7, 16);
}

#newButtonsArea .saveButtonContainer {
   text-align: center;
}

#modifyBarAreasGUI .cc_select,
#previewSettingsContainer .bottomButtonSelectLine .cc_select {
   background: rgb(61, 77, 105);
   width: 279px;
   border: 1px solid black;
   vertical-align: top;
   padding-left: 8px;
   color: rgb(185, 191, 193);
}

#modifyBarAreasGUI .bottomButtonSelectLine .cc_select,
#previewSettingsContainer .bottomButtonSelectLine .cc_select {
   background: black;
}

#newButtonsArea,
#previewSettingsContainer {
   z-index: 110;
   background: rgba(3, 3, 3, 0.9);
   height: calc(97% - 100px);
   color: white;
   width: 100%;
   font-size: 15px;
   position: fixed;
   padding: 14px 20px 50px;
   top: 100px;
   border: 2px solid rgb(0 0 0);
   overflow: hidden;
   display: none;
}

#page[data-width="showingConsoles"] #previewSettingsContainer {
   width: 60%;
}

#previewSettingsModifiedInformation {
   position: fixed;
   bottom: 70px;
   background: rgb(4, 4, 36);
   height: 67px;
   border: 2px solid rgb(56, 104, 133);
   left: 0px;
   z-index: 1000;
   width: 600px;
   display: none;
}

#codeCreate #previewSettingsModifiedInformation {
   background: rgb(15, 26, 55);
   padding-top: 30px;
}

.previewSettingsModifiedInfoSingle {
   background: rgb(11, 33, 8);
   border: 1px solid rgb(100, 97, 97);
   display: inline-block;
   margin-right: 10px;
   cursor: pointer;
   margin-bottom: 5px;
   padding: 3px;
   width: 260px;
}

.previewSettingsModifiedInfoSingle[data-modified="yes"] {
   background: rgb(46, 3, 3);
}

#previewSettingsContainer {
   display: none;
   top: 37px;
   left: 0px;
   width: 100%;
   height: calc(100% - 85px);
   padding-bottom: 0px;
   max-width: unset;
}

#page.twoRows #previewSettingsContainer {
   top: 72px;
   height: calc(100% - 137px);
}

#page[data-recordingbar="show"] #newButtonsArea {
   border: none;
}

#codeCreate.condensedView #newButtonsArea {
   top: 51px;
}

.bottomButtonsNumber {
   color: black;
   position: absolute;
   top: 4px;
   right: 1px;
   background: rgb(203, 195, 191);
   height: 20px;
   width: 20px;
   text-align: center;
   display: none;
}

.nameDisplayButtons {
   display: inline-block;
}

.bottomBarButton {
   display: inline-block;
   width: 300px;
   background: rgb(93, 93, 93);
   margin: 11px;
   cursor: pointer;
   padding: 5px;
   position: relative;
   color: rgb(210, 210, 210);
   vertical-align: top;
   height: 30px;
}

#previewPage .bottomBarButton {
   background: rgb(53, 53, 89);
   line-height: 30px;
   padding: 0px 8px 0px 22px;
   width: unset;
   margin-top: 0px;
}

#titleCard {
   height: 635px;
   width: 1170px;
}

.titleCardDup {
   height: 635px;
   width: 1170px;
   position: relative;
   background: black;
   margin-top: 5px;
}

.titleCardDup[data-groupname="titles"] .titleItemName {
   background: rgb(40, 55, 84);
   color: rgb(186, 206, 220);
}

.titleCardDup[data-groupname="titles"] .titleGroupName {
   color: rgb(163, 173, 191);
}

#titleCardOuter,
#titleClone {
   overflow: hidden;
   margin-bottom: 12px;
   margin-top: 61px;
}

#titleCardsContainer {
   position: relative;
   border: 1px solid yellow;
   width: 1200px;
}

#page #imageCreationContainer #theGroupNames,
#page #imageCreationContainer #groupContents,
#page #imageCreationContainer #allGroups {
   width: 700px;
}

#imageCreationContainer #allGroups {
   right: 8px;
   left: unset;
}

#titleClone {
   border: 2px solid magenta;
}

#cc_bottom_bar .bottomBarButton {
   margin: 0px 6px 0px 0px;
   height: 22px;
   line-height: 22px;
   background: rgb(32, 53, 68);
   padding: 0px 8px 0px 16px;
   width: unset;
   font-size: 13px;
   overflow: hidden;
}

#previewPage #cssRulesetModule {
   top: 54px;
}


.bottomBarButton .buttonNumber {
   position: absolute;
   top: 0px;
   left: 0px;
}

.bottomBarButton[data-thisbutton="windowProportions"] {
   white-space: nowrap;
}

#codeCreate.condensedView .bottomBarButton[data-thisbutton="condensedToggle"] {
   background: rgb(19, 55, 86);
   border: 1px solid rgba(75, 75, 75, 0.44);
}

.bottomBarButtonDraft {
   background: rgb(32, 14, 2);
}

.bottomBarButtonHalf {
   background: rgb(84, 37, 5);
}

.bottomBarButtonBetter {
   background: rgb(30, 88, 88);
}

.bottomBarButtonNinety {
   background: rgb(6, 15, 47);
   border: 1px solid rgba(29, 29, 29, 0.12);
}

.bottomBarButton.iconButton {
   width: 65px;
   margin-right: 245px;
   text-align: center;
}

#previewPage .bottomBarButton.iconButton {
   margin-right: 20px;
}

.languageSettingBottomButton {
   width: 119px;
   margin-right: 192px;
}

.bottomLanguageSwitchButton div {
   display: inline-block;
}

.topBarCover {
   position: absolute;
   top: 0px;
   left: 0px;
   width: 100%;
   height: 100%;
   background: rgb(89, 102, 111);
   opacity: 0.56;
   color: white;
   z-index: 25;
}

#moveMenu {
   background: rgb(18, 49, 67);
   border: 3px solid black;
   width: 273px;
   padding: 4px;
   font-size: 12px;
   vertical-align: top;
   position: absolute;
   overflow: hidden;
   bottom: 15px;
   left: 62%;
   z-index: 30;
   display: none;
}

.moveMenuTitle {
   background: black;
   border: 1px solid rgba(67, 67, 67, 0.58);
   text-align: center;
   height: 20px;
   line-height: 20px;
   color: white;
}

.itemBeingMoved {
   background: rgb(25, 33, 56);
   border-left: 1px solid rgba(83, 83, 83, 0.56);
   border-right: 1px solid rgba(83, 83, 83, 0.56);
   padding: 5px;
   cursor: default;
}

.moveMenuItem {
   background: rgb(54, 57, 69);
   border-top: 1px solid rgba(0, 0, 0, 0.48);
   border-right: 1px solid rgba(0, 0, 0, 0.48);
   border-left: 1px solid rgba(0, 0, 0, 0.48);
   border-image: initial;
   padding: 6px 6px 6px 15px;
   cursor: pointer;
   transition: background 0.3s ease 0s;
   border-bottom: none;
   font-size: 13px;
   color: lightgray;
}

.moveMenuItem:last-child {}

.moveMenuItem:hover {
   background: rgb(37, 37, 48);
}

.cc_section {
   background: black;
   padding: 7px;
   position: relative;
   margin-bottom: 7px;
}

.cc_section::after {
   content: "";
   position: absolute;
   right: 0px;
   font-size: 12px;
   opacity: 0.4;
}

#layoutOverlay>.hide_parent_button {
   background: unset;
   color: rgb(127, 133, 127);
   top: 5px;
   font-size: 1.3em;
   z-index: 150;
}

.moveHereRow {
   position: absolute;
   bottom: 4px;
   left: 36%;
   z-index: 47;
   text-align: center;
   background: rgb(45, 50, 63);
   color: rgb(208, 208, 208);
   display: inline;
   padding: 5px;
   border: 1px dashed rgba(151, 151, 151, 0.7);
   cursor: pointer;
   box-shadow: rgba(51, 51, 51, 0.6) 1px 1px;
}

.theMoveButton {
   background: black;
   color: rgb(123, 148, 147);
   padding: 9px 8px 6px;
   position: absolute;
   bottom: 0px;
   left: 0px;
   z-index: 20;
   border: 2px solid rgba(29, 97, 123, 0.47);
   cursor: pointer;
   font-size: 0.9em;
}

.editorContainer[data-width="smallWidth"] .theMoveButton,
.editorContainer[data-height="smallHeight"] .theMoveButton {
   background: rgb(3, 58, 66);
   padding: 2px;
   bottom: unset;
   top: 0px;
   font-size: 0.6em;
   color: rgb(179, 179, 179);
}

.editorContainer[data-width="smallWidth"] .sampleSectionImage .sampleEditorBoxes,
.editorContainer[data-width="smallWidth"] .sampleSectionImage .fa-cog,
.editorContainer[data-width="smallWidth"] .sampleShortcutLine {
   display: none;
}

#page .rotating-border {
   background-image: linear-gradient(90deg, silver 50%, transparent 50%), linear-gradient(90deg, silver 50%, transparent 50%), linear-gradient(0deg, silver 50%, transparent 50%), linear-gradient(0deg, silver 50%, transparent 50%);
   background-repeat: repeat-x, repeat-x, repeat-y, repeat-y;
   background-size: 15px 2px, 15px 2px, 2px 15px, 2px 15px;
   background-position: left top, right bottom, left bottom, right top;
   animation: 0.5s linear 0s infinite normal none running border-dance;
}

#page .theMoveButton.rotating-border {
   background-image: linear-gradient(90deg, rgb(29, 97, 123) 50%, transparent 50%), linear-gradient(90deg, rgb(29, 97, 123) 50%, transparent 50%), linear-gradient(0deg, rgb(29, 97, 123) 50%, transparent 50%), linear-gradient(0deg, rgb(29, 97, 123) 50%, transparent 50%);
   background-repeat: repeat-x, repeat-x, repeat-y, repeat-y;
   background-size: 15px 2px, 15px 2px, 2px 15px, 2px 15px;
   background-position: left top, right bottom, left bottom, right top;
   animation: 1.9s linear 0s infinite normal none running border-dance;
   border: 2px solid black;
}

@keyframes border-dance {
   0% {
      background-position: left top, right bottom, left bottom, right top;
   }

   100% {
      background-position: left 15px top, right 15px bottom, left bottom 15px, right top 15px;
   }
}

#infoBox4,
#infoBox5,
#specialLogBox {
   position: fixed;
   z-index: 21000;
   width: 810px;
   height: 800px;
   border: 3px solid rgb(7 7 7);
   top: 0px;
   left: 0px;
   background: black;
   color: white;
   overflow: hidden;
   display: none;
}

#specialLogBox {
   display: block;
   background: rgb(3 12 22);
   padding: 9px;
   top: 99px;
   width: 80%;
   height: 82%;
   left: 50px;
}

.jStartSort {
   background: rgb(8 18 47);
   color: rgb(218, 218, 202);
   padding: 5px;
   cursor: pointer;
}

#page[data-width="showingConsoles"] #specialLogBox {
   width: 57%;
}

.specialLogBoxHideOnly {
   position: absolute;

   right: 5px;
   cursor: pointer;
   font-size: 1.5em;
   color: lightgray;
}

.specialLogBoxTitle {
   background: rgb(19 41 74);
   height: 30px;
   text-align: center;
   font-size: 20px;
   color: lightblue;
}

#specialLogBox[data-showelapsed="yes"] #logBoxAJ,
#specialLogBox[data-showelapsed="yes"] #logBoxReconciliation {
   display: none;
}

#logBoxElapsed {
   display: none;
}

#specialLogBox[data-showElapsed="yes"] #logBoxElapsed {
   display: inline-block;
   /* overflow-y: auto; */
}

#logElapsedArea {
   overflow-y: auto;
   height: calc(100% - 30px);
   padding-right: 28px;
}

#logBoxElapsed,
#logBoxReconciliation,
#logBoxJStart,
#logBoxAJ {
   display: inline-block;
   height: 100%;
   border: 1px solid #46476b;
   width: 45%;
   margin-right: 18px;
   vertical-align: top;
   background: rgb(10 10 12);
}

#lbRecExplanationText,
#lbRecPageLoadText {
   background: #12173a;
   width: calc(100% - 145px);
   vertical-align: top;
   height: 150px;
   bordeR: 1px solid #69696942;
   color: lightblue;
}

.lbRecLine {
   border: 1px solid #527375;

   margin-bottom: 15px;
   font-size: 18px;
   color: lightblue;
   padding: 8px;
   padding-right: 0;
}

.lbHighlightButton,
.lbWhitelistButton {
   display: inline-block;
   background: darkblue;
   padding: 4px;
   border: 1px solid #add8e64a;
   cursor: pointer;
   opacity: .3;
   background: black;
}

.lbHighlightButton[data-active="yes"],
.lbWhitelistButton[data-active="yes"] {
   color: cyan;
   opacity: 1;
   background: darkblue;
}

.saveLogReconciliation,
.toggleWhitelistedItems {
   cursor: pointer;
   background: #6300809e;
   display: inline-block;
   padding: 4px;
   border: 1px solid #add8e64a;
}

.saveLogReconciliation {
   background: #063006;
   margin-left: 13px;
}

.logModifiedCountArea,
.logModifiedCount {
   display: inline-block;
   font-size: 14px;
}

.lbRecTitle {
   width: 113px;
   margin-right: 8px;
   display: inline-block;
   /* border: 1px solid green; */
}

.lbRecActualName {
   border: 1px solid #000000;
   display: inline-block;
   /* height: 24px; */
   width: calc(100% - 180px);
   vertical-align: top;
   background: #264557;
   min-height: 70px;
}

#logBoxAJ {
   width: 35%;
}

.jStartSorted {
   display: none;
   height: 500px;
   background: #19223c;
   overflow-y: auto;
   padding: 6px;
   bordeR: 2px solid #40857f;
   font-size: 12.9px;
}

.jStartCounterFrozen {
   display: none;
}

#specialLogBox[data-sort="new"] .jStartSort,
#specialLogBox[data-sort="new"] .sortLineFilters,
#specialLogBox[data-sort="new"] .sortLineNames,
#specialLogBox[data-sort="new"] .sortLineRestore,
#specialLogBox[data-sort="new"] .jStartCounterInner {
   display: none;
}

#specialLogBox[data-sort="new"] .jStartCounterFrozen {
   display: inline-block;
}

#specialLogBox[data-sort="new"] .jStartText {
   display: none;
}

#specialLogBox[data-sort="new"] .jStartSorted {
   display: block;
}

#specialLogBox[data-sort="original"] .logBoxAdditionalButton.organize,
#specialLogBox[data-sort="original"] .whitelistStatus {
   display: none;
}


.jStartCounterAfterWhitelist {
   display: none;
}

#specialLogBox[data-whitelisteditems="hidden"] .jStartCounterAfterWhitelist {
   display: inline-block;
}

#specialLogBox[data-whitelisteditems="hidden"] .jStartCounterFrozen {
   display: none;

}

#specialLogBox[data-sort="original"] .jStartCounterAfterWhitelist {
   display: none;
}

#specialLogBox[data-type="reconciliation"] #logBoxAJ {
   display: none;
}

.oneFuncListing {
   padding: 6px;
   margin: 4px;
   background: black;
   cursor: pointer;
   font-size: 15px;
   padding-left: 12px;
   color: lightgray;
   margin-bottom: 8px;
   border: 1px solid black;
   position: relative;
}

.oneFuncListing.highlightMe {
   background: #524612 !important;
   /* color:  yellow; */
}

.explanationBadge {
   position: absolute;
   top: 4px;
   right: 4px;
   height: 20px;
   width: 20px;
   background: purple;
   color: purple;
   overflow: hidden;
}

#specialLogBox[data-specificstate="whitelistOnly"] .highlightMe {
   background: #5b2f71 !important;
}

#specialLogBox[data-specificstate="none"] .highlightMe {
   background: #524612 !important;
}


.oneFuncListing[data-active="yes"] {
   border: 1px solid;
   color: #9fbbe1;
   /* padding-left: 50px; */
   font-weight: 600;
}

.oneFuncListing:nth-child(odd) {
   background: #171217c2;
}

.oneFuncListing:hover {
   color: #4a95ae;
}

#specialLogBox[data-type="ajax"] #logBoxReconciliation {
   display: none;
}

#logBoxJStart {
   width: 50%
}

#specialLogBox .jStartText,
#specialLogBox .oneAjaxText {
   height: 56%;
   overflow-y: auto;
   width: 100%;
   border: 3px solid rgb(19, 61, 83);
   display: inline-block;
}

.oneJstartLine {
   background: rgb(3, 7, 49);
   padding: 5px 0px;
}

.jCounterBox {
   background: black;
   display: inline-block;
   padding: 0px 8px;
   color: yellow;
}

.oneJStartLine[data-count="aboveThirty"] {
   border: 2px solid #26646480;
}

#page .oneJStartLine[data-veryhigh="over120"] .jStartCountClass {
   background: rgb(88, 15, 15);
   color: white;
   height: 40px;
   width: 70px;
}

.oneJStartLine[data-count="aboveFive"] .jStartCountClass {
   background: rgb(24, 25, 26);
   color: orange;
}

#page .oneJStartLine[data-count="aboveTen"] .jStartCountClass {
   background: rgb(40, 96, 135);
   color: white;
}

.oneJstartLine.oneJStartLine[data-count="aboveTwenty"] .jStartCountClass {
   background: rgb(117, 30, 130);
   color: white;
}

.oneJStartLine[data-count="aboveThirty"] .jStartCountClass {
   background: rgb(86, 75, 15);
   color: white;
}

.oneJstartLine:nth-child(2n+1) {
   background: rgb(46, 46, 86);
   color: lightblue;
}

.oneJStartLine,
.oneAjaxLine {
   background: rgb(10 15 32);
   font-size: 15px;
   line-height: 38px;
   color: #a2a1a1;
   position: relative;
   font-size: 16px;
}

.oneJStartLine.hasTimeStamp {
   font-size: 24px;
   border: 1px solid yellow;
   background: #722a2a;
   color: cyan;
   text-decoration: underline;
}


.restoreLastJStartHidden,
.restoreAllJStartHidden,
.logBoxAdditionalButton {
   background: #424264;
   padding: 6px;
   display: inline-block;
   cursor: pointer;
}

.oneJStartLine {
   cursor: pointer;
}

.oneJStartLine:nth-child(2n+1),
.oneAjaxLine:nth-child(2n+1) {
   background: rgb(9 9 10);
   color: rgb(133 167 179);
}

.jStartCountClass,
.ajaxCountClass {
   position: absolute;
   background: black;
   right: 0px;
   top: 0px;
   height: 20px;
   min-width: 20px;
   font-size: 14px;
   line-height: 20px;
   text-align: center;
}

[data-overtwenty="true"] {
   height: 23px;
   width: 49px;
   font-size: 18px;
   color: yellow;
}

.jStartEmpty,
.jStartCounter {
   cursor: pointer;
   font-size: 18px;
   margin-top: 12px;
   color: lightgray;
   background: rgb(49 42 51);
   text-align: center;
   min-width: 185px;
   display: inline-block;
}

.counterSortTitle {
   display: inline-block;
   width: 120px;
}

.jStartCounterSortLine {
   margin-bottom: 10px;
   background: rgb(12 40 42 / 22%);
   margin-top: 10px;
   color: lightgray;
}

.whitelistStatus {
   font-size: 16px;
   padding: 13px;
   color: yellow;
}

.whitelistStatusActual {

   display: inline-block;
}

#specialLogBox input {
   height: 30px;
   max-width: 42px;
   background: rgb(39 51 61);
   border: none;
   color: white;
}

.jStartNumberFilterButton {
   padding: 4px 15px;
   display: inline-block;
   cursor: pointer;
   background: rgb(49 42 51);
   margin-left: 30px;
}

.jStartCounter {
   background: none;
}

.jStartCounterInner {
   display: inline-block;
}

#i4Text>div {
   background: rgb(41, 41, 45);
   padding: 8px 8px 8px 20px;
}

#i4Text>div:nth-child(2n+1) {
   background: rgb(19, 21, 23);
   color: rgb(200, 240, 249);
   border: 1px solid rgba(255, 255, 255, 0.22);
}

#infoBox4 {
   font-size: 14px;
   padding: 49px 8px 8px;
   z-index: 21001;
   width: 461px;
   display: none;
   height: 58%;
   top: 100px;
   bottom: 35px;
}

.page-id-26 #infoBox4 {
   right: 400px;
   left: unset;
   border: 4px solid red;
   top: 264px;
   width: 51%;
   height: 40%;
}

#infoBox4.infobox4Middle {
   left: 39%;
}

#i4Text {
   border: 3px solid gray;
   height: 90%;
   overflow-y: scroll;
}

#infoBox5 {}

#infoBox5 {
   left: 50px;
   background: rgb(10, 23, 32);
   width: 454px;
   border: 3px solid rgb(76, 76, 76);
   overflow: hidden auto;
   height: 60%;
   top: 34%;
   padding: 38px 15px 28px;
   font-size: 12px;
   display: none;
}

#infoBox5 .variableContainer {
   display: none;
}

.infobox5Left {
   left: 50px !important;
}

.infobox5Middle {
   left: 34% !important;
}

#infoBox5 #i5Text {
   overflow-y: auto;
   height: 90%;
}

#infoBox5 #i5Text>div {
   background: rgb(21, 24, 39);
   color: white;
   padding: 6px;
   border-left: 1px solid rgba(255, 255, 255, 0.22);
   border-right: 1px solid rgba(255, 255, 255, 0.22);
}

#infoBox5 #i5Text>div:nth-child(2n+1) {
   background: rgb(41, 48, 56);
   color: rgb(203, 252, 254);
   border: 1px solid rgba(255, 255, 255, 0.22);
}

#infoBox5 #i5Text>div:last-child {
   border-bottom: 1px solid rgba(255, 255, 255, 0.22);
}

#infoBox5 .hide_parent_button {
   font-size: 1.4em;
   top: 2px;
   background: unset !important;
   border: none !important;
}

#infoBox5.smallAndHigh {
   top: 0px;
   border: 3px solid gray;
   height: 300px;
}

#toggleRightOptions {
   display: none;
}

@media only screen and (min-width: 1000px) {
   #rightOptions {
      display: block !important;
   }
}

.page-id-1320 #mySideDiv,
.page-id-1436 #mySideDiv {
   left: 5px;
   right: unset;
   z-index: 11;
   top: 83%;
   overflow: hidden;
   max-width: 50px;
   min-width: 50px;
   display: none;
   width: 45px !important;
}

.page-id-1436 #outputConsoles {
   opacity: 0.9;
   z-index: 1;
}

#entire_outputs #gutterLoc3 {
   display: none;
}

#entire_outputs.fourMaximized #gutterLoc3 {
   display: block;
}

#entire_outputs.fourMaximized #gutterLoc2 {
   display: none;
}

.highlightButton {
   background: rgb(138, 39, 17);
}

.cancelAutoShow,
.emptyInfoText {
   position: absolute;
   top: 2px;
   color: white;
   left: 5px;
   cursor: pointer;
   font-size: 0.8em;
}

.emptyInfoText {
   right: 77px;
   left: unset;
   font-size: 15px;
}

#outputsContainer.horizontalSplit .aceEditor {
   height: 100% !important;
}

.infoDivButtonContainer {
   border: 1px solid black;
   position: absolute;
   bottom: 0px;
   background: rgb(0, 0, 0);
   padding: 3px;
}

.infoDivButton {
   background: rgb(61, 72, 93);
   position: relative;
   bottom: 0px;
   margin: 0px;
}

.infoDivPositionButton {
   background: rgb(25, 28, 37);
}

#language_admin_menu {
   position: fixed;
   top: -1px;
   right: 60px;
   background: rgb(9, 16, 16);
   height: 98px;
   width: 491px;
   color: white;
   z-index: 11111;
   padding-left: 20px;
   overflow: hidden;
   display: none;
}

.adminMenuIcon.adminSubmenuButton {
   position: absolute;
   bottom: 10px;
   font-size: 20px;
   cursor: pointer;
   left: 310px;
}

.languageAdminMenuHide {
   position: absolute;
   right: 9px;
   bottom: 9px;
   color: gray;
   cursor: pointer;
   font-size: 16px;
}

.languageAdminMenuHide i {
   cursor: pointer;
}

.activeFormattedName,
.activeActualName,
.activeActualStatus {
   display: inline-block;
   cursor: pointer;
   font-size: 10.5px;
}

.activeFormattedName {
   width: 92px;
   text-align: left;
   padding-left: 3px;
}

.activeActualName {
   width: 80px;
   text-align: center;
}

#language_admin_menu .hide_parent_button {
   bottom: 0px;
   top: unset;
}

#userDefaultBox {
   position: fixed;
   z-index: 11111;
   opacity: 1;
   background: rgb(66, 66, 87);
   top: 300px;
   right: 470px;
   border: 2px solid rgb(136, 105, 49);
   color: white;
   padding: 26px;
   width: 624px;
}

.userDefaultBoxRow {
   padding: 12px;
   border-bottom: 1px solid rgb(130, 128, 128);
   background: rgba(0, 0, 0, 0.42);
   color: rgb(226, 223, 223);
   font-size: 15px;
}

.boxRow2 {
   opacity: 0.07;
}

.boxRow2[data-active="true"] {
   opacity: 1;
}

#language_admin_menu .language_active_button {
   cursor: pointer;
   border: 1px dashed rgb(87, 86, 86);
   color: lightgray;
   width: 258px;
   height: 23px;
   overflow: hidden;
   line-height: 22px;
}

#language_admin_menu .language_active_button {
   border-bottom-width: 0px;
}

#language_admin_menu .language_active_button[data-number="languageFour"] {
   border-bottom-width: 1px;
}

#language_admin_menu .language_active_button[data-status="active"] {
   background: rgb(17, 31, 23);
}

#language_active_status .language_active_button[data-status="inactive"] {
   background: rgb(23, 15, 15);
}

.totalAndSplitterActive {
   position: absolute;
   right: 23px;
   font-size: 10.5px;
   color: inherit;
}

.active_languages_name_display {
   transition: opacity 0.9s ease 0s;
}

.active_languages_name_display.compiled {
   margin-top: 12px;
   opacity: 0.3;
   transition: opacity 0.3s ease 0s;
   cursor: pointer;
}

.active_languages_name_display.compiled:hover {
   opacity: 1;
}

#cc_languages_info,
#closed_cc_windows {
   background: rgb(17, 29, 41);
   position: fixed;
   top: 0px;
   z-index: 280;
   width: 746px;
   height: 96px;
   border: 2px solid rgb(72, 72, 72);
   color: rgb(202, 200, 200);
   padding-left: 8px;
   overflow: hidden;
   padding-right: 20px;
}

#closed_cc_windows {
   height: 300px;
}

#cc_languages_info>div {
   background: rgba(58, 108, 58, 0);
   width: 48%;
   display: inline-block;
   margin: 2px;
}

#cc_languages_info .hide_parent_button,
#cc_languages_info .cc_debug_title {
   top: unset;
   background: none !important;
   width: unset !important;
   bottom: 0px !important;
}

#closed_cc_windows {
   left: 0px;
   padding-top: 5px;
   display: none;
   z-index: 500000;
   overflow-y: scroll;
}

.closedWindowDiv {
   border: 1px solid black;
   width: 40%;
   text-align: center;
   background: rgb(94, 129, 141);
   color: rgb(225, 245, 242);
   display: inline-block;
   cursor: pointer;
   font-size: 11px;
}

.closed_cc_languages_info {
   background: rgba(44, 65, 8, 0.65);
}

#closed_cc_windows .hide_parent_button {
   background: none;
   position: absolute;
   right: 0px;
   width: unset;
   top: 7px;
   font-size: 1.2em;
   color: lightgray;
}

#closed_cc_windows .cc_debug_title {
   color: white;
}

#editorLanguagesOverlay {
   z-index: 200;
   width: 100%;
   height: 100%;
   position: absolute;
   left: 0px;
   top: 0px;
   background: rgba(29, 29, 29, 0.53);
   display: none;
}

.editorLayoutTitle {
   height: 33px;
   line-height: 33px;
   color: rgb(195, 195, 195);
   background: black;
   text-align: center;
   border-bottom: 1px solid rgb(117, 116, 116);
}

.layoutLineCover {
   color: rgba(65, 65, 65, 0.06);
   top: 0px;
   left: 0px;
   background: rgba(40, 43, 48, 0);
   width: 100%;
   height: 100%;
   position: absolute;
   display: none;
   z-index: 1;
}

.editorLayoutLine.inactive .layoutLineCover {
   display: block;
}

.editorLayoutLine {
   background: rgba(105, 105, 105, 0.38);
   color: rgb(218, 224, 226);
   border-top: 1px solid rgba(0, 0, 0, 0.83);
   border-image: initial;
   height: 34px;
   line-height: 34px;
   padding-left: 8px;
   border-bottom: none;
   position: relative;
   border-left: 2px solid black;
   overflow: hidden;
   border-right: 2px solid black;
   transition: color 0.2s ease 0s;
}

.editorLayoutLine.inactive {
   color: rgb(80, 83, 87);
}

.editorLayoutLine:first-child {
   border-top: 2px solid black;
}

.editorLayoutLine:last-child {
   border-bottom: 2px solid black;
}

#editorLanguagesLayout .hide_parent_button {
   top: 4px;
}

.hide_parent_button * {
   cursor: pointer !important;
}

.allLayoutLines {
   padding: 12px 16px;
}

.layoutLineTitle {
   display: inline-block;
   width: 111px;
   vertical-align: top;
}

.theProportionSection {
   background: rgb(39, 42, 51);
   display: inline-block;
   vertical-align: top;
   padding-right: 7px;
   color: inherit;
}

.theProportionSection input {
   background: rgb(39, 42, 51);
   border: 1px solid rgba(0, 0, 0, 0.35);
   width: 34px;
   text-align: center;
   color: inherit;
}

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

.theProportionSection input[type="number"] {}

.proportionPercentSign {
   position: relative;
   top: 2px;
   display: inline-block;
}

#showEditorProportions {
   bottom: 3px;
   right: 50px;
   background: rgb(15, 15, 26);
   color: rgb(179, 177, 177);
   padding: 3px 20px;
   position: absolute;
   z-index: 10;
   border: 2px solid rgb(80, 79, 98);
   opacity: 0.4;
   height: 32px;
   overflow: hidden;
}

.moreLayoutAdminInfo,
.presetStatusContainer,
#showEditorProportions {
   display: none;
}

#layoutOverlay[data-admininfo="off"] #showEditorProportions,
#layoutOverlay[data-admininfo="off"] .presetStatusContainer,
#layoutOverlay[data-admininfo="off"] .layoutEditorTitle,
#layoutOverlay[data-admininfo="off"] .moreLayoutAdminInfo {
   display: none;
}

.showEditorOptions {
   cursor: pointer;
   position: absolute;
   top: 1px;
   right: 2px;
   font-size: 12px;
   background: rgba(128, 128, 128, 0.19);
   padding: 1px;
   color: rgb(163, 191, 215);
}

.suspendAutoAdjust {
   background: rgba(45, 45, 47, 0.61);
   border: 2px solid rgb(5, 4, 4);
   padding: 4px;
   position: relative;
   margin-top: 5px;
   color: rgb(199, 199, 199);
}

.suspendAutoAdjust .showTotal {
   width: 78px;
   display: inline-block;
}

.autoAdjustMessage {
   text-align: center;
   font-size: 0.9em;
   margin-top: 3px;
   opacity: 0;
   transition: opacity 0.2s ease 0s;
}

.autoAdjustMessage[data-closeattempt="true"] {
   opacity: 0.68;
}

.suspendAutoAdjust .resetAdjustments {
   display: inline-block;
   font-size: 0.8em;
   margin-left: 2px;
   cursor: pointer;
   color: rgb(196, 196, 196);
}

.resetAdjustments i {
   cursor: pointer;
}

.suspendAutoAdjustmentButton {
   background: rgba(13, 65, 25, 0.34);
   display: inline-block;
   cursor: pointer;
   padding: 4px;
   color: lightgray;
   top: 1px;
   width: 92px;
   text-align: center;
}

.suspendAutoAdjustmentButton[data-autoadjust="true"] {
   background: rgb(45, 18, 23);
}

.showAdjustmentTotal {
   display: inline-block;
   width: 34%;
   color: rgb(202, 209, 202);
}

.showAdjustmentTotal.invalid {
   color: rgb(172, 172, 172);
   background: rgb(58, 27, 30);
}

.autoAdjustmentTitle {
   display: inline-block;
   margin-right: 0%;
   width: 47%;
}

.languageSwitchHelpButton {
   color: rgb(160, 160, 186);
}

.settingsFilterButtons {
   background: rgb(7, 63, 88);
   color: white;
}

.cc_filter_button {
   background: rgb(62, 59, 78);
   display: inline-block;
   margin-left: 6px;
   width: 15%;
   z-index: 1;
   text-align: center;
   color: lightgray;
   height: 20px;
   line-height: 20px;
   font-size: 12px;
   border: 1px solid rgb(0, 0, 0);
   cursor: pointer;
   position: relative;
   transition: all 0.2s ease 0s;
   white-space: nowrap;
   overflow: hidden;
}

#userSettingsContainer .cc_filter_button {
   width: 17%;
   overflow: hidden;
}

.cc_filter_button * {
   cursor: pointer;
}

.menuAbbreviatedName {
   display: none;
}

#keyboard_shortcuts .cc_filter_button {
   width: 12%;
}

.cc_filter_button:hover {
   background: rgb(96, 94, 105);
}

.activeSettingsButton,
.activeSettingsButton:hover {
   background: rgb(77, 91, 117);
   color: rgb(214, 214, 214);
}

.cc_filter_title {
   position: absolute;
   left: 11px;
   color: lightgray;
}

.cc_filter_buttons {
   height: 36px;
   padding: 7px 0px;
   text-align: center;
   background: rgb(26, 26, 39);
   border-top: 1px solid rgb(46, 46, 46);
   border-bottom: 1px solid rgb(46, 46, 46);
   border-image: initial;
   border-left: none;
   border-right: none;
   position: relative;
}

#kb_print .cc_filter_buttons {
   border-top: none;
   border-bottom: 1px solid rgba(105, 105, 105, 0.29);
}

.settingsFilterTitle {
   position: absolute;
   background: rgba(28, 30, 31, 0.95);
   left: 80px;
   opacity: 1;
   z-index: 0;
   top: 101px;
   padding: 10px;
   color: lightgray;
}

#mainSettingsSection {
   height: 93%;
   overflow-y: auto;
}

.allPreferenceLines {
   margin-left: 1%;
   width: 98%;
   /* border: 1px solid rgb(42, 42, 42); */
   overflow: hidden;
   background: rgb(8, 4, 23);
   position: relative;
}

.allPreferenceLines[data-hidingmenuitems="off"] .preferenceLineHidden {
   padding: 0px;
   height: 0px;
   overflow: hidden;
   margin: 0px;
   border: none;
}

.cleanMenu[data-hidingmenuitems="off"] .preferenceLineHidden {
   overflow: hidden;
   padding: 0px;
   border: none;
   background: green;
   height: 0px;
}

.keyHintRow .keyGroup {
   position: absolute;
   right: 0px;
   color: white;
   font-size: 0.9em;
   top: 7px;
   opacity: 0.4;
}

#page[data-recordingbar="show"] .keyGroup {
   display: none;
}

.specialF9Explanation {
   z-index: 5;
   position: absolute;
   top: 0px;
   right: 0px;
   border: 1px solid rgb(50, 50, 50);
   padding: 5px 8px;
   background: black;
}

.keyHintRow .keyHelp {
   position: relative;
   left: 0px;
   opacity: 0.8;
   color: white;
   width: 15px;
   top: 1px;
   display: inline-block;
   vertical-align: top;
}

#kb_print .keyHelp {
   padding-top: 10px;
}

#closed_cc_windows span {
   position: absolute;
   bottom: 0px;
   color: lightgray;
}

.ace_scroller.ace_scroll-left {
   box-shadow: unset;
}

.altSessionButton {
   color: rgb(126, 143, 160);
   position: absolute;
   right: 0px;
   bottom: 0px;
   font-size: 14px;
   line-height: 14px;
   overflow: hidden;
   padding: 2px 7px;
   opacity: 1;
   background: none;
   z-index: 8;
   cursor: alias !important;
}

#page #cc_top_bar.condensedView .altSessionButton {
   width: 9px;
   text-align: center;
   font-size: 8px;
   overflow: hidden;
   padding: 0px;
   height: 9px;
   background: none;
   opacity: 0.4;
}

#page #cc_top_bar.condensedView .altSessionButton i {
   line-height: 9px;
}

.altSessionButton i {
   vertical-align: top;
}

.languageSelectionSection,
.languagesAreLocked {
   display: inline-block;
}

#page code {
   color: rgb(192, 190, 190);
}

#page .logoViewport {
   color: rgb(143, 148, 198);
   transition: opacity 0.2s ease 0s;
}

.setLanguagesButton {
   background: rgb(10, 25, 40);
   font-size: 8px;
}

.sessionsTemplatesMessages {
   color: rgb(197, 191, 191);
   text-align: center;
   opacity: 0.8;
   transition: opacity 0.4s ease 0s;
   border: 1px solid rgba(128, 128, 128, 0.24);
}

.divButton.createActive {
   background: seagreen;
}

.divButton.createInactive {
   background: gray;
}

.createActiveButton,
.saveTemplateButton,
.renameTemplate {
   position: relative;
}

.renameTemplate,
.saveTemplateButton {
   width: 60px;
   overflow: hidden;
   height: 30px;
}

.invalidateButton,
.invalidateButtonOverwrite,
.overwriteButton {
   background: rgb(44, 42, 42);
   position: absolute;
   opacity: 0.7;
   top: 0px;
   left: 0px;
   height: 100%;
   width: 100%;
   z-index: 5;
   display: none;
}

.invalidateButton {
   cursor: default !important;
}

.overwriteButton {
   background: rgba(0, 0, 255, 0);
}

.renameButtonText,
.saveTemplateText,
.createButtonText {
   background: rgb(10, 25, 40);
   width: 100%;
   position: absolute;
   left: 0px;
   height: 100%;
   top: 0px;
   line-height: 30px;
   border: 1px solid black;
}

#allTemplates .overwriteTemplateButton {
   opacity: 0.1;
   position: absolute;
   right: 8px;
   background: rgba(7, 7, 30, 0.58);
   color: rgb(183, 183, 183);
   transition: opacity 0.3s ease 0s;
   margin: 0px;
   font-size: 0.9em;
}

.cc_session_info {
   position: relative;
   white-space: nowrap;
}

#export_editor {
   position: fixed;
   z-index: 3333;
   top: 100px;
   background: blue;
   height: 300px;
   width: 800px;
   left: -3000px;
}

#templatesAndSessions .createCancelRow .cancelButton {
   background: rgb(38, 41, 53);
   border: 1px solid black;
}

#showLanguageSettings {
   position: absolute;
   width: 450px;
   min-height: 400px;
   color: rgb(212, 211, 211);
   background: black;
   z-index: 30;
   top: 100px;
   left: 18px;
   border: 2px solid gray;
   padding: 5px;
}

#showLanguagesMessages {
   border: 1px solid gray;
   min-height: 90px;
   background: rgb(23, 27, 33);
}

#codeCreate .uniqueLanguagesDebug {
   background: rgb(23, 23, 23);
   position: absolute;
   left: 4px;
   top: 8px;
   width: unset !important;
   padding: 4px !important;
}

.selectShortcutGroups {
   position: relative;
   height: 36px;
   line-height: 36px;
   padding-right: 60px;
   background: rgb(20, 28, 56);
}

.selectShortcutGroupsText {
   display: inline-block;
   color: lightgray;
   margin-right: 3px;
}

.selectShortcutGroupsButtonContainer {
   position: absolute;
   background: rgba(83, 83, 83, 0);
   right: 7px;
   top: 0px;
}

.selectShortcutGroupsButton {
   position: relative;
   display: inline-block;
   border: 1px solid rgba(15, 15, 15, 0.31);
   margin-left: 5px;
   background: rgba(69, 55, 81, 0.79);
   text-align: center;
   width: 70px;
   font-size: 0.8em;
   height: 20px;
   line-height: 20px;
   color: lightgray;
}

.shortcutGroupButtonContainer {
   display: inline-block;
   width: 48%;
}

#page .hiddenAndShownSections::-webkit-scrollbar {
   width: 9px;
}

#page .hiddenAndShownSections::-webkit-scrollbar-track {
   background: rgb(4, 4, 4);
}

#page .hiddenAndShownSections::-webkit-scrollbar-thumb {
   background: rgb(99, 111, 128);
   border-radius: 3px;
   border: 1px solid black;
}

.sessionsContainerHeading::-webkit-scrollbar-thumb {
   background: black;
   border: 1px solid black;
}

#sideAceContainer {
   height: 600px;
   width: 1200px;
   background: rgb(0, 0, 0);
   position: fixed;
   top: 244px;
   z-index: 50;
   padding: 22px;
   color: lightgray;
   left: 0px;
}

.max14 {
   color: rgb(162, 162, 162);
}

#noSC {
   opacity: 0.2;
   transition: opacity 0.8s ease 0s;
   min-height: 22px;
}

#sideAce {
   width: 101%;
   height: 90%;
   position: relative;
}

#inactiveContainer #overlaySection {
   display: none;
}

.languageOptionsMessage {
   color: rgb(184, 184, 184);
   opacity: 0.2;
   transition: opacity 0.4s ease 0s;
   padding: 0px 12px;
   min-height: 22px;
}

.highlightOnlyLanguage {
   background: rgb(22, 24, 29);
   padding: 6px;
   color: lightgray;
   border: 1px solid rgb(95, 95, 95);
}

#page .site-header {
   display: none;
}

.variableLockedExplanationTitle {
   font-size: 1.2em;
   font-weight: 550;
   margin: 5px 0px;
   text-decoration: underline;
}

div[data-type="variableOrLockedSetting"] {
   font-size: 1.1em;
}

.textAlignCenter {
   text-align: center;
}

.opacity80 {
   opacity: 0.8;
}

.opacity30 {
   opacity: 0.3;
}

.showHiddenHelpMessagesButton {
   background: black;
   color: rgb(146, 176, 184);
   border: 1px solid rgb(43, 60, 85);
   padding: 3px 8px;
   width: 240px;
   text-align: center;
   cursor: pointer;
   vertical-align: top;
   margin: 0px auto;
}

.resetUserInfoPreferenceLine {
   padding: 9px 14px;
   text-align: center;
   height: 70px;
}

.shortcutSetMessage {
   color: rgb(186, 184, 184);
   opacity: 0;
   font-size: 0.85em;
   transition: opacity 0.4s ease 0s;
}

.hideShortcutSetMessage {
   cursor: pointer;
   display: inline-block;
   font-style: italic;
}

.variableContainer {
   background: rgba(53, 101, 119, 0.27);
   opacity: 0.3;
}

#showEditorProportions .hide_parent_button {
   top: 0px;
   font-size: 10px;
}

#showEditorProportions .cc_debug_title {
   font-size: 10px;
   opacity: 0.5;
}

.optionsWindowButtonSave,
.optionsWindowButtonCancel {
   padding: 4px;
   border: 1px solid rgb(31, 31, 31);
   color: rgb(216, 221, 221);
}

#page .optionsWindowButtonCancel {
   background: rgba(27, 14, 14, 0.85);
   margin-right: 40px;
}

#page .reseedSettings {
   background: rgb(99, 99, 160);
}

.reseedSettings {
   background: rgb(10, 64, 33);
}

#jsEmptyButton {
   position: absolute;
   top: 0px;
   font-size: 11px;
   cursor: pointer;
   opacity: 0.5;
   color: rgb(151, 186, 151);
}

#allTemplatesLoadButton {
   background: rgb(21, 21, 21);
   color: rgb(184, 184, 184);
   position: absolute;
   cursor: pointer;
   right: 13px;
   top: 2px;
   padding: 4px;
   border: 1px solid rgb(33, 33, 33);
   display: none;
}

#backupsContainer {
   background: navy;
   margin: 21px 0px;
   width: 75%;
}

.oneBackupsContainer {
   background: black;
   border: 1px solid lightgray;
   color: lightgray;
   padding: 12px;
   position: relative;
}

.backupLink {
   cursor: pointer;
}

.backupLink:hover {
   text-decoration: underline;
}

#noFocus {
   position: absolute;
   left: -99999px;
}

#languagesToUpdate,
#currentlySelectedLanguages {
   background: black;
   color: rgb(109, 234, 118);
   position: fixed;
   width: 30%;
   height: 49px;
   border: 1px solid rgb(58, 58, 58);
   bottom: 0px;
   text-align: left;
   left: 37px;
}

#currentlySelectedLanguages {
   left: 35%;
   width: 38%;
   height: 90px;
}

.languagesToUpdateContainer {
   position: relative;
   width: 100%;
   height: 100%;
   border: 1px solid red;
}

.completeLanguage.stayOpen {
   background: rgb(11, 72, 101);
}

#page[data-recordingbar="show"] .completeLanguage.stayOpen {
   display: none;
}

#editMenuOverlay {
   display: none;
}

#menuEditContainer {
   position: relative;
   top: 38px;
   left: 68px;
   height: 96%;
   width: 66%;
   background: rgb(43, 41, 50);
   overflow-y: scroll;
   display: none;
}

.editMenuOverlayTitle {
   background: black;
   position: absolute;
   line-height: 35px;
   height: 35px;
   padding: 0px 8px;
   font-size: 13px;
   color: rgba(211, 211, 211, 0.58);
}

.editMenuOverlayTitle i {
   color: rgb(148, 147, 147);
   cursor: pointer;
   margin-left: 15px;
   font-size: 15px;
}

.showMenuEditorButton {
   background: rgb(17, 52, 69);
}

.menuEditContainer {
   background: black;
   padding: 30px;
}

.menuEditContainerTitle {
   background: black;
   height: 28px;
   line-height: 28px;
   color: lightgray;
   margin-bottom: 8px;
   text-align: center;
   font-size: 13px;
}

#menuLabels {
   background: rgb(8, 8, 39);
   margin-left: 12px;
   width: 96%;
   position: relative;
   padding: 12px;
   overflow: auto;
   border: 2px solid rgb(3, 3, 3);
}

.menuLabelRow {
   margin-left: 15px;
   margin-bottom: 5px;
}

#menuLabels .menuLabelRowTitle {
   display: inline-block;
   border: 1px solid rgb(51, 51, 51);
   width: 67px;
   text-align: center;
   background: rgb(25, 23, 39);
   color: rgb(147, 144, 144);
   height: 35px;
   line-height: 35px;
   vertical-align: top;
}

.addMenuLabel,
#allowMenuDragging,
#loadMenuPositions {
   position: relative;
   display: inline-block;
   padding: 3px;
   background: black;
   border: 1px solid rgb(71, 71, 71);
   cursor: pointer;
   color: rgba(187, 182, 182, 0.73);
   width: 90px;
   text-align: center;
   margin-bottom: 8px;
   margin-left: 21px;
}

#loadMenuPositions {
   width: unset;
   display: none;
}

.menuLabelBlock {
   display: inline-block;
   width: 45%;
   border: 1px solid rgba(255, 255, 255, 0.36);
   float: left;
   padding-left: 8px;
   padding-bottom: 8px;
   background: rgba(71, 67, 67, 0.64);
   padding-top: 8px;
   margin: 4px;
}

.menuLabelBlock .menuLabelColor {
   width: 30px;
   font-size: 0px;
   border: none;
   height: 30px;
   margin: 0px 3px;
   cursor: pointer;
}

#page .menuLabelName,
#page .menuNiceName {
   background: black;
   color: rgb(123, 119, 119);
   border: 1px solid rgba(128, 128, 128, 0.38);
   width: 65%;
   height: 35px;
   line-height: 35px;
   padding: 0px 0px 5px 5px;
}

.menuLabelNumber {
   display: inline-block;
   color: rgb(182, 186, 186);
   height: 38px;
   line-height: 35px;
   font-size: 13px;
   position: absolute;
}

.removeMenuLabel {
   display: inline-block;
   color: rgb(141, 144, 149);
   padding: 0px 4px;
   font-size: 14px;
   cursor: pointer;
}

#menuContainers,
#showAllMenuItems {
   background: rgb(46, 56, 64);
   position: relative;
   height: 69%;
   width: 186px;
   display: inline-block;
   vertical-align: top;
   margin-left: 8px;
   margin-top: 7px;
   border: 2px solid black;
}

#menuContainers {
   background: rgb(17, 17, 27);
   margin-left: 12px;
   width: 76%;
   padding: 18px;
   min-height: 1096px;
}

.menuLabelContainer {
   background: rgb(24, 26, 31);
   display: inline-block;
   width: 24%;
   border: 1px solid rgb(60, 59, 59);
   text-align: center;
   position: relative;
   vertical-align: top;
   height: 90%;
}

.dragSection {
   background: rgb(24, 27, 31);
   height: calc(100% - 28px);
}

.dragSection div {
   border: 1px solid rgba(97, 90, 90, 0.32);
   background: rgb(8, 13, 30);
}

.preferenceRadioButtons {
   text-align: center;
   color: rgb(168, 168, 168);
   background: none;
   display: inline-block;
   vertical-align: top;
   font-size: 13px;
   padding: 0px 2px;
   height: 28px;
   line-height: 28px;
}

.preferenceRadioButtons2 {
   background: none;
}

.menuContainerTitle {
   background: black;
   border-bottom: 1px solid rgb(75, 75, 75);
   color: rgb(150, 150, 150);
   font-size: 15px;
   height: 28px;
   line-height: 28px;
   overflow: hidden;
}

#saveMenuPositions {
   width: 120px;
   cursor: pointer;
   display: inline-block;
   padding: 3px;
   background: rgb(21, 33, 60);
   color: rgb(139, 143, 143);
   margin-left: 12px;
   border: 1px solid rgb(62, 62, 62);
   margin-top: 15px;
   text-align: center;
}

.movableMenuItem {
   background: black;
   color: rgb(174, 172, 172);
   border: 1px solid rgb(99, 96, 96);
   padding: 4px 4px 4px 9px;
   font-size: 11px;
   white-space: nowrap;
   overflow: hidden;
}

#showAllMenuItems .movableMenuItem {
   margin-bottom: 3px;
}

#allMenuItemsContainer {
   height: 93%;
   overflow-y: scroll;
   width: 95%;
   margin-left: 2.5%;
}

.dragSectionLabel {
   position: absolute;
   bottom: 0px;
   opacity: 0.2;
   right: 0px;
   color: white;
   cursor: default;
}

.page-id-1584 #outputConsoles {
   left: unset !important;
   right: 0px !important;
   width: 440px !important;
}

.my-handle {
   cursor: -webkit-grabbing;
}

.menuDot {
   height: 15px;
   width: 15px;
   border: 1px solid black;
   border-radius: 50%;
   display: inline-block;
   position: absolute;
   right: 9px;
   top: 8px;
   font-size: 0px;
}

.displayNone {
   display: none;
}

.displayNoneImportant {
   display: none !important;
}

.preferenceRadioTitle,
.onePreferenceRadioButton {
   display: inline-block;
}

.editorThemeOptionLine .preferenceRadioButtons {
   margin-top: 3px;
   position: relative;
}

#previewPage .onePreferenceRadioButton {}

#page .halfHide {
   opacity: 0.4;
   width: 20px;
}

.dropdownCount {
   position: absolute;
   bottom: 0px;
   right: 0px;
   opacity: 0.4;
}

.hoverPreferenceContainer .preferenceLineVar,
.hoverPreferenceContainer .dropdownCount {
   display: none;
}

.hideFromMenuRow {
   position: absolute;
   top: 11px;
   right: 16px;
   height: 32px;
   width: 24%;
   background: rgb(32, 31, 36);
   color: rgb(173, 182, 187);
   text-align: center;
   opacity: 1;
   z-index: 30;
   cursor: pointer;
   border: 1px solid rgba(55, 55, 55, 0.81);
}

.hideFromMenuRow i {
   font-size: 17px;
}

.hideFromMenuCover {
   position: absolute;
   top: 0px;
   right: 0px;
   height: 100%;
   width: 100%;
   background: rgba(38, 36, 36, 0.68);
   z-index: 30;
}

.hideFromMenuClass {
   display: none;
}

#changedHideMenuItemsDiv {
   background: rgb(78, 19, 80);
   height: 75px;
   width: 55%;
   bottom: 0px;
   left: 200px;
   position: absolute;
   color: white;
   font-size: 15px;
   padding: 8px;
}

.preferenceLineHidden .hideFromMenuCover {
   background: rgba(2, 1, 1, 0.84);
}

.hideFromMenuButton {
   display: inline-block;
   font-size: 13px;
   height: 32px;
   line-height: 32px;
   margin-right: 8px;
}

.menuItemHiddenText {
   color: rgb(204, 201, 201);
   padding: 4px;
   position: absolute;
   text-align: center;
   width: 123%;
   bottom: 0px;
}

#userDisplay {
   background: rgb(18, 29, 53);
   color: rgb(250, 250, 250);
   position: fixed;
   z-index: 777777;
   right: 0px;
   bottom: 30px;
   padding: 0px;
   opacity: 0.05;
   font-size: 0.5em;
   cursor: pointer;
   display: none;
}

.switchActiveClose {
   color: rgb(168, 164, 164);
   position: absolute;
   right: 12px;
   top: 1px;
   cursor: pointer;
}

.resetAllShortcuts,
.resetAllSessions {
   background: rgb(36, 47, 60);
   color: rgb(175, 175, 175);
   padding: 9px;
   cursor: pointer;
   display: inline-block;
   width: 300px;
   margin: 5px;
}

#cc_error_page .resetAllSessions,
#cc_error_page .resetAllShortcuts {
   text-align: center;
   margin-bottom: 15px;
   padding: 2px;
   display: inline-block;
   width: 200px;
}

a.resetAllSessions {
   color: rgb(175, 175, 175);
}

#userResetSection {
   background: rgb(29, 40, 49);
   padding: 30px;
   position: relative;
   width: 60%;
   margin: 0px auto;
   color: rgb(198, 198, 198);
}

#userResetContainer {
   background: rgb(9, 21, 39);
   text-align: center;
   padding-top: 40px;
   padding-bottom: 40px;
   height: 100%;
}

#entire_cc_toggle,
#dbcToggle {
   background: rgb(45, 45, 47);
   color: white;
   position: fixed;
   top: 3px;
   right: 191px;
   padding: 4px;
   z-index: 1700;
   opacity: 0.2;
   cursor: pointer;
   transition: opacity 0.3s ease 0s;
}

.page-id-26 #entire_cc_toggle {
   opacity: 0.2;
   right: 280px;
   background: rgb(78, 58, 17);
   display: none;
}

#entire_cc_toggle:hover,
#dbcToggle:hover {
   opacity: 0.7;
}

#dbcToggle {
   right: 90px;
   background: rgb(8, 40, 3);
}

#dbcToggle[data-dbc="hide"] {
   background: rgb(69, 4, 4);
}

#cc_error_page {
   z-index: 20;
}

.page-id-26 #cc_error_page {
   position: fixed;
   z-index: 1;
}

#error_page_body {
   position: fixed;
   height: 100%;
   background: rgb(56, 55, 55);
   color: white;
   top: 92px;
   width: 100%;
   left: 0px;
   z-index: 20;
}

.toggleStreamsCSSButton.isEnabled {
   background: rgb(4, 40, 4);
}

.toggleStreamsCSSButton {
   background: rgba(102, 13, 13, 0.24);
}

.page-id-1408 #outputConsoles {
   display: none;
   left: 70% !important;
}

#outputConsoles,
#recordingLocationsMenu {
   position: fixed;
   left: unset;
   padding-bottom: 20px;
   background: rgb(38, 36, 46);
   width: 600px;
   height: 84%;
   z-index: 1100;
   right: 20px;
}

#recordingLocationsMenu {
   z-index: 1200;
   border: 2px solid rgb(0, 123, 255);
   right: unset;
   left: 330px;
   top: 50px;
   bottom: unset;
   background: rgb(24, 26, 28);
   color: white;
   height: unset;
   padding-bottom: 80px;
   display: none;
   padding-top: 46px;
}

.recordingLocationsMenuLabel {
   background: black;
   padding: 6px;
   position: absolute;
   top: 0px;
   right: 18px;
   color: lightgray;
}

.recordingLocationsMenuLine {
   background: rgb(43, 52, 70);
   border: 3px solid black;
   margin: 18px;
   padding: 8px;
}

.recordingLocationsMenuLine.recordingOneInputRowHeading {
   background: black;
}

.recordingLocationsMenuTitle {
   display: inline-block;
   border: 1px solid rgba(21, 21, 21, 0);
   width: 150px;
   text-align: center;
   background: rgb(0, 0, 0);
}

.recordingLocationsMenuTitle,
#recordingLocationsMenu input,
#page #recordingLocationsMenu select {
   height: 30px;
   line-height: 30px;
   font-size: 13px;
}

#recordingLocationsMenu input,
#page #recordingLocationsMenu select {
   background: rgb(11, 23, 41);
   color: lightgray;
   padding: 4px;
   width: 100px;
   margin-left: 18px;
   border: 1px solid black;
   line-height: 25px;
   font-size: 13px;
   vertical-align: top;
}

#recordingLocationsMenu input[type="number"] {
   width: 60px;
}

.recordingBoxOneCoordinateTitle {
   display: inline-block;
}

#page #recordingSlotName {
   width: 300px;
}

#page #recordingLocationsMenu select {
   width: 300px;
   line-height: 4px;
   padding: 0px;
}

.recordingLocationsMenuOneButton {
   background: rgb(4, 14, 35);
   padding: 6px;
   cursor: pointer;
   display: inline-block;
}

.page-id-26 #outputConsoles {
   overflow: hidden;
   left: 68% !important;
   width: 31% !important;
   height: 80% !important;
   top: 90px !important;
}

#page[data-recordingbar="show"] #outputConsoles {
   width: 31% !important;
   left: 68% !important;
}

#page[data-width="showingConsoles"][data-recordingbar="show"] #outputConsoles {
   top: 0px !important;
   height: 65% !important;
}

.PHPResponse,
#jsiContainer {
   padding: 30px 8px 15px 15px;
   border: 1px solid rgb(56, 55, 55);
   background: black;
   color: rgb(37, 199, 37);
   position: relative;
   height: 100%;
}

.jsiHeading {
   opacity: 0.7;
   position: absolute;
   top: 0px;
   right: 0px;
   color: rgb(121, 197, 139);
   background: rgb(58, 58, 58);
   padding: 4px;
   cursor: pointer;
}

#multipleLanguageButton {
   position: absolute;
   color: lightgray;
   top: 0px;
   font-size: 10px;
   right: 75px;
   cursor: pointer;
}

.debug_colored {
   position: fixed;
   top: 0px;
   z-index: 1500;
   padding: 4px 8px;
   min-width: 250px;
   background: rgb(18, 79, 42);
   color: white;
   text-align: center;
   display: none;
   cursor: pointer;
   font-size: 13px;
   height: 18px;
   overflow: hidden;
   line-height: 10px;
   left: unset;
   white-space: nowrap;
   max-width: 400px;
   right: 50px;
}

.debug_colored[data-theposition="1"] {}

.debug_colored[data-theposition="2"] {
   top: 20px;
}

.debug_colored[data-theposition="3"] {
   top: 39px;
}

.debug_colored[data-theposition="4"] {
   top: 57px;
}

[data-dbc="hide"] .debug_colored {
   display: none;
   z-index: -1;
}

.debug_colored[data-theposition="5"] {
   left: 1080px;
}

.dbcRand {
   position: absolute;
   font-size: 10px;
   left: 0px;
   top: 0px;
   opacity: 0.7;
}

.keyCodeDisplay {
   position: absolute;
   left: 7px;
   font-size: 11px;
   opacity: 0.8;
   top: 0px;
}

.withinEditorDisplay,
.keyboardShortcutAvailable {
   display: inline-block;
   background: black;
   color: rgb(138, 138, 138);
   position: absolute;
   right: 3px;
   top: 15px;
   font-size: 10px;
   width: 16px;
   height: 16px;
   line-height: 16px;
   border: 1px solid rgb(47, 46, 46);
   border-radius: 40%;
   opacity: 0.3;
   cursor: default;
}

.keyboardShortcutAvailable {
   width: unset;
   height: unset;
   opacity: 1;
   background: rgba(16, 82, 93, 0.45);
   border-radius: 0px;
   padding: 6px;
   color: rgb(204, 204, 204);
   border: 2px solid rgb(89, 90, 89);
   cursor: default;
}

#createItemsOverlay {
   position: absolute;
   top: 0px;
   left: 0px;
   width: 100%;
   height: 100%;
   z-index: 15;
   background: rgba(0, 0, 0, 0.33);
   /* display: none; */
}

#createItems {
   position: relative;
   top: 0px;
   left: 0px;
   width: 100%;
   height: 100%;
   background: rgb(19, 19, 20);
   padding: 15px 10px;
   overflow-y: hidden;
}

.itemCreationHideSpecificTitle {
   border: 1px solid #6b6b60;
   background: black;
   color: lightblue;
   text-align: center;
   
}

.itemCreationHideSpecificInner {
   background: #0a0a46;
   color: lightblue;
   min-height: 100px;
   padding: 8px;
}

.itemCreationNewNotes {
   display: none;
}

#itemCreationContainer {
   background:black;
}

.itemCreationContainerTitle .fa-window-close {
   position: absolute;
   right: 8px;top: 5px;
   cursor: pointer;
}
.itemCreationContainerTitle {
                             padding:6px;
                             background: rgb(21 6 21);
                             text-align: center;
                             color: #acaaaa;
                             /* margin-bottom: 23px; */
                             }




.itemCreationHelpTitle {
   background: #060426;
   text-align:center;
   padding: 6px;
   border: 1px solid rgb(0 0 0);
   border-bottom: none;
}

.itemCreationExplanationContainer {
   border: 1px solid #000000;
   padding: 12px;
   background: #000000;
}

.itemCreationBasicsContainer,
.itemCreationParsingHelp,
.itemCreationSavedItemsExplanation {
      background: rgb(43 43 75);
      /* border: 1px solid #0000004f; */
      padding: 24px;
      padding-top: 20px;
      padding-bottom: 20px;
}





#itemCreationHideSpecificSection {
   background: #2f1b3d;
   min-height: 100px;
   display: none;
}

.itemCreationAreaToggleButton {
   background: #184651;
   display: inline-block;
   margin: 6px;
   padding: 6px;
   cursor: pointer;
}

.createItemsClass>div {
   border-top: 1px solid rgba(92, 91, 91, 0.37);
   border-right: 1px solid rgba(92, 91, 91, 0.37);
   border-left: 1px solid rgba(92, 91, 91, 0.37);
   border:none;
   border-image: initial;
   border-bottom: none;
   padding: 7px 15px 20px;
   position: relative;
   background: rgb(13, 13, 28);
   overflow: hidden;
}

#createItemsInner {
   bordeR: 1px solid #000000;
   height: calc(100% - 37px);
   overflow-y:auto;
}

#itemCreationHelpCover {
   background: black;
   position: absolute;
   height: 95%;
   z-index: 200;
   bordeR: 2px solid #646d64;
   font-size: 20px;
   line-height: 30px;
   border: 1px solid #000000;
   width: 98%;
   top: 51px;
   overflow-y: auto;
   left: 1%;
   display: none;
}

#itemCreationHelpContainer {
height: 100%;
}

#itemCreationHelpInner {
      /* border: 5px solid green; */
      height: calc(100% - 60px);
      overflow-y:auto;
}


#itemCreationHelpInner::-webkit-scrollbar {
	width: 16px;
	height: 0px;
	/*Entire scrollbar container*/
}

#itemCreationHelpInner::-webkit-scrollbar-track {
	background: #000000;
	border-radius: 2px;
	/*Track, within container*/
}

#itemCreationHelpInner::-webkit-scrollbar-thumb {
	background: #1a5888;
	border-radius: 1px;
	/*Draggable scrollbar handle*/
}



#creationAddCancelSection .finalizeHelp {
   position: absolute;
   top: 0px;
   right: 40px;
}

#selectTagSection,
#selectHTMLAttributes {
   overflow: hidden;
}

.selectNewItemTypeSection {
   text-align: center;
}

.newItemTypeButton {
   background: rgb(21, 21, 38);
   border: 1px solid rgb(119, 119, 119);
   width: 26%;
   display: inline-block;
   cursor: pointer;
   color: rgb(159, 158, 158);
   opacity: 0.4;
   margin-left: 5px;
   transition: all 0.2s ease 0s;
}

.newItemTypeButtonActive {
   background: rgb(21, 21, 38);
   opacity: 1;
}

.savedCreationItemsDisplay {
   padding: 6px;
   background: rgb(0, 0, 0);
   margin-bottom: 10px;
   border: 1px solid rgba(89, 89, 89, 0.62);
}

#showSelectorsAndParents {
   background: rgb(15, 23, 32);
   overflow: hidden;
   border: 0px solid orange;
}

#modifyStyleEditorWidth {
   margin-bottom: 13px;
   background: rgb(15, 23, 32);
   display: none;
}

#showSelectorsAndParents.height0 {
   height: 0px;
   overflow: hidden;
   padding: 0px;
}

.height0 {
   height: 0px;
   overflow: hidden;
}

.oneSectionTitle {
   background: rgb(29, 29, 29);
   text-align: center;
   height: 26px;
}

.quickAddSelectorSection {
   float: right;
}

.selectStyleModifierUsed {
   color: rgb(156, 156, 156);
   padding-left: 13px;
   padding-top: 3px;
   max-width: 216px;
   display: inline-block;
   font-size: 9px;
   border: none;
}

.quickAddSelectorSection {
   float: right;
   padding-left: 0px;
}

#quickAddSelectorDropdown {
   border: none;
}

.quickAddSelectorSection {
   white-space: nowrap;
   float: right;
   opacity: 1;
   font-size: 8.6px;
   margin-right: 5px;
}

.quickAddSelectorText {
   display: inline-block;
}

.quickAddSelectorButton {
   display: inline-block;
   background: rgb(27, 27, 48);
   margin-left: 4px;
   cursor: pointer;
   width: 18px;
   text-align: center;
}

.quickAddSelectorSection select {
   border: none;
   color: rgb(170, 181, 184);
   opacity: 0.8;
}

.quickAddSelectorSection select,
.quickAddSelectorButton {
   height: 20px;
   vertical-align: top;
   line-height: 20px;
}

.allStyleSelectors {
   padding: 6px;
}

.styleModifierSelectButton {
   display: inline-block;
   cursor: pointer;
   opacity: 0.3;
   background: black;
   padding: 0px 3px;
   border: 1px solid rgb(0 0 0);
   font-size: 10px;
   height: 15px;
   line-height: 15px;
}

.styleModifierSelectButton[data-active="active"] {
   opacity: 0.7;
}

#mainScreenshotCaption {
   background: #040435;
   background: linear-gradient(200deg, rgb(9 29 66) 0%, rgb(16 10 10) 100%);
   background: linear-gradient(90deg, rgb(0 0 0 / 95%) 0%, rgb(7 22 43 / 91%) 50%, rgb(0 2 14 / 98%) 100%);
   position: fixed;
   top: 180px;
   left: 1%;
   z-index: 3333;
   width: 98%;
   border: 1px solid #2a5664;
   font-size: 34px;
   line-height: 58px;
   padding-top: 30px;
   padding-left: 125px;
   bottom: unset;
   box-shadow: 3px 3px 3px 3px #3eb4b1;
   -webkit-box-shadow: 0 0 10px #fff;
   box-shadow: 0 0 50px #254377;
   font-family: arial;
   padding-bottom: 30px;
   color: #d7d4d4;
   display: none;
}

#itemCreationPreviewArea {
   position: fixed;
   display: none;
   border: 2px solid black;
   z-index: 111;
   background: #2d272e;
   left: 8px;
   width: 51%;
   height: 80%;
   z-index: 444444;
   overflow: hidden;
   min-height: 310px;
   border: 2px solid #000000;
   min-width: 705px;
}

#creationPreviewOptions {height: 100%;/* border: 2px solid green; */overflow: hidden;}

#itemCreationPreviewArea[data-loc_override="right"] {
  left: unset;
   right: 3px;
}

#itemCreationPreviewArea[data-loc_override="left"] {
   
}
.itemCreationPreviewAreaTitle {
   background: black;
   text-align: center;
}

#itemCreationRenderInner {
  
min-height: 30px;
  
height: 100%;
  
position:relative;
  
display: none;
}

.itemCreationPreviewTitle {
   position: absolute;
   bottom: 0;
   right: 0;
   font-size: 10px;
   /* border: 1px solid lightblue; */
   width: 96%;
   opacity: .3;
   display: none;
}

.creationPreviewToClipboardButton,
.creationPreviewGenerateButton,
  .creationPreviewParseButton,
  .creationPreviewToggleLanguageButton {
   background: #2e2e56;
   color: white;
   display:inline-block;
   margin: 6px;
   cursor: pointer;
   padding: 6px;
  }

.creationPreviewParseButton[data-type="parse"],
.creationPreviewParseButton[data-type="export"] {
   width: 51px;
   padding: 6px 0px;
   text-align:center;
   
}
.creationPreviewParseButton[data-active="yes"] {
   text-decoration: underline;
   font-weight: 600;
   color: lightblue;
   cursor: default;
}

#creationPreviewOptionsAreaBackground,
        #creationPreviewBorderColor {
         border: none;
         outline: none;
        }

.revertMe {
   background: #6b4747;
   
}

.creationPreviewParseButton.revertMe {
   display: none;
}

.parseHelp {
   display:inline-block;
   font-size:15px;
   color: gray;
}

.divStructureViewButtons[data-type="original"] {
   display: none !important;
}
.creationPreviewToClipboardButton {/* width: 74px; */}

.creationPreviewLanguageStatus {
   display: inline-block;
}

.creationPreviewLanguageStatus[data-type="off"] {
   display: none;
}

.creationPreviewToggleLanguageButton {
   background: #124b12;
   /* width: 86px; */
   text-align: left;
   padding-left: 9px;
}

#creationPreviewAreaInner[data-css="off"] .creationPreviewToggleLanguageButton[data-type="css"],
#creationPreviewAreaInner[data-javascript="off"] .creationPreviewToggleLanguageButton[data-type="javascript"],
#creationPreviewAreaInner[data-html="off"] .creationPreviewToggleLanguageButton[data-type="html"] {
   background: #5d2b2b;
}
#creationPreviewAreaInner[data-css="off"] .creationPreviewToggleLanguageButton[data-type="css"] .creationPreviewLanguageStatus[data-type="off"],
#creationPreviewAreaInner[data-javascript="off"] .creationPreviewToggleLanguageButton[data-type="javascript"] .creationPreviewLanguageStatus[data-type="off"],
  #creationPreviewAreaInner[data-html="off"] .creationPreviewToggleLanguageButton[data-type="html"] .creationPreviewLanguageStatus[data-type="off"] {
         display: inline-block;
      }

#creationPreviewAreaInner[data-javascript="off"] .creationPreviewToggleLanguageButton[data-type="javascript"] .creationPreviewLanguageStatus[data-type="on"],
#creationPreviewAreaInner[data-css="off"] .creationPreviewToggleLanguageButton[data-type="css"] .creationPreviewLanguageStatus[data-type="on"],
   #creationPreviewAreaInner[data-html="off"] .creationPreviewToggleLanguageButton[data-type="html"] .creationPreviewLanguageStatus[data-type="on"] {
      display:none;
   }


  .creationPreviewChangeView {
   position: absolute;
   cursor: pointer;
   font-size: 13px;
   top: 0px;
   left: 3px;
   color: gray;
  }

 #itemCreationPreviewArea[data-location="left"] {
      right: unset !important;
      left: 10px !important;
   }

   #itemCreationPreviewArea[data-location="right"] {
      left: unset !important;
      right:10px !important;
   }

.itemCreationMoveSectionTitle {
   display: inline-block;
   opacity: 0.4;
}

   .itemCreationMoveSection {
      position: absolute;
      /* border: 1px solid yellow; */
      top: 0;
      right: 74px;
      width: 150px;
      opacity: 0.7;
      color: lightblue;
   }

.creationPreviewManualRender {
   display: inline-block;
   margin-left: 18px;
   cursor: pointer;
   background: #3b3340;;

   padding: 0px 8px;
}

#itemCreationPreviewArea[data-showmovebuttons="no"] .itemCreationMoveSection {
   display: none
}

.creationPreviewRenderLight {
   display: inline-block;
   width: 80px;
   background: #231e1e4d;
   height: 22px;
   vertical-align:top;
   padding-left: 8px;
   width: 30px;
   cursor: pointer;
}

   .moveCreationPreviewButton {
      cursor: pointer;
      display: inline-block;
      color: lightgray;
      opacity: .4;
   }

#itemCreationPreviewArea[data-location="right"] .moveCreationPreviewButton[data-type="right"],
#itemCreationPreviewArea[data-location="left"] .moveCreationPreviewButton[data-type="left"] {
   opacity: 1
}

  .creationPreviewChangeView[data-type="compile"] {
   left: 98px;
  }

#itemCreationPreviewArea[data-type="compile"] .creationPreviewChangeView[data-type="compile"],
#itemCreationPreviewArea[data-type="render"] .creationPreviewChangeView[data-type="render"] {
   color: #a0adbd;
   border-bottom: 1px solid;

}

  .creationPreviewSettingsToggle {
   position: absolute;
   right: 50px;
   cursor: pointer;
   color: dimgray;
   top: 0;
  }

  .itemCreationPreviewAreaTitle> .fa-window-close {
   color: dimgray;
   position: absolute;
   right: 10px;
   top:0;
   cursor: pointer;
  }

#itemCreationPreviewOptions {
   position: absolute;
   top: 22px;
   left: 0;
   background: #03101cad;
   width: 100%;
   height: calc(100% - 21px);
   z-index: 150000;
   display: none;
   /* border: 3px solid green; */
   top: 22px;
   overflow: hidden;
}

 #entireItemCreationCompileContainer {
      border: 1px solid #0000002e;
      height: calc(100% - 100px);
   }

   .entireItemCreationCompileTitle {
      height: 30px;
      line-height: 30px;
      text-align: center;
      background: black;
      text-align: center;
      position: relative;
      font-size: 12px;
   }

.creationPreviewOptionsTitle {
   position: absolute;
   bottom: 0;
   right: 0;
   display: none;
}
 
  #creationPreviewAreaInner {
   padding: 15px;
   background: #06111e;
   /* bordeR: 1px solid #00edff; */
   height: calc(100% - 22px);
   overflow-y: hidden;
   /* overflow: hidden; */
  }

.secondCreationMove {
   /* background: blue; */
   z-index: 44;
   top: unset;
   bottom: 0;
   left: 0;
   opacity: 1;
}

  #itemCreationRenderArea,
  #itemCreationCompiledArea {
   height: calc(100% - 31px);
   width: 100%;
   border: 1px solid #000000;
  }

#itemCreationRenderArea {
   background: #104646;
   margin-bottom: 50px;
   position: relative;
   overflow: hidden;
}

#itemCreationRenderID {
   /* border: 2px solid #ff9800; */
   height: 100%;
}

 #itemCreationPreviewArea[data-type="compile"] #itemCreationRenderArea,
  #itemCreationPreviewArea[data-type="render"] #entireItemCreationCompiledArea {
   display: none;
  }

#entireItemCreationCompiledArea {
   /* border: 1px solid #ffff0054; */
   height: 99%;
}
  

.captionListItem,
.captionSiteName,
.captionHighlightOne,
.captionHighlightTwo,
.captionHighlightThree,
.captionHighlightFour {
   display: inline-block;
}

.captionListLine {
   margin-left: 58px;
}

.captionListLine i {
   font-size: 18px;
}

.captionListItem {
   font-size: 21px;
   margin-right: 18px;
   line-height: 30px;
   color: #87bfc8;
}

.captionSiteName {
   font-family: "Lobster Two";
   color: #45c8e4;
}

.captionHighlightOne {
   color: lightgreen;
}

.captionHighlightTwo {
   color: pink;
}

.captionHighlightThree {
   color: #b395d1;
}

.captionHighlightFour {
   color: #66a6c8;
}

.captionFirstLine {
   /* margin-left: 70px; */
   margin-bottom: 14px;
}

.captionAdditionalLine {
   margin-left: 58px;
   color: #c1c9d0;
}

.captionAdditionalLine>i {
   margin-right: 10px;
}

.oneStyleSelector {
   display: inline-block;
   background: rgb(17, 23, 31);
   color: rgb(156, 154, 154);
   padding: 4px 23px 4px 4px;
   margin: 5px;
   cursor: pointer;
   border: 1px solid rgb(13, 13, 13);
   font-size: 12px;
   text-align: center;
   min-width: 80px;
   position: relative;
}

.oneStyleSelector.sampleOnly {
   display: none;
}

#page #elementInspector .oneStyleSelector[data-level="0"] .elementTreeSelectorName {
   max-width: 240px;
   white-space: nowrap;
   overflow: hidden;
   vertical-align: top;
   padding-right: 5px;
   text-overflow: ellipsis;
}

#page #inspectorElementTree .oneStyleSelector[data-active="yes"] .elementTreeSelectorName {}

#page #elementInspector .oneStyleSelector {
   vertical-align: top;
}

#page #selectorElementTree .oneStyleSelector[data-active="yes"] {
   color: white;
   border-bottom: 1px solid white;

}

.elementTreeSelectorName {}

.thisSelectorLevel {
   position: absolute;
   background: rgba(0, 0, 0, 0.47);
   height: 15px;
   color: rgb(191, 178, 178);
   top: 2px;
   line-height: 15px;
   font-size: 11px;
   opacity: 0.2;
   width: 15px;
   right: 2px;
   text-align: center;
}

#elementInspector .thisSelectorLevel {
   background: none;
}

.oneStyleSelector[data-level="1"] {
   background: rgb(27, 38, 53);
}

.oneStyleSelector[data-level="2"] {
   background: rgb(40, 49, 61);
}

.oneStyleSelector[data-level="3"] {
   background: rgb(36, 51, 60);
}

.oneStyleSelector[data-level="4"] {
   background: rgb(24, 40, 38);
}

.selectorsAndParentsInnerContainer,
.modifyWidthInnerContainer {
   background: rgb(39, 39, 43);
   margin: 8px 13px 0px;
   text-align: left;
   padding-bottom: 8px;
   position: relative;
}

.modifyWidthInnerContainer {
   position: relative;
   padding-bottom: 83px;
}

.selectorsAndParentsButtonsRow {
   text-align: center;
}

.closeSelectorsAndParents {
   background: black;
   color: rgb(139, 137, 137);
   display: inline-block;
   cursor: pointer;
   padding: 3px 8px;
}

.modifyWidthFunctionSection {
   text-align: center;
   color: rgb(171, 170, 170);
   height: 34px;
   margin-top: 16px;
}

.styleEditorWidthMessage {
   position: absolute;
   bottom: 3px;
   text-align: center;
   width: 100%;
   opacity: 0.6;
}

.styleEditorWidthText {
   display: inline-block;
   height: 34px;
   line-height: 34px;
   vertical-align: top;
}

.setStyleEditorWidthButton {
   background: black;
   display: inline-block;
   padding: 3px;
   margin-left: 12px;
   line-height: 24px;
   height: 29px;
   cursor: pointer;
   overflow: hidden;
   vertical-align: top;
}

.setStyleEditorWidthButton.notWideEnough {
   color: dimgray;
   opacity: 0.8;
}

#entire_style_editor .previewStyleEditorWidth {
   background: black;
   width: 55px;
   border: 1px solid rgb(73, 73, 73);
   color: lightgray;
   text-align: center;
   vertical-align: top;
   position: relative;
   top: 3px;
}

.creation_section_cover {
   position: absolute;
   top: 0px;
   left: 0px;
   background: rgba(10, 10, 10, 0.92);
   width: 100%;
   height: 100%;
   z-index: 5;
   overflow: hidden;
}

.recentlyUsedItemsDisplay {
   background: rgb(15, 18, 23);
}

.savedItemsTitle {
   display: inline-block;
   border: 1px solid rgba(20, 20, 20, 0.88);
   width: 133px;
   height: 25px;
   line-height: 25px;
   vertical-align: top;
   background: rgb(23, 23, 23);
   text-align: center;
   cursor: default;
}

#entire_item_creation[data-width="medium"] .savedItemsTitle {
   width: 100%;
}

.recentlyUsedItemsTitle {
   background: rgba(34, 34, 45, 0);
}

.allSavedItemsContainer {
   display: inline-block;
   width: calc(100% - 137px);
   vertical-align: top;
}

#entire_item_creation[data-width="medium"] .allSavedItemsContainer {
   width: 100%;
   margin-top: 8px;
}

.oneSavedItemContainer {
   display: inline-block;
   margin-left: 6px;
   width: 31%;
   height: 25px;
   background: rgb(28, 28, 51);
   border: 1px solid rgb(42, 41, 41);
   margin-bottom: 7px;
   color: rgb(202, 191, 191);
   line-height: 25px;
   padding-left: 6px;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
   padding-right: 16px;
   position: relative;
}

#entire_item_creation[data-width="medium"] .oneSavedItemContainer {
   width: 94%;
}

.oneRecentlyUsedItem {
   background: rgb(29, 29, 30);
   color: rgb(133, 130, 130);
   cursor: pointer;
   padding-left: 22px;
}

.recentlyUsedItemType,
.recentlyUsedItemValue {
   display: inline-block;
}

.recentlyUsedItemType {
   text-transform: capitalize;
   background: black;
   height: 15px;
   width: 15px;
   line-height: 15px;
   text-align: center;
   position: absolute;
   left: 3px;
   top: 3px;
   font-size: 10px;
}

.forComma::after {}

.forComma:last-child::after {
   content: "";
}

#selectCSSRules,
#styleSelectCSSRules,
#selectHTMLAttributes,
#recentlyCreatedElements,
#selectCreateItemsLanguages,
.createItemsInputRow {}

#selectHTMLAttributes {}

#styleSelectCSSRules {
   background: rgb(15, 23, 32);
   padding: 13px;
}

#addNewAttributeRow {
   padding-left: 15px;
   padding-top: 6px;
   background: rgb(43, 43, 47);
   min-height: 40px;
}

#addNewAttributeRow select,
#creationJSListenersDropdown,
#currentCustomItemType,
#page .cc_select[data-var="creationJSListenersDropdown"],
#page .cc_select[data-var="theSavedAttribute"],
#page .cc_select[data-var="currentCustomItemType"] {
   background: rgb(51, 51, 60);
   border: 1px solid rgb(75, 75, 75);
   color: rgb(186, 182, 182);
}

#createItems .createItemsInputRow {
   padding-bottom: 7px;
}

.itemCreationHideButtonShortcut {
      position: absolute;
      right: 4px;
      top: 4px;
      padding: 6px;
      background: #252548;
      color: lightblue;
      opacity: .4;
      height: 22px;
      width: 20px;
      padding: 0;
      line-height: 22px;
      text-align: center;
      cursor: pointer;
      transition: .2s opacity;
}

 .opacity0 {
            opacity: 0;
      }

      .opacity20 {
            opacity: .2;
      }

      .opacity40 {
            opacity: .4;
      }

      .opacity60 {
            opacity: .6;
      }

      .opacity80 {
            opacity: .8;      
      }

      .opacity100 {
            opacity: 1;
      }

#page .itemCreationHideButtonShortcut[data-activeopacity="0"] {
   opacity: 0;
}

#page .itemCreationHideButtonShortcut[data-activeopacity=2"0"] {
   opacity: .2;
}

#page .itemCreationHideButtonShortcut[data-activeopacity="40"] {
   opacity: .4;
}

#page .itemCreationHideButtonShortcut[data-activeopacity="60"] {
   opacity: 6;
}

#page .itemCreationHideButtonShortcut[data-activeopacity="80"] {
  opacity: .8; 
}

#page .itemCreationHideButtonShortcut[data-activeopacity="100"] {
   opacity: 1;
}


#createItems .hideCreateItemsButtonRow {
   border: none;
   background: rgb(36, 102, 114);
   position: absolute;
   z-index: 3;
   right: 60px;
   top: 24px;
   cursor: pointer;
   width: 24px;
   height: 24px;
   line-height: 24px;
   text-align: center;
}

.idOrClass {
   display: inline-block;
}

#createItems input[type="text"],
#styleSelectCSSRules input[type="text"] {
   background: black;
   border: 1px solid rgba(61, 60, 60, 0.72);
   color: rgb(166, 159, 159);
}

#divStructure #structureObjectDropdown,
#divStructure #structureObjectSaveInput {
   background: #202435 ! Important;
   width: 170px;
   border: none;
   color: lightblue;
   border: 1px solid black;
}

.structureObjectSave,
.structureObjectLoad,
#divStructure #structureObjectDropdown,
#divStructure #structureObjectSaveInput,
  .structureObjectSaveRowTitle,
   .structureObjectLoadRowTitle {
       height: 30px;
       line-height: 30px;
       vertical-align:top;
   }

#entire_item_creation[data-widthsub700="true"] .divStructureItemInput {
   /* max-width: 146px !important; */
}

#elementsHideInputArea {
   position: absolute;
   left: 10px;
   width: 50px;
   background: #04222d82 !important;
   height: 24px;
   top: 5px;
   border: 1px solid #69696912 !important;
}
#entire_item_creation[data-width="huge"] .divStructureItemInput {
   width: 250px;
}
#entire_item_creation[data-width="large"] .divStructureItemInput {
   width: 110px;
}



#divStructure .item.level0 .divStructureItemInput {
   background: black !important;
}

#divStructure .item.level1 .divStructureItemInput {
      color: #87a6bf;
      
}

#divStructure .item.level2 .divStructureItemInput {
   color: #639bc2 ;
   background: #141449 !important;
   
}

#divStructure .item.level3 .divStructureItemInput {
   color: #93b8c4 ;
   background: #2c3452 !important;
   
}


#divStructure .item.level4 .divStructureItemInput {
   color: #79b66c ;
   
}

#divStructure .item.level5 .divStructureItemInput {
   color: #b6a56c ;
   
}

#divStructure .item.level6 .divStructureItemInput {
   color: #a46cb6 ;
   
}



#entire_item_creation[data-width="huge"] #divStructure .divStructureRow button,
#entire_item_creation[data-width="large"] #divStructure .divStructureRow button {
   padding: 0px 6px;
}


#entire_item_creation[data-above1000="yes"] #divStructure .divStructureRow button {
   padding: 0px 10px;
   
}
.addNewStyleSelector {
   display: inline-block;
   cursor: pointer;
   font-size: 11px;
   margin-left: 8px;
   background: rgba(0, 0, 0, 0.33);
   padding: 0px 5px;
}

#createItems #CSSRuleSelector {
   color: rgb(162, 162, 162);
}

#createItemsInput {
   width: 50%;
   height: 38px;
   vertical-align: top;
}

#createItemsCompleteRow {
   text-align: center;
}

.createItemsCancelButton,
.createItemsCompleteButton {
   background: black;
   color: lightgray;
   display: inline-block;
   padding: 5px;
}

.createItemsCancelButton {
   margin-right: 20px;
}

.idOrClass,
.oneTagToSelect {
   display: inline-block;
   text-align: center;
   width: 59px;
   background: rgba(10, 15, 53, 0.65);
   height: 33px;
   border: 1px solid rgb(37 37 37);
   line-height: 33px;
   vertical-align: top;
   opacity: 0.3;
   cursor: pointer;
}

.oneTagToSelect {
   opacity: 0.7;
   background: rgba(0, 0, 0, 0.89);
   height: 30px;
   line-height: 30px;
   border-color: rgb(61, 61, 65);
}

.oneTagToSelect {
   width: 25%;
}

.idOrClassActive,
.oneTagToSelectActive {
   opacity: 1;
   font-weight: 600;
   color: rgb(179, 176, 176);
   background: rgb(53, 53, 68);
   color: lightblue;
}

.inputAreaSelectorType {
   background: #1b1616;
   display: inline-block;
   margin-left: 4px;
   height: 33px;
   line-height: 33px;
   padding:  0px 6px;
}

.oneTagToSelectActive {
   background: rgb(53, 53, 68);
}

.allTagsToSelect {
   background: rgb(39, 39, 43);
   padding: 4px;
}

#customOrSavedTags :disabled,
#customOrSavedJSListenerRow :disabled {
   opacity: 0.5;
}

#customOrSavedJSListenerRow input,
#customOrSavedJSListenerRow select,
#page .cc_select[data-var="theSavedListener"] {
   transition: opacity 0.5s ease 0s;
   display: inline-block;
   width: 48%;
   border: 1px solid rgb(72, 72, 72);
   color: gray;
   height: 30px;
   line-height: 30px;
}

#page .cc_select[data-var="theSavedListener"] {
   padding-left: 8px;
   background: black;
   opacity: 0.4;
   vertical-align: top;
}

#page .cc_select[data-var="theSavedListener"][data-selectdisabled="false"] {
   opacity: 1;
}

#page #theCustomTag,
#page #theSavedTag,
#page .cc_select[data-var="theSavedTag"] {
   transition: opacity 0.4s ease 0s;
   background: rgb(0, 0, 0);
   height: 38px;
   vertical-align: top;
   width: 48%;
   border-radius: 2px;
   margin-left: 1%;
   color: rgb(139, 137, 137);
   border: 1px solid rgb(49, 49, 49);
}

#page .cc_select[data-var="theSavedTag"] {
   padding-left: 6px;
   transition: opacity 0.4s ease 0s;
   opacity: 0.4;
}

#page .cc_select[data-list="theSavedTag"][data-selectdisabled="false"] {
   opacity: 1;
}

#page .cc_select[data-var="theSavedTag"] .activeSelectOption,
#page .cc_select[data-var="theSavedTag"] .caretDown {
   height: 38px;
   line-height: 38px;
}

#customOrSavedTags {
   margin-top: 9px;
   padding-bottom: 4px;
}

.createItemsLanguage {
   background: rgb(27, 30, 33);
   margin: 5px;
   padding: 6px;
   border: 1px dashed rgb(58, 57, 57);
   cursor: pointer;
   width: 28%;
   display: inline-block;
   opacity: 0.5;
   text-align: center;
   transition: opacity 0.2s ease 0s;
   color: rgb(158, 158, 158);
}

.createItemsLanguageActive {
   background: rgb(51, 51, 60);
   opacity: 1;
   font-weight: 600;
   border: 1px solid rgb(58, 57, 57);
}

.selectCreateItemsTitle {
   text-align: center;
}

#itemCreationSettings {
   background: #000000;
   height: unset;
   padding-bottom: 40px;
}

#itemCreationSettingsCover {
   
height: 100%;
   
color: #b6ceda;
   
position: absolute;
   
top: 53px;
   
z-index: 300;
   
background: #000000bd;
   
border: 3px solid #000000;
   
padding: 0;
   
width: 98%;
   
padding-bottom:  50px;
   
font-size: 15px;
   
display: none;
}

.itemCreationSettingsLine {
   padding: 12px;
   margin: 10px;
   border: 1px solid #30303040;
   background: #040422;
}

.itemCreationSettingsLine[data-type="firstTwoButtons"] {
   
}
.itemCreationSettingsModified {
   display: inline-block;
   margin-left: 80px;
   background: #2d5443;
   display: none;
}

.itemCreationSettingsModified[data-type="modified"] {
   background: #401818;
}

.itemCreationSettingsLineTitle {
   display: inline-block;
   /* border: 1px solid #d3d3d394; */
   width: 229px;
   background: #00000099;
   /* border-top: 1px solid yellow; */
   padding-top: 7px;
   color: #b0b8ba;
}

.itemCreationSettingsLineTitle i {
   height: 22px;
   line-height: 22px;
}

.itemCreationShowCheckbox,
.itemCreationIndividualCheckArea {
   display: inline-block;
}


.itemCreationShowCheckbox {
   margin-right: 18px;
   width: 220px;
   border: 1px solid black;

   margin-bottom: 8px;
   cursor: pointer;
  
   padding-left: 9px;
   padding-top: 4px;
   padding-bottom: 4px;
}

.itemCreationIndividualCheckArea {
   margin-right: 10px;
}

.itemCreationIndividualCheckArea .fa-square {
   display: none;
}
.itemCreationSettingsLineButton {
   background: #322735;
   display: inline-block;
   padding: 3px 10px;
   cursor: pointer;
   font-size: 18px;
}

.itemCreationSettingsLineButton.helpArea {
   margin-left: 40px;
 
}

.itemCreationSettingsLineButton.save {
   background: #174117;
}


.itemCreationSettingsLineContent {
   display: inline-block;
   background: #0e0e13d4;
   width: calc(100% - 246px);
   vertical-align:top;
   margin-left: 13px;
   padding: 4px;
   /* border-top: 1px solid yellow; */
}


.itemCreationSettingsTitle {
   background: black;
   padding: 4px;
   text-align: center;
   font-size: 18px;
   position: relative;
   cursor: pointer;
}

.itemCreationSettingsTitle i {
   position: absolute;
   top: 3px;
   right: 3px;
   color: gray;
   cur
}


#createItemsTitle {
   background: black;
   text-align: center;
   height: 36px;
   line-height: 36px;
   padding: 0px;
}

.structureSaveAltPosition,
.itemCreationMainHelp,
.itemCreationHelpButton,
.itemCreationConsoleHelp,
.creationTogglePreview,
.creationToSampleAce {
   position: absolute;
   top: 0;
   left: 140px;
   color: #8ba0a2;
   cursor: pointer;
   font-size: 17px;
}

.structureSaveAltPosition {
   left: 280px;
   color: #94a7a7;
   background: #012e01;
   height: 22px;
   top: 8px;
   padding: 0px 5px;
   line-height: 22px;
   cursor: pointer;
   opacity: .4;
   transition: 0.2s opacity;
}

.structureSaveAltPosition:hover {
   opacity: 1;
}

#entire_item_creation[data-width="large"] .creationToSampleAce {
   left: 89px;
   
   
}

#entire_item_creation[data-width="large"] .creationTogglePreview,
#entire_item_creation[data-width="large"] .creationToSampleAce {
   font-size: 12px;
}
#entire_item_creation[data-width="large"] .structureSaveAltPosition {
   left: 220px 
}

.itemCreationMainHelp {
   background: #47494878;
   right: 229px;
   left: unset;
}

.itemCreationHelpButton {
   top: 0;
   border: 1px solid green;
   background: brown;
   left: 380px;
}

.itemCreationConsoleHelp {
   left: 61px;
   font-size:13px;
   top: 4px;
   opacity: .4;
   cursor: default;
}

   .creationTogglePreview {
      /* border: 1px solid #5d5d5d; */
      left: unset;
      right: 38px;
   }

#createItems ::placeholder {
   color: rgb(65, 65, 68);
}

.selectHTMLAttributesLine {
   padding-left: 15px;
   height: 32px;
   line-height: 32px;
   position: relative;
}

#entire_item_creation[data-width="medium"] .selectHTMLAttributesLine {
   height: 76px;
}

.newHTMLAttributes,
#addNewAttributeRow,
.createCodeForSection,
.HTMLTagsSection,
.elementNameRow,
.addCSSRulesRow,
.CSSRuleSelectorRow,
.createJSListenersSection,
.showRecentlyCreatedElements,
.manageSavedItemsArea,
.finalizeSection,
.createItemsInputArea {
   background: rgb(39, 39, 43);
   color: rgb(171, 170, 170);
}

.createItemsInputArea {
   padding-top: 5px;
   text-align: left;
   padding-bottom: 8px;
   /* border:  2px solid yellow; */
   padding-left:  4px;
}

.createJSListenersSection,
.showRecentlyCreatedElements,
.manageSavedItemsArea {
   padding: 4px;
}

#itemCreationSavedItemOptions {
   padding: 3px 8px;
   background: rgb(32, 35, 51);
   display: none;
}

#itemCreationSavedItemOptions .oneSavedItemOption {
   display: inline-block;
   padding: 0px 7px;
   margin-left: 5px;
   cursor: pointer;
   border: 1px solid rgba(97, 101, 102, 0.58);
   min-width: 80px;
   background: rgba(0, 0, 0, 0.95);
   font-size: 13px;
}

.savedItemOptionsLine {
   border: 1px solid rgba(148, 198, 200, 0.22);
   margin-bottom: 10px;
   padding: 6px;
   background: rgb(3, 3, 43);
   position: relative;
}

.savedItemsOptionsLineTitle {
   display: inline-block;
   border: 1px solid rgba(0, 0, 0, 0.4);
   min-width: 237px;
   background: rgb(22, 52, 91);
   font-size: 13px;
}

.savedItemsOptionsLineVueVar {
   background: rgb(63, 5, 61);
   position: absolute;
   right: 0px;
   bottom: 0px;
   padding: 3px;
   font-size: 15px;
   opacity: 0.6;
   display: none;
}

.itemCreationSavedItemsButton {
   cursor: pointer;
   background: rgb(49, 40, 59);
   padding: 5px;
   display: inline-block;
}

.finalizeSection {
   text-align: center;
   padding: 8px 8px 0px;
}

.addNewSavedTitle {
   display: inline-block;
   vertical-align: top;
}

#newSavedElementName {
   width: calc(100% - 340px);
   height: 24px;
   line-height: 24px;
   vertical-align: top;
}

#entire_item_creation[data-width="medium"] #newSavedElementName {
   width: 45%;
   margin-bottom: 5px;
}

#entire_item_creation[data-width="large"] .savedItemsOptionsLineTitle,
#entire_item_creation[data-width="medium"] .savedItemsOptionsLineTitle,
#entire_item-creation[data-width="small"] .savedItemsOptionsLineTitle {
   display: block;
   margin-bottom: 6px;
   max-width: 300px;
   margin-left: 5px;
}

#createListenersCallbackSection {
   padding: 10px;
   /* border: 3px solid #ffff006e; */
   background: #27272b;
   padding-left: 18px;
   padding-right: 30px;
   position: relative;
   display: none;
}

.createListenersCallbackCover {
	position:absolute;
	top: 42px;
	left: 18px;
	/* cursor: pointer; */
	width:100%;
	height: 170px;
	background: #12151a;
	z-index: 15;
	width: calc(100% - 48px);
	font-size: 16px;
	padding: 20px;
}

.createJSListenersSection {
   padding-left: 15px;
}

.selectListenersTitle,
.vanillaOrJquery {
   display: inline-block;
}

#customOrSavedJSListenerRow {
   margin-top: 8px;
}

.createItemsNormalButton {
   display: inline-block;
   background: black;
   border: 1px solid rgb(76, 75, 75);
   height: 24px;
   line-height: 24px;
   font-size: 13px;
   width: 56px;
   cursor: pointer;
   text-align: center;
   opacity: 0.4;
   transition: opacity 0.1s ease 0s;
}

.createItemsAddButton,
.createItemsSaveButton {
   opacity: 1;
   background: rgb(49, 49, 65);
}

.createItemsSaveButton {
   background: rgb(21, 41, 46);
   color: lightgray;
   width: 70px;
}

.itemCreationSavedItemsOptionsToggle {
   display: inline-block;
   position: absolute;
   right: 10px;
   cursor: pointer;
   top: 7px;
}

#entire_item_creation[data-width="medium"] .createItemsSaveButton {
   width: 40px;
   height: 24px;
   overflow: hidden;
   vertical-align: top;
}

.addNewItemsSection {
   background: rgb(10, 26, 42);
   padding: 5px 30px 5px 11px;
   margin-bottom: 10px;
   border: 1px solid black;
   position: relative;
}

#manageSavedItems select,
.addNewItemsSection {
   color: rgb(163, 162, 162);
}

#manageSavedItems .createItemsAddButton {
   background: rgb(33, 33, 43);
}

.vanillaActive,
.jqueryActive {
   background: rgb(11, 11, 34);
   opacity: 1;
}

.CSSRuleSelectorRow {
   padding: 6px 6px 0px 15px;
}

.newHTMLAttributes {
   padding-bottom: 4px;
}

.elementNameRow {
   padding: 4px;
}

.createCodeForSection {
   text-align: center;
}

.newHTMLAttributes .theAttributeNumber {
   display: inline-block;
   line-height: 32px;
   position: relative;
   bottom: 2px;
   width: 37px;
   text-align: right;
}

#entire_item_creation[data-width="medium"] .theAttributeNumber {
   position: absolute;
   left: 0px;
   width: 40px;
   text-align: center;
   top: 10px;
   bottom: unset;
}

#createItems .selectHTMLAttributesLine input {
   width: 40.5%;
   display: inline-block;
   margin-left: 1%;
   height: 28px;
   vertical-align: top;
}

#entire_item_creation[data-width="medium"] #createItems .selectHTMLAttributesLine input {
   width: 70%;
   position: absolute;
   left: 36px;
   top: 11px;
}

#page #entire_item_creation[data-width="medium"] #createItems .theValueInput {
   top: 46px;
}

.addHTMLSelectAttributeButton {
   background: rgb(53, 58, 68);
   color: rgb(208, 207, 207);
   width: 24px;
   cursor: pointer;
   display: inline-block;
   padding: 0px;
   text-align: center;
   font-size: 12px;
}

.addHTMLSelectAttributeButton,
.selectAttributesTitle,
#addNewAttributeRow select,
#creationJSListenersDropdown,
.selectListenersTitle,
#currentCustomItemType,
#page .cc_select[data-var="creationJSListenersDropdown"],
#page .cc_select[data-var="creationJSListenersDropdown"] .activeSelectOption,
#page .cc_select[data-var="creationJSListenersDropdown"] .caretDown,
#page .cc_select[data-var="theSavedAttribute"],
#page .cc_select[data-var="theSavedAttribute"] .activeSelectOption,
#page .cc_select[data-var="theSavedAttribute"] .caretDown,
#page .cc_select[data-var="currentCustomItemType"],
#page .cc_select[data-var="currentCustomItemType"] .activeSelectOption,
#page .cc_select[data-var="currentCustomItemType"] .caretDown {
   height: 24px;
   line-height: 24px;
   vertical-align: top;
}

#page .cc_select[data-var="currentCustomItemType"] {
   width: 140px;
   padding-left: 8px;
}

#page #entire_item_creation[data-width="medium"] .cc_select[data-var="currentCustomItemType"] {
   padding-left: 2px;
   width: 120px;
}

#page .cc_select[data-var="creationJSListenersDropdown"] {
   padding-left: 6px;
   max-width: 40%;
}

#page .cc_select[data-var="theSavedAttribute"] {
   padding-left: 6px;
   width: 180px;
}

#inputHTMLDropdownValue {
   min-width: 150px;
   border: 1px solid gray;
   color: gray;
   display: none;
}


.selectorAttributeRemove,
.removeOneAttributeButton {
   background: rgb(20, 19, 19);
   display: inline-block;
   padding: 0px 4px;
   cursor: pointer;
   border: 1px solid black;
   color: rgb(107, 105, 105);
   bottom: 2px;
   position: relative;
   height: 22px;
   line-height: 22px;
   width: 22px;
   text-align: center;
}

.selectorAttributeRemove {
   display: inline-block;
   height: 36px;
   line-height: 36px;
   color: #82a2a5;
   /* border: 1px solid #add8e687; */
   background: black;
   width: 28px;
   vertical-align: top;
   top: unset;
   bottom: unset;
   border: none;
   /* border: 1px solid lightgray; */
}


#entire_item_creation[data-width="medium"] .removeOneAttributeButton {
   position: absolute;
   left: unset;
   right: 5px;
   bottom: 5px;
}

.saveDisabled {
   background: gray;
   opacity: 0.3;
   color: black;
   cursor: default;
}

.allAddedCSSRules {
   border: 2px solid black;
   background: rgb(34, 43, 59);
   padding: 6px 6px 6px 25px;
   position: relative;
   min-height: 168px;
}

.styleAddedCSSRules {
   background: rgb(34, 42, 59);
   margin-bottom: 5px;
   padding-left: 25px;
}

.styleEditorFinalizeRow {
   text-align: center;
   margin-top: 8px;
   color: lightblue;
}

.styleEditorFinalizeRowButton {
   background: rgb(45, 46, 58);
   display: inline-block;
   padding: 4px 8px;
   cursor: pointer;
   color: rgb(128, 128, 128);
   position: relative;
   margin-bottom: 6px;
}

#entire_style_editor .oneDebug {
   display: none;
}

#testDynamicPicker {
   position: absolute;
   bottom: 82px;
   width: 100%;
   left: 0px;
   background: black;
   color: white;
   border: 3px solid white;
   height: 174px;
   line-height: 27px;
   display: none;
}

#genericBorderContainer {
   position: absolute;
   bottom: 30px;
   background: rgb(9, 48, 5);
   height: 40px;
   width: 180px;
   color: lightgray;
   z-index: 33333;
   left: -900px;
}

.toClipboardCopied {
   position: absolute;
   top: 0px;
   left: 0px;
   height: 100%;
   width: 100%;
   background: inherit;
   color: inherit;
   padding: 4px 8px;
   display: none;
}

#previewPage .styleImport,
#previewPage .insertAllStyles {
   display: none;
}

#codeCreate .styleExport {
   display: none;
}

.allAddedCSSRules[data-status="active"] {
   border: 2px solid rgb(6, 75, 89);
   background: rgb(28, 32, 42);
}

.showTheSelector,
.addedCSSRule {
   color: rgb(199, 198, 198);
}

.showTheSelector {
   position: relative;
   max-width: 270px;
   text-align: left;
   height: 32px;
   line-height: 32px;
}

.showTheSelector.closeCurly {
   width: 22px;
}

.showRulesIndexNumber {
   background: black;
   position: absolute;
   right: 0px;
   height: 20px;
   width: 20px;
   text-align: center;
   color: orange;
   display: none;
}

.styleEditorColorFormatContainer,
.styleEditorToggleImportantContainer {
   background: rgba(0, 114, 128, 0.11);
   position: absolute;
   color: rgb(188, 182, 182);
   left: 197px;
   display: none;
   height: 20px;
   bottom: 6px;
   overflow: hidden;
   font-size: 12px;
   opacity: 0.7;
   cursor: default;
   transition: opacity 0.3s ease 0s;
}

.styleEditorColorFormatContainer:hover {}

.styleEditorToggleImportantContainer {
   cursor: pointer;
   left: 40px;
   display: block;
   background: black;
   opacity: 0.2;
   transition: none 0s ease 0s;
}

.styleEditorToggleImportantContainer[data-active="yes"] {
   /*opacity: 0.7;*/
}

#page .styleEditorColorFormatContainer select {
   border: 1px solid rgb(32, 31, 31);
   color: rgb(173, 193, 199);
   background: rgb(11, 11, 43);
   height: 19px;
   font-size: 12px;
   padding: 0px;
   line-height: 15px;
   vertical-align: top;
}

.oneStyleInputContainer {
   position: absolute;
   height: 45px;
   width: 241px;
   overflow: hidden;
   right: 12px;
   top: 32px;
   background: rgba(77, 91, 99, 0.23);
   text-align: left;
   color: white;
   z-index: 18;
   padding: 5px;
   display: none;
}

.oneStyleInputContainer[data-ismultiple="yes"] {}

.oneStyleInputContainer[data-isshadow="yes"] {}

#page #selectCSSRules .oneStyleInputContainer[data-ismultiple="yes"].styleActualInputText,
#page #styleSelectCSSRules .oneStyleInputContainer[data-ismultiple="yes"] .styleActualInputText {
   width: 61%;
   margin-left: 5px;
}

#page .oneStyleInputContainer input[type="text"] {
   color: lightblue;
}

#page #cssRulesetModule .styleActualInputText,
#page #cssRulesetModule .styleActualInputUnit,
#page #cssRulesetModule .styleActualInputType,
#page #styleSelectCSSRules .styleActualInputType,
#page #styleSelectCSSRules .styleActualInputText,
#page #styleSelectCSSRules .styleActualInputUnit,
#page #styleSelectCSSRules .styleActualInputBorderStyle,
#page #selectCSSRules .styleActualInputType,
#page #selectCSSRules .styleActualInputText,
#page #selectCSSRules .styleActualInputUnit,
#page #selectCSSRules .styleActualInputBorderStyle {
   border: 1px solid rgba(118, 111, 118, 0.17);
   width: 32%;
   padding: 0px 0px 0px 4px;
   font-size: 12px;
   height: 100%;
   color: rgb(192, 210, 226);
   background: rgb(11, 26, 49);
}

.styleActualInputBorderStyle {
   display: none;
}

#page #styleSelectCSSRules .oneStyleInputContainer[data-isborder="yes"] .styleActualInputBorderStyle,
#page #selectCSSRules .oneStyleInputContainer[data-isborder="yes"] .styleActualInputBorderStyle {
   display: inline-block;
}

#page .styleActualInputBorderStyle {
   display: none !important;
}

#page #styleSelectCSSRules .oneStyleInputContainer[data-isborder="yes"] .styleActualInputType,
#page #selectCSSRules .oneStyleInputContainer[data-isborder="yes"] .styleActualInputType {
   width: 51px;
}

#page #styleSelectCSSRules .oneStyleInputContainer[data-isborder="yes"] .styleActualInputText,
#page #selectCSSRules .oneStyleInputContainer[data-isborder="yes"] .styleActualInputText {
   width: 37px;
}

#page #styleSelectCSSRules .oneStyleInputContainer[data-isborder="yes"] .styleActualInputUnit,
#page #selectCSSRules .oneStyleInputContainer[data-isborder="yes"] .styleActualInputUnit {
   width: 27px;
}

.oneStyleInputContainer[data-isborder="yes"] {
   height: 91px;
}

#page #styleSelectCSSRules .styleActualInputUnit {
   width: 34px;
}

#page .oneStyleInputContainer .styleActualInputText {
   background: rgb(44, 46, 62);
   border: 1px solid black;
}

#page .oneStyleInputContainer .styleActualInputColor {
   background: rgb(7, 4, 46);
   border: 1px solid rgb(20, 20, 20);
   height: 100%;
   width: 100%;
}

#page #styleSelectCSSRules .oneStyleInputEditor,
#page .oneStyleColorContainer,
#page .styleActualInputLocation {
   width: 101%;
   display: inline-block;
   padding: 0px;
   height: 32px;
   margin-bottom: 8px;
   background: rgb(0, 12, 35);
   color: lightblue;
}

#page .oneStyleColorContainer {
   background: rgb(82, 24, 103);
   color: white;
   cursor: pointer;
}

.editPencil {
   position: absolute;
   left: -19px;
   font-size: 10px;
   top: 2px;
   z-index: 0;
   opacity: 0.6;
   display: inline-block;
   width: 50px;
   cursor: pointer;
}

#selectCSSRules .editPencil {
   top: 1px;
}

.addedCSSRule {
   padding-left: 30px;
   text-align: left;
   position: relative;
   cursor: pointer;
   width: 48%;
}

.addedCSSRule.active {
   background: rgba(0, 0, 0, 0.26);
}

.addedCSSRule:hover .adminIndexEditIcon {
   opacity: 0.4;
}

.addedCSSRule .adminIndex {
   position: absolute;
   top: 0px;
   left: -15px;
   background: none;
   width: 41px;
   text-align: center;
   height: 20px;
   cursor: pointer;
   color: lightblue;
}

.adminIndexActualNumber,
.adminIndexEditIcon {
   display: inline-block;
}

.adminIndexActualNumber {
   display: none;
}

.adminIndexEditIcon {
   opacity: 0.1;
   margin-left: 4px;
}

.adminIndex.active .adminIndexEditIcon {
   opacity: 0.7;
}

.adminIndex.active {
   color: rgb(20, 167, 167);
   border-color: cyan;
}

.removeCSSRule,
.removeOneListener,
.removeOneSavedItem,
.removeRecentlyUsedItem,
.removeRecentElement {
   background: rgba(39, 10, 10, 0.88);
   cursor: pointer;
   display: inline-block;
   font-weight: 500;
   font-size: 10px;
   height: 17px;
   width: 15px;
   line-height: 20px;
   text-align: center;
   margin-left: 3px;
}

.removeOneSavedItem,
.removeRecentlyUsedItem {
   position: absolute;
   right: 2px;
   top: 2px;
   cursor: alias;
}

.theJSType {
   position: absolute;
   top: 1px;
   left: 3px;
   height: 12px;
   line-height: 12px;
   font-size: 9px;
   opacity: 0.7;
}

.addCSSRulesRow {
   margin-bottom: 5px;
   padding: 8px 8px 8px 15px;
   position: relative;
}

.cssParseRulesArea {
   /* background: #053131; */
   border: 1px solid #000000;
   padding: 0px;
   color: lightgray;
   height: 160px;
   overflow-x: hidden;
   display: none;
}

   .structureObjectSaveLoadArea {
      border: 2px solid #000000;
      background: #373748b0;
      width: 90%;
      margin-left: 5%;
      margin-bottom: 15px;
      display: none;
   }

   .structureObjectSaveRow,
   .structureObjectLoadRow {
      padding: 6px;
      border: 1px solid #00000040;
   }

   .structureObjectSaveRow {
      margin-bottom: 12px;
   }

   .structureObjectSaveRowTitle,
   .structureObjectLoadRowTitle {
      display: inline-block;
      padding: 6px;
      background: dimgray;
      color: lightblue;
      background: #090931;
      width: 127px;
      padding: 0px 6px;
   }

   .structureObjectSave,
   .structureObjectLoad {
      border: 1px solid #000000;
      background: #0a1727;
      display: inline-block;
      color: white;
      padding: 0px 6px;
      cursor:  pointer;
      color: lightblue;
      border: 1px solid #000000b0;
   }

     .cssParseRulesAreaTitle .fa-window-close,
     .cssParseAreaButton {
            position: absolute;
            color: lightgray;
            cursor: pointer;
            top: 0;
            left: 21px;
      }

    .cssParseAreaButton {
            opacity: .6;
             transition: .2s opacity;
         }
         .cssParseAreaButton:hover {
            opacity: 1;
         }

.cssParseRulesAreaTitle .fa-window-close {
   left: unset;
   right: 8px;
   
}





 .cssParseRulesAreaTitle {
            line-height: 35px;
            background: black;
            position: relative;
            text-align: center;
            padding: 0;
            height: 35px;
         }

.cssParseRulesAreaTitle .oneHelpButton {
            height: 30px;
            line-height: 34px;
   font-size: 12px;
      }

   #styleActualParseArea,
   #creationActualParseArea,
   #rulesetAreaActualParseArea {
      /* border: 1px solid yellow; */
      padding: 3px;
      position: relative;
      height: calc(100% - 35px);
      overflow-x: hidden;
   }




#previewPageStyleEditorContainer .addCSSRulesRow {
   text-align: left;
}

.addCSSRuleTitle {
   text-align: center;
   padding-bottom: 6px;
   cursor: default;
}

.addCustomCSSRule {
   cursor: pointer;
   background: rgb(9, 10, 21);
   padding: 0px 8px;
   display: inline-block;
   margin-right: 2%;
}


#rulesetRuleInput,
#createItems #CSSRuleInput,
#styleSelectCSSRules #styleCSSRuleInput {
   border: 1px solid rgb(15, 15, 15);
   background: rgb(27, 27, 28);
   width: 50%;
   color: lightgray;
}

#previewPage #styleSelectCSSRules #styleCSSRuleInput {
   width: 64%;
}

#createItems #CSSRuleInput:disabled,
#styleSelectCSSRules #styleCSSRuleInput:disabled {
   background: rgb(12, 12, 12);
   color: rgb(94, 94, 94);
}

#sessionBackupDropdown:disabled,
#scratchBackupSelect:disabled,
#shortcutsBackupDropdown:disabled {
   background: rgb(12, 12, 12);
   color: rgb(94, 94, 94);
}

.customOrSaved {
   background: black;
   padding: 0px 3px;
   border: 1px solid rgb(42, 42, 42);
   display: inline-block;
   cursor: pointer;
   opacity: 0.3;
}

#previewPage .customOrSaved {
   display: none;
}

.customOrSavedActive {
   background: rgb(11, 11, 34);
   font-weight: 600;
   opacity: 1;
}

.switchToStyles {
   background: rgb(68, 74, 85);
   display: inline-block;
   height: 15px;
   width: 15px;
   line-height: 15px;
   text-align: center;
   position: relative;
   margin-top: 12px;
   opacity: 0.4;
   transition: opacity 0.3s ease 0s;
   cursor: pointer;
   font-size: 11px;
}

#previewPageStyleEditorContainer .switchToStyles {
   display: none;
}

#twoMainContainers[data-leftcontainerbottom="shortcutSection"] .switchToStyles,
#twoMainContainers[data-leftcontainertop="shortcutSection"] .switchToStyles,
#twoMainContainers[data-rightcontainerbottom="shortcutSection"] .switchToStyles,
#twoMainContainers[data-rightcontainertop="shortcutSection"] .switchToStyles,
#twoMainContainers[data-overlaycontainertop="shortcutSection"] .switchToStyles,
#twoMainContainers[data-overlaycontainerbottom="shortcutSection"] .switchToStyles {
   opacity: 0.4;
   cursor: pointer;
}

#twoMainContainers[data-leftcontainerbottom="shortcutSection"] .switchToStyles:hover,
#twoMainContainers[data-leftcontainertop="shortcutSection"] .switchToStyles:hover,
#twoMainContainers[data-rightcontainerbottom="shortcutSection"] .switchToStyles:hover,
#twoMainContainers[data-rightcontainertop="shortcutSection"] .switchToStyles:hover,
#twoMainContainers[data-overlaycontainertop="shortcutSection"] .switchToStyles:hover,
#twoMainContainers[data-overlaycontainerbottom="shortcutSection"] .switchToStyles:hover {
   opacity: 0.7;
}

.switchToStyles,
#page #twoMainContainers .switchToStyles[data-activegroup="styles"],
#page #twoMainContainers .stylesIsActive[data-activegroup="styles"]:hover {
   opacity: 0.2;
   cursor: default;
}

.customOrSaveColorButton {
   display: inline-block;
}

#CSSRuleInput,
.consoleInputSpecial.inlineSpecialContainer,
.addCustomCSSRule,
.addCSSRulesRow .customOrSaved {
   height: 38px;
   line-height: 38px;
   vertical-align: top;
}

.cssRulesPreviewParseButton,
.cssRulesPreviewTitle {
   position: absolute;
   right: 7px;
   opacity: 0.9;
   cursor: default;
   color: rgb(107, 105, 105);
}

.cssRulesPreviewParseButton {
   right: 11px;
   transition: .1s color;
   top: 7px;
}

.cssRulesPreviewParseButton:hover {
   color: gray;
   cursor: pointer;
   opacity: 1;
}

.removeStyleCodeBlock {
   display: inline-block;
   margin-left: 10px;
   color: rgb(157, 157, 157);
   cursor: pointer;
   opacity: 0.8;
}

.CSSCopySection {
   position: absolute;
   top: unset;
   right: 10px;
   bottom: 0px;
   width: 100px;
   height: 32px;
   line-height: 28px;
   padding-left: 5px;
}

.styleAddedCSSRules .CSSCopySection {
   width: unset;
}

.CSSButtonCopy {
   opacity: 0.4;
   top: unset;
   bottom: unset;
   left: unset;
   position: absolute;
   right: 0px;
}

.styleAddedCSSRules .CSSButtonCopy {
   top: 0px;
   right: 0px;
}

.styleEditorButton {
   display: inline-block;
   background: rgb(4, 11, 23);
   color: rgb(139, 137, 137);
   cursor: pointer;
   margin: 0px 5px;
   width: 69px;
   text-align: center;
   opacity: 0.5;
   transition: opacity 0.3s ease 0s;
   font-size: 10px;
   height: 15px;
   line-height: 14px;
}

#previewPage .styleEditorButton.toEditorsButton {
   display: none;
}

#codeCreate .styleEditorButton.toExportButton {
   display: none;
}

.activeRulesBlock,
.inactiveRulesBlock {
   display: none;
}

.allAddedCSSRules[data-status="active"] .activeRulesBlock {
   display: block;
}

.allAddedCSSRules[data-status="inactive"] .inactiveRulesBlock {
   display: block;
}

.styleEditorButton:hover {
   opacity: 0.9;
}

.styleAddedCSSRules[data-status="active"] .styleEditorButton.makeActiveButton:hover,
.styleAddedCSSRules[data-status="active"] .styleEditorButton.makeActiveButton {
   opacity: 0.5;
   cursor: default;
}

.absoluteContainer {
   position: absolute;
   width: 100%;
   height: 100%;
   top: 0px;
   left: 0px;
}

.relativeContainer {
   position: relative;
   width: 100%;
   height: 100%;
   top: 0px;
   left: 0px;
}

#blockOpenNewTab {
   background: rgb(28, 49, 67);
   opacity: 0.7;
   cursor: default;
}

.styleAddedCSSRules .relativeContainer {
   padding-right: 40px;
}

.CSSCopied {
   display: none;
   left: 5px;
   position: absolute;
   color: rgb(141, 141, 141);
}

.styleCSSCopySection.CSSCopied {
   top: -29px;
   right: 0px;
   left: unset;
}

.styleInactiveCSS {
   top: -19px;
   right: 70px;
   position: absolute;
   color: rgb(141, 141, 141);
   font-size: 10px;
   display: none;
}

.addedJSListenersTitle {
   background: rgb(5, 17, 33);
   text-align: center;
   border-bottom: 1px solid rgb(83, 82, 82);
   margin-bottom: 4px;
}

.addedJSListeners {
   background: rgb(6, 6, 6);
   border: 1px solid rgb(53, 52, 52);
   margin-top: 8px;
   width: 97%;
   margin-left: 0%;
}

.oneAddedListener {
   padding: 2px 2px 2px 18px;
   border: 1px solid rgb(86, 86, 86);
   background: rgba(14, 25, 40, 0.97);
   color: rgb(154, 156, 154);
   margin: 2px 5px 2px 2px;
   display: inline-block;
   cursor: pointer;
   position: relative;
}


.oneAddedListener[data-active="yes"] {
      color: #7ca0b9;
      border: 1px solid;
}

.createListenersCallbackTitle {
   background: #0c1027;
   text-align: center;
   height: 30px;
   line-height: 30px;
   font-size: 15px;
}

    .itemCreationTidyCode {
        position: absolute;
        top: 0;
        left: 12px;
        cursor: pointer;
        font-size: 10px;
        opacity: .6;
    }



     #itemCreationContentEditor,
      #callbackSectionAce {
            height: 170px;
            width: 100%;
            /* height: 30px; */
            opacity: 1;
            /* display: none; */
      }


#itemCreationContentEditor,
#itemCreationContentEditor *,
#callbackSectionAce,
#callbackSectionAce * {
   font-size: 14px !important;
}

 #itemCreationContentEditor {
    bordeR: 1px solid #000000;
    /* margin: 10px; */
    margin-right: 39px;
    width: 94%;
    margin-left: 3%;
    margin-top: 6px;
    margin-bottom: 6px;
 }

#callbackSectionAce {
   border: 1px solid #000000;
   position: relative;
   width: 100%;
}

#itemCreationContentSection {
   /* border: 3px solid magenta; */
   background: #36363b;
   padding-bottom: 6px;
}

.createListenersContentCover {
   display: none;
}

.oneRecentlyCreatedItem {
   padding: 4px 6px 4px 4px;
   border: 1px solid rgb(86, 86, 86);
   background: rgba(22, 22, 23, 0.97);
   color: rgb(154, 156, 154);
   margin: 2px 5px 2px 2px;
   display: inline-block;
   cursor: pointer;
   position: relative;
   border-radius: 10%;
}

.addedJSListenersContainer {
   padding: 6px;
   min-height: 44px;
}

#testTextArea {
   position: fixed;
   top: -999999px;
   left: -999999px;
   z-index: 11111;
   width: 0px;
   height: 0px;
}

#stylesTempDisplay {
   position: absolute;
   top: 33px;
   z-index: 5;
   font-size: 9px;
   padding: 2px;
   line-height: 15px;
   opacity: 0.7;
   cursor: pointer;
   left: 12px;
   color: rgb(150, 186, 244);
}

.inlineSpecialContainer {
   display: inline-block;
   position: relative;
   height: 37px;
   vertical-align: top;
}

.inlineSpecialContainer .consoleInputSpecial {
   height: 37px;
   line-height: 37px;
}

#cssRulesetModule .consoleInputSpecial.cssImportant {
      display: none;
}

#userReports {
   background: rgb(6, 23, 33);
   position: fixed;
   height: calc(100% - 100px);
   left: 0px;
   top: 100px;
   z-index: 140;
   border: 2px solid rgb(0, 0, 0);
   color: white;
   width: 100%;
}

#genericTopBar {
   background: black;
   position: fixed;
   top: 0px;
   height: 70px;
   width: 100%;
   left: 0px;
}

.page-id-23 #genericTopBar {
   height: 100px;
}

.page-id-1436 #genericTopBar {
   left: 0px;
}

.genericLogoPartial {
   display: none;
}

#userReportsInner {
   height: 100%;
   width: 100%;
   position: relative;
   overflow-y: scroll;
   background: rgb(51, 50, 50);
}

.userReportsInnerLabel {
   background: black;
   padding: 40px;
   position: absolute;
   top: 782px;
   left: 100px;
}

.abcd,
.def {
   width: 80px;
   height: 80px;
   text-align: center;
   background: rgb(33, 6, 6);
   border: 2px solid cyan;
   display: inline-block;
   margin: 8px;
   line-height: 80px;
   font-size: 30px;
}

.def {
   background: rgb(45, 11, 50);
   border: 2px solid rgb(140, 131, 18);
}

#myTest1 {
   padding: 75px;
   background: rgb(8, 9, 41);
   border: 3px solid cyan;
   position: relative;
   margin-bottom: 700px;
   display: none;
}

#featureVotingOverlay,
#bugReportingOverlay {
   position: relative;
   background: rgb(51, 50, 50);
   overflow: hidden;
   width: 100%;
   border-bottom: none;
   border-top: none;
   padding: 0px;
}

#badgesTestArea {
   position: absolute;
   top: 0px;
   left: 0px;
   z-index: 100000000;
   height: 100%;
   width: 100%;
   background: black;
   padding: 6px;
   color: white;
   display: none;
}

#reportInputsOverlay {
   padding-top: 30px;
}

#modifiedBadgesSection {
   position: fixed;
   z-index: 150;
   padding: 20px;
   background: rgb(61, 14, 65);
   width: 680px;
   min-height: 200px;
   bottom: 60px;
   left: 60px;
   border: 2px solid black;
   display: none;
}

#featureVotingOverlay {}

.theVotesRemainingSection {
   position: absolute;
   left: 8px;
   top: 6px;
   padding: 3px;
   min-width: 183px;
   text-align: left;
   white-space: nowrap;
   color: lightgray;
}

#reportsTopInfo {
   width: calc(100% - 300px);
   top: 7px;
   left: 22px;
   position: fixed;
   height: 90px;
}

#entireReportsFilter,
#entireReportsFilterPositionTwo {
   display: inline-block;
   vertical-align: top;
   height: 86px;
   background: rgb(16, 21, 32);
   top: 6px;
   position: fixed;
   padding-left: 8px;
}

#entireReportsFilterPositionTwo {
   position: relative;
   top: 0px;
   display: none;
   margin-top: 20px;
   margin-left: 34px;
}

.reportsTopInfoFilterSection {
   display: inline-block;
   width: 565px;
   vertical-align: top;
   top: -1px;
   position: relative;
   padding-top: 10px;
   height: 81px;
   overflow: hidden;
}

#reportsAdminItems {
   position: absolute;
   top: 0;
   background: #1a364b;
   left: 982px;
}


.reportsAdminButton {
   cursor: pointer;
   padding: 6px;
   background: #0b1018;
   margin :4px;
   border: 1px solid black;
}

.reportsFilterWord {
   display: inline-block;
   line-height: 90px;
   color: rgb(199, 220, 227);
   margin-right: 9px;
}

#userReports[data-debugstatus="clean"] .theVotesRemainingSection {
   left: unset;
   right: 8px;
}

.reportsTopInfoSection {
   margin-right: 5px;
   display: inline-block;
   padding: 0px;
   overflow: hidden;
   text-align: center;
   margin-bottom: 5px;
}

.topInfoTitlePartial {
   display: none;
}

.reportsTopFilterButton {
   background: rgb(4, 7, 33);
   border: 1px solid rgba(7, 7, 7, 0.25);
   display: inline-block;
   cursor: pointer;
   font-size: 14px;
   width: 122px;
   text-align: center;
   color: lightgray;
   margin-right: 8px;
   opacity: 0.7;
   transition: opacity 0.2s ease 0s;
   position: relative;
}

.reportsTopFilterButton .suspendedCover {
   background: rgb(32, 32, 32);
   position: absolute;
   top: 0px;
   left: 0px;
   width: 100%;
   height: 100%;
   opacity: 0;
   cursor: pointer;
}

.reportsHelpButton {
   position: absolute;
   top: 30px;
   right: 15px;
   opacity: 0.4;
}

.reportsTopFilterButton.reportButtonActive .suspendedCover {
   cursor: default;
}

.reportsTopFilterButton[data-active="active"] {
   background: rgb(6, 42, 67);
   opacity: 1;
   cursor: default;
   border: 1px solid rgba(13, 98, 158, 0.36);
}

.reportsTopFilterButton.suspended .suspendedCover {
   display: block;
   opacity: 0.7;
   cursor: pointer;
   border: 1px dashed rgba(53, 130, 142, 0.32);
}

.reportsTopInfoTitle {
   border: none;
   background: rgba(10, 22, 62, 0.92);
   margin-left: 5px;
   font-size: 19px;
   font-family: consolas;
   color: rgb(149, 177, 229);
   margin-top: 23px;
   padding: 5px;
}

.verifiedOrAllDiv,
.pageOrUserDiv {
   position: absolute;
   top: -28px;
   opacity: 0.6;
   left: 161px;
}

#reportsAdminButtonInformation {
   position: absolute;
   border: 3px solid rgb(61, 104, 135);
   background: rgb(21, 21, 97);
   z-index: 30;
   top: 0px;
   padding: 0px;
   display: none;
}

#userReports[data-debugstatus="debug"] #reportsAdminButtonInformation,
#userReports[data-debugstatus="normal"] #reportsAdminButtonInformation {
   display: block;
}

#userReports[data-debugstatus="clean"] .validOrAllDiv,
#userReports[data-debugstatus="clean"] .pageOrUserDiv,
#userReports[data-debugstatus="normal"] .validOrAllDiv,
#userReports[data-debugstatus="normal"] .pageOrUserDiv {}

#userReports[data-debugstatus="normal"] .cc_debug_title {
   display: none;
}

.pageOrUserDiv {
   left: 490px;
}

.votesRemaining {
   display: inline-block;
}

.featureVotingTitle,
.bugReportingTitle,
.reportingInputsTitle {
   background: rgb(13, 22, 49);
   padding: 8px;
   text-align: center;
   border-bottom: 1px solid rgba(108, 108, 108, 0.54);
}

.oneReportingInputLine {
   border-top: 1px solid;
   border-right: 1px solid;
   border-left: 1px solid;
   border-image: initial;
   text-align: center;
   padding: 10px;
   border-bottom: none;
}

.reportingInputLines {
   background: rgb(15, 26, 46);
}

.oneReportingInputLine[data-type="userSubmitted"] {
   display: none;
}

.reportSubmissionLine {
   padding: 4px;
   background: rgb(15, 26, 46);
   text-align: center;
}

.someReportingNotes {
   background: black;
   padding: 12px;
   font-size: 1.2em;
   display: none;
}

#bugsSubmitReportButton[data-status="inactive"],
#featuresSubmitReportButton[data-status="inactive"] {
   opacity: 0.4;
   background: black;
   cursor: default;
   transition: all 0.3s ease 0s;
}

.reportSubmissionButton {
   cursor: pointer;
   background: rgb(15, 47, 5);
   border: 1px solid rgb(43, 43, 43);
   padding: 6px;
   margin: 6px;
   display: inline-block;
}

.confirmSubmissionButton {
   background: rgb(0, 81, 128);
}

.oneReportingInputLine:last-child {
   border-bottom: 1px solid;
}

.oneReportingInputLine,
.oneReportingInputLine:last-child {
   border-top-color: rgba(53, 67, 71, 0.55);
   border-bottom-color: rgba(53, 67, 71, 0.55);
   border-left: none;
   border-right: none;
}

.oneReportingInputLine input,
.oneReportingInputLine textarea,
#featuresUserName,
#bugsUserName {
   background: black;
   color: lightgray;
   height: 26px;
   margin-left: 15px;
   border: 1px solid rgb(75, 75, 75);
   width: 300px;
   display: inline-block;
}

.oneReportingInputLine textarea {
   height: unset;
   min-height: 100px;
}

.oneReportingInputLine[data-type="votes"],
.oneReportingInputLine[data-type="feasibility"],
.oneReportingInputLine[data-type="instances"] {
   display: none;
}

#featuresUserName,
#bugsUserName {
   border: 3px solid purple;
}

.oneReportingInputLine textarea {
   width: 300px;
   height: unset;
}

.thisReportingInputTitle {
   border: 1px solid black;
   display: inline-block;
   width: 200px;
   background: rgb(25, 48, 71);
   vertical-align: top;
   text-transform: capitalize;
}

#reportsPagePPA {
   position: fixed;
   top: 0px;
   left: 0px;
   color: white;
   height: 100%;
   width: 60%;
   z-index: 2147483647;
   background: black;
   border: 4px solid cyan;
   line-height: 29px;
   overflow: auto;
   display: none;
}

.userReportingContainer,
.reportingInputs {
   border: 2px solid rgb(95, 94, 92);
   position: relative;
   background: rgb(39, 42, 50);
   width: 96%;
   margin-left: 2%;
}

#userReports[data-debugstatus="normal"] .userReportingContainer {
   width: 96%;
   margin-left: 2%;
}

.userReportingContainer {
   border: 1px solid rgb(51, 51, 51);
}

.userReportingContainer[data-validorall="validOnly"] {}

#userReports[data-debugstatus="clean"] .userReportingContainer {
   margin-bottom: 40px;
   margin-top: 30px;
}

#userReports[data-debugstatus="clean"] .featureVotingCell {
   width: 20%;
}

#userReports[data-debugstatus="clean"] .featureVotingCell[data-type="feasibility"],
#userReports[data-debugstatus="clean"] .featureVotingCell[data-type="votes"] {
   width: 10%;
}

#userReports[data-debugstatus="clean"] .cc_debug_title {
   display: none;
}

.reportingInputsTitle {
   background: rgb(0, 3, 4);
   position: relative;
}

.featureVotingCell[data-type="feasibility"] {
   display: none;
}

#userReports[data-adminstatus="admin"] .featureVotingCell[data-type="feasibility"] {
   display: inline-block;
}

.userReportingContainer[data-type="bugs"],
.reportingInputs[data-type="bugs"] {
   background: rgb(39, 42, 50);
}

.reportingInputs {
   background: rgb(24, 28, 29);
}

.reportsFilterSection {
   position: absolute;
   left: 4px;
   width: 41%;
   top: 0px;
   text-align: left;
}

.reportsFilterSectionTitle,
.reportsFilterInput,
.reportsFilterSectionButton,
.filterSemiColon {
   display: inline-block;
   border: 1px solid dimgray;
   height: 30px;
   line-height: 32px;
   vertical-align: top;
   color: lightblue;
}

.filterSemiColon {
   border: none;
   position: relative;
   right: 1px;
}

.reportsFilterSectionTitle {
   background: none;
   border: none;
   cursor: pointer;
   position: relative;
   top: 2px;
}

.reportsFilterInner {
   display: none;
   position: relative;
   top: 2px;
   width: calc(100% - 71px);
}

#page .reportsFilterInput {
   width: calc(100% - 129px);
   background: black;
   border: 1px solid rgba(69, 99, 99, 0.49);
   color: rgb(137, 212, 234);
   height: 29px;
   top: 1px;
   position: relative;
}

.reportsFilterSectionButton {
   display: inline-block;
   background: rgb(44, 64, 102);
   border: 1px solid black;
   cursor: pointer;
   width: 52px;
   text-align: center;
   line-height: 28px;
}

.headerRow.oneFeatureForVotingLine,
.headerRow.oneBugForReportingLine {
   background: rgb(9, 9, 9);
   border-bottom: 1px solid rgb(81, 86, 86);
   text-transform: capitalize;
   height: 30px;
   display: none;
}

.bugReportingTitle {}

#page .featuresForVoting,
#page .bugReportingLines {
   background: rgb(39, 42, 50);
   padding-top: 26px;
   padding-left: 20px;
   padding-right: 20px;
}

.ww {
   position: absolute;
   top: 0px;
   right: 0px;
}

.featureVotingCell,
.bugReportingCell {
   display: inline-block;
   width: 10.5%;
   height: 34px;
   line-height: 34px;
   vertical-align: top;
   overflow: hidden;
   border-right: 1px solid rgba(255, 255, 255, 0.09);
   text-align: center;
   position: relative;
}

.featureVotingCell {}

#userReports[data-debugstatus="normal"] .featureVotingCell {
   width: 14.285%;
}

#userReports[data-debugstatus="normal"] .viewFeasibilitySection {
   display: none;
}

#userReports[data-debugstatus="clean"] .featureVotingCell,
#userReports[data-debugstatus="clean"] .bugReportingCell,
#userReports[data-debugstatus="normal"] .featureVotingCell,
#userReports[data-debugstatus="normal"] .bugReportingCell {
   height: 130px;
   white-space: initial;
   width: 16.666%;
   overflow-y: hidden;
}

#userReports[data-debugstatus="clean"] .bugReportingCell {
   width: 25%;
   min-width: 120px;
}

#userReports[data-debugstatus="clean"] .bugReportingCell[data-type="instances"] {
   width: 100px;
   min-width: 100px;
   border-right: none;
   position: absolute;
   left: 0px;
   height: 60px;
   background: rgb(11, 11, 57);
   top: 93px;
}

#userReports[data-debugstatus="clean"] .bugReportingCell[data-type="description"] {
   margin-left: 25%;
   border-left: 1px solid rgba(255, 255, 255, 0.09);
}

#userReports[data-debugstatus="clean"] .bugReportingCell[data-type="userSubmitted"],
#userReports[data-debugstatus="clean"] .bugReportingCell[data-type="name"],
#userReports[data-debugstatus="clean"] .bugReportingCell[data-type="instances"],
#userReports[data-debugstatus="clean"] .featureVotingCell[data-type="name"],
#userReports[data-debugstatus="clean"] .featureVotingCell[data-type="userSubmitted"],
#userReports[data-debugstatus="clean"] .featureVotingCell[data-type="votes"] {
   width: 25%;
   position: absolute;
   z-index: 4;
   left: 0px;
   height: 50px;
   top: 1px;
   line-height: 40px;
   padding: 3px 0px 0px;
   background: rgb(18, 18, 19);
   border: none;
}

#userReports[data-debugstatus="clean"] .featureVotingCell[data-type="votes"] {
   height: 50px;
   top: 100px;
}

#userReports[data-debugstatus="clean"] .featureVotingCell[data-type="userSubmitted"] {
   top: 50px;
}

#userReports[data-debugstatus="clean"] .bugReportingCell[data-type="instances"] {
   position: absolute;
   left: 0px;
   background: rgb(18, 18, 19);
   top: 100px;
}

#userReports[data-debugstatus="clean"] .bugReportingCell[data-type="userSubmitted"] {
   top: 50px;
}

#userReports[data-debugstatus="clean"] .featureVotingCell {
   width: 37.5%;
   height: 150px;
}

#userReports[data-adminstatus="admin"] .featureVotingCell {
   border: 1px solid rgb(0, 255, 47);
   width: 25%;
}

#userReports[data-debugstatus="clean"] .featureVotingCell[data-type="description"] {
   margin-left: 25%;
   border-left: 1px solid rgba(255, 255, 255, 0.09);
}

#page .oneBugForReportingLine.originalRow,
#page .oneFeatureForVotingLine.originalRow #userReports[data-debugstatus="clean"] .featureVotingCell,
#userReports[data-debugstatus="clean"] .bugReportingCell,
#userReports[data-debugstatus="normal"] .featureVotingCell,
#userReports[data-debugstatus="normal"] .bugReportingCell {
   height: 150px;
   background: inherit;
}

.oneBugForReportingLine .fa-angle-double-up,
.oneFeatureForVotingLine .fa-angle-double-up {
   opacity: 0;
}

.oneBugForReportingLine.expandActive .fa-angle-double-up,
.oneFeatureForVotingLine.expandActive .fa-angle-double-up {
   opacity: 1;
}

.oneBugForReportingLine.expandActive .fa-ellipsis-h,
.oneFeatureForVotingLine.expandActive .fa-ellipsis-h {
   opacity: 0;
}

.reportingNoResults {
   height: 40px;
   line-height: 40px;
   padding-left: 15px;
   font-size: 19px;
   color: lightblue;
   position: relative;
   bottom: 17px;
   display: none;
}

#page .oneBugForReportingLine.originalRow,
#page .oneFeatureForVotingLine.originalRow {
   display: none !important;
}

.bugReportingCell .manualDots,
.featureVotingCell .manualDots {
   position: absolute;
   background: rgb(23, 23, 23);
   z-index: 20;
   bottom: 0px;
   right: 0px;
   border: 2px solid rgba(175, 175, 209, 0.12);
   cursor: pointer;
   width: 45px;
   height: 45px;
   text-align: center;
   line-height: 45px;
}

.expandActive .manualDots {
   opacity: 0.7;
   background: none;
   height: 26px;
   line-height: 26px;
   border: none;
}

.bugReportingCell .manualDots .fas,
.featureVotingCell .manualDots .fas {
   position: absolute;
   left: 13px;
   transition: opacity 0.35s ease 0s;
}

.bugReportingCell[data-type="howToReplicate"],
.bugReportingCell[data-type="comments"],
.bugReportingCell[data-type="description"] {
   text-align: left;
}

#userReports .headerRow .bugReportingCell,
#userReports .headerRow .featureVotingCell {
   text-align: center;
   height: 30px;
}

.reportInnerText:not(#userReports [data-type="actions"] .reportInnerText) {
   white-space: initial;
   padding: 6px;
   display: inline-block;
   vertical-align: top;
   overflow: hidden;
   height: unset;
   transition: height 0.3s ease 0s;
   line-height: 30px;
}

.reportInnerText {}

#userReports [data-type="actions"] .reportInnerText {
   border: 3px solid rgb(75, 151, 60);
   background: rgb(63, 24, 24);
   top: 15px;
   height: 30px;
   overflow: hidden;
}

#userReports[data-debugstatus="clean"] .bugReportingCell[data-type="userSubmitted"] .reportInnerText,
#userReports[data-debugstatus="clean"] .bugReportingCell[data-type="name"] .reportInnerText,
#userReports[data-debugstatus="clean"] .bugReportingCell[data-type="instances"] .reportInnerText,
#userReports[data-debugstatus="clean"] .featureVotingCell[data-type="name"] .reportInnerText,
#userReports[data-debugstatus="clean"] .featureVotingCell[data-type="userSubmitted"] .reportInnerText,
#userReports[data-debugstatus="clean"] .featureVotingCell[data-type="votes"] .reportInnerText {
   width: 100%;
   text-align: left;
   line-height: 20px;
   padding: 2px 0px 0px;
   min-height: unset;
   background: rgb(18, 18, 19);
   height: 50px;
   border: none;
   white-space: nowrap;
}

#userReports[data-debugstatus="clean"] .featureVotingCell[data-type="userSubmitted"] .reportInnerText {}

.reportInnerTextInfo {
   display: inline-block;
   margin-top: 30px;
}

.rito2 {
   position: absolute;
   right: 0px;
   opacity: 0.16;
}

#userReports[data-debugstatus="clean"] .bugReportingCell[data-type="userSubmitted"] .reportInnerTextInfo,
#userReports[data-debugstatus="clean"] .bugReportingCell[data-type="name"] .reportInnerTextInfo,
#userReports[data-debugstatus="clean"] .bugReportingCell[data-type="instances"] .reportInnerTextInfo,
#userReports[data-debugstatus="clean"] .featureVotingCell[data-type="name"] .reportInnerTextInfo,
#userReports[data-debugstatus="clean"] .featureVotingCell[data-type="userSubmitted"] .reportInnerTextInfo,
#userReports[data-debugstatus="clean"] .featureVotingCell[data-type="votes"] .reportInnerTextInfo {
   margin-top: 0px;
   text-overflow: ellipsis;
   width: calc(100% - 80px);
   overflow: hidden;
   top: 6px;
   position: relative;
}

.reportInnerTextTitle {
   text-align: center;
   background: rgb(20, 20, 22);
   position: absolute;
   top: 0px;
   left: 0px;
   width: 100%;
   text-transform: capitalize;
   border-bottom: 1px solid dimgray;
}

.idClickable {
   border: 3px solid rgb(24, 55, 14);
   background: rgb(7, 48, 29);
   cursor: pointer;
   position: absolute;
   top: 0px;
   font-weight: 600;
   height: 25px;
   line-height: 22px;
   opacity: 0.6;
   right: 0px;
}

.reportsIDDisplay {
   border: 1px solid rgb(135, 137, 136);
   position: absolute;
   width: 100%;
   background: rgb(4, 4, 43);
   height: 55px;
   text-transform: none;
   display: none;
}

#userReports[data-debugstatus="clean"] .bugReportingCell[data-type="userSubmitted"] .reportInnerTextTitle,
#userReports[data-debugstatus="clean"] .bugReportingCell[data-type="name"] .reportInnerTextTitle,
#userReports[data-debugstatus="clean"] .bugReportingCell[data-type="instances"] .reportInnerTextTitle,
#userReports[data-debugstatus="clean"] .featureVotingCell[data-type="name"] .reportInnerTextTitle,
#userReports[data-debugstatus="clean"] .featureVotingCell[data-type="userSubmitted"] .reportInnerTextTitle,
#userReports[data-debugstatus="clean"] .featureVotingCell[data-type="votes"] .reportInnerTextTitle {
   display: inline-block;
   width: 80px;
   text-transform: capitalize;
   height: 33px;
   line-height: 33px;
   text-align: left;
   padding-left: 5px;
   background: rgb(22, 36, 57);
   position: relative;
   border: none;
   margin-left: 3px;
}

#page .expandActive .featureVotingCell,
#page .expandActive .bugReportingCell,
#page .expandActive .reportInnerText {
   height: 100%;
}

.featureVotingCell[data-type="feasibility"] .reportInnerText {}

#userReports[data-debugstatus="normal"] .featureVotingCell[data-type="feasibility"] .reportInnerText {
   display: none;
}

#userReports[data-debugstatus="clean"] .featureVotingCell[data-type="id"],
#userReports[data-debugstatus="clean"] .bugReportingCell[data-type="id"] {
   display: none;
}

#userReports[data-debugstatus="normal"] .featureVotingCell[data-type="id"],
#userReports[data-debugstatus="normal"] .bugReportingCell[data-type="id"] {
   display: none;
}

#userReports[data-debugstatus="normal"] .userReportButton {
   display: none;
}

.oneFeatureForVotingLine,
.oneBugForReportingLine {
   white-space: nowrap;
   overflow: hidden;
   transition: height 0.4s ease 0s;
   height: 150px;
   position: relative;
   background: rgb(18, 18, 19);
   margin-bottom: 35px;
   border-left: none;
   border-right: none;
}

#userReports[data-adminstatus="admin"] .oneBugForReportingLine,
#userReports[data-adminstatus="admin"] .oneFeatureForVotingLine,
#userReports[data-adminstatus="comments"] .oneBugForReportingLine,
#userReports[data-adminstatus="comments"] .oneFeatureForVotingLine {
   overflow: unset;
   padding-bottom: 310px;
}

.oneFeatureForVotingLine {}

.oneFeatureForVotingLine.oddRow,
.oneBugForReportingLine.oddRow {
   background: rgb(18, 18, 19);
}

.featureVotingCell[data-type="actions"],
.bugReportingCell[data-type="actions"] {
   min-width: 160px;
}

#userReports[data-debugstatus="debug"] .featureVotingCell[data-type="name"],
#userReports[data-debugstatus="debug"] .featureVotingCell[data-type="description"],
#userReports[data-debugstatus="debug"] .featureVotingCell[data-type="userSubmited"],
#userReports[data-debugstatus="debug"] .featureVotingCell[data-type="actions"],
#userReports[data-debugstatus="debug"] .bugReportingCell[data-type="actions"] {
   min-width: unset;
   max-width: 15px;
}

#userReports .featureVotingCell[data-type="actions"],
#userReports .bugReportingCell[data-type="actions"] {
   border: 3px solid rgb(45, 86, 106);
   height: 71px;
   background: rgb(74, 104, 101);
   position: absolute;
   top: 175px;
   right: 0px;
   width: 276px;
}

#userReports[data-adminstatus="normal"] [data-type="actions"],
#userReports[data-adminstatus="comments"] [data-type="actions"] {
   display: none;
}

.developerComments,
.developerCommentsTextarea {
   display: block;
   position: absolute;
   border: 2px solid rgb(74, 72, 74);
   z-index: 33;
   background: rgb(2, 2, 61);
   width: 64%;
   left: 25%;
   top: 8px;
   height: 141px;
   white-space: normal;
}

.developerComments {
   display: none;
}

.developerCommentsTextarea {
   padding: 0px;
   border: 1px solid rgb(120, 119, 115);
   top: 150px;
   left: 0px;
   background: rgb(55, 53, 53);
}

.developerCommentsTextarea textarea {
   background: rgb(13, 13, 27);
   color: rgb(197, 197, 197);
   height: 99px;
   border: 2px solid rgba(105, 105, 105, 0.49);
   width: 89%;
   margin-left: 1%;
   margin-top: 5px;
   padding: 6px;
}

.devCommentsSave,
.devCommentsRand {
   border: 2px solid black;
   position: absolute;
   right: 3px;
   cursor: pointer;
   top: 43px;
   background: rgb(8, 8, 67);
}

.devCommentsRand {
   top: 83px;
   background: rgb(109, 41, 121);
}

#userReports[data-adminstatus="normal"] .developerCommentsTextarea {
   display: none;
}

.showDeveloperCommentsButton {
   position: absolute;
   background: rgba(105, 105, 105, 0.65);
   z-index: 15;
   bottom: 0px;
   top: unset;
   height: 25px;
   width: 25px;
   text-align: center;
   line-height: 25px;
   cursor: pointer;
   right: 0px;
}

#userReports[data-adminstatus="admin"] .showDeveloperCommentsButton {
   z-index: 13;
}

.developerCommentsTitle,
.developerEditCommentTitle {
   background: black;
   color: rgb(195, 195, 195);
   height: 20px;
   position: relative;
   text-align: center;
}

.developerCommentsInner {
   padding: 9px;
   border-top: 1px solid rgb(91, 91, 91);
   height: 91px;
   overflow-y: auto;
   background: rgb(26, 26, 43);
   color: rgb(196, 196, 196);
}

.feasibilityDisplay {
   width: 100px;
   position: absolute;
   right: 0px;
   height: 24px;
   background: rgba(75, 107, 118, 0.39);
   bottom: 1px;
   text-align: center;
   color: rgb(178, 177, 177);
   display: none;
}

.userReportingContainer[data-type="bugs"] .feasibilityDisplay {
   display: none;
}

.closeDeveloperComments {
   position: absolute;
   top: 0px;
   cursor: pointer;
   right: 8px;
}

.reportingActions {
   background: rgb(7, 10, 44);
   display: none;
}

.developerComments .reportingActions {
   display: inline-block;
   width: 100%;
}

.reportingActions[data-loc="actionAdminsCommentsArea"] {
   display: none;
}

#page .bugReportingCell[data-type="actions"] .reportingActions[data-loc="actionAdminsCommentsArea"],
#page .featureVotingCell[data-type="actions"] .reportingActions[data-loc="actionAdminsCommentsArea"],
.developerComments .reportingActions[data-loc="actionAdminsCommentsArea"] {
   display: block;
   height: 27px;
}

.adminActionsOverlay {
   position: absolute;
   background: rgb(86, 23, 100);
   bottom: 0px;
   height: 27px;
   width: 100%;
   opacity: 0.4;
   color: rgba(0, 0, 255, 0);
}

.developerComments .reportingActions {
   border-right: none;
   border-bottom: none;
   border-left: none;
   border-image: initial;
   border-top: 1px solid rgb(100, 102, 100);
   padding-left: 30px;
   padding-top: 2px;
}

.featureVotingCell[data-type="votes"],
.bugReportingCell[data-type="instances"],
.featureVotingCell[data-type="feasibility"] {
   width: 126px;
}

.featureVotingCell[data-type="votes"] .rito2,
.bugReportingCell[data-type="instances"] .rito2 {
   display: none;
}

.featureVotingCell[data-type="feasibility"] input {
   background: rgb(5, 5, 25);
   color: white;
   height: 25px;
   width: 40px;
   border: 1px solid rgb(23, 23, 23);
   text-align: center;
   padding: 0px;
}

.viewFeasiblitySection {
   display: none;
}

#userReports[data-debugstatus="clean"] .feasibilitySubmissionSection {}

.viewFeasibilitySection {
   border: 1px solid red;
   background: rgb(114, 47, 22);
   display: none;
}

#userReports[data-debugstatus="clean"] .viewFeasiblitySection {
   display: block;
}

.featureVotingCell[data-type="id"],
.bugReportingCell[data-type="id"] {
   min-width: 310px;
}

.reportingActions i {
   cursor: pointer;
   min-width: 20px;
}

.developerComments .reportingActions i {
   cursor: default;
}

#userReports [data-type="actions"] .badgeActive {
   border: 1px solid rgb(134, 73, 116);
   background: rgba(28, 95, 105, 0.68);
   height: 24px;
   position: relative;
   margin-top: 2px;
   line-height: 24px;
}

.developerComments .reportingActions i {
   text-align: center;
}

.developerComments .reportingActions i {
   display: none;
}

.developerComments i.badgeActive {
   display: inline-block;
}

.validAction {
   color: darkgreen;
}

.dubiousAction {
   color: rgb(96, 0, 100);
}

.badAction {
   color: rgb(120, 101, 17);
}

.likeAction {
   color: rgb(60, 145, 60);
}

.loveAction {
   color: rgb(100, 0, 0);
}

.nextAction {
   color: rgb(80, 169, 201);
}

.fillWithRandomData {
   padding: 2px;
   position: absolute;
   border: 1px solid dimgray;
   cursor: pointer;
   top: 4px;
   background: rgb(8, 8, 45);
   opacity: 0.5;
   left: 13px;
}

#userReports[data-debugstatus="clean"] .fillWithRandomData {
   display: none;
}

.fillWithRandomData.retrieveReports {
   right: 0px;
   background: rgb(12, 60, 87);
   left: unset;
}

.featureVotingCell:last-child,
.bugReportingCell:last-child {
   border: none;
}

#page .featuresForVoting .headerRow .userReportButton,
#page .bugReportingLines .headerRow .userReportButton {
   display: none;
}

.submitFeasibilityReport {
   background: rgb(60, 51, 72);
   display: inline-block;
   cursor: pointer;
   height: 20px;
   line-height: 20px;
   font-size: 11px;
   width: 30px;
   transition: all 0.3s ease 0s;
}

.userReportButton {
   display: inline-block;
   border: 1px solid rgba(0, 0, 0, 0.46);
   background: rgb(8, 34, 54);
   height: 20px;
   line-height: 20px;
   cursor: pointer;
   font-size: 10px;
   width: 40px;
   transition: all 0.3s ease 0s;
   position: relative;
   top: 5px;
}

.featureVotingCell .userReportButton {
   top: 12px;
   position: absolute;
   left: 125px;
   display: block !important;
}

.bugReportingCell .userReportButton {
   position: absolute;
   top: 13px;
   left: 154px;
}

#page .userReportingContainer[data-type="bugs"] .theVotesRemainingSection {
   display: none;
}

.userReportingContainer[data-type="bugs"][data-pageoruser="user"] .userReportButton {
   display: none;
}

.userReportButton[data-status="inactive"],
.submitFeasibilityReport[data-status="inactive"] {
   background: dimgray;
   cursor: default;
   opacity: 0.7;
}

.featureVotingInfo {
   border: 3px solid green;
}

#previewCodeOverlay {
   background: rgb(33, 27, 4);
   position: fixed;
   height: 100%;
   width: 100%;
   left: 0px;
   top: 0px;
}

#page[data-recordingbar="show"] #previewCodeOverlay {}

#reportsInformationSection {
   position: relative;
   min-height: 95px;
   background: rgb(51, 50, 50);
}

.reportsInformationSectionLabel,
.giveCellOverflowButtons {
   position: absolute;
   background: black;
   color: white;
   top: 0px;
   right: 0px;
   padding: 5px;
}

.reportsInformationSectionLabel {
   top: unset;
   bottom: 0px;
   z-index: 20;
}

.giveCellOverflowButtons {
   right: unset;
   left: 0px;
   background: rgb(11, 55, 69);
   cursor: pointer;
   top: unset;
   bottom: 0px;
   z-index: 30;
   opacity: 0.4;
   display: none;
}

#userReportsInnerCover {
   background: rgb(12, 12, 12);
   opacity: 1;
   position: absolute;
   height: 38000px;
   width: 100%;
   left: 0px;
   top: 0px;
   font-size: 12px;
   z-index: 30;
   padding: 70px;
}

.moreReportsInfo {
   position: relative;
   background: rgb(11, 11, 59);
   margin-top: 70px;
   border: 2px solid green;
   padding: 9px 9px 20px;
   width: 96%;
   margin-left: 2%;
   font-size: 1.2em;
   line-height: 1.4em;
   display: none;
}

#previewCodeOverlay.top45 {
   height: calc(100% - 45px);
   top: 45px;
}

#previewCodeHeader,
#previewCodeFooter,
#previewCodeAdminButtons,
#ccEncryptionBar {
   background: black;
   text-align: center;
   height: 30px;
   line-height: 30px;
   position: absolute;
   width: 100%;
   color: rgb(189, 189, 189);
   padding-left: 30px;
   z-index: 305;
}

#previewCodeHeader {
   padding-left: 2px;
}

#previewCodeFooter {
   padding-left: 12px;
}

#ccEncryptionBar {
   bottom: 40px;
   background: rgb(43, 53, 68);
   text-align: left;
   padding-left: 5px;
   height: 222px;
   display: none;
}

#codeCreate #ccEncryptionBar {
   font-size: 14px;
}

#page[data-width="showingConsoles"] #codeCreate #ccEncryptionBar {
   width: 60%;
}

.grabLocalSession.getPreviewKey {
   background: rgb(102, 88, 20);
   padding: 0px 15px;
   border: 1px solid black;
}

.grabLocalSession.getPreviewKey.rpi {
   background: rgb(16, 76, 94);
}

.grabLocalSession.getPreviewKey.chks {
   background: rgb(78, 37, 59);
}

.encryptionBarTitle {
   position: absolute;
   right: 0px;
}

.grabLocalSession {
   background: rgb(43, 43, 92);
   padding: 2px;
   display: inline-block;
   left: 0px;
   cursor: pointer;
}

#previewCodeFooter {
   text-align: left;
   height: 44px;
}

#previewCodeFooter[data-adminbuttonstate="shown"] #bottomButtonsContainer {
   display: none;
}

#page #previewCodeFooter[data-adminbuttonstate="shown"] #bottomButtonsContainer {
   display: inline-block;
   min-width: unset;
   overflow: hidden;
   /* border: 1px solid lightblue; */
   padding-left: 20px;
}

#page #previewCodeFooter[data-adminbuttonstate="shown"] .previewPageFork {
   display: none;
}

#previewCodeFooter[data-adminbuttonstate="hidden"] [data-adminbutton="yes"] {
   display: none;
}

.previewInformationSection {
   margin-left: 200px;
   display: none;
}

.functionFactoryDebug,
.createLineShortcuts {
   display: inline-block;
   background: rgb(84, 83, 18);
   cursor: pointer;
   margin-left: 70px;
   padding: 0px 5px;
   color: white;
   font-size: 18px;
   position: absolute;
   top: 0px;
   left: 154px;
   opacity: 0.8;
   left: unset;
   right: 36px;
}

.createLineShortcuts {
   left: 340px;
   width: 70px;
   background: blue;
   opacity: 1;
   display: none;
}

.functionFactoryDebug[data-functionfactorydebug="off"] {
   background: rgb(54, 4, 63);
   display: none;
}

.functionFactoryDebug[data-functionfactorydebug="on"] {
   background: rgb(62, 77, 62);
}

#page[data-functionfactorydebug="off"] .aceEditorAdminLabel {
   display: none;
}

#page[data-recordingbar="show"] .functionFactoryDebug,
#page[data-recordingbar="show"] .createLineShortcuts {
   display: none;
}

.previewInformationPartial,
.previewInformationTiny {
   display: none;
}

#previewCodeHeader {
   text-align: left;
   height: 35px;
   line-height: 36px;
   white-space: nowrap;
}

#previewCodeFooter {
   bottom: -1px;
}

#topMenuTempContainer {
   background: rgb(7, 52, 45);
   top: 30px;
   left: -8000px;
   width: 300px;
   position: fixed;
   height: 600px;
   z-index: 4444;
}

#topMenuTempContainer #topMenuSettingsMainContainer {
   position: relative;
   border: 2px solid black;
   height: 400px;
   background: rgb(60, 60, 66);
   overflow-y: auto;
}

#topMenuTempContainer #topMenuSettingsMainContainer .preferenceLine {
   display: block;
}

#previewPageSettingsCog {
   right: 20px;
   position: absolute;
   top: 6px;
   color: rgb(150, 150, 150);
   cursor: pointer;
}

#page[data-recordingbar="show"] #previewCodeFooter {}

#previewCodeAdminButtons {
   bottom: 35px;
   overflow: hidden;
   background: rgb(4, 45, 53);
   height: 41px;
}

#previewCodeAdminButtons[data-state="verySmall"] {
   width: 178px;
   right: 0px;
   background: none;
}

.tealButton {
   background: rgb(16, 77, 77);
}

#outerFrameContainer {
   position: absolute;
   top: 35px;
   height: calc(100% - 36px);
   width: 54%;
   left: 0px;
   border: 2px solid rgb(0, 0, 0);
   background: rgb(41, 41, 41);
   overflow: hidden;
}

#page.twoRows #outerFrameContainer {
   top: 70px;
   height: calc(100% - 70px);
}

#previewPage.styleEditorView #innerFrameContainer {
   width: 60%;
   display: inline-block;
   border: none;
   float: left;
}

#previewPage #previewCodeOverlay[data-headershown="true"][data-footershown="true"] #outerFrameContainer {
   top: 35px;
   height: calc(100% - 79px);
}

body[data-infocardstatus="on"] #outerFrameContainer {
   width: 100% !important;
}

#previewPage #previewCodeOverlay[data-headershown="true"][data-footershown="false"] #outerFrameContainer {
   top: 35px;
   height: calc(100% - 35px);
}

#previewPage #previewCodeOverlay[data-headershown="false"][data-footershown="true"] #outerFrameContainer {
   top: 0px;
   height: calc(100% - 44px);
}

#previewPage #previewCodeOverlay[data-headershown="false"][data-footershown="false"] #outerFrameContainer {
   top: 0px;
   height: 100%;
}

#previewPage.debugView #innerFrameContainer,
#innerFrameContainer {
   border: 2px solid blue;
   height: 93%;
   width: 96%;
   margin-left: 2%;
   text-align: right;
   background: rgb(15, 15, 43);
   padding: 6px;
   overflow: hidden;
   display: inline-block;
}

#page[data-recordingbar="show"] #innerFrameContainer {
   border: none;
}

#previewPage.debugView #innerFrameContainer {
   width: 45%;
}

#previewPageStyleEditorContainer {
   border: 2px solid rgb(158, 158, 158);
   height: 100%;
   width: 49%;
   text-align: right;
   background: rgb(44, 78, 88);
   overflow: hidden;
   display: inline-block;
   position: relative;
}

.styleEditorCloseRow {
   position: absolute;
   top: 36px;
   right: 15px;
   padding: 2px;
   z-index: 131;
   cursor: pointer;
   width: 100%;
   left: 0px;
   text-align: center;
}

.styleEditorClose {
   position: relative;
   margin: 0px auto;
   width: 180px;
   white-space: nowrap;
   overflow: hidden;
   background: rgb(28, 28, 28);
}

.styleEditorTinyCover {
   color: lightgray;
   text-align: left;
   padding: 8px;
}

.styleEditorTinyCover[data-location="previewPage"] {
   padding-top: 52px;
}

#previewPage.styleEditorView #previewPageStyleEditorContainer {
   width: 38%;
   border: 1px solid black;
}

#previewPageStyleEditorContainer .tinyCoverInnerText {
   padding: 58px 12px 12px;
}

.styleEditorCurrentWidth {
   padding-left: 12px;
}

#previewPage #innerFrameContainer {
   height: 100%;
   width: 100%;
   margin-left: 0px;
   padding: 0px;
}

#innerFrameContainer .normalDiv {
   background: rgb(48, 50, 51);
   text-align: center;
   color: lightgray;
   display: none;
}

#previewPage.debugView #theRenderedFrameContainer,
#theRenderedFrameContainer {
   border: 2px solid rgb(119, 133, 136);
   height: 472px;
   width: 100%;
   background: rgb(66, 73, 83);
   position: relative;
   overflow-y: auto;
}

#page[data-recordingbar="show"] #theRenderedFrameContainer {
   border: none;
}

#previewPage #theRenderedFrameContainer {
   height: 100%;
   overflow: hidden;
}

#page[data-recordingbar="show"] #theRenderedFrameContainer {
   overflow: hidden;
}

#previewPageAllSessionsContainer {
   background: rgba(0, 0, 0, 0.92);
   z-index: 50;
   color: white;
   padding: 30px;
   height: 100%;
   top: unset;
   opacity: 1;
   display: none;
}

.previewPageAllSessionsInner {
   position: relative;
   margin-left: 5%;
   width: 90%;
   transition: transform 0.8s ease 0s;
   height: 96%;
   overflow: hidden;
}

#imgTestingArea {
   position: absolute;
   border: 4px solid blue;
   background: rgb(51, 78, 81);
   height: 24%;
   width: 75%;
   padding: 15px;
   overflow: hidden;
   display: none;
}

#codeCreate #imgTestingArea {
   bottom: 30px;
   min-width: 300px;
   min-height: 200px;
   z-index: 333;
   max-width: 55%;
}

.getAllSessionSnaps,
.grabReadySnaps {
   background: darkblue;
   padding: 8px;
   cursor: pointer;
   display: inline-block;
}

.grabReadySnaps {
   background: indigo;
}

.imgTestingAreaInner {
   border: 4px solid rgb(140, 178, 57);
   min-height: 70px;
   background: rgb(65, 60, 60);
}

#previewAllSessionsTitle {
   background: rgb(0, 0, 0);
   display: block;
   padding: 2px;
   text-align: center;
   color: rgb(203, 202, 202);
   height: 37px;
   position: relative;
   line-height: 35px;
}

#previewPage #previewAllSessionsTitle,
#previewPage #savedSessionsContainer {
   border: 2px solid rgba(56, 56, 56, 0.46);
   width: 100%;
}

.closePreviewPageSessions {
   position: absolute;
   right: 9px;
   color: rgb(147, 147, 147);
   top: 2px;
   cursor: pointer;
   font-size: 19px;
}

#previewPage #previewAllSessionsTitle {
   border-bottom: none;
}

#previewPage #savedSessionsContainer {
   border-top: none;
   padding-bottom: 4px;
   height: 100%;
   background: rgba(0, 0, 255, 0.26);
}

#invalidSessionForPreview {
   text-align: center;
   background: rgb(32, 32, 35);
   color: rgb(210, 242, 245);
   width: 50%;
   padding: 25px;
   margin-left: 25%;
   position: absolute;
   margin-top: 30px;
   border: 1px solid rgba(211, 211, 211, 0.34);
}

.previewStartRenderButton,
.previewFetchCodeButton,
.setupLoadedSessionButton {
   background: rgb(44, 75, 90);
   display: inline-block;
   padding: 3px;
   color: white;
   cursor: pointer;
}

.previewFetchCodeButton {
   background: rgb(78, 15, 77);
}

#previewSessionDetails {
   border: 2px solid rgb(128, 120, 162);
   padding: 6px;
   height: 57px;
   background: rgb(5, 12, 25);
   position: relative;
   text-align: left;
   overflow-y: auto;
   display: none;
}

#previewPage.debugView #previewSessionDetails,
#previewPage.debugView .normalDiv {
   display: block;
}

.starterInfo {
   width: 30%;
   border: 2px solid cyan;
   background: rgb(3, 3, 3);
   color: rgb(212, 207, 207);
}

.loadedSessionData {
   border: 2px solid rgb(146, 144, 144);
   width: 30%;
   display: inline-block;
   margin: 5px;
   background: black;
   color: rgb(210, 206, 206);
   vertical-align: top;
}

.loadedSessionDataTitle {
   background: rgb(50, 53, 56);
   text-align: center;
   border-bottom: 1px solid gray;
   height: 20px;
   line-height: 20px;
   vertical-align: top;
}

.loadedDataSection {
   padding: 3px;
}

#previewLinkToLoad {
   position: absolute;
   top: -99999px;
   left: -99999px;
   width: 415px;
   bottom: 0px;
}

#previewPageOptionsButton,
#previewPageNavContainer {
   position: absolute;
   top: 0px;
   right: 150px;
   color: rgb(162, 162, 165);
   font-family: "Lobster Two", cursive;
   font-size: 22px;
   cursor: pointer;
   line-height: 34px;
}

#previewPageOptionsButton.adminBoxShadows .previewFullLogo {
   text-shadow: rgba(160, 178, 76, 0.47) 3px 2px;
   transform: scale(1.1);
}

#previewPageNavContainer {
   right: 277px;
}

#previewPageNavContainer * {}

#previewPageOptionsButton i {
   transition: color 0.3s ease 0s;
}

#previewPageOptionsButton i {
   font-size: 15px;
}

#previewPageOptionsBar {
   position: relative;
   background: rgb(40, 43, 50);
   height: 30px;
   color: rgb(181, 186, 181);
   width: unset;
   min-width: 470px;
   top: 3px;
   overflow: hidden;
   display: inline-block;
   vertical-align: top;
   cursor: default;
}

#previewPageOptionsButton.activeOptionsButton i,
.previewOptionsCloneActive {
   color: white;
}

#secondsBetweenReloads {
   color: white;
   padding: 0px 0px 0px 5px;
   height: 30px;
   vertical-align: top;
   position: relative;
}

.togglePreviewCodeHeader {
   position: absolute;
   right: 30px;
   color: rgb(184, 184, 184);
   top: 7px;
   cursor: pointer;
   opacity: 0.7;
   transition: all 0.3s ease 0s;
   z-index: 150;
}

#previewCodeOverlay[data-headershown="true"] .togglePreviewCodeHeader .fa-chevron-down {
   display: none;
}

#previewCodeOverlay[data-headershown="false"] .togglePreviewCodeHeader .fa-chevron-up {
   display: none;
}

.togglePreviewCodeHeader:hover {
   opacity: 1;
   color: rgb(178, 223, 241);
}

.previewPageOptionsButton,
.previewPageSubmenuButton {
   border: 1px solid rgb(72, 72, 72);
   margin-left: 5px;
   display: inline-block;
   cursor: pointer;
   height: 24px;
   line-height: 23px;
   width: 33px;
   color: lightgray;
   text-align: center;
   box-shadow: rgb(110, 105, 105) 2px 2px;
   vertical-align: top;
   margin-top: 4px;
   position: relative;
}

.previewPageSubmenuButton {
   display: none;
}

.previewPageSubmenuButton.fromArr {
   display: inline-block;
}

.previewPageOptionsButton {
   display: none;
}

.previewPageOptionsButton.fromArr {
   display: inline-block;
}

.previewPageStartRenderButton.temporarilyDisabled {
   opacity: 0.4;
   cursor: pointer;
}

.generalPreviewOptions .previewPageOptionsButton,
.generalPreviewOptions .previewPageSubmenuButton {
   height: 24px;
   font-size: 12px;
   line-height: 24px;
   width: 24px;
   margin-top: 1px;
}

#page .generalPreviewOptions a {
   color: inherit;
}

.ff-active {
   border: 3px solid rgb(75, 130, 133);
}

.ff-active::after {
   content: "Click anywhere on the image to pause";
   position: absolute;
   background: rgb(17, 17, 17);
   top: 0px;
   left: 0px;
   cursor: pointer;
}

.currentPreviewOptionActive,
.previewPageOptionsButton:active,
#previewPage.styleEditorView .toggleStyleEditorButton,
.functionFactoryOverlayButton[data-status="shown"],
.toggleChainSettingsButton[data-status="shown"],
.previewPointPlottingOverlayButton[data-status="shown"],
.previewPageOptionsButton.taskOverlayButton[data-state="shown"],
.previewPageOptionsButton.outlineOverlayButton[data-state="shown"],
.previewPageOptionsButton.previewPageSettingsButton[data-state="shown"],
.previewPageOptionsButton[data-state="shown"] {
   background: rgb(118, 118, 118);
}

#previewSubTopBar {
   position: relative;
   display: inline-block;
   white-space: nowrap;
   width: calc(100%);
   overflow: hidden;
   z-index: 35000;
   vertical-align: top;
}

#previewCodeHeader.twoRows #previewSubTopBar {
   left: 0px;
   display: block;
   max-width: unset;
}

#previewCodeHeader.twoRows {
   height: 70px;
}

.previewCodeHeaderText,
.previewPageOptionsButton,
.previewPageSubmenuButton {
   vertical-align: top;
}

.cursorNone {
   cursor: none !important;
}

.previewPageOptionsButton.hasOptionButton {}

#previewCodeHeader[data-optionsbarstatus="active"] .previewCodeHeaderText {
   display: none;
}

#moduleCheckboxViewFooterButton,
#toggleBottomAdminButtons {
   position: relative;
   top: 0px;
   left: 0px;
   background: rgb(37, 37, 64);
   cursor: pointer;
   color: lightgray;
   width: 63px;
   overflow: hidden;
   opacity: 0.4;
   display: inline-block;
   white-space: nowrap;

}

body[data-infocardstatus="on"] #page .previewPageLocation.imageCreationContainer,
body[data-infocardstatus="on"] #page .ajaxDisableButton.previewPageLocation,
body[data-infocardstatus="on"] .pageConsoleStateArea,
body[data-infocardstatus="on"] #moduleCheckboxViewFooterButton,
body[data-infocardstatus="on"] #toggleBottomAdminButtons {
   display: none;
}

#moduleCheckboxViewFooterButton {
   width: unset;
   opacity: 0.8;
}

#toggleBottomAdminButtons[data-adminbuttonstate="shown"] {
   background: rgb(3, 27, 3);
}

#toggleBottomAdminButtons[data-adminbuttonstate="hidden"] {
   background: rgb(22, 2, 2);
}

.previewCodeHeaderText {
   cursor: default;
   display: inline-block;
   max-width: 370px;
   padding: 0px 8px;
   color: rgb(186, 191, 194);
   height: 35px;
   line-height: 40px;
}

.previewCodeHeaderText.adminBoxShadows {
   box-shadow: rgba(228, 0, 255, 0.56) 2px 2px inset;
}

#page[data-recordingbar="show"] .previewCodeHeaderText {
   display: none;
}

#previewPage .recordingModeButton {
   display: inline-block;
   background: rgb(37, 37, 66);
   cursor: pointer;
}

#togglePreviewFullScreen,
.togglePreviewOutputConsoles,
.cleanupPreviewButtons,
#toggleStyleEditorView,
#toggleTop45 {
   position: absolute;
   right: unset;
   background: rgb(76, 9, 9);
   color: rgb(184, 182, 182);
   padding: 0px 4px;
   border: 1px solid rgb(72, 70, 70);
   height: 30px;
   line-height: 30px;
   top: 2px;
   cursor: pointer;
   left: 735px;
}

#toggleTop45 {
   background: rgb(63, 41, 41);
   left: 558px;
}

.togglePreviewOutputConsoles {
   background: rgb(40, 9, 69);
   left: 0px;
   right: unset;
}

.cleanupPreviewButtons {
   background: rgb(33, 32, 116);
   font-size: 1em;
   right: 0px;
   left: unset;
   height: 40px;
   line-height: 40px;
   opacity: 0.1;
   display: none;
}

#page[data-recordingbar="show"] .cleanupPreviewButtons {
   display: none;
}

#toggleStyleEditorView {
   left: 240px;
   background: rgb(95, 69, 13);
}

#previewOptionsOverlay {
   background: rgba(18, 18, 18, 0.59);
   color: white;
   position: fixed;
   left: 0px;
   width: 100%;
   height: calc(100% - 82px);
   z-index: 4;
   display: none;
   top: 35px;
}

#page[data-cursorview="on"] #previewOptionsOverlay {
   border-left: 12px solid rgb(33, 107, 134);
   border-right: 12px solid rgb(33, 107, 134);
}

#page[data-cursorview="on"] #previewCompileContainer {
   left: 542px;
   width: 400px;
}

#cursorEditor {
   position: relative;
   border: 3px solid black;
   margin: 0px 12px;
   display: none;
}

.ace_cursor {
   border-top: none !important;
   border-bottom: none !important;
}

.cursorEditorDefaultSetting,
.hideCursorEditor {
   position: absolute;
   top: 0px;
   right: 10px;
   opacity: 0.6;
   cursor: pointer;
}

.cursorEditorDefaultSetting {
   right: unset;
   left: 8px;
}

.cursorEditorDefaultSetting .showCursorEditorDefault {
   display: none;
}

#editorThemeOverlay[data-cursorareadisplay="yes"] .cursorEditorDefaultSetting .hideCursorEditorDefault {
   display: none;
}

#editorThemeOverlay[data-cursorareadisplay="yes"] .cursorEditorDefaultSetting .showCursorEditorDefault {
   display: block;
}

#editorThemeOverlay .cursorEditorDefaultSetting {
   opacity: 0.4;
   color: lightblue;
}

.cursorEditorTasks {
   background: black;
   color: lightblue;
   font-size: 16px;
   padding: 12px;
   line-height: 40px;
   overflow-y: auto;
   display: none;
}

#editorThemeOverlay>.cursorEditRow {
   position: absolute;
   top: 17px;
   left: 8px;
   padding: 0px 8px;
   border: 1px solid rgb(46, 95, 136);
}

#editorThemeOverlay>.cursorEditRow[data-type="exportPresets"] {
   top: unset;
   bottom: 90px;
   position: absolute;
   border: 1px solid black;
   width: 500px;
   padding: 15px;
   font-size: 15px;
   z-index: 40;
   opacity: 0.2;
}

#page[data-width="showingConsoles"] #editorThemeOverlay>.cursorEditRow[data-type="exportPresets"] {
   bottom: 400px;
   padding: 10px;
   border: 1px solid cyan;
   display: none;
}

.exportCursorPreset {
   display: inline-block;
   background: rgb(52, 2, 52);
   padding: 7px;
   cursor: pointer;
}

#cursorExportType {
   border: 2px solid gray;
   margin-right: 30px;
   margin-left: 30px;
}

#editorThemeOverlay>.cursorEditRow[data-type="blinkingCursor"] {
   left: 600px;
   width: 500px;
   top: -15px;
}

.cursorEditRow[data-type="cursorPresets"] {
   display: none;
}

.toggleBlinkingCursor {
   background: rgb(0, 0, 0);
   padding: 4px;
   display: inline-block;
   cursor: pointer;
   border: 1px solid rgba(173, 216, 230, 0.28);
}

.toggleBlinkingCursor.presetsArea {
   margin-right: 15px;
   background: rgb(7, 9, 42);
}

.lastActivePlaceholder {
   position: absolute;
   right: 15px;
   top: 4px;
   font-size: 15px;
   opacity: 0.4;
   cursor: default;
}

.stopBlinkingCursors {
   position: absolute;
   bottom: 0px;
   right: 15px;
   opacity: 0.3;
   cursor: pointer;
   color: white;
   font-size: 15px;
}

.lastActivePlaceholderDisplay {
   display: inline-block;
}

.cursorEditorTitle {
   background: black;
   text-align: center;
   height: 40px;
   line-height: 40px;
   border-bottom: 1px solid rgb(49, 49, 49);
   font-size: 13px;
}

#page[data-cursorview="on"] #cursorEditor {
   display: block;
}

#previewSwitchView {
   background: rgb(3, 9, 56);
   position: absolute;
   color: lightblue;
   padding: 6px;
   bottom: 20px;
   left: 20px;
   cursor: pointer;
   display: none;
}

#cursorBorderOpacity,
#selectionBackgroundColor,
#selectionOpacity,
#cursorOpacity,
#cursorAnimation,
#cursorBackground,
#cursorBorder,
#cursorWidth,
#cursorColor,
#cursorBorderWidth {
   background: black;
   color: lightblue;
   padding: 4px;
   width: 100px;
   border: 1px solid dimgray;
}

.cursorEditRow[data-type="blinkingCursor"] i {
   margin-top: 2px;
   position: relative;
   margin-left: 8px;
}

.cursorEditTitle,
.cursorEditMeta {
   display: inline-block;
   background: rgb(57, 49, 83);
   width: 216px;
   line-height: 28px;
   color: lightgray;
}

.cursorEditTitle {
   width: 225px;
   border: 1px solid rgb(25, 25, 25);
   position: relative;
}

.cursorEditActiveArea {
   cursor: pointer;
   background: rgb(0, 0, 0);
   padding: 0px 13px;
   float: right;
   margin-right: 15px;
}

.cursorEditSetDefault,
.cursorEditActiveTitle,
.cursorEditActiveArea,
.cursorEditActiveIcons {
   display: inline-block;
}

#cursorEditor .cursorEditRow[data-meta="cursorWidth"] .cursorEditSetDefault,
#cursorEditor .cursorEditRow[data-meta="cursorBackground"] .cursorEditSetDefault,
#cursorEditor .cursorEditRow[data-meta="cursorOpacity"] .cursorEditSetDefault {
   display: none;
}

#cursorEditor[data-theme="ace/theme/gob"] .noCursorDefaults {
   display: none;
}

#cursorEditor[data-theme="ace/theme/gob"] .cursorEditRow[data-meta="cursorWidth"] .cursorEditSetDefault,
#cursorEditor[data-theme="ace/theme/gob"] .cursorEditRow[data-meta="cursorBackground"] .cursorEditSetDefault,
#cursorEditor[data-theme="ace/theme/gob"] .cursorEditRow[data-meta="cursorOpacity"] .cursorEditSetDefault {
   display: inline-block;
}

.cursorEditActiveArea.individualCheck {
   opacity: 0.4;
   background: rgb(35, 58, 17);
   float: unset;
   display: none;
}

#page[data-cursorbackgroundactive="yes"] .cursorEditActiveArea[data-type="cursorBackgroundActive"] .fa-check-circle,
#page[data-cursorborderactive="yes"] .cursorEditActiveArea[data-type="cursorBorderActive"] .fa-check-circle,
#page[data-cursorselection="yes"] .cursorEditActiveArea[data-type="cursorSelection"] .fa-check-circle,
#page[data-cursoranimationgroup="yes"] .cursorEditActiveArea[data-type="cursorAnimationGroup"] .fa-check-circle {
   display: inline-block;
}

#page[data-cursorbackgroundactive="yes"] .cursorEditActiveArea[data-type="cursorBackgroundActive"] .fa-circle,
#page[data-cursorborderactive="yes"] .cursorEditActiveArea[data-type="cursorBorderActive"] .fa-circle,
#page[data-cursorselection="yes"] .cursorEditActiveArea[data-type="cursorSelection"] .fa-circle,
#page[data-cursoranimationgroup="yes"] .cursorEditActiveArea[data-type="cursorAnimationGroup"] .fa-circle {
   display: none;
}

.cursorEditSetDefault {
   background: rgb(40, 60, 89);
   padding: 3px;
   cursor: pointer;
}

.noCursorDefaults {
   display: inline-block;
}

.cursorEditActiveArea .fa-check-circle,
.cursorEditActiveArea .fa-circle {
   margin-right: 15px;
}

#page .cursorEditActiveArea .fa-check-circle {
   display: none;
}

#page[data-cursorwidth="yes"] .cursorEditActiveArea[data-type="cursorWidth"] .fa-check-circle,
#page[data-cursorbackground="yes"] .cursorEditActiveArea[data-type="cursorBackground"] .fa-check-circle,
#page[data-cursoropacity="yes"] .cursorEditActiveArea[data-type="cursorOpacity"] .fa-check-circle,
#page[data-cursoranimation="yes"] .cursorEditActiveArea[data-type="cursorAnimation"] .fa-check-circle,
#page[data-cursorborderwidth="yes"] .cursorEditActiveArea[data-type="cursorBorderWidth"] .fa-check-circle,
#page[data-cursorborder="yes"] .cursorEditActiveArea[data-type="cursorBorder"] .fa-check-circle,
#page[data-cursorborderopacity="yes"] .cursorEditActiveArea[data-type="cursorBorderOpacity"] .fa-check-circle,
#page[data-selectionbackgroundcolor="yes"] .cursorEditActiveArea[data-type="selectionBackgroundColor"] .fa-check-circle,
#page[data-selectionopacity="yes"] .cursorEditActiveArea[data-type="selectionOpacity"] .fa-check-circle {
   display: inline-block;
}

#page[data-cursorwidth="yes"] .cursorEditActiveArea[data-type="cursorWidth"] .fa-circle,
#page[data-cursorbackground="yes"] .cursorEditActiveArea[data-type="cursorBackground"] .fa-circle,
#page[data-cursoropacity="yes"] .cursorEditActiveArea[data-type="cursorOpacity"] .fa-circle,
#page[data-cursoranimation="yes"] .cursorEditActiveArea[data-type="cursorAnimation"] .fa-circle,
#page[data-cursorborderwidth="yes"] .cursorEditActiveArea[data-type="cursorBorderWidth"] .fa-circle,
#page[data-cursorborder="yes"] .cursorEditActiveArea[data-type="cursorBorder"] .fa-circle,
#page[data-cursorborderopacity="yes"] .cursorEditActiveArea[data-type="cursorBorderOpacity"] .fa-circle,
#page[data-selectionbackgroundcolor="yes"] .cursorEditActiveArea[data-type="selectionBackgroundColor"] .fa-circle,
#page[data-selectionopacity="yes"] .cursorEditActiveArea[data-type="selectionOpacity"] .fa-circle {
   display: none;
}

.cursorEditMeta {
   background: rgb(0, 0, 0);
   border: 1px solid rgb(0, 0, 0);
   color: rgb(254, 254, 254);
   position: absolute;
   opacity: 0.5;
   right: 12px;
   font-size: 13px;
   padding-left: 15px;
   display: none;
}

#page[data-width="showingConsoles"] #previewOptionsOverlay {
   width: 65%;
}

#previewOptionsOverlay #compileContainer {
   width: 100%;
   height: 100%;
   margin-left: 0px;
}

#previewCompileContainer {
   width: 76%;
   margin-left: 12%;
   padding: 35px 17px 73px;
   height: 91%;
   background: rgb(38, 45, 63);
   border: 1px solid black;
   position: relative;
   top: 14px;
}

.previewCompileCodeTitle {
   height: 30px;
   background: rgb(24, 24, 29);
   text-align: center;
   color: lightgray;
   position: absolute;
   top: 0px;
   width: 100%;
   left: 0px;
   border-bottom: 1px solid rgb(68, 68, 68);
   line-height: 30px;
   font-size: 0.9em;
}

.previewCompiledCodeFull {
   display: inline-block;
}

.previewCompiledCodePartial {
   display: none;
}

.previewCompileCodeTitle .sessionCloseButton {
   font-size: 17px;
   top: 0px;
   right: 18px;
}

.previewCompileTextCloseRow {
   bottom: 8px;
   height: 40px;
   overflow: hidden;
   line-height: 40px;
   position: absolute;
   width: 100%;
   left: 0px;
   text-align: center;
}

.previewCompileTextCloseButton {
   background: rgb(8, 15, 40);
   border: 1px solid rgb(66, 62, 84);
   display: inline-block;
   cursor: pointer;
   font-size: 13px;
   width: 70px;
}

#previewSecondsSave {
   display: inline-block;
   background: black;
   color: rgb(183, 181, 181);
   border: 1px solid rgba(84, 81, 81, 0.75);
   cursor: pointer;
   height: 21px;
   overflow: hidden;
   line-height: 21px;
   font-size: 12px;
   vertical-align: top;
   padding: 0px 5px;
   top: 5px;
   position: relative;
}

.renderSelectLabel {
   display: inline-block;
   color: lightgray;
   padding: 0px 3px;
}

.renderSelectLabel,
#previewPage #renderStatus,
#previewPageOptionsBar .cc_select[data-var="renderStatus"] {
   vertical-align: top;
   height: 21px;
   overflow: hidden;
   line-height: 21px;
   top: 4px;
   position: relative;
   font-size: 12px;
   color: rgb(195, 195, 195);
}

#page .cc_select[data-var="pickerInsertionType"],
#page .cc_select[data-var="pickerInsertionType"] .activeSelectOption,
#page .cc_select[data-var="pickerInsertionType"] .caretDown {
   line-height: 21px;
   height: 21px;
}

#previewPageOptionsBar .cc_select[data-var="renderStatus"],
#renderStatusnewSelect {
   width: 92px;
}

#renderStatusnewSelect .inactiveSelectOption {
   height: 23px;
   line-height: 23px;
   font-size: 14px;
   padding: 0px 0px 0px 8px;
   text-align: left;
   background: rgb(16, 25, 56);
}

#previewPage #renderStatus,
#previewPageOptionsBar .cc_select[data-var="renderStatus"] {
   border-radius: 3px;
   top: 4px;
}

#previewPage #renderStatus,
#previewSecondsSave,
#previewPageOptionsBar .cc_select[data-var="renderStatus"] {
   background: rgb(30, 31, 34);
   border: 1px solid rgb(84, 83, 83);
}

#previewPage #renderStatus {}

#previewPageOptionsBar .cc_select[data-var="renderStatus"] .transparentDropdownOverlay {
   opacity: 0;
}

#page .cc_select[data-var="renderStatus"] {
   padding-left: 6px;
}

#page .cc_select[data-var="renderStatus"],
#page .cc_select[data-var="renderStatus"] .activeSelectOption,
#page .cc_select[data-var="renderStatus"] .caretDown {
   height: 21px;
   line-height: 21px;
}

#previewPage #previewSecondsSave {
   background: rgb(22, 22, 25);
   top: 4px;
   line-height: 19px;
}

.previewCodeURLBox {
   color: white;
   display: inline-block;
   padding: 2px 7px;
   height: 26px;
   position: relative;
   top: 2px;
   overflow: hidden;
   width: calc(100% - 223px);
   margin-left: 8px;
   min-width: 185px;
}

.previewCodeURLBox .actualURL {
   background: rgb(78, 77, 77);
   color: rgb(172, 171, 171);
   width: calc(100% - 174px);
   max-width: 400px;
   position: relative;
   height: 20px;
   line-height: 20px;
   overflow: hidden;
   padding-left: 8px;
   padding-right: 8px;
   top: 0px;
   vertical-align: top;
   white-space: nowrap;
   font-size: 9px;
   display: none;
}

.previewCopyButton {
   display: inline-block;
   background: rgb(48, 55, 59);
   color: rgb(193, 191, 191);
   height: 20px;
   line-height: 20px;
   vertical-align: top;
   top: 0px;
   position: relative;
   font-size: 9px;
   width: 85px;
   text-align: center;
   cursor: pointer;
   border: 1px solid rgb(82, 82, 82);
}

.generalCopiedMessage {
   position: relative;
   color: rgb(179, 178, 178);
   top: 6px;
   font-size: 12px;
   line-height: 20px;
   vertical-align: top;
   display: none;
}

.changesMadeDiv {
   border: 1px solid white;
   margin: 0px 3px;
   display: inline-block;
   height: 12px;
   line-height: 12px;
   color: white;
   font-size: 9px;
}

.changesMadeDiv[data-change="true"] {
   background: rgb(71, 6, 6);
}

.selectAttributesTitle {
   display: inline-block;
}

.createItemsTitle {
   background: rgb(29, 29, 29);
   color: rgb(195, 199, 201);
   height: 30px;
   line-height: 24px;
   cursor: default;
   text-align: center;
   position: relative;
}

.saveRecentlyCreatedElements {
   background: rgba(24, 27, 36, 0.58);
   position: absolute;
   top: 2px;
   right: 18px;
   height: 24px;
   overflow: hidden;
   line-height: 24px;
   width: 140px;
   text-align: center;
   opacity: 0.7;
   cursor: pointer;
}

.clickable {
   cursor: pointer;
}

.createItemsTitle,
#showSelectorsAndParents .oneSectionTitle,
.setStyleEditorWidthTitle,
#entire_style_editor .oneSectionTitle {
   background: rgb(29, 29, 29);
   color: rgb(151, 151, 151);
   border-bottom: 1px solid rgb(0, 0, 0);
   position: relative;
}

#entire_item_creation .itemCreationStructureTitle,
#entire_item_creation .oneSectionTitle,
#entire_item_creation .createItemsTitle {
   background: rgb(25, 15, 33);
}

.finalizeHelp {
   display: inline-block;
   height: 30px;
   line-height: 28px;
}

.rulesetSaveAndLoadArea {
   margin-bottom: 10px;
}
.toggleCreationAceCallback {
   position: absolute;
   top: -2px;
   left: 17px;
   opacity: .6;
   font-size: 13px;
   cursor: pointer;
}
.createItemsTitle {
    position: relative;
    margin-top: 12px;
}
.removeHTMLTag {
   position: absolute;
   top: 0;
   left: 12px;
   cursor:  pointer;
   opacity:  .6;
}

.toggleSaveAndLoad {
      position: absolute;
      cursor: pointer;
      top: 1px;
      left: 3px;
      font-size: 12px;
      color: lightgray;
      opacity: .6;
}

  #rulesetCSSRules .toggleSaveAndLoad {
            display: none;
          }

#entire_item_creation .itemCreationStructureTitle {
   padding: 4px;
   text-align: center;
   color: rgb(151, 151, 151);
}

.divStructureSaveAndLoadToggleButton {
     position: absolute;
     top: 0;
     opacity: .6;
     left: 8px;
     cursor: pointer;
     transition: .2s opacity;
}

.divStructureSaveAndLoadToggleButton.newBlank {
   right: 28px;
   left: unset;
}
.divStructureSaveAndLoadToggleButton:hover {
   opacity: 1;
}

.selectorHelp {
   position: absolute;
   font-size: 12px;
   right: 30px;
   opacity: 0.4;
   top: 0px;
}

#createItemsTitle .selectorHelp,
.styleEditorTitle .selectorHelp {
   right: unset;
   left: 5px;
   top: 4px;
}

.styleEditorTitle .selectorHelp {
   top: 2px;
}

.oneExplanation {
   background: rgb(0, 0, 0);
   position: absolute;
   z-index: 50;
   height: 100%;
   display: none;
   font-size: 15px;
   padding: 33px 8px 8px;
}

.explanationTitle {
   background: black;
   text-align: center;
   position: relative;
}

.hide_explanation {
   position: absolute;
   color: gray;
   top: 0px;
   right: 14px;
}

.explanationInner {
   padding: 8px;
   background: rgb(4, 8, 28);
   border-top: none;
   color: lightgray;
   text-align: left;
}

.explanationTitle,
.explanationInner,
.newExplanationTitle {
   border: 1px solid rgb(45, 45, 45);
   color: lightgray;
}

.newExplanationTitle {
   text-align: center;
   background: black;
   border: 1px solid rgb(27, 27, 27);
   height: 25px;
   line-height: 25px;
   margin-bottom: 15px;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
}

.explanationInner {
   border-top: none;
}

.toggleDebugTitles {
   position: absolute;
   opacity: 0.3;
   top: 6px;
   border: 1px solid white;
   right: 9px;
   height: 20px;
   line-height: 20px;
   color: white;
   cursor: pointer;
   display: none;
}

#shortcutsConsoleArea {
   background: black;
   height: 100px;
   line-height: 20px;
   position: relative;
}

#entire_shortcuts[data-consolesize="large"] .theShortcutsDiv,
#entire_shortcuts[data-consolesize="large"] .theColorDiv {
   height: calc(100% - 200px);
}

#entire_shortcuts[data-consolesize="large"] #shortcutsConsoleArea {
   height: 150px;
}

#entire_shortcuts[data-consolesize="medium"] .theShortcutsDiv,
#entire_shortcuts[data-consolesize="medium"] .theColorDiv {
   height: calc(100% - 150px);
}

#entire_shortcuts[data-consolesize="medium"] #shortcutsConsoleArea {
   height: 100px;
}

#entire_shortcuts[data-consolesize="small"] .theShortcutsDiv,
#entire_shortcuts[data-consolesize="small"] .theColorDiv {
   height: calc(100% - 125px);
}

#entire_shortcuts[data-consolesize="small"] #shortcutsConsoleArea {
   height: 75px;
}

#entire_shortcuts[data-consolesize="not-visible"] .theShortcutsDiv,
#entire_shortcuts[data-consolesize="not-visible"] .theColorDiv {
   height: calc(100% - 80px);
}

#entire_shortcuts[data-consolesize="not-visible"] #shortcutsConsoleArea {
   height: 35px;
}

#entire_shortcuts[data-consolesize="not-visible"] #consoleText {
   height: 0px;
   padding: 0px;
}

#entire_shortcuts[data-consolesize="not-visible"] .consoleSizeMenu {}

.consoleSizeMenu .snippetEndingLocation {
   display: none;
}

#entire_shortcuts[data-consolesize="not-visible"] .consoleSizeMenu .snippetEndingLocation {
   height: 20px;
   overflow: hidden;
   opacity: 1;
   float: right;
   top: 2px;
   position: relative;
   display: block;
}

.consoleSizeMenu .snippetLocationButton {
   height: 17px;
   width: 17px;
   line-height: 17px;
   padding: 0px;
   margin: 0px;
   font-size: 10px;
   vertical-align: top;
}

#shortcutsConsoleArea input[type="text"] {
   background: rgb(40, 40, 40);
   height: 30px;
   border: 1px solid rgb(40, 40, 40);
   color: lightgray;
   width: calc(100% - 82px);
}

.savedStylesInformation {
   transition: opacity 0.2s ease 0s;
   text-align: center;
   opacity: 0.3;
   font-size: 10px;
}

.stylesMessagesRow {
   height: 25px;
   position: relative;
   line-height: 25px;
}

.theStyleMessageText {
   text-align: center;
   transition: opacity 0.4s ease 0s;
   color: rgba(171, 170, 170, 0.4);
   opacity: 0;
   cursor: default;
   width: 100%;
   position: absolute;
}

.savedStylesInformation[data-customorsavedactive="custom"] {
   opacity: 0;
}

.addCreatedItemButton {
   display: inline-block;
   padding: 8px 5px 5px;
   margin-right: 10px;
   background: rgb(16, 10, 47);
   color: rgb(184, 184, 184);
   border: 1px solid black;
   border-radius: 5%;
   cursor: pointer;
   width: 127px;
   font-size: 12px;
}

#entire_item_creation[data-width="medium"] .addCreatedItemButton {
   display: inline-block;
   margin: 0px auto 8px;
}

.copyOnly {
   background: rgba(7, 20, 43, 0.41);
}

.creationSmallButtons .addCreatedItemButton {
   width: 38px;
   padding: 0px;
   height: 38px;
   text-align: center;
   line-height: 38px;
   margin: 0px;
   color: rgb(130, 128, 128);
   border: 1px solid rgb(60, 58, 58);
}

.addCreatedItemButton.startOverButton {
   background: rgb(49, 34, 38);
}

.addCreatedItemButton.addAndClear {
   background: rgb(33, 43, 53);
}

.itemCreationFinalizeSection {
   display: inline-block;
   margin-bottom: 8px;
}

.addCreatedItemButton.addOnly {
   background: rgb(34, 37, 52);
}

.creationSmallButtons {
   display: inline-block;
}

#pageCoverInfo {
   background: green;
   position: absolute;
   top: 200px;
   width: 500px;
   height: 500px;
}

.stopAutoSaving {
   background: green;
   color: white;
}

.hideModules,
.showHiddenModules {
   background: rgb(7, 14, 34);
   color: rgb(165, 164, 164);
   position: absolute;
   width: 20px;
   height: 20px;
   padding: 0px;
   line-height: 20px;
   margin-top: 6px;
   cursor: pointer;
   border: 1px solid black;
}

.showHiddenModules {
   left: 31px;
}

#styleEditor {
   background: rgb(19, 19, 20);
   overflow-y: auto;
   position: absolute;
   height: 100%;
   width: 100%;
}

#previewPage #styleEditor {
   background: rgb(15, 23, 32);
}

.styleEditorTitle {
   background: rgb(11, 13, 25);
   text-align: center;
   color: rgb(143, 142, 142);
   height: 30px;
   line-height: 30px;
   border-bottom: 1px solid rgb(57, 57, 57);
   position: relative;
}

.styleEditorBody {
   height: calc(100% - 30px);
   overflow-y: auto;
}

.toggleSelectorDisplay,
.setStyleEditorWidth {
   position: absolute;
   color: rgb(205, 205, 205);
   cursor: pointer;
   opacity: 0.4;
   right: 8px;
   top: 1px;
   font-size: 10px;
   transition: opacity 0.4s ease 0s;
}

.toggleSelectorDisplay.changesToFalse {
   right: 88px;
}

.toggleSelectorDisplay:hover,
.setStyleEditorWidth:hover {
   opacity: 0.8;
}

.setStyleEditorWidth {
   right: unset;
   left: 29px;
}

#styleEditor input {
   background: gray;
   border: none;
}


#rulesetSelector,
#styleEditor #styleSelectCSSRules .currentStyleEditorRuleSelector,
#createItems #selectCSSRules .currentStyleEditorRuleSelector {
   border: none;
   background: none;
   min-width: 90px;
   color: rgb(199, 198, 198);
   cursor: pointer;
   max-width: 215px;
   height: 30px;
   line-height: 30px;
   z-index: 1;
   position: relative;
   padding-left: 0px;
}

.itemCreationParseOptions,
.itemCreationExportButtons {
   /* border: 1px solid #ffff004f; */
   padding: 6px;
   padding-left:7px;
   margin-top: 6px;
   /* display: none; */
}


.itemCreationParseOptions {
   display: none;
}



.divStructureExportButtons {
display: none;
}

#creationElementTree {
   /* bordeR: 3px solid green; */
   /* padding: 18px; */
   background: #1d2830;
   margin: 8px;
   margin-right: 30px;
   margin-top: 15px;
   display: none;
}

 .creationElementTreeTitle {
   background: black;
   text-align: center;
    height:25px;
    line-height: 25px;
    position: relative;

 }

 .closeCreationElementTree {
   position: absolute;
   right: 8px;
   cursor: pointer;
    top: 0;
 }

#creationElementTreeInner {
   padding: 4px;
}

 .creationElementTreeTitle .oneHelpButton {
   
line-height: 25px;
   
font-size: 13px;
 }


#itemCreationStructureSection .previewLoc {
   display: none;
}

#itemCreationStructureSection .exportButtonsRow {
   /* border: 1px solid yellow; */
   padding: 3px;
   display: inline-block;
}

.itemCreationExportButtonsTitle {
   display: inline-block;
   /* background: dimgray; */
   padding: 6px;
   cursor: default;
}

#itemCreationStructureSection .itemCreationExportButtonsTitle {
   
   display: inline-block;
}

#itemCreationStructureSection .previewLoc {
   display: none;
}
.itemCreationParseButton,
.itemCreationExportButton {
   display: inline-block;
   background: #3c3c5d;
   padding: 6px;
   margin-right: 4px;
   cursor: pointer;
   width: 86px;
   text-align: center;
   margin-right: 13px;
   white-space: nowrap;
}

.itemCreationParseSiblingOrChild {
   display: inline-block;

   width: 70px;
}

.parseResultButton {
   background: #343349;
   display: inline-block;
   padding: 4px;
   width: 30px;
   text-align:center;
   font-size: 16px;
   cursor: pointer;
}

.parseResultButton[data-active="yes"] {
  font-weight: 600;
  text-decoration: underline;
  cursor: default;
  color: lightblue;
  background: #29405c;
}

.itemCreationExportButton[data-type="newSession"] {
   width: 100px;
}


#itemCreationStructureSection .itemCreationExportButton {
   width: unset;
   min-width: 46px;
   color: lightblue;
   background: #33334f;
}

#page #rulesetSelector:focus,
#page #rulesetSelector:active,
#page .currentStyleEditorRuleSelector:active,
#page .currentStyleEditorRuleSelector:focus {
   cursor: text !important;
   /* border: 1px solid dimgray; */
   background: rgb(22, 23, 22) !important;
}

#entire_persistent_picker {
   position: absolute;
   z-index: 400;
   left: 500px;
   border: 1px solid rgb(0, 0, 0);
   background: rgb(31, 34, 39);
   height: 119px;
   display: none;
   overflow: hidden;
}

#previewPage #entire_persistent_picker,
#pickerDebugContainer {
   z-index: 500;
   position: fixed;
   display: none;
   top: 94px;
}

#pickerDebugContainer {
   width: 400px;
   height: 300px;
   padding-top: 50px;
   background: rgb(52, 52, 76);
}

#plotPointOverlay {
   position: fixed;
   width: 100%;
   border: 5px solid rgb(35, 151, 202);
   background: rgba(68, 70, 77, 0.22);
   height: 100%;
   left: 0px;
   z-index: 304;
   top: 0px;
   overflow: hidden;
   text-align: center;
   display: none;
}

#codeCreate #plotPointOverlay {
   top: 0px;
   height: 100%;
}

#plotPointOverlay[data-debug="clean"] {
   width: 100%;
}

#plotPointDialog,
#rulerSettingsDialog {
   border: 1px solid rgb(0, 0, 0);
   width: 600px;
   background: rgb(20, 24, 39);
   top: 74px;
   position: relative;
   color: white;
   text-align: left;
   margin: 0px auto;
}

#rulerSettingsOverlay {
   background: rgba(25, 25, 25, 0.7);
   height: 100%;
   width: 100%;
   position: fixed;
   z-index: 30;
   display: none;
}

#rulerSettingsDialog {
   position: fixed;
   min-height: 200px;
   left: 75px;
   width: 656px;
   padding-bottom: 60px;
   z-index: 300;
   margin: unset;
   height: unset;
   top: 102px;
}

#page[data-rulerdebugstatus="debug"] #rulerSettingsDialog {
   border: 4px solid rgb(97, 165, 42);
   width: 900px;
}

#rulerSettingsDialog .setRulerDefaults {
   position: absolute;
   bottom: 22px;
   top: unset;
}

#page .toggleGridlinesButton {
   right: 400px;
   left: unset;
}

#page .oneToggleRulerButton {
   left: 20px;
   right: unset;
   background: rgb(35, 35, 79);
}

#rulerSettingsDialog .rulerRemovePlottedPoints {
   right: 180px;
   background: rgb(33, 2, 2);
}

#codeCreate #plotPointDialog {
   top: 150px;
}

#page #plotPointDialog.marginForDebug {}

#plotPointOverlay[data-plotdialogdisplay="show"] .plotPointRestore,
#plotPointOverlay[data-plotdialogdisplay="hide"] #plotPointDialog {
   display: none;
}

#plotPointOverlay[data-debug="debug"] #plotPointDialog {
   width: 873px;
   left: 2px !important;
}

#page[data-width="showingConsoles"] #plotPointDialog {
   left: 45px;
   margin: unset;
}

#plotPointOverlay[data-plottutorialdisplay="show"] #plotPointDialog,
#page[data-width="showingConsoles"] #plotPointOverlay[data-plottutorialdisplay="show"] #plotPointDialog {
   left: 30px;
   margin: unset;
   right: unset;
}

.plotPointsDivInfo,
.plotPointsDebugButton,
.pointPlotTypeButton {
   top: 765px;
   position: fixed;
   left: 15px;
   background: black;
   border: 3px solid cyan;
   color: white;
   padding: 8px;
}

.pointPlotTypeButton {
   left: unset;
   background: rgb(92, 34, 97);
   border: 3px solid black;
   cursor: pointer;
   width: 190px;
   right: 153px;
   top: 39px;
}

.pointPlotTypeTitle {
   display: inline-block;
   width: 109px;
   margin-right: 4px;
   cursor: pointer;
}

.pointPlotTypeButton[data-state="point"] {
   background: rgb(98, 43, 47);
}

.plotPointsDebugButton,
.plotPointRestore {
   border: 3px solid black;
   background: rgb(81, 56, 9);
   cursor: pointer;
   left: 0px;
   top: 130px;
   opacity: 0.6;
}

#previewPage .plotPointsDebugButton {
   top: 893px;
   left: 300px;
   opacity: 0.2;
}

#codeCreate .plotPointsDebugButton {
   top: 900px;
   left: 20px;
}

#plotPointOverlay .plotPointRestore {
   right: unset;
   left: 30px;
   top: 12px;
   opacity: 1;
   font-size: 15px;
   background: black;
   position: absolute;
   color: rgb(142, 193, 202);
   cursor: pointer;
   width: 100px;
}

#previewPage #plotPointOverlay .plotPointRestore {
   top: 40px;
}

#codeCreate .plotPointRestore {
   top: 120px;
}

#plotPointOverlay .plotPointRestore[data-plotrestorelocation="right"] {
   left: unset;
   right: 30px;
}

.plotPointRestore i {
   position: absolute;
   left: -3px;
   top: 2px;
   width: 16px;
   cursor: alias;
}

.plotPointRestore .fa-caret-left {
   display: none;
}

.plotPointRestore .fa-caret-right {
   left: unset;
   right: -3px;
}

.plotPointRestore[data-plotrestorelocation="left"] .fa-caret-left,
.plotPointRestore[data-plotrestorelocation="right"] .fa-caret-right {
   display: none;
}

.plotPointRestore[data-plotrestorelocation="right"] .fa-caret-left {
   display: block;
}

.plotPointRestore .plotPointsDebugButton[data-state="normal"] {
   background: dimgray;
}

.plotPointsDebugButton[data-state="clean"] {
   background: rgb(121, 122, 210);
}

.plotPointsDebugButton[data-state="debug"] {
   background: rgb(55, 3, 3);
}

.plotPointDialogTitle {
   background: black;
   border-bottom: 1px solid rgb(72, 75, 75);
   position: relative;
   text-align: center;
   height: 30px;
   margin-bottom: 5px;
   line-height: 32px;
   color: rgb(174, 174, 174);
}

.rulerClickHelp {
   display: inline-block;
   opacity: 0.4;
}

.plotPointDialogExplanation .plotPointDialogTitle {
   width: 100%;
   height: 30px;
   top: 0px;
   left: 0px;
}

.clickToPlotExplanationTitle {
   background: rgb(0, 0, 1);
   text-align: center;
   margin: 5px 0px;
}

.clickToPlotExplanationTitle.firstPart {
   margin: 0px;
}

.plotPointDialogExplanation {
   position: absolute;
   z-index: 5;
   color: lightgray;
   background: rgb(7, 16, 42);
   width: 27%;
   border: 1px solid black;
   text-align: left;
   line-height: 23px;
   top: 72px;
   right: unset;
   left: 681px;
   display: none;
}

#codeCreate .plotPointDialogExplanation {
   top: 155px;
}

.plotPointDialogDisplayButtons {
   position: absolute;
   right: 7px;
   top: 0px;
   height: 25px;
}

.plotPointDialogClose,
.plotPointDialogMinimize {
   cursor: pointer;
   color: gray;
   display: inline-block;
}

.plotPointDialogMinimize {
   height: 14px;
   line-height: 5px;
   width: 16px;
   font-size: 13px;
   background: rgb(128, 128, 128);
   color: rgb(0, 0, 0);
   text-align: center;
   padding-top: 3px;
   bottom: 2px;
   position: relative;
   border-radius: 8%;
   border: 1px solid rgb(128, 128, 128);
}

.plotPointDialogMinimize i {
   position: relative;
}

.plotPointDialogClose {
   height: 18px;
   line-height: 13px;
   font-size: 18px;
}

#rulerSettingsDialog .plotPointDialogClose {
   position: absolute;
   right: 8px;
   top: 8px;
}

.plotPointDialogExplanation .plotPointDialogClose {
   position: absolute;
   right: 8px;
   top: 6px;
   font-size: 15px;
}

.pointPlotExplanationSection {
   padding: 8px;
}

.plotPointDialogDefaultButton {
   top: 3px;
   display: inline-block;
   background: rgb(55, 55, 68);
   padding: 3px;
   border: 1px solid rgb(12, 12, 12);
   cursor: pointer;
   position: absolute;
   right: 20px;
   width: 133px;
   font-size: 13px;
}

.showPointNumberButton {
   background: rgba(19, 49, 63, 0.51);
   text-align: center;
   border: none;
}

.plotPointDialogDefaultButton.setDefaultTwo {
   width: unset;
}

.plotPointLineTitle {
   display: inline-block;
   width: 121px;
   vertical-align: top;
   cursor: default;
   color: rgb(203, 210, 212);
}

#rulerSettingsDialog .plotPointLineTitle {
   width: 184px;
   top: 4px;
   position: relative;
}

.connectingLines {
   position: fixed;
   z-index: 5000;
   background: blue;
   border: 2px solid rgb(121, 184, 179);
   opacity: 0.3;
}

.connectingLines.altered {
   border: 1px solid rgba(0, 128, 0, 0);
   opacity: 1;
   min-height: 1px;
}

#plotPointOverlay[data-debug="clean"] .plotPointLineTitle {
   border: none;
}

.connectingLineContainer {
   position: relative;
   display: inline-block;
   overflow: hidden;
}

.connectingLineContainer .lineColorCover {
   background: rgb(13, 14, 14);
   position: absolute;
   width: 105%;
   height: 25px;
   left: -3px;
   top: 0px;
   opacity: 0.76;
   z-index: 3;
   text-align: right;
   padding-right: 30px;
}

.inSyncDisplay {
   width: 88px;
   background: rgb(10, 11, 11);
   z-index: 4;
   opacity: 1;
   right: 0px;
   position: absolute;
   text-align: center;
   height: 24px;
   color: lightgray;
}

#points_line_color_button {
   display: inline-block;
   height: 30px;
   width: 30px;
   border: 2px solid purple;
   background: rgb(52, 129, 30);
}

.plotPointDialogLine {
   height: 40px;
   padding-top: 5px;
   padding-left: 30px;
   position: relative;
   overflow: hidden;
}

#page[data-rulerdebugstatus="debug"] .plotPointDialogLine {
   padding-top: 11px;
   border: 2px solid rgb(46, 83, 89);
}

#page[data-rulerdebugstatus="debug"] .plotPointDialogLine:nth-child(2n+1) {
   background: rgb(73, 59, 72);
}

.rulerSettingsButtonHelp {
   opacity: 0.3;
   display: inline-block;
   color: lightgray;
}

.plotPointDialogLine[data-type="lineSettings"] {}

.showPlotClickSettingsArea {
   position: absolute;
   top: 2px;
   left: 5px;
   cursor: pointer;
   color: lightgray;
   font-size: 10px;
}

.plotPointDialogLine.plotPointButtonsRow {
   text-align: center;
   padding-right: 185px;
}

.plotPointDialogLine input {
   height: 25px;
   background: black;
   color: white;
}

#points_line_color_text,
#connecting_line_color_text,
#ruler_color_text,
#ruler_point_text,
#ruler_tick_text {
   border: 1px solid rgb(41, 41, 41);
   max-width: 207px;
   color: lightgray;
   font-size: 13px;
   vertical-align: top;
}

.rulerSetDefaultColor {
   display: inline-block;
   opacity: 0.9;
   background: rgb(27, 71, 85);
   color: white;
   cursor: pointer;
   vertical-align: text-bottom;
   position: relative;
   margin: 0px;
   height: 25px;
   top: 0px;
}

#plc_container,
#plc_container_two,
#plc_container_three,
#plc_container_four,
#plc_container_five {
   width: 70px;
   border: 1px solid black;
   position: relative;
   display: inline-block;
   height: 24px;
   overflow: hidden;
}

.lineColorTransparency {
   background: rgb(106, 63, 98);
   color: white;
   display: inline-block;
   padding: 4px;
   opacity: 0.3;
}

#plc_container img,
#plc_container input,
#plc_container_two img,
#plc_container_two input,
#plc_container_three img,
#plc_container_three input,
#plc_container_four img,
#plc_container_four input,
#plc_container_five img,
#plc_container_five input {
   position: absolute;
   top: -4px;
   left: 0px;
   width: 103%;
   height: calc(100% + 5px);
   cursor: pointer;
}

#plc_container img,
#plc_container_two img,
#plc_container_three img,
#plc_container_four img,
#plc_container_five img {
   height: 220px;
   width: 240px;
   max-width: unset;
   top: 0px;
   left: 0px;
}

#plc_input,
#plc_input_two,
#plc_input_three,
#plc_input_four,
#plc_input_five {
   font-size: 0px;
   cursor: pointer;
   border: navajowhite;
   color: rgba(0, 0, 255, 0) !important;
}

.plotPointDialogDefaults {
   background: rgb(19, 101, 120);
   padding: 20px;
   position: fixed;
   color: white;
   bottom: 77px;
   left: 30px;
}

.plotPointDialogButton,
.plotPointScreenAreaButton {
   background: rgb(49, 28, 28);
   display: inline-block;
   border: 1px solid rgb(43, 42, 42);
   cursor: pointer;
   margin-right: 30px;
   padding: 2px;
   width: 110px;
   text-align: center;
}

.plotNewPoint {
   background: rgba(4, 43, 18, 0.55);
}

.randomPointButton {
   position: absolute;
   left: 6px;
   background: rgb(46, 30, 7);
}

.removeAllPoints {
   background: rgba(73, 10, 10, 0.3);
}

.randomizePlotInputs {
   background: rgb(18, 39, 33);
}

.plotPointScreenAreaButton {
   opacity: 0.4;
   background: rgb(24, 26, 28);
   border: 1px dashed rgb(83, 83, 83);
   color: rgb(190, 190, 190);
}

.plotPointScreenAreaButton[data-active="true"] {
   background: rgb(12, 14, 21);
   opacity: 1;
   border: 1px solid rgb(21, 21, 21);
   color: lightgray;
}

.rulerSettingsDebugButton {
   display: inline-block;
   background: rgb(60, 42, 9);
   cursor: pointer;
   position: absolute;
   padding: 0px;
   left: 0px;
   color: white;
   opacity: 0.7;
   height: 26px;
}

.rulerSettingsDebugButton[data-rulerdebugstatus="clean"] {
   background: rgb(13, 71, 39);
}

#plotPointOverlay[data-debug="clean"] .randomPointButton,
#plotPointOverlay[data-debug="clean"] .plotPointsDivInfo,
#plotPointOverlay[data-debug="clean"] .plotPointVarName,
#rulerSettingsDialog .plotPointVarName {
   display: none;
}

#page[data-rulerdebugstatus="debug"] .plotPointVarName {
   display: block;
   position: absolute;
   right: 52px;
   top: 13px;
   background: rgb(36, 91, 108);
   width: 230px;
   text-align: center;
}

#previewPage {
   z-index: 5;
   position: fixed;
   border: 3px solid yellow;
   height: 700px;
   width: 700px;
   background: blue;
}

.plotPointDialogInfo,
.plotPointDialogTasks {
   background: rgb(72, 37, 114);
   position: fixed;
   bottom: 27px;
   width: 352px;
   color: white;
   left: 220px;
   min-height: 70px;
   border: 3px solid black;
   padding: 3px;
}

#plotPointOverlay[data-debug="clean"] .pointPlotTypeButton,
#plotPointOverlay[data-debug="clean"] .plotPointDialogInfo,
#plotPointOverlay[data-debug="clean"] .plotPointDialogTasks {
   display: none;
}

.plotPointDialogTasks {
   background: rgb(54, 54, 80);
   right: unset;
   left: 587px;
   padding: 10px;
   bottom: 15px;
   width: 365px;
   text-align: left;
}

#previewPageOptionsBackground {
   width: 100%;
   left: 0px;
   height: 100%;
   position: fixed;
   z-index: 51;
   top: 0px;
   background: rgba(74, 82, 99, 0.69);
   display: none;
}

#previewPageOptionsWindow {
   margin-left: 10%;
   width: 50%;
   height: 85%;
   top: 55px;
   position: relative;
   background: rgb(15, 15, 15);
   transition: width 0.3s ease 0s;
}

#previewPageOptionsWindow #keyboard_shortcuts {
   width: 100%;
   position: relative;
   height: calc(100% - 107px);
}

.toggleColorPickerOptions {
   position: absolute;
   top: 28px;
   right: 13px;
   cursor: pointer;
   color: gray;
   width: 53px;
   text-align: center;
}

#entire_persistent_picker[data-options="hidden"] .hideOptions {
   display: none;
}

#entire_persistent_picker[data-options="shown"] .showOptions {
   display: none;
}

#colorPickerOptions {
   width: 204px;
   position: relative;
   vertical-align: top;
   overflow: hidden;
   height: 100%;
   transition: width 0.2s ease 0s;
   white-space: nowrap;
   color: rgb(174, 182, 183);
   border-left: 1px solid black;
   font-size: 10.5px;
}

#originalPickerOptions {
   padding-top: 5px;
}

.colorPickerOptionRow {
   padding-left: 7px;
   position: relative;
   margin-bottom: 2px;
   height: 20px;
   line-height: 20px;
}

#entire_persistent_picker[data-options="hidden"] #colorPickerOptions {
   width: 0px;
   padding: 0px;
   height: 0px;
   border: none;
}

#colorPickerContainer,
#colorPickerOptions {
   display: inline-block;
   float: left;
}

#persistentColorGrabber,
#pickerInsertionOptions {
   position: relative;
   left: 0px;
   overflow: hidden;
   padding-left: 7px;
}

#persistentColorGrabber {
   padding-left: 2px;
}

.pageColorPickerTitleText {
   display: inline-block;
}

.pageColorPickerTitleText i {
   color: gray;
   line-height: 22px;
   font-size: 10px;
}

#pickerInsertionType,
#pickerBorderWidth,
#page .cc_select[data-var="pickerInsertionType"] {
   background: black;
   border: 1px solid rgb(46, 46, 46);
   color: rgb(166, 163, 163);
   height: 21px;
   vertical-align: top;
}

#previewPage #pickerInsertionType {
   display: none;
}

#page .cc_select[data-var="pickerInsertionType"] {
   padding-left: 3px;
   width: 100px;
   vertical-align: top;
}

#page .cc_select[data-var="pickerInsertionType"],
#page .cc_select[data-var="pickerInsertionType"] .activeSelectOption,
#page .cc_select[data-var="pickerInsertionType"] .caretDown {
   height: 21px;
   line-height: 21px;
}

.pickerMeasurementType {
   display: inline-block;
}

.pickerMeasurementType>span {
   cursor: pointer;
}

.pickerMeasurementTypeDisabled>span {
   opacity: 0.2;
   cursor: default;
}

.insertionOptionsTitle {
   margin-top: 6px;
}

#colorPickerContainer {
   position: relative;
   color: white;
   background: rgb(31, 31, 31);
   width: 239px;
   height: 100%;
   overflow: hidden;
   padding-bottom: 0px;
   font-size: 10.5px;
}

.pageColorPickerTitle {
   background: black;
   text-align: center;
   position: relative;
   left: 0px;
   top: 0px;
   height: 22px;
   line-height: 22px;
   color: rgb(182, 182, 182);
}

.inspectorPositionArea,
.colorPickerPosition {
   position: absolute;
   left: 4px;
   top: 1px;
   opacity: 0.6;
}

.inspectorPositionArea {
   opacity: 1;
}

.inspectorPositionArea {
   right: 70px;
   left: unset;
   width: unset;
   height: 25px;
   top: 0px;
}

.selectorPositionButton,
.inspectorPositionButton,
.colorPickerPositionButton {
   background: rgb(62, 62, 64);
   display: inline-block;
   height: 8px;
   width: 8px;
   line-height: 10px;
   cursor: pointer;
   color: rgb(62, 61, 61);
   margin-right: 2px;
   font-size: 0px;
}

.selectorPositionButton,
.inspectorPositionButton {
   height: 18px;
   vertical-align: top;
   width: 25px;
   border: 1px solid;
   top: 5px;
   background: none;
   font-size: 10px;
   position: relative;
   color: rgb(70, 108, 145);
   opacity: 0.4;
   padding-top: 3px;
}

.selectorPositionButton {
   color: white;
   opacity: 0.2;
   top: 13px;
}

#page .inspectorPositionButton {
   padding-right: 0px;
   padding-left: 0px;
   margin: 0px;
}

.inspectorPositionButton[data-buttonposition="right"],
.inspectorPositionButton[data-buttonposition="left"] {}

#elementInspector[data-location="right"] .inspectorPositionButton[data-buttonposition="right"],
#elementInspector[data-location="left"] .inspectorPositionButton[data-buttonposition="left"] {
   opacity: 0.8;
}

.inspectorPositionButton.default {
   padding-top: 3px;
   font-weight: 600;
}

#entire_persistent_picker[data-position="left"] {
   left: 5%;
}

#entire_persistent_picker[data-position="middle"] {
   left: 38%;
}

#entire_persistent_picker[data-position="right"] {
   left: 62%;
}

#entire_persistent_picker[data-position="left"] [data-buttonposition="left"] {
   background: rgb(130, 128, 128);
}

#entire_persistent_picker[data-position="middle"] [data-buttonposition="middle"] {
   background: rgb(130, 128, 128);
}

#entire_persistent_picker[data-position="right"] [data-buttonposition="right"] {
   background: rgb(130, 128, 128);
}

.colorPickerPositionButtonActive {
   background: maroon;
}

.persistentFormatContainer {
   margin-bottom: 6px;
}

.persistentPickerRow select,
.persistentFormatContainer {
   color: rgb(183, 182, 182);
}

.persistentFormatContainer span {
   cursor: default;
}

.persistentFormatContainer i {
   margin-left: 2px;
   opacity: 0.3;
   font-size: 10px;
}

#colorPickerOptions .pageColorPickerTitle {
   width: 204px;
   position: relative;
   background: rgb(14, 18, 38);
   color: rgb(189, 188, 188);
   text-align: left;
   padding-left: 7px;
}

.pageColorPickerTitle {}

.colorPickerEyedropToggle,
.colorPickerClose {
   position: absolute;
   top: 0px;
   right: 8px;
   color: gray;
   font-size: 10px;
   cursor: pointer;
}

.colorPickerEyedropToggle {
   right: 30px;
}

.persistentPickerRow {
   padding-left: 10px;
   padding-top: 5px;
}

#entire_persistent_picker[data-options="shown"] #colorPickerContainer {}

#persistentPickerFormat,
#colorFormatCopy {
   border: 1px solid rgb(51, 51, 51);
   margin-bottom: 5px;
   height: 24px;
   line-height: 24px;
   background: rgb(46, 46, 53);
}

#previewPage #colorFormatCopy,
#previewPage #persistentPickerFormat {
   display: none;
}

#page .persistentPickerRow .cc_select[data-var="colorFormat"],
#page .persistentPickerRow .cc_select[data-var="persistentPickerFormat"] {
   padding-left: 6px;
   border-radius: 5%;
   width: 74px;
   text-align: left;
}

#page .persistentPickerRow .cc_select[data-var="colorFormat"],
#page .persistentPickerRow .cc_select[data-var="colorFormat"] .activeSelectOption,
#page .persistentPickerRow .cc_select[data-var="colorFormat"] .caretDown,
#page .persistentPickerRow .cc_select[data-var="persistentPickerFormat"],
#page .persistentPickerRow .cc_select[data-var="persistentPickerFormat"] .activeSelectOption,
#page .persistentPickerRow .cc_select[data-var="persistentPickerFormat"] .caretDown {
   height: 24px;
   line-height: 24px;
}

.colorPickerNotes {
   height: 68px;
   width: 80%;
   overflow-y: auto;
   background: black;
   color: lightgray;
   display: none;
}

#page[data-width="normalWidth"] #optionsWindow,
#page[data-width="normalWidth"] #previewPageOptionsWindow {
   width: 82%;
}

#page[data-recordingbar="show"] #optionsWindow {
   height: 57%;
}

#page[data-bottom_bar_up="yes"] #optionsWindow {
   height: 68%;
   top: 82px;
}

#page[data-recordingbar="show"] #optionsWindow[data-currentoptions="prviate_error"] {
   height: unset;
}

#optionsWindow[data-currentoptions="compile"] .commonCoverClass[data-type="optionsWindow"] {
   display: none !important;
}

#optionsWindow .commonCoverClass {
   text-align: center;
}

#searchSessionsContainer .commonCoverClass {
   position: absolute;
   top: 0px;
   left: 0px;
   display: none;
   z-index: 15;
}

.commonCoverClass[data-type="searchSessions"] i {
   position: absolute;
   right: 8px;
   top: 3px;
   cursor: pointer;
}

.autoSwitchTooSmall {
   display: none;
   position: absolute;
   top: 24px;
   left: 0px;
   height: calc(100% - 21px);
   z-index: 10;
}

#getParentsInput {
   background: rgba(3, 14, 9, 0.33);
   border: 1px solid rgb(56, 162, 129);
   color: white;
   display: inline-block;
   width: 114px;
   height: 23px;
}

#debug_message {
   background: rgb(18, 37, 79);
   border: 1px solid rgba(245, 245, 245, 0.57);
   color: white;
   position: fixed;
   bottom: 7%;
   padding: 8px;
   z-index: 5000000;
   opacity: 0.7;
   right: unset;
   left: 9px;
   display: none;
}

.editButtonsContainer,
#redoButtonArray {
   background: rgb(28, 33, 41);
   width: 55%;
   position: absolute;
   top: 200px;
   margin: 0px auto 0px 2%;
   color: lightgray;
   padding-bottom: 30px;
}

#redoButtonArray {
   padding: 6px 6px 70px;
   top: 450px;
   border: 2px solid black;
}

.editButtonsContainer .hide_parent_button {
   position: absolute;
   top: 0px;
   right: 10px;
   padding: 0px;
}

.editButtonsTitle {
   height: 25px;
   line-height: 25px;
   background: black;
   color: rgb(181, 181, 181);
   text-align: center;
   margin-bottom: 10px;
   position: relative;
   font-size: 13px;
}

.editButtonSection {}

.newButtonFunction,
.reUsePrevious {
   margin-bottom: 10px;
   background: rgb(57, 79, 99);
   display: block;
   overflow: auto;
   height: 22px;
}

.buttonFunctionTitle {
   display: inline-block;
   width: 150px;
   background: black;
   padding-left: 8px;
   float: left;
}

#extraButtonLabel,
#extraButtonFunctionInput,
#extraButtonSelect,
#extraButtonSlot {
   width: calc(100% - 150px);
   background: rgb(52, 61, 69);
   height: 22px;
   color: lightgray;
   border: 1px solid black;
   vertical-align: top;
   float: left;
   border-radius: 0px;
   padding-left: 2px;
   font-size: 12px;
}

#extraButtonSelect {
   width: calc(100% - 350px);
}

.usePreviousExtraFunction {
   background: rgba(49, 24, 29, 0.56);
   display: inline-block;
   padding: 0px 5px;
   margin-left: 7px;
   cursor: pointer;
   color: rgb(186, 186, 186);
}

.loadPreviousFunction {
   background: rgba(2, 25, 12, 0.62);
}

#extraButtonSlot {
   width: 50px;
}

.selectSlot {
   background: rgb(57, 79, 99);
   overflow: auto;
   height: 22px;
}

.editButtonsFinalizeRow {
   text-align: center;
   margin-top: 20px;
   background: none;
   height: unset;
}

.selectSlot .saveAndApply,
.selectSlot .saveApplyRedo {
   display: inline-block;
   background: rgba(30, 39, 78, 0.69);
   margin: 0px 11px;
   padding: 5px;
   cursor: pointer;
   border: 1px solid black;
}

.selectSlot .saveApplyRedo {
   background: rgba(11, 56, 31, 0.82);
}

.showRedoButtonArray {
   position: absolute;
   right: 0px;
   background: rgba(0, 0, 0, 0.22);
   padding: 4px;
   top: 2px;
   font-size: 9px;
   cursor: pointer;
   border: 1px solid rgb(77, 77, 77);
}

.selectSlotTitle {
   display: inline-block;
   float: left;
   background: black;
   height: 22px;
}

.selectSlot,
.editButtonSection {
   width: 90%;
   margin-left: 5%;
   overflow: auto;
   position: relative;
}

.disabledButtonOverlay {
   background: black;
   position: absolute;
   top: 0px;
   left: 0px;
   width: 100%;
   height: 100%;
   opacity: 0.4;
}

@media only screen and (max-height: 900px) {
   #plotPointOverlay[data-plottutorialdisplay="show"] #plotPointDialog {
      display: none;
   }

   #plotPointOverlay[data-plottutorialdisplay="show"] .plotPointDialogExplanation {
      left: 25%;
      width: 50%;
   }
}

@media only screen and (max-height: 400px) {

   .allUserShortcutInner,
   .allUserShortcutTitle {
      margin-top: 0px;
   }

   .allUserShortcutInner .CSSColorList {}

   .css_color_rows,
   .user_snippet_rows {
      height: 54%;
   }

   #entire_jsc {
      top: 100px !important;
   }

   body[data-colorpickerposition="left"] #entire_jsc {
      left: 485px !important;
   }

   body[data-colorpickerposition="middle"] #entire_jsc {
      left: 100px !important;
   }

   body[data-colorpickerposition="right"] #entire_jsc {
      right: 437px !important;
      left: unset !important;
   }
}

#featureGroupOverlay {
   position: fixed;
   background: black;
   height: 97%;
   width: 100%;
   left: 0px;
   display: none;
   z-index: 3000;
}

.missingDriveNumbers {
   position: absolute;
   top: 100px;
   left: 40px;
   border: 2px solid rgb(151, 84, 33);
   height: 50%;
   width: 80%;
   overflow-y: auto;
   background: rgb(12, 46, 73);
   padding: 9px;
   display: none;
}

#highestNumberOverride {
   background: black;
   color: rgb(151, 151, 151);
   border: 1px solid dimgray;
   margin-left: 10px;
}

.highestNumberOverrideDiv {
   margin-top: 80px;
}

.featureGroupOverlayLabel {
   position: absolute;
   top: 2px;
   right: 330px;
   background: rgb(25, 25, 25);
   color: lightgray;
   padding: 3px;
   cursor: pointer;
}

#featureDetailContainer,
#glossarySearchResults {
   right: 28%;
   width: 26%;
}

#glossaryPage[data-readingmode="on"] #glossarySearchResults {
   left: unset;
   right: 23px;
   top: unset;
   bottom: 11px;
}

#featureDetailContainer {
   background: rgb(38, 38, 40);
   color: lightgray;
   position: fixed;
   padding-top: 75px;
   border: 2px solid rgb(161, 151, 151);
   overflow: hidden;
}

#featureGroupContainer,
#featureDetailContainer {
   height: 64%;
   top: 32px;
}

#page[data-width="showingConsoles"] #featureDetailContainer,
#page[data-width="showingConsoles"] #glossarySearchResults {
   width: 27%;
   left: 40%;
}

#page[data-width="showingConsoles"] #glossarySearchResults {
   left: 20%;
}

#page[data-width="showingConsoles"] #entryDetailEditor #glossarySearchResults {
   left: unset;
   width: 44%;
}

#page[data-width="showingConsoles"] #codeCreate #glossarySearchResults {
   left: 40%;
}

#recordingMenuContentCopy {
   background: rgb(6, 6, 48);
   padding: 3px;
   position: fixed;
   z-index: 6000;
   border: 4px solid rgb(173, 102, 60);
   min-height: 90px;
   min-width: 90px;
   font-size: 15px;
   bottom: 0px;
   line-height: 18px;
   color: lightblue;
   width: 100%;
   left: 0px;
   display: none;
}

#recordingMenuContentCopy .contentNum,
#recordingMenuContentCopy .actualContent {
   display: inline-block;
}

#recordingMenuContentCopy .actualContent {
   white-space: nowrap;
}

.recordingMenuContentCopyTitle {
   position: absolute;
   background: black;
   right: 0px;
   bottom: 0px;
   padding: 8px;
   z-index: 8;
}

#recordingCopyContentOnly {
   width: 70%;
   border: 3px solid pink;
   display: inline-block;
   padding: 5px;
   overflow: hidden;
}

.recordingMenuContentCopyLine {
   white-space: nowrap;
   cursor: pointer;
}

#recordingContentCopyButtons {
   width: 28%;
   display: inline-block;
   background: rgb(37, 44, 50);
   border: 3px solid cyan;
   vertical-align: top;
   height: 150px;
}

.recordingMenuContentCopyLine[data-state="on"] {
   color: rgb(140, 140, 38);
   background: black;
}

#featureGroupOverlay #glossarySearchResults,
#featureGroupOverlay #featuresWithoutGrouping {
   top: 70% !important;
   height: 23% !important;
}

#featureGroupOverlay #featureGroupContainer,
#featureGroupOverlay #featureDetailContainer,
#featureGroupOverlay #featuresWithoutGrouping,
#featureGroupOverlay #glossarySearchResults {
   border: 2px solid rgb(0, 159, 255) !important;
}

#featureGroupOverlay[data-heights="inverted"] #featureDetailContainer {
   height: 30%;
}

#featureGroupOverlay[data-heights="inverted"] #glossarySearchResults {
   height: 54% !important;
   top: 41% !important;
}

#featureDetailContainer,
#glossarySearchResults {
   left: 58%;
   width: 30%;
}

.glossaryDetailTitle {
   display: inline-block;
   width: 30%;
   vertical-align: top;
}

.glossaryDetailTitle[data-key="associatedNumber"] {
   background: rgb(50, 68, 72);
}

#featureDetailContainer input,
#featureDetailContainer textarea {
   display: inline-block;
   width: 57%;
   border: 1px solid rgb(25, 25, 25);
   background: black;
   vertical-align: top;
   margin-left: 11px;
   color: rgb(168, 168, 168);
   font-size: 17px;
}

.currentGlossaryNumber {
   position: absolute;
   right: 0px;
   top: 0px;
   padding: 4px;
   background: blue;
}

#currentGlossaryEntry {
   background: black;
   margin-bottom: 12px;
   text-align: center;
   color: rgb(179, 179, 179);
   height: 43px;
   overflow: hidden;
}

#glossaryEntryModifiedStatus {
   position: absolute;
   top: 27px;
   border: 2px solid black;
   background: rgb(5, 29, 2);
   left: 4px;
   padding: 2px;
   font-size: 10px;
   cursor: pointer;
   min-height: 25px;
   vertical-align: text-bottom;
}

.glossaryEntryDetailRows {
   border: 3px solid rgb(152, 152, 24);
   height: 81%;
   overflow-y: auto;
}

#glossaryEntryModifiedStatus[data-status="modified"] {
   cursor: pointer;
   background: rgba(82, 9, 22, 0.87);
}

.glossaryDetailRow {
   border: 1px solid rgb(41, 41, 42);
   margin-bottom: 15px;
   background: rgb(21, 21, 23);
   padding: 8px;
   width: 96%;
   margin-left: 2%;
   position: relative;
   color: rgb(147, 146, 146);
}

#featureGroupContainer {
   position: fixed;
   overflow: hidden;
   color: lightgray;
   background: rgb(28, 32, 36);
}

#featuresWithoutGrouping {
   position: fixed;
   background: rgb(41, 40, 40);
   padding: 20px;
   overflow: hidden;
   top: 68%;
}

#page[data-width="showingConsoles"] #featureGroupContainer,
#page[data-width="showingConsoles"] #featuresWithoutGrouping {
   left: 1%;
   width: 35%;
}

#page #featureGroupContainer,
#page #featuresWithoutGrouping {
   width: 53%;
   left: 3%;
}

#featureGroupColumnContainer {
   border: 3px solid black;
   background: rgba(58, 53, 17, 0.29);
   overflow-y: auto;
   height: 76%;
   position: relative;
   padding-left: 12px;
}

#featureGroupColumnContainer input {
   background: rgb(36, 36, 36);
   color: lightgray;
   border: 1px solid rgb(66, 66, 64);
   position: absolute;
   left: 0px;
   height: 20px;
   top: 1px;
   width: 90%;
   text-align: center;
   font-size: 12px;
   display: none;
}

#featureGroupColumnContainer .cc_debug_title {
   opacity: 0.5;
   top: 0px;
   bottom: unset;
   display: none;
}

.featureGroupColumn {
   width: 32%;
   border: 1px solid rgb(0, 0, 0);
   display: inline-block;
   background: rgb(36, 37, 54);
   vertical-align: top;
   margin: 3px;
   height: 400px;
}

#page[data-width="showingConsoles"] .featureGroupColumn {
   width: 47%;
}

.featureGroupColumnHeading {
   background: black;
   height: 25px;
   line-height: 25px;
   width: 100%;
   text-align: center;
   color: lightgray;
   position: relative;
}

.editFeatureGroupName {
   position: absolute;
   right: 10px;
   top: 0px;
   cursor: pointer;
}

.featureGroupColumnInner {
   background: rgb(9, 6, 25);
   border: 1px solid rgb(63, 63, 63);
   height: calc(100% - 30px);
   overflow-y: auto;
   padding-bottom: 40px;
}

#featureWithoutGroupingColumn {
   height: calc(100% - 60px);
}

.addFeatureGroupButton,
.saveFeatureGroupButton,
.highestNumberDisplay {
   background: rgba(40, 101, 125, 0.9);
   color: rgb(235, 235, 235);
   padding: 5px;
   margin: 6px;
   display: inline-block;
   cursor: pointer;
}

a.saveFeatureGroupButton {
   color: white;
}

#newCCFeature {
   background: black;
   color: lightgray;
   width: 180px;
   border: 1px solid dimgray;
}

.googleDriveGaps {
   border: 1px solid black;
   background: rgb(2, 35, 17);
}

.googleDriveGaps.hasMissingNumbers {
   background: rgb(82, 11, 11);
}

.closeFeatureGroupWindow {
   padding: 0px 3px;
   position: absolute;
   right: 10px;
   top: 5px;
   font-size: 18px;
   color: rgb(0, 0, 0);
   background: rgb(155, 155, 155);
   cursor: pointer;
   display: none;
}

.sampleFeature {
   display: block;
   background: rgba(66, 31, 8, 0.47);
   color: rgb(169, 167, 167);
   border: 1px solid rgba(36, 36, 36, 0.62);
   cursor: grab;
   position: relative;
   padding-right: 73px;
   min-height: 20px;
}

#featureWithoutGroupingColumn .sampleFeature {
   background: rgb(3, 11, 31);
}

.sampleFeature.glossaryCompleteLine {
   background: rgba(38, 51, 83, 0.78);
   border: 1px solid rgba(0, 128, 0, 0.55);
}

.sampleFeature.featureOutstandingNotesLine {
   background: rgba(239, 230, 35, 0.16);
}

.sampleFeatureName {
   border-right: 1px solid rgba(219, 219, 219, 0.38);
}

.sampleFeature[data-lineitem="ended_at_now_the_top_bar_and_the_submenus_are_clashing"] {
   background: gold;
   display: none;
}

.sampleFeature .driveNumber {
   background: black;
   position: absolute;
   right: 0px;
   top: 0px;
   height: 15px;
   width: 27px;
   font-size: 11px;
   line-height: 15px;
   text-align: center;
   border: 1px solid dimgray;
   opacity: 0.6;
}

.gifEntryWritten,
.gifEntryDone,
.hasOutstandingNotes {
   position: absolute;
   top: 0px;
   right: 30%;
   background: rgb(16, 76, 108);
   width: 12px;
   height: 12px;
   line-height: 12px;
   font-size: 8px;
   text-align: center;
   border: 1px solid black;
}

.gifEntryWritten {
   background: rgb(98, 17, 121);
   right: 28px;
}

.gifEntryDone {
   right: 39px;
   font-size: 7px;
}

.associatedDone {
   width: 12px;
   overflow: hidden;
}

.hasOutstandingNotes {
   right: 50px;
   background: rgb(104, 90, 22);
}

.entry-content {}

#narrowMenuContainer {
   height: 90px;
   background: pink;
   overflow: hidden;
}

.condensedHelpDialog:not(#optionalCondensedDisplay) {
   border: 4px solid orange;
}

#modulePageTasks {
   background: rgb(31, 2, 31);
   position: fixed;
   width: 400px;
   right: 50px;
   bottom: 20px;
   padding: 20px 20px 50px;
   border: 2px solid cyan;
   font-size: 16px;
   z-index: 333;
   display: none;
}

.modulePageTasksTitle {
   background: black;
   position: absolute;
   bottom: 0px;
   right: 0px;
   padding: 4px;
}

.modulePageTasksInner {
   border: 1px solid rgb(33, 33, 33);
   padding: 5px;
}

.modulePageTasksInnerLine {
   border: 1px solid rgba(255, 255, 255, 0.26);
   background: rgb(6, 17, 44);
   padding: 6px;
   margin: 6px;
}

.modulePageTasksInnerLine:nth-child(2n+1) {
   background: black;
   color: rgb(170, 184, 189);
}

body {
   height: 50px !important;
   overflow: hidden !important;
}

.page-id-1577 {
   background: rgb(2, 28, 33) !important;
}

#forGifsOverlay {
   position: fixed;
   left: 1%;
   top: 1%;
   width: 57%;
   height: 98%;
   background: rgb(32, 23, 51);
   border: 3px solid rgb(0, 152, 255);
   padding: 8px;
}

#theSampleImages {
   position: fixed;
   border: 6px solid rgb(58, 109, 139);
   background: rgb(38, 7, 7);
   z-index: 33;
   top: 100px;
   height: 85%;
   margin-left: 30%;
   width: 60%;
   overflow-y: scroll;
   display: none;
}

.sampleImagesCloseButton {
   color: gray;
   position: absolute;
   font-size: 18px;
   right: 10px;
   top: 10px;
}

.oneSampleImageDiv {
   margin: 8px 8px 20px;
   border: 3px solid yellow;
}

.oneSampleImageDiv img {
   transform: scale(0.6);
   border: 3px solid green;
}

#functionFactoryOverlay,
.commonCoverClass[data-type="functionFactoryPreviewPage"] {
   top: 36px;
   height: calc(100% - 81px);
   background: rgb(2, 3, 18);
   width: 100%;
   z-index: 300;
   position: fixed;
   left: 0px;
   color: white;
   overflow: hidden auto;
   display: none;
   font-size: 17px;
}

#page[data-headershown="false"] #previewPage #functionFactoryOverlay {
   top: 0px;
   height: 100%;
}

.commonCoverClass[data-type="functionFactoryPreviewPage"] {
   z-index: 305;
}

#codeCreate #functionFactoryOverlay {
   position: absolute;
   top: 0px;
   height: 100%;
   z-index: 30;
   background: rgb(46, 44, 48);
}

.function_factory_html_label {
   position: absolute;
   top: 0px;
   right: 0px;
   border: 3px solid rgb(179, 194, 110);
   background: darkblue;
   opacity: 0.5;
   z-index: 8;
   display: none;
}

#page[data-functionfactorydebug="on"] .function_factory_html_label {
   display: block;
}

.ffCoverCloseButton {
   position: absolute;
   right: 7px;
   top: 2px;
   cursor: pointer;
   z-index: 13;
   color: gray;
}

body.page-id-1414 {
   background: rgb(6, 14, 41);
}

body.page-id-1439 {
   height: unset !important;
}

body.page-id-1436 {
   background: rgb(23, 29, 55);
   height: 100% !important;
   overflow: unset !important;
}

body[data-kboutputconsoles="shown"] {
   border: 7px solid rgb(60, 128, 0);
}

body[data-kboutputconsoles="shown"] #genericTopBar {
   width: calc(100% - 20px);
   left: 8px;
   top: 4px;
   height: 66px;
}

#glossaryNormalUserFinalButton,
#adjustVideoView,
#floatingSearchToggle {
   position: relative;
   background: rgb(66, 66, 99);
   cursor: pointer;
   padding: 3px;
   top: 0px;
   display: inline-block;
   vertical-align: top;
}

#floatingSearchToggle {
   background: darkblue;
   color: lightblue;
}

#glossaryNormalUserFinalButton {
   display: none;
}

.windowMeasurements {
   display: inline-block;
   left: 0px;
   background: rgb(3, 34, 61);
   width: 206px;
   color: white;
   font-size: 13px;
   height: 28px;
   position: relative;
   cursor: default;
   transition: opacity 0.2s ease 0s;
   white-space: nowrap;
   overflow: hidden;
}

#surveyBody .windowMeasurements {
   position: absolute;
   bottom: 0;
   right: 150px;
   left: unset;
   transform: scale(1.1);
}

.windowMeasurements[data-location="userReports"] {
   position: fixed;
   font-size: 1.3em;
   background: rgb(30, 74, 79);
   z-index: 100;
   padding: 15px;
   top: unset;
   bottom: 6px;
   width: unset;
   height: unset;
   left: 0px !important;
   right: unset !important;
}

#page .page-id-1584 .windowMeasurements {
   height: 800px;
   width: 800px;
   background: green;
   top: 0px;
   bottom: unset;
   left: 0px;
   right: unset;
   z-index: 333333333;
}

#glossaryPage .windowMeasurements {
   position: relative;
   bottom: 0px;
   background: rgb(7, 34, 51);
   width: 300px;
   text-align: center;
   font-size: 15px;
   margin-bottom: 20px;
}

.bottomBarButton .windowMeasurements {
   background: inherit;
   width: 100%;
   color: inherit;
}

#twoMainContainers[data-mediaopacity="75"] .windowMeasurements,
#innerFrameContainer[data-mediaopacity="75"] .windowMeasurements {
   opacity: 0.75;
}

#page #previewCodeFooter .windowMeasurements {
   opacity: 1;
   position: relative;
   line-height: 30px;
   height: 30px;
   bottom: 0px;
}

#twoMainContainers[data-mediaopacity="50"] .windowMeasurements,
#innerFrameContainer[data-mediaopacity="50"] .windowMeasurements {
   opacity: 0.5;
}

#twoMainContainers[data-mediaopacity="25"] .windowMeasurements,
#innerFrameContainer[data-mediaopacity="25"] .windowMeasurements {
   opacity: 0.25;
}

#twoMainContainers[data-mediaopacity="10"] .windowMeasurements,
#innerFrameContainer[data-mediaopacity="10"] .windowMeasurements {
   opacity: 0.1;
}

#twoMainContainers[data-mediaopacity="off"] .windowMeasurements,
#innerFrameContainer[data-mediaopacity="off"] .windowMeasurements {
   display: none;
}

#twoMainContainers[data-medialocation="bottomLeft"] .windowMeasurements,
#innerFrameContainer[data-medialocation="bottomLeft"] .windowMeasurements {}

#twoMainContainers[data-medialocation="bottomRight"] .windowMeasurements,
#innerFrameContainer[data-medialocation="bottomRight"] .windowMeasurements {
   left: unset;
   right: 0px;
}

#twoMainContainers[data-medialocation="topLeft"] .windowMeasurements,
#innerFrameContainer[data-medialocation="topLeft"] .windowMeasurements {
   bottom: unset;
   top: 0px;
}

#twoMainContainers[data-medialocation="topRight"] .windowMeasurements,
#innerFrameContainer[data-medialocation="topRight"] .windowMeasurements {
   left: unset;
   right: 0px;
   bottom: unset;
   top: 0px;
}

#twoMainContainers .windowMeasurements:hover,
#innerFrameContainer .windowMeasurements:hover {
   opacity: 1;
}

#buttonsBar .windowMeasurements {
   background: rgb(3, 27, 19);
   width: 210px;
}

#entire_render .windowMeasurements,
#innerFrameContainer .windowMeasurements {
   position: absolute;
   bottom: 0px;
   left: 0px;
   width: unset;
   padding-right: 19px;
   height: 36px;
   line-height: 36px;
   z-index: 333;
}

#innerFrameContainer .windowMeasurements {
   bottom: 0px;
   text-align: left;
   height: 30px;
}

#page[data-headershown="false"] #innerFrameContainer .windowMeasurements {
   bottom: 0px;
}

.windowWidthButton,
.windowHeightButton {
   display: inline-block;
   cursor: pointer;
}

.measurementZoomSection {
   display: inline-block;
}

.windowWidthButton {
   margin-right: 10px;
   margin-left: 2px;
}

.measurementCopied {
   position: absolute;
   color: lightgray;
   top: 0px;
   background: inherit;
   z-index: 7;
   width: 100%;
}

.bottomBarButton .measurementCopied {
   color: inherit;
}

.languageHideShownCloseButton {
   position: absolute;
   right: 4px;
   top: 0px;
   cursor: pointer;
   color: gray;
}

#layoutOverlay .narrowLayoutView {
   display: none;
}

#kb_print {
   position: fixed;
   background: rgb(23, 29, 55);
   padding: 20px 20px 87px;
   color: white;
   top: 66px;
   z-index: 5;
   text-align: center;
   height: calc(100% - 66px);
   width: 100%;
   overflow: hidden;
}

body[data-kboutputconsoles="shown"] #kb_print {
   border: 7px solid rgb(197, 93, 178);
   width: calc(100% - 620px);
}

#phpTestingWindow {
   display: none;
   position: fixed;
   top: 0px;
   left: -1px;
   width: 56%;
   height: 100%;
   background: rgb(22, 16, 21);
   z-index: 2147483647;
   color: white;
   padding: 18px;
   border: 4px solid rgb(13, 93, 93);
}

body[data-kboutputconsoles="shown"] #outputConsoles,
body[data-kboutputconsoles="shown"] #outputConsoles * {}

#kb_print[data-caller="glossaryPage"] {
   display: none;
   position: absolute;
   border: 3px solid orange;
   overflow: hidden;
   height: 95%;
   width: 97%;
}

#glossaryPageInfo {
   background: rgb(8, 39, 74);
   width: 60%;
   color: rgb(226, 223, 223);
   border: 2px solid rgb(208, 199, 199);
   margin-bottom: 20px;
   position: absolute;
   bottom: 27px;
   height: 127px;
   overflow-y: auto;
   left: 0px;
   padding: 6px;
   display: none;
}

#glossaryPage[data-debug="on"] #glossaryPageInfo {
   display: block;
}

#glossaryPageInfo .importantInfo {
   border: 3px solid rgb(33, 153, 147);
   position: absolute;
   right: 0px;
   width: 272px;
   top: 0px;
   background: rgb(13, 13, 13);
   padding: 5px;
}

#kb_print.consoleShown {
   width: 60%;
   left: 30%;
}

.demo {
   font-family: sans-serif;
   border: 1px solid rgb(238, 238, 238);
   border-radius: 2px;
   padding: 20px 30px;
   margin-top: 1em;
   margin-bottom: 40px;
   user-select: none;
   overflow-x: auto;
}

.page-id-1436 #query-monitor {
   display: none;
}

.marginReminder {
   text-align: center;
   font-size: 11px;
   cursor: default;
}

.marginReminderText {
   padding: 0px 8px;
   opacity: 0.3;
   transition: opacity 0.4s ease 0s;
}

.kbPrintAdminInfo {
   border: 3px solid blue;
   width: 634px;
   position: absolute;
   bottom: 15px;
}

.kbPrintOutputConsolesToggle {
   cursor: pointer;
   width: 300px;
   border: 2px solid rgb(116, 119, 116);
   background: black;
   display: inline-block;
}

.kb_print_title {
   display: none;
}

.marginReminderText:hover {
   opacity: 0.7;
}

.toggle_kb_console {
   position: fixed;
   top: 2px;
   opacity: 0.4;
   right: 50px;
   background: black;
   padding: 4px;
   transition: opacity 0.3s ease 0s;
   cursor: pointer;
}

.toggle_kb_console:hover {
   opacity: 0.8;
}

.glossaryInputLine {
   padding-left: 10px;
   padding-top: 10px;
   white-space: nowrap;
}

#glossarySearchInput {
   background: rgb(42, 56, 73);
   color: rgb(184, 184, 184);
   border: 1px solid rgb(0, 0, 0);
   width: 50%;
   margin-right: 10px;
}

#glossarySearchResults,
#glosssarySearchResultsCopy {
   position: fixed;
   height: 273px;
   background: rgb(1, 5, 10);
   color: rgb(202, 202, 202);
   border: 1px solid black;
   bottom: 49px;
   overflow: hidden;
   transition: height 0.5s ease 0s;
   right: 57px;
   z-index: 10;
}

#glossaryPage #glossarySearchResults {
   display: none;
}

#userReports #glossarySearchResults {
   display: none;
}

#codeCreate>#glossarySearchResults {
   display: none;
}

#featureGroupOverlay #glossarySearchResults {
   border: 2px solid lightgray;
}

#glossaryPage .inputSearchWord {
   color: rgb(175, 175, 175);
   display: inline-block;
   margin-right: 10px;
}

#marketing {
   z-index: 5555;
}

#glossaryPage[data-searchstatus="closed"] #glossarySearchResults {
   height: 28px;
   overflow: hidden;
}

#glossarySearchResults .relativeContainer {}

#glossaryFilterRow {
   background: rgb(6, 16, 29);
   position: relative;
   border: 1px solid rgb(10, 10, 10);
   margin-top: 16px;
   padding: 8px;
   display: none;
}

.glossaryCheckmarkSection {
   border: 2px solid rgb(45, 45, 45);
   background: black;
   padding: 5px;
   color: lightgray;
   position: relative;
   line-height: 33px;
}

.glossaryClickInfo {
   border: 2px solid rgb(22, 22, 22);
   margin: 6px;
   padding: 6px;
   color: rgb(191, 186, 186);
}

.glossaryClickInfo.infoName {
   background: rgb(37, 37, 53);
}

.glossaryClickInfo.infoNumber {
   background: rgb(40, 40, 43);
}

.glossaryClickInfo.infoStatus {
   background: rgb(13, 1, 39);
}

.glossaryStatusTextTwo {
   display: inline-block;
   border: 3px solid transparent;
}

.infoStatus[data-status="complete"] .glossaryStatusTextTwo,
.infoStatus[data-status="complete"] {
   border: 3px solid rgb(9, 58, 9);
}

.infoStatus[data-status="complete"] .glossaryStatusTextTwo {
   background: rgb(3, 35, 3);
}

.infoStatus[data-status="needsWork"] .glossaryStatusTextTwo,
.infoStatus[data-status="needsWork"] {
   border: 3px solid rgb(78, 21, 11);
}

.infoStatus[data-status="needsWork"] .glossaryStatusTextTwo {
   background: rgb(101, 50, 10);
}

.glossaryClickInfoText {
   width: 270px;
   display: inline-block;
}

#glossaryFilterInput {
   background: rgb(31, 39, 49);
   border: 1px solid rgb(0, 0, 0);
   color: rgb(189, 193, 194);
   padding-left: 10px;
   height: 15px;
}

.glossaryFilterText {
   color: rgb(193, 199, 205);
   cursor: default;
}

.glossaryFilterText,
.glossaryFilterButton {
   display: inline-block;
   height: 32px;
   line-height: 32px;
   vertical-align: top;
}

#featureGroupOverlay #glossarySearchResults .hide_parent_button,
#featureGroupOverlay #glossarySearchResults .glossarySearchCaret,
#featureGroupOverlay #glossarySearchResults .cc_debug_title {
   display: none;
}

#glossarySearchResults .hide_parent_button {
   top: 1px;
}

.glossarySearchTitle {
   background: rgb(30, 29, 36);
   position: relative;
   top: 0px;
   width: 100%;
   left: 0px;
   height: 28px;
   line-height: 28px;
   border-bottom: 1px solid rgb(82, 82, 82);
   text-align: center;
   cursor: default;
}

.glossarySearchCaret {
   position: absolute;
   right: 10px;
   cursor: pointer;
   top: 0px;
}

#glossarySearchResults[data-size="full"] .fa-chevron-up,
#glossarySearchResults[data-size="small"] .fa-chevron-down {
   cursor: default;
   opacity: 0.1;
}

#glossaryPage[data-searchstatus="closed"] .glossarySearchCaret .fa-chevron-down {
   display: none;
}

#glossaryPage[data-searchstatus="open"] .glossarySearchCaret .fa-chevron-up {}

.glossaryResultsOuter {
   padding: 8px;
   height: 100%;
}

.glossaryResultsSection {
   background: rgb(45, 59, 76);
   border: 1px solid black;
   padding: 8px;
   overflow-y: auto;
   height: calc(100% - 93px);
   color: rgb(176, 175, 175);
}

.oneGlossarySearchRow {
   position: relative;
   border-bottom: 1px solid rgba(62, 60, 60, 0.87);
}

.textInGlossaryFound {
   cursor: default;
   background: rgb(31, 39, 49);
   padding: 8px;
   color: rgb(205, 205, 205);
   max-width: 1000px;
   position: relative;
   width: calc(100% - 70px);
   overflow: hidden;
}

.goToGlossaryEntry {
   position: absolute;
   background: rgb(7, 14, 41);
   padding: 0px 12px;
   right: 10px;
   color: rgb(176, 189, 197);
   cursor: pointer;
   top: 10px;
   border: 1px solid black;
   height: 23px;
   line-height: 23px;
}

.textInGlossaryFound:nth-child(2n+1) {
   background: none;
}

.mainGlossarySearchInner .textInGlossaryFound {
   padding: 10px;
}

.glossarySearchButton {
   display: inline-block;
   background: rgb(46, 59, 75);
   cursor: pointer;
   font-size: 13px;
   height: 26px;
   line-height: 26px;
   padding: 0px 8px;
}

.glossarySearchHighlight {
   background: black;
   padding: 0px 4px;
   color: rgb(154, 240, 240);
   max-width: 300px;
   overflow-x: hidden;
   text-overflow: ellipsis;
   display: inline-block;
   vertical-align: top;
   height: 23px;
   white-space: nowrap;
}

.glossarySearchHighlight.glossaryGroup {
   color: yellow;
}

.glossarySearchHighlight.glossaryGroup[data-type="module"] {
   color: rgb(98, 201, 98);
}

.glossarySearchHighlight.glossaryGroup[data-type="summary"] {
   color: rgb(211, 168, 217);
}

.newGlossarySearchTextQuery {
   background: black;
   color: rgb(228, 170, 59);
   display: inline-block;
   margin: 0px 6px;
   padding: 0px 3px;
}

.glossarySearchHighlight.glossaryNumber {
   color: orange;
}

.page-id-1439 #outputConsoles,
.page-id-1439 #mySideDiv {
   display: none;
   overflow: hidden;
   height: 0px !important;
   width: 0px !important;
}

#glossaryPrintSection {
   background: black;
   min-height: 900px;
   border: 2px solid rgb(182, 184, 182);
   position: relative;
   color: white;
}

#glossaryPrintSection .myTitle {
   background: lightgray;
   color: black;
}

body.page-id-1436 #glossaryPrintSection {
   display: block;
}

.wasLoadedAbove {
   background: black;
   color: rgb(201, 192, 255);
}

.numberToSearch {
   background: black;
   color: orange;
   width: 34px;
   display: inline-block;
   text-align: center;
}

#barAreaGUIFilter {
   overflow: hidden;
   color: rgb(164, 165, 177);
   padding-left: 5px;
   font-size: 11px;
}

.guiFilterSearchWord {
   display: inline-block;
}

#filterSearchSection,
#barAreaGUIFilter {
   position: absolute;
   bottom: 0px;
   right: 0px;
   width: 50%;
   background: rgb(31, 35, 63);
   height: 36px;
   line-height: 36px;
   text-align: left;
   white-space: nowrap;
}

@media only screen and (min-width: 1400px) {
   #filterSearchSection {
      width: 50%;
   }
}

#kb_print #filterSearchSection {
   background: black;
   width: 55%;
   max-width: 438px;
}

.filterWordButton {
   display: none;
}

#previewPageOptionsWindow #filterSearchSection {
   width: 60%;
   color: rgb(193, 193, 193);
   max-width: 400px;
}

#filterSearchInput,
.filterSearchButton,
#barAreaFilterText,
.barFilterSearchButton {
   height: 22px;
   top: 7px;
   line-height: 22px;
   position: relative;
   vertical-align: top;
}

#filterSearchInput,
#barAreaFilterText {
   width: calc(100% - 136px);
   background: rgb(56, 56, 56);
   border: 1px solid black;
   color: rgb(187, 187, 187);
}

#kb_print #filterSearchInput {
   width: calc(100% - 124px);
}

.filterSearchButton {
   background: black;
   display: inline-block;
   color: lightgray;
   width: 28px;
   margin-left: 5px;
   text-align: center;
   cursor: pointer;
}

#kb_print .filterSearchButton {
   background: rgb(33, 47, 74);
}

.optionsWindowTitle {
   display: inline-block;
   padding: 3px;
}

#manualSessionRefresh {
   border: 1px solid rgb(52, 52, 52);
   position: relative;
   background: rgba(0, 0, 139, 0.08);
   width: 30px;
   top: 0px;
   cursor: pointer;
   display: inline-block;
   height: 23px;
   margin-left: 12px;
   color: rgb(167, 166, 166);
   text-align: center;
}

#previewPage #manualSessionRefresh {
   line-height: 25px;
}

.optionsWindowAdminMessage {
   position: absolute;
   top: -5px;
   width: 100%;
   left: 0px;
   font-size: 8px;
}

#page[data-width="normalWidth"] .optionsWindowAdminMessage {
   display: none;
}

.optionsWindowSearchButton {
   height: 30px;
   line-height: 30px;
   padding: 0px 4px 0px 8px;
   cursor: default;
   border: none;
   opacity: 0.7;
   display: inline-block;
}

.switchFeatureDetailHeights {
   position: absolute;
   left: 15px;
   top: 0px;
   font-size: 9px;
   opacity: 0.7;
   cursor: pointer;
}

.renameShortcutSlot {
   color: rgb(138, 138, 138);
   position: absolute;
   left: 17px;
   font-size: 12px;
   opacity: 0.4;
   cursor: pointer;
   transition: opacity 0.2s ease 0s;
   padding: 0px 4px;
   top: 13px;
}

#entire_shortcuts[data-width="small"] .renameShortcutSlot {
   top: 11px;
   left: 3px;
   font-size: 0.7em;
}

.renameShortcutSlot:hover {
   opacity: 0.8;
}

.renameShortcutsOverlay {
   background: rgb(40, 40, 69);
   color: white;
   position: absolute;
   height: 51px;
   width: 100%;
   left: 0px;
   top: 0px;
   z-index: 2;
   line-height: 51px;
   padding-top: 9px;
   display: none;
}

.renameShortcutsOverlay span {
   color: lightgray;
   margin-right: 10px;
}

.renameShortcutsOverlay span,
#page .renameSetsInput,
.startSetRenameButton {
   height: 25px;
   line-height: 25px;
   font-size: 13px;
   vertical-align: top;
}

#page .renameSetsInput {
   background: rgb(17, 17, 17);
   border: 1px solid rgb(14, 14, 14);
   color: rgb(179, 179, 179);
   bottom: 2px;
   position: relative;
   width: 57%;
   margin-right: 5px;
}

.renameSetsLineTwo {
   position: relative;
   text-align: center;
   display: none;
}

.shortcutSetNameTaken {
   position: absolute;
   color: white;
   background: rgba(0, 0, 0, 0.22);
   opacity: 0.7;
   z-index: 4;
   left: 0px;
   top: 0px;
   font-size: 10px;
   height: 17px;
   line-height: 1;
   width: 100%;
}

.startSetRenameButton {
   display: inline-block;
   background: rgb(19, 19, 72);
   color: white;
   font-size: 12px;
   width: 40px;
   border: 1px solid black;
   position: relative;
   top: -2px;
}

.basicColorFormatRow {
   position: absolute;
   background: rgb(5, 19, 36);
   width: 100%;
   left: 0px;
   top: 0px;
   height: 100%;
   line-height: 30px;
   padding-top: 6.5px;
   z-index: 9;
   overflow: hidden;
}

.basicFormatTitle,
#basicExtraFormat {
   display: inline-block;
   height: 25px;
   vertical-align: top;
}

.basicFormatTitle {}

#entire_shortcuts[data-width="small"] .basicFormatTitle {
   font-size: 0.7em;
   padding-left: 12px;
}

.cc_select {
   display: inline-block;
   border: 2px solid orange;
   position: relative;
   cursor: default;
}

#previewPage .cc_select[data-var="bottomButton1"] {
   min-width: 70px;
}

.cc_select[data-var="vuePlaybackSpeed"] {
   background: rgba(9, 24, 62, 0.5);
   color: rgb(174, 193, 205);
   border: 1px solid rgba(2, 56, 56, 0.21);
}

.cc_select[data-var="vuePlaybackSpeed"],
.inactiveSelectOptions[data-var="vuePlaybackSpeed"] {
   min-width: 65px;
   text-align: left;
}

.cc_select[data-var="vuePlaybackSpeed"] {
   padding-left: 4px;
   height: 20px;
   line-height: 20px;
   vertical-align: top;
}

.cc_select[data-var="basicSharingSettings"] {
   border: 1px solid black;
   background: rgb(16, 43, 83);
   margin-left: 8px;
   padding-left: 12px;
   vertical-align: top;
}

.cc_select[data-var="userColorFormat"] {
   border: 1px solid rgba(53, 53, 53, 0.32);
   height: 22px;
   overflow: hidden;
   top: 2px;
   line-height: 22px;
   background: black;
   vertical-align: top;
}

.cc_select[data-var="keyboardShortcutModuleFilter"],
.cc_select[data-var="subType"] {
   border: 1px solid rgba(179, 179, 179, 0.31);
   background: rgb(0, 0, 0);
   width: 140px;
   height: 20px;
   padding: 3px;
   overflow: hidden;
   position: absolute;
   top: 4px;
   left: 4px;
   opacity: 0.6;
   transition: all 0.2s ease 0s;
}

.cc_select[data-var="keyboardShortcutModuleFilter"],
#page .cc_select[data-var="keyboardShortcutModuleFilter"] {
   left: unset;
   right: 200px;
}

.sessionsContainerTitle .cc_select {
   display: none;
}

.firstKeyHintRow .cc_select {
   left: unset;
   right: 15px;
}

#kb_print .cc_select[data-var="keyboardShortcutModuleFilter"] {
   right: 240px;
}

.cc_select[data-var="subType"]:hover {}

.cc_select[data-var="keyboardShortcutModuleFilter"] .caretDown,
.cc_select[data-var="subType"] .caretDown {
   line-height: 12px;
}

.cc_select[data-var="keyboardShortcutModuleFilter"] .activeSelectOption,
.cc_select[data-var="subType"] .activeSelectOption {
   line-height: 12px;
}

.cleanMenu .cc_select.radioTrue {
   display: none;
}

.cc_select[data-var="newSessionPrivacySetting"],
.cc_select[data-var="newSessionLanguageSetting"],
.cc_select[data-var="scratchTheme"],
.cc_select[data-var="editorTheme"] {
   text-transform: capitalize;
}

.cc_select[data-var="newSessionTemplate"] {}

.cc_select[data-list="selectSession"] {
   vertical-align: top;
   color: wheat;
   padding-left: 6px;
}

.inactiveSelectOptions {
   position: fixed;
   display: none;
   background: rgb(13, 30, 79);
   color: lightgray;
   border: 1px solid rgb(40, 40, 40);
   max-height: 493px;
   overflow-y: auto;
}

#editorThemenewSelect,
#secondaryEditorThemenewSelect {
   min-width: 297px;
}

.plottedPoint {
   background: black;
   height: 17px;
   width: 17px;
   position: fixed;
   cursor: pointer;
   z-index: 5000;
}

.myPointNumber {
   background: rgba(0, 0, 0, 0.39);
   color: rgb(223, 218, 218);
   font-size: 0.7em;
   display: inline-block;
   height: 14px;
   width: 14px;
   line-height: 14px;
   position: absolute;
}

body[data-showpointnumber="no"] .myPointNumber {
   display: none;
}

#colorPickerDefaultPositionnewSelect {
   font-size: 11px;
}

#colorPickerDefaultPositionnewSelect .inactiveSelectOption {
   padding: 2px;
}

.inactiveSelectOption {
   border-bottom: 1px solid rgba(136, 136, 136, 0.25);
   cursor: pointer;
   position: relative;
   padding: 3px 3px 3px 6px;
   background: rgb(19, 18, 18);
}

#basicSharingSettingsnewSelect .inactiveSelectOption {
   text-transform: initial;
}

.inactiveSelectOption:hover {
   background: rgb(6, 6, 63);
}

.inactiveSelectOption.currentlySelectedItem {
   background: rgb(17, 92, 125);
}

.inactiveSelectOption.currentlySelectedItem:hover {
   background: rgb(6, 6, 63);
}

.disabledSelectOption {
   background: rgb(56, 56, 56);
   z-index: 4;
   cursor: default;
}

.disabledSelectOption:hover {
   background: rgb(56, 56, 56);
}

.newDisabledDropdown {
   position: absolute;
   top: 0px;
   left: 0px;
   height: 100%;
   width: 100%;
   background: rgba(109, 107, 107, 0.87);
   cursor: default;
   display: none;
}

.inactiveSelectOption.overlayLocation[data-disabled="true"] .newDisabledDropdown {
   display: block;
}

.inactiveSelectOptionSeparator {
   background: black;
   cursor: default;
   text-align: center;
}

.customDropdown[data-type="scratchTheme"] .inactiveSelectOption,
.customDropdown[data-type="editorTheme"] .inactiveSelectOption {
   text-transform: capitalize;
}

#basicExtraFormat,
#page .cc_select[data-var="basicExtraFormat"] {
   width: 100px;
   border: 1px solid rgb(74, 74, 74);
   background: rgb(29, 28, 28);
   margin-top: 2px;
   height: 25px;
}

#basicExtraFormat {
   display: none;
}

#basicColorFormat {
   display: none;
}

.renameSetsLine {
   height: 25px;
   position: relative;
}

#previewMeasurementSection {
   position: fixed;
   width: 340px;
   z-index: 330;
   background: rgb(11, 25, 58);
   left: 100px;
   top: 130px;
   border: 2px solid rgb(58, 58, 58);
   padding-bottom: 80px;
   display: none;
}

.windowMeasurementTitleParital {
   display: none;
}

.previewMeasurementLine {
   background: rgb(37, 47, 73);
   width: 96%;
   margin-left: 2%;
   border-top: 1px solid black;
   border-right: 1px solid black;
   border-left: 1px solid black;
   border-image: initial;
   border-bottom: none;
   color: lightgray;
   padding-left: 15px;
   height: 37px;
   line-height: 37px;
}

.previewMeasurementLine:last-child {
   border-bottom: 1px solid black;
}

.previewMeasurementLineTitle {
   display: inline-block;
   color: lightgray;
}

.windowMeasurementTitleFull {
   width: 130px;
   display: inline-block;
}

.windowMeasurementTitlePartial {
   display: none;
}

.previewMeasurementLine select {
   width: 150px;
   border: 1px solid rgb(55, 55, 55);
   vertical-align: top;
   position: relative;
   top: 4px;
}

.previewMeasurementSectionTitle {
   position: relative;
   background: black;
   height: 26px;
   line-height: 26px;
   color: rgb(193, 193, 193);
   text-align: center;
   margin-bottom: 15px;
}

.closePreviewMeasurementSectionButton {
   position: absolute;
   right: 10px;
   top: 1px;
   color: gray;
   cursor: pointer;
}

.closePreviewMeasurementBar {
   position: absolute;
   bottom: 13px;
   width: 100%;
   color: white;
   text-align: center;
}

.closePreviewMeasurementSectionText {
   display: inline-block;
   width: unset;
   background: rgb(48, 78, 132);
   height: 29px;
   line-height: 29px;
   padding: 0px 5px;
   cursor: pointer;
}

#outerFrameContainer {
   width: 100%;
}

#page[data-recordingbar="show"] #outerFrameContainer {
   border: none;
   height: calc(100% - 368px);
}

#page[data-recordingbar="show"] #previewCodeOverlay[data-headershown="false"] #outerFrameContainer {
   height: calc(100% - 330px);
}

#page[data-recordingbar="show"] #outerFrameContainer,
#page[data-recordingbar="show"] #previewCodeHeader {}

#page[data-width="showingConsoles"] #outerFrameContainer,
#page[data-width="showingConsoles"] #functionFactoryOverlay {
   width: 67%;
}

#page[data-recordingbar="show"][data-width="showingConsoles"] #outerFrameContainer,
#page[data-recordingbar="show"][data-width="showingConsoles"] #functionFactoryOverlay,
#page[data-recordingbar="show"][data-width="showingConsoles"] #previewCodeHeader {
   width: 777px;
}

#page[data-recordingbar="show"][data-width="showingConsoles"] #previewPageOptionsButton {
   right: 120px;
}

#recordingBar,
#currentPageSelectorWindow,
#dimensionReminderWindow,
#recordingCloneContainer {
   height: 167px;
   position: fixed;
   left: 0px;
   bottom: 0px;
   border: 4px solid rgb(0, 0, 0);
   width: 100%;
   z-index: 111;
   background: rgb(58, 49, 59);
   color: lightgray;
}

#page #recordingCloneContainer {
   bottom: 167px;
   background: rgb(20, 20, 20);
   z-index: 33333;
   border: 1px solid rgba(173, 216, 230, 0.41);
   display: none;
   height: 172px;
}

.oneClonedRecordingDiv {
   width: 30%;
   border: 1px solid rgba(56, 55, 57, 0.52);
   background: black;
   display: inline-block;
   height: 44px;
   overflow: hidden;
   position: relative;
}

.oneClonedRecordingDiv.not_currently_used {
   opacity: 0.2;
}

.recordingScaleCloneInputLocation {
   width: 107px;
   display: inline-block;
   vertical-align: top;
   background: rgba(2, 2, 70, 0.44);
   line-height: 24px;
   padding-left: 5px;
   margin: 6px;
}

.numbersToReminderPopupStatus {
   position: absolute;
   right: 5px;
   background: rgb(10, 37, 3);
   bottom: 30px;
   padding: 5px;
   opacity: 0.3;
   cursor: pointer;
}

.switchRecordingBarAndContent {
   background: rgb(39, 39, 45);
   position: absolute;
   right: 10px;
   cursor: pointer;
   bottom: 56px;
}

.numbersToReminderPopupStatus[data-state="off"] {
   background: rgb(29, 3, 3);
}

.scaleCloneTitle {
   display: inline-block;
   height: 23px;
   line-height: 21px;
   margin-right: 10px;
}

#page .recordingScaleCloneInputLocation input {
   background: rgba(78, 35, 106, 0.72);
   color: lightgray;
   width: 51px;
   border: none;
   height: 22px;
   line-height: 22px;
   vertical-align: top;
}

.oneClonedRecordingDiv input {
   width: 47px;
   display: inline-block;
   height: 35px;
   vertical-align: top;
   background: rgb(17, 17, 17);
   color: white;
   border: none;
   text-align: center;
   margin-top: 0px;
   padding: 0px;
   line-height: 2px;
}

.recordingClonedMeta {
   position: absolute;
   right: 0px;
   background: maroon;
   display: none;
}

.oneClonedTitle,
.clonedCoordinates,
.clonedArrows {
   display: inline-block;
   margin-left: 4px;
   width: 35px;
   overflow: hidden;
   height: 36px;
   line-height: 40px;
   text-align: center;
   margin-top: 3px;
}

#page .oneClonedRecordingDiv[data-status="off"] .oneClonedTitle {
   border: 2px solid black;
}

#page[data-recordingboxes="off"] #recordingCloneContainer .oneClonedTitle {
   border: 2px solid rgb(65, 2, 21);
}

.oneClonedTitle {
   position: relative;
   padding-right: 10px;
}

.thisCloneKeyboardShortcut {
   position: absolute;
   right: -2px;
   top: 0px;
   color: rgba(234, 240, 243, 0.84);
   height: 15px;
   width: 15px;
   overflow: hidden;
   line-height: 15px;
   font-size: 9px;
   z-index: 313;
   background: rgba(0, 0, 139, 0.41);
}

.oneClonedTitle[data-meta="gifTitle"] {
   background: black;
   color: rgb(173, 216, 230);
}

.oneClonedTitle[data-meta="helpTextOne"] {
   background: black;
   color: rgb(149, 163, 214);
}

.oneClonedTitle[data-meta="kbShortcut"] {
   background: rgb(5, 11, 49);
   color: rgb(173, 216, 230);
}

.oneClonedTitle[data-meta="helpTextTwo"] {
   background: rgb(26, 21, 21);
   color: rgb(148, 187, 222);
}

.oneClonedTitle[data-meta="helpTextThree"] {
   background: rgb(34, 53, 71);
   color: rgb(148, 187, 222);
}

.oneClonedTitle[data-meta="helpTextFour"] {
   background: rgb(52, 84, 130);
   color: white;
}

.clonedArrows {
   width: 70px;
}

.clonedArrows .recordingArrowsContainer {
   margin: 0px;
}

.oneClonedTitle {
   width: 77px;
   cursor: pointer;
   border: 2px solid rgba(164, 131, 195, 0.68);
   padding-bottom: 3px;
   line-height: 33px;
}

.oneClonedTitle[data-meta="helpTextFive"] {
   background: rgb(52, 57, 127);
   color: rgb(202, 206, 221);
}

.oneClonedTitle[data-meta="helpTextSix"] {
   background: rgb(56, 46, 76);
   color: white;
}

.clonedCoordinates {
   width: unset;
}

#currentPageSelectorWindow,
#dimensionReminderWindow {
   background: rgb(27, 27, 39);
   z-index: 112;
   bottom: unset;
   height: unset;
   width: 268px;
   left: 30px;
   display: none;
}

#dimensionReminderWindow {
   left: 400px;
   padding: 42px 15px 15px;
   font-size: 19px;
   width: unset;
   line-height: 35px;
   background: rgb(33, 40, 60);
   top: 693px;
   z-index: 333333333;
}

.dimensionReminderTitle {
   background: black;
   position: absolute;
   top: 0px;
   right: 0px;
   font-size: 17px;
}

.oneDimensionReminderLine {
   border: 1px solid rgba(128, 128, 128, 0.42);
   margin-bottom: 5px;
}

.onePageSelectorWindowLine {
   background: rgb(50, 58, 88);
   margin-bottom: 16px;
}

.onePageSelectorWindowLine.buttonsRow {
   background: none;
   text-align: center;
}

.currentPageSelectorWindowTitle {
   background: black;
   position: relative;
   text-align: center;
   margin-bottom: 12px;
}

.currentPageSelectorWindowTitle i {
   position: absolute;
   cursor: pointer;
   top: 0px;
   right: 0px;
}

.onePageSelectorWindowTitle {
   display: inline-block;
   width: 130px;
   margin-right: 15px;
   text-align: center;
}

.onePageSelectorWindowButton {
   display: inline-block;
   border: 1px solid black;
   background: rgb(79, 53, 88);
   cursor: pointer;
   width: 34px;
   text-align: center;
   opacity: 0.4;
}

.onePageSelectorWindowButton.active {
   opacity: 1;
}

.retrievePageSelectorButton {
   background: rgb(4, 35, 34);
   display: inline-block;
   cursor: pointer;
   padding: 4px;
   border: 2px solid rgb(0, 0, 0);
}

#gifRecordingTitle,
#gifRecordingHelpText,
#gifRecordingKBShortcut,
#gifTasks,
.gifRecordingMirrors {
   position: fixed;
   top: 200px;
   left: 25px;
   z-index: 333;
   background: black;
   padding: 12px;
   display: none;
   border: none;
   height: 50px;
   font-size: 20px;
   color: lightblue;
   width: unset;
   transition: all 0.2s ease 0s;
}

.gifRecordingMirrors {
   min-width: 80px;
   min-height: 30px;
   display: block;
   background: rgb(59, 19, 65);
   color: rgb(200, 202, 74);
   left: 500px;
   border: 1px solid yellow;
}

#gifRecordingKBShortcut_mirror {
   background: rgb(50, 66, 96);
}

#gifRecordingTitle {
   top: 64px;
   left: 28px;
   z-index: 2255;
}

#gifRecordingTitle,
#gifRecordingTitle_mirror {
   background: black;
   top: 65px;
   border: 1px solid rgba(173, 216, 230, 0.27);
}

#gifRecordingTitle_mirror {
   left: -330px;
   top: 1400px;
}

#gifTasks {
   top: 600px;
   left: 20px;
}

#gifRecordingHelpText {
   top: 146px;
   background: rgb(1, 1, 1);
   left: 30px;
   z-index: 2255;
}

#gifRecordingHelpText_mirror {
   top: 150px;
   border: 1px solid yellow;
   background: darkblue;
}

#gifRecordingHelpText,
#gifRecordingHelpText_mirror {
   top: 200px;
   color: rgb(149, 163, 214);
   border: 1px solid rgba(149, 163, 214, 0.45);
}

#gifRecordingHelpText_mirror {
   top: 1461px;
   left: -550px;
}

#gifRecordingKBShortcut {
   background: rgb(5, 11, 49);
   z-index: 3100;
}

#gifRecordingKBShortcut,
#gifRecordingKBShortcut_mirror {
   top: 703px;
   left: 50px;
}

#gifRecordingKBShortcut_mirror {
   left: 400px;
   top: 1856px;
}

.recordingBarNumericInput {
   display: inline-block;
}

#toggleRecordingOverlayButtons,
#recordingToggleSSConsoleButton,
#loadGifPartsButton,
.newRecordingBarButton,
#gifBarOpacitySwap,
.toggleOutlineClass,
#saveRecordingContentAlt,
#completeCoverToggle,
#saveRecordingContentAltTwo,
#inputBoxesTempClone {
   display: inline-block;
   background: rgb(12, 18, 54);
   padding: 0px 4px;
   margin: 0px 5px;
   vertical-align: top;
   cursor: pointer;
   height: 36px;
   line-height: 36px;
   border: 2px solid rgb(0, 0, 0);
   border-radius: 3px;
   overflow: hidden;
}

#completeCoverToggle {
   background: rgb(55, 55, 79);
}

#inputBoxesTempClone {
   background: rgb(29, 42, 74);
}

#resetGifTextChanges {
   display: none;
}

#toggleRecordingBoxesMenuButton,
#toggleRecordingBoxesMenuButtonTwo {
   background: rgb(8, 46, 25);
}

#toggleRecordingBoxesMenuButton[data-state="off"],
#toggleRecordingBoxesMenuButtonTwo[data-state="off"] {
   background: rgb(46, 27, 33);
}

#page #gifBarOpacitySwap {
   width: 405px;
   cursor: default;
   padding-top: 4px;
   display: none;
}

#showUserSettingsAltLocThree,
#toggleRecordingBoxesMenuButtonTwo,
#saveRecordingContentAltTwo,
#recordingContentCopyButtons .recordingLocationMenuButton,
#inputBoxesTempCloneTwo {
   font-size: 12px;
   height: 25px;
   line-height: 25px;
   display: inline-block;
}

#showUserSettingsAltLocThree {
   background: rgb(33, 3, 42);
   color: rgb(211, 203, 213);
   padding: 0px 9px;
   font-size: 15px;
   border: 1px solid black;
   cursor: pointer;
}

#inputBoxesTempCloneTwo {
   background: rgb(4, 4, 49);
   border: 2px solid black;
}

.gifBarOpacityButton,
.gifBarOpacityWord {
   display: inline-block;
   height: 25px;
   line-height: 25px;
   vertical-align: top;
}

.gifBarOpacityButton {
   background: black;
   margin-left: 8px;
   cursor: pointer;
   width: 70px;
   text-align: center;
}

.gifBarOpacityButton.swap {
   width: 152px;
}

.gifBarOpacityButton[data-status="partial"] {
   background: rgb(43, 28, 46);
}

.gifBarOpacityButton[data-status="full"] {
   background: rgb(6, 52, 40);
}

.gifBarOpacityWord.partial {
   display: none;
}

.gifBarOpacityButton[data-status="partial"] .gifBarOpacityWord.full {
   display: none;
}

.gifBarOpacityButton[data-status="partial"] .gifBarOpacityWord.partial {
   display: inline-block;
}

#toggleRecordingOverlayButtons {
   display: none;
}

.recordingBarUserSettings {
   background: rgb(17, 65, 65);
}

.dimensionReminders {
   background: rgb(66, 70, 131);
}

.dimensionReminders.cloneToggle {
   background: rgb(67, 19, 73);
}

#toggleGifCuratorBarButton,
#moduleCheckboxView {
   background: rgb(88, 60, 91);
}

#page .getCurrentPageSelectorButton {
   background: rgb(43, 43, 70);
}

#page .recordingLocationMenuButton {
   background: rgb(12, 40, 78);
}

.gifCurrentlyLoaded,
.gifCurrentlyLoadedNumber {
   display: inline-block;
   background: black;
   vertical-align: top;
   height: 36px;
   line-height: 36px;
   padding: 0px 5px;
}

.glossaryOptionTitle {
   display: inline-block;
   margin-right: 9px;
   background: rgb(12, 23, 61);
   color: lightblue;
   opacity: 0.8;
}

.featureSummaryDisplayStatus[data-type="videos"] .glossaryOptionTitle {}

.showCombinedVideos,
.glossaryPageHideHelpButtons {
   display: none;
   opacity: 0.6;
   cursor: pointer;
   margin-right: 30px;
}

.glossaryPageHideHelpButtons:hover {
   opacity: 0.8;
}

.showCombinedVideos {
   margin-right: 0px;
}

#page[data-showcombinedvideos="no"] .showCombinedVideos .buttonsAreOff {
   display: none;
}

#page[data-showcombinedvideos="yes"] .showCombinedVideos .buttonsAreOn {
   display: none;
}

.glossaryElementDisplayActualStatus {
   display: inline-block;
}

.changeRecordedItemContainer {
   color: lightblue;
   display: inline-block;
   height: 35px;
   vertical-align: top;
   line-height: 35px;
   padding: 0px 5px;
}

#recordingMenuContentSelectCopyTwo {
   background: rgb(86, 25, 86);
   font-size: 13px;
   color: lightblue;
   border: 1px solid black;
}

#recordingMenuContentSelectCopy {
   height: 30px;
   border-radius: 3%;
   color: rgb(204, 190, 217);
   background: rgb(41, 15, 70);
   border: 2px solid black !important;
   outline: none !important;
}

.gifCurrentlyLoadedNumber {
   background: rgb(4, 35, 49);
}

.gifCurrentlyLoadedText {
   display: inline-block;
}

#page .newRecordingBarButton.oneSectionToggle {
   width: 80px;
   text-align: center;
}

#page .theCloneToggleButton {
   background: rgb(29, 26, 26);
}

#page .recordingListenersButton {
   display: none;
}

#page .recordingListenersButton[data-state="listeners_on"] {
   background: rgb(23, 69, 23);
}

#page .recordingListenersButton[data-state="listeners_on"] .listenersOffDisplay {
   display: none;
}

#page .recordingListenersButton[data-state="listeners_off"] {
   background: rgb(53, 10, 10);
}

#page .recordingListenersButton[data-state="listeners_off"] .listenersOnDisplay {
   display: none;
}

#saveGifTextChanges {
   background: rgb(11, 47, 67);
   display: none;
}

#saveGifTextChanges[data-modified="modified"] {
   border: 1px solid red;
   background: rgb(22, 11, 2);
}

#loadGifPartsButton {
   border-radius: 0px;
   background: rgb(8, 54, 57);
}

#recordingBarTitle,
#recordingCloneTitle {
   position: absolute;
   background: black;
   right: 0px;
   padding: 4px;
   color: lightgray;
   cursor: pointer;
}

#recordingCloneTitle {
   top: unset;
   bottom: 0px;
   right: 0px;
   background: rgb(30, 30, 31);
   font-size: 8px;
   opacity: 0.3;
}

.recordingBarLineOne {}

.recordingBarLineTwo {
   background: rgb(68, 72, 101);
   margin-top: 8px;
   white-space: nowrap;
}

.recordingBarLineThree {
   background: rgb(28, 35, 60);
   padding-top: 7px;
   padding-left: 15px;
}

#recordingToggleSSConsoleButton {
   background: rgb(65, 34, 102);
}

#recordingBarNumeric {
   background: black;
   color: lightgray;
   width: 58px;
   border: 1px solid rgb(54, 57, 57);
   height: 36px;
   vertical-align: top;
}

#recordingButtonContainer {
   display: inline-block;
   border: 3px solid black;
   background: dimgray;
   vertical-align: top;
   height: 36px;
   line-height: 25px;
   cursor: pointer;
   border-radius: 10%;
   padding: 3px;
}

.recordingCircleOuter {
   display: inline-block;
   background: dimgray;
   height: 28px;
   width: 28px;
   vertical-align: top;
   border-radius: 50%;
   border: 1px solid red;
   position: relative;
   text-align: center;
   bottom: 3px;
}

.recordingCircleInner {
   background: red;
   height: 22px;
   width: 22px;
   border-radius: 50%;
   position: absolute;
   left: 2px;
   top: 2px;
}

#recordingButtonContainer[data-status="active"] {
   background: black;
}

#recordingButtonContainer[data-status="active"] .recordingCircleOuter {
   background: rgb(27, 27, 27);
}

#recordingButtonContainer[data-status="inactive"] .recordingCircleInner {
   background: black;
   opacity: 0.6;
}

#recordingButtonContainer[data-status="inactive"] .recordingCircleOuter {
   border-color: rgba(0, 0, 0, 0.57);
}

#recordingButtonContainer[data-status="inactive"] {}

#page[data-width="showingConsoles"] #codeCreate #functionFactoryOverlay {
   width: 100%;
}

.toggleFunctionDetails {
   position: absolute;
   padding: 8px;
   background: darkblue;
   right: 8px;
   cursor: pointer;
}

#page[data-width="showingConsoles"] #userReports {
   width: 58%;
}

.dropdownOpenDisplay,
.pickerBypassDisplay,
.showSelects,
.showNewDropdowns,
.extraVarBox,
#transparentDropdownOverlayStatus {
   position: fixed;
   z-index: 20000;
   background: rgb(82, 46, 11);
   padding: 3px 35px 3px 3px;
   left: 10px;
   bottom: 30px;
   color: lightgray;
   cursor: default;
   opacity: 0.7;
}

#transparentDropdownOverlayStatus {
   bottom: 33px;
   padding: 4px 25px 4px 4px;
   left: unset;
   right: 0px;
   width: 179px;
   height: 30px;
   overflow: hidden;
   display: none;
}

.transparentDropdownOverlay[data-status="hide_inactive"] {
   display: none;
}

.transparentDropdownOverlay[data-status="partial"] {
   background: rgba(186, 92, 17, 0.82) !important;
   opacity: 0.4 !important;
   width: 100% !important;
}

#transparentDropdownOverlayStatus[data-status="show"] {
   background: rgb(7, 77, 7);
}

#transparentDropdownOverlayStatus[data-status="hideAndActive"] {
   background: darkslateblue;
}

#transparentDropdownOverlayStatus[data-status="hide_inactive"] {
   background: maroon;
}

.extraVarBox {
   width: 317px;
   height: 118px;
   background: rgb(16, 62, 146);
   opacity: 1;
   bottom: 151px;
   font-size: 16px;
}

.showSelects,
.showNewDropdowns {
   bottom: 150px;
   background: rgb(10, 59, 8);
   opacity: 1;
   cursor: pointer;
   padding: 6px 36px 6px 6px;
}

.showNewDropdowns {
   bottom: 58px;
}

.showSelects[data-status="hide"],
.showNewDropdowns[data-status="hide"] {
   background: rgb(51, 9, 9);
}

.pickerBypassDisplay {
   bottom: 280px;
}

.dropdownOpenDisplay[data-open="true"] {
   background: rgb(9, 93, 46);
}

.pickerBypassDisplay[data-bypassactive="true"] {
   background: rgb(9, 93, 46);
}

.activeSelectOption {
   vertical-align: top;
   cursor: not-allowed;
   max-width: calc(100% - 10px);
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
}

.cc_select .caretDown,
.cc_select .activeSelectOption {
   display: inline-block;
   height: 28px;
   line-height: 28px;
   cursor: default;
}

.cc_select[data-var="vuePlaybackSpeed"] .activeSelectOption,
.cc_select[data-var="vuePlaybackSpeed"] .caretDown {
   line-height: 20px;
}

.entireColorListFormat .activeSelectOption {
   height: 22px;
   line-height: 22px;
}

#page .oneLayoutOption.cc_select .caretDown,
#page .oneLayoutOption.cc_select .activeSelectOption {
   height: 26px;
   line-height: 26px;
}

#page .textSelectLine[data-meta="gutterDisplay"] .activeSelectOption {
   width: 80px;
}

#page .cc_select[data-var="basicExtraFormat"] .activeSelectOption {
   line-height: 25px;
}

.cc_select .caretDown {
   position: absolute;
   right: 5px;
}

.inactiveSelectOptions[data-var="currentLanguageDefault"] .inactiveSelectOption {
   text-transform: capitalize;
}

.inactiveSelectOptions .inactiveSelectOption[data-leavecaps="true"] {
   text-transform: unset;
}

.highlightSmallSelect {
   right: 0px;
   width: 5px !important;
   min-width: 5px !important;
   height: 5px !important;
   border: 2px solid red !important;
   padding: 0px !important;
   background: black !important;
   position: absolute !important;
}

#page[data-recordingbar="show"] .highlightSmallSelect {
   display: none;
}

#page[data-recordingbar="show"] .moreLayoutAdminInfo,
#page[data-recordingbar="show"] #showEditorProportions,
#page[data-recordingbar="show"] .presetStatusContainer,
#page[data-recordingbar="show"] .layoutEditorTitle {
   display: none;
}

.transparentDropdownOverlay.highlightSmallSelect {
   opacity: 0;
   width: 100%;
}

.cc_select.highlightSmallSelect {
   overflow: hidden;
   border: 2px solid rgb(242, 220, 49) !important;
}

.cc_select[data-var="userTimezone"],
.inactiveSelectOptions[data-var="userTimezone"] {
   min-width: 65px;
   width: 300px;
}

.extraRectangle,
.measuringRectangle {
   display: none;
}

#resizeCoverContainer {
   display: none;
}

.extraRectangle,
.measuringRectangle,
#extraDropdownRectangle {
   background: rgb(35, 35, 105);
   position: fixed;
   height: 140px;
   width: 100px;
   z-index: 33333;
   padding: 18px;
   top: 0px;
   color: lightgray;
}

#extraDropdownRectangle {
   background: rgb(76, 122, 135);
   top: 500px;
   width: 240px;
   height: 240px;
   overflow: hidden;
   opacity: 0.75;
}

#selectSessionnewSelect [data-meta="templates"] {
   display: none;
}

.cc_settings_logout_button .fa-user-slash {
   position: relative;
   top: 3px;
}

.toggleSSMenu {
   background: rgb(35, 59, 114);
   width: 159px;
   height: 40px;
   position: absolute;
   cursor: pointer;
   padding: 10px;
   top: 271px;
   left: -142px;
   opacity: 0.6;
   transition: opacity 0.4s ease 0s;
}

.toggleSSMenu:hover {
   opacity: 1;
}

.previewFullLogo {
   display: inline-block;
   /* border: 1px solid yellow; */
}

#previewPageOptionsButton[data-usingsession="true"] .previewFullLogo {
   display: none;
}

.previewPartialLogo {
   display: none;
}

.customPreviewPartialLogo {
   display: none;
}


#previewPageOptionsButton[data-fullcustom="true"],
#previewPageOptionsButton[data-partialcustom="true"] {
   /* border: 2px solid green; */
}

#previewPageOptionsButton[data-fullcustom="false"],
#previewPageOptionsButton[data-partialcustom="false"] {
   /*border: 2px solid red;*/
}


.previewSessionName,
#previewPageOptionsButton[data-fullcustom="true"] .previewFullLogo,
#previewPageOptionsButton[data-fullcustom="false"] .customPreviewFullLogo {
   display: none;
}

#previewPageOptionsButton[data-usingsession="true"] .previewSessionName {
   display: inline-block;
}


#previewCodeClones .previewPartialLogo {
   display: inline-block;
   font-family: "Lobster Two", cursive;
   font-size: 18px;
}

#previewOutlineModified {
   position: absolute;
   background: rgb(2, 35, 2);
   right: 300px;
   color: lightblue;
   cursor: pointer;
   padding: 0px 10px;
   width: 200px;
   display: none;
}

#previewOutlineModified[data-state="modified"] {
   background: rgb(32, 4, 4);
}

#previewPage .previewPageFork {
   width: 77px;
   background: rgb(44, 42, 70);
   position: relative;
   display: inline-block;
   vertical-align: top;
   left: unset;
   right: unset;
   margin-top: 3px;
}

#previewCodeHeaderCover {
   background: rgb(0, 0, 0);
   border: 1px solid rgba(176, 177, 176, 0);
   position: absolute;
   left: 33px;
   height: 35px;
   width: calc(100% - 209px);
   z-index: 4;
   opacity: 1;
   color: rgba(255, 255, 255, 0);
   display: none;
}

.previewCodeButtonsRow {
   display: inline-block;
   position: relative;
   max-width: calc(100% - 182px);
   height: 35px;
   overflow: hidden;
   padding: 0px;
}

.previewCodeButtonToggles {
   display: inline-block;
   width: unset;
   overflow: hidden;
   padding-right: 12px;
   white-space: break-spaces;
}

.previewPageOptionsButton.fromArr {}

a.previewPageOptionsButton i {
   font-size: 14px;
   height: 14px;
   line-height: 10px;
   vertical-align: top;
   padding-top: 7px;
   color: lightgray;
}

#page .previewCodeHeaderTiny {
   left: 0px;
   width: 30px;
   background: blue;
   border: 2px solid green;
   overflow: hidden;
}

@media only screen and (min-width: 1200px) {
   #previewCodeHeaderCover {
      display: none !important;
   }
}

.previewPageVarBox {
   position: absolute;
   top: 551px;
   z-index: 50;
   background: rgb(17, 36, 83);
   padding: 15px;
   color: white;
   left: 40px;
   width: 300px;
   display: none;
}

.varBox2[data-optionsbarstatus="active"] {
   background: rgb(7, 62, 7);
}

body .varBox2 {
   top: 391px;
   cursor: pointer;
}

body .varBox3 {
   top: 191px;
   cursor: pointer;
   background: rgb(2, 37, 42);
}

.smallJSToggle {
   background: green;
   display: none !important;
}

#quickActiveDisplay {
   position: fixed;
   top: 28px;
   background: rgb(63, 7, 7);
   padding: 7px;
   z-index: 5000;
   color: white;
   left: 902px;
}

#quickActiveDisplay[data-quickactive="stringTrue"] {
   background: rgb(7, 85, 42);
}

.searchMessageAreaOld {
   background: rgb(25, 24, 76);
   padding: 12px 12px 12px 40px;
   color: white;
   min-height: 30px;
   font-size: 30px;
   display: none;
}

.smallTopMenuButtons {
   display: inline-block;
   position: relative;
   vertical-align: top;
}

.topMenuButtonsContainer {
   max-width: 74%;
   display: inline-block;
   height: 43px;
   overflow: hidden;
   padding-right: 34px;
   position: relative;
   vertical-align: top;
}

#cc_top_bar.condensedView .topMenuButtonsContainer {
   white-space: normal;
   height: 31px;
   max-width: 85%;
}

.controlCleanSearchWindow {
   position: absolute;
   bottom: 0px;
   left: 30px;
}

.siteAdminCommon {
   position: absolute;
   bottom: 80px;
}

.tinyCover,
.compileCover {
   position: absolute;
   top: 0px;
   left: 0px;
   width: 100%;
   height: 100%;
   z-index: 100;
   background: black;
   display: none;
   padding: 9px;
}

.userReportingCover {
   position: absolute;
   top: 0px;
   left: 0px;
   width: 100%;
   height: 100%;
   z-index: 100;
   background: black;
   text-align: center;
   padding: 9px;
   opacity: 0.9;
   display: none;
}

.badgesSaveButton,
.getUserVotesRemaining,
.replenishVotes {
   background: rgb(8, 16, 60);
   display: inline-block;
   padding: 8px;
   margin-top: 6px;
   border: 1px solid dimgray;
   cursor: pointer;
   transition: all 0.3s ease 0s;
   margin-left: 7%;
   position: relative;
}

.getUserVotesRemaining,
.replenishVotes {
   padding: 5px;
   margin-left: 50px;
   display: none;
}

.getUserVotesRemaining {
   background: rgb(43, 10, 56);
}

.replenishVotes {
   background: rgb(8, 55, 59);
}

.badgesSaveButton[data-badgesmodified="clean"] {
   background: rgb(49, 80, 87);
   opacity: 0.7;
}

.badgesSaveTwo {
   position: absolute;
   overflow: hidden;
   font-size: 10px;
   padding: 4px;
   line-height: 15px;
   top: 0px;
   left: unset;
   right: 0px;
}

#userReports[data-debugstatus="clean"] .badgesSaveButton,
#userReports[data-debugstatus="clean"] .getUserVotesRemaining,
#userReports[data-debugstatus="clean"] .replenishVotes,
#userReports[data-debugstatus="clean"] .reportsInformationSectionLabel,
#userReports[data-debugstatus="clean"] .userReportsInnerLabel,
#userReports[data-debugstatus="clean"] .verifiedOrAllDiv,
#userReports[data-debugstatus="clean"] .pageOrUserDiv {
   display: none;
}

#userReports[data-adminstatus="admin"] .badgesSaveTwo {
   display: block;
   right: 240px;
}

.commonCoverClass {
   background: rgb(5, 5, 5);
   color: rgb(147, 180, 208);
   padding: 0px;
   cursor: default;
   overflow: hidden;
}

.commonCoverClass,
#page .smallCoverLogo,
.commonCoverClass[data-type="functionFactoryPreviewPage"] .tinyCoverInnerText {
   color: rgb(152, 172, 219);
}

#entire_item_creation[data-widthsub700="true"] .tinyCover {
                        display: block;
                     }

.commonCoverClass[data-type="functionFactoryPreviewPage"] .ffCoverCloseButton,
.commonCoverClass .plotPointDialogClose,
.commonCoverClass[data-type="chainSettings_inner"] .close_this_dialog,
.commonCoverClass[data-type="previewPageSessions"] .close_this_dialog {
   color: rgb(127, 127, 127);
}

.commonCoverClass[data-type="pointPlotting"] .plotPointDialogClose {
   position: absolute;
   right: 5px;
   top: 6px;
}

.tinyCover[data-type="shortcuts"] {}

.commonCoverClass[data-type="previewPageSessions"] {
   border: 1px solid rgb(58, 58, 58);
}

.function_within_shortcuts_cover {
   background: rgb(6, 5, 27);
   display: none;
   z-index: 50;
   top: 0px;
   left: 0px;
   width: 100%;
   height: 100%;
   position: absolute;
   overflow: hidden;
}

.coverCSSRuleDisplay {
   border: 2px solid magenta;
   color: orange;
   padding: 8px;
   font-size: 15px;
   background: rgb(18, 18, 18);
}

#functionFactoryPageInner[data-jqshowtogglestate="yes"] {
   border: 4px solid magenta;
}

#functionFactoryPageInner[data-jqshowtogglestate="yes"] .inputBeforeLabelArea {
   display: none;
}

#functionFactoryPageInner[data-jqshowtogglestate="yes"] .inputBeforeLabelArea[data-hastoggle="yes"] {
   display: block;
}

#closeFunctionFactoryOverlay {
   position: absolute;
   top: 12px;
   right: 7px;
   cursor: pointer;
   z-index: 110;
   color: rgb(136, 138, 141);
}

#codeCreate #closeFunctionFactoryOverlay {
   right: 40px;
}

#functionFactoryOverlay[data-ffsettings="shown"] #closeFunctionFactoryOverlay {
   display: none;
}

.commonCoverClass[data-type="previewWindowMeasurement"] {
   overflow: hidden;
}

.commonCoverClass[data-type="previewWindowMeasurement"] .tinyCoverTitle,
.commonCoverClass[data-type="colorPicker"] .tinyCoverTitle,
.commonCoverClass[data-type="autoSwitchDialog"] .tinyCoverTitle,
.commonCoverClass[data-type="optionsWindow"] .tinyCoverTitle,
.commonCoverClass[data-type="compile"] .tinyCoverTitle,
.commonCoverClass[data-type="layoutOverlay"] .tinyCoverTitle {
   display: none;
}

.commonCoverClass[data-type="autoSwitchDialog"] {
   border-bottom: 1px solid rgb(33, 32, 32);
}

.windowMeasurementTooSmall {
   position: absolute;
   z-index: 3;
   top: 24px;
   height: calc(100% - 24px);
   border-top: 1px solid dimgray;
   display: none;
}

#optionsWindow .tinyCoverInnerText {
   padding: 4px;
   text-align: center;
}

#twoMainContainers .tinyCoverInnerText {
   padding: 6px;
}

.tinyCoverTitle {
   background: rgb(6, 16, 38);
   position: relative;
   width: 100%;
   left: 0px;
   text-align: center;
   top: 0px;
   color: rgb(164, 190, 196);
   border-bottom: 1px solid rgb(14, 14, 14);
   height: 25px;
   line-height: 25px;
   overflow: hidden;
}


#toolOverlay .tinyCover .fa-window-close {
   position: absolute;
   top: 0;
   right: 0;
}

#selectorTool .tinyCoverTitle,
#selectorTool .tinyCover .fa-window-close {
   display: none;
}

.tinyCover[data-type="recordingReminderMenu"] i,
.tinyCover[data-type="parseReminderMenu"] i {
   position: absolute;
   top: 4px;
   right: 8px;
   cursor: pointer;
   font-size: 11px;
}

.commonCoverClass[data-type="divider_admin_overlay"] i {
   position: absolute;
   top: 0px;
   right: 8px;
   cursor: pointer;
}

.commonCoverClass[data-type="languageSelection"]>.tinyCoverTitle {
   display: none;
}

.tinyCoverInnerText {
   padding: 15px;
   line-height: 23px;
}

.commonCoverClass[data-type="languageSelection"] .tinyCoverInnerText {
   font-size: 14px;
}

.commonCoverClass[data-type="colorPicker"] .tinyCoverInnerText {
   padding: 2px;
   font-size: 11px;
}

.commonCoverClass[data-type="functionFactoryPreviewPage"] .tinyCoverInnerText {
   line-height: 33px;
}

#layoutOverlay .tinyCoverInnerText,
#templatesAndSessions .tinyCoverInnerText {
   padding: 0px;
}

#customizeCover>.tinyCoverTitle {
   display: none;
}

.adminsNoCloseButton {
   position: absolute;
   opacity: 0.4;
}

.tinyCoverTitleInfo {
   border: 1px solid rgb(158, 158, 128);
   display: inline-block;
   margin-left: 20px;
   opacity: 0.4;
   position: absolute;
   left: 0px;
   white-space: nowrap;
}

.tinyCoverTitleInfo.current {
   left: unset;
}

.currentTinyTitleInfo {
   display: inline-block;
}

.createItemsActiveAbbreviated {
   display: none;
}

#entire_item_creation[data-width="medium"] .createItemsActiveAbbreviated,
#entire_item_creation[data-width="small"] .createItemsActiveAbbreviated,
#entire_item_creation[data-width="tiny"] .createItemsActiveAbbreviated,
#entire_item_creation[data-width="veryTiny"] .createItemsActiveAbbreviated {
   display: inline-block;
}

#entire_item_creation[data-width="medium"] .createItemsActiveFull,
#entire_item_creation[data-width="small"] .createItemsActiveFull,
#entire_item_creation[data-width="tiny"] .createItemsActiveFull,
#entire_item_creation[data-width="veryTiny"] .createItemsActiveFull {
   display: none;
}

@media only screen and (max-width: 310px) {
   .compileTitle span {
      display: none;
   }

   #compileContainer .tinyCoverInnerText {
      padding: 9px;
   }
}

@media only screen and (max-width: 240px) {
   .currentSessionVanitySetting {
      display: none;
   }
}

#wp-auth-check-wrap #wp-auth-check {
   background-color: rgb(22, 22, 41);
   color: lightgray;
   max-height: 400px !important;
}

#wp-auth-check p {
   padding: 0px 8px;
}

#wp-auth-check .wp-auth-fallback-expired {
   display: block;
   background: black;
   text-align: center;
   margin-bottom: 20px;
   font-weight: 500;
   text-decoration: underline;
   font-size: 17px;
   padding: 0px;
}

#wp-auth-check .wp-auth-fallback-expired p {
   padding: 0px;
}

#wp-auth-check .wp-auth-fallback {
   padding: 0px;
}

#wp-auth-check a {
   color: lightblue;
}

#wp-auth-check-wrap .wp-auth-check-close {
   position: absolute;
   background: none;
   color: rgb(188, 200, 207);
   border: none;
   right: 15px;
}

.sessionsLanguageDisplayContainer {
   position: relative;
   bottom: 5px;
}

.languageSettingsTitle {
   display: inline-block;
   width: 70px;
   vertical-align: top;
   color: lightgray;
   text-align: center;
}

.preferenceLine[data-thekey="beautifyOnPaste"] .languageSettingsTitle {
   width: 130px;
   white-space: nowrap;
}

.preferenceLine[data-thekey="beautifyOnPaste"] .activeAndAccent {
   width: calc(100% - 135px);
}

.languageSettingsTitleAbbreviation {
   display: none;
}

#fixedHelpDisplay {
   position: fixed;
   background: rgb(31, 31, 112);
   padding: 5px;
   bottom: 90px;
   width: 59%;
   z-index: 190;
   color: white;
   cursor: pointer;
}

.fixedHelpDisplay::first-letter {
   text-transform: uppercase;
}

.fixedHelpDisplayClose {
   position: absolute;
   top: 6px;
   right: 16px;
}

.fixedHelpDisplayText {
   width: calc(100% - 20px);
}

.toggleSectionSizeDisplay {
   position: fixed;
   z-index: 10;
   background: rgb(9, 49, 64);
   padding: 3px;
   color: white;
   bottom: 43px;
}

.adminCondensedPresetsDisplay {
   padding: 6px;
}

.oneCondensedPresetEntry {
   border-bottom: 3px solid white;
   background: navy;
}

.oneCondensedPresetEntry:nth-child(2n+1) {
   background: rgb(58, 83, 100);
   border: 1px solid rgba(68, 68, 68, 0.51);
   color: rgb(200, 212, 223);
}

.condensedPresetsTitle {
   display: inline-block;
}

.condensedPresetsTitle[data-empty="yes"] {
   background: rgb(121, 78, 78);
}

#bottomButtonsContainer {
   width: 80%;
   overflow: hidden;
   height: 24px;
   line-height: 40px;
   display: inline-block;
   vertical-align: top;
}

#previewPage #bottomButtonsContainer {
   height: 41px;
   padding-top: 6px;
   white-space: nowrap;
   width: unset;
   min-width: 700px;
}

#page .width220px {
   width: 220px;
}

#page .width333px {
   width: 333px;
   overflow: hidden;
}

#newAdminButtons {
   display: inline-block;
   vertical-align: top;
   border: 1px solid cyan;
   padding: 0px;
   max-width: calc(100% - 600px);
   overflow: hidden;
   height: 25px;
}

#cc_bottom_bar {
   position: absolute;
   bottom: 0px;
   color: white;
   left: 0px;
   z-index: 555;
   opacity: 1;
   height: 40px;
   overflow: hidden;
   width: 100%;
   padding-left: 8px;
   font-size: 11px;
   background: rgb(1, 3, 12);
   padding-top: 7px;
   white-space: nowrap;
}

#page[data-bottom_bar_up="yes"] #cc_bottom_bar {
   bottom: 193px;
   left: -4px;
   width: 98%;
}

#page[data-bottom_bar_up="yes"] .bottomBarButton[data-number="5"],
#page[data-bottom_bar_up="yes"] .bottomBarButton[data-number="6"] {
   display: none;
}

#recordingBar,
#recordingCloneContainer {
   z-index: 5000;
   background: rgb(47, 39, 47);
   border: 2px solid rgb(114, 14, 30);
   display: none;
   font-size: 12px;
}

#previewPage #recordingBar {
   border: 4px solid magenta;
}

#sessionOwnerDisplay {
   background: rgb(13, 67, 75);
   color: white;
   position: fixed;
   right: 0px;
   bottom: 392px;
   font-size: 13px;
   opacity: 0.8;
   padding: 4px;
}

#page #sessionOwnerDisplay {
   width: unset;
   z-index: 3333333;
   position: fixed;
   right: 0px;
   bottom: 83px;
   background: rgb(45, 46, 45);
   color: white;
   font-size: 9px;
   border: 1px solid rgb(33, 99, 131);
}

#glossaryPage #sessionOwnerDisplay,
#glossaryPage.modulePage #glossarySearchResults {
   display: none;
}

.page-id-20 #page #sessionOwnerDisplay {
   bottom: 3px;
}

#userReports #sessionOwnerDisplay {
   bottom: 5px;
   color: rgb(219, 218, 227);
   font-size: 14px;
   right: 80px;
}

.page-id-1414 #sessionOwnerDisplay {
   opacity: 0.4;
   bottom: 0px !important;
}

.page-id-1577 #sessionOwnerDisplay {
   bottom: 0px !important;
}

.condensedPresetNameContainer {
   border: 1px solid rgb(234, 196, 58);
   vertical-align: top;
   height: 28px;
   line-height: 28px;
   padding-right: 6px;
   display: none;
}

.alternateChangeOrientationButton,
.alternateUserSettingsButton {
   display: inline-block;
   cursor: pointer;
   height: 28px;
   line-height: 28px;
}

.bottomBarButton .alternateChangeOrientationButton {
   line-height: 20px;
}

.condensedNameHash {}

.condensedPresetNumber {}

.condensedPresetName {}

.changeCondensedProportionsTwo {
   display: inline-block;
   margin-left: 8px;
}

.alternateProporitonsButton {
   display: inline-block;
   background: black;
}

.makeSectionOne {
   display: inline-block;
   height: 28px;
   line-height: 28px;
}

.normalMakeSectionOneTitle,
.smallMakeSectionOneTitle {
   display: inline-block;
   vertical-align: top;
}

.smallMakeSectionOneTitle {
   display: none;
}

.alternateProportionsButton {
   display: inline-block;
   cursor: pointer;
   background: rgb(31, 46, 56);
   height: 26px;
   line-height: 28px;
   width: 60px;
   text-align: center;
   color: rgb(223, 221, 221);
   vertical-align: top;
}

.alternateOpenPreview {
   display: inline-block;
   margin-left: 6px;
   color: rgb(136, 136, 156);
   cursor: pointer;
   position: absolute;
   right: 51px;
   top: 5px;
}

.controlTopBarFocus {
   background: rgb(41, 41, 75);
   display: inline-block;
   margin-left: 40px;
}

#backupManagerOverlay {
   background: rgb(57, 57, 65);
   position: fixed;
   z-index: 500000;
   top: 0px;
   left: 0px;
   width: 100%;
   height: 100%;
   color: lightblue;
}

.backupManagerOverlayTitle {
   background: rgb(10, 11, 23);
   position: absolute;
   bottom: 15px;
   right: 15px;
   padding: 8px;
   border: 1px solid rgba(211, 211, 211, 0.36);
   color: lightgray;
   opacity: 0.8;
}

.backupInfoBox {
   background: black;
   padding: 8px;
   margin-bottom: 12px;
}

#backupManagerOverlayInner {
   position: fixed;
   height: 88%;
   width: 57%;
   left: 3%;
   top: 5%;
   background: rgba(4, 5, 33, 0.76);
   border: 2px solid rgb(109, 116, 116);
}

.backupManagerInnerTitle {
   background: black;
   height: 30px;
   line-height: 30px;
   color: lightgray;
   text-align: center;
}

.alternatePresetListDisplay {
   display: inline-block;
   margin-left: 7px;
   color: rgb(136, 136, 156);
   cursor: pointer;
}

#backupManagerOverlayInner {}

.backupManagerButtonsRow {
   border-top: 2px solid rgb(61, 121, 121);
   border-right: 2px solid rgb(61, 121, 121);
   border-left: 2px solid rgb(61, 121, 121);
   border-image: initial;
   padding: 15px 15px 0px;
   text-align: center;
   background: rgb(39, 32, 47);
   border-bottom: none;
   position: relative;
   top: 3px;
}

.backupManagerButton {
   display: inline-block;
   background: rgb(7, 46, 65);
   border: 1px solid rgb(57, 57, 57);
   margin-left: 17px;
   padding: 6px 12px;
   cursor: pointer;
   color: lightgray;
}

.backupManagerButton[data-active="yes"] {
   background: black;
   border-top: 1px solid rgb(46, 102, 102);
   border-right: 1px solid rgb(46, 102, 102);
   border-left: 1px solid rgb(46, 102, 102);
   border-image: initial;
   color: rgb(34, 197, 197);
   border-bottom: none;
}

.backupManagerContainer {
   background: dimgray;
   height: 83%;
   border: 3px solid indigo;
   position: relative;
}

#scratchpadManagerContainer,
#sessionManagerContainer,
#shortcutManagerContainer {
   height: 56%;
   border-right: 3px solid black;
   border-bottom: 3px solid black;
   border-left: 3px solid black;
   border-image: initial;
   margin-bottom: 8px;
   position: relative;
   background: rgb(44, 66, 71);
   overflow-y: auto;
   padding: 12px;
   border-top: none;
}

#page .backupManagerButton[data-type="sessions"],
#sessionManagerContainer {
   background: rgb(4, 4, 44);
}

#page .backupManagerButton[data-type="shortcuts"],
#shortcutManagerContainer {
   background: rgb(33, 41, 58);
}

#page .backupManagerButton[data-type="scratchpad"],
#scratchpadManagerContainer {
   background: rgb(48, 4, 35);
}

.backupManagerOneEntryRow {
   border: 1px solid rgba(255, 255, 255, 0.18);
   background: black;
   height: 40px;
   line-height: 30px;
   margin-bottom: 10px;
}

.backupManagerOneEntryRow:nth-child(2n+1) {
   background: rgb(27, 27, 44);
}

.backupSubKeyName,
.backupSubKeyValue {
   display: inline-block;
   border: 1px solid rgba(255, 255, 255, 0.13);
   min-width: 130px;
}

.alternatePresetSave {
   display: inline-block;
   color: rgb(136, 136, 156);
   margin-left: 5px;
   cursor: pointer;
}

#bothCondensedSections .cc_main_module {
   overflow: hidden;
}

#condensedPageContainer.debugView .cc_main_module {
   border: 4px solid orange;
}

#bothCondensedSections #entire_style_editor,
#bothCondensedSections #entire_item_creation {
   position: relative;
   height: 100%;
}

#condensedSection1 .cc_debug_title,
#condensedSection2 .cc_debug_title {
   z-index: 5000;
}

.condensedSectionContainer {
   background: rgb(0 0 0);
   height: 100%;
   overflow: hidden;
}

#condensedPageContainer.debugView .condensedSectionContainer {
   margin: 10px 18px 18px;
   width: 96%;
   height: 86%;
}

#bothCondensedSections .cc_show_sizes {
   display: none;
}

#bothCondensedSections .windowMeasurements {
   opacity: 0.4;
}

#condensedPage {
   height: 100%;
   background: rgb(87, 91, 97);
   position: relative;
   padding: 0px;
}

#condensedSection1,
#condensedSection2,
#inactiveCondensedContainer {
   height: 50%;
   position: relative;
   background: rgb(13, 13, 61);
   width: 100%;
   overflow: hidden;
}

#bothCondensedSections.portraitMode #condensedSection1[data-proportions="hundredZero"] {
   height: 100%;
}

#bothCondensedSections.portraitMode #condensedSection2[data-proportions="hundredZero"] {
   height: 0px;
}

#bothCondensedSections.portraitMode #condensedSection1[data-proportions="bigSmall"] {
   height: 75%;
}

#bothCondensedSections.portraitMode #condensedSection2[data-proportions="bigSmall"] {
   height: 25%;
}

#bothCondensedSections.portraitMode #condensedSection1[data-proportions="fiftyFifty"] {
   height: 50%;
}

#bothCondensedSections.portraitMode #condensedSection2[data-proportions="fiftyFifty"] {
   height: 50%;
}

#bothCondensedSections.portraitMode #condensedSection1[data-proportions="smallBig"] {
   height: 25%;
}

#bothCondensedSections.portraitMode #condensedSection2[data-proportions="smallBig"] {
   height: 75%;
}

#bothCondensedSections.portraitMode #condensedSection1[data-proportions="zeroHundred"] {
   height: 0px;
}

#bothCondensedSections.portraitMode #condensedSection2[data-proportions="zeroHundred"] {
   height: 100%;
}

#bothCondensedSections.landscapeMode #condensedSection1[data-proportions="hundredZero"] {
   width: 99.7%;
}

#bothCondensedSections.landscapeMode #condensedSection2[data-proportions="hundredZero"] {
   width: 0px;
}

#bothCondensedSections.landscapeMode #condensedSection1[data-proportions="bigSmall"] {
   width: 75%;
}

#bothCondensedSections.landscapeMode #condensedSection2[data-proportions="bigSmall"] {
   width: 25%;
}

#bothCondensedSections.landscapeMode #condensedSection1[data-proportions="fiftyFifty"] {
   width: 50%;
}

#bothCondensedSections.landscapeMode #condensedSection2[data-proportions="fiftyFifty"] {
   width: 50%;
}

#bothCondensedSections.landscapeMode #condensedSection1[data-proportions="smallBig"] {
   width: 25%;
}

#bothCondensedSections.landscapeMode #condensedSection2[data-proportions="smallBig"] {
   width: 75%;
}

#bothCondensedSections.landscapeMode #condensedSection1[data-proportions="zeroHundred"] {
   width: 0px;
}

#bothCondensedSections.landscapeMode #condensedSection2[data-proportions="zeroHundred"] {
   width: 99.6%;
}

#condensedPageContainer.debugView #condensedSection1 {
   border: 3px solid yellow;
}

#condensedPageContainer.debugView #condensedSection1,
#condensedPageContainer.debugView #condensedSection2,
#inactiveCondensedContainer {
   width: 450px;
}

#bothCondensedSections.landscapeMode #condensedSection1,
#bothCondensedSections.landscapeMode #condensedSection2 {
   display: inline-block;
   height: 100%;
   width: 50%;
   margin-left: 0px;
   float: left;
}

#inactiveCondensedContainer,
#inactiveCondensedContents {
   background: rgb(4, 36, 36);
   height: 129px;
   position: absolute;
   top: 283px;
   left: 458px;
   width: 418px;
   display: none;
   z-index: 40000;
   color: lightgray;
}

#inactiveCondensedContents {
   display: block;
}

.oneExampleModule {
   border: 1px solid rgb(68, 98, 98);
   background: rgb(97, 103, 94);
   margin: 2px;
   padding: 3px;
   display: inline-block;
   color: white !important;
}

#condensedSection1 {}

#condensedSection2 {
   background: rgb(41, 57, 84);
}

#condensedPageContainer {
   background: blue;
   overflow: hidden;
   z-index: 100;
   position: fixed;
   height: 93%;
   width: 100%;
   left: 0px;
   top: 50px;
   display: none;
}

#condensedPageContainer .cc_debug_title {
   display: none;
}

#condensedPageContainer.debugView .cc_debug_title {
   display: block;
}

#condensedPageContainer.consoleShown {
   width: 60%;
}

#condensedPageInner,
#condensedPageInfo {
   width: 100%;
   height: 100%;
   position: absolute;
   /* background: rgb(31, 71, 112); */
}

#condensedPageInfo {
   left: 467px;
   width: 370px;
   background: rgb(39, 34, 70);
   top: 426px;
   max-height: 509px;
   overflow: auto;
   color: lightgray;
   border: 2px solid green;
   z-index: 3333333;
   display: none;
}

#condensedPageContainer.consoleShown #condensedPageInfo {
   width: 441px;
}

#condensedPageInfo,
#inactiveCondensedContents {
   display: none;
}

#condensedPageContainer.debugView #condensedPageInfo,
#condensedPageContainer.debugView #inactiveCondensedContents {
   display: block;
}

#condensedLayoutSelectionContainer {
   position: absolute;
   background: rgba(38, 40, 64, 0.75);
   top: 0px;
   height: 100%;
   width: 100%;
   border: 2px solid black;
   z-index: 30000;
   left: 0px;
   display: none;
}

#condensedPageContainer.debugView #condensedLayoutSelectionContainer {
   max-width: 469px;
}

#condensedPageContainer.debugView #condensedLayoutSelectionContainer.moveThisLeft {
   left: 449px;
}

#condensedPageContainer #condensedLayoutSelectionContainer {}

#condensedLayoutSelection {
   background: rgb(1, 7, 7);
   width: 90%;
   max-width: 416px;
   overflow: hidden;
   border: 2px solid rgb(68, 68, 64);
   color: lightgray;
   margin: 0px auto;
}

.condensedLayoutSelectionText {
   text-align: center;
   padding: 4px 0px;
   cursor: default;
   position: relative;
}

.condensedLayoutCloseButton {
   position: absolute;
   right: 9px;
   top: 4px;
   font-size: 15px;
   cursor: pointer;
}

.condensedLayoutCloseButton i {
   color: rgb(160, 165, 169);
}

.moduleSelectionLine {
   border: 1px solid rgb(33, 34, 34);
   background: rgb(16, 48, 96);
   padding: 4px 4px 4px 10px;
}

.condensedModuleSelecBox {
   display: inline-block;
   background: seagreen;
   border: 3px solid red;
}

.condensedProportionsSelection {}

.condensedProportionsSelection {}

.condensedPresetsBox {
   border: 1px solid black;
   background: rgb(60, 73, 103);
   text-align: center;
   padding: 6px 0px;
}

.oneCondensedPreset {
   height: 35px;
   width: 35px;
   display: inline-block;
   text-align: center;
   line-height: 35px;
   margin-right: 5px;
   cursor: pointer;
}

.condensedPresetFunctionButton {
   background: rgb(10, 29, 58);
   display: inline-block;
   cursor: pointer;
   margin: 5px;
   padding: 7px 3px;
   box-shadow: rgba(10, 10, 10, 0.55) 4px 2px;
   transition: background 0.3s ease 0s;
}

#page .condensedPresetFunctionButton[data-inactive="yes"] {
   background: rgb(29, 29, 29);
   transition: background 0s ease 0s;
   cursor: default;
}

.condensedPresetFunctionButton:hover {
   background: rgb(27, 41, 64);
}

.condensedSetAsDefault,
.condensedPresetDelete {
   width: 170px;
}

.changeCondensedModeButton,
.changeCondensedLayoutPositionButton,
.condensedDebugControl {
   background: rgb(75, 61, 68);
   width: 156px;
   cursor: pointer;
   position: absolute;
   display: inline-block;
   float: left;
   top: 35px;
   color: white;
   text-align: center;
}

.condensedDebugControl {
   width: 190px;
}

.condensedDebugControl {
   background: rgb(90, 31, 82);
}

#page[data-recordingbar="show"] .condensedDebugControl {
   display: none;
}

.condensedDebugControl[data-status="on"] {
   background: rgb(14, 82, 14);
}

.condensedDebugControl[data-status="off"] {
   background: rgb(160, 38, 38);
}

.changeCondensedLayoutPositionButton {
   background: rgb(52, 47, 94);
}

#bothCondensedSections {
   position: absolute;
   width: 99%;
}

#bothCondensedSections.landscapeMode {
   width: 100%;
   background: rgb(54, 38, 14);
   top: 0px;
   bottom: 0px;
   height: 100%;
   overflow: hidden;
}

#bothCondensedSections.portraitMode {
   background: rgb(34, 36, 36);
   height: 100%;
   width: 100%;
}

.landscapeMode {
   background: blue;
}

.glossaryLineContainer {
   display: none;
}

.oneGlossaryLine {
   border: 1px solid gray;
   background: maroon;
   text-align: center;
}

.oneGlossarySection {
   border-bottom: 1px solid rgb(79, 76, 76);
   padding: 8px 0px;
}

#theGlossary {
   color: lightgray;
   background: rgb(19, 24, 44);
   font-size: 13px;
   position: relative;
   border: 2px solid rgb(0, 0, 0);
   overflow: hidden;
   padding: 0px;
   height: calc(100% - 71px);
}

#theGlossary[data-type="glossary"] #glossaryGroupsSidebar {
   vertical-align: top;
}

#glossaryPreferredVideoLocation,
#glossaryPreferredVideoLocation:focus-visible {
   border: 1px solid rgb(15, 15, 15);
   outline: none;
   background: rgba(9, 24, 62, 0.5);
   color: rgb(174, 193, 205);
}

#theGlossary[data-type="glossary"] .glossaryPreviousNext {
   display: none;
}

#glossaryPage[data-newadmininfo="off"] .oneGlossarySectionTitle,
#glossaryPage[data-newadmininfo="off"] .currentGlossaryType,
#glossaryPage[data-newadmininfo="off"] .currentSummaryType,
#glossaryPage[data-newadmininfo="off"] .currentModuleType,
#glossaryPage[data-newadmininfo="off"] .glossaryPageLink {
   display: none;
}

#glossaryPage.modulePage #theGlossary {
   background: rgb(22, 21, 22);
   border: 1px solid rgb(0, 0, 0);
}

#glossaryPage.modulePage .afterProhaws,
#glossaryPage.modulePage .loadAllGifsExplanation {
   display: none;
}

#allSummaryPagesToggleButton,
#allModuleLinksToggleButton,
#allModulePagesToggleButton {
   background: rgb(67, 17, 96);
   padding: 12px;
   margin: 8px;
   cursor: pointer;
   display: none;
}

#glossaryPage[data-moduledebug="on"] #adminOrNormalMessage,
#glossaryPage[data-moduledebug="on"] .modulePageMainVideo .modulePageDivTitle,
#glossaryPage[data-moduledebug="on"] .modulePageStartInfo,
#glossaryPage[data-moduledebug="on"] #allSummaryPagesToggleButton,
#glossaryPage[data-moduledebug="on"] #allSummaryPagesToggleButton,
#glossaryPage[data-moduledebug="on"] #allModuleLinksToggleButton,
#glossaryPage[data-moduledebug="on"] #allModulePagesToggleButton {
   display: inline-block;
}

#glossaryPage[data-moduledebug="on"] #modulePageButtonsRow {
   display: block;
}

#allSummaryPagesToggleButton {
   background: rgb(12, 62, 34);
}

#allModuleLinksToggleButton {
   background: darkblue;
}

.modulePageExplanation,
.modulePageMainVideo {
   padding: 18px;
   position: relative;
   color: lightblue;
   display: inline-block;
   vertical-align: top;
}

.javascriptCodeViewerTitle {
   background: black;
   text-align: center;
   border-bottom: 1px solid dimgray;
   height: 30px;
   line-height: 30px;
   color: lightgray;
}

.javascriptCodeViewerLine {
   padding-top: 15px;
   padding-bottom: 15px;
   padding-left: 15px;
}

#javascriptCodeViewerChar,
.javascriptEnterCodeTitle,
.startJavascriptCodeConversion,
#javascriptCodeViewerCode,
.javascriptCodeViewerOutput {
   display: inline-block;
   margin-right: 6px;
   border: 1px solid cyan;
   background: darkgreen;
   height: 25px;
   line-height: 25px;
   vertical-align: top;
}

.javascriptCodeConversionHelp,
.startJavascriptCodeConversion,
.javascriptEnterCodeTitle {
   background: rgb(0, 0, 0);
   padding: 0px 8px;
   border: 1px solid black;
   color: rgb(159, 185, 218);
   display: inline-block;
   font-size: 14px;
}

.javascriptCodeConversionHelp,
.startJavascriptCodeConversion {
   width: 38px;
   overflow: hidden;
   height: 25px;
   line-height: 25px;
   margin-right: 6px;
}

.javascriptCodeConversionHelp {
   padding: 0px 4px 0px 0px;
   text-align: center;
   position: relative;
}

.javascriptCodeConversionHelpOverlay {
   position: absolute;
   top: 0px;
   left: 0px;
   height: 100%;
   width: 100%;
}

.startJavascriptCodeConversion {
   cursor: pointer;
}

#javascriptCodeViewerChar,
#javascriptCodeViewerCode {
   width: 60px;
   background: black;
   border: 1px solid rgba(36, 36, 36, 0.71);
   padding: 2px 0px 0px 5px;
   color: rgb(149, 197, 212);
}

.javascriptCodeViewerOutput {
   border: none;
   overflow: hidden;
   background: rgb(11, 37, 56);
   padding: 3px 6px 0px 2px;
   width: 209px;
   text-align: left;
}

.javascriptCodePreResult,
.javascriptCodeViewerResult {
   background: rgba(60, 99, 150, 0.56);
   display: inline-block;
   padding: 0px 8px;
   border: none;
   height: 18px;
   line-height: 18px;
   position: relative;
   vertical-align: top;
}

.javascriptCodePreResult {
   border: none;
   background: none;
}

#javascriptCodeViewer,
#divider_admin_overlay {
   position: fixed;
   top: 140px;
   left: 3%;
   width: 800px;
   height: 712px;
   background: rgb(11, 13, 20);
   overflow: hidden;
   border: 2px solid rgb(0, 0, 0);
   z-index: 444;
   display: none;
}

#divider_admin_overlay {
   font-size: 10.5px;
}

.placeholderGutterContainer,
.placeholderGutter.leftToRight,
.placeholderGutter.topToBottom {
   position: absolute;
   background: black;
   font-size: 0px;
   display: none;
   border: 1px solid black;
   z-index: 6;
}

.placeholderGutterContainer {
   display: block;
   right: 0px;
   height: 100%;
   width: 24px;
   z-index: 4;
   top: 20px;
}

.placeholderGutterContainer .lighterSection,
.placeholderGutterContainer .darkerSection {
   position: absolute;
   width: 70px;
   z-index: 4;
   background: rgba(125, 123, 123, 0.53);
   height: 50%;
}

.placeholderGutterContainer .lighterSection {
   top: 50%;
   background: rgb(4, 14, 45);
}

.placeholderGutter.leftToRight {
   bottom: 0px;
   height: 18px;
   width: 600px;
}

.placeholderGutter.topToBottom {
   right: 2px;
   width: 15px;
   min-width: unset;
   height: 600px;
}

#codeCreate>.placeholderGutter {
   z-index: 44444;
   left: 900px;
   right: unset;
   height: 100%;
   width: 30px;
}

#codeCreate>.placeholderGutter.leftToRight {
   z-index: 44444;
   left: 0px;
   right: unset;
   width: 100%;
   height: 30px;
   top: 710px;
   bottom: unset;
}

#page[data-admincolorlocation="right"] #codeCreate>.placeholderGutter.topToBottom {
   left: unset;
   right: 900px;
}

#divider_admin_overlay[data-location="right"] {
   left: unset;
   right: 3%;
}

#divider_admin_overlay .languageAccentBox {
   padding-right: 0px;
}

#javascriptCodeViewer {
   top: 140px;
   height: unset;
   width: 506px;
   font-size: 13px;
   border: 1px solid rgb(27, 27, 27);
   display: none;
}

.languageAccentBox[data-meta="adminMainBackground"] .accentTitle i {
   opacity: 0.6;
   cursor: pointer;
}

#previewPage #javascriptCodeViewer {
   top: 80px;
}

#javascriptCodeViewer,
.javascriptCodeViewerTitle {
   border-color: rgb(39, 39, 39);
}

.javascriptCodeViewerTitle {
   position: relative;
}

.javascriptCodeViewerTitle i {
   position: absolute;
   right: 8px;
   cursor: pointer;
   color: rgb(159, 159, 159);
}

#dividerAdminColorsTitle {
   position: absolute;
   right: 0px;
   bottom: 0px;
   padding: 6px;
   background: indigo;
   color: white;
}

#leftRightDividerColors,
#topBottomDividerColors {
   display: block;
   margin-bottom: 11px;
}

.leftRightDividerBorderArea,
.leftRightDividerBackgroundArea,
.topBottomDividerBorderArea,
.topBottomDividerBackgroundArea,
.dividerBorderType {
   border: 1px solid rgba(0, 0, 0, 0.89);
   background: rgba(29, 28, 29, 0.73);
   padding: 4px;
   margin: 2px 6px;
   display: inline-block;
   color: lightblue;
   width: 327px;
}

.topBottomDividerBorderArea,
.leftRightDividerBorderArea {}

.dividerAdminInputTitle {
   display: inline-block;
   padding: 0px 8px;
   margin-right: 10px;
   background: rgb(2, 9, 25);
   border: 1px solid rgb(2, 9, 25);
}

.topBottomDividerBorderArea .dividerAdminInputTitle,
.leftRightDividerBorderArea .dividerAdminInputTitle {
   width: 140px;
}

.topBottomDividerBackgroundArea .dividerAdminInputTitle,
.leftRightDividerBackgroundArea .dividerAdminInputTitle {
   width: 173px;
}

.dividerAdminInputArea {
   display: inline-block;
   min-width: 40px;
   min-height: 21.25px;
   vertical-align: top;
}

.adminAccentBorderButton {
   background: black;
   display: inline-block;
   margin-right: 8px;
   border: 1px solid black;
   cursor: pointer;
   height: 23px;
   line-height: 23px;
   width: 60px;
   text-align: center;
}

.adminAccentBorderButton[data-location="languageAdminMenu"] {
   background: rgb(41, 40, 40);
   color: lightgray;
}

.adminAccentBorderButton.activeButton {
   border-bottom: 1px solid cyan;
   font-weight: 600;
   background: rgb(11, 18, 38);
   color: lightblue;
}

.adminMenuColorLine {
   border: 1px solid rgb(0, 0, 0);
   padding: 4px;
   background: black;
   display: inline-block;
   margin: 4px;
   color: lightblue;
}

#dividerAdminColors,
#languageAdminMenuColors {
   background: rgb(8, 18, 37);
   display: inline-block;
   height: unset;
   vertical-align: top;
   overflow: hidden;
   width: 94%;
   margin-left: 3%;
   margin-bottom: 15px;
   border: 1px solid rgb(0, 0, 0);
}

#languageAdminMenuColors {
   background: rgb(17, 17, 19);
   padding: 0px;
}

#ecc_sampleTopBar {
   background: black;
   width: 100%;
   position: fixed;
   top: 0px;
   left: 0px;
   height: 100px;
}

#ecc_sampleAdminMenu {
   position: fixed;
   background: rgba(3, 30, 3, 0.21);
   height: 100px;
   right: 50px;
   width: 330px;
   padding: 20px;
   border: 2px solid rgba(81, 134, 143, 0.36);
}

.dividerAdminColorsInnerTitle,
.dividerAdminColorsTitle {
   height: 28px;
   background: rgb(4, 19, 47);
   text-align: center;
   line-height: 28px;
   margin-bottom: 30px;
   position: relative;
   border-bottom: 1px solid rgba(45, 45, 45, 0.46);
}

.languageAdminColorsInner {
   padding: 6px;
}

.dividerAdminColorsInnerTitle {
   background: black;
   margin-bottom: 15px;
}

.dividerAdminCloseButton {
   position: absolute;
   top: 0px;
   cursor: pointer;
   right: 15px;
}

.languageAdminMenuButtonsRow {
   padding: 6px;
}

.languageAdminMenuSave {
   background: rgb(3, 12, 34);
   padding: 8px;
   display: inline-block;
   cursor: pointer;
   color: lightblue;
}

.togglePlaceholderGutterTitle,
.togglePlaceholderGutterButton {
   display: inline-block;
   background: rgb(38, 54, 85);
   padding: 4px 9px;
   border: 1px solid black;
   color: lightblue;
}

.togglePlaceholderGutterButton {
   min-width: 110px;
   text-align: center;
   cursor: pointer;
}

.togglePlaceholderGutterTitle {
   background: rgb(0, 0, 0);
}

.languageAdminMenuSaveRow {
   width: 94%;
   margin-left: 3%;
   padding: 9px;
}

.cycleDividerAdminLocation {
   font-size: 11px;
   position: absolute;
   top: 0px;
   left: 15px;
   opacity: 0.3;
   cursor: pointer;
   transition: opacity 0.4s ease 0s;
}

.cycleDividerAdminLocation:hover {
   opacity: 0.6;
}

.adminMenuColorLineTitle {
   display: inline-block;
   width: 140px;
}

.adminMenuColorLine[data-meta="adminDashedOrSolid"] .adminMenuColorLineTitle {
   width: 103px;
}

.module_page_for_cloning,
#entire_module_page,
.oneAppendedGlossaryPage {
   background: rgb(2, 2, 12);
   padding-bottom: 12px;
   margin-top: 7px;
   padding-top: 12px;
   padding-right: 8px;
   overflow-y: auto;
   border: 3px solid rgb(177, 157, 80);
   position: relative;
   width: 98%;
   margin-left: 1%;
}

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

   #page[data-width="showingConsoles"] .module_page_for_cloning,
   #page[data-width="showingConsoles"] #entire_module_page,
   #page[data-width="showingConsoles"] .oneAppendedGlossaryPage {
      border: 3px solid rgb(0, 163, 255);
   }
}

.module_page_for_cloning {
   background: rgb(47, 60, 46);
   position: absolute;
   left: -99999px;
}

.oneAppendedGlossaryPage .relatedFeaturesSection {
   min-height: 70px;
}

.oneAppendedGlossaryPage {
   background: rgb(13, 13, 14);
   height: unset;
   border: 1px solid rgb(0, 0, 0);
   max-height: unset;
}

.thirdCombinedLoc .oneAppendedGlossaryPage {
   height: 90%;
}

.thirdCombinedLoc .oneAppendedGlossaryPage {
   border: 1px solid rgb(0, 0, 0);
   min-height: 100px;
   padding-right: 0px;
   padding-top: 0px;
   position: relative;
}

.combinedSectionTitle {
   text-align: center;
   font-size: 25px;
   background: rgb(19, 40, 76);
   line-height: 40px;
   height: 40px;
   margin-bottom: 15px;
   border-bottom: 1px solid rgb(59, 74, 82);
}

.combinedVideoOperations {
   position: absolute;
   bottom: 0px;
   background: rgb(1, 25, 3);
}

.thisTestDiv .combinedVideoOperations {
   position: relative;
   font-size: 12px;
}

.playerVarToClipboard {
   background: black;
   color: lightblue;
   cursor: pointer;
}

.oneAppendedGlossaryPageTitle {
   position: absolute;
   right: 0px;
   background: rgb(59, 2, 59);
   padding: 5px;
}

#modulePageButtonsRow {
   display: none;
}

#moreVideosDiv {
   background: rgb(92, 11, 82);
   padding: 15px;
   color: white;
   border: 3px solid cyan;
}

#modulePageButtonsRow,
#modulePageLoadMore {
   background: rgb(53, 66, 80);
   padding: 20px;
   position: relative;
   height: 70px;
   overflow-y: auto;
}

#modulePageLoadMore {
   border: 2px solid rgb(176, 143, 196);
}

.createOneClickable,
.parseOneStampGroup,
.loadTheRemainingGlossaryGroups,
.toggleRecordingReady {
   background: rgb(42, 47, 81);
   bottom: 100px;
   cursor: pointer;
   height: 31px;
   line-height: 31px;
   margin-right: 20px;
   padding: 0px 6px;
   opacity: 0.8;
   display: inline-block;
   position: absolute;
}

#page[data-recordingready="yes"] .createOneClickable,
#page[data-recordingready="yes"] .parseOneStampGroup,
#page[data-recordingready="yes"] .loadTheRemainingGlossaryGroups {
   display: none !important;
}

.toggleRecordingReady {
   left: 100px;
   font-size: 16px;
   padding: 3px;
   background: black;
   height: unset;
   z-index: 444444;
   bottom: 28px;
   opacity: .4;
}

.createOneClickable {
   left: 190px;
}

.parseOneStampGroup {
   left: 350px;
}

.createOneClickable {
   background: rgb(77, 55, 114);
}

#theGlossary[data-type="glossary"] .loadTheRemainingGlossaryGroups {
   display: inline-block;
}

#page[data-glossaryrecordingstatus="on"] .glossaryToggleAdminInfo.adminInfo,
#page[data-glossaryrecordingstatus="on"] .loadTheRemainingGlossaryGroups,
#page[data-glossaryrecordingstatus="on"] .createOneClickable,
#page[data-glossaryrecordingstatus="on"] .parseOneStampGroup,
#page[data-glossaryrecordingstatus="on"] #glossaryAdminBar {
   display: none;
}

.glossaryPreviousNext {
   width: 400px;
   position: absolute;
   bottom: 0px;
   padding-bottom: 5px;
}

.glossaryNavSelectArea {
   position: absolute;
   right: 0px;
   height: 40px;
   white-space: nowrap;
}

.modulePageLoadMoreButton,
.modulePageLoadMoreSelectAreaOne,
.modulePageLoadMoreSelectAreaTwo,
.modulePageLoadMoreSelectAreaThree,
.modulePageLoadMoreSelectAreaFour {
   display: inline-block;
   margin: 0px 5px 0px 0px;
   padding: 3px 3px 3px 0px;
   border: 1px solid rgb(0, 0, 0);
   background: rgb(23, 47, 97);
   color: lightgray;
   cursor: pointer;
}

.modulePageNavigationRow .modulePageLoadMoreButton {
   font-size: 17px;
   padding: 10px;
}

.modulePageLoadMoreButton.two,
.modulePageLoadMoreButton.three {
   display: none;
}

.modulePageLoadMoreButton.adminInfo {
   background: rgb(75, 34, 17);
}

.modulePageLoadMoreButton.adminInfo[data-newadmininfo="on"] {
   background: rgb(9, 89, 71);
}

.oneGroupTestLoad {
   background: black;
   margin-bottom: 8px;
   cursor: pointer;
   padding: 4px;
   display: none;
}

.populateNotLoaded {
   padding: 5px;
   margin: 5px;
   background: rgb(27, 57, 46);
   color: white;
   cursor: pointer;
}

.modulePageLoadMoreButton.loadFromSelect,
.selectEnableOptions {
   cursor: pointer;
   background: rgb(12, 34, 69);
   color: rgb(177, 184, 186);
   padding: 0px 11px;
   display: inline-block;
}

.selectEnableOptions {
   background: rgb(14, 36, 6);
}

.modulePageLoadMoreSelectAreaOne {
   background: rgb(35, 41, 102);
}

.modulePageLoadMoreSelectAreaTwo {
   background: rgb(9, 30, 23);
}

.modulePageLoadMoreSelectAreaThree {
   background: rgb(32, 26, 34);
}

.modulePageLoadMoreSelectAreaFour {
   background: rgb(18, 69, 91);
}

.modulePageLoadMoreSelectAreaThree {
   background: rgb(32, 26, 34);
}

.glossaryLoadMoreSectionTitle {
   display: inline-block;
   cursor: default;
   width: 136px;
}

.modulePageLoadMoreTitle {
   position: absolute;
   right: 5px;
   background: rgb(48, 5, 42);
   padding: 8px;
   bottom: 0px;
}

.modulePageButtonsRowTitle {
   background: black;
   padding: 4px;
   position: absolute;
   right: 8px;
}

.oneModulePageButton {
   display: inline-block;
   margin: 6px;
   cursor: pointer;
   background: rgb(61, 6, 71);
   padding: 6px;
   border: 1px solid black;
}

.oneModulePageButton.two {
   background: rgb(13, 76, 97);
}

.oneModulePageButton.three {
   opacity: 1;
   background: rgb(6, 47, 8);
}

.modulePageExplanation {
   padding-bottom: 50px;
   width: 33%;
   cursor: text;
}

.makeExplanationSmall .modulePageExplanation {
   overflow: hidden;
}

.kbRecButtonOne {
   display: inline-block;
   background: black;
   cursor: pointer;
   color: #a491a9;
   padding: 0px 4px;

}


#kb_shortcut_rec {
   padding: 5px;
   /* border: 4px solid black; */
   background: #050505;
   margin: 10px;
   /* margin-bottom: 1200px; */
   width: 465px;
   /* display: none; */

   position: absolute;
   z-index: 50;
   border: 2px solid #0a2256;
   top: 100px;
   left: 100px;
   display: none;
}

.hide_kb_rec_button {
   position: absolute;
   top: 5px;
   right: 16px;
   color: gray;
   cursor: pointer;
}

.keyboardShortcutCount {
   border: 1px solid black;
   background: #1e1e1e;
}

.keyboardShortcutCountLine {
   border: 1px solid #000000;
   margin: 6px;
   padding: 6px;
   background: #121234;
   background: #0f1427;
   background: #0b101c;
   padding-left: 62px;
   font-size: 15px;
   margin-bottom: 8px;
}

.keyboardShortcutCountLineTitle,
.keyboardShortcutCountLineAmount {
   border: 1px solid #5a6568;
   margin: 4px;
   padding: 4px;
   display: inline-block;
}


.keyboardShortcutCountLine[data-meta="total"] .keyboardShortcutCountLineAmount {
   color: #7a94a0;
}

.keyboardShortcutCountLineTitle {
   width: 174px;
   /* border: 1px solid #3e3e3e; */
   border: none;
   color: #9bb1b5;
   color: #a7c0ca;
}

.keyboardShortcutCountLineAmount {
   background: black;
   color: #94a9a9;
   color: #b9c3ce;
   border: none;
   width: 60px;
   text-align: center;
}

.kb_shortcut_rec_title {
   background: black;
   height: 30px;
   line-height: 30px;
   text-align: center;
   font-size: 15px;
}

.modulePageExplanationInner {}

.newExplanation {}

.modulePageExplanation .newExplanation {
   border: none;
}

.newExplanationLine {
   padding: 12px 20px;
}

#glossaryPage[data-features="hidden"] .modulePageExplanation,
#glossaryPage[data-features="hidden"] .singleGroupContentEntry[data-type="gifEntry"] {
   border: 3px solid rgb(115, 44, 33) !important;
   display: none !important;
}

#glossaryPage[data-videos="hidden"] .modulePageMainVideo,
#glossaryPage[data-videos="hidden"] .singleGroupContentEntry[data-type="spaceForPicture"] {
   border: 3px solid rgb(115, 108, 33) !important;
   display: none !important;
}

#glossaryPage[data-features="hidden"] .modulePageMainVideo,
#glossaryPage[data-videos="hidden"] .modulePageExplanation,
#glossaryPage[data-features="hidden"] .singleGroupContentEntry[data-type="spaceForPicture"],
#glossaryPage[data-videos="hidden"] .singleGroupContentEntry[data-type="gifEntry"] {
   width: 100% !important;
   max-width: unset !important;
}

.singleGroupContentEntry .newExplanationLine:nth-child(2n+1) {
   color: rgb(208, 206, 206);
}

.singleGroupContentEntry .newExplanationLine:nth-child(2n) {
   background: rgba(25, 25, 25, 0.38);
   color: rgb(148, 168, 177);
}

.newExplanationLine i {
   font-size: 9px;
}

.modulePageMainVideo {
   min-height: 300px;
   width: 66%;
   padding: 3px;
   border: 1px solid rgb(72, 71, 71);
}

#glossaryPage[data-moduledebug="on"] .modulePageMainVideo,
#glossaryPage[data-moduledebug="on"] .modulePageExplanation {
   display: block;
   width: unset;
}

#glossaryPage[data-moduledebug="on"] .modulePageMainVideo {
   padding-top: 70px;
}

.modulePageMainVideo.notReady {
   min-height: unset;
   overflow: hidden;
}

.modulePageDivTitle {
   position: absolute;
   bottom: 0px;
   right: 0px;
   background: black;
   border: 1px solid gray;
   padding: 4px;
   opacity: 0.2;
   display: none;
}

.modulePageMainVideo .modulePageDivTitle {
   bottom: unset;
   top: 0px;
   background: rgb(2, 22, 2);
   display: none;
}

#videoTester {
   font-size: 13px;
   margin-bottom: 30px;
   overflow: hidden;
   padding-bottom: 15px;
   border: 3px solid black;
   margin-left: 3%;
   margin-top: 1%;
   height: 59%;
   background: rgb(16, 17, 22);
   position: fixed;
   top: 0px;
   z-index: 3333;
   left: 24%;
   width: 27%;
   color: lightgray;
   display: none;
}

#videoTesterTitle,
#videoTesterInnerTitle {
   background: black;
   height: 40px;
   line-height: 40px;
   text-align: center;
   border-bottom: 2px solid rgb(50, 59, 77);
   font-size: 20px;
}

#videoTesterInnerTitle {
   position: absolute;
   top: 0px;
   left: 0px;
   width: 100%;
   background: rgb(30, 40, 67);
}

.videoAdminInfo {
   position: absolute;
   top: 8px;
   right: 0px;
}

.adminInfoVideoID,
.adminInfoVideoNumber,
.adminInfoVideoGroup,
.adminInfoVideoName {
   display: inline-block;
   border: 2px solid cyan;
   padding: 8px;
   background: darkblue;
}

.adminInfoVideoNumber {
   background: rgba(17, 17, 46, 0.43);
   border: none;
   width: 80px;
   text-align: center;
   height: 30px;
   padding: 0px;
   line-height: 30px;
   font-size: 18px;
   color: rgb(61, 101, 116);
   opacity: 0.8;
   top: 8px;
}

.adminInfoVideoID {
   display: none;
}

.oneVideoDiv {
   position: relative;
   width: unset;
   height: unset;
}

.modulePageMainVideo .plyr {
   min-height: 34.8vw;
}

.thirdGlossaryLoc .oneVideoDiv .plyr {
   min-height: 35.8vw;
}

#page[data-recordingready="yes"] .plyr {
   min-height: unset;
}

@media only screen and (min-width: 1728px) {
   .thirdGlossaryLoc .oneVideoDiv .plyr {
      min-height: unset;
   }

   #page .oneVideoDiv {
      max-width: 1070px;
   }
}

.oneVideoTitle {
   position: absolute;
   overflow: hidden;
   transition: opacity 0.8s ease 0s;
   opacity: 1;
   left: 0px;
   width: 100%;
   font-size: 20px;
   color: rgb(234, 238, 246);
   padding-top: 11px;
   height: calc(100% - 50px);
   background: rgb(40 39 39 / 34%);
   z-index: 1;
}

.combinedVideoArea .oneVideoTitle {}

#modulePageVideoTitle {}

#page .plyr__controls {
   background: rgba(54, 54, 54, 0.24);
   padding-top: 0px;
   height: 50px;
}

.oneVideoActualName {
   position: absolute;
   left: 0px;
   width: 100%;
   padding: 4px 30px 8px;
   height: 39px;
   line-height: 30px;
   font-size: 21px;
   background: rgb(9, 24, 52);
   color: white;
   border: 1px solid rgba(102, 96, 96, 0.19);
   opacity: 0.9;
   z-index: 3;
   bottom: 0px;
   text-align: center;
}

.oneVideoActualGroup {
   opacity: 0;
}

.oneVideoActualVideoID,
.oneVideoActualNumber {
   top: unset;
   bottom: 15px;
   border: none;
   background: rgb(18, 18, 55);
   opacity: 0;
}

.oneVideoActualNumber {
   right: 15px;
   left: unset;
}

.plyr--playing .oneVideoTitle {
   opacity: 0;
}

.plyr--playing.plyr--hide-controls .oneVideoTitle {
   opacity: 0;
}

.plyr--paused .oneVideoTitle {
   opacity: 1;
}

.plyr__control--overlaid img {
   min-width: unset !important;
   width: 90px !important;
   background: none !important;
}

.plyr__control--overlaid,
.plyr__control--overlaid:hover {
   background: none !important;
}

.plyr__control--overlaid {
   top: 40%;
}

.outsideVueVideo {
   width: 100%;
   height: 95%;
}

.oneVideoDiv iframe {
   position: absolute;
   top: 0px;
   width: 100%;
   height: 100%;
}

#videoPlayer {
   overflow-y: auto;
   border: 3px solid magenta;
   padding: 12px;
   background: rgb(85, 29, 79);
   max-height: 500px;
   color: white;
}

.oneVideo {
   border: 3px solid cyan;
}

.videoDivButton {
   cursor: pointer;
   background: rgb(15, 15, 15);
   border: 1px solid rgba(105, 105, 105, 0.3);
   padding: 3px;
   margin: 3px;
   display: inline-block;
}

#videoTesterInner {
   border: 3px solid rgb(74, 79, 79);
   background: rgb(3, 3, 18);
   width: 96%;
   margin-left: 2%;
   margin-top: 2%;
   height: 91%;
   overflow-y: auto;
   padding-left: 20px;
   padding-top: 70px;
   position: relative;
}

.oneVideo {
   border: 2px solid rgb(111, 111, 110);
   margin: 8px 8px 37px;
   min-height: 200px;
   background: rgb(16, 16, 24);
   width: 54%;
}

.oneVideo video {
   position: relative;
   height: 95%;
   width: 95%;
}

#glossaryPage[data-searchstatus="open"] #theGlossary {
   height: 45%;
}

#glossaryFilterRow {
   margin-left: 0px;
   width: 60%;
}

#glossaryPage[data-readingmode="on"] #glossaryFilterRow {
   width: 35%;
   position: absolute;
   right: 0px;
   display: none;
}

#glossaryPage[data-readingmode="on"] #theGlossary {
   width: 100%;
   height: calc(100% - 359px);
   border: 1px solid yellow;
}

#glossaryPage.modulePage #theGlossary {
   width: 100%;
   overflow: hidden;
}

.glossaryKeyboardShortcuts {
   background: rgb(11, 24, 64);
   opacity: 0.3;
   color: rgb(189, 189, 189);
   border: 1px solid gray;
   width: 250px;
}

.keyboardShortcutsTitle {
   background: black;
   border-bottom: 1px solid gray;
   padding: 5px;
   text-align: center;
}

.glossaryKeyboardShortcutLine {
   padding: 4px;
}

#glossaryPage[data-debug="on"] .glossaryKeyboardShortcuts {
   opacity: 1;
}

#glossaryPage[data-debug="final"] .glossaryKeyboardShortcuts,
#glossaryPage[data-debug="final"] .cc_debug_title {
   display: none;
}

.glossaryCheckmarkSection .cc_debug_title {
   opacity: 0.4 !important;
}

#glossaryPage[data-debug="final"] .singleGroupContentEntry {
   display: none;
}

.videoContainerTitle {
   position: absolute;
}

#glossaryPage[data-debug="final"] .singleGroupContentEntry[data-type="gifEntry"] {
   width: 31%;
   display: inline-block;
   margin: 0px;
   border: none;
}

#glossaryPage[data-debug="final"] .singleGroupContentEntry.rightLoc[data-type="gifEntry"] {}

#glossaryPage[data-debug="final"] .singleGroupContentEntry[data-type="spaceForPicture"] {
   width: 68%;
   position: relative;
   overflow: hidden;
   display: inline-block;
   vertical-align: top;
   text-align: center;
   padding: 0px;
   max-height: 99%;
   max-width: 68%;
   margin: 0px;
   background: none;
   border: none;
}

#page[data-recordingready="yes"] #glossaryPage[data-debug="final"] .singleGroupContentEntry[data-type="spaceForPicture"] {
   width: 55%;
}

.stampArea {
   padding: 40px 15px 15px;
   background: rgb(20, 24, 50);
   color: rgb(230, 230, 230);
   font-size: 16px;
   position: relative;
   width: 33%;
   display: inline-block;
   vertical-align: top;
   overflow: hidden auto;
   border: 1px solid rgb(56, 67, 75);
   max-height: 93%;
   margin-left: 2%;
}

.stampAreaTitle {
   background: black;
   position: absolute;
   top: 0px;
   left: 0px;
   width: 100%;
   text-align: center;
   height: 30px;
   line-height: 30px;
   border-bottom: 1px solid rgb(46, 45, 45);
}

.oneStampLine {
   border-bottom: 1px solid rgba(121, 121, 116, 0.35);
   padding: 4px;
   margin-bottom: 8px;
   cursor: pointer;
}

.oneStampLine.groupDiv {
   background: rgb(5, 4, 5);
   color: rgb(142, 200, 244);
}

.oneStampLine:hover .stampLineTitle,
.oneStampLine:hover .stampLineStamp {
   text-decoration: underline;
}

.stampLineTitle,
.stampLineColon,
.stampLineStamp {
   display: inline-block;
   vertical-align: top;
}

.stampLineColon {
   display: none;
}

.stampLineTitle {
   width: 350px;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
}

.stampLineStamp {
   color: rgb(93, 189, 220);
}

#glossaryPage[data-debug="final"] .singleGroupContentEntry[data-type="spaceForPicture"] {
   min-height: 200px;
   min-width: 200px;
   border: 1px solid black;
}

#page .singleGroupContentEntry[data-type="spaceForPicture"] img {
   max-width: 1000px;
   width: 100%;
   min-width: 350px;
}

#theGlossary[data-fullwidthpicture="true"] .singleGroupContentEntry,
#glossaryPage[data-debug="final"] #theGlossary[data-fullwidthpicture="true"] .singleGroupContentEntry[data-type="spaceForPicture"],
#glossaryPage[data-debug="final"] #theGlossary[data-fullwidthpicture="true"] .singleGroupContentEntry[data-type="gifEntry"] {
   min-width: unset;
   max-width: unset;
   width: 96%;
   margin-left: 2%;
   margin-top: 12px;
}

#glossaryPage[data-debug="final"] #theGlossary[data-fullwidthpicture="true"] .singleGroupContentEntry[data-type="gifEntry"] {}

.innerPictureContainer {
   border: 1px solid rgba(48, 48, 48, 0.42);
   max-width: 1000px;
   position: relative;
   margin: 0px auto;
   width: 100%;
   display: none;
}

.theVideoContainer {
   background: rgb(35, 35, 51);
   height: 100%;
   border: 1px solid lightblue;
   width: 100%;
}

.oneVideoDivButtons {
   background: rgb(45, 15, 54);
   border: 1px solid yellow;
   display: none;
}

.spaceForPictureOverlay {
   position: absolute;
   background: rgb(4, 4, 27);
   z-index: 4;
   cursor: pointer;
   color: white;
   width: 100%;
   height: 100%;
   left: 0px;
   top: 0px;
   padding: 15px;
   transition: background 0.3s ease 0s;
   overflow: hidden;
}

.spaceForPicturePause {
   background: rgb(2, 10, 28);
   position: absolute;
   width: 40px;
   height: 40px;
   line-height: 40px;
   text-align: center;
   color: lightgray;
   opacity: 0.4;
   transition: opacity 0.4s ease 0s;
   bottom: 60px;
}

.pictureOverlayEntry {
   border: 1px solid rgb(34, 118, 142);
   background: black;
   margin: 13px;
   padding: 12px;
}

.pictureOverlayEntry:nth-child(2n+1) {
   background: rgb(36, 47, 65);
   color: rgb(217, 198, 226);
}

.spaceForPictureOverlay[data-state="shown"] .fa-pause {
   display: none;
}

.spaceForPictureOverlay[data-state="hidden"] .fa-play {
   display: none;
}

.spaceForPicturePause:hover {
   opacity: 1;
}

.spaceForPictureOverlay[data-state="hidden"] {
   background: none;
}

.cc_some_sunrise {
   opacity: 0.2;
}

.spaceForPictureLogo {
   position: absolute;
   bottom: 50px;
   right: 30px;
   font-family: "Lobster Two", cursive;
   font-size: 30px;
   color: rgb(172, 172, 191);
}

.spaceForPictureOverlay[data-state="hidden"] .spaceForPictureMeta,
.spaceForPictureOverlay[data-state="hidden"] .spaceForPictureTitle,
.spaceForPictureOverlay[data-state="hidden"] .spaceForPictureLogo {
   display: none;
}

#glossaryPage[data-debug="final"] .spaceForPictureInnerTitle {
   background: rgb(44, 5, 42);
   position: absolute;
   bottom: -40px;
   cursor: default;
   color: lightgray;
}

#glossaryPage[data-debug="final"] .spaceForPictureOverlay[data-state="hidden"] .spaceForPictureInnerTitle,
#glossaryPage[data-debug="final"] .spaceForPictureTitle {
   display: none;
}

.pictureContent {
   border: 1px solid rgb(0, 0, 0);
   height: 100%;
}

.pictureContent .ff-container {
   position: relative;
}

.pictureContent .ff-container .gifPause {
   border: 2px solid rgb(0, 154, 255);
   background: rgb(100, 25, 87);
   position: absolute;
   bottom: 50px;
   left: 50px;
   cursor: pointer;
   padding: 15px;
}

.pictureContent .ff-inactive .gifPause {
   display: none;
}

.glossarySamplePicture {
   border: 1px solid gray;
   width: 50%;
   height: 300px;
   background: rgb(6, 48, 56);
   margin: 20px;
}

#glossaryPage[data-debug="on"] #theGlossary {
   border: 4px solid rgb(17, 110, 131);
}

#glossaryTopBar,
#glossaryAdminBar,
#glossaryBottomBar {
   background: black;
   position: relative;
   border-bottom: 1px solid rgb(34, 34, 34);
   height: 70px;
   top: 0px;
   left: 0px;
   width: 100%;
   z-index: 33;
}

#glossaryPage.modulePage #glossaryTopBar {
   background: rgb(2, 2, 28);
   border-bottom: 1px solid black;
}

#glossaryAdminBar,
#glossaryBottomBar {
   top: unset;
   bottom: 0px;
   height: 40px;
   border-top: 1px solid dimgray;
   position: absolute;
}

#glossaryAdminBar {
   left: 16px;
   border: 2px solid rgba(0, 255, 255, 0.29);
   bottom: 133px;
   top: unset;
   overflow: hidden;
   opacity: 0.8;
   width: 100%;
}

#page[data-recordingready="yes"] #glossaryAdminBar {
   z-index: 44444;
   bottom: 130px;
}

#glossaryStyleFixes {
   background: rgb(13, 33, 44);
   z-index: 15;
   position: fixed;
   padding: 2px 2px 40px;
   bottom: 192px;
   border: 3px solid lightblue;
   font-size: 13px;
   left: 50px;
   display: none;
}

.glossaryStyleFixesTitle {
   background: black;
   position: absolute;
   bottom: 0px;
   right: 0px;
   padding: 8px;
}

#glossaryBottomBar {
   height: 96px;
   background: rgb(14, 15, 32);
   border: 3px solid rgb(0, 0, 0);
   bottom: 2px;
}

.glossaryBottomBarTabs {
   padding: 8px;
   text-align: center;
}

.glossaryBottomBarTabs[data-location="top"] {
   padding-top: 0px;
   height: 20px;
   line-height: 20px;
   overflow: hidden;
   bottom: unset;
   top: 0px;
   display: none;
}

.oneGlossaryBottomBarTab {
   border: 1px solid rgb(0, 0, 0);
   display: inline-block;
   margin-right: 30px;
   padding: 5px;
   background: black;
   cursor: pointer;
}

.glossaryBottomBarTabs[data-location="top"] .oneGlossaryBottomBarTab {
   padding: 1px;
   height: 15px;
   line-height: 12px;
   font-size: 9px;
}

.mainGlossaryNav {
   padding: 5px;
   min-height: 39px;
}

.oneGlossaryBottomBarTab[data-type="getAnyGroup"] {
   display: none;
}

.oneGlossaryBottomBarTab[data-type="module"] {
   background: rgb(9, 9, 72);
}

.oneGlossaryBottomBarTab[data-type="summary"] {
   background: rgb(38, 10, 47);
}

.oneGlossaryBottomBarTab[data-type="combined"] {
   background: rgb(3, 45, 7);
}

.oneGlossaryBottomBarTab[data-type="combined"] {
   display: none;
}

#page[data-showcombinedvideos="yes"] .oneGlossaryBottomBarTab[data-type="combined"] {
   display: inline-block;
}

.oneGlossaryBottomBarTab[data-type="glossary"] {
   background: rgb(17, 42, 44);
}

.oneGlossaryBottomBarTab[data-active="yes"] {
   border: 1px solid rgb(5, 92, 92);
   color: rgb(49, 212, 212);
   background: black;
}

#glossaryBottomBar a[data-type="module"] {
   color: rgb(145, 164, 164);
   background: rgb(12, 34, 40);
   margin-right: 8px;
}

#glossaryPage[data-newadmininfo="off"] .glossaryPageLink {
   display: none;
}

#glossaryBottomBar a[data-type="summary"] {
   color: rgb(157, 185, 185);
   background: rgb(56, 15, 52);
   margin-right: 8px;
}

#glossaryBottomBar a[data-type="glossary"] {
   color: rgb(200, 209, 209);
   background: rgb(15, 9, 40);
   margin-right: 8px;
}

.thirdCombinedLoc .fileCheck {
   display: none;
}

.combinedVideoArea {
   min-height: 300px;
   border: 1px solid rgb(56, 67, 75);
   background: rgb(16, 32, 77);
   position: relative;
   overflow: hidden;
   width: 63%;
   display: inline-block;
   margin-left: 0.5%;
}

.thirdCombinedLoc .oneAppendedGlossaryPage .plyr {
   height: 32.75vw;
}

#glossaryBottomBar select {
   border: 1px solid black;
   background: rgb(0, 0, 0);
   outline: none;
   width: 300px;
}

#glossaryLoadMoreDropdown {
   border: 1px solid black;
}

#glossaryBottomBar select:focus,
#glossaryBottomBar select:focus-visible {
   border: 1px solid rgb(20, 20, 20);
}

.glossaryLineContainer {
   display: none;
}

.oneGlossaryLine {
   border: 1px solid gray;
   background: maroon;
   text-align: center;
}

.oneGlossarySection {
   border-top: 1px solid rgb(173, 179, 173);
   border-right: 1px solid rgb(173, 179, 173);
   border-left: 1px solid rgb(173, 179, 173);
   border-image: initial;
   border-bottom: none;
}

#glossarySection {
   background: navy;
   border: 2px solid cyan;
}

#allGlossaryLines {
   display: none;
}

.moduleLoadExplanation {
   background: rgb(6, 36, 38);
   font-size: 20px;
   border: 3px solid rgb(112, 112, 98);
   padding: 15px;
}

.oneGlossaryMatchLine {
   background: rgb(36, 36, 39);
   padding: 6px;
   margin: 8px;
   border: 2px solid lightblue;
   font-size: 15px;
}

.myGroupNameTest {
   background: black;
   padding: 5px;
   margin: 16px;
   font-size: 15px;
   display: none;
   border: 2px solid rgba(173, 216, 230, 0.42);
}

.myGroupNameTest[data-key="featureGroupColumn0"],
.myGroupNameTest[data-key="featureGroupColumn1"],
.myGroupNameTest[data-key="featureGroupColumn2"],
.myGroupNameTest[data-key="featureGroupColumn5"],
.myGroupNameTest[data-key="featureGroupColumn6"] {
   display: block;
}

.oneGlossaryMatchLine:nth-child(2n+1) {
   background: black;
}

.glossaryButtonsRow {
   background: black;
   height: 50px;
   color: white;
   position: absolute;
   border: 1px solid rgb(10, 121, 121);
   padding-top: 6px;
   padding-left: 5px;
   width: 96%;
   bottom: 181px;
}

.glossaryButton {
   background: rgb(48, 66, 119);
   display: inline-block;
   padding: 6px 38px 6px 6px;
   cursor: pointer;
   color: lightgray;
   vertical-align: top;
   height: 27px;
   line-height: 16px;
   position: relative;
   opacity: 0.1;
   min-width: 120px;
}

#getGlossaryGroupAjax {
   opacity: 1;
   background: rgb(37, 4, 37);
}

.glossaryButton.modulePageDebug {
   opacity: 0.8;
   display: none;
}

.glossaryButton.modulePageDebug[data-debug="on"] {
   background: rgb(7, 46, 68);
}

.glossaryButton.modulePageDebug[data-debug="off"] {
   background: rgb(31, 3, 3);
   opacity: 0.7;
}

.noteStatusButton {
   background: rgb(69, 12, 69);
}

.noteStatusButton[data-status="active"] {
   background: rgb(4, 65, 4);
}

.changeGlossaryCategory {
   border: 2px solid rgb(184, 167, 170);
   cursor: pointer;
   width: 200px;
   opacity: 0.1;
}

.refreshDetail {
   background: rgb(47, 8, 22);
}

.changeGlossaryCategory[data-status="none"] {
   background: rgb(62, 62, 62);
}

.changeGlossaryCategory[data-status="needsWork"] {
   background: rgb(79, 43, 10);
}

.changeGlossaryCategory[data-status="complete"] {
   background: rgb(2, 40, 2);
}

.glossaryButton.toggleGlossaryLines {
   background: rgb(17, 26, 28);
   margin-left: 30px;
   display: none;
}

#glossaryPage[data-readingmode="on"] .toggleGlossaryLines {
   display: none;
}

.glossaryButton .buttonShortcut {
   position: absolute;
   background: rgb(0, 0, 0);
   right: 0px;
   top: 0px;
   padding: 3px;
   z-index: 4;
   border: 1px solid rgba(105, 105, 105, 0.46);
}

.glossaryButton.showFinal {
   background: rgb(74, 63, 84);
   margin-left: 20px;
}

.topBarLineOne,
.topBarLineTwo {
   display: none;
}

.topBarLineTwo {
   width: 900px;
}

.readingModeButton {
   background: rgb(54, 39, 24);
}

#glossaryPage[data-readingmode="on"] .readingModeButton {
   background: rgb(42, 70, 10);
}

#glossaryPage .overlayButton {
   width: 218px;
}

#glossaryPage[data-debug="on"] .glossaryDebugButton {
   background: rgb(16, 73, 16);
}

#glossaryPage[data-debug="off"] .glossaryDebugButton {
   background: rgb(51, 3, 3);
}

#glossaryPage .overlayButton {}

#glossaryPage[data-overlaybutton="partial"] .overlayButton {
   background: rgb(49, 50, 5);
}

#glossaryPage[data-overlaybutton="off"] .overlayButton {
   background: rgb(47, 26, 17);
}

#glossaryPage[data-overlaybutton="hiddenAndActive"] .overlayButton {
   background: rgb(4, 73, 72);
}

.glossaryTitle {
   background: black;
   text-align: left;
   font-size: 18px;
   height: 40px;
   line-height: 30px;
   border-bottom: 1px solid rgba(105, 105, 105, 0.15);
   position: relative;
   width: 100%;
   padding-left: 22px;
}

#afoList {
   display: none;
}

#glossaryPage.modulePage .glossaryTitle {
   background: rgb(1, 1, 1);
   height: 50px;
   line-height: 50px;
}

.glossaryTitleText {
   display: none;
   margin-top: 5px;
}

#glossaryPage.modulePage .glossaryFilterSection,
#glossaryPage.modulePage .glossaryTitleText {
   display: none;
}

.moduleTitleText {
   display: inline-block;
   color: rgb(172, 219, 237);
   margin-top: 5px;
   max-width: calc(100% - 76px);
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
}

.toggleAdminGlossaryBar {
   position: absolute;
   left: 600px;
   top: 0px;
   height: 15px;
   line-height: 15px;
   font-size: 13px;
   color: rgb(192, 255, 235);
   opacity: 0.4;
   cursor: pointer;
}

.groupContentsDebug,
.loadAllGifsExplanation,
.afterProhaws,
#adminOrNormalMessage,
.toggleAdminGlossaryBar,
.selectEnableOptions {
   display: none;
}

#glossaryPage[data-newadmininfo="on"] .groupContentsDebug,
#glossaryPage[data-newadmininfo="on"] .loadAllGifsExplanation,
#glossaryPage[data-newadmininfo="on"] .afterProhaws,
#glossaryPage[data-newadmininfo="on"] #adminOrNormalMessage,
#glossaryPage[data-newadmininfo="on"] .toggleAdminGlossaryBar {
   display: block;
}

#glossaryPage[data-newadmininfo="on"] .selectEnableOptions {
   display: inline-block;
}

.linkToMainGlossary {
   display: inline-block;
   position: absolute;
   top: 5px;
   right: 15px;
   font-size: 14px;
   text-decoration: underline;
   color: rgb(145, 193, 209);
}

.page-id-20 #page[data-width="showingConsoles"] #glossarySearchResults {
   display: none;
}

.page-id-20 .linkToMainGlossary {
   display: none;
}

.linkToMainGlossary a {
   color: rgb(145, 193, 209);
   display: none;
}

.glossaryOptionsTitle {
   display: inline-block;
   opacity: 0.8;
   cursor: pointer;
   height: 31px;
}

.glossaryTitlePartial {
   display: none;
}

.glossaryTitleFull {
   display: inline-block;
}

#glossaryOptionsSection {
   position: absolute;
   background: none;
   border: none;
   font-size: 12px;
   top: 5px;
   color: rgb(117, 143, 149);
   opacity: 1;
   left: 15px;
   line-height: 21px;
   cursor: default;
   height: 64px;
   width: calc(100% - 300px);
   padding-top: 3px;
   white-space: nowrap;
}

#page[data-width="showingConsoles"] #glossaryOptionsSection {
   width: 90%;
}

.glossaryToggleAdminInfo {
   background: rgb(70, 57, 14);
   position: absolute;
   color: white;
   padding: 8px;
   right: 7px;
   cursor: pointer;
   top: 2px;
   opacity: 0.4;
}

#page[data-recordingready="yes"] .glossaryToggleAdminInfo {
   display: none;
}

#glossaryPage[data-newadmininfo="on"] .glossaryToggleAdminInfo {
   background: rgb(4, 48, 4);
}

#glossaryPage[data-newadmininfo="off"] .glossaryToggleAdminInfo {
   background: rgba(69, 6, 6, 0.5);
}

.glossaryOptionsTitle,
#overlayOnPauseSection,
#playbackSpeedSection {
   vertical-align: top;
}

#actualGlossaryOptions {
   display: inline-block;
   width: calc(100% - 107px);
   margin-left: 6px;
   height: 55px;
   overflow: hidden;
   position: relative;
   white-space: normal;
}

#glossaryPageReminderToggle,
#glossaryRecordingToggle {
   background: blue;
   position: fixed;
   bottom: 50px;
   z-index: 44;
   padding: 9px;
   cursor: pointer;
   left: unset;
   right: 0px;
}

#glossaryRecordingToggle {
   opacity: 0.1;
}

#glossaryPageReminderToggle {
   left: 400px;
   background: rgb(8, 8, 115);
}

#page[data-glossaryrecordingstatus="off"] #glossaryPageReminderToggle {
   display: none;
}

#glossaryRecordingToggle .recordingOn {
   display: none;
}

#page[data-glossaryrecordingstatus="on"] #glossaryRecordingToggle {
   background: rgb(2, 34, 2);
}

#page[data-glossaryrecordingstatus="off"] #glossaryRecordingToggle {
   background: rgb(33, 8, 8);
}

#page[data-recordingready="yes"] #glossaryRecordingToggle {
   display: none;
}

#page[data-glossaryrecordingstatus="on"] #glossaryRecordingToggle .recordingOn {
   display: inline-block;
}

#page[data-glossaryrecordingstatus="on"] #glossaryRecordingToggle .recordingOff {
   display: none;
}

#page[data-glossaryrecordingstatus="off"] #glossaryRecordingToggle .recordingOff {
   display: inline-block;
}

#page[data-glossaryrecordingstatus="off"] #glossaryRecordingToggle .recordingOn {
   display: none;
}

.glossaryPageTypeDisplay {
   position: absolute;
   top: 0px;
   right: 30px;
   color: rgb(158, 158, 35);
}

.glossaryPageTypeDisplay.summary {
   color: rgb(169, 131, 177);
}

#glossaryVideoLocation,
#glossaryElementDisplaySection,
#overlayOnPauseSection,
#playbackSpeedSection {
   display: none;
   margin-right: 15px;
   height: 25px;
   line-height: 20px;
   margin-bottom: 5px;
   white-space: nowrap;
}

.glossaryElementContainer {
   display: none;
   position: relative;
}

#glossaryVideoLocation,
#playbackSpeedSection,
.featureSummaryDisplayStatus,
#overlayOnPauseSection,
.glossaryElementContainer {}

.featureSummaryDisplayStatus {
   display: inline-block;
   cursor: pointer;
   position: relative;
}

#playbackSpeedSection {
   cursor: default;
}

.featureSummaryDisplayStatus[data-type="videos"] {
   width: 120px;
}

.featureSummaryDisplayStatus[data-type="features"] {
   width: 170px;
}

.glossaryElementContainer .thisOptionCover {
   position: absolute;
   top: 0px;
   left: 0px;
   background: rgb(0, 0, 0);
   width: 100%;
   height: 100%;
   z-index: 4;
   font-size: 0px;
   opacity: 0.6;
   display: none;
}

#glossaryPage[data-features="hidden"] .thisOptionCover.videos,
#glossaryPage[data-videos="hidden"] .thisOptionCover.features {
   display: block;
   cursor: default;
}

#allGlossaryGroups[data-videolocation="left"] {}

#allGlossaryGroups[data-videolocation="right"] {}

#allGlossaryGroups[data-videolocation="bottom"] {}

#allGlossaryGroups[data-videolocation="top"] {}

#allGlossaryGroups[data-videolocation="bottom"] .singleGroupContentEntry,
#allGlossaryGroups[data-videolocation="left"] .singleGroupContentEntry {}

#allGlossaryGroups[data-videolocation="top"] .singleGroupContentEntry,
#allGlossaryGroups[data-videolocation="right"] .singleGroupContentEntry {}

.modulePageExplanation.leftLoc {}

.modulePageExplanation.rightLoc {}

#allGlossaryGroups[data-videolocation="top"] .modulePageExplanation.leftLoc,
#allGlossaryGroups[data-videolocation="left"] .modulePageExplanation.leftLoc,
#allGlossaryGroups[data-videolocation="top"] .singleGroupContentEntry.leftLoc,
#allGlossaryGroups[data-videolocation="left"] .singleGroupContentEntry.leftLoc {
   display: none !important;
}

#allGlossaryGroups[data-videolocation="bottom"] .modulePageExplanation.rightLoc,
#allGlossaryGroups[data-videolocation="right"] .modulePageExplanation.rightLoc,
#allGlossaryGroups[data-videolocation="bottom"] .singleGroupContentEntry.rightLoc,
#allGlossaryGroups[data-videolocation="right"] .singleGroupContentEntry.rightLoc {
   display: none !important;
}

#allGlossaryGroups[data-videolocation="top"] .modulePageExplanation,
#allGlossaryGroups[data-videolocation="top"] .modulePageMainVideo,
#allGlossaryGroups[data-videolocation="bottom"] .modulePageExplanation,
#allGlossaryGroups[data-videolocation="bottom"] .modulePageMainVideo,
#allGlossaryGroups[data-videolocation="top"] .singleGroupContentEntry,
#allGlossaryGroups[data-videolocation="bottom"] .singleGroupContentEntry {
   width: 100% !important;
   max-width: 1000px !important;
}

#allGlossaryGroups[data-videolocation="top"] .modulePageMainVideo,
#allGlossaryGroups[data-videolocation="bottom"] .modulePageMainVideo,
#allGlossaryGroups[data-videolocation="top"] .singleGroupContentEntry[data-type="spaceForPicture"],
#allGlossaryGroups[data-videolocation="bottom"] .singleGroupContentEntry[data-type="spaceForPicture"] {
   max-width: 1000px !important;
}

.newExplanation.rightLoc {}

.newExplanation.leftLoc {}

#overlayOnPauseSection {
   cursor: pointer;
}

.playbackSpeedTitle {
   display: inline-block;
   line-height: 23px;
   position: relative;
   vertical-align: top;
}

.overlayOnPauseOff {
   display: none;
}

#page[data-overlayonpause="off"] .overlayOnPauseOff {
   display: inline-block;
}

#page[data-overlayonpause="off"] .overlayOnPauseOn {
   display: none;
}

#page[data-overlayonpause="off"] .plyr--paused .plyr__control--overlaid,
#page[data-overlayonpause="off"] .plyr--paused .plyr__controls>div,
#page[data-overlayonpause="off"] .plyr--paused .plyr__controls button[data-plyr="fullscreen"],
#page[data-overlayonpause="off"] .plyr--paused .oneVideoTitle {
   visibility: hidden !important;
}

#page[data-overlayonpause="off"] .oneVideoTitle {
   background: none;
}

#page[data-overlayonpause="off"] .plyr--stopped .plyr__control--overlaid,
#page[data-overlayonpause="off"] .plyr--stopped .plyr__controls>div,
#page[data-overlayonpause="off"] .plyr--stopped .plyr__controls button[data-plyr="fullscreen"] {
   visibility: visible;
}

#page[data-overlayonpause="off"] #theGlossary {
   border: 1px solid rgb(131, 66, 59);
}

#page[data-overlayonpause="on"] #theGlossary {}

#page[data-recordingready="on"] #theGlossary {
   height: 58%;
}

#page[data-glossaryrecordingstatus="on"] #allGlossaryGroups {
   height: 647px;
}

#page #theGlossary[data-fullwidthpicture="true"] {
   border: 3px solid rgb(140, 91, 126);
}

.glossaryFilteredDisplay {
   font-style: oblique;
   color: rgb(139, 167, 183);
   display: none;
}

.categoryTotals {
   position: absolute;
   right: 30px;
   bottom: 37px;
   border: 1px solid rgb(0, 0, 0);
   background: rgb(9, 46, 68);
   padding: 9px;
   width: 90px;
   color: lightgray;
   display: none;
}

.taskChainSearchOriginal {
   color: orange;
}

.taskChainSearchMeta {
   color: cyan;
}

.taskChainRow {
   color: yellow;
}

.taskOrChainSearchResult {
   background: black;
   border: 1px solid rgb(69, 69, 69);
   margin-bottom: 8px;
   padding: 3px;
   color: lightgray;
}

#outlineCreator .taskOrChainSearchResult {
   border: 1px solid rgb(41, 41, 41);
}

#outlineCreator .taskOrChainSearchResult {
   color: inherit;
}

#glossaryPage[data-readingmode="on"] .categoryTotals {
   border: 2px solid rgb(0, 173, 255);
   height: 30px;
   line-height: 30px;
   overflow: hidden;
   text-align: center;
   padding: 0px;
   bottom: 40px;
   display: none;
}

.mainGlossarySearchButtonsRow,
.glossaryFilterSection {
   background: rgba(105, 105, 105, 0.11);
   position: absolute;
   right: 60px;
   top: 0px;
   height: 30px;
   overflow: hidden;
   font-size: 15px;
   padding-top: 2px;
   margin-top: 5px;
   opacity: 0.8;
}

.mainGlossarySearchButtonsRow {
   padding: 0px 8px;
   opacity: 0.8;
}

#page[data-width="showingConsoles"] .mainGlossarySearchButtonsRow {
   max-width: 400px;
   border: 1px solid rgba(149, 226, 235, 0.22);
}

.glossarySearchToggle,
.glossarySidebarToggle {
   position: absolute;
   right: 8px;
   top: 4px;
   cursor: pointer;
   transition: color 0.3s ease 0s;
}

.glossarySearchToggle {
   right: 35px;
   display: none;
}

#theGlossary[data-sidebar="on"] .glossarySidebarToggle {
   color: rgb(175, 223, 249);
}

.glossarySearchToggle,
#theGlossary[data-sidebar="off"] .glossarySidebarToggle {
   color: rgb(116, 115, 115);
}

.glossaryFilterSection {
   right: unset;
   left: 5px;
   background: black;
   opacity: 1;
   border: 1px solid yellow;
   display: none;
}

.glossaryFilterButton {
   background: rgb(38, 44, 52);
   border: 1px solid black;
   width: 56px;
   cursor: pointer;
}

.glossaryFilterText,
#glossaryFilterInput,
.glossaryFilterButton {
   border: 1px solid rgba(255, 215, 0, 0);
   vertical-align: top;
   height: 25px;
   line-height: 25px;
   overflow: hidden;
}

#allGlossaryGroups {
   height: calc(100% - 210px);
   overflow: hidden;
   border: 1px solid rgba(57, 61, 58, 0.26);
}

.readyToSearch {
   font-size: 18px;
   color: rgb(162, 188, 196);
}

.summaryGlossarySidebar,
.moduleGlossarySidebar,
.currentModuleType,
.currentSummaryType,
.currentGlossaryType {
   border: 2px solid black;
   position: relative;
   min-height: 70px;
   background: rgba(4, 4, 41, 0.67);
   margin-bottom: 0px;
   display: inline-block;
}

.combinedGlossarySidebar,
.mainGlossarySidebar,
.moduleGlossarySidebar,
.summaryGlossarySidebar {
   display: none;
   height: 99%;
}

#theGlossary[data-type="combined"] .combinedGlossarySidebar,
#theGlossary[data-type="module"] .moduleGlossarySidebar,
#theGlossary[data-type="summary"] .summaryGlossarySidebar,
#theGlossary[data-type="glossary"] .mainGlossarySidebar {
   display: block;
}

.moduleGlossarySidebar {
   border: 6px solid green;
}

.combinedGlossarySidebar {}

#glossaryGroupsSidebar {
   width: 350px;
   display: none;
}

.glossaryGroupsSidebarTitle {
   background: black;
   position: absolute;
   bottom: 0px;
   right: 0px;
   padding: 5px;
   display: none;
}

.glossaryClickablePages {
   height: 100%;
   overflow-y: auto;
}

.clickableGlossaryPageButton {
   cursor: pointer;
   background: rgb(38, 52, 80);
   margin-bottom: 9px;
   border: 1px solid black;
   text-align: center;
}

.clickableGlossaryPageButton[data-active="yes"] {
   background: black;
   color: rgb(193, 195, 114);
   border: 1px solid rgb(120, 125, 41);
}

.modulePageStartInfo {
   display: none;
}

.someGroupLower {
   border: 1px solid lightblue;
   margin: 4px;
   padding: 8px;
   display: inline-block;
   background: black;
}

#allModulePagesTest {
   background: rgb(52, 47, 54);
   display: none;
}

#allSummaryPagesTest {
   min-height: 300px;
   border: 3px solid blue;
   background: rgb(7, 57, 45);
   display: none;
}

.modulePageLinks {
   background: rgb(14, 14, 15);
   color: rgb(152, 230, 255);
   padding: 15px;
   display: none;
}

.modulePageLinks a {
   color: rgb(40, 186, 228);
}

.oneModulePage {
   border: 3px solid black;
   margin: 15px;
   padding: 15px;
   background: rgb(30, 9, 59);
}

.oneModulePageLine {
   margin: 8px;
   padding: 8px;
   background: rgb(8, 8, 47);
}

.mySummaryPageLink {
   background: black;
   padding: 5px 5px 5px 20px;
}

.mySummaryPageLink a {
   color: rgb(183, 127, 84);
}

#allSummaryPagesTest .oneModulePageLine[data-type="link"] {
   background: rgb(121, 75, 75);
}

.oneModulePageLine[data-key="featurePageTitle"] {
   padding-left: 50px;
   background: rgb(46, 6, 42);
}

.oneModulePageLine:nth-child(2n+1) {
   color: rgb(115, 180, 213);
   background: black;
}

#allSummaryPagesTest .oneModulePageLine[data-filemeta="found_vid"],
.oneModulePageLine[data-filemeta="found_vid"] {
   background: rgb(5, 35, 24);
   color: white;
}

.oneModulePageLine[data-status="not_ready"] {
   background: rgb(38, 7, 7);
   color: rgb(231, 217, 217);
}

.aceInputTitle {
   position: relative;
   background: black;
   display: inline-block;
   width: 272px;
   overflow: hidden;
   vertical-align: top;
}

#functionMessageSection {
   width: 75%;
   border: 1px solid rgb(64, 64, 62);
   background: black;
   color: rgb(136, 199, 224);
   text-align: center;
   opacity: 0.4;
   transition: opacity 0.3s ease 0s;
   margin-left: 10%;
}

#functionOutputButonsRow {
   position: relative;
}

.functionOutputExportColumn {
   position: absolute;
   top: 11px;
   right: 7px;
   font-size: 16px;
}

#functionFactoryInputArea .functionOutputExportColumn {
   top: 40px;
}

.functionOutputButton {
   cursor: pointer;
   color: rgb(178, 186, 186);
   opacity: 0.6;
   transition: opacity 0.3s ease 0s;
}

.functionOutputButton:hover {
   opacity: 1;
}

.functionOutputButton {
   margin-bottom: 15px;
}

.copyFunctionOutputContents {
   color: rgb(190, 190, 190);
   opacity: 0.7;
   transition: opacity 0.4s ease 0s;
   cursor: pointer;
   position: absolute;
   right: 5px;
   top: 0px;
}

.copyFunctionOutputContents:hover {
   opacity: 1;
}

.functionFactoryInfo {
   border: 2px solid yellow;
   width: 50%;
   background: rgb(10, 38, 4);
   padding: 12px;
   display: none;
}

.createFunctionButton,
.functionInputSectionToggle,
.newFunctionCommentEndArea {
   background: rgb(15, 66, 17);
   display: inline-block;
   height: 18px;
   line-height: 18px;
   margin-right: 30px;
   padding: 0px 5px;
   cursor: pointer;
   color: lightgray;
   vertical-align: top;
}

#page .createFunctionButton[data-currentfunctiontype="javascript"],
#page .createFunctionButton[data-currentfunctiontype="php"],
#page .createFunctionButton[data-currentfunctiontype="wordpress"],
#page .createFunctionButton[data-currentfunctiontype="jquery"] {
   display: none;
}

.newFunctionCommentEndArea {
   background: rgb(19, 35, 56);
   font-size: 13px;
   margin-right: 0px;
   position: absolute;
   right: 10px;
   width: 140px;
   text-align: center;
   opacity: 0.7;
}

.commentEndFirstPart,
.commentEndSecondPart {
   display: inline-block;
}

.commentEndFirstPart {
   width: 100px;
}

.commentEndSecondPart {
   width: 30px;
}

.functionInputSectionToggle {
   background: rgb(29, 27, 27);
   color: rgb(165, 163, 163);
}

.createFunctionButton.createInsert {
   background: rgb(32, 71, 84);
}

#previewPage .createFunctionButton.createInsert {
   display: none;
}

.createFunctionToClipboard {
   background: rgb(0, 45, 100);
}

.functionCreationBody {
   border: 1px solid rgb(43, 43, 43);
   position: relative;
}

.functionCreationBodyInner {
   background: rgb(31, 34, 62);
}

.functionBodyInnerTitle {
   background: black;
   height: 40px;
   line-height: 40px;
   text-align: center;
   font-size: 20px;
   position: relative;
}

#page[data-width="showingConsoles"] .functionBodyInnerTitle {
   text-align: left;
   padding-left: 25px;
}

.functionFactorySetDefaultButton,
.functionTypeToggleTitlePosition,
.hideAndShowFactoriesButton,
.factoriesAutoString {
   position: absolute;
   font-size: 14px;
   transition: opacity 0.3s ease 0s;
   cursor: pointer;
   background: rgb(30, 41, 119);
   opacity: 0.6;
   height: 24px;
   line-height: 24px;
   top: 8px;
   right: 120px;
   width: 80px;
   text-align: center;
}

.factoriesAutoString {
   right: 300px;
   width: 115px;
   background: rgb(2, 43, 2);
}

.factoriesAutoString[data-state="off"] {
   background: rgb(47, 1, 1);
}

.functionFactorySetDefaultButton.toggleStatuses {
   display: none;
}

#functionFactoryPageInner[data-factory="wordpress"] .functionFactorySetDefaultButton,
#functionFactoryPageInner[data-factory="php"] .functionFactorySetDefaultButton,
#functionFactoryPageInner[data-factory="jquery"] .functionFactorySetDefaultButton,
#functionFactoryPageInner[data-factory="javascript"] .functionFactorySetDefaultButton {
   display: none;
}

#functionFactoryPageInner[data-factory="wordpress"] .functionFactorySetDefaultButton.toggleStatuses,
#functionFactoryPageInner[data-factory="php"] .functionFactorySetDefaultButton.toggleStatuses,
#functionFactoryPageInner[data-factory="jquery"] .functionFactorySetDefaultButton.toggleStatuses,
#functionFactoryPageInner[data-factory="javascript"] .functionFactorySetDefaultButton.toggleStatuses {
   display: block;
   width: unset;
   padding: 0px 5px;
}

.functionTitleTempMessage {
   position: absolute;
   transition: all 0.4s ease 0s;
   color: rgb(221, 191, 198);
   top: 3px;
   left: 5px;
   font-size: 11px;
   display: none;
}

.functionTypeToggleTitlePosition,
.hideAndShowFactoriesButton {
   right: 10px;
   background: rgb(37, 63, 122);
}

.hideAndShowFactoriesButton {
   right: unset;
   left: 20px;
   background: rgb(60, 29, 67);
   width: unset;
   opacity: 0.2;
   padding: 0px 7px;
}

#page[data-width="showingConsoles"] .hideAndShowFactoriesButton {
   left: unset;
   right: 330px;
   opacity: 0.7;
}

#page[data-width="showingConsoles"] .factoriesAutoString {
   left: unset;
   right: 530px;
   opacity: 0.7;
}

.functionFactorySetDefaultButton:hover,
.functionTypeToggleTitlePosition:hover {
   opacity: 1;
}

.hideAndShowFactoriesButton:hover {
   opacity: 0.7;
}

.functionTypeDisplay {
   position: absolute;
   left: 21px;
   font-size: 14.1px;
   display: none;
   background: rgb(108, 0, 128);
   opacity: 1;
   top: 28px;
   height: 23px;
   line-height: 20px;
}

#page[data-functionfactorydebug="on"] .functionTypeDisplay {
   display: block;
}

.functionShowCopiedMessage {
   border: 0px solid yellow;
   display: inline-block;
   color: rgb(194, 198, 199);
   opacity: 0;
   transition: opacity 0.4s ease 0s;
}

.functionTypeButtons {
   background: rgb(28, 34, 55);
   border: 1px solid black;
   position: relative;
   right: 0px;
   bottom: 0px;
   width: 100%;
}

#functionFactoryPageInner[data-debug="on"] .functionTypeButtons {
   background: rgb(149, 130, 154);
}

#ffSettingsOverlay {
   background: rgba(16, 17, 17, 0.7);
   position: absolute;
   top: 0px;
   left: 0px;
   width: 100%;
   height: 100%;
   z-index: 13;
   display: none;
}

#functionFactorySettings,
#hidingFactories {
   margin-top: 80px;
   position: relative;
   border: 2px solid rgb(40, 39, 40);
   background: rgb(15, 14, 44);
   z-index: 13;
   width: 60%;
   min-width: 500px;
   max-width: 512px;
   font-size: 14px;
   display: inline-block;
   vertical-align: top;
   margin-left: 75px;
}

#ffSettingsOverlay[data-hideshowstatus="on"] #functionFactorySettings {}

#hidingFactories {
   position: fixed;
   border: 2px solid rgb(0, 0, 0);
   top: unset;
   width: 407px;
   z-index: 13;
   background: rgb(13, 13, 14);
   min-width: unset;
   margin-left: 20px;
   max-width: unset;
   display: none;
}

#hidingFactoriesContainer {
   position: relative;
   height: 100%;
   display: inline-block;
   vertical-align: top;
}

#factoryTogglesButtonsRow {
   padding: 11px;
   background: rgb(13, 13, 14);
}

#hidingFactories .hidingFactoriesTitle {
   height: 30px;
   line-height: 30px;
   text-align: center;
   color: lightgray;
   background: black;
   position: relative;
}

.hidingFactoriesCloseButton {
   position: absolute;
   top: 0px;
   right: 12px;
   cursor: pointer;
}

#hidingFactories .hidingFactoriesInnerTitle {
   height: 29px;
   line-height: 29px;
   text-align: center;
   color: white;
   background: rgb(67, 63, 88);
}

#allFactoryToggles {
   position: relative;
   height: 80%;
   width: 100%;
   background: rgb(18, 18, 18);
   overflow-y: auto;
   padding-bottom: 15px;
}

#hidingFactories .hidingFactoriesInner {
   height: calc(100% - 32px);
   width: 100%;
   position: relative;
   overflow: hidden;
}

#hidingFactories .oneFactoryToggleLine {
   background: rgb(13, 13, 14);
   color: lightgray;
   padding: 10px;
   display: inline-block;
   width: 200px;
   border: 1px solid rgba(134, 138, 138, 0.11);
   min-width: 200px;
}

#hidingFactories .hidingFactoriesLabel {
   background: black;
   color: lightgray;
   padding: 8px;
   position: absolute;
   bottom: 0px;
   right: 0px;
   display: none;
}

#hidingFactories .hidingFactoriesLabel.toggles {
   bottom: 0px;
   background: rgb(1, 47, 65);
}

#hidingFactories .factoryToggleHideOrShow {
   background: darkblue;
   display: inline-block;
   border: 1px solid rgba(71, 71, 71, 0.17);
   cursor: pointer;
   padding: 0px 8px;
}

#hidingFactories .factoryToggleHideOrShow[data-status="shown"] {
   background: rgb(4, 29, 4);
}

#hidingFactories .factoryToggleHideOrShow[data-status="hidden"] {
   background: rgb(48, 5, 5);
}

#hidingFactories .factoryToggleTitle {
   width: 108px;
   display: inline-block;
}

#hidingFactories .factoryHideShowSave {
   background: rgb(63, 64, 99);
   padding: 6px 15px;
   cursor: pointer;
   display: inline-block;
}

#hidingFactories .factoryHideShowSave.pack {
   background: blue;
   margin-left: 30px;
}

.functionHideShowModifiedStatus {
   background: rgb(30, 54, 42);
   display: inline-block;
   color: rgb(210, 196, 196);
   white-space: nowrap;
   font-size: 10px;
   padding: 2px;
   opacity: 0.5;
}

.functionHideShowModifiedStatus[data-status="modified"] {
   background: rgb(66, 52, 52);
}

.functionStringOverlay,
.printFormatHelpOverlay,
.enableFormatsOverlay {
   background: rgba(65, 75, 80, 0.82);
   position: fixed;
   top: 0px;
   left: 0px;
   height: 100%;
   width: 100%;
   z-index: 333333;
   color: lightgray;
   display: none;
}

#page[data-width="showingConsoles"] .functionStringHelpDialog,
#page[data-width="showingConsoles"] .printFormatHelpDialog,
#page[data-width="showingConsoles"] .enableFormatsPerLanguage {
   left: 0px;
   margin-left: 0px;
   width: 35%;
   border: 4px solid gold;
}

.printFormatHelpOverlay {}

.enableFormatsOverlay {}

.funcionFactorySettingsTitle {
   background: black;
   text-align: center;
   height: 30px;
   line-height: 30px;
   border-bottom: 1px solid rgb(64, 64, 64);
}

.hideFunctionFactorySettings {
   color: rgb(177, 177, 177);
   cursor: pointer;
   position: absolute;
   top: 1px;
   right: 8px;
}

.functionFactorySettingsTitle {
   background: black;
   height: 30px;
   line-height: 30px;
   position: relative;
   text-align: center;
}

#page #functionFactorySettings .functionConsoleSettingsLine select {
   border: 1px solid rgba(85, 83, 83, 0.74);
   outline: none;
   background: rgb(6, 5, 38);
}

.functionConsoleSettingsLine {
   margin: 12px;
   padding: 3px;
   background: rgb(32, 39, 78);
   color: lightgray;
   height: 42px;
   position: relative;
}

.functionConsoleSettingsLine[data-meta="cleanOrModified"] {
   opacity: 0.4;
}

.functionConsoleSettingsModified {
   display: inline-block;
   background: rgb(3, 46, 3);
   color: lightgray;
   padding: 2px;
}

.functionConsoleSettingsModified[data-status="modified"] {
   background: rgb(37, 1, 1);
}

.hideShowFactoriesToggleButton {
   background: rgb(68, 27, 90);
   display: inline-block;
   padding: 8px;
   cursor: pointer;
}

.functionConsoleMeta {
   color: rgb(235, 235, 235);
   position: absolute;
   right: 0px;
   top: 9px;
   background: rgb(55, 5, 39);
   width: 294px;
   padding: 4px;
   display: none;
}

.functionConsoleSettingsLineInputArea {
   display: inline-block;
   margin-right: 8px;
}

.functionConsoleSettingsLineTitle {
   background: black;
   width: 262px;
   height: 28px;
   line-height: 28px;
   margin-top: 3px;
   margin-left: 3px;
   padding-left: 11px;
   display: inline-block;
   margin-right: 19px;
}

.functionConsoleSaveRow {
   height: 50px;
   text-align: center;
   margin-top: 5px;
   padding-top: 5px;
}

.functionConsoleSaveButton {
   background: rgb(19, 41, 88);
   display: inline-block;
   padding: 6px;
   border: 1px solid rgba(73, 72, 72, 0.74);
   cursor: pointer;
   color: rgb(213, 209, 209);
}

.csoCheckboxOption {
   display: inline-block;
   border: 1px solid rgba(89, 89, 88, 0.63);
   margin: 2px 8px 2px 2px;
   cursor: pointer;
   width: 55px;
   text-align: center;
   background: rgb(9, 21, 47);
   opacity: 0.4;
}

.csoCheckboxOption[data-active="true"] {
   opacity: 1;
}

.functionButtonsContainer {
   padding: 4px 14px 4px 4px;
}

#codeCreate .functionButtonsContainer {
   padding-right: 60px;
}

.functionButtonsContainer[data-scrolling="false"] {
   padding-right: 23px;
}

#page[data-functionfactorydebug="on"] .functionTypeButtons {
   margin-top: 42px;
}

.functionTypeTitle {
   background: rgb(44, 54, 90);
   height: 28px;
   line-height: 28px;
   text-align: center;
}

.functionConsoleDisplay {
   border: 8px solid pink;
   height: 300px;
   background: black;
}

.functionConsoleDisplayInner {
   height: 100px;
   background: navy;
   border: 3px solid cyan;
}

.functionTypeTitle.firstArea {
   position: relative;
   height: 40px;
   line-height: 40px;
   background: rgb(94, 78, 109);
   font-size: 20px;
   display: none;
}

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

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

.functionCreationTypeButton {
   background: rgb(2, 2, 18);
   margin: 6px;
   cursor: pointer;
   display: inline-block;
   width: 135px;
   padding-right: 13px;
   height: 28px;
   line-height: 28px;
   text-align: left;
   padding-left: 11px;
}

.functionCreationTypeButton[data-showstatus="hidden"] {
   display: none;
}

.functionCreationTypeButton {
   border: 1px solid rgb(15, 15, 15);
   position: relative;
}

.functionCreationTypeButton[data-type="javascript"],
.functionCreationTypeButton[data-type="jquery"],
.functionCreationTypeButton[data-type="wordpress"],
.functionCreationTypeButton[data-type="php"] {}

.functionCreationTypeButton.activeButton {
   background: rgb(10, 46, 83);
   border: 1px solid rgb(6, 90, 90);
}

.functionButtonShortcut,
.functionButtonPercentage {
   position: absolute;
   right: 2px;
   height: 20px;
   width: 20px;
   text-transform: capitalize;
   font-size: 10px;
   top: 3px;
   background: rgb(12, 26, 47);
   border: 1px solid rgb(3, 3, 3);
   line-height: 20px;
   color: lightgray;
   text-align: center;
}

.functionButtonPercentage {
   background: rgb(35, 6, 31);
   left: 2px;
   height: 20px;
   width: 20px;
   opacity: 0.2;
   padding-top: 3px;
   line-height: 13px;
}

.functionConsoleSection {
   padding: 8px;
}

#functionConsole {
   background: black;
   color: lightblue;
   border: 1px solid rgb(15, 71, 84);
   width: 80px;
}

.loadFactoryDefaults {
   background: rgb(30, 81, 17);
   display: none;
}

#page[data-functionfactorydebug="on"] .loadFactoryDefaults {
   display: block;
}

.functionCreationModule {
   background: rgb(11, 13, 17);
   border: 1px solid rgb(53, 53, 53);
   padding: 6px 2px 0px;
}

#page .functionCreationModule[data-thetype="wordpress"] {}

#page .functionCreationModule[data-thetype="jquery"] {}

#page .functionCreationModule[data-thetype="php"] {}

.functionInputTitle {
   display: none;
   background: rgb(50, 64, 68);
   width: 222px;
   text-align: left;
   padding-left: 8px;
   position: absolute;
   right: 27px;
   overflow: hidden;
   top: 82px;
}

#functionFactoryPageInner[data-debug="on"] .functionInputTitle {
   display: block;
}

#page[data-functionfactorydebug="off"] .functionConsoleSectionTitle {
   display: none;
}

#page[data-functionfactorydebug="on"] .functionInputTitle {
   display: inline-block;
}

.functionTypeToggle {
   position: absolute;
   right: 0px;
   background: rgb(32, 75, 77);
   border: 1px solid black;
   cursor: pointer;
   top: 3px;
   height: 23px;
   overflow: hidden;
   line-height: 23px;
   font-size: 14px;
   width: 62px;
   text-align: center;
}

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

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

.hy222 {
   border: 1px solid magenta;
   margin: 4px;
}

.functionCreationLines[data-type="switch"] .afterInput3 {
   position: absolute;
   top: 2px;
   left: 408px;
   width: 428px;
   min-height: 36px;
}

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

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

.functionConsoleSection {
   padding: 6px;
   display: inline-block;
}

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

.functionCreationBodyInner input,
.functionCreationBodyInner textarea {
   background: rgb(29, 27, 37);
   color: white;
   border: 1px solid rgb(103, 102, 102);
   width: 300px;
}

.oneFunctionCreationLine input {
   width: 200px;
   height: 24px;
   border: 1px solid rgba(61, 96, 126, 0);
   padding-left: 5px;
   color: lightgray;
   vertical-align: top;
}

#abc,
#def {
   border: 1px solid rgb(112, 118, 112);
   background: rgb(23, 20, 79);
   display: inline-block;
   width: 100px;
   min-height: 20px;
}

#page .functionStringHelp.cursorDefault {
   cursor: default;
}


.oneFunctionCreationLine input:focus,
#functionConsole:focus,
#page .factoryActiveBlueGlow {
   border: 1px solid rgba(72, 191, 210, 0.5);
   box-shadow: rgb(72, 191, 210) 0px 0px 15px;
}

.oneFunctionCreationLine input:disabled {
   background: rgb(23, 22, 22);
   color: rgb(82, 82, 82);
}

.createFunctionToggle {
   border: 1px solid black;
   background: rgb(22, 53, 111);
   display: inline-block;
   margin: 3px;
   cursor: pointer;
   opacity: 0.7;
   width: 34px;
   text-align: center;
}

.createFunctionToggle[data-disabled="yes"] {
   background: rgb(76, 77, 79);
   color: gray;
   cursor: default;
}

.commentLoopEnd .createFunctionToggle {
   width: 80px;
}

.functionSwitchButtonsRow .createFunctionToggle {}

.createFunctionToggle[data-active="active"] {
   border: 1px solid rgb(132, 164, 192);
   opacity: 1;
}

.if_create_function_toggle,
.switch_create_function_toggle {
   background: rgb(18, 41, 82);
}

.switch_break_function_toggle {}

.if_create_function_toggle[data-active="active"],
.switch_create_function_toggle[data-active="active"] {
   background: rgb(21, 45, 176);
}

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

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

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

.oneFunctionCreationLine .phpForeach,
.oneFunctionCreationLine .javascriptForeach,
.oneFunctionCreationLine .jqueryForeach,
.oneFunctionCreationLine .foreachTypeFormat {
   min-width: 120px;
}

.afterFunctionOptionsTitle {
   display: inline-block;
   width: 300px;
}

#allFactories {
   font-size: 14px;
}

#functionFactoryInputArea {
   border: 1px solid black;
   background: rgb(28, 34, 55);
   height: 200px;
   position: relative;
}

#functionFactoryInputArea[data-type="if"],
#functionFactoryInputArea[data-type="switch"] {
   display: none !important;
}

#functionFactoryOutputArea {
   position: relative;
}

.hello1 {
   text-align: center;
   padding-bottom: 10px;
}

#ff_vals_display {
   background: rgb(38, 38, 76);
   width: 432px;
   font-size: 20px;
   color: rgb(233, 228, 228);
   position: fixed;
   bottom: 0px;
   right: 0px;
   z-index: 33333333;
   display: none;
}

.ff_vals_display_title {
   background: black;
   padding: 8px;
}

.oneFFValLine {
   background: rgb(7, 24, 51);
   padding: 11px;
}

.oneFFValLine .myValue {
   border: 1px solid rgba(163, 154, 154, 0.31);
   display: inline-block;
   height: 29px;
   padding-right: 5px;
   background: black;
   padding-left: 5px;
   padding-bottom: 6px;
}

.oneFFValLine:nth-child(2n+1) {
   background: rgb(46, 49, 69);
   color: rgb(180, 206, 215);
}

.oneFunctionCreationLine {
   position: relative;
   padding-bottom: 8px;
   padding-left: 4px;
   border-bottom: 1px solid rgb(88, 96, 98);
   padding-top: 8px;
}

.oneFunctionCreationLine.keepShowing {
   display: block !important;
}

.oneFunctionCreationLine[data-theinput="jq_animate"] {
   display: none;
}

.functionCreationLines[data-type="jquery"],
.functionCreationLines[data-type="php"],
.functionCreationLines[data-type="wordpress"],
.functionCreationLines[data-type="javascript"] {
   max-height: 700px;
   overflow-y: auto;
   padding: 0px 10px;
   min-height: 30px;
   width: 94%;
   margin-left: 3%;
}

.functionCreationLines[data-type="jquery"]::-webkit-scrollbar-thumb,
.functionCreationLines[data-type="php"]::-webkit-scrollbar-thumb,
.functionCreationLines[data-type="wordpress"]::-webkit-scrollbar-thumb,
.functionCreationLines[data-type="javascript"]::-webkit-scrollbar-thumb {
   background: rgb(20, 51, 61);
   border-radius: 22px;
}

.functionCreationLines[data-type="jquery"]::-webkit-scrollbar-track,
.functionCreationLines[data-type="php"]::-webkit-scrollbar-track,
.functionCreationLines[data-type="wordpress"]::-webkit-scrollbar-track,
.functionCreationLines[data-type="javascript"]::-webkit-scrollbar-track {
   background: rgb(45, 45, 45);
}

.functionCreationLines[data-type="php"] {}

.functionCreationLines[data-type="wordpress"] {}

.functionCreationLines[data-type="wordpress"] .oneFunctionCreationLine:last-child {
   border-bottom: none;
}

.functionCreationLines[data-type="php"] .oneFunctionCreationLine:last-child {
   border-bottom: none;
}

.functionCreationLines[data-type="jquery"] .oneFunctionCreationLine:last-child {
   border-bottom: none;
}

.functionCreationLines[data-type="javascript"] .oneFunctionCreationLine:last-child {
   border-bottom: none;
}

.oneFunctionCreationLine[data-theinput="jq_empty"] #main_ff_input_jq_empty {
   display: none;
}

.inputBeforeLabelArea,
.pre_label_title,
.inputBeforeLabelArea .middleChar,
.inputBeforeLabelArea .afterChar,
.inputBeforeLabelArea .thisAreaCreateButton,
.inputBeforeLabelArea .thisAreaLabel {
   display: inline-block;
   vertical-align: top;
   height: 25px;
   border: none;
}

.inputBeforeLabelArea {
   height: unset;
   font-size: 0px;
   padding-bottom: 10px;
   width: 100%;
   padding-left: 5px;
   padding-top: 10px;
}

#entire_shortcuts[data-width="large"] .inputBeforeLabelArea {
   /* border: 1px solid green; */
   padding-right: 8px;
   background: rgb(18, 19, 38);
}

#entire_shortcuts[data-width="large"] .hideAndShowFactoriesButton {
   display: none;
}

#entire_shortcuts[data-width="large"] .functionBodyInnerTitle {
   text-align: left;
   padding-left: 15px;
}

#entire_shortcuts[data-width="large"] .inputBeforeLabelArea * {
   font-size: 15px !important;
}

#entire_shortcuts[data-width="large"] .inputBeforeLabelArea input {
   max-width: 102px !important;
}

#previewPage .inputBeforeLabelArea {
   /* border: 1px solid green; */
   padding-right: 8px;
   background: rgb(18, 19, 38);
}

#previewPage .hideAndShowFactoriesButton {
   display: none;
}

#previewPage .functionBodyInnerTitle {
   text-align: left;
   padding-left: 15px;
}

.inputBeforeLabelArea * {
   font-size: 15px !important;
}

.inputBeforeLabelArea input {
   max-width: 102px !important;
}



#functionFactoryPageInner[data-debug="on"] .inputBeforeLabelArea {
   padding: 40px 5px;
}

#functionFactoryPageInner[data-debug="on"] .inputBeforeLabelArea[data-mytype="javascript"] {
   background: rgba(45, 23, 11, 0.65);
}

.inputBeforeLabelTitle {
   position: absolute;
   background: rgb(0, 0, 0);
   bottom: 11px;
   left: 30px;
   z-index: 8;
   height: 30px;
   width: 174px;
   color: rgb(173, 173, 173);
   padding: 0px;
   border: 2px solid black;
   line-height: 30px;
   font-size: 14px;
   display: none;
}

.inputBeforeLabelArea[data-mytype="javascript"] .thisAreaAdminLabel {
   background: rgba(45, 23, 11, 0.83);
}

#functionFactoryPageInner[data-debug="on"] .inputBeforeLabelArea[data-mytype="jquery"] {
   background: rgba(30, 44, 8, 0.39);
}

.inputBeforeLabelArea[data-mytype="jquery"] .thisAreaAdminLabel {
   background: rgb(30, 44, 8);
}

#functionFactoryPageInner[data-debug="on"] .inputBeforeLabelArea[data-mytype="php"] {
   background: rgba(40, 11, 34, 0.6);
}

#page .inputBeforeLabelArea[data-completelevel="50"] {}

.inputBeforeLabelArea[data-mytype="php"] .thisAreaAdminLabel {
   background: rgb(40, 11, 34);
}

#functionFactoryPageInner[data-debug="on"] .inputBeforeLabelArea[data-mytype="wordpress"] {
   background: rgba(11, 14, 45, 0.62);
}

.inputBeforeLabelArea[data-mytype="wordpress"] .thisAreaAdminLabel {
   background: rgb(11, 13, 45);
}

.inputBeforeLabelArea .thisAreaCreateButton {
   background: rgb(1, 1, 29);
   cursor: pointer;
   padding: 0px 19px;
   font-size: 14px;
   border: 1px solid rgb(60, 70, 70);
   margin: 0px 15px;
}

.inputBeforeLabelArea .middleChar,
.inputBeforeLabelArea .afterChar {
   text-align: center;
   border: 1px solid rgba(255, 255, 255, 0.25);
}

.optionalTextBeforeInput,
.optionalTextAfterInput {
   display: inline-block;
   vertical-align: top;
   font-size: 18px;
   color: lightblue;
}


.oneFunctionCreationLine[data-theinput="js_is_empty"][data-getorset="get"] .optionalTextBeforeInput {
   display: none;
}

.ternaryQuestion,
.ternaryColon,
.ternaryInputs {
   margin: 0px 5px;
   display: inline-block;
   font-size: 18px;
   vertical-align: top;
}

.ternaryQuestion,
.ternaryColon {
   color: lightblue;
}

.theseAdditionalInputs {
   display: inline-block;
   vertical-align: top;
}

.oneFunctionCreationLine[data-theinput="js_array_push"][data-oneormultiple="one"] .theseAdditionalInputs,
.oneFunctionCreationLine[data-theinput="php_array_push"][data-oneormultiple="one"] .theseAdditionalInputs {
   display: none;
}

.oneFunctionCreationLine[data-theinput="js_sort_numbers"][data-includevar="no"] .optionalTextBeforeInput,
.oneFunctionCreationLine[data-theinput="js_sort"][data-includevar="no"] .optionalTextBeforeInput,
.oneFunctionCreationLine[data-theinput="js_reverse"][data-includevar="no"] .optionalTextBeforeInput,
.oneFunctionCreationLine[data-theinput="php_strval"][data-includevar="no"] .optionalTextBeforeInput,
.oneFunctionCreationLine[data-theinput="php_strtolower"][data-includevar="no"] .optionalTextBeforeInput,
.oneFunctionCreationLine[data-theinput="php_intval"][data-includevar="no"] .optionalTextBeforeInput,
.oneFunctionCreationLine[data-theinput="js_number"][data-includevar="no"] .optionalTextBeforeInput,
.oneFunctionCreationLine[data-theinput="js_parseint"][data-includevar="no"] .optionalTextBeforeInput,
.oneFunctionCreationLine[data-theinput="js_tostring"][data-includevar="no"] .optionalTextBeforeInput,
.oneFunctionCreationLine[data-theinput="js_toLowerCase"][data-includevar="no"] .optionalTextBeforeInput,
.oneFunctionCreationLine[data-theinput="php_replace"][data-includevar="no"] .optionalTextBeforeInput,
.oneFunctionCreationLine[data-theinput="js_replace_all"][data-includevar="no"] .optionalTextBeforeInput,
.oneFunctionCreationLine[data-theinput="js_replace"][data-includevar="no"] .optionalTextBeforeInput,
.oneFunctionCreationLine[data-theinput="js_substring"][data-includevar="no"] .optionalTextBeforeInput,
.oneFunctionCreationLine[data-theinput="php_substring"][data-includevar="no"] .optionalTextBeforeInput,
.oneFunctionCreationLine[data-theinput="js_typeof"][data-includevar="no"] .optionalTextBeforeInput,
.oneFunctionCreationLine[data-theinput="php_gettype"][data-includevar="no"] .optionalTextBeforeInput,
.oneFunctionCreationLine[data-theinput="jq_copyArray"][data-includevar="no"] .optionalTextBeforeInput,
.oneFunctionCreationLine[data-theinput="jq_copyObject"][data-includevar="no"] .optionalTextBeforeInput,
.oneFunctionCreationLine[data-theinput="js_undefined_test"][data-includevar="no"] .optionalTextBeforeInput,
.oneFunctionCreationLine[data-theinput="js_ternary"][data-includevar="no"] .optionalTextBeforeInput,
.oneFunctionCreationLine[data-theinput="php_ternary"][data-includevar="no"] .optionalTextBeforeInput,
.oneFunctionCreationLine[data-theinput="php_strpos"][data-includevar="no"] .optionalTextBeforeInput,
.oneFunctionCreationLine[data-theinput="js_indexOf"][data-includevar="no"] .optionalTextBeforeInput,
.oneFunctionCreationLine[data-theinput="wdp_getPostMeta"][data-includevar="no"] .optionalTextBeforeInput,
.oneFunctionCreationLine[data-theinput="wdp_getUserMeta"][data-includevar="no"] .optionalTextBeforeInput,
.oneFunctionCreationLine[data-theinput="php_strlen"][data-includevar="no"] .optionalTextBeforeInput,
.oneFunctionCreationLine[data-theinput="js_get_array_length"][data-includevar="no"] .optionalTextBeforeInput,
.oneFunctionCreationLine[data-theinput="php_get_array_length"][data-includevar="no"] .optionalTextBeforeInput {
   display: none;
}

.oneFunctionCreationLine[data-theinput="jq_attr"][data-getorset="get"] #third_ff_input_jq_attr,
.oneFunctionCreationLine[data-theinput="jq_attr"][data-getorset="get"] .secondMiddleChar,
.oneFunctionCreationLine[data-theinput="jq_css"][data-getorset="get"] #third_ff_input_jq_css,
.oneFunctionCreationLine[data-theinput="jq_css"][data-getorset="get"] .secondMiddleChar,
.oneFunctionCreationLine[data-theinput="jq_val"][data-getorset="get"] #main_ff_input_jq_val,
.oneFunctionCreationLine[data-theinput="jq_html"][data-getorset="get"] #main_ff_input_jq_html,
.oneFunctionCreationLine[data-theinput="jq_val"][data-getorset="set"] .optionalTextBeforeInput,
.oneFunctionCreationLine[data-theinput="jq_css"][data-getorset="set"] .optionalTextBeforeInput,
.oneFunctionCreationLine[data-theinput="jq_attr"][data-getorset="set"] .optionalTextBeforeInput,
.oneFunctionCreationLine[data-theinput="jq_html"][data-getorset="set"] .optionalTextBeforeInput,
.oneFunctionCreationLine[data-theinput="jq_slideToggle"][data-callbackorno="no"] .optionalTextAfterInput,
.oneFunctionCreationLine[data-theinput="jq_fadeToggle"][data-callbackorno="no"] .optionalTextAfterInput,
.oneFunctionCreationLine[data-theinput="jq_fadeIn"][data-callbackorno="no"] .optionalTextAfterInput,
.oneFunctionCreationLine[data-theinput="jq_fadeOut"][data-callbackorno="no"] .optionalTextAfterInput,
.oneFunctionCreationLine[data-theinput="jq_slideUp"][data-callbackorno="no"] .optionalTextAfterInput,
.oneFunctionCreationLine[data-theinput="jq_slideDown"][data-callbackorno="no"] .optionalTextAfterInput {
   display: none;
}

#page .inputBeforeLabelArea input {
   width: 129px;
   border: 1px solid rgba(83, 172, 173, 0.29);
   margin: 0px 3px;
}

#page #entire_shortcuts[data-above1500="yes"] .functionCreationLines[data-type="jquery"] input,
#page #entire_shortcuts[data-above1500="yes"].functionCreationLines[data-type="wordpress"] input,
#page #entire_shortcuts[data-above1500="yes"] .functionCreationLines[data-type="php"] input,
#page #entire_shortcuts[data-above1500="yes"] .functionCreationLines[data-type="javascript"] input {
   width: 131px;
   max-width: unset !important;
   /* border: 1px solid #00ffffad; */
}



#entire_shortcuts[data-above1150="no"] .inputBeforeLabelArea[data-hastoggle="yes"] {
   padding-top: 52px;
}

#main_ff_input_js_sort,
#main_ff_input_js_sort_numbers,
#main_ff_input_js_reverse,
#main_ff_input_js_ternary,
#main_ff_input_php_ternary,
#before_label_php_strlen,
#before_label_js_parseint,
#before_label_js_number,
#before_label_php_strtolower,
#before_label_php_intval,
#before_label_php_strval,
#main_ff_input_js_tostring,
#main_ff_input_js_toLowerCase,
#main_ff_input_jq_toggle,
#main_ff_input_js_typeof,
#main_ff_input_php_gettype,
#main_ff_input_jq_copyArray,
#main_ff_input_jq_copyObject,
#main_ff_input_js_undefined_test,
#main_ff_input_jq_show,
#main_ff_input_jq_hide {
   display: none;
}

#main_ff_input_js_is_empty,
#main_ff_input_jq_getval,
#main_ff_input_jq_get_html,
#before_label_wdp_template_uri,
#main_ff_input_wdp_template_uri,
#before_label_wdp_stylesheet_uri,
#main_ff_input_wdp_stylesheet_uri,
#main_ff_input_wdp_plugin_uri,
#before_label_wdp_get_user_id,
#main_ff_input_wdp_get_user_id,
#main_ff_input_wdp_get_user_login,
#main_ff_input_wdp_get_user_id_by_login,
#before_label_wdp_get_post_id,
#main_ff_input_wdp_get_post_id,
#before_label_wdp_get_page_id,
#main_ff_input_wdp_get_page_id,
#main_ff_input_js_get_array_length,
#before_label_php_get_array_length {
   display: none;
}

.thisAreaInputType,
.thisAreaAdminLabel {
   background: rgb(22, 69, 102);
   position: relative;
   color: lightgray;
   padding: 0px 4px;
   cursor: default;
   width: 164px;
   text-align: center;
   display: inline-block;
   font-size: 14px;
}

.inputBeforeLabelArea .commonFuncComment {
   background: rgb(2, 1, 21);
   color: rgb(159, 177, 188);
   position: absolute;
   right: 0px;
   font-size: 15px;
   top: 41px;
   padding: 0px;
   display: none;
}

.inputBeforeLabelArea .commonFuncComment[data-comment="this_is_unset"] {
   background: rgb(111, 69, 110);
}

.thisAreaInputType {
   margin-right: 17px;
}

.dollarLeft,
.justRight,
.inputBeforeLabelArea .middleChar,
.inputBeforeLabelArea .afterChar,
.inputBeforeLabelArea .thisAreaLabel,
.inputBeforeLabelArea .ff_pre_label {
   display: inline-block;
   font-size: 18px;
   color: lightblue;
   border: none;
}

.oneFunctionCreationLine[data-theinput="js_typeof"] .ff_pre_label,
.oneFunctionCreationLine[data-theinput="php_gettype"] .ff_pre_label,
.oneFunctionCreationLine[data-theinput="js_ternary"] .thisAreaLabel,
.oneFunctionCreationLine[data-theinput="php_ternary"] .thisAreaLabel {
   padding: 0px 5px;
}

.thisAreaLabel.help {
   margin-left: 8px;
   font-size: 13px;
   position: relative;
   margin-top: 2px;
}

.oneFunctionCreationLine[data-theinput="js_sort_numbers"] .thisAreaLabel.help,
.oneFunctionCreationLine[data-theinput="js_sort"] .thisAreaLabel.help {
   margin-top: 0px;
}

.middleChar.equals {
   margin: 0px 8px;
}

.oneFunctionCreationLine[data-theinput="jq_getval"] .middleChar.equals {
   margin: 0px 6px;
}

.thisAreaAdminLabel {
   background: rgb(7, 7, 44);
   position: absolute;
   right: 31px;
   top: 10px;
   height: 25px;
   line-height: 25px;
   padding: 0px 8px;
   width: 200px;
   border: 1px solid rgba(0, 255, 220, 0.35);
   display: none;
}

.thisAreaAdminLabel.basicName {}

.newJQshowToggles {
   display: inline-block;
   background: rgb(43, 72, 59);
   padding: 6px;
   cursor: pointer;
}

.newJQshowToggles.debugToggle[data-debug="on"] {
   background: rgb(62, 3, 3);
}

.newJQshowToggles.debugToggle[data-debug="off"] {
   background: rgb(34, 78, 101);
}

#toggleFilters {
   background: rgb(84, 51, 77);
   padding: 5px 15px;
   border: 1px solid black;
}

.ff_myToggle,
.myToggleVarFull {
   position: absolute;
   right: 30px;
   font-size: 15px;
   cursor: pointer;
   opacity: 1;
   background: rgb(7, 44, 66);
   color: rgb(215, 212, 208);
   padding: 1px;
   top: 19px;
}

.ff_myToggle {
   text-align: center;
   width: 185px;
}

.myToggleVarFull {
   right: 300px;
   padding: 6px;
   cursor: default;
   background: rgb(6, 22, 41);
   color: rgb(208, 173, 230);
   display: none;
   height: 30px;
   bottom: 18px;
   position: absolute;
   top: unset;
}

.ff_myToggle:hover {
   opacity: 1;
}

.thisAreaAdminLabel.inputNames,
.thisAreaAdminLabel.completeStatus {
   bottom: 21px;
   background: rgb(30, 45, 60);
   top: unset;
   width: 446px;
   overflow: hidden;
}

.thisAreaAdminLabel.inputNames {
   height: 50px;
   top: unset;
   display: none;
}

.thisAreaAdminLabel.completeStatus {
   bottom: 12px;
   width: unset;
   background: dimgray;
   border: none;
}

.ifSwitchSearch {
   color: rgb(91, 89, 89);
   position: absolute;
   right: 7px;
   top: 101px;
   font-size: 12px;
   cursor: pointer;
}

.newCreationLineShortcuts {
   background: rgb(51, 74, 106);
   height: 20px;
   width: 20px;
   position: absolute;
   right: 3px;
   color: white;
   top: 9px;
   font-size: 15px;
   line-height: 20px;
   text-align: center;
   cursor: default;
   opacity: 0.3;
   transition: opacity 0.2s ease 0s;
   z-index: 5;
   overflow: hidden;
   white-space: nowrap;
}

.newCreationLineShortcuts[data-specialtype="caseManagement"] {
   right: unset;
   left: 233px;
   top: 7px;
   font-size: 10px;
}

#page .caseManagementArea[data-type="switch"] .newCreationLineShortcuts {}

.newCreationLineShortcuts[data-specialtype="unset"] {}

.functionFactoryLanguageSelection .newCreationLineShortcuts {
   top: 0px;
}

.newCreationLineShortcuts[data-itemtofocus="factoryLanguageSelectorTop"] {
   top: 7px;
   right: unset;
   left: 196px;
}

.newCreationLineShortcuts[data-specialtype="extraAceInner"] {
   top: 70px;
}

#functionFactoryInputArea .newCreationLineShortcuts {
   top: 149px;
}

#functionFactoryInputArea .functionFactoryLanguageSelection[data-location="inputArea"] .newCreationLineShortcuts {
   top: 5px;
   z-index: 3;
   right: 5px;
}

#functionFactoryOutputArea .newCreationLineShortcuts {
   top: 186px;
}

.oneFunctionCreationLine[data-type="caseManagementArea"] {}

#page .newCreationLineShortcuts[data-itemtofocus="aceFunctionInputAreaOne"] {
   right: 5px;
}

#page .newCreationLineShortcuts[data-itemtofocus="functionOutputArea"] {
   right: 6px;
}

.oneFunctionCreationLine:last-child {
   margin-bottom: 0px;
}

#functionFactoryPageInner[data-factory="php"] .oneFunctionCreationLine.commentLoopEnd,
#functionFactoryPageInner[data-factory="wordpress"] .oneFunctionCreationLine.commentLoopEnd,
#functionFactoryPageInner[data-factory="javascript"] .oneFunctionCreationLine.commentLoopEnd,
#functionFactoryPageInner[data-factory="jquery"] .oneFunctionCreationLine.commentLoopEnd {
   display: none;
}

.adminVueNameTwo {
   border: 3px solid cyan;
   background: darkblue;
   display: none;
}

#page[data-functionfactorydebug="on"] .adminVueNameTwo {
   display: block;
}

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

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

.phpDollarSign {
   display: inline-block;
   padding: 3px;
   color: rgb(255, 147, 84);
   height: 24px;
   vertical-align: top;
   line-height: 21px;
   font-size: 18px;
   overflow: hidden;
   cursor: default;
}

.timedVariableNameTitle {
   display: inline-block;
   width: 200px;
}

.lastCaseIsDefault {
   position: absolute;
   width: 100%;
   height: 100%;
   top: 0px;
   background: rgb(10, 38, 79);
   left: 0px;
}

.oneFunctionInputLineLabel {
   background: rgb(24, 37, 55);
   display: inline-block;
   width: 175px;
   border: 1px solid rgba(99, 106, 106, 0.24);
   position: relative;
   padding-left: 3px;
   vertical-align: top;
   margin-right: 5px;
}

.functionCreationLines[data-type="if"] .oneFunctionInputLineLabel {
   width: 120px;
}

.functionPrintTypesContainer {
   display: inline-block;
}

.savePrintFormatChanges {
   display: inline-block;
   background: rgb(4, 54, 69);
   cursor: pointer;
   height: 24px;
   line-height: 24px;
   vertical-align: text-bottom;
   padding: 0px 8px;
}

.functionStringHelpDialog,
.printFormatHelpDialog {
   overflow-y: auto;
   background: rgb(31, 31, 31);
   display: inline-block;
   position: relative;
   z-index: 100;
   font-size: 18px;
   border: 2px solid rgb(0, 0, 0);
   line-height: 26px;
   margin-left: 15%;
   width: 70%;
   margin-top: 8%;
   max-height: 85%;
}

.enableFormatsPerLanguage {
   height: 600px;
   background: rgb(29, 31, 42);
   width: 60%;
   margin-left: 20%;
   margin-top: 8%;
   position: relative;
   max-width: 800px;
}

#page[data-width="showingConsoles"] .enableFormatsPerLanguage {
   margin-left: 10px;
}

.allPrintFormatLines {
   height: calc(100% - 131px);
   overflow-y: scroll;
   background: rgb(29, 31, 42);
}

.onePrintFormatLine {
   padding: 6px 0px 6px 13px;
   margin: 4px 0px;
}

.onePrintFormatLine i {
   font-size: 18px;
   color: rgb(65, 124, 143);
   cursor: pointer;
}

.formatPerLanguageTitleRow {
   background: rgb(16, 16, 39);
   height: 35px;
   padding-right: 12px;
   padding-left: 13px;
}

.formatPerLanguageCell {
   display: inline-block;
   border: 1px solid rgb(102, 102, 102);
   width: 20%;
   vertical-align: top;
   height: 35px;
   line-height: 35px;
}

.formatPerLanguageCell[data-type="javascript"],
.formatPerLanguageCell[data-type="php"] {
   text-align: center;
   background: rgb(14, 14, 55);
   border: 1px solid rgb(29, 29, 29);
   cursor: pointer;
}

.formatPerLanguageCellName {
   width: 48%;
   margin-right: 15px;
   padding-left: 12px;
   background: rgb(12, 18, 27);
   border: 1px solid black;
   overflow: hidden;
   white-space: nowrap;
}

.formatPerLanguageTitleRow .formatPerLanguageCellName {
   background: none;
}

.perLanguageNameWord,
.perLanguageShowIn {
   display: inline-block;
}

.perLanguageShowIn {
   position: absolute;
   left: 42%;
}

#page .formatPerLanguageTitleRow .formatPerLanguageCell {
   height: 35px;
   line-height: 32px;
   overflow: hidden;
   border: none;
   background: none;
   cursor: default;
}

.functionStringHelpInner .altColorNext {
   color: orange;
}

.functionStringHelpInner .altColorCyan {
   color: cyan;
}

.functionStringHelpInner .altColorYellow {
   color: rgb(189, 189, 138);
}

.functionStringHelpClose {
   color: lightgray;
   cursor: pointer;
   position: absolute;
   right: 8px;
   top: 0px;
}

.functionStringOverlay .functionStringHelpDialog {
   overflow: hidden;
   height: 85%;
   max-height: unset;
}

.functionStringOverlay .functionStringHelpInner {
   height: calc(100% - 28px);
   overflow-y: auto;
}

.functionStringHelpTitle {
   height: 30px;
   line-height: 30px;
   background: black;
   border-bottom: 1px solid dimgray;
   text-align: center;
}

.functionStringHelpInner {
   padding: 15px;
   border: 0px solid rgb(0, 173, 255);
}

.exampleSettingArea {
   border: 1px solid rgba(211, 211, 211, 0.22);
   padding: 8px;
   margin-top: 15px;
}

.setFunctionPrintExampleButton {
   cursor: pointer;
   display: inline-block;
   padding: 5px 8px;
   background: rgb(23, 27, 66);
   border: 1px solid rgb(80, 79, 79);
   color: lightgray;
   height: 38px;
   vertical-align: text-bottom;
   border-radius: 8%;
}

#functionExampleSelectDropdown {
   background: rgb(15, 15, 98);
   border: 1px solid rgb(80, 79, 79);
   color: lightgray;
   height: 38px;
   vertical-align: top;
}

.oneFunctionPrintType {
   border: 1px solid rgb(53, 53, 53);
   background: black;
   padding: 0px 6px;
   display: inline-block;
   margin-right: 9px;
   height: 24px;
   line-height: 24px;
   vertical-align: text-bottom;
   cursor: default;
   font-size: 13px;
}

.oneFunctionPrintType[data-thevalue="echo"],
.oneFunctionPrintType[data-thevalue="console.log"] {
   display: none;
}

.removeFunctionPrintType,
.addFunctionPrintType {
   padding: 0px 3px;
   background: rgba(86, 17, 17, 0.78);
   cursor: pointer;
   display: inline-block;
   vertical-align: top;
   height: 24px;
   line-height: 24px;
   color: lightgray;
}

.removeFunctionPrintType {
   height: 18px;
   line-height: 18px;
   margin-top: 2px;
}

.addFunctionPrintType {
   background: rgb(24, 39, 84);
}

.functionPrintButtons {
   display: inline-block;
}

.printEchoWord {
   display: inline-block;
   opacity: 0.7;
   color: lightgray;
}

.printFormatSelectDefault {
   background: rgb(19, 42, 75);
   color: white;
   padding: 3px;
   cursor: pointer;
   display: inline-block;
   position: relative;
   opacity: 0.5;
   height: 24px;
   line-height: 20px;
   vertical-align: top;
   margin-left: 8px;
}

#timedVariableName {}

.if_comment_end,
.switch_comment_end,
.switch_break {
   position: absolute;
   top: 8px;
   border: 1px solid rgb(0, 0, 0);
   cursor: pointer;
   background: rgba(59, 59, 169, 0.55);
   padding: 0px 4px;
   color: rgb(201, 210, 218);
   white-space: nowrap;
}

.if_comment_end {
   left: 476px;
}

.switch_comment_end,
.switch_break {
   top: 6px;
   border: 1px solid rgb(0, 0, 0);
   background: rgb(42, 69, 142);
}

.switch_comment_end {
   left: 80px;
   background: rgb(35, 35, 84);
}

.switch_comment_end[data-lastcase="yes"] {
   left: 0px;
}

.switc .switch_break {
   background: rgb(43, 53, 128);
   right: unset;
}

.switchDefaultWord {
   display: inline-block;
   border: 1px solid yellow;
}

.switch_last_condition {
   border: 1px solid rgba(64, 65, 64, 0.46);
   background: rgb(30, 30, 30);
   position: absolute;
   height: 27px;
   top: 4px;
   overflow: hidden;
   width: 169px;
   left: 137px;
   line-height: 27px;
   padding: 0px;
   color: lightgray;
   display: none;
}

.oneFunctionCreationLine[data-lastswitch="true"] .switch_last_condition {
   display: block;
}

.oneFunctionCreationLine[data-lastswitch="true"] .beforeInput1 .switch_last_condition {
   display: none;
}

.lastSwitchConditionSection {
   border: 1px dashed rgb(78, 72, 73);
   margin: 3px;
   display: inline-block;
   opacity: 0.3;
   background: rgb(47, 47, 90);
   padding: 3px;
   cursor: pointer;
   height: 20px;
   line-height: 13px;
   vertical-align: top;
}

.lastSwitchConditionSection[data-active="true"] {
   border: 1px solid rgb(78, 72, 73);
   opacity: 1;
}

#functionOutputAreaContainer,
#functionInputContainerOne {
   border: 1px solid rgb(90, 90, 90);
   background: rgb(47, 46, 51);
   height: calc(100% - 53px);
   width: calc(92% - 13px);
   display: inline-block;
   position: relative;
   margin-top: 11px;
   margin-left: 4%;
}

#functionInputContainerOne {
   height: 140px;
   margin-top: 8px;
}

.aceEditorAdminLabel {
   position: absolute;
   z-index: 18;
   height: 30px;
   width: 334px;
   border: 2px solid rgb(91, 91, 83);
   background: black;
   top: 51px;
   white-space: nowrap;
   overflow: hidden;
   font-size: 10px;
   opacity: 0.6;
   right: 53px;
}

#functionOutputArea .aceEditorAdminLabel {
   top: unset;
   bottom: 0px;
   right: 0px;
}

.functionOutputSection {
   background: rgb(46, 44, 48);
   height: 315px;
   position: relative;
}

.factoryInputSectionTitle {
   text-align: left;
   position: relative;
   background: black;
   color: lightblue;
   height: 30px;
   line-height: 30px;
   overflow: hidden;
   padding-left: 5%;
   white-space: nowrap;
}

.functionFactorySettingsButton {
   cursor: pointer;
   color: rgb(129, 131, 132);
   position: absolute;
   left: 7px;
   top: 0px;
}

#previewPage .functionOutputButton.functionToEditors {
   display: none;
}

.functionOutputAreaButtons {
   display: inline-block;
   width: 75%;
   white-space: nowrap;
   vertical-align: top;
   padding-left: 10px;
   padding-top: 7px;
}

.factoryInputSectionTitle .oneHelpButton {
   font-size: 11px;
   position: relative;
   top: 1px;
   color: rgb(137, 146, 149);
}

.functionFactoryLanguageSelection {
   background: black;
   color: lightblue;
   text-align: center;
   width: 234px;
   display: inline-block;
   float: right;
   padding: 5px 19px 0px 0px;
   overflow: hidden;
   position: relative;
   height: 30px;
}

.functionFactoryLanguageSelection[data-location="inputArea"] select {
   border: 1px solid rgb(35, 55, 84);
   height: 22px;
   vertical-align: top;
   line-height: 22px;
   font-size: 12px;
   background: rgb(5, 5, 59);
   bottom: 1px;
   position: relative;
}

.functionFactoryLanguageSelection[data-location="casesRow"] {
   float: unset;
   height: 36px;
   line-height: 24px;
   overflow: hidden;
   background: none;
   padding-top: 7px;
   opacity: 0.8;
   vertical-align: top;
}

#codeCreate .functionFactoryLanguageSelection[data-location="casesRow"] {
   padding-top: 8px;
}

.caseManagementArea[data-type="customArg"] .functionFactoryLanguageSelection {
   display: none;
}

.functionFactoryLanguageSelectionTitle {
   display: inline-block;
   font-size: 12px;
   vertical-align: top;
   height: 23px;
   line-height: 17px;
}

.functionFactoryCurrentLanguage {
   color: lightblue;
   border: 1px solid rgb(71, 72, 72);
   background: rgb(5, 5, 59);
   padding-bottom: 0px;
   line-height: 20px;
}

.functionFactoryLanguageSelectionTitle,
#functionFactoryCurrentLanguage,
.functionFactoryLanguageSelection[data-location="casesRow"] select {
   height: 20px;
   font-size: 12px;
   vertical-align: top;
}

.functionFactoryLanguageSelection[data-location="casesRow"] select {
   border: 1px solid rgb(25, 102, 102);
}

.factorySelectLanguageExplanation {
   opacity: 0.7;
   position: absolute;
   left: 0px;
}

#page[data-functionfactorydebug="off"] .functionFactoryLanguageSelection {}

.functionFactoryLanguageSelection i {
   position: relative;
   top: -3px;
   vertical-align: top;
   line-height: 19px;
   font-size: 11px;
   opacity: 0.6;
}

.factoryInputSectionTitle .functionFactoryLanguageSelection i {
   top: 1px;
}

#functionFactoryOverlay[data-functionhelptext="hide"] .fa-question-circle {
   display: none;
}

#functionFactoryOverlay[data-factoryshortcutletters="hide"] .functionButtonsContainer .functionButtonShortcut {
   display: none;
}

#functionFactoryOverlay[data-globalcommentend="hide"] .oneFunctionCreationLine.entireFuncComment {
   display: none;
}

#functionFactoryOverlay[data-switchbreakcheckboxes="hide"] .afterInput3 .switch_break {
   display: none;
}

#functionFactoryOverlay[data-switchcommentendcheckboxes="hide"] .afterInput3 .switch_comment_end {
   display: none;
}

#functionFactoryOverlay[data-ifcommentendcheckboxes="hide"] .afterInput2 .if_comment_end {
   display: none;
}

#functionFactoryOverlay[data-factoryinactiveshortcutdisplay="invisible"] .newCreationLineShortcuts {
   opacity: 0;
}

#functionFactoryOverlay[data-factoryinactiveshortcutdisplay="partiallyVisible"] .newCreationLineShortcuts {
   opacity: 0.3;
}

#functionFactoryOverlay[data-factoryinactiveshortcutdisplay="visible"] .newCreationLineShortcuts {
   opacity: 0.9;
}

#functionFactoryOverlay[data-factoryactiveshortcutdisplay="invisible"] .newCreationLineShortcuts.consoleFocused {
   opacity: 0;
}

#functionFactoryOverlay[data-factoryactiveshortcutdisplay="partiallyVisible"] .newCreationLineShortcuts.consoleFocused {
   opacity: 0.3;
}

#functionFactoryOverlay[data-factoryactiveshortcutdisplay="visible"] .newCreationLineShortcuts.consoleFocused {
   opacity: 0.9;
}

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

#page .commentLoopEnd.makeHidden,
#page .makeHidden .createFunctionToggle {
   background: black;
   color: rgb(34, 32, 32);
   border: none;
}

#functionOutputArea,
#aceFunctionInputAreaOne,
.extraAceInnerClass {
   position: absolute;
   inset: 0px;
   height: 100%;
}

.extraAceInnerClass {
   width: 100%;
}

#aceFunctionInputAreaOne {}

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

.phpVersion {
   border: 1px solid rgb(0, 168, 255);
}

.oneFunctionCreationLine .afterInput1,
.oneFunctionCreationLine .beforeInput1,
.oneFunctionCreationLine .afterInput2,
.oneFunctionCreationLine .beforeInput2,
.oneFunctionCreationLine .afterInput3,
.oneFunctionCreationLine .beforeInput3,
.oneFunctionCreationLine .afterInput4,
.before_input_if {
   display: inline-block;
}

.oneFunctionCreationLine[data-theinput="timeoutDelay_interval"] .afterInput1,
.oneFunctionCreationLine[data-theinput="timeoutDelay_timeout"] .afterInput1 {
   color: rgb(201, 223, 231);
}

.functionCreationLines[data-type="if"] .beforeInput1 {
   width: 120px;
}

#page .before_input_if[data-bothoptions="true"] {
   text-align: left;
}

#functionFactoryOverlay .printFormatSelect {
   border: 1px solid rgba(48, 50, 48, 0.25);
   margin-left: 8px;
   background: rgb(29, 27, 37);
   height: 24px;
   line-height: 2;
   vertical-align: text-bottom;
}

.functionStringHelp {
   cursor: pointer;
   position: absolute;
   height: 24px;
   overflow: hidden;
   top: 0px;
   right: 2px;
   font-size: 12px;
}

.functionStringHelp.modifyType {
   cursor: default;
}

#page .functionStringHelp i {
   line-height: 24px;
}

.functionCreationLines[data-type="if"] .afterInput1,
.functionCreationLines[data-type="switch"] .afterInput2 {
   display: block;
   margin-top: 10px;
   padding-bottom: 0px;
   width: 95%;
}

.before_input_if {
   min-width: 135px;
   text-align: right;
   height: 24px;
   overflow: hidden;
   padding-top: 4px;
}

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

#page .beforeInput1 .ifPortion,
#page .beforeInput1 .elsePortion,
#page .beforeInput1 .elseIfPortion {
   border-color: rgb(82, 179, 243);
   color: lightblue;
   line-height: 17px;
   height: 17px;
   overflow: hidden;
   padding-top: 0px;
}

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

.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: 0.8;
   overflow: hidden;
   line-height: 17px;
   padding-top: 0px;
}

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

.caseManagementArea {}

#page .caseManagementArea[data-location="first"][data-type="if"],
#page .caseManagementArea[data-location="first"][data-type="switch"] {}

#page .caseManagementArea[data-location="first"][data-type="if"] .caseManagementDropdown,
#page .caseManagementArea[data-location="first"][data-type="switch"] .caseManagementDropdown {
   position: relative;
}

.caseManagementInfo {
   border: 3px solid rgb(131, 140, 131);
   margin: 5px;
   background: rgb(18, 40, 80);
   padding: 7px;
}

#page .caseManagementInfo .divButton {
   margin: 2px;
}

.caseManagementDropdown {
   height: 35px;
   padding-top: 5px;
   display: inline-block;
   vertical-align: text-bottom;
}

#page .caseManagementDropdown select {
   margin-left: 2px;
   background: rgb(30, 30, 64);
   margin-right: 8px;
}

#page #codeCreate .functionFactoryLanguageSelection[data-location="casesRow"] select {
   position: relative;
   bottom: 3px;
}

#page #codeCreate .functionFactoryLanguageSelection[data-location="casesRow"] i {
   margin-top: 2px;
}

.caseManagementDropdownTitle,
.caseManagementDropdownMax {
   display: inline-block;
   vertical-align: top;
   line-height: 24px;
   height: 24px;
   color: lightgray;
}

.caseManagementArea[data-type="if"] .caseManagementDropdownMax,
.caseManagementArea[data-type="switch"] .caseManagementDropdownMax {
   position: relative;
   margin-left: 15px;
}

.caseManagementButtons {
   display: inline-block;
   vertical-align: top;
   margin-left: 8px;
   height: 24px;
   line-height: 24px;
}

.caseManagementDropdown select {
   background: black;
   color: lightgray;
   vertical-align: top;
   height: 24px;
   line-height: 24px;
   border: 2px solid rgb(0, 0, 0);
}

.caseManagementButton {
   cursor: pointer;
   display: inline-block;
   background: rgb(109, 71, 21);
   border: 2px solid rgb(17, 17, 17);
   width: 72px;
   text-align: center;
   height: 24px;
   line-height: 20px;
   vertical-align: top;
   font-size: 12px;
}

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

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

.caseManagementButton.remove {
   background: rgb(54, 12, 12);
}

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

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

.extraFunctionAceArea {
   background: rgb(56, 48, 48);
   height: 100%;
   width: 100%;
   overflow: hidden;
   position: relative;
   border: 1px solid black;
}

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

.oneMultipleAceContainer {
   background: dimgray;
   display: block;
   height: 180px;
}

#outputConsoles {
   border: 2px solid rgb(105, 105, 108) !important;
}

#page .floatingFixedClass {}

#page[data-rulerstatus="shown"] .floatingFixedClass {}

#page[data-rulerdisplaytype="horizontal"] .floatingFixedClass {
   left: 0px;
   width: 100%;
}

#page[data-rulerdisplaytype="vertical"] .floatingFixedClass {
   top: 0px;
   height: 100%;
}

.divButton.previewPageFork {}

#touchScreenTapSetting,
#rulerColorScheme {
   color: lightgray;
   border: 1px solid rgb(86, 86, 86);
   background: rgb(12, 14, 21);
}

.oneSmallGridline,
.oneMediumGridline,
.oneLargeGridline {
   background: black;
   position: fixed;
   z-index: 111111;
   left: 0px;
   top: 0px;
}

.oneSmallGridline.horizontal {
   width: 2500px;
   height: 1px;
   background: black;
   opacity: 0.6;
}

.oneMediumGridline.horizontal {
   width: 2500px;
   height: 2px;
}

.oneLargeGridline.horizontal {
   width: 2500px;
   height: 4px;
}

.oneSmallGridline.vertical {
   height: 2500px;
   width: 1px;
   opacity: 0.6;
}

.oneMediumGridline.vertical {
   height: 2500px;
   width: 2px;
}

.oneLargeGridline.vertical {
   height: 2500px;
   width: 4px;
}

#entryDetailEditor,
#ajaxLogContainer {
   border: 3px solid rgb(85, 125, 140);
   position: fixed;
   width: 100%;
   height: 96%;
   z-index: 2147483647;
   background: rgb(27, 28, 26);
   top: 0px;
   left: 0px;
   padding: 30px;
   overflow-y: auto;
   display: none;
}

#entryDetailEditor {
   overflow: hidden;
}

#ajaxLogContainer {
   color: white;
   padding: 0px;
   overflow: hidden;
   top: 32px;
   height: 93%;
}

.ajaxLogTitle {
   position: relative;
   top: 0px;
   background: rgb(9, 9, 62);
   border-bottom: 1px solid dimgray;
}

.closeAjaxLog {
   position: absolute;
   top: 0px;
   cursor: pointer;
   right: 8px;
}

.ajaxLogButton {
   background: rgb(21, 52, 100);
   display: inline-block;
   cursor: pointer;
   padding: 8px;
   color: lightblue;
}

#theAjaxLog {
   position: relative;
   top: 20px;
   left: 20px;
   border: 3px solid black;
   background: rgb(58, 60, 68);
   width: 85%;
   height: 720px;
}

.ajaxLogLines {
   border: 2px solid rgb(120, 115, 116);
   height: calc(100% - 30px);
   overflow-y: auto;
}

.oneAjaxLogLine {
   border: 2px solid rgba(88, 178, 203, 0.8);
   margin: 13px;
   background: black;
   padding: 6px;
}

.oneAjaxLogLine:nth-child(2n+1) {
   background: rgb(5, 6, 44);
   color: rgb(185, 197, 197);
}

.oneAjaxLogItem {
   display: inline-block;
   vertical-align: top;
}

.oneAjaxLogItem.ajaxAction {
   width: 120px;
   overflow: hidden;
   border: 1px solid rgba(211, 211, 211, 0.26);
   text-align: center;
}

.oneAjaxLogItem.ajaxTime {
   border: 1px solid rgba(0, 255, 255, 0.18);
   margin-right: 18px;
   width: 200px;
   text-align: center;
}

.toggleAjaxRequestButton {
   display: inline-block;
   cursor: pointer;
   background: rgb(8, 70, 70);
   margin-left: 30px;
   color: lightgray;
   padding: 2px;
}

.ajaxLogRequestSection {
   border: 2px solid rgb(165, 152, 165);
   padding: 12px;
}

.oneLogRequestTitle {
   background: rgb(37, 39, 36);
   color: white;
}

.ajaxLogRequestLine {
   border: 1px solid black;
   margin: 4px;
   background: rgb(1, 61, 76);
   color: lightgray;
   padding: 6px;
}

.ajaxLogRequestLine:nth-child(2n+1) {
   background: rgb(2, 33, 41);
}

.ajaxLogInnerTitle {
   background: black;
   text-align: center;
   border-bottom: 1px solid rgb(70, 73, 78);
}

.logRequestKey,
.logRequestValue {
   display: inline-block;
   margin-right: 12px;
}

.logRequestKey {
   width: 100px;
   padding-left: 3px;
}

#page[data-width="showingConsoles"] #entryDetailEditor,
#page[data-width="showingConsoles"] #ajaxLogContainer {
   width: 63%;
   border: 4px solid rgb(12, 13, 14);
}

#page[data-recordingbar="show"] #entryDetailEditor {
   border: 5px solid blue;
   height: 85%;
   width: 65%;
}

#page[data-recordingbar="show"][data-width="normalWidth"] #entryDetailEditor {
   width: 100%;
}

#encryptionContainer {
   background: rgb(48, 48, 82);
   border: 3px solid black;
   min-height: 140px;
   width: 55%;
   color: lightgray;
   display: none;
}

.encryptionLine {
   border: 1px solid yellow;
   margin: 5px;
   padding: 3px;
   color: white;
   background: rgb(7, 23, 53);
}

.encryptionTitle {
   display: inline-block;
}

#page #encryptionContainer input {
   background: rgb(63, 79, 99);
   color: lightgray;
   width: calc(33% - 46px);
   border: none;
   height: 25px;
   vertical-align: top;
}

.oneEncryptionButton {
   display: inline-block;
   cursor: pointer;
   padding: 4px;
   background: rgb(67, 62, 76);
}

#createdEncryptionPairs {
   background: rgb(65, 19, 49);
   min-height: 100px;
   border: 3px solid cyan;
   padding: 7px;
}

#createdEncryptionPairsInner {
   background: rgb(16, 45, 65);
   min-height: 35px;
   border: 2px solid red;
   padding: 4px;
}

.oneEncryptionKey {
   margin: 6px;
   border: 1px solid black;
   background: rgb(40, 7, 7);
   padding: 4px;
   cursor: pointer;
}

.oneEncryptionKey:nth-child(2n+1) {
   background: rgb(37, 37, 37);
}

.updateGroupsAndFieldsButton {
   padding: 8px;
   margin: 3px;
   background: rgb(9, 35, 42);
   border: 2px solid black;
}

#groupNames,
#fieldNames {
   min-height: 80px;
   background: rgb(48, 50, 51);
   color: white;
   padding: 9px;
   border: 1px solid rgb(0, 0, 0);
   margin: 18px 0px;
   width: 55%;
}

#groupNames {
   height: 88%;
   padding: 0px;
}

#page[data-editorcolumn="small"] .curationQuickSelect[data-thenumber="S"] {
   background: blue;
   color: cyan;
   border: 1px solid cyan;
}

#page[data-editorcolumn="small"] #groupNames {
   width: 24%;
}

#page[data-editorcolumn="small"] #fieldNames {
   width: 72%;
}

#page[data-editorcolumn="small"] .oneDetailGroupContainer {
   height: unset;
   width: 94%;
}

#page[data-editorcolumn="small"] #groupNamesContainer {
   overflow-x: hidden;
}

#page[data-editorcolumn="small"] .oneDetailFieldName .oneDetailFieldNameTitle {
   width: 28%;
}

#page[data-editorcolumn="small"] #fieldNames input[type="text"],
#page[data-editorcolumn="small"] #fieldNames input[type="number"],
#page[data-editorcolumn="small"] #fieldNames textarea,
#page[data-editorcolumn="small"] #fieldNames .glossaryCustomCheckbox {
   width: 65%;
}

#glossaryReviewedCounts {
   height: unset;
   overflow: hidden;
   border: 3px solid rgb(189, 119, 119);
   width: 55%;
}

.reviewedCountsBox {
   display: inline-block;
   padding: 4px;
   margin: 4px;
   background: rgb(30, 48, 115);
   color: lightgray;
   border: 2px solid black;
   cursor: pointer;
}

.reviewedCountsBox[data-active="yes"] {
   background: rgb(27, 32, 94);
   border: 2px solid rgb(95, 142, 153);
   color: rgb(159, 204, 218);
   font-weight: 600;
}

.reviewedCountsBox.boxNotes {
   cursor: default;
}

.reviewedCountsBox.get_latest_glossary {
   background: rgb(22, 66, 89);
   cursor: pointer;
}

#entryDetailEditor #glossarySearchResults {
   border: 2px solid rgb(12, 96, 96);
   right: 0px;
   position: absolute;
   bottom: 8px;
   left: unset;
   width: 44%;
}

#fieldNames {
   position: absolute;
   right: 0px;
   top: 13px;
   height: 67%;
   overflow: hidden scroll;
   width: 44%;
   background: rgb(53, 56, 54);
}

#entryDetailEditor[data-glossarysearch="hidden"] #fieldNames {
   height: 92%;
}

.entryDetailNewLine {
   padding: 7px;
   min-width: 140px;
   text-align: center;
   border: 2px solid black;
   background: rgb(12, 12, 13);
}

.entryDetailNewLine.lineHasGif {
   background: rgb(6, 28, 6);
}

.entryDetailNewLine[data-type="notebookNotes"],
.entryDetailNewLine[data-type="advantageOffered"],
.entryDetailNewLine[data-type="associatedNumber"],
.entryDetailNewLine[data-type="actualNumber"] {
   display: none;
}

.oneDetailGroupContainer {
   border: 2px solid rgb(0, 0, 0);
   margin: 10px;
   width: 43%;
   display: inline-block;
   height: 300px;
   background: rgb(35, 32, 32);
   vertical-align: top;
   overflow: hidden;
   position: relative;
}

.entireGroupBadge {
   top: 5px;
   left: 6px;
   color: rgb(222, 221, 216);
   background: rgb(59, 32, 8);
   position: absolute;
   font-size: 15px;
   height: 20px;
   width: 20px;
   line-height: 20px;
   text-align: center;
}

.thisContainerHasNotes {
   position: absolute;
   top: 0px;
   right: 0px;
   background: rgb(89, 94, 9);
   height: 40px;
   width: 60px;
   line-height: 34px;
   text-align: center;
   opacity: 0.8;
}

.entireGroupBadge.semifinalBadge {
   background: rgb(80, 80, 112);
   color: rgb(20, 228, 6);
}

.entireGroupBadge.perfectionBadge {
   background: rgb(8, 59, 10);
   color: gold;
}

.oneDetailGroupContainer.extraContainer,
.oneDetailGroupContainer.extraContainer .oneDetailGroupName {
   background: rgb(26, 44, 43);
}

.oneDetailGroupContainer.extraContainer .showOneGlossaryDetail {
   background: rgb(75, 83, 86);
}

.showOneGlossaryDetail {
   border-top: 1px solid rgb(80, 80, 80);
   border-right: 1px solid rgb(80, 80, 80);
   border-left: 1px solid rgb(80, 80, 80);
   border-image: initial;
   border-bottom: none;
   padding: 5px;
   cursor: pointer;
   position: relative;
   background: rgb(27, 27, 52);
   white-space: nowrap;
}

.showOneGlossaryDetail:last-child {}

.showOneGlossaryDetail,
.showOneGlossaryDetail:last-child {}

.oneGlossaryDetailName {
   width: calc(100% - 30px);
   overflow: hidden;
   text-overflow: ellipsis;
}

.showOneGlossaryDetail[data-status="none"],
.showOneGlossaryDetail {
   background: rgb(76, 76, 76);
   border: 1px solid black;
}

.showOneGlossaryDetail[data-status="reviewed"] {
   background: rgb(66, 86, 129);
}

.hasOutstandingNotesNew {
   background: rgb(80, 21, 21);
   position: absolute;
   right: 28px;
   top: 7px;
   height: 15px;
   width: 15px;
   line-height: 15px;
   text-align: center;
}

.showOneGlossaryDetail[data-status="semifinal"] {
   background: rgb(80, 80, 112);
}

.showOneGlossaryDetail[data-status="perfection"] {
   background: rgb(3, 55, 3);
}

.showOneGlossaryDetail[data-hasgif="yes"] .oneGlossaryDetailName {}

.moduleMatchDot {
   background: rgb(189, 161, 192);
   position: absolute;
   right: 30px;
   top: 8px;
   height: 10px;
   width: 10px;
}

.oneGlossaryDetailNumber {
   background: black;
   position: absolute;
   right: 0px;
   top: 0px;
   width: 25px;
   height: 25px;
   line-height: 25px;
   text-align: center;
   opacity: 0.4;
}

.showOneGlossaryDetail[data-hasgif="yes"] .oneGlossaryDetailNumber {
   background: rgb(72, 13, 110);
   opacity: 0.7;
}

.oneDetailGroupName {
   cursor: pointer;
   min-width: 190px;
}

.allDetailGroupLines {
   border: 1px solid rgb(71, 66, 71);
   height: calc(100% - 39px);
   overflow: hidden auto;
}

.entryDetailTitle {
   position: absolute;
   top: 0px;
   background: black;
   padding: 3px 10px;
   right: unset;
   color: white;
}

.toggleVidRatingsInline {
   display: inline-block;
   border: 1px solid rgba(0, 255, 255, 0.33);
   padding: 1px;
   background: rgba(105, 105, 105, 0.19);
   cursor: pointer;
}

.entryDetailTitle i {
   cursor: pointer;
}

.oneDetailFieldName {
   display: block;
   text-align: left;
   position: relative;
}

.detailEditorCurationLine {
   background: rgb(52, 44, 44);
   display: none;
}

.showCurationRating {
   cursor: pointer;
   display: inline-block;
   padding: 0px 7px;
   margin-right: 4px;
   border: 1px solid rgba(255, 255, 255, 0.44);
   background: black;
}

.showCurationRating[data-active="yes"] {
   border: 1px solid yellow;
   color: yellow;
}

.saveDetailEditorCurationButton {
   display: inline-block;
   background: rgb(55, 86, 96);
   cursor: pointer;
}

.grabFromOtherButton,
.setupBasicLink {
   position: absolute;
   background: rgb(30, 50, 73);
   bottom: 0px;
   right: 0px;
   cursor: pointer;
   padding: 4px;
}

.grabFromOtherButton {
   width: 50px;
   white-space: nowrap;
   overflow: hidden;
   opacity: 0.3;
   display: none;
}

.oneDetailFieldName[data-type="examplesToShow"] {
   overflow: hidden;
}

.oneDetailFieldName[data-type="gifEntry"] {
   height: 350px;
   border: 1px solid rgb(30, 127, 164);
   overflow: hidden;
}

#page .oneDetailFieldName[data-type="gifEntry"] textarea {
   height: 90%;
   border: 1px solid cyan;
}

#entryDetailEditor input[type="text"] {
   background: black;
   color: lightgray;
   border: 1px solid rgba(81, 79, 79, 0.87);
}

#g_gifLink.isAbsolute {
   position: absolute;
   opacity: 0;
}

.entryContainerTitle {
   border: 2px solid rgb(0, 0, 0);
}

.groupNamesTitle.entryContainerTitle,
.redoGlossaryPages,
.redoModulePages {
   display: inline-block;
}

.redoGlossaryPages,
.redoModulePages,
#moduleCheckboxViewButton {
   background: rgb(32, 24, 81);
   border: 1px solid black;
   padding: 0px 8px;
   cursor: pointer;
   margin-left: 30px;
}

.fileReplace {background: #0d2f0d;display: inline-block;vertical-align: top;padding: 6px;cursor: pointer;}

#moduleCheckboxViewButton {
   display: inline-block;
   background: rgb(20, 59, 72);
   float: right;
}

.redoModulePages {
   background: rgb(60, 34, 78);
}

.entryContainerTitleRow {
   margin: 3px;
   border: 1px solid rgba(135, 135, 135, 0.333);
   background: black;
   padding: 6px;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
   position: relative;
}

.entryReviewButton {
   display: inline-block;
   border: 1px solid rgba(105, 105, 105, 0.45);
   margin: 3px;
   padding: 4px;
   background: brown;
   cursor: pointer;
}

.entryReviewButton.reviewed {
   background: rgb(42, 42, 65);
}

.entryReviewButton.semifinal {
   background: rgb(11, 11, 61);
}

.entryReviewButton.perfection {
   background: rgb(58, 46, 65);
}

.entryReviewButton[data-active="active"] {
   border: 1px solid cyan;
   color: cyan;
}

.entryDetailModifiedButton {
   background: rgb(3, 53, 3);
   cursor: pointer;
   display: inline-block;
   padding: 2px;
}

.entryDetailModifiedButton[data-modified="modified"] {
   background: rgb(58, 12, 12);
}

.fieldNamesTitle {
   height: 209px;
   background: rgb(12, 21, 56);
}

.entryDetailEditorContainer {
   border: 4px solid rgb(0, 0, 0);
   height: 95%;
   overflow-y: auto;
}

#fieldNamesContainer {
   height: calc(100% - 213px);
   overflow-x: hidden;
}

#fieldNames input[type="text"],
#fieldNames input[type="number"],
#fieldNames textarea,
#fieldNames .glossaryCustomCheckbox {
   width: 56%;
   margin-left: 10px;
   vertical-align: top;
   background: black;
   border: 2px solid rgb(71, 70, 72);
   color: white;
}

#page #fieldNames [readonly="readonly"] {
   color: lightblue;
   text-align: center;
   border: 1px solid rgb(83, 84, 84);
   background: rgb(32, 32, 55);
   cursor: default;
}

#fieldNames .glossaryCustomCheckbox {
   display: inline-block;
   text-align: center;
   padding: 8px 0px;
}

.glossaryCustomCheckbox .customCheckboxButton {
   border: 1px solid black;
   background: rgb(61, 61, 110);
   display: inline-block;
   padding: 3px;
   margin-right: 18px;
   width: 50px;
   text-align: center;
   opacity: 0.3;
   cursor: pointer;
}

.glossaryCustomCheckboxLine[data-status="no"] .no,
.glossaryCustomCheckboxLine[data-status="yes"] .yes {
   opacity: 1;
}

#entryDetailEditor #glossarySearchInput {
   background: rgb(45, 59, 76);
}

.oneDetailFieldNameTitle {
   width: 190px;
   display: inline-block;
}

.oneDetailFieldName input[type="text"],
#page .oneDetailFieldName .oneDetailFieldNameTitle {
   height: 30px;
   width: 40%;
   white-space: nowrap;
   text-overflow: ellipsis;
}

#entryGroupFilter {
   border: 3px solid magenta;
   padding: 5px;
   background: rgb(28, 67, 104);
   width: 40%;
}

#entryGroupFilterResults {
   padding: 15px;
   background: rgb(34, 47, 70);
   border: 3px solid green;
   margin: 18px 0px;
   width: 40%;
}

#page[data-width="showingConsoles"] #entryDetailEditor #glossarySearchResults {
   left: unset;
   width: 44%;
}

#previewPage>#glossarySearchResults {
   display: none;
}

#previewPage #entryDetailEditor>#glossarySearchResults {
   display: block;
}

#logBoxFunctionArea,
#outputConsoles,
#recordingMenu {
   position: fixed;
   left: unset;
   padding-bottom: 20px;
   background: rgb(38, 36, 46);
   width: 600px;
   height: 84%;
   z-index: 1100;
   right: 20px;
}

#logBoxFunctionArea {

bordeR: 4px solid #000000;

top: 55px !important;
   !import;

height: 90%;

display: none;

right: unset;

left: 17%;

width: 46%;
}

#logBoxFunctionArea[data-loc="right"] {
   left: unset;
   border: 3px solid #0000006e;
   right: 50px;
   width: 36%;
}

.logBoxFunctionAreaTitle {
   text-align: center;
   background: #02021e;
   padding: 9px;
}

.hideLogBoxArea {
   display: inline-block;
   cursor: pointer;
}

#logFunctionActualInput {
   background: #0f0f44;
   bordeR: 1px solid black;
   outline: none;
   margin: 6px;
   color: lightblue;

}

.logFunctionInputGo {
   display: inline-block;
   background: black;
   padding: 6px 10px;
   cursor: pointer;
}

#page[data-logfunctionsshown="yes"] #logBoxFunctionArea {
   display: block;
}

.logBoxFunctionAreaMove {
   background: black;
   padding: 6px;
   margin: 6px;
   display: inline-block;
   cursor: pointer;
}


#logFunctionDisplay {
   /* background: black; */
   /* color: lightblue; */
   min-height: 600px;
   min-width: 100px;
   margin: 6px;
   max-width: 95%;
   margin-left: 4px;
   border: 3px solid #000000;
   height: 83%;
}


#page[data-width="showingConsoles"][data-recordingbar="show"] #outputConsoles {
   height: 75%;
}

#recordingMenu {
   z-index: 1200;
   border: 2px solid rgb(30, 56, 67);
   right: unset;
   left: 19px;
   top: 105px;
   bottom: unset;
   background: rgb(28, 26, 28);
   color: white;
   display: none;
   padding-top: 54px;
   height: unset;
   overflow-y: auto;
   width: 92%;
   padding-bottom: 16px;
   max-width: 1000px;
}

#page[data-width="showingConsoles"] #recordingMenu {
   width: 65%;
   left: 0px;
}

#parseRecordingArea,
#taskParseArea,
#outlineParseArea {
   position: absolute;
   right: 350px;
   z-index: 1300;
   background: rgb(14, 14, 15);
   padding-bottom: 25px;
   width: 630px;
   border: 1px solid rgb(24, 58, 68);
   display: none;
}

#page[data-width="showingConsoles"] #parseRecordingArea,
#page[data-width="showingConsoles"] #taskParseArea,
#page[data-width="showingConsoles"] #outlineParseArea {
   right: unset;
   left: 280px;
   width: 500px;
   transform: scale(0.9);
}

.parseRecordingAreaTitle {
   background: rgb(5, 7, 37);
   border-bottom: 1px solid rgb(60, 60, 60);
   text-align: center;
   height: 30px;
   line-height: 30px;
}

.parseRecordingAreaTitle i {
   position: absolute;
   right: 8px;
   cursor: pointer;
}

#recordingSearchMenu {
   position: absolute;
   top: 100px;
   left: 100px;
   background: rgb(43, 43, 52);
   height: 500px;
   width: 700px;
   z-index: 44444;
   border: 1px solid rgb(67, 62, 62);
   font-size: 14px;
   display: none;
}

.recordingSearchMenuTitle {
   background: black;
   text-align: center;
   height: 30px;
   line-height: 30px;
}

.recordingSearchMenuMainRow {
   padding-top: 8px;
   padding-bottom: 8px;
   padding-left: 8px;
}

#recordingSearchTerm,
.recordingMenuSearchRowText,
.startRecordingMenuSearch {
   display: inline-block;
   border: 1px solid rgb(0, 0, 0);
   margin-right: 5px;
   height: 25px;
   line-height: 25px;
   vertical-align: top;
}

.recordingMenuSearchRowText {
   border: none;
}

#recordingSearchTerm {
   background: rgb(5, 7, 55);
   width: 140px;
   color: lightgray;
}

#recordingSearchResults {
   background: rgb(6, 6, 6);
   height: calc(100% - 71px);
   border: 2px solid rgb(43, 43, 44);
   padding: 8px;
}

.recordingSearchResultsInner {
   padding: 6px;
   background: rgb(12, 12, 13);
   height: 100%;
   overflow-y: auto;
}

.recordingSearchResultLine {
   margin-bottom: 20px;
   border: 1px solid rgba(92, 90, 90, 0.44);
   padding: 3px;
}

.recordingSearchInnerText {
   width: calc(100% - 56px);
}

.recordingSearchInnerText,
.loadSpecificRecordingData {
   display: inline-block;
}

.loadSpecificRecordingData {
   background: rgb(16, 18, 69);
   cursor: pointer;
   padding: 0px 7px;
}

.searchedRecordingTerm,
.searchedRecordingSlot,
.searchedRecordingNumber {
   display: inline-block;
   background: black;
   color: lightblue;
   padding: 0px 3px;
   margin: 0px 3px;
}

.searchedRecordingSlot {
   color: rgb(188, 175, 196);
}

.searchedRecordingNumber {
   color: orange;
}

.startRecordingMenuSearch {
   background: rgb(6, 6, 6);
   cursor: pointer;
   padding: 0px 5px;
}

.recordingSearchMenuTitle i {
   position: absolute;
   right: 8px;
   cursor: pointer;
}

#taskParseInner,
#outlineParseInner,
#parseRecordingInner {
   border: 1px solid rgb(70, 68, 68);
   height: 330px;
}

#parseRecordingInner,
.parseRecordingButtonsRow {
   padding: 13px;
   margin: 15px;
   position: relative;
}

.parseRecordingButtonsRow {}

.parseRecordingButton {
   background: rgb(28, 44, 84);
   display: inline-block;
   padding: 8px;
   cursor: pointer;
   margin-right: 15px;
   border: 1px solid black;
   font-size: 12px;
}

#page .getTaskParseVal {
   background: rgb(75, 37, 103);
}

#page .addPlaceholderPins {
   background: rgb(26, 75, 75);
}

.myParseInfo {
   background: black;
   padding: 16px;
   font-size: 18px;
}

.parseRecordingButton.taskTracking {
   width: 159px;
   text-align: center;
}

.parseRecordingButton.andClear {
   background: rgb(19, 27, 63);
}

.parseRecordingButton.closeMe {
   background: rgb(30, 2, 2);
}

#parseTaskOptions,
#parseOutlineOptions,
#parseRecordingOptions {
   background: rgb(51, 51, 66);
   border: 1px solid black;
   padding-left: 10px;
   white-space: nowrap;
   display: none;
}

.parseRecordingOptionsLine {
   padding: 8px 14px 8px 4px;
   display: inline-block;
   position: relative;
}

.parseRecordingSaveButton {
   display: inline-block;
   background: rgb(10, 10, 37);
   font-size: 12px;
   cursor: pointer;
   height: 25px;
   line-height: 25px;
   padding: 0px 6px;
}

.parseRecordingOptionsExplanation {
   position: absolute;
   background: rgb(5, 9, 35);
   font-size: 14px;
   top: 300px;
   left: 100px;
   z-index: 2000;
   width: 400px;
   border: 1px solid rgb(45, 45, 45);
   display: none;
}

.parseRecordingHelpLineSub:nth-child(2n+1),
.parseRecordingHelpLine:nth-child(2n) {
   color: rgb(169, 210, 234);
}

.parseRecordingHelpContainer {
   display: none;
}

.parseRecordingOptionsExplanation[data-type="outlines"] .parseRecordingHelpContainer[data-type="outlines"] {
   display: block;
}

.parseRecordingOptionsExplanation[data-type="tasks"] .parseRecordingHelpContainer[data-type="tasks"] {
   display: block;
}

.closeParseOptionsExplanation {
   position: absolute;
   top: 2px;
   right: 10px;
   cursor: pointer;
}

.parseRecordingOptionsExplanationInner {
   padding: 20px;
}

.parseRecordingOptionsExplanationTitle {
   background: black;
   text-align: center;
   height: 30px;
   line-height: 30px;
}

.parseRecordingOptionsExplanationTitle {
   border-bottom: 1px solid rgb(51, 51, 51);
}

.parseRecordingHelpLine {
   line-height: 20px;
   margin-bottom: 25px;
   color: rgb(201, 201, 206);
}

.parseRecordingHelpLine.specificLine {
   background: black;
   color: rgb(202, 187, 67);
   text-align: center;
}

.parseRecordingHelpLineSub {
   line-height: 20px;
   margin-bottom: 20px;
}

.parseRecordingHelpContainer {}

.parseRecordingOptionsLineCover {
   background: rgba(14, 14, 15, 0.64);
   position: absolute;
   top: 0px;
   left: 0px;
   width: 100%;
   height: 100%;
   z-index: 8;
}

.parseRecordingOptionsLineTitle {
   display: inline-block;
   background: black;
   padding: 0px 10px;
   height: 25px;
   line-height: 25px;
}

.parseRecordingOptionBox {
   display: inline-block;
}

.oneParseRecordingOption {
   display: inline-block;
   cursor: pointer;
   background: rgb(50, 53, 91);
   padding: 0px 8px;
   opacity: 0.3;
   height: 25px;
   line-height: 25px;
   border: 1px solid black;
}

.oneParseRecordingOption[data-active="true"] {
   opacity: 1;
}

.parseRecordingOptionsToggle {
   display: inline-block;
   height: 38px;
   line-height: 38px;
   vertical-align: top;
   position: relative;
   font-size: 14px;
   cursor: pointer;
   color: dimgray;
   width: 30px;
}

.parseRecordingMessage {
   display: inline-block;
   font-size: 10.5px;
   margin-left: 4px;
   color: rgb(173, 199, 226);
   cursor: default;
   position: absolute;
   top: 23px;
   opacity: 0;
   transition: opacity 0.3s ease 0s;
   right: 9px;
}

#taskParseArea .parseRecordingMessage {
   opacity: 0;
   top: 60px;
}

.parseRecordingOptions {
   display: none;
}

.parseRecordingNote {
   display: inline-block;
   margin-right: 5px;
   color: rgb(200, 170, 210);
}

#page[data-width="showingConsoles"] .parseRecordingMessage {
   opacity: 0.3;
   top: 52px;
}

#recordingMenu.shrink {
   transform: scale(0.74);
   top: -96px;
   height: 867px;
   overflow: hidden;
}

#recordingMenuTitle {
   position: absolute;
   top: 0px;
   left: 0px;
   width: 100%;
   background: black;
   color: rgb(137, 154, 160);
   height: 39px;
   text-align: center;
   line-height: 39px;
}

.recordingBorderLockButton,
.detachBoxMenus {
   position: absolute;
   bottom: 0px;
   left: 700px;
   background: rgb(54, 37, 37);
   padding: 3px;
   height: 22px;
   line-height: 15px;
   color: lightgray;
   cursor: pointer;
   width: 95px;
   text-align: center;
   opacity: 0.45;
}

.recordingBorderLockButton {
   left: unset;
   right: 300px;
}

.detachBoxMenus {
   left: 120px;
   width: 150px;
}

#page[data-borderlock="true"] .recordingBorderLockButton {
   background: rgb(29, 46, 60);
}

#page[data-borderlock="false"] .recordingBorderLockButton {}

.borderLockOn,
.borderLockOff {
   display: none;
}

#page[data-borderlock="true"] .recordingBorderLockButton .borderLockOn {
   display: inline-block;
}

#page[data-borderlock="false"] .recordingBorderLockButton .borderLockOff {
   display: inline-block;
}

.extraRecordingToggle {
   background: rgb(52, 57, 127);
   position: absolute;
   bottom: 0px;
   left: 300px;
   cursor: pointer;
   opacity: 0.6;
}

.extraRecordingToggle.eight {
   background: rgb(5, 11, 105);
   position: absolute;
   bottom: 0px;
   left: 400px;
}

.recordingMenuSaveButton {
   background: rgb(6, 24, 63);
   cursor: pointer;
   display: inline-block;
   padding: 0px 3px;
   height: 30px;
   line-height: 30px;
   border: 1px solid black;
   color: lightgray;
}

.recordingMenuSaveButton.getLocations {
   display: none;
}

.recordingLocationsMenuLine[data-type="saveLoadSlots"] .recordingMenuSaveButton {
   margin-right: 12px;
}

.recordingLocationsMenuLabel,
#recordingContentSelection {
   background: black;
   padding: 6px;
   position: absolute;
   top: unset;
   right: 18px;
   color: lightgray;
   opacity: 0.6;
   bottom: 0px;
   display: none;
}

#recordingContentSelection {
   right: unset;
   left: 80px;
   cursor: pointer;
   opacity: 0.4;
   display: none;
}

#page[data-recordingbar="show"] .recordingLocationsMenuLabel {
   display: none;
}

.recordingLocationMenuHide {
   display: inline-block;
   cursor: pointer;
   position: absolute;
   right: 24px;
   font-size: 15px;
}

.recordingLocationsInputContainer {}

.recordingLocationsInputContainer .recordingLocationsMenuLine {
   height: 54px;
}

#page .recordingMenuTitleElement {
   border: 1px solid rgb(33, 33, 33);
   display: inline-block;
   height: 32px;
   line-height: 32px;
   text-align: center;
   background: rgb(19, 21, 22);
}

#recordingMenu[data-filter="colors"] .recordingMenuTitleElement,
#recordingMenu[data-filter="location"] .recordingMenuTitleElement,
#recordingMenu[data-filter="content"] .recordingMenuTitleElement {
   display: none;
}

#recordingMenu[data-filter="colors"] .recordingMenuTitleElement[data-type="opacity"] {
   display: inline-block;
}

#recordingMenu[data-filter="content"] .recordingMenuTitleElement[data-type="itemContent"] {
   display: inline-block;
}

#page #recordingMenu[data-filter="content"] .recordingMenuTitleElement[data-type="itemContent"],
#page #recordingMenu[data-filter="content"] .recordingContentContainer {
   width: calc(100% - 330px);
}

#recordingMenu[data-filter="location"] .recordingMenuTitleElement[data-type="Coordinates"],
#recordingMenu[data-filter="location"] .recordingMenuTitleElement[data-type="moveItem"] {
   display: inline-block;
}

#page #recordingMenu .recordingMenuTitleElement[data-type="number"],
#page #recordingMenu .recordingMenuTitleElement[data-type="shown"],
#page #recordingMenu .recordingMenuTitleElement[data-type="itemTitle"] {
   display: inline-block;
}

#page .recordingMenuTitleElement[data-type="shown"] {
   cursor: pointer;
   background: rgba(5, 29, 47, 0.66);
}

#recordingMenu[data-filter="colors"] .recordingMenuTitleElement[data-type="colors"],
#recordingMenu[data-filter="colors"] .recordingMenuTitleElement[data-type="itemTitle"] {
   display: inline-block;
}

#page .recordingMenuTitleElement[data-type="colors"] {
   display: none;
}

.recordingLocationsMenuLine {
   background: rgb(28, 40, 67);
   border: 1px solid black;
   margin: 3px 18px;
   padding: 8px;
   position: relative;
}

#reminderMenuMessageArea {
   text-align: center;
   color: lightgray;
   position: absolute;
   width: 100%;
   display: none;
}

.recordingMenuSaveCover {
   background: rgba(0, 0, 0, 0.9);
   color: lightgray;
   padding: 11px;
   text-align: center;
   font-size: 18px;
   display: none;
   z-index: 300;
}

.clickMeToHide {
   border: 1px solid rgb(67, 67, 65);
   cursor: pointer;
   display: inline-block;
   opacity: 0.6;
}

.recordingLocationsMenuLine[data-type="filters"] {
   text-align: center;
}

#page .recordingLocationsInputContainer .recordingLocationsMenuLine {
   margin: 0px 18px;
}

#page .recordingLocationsMenuTitle,
.recordingMenuTitleElement[data-type="itemTitle"] {
   display: inline-block;
   border: 1px solid rgba(21, 21, 21, 0);
   width: 150px;
   text-align: center;
   background: rgb(0, 0, 0);
   max-width: unset;
}

.recordingMenuTitleElement[data-type="itemTitle"] {
   background: rgb(19, 21, 22);
}

.recordingLocationsMenuTitle,
#recordingMenu input,
#page #recordingMenu select {
   line-height: 30px;
   font-size: 13px;
}

#recordingMenu input,
#page #recordingMenu select {
   background: rgb(11, 23, 41);
   color: lightgray;
   padding: 4px;
   width: 100px;
   margin-left: 18px;
   line-height: 25px;
   font-size: 13px;
   vertical-align: top;
}

#page #recordingMenu .recordingLocationsMenuLine[data-type="saveLoadSlots"] select {
   margin-left: 6px;
}

#recordingMenu .recordingLocationX,
#recordingMenu .recordingLocationY {
   border: 1px solid black;
   height: 32px;
}

#recordingMenu input[type="number"] {
   width: 60px;
}

#recordingMenu #recordingSlot,
#recordingMenu #layoutSlot {
   width: 180px;
}

#recordingMenu #layoutSlot {
   background: rgb(18, 21, 32);
}

.recordingBoxOneCoordinateTitle {
   background: rgb(10, 12, 31);
   width: 90px;
   text-align: center;
}

.recordingBoxOneCoordinateTitle {
   display: inline-block;
}

#page #recordingSlotName {
   width: 300px;
}

#page #recordingMenu select {
   width: 300px;
   line-height: 4px;
   padding: 0px;
}

#page #recordingMenu #recordingLocationsSelect {
   width: 70px;
}

.recordingLocationsMenuOneButton {
   background: rgb(4, 14, 35);
   padding: 6px;
   cursor: pointer;
   display: inline-block;
}

#recordingMenu[data-filter="content_location"] .recordingLineElement[data-type="colors"] {
   display: none;
}

#recordingMenu[data-filter="colors"] .recordingLineElement[data-type="arrows"],
#recordingMenu[data-filter="colors"] .recordingLineElement[data-type="content"],
#recordingMenu[data-filter="colors"] .recordingLineElement[data-type="coordinates"] {
   display: none;
}

#recordingMenu[data-filter="location"] .recordingLineElement[data-type="colors"],
#recordingMenu[data-filter="location"] .recordingLineElement[data-type="content"] {
   display: none;
}

#recordingMenu[data-filter="content"] .recordingLineElement[data-type="colors"],
#recordingMenu[data-filter="content"] .recordingLineElement[data-type="coordinates"],
#recordingMenu[data-filter="content"] .recordingLineElement[data-type="arrows"] {
   display: none;
}

#recordingMenu .recordingLineElement[data-type="opacity"],
#page #recordingMenu .recordingMenuTitleElement[data-type="opacity"] {
   width: 84px;
   margin-left: 12px;
}

#recordingMenu[data-filter="location"] .recordingLineElement[data-type="opacity"],
#page #recordingMenu[data-filter="location"] .recordingMenuTitleElement[data-type="opacity"] {
   display: inline-block;
}

#page #recordingMenu .recordingMenuTitleElement[data-type="opacity"] {
   margin-left: 15px;
}

#recordingMenu .recordingLineElement[data-type="opacity"] {
   padding: 0px;
}

#recordingMenu[data-filter="content"] .recordingOpacityContainer {
   display: none;
}

.recordingOpacityPercent {
   display: inline-block;
   color: lightblue;
}

#recordingTasks {
   border: 3px solid rgb(48, 123, 119);
   right: 0px;
   bottom: 0px;
   height: 23%;
   width: 45%;
   background: rgb(5, 5, 45);
   padding: 20px 8px 8px;
   overflow-y: auto;
   display: none;
}

.recordingTasksLabel {
   background: rgb(21, 55, 68);
   position: absolute;
   top: 0px;
   right: 0px;
   padding: 6px;
}

#switchWidthsButton {
   z-index: 120;
   border: 2px solid rgb(0, 123, 255);
   right: unset;
   left: 0px;
   top: 0px;
   height: 30px;
   bottom: unset;
   background: rgb(24, 26, 28);
   color: white;
   position: fixed;
   cursor: pointer;
}

.recordingBoxOneCoordinateTitle {
   width: 34px;
}

#outerTestPage[data-width="wideContainer"] #recordingMenu {
   width: 75% !important;
}

#outerTestPage[data-width="wideContainer"] #jsInfo,
#outerTestPage[data-width="wideContainer"] #recordingTasks {
   width: 20% !important;
}

#recordingLocationsSelect {
   min-width: 80px;
   text-align: center;
   height: 30px;
   line-height: 30px;
   font-size: 15px;
   vertical-align: top;
   background: rgb(23, 19, 48);
}

#page #recordingMenu .recordingLocationsMenuLine[data-type="boxesArrows"] select,
#page #recordingMenu .recordingLocationsMenuLine[data-type="boxesArrows"] input {
   margin-left: 1px;
   margin-right: 15px;
}

.recordingLocationsTypeButton {
   border: 1px solid black;
   display: inline-block;
   cursor: pointer;
   width: 160px;
   text-align: center;
   background: rgb(0, 0, 0);
   color: rgb(198, 206, 209);
   margin-right: 5px;
   font-size: 15px;
   padding: 0px 3px;
}

.recordingLocationsTypeButton[data-active="yes"] {
   background: rgb(6, 20, 26);
   color: rgb(160, 186, 199);
   cursor: default;
   font-weight: 600;
   border: 2px solid rgb(160, 186, 199);
}

.recordingLineElement {
   margin-left: 10px;
   border: 1px solid rgb(48, 90, 140);
   display: inline-block;
   max-width: 140px;
   overflow: hidden;
   background: rgb(37, 37, 48);
   padding: 4px;
   white-space: nowrap;
   vertical-align: top;
   height: 35px;
   line-height: 35px;
   position: relative;
}

.recordingLineArrow {
   display: inline-block;
   cursor: pointer;
}

.recordingLocationsMenuTitle {
   background: rgb(4, 7, 38);
   padding: 0px;
   border: none;
   color: rgb(184, 199, 204);
}

.recordingMenuTitleElement[data-type="itemTitle"] {
   margin-left: 10px;
}

#recordingMenu .recordingLineContentBox,
#recordingMenu .recordingLineElement input[type="number"] {
   margin: 0px;
}

#page #recordingMenu .recordingOpacityContainer input {
   border: none;
   height: 30px;
   text-align: center;
}

#page .recordingLineContentBox {
   border: none;
   padding: 0px 0px 0px 4px;
   height: 32px;
   width: 100%;
   vertical-align: top;
}

.recordingLineArrow {
   background: black;
   position: absolute;
   top: 0px;
   width: 30px;
   height: 18px;
   color: rgb(40, 91, 142);
   font-size: 18px;
   overflow: hidden;
   text-align: center;
   border: 1px solid rgba(81, 81, 81, 0.26);
   line-height: 10px;
}

.recordingLineArrow.up,
.recordingLineArrow.down {
   left: 18px;
   padding-top: 1px;
}

.recordingLineArrow.left,
.recordingLineArrow.right {
   bottom: unset;
   top: 0px;
   width: 18px;
   height: 36px;
   padding-top: 11px;
}

.recordingLineArrow.up {
   top: 0px;
   bottom: unset;
   border-bottom: none;
   padding-top: 2px;
}

.recordingLineArrow.down {
   top: unset;
   bottom: 0px;
}

.recordingLineArrow.left {
   left: 2px;
}

.recordingLineArrow.right {
   left: 46px;
}

.recordingArrowsContainer,
#page .recordingMenuTitleElement[data-type="moveItem"] {
   width: 65px;
   max-width: unset;
   margin-left: 10px;
}

#page #recordingMenu .recordingArrowsContainer {
   background: none;
   border: none;
   height: 36px;
   width: 68px;
}

.recordingMenuToggleHelp {
   position: absolute;
   cursor: default;
   top: 11px;
   right: 14px;
   font-size: 14px;
   color: lightgray;
}

#page #recordingMenu .recordingLocationsContainer,
.recordingMenuTitleElement[data-type="Coordinates"] {
   width: 225px;
   background: none;
   padding: 0px;
   max-width: unset;
   margin-left: 10px;
   border: none;
}

#page[data-width="showingConsoles"] .recordingLocationsContainer,
#page[data-width="showingConsoles"] .recordingMenuTitleElement[data-type="Coordinates"] {
   width: calc(100% - 641px) !important;
   border: 1px solid rgb(21, 75, 29) !important;
}

#recordingMenu .customRecordingRowLabel {
   background: rgb(49, 37, 54);
   margin: 0px;
   width: 100%;
   height: 100%;
   border: none;
}

#page #recordingMenu .recordingMenuSetDefaultButton {
   background: rgb(9, 19, 51);
   display: inline-block;
   padding: 0px 3px;
   cursor: pointer;
   color: rgb(176, 203, 211);
}

#page #recordingMenu .recordingMenuSetDefaultButton.preview {
   background: rgb(39, 71, 124);
   display: none;
}

#page[data-recordingbar="show"] #recordingMenu .recordingMenuSetDefaultButton.preview {
   display: none;
}

#page #recordingMenu .recordingMenuSetDefaultButton.delete {
   background: rgb(28, 2, 2);
   color: lightgray;
}

#recordingMenuDefaults {
   z-index: 5000;
   position: fixed;
   background: rgb(4, 21, 38);
   border: 3px solid rgb(49, 57, 49);
   color: lightgray;
   line-height: 56px;
   font-size: 12px;
   top: 600px;
   padding: 2px;
   display: none;
}

.oneRecordingDefaultLine {
   margin: 11px;
   border: 2px solid black;
   background: rgb(45, 45, 67);
   padding: 4px;
}

.oneRecordingDefaultLine:nth-child(2n+1) {
   background: rgb(33, 23, 38);
}

.recordingMenuLayoutHelp {
   display: inline-block;
   color: lightblue;
   opacity: 0.6;
   cursor: default;
   padding-top: 3px;
}

.boxesDisplayToggleButton {
   background: rgb(5, 36, 20);
   display: inline-block;
   cursor: pointer;
   width: 190px;
   text-align: center;
}

#page[data-recordingboxes="off"] .boxesDisplayToggleButton {
   background: rgb(31, 1, 1);
   color: lightgray;
}

#recordingMenu .boxesDisplayToggleButton,
#recordingMenu .recordingLocationsTypeButton,
#recordingMenu .recordingLocationsMenuTitle,
#recordingMenu #recordingMenuArrowStep,
#recordingMenu #recordingLocationsSelect,
#recordingMenu .recordingMenuSaveButton,
#recordingMenu .recordingLineElement,
#recordingMenu #recordingSlot,
#recordingMenu #layoutSlot,
#recordingMenu #recordingMenuContentSelect,
#recordingMenu #recordingMenuLayoutSelect,
#recordingMenu .recordingMenuSetDefaultButton,
#recordingMenu .recordingTitleAndSwitch,
#recordingMenu .recordingBoxesScaleTitle,
#recordingMenu #recordingBoxesScale,
#page #recordingBoxLabel {
   height: 32px;
   line-height: 32px;
   overflow: hidden;
   vertical-align: top;
   border: 1px solid rgb(24, 53, 81);
}

#page #codeCreate .recordingMenuSetDefaultButton.changeContent {
   display: none;
}

#recordingMenu .recordingMenuSaveButton.disabled,
#page #recordingMenu .recordingMenuSetDefaultButton.delete.disabled {
   background: rgb(34, 33, 33);
   color: rgb(123, 122, 122);
   cursor: default;
   border: 1px solid rgb(18, 18, 18);
}

#page #recordingMenu #recordingBoxLabel {
   width: 136px;
}

#recordingMenu #recordingBoxesScale {
   margin-left: 8px;
}

.recordingBoxesScaleTitle {
   display: inline-block;
   width: 120px;
   text-align: center;
   background: black;
   color: lightblue;
   margin-left: 39px;
   font-size: 14px;
}

.recordingBoxesScaleTitle.clearAll {
   color: rgba(173, 216, 230, 0.46);
   cursor: pointer;
   opacity: 0.4;
   transition: opacity 0.4s ease 0s;
}

.recordingBoxesScaleTitle.parseRecording {
   cursor: pointer;
}

.recordingBoxesScaleTitle.clearAll:hover {
   opacity: 1;
}

.recordingBoxesScaleTitle.shrink {
   cursor: pointer;
}

.recordingBoxesScaleTitle.randomize {
   background: rgb(35, 46, 98);
   cursor: pointer;
   width: 170px;
   font-size: 1.2em;
   opacity: 0.3;
   display: none;
}

.boxesDisplayStatus {
   display: inline-block;
}

#page[data-recordingboxes="on"] .boxesDisplayStatus.off,
#page[data-recordingboxes="off"] .boxesDisplayStatus.on {
   display: none;
}

#page #recordingMenu .recordingLocationsMenuLine[data-type="saveLoadSlots"] .recordingLocationsMenuTitle {
   width: 96px;
   overflow: hidden;
}

#page #recordingSlot,
#page #layoutSlot,
#page #recordingMenuLayoutSelect,
#page #recordingMenuContentSelect {
   margin: 0px 4px;
}

.recordingLineElement[data-type="colors"],
.recordingMenuTitleElement[data-type="colors"] {
   margin-left: 10px;
   width: calc(100% - 300px);
   max-width: 500px;
   padding: 0px;
}

#recordingMenu .recordingLabelBox {
   padding-right: 20px;
   background: rgb(49, 37, 54);
   position: relative;
}

.invisibleOverlay {
   position: absolute;
   top: 0px;
   left: 0px;
   height: 100%;
   width: 100%;
   background: none;
   border: none;
   opacity: 0.4;
}

.recordingLabelBox .fa-pencil-alt {
   position: absolute;
   right: 8px;
}

.invisibleOverlay.partial {
   background: rgb(4, 14, 64);
}

#recordingMenu .recordingContentContainer,
.recordingMenuTitleElement[data-type="itemContent"] {
   width: 130px;
   max-width: unset;
   padding: 0px;
}

.recordingMenuTitleElement[data-type="itemContent"] {
   margin-left: 10px;
   border: 1px solid cyan;
   background: black;
}

#page #recordingMenu #recordingMenuContentSelect,
#page #recordingMenu #recordingMenuLayoutSelect {
   width: 128px;
}

.recordingVueVar {
   display: inline-block;
   font-size: 14px;
   color: lightgray;
   background: black;
   padding: 5px;
}

.recordingMenuInputBox {
   background: rgb(28, 28, 86);
   position: relative;
   width: 100%;
   z-index: 15;
   height: 100%;
   overflow: hidden;
   opacity: 1;
}

#completeCover {
   position: fixed;
   top: 0px;
   left: 0px;
   background: rgba(22, 22, 23, 0.45);
   height: 67%;
   width: 100%;
   z-index: 333;
}

.recordingMenuInputBox input {
   background: rgba(8, 2, 17, 0.92);
   border: 1px solid rgba(114, 124, 124, 0.25);
   padding: 12px 0px 12px 12px;
   color: lightblue;
}

#page .recordingMenuInputBox input {
   font-size: 20px;
   height: 100%;
   width: 100%;
}

#page[data-borderlock="true"] #recording_input_1 {
   border: 1px solid rgba(173, 216, 230, 0.27) !important;
}

#page[data-borderlock="true"] #recording_input_2 {
   border: 1px solid rgba(149, 163, 214, 0.45) !important;
}

.recordingMenuInputBox.original {
   display: none;
}

#boxesTempLocation {
   height: 201px;
   background: black;
   color: white;
   overflow-y: scroll;
}

#recordingLocationsMenu .inputBoxActualInput {
   width: unset;
}

.recordingInputIndividualToggleButton {
   background: black;
   margin-right: 8px;
   display: inline-block;
   padding: 3px;
   cursor: pointer;
}

.recordingMenuInputBoxContainer {
   position: fixed;
   background: rgb(56 56 129);
   height: 50px;
   width: 202px;
   z-index: 1500000;
   overflow: hidden;
   border: none;
}

.recordingMenuInputBoxContainer[data-status="shrunken"] {
   transform: scale(0.4) !important;
}

.recordingMenuInputBoxContainer[data-shown="off"] {
   display: none;
}

.recordingInputBoxContainerLabel {
   position: absolute;
   color: lightgray;
   right: 0px;
   text-align: center;
   font-size: 12px;
   opacity: 0.4;
   z-index: 20;
   top: 3px;
}

.recordingInputBoxContainerLabel .labelTitle,
.recordingInputBoxContainerLabel .labelNumber {
   display: inline-block;
}

.recordingInputBoxContainerLabel .labelTitle {
   width: 70px;
   background: black;
}

.recordingInputBoxContainerLabel .labelNumber {
   width: 20px;
   background: black;
}

#recording_box_1,
#recording_box_2,
#recording_box_3 {
   right: unset;
   left: 30px;
   top: 677px;
   background: rgb(57, 57, 78);
}

#recording_box_1,
#recording_box_4,
#recording_box_7 {
   left: 30px;
}

#recording_box_2,
#recording_box_5,
#recording_box_8 {
   right: unset;
   left: 378px;
}

#recording_box_3,
#recording_box_6 {
   right: unset;
   left: 630px;
}

#recording_box_4,
#recording_box_5,
#recording_box_6 {
   right: unset;
   top: 730px;
   background: rgb(2, 38, 2);
}

#recording_box_7,
#recording_box_8 {
   top: 805px;
}

#page[data-recordingboxes="off"] .recordingMenuInputBoxContainer {
   display: none;
}

#page[data-recordingboxes="off"] #recordingTempClone1,
#page[data-recordingboxes="off"] #recordingTempClone2 {
   display: none !important;
}

#page .oneRecordingMirror {
   top: -500px;
   left: -500px;
   position: fixed;
   height: 50px;
   width: unset;
   z-index: 333;
   background: rgb(47, 5, 34);
   color: white;
   padding: 12px;
   font-size: 20px;
   white-space: pre;
}

#page #recordingMirrorContainer1 {}

#page .oneRecordingMirror input {
   background: black;
   color: lightblue;
   width: unset;
}

#videoRatingContainer {
   position: fixed;
   background: rgb(0, 0, 0);
   height: 121px;
   width: 60%;
   bottom: 60px;
   z-index: 2147483647;
   color: white;
   padding-left: 10px;
   display: none;
}

.oneVideoRatingButton {
   border: 1px solid rgba(111, 119, 118, 0.53);
   display: inline-block;
   width: 50px;
   text-align: center;
   margin-left: 16px;
   background: black;
   cursor: pointer;
   color: rgb(163, 180, 179);
   height: 50px;
   line-height: 50px;
   margin-top: 28px;
   font-size: 26px;
}

.videoRatingContainerTitle {
   position: absolute;
   right: 0px;
   background: black;
   bottom: unset;
   top: 0px;
   padding: 0px;
}

.oneVideoRatingButton[data-number="1"],
#page .showOneGlossaryDetail[data-myrating="1"] {
   background: rgb(31, 91, 151);
}

.oneVideoRatingButton[data-number="2"],
#page .showOneGlossaryDetail[data-myrating="2"] {
   background: rgb(10, 28, 67);
}

.oneVideoRatingButton[data-number="3"],
#page .showOneGlossaryDetail[data-myrating="3"] {
   background: rgb(38, 56, 6);
}

.oneVideoRatingButton[data-number="4"],
#page .showOneGlossaryDetail[data-myrating="4"] {
   background: rgb(39, 13, 47);
}

.oneVideoRatingButton[data-number="5"],
#page .showOneGlossaryDetail[data-myrating="5"] {
   background: rgb(22, 8, 45);
}

.oneVideoRatingButton[data-number="6"],
#page .showOneGlossaryDetail[data-myrating="6"] {
   background: rgb(48, 17, 64);
}

.oneVideoRatingButton[data-number="7"],
#page .showOneGlossaryDetail[data-myrating="7"] {
   background: rgb(53, 40, 7);
}

.oneVideoRatingButton[data-number="8"],
#page .showOneGlossaryDetail[data-myrating="8"] {
   background: rgb(35, 28, 15);
}

.oneVideoRatingButton[data-number="9"],
#page .showOneGlossaryDetail[data-myrating="9"] {
   background: rgb(54, 30, 10);
}

.saveVideoRatings,
.toggleVideoRatings,
.toggleVideoSorter {
   background: rgb(26, 37, 70);
   position: absolute;
   bottom: 5px;
   left: 12px;
   cursor: pointer;
   padding: 3px;
   width: 150px;
   border: 1px solid black;
   color: rgb(233, 230, 230);
}

.toggleVideoRatings {
   left: 180px;
   background: rgb(54, 3, 65);
}

.toggleVideoSorter {
   left: 370px;
}

.oneVideoRatingButton.active {
   color: cyan;
   border: 1px solid cyan;
   background: rgb(18, 18, 18);
   font-weight: 600;
}

#page .oneVideoRatingFooterButton {
   position: absolute;
   background: rgb(64, 25, 72);
   cursor: pointer;
   top: 0px;
   height: 30px;
   line-height: 30px;
   width: 70px;
   text-align: center;
   padding: 0px;
   left: 457px;
   overflow: hidden;
   display: none;
}

#page .toggleRatingsArea {
   left: 537px;
   background: rgb(16, 59, 88);
}

#videoSorter {
   position: fixed;
   background: rgb(3, 3, 32);
   height: 85%;
   border: 2px solid rgb(0, 0, 0);
   left: 35px;
   top: 9px;
   width: 52%;
   z-index: 30;
   color: white;
   display: none;
}

.videoSorterTitle {
   height: 30px;
   line-height: 30px;
   text-align: center;
   color: lightgray;
   background: black;
}

.videoSorterInnerTitle {
   height: 40px;
   line-height: 40px;
   text-align: center;
   color: white;
   background: rgb(12, 31, 60);
   display: none;
}

.videoSorterInner {
   background: rgb(33, 26, 43);
   border: 1px solid rgb(0, 0, 0);
   height: calc(100% - 46px);
   width: 100%;
}

.oneVideoBox {
   min-height: 80px;
   width: 90%;
   background: rgb(43, 45, 66);
   margin: 8px 8px 18px;
   padding: 8px 8px 36px;
   border: 1px solid rgba(0, 0, 0, 0.83);
   position: relative;
}

#page .oneVideoBox[data-active="yes"] {
   background: rgb(7, 78, 24);
}

#page .oneVideoBox[data-active="yes"] .videoBoxLineType {
   background: rgb(32, 20, 6);
}

.videoBoxLine {
   margin-bottom: 8px;
}

.oneVideoBox:nth-child(2n) {
   background: rgb(24, 24, 25);
}

#videoBoxContainer {
   height: 87%;
   overflow-y: auto;
   border: 3px solid rgb(0, 0, 0);
   background: rgb(47, 43, 52);
   padding-top: 30px;
   width: 100%;
   margin-left: 0px;
   position: relative;
}

#videoSorterTasks {
   background: rgb(52, 16, 56);
   border: 2px solid black;
   font-size: 15px;
   line-height: 20px;
   display: none;
}

.videoBoxLineType {
   border: 1px solid black;
   width: 130px;
   display: inline-block;
   background: rgb(14, 13, 52);
   height: 38px;
   line-height: 38px;
   padding-left: 8px;
   color: lightblue;
}

#page #entryDetailEditor .videoSorterNumberInput,
#page #entryDetailEditor .videoSorterTextInput,
#page #entryDetailEditor .videoSorterDropdown,
#videoSorter .videoSorterTextArea,
#videoSorter .videoSorterContainer {
   background: rgb(2, 2, 25);
   display: inline-block;
   width: 369px;
   max-height: 80px;
   vertical-align: top;
   border: 1px solid rgb(0, 0, 0);
   margin-left: 5px;
   min-height: 38px;
   color: lightgray;
   line-height: 38px;
   padding-left: 8px;
}

#videoSorter .videoSorterTextArea {
   line-height: 20px;
}

#page #entryDetailEditor .videoSorterDropdown[data-meta="videoLength"] {
   width: 198px;
}

#page #entryDetailEditor .videoSorterNumberInput {
   width: 51px;
   text-align: center;
   height: 38px;
}

.videoBoxContainerTitle,
.videoBoxLineTitle {
   position: absolute;
   top: 0px;
   right: 0px;
   height: 30px;
   line-height: 30px;
   background: black;
   text-align: center;
}

.videoBoxLineTitle {
   background: rgb(8, 8, 15);
   bottom: 0px;
   top: unset;
   opacity: 0.4;
}

.videoBoxLineSetActive {
   background: rgb(20, 20, 81);
   padding: 3px 9px;
   cursor: pointer;
   position: absolute;
   bottom: 0px;
}

.videoBoxLineNumberTitle {
   position: absolute;
   bottom: unset;
   top: 0px;
   right: 0px;
   background: rgb(15, 46, 75);
   padding: 4px;
   opacity: 0.9;
   cursor: default;
}

#videoBoxButtons {
   position: relative;
   min-height: 50px;
   background: rgba(32, 46, 86, 0.47);
   padding: 8px;
}

.oneVideoBoxButton,
.videoCountChanger {
   cursor: pointer;
   background: rgb(44, 58, 120);
   display: inline-block;
   border: 2px solid black;
   vertical-align: top;
   height: 43px;
   line-height: 43px;
   padding: 0px 8px;
   color: lightblue;
}

.oneVideoBoxButton.load {
   background: rgb(11, 36, 53);
}

.videoCountChanger {
   cursor: default;
   background: rgb(59, 59, 68);
   line-height: 28px;
   padding-top: 6px;
}

#page .videoCountInput {
   background: black;
   color: lightgray;
   border: none;
   padding-left: 4px;
   width: 62px;
   height: 27px;
   line-height: 12px;
   vertical-align: top;
}

.outlineAndTaskKeyboardShortcuts {
   background: rgb(22, 22, 38);
   color: rgb(166, 192, 203);
   position: fixed;
   left: 100px;
   top: 100px;
   width: 50%;
   border: 3px solid black;
   display: none;
   z-index: 33333;
}

.oultineTasksShortcutsTitle {
   background: black;
   text-align: center;
   border-bottom: 1px solid rgb(39, 39, 39);
   height: 30px;
   line-height: 30px;
   position: relative;
   color: rgb(86, 159, 177);
}

.outlineTaskCloseThisSection {
   position: absolute;
   right: 5px;
   top: 0px;
   cursor: pointer;
   color: rgb(164, 162, 162);
}

.outlineTasksShortcutsInner {
   padding: 5px;
}

.outlineTaskKeyboardShortcutLine {
   padding: 6px;
   margin: 6px 6px 14px;
   background: rgb(11, 11, 19);
   border: 1px solid rgba(46, 53, 57, 0.9);
}

.outlineTaskKeyboardShortcutLine.enterOnly {
   color: rgb(200, 205, 159);
}

.outlineTaskKeyboardShortcutLine.tabOne {
   color: rgb(199, 190, 213);
}

.outlineTaskKeyboardShortcutLine.tabTwo {
   color: rgb(138, 166, 197);
}

.outlineTaskKeyboardShortcutLine.oddRow {
   background: rgb(14, 14, 18);
   color: rgb(127, 167, 185);
}

.outlineTaskKeyboardShortcutLine.modifier {
   color: rgb(179, 145, 83);
   text-align: center;
}

#taskKeyboardShortcuts .outlineOnly {
   display: none;
}

#outlineKeyboardShortcuts .taskOnly {
   display: none;
}

#outlineCreator {
   background: rgb(20, 20, 20);
   border: 2px solid rgb(0, 0, 0);
   position: fixed;
   height: 86%;
   top: 63px;
   z-index: 333;
   color: lightgray;
   left: 17px;
   width: 25%;
   overflow: hidden;
   display: none;
}

#outlineCreator[data-searching="yes"] {}

#outlineCreator[data-searching="yes"] .outlineCreatorMainArea {
   height: 65%;
}

#outlineCreator[data-searching="yes"] .outlineLines {
   height: 100%;
}

.debugMidLevel {
   background: rgb(41, 25, 3);
   color: lightgray;
}

.outlineCreatorTitle,
.cloneOutlineCreatorTitle {
   background: black;
   height: 30px;
   line-height: 30px;
   text-align: center;
   border-bottom: 1px solid rgb(53, 52, 52);
}

.outlineForText {
   color: rgb(211, 211, 211);
}

#outlineClone .cloneOutlineCreatorTitle {}

.outlineCreatorInner {
   height: calc(100% - 272px);
   background: rgb(13, 13, 14);
   position: relative;
}

.outlineCreatorButtonsRow,
.outlineCreatorMainArea {
   padding: 8px;
   border: 1px solid rgb(0, 0, 0);
   color: lightgray;
   position: relative;
   min-height: 50px;
}

.outlineCreatorMainArea {
   border: none;
}

.outlineSubmenuArea {}

.outlineSlotNameTitle {
   display: inline-block;
   height: 30px;
   line-height: 31px;
}

.outlineButtonsBox {
   display: inline-block;
}

.outlineCreatorMainArea {
   height: 100%;
   color: lightblue;
   padding: 0px;
}

.outlineCreatorDivTitle {
   position: absolute;
   padding: 4px;
   background: black;
   right: 0px;
   bottom: 0px;
   font-size: 12px;
   opacity: 0.2;
   display: none;
}

.outlineCreatorDivTitle.control {
   font-size: 11px;
}

.outlineCreatorDivTitle.main {
   left: 0px;
   right: unset;
}

.inspectorMainEmptyDiv,
.taskListEmptyDiv,
.outlineEmptyDiv,
.inspectorElementEmptyDiv {
   opacity: 0.2;
   font-size: 0px !important;
   border: none !important;
   background: rgb(83, 83, 83) !important;
}

.outlineCreatorDivTitle.entireContainer {
   background: rgb(5, 6, 69);
   right: unset;
   opacity: 0.3;
   left: 8px;
}

.outlineCreatorControl {
   position: absolute;
   right: 0px;
   width: 21%;
   background: rgb(23, 23, 29);
   border: 2px solid rgb(55, 55, 5);
   height: 86%;
   top: 0px;
   color: lightgray;
   display: none;
}

.outlineFullDebugData {
   background: rgb(50, 6, 49);
   padding: 6px;
   bottom: 50px;
   position: absolute;
}

.outlineCreatorButton.cannotMakeDefault,
.outlineCreatorButton.thisIsDefault {
   opacity: 0.4;
   cursor: default;
}

.outlineCreatorButton.resetOutlineArr {
   background: rgb(27, 52, 5);
   margin-left: 70px;
   opacity: 0.4;
   display: none;
}

#outlineCreator .outlineLines input,
#outlineClone input,
#outlineClone .oneOutlineTextInput {
   background: rgb(35, 44, 63);
   color: rgb(186, 195, 199);
   padding: 2px 4px;
   border: none;
}

#outlineClone .oneOutlineTextInput {
   display: inline-block;
   width: calc(100% - 52px);
   text-transform: none !important;
   overflow: hidden;
   vertical-align: top;
}

.outlineLineLevel,
.outlineLineIndex {
   position: absolute;
   right: 0px;
   background: darkblue;
   color: lightblue;
   top: 0px;
   opacity: 1;
}

.outlineLineLevel {
   display: none;
}

#outlineClone .outlineLineLevel {
   display: none;
}

.newOutlineLabel {
   background: rgb(62, 8, 76);
   border: 1px solid black;
   color: rgb(173, 195, 195);
   position: absolute;
   right: 50px;
   top: 10px;
   text-align: center;
   width: 21px;
   display: none;
}

.oneOutlineLine[data-level="2"] {
   text-transform: capitalize;
}

.oneOutlineLine[data-level="1"] .newOutlineLabel {
   background: rgb(50, 46, 46);
}

.newOutlineLabel .fortyFive {
   transform: rotate(45deg);
   font-size: 0.8em;
   margin-right: 3px;
   bottom: 1px;
   position: relative;
}

.addCloseOutlineRow {
   position: absolute;
   right: 15px;
   bottom: 8px;
   width: 30px;
   text-align: center;
   cursor: pointer;
}

.outlineLineIndex {
   right: 0px;
   background: none;
   color: inherit;
   top: 0px;
   padding: 0px 2px;
   font-size: 9px;
}

#outlineClone .outlineLineIndex {
   display: none;
}

.outlineTopLevelDebug,
.outlineTopLevel {
   background: rgb(10, 5, 41);
   border: 2px solid rgb(98, 98, 6);
   width: 87%;
}

.outlineTopLevelDebug {
   height: 3px;
   overflow: hidden;
}

.outlineTopLevel {
   background: black;
   border: 2px solid rgb(45, 78, 12);
   margin-bottom: 14px;
}

.outlineDebugLines,
.outlineLines {
   padding: 6px;
   overflow: hidden;
   margin: 2px;
}

.outlineDebugLines {
   display: none;
}

.outlineDebugLines {
   width: unset;
   max-height: 289px;
   overflow-y: auto;
}

.outlineLines {
   margin-top: 0px;
   height: 88%;
   overflow-y: auto;
}

.outlineLines::-webkit-scrollbar-thumb {
   background: rgb(95, 95, 113);
}

.moveOutlineUpDown,
.changeOutlineLevel {
   display: inline-block;
   margin: 0px 6px;
}

.oneOutlineLine[data-level="1"] .fa-angle-left,
.oneOutlineLine[data-level="5"] .fa-angle-right {
   opacity: 1;
   cursor: default;
   visibility: hidden;
}

.changeOutlineLevel {}

.oneOutlineRowDelete {
   display: inline-block;
   cursor: pointer;
}

.changeOutlineLevel i {
   cursor: pointer;
   font-size: 15px;
}

.changeOutlineLevel .fa-angle-right {
   margin-left: 10px;
}

.moveOutlineUpDown {
   position: absolute;
   left: 0px;
}

.oneOutlineLineSymbol {
   display: inline-block;
   width: 30px;
   text-align: center;
   color: rgb(176, 180, 185);
   font-size: 15px;
   position: relative;
   top: 2px;
}

#oneOutlineLineSymbol .oneOutlineSymbol {
   veritcal-align: top;
}

.oneOutlineLineSymbol .fortyFive {
   transform: rotate(45deg);
   font-size: 0.95em;
}

.moveOutlineLineUp,
.moveOutlineLineDown {
   display: inline-block;
   cursor: pointer;
   font-size: 16px;
}

.moveOutlineLineUp {
   margin-left: 10px;
}

.oneOutlineLine {
   background: rgb(34, 34, 34);
   margin: 0px 0px 8px;
   padding: 11px 14px 6px 61px;
   position: relative;
   color: rgb(162, 162, 167);
   white-space: nowrap;
}

.oneOutlineLine[data-index="0"] {
   margin-top: 0px !important;
}

#outlineClone .oneOutlineLine {
   /* padding-top: 10px; */
   /* padding-bottom: 10px; */
}

.oneOutlineLine[data-index="0"] .moveOutlineLineUp {
   display: none;
}

.oneOutlineLine[data-level="2"] {
   background: rgb(37, 40, 56);
   padding-left: 79px;
}

#page .oneOutlineLine[data-level="2"] input,
#outlineClone .oneOutlineTextInput[data-level="2"] {
   background: rgb(0, 0, 0);
   color: rgb(133, 176, 197);
}

.oneOutlineLine[data-level="3"] {
   background: rgb(27, 44, 60);
   padding-left: 106px;
}

#page .oneOutlineLine[data-level="3"] input,
#outlineClone .oneOutlineTextInput[data-level="3"] {
   background: rgb(69, 70, 107);
   color: rgb(158, 178, 191);
}

.oneOutlineLine[data-level="4"] {
   background: rgb(44, 48, 53);
   padding-left: 138px;
}

#page .oneOutlineLine[data-level="4"] input,
#outlineClone .oneOutlineTextInput[data-level="4"] {
   background: rgb(31, 60, 92);
   color: lightgray;
}

.oneOutlineLine[data-level="5"] {
   background: rgb(68, 45, 73);
   padding-left: 169px;
}

#page .oneOutlineLine[data-level="5"] input,
#outlineClone .oneOutlineTextInput[data-level="5"] {
   background: rgb(57, 61, 69);
   color: rgb(215, 202, 216);
}

#outlineClone .oneOutlineLine[data-level="1"] {
   padding-left: 20px;
}

#outlineClone .oneOutlineLine[data-level="2"] {
   padding-left: 45px;
}

#outlineClone .oneOutlineLine[data-level="3"] {
   padding-left: 70px;
}

#outlineClone .oneOutlineLine[data-level="4"] {
   padding-left: 95px;
}

#outlineClone .oneOutlineLine[data-level="5"] {
   padding-left: 120px;
}

#taskListContainer,
#taskListSettings,
#outlineCreatorSettings,
#elementInspectorSettings,
#taskListClone,
.taskListImageArea,
#outlineClone {
   position: fixed;
   height: 79%;
   border: 2px solid rgb(87, 93, 149);
   left: 19px;
   top: 81px;
   width: 31%;
   z-index: 360;
   color: lightgray;
   overflow: hidden;
   background: rgb(16, 16, 35);
   display: none;
}

#taskListClone {
   height: unset !important;
}

#outlineClone {
   overflow: visible;
}

.outlineImageArea {
   z-index: 5;
   position: absolute;
   width: 100%;
   border: 1px solid rgb(27, 128, 129);
   opacity: 1;
   max-height: 500px;
   overflow: hidden;
   display: none;
   background: rgb(24, 23, 23);
   min-height: 100px;
}

.canvasArea {
   overflow: hidden;
   color: white !important;
}

.outlineImageArea.nowGenerating {
   max-height: 100px !important;
}

.outlineImageArea.nowGenerating .outlineImageVersionText {
   display: none;
}

#taskListContainer {
   border: none;
}

#taskListContainer[data-submenu="location"] {}

#taskListContainer[data-submenu="location"] .taskListButtonsRow[data-type="original"] {
   display: none;
}

.taskListButtonsRow[data-type="original"] {}

.taskListButtonsRow[data-type="location"],
.outlineCreatorButtonsRow[data-type="location"] {
   display: none;
}

.secondTaskNumericTitle,
#taskListContainer .taskListButtonsRow[data-type="location"] input,
.secondOutlineNumericTitle,
#outlineCreator .outlineCreatorButtonsRow[data-type="location"] input {
   display: inline-block;
   background: none;
   width: 54px;
   overflow: hidden;
   border: none;
   height: 25px;
   text-align: center;
   vertical-align: top;
}

#page .outlineCreatorButtonsRow.locationTwo {
   padding-top: 0px;
}

#outlineCreator .outlineCreatorButtonsRow[data-type="location"] input {
   background: rgb(41, 47, 58);
   color: rgb(196, 196, 196);
}

.secondTaskNumericTitle,
.secondOutlineNumericTitle {
   line-height: 25px;
}

.secondOutlineNumericTitle {
   display: inline-block;
   color: inherit;
}

#taskListContainer .taskListButtonsRow[data-type="location"] input {
   background: rgb(18, 18, 49);
   border: none;
}

#taskListContainer[data-submenu="location"] .taskListButtonsRow[data-type="location"] {
   display: block;
   overflow: hidden;
   height: unset;
}

#outlineCreator[data-submenu="location"] .outlineCreatorButtonsRow[data-type="location"] {
   display: block;
   padding-bottom: 0px;
}

#outlineCreator[data-submenu="location"] .outlineCreatorButtonsRow[data-type="original"] {
   display: none;
}

.secondaryInputTitle,
#secondaryOutlineLayoutDropdown,
#secondaryOutlineColorDropdown,
#secondaryTaskColorDropdown,
#secondaryTaskLayoutDropdown {
   display: inline-block;
   border: none;
   vertical-align: top;
   height: 25px;
   border-radius: 0px;
   font-size: 14px;
}

#secondaryOutlineLayoutDropdown,
#secondaryOutlineColorDropdown,
#secondaryTaskColorDropdown,
#secondaryTaskLayoutDropdown {
   width: calc(100% - 61px);
}

.secondaryInputTitle {
   background: rgb(0, 0, 0);
   color: rgb(211, 211, 211);
   padding: 0px 4px;
   width: 57px;
   text-align: center;
   line-height: 25px;
   font-size: 14px;
}

.secondaryInputContainer {
   display: inline-block;
   margin: 6px;
   width: 41%;
   font-size: 0px;
}

.secondTaskListInputBox,
.secondOutlineInputBox {
   display: inline-block;
   margin: 6px;
   height: 23px;
   line-height: 27px;
   padding-top: 0px;
   background: black;
   overflow: hidden;
}

.secondOutlineInputBox {
   color: rgb(211, 211, 211);
}

#taskListContainer .secondTaskListInputBox input {
   color: lightgray;
}

#taskListClone,
#outlineClone {
   border: 1px solid rgba(47, 47, 47, 0.79);
   display: block;
   left: 400px;
   top: 0;
   z-index: 0;
   opacity: 1 !important;
}

#outlineClone {
   z-index: 0;
   top: 72px;
   left: 33%;
   overflow: hidden;
   height: unset !important;
}

.taskListImageVersion {
   background: rgb(24, 23, 23);
   color: lightblue;
   cursor: pointer;
}

#taskListClone .taskListImageArea {
   display: none;
}

.cloneTaskListInner {
   height: calc(100% - 30px);
   background: none;
}

.taskListTitle {
   height: 30px;
   line-height: 30px;
   text-align: center;
   color: lightgray;
   background: black;
}

.taskListInnerTitle {
   height: 40px;
   line-height: 40px;
   text-align: center;
   color: white;
   background: rgb(14, 9, 39);
}

.taskListInner {
   background: rgb(33, 26, 43);
   border: 3px solid rgb(124, 131, 131);
   height: calc(100% - 49px);
   width: 98%;
   position: relative;
}

#taskListDebug {
   position: absolute;
   bottom: 50px;
   background: rgb(7, 41, 51);
   padding: 13px;
   line-height: 25px;
   width: 100%;
}

.taskSaveStatus {
   background: black;
   padding: 3px;
   color: rgb(0, 255, 28);
   width: 141px;
   display: inline-block;
   text-align: center;
   cursor: pointer;
}

.taskSaveStatus[data-state="modified"] {
   color: orange;
}

.taskListContainerLabel {
   position: absolute;
   bottom: 17px;
   right: 0px;
   background: black;
   padding: 4px;
   opacity: 1;
   display: none;
}

#taskListSettings .taskListContainerLabel,
#outlineCreatorSettings .outlineCreatorContainerLabel,
#elementInspectorSettings .inspectorContainerLabel {
   bottom: 120px;
}

#elementInspectorSettings[data-type="layout"] .oneInspectorSettingsLine[data-type="colors"],
#elementInspectorSettings[data-type="colors"] .oneInspectorSettingsLine[data-type="layout"],
#elementInspectorSettings[data-type="layout"] .inspectorColorSeparator,
#taskListSettings[data-type="layout"] .oneTaskListSettingsLine[data-type="colors"],
#taskListSettings[data-type="colors"] .oneTaskListSettingsLine[data-type="layout"],
#taskListSettings[data-type="layout"] .taskSettingColorSeparator,
#outlineCreatorSettings[data-type="layout"] .oneOutlineSttingsLine[data-type="colors"],
#outlineCreatorSettings[data-type="colors"] .oneOutlineSettingsLine[data-type="layout"],
#outlineCreatorSettings[data-type="layout"] .outlineSettingColorSeparator {
   display: none;
}

#elementInspectorSettings[data-type="layout"] .oneOutlineSttingsLine[data-type="colors"],
#elementInspectorSettings[data-type="colors"] .oneOutlineSettingsLine[data-type="layout"],
#elementInspectorSettings[data-type="layout"] .outlineSettingColorSeparator {
   display: none;
}

#taskListSettings[data-type="colors"],
#outlineCreatorSettings[data-type="colors"] {}

#taskListSettings[data-type="colors"] #taskListLayoutDropdown,
#taskListSettings[data-type="colors"] .taskSettingsSlotTitle[data-type="layout"],
#taskListSettings[data-type="layout"] #taskListColorDropdown,
#taskListSettings[data-type="layout"] .taskSettingsSlotTitle[data-type="colors"],
#outlineCreatorSettings[data-type="colors"] #outlineCreatorLayoutDropdown,
#outlineCreatorSettings[data-type="colors"] .outlineCreatorSlotTitle[data-type="layout"],
#outlineCreatorSettings[data-type="layout"] #outlineCreatorColorDropdown,
#outlineCreatorSettings[data-type="layout"] .outlineCreatorSlotTitle[data-type="colors"] {
   display: none;
}

#elementInspectorSettings[data-type="colors"] #inspectorLayoutDropdown,
#elementInspectorSettings[data-type="colors"] .inspectorSlotTitle[data-type="layout"],
#elementInspectorSettings[data-type="layout"] #inspectorColorDropdown,
#elementInspectorSettings[data-type="layout"] .inspectorSlotTitle[data-type="colors"] {
   display: none;
}

.taskSettingColorSeparator {
   background: rgb(32, 11, 37);
   text-align: center;
   font-size: 20px;
   border: 1px solid rgba(128, 128, 128, 0.16);
   margin-top: 14px;
   position: relative;
}

#previewSettingsContainer .taskSettingColorSeparator {
   background: black;
   color: rgb(82, 140, 189);
   text-align: center;
   border-bottom: 1px solid rgb(82, 140, 189);
   height: 30px;
   line-height: 32px;
}

#previewSettingsContainer .taskSettingColorSeparator {
   margin-top: 20px;
}

#previewSettingsContainer .taskSettingColorSeparator[data-meta="headerGroup"] {
   margin-top: 0px;
}

#elementInspectorSettings[data-type="layout"] .taskSettingColorSeparator,
#outlineCreatorSettings[data-type="layout"] .taskSettingColorSeparator {
   display: none;
}

.taskColorSeparatorHelp {
   position: absolute;
   right: 7px;
   font-size: 12px;
   cursor: default;
   height: 20px;
   line-height: 20px;
   padding: 0px;
   top: 2px;
}

.taskColorSeparatorHelp i {
   line-height: 20px;
}

.taskSettingColorSeparator[data-meta="titleGroup"] {
   margin-top: 0px;
}

.taskListContainerTitle {
   background: black;
   height: 30px;
   line-height: 30px;
   text-align: center;
   position: relative;
}

#taskListDropdown,
#outlineCreatorDropdown {
   background: rgb(55, 55, 62);
   height: 25px;
   vertical-align: top;
   margin-top: 2px;
   border: none;
}

#taskListDropdown {
   max-width: calc(100% - 190px);
}

#outlineCreatorDropdown {
   max-width: calc(100% - 200px);
}

.taskListContainerClose,
.taskListSettingsToggle,
.outlineSettingsToggle,
.outlineSettingsClose,
.outlineAndTaskHelpButton {
   position: absolute;
   height: 30px;
   width: 30px;
   cursor: pointer;
   top: 0px;
   right: 8px;
   line-height: 30px;
   text-align: center;
   color: rgb(85, 85, 85);
}

.taskListContainerClose {}

#outlineCreator .outlineAndTaskHelpButton {
   right: 40px;
   top: 1px;
   left: unset;
}

#taskListContainer .outlineAndTaskHelpButton {
   left: unset;
   right: 34px;
   top: 0px;
   font-size: 13px;
}

.taskListSettingsToggle,
.outlineSettingsToggle,
.outlineAndTaskHelpButton {
   right: unset;
   left: 0px;
   color: rgb(108, 108, 108);
   opacity: 0.6;
   transition: opacity 0.3s ease 0s;
}

.taskListSettingsToggle.search,
.outlineSettingsToggle.search {
   left: 20px;
}

.taskListSettingsToggle:hover,
.outlineSettingsToggle:hover {
   opacity: 0.9;
}

.secondTaskContainerToggle {
   background: rgb(52, 52, 104);
   padding: 4px;
   display: inline-block;
   cursor: pointer;
   border: 1px solid black;
   position: absolute;
   bottom: 20px;
}

.outlineExportText,
.taskExportText {
   display: inline-block;
   margin-right: 7px;
}

.exportSpecific {
   width: 50px;
   text-align: center;
}

.oneTaskListButton,
.outlineCreatorButton {
   background: rgb(41, 42, 52);
   cursor: pointer;
   display: inline-block;
   margin: 0px 11px 0px 0px;
   padding: 0px 4px;
   color: rgb(165, 166, 190);
   border: 1px solid rgb(37, 37, 37);
   height: 32px;
   line-height: 32px;
   white-space: nowrap;
   position: relative;
}

.exportChainButton .exportWord,
.outlineCreatorButton .exportWord,
.oneTaskListButton .exportWord {
   background: inherit;
   color: inherit;
   position: absolute;
   top: 0px;
   left: 0px;
   width: 100%;
   height: 100%;
   font-size: 11px;
   text-align: center;
   display: none;
}

.exportChainButton .exportWord {
   color: rgb(173, 216, 230);
   font-size: 12px;
}

.exportChainButton .exportWord {
   height: 104%;
}

.oneTaskListButton.cannotMakeDefault,
.oneTaskListButton.thisIsDefault {
   opacity: 0.3;
   cursor: default;
}

.taskListSubmenuArea {
   background: rgb(42, 42, 47);
}

.taskListButtonsRow {
   height: 40px;
   padding: 4px 0px 0px 17px;
   background: rgb(42, 42, 47);
}

.taskListButtonsRow.locationTwo {
   padding-top: 0px;
}

.taskListButtonsRow[data-type="original"] {
   white-space: nowrap;
}

.currentTaskMenuState {
   background: rgb(2, 44, 61);
   color: white;
   padding: 20px;
   font-size: 20px;
   display: none;
}

.currentTaskMenuDiv {
   display: inline-block;
   color: orange;
}

.taskListSlotName,
.taskListActualButtons {
   display: inline-block;
   min-width: 182px;
   margin-bottom: 5px;
   height: 32px;
}

.taskListSlotName {
   margin-right: 8px;
   width: 90%;
   height: 32px;
   line-height: 32px;
   font-size: 14px;
   overflow: hidden;
}

#taskSlotNameInput,
#outlineSlotNameInput {
   background: black;
   vertical-align: top;
   width: calc(100% - 80px);
   min-width: 70px;
   max-width: 214px;
   margin: 0px;
   padding: 0px 0px 0px 5px;
   color: lightblue;
   border: none;
   height: 29px;
   line-height: 32px;
}

#outlineSlotNameInput {
   background: rgb(46, 43, 60);
   color: rgb(174, 174, 174);
}

.taskSetDefault {
   background: rgb(33, 33, 78);
   display: inline-block;
   cursor: pointer;
   color: lightgray;
   margin-right: 8px;
}

.taskSetDefault[data-isdefault="yes"] {
   opacity: 0.2;
   cursor: default;
}

.taskSetDefault[data-state="modified"] {
   opacity: 0.2;
   background: rgb(57, 56, 56);
   border: none;
   cursor: default;
}

.taskListContainerInner {
   background: rgb(8, 11, 23);
   position: relative;
   height: calc(100% - 266px);
   border: 1px solid rgb(35, 35, 35);
   overflow: hidden auto;
   padding: 2% 4% 35px;
}

.allTaskListTasks {
   height: calc(100% - 7px);
   overflow-y: auto;
}

.allTaskListTasks::-webkit-scrollbar-track {
   box-shadow: green 0px 0px 0px inset !important;
}

#taskListContainer[data-searching="yes"] .allTaskListTasks {
   height: 50%;
}

.taskListModifiedStatus {
   position: absolute;
   right: 0px;
   background: rgb(5, 52, 26);
   padding: 12px;
   bottom: 0px;
   cursor: pointer;
   display: none;
}

.randomTaskDataButton {
   position: relative;
   background: rgb(60, 67, 77);
   padding: 4px;
   cursor: pointer;
   opacity: 0.6;
   display: none;
}

.taskListImageArea {
   overflow: hidden;
   left: 0px;
   width: unset;
   z-index: 33;
   top: 0px;
   position: absolute;
   display: none;
   border: 2px solid rgb(80, 132, 192);
   height: 68%;
   background: rgb(24, 23, 23);
}

.taskImageVersionText,
.outlineImageVersionText {
   cursor: pointer;
   padding: 3px;
}

.taskListImageArea .canvasArea {
   overflow: hidden;
}

.previewTooTall {
   color: rgb(169, 178, 153);
}

.previewTooTallCorrectly {
   color: rgb(209, 188, 149);
   text-decoration: underline;
}

.taskListImageArea.nowGenerating {
   color: rgb(202, 176, 211);
   width: 100%;
   padding: 16px;
   background: black !important;
}

.taskListImageArea.nowGenerating .taskImageVersionText {
   display: none;
}

.taskListImageArea.nowGenerating {
   height: unset !important;
   max-height: 100px !important;
}

.taskListImageArea.nowGenerating .canvasArea {
   height: 35px;
}

.taskListModifiedStatus[data-status="modified"] {
   background: rgb(67, 7, 7);
}

#taskListSettings,
#elementInspectorSettings,
#outlineCreatorSettings {
   background: rgb(26, 23, 26);
   left: unset;
   width: 32%;
   z-index: 370;
   opacity: 1;
   right: 5%;
   border: 1px solid black;
   top: 100px;
   height: calc(100% - 150px);
   display: none;
}

#taskListSettings {
   display: none;
   width: 37%;
   top: 67px;
   min-width: 570px;
}

#taskListSettings.presMode .move {
   display: none;
}

#page #taskListSettings.presMode {
   height: 53%;
   left: unset;
   top: 116px;
   right: 15px !important;
}

#elementInspectorSettings,
#outlineCreatorSettings {
   right: 5%;
   width: 33%;
   top: 63px;
   min-width: 572px;
   max-width: 700px;
}

#page[data-width="showingConsoles"] #taskListSettings,
#page[data-width="showingConsoles"] #outlineCreatorSettings {
   right: unset !important;
   left: 32% !important;
   border: 1px solid #ffff0075 !important;
   width: 30% !important;
}

#page[data-width="showingConsoles"] #elementInspectorSettings {
   right: 32%;
   transform: scale(0.96);
}

#page #outlineCreatorSettings.presentation {
   height: 56%;
   top: 89px;
}

#elementInspectorSettings,
#outlineCreatorSettings {
   display: none;
}

#elementInspectorSettings [data-helptext="hideAll"] .oneHelpButton,
#taskListSettings[data-helptext="hideAll"] .oneHelpButton,
#outlineCreatorSettings[data-helptext="hideAll"] .oneHelpButton {
   display: none;
}

#taskListSettings input[type="number"],
#elementInspectorSettings input[type="number"],
#outlineCreatorSettings input[type="number"] {
   background: rgb(9, 9, 55);
   color: lightblue;
   width: 100px;
   padding-left: 14px;
   vertical-align: top;
   border: none !important;
   outline: none !important;
}

.inspectorOptionButton,
.taskListOptionButton,
.outlineOptionButton {
   background: rgb(45, 45, 85);
   display: inline-block;
   cursor: pointer;
   margin-right: 5px;
   padding: 6px;
   border: none;
   opacity: 0.8;
   font-size: 16px;
}

.inspectorOptionButton.move,
.taskListOptionButton.move,
.outlineOptionButton.move {
   background: black;
   color: orange;
   display: none;
}

#page[data-recordingbar="show"] .inspectorOptionButton.move,
#page[data-recordingbar="show"] .taskListOptionButton.move,
#page[data-recordingbar="show"] .outlineOptionButton.move {
   display: none;
}

#outlineCreatorSettings.presentation .outlineOptionButton.move,
#page[data-recordingbar="show"] .outlineOptionButton.move {
   display: none;
}

.inspectorOptionButton[data-active="yes"],
.taskListOptionButton[data-active="yes"],
.outlineOptionButton[data-active="yes"] {
   color: lightblue;
   opacity: 1;
   font-weight: 600;
   border: 1px solid rgb(84, 105, 112);
}

.allTaskListSettings {
   overflow: hidden auto;
   height: calc(100% - 132px);
   background: rgb(28, 34, 57);
}

.taskListDropdownSelection,
.taskListSettingsButtonsRow,
.outlineCreatorDropdownSelection,
.outlineCreatorButtonsRow,
.outlineSettingsButtonsRow {
   border: none;
   height: 50px;
   background: rgb(9, 12, 37);
   text-align: center;
}

.outlineCreatorButtonsRow {
   height: 40px;
   overflow: hidden;
   padding-top: 4px;
   min-height: unset;
   color: rgb(151, 151, 151);
   text-align: left;
   background: inherit;
}

.outlineCreatorButtonsRow[data-type="location"] {
   height: unset;
}

.outlineCreatorButtonsRow.two {
   padding-top: 5px;
}

.outlineSlotName {
   text-align: left;
}

.taskListDropdownSelection,
.outlineCreatorDropdownSelection {
   padding-top: 12px;
}

.allOutlineCreatorSettings {
   height: calc(100% - 130px);
   overflow-y: auto;
}

.taskSettingsSlotTitle,
.outlineCreatorSlotTitle {
   display: inline-block;
   height: 28px;
   line-height: 32px;
   vertical-align: top;
}

#codeCreate .outlineCreatorSlotTitle,
#codeCreate .taskSettingsSlotTitle {
   line-height: 28px;
}

.taskListSettingsButtonsRow,
.outlineSettingsButtonsRow {
   text-align: left;
   padding-left: 14px;
   padding-top: 10px;
   font-size: 13px;
   border: navajowhite;
}

.taskButtonsRowSlotTitle,
.taskSaveButton,
.taskMakeDefaultButton,
#taskSettingsSlotName,
.outlineSettingsSaveButton,
.outlineSettingsMakeDefaultButton,
#outlineSettingsSlot {
   display: inline-block;
   height: 30px;
   vertical-align: top;
}

.taskButtonsRowSlotTitle {
   line-height: 31px;
   margin-right: 6px;
}

.taskSaveButton,
.taskMakeDefaultButton,
.outlineSettingsSaveButton,
.outlineSettingsMakeDefaultButton {
   background: rgb(34, 52, 83);
   cursor: pointer;
   padding: 0px 11px;
   line-height: 28px;
   margin-left: 8px;
   border: 1px solid black;
}

.outlineSettingsCannotOverwrite,
.taskListSettingsCannotOverwrite {
   font-size: 9px;
   color: rgb(166, 216, 216);
   line-height: 30px;
   height: 30px;
   display: none;
}

#taskSettingsSlotName,
#outlineSettingsSlot {
   background: black;
   border: 1px solid rgba(117, 115, 115, 0.37);
   color: lightgray;
   max-width: 165px;
   padding: 0px 2px;
   width: calc(100% - 266px);
}

.inspectorOptionsButtonRow,
.taskListOptionButtonRow,
.outlineOptionsButtonRow {
   text-align: left;
   position: relative;
   height: 32px;
   overflow: hidden;
   border-bottom: 1px solid rgb(84, 105, 112);
}

.inspectorCreatorDropdownSelection {
   background: rgb(66, 66, 137);
   padding: 20px;
   font-size: 20px;
}

.allInspectorSettings {
   height: calc(100% - 88px);
   overflow-y: auto;
}

.inspectorSettingsSaveRow {
   background: black;
   padding: 12px;
}

.inspectorSettingsSave {
   background: rgb(25, 49, 96);
   padding: 6px;
   display: inline-block;
   cursor: pointer;
}

.inspectorSettingsRevertDefault {
   display: inline-block;
   background: rgb(59, 71, 101);
   cursor: pointer;
   padding: 6px;
   vertical-align: top;
   margin-left: 8px;
}

.inspectorSettingsRevertDefault[data-type="colors"] {
   display: none;
}

#page #elementInspectorSettings[data-type="colors"] .inspectorSettingsRevertDefault[data-type="layout"] {
   display: none;
   border: 1px solid white;
}

#elementInspectorSettings[data-type="colors"] .inspectorSettingsRevertDefault[data-type="colors"] {
   display: inline-block;
}

.inspectorSettingsCloseButton,
.taskListSettingsCloseButton,
.outlineSettingsCloseButton {
   position: absolute;
   cursor: pointer;
   top: 4px;
   right: 14px;
   font-size: 16px;
   color: rgb(165, 162, 162);
}

.oneInspectorSettingsLine,
.oneTaskListSettingsLine,
.oneOutlineSettingsLine {
   margin-top: 11px;
   width: 100%;
   color: rgb(177, 205, 216);
   white-space: nowrap;
   overflow: hidden;
   padding-bottom: 0px;
   min-width: 339px;
   height: 26px;
   padding-left: 0%;
   position: relative;
}


.oneInspectorSettingsLine[data-meta="zeroBorderColorDisplay"] {}

.oneInspectorSettingsLine[data-meta="zeroBorderColorDisplay"] .oneInspectorCheckbox {
   /* width: 137px; */
}


.inspectorDisplayCheckboxTitle,
.inspectorDisplayCheckboxArea {
   display: inline-block;
}

.inspectorDisplayCheckboxArea[data-status="hide"] .fa-check-square,
.inspectorDisplayCheckboxArea[data-status="show"] .fa-square {
   display: none;
}

.inspectorDisplayCheckboxArea[data-status="show"] .fa-check-square,
.inspectorDisplayCheckboxArea[data-status="hide"] .fa-square {
   display: inline-block;
}

.oneInspectorSettingsLine[data-contents="checkboxes"] {
   border: 1px solid black;
   height: unset;
   max-height: 900px;
   white-space: unset;
   background: rgba(13, 34, 86, 0.22);
}

.inspectorCheckboxesTitle {
   background: black;
   text-align: center;
   height: 30px;
   line-height: 30px;
}

.inspectorCheckboxesInner {
   padding-left: 35px;
   padding-top: 10px;
}

.oneInspectorDisplayCheckbox {
   display: inline-block;
   position: relative;
   background: black;
   border: 1px solid rgb(0, 0, 0);
   margin: 8px;
   cursor: pointer;
   height: 32px;
   line-height: 32px;
   padding: 0px 6px;
   width: 147px;
   overflow: hidden;
   text-align: center;
}

#page .oneOutlineSettingsLine[data-latest="yes"] {}

.allOutlineCreatorSettings[data-type="layout"] .oneOutlineSettingsLine[data-type="colors"] {
   display: none;
}

.taskColorLabel,
.taskColorInputSection {
   border: 1px solid rgba(0, 255, 255, 0.34);
   display: inline-block;
}

.taskColorLabel {
   margin-right: 9px;
   width: 208px;
}

.inspectorSettingsLineInputArea,
.inspectorSettingsLineTitle,
.taskSettingsLineTitle,
.taskSettingsLineInputArea,
.taskSettingsLineMeta,
.outlineSettingsLineTitle,
.outlineSettingsLineInputArea,
.outlineSettingsLineMeta {
   display: inline-block;
}

#dropdown_zeroBorderNoneRule,
#dropdown_inspectorTreeActiveBorderColor,
#dropdown_inspectorCopyIndividualDisplay {
   color: lightblue;
   padding: 0px 5px;
   height: 25.91px;
   border: none !important;
   outline: none !important;
}

#dropdown_zeroBorderNoneRule,
#dropdown_inspectorCopyIndividualDisplay {
   width: 255px;
}

#page[data-recordingbar="show"] .outlineSettingsLineMeta,
#page[data-recordingbar="show"] .taskSettingsLineMeta {
   display: none;
}

.taskSettingsLineMeta,
.outlineSettingsMeta {
   background: rgb(22, 22, 28);
   opacity: 0.6;
   color: white;
}

#elementInspectorSettings .taskSettingsLineMeta {
   display: none;
}

.inspectorSettingsLineTitle,
.taskSettingsLineTitle,
.outlineSettingsLineTitle {
   width: 43%;
   vertical-align: top;
   height: 27px;
   background: black;
   border: none;
   padding-left: 6px;
   overflow: hidden;
   text-overflow: ellipsis;
}

.inspectorIndicatorHelp.inspectorWidth {
   cursor: pointer;
}

#inspectorWidthExplanation {
   position: fixed;
   width: 424px;
   left: 100px;
   top: 300px;
   z-index: 1111;
   background: rgb(75 79 98);
   border: 1px solid rgb(40, 42, 42);
   display: none;
}

.inspectorWidthExplanationTitle {
   background: black;
   text-align: center;
   height: 40px;
   line-height: 40px;
   margin-bottom: 30px;
   border-bottom: 1px solid rgb(68, 71, 71);
}

.inspectorWidthExplanationTitle i {
   position: absolute;
   top: 0px;
   right: 10px;
   cursor: pointer;
}

.inspectorWidthExplanationLine {
   border: 1px solid rgba(158, 158, 140, 0);
   margin: 14px 14px 40px;
   font-size: 18px;
   line-height: 25px;
   color: rgb(183, 207, 215);
}

.outlineSettingsLineTitle {}

.oneInspectorCheckbox,
.oneTaskListCheckbox,
.oneOutlineCheckbox {
   display: inline-block;
   border: 1px solid black;
   margin-right: 16px;
   background: rgb(21, 58, 101);
   padding: 0px 5px;
   text-align: center;
   text-transform: capitalize;
   cursor: pointer;
   width: 89px;
}

.oneInspectorCheckbox[data-opk="whenSearching"],
.oneOutlineCheckbox[data-opk="whenSearching"],
.oneTaskListCheckbox[data-opk="whenSearching"] {
   width: 140px;
}

.taskSettingsLineInputArea,
.outlineSettingsLineInputArea {
   margin-left: -4px;
   border: none;
   height: 27px;
}

#dropdown_taskExportSettings,
#dropdown_taskEnterKeyFunction {
   background: rgb(22, 62, 136);
   border: 1px solid rgb(37, 65, 71) !important;
   outline: none !important;
}

.outlineSettingsLineInputArea select {
   background: rgb(3, 3, 54);
   height: 24px;
   overflow: hidden;
   color: lightblue;
   border: 1px solid black;
}

#taskListContainer .taskSettingsNumberInput,
#outlineCreator .outlineSettingsNumberInput {
   background: darkblue;
   color: lightblue;
   border: none;
   width: 99px;
   text-align: center;
}

.oneTaskListSettingsLine[data-contents="checkboxes"],
.oneInspectorSettingsLine:nth-child(2n),
.oneTaskListSettingsLine:nth-child(2n) {
   color: rgb(107, 187, 214);
}

.oneInspectorSettingsLine[data-type="colors"] {
   display: none;
}

#elementInspectorSettings[data-type="colors"] .oneInspectorSettingsLine[data-type="colors"] {
   display: block;
}

.taskListSettingsHelpButton {
   display: inline-block;
   height: 20px;
   line-height: 20px;
   padding: 0px;
   font-size: 11px;
}

.taskListSettingsHelpButton i {
   line-height: 18px;
}

.oneTaskListSettingsLine [data-meta="taskMainBackgroundColor"],
.oneTaskListSettingsLine [data-meta="taskRowOneUnderline"],
.oneTaskListSettingsLine [data-meta="taskRowTwoUnderline"],
.oneTaskListSettingsLine [data-meta="taskPinnedUnderline"] {}

.oneTaskListTask {
   background: black;
   padding: 9px 9px 9px 20px;
   border: 1px solid rgba(105, 105, 105, 0.46);
   color: lightgray;
   width: 98%;
   position: relative;
   margin-bottom: 18px;
}

.taskListSearchArea,
.chainsSearchArea,
.outlineSearchArea {
   position: absolute;
   bottom: 0px;
   width: 100%;
   left: 0px;
   height: 50%;
   border: 1px solid rgba(38, 39, 39, 0.74);
   overflow: hidden;
   z-index: 5;
   background: rgb(20, 65, 7);
   display: none;
}

.outlineSearchArea {
   height: 32%;
}

.taskListSearchAreaTitle,
.chainsSearchAreaTitle,
.outlineSearchAreaTitle {
   background: black;
   text-align: center;
   height: 30px;
   line-height: 30px;
   font-size: 14px;
   position: relative;
   color: rgb(176, 170, 170);
}

.taskListSearchAreaClose,
.outlineSearchAreaClose {
   position: absolute;
   top: 0px;
   right: 10px;
   color: inherit;
   cursor: pointer;
}

.taskListSearchAreaInputs,
.chainsSearchAreaInputs,
.outlineSearchAreaInputs {
   height: 50px;
   padding-top: 9px;
   background: rgb(39, 48, 74);
}

.outlineSearchAreaInputs {
   background: rgb(57, 57, 57);
}

.chainsSearchAreaInputs {
   padding-top: 9px;
}

#taskListSearchAreaInput,
#chainsSearchAreaInput,
#outlineSearchAreaInput {
   background: rgb(9, 9, 17);
   width: calc(100% - 130px);
   margin-left: 8px;
   color: lightgray;
   height: 30px;
   vertical-align: top;
   border: none;
}

.taskListSearchAreaButton,
.chainsSearchAreaButton,
.outlineSearchAreaButton {
   display: inline-block;
   background: rgb(10, 23, 42);
   cursor: pointer;
   padding: 0px 8px;
   height: 30px;
   line-height: 30px;
}

.outlineSearchAreaButton {
   background: rgb(21, 23, 28);
}

.taskListSearchAreaResults,
.chainsSearchAreaResults,
.outlineSearchAreaResults {
   background: rgb(18, 18, 17);
   height: calc(100% - 80px);
   border: 1px solid rgba(113, 118, 118, 0.11);
   padding: 8px;
}

.outlineSearchAreaResults {
   overflow-y: auto;
}

.cloneTaskListInner .moveTaskUp,
.cloneTaskListInner .moveTaskDown,
.cloneTaskListInner .oneTaskDelete {
   display: none !important;
}

.cloneTaskListInner .oneTaskListTask {
   padding-left: 5px;
}

.cloneTaskListInner .oneTaskListTextInput {
   width: calc(100% - 100px) !important;
}

.oneTaskListTask[data-number="1"] .moveTaskUp {
   display: none !important;
}

.moveTaskUp,
.moveTaskDown {
   position: absolute;
   cursor: pointer;
   top: 6px;
   left: 7px;
   height: 12px;
   overflow: hidden;
   line-height: 12px;
   font-size: 15px;
   opacity: 0.7;
}

.chainsSearchToggleButton {
   position: absolute;
   top: 0px;
   left: 15px;
   color: rgb(148, 145, 145);
   cursor: pointer;
}

.moveTaskDown {
   top: 20px;
}

.oneTaskListTask[data-state="checked"] {
   opacity: 0.7;
}

.oneTaskListTask:nth-child(2n) {
   background: rgb(44, 44, 46);
   color: rgb(171, 195, 203);
   border-color: rgb(48, 48, 48);
}

.taskToggleLocation,
.taskToggleSubmenu,
.outlineToggleLocation,
.outlineToggleSubmenu {
   position: absolute;
   bottom: 5px;
   right: 20px;
   cursor: pointer;
   color: rgb(98, 131, 144);
   background: rgb(6, 20, 29);
   font-size: 18px;
   width: 30px;
   height: 30px;
   line-height: 30px;
   text-align: center;
}

.outlineToggleLocation,
.outlineToggleSubmenu {
   background: rgb(43, 43, 74);
   color: rgb(128, 157, 167);
}

#taskListClone .taskToggleSubmenu,
#taskListClone .taskToggleLocation {
   display: none;
}

.taskToggleLocation,
.outlineToggleLocation {
   right: 70px;
}

#outlineClone .outlineToggleLocation,
#outlineClone .outlineToggleSubmenu {
   display: none;
}

.toggleLocationIcon[data-type="stream"] {
   display: none;
}

#taskListContainer[data-submenu="location"] .toggleLocationIcon[data-type="arrows"],
#outlineCreator[data-submenu="location"] .toggleLocationIcon[data-type="arrows"] {
   display: none;
}

#taskListContainer[data-submenu="location"] .toggleLocationIcon[data-type="stream"],
#outlineCreator[data-submenu="location"] .toggleLocationIcon[data-type="stream"] {
   display: inline-block;
}

.taskToggleSubmenu[data-type="down"],
.outlineToggleSubmenu[data-type="down"] {
   display: none;
}

#taskListContainer[data-submenustatus="hidden"] .taskToggleSubmenu[data-type="up"],
#taskListContainer[data-submenustatus="hidden"] .taskToggleLocation,
#outlineCreator[data-submenustatus="hidden"] .outlineToggleSubmenu[data-type="up"],
#outlineCreator[data-submenustatus="hidden"] .outlineToggleSubmenu {
   display: none;
}

#taskListContainer[data-submenustatus="hidden"] .taskToggleSubmenu[data-type="down"],
#outlineCreator[data-submenustatus="hidden"] .outlineToggleSubmenu[data-type="down"] {
   display: block;
}

#page .oneTaskListTask[data-pinned="yes"] {
   border: 1px solid rgb(78, 78, 74);
   background: rgb(30, 44, 54);
   color: rgb(107, 205, 205);
}

#page .oneTaskListTask[data-pinned="yes"] .oneTaskListTextInput {
   border-color: rgb(107, 205, 205);
}

#page .oneTaskListTask[data-pinned="yes"] .oneTaskPin {
   opacity: 1;
}

#page .oneTaskListTask[data-pinned="yes"] .oneTaskPin i {
   transform: rotate(0deg);
}

#page .outlineLines input {
   width: calc(100% - 132px);
}

#page .oneTaskListTask[data-pinned="yes"] .moveTaskUp,
#page .oneTaskListTask[data-pinned="yes"] .moveTaskDown,
#page .oneTaskListTask[data-pinned="yes"] .oneTaskDelete {
   display: none !important;
}

.taskCountSection {
   display: inline-block;
   height: 32px;
   line-height: 32px;
   overflow: hidden;
   vertical-align: top;
}

#currentTaskCount {
   background: rgb(13, 20, 47);
   color: lightblue;
   width: 61px;
   margin-left: 10px;
   border: none;
   text-align: center;
}

.taskCheckboxSection {
   display: inline-block;
   cursor: pointer;
   width: 20px;
   text-align: center;
}

#page .oneTaskListTextInput {
   height: 20px;
   border-top: none;
   border-right: none;
   border-left: none;
   border-image: initial;
   border-bottom: 1px solid dimgray;
   background: none;
   padding-left: 5px;
   width: calc(100% - 133px);
   color: inherit;
   display: inline-block;
   white-space: nowrap;
}

#taskListClone .oneTaskListTextInput {
   overflow: hidden;
}

.oneTaskDelete,
.oneTaskPin {
   display: inline-block;
   cursor: pointer;
   transition: all 0.2s ease 0s;
   opacity: 0.6;
   width: 30px;
   text-align: center;
}

.oneTaskPin {
   width: 20px;
   font-size: 15px;
   color: inherit;
}

.oneTaskPin:hover {
   opacity: 1;
   background: rgba(33, 107, 107, 0.12);
}

.oneTaskPin i {
   transform: rotate(35deg);
}

.oneTaskDelete:hover {
   opacity: 1;
   color: rgb(197, 156, 156);
   background: rgba(50, 5, 5, 0.28);
}

.taskListAddAtLoc {
   position: absolute;
   bottom: 0px;
   right: 0px;
   width: 21px;
   height: 19px;
   cursor: pointer;
   z-index: 5;
   text-align: center;
   line-height: 19px;
   font-size: 9px;
   color: inherit;
   opacity: 0.7;
}

#taskListClone .taskListAddAtLoc {
   display: none;
}

.taskListLineNumber {
   position: absolute;
   right: 0px;
   top: 0px;
   background: none;
   height: 20px;
   width: 20px;
   text-align: center;
   opacity: 0.4;
}

.taskCheckboxSection.checked {
   display: none;
}

.oneTaskListTask[data-state="checked"] .taskCheckboxSection.checked {
   display: inline-block;
   background: rgb(25, 26, 26);
}

.oneTaskListTask[data-state="checked"] .taskCheckboxSection.unchecked {
   display: none;
}

.oneTaskListTask[data-state="checked"] .oneTaskListTextInput {
   text-decoration: line-through;
   opacity: 0.6;
}

@media only screen and (max-height: 400px) {
   #glossaryPage {
      border: 1px solid rgb(71, 214, 208);
   }

   #glossaryOptionsSection {
      display: none;
   }

   .glossaryLogo {
      font-size: 12px;
      top: 0px;
   }

   #glossaryPage #codeCreateNavButton {
      font-size: 12px;
   }

   #glossaryTopBar {
      height: 25px;
      overflow: hidden;
   }

   .glossaryTitle {
      font-size: 11px;
      line-height: 17px;
      height: 25px;
   }

   #theGlossary {
      height: calc(100% - 25px);
   }

   .glossaryBottomBarTabs[data-location="top"] {
      display: block;
   }

   .glossaryPreviousNext,
   .glossaryBottomBarTabs[data-location="bottom"] {
      display: none;
   }

   #allGlossaryGroups {
      height: calc(100% - 66px);
   }

   .groupContentName {
      font-size: 12px;
      padding: 4px 4px 4px 65px;
      overflow: hidden;
   }

   .singleGroupContentEntry {
      padding-top: 0px;
   }

   .oneGlossaryGroup {
      min-height: unset;
      overflow: hidden;
   }

   .groupContentsTitle {
      line-height: 30px;
      font-size: 16px;
   }

   .extraGroupContentInfo {
      padding-top: 3px;
   }

   .newExplanationLine {
      font-size: 11px;
      padding-top: 5px;
      padding-bottom: 4px;
   }

   .newExplanationLine i {
      font-size: 7px;
   }

   .oneAppendedGlossaryPage {
      padding-top: 0px;
   }

   .modulePageExplanation {
      padding-top: 5px;
   }

   #glossaryAdminBar {
      display: none;
   }

   .glossaryToggleAdminInfo {
      display: none;
   }

   .glossaryNumberOnDrive {
      display: none;
   }
}

@media only screen and (min-width: 1700px) {
   #filterSearchInput {
      width: calc(100% - 200px);
   }

   .filterSearchButton {
      width: unset;
   }
}

@media only screen and (max-width: 1700px) {
   #codeCreate {
      font-size: 0.85em;
      overflow: hidden;
   }

   #editorLanguagesLayout {
      width: 41%;
   }

   #page .activeAndAccent .theCheckSection,
   #page .syntaxCheckSection {
      margin-left: 0px;
      display: block;
      width: 140px;
   }
}

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

   .textSelectLine,
   .oneNumberSelect {
      position: relative;
      overflow: hidden;
      height: 30px;
      padding-left: 5px;
      white-space: nowrap;
      padding-right: 0px;
   }

   .containerSizeTitle {
      height: 27px;
      line-height: 27px;
      overflow: hidden;
      width: 52%;
      max-width: 165px;
   }

   #page .container {
      width: 800px;
   }

   #page #outputConsoles {
      width: 40%;
      left: 61%;
      top: 100px;
   }

   #jsLeft {
      height: 67%;
      overflow: hidden;
      vertical-align: top;
      border: 1px solid rgb(30, 30, 110);
   }

   #codeCreate {
      font-size: 0.75em;
      overflow: hidden;
   }

   #jsLeft {
      height: 64%;
   }

   .colorDivRow input {
      font-size: 0.87em;
      height: 27px;
   }

   .colorRowDivInputs {
      height: 50px;
      margin-right: 5px;
   }

   #codeCreate .colorDivRow .colorShortcutKey {
      height: 27px;
      margin: 0px;
   }

   .colorDivRow {
      padding-left: 5px;
      height: 56px;
      padding-top: 3px;
      overflow: hidden;
   }

   .colorDivRowOption {
      text-align: center;
      height: 44px;
   }

   .addAPicker {
      height: 25px;
      line-height: 25px;
      font-size: 0.9em;
   }

   .buttonBackground {
      width: 40px;
      height: 40px;
      top: 5px;
   }

   .buttonBackground img,
   .persistentPickerButton img,
   #persistentVisualButton img {
      transform: scale(0.8);
      top: -50px;
      left: -50px;
   }

   .persistentPickerButton img,
   #persistentVisualButton img {
      transform: scale(0.8);
      top: 0px;
      left: 0px;
   }

   #codeCreate .cc_div {
      height: 96%;
      min-height: unset;
      top: 0px;
   }

   #codeCreate.hide_cc_top_bar .cc_div {
      height: 94%;
   }

   #main {}

   .shortcutType {
      font-size: 0.8em;
      width: 24%;
   }

   .keyboardSwitchMessage {
      font-size: 0.8em;
   }

   #entire_shortcuts .shortcut_input {
      padding: 0px;
      width: 50px;
   }

   #fetchCodeSection,
   #copyLinkSection {
      width: 500px;
   }

   #page #select_theme_bar {
      width: unset;
      font-size: 10px;
   }

   #page .selectEditorThemeText {
      font-size: 13px;
      vertical-align: top;
      height: 30px;
      line-height: 30px;
   }

   #page #select_theme_bar {
      overflow: hidden;
   }

   #page #editorThemeSection,
   #selectTheme {
      height: 30px;
      line-height: 20px;
      font-size: 13px;
      vertical-align: top;
   }
}

@media only screen and (max-width: 1400px) {
   #editorLanguagesLayout {
      width: 48%;
   }
}

@media only screen and (max-width: 1350px) {
   #mainLanguageSectionContainer {
      width: 54%;
      left: 43%;
   }

   .changeLanguageOptionWindow {
      width: 38%;
   }

   #fetchCodeSection,
   #copyLinkSection {
      width: 64%;
   }

   .showLanguageNormal {
      display: none;
   }

   .showLanguageAbbreviated {
      display: inline-block;
   }

   .page-id-1584 .genericLogoFull {
      display: none;
   }

   .page-id-1584 .genericLogoPartial {
      display: inline-block;
   }

   #reportsTopInfo .topInfoTitleFull {
      display: none;
   }

   #reportsTopInfo .topInfoTitlePartial {
      display: inline-block;
   }

   #page .showDeveloperCommentsButton {
      border: 2px solid rgba(37, 39, 39, 0.54);
      right: 0px;
      left: unset;
      height: 18px;
      font-size: 14px;
      line-height: 18px;
   }

   #optionsWindow[data-deletemultiple="yes"] .newSessionDeleteMultiple {
      padding: 0px 15px;
   }


}

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

   .previewCodeHeaderText {
      display: none;
   }

   .oneSharingCheckbox[data-type="features"] {
      width: 88%;
   }

   body.touch_portrait .oneSharingCheckbox {
      font-size: 26px;
   }

   body.touch_portrait .sharingTextArea {
      font-size: 28px;
   }

   body.touch_portrait .sharingCopyButton,
   body.touch_portrait .sharingRandomizebutton {
      font-size: 28px;
      padding: 13px;
      width: unset;
   }

   body.touch_portrait .oneShareSectionTitle {
      font-size: 26px;
   }

   body.touch_portrait #shareButtonClone {
      display: inline-block;
   }

   body.touch_portrait #sharingAdjectivesDropdown,
   body.touch_portrait #sharingStartDropdown,
   body.touch_portrait #sharingDescriptionDropdown,
   body.touch_portrait .oneShareSectionTitle {

      padding: 0px 7px;
      height: 40px;
      line-height: 40px;

   }

   body.touch_portrait #sharingAdjectivesDropdown,
   body.touch_portrait #sharingStartDropdown,
   body.touch_portrait #sharingDescriptionDropdown {
      width: 270px;
      font-size: 22px;
   }

   #sharingStartDropdown option {
      font-size: 16px;
   }

   .textSelectLine,
   .oneNumberSelect {
      text-align: left;
   }

   .accentButton {
      display: none;
   }

   .previewPageOptionsButton:active {
      background: black;
      color: lightgray;
   }

   .previewPageRenderButton:active {
      background: rgb(118, 118, 118);
      color: black;
   }

   #previewCodeHeader[data-optionsbarstatus="active"] .previewPageOptionsButton:active {
      background: rgb(118, 118, 118);
      color: black;
   }

   #previewCodeHeader[data-optionsbarstatus="active"] .previewPageToggleButton {}

   #previewCodeHeader[data-currentpreviewoption="general"] .previewPageToggleButton[data-previewbutton="general"],
   #previewCodeHeader[data-currentpreviewoption="loadNewPreview"] .previewPageToggleButton[data-previewbutton="loadNewPreview"],
   #previewCodeHeader[data-currentpreviewoption="reloadingOptions"] .previewPageToggleButton[data-previewbutton="reloadingOptions"] {
      display: inline-block;
   }

   #previewPageOptionsButton {
      right: 118px;
   }

   .previewFullLogo {
      display: none;
   }

   .previewPartialLogo {
      display: inline-block;
   }



   /*#previewPageOptionsButton[data-partialcustom="true"] {
      border: 5px solid green !important;
   }


   #previewPageOptionsButton[data-partialcustom="false"] {
      border: 5px solid red !important;
   }*/



   .previewSessionName,
   .customPreviewFullLogo,
   #previewPageOptionsButton[data-partialcustom="true"] .previewPartialLogo,
   #previewPageOptionsButton[data-partialcustom="false"] .customPreviewPartialLogo {
      display: none;
   }

      .previewSessionName {
         display: none !important;
      }

   #previewPageOptionsButton[data-partialcustom="false"] .previewPartialLogo,
   #previewPageOptionsButton[data-partialcustom="true"] .customPreviewPartialLogo {
      display: inline-block;
   }



   #previewPage .previewPageFork {}

   #layoutEditor {
      width: 60%;
   }

   #layoutOverlay #rightOptions {
      width: 40%;
      left: 60%;
   }

   .partialLogoText {
      display: none;
   }

   #previewPage .loadNewLink input {
      width: 64%;
   }

   .sessionRowInfoContainer,
   .sessionSnapshot {
      height: 114px;
   }

   .sessionSnapshot {
      width: 190px;
   }

   .infoContainerCell {
      height: 27px;
      line-height: 27px;
   }

   .infoContainerCellTitle,
   .infoContainerCellContent {
      font-size: 11px;
   }

   .infoContainerCellTitle {
      width: 74px;
   }

   .sessionRowInfoContainer {
      width: calc(100% - 191px);
   }

   .sessionCellCopySection,
   .newSessionDeleteButton {
      font-size: 9px;
      width: 30px;
      text-align: center;
      right: 0px;
   }

   .infoContainerCellContent .sessionsShowLanguage {
      min-width: 31px;
   }

   #page #editorThemeOverlay>.cursorEditRow {
      max-width: 760px;
   }

   #editorThemeOptionsContainer {
      margin-top: 105px;
   }

   #parseRecordingArea {
      right: 50px;
   }
}

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

   #page #fetchCodeSection,
   #page #copyLinkSection {
      width: 81%;
      height: 30px;
      overflow: hidden;
   }

   #page #fetchLink,
   #page .fetchCodeButton,
   #page .optionBarLinksInput {
      height: 20px;
   }

   #page #fetchCodeSection .fetchCodeButton {
      font-size: 10px;
      line-height: 10px;
   }

   #page #select_theme_bar {
      height: 39px;
      overflow: hidden;
   }

   #page .selectEditorThemeText {
      font-size: 13px;
      vertical-align: top;
      height: 20px;
      line-height: 26px;
   }

   #page #editorThemeSection,
   #selectTheme {
      height: 20px;
      line-height: 20px;
      font-size: 13px;
      vertical-align: top;
   }

   #cc_top_menu,
   .cc_top_menu_copy {
      width: calc(100% - 176px);
   }

   .logoText .fullLogoText {
      display: none;
   }

   .cc_logo {
      right: 0px;
      padding-right: 12px;
   }

   #page .logoShowSession,
   #page .customLogoFull {
      display: none
   }


   .partialLogoText {
      display: block;
   }

   .cc_logo[data-partialcustom="true"] .partialLogoText {
      display: none;
   }

   .cc_logo[data-partialcustom="true"] .customLogoPartial {
      display: inline-block;
   }

   .activeShortcutsActive {
      display: none;
   }

   #transparentDropdownOverlayStatus {
      display: none;
   }

   .reportsTopInfoFilterSection {
      width: 414px;
   }

   .reportsTopFilterButton {
      width: 87px;
      overflow: hidden;
      white-space: nowrap;
      font-size: 11px;
   }

   #userReports[data-debugstatus="clean"] .bugReportingCell {
      font-size: 0.94em;
   }

   .fetchInfoButton {
      line-height: 29px;
   }

   .modified_indicator_button {
      right: 60px;
      top: -8px;
   }

   #codeCreate.condensedView .modified_indicator_button {
      right: 1px;
      top: -4px;
      transform: scale(0.65);
   }

   .modifiedCloneTwo {
      right: 100px;
      top: -8px;
   }

   #recordingMenu[data-filter="content_location"] .recordingLineElement[data-type="opacity"],
   #page #recordingMenu[data-filter="content_location"] .recordingMenuTitleElement[data-type="opacity"] {
      display: none;
   }

   .inputBeforeLabelArea[data-hastoggle="yes"] {
      padding-top: 52px;
   }

   #previewSettingsContainer {
      width: 100%;
      max-width: unset;
   }

   .searchResultsContainerInner {
      text-align: center;
   }

   .oneSearchResult {
      text-align: left;
   }
}

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

   .previewCodeButtonToggles {
  
      width: calc(100% - 80px);
  
   }
   #toolOverlay {
      width: 90%;
      border: 1px solid dimgray;
   }

   .containerSizeTitle {
      max-width: unset;
   }

   .optionsPerLanguageContainer {
      width: 70%;
   }

   .accentButton {
      display: block;
   }

   .sessionCell {
      width: 25%;
   }

   #previewPage .sessionCell {
      width: 33.33%;
   }

   .sessionCell[data-type="Created_by"],
   .sessionCell[data-type="username"],
   .sessionCell[data-title="Description"] {
      display: none;
   }

   .modulesHoverForInfo {
      display: none;
   }

   #page .optionBarSection {
      height: 30px;
      margin-top: 2px;
      overflow: hidden;
   }

   #fontSizeInput {
      width: 300px;
   }

   .setNewSize,
   .newFontSize,
   .changeFontSizeButton,
   .ss_slider_container div,
   .ss_slider_container input {
      height: 22px;
      line-height: 22px;
      top: 4px;
      overflow: hidden;
   }

   #page .top_menu_message,
   #page .ccTopMessage {
      left: 50px;
   }

   #page #presetNameDisplay {
      left: unset;
      right: 26px;
      font-size: 10px;
      top: 73px;
      white-space: nowrap;
   }

   #codeCreate.condensedView .condensedViewNameDisplay {
      display: inline-block;
   }

   #page .cc_select[data-var="selectSession"] {
      width: 97px !important;
   }

   #dbcToggle,
   #entire_cc_toggle,
   .highlightSmallSelect {
      display: none;
   }

   #presetNameDisplay2,
   #vueVarBox {}

   #filterSearchInput {}

   #cc_top_menu,
   .cc_top_menu_copy {}

   #selectSession,
   #page .select_session_copy {
      width: 120px;
   }

   .sessionNameContainer {}

   .cc_cover {
      overflow-y: scroll;
   }

   #mainLanguageSectionContainer,
   .changeLanguageOptionWindow {
      width: 78%;
      left: 11%;
   }

   .changeLanguageOptionWindow {
      z-index: 130;
      height: 93%;
   }

   .changeLanguageOptionWindow[data-currentlanguageoptionsection="customGroups"] {
      height: 267px;
      top: unset;
      bottom: 88px;
      overflow: hidden;
      min-height: unset;
   }

   .layoutNamePreferenceLine {
      height: 22px;
      line-height: 22px;
      overflow: hidden;
      margin-bottom: 4px;
      width: 100%;
   }

   #layoutOverlay #twoContainers,
   #layoutOverlay .inactive-overlay {
      height: 68%;
   }

   .layoutNameTitle {
      height: 22px;
      line-height: 22px;
   }

   #presetsContainer select {
      height: 22px;
      line-height: 22px;
      padding: 0px;
   }

   .layoutNamePreferences {
      padding: 4px;
      height: 108px;
      overflow-y: auto;
      text-align: left;
   }

   #layoutOverlay .optionsContainer {
      height: 32%;
   }

   .noClickFunk {
      display: none;
   }

   #plotPointOverlay[data-plottutorialdisplay="show"] #plotPointDialog {
      display: none;
   }

   #plotPointOverlay[data-plottutorialdisplay="show"] .plotPointDialogExplanation {
      left: 25%;
      width: 50%;
   }

   #page .userReportButton {
      border: 1px solid rgb(50, 115, 135);
      left: 90px;
      bottom: 0px;
      top: unset;
      height: 18px;
   }

   .previousChainsArea,
   .chainAmountRow,
   .currentChainSettings,
   .allChainSettingsLines,
   .chainSettingsLine,
   #page .chainSettingsLine input {
      font-size: 12px;
   }

   #page #chainTitle {
      width: 30%;
   }

   .previousChainsTitle {
      width: 130px;
   }

   .saveCurrentChainButton,
   .clearCurrentChainButton {
      width: 50px;
   }

   #hidingFactories {}

   #hidingFactories .hidingFactoriesTitle {
      font-size: 11px;
   }

   #savedSessionsContainer .sessionRow {
      width: 90%;
      min-height: unset;
   }

   .sessionRowInfoContainer,
   .sessionSnapshot {
      height: 150px;
   }

   .sessionSnapshot {
      width: 250px;
   }

   .infoContainerCell {
      height: 37.5px;
      line-height: 37.5px;
   }

   .infoContainerCellTitle,
   .infoContainerCellContent {
      font-size: 14px;
   }

   .infoContainerCellTitle {
      width: 120px;
   }

   .sessionRowInfoContainer {
      width: calc(100% - 252px);
   }

   .sessionCellCopySection,
   .newSessionDeleteButton {
      font-size: 14px;
      width: 30px;
      text-align: center;
      right: 0px;
   }

   .infoContainerCellContent .sessionsShowLanguage {
      min-width: 40px;
   }

   #glossaryBottomBar select {
      font-size: 11px;
      width: 230px;
   }

   .glossaryLoadMoreSectionTitle {
      font-size: 11px;
      width: 120px;
   }

   .modulePageLoadMoreButton {
      margin-left: 0px;
      margin-right: 10px;
   }
}

@media only screen and (max-width: 1000px) {
   .cc_logo {
      right: 10px;
   }

   .keyGroup,
   .keyboardShortcutAvailable,
   .keyCodeDisplay,
   #sampleChangedSettings,
   .highlightSmallSelect {
      display: none !important;
   }

   .menuNormalName {
      display: none;
   }

   .menuAbbreviatedName {
      display: block;
   }

   #page .topRowButtonContainer {
      width: 60px;
      font-size: 10px;
      overflow: hidden;
      white-space: nowrap;
   }

   #entire_persistent_picker[data-position="right"] {
      left: 47%;
   }

   .previewCodeURLBox .actualURL {
      display: none;
   }

   #toggleRightOptions {
      display: block;
   }

   #layoutEditor,
   #sampleTopBar {
      width: 100%;
   }

   #layoutOverlay #rightOptions {
      width: 100%;
      left: 0px;
      z-index: 55;
      display: none;
   }

   #layoutOverlay .rightOptionsContainer .ss_slider_container,
   #layoutOverlay .rightOptionsContainer .cc_select {
      min-width: unset;
      max-width: unset;
      width: 144px !important;
   }

   #layoutOverlay .rightOptionsContainer #editorResizeHeightContainer {
      text-align: left;
      white-space: nowrap;
      width: 144px !important;
      padding: 0px !important;
   }

   .textSelectLine,
   .oneNumberSelect,
   .textSelectContainer .extraSliderContainer {
      text-align: center;
   }

   .rightOptionsContainer {
      width: 80%;
      left: 10%;
      position: relative;
   }

   .ss_slider_container,
   .rightOptionsContainer select {
      width: 30%;
   }

   #simpleCountSection {
      display: none;
   }

   .sharedObjectPreviewTitle {
      text-align: left;
      font-size: 14px;
      padding-left: 14px;
   }

   .otherUserInputTitle {
      text-align: left;
      padding-left: 15px;
   }

   .switchActiveKeyboardKey {
      display: none;
   }

   .previewInformationFull {
      display: none;
   }

   .previewInformationPartial {
      display: inline-block;
   }

   .saveChainSettingsToDatabaseInner,
   .premadeRowInner {
      width: 90%;
      margin-left: 5%;
   }

   #recordingMenu .recordingLocationsMenuLine[data-type="boxesArrows"] .recordingLocationsMenuTitle {
      font-size: 12px;
      width: 105px;
   }

   .hideOtherDialogs_halfTitle {
      display: inline-block;
   }

   .hideOtherDialogs_fullTitle {
      display: none;
   }

   .oneModuleCell.hideOthers {
      width: 137px;
   }

   .oneModuleCell.isHidden {
      width: 169px;
   }

   .oneModuleCell .hideOthersInnerText {
      width: 90px;
   }

   #hideOtherDialogs {
      max-width: 640px;
      width: 98%;
      min-width: unset;
   }

   .oneModuleCell.theName {
      width: 220px;
   }

   .theModulesToChange .oneModuleCell.theName {
      width: 208px;
   }

   .mainGlossarySearchButtonsRow {
      display: none;
   }

   .glossarySearchToggle {
      display: block;
   }

   #glossaryPage[data-options="shown"] .glossaryLogo {
      display: none;
   }

   #glossaryPage[data-options="shown"] #glossaryOptionsSection {
      width: 97%;
   }
}

@media only screen and (max-width: 900px) {
   .accentButton {
      display: none;
   }

   .descriptionTitle {
      text-align: right;
      padding-right: 30px;
   }

   .mySessionsOnlyFullTitle {
      display: none;
   }

   .mySessionsOnlyPartialTitle {
      display: inline-block;
   }

   #page .sessionCell {
      width: 33.3333%;
   }

   .sessionCell[data-type="description"],
   .sessionCell[data-type="Description"],
   .sessionCell[data-title="Languages"] {
      display: none;
   }

   #previewPage .sessionCell[data-title="Languages"] {
      display: inline-block;
   }

   .previewPageAllSessionsInner {
      transform: scale(0.9);
   }

   .smallTopMenuButtons {
      overflow: hidden;
      vertical-align: top;
      width: 49px;
      height: 42px;
   }

   .cc_run {
      bottom: 0px;
   }

   #page .renderLightsContainer:not(#previewPage .renderLightsContainer) {
      left: 25px;
      bottom: 0px;
      overflow: hidden;
   }

   .renderLight:not(#previewPage .renderLight) {
      top: 5px;
      left: 0px;
   }

   #page .oneSmallTopMenuButton {
      width: 21px;
      height: 21px;
      line-height: 21px;
      display: block;
      overflow: hidden;
      vertical-align: top;
      padding: 0px;
      margin: 0px;
      position: absolute;
   }

   #page .oneSmallTopMenuButton.cc_colorPickerButton {
      left: 21px;
   }

   #page #cc_top_bar.condensedView .oneSmallTopMenuButton {
      position: relative;
      inset: unset;
      display: inline-block;
   }

   @media only screen and (max-width: 700px) and (max-height: 700px) {
      #page .toggleCondensedPage {
         display: none !important;
      }
   }

   #page #listCopy2 {
      right: 10%;
      left: unset;
   }

   .containerSizeTitle {
      width: 40%;
   }

   #presetNameDisplay[data-optionsbar="true"] {
      display: none;
   }

   #previewPageOptionsBar {
      left: 0px;
      width: calc(100% - 84px);
      display: block;
   }

   #page[data-width="normalWidth"] #page .extraSettingsWindowDialog {
      right: unset;
      left: 20%;
   }

   #page #userReports[data-debugstatus="clean"] .bugReportingCell {
      min-width: unset;
   }

   #entireReportsFilter {
      display: none;
   }

   #entireReportsFilterPositionTwo {
      display: inline-block;
   }

   .previewCodeHeaderText {
      display: none;
   }

   #userReports[data-debugstatus="clean"] .bugReportingCell[data-type="comments"] {
      display: none;
   }

   #userReports[data-debugstatus="clean"] .bugReportingCell {
      width: 37.5%;
      min-width: 120px;
   }

   #chainGraphicViewOptions .languageAccentBox {
      font-size: 10px;
      width: 246px;
      overflow: hidden;
      padding: 5px 0px 0px;
      height: 40px;
      margin-right: 20px;
   }

   .reportsFilterSection {
      top: 44px;
      width: 63%;
      background: none;
      height: 36px;
      left: 20px;
      padding-left: 8px;
   }

   .reportsFilterSectionTitle {
      padding: 0px 4px;
   }

   .reportsFilterSectionTitle,
   .reportsFilterInner {
      background: rgb(65, 65, 90);
   }

   .reportsFilterInner {
      width: calc(100% - 48px);
      right: 4px;
      border: none;
   }

   #page .reportsFilterInput,
   .reportsFilterSectionButton {
      height: 22px;
      line-height: 22px;
      overflow: hidden;
      vertical-align: top;
      margin-top: 3px;
   }

   #page .featuresForVoting,
   #page .bugReportingLines {
      padding-top: 51px;
   }

   .oneFunctionCreationLine[data-theinput="timeoutDelay_interval"] .afterInput1,
   .oneFunctionCreationLine[data-theinput="timeoutDelay_timeout"] .afterInput1 {
      margin-top: 8px;
      display: block;
   }

   .oneFunctionCreationLine[data-theinput="timeoutDelay_interval"] .afterInput3,
   .oneFunctionCreationLine[data-theinput="timeoutDelay_timeout"] .afterInput3,
   .oneFunctionCreationLine[data-theinput="timeoutDelay_interval"] .afterInput2,
   .oneFunctionCreationLine[data-theinput="timeoutDelay_timeout"] .afterInput2 {
      display: none;
   }

   #functionFactorySettings {
      margin-left: 20px;
   }

   .glossaryBottomBarTabs {
      height: 38px;
      padding: 0px;
   }

   .glossaryBottomBarTabsInner {
      width: 380px;
      position: absolute;
      right: 0px;
      text-align: right;
      padding-right: 20px;
   }

   .oneGlossaryBottomBarTab[data-type="module"] {
      margin-right: 0px;
   }

   .glossaryPreviousNext {
      bottom: 53px;
      left: 0px;
   }
}

@media only screen and (max-width: 851px) {
   #allGlossaryGroups {}

   #allGlossaryGroups .modulePageExplanation,
   #allGlossaryGroups .modulePageMainVideo,
   #allGlossaryGroups .singleGroupContentEntry,
   #allGlossaryGroups .singleGroupContentEntry {
      width: 100% !important;
      max-width: unset !important;
   }

   #page #allGlossaryGroups .modulePageExplanation.leftLoc,
   #page #allGlossaryGroups .singleGroupContentEntry.leftLoc {
      display: block !important;
   }

   #allGlossaryGroups .modulePageExplanation.rightLoc,
   #allGlossaryGroups .singleGroupContentEntry.rightLoc {
      display: none !important;
   }

   .newExplanation {
      font-size: 14px;
   }

   .modulePageExplanation {
      padding-bottom: 15px;
   }

   #divider_admin_overlay {
      width: 90%;
   }
}

#page #cc_top_bar.condensedView .oneSmallTopMenuButton {
   bottom: 1px;
}

#page #cc_top_bar.condensedView .oneSmallTopMenuButton {
   width: 12px;
   height: 14px;
   font-size: 6px;
   padding: 0px;
   line-height: 17px;
   display: inline-block;
   margin-bottom: 2px;
}

#page #cc_top_bar.condensedView .oneSmallTopMenuButton i {
   height: inherit;
   top: 0px;
   overflow: hidden;
   line-height: inherit;
   vertical-align: top;
   font-size: inherit;
}

#page #cc_top_bar.condensedView .smallTopMenuButtons {
   height: 34px;
   width: 36px;
}

#page #cc_top_bar.condensedView .renderLightsContainer {
   right: 0px;
   bottom: 1px;
   top: unset;
   left: unset;
   height: 15px;
   overflow: hidden;
   padding-top: 2px;
   vertical-align: top;
}

#page #cc_top_bar.condensedView .renderLight {
   vertical-align: top;
   height: 12px;
   width: 12px;
   top: unset;
   border: 1px solid rgba(20, 20, 20, 0.85);
   bottom: 0px;
}

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

   #selectorOverlay {
      left: 2% !important;

   }

   .selectorPositionButton {
      opacity: 0.1 !important;
   }

   .selectorToolMoveCover {
      display: block;
      background: black;
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      opacity: 0;
   }

   .hideFromMenuRow {
      width: 50%;
   }

   .optionsPerLanguageContainer {
      width: 95%;
   }

   .accentButton {
      display: none;
   }

   .cc_filter_title {
      display: none;
   }

   .maximizeCheckLabelFull {
      display: none;
   }

   .maximizeCheckLabelAbbreviation {
      display: inline-block;
   }

   .cc_select[data-var="selectSession"] {
      display: none;
   }

   #modifyBarAreasGUI {
      width: 96%;
   }

   .bottomButtonSelectLine,
   .bar_settings_area {
      width: 94%;
   }

   #newButtonsArea {
      width: 97%;
   }

   #bottomBarColorsArea .accentTitle,
   #topBarColorsArea .accentTitle {
      max-width: 75%;
      text-align: left;
      background: rgb(28, 28, 50);
      font-size: 0.9em;
      font-weight: 500;
      text-overflow: ellipsis;
   }

   #modifyBarAreasGUI .cc_select {
      width: 80%;
   }

   .entireColorListFormat {
      right: 0px;
   }

   #sharedObjectPreview .entireColorListFormat {
      right: 30px;
   }

   .colorListFormatText .fullText {
      display: none;
   }

   .colorListFormatText .partialText {
      display: inline-block;
   }

   .savedShortcutSetLine {
      padding-left: 40px;
   }

   .snippetParentName {
      font-size: 12px;
      padding: 0px 4px;
   }

   .userShowShortcutLine {
      padding-left: 100px;
   }

   .user_snippet_rows .moveShortcutUp {
      left: 25px;
   }

   .user_snippet_rows .moveShortcutDown {
      left: 5px;
   }

   .allUserShortcutInner,
   .allUserShortcutTitle {
      width: 96%;
      margin-left: 2%;
   }

   .passcodeFirstExplanation {
      display: none;
   }

   #page .showDeveloperCommentsButton {
      right: unset;
      left: 8px;
      height: 12px;
      line-height: 12px;
      font-size: 8px;
      border: 1px solid rgba(0, 255, 255, 0.33);
   }

   #previewPage .oneFunctionCreationLine[data-lastswitch="true"] .afterInput3 .switch_last_condition {
      display: none;
   }

   #previewPage .oneFunctionCreationLine[data-lastswitch="true"] .beforeInput1 .switch_last_condition {
      display: block;
      top: 41px;
      left: 20px;
   }

   #previewPage .functionCreationLines[data-type="switch"] .oneFunctionCreationLine[data-lastswitch="true"] .oneFunctionInputLineLabel {
      margin-bottom: 37px;
   }

   #rulerSettingsDialog {
      width: 80%;
      left: 10%;
   }

   .glossaryOptionsTitle,
   #overlayOnPauseSection,
   #playbackSpeedSection {
      height: 25px;
      overflow: hidden;
   }

   .glossaryOptionsTitle {
      width: 95px;
   }

   #glossaryOptionsSection {
      top: 8px;
      height: 60px;
   }

   #playbackSpeedSection {
      top: 27px;
   }

   #functionFactorySettings {
      margin-top: 10px;
   }

   #hidingFactories {
      width: 94%;
      margin-top: 30px;
   }

   #hidingFactories .oneFactoryToggleLine {
      padding: 5px;
   }

   #factoryTogglesButtonsRow {
      display: none;
   }

   .functionConsoleSettingsLine {
      margin: 6px 12px;
   }

   #trackableItemsInformation {
      right: unset;
      left: 10%;
      width: 80%;
      max-width: unset;
      min-width: unset;
   }

   .sessionRowInfoContainer,
   .sessionSnapshot {
      height: 114px;
   }

   .sessionSnapshot {
      width: 190px;
   }

   .infoContainerCell {
      height: 27px;
      line-height: 27px;
   }

   .infoContainerCellTitle,
   .infoContainerCellContent {
      font-size: 11px;
   }

   .infoContainerCellTitle {
      width: 74px;
   }

   .sessionRowInfoContainer {
      width: calc(100% - 191px);
   }

   .sessionCellCopySection,
   .newSessionDeleteButton {
      font-size: 9px;
      width: 30px;
      text-align: center;
      right: 0px;
   }

   .infoContainerCellContent .sessionsShowLanguage {
      min-width: 31px;
   }

   .toggleDeleteMultipleButton {
      right: unset;
      left: 20px;
   }

   #glossaryVideoLocation {
      display: none !important;
   }

   #glossaryBottomBar {
      height: 129px;
   }

   .glossaryNavSelectArea,
   .glossaryPreviousNext,
   .glossaryBottomBarTabsInner {
      width: 100%;
      text-align: left;
      padding-left: 21px;
   }

   .glossaryNavSelectArea {
      bottom: 0px;
      padding-top: 4px;
   }

   .glossaryPreviousNext {
      bottom: 87px;
   }

   .glossaryBottomBarTabs {
      position: absolute;
      width: 100%;
      bottom: 40px;
   }

   #glossaryBottomBar {
      height: 45px;
   }

   #page #editorThemeOverlay>.cursorEditRow {
      font-size: 9px;
   }
}

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

   #codeCreate.condensedView #presetNameDisplay,
   #codeCreate.condensedView .cc_open_preview {
      display: none;
   }

   #cc_bottom_bar {
      opacity: 1;
      background: rgb(1, 2, 16);
   }

   .cc_logo {
      right: 20px;
      padding: 0px;
   }

   #cc_top_menu,
   .cc_top_menu_copy {
      width: calc(100% - 67px);
   }

   .cc_logo .logoText {
      display: none;
   }

   .preferenceLine .accentTitle {
      display: none;
   }

   .accentSetDefaultPositionTwo {
      display: block;
      opacity: 0.4;
   }

   #page .sessionCell {
      width: 50%;
   }

   .sessionCell[data-type="Languages"],
   .sessionCell[data-type="theLanguages"],
   .sessionCell[data-title="Time_Saved"] {
      display: none;
   }

   #previewPage .sessionCell[data-title="Time_Saved"] {
      display: inline-block;
   }

   #previewPage .sessionCell[data-title="Languages"] {
      display: none;
   }

   #entire_persistent_picker[data-position="left"],
   #entire_persistent_picker[data-position="middle"],
   #entire_persistent_picker[data-position="right"] {
      width: 249px;
      height: unset;
      left: 17% !important;
   }

   #colorPickerContainer,
   #colorPickerOptions {
      overflow: hidden;
      width: 245px;
      height: 115px;
   }

   #colorPickerOptions .pageColorPickerTitle {
      width: 100%;
   }

   #colorPickerOptions {
      margin-top: 8px;
   }

   .presetButton[data-preset="D"] {
      margin-right: 65px;
   }

   #mainLanguageSectionContainer,
   .changeLanguageOptionWindow {
      width: 86%;
      left: 7%;
   }

   .changeLanguageOptionWindow {
      top: 1%;
      z-index: 150;
   }

   #layoutEditor #toggleHiddenModules,
   #layoutEditor #twoContainers,
   #layoutEditor .inactive-overlay,
   #layoutEditor .optionsContainer {
      height: 65%;
   }

   #layoutEditor .optionsContainer {
      height: 35%;
   }

   .layoutNamePreferenceLine {
      width: 88%;
   }

   .layoutNamePreferences {
      height: 106px;
   }

   .ss_slider_container,
   .rightOptionsContainer select {
      width: 44%;
   }

   #page #cc_top_bar.condensedView .cc_logo {
      width: 20px;
      right: -4px;
   }

   #page #cc_top_bar.condensedView .cc_logo {
      width: 43px;
      padding: 0px;
   }

   #reportsTopInfo .topInfoTitleFull {
      display: none;
   }

   .sharedObjectPreviewLines .userShowShortcutLine {
      padding-left: 43px;
      font-size: 12px;
   }

   #sharedObjectPreview .userShowSnippet {
      width: 90px;
      min-width: unset;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      top: 6px;
      position: relative;
   }

   .userShowShortcutLine {
      padding-left: 60px;
   }

   .sharingSettingSave {
      display: block;
      margin-left: 8px;
      margin-top: 4px;
   }

   .currentShortcutsTitle {
      text-align: center;
   }

   #codeCreate.condensedView .cc_logo #codeCreateNavButton {
      top: 0px;
      right: 32px;
      font-size: 13px;
   }

   .previewInformationPartial {
      display: none;
   }

   .previewInformationTiny {
      display: inline-block;
   }

   #page .userReportButton {
      left: 40px;
      bottom: 0px;
   }

   #fetchInfo {
      left: 10%;
      width: 80%;
   }

   #previewPage .functionBodyInnerTitle {
      font-size: 16px;
      text-align: left;
      padding-left: 18px;
      line-height: 44px;
   }

   #previewPage .oneFunctionCreationLine .afterInput4 {
      border: 1px solid rgba(0, 255, 255, 0);
      display: block;
      margin-top: 11px;
      padding-left: 183px;
   }

   #previewPage .afterInput4 select {
      margin-left: 0px;
   }

   #previewPage #functionStart,
   #previewPage #functionEnd,
   #previewPage #argPrint {
      width: calc(100% - 280px);
   }

   #previewPage .functionFactoryLanguageSelection[data-location="casesRow"] {
      text-align: left;
   }

   #previewPage .oneFunctionCreationLine .multipleCasesInputClass {
      width: 140px;
   }

   #previewPage .functionCreationLines[data-type="switch"] .afterInput3 {
      left: 354px;
   }

   #previewPage .if_comment_end {
      left: 416px;
   }

   .perLanguageShowIn {
      display: none;
   }

   #chainPreviewMoveHTML {
      display: none;
   }

   #chainPreview .showThisTitleDropdown {
      left: 8px;
   }

   .modified_indicator_button {
      right: 70px;
      top: 8px;
   }

   #page #ccFindReplace {
      width: 75%;
   }

   .plyr__control--overlaid {
      transition: unset;
      top: 20%;
   }

   .glossaryLogo {
      min-width: unset;
   }

   .glossaryLogoFull {
      display: none;
   }

   .glossaryLogoPartial {
      display: inline-block;
   }

   #hideOtherDialogs {
      max-width: 500px;
      width: 98%;
   }

   .oneModuleCell.isHidden {
      width: 138px;
   }

   .oneModuleCell.hideOthers {
      width: 107px;
   }

   .oneModuleCell .hideOthersInnerText {
      width: 70px;
   }

   .theModulesToChange .oneModuleCell.hideOthers,
   .theModulesToChange .oneModuleCell.isHidden {
      padding-left: 13px;
   }

   .oneModuleCell.theName {
      width: 170px;
   }

   .theModulesToChange .oneModuleCell.theName {
      width: 167px;
   }

   #page #modifiedButtonDialog {
      min-width: unset;
      width: 94%;
   }

   #optionsWindow[data-deletemultiple="yes"] .newSessionDeleteMultiple.altLocation {
      width: 100px;
      text-align: center;
      padding: 0px;
      height: 20px;
      line-height: 20px;
   }

   .newSessionDeleteMultiple .deleteDisabled,
   .newSessionDeleteMultiple .canDelete {
      height: 20px;
      line-height: 20px;
   }

   .newSessionDeleteMultiple .canDelete .multipleDeleteCheckboxes,
   .newSessionDeleteMultiple .canDelete .deleteMultipleText {
      height: 20px;
      line-height: 18px;
   }

   #glossaryPage #glossaryOptionsSection {
      left: 0px;
      width: 100%;
      font-size: 10px;
   }

   .featureSummaryDisplayStatus[data-type="videos"] {
      width: 97px;
   }

   .featureSummaryDisplayStatus[data-type="features"] {
      width: 140px;
   }

   .glossaryPageHideHelpButtons {
      display: none !important;
   }
}

@media only screen and (max-width: 660px) {
   .colorListFormatText .partialText {
      display: none;
   }

   .previewCodeURLBox {
      width: unset;
   }

   #previewPageOptionsBar {
      width: calc(100% - 38px);
   }

   #previewCodeHeaderCover {
      display: none !important;
   }

   #previewCodeHeader[data-optionsbarstatus="active"] .previewPageToggleButton {
      display: inline-block;
   }

   .previewCodeURLBox .actualURL {
      width: 130px;
   }

   #previewPage .loadNewLink input {
      width: 61%;
   }

   .containerSizeTitle {
      font-size: 0.85em;
   }

   #previewPage #previewMeasurementSection {
      left: 20px;
   }

   #previewPage .previewPagePickerButton {
      right: 72px;
   }

   #previewPageOptionsButton {
      right: 114px;
   }

   .previewFullLogo,
   .previewPartialLogo {
      display: none;
   }

   #plotPointDialog {
      width: 80%;
   }

   .sessionRowInfoContainer,
   .sessionSnapshot {
      height: 76px;
   }

   .sessionSnapshot {
      width: 130px;
   }

   .infoContainerCell {
      height: 19px;
      line-height: 19px;
   }

   .infoContainerCellTitle,
   .infoContainerCellContent {
      font-size: 9px;
      height: 19px;
      line-height: 19px;
   }

   .infoContainerCellTitle {
      width: 74px;
   }

   .sessionRowInfoContainer {
      width: calc(100% - 131px);
   }

   .sessionCellCopySection,
   .newSessionDeleteButton {
      top: 0px;
   }

   .infoContainerCellContent .sessionsShowLanguage {
      min-width: 31px;
      height: 19px;
      line-height: 19px;
   }

   #glossaryGroupsSidebar {
      width: 300px;
   }

   .thirdCombinedLoc,
   .thirdGlossaryLoc,
   .thirdModuleLoc,
   .thirdSummaryLoc {
      width: calc(100% - 310px);
   }
}

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

   #selectorOverlay {
      width: 85%;
      !important;
   }

   #selectorOverlay .toolOverlayTitleButton {
      display: none;
   }

   #cc_top_menu {
      padding: 9px 5px;
   }

   .cc_logo {
      right: 8px;
   }

   #cc_top_menu,
   .cc_top_menu_copy {
      width: calc(100% - 47px);
   }

   .selectShortcutGroups {
      text-align: left;
      padding-left: 25px;
   }

   .selectionTitleText {
      display: none;
   }

   .maximizeCheckboxContainer[data-language="javascript"] .languageSettingsTitle {
      display: none;
   }

   .maximizeCheckboxContainer[data-language="javascript"] .languageSettingsTitleAbbreviation {
      display: inline-block;
   }

   #page .languageSettingsTitle {
      width: 40px;
   }

   #cc_top_menu,
   .cc_top_menu_copy {}

   .hideModules,
   .showHiddenModules {
      top: 40px;
      height: 12px;
      width: 12px;
      font-size: 8px;
      line-height: 12px;
   }

   .showHiddenModules {
      left: 25px;
   }

   #layoutOverlay .normalLayoutView {
      display: none;
   }

   #presetsContainer input {
      width: 140px;
   }

   #layoutOverlay .narrowLayoutView {
      display: inline-block;
   }

   #inactiveContainer .cc_drag_title,
   #overlayContainer .cc_drag_title {
      width: 45px;
      text-overflow: ellipsis;
      font-size: 8px;
   }

   #layoutOverlay .sampleRenderButton {
      display: none;
   }

   .presetButton {
      width: 25px;
      height: 25px;
      line-height: 20px;
   }

   .finishedMovingSectionsButton {
      width: unset;
   }

   .togglePresetListButton {
      font-size: 10px;
      width: unset;
   }

   #page #listCopy2 {
      right: 10%;
      left: unset;
   }

   .inactive-overlay .moveHereRow {
      font-size: 10px;
   }

   .quickSwitchSection {
      border-top: 1px dashed rgba(150, 150, 150, 0.47);
      border-right: 1px dashed rgba(150, 150, 150, 0.47);
      border-left: 1px dashed rgba(150, 150, 150, 0.47);
      border-image: initial;
      padding: 5px 0px 5px 8px;
      cursor: pointer;
      border-bottom: none;
      text-align: left;
   }

   .quickSwitchType {
      width: calc(100% - 50px);
   }

   #cc_top_bar.condensedView #cc_top_menu {
      width: calc(100% - 55px);
   }

   .hideTopBarArrow {
      right: -5px;
      font-size: 8px;
   }

   .sessionsContainerTitle .cc_select {
      display: block;
   }

   .firstKeyHintRow .cc_select {
      display: none;
   }

   .otherUserInputSection {
      font-size: 12px;
   }

   #addOthersCode,
   #addOthersLogin {
      max-width: 35%;
   }

   .addOthersLoginTitle {
      width: 120px;
   }

   #searchUserShortcuts {
      width: 40px;
   }

   .sharedObjectPreviewTitle {
      padding-left: 8px;
      font-size: 11px;
   }

   #codeCreate.condensedView .cc_logo #codeCreateNavButton {
      right: 2px;
      font-size: 12px;
   }

   #page #ccFindReplace {
      min-width: 300px;
   }

   .glossaryTitleText {
      font-size: 10px;
   }

   .glossaryFilterSection {
      width: calc(100% - 146px);
      font-size: 14px;
   }

   #glossaryFilterInput {
      width: calc(100% - 120px);
      font-size: 12px;
   }

   .glossaryFilterButton {
      width: 28px;
      font-size: 9px;
      text-align: center;
   }

   .previewPageAllSessionsInner {
      width: 96%;
      margin-left: 2%;
   }

   #previewPageAllSessionsContainer {
      padding: 0px;
   }

   #glossaryPage #glossaryOptionsSection {
      left: 0px;
      width: 100%;
      font-size: 8px !important;
   }

   .featureSummaryDisplayStatus[data-type="videos"] {
      width: 80px;
   }

   .featureSummaryDisplayStatus[data-type="features"] {
      width: 120px;
   }

   #glossaryPage[data-options="shown"] #glossaryOptionsSection .glossaryOptionsHelpContainer {
      display: none;
   }

   .newExplanationLine,
   .newExplanation {
      font-size: 11px;
   }

   .glossaryNavSelectArea,
   .glossaryPreviousNext,
   .glossaryBottomBarTabsInner {
      padding-left: 3px;
      font-size: 10px;
   }

   .glossaryTitle {
      padding-left: 4px;
   }

   .moduleTitleText {
      font-size: 14px;
   }

   #glossaryBottomBar {
      height: 159px;
   }
}

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

   #page #fetchCodeSection,
   #page #copyLinkSection {
      width: 100%;
      height: 30px;
      overflow: hidden;
   }

   #previewCodeHeader {
      height: 35px;
      padding-left: 5px;
   }

   #previewPage .previewPagePickerButton {
      right: 72px;
   }

   #previewPageOptionsButton {
      right: 98px;
   }

   .previewFullLogo,
   .previewPartialLogo {
      display: none;
   }

   #outerFrameContainer {
      top: 35px;
      height: calc(100% - 35px);
   }

   .previewPageOptionsButton {}

   .previewPageRenderButton,
   #previewCodeHeader .openOnMainPage {
      display: inline-block;
   }

   .layoutNameTitleAbbreviated {
      display: inline-block;
      width: 105px;
   }

   .layoutNameTitleFull {
      display: none;
   }

   #page #fetchCodeSection .fetchCodeButton {
      width: 56px;
      text-align: center;
      font-size: 8px;
   }

   .snippetParentName {
      display: none;
   }

   .userShowShortcutLine {
      font-size: 12px;
   }

   #sharedObjectPreview .oneColorRowContainer {
      width: 30px;
      margin-right: 8px;
   }

   .user_snippet_rows .userShowSnippet {
      min-width: unset;
      width: 100px;
   }

   .otherUserInputSection {
      height: 220px;
   }

   #presetList {
      width: 70%;
      left: 10%;
   }

   #previewPageOptionsButton {
      right: 115px;
   }
}

@media only screen and (max-width: 550px) {
   #theme_selection_compile {
      display: none !important;
   }
}

@media only screen and (max-width: 540px) {
   .condensedOrientationArea {
      margin-right: 30px;
      transform: translate(-10px, 0px);
      width: 15px !important;
   }

   #cc_top_menu .orientationSquare {
      display: none;
      cursor: default;
   }

   .defaultGroupExtraText {
      display: none;
   }

   .selectShortcutGroups {
      padding-left: 75px;
   }

   .selectShortcutGroupsText {
      display: none;
   }

   #templatesAndSessions {
      width: 90%;
      overflow: hidden;
   }

   .descriptionSection {
      top: 100px;
      min-width: unset;
      width: 90%;
   }

   #layoutOverlay .sampleButtonTwo.sampleTopBarButton,
   #layoutOverlay .sampleRenderButton {
      display: none;
   }

   #cc_top_bar.condensedView .condensedOrientationArea {
      display: none;
   }

   #page #outputConsoles {
      overflow: hidden;
      max-height: 73%;
   }

   #outputConsoles::after {
      content: "";
      position: absolute;
      left: 0px;
      color: rgba(255, 255, 255, 0.35);
      bottom: 5px;
   }

   #newAdminButtons {
      max-width: calc(100% - 60px);
   }

   .toggleFeaturesOverlay,
   #buttonsBar>.toggleButtonsBar {
      display: none;
   }

   #entireReportsFilterPositionTwo {
      margin-top: 0px;
      margin-left: 0px;
   }

   .reportsFilterWord {
      display: none;
   }

   #sharedObjectPreview {
      width: 100%;
      left: 0px;
   }

   .cc_select[data-var="basicSharingSettings"] {
      font-size: 10px;
      max-width: 270px;
   }

   #previewCodeHeader .previewPageOptionsButton.openOnMainPage {
      display: none;
   }

   .passcodeExplanation {
      margin-top: 2px;
   }

   #subTypeContainer,
   .cc_select[data-list="subType"] {
      display: none;
   }

   .smallTopMenuButtons {
      display: none;
   }

   .plyr__control--overlaid {
      top: 10%;
      transition: unset;
   }

   .plyr__control--overlaid img {
      transition: unset;
      height: 50px !important;
      width: 50px !important;
   }

   #glossaryOptionsSection {
      left: 4px;
      font-size: 11px;
   }

   #theGlossary[data-sidebar="on"] .thirdGlossaryLoc,
   #theGlossary[data-sidebar="on"] .thirdModuleLoc,
   #theGlossary[data-sidebar="on"] .thirdCombinedLoc,
   #theGlossary[data-sidebar="on"] .thirdSummaryLoc {
      display: none !important;
   }

   #glossaryGroupsSidebar {
      width: 98%;
   }
}

@media only screen and (max-width: 499px) {
   .normalMakeSectionOneTitle {
      display: none;
   }

   .smallMakeSectionOneTitle {
      display: inline-block;
   }

   .condensedOrientationArea {
      transform: unset;
   }

   #page .smallTopMenuButtons {
      white-space: normal;
      line-height: 15px;
   }

   #page .toggleCondensedPage {
      display: none !important;
   }

   .containerIsEmpty {
      display: none;
   }

   .rightOptionsContainer {
      width: 100%;
      left: 0px;
      position: relative;
   }

   .optionsContainerTitle {
      text-align: left;
      padding-left: 15px;
   }

   #sampleTopBar {
      display: none;
   }

   #layoutOverlay .togglePresetListButton {
      top: 40px;
   }

   #nameDisplay {
      right: unset;
      left: 0px;
      max-width: 85%;
      overflow: hidden;
      text-overflow: ellipsis;
   }

   .containerSizeTitle {
      overflow: hidden;
      text-overflow: ellipsis;
      font-size: 0.75em;
   }

   #cc_error_page #userResetSection {
      width: 94%;
   }

   #previewPage #previewMeasurementSection {
      max-width: 80%;
      left: 5%;
   }

   .snippetManagerSelection,
   .CSSColorList.colorsOnly,
   .CSSColorList.snippetsOnly {
      width: 100%;
      margin-left: 0px;
   }

   .userShortcutSearchSection,
   #userShortcutContainer {
      width: 100%;
      margin-left: 0px;
   }

   .oneColorRowContainer {
      width: 30px;
      margin-right: 8px;
   }

   .previewingGroupTitleText {
      display: none;
   }

   .otherUserInputTitle {
      height: 40px;
      line-height: 57px;
      text-align: center;
   }

   .otherUserInputSection {
      height: 250px;
   }

   #chainPreview .showThisTitleDropdown {
      display: none;
   }

   #previewCompileContainer {
      margin-left: 2%;
      width: 96%;
   }

   .sessionRowInfoContainer,
   .sessionSnapshot {
      height: 46px;
   }

   .sessionSnapshot {
      width: 80px;
   }

   .infoContainerCell {
      height: 23px;
      line-height: 23px;
   }

   .infoContainerCell[data-type="description"],
   .infoContainerCell[data-type="languages"] {
      display: none;
   }

   .infoContainerCellTitle,
   .infoContainerCellContent {
      font-size: 9px;
      height: 23px;
      line-height: 23px;
   }

   .infoContainerCellTitle {
      width: 74px;
   }

   .sessionRowInfoContainer {
      width: calc(100% - 80px);
   }

   .infoContainerCellContent .sessionsShowLanguage {
      min-width: 31px;
      height: 19px;
      line-height: 19px;
   }

   .sessionCellCopySection,
   .newSessionDeleteButton {
      display: none;
   }

   .infoContainerCell[data-type="name"] .infoContainerCellContent {
      max-width: unset;
   }

   #optionsWindow[data-deletemultiple="yes"] .newSessionDeleteMultiple.altLocation,
   .toggleDeleteMultipleButton,
   #optionsWindow#optionsWindow[data-deletemultiple="yes"] .finalizeDeleteMultipleButton {
      display: none;
   }

   #mainGlossarySearchInput {
      width: 130px;
   }

   .mainGlossarySearchButtonsRow {
      right: unset;
      left: 0px;
   }

   .mainGlossarySearchFull {
      display: none;
   }

   .mainGlossarySearchPartial {
      display: inline-block;
   }
}

@media only screen and (max-width: 460px) {
   .preferenceLine .accentSetDefault {
      right: -30px;
   }

   #page .languageAccentBox input {
      width: 68px;
      text-align: left;
      padding: 0px;
   }

   .currentSessionVanitySetting {
      top: 17px;
   }

   .descriptionTitle {
      height: 40px;
   }

   #cc_top_menu {
      overflow: hidden;
   }

   #cc_top_menu[data-status="options"] {
      overflow: visible;
   }

   .compileTitle {
      text-align: left;
      padding-left: 15px;
   }

   #cc_error_page .resetAllSessions,
   #cc_error_page .resetAllShortcuts {
      padding: 2px;
      width: 100px;
   }

   #userResetSection,
   #userResetSection * {
      font-size: 10px !important;
   }

   .cc_logo {
      right: 7px;
   }

   .cc_logo .condensedLayoutButton {
      margin-bottom: 8px;
   }

   #entire_persistent_picker[data-position="left"],
   #entire_persistent_picker[data-position="middle"],
   #entire_persistent_picker[data-position="right"] {
      left: 7% !important;
   }

   #page #cc_top_bar.condensedView .cc_open_preview,
   #page #cc_top_bar.condensedView .autosaveButtonContainer {
      display: none;
   }

   #cc_top_menu {}

   #previewPage .previewPageOptionsButton.toggleStyleEditorButton,
   #previewPage .previewPageOptionsButton.loadNewPreview {
      display: none;
   }

   #page[data-width="normalWidth"] .extraSettingsWindowDialog {
      width: 55%;
   }

   .windowMeasurementTitlePartial {
      width: 80px;
      display: inline-block;
   }

   .windowMeasurementTitleFull {
      display: none;
   }

   #filterSearchSection {
      display: none;
   }

   .userShowSnippet {
      min-width: unset;
      width: 75px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      top: 5px;
      position: relative;
   }

   .lineTitleFullWord {
      display: none;
   }

   .lineItemPartialWord {
      display: inline-block;
   }

   .showShortcutLineItemTitle {
      font-size: 12px;
      position: relative;
   }

   .userShowShortcutLine .copyUserSnippet {
      width: 40px;
      white-space: nowrap;
   }

   .otherUserInputSection {
      padding: 2px;
      font-size: 12px;
   }

   #addOthersCode,
   #addOthersLogin {
      max-width: 35%;
      font-size: 10px;
   }

   .addOthersLoginTitle {
      width: 85px;
      font-size: 10px;
   }

   #searchUserShortcuts {
      width: 20px;
   }

   .userCurrentlyViewing {
      font-size: 10px;
   }

   .loadedOtherColors,
   .loadedOtherSnippets {
      font-size: 11px;
   }

   .sharedShortcutPreview,
   .sharedShortcutAdd {
      width: 50px;
   }

   .sharedShortcutPreview {
      right: 65px;
   }

   .user_snippet_rows .userShowSnippet {
      min-width: unset;
      width: 60px;
   }

   .allUserShortcutTitle {
      text-align: left;
      padding-left: 10px;
      font-size: 14px;
   }

   .inactiveSelectOptions {
      font-size: 0.8em;
      max-width: 80%;
   }

   .cc_select[data-var="basicSharingSettings"] {
      font-size: 10px;
      max-width: 220px;
   }

   .passcodeSaveButton {
      display: block;
      margin-left: 8px;
   }

   .previewInformationSection {
      display: none;
   }

   #previewCodeHeader .previewPageOption.reloadOptions {
      width: 294px;
      overflow: hidden;
   }

   #userShortcutSearch {
      width: 54%;
   }

   #previewPage .sessionCell[data-title="Time_Saved"] {
      display: none;
   }

   #previewPage .sessionCell {
      width: 100%;
   }

   .previewCompiledCodePartial {
      display: inline-block;
   }

   .previewCompiledCodeFull {
      display: none;
   }

   #glossaryOptionsSection {
      left: 0px;
      font-size: 11px;
   }

   .glossaryTitlePartial {
      display: inline-block;
      width: 25px;
      font-size: 12px;
      padding-top: 0px;
      vertical-align: top;
      height: 27px;
      line-height: 31px;
      left: 5px;
      position: relative;
   }

   .glossaryOptionsTitle {
      width: 28px;
   }

   #actualGlossaryOptions {
      width: calc(100% - 40px);
   }

   .glossaryTitleFull {
      display: none;
   }

   #glossaryBottomBar select {
      font-size: 9px;
      width: 200px;
   }

   .glossaryLoadMoreSectionTitle {
      font-size: 9px;
      width: 90px;
   }

   #page .mainGlossarySearchStart.clear,
   .mainGlossaryQueryWord {
      display: none;
   }

   .moduleTitleText {
      font-size: 12px;
   }
}

@media only screen and (max-width: 350px) {
   #glossaryBottomBar select {
      font-size: 8px;
      width: 180px;
   }

   .glossaryLoadMoreSectionTitle {
      font-size: 8px;
      width: 80px;
   }

   #page .cc_select[data-var="languageToChange"] {
      display: none;
   }

   .smallLanguageSelectionTitle {
      display: block;
      text-align: center;
      top: 10px;
      position: absolute;
      color: rgb(154, 151, 151);
      width: 100%;
   }

   .languageActivityButton {
      display: none;
   }

   #optionsWindow {
      overflow: visible;
   }

   .optionsWindowCover {
      background: rgb(0, 0, 0);
      opacity: 1;
   }

   #optionsWindow[data-currentoptions="compile"] .optionsWindowCover {
      display: none;
   }

   #layoutOverlayTooSmall {
      display: block;
      color: lightgray;
   }

   #sessionOptionsOverlay .coverTitle {
      display: none;
   }

   #codeCreate #templatesAndSessions .closeSessionOverlay {
      top: 2px;
      right: 4px;
   }

   #templatesAndSessionsCover,
   .templatesWindowTooSmall,
   .optionsWindowTooSmallText {
      font-size: 14px;
      color: lightgray;
      width: 100%;
      font-family: consolas;
   }

   .templatesWindowTooSmall {
      display: block;
   }

   .optionsWindowTooSmallText {
      color: rgb(150, 150, 150);
   }

   .optionsWindowTooSmallText {
      width: 96%;
      padding: 12px;
      text-align: center;
   }

   #optionsWindow[data-currentoptions="compile"],
   #optionsWindow[data-currentoptions="private_error"],
   #optionsWindow[data-currentoptions="idleDialog"],
   #optionsWindow[data-currentoptions="cannotFetch"] {
      display: none;
   }

   #customizeCover .coverTitle {
      display: none;
   }

   #entire_persistent_picker[data-position="left"],
   #entire_persistent_picker[data-position="middle"],
   #entire_persistent_picker[data-position="right"] {
      left: 5px !important;
   }

   #extraLanguageOptionContainer {
      display: none !important;
   }

   .basicColorInnerTitle {
      text-align: left;
      padding-left: 15px;
   }

   .css_color_rows .basicColorRowName {
      font-size: 9px;
   }

   .css_color_rows .moveShortcutUp {
      right: 70px;
   }

   .css_color_rows .moveShortcutDown {
      right: 85px;
   }

   .userShowSnippet,
   #sharedObjectPreview .userShowSnippet {
      width: 40px;
   }

   #presetList {
      width: 94%;
      left: 2%;
   }

   #previewPage .cc_colorPickerButton,
   #previewPage #previewPageOptionsButton {
      display: none;
   }



   .optionsWindowTitle .titleHideShow {
      display: none;
   }

   .cc_settings_bar .cc_settings_button {
      display: none;
   }

   #mainGlossarySearchInput {
      width: 95px;
   }
}

@media only screen and (max-width: 300px) {
   #previewPage .previewPageOptionsButton {
      display: none;
   }

   #previewPage .previewPageRenderButton {
      display: inline-block;
   }
}

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