.status-body {
  height: 30px;
  width: 30px;
  border-radius: 15px;
  opacity: 0;

  position: absolute;
  top: 32px;
  right: 32px;

  display: flex;
  align-items: center;
  justify-content: space-between;
  z-index: 1;
}

.status-body svg {
  display: none;
  background-position: center;
  background-repeat: no-repeat;
}

.status-body p {
  display: none;
  font-size: 14px;
  margin-inline: 12px;
  overflow: hidden;
  white-space: nowrap;
}

.attention {
  background-color: #FEFFA4;
  padding-inline: 5px;
  width: auto;
  animation: 2s ease-in-out 0s 1 normal forwards running apear;
}

.attention svg {
  display: block;
  width: 20px;
  height: 20px;
  background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyBpZD0iTGF5ZXJfMiIgZGF0YS1uYW1lPSJMYXllciAyIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxOSAxOC4xNiI+CiAgPGRlZnM+CiAgICA8c3R5bGU+CiAgICAgIC5jbHMtMSB7CiAgICAgICAgZmlsbDogbm9uZTsKICAgICAgICBzdHJva2U6ICMwMDA7CiAgICAgICAgc3Ryb2tlLW1pdGVybGltaXQ6IDEwOwogICAgICB9CiAgICA8L3N0eWxlPgogIDwvZGVmcz4KICA8ZyBpZD0iTGF5ZXJfMi0yIiBkYXRhLW5hbWU9IkxheWVyIDIiPgogICAgPGc+CiAgICAgIDxnPgogICAgICAgIDxwYXRoIGNsYXNzPSJjbHMtMSIgZD0iTTkuNSwuNWMzLjc4LC4wMiw3LjIsMi41OSw4LjE0LDYuNDMsLjY0LDIuNjEsMCw1LjIzLTEuNTQsNy4yIi8+CiAgICAgICAgPHBvbHlnb24gcG9pbnRzPSIxNC4yOCAxMS42IDEzLjQ2IDE3LjUzIDE5IDE1LjI3IDE0LjI4IDExLjYiLz4KICAgICAgPC9nPgogICAgICA8Zz4KICAgICAgICA8cGF0aCBjbGFzcz0iY2xzLTEiIGQ9Ik05LjUsMTcuNjZjLTMuNzgtLjAyLTcuMi0yLjU5LTguMTQtNi40My0uNjQtMi42MSwwLTUuMjMsMS41NC03LjIiLz4KICAgICAgICA8cG9seWdvbiBwb2ludHM9IjQuNzIgNi41NiA1LjU0IC42NCAwIDIuODkgNC43MiA2LjU2Ii8+CiAgICAgIDwvZz4KICAgIDwvZz4KICA8L2c+Cjwvc3ZnPg==);
  animation: 3s cubic-bezier(0.65, 0.36, 0.35, 0.71) 0s infinite normal none running infRotate;
}

.attention p {
  display: block;
}

.save p {
  display: block;
}

.save {
  background-color: #BEFFA1;
  padding-inline: 4px;
  width: auto;
}

.save svg {
  display: block;
  width: 22px;
  height: 22px;
}

@keyframes apear {
  from {opacity: 0;}
  to {opacity: 100%;}
}

@keyframes disapear {
  from {opacity: 100%;}
  to {opacity: 0;}
}

@keyframes infRotate {
  from {rotate: 0deg;}
  to {rotate: 360deg;}
}

@keyframes warningToSave {
  from {background-color: #FEFFA4;}
  to {background-color: #BEFFA1;}
}

@keyframes shrinkAttention {
  from {width: 193.25px;}
  to {width: 39.7px;}
}

@keyframes shrinkFromSaveSmall {
  from {width: 39.7px;}
  to {width: 0;}
  from {margin-inline: 12px;}
  to {margin-inline: 0;}
}

@keyframes shrinkFromSave {
  from {width: 54.48px;}
  to {width: 0;}
  from {margin-inline: 12px;}
  to {margin-inline: 0;}
}