* {
  margin:0;
  padding:0;
  box-sizing:border-box
}
@font-face {
  font-family:"NunitoSansHosted";
  src:url("../font/NunitoSans-Regular.ttf");
  font-weight:400
}
@font-face {
  font-family:"NunitoSansHosted";
  src:url("../font/NunitoSans-ExtraBold.ttf");
  font-weight:800
}
html,
body {
  font-family:"NunitoSansHosted",sans-serif;
  font-size:18px;
  color:#000
}
body {
  position:relative;
  min-height:100vh;
  background-image:url("../img/background.jpg");
  background-repeat:no-repeat;
  background-size:cover;
  background-position:50% 50%;
  display:flex;
  flex-direction:column
}
body>div {
  padding-bottom:90px
}
@media(prefers-color-scheme: dark) {
  html:not(.invert) body {
    color:#fff !important
  }
  html:not(.invert) a {
    background-image:linear-gradient(0deg, #FFF, #FFF) !important;
    color:#fff !important
  }
  html:not(.invert) .button--secondary {
    background-image:none !important;
    background-color:#464646 !important;
    color:#fff !important
  }
  html:not(.invert) .button--secondary:hover {
    background-color:#707070 !important;
    color:#fff !important
  }
  html:not(.invert) .button--secondary:active,
  html:not(.invert) .button--secondary:focus {
    background-color:#707070 !important;
    box-shadow:0 0 3px #707070 !important;
    color:#fff !important
  }
  html:not(.invert) .button--secondary--active {
    background-image:linear-gradient(135deg, #464646 25%, transparent 25%, transparent 50%, #464646 50%, #464646 75%, transparent 75%, transparent)
  }
  html:not(.invert) .button--secondary--active:active,
  html:not(.invert) .button--secondary--active:focus,
  html:not(.invert) .button--secondary--active:hover {
    background-image:linear-gradient(135deg, #000 25%, transparent 25%, transparent 50%, #000 50%, #000 75%, transparent 75%, transparent)
  }
  html:not(.invert) header {
    background-color:#181818 !important;
    color:#fff !important
  }
  html:not(.invert) .notice--warning {
    background-image:url(../img/privacy_tip-24px-w.svg) !important
  }
  html:not(.invert) #changeTheme {
    background-image:url("../img/icon-sun.svg") !important
  }
  html:not(.invert) #changeTheme:hover {
    background-image:url("../img/icon-sun-hover.svg") !important
  }
  html:not(.invert) ul.language-selection span.currentLang {
    background-image:url("../img/keyboard_arrow_down-24px-w.svg") !important
  }
  html:not(.invert) ul.language-selection ul a {
    background-image:none !important;
    color:#000 !important
  }
  html:not(.invert) .stacked-input--text>input {
    background-color:#181818 !important;
    border:1px solid #f7f6f6 !important;
    color:#fff !important
  }
  html:not(.invert) .stacked-input--text>input::placeholder {
    color:rgba(255,255,255,.45) !important
  }
  html:not(.invert) .stacked-input--text>input:active,
  html:not(.invert) .stacked-input--text>input:focus {
    border:1px solid #ffd500 !important;
    box-shadow:0 0 3px #ffd500;
    outline:none
  }
  html:not(.invert) .stacked-input--text>input~label {
    background-color:#181818 !important;
    color:#fff !important
  }
  html:not(.invert) main {
    background-color:rgba(0,0,0,.3)
  }
  html:not(.invert) main .content-wrapper--box {
    background-color:#181818 !important;
    color:#fff !important
  }
  html:not(.invert) .divider::before,
  html:not(.invert) .divider::after {
    background-color:#fff !important
  }
}
@media(prefers-color-scheme: dark)and (max-width: 467px) {
  html:not(.invert) body {
    background-color:#272727
  }
  html:not(.invert) main {
    background-color:transparent
  }
}
@media(prefers-color-scheme: light) {
  html.invert body {
    color:#fff !important
  }
  html.invert a {
    background-image:linear-gradient(0deg, #FFF, #FFF) !important;
    color:#fff !important
  }
  html.invert .button--secondary {
    background-image:none !important;
    background-color:#464646 !important;
    color:#fff !important
  }
  html.invert .button--secondary:hover {
    background-color:#707070 !important;
    color:#fff !important
  }
  html.invert .button--secondary:active,
  html.invert .button--secondary:focus {
    background-color:#707070 !important;
    box-shadow:0 0 3px #707070 !important;
    color:#fff !important
  }
  html.invert .button--secondary--active {
    background-image:linear-gradient(135deg, #464646 25%, transparent 25%, transparent 50%, #464646 50%, #464646 75%, transparent 75%, transparent)
  }
  html.invert .button--secondary--active:active,
  html.invert .button--secondary--active:focus,
  html.invert .button--secondary--active:hover {
    background-image:linear-gradient(135deg, #000 25%, transparent 25%, transparent 50%, #000 50%, #000 75%, transparent 75%, transparent)
  }
  html.invert header {
    background-color:#181818 !important;
    color:#fff !important
  }
  html.invert .notice--warning {
    background-image:url(../img/privacy_tip-24px-w.svg) !important
  }
  html.invert #changeTheme {
    background-image:url("../img/icon-sun.svg") !important
  }
  html.invert #changeTheme:hover {
    background-image:url("../img/icon-sun-hover.svg") !important
  }
  html.invert ul.language-selection span.currentLang {
    background-image:url("../img/keyboard_arrow_down-24px-w.svg") !important
  }
  html.invert ul.language-selection ul a {
    background-image:none !important;
    color:#000 !important
  }
  html.invert .stacked-input--text>input {
    background-color:#181818 !important;
    border:1px solid #f7f6f6 !important;
    color:#fff !important
  }
  html.invert .stacked-input--text>input::placeholder {
    color:rgba(255,255,255,.45) !important
  }
  html.invert .stacked-input--text>input:active,
  html.invert .stacked-input--text>input:focus {
    border:1px solid #ffd500 !important;
    box-shadow:0 0 3px #ffd500;
    outline:none
  }
  html.invert .stacked-input--text>input~label {
    background-color:#181818 !important;
    color:#fff !important
  }
  html.invert main {
    background-color:rgba(0,0,0,.3)
  }
  html.invert main .content-wrapper--box {
    background-color:#181818 !important;
    color:#fff !important
  }
  html.invert .otp-device--selector>label>input:checked~span>span {
    color:#FFF
  }
}
@media(prefers-color-scheme: light)and (max-width: 467px) {
  html.invert body {
    background-color:#272727
  }
  html.invert main {
    background-color:transparent
  }
}
h1 {
  font-size:32px;
  font-weight:800
}
h2 {
  font-size:24px;
  font-weight:800
}
h3 {
  font-size:20px;
  font-weight:800
}
h4 {
  font-size:20px;
  font-weight:400
}
h5 {
  font-size:14px;
  font-weight:400
}
main {
  min-height:100vh;
  z-index:3;
  padding:64px 0 76px 0
}
footer {
  height:60px;
  position:absolute;
  bottom:0;
  width:100%;
  font-size:14px;
  background:#000;
  padding:0 16px;
  box-sizing:border-box;
  color:#fff;
  z-index:3
}
footer>div {
  position:relative;
  bottom:0;
  height:60px
}
footer .footer--links-container a {
  color:#fff;
  background-image:linear-gradient(0deg, #FFF, #FFF);
  background-size:100% 1px;
  background-position:right 0 bottom 0
}
footer .footer--links-container a:hover,
footer .footer--links-container a:focus {
  background-position:left 0 bottom 0;
  background-size:100% 0px
}
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance:none;
  margin:0
}
input[type=number] {
  -moz-appearance:textfield
}
header,
nav,
main,
section,
footer {
  display:block
}
a.oldOne {
  background-image:linear-gradient(0deg, #FFD500, #FEE547);
  background-repeat:no-repeat;
  transition:background-size .4s ease,color .4s ease,fill .4s ease;
  background-position:left 0 bottom 0;
  background-size:100% 3px;
  text-decoration:none;
  color:#000
}
a.oldOne:hover,
a.oldOne:focus {
  background-size:0 3px;
  background-position:right 0 bottom 0
}
a {
  background-image:linear-gradient(0deg, #000, #000);
  background-repeat:no-repeat;
  transition:background-size .2s;
  background-position:left 0 bottom 0;
  background-size:100% 1px;
  text-decoration:none;
  color:#000
}
a:hover,
a:focus {
  background-size:100% 0
}
.signInAccountHint {
  margin-top:24px;
  font-size:14px
}
.button {
  width:100%;
  -webkit-appearance:none;
  -moz-appearance:none;
  appearance:none;
  min-height:50px;
  display:flex;
  justify-content:center;
  align-items:center;
  font-size:18px;
  padding:3px 7px;
  box-sizing:border-box;
  background-image:none;
  border:none;
  outline:none;
  border-radius:0;
  cursor:default;
  text-align:center;
  transition:border-color ease-in-out .2s,background-color ease-in-out .2s,box-shadow ease-in-out .2s
}
.button--primary {
  background-color:#ffd500;
  color:#000
}
.button--primary:hover {
  background-color:#fee547;
  color:#000
}
.button--primary:active,
.button--primary:focus {
  background-color:#fee547;
  color:#000;
  box-shadow:0 0 3px #ffd500;
  outline:none
}
.button:disabled, .disabled {
  opacity:0.5;
  pointer-events: none;
  cursor: default;
}
.button--primary--active {
  animation:animate-stripes .6s linear infinite;
  animation-direction:normal;
  animation-duration:1.1s;
  background-size:60px 60px;
  background-image:linear-gradient(135deg, #FFD500 25%, transparent 25%, transparent 50%, #FFD500 50%, #FFD500 75%, transparent 75%, transparent)
}
.button--primary--active:active,
.button--primary--active:focus,
.button--primary--active:hover {
  background-image:linear-gradient(135deg, #FFD500 25%, transparent 25%, transparent 50%, #FFD500 50%, #FFD500 75%, transparent 75%, transparent)
}
.button--secondary {
  background-color:#000;
  color:#fff;
}
.button--secondary:hover {
  background-color:#464646;
  color:#fff
}
.button--secondary:active,
.button--secondary:focus {
  background-color:#464646;
  box-shadow:0 0 3px #464646;
  outline:none;
  color:#fff
}
.button--secondary--active {
  animation:animate-stripes .6s linear infinite;
  animation-direction:normal;
  animation-duration:1.1s;
  background-size:60px 60px;
  background-image:linear-gradient(135deg, #464646 25%, transparent 25%, transparent 50%, #464646 50%, #464646 75%, transparent 75%, transparent)
}
.button--secondary--active:active,
.button--secondary--active:focus,
.button--secondary--active:hover {
  background-image:linear-gradient(135deg, #000 25%, transparent 25%, transparent 50%, #000 50%, #000 75%, transparent 75%, transparent)
}
@keyframes animate-stripes {
  0% {
    background-position:0 0
  }
  100% {
    background-position:60px 0
  }
}
header {
  position:absolute;
  top:0;
  left:0;
  width:100%;
  z-index:4;
  font-size:14px;
  padding:0 16px;
  font-weight:bold;
  line-height:48px;
  background-color:#fff;
  color:#000
}
header>div.header--top>div {
  display:flex;
  justify-content:flex-end;
  align-items:center
}
header>div.header--top>div>.changeTheme {
  display:flex;
  height:100%
}
header>div.header--top>div>.changeTheme>#changeTheme {
  padding:7px;
  box-sizing:border-box;
  margin-right:12px;
  background:transparent;
  border:none;
  width:32px;
  background-image:url("../img/icon-moon.svg");
  background-position:50% 50%;
  background-repeat:no-repeat;
  background-size:24px 24px;
  height:32px;
  cursor:pointer
}
header>div.header--top>div>.changeTheme>#changeTheme:hover {
  background-image:url("../img/icon-moon-hover.svg")
}
header>div.header--top>div>ul {
  display:inline-block;
  list-style:none
}
header>div.header--top>div>ul>li {
  position:relative
}
header>div.header--top>div>ul>li:last-child {
  padding-right:0
}
header>div.header--top>div>ul>li:hover>ul {
  display:block
}
header>div.header--top>div>ul>li>ul {
  display:none;
  position:absolute
}
.totp {
  margin:1em 0
}
.totp--key {
  font-size:1.2em;
  font-family:monospace;
  max-width:235px
}
ol.data-list>li {
  margin-left:1em !important;
  margin-top:1em
}
ol.data-list>li:first-child {
  margin-top:auto
}
ul.oauth-data-list,
ol.data-list {
  margin:.5em 0;
  font-size:14px
}
ul.oauth-data-list li,
ul.oauth-data-list ul li,
ol.data-list li,
ol.data-list ul li {
  padding:3px;
  margin-left:2em
}
ul.oauth-data-list img,
ol.data-list img {
  max-width:150px;
  max-height:150px
}
p {
  line-height:1.5
}
.text {
  line-height:1.5
}
.text--bold {
  font-weight:bold
}
.notice {
  background-position:0 0;
  background-repeat:no-repeat;
  padding-left:30px;
  box-sizing:border-box;
  margin:1em 0
}
.notice--small {
  font-size:.9em
}
.notice--warning {
  background-image:url("../img/privacy_tip-24px.svg");
  font-size:14px
}
ul.language-selection>li>span.currentLang {
  padding:0 27px 0 .5em;
  display:inline-block;
  cursor:pointer;
  background-image:url("../img/keyboard_arrow_down-24px.svg");
  background-position:100% 50%;
  background-repeat:no-repeat
}
ul.language-selection>li>ul {
  list-style:none;
  background-color:#ffd500;
  position:absolute;
  right:0
}
ul.language-selection>li>ul>li {
  text-align:center;
  height:47px;
  display:flex;
  align-items:center;
  justify-content:center
}
ul.language-selection>li>ul>li>a {
  padding:0 16px;
  display:inline-block;
  width:100%;
  height:100%;
  background-image:none
}
ul.language-selection>li>ul>li>a:hover {
  background-color:#fee547
}
div.indefinite-progress-bar {
  margin-top:1em;
  height:11px;
  width:100%;
  position:relative;
  border:1px solid #ffd500;
  animation:animate-stripes .6s linear infinite;
  animation-direction:normal;
  animation-duration:1.1s;
  background-size:60px 60px;
  background-image:linear-gradient(135deg, #FFD500 25%, transparent 25%, transparent 50%, #FFD500 50%, #FFD500 75%, transparent 75%, transparent)
}
.divider {
  display: flex;
  align-items: center;
  margin-top: 8px;
  font-size: 14px;
}
.divider::before,
.divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background-color:#000
}
.divider::before {
  margin-right: 10px
}
.divider::after {
  margin-left: 10px
}
.stacked-input {
  position:relative
}
.stacked-input>div {
  margin:24px 0 0 0
}
.stacked-input>button {
  padding:12px 7px;
  margin:24px 0 0 0
}
.stacked-input--double-button>div {
  float:right;
  display:inline;
  box-sizing:border-box;
  width:50%;
  padding:0 3px
}
.stacked-input--double-button>div:first-child {
  padding-right:0
}
.stacked-input--double-button>div:last-child {
  padding-left:0
}
.stacked-input--double-button>div>input {
  width:100%
}
.stacked-input--double-button:after {
  content: "";
  display: table;
  clear: both;
}
.stacked-input--double-button .button--secondary {
  min-height:50px
}
.stacked-input--text {
  position:relative
}
.stacked-input--text>input {
  display:block;
  width:100%;
  height:50px;
  padding:0 8px 0 15px;
  box-sizing:border-box;
  background-color:#fff;
  background-image:none;
  border:1px solid #000;
  border-radius:0px;
  z-index:1;
  font-size:18px;
  transition:border-color ease-in-out .2s,box-shadow ease-in-out .2s
}
.stacked-input--text>input::placeholder {
  font-family:"NunitoSansHosted";
  font-weight:400;
  color:#a2a2a2
}
.stacked-input--text>input:not(:placeholder-shown)~label {
  opacity:1
}
.stacked-input--text>input:active,
.stacked-input--text>input:focus {
  border:1px solid #ffd500 !important;
  box-shadow:0 0 3px #ffd500;
  outline:none
}
.stacked-input--text>input~label {
  display:inline-block;
  max-width:100%;
  margin-bottom:5px;
  box-sizing:border-box;
  top:-10px;
  font-size:.9em;
  left:6px;
  z-index:2;
  opacity:0;
  background-color:#fff;
  position:absolute;
  padding:0 5px 0 5px;
  text-overflow:ellipsis;
  white-space:nowrap;
  overflow:hidden;
  transition:opacity .2s
}
.stacked-input--provider-list {
  list-style:none
}
.stacked-input--provider-list>li {
  margin-top:8px
}
main {
  display:flex;
  position:relative;
  align-items:center;
  justify-content:center
}
main .content-wrapper {
  position:relative
}
main .content-wrapper--error {
  background-color:rgba(226,46,33,.07);
  color:#ff0010;
  font-size:14px;
  margin-bottom:24px
}
main .content-wrapper--error>div,.content-wrapper--error>h4 {
  border-left:2px solid #e22e21;
  padding:16px 7px;
  max-width:400px;
  box-sizing:border-box
}
main .content-wrapper .error-description~div {
  margin-top:24px
}
main .content-wrapper--single {
  max-width:464px;
  box-sizing:border-box
}
main .content-wrapper--box {
  box-shadow:0 0 11px 0 rgba(0,0,0,.51);
  background-color:#fff;
  color:#000;
  padding:32px;
  position:relative
}
main .content-wrapper--box>div.content-wrapper--forms {
  display:flex
}
main .content-wrapper--box>div.content-wrapper--forms>section {
  width:400px;
  padding-right:32px;
  padding-left:32px;
  box-sizing:content-box
}
main .content-wrapper--box>div.content-wrapper--forms>section:first-child {
  padding-left:0
}
main .content-wrapper--box>div.content-wrapper--forms>section:last-child {
  padding-right:0
}
main .content-wrapper--logo {
  min-width:400px;
  position:relative;
  height:65px;
  background-image:url("../img/logo.png");
  background-position:100% 0%;
  background-repeat:no-repeat;
  display:flex;
  margin-bottom:24px
}
main .content-wrapper--logo h1 {
  align-self:flex-end
}
main .content-wrapper--headline {
  border-bottom:10px;
  overflow:hidden;
  margin-bottom:24px
}
main .content-wrapper--headline:after {
  background-image:linear-gradient(0deg, #FFD500, #FFD500);
  content:" ";
  display:block;
  height:10px;
  background-size:100% 100%;
  position:relative
}
main .content-wrapper--headline-indefinite:after {
  animation:indeterminateAnimation2 2s infinite linear
}
main .content-wrapper--headline h2 {
  max-width:400px;
  overflow-wrap:break-word
}
@keyframes indeterminateAnimation {
  0% {
    transform:scaleX(0)
  }
  40% {
    transform:scaleX(0.4)
  }
  100% {
    transform:scaleX(1)
  }
}
@keyframes indeterminateAnimation2 {
  from {
    width:5%;
    left:-5%
  }
  to {
    width:100%;
    left:130%
  }
}
main .content-wrapper--extra {
  width:464px;
  box-sizing:border-box;
  padding-top:24px;
  font-size:14px;
  text-align:center;
  margin:0 auto
}
main .login-container--forms {
  border-top:3px solid #ccc;
  border-bottom:3px solid #ccc;
  margin-top:1em;
  margin-bottom:1em;
  padding-top:1em;
  padding-bottom:1em
}
main .login-container--forms>div>section {
  padding:1em;
  width:340px;
  display:inline-block;
  text-align:left;
  vertical-align:top;
  margin-right:1em;
  margin-left:1em;
  background-color:#fff
}
main .login-container--forms>div>section:first-child {
  margin-left:0
}
main .login-container--forms>div>section:last-child {
  margin-right:0
}
main .login-container--login-error {
  padding-bottom:1em
}
main .login-container--login-error>div {
  color:#e22e21;
  display:inline-block;
  margin:0 auto;
  padding:3px 0;
  background-image:url("../img/error_outline-24px.svg");
  background-repeat:no-repeat;
  background-position:0 50%
}
main .login-container--login-error>div p {
  display:inline-block;
  padding-left:30px
}
main .login-container--login-information {
  padding-bottom:1em
}
main .login-container--login-information>div {
  font-weight:bold;
  display:inline-block;
  margin:0 auto;
  padding:3px 0;
  background-image:url("../img/privacy_tip-24px.svg");
  background-repeat:no-repeat;
  background-position:0 50%
}
main .login-container--login-information>div p {
  display:inline-block;
  padding-left:30px
}
main .login-container--form-primary {
  border:8px solid #ffd500
}
main .login-container--form-secondary {
  border:8px solid #ccc
}
main .login-container--form h2 {
  text-align:center;
  margin:0 0 1em 0
}
main .login-container--form div.login-container--login-error {
  text-align:center;
  margin:1em 0 2em 0
}
@media(min-width: 468px) {
  header .header--top>div {
    max-width:1000px;
    margin:0 auto;
    text-align:right
  }
  header>div.logo {
    max-width:1000px;
    margin:0 auto;
    text-align:right;
    padding:38px 0
  }
  main.container--single>div.login-container {
    max-width:340px
  }
  main.container--double>div.login-container {
    max-width:340px
  }
  main div.login-container {
    max-width:1000px;
    margin:0 auto;
    text-align:center
  }
  main div.login-container--service-legal {
    max-width:340px;
    margin:0 auto;
    text-align:center
  }
  footer>div {
    display:flex;
    align-items:center;
    max-width:1000px;
    margin:0 auto
  }
  footer .footer--links-container {
    width:1000px;
    box-sizing:border-box;
    justify-content:space-between;
    display:flex;
    margin:0 auto
  }
  footer .footer--links-container>ul {
    list-style:none
  }
  footer .footer--links-container>ul>li {
    display:inline-block;
    box-sizing:border-box;
    padding-left:1em
  }
  footer .footer--links-container>ul>li:first-child {
    padding-left:0
  }
  footer .footer--links-container>ul>li>a {
    box-sizing:border-box
  }
}
@media(max-width: 892px) {
  .content-wrapper--forms {
    flex-direction:column
  }
  .content-wrapper--forms>section {
    padding-right:0 !important;
    padding-left:0 !important;
    padding-bottom:32px;
    padding-top:32px;
    border-bottom:1px solid #c6c6c6
  }
  .content-wrapper--forms>section:first-child {
    margin-right:0;
    padding-top:0
  }
  .content-wrapper--forms>section:last-child {
    margin-left:0;
    padding-bottom:0;
    border-bottom:none
  }
}
@media(max-width: 467px) {
  body {
    box-sizing:border-box;
    padding:64px 0 141px 0;
    background-image:none
  }
  body>div {
    padding-bottom:125px
  }
  header .header--top>div {
    text-align:right
  }
  header>div.logo {
    padding:12px 12px;
    margin:0 auto;
    text-align:right
  }
  header>div.logo>img {
    height:63px
  }
  main {
    padding:0 12px;
    min-height:0;
    align-items:start;
    justify-content:center
  }
  main .content-wrapper {
    width:100%
  }
  main .content-wrapper--logo {
    max-width:100%;
    min-width:0;
    text-align:center
  }
  main .content-wrapper--extra {
    min-width:0;
    width:100%
  }
  main .content-wrapper--forms>section {
    margin-bottom:1em;
    width:100% !important
  }
  main .content-wrapper--forms>section:first-child {
    margin-right:0
  }
  main .content-wrapper--forms>section:last-child {
    margin-left:0
  }
  main .content-wrapper--service-legal {
    max-width:340px;
    margin:0 auto;
    text-align:center
  }
  footer {
    height:125px;
    font-size:14px
  }
  footer .footer--logo-container>div {
    width:100%;
    box-sizing:border-box;
    padding:12px
  }
  footer .footer--links-container>ul {
    list-style:none;
    width:100%;
    padding:0 12px;
    text-align:center
  }
  footer .footer--links-container>ul>li {
    text-align:center;
    display:block;
    box-sizing:border-box;
    padding:.5em 12px
  }
  footer .footer--links-container>ul>li:first-child {
    padding-left:0
  }
  footer .footer--links-container>ul>li>a {
    box-sizing:border-box
  }
}
.otp-device {
  text-align:center;
  margin:1em
}
.otp-device--selector>label {
  position:relative
}
.otp-device--selector>label>input {
  display:none
}
.otp-device--selector>label>input:checked~span {
  border:4px solid #ffd500
}
.otp-device--selector>label>input:checked~span>span {
  color:#000
}
.otp-device--selector>label>span {
  display:inline-block;
  height:80px;
  border:4px solid #ccc;
  position:relative;
  background-image:url("../img/qr_code_2_black_24dp.svg");
  background-repeat:no-repeat;
  background-position:50% 40%;
  min-width:100px
}
.otp-device--selector>label>span>span {
  color:#ccc;
  position:absolute;
  display:block;
  bottom:0;
  left:0;
  width:100%;
  text-overflow:ellipsis;
  text-align:center;
  white-space:nowrap;
  overflow:hidden
}
.sr-only {
  border:0 !important;
  clip:rect(1px, 1px, 1px, 1px) !important;
  -webkit-clip-path:inset(50%) !important;
  clip-path:inset(50%) !important;
  height:1px !important;
  overflow:hidden !important;
  margin:-1px !important;
  padding:0 !important;
  position:absolute !important;
  width:1px !important;
  white-space:nowrap !important
}
/*Ugly, but neccecary.*/
@media(prefers-color-scheme: dark)
 {
  .otp-device--selector>label>span {
    background-color: #FFF !important;
  }
}
.kc-recovery-codes-actions {
  padding-top:12px;
  padding-bottom:24px
}
.kc-recovery-codes-actions>button {
  padding:12px 7px;
  display: inline;
  width: auto
}