/* ---------- FLAT WEB PLAIN CSS CUSTOM vodafone au ------------- */
/*immutable colors*/
/*  VARIABLES */
/* ---------- page ------------- */
html {
  font-size: 62.5%;
}
body {
  font-size: 11px;
  font-size: 1.1rem;
  font-family: MetroPcs,Arial,Helvetica;
  font-variant-ligatures: none;
  color: #46196e;
  background-color: transparent;
  position: relative;
}
hr {
  display: block;
  margin-top: 20px;
  margin-bottom: 20px;
  margin-left: auto;
  margin-right: auto;
  border-color: #cbcaca;
  border-style: solid;
  border-width: 1px;
}
.container {
  position: relative;
  height: 532px;
  width: 580px;
  margin: 0 auto;
  border: 1px solid #cbcaca;
}
.mainAreaCont {
  height: auto;
  min-height: 280px;
  position: relative;
  margin-top: 10px;
}
.mainAreaL {
  width: 290px;
  height: 100%;
  position: relative;
}
.mainAreaR {
  position: absolute;
  right: 0;
  top: 0;
  width: 290px;
  padding: 0 10px;
  display: table;
  height: 100%;
}
.container {
  background: transparent;
}
a:link,
a:hover,
a:active {
  color: #000000;
  font-family: MetroPcsBold;
  text-decoration: underline;
}
a:visited {
  color: #000000;
  font-family: MetroPcsBold;
  text-decoration: underline;
}
b, strong {
  font-family:MetroPcsBold
}
/* ---------- header ------------- */
.header {
  height: 100px;
  padding-top: 6px;
  padding-bottom: 6px;
  margin: 0;
}
.header {
  background: #7f7f7f;
  display: none;
}
.header__content,
.header__image {
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
}
.header .header__image {
  background-image: url("");
  display: block;
}
/* ---------- product image ------------- */
.prodImage {
  height: 231px;
  margin: 0;
}
.prodImage .prodImage__content {
  height: 100%;
  max-width: 100%;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: 100%;
}
.prodImage__content {
  background-image: url("");
}
/* ---------- product box ------------- */
.productBox {
  background-color: transparent;
  position: relative;
}
.productBox .notify {
  margin-top: 0;
  margin-left: 0;
  margin-right: 0;
}
.productBox__desc {
  margin: 10px 0;
  width: 100%;
  top: 64px;
  padding: 0 10px;
}
.thankyou .productBox__desc {
  font-weight: normal;
}
.productBox .productBox__content {
  color: #46196e;
}
.productBox .productBox__price {
  color: #46196e;
  font-family: MetroPcsBold;
}
.productBox .productBox__promoArea {
  border-radius: 5px;
  margin: 10px;
  position: relative;
  text-align: left;
}
.productBox__promoArea--iconArea {
  margin-top: -7px;
  position: absolute;
  top: 50%;
  left: 4px;
  font-family: MetroPcsBold;
  color: white;
}
.productBox__promoArea--inside {
  border-radius: 5px;
  margin: 1px 1px 1px 30px;
  word-break: break-all;
}
.mainTitle {
  font-size: 20px;
  font-size: 2rem;
  font-family: MetroPcsBold;
}
.mainTitle--error {
  color: #f44336;
}
.mainText {
  padding: 0 10px;
}
/* ---------- error box ------------- */
.errorBox,
.infoBox {
  border-radius: 5px;
  margin: 10px 0;
  position: relative;
  text-align: left;
}
/* ---------- action box ------------- */
.actionBox {
  padding: 0 10px;
  bottom: 0;
  width: 100%;
}
.actionBox .sectTitle {
  margin: 2px 0 10px 0;
  font-size: 12px;
  font-size: 1.2rem;
}
.thankyou .sectTitle {
  font-size: 14px;
  font-family: MetroPcsBold;
}
/*	.actionBox__operatorSelect{
		margin: 0 0 @globalPadding * 2 0;
	}*/
.actionBox .actionBox__content {
  color: #000000;
}
.actionBox .sectTitle {
  color: #46196e;
}
.actionBox .actionBox__msisdnFieldWrap {
  margin: 10px 0;
  text-align: center;
  border-radius: 5px;
  padding: 10px;
  width: 100%;
  height:42px;
}
.actionBox .actionBox__msisdnFieldWrap--inner {
  font-size: 18px;
  font-size: 1.8rem;
}
.actionBox .actionBox__msisdnField {
  /*padding-left: 10px;*/
  width: 100%;
  text-align: center;
}
.actionBox__rememberMe {
  margin: 10px;
}
.actionBox .actionBox__rememberMeText {
  font-size: 12px;
  font-size: 1.2rem;
}
.actionBox .actionBox__otpField {
  padding: 5px;
  display: block;
  margin: 0px 0 10px 0;
  border-radius: 5px;
  width: 100%;
  border: 1px solid #cbcaca;
  height: 42px;
  text-align: center;
}
.actionBox__otpArea .notify--check {
  margin: 10px 0;
}
.actionBox .actionBox__resendOtp {
  color: #000000;
  font-size: 12px;
  margin: -5px 0 10px 0;
  font-size: 16px;
  font-size: 1.6rem;
}

