// @keyframes flash {
//   0% {
//     left: -150px;
//   }
//   100% {
//     left: 120%;
//   }
// }
.my-car {
  // padding-top: $rz-spacing-col-xxxl;
  height: 100vh;
  background: $rz-bg-color-grey;
  &__tip {
    margin: $rz-spacing-col-base $rz-spacing-row-xxxl;
    color: $rz-text-color;
  }
}
.card {
  box-sizing: border-box;
  margin: 32px auto;
  // margin-top: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  width: 686px;
  // height: 258px;
  background: white;
  border-radius: 20px;
  color: white;
}
.car-card {
  box-sizing: border-box;
  justify-content: space-between;
  padding: 48px;
  padding-top: 38px;
  padding-bottom: 20px;
  background: url('../../assets/images/my-car/img_mycar_bg.png') no-repeat;
  background-size: 100%;
  position: relative;
  .top {
    width: 100%;
    display: flex;
    justify-content: space-between;
    .left {
      display: flex;
      &__logo {
        width: 100px;
        height: 100px;
        border-radius: 100px;
      }
      .left-info {
        margin-left: 12px;
        height: 100px;
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        flex-direction: column;
        &__palate-no {
          font-size: 34px;
        }
      }
    }
    .right {
      width: 160px;
      height: 52px;
      line-height: 52px;
      text-align: center;
      font-size: 24px;
      border: 2px solid #fff;
      border-radius: 36px;
      &.set-default {
        background: white;
        color: $rz-color-primary;
      }
    }
  }
  .bottom {
    width: 100%;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    font-size: 24px;
    padding-top: $rz-spacing-col-sm;
    &__clock {
      width: 26px;
      height: 26px;
      margin-right: 12px;
    }
    &__time {
      margin-right: 20px;
    }
  }
  .close {
    width: 48px;
    height: 48px;
    position: absolute;
    right: -16px;
    top: -16px;
  }
}
.add-card {
  padding: $rz-spacing-col-base 0;
  &__img {
    width: 90px;
    height: 90px;
  }
  &__txt {
    margin-top: 22px;
    color: $rz-color-primary;
    font-size: 32px;
    font-weight: 500;
  }
}

.station-detail {
  background: #f9f9f9;
  padding-bottom: 120px;
  &__list {
    margin-top: $rz-spacing-col-base;
  }
  &__list2 {
    border-top: 2px solid #f9f9f9;
    margin-bottom: $rz-spacing-col-base;
  }
  &__phone {
    font-size: $rz-font-size-xl;
    color: $rz-color-primary;
    font-weight: 500;
  }
  &__white {
    padding-bottom: constant(safe-area-inset-bottom);
    padding-bottom: env(safe-area-inset-bottom);
  }
  .strong {
    font-weight: 500;
  }
  &__modal {
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    display: none;
    z-index: $zindex-modal;
  }
  &--active {
    display: block;
    .station-detail__overlay,
    .station-detail__container {
      opacity: 1;
    }
  }
  &__overlay,
  &__container {
    opacity: 0;
    transition: opacity 0.2s ease-in;
  }
  &__overlay {
    @include overlay;
  }
  &__container {
    position: absolute;
    left: 32px;
    top: 30%;
    width: 686px;
    background: rgba(255, 255, 255, 1);
    box-shadow: 0px 0px 20px 0px rgba(54, 64, 110, 0.16);
    border-radius: 20px;
    box-sizing: border-box;
    padding: 32px 50px;
  }
  &__title {
    text-align: center;
  }
  &__input {
    margin-top: 36px;
    margin-bottom: 50px;
    height: 120px;
    background: #ecf6ee;
    opacity: 0.5;
    border-radius: 8px;
    padding-left: 37px;
  }
  &__box {
    display: flex;
    justify-content: space-between;
    .foo {
      width: 250px;
      // height: 68px;
    }
  }
}


.station-footer {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: $rz-text-color-inverse;
  height: 120px;
  padding: 0 $rz-spacing-row-xxxl;
  padding-bottom: constant(safe-area-inset-bottom);
  padding-bottom: env(safe-area-inset-bottom);
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  box-shadow: 0px 0px 15px 1px rgba(111, 140, 192, 0.3);
}

.btnCtrl {
  color: #ffffff;
  border-radius: 45rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row;
  padding: 0 36rpx;
  height: 90rpx;
  background: #23bf69;  
}

.btn1 {
  background: #ecf6ee;
  color: #23bf69;
  margin-right: 20px;
}

.btn2 {
  margin-left: 20px;
}