.cn-banner {
  background-color: #ccc;
  bottom: 0;
  font-size: 14px;
  left: 0;
  line-height: 1.2em;
  padding: 20px;
  position: fixed;
  width: 100%;
  z-index: 100000000; }
  .cn-banner a {
    text-decoration: none; }
    .cn-banner a:focus, .cn-banner a:hover {
      text-decoration: underline; }

.cn-banner__confirm {
  background-color: #fff;
  border: none;
  border-radius: 2px;
  cursor: pointer;
  display: inline;
  font-size: inherit;
  line-height: inherit;
  margin-left: 0.7em;
  margin-top: 0;
  padding: 0 1.5em;
  vertical-align: middle; }

.cn-banner__text {
  display: inline;
  vertical-align: middle; }

.cn-banner--light {
  background-color: #f0e7dc;
  color: #555; }
  .cn-banner--light a {
    color: #555; }
  .cn-banner--light .cn-confirm {
    background-color: #fff;
    color: #555; }
    .cn-banner--light .cn-confirm:focus, .cn-banner--light .cn-confirm:hover {
      background-color: #acaaaa;
      color: #fff; }

.cn-banner--dark {
  background-color: #085583;
  color: #fff;
  box-shadow: inset 0 0 3px 0px #8cd4ff; }
  .cn-banner--dark .cn-banner__text a, .cn-banner--dark .cn-banner__text a:hover {
    color: #abc; }
  .cn-banner--dark .cn-banner__confirm {
    background-color: white;
    box-shadow: inset 0 0 3px 0px #d6c2b0; }
    .cn-banner--dark .cn-banner__confirm:focus, .cn-banner--dark .cn-banner__confirm:hover {
      background-color: #eee;
      color: #890d49; }