.switch{ position: relative; display: inline-block; width: 239px; height: 34px; color: rgb(255, 99, 107); } .switch input{ opacity: 0; width: 0; height: 0; } .switch input:focus + .slider{ box-shadow: 0 0 1px #2196F3; } .switch input:checked + .slider:before { -webkit-transform: translateX(105px); -ms-transform: translateX(92px); transform: translateX(125px); } .slider{ display: flex; justify-content: space-between; align-items: center; position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; padding: 0 24px 0 5px; background: rgb(0, 27, 45); transition: 0.2s; } .slider:before{ position: absolute; content: ""; height: 30px; width: 110px; left: 1px; bottom: 1px; background: rgba(255, 255, 255, 0.2); border: 1px solid rgb(255, 99, 107); transition: 0.5s; } .analContent{ display: flex; justify-content: space-around; align-items:center; padding: 15px; box-sizing: border-box; height: 90%; } .itemsList{ list-style-type: none; width: 15%; max-height: 95%; overflow-y: auto; } .analData{ display: flex; flex-direction: column; justify-content: space-around; width: 100%; height: 100%; } #itemUseGraph{ padding: 10px; height: 60%; flex-basis: 100px; flex-grow: 5; } .dataRow{ display: flex; justify-content: space-between; flex-basis: 150px; flex-grow: 0; } .dataRow .analCard{ display: flex; flex-direction: column; justify-content: space-around; margin: 5px; height: inherit; } .dataRow .analCard > *{ margin: 0; } .analCard h1{ text-align: center; } #analRecipeContent{ display: flex; justify-content: space-around; align-items: center; padding: 15px; box-sizing: border-box; height: 90%; }