.save-indicator{position:relative;height:22px}.save-indicator.saved .is-saving{-webkit-transition:opacity .5s ease-in-out;-moz-transition:opacity .5s ease-in-out;-ms-transition:opacity .5s ease-in-out;-o-transition:opacity .5s ease-in-out;opacity:0}.save-indicator.saved .is-saved{-webkit-transition:opacity 1s ease-in-out;-moz-transition:opacity 1s ease-in-out;-ms-transition:opacity 1s ease-in-out;-o-transition:opacity 1s ease-in-out;opacity:1}.save-indicator.saving .is-saving{-webkit-transition:opacity 1s ease-in-out;-moz-transition:opacity 1s ease-in-out;-ms-transition:opacity 1s ease-in-out;-o-transition:opacity 1s ease-in-out;opacity:1}.save-indicator.saving .is-saved{-webkit-transition:opacity .5s ease-in-out;-moz-transition:opacity .5s ease-in-out;-ms-transition:opacity .5s ease-in-out;-o-transition:opacity .5s ease-in-out;opacity:0}.save-indicator .is-saving,.save-indicator .is-saved{display:flex;gap:10px;align-items:flex-end;position:absolute}.save-indicator .is-saving{color:#0793CA}.save-indicator .is-saved{color:#3CB778}.save-indicator .dot-flashing{position:relative;width:4px;height:4px;border-radius:5px;background-color:#0793CA;color:#0793CA;animation:dotFlashing 1s infinite linear alternate;animation-delay:.5s;left:5px;top:-5px}.save-indicator .dot-flashing::before,.save-indicator .dot-flashing::after{content:'';display:inline-block;position:absolute;top:0}.save-indicator .dot-flashing::before{left:-10px;width:4px;height:4px;border-radius:5px;background-color:#0793CA;color:#0793CA;animation:dotFlashing 1s infinite alternate;animation-delay:0s}.save-indicator .dot-flashing::after{left:10px;width:4px;height:4px;border-radius:5px;background-color:#0793CA;color:#0793CA;animation:dotFlashing 1s infinite alternate;animation-delay:1s}@keyframes dotFlashing{0%{background-color:#0793CA}50%,100%{background-color:#eef8fb}}.save-indicator .dot-elastic{position:relative;width:4px;height:4px;border-radius:5px;background-color:#0793CA;color:#0793CA;animation:dotElastic 1s infinite linear;left:5px;top:-5px}.save-indicator .dot-elastic::before,.save-indicator .dot-elastic::after{content:'';display:inline-block;position:absolute;top:0}.save-indicator .dot-elastic::before{left:-10px;width:4px;height:4px;border-radius:5px;background-color:#0793CA;color:#0793CA;animation:dotElasticBefore 1s infinite linear}.save-indicator .dot-elastic::after{left:10px;width:4px;height:4px;border-radius:5px;background-color:#0793CA;color:#0793CA;animation:dotElasticAfter 1s infinite linear}@keyframes dotElasticBefore{0%{transform:scale(1, 1)}25%{transform:scale(1, 1.5)}50%{transform:scale(1, 0.67)}75%{transform:scale(1, 1)}100%{transform:scale(1, 1)}}@keyframes dotElastic{0%{transform:scale(1, 1)}25%{transform:scale(1, 1)}50%{transform:scale(1, 1.5)}75%{transform:scale(1, 1)}100%{transform:scale(1, 1)}}@keyframes dotElasticAfter{0%{transform:scale(1, 1)}25%{transform:scale(1, 1)}50%{transform:scale(1, 0.67)}75%{transform:scale(1, 1.5)}100%{transform:scale(1, 1)}}