.billderWrap{
  .guide  a {
    color:$main;

  }
  header{
    background: radial-gradient(circle farthest-corner at 200px 0, #454545, #090f17);
    padding:3em 0 1em 0;
    text-align: center;
    margin-left: -20px;
  }

  .info{
    margin-left: -20px;
    padding:1em;
    box-sizing: border-box;
    background: #d0d0d0;
    color: #FFF;

    &.failure{
      background: $error;
    }

    &.success{
      background:$success;
    }

    &.limited{
      background:$warning;
    }
  }

  #logo_product{
    width:20em;
  }


  form,.connected{
    padding:2em 0;
    width:40%;
    min-width: 20em;
    margin: auto;
    .row{
      margin-bottom:2em;
      text-align: center;
      label{
        width: 100%;
        display: block;
        text-align: center;
        color: $grey;
        font-size: 1.2em;
        margin-bottom:.3em;
      }


      .url_input{
        width:100%;
        text-align: left;
      }

      input{
        width:100%;
        border-radius: 1em;
        padding:.5em 1em;
        border: none;
        outline: none !important;
        box-shadow: none !important;

        &[name="url"]{
          width:50%;
          text-align: right;
          border-radius: 0;
          background: transparent;
          border-bottom:solid 2px $main;
          padding: 0;
          color: $main;
          font-size: 1.4em;
        }
      }


      span.url{
        color: $main;
        font-size: 1.4em;
      }

      button{
        background: $main;
        padding:.5em 1em;
        border:none;
        color: #FFF;
        border-radius: 1em;
        font-size: 1.2em;
        letter-spacing: 1px;
        text-transform: uppercase;
        cursor: pointer;
        transition: .3s;
        outline: none;

        &:hover{
          background: $black;
        }
      }

      &.start{
        .step{
          display: inline-flex;
          width: 2em;
          height:2em;
          background: $main;
          color:#FFF;
          align-items: center;
          justify-content: center;
          font-size: 1.4em;
          border-radius: 2em;
        }

        p{
          font-size: 1.1em;
        }

        .register{
          color:$grey;
        }

        a{
          color: $main;
        }
      }
    }
  }

  .connected{
    background: #FFF;
    margin-top:3em;
    padding:1em;
    text-align: left;

    .line{
      width:100%;
      border-bottom: solid 1px #d9d9d9;
      padding:.5em 0;
      text-align: left;

      h4{
        width:50%;
        display: inline-block;
        margin: .5em 0;
      }

      .info_line{
        display: inline-flex;
        width:49%;
        justify-content: flex-end;
        align-items: center;
        span{
          &.link_ico{
            display: inline-flex;
            width:2em;
            height:2em;
            border-radius: 2em;
            background: $success;
            align-items: center;
            justify-content: center;
            color:#FFF;
            margin-left: .5em;

            img{
              width: 1em;
              height:auto;
            }
          }
        }
      }


    }
    form{
      text-align: right;
      width: 100%;
      margin: 0;
      padding: 0;
      margin-top:2em;

      &.settings{
        text-align: left;

        button{
          margin-top:2em;
        }

        input[type="checkbox"]{
          display: none;

          +label{

            width:100%;
            position: relative;
            display: inline-block;
            cursor: pointer;
            padding-right: 55px;
            text-align: right;
            padding-top:5px;
            transition: .3s;

            &:hover{
              color: $main;
            }

            &::before{
              content:'';
              display: inline-block;
              width:45px;
              height:25px;
              background: #c5c5c5;
              -webkit-border-radius: 20px;
              -moz-border-radius: 20px;
              border-radius: 20px;
              position: absolute;
              top :3px;
              cursor: pointer;
              transition:.3s;
              right:0;
            }

            &::after{
              position: absolute;
              content:'';
              width:16px;
              height:16px;
              border-radius: 20px;
              background: #FFF;
              top:7px;
              right:23px;
              z-index: 1;
              transition:.3s;
            }

          }
          &:checked+label{
            &::before{
              background: $main;
            }

            &::after{
              right: 5px;
            }
          }
        }
      }

      button.logout{
        border: none;
        padding:0;
        color: $error;
        text-align: right;
        background: none;
        cursor: pointer;
      }
    }

  }

  #show_logs{
    text-align: center;
    display: block;
    margin:1em auto;
    width:20em;
  }
}