:host { display: flex; align-items: center; justify-content: center; height: 100%; margin-top: -66px } #box { display: flex; flex-direction: column; /*max-width: 300px;*/ gap: 10px; & > div { display: flex; flex-direction: column; } } .border { border-style: solid; border-width: 1px; padding: 10px; margin: 10px; position: absolute; background-color: white; box-shadow: 0 0 10px 10px black; } #bar { height: 5px; width: 100%; appearance: none; overflow: hidden; /*margin-top: -5px;*/ } #bar::-webkit-progress-bar { background-color: lightgray; transition: width 0.5s ease-in-out, background-color 0.5s ease-in-out; } .color0::-webkit-progress-value { background: rgba(255, 0 ,0, 1); transition: background-color 0.5s ease-in-out, width 0.5s ease-in-out; } .color1::-webkit-progress-value { background: rgba(255, 0 ,0, 1); transition: background-color 0.5s ease-in-out, width 0.5s ease-in-out; } .color2::-webkit-progress-value { background: rgba(255, 165, 0, 1); transition: background-color 0.5s ease-in-out, width 0.5s ease-in-out; } .color3::-webkit-progress-value { background: rgba(255, 255, 0, 1); transition: background-color 0.5s ease-in-out, width 0.5s ease-in-out; } .color4::-webkit-progress-value { background: rgba(173, 255, 47, 1); transition: background-color 0.5s ease-in-out, width 0.5s ease-in-out; } .color5::-webkit-progress-value { background: rgba(50, 205, 50, 1); transition: background-color 0.5s ease-in-out, width 0.5s ease-in-out; } .color6::-webkit-progress-value { background: rgba(0, 128, 0, 1); transition: background-color 0.5s ease-in-out, width 0.5s ease-in-out; } #requirement2, #statusText, #passwordStatusText, #usernameStatusText { color: red; } #passReq { display: flex; flex-direction: column; } #box > div { display: flex; flex-direction: row; align-items: start; gap: 20px; div { display: flex; flex-direction: column; } }