/*
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
*/
/* 
    Created on : 16/03/2022, 04:58:54 PM
    Author     : crisa
*/
        
/****************** INPUT FORMLARIOS ********************/
/****************** INPUT FORMLARIOS ********************/
/****************** INPUT FORMLARIOS ********************/

    /*@import url('https://fonts.googleapis.com/css2?family=Lato&display=swap');
    body {
        box-sizing: border-box;
        margin: 0;
        padding: 0;
        background-color: white;
        font-family: "lato", sans-serif;
      }*/
    .signupFrm {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100vh;
      }
    .form {
        background-color: white;
        width: 400px;
        border-radius: 8px;
        padding: 20px 40px;
        box-shadow: 0 10px 25px rgba(92, 99, 105, .2);
    }

    .title {
        font-size: 50px;
        margin-bottom: 50px;
    }

    .inputContainer {
        position: relative;
        height: 35px;
        width: 100%;/*90%;*/
        margin-bottom: 30px;
    }
    .input {
        position: absolute;
        top: 0px;
        left: 0px;
        height: 50px;/*100%;*/
        width: 100%;
        border: 1px solid #DADCE0;
        border-radius: 7px;
        font-size: 11x;
        /*padding: 0 20px;*/
        outline: none;
        /*background: none;*/
        color: #2C3E50;
        z-index: 1;
    }
    
    .select {
        position: absolute;
        height: 50px;/*100%;*/
        width: 100%;
    }

    ::placeholder {
        color: lightgray;/*transparent;*/
    }
    .label {
        /*position: absolute;
        top: 15px;
        left: 15px;
        padding: 0 4px;
        background-color: white;
        color: gray;
        font-size: 16px;
        transition: 0.5s;
        z-index: 0;*/
        transition: 0.5s;
        position: absolute;
        top: -18px;
        left: 3px;
        padding: 0 4px;
        background-color: white;
        z-index: 10;
        font-size: 11px;
        font-weight: 600;
        color: #2E86C1;/*gray;#1266F1;*/
    }

    
    /*.input:focus + .label {
        top: -5px;
        left: 3px;
        z-index: 10;
        font-size: 11px;
        font-weight: 600;
        color: #2E86C1;
    }*/
    .input:focus {
        border: 1px solid #2E86C1;
        box-shadow: inset 0 0 5px #2E86C1;
    }
    /*
    .input:not(:placeholder-shown)+ .label {
        top: -5px;
        left: 3px;
        z-index: 10;
        font-size: 11px;
        font-weight: 600;
        color: #2E86C1;
    }¨*/



    .submitBtn {
        /*display: block;*/
        margin-left: auto;
        padding: 15px 20px;
        /*border: none;*/
        background-color: purple;
        border: 2px solid purple;
        color: white;
        border-radius: 6px;
        cursor: pointer;
        font-size: 16px;
        margin-top: 20px;
    }

    .submitBtn:hover {
        background-color: #9867C5;
        /*transform: translateY(-2px);*/
    }

    /*<input type="submit" class="submitBtn btn-sm" value="Sign up">*/
    /*<div class="form-group">
          <div class="signupFrm">
          <form action="" class="form">
            <h1 class="title">Sign up</h1>

            <div class="inputContainer">
              <input type="text" class="input" placeholder="a">
              <label for="" class="label">Username</label>
            </div>
            <input type="submit" class="submitBtn btn-sm" value="Sign up">
          </form>
        </div>
      </div>*/