@import '../../../assets/scss/_variables.scss';
@import '../../../assets/scss/_mixins.scss';

@import "../../../assets/fonts/icomoon/style.css";


.acf-field-webien-ai-settings-message-field-message {
  position: relative;
  background-color: $lightBlue;



  // ACF Boxes
  .loader {
    position: absolute;
    top: -10px;
    left: -10px;
    width: calc(100% + 20px);
    height: calc(100% + 20px);
    background-color: $lightBlue;
    z-index: 1;
    background-image: url($images + 'loader.svg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: 40px;
    display: none;

    .msg {
      padding: 20px 0;
      text-align: center;
    }

    &.generate {
      background-image: none;

      .bar {
        display: block;
      }
    }

    .bar {
      display: none;
      width: 70%;
      height: 4px;
      background-color: $gray-light;
      position: relative;
      border-radius: 2px;
      overflow: hidden;
      margin: 20px auto;

      .inner {
        width: 2%;
        height: 4px;
        background-color: $blue;
        transition: width 0.5s ease-in-out;
        position: absolute;
        top: 0;
        left: 0;

      }
    }

  }



  fieldset {
    border-radius: 10px;
    padding: 20px;
    border: 1px solid $border-color;


    legend {
      padding: 0 10px;
    }
  }

  .btns {
    display: flex;
    gap: 5px;
  }

  .check {
    display: flex;
    gap: 30px;
    margin-bottom: 30px;

    .item {
      display: flex;
      align-items: center;
      gap: 5px;
      line-height: 0;

      span {
        display: inline-block;

        i {
          font-size: 20px;
        }
      }

    }
  }

}


.swal2-container {
  .swal2-title {
    margin-top: 20px;
  }
  .swal2-confirm {
    background-color: $blue;
  }
}



// Real js App..
#webien-ai-dashboard {


}