#setup { padding-left: 5%; padding-right: 5%; padding-top: 1%; display: grid; grid-template-columns: repeat(2, calc(95% / 2)); grid-template-rows: repeat(7, calc(100% / 7)); grid-gap: 2% 5%; } #setup_slots { min-width: 55px; width: 10%; margin-left: 3%; border: 1px solid aliceblue; } #setup #setupContainersDiv { grid-row: span 5; grid-column: span 2; width: 100%; height: 100%; text-align: center; border: 1px solid cadetblue; border-radius: 5px; padding: 1% 10px; overflow: auto; } #setup #setupContainersDiv #containerAddBtn { position: relative; left: 43%; bottom: 10%; } #setup #setupLEDDiv { grid-row: span 3; grid-column: span 1; height: 100%; text-align: center; border: 1px solid cadetblue; border-radius: 5px; padding: 1% 10px; margin-right: 10%; } #setup #setupExtraDiv { grid-row: span 3; grid-column: span 1; width: 100%; height: 100%; text-align: center; border: 1px solid cadetblue; border-radius: 5px; padding: 1% 10px; } #setupContainers .setupContainer { color: black; text-align: left; width: calc(100% / 2.3); height: 12%; display: inline-block; margin-bottom: 3%; border: 1px solid gray; margin-left: 2%; margin-right: 2%; border-radius: 10px; padding: 3% 10px; transition: 0.5s; background-color: rgb(111, 109, 109); overflow: hidden; } .removeSlowly { animation: removeSlowlyWidth 0.8s forwards; } @keyframes removeSlowlyWidth { 100% { opacity: 0; } } .error { background-color: rgba(255,0,0,0.5) !important; } #setupContainers .setupContainer p { margin-bottom: 3%; font-weight: 600; font-size: 1.2em; } #setupContainers .setupContainer select { margin-bottom: 2%; }