#setup { padding-left: 5%; padding-right: 5%; padding-top: 1%; display: grid; grid-template-columns: repeat(2, calc(95% / 2)); grid-template-rows: repeat(9, calc(100% / 9)); grid-gap: 2% 2%; color: white; } #setup #setupContainersDiv { grid-row: span 18; grid-column: span 2; width: 100%; height: 100%; text-align: center; border: 1px solid #818181; border-radius: 5px; padding: 0.45% 10px; overflow: auto; overflow-x: hidden; } #setup #setupContainersDiv #containerAddBtn { position: relative; left: 46%; bottom: 8%; } #setup #setupLEDDiv { grid-row: span 3; grid-column: span 1; height: 100%; text-align: center; border: 1px solid #818181; 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 #818181; border-radius: 5px; padding: 1% 10px; } #setupContainers .setupContainer { color: white; text-align: left; width: calc(100% / 2.3); height: 12%; display: inline-block; margin-bottom: 3%; border: 2px solid #142F44; margin-left: 2%; margin-right: 2%; border-radius: 10px; padding: 3% 10px; transition: 0.5s; background-color: #4f6aaa; overflow: hidden; } .removeSlowly { animation: removeSlowlyWidth 0.8s forwards; } @keyframes removeSlowlyWidth { 100% { opacity: 0; } } .error { background-color: var(--error) !important; } #setupContainers .setupContainer p { margin-bottom: 4.5%; font-weight: 600; font-size: 1.2em; } #setupContainers .setupContainer select { margin-bottom: 2.1%; background-color: var(--select-bg); color: white; }