/* Eyes are a decorative overlay; the approved artwork stays unchanged. */
.logo-symbol{position:relative;display:inline-flex;flex-shrink:0;line-height:0;vertical-align:middle}
.sidebar .panel-heading .brand>.logo-symbol{display:inline-flex}
.avatar .logo-symbol{width:100%;height:100%}
.welcome-symbol{display:block;width:fit-content;margin:0 auto 20px}
.welcome-symbol .welcome-mark{margin:0}
.logo-symbol::before,.logo-symbol::after {
  content:"";
  position:absolute;
  z-index:1;
  top:54%;
  left:39%;
  width:12%;
  height:7.5%;
  border-radius:50%;
  transform:translate(-50%,-50%);
  background:radial-gradient(ellipse,#ffe5ae 0 24%,#dfb353 60%,#957129 100%);
  box-shadow:0 0 4px #e6b95770;
  opacity:0;
  pointer-events:none;
  transition:opacity .18s ease-out;
}
.logo-symbol::after{left:61%}
.logo-answering .logo-symbol::before,.logo-answering .logo-symbol::after{opacity:1}
@media(max-width:600px){.welcome-symbol{margin-bottom:16px}}
@media(max-height:520px){.welcome-symbol{margin-bottom:10px}}
@media(prefers-reduced-motion:reduce){.logo-symbol::before,.logo-symbol::after{transition:none}}

.logo-symbol img{background:transparent!important;border-radius:0!important;padding:0!important}

/* Preserve the original brand mark sizes across screen sizes. */
.brand .brand-mark{width:56px;height:56px}
.topbar .brand .brand-mark{width:52px;height:52px}
.welcome-symbol .welcome-mark{width:176px;height:176px}
@media(max-width:600px){.topbar .brand .brand-mark{width:50px;height:50px}.welcome-symbol .welcome-mark{width:144px;height:144px}}
@media(max-width:360px){.topbar .brand .brand-mark{width:46px;height:46px}}
@media(max-height:520px){.welcome-symbol .welcome-mark{width:88px;height:88px}}