/* 
* =============================================
* corner  
* http://frozenui.github.io/components/components#%E8%A7%92%E6%A0%87
* =============================================
*/
[class*='corner-'] {
  top: 0;
  position: absolute;
  height: 1.5rem;
  line-height: 1.5rem;
  padding: 0px 6rem;
  text-align: center;
  font-size: 0.875rem;
  color: #fff;
  background-color: #fb5050;
  white-space: nowrap;
  z-index: 9;
  border: 1px dashed;
  -webkit-box-shadow: 0 0 0 3px #fb5050, 0px 21px 5px -18px black;
          box-shadow: 0 0 0 3px #fb5050, 0px 21px 5px -18px black;
}

.corner-left {
  left: 0;
  -webkit-transform: rotate(-45deg) translate(-31%, -205%);
          transform: rotate(-45deg) translate(-31%, -205%);
}

.corner-right {
  right: 0;
  -webkit-transform: rotate(45deg) translate(31%, -205%);
          transform: rotate(45deg) translate(31%, -205%);
}

.corner-primary {
  color: #ffffff !important;
  background-color: #1b9af7 !important;
  -webkit-box-shadow: 0 0 0 3px #1b9af7, 0px 21px 5px -18px black;
          box-shadow: 0 0 0 3px #1b9af7, 0px 21px 5px -18px black;
}

.corner-secondary {
  color: #ffffff !important;
  background-color: #6c757d !important;
  -webkit-box-shadow: 0 0 0 3px #6c757d, 0px 21px 5px -18px black;
          box-shadow: 0 0 0 3px #6c757d, 0px 21px 5px -18px black;
}

.corner-success {
  color: #ffffff !important;
  background-color: #48c78e !important;
  -webkit-box-shadow: 0 0 0 3px #48c78e, 0px 21px 5px -18px black;
          box-shadow: 0 0 0 3px #48c78e, 0px 21px 5px -18px black;
}

.corner-warning {
  color: #212529 !important;
  background-color: #ffe08a !important;
  -webkit-box-shadow: 0 0 0 3px #ffe08a, 0px 21px 5px -18px black;
          box-shadow: 0 0 0 3px #ffe08a, 0px 21px 5px -18px black;
}

.corner-danger {
  color: #ffffff !important;
  background-color: #f14668 !important;
  -webkit-box-shadow: 0 0 0 3px #f14668, 0px 21px 5px -18px black;
          box-shadow: 0 0 0 3px #f14668, 0px 21px 5px -18px black;
}

.corner-info {
  color: #ffffff !important;
  background-color: #3e8ed0 !important;
  -webkit-box-shadow: 0 0 0 3px #3e8ed0, 0px 21px 5px -18px black;
          box-shadow: 0 0 0 3px #3e8ed0, 0px 21px 5px -18px black;
}

.corner-dark {
  color: #ffffff !important;
  background-color: #555 !important;
  -webkit-box-shadow: 0 0 0 3px #555, 0px 21px 5px -18px black;
          box-shadow: 0 0 0 3px #555, 0px 21px 5px -18px black;
}

.corner-light {
  color: #212529 !important;
  background-color: #f7f8fa !important;
  -webkit-box-shadow: 0 0 0 3px #f7f8fa, 0px 21px 5px -18px black;
          box-shadow: 0 0 0 3px #f7f8fa, 0px 21px 5px -18px black;
}

.corner-white {
  color: #000000 !important;
  background-color: #ffffff !important;
  -webkit-box-shadow: 0 0 0 3px #ffffff, 0px 21px 5px -18px black;
          box-shadow: 0 0 0 3px #ffffff, 0px 21px 5px -18px black;
}

.corner-black {
  color: #ffffff !important;
  background-color: #000 !important;
  -webkit-box-shadow: 0 0 0 3px #000, 0px 21px 5px -18px black;
          box-shadow: 0 0 0 3px #000, 0px 21px 5px -18px black;
}

.corner-transparent {
  color: #212529 !important;
  background-color: transparent !important;
  -webkit-box-shadow: 0 0 0 3px transparent, 0px 21px 5px -18px black;
          box-shadow: 0 0 0 3px transparent, 0px 21px 5px -18px black;
}

