body{
  padding-bottom:calc(112px + env(safe-area-inset-bottom, 0px));
}
.time-clock-login{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  min-height:48px;width:100%;padding:.5em 1.2em;border-radius:.5em;
  background:rgb(189,16,224);color:#fff;font-weight:bold;font-size:16px;
  text-align:center;text-decoration:none;line-height:1.5;
}
.time-clock-login svg{width:22px;height:22px;flex:none}
.time-clock-login:hover{background:#a10dbf}
.interpreter-fab{
  position:fixed;right:calc(20px + env(safe-area-inset-right, 0px));
  bottom:calc(20px + env(safe-area-inset-bottom, 0px));z-index:10;
  display:inline-flex;align-items:center;justify-content:center;gap:12px;
  box-sizing:border-box;min-width:196px;min-height:72px;padding:14px 22px;
  border:2px solid #fff;border-radius:20px;background:#2f6d5e;color:#fff;
  font-family:"Carlito",Calibri,system-ui,sans-serif;font-size:22px;font-weight:700;
  line-height:1.2;text-align:center;text-decoration:none;
  box-shadow:0 4px 16px rgba(15,27,51,.3);
}
.interpreter-fab svg{width:32px;height:32px;flex:none}
.interpreter-fab:hover{background:#245448}
.time-clock-login:focus-visible,.interpreter-fab:focus-visible{
  outline:3px solid #f0a25a;outline-offset:4px;
}
@media (max-width:860px){
  .time-clock-login{width:auto;flex:0 0 auto;white-space:nowrap}
  .interpreter-fab{
    right:calc(12px + env(safe-area-inset-right, 0px));
    bottom:calc(12px + env(safe-area-inset-bottom, 0px));
    padding:14px 18px;
  }
}