.row.spacing h2 {
  font-size: 20pt;
  font-weight: 200;
  border-bottom: 1px solid #E0E0E0;
  color: #898989;
  display: block;
  padding-bottom:15px;
}

.security-center-ui {
  width: 100%;
  .edit-mobile {
    .btn-info{
      margin: 5px;
    }

    // Our custom CSS causes layout issues for bc-phone-number:
    .caret {
      padding-left: 0px !important;
      margin-left: 0px;
      margin-right: -3px;
    }

    button.dropdown-toggle {
      border: none;
      background-color: white !important;
    }
  }
}

.btn-verify {
  margin: 3px 0 0 -20px
}

.actionHolder{padding: 0;}
.hasBadge{display: none;}
.securityhide{display: none;}

.security-center-ui {
  padding: 15px 30px;
  margin-bottom: 3em; //offset for animation
  .intl-tel-input{
    width:100%;
    margin: 0 0 10px 0!important;
    input{padding: 10px 40px!important;}
    .country{float: none!important; width: auto!important;}
  }
  .verifyemail {
    background: none;
    border: none;
  }
  section.level {
    margin-bottom: 30px;
    .level-badge {
      height: auto;
    }
  }
  header {
    margin-bottom: 20px;
  }
  ul {
    background-color: #fdfdfd;
    border: 1px solid #eaeaea;
    list-style: none;
  }
  .level-badge {
    width: 22%;
    position: relative;
    transition: all .3s ease-in-out;
    &.active {
      background-color: white;
      border-bottom: none;
      font-weight: bold;
      border-top: none;
      box-shadow: 0px 0px 8px 4px rgba(243, 243, 243, 1) inset;
      @media (min-width: 769px) {
        border-right: 1px solid rgb(234, 234, 234);
        border-left: 1px solid rgb(234, 234, 234);
        box-shadow: 0px 4px 8px -1px rgba(243, 243, 243, 1) inset;
        &:nth-child(2) {
          border-left: 0px;
        }
      }
      &:after {
        content: '';
        width: 100%;
        height: 1px;
        bottom: -1px;
        position: absolute;
        background-color: #fff;
      }
    }
    img {
      opacity: .3;
      -webkit-filter: grayscale(100%);
      filter: grayscale(100%);
    }
    > a {
      display: block;
      text-align: center;
      width: 100%;
      padding: 20px 15px 20px 15px;
      cursor: pointer;
      img {
        width: 75px;
      }
      p {
        margin: 10px 0 0;
        color: rgba(0, 0, 0, 0.5);
      }
    }
  }
  .badge-active {
    img {
      opacity: 1;
      -webkit-filter: none;
      filter: none;
    }
    a {
      cursor: default;
    }
  }
  .level-header {
    border-right: 1px solid #ebebeb;
    padding: 30px 35px;
    height: auto;
    img {
      width: 85px;
    }
  }
  .badge-panel {
    border: 1px solid rgb(234, 234, 234);
    position: relative;
    border-top: none;
    padding: 30px;
    z-index: 10;
    input {
      border: none;
      border-bottom: 1px solid #DBDBDB;
      width: 100%;
      padding: 0;
      font-size: 1.3em;
      border-radius: 0px;
      background-color: white;
      box-shadow: none;
      height: 38px;
      &:focus { outline: none; }
      &:active { border-bottom: 1px solid rgb(145, 208, 232); }
    }
    p {
      font-weight: 300;
      color: rgb(117, 117, 117);
      line-height: 1.5em;
      margin: 0;
      word-wrap: break-word;
    }
  }
  .block-tor-actions {
    flex: 1;
  }
}

.edit-mobile {
  .intl-tel-input {
    flex: 1;
  }
}

.offset-flag {
  .selected-flag {
    bottom: 4px;
    left: -5px;
  }
}

.level-complete {
  width: 75px;
  height: 75px;
  border: 5px solid $bright-green;
  border-radius: 100%;
  i { font-size: 2em; }
}

.security-center-ui {
  .level-incomplete-container,
  .level-complete-animation,
  .level-complete-container {
    top: 20px;
    display: block !important;
    @include transform-center-horizontal;
    &.ng-hide {
      opacity: 0;
      &:not(.ng-animate) {
        @include transition(opacity 0s);
      }
    }
  }

  .level-complete-animation,
  .level-complete-container {
    &.ng-hide {
      opacity: 0;
      z-index: -1;
      @include transition(opacity 0s);
    }
  }

  // step 1
  .level-incomplete-container {
    top: 0px;
    opacity: 1;
    z-index: 3;
    position: relative;
    @include transition(opacity .4s, transform .4s);
    &.ng-hide-add-active {
      -webkit-transform: translate3d(-80%, 0, 0);
      transform: translate3d(-80%, 0, 0);
    }
  }

  // step 2
  .level-complete-animation {
    z-index: 2;
    opacity: 0;
    @include transition(opacity .2s .6s);
    &.ng-hide-remove.ng-hide-remove-active {
      opacity: 1;
    }
  }

  // step 3
  .level-complete-container {
    @include transition(all .4s 1.6s);
    height: auto !important;
    opacity: 1;
    z-index: 3;
  }

  //override tooltip
  .tooltip {
    font-family: "Montserrat", sans-serif;
    &.in {
      opacity: 1;
    }
  }
  .tooltip-arrow {
    border-top-color: #ccc !important;
    border-bottom-color: #ccc !important;
  }
  .tooltip-inner {
    background: white;
    border: 1px solid #ccc;
    padding: 1em;
    box-shadow: 0 2px 10px 0 #DDDDDD;
  }
}

@media (max-width: 620px) {
  .security-center-ui header {
    flex-direction: column;
  }
}

@media (max-width: 767px) {
  .security-center-ui {
    ul {
      flex-direction: column;
      height: auto;
    }
    .level-header {
      width: 100%;
      display: flex;
      justify-content: center;
      img {
        height: 85px;
      }
    }
    .level-badge {
      width: 100%;
    }
    .button-lg {
      font-size: 1em;
    }
    .intl-tel-input input {
      padding: 0 !important;
      padding-left: 35px !important;
    }
    .backup-phrase-actions {
      .button-success {
        padding: 1.8em 1.2em;
        font-size: .8em;
      }
    }
    .offset-flag .selected-flag {
      bottom: 2px;
    }
  }
}