.actionBox .actionBox__resendOtp a {
  color: #000000;
  font-family: MetroPcsBold;
}

.actionBox .actionBox__changeMsisdn--a {
  color: #46196e;
}
.actionBox .notify {
  margin-top: 0;
  margin-left: 0;
  margin-right: 0;
}
.actionBox__oneClickArea--msisdn {
  font-size: 12px;
  font-size: 1.2rem;
  font-family: MetroPcsBold;
  margin: 10px;
}
.actionBox__oneClickArea .already_member {
  background-color: #f3f3f3;
  padding: 10px;
  margin: 10px 0 10px 0;
  font-size: 1.2rem;
}
.actionBox__oneClickArea #legalInfoLabelOld {
  font-size: 1.2rem;
}
.actionBox__thankArea {
  position: relative;
}
.actionButton {
  display: block;
  color: #ffffff;
  margin: 10px 0;
  width: 100%;
}
.actionButton__inside {
  width: 100%;
  padding: 10px;
  height: 35px;
  border: 1px solid;
  font-size: 16px;
  font-size: 1.6rem;
  border-radius: 5px;
  cursor: pointer;
  line-height: 7px;
}
.actionBox__confirmButton button {
  background: transparent;
  background: -moz-linear-gradient(top, #73c20e 0%, #73c20e 100%);
  background: -webkit-gradient(left top, left bottom, color-stop(0%, #73c20e), color-stop(100%, #73c20e));
  background: -webkit-linear-gradient(top, #73c20e 0%, #73c20e 100%);
  background: -o-linear-gradient(top, #73c20e 0%, #73c20e 100%);
  background: -ms-linear-gradient(top, #73c20e 0%, #73c20e 100%);
  background: linear-gradient(to bottom, #73c20e 0%, #73c20e 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#73c20e', endColorstr='#73c20e', GradientType=0 );
  /*border-color: #cbcaca;*/
  color: #ffffff;
  height: 42px;
}
.actionBox__cancelButton button {
  background: transparent;
  /*background: -moz-linear-gradient(top,@actionBox_cancelBtnTopColor 0%, @actionBox_cancelBtnBottomColor 100%);
		background: -webkit-gradient(left top, left bottom, color-stop(0%, @actionBox_cancelBtnTopColor), color-stop(100%, @actionBox_cancelBtnBottomColor));
		background: -webkit-linear-gradient(top, @actionBox_cancelBtnTopColor 0%, @actionBox_cancelBtnBottomColor 100%);
		background: -o-linear-gradient(top, @actionBox_cancelBtnTopColor 0%, @actionBox_cancelBtnBottomColor 100%);
		background: -ms-linear-gradient(top, @actionBox_cancelBtnTopColor 0%, @actionBox_cancelBtnBottomColor 100%);
		background: linear-gradient(to bottom, @actionBox_cancelBtnTopColor 0%, @actionBox_cancelBtnBottomColor 100%);
		filter: ~"progid:DXImageTransform.Microsoft.gradient( startColorstr='@{actionBox_cancelBtnTopColor}', endColorstr='@{actionBox_cancelBtnBottomColor}', GradientType=0 )";*/
  border-color: #cbcaca;
  color: #ffffff;
  height: 42px;
}
.actionBox__cancelButton {
  /*--used on 'full screen'--*/
}
.actionBox__resendOtpButton {
  color: #46196e;
  text-decoration: underline;
}
.actionBox__resendOtpButton .actionButton__inside {
  background-color: #ffffff;
}
.actionBox .actionBox__msisdnArea,
.actionBox .actionBox__otpArea,
.actionBox__oneClickArea,
.actionBox__thankArea,
.errorBox{
  font-size: 16px;
  font-size: 1.6rem;
}

.actionBox .actionBox__oneClickTitle {
  font-family: MetroPcsBold;
}

.tylegal {
  font-size: 16px;
  font-size: 1.6rem;
  margin-bottom: 20px;
}
.tylegal a {
  color: #00a8e1;
  font-family: MetroPcsBold;
}
.fa, .fas {
  color: #F43030;
}
.notify {
  /*border-radius: 7px;*/
  padding: 10px 0;
  /*background-repeat: no-repeat;
  background-position: 10px 7px;
  background-size: 25px;*/
  margin: 0 10px 0 10px;
}
.notify--check {
  background-image: url("../img/check_mark.jpg");
  border: 2px solid #428600;
  color: #367630;
}
.notify--error {
  /*color: #f44336;*/
}
.notify--info {
  background-image: url("../img/error2_icon.png");
  border: 2px solid #ff5400;
  color: #ff5400;
}
.notify--promo {
  background-image: url("../img/promo_icon.png");
  border: 2px solid #007c92;
  color: #007c92;
}
.notify a,
.notify a:link,
.notify a:visited,
.notify a:hover {
  color: inherit;
}
.closeButton {
  background: #ffffff url("../img/close_but.gif") no-repeat;
  cursor: pointer;
  height: 16px;
  position: absolute;
  right: 15px;
  top: 12px;
  width: 16px;
  z-index: 1000;
}

.infoMsisdn {
  height: 42px;
  background-color: #9e9e9e1a;
  border: 1px solid #cbcaca;
  border-radius: 5px;
  line-height: 42px;
  text-align: center;
  font-family: MetroPcsBold;
}
/* ---------- legal box ------------- */
.legalBox {
  margin: 10px 0;
}
.legalBox--bottom {
  position: absolute;
  bottom: 0;
}
.legalBox--tandc {
  vertical-align: middle;
  margin: 0 10px;
}
/* ---------- tos ------------- */
body.tos {
  background: none;
  background-color: #fff;
}
.tos .container {
  max-width: 760px;
}
.tosBox__sectionBox {
  margin: 0 14px;
}
.tosBox__content {
  overflow-y: auto;
  max-height: 360px;
}
.tosTitle {
  font-size: 26px;
  margin-bottom: 20px;
}
.tos_backButton {
  border: medium none;
  margin: 14px 0px;
  padding: 0.5em;
  background: #ddd;
  min-width: 100px;
}
/* ---------- global ------------- */
.hideMe {
  display: none;
}
.C-blk {
  display: block;
}
select,
input {
  border: 0;
}
.tblCont {
  display: table;
  width: 100%;
  height: 60px;
}
.vertCell {
  display: table-cell;
  vertical-align: middle;
}
.fieldWrap {
  background: #ffffff;
  color: #46196e;
  border: 1px solid #cbcaca;
}
.inputFields {
  /*font-size: 18px;
  font-size: 1.8rem;*/
  background: #ffffff;
  color: #46196e;
}
.keepTogether {
  white-space: nowrap;
}
.actionBox .legalBox .legalBox__content {
  padding-left: 0;
}
.legalBox .legalBox__content {
  padding-left: 10px;
}
/*-----responsive rules-------------*/
@media all and (max-width: 660px) {
  .header {
    display: none;
  }
}
@media all and (min-width: 660px) {
  body {
    font-size: 12px;
    font-size: 1.25rem;
  }
  html {
    background-color: #ffffff;
  }
  .closeButton {
    display: none;
  }
  /*.mainAreaL,
  .mainAreaR {
    padding-top: 20px;
  }*/
  .mainAreaCont {
    margin-bottom: 10px;
  }
  /*.actionBox__cancelButton{
		display: inline-block;
		float: left;
	}*/
  .prodImage.sectionBox,
  .prodImage .prodImage__content {
    position: relative;
    width: 100%;
    max-width: 340px;
    display: block;
  }
  .prodImage .prodImage__content {
    background-size: 100% 100%;
  }
  .prodImage .prodImage__content {
    height: 1px;
    padding-top: 87%;
  }
  .actionBox__otpArea .notify--check {
    margin: 20px 0;
  }
  .errorBox,
  .infoBox,
  .actionButton {
    margin: 20px 0;
  }
  .tblCont .errorBox,
  .tblCont .infoBox {
    margin: 0;
  }
}
@media all and (min-width: 660px) and (max-width: 780px) {
  .container {
    display: block;
    width: auto;
    border: none;
    height: auto;
  }
  .mainAreaCont,
  .tblCont,
  .legalBox,
  .footer__content {
    position: relative;
    margin-top: 0;
    margin-left: auto;
    margin-right: auto;
  }
  .mainAreaL,
  .mainAreaR {
    width: 50%;
    min-width: 300px;
  }
}
@media all and (min-width: 780px) {
  html {
    font-size: 70%;
  }
  .container {
    display: block;
    width: auto;
    border: none;
    height: auto;
  }
  .actionBox.sectionBox {
    position: relative;
  }
  .productBox .productBox__promoArea {
    margin: 10px;
  }
  .productBox__desc {
    position: relative;
    top: 0;
    margin-bottom: 10px;
  }
  .actionBox .sectTitle {
    margin: 40px 0px;
  }
  .prodImage.sectionBox,
  .prodImage .prodImage__content {
    position: relative;
    width: 100%;
    max-width: 420px;
    display: block;
    height: 100%;
  }

  .prodImage .prodImage__content {
    background-size: 100% 100%;
  }
  .prodImage .prodImage__content {
    height: 1px;
    padding-top: 87%;
  }
  .mainAreaCont,
  .tblCont,
  .legalBox--bottom,
  .footer__content {
    max-width: 900px;
    width: 80%;
    position: relative;
    margin: 0 auto;
  }
  .mainAreaCont {
    overflow: auto;
    height: auto;
  }
  .mainAreaL,
  .mainAreaR {
    width: 50%;
    min-width: 300px;
  }
  .mainAreaL {
    position: relative;
    float: left;
  }
  .mainAreaR {
    position: relative;
    float: right;
    overflow: hidden;
    height: 360px;
  }
  .tosBox__content {
    max-height: none;
  }
}
/* --------- FONTS ------------*/
@font-face {
  font-family: 'MetroPcs';
  font-weight: 700;
  src: url('../fonts/TT-Norms-Regular.ttf');
}

@font-face {
  font-family: 'MetroPcsBold';
  font-weight: 700;
  src: url('../fonts/TT-Norms-Bold.ttf');
}