.control-panel__video-screen { margin-bottom: 10px; flex: 0 0 248px; } .video-screen { background-color: #606971; display: flex; align-items: center; height: 100%; } .video-screen__loading-spinner { width: 40px; height: 40px; position: relative; border-radius: 50%; overflow: hidden; border: 1px solid black; } .video-screen__loading-spinner::before, .video-screen__loading-spinner::after { content: ""; position: absolute; height: 100%; width: 50%; top: 0; } .video-screen__loading-spinner::before { left: 0; animation-name: loadingSpinner; animation-direction: normal; animation-duration: 2s; animation-iteration-count: infinite; animation-timing-function: linear; } .video-screen__loading-spinner::after { left: 50%; animation-name: loadingSpinner; animation-direction: reverse; animation-duration: 2s; animation-iteration-count: infinite; animation-timing-function: linear; } .video-screen_loading-spinner__wrapper { background-color: #40c14c; border: 2px solid black; display: flex; align-items: center; justify-content: center; width: fit-content; padding: 5px; margin-bottom: 20px; } .video-screen__text-wrapper { background-color: white; border: 2px solid black; padding: 5px; display: flex; flex-direction: column; justify-content: center; } .video-screen__header { margin: 0; font-style: italic; text-transform: uppercase; } .video-screen__hidden { display: none; } #video-screen__vehicle { display: flex; align-items: center; flex-direction: column; } .video-screen__info-text { font-style: italic; text-transform: uppercase; font-weight: bold; } @keyframes loadingSpinner { from { background: linear-gradient(#000e0d, #000e0d 50%, #f9fb07 50%); } to { background: linear-gradient(#f9fb07, #f9fb07 50%, #000e0d 50%); } } #power-display__inner { flex-direction: column; } .power-screen__button-container { display: flex; flex-direction: column; align-items: center; padding-bottom: 5px; border-bottom: white solid 2px; } .power-screen__button-container button { outline-style: none; } #push-to-open-button { border-bottom: 0px; } .power-screen__left { display: flex; flex: 1; border-right: white solid 1px; flex-direction: column; } .power-screen__right { flex: 1; border-left: white solid 1px; } .power-button__text { margin: 6px 0px; } .power-screen__contact-position-container, .power-screen__stored-energy-container { text-align: center; border-bottom: white solid 2px; } .power-screen__voltage-switches-container { display: flex; justify-content: center; } .power-screen__warning-text { color: white; margin: 0; font-size: x-small; padding-left: 10px; padding-top: 5px; } .power-screen__status-text { margin: 5px auto; } #video-screen__power { flex: 1; justify-content: center; } #charge-status { background-color: white; } #contact-status { background-color: #148e42; color: white; }