/**
 * DEPRECATED: use <Circle /> component instead
 */
.circle {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #37517e;
  color: var(--color-content-primary);
  text-align: center;
  -webkit-text-decoration: none;
  text-decoration: none;
  text-transform: uppercase;
  border: 1px solid transparent;
  background-color: #fff;
  border-radius: 50%;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  overflow: hidden;
  margin-left: auto;
  margin-right: auto;
  transition: background-color ease 0.15s, border-color ease 0.15s, color ease 0.15s;
}
.circle.active {
  border-color: #0081ba;
  border-color: var(--color-interactive-accent-active);
  background-color: #0081ba;
  background-color: var(--color-interactive-accent-active);
}
.circle img {
  width: 100%;
  border-radius: 50%;
  vertical-align: baseline;
  vertical-align: initial;
}
img.circle {
  background-color: transparent;
  border-radius: 50%;
}
.circle[style] {
  border: 0;
  border-radius: 50% !important;
}
a.circle[style]:hover {
  border: 1px solid #00a2dd;
  border: 1px solid var(--color-interactive-accent);
}
.navbar-nav > li > a .circle {
  width: 40px;
  height: 40px;
  line-height: 40px;
}
.navbar-nav > li > a .circle .icon {
  line-height: 40px;
}
.circle,
.circle-sm {
  font-size: 16px;
  width: 48px;
  height: 48px;
  line-height: 48px;
}
.circle-xs {
  font-size: 10px;
  width: 24px;
  height: 24px;
  line-height: 24px;
}
.circle-md {
  font-size: 24px;
  width: 72px;
  height: 72px;
  line-height: 72px;
}
.circle-lg {
  font-size: 32px;
  width: 96px;
  height: 96px;
  line-height: 96px;
}
a.circle,
a.circle .icon {
  -webkit-text-decoration: none;
  text-decoration: none;
}
a:hover .circle,
a.circle:hover {
  border-color: #00a2dd;
  border-color: var(--color-interactive-accent);
  color: #0097c7;
  color: var(--color-content-accent);
  -webkit-text-decoration: none;
  text-decoration: none;
}
a:hover .circle.active,
a.circle.active:hover {
  -webkit-text-decoration: none;
  text-decoration: none;
  color: #fff;
}
/* TODO this could be tidier, ideally change the general link behaviour */
.dropdown-menu li a:hover .circle {
  background-color: #ffffff;
  background-color: var(--color-background-screen);
  border-color: #fff;
  color: #37517e;
  color: var(--color-content-primary);
}
.dropdown-menu .disabled a:hover .circle {
  background-color: rgba(134,167,189,0.10196);
  background-color: var(--color-background-neutral);
  border-color: transparent;
}
.circle-inverse {
  background-color: rgba(134,167,189,0.10196);
  background-color: var(--color-background-neutral);
}
.circle-responsive {
  background-color: transparent;
  border: 0;
  border-radius: 0;
  width: 24px;
  width: var(--size-24);
  height: 24px;
  height: var(--size-24);
  line-height: 24px;
  line-height: var(--size-24);
  font-size: 16px;
  overflow: visible;
}
.circle-responsive .icon {
  font-size: 24px;
  line-height: 24px;
}
.circle-responsive.circle-lg {
  border-radius: 50%;
  background-color: #fff;
  font-size: 16px;
  width: 48px;
  height: 48px;
  line-height: 48px;
}
.circle-responsive.circle-lg.circle-inverse {
  background-color: rgba(134,167,189,0.10196);
  background-color: var(--color-background-neutral);
}
@media (min-width: 576px) {
  .circle-responsive {
    border-radius: 50%;
    background-color: #fff;
  }
  .circle-responsive.circle,
  .circle-responsive.circle-sm,
  .circle-responsive.circle-md {
    font-size: 16px;
    width: 48px;
    height: 48px;
    line-height: 48px;
  }
  .circle-responsive.circle-lg {
    font-size: 24px;
    width: 72px;
    height: 72px;
    line-height: 72px;
  }
  .circle-responsive.circle-inverse {
    background-color: rgba(134,167,189,0.10196);
    background-color: var(--color-background-neutral);
  }
}
@media (--screen-md-min) {
  .circle-responsive.circle-md {
    font-size: 24px;
    width: 72px;
    height: 72px;
    line-height: 72px;
  }
  .circle-responsive.circle-lg {
    font-size: 32px;
    width: 96px;
    height: 96px;
    line-height: 96px;
  }
}
.dropdown-menu li > .circle:first-child,
.dropdown-menu li > a > .circle:first-child {
  margin-right: 8px;
  margin-right: var(--size-8);
}
[dir="rtl"] .dropdown-menu li > .circle:first-child,
[dir="rtl"] .dropdown-menu li > a > .circle:first-child {
  margin-left: 8px;
  margin-left: var(--size-8);
  margin-right: 0;
  margin-right: initial;
}
.dropdown-menu li > .circle-sm:first-child,
.dropdown-menu li > a > .circle-sm:first-child {
  margin-right: 12px;
  margin-right: var(--size-12);
}
[dir="rtl"] .dropdown-menu li > .circle-sm:first-child,
[dir="rtl"] .dropdown-menu li > a > .circle-sm:first-child {
  margin-left: 12px;
  margin-left: var(--size-12);
  margin-right: 0;
  margin-right: initial;
}
.btn .circle:first-child {
  margin-right: 8px;
  margin-right: var(--size-8);
}
[dir="rtl"] .btn .circle:first-child {
  margin-left: 8px;
  margin-left: var(--size-8);
  margin-right: 0;
  margin-right: initial;
}
.btn .circle-sm:first-child {
  margin-right: 12px;
  margin-right: var(--size-12);
}
[dir="rtl"] .btn .circle-sm:first-child {
  margin-left: 12px;
  margin-left: var(--size-12);
  margin-right: 0;
  margin-right: initial;
}
.btn .circle .tw-icon,
.dropdown-menu li .circle .tw-icon {
  float: none;
  margin-top: 0;
  margin-left: 0;
  margin-right: 0;
}
[dir="rtl"] .btn .circle .tw-icon,
[dir="rtl"] .dropdown-menu li .circle .tw-icon {
  margin-right: 0;
  margin-left: 0;
  margin-left: initial;
}
[dir="rtl"] .btn .circle .tw-icon,
[dir="rtl"] .dropdown-menu li .circle .tw-icon {
  margin-left: 0;
  margin-right: 0;
  margin-right: initial;
}