.buy-sell {
  position: relative;
  padding: 30px 30px 0 30px;
  flex: 1;
  @media (max-width: 991px) {
    padding: 10px 10px 0 10px;
    .width-50 {
      margin: 0px;
      & + .width-50 {
        margin-top: 1.25em;
      }
    }
    .quick-start {
      margin-top: 0px;
      fieldset .btc {
        padding-right: 16px;
      }
    }
  }
  @media (max-width: 767px) {
    padding: 10px 10px;
  }
  &.loading {
    height: 100%;
    overflow: hidden;
  }
  .disabled,
  &.disabled {
    &:after {
      top: 0;
      left: 0;
      content: '';
      z-index: 100;
      background: white;
      position: absolute;
      width: 100%;
      height: 100%;
      opacity: 0.5;
      cursor: not-allowed;
    }
  }
  table {
    table-layout: fixed;
    border-spacing: 1em;
    border-collapse: collapse;
    tr:nth-child(2) {
      padding-bottom: 0px;
    }
    tr:last-child {
      @extend .pbm;
    }
    .state {
      display: inline-block;
      min-width: 70px;
    }
  }
  .kyc-status {
    background-color: $grey;
  }
  @media(max-width: 991px) {
    .kyc-status {
      margin-top: 25px;
    }
  }
}

.currency-dropdown {
  max-height: 210px;
  min-width: auto;
  overflow: scroll;
  right: 0;
  left: auto;
}

.bc-modal.coinify {
  .modal-dialog {
    .modal-content {
      height: 100%;
      .modal-body {
        width: calc(100% - 1px);
        position: relative;
        height: 470px;
        overflow: auto;
        padding: 0px;
      }
    }
  }
}

.sfox-logo {
  img { width: 60px; }
  @media(max-width: 425px) {
    display: none;
  }
}

.partner-logo {
  height: 44px;
}

.bank-link {
  img {
    width: 25px;
  }
}

#buy {
  .modal-body {
    opacity: 1 !important;
  }
}

.buy-steps {
  .blue,
  .success,
  .width-20 {
    @include transition(color $slow);
  }
  i.ti-shopping-cart {
    -moz-transform: scale(-1, 1);
    -webkit-transform: scale(-1, 1);
    -o-transform: scale(-1, 1);
    -ms-transform: scale(-1, 1);
    transform: scale(-1, 1);
  }
}

.isx {
  padding: 0px;
}

.iframe {
  height: 560px;
  #isx-iframe {
    position: absolute;
    overflow: auto;
    height: 100%;
    width: 100%;
    border: 0;
    left: 0;
    top: 0;
  }
}

.modal .buy-steps {
  margin: auto;
  @media (min-width: 768px) {
    width: 450px;
  }
}

.pos-rel {
  .amount-input {
    top: 0;
    right: 0;
    position: absolute;
    input, button {
      border-top: 0px;
      border-radius: 0px;
    }
    button {
      margin-top: 1px;
    }
    .input-group-btn {
      width: 70px;
    }
  }
}

.copy-bar {
  top: 0;
  left: 0;
  width: 100%;
  height: 80px;
  position: absolute;
  padding: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  &.full {
    height: 100%;
    padding-top: 64px;
    align-items: flex-start;
  }
}

.bank-transfer {
  border: 0px;
  li {
    border: 0px;
    display: block;
    > span:first-child {
      @extend .em-500;
      @extend .mr-5;
    }
  }
}

.find-partner {
  height: 350px;
}

.signup-steps {
  .fade-in {
    -webkit-animation: fadeIn 1.25s ease-in 1 forwards;
    animation: fadeIn 1.25s ease-in 1 forwards;
    opacity: 0;

    @-webkit-keyframes fadeIn {
      to {
        opacity: 1;
      }
    }

    @keyframes fadeIn {
      to {
        opacity: 1;
      }
    }
  }

  .step-arrow {
    border-top: 1px solid  #727272;
    position: relative;

    &:before {
      content: '';
      position: absolute;
      right: -2px;
      background: #727272;
      height: 1px;
      width: 12px;
      top: -5px;
      transform: rotate(45deg);
    }

    &:after {
      content: '';
      position: absolute;
      right: -2px;
      background:  #727272;
      height: 1px;
      width: 12px;
      top: 3px;
      transform: rotate(-45deg);
    }
  }
  span.f-14 {
    width: 30px;
    height: 30px;
    line-height: 30px;
    border-radius: 15px;
    background: $basic-grey;
  }
  .primary {
    span.f-14 {
      background: $primary;
    }
  }
  .border-top {
    height: 5px;
  }
}

