body.loading > .spring-spinner {
  display: block;
}

.spring-spinner {
  --size: 60px;
  display: none;
  height: var(--size);
  width: var(--size);
  margin: 100px auto;
  box-sizing: border-box;
  * {
    box-sizing: border-box;
  }
  .spring-spinner-part {
    overflow: hidden;
    height: calc(var(--size) / 2);
    width: var(--size);
  }
  .spring-spinner-part.bottom {
    transform: rotate(180deg) scale(-1, 1);
  }
  .spring-spinner-rotator {
    width: var(--size);
    height: var(--size);
    border: calc(60px / 7) solid transparent;
    border-right-color: #ff1d5e;
    border-top-color: #ff1d5e;
    border-radius: 50%;
    box-sizing: border-box;
    animation: spring-spinner-animation 3s ease-in-out infinite;
    transform: rotate(-200deg);
  }
}
.spring-spinner.ajax {
  --size: 24px;
  position: absolute;
  margin: 5px;
  top: 0;
  right: 0;
}
@keyframes spring-spinner-animation {
  0% {
    border-width: calc(var(--size) / 7);
  }
  25% {
    border-width: calc(var(--size) / 23.33);
  }
  50% {
    transform: rotate(115deg);
    border-width: calc(var(--size) / 7);
  }
  75% {
    border-width: calc(var(--size) / 23.33);
  }
  100% {
    border-width: calc(var(--size) / 7);
  }
}

body {
  --border: 1px solid #808080;
  font: 25px Tahoma, Verdana;
  line-height: 130%;
}

.icon {
  display: inline-block;
  background-repeat: no-repeat;
  background-position: center center;
}
.icon.ok {
  background-image: url('data:image/jpg;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALEwAACxMBAJqcGAAAAnZJREFUWIXF101LlVEQB/Cfr61KJaNwVaiUQmBQ2aJA6HMIEUGbWlS6kT5C9gIiLtq3CGrRLhCxhVCLoG1WtAgKvZJSq7JsMefK9fbcl+d6xT88iztn5vznzJkzM5d9RktO/U6M4jz60Z3k6/iAN+n71SwHiziJuUS0ha9YxLP0LeJbWvuOWQw2g7gnEf/Fe0yIk2dFrgUDmMQy/mAGXY2Sn8VncbJxtOWwbcMVrOAjRvKSX8ZPvMSRvMYlOIp5/MBYvUZnE/kTdOyCvIhOPE1O1IxEjwj7yyaRlzqxIF7KoWqKc+LOdxP2SjiGAh5WUjgpsn18D8iLuIZNnMhanBNPLU+218JQ2e92fMKjcsVOUWQmmkh+VdSC0TL5FFaTM9u4JKpYfxPJ/+Ke/4vWUOI6Vyq8I8pr3t6Ql1ySFXCzVDgr6vlekxexJOVBaxJ0Y62CcmsFeRb5Y9wX/WCriu5a4qy5+Sm8Vbuz5SHfgaID6zicsV4QoVyo4kQj5IcT5zZuiwqYdW+9eIcvGU7Ue+elaBFXcKNUeFF4PlDBKMuJRshhWMYz7BSTzGQVw1In7jZILtmuyKi4s2KSqVaKi05sNUjeIbrtg6zFQVE6r9TYpBe3GiCH6/iN45UUZkR4jjaweS30ieSbrqbUJWa4eZEXzcIBvBLd9mAt5RExPj1tkhMH8BwbOF2v0VhyYkFMMo2iT5x8Q3TcXBgR11EQk0x7dfUd6BAJtybCXvfJy3FIzHCbYpKZEv28UpsdFu/8s8j2aXXceT04IdrnqqgBBdFSX6RvSZx2S7yiB6o8tXKv86AdZ3BBlO3SP6fLeC2655+c++4f/gFulpVp0ieYAwAAAABJRU5ErkJggg==')
}
.icon.cancel {
  background-image:url('data:image/jpg;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAACXBIWXMAAAsTAAALEwEAmpwYAAACrUlEQVRYhcWXu08VQRTGx2t8Re2Mj1Kl08JOJcZOiVprpAbsTCDhLzAh8h8omAs0aI0FITSKCj4aExONdGqHNhCBePH5/e6eSTbrPueu8SRfsrsz53znzsz55lznytt+oVe4J7wSPgtbBp5fCuPCdZtbmx0R7ggbwm/hh/BeWBCmDTwvCz9tzoYl2tUJ8R7hlrAu/BJmhT7hYI4PY/3CnCXC6owKu6qSk/kbC8KvO1M1gOys8MxiLAqHyjqeElaE78LNAOKkDblo2z4JJ4smdxn5qnChBnJvPcKa8NHlrMRu4bWLsr1cI7k3fhCruuQyzgQHjv2qY9mzbNA4bicHKDVO+0KG494AsiwfDmZLOB7/SJ1TammnnUCbQlNolCBu2NzNjCS6XbQK4/4DqoVwzOYEbZrTREESjE3a3GbOPHSCFd/HS6859BUEnrB5kxlJxMmLEh2wedd4QTI5+XkKlyRIJpE3lmaUIrI9xgsXy3KBQx5RVXJvb4UXPHwRHpV0SksihBybcZHotUtiuoIjtk24a8Qh5NiU8M0ncL+ic8MC+AQeCNtDE2ALHlckr2MLHjrbAjqZ/3EI3wnPeUCRKImi+7rOMjxsnJyjdg+HY38gedqcIiG6YfOu8uKleC7HoYoUe8XMk+J54auL3RWoIZdRd8rkui+jc5bgWPwjnRAN5NOMoHVdx+gHDQnldzQ5OGqZDQWQlbVh4xhJG9zhooaEi+nKPyC/aLHpkDPbdEqR7pUGsqdG8ksW84MrvnXbrTNJkO1gh8Ts+bDFoiM+UdbxgIvkmf3iyjwfQH5aeOIC/ph4Y5/oXlsWBJ0YKAiEwiEy8+aDLwduZ1XyuB1zkVyvW1AkFB3nPp8yzNg3/+cUkaHO/yq1TowGkh4O/WZbuMlahhX7RneNvJbWjT8uAdQPWj4RvQAAAABJRU5ErkJggg==')
}

.diagonal_background {
  background-image: url('data:image/gif;base64,R0lGODlhAwADAJEAAAAAAP///56env///yH5BAEAAAMALAAAAAADAAMAAAIE1D5mBQA7');
}

input[type=text], textarea {
  padding: 5px;
  box-sizing: border-box;
  border-radius: 5px;
  width: 100%;
  border-width: 1px;
}

input:focus {
  outline: none;
}