/* busy indicator styles */

  .busy {
    color; var(--main-border);
    display: block;
    width: 25px;
    height: 25px;
  }
  .busy.box_1 {
    border-style: dotted;
    animation: roll-border-4 2s linear infinite;
  }

  .busy.box_2 {
    border-style: dashed;
    border-width: 5px;
    animation: roll-border-color-4 2s linear infinite;
  }

  .busy.round {
    border-radius: 25px;
  }

  @keyframes roll-border-4 {
    0% { border-width: 5px 0 0 0; }
    25% { border-width: 0 5px 0 0; }
    50% { border-width: 0 0 5px 0; }
    75% { border-width: 0 0 0 5px; }
    100% { border-width: 5px 0 0 0; }
  }
  @keyframes roll-border-3 {
    0% { border-width: 5px 0 0 0; }
    33% { border-width: 0 5px 0 0; }
    67% { border-width: 0 0 5px 0; }
    100% { border-width: 0 0 0 5px; }
  }
  @keyframes roll-border-color-4 {
    0% { border-color: var(--main-border) transparent transparent transparent; }
    25% { border-color: transparent var(--main-border) transparent transparent; }
    50% { border-color: transparent transparent var(--main-border) transparent; }
    75% { border-color: transparent transparent transparent var(--main-border); }
    100% { border-color: var(--main-border) transparent transparent transparent; }
  }