.corner-blue {
  color: #ffffff !important;
  background-color: #0000ff !important;
  -webkit-box-shadow: 0 0 0 3px #0000ff, 0px 21px 5px -18px black;
          box-shadow: 0 0 0 3px #0000ff, 0px 21px 5px -18px black;
}

.corner-brown {
  color: #ffffff !important;
  background-color: #a52a2a !important;
  -webkit-box-shadow: 0 0 0 3px #a52a2a, 0px 21px 5px -18px black;
          box-shadow: 0 0 0 3px #a52a2a, 0px 21px 5px -18px black;
}

.corner-cyan {
  color: #212529 !important;
  background-color: #00ffff !important;
  -webkit-box-shadow: 0 0 0 3px #00ffff, 0px 21px 5px -18px black;
          box-shadow: 0 0 0 3px #00ffff, 0px 21px 5px -18px black;
}

.corner-fuchsia {
  color: #ffffff !important;
  background-color: #ff00ff !important;
  -webkit-box-shadow: 0 0 0 3px #ff00ff, 0px 21px 5px -18px black;
          box-shadow: 0 0 0 3px #ff00ff, 0px 21px 5px -18px black;
}

.corner-gray {
  color: #ffffff !important;
  background-color: #808080 !important;
  -webkit-box-shadow: 0 0 0 3px #808080, 0px 21px 5px -18px black;
          box-shadow: 0 0 0 3px #808080, 0px 21px 5px -18px black;
}

.corner-green {
  color: #ffffff !important;
  background-color: #008000 !important;
  -webkit-box-shadow: 0 0 0 3px #008000, 0px 21px 5px -18px black;
          box-shadow: 0 0 0 3px #008000, 0px 21px 5px -18px black;
}

.corner-indigo {
  color: #ffffff !important;
  background-color: #4b0082 !important;
  -webkit-box-shadow: 0 0 0 3px #4b0082, 0px 21px 5px -18px black;
          box-shadow: 0 0 0 3px #4b0082, 0px 21px 5px -18px black;
}

.corner-lime {
  color: #212529 !important;
  background-color: #00ff00 !important;
  -webkit-box-shadow: 0 0 0 3px #00ff00, 0px 21px 5px -18px black;
          box-shadow: 0 0 0 3px #00ff00, 0px 21px 5px -18px black;
}

.corner-orange {
  color: #ffffff !important;
  background-color: #ffa500 !important;
  -webkit-box-shadow: 0 0 0 3px #ffa500, 0px 21px 5px -18px black;
          box-shadow: 0 0 0 3px #ffa500, 0px 21px 5px -18px black;
}

.corner-pink {
  color: #ffffff !important;
  background-color: #ffc0cb !important;
  -webkit-box-shadow: 0 0 0 3px #ffc0cb, 0px 21px 5px -18px black;
          box-shadow: 0 0 0 3px #ffc0cb, 0px 21px 5px -18px black;
}

.corner-purple {
  color: #ffffff !important;
  background-color: #800080 !important;
  -webkit-box-shadow: 0 0 0 3px #800080, 0px 21px 5px -18px black;
          box-shadow: 0 0 0 3px #800080, 0px 21px 5px -18px black;
}

.corner-red {
  color: #ffffff !important;
  background-color: #ff0000 !important;
  -webkit-box-shadow: 0 0 0 3px #ff0000, 0px 21px 5px -18px black;
          box-shadow: 0 0 0 3px #ff0000, 0px 21px 5px -18px black;
}

.corner-teal {
  color: #ffffff !important;
  background-color: #008080 !important;
  -webkit-box-shadow: 0 0 0 3px #008080, 0px 21px 5px -18px black;
          box-shadow: 0 0 0 3px #008080, 0px 21px 5px -18px black;
}

.corner-yellow {
  color: #212529 !important;
  background-color: #ffff00 !important;
  -webkit-box-shadow: 0 0 0 3px #ffff00, 0px 21px 5px -18px black;
          box-shadow: 0 0 0 3px #ffff00, 0px 21px 5px -18px black;
}

/*# sourceMappingURL=corner.css.map */