/* BENEFICIAL_046C_ADMIN_SUPPORT_MOBILE */

/*
  This layer deliberately does not depend on the historical support-bar class.
  JS adds .beneficial-admin-support-compact to the actual support container.
*/
.beneficial-admin-support-compact{
  box-sizing:border-box!important;
  min-height:0!important;
  height:auto!important;
  max-height:none!important;
  width:100%!important;
  margin:12px 0 18px!important;
  padding:10px 12px!important;
  border-radius:16px!important;
  display:grid!important;
  grid-template-columns:minmax(0,1fr) auto!important;
  grid-template-areas:
    "identity actions"
    "meta actions"!important;
  align-items:center!important;
  gap:3px 12px!important;
  overflow:visible!important;
  position:relative!important;
  inset:auto!important;
}

.beneficial-admin-support-compact .beneficial-support-identity{
  grid-area:identity!important;
  min-width:0!important;
  display:flex!important;
  align-items:center!important;
  gap:8px!important;
  flex-wrap:wrap!important;
}

.beneficial-admin-support-compact .beneficial-support-meta{
  grid-area:meta!important;
  min-width:0!important;
  margin:0!important;
  padding:0!important;
  font-size:11px!important;
  line-height:1.25!important;
  opacity:.82!important;
  white-space:normal!important;
}

.beneficial-admin-support-compact .beneficial-support-actions{
  grid-area:actions!important;
  display:flex!important;
  align-items:center!important;
  justify-content:flex-end!important;
  gap:7px!important;
  margin:0!important;
  padding:0!important;
}

.beneficial-admin-support-compact .beneficial-support-actions button,
.beneficial-admin-support-compact .beneficial-support-actions a{
  min-height:36px!important;
  width:auto!important;
  margin:0!important;
  padding:0 11px!important;
  border-radius:11px!important;
  font-size:10px!important;
  line-height:1!important;
  white-space:nowrap!important;
}

@media (max-width: 720px){
  .beneficial-admin-support-compact{
    margin:8px 0 12px!important;
    padding:9px 10px!important;
    grid-template-columns:1fr!important;
    grid-template-areas:
      "identity"
      "meta"
      "actions"!important;
    gap:6px!important;
    border-radius:14px!important;
  }

  .beneficial-admin-support-compact .beneficial-support-identity{
    gap:5px 8px!important;
  }

  .beneficial-admin-support-compact .beneficial-support-identity > *{
    margin:0!important;
  }

  .beneficial-admin-support-compact .beneficial-support-meta{
    font-size:10px!important;
    margin-top:-1px!important;
  }

  .beneficial-admin-support-compact .beneficial-support-actions{
    justify-content:flex-start!important;
    gap:6px!important;
    flex-wrap:wrap!important;
  }

  .beneficial-admin-support-compact .beneficial-support-actions button,
  .beneficial-admin-support-compact .beneficial-support-actions a{
    min-height:34px!important;
    padding:0 10px!important;
    font-size:9px!important;
  }

  /* Do not let the language control sit on top of the page title. */
  .content .top,
  .top{
    padding-right:0!important;
  }

  .content .top > :last-child,
  .top > :last-child{
    flex:0 0 auto!important;
  }
}

@media (max-width: 430px){
  .beneficial-admin-support-compact{
    padding:8px 9px!important;
  }

  .beneficial-admin-support-compact .beneficial-support-actions{
    display:grid!important;
    grid-template-columns:1fr 1fr!important;
    width:100%!important;
  }

  .beneficial-admin-support-compact .beneficial-support-actions button,
  .beneficial-admin-support-compact .beneficial-support-actions a{
    width:100%!important;
    min-width:0!important;
  }
}