.bg-split {
  background: linear-gradient(to right, #FFF 50%, #F2F4F8 50%);
}

#hint {
  text-align: right;
}

.align {
  top: 50%;
  margin-top: 50px;
}

.icon {
  text-align: right;
  transform: translate(-20px, -35px);
}

.input-field {
  width: 100%;
  padding: 10px;
}

.light-grey {
  color: #697077;
}

footer {
  box-shadow: 0px 4px 12px 2px rgba(18, 22, 25, 0.16) !important;
}

@media only screen and (max-width:959px) {
  .artwork {
    background-image: none;
  }

  .bg-split {
    background: #FFF;
  }
}

@media all and (-ms-high-contrast: none),
(-ms-high-contrast: active) {

  /* IE10+ CSS here */
  .ds-alert.ds-error [class^='ds-icon-']:not(.ds-icon-close) {
    background: #fff !important;
  }

  body {
    /* will cover the 100% of viewport */
    min-height: 100vh;
    overflow: scroll;
    display: block;
    position: relative;
    /* footer height */
    padding-bottom: 100px;
  }

  footer {
    position: absolute;
    bottom: 0;
    width: 100%;
  }
}

#otp-input {
  -webkit-appearance: none;
  -moz-appearance: textfield;
  min-width: 70px !important;
  padding-right: 10px;
}

.description {
  color: #4a4a4a;
  font-family: IBMPlexSans;
  font-size: 19px;
  font-stretch: normal;
  font-style: normal;
  font-weight: normal;
  letter-spacing: 0.21px;
  line-height: 1.26;
}

.disable_a_href {
  color: #6D7777 !important;
  pointer-events: none !important;
}

.ds-button.disable_a_href {
  color: #FFF !important;
  opacity: 0.5;
  cursor: not-allowed;
  outline: none;
}

.ds-col-3#submit {
  padding-left: 0 !important;
  padding-top: 15px !important;
}

.ds-col-5#passcode {
  padding-left: 0 !important;
}

.header {
  background-color: #ffffff;
}

.light {
  color: #ffffff !important;
}

.option-name {
  color: #232323;
  font-family: IBMPlexSans;
  font-size: 19px;
  font-stretch: normal;
  font-style: normal;
  font-weight: 600;
  letter-spacing: 0.21px;
  line-height: 1.26;
}

.title {
  color: #232323;
  font-family: IBMPlexSans;
  font-size: 37px;
  font-stretch: normal;
  font-style: normal;
  font-weight: 300;
  letter-spacing: 0.3px;
  line-height: 1.16;
}

.subtitle {
  color: #232323;
  font-family: IBMPlexSans;
  font-size: 19px;
}

.err-title {
  color: #00186F;
  font-family: IBM Plex Sans;
  font-style: normal;
  font-weight: 600;
  font-size: 32px;
  line-height: 40px;
}

.err-subtitle {
  font-family: IBM Plex Sans;
  font-style: normal;
  font-weight: normal;
  font-size: 16px;
  line-height: 24px;
  color: #00186F;
}

.w3id {
  font-family: IBMPlexSans;
  font-size: 18px;
  font-weight: normal;
  font-stretch: normal;
  font-style: normal;
  line-height: normal;
  letter-spacing: normal;
  color: #232323;
}

@media screen and (max-width: 639px) {
  #timerDiv {
    display: block;
  }
}

@media screen and (max-width: 768px) {
  .ds-col-3#options {
    padding-bottom: 10px !important;
    padding-left: 0 !important;
  }
}

.passwordless-signin {
  display: none;
}

.bx--dropdown__wrapper, .bx--text-input__field-wrapper {
  width: 100%;
}

.cloud-directory {
  display: none;
}

.passwordless-skeleton {
  width: 100%;
  height: 100%;
}

.alternate-signin-toggle {
  padding-bottom: 120px;
  margin-top: 40px;
}

.alternate-options-dropdown {
  margin-top: 40px;
}

#cloud-directory-form>button {
  margin-top: 40px;
}

.ds-icon-hide {
  background-image: url("../../../static/img/hide-16px.svg");
  font-family: 'w3ds-icons';
  background-repeat: no-repeat;
  width: 16px;
  height: 18px;
  margin: 0;
  padding: 0;
  transform: translate(-20px, -36px);
}

.centered {
  position: fixed;
  top: 50%;
  left: 50%;
  margin-top: -50px;
  margin-left: -100px;
}

@media screen and (min-width: 960px) {
  .background {
    -moz-background-size: cover;
    -o-background-size: cover;
    -webkit-background-size: cover;
    background-position: right;
    background-size: cover;
    background-image: url('../../../static/img/w3idError.svg');
  }
}

@media screen and (max-width: 959px) {
  .background {
    background-color: #EDF5FF;
  }

  .half {
    height: 100%;
    width: 100%;
    margin-top: auto;
  }
}