body {
  background:
    radial-gradient(rgb(155, 77, 202, 0.2) 3px, transparent 4px),
    radial-gradient(rgb(155, 77, 202, 0.5) 3px, transparent 4px),
    linear-gradient(#fff 4px, transparent 0),
    linear-gradient(45deg, transparent 74px, transparent 75px, #ccc 75px, #ccc 76px, transparent 77px, transparent 109px),
    linear-gradient(-45deg, transparent 75px, transparent 76px, #ccc 76px, #ccc 77px, transparent 78px, transparent 109px),
    #fff;
    background-size: 109px 109px, 109px 109px,100% 6px, 109px 109px, 109px 109px;
    background-position: 54px 55px, 0px 0px, 0px 0px, 0px 0px, 0px 0px;
}

.container {
  background:#ffffff;
  border:2px solid #9b4dca;
  margin-top:3em;
  padding:1em;
}

.state {
  padding: 1.5em;
  border-width:1px;
  border-style:solid;
  border-radius: 5px;
}

.invis {
  display:none;
}

.mb {
  margin-bottom:1em;
}

.state ul, li {
  margin-bottom:0;
}

h1 {
  margin-top:0.3em;
}

h1 img {
  width: 35px;
  height: 35px;
}

.error {
  background: #f8d7da;
  color: #712c24;
  border-color:#f5c6cb;
}

.success {
  background: #d4edda;
  color: #155724;
  border-color:#c3e6cb;
}

.lds-dual-ring {
  display: inline-block;
  display:none;
}

.lds-dual-ring:after {
  content: " ";
  display: block;
  width: 64px;
  height: 64px;
  margin: 8px;
  border-radius: 50%;
  border: 6px solid #9b4dca;
  border-color: #9b4dca transparent #9b4dca transparent;
  animation: lds-dual-ring 1.2s linear infinite;
}

@keyframes lds-dual-ring {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}