#plaid {
  border-width: 0px;
  display: block;
  height: 40px;
  width: 100%;
  &.enabled {
    position: fixed;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    display: block;
    z-index: 99999999;
    overflow-x: hidden;
    overflow-y: auto;
    height: 100%;
  }
}

.bank-logo {
  width: 50px;
  fill: #5f5f5f;
  @extend .mr-20;
  path {
    @include transition(fill $fast);
  }
}

label:hover,
input[type="radio"]:checked + label {
  .bank-logo {
    &.bbt {
      fill: #8a0025;
    }
    &.bofa {
      fill: #0052c2;
      .Logos__bofa--red-part {
        fill: #e92d0d;
      }
    }
    &.capone {
      fill: #a12831;
      .Logos__capone-type {
        fill: #003a6f;
      }
    }
    &.chase {
      fill: #175da5;
    }
    &.citi {
      fill: #092869;
      .Logos__citi--hat {
        fill: #e83035;
      }
    }
    &.fidelity {
      fill: #3f981a;
    }
    &.nfcu {
      fill: #0a447d;
    }
    &.pnc {
      &.Logos__pnc--circle {
        fill: #f28032;
      }
      &.Logos__pnc--type {
        fill: #0e69aa;
      }
    }
    &.schwab {
      fill: #008cda;
    }
    &.suntrust {
      fill: #00386d;
      .Logos__suntrust--fan {
        fill: #fab731;
      }
    }
    &.td {
      fill: #21aa21;
      .st0 {
        fill: #1b3f25;
      }
      .st1 {
        background-color: #fff;
      }
    }
    &.us {
      fill: #0c2074;
      .Logos__us--shield {
        fill: #de162b;
      }
      .Logos__us--us-text {
        fill: #fbfbfb;
      }
    }
    &.usaa {
      fill: #00365b;
    }
    &.wells {
      fill: #e62227;
    }
  }
}

.input-error {
  border-color: #a94442 !important;
}

.primary { color: $iris; }

.tabs-partner-logo { max-width: 60px; }

.shift-history {
  display: grid;
  grid-template-columns: 35% 25% 20% 20%;
}

.exchange-trade {
  display: grid;
  grid-template-columns: 35% 25% 20% 15% 5%;
  font-size: 13px;
}

.exchange-trade-header {
  display: grid;
  grid-template-columns: 35% 25% 20% 20%;
}

.recurring-buy-header {
  @extend .exchange-trade-header;
}

.recurring-trade {
  @extend .exchange-trade;
}

.exchange-status {
  display: grid;
  grid-template-columns: 50% 50%;
}

.child-trades {
  padding: 0px 20px;
  .exchange-trade {
    grid-template-columns: 34.4% 26% 21% 15%;
    @media(max-width: 768px) {
      grid-template-columns: 34.4% 26% 35%;
    }
    > div:first-child {
      span {
        padding-left: 5px;
      }
    }
  }
}

@media(max-width: 768px) {
  .exchange-trade-header {
    grid-template-columns: 35% 25% 40%;
    > div:last-child {
      padding-top: 5px;
      text-align: left;
    }
  }
  .exchange-trade { // shared with shapeshift
    grid-template-columns: 25% 15% 30% 30%;
    > div:last-child {
      text-align: inherit;
    }
  }
  .exchange-received {
    display: flex;
  }
  .exchange-status {
    grid-template-columns: 15% 85%;
    span {
      padding-left: 5px;
    }
  }
  .shift-history {
    grid-template-columns: 25% 15% 30% 30%;
  }
  .recurring-buy-header {
    grid-template-columns: 35% 25% 20% 20%;
  }
  .recurring-trade {
    grid-template-columns: 35% 25% 20% 20%;
  }

  .buy-sell {
    .exchange-trade {
      grid-template-columns: 35% 25% 40%;
      .exchange-exchanged {
        display: none;
      }
    }
  }
}

.switch {
  width: 30px;
  height: 30px;
  background-size: cover;
  transition: background-image $fast;
  background-image: url('../img/switch-regular.svg');
  &:hover {
    background-image: url('../img/switch-hover.svg');
  }
}

.recurring-buy {
  .fake-select {
    background-color: white !important;
  }
}

.f-11 { font-size: 11px; }
