@import "_colors";
.form{
    padding:50px;
    padding-top:20px;
    padding-bottom:20px;
    width:900px;
    display:block;
    margin-left:auto;
    margin-right:auto;
    max-width:100%;

    .formSuccess{
      display:block;
      box-shadow:0px 0px 10px rgba(0,0,0,0.1);
      font-size:14px;

      background-color:#c8e6c9;
      margin-bottom:20px;

      text-align:center;
      border-radius:3px;
      height:0px;
      transform:rotateX(90deg);
      transition:all 0.5s ease-in-out;
      &.show{
        transform:rotateX(0deg);
        height:auto;
                  padding:18px;
      }
    }

    h3{
      font-size:30px;
      font-weight:200;
      line-height:40px;
      margin-bottom:0px;
      padding-bottom:10px;

      position:relative;
      .helpText{
        position:absolute;
        right:0px;
        top:0px;
        line-height:40px;
        font-size:15px;
      }

      
    }

    @media screen and (max-width:500px){
      h3{
        font-size:20px;
        line-height:26px;
        text-align:center;

        .helpText{
          position:relative;
          display:block;
          text-align:center;
        }
      }
    }

    small{
      padding-left:14px;
      color:#666;

      &.disclaimer{
        text-align:center;
        padding-right:14px;
        display:block;

        a{

          color:#000;
        }
      }
    }




    .errorMessage{
      display:block;
      position:fixed;
      top:10px;
      right:0px;
      z-index:99999999999999;
      width:0px;
      font-size:14px;
      text-align:center;
      color:#fff;
      border-radius:3px;
      margin-bottom:20px;
      background-color:#f44336;
      transition:all 0.3s ease-in-out;

      &.show{
        padding:18px;
        width:300px;

      }
    }

    label{
      display:block;
      position:relative;

      background-color:#fff;
      box-shadow:0px 0px 10px rgba(0,0,0,0.1);
      font-size:14px;
      width:100%;
      border-radius:3px;
      margin-bottom:20px;
      font-family:monospace;
      font-size:10px;

      .rightText{
        position:absolute;
        right:0px;
        top:0px;
        padding:21px;
        line-height:20px;
        font-size:12px;
        background-color:#fff;

        &::after{
          content:'';
          display:block;
          left:-30px;
          top:0px;
          height:100%;
          width:30px;
          background:linear-gradient(to left,rgba(255,255,255,0),rgba(255,255,255,1));

        }
      }

      &.promoCodeField{
        width:400px;
        max-width:100%;
        position:relative;
        display:block;
        margin-left:auto;
        padding-right:100px;
        button{
          position:absolute;
          right:0px;
          top:0px;
          background-color:steelblue;
          height:100%;
          border-radius:3px !important;
          color:#fff;
          padding:3px;
          line-height:16px;
          font-size:12px;
          width:100px;
        }
      }

      &.withPrefix{
        .prefix{
          display:block;
          position:absolute;
          color:#666;
          top:0px;
          left:10px;
          padding-top:20px;
          padding-left:0px;
          font-family:monospace;
          font-size:10px;


        }
        input{
          padding-left:0px;
        }
      }


      &.loading{
        &::after{
          position:absolute;
          top:0px;
          left:0px;
          width:100%;
          display:block;
          height:100%;
          line-height:60px;
          text-align:center;
          color:#fff;
          text-shadow:-1px -1px 0px rgba(0,0,0,.2);
          content:'Gathering Info...';


        }
        &::before{
          position:absolute;
          top:0px;
          left:0px;
          width:100%;
          background:linear-gradient(to left,$color_purple,rgba(255,255,255,0));
          opacity:0.5;
          display:block;
          height:100%;
          content:'';

          animation: loadingAnimation 1.5s linear infinite;
        }
      }

      input, select{
        font-size:16px;
        padding:18px;
        width:100%;
        background-color:#fff;
        border-radius:3px; border:0px;
        border:0px;
        outline:0px;
        padding-left:60px;
        transition:border 0.3s ease-in-out;

        &.error{
          border:1px solid red;
        }

      }
      &.error{
        border:1px solid red;
      }

      small{
        display:block;
        padding:5px;
        border-top:1px solid #ececec;
        background-color:#fcfcfc;
        padding-left:20px;
      }

      textarea{
        font-size:14px;
        padding:18px;
        width:100%;
        border-radius:3px; border:0px;
        border:0px;
        outline:0px;
        height:200px;
        font-family:sans-serif;
        padding-left:60px;
        transition:border 0.3s ease-in-out;

        &.error{
          border:1px solid red;
        }
      }

      ion-icon, svg.ionicon{
        position:absolute;
        top:18px;
        cursor:pointer;
        font-size:20px;
        width:20px;
        height:20px;
        left:14px;
      }
    }

      label.checkbox{
        display:block;
        position:relative;
        background-color:#fcfcfc;
        padding:15px;
        line-height:20px;
        box-shadow:none;
        font-size:14px;
        color:#333;

        width:100%;
        border-radius:3px;
        margin-bottom:20px;
        padding-left:60px;
        cursor:pointer;
        text-align:left;

        input{

          width:24px;
          height:24px;
          //box-shadow:0px 0px 10px rgba(0,0,0,0.2);
          border-radius:3px;
          border:0px;

          outline:0px;
          background-color:#fff;
          cursor:pointer;
          padding-left:60px;
          position:absolute;
          top:6px;
          left:12px;



          &.error{
            border:1px solid red;
          }
        }


    }

    div.error{
      border:1px solid red;
    }

    button[type='submit']{
      display:block;
      color:#fff;
      background-color:#4caf50;
      border:0px;
      border-radius:3px;
      padding:14px;
      padding-right:20px;
      outline:none;
      text-align:left;
      font-size:14px;
      text-transform: uppercase;
      letter-spacing:2px;
      cursor:pointer;
      position:relative;
      padding-left:50px;
      margin-left:auto;
      transition:transform 0.3s ease-in-out;

      @media screen and (max-width:500px){
        margin-right:auto;
      }

      &:hover{
        transform:scale(1.1);
      }

      ion-icon, svg.ionicon{
        position:absolute;
        top:14px;
        cursor:pointer;
        font-size:20px;
        width:20px;
        height:20px;
        left:14px;
      }

      &.rightIcon{
        padding-right:50px;
        padding-left:20px;
        margin-left:auto;
        display:block !important;
        width:fit-content;
        width:-webkit-fit-content;   width:-moz-fit-content;

        ion-icon, svg.ionicon{
          left:auto;
          right:14px;
        }
      }

    }

  }

  .checkboxHolder{
    padding-top:50px;

    &.maxHeight{
      @media screen and (min-width:1000px){
        max-height:290px;
        overflow-x:hidden;
        overflow-y:auto;
      }
    }

    label{
      margin-bottom:0px !important;
      border-bottom:1px solid #ececec;

    }
  }

  .checkboxLabel{
    span{
      opacity:1 !important;
      top:20px !important;
      text-transform:none !important;
      font-weight:bold !important;
      font-size:14px !important;

    }
  }

