.desktop-only {
  display: block; }
  @media (min-width: 768px) and (max-width: 991px) {
    .desktop-only {
      display: none; } }
  @media (max-width: 767px) {
    .desktop-only {
      display: none; } }

.mobile-only {
  display: none; }
  @media (min-width: 768px) and (max-width: 991px) {
    .mobile-only {
      display: block; } }
  @media (max-width: 767px) {
    .mobile-only {
      display: block; } }

.shift-right {
  margin-right: -15px; }
  @media (min-width: 768px) and (max-width: 991px) {
    .shift-right {
      margin-right: 0; } }
  @media (max-width: 767px) {
    .shift-right {
      margin-right: 0; } }

.shift-left {
  margin-left: -15px; }
  @media (min-width: 768px) and (max-width: 991px) {
    .shift-left {
      margin-left: 0; } }
  @media (max-width: 767px) {
    .shift-left {
      margin-left: 0; } }

.shift-right-mobile {
  margin-right: 0; }
  @media (min-width: 768px) and (max-width: 991px) {
    .shift-right-mobile {
      margin-right: -15px; } }
  @media (max-width: 767px) {
    .shift-right-mobile {
      margin-right: -15px; } }

.shift-left-mobile {
  margin-left: 0; }
  @media (min-width: 768px) and (max-width: 991px) {
    .shift-left-mobile {
      margin-left: -15px; } }
  @media (max-width: 767px) {
    .shift-left-mobile {
      margin-left: -15px; } }

.dsulogin-statusbar {
  padding: 60px 0;
  max-width: 700px;
  margin: auto; }
  @media (max-width: 767px) {
    .dsulogin-statusbar {
      padding: 30px 0; } }
  .dsulogin-statusbar ul {
    list-style-type: none;
    display: table;
    width: 100%;
    position: relative;
    padding: 0;
    margin: 0;
    text-transform: uppercase;
    font-family: "Source Sans Pro", Arial, sans-serif;
    font-weight: bold;
    color: #76777B;
    font-size: 16px;
    line-height: 1.2; }
    .dsulogin-statusbar ul li {
      height: 80px;
      position: relative;
      display: table-cell;
      text-align: center; }
      .dsulogin-statusbar ul li:before, .dsulogin-statusbar ul li:after {
        content: "";
        position: absolute; }
      .dsulogin-statusbar ul li:before {
        z-index: 1;
        background: #D1D0CE;
        height: 2px;
        top: 15px;
        left: -50%;
        right: 50%; }
      .dsulogin-statusbar ul li:after {
        top: 10px;
        z-index: 2;
        background: #D1D0CE;
        left: 50%;
        margin-left: -5px;
        height: 13px;
        width: 13px;
        border-radius: 50%; }
      .dsulogin-statusbar ul li > div {
        min-height: 60px;
        padding-top: 40px;
        position: absolute;
        margin-left: -60px;
        left: 50%;
        width: 120px;
        transition: all 0.4s ease-in-out; }
        @media (max-width: 767px) {
          .dsulogin-statusbar ul li > div {
            display: none; } }
      .dsulogin-statusbar ul li.completed:before, .dsulogin-statusbar ul li.active:before {
        background: #00A4E4; }
      .dsulogin-statusbar ul li.completed:after, .dsulogin-statusbar ul li.active:after {
        top: 0;
        width: 30px;
        margin-left: -15px;
        height: 30px;
        background: transparent url(../../images/dsulogin-statusbar-dot.svg) no-repeat top center; }
      .dsulogin-statusbar ul li.completed:after {
        background: white url(../../images/icon-checkmark-green.svg) no-repeat top center; }
      .dsulogin-statusbar ul li.active {
        color: #00A4E4; }
        @media (max-width: 767px) {
          .dsulogin-statusbar ul li.active {
            color: #4A4A49; } }
        .dsulogin-statusbar ul li.active > div {
          display: block; }
      .dsulogin-statusbar ul li:first-of-type:before {
        left: 50%; }

/*# sourceMappingURL=statusbar.css.map */