// @import url(//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css);
// @import url(https://use.fontawesome.com/releases/v5.5.0/css/all.css);
@import '../../../sass/variables';

#chat21-star-rating-widget {
  background-color: #ffffff;
  width: 100%;
  height: 100%;
  font-size: 10px;
 
  // .c21-button {
  //   cursor: pointer;
  // }
  
  .c21-header {
    // overflow: hidden;
    // width: 100%;
    // height: 52px;
    .c21-header-button {
        z-index: 1;
        .c21-close-button {
            width: 31px;
            height: 31px;
            .c21-close-button-body {
              width: 31px;
              height: 31px;
              -webkit-appearance: initial;
              border: none;
            }
        }
    }
    .c21-header-container {
      display: flex;
      align-items: center;
      
      .c21-header-content {
        // width: auto;
        // height: auto;
        // padding: 0 40px;
        // position: absolute;
        // left: 30px;
        // right: 30px;
        .c21-title {
          position: absolute;
          left: 45px;
          right: 45px;
          display: inline-block;
          width: auto;
          height: 1.6em;
          line-height: 1.6em;
          padding: 0px;
          margin: 13px 0px;
          text-align: center;
          font-size: 1.6em;
          font-weight: 500;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;   
        }
      }
    }
  }
  .c21-body {
    // padding: 0px;
    // margin: 0px auto;
    // overflow-y: scroll;
    // height: calc(100% - 52px);
    overflow: hidden;
    .c21-body-header {
      padding: 10px 30px;
      .c21-message-field {
        padding: 0;
        margin: 0;
        line-height: 1.2em;
        color: #616161;
        font-size: 1.5em;
        text-align: center;
        word-wrap: break-word;
      }
    }
    .c21-body-content  {
      padding: 10px 0px;
      /* star-rating */
      .default-title {
        font-size: 2em;
        font-family:'Roboto';
        color:$black;
      }
      .default-text {
        font-size: 1.4em;
        font-family:'Roboto';
        // line-height: 1.2em;
        color:$black;
        margin: 0 0 4px 0;
      }
      .step-rate{
        text-align: center;
        position: relative;
        margin: 10px 0px;
      }
    }
  }

  //.modal-body {
    // .chat21-download-transcript-btn {
    //   margin: 6px;
    //   height: 34px;
    //   position: relative;
    //   border-radius: 40px; 
    //   z-index: 100;
    //   font-size: 13px;
    //   text-align: center;
    //   cursor: pointer;
    //   opacity: 1;
    //   margin-top: 25px;
    //   font-weight: 500;
    //   padding-right: 12px;
    //   padding-left: 12px;
    // }

    /* STEP 3 */
    // .modal-button-ok {
    //   font-size: 16px;
    //   color: #0c6bca;
    //   font-weight: bold;
    //   line-height: 60px;
    //   text-align: center;
    //   position: absolute;
    //   width: 100%;
    //   bottom: 0px;
    //   border-top: 1px solid #ccc;
    //   cursor: pointer;
    //   padding: 0;
    //   margin: 0;
    // }
  //}


  /****** Style Star Rating Widget *****/
  .chat21-rating { 
    border: none;
    width: 190px;
    min-height: 30px;
    margin: 20px auto;
    font-size: 1.6em;
    padding: 0px;
    input.c21-input-star {
      border: 0;
      width: 1px;
      height: 1px;
      overflow: hidden;
      position: absolute !important;
      clip: rect(1px 1px 1px 1px);
      clip: rect(1px, 1px, 1px, 1px);
      opacity: 0;
    }
    label.c21-button {
      position: relative;
      // float: right;
      display: inline;
      float: none;
      color: #C8C8C8;
    }
    label.c21-button:before {
      margin: 5px;
      // content: "\f005";
      // font-family: 'Font Awesome\ 5 Free';
      display: inline-block;
      // font-size: 1.5em;
      font-size: 24px;
      color: #ccc;
      -webkit-user-select: none;
      -moz-user-select: none;
      user-select: none;
    }
    input.c21-input-star:checked ~ label.c21-button:before {
      color: #FFC107;
    }
    label.c21-button:hover ~ label.c21-button:before {
      color: #ffdb70;
    }
    label.c21-button:hover:before {
      color: #FFC107;
    }
  }

  /* STEP 2 */
  //.chat21-yourRating
  .step-rate {
    // position: relative;
    // margin: 0px 0px;

    .chat21-stars {
      padding: 0px;
      position: absolute;
      text-align: right;
      display: block;
      top: 0px;
      right: 40px;
      width: 70px;
      line-height: 20px;
      fill: #FFD700;
    }

    svg.star{
      fill: #efefef;
    }
    svg.star:hover{
      fill: #FFD700;
      // stroke: #4e4305;
      stroke-width: 15px;
      transform: rotate(-15deg) scale(1.3)
    }
    svg.star.active{
      fill: #FFD700;
    }

    .fa-star:before { 
      margin: 0px;
      font-size: 1em;
      // font-family: 'Font Awesome\ 5 Free';
      // content: "\f005";
      display: inline-block;
      color: #FFD700;
    }

    textarea.textarea-rate {
      margin: 0 auto 10px auto;
      border: hidden;
      overflow-x: hidden;
      overflow-y: visible;
      -webkit-box-sizing: border-box;
      box-sizing: border-box;
      padding: 10px;
      color: $black;
      width: calc(100% - 40px);
      height: 80px;
      resize: none;
      font-size: 13px;
      border-radius: 6px;
      background-color: #fafafa;
      text-align: left;
    }
    // textarea.textarea-rate:hover,
    // textarea.textarea-rate:focus,
    // textarea.textarea-rate:active {
    //     // outline-width: 0px;
    // }
  }
  .c21-step-content { 
    margin: 10px 0 20px 0;
    position: relative;
  }

  .c21-button-primary{
    font-size: 1.4em;
    border: 1px solid;
    margin: 0px 10px;
  }

  .c21-link{
    cursor: pointer;
    font-size: 14px;
  }
  a.c21-link:visited,
  a.c21-link:link  {
    color: rgb(42, 106, 193);
  }
  
}