button[data-formSubmit]{
  display:block;
  color:#fff;
  background-color:#4caf50;
  border:0px;
  border-radius:3px;
  padding:14px;
  padding-right:20px;
  outline:none;
  text-align:left;
  font-size:14px;
  text-transform: uppercase;
  letter-spacing:2px;
  cursor:pointer;
  position:relative;
  padding-left:50px;
  margin-left:auto;
  transition:transform 0.3s ease-in-out;

  &:hover{
    transform:scale(1.1);
  }

  ion-icon, svg.ionicon{
    position:absolute;
    top:14px;
    cursor:pointer;
    font-size:20px;
    width:20px;
    height:20px;
    left:14px;
  }

}

.cmsForm{
  //transition:all 0.5s ease-in-out;
  overflow:hidden;
  .formSuccess{
    height:0px;
    transition:all 0.5s ease-in-out;
    transform:rotateX(90deg);

    &.show{
      transform:rotateX(0deg);
      height:auto;
    }
  }

  label{
    span{
      opacity:0;
      transition:opacity 0.5s ease-in-out;
      position:absolute;
      left:60px;
      top:7px;
      font-size:10px;
      color:#666;
      text-transform:uppercase;
    }

    .requiredLabel{
      color:red;
      font-weight:bold;
      display:inline-block;
    }

    input, textarea{
      transition:padding 0.3s ease-in-out !important;
    }



    &.withLabel{
      span{
        opacity:1;
      }
      input[type="text"], textarea,select{
        padding-top:26px !important;
      }
    }
  }



  &.hide{
    transform:rotateX(90deg);
  }
}



.imageField{
  box-shadow:0px 0px 10px rgba(0,0,0,0.2);
  border-radius:3px;
  border:0px;
  outline:0px;
  background-color:#fff;
  padding:10px;
  text-align:center;
  margin-bottom:20px;

  .helpText{
    display:block;
    color:#666;
    font-size:14px;
    text-align:center;
    padding:5px;

    .ionicon{
      font-size:16px;
      width:22px;
      height:22px;
      position:relative;
      top:6px;
      display:inline-block;
    }
  }

  img{
    max-width:300px;
    max-height:150px;
    margin-top:10px;
  }

  button{
    width:100%;
    text-align:center;
    display:block;
    color:#fff;
    background-color:#0277bd;
    border:0px;
    border-radius:3px;
    padding:14px;
    padding-right:20px;
    outline:none;
    text-align:center;
    font-size:14px;
    text-transform: uppercase;
    letter-spacing:2px;
    cursor:pointer;
    position:relative;
    padding-left:50px;
    margin-bottom:0px;
    margin-left:auto;
    transition:transform 0.3s ease-in-out;

    &:hover{
      transform:scale(1.1);
    }

    svg{
      color:#fff;
      position:absolute;
      top:14px;
      width:20px;
      height:20px;
      cursor:pointer;
      font-size:20px;
      left:14px;
    }
  }
}

select{
  -webkit-appearance: none;
}

select[multiple]{
  option{
    padding:20px;
    border-bottom:1px solid #ececec;
  }

}

button.tox-tbtn{
  color:#000 !important;
  text-align:center !important;
  span{

    opacity:1 !important;
  }
}

.tox-tbtn__select-chevron{
  display:inline-block !important;
  position:relative !important;
  top:5px !important;
}

@media screen and (max-width:500px){
  .form{
    padding:10px;
    padding-top:10px;
  }
}

@keyframes loadingAnimation{
  0%{
    width:0px;
  }

  100%{
    width:100%;
  }
}