body{margin:auto;max-width:1200px;font-family:Arial,Verdana,Helvetica,sans-serif}:root{--spinner-size: 1em;--spinner-inner-color: #248BCC;--spinner-outer-color: #DD3D3B}.spinner{position:relative;padding-left:calc(var(--spinner-size) + .5rem)}.spinner.right{padding-left:0;padding-right:calc(var(--spinner-size) + .5rem)}.spinner:before,.spinner:after{content:"";position:absolute;top:calc((1em - var(--spinner-size)) * .5);left:calc((1em - var(--spinner-size)) * .5);border:calc(var(--spinner-size) * .15) solid transparent;border-radius:50%;box-sizing:border-box;animation:1s spin infinite linear}.spinner.right:before,.spinner.right:after{left:initial;right:calc((1em - var(--spinner-size)) * .5)}.spinner:before{width:var(--spinner-size);height:var(--spinner-size);border-top-color:var(--spinner-outer-color);animation-duration:2s}.spinner:after{margin:calc(var(--spinner-size) * .15);width:calc(var(--spinner-size) * .7);height:calc(var(--spinner-size) * .7);border-left-color:var(--spinner-inner-color);border-bottom-color:var(--spinner-inner-color);animation-duration:1.2s}@keyframes spin{to{transform:rotate(360deg)}}