ui/login/account_picker/chromeos_user_pod_row.css

/* Copyright 2014 The Chromium Authors. All rights reserved.
 * Use of this source code is governed by a BSD-style license that can be
 * found in the LICENSE file.
 *
 * This is the stylesheet used by user pods row of account picker UI.
 */

podrow {
  overflow: visible;
}

/* Hide the pod row while images are loading. */
podrow.images-loading {
  visibility: hidden;
}

pin-keyboard {
  display: block;
}

.pod {
  -webkit-tap-highlight-color: transparent;
  border-radius: 2px;
  cursor: pointer;
  opacity: 0.54;
  outline: none;
  position: absolute;
  z-index: 0;
}

.account-picker.flying-pods .pod {
  transition: all 180ms;
}

.pod .pin-container {
  position: absolute;
  width: 234px;
  z-index: 3;
}

.pod .pin-container.pin-enabled {
  left: 36px;
  opacity: 1;
  top: 300px;
  transition: opacity 200ms ease-in-out 180ms;
  visibility: visible;
}

.pod .pin-container.pin-disabled {
  opacity: 0; /* Opacity is set to 1 after the pin element is loaded. */
  transition: none;
  visibility: hidden; /* Needed because pin-keyboard's offsetHeight is
                         checked to determine if loaded. */
  z-index: -1;
}

.pod.faded {
  opacity: .75;
}

.pod.focused {
  cursor: default;
  opacity: 1;
  z-index: 1;
}

.pod.focused[auth-type='userClick'] {
  cursor: pointer;
}

.pod.hovered {
  opacity: 1;
}

.user-image-pane {
  height: 96px;
  left: 105px;
  position: absolute;
  top: 54px;
  transition: height 180ms ease-in-out,
              left 180ms ease-in-out,
              right 180ms ease-in-out,
              top 180ms ease-in-out,
              width 180ms ease-in-out;
  width: 96px;
  z-index: 3;
}

html[dir=rtl] .user-image-pane {
  left: auto;
  right: 105px;
}

.user-image-container {
  align-items: center;
  display: flex;
  height: 100%;
  justify-content: center;
  width: 100%;
}

.pod .user-image {
  border-radius: 50%;
  flex: none;
  height: 100%;
  width: 100%;
}

.pod .user-image.switch-image-animation {
  animation: switch-image 180ms;
}

.pod.hovered .user-image {
  display: none;
}

.pod.focused .user-image {
  display: none;
}

.pod .animated-image {
  display: none;
}

.pod.hovered .animated-image {
  display: block;
}

.pod.focused .animated-image {
  display: block;
}

.pod .badge-container {
  background: #FFF;
  border-radius: 50%;
  bottom: 0;
  display: none;
  height: 27px;
  position: absolute;
  right: 0;
  width: 27px;
}

.pod .badge-container iron-icon {
  --iron-icon-height: 25px;
  --iron-icon-width: 25px;
  display: none;
  padding: 0;
}

.pod.legacy-supervised .badge-container,
.pod.legacy-supervised .legacy-supervised-badge {
  display: block;
}

/* TODO(noms): Refactor this out into a CrOS-specific file and simplify the
 style rule once it is included on CrOS only. crbug.com/397638 */
html:not([screen=login-add-user]) .pod .user-image {
  max-height: 160px;
  max-width: 160px;
  position: absolute;
}

html:not([screen=login-add-user]) .pod.focused .user-image {
  opacity: 1;
}

.pod.multiprofiles-policy-applied .user-image {
  -webkit-filter: grayscale(100%);
}

.main-pane {
  z-index: 2;
}

.name-container {
  display: flex;
  position: absolute;
  top: 182px;
}

.pod.focused:not(.multiprofiles-policy-applied):not(.public-account) .auth-container {
  display: flex;
  height: 40px;
  left: 51px;
  position: absolute;
  top: 236px;
/* On chromeos we extend the width to cover the padding on the user pods. This
 is so the submit button on chromeos can extend onto the padding as shown on
 mocks. */
<if expr="not chromeos">
  width: 160px;
</if>
<if expr="chromeos">
  width: 204px;
</if>
}

