@import "../style/common_mixin.scss";

.body-bg {
  position: absolute;
  top: 0px;
  left: 0px;
  right: 0px;
  bottom: 0px;
  background-image: url('../../assets/player-bg.png') !important;
  background-size: 100%;
}

.player-border{
  position: absolute;
  left: calc((100% - 100vh * 1.36)/ 2);
  top: 5vh;
  right: calc((100% - 100vh * 1.36)/ 2);
  bottom: 5vh;
  text-align: center;
  // box-shadow: 0 2px 12px 0 rgba(0,0,0,.3);
  border-radius: 11px;
  border: 20px solid #23b1c2;
  background-color: #fff;
  overflow: hidden;
  color: #303133;
  transition: .3s;
}

.p-content {
  width: 100%;
  height: 100%;
  background-image: url("../../assets/daily-conversation/bg.jpg");
  @include k-img-bg();
}

.p-conversation-box {
  padding: 20vh 7vh 5vh 7vh;
  justify-content: center;
}

.p-conversation {
  border: 0.5rem solid;
  border-radius: 1rem;
  background-color: #fff;
  height: 20vh;
  display: flex;
  align-items: center;
  justify-content: center;
  color: brown;
  font-size: 1.1rem;
  padding: 1rem;
  margin-bottom: 2rem;
}

.p-popup-box {
  position: absolute;
  top: 8vh;
  width: 108vh;
  min-height: 63vh;
  left: 50%;
  margin-left: -54vh;
  border: 0.5rem solid;
  border-radius: 2rem;
  background-color: #fff;
  .i-close {
    position: absolute;
    right: -1.5rem;
    top: -1.5rem;
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    font-size: 2rem;
    color: white;
    background-color: #c66820;
    border: 2px solid #b65810;
    font-weight: bold;
    text-align: center;
  }
  .i-text {
    font-size: 5vh;
    color: brown;
    padding: 1vh;
  }
  .p-options {
    height: 40vh;
    padding: 0 4vh;
    justify-content: center;
    align-items: center;

    .p-option {
      position: relative;
      background-color: #eee;
      border-radius: 1rem;
      border: 1px solid #ddd;
      width: 100%;
      margin-bottom: 1.5vh;
      @include k-img-bg();
      &:before {
        content: "";
        display: block;
        position: relative;
        padding-bottom: 56.25%;
        width: 100%;
      }
    }
  }
  .p-cur-option {
    position: absolute;
    background-color: #eee;
    border-radius: 1rem;
    border: 1px solid #ddd;
    width: 60%;
    left: 20%;
    top: 2vh;
    @include k-img-bg();
    &:before {
      content: "";
      display: block;
      position: relative;
      padding-bottom: 56.25%;
      width: 100%;
    }
  }
}
