html, body {
  height: 100%;
  width: 100%;
  padding: 0;
  margin: 0;
  font-size: 10px;
  overflow-x: hidden !important;
  overflow-y: hidden !important;
  font-family: 'MozTT', sans-serif;
  position: absolute;
}

section[role="region"] {
  height: 100%;
}

button::-moz-focus-inner,
input::-moz-focus-inner {
  border: 0;
}

.disabled {
  color: #ccc;
  text-decoration: none !important;
  pointer-events: none;
}

.disabled *{
  text-decoration: none !important;
  pointer-events: none;
}


/*
 * We have a 'magic' button which translates with us through the
 * proccess. This is called 'multistate-button' or 'msb'
 */

.multistate-button {
  width: 200%;

  overflow: hidden;
  position: absolute;
  bottom: 1rem;
  padding: 0;
  margin: 0;

  transition: all .3s ease;
  
  border: none;
  text-decoration: none;
  outline: none;
  background: white;
}

.msb-button-step {
  height: 4rem;
  width: calc(50% - 2rem);

  float: left;
  margin: 0 1rem;

  background: #00AACC;
  outline: none;
  border: none;
  border-radius: 2rem;
  line-height: 4rem;
  text-decoration: none;
  font-size: 1.8rem;
  font-style: italic;
  color: white;
}

.msb-button-step progress {
  margin-right: 1rem;
}

/*
 * Some buttons which have different states
 */

.states-wrapper {
  height: 12rem;
  transform: translateY(-4rem);
  transition: all .3s ease;
}

.state-resend .states-wrapper div span:first-child{
  width: 3rem;
  height: 3rem;
  display: inline-block;
  vertical-align: middle;
  background: url(images/warning.png);
  background-repeat: no-repeat;
  background-position: center 0.5rem;
}


.state-allow .states-wrapper{
  transform: translateY(0);
}
.state-connecting .states-wrapper{
  transform: translateY(-4rem);
}
.state-resend .states-wrapper{
  transform: translateY(0);
}
.state-verify .states-wrapper{
  transform: translateY(-4rem);
}
.state-verifying .states-wrapper{
  transform: translateY(-8rem);
}
.state-verified > .states-wrapper{
  transform: translateY(-12rem);
}

.state-verified {
  background: #5F9B0A;
  color: white;
}

.state-resend {
  background: #B90000 !important;
  color: white !important;
}



/*
  We will contain the three main panels of the Mobile ID flow:
  - [1] Selection of the phone number
  - [2] Add verification code (if required)
  - [3] Feedback screen
 */

#verification-code-timer {
  visibility: hidden;
}

#verification-code-timer.show {
  visibility: visible;
}

.panels-container {
  height: calc(100% - 11.3rem);
  width: 400%;
  overflow: hidden;

  transition: all .6s ease;
}

.panel {
  height: 100%;
  width: 25%;

  float: left;
  overflow-x: hidden !important;
  overflow-y: scroll;

  background: white;
}

p.explanation {
  font-size: 1.9rem;
  font-weight: 300;
  line-height: 2.2rem;
}

div, span, p, label {
  margin: 0;
  padding: 0;
  border: 0;
  vertical-align: baseline;
}

/*
  [1] Selection of the phone number
 */

.msisdn-selection-panel p.explanation {
  padding: 2rem 1rem 1rem 2rem;
  font-size: 1.9rem;
  font-weight: 300;
  line-height: 2.2rem;
}

.msisdn-overflow-shield {
  width: 100%;
  overflow: hidden;
}

.msisdn-selection-wrapper {
  width: 200%;
  transition: all .3s ease;
}

.msisdn-selection-wrapper div{
  padding: 0 2rem 1rem 2rem;
  box-sizing: border-box;
  float: left;
  width: 50%;
}

/*
 * We can select one of the pre-popopulated MSISDN 
 */

ul.phone-options-list {
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  list-style: none;
  vertical-align: baseline;
}

ul.phone-options-list li {
  height: 5rem;
  position: relative;
  
  margin: 0;
  padding: 0;
  
  vertical-align: baseline;
  font-size: 1.7rem;
  line-height: 5.5rem;
  border-bottom: .1rem solid #ccc;
}

