body{width:100vw;height:100vh;font-family:Verdana,sans-serif;margin:0;padding:0;background-color:#cbcfd2;display:flex;align-items:stretch;align-content:stretch}#root{width:100%;display:flex}.main{background-color:#fff;margin:20px;width:100%;display:flex;flex-flow:row wrap;justify-content:space-around;border-radius:10px;border:2px solid #004d9b}.panel{background-color:#fff;margin:10px;padding:20px;display:flex;border-radius:5px;border:1px solid #004d9b;flex-flow:column wrap;justify-content:space-around;align-items:center;-webkit-box-shadow:1px 1px 5px 3px #007bc3;box-shadow:1px 1px 3px 1px #004d9b}.panel-icon{color:#7e898f}.panel-value{color:#004d9b;font-weight:900;font-size:3rem}.panel-text{color:#000}.panel-error{font-size:3rem;font-weight:200;color:#ea5451}.loader-container{width:400px;height:400px;background-color:#0ff}.loader{position:relative;width:100px;height:130px;background:#cbcfd2;border-radius:4px;top:40%}.loader:before{content:"";position:absolute;width:54px;height:25px;left:50%;top:0;background-image:radial-gradient(ellipse at center,#0000 24%,#004d9b 25%,#004d9b 64%,#0000 65%),linear-gradient(to bottom,#0000 34%,#004d9b 35%);background-size:12px 12px,100% auto;background-repeat:no-repeat;background-position:center top;transform:translate(-50%,-65%);box-shadow:0 -3px #00000040 inset}.loader:after{content:"";position:absolute;left:50%;top:20%;transform:translate(-50%);width:66%;height:60%;background:linear-gradient(to bottom,#007bc3 30%,#0000 31%);background-size:100% 16px;animation:writeDown 2s ease-out infinite}@keyframes writeDown{0%{height:0%;opacity:0}20%{height:0%;opacity:1}80%{height:65%;opacity:1}to{height:65%;opacity:0}}