.inventory { width: 100%; height: 100%; display: flex; flex-direction: column; row-gap: 1rem; position: relative; } .inventory-header { display: flex; align-items: center; justify-content: space-between; padding: 0 2rem; } .inventory-container { padding: 0 2rem; display: flex; column-gap: 2rem; flex: 1; width: 100%; } .company-inventory { flex: 3; height: 100%; display: flex; flex-direction: column; row-gap: 1rem; align-items: flex-start; } .amount-input-container { flex: 1; display: flex; align-items: center; height: 100%; justify-content: center; } .inventory-amount-input { appearance: none; outline: none; border-radius: 0.8125rem; border: 0.1625rem solid rgba(0, 0, 0, 0.22); border: 0.1625rem solid color(display-p3 0 0 0 / 0.22); background: rgba(0, 0, 0, 0.53); background: color(display-p3 0 0 0 / 0.53); width: 100%; height: 3.25rem; flex-shrink: 0; padding: 0 1rem; color: rgba(255, 255, 255, 1); leading-trim: both; text-edge: cap; font-family: SF Pro Rounded; font-size: 0.975rem; font-style: normal; font-weight: 600; text-align: center; line-height: normal; } .inventory-amount-input::placeholder { color: rgba(255, 255, 255, 0.47); leading-trim: both; text-edge: cap; font-family: SF Pro Rounded; font-size: 0.975rem; font-style: normal; font-weight: 600; line-height: normal; } .inventory-box { flex: 1 0 0; width: 100%; border-radius: 0.9375rem; background: rgba(217, 217, 217, 0.05); background: color(display-p3 0.851 0.851 0.851 / 0.05); overflow: auto; padding: 1rem 0.5rem; display: flex; flex-wrap: wrap; align-content: flex-start; justify-content: center; column-gap: 0.75rem; row-gap: 0.75rem; } .inventory-slot { width: 17%; position: relative; height: 5rem; border-radius: 0.625rem; background-color: rgba(217, 217, 217, 0.2); display: flex; align-items: center; justify-content: center; } .inventory-item-amount { position: absolute; right: 0.3rem; top: 0.3rem; color: rgba(255, 255, 255, 0.47); color: color(display-p3 1 1 1 / 0.47); text-align: center; leading-trim: both; text-edge: cap; font-family: SF Pro Rounded; font-size: 0.625rem; font-style: normal; font-weight: 600; line-height: normal; } .inventory-item-name { position: absolute; left: 0; bottom: 0; border-bottom-left-radius: 0.625rem; border-bottom-right-radius: 0.625rem; width: 100%; background: rgba(0, 0, 0, 0.42); color: rgba(255, 255, 255, 0.47); color: color(display-p3 1 1 1 / 0.47); leading-trim: both; text-edge: cap; font-family: SF Pro Rounded; font-size: 0.625rem; font-style: normal; font-weight: 600; line-height: normal; height: 1.0625rem; display: flex; align-items: center; justify-content: center; } .inventory-slot img { width: 3.3234rem; height: auto; object-fit: scale-down; } .player-inventory { flex: 3; height: 100%; display: flex; flex-direction: column; row-gap: 1rem; align-items: flex-end; } .disable-actions-button { width: 9.4375rem; height: 3.0625rem; border-radius: 0.7445rem; border: 0.1654rem solid rgba(0, 0, 0, 0.2); border: 0.1654rem solid color(display-p3 0 0 0 / 0.2); background: #ff4953; background: color(display-p3 1 0.3569 0.3569); box-shadow: 0rem 0rem 4.6324rem 0rem rgba(255, 73, 83, 0.56); box-shadow: 0rem 0rem 4.6324rem 0rem color(display-p3 1 0.3569 0.3569 / 0.56); align-items: center; justify-content: center; display: flex; color: #fff; color: color(display-p3 1 1 1); leading-trim: both; text-edge: cap; font-family: SF Pro Rounded; font-size: 1.0754rem; font-style: normal; font-weight: 600; cursor: pointer; transition: all 0.2s ease; } .disable-actions-button:hover { opacity: 0.9; } .disable-actions-button.enabled { background: #83FF87; background: color(display-p3 0.6417 1 0.5833); box-shadow: 0px 0px 74.11765px 0px rgba(132, 255, 135, 0.56); box-shadow: 0px 0px 74.11765px 0px color(display-p3 0.6431 1 0.5843 / 0.56); color: #4E9250; } .inventory-header-text { color: #fff; color: color(display-p3 1 1 1); text-align: right; leading-trim: both; text-edge: cap; font-family: SF Pro Rounded; font-size: 1.0754rem; font-style: normal; font-weight: 600; line-height: 143.836%; /* 1.5468rem */ }