ul.phone-options-list li:last-child {
  border: none;
}

ul.phone-options-list li input {
  display: none;
  float: right;
}

ul.phone-options-list li span.icon {
  width: 3rem;
  height: 3rem;
  float: left;
  margin-top: 1rem;
  margin-right: 1rem;
  
  background-image: url(images/simcards.png);
  background-position: 0 0;
  background-repeat: no-repeat;
}

ul.phone-options-list li span.sim1 {
  background-image: url(images/simcards.png);
  background-position: 0 0;
  background-repeat: no-repeat;
}

ul.phone-options-list li span.sim2 {
  background-image: url(images/simcards.png);
  background-position: 0 -3rem;
  background-repeat: no-repeat;
}

ul.phone-options-list li span.primary {
  background-image: url(images/Telf_tick.png);
  background-position: center;
  background-repeat: no-repeat;
}


ul.phone-options-list li span.radio-mask {
  width: 5rem;
  height: 100%;
  position: absolute;
  right: 0;
}

ul.phone-options-list li input:checked + span.radio-mask {
  background-image: url(images/checked.png);
  background-repeat: no-repeat;
  background-position: center;
}

#add-msisdn {
  width: 100%;
  
  margin-top: 2rem;
  font-size: 1.5rem;
  color: #858585;
  text-decoration: underline;
  font-style: italic;
  text-align: center;
  font-weight: 300;
}

/*
  If we type the MSISDN manually
*/

#do-automatic-msisdn {
  width: 100%;
  
  padding: 1rem;
  box-sizing: border-box;
  font-size: 1.5rem;
  color: #858585;
  text-decoration: underline;
  font-style: italic;
  text-align: center;
  font-weight: 300;
}

ul.msisdn-form {
  width: 100%;
  
  margin-top: 6rem;
  padding: 0;
}

ul.msisdn-form li{
  display: inline-block;
  vertical-align: top;
}

ul.msisdn-form li{
  display: inline-block;
}

ul.msisdn-form li button{
  height: 4rem;
  width: 5rem;
  padding-right: 2rem;
  text-align: center;
  line-height: 4.2rem;
}

ul.msisdn-form li input{
  height: 4rem;
  font-size: 2.2rem;
}

ul.msisdn-form li:last-child{
  width: calc(100% - 7.3rem);
}

.button-select-wrapper {
  width: 7rem !important;
  padding: 0 !important;
  margin: 0 !important;
  overflow: hidden !important;
  text-overflow: unset !important;
}

.button-select-wrapper select {
  width: calc(100% + 1.9rem) !important;
  font-size: 1.6rem;
  text-align: left;
  height: 100%;
  background: none;
  border: none;
  padding-left: .6rem !important;
  box-sizing: border-box;
}

/*
  [2] Add verification code (if required)
 */

.verification-panel {
  padding: 2rem;
  box-sizing: border-box;
}

.verification-panel p {
  padding: 0;
}

#verification-code {
  width: 100%;
  height: 5rem;

  margin-top: 4rem;
  margin-bottom: 2rem;
  font-size: 3rem;
  text-align: center;
}

input.error {
  border: .1rem solid #B90000;
  animation: error-dance .5s;
  animation-iteration-count: 2;
}

@keyframes error-dance {
  0% { transform: rotate(0); }
  25% { transform: rotate(1deg); }
  50% { transform: rotate(0); }
  75% { transform: rotate(1deg); }
  100% { transform: rotate(0deg); }
}



#verification-timer {
  font-size: 2rem;
  font-weight: 600;
}

/*
  [3] Feedback screen
 */

.done-panel {
  background-repeat: no-repeat;
  background-size: 49%;
  background-position: center 60%;
}

.done-panel-gif {
  background-image: url(images/animation.gif);
}

.done-panel p {
  padding: 2rem 1rem;
  box-sizing: border-box;
  font-size: 2.2rem;
  text-align: center;
  font-weight: 300;
}

#legend {
  text-align: center;
  display: block;
  padding-top: 0.8rem;
  padding-left: 1.3rem;
}