@keyframes change-color {
  0% {
    color: #FDB142;
  }
  25% {
    color: #00A4BD;
  }
  50% {
    color: #FF7A59;
  }
  75% {
    color: #00BDA5;
  }
  100% {
    color: #FDB142;
  }
}

@keyframes breatheBox {
  from {box-shadow: inset 2px 2px 5px 0px #000000, inset 0px 0px 0px 0px #FDB142, inset 0px 0px 80px 70px #2D424B;}
  to {box-shadow: inset 2px 2px 5px 0px #000000, inset 0px 0px 10px 0px #FDB142, inset 0px 0px 80px 70px #2D424B;}
}

@keyframes loadingtext {
    0% {background-position: 100% 50%;}
    50% {background-position: 50% 50%;}
    100% {background-position: 0% 50%;}
}

@keyframes menuswitchlightsright {
    0% {color: transparent; background-clip: text; background-image: linear-gradient(90deg,rgba(255, 255, 255, 1) 33%, rgba(0, 0, 0, 1) 0%);}
    20% {color: transparent; background-clip: text; background-image: linear-gradient(90deg,rgba(255, 255, 255, 1) 33%, rgba(0, 0, 0, 1) 0%);}
    60% {color: transparent; background-clip: text; background-image: linear-gradient(90deg,rgba(0, 0, 0, 1) 33%, rgba(255, 255, 255, 1) 33%, rgba(255, 255, 255, 1) 66%, rgba(0, 0, 0, 1) 66%);}
    80% {color: transparent; background-clip: text; background-image: linear-gradient(90deg,rgba(0, 0, 0, 1) 66%, rgba(255, 255, 255, 1) 66%);}
    100% {color: transparent; background-clip: text; background-image: linear-gradient(90deg,rgba(0, 0, 0, 1) 66%, rgba(255, 255, 255, 1) 66%);}
}
@keyframes menuswitchlightsleft {
    0% {color: transparent; background-clip: text; background-image: linear-gradient(90deg,rgba(0, 0, 0, 1) 66%, rgba(255, 255, 255, 1) 66%);}
    20% {color: transparent; background-clip: text; background-image: linear-gradient(90deg,rgba(0, 0, 0, 1) 66%, rgba(255, 255, 255, 1) 66%);}
    60% {color: transparent; background-clip: text; background-image: linear-gradient(90deg,rgba(0, 0, 0, 1) 33%, rgba(255, 255, 255, 1) 33%, rgba(255, 255, 255, 1) 66%, rgba(0, 0, 0, 1) 66%);}
    80% {color: transparent; background-clip: text; background-image: linear-gradient(90deg,rgba(255, 255, 255, 1) 33%, rgba(0, 0, 0, 1) 0%);}
    100% {color: transparent; background-clip: text; background-image: linear-gradient(90deg,rgba(255, 255, 255, 1) 33%, rgba(0, 0, 0, 1) 0%);}
}

@keyframes hoverGun {
     100% {transform: translate(0px, -5px) scale(150%);}
}

@keyframes breatheGun {
    /*from {transform: translate(0px, 0px) scale(70%); -webkit-filter: drop-shadow(0px 0px 1px #fdb2425b) drop-shadow(0px 0px 1px #fdb2425b) drop-shadow(0px 0px 1px #fdb2425b) drop-shadow(0px 0px 1px #fdb2425b) drop-shadow(0px 0px 1px #fdb2425b) drop-shadow(0px 0px 1px #fdb2425b) drop-shadow(0px 0px 1px #fdb2425b) drop-shadow(0px 0px 1px #fdb2425b) drop-shadow(0px 0px 10px #fdb24270) drop-shadow(0px 10px 10px #000000); filter: drop-shadow(0px 0px 1px #fdb2425b) drop-shadow(0px 0px 1px #fdb2425b) drop-shadow(0px 0px 1px #fdb2425b) drop-shadow(0px 0px 1px #fdb2425b) drop-shadow(0px 0px 1px #fdb2425b) drop-shadow(0px 0px 1px #fdb2425b) drop-shadow(0px 0px 1px #fdb2425b) drop-shadow(0px 0px 1px #fdb2425b) drop-shadow(0px 0px 10px #fdb24270) drop-shadow(0px 10px 10px #000000);}
    to {transform: translate(0px, -5px) scale(71%); -webkit-filter: drop-shadow(0px 1px #FDB142) drop-shadow(0px -1px #FDB142) drop-shadow(1px 0px #FDB142) drop-shadow(-1px 0px #FDB142) drop-shadow(1px 1px #FDB142) drop-shadow(-1px -1px #FDB142) drop-shadow(1px -1px #FDB142) drop-shadow(-1px 1px #FDB142) drop-shadow(0px 0px 20px #fdb242a6) drop-shadow(0px 50px 20px #000000be); filter: drop-shadow(1px 1px #FDB142) drop-shadow(-1px -1px #FDB142) drop-shadow(1px 1px #FDB142) drop-shadow(-1px -1px #FDB142) drop-shadow(1px -1px #FDB142) drop-shadow(-1px 1px #FDB142) drop-shadow(0px 0px 20px #fdb242a6) drop-shadow(0px 50px 20px #000000be);}*/
    from {transform: translate(0px, 0px) scale(70%); -webkit-filter: drop-shadow(0px 0px 20px #fdb24270) drop-shadow(0px 10px 10px #000000); filter: drop-shadow(0px 0px 10px #fdb24270) drop-shadow(0px 10px 10px #000000);}
    to {transform: translate(0px, -5px) scale(71%); -webkit-filter: drop-shadow(0px 0px 30px #FDB142) drop-shadow(0px 50px 20px #000000be); filter: drop-shadow(0px 0px 20px #FDB142) drop-shadow(0px 50px 20px #000000be);}

}

@keyframes gunShadow {
    /*from {transform: translate(0px, 0px) scale(70%);; -webkit-filter: drop-shadow(0px 10px 10px #000000); filter: drop-shadow(0px 10px 10px #000000);}*/
    /*100% {transform: translate(0px, -5px) scale(75%);; -webkit-filter: drop-shadow(0px 50px 20px #000000be); filter: drop-shadow(0px 50px 20px #000000be);}*/
    0% {transform: translate(0px, 0px) scale(70%); -webkit-filter: drop-shadow(0px 0px 1px #fdb2425b) drop-shadow(0px 0px 1px #fdb2425b) drop-shadow(0px 0px 1px #fdb2425b) drop-shadow(0px 0px 1px #fdb2425b) drop-shadow(0px 0px 1px #fdb2425b) drop-shadow(0px 0px 1px #fdb2425b) drop-shadow(0px 0px 1px #fdb2425b) drop-shadow(0px 0px 1px #fdb2425b) drop-shadow(0px 0px 10px #fdb24270) drop-shadow(0px 10px 10px #000000); filter: drop-shadow(0px 0px 1px #fdb2425b) drop-shadow(0px 0px 1px #fdb2425b) drop-shadow(0px 0px 1px #fdb2425b) drop-shadow(0px 0px 1px #fdb2425b) drop-shadow(0px 0px 1px #fdb2425b) drop-shadow(0px 0px 1px #fdb2425b) drop-shadow(0px 0px 1px #fdb2425b) drop-shadow(0px 0px 1px #fdb2425b) drop-shadow(0px 0px 10px #fdb24270) drop-shadow(0px 10px 10px #000000);}
    100% {transform: translate(0px, -5px) scale(72%); -webkit-filter: drop-shadow(0px 1px #FDB142) drop-shadow(0px -1px #FDB142) drop-shadow(1px 0px #FDB142) drop-shadow(-1px 0px #FDB142) drop-shadow(1px 1px #FDB142) drop-shadow(-1px -1px #FDB142) drop-shadow(1px -1px #FDB142) drop-shadow(-1px 1px #FDB142) drop-shadow(0px 0px 20px #fdb242a6) drop-shadow(0px 50px 20px #000000be); filter: drop-shadow(1px 1px #FDB142) drop-shadow(-1px -1px #FDB142) drop-shadow(1px 1px #FDB142) drop-shadow(-1px -1px #FDB142) drop-shadow(1px -1px #FDB142) drop-shadow(-1px 1px #FDB142) drop-shadow(0px 0px 20px #fdb242a6) drop-shadow(0px 50px 20px #000000be);}

}

@keyframes insideShadow {
    /*from {-webkit-filter: drop-shadow(0px 0px 0px #000000be); filter: drop-shadow(0px 0px 0px #000000be);;}
    to {-webkit-filter: drop-shadow(0px 0px 20px #000000be); filter: drop-shadow(0px 0px 20px #000000be);;}*/
      from {box-shadow: inset 0px 0px 10px 0px #000000; z-index: 15;}
  to {box-shadow: inset 0px 0px 50px 5px #000000; z-index: 15;}

}

@keyframes insideShadowHover {
    /*from {-webkit-filter: drop-shadow(0px 0px 0px #000000be); filter: drop-shadow(0px 0px 0px #000000be);;}
    to {-webkit-filter: drop-shadow(0px 0px 20px #000000be); filter: drop-shadow(0px 0px 20px #000000be);;}*/
    from {box-shadow: inset 0px 0px 15px 0px #000000; z-index: 15;}
    to {box-shadow: inset 0px 0px 80 5px #000000; z-index: 15;}

}

@keyframes titleGlow {
    from {text-shadow: 0px 0px 7px #FDB142;}
    to {text-shadow: 0px 0px 11px #FDB142;}
}

@keyframes toolGlow {
    from {text-shadow: 0px 0px 6px white;}
    to {text-shadow: 0px 0px 8px white;}
}

@keyframes boxSpinX {
    0% {transform: rotatex(0deg);}
    25% {transform: rotatex(360deg); background-color: black; box-shadow: inset 0px 0px 10px 25px #FDB142;}
    50% {transform: rotatex(720deg);}
    100% {transform: rotatex(1080deg);}
}

@keyframes boxSpinY {
    0% {transform: rotatey(0deg); background-image: none; color: white}
    25% {transform: rotatey(360deg); background-image: none; color: white}
    50% {transform: rotatey(720deg); background-image: none; color: white}
    100% {transform: rotatey(1080deg); color: white}
}

@keyframes boxIdle {
    0% {transform: rotatex(0deg);}
    100% {transform: rotatex(0deg);}
}

.compLabel {
    color: #A3D5EA;
    font-variation-settings: "wdth" 95;
    font-size: 0.7vw !important;
    text-shadow: 2px 2px 0px rgb(77, 0, 77);
}

.compLabel-mobile {
    color: #A3D5EA;
    font-variation-settings: "wdth" 95;
    font-size: 3.5vw !important;
}

.compLabelOriginal {
    color: antiquewhite;
    font-variation-settings: "wdth" 95;
    font-size: 0.6vw !important;
}

.cardX {
    height: 10px;
    vertical-align: bottom;
    margin-bottom: 1px;
}

.cardArrow {
    height: 12px;
    vertical-align: center;
}

.cardStatEquip {
    font-family: "Fredoka", sans-serif;
    color: white;
    font-size: 0.6vw !important;
    padding: 5px !important;
    padding-top: 3px !important;
    padding-bottom: 3px !important;
    text-align: left;
}

.cardStatEquip-mobile {
    font-family: "Fredoka", sans-serif;
    color: white;
    font-size: 2vw !important;
    padding: 5px !important;
    padding-top: 3px !important;
    padding-bottom: 3px !important;
    text-align: left;
}

.cardStat {
    font-family: "Fredoka", sans-serif;
    color: white;
    padding-top: 0px !important;
    padding-bottom: 1px !important;
    text-align: left;
    font-variation-settings: "wdth" 85;
    font-variant-caps: all-petite-caps;
    padding-left: 5px !important;
    padding-right: 5px !important;
    text-shadow: 2px 2px 0px black;
    font-weight: 500;
}

.cardStatHeader {
    font-family: "Fredoka", sans-serif;
    color: black;
    font-size: 1em !important;
    padding: 5px !important;
    text-align: left;
}

.cardDiv {
    padding: 0px !important;
    min-height: 0px !important;
}

.cardDiv:after {
    content: "";
    display: block;
    margin: -1px;
    width: 100%;
    border-bottom: 1px solid #FDB142;
    border-right: 1px solid #FDB142;
    border-left: 1px solid #FDB142;
    height: 2px;
}

.cardStat:hover {
    text-shadow: 0px 0px 15px #FDB142, 0px 0px 15px #FDB142;
}
.cardStat-mobile {
    font-family: "Fredoka", sans-serif;
    color: white;
    font-size: 3.5vw !important;
    padding-left: 5px !important;
}

.cardStat-mobile:hover {
    text-shadow: 0px 0px 15px #FDB142, 0px 0px 15px #FDB142;
}

.context-menu {
    position: absolute;
    text-align: center;
    background: lightgray;
    border: 1px solid black;
    z-index: 99999;
}

.context-menu ul {
    padding: 0px;
    margin: 0px;
    min-width: 150px;
    list-style: none;
}

.context-menu ul li {
    padding-bottom: 7px;
    padding-top: 7px;
    padding-left: 5px;
    padding-right: 5px;
    border: 1px solid black;
}

.context-menu ul li a {
    text-decoration: none;
    color: black;
}

.context-menu ul li:hover {
    background: darkgray;
}

@keyframes fucktest {
    from {opacity: 0%;}
    to {opacity: 100%;}
}
@keyframes boxText {
    0% {opacity: 0%;}
    75% {opacity: 90%;}
    100% {opacity: 100%;}
}
body {
    .fredoka-standard {
        font-family: "Fredoka", sans-serif;
        font-optical-sizing: auto;
        font-weight: 400;
        font-style: normal;
        font-variation-settings: "wdth" 100;
    }

.containerattach {
    border:0px !important;
    width: 100% !important;
    margin-top: 0px !important;
    padding: 0px !important;
    padding-right: 0px !important;
    margin-bottom: 0px !important;
    padding-left: 0px !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    min-height: 50% !important;
    max-height: 50% !important;
    border-bottom: 1px solid #FDB142 !important;
}  

.containerattachdiv {
    border-left:0px !important;
    z-index: 4 !important;
    padding: 0px !important;
    height: 100% !important;
    width: 25% !important;
    border-bottom: 0px !important;
    border-top: 0px !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    margin: 0px !important;
    flex-direction: column;
}

.containerattachdivheader {
    background-color: #FDB142 !important;
    border-right: 1px solid #FDB142 !important;
    margin-top: 0px !important;
    margin-left: 0px !important;
    margin-right: 0px !important;
    padding: 0px !important;
    width: 100% !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    text-align: center !important;
    justify-content: space-evenly !important;
    min-height: 0 !important;
    height: 20%;
    align-items: center;
}
.containerattachdivbody {
    border-right: 1px solid #FDB142 !important;
    border-bottom: 0px !important;
    margin-top: 0px !important;
    margin-left: 0px !important;
    margin-right: 0px !important;
    padding: 0px !important;
    width: 100% !important;
    display: flex !important;
    flex-wrap: wrap !important;
    text-align: center !important;
    justify-content: start !important;
    min-height: 0 !important;
    background-color: #2D424B !important;
    flex-grow: 2;
    flex-direction: column;
}

.containerattachdiv .name {
    color: white !important;
    margin-top: 2px;
    margin-bottom: 0px !important;
    font-size: 0.8em;
    width: 100% !important;
    margin-left: 0px !important;
    text-align: center !important;
    padding-right: 0px !important;
    padding-left: 0px !important;
    padding-bottom: 1px;
    min-height: 0 !important;
    justify-content: center !important;
    align-items: start !important;
    display: flex !important;
    font-variation-settings: "wdth" 90;
    line-height: 12px;
}

.containerattachdiv .desc {
    color: white !important;
    margin-top: 0px !important;
    margin-bottom: 0px !important;
    margin-left: 0px !important;
    margin-right: 0px !important;
    font-size: 0.7em;
    font-weight:300 !important;
    width: 100% !important;
    text-align: center !important;
    padding-right: 0px !important;
    padding-left: 0px !important;
    min-height: 0 !important;
    justify-content: center !important;
    align-items: start !important;
    display: flex !important;
    font-variation-settings: "wdth" 85;
}

.build-chooser-button-div {
    border-radius: 10px;
    border: 0px !important;
    margin: 0px !important;
    display: flex;
    flex-wrap: nowrap;
    padding: 0.3% !important;
    align-items: center;
    flex-basis: 90%;
    flex-shrink: 0;
    border-right: 5px ridge #FDB142 !important;
    border-bottom: 5px ridge #FDB142 !important;
    background-color: #2D424B;
}
.build-chooser-button-div-mobile {
    border-radius: 5px;
    border: 0px;
    margin: 0px !important;
    min-height: 4vh;
    display: flex;
    flex-wrap: nowrap;
    padding: 0px !important;
    align-items: center;
    margin-top: 5px !important;
    width: 100%;
}

.fa-clone {
    font-size: 14px;
    width: 100%;
}

.build-copy-button {
    display: flex;
    width: 20%;
    height: 100%;
    margin: 0px;
    border: 0;
    border-right: 4px ridge #FDB142;
    border-bottom: 4px ridge #db9b3a;
    border-radius: 0px;
    align-items: center;
    justify-content: center;
}

.build-copy-button:hover {
    width: 20%;
    height: 100%;
    margin: 0px;
    border: 0;
    border-right: 4px ridge #FDB142;
    border-bottom: 4px ridge #db9b3a;
    border-radius: 0px;
    align-items: center;
    justify-content: center;
    box-shadow: initial;
}
.build-copy-button:active {
    width: 20%;
    height: 100%;
    margin: 0px;
    border: 0;
    border-left: 3px groove #b16a00;
    border-top: 3px groove #a26202;
    border-radius: 0px;
    align-items: center;
    justify-content: center;
    box-shadow: initial;
    transform: initial;
}

.build-copy-button-mobile {
    display: flex;
    width: 20%;
    height: 2.5dvh;
    margin: 5px;
    margin-top: 0px;
    gap: 10px;
    border: 5px inset #FDB142;
    border-radius: 0px;
    align-items: center;
    justify-content: center;
}

.build-copy-button-mobile:hover {
    width: 20%;
    height: 2.5dvh;
    margin: 5px;
    margin-top: 0px;
    gap: 10px;
    border: 5px inset #ffc56e;
    border-radius: 0px;
    align-items: center;
    justify-content: center;
}
.build-copy-button-mobile:active {
    width: 20%;
    height: 2.5dvh;
    border: 5px inset #FDB142;
    align-items: center;
    justify-content: center;
}

.build-chooser-button {
    width: 20%;
    height: 100%;
    margin: 0px;
    border: 0;
    border-right: 4px ridge #FDB142;
    border-bottom: 4px ridge #db9b3a;
    border-radius: 0px;
    font-size: 1.5em;
}

.build-chooser-button:hover {
    width: 20%;
    height: 100%;
    margin: 0px;
    border: 0;
    border-right: 4px ridge #b16a00;
    border-bottom: 4px ridge #a26202;
    background-color: #b16a00 !important;
    border-radius: 0px;
    box-shadow: initial;
}
.build-chooser-button:active {
    width: 20%;
    height: 100%;
    border: 0;
    border-left: 4px groove #b16a00;
    border-top: 4px groove #a26202;
    transform: initial;
    box-shadow: initial;
}

.build-chooser-button-selected {
    border: 0;
    border-right: 4px ridge white;
    border-bottom: 4px ridge white;
    text-shadow: 0px 0px 5px white;
    background: white;
}

.build-chooser-button-mobile {
    width: 20%;
    height: 100%;
    margin: 0px;
    border: 0;
    border-right: 4px ridge #FDB142;
    border-bottom: 4px ridge #db9b3a;
    border-radius: 0px;
}

.build-chooser-button-mobile:hover {
    width: 20%;
    height: 100%;
    margin: 0px;
    border: 0;
    border-right: 4px ridge #b16a00;
    border-bottom: 4px ridge #a26202;
    background-color: #b16a00 !important;
    border-radius: 0px;
    box-shadow: initial;
}
.build-chooser-button-mobile:active {
    width: 20%;
    height: 100%;
    border: 0;
    border-left: 4px groove #b16a00;
    border-top: 4px groove #a26202;
    transform: initial;
    box-shadow: initial;
}

.build-shuffle-button {
    flex-basis: auto;
    flex-grow: 1;
    height: auto;
    margin: 0;
    border-radius: 10px;
    font-size: 24px;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    justify-content: center;
    margin-right: 5px;
    align-items: center;
    border: 0;
    border-right: 4px ridge #FDB142;
    border-bottom: 4px ridge #db9b3a;
}

.build-shuffle-button:hover {
    flex-basis: auto;
    flex-grow: 1;
    height: auto;
    margin: 0;
    border-radius: 10px;
    font-size: 24px;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    justify-content: center;
    margin-right: 5px;
    align-items: center;
    background-color: #b16a00 !important;
    border: 0;
    border-right: 4px ridge #b16a00;
    border-bottom: 4px ridge #a26202;
    box-shadow: initial;
}
.build-shuffle-button:active {
    flex-basis: auto;
    flex-grow: 1;
    height: auto;
    margin: 0;
    border-radius: 10px;
    font-size: 24px;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    justify-content: center;
    margin-right: 5px;
    align-items: center;
    background-color: #b16a00 !important;
    border: 0;
    border-left: 4px groove #b16a00;
    border-top: 4px groove #a26202;
    transform: initial;
    box-shadow: initial;
}

.build-shuffle-button-mobile {
    width: 100%;
    height: initial;
    margin: 0px;
    margin-left: 5px;
    margin-right: 5px;
    gap: 10px;
    border: 5px inset #FDB142;
    border-radius: 5px 5px 0px 0px;
    flex-wrap: wrap;
}

.build-shuffle-button-mobile:hover {
    width: 100%;
    height: initial;
    margin: 0px;
    margin-left: 5px;
    margin-right: 5px;
    gap: 10px;
    border: 5px inset #ffc56e;
    border-radius: 5px 5px 0px 0px;
    background-color: #b16a00 !important;
    flex-wrap: wrap;
}
.build-shuffle-button-mobile:active {
    width: 100%;
    height: initial;
    border: 5px inset #FDB142;
}

.menu-switcher-button-animation-right {
    animation: menuswitchlightsright 1s steps(5, jump-both) 0s infinite;
}
.menu-switcher-button-animation-left {
    animation: menuswitchlightsleft 1s steps(5, jump-both) 0s infinite;
}

.menu-switcher-button {
    width: 50%;
    height: 4vh;
    margin: 0px;
    border-top: 0px;
    border-left: 1px solid #FDB142;
    border-radius: 10px 10px 5px 5px;
    font-size: 1.3vw;
    transition: height 0.2s ease;
    margin-top: 5px;
    border-right: 4px solid black;
    border-bottom: 4px solid black;
}

.menu-switcher-button:hover {
    width: 50%;
    height: 4vh;
    margin: 0px;
    border-top: 0px;
    border-left: 1px solid #FDB142;
    border-radius: 10px 10px 5px 5px;
    color: #fdff95;
    box-shadow: 0px 0px 0px black !important;
    margin-top: 5px;
    border-right: 4px solid black;
    border-bottom: 4px solid black;
}
.menu-switcher-button:active {
    width: 50%;
    height: 4vh;
    margin: 0px;
    border-top: 4px groove #233137;
    border-radius: 10px 10px 5px 5px;
    color: black;
    box-shadow: inset 2px 2px 5px black, inset 0px 0px 15px rgb(253, 255, 149) !important;
    background-color: #FDB142 !important;
    transform: initial;
    text-shadow: 0px 0px 3px rgb(253, 255, 149), 0px 0px 0px rgba(255, 255, 255, 0.589);
    margin-top: 5px;
    border-right: 0;
    border-bottom: 0;
    border-left:  4px groove #233137;
}

.menu-switcher-button-selected {
    width: 50%;
    height: 4vh;
    border-top: 4px groove #233137;
    background-color: #FDB142 !important;
    border-radius: 10px 10px 5px 5px;
    box-shadow: inset 2px 2px 5px black, inset 0px 0px 15px rgb(253, 255, 149);
    text-shadow: 0px 0px 3px rgb(253, 255, 149), 0px 0px 0px rgba(255, 255, 255, 0.589);
    margin-top: 5px;
    border-right: 0;
    border-bottom: 0;
    border-left:  4px groove #233137;
    
}
.menu-switcher-button-selected:hover {
    width: 50%;
    height: 4vh;
    margin: 0px;
    border-radius: 10px 10px 5px 5px;
    color: black;
    box-shadow: inset 2px 2px 5px black, inset 0px 0px 15px rgb(253, 255, 149) !important;
    text-shadow: 0px 0px 3px rgb(253, 255, 149), 0px 0px 0px rgba(255, 255, 255, 0.589);
    margin-top: 5px;
    border-right: 0;
    border-bottom: 0;
    border-left:  4px groove #233137;
    border-top: 4px groove #233137;
}

#infoboxText {
    position: absolute;
    font-family: "Doto", sans-serif;
    color: #ffffff;
    text-align: left;
    margin: 0px;
    margin-left: 10px;
    max-height: 100%;
    line-height: 15px;

    animation: toolGlow;
    animation-duration: 0.01s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-timing-function: ease;
}
#infoboxText2 {
    position: absolute;
    font-family: "Doto", sans-serif;
    color: #ffffff;
    text-align: left;
    margin: 0px;
    margin-left: 10px;
    max-height: 100%;
    line-height: 15px;

    animation: toolGlow;
    animation-duration: 0.01s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-timing-function: ease;
}


.spinanimation {
    animation: boxSpinX 0.5s ease-out 1;
}

.otherspinanimation {
    animation: boxSpinY 0.5s ease-out 1;
}
.otherspinanimation span {
    animation: boxText 0.5s ease-out 1;
}

    h1 {
        font-size: 2em;
        font-family: "Doto", sans-serif;
        font-weight: 300;
        color: #FDB142;
        padding: auto;
        text-align: center;
        display: flex;
        justify-content: center;
        align-items: center;

        animation: titleGlow;
        animation-duration: 0.01s;
        animation-iteration-count: infinite;
        animation-direction: alternate;
        animation-timing-function: ease;
    }

    h2 {
        font-family: "Fredoka", sans-serif;
        font-weight: 300;
        color: #FDB142;
        margin-top: 5px;
        margin-bottom: 10px;
        font-size: 1vw;
    }

    i {
        width: 100%;
        height: 100%;
    }

    h3 {
        font-family: "Fredoka", sans-serif;
        font-weight: 300;
        color: #FDB142;
    }

    p {
        font-family: "Fredoka", sans-serif;
        font-weight: 400;
        font-size: 1em;
    }

    a {
        font-family: "Fredoka", sans-serif;
        font-weight: 400;
        font-size: 1em;
    }

    select {
        font-family: "Fredoka", sans-serif;
        font-weight: 400;
    }

    label {
        font-family: "Fredoka", sans-serif;
        font-size:1em;
        display: flex;
        width: 100%;
        text-align: center;
        align-items: center;
        justify-content: center;
    }

    .commitgrid {
        background-color: #72b8d347 !important;
        margin-bottom: 10px !important;
        padding-bottom: 0px;
        border: 0 !important;
        border-radius: 5px !important;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: center;
        min-width: 0;
        color: white;
    }

    .commitsubdiv {
        display:flex;
        width: 80%;
        border: 0px;
        align-items: center;
        justify-content: center;
        padding: 0px;
        margin: 0px;
    }

    .oils {
        font-family: "Fredoka", sans-serif;
        font-weight: 400;
        font-size: 0.5em;
    }
    .oils-mobile {
        font-family: "Fredoka", sans-serif;
        font-weight: 400;
        font-size: 1.5em !important;
    }

    .steam-auth-panel {
        display: flex;
        justify-content: center;
        align-items: flex-end;
        margin: 0 0 8px;
        color: white;
        font-family: "Fredoka", sans-serif;
        flex-wrap: wrap;
        width: 22% !important;
        flex-grow: 0;
        gap: 3px;
        flex-direction: column;
        padding: 5px !important;
        flex-shrink: 0;
        border-radius: 0 !important;
        border-left: 1px solid black !important;
    }

    .steam-auth-identity {
        display: inline-flex;
        align-items: end;
        gap: 8px;
        min-width: 0;
        color: white;
        padding: 0 !important;
        width: 100% !important;
        justify-content: end;
    }

    .steam-auth-avatar {
        width: 32px;
        height: 32px;
        border-radius: 4px;
        border: 1px solid #FDB142;
        object-fit: cover;
    }

    .steam-auth-name {
        max-width: 220px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: 0.85rem;
    }

    .steam-auth-button {
        width: auto;
        height: auto;
        max-height: 30px;
        padding: 0;
        white-space: nowrap;
        cursor: pointer;
    }

    .steam-auth-button-secondary {
        background-color: #35525f;
        color: white;
        border: 0 !important;
        cursor: pointer;
        padding: 0 !important;
        font-size: 0.8rem !important;
        width: auto;
        height: auto;
    }

    .steam-auth-status {
        width: auto;
        font-size: 0.7rem;
        color: #e2edf0;
        text-align: right;
    }

    .steam-auth-status[data-state="success"] {
        color: #b9ffb9;
    }

    .steam-auth-status[data-state="error"] {
        color: #ffb3a8;
    }

    div.containerweapon {
        background-color: #FDB142;
        border: 1px solid #FDB142;
    }

    button {
        font-family: "Fredoka", sans-serif;
        font-weight: 500;
        font-size: 2em;
        background-color: #FDB142;
        border: 1px solid #FDB142;
        width: 100%;
        height: 100%;
        color: black;
        border-radius: 5px;
    }

        button:hover {
            font-family: "Fredoka", sans-serif;
            font-weight: 500;
            background-color: #FDB142;
            border: 3px solid rgb(253, 255, 149);
            width: 100%;
            box-shadow: inset 0px 0px 3px black, 3px 3px 5px black, 0px 0px 8px rgba(255, 255, 255, 0.589);
            color: rgb(253, 255, 149);
            border-radius: 5px;
            text-shadow: 0px 0px 3px rgb(253, 255, 149), 0px 0px 0px rgba(255, 255, 255, 0.589);
        }

        button:active {
            font-family: "Fredoka", sans-serif;
            font-weight: 500;
            background-color: #e4a039;
            border: 0px;
            width: 100%;
            box-shadow: inset 2px 2px 5px black, inset 0px 0px 15px rgb(253, 255, 149);
            text-shadow: 2px 2px 0px black;
            color: transparent;
            transform: translate(3px, 3px);
        }

.buttonSaveLoad    {
    font-family: "Fredoka", sans-serif;
    font-weight: 500;
    font-size: 1vw;
    background-color: #FDB142;
    border: 2px solid black;
    color: black;
    box-shadow: 3px 3px 0px 0px black;
    border-radius: 5px;
    width: 30px;
    height: 30px;
    padding: 0px;
    margin: 0px;
    margin-bottom: 4px;
    align-items: center;
    justify-content: center;
}
.buttonSaveLoadScreen    {
    font-family: "Fredoka", sans-serif;
    font-weight: 500;
    font-size: 1vw;
    background-color: #FDB142;
    border: 2px solid black;
    color: black;
    border-radius: 5px;
    width: 30px;
    height: 30px;
    padding: 0px;
    margin: 0px;
    margin-bottom: 4px;
    align-items: center;
    justify-content: center;
}

    .buttonSaveLoad:hover {
        font-family: "Fredoka", sans-serif;
        font-weight: 500;
        background-color: #FDB142;
        border: 2px solid rgb(253, 255, 149);
        width: 100%;
        box-shadow: inset 0px 0px 3px black, 3px 3px 5px black, 0px 0px 8px rgba(255, 255, 255, 0.589);
        color: rgb(253, 255, 149);
        border-radius: 5px;
        text-shadow: 0px 0px 3px rgb(253, 255, 149), 0px 0px 0px rgba(255, 255, 255, 0.589);
    }

    .buttonSaveLoad:active {
        font-family: "Fredoka", sans-serif;
        font-weight: 500;
        background-color: #e4a039;
        border: 1px solid black;
        width: 100%;
        box-shadow: inset 2px 2px 5px black, inset 0px 0px 15px rgb(253, 255, 149);
        text-shadow: 2px 2px 0px black;
        color: transparent;
        transform: translate(3px, 3px);
    }   

.buttonCommitInd    {
    font-family: "Fredoka", sans-serif;
    font-weight: 500;
    font-size: 2em;
    background-color: #FDB142;
    border: 2px solid black;
    color: black;
    box-shadow: 3px 3px 0px 0px black;
    border-radius: 5px;
    width: 30px;
    height: 30px;
    padding: 0px;
    margin: 0px;
    align-items: center;
    justify-content: center;
}
.buttonCommitInd2    {
    font-family: "Fredoka", sans-serif;
    font-weight: 500;
    font-size: 2em;
    background-color: #FDB142;
    border: 2px solid black;
    color: black;
    border-radius: 5px;
    width: 30px;
    height: 30px;
    padding: 0px;
    margin: 0px;
    align-items: center;
    justify-content: center;
}

    .buttonCommitInd:hover {
        font-family: "Fredoka", sans-serif;
        font-weight: 500;
        background-color: #FDB142;
        border: 2px solid rgb(253, 255, 149);
        width: 100%;
        box-shadow: inset 0px 0px 3px black, 3px 3px 5px black, 0px 0px 8px rgba(255, 255, 255, 0.589);
        color: rgb(253, 255, 149);
        border-radius: 5px;
        text-shadow: 0px 0px 3px rgb(253, 255, 149), 0px 0px 0px rgba(255, 255, 255, 0.589);
    }

    .buttonCommitInd:active {
        font-family: "Fredoka", sans-serif;
        font-weight: 500;
        background-color: #e4a039;
        border: 1px solid black;
        width: 100%;
        box-shadow: inset 2px 2px 5px black, inset 0px 0px 15px rgb(253, 255, 149);
        text-shadow: 2px 2px 0px black;
        color: transparent;
        transform: translate(3px, 3px);
    }   

.buttonMedia    {
    font-family: "Fredoka", sans-serif;
    font-weight: 500;
    font-size: 2em;
    background-color: #FDB142;
    border: 2px solid black;
    color: black;
    box-shadow: 3px 3px 0px 0px black;
    border-radius: 5px;
    width: 40px;
    height: 40px;
    padding: 0px;
    margin: 0px;
    margin-bottom: 4px;
    align-items: center;
    justify-content: center;
}

    .buttonMedia:hover {
        font-family: "Fredoka", sans-serif;
        font-weight: 500;
        background-color: #FDB142;
        border: 2px solid rgb(253, 255, 149);
        width: 40px;
        height: 40px;
        box-shadow: inset 0px 0px 3px black, 3px 3px 5px black, 0px 0px 8px rgba(255, 255, 255, 0.589);
        color: rgb(253, 255, 149);
        border-radius: 5px;
        text-shadow: 0px 0px 3px rgb(253, 255, 149), 0px 0px 0px rgba(255, 255, 255, 0.589);
    }

    .buttonMedia:active {
        font-family: "Fredoka", sans-serif;
        font-weight: 500;
        background-color: #e4a039;
        border: 1px solid black;
        width: 40px;
        height: 40px;
        box-shadow: inset 2px 2px 5px black, inset 0px 0px 15px rgb(253, 255, 149);
        text-shadow: 2px 2px 0px black;
        color: transparent;
        transform: translate(3px, 3px);
    }
    
.buttonGeneral-glass {
    display: flex;
    position: fixed;
    margin: 0 !important;
    border-radius: 10px;
    padding: 0 !important;
    border: 0 !important;
    background-image: radial-gradient(ellipse farthest-side at top right, transparent , white , #ffffff56 85%, #ffffff3b, #ffffff3a, #4b4b4b );
    mix-blend-mode: soft-light;
    left: anchor(left);
    right: anchor(right);
    top: anchor(top);
    bottom: anchor(bottom);
    height: auto;
    width: auto;
    opacity: 50%;
    pointer-events: none;
    z-index: 1000;
}

.buttonGeneral    {
    font-family: "Fredoka", sans-serif;
    font-weight: 500;
    font-size: 2em;
    background-color: #ffb74b4f;
    border: 2px solid black;
    color: black;
    box-shadow: 3px 3px 0px 0px black;
    border-radius: 10px;
    height: 100%;
    width: 25%;
    padding: 0px;
    margin: 0px;
    margin-right: 15px;
    align-items: center;
    justify-content: center;
    display: flex;
}

    .buttonGeneral:hover {
        font-family: "Fredoka", sans-serif;
        font-weight: 500;
        height: 100%;
        width: 25%;
        background-color: #FDB142;
        border: 2px solid rgb(253, 255, 149);
        box-shadow: inset 0px 0px 3px black, 3px 3px 5px black, 0px 0px 8px rgba(255, 255, 255, 0.589);
        color: rgb(253, 255, 149);
        border-radius: 10px;
        text-shadow: 0px 0px 3px rgb(253, 255, 149), 0px 0px 0px rgba(255, 255, 255, 0.589);
    }

    .buttonGeneral:active {
        font-family: "Fredoka", sans-serif;
        font-weight: 500;
        background-color: #e4a039;
        border: 1px solid black;
        box-shadow: inset 2px 2px 5px black, inset 0px 0px 15px rgb(253, 255, 149);
        text-shadow: 2px 2px 0px black;
        color: transparent;
        transform: translate(3px, 3px);
        height: 100%;
        width: 25%;
    }   

.buttonGeneral-mobile    {
    font-family: "Fredoka", sans-serif;
    font-weight: 500;
    font-size: 2em;
    background-color: #ffb74b4f;
    border: 2px solid black;
    color: black;
    box-shadow: 3px 3px 0px 0px black;
    border-radius: 10px;
    height: 80px;
    width: 25%;
    padding: 0px;
    margin: 0px;
    margin-bottom: 10px;
    margin-right: 15px;
    align-items: center;
    justify-content: center;
    display: flex;
}

    .buttonGeneral-mobile:hover {
        font-family: "Fredoka", sans-serif;
        font-weight: 500;
        height: 80px;
        width: 25%;
        background-color: #FDB142;
        border: 2px solid rgb(253, 255, 149);
        box-shadow: inset 0px 0px 3px black, 3px 3px 5px black, 0px 0px 8px rgba(255, 255, 255, 0.589);
        color: rgb(253, 255, 149);
        border-radius: 10px;
        text-shadow: 0px 0px 3px rgb(253, 255, 149), 0px 0px 0px rgba(255, 255, 255, 0.589);
    }

    .buttonGeneral-mobile:active {
        font-family: "Fredoka", sans-serif;
        font-weight: 500;
        background-color: #e4a039;
        border: 1px solid black;
        box-shadow: inset 2px 2px 5px black, inset 0px 0px 15px rgb(253, 255, 149);
        text-shadow: 2px 2px 0px black;
        color: transparent;
        transform: translate(3px, 3px);
        height: 80px;
        width: 25%;
    }   

.stuffbutton-mobile {
    height: 50px !important;
    width: 50px !important;
}

.loading-bar{
    display: none;
    width: 100%;
    height: 100%;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background-color: #18252b;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
}

#loadingbar-text-generating {
    animation: loadingtext 1s infinite linear;
    color: transparent;
    margin: 0;
    background-clip: text;
    background-image: linear-gradient(90deg,rgba(255, 255, 255, 1) 31%, rgba(0, 247, 255, 1) 50%, rgba(255, 255, 255, 1) 67%);
    background-size: 300% 300%;
}

#loadingbar-text-generating-success {
    animation: loadingtext 5s 1 linear;
    color: transparent;
    margin: 0;
    background-clip: text;
    background-image: linear-gradient(90deg,rgba(255, 255, 255, 1) 31%, rgba(0, 247, 255, 1) 50%, rgba(255, 255, 255, 1) 67%);
    background-size: 300% 300%;
    display: none;
}

.ext-mob {
    height: 11dvh !important;
    border: 0px !important;
    margin: 0px !important;
    padding: 0px !important;
}

.armor-header {
    font-size: 10px;
    font-weight: 600;
    display: flex;
    text-align: left;
    width: 100%;
    margin: 0px;
    text-shadow: 1px 1px 1px black;
}

.armor-desc {
    font-size: 9px;
    display: flex;
    text-align: left;
    width: 100%;
    margin: 0px;
    flex-direction: column;
    text-shadow: 1px 1px 1px black;
}

.armor-desc p {
    margin: 0px;
}

.armor-div {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    padding: 0px !important;
    border: 0px !important;
    flex-wrap: wrap !important;
    border: 0px !important;
    padding: 0px !important;
    flex-basis: 25% !important;
    flex-grow: 1 !important;
    flex-direction: column !important;
}

#weapons {
    height: 0%;
}

#weapons-custom-selected {
    padding: 5px !important;
    width: 110% !important;
}

#weaponboxcontain div {
    width: 90%;
    border: 2px solid black;
    border-radius: 5px;
}

.bigboxdeals {
    margin: 0px !important;
    padding: 0px !important;
    border: 0px solid #FDB142 !important;
    height: auto !important;
    min-height: 98vh !important;
    max-height: 98vh !important;
    z-index: 1;
    scroll-snap-align: start;
    padding-top: 1vh !important;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding-right: 10px !important;
    border-radius: 0px 15px 0px 0px;
    box-shadow: 5px 0px 20px -15px black;
    border-right: 5px groove #23363d !important;
}
.bigboxdeals-screen {
    margin: 0px !important;
    padding: 0px !important;
    border: 0px solid #FDB142 !important;
    height: auto !important;
    min-height: 98vh !important;
    max-height: 98vh !important;
    z-index: 1;
    padding-top: 1vh !important;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding-right: 5px !important;
}

.bigboxdeals-mobile {
    margin: 0px !important;
    margin-left: 1vw !important;
    margin-right: 1vw !important;
    padding: 0px !important;
    border: 0px solid #FDB142 !important;
    height: auto !important;
    z-index: 1 !important;
    scroll-snap-align: center;
    overflow-y: scroll;
    padding-top: 20px !important;
}

.linkinputoutput {
    padding: 5px;
    margin: 0px;
    margin-left: auto;
    border: 2px solid black;
    border-radius: 5px;
    width: 80%;
    height: 50%;
    font-family: "Fredoka", sans-serif;
    justify-content:left;
}

.custom-select {
    display: flex;
    position: relative;
    font-family: "Fredoka", sans-serif;
    font-size: 0.8em;
    text-align: left;
    background:transparent;
    border: 0 !important;
    border-radius: 15px;
    padding: 0px !important;
    width: 100% !important;
    height: 38px;
    align-items: center;
    margin: 0.5% !important;
}

select.custom-dropdown {
    display:none;
}

.custom-select-selected {
    font-size: 0.7vw;
    background-image: radial-gradient(ellipse farthest-side at top right, transparent , rgba(255, 255, 255, 0.23) , #ffffff15 85%, #ffffff15, #ffffff17, #4b4b4b30 ) !important;
    color:black;
    padding:5px;
    padding-top: 20px;
    margin: 0 !important;
    border:1px solid #444;
    cursor:pointer;
    display:flex;
    justify-content:space-between;
    align-items:center;
    background:#f0f0f0;
    z-index: 0;
    width: 100% !important;
    height: 20px;
    transition: background 0.15s ease,
                border-color 0.15s ease,
                box-shadow 0.15s ease,
                text-shadow 0.15s ease,
                font-weight 0.15s ease,
                color 0.15s ease;
}

.custom-arrow {
    font-size: 2em;
    font-weight: 100;
    margin: -10px;
    margin-right: 0px;
    transition:transform .15s ease, transform .15s ease;
    color:#000000;
}


.custom-select:hover .custom-arrow {
    transform: translate(0px, 2px);
    z-index:1001;
}

.custom-select.open:not(.drop-up) .custom-arrow {
    transform:translate(0px, 10px) scale(120%);
    z-index:1001;
}

.custom-select.open.drop-up .custom-arrow {
    transform: rotate(-180deg) translate(0px, 10px);
    
    z-index:1001;
}

.fa-caret-down {
    font-size: 12px;
    margin: -1px;
    padding: 0px;
}
.fa-arrows-spin {
    font-size: 20px;
    margin: -1px;
    padding: 0px;
}
.fa-caret-up {
    font-size: 12px;
    margin: -1px;
    padding: 0px;
}

.fa-arrow-left {
    font-size: 10px;
    margin: -1px;
    padding: 0px;
    margin-left: 5px;
    color: #89a0b8"
}

.fa-x {
    font-size: 7px;
    margin: -2px;
    padding: 0px;
    color: #89a0b8"
}

.oils1selector {
  position: relative;
  display: inline-block;
}

.oils1selector-content {
  display: none; /* Hide the dropdown content by default */
  position: absolute;
  background-color: #f1f1f1;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 1;
}

.oils1selector-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

.show {
  display: block;
}

.external-button-cont {
    margin: 0px;
    padding: 0px;
    border: 0px;
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    height: 10vh;
    width: 100% !important;
}
.external-button-cont-mobile {
    margin: 0px;
    padding: 0px;
    border: 0px;
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    width: 100% !important;
}

.btn-container {
    width: auto !important;
    padding: 5px !important;
}

.tooltipboxdiv {
    width: 40% !important;
    padding: 0px !important;
    height: 10vh !important;
    margin: 0px !important;
    justify-content: left !important;
    align-items:center !important;
    display: flex !important;
    z-index: 15 !important;
}

.tooltipboxdiv-mobile {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0px !important;
    height: 150px !important;
    margin: 0px !important;
    justify-content: left !important;
    align-items:center !important;
    display: flex !important;
    position: inherit !important;
    z-index: 15 !important;
    font-size: 4vw !important;
}

.weapondiv {
    display: flex !important;
    justify-content: space-evenly !important;
    align-items:center !important;
    padding-left: 0px !important;
    margin: 0px !important;
    margin-left: 0px !important;
    margin-bottom: 5px !important;
    border-radius: 10px !important;
    padding-top: 0px !important;
    padding-bottom: 0px !important;
    margin-top: 0 !important;
    height: auto !important;
    min-height: 6vh;
    flex-wrap: nowrap !important;
    border-right: 0 !important;
    border-bottom: 0 !important;
    background-color: #2D424B;
    border-left: 4px groove #233137 !important;
    border-top: 4px groove #233137 !important;
}

.sortfilterselected {
    text-shadow: 0px 0px 5px #FDB142;
}

.secondpagediv {
    border: 0px !important;
    margin: 0px !important;
    padding: 0px !important;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    height: 98vh;
    scroll-snap-align: end;
    justify-content: space-between;
    padding-bottom: 1vh !important;
    padding-right: 10px !important;
    flex-direction: column;
    border-right: 5px groove #23363d !important;
    border-radius: 0px 0px 15px 0px;
    box-shadow: 5px 0px 20px -15px black;
}
.secondpagediv-scroll {
    border: 0px !important;
    margin: 0px !important;
    padding: 0px !important;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    height: 98vh;
    margin-right: 10px !important;
    justify-content: space-between;
    padding-bottom: 1vh !important;
    flex-direction: column;
}

.secondpagediv-screen {
    border: 0px !important;
    margin: 0px !important;
    padding: 0px !important;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    height: 98vh;
    margin-right: 10px !important;
    justify-content: space-between;
    padding-bottom: 1vh !important;
    flex-direction: column;
}

.secondpagediv-screen-mobile {
    border: 0px !important;
    margin: 0px !important;
    padding: 0px !important;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    height: 20vh;
    margin-right: 10px !important;
    justify-content: space-between;
    padding-bottom: 1vh !important;
    flex-direction: column;
}

.secondpagediv-mobile {
    border: 0px !important;
    margin: 5px !important;
    padding: 0px !important;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    height: auto;
    scroll-snap-align: end;
    justify-content: space-between;
    padding-bottom: 1dvh !important;
    flex-direction: column;
    margin-left: 1vw !important;
    margin-right: 1vw !important;
}

.statbox {
    overflow: hidden;
}

.equipstatbox {
    margin: 0 !important;
    padding: 0px !important;
    border: 1px solid #FDB142;
    border-radius: 5px 10px 10px 10px;
    display: flex;
    flex-direction: column;
    align-items: start;
    border-left: 0 !important;
    overflow: clip;
    background-color: #2D424B;
}

.extendstatbox {
    margin:0px !important;
    padding:0px !important;
    border: 0px !important;
    border-radius: 5px;
    flex-basis: 80vh;
    width: 100%;
    display: flex;
    flex-grow: 1;
    flex-direction: column;
}

.extendstatbox-mobile {
    margin: 0px !important;
    padding: 0px !important;
    border: 0px !important;
    border-radius: 5px;
    flex-basis: 0;
    width: 100%;
    display: flex;
    flex-grow: 1;
    flex-direction: column;
}

.mobile-arrow {
    display: none;
    visibility: hidden;
}

.mobile-arrow-mobile {
    position: fixed;
    width: auto;
    bottom: anchor(bottom);
    height: 7dvh;
    margin: 0px !important;
    position-anchor: --arrow-anchor;
    left: anchor(left);
    right: anchor(right);
    border: 0px !important;
    background: linear-gradient(0deg,rgba(253, 178, 66, 0.689) 0%, rgba(255, 187, 84, 0.514) 19%, rgba(255, 255, 255, 0) 100%);
    align-items: center;
    display: flex;
    z-index: 2;
    justify-content: center;
}

.mobile-arrow-up {
    display: none;
    visibility: hidden;
}

.mobile-arrow-up-mobile {
    position: fixed;
    width: auto;
    top: anchor(top);
    height: 7dvh;
    margin: 0px !important;
    position-anchor: --arrow-anchor;
    left: anchor(left);
    right: anchor(right);
    border: 0px !important;
    background: linear-gradient(0deg,rgba(255, 255, 255, 0) 0%, rgba(255, 187, 84, 0.514) 81%, rgba(253, 178, 66, 0.689) 100%);
    align-items: center;
    display: flex;
    z-index: 40;
    justify-content: center;
}

.weapondiv-mobile {
    display: flex !important;
    justify-content: center !important;
    align-items:center !important;
    padding-left: 0px !important;
    border: 1px solid #FDB142 !important;
    margin: 0px !important;
    border-radius: 5px 5px 0px 0px !important;
    padding-top: 0px !important;
    padding-bottom: 0px !important;
    margin-top: 10px !important;
    height: auto !important;
    flex-wrap: wrap !important;
}

.dropdownselectordiv {
    display: flex !important;
    justify-content: center !important;
    align-items:center !important;
    padding-left: 0px !important;
    margin: 0px !important;
    margin-left: 0px !important;
    padding-top: 0px !important;
    padding-bottom: 0px !important;
    margin-top: 0 !important;
    height: auto !important;
    min-height: 5vh;
    flex-wrap: wrap !important;
}

.dropdownselectordiv-mobile {
    display: flex !important;
    justify-content: center !important;
    align-items:center !important;
    padding-left: 0px !important;
    margin: 0px !important;
    margin-left: 0px !important;
    padding-top: 0px !important;
    padding-bottom: 0px !important;
    margin-top: 0 !important;
    margin-bottom: 10px !important;
    height: auto !important;
    flex-wrap: wrap !important;
}

.bigboxbuttons {
    margin:0px !important;
    padding:0px !important;
    border:0px solid #FDB142 !important;
    display: flex !important;
    align-items: top !important;
    margin-bottom: 1.5vh !important;
}

.bigboxbuttons-mobile {
    margin:0px !important;
    padding:0px !important;
    border:0px solid #FDB142 !important;
    display: flex !important;
    align-items: top !important;
    margin-bottom: 5px !important;
    margin-top: 5px !important;
}

.extend-stat-grid {
    margin:0px !important;
    padding:0px !important;
    border:0px !important;
    margin-left: 5px !important;
    border-radius: 5px !important;
    height: 74vh !important;
}

.extend-stat-grid-mobile {
    margin: 0px !important;
    padding: 0px !important;
    border: 0px !important;
    height: 0 !important;
}

.extendedstatscontainer {
    height: 0 !important;
    border: 0px !important;
    margin: 0px !important;
    padding: 0px !important;
}

.extendedstatscontainer-mobile {
    height: 0 !important;
    border: 0px !important;
    margin: 0px !important;
    padding: 0px !important;
}

.targetsub {
    border: 0px !important;
    margin: 5px !important;
    margin-top: 0px !important;
    padding: 0px !important;
    margin-right: 0px !important;
    max-height: 100% !important;
    margin-left: 0 !important;
}

.targetsub-mobile {
    border: 0px !important;
    margin: 0px !important;
    padding: 0px !important;
    max-height: 100% !important;
}

.popup-maindiv {
    position: fixed;
    width: 100vw;
    height: 100vh;
    background-color: transparent;
    display: none;
    z-index: 9998;
}

.popup-background {
    position: fixed;
    width: 100vw;
    height: 100vh;
    background-color: #23363d;
    opacity: 50%;
    z-index: 9999;
}

.popup-box {
    border: 5px solid #FDB142;
    background-color: #2D424B;
    border-radius: 15px;
    display: flex;
    z-index: 10000;
    padding: 0;
    margin: auto;
    opacity: 100%;
    flex-direction: column;
}

.popup-box div{
    border: 0;
    background-color: transparent;
    display: flex;
    padding: 5px;
    margin: 0;
    opacity: 100%;
}

.popup-header{
    height: 10%;
    background-color: #FDB142 !important;
    color: black;
    display: flex;
    justify-content: center;
    align-content: center;
    flex-shrink: 0;
    flex-grow: 1;
    width: auto;
}

.popup-header-title {
    color: black;
    font-size: 24px !important;
    font-weight: 600 !important;
    display: flex;
    text-align: center;
    margin: 5px;
}

.popup-simulate {
    height: 75vh;
    width: 75vw;
    margin: 5px;
}

.popup-session {
    height: auto;
    width: auto;
    margin: 5px;
    display: flex;
    align-items: start;
    justify-content: center;
    gap: 10px;
}

.build-card {
    border:0px !important;
    margin-left:0px !important;
    margin-right: 20px !important;
    margin-bottom: 0px !important;
    margin-top: 0px !important;
    padding: 0px !important;
    position: fixed !important;
    min-height: 98vh !important;
    max-height: 98vh !important;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding-left: 5px !important;
}

.build-card-screen {
    border:0px !important;
    margin-left:0px !important;
    margin-right: 20px !important;
    margin-bottom: 0px !important;
    margin-top: 0px !important;
    padding: 0px !important;
    position: fixed !important;
    min-height: 98vh !important;
    max-height: 98vh !important;
    display: flex;
    flex-direction: column;
    align-items: start;
    justify-content: space-between;
}

.stat-text {
    flex-basis: 50%;
    margin: 0px;
    color: white;
    font-size: 0.6vw;
}

.stat-text-mobile {
    flex-basis: 50%;
    margin: 0px;
    color: white;
    font-size: 2vw;
}

.stat-header {
    color: black;
    margin: 0px;
    font-size: 0.9vw;
}
.stat-header-mobile {
    color: black;
    margin: 0px;
    font-size: 3vw;
}

.mobile-header-box {
    display: none;
    width: 98vw;
    padding-left: 1vw;
    padding-right: 1vw;
    background-color: #2D424B;
    height: auto;
    border-bottom: 2px solid #232c2f;
    box-shadow: 0px 15px 15px black;
    flex-wrap: wrap;
    z-index: 50;
    anchor-name: --scrollup;
}

.mobile-container {
    display: none;
}

.mobile-container-mobile {
    display: flex;
    min-height: 100dvh;
    max-height: 100dvh;
    height: 100dvh;
    flex-shrink: 0;
    flex-grow: 1;
    flex-basis: 100dvh;
    flex-direction: column;
    min-width: 100dvw;
    max-width: 100dvw;
    width: 100dvw;
    overflow: hidden;
}

.mobile-footer-box {
    display: none;
    width: 100%;
    padding-left: 1vw;
    padding-right: 1vw;
    background: #293033;
    border-top: 5px inset black;
    box-shadow: 0px -5px 15px black;
    height: 9dvh;
    flex-grow: 0;
    anchor-name: --footer-anchor;
    z-index: 100;
}

.footer-scroll {
    display: flex;
    text-align: center;
    height: 5em;
    color: white;
}

.footer-chart {
    display: flex;
    text-align: center;
    height: 5em;
    color: white;
}

.mobile-scroll-button {
    width: 50%;
    display: flex;
    background-color: transparent;
    border: 0px;
    align-items: center;
    justify-content: center;
}
.mobile-scroll-button:hover {
    width: 50%;
    display: flex;
    background-color: transparent;
    border: 0px;
    align-items: center;
    justify-content: center;
    box-shadow: 0px 0px 0px black;
}
.mobile-scroll-button:active {
    width: 50%;
    display: flex;
    background-color: transparent;
    border: 0px;
    align-items: center;
    justify-content: center;
    box-shadow: 0px 0px 0px black;
}

.mobile-scroll-button-selected {
    -webkit-filter: drop-shadow(0px 0px 10px #FDB142);
    filter: drop-shadow(0px 0px 10px #FDB142);
}
.mobile-scroll-button-selected:hover {
    -webkit-filter: drop-shadow(0px 0px 10px #FDB142);
    filter: drop-shadow(0px 0px 10px #FDB142);
}
.mobile-scroll-button-selected:active {
    -webkit-filter: drop-shadow(0px 0px 10px #FDB142);
    filter: drop-shadow(0px 0px 10px #FDB142);
}

.filtered-option {
    display: none !important;
}

.card-cat-header {
    margin: 0px !important;
    font-size: 0.8vw;
}

.card-cat-header-mobile {
    margin: 0px !important;
    font-size: 4vw;
    white-space: nowrap;
}

.build-card-mobile {
    border:0px !important;
    margin-left: 1vw !important;
    margin-right: 1vw !important;
    margin-bottom: 0px !important;
    margin-top: 0px !important;
    padding: 0px !important;
}

.ench-card-header {
    font-size: 0.9vw;
}

.ench-card-header-mobile {
    font-size: 2vw;
}

.target-container {
    margin: 0px !important;
    padding: 0px !important;
    border: 0px !important;
    width: 100%;
    float: right !important;
    padding-right: 0px !important;
    padding-top: 1vh !important;
    height: auto;
    min-height: 98vh;
    max-height: 100vh !important;
    padding-left: 15px !important;
    
}

.target-container-mobile {
    margin: 0px !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    margin-top: 1px !important;
    padding: 0px !important;
    border: 0px !important;
    width: 100% !important;
    scroll-snap-align: center;
    anchor-name: --arrow-anchor;
    overflow-y: scroll;
    padding-top: 20px !important;
}

.bigbuttondiv {
    grid-column: span 1 !important;
}

.bigbuttondiv-mobile {
    grid-column: span 1 !important;
    height: 7dvh !important;
    min-height: 0 !important;
    margin-top: 15px !important;
}

.bigbuttondiv2-mobile {
    grid-column: span 1 !important;
    height: 7dvh !important;
    min-height: 0 !important;
    margin-top: 15px !important;
}

.hide-selectors {
    transform: rotateY(180deg);
    visibility: hidden;
    position: absolute;
    opacity: 0;
}
.hide-selectors-mobile {
    display: none;
    visibility: hidden;
}

.mobiledrop {
    display: flex;
    font-size: 1em;
    height: 30px;
    box-shadow: 0px 0px 0px 10px #FDB142, 0px 0px 0px 12px black;
    border: 2px solid black;
    width: 95%;
    margin-top: 15px;
    margin-bottom: 15px;
    margin-right: 10px;
    margin-left: 10px;
    border-radius: 0.01em;
}

.custom-select-panel {
    display:none;
    position:absolute;
    background:#1b1b1b;
    border:1px solid #444;
    z-index:1000;
    width: 150% !important;
    max-width: 150% !important;
    top: 30px;
    height: 380px !important;
    anchor-name: --dropdown-anchor;
}

.group-font-size {
    font-size: 50px !important;
}

.custom-select.open .custom-select-panel {
    display:block;
    background:#1b1b1b;
}

.custom-select-panel-mobile {
    display:none;
    position:fixed;
    background:#1b1b1b;
    border:1px solid #444;
    z-index:1000;
    width: 98vw !important;
    height: auto;
    top: anchor(--scrollup bottom);
    bottom: anchor(--footer-anchor top);
    left: 1vw;
    margin: 0 !important;
    padding: 0;
    overflow-y:auto;
    anchor-name: --dropdown-anchor;
}

.select-mobile {
    height: 60px;
    font-size: 2.5em;
}

.custom-select.open .custom-select-panel-mobile {
    display:initial;
    background:#1b1b1b;
}

.custom-panel-name {
    color: white;
    font-size: 3em;
    text-align: center !important;
    justify-content: center;
    margin-right: 20px;
}

.custom-select.disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.custom-select.disabled * {
    pointer-events: none;
}

.custom-select.disabled .selected {
    background: #eee;
}

.custom-select-header {
    position: fixed;
    display: flex;
    width: auto !important;
    z-index: 9;
    background: #1b1b1b;
    margin: 0 !important;
    position-anchor: --dropdown-anchor;
    top: anchor(top);
    right: anchor(right);
    left: anchor(left);
    border: 5px solid black !important;
    border-bottom: 10px solid black !important;
    box-shadow: 0px 5px 5px black;
    anchor-name: --menu-anchor;
}

.custom-select-top-row {
    display: flex !important;
    margin: 0px !important;
    margin-bottom: 0px !important;
    padding: 0px !important;
    border: 0px !important;
    flex-wrap: nowrap !important;
    width: auto !important;
    justify-content: space-between !important;
    position: fixed;
    position-anchor: --menu-anchor;
    top: anchor(top);
    left: anchor(left);
    right: anchor(right);
    z-index: 10;
    align-items: center;
    transform: translateY(0.2em);
}
.custom-select-top-row-mobile {
    display: flex !important;
    margin: 0px !important;
    margin-bottom: 0px !important;
    padding: 0px !important;
    border: 0px !important;
    flex-wrap: nowrap !important;
    width: auto !important;
    justify-content: space-between !important;
    position: fixed;
    position-anchor: --menu-anchor;
    top: anchor(top);
    left: anchor(left);
    right: anchor(right);
    z-index: 10;
    align-items: center;
    transform: translateY(50%);
}

.custom-select-top-row-sort {
    display: flex !important;
    margin: 0px !important;
    padding: 0px !important;
    border: 0px !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: space-evenly !important;
    width: 50%;
}

.custom-select-top-row-close {
    display: flex !important;
    margin: 0px !important;
    padding: 0px !important;
    border: 0px !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: right !important;
    width: 50%;
}

.custom-select-panel-button {
    display: flex;
    width: 32px;
    height: 32px;
    border-radius: 0px;
    background-color: transparent;
    border: 0px;
    color: #f0f0f0;
    justify-content: left !important;
    align-items: center !important;
}

    .custom-select-panel-button:hover {
        display: flex;
        width: 32px;
        height: 32px;
        border: 0px;
        border-radius: 0px;
        background-color: transparent;
        box-shadow: 0px 0px 0px white;
        -webkit-filter: drop-shadow(0px 0px 3px white);
        filter: drop-shadow(0px 0px 3px white);
        color: #FDB142;
    }

    .custom-select-panel-button:active {
        display: flex;
        width: 32px;
        height: 32px;
        border: 0px;
        border-radius: 0px;
        background-color: transparent;
        box-shadow: 0px 0px 0px white;
        text-shadow: 0px 0px 3px white;
        color: black;
        transform: translate(0px);
    }

.custom-select-panel-button-mobile {
    display: flex;
    width: 50px;
    height: 50px;
    border-radius: 0px;
    background-color: transparent;
    border: 0px;
    color: #f0f0f0;
    justify-content: left !important;
    align-items: center !important;
}

    .custom-select-panel-button-mobile:hover {
        display: flex;
        width: 50px;
        height: 50px;
        border: 0px;
        border-radius: 0px;
        background-color: transparent;
        box-shadow: 0px 0px 0px white;
        text-shadow: 0px 0px 3px white;
        color: #FDB142;
    }

    .custom-select-panel-button-mobile:active {
        display: flex;
        width: 50px;
        height: 50px;
        border: 0px;
        border-radius: 0px;
        background-color: transparent;
        box-shadow: 0px 0px 0px white;
        text-shadow: 0px 0px 3px white;
        color: black;
        transform: translate(0px);
    }

.custom-select-panel-close {
    display: flex;
    width: 32px;
    height: 32px;
    border-radius: 0px;
    background-color: transparent;
    border: 0px;
    color: #f0f0f0;
    justify-content: right !important;
    align-items: center !important;
}

    .custom-select-panel-close:hover {
        display: flex;
        width: 32px;
        height: 32px;
        border: 0px;
        border-radius: 0px;
        background-color: transparent;
        box-shadow: 0px 0px 0px white;
        text-shadow: 0px 0px 3px white;
        color: #FDB142;
    }

    .custom-select-panel-close:active {
        display: flex;
        width: 32px;
        height: 32px;
        border: 0px;
        border-radius: 0px;
        background-color: transparent;
        box-shadow: 0px 0px 0px white;
        text-shadow: 0px 0px 3px white;
        color: black;
        transform: translate(0px);
    }
.custom-select-panel-close-mobile {
    display: flex;
    width: 50px;
    height: 50px;
    border-radius: 0px;
    background-color: transparent;
    border: 0px;
    color: #f0f0f0;
    justify-content: right !important;
    align-items: center !important;
    margin-right: 30px;
}

    .custom-select-panel-close-mobile:hover {
        display: flex;
        width: 50px;
        height: 50px;
        border: 0px;
        border-radius: 0px;
        background-color: transparent;
        box-shadow: 0px 0px 0px white;
        text-shadow: 0px 0px 3px white;
        color: #FDB142;
        margin-right: 30px;
    }

    .custom-select-panel-close-mobile:active {
        display: flex;
        width: 50px;
        height: 50px;
        border: 0px;
        border-radius: 0px;
        background-color: transparent;
        box-shadow: 0px 0px 0px white;
        text-shadow: 0px 0px 3px white;
        color: black;
        transform: translate(0px);
        margin-right: 30px;
    }

.custom-select-search-container {
    display: flex !important;
    margin: 0px !important;
    padding: 0px !important;
    border: 0px !important;
    flex-wrap: nowrap !important;
    justify-content: center !important;
    align-items: center !important;
    width: initial !important;
    anchor-name: --search-anchor;
}

.custom-select-search {
    width: auto !important;
    padding: 8px;
    margin: 0px;
    background:#f0f0f0;
    color:black;
    border:none;
    outline:none;
    display: flex;
    position: fixed;
    z-index: 10;
    position-anchor: --menu-anchor;
    anchor-name: --search-anchor;
    bottom: anchor(bottom);
    left: anchor(left);
    right: anchor(right);
    transform: translateY(-15px);
    margin-left: 10px;
    margin-right: 10px;
}

.custom-select-search-x {
    display: flex;
    width: 32px;
    height: 32px;
    border-radius: 0px;
    background-color: #f0f0f0;
    border: 0px;
    color: black;
    margin-right: 5px;
    justify-content: center !important;
    align-items: center !important;
    position-anchor: --search-anchor;
    right: anchor(right);
    top: anchor(top);
    position: fixed;
    z-index: 11;
    transform: translateY(-15px)
}

    .custom-select-search-x:hover {
        display: flex;
        width: 32px;
        height: 32px;
        border: 0px;
        border-radius: 0px;
        background-color: #f0f0f0;
        margin-right: 5px;
        box-shadow: 0px 0px 0px white;
        text-shadow: 0px 0px 3px black;
        color: black;
        position-anchor: --search-anchor;
        right: anchor(right);
        top: anchor(top);
        position: fixed;
        z-index: 11;
        transform: translateY(-15px)
    }

    .custom-select-search-x:active {
        display: flex;
        width: 32px;
        height: 32px;
        border: 0px;
        border-radius: 0px;
        margin-right: 5px;
        background-color: #f0f0f0;
        box-shadow: 0px 0px 0px white;
        text-shadow: 0px 0px 3px black;
        color: #f0f0f0;
        transform: translate(0px);
        position-anchor: --search-anchor;
        right: anchor(right);
        top: anchor(top);
        position: fixed;
        z-index: 11;
        transform: translateY(-15px)
    }
.custom-select-search-x-mobile {
    display: flex;
    width: 76px;
    height: 76px;
    border-radius: 0px;
    background-color: transparent;
    border: 0px;
    color: black;
    margin-right: 5px;
    justify-content: center !important;
    align-items: center !important;
    position: fixed;
    z-index: 11;
    right: 0;
    position-anchor: --search-anchor;
    right: anchor(right);
    top: anchor(top);
    transform: translateY(-15px)
}

    .custom-select-search-x-mobile:hover {
        display: flex;
        width: 76px;
        height: 76px;
        border: 0px;
        border-radius: 0px;
        background-color: #f0f0f0;
        margin-right: 5px;
        box-shadow: 0px 0px 0px white;
        text-shadow: 0px 0px 3px black;
        color: black;
        position-anchor: --search-anchor;
        right: anchor(right);
        top: anchor(top);
        transform: translateY(-15px)
    }

    .custom-select-search-x-mobile:active {
        display: flex;
        width: 76px;
        height: 76px;
        border: 0px;
        border-radius: 0px;
        margin-right: 5px;
        background-color: #f0f0f0;
        box-shadow: 0px 0px 0px white;
        text-shadow: 0px 0px 3px black;
        color: #f0f0f0;
        transform: translate(0px);
        position-anchor: --search-anchor;
        right: anchor(right);
        top: anchor(top);
        transform: translateY(-15px)
    }

.custom-select-menu {
    list-style:none;
    margin:0;
    padding:0;
    max-height:380px !important;
    overflow-y:auto;
    text-align: left;
    width: initial !important;
    position: fixed;
    position-anchor: --dropdown-anchor;
    left: anchor(--dropdown-anchor left);
    right: anchor(--dropdown-anchor right);
    bottom: anchor(--dropdown-anchor bottom);
    top: anchor(--menu-anchor bottom);
}

.custom-select-menu-mobile {
    list-style:none;
    margin:0;
    padding:0;
    height: 1fr;
    overflow-y:auto;
    text-align: left;
    position: fixed;
    position-anchor: --dropdown-anchor;
    left: anchor(--dropdown-anchor left);
    right: anchor(--dropdown-anchor right);
    bottom: anchor(--dropdown-anchor bottom);
    top: anchor(--menu-anchor bottom);
    width: initial !important;
}

.custom-option {
    padding: 0 !important;
    cursor:pointer !important;
    color:#ddd !important;
    margin-right: 5px !important;
    margin-top: 1px !important;
    margin-bottom: 1px !important;
    transition: opacity .15s ease, height .15s ease !important;
    border: 1px solid black !important;
    width: initial !important;
}

.custom-option div {
    border: 0px;
    padding: 0px;
    text-align: left;
}

.custom-option .name {
    font-weight: 500;
    border: 0px !important; 
    width: 90%;
}

.custom-option .desc {
    font-size: 0.8em;
    border: 0px !important;
    width: 90%;
}

.custom-option .name-mobile {
    padding: 5px;
    font-size: 3em;
    font-weight: 500;
    border: 0px !important;
    width: 90%;
}

.custom-option .desc-mobile {
    padding: 5px;
    font-size: 2.5em;
    border: 0px !important;
    width: 90%;
}

.custom-option.active,
.custom-option:hover {
    background:#333;
}

.custom-group {
    padding: 5px 5px !important;
    margin-bottom: 2px !important;
    margin-top: 2px !important;
    margin-right: 5px !important;
    font-size: 11px;
    color:#888 !important;
    background:#111 !important;
    text-transform:uppercase !important;
    cursor: pointer !important;
    user-select: none !important;
    position: relative !important;
    width: auto !important;
}

.cardOilDesc {
    max-height: 10vh;
}

.oilimages {
    background-repeat: no-repeat;
    background-position: bottom right;
    height: 10vh;
    font-size: 0.8vw;
    min-height: 0;
    
}

.oilimages-mobile {
    background-repeat: no-repeat;
    background-position: bottom right;
    min-height: 6dvh;
    font-size: 2vw;
}

.weaponimage {
    animation: breatheGun;
    animation-duration: 5s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-timing-function: ease;
    transform: scale(1);
    transition: transform 5s ease-in-out;
}

.weaponimage2 {
    transform: scale(0.7);
}

.otherboxthing:hover .weaponimage{
    transform: translate(0px, -5px) scale(130%);
    
}

.otherboxthing:hover {
    transform: translate(0px, -5px) scale(140%);
    animation-fill-mode: forwards;
}
.otherboxthing {
    transform: scale(1);
    transition: transform 2s ease-in-out;
    animation: shake-small 5s ease-in-out infinite;
}

.boxglowthing {
    animation: insideShadow;
    animation-duration: 5s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-fill-mode: both;
    animation-play-state: running;
    animation-timing-function: ease-out;
    transition: all 2s ease-in-out;
    box-shadow: inset 2px 2px 10px 0px #222222;
    }

.boxglowthing:hover
{
    background-color: #111111;
    transition: all 2s ease-in-out;
    animation-fill-mode: both;
}
 
.boxglowthing:hover .otherboxthing
{
    transform: translate(0px, -5px) scale(140%);
    -webkit-filter: drop-shadow(0px 0px 10px #fdb242);
    filter: drop-shadow(0px 0px 10px #fdb242);
    
}

.weaponimage:active
{
    animation: spin 0.1s infinite linear;
    -moz-animation: spin 0.1s infinite linear;
    -webkit-animation: spin 0.1s infinite linear;
}

.weaponimage:active #helicoptermode {
    display: flex !important;
}

/*.shake-little {
    transform: scale(1);
     transition: transform 2s ease-in-out;
}

.shake-little:hover {
    transform: translate(0px, -5px) scale(150%);
    animation-fill-mode: forwards;
}

#weaponimage2 {
    animation: gunShadow;
    animation-duration: 5s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-fill-mode: both;
    animation-play-state: running;
    
}*/

mark {
    background:#555;
    color:white;
}

.custom-select:hover .custom-select-selected {
    background: #ffffff;
    border-color: #000000;
    -webkit-text-fill-color: #fdd142;
    text-shadow: 20px 0px 15px #00000046, 1px 1px 0 #000000, 1px -1px 0 #000000, 1px 1px 0 #000000, 1px 1px 0 #000000, 1px 0px 0 #000000, 0px 1px 0 #000000, -1px 0px 0 #000000, 0px -1px 0 #000000; 
    box-shadow: inset 2px 2px 2px #bbbbbb;
}

.no-arrows .custom-group::after {
    display: none;
}

.custom-select.drop-up .custom-select-panel {
    top: auto;
    bottom: 100%;
}

.custom-group::after {
    content: "▾";
    position: absolute;
    right: 8px;
    font-size: 1.5em;
    transition: transform .15s ease;
}

.custom-group[data-collapsed="true"]::after {
    transform: rotate(360deg) scaleY(10%);
}

.custom-option.hidden-group {
    display: none;
}

.custom-option.search-hidden {
    display: none;
}

.highlight {
    background-color: #FDB142;
    color: white;
}

.custom-group.hidden-group-header {
    display: none;
}

#oils1selector {
     anchor-name: --anchoroil1;
}

#width-grid {
     grid-column: 1 / -1;
     min-width: 0;
}

#width-grid2 {
     grid-column: 1 / -1;
     min-width: 0;
}

.railgun {
    animation: railgun 0.1s infinite running;
    -moz-animation: railgun 0.1s infinite running;
    -webkit-animation: railgun 0.1s infinite running;
    text-align: center;
}


.scrollcard {
    transition: transform 1s ease;
    transform: translateY(-200px);
    border-top: 0px !important;
    border-right: 0px !important;
    border-left: 0px !important;
    border-bottom: 1px solid #71552c !important;
    border-right: 1px solid #e4a039 !important;
    max-width: 50%;
    height: 100% !important;
    max-height: 100% !important;
    min-height: 0 !important;
    min-width: 40%;
}

.scrollcard-mobile {
    border-top: 0px !important;
    border-right: 0px !important;
    border-left: 0px !important;
    border-bottom: 1px solid #e4a039 !important;
    border-right: 1px solid #e4a039 !important;
    width: 100% !important;
    height: 100% !important;
    max-height: 100% !important;
    min-height: 7dvh !important;
}

.attachtitle-mobile {
    margin: 0px !important;
    font-size: 25px;
    padding-top: 10px;
    padding-bottom: 10px;
}

.filter-orangered {
    filter: brightness(0) saturate(100%) invert(41%) sepia(64%) saturate(5436%) hue-rotate(359deg) brightness(99%) contrast(107%);
}

.filter-lime {
    filter: brightness(0) saturate(100%) invert(64%) sepia(83%) saturate(4021%) hue-rotate(83deg) brightness(121%) contrast(121%);
}

.filter-lblue {
    filter: brightness(0) saturate(100%) invert(84%) sepia(19%) saturate(595%) hue-rotate(166deg) brightness(94%) contrast(94%);
}

.filter-white {
    filter: brightness(0) saturate(100%) invert(97%) sepia(99%) saturate(0%) hue-rotate(109deg) brightness(103%) contrast(100%);
}

.filter-sulfur {
    filter: brightness(0) saturate(100%) invert(82%) sepia(37%) saturate(2062%) hue-rotate(327deg) brightness(104%) contrast(98%);
}

#extendoverlay button    {
    font-family: "Fredoka", sans-serif;
    font-weight: 500;
    font-size: 2em;
    background-color: #FDB142;
    border: 2px solid black;
    color: black;
    box-shadow: 3px 3px 0px 0px black;
    border-radius: 5px;
    width: 30px;
    height: 30px;
    padding: 0px;
    margin: 0px;
    margin-bottom: 4px;
    align-items: center;
    justify-content: center;
}

    #extendoverlay:hover button {
        font-family: "Fredoka", sans-serif;
        font-weight: 500;
        background-color: #FDB142;
        border: 2px solid rgb(253, 255, 149);
        width: 100%;
        box-shadow: inset 0px 0px 3px black, 3px 3px 5px black, 0px 0px 8px rgba(255, 255, 255, 0.589);
        color: rgb(253, 255, 149);
        border-radius: 5px;
        text-shadow: 0px 0px 3px rgb(253, 255, 149), 0px 0px 0px rgba(255, 255, 255, 0.589);
    }

    #extendoverlay:active #extendstatsbutton {
        font-family: "Fredoka", sans-serif;
        font-weight: 500;
        background-color: #e4a039;
        border: 1px solid black;
        width: 100%;
        box-shadow: inset 2px 2px 5px black, inset 0px 0px 15px rgb(253, 255, 149);
        text-shadow: 2px 2px 0px black;
        color: transparent;
        transform: translate(3px, 3px);
    }   

.scrollcardanimate {
    transform: translateY(0px);
    transition: transform 1s ease;
}

.scrollcardfade {
    opacity: 0%;
    transition: transform 1s ease;
}

@keyframes slide {
    0% {transform: translateY(-50px);}
    100% {transform: translateY(0px);}
}

}
@-moz-keyframes spin { 
    100% { -moz-transform: rotate(-360deg); filter: blur(10.1px); } 
}
@-webkit-keyframes spin { 
    100% { -webkit-transform: rotate(-360deg); filter: blur(10.1px);} 
}
@keyframes spin {
    0%{-webkit-transform: rotate(0deg); 
        transform:rotate(0deg); 
        filter: blur(0px);
    } 
    100% { 
        -webkit-transform: rotate(-360deg); 
        transform:rotate(-360deg); 
        filter: blur(10.1px);
    } 
}

@-moz-keyframes railgun { 
    0% { -moz-transform: skew(-0.2rad); filter: blur(0px); }
    100% { -moz-transform: skew(-0.312rad); filter: blur(1.1px); color: yellow;} 
}
@-webkit-keyframes railgun { 
    0% { -webkit-transform: skew(-0.2rad); filter: blur(0px);} 
    100% { -webkit-transform: skew(-0.312rad); filter: blur(1.1px); color: yellow;} 
}
@keyframes railgun { 
    0% { 
        -webkit-transform: skew(-0.2rad); 
        transform: skew(-0.2rad);
        filter: blur(0px);
        
    } 
    100% { 
        -webkit-transform: skew(-0.312rad); 
        transform: skew(-0.312rad);
        filter: blur(1.1px);
        color: yellow;
        text-shadow: -50px 0px 30px yellow;
    } 
}

input[type=checkbox]
{
  /* Double-sized Checkboxes */
  -ms-transform: scale(2); /* IE */
  -moz-transform: scale(2); /* FF */
  -webkit-transform: scale(2); /* Safari and Chrome */
  -o-transform: scale(2); /* Opera */
  transform: scale(2);
  margin: 10px;
}

@keyframes invalidlink {
    0% {text-shadow: 0px 0px 20px rgb(255, 100, 100);opacity: 100%;}
    25% {text-shadow: 0px 0px 20px rgb(255, 86, 86); opacity: 0%;}
    50% {text-shadow: 0px 0px 50px rgb(255, 88, 88);opacity: 100%;}
    75% {text-shadow: 0px 0px 20px rgb(255, 116, 116); opacity: 0%;}
    100% {text-shadow: 0px 0px 20px rgb(255, 94, 94);opacity: 100%;}
}

@keyframes goodlink {
    0% {text-shadow: 0px 0px 20px rgb(100, 255, 110);opacity: 100%;}
    25% {text-shadow: 0px 0px 20px rgb(100, 255, 110); opacity: 0%;}
    50% {text-shadow: 0px 0px 50px rgb(100, 255, 110);opacity: 100%;}
    75% {text-shadow: 0px 0px 20px rgb(100, 255, 110); opacity: 0%;}
    100% {text-shadow: 0px 0px 20px rgb(100, 255, 110);opacity: 100%;}
}

@keyframes zlayer {
    from {z-index: 1;}
    to {z-index: 99;}
}

@keyframes extendedStats {
    0% {background-position: 100% 50%;}
    80% {background-position: 100% 50%;}
    100% {background-position: 0% 50%;}
}

@media (min-width: 600px) {
    .cardX {
        height: 30px;
    }
    .cardArrow {
        height: 32px;
    }
    .build-copy-button {
        height: 75px !important;
    }
    .build-chooser-button {
        height: 75px !important;
    }
    .armor-header {
        font-size: 2.5vw !important;
    }
    .armor-desc {
        font-size: 1.5vw !important;
    }
    input[type=checkbox] {
        /* Double-sized Checkboxes */
        -ms-transform: scale(2); /* IE */
        -moz-transform: scale(2); /* FF */
        -webkit-transform: scale(2); /* Safari and Chrome */
        -o-transform: scale(2); /* Opera */
        transform: scale(2);
        margin: 10px;
    }
    .containerattachdiv .desc {
        font-size: 1.2em !important;
    }
    .containerattachdiv .name {
        font-size: 1.3em !important;
        margin-top: 5px !important;
    }
    .build-shuffle-button {
        height: 75px !important;
        margin-right: 0 !important;
        margin-top: 5px !important;
    }
    .custom-select-header {
        height: 12em;
    }
    #extendstatsbutton span {
        font-size: 0.5em;
    }
    #extendstatsbutton img {
        height: 0.75em !important;
    }
    #extendstatsbutton {
        height: 1em !important;
    }
}

@media (min-width: 1200px) {
    .cardX {
        height: 9px;
    }
    .cardArrow {
        height: 12px;
    }
    .build-copy-button {
        height: auto !important;
    }
    .build-chooser-button {
        height: auto !important;
    }
    .armor-header {
        font-size: 8px !important;
    }
    .armor-desc {
        font-size: 7px !important;
    }
    input[type=checkbox] {
        /* Double-sized Checkboxes */
        -ms-transform: scale(1); /* IE */
        -moz-transform: scale(1); /* FF */
        -webkit-transform: scale(1); /* Safari and Chrome */
        -o-transform: scale(1); /* Opera */
        transform: scale(1);
        margin: 10px;
    }
    .containerattachdiv .desc {
        font-size: 0.6em !important;
    }
    .containerattachdiv .name {
        font-size: 0.7em !important;
        margin-top: 2px !important;
    }
    .build-shuffle-button {
        height: initial !important;
        margin-right: 5px !important;
        margin-top: 0 !important;
    }
    .cardStat {
        font-size: 0.45em;
        line-height: 10px;
    }
    .containerattachdivheader {
        font-size: 0.7em;
    }
    #mainHeader {
        font-size: 1em !important;
    }
    .custom-select-header {
        height: 5em;
    }
}

@media (min-width: 1500px) {
    .containerattachdiv .desc {
        font-size: 0.6em !important;
    }
    .cardStat {
        font-size: 0.65em;
        line-height: 11px;
    }
    #extendstatsbutton span {
        font-size: 1em;
    }
    #extendstatsbutton img {
        height: 1.5em !important;
    }
    #extendstatsbutton {
        height: 2.5em !important;
    }
}

@media (min-width: 1700px) {
    #screenbutton1 {
        font-size: 12px !important;
    }
    #screenbutton2 {
        font-size: 12px !important;
    }
    #screenbutton3 {
        font-size: 12px !important;
    }
    .oils {
        font-size: 0.8vw !important;
    }
    .armor-desc {
        font-size: 8px;
    }
    .armor-header {
        font-size: 9px;
    }
    .containerattachdiv .name {
        font-size: 0.65em !important
    }
    .containerattachdiv .desc {
        font-size: 0.55em !important
    }
    .custom-select {
        height: 30px;
    }
    .custom-select-selected {
        height: 11px;
    }
    .commitgrid {
        padding: 2px !important;
        margin: 5px !important;
    }
    #cardWeaponName {
        font-size: 1.3em !important;
    }
    #mainHeader {
        font-size: 2em !important;
    }
    .armor-header {
        font-size: 10px !important;
    }
    .armor-desc {
        font-size: 9px !important;
    }
    .containerattachdivheader {
        font-size: 1em;
    }
    .containerattachdiv .desc {
        font-size: 0.7em !important;
    }
    .containerattachdiv .name {
        font-size: 0.8em !important;
        margin-top: 2px !important;
    }
    .cardX {
        height: 10px;
    }
    .cardStat {
        font-size: 0.85em;
        line-height: 14px;
    }
}

@media (min-width: 1800px) {
    .cardStat {
        font-size: 1em;
        line-height: 16px;
    }
}

@media (min-width: 2000px) {
  .cardStat {
    font-size: 0.8em;
    line-height: 16px;
  }
}

@media (max-width: 2000px) {
    .ench-card-header {
        font-size: 0.8vw !important;
    }
}