/*
  Place all the styles related to the matching controller here.
  They will automatically be included in application.css.
*/

#telegram_chatbot {
  .form-check {
    position: relative;
    display: block;
    margin-bottom: 0.75rem;
    padding-left: 0;
  }

  .form-check-toggle {
    position: relative;
    padding-left: 0;
    line-height: 24px;

    input {
      display: block;
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      width: 0%;
      height: 0%;
      margin: 0;
      cursor: pointer;
      opacity: 0;
      filter: alpha(opacity=0);
    }

    input + span {
      cursor: pointer;
      user-select: none;
      height: 24px;
      margin-left: 70px;
      display: block;

      &:before {
        content: '';
        position: absolute;
        left: 0;
        display: inline-block;
        height: 24px;
        width: 44px;
        background: #FFF;
        border: solid 1px #eff2f3;
        //box-shadow: inset 0 0 5px $engie-gray-10;
        transition: background 0.3s ease-in-out, border-color 0.3s ease-in-out;
        border-radius: 15px;
      }

      &:after {
        width: 22px;
        height: 22px;
        margin-top: 1px;
        margin-left: 1px;
        border-radius: 50%;
        position: absolute;
        left: 0;
        top: 0;
        display: block;
        background: #FFF;
        transition: margin-left 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
        text-align: center;
        font-weight: bold;
        content: '';
        //border: solid $engie-black-01 0.05rem;
        box-shadow: 0 0 2px rgba(0, 0, 0, 0.2), 0 0 5px rgba(0, 0, 0, 0.05);
      }
    }

    input {
      &:checked + span {
        &:after {
          content: '';
          margin-left: 21px;
          box-shadow: none;
        }

        &:before {
          background-color: #86be4e;
          border-color: #86be4e;
          transition: background 0.3s ease-in-out, border-color 0.3s ease-in-out;
        }
      }
    }
  }

  .image {
    max-width: 600px;
    margin: 20px 0;
  }

}