.ost-shield { margin: 12px 0; }
.ost-shield__hp { position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

.ost-shield__box{
  display:flex;
  align-items:center;
  gap:10px;
  max-width: 480px;
}

.ost-shield__cb{
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 12px;
  border:1px solid var(--color-blue);
  border-radius:10px;
  background:#fff;
  cursor:pointer;
  user-select:none;
  min-width: 230px;
}

.ost-shield__tick{
  width:22px; height:22px;
  border-radius:6px;
  border:1px solid var(--color-blue);
  display:inline-block;
  position:relative;
  background:#fff;
}

.ost-shield.is-solved .ost-shield__tick{
  border-color: rgba(0,0,0,.15);
}

.ost-shield.is-solved .ost-shield__tick:after{
  content:"";
  position:absolute;
  left:6px; top:2px;
  width:7px; height:13px;
  border-right:3px solid #1aa34a;
  border-bottom:3px solid #1aa34a;
  transform: rotate(40deg);
}

.ost-shield__label{ font-size:14px; line-height:1; }

.ost-shield__refresh{
  width:36px; height:36px;
  border-radius:10px;
  background: var(--color-yellow);
  color:#fff;
  cursor:pointer;
}

.ost-shield__status{
  font-size:12px;
  min-height: 16px;
}

.ost-shield__status.is-loading{ opacity:.85; }
.ost-shield__status.is-bad{ color:#b00020; }
.ost-shield__status.is-warn{ color:#8a6d00; }
.ost-shield__status.is-ok{ color:#1aa34a; }

.ost-shield__spinner{
  width:14px; height:14px;
  border-radius:999px;
  border:2px solid rgba(0,0,0,.15);
  border-top-color: rgba(0,0,0,.45);
  display:none;
  animation: ostShieldSpin .8s linear infinite;
  margin-left:auto;
}

.ost-shield.is-loading .ost-shield__spinner{ display:inline-block; }

@keyframes ostShieldSpin {
  to { transform: rotate(360deg); }
}