html[dir=rtl] .pod.focused:not(.multiprofiles-policy-applied):not(.public-account) .auth-container {
  left: auto;
  right: 51px;
}

.auth-container .submit-button[disabled] {
  opacity: 0.34;
}

.auth-container .submit-button {
  --cr-icon-button--icon-size: 20px;
  --cr-icon-button-size: 20px;
  --cr-icon-button-color: white;
  margin: 15px 0 5px 0;
  opacity: 1;
}

.auth-container .custom-icon-shown .submit-button {
  margin: 11px 0 5px 0;
}

.name-container {
  transition: transform 180ms;
}

.pod.focused .name-container {
  display: flex;
}

.pod.focused.multiprofiles-policy-applied .name-container {
  display: flex;
}

.name {
  color: #FFFFFF;
  flex: auto;
  font: 24px Roboto;
  font-weight: 300; /* roboto-light */
  outline: none;
  overflow: hidden;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.auth-container,
.password-entry-container,
.reauth-hint-container {
  display: none;
}

.input-line {
  display: none;
  height: 1px;
  opacity: 0.34;
  position: absolute;
  stroke: #FFFFFF;
  stroke-width: 1px;
  top: 40px;
  width: 204px;
}

.input-present .input-line {
  opacity: 1;
}

.pod[is-active-directory] .reauth-warning {
  display: none;
}

.pod[auth-type='offlinePassword'].focused .password-entry-container,
.pod[auth-type='forceOfflinePassword'].focused .password-entry-container,
.pod[auth-type='offlinePassword'].focused .input-line,
.pod[auth-type='forceOfflinePassword'].focused .input-line {
  display: flex;
  flex: auto;
}

.password-container {
  height: 34px;
  margin-top: 6px;
  width: 184px; /* Input line width - Submit button width */
}

.capslock-on .password-container {
  width: 164px; /* Input line width - Caps lock icon width */
}

.custom-icon-shown .password-container {
  -webkit-padding-start: 8px;
  height: 39px;
  margin-top: 1px;
  width: 149px; /* Input line width -
                   (Submit button width + Custom icon width) */
}

.capslock-on .custom-icon-shown .password-container {
  width: 129px; /* Input line width -
                   (Submit button width + Caps lock icon width +
                   Custom icon width) */
}

.pod input[type='password'] {
  background-color: transparent;
  border: none;
  color: rgba(255, 255, 255, .67);
  font-family: "Roboto";
  font-size: 16px;
  height: 100%;
  letter-spacing: 6px;
  padding: 0;
  width: 100%;
}

.pod input[type='password']::-webkit-input-placeholder {
  color: rgba(255, 255, 255, .67);
  font-size: 13px;
  letter-spacing: 0;
}

.capslock-hint-container {
  display: none;
}

<if expr="chromeos">
.capslock-on .capslock-hint-container {
  display: block;
  flex: none;
  height: 40px;
  position: relative;
  width: 20px;
}
</if>

.capslock-hint {
  --iron-icon-height: 22px;
  --iron-icon-width: 22px;
  opacity: 0.34;
  padding: 13px 0 5px;
}

.custom-icon-shown .capslock-hint {
  padding: 12px 0 6px;
}

.input-present .capslock-hint {
  opacity: 1;
}

.password-label,
.signin-transition-container {
  display: none;
}

.pod[auth-type='userClick']:not(.signing-in) .password-label,
.pod[auth-type='userClick'].signing-in .signin-transition-container {
  color: grey;
  display: block;
  flex: auto;
  margin-top: 11px;
  outline: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.custom-icon {
  -webkit-margin-end: 0;
  -webkit-margin-start: auto;
  background-position: center;
  background-repeat: no-repeat;
  flex: none;
  height: 27px;
  margin: 8px 0;
  width: 27px;
}

.custom-icon.faded {
  transition: opacity 200ms ease-in-out, visibility 200ms ease-in-out;
}

.custom-icon-hardlocked {
  background-image: url(chrome://theme/IDR_EASY_UNLOCK_HARDLOCKED);
}

.custom-icon-hardlocked.icon-with-tooltip:hover {
  background-image: url(chrome://theme/IDR_EASY_UNLOCK_HARDLOCKED_HOVER);
}

.custom-icon-hardlocked.interactive-custom-icon:active {
  background-image: url(chrome://theme/IDR_EASY_UNLOCK_HARDLOCKED_PRESSED);
}

.custom-icon-locked {
  background-image: url(chrome://theme/IDR_EASY_UNLOCK_LOCKED);
}

.custom-icon-locked.icon-with-tooltip:hover {
  background-image: url(chrome://theme/IDR_EASY_UNLOCK_LOCKED_HOVER);
}

.custom-icon-locked.interactive-custom-icon:active {
  background-image: url(chrome://theme/IDR_EASY_UNLOCK_LOCKED_PRESSED);
}

.custom-icon-locked-to-be-activated {
  background-image:
      url(chrome://theme/IDR_EASY_UNLOCK_LOCKED_TO_BE_ACTIVATED);
}

.custom-icon-locked-to-be-activated.icon-with-tooltip:hover {
  background-image:
      url(chrome://theme/IDR_EASY_UNLOCK_LOCKED_TO_BE_ACTIVATED_HOVER);
}

.custom-icon-locked-to-be-activated.interactive-custom-icon:active {
  background-image:
      url(chrome://theme/IDR_EASY_UNLOCK_LOCKED_TO_BE_ACTIVATED_PRESSED);
}

.custom-icon-locked-with-proximity-hint {
  background-image:
      url(chrome://theme/IDR_EASY_UNLOCK_LOCKED_WITH_PROXIMITY_HINT);
}

.custom-icon-locked-with-proximity-hint.icon-with-tooltip:hover {
  background-image:
      url(chrome://theme/IDR_EASY_UNLOCK_LOCKED_WITH_PROXIMITY_HINT_HOVER);
}

.custom-icon-locked-with-proximity-hint.interactive-custom-icon:active {
  background-image:
      url(chrome://theme/IDR_EASY_UNLOCK_LOCKED_WITH_PROXIMITY_HINT_PRESSED);
}

.custom-icon-unlocked {
  background-image: url(chrome://theme/IDR_EASY_UNLOCK_UNLOCKED);
}

.custom-icon-unlocked.icon-with-tooltip:hover {
  background-image: url(chrome://theme/IDR_EASY_UNLOCK_UNLOCKED_HOVER);
}

.custom-icon-unlocked.interactive-custom-icon:active {
  background-image: url(chrome://theme/IDR_EASY_UNLOCK_UNLOCKED_PRESSED);
}

/**
 * Preloads resources for custom icon. Without this, the resources will be
 * loaded when CSS properties using them are first applied, which has visible
 * delay and may cause a short white flash when the icon background changes.
 */
.custom-icon::after {
  content:
    url(chrome://theme/IDR_EASY_UNLOCK_HARDLOCKED)
    url(chrome://theme/IDR_EASY_UNLOCK_HARDLOCKED_HOVER)
    url(chrome://theme/IDR_EASY_UNLOCK_HARDLOCKED_PRESSED)
    url(chrome://theme/IDR_EASY_UNLOCK_LOCKED)
    url(chrome://theme/IDR_EASY_UNLOCK_LOCKED_HOVER)
    url(chrome://theme/IDR_EASY_UNLOCK_LOCKED_PRESSED)
    url(chrome://theme/IDR_EASY_UNLOCK_LOCKED_TO_BE_ACTIVATED)
    url(chrome://theme/IDR_EASY_UNLOCK_LOCKED_TO_BE_ACTIVATED_HOVER)
    url(chrome://theme/IDR_EASY_UNLOCK_LOCKED_TO_BE_ACTIVATED_PRESSED)
    url(chrome://theme/IDR_EASY_UNLOCK_LOCKED_WITH_PROXIMITY_HINT)
    url(chrome://theme/IDR_EASY_UNLOCK_LOCKED_WITH_PROXIMITY_HINT_HOVER)
    url(chrome://theme/IDR_EASY_UNLOCK_LOCKED_WITH_PROXIMITY_HINT_PRESSED)
    url(chrome://theme/IDR_EASY_UNLOCK_UNLOCKED)
    url(chrome://theme/IDR_EASY_UNLOCK_UNLOCKED_HOVER)
    url(chrome://theme/IDR_EASY_UNLOCK_UNLOCKED_PRESSED);
  display: none;
}

.custom-icon-spinner {
  animation: easy-unlock-spinner-animation 2s steps(45) infinite;
  background-image: url(chrome://theme/IDR_EASY_UNLOCK_SPINNER);
}

@keyframes easy-unlock-spinner-animation {
  from { background-position: 0 }
  to { background-position: -1215px }
}

.interactive-custom-icon {
  cursor: pointer;
}

.pod[auth-type='onlineSignIn'] .custom-icon-container {
  display: none;
}

.fingerprint-icon-container,
.custom-icon-container {
  display: flex;
  flex: none;
  flex-direction: column;
  height: 43px;
  width: 27px;
}

.pod[auth-type='onlineSignIn'] .reauth-hint-container {
  display: flex;
  justify-content: center;
  margin-top: 8px;
  width: 100%;
}

.reauth-hint-container .reauth-warning {
  -webkit-mask-image: url(../../../ui/webui/resources/images/warning.svg);
  -webkit-mask-position: center;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: 20px;
  background-color: #E67C73;
  width: 24px;
}

.reauth-hint-container .reauth-name-hint {
  align-self: center;
  color: #E67C73;
  font-size: 12px;
  outline: none;
  overflow: hidden;
  padding: 0 6px;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.user-type-icon-area {
  background-color: white;
  border-radius: 2px;
  position: absolute;
  top: 0;
}

.action-box-area {
  opacity: 0;
  outline: none;
  transition: opacity 100ms;
  z-index: 4;
}

.action-box-area:focus,
.action-box-area.hovered,
.action-box-area.active,
.action-box-area.forced {
  opacity: 1;
}

.action-box-button {
  --cr-icon-button-icon-size: 24px;
  --cr-icon-button-size: 24px;
  margin-inline-end: 0;
  margin-inline-start: 8px;
  margin-top: 3px;
}

.action-box-button.ripple-circle {
  background: #FFF;
  border-radius: 50%;
  opacity: .08;
  position: absolute;
  transform: scale(0);
}

.action-box-area.active .action-box-button.ripple-circle {
  animation: ripple 360ms;
  transform: scale(1);
}

@keyframes ripple {
  0% { transform: scale(0); }
  30% { transform: scale(1); }
  100% { transform: scale(1); }
}

.action-box-area .action-box-icon {
  /* overriden in chrome/browser/resources/user_manager/user_manager.css */
  display: none;
}

.user-image-gradient-area {
  /* overriden in chrome/browser/resources/user_manager/user_manager.css */
  display: none;
}

.user-type-icon-area {
  left: 0;
  z-index: 5;
}

html[dir=rtl] .user-type-icon-area {
  left: auto;
  right: 0;
}

.user-type-icon-image {
  height: 16px;
  margin: 5px;
  width: 16px;
}

.user-type-icon-area.legacySupervised .user-type-icon-image {
  background-image: url(../../webui/resources/images/supervisor_account.svg);
  background-size: 18px;
}

.user-type-icon-area.child .user-type-icon-image {
  background-image: url(../../webui/resources/images/account_child_invert.svg);
  background-size: 18px;
}

.user-type-icon-area.policy .user-type-icon-image {
  background-image: url(../../webui/resources/images/business.svg);
  background-size: 18px;
}

.user-type-icon-area.app .user-type-icon-image {
  background-image: url(chrome://theme/IDR_KIOSK_APP_USER_POD_ICON);
}

.fingerprint-icon-container.hidden {
  display: none;
}

.fingerprint-icon-container.default .fingerprint-icon-image {
  background-image: url(../../webui/resources/images/fingerprint_default.svg);
}

.fingerprint-icon-container.default:hover .fingerprint-icon-image {
  background-image: url(../../webui/resources/images/fingerprint_signin.svg);
}

.fingerprint-icon-container.signin .fingerprint-icon-image {
  background-image: url(../../webui/resources/images/fingerprint_signin.svg);
}

.fingerprint-icon-container.failed .fingerprint-icon-image {
  background-image: url(../../webui/resources/images/icon_error_outline.svg);
}

.action-box-menu {
  display: none;
  position: absolute;
  z-index: 6;
}

.action-box-area.active ~ .action-box-menu {
  -webkit-margin-start: 12px;
  animation: fade-in 180ms;
  background-color: rgba(0, 0, 0, 0.8);
  border-radius: 2px;
  display: flex;
  flex-direction: column;
  font-size: 13px;
  margin-top: 3px;
  width: 220px;
}

.action-box-area.active ~ .action-box-menu.left-edge-offset {
  left: 0 !important;
}

.action-box-area.active ~ .action-box-menu.right-edge-offset {
  right: 0 !important;
}

.action-box-area.active ~ .action-box-menu:not(.menu-moved-up) {
  top: 200px;
}

.action-box-area.active ~ .action-box-menu.menu-moved-up {
  bottom: 207px;
}

.action-box-area.menu-moved-up {
  transform: rotate(180deg);
}

.action-box-menu-title {
  color: #FFFFFF;
  display: flex;
  flex-direction: column;
  padding: 13px 14px 18px;
}

.action-box-menu-title:focus {
  outline-style: none;
}

.action-box-menu-title-name,
.action-box-menu-title-email {
  flex: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.action-box-menu-title-name {
  padding-bottom: 7px;
}

.action-box-menu-title-email {
  opacity: 0.54;
}

.action-box-menu-remove {
  border-top: 0.17px solid rgba(255, 255, 255, .34);
  color: #7BAAF7;
  outline: none;
  padding: 18px 14px;
}

.action-box-menu-remove:focus {
  font-weight: bold;
}

.action-box-remove-user-warning {
  border-top: 0.17px solid rgba(255, 255, 255, .34);
  color: white;
  font-size: 13px;
  line-height: 18px;
  padding: 13px 14px 18px;
}

.action-box-remove-user-warning > div,
.action-box-remove-user-warning > table {
  padding-bottom: 19px;
}

.action-box-remove-non-owner-user-warning-text span.email {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
}

.total-count {
  font-weight: bold;
}

.action-box-remove-user-warning-table-nonsync {
  border-spacing: 0;
  width: 100%;
}

.action-box-remove-user-warning-table td {
  padding: 0;
}

.action-box-remove-user-warning-table-numbers {
  color: #757575;
  text-align: end;
}

/* Hide dialog elements not in a correct category. Only combinations currently
   in use are included here. */
.pod.legacy-supervised .non-sync,
.pod.legacy-supervised .action-box-remove-user-warning-text,
.pod.legacy-supervised .action-box-remove-non-owner-user-warning-text,
.pod:not(.legacy-supervised)
    .action-box-remove-legacy-supervised-user-warning-text,
.pod.synced .non-sync {
  display: none;
}

.user-type-bubble {
  background-color: rgba(0, 0, 0, 0.9);
  border-radius: 4px;
  color: #FFF;
  font-family: "Roboto";
  font-size: 13px;
  left: 36px;
  opacity: 0;
  padding: 17px;
  position: absolute;
  top: 35px;
  transition: all 100ms;
  visibility: hidden;
  width: 200px;
  z-index: 7;
}

html[dir=rtl] .user-type-bubble {
  left: auto;
  right: 36px;
}

.bubble-shown,
.user-type-icon-area.policy:hover ~ .user-type-bubble {
  opacity: 1;
  visibility: visible;
}

.user-type-bubble-header {
  font-weight: bold;
  margin-bottom: 14px;
  text-align: center;
}

/**** Public account user pod rules *******************************************/

.public-account-expanded > div,
.public-account-expanded .pod:not(.expanded) {
  opacity: 0; /* Cannot be replaced with display: none, otherwise the tab
                 indexes of other elements in the pod row will be ignored. */
}

.pod.public-account.expanded {
  animation: fade-in 180ms;
  background-color: rgba(0, 0, 0, 0.56);
  border-radius: 2px;
  height: 324px;
  transition: none;
  width: 622px;
}

.expanded-pane {
  display: none;
}

.pod.public-account.expanded .expanded-pane {
  border-left: 0.17px solid rgba(255, 255, 255, .34);
  color: rgba(255, 255, 255, .87);
  display: block;
  font-family: "Roboto";
  font-size: 13px;
  height: 324px;
  left: 322px;
  overflow: hidden;
  position: absolute;
  top: 0;
  width: 300px;
  z-index: 1;
}

html[dir=rtl] .expanded-pane {
  float: left;
}

.expanded-pane-container {
  margin-left: 28px;
  margin-right: 28px;
}

.reminder {
  margin-top: 20px;
}

.language-and-input-section {
  display: none;
}

.pod.public-account.expanded.advanced .language-and-input-section {
  display: block;
  margin-left: 28px;
  margin-right: 28px;
  margin-top: 37px;
  opacity: 1;
}

.select-with-label {
  display: flex;
  flex-direction: column;
  margin-top: 20px;
}

.language-select-label,
.keyboard-select-label {
  opacity: .34;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 170px;
}

.select-container {
  height: 16px;
  margin-top: 5px;
  width: 178px;
}

.language-select,
.keyboard-select {
  width: 100%;
}

.enter-button {
  flex: none;
}

.pod.public-account .full-name {
  display: none;
  left: 50%;
  position: absolute;
  top: 100%;
  z-index: 3;
}

html[dir=rtl] .pod.public-account .full-name {
  left: auto;
  right: 50%;
}

.pod.public-account .name-container:hover .full-name {
  animation: fade-in 180ms;
  background-color: rgba(0, 0, 0, 0.8);
  border-radius: 2px;
  color: rgba(255, 255, 255, .87);
  display: flex;
  font-size: 13px;
  padding: 8px;
}

.pod .public-account-info-container {
  display: none;
}

.pod.public-account .public-account-info-container {
  display: block;
  position: absolute;
  top: 230px;
}

.public-account-info-container .learn-more {
  --iron-icon-height: 12px;
  --iron-icon-width: 12px;
  display: block;
  opacity: .67;
  padding: 0;
  position: absolute;
}

.public-account-info-container .info {
  -webkit-padding-start: 8px;
  color: rgba(255, 255, 255, .67);
  font-family: "Roboto";
  font-size: 13px;
  overflow: hidden;
  position: absolute;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pod.public-account .button-container {
  background: rgba(255, 255, 255, .17);
  border-radius: 50%;
  display: none;
  height: 40px;
  left: 133px;
  position: absolute;
  top: 59px;
  width: 40px;
}

html[dir=rtl] .pod.public-account .button-container {
  left: auto;
  right: 133px;
}

.pod.public-account .button-container.forced,
.pod.public-account.hovered .button-container,
.pod.public-account.focused .button-container {
  display: block;
}

.pod.public-account.expanded .button-container {
  display: none;
}

.public-account-submit-button {
  --cr-icon-button-color: #FFF;
  opacity: 1;
  margin: 10px 7px 8px 11px;
}

.monitoring-container {
  margin-top: 106px;
}

.advanced .monitoring-container {
  margin-top: 35px;
  transition: margin-top 180ms;
}

.monitoring-learn-more {
  color: #7BAAF7;
  text-decoration: none;
}

.monitoring-learn-more:focus,
.language-and-input:focus {
  font-weight: bold;
  outline: none;
}

.monitoring-dialog-container .cr-dialog-shield {
  background: black;
  opacity: 0.5;
}

.monitoring-dialog-container .cr-dialog-buttons {
  display: none;
}

.monitoring-dialog-container .cr-dialog-frame {
  height: 170px;
  padding: 0px;
  position: relative;
  width: 430px;
}

.monitoring-dialog-container .cr-dialog-close {
  color: grey;
  height: 34px;
  position: absolute;
  top: 0px;
  width: 34px;
}

.monitoring-dialog-container .cr-dialog-title {
  font-size: 16px;
  font-weight: bold;
  left: 20px;
  position: absolute;
  top: 15px;
}

.monitoring-dialog-container .cr-dialog-text {
  color: grey;
  font-size: 13px;
  overflow: visible;
  position: absolute;
  top: 20px;
}

.monitoring-dialog-container .cr-dialog-item {
  -webkit-margin-start: 42px;
  display: list-item;
  margin-bottom: -6px;
}

.language-and-input-container {
  margin-top: 20px;
  flex: none;
}

.language-and-input {
  color: #7BAAF7;
  text-decoration: none;
}

.enter-button-container {
  background-color: #4285F4;
  border-radius: 50%;
  bottom: 28px;
  height: 40px;
  position: absolute;
  right: 28px;
  width: 40px;
}

html[dir=rtl] .enter-button-container {
  left: 28px;
  right: auto;
}

.language-and-input-dropdown {
  -webkit-margin-start: 6px;
  height: 16px;
  padding: 0;
  width: 16px;
}

/* Animations for the animated ellipsis: */
.animated-ellipsis-component0 {
  animation: ellipsis-component0 1.5s infinite;
}

@keyframes ellipsis-component0 {
  0% { opacity: 0; }
  25% { opacity: 1; }
  50% { opacity: 1; }
  75% { opacity: 1; }
  100% { opacity: 0; }
}

.animated-ellipsis-component1 {
  animation: ellipsis-component1 1.5s infinite;
}

@keyframes ellipsis-component1 {
  0% { opacity: 0; }
  25% { opacity: 0; }
  50% { opacity: 1; }
  75% { opacity: 1; }
  100% { opacity: 0; }
}

.animated-ellipsis-component2 {
  animation: ellipsis-component2 1.5s infinite;
}

@keyframes ellipsis-component2 {
  0% { opacity: 0; }
  25% { opacity: 0; }
  50% { opacity: 0; }
  75% { opacity: 1; }
  100% { opacity: 0; }
}

.large-pod {
  height: 346px;
  width: 306px;
}

.pod.pin-enabled .large-pod {
  height: 618px;
}

.pod.public-account.expanded .large-pod {
  left: 8px;
  position: absolute;
  top: 8px;
}

.small-pod {
  height: 74px;
  width: 304px;
}

.small-pod.extra-small {
  height: 60px;
  width: 282px;
}

.small-user-image-container {
  align-items: center;
  height: 74px;
  justify-content: center;
  position: absolute;
  transition: height 180ms ease-in-out,
              left 180ms ease-in-out,
              right 180ms ease-in-out,
              top 180ms ease-in-out,
              width 180ms ease-in-out;
  width: 74px;
}

.small-pod.extra-small .small-user-image-container {
  height: 60px;
  width: 60px;
}

.small-pod-name {
  color: #FFFFFF;
  flex: auto;
  font: 20px Roboto;
  font-weight: 300; /* roboto-light */
  height: 28px;
  left: 90px;
  opacity: 1;
  outline: none;
  overflow: hidden;
  padding: 23px 0;
  position: absolute;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 214px;
}

html[dir=rtl] .small-pod-name {
  left: auto;
  right: 90px;
}

.small-pod.extra-small .small-pod-name {
  left: 76px;
  padding: 16px 0;
  width: 190px;
}

html[dir=rtl] .small-pod.extra-small .small-pod-name {
  left: auto;
  right: 76px;
}

.pod-background {
  background-color: rgba(0, 0, 0, 0.9);
  border-radius: 4px;
  display: none;
  position: absolute;
}

.large-pod .pod-background {
  height: 378px;
  left: -16px;
  top: -16px;
  width: 338px;
}

.small-pod .pod-background {
  height: 90px;
  left: -8px;
  top: -8px;
  width: 320px;
}

.pod.show-pod-background:not(.expanded) .large-pod .pod-background,
.pod.show-pod-background .small-pod:not(.extra-small) .pod-background {
  display: block;
}

@keyframes switch-image {
  from { transform: rotate3d(0, 1, 0, 90deg); }
  to { transform: none; }
}

@keyframes fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}