@import url('https://fonts.googleapis.com/css2?family=Inter:wght@500;700&display=swap');

body {
    background-color: #0B0E11;
}

h1 {
    color: white;
}

.page-wrapper {
    width: 100%;
    height: 100vh;
    margin-top: 3vh;
    /*border: 2px solid red;*/
}

.div-left, .div-right {
    width: 15%;
    height: 80%;
    float: left;
    /*border: 2px solid red;*/
}

.content-wrapper {
    float: left;
    width: 100%;
    height: fit-content;
    border-radius: 10px;
    font-family: Inter;
}

td {
    padding: 0.7% !important;
}

table, th, td {
    border: 1px solid rgba(0, 0, 0, 0.17);
    text-align: center;
  }

table {
    border-spacing: 0px;
    width: 100%;
    height: 100%;
    border: none;
}

.image-wrapper {
    width: 100%;
    height: 50%;
    /*border: 2px solid red;*/
}

td img {
    max-height: 100%;
	max-width: 100%;
}

p {
    margin: 0em;
    font-size: 12px;
	line-height: 7px !important;
}

.desktop-tbody {
    margin: 0px 0px;
    padding: 0px 0px;
    font-size: 15px;
    color: #878787;
    text-transform: capitalize;
}

.buttons-wrapper {
    width: 100%;
    float: left;
    height: 5vh;
    /*border: 2px solid red;*/
    background-color: #0B0E11;
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
}

.wall-button, .ent-button{
    width: 50%;
    height: 100%;
    text-align: center;
    float: left;
    /*border: 2px solid red;*/
    color: white;
    border-bottom: 2px solid #FD4D4D;
}

.wall-button, .ent-button :hover {
    cursor: pointer;
}

.wall-button {
    border-right: 2px solid #FD4D4D;
    border-bottom-right-radius: 3px;
}


.button-selected {
    border-bottom: 1px solid#0B0E11;
    border-bottom-left-radius: 3px;
}

.image-container {
    width: 45%;
    height: 80%;
    float: left;
}

.center {
    width: 27.5%;
    height: 80%;
    float: left;
}

.image-container p {
    text-align: center;
    font-size: 20px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-shadow: -1px 1px 0px #000,
                  1px 1px 0px  #000,
                  1px -1px 0  #000,
                  -1px -1px 0  #000;
}

.plus {
    width: 10%;
    height: 80%;
    float: left;
    position: relative;
}

.plus p {
    text-align: center;
    position: absolute;
    font-size: 15px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-shadow: -1px 1px 0px #000,
                  1px 1px 0px  #000,
                  1px -1px 0  #000,
                  -1px -1px 0  #000;
}

.cost {
    width: 100%;
    height: 20%;
    float: left;
}

.rkt {
    background: url(/scripts/calculators/raid/rkt.webp);
    background-image: url(/scripts/calculators/raid/rkt.webp);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    background-size: contain;
    position: relative;
}

.hv-rkt {
    background: url(/scripts/calculators/raid/High_Velo_Rkt_icon.webp);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    background-size: contain;
    position: relative;
}

.five-five {
    background: url(/scripts/calculators/raid/55_amo.webp);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    background-size: contain;
    position: relative;
}

.timed-exp {
    background: url(/scripts/calculators/raid/timed_exp.webp);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    background-size: contain;
    position: relative;
}

.exp-amo {
    background: url(/scripts/calculators/raid/exp_amo.webp);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    background-size: contain;
    position: relative;
}

.handmade {
    background: url(/scripts/calculators/raid/Handmade_icon.webp);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    background-size: contain;
    position: relative;
}

.arrow {
    background: url(/scripts/calculators/raid/Wooden_Arrow_icon.webp);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    background-size: contain;
    position: relative;
}

.satchel {
    background: url(/scripts/calculators/raid/Satchel.webp);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    background-size: contain;
    position: relative;
}

.lowgrade {
    background: url(/scripts/calculators/raid/lgf.webp);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    background-size: contain;
    position: relative;
}

.flamethrower {
    background: url(/scripts/calculators/raid/flamethr.webp);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    background-size: contain;
    position: relative;
}

.transparent {
    background: url(/scripts/calculators/raid/transparent.webp);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    background-size: contain;
    position: relative;
}

.compound {
    background: url(/scripts/calculators/raid/bow.compound.webp);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    background-size: contain;
    position: relative;
}

.incinrkt {
    background: url(/scripts/calculators/raid/Incin_Rkt_icon.webp);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    background-size: contain;
    position: relative;
}

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

@media (max-width: 1100px) {
   

    td p, th p, td, th {
        font-size: 0.7rem;
    }

    td img, th img {
        height: 8vw;
    }
}

@media (max-width: 1100px) {
    .content-wrapper {
        width: 90%;
    }

    .div-left, .div-right {
        width: 5%;
    }
}