@font-face {
    font-family: 'IBM3270';
    src: url('fonts/3270-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

* {
    font-family: 'IBM3270';
}


.navBar {
    position: absolute;
    left: 0;
    top: 0;
    width: 500px;
    height: 79vh;
    background: linear-gradient(to right, transparent 90%, #010101 100%), 
        linear-gradient(to bottom, transparent 95%, #010101 100%), 
        #292E27;
    border-right: solid 10px #82825D;
    border-bottom: solid 10px #82825D;
    transition: transform 0.3s ease;
    z-index: 1000;
}
.navBox {
    height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
}

.navBox::-webkit-scrollbar {
    width: 6px;
}

.navBox::-webkit-scrollbar-track {
    background: #292E27;
}

.navBox::-webkit-scrollbar-thumb {
    background: #74695F;
    border-radius: 3px;
}

.navBtn {
    position: absolute;
    right: -75px;
    top: 20px;
    width: 65px;
    height: 70px;
    background: #94695F;
    border: none;
    color: #c3c381;
    font-size: 3rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0 10px 10px 0;
}

.navBtn:hover {
    color: #ffffff;
}

.navBar.collapsed {
    transform: translate(-510px);
}

.navMenu {
    list-style: none;
    display: flex;
    flex-direction: column;
    padding: 0;
    margin: 0;
}

.navLogo {
    display: block;
    padding: 20px;
    color: #01FC01;
    text-decoration: none;
    font-size: 2.2rem;
    font-weight: bold;
    cursor:  default;
}

.navLink {
    display: inline-flex;
    padding: 12px 20px;
    color: #01FC01;
    text-decoration: none;
    width: 100%;
    font-size: 4rem;
    white-space: normal;
    word-break: break-word;
    width: max-content;
}

.navDrop {
    list-style: none;
    padding-left: 20px;
    margin: 0;

    font-size: 2.5rem;
    white-space: normal;
    word-break: break-word;
    padding-bottom: 50px;
}

.navDrop a {
    display: inline-flex;
    align-items: center;
    padding: 8px 15px;
    color: #01FC01;
    text-decoration: none;
    width: 100%;
    width: max-content;
}

.navDrop a:hover,
.navLink:hover {
    text-decoration: underline;
}

.navLink.active::after, .navDrop a.active::after {
    content: "|";
    animation: blink 1s step-start infinite;
    margin-left: 4px;
   
}
@keyframes blink {
    50% {
        opacity: 0;
    }
}

/*Seed Search Body---------------------------------------------*/

html {
    background: black;
}

body {
    background-image: url(images/lcspace1.png);
    background-repeat: repeat-y;

}

.main {
    margin-left: 0;
    margin-top: 0;
    color: #01FC01;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: flex-start;
    padding-block: 100px;
    padding-bottom: 100vh;
}

.searchBg {
    display: flex;
    flex-direction: column;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    justify-self: center;
    width: clamp(300px, 80%, 1300px);
    border-radius: 30px;
    position: relative;
    padding: 20px;
    z-index: 0;
}

.searchBg::before {
    content: "";
    position: absolute;
    display: flex;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url(images/lccrtlines2.png);
    background-repeat: repeat;
    border-radius: inherit;
    opacity: 0.8;
    z-index: -1;

}

.searchHeader {
    padding-block: 5px;
    display: flex;
    flex-direction: column;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    justify-self: center;
    height: 100%;
    width: 100%;
    max-width: 1300px;
    border-radius: 30px;
    border: 0px solid green;
    gap: 20px;
}



.filterToggle {
    font-weight: bold;
    font-size: 2rem;
    color: #038203;
    background-color: rgba(10, 50, 10, 0.1);
    transition: 0.2s ease;
    border: 3px solid #038203;
    border-radius: 10px;
    cursor: pointer;
}

.filterToggle.active {
    background-color: #038203;
    color: #01FC01;
    border-color: #01FC01;
}

.filterToggle:hover {
    background-color: #005e00;
    color: #00c300;
}



.dungeonBox {
    display: flex;
    flex-direction: column;
    align-items: center;
    border-radius: 30px;
    border: 0px solid green;
    width: 100%;
    justify-content: center;
}
.dungeonToggles {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
    row-gap: 10px;
}
.dungeonToggles .filterToggle {
    width: 260px;
}
.scrapBox {
    display: flex;
    flex-direction: column;
    align-items: center;
    border-radius: 30px;
    border: 0px solid green;
    width: 100%;
    justify-content: center;
}
.scrapToggles {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: center;
}
/*---------------------------------------------*/
.scrapToggles .totalBox {
        display: flex;
        justify-content: center;
        gap: 10px;
    }
.scrapToggles .amountBox {
        display: flex;
        justify-content: center;
        gap: 10px;
    }

input {
    font-size: 2rem;
    border-radius: 10px;
    border: 3px solid #038203;
    background-color: rgba(10, 50, 10, 0.1);
    color: #038203;
    line-height: 10px;
    transition: 0.2s ease;
    outline: none;
    width: 250px;
    text-align: center;
    position: relative;
}

.inputLabel {
    position: absolute;
    padding: 15px;
    font-size: 1.8rem;
    z-index: -1;
    transition: 0.2s ease;
    transform: translate(-3px, -49px);
    border-radius: 4px;
    color: #038203;
    font-weight: bold;
}

input:focus {
    border-color: #01FC01;
    color: #01FC01;
}
    input:focus + .inputLabel,
    input:valid:not(.sidInput) + .inputLabel,
    .sidInput.active + .inputLabel {
        transform: translate(-41px, -67px) scale(0.50);
        z-index: 4;
        background-color: #01FC01;
        padding: 5px;
        color: black;
    }
.sidType.active + .inputLabel {
    transform: translate(-50px, -67px) scale(0.50);
}
.scrapType.active + .inputLabel {
    transform: translate(-36px, -67px) scale(0.50);
}
.seedBox input:focus + .inputLabel,
.seedBox input:valid + .inputLabel {
    transform: translate(-14px, -67px) scale(0.50);
}
.cycleBox input:focus + .inputLabel,
.cycleBox input:valid + .inputLabel {
    transform: translate(-14px, -51px) scale(0.50);
}
.pageInputBox input:focus + .inputLabel,
.pageInputBox input:valid + .inputLabel {
    transform: translate(-14px, -67px) scale(0.50);
}

input:valid:not(:focus):not(.sidInput) + .inputLabel,
.sidInput.active:not(:focus) + .inputLabel {
    background: #038203;
    color: #01FC01;
}




.errorMessage {
    position: absolute;
    border-radius: 4px;
    display: none;
    transform: translate(-10px, -77px) scale(0.88);
    z-index: 4;
    background-color: red;
    padding: 5px;
    color: white;
    transition: 0.2s ease;
}
.cycleBox .errorMessage {
    transform: translate(-142px, -71px) scale(0.88);
}
.seedBox .errorMessage {
    transform: translate(-22px, -91px) scale(0.88);
}
.totalBox .errorMessage {
    transform: translate(-25px, -77px) scale(0.88);
}
input:invalid:not(:placeholder-shown):not(:focus) ~ .errorMessage {
    display: block;
    
}
input:invalid:not(:placeholder-shown):not(:focus) + .inputLabel {
    display: none;
}
/*---------------------------------------------*/

.dropdown {
    display: flex;
    flex-direction: column;
}
.nutDrop,
.bugDrop,
.fogDrop,
.sortDrop,
.randomDrop,
.pageDrop {
    width: 260px;
}

.dropTop {
    background-image: url(images/lccrtlines2.png);
    background-repeat: repeat;
    height: 29px;
    border: 3px solid #038203;
    border-bottom: hidden;
    border-radius: 10px;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    position: relative;
    z-index: 97;
}
.dropdownbtn {
    height: 30px;
    background: none;
    border: none;
    color: #038203;
    font-weight: bold;
    font-size: 2rem;
    cursor: pointer;
    z-index: 97;
    width: 100%;
    display: flex;
}
.dropTop .dropdownbtn:hover {
    text-decoration: underline;
}

.dropHider {
    position: relative;
    clip-path: inset(0px -1000px -1000px -1000px);
    height: 8px;
    transform: translateY(-1px);
}
.menu {
    display: flex;
    flex-direction: column;
    position: absolute;
    border-radius: 10px;
    border-top-left-radius: 0px;
    border-top-right-radius: 0px;
    border: 3px solid #038203;
    border-top: hidden;
    width: 100%;
    z-index: 96;
    transition: 0.3s ease;
    gap: 10px;
    align-items: center;
    padding-bottom: 10px;
    background-image: url(images/lccrtlines2.png);
    background-repeat: repeat;
    bottom: -1px;
    left: 0%;
    padding-top: 20px;
    box-sizing: border-box; /*allows width: 100% to include menu border*/
}
.menu.active {
    transform: translateY(95%);
}
.menu .filterToggle,
.menu .selectToggle {
    width: 90%;
}
.meteor1Drop,
.meteor2Drop {
    width: 100px;
}
.meteor1Drop .menu,
.meteor2Drop .menu,
.cycleDrop .menu {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    padding-top: 10px;
}




.inputSelection input {
    z-index: 3;
}
.inputSelection .inputLabel {
    z-index: 2;
}
.inputSelection .dropdown{
    z-index: 1;
}
.inputSelection .float {
    z-index: 5;
}

.totalBox {
    z-index: 100;
}
.amountBox {
    z-index: 99;
}
.sidBox {
    z-index: 98;
}
.scrapTypeBox {
    z-index: 95;
}
.nutDrop {
    z-index: 94;
}
.bugDrop {
    z-index: 93;
}
.fogDrop {
    z-index: 92;
}
/*meteor and cycle boxes must not have a z-index*/
.meteor1Drop, 
.meteor2Drop {
    z-index: 91;
}
.cycleDrop {
    z-index: 90;
}

.seedBox {
    z-index: 89;
}
.sortDrop {
    z-index: 84;
}

.sidDrop {
    z-index: 97;
}
.sidInputDrop {
    z-index: 96;
}
.sidInputDrop:has(.sidInput.active) {
    z-index: 98;
}




/*---------------------------------------------*/
.sidBox,
.scrapTypeBox {
    display: flex;
    flex-direction: column;
    gap: 10px;
    justify-content: center;
}

.sidInput {
    font-size: 1.5rem;
    height: 32px;
    width: 250px;
    color: transparent;
}
.sidInput.active {
    color: #038203;
}
.sidInput:focus {
    color: #01FC01;
}

.sidInputDrop {
    position: relative;
}
.sidListBox,
.scrapListBox {
    border-radius: 10px;
    border: 3px solid #038203;
    position: absolute;
    background-image: url(images/lccrtlines2.png);
    background-repeat: repeat;
    width: 254px;
    display: none;
    flex-direction: column;
}
.scrapListBox {
    z-index: 2;
}
.sidListBox.active,
.scrapListBox.active {
    display: flex;
}
.sidList {
    width: 244px;
    gap: 10px;
    display: flex;
    max-height: 400px;
    overflow-y: scroll;
    flex-direction: column;
    padding: 5px;
    border-bottom: 3px solid #038203;
}
.sidItem,
.scrapItem {
    display: flex;
    justify-content: center;
    padding-right: 2px;
    padding-left: 2px;
    border-radius: 10px;
    border: 3px solid #038203;
    height: 32px;
    align-items: center;
    color: #038203;
    background-color: rgba(10, 50, 10, 0.1);
    transition: 0.2s ease;
    font-weight: bold;
    position: relative;
}
.sidItem:hover,
.scrapItem:hover {
    background-color: #1e411e;
    color: #00c300;
}



.sidItem p {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-size: 1.05rem;
    width: 120px;
}
.sidList::-webkit-scrollbar, 
.scrapList::-webkit-scrollbar {
    width: 6px;
}
.sidList::-webkit-scrollbar-track,
.scrapList::-webkit-scrollbar-track {
    background: #038203;
}
.sidList::-webkit-scrollbar-thumb,
.scrapList::-webkit-scrollbar-thumb {
    background: #01FC01;
    border-radius: 3px;
}
.excludeItem, .includeItem {
    border-radius: 5px;
    border: 2px solid;
    min-width: 41px;
    height: 28px;
    display: flex;
    position: relative;
    transition: 0.2s ease;
}
.excludeItem {
    border-color: #970c03;
    background-color: rgba(50, 10, 10, 0.6);
    color: #970c03;
    display: block;
    position: absolute;
    left: 2px;
    cursor: pointer;
}

.includeItem {
    border-color: #038203;
    background-color: rgba(10, 50, 10, 0.6);
    color: #038203;
    font-weight: normal;
    display: block;
    position: absolute;
    right: 2px;
    cursor: pointer;
}

.includeItem span {
    position: absolute;
    top: -9px;
    left: 7px;
    font-size: 2.8rem;
}
.excludeItem span {
    position: absolute;
    top: -3px;
    left: 10px;
    font-size: 2rem;
}

.sidItem.inactive,
.sidItem.inactive .excludeItem:not(:hover) {
    background-color: #892c17;
    color: #fc7c01;
    border-color: #fc2001;
}
.sidItem.inactive:hover,
.excludeItem:hover {
    background-color: #5c1e10;
    color: #ba5602;
}

.sidItem.active,
.sidItem.active .includeItem:not(:hover) {
    background-color: #038203;
    color: #01FC01;
    border-color: #01FC01;
}
.sidItem.active:hover,
.includeItem:hover {
    background-color: #005e00;
    color: #00c300;
}


.availableBox {
    display: flex;
    width: 100%;
    justify-content: center;
    align-items: center;
    height: 46px;
}
.toggleAvailable {
    font-weight: bold;
    font-size: 1.3rem;
    color: #038203;
    background-color: rgba(10, 50, 10, 0.1);
    transition: 0.2s ease;
    border: 3px solid #038203;
    border-radius: 10px;
    cursor: pointer;
    height: 40px;
}
.toggleAvailable.active {
    background-color: #038203;
    color: #01FC01;
    border-color: #01FC01;
}
.toggleAvailable:hover {
    background-color: #005e00;
    color: #00c300;
}
/*Scrap Types---------------------------------------------*/


.scrapList {
    width: 244px;
    gap: 10px;
    display: flex;
    max-height: 400px;
    overflow-y: scroll;
    flex-direction: column;
    padding: 5px;
    border-bottom: 3px solid #038203;
}

.scrapItem {
    gap: 2px;
}
.scrapItem p {
    width: 140px;
    text-align: center;
}
.scrapItem .selectToggle {
    font-size: 1.8rem;
    border: 2px solid #038203;
    border-radius: 5px;
    height: 28px;
    width: 40px;
    font-weight: bold;
    background-color: rgba(10, 50, 10, 0.6);
    line-height: 24px;

}

.scrapItem input {
    width: 72px;
    font-size: 1.4rem;
    border: 2px solid #038203;
    border-radius: 5px;
    font-weight: bold;
    height: 22px;
    background-color: rgba(10, 50, 10, 0.6);
}
.scrapItem input:focus {
    border: 2px solid #01FC01;
}


.scrapItem.unavailable {
    background: rgba(100, 100, 100, 0.4);
    color: #648e64;
    border-color: #648e64;
}

.scrapItem.unavailable:hover {
    background: #202320;
    color: #4d674d;
}
.dayPotential {
    height: 34px;
    z-index: 1;
}
.dayPotential p {
    width: 126px;
    font-size: 0.95rem;
}

.rushBox {
    display: flex;
    flex-direction: column;
    align-items: center;
    border-radius: 30px;
    border: 0px solid green;
    width: 100%;
    justify-content: center;
    padding-bottom: 7px;
}
.rushToggles {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
    row-gap: 18px;
}

/*Miscellaneous---------------------------------------------*/

.dropdownM.inactive + .inputField {
    z-index: -2;
}

.miscBox {
    display: flex;
    flex-direction: column;
    align-items: center;
    border-radius: 30px;
    border: 0px solid green;
    width: 100%;
    justify-content: center;
    padding-bottom: 30px;
}
.miscToggles {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
}
.miscToggles .filterToggle {
    width: 260px;
}

.selectToggle {
    font-weight: bold;
    font-size: 2rem;
    color: #038203;
    background-color: rgba(10, 50, 10, 0.1);
    transition: 0.2s ease;
    border: 3px solid #038203;
    border-radius: 10px;
    cursor: pointer;
}
.selectToggle.active {
    background-color: #038203;
    color: #01FC01;
    border-color: #01FC01;
}
.selectToggle:hover {
    background-color: #005e00;
    color: #00c300;
}

.seedBox {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.meteorBox {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.meteorBox .filterToggle,
.cycleInfo .filterToggle {
    font-size: 1.8rem;
    height: 40px;
}
.meteorInfo,
.cycleInfo {
    display: flex;
    border: 3px solid #038203;
    border-radius: 10px;
    justify-content: center;
    align-items: center;
    gap: 16px;
    padding: 3px;
    background-color: rgba(10, 50, 10, 0.1);
    z-index: -2;
}
.meteorToggle.active + .meteorInfo {
    z-index: 91;
}
.cycleToggle.active + .cycleInfo {
    z-index: 90;
}

.meteorInfo .dropdown,
.cycleInfo .dropdown {
    width: 115px;
}
.meteorInfo .dropTop,
.cycleInfo .dropTop {
    height: 17px;
}
.meteorInfo .menu,
.cycleInfo .menu {
    overflow-y: hidden;
    background-position-y: bottom;
    max-height: 200px;
}
.meteorInfo .dropdownbtn,
.cycleInfo .dropdownbtn {
    height: 22px;
    font-size: 1.3rem;
    background-image: url(images/lccrtlines2.png);
    background-repeat: repeat;
    border-radius: 10px;
}
.meteorInfo .dropdownbtn.active,
.cycleInfo .dropdownbtn.active {
    border-bottom-left-radius: 0px;
    border-bottom-right-radius: 0px;
}
.meteorInfo .menu.active,
.cycleInfo .menu.active {
    overflow-y: auto;
}
.meteorInfo .selectToggle,
.cycleInfo .selectToggle {
    font-size: 1.4rem;
    height: 33px;
}

.meteorInfo .menu::-webkit-scrollbar {
    width: 6px;
}

.meteorInfo .menu::-webkit-scrollbar-track {
    background: #038203;
    border-top-left-radius: 3px;
    margin-top: 5px;
}

.meteorInfo .menu::-webkit-scrollbar-thumb {
    background: #01FC01;
    border-radius: 3px;
}

.cycleBox {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.cycleInfo {
    width: 248px;
    gap: 12px;
}


.cycleBox input {
    width: 105px;
    height: 20px;
    font-size: 1.5rem;
}
.cycleBox .inputLabel {
    font-size: 1.5rem;
    transform: translate(-6px, -41px);
}


.totalBox {
    display: flex;
    flex-direction: column;
}
.amountBox {
    display: flex;
    flex-direction: column;
}


/*Tag System---------------------------------------------*/

.activeFilters {
    display: flex;
    flex-direction: column;
    border: 3px solid #648e64;
    background-color: rgba(10, 20, 10, 0.6);
    width: max(200px, 98%);
    min-height: 31px;
    overflow: hidden;
    flex-wrap: wrap;
    position: relative;
    padding: 5px;
    padding-left: 15px;
}
.tagHider {
    position: absolute;
    left: 4px;
    top: 6px;
    background-color: #061006;
    width: 40px;
    height: 15px;
    border-radius: 10px;
    text-align: end;
    padding-top: 6px;
}

.tagBox {
    display: none;
    flex-wrap: wrap;
    align-items: center;
    gap: 5px;
}
.tagBox:has(.filterTag) {
    display: flex;
}
.bracket {
    font-size: 1.9rem;
    width: 5px;
}
.bracket.end {
    transform: translate(-12px);
}
.tagWrapper {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}

.tagWrapper::before {
    content: "[";
    font-size: 1.9rem;
}
.tagWrapper::after {
    content: "]";
    font-size: 1.9rem;
}


.filterTag {
    display: inline-block;
    padding: 4px 10px;
    margin: 4px;
    border-radius: 20px;
    background: #333;
    color: white;
    font-size: 0.9rem;
}

/* Query-----------------------------------------------*/

.queryBox {
    display: flex;
    gap: 20px;
    row-gap: 10px;
    flex-wrap: wrap;
    justify-content: center;
}
.flip,
.clearTags,
.noTableToggle {
    width: 260px;
}
.flip.hide {
    z-index: -2;
}
.pageDivider {
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    width: 100%;
    gap: 4px;
    height: 70px;
}
.pageDivider::before,
.pageDivider::after {
    content: "";
    flex: 1;
    border-top: 4px dashed #00ceeb;
}
.queryBtn .selectToggle {
    font-size: 3rem;
    border-radius: 20px;
    width: 260px;
    border: 5px solid #00ceeb;
    color: #00ceeb;
    background-color: rgba(10, 10, 50, 0.6);
    height: 70px;
    
}
.pageDivider h1 {
    font-size: 3rem;
    color: #00ceeb;
}
.pageDivider h2 {
    color: #00ceeb;
}
.explainBox {
    display: flex;
    flex-direction: column;
    color: #00ceeb;
    border: 3px solid #00ceeb;
    background-color: rgba(10, 10, 50, 0.6);
    font-size: 1.5rem;
    text-align: center;
    justify-content: center;
    align-items: center;
    padding-bottom: 10px;
}
.explainBox p {
    width: 80%;
}
.explainBox h3 {
    height: 30px;
}
.queryTags {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}
.queryBtn .selectToggle:hover {
    background-color: #114036;
    color: #00ceeb;
}

.bodyHelp {
    font-size: 1.5rem;
    color: #c3c381;
}

/* RESULTS SECTION-----------------------------------------------*/
.loadingScreen {
    position: absolute;
    display: flex;
    flex-direction: column;
    background-color: rgba(10, 20, 10, 0.95);
    width: 100%;
    height: 100%;
    text-align: center;
    z-index: 51;
    border: 5px solid #172817;
}
.loadingScreen.hidden {
    display: none;
}
.loadingText {
    font-size: 2rem;
    position: sticky;
    top: 10dvh;
}
.resultsBox {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    align-items: center;
}
.resultMatches {
    font-size: 1.6rem;
    text-align: center;
}

.randomBox,
.statsBox {
    display: flex;
    gap: 10px;
    padding: 10px;
    z-index: 50;
    flex-wrap: wrap;
    justify-content: center;
}
.statsBox {
    z-index: 49;
}
.randomTable,
.statsTable {
    padding: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}
.randomTable {
    gap: 10px;
}
.statsTable {
    font-weight: bold;
    font-size: 1.5rem;
}
.timeValue {
    font-weight: normal;
    font-size: 1.4rem;
}




.resultsTableBox {
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 100%;
    max-width: max-content;
    border: 3px solid #00ceeb;
    border-top: none;
}
.header {
    position: sticky;
    top: 0;
    background-image: url(images/lccrtlines2.png);
    background-repeat: repeat;
    gap: 10px;
    display: flex;
    flex-direction: column;
    border-top: 3px solid #00ceeb;
    z-index: 48;
}
.headerAlign {
    display: flex;
    flex-direction: column;
    align-items: center;
}
.headerBox {
    display: flex;
    align-items: start;
    flex-wrap: wrap;
    width: 98%;
    gap: 10px;
    z-index: 48;
}
.headerPage {
    display: flex;
    font-size: 1.5rem;
    text-align: center;
    padding-top: 13px;
    padding-bottom: 20px;
}
.pageInputBox {
    display: flex;
    flex-wrap: wrap;
}
.pageInput {
    width: 100px;
    z-index: 0;
}
.pageDrop {
    z-index: 1;
}
.pageDrop.float {
    z-index: 5;
}

.bodyTable {
    white-space: nowrap;
    text-align: center;
    overflow-x: auto;
    table-layout: fixed;
}
.bodyTable::-webkit-scrollbar {
    width: 2px;
}
.bodyTable::-webkit-scrollbar-track {
    background: #038203;
    border-top-left-radius: 3px;
    margin-top: 5px;
}
.bodyTable::-webkit-scrollbar-thumb {
    background: #01FC01;
    border-radius: 3px;
}
.resultsTableBox table {
    table-layout: fixed;
    width: max-content;
}



.bodyTable td:first-child,
.headerTable th:first-child {
    position: sticky;
    left: 0;
    z-index: 45;
    background: #010B01;
}
.headerTable {
    white-space: nowrap;
    text-align: center;
    align-content: end;
    z-index: 46;
    background: #010B01;
    background-image: url(images/lccrtlines2.png);
    background-repeat: repeat;
    overflow: hidden;
}
.headerTable th:first-child {
    z-index: 47;
}

.unavailable {
    background: rgba(100, 100, 100, 0.4);
    color: #648e64;
    border-color: #648e64;
}

.scrapItem .unavailable {
    background: rgba(100, 100, 100, 0.4);
    color: #648e64;
    border-color: #648e64;
}

.unavailable:hover {
    background: #202320;
    color: #4d674d;
}

.rushToggles .unavailable {
    background: #293129;
}
.rushToggles .unavailable .dropdownbtn {
    color: #648e64;
}

.moonTitle {
    font-size: 3rem;
    text-align: center;
}