.arrow-up {
  width: 40px;
  height: 25px;
  position: relative;
  overflow: hidden; }

.arrow-up:after {
  content: "";
  position: absolute;
  width: 20px;
  height: 20px;
  background: white;
  transform: rotate(45deg);
  /* Prefixes... */
  top: 15px;
  left: 10px;
  box-shadow: 0px 0px 10px #888888; }

.hide, .hide-desktop-tablet {
  display: none; }

@media only screen and (max-width: 40em) {
  .hide-mobile {
    display: none; }
  .hide-desktop-tablet {
    display: inherit; } }

.color-purple {
  color: #49166d; }

.color-green {
  color: #66CC00; }

meta.foundation-version {
  font-family: "/{{VERSION}}/"; }

meta.foundation-mq-small {
  font-family: "/only screen/";
  width: 0; }

meta.foundation-mq-small-only {
  font-family: "/only screen and (max-width: 40em)/";
  width: 0; }

meta.foundation-mq-medium {
  font-family: "/only screen and (min-width:40.0625em)/";
  width: 40.0625em; }

meta.foundation-mq-medium-only {
  font-family: "/only screen and (min-width:40.0625em) and (max-width:64em)/";
  width: 40.0625em; }

meta.foundation-mq-large {
  font-family: "/only screen and (min-width:64.0625em)/";
  width: 64.0625em; }

meta.foundation-mq-large-only {
  font-family: "/only screen and (min-width:64.0625em) and (max-width:90em)/";
  width: 64.0625em; }

meta.foundation-mq-xlarge {
  font-family: "/only screen and (min-width:90.0625em)/";
  width: 90.0625em; }

meta.foundation-mq-xlarge-only {
  font-family: "/only screen and (min-width:90.0625em) and (max-width:120em)/";
  width: 90.0625em; }

meta.foundation-mq-xxlarge {
  font-family: "/only screen and (min-width:120.0625em)/";
  width: 120.0625em; }

meta.foundation-data-attribute-namespace {
  font-family: false; }

html, body {
  height: 100%; }

*,
*:before,
*:after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box; }

html,
body {
  font-size: 100%; }

body {
  background: #fff;
  color: #222;
  cursor: auto;
  font-family: "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
  font-style: normal;
  font-weight: normal;
  line-height: 1.5;
  margin: 0;
  padding: 0;
  position: relative; }

a:hover {
  cursor: pointer; }

img {
  max-width: 100%;
  height: auto; }

img {
  -ms-interpolation-mode: bicubic; }

#map_canvas img,
#map_canvas embed,
#map_canvas object,
.map_canvas img,
.map_canvas embed,
.map_canvas object,
.mqa-display img,
.mqa-display embed,
.mqa-display object {
  max-width: none !important; }

.left {
  float: left !important; }

.right {
  float: right !important; }

.clearfix:before, .clearfix:after {
  content: " ";
  display: table; }

.clearfix:after {
  clear: both; }

.hide {
  display: none; }

.invisible {
  visibility: hidden; }

.antialiased {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale; }

img {
  display: inline-block;
  vertical-align: middle; }

textarea {
  height: auto;
  min-height: 50px; }

select {
  width: 100%; }

.telus-input-field {
  font-family: "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
  font-size: 14px;
  line-height: 24px;
  padding: 0 12px;
  height: 44px;
  position: relative;
  top: 0;
  margin: 2px 0;
  outline: none;
  -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
  -webkit-appearance: none;
  border-width: 1px;
  border-style: solid;
  border-radius: 3px; }

.telus-input-field:disabled {
  pointer-events: none; }

.telus-input-field.color-light {
  background-color: white;
  color: #666666;
  border-color: #b3b3b3; }

.telus-input-field.color-light {
  -webkit-transition: all 0.2s;
  -moz-transition: all 0.2s;
  -o-transition: all 0.2s;
  transition: all 0.2s; }

.telus-input-field.color-light {
  background-color: white;
  color: #666666;
  border-color: #b3b3b3; }

.telus-input-field.color-light:hover {
  border: 1px solid #66CC00;
  -webkit-box-shadow: 0 0 1px #66CC00;
  -moz-box-shadow: 0 0 1px #66CC00;
  box-shadow: 0 0 1px #66CC00; }

.telus-input-field.color-light:focus {
  border: 1px solid #49166d;
  -webkit-box-shadow: 0 0 1px #49166d;
  -moz-box-shadow: 0 0 1px #49166d;
  box-shadow: 0 0 1px #49166d; }

.telus-input-field:disabled {
  pointer-events: none; }

/**
 * Input groups
 *
 */
div.input-group .input-note {
  display: inline-block;
  line-height: 1.3;
  color: #666666; }
  @media only screen and (min-width: 40.0625em) {
    div.input-group .input-note {
      font-size: 0.875rem;
      margin-top: 10px; } }
  @media only screen and (max-width: 40em) {
    div.input-group .input-note {
      font-size: 0.9375rem;
      margin-top: 5px; } }

div.input-group label.error-text, div.input-group p.error-text {
  display: none;
  width: 100%; }

div.input-group input {
  display: block;
  width: 100%; }

div.input-group div.input-error-icon,
div.input-group div.input-success-icon {
  display: none;
  font-size: 1.2em;
  position: absolute;
  top: 0.7em;
  right: 0.6em;
  height: 1em;
  width: 1em;
  line-height: 1; }

.telus-select-container.input-group div.telus-icon {
  top: 0.7em;
  right: 1.6em; }

div.input-group.input-error {
  position: relative; }
  div.input-group.input-error input.telus-input-field {
    border-color: #C81235;
    width: 100%; }
  div.input-group.input-error label.error-text, div.input-group.input-error p.error-text {
    display: block !important;
    color: #666666;
    font-size: 14px;
    font-weight: light;
    padding: 5px 8px;
    margin-top: 10px;
    background-color: #fde6eb; }
  div.input-group.input-error label.error-text:before,
  div.input-group.input-error p.error-text:before {
    content: 'o';
    font-family: 'telus';
    position: absolute;
    top: 44px;
    left: 10%;
    -webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    -o-transform: rotate(-90deg);
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
    color: #fde6eb; }
  div.input-group.input-error div.telus-icon.input-error-icon {
    display: block !important;
    color: #C81235; }

div.input-group.input-success {
  position: relative; }
  div.input-group.input-success div.telus-icon.input-success-icon {
    display: block !important;
    color: #66CC00; }

a:focus, a:hover {
  color: #8c68a6; }

.light {
  font-weight: 100; }

.has-icon .icon-label {
  margin-right: 5px; }

a.has-icon {
  text-decoration: none; }
  a.has-icon:hover .icon-label {
    text-decoration: underline; }

.telus-select-container select {
  font-size: 1em; }

.telus-select-container:after {
  font-size: 13px;
  padding-top: 4px;
  right: 1em; }

.telus-input-field {
  font-size: 17px;
  position: relative;
  margin: 0; }
  .telus-input-field.input-border {
    padding: 10px;
    min-height: 44px;
    min-width: 44px;
    border: 1px solid #ccc;
    color: #666;
    background-color: #fff;
    cursor: text; }
    .telus-input-field.input-border.focus {
      border: 1px solid #666; }
    .telus-input-field.input-border input:focus {
      border: 0 none !important;
      box-shadow: none !important; }
  .telus-input-field input {
    font-size: 17px;
    line-height: 22px;
    float: left;
    color: inherit;
    padding: 0;
    border: 0; }
    .telus-input-field input:focus {
      outline: none; }
  .telus-input-field.color-light {
    margin-top: 15px; }
    .telus-input-field.color-light input:focus {
      border: 1px solid #49166d;
      -webkit-box-shadow: 0 0 1px #49166d;
      -moz-box-shadow: 0 0 1px #49166d;
      box-shadow: 0 0 1px #49166d; }
  .telus-input-field .frg-button:hover {
    text-decoration: none; }

.telus-button {
  min-width: 120px;
  font-weight: 600;
  padding: 12px 20px;
  height: 45px; }

.telus-checkbox.regular.small .icon, .telus-checkbox.regular.small input[type=checkbox] {
  margin-top: -12px; }

.telus-checkbox.regular label {
  padding-top: 15px; }

.arrow-up {
  width: 40px;
  height: 25px;
  position: relative;
  overflow: hidden; }

.arrow-up:after {
  content: "";
  position: absolute;
  width: 20px;
  height: 20px;
  background: white;
  transform: rotate(45deg);
  /* Prefixes... */
  top: 15px;
  left: 10px;
  box-shadow: 0px 0px 10px #888888; }

.hide, .hide-desktop-tablet {
  display: none; }

@media only screen and (max-width: 40em) {
  .hide-mobile {
    display: none; }
  .hide-desktop-tablet {
    display: inherit; } }

.telus-nav {
  font-family: "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
  border-bottom: #ededed 1px solid; }
  @media only screen and (min-width: 90.0625em) {
    .telus-nav {
      padding: 15px 0px; } }
  @media only screen and (min-width: 64.0625em) and (max-width: 90em) {
    .telus-nav {
      padding: 14px 0px; } }
  @media only screen and (min-width: 40.0625em) and (max-width: 64em) {
    .telus-nav {
      padding: 13px 0px; } }
  @media only screen and (max-width: 40em) {
    .telus-nav {
      padding: 10px 0px; } }
  .telus-nav div.logo {
    vertical-align: -webkit-baseline-middle;
    vertical-align: middle; }
    .telus-nav div.logo .telus-icon {
      line-height: 1;
      width: 150px;
      height: 70px;
      display: inline-block;
      vertical-align: top;
      background-image: url("../assets/telus-logo.png");
      background-position: center;
      background-size: contain;
      background-repeat: no-repeat; }
    .telus-nav div.logo .tool-name {
      line-height: 1;
      height: 50px;
      display: inline-block;
      vertical-align: top;
      padding: 20px;
      color: #49166d;
      width: auto;
      font-size: 21px;
      margin-top: 5px;
      color: #666666; }
    .telus-nav div.logo div {
      width: 50%; }
    .telus-nav div.logo div:before {
      padding-top: 0px;
      margin-top: 0px; }
      @media only screen and (min-width: 90.0625em) {
        .telus-nav div.logo div:before {
          font-size: 9.375rem;
          line-height: 55px; } }
      @media only screen and (min-width: 64.0625em) and (max-width: 90em) {
        .telus-nav div.logo div:before {
          font-size: 7.5rem;
          line-height: 45px; } }
      @media only screen and (min-width: 40.0625em) and (max-width: 64em) {
        .telus-nav div.logo div:before {
          font-size: 6.25rem;
          line-height: 55px; } }
      @media only screen and (max-width: 40em) {
        .telus-nav div.logo div:before {
          font-size: 5.625rem;
          line-height: 55px; } }
  .telus-nav div.menus {
    float: right;
    border: none; }
    .telus-nav div.menus .languages div, .telus-nav div.menus .user div {
      padding-right: 0; }
      .telus-nav div.menus .languages div select, .telus-nav div.menus .user div select {
        border: none;
        padding: 24px 5px 0px 10px;
        width: 100px; }
      .telus-nav div.menus .languages div:after, .telus-nav div.menus .user div:after {
        padding-top: 15px;
        color: #49166d; }
  .telus-nav a {
    float: right;
    display: inline-block;
    vertical-align: text-bottom; }
    @media only screen and (min-width: 90.0625em) {
      .telus-nav a {
        font-size: 1.125rem;
        padding: 28px 15px 10px 15px; } }
    @media only screen and (min-width: 64.0625em) and (max-width: 90em) {
      .telus-nav a {
        font-size: 1rem;
        padding: 24px 13px 5px 13px; } }
    @media only screen and (min-width: 40.0625em) and (max-width: 64em) {
      .telus-nav a {
        font-size: 0.9375rem;
        padding: 28px 10px 10px 10px; } }
    @media only screen and (max-width: 40em) {
      .telus-nav a {
        font-size: 0.8125rem;
        padding: 28px 8px 0px 8px; } }

.sub-nav-container {
  background-color: #F5F6F7; }
  .sub-nav-container .sub-nav {
    background-color: #F5F6F7;
    min-height: 90px; }
    .sub-nav-container .sub-nav .sub-nav-item-level-1 {
      margin-top: 30px;
      color: #49166d;
      line-height: 20px;
      display: inline-block;
      height: 25px;
      padding-top: 3px; }
      .sub-nav-container .sub-nav .sub-nav-item-level-1 .nav-content:hover {
        display: inline-block;
        border-bottom: 3px solid #49166d;
        cursor: pointer; }
      .sub-nav-container .sub-nav .sub-nav-item-level-1 .nav-content.active {
        display: inline-block;
        border-bottom: 3px solid #49166d;
        padding-bottom: 0px; }
      .sub-nav-container .sub-nav .sub-nav-item-level-1 .icon-down-arrow {
        font-size: 13px;
        margin-left: 5px;
        display: inline-block;
        padding-top: 4px;
        vertical-align: middle; }
    .sub-nav-container .sub-nav .border-right {
      padding-right: 10px;
      margin-right: 10px;
      border-right: 1px solid #AEAEAE; }
  .sub-nav-container .sub-nav-level-2-container {
    background-color: white;
    position: absolute;
    border: 1px solid #AEAEAE;
    z-index: 10;
    box-shadow: 0px 0px 10px -2px #888888;
    -webkit-box-shadow: 0px 0px 10px -2px #888888;
    -moz-box-shadow: 0px 0px 10px -2px #888888;
    padding-top: 15px;
    padding-bottom: 5px; }
    .sub-nav-container .sub-nav-level-2-container .arrow-for-nav {
      margin-top: -40px;
      margin-bottom: 15px; }
    .sub-nav-container .sub-nav-level-2-container .sub-nav-item-level-2 {
      color: #666666;
      padding-top: 10px; }
      .sub-nav-container .sub-nav-level-2-container .sub-nav-item-level-2 a {
        text-decoration: none; }
        .sub-nav-container .sub-nav-level-2-container .sub-nav-item-level-2 a .sub-nav-item-level-3 {
          line-height: 20px;
          padding: 5px 0px 5px 10px; }
          .sub-nav-container .sub-nav-level-2-container .sub-nav-item-level-2 a .sub-nav-item-level-3:hover {
            cursor: pointer;
            background-color: #F5F6F7; }

@media only screen and (max-width: 40em) {
  .telus-nav div.logo .telus-icon {
    height: 75px;
    padding: 0px; }
  .telus-nav div.logo .tool-name {
    height: 75px;
    padding: 0px; }
  .telus-nav div.languages {
    margin-top: 25px; }
  .sub-nav-container .mobile-sub-nav-1-item {
    font-size: 17px;
    padding: 10px 10px 5px 15px; }
    .sub-nav-container .mobile-sub-nav-1-item .nav-item-1-name.active {
      border-bottom: 3px solid #49166d; }
    .sub-nav-container .mobile-sub-nav-1-item .icon-down-arrow {
      float: right;
      font-size: 13px;
      padding-top: 5px; }
    .sub-nav-container .mobile-sub-nav-1-item .mobile-sub-nav-2-item {
      color: #666666;
      padding-top: 10px;
      padding-left: 10px;
      font-size: 16px;
      background-color: white; }
      .sub-nav-container .mobile-sub-nav-1-item .mobile-sub-nav-2-item .mobile-sub-nav-3-item {
        padding-left: 30px;
        padding-top: 5px;
        font-size: 16px; }
      .sub-nav-container .mobile-sub-nav-1-item .mobile-sub-nav-2-item:last-child {
        padding-bottom: 10px;
        border-bottom: 1px solid #C4C4C4; }
    .sub-nav-container .mobile-sub-nav-1-item:hover {
      cursor: pointer; }
  .sub-nav-container .separator {
    border-bottom: 1px solid #C4C4C4; } }

.main-container {
  overflow: auto;
  min-height: 80%; }

.footer-container {
  background-color: #333333;
  position: relative;
  clear: both;
  width: 100%;
  font-size: 17px;
  color: #fff;
  padding-top: 25px;
  text-align: center; }
  .footer-container p {
    padding-bottom: 14px;
    font-weight: 100;
    margin: 0; }

.telus-logo-copyright {
  color: #595859;
  text-align: center;
  padding-top: 20px;
  padding-bottom: 30px; }
  .telus-logo-copyright img {
    margin-bottom: 8px; }
  .telus-logo-copyright p {
    font-size: 14px;
    line-height: 24px;
    padding-bottom: 14px;
    display: block;
    color: #595859;
    text-align: center; }

body {
  font-size: 17px;
  height: 100%;
  background-color: #f5f6f7;
  color: #666; }

.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {
  color: #666; }

#lpChatButton {
  padding: 100px 0; }
  #lpChatButton a {
    text-decoration: none; }
    #lpChatButton a .icon-label:hover {
      text-decoration: underline; }
  #lpChatButton h5 {
    color: #333;
    margin-top: 10px;
    margin-bottom: 5px;
    font-weight: 100; }
    #lpChatButton h5 :hover {
      text-decoration: none; }
  #lpChatButton .icon-chat-dots {
    display: block;
    font-size: 75px;
    height: 75px; }

.telus-icon {
  color: #666666;
  margin-right: 6px;
  vertical-align: text-bottom; }
  .telus-icon.icon-warning {
    color: #C81235;
    font-size: 28px;
    line-height: 1; }

.error-header {
  text-align: center;
  font-weight: 200;
  font-size: 2em;
  margin-top: 0.67em;
  margin-bottom: 0.67em; }
  .error-header .text {
    position: relative; }
  .error-header .telus-icon.icon-warning:before,
  .error-header .telus-icon.icon-exclamation:before {
    font-size: 32px;
    width: 32px;
    height: 32px;
    margin: 0px;
    vertical-align: middle; }
  .error-header .telus-icon.icon-warning {
    position: absolute;
    top: 50%;
    margin-top: -14px;
    left: -42px; }
  .error-header_failed {
    padding-left: 42px;
    color: #666666; }
  .error-header--purple {
    color: #49166d; }
    .error-header--purple .telus-icon.icon-exclamation {
      color: #49166d;
      font-size: 32px;
      height: 32px;
      display: inline;
      vertical-align: text-bottom; }
      .error-header--purple .telus-icon.icon-exclamation:before {
        font-size: 32px;
        width: 32px;
        height: 32px;
        margin: 0; }

.box {
  color: #666666;
  background: white;
  padding: 15px 25px;
  border: #ededed 1px solid;
  margin-bottom: 15px; }
  .box .box {
    border: none;
    margin: 0; }
  .box--transparent {
    background: transparent;
    border: 0 none;
    margin-bottom: 30px;
    max-width: 640px;
    margin-left: auto;
    margin-right: auto; }
  .box h3, .box .subheader {
    color: #666666;
    font-size: 1.17em; }

.login-header {
  margin: 40px 0; }
  .login-header h1 {
    font-weight: 200;
    line-height: 36px;
    font-size: 37px;
    margin: 0; }

.header-below, .header__below-small {
  display: inherit;
  color: #49166D;
  font-size: 21px; }
  .header-below:hover, .header__below-small:hover {
    text-decoration: none; }
  .header-below:hover .underline, .header__below-small:hover .underline {
    text-decoration: underline; }
  .header-below .icon-arrow-right-circled:before, .header__below-small .icon-arrow-right-circled:before {
    font-size: 15px; }
    .header-below .icon-arrow-right-circled:before:hover, .header__below-small .icon-arrow-right-circled:before:hover {
      text-decoration: none; }

.icon-arrow-right-circled, .icon-profile {
  vertical-align: middle;
  display: inline-flex; }

.icon-profile {
  height: 44px; }

.header__below-small {
  font-size: 1em; }

@media only screen and (max-width: 64em) {
  .error-header {
    font-size: 1.5em; }
    .error-header .telus-icon.icon-warning {
      position: absolute;
      top: 50%;
      margin-top: -14px;
      left: -35px; }
    .error-header_failed {
      padding-left: 35px;
      color: #666666; }
    .error-header .telus-icon.icon-warning:before {
      font-size: 24px;
      width: 24px;
      height: 24px;
      vertical-align: middle; }
    .error-header--purple .telus-icon.icon-exclamation {
      font-size: 24px;
      height: 24px; }
      .error-header--purple .telus-icon.icon-exclamation:before {
        font-size: 24px; }
  .box .subheader {
    font-size: 1em; } }

.login-container {
  margin-left: auto;
  margin-right: auto; }
  .login-container .form-container {
    padding: 30px;
    border-radius: 2px; }
    .login-container .form-container .loginWidget-wrapper {
      display: -webkit-flex;
      display: flex; }
    .login-container .form-container .loginForm-wrapper {
      display: inline-block;
      width: 100%;
      max-width: 300px;
      margin-right: 30px; }
  .login-container label {
    font-size: 1em; }
  .login-container .telus-checkbox {
    margin-top: 15px;
    margin-bottom: 15px; }
  .login-container h3 a {
    padding-top: 10px;
    font-weight: 300;
    font-size: 1rem; }
  .login-container .telus-checkbox label {
    font-size: 17px;
    line-height: 1.2;
    font-weight: 200; }
  .login-container .telus-checkbox label:hover {
    cursor: default; }
  .login-container .login-form h3,
  .login-container .login-form label {
    color: #666666; }
  .login-container .marketing-wrapper {
    display: inline-block;
    display: -webkit-flex;
    display: flex;
    background-image: url(../assets/flower-small.png);
    background-repeat: no-repeat;
    background-position: top right;
    background-color: #f5f6f7;
    vertical-align: top;
    max-width: 300px; }
    .login-container .marketing-wrapper .marketing-container {
      padding: 20px;
      align-self: center; }
      .login-container .marketing-wrapper .marketing-container h2 {
        font-size: 27px;
        line-height: 30px;
        padding-right: 50px;
        margin-bottom: 20px; }
      .login-container .marketing-wrapper .marketing-container h3 {
        font-size: 17px;
        padding-bottom: 20px;
        padding-right: 20px;
        margin: 0;
        line-height: 20px;
        font-weight: 200; }
      .login-container .marketing-wrapper .marketing-container .icon-label {
        padding-bottom: 20px;
        line-height: 24px;
        font-size: 23px;
        font-weight: 200; }

.unmask-password {
  width: 45px;
  text-align: center; }

.frg-button {
  line-height: 14px;
  font-size: 14px;
  margin: -1px 0 -1px 10px;
  padding: 5px;
  float: right;
  display: block; }
  .frg-button.color-purple {
    color: #fff;
    border: none;
    background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #8c68a6), color-stop(90%, #8c68a6), color-stop(90%, #49166d), color-stop(100%, #49166d));
    background-image: -webkit-linear-gradient(#8c68a6 0%, #8c68a6 90%, #49166d 90%, #49166d);
    background-image: -moz-linear-gradient(#8c68a6 0%, #8c68a6 90%, #49166d 90%, #49166d);
    background-image: -o-linear-gradient(#8c68a6 0%, #8c68a6 90%, #49166d 90%, #49166d);
    background-image: linear-gradient(#8c68a6 0%, #8c68a6 90%, #49166d 90%, #49166d);
    background-color: #8c68a6; }

.frg-button.color-purple:hover, .frg-button.color-purple:focus, .frg-button.color-purple.state-selected {
  color: #fff;
  background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #49166d), color-stop(90%, #49166d), color-stop(90%, #49166d), color-stop(100%, #49166d));
  background-image: -webkit-linear-gradient(#49166d 0%, #49166d 90%, #49166d 90%, #49166d);
  background-image: -moz-linear-gradient(#49166d 0%, #49166d 90%, #49166d 90%, #49166d);
  background-image: -o-linear-gradient(#49166d 0%, #49166d 90%, #49166d 90%, #49166d);
  background-image: linear-gradient(#49166d 0%, #49166d 90%, #49166d 90%, #49166d);
  background-color: #49166d; }

@media only screen and (min-width: 64.0625em) {
  .login-container {
    max-width: 765px;
    padding: 15px; }
  .login-container .telus-checkbox {
    margin-bottom: 40px; }
  .login-container .login-picture p {
    bottom: 100px;
    padding: 20px 10px 0; } }

@media only screen and (min-width: 768px) {
  .login-container {
    width: 700px;
    margin: auto; }
  .login-container .telus-checkbox {
    margin-bottom: 15px; }
  .login-container .login-picture p {
    bottom: 105px;
    padding: 20px 10px 0; } }

@media only screen and (max-width: 767px) {
  .login-container .marketing-wrapper {
    display: block;
    width: 100%;
    margin: 40px auto 0; }
    .login-container .marketing-wrapper .marketing-container {
      width: 100%; }
      .login-container .marketing-wrapper .marketing-container h2 {
        padding-top: 22px; }
  .login-container h3 a {
    padding-top: 3px;
    font-size: 0.9375rem; }
  .login-container .telus-checkbox {
    margin-bottom: 35px; }
  .login-container .login-picture p {
    bottom: 105px;
    padding: 20px 10px 0; } }

.header-alert {
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 30px;
  display: none;
  -webkit-transition: background-color 2s linear;
  -moz-transition: background-color 2s linear;
  -ms-transition: background-color 2s linear;
  -o-transition: background-color 2s linear;
  transition: background-color 2s linear; }
  .header-alert h3,
  .header-alert h4,
  .header-alert h5 {
    font-family: "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
    font-weight: 200; }
  .header-alert h3 {
    font-size: 1.6875rem; }
  .header-alert h3 .telus-icon {
    margin-right: 15px; }
    .header-alert h3 .telus-icon.icon-warning {
      font-size: 28px;
      height: 26px; }
    .header-alert h3 .telus-icon.icon-success {
      height: 40px; }
  .header-alert h3 span {
    vertical-align: top;
    display: inline-block; }
  .header-alert h4 {
    font-size: 0.9375rem; }
  .header-alert h5 {
    font-size: 0.875rem; }
  .header-alert h3 div.telus-icon {
    color: #C81235;
    display: inline-block;
    font-size: 1.875rem; }
  .header-alert.alert-error {
    background-color: #fde9ed; }
  .header-alert.alert-error h3,
  .header-alert.alert-error h5 {
    color: #C81235; }
  .header-alert.alert-error div.telus-icon {
    color: #C81235; }
  .header-alert.alert-success h3,
  .header-alert.alert-success h5 {
    color: #66CC00; }
  .header-alert.alert-success div.telus-icon {
    color: #66CC00; }
  .header-alert.show-alert {
    display: block; }
  .header-alert.fade {
    background-color: white; }

@media only screen and (min-width: 64.0625em) {
  .header-alert h3 span {
    padding-top: 2px;
    font-size: 1.6875rem; } }

@media only screen and (min-width: 40.0625em) and (max-width: 64em) {
  .header-alert h3 span {
    padding-top: 5px;
    font-size: 1.5rem; } }

@media only screen and (max-width: 40em) {
  .header-alert h3 span {
    padding-top: 8px;
    font-size: 1.125rem; } }

.form-container {
  background-color: white;
  margin-bottom: 15px;
  margin-left: auto;
  margin-right: auto;
  border: #ededed 1px solid; }
  .form-container .panel-header {
    margin-top: 30px;
    margin-bottom: 10px; }
  .form-container h2 {
    margin-top: 0px;
    font-weight: 100;
    color: #666666; }
    .form-container h2 a {
      padding-top: 15px;
      font-weight: 300; }
  .form-container .panel.color-purple {
    background-color: #f0eef3 !important; }
  .form-container .panel.panel-single {
    padding: 10px 15px;
    margin-bottom: 0;
    font-size: 14px;
    line-height: 2.21; }
    .form-container .panel.panel-single label {
      font-weight: 200; }

.form-section_brdbot {
  border-bottom: #ededed 1px solid;
  padding-bottom: 30px; }

.sso-container .form-header + .panel-header {
  margin-top: 20px; }

.sso-container .form-header h4 {
  color: #666666;
  font-weight: 100;
  margin: 0; }

.sso-container .form-header h6 {
  color: #666666;
  font-weight: normal;
  margin-bottom: 0; }

.sso-container .form-header p {
  color: #666666;
  font-weight: 300; }

.sso-container {
  max-width: 400px;
  margin-left: auto;
  margin-right: auto; }
  .sso-container .sso-form h3,
  .sso-container .sso-form label {
    color: #666666; }
  .sso-container .form-header + .panel-header {
    margin-top: 20px; }
  .sso-container .form-header h4 {
    color: #666666;
    font-weight: 100;
    margin: 0; }
  .sso-container .form-header h6 {
    color: #666666;
    font-weight: normal;
    margin-bottom: 0; }
  .sso-container .form-header p {
    color: #666666;
    font-weight: 300; }

.form-section .small {
  margin-top: 20px;
  margin-bottom: 0;
  font-size: 14px;
  color: #666666; }

.form-section div.input-group.input-error label.error-text, .form-section div.input-group.input-error p.error-text {
  padding: 10px; }

.form-section .telus-checkbox {
  margin-top: 20px;
  margin-bottom: 0;
  color: #666666;
  font-weight: 100; }
  .form-section .telus-checkbox div.input-group.input-error label.error-text:before, .form-section .telus-checkbox div.input-group.input-error p.error-text:before {
    content: '';
    display: none; }
  .form-section .telus-checkbox.regular label {
    position: relative;
    z-index: 900;
    padding: 0 0 0 35px; }
  .form-section .telus-checkbox.regular .icon {
    margin-top: 0;
    top: 0;
    width: 22px;
    height: 22px;
    line-height: 16px; }
  .form-section .telus-checkbox .telus-icon {
    color: #408000;
    margin-right: 0;
    font-size: 14px; }
  .form-section .telus-checkbox div.telus-icon.input-error-icon.icon-warning,
  .form-section .telus-checkbox div.telus-icon.icon-success.input-success-icon {
    display: none !important; }

div.input-group div.input-error-icon,
div.input-group div.input-success-icon {
  top: 0.6em;
  right: 0; }

div.input-group.input-error label.error-text:before,
div.input-group.input-error p.error-text:before {
  top: -15px; }

div.input-group.input-error label.error-text {
  margin-bottom: 24px;
  position: relative; }
  div.input-group.input-error label.error-text .error-header {
    color: #C81235;
    font-size: 24px; }

div.input-group.input-error label.error-text + .error-text {
  margin-top: 0;
  padding-top: 0; }
  div.input-group.input-error label.error-text + .error-text:before {
    display: none; }

@media only screen and (min-width: 40.0625em) and (max-width: 64em) {
  .form-container h2 {
    margin-bottom: 10px;
    line-height: 1; } }

@media only screen and (min-width: 40.0625em) {
  .form-container a.telus-button {
    margin-bottom: 0px; }
  .sso-container .form-section {
    padding: 25px 30px; } }

@media only screen and (max-width: 40em) {
  .form-container a.telus-button {
    margin-bottom: 45px; }
  .sso-container .form-section {
    padding: 15px; } }

#step-tracker {
  padding: 23px 0;
  border-bottom: 1px solid #e2e2e2;
  background-color: #f5f6f7;
  overflow-x: hidden; }
  #step-tracker ol {
    margin: 0;
    padding: 0;
    list-style-type: none;
    height: 50px; }
  #step-tracker ol li {
    position: relative;
    display: inline-block;
    text-align: center;
    height: 6px;
    width: 48%;
    border-top: 6px solid #e2e2e2;
    color: #333333; }
  #step-tracker ol li > a {
    position: absolute;
    top: 0;
    left: 0;
    width: 20px;
    height: 20px;
    display: inline-block; }
  #step-tracker ol li .symbol {
    position: absolute;
    top: -12px;
    left: -10px;
    width: 20px;
    height: 20px;
    line-height: 22px;
    display: inline-block;
    font-size: 12px;
    border-radius: 50%;
    background-color: #e2e2e2;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 12px;
    font-weight: bold; }
  #step-tracker ol li .description {
    position: absolute;
    top: 16px;
    left: -50px;
    width: 100px;
    text-align: center;
    font-size: 14px;
    color: #4b4b4b; }
  #step-tracker ol li.done {
    border-color: #66cc00; }
  #step-tracker ol li.done .symbol {
    background-color: #46a52f;
    color: white; }
  #step-tracker ol li.done {
    border-color: #66cc00; }
  #step-tracker ol li.done .symbol {
    background-color: #46a52f;
    color: white; }
  #step-tracker ol li.done a:hover .symbol {
    background-color: #8be234; }
  #step-tracker ol li.halfway .symbol {
    background-color: #46a52f;
    color: white; }
  #step-tracker ol li.current .symbol {
    background-color: #46a52f;
    color: white; }
  #step-tracker ol li:last-child {
    width: 0; }

@media only screen and (max-width: 40em) {
  #step-tracker {
    padding: 20px 40px; }
    #step-tracker ol li {
      width: 46